@charset "utf-8";
@import url("./yoga/base.css");

@media (max-width: 1001px) {
}
@media (max-width: 801px) {
}
@media (max-width: 481px) {
}

.page-kv .txt h1.mb { margin-bottom: 40px;}
.page-kv .txt h1 img { width: 90%; max-width: 900px;}
.page-kv .txt p span { display: inline-block; padding: 15px 20px; border-top: solid 1px #000; border-bottom: solid 1px #000;
 color: #000; font-size: 20px; font-weight: 700;
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
}


#trees .inner-sct { padding: 80px 0;}
#trees h2 { margin-bottom: 80px; text-align: center;}
#trees h2 img { width: 68%; max-width: 260px;}
#trees h3 { margin-bottom: 60px; text-align: center;}
#trees h3 picture { display: block; width: 88%; max-width: 980px; margin: 0 auto;}
#trees h3 picture img { width: 100%;}
#trees .txt { width: 88%; margin: 0 auto;}
#trees .txt p { font-size: 14px; letter-spacing: 0.1rem; line-height: 2.4; text-align: center;}
#trees .txt p span { display: block;}
#trees .txt p br.sp { display: none;}
@media (max-width: 801px) {
	#trees .inner-sct { padding: 60px 0;}
	#trees h2 { margin-bottom: 60px;}
	#trees h3 { margin-bottom: 40px;}
	#trees .txt p { text-align: left;}
}
@media (max-width: 641px) {
	#trees h2 { margin-bottom: 50px;}
	#trees .txt p { letter-spacing: 0.08rem; line-height: 2.0;}
	#trees .txt p span { display: inline;}
	#trees .txt p br.sp { display: block;}
}
@media (max-width: 481px) {
	#trees .inner-sct { padding: 40px 0;}
	#trees .txt p { letter-spacing: 0.05rem;}
}

#company-data { background: #E0E7E8;}
#company-data .inner-sct { padding: 80px 0;}
#company-data .ctn { position: relative; display: flex; justify-content: space-between; width: 88%; max-width: 900px; margin: 0 auto;}
#company-data .ctn:after { content: ''; display: block; width: 1px; height: 100%; background: #000; position: absolute; left: 50%; top: 50%; transform: translateY(-50%);}
#company-data .left { width: 48%;}
#company-data .right { width: 42%;}
#company-data ul.data li { padding: 15px 0;}
#company-data ul.data li dl { display: table; width: 100%;}
#company-data ul.data li dl dt,
#company-data ul.data li dl dd { display: table-cell; vertical-align: middle; font-size: 15px;}
#company-data ul.data li dl dt { width: 120px; font-weight: 700;}
#company-data ul.data li dl dd { width: auto;}
#company-data dl.disc { padding-top: 15px;}
#company-data dl.disc dt { margin-bottom: 30px; font-weight: 700;}
#company-data dl.disc dd { position: relative; margin-bottom: 9px; padding-left: 15px; line-height: 1.4;}
#company-data dl.disc dd:last-child { margin-bottom: 0px;}
#company-data dl.disc dd:before { content: ''; display: block; width: 9px; height: 9px; background: #000; border-radius: 50%;
 position: absolute; left: 0; top: 5px;
}
@media (max-width: 801px) {
	#company-data .inner-sct { padding: 60px 0;}
	#company-data ul.data li { padding: 10px 0;}
	#company-data ul.data li dl dt { width: 100px;}
	#company-data dl.disc { padding-top: 10px;}
	#company-data dl.disc dt { margin-bottom: 20px;}
}
@media (max-width: 641px) {
	#company-data .ctn { display: block;}
	#company-data .ctn:after { content: none;}
	#company-data .left { width: 100%;}
	#company-data .right { width: 100%; padding-top: 10px;}
	#company-data ul.data li { padding: 8px 0;}
	#company-data dl.disc { padding-top: 0px; padding-left: 100px;}
	#company-data dl.disc dt { margin-bottom: 0px; position: absolute; left: 0;}
}
@media (max-width: 481px) {
	#company-data .inner-sct { padding: 40px 0;}
	#company-data ul.data li dl dt,
	#company-data ul.data li dl dd { font-size: 13px;}
	#company-data ul.data li dl dt { width: 72px;}
	#company-data dl.disc { padding-left: 72px;}
	#company-data dl.disc dt,
	#company-data dl.disc dd { font-size: 13px;}
	#company-data dl.disc dt { line-height: 1.4;}
	#company-data dl.disc dd { padding-left: 12px;}
	#company-data dl.disc dd:before { width: 8px; height: 8px; top: 5px;}
}

#message .inner-sct { padding: 120px 0 180px;}
#message .ttl { margin-bottom: 60px; text-align: center;}
#message .ttl h2 { margin-bottom: 10px; color: #717c7d; font-size: 35px; font-weight: 300; letter-spacing: 0.1rem; line-height: 1;}
#message .ttl p { color: #344446;}
#message .txt { width: 88%; max-width: 800px; margin: 0 auto;}
#message .txt p { font-size: 16px; letter-spacing: 0.05rem; line-height: 2.2;}
#message .txt p.name { margin-top: 50px; text-align: right;}
@media (max-width: 801px) {
	#message .ttl { margin-bottom: 40px;}
	#message .ttl h2 { font-size: 24px;}
	#message .txt p { font-size: 14px; line-height: 2;}
}
@media (max-width: 481px) {
	#message .inner-sct { padding: 60px 0 80px;}
	#message .ttl { margin-bottom: 30px;}
	#message .ttl p { font-size: 12px;}
	#message .txt p { font-size: 13px; line-height: 1.8;}
	#message .txt p.name { margin-top: 30px;}
}


.policy {}
.policy .read { width: 88%; max-width: 1000px; margin: 0 auto; padding: 40px 0;}
.policy .read.pl { padding-left: 1.2em;}
.policy .read.pb { padding-bottom: 100px;}
.policy .read p {}
.policy .read p.update { margin-top: 40px; text-align: right;}
.policy .ctn { width: 88%; max-width: 1000px; margin: 0 auto; padding-top: 30px; border-top: solid 1px #776F6B;}
.policy .ctn ol { padding-left: 1.2em;}
.policy .ctn ol li { padding: 10px 0; list-style-type: decimal; letter-spacing: 0.08rem;}
.policy .ctn ol li span { display: block; margin-bottom: 6px;}
.policy .ctn ol li ol { padding-left: 0;}
.policy .ctn ol li ol li { padding: 0; list-style-type: none;}
.policy .ctn ol li dl { padding-top: 40px;}
@media (max-width: 481px) {
	.policy .read { padding: 30px 0;}
	.policy .read.pb { padding-top: 20px; padding-bottom: 60px;}
	.policy .read p { font-size: 13px;}
	.policy .read p.update { margin-top: 20px;}
	.policy .ctn ol li { padding: 6px 0; font-size: 13px; letter-spacing: 0.04rem;}
	.policy .ctn ol li span { margin-bottom: 4px; font-size: 14px;}
	.policy .ctn ol li dl { padding-top: 20px;}
}


.terms-ctn { width: 88%; margin: 0 auto; padding: 100px 0; font-size: 0px; text-align: center;}
.terms-ctn .box { display: inline-block; width: 20%; padding: 8px;}
.terms-ctn .box a { display: block; width: 100%; max-width: 260px; margin: 0 auto; border: solid 1px #b3b3b3; color: #000; text-decoration: none;}
.terms-ctn .box a dl { position: relative; display: block; padding: 20px 0px 30px; text-align: center;}
.terms-ctn .box a dl dt { margin-bottom: 30px; }
.terms-ctn .box a dl dt img { width: 60%; max-width: 120px;}
.terms-ctn .box a dl dd { font-size: 18px; font-weight: 700;}
.terms-ctn .box a dl dd span { display: block; font-size: 20px;}
.terms-ctn .box a dl dd:after { content: ''; display: block; width: 100%; height: 30px; margin-top: 30px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="58" viewBox="0 0 140 58"><polygon points="111.06 0 108.25 2.81 132.39 26.95 0 26.95 0 30.93 132.39 30.93 108.25 55.07 111.06 57.88 140 28.94 111.06 0" fill="%23000000"/></svg>');
 background-size: auto 100%; background-repeat: no-repeat; background-position: 50% 50%;
}
@media (max-width: 1001px) {
	.terms-ctn { flex-wrap: wrap;}
	.terms-ctn .box { width: 33%;}
}
@media (max-width: 641px) {
	.terms-ctn { padding: 40px 0 80px;}
	.terms-ctn:after { content: ''; display: inline-block; width: 50%; height: 1px;}
	.terms-ctn .box { width: 50%;}
}
@media (max-width: 481px) {
	.terms-ctn .box a dl { padding: 12px 0px 20px;}
	.terms-ctn .box a dl dd { font-size: 15px;}
	.terms-ctn .box a dl dd span { font-size: 16px;}
	.terms-ctn .box a dl dd:after { margin-top: 20px; height: 20px;}
}



.rules { width: 88%; max-width: 1000px; margin: 0 auto; padding: 0 0 120px;}
.rules .bloc { padding: 20px 0;}
.rules .bloc h3 { margin-bottom: 20px; font-size: clamp(14px,2.3vw,23px);}
.rules .bloc p { font-size: 15px; letter-spacing: 0.05rem;}
.rules .bloc ol{ padding-left: 30px;}
.rules .bloc ol > li { margin-bottom: 15px; list-style-type: decimal;}
.rules .bloc ul.box { margin-top: 18px; padding: 30px; background: #f3f3f3;}
.rules .bloc ul.box li { margin-bottom: 8px;}
.rules .bloc ul.box li:last-child { margin-bottom: 0px;}
.rules p.update { text-align: right;}

@media (max-width: 481px) {
	.rules .bloc { padding: 14px 0;}
	.rules .bloc p { font-size: 12px;}
	.rules .bloc ol li { font-size: 12px;}
	.rules .bloc ul.box { padding: 20px;}
	.rules .bloc ul.box li { margin-bottom: 4px; font-size: 12px;}
	.rules p.update { font-size: 12px;}
}

.error-404 .inner-sct { padding: 120px 0;}
.error-404 .ctn { width: 92%; margin: 0 auto;}
.error-404 .ctn h2 { margin-bottom: 40px; font-size: 36px; font-weight: 300; text-align: center;}
.error-404 .ctn h2 span { display: block; font-size: 120px; font-weight: 100; line-height: 1.2;}
.error-404 .ctn p { margin-bottom: 40px; text-align: center;}
.error-404 .ctn h3.btn-back { width: 300px; margin: 0 auto;}
#otherbrands .ttl.is_404 { margin-bottom: 40px;}
#otherbrands .ttl.is_404 h2 { font-size: clamp(24px, 3.6vw, 36px); text-align: center; font-weight: 300; }

@media (max-width: 481px) {
	.error-404 .inner-sct { padding: 60px 0 80px;}
	.error-404 .ctn p span{ display: block; }
	#otherbrands .ttl.is_404 { margin-bottom: 20px;}
}