��@charset "utf-8"; /*================================ �0�0�0�0�0�0�0�0 ================================*/ .__yui .__mainvisual { position: relative; margin: auto; width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #0034A1; background-position: center top; background-repeat: no-repeat; background-image: url(/sites/default/files/shared_contents/furniture/special/yui/images/moon.jpg); background-size: cover; } .__yui .__mainvisual:before { content:""; display: block; padding-top: 110%; } .__yui .__mainvisual ._content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } @media screen and (max-width: 1024px) { .__yui .__mainvisual { background-image: url(/sites/default/files/shared_contents/furniture/special/yui/images/moon_sp.jpg); } .__yui .__mainvisual:before { content:""; display: block; padding-top: 300%; } } .__yui .__mainvisual .__h1{ width: 100%; height: 7%; overflow: hidden; display: flex; align-items: center; justify-content: center; } .__yui .__mainvisual .__h1 h1{ text-indent: 100%; white-space: nowrap; margin: 0 auto; margin-top: 2%; width: 100%; height: 50%; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-image: url(/sites/default/files/shared_contents/furniture/special/yui/images/sustainability.svg); background-size: contain; align-self: flex-start; } @media screen and (max-width: 1024px) { .__yui .__mainvisual .__h1 h1{ margin-top: 4%; width: 110px; height: 50%; } } .__yui .__mainvisual .__h2{ width: 100%; height: 47%; overflow: hidden; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 1024px) { .__yui .__mainvisual .__h2{ } } .__yui .__mainvisual .__h2 img{ margin: 0 auto; margin-top: 12%; width: 20%; max-width: 300px; overflow: hidden; align-self: flex-start; } @media screen and (max-width: 1024px) { .__yui .__mainvisual .__h2 img{ margin-top: 30%; width: 180px; height: 166px; } } .__yui .__mainvisual .__p{ width: 100%; height: 53%; overflow: hidden; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 1024px) { .__yui .__mainvisual .__p{ height: 57%; } } .__yui .__mainvisual p{ color: #fff; text-align: center; font-size: 1.2em; line-height: 2.3em; letter-spacing: .3em; } @media screen and (max-width: 1024px) { .__yui .__mainvisual p{ width: 80%; margin: 0 auto; text-align: justify; text-justify: inter-ideograph; font-size: 1em; line-height: 1.8em; letter-spacing: 0; } } /*================================ �0�0�0L0�vcY03d0n0�O$P ================================*/ .__yui .__core { margin: auto; width: 100%; height: auto; } .__yui .__core .__front{ margin: auto; width: 100%; height: auto; padding: 4rem 0 6rem; } @media screen and (max-width: 1024px) { .__yui .__core .__front{ padding: 3rem 0 4rem; } .__yui ._pages .__core .__front{ padding: 3rem 0 1rem; } } .__yui .__core .__front .__en{ text-align: center; font-size: 1.2em; line-height: 1em; font-weight: 300; letter-spacing: .1em; color: #0034A1; } @media screen and (max-width: 1024px) { .__yui .__core .__front .__en{ font-size: 1em; } } .__yui .__core .__front h3{ margin-top: 2rem; text-align: center; font-size: 1.6em; line-height: 1em; letter-spacing: .05em; font-weight: 500; color: #0034A1; } @media screen and (max-width: 1024px) { .__yui .__core .__front h3{ font-size: 1.3em; line-height: 1.8em; } } .__yui .__core .__values{ margin: auto; width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; flex-direction: row; } @media screen and (max-width: 1024px) { .__yui .__core .__values{ width: 80%; margin: auto; justify-content: center; flex-direction: column; } } .__yui .__core .__values div._value{ position: relative; width: 100%; height: 300px; background: #fff; border-right: 1px solid #0034A1; } .__yui .__core .__values div._value:last-child{ border-right: none; } @media screen and (max-width: 1024px) { .__yui .__core .__values div._value{ height: auto; border-right: none; border-bottom: 1px solid #0034A1; } .__yui .__core .__values div._value:last-child { border-bottom: none; } } .__yui ._pages .__core .__values div._value{ height: 200px; } @media screen and (max-width: 1024px) { .__yui ._pages .__core .__values div._value{ height: auto; } } .__yui .__core .__values div._value a { width: 100%; height: 100%; transition: all .6s ease-in; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; flex-direction: column; background-color: rgba(0, 52, 161, 0); } @media screen and (max-width: 1024px) { .__yui .__core .__values div._value a { border: none; padding: 40px 0; } .__yui ._pages .__core .__values div._value a { border: none; padding: 30px 0; } } .__yui .__core .__values div._value a:hover{ background-color: rgba(0, 52, 161, 0.1); } .__yui .__core .__values div._value ._box{ position: relative; width: 100%; height: 100%; text-align: center; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; flex-direction: column; } .__yui .__core .__values div._value ._box img{ display: block; } .__yui .__core .__values div._value ._box img._icon{ width: 4vw; min-width: 70px; height: auto; } @media screen and (max-width: 1024px) { .__yui .__core .__values div._value ._box img._icon{ width: 12vw; min-width: 3vw; } } .__yui ._pages .__core .__values div._value ._box img._icon{ width: 3vw; min-width: 50px; } @media screen and (max-width: 1024px) { .__yui ._pages .__core .__values div._value ._box img._icon{ width: 10vw; min-width: 2vw; } } .__yui .__core .__values div._value ._box h4{ margin-top: 3rem; font-size: 1.4em; line-height: 1em; font-weight: 700; color: #0034A1; -webkit-transition: all .6s; -ms-transition: all .6s; transition: all .6s; } @media screen and (max-width: 1024px) { .__yui .__core .__values div._value ._box h4{ font-size: 1.3em; margin-top: 1.6rem; } } .__yui ._pages .__core .__values div._value ._box h4{ margin-top: 2rem; font-size: 1.1em; line-height: 1em; } @media screen and (max-width: 1024px) { .__yui ._pages .__core .__values div._value ._box h4{ margin-top: 1rem; font-size: 1em; } } .__yui .__core .__values div._value a:hover ._box h4{ transform: scale(1.1); } .__yui .__core .__values div._value ._box img._arrow{ margin-top: 3rem; width: 20px; height: auto; -webkit-transition: all .6s; -ms-transition: all .6s; transition: all .6s; } @media screen and (max-width: 1024px) { .__yui .__core .__values div._value ._box img._arrow{ margin-top: 2rem; width: 16px; } } .__yui ._pages .__core .__values div._value ._box img._arrow{ margin-top: 2rem; width: 14px; } @media screen and (max-width: 1024px) { .__yui ._pages .__core .__values div._value ._box img._arrow{ margin-top: 1.5rem; width: 12px; } } .__yui .__core .__values div._value a:hover ._box img._arrow{ transform: translateY(10px); } /*================================ �0�0�0�0�0�0PDF ================================*/ .__yui ._pdf { margin: auto; width: 100%; height: auto; padding: 5rem 0; border-top: 1px solid #0034A1; } @media screen and (max-width: 1024px) { .__yui ._pdf { padding: 3rem 0; } } .__yui ._pdf._nbd { border-top: none; } .__yui ._pdf ul { display: flex; text-align: center; align-items: center; justify-content: center; column-gap: 2rem; height: 50px; } @media screen and (max-width: 1024px) { .__yui ._pdf ul { width: 80%; height: auto; margin: auto; flex-direction: column; row-gap: 1rem; } } .__yui ._pdf ul li { position: relative; height: 100%; vertical-align: middle; background-image: url(/sites/default/files/shared_contents/furniture/special/yui/obj/chevron-right.svg); background-position: right 1rem center; background-repeat: no-repeat; background-size: 6px; border: 1px solid #0034A1; padding: 0 3rem; } @media screen and (max-width: 1024px) { .__yui ._pdf ul li { width: 100%; height: 50px; } } .__yui ._pdf ul li a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .__yui ._pdf ul li a p{ width: 100%; color: #0034A1; font-size: .9em; border-bottom: 1px solid transparent; -webkit-transition: all .6s; -moz-transition: all .6s; -o-transition: all .6s; -ms-transition: all .6s; transition: all .6s; } @media screen and (max-width: 1024px) { .__yui ._pdf ul li a p{ } } .__yui ._pdf ul li a:hover p{ border-bottom: 1px solid #0034A1; } /*================================ �0�0�0�0�0�0�0�0�0 ================================*/ .__yui #cv_01:before, .__yui #cv_02:before, .__yui #cv_03:before, .__yui #cv_03_A:before, .__yui #cv_03_B:before, .__yui #cv_03_C:before, .__yui #cv_03_D:before, .__yui #cv_03_E:before, .__yui #cv_03_F:before, .__yui #cv_03_G:before { content: ''; display: block; height: 120px; margin-top: -120px; visibility: hidden; } @media screen and (max-width: 1024px) { .__yui #cv_01:before, .__yui #cv_02:before, .__yui #cv_03:before, .__yui #cv_03_A:before, .__yui #cv_03_B:before, .__yui #cv_03_C:before, .__yui #cv_03_D:before, .__yui #cv_03_E:before, .__yui #cv_03_F:before, .__yui #cv_03_G:before { height: 90px; margin-top: -90px; } } .__yui .__categolyvisual { position: relative; margin: auto; width: 100%; background-position: center bottom -50px; background-repeat: no-repeat; background-size: cover; background-color: #000; } .__yui .__categolyvisual:before { content:""; display: block; padding-top: 35%; } .__yui .__categolyvisual ._content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } @media screen and (max-width: 1024px) { .__yui .__categolyvisual:before { content:""; display: block; padding-top: 100%; } } .__yui .__categolyvisual ._overlay{ width: 100%; height: 100%; background: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.25)); background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.25)); background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.25)); } .__yui .cv01 .__categolyvisual { background-image: url(/sites/default/files/shared_contents/furniture/special/yui/images/mainbg01.jpg); } @media screen and (max-width: 1024px) { .__yui .cv01 .__categolyvisual { background-image: url(/sites/default/files/shared_contents/furniture/special/yui/images/mainbgsp01.jpg); } } .__yui .cv02 .__categolyvisual { background-image: url(/sites/default/files/shared_contents/furniture/special/yui/images/mainbg02.jpg); } @media screen and (max-width: 1024px) { .__yui .cv02 .__categolyvisual { background-image: url(/sites/default/files/shared_contents/furniture/special/yui/images/mainbgsp02.jpg); } } .__yui .cv03 .__categolyvisual { background-image: url(/sites/default/files/shared_contents/furniture/special/yui/images/mainbg03.jpg); } @media screen and (max-width: 1024px) { .__yui .cv03 .__categolyvisual { background-image: url(/sites/default/files/shared_contents/furniture/special/yui/images/mainbgsp03.jpg); } } .__yui .__categolyvisual .__h2{ width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-direction: column; flex-wrap: wrap; } .__yui .__categolyvisual .__h2 img{ display: block; width: 8%; max-width: 300px; overflow: hidden; } @media screen and (max-width: 1024px) { .__yui .__categolyvisual .__h2 img{ width: 20%; max-width: 20%; } } /*================================ \eQ ================================*/ .__yui .__intro { position: relative; margin: auto; padding-bottom: 5rem; width: 100%; height: auto; } @media screen and (max-width: 1024px) { .__yui .__intro { padding-bottom: 3rem; } } .__yui .__intro h3{ margin-top: 4rem; text-align: center; font-size: 2em; line-height: 1em; font-weight: 700; letter-spacing: .1em; color: #0034A1; } @media screen and (max-width: 1024px) { .__yui .__intro h3{ margin-top: 3rem; font-size: 1.4em; } } .__yui .__intro ._lead{ text-align: center; margin-top: 3rem; font-size: 1em; line-height: 2em; color: #0034A1; } @media screen and (max-width: 1024px) { .__yui .__intro ._lead{ width: 80%; margin: auto; margin-top: 2rem; font-size: 1em; line-height: 1.6em; text-align: justify; text-justify: inter-ideograph; } } /*================================ �N�O ================================*/ .__yui ._cases { position: relative; margin: auto; width: 94%; max-width: 1600px; height: auto; display: flex; justify-content: flex-start; flex-wrap: wrap; } .__yui ._cases ._case{ position: relative; width: 33.33%; height: auto; display: flex; flex-direction: column; border-bottom: 1px solid #0034A1; border-right: 1px solid #0034A1; padding: 30px; padding-bottom: 40px; } @media screen and (max-width: 1024px) { .__yui ._cases ._case{ width: 86%; margin: auto; padding: 0; padding-top: 30px; padding-bottom: 30px; border-bottom: none; border-right: none; border-top: 1px solid #0034A1; } } .__yui ._cases.__cat03 ._case:first-child{ border-top: none; } .__yui ._cases ._case:nth-child(3n){ border-right: none; } .__yui ._cases ._case:last-child{ border-bottom: none; } .__yui ._cases ._case.nb{ border-bottom: none; } .__yui ._cases ._case img{ width: 100%; height: auto; } .__yui ._cases ._case ._middle{ width: 100%; padding-top: 30px; } .__yui ._cases ._case h4{ width: 100%; margin: auto; font-size: 1em; line-height: 1.8em; font-weight: 700; color: #0034A1; } @media screen and (max-width: 1024px) { .__yui ._cases ._case h4{ font-size: 1em; line-height: 1.6em; font-weight: 700; letter-spacing: 0; } } .__yui ._cases ._case ._body{ width: 100%; margin: auto; padding-top: 1.5rem; text-align: justify; text-justify: inter-ideograph; font-size: 1em; line-height: 1.8em; font-weight: 400; color: #0034A1; } @media screen and (max-width: 1024px) { .__yui ._cases ._case ._body{ line-height: 1.7em; font-size: .9em; } } .__yui ._cases ._case ._link{ width: 100%; margin-top: auto; padding-top: 2rem; } @media screen and (max-width: 1024px) { .__yui ._cases ._case ._link{ padding-top: 1rem; font-size: .9em; } } .__yui ._cases ._case ._link a{ display: inline-block; font-size: 1em; line-height: 1.3em; font-weight: 500; background-position: left center; background-repeat: no-repeat; background-image: url(/sites/default/files/shared_contents/furniture/special/yui/obj/arrow-right-circle.svg); background-size: 1em; color: #0034A1; padding: 1rem 0; padding-left: 1.5em; border-bottom: 1px solid #fff; -webkit-transition: all .6s; -moz-transition: all .6s; -o-transition: all .6s; -ms-transition: all .6s; transition: all .6s; } .__yui ._cases ._case ._link a:hover{ border-bottom: 1px solid #0034A1; } .__yui ._cases ._case ._detaillink{ width: 100%; margin-top: auto; padding-top: 2rem; } @media screen and (max-width: 1024px) { .__yui ._cases ._case ._detaillink{ padding-top: 1rem; font-size: .9em; margin-bottom: 10px; } } .__yui ._cases ._case ._detaillink a{ display: block; width: 100%; height: 100%; font-size: 1em; line-height: 1em; font-weight: 400; text-align: center; padding: 1rem; border: 1px solid #0034A1; background-color: #fff; color: #0034A1; } .__yui ._cases ._case ._detaillink a span{ border-bottom: 1px solid transparent; -webkit-transition: all .6s; -moz-transition: all .6s; -o-transition: all .6s; -ms-transition: all .6s; transition: all .6s; } .__yui ._cases ._case ._detaillink a:hover span{ border-bottom: 1px solid #0034A1; } /*================================ �_�t�V ================================*/ .__jyunkanzu{ position: relative; width: 70%; max-width: 1100px; height: auto; margin: auto; } .__jyunkanzu.sp{ width: 90%; } .__jyunkanzu .__bg{ width: 100%; height: auto; } .__jyunkanzu .__bg img{ width: 100%; height: auto; } .__jyunkanzu .__button{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .__jyunkanzu .__button img{ position: absolute; width: auto; height: 6%; } .__jyunkanzu .__button img.z_a{ top: 20%; left: .2%; z-index: 1; } .__jyunkanzu .__button img.z_a-on{ top: 20%; left: .2%; opacity: 0; } .__jyunkanzu .__button a:hover img.z_a-on{ opacity: 1; } .__jyunkanzu .__button img.z_b{ top: 50%; left: 14%; z-index: 1; } .__jyunkanzu .__button img.z_b-on{ top: 50%; left: 14%; opacity: 0; } .__jyunkanzu .__button a:hover img.z_b-on{ opacity: 1; } .__jyunkanzu .__button img.z_c{ top: 12%; left: 42%; z-index: 1; } .__jyunkanzu .__button img.z_c-on{ top: 12%; left: 42%; opacity: 0; } .__jyunkanzu .__button a:hover img.z_c-on{ opacity: 1; } .__jyunkanzu .__button img.z_d{ top: 38%; right: 5%; z-index: 1; } .__jyunkanzu .__button img.z_d-on{ top: 38%; right: 5%; opacity: 0; } .__jyunkanzu .__button a:hover img.z_d-on{ opacity: 1; } .__jyunkanzu .__button img.z_e{ top: 75%; right: 24.5%; z-index: 1; } .__jyunkanzu .__button img.z_e-on{ top: 75%; right: 24.5%; opacity: 0; } .__jyunkanzu .__button a:hover img.z_e-on{ opacity: 1; } .__jyunkanzu .__button img.z_f{ top: 81%; left: 24%; z-index: 1; } .__jyunkanzu .__button img.z_f-on{ top: 81%; left: 24%; opacity: 0; } .__jyunkanzu .__button a:hover img.z_f-on{ opacity: 1; } .__jyunkanzu .__button img.z_g{ top: 59%; left: 9.5%; z-index: 1; } .__jyunkanzu .__button img.z_g-on{ top: 59%; left: 9.5%; opacity: 0; } .__jyunkanzu .__button a:hover img.z_g-on{ opacity: 1; } /*-- sp --*/ .__jyunkanzu.sp .__button img.z_a{ top: 0; left: 2%; } .__jyunkanzu.sp .__button img.z_b{ top: 50%; left: 4%; } .__jyunkanzu.sp .__button img.z_c{ top: 12%; left: 43%; } .__jyunkanzu.sp .__button img.z_d{ top: 55%; right: 23%; } .__jyunkanzu.sp .__button img.z_e{ top: 75%; right: 10%; } .__jyunkanzu.sp .__button img.z_f{ top: 81%; left: 18%; } .__jyunkanzu.sp .__button img.z_g{ top: 61%; left: 0; } /*================================ SUTENAI CIRCLE ================================*/ .__yui .__sc { position: relative; margin: auto; margin-top: 3rem; width: 100%; height: auto; } .__yui .__sc h4{ padding: 3rem 0; text-align: center; font-size: 1.6em; line-height: 1em; font-weight: 700; color: #0034A1; border-top: 1px solid #0034A1; border-bottom: 1px solid #0034A1; } @media screen and (max-width: 1024px) { .__yui .__sc h4{ padding: 1.5rem 0; font-size: 1.2em; } } .__yui .__box { position: relative; margin: auto; padding: 3rem 0; width: 70%; max-width: 1400px; height: auto; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; } @media screen and (max-width: 1024px) { .__yui .__box { margin: auto; padding: 3rem 0; width: 86%; justify-content: center; flex-direction: column; row-gap: 2rem; } } .__yui .__box .__ig{ width: 45%; display: flex; align-items: center; justify-content: flex-start; } @media screen and (max-width: 1024px) { .__yui .__box .__ig{ width: 100%; justify-content: center; } } .__yui .__box .__ig img{ width: 80%; } @media screen and (max-width: 1024px) { .__yui .__box .__ig img{ width: 80%; } } .__yui .__box .__wd{ width: 55%; color: #0034A1; } @media screen and (max-width: 1024px) { .__yui .__box .__wd{ width: 100%; } } .__yui .__box .__wd h5{ font-size: 1.2em; line-height: 1.7em; font-weight: 700; text-align: justify; text-justify: inter-ideograph; } @media screen and (max-width: 1024px) { .__yui .__box .__wd h5{ font-size: 1.1em; line-height: 1.5em; } } .__yui .__box .__wd p{ font-size: 1em; line-height: 1.8em; margin-top: 1.5em; text-align: justify; text-justify: inter-ideograph; } .__yui .__sc ._link{ width: 100%; margin-top: auto; padding-top: 2rem; } @media screen and (max-width: 1024px) { .__yui .__sc ._link{ padding-top: 1rem; font-size: .9em; } } .__yui .__sc ._link a{ display: inline-block; font-size: 1em; line-height: 1.3em; font-weight: 500; background-position: left center; background-repeat: no-repeat; background-image: url(/sites/default/files/shared_contents/furniture/special/yui/obj/arrow-right-circle.svg); background-size: 1em; color: #0034A1; padding: 1rem 0; padding-left: 1.5em; border-bottom: 1px solid #fff; -webkit-transition: all .6s; -moz-transition: all .6s; -o-transition: all .6s; -ms-transition: all .6s; transition: all .6s; } .__yui .__sc ._link a:hover{ border-bottom: 1px solid #0034A1; } /*================================ sub ================================*/ .__yui .__sub { position: relative; margin: auto; padding: 3rem 0; width: 100%; height: auto; border-top: 1px solid #0034A1; border-bottom: 1px solid #0034A1; color: #0034A1; } @media screen and (max-width: 1024px) { .__yui .__sub { padding: 1.6rem 0; } } .__yui .__sub h4{ text-align: center; font-size: 1.6em; line-height: 1em; font-weight: 700; } @media screen and (max-width: 1024px) { .__yui .__sub h4{ font-size: 1.2em; } } .__yui .__sub p{ margin-top: 1.5em; text-align: center; font-size: .9em; line-height: 1.7em; } /*================================================== �0�0�0 ==================================================*/ ._pages{ } /*================================ H1 ================================*/ ._pages h1{ text-align: center; padding: 6rem 0; color: #0034A1; font-size: 1.6em; line-height: 1.8em; font-weight: 500; } @media screen and (max-width: 1024px) { ._pages h1{ padding: 3rem 0; font-size: 1.1em; } } /*================================ H1:img ================================*/ ._pages h1 img{ width: 300px; } @media screen and (max-width: 1024px) { ._pages h1 img{ width: 200px; } } /*================================ _visual ================================*/ ._pages ._visual{ width: 100%; } ._pages ._visual img{ width: 100%; } /*================================ entry ================================*/ ._pages ._entry{ margin: auto; padding: 1rem 0 5rem; width: 60%; max-width: 1000px; } @media screen and (max-width: 1024px) { ._pages ._entry{ padding: 1rem 0 3rem; width: 86%; } } ._pages ._entry h2{ color: #0034A1; font-size: 1.5em; line-height: 1.5em; font-weight: 700; margin-top: 3rem; } @media screen and (max-width: 1024px) { ._pages ._entry h2{ font-size: 1.1em; margin-top: 2rem; } } ._pages ._entry h2 img{ width: 300px; display: block; margin: auto; padding: 30px 0; } @media screen and (max-width: 1024px) { ._pages ._entry h2 img{ width: 200px; padding: 0 0; } } ._pages ._entry p{ padding-top: 3rem; color: #0034A1; font-size: 1.2em; line-height: 1.9em; text-align: justify; text-justify: inter-ideograph; } @media screen and (max-width: 1024px) { ._pages ._entry p{ padding-top: 2.5rem; line-height: 1.7em; } } ._pages ._entry p._small{ padding-top: 3em; font-size: .8em; line-height: 1.6em; } @media screen and (max-width: 1024px) { ._pages ._entry p._small{ padding-top: 2em; } } ._pages ._entry .inners{ width: 80%; margin: auto; } @media screen and (max-width: 1024px) { ._pages ._entry .inners{ width: 90%; margin: auto; } } ._pages ._entry h3{ color: #0034A1; font-size: 1em; line-height: 1em; font-weight: 700; padding-top: 3rem; } @media screen and (max-width: 1024px) { ._pages ._entry h3{ font-size: 1em; padding-top: 2.5rem; } } ._pages ._entry .__line{ margin-top: 4rem; width: 100%; height: 1px; overflow: hidden; background-color: #0034A1; } @media screen and (max-width: 1024px) { ._pages ._entry .__line{ margin: 0 calc(50% - 50vw); width: 100vw; margin-top: 2rem; } } ._pages ._entry ul { padding-top: 3em; } @media screen and (max-width: 1024px) { ._pages ._entry ul { padding-top: 2.5em; } } ._pages ._entry ul li:before { color: #0034A1; content: " "; padding-right: 0.3em; } ._pages ._entry ul li { color: #0034A1; text-indent: -1.3em; padding-left: 1.3em; list-style: none; line-height: 1.9em; } @media screen and (max-width: 1024px) { ._pages ._entry ul li { line-height: 1.7em; } } ._pages ._entry ._photo{ margin-top: 3rem; width: 100%; text-align: center; } @media screen and (max-width: 1024px) { ._pages ._entry ._photo{ margin: 0 calc(50% - 50vw); width: 100vw; margin-top: 2rem; } } @media screen and (max-width: 1024px) { ._pages ._entry .inners ._photo{ width: 100%; margin: 0; margin-top: 2rem; } } ._pages ._entry ._photo img{ width: 100%; } ._pages ._entry ._photo small{ color: #0034A1; display: block; font-size: .8em; line-height: 1em; margin-top: 1rem; text-align: left; } @media screen and (max-width: 1024px) { ._pages ._entry ._photo small{ font-size: .7em; } } ._pages ._entry ._photo img._hows{ width: 50%; padding-top: 2rem; padding-bottom: 2rem; } ._pages ._entry ._photo img._design{ width: 40%; padding-top: 2rem; padding-bottom: 2rem; } @media screen and (max-width: 1024px) { ._pages ._entry ._photo img._design{ width: 50%; padding-top: 2rem; padding-bottom: 1rem; } } ._pages ._entry .video{ position: relative; width: 100%; aspect-ratio: 192 / 108; margin: auto; margin-top: 50px; } @media screen and (max-width: 1024px) { ._pages ._entry .video{ margin-top: 30px; } } ._pages ._entry .video #thumbnail { position: absolute; width: 100%; top: 0; left: 0; cursor: pointer; z-index:1; } ._pages ._entry .video #video{ width: 100%; } /* cosmo1 */ ._pages ._entry ._cosmo1{ display: flex; align-items: stretch; justify-content: space-between; margin-top: 2rem; margin-left: 1.5rem; width: calc(100% - 1.5rem); flex-wrap: wrap; } @media screen and (max-width: 1024px) { ._pages ._entry ._cosmo1{ row-gap: 2rem; } } ._pages ._entry ._cosmo1 div{ width: 45%; } @media screen and (max-width: 1024px) { ._pages ._entry ._cosmo1 div{ width: 100%; } } ._pages ._entry ._cosmo1 div img{ width: 100%; } @media screen and (max-width: 1024px) { ._pages ._entry ._cosmo1 div img{ width: 92%; } } ._pages ._entry ._cosmo1 div p{ width: 100%; padding-top: 1em; font-size: .8em; line-height: 1.6em; } @media screen and (max-width: 1024px) { ._pages ._entry ._cosmo1 div p{ width: 92%; padding-top: 1em; } } /* cosmo2 */ ._pages ._entry ._cosmo2{ display: flex; align-items: flex-start; justify-content: space-between; margin-top: 3rem; margin-left: 1.5rem; width: calc(100% - 1.5rem); flex-wrap: nowrap; column-gap: 1rem; } @media screen and (max-width: 1024px) { ._pages ._entry ._cosmo2{ flex-direction: column; row-gap: 1rem; margin-top: 2rem; } } ._pages ._entry ._cosmo2 ._box{ display: flex; align-items: flex-start; justify-content: center; flex-direction: column; width: 22%; flex-wrap: wrap; } @media screen and (max-width: 1024px) { ._pages ._entry ._cosmo2 ._box{ width: 100%; } } ._pages ._entry ._cosmo2 ._box:nth-child(2) { width: calc(11% - 1rem); align-items: center; } ._pages ._entry ._cosmo2 ._box:nth-child(3) { width: calc(44% + 1rem); } ._pages ._entry ._cosmo2 ._box:nth-child(4) { width: 1%; } @media screen and (max-width: 1024px) { ._pages ._entry ._cosmo2 ._box:nth-child(2) { width: 100%; } ._pages ._entry ._cosmo2 ._box:nth-child(3) { width: 100%; } ._pages ._entry ._cosmo2 ._box:nth-child(4) { width: 100%; display: none; } } @media screen and (max-width: 1024px) { ._pages ._entry ._cosmo2 ._box ._sinner{ display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; flex-wrap: nowrap; } } ._pages ._entry ._cosmo2 ._box ._img{ width: 100%; aspect-ratio: 1/1; display: flex; align-items: flex-end; } @media screen and (max-width: 1024px) { ._pages ._entry ._cosmo2 ._box ._img{ aspect-ratio: auto; } ._pages ._entry ._cosmo2 ._box ._sinner ._img{ display: flex; flex-direction: column; width: 40%; flex-wrap: nowrap; } } @media screen and (max-width: 1024px) { ._pages ._entry ._cosmo2 ._box ._sinner ._sinner2{ display: flex; flex-direction: column; width: 50%; flex-wrap: nowrap; } } ._pages ._entry ._cosmo2 ._box img{ display :block; } ._pages ._entry ._cosmo2 ._box img._logo{ height: 40px; margin: auto; margin-bottom: 1rem; } ._pages ._entry ._cosmo2 ._box img._arrow{ width: 60%; } @media screen and (max-width: 1024px) { ._pages ._entry ._cosmo2 ._box img._arrow{ transform: rotate(90deg); width: 10%; } } ._pages ._entry ._cosmo2 ._box img._table{ width: 100%; } ._pages ._entry ._cosmo2 ._box img._table._option{ box-sizing: border-box; border: 1px solid #ededed; } ._pages ._entry ._cosmo2 ._box ._pack{ display: flex; align-items: flex-start; justify-content: center; width: 100%; flex-wrap: nowrap; flex-direction: row; column-gap: 1rem; } @media screen and (max-width: 1024px) { ._pages ._entry ._cosmo2 ._box ._pack{ flex-wrap: nowrap; flex-direction: column; row-gap: 1rem; } } ._pages ._entry ._cosmo2 ._box ._pack ._inner{ display: flex; align-items: center; justify-content: center; width: 50%; flex-wrap: nowrap; flex-direction: column; } @media screen and (max-width: 1024px) { ._pages ._entry ._cosmo2 ._box ._pack ._inner{ width: 100%; flex-direction: row; justify-content: space-between; } ._pages ._entry ._cosmo2 ._box ._pack ._inner ._img{ flex-direction: column; width: 40%; flex-wrap: nowrap; } ._pages ._entry ._cosmo2 ._box ._pack ._inner ._sinner2{ display: flex; flex-direction: column; width: 50%; flex-wrap: nowrap; } } ._pages ._entry ._cosmo2 ._box p._01{ width: 100%; padding-top: 1.5rem; font-size: .8rem; line-height: 1.5em; font-weight: bold; text-align: justify; text-justify: inter-ideograph; } @media screen and (max-width: 1024px) { ._pages ._entry ._cosmo2 ._box p._01{ padding-top: 0; } } ._pages ._entry ._cosmo2 ._box p._02{ width: 100%; padding-top: .5rem; font-size: .8rem; line-height: 1.5em; text-align: justify; text-justify: inter-ideograph; } .__yui ._entry ._exlink{ width: 100%; margin-top: auto; padding-top: 2rem; } @media screen and (max-width: 1024px) { .__yui ._entry ._exlink{ padding-top: 1rem; font-size: .9em; } } .__yui ._entry ._exlink._center{ text-align: center; } @media screen and (max-width: 1024px) { .__yui ._entry ._exlink._center{ text-align: left; } } .__yui ._entry ._exlink a{ display: inline-block; font-size: 1em; line-height: 1.3em; font-weight: 500; background-position: left center; background-repeat: no-repeat; background-image: url(/sites/default/files/shared_contents/furniture/special/yui/obj/arrow-right-circle.svg); background-size: 1em; color: #0034A1; padding: .75rem 0 .75rem; padding-left: 1.5em; border-bottom: 1px solid #fff; -webkit-transition: all .6s; -moz-transition: all .6s; -o-transition: all .6s; -ms-transition: all .6s; transition: all .6s; } .__yui ._entry ._exlink a:hover{ border-bottom: 1px solid #0034A1; } /*================================ _links ================================*/ ._pages ._entry ._links { margin-top: 7rem; } @media screen and (max-width: 1024px) { ._pages ._entry ._links { margin-top: 5rem; } } ._pages ._entry ._links h4{ color: #0034A1; font-size: 1em; line-height: 1em; text-align: center; font-weight: 700; } ._pages ._entry ._links ._linklist{ margin-top: 3rem; width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; column-gap: 50px; } @media screen and (max-width: 1024px) { ._pages ._entry ._links ._linklist{ margin-top: 2rem; justify-content: flex-start; flex-wrap: wrap; column-gap: 8%; row-gap: 2rem; } } ._pages ._entry ._links ._linklist ._cell{ width: 100%; } @media screen and (max-width: 1024px) { ._pages ._entry ._links ._linklist ._cell{ width: 46%; } } ._pages ._entry ._links ._linklist ._cell img{ width: 100%; } ._pages ._entry ._links ._linklist a{ color: #0034A1; display: block; width: 100%; margin-top: 1rem; padding: .5rem 0; border: 1px solid #0034A1; text-align: center; font-size: .8em; } ._pages ._entry ._links ._linklist a span{ border-bottom: 1px solid transparent; -webkit-transition: all .6s; -ms-transition: all .6s; transition: all .6s; } ._pages ._entry ._links ._linklist a:hover span{ border-bottom: 1px solid #0034A1; } ._pages ._entry ._links ._linklist.L2{ margin-top: 3rem; width: 100%; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; column-gap: 6%; row-gap: 3rem; } @media screen and (max-width: 1024px) { ._pages ._entry ._links ._linklist.L2{ margin-top: 2rem; justify-content: flex-start; flex-wrap: wrap; column-gap: 8%; row-gap: 2rem; } } ._pages ._entry ._links ._linklist.L2 ._cell{ width: 20.5%; } @media screen and (max-width: 1024px) { ._pages ._entry ._links ._linklist.L2 ._cell{ width: 46%; } } ._pages ._entry ._links ._linklist.L2 ._cell img{ width: 100%; } ._pages ._entry ._links ._linklist.L2 a{ color: #0034A1; display: block; width: 100%; margin-top: 1rem; padding: .5rem 0; border: 1px solid #0034A1; text-align: center; font-size: .8em; } ._pages ._entry ._links ._linklist.L2 a span{ border-bottom: 1px solid transparent; -webkit-transition: all .6s; -ms-transition: all .6s; transition: all .6s; } ._pages ._entry ._links ._linklist.L2 a:hover span{ border-bottom: 1px solid #0034A1; } /*================================ sheet ================================*/ ._pages .sheet{ border-top: 1px solid #0034A1; border-bottom: 1px solid #0034A1; padding: 5rem 0 4rem; text-align: center; } @media screen and (max-width: 1024px) { ._pages .sheet{ padding: 3rem 0 2.5rem; } } ._pages .sheet h4{ color: #0034A1; font-size: 1em; line-height: 1.5em; text-align: center; } @media screen and (max-width: 1024px) { ._pages .sheet h4{ font-size: .8em; } } ._pages .sheet a{ display: inline-block; font-size: 1em; line-height: 1.3em; font-weight: 500; background-position: left center; background-repeat: no-repeat; background-image: url(/sites/default/files/shared_contents/furniture/special/yui/obj/arrow-right-circle.svg); background-size: 1em; color: #0034A1; padding: 1rem 0; padding-left: 1.5em; margin-top: 1rem; border-bottom: 1px solid #fff; -webkit-transition: all .6s; -moz-transition: all .6s; -o-transition: all .6s; -ms-transition: all .6s; transition: all .6s; } ._pages .sheet a:hover{ border-bottom: 1px solid #0034A1; } /*================================ pagetop ================================*/ ._pagetop{ position: sticky; display: flex; align-items: center; justify-content: center; z-index: 100; left: calc(100% - 70px); bottom: 0; width: 70px; height: 70px; } @media screen and (max-width: 1024px) { ._pagetop{ position: fixed; left: 0; bottom: 40px; width: 38px; height: 38px; } } ._pagetop img{ width: 50px; transform: rotate(90deg); } @media screen and (max-width: 1024px) { ._pagetop img{ width: 30px; } } /*================================ back ================================*/ ._historyback{ position: sticky; display: flex; align-items: center; justify-content: center; z-index: 100; left: 0; bottom: 0; width: 70px; height: 70px; } @media screen and (max-width: 1024px) { ._historyback{ position: fixed; left: 0; bottom: 40px; width: 38px; height: 38px; } } ._historyback img{ width: 50px; } @media screen and (max-width: 1024px) { ._historyback img{ width: 30px; } }