@charset "UTF-8";
/*=============================
共通
===============================*/
:root{
  --col-1st : #000000;
  --col-2nd : #FF0000;
  --col-3rd : #B1A960;
  --bac-1st : #fff;
  --bac-2nd : #F7F7F7;
  /*--bac-3rd : #01AED6;
  --bac-4th : #ECAD00;*/


  --fv-height: 680;
  --fnt-roboto-con: 'Roboto Condensed', sans-serif;
  --fnt-noto-sans: 'Noto Sans JP', sans-serif;
  --fnt-noto-serif: 'Noto Serif JP', sans-serif;
}

/*=============================
骨格
===============================*/
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
html{
  overflow-x: hidden;

}
body {
  margin: 0;
  position: relative;
  overflow-x: hidden;
  background-color: var(--bac-1st);
}

.container {
  width: calc(100vw - min( 100vw / 750 * 96 , 96px));
  max-width: 1100px;
  margin: auto;
}

@media not screen and (min-width:1024px){
  .container {
    max-width: 750px;
  }
}


span {
  display: inline-block;
}

@media screen and (max-width: 813px) {
  .pc {
    display: none ;
  }
}
@media not all and (max-width: 813px) {
  .sp {
    display: none ;
  }
}


/*===============================
画像
=================================*/
img {
  display: block;
  max-width: 100%;
  margin:auto;
}

/*=============================
文字
===========================*/
body{
  color: var(--col-1st);
  font-family: var(--fnt-noto-serif);
  text-align: justify;
  font-size: min(100vw / 375 * ( 16 + 16 ) / 2 , 16px);
  line-height: calc(1 / 16 * 30);
  letter-spacing: min(100vw / 375 * ( 16 + 16 ) / 2 * 0.05, 16px * 0.05);
  position:relative;
}
b,strong{
  color: var(--col-2nd);
  font-weight: inherit;
}

h2{
  font-family: var(--fnt-noto-serif);
  font-size: min(100vw / 375 * ( 60 + 16 ) / 2 , 60px);
  line-height: calc(1 / 60 * 84);
  letter-spacing: min(100vw / 375 * ( 60 + 16 ) / 2 * 0.1, 60px * 0.1);
  text-align: center;
  font-weight: 400;
  margin-bottom: min( 100vw / 750 * 100 , 100px);
}

@media not screen and (min-width:768px){
  h2{
    font-size: min( 100vw / 750 * 64 , 64px);
  }
}

h2:before{
  content: attr(data-attr)"";
  display: block;
  font-size: min(100vw / 375 * ( 24 + 16 ) / 2 , 24px);
  letter-spacing: min(100vw / 375 * ( 24 + 16 ) / 2 * 0.1, 24px * 0.1);
}
h3{
  text-align: left;
}
/*================================
テーブル
==================================*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}


/*============================
#fv
============================*/
section#fv{
  margin-bottom: min( 100vw / 750 * 56 , 56px);
}
section#fv.fv h1 figure img.pc {
  width:100%;
  height: calc( var(--fv-height) * 1px );
  object-fit: cover;
}
@media screen and (max-width:1366px){
  section#fv.fv h1 figure img.pc {
    height: calc(100vw / 1366 * var(--fv-height) );
  }  
}
section#fv.fv h1 figure img.img {
  width:100%;
  height:auto;
}  

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

.fuwafuwa {
  animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
  transition: 1.5s ease-in-out;
}
@keyframes fuwafuwa {
  0%, 40%, 80% {
    transform: scale(1.0);
  }
  20%, 60%, 100% {
    transform: scale(0.96);
  }
}

.bright {
  animation-name: bright;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; 
}

@keyframes bright { 
  0% {
    filter: brightness(1.2);
  } 
  100% {
    filter: brightness(1.0);
  } 
}

.poyopoyo_big.active {
  animation-name: poyopoyo_big;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes poyopoyo_big {
  0%, 20%,40%, 60%, 80% {
    transform: scale(1.0);
  }
 10%,30%,50% {
    transform: scale(1.25);
  }
}

.poyopoyo_small.active {
  animation-name: poyopoyo_small;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; 
}
@keyframes poyopoyo_small {
  0%, 40%, 80% {
    transform: scale(1.0);
  }
  60%, 100% {
    transform: scale(0.9);
  }
}