/* A (more) Modern CSS Reset */

body > #cn *,

body > #cn *::before,

body > #cn *::after{box-sizing: border-box}

body > #cn  html{-moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none}

body > #cn body,

body > #cn h1,

body > #cn h2,

body > #cn h3,

body > #cn h4,

body > #cn p,

body > #cn figure,

body > #cn blockquote,

body > #cn dl,

body > #cn dd{margin: 0}

body > #cn ul[role='list'],

body > #cn ol[role='list']{list-style: none}

body > #cn body{min-height: 100vh; line-height: 1.5}

body > #cn h1,

body > #cn h2,

body > #cn h3,

body > #cn h4,

body > #cn button,

body > #cn input,

body > #cn label{line-height: 1.1}

body > #cn h1,

body > #cn h2,

body > #cn h3,

body > #cn h4{text-wrap: balance}

body > #cn a:not([class]){text-decoration-skip-ink: auto; color: currentColor}

body > #cn img,

body > #cn picture{max-width: 100%; display: block; vertical-align: bottom;}

body > #cn input,

body > #cn button,

body > #cn textarea,

body > #cn select{font: inherit}

body > #cn textarea:not([rows]){min-height: 10em}

body > #cn :target{scroll-margin-block: 5ex}



/* corporateBanner */

footer .corporateBanner{display: none!important;}



/* contents */

body > .container{overflow: hidden;/*overflow-x: hidden;*/ width: 100%; display: block;}

body > .container .inner{width: 100%; margin: 0 auto; max-width: 430px; /*max-width: 700px; max-width: 480px;*/ font-size: 10px; /* font-size:1.0rem;*/}

body > .container .inner img{width: 100%; height: auto;}

body > .container section{position: relative;}



body > .container .in-anime .--ad0,

body > .container .in-anime .--ad1,

body > .container .in-anime .--ad2,

body > .container .in-anime .--ad3,

body > .container .in-anime .--ad4,

body > .container .in-anime .--ad5,

body > .container .in-anime .--ad6,

body > .container .in-anime .--ad7,

body > .container .in-anime .--ad8,

body > .container .in-anime .--ad9{opacity: 0;}/* 1.2s -> 2s   0.2s + 0.4s   */

body > .container .in-anime.animated .--ad0{animation: fadein 2s ease 0.6s 1 forwards;}

body > .container .in-anime.animated .--ad1{animation: fadein 2s ease 1.0s 1 forwards;}

body > .container .in-anime.animated .--ad2{animation: fadein 2s ease 1.4s 1 forwards;}

body > .container .in-anime.animated .--ad3{animation: fadein 2s ease 1.8s 1 forwards;}

body > .container .in-anime.animated .--ad4{animation: fadein 2s ease 2.2s 1 forwards;}

body > .container .in-anime.animated .--ad5{animation: fadein 2s ease 2.6s 1 forwards;}

body > .container .in-anime.animated .--ad6{animation: fadein 2s ease 3.0s 1 forwards;}

body > .container .in-anime.animated .--ad7{animation: fadein 2s ease 3.4s 1 forwards;}

body > .container .in-anime.animated .--ad8{animation: fadein 2s ease 3.8s 1 forwards;}

body > .container .in-anime.animated .--ad9{animation: fadein 2s ease 4.2s 1 forwards;}



body > .container .in-anime .--ab0,

body > .container .in-anime .--ab1,

body > .container .in-anime .--ab2,

body > .container .in-anime .--ab3,

body > .container .in-anime .--ab4,

body > .container .in-anime .--ab5{opacity: 0;}

body > .container .in-anime.animated .--ab0{animation: bounceIn 1s ease 0.2s 1 forwards;}

body > .container .in-anime.animated .--ab1{animation: bounceIn 1s ease 0.6s 1 forwards;}

body > .container .in-anime.animated .--ab2{animation: bounceIn 1s ease 1.0s 1 forwards;}

body > .container .in-anime.animated .--ab3{animation: bounceIn 1s ease 1.4s 1 forwards;}

body > .container .in-anime.animated .--ab4{animation: bounceIn 1s ease 1.8s 1 forwards;}

body > .container .in-anime.animated .--ab5{animation: bounceIn 1s ease 2.2s 1 forwards;}



@keyframes fadein { 0% { opacity: 0;}

  100% { opacity: 1;} }



@keyframes bounceIn-l {

  from, 20%, 40%, 60%, 80%, to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}

  0% {opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);}

  20% {-webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1);}

  40% {-webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9);}

  60% {opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03);}

  80% {-webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97);}

  to {opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}

}



@keyframes bounceIn {

  from, 20%, 40%, to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}

  0% {opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);}

  40% {-webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1);}

  to {opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}

}



body > .container .--ac {position: absolute; display: block;}

body > .container .--ac .ac-animation-container {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

body > .container .--ac .ac-row {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

body > .container .--ac .auto-char {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; clip-path: var(--clip); -webkit-clip-path: var(--clip);}

body > .container .--ac .auto-char img {display: block; width: 100%; height: auto;}

body > .container .in-anime.animated .--ac .auto-char {animation: autochar 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) var(--d) 1 forwards;}



@keyframes autochar {

  0% {opacity: 0; transform: translateY(12px) scale(0.96);}

  100% {opacity: 1; transform: translateY(0) scale(1);}

}



/*body > .container .images .--sr{opacity: 1; transform: translateY(15px) translateX(25px) rotate(-5deg); transform-origin: bottom center;}

body > .container .in-anime.animated .--sr{animation: spoonRotateIn 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 2.1s 1 forwards;}



@keyframes spoonRotateIn {

  0% {opacity: 1; transform: translateY(25px) translateX(15px) rotate(-5deg);}

  50% {transform: translateY(-2px) rotate(2deg);}

  100% {opacity: 1;transform: translateY(0) translateY(0) rotate(0deg);}

}*/



body > .container .images .--sr,

body > .container .images .--sr2 { opacity: 1; transform: translateY(20px) translateX(30px) rotate(-7deg); transform-origin: bottom center; }

body > .container .in-anime.animated .--sr { animation: spoonRotateIn 4s cubic-bezier(0.25, 1, 0.5, 1) 2s 1 forwards; }

body > .container .in-anime.animated .--sr2 { animation: spoonRotateIn 4s cubic-bezier(0.25, 1, 0.5, 1) 1s 1 forwards; }

@keyframes spoonRotateIn { 

  0% { transform: translateY(20px) translateX(30px) rotate(-7deg); } 

  60% { transform: translateY(-2px) translateX(4px) rotate(1deg); } 

  80% { transform: translateY(0.5px) translateX(-0.5px) rotate(-0.2deg); } 

  100% { transform: translateY(0) translateX(0) rotate(0deg); }

}



body > .container .inner{font-family: "Noto Serif JP", "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", serif; color:#fff; container-type: inline-size;}

body > .container .inner h2,body > .container .inner h3{line-height: 0; margin: 0; padding: 0;}



body > .container main a{transition: all 0.3s ease;}

body > .container main a:hover{opacity: 0.7;}



body > .container #star1,

body > .container #star2,

body > .container #star3,

body > .container #star4,

body > .container #star5{position: absolute; z-index:0; width: 100%; height: 100%; top :0; left :0;}



body > .container main.bg{background: url(../images/main_bg.webp) 50% 0% / cover repeat-y fixed; overflow:hidden;}

body > .container main .inner{box-shadow: 10px 0px 10px -0px rgba(0, 0, 0, .3), -10px 0px 10px -0px rgba(0, 0, 0, .3);}



body > .container #kv{line-height: 0; overflow: hidden;}

body > .container #kv .images{position: relative; z-index:+1;}

body > .container #kv .link1,

body > .container #kv .link2,

body > .container #kv .item,

body > .container #kv .item1,

body > .container #kv .item2,

body > .container #kv .title{position: absolute; display: block;}

body > .container #kv .item{z-index:+1; width: 100%; top: 30.81%; left: 0%;}

body > .container #kv .item1{z-index:+2; width: 34.466%; top: 67.297%; left: 10.533%;}

body > .container #kv .item2{z-index:+2; width: 30.4%; top: 68.972%; left: 56.066%;}

body > .container #kv .link1{z-index:+3; width: 21.933%; top: 84.702%; left: 16.733%;}

body > .container #kv .link2{z-index:+3; width: 21.933%; top: 84.702%; left: 60.266%;}

body > .container #kv .title{z-index:+2; width: 64.666%; top: 14.594%; left: 19%;}



body > .container #item1{line-height: 0; margin-top: -1px;}

body > .container #item1 .images{position: relative; z-index:+1;}

body > .container #item1 .title,

body > .container #item1 .txt1,

body > .container #item1 .txt2{z-index:+2; position: absolute; display: block;}

body > .container #item1 .title{width: 60.6%; top: 5.884%; left: 19.666%;}

body > .container #item1 .txt1{width: 88.666%; top: 39.517%; left: 6.8%;}

body > .container #item1 .txt2{width: 70.866%; top: 89.099%; left: 14.466%;}



body > .container #item2{line-height: 0;}

body > .container #item2 .images{position: relative; z-index:+1;}

body > .container #item2 .title,

body > .container #item2 .txt1{z-index:+2; position: absolute; display: block;}

body > .container #item2 .title{width: 78.666%; top: 6.984%; left: 10.4%;}

body > .container #item2 .txt1{width: 90.266%; top: 40.971%; left: 5.266%;}



body > .container #message{line-height: 0;}

body > .container #message .images{position: relative; z-index:+1;}

body > .container #message .lead,

body > .container #message .title{position: absolute; display: block;}

body > .container #message .title{z-index:+2; width: 100%; top: 16.267%; /* top: 18.267%;*/ left: 0%; text-align: center; font-size: 5cqw; line-height: 1.7; /*font-size: 5.4cqw; line-height: 1.5; color:#d3b88f;*/ color:#bea681;  /*width: 40.2%; top: 18.267%; left: 29.733%; width: 56.866%; top: 17.767%; left: 23.4%;*/}

body > .container #message .title span{font-size: 4.4cqw;}

body > .container #message .lead{z-index:+2; width: 100%; top: 28.767%; /*top: 30.767%;*/ left: 0%; text-align: center; font-size: 3.6cqw; line-height: 1.7; /*font-size: 3.9cqw; line-height: 1.5;*/ color:#e6e6e6;}



body > .container #voice .images{position: relative; z-index:+1;}

body > .container #voice .link,

body > .container #voice .title1,

body > .container #voice .item1-bg,

body > .container #voice .item11,

body > .container #voice .item12,

body > .container #voice .title2,

body > .container #voice .item2-bg,

body > .container #voice .item21,

body > .container #voice .item22,

body > .container #voice .title-bg,

body > .container #voice .title{position: absolute; display: block;}

body > .container #voice .title1{z-index:+2; width: 100%; top: 16.056%; left: 0%; font-size: 5.0cqw; /*font-size: 5.4cqw;  color:#d3b88f;*/ line-height: 1.4; color:#bea681; text-align: center;}

body > .container #voice .title1 span{font-size: 3.5cqw;/*font-size: 3.9cqw;*/ display: block;}

body > .container #voice .item1-bg{z-index:+2; width: 71.6%; top: 16.756%; left: 14.2%;}

body > .container #voice .item11{z-index:+2; width: 100%; top: 23.856%; left: 0%; text-align: center; font-size: 3.5cqw; /*font-size: 3.8cqw;*/ line-height: 1.5; color:#e6e6e6;}

body > .container #voice .item12{z-index:+2; width: 100%; top: 32.556%; left: 0%; text-align: center; font-size: 3.5cqw; /*font-size: 3.8cqw;*/ line-height: 1.5; color:#e6e6e6;}

body > .container #voice .title2{z-index:+2; width: 100%; top: 52.06%; left: 0%; font-size: 5.0cqw; /*font-size: 5.4cqw;  color:#d3b88f;*/ line-height: 1.4; color:#bea681; text-align: center;}

body > .container #voice .title2 span{font-size: 3.5cqw;/*font-size: 3.9cqw;*/ display: block;}

body > .container #voice .item2-bg{z-index:+2; width: 68.666%; top: 52.66%; left: 15.666%;}

body > .container #voice .item21{z-index:+2; width: 100%; top: 59.756%; /*top: 60.256%;*/ left: 0%; text-align: center; font-size: 3.5cqw; /*font-size: 3.8cqw;*/ line-height: 1.5; color:#e6e6e6;}

body > .container #voice .item22{z-index:+2; width: 100%; top: 69.356%; /*top: 69.356%;*/ left: 1%; text-align: center; font-size: 3.5cqw; /*font-size: 3.8cqw;*/ line-height: 1.5; color:#e6e6e6;}

body > .container #voice .link{z-index:+3; width: 62%; top: 81.299%; left: 19%;}

body > .container #voice .title{z-index:+2; width: 100%; top: 1.433%; left: 1%; text-align: center; font-size: 5.4cqw; line-height: 1;}

body > .container #voice .title-bg{z-index:+2; width: 48.533%; top: 1.433%; left: 25.733%;}

body > .container #voice ul{display: flex; flex-wrap: wrap; justify-items: center; position: absolute; z-index: +2; width:47.6%; top: 89.773%; left: 26.133%; padding: 0;}

body > .container #voice li{display: block; list-style: none; margin: 0 13.165% 0 0; padding: 0; width: 24.369%;}

body > .container #voice li:nth-last-child(1){margin: 0;}

body > .container #voice li img{width: 100%;}



@media screen and (min-width: 960px){

    body > .container main#cn{margin-top: 132px;/*margin-top: 120px;*/}

    body > .container main#cn .--sp{display: none!important;}

}



@media screen and (max-width: 959px){

    body > .container main#cn{margin-top: 126px;/*margin-top: 90px;*/}

    body > .container main#cn .--pc{display: none!important;}

    body > .container main a{opacity: 1;}

}



@media screen and (max-width: 768px){

  body > .container .inner{max-width: 768px;}

  body > .container main .bg{background: none;}

  body > .container main .inner{box-shadow: none;}

}