@charset 'utf-8';

/*
 * name:present.css
 * author:Sovanda
*/

/* present

------------------------------------------------ */
#present { position: relative; display: block; overflow: hidden; padding: calc(200px - (200px * .24)) 0 calc(400px - (400px * .24)); }
#present .wrap { max-width: 1100px; }
.present__visual__desc{ max-width: 576px; min-height: 115px; margin: 0 auto; padding: 5px 92px 0; text-align: center; background: url(../../img/present/2024/apolo-min.png) no-repeat 0 0 / calc(120px - (120px * .24)) auto, url(../../img/present/2024/nasa-min.png) no-repeat calc(100% + 11px) 0 / calc(120px - (120px * .24)) auto; }
.present__visual__desc.wwf__visual__desc{ max-width: 705px; background: none; padding-left: 0; padding-right: 0; }
.present__visual__desc--tag { font-size: calc(2.4rem - (2.4rem * .24)); letter-spacing: 0.05em; display: inline-block; padding: .45em 1.65em; margin-bottom: 2.25em; background: #EFBF73; color: #fff; }
.present__visual__desc--tag.tag-green-bg{ background-color: #2B774C; }
.present__visual__desc--title {font-size: calc(5.7rem - (5.7rem * .24)); text-align: center; letter-spacing: 0.04em; line-height: 1.2; color: #CD1017;}
.present__visual__desc--title{ color:#2B774C; }
.present__visual__desc--cmn { margin-top: calc(40px - (40px * .24)); font-size: calc(2.4rem - (2.4rem * .24)); letter-spacing: 0.05em; line-height: calc(36/24); color:#011E41; }
.present__visual__desc--note { font-size: calc(2rem - (2rem * .24)); line-height: calc(30/20); text-align: right; letter-spacing: 0.05em; color: #EFBF73; margin-top: calc(20px - (20px * .24)); }
.present__lists { position: relative; margin-top: calc(90px - (90px * .24)); }
.present__lists:after,
.present__lists:before { content: ''; display: block; position: absolute; top: 20px; width: 140px; height: 2px; border-bottom: 2px dashed #707070; }
.present__lists:before { left: -48px; -webkit-transform: rotate(135deg); transform: rotate(135deg); }
.present__lists:after { right: -48px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
.present__lists--break { padding: calc(75px - (75px * .24)) 35px calc(100px - (100px * .24)); border: 2px dashed #707070; }
.present__lists--break:after,
.present__lists--break:before { content: ''; display: block; position: absolute; bottom: 20px; width: 140px; height: 2px; border-bottom: 2px dashed #707070; }
.present__lists--break:before { left: -48px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
.present__lists--break:after { right: -48px; -webkit-transform: rotate(135deg); transform: rotate(135deg); }
.present__lists--title { font-size: calc(2.2rem - (2.2rem * .24)); line-height: calc(33/22); letter-spacing: 0.05em; text-align: center; margin-bottom: calc(50px - (50px * .24)); }
.present__lists__items { position: relative; max-width: calc(1060px - (1060px * .24)); margin: 0 auto; display: flex; flex-wrap: wrap; }
.present__lists__items li { width: 30.2%; margin-right: 4.7%; }
.present__lists__items li:nth-child(3n) { margin-right: 0; }
.present__lists__items li:nth-child(n+4) { margin-top: 90px; }
.present__lists__items--tlt { font-size: calc(2.4rem - (2.4rem * .24)); padding: .4em 0; margin: 0 auto calc(20px - (20px * .24)); line-height: calc(30/24); background: #EFBF73; color: #fff; text-align: center; -webkit-border-radius: 50em; border-radius: 50em; position: relative; z-index: 1; }
.present__lists__items--tlt.items-green-bg{ background-color: #2B774C; }
.present__lists__items--pic { position: relative; box-shadow: 0px 3px 10px rgba(0,0,0,0.2); -moz-box-shadow: 0px 3px 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 10px rgba(0,0,0,0.2); }
.present__lists__items--pic span { position: absolute; right: 14px; bottom: 14px; font-size: 13px; font-size: 1.3rem; letter-spacing: .05em; }
.present__lists__items--txt{ margin-top: calc(48px - (48px * .24)); font-size: calc(2.2rem - (2.2rem * .24)); line-height: calc(36/22); color:#011E41; }
.present__lists--note { position: relative; max-width: 874px; margin: 45px auto 0; font-size: 12px; font-size: 1.2rem; letter-spacing: 0.08em; text-align: right; }
.present__product { margin-top: calc(130px - (130px * .24)); }
.present__product--title { text-align: center; line-height: 1.2; margin-bottom: calc(25px - (25px * .24)); }
.present__product--title img { max-width: calc(240px - (240px * .24)); }
/* .present__product--title:after { content: ''; display: block; width: 50px; margin: 25px auto 0; height: 20px; background: url(../../img/present/arrow.png) no-repeat bottom center; background-size: 100%; } */
.present__product--btn{ display: block; max-width: calc(1000px - (1000px * .24)); margin: 0 auto; }
.present__product--btn a{ display: block; padding: 1.4em 0; font-size: calc(3rem - (3rem * .24)); font-weight: 500; line-height: calc(36/30); text-align: center; color:#fff; background: url(../../img/present/2024/map.png) no-repeat calc(60px - (60px * .24)) center / calc(76px - (76px * .24)), url(../../img/present/2024/arrow.png) no-repeat calc(100% - (48px - (48px * .24))) center / calc(22px - (22px * .24)) calc(40px - (40px * .24)), #EEBF73; border-radius: 60px; }
.present__product--desc { font-size: 22px; font-size: 2.2rem; letter-spacing: 0.05em; line-height: 2.272727; text-align: center; }
.present__product--note { text-align: center; margin-bottom: 18px; }
.present__product--note dt { font-size: 14px; font-size: 1.4rem; letter-spacing: 0.05em; margin-bottom: 10px; }
.present__product--note dd { font-size: 18px; font-size: 1.8rem; letter-spacing: 0.08em; color: red; }
.present__product__lists { margin-top: 48px; display: flex; flex-wrap: wrap; }
.present__product__lists li { text-align: center; width: 44.5%; margin-right: 11%; }
.present__product__lists li:last-child { margin-right: 0; }
.present__product__lists--txt { font-size: 20px; font-size: 2rem; letter-spacing: 0.05em; display: inline-block; color: #fff; background: #00468C; width: 170px; padding: 9px 0; margin-bottom: 10px; }
.present__product__lists--txt.girl { background: #CE1017; }
.present--btnback{ margin: 60px auto 0; position: relative; -webkit-transition: all .3s; transition: all .3s; letter-spacing: 0.048px; text-indent: 72px; font-size: 1.8rem; padding: 19px 0; display: block; width: 256px; color:#011e41; border:2px solid #011e41; border-radius: 4px; overflow: hidden; }
.present--btnback:hover{ color:#fff; background-color: #011e41; }
.present--btnback:after{
	-webkit-transition: all .3s; transition: all .3s;
	content: '';
    display: block;
    width: 8px;
    height: 14px;
    position: absolute;
    right: 27px;
    top: 50%;
    transform: translateY(-50%);
    background: url(../../img/present/arrow1.svg) no-repeat;
    background-size: contain;}
.present--btnback:hover:after {
    background: url(../../img/present/arrow2.svg) no-repeat;
    background-size: contain;}

.present__product_note{ margin-top: 60px; font-size: calc(2rem - (2rem * .24)); text-align: center; line-height: calc(30/20); color:#2B774C; }
.present__product_note p+p{ margin-top: 20px; }

/* responsive style 
------------------------------------------------ */
@media screen and (min-width: 769px) {
.moleskine.present__lists{ margin-top: calc(80px - (80px * .24)); }
.present__lists__items.items-col-1 { max-width: calc(1000px - (1000px * .24)); }
.present__lists__items.items-col-1 li { width: 100%; margin-right: 0; }
.present__lists__items li:nth-child(2) .present__lists__items--tlt{ padding-left: 12%; padding-right: 12%; }
.present__product--btn a:hover{ opacity: 0.8;}
.present__lists__items--tlt{ display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; text-align: center; min-height: 2.5em; }
.items-col-1 .present__lists__items--tlt { margin-bottom: 50px; padding: .6em 0; font-size: calc(3rem - (3rem * .24)); font-weight: bold; letter-spacing: 0; line-height: 1; }
.items-col-1 .present__lists__items--pic{ max-width: 700px; margin: 0 auto; padding: 0; }
.items-col-1 .present__lists__items--txt{ margin: calc(6rem - (6rem * .24)) auto 0; max-width: calc(804px - (804px * .24)); }
.items-col-1 .present__lists__items--txt+.present__lists__items--txt{ margin-top: calc(4rem - (4rem * .24)); }
.present__lists__items--txt+.present__lists__items--txt{ margin-top: 38px; }

}
@media screen and (max-width: 1140px) {
	.present__visual__desc--tag { font-size: 1.75vw; }
	.present__visual__desc--title { font-size: 4vw; letter-spacing: .05em; }
	.present__visual__desc--cmn { font-size: 1.92vw; }
	.present__visual__desc--note { font-size: 1.31vw; }
}

@media screen and (max-width: 1000px) {
	.present__lists__items--tlt { font-size: 2.2vw; }
}

@media screen and (max-width: 768px) {
	#present { padding: 70px 0 130px; }
	.present__visual { display: block; margin: 0 -20px; }
	.present__visual__desc{ max-width: 420px; min-height: 35px; padding: 0 0; background: url(../../img/present/2024/apolo-min.png) no-repeat 20px 0 / 35px auto, url(../../img/present/2024/nasa-min.png) no-repeat calc(100% - 20px) 0 / 35px auto; }
	.present__visual__desc.moleskine{ max-width: 380px; min-height: 35px; background: url(../../img/present/2024/apolo-min.png) no-repeat 20px 6px / 35px auto, url(../../img/present/2024/nasa-min.png) no-repeat calc(100% - 20px) 6px / 35px auto; }
	.present__visual__desc--tag { font-size: 13px; font-size: 1.3rem; padding: .45em 1.3em; margin-bottom: 20px; }
	.present__visual__desc--title { padding: 0 70px; font-size: 23px; font-size: 2.3rem; }
	.present__visual__desc--cmn { padding: 0 20px; margin-top: 10px; font-size: 15px; font-size: 1.5rem; line-height: 1.86; }
	.present__visual__desc--note { font-size: 12px; font-size: 1.2rem; margin-top: 8px; padding:0 20px; text-align: center; }
	.present__lists { margin-top: 45px; }
	.present__lists:after,
	.present__lists:before { top: 12px; width: 84px; height: 2px; border-bottom: 2px dashed #707070; }
	.present__lists:before { left: -28px; -webkit-transform: rotate(135deg); transform: rotate(135deg); }
	.present__lists:after { right: -28px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
	.present__lists--break { padding: 35px 18px; border: 2px dashed #707070; }
	.present__lists--break:after,
	.present__lists--break:before { bottom: 12px; width: 84px; height: 2px; border-bottom: 2px dashed #707070; }
	.present__lists--break:before { left: -28px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
	.present__lists--break:after { right: -28px; -webkit-transform: rotate(135deg); transform: rotate(135deg); }
	.present__lists--title { font-size: 14px; font-size: 1.4rem; margin-bottom: 45px; }
	.present__lists__items{ justify-content: center; }
	.present__lists__items li,
	.present__lists__items li:nth-child(3n) { width: 80%; max-width: 350px; margin-right: 0; }
	.present__lists__items li:nth-child(2n) { margin-right: 0; margin-top: 45px; }
	.present__lists__items li:nth-child(n+3) { margin-top: 45px; }
	.present__lists__items--tlt { font-size: 1.6rem; padding: .15em 1.8em; }
	.present__lists__items--pic { box-shadow: 0px 3px 10px rgba(0,0,0,0.2); -moz-box-shadow: 0px 3px 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 10px rgba(0,0,0,0.2); }
	.present__lists__items--pic span { right: 1%; bottom: 3%; font-size: 3.125vw; }
	.present__lists__items--txt{ margin-top: 25px; font-size: 1.4rem; }
	.present__lists--note { margin: 25px auto 0; font-size: 8px; font-size: .8rem; }
	.present__product--btn{ max-width: 335px; }
	.present__product--btn a{ font-size: 1.8rem; padding: 10px 55px; background: url(../../img/present/2024/map.png) no-repeat 10px center / 39px, url(../../img/present/2024/arrow.png) no-repeat calc(100% - 22px) center / 12px auto, #EEBF73; }

	.present__product { margin-top: 60px; }
	.present__product--title { margin-bottom: 20px; }
	.present__product--title img { max-width: 145px; }
	/* .present__product--title:after { width: 32px; margin: 10px auto 0; height: 13px; } */
	.present__product--desc { font-size: 15px; font-size: 1.5rem; line-height: 1.8; margin-bottom: 10px; }
	.present__product--note { margin-bottom: 18px; }
	.present__product--note dt { font-size: 12px; font-size: 1.2rem; margin-bottom: 8px; }
	.present__product--note dd { font-size: 15px; font-size: 1.5rem; }
	.present__product__lists { margin-top: 35px; display: block; }
	.present__product__lists li { width: 100%; margin-right: 0; }
	.present__product__lists li:last-child { margin-top: 30px; }
	.present__product__lists--txt { font-size: 14px; font-size: 1.4rem; width: 100px; padding: 5px 0; margin-bottom: 0; }
	.present__product__lists--txt.girl { background: #CE1017; }
	.present--btnback{ margin-top: 30px; padding: 11px 0; width: 180px; font-size: 1.3rem; text-indent: 50px; }
	.present--btnback:after{ right: 18px; width: 6px; height: 10px; }
}
@media screen and (max-width: 320px) {
	.present__visual__desc--title{ font-size: 2rem; }
	.present__product--btn a{ font-size: 1.6rem; }
}