@charset "UTF-8";

.book {
    background-color: #f6e5cc;
}
img {
    max-width: 100%;
    pointer-events: none;
}

/* ファーストビュー */
.btop {
    background-image: url(../images/book/btop_bg.jpg);
    height: 600px;
    background-size: cover;
}
.btop .bfv_txt {
    font-size: 32px;
    text-align: center;
    padding-top:200px;
}
.btop .bbtn ul {
    display: flex;
    max-width: 1200px;
    width: 96%;
    margin: 0 auto;
    gap: 30px;
    padding-top: 60px;
    list-style: none;
}
.btop .bbtn li {
    width: calc((100%/3) - 20px );
}
.btop .bbtn .eb {
    font-size: 24px;
    border-radius: 30px;
    padding: 30px 45px;
    color: #332618;
    text-decoration: none;
    text-align: center;
    display: block;
}
.btop .bbtn .wb,
.btop .bbtn .db {
    font-size: 24px;
    border-radius: 30px;
    padding: 30px 45px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    display: block;
}
.btop .bbtn .eb img {
    width: 38px;
    height: 38px;
    display: block;
    margin: 0 auto;
    padding-top: 14px;
}
.btop .bbtn .wb img,
.btop .bbtn .db img {
    width: 38px;
    height: 38px;
    display: block;
    margin: 0 auto;
    padding-top: 14px;
}
.btop .bbtn a:hover {
    opacity: 0.8;
}
.btop .bbtn .eb {
    background-color: #fff352;
}
.btop .bbtn .wb {
    background-color: #e4007f;
}
.btop .bbtn .db {
    background-color: #00a1e9;
}

/* ここから各部門 */
.ehon,
.design,
.worldtravel {
    padding: 100px 2% 80px;
}
.b_t {
    padding-bottom: 100px;
}
.b_01 h2,
.b_02 h2,
.b_03 h2 {
    font-size: 34px;
    text-align: center;
    margin-bottom: 30px;
}
.b_01 .sbt,
.b_02 .sbt,
.b_03 .sbt {
    font-size: 24px;
    line-height: 1.6;
    text-align: center;
}
.b_01_u,
.b_03_u {
    display: flex;
    justify-content: center;
    gap: 40px;
}
.b_02_u {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 40px;
}
.bimg_01,
.bimg_02,
.bimg_03 {
    width: 520px;
}
.bimg_01 img,
.bimg_02 img,
.bimg_03 img {
    width: 520px;
    margin-bottom: 20px;
}

.bimg_01 .amazonlink,
.bimg_01 .e_amazonlink,
.bimg_02 .amazonlink,
.bimg_03 .amazonlink {
    color: #332618;
    position: relative;
    display: inline-block;
    text-decoration: none;
}
.bimg_01 .e_amazonlink {
    margin-left: 15px;
}
.bimg_01 .amazonlink::after,
.bimg_01 .e_amazonlink::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #e45e32;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: transform .3s;
}
.bimg_01 .amazonlink:hover::after,
.bimg_01 .e_amazonlink:hover::after {
    transform: scale(1, 1);
}
.bimg_01 .amazonlink:hover,
.bimg_01 .e_amazonlink:hover{
    color: #e45e32;
}
.bimg_02 .amazonlink::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #002ae6;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: transform .3s;
}
.bimg_02 .amazonlink:hover::after {
    transform: scale(1, 1);
}
.bimg_02 .amazonlink:hover{
    color: #002ae6;
}
.bimg_03 .amazonlink::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #d3381c;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: transform .3s;
}
.bimg_03 .amazonlink:hover::after {
    transform: scale(1, 1);
}
.bimg_03 .amazonlink:hover {
    color: #d3381c;
}

.btext_01,
.btext_02,
.btext_03 {
    width: 520px;
}
.btext_01 h3,
.btext_02 h3,
.btext_03 h3 {
    font-size: 32px;
    line-height: 1.4;
    margin-top: 30px;
    margin-bottom: 70px;
}
.btext_01 p,
.btext_02 p,
.btext_03 p {
    font-size: 24px;
    line-height: 1.4;
    margin-bottom: 20px;
}
.review {
    max-width: 1200px;
    margin: 35px auto 0;
}
.review p {
    margin: 0 auto 20px;
    font-size: 16px;
    line-height: 1.4;
}


/* 絵本 */
.ehon {
    background-color: #fffeee;
}
.bimg_01 img {
    width: 510px;
    box-shadow: 10px 10px 0 #e0c8b1;
    display: block;
}

/* 絵本アコーディオン */
.ehon_ac .accordion_one {
    max-width: 500px;
    margin: 80px auto 0;
}
.ehon_ac .accordion_one .accordion_header {
    background-color: #332618;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    padding: 20px 11%;
    text-align: center;
    position: relative;
    z-index: +1;
    cursor: pointer;
    transition-duration: 0.2s;
  }
.ehon_ac .accordion_one .accordion_header:hover {
    opacity: .8;
  }
.ehon_ac .accordion_one .accordion_header .i_box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 5%;
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    margin-top: -20px;
    box-sizing: border-box;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
}
.ehon_ac .accordion_one .accordion_header.stay .i_box {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.ehon_ac .accordion_one .accordion_header .i_box .one_i {
    display: block;
    width: 18px;
    height: 18px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
    position: relative;
}
.ehon_ac .accordion_one .accordion_header.stay .i_box .one_i {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.ehon_ac .accordion_one .accordion_header.stay.open .i_box .one_i {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.ehon_ac .accordion_one .accordion_header.open .i_box {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
.ehon_ac .accordion_one .accordion_header.stay.open .i_box {
    -webkit-transform: rotate(315eg);
    transform: rotate(315deg);
}
.ehon_ac .accordion_one .accordion_header .i_box .one_i:before, .s_03 .accordion_one .accordion_header .i_box .one_i::after {
    display: flex;
    content: '';
    background-color: #fff;
    border-radius: 10px;
    width: 18px;
    height: 4px;
    position: absolute;
    top: 7px;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transform-origin: center center;
}
.ehon_ac .accordion_one .accordion_header .i_box .one_i::before {
    width: 4px;
    height: 18px;
    top: 0;
    left: 7px;
}
.ehon_ac .accordion_one .accordion_header.stay .i_box .one_i::before {
    content: none;
}
.ehon_ac .accordion_one .accordion_header.open .i_box .one_i::before {
    content: none;
}
.ehon_ac .accordion_one .accordion_header.stay.open .i_box .one_i::before {
    content: "";
}
.ehon_ac .accordion_one .accordion_header.open .i_box .one_i::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.ehon_ac .accordion_one .accordion_header.stay.open .i_box .one_i::after {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.ehon_ac .accordion_one .accordion_inner {
    display: none;
    padding: 30px 30px;
    border-left: 2px solid #332618;
    border-right: 2px solid #332618;
    border-bottom: 2px solid #332618;
    box-sizing: border-box;
    background-color: #fff;
}
.ehon_ac .accordion_one .accordion_inner.stay {
    display: block;
}
.ehon_ac .accordion_one .accordion_inner .box_one {
    height: 120px;
}
.ehon_ac .accordion_one .accordion_inner p.txt_ac {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 0;
}
.ehon_ac .accordion_one .accordion_inner p.txt_ac_t {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 0;
    margin-top: 10px;
}
/* ここまで */

/* デザイン */
.design {
    background-color: #d3eced;
}
.bimg_02 img {
    width: 510px;
    box-shadow: 10px 10px 0 #c0dee0;
    display: block;
}

/* 世界旅行 */
.worldtravel {
    background-color: #f2dce3;
}
.bimg_03 img {
    width: 510px;
    box-shadow: 10px 10px 0 #ebbecc;
    display: block;
}

/* デザインと世界旅行のアコーディオン */
.design_act .accordion_two,
.worldtravel_act .accordion_two {
    max-width: 500px;
    margin: 0 auto;
}
.design_act .accordion_two .accordion_header,
.worldtravel_act .accordion_two .accordion_header {
    background-color: #332618;
    color: #fff;
    font-size: 26px;
    font-weight: bold;
    padding: 20px 11%;
    text-align: center;
    position: relative;
    z-index: +1;
    cursor: pointer;
    transition-duration: 0.2s;
}
.design_act .accordion_two .accordion_header:hover,
.worldtravel_act .accordion_two .accordion_header:hover {
    opacity: .8;
}
.design_act .accordion_two .accordion_header .i_box,
.worldtravel_act .accordion_two .accordion_header .i_box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 5%;
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    margin-top: -20px;
    box-sizing: border-box;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
}
.design_act .accordion_two .accordion_header .i_box .two_i,
.worldtravel_act .accordion_two .accordion_header .i_box .two_i {
    display: block;
    width: 18px;
    height: 18px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
    position: relative;
}
.design_act .accordion_two .accordion_header.open .i_box,
.worldtravel_act .accordion_two .accordion_header.open .i_box {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
.design_act .accordion_two .accordion_header .i_box .two_i:before, .s_01 .accordion_two .accordion_header .i_box .two_i::after,
.worldtravel_act .accordion_two .accordion_header .i_box .two_i:before, .s_01 .accordion_two .accordion_header .i_box .two_i::after {
    display: flex;
    content: '';
    background-color: #fff;
    border-radius: 10px;
    width: 18px;
    height: 4px;
    position: absolute;
    top: 7px;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transform-origin: center center;
}
.design_act .accordion_two .accordion_header .i_box .two_i::before,
.worldtravel_act .accordion_two .accordion_header .i_box .two_i::before {
    width: 4px;
    height: 18px;
    top: 0;
    left: 7px;
}
.design_act .accordion_two .accordion_header.open .i_box .two_i::before,
.worldtravel_act .accordion_two .accordion_header.open .i_box .two_i::before {
    content: none;
}
.design_atc .accordion_two .accordion_header.open .i_box .two_i::after,
.worldtravel_act .accordion_two .accordion_header.open .i_box .two_i:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.design_act .accordion_two .accordion_inner,
.worldtravel_act .accordion_two .accordion_inner {
    display: none;
    padding: 30px 30px;
    border-left: 2px solid #332618;
    border-right: 2px solid #332618;
    border-bottom: 2px solid #332618;
    box-sizing: border-box;
    background-color: #fff;
}
.design_act .accordion_two .accordion_inner .box_two,
.worldtravel_act .accordion_two .accordion_inner .box_two {
    height: 120px;
}
.design_act .accordion_two .accordion_inner p.txt_ac,
.worldtravel_act .accordion_two .accordion_inner p.txt_ac {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 0;
}