/* core */



@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
*{-webkit-box-sizing: border-box; box-sizing: border-box; scrollbar-width: thin; -webkit-font-smoothing: antialiased;}
html{height: 100%; margin: 0; padding: 0; scroll-behavior: smooth; scrollbar-gutter: stable;}
body{height: 100%; margin: 0; padding: 0; background: #cacafd; font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.4em; color: #222;}
h1{margin: 60px 0; font-family: 'Funnel Display', 'Inter', sans-serif; font-size: clamp(3.125rem, 1.25rem + 5vw, 6.25rem); /*600-1600/50-100/16*/ line-height: 1.0em; font-weight: 600; text-align: center; color: #222;}
p{max-width: 800px; margin: 1.0em auto; font-size: clamp(1rem, 0.7rem + 0.8vw, 1.5rem); /*600-1600/16-24/16*/ line-height: 1.4em; text-align: center;}
p.head{max-width: 1000px; margin: 40px auto; font-family: 'Inter', sans-serif; font-size: clamp(1.25rem, 0.875rem + 1vw, 1.875rem); /*600-1600/20-30/16*/ line-height: 1.3em; font-weight: 400; text-align: center;}
p a{color: inherit; text-decoration: underline;}



/* main */



div.container{padding: 80px 0;}
div.grid{width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: repeat(16, 1fr);}
div.grid_content{grid-column: 2 / 16;}
div.grid_content>*:first-child{margin-top: 0 !important;}
div.grid_content>*:last-child{margin-bottom: 0 !important;}
@media (max-width: 1280px){
div.grid_content{grid-column: 1 / 17;}
}



/* load */



div.swiper-container{position: relative;}
div.swiper{overflow: clip;}
div.swiper-wrapper{display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch;}
div.swiper-slide{width: 54vw; height: auto; padding: 20px 10%;}
div.swiper_bar{width: 100%; max-width: 300px; height: 4px; margin: 20px auto 0 auto; background: #fff; border-radius: 10px; overflow: hidden;}
div.swiper_bar>div{background: #000; border-radius: 10px;}
div.swiper_button{z-index: 80; position: absolute; top: 50%; right: 30px; width: 60px; aspect-ratio: 1; margin-top: -30px; background: #000 url(svg/arrow_next.svg) center center / 50% auto no-repeat; border: none; border-radius: 50%; outline: none; cursor: pointer; -webkit-transition: opacity 120ms ease; transition: opacity 120ms ease;}
div.swiper_button.prev{left: 30px; right: auto; -webkit-transform: scaleX(-1); transform: scaleX(-1);}
div.swiper_button.swiper-button-disabled{opacity: 0; pointer-events: none;}
@media (max-width:1280px){
div.swiper-slide{width: 64vw;}
div.swiper_button{right: 20px;}
div.swiper_button.prev{left: 20px; right: auto;}
}
@media (max-width: 960px){
div.swiper-slide{width: 74vw; padding: 20px;}
div.swiper_button{display: none;}
}



/* item */



div.item{height: 100%; -webkit-transform: scale(0.8) rotate(0deg); transform: scale(0.8) rotate(0deg); -webkit-transition: transform 200ms ease; transition: transform 200ms ease; cursor: pointer;}
div.item_data{width: 100%; aspect-ratio: 1; padding: 8%; background: #fff; border-radius: 12px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center;}
div.item_data div.data_desc{position: relative; font-size: clamp(1rem, 0.7rem + 0.8vw, 1.5rem); /*600-1600/16-24/16*/ line-height: 1.4em; margin-bottom: 20px;}
div.item_data div.data_desc:before{z-index: 4; position: absolute; left: 0; right: 0; bottom: 0; content: ''; display: block; height: 70%; background: linear-gradient(0deg,rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
div.item_data div.data_date{font-size: 1.0em; color: #666; font-style: italic;}
div.item_data div.data_text{display: none;}
div.swiper-slide-active div.item{-webkit-transform: scale(1) rotate(4deg) !important; transform: scale(1) rotate(4deg) !important;}



/* overlay */



div.overlay{z-index: 700; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;}
div.overlay:before{z-index: 2; position: fixed; top: 0; left: 0; content: ''; display: block; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); opacity: 0; -webkit-transition: opacity 200ms ease; transition: opacity 200ms ease;}
div.overlay>div{z-index: 4; position: relative; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; overscroll-behavior: contain; -ms-overflow-style: none; opacity: 0; -webkit-transition: opacity 200ms ease; transition: opacity 200ms ease;}
div.overlay_end{z-index: 6; position: fixed; top: 20px; left: 50%; display: block; width: 40px; aspect-ratio: 1; margin-left: -20px; background: #ddd url(svg/close.svg) center center / 50% auto no-repeat; border-radius: 50%; -webkit-transition: background 100ms ease; transition: background 100ms ease; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;}
div.overlay_content{z-index: 4; position: relative; padding: 80px 0;}
div.overlay div.letter{max-width: 1000px; margin: 0 auto; padding: 60px 40px; background: #fff; border-radius: 16px; font-size: clamp(1rem, 0.7rem + 0.8vw, 1.5rem); /*600-1600/16-24/16*/ line-height: 1.4em;}
body.overlay_on{overflow: hidden;}
body.overlay_on div.overlay{pointer-events: all;}
body.overlay_on div.overlay:before{opacity: 1;}
body.overlay_on div.overlay>div{opacity: 1;}
@media (hover: hover){
div.overlay_end:hover{background-color: #ccc;}
}