*{
margin:0;
padding:0;
text-align:center;
font-family:"メイリオ","Hiragino Kaku Gothic ProN",sans-serif;
}
a img{
border:none;
}
img{
width:100%;
vertical-align:bottom;
}
li{
list-style-type: none;
}

body{
background: url(images/middle_pc.jpg) 0% 0% repeat-y;
background-size:contain;
}

#loader{
width: 100vw;
height: 100dvh;
position: fixed;
top:0;
left: 0;
background: #C4A3D4;
z-index: 999;
}
#loaderIcon{
position: absolute;
width: 17%;
aspect-ratio:740/640;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#loaderIcon img{
position: absolute;
top: 0;
left: 0;
}
#loaderIcon img:nth-last-of-type(1){
position: relative;
transform-origin: 75% bottom; /* 底を支点にスケール */
animation: bounce 1.4s infinite;
}
@keyframes bounce {
  0%   { transform: rotate(-5.5deg); }
  25%  {  transform: rotate(1deg); }
  50%  { transform: rotate(-5.5deg); }
  100% { transform: rotate(-5.5deg); }
}

.loaderFloat {
--amplitude: 0.6vw;   /* 上下の移動幅 */
--duration: 2.0s;    /* 往復の所要時間 */
--timing: cubic-bezier(.22,.9,.35,1); /* 優しいイージング */
}
.loaderFloat:nth-of-type(2n) {
animation: loaderFloatY1 var(--duration) ease-in-out infinite;
}
.loaderFloat:nth-of-type(2n+1) {
animation: loaderFloatY2 var(--duration) ease-in-out infinite;
}

@keyframes loaderFloatY1 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(calc(-1 * var(--amplitude))); }
  100% { transform: translateY(0); }
}

@keyframes loaderFloatY2 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(calc(0.6 * var(--amplitude))); }
  100% { transform: translateY(0); }
}

#menuBtn{
position:fixed;
top:0;
left:0;
width:9%;
cursor:pointer;
z-index:998;
 animation-name:fuwafuwa;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-duration: 1s;
}
@keyframes fuwafuwa {
0% {
transform: translateY(0);
}
100% {
transform: translateY(10px);
}
}
#menuClose{
position:absolute;
top:0;
left:0;
display:none;
}
#menu{
position: fixed;
top: 0;
padding:2% 0 0 0;
width: 100%;
height:100vh;
background: linear-gradient(180deg, rgb(44, 4, 161), rgb(209, 15, 180));
display:none;
z-index:997;
}
#menu .logo{
margin:1% auto 0 auto;
width:35%;
}
#menu .btn{
margin:0 auto 0 auto;
width:40%;
}
#menu .btn img{
margin-top:2%;
width:49%;
}
#menu .sns{
margin:2% auto 0 auto;
width:30%;
}
#menu .sns img{
display:inline-block;
width:18%;
}

header{
position:relative;
}
header .logo{
position:absolute;
top:2%;
left:50%;
transform:translateX(-50%);
width:27%;
}
header h1::before, header h1::after{
content: "";
aspect-ratio:1520/340;
width: 100%;
position: absolute;
top:0;
left: 0;
--amplitude: 1vw;   /* 上下の移動幅 */
--duration: 2.8s;    /* 往復の所要時間 */
--timing: cubic-bezier(.22,.9,.35,1); /* 優しいイージング */
}
header h1::before{
background: url("../images/h1.png");
background-size: 100%;
animation: floatY1 var(--duration) ease-in-out infinite;
}
header h1::after{
background: url("../images/h2.png");
background-size: 100%;
animation: floatY2 var(--duration) ease-in-out infinite;
}
@keyframes floatY1 {
0%   { transform: translateY(0); }
50%  { transform: translateY(calc(-1 * var(--amplitude))); }
100% { transform: translateY(0); }
}
@keyframes floatY2 {
0%   { transform: translateY(0); }
50%  { transform: translateY(calc(0.6 * var(--amplitude))); }
100% { transform: translateY(0); }
}

#cloud_0 {
position:relative;
margin-top: -13%;
}
#cloud_0 .chara {
position:absolute;
top:-38%;
width:22%;
}
#cloud_0 .chara:nth-of-type(1) {
left:13%;
transform:translateX(-50%);
transform-origin: 50% bottom;
animation: yora_0 1.2s infinite alternate ease-in-out;
}
@keyframes yora_0 {
0%   { transform: rotate(-3deg); }
100% { transform: rotate(3deg); }
}
#cloud_0 .chara:nth-of-type(2) {
left:66%;
transform:translateX(-50%);
transform-origin: 50% bottom;
animation: yora_1 1.2s infinite alternate ease-in-out;
}
@keyframes yora_1 {
0%   { transform: rotate(3deg); }
100% { transform: rotate(-3deg); }
}

article {
margin-top: -24%;
}

section{
position: relative;
margin: 5% auto 0 auto;
width: 80%;
max-width: 910px;
}
section .middle{
padding: 1% 6% 10% 6%;
background:url(images/kakomi_middle_pc.png) repeat-y;
background-size: contain;
}
section .middle::before {
position:absolute;
content: "";
background: url("images/news_c_h_pc.png");
background-size: 100%;
aspect-ratio:2240/360;
width: 125%;
left: -11%;
top:-2vw;
}
section .middle::after {
position:absolute;
content: "";
background: url("images/news_c_f_pc.png");
background-size: 100%;
aspect-ratio:2240/360;
width: 107%;
left: -3%;
bottom:-2vw;
}

#cloud_2{
position:relative;
margin-top: -2%;
z-index:2;
}
#cloud_2 .oshiridama_0{
position:absolute;
top:15%;
left: 50%;
transform: translateX(-50%);
width:88%;
 animation-name:oshiridama_2;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-duration: 1.2s;
 transform-origin: 0% 50%;
}
@keyframes oshiridama_2 {
0% {
transform: translate(-50%,0%);
scale:0.9;
}
100% {
transform: translate(-50%,0%);
scale:1;
}
}
#cloud_2 .oshiridama_1{
position:absolute;
top: 13%;
left: 46%;
transform: translateX(-50%);
width: 58%;
 animation-name:oshiridama_3;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-duration: 1s;
 transform-origin: 0% 50%;
}
@keyframes oshiridama_3 {
0% {
transform: translate(-50%,0%);
scale:0.9;
}
100% {
transform: translate(-50%,0%);
scale:1;
}
}

#link {
position:relative;
margin-top: -21%;
}
#link .content{
position:absolute;
left:0;
bottom:2%;
}
#link ul{
display:table;
table-layout:fixed;
margin:0 auto;
width:98%;
}
#link li{
display:table-cell;
vertical-align:middle;
}
#link li:nth-of-type(1){
width:30%;
}
#link li:nth-of-type(2){
width:70%;
}
#link p{
margin-top:-3%;
font-size:0.7rem;
color:#fff;
}
#link .btn{
text-align:right;
}
#link .btn img{
display:inline-block;
margin:1% 0.5% 0 0.5%;
width:23%;
}


.mobile{
display:none;
}
.mobile_inline{
display:none;
}

/*colorbox*/
.cboxIframe{
background:transparent;
}
#cboxContent{
background:transparent;
}
#cboxTopLeft,#cboxTopCenter,#cboxTopRight,
#cboxMiddleLeft,#cboxMiddleRight,
#cboxBottomLeft,#cboxBottomCenter,#cboxBottomRight{
width:0;
height:0;
}
#cboxClose {
top: 1%;
right:1%;
width: 100px;
height: 123px;
background: url(../images/menu_close.png) no-repeat 0 0;
background-size:100%;
}
#cboxClose:hover {
background-position: 0 0;
}
#cboxLoadingOverlay,#cboxLoadingGraphic{
background:url();
}
#cboxOverlay {
opacity: 0.8 !important;
}


@media (max-width: 639px) {
#loaderIcon{
width: 38%;
}
.loaderFloat {
--amplitude: 1.2vw;   /* 上下の移動幅 */
}

#menuBtn {
right: unset;
left: 0;
width:17%;
}

#menu .logo{
width:85%;
}
#menu .btn{
width:78%;
}
#menu .sns{
margin:4% auto 0 auto;
width:85%;
}

header .logo{
margin:2% auto 0 auto;
width:42%;
}
header h1::before, header h1::after{
--amplitude: 2.8vw;   /* 上下の移動幅 */
--duration: 2.8s;    /* 往復の所要時間 */
}

#cloud_0 .chara {
position: absolute;
top: -33%;
width: 42%;
}
#cloud_0 .chara:nth-of-type(1) {
left:4%;
}
#cloud_0 .chara:nth-of-type(2) {
left:53%;
}

section{
margin: 4% auto 0 auto;
width: 90%;
}
section .middle{
padding: 1% 6% 6% 6%;
}
section .middle::before {
width: 110%;
left: -5%;
top:-2vw;
}
section .middle::after {
width: 110%;
left: -5%;
bottom:-3vw;
}


#cloud_2 .oshiridama_0 {
top: 18%;
left: 48%;
transform: translateX(-50%);
width: 100%;
}
#cloud_2 .oshiridama_1{
top:20%;
left: 48%;
width:38%;
}

#link ul{
display:block;
width:98%;
}
#link li{
display:block;
}
#link li:nth-of-type(1){
width:100%;
}
#link li:nth-of-type(2){
width:100%;
}
#link p{
font-size:0.6rem;
}
#link .btn{
text-align:center;
}
#link .btn img{
display:inline-block;
margin:1.5% 0.5% 0 0.5%;
width:44%;
}

.pc{
display:none;
}
.mobile{
display:block;
}
.mobile_inline{
display:inline;
}

/*colorbox*/
#cboxClose {
width: 15%;
/*height: 40px;*/
}
}