@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');



/* ==============================================
setting
============================================== */

html {
font-size: calc(100vw * 1 / 375);
line-height: calc(100vw * 1 / 375);
}
@media screen and (min-width:769px) {
html {
font-size: 1.6px;
line-height: 1.6px;
}
}
* {
font-family:"Zen Maru Gothic","sans-serif";
font-size: 15rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 700;
color:#503228;
margin:0;
padding:0;
box-sizing: border-box;
}
img {
border:none;
vertical-align:top;
width: 100%;
height: auto;
}
ul {
list-style:none;
}
ul:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
a{
text-decoration: none;
}



.pc{
display:none;
}
.none{
display: none;
}



/* ==============================================
body
============================================== */

body{
background: #ffc820;
}
body.stop{
position: fixed;
width: 100%;
height: 100%;
overflow-y: scroll;
}



.bg-01{
position: fixed;
top: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
width: 100%;
height: 100%;
background: url("../images/anv10_cmn_bg-01.png") center top;
background-size: 20rem 20rem;
z-index: -1;
opacity: 1;
transition: 0.2s ease-out;
}
.bg-01.off{
opacity: 0;
}
.bg-02{
position: fixed;
top: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
width: 100%;
height: 100%;
background: url("../images/anv10_cmn_bg-02.png") center top;
background-size: 20rem 20rem;
z-index: -2;
transition: 0.2s ease-out;
}
@media screen and (min-width:769px) {
.bg-01{
max-width: 600px;
}
.bg-02{
max-width: 600px;
}
}



.gallery{
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 226px;
background: url("../images/anv10_cmn_img.jpg");
background-size: 6522px 226px;
animation: gallery 120s linear 0s infinite normal forwards;
z-index: -3;
}
@keyframes gallery {
from { background-position: 6522px 0; }
to { background-position: 0 0; }
}
@media screen and (min-width:769px) {
.gallery{
display: block;
}
}



/* ==============================================
header
============================================== */

header{
}
header p{
position: absolute;
top: 8rem;
left: 8rem;
z-index: 10;
transition: 0.2s ease-out;
}
@media screen and (min-width:769px) {
header p{
position: fixed;
top: 32px;
left: 32px;
}
}
header p a{
}
header p img{
max-width: 51rem;
transition: 0.2s ease-out;
}
@media screen and (min-width:769px) {
header p img{
max-width: 102px;
}
}
header h1{
position: absolute;
top: 32rem;
left: 0;
right: 0;
margin: auto;
max-width: 219rem;
z-index: 1;
transition: 0.2s ease-out;
}
@media screen and (min-width:769px) {
header h1{
top: 32px;
}
}
header h1 img{
max-width: 219rem;
}



/* ==============================================
nav
============================================== */

nav{
position: fixed;
top: 8rem;
right: 6rem;
z-index: 10;
transition: 0.2s ease-out;
}
@media screen and (min-width:769px) {
nav{
top: 32px;
right: 32px;
}
}
nav .menu{
}
nav .menu a{
}
nav .menu a img{
max-width: 48rem;
filter: drop-shadow(0 8rem 2rem rgba(100,40,0,0.48));
transition: 0.2s ease-out;
}
@media screen and (min-width:769px) {
nav .menu a img{
max-width: 96px;
}
}
nav .scroll{
position: fixed;
bottom: -62rem;
left: 0;
right: 0;
z-index: 10;
transition: 0.2s ease-out;
}
nav .scroll.off{
bottom: -160rem;
}
nav .scroll img:nth-child(1){
max-width: 48rem;
display: block;
margin: auto;
transition: 0.2s ease-out;
}
@media screen and (min-width:769px) {
nav .scroll img:nth-child(1){
max-width: 72px;
}
}
nav .scroll img:nth-child(2){
max-width: 64rem;
display: block;
margin: 8rem auto 0 auto;
}



/* ==============================================
main
============================================== */

main{
max-width: 100%;
transition: 0.2s ease-out;
}
@media screen and (min-width:769px) {
main{
max-width: 600px;
margin: auto;
}
}
main::before{
content: "";
display: none;
position: fixed;
top: 0;
left: -636px;
right: 0;
margin: auto;
background: url("../images/anv10_cmn_bg.png") center;
background-size: 36px 8px;
width: 36px;
height: 100%;
filter: drop-shadow(-16px 0 16px rgba(150,80,50,0.48));
z-index: 1;
}
main::after{
content: "";
display: none;
position: fixed;
top: 0;
left: 0;
right: -636px;
margin: auto;
background: url("../images/anv10_cmn_bg.png") center;
background-size: 36px 8px;
width: 36px;
height: 100%;
filter: drop-shadow(-16px 0 16px rgba(150,80,50,0.48));
transform: scale(-1, 1);
z-index: 1;
}
@media screen and (min-width:769px) {
main::before{
display: block;
}
main::after{
display: block;
}
}



/* ==============================================
#hero
============================================== */

#hero{
position: relative;
overflow: hidden;
}
#hero .inner{
}
#hero .inner figure{
position: absolute;
top: 16rem;
bottom: 0;
height: 400rem;
margin: auto -13rem;
transition: 0.2s ease-out;
}
@media screen and (min-width:769px) {
#hero .inner figure{
top: 16px;
left: 0;
right: 0;
width: 560px;
height: 560px;
margin: auto;
}
@media screen and (max-height:900px) {#hero .inner figure{width: 480px;height: 480px;}}
@media screen and (max-height:800px) {#hero .inner figure{width: 400px;height: 400px;}}
@media screen and (max-height:700px) {#hero .inner figure{width: 320px;height: 320px;}}
}
#hero .inner figure img.title{
max-width: 400rem;
filter: drop-shadow(0 8rem 2rem rgba(100,40,0,0.48));
transition: 0.2s ease-out;
}
@media screen and (min-width:769px) {
#hero .inner figure img.title{
max-width: 560px;
}
@media screen and (max-height:900px) {#hero .inner figure img.title{max-width: 480px;}}
@media screen and (max-height:800px) {#hero .inner figure img.title{max-width: 400px;}}
@media screen and (max-height:700px) {#hero .inner figure img.title{max-width: 320px;}}
}
#hero .inner figure span{
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 400rem;
filter: drop-shadow(0 8rem 2rem rgba(100,40,0,0.48));
transition: 0.2s ease-out;
}
@media screen and (min-width:769px) {
#hero .inner figure span{
max-width: 560px;
}
@media screen and (max-height:900px) {#hero .inner figure span{max-width: 480px;}}
@media screen and (max-height:800px) {#hero .inner figure span{max-width: 400px;}}
@media screen and (max-height:700px) {#hero .inner figure span{max-width: 320px;}}
}
#hero .inner figure span img{
animation: choco 20.0s linear 0s infinite normal forwards;
}
@keyframes choco {
0% {-webkit-transform: rotate(0deg);}
25% {-webkit-transform: rotate(90deg);}
50% {-webkit-transform: rotate(180deg);}
75% {-webkit-transform: rotate(270deg);}
100% {-webkit-transform: rotate(360deg);}
}



/* ==============================================
#message
============================================== */

#message{
}
#message .inner{
}
#message .inner p{
margin: 32rem 0 0 0;
}
#message .inner p:first-child{
margin: 0;
}
#message .inner p img{
filter: drop-shadow(0 8rem 2rem rgba(100,40,0,0.48));
}
#message .inner figure{
text-align: center;
margin: 32rem 0 0 0;
}
#message .inner figure img{
max-width: 105rem;
filter: drop-shadow(0 8rem 2rem rgba(100,40,0,0.48));
}



/* ==============================================
#ucho
============================================== */

#ucho{
margin: 64rem 0 0 0;
}
#ucho .inner{
overflow: hidden;
padding: 0 0 32rem 0;
}
#ucho .inner h2{
padding: 32rem 0 0 0;
}
#ucho .inner h2 img{
filter: drop-shadow(0 8rem 2rem rgba(100,40,0,0.48));
}



#ucho .inner div{
position: relative;
min-height: 200rem;
margin: 32rem 0 0 0;
padding: 0 0 0 204rem;
}
#ucho .inner div.even{
padding: 0 204rem 0 0;
}
#ucho .inner #ucho-01{ background: url("../images/anv10_uch_bg-01.png"); background-size: 375rem 200rem;}
#ucho .inner #ucho-02{ background: url("../images/anv10_uch_bg-02.png"); background-size: 375rem 200rem;}
#ucho .inner #ucho-03{ background: url("../images/anv10_uch_bg-03.png"); background-size: 375rem 200rem;}
#ucho .inner #ucho-04{ background: url("../images/anv10_uch_bg-04.png"); background-size: 375rem 200rem;}
#ucho .inner #ucho-05{ background: url("../images/anv10_uch_bg-05.png"); background-size: 375rem 200rem;}
#ucho .inner #ucho-06{ background: url("../images/anv10_uch_bg-06.png"); background-size: 375rem 200rem;}
#ucho .inner #ucho-07{ background: url("../images/anv10_uch_bg-07.png"); background-size: 375rem 200rem;}
#ucho .inner #ucho-08{ background: url("../images/anv10_uch_bg-08.png"); background-size: 375rem 200rem;}
#ucho .inner #ucho-09{ background: url("../images/anv10_uch_bg-09.png"); background-size: 375rem 200rem;}
#ucho .inner #ucho-10{ background: url("../images/anv10_uch_bg-10.png"); background-size: 375rem 200rem;}

#ucho .inner div h3{
font-size: 15rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #503228;
padding: 32rem 0 0 0;
}
#ucho .inner div.even h3{
text-align: right;
}
#ucho .inner div h3 img{
max-width: 59rem;
display: inline-block;
margin: 0 0 8rem -10rem;
}
#ucho .inner div.even h3 img{
margin: 0 -10rem 8rem 0;
}
#ucho .inner div figure{
position: absolute;
top: 0;
left: -12rem;
width: 200rem;
height: 200rem;
background: url("../images/anv10_uch_bg.png");
background-size: 200rem 200rem;
filter: drop-shadow(0 8rem 2rem rgba(100,40,0,0.48));
}
#ucho .inner div.even figure{
left: inherit;
right: -12rem;
}
#ucho .inner div figure a{
display: block;
width: 200rem;
height: 200rem;
padding: 20rem 0 0 0;
text-align: center;
}
#ucho .inner div.cs figure a{
display: none;
}
#ucho .inner div figure a img{
max-width: 160rem;
height: 160rem;
object-fit: cover;
border-radius: 80rem;
border: solid 4rem #fff;
filter: drop-shadow(0 2rem 1rem rgba(40,20,10,0.64));
}
#ucho .inner div figure span{
position: absolute;
bottom: 0;
right: 0;
display: block;
width: 44rem;
height: 44rem;
border-radius: 22rem;
background: #e73828;
border: solid 4rem #fff;
filter: drop-shadow(0 8rem 2rem rgba(100,40,0,0.48));
}
#ucho .inner div.even figure span{
right: inherit;
left: 0;
}
#ucho .inner div figure span::before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 16rem;
height: 4rem;
border-radius: 2rem;
background: #ffc820;
}
#ucho .inner div figure span::after{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 4rem;
height: 16rem;
border-radius: 2rem;
background: #ffc820;
}
#ucho .inner div p{
position: absolute;
bottom: -40rem;
left: 0;
}
#ucho .inner div.even p{
left: inherit;
right: 0;
}
#ucho .inner div p img{
max-width: 80rem;
}



/* ==============================================
#modal
============================================== */

#modal{
}
#modal .modal{
position: fixed;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
background: url("../images/anv10_cmn_bg-02.png") center top;
background-size: 20rem 20rem;
z-index: -10;
opacity: 0;
pointer-events: none;
transition: 0.2s ease-out;
}
#modal .modal.on{
z-index: 100;
opacity: 1;
pointer-events: inherit;
}
#modal .modal .inner{
position: absolute;
top: 0;
bottom: 64rem;
left: 0;
right: 0;
margin: auto;
max-width: 343rem;
height: 400rem;
background: #fff;
filter: drop-shadow(0 8rem 2rem rgba(40,20,10,0.48));
transition: 0.2s ease-out;
}
@media screen and (min-width:769px) {
@media screen and (max-height:800px) {
#modal .modal .inner{
max-width: 400px;
height: 480px;
}
}
}
#modal .modal .inner div{
overflow: hidden;
overflow-y: scroll;
height: 400rem;
padding: 0 24rem 32rem 24rem;
transition: 0.2s ease-out;
}
@media screen and (min-width:769px) {
@media screen and (max-height:800px) {
#modal .modal .inner div{
height: 480px;
padding: 0 24px 32px 24px;
}
}
}
#modal .modal .inner div::-webkit-scrollbar{
width: 4rem;
}
#modal .modal .inner div::-webkit-scrollbar-track{
background: #eeeeee;
}
#modal .modal .inner div::-webkit-scrollbar-thumb{
background: #ffc820;
}
#modal .modal .inner div figure{
margin: 0 -24rem 24rem -24rem;
transition: 0.2s ease-out;
}
@media screen and (min-width:769px) {
@media screen and (max-height:800px) {
#modal .modal .inner div figure{
margin: 0 -24px 24px -24px;
}
}
}
#modal .modal .inner div figure img{
}
#modal .modal .inner div p{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0;
font-weight: 700;
color:#503228;
margin: 16rem 0 0 0;
transition: 0.2s ease-out;
}
@media screen and (min-width:769px) {
@media screen and (max-height:800px) {
#modal .modal .inner div p{
font-size: 15px;
line-height: 23px;
margin: 16px 0 0 0;
}
}
}
#modal .modal .inner .close{
position: absolute;
bottom: -64rem;
left: 0;
right: 0;
margin: auto;
width: 44rem;
}
#modal .modal .inner .close a{
font-size: 0;
line-height: 0;
display: block;
width: 44rem;
height: 44rem;
border-radius: 22rem;
background: #ffc820;
border: solid 4rem #fff;
filter: drop-shadow(0 8rem 2rem rgba(40,20,10,0.48));
}
#modal .modal .inner .close a::before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 4rem;
height: 16rem;
border-radius: 2rem;
background: #e73828;
transform: rotate(45deg);
}
#modal .modal .inner .close a::after{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 4rem;
height: 16rem;
border-radius: 2rem;
background: #e73828;
transform: rotate(-45deg);
}



/* ==============================================
#collaboration
============================================== */

#collaboration{
}
#collaboration .inner{
}
#collaboration .inner h2{
padding: 64rem 0 0 0;
}
#collaboration .inner h2 img{
filter: drop-shadow(0 8rem 2rem rgba(40,20,10,0.48));
}
#collaboration .inner div{
margin: 32rem 32rem 0 32rem;
}
#collaboration .inner div a{
display: block;
background: #ffc820;
border-radius: 16rem;
border: solid 4rem #fff;
padding: 0 0 16rem 0;
filter: drop-shadow(0 8rem 2rem rgba(40,20,10,0.48));
}
#collaboration .inner div.cs a{
pointer-events: none;
}
#collaboration .inner div a figure{
}
#collaboration .inner div a figure img{
border-radius: 12rem 12rem 0 0;
}
#collaboration .inner div a h3{
font-size: 15rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #503228;
text-align: center;
margin: 12rem 0 0 0;
}



/* ==============================================
footer
============================================== */

footer{
padding: 0 0 64rem 0;
}
footer p{
font-size: 10rem;
line-height: 14rem;
letter-spacing: 0.4rem;
font-weight: 900;
color: #FFF;
text-align: center;
padding: 56rem 0 0 0;
}



/* ==============================================
animation
============================================== */

.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.hinge {
animation-duration: 2s;
}



.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}



.fadeInUp {
animation-name: fadeInUp;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(16rem);
}

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



.fadeInDown {
animation-name: fadeInDown;
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-16rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}



.fadeInLeft {
animation-name: fadeInLeft;
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-16rem);
}
100% {
opacity: 1;
transform: translateX(0);
}
}



.fadeInRight {
animation-name: fadeInRight;
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(16rem);
}

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



.zoomIn {
animation-name: zoomIn;
}
@keyframes zoomIn {
0% {
opacity: 0;
transform: scale(0.8,0.8);
}
100% {
opacity: 1;
transform: scale(1.0,1.0);
}
}



.pon {
animation-name: pon;
}
@keyframes pon {
0% {
opacity: 0;
transform: scale(0.7);
}
20% {
opacity: 1;
transform: scale(1.2);
}
40% {
opacity: 1;
transform: scale(0.8);
}
60% {
opacity: 1;
transform: scale(1.1);
}
80% {
opacity: 1;
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}