@charset "UTF-8";
.bg-green { background: linear-gradient(to bottom, #19ba00, #0f5904);}
.contents img { width: auto; max-width: 100%; height: auto;}.contents h2 { font-size: 160%; line-height: 4rem; text-align: center; margin-bottom: 1.5rem;}
.contents h2:before,
.contents h2:after { content: ""; display: block; height: 3px; width: 100%; background: linear-gradient(to right, #fff, #b78300 50%, #fff);}
.contents h3 { font-size: 140%; font-weight: 600;}
.text-box { background: linear-gradient(to right, #CEAC69, #F6EEC1 50%, #CEAC69); border: 1px solid #DCC387; border-radius: 5px;}
.text-box p { font-size: 120%; line-height: 1.8rem;}
#trouble { background-image: url("../img/carport/bg-trouble.jpg"); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-position: center center; padding: 6rem 0;}
#trouble-text { background-color: rgba(255,255,255,.7);}
#trouble-text h3 { font-size: 160%; line-height: 3rem; text-align: center;}#trouble-text h3:after { content: ""; display: block; height: 3px; width: 100%; background: linear-gradient(to right, #fff, #b78300 50%, #fff);}
#design01 { height: 100%; transition: .4s ease-out; transform: translateX(40px); opacity: 0;}#design01.delighter.started { transform: translateX(0); opacity: 1;}
#design02 { height: 100%; transition: .4s .2s ease-out; transform: translateX(40px); opacity: 0;}#design02.delighter.started { transform: translateX(0); opacity: 1;}
#design03 { height: 100%; transition: .4s .4s ease-out; transform: translateX(40px); opacity: 0;}#design03.delighter.started { transform: translateX(0); opacity: 1;}.pattern { top: 0; left: 0;}.pattern-no { top: 10px; left: 0; transform: rotate(-20deg);}
#option01 { height: 100%; transition: .4s ease-out; transform: translateY(40px); opacity: 0;}#option01.delighter.started { transform: translateY(0); opacity: 1;}
#option02 { height: 100%; transition: .4s .2s ease-out; transform: translateY(40px); opacity: 0;}#option02.delighter.started { transform: translateY(0); opacity: 1;}
#option03 { height: 100%; transition: .4s .4s ease-out; transform: translateY(40px); opacity: 0;}#option03.delighter.started { transform: translateY(0); opacity: 1;}
#option04 { height: 100%; transition: .4s .6s ease-out; transform: translateY(40px); opacity: 0;}#option04.delighter.started { transform: translateY(0); opacity: 1;}
#option05 { height: 100%; transition: .4s .8s ease-out; transform: translateY(40px); opacity: 0;}#option05.delighter.started { transform: translateY(0); opacity: 1;}
#performance_h { position: relative; background: linear-gradient(135deg, #a8c1ff, #195cfc, #195cfc, #a8c1ff); padding: 2em;}#performance_h::after{ content: ""; position: absolute; right: 0; bottom: -20px; left: 0; width: 0px; height: 0px; margin: auto; border-style: solid; border-color: #195cfc transparent transparent transparent; border-width: 20px 20px 0 20px;}
#performance_h h1 { font-size:160%;}
#voice { background-image: url("../img/carport/bg-wood.jpg"); background-size: cover;}
.pin { position: absolute; top:-15px; left: 50%; width: 10%; text-align: center;}
#voice h2 { border-bottom: 2px solid rgba(18,122,2,.4);}
#point span { position: absolute; top:-30px; left: 0; text-align: center;}
#point1 { height: 100%; transition: .4s ease-out; transform: translateY(40px); opacity: 0;}
#point2 { height: 100%; transition: .4s .2s ease-out; transform: translateY(40px); opacity: 0;}
#point3 { height: 100%; transition: .4s .4s ease-out; transform: translateY(40px); opacity: 0;}
#point4 { height: 100%; transition: .4s .6s ease-out; transform: translateY(40px); opacity: 0;}
#point5 { height: 100%; transition: .4s .8s ease-out; transform: translateY(40px); opacity: 0;}
#point1.delighter.started,
#point2.delighter.started,
#point3.delighter.started,
#point4.delighter.started,
#point5.delighter.started { transform: translateY(0); opacity: 1;}
@media (min-width: 1300px){ .contents { font-size: 1.1rem; }}
@media (max-width: 767px){ .contents { padding: 0; } #content-wrap { padding: 0 5vw 5vw; }}@media (max-width: 570px){.contents h2 { font-size: 140%;}
#trouble-text h3 { line-height: 1.5rem;}}