��@charset "utf-8"; /*================================ KOKUYO Header / Footer ================================*/ #header_All02, #footer_bottom02, .pagetop, #footer02{ } @media screen and (max-width: 1024px) { #header_All02, #footer_bottom02, .pagetop, #footer02 { display: none; } } .pagetop{ display: none !important; } .p-page-top{ display: none !important; opacity: 0 !important; } .pagetop a{ display: none; } .p-main-title__sp-lower{ display: none; } .c-button-pagetop{ display: none; } .p-main-title{ position: relative !important; top: auto !important; height: 50px; } footer.p-footer.u-hidePc { padding-bottom: 40px; } /*================================ �0�0�0�0��te ================================*/ @media screen and (min-width: 1024px){ #hdArea { display: block; position: relative; width: 100%; height: 89px; background-color: #fff; z-index: 100000; } } @media screen and (min-width: 1024px){ .hdSpace { display: none; } } #hdArea { position: relative !important; } /*================================ common ================================*/ html, body { position: relative; /* height: 100%; */ min-width: 1280px; scroll-behavior: smooth; } @media screen and (max-width: 1024px) { html, body { min-width: 100%; } } .__yui .sp{ display: none !important; } @media screen and (max-width: 1024px) { .__yui .sp{ display: block !important; } } .__yui .pc{ display: block !important; } @media screen and (max-width: 1024px) { .__yui .pc{ display: none !important; } } .__yui .spi{ display: none; } @media screen and (max-width: 1024px) { .__yui .spi{ display: inline; } } .__yui .pci{ display: inline; } @media screen and (max-width: 1024px) { .__yui .pci{ display: none; } } .__yui .spi320{ display: none; } @media screen and (max-width: 320px) { .__yui .spi320{ display: inline; } } html, body, svg{ margin: 0; padding: 0; } .__yui * { box-sizing: border-box; } .__yui .h1,.__yui h2,.__yui h3,.__yui h4,.__yui h5{ margin: 0; padding: 0; font-weight: normal; } .__yui p{ margin: 0; padding: 0; font-weight: normal; } ::selection { background: #333; color: #fff; } ::-moz-selection { background: #333; color: #fff; } .__yui a{ text-decoration: none; cursor: pointer; } .__yui a:focus, *:focus { outline: none; } .__yui img{ vertical-align: bottom; } .__yui ul, li{ margin: 0; padding: 0; list-style-type: none; } #___content { opacity: 1; width: 100%; } #content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .__yui .Yugo{ font-family: -apple-system, "8n�0�0�0�0SO", YuGothic, "8n�0�0�0�0 Medium", "Yu Gothic Medium", "8n�0�0�0�0", "Yu Gothic", sans-serif; } *{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .__yui .line_black { margin: auto; width: 1px; height: 30px; background-color: #0034A1; } .__yui .line_white { position: absolute; bottom: 0; left: 50%; margin: auto; width: 1px; height: 30px; background-color: #fff; } .__yui h1,h2,h3,h4,h5,p{ margin: 0; padding: 0; } .__yui ._sup{ vertical-align : .15em; } /*================================ wrapper font-family: 'Marcellus', serif; ================================*/ #wrapper.__yui { font-family: -apple-system, "8n�0�0�0�0SO", YuGothic, "8n�0�0�0�0 Medium", "Yu Gothic Medium", "8n�0�0�0�0", "Yu Gothic","Helvetica Neue", "Hiragino Kaku Gothic ProN",�0�0�0�0,Meiryo,sans-serif; font-weight: normal; font-size: 15px; line-height: 1em; color: #333; position: relative; width: 100%; min-width: 1180px; height: auto; margin: auto; } @media screen and (max-width: 1024px) { #wrapper.__yui { font-size: 15px; min-width: 100%; max-width: 100%; } } /*================================ :::::::::: global header :::::::::: ================================*/ /*===0�0�0�0�0hQ,�0===*/ .__yui .navigation { position:-webkit-sticky; position: sticky; top: 0; height: 120px; width: 100%; min-width: 1180px; z-index: 99; background-color: #fff; border-bottom: 1px solid #0034A1; } @media screen and (max-width: 1024px) { .__yui .navigation { min-width: 100%; height: 90px; } } /*===0 N�k0===*/ .__yui .navigation .nav-inner1 { position: relative; border-bottom: 1px solid #0034A1; height: 60px; display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; } @media screen and (max-width: 1024px) { .__yui .navigation .nav-inner1 { height: 40px; } } .__yui .navigation .nav-logo { position: absolute; display: block; z-index: 101; top: 0; left: calc(50% - 85px); } @media screen and (max-width: 1024px) { .__yui .navigation .nav-logo { top: 0; left: calc(50% - 55px); } } .__yui .navigation .nav-logo h1{ display: block; width: 170px; height: 50px; background-position: center top 15px; background-repeat: no-repeat; background-image: url(/sites/default/files/shared_contents/furniture/special/yui/obj/navi-logo.svg); background-size: contain; overflow: hidden; text-indent: 200%; white-space: nowrap; } @media screen and (max-width: 1024px) { .__yui .navigation .nav-logo h1 { background-position: center top 10px; width: 110px; height: 40px; } } .__yui .navigation .nav-inner1 ul.nav { text-align: right; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; flex-direction: row; } @media screen and (max-width: 1024px) { .__yui .navigation .nav-inner1 ul.nav { display: none; } } .__yui .navigation .nav-inner1 ul.nav li { text-align: right; height: 30px; display: flex; align-items: center; padding: 0 1rem; font-size: .8em; } .__yui .navigation .nav-inner1 ul.nav li:first-child { border-right: 1px solid #0034A1; } .__yui .navigation .nav-inner1 ul.nav li a{ color: #0034A1; 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 .navigation .nav-inner1 ul.nav li a:hover{ border-bottom: 1px solid #0034A1; } /*===0 N�k0===*/ .__yui .navigation .nav-inner2 { position: relative; } .__yui .navigation .nav-inner2 ul.nav { display: flex; text-align: center; align-items: center; justify-content: center; height: 60px; } @media screen and (max-width: 1024px) { .__yui .navigation .nav-inner2 ul.nav { height: 50px; } } .__yui .navigation .nav-inner2 ul.nav li { position: relative; height: 100%; font-size: .8em; vertical-align: middle; background-repeat: no-repeat; background-size: 25px; width: 220px; } @media screen and (max-width: 1024px) { .__yui .navigation .nav-inner2 ul.nav li { width: 100%; background-size: 25px; margin: 0; padding-left: 0; border-right: 1px solid #0034A1; background-position: top 5px center; background-repeat: no-repeat; background-size: 20px; } .__yui .navigation .nav-inner2 ul.nav li:last-child { border-right: none; } } .__yui .navigation .nav-inner2 ul.nav li:nth-child(1) { background-position: left 2rem center; background-image: url(/sites/default/files/shared_contents/furniture/special/yui/obj/icon01b.svg); } .__yui .navigation .nav-inner2 ul.nav li:nth-child(2) { background-position: left 1rem center; background-image: url(/sites/default/files/shared_contents/furniture/special/yui/obj/icon02b.svg); } .__yui .navigation .nav-inner2 ul.nav li:nth-child(3) { background-position: left 1.5rem center; background-image: url(/sites/default/files/shared_contents/furniture/special/yui/obj/icon03b.svg); } @media screen and (max-width: 1024px) { .__yui .navigation .nav-inner2 ul.nav li:nth-child(1), .__yui .navigation .nav-inner2 ul.nav li:nth-child(2), .__yui .navigation .nav-inner2 ul.nav li:nth-child(3) { background-position: center top .4rem; } } .__yui .navigation .nav-inner2 ul.nav li a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .__yui .navigation .nav-inner2 ul.nav li a p{ color: #0034A1; font-size: 1.2em; border-bottom: 1px solid transparent; -webkit-transition: all .6s; -moz-transition: all .6s; -o-transition: all .6s; -ms-transition: all .6s; transition: all .6s; margin-left: 2.3rem; } @media screen and (max-width: 1024px) { .__yui .navigation .nav-inner2 ul.nav li a p{ margin-left: 0; margin-top: 1.4rem; font-size: .9em; border-bottom: none; } } .__yui .navigation .nav-inner2 ul.nav li a:hover p{ border-bottom: 1px solid #0034A1; } @media screen and (max-width: 1024px) { .__yui .navigation .nav-inner2 ul.nav li a:hover p{ border-bottom: none; } } .__yui .navigation .nav-inner2 ul.nav li.stay p{ font-weight: 700; border-bottom: 1px solid #0034A1; } .__yui .navigation .nav-inner2 ul.nav li._stay { background-color: #0034A1; transition: all 0.4s ease-out; } .__yui .navigation .nav-inner2 ul.nav li._stay a p{ color: #fff; } .__yui .navigation .nav-inner2 ul.nav li.stay01._stay { background-image: url(/sites/default/files/shared_contents/furniture/special/yui/obj/icon01w.svg); } .__yui .navigation .nav-inner2 ul.nav li.stay02._stay { background-image: url(/sites/default/files/shared_contents/furniture/special/yui/obj/icon02w.svg); } .__yui .navigation .nav-inner2 ul.nav li.stay03._stay { background-image: url(/sites/default/files/shared_contents/furniture/special/yui/obj/icon03w.svg); } /*================================ :::::::::: �V�[�0�0�0�0 :::::::::: ================================*/ .__yui .fixedfooter { display: none; } @media screen and (max-width: 1024px) { .__yui .fixedfooter { display: block; position: fixed; bottom: 0; left: 0; width: 100%; height: 40px; z-index:100; background: #fff; border-top: 1px solid #0034A1; } } .__yui .fixedfooter ul { display: flex; text-align: center; align-items: center; justify-content: center; height: 100%; } .__yui .fixedfooter ul li { width: 100%; border-right: 1px solid #0034A1; } .__yui .fixedfooter ul li:last-child { border-right: none; } .__yui .fixedfooter ul li a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .__yui .fixedfooter ul li a p{ width: 100%; color: #0034A1; font-size: .8em; } /*================================ :::::::::: �0�0�0�0�0 :::::::::: ================================*/ .__yui #contents { position: relative; width: 100%; height: auto; min-height: 120vh; margin: auto; } @media screen and (max-width: 1024px) { .__yui #contents { max-width: 100%; margin-top: 0; } } .__yui .contentsmargin{ margin-top: 0 !important; } .__yui #contentswrap { position: relative; width: 100%; margin: auto; } @media screen and (max-width: 1024px) { .__yui #contentswrap { max-width: 100%; } } /*================================ :::::::::: global footer :::::::::: ================================*/ .__yui #_footer { position: relative; width: 100%; height: auto; margin: auto; border-top: 1px solid #dedede; } @media screen and (max-width: 1024px) { .__yui #_footer { border-top: none; } } .__yui #_footer .footer-wrap{ display: flex; align-items: center; justify-content: space-between; flex-wrap: nowwrap; flex-direction: row; width: 100%; } @media screen and (max-width: 1024px) { .__yui #_footer .footer-wrap{ flex-direction: column; } } .__yui #_footer .footer-wrap div{ width: 33.33%; text-align: center; padding: 3em 0; } @media screen and (max-width: 1024px) { .__yui #_footer .footer-wrap div{ border-top: 1px solid #dedede; width: 100%; padding: 2em 0 2.5em; } } .__yui #_footer .footer-wrap div a{ display: block; width: 100%; color: #000; } .__yui #_footer .footer-wrap div a img{ width: 1.5em; height: auto; } .__yui #_footer .footer-wrap div a p.title{ margin-top: 1em; font-size: 1.4em; line-height: 1em; } @media screen and (max-width: 1024px) { .__yui #_footer .footer-wrap div a p.title{ font-size: 1.2em; } } .__yui #_footer .footer-wrap div a p.word{ margin-top: 1em; font-size: .9em; line-height: 1em; } .__yui #_footer .footer-wrap div a:hover p.word{ text-decoration: underline; } /*================================ �0�0�0�0�0�0 ================================*/ .__yui .lineup_wrap { width: 100%; height: auto; background-color: rgba(0, 0, 0, 0.15); } .__yui .lineup_wrap h2{ margin-top: 1em; text-align: center; font-size: 2em; line-height: 1em; font-weight: normal; } @media screen and (max-width: 1024px) { .__yui .lineup_wrap h2{ font-size: 1.6em; } } .__yui .lineup_wrap .Lbox { margin: 4em auto 0; padding-bottom: 3em; width: 80%; height: auto; max-width: 1300px; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; flex-direction: row; } @media screen and (max-width: 1024px) { .__yui .lineup_wrap .Lbox { margin: 3em auto 0; padding-bottom: 0; width: 86%; max-width: 86%; flex-direction: column; } } .__yui .lineup_wrap .Lbox .box{ width: 46%; height: auto; display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; flex-direction: column; } @media screen and (max-width: 1024px) { .__yui .lineup_wrap .Lbox .box{ width: 100%; margin-bottom: 3em; } } .__yui .lineup_wrap .Lbox .box img{ display: block; width: 100%; height: auto; } .__yui .lineup_wrap .Lbox .box p.copy{ margin: auto; margin-top: 2em; font-size: 1.2em; line-height: 1em; font-weight: bold; } @media screen and (max-width: 1024px) { .__yui .lineup_wrap .Lbox .box p.copy{ text-align: center; margin-top: 1.5em; line-height: 1.5em; font-size: 1em; } } .__yui .lineup_wrap.unit .Lbox .box p.copy{ margin-top: 0; } @media screen and (max-width: 1024px) { .__yui .atrv .lineup_wrap.unit .Lbox .box p.copy{ margin-top:1.5em; } } .__yui .lineup_wrap .Lbox .box p.logo{ margin: auto; margin-top: 1.5em; width: auto; height: 2em; } @media screen and (max-width: 1024px) { .__yui .lineup_wrap .Lbox .box p.logo{ height: 1.5em; } } .__yui .lineup_wrap .Lbox .box p.logo img{ width: auto; height: 100%; } .__yui .lineup_wrap .Lbox .box p.text{ margin: auto; margin-top: 2em; font-size: 1em; line-height: 1.6em; text-align: center; } @media screen and (max-width: 1024px) { .__yui .lineup_wrap .Lbox .box p.text{ margin-top: 1.5em; } } .__yui .lineup_wrap .Lbox .box .button{ width: 70%; height: auto; margin: auto; margin-top: 1.5em; } @media screen and (max-width: 1024px) { .__yui .lineup_wrap .Lbox .box .button{ width: 90%; } } .__yui .lineup_wrap .Lbox .box .button a{ display: block; width: 100%; height: 100%; background-color: #000; padding: 2em 0; background-position: right 5% center; background-repeat: no-repeat; background-image: url(/sites/default/files/shared_contents/furniture/special/yui/obj/chevron-right.svg); background-size: .5em; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; -ms-transition: all .3s; transition: all .3s; } .__yui .lineup_wrap .Lbox .box .button a:hover{ background-color: #555; } .__yui .lineup_wrap .Lbox .box .button a p{ color: #fff; text-align: center; font-size: 1.3em; line-height: 1em; } .__yui .lineup_wrap.unit { width: 100%; height: auto; background-color: rgba(0, 0, 0, 0.1); } .__yui .lineup_wrap.unit .Lbox { margin: 0 auto 0; padding: 3em 0; width: 80%; height: auto; max-width: 1300px; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; flex-direction: column; } @media screen and (max-width: 1024px) { .__yui .lineup_wrap.unit .Lbox { margin: 0 auto 0; padding: 3em 0 ; width: 86%; max-width: 86%; } } .__yui .lineup_wrap.unit .Lbox .box{ width: 100%; height: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; flex-direction: row; } @media screen and (max-width: 1024px) { .__yui .lineup_wrap.unit .Lbox .box{ flex-direction: column; margin-bottom: 0; } } .__yui .lineup_wrap.unit .Lbox .box .pack{ width: 46%; height: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; flex-direction: column; } @media screen and (max-width: 1024px) { .__yui .lineup_wrap.unit .Lbox .box .pack{ width: 100%; height: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; flex-direction: column; } } .mContactpanel { display: none; }