@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500&display=swap");
.bl_section_stylebook_slide { -ms-flex-align: center; -ms-flex-pack: justify; -webkit-box-align: center; -webkit-box-pack: justify; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; }

html { -ms-scroll-chaining: none; -webkit-text-size-adjust: none; height: 100%; overflow-y: scroll; overscroll-behavior: none; }

body { bottom: 0; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; left: 0; position: relative; right: 0; top: 0; }

@-webkit-keyframes slide_anime { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  50% { -webkit-transform: translateX(30px); transform: translateX(30px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); } }

@keyframes slide_anime { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  50% { -webkit-transform: translateX(30px); transform: translateX(30px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); } }

.bl_section_stylebook { background: -webkit-gradient(linear, left top, left bottom, from(#EDEDF1), color-stop(79%, #EDEDF1), color-stop(21%, #19696E), to(#19696E)); background: linear-gradient(180deg, #EDEDF1 0%, #EDEDF1 79%, #19696E 21%, #19696E 100%); padding: 115px 0 3.4%; position: relative; }

@media screen and (max-width: 768px) { .bl_section_stylebook { background: #EDEDF1; padding: 90px 0 13%; } }

.bl_section_stylebook_full { background: #EDEDF1; }

@media screen and (max-width: 768px) { .bl_section_stylebook_full { padding: 33% 0 6%; } }

@media screen and (max-width: 768px) { .bl_section_stylebook_full .js_style_slider { margin-bottom: 18%; } }

.bl_section_stylebook .ly_main_inner { margin-top: -1%; }

@media screen and (min-width: 1281px) { .bl_section_stylebook .ly_main_inner { margin-top: 0; } }

@media screen and (max-width: 768px) { .bl_section_stylebook .ly_main_inner { margin-top: 0; } }

.bl_section_stylebook .slick-initialized .slick-slide { display: -webkit-box; display: -ms-flexbox; display: flex; }

.bl_section_stylebook_slide { -ms-flex-pack: distribute; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-around; min-height: 1013px; }

@media screen and (min-width: 769px) and (max-width: 1000px) { .bl_section_stylebook_slide { min-height: 800px; } }

@media screen and (max-width: 768px) { .bl_section_stylebook_slide { -ms-flex-direction: column; -webkit-box-direction: normal; -webkit-box-orient: vertical; flex-direction: column; min-height: 1553px; } }

@media screen and (min-width: 1500px) { .bl_section_stylebook_slide_full { min-height: 820px; } }

@media screen and (min-width: 1301px) and (max-width: 1500px) { .bl_section_stylebook_slide_full { min-height: 725px; } }

@media screen and (min-width: 1201px) and (max-width: 1300px) { .bl_section_stylebook_slide_full { min-height: 650px; } }

@media screen and (min-width: 1101px) and (max-width: 1200px) { .bl_section_stylebook_slide_full { min-height: 600px; } }

@media screen and (min-width: 1001px) and (max-width: 1100px) { .bl_section_stylebook_slide_full { min-height: 550px; } }

@media screen and (min-width: 769px) and (max-width: 1000px) { .bl_section_stylebook_slide_full { min-height: 434px; } }

@media screen and (max-width: 768px) { .bl_section_stylebook_slide_full { min-height: 930px; } }

.bl_section_stylebook_ttl { position: relative; }

.bl_section_stylebook_ttl::after { -webkit-transform: translateX(-50%); background-color: #1A1A1A; bottom: -175%; content: ''; display: block; height: 1px; left: 50%; position: absolute; transform: translateX(-50%); width: 33px; }

@media screen and (max-width: 768px) { .bl_section_stylebook_ttl::after { bottom: -150%; } }

.bl_section_stylebook_ttl_img { margin: 0 auto 3.5%; width: 10%; }

@media screen and (max-width: 768px) { .bl_section_stylebook_ttl_img { margin: 0 auto 10%; width: 29%; } }

.bl_section_stylebook_main { position: relative; width: 38%; z-index: 1; }

@media screen and (max-width: 768px) { .bl_section_stylebook_main { left: -10px; margin-bottom: 16%; position: relative; width: 84%; } }

.bl_section_stylebook_main::after { background-color: #FFEE00; content: ''; height: 100%; left: 8%; position: absolute; top: 6%; width: 100%; z-index: -1; }

@media screen and (max-width: 768px) { .bl_section_stylebook_main::after { left: 9%; } }

@media screen and (min-width: 769px) { .bl_section_stylebook_main.is_square { margin-top: 30px; } }

@media screen and (max-width: 768px) { .bl_section_stylebook_main.is_square { margin-top: 0; } }

.bl_section_stylebook_detail { -ms-flex-direction: column; -webkit-box-direction: normal; -webkit-box-orient: vertical; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; padding-left: 5.5%; padding-top: 3%; width: 53%; }

@media screen and (max-width: 768px) { .bl_section_stylebook_detail { padding-left: 0; padding-top: 0; width: 100%; } }

.bl_section_stylebook_detail_type { -ms-flex-order: 1; -webkit-box-ordinal-group: 2; margin-bottom: 8%; order: 1; width: 53%; }

@media screen and (max-width: 768px) { .bl_section_stylebook_detail_type { -ms-flex-order: 2; -webkit-box-ordinal-group: 3; margin-bottom: 6%; order: 2; } }

.bl_section_stylebook_detail_txt { -ms-flex-order: 2; -webkit-box-ordinal-group: 3; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; letter-spacing: 0.12rem; line-height: 2.3; margin-bottom: 16%; order: 2; position: relative; }

@media screen and (max-width: 768px) { .bl_section_stylebook_detail_txt { -ms-flex-order: 3; -webkit-box-ordinal-group: 4; letter-spacing: 0.08rem; margin-bottom: 10%; order: 3; } }

.bl_section_stylebook_detail_txt::after { background-color: #1A1A1A; content: ''; display: block; height: 1px; left: 0; position: absolute; top: 131%; width: 92px; }

@media screen and (max-width: 768px) { .bl_section_stylebook_detail_txt::after { opacity: 0; top: -160%; } }

.bl_section_stylebook_detail_gallery { -ms-flex-order: 3; -webkit-box-ordinal-group: 4; display: -webkit-box; display: -ms-flexbox; display: flex; list-style-type: none; margin-bottom: 15%; order: 3; position: relative; }

@media screen and (min-width: 750px) and (max-width: 1280px) { .bl_section_stylebook_detail_gallery { -ms-flex-wrap: wrap; flex-wrap: wrap; } }

@media screen and (max-width: 768px) { .bl_section_stylebook_detail_gallery { -ms-flex-order: 1; -ms-flex-wrap: wrap; -webkit-box-ordinal-group: 2; flex-wrap: wrap; margin: 0 auto; margin-bottom: 22%; order: 1; width: 95%; } }

@media screen and (max-width: 768px) { .bl_section_stylebook_detail_gallery::after { background-color: #1A1A1A; content: ''; display: block; height: 1px; left: 0; position: absolute; top: 115%; width: 92px; } }

.bl_section_stylebook_detail_gallery_link { border-bottom: 7px solid transparent; margin-bottom: 1%; margin-right: 3%; padding-bottom: 1%; width: 50px; }

@media screen and (max-width: 768px) { .bl_section_stylebook_detail_gallery_link { margin-bottom: 3%; margin-right: 2%; padding-bottom: 2%; } }

.bl_section_stylebook_detail_gallery_link_img { min-width: 50px; width: 50px; }

.bl_section_stylebook_detail_btn { -ms-flex-order: 4; -webkit-box-ordinal-group: 5; order: 4; }

.bl_section_stylebook_detail_link { background: #1A1A1A; border: 1px solid #1A1A1A; display: inline-block; padding: 2.2%; position: relative; width: 58%; }

@media screen and (max-width: 768px) { .bl_section_stylebook_detail_link { padding: 4%; width: 100%; } }

.bl_section_stylebook_detail_link::after { -webkit-transition: .5s; background-color: #fff; content: ''; display: inline-block; height: 1px; left: 29%; position: absolute; top: 50%; transition: .5s; width: 40px; }

@media screen and (max-width: 768px) { .bl_section_stylebook_detail_link::after { left: 34%; } }

@media screen and (min-width: 769px) { .bl_section_stylebook_detail_link:hover { background: #fff; }
  .bl_section_stylebook_detail_link:hover .bl_section_stylebook_detail_link_mask { opacity: 1; }
  .bl_section_stylebook_detail_link:hover .bl_section_stylebook_detail_link_img { opacity: 0; }
  .bl_section_stylebook_detail_link:hover::after { -webkit-transform: translateX(50px); background: #1A1A1A; transform: translateX(50px); } }

.bl_section_stylebook_detail_link_img { width: 23%; }

@media screen and (max-width: 768px) { .bl_section_stylebook_detail_link_img { width: 30%; } }

.bl_section_stylebook_detail_link_mask { -webkit-transform: translateY(-50%); opacity: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 20.5%; }

@media screen and (max-width: 768px) { .bl_section_stylebook_detail_link_mask { width: 30%; } }

.bl_section_stylebook_arrow.prev-arrow { -webkit-transform: translateY(-50%); cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); width: 3%; }

@media screen and (max-width: 768px) { .bl_section_stylebook_arrow.prev-arrow { top: 20%; width: 7%; } }

.bl_section_stylebook_arrow.next-arrow { -webkit-transform: translateY(-50%); cursor: pointer; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 3%; }

@media screen and (max-width: 768px) { .bl_section_stylebook_arrow.next-arrow { top: 20%; width: 7%; } }

.bl_section_stylebook_arrow_semi.prev-arrow { top: 35%; }

@media screen and (max-width: 768px) { .bl_section_stylebook_arrow_semi.prev-arrow { top: 20%; } }

.bl_section_stylebook_arrow_semi.next-arrow { top: 35%; }

@media screen and (max-width: 768px) { .bl_section_stylebook_arrow_semi.next-arrow { top: 20%; } }

@media screen and (max-width: 768px) { .bl_section_stylebook_arrow_full.prev-arrow { -webkit-transform: translateY(-50%); cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); width: 3%; } }

@media screen and (max-width: 768px) and (max-width: 768px) { .bl_section_stylebook_arrow_full.prev-arrow { top: 32%; width: 7%; } }

@media screen and (max-width: 768px) { .bl_section_stylebook_arrow_full.next-arrow { -webkit-transform: translateY(-50%); cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); width: 3%; } }

@media screen and (max-width: 768px) and (max-width: 768px) { .bl_section_stylebook_arrow_full.next-arrow { top: 32%; width: 7%; } }

.bl_section_cloth { -ms-flex-align: end; -ms-flex-pack: justify; -webkit-box-align: end; -webkit-box-pack: justify; align-items: flex-end; background: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; margin-top: 13%; padding: 6% 7%; width: 100%; }

@media screen and (max-width: 768px) { .bl_section_cloth { -ms-flex-align: baseline; -ms-flex-direction: column; -ms-flex-pack: center; -webkit-box-align: baseline; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-box-pack: center; align-items: baseline; flex-direction: column; justify-content: center; margin-top: 3%; padding: 13% 6.5%; } }

.bl_section_cloth_wrap { margin-bottom: auto; width: 75%; }

@media screen and (max-width: 768px) { .bl_section_cloth_wrap { margin-bottom: 8%; width: 100%; } }

.bl_section_cloth_pattern { margin-bottom: 6%; }

@media screen and (max-width: 768px) { .bl_section_cloth_pattern { margin-bottom: 17%; } }

.bl_section_cloth_pattern_ttl { margin-bottom: 2%; }

@media screen and (max-width: 768px) { .bl_section_cloth_pattern_ttl { margin-bottom: 7%; } }

.bl_section_cloth_pattern_ttl img { width: 16.5%; }

@media screen and (max-width: 768px) { .bl_section_cloth_pattern_ttl img { width: 44%; } }

.bl_section_cloth_pattern_gallery { -ms-flex-pack: start; -webkit-box-pack: start; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: flex-start; margin-bottom: 2%; }

@media screen and (max-width: 768px) { .bl_section_cloth_pattern_gallery { -ms-flex-wrap: wrap; flex-wrap: wrap; } }

.bl_section_cloth_pattern_gallery_list { margin-right: 2%; width: 60px; }

@media screen and (max-width: 768px) { .bl_section_cloth_pattern_gallery_list { margin-bottom: 2%; } }

.bl_section_cloth_pattern_gallery_list img { width: 100%; }

.bl_section_cloth_pattern_txt { font-family: 'Noto Sans JP', sans-serif; font-size: 10px; letter-spacing: 0.04rem; }

.bl_section_cloth_custom_ttl { margin-bottom: 2%; }

@media screen and (max-width: 768px) { .bl_section_cloth_custom_ttl { margin-bottom: 10%; } }

.bl_section_cloth_custom_ttl img { width: 25%; }

@media screen and (max-width: 768px) { .bl_section_cloth_custom_ttl img { width: 61%; } }

.bl_section_cloth_custom_dl { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 2%; }

@media screen and (max-width: 768px) { .bl_section_cloth_custom_dl { -ms-flex-direction: column; -webkit-box-direction: normal; -webkit-box-orient: vertical; flex-direction: column; margin-bottom: 2.8%; } }

.bl_section_cloth_custom_dl_dt { display: inline-block; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; height: 25px; padding: .2em 1.6em .2em .8em; position: relative; width: 115px; z-index: 1; }

@media screen and (max-width: 768px) { .bl_section_cloth_custom_dl_dt { width: 100%; } }

.bl_section_cloth_custom_dl_dt::before { -webkit-transform: scaleY(1.3) perspective(1em) rotateX(5deg); -webkit-transform-origin: bottom left; background: #FFEE00; bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; transform: scaleY(1.3) perspective(1em) rotateX(5deg); transform-origin: bottom left; z-index: -1; }

@media screen and (max-width: 768px) { .bl_section_cloth_custom_dl_dt::before { -webkit-transform: perspective(2.2em) rotateX(4deg); transform: perspective(2.2em) rotateX(4deg); } }

.bl_section_cloth_custom_dl_dd { font-family: 'Noto Sans JP', sans-serif; font-size: 12px; padding: .2em 0 .2em .8em; }

@media screen and (max-width: 768px) { .bl_section_cloth_custom_dl_dd { padding: .5em 0 1.2em; } }

.bl_section_cloth_link { background: #1A1A1A; border: 1px solid #1A1A1A; display: inline-block; padding: 4.2%; position: relative; width: 240px; }

@media screen and (min-width: 831px) and (max-width: 1100px) { .bl_section_cloth_link { width: 180px; } }

@media screen and (min-width: 769px) and (max-width: 830px) { .bl_section_cloth_link { width: 165px; } }

@media screen and (max-width: 768px) { .bl_section_cloth_link { padding: 4%; } }

.bl_section_cloth_link::after { -webkit-transition: .5s; background-color: #fff; content: ''; display: inline-block; height: 1px; left: 39%; position: absolute; top: 50%; transition: .5s; width: 40px; }

@media screen and (max-width: 768px) { .bl_section_cloth_link::after { left: 34%; } }

@media screen and (min-width: 769px) { .bl_section_cloth_link:hover { background: #fff; }
  .bl_section_cloth_link:hover .bl_section_cloth_link_mask { opacity: 1; }
  .bl_section_cloth_link:hover .bl_section_cloth_link_img { opacity: 0; }
  .bl_section_cloth_link:hover::after { -webkit-transform: translateX(50px); background: #1A1A1A; transform: translateX(50px); } }

.bl_section_cloth_link_img { width: 34%; }

@media screen and (max-width: 768px) { .bl_section_cloth_link_img { width: 30%; } }

.bl_section_cloth_link_mask { -webkit-transform: translateY(-50%); opacity: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 30.5%; }

@media screen and (max-width: 768px) { .bl_section_cloth_link_mask { width: 30%; } }

#semi_order_style .modaal-wrapper { overflow: hidden; }

@media screen and (max-height: 1000px) { #semi_order_style .modaal-inner-wrapper { padding-bottom: 5px; padding-top: 20px; } }

@media screen and (max-width: 768px) { #semi_order_style .modaal-inner-wrapper { padding-left: 0; padding-right: 0; } }

@media (orientation: landscape) and (max-width: 768px) { #semi_order_style .modaal-inner-wrapper { padding-bottom: 0; padding-top: 0; } }

#semi_order_style .modaal-image .modaal-container { max-width: 1280px; }

@media only screen and (max-width: 1140px) { #semi_order_style .modaal-image .modaal-container { height: auto; max-width: 100%; width: 90%; } }

@media screen and (max-width: 768px) { #semi_order_style .modaal-image .modaal-container { width: 100%; } }

@media (orientation: landscape) and (max-width: 768px) { #semi_order_style .modaal-image .modaal-container { position: static; } }

@media (orientation: landscape) and (max-width: 768px) { #semi_order_style .modaal-content { -ms-flex-align: center; -webkit-box-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100vh; position: relative; } }

#semi_order_style .modaal-wrapper .modaal-close { right: -90px; }

@media screen and (max-height: 1000px) { #semi_order_style .modaal-wrapper .modaal-close { top: 10px; } }

@media only screen and (max-width: 1140px) { #semi_order_style .modaal-wrapper .modaal-close { right: -50px; top: 40px; } }

@media screen and (max-width: 768px) { #semi_order_style .modaal-wrapper .modaal-close { right: 0; } }

@media (orientation: portrait) and (max-width: 768px) { #semi_order_style .modaal-wrapper .modaal-close { top: 0; } }

@media (orientation: landscape) and (max-width: 768px) { #semi_order_style .modaal-wrapper .modaal-close { top: 10px; } }

#semi_order_style .modaal-wrapper .modaal-close::before, #semi_order_style .modaal-wrapper .modaal-close::after { height: 32px; top: -30px; width: 2px; }

@media only screen and (max-width: 1140px) { #semi_order_style .modaal-wrapper .modaal-close::before, #semi_order_style .modaal-wrapper .modaal-close::after { top: -72px; } }

@media screen and (max-width: 768px) { #semi_order_style .modaal-wrapper .modaal-close::before, #semi_order_style .modaal-wrapper .modaal-close::after { left: auto; } }

@media (orientation: portrait) and (max-width: 768px) { #semi_order_style .modaal-wrapper .modaal-close::before, #semi_order_style .modaal-wrapper .modaal-close::after { right: 20px; top: -40px; } }

@media (orientation: landscape) and (max-width: 768px) { #semi_order_style .modaal-wrapper .modaal-close::before, #semi_order_style .modaal-wrapper .modaal-close::after { right: 25px; top: 0; } }

#semi_order_style .modaal-gallery-item { width: 100% !important; }

@media (orientation: landscape) and (max-width: 768px) { #semi_order_style .modaal-gallery-item { position: static !important; } }

#semi_order_style .modaal-gallery-item-wrap { margin: 0 auto; max-height: 845px; max-width: 1280px; width: 100% !important; }

@media only screen and (min-width: 769px) and (max-width: 1140px) { #semi_order_style .modaal-gallery-item-wrap { max-height: 640px; max-width: 960px; } }

@media (orientation: landscape) and (max-width: 768px) { #semi_order_style .modaal-gallery-item-wrap { width: 70% !important; } }

@media (orientation: portrait) and (max-width: 768px) { #semi_order_style .modaal-gallery-item img { width: 100% !important; } }

@media only screen and (max-width: 1140px) { #semi_order_style .modaal-gallery-prev { left: -40px; } }

@media screen and (max-width: 768px) { #semi_order_style .modaal-gallery-prev { left: 0; } }

#semi_order_style .modaal-gallery-prev::before { -webkit-transform: rotate(-30deg); margin: 7px 0 0; transform: rotate(-30deg); }

#semi_order_style .modaal-gallery-prev::after { -webkit-transform: rotate(30deg); margin: -7px 0 0; transform: rotate(30deg); }

@media only screen and (max-width: 1140px) { #semi_order_style .modaal-gallery-next { right: -40px; } }

@media screen and (max-width: 768px) { #semi_order_style .modaal-gallery-next { right: 0; } }

#semi_order_style .modaal-gallery-next::before { -webkit-transform: rotate(-30deg); margin: -7px 0 0; transform: rotate(-30deg); }

#semi_order_style .modaal-gallery-next::after { -webkit-transform: rotate(30deg); margin: 7px 0 0; transform: rotate(30deg); }

#semi_order_style .modaal-gallery-control { background: rgba(255, 255, 255, 0.5); border-radius: 0; height: 105px; width: 40px; }

@media only screen and (max-width: 1140px) { #semi_order_style .modaal-gallery-control { -webkit-transform: translateY(-50%); height: 70px; top: 50%; transform: translateY(-50%); width: 30px; } }

#semi_order_style .modaal-gallery-control::after, #semi_order_style .modaal-gallery-control::before { background: #1A1A1A; height: 17px; left: 21px; top: 40px; width: 1px; }

@media only screen and (max-width: 1140px) { #semi_order_style .modaal-gallery-control::after, #semi_order_style .modaal-gallery-control::before { left: 16px; top: 24px; } }

.bl_cloth { position: relative; }

.bl_cloth_slide_arrow.prev-arrow { -webkit-transform: translateY(-50%); cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); width: 3%; }

@media screen and (max-width: 768px) { .bl_cloth_slide_arrow.prev-arrow { top: 50%; width: 3%; } }

.bl_cloth_slide_arrow.next-arrow { -webkit-transform: translateY(-50%); cursor: pointer; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 3%; }

@media screen and (max-width: 768px) { .bl_cloth_slide_arrow.next-arrow { top: 50%; width: 3%; } }