@charset "utf-8";
/* CSS Document */

.main-visual-wrap{margin-top:100px; width:100%; height: calc(100vh - 100px); position:relative; background-color:var(--color-secondary);}
.bottom-round{position:absolute; width:100%; bottom:0; z-index: 5; display:block; line-height: 0;}
.main-visual-wrap .location-wrap{position:absolute; right:var(--gap-40); top:50%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); z-index: 4;}
.main-visual-wrap .location-wrap li{display:flex; margin-bottom:12px; align-items: center;}
.main-visual-wrap .location-wrap li:last-child{margin-bottom:0;}
.main-visual-wrap .location-wrap li > p{color:#fff; font-weight: 600; font-size:var(--font-size-normal); margin-right:20px; opacity:0; transition:all .3s;}
.main-visual-wrap .location-wrap li  svg > line{transition: all .3s; stroke:#fff;}
.main-visual-wrap .location-wrap li.on  svg > line{stroke:#DB0000; transition: all .3s;}
.main-visual-wrap .location-wrap li.on > p{opacity:1; transition:all .3s;}
.visual-wrap{width:100%; height: inherit; position:relative;}
.visual-wrap > div{background-color:#000; width:100%; height: inherit; position:absolute; top:0; left:0;}
.visual-wrap > div > img{opacity:0.7; object-fit: cover; width:100%; height:inherit; object-position: center;}
.visual-wrap > div > .tx-box{position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); z-index: 1;}
.visual-wrap > div > .tx-box > .tlt{color:#fff; font-size:var(--font-size-huge); font-weight: 300; text-align: center; margin-bottom:var(--gap-20); line-height: 100%; transition:all 1s;}
.visual-wrap > div > .tx-box > .stlt{color:#fff; font-size:var(--font-xxlarge); font-weight: 400; text-align: center; transition:all 1s;  transition-delay: 0.3s;}
.visual-wrap > div:nth-child(1){z-index: 2;}
.visual-wrap > div:nth-child(2){z-index: 1;}
.visual-wrap > div:nth-child(3){z-index: 3;}



.section-recbooks{padding:var(--gap-140) 0; background-color:var(--color-secondary); position:relative; overflow: hidden;}
.section-recbooks > .width-wrap > .tlt{font-size:var(--font-size-xxxxlarge); color:var(--color-dark); text-align: center; margin-bottom:var(--gap-20);}
.section-recbooks > .width-wrap > .stlt{font-size:var(--font-size-large); color:var(--color-font); text-align: center;} 
.section-recbooks .container-wrap{position:relative; display: grid; grid-template-columns: repeat(4, calc(25% - 22px)); grid-gap: 30px; margin-top:var(--gap-80); z-index: 1;}
.section-recbooks .container-wrap .box-wrap{background-color:#fff; padding:var(--gap-30); box-sizing: border-box;}
.section-recbooks .mark-up{display:flex; flex-wrap:wrap; width:100%; align-items: center;}
.section-recbooks .mark-up > div{font-size:var(--font-size-small); color:#fff; text-align: center; display:flex; padding:10px 13px; margin-right:10px; border-radius: 25px; line-height: 100%; margin-bottom:var(--gap-20);}
.section-recbooks .mark-up > div:last-child{margin-right:0;}
.section-recbooks .mark-up > .task-wrap{background-color:#A0BFB5;}
.section-recbooks .mark-up > .tendency-wrap{background-color:#A7B0C5;}
.section-recbooks .image-wrap{width:100%; height: 333px; border:1px solid var(--color-border); overflow: hidden; position:relative;}
.section-recbooks .image-wrap:after{content:""; display:block; clear:both; padding-top:132%;}
.section-recbooks .image-wrap > img{object-fit: cover; object-position:center; width:100%; height:100%; transition:all .3s; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
.section-recbooks .image-wrap:hover > img{width:105%; height: 105%;}
.section-recbooks .age{font-size:var(--font-size-small); color:var(--color-font); margin-top:var(--gap-20);}
.section-recbooks .tlt{margin-top:10px; color:#000; font-size:var(--font-size-xlarge); font-weight: 500;}
.section-recbooks .hr{width:100%; height: 1px; background-color:var(--color-border); margin:var(--gap-20) 0;}
.section-recbooks .cont{color:var(--color-font); font-size:var(--font-size-normal); line-height: 120%;}
.section-recbooks > .pattern01{position:absolute; top:82px; right:235px; z-index: 0}
.section-recbooks > .pattern02{position:absolute; top:190px; left:180px; z-index: 0}
.section-recbooks > .pattern03{position:absolute; top:462px; right:54px; z-index: 0}
.section-recbooks > .pattern04{position:absolute; bottom:-150px; right:470px; z-index: 0}


.section-about{padding-top:var(--gap-140); overflow: hidden;}
.section-about > .inner-wrap{width:calc(100% - var(--gap-40)); margin:0 auto; max-width:1077px; display:flex; justify-content: space-between; flex-wrap: wrap; margin-top:300px;}
.section-about .box-wrap{width:46%; }
.section-about .text-wrap{margin-bottom:185px;}
.section-about .text-wrap > .stlt{font-size:var(--font-size-normal); color:#F5D1C3; margin-bottom:10px;}
.section-about .text-wrap > .tlt{color:#000; font-weight: 600; font-size:var(--font-size-xxxlarge); margin-bottom:var(--gap-40);}
.section-about .text-wrap > .cont{font-size:var(--font-size-normal); color:var(--color-font);}
.section-about .image01-wrap{width:49%; height: 857px; overflow: hidden;}
.section-about .image01-wrap > img{object-fit: cover; object-position: center; width:100%; height: inherit;}
.section-about .image02-wrap{width:100%; height: 609px; overflow: hidden;}
.section-about .image02-wrap > img{object-fit: cover; object-position: center; width:100%; height: 100%;}


.section-event{padding:var(--gap-140) 0; background:url("/project/templates/image/main/event-back.png") center no-repeat; background-size:cover;}
.section-event > .width-wrap{display:flex; flex-wrap: wrap; justify-content: space-between;}
.section-event .txt-wrap{width:100%; max-width:324px; margin-right:20px;}
.section-event .txt-wrap > .stlt{color:#fff; font-size:var(--font-size-normal); margin-bottom:10px;}
.section-event .txt-wrap > .tlt{color:#fff; font-size:var(--font-size-xxxxlarge); font-weight: 600; margin-bottom:var(--gap-40);}
.section-event .txt-wrap > .cont{color:#fff; font-size:var(--font-size-normal); margin-bottom:var(--gap-20);}
.section-event .txt-wrap > .date{color:#fff; font-size:var(--font-size-normal); margin-bottom:var(--gap-40);}
.section-event .txt-wrap > a{font-size:var(--font-size-small); color:#fff; border:1px solid #fff; padding:12px var(--gap-40);}
.section-event .book-wrap{width:100%; max-width:236px; position:relative; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); overflow: hidden; }
.section-event .book-wrap:after{content:""; display:block; clear:both; padding-top:144%;}
.section-event .book-wrap > img{width:100%; height: 100%; position:absolute; top:0; left:0; object-fit: cover; object-position: center;}


.section-discussion{background-color:var(--color-secondary); padding:var(--gap-140) 0;}
.section-discussion > .width-wrap > .tlt{color:#000; font-size:var(--font-size-xxxxlarge); text-align: center; text-transform: uppercase; margin-bottom:var(--gap-20);}
.section-discussion > .width-wrap > .stlt{color:var(--color-font); font-size:var(--font-size-normal); text-align: center;}
.section-discussion .container{display: grid; grid-template-columns: repeat(4, calc(25% - 22px)); grid-gap: 30px; margin-top:var(--gap-80);}
.section-discussion .container .box-wrap .image-wrap{width:100%; position:relative; overflow: hidden;}
.section-discussion .container .box-wrap .image-wrap:after{content:""; display:block; clear:both; padding-top:55%;}
.section-discussion .container .box-wrap .image-wrap > img{object-fit: cover; object-position: center; position:absolute; top:50%; left:50%; width:100%; height: 100%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transition:all .3s;}
.section-discussion .container .box-wrap .image-wrap:hover > img{width:105%; height: 105%;}
.section-discussion .container .box-wrap > .cont-box{background-color:#fff; padding:var(--gap-30); box-sizing: border-box;}
.section-discussion .container .box-wrap > .cont-box .stlt{font-size:var(--font-normal); color:var(--color-font);}
.section-discussion .container .box-wrap > .cont-box .tlt{font-size:var(--font-large); color:#000; margin-top:10px; line-height: 130% !important; height:42px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal;}
.section-discussion .container .box-wrap > .cont-box .hr{width:100%; height: 1px; margin:var(--gap-20) 0; background-color:var(--color-border);}
.section-discussion .container .box-wrap > .cont-box .icon-container{display:flex; justify-content: space-between; align-items: center;}
.section-discussion .cont-box .left-box{display:flex;}
.section-discussion .cont-box .inner-box{display:flex; align-items: center;}
.section-discussion .cont-box .inner-box:nth-child(1){margin-right:var(--gap-20);}
.section-discussion .cont-box .inner-box > p{color:var(--color-font); margin-left:10px;}
.section-discussion .cont-box .right-box .inner-box{margin-right:0;}
.section-discussion .cont-box .icon-wrap{display:flex; align-items: center; cursor: pointer;}
.section-discussion .cont-box .icon-wrap > .full{display:none;}
.section-discussion .cont-box .icon-wrap.on > .full{display:block;}
.section-discussion .cont-box .icon-wrap.on > .normal{display:none;}


@media only screen and (max-width:1200px){
	.section-recbooks .container-wrap{grid-template-columns: repeat(4, calc(25% - 15px)); grid-gap: 20px;}
	.section-recbooks .mark-up > div{margin-bottom:10px;}
	.section-recbooks .parallax-item{display:none;}
}

@media only screen and (max-width:960px){
	.section-recbooks .container-wrap{grid-template-columns: repeat(3, calc(33% - 13px)); grid-gap: 20px;}
	.section-discussion .container{grid-template-columns: repeat(3, calc(33% - 13px)); grid-gap: 20px;}
}

@media only screen and (max-width:640px){
	.section-recbooks .container-wrap{grid-template-columns: repeat(2, calc(50% - 10px)); grid-gap: 20px;}
	.section-discussion .container{grid-template-columns: repeat(2, calc(50% - 10px)); grid-gap: 20px;}
	.section-discussion .cont-box .inner-box > p{margin-left:5px;}
}

@media only screen and (max-width:500px){
	.section-about > .inner-wrap{flex-direction: column-reverse; margin-top:150px;}
	.section-about .box-wrap{width:100%;}
	.section-about .image01-wrap{width:100%; height: 300px;}
	
	.section-event > .width-wrap{justify-content: center; flex-direction: row;}
	.section-event .txt-wrap{margin-right:0; margin-bottom:var(--gap-60);}
}

@media only screen and (max-width:427px){
	
	.section-recbooks .image-wrap{height:175px;}
	.section-discussion .container{grid-template-columns: repeat(1, 1fr); grid-gap: 20px;}
}

@media only screen and (max-width:375px){
	.section-recbooks .container-wrap{grid-template-columns: repeat(1, 1fr); grid-gap: 20px;}
	.section-recbooks .image-wrap{height:333px;}
}