@charset 'utf-8';
/*
 * name:wwf.css
 * author:Sovanda
*/
/* wwf
------------------------------------------------ */
#contents { content: 100px 0 120px; }

#banner { position: relative; }

#banner img { width: 100%; }



.wwf--btn { font-size: 30px; font-size: 3rem; text-shadow: 2px 3px 5px rgb(0, 0, 0, 0.5); font-weight: bold; letter-spacing: 0.04em; max-width: 590px; margin: 110px auto 0; }
.wwf--btn a { position: relative; display: block; overflow: hidden; background: url(../../img/2026/wwf/bg_wwf_btn_green.jpg) no-repeat center; background-size: cover; color: #fff; -webkit-border-radius: 18px; border-radius: 18px; padding: 37px 60px 37px 35px; }
.wwf--btn a:after { content: ''; display: block; width: 28px; height: 28px; position: absolute; right: 35px; top: calc( 50% - 14px ); background: url(../../img/category/arrow_01.svg) no-repeat; background-size: 100%; }

#detail { text-align: center; }

.detail--pic { max-width: 205px; display: block; margin: 0 auto; }

.detail--title { font-size: 24px; font-size: 2.4rem; letter-spacing: 0.08em; margin-bottom: 10px; }

.detail--desc { font-size: 16px; font-size: 1.6rem; letter-spacing: 0.04em; margin-bottom: 10px; }

.detail--btn { font-family: 'Hiragino Sans'; font-size: 12px; font-size: 1.2rem; font-weight: bold; letter-spacing: 0.1em; }

.detail--btn a:before { content: ''; display: inline-block; vertical-align: 1px; width: 8px; height: 8px; margin-right: 8px; background: url(../../img/category/wwf/arrow_b.png) no-repeat; background-size: 100%; }

.detail--btn a { display: inline-block; color: #00468C; }

/* section design */
#design { position: relative; margin-bottom: 110px; }
.design--frame { position: relative; padding: 8.1% 0 90px; background: #0092b1; color: #fff; }
.design--frame:before { content: ''; display: block; width: 100%; padding-bottom: 8.1%; background: url(../../img/2026/wwf/bg_design.jpg) no-repeat; background-size: 100%; position: absolute; top: 0; left: 0; }
.design__detail { position: relative; text-align: center; margin-top: 95px; }
.design__detail:before { content: ''; display: block; width: 153px; height: 153px; background: url(../../img/category/wwf/logo_map.png) no-repeat; background-size: 100%; position: absolute; top: -125px; right: 65px; }
.design__detail--pop { font-family: 'Hiragino Sans'; font-size: 18px; font-size: 1.8rem; font-weight: bold; letter-spacing: 0.1em; line-height: 1.2; text-align: center; margin-bottom: 20px; }
.design__detail--pop:before,
.design__detail--pop:after { content: ''; display: inline-block; vertical-align: -10px; margin: 0 15px; width: 2px; height: 32px; background: #fff; }
.design__detail--pop:before { -webkit-transform: rotate(-18deg); transform: rotate(-18deg); }
.design__detail--pop:after { -webkit-transform: rotate(18deg); transform: rotate(18deg); }
.design__detail--title { font-size: 36px; font-size: 3.6rem; text-align: center; letter-spacing: 0.1em; line-height: 1.2; margin-bottom: 30px; }
.design__detail--desc { font-size: 22px; font-size: 2.2rem; letter-spacing: 0.05em; line-height: 1.72; margin-bottom: 18px; }
.design__detail--note { font-size: 12px; font-size: 1.2rem; letter-spacing: 0.024em; line-height: 1.6666; color: #B5B5B5; }
.design__lists__child__desc { position: relative; }
.design__lists__child__desc--num { display: inline-block; position: absolute; top: -24px; left: -24px; width: 56px; }
.design__lists__child__desc--title { font-size: 24px; font-size: 2.4rem; letter-spacing: 0.1em; border: 4px solid #fff; display: block; max-width: 200px; padding: 4px 0; margin-bottom: 25px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 12px; border-radius: 12px; text-align: center; }
.design__lists__child__desc--txt { font-size: 20px; font-size: 2rem; letter-spacing: 0.05em; line-height: 2; }

.design__lists__child--01 { margin-bottom: 43px; }

.design__lists__child--01:before { content: ''; display: inline-block; vertical-align: top; width: 27.8%; padding-bottom: 28.5%; margin-top: 4.2%; background: url(../../img/category/wwf/design_lists_pic_01.png) no-repeat; background-size: 100%; }

.design__lists__child--01 .design__lists__child__desc { width: 41.4%; display: inline-block; vertical-align: top; margin: 8.8% 2.3% 0 3.5%; }

.design__lists__child--01:after { content: ''; display: inline-block; vertical-align: top; width: 25%; padding-bottom: 25.5%; background: url(../../img/category/wwf/design_lists_pic_02.png) no-repeat; background-size: 100%; }



.design__lists__child--02 { margin-bottom: 70px; }

.design__lists__child--02 .design__lists__child__desc { width: 46.7%; display: inline-block; vertical-align: top; margin: 9.5% 6.5% 0 7.5%; }

.design__lists__child--02:after { content: ''; display: inline-block; vertical-align: top; width: 39.3%; padding-bottom: 29.3%; background: url(../../img/category/wwf/design_lists_pic_03.png) no-repeat; background-size: 100%; background-position: right bottom; }



.design__lists__child--03:before { content: ''; display: inline-block; vertical-align: top; width: 48.2%; padding-bottom: 31%; background: url(../../img/2026/wwf/design_lists_pic_04_v2.png) no-repeat; background-size: 100%; }

.design__lists__child--03 .design__lists__child__desc { width: 45.4%; margin-left: 6.4%; margin-top: 7%; display: inline-block; vertical-align: top; }



.design__banner { margin-top: 85px; }

.design__banner ul {  }

.design__banner ul li { width: 31.7%; margin-right: 2.45%; float: left; }

.design__banner ul li:nth-child(3n) { margin-right: 0; }

.design__banner--pic { display: block; overflow: hidden; -webkit-border-radius: 30px; border-radius: 30px; }

.design__banner--txt { font-size: 8px; font-size: .8rem; margin: 10px 30px 0; }



.design--copyright { width: 100%; max-width: 1200px; font-size: 9px; font-size: .9rem; text-align: right; position: absolute; bottom: 10px; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

/* section commit */
#commit {  }
.commit--frame { /*background: url(../../img/category/wwf/bg_panda.png) repeat top; background-size: 118px;*/ }
.commit--frame .wrap { max-width: 1100px; border: 8px solid #0092b1; padding: 100px 20px 75px; background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; }
.commit--pop { font-family: 'Hiragino Sans'; font-size: 18px; font-size: 1.8rem; font-weight: bold; letter-spacing: 0.1em; line-height: 1.2; text-align: center; margin-bottom: 20px; }
.commit--pop:before,
.commit--pop:after { content: ''; display: inline-block; vertical-align: -10px; margin: 0 15px; width: 2px; height: 32px; background: #272727; }
.commit--pop:before { -webkit-transform: rotate(-18deg); transform: rotate(-18deg); }
.commit--pop:after { -webkit-transform: rotate(18deg); transform: rotate(18deg); }
.commit--title { font-size: 36px; font-size: 3.6rem; text-align: center; letter-spacing: 0.1em; line-height: 1.2; }
.commit__block { margin: 40px auto 0; max-width: 840px; }
.commit--note { margin: 45px auto 0; max-width: 840px; }

.commit__item01{ display: flex; flex-wrap: wrap; gap: 30px; }
.commit__item01 .col{ flex: 1; }
.commit__item01 figcaption{ font-size: 1.6rem; font-weight: bold; letter-spacing: 0.072em; line-height: calc(32 / 16); text-align: center; }

.commit__item02 .col02{ }
.commit__item02 .col02 dl{ color:#272727; }
.commit__item02 .col02 dt{ position: relative; font-size: 2.2rem; font-weight: bold; letter-spacing: 0.072em; line-height: calc(32 / 22); }
.commit__item02 .col02 dt::before{ position: absolute; left: -115px; top: 14px; content: ''; width: 90px; border-bottom: 1px dashed #272727; }
.commit__item02 .col02 img{ max-width: 71%; }
.commit__item02 .col02 dd{ margin-top: 17px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.072em; line-height: calc(28 / 16); }
.commit__item02{ margin-top: 75px; }

.commit__item03{ margin-top: 100px; display: flex; flex-wrap: wrap; }
.commit__item03 dl{ color:#272727; }
.commit__item03 dt{ font-size: 2.2rem; font-weight: bold; letter-spacing: 0.072em; line-height: calc(32 / 22); }
.commit__item03 dd { margin-top: 18px; font-size: 1.6rem; letter-spacing: 0.072em; line-height: calc(28 / 16); }
.commit__item03 dd small{ font-size: 1.2rem; font-weight: 400; line-height: calc(24 / 12); }
.commit__item03 dd p+p{ margin-top: 12px; }

.commit__item04{ margin-top: 110px; display: flex; flex-wrap: wrap; }
.commit__item04 dl{ color:#272727; }
.commit__item04 dt{ font-size: 2.2rem; font-weight: bold; letter-spacing: 0.072em; line-height: calc(32 / 22); }
.commit__item04 dd { margin-top: 18px; font-size: 1.6rem; letter-spacing: 0.072em; line-height: calc(28 / 16); }
.commit__item04 dd small{ font-size: 1.2rem; font-weight: 400; line-height: calc(24 / 12); }
.commit__item04 dd p+p{ margin-top: 12px; }

.commit__item05{ margin-top: 110px; }
.commit__item05 ul{ display: flex; flex-wrap: wrap; justify-content: space-between; }
.commit__item05 ul li{ width: calc(50% - 30px); }
.commit__item05 .title{ margin-top: 20px; font-size: 1.8rem; font-weight: bold; letter-spacing: 0.072em; line-height: calc(32 / 18); }
.commit__item05 .txt{ margin-top: 7px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.072em; line-height: calc(26 / 14); }

/* responsive style 
------------------------------------------------ */
@media screen and (max-width: 1024px) {
	.design__detail:before { right: 0; }
	.design__lists__child--01:before { vertical-align: middle; margin-top: 0; }
	.design__lists__child--01 .design__lists__child__desc,
	.design__lists__child--01:after,
	.design__lists__child--02:after,
	.design__lists__child--02 .design__lists__child__desc,
	.design__lists__child--03:before,
	.design__lists__child--03 .design__lists__child__desc { vertical-align: middle; }
	.commit--frame .wrap { padding: 50px 20px; }
}

@media screen and (min-width: 769px) {
	.commit--frame .wrap { width: 95%; }
	.commit__item02{ display: flex; flex-wrap: wrap; justify-content: space-between; }
	.commit__item02 .col01{ width: calc(100% - 378px); }
	.commit__item02 .col02{ width: 310px; display: inline-flex; align-items: flex-end; justify-content: space-between; flex-direction: column; }
	.commit__item03{  justify-content: space-between; }
	.commit__item03 .coltxt{ width: 240px; }
	.commit__item03 .colimg{ width: calc(100% - 310px); }
	.commit__item04{ justify-content: space-between; }
	.commit__item04 .coltxt{ width: 265px; }
	.commit__item04 .colimg{ width: calc(100% - 340px); }
	.commit__item05 ul li:not(:nth-child(-n+2)){ margin-top: 50px; }
}

@media screen and (max-width: 768px) {
	#contents { content: 40px 0 60px; }
	.wwf--btn { font-size: 15px; font-size: 1.5rem; max-width: 280px; margin: 60px auto 0; }
	.wwf--btn a { -webkit-border-radius: 8px; border-radius: 8px; padding: 21px 17px; }
	.wwf--btn a:after { width: 17px; height: 17px; right: 17px; top: calc( 50% - 8px ); }

	#detail { margin-bottom: 15px; }
	.detail--pic { max-width: 105px; margin: 0 auto 23px; }
	.detail--title { font-size: 17px; font-size: 1.7rem; line-height: 1.5; margin-bottom: 18px; }
	.detail--desc { font-size: 14px; font-size: 1.4rem; line-height: 1.5; margin-bottom: 15px; }
	.detail--btn a:before { margin-right: 5px;  }

	/* section design */
	#design { margin-bottom: 60px; }
	.design--frame { padding: 8.1% 0 20px; }
	.design__detail { margin-top: 65px; margin-bottom: 35px; }
	.design__detail:before { width: 68px; height: 68px; top: -75px; right: 0; }
	.design__detail--pop { font-size: 13px; font-size: 1.3rem; margin-bottom: 8px; }
	.design__detail--pop:before,
	.design__detail--pop:after { vertical-align: -5px; margin: 0 8px; width: 1px; height: 18px; }
	.design__detail--title { font-size: 22px; font-size: 2.2rem; line-height: 1.54; margin-bottom: 20px; }
	.design__detail--desc { font-size: 13px; font-size: 1.3rem; margin-bottom: 18px; letter-spacing: 0; }
	.design__detail--note { font-size: 10px; font-size: 1rem; line-height: 1.56; }

	.design__lists { max-width: 375px; margin: 0 auto; }
	.design__lists__child__desc { padding-left: 15px; -webkit-box-sizing: border-box; box-sizing: border-box; }
	.design__lists__child__desc--num { top: -15px; left: 0px; width: 34px; }
	.design__lists__child__desc--title { font-size: 15px; font-size: 1.5rem; border: 2px solid #fff; max-width: 124px; padding: 4px 0; margin-bottom: 12px; -webkit-border-radius: 6px; border-radius: 6px; }
	.design__lists__child__desc--txt { font-size: 13px; font-size: 1.3rem; line-height: 1.69; }
	.design__lists__child--01 { position: relative; margin-bottom: 60px; padding-top: 49%; }
	.design__lists__child--01:before { display: block; width: 53.6%; padding-bottom: 55%; position: absolute; top: 0; right: 0; background: url(../../img/category/wwf/design_lists_pic_02.png) no-repeat; background-size: 100%; }
	.design__lists__child--01 .design__lists__child__desc { width: 100%; display: block; margin: 0; }
	.design__lists__child--01:after { content: ''; display: block; width: 86.6%; padding-bottom: 88.5%; margin-top: 15px; background: url(../../img/category/wwf/design_lists_pic_01.png) no-repeat; background-size: 100%; }
	.design__lists__child--02 { margin-bottom: 60px; }
	.design__lists__child--02 .design__lists__child__desc { width: 100%; display: block; margin: 0; }
	.design__lists__child--02:after { display: block; width: 100%; padding-bottom: 67.3%; margin-left: 0; margin-top: 15px; background: url(../../img/category/wwf/design_lists_pic_03.png) no-repeat; background-size: 100%; }
 	.design__lists__child--03 { display: flex; flex-direction: column-reverse; }
	.design__lists__child--03:before { display: block; width: 100%; padding-bottom: 64%; margin-top: 18px; background: url(../../img/2026/wwf/design_lists_pic_04_v2.png) no-repeat; background-size: 100%; }
	.design__lists__child--03 .design__lists__child__desc { width: 100%; margin-left: 0; margin-top: 0; display: block; }
	.design__banner { margin-top: 60px; }
	.design__banner ul li { width: 100%; margin-right: 0; float: none; }
	.design__banner ul li:not(:last-child) { margin-bottom: 28px; }
	.design__banner--pic { -webkit-border-radius: 15px; border-radius: 15px; }
	.design__banner--txt { font-size: 8px; font-size: .8rem; margin: 10px 15px 0; }
	.design--copyright { width: calc( 100% - 40px ); margin: 28px 20px 0; max-width: 1200px; font-size: 9px; font-size: .9rem; text-align: left; position: inherit; bottom: 0; left: auto; -webkit-transform: none; transform: none; }
	/* section commit */
	#commit {  }
	.commit--frame { padding: 0 20px;/* background: url(../../img/category/wwf/bg_panda.png) repeat top; background-size: 65px;*/ }
	.commit--frame .wrap { border: 4px solid #2B774B; padding: 50px 20px; }
	.commit--pop { font-size: 13px; font-size: 1.3rem; margin-bottom: 8px; }
	.commit--pop:before,
	.commit--pop:after { vertical-align: -5px; margin: 0 8px; width: 1px; height: 18px; }
	.commit--title { font-size: 22px; font-size: 2.2rem; line-height: 1.54; }
	.commit__block { margin-top: 30px; }
}
@media screen and (max-width: 320px) {
	.commit--title { margin: 0 -10px; }
}
@media screen and (max-width: 768px) {
	.commit__item01 figcaption{ font-size: 1.3rem; }
	.commit__item02{ margin-top: 35px; position: relative; }
	.commit__item02 .col01 { width: 60%; display: block; }
	.commit__item02 .col02 dl { padding-left: 58px; padding-top: 20px; order: 1; }
	.commit__item02 .col02 dt { font-size: 1.8rem; }
	.commit__item02 .col02 dd { margin-top: 10px; font-size: 1.5rem; line-height: 1.61; }
	.commit__item02 .col02 dt::before { left: -58px; width: 45px; top: 13px; }
	.commit__item02 .col02 img { margin: 0; position: absolute; right: 0; top: 0; width: 30%; }
	.commit__item03{ margin-top: 35px; flex-direction: column-reverse; }
	.commit__item03 dt{ font-size: 1.8rem; }
	.commit__item03 dd{ font-size: 1.5rem; line-height: 1.61; margin-top: 10px; }
	.commit__item03 .colimg{ margin-bottom: 20px; }
	.commit__item03 dd p+p { margin-top: 5px; }
	.commit__item04{ margin-top: 35px; }
	.commit__item04 dt{ font-size: 1.8rem; }
	.commit__item04 dd{ font-size: 1.5rem; line-height: 1.61; margin-top: 10px; }
	.commit__item04 .colimg{ margin-bottom: 20px; }
	.commit__item05 { margin-top: 35px; }
	.commit__item05 ul li { width: 46%; margin-right: 8%; }
	.commit__item05 ul li:nth-child(2n) { margin-right: 0; }
	.commit__item05 ul li:nth-child(n+3) { margin-top: 28px; }
	.commit__item05 .title { font-size: 1.5rem; line-height: 1.38; margin-top: 15px; }
	.commit__item05 .txt { font-size: 1.2rem; line-height: 1.61; }
}