@charset "utf-8"; /* --------------------------------------------------------------- */ /* タブレット縦 / スマホ横 @media only screen and (max-width: 896px) 小型スマホ横 @media only screen and (max-width: 568px) スマホ縦 @media only screen and (max-width: 480px) 小型スマホ縦 @media only screen and (max-width: 320px) 横向き @media only screen and (orientation:landscape) */ /* --------------------------------------------------------------- */ html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {margin: 0;padding: 0;border: 0;font-weight: normal;font-size: 100%;vertical-align: baseline;} article, header, footer, aside, figure, figcaption, nav, section {display: block;} body {line-height: 1;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;} ol, ul {list-style: none;list-style-type: none;} figure {margin: 0;} button, input[type="submit"] {border: 0 none;background: none;cursor: pointer;outline: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;} select::-ms-expand {display: none;} img, input[type="image"] {max-width: 100%;width:auto;height: auto;backface-visibility: hidden;-webkit-backface-visibility: hidden;object-fit: cover;} a {text-decoration: none;color: #000;} a:hover, a img:hover, button:hover {opacity: 0.7;filter: alpha(opacity=70);-ms-filter: "alpha(opacity=70)";transition: all 0.5s ease;} section {overflow: hidden;} @keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } * {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} html {height: 100%;overflow-x: hidden;-webkit-text-size-adjust: 100%;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;font-size: 62.5%;} body {background: #fff;font-family: "Helvetica Neue",Arial,"メイリオ",Meiryo, sans-serif;font-size: 1.8rem;line-height: 2;color: #161616;} @media only screen and (max-width: 896px) {body {font-size: 1.4rem;line-height: 1.8;}} .pc {display: inherit;} .sp {display: none;} .inner {width: 100%;max-width: 1170px;margin: auto;} @media only screen and (min-width: 768px) and (max-width: 896px) {.inner {width: 95%;}} @media only screen and (max-width: 767px) {.pc {display: none;}.sp {display: block;}.inner {width: 90%;}} .flex {display: -webkit-box;display: -moz-box;display: -webkit-flexbox;display: -moz-flexbox;display: -ms-flexbox;display: -webkit-flex;display: -moz-flex;display: flex;flex-wrap: wrap;} .Acenter {position: absolute;top: 50%;left: 50%;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);} .fadeInUpTrigger, .fadeInDownTrigger, .fadeInUpTriggerOnce {opacity: 0;} /* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ header {width: 100%;padding: 44px 0 0;position: fixed;top: 0;z-index: 10;background: #fff;border-bottom: 1px solid #ccc;} header #logo {max-width: 140px;margin: 0;} header #gNav {margin: -60px auto 0;font-size: 1.6rem;} header #gNav #language {width: 20%;max-width: 130px;margin: 0 0 20px auto;} header #gNav #language li:nth-child(1)::after {content: "／";margin: 0 8px;} header #gNav #language li:nth-child(2)::after {content: "／";margin: 0 8px;} header #gNav #mainNav {width: 75%;margin: -25px 0 0 auto;justify-content: space-between;} header #gNav #mainNav li a {padding: 0 0 20px;position: relative;display: block;transition: .3s;background: transparent;} header #gNav #mainNav li a::before {content: "";width: 100%;height: 3px;position: absolute;bottom: 0;background: #161616;transform-origin: 100% 50%;transform: scaleX(0);transition: transform ease .3s;} header #gNav #mainNav li a:hover::before, header #gNav #mainNav li.active a::before {transform-origin: 0% 50%;transform: scaleX(1);} header #gNav #mainNav li dl.subNav dt {padding: 0 0 20px;position: relative;cursor: pointer;} header #gNav #mainNav li dl.subNav dt::before {content: "";width: 100%;height: 3px;position: absolute;bottom: 0;background: #161616;transform-origin: 100% 50%;transform: scaleX(0);transition: transform ease .3s;} header #gNav #mainNav li dl.subNav dt:hover::before, header #gNav #mainNav li.active dl.subNav dt::before {transform-origin: 0% 50%;transform: scaleX(1);} header #gNav #mainNav li dl.subNav dd {width: 100%!important;position: absolute;top: 96px;left: 0;z-index: 10;display: none;background: #fff;border-bottom: 1px solid #ccc;} header #gNav #mainNav li dl.subNav dd ul {max-width: 1170px;margin: 20px auto;text-align: center;line-height: 1;align-items: center;} header #gNav #mainNav li dl.subNav dd ul li {width: 16.6666%;} header #gNav #mainNav li dl.subNav dd ul li a {display: block;border-right: 1px solid #ccc;} header #gNav #mainNav li:nth-child(2) dl.subNav dd ul li:first-child a {padding: 65px 0;background: #ccc;} header #gNav #mainNav li:nth-child(2) dl.subNav dd ul li.taoc-sw a {padding: 65px 0;background: #333; color:#fff;} header #gNav #mainNav li dl.subNav dd ul li:last-child a {border-right: 0;} header #gNav #mainNav li dl.subNav dd ul li a i {width: 50%;margin: auto;display: block;} header #gNav #mainNav li dl.subNav dd ul li a::before {content: "";width: 0;height: 0;border-bottom: 0;} header #gNav #mainNav li.shop dl.subNav dd ul li {width: 48%; line-height:1.5;} header #gNav #mainNav li.shop dl.subNav dd ul li:first-child { margin-right:4%;} header #gNav #mainNav li.shop dl.subNav dd ul li:first-child a {padding: 40px 0;background: #ccc;} header #gNav #mainNav li.shop dl.subNav dd ul li:last-child a {padding: 40px 0;background: #333; color:#fff;} @media only screen and (min-width: 768px) and (max-width: 896px) { header #gNav #language {margin: 0 0 25px auto;} header #gNav {margin: -45px auto 0;} header #gNav #mainNav li dl.subNav dd {top: 93px;} } @media only screen and (max-width: 767px) { header {padding: 15px 0;} header #logo {width: 30%;max-width: 200px;margin: 5px auto 0;} #navBtn {height: 50px;position: absolute;top: 5px;right: 10px;} #navBtn > p {width: 50px;position: relative;} #navBtn span {width: 80%;height: 3px;position: absolute;left: 10%;display: block;background: #161616;transition: top .5s ease, -webkit-transform .6s ease-in-out;transition: transform .6s ease-in-out, top .5s ease;transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;} #navBtn span:nth-child(1) {top: 15px;} #navBtn span:nth-child(2) {top: 30px;} #navBtn:hover span:nth-child(1) {top: 15px;} #navBtn:hover span:nth-child(2) {top: 30px;} .open {overflow: hidden;} .open #navBtn span {background: #161616;} .open #navBtn span:nth-child(1) {top: 25px;-webkit-transform: rotate(45deg);transform: rotate(45deg);} .open #navBtn span:nth-child(2) {top: 25px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);} .open header #gNav {visibility: visible;overflow-y: auto;transform: translate(0); } .open header #gNav #mainNav {opacity: 1;} header #gNav {width: 100%;height: 100vh;margin: 0;padding: 20px 0 80px;position: fixed;top: 61px;left: 0;z-index: 10;visibility: hidden;text-align: center;background: #fff;transition: all 0.5s;transform: translate(400px);} header #gNav #language {width: 40%;max-width: 200px;margin: 0 0 0 auto;} header #gNav #mainNav {width: 90%;margin: 0 auto;text-align: left;opacity: 0;} header #gNav #mainNav li {width: 100%;border-bottom: 1px solid #ccc;} header #gNav #mainNav li a {padding: 15px 0;position: relative;} header #gNav #mainNav li a::after {content: "";width: 7px;height: 7px;position: absolute;top: 40%;right: 10px;display: block;transform: rotate(45deg);border: 1px solid;border-color: #161616 #161616 transparent transparent;} header #gNav #mainNav li:nth-child(4) a, header #gNav #mainNav li:nth-child(5) a {display: none;} header #gNav #mainNav li dl.subNav dt {padding: 10px 0;} header #gNav #mainNav li dl.subNav dt::before {opacity: 0;} header #gNav #mainNav li dl.subNav dt span {position: relative;} header #gNav #mainNav li dl.subNav dt span::before {content: "";width: 15px;height: 1px;position: absolute;top: -15px;right: 5px;display: block;background: #161616;-webkit-transform: rotate(90deg);transform: rotate(90deg);} header #gNav #mainNav li dl.subNav dt span::after {content: "";width: 15px;height: 1px;position: absolute;top: -15px;right: 5px;display: block;background: #161616;} header #gNav #mainNav li dl.subNav dt.subActive span::before {opacity: 0;} header #gNav #mainNav li dl.subNav dd {width: 100%;position: relative;top: 0;border-bottom: 0;} header #gNav #mainNav li dl.subNav dd ul {margin: 0 0 20px;text-align: left;line-height: 1.8;} header #gNav #mainNav li dl.subNav dd ul li {width: 100%;position: relative;border-bottom: 0;} header #gNav #mainNav li dl.subNav dd ul li::after {content: "・";position: absolute;top: 5px;left: 0;} header #gNav #mainNav li dl.subNav dd ul li a {padding: 5px 20px;border-right: 0;} header #gNav #mainNav li dl.subNav dd ul li a::after {display: none;} header #gNav #mainNav li dl.subNav dd ul li a i {display: none;} header #gNav #mainNav li:nth-child(2) dl.subNav dd ul li:first-child a {padding: 5px;} header #gNav #mainNav li:nth-child(2) dl.subNav dd ul li.taoc-sw a {padding: 5px;} header #gNav #mainNav li.shop dl.subNav dd ul li { width:100%;} header #gNav #mainNav li.shop dl.subNav dd ul li:first-child { margin-right:0;} header #gNav #mainNav li.shop dl.subNav dd ul li:first-child a {padding: 5px 20px; background-color:transparent;} header #gNav #mainNav li.shop dl.subNav dd ul li:last-child a {padding: 5px 20px; background-color:transparent; color: inherit;} header #gNav #spSocial {width: 90%;margin: 10px auto 0;text-align: left;} header #gNav #spSocial .link{ margin-bottom:5vw;} header #gNav #spSocial .link li:nth-child(1) {width: 50%;padding: 8px 0;font-size: 1.4rem;} header #gNav #spSocial .link li:nth-child(2) {width: 60%;padding: 8px 0;font-size: 1.4rem;} header #gNav #spSocial .link li:nth-child(3) {width: 10%;max-width: 33px;margin: -5px 20px 0 auto;} header #gNav #spSocial .link li:nth-child(4) {width: 10%;max-width: 33px;margin: -5px 0 0;} header #gNav #spSocial .sns li{width: 10%;max-width: 33px;margin-right:3vw;} } main {padding: 96px 0 0;} @media only screen and (max-width: 896px) {main {padding: 50px 0 0;}} footer {width: 100%;background: #161616;} footer #topBtn {width: 66px;height: 66px;position: fixed;bottom: 50px;right: 20px;z-index: 5;background: #161616;border-radius: 50%;cursor: pointer;} footer #topBtn::before {content: "";width: 20px;height: 20px;position: absolute;top: 40%;left: 33%;display: block;transform: rotate(-45deg);border: 1px solid;border-color: #fff #fff transparent transparent;} footer #fLinkArea {padding: 40px 0 10px;align-items: center;} footer #fLinkArea a {color: #fff;} footer #fLinkArea .fMenuT {margin: 0;font-size: 1.8rem;} footer #fLinkArea ul.fsubMenu {margin: 0 0 10px;font-size: 1.4rem;line-height: 1.8;} footer #fLinkArea ul.fsubMenu li {margin: 0 50px 0 0;} footer #fLinkArea ul.fsubMenu li ul {} footer #fLinkArea ul.fsubMenu li ul li {margin: 0; font-size:12px;} footer #fLinkArea ul.fsubMenu li ul li::before {content: "・";color: #fff;} footer #socialArea {margin: 40px auto 0;padding: 20px 0;align-items: center;border-top: 1px solid #fff;line-height: 1; -js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; } footer #socialArea .link { width:60%; align-items: center;font-size: 1.5rem;} footer #socialArea .link li a {color: #fff;} footer #socialArea .link li:nth-child(1) {margin: 0 100px 0 0;} footer #socialArea .link li:nth-child(4) {width: 10%;max-width: 33px;} footer #copy {width: 100%;padding: 15px 0 100px;background: #fff;font-size: 1.2rem;line-height: 1;} footer #socialArea .sns { width:40%; align-items: center;font-size: 1.5rem; -webkit-box-pack: flex-end; -ms-flex-pack: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end;} footer #socialArea .sns li {width: 10%; max-width: 24px; margin-left:20px;} footer #socialArea .sns li:nth-child(1) {width: 10%; max-width: 28px; margin-left:20px;} footer #copy ul {align-items: center;} @media only screen and (min-width: 768px) and (max-width: 896px) { footer #socialArea .link li:nth-child(1) {margin: 0 50px 0 0;} } @media only screen and (max-width: 767px) { footer #topBtn {width: 40px;height: 40px;bottom: 70px;right: 10px;} footer #topBtn::before {width: 10px;height: 10px;top: 40%;left: 33%;} footer #socialArea {margin: 0 auto;padding: 20px 0;border-top: 0;} footer #socialArea .link li:nth-child(1) {margin: 0 20px 10px 0;} footer #socialArea .link li:nth-child(3) {margin: 0 20px 0 auto;} footer #copy {font-size: 1.1rem;} footer #copy ul {width: 100%;padding: 0 0 70px;justify-content: center;} footer #socialArea .sns { width:40%; align-items: center;font-size: 1.5rem; -webkit-box-pack: flex-end; -ms-flex-pack: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end;} footer #socialArea .sns li {width: 15%; max-width: 15%; margin-left:3vw;} footer #socialArea .sns li:nth-child(1) {width: 17%; max-width: 17%; margin-left:3vw;} footer #copy {padding: 15px 0 40px;} } #contactBox {width: 100%;padding: 120px 0;text-align: center;background: url("images/contact-back.png") no-repeat center / cover;line-height: 0;} #contactBox p a, #contactBox ul li a {padding: 80px 0;position: relative;display: block;color: #fff;border: 2px solid #fff;font-size: 2.5rem;transition: all 0.5s ease;} #contactBox p a:hover, #contactBox ul li a:hover {background: #fff;color: #161616;} #contactBox p a::after, #contactBox ul li a::after {content: "";width: 10px;height: 10px;position: absolute;top: 46%;right: 40%;display: block;transform: rotate(45deg);border: 1px solid;border-color: #fff #fff transparent transparent;} #contactBox p a:hover::after, #contactBox ul li a:hover::after {border: 1px solid;border-color: #161616 #161616 transparent transparent;} #contactBox ul {justify-content: space-between;} #contactBox ul li {width: 48%;} #contactBox ul li a::after {right: 20%;} @media only screen and (min-width: 768px) and (max-width: 896px) { #contactBox p a, #contactBox ul li a {padding: 50px 0;} #contactBox p a::after {top: 50%;right: 30%;} } @media only screen and (max-width: 767px) { #contactBox {padding: 50px 0;} #contactBox p a, #contactBox ul li a {padding: 30px 0;font-size: 1.8rem;} #contactBox p a::after, #contactBox ul li a::after {top: 40%;right: 25%;} #contactBox ul li {width: 100%;margin: 0 0 10px;} } #spFix {width: 100%;position: fixed;bottom: 0;z-index: 5;background: #fff;} #spFix ul {justify-content: space-between;text-align: center;font-size: 1.4rem;line-height: 1;} #spFix ul li {width: 33.1%;background: #161616;} #spFix ul li a {padding: 10px 0;display: block;color: #fff;} #spFix ul li a i {width: 20%;margin: 0 auto 5px;display: block;} #error {} #error .cont {text-align: center;} #error .cont h2 {margin: 0 auto 30px;font-size: 2.4rem;font-weight: 600;line-height: 1.2;} #error .cont p {margin: 0 auto 50px;} @media only screen and (max-width: 767px) { #error .cont h2 {font-size: 1.8rem;} } /* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- INDEX */ #mainVisual {width: 100%;height: 85vh;position: relative;} #mainVisual .mvSlider {position: relative;} #mainVisual .mvSlider .slick-dots {bottom: -40px;} #mainVisual .mvSlider li {} #mainVisual .mvSlider li figure {position: relative;} #mainVisual .mvSlider li figure img {width: 100%;height: 80vh;object-fit: cover;} #mainVisual .mvSlider li figure figcaption {position: absolute;z-index: 5;font-size: 5rem;font-weight: 600;line-height: 1.2;} #mainVisual .mvSlider li figure figcaption small {display: block;font-size: 1.8rem;font-weight: 300;} #mainVisual .mvSlider li.slide01 figure figcaption {top: 48%;left: 7%;color: #fff;} #mainVisual .mvSlider li.slide02 figure figcaption {top: 42%;left: 7%;} #mainVisual .mvSlider li.slide03 figure figcaption {top: 48%;right: 7%;text-align: right;color: #fff;} #mainVisual .mvSlider li.slide04 figure figcaption {top: 48%;right: 7%;text-align: right;color: #fff;} #mainVisual .mvSlider li.slide05 figure figcaption {top: 48%;right: 7%;text-align: right;} #mainVisual .mvSlider li.slide06 figure figcaption {top: 65%;left: 7%;color: #fff;} #mainVisual .mvSlider li.slide07 figure figcaption {top: 20%;left: 50%;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);text-align: center;} #mainVisual .mvSlider li.slide08 figure figcaption {top: 45%;left: 7%;color: #fff;} #mainVisual .mvSlider li.slide08 figure figcaption .new { display:inline-block; margin-bottom:10px; background-color:#D32A2A; color:#fff; padding:3px 10px; font-size:18px; line-height:1;} #mainVisual .mvSlider li.slide09 figure figcaption {top: 48%;left: 7%;} #mainVisual .mvSlider li.slide10 figure figcaption {top: 20%;left: 50%;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);text-align: center;} #mainVisual .mvSlider li.slide10 figure figcaption .new { display:inline-block; margin-bottom:10px; background-color:#D32A2A; color:#fff; padding:3px 10px; font-size:18px; line-height:1;} #mainVisual .mvSlider li.slide12 figure figcaption {top: 45%;left: 20%;color: #000;} #mainVisual .mvSlider li.slide12 figure figcaption .new { display:inline-block; margin-bottom:10px; background-color:#D32A2A; color:#fff; padding:3px 10px; font-size:18px; line-height:1;} #mainVisual .mvSlider li.slide13 figure figcaption {top:36%;left: 20%;color: #000;} #mainVisual .mvSlider li.slide13 figure figcaption .sub {font-size:22px; font-weight: 600;} #mainVisual .mvSlider li.slide13 figure figcaption .txt { display:block; font-size:18px; line-height:1.8; padding-right:40%; } #mainVisual .mvSlider li.slide13 figure figcaption .name { display:block; font-size: 5rem;font-weight: 600;line-height: 1.2; margin-bottom:10px;} #mainVisual .mvSlider li.slide15 figure figcaption {top:36%; left:0; width:100%; color: #fff; text-align:center;} #mainVisual .mvSlider li.slide15 figure figcaption .name { display:block; font-size: 5rem;font-weight: 600; line-height: 1.2; margin-bottom:1vw;} #mainVisual .mvSlider li.slide15 figure figcaption .sub {font-size:24px; font-weight: 600;line-height: 1.6; margin-bottom:1vw;} #mainVisual .mvSlider li.slide15 figure figcaption .txt { display:block; font-size:16px; line-height:2; } @media only screen and (max-width: 767px) { #mainVisual .mvSlider li figure figcaption {font-size: 3rem;} #mainVisual .mvSlider li figure figcaption small {font-size: 1.2rem;} #mainVisual .mvSlider li.slide01 figure figcaption {top: 52%;left: 12%;} #mainVisual .mvSlider li.slide02 figure figcaption {top: 12%;left: auto;right: 7%;text-align: right;} #mainVisual .mvSlider li.slide03 figure figcaption {top: 75%;right: 7%;} #mainVisual .mvSlider li.slide04 figure figcaption {top: 10%;right: 7%;color: #161616;} #mainVisual .mvSlider li.slide05 figure figcaption {top: 30%;right: 5%;} #mainVisual .mvSlider li.slide06 figure figcaption {top: 75%;left: 7%;} #mainVisual .mvSlider li.slide07 figure figcaption {top: 25%;left: auto;right: 30%;text-align: right} #mainVisual .mvSlider li.slide08 figure figcaption {top: 80%;left: 7%;} #mainVisual .mvSlider li.slide09 figure figcaption {top: 85%;left: 7%; color:#fff} #mainVisual .mvSlider li.slide10 figure figcaption {top: 25%;left: auto;right: 30%;text-align: right} #mainVisual .mvSlider li.slide12 figure figcaption {top: 10%;left: auto;left: 0%; text-align:center; width:100%;} #mainVisual .mvSlider li.slide13 figure figcaption {top: 10%;left: auto;left: 0%; text-align:center; width:100%;} #mainVisual .mvSlider li.slide13 figure figcaption .sub {font-size:1.2rem; font-weight: 600;} #mainVisual .mvSlider li.slide13 figure figcaption .txt { display:block; font-size:1.2rem; line-height:1.8; padding:0 10vw; } #mainVisual .mvSlider li.slide13 figure figcaption .name { display:block; font-size: 3rem;font-weight: 600;line-height: 1.2; margin-bottom:10px;} #mainVisual .mvSlider li.slide15 figure figcaption { top:inherit !important; bottom:5%;left: auto;left: 0%; text-align:center; width:100%;} #mainVisual .mvSlider li.slide15 figure figcaption .name { display:block; font-size: 3rem;font-weight: 600; line-height: 1.2; margin-bottom:1vw;} #mainVisual .mvSlider li.slide15 figure figcaption .sub {font-size:1.5rem; font-weight: 600;line-height: 1.6; margin-bottom:1vw;} #mainVisual .mvSlider li.slide15 figure figcaption .txt { display:block; font-size:1.2rem; line-height:2; } #mainVisual .mvSlider li.slide16 figure figcaption {font-size: 4rem; top: 20%;left: auto;left: 0%; text-align:center; width:100%; color:#fff;} #mainVisual .mvSlider li.slide16 figure figcaption small {font-size: 1.2rem;} #mainVisual .mvSlider li.slide17 figure figcaption {font-size: 4rem; top: 20%;left: auto;left: 0%; text-align:center; width:100%; color:#fff;} #mainVisual .mvSlider li.slide17 figure figcaption small {font-size: 1.2rem;} } #topConcept {margin: 120px auto 0;padding: 170px 50px 170px 200px;background: url("images/concept_image.png") no-repeat center / cover;} #topConcept h2 {margin: 0 auto 50px;color: #fff;font-size: 4rem;font-weight: 600;line-height: 1.3;letter-spacing: 0.02em;} #topConcept h2 small {margin: 0 0 0 15px;display: block;font-size: 1.4rem;font-weight: 300;} #topConcept h2 + p a {width: 20%;max-width: 150px;padding: 0 10px;position: relative;display: block;color: #fff;border-bottom: 1px solid #fff;transition: all 0.5s ease;} #topConcept h2 + p a::after {content: "";width: 0;height: 0;position: absolute;top: 30%;right: 0;display: block;border-left: 8px solid #fff;border-top: 8px solid transparent;border-bottom: 8px solid transparent;} #topConcept h2 + p a:hover {width: 25%;max-width: 180px;} @media only screen and (max-width: 767px) { #topConcept {margin: 70px auto 0;padding: 50px 20px 50px;background: url("images/concept_image.png") no-repeat right 0 10% / auto;} #topConcept h2 {margin: 0 auto 30px;font-size: 3rem;line-height: 1;} #topConcept h2 small {margin: 5px 0 0;font-size: 1.2rem;} #topConcept h2 + p {margin: 30px 0 0;} #topConcept h2 + p a {width: 40%;padding: 0 10px 5px;} #topConcept h2 + p a::after {border-left: 5px solid #fff;border-top: 5px solid transparent;border-bottom: 5px solid transparent;} } #topProduct {padding: 150px 0 100px;} #topProduct h2 {margin: 0 auto 50px;text-align: center;font-size: 4rem;font-weight: 600;line-height: 1.3;letter-spacing: 0.02em;} #topProduct h2 small {display: block;font-size: 1.4rem;font-weight: 300;} #topProduct ul + p {width: 20%;margin: 30px auto 0;} #topProduct ul + p a {width: 200px;padding: 0 10px;position: relative;display: block;border-bottom: 1px solid #161616;transition: all 0.5s ease;} #topProduct ul + p a::after {content: "";width: 0;height: 0;position: absolute;top: 30%;right: 0;display: block;border-left: 8px solid #161616;border-top: 8px solid transparent;border-bottom: 8px solid transparent;} #topProduct ul + p a:hover {width: 230px;} #topProduct #btnArea {margin: 100px auto 0;justify-content: space-between;text-align: center;} #topProduct #btnArea li {width: calc(100% / 2);border: 5px solid #fff;} #topProduct #btnArea li.full {width: calc(100% / 1);} #topProduct #btnArea li a {padding: 40px 0;position: relative;display: block;background: #161616;border: 1px solid #161616;color: #fff;} #topProduct #btnArea li a::after {content: "";width: 10px;height: 10px;margin: 0 0 0 20px;display: inline-block;transform: rotate(45deg);border: 1px solid;border-color: #fff #fff transparent transparent;} #topProduct #btnArea li a:hover {background: #fff;color: #161616;} #topProduct #btnArea li a:hover::after {border: 1px solid;border-color: #161616 #161616 transparent transparent;} @media only screen and (min-width: 768px) and (max-width: 896px) { #topProduct ul + p {width: 30%;} #topProduct ul + p a {padding: 0 10px 10px;} #topProduct ul + p a::after {top: 20%;} } @media only screen and (max-width: 767px) { #topProduct {padding: 80px 0 50px;} #topProduct.inner {width: 100%;} #topProduct h2 {margin: 0 auto 30px;font-size: 3rem;line-height: 1;} #topProduct h2 small {margin: 5px 0 0;font-size: 1.2rem;} #topProduct ul + p {width: 40%;margin: 20px auto 0;} #topProduct ul + p a {width: 150px;padding: 0 10px 5px;} #topProduct ul + p a::after {border-left: 5px solid #161616;border-top: 5px solid transparent;border-bottom: 5px solid transparent;} #topProduct #btnArea {width: 95%;margin: 50px auto 0;font-size: 1.2rem;} #topProduct #btnArea li {border: 2px solid #fff; width: 100%;} #topProduct #btnArea li a {padding: 20px 0;} #topProduct #btnArea li a::after {width: 7px;height: 7px;margin: 0 0 0 5px;} } #topActivities {padding: 100px 0 50px;border-top: 1px solid #ccc;} #topActivities h2 {margin: 0 auto 50px;text-align: center;font-size: 4rem;font-weight: 600;line-height: 1.3;letter-spacing: 0.02em;} #topActivities h2 small {display: block;font-size: 1.4rem;font-weight: 300;} #topActivities a .topicsBox {margin: 0 auto 30px;align-items: center;background: #161616;color: #fff;} #topActivities a .topicsBox li:nth-child(1) {width: 40%;line-height: 0;} #topActivities a .topicsBox li:nth-child(2) {width: 60%;padding: 0 50px;} #topActivities a .topicsBox li:nth-child(2) h3 {margin: 0 0 20px;font-size: 2.5rem;font-weight: 600;line-height: 1.5;} #topActivities a .topicsBox li:nth-child(2) h3 small {display: block;font-size: 1.5rem;font-weight: 300;} #topActivities a .topicsBox li:nth-child(2) p:nth-of-type(1) {margin: 0 0 20px;font-size: 1.5rem;} #topActivities a .topicsBox li:nth-child(2) p:nth-of-type(2) {width: 25%;margin: auto;} #topActivities a .topicsBox li:nth-child(2) p:nth-of-type(2) span {width: 170px;margin: auto;padding: 0 10px;position: relative;display: block;color: #fff;border-bottom: 1px solid #fff;transition: all 0.5s ease;} #topActivities a .topicsBox li:nth-child(2) p:nth-of-type(2) span::after {content: "";width: 0;height: 0;position: absolute;top: 30%;right: 0;display: block;border-left: 8px solid #fff;border-top: 8px solid transparent;border-bottom: 8px solid transparent;} #topActivities a:hover .topicsBox li:nth-child(2) p:nth-of-type(2) span {width: 200px;} @media only screen and (min-width: 768px) and (max-width: 896px) { #topActivities a .topicsBox li:nth-child(2) {padding: 0 30px;} #topActivities a .topicsBox li:nth-child(2) h3 {margin: 0 0 10px;font-size: 2rem;} #topActivities a .topicsBox li:nth-child(2) p:nth-of-type(1) {margin: 0 0 10px;} #topActivities a .topicsBox li:nth-child(2) p:nth-of-type(2) span {width: 150px;padding: 0 10px 5px;} #topActivities a .topicsBox li:nth-child(2) p:nth-of-type(2) span::after {top: 20%;} } @media only screen and (max-width: 767px) { #topActivities {padding: 50px 0 20px;} #topActivities h2 {margin: 0 auto 30px;font-size: 3rem;line-height: 1;} #topActivities h2 small {margin: 5px 0 0;font-size: 1.2rem;} #topActivities a .topicsBox {background: #fff;color: #161616;} #topActivities a .topicsBox li:nth-child(1) {width: 100%;} #topActivities a .topicsBox li:nth-child(2) {width: 100%;padding: 0;text-align: center;} #topActivities a .topicsBox li:nth-child(2) h3 {margin: 10px 0 0;font-size: 1.8rem;font-weight: 300;} #topActivities a .topicsBox li:nth-child(2) p:nth-of-type(1), #topActivities a .topicsBox li:nth-child(2) p:nth-of-type(2) {display: none;} } #topNews {padding: 50px 0 120px;} #topNews h2 {margin: 0 auto 50px;text-align: center;font-size: 4rem;font-weight: 600;line-height: 1.3;letter-spacing: 0.02em;} #topNews h2 small {display: block;font-size: 1.4rem;font-weight: 300;} #topNews dl {} #topNews dl dt {width: 25%;margin: 0 0 10px;padding: 5px 0 10px;border-bottom: 1px solid #ccc;} #topNews dl dt .cat {width: 100px;margin: 0 20px 0 0;padding: 5px 0;text-align: center;border: 1px solid #161616;line-height: 1;align-self: flex-start;} #topNews dl dt .date {} #topNews dl dd {width: 75%;margin: 0 0 10px;padding: 5px 0 10px;border-bottom: 1px solid #ccc;} #topNews dl dd a { text-decoration:underline;} #topNews dl dd a:hover { text-decoration:none;} #topNews dl + p {width: 20%;margin: 30px auto 0;} #topNews dl + p a {width: 220px;padding: 0 10px;position: relative;display: block;border-bottom: 1px solid #161616;transition: all 0.5s ease;} #topNews dl + p a::after {content: "";width: 0;height: 0;position: absolute;top: 30%;right: 0;display: block;border-left: 8px solid #161616;border-top: 8px solid transparent;border-bottom: 8px solid transparent;} #topNews dl + p a:hover {width: 230px;} @media only screen and (min-width: 768px) and (max-width: 896px) { #topNews dl + p {width: 30%;} #topNews dl + p a {padding: 0 10px 10px;} #topNews dl + p a::after {top: 20%;} } @media only screen and (max-width: 767px) { #topNews {padding: 30px 0 50px;} #topNews h2 {margin: 0 auto 30px;font-size: 3rem;line-height: 1;} #topNews h2 small {margin: 5px 0 0;font-size: 1.2rem;} #topNews dl dt {width: 100%;margin: 0;padding: 5px 0;border-bottom: 0;} #topNews dl dd {width: 100%;} #topNews dl + p {width: 50%;margin: 20px auto 0;} #topNews dl + p a {width: 170px;padding: 0 10px 5px;} #topNews dl + p a::after {border-left: 5px solid #161616;border-top: 5px solid transparent;border-bottom: 5px solid transparent;} } #topEvent {padding: 80px 0;background: #f5f5f5;} #topEvent ul {margin: 0 auto;justify-content: space-between;} #topEvent ul li:nth-child(1) {width: 50%;} #topEvent ul li:nth-child(1) h2 {margin: 0 auto 50px;font-size: 4rem;font-weight: 600;line-height: 1.3;letter-spacing: 0.02em;} #topEvent ul li:nth-child(1) h2 small {display: block;font-size: 1.4rem;font-weight: 300;} #topEvent ul li:nth-child(2) {width: 43%;line-height: 0;} @media only screen and (max-width: 767px) { #topEvent {padding: 50px 0;} #topEvent ul li:nth-child(1) {width: 100%;margin: 0 auto 30px;text-align: center;} #topEvent ul li:nth-child(1) h2 {margin: 0 auto 30px;font-size: 3rem;line-height: 1;} #topEvent ul li:nth-child(1) h2 small {margin: 5px 0 0;font-size: 1.2rem;} #topEvent ul li:nth-child(2) {width: 100%;} } /* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- PAGE */ #pageHead {width: 100%;position: relative;} #pageHead figure {position: relative;line-height: 0;} #pageHead figure img, .pSliderBox ul li img {width: 100%;object-fit: cover;} #pageHead.high figure img, #pageHead.high .pSliderBox ul li img {height: 80vh;} #pageHead.low figure img {height: 30vh;} #pageHead figure figcaption, .pSliderBox li p {position: absolute;left: 10%;z-index: 5;color: #fff;font-size: 5rem;font-weight: 600;line-height: 1.2;} #pageHead.high figure figcaption {top: 50%;} #pageHead.low figure figcaption {top: 40%;} #pageHead figure figcaption small, #pageHead .pSliderBox p small {display: block;font-size: 1.8rem;font-weight: 300;} @media only screen and (max-width: 767px) { #pageHead figure figcaption {font-size: 3rem;} #pageHead.high figure img, #pageHead.high .pSliderBox ul li img {height: 70vh;} #pageHead.high figure figcaption {left: 5%;} #pageHead.low figure figcaption {top: 45%;left: 5%;} #pageHead figure figcaption, #pageHead .pSliderBox p {font-size: 3rem;} #pageHead figure figcaption small, #pageHead .pSliderBox p small {font-size: 1.2rem;} } .pageNav {width: 100%;background: #161616;} .pageNav ul {text-align: center;justify-content: center;font-size: 1.4rem;letter-spacing: -0.05em;} .pageNav ul li {width: calc(100% / 3);} .pageNav.m7 ul li {width: calc(100% / 7);} .pageNav ul li a {padding: 20px 0;position: relative;display: block;color: #fff;} .pageNav ul li a::after {content: "";width: 7px;height: 7px;position: absolute;right: 5%;display: block;border: 1px solid;transform: rotate(-45deg);} #pageHead + .pageNav ul li a::after {top: 40%;border-color: transparent transparent #fff #fff;} main + .pageNav ul li a::after {top: 48%;border-color: #fff #fff transparent transparent;} @media only screen and (max-width: 767px) { .pageNav {position: relative;} .pageNav ul {text-align: left;font-size: 1.2rem;} .pageNav ul.inner {width: 100%;} .pageNav ul li {width: calc(100% / 1);border-bottom: 1px solid #555;} .pageNav.m7 ul li {width: calc(100% / 1);border-bottom: 1px solid #555;} .pageNav ul li a {padding: 10px;} .pageNav ul li a::after {width: 5px;height: 5px;top: 35%;right: 5%;} } #breadcrumb {margin: 10px auto 0;} #breadcrumb ul {color: #8c8c91;font-size: 1.2rem;} #breadcrumb ul li {margin: 0 30px 0 0;position: relative;} #breadcrumb ul li a {color: #8c8c91;} #breadcrumb ul li::after {content: "";width: 7px;height: 7px;position: absolute;top: 30%;right: -18px;display: block;transform: rotate(45deg);border: 1px solid;border-color: #8c8c91 #8c8c91 transparent transparent;} #breadcrumb ul li:last-child::after {display: none;} @media only screen and (max-width: 767px) { #breadcrumb ul {font-size: 1rem;} #breadcrumb ul li {margin: 0 20px 0 0;} #breadcrumb ul li::after {width: 5px;height: 5px;top: 28%;right: -12px;} } .cont {padding: 130px 0 50px;} .cont:last-of-type {padding: 130px 0 100px;} .cont.feature {padding: 130px 0 0;} .cont .contbtn {text-align: center;} .cont .contbtn a {padding: 20px 80px 20px 100px;position: relative;display: inline-block;background: #161616;border: 1px solid #161616;color: #fff;} .cont .contbtn a::after {content: "";width: 10px;height: 10px;margin: 0 0 0 50px;display: inline-block;transform: rotate(45deg);border: 1px solid;border-color: #fff #fff transparent transparent;} .cont .contbtn a i {margin: 0 10px 0 0;display: inline-block;vertical-align: middle;fill: #fff;} .cont .contbtn a:hover {background: #fff;color: #161616;} .cont .contbtn a:hover::after {border: 1px solid;border-color: #161616 #161616 transparent transparent;} .cont .contbtn a:hover i {fill: #161616;} @media only screen and (max-width: 767px) { .cont {padding: 80px 0 30px;} .cont:last-of-type {padding: 80px 0 60px;} .cont.feature {padding: 50px 0 0;} .cont .contbtn a {padding: 15px 30px 15px 70px;} .cont .contbtn a::after {margin: 0 0 0 20px;} } /* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- CONCEPT */ #concept h2 {margin: 0 auto 50px;text-align: center;font-size: 4rem;font-weight: 300;line-height: 1.3;letter-spacing: 0.02em;} #concept h2 small {display: block;font-size: 1.4rem;font-weight: 300;} #concept .switch {flex-direction: row-reverse;} @media only screen and (max-width: 767px) { #concept h2 {font-size: 3.5rem;} #concept h2 small {font-size: 1.2rem;} } #ouraim h3 {margin: 0 auto 50px;padding: 100px 0 0;position: relative;text-align: center;font-size: 2.5rem;line-height: 1.8;} #ouraim h3::before {content: "";width: 1px;height: 80px;position: absolute;top: 30px;left: 50%;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background: #161616;} #ouraim h3 + p {margin: 0 auto 130px;text-align: center;} #ouraim ul {background: #161616;color: #fff;align-items: center;} #ouraim ul li:nth-child(1) {width: 40%;padding: 0 50px 0 5%;} #ouraim ul li:nth-child(1) h4 {margin: 0 auto 50px;font-size: 3rem;font-weight: 300;line-height: 1.3;letter-spacing: 0.02em;} #ouraim ul li:nth-child(1) h4 small {display: block;font-size: 1.4rem;font-weight: 300;} #ouraim ul li:nth-child(2) {width: 60%;line-height: 0;} @media only screen and (max-width: 767px) { #ouraim h3 {margin: 0 auto 30px;padding: 50px 0 0;font-size: 1.8rem;line-height: 1.8;} #ouraim h3::before {height: 50px;top: 0;} #ouraim h3 + p {margin: 0 auto 100px;text-align: left;} #ouraim ul {flex-direction: column-reverse;} #ouraim ul li:nth-child(1) {width: 100%;padding: 30px 30px 40px;} #ouraim ul li:nth-child(1) h4 {margin: 0 auto 30px;font-size: 2.5rem;} #ouraim ul li:nth-child(1) h4 small {font-size: 1.2rem;} #ouraim ul li:nth-child(2) {width: 100%;} } #commitment {position: relative;} #commitment h3 {margin: 0 auto 30px;position: relative;font-size: 2.8rem;font-weight: 600;line-height: 1.8;} #commitment h3 span {font-size: 6rem;margin: 0 20px 0 0;} #commitment ul li h4 {margin: 0 auto 50px;font-size: 2.4rem;font-weight: 300;line-height: 1.3;letter-spacing: 0.02em;} #commitment ul li h4 small {display: block;font-size: 1.4rem;font-weight: 300;} #commitment ul:nth-of-type(1) {align-items: flex-start;} #commitment ul:nth-of-type(1) li:nth-child(1) {width: 55%;margin: 0;padding: 100px 50px 100px 5%;background: #f5f5f5;} #commitment ul:nth-of-type(1) li:nth-child(2) {width: 45%;line-height: 0;} #commitment ul:nth-of-type(2) {margin: 120px auto 150px;justify-content: space-between;align-items: center;} #commitment ul:nth-of-type(2) li:nth-child(1) {width: 47%;} #commitment ul:nth-of-type(2) li:nth-child(2) {width: 47%;} #commitment .min {padding: 20% 0 0;position: relative;display: block;} #commitment .min img {width: 40%;max-width: 500px;position: absolute;bottom: 0;right: 0;z-index: 1;} #commitment ul:nth-of-type(3) {margin: 100px auto 0;background: #f5f5f5;} #commitment ul:nth-of-type(3) li:nth-child(1) {width: 55%;margin: 0;padding: 50px 50px 80px 5%;} #commitment ul:nth-of-type(3) li:nth-child(2) {width: 45%;} #commitment #technology {padding: 100px 0 0;background: #f5f5f5;} #commitment #technology h4 {margin: 0 auto 10px;font-size: 2.4rem;font-weight: 600;line-height: 1.8;} #commitment #technology table {width: 100%;margin: 40px auto 100px;border-collapse: collapse;font-size: 1.6rem;line-height: 1.5;} #commitment #technology table th {padding: 5px;background: #161616;color: #fff;border: 1px solid #fff;} #commitment #technology table td {padding: 5px;background: #e0e0e0;text-align: center;border: 1px solid #fff;vertical-align: middle;} #commitment #technology table td small {display: block;} #commitment #technology table tr.g1 td {background: #c3c3c3;} #commitment #technology table td:nth-child(1) {width: 15%;} #commitment #technology table td:nth-child(2) {width: 25%;} #commitment #technology table td:nth-child(3) {width: 25%;} #commitment #technology table td:nth-child(4) {width: 35%;} #commitment #technology ul {} #commitment #technology ul li:nth-child(1) {width: 55%;margin: 0;padding: 0;} #commitment #technology ul li:nth-child(2) {width: 45%;} #commitment #technology figure {width: 100%;margin: 100px auto 0;line-height: 0;} #commitment #technology figure img {width: 100%;height: 500px;object-fit: cover;} @media only screen and (max-width: 767px) { #commitment h3 {margin: 0 auto 10px;font-size: 2.2rem;} #commitment h3 span {font-size: 4rem;} #commitment ul li h4 {margin: 0 auto 30px;font-size: 2rem;} #commitment ul li h4 small {font-size: 1.2rem;} #commitment ul:nth-of-type(1) {flex-direction: column-reverse;background: #f5f5f5;} #commitment ul:nth-of-type(1) li:nth-child(1) {width: 100%;padding: 10px 30px 40px;} #commitment ul:nth-of-type(1) li:nth-child(2) {width: 92%;margin: 0 0 0 auto;} #commitment ul:nth-of-type(2) {margin: 60px auto 80px;justify-content: flex-start;flex-direction: column-reverse;} #commitment ul:nth-of-type(2).inner {min-width: 100%;} #commitment ul:nth-of-type(2) li:nth-child(1) {width: 100%;padding: 10px 30px 40px;} #commitment ul:nth-of-type(2) li:nth-child(2) {width: 92%;margin: 0 auto 0 0;} #commitment .min {padding: 35% 0 0;} #commitment .min img {width: 70%;} #commitment ul:nth-of-type(3) {flex-direction: column-reverse;} #commitment ul:nth-of-type(3) li:nth-child(1) {width: 100%;padding: 10px 30px;} #commitment ul:nth-of-type(3) li:nth-child(2) {width: 92%;margin: 0 0 0 auto;} #commitment #technology h4 {font-size: 2rem;} #commitment #technology table {margin: 20px auto 50px;display: block;line-height: 1.5;overflow-x: scroll;white-space: nowrap;-webkit-overflow-scrolling: touch;} #commitment #technology table tbody {width: 200%;display: table;} #commitment #technology ul li:nth-child(1) {width: 100%;} #commitment #technology ul li:nth-child(2) {display: none;} #commitment #technology figure {margin: 50px auto 0;} } #manufacturing {} #manufacturing h2 + p {margin: 0 auto 100px;text-align: center;} #manufacturing h3 {margin: 0 auto 20px;font-size: 2.4rem;font-weight: 600;line-height: 1.8;} #manufacturing ul:nth-of-type(1) {margin: 0 auto 100px;align-items: flex-start;} #manufacturing ul:nth-of-type(1) li:nth-child(1) {width: 55%;padding: 100px 50px 100px 5%;background: #f5f5f5;} #manufacturing ul:nth-of-type(1) li:nth-child(2) {width: 45%;} #manufacturing ul:nth-of-type(2) {margin: 80px auto 50px;justify-content: space-between;} #manufacturing ul:nth-of-type(2) li:nth-child(1) {width: 48%;padding: 20px 50px 50px;} #manufacturing ul:nth-of-type(2) li:nth-child(2) {width: 48%;position: relative;} #manufacturing ul:nth-of-type(2) li:nth-child(2) p:nth-of-type(1) {width: 60%;position: relative;top: 0;} #manufacturing ul:nth-of-type(2) li:nth-child(2) p:nth-of-type(2) {width: 85%;position: relative;top: -80px;left: 10%;z-index: 1;} #manufacturing ul:nth-of-type(3) {margin: 0 auto 20px;} #manufacturing ul:nth-of-type(3) li:nth-child(1) {width: 55%;padding: 50px 50px 30% 5%;background: #f5f5f5;} #manufacturing ul:nth-of-type(3) li:nth-child(2) {width: 45%;} #manufacturing .min {margin: 0 auto -100px;position: relative;display: block;} #manufacturing .min img {width: 40%;max-width: 500px;position: relative;top: -150px;left: 0;z-index: 1;} @media only screen and (max-width: 767px) { #manufacturing h2 + p {margin: 0 auto 70px;} #manufacturing h3 {margin: 0 auto 10px;font-size: 2rem;} #manufacturing ul:nth-of-type(1) {margin: 0 auto 70px;flex-direction: column-reverse;background: #f5f5f5;} #manufacturing ul:nth-of-type(1) li:nth-child(1) {width: 100%;padding: 20px 30px 40px;} #manufacturing ul:nth-of-type(1) li:nth-child(2) {width: 92%;margin: 0 0 0 auto;} #manufacturing ul:nth-of-type(2) {margin: 10px auto 40px;flex-direction: column-reverse;} #manufacturing ul:nth-of-type(2) li:nth-child(1) {width: 100%;padding: 20px 30px 40px;} #manufacturing ul:nth-of-type(2) li:nth-child(2) {width: 100%;} #manufacturing ul:nth-of-type(2) li:nth-child(2) p:nth-of-type(1) {width: 50%;left: 5%;} #manufacturing ul:nth-of-type(2) li:nth-child(2) p:nth-of-type(2) {width: 70%;top: -30px;left: 20%;} #manufacturing ul:nth-of-type(3) {flex-direction: column-reverse;background: #f5f5f5;} #manufacturing ul:nth-of-type(3) li:nth-child(1) {width: 100%;padding: 10px 30px 100px;} #manufacturing ul:nth-of-type(3) li:nth-child(2) {width: 92%;margin: 0 auto 0 0;} #manufacturing .min img {width: 70%;top: -70px;} } #overseas ul {background: #161616;color: #fff;align-items: center;} #overseas ul li:nth-child(1) {width: 40%;padding: 30px 50px;} #overseas ul li:nth-child(2) {width: 60%;line-height: 0;} @media only screen and (max-width: 767px) { #overseas {margin: 0 0 -80px;} #overseas ul.inner {min-width: 100%;} #overseas ul {flex-direction: column-reverse;} #overseas ul li:nth-child(1) {width: 100%;padding: 50px 30px;} #overseas ul li:nth-child(2) {width: 100%;} } /* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- PRODUCTS */ #productsTop h2 {margin: 0 auto 50px;text-align: center;font-size: 4rem;font-weight: 600;line-height: 1.3;letter-spacing: 0.02em;} #productsTop h2 small {display: block;font-size: 1.4rem;font-weight: 300;} ul.productList {text-align: center;} ul.productList li {width: calc(100% / 3);background: #f5f5f5;border: 5px solid #fff;} ul.productList li a {padding: 20px 0 40px;display: block;} ul.productList li a figure {} ul.productList li a figure img {width: 60%;transition: all 0.5s ease;} ul.productList li a figure figcaption {font-weight: 600;line-height: 1.3;} ul.productList li a figure figcaption small {margin: 0 0 5px;display: block;font-size: 1.4rem;font-weight: 300;} ul.productList li a:hover figure img {transform:scale(1.2,1.2);} ul.productList + p {width: 20%;margin: 30px auto 0;} ul.productList + p a {width: 200px;padding: 0 10px;position: relative;display: block;border-bottom: 1px solid #161616;transition: all 0.5s ease;} ul.productList + p a::after {content: "";width: 0;height: 0;position: absolute;top: 30%;right: 0;display: block;border-left: 8px solid #161616;border-top: 8px solid transparent;border-bottom: 8px solid transparent;} ul.productList + p a:hover {width: 230px;} @media only screen and (max-width: 767px) { #productsTop .cont.inner {width: 100%;} #productsTop h2 {margin: 0 auto 30px;font-size: 3rem;line-height: 1;} #productsTop h2 small {margin: 5px 0 0;font-size: 1.2rem;} ul.productList li {width: calc(100% / 2);border: 2px solid #fff;} ul.productList li a {padding: 20px 0;} ul.productList li a figure figcaption {font-size: 1.2rem;letter-spacing: -0.05em;} ul.productList li a figure figcaption small {margin: 0 0 5px;font-size: 1rem;} } #notes {margin: 80px auto 0;} #notes .inner {padding: 30px;border: 1px solid #161616;} #notes .inner #notetit {margin: 0 0 5px;font-size: 2rem;font-weight: 600;} #notes .inner p {padding: 0 0 0 1em;text-indent: -1em;} @media only screen and (max-width: 767px) { #notes {margin: 50px auto 0;} #notes .inner #notetit {font-size: 1.8rem;} #notes .inner p {font-size: 1.2rem;} } #productFoot {padding: 30px 0 150px;} #productFoot #btnArea {margin: 100px auto 0;justify-content: space-between;text-align: center;} #productFoot #btnArea li {width: calc(100% / 2);border: 5px solid #fff;} #productFoot #btnArea li:nth-child(3) {width: calc(100% / 1);} #productFoot #btnArea li.full {width: calc(100% / 1);} #productFoot #btnArea li a {padding: 30px 0;position: relative;display: block;background: #161616;border: 1px solid #161616;color: #fff;} #productFoot #btnArea li a::after {content: "";width: 10px;height: 10px;margin: 0 0 0 20px;display: inline-block;transform: rotate(45deg);border: 1px solid;border-color: #fff #fff transparent transparent;} #productFoot #btnArea li a:hover {background: #fff;color: #161616;} #productFoot #btnArea li a:hover::after {border: 1px solid;border-color: #161616 #161616 transparent transparent;} #productFoot #btnArea li a i {margin: 0 10px 0 0;display: inline-block;vertical-align: middle;fill: #fff;} #productFoot #btnArea li:hover a i {fill: #161616;} #productFoot .audioboardBnrArea {margin: 100px auto 0;text-align: center;} #productFoot .audioboardBnrArea li {border: 2px solid #fff;} #productFoot .audioboardBnrArea li a {padding: 15px 0 10px;} @media only screen and (max-width: 767px) { #productFoot {padding: 0 0 50px;} #productFoot.inner {width: 100%;} #productFoot #btnArea {width: 95%;margin: 50px auto 0;font-size: 1.4rem;} #productFoot #btnArea li {width: calc(100% / 1);border: 2px solid #fff;} #productFoot #btnArea li a {padding: 15px 0 10px;} #productFoot #btnArea li a::after {margin: 0 0 0 5px;} #productFoot .audioboardBnrArea {width: 95%;margin: 30px auto 0;} } .products h2 {margin: 0 auto 50px;font-size: 4rem;font-weight: 600;line-height: 1.3;letter-spacing: 0.02em;} .products h2 small {display: block;font-size: 1.4rem;font-weight: 300;} .products .singleblock {margin: 0 auto 70px;} .products ul.block2 {margin: 0 auto 70px;justify-content: space-between;} .products ul.block2 li { position:relative; width: calc(50% - 30px / 2);} .products ul.block2 li .icon { position:absolute; top:0; right:0; background-color:#B90C35; color:#fff; padding:3px 10px; font-size:12px;} .products ul.block2 li.sm {width: 40%;} .products ul.block2 li.la {width: 55%;} .products ul.block2 li h3 {margin: 0 auto 30px;font-size: 2rem;font-weight: 600;line-height: 1.5} .products ul.block2 li h4, .products .singleblock h4 {margin: 0 auto 30px;font-size: 2rem;font-weight: 600;line-height: 1.8} .products ul.block2 li h5, .products .singleblock h5 {margin: 0 auto 10px;padding: 8px 20px;display: inline-block;background: #161616;color: #fff;font-size: 2rem;line-height: 1.5} .products ul.block2 li p {margin: 0 auto 20px;} .products ul.block2 li figure {position: relative;} .products ul.block2 li figure:nth-of-type(2) {margin: 80px auto 0;padding: 50px 0 0;} .products ul.block2 li figure figcaption {position: absolute;top: 20px;left: 20px;z-index: 1;font-size: 1.4rem;line-height: 1.5;} .products ul.block2 li .arrow {position: relative;} .products ul.block2 li .arrow::after {content: "";width: 0;height: 0;position: absolute;top: 0;left: 220px;display: block;border-left: 40px solid transparent;border-right: 40px solid transparent;border-top: 40px solid #161616;} .products ul.block2 li.caption figure figcaption {text-align: center;} .products ul.block2 li.caption figure:nth-of-type(1) figcaption {top: 20px!important;left: 22%!important;} .products ul.block2 li.caption figure:nth-of-type(2) figcaption {top: 0!important;left: 25%!important;} .products ul.block1-3 {margin: 20px auto 0;justify-content: space-between;align-items: flex-start} .products ul.block1-3 li:nth-child(1) {width: 16%;} .products ul.block1-3 li:nth-child(1) figure img {width: 100%;} .products ul.block1-3 li:nth-child(2) {width: 82%;} .products ul.block1-3 li:nth-child(2) figure {width: calc(100% / 3);border: 10px solid rgba(0, 0, 0, 0);} .products ul.block1-3 li:nth-child(2) figure img {width: 100%;} .products ul.block1-3 li:nth-child(2) figure p {line-height: 1.5;} .products ul.block1-3 li:nth-child(2) figure p small {margin: 5px 0 0;display: block;} .products ul.block1-3 li h4 {width: 100%;padding: 0 0 5px;border-bottom: 1px solid #161616;} .products .lineBox {margin: 0 0 50px;padding: 30px 30px 20px;border: 1px solid #161616;font-size: 1.6rem;} .products .lineBox ul.block2 {margin: 0;padding: 30px 30px 0;} .products .lineBox figure {justify-content: space-between;} .products .lineBox figure img:nth-of-type(1) {width: 48%;} .products .lineBox figure img:nth-of-type(2) {width: 48%;} .products .lineBox figure .arrow {position: relative;} .products .lineBox figure .arrow::after {content: "";width: 0;height: 0;position: absolute;top: 35%;left: -10px;display: block;border-left: 20px solid #161616;border-top: 20px solid transparent;border-bottom: 20px solid transparent;} .products .lineBox small {margin: 10px 0 0;display: block;line-height: 1.2;} .products .lineBoxw {margin: 0 0 70px;border: 1px solid #161616;background: #fff;font-size: 1.6rem;} .products .lineBoxw ul {padding: 30px 30px 0;} .products .lineBoxw h3 {padding: 10px 0;text-align: center;background: #161616;color: #fff;font-weight: 600;} .products .lineBoxw figure {width: 70%;margin: auto;padding: 20px 0;display: block;justify-content: space-between;} .products .lineBoxw figure figcaption {width: 100%;} .products .lineBoxw figure p {width: 50%;display: inline-block} .products .lineBoxw figure p:nth-of-type(2) {text-align: right} .products .botit {margin: 0 0 10px;padding: 0 30px;display: inline-block;border: 1px solid #161616;} .products .whiteBox {margin: 0 auto 50px;padding: 40px;background: #fff;} .products .whiteBox.bo {border: 1px solid #161616;} .products .grayBox {margin: 0 auto 50px;padding: 40px;background: #f5f5f5;} .products .whiteBox ul.block2, .products .grayBox ul.block2 {margin: 0 auto;} .products .whiteBox h2, .products .grayBox h2 {text-align: center;} .products .whiteBox .pSliderBox ul li {background: #f5f5f5;} .products .grayBox .pSliderBox ul li {background: #fff;} .products .pSliderBox {margin: 0 0 20px;position: relative;} .products .pSliderBox .stit {position: absolute;top: 10px;left: 20px;z-index: 1;line-height: 1.5;} .products .pSliderBox .stit small {margin: 0 0 0 10px;display: block;} .products .option ul {align-items: flex-start;} .products .option figure {position: relative;} .products .option figure figcaption {position: absolute;top: 20px;left: 20px;z-index: 1;font-size: 1.4rem;line-height: 1.5;} .products .option h6 {margin: 15px auto 10px;padding: 5px 50px 5px 20px;display: inline-block;background: #161616;color: #fff;font-size: 1.4rem;} .products .white {background: #fff;} .products .gray {background: #f5f5f5;} .products .black {background: #161616;} .products .switch {flex-direction: row-reverse;} .products .w100 {width: 100%;} .products hr {height: 1px;margin: 80px auto;background: #161616;border: 0;} .products table {width: 100%;border-collapse: collapse;} .products table caption {text-align: left;} .products table th {padding: 5px;background: #161616;color: #fff;border: 1px solid #ccc;} .products table td {padding: 5px;background: #fff;text-align: center;border: 1px solid #ccc;} @media only screen and (max-width: 767px) { .products h2 {margin: 0 auto 30px;font-size: 3rem;line-height: 1;} .products h2 small {margin: 5px 0 0;font-size: 1.2rem;} /* .products ul.block2 {margin: 0 auto 30px;flex-direction: column-reverse;} */ .products ul.block2 {margin: 0 auto 30px;flex-direction: column;} .products ul.block2 li {width: calc(100% / 1);margin: 0 auto 20px;border: 0 none;} .products ul.block2 li.sm, .products ul.block2 li.la {width: calc(100% / 1);} .products ul.block2 li h4, .products .singleblock h4 {font-size: 1.8rem} .products ul.block2 li h5, .products .singleblock h5 {font-size: 1.6rem;} .products ul.block2 li figure:nth-of-type(1) {padding: 30px 0 0;} .products ul.block2 li figure:nth-of-type(2) {margin: 50px auto 0;padding: 30px 0 0;} .products ul.block2 li figure figcaption {font-size: 1.2rem;} .products ul.block2 li .arrow::after {top: -10px;left: 130px;} .products ul.block2 li.caption figure:nth-of-type(1) figcaption {left: 13%!important;} .products ul.block2 li.caption figure:nth-of-type(2) figcaption {left: 19%!important;} .products ul.block1-3 li:nth-child(1) {width: 100%;} .products ul.block1-3 li:nth-child(2) {width: 100%;} .products ul.block1-3 li:nth-child(2) figure {width: 100%; margin-bottom: 10px;} .products .lineBox {margin: 20px auto 40px;padding: 25px 15px 0;} .products .lineBox figure {justify-content: flex-start;} .products .lineBox figure img:nth-of-type(1) {width: 100%;} .products .lineBox figure img:nth-of-type(2) {width: 100%;} .products .lineBox figure .arrow::after {top: auto;bottom: -20px;left: auto;right: 140px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #161616;} .products .lineBoxw ul.block2 {margin: 0 auto 0;padding: 20px 20px 0;} .products .lineBoxw h3 {padding: 5px 0;} .products .lineBoxw figure {width: 95%;} .products .whiteBox {margin: 0 auto 30px;padding: 20px;} .products .grayBox {margin: 0 auto 30px;padding: 20px;} .products .switch {flex-direction: column-reverse;} .products .option ul li h6 {padding: 5px 10px;} .products table {display: block;overflow-x: scroll;white-space: nowrap;-webkit-overflow-scrolling: touch;} .products table tbody {width: 200%;display: table;} .products table th img {height: 15px;} } #speakerstand #pageHead figure figcaption {top: 15%;left: auto;right: 7%;text-align: right;color: #161616;} #speakerstand table th {width: 30%;} #speakerstand table th.line {position: relative;background-image: linear-gradient(to top right, transparent, transparent 49%, #fff 49%, #fff 51%, transparent 51%, transparent);} #speakerstand table th.line span:nth-of-type(1) {position: absolute;bottom: 0;left: 20px;} #speakerstand table th.line span:nth-of-type(2) {position: absolute;top: 0;right: 20px;} #speakerstand table th img {height: 30px;object-fit: cover;} #speakerstand p.infoLinkBox {margin: 0 auto 80px;padding: 30px;text-align: center;background: #fff;border: 1px solid #161616;} #speakerstand p.infoLinkBox span {margin: 0 20px 0 0;padding: 20px 30px;display: inline-block;text-align: center;background: #fff;border: 1px solid #161616;line-height: 0;} #speakerstand p.infoLinkBox a {width: 70%;margin: 30px auto 0;padding: 20px 0;position: relative;display: block;background: #161616;border: 1px solid #161616;color: #fff;} #speakerstand p.infoLinkBox a::after {content: "";width: 10px;height: 10px;margin: 0 0 0 20px;display: inline-block;transform: rotate(45deg);border: 1px solid;border-color: #fff #fff transparent transparent;} #speakerstand p.infoLinkBox a:hover {background: #fff;color: #161616;} #speakerstand p.infoLinkBox a:hover::after {border: 1px solid;border-color: #161616 #161616 transparent transparent;} @media only screen and (max-width: 767px) { #speakerstand p.infoLinkBox {margin: 0 auto 50px;padding: 20px;} #speakerstand p.infoLinkBox span {width: 50%;margin: 0 auto 10px;padding: 10px;display: block;} #speakerstand p.infoLinkBox a {width: 100%;margin: 20px auto 0;padding: 10px 0;} } /* series共通 */ .series .feature .cbox h3 {width: 100%;margin: 0 auto 40px;font-size: 2rem;font-weight: 600;line-height: 1;} .series .feature .cbox h3 span {font-size: 6rem;} .series .feature .cbox h3 small {margin: 0 0 0 15px;display: block;} .series .feature .cbox h4 {margin: 10px auto 20px;font-size: 2rem;font-weight: 600;line-height: 1.5} .series .feature .cbox h4.number {padding: 0 0 0 1.3em;text-indent: -1.3em;} .series .feature .cbox figure {margin: 10px auto 20px;position: relative;line-height: 0;} .series .feature .cbox figure figcaption {position: absolute;top: 20px;left: 20px;z-index: 1;font-size: 1.4rem;line-height: 1.5;} .series .feature .cbox .pSliderBox .slick-dots {bottom: -20px;} .series .cont h2 {text-align: center;} .series .gallery {padding: 100px 0;} .series .gallery ul {line-height: 0;} .series .gallery ul li {width: calc(24.5% - 10px / 4);margin: 0 10px 10px 0;} .series .gallery ul li:nth-child(4n) {margin-right: 0;} .series .gallery p {width: 20%;margin: 30px auto 0;} .series .gallery p a {width: 200px;padding: 0 10px;position: relative;display: block;border-bottom: 1px solid #161616;transition: all 0.5s ease;} .series .gallery p a::after {content: "";width: 0;height: 0;position: absolute;top: 30%;right: 0;display: block;border-left: 8px solid #161616;border-top: 8px solid transparent;border-bottom: 8px solid transparent;} .series .gallery p a:hover {width: 230px;} .series .gallery .md-overlay {width: 100%;height: 100%;display: none;position: fixed;top: 0;left: 0;z-index: 50;background: #000;opacity: .7;} .series .gallery .md-contents {width: 50%;max-width: 800px;height: auto;display: none;position: fixed;top: 50%;left: 50%;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);overflow: hidden;z-index: 51;border-radius: 4px;} .series .gallery .md-inner {height: auto;padding: 50px 60px;background: #fff;} .series .gallery .md-inner img {width: 100%;} .series .gallery .md-xmark {width: 25px;height: 22px;position: absolute;top: 20px;right: 20px;z-index: 55;cursor: pointer;} .series .gallery .md-xmark span {width: 100%;height: 2px;position: absolute;left: 0;background: #333;border-radius: 4px;} .series .gallery .md-xmark span:nth-of-type(1) {top: 0;transform: translateY(10px) rotate(-45deg);} .series .gallery .md-xmark span:nth-of-type(2) {bottom: 0;transform: translateY(-10px) rotate(45deg);} .series .lineup h3 {margin: 0 auto 20px;padding: 10px 50px;display: inline-block;background: #161616;color: #fff;} .series .spec dl {margin: 0 auto 50px;} .series .spec dl dt {width: 20%;margin: 0 0 10px;padding: 0 0 10px;border-bottom: 1px solid #bcbcbc;font-weight: 600;} .series .spec dl dd {width: 80%;margin: 0 0 10px;padding: 0 0 10px;border-bottom: 1px solid #bcbcbc;} .customize h2 + p {margin: 0 auto 50px;text-align: center;} .series .option h4.number {padding: 0 0 0 1em;text-indent: -1em;} @media only screen and (max-width: 767px) { .series .feature h3 {width: 100%;margin: 0 auto 50px;padding: 20px 10px 200px;font-size: 1.4rem;font-weight: 600;line-height: 1;} .series .feature h3 span {font-size: 5rem;} .series .feature .cbox h4 {font-size: 1.6rem} .series .feature .cbox figure figcaption {top: 10px;left: 10px;font-size: 1.2rem;} .series .gallery ul li {width: calc(50% - 5px / 2);margin: 0 5px 5px 0;} .series .gallery ul li:nth-child(2n) {margin-right: 0;} .series .gallery p {width: 60%;margin: 20px auto;} .series .gallery p a {width: auto;padding: 0 10px 5px;} .series .gallery p a::after {border-left: 5px solid #161616;border-top: 5px solid transparent;border-bottom: 5px solid transparent;} .series .gallery .md-contents {width: 90%;} .series .gallery .md-inner {padding: 40px 30px;} .series .gallery .md-xmark {top: 10px;right: 10px;} .series .spec dl {margin: 0 auto 30px;} .series .spec dl dt {width: 100%;margin: 0;padding: 0;border-bottom: 0 none;} .series .spec dl dd {width: 100%;margin: 0 0 10px;padding: 0 0 10px;} .customize h2 + p {margin: 0 auto 30px;} } /* csr */ #csr .feature #feature01, #csr .feature #feature02, #csr .feature #feature03 {padding: 100px 0 70px;position: relative;} #csr .feature #feature01, #csr .feature #feature03 {background: #161616;} #csr .feature #feature02 {background: #d3d3d3;} #csr .feature #feature01, #csr .feature #feature02,#csr .feature #feature03 {position: relative;} #csr .feature #feature01 .bg {right: 0;width: 40%;} #csr .feature #feature02 .bg {left: 0;width: 40%;} #csr .feature #feature03 .bg {right: 0;width: 40%;} #csr .feature #feature01 .bg, #csr .feature #feature02 .bg, #csr .feature #feature03 .bg {display: block;position: absolute;top: 0;height: auto;transition: 4s;} #csr .feature #feature01 .cbox, #csr .feature #feature02 .cbox, #csr .feature #feature03 .cbox {width: 50%;max-width: 800px;} #csr .feature #feature01 .cbox, #csr .feature #feature03 .cbox {margin: 0 0 8% 5%;color: #fff;} #csr .feature #feature02 .cbox {margin: 0 5% 8% auto;color: #161616;} #csr .feature #feature01 .cbox .stit {color: #161616;} #csr .feature .pSliderBox .slick-dots {bottom: 10px;} #csr .customize .whiteBox figure {margin: -130px auto 0;text-align: center;} #csr .customize .lineBox, #csr .option .lineBox {margin: -20px auto 0;} @media only screen and (max-width: 767px) { #csr #product01 ul.block2 {flex-direction: column;} #csr .feature h3 {color: #fff;} #csr .feature h3 small {margin: 0 0 0 20px;display: block;} #csr .feature #feature01, #csr .feature #feature02, #csr .feature #feature03 {padding: 0 0 10px;background: none;background-color: #f5f5f5;} #csr .feature #feature01 .bg, #csr .feature #feature02 .bg, #csr .feature #feature03 .bg {display: none;} #csr .feature #feature01 h3 {background: #161616 url("images/products/csr/feature01_back.png") no-repeat 150% -10% / 70%;} #csr .feature #feature02 h3 {padding: 20px 10px 200px 72%;background: #161616 url("images/products/csr/feature02_back.png") no-repeat 0 0 / 55%;} #csr .feature #feature03 h3 {background: #161616 url("images/products/csr/feature03_back.png") no-repeat 150% -10% / 70%;} #csr .feature #feature01 .cbox, #csr .feature #feature02 .cbox, #csr .feature #feature03 .cbox {width: 100%;margin: 0 0 8% 0;padding: 0 20px;color: #161616;} #csr .feature #feature01 .pict {margin: 0 auto 50px;background: #161616;} #csr .customize .whiteBox figure {margin: 0 auto 0;} #csr .customize .lineBox, #csr .option .lineBox {padding: 15px;} } /* cl */ #cl #pageHead figure figcaption {top: 40%;left: auto;right: 7%;text-align: right;} #cl .feature #feature01, #cl .feature #feature02, #cl .feature #feature03 {padding: 100px 0 30px;position: relative;} #cl .feature #feature01 ul li figure {color: #fff;} #cl .feature #feature02 {background: #707070 url("images/products/cl/feature02_back.png") no-repeat 100% 0 / 35%;color: #fff;} #cl .feature #feature02 .cbox:nth-of-type(1) {max-width: 700px;margin: 0 0 20%;} #cl .gallery {color: #fff;} #cl .gallery p a {color: #fff;width: 200px;border-bottom: 1px solid #fff;} #cl .gallery p a::after {border-left: 8px solid #fff;} #cl .gallery p a:hover {width: 230px;} #cl table + p {margin: 0 0 60px;} @media only screen and (max-width: 767px) { #cl #pageHead figure figcaption {top: 50%;right: 5%;} #cl #product01.cont {padding: 50px 0 0;} #cl #product01 ul.block2 {flex-direction: column;} #cl .feature #feature01, #cl .feature #feature02, #cl .feature #feature03 {padding: 50px 0 10px;} #cl .feature #feature01 ul li figure figcaption {top: 50px} #cl .feature h3 {margin: 0 auto;padding: 20px 10px 0;} #cl .feature h3 small {margin: 0 0 0 20px;display: block;} #cl .feature #feature02 {padding: 0 0 10px;background: none;background-color: #f5f5f5;color: #161616;} #cl .feature #feature02 .bg {display: none;} #cl .feature #feature02 .cbox {width: 100%;margin: 0;padding: 20px 20px 0;} #cl .feature #feature02 h3 {padding: 20px 10px 200px 10px;background: #161616 url("images/products/cl/feature02_back.png") no-repeat 100% 0 / 55%;color: #fff;} #cl table + p {margin: 0 0 30px;} } /* xl */ #xl .pSliderBox {margin: 0;line-height: 0;} #xl .pSliderBox ul li {position: relative;} #xl .pSliderBox ul li p {position: absolute;top: 40%;left: auto;right: 7%;text-align: right;} #xl .pSliderBox ul li p.c16 {color: #161616;} #xl .feature #feature01, #xl .feature #feature02, #xl .feature #feature03 {padding: 100px 0 30px;position: relative;} #xl .feature #feature02 {background: #707070 url("images/products/xl/feature02_back.png") no-repeat 100% 0 / 35%;color: #fff;} #xl .feature #feature02 .cbox:nth-of-type(1) {max-width: 700px;margin: 0 0 20%;} #xl .gallery {color: #fff;} #xl .gallery p a {color: #fff;width: 200px;border-bottom: 1px solid #fff;} #xl .gallery p a::after {border-left: 8px solid #fff;} #xl .gallery p a:hover {width: 230px;} #xl table + p {margin: 0 0 60px;} @media only screen and (max-width: 767px) { #xl .pSliderBox ul li p {top: 50%;right: 5%;} #xl #product01.cont {padding: 50px 0 0;} #xl #product01 ul.block2 {flex-direction: column;} #xl .feature #feature01, #xl .feature #feature02, #xl .feature #feature03 {padding: 50px 0 10px;} #xl .feature #feature01 ul li figure figcaption {top: 50px} #xl .feature h3 {margin: 0 auto;padding: 20px 10px 0;} #xl .feature h3 small {margin: 0 0 0 20px;display: block;} #xl .feature #feature02 {padding: 0 0 10px;background: none;background-color: #f5f5f5;color: #161616;} #xl .feature #feature02 .bg {display: none;} #xl .feature #feature02 .cbox {width: 100%;margin: 0;padding: 20px 20px 0;} #xl .feature #feature02 h3 {padding: 20px 10px 200px 10px;background: #161616 url("images/products/xl/feature02_back.png") no-repeat 100% 0 / 55%;color: #fff;} #xl table + p {margin: 0 0 30px;} } /* asr */ #asr #pageHead figure figcaption {top: 40%;left: auto;right: 7%;text-align: right;color: #fff;} #asr .feature #feature01, #asr .feature #feature02, #asr .feature #feature03 {height: 0%;padding: 100px 0 10px;position: relative;} #asr .feature #feature02 {background: #707070;color: #fff;} #asr .feature #feature02 {background: #707070 url("images/products/asr/feature02_back.png") no-repeat 100% 0 / 35%;color: #fff;} #asr .feature #feature02 .cbox:nth-of-type(1) {max-width: 700px;margin: 0 0 20%;} #asr .feature .pSliderBox .slick-dots {bottom: 10px;} #asr .gallery {color: #fff;} #asr .gallery p a {color: #fff;width: 200px;border-bottom: 1px solid #fff;} #asr .gallery p a::after {border-left: 8px solid #fff;} #asr .gallery p a:hover {width: 230px;} #asr .customize .whiteBox figure {margin: -130px auto 0;text-align: center;} #asr .customize .lineBox, #asr .option .lineBox {margin: -20px auto 0;} @media only screen and (max-width: 767px) { #asr #pageHead figure figcaption {top: 50%;right: 5%;} #asr #product01.cont {padding: 50px 0 0;} #asr #product01 ul.block2 {flex-direction: column;} #asr .feature #feature01, #asr .feature #feature02, #asr .feature #feature03 {padding: 50px 0 10px;} #asr .feature #feature01 ul li figure figcaption {top: 50px} #asr .feature h3 {margin: 0 auto;padding: 20px 10px 0;} #asr .feature h3 small {margin: 0 0 0 20px;display: block;} #asr .feature #feature02 {padding: 0 0 10px;background: none;background-color: #f5f5f5;color: #161616;} #asr .feature #feature02 .bg {display: none;} #asr .feature #feature02 .cbox {width: 100%;margin: 0;padding: 20px 20px 0;} #asr .feature #feature02 h3 {padding: 20px 10px 200px 10px;background: #161616 url("images/products/asr/feature02_back.png") no-repeat 100% 0 / 55%;color: #fff;} #asr .customize .whiteBox figure {margin: 0 auto 0;} #asr .customize .lineBox, #asr .option .lineBox {padding: 15px;} } /* asrll */ #asrll #pageHead figure figcaption {top: 40%;left: auto;right: 7%;text-align: right;} #asrll .feature #feature01, #asrll .feature #feature02, #asrll .feature #feature03 {padding: 100px 0 30px;position: relative;} #asrll .feature #feature01 ul li figure {color: #fff;} #asrll .feature #feature02 {background: #707070 url("en/images/products/asrIIi/feature02_back.png") no-repeat 100% 0 / 35%;color: #fff;} #asrll .feature #feature02 .cbox {width: 80%;max-width: 800px;margin: 0 0 8%;} #asrll .gallery {color: #fff;} #asrll .gallery p a {color: #fff;width: 200px;border-bottom: 1px solid #fff;} #asrll .gallery p a::after {border-left: 8px solid #fff;} #asrll .gallery p a:hover {width: 230px;} #asrll .customize .whiteBox figure {margin: -130px auto 0;text-align: center;} #asrll .customize .lineBox, #asrll .option .lineBox {margin: -20px auto 0;} @media only screen and (max-width: 767px) { #asrll #pageHead figure figcaption {top: 50%;right: 5%;} #asrll #product01.cont {padding: 50px 0 0;} #asrll #product01 ul.block2 {flex-direction: column;} #asrll .feature #feature01, #asrll .feature #feature02, #asrll .feature #feature03 {padding: 50px 0 10px;} #asrll .feature #feature01 ul li figure figcaption {top: 50px} #asrll .feature h3 {margin: 0 auto;padding: 20px 10px 0;} #asrll .feature h3 small {margin: 0 0 0 20px;display: block;} #asrll .feature #feature02 {padding: 0 0 10px;background: none;background-color: #f5f5f5;color: #161616;} #asrll .feature #feature02 .cbox {width: 100%;margin: 0 0 8% 0;padding: 0 20px;} #asrll .feature #feature02 h3 {padding: 20px 10px 100px 10px;background: #161616 url("en/images/products/asrIIi/feature02_back.png") no-repeat 100% 0 / 60%;color: #fff;} #asrll .customize .whiteBox figure {margin: 30px auto 0;} #asrll .customize .lineBox, #csr .option .lineBox {padding: 15px;} } /* ---------------------------------------------------------------------- */ .catalogList1 {margin: 0 auto 80px;} .catalogList1 li {width: calc(23.5% - 30px / 4);margin: 0 32px 50px 0;} .catalogList1 li:nth-child(4n) {margin: 0 0 50px 0;} .catalogList1 li figure {} .catalogList1 li figure figcaption {line-height: 1.5;} .catalogList2, .catalogList3 {margin: 0 auto 80px;text-align: center;} .catalogList2 li {width: calc(33.3333333% - 100px / 3);margin: 0 50px 50px 0;} .catalogList2 li:nth-child(3n) {margin-right: 0;} .catalogList2 li a, .catalogList3 li a {padding: 15px 0;position: relative;display: block;border: 1px solid #161616;} .catalogList2 li a::after, .catalogList3 li a::after {content: "";width: 10px;height: 10px;position: absolute;top: 40%;right: 5%;display: block;transform: rotate(45deg);border: 1px solid;border-color: #161616 #161616 transparent transparent;} .catalogList2 li p a {padding: 5px 0;border: 0 none;} .catalogList2 li p a::after {display: none;} .catalogList3 li {width: calc(23.5% - 30px / 4);margin: 0 32px 50px 0;} .catalogList3 li:nth-child(4n) {margin-right: 0;} @media only screen and (max-width: 767px) { .catalogList1 {margin: 0 auto 40px;line-height: 1.3;} .catalogList1 li {width: calc(50% - 20px / 2);margin: 0 15px 20px 0;} .catalogList1 li:nth-child(2n) {margin: 0 0 20px 0;} .catalogList2, .catalogList3 {margin: 0 auto 40px;line-height: 1.3;} .catalogList2 li {width: calc(50% - 20px / 2);margin: 0 15px 20px 0;} .catalogList2 li:nth-child(3n) {margin: 0 15px 20px 0;} .catalogList2 li:nth-child(2n) {margin: 0 0 20px 0;} .catalogList2 li a {padding: 10px 0;} .catalogList2 li a::after, .catalogList3 li a::after {width: 6px;height: 6px;} .catalogList2 li a::after {width: 6px;height: 6px;} .catalogList2 li p a {font-size: 1rem;} .catalogList3 li {width: calc(50% - 20px / 2);margin: 0 15px 20px 0;} .catalogList3 li:nth-child(2n) {margin: 0 0 20px 0;} } #catalog h2, #legacy h2 {margin: 0 auto 80px;position: relative;text-align: center;font-size: 2.2rem;font-weight: 300;} #catalog h2::after, #legacy h2::after {content: "";width: 1px;height: 50px;position: absolute;top: 220%;left: 50%;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background: #161616;} #catalog h3, #legacy h3 {margin: 0 auto 20px;padding: 10px 50px;display: inline-block;background: #161616;color: #fff;} @media only screen and (max-width: 767px) { #catalog h2, #legacy h2 {margin: 0 auto 80px!important;font-size: 1.8rem!important;} #catalog h2::after, #legacy h2::after {top: 320%;} #catalog h3, #legacy h3 {display: block;text-align: center;} #catalog .contbtn a {padding: 15px 20px 15px 30px;} } /* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- TOPICS */ #activities h2 {margin: 0 auto 50px;text-align: center;font-size: 4rem;font-weight: 600;line-height: 1.3;letter-spacing: 0.02em;} #activities h2 small {display: block;font-size: 1.4rem;font-weight: 300;} #activities h3 {margin: 0 auto 50px;padding: 100px 30px 30px 30px;color: #fff;font-size: 3.5rem;font-weight: 600;line-height: 1.3;} #activities h3 small {display: block;font-size: 1.4rem;font-weight: 300;} #activities h3:nth-of-type(1) {background: url("images/activities/back_with.jpg") no-repeat center / cover;} #activities h3:nth-of-type(2) {background: url("images/activities/back_from.jpg") no-repeat center / cover;} #activities h3 + p {text-align: center;} #activities .topicsList {margin: 50px auto 0;} #activities .topicsList li {width: calc(33.3333333% - 100px / 3);margin: 0 50px 50px 0;} #activities .topicsList li:nth-child(3n) {margin-right: 0;} #activities .topicsList li figure {} #activities .topicsList li figure img {background: #ebebeb;} #activities .topicsList li figure figcaption {line-height: 1.5;} #activities .topicsList li figure figcaption h4 {margin: 0 auto 20px;} #activities .topicsList li figure figcaption p {font-size: 1.4rem;} @media only screen and (max-width: 767px) { #activities h2 {margin: 0 auto 30px;font-size: 3rem;line-height: 1;} #activities h2 small {margin: 5px 0 0;font-size: 1.2rem;} #activities h3 {margin: 0 auto 30px;padding: 80px 20px 30px 20px;font-size: 2.5rem;line-height: 0.5;} #activities h3 small {margin: 15px 0 0;font-size: 1.2rem;} #activities .topicsList li {width: calc(50% - 20px / 2);margin: 0 15px 20px 0;} #activities .topicsList li:nth-child(2n) {margin: 0 0 20px 0;} #activities .topicsList li figure figcaption h4 {margin: 0 auto 10px;font-size: 1.4rem;} #activities .topicsList li figure figcaption p {font-size: 1.2rem;} } /* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- FAQ */ #faq .faqNav {margin: 100px auto 30px;} #faq .faqNav ul {text-align: center;justify-content: center;} #faq .faqNav ul li {width: calc(100% / 3);border: 10px solid #fff;} #faq .faqNav ul li a {padding: 20px 0;position: relative;display: block;background: #161616;color: #fff;} #faq .faqNav ul li a::after {content: "";width: 10px;height: 10px;position: absolute;top: 40%;right: 5%;display: block;transform: rotate(-45deg);border: 1px solid;border-color: transparent transparent #fff #fff;} #faq h3 {margin: 0 0 20px;padding: 5px 50px;display: inline-block;border: 1px solid #161616;} @media only screen and (max-width: 767px) { #faq .faqNav {margin: 50px auto 20px;font-size: 1.2rem;} #faq .faqNav ul li {width: calc(100% / 2);border: 3px solid #fff;} #faq .faqNav ul li a {padding: 10px 0;} #faq .faqNav ul li a::after {width: 6px;height: 6px;} } dl.faqList {} dl.faqList dt {width: 100%;margin: 0 0 5px;padding: 10px 2em 10px 2.5em;position: relative;background: #ebebeb;cursor: pointer;} dl.faqList dt::before {content: "Q";position: absolute;top: -2px;left: 15px;font-size: 3rem;} dl.faqList dt::after {content: "";width: 10px;height: 10px;position: absolute;top: 30%;right: 2%;display: block;transform: rotate(-45deg);border: 1px solid;border-color: transparent transparent #161616 #161616;} dl.faqList dt.active::after {top: 40%;transform: rotate(-45deg);border-color: #161616 #161616 transparent transparent;} dl.faqList dd {width: 100%;margin: 0 0 30px;padding: 5px 40px 10px;display: none;} dl.faqList dd a {border-bottom: 1px solid #161616;} @media only screen and (max-width: 767px) { dl.faqList dt {padding: 10px 30px 10px 2.5em;line-height: 1.5;} dl.faqList dt::before {top: 5px;left: 10px;font-size: 2rem;} dl.faqList dt::after {width: 6px;height: 6px;right: 3%;} dl.faqList dd {margin: 0 0 20px;padding: 5px 10px 10px;} } /* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- COMPANY */ #company h2 {margin: 0 auto 80px;position: relative;text-align: center;font-size: 2rem;} #company h2::after {content: "";width: 1px;height: 50px;position: absolute;top: 180%;left: 50%;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background: #161616;} #company h2 + p {margin: 0 auto 10px;} #company iframe {width: 100%;height: 500px;margin: 0 0 30px;border: 0 none;} #company .blankbtn {text-align: center;} #company .blankbtn a {padding: 15px 100px 20px 130px;display: inline-block;background: #161616;border: 1px solid #161616;color: #fff;} #company .blankbtn a i {margin: 0 0 0 20px;fill: #fff;} #company .blankbtn a::after {content: "";margin: 0 0 0 20px;display: inline-block;background: url("images/")} #company .blankbtn a:hover {background: #fff;color: #161616;} #company .blankbtn a:hover i {fill: #161616;} #company dl#history {margin: 0 auto 50px;} #company dl#history dt {width: 10%;padding: 10px;} #company dl#history dd {width: 90%;padding: 10px;} #company dl#history dt:nth-of-type(odd), #company dl#history dd:nth-of-type(odd) {background: #ebebeb;} @media only screen and (max-width: 767px) { #company .blankbtn a {padding: 15px 60px 20px 80px;} #company dl#history dt {width: 20%;} #company dl#history dd {width: 80%;} } #company #dealers {} #company #dealers h3 {margin: 50px auto 30px;padding: 10px 100px;display: inline-block;border: 1px solid #161616;font-size: 2rem;} #company #dealers ul {font-size: 1.8rem;line-height: 1.5;} #company #dealers ul li {width: calc(100% / 3);padding: 20px;} #company #dealers ul li:nth-child(odd) {background: #ebebeb;} #company #dealers ul li h4 {margin: 0 0 10px;font-size: 1.8rem;font-weight: 600;line-height: 1;} #company #dealers ul li a {display: block;color: #707070; word-break: break-all;} @media only screen and (max-width: 767px) { #company #dealers ul li {width: calc(100% / 1);} } /* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- CONTACT */ #contact h2 {margin: 0 auto 80px;position: relative;text-align: center;font-size: 2rem;} #contact h2::after {content: "";width: 1px;height: 50px;position: absolute;top: 180%;left: 50%;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background: #161616;} #contact h2 + p {margin: 0 auto 50px;text-align: center;} #contact h3 {margin: 0 auto 20px;padding: 10px 50px;display: inline-block;border: 1px solid #161616;} #contact #cbox {width: 60%;margin: 0 auto;padding: 20px 30px;text-align: center;display: block;border: 1px solid #161616;} #contact form p {text-align: center;} #contact #mailform {justify-content: space-between;} #contact #mailform dt {width: 25%;padding: 10px 0;position: relative;} #contact #mailform dt span {padding: 5px 10px 2px;position: absolute;top: 18px;right: 0;display: block;background: #d32a2a;color: #fff;font-size: 1.6rem;line-height: 1;} #contact #mailform dd {width: 73%;padding: 10px 0;} #contact #mailform dd input[type="text"], #contact #mailform dd input[type="email"] {width: 100%;padding: 12px 10px;border: 1px solid #161616;outline: none;} #contact #mailform dd textarea {width: 100%;height: 200px;padding: 12px 10px;border: 1px solid #161616;} #contact #mailform dd .select {overflow: hidden;position: relative;text-align: center;border: 1px solid #161616;} #contact #mailform dd .select::before {content: "";width: 10px;height: 10px;position: absolute;top: 22%;right: 2%;display: block;transform: rotate(-45deg);border: 1px solid;border-color: transparent transparent #161616 #161616;} #contact #mailform dd .select select {width: 100%;padding: 12px 10px;cursor: pointer;text-overflow: ellipsis;border: none;-webkit-appearance: none;appearance: none;} #contact #mailform dd .select select::-ms-expand {display: none;} #contact input[type="checkbox"] {display: none;} #contact input[type="radio"]{-webkit-transform: scale(1.5);transform: scale(1.5);margin-right: 0.5em;} #contact label {margin: 0 10px 0 0;} #contact .agree {margin: 50px auto 20px;position: relative;display: inline-block;color: rgba(0, 0, 0, 0.7);cursor: pointer;user-select: none;border-bottom: 1px solid #161616;} #contact .checkmark {width: 22px;height: 22px;position: absolute;top: 5px;left: -30px;border: solid 2px #d4dae2;} #contact .checkmark::after {content: "";width: 6px;height: 10px;position: absolute;left: 5px;top: 1px;border: solid #161616;border-width: 0 2px 2px 0;transform: rotate(45deg);opacity: 0.1;} #contact input:checked + .checkmark {background: #fff;} #contact input:checked + .checkmark::after {opacity: 1;} #contact form ul {margin: 40px auto 50px;justify-content: center;} #contact form ul li {margin: 0 20px;} #contact .submit {padding: 20px 80px;position: relative;display:block;background: #161616;color: #fff;} #contact .back {padding: 20px 100px;position: relative;display:block;background: #555;color: #fff;} #contact .submit::after {content: "";width: 10px;height: 10px;position: absolute;top: 40%;right: 10%;display: block;transform: rotate(45deg);border: 1px solid;border-color: #fff #fff transparent transparent;} #contact .back::after {content: "";width: 10px;height: 10px;position: absolute;top: 40%;left: 10%;display: block;transform: rotate(45deg);border: 1px solid;border-color: transparent transparent #fff #fff;} #contact input[type="submit"], #contact input[type="button"] {padding: 20px 80px;color: #fff;} #contact form .age_list > ul {margin: 0;} #contact form .age_list > ul li {margin: 0 15px 0 0;display: inline-block;} #contact #dealerList {margin: 50px auto 0;padding: 20px 30px;display: table;border: 1px solid #161616;} #contact #dealerList h4 {margin: 0 auto 10px;text-align: center;font-size: 1.8rem;font-weight: 600;} #contact #dealerList dl {justify-content: space-between;font-size: 1.4rem;line-height: 1.5;} #contact #dealerList dl dt {width: 25%;padding: 10px 0;border-bottom: 1px solid #161616;} #contact #dealerList dl dd {width: 75%;padding: 10px 0;border-bottom: 1px solid #161616;} #contact #dealerList dl dt:last-of-type, #contact #dealerList dl dd:last-of-type {border-bottom: 0 none;} @media only screen and (max-width: 767px) { #contact h2 {margin: 0 auto 60px;} #contact h3 {display: block;text-align: center;} #contact #cbox {width: 100%;padding: 10px;font-size: 1.2rem;} #contact #mailform dt {width: 100%;padding: 5px 0;} #contact #mailform dt span {position: relative;top: 0;left: 10px;display: inline-block;} #contact #mailform dd {width: 100%;padding: 5px 0;} #contact .agree {margin: 20px auto;font-size: 1.2rem;} #contact .checkmark {top: 0;} #contact form ul li {margin: 0 10px;} #contact .submit {padding: 10px 40px;} #contact .back {padding: 10px 40px;} #contact .submit::after, #contact .back::after {width: 6px;height: 6px;} #contact form .age_list > ul li {width: 49%;margin: 0 0 10px;} #contact #dealerList {padding: 20px;} #contact #dealerList dl dt {width: 35%;} #contact #dealerList dl dd {width: 65%;} } /* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .mb13{ margin-bottom:130px !important; } .icon-list{ -js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .icon-list .icon-award2023{ margin-right:20px; } .icon-list .icon-40th{ } #top-attention{ margin-top:50px; padding:20px; text-align:center; border: solid 1px #ff0000; color:#ff0000; } #top-attention a{ color:#ff0000; font-size:16px; } @media only screen and (max-width: 767px) { #top-attention{ margin-top:10vw; padding:5vw; } #top-attention a{ font-size:16px; } } .link-c{ text-decoration:underline; color:#09C; } .link-c:hover{ text-decoration:none; } #top-fullsato{ margin-top:50px; padding:50px; text-align:center; background-color:#F9F9F9; } #top-fullsato .ttl{ margin-bottom:30px; } #top-fullsato ul{ -js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; } #top-fullsato li{ width:24%; } @media only screen and (max-width: 767px) { #top-fullsato{ padding:5vw; text-align:center; background-color:#F9F9F9; } #top-fullsato .ttl{ margin-bottom:3vw; } #top-fullsato ul{ } #top-fullsato li{ width:47.5%; margin-bottom:2vw; } #top-fullsato li:last-child, #top-fullsato li:nth-last-child(2){ margin-bottom:0; } } /* 2025/12/04 FM追記 */ #productsTop #taoc-studio-works{ background-color:#272727; } #productsTop #taoc-studio-works ul.productList li { border: 5px solid #272727; background-color:#fff; } #productsTop #taoc-studio-works ul.productList li a figure figcaption small { color:#A5854A; } #productsTop #taoc-studio-works h2 { color:#A5864A; }