@charset "UTF-8";

/*html::-webkit-scrollbar {
 display:none;
}
body::-webkit-scrollbar {
 display:none;
}
*/
:root {
  --limited-color_muscat: #63aa2d;
  --limited-color_mandarin: #f3932e;
  --limited-color_wh-peach: #e73783;
  --limited-color: #dbaf00;
}


body {
  background-color: #000;
  font-family: "M PLUS 2", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  color: #fff;
  font-size: max(1.8vmin, 16px);
  line-height: 1.5;
  font-weight: 900;
  overflow: hidden;
  height: 100svh
}

header{
  background: url(../img/bg_ptn.png) center top repeat;
  background-size: 800px;
  height: 100vh;
  padding-top: 20px;
  box-sizing: border-box;
  position: relative;
}

header nav h1{
  position: absolute;
  left: 20px;
  top: 10px;
  z-index: 21
}

header nav h1 img{
  width: 80px;
}

header nav .share{
  position: absolute;
  right: 0;
  top: 0;
  z-index: 21;
  background-color: #e50d13;
  color: #ffec03;
  display: flex;
  align-items: center;
  border-radius: 0 0 0 20px;
  padding: 10px 10px 10px 20px;
  line-height: 1
}

header nav .share h2{
  font-size: 20px;
  margin-top: -2px
}

header nav .share ul{
  display: flex;
  margin-left: 20px
}

header nav .share ul li+li{
  margin-left: 10px
}

header nav .share ul img{
  width: 30px;
}

header .kv{
  height: calc(100vh - 20px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

header .kv .sizzle{
  height: 130vmin;
  min-height: 300px;
  position: absolute;
  z-index: 8;
  top: 20px;
  margin-left: -13vmin;
  transition: 0.6s;
  transform: scale(0,0);
}

.splash-class header .kv .sizzle{
  animation: anime-sizzle 0.4s ease 0.5s forwards;
  transform-origin:80% 50% 0
}

@keyframes anime-sizzle {
  0% {
    transform: scale(1)rotate(-90deg);
    ;
  }
  100% {
    transform: scale(1)rotate(0deg);
  }
}

header .kv .yatai{
  position: absolute;
  height: 94vmin;
  margin-right: -88vmin;
  z-index: 9;
  transition: 0.6s;
  transform: scale(0,0);
}

.splash-class header .kv .yatai{
  animation: anime-title 0.6s ease 0.4s forwards;
}

@keyframes anime-yatai {
  0% {
    transform: scale(0);
  }
  70%{
    transform: scale(1.4);
  }
  80% {
    transform: scale(1);
  }
  90% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

header .kv .title{
  position: absolute;
  z-index: 9;
  margin-left: -97vmin;
  margin-top: 7vmin;
  transition: 0.6s;
  transform: scale(0,0);
}

header .kv .title img{
  height: 54vmin;
}

.splash-class header .kv .title{
  animation: anime-title 0.6s ease 0.4s forwards;
}

header .kv .limited{
  position: absolute;
  z-index: 10;
  margin-left: 56vmin;
  height: 15vmin;
  margin-top: -66vmin;
  transform: scale(0,0);
}

.splash-class header .kv .limited{
  animation: anime-title 0.6s ease 0.4s 1 forwards, swing 1s linear 1s infinite forwards;
  transform-origin:center bottom 0;
}

@keyframes anime-title {
  0% {
    transform: scale(4);
  }
  60%{
    transform: scale(1.2);
  }
  80% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes swing {
  0% {
      transform: rotate(0deg);
  }
  25% {
      transform: rotate(3deg)scale(1,1.3);
  }
  50% {
      transform: rotate(0deg);
  }
  75% {
      transform: rotate(-3deg)scale(1,1.3);
  }
  100% {
      transform: rotate(0deg);
  }
}

header .splash{
  height: 100svh;
  position: fixed;
  width: 100vw;
  top: 0px;
  left: 0;
  display: flex;
  z-index: 20;
  justify-content: center;
  align-items: center;
  background: #000;
  overflow: hidden;
  transform-origin: center;
}

.splash-class header .splash{
  animation: feedout 1s ease 0s forwards;;
}

@keyframes feedout {
  0% {
    /*transform: scale(1,1);*/
    opacity: 1
  }
  80% {
    /*transform: scale(0.2,0.2);*/
    filter: blur(50px);
    opacity: 0;
  }
  100% {
    z-index: -1;
    opacity: 0;
  }
}

header .splash .insite{
  position: absolute;
  z-index: 21;
  width: 80%;
  opacity: 1
}

@keyframes feedin {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


header .splash .yuge{
  position: absolute;
  height: 100vh
}

header .splash .yuge.y1{
  animation: steam1 16s linear -2s forwards;
  transition: all 1s;
}
header .splash .yuge.y2{
  animation: steam2 20s linear forwards;
  transition: all 1s;
}
header .splash .yuge.y3{
  animation: steam3 18s linear forwards;
  transition: all 1s;
  filter: blur(10px);
  top: 0px;
}

@keyframes steam1 {
    0% {
       filter: blur(10px);
       transform: rotateY(0deg);
       transform: scale(0.6, 0.6);
       opacity: 0.75;
       top: 0px;
   }
   25% {
       transform: rotateY(10deg);
       opacity: 0.5;
   }
   50% {
       transform: rotateY(2deg);
       opacity: 0.4;
       
   }
   75% {
       transform: rotateY(40deg);
       opacity: 0.2;
   }
   100% {
       filter: blur(10px);
       transform: rotateY(30deg);
       transform: scale(1.2, 1.2);
       opacity: 0;
       top: -900px;
   }
}

@keyframes steam2 {
    0% {
       filter: blur(16px);
       transform: rotateY(50deg);
       transform: scaleY(1, 1);
       opacity: 0.9;
       top: 0px;
   }
   25% {
       transform: rotateY(40deg);
       opacity: 0.5;
   }
   50% {
       transform: rotateY(2deg);
       opacity: 0.3;
       top: 0px;
   }
   75% {

       filter: blur(10px);
       transform: rotateY(0deg);
       opacity: 0.2;
       
   }
   100% {
       filter: blur(16px);
       transform: rotateY(50deg);
       transform: scaleY(1.8, 1.8);
       opacity: 0;
       top: -600px;
   }
}

@keyframes steam3 {
  from {
    opacity: 0.9;
    top: 800px
  }
  to {
    opacity: 0;
    top: 0
  }
}

@media (max-aspect-ratio: 16/9) {

  header .kv .title{
    margin-left: -54vw
  }
  header .kv .title img{
    height: auto;
    width: 48vw;
  }

  header .kv .yatai{
    height: auto;
    width: 58vw;
    margin-right: -49vw
  }

  header .kv .sizzle{
    height: auto;
    width: 150vh;
    margin-left: -2vh
  }

  header .kv .limited{
    height: auto;
    width: 32vw;
    margin-left: 36vw;
    margin-top: -38vw
  }
}

#content{
  position: relative;
  background: url(../img/star-pc.jpg) center top repeat;
  background-size: 50%;
}

#content .inazuma{
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  top: -10vmin;
  height: 50vmin;
  z-index: 12
}

#content .inazuma img{
  position: absolute;
  height: 50vmin;
  top: 0;
}

#content .main-area{
  width: 100%;
  position: relative;
  z-index: 12;
  margin-top: min(-38vmin,-50px)
}

#content .main-area .intro{
  margin: 0 auto;
  position: relative;
  z-index: 15;
  text-align: center;
  font-size: max(3.2vmin,32px);
  background-color: rgba(0,0,0,0.8);
  padding: max(1vmin,10px);
  width: max(82vmin,820px);
}

#content .main-area .intro .notice{
  font-size: max(0.8vmin,8px);
  font-weight: 400;
  margin-top: max(2vmin,20px)
}

#content .main-area .caption{
  display: flex;
  justify-content: center;
  margin-top: max(6vmin,60px);
  margin-bottom: max(3vmin,30px);
}

#content .main-area .caption img{
  height: max(18vmin,150px);
}

#content .main-area .box{
  padding: max(3vmin,30px) max(6vmin,60px);
  margin: 0 auto;
  width: max(82vmin,820px);
  box-sizing: border-box;
}

#content .main-area .box.red{
  background-color: #ec0000
}

#content .main-area .box .txt{
  text-align: center;
}

#content .main-area .box .txt img{
  height: max(7.6vmin,76px)
}

#content .main-area .box .summary{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#content .main-area .box .summary .eg{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: max(3vmin,30px) 0 max(1vmin,10px);
}

#content .main-area .box .summary .eg:after{
  content: "";
  height: max(1vmin,10px);
  background-color: #fff;
  border-radius: max(0.8vmin,10px);
  width: 100%;
  position: absolute;
  display: block;
}

#content .main-area .box .summary .eg p{
  padding: 0 max(4vmin,40px);
  background-color: #ec0000;
  position: relative;
  z-index: 11;
  font-size: max(2vmin,20px);
}

#content .main-area .box .summary .eg+p{
  font-size: max(2vmin,20px);
  margin-bottom: max(1vmin,10px);
  text-align: center;
  width: 100%
}

#content .main-area .box .summary ul{
  margin-top: max(1vmin,10px);
  margin-bottom: max(1.6vmin,16px);
  font-size: max(1.2vmin,12px);
  padding-left: max(1.6vmin,16px);
  text-indent: min(-1.6vmin,-16px);
  font-weight: 600
}

#content .main-area .flag{
  background-color: #fff;
  padding: max(1vmin,10px);
}

#content .main-area .flag img{
  width: 100%
}

#content .main-area .parallel{
  transform: skewX(-20deg);
  border: max(0.8vmin,8px) solid #fff;
  padding: max(0.8vmin,8px);
  background-color: transparent;
  width: 100%;
  box-sizing: border-box;
}

#content .main-area .parallel .inner{
  background-color: #fff;
  position: relative;
}

#content .main-area .parallel .inner .block{
  transform: skewX(20deg);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: max(2vmin,20px) max(2vmin,20px) max(1vmin,10px);
  flex-direction: column;
}

#content .main-area .box.red .parallel .inner .block{
  color: #e60012;
  font-size: max(2.6vmin,26px);
}

#content .main-area .box.red .parallel .inner .block dl{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: max(1.6vmin,16px);
}

#content .main-area .box.red .parallel .inner .block dl dd img{
  width: max(18vmin,180px)
}

#content .main-area .box.red .parallel .inner .block dl dt{
  font-size: max(2.2vmin,22px);
  margin-left: max(2vmin,20px);
}

#content .main-area .items dl{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: max(3.4vmin,34px);
}

#content .main-area .items dl dd,
#content .main-area .items dl dt{
  padding: max(1.8vmin,18px) max(5vmin,50px);
  display: flex;
  position: relative;
  align-items: center;
  width: max(40vmin,400px);
  box-sizing: border-box;
}

#content .main-area .items dl dd{
  background-color: #ec0000;
  color: #ffec02;
  justify-content: flex-end
}

#content .main-area .items dl dt{
  background-color: #ffec02;
  color: #ec0000;
  margin-left: max(2vmin,20px);
  justify-content: flex-start;
}

#content .main-area .items img{
  width: max(22vmin,220px);
  position: absolute;
  margin-top: min(-1vmin,-10px)
}

#content .main-area .items dl dd img{
  left: min(-7vmin,-70px);
}

#content .main-area .items dl dt img{
  right: min(-7vmin,-70px);
}

#content .main-area .items dl+.notice{
  background-color: #fff;
  border-radius: max(1vmin,10px);
  padding: max(1.2vmin,12px);
  width: max(58vmin,580px);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  font-size: max(1.2vmin,12px);
  margin: max(1.4vmin,14px) auto max(1vmin,10px);
}

#content .main-area .items dl+.notice span{
  padding-bottom: max(0.4vmin,4px);
  border-bottom: max(0.4vmin,4px) solid #ec0000;
}

#content .main-area .items .minify{
  font-size: max(1vmin,10px);
  font-weight: 400;
  margin: max(1.4vmin,14px) auto max(5vmin,50px);
  text-align: center;
}

#content .main-area .rental{
  border: max(2vmin,20px) solid #ec0000;
  width: 100%;
  background: url(../img/space.svg) no-repeat;
  background-size: max(340vmin,3400px);
  background-position: center min(-50vmin,-500px);
  padding-bottom: max(5vmin,50px)
}

#content .main-area .provide{
  border: max(2vmin,20px) solid #ffec02;
  width: 100%;
  background: url(../img/space.svg) no-repeat;
  background-size: max(340vmin,3400px);
  background-position: center min(-40vmin,-400px);
  padding-bottom: max(5vmin,50px);
  text-align: center;
}

#content .main-area .ticker{
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  font-size: max(2.6vmin,26px);
  line-height: 1;
  padding-bottom: max(2vmin,20px)
}

#content .main-area .rental .ticker{
  background-color: #ec0000;
  color: #ffec02;
  margin-bottom: max(10vmin,100px);
}

#content .main-area .provide .ticker{
  background-color: #ffec02;
  color: #ec0000;
  margin-bottom: max(10vmin,100px);
}

@keyframes hscroll {
  0% { transform:translateX(0); }
  100% { transform:translateX(-100%); }
}

@keyframes hscroll-r {
  0% { transform:translateX(-100%); }
  100% { transform:translateX(0); }
}

#content .main-area .ticker ul {
  display:inline-block;
  margin:0;
  padding:0;
  animation:hscroll 60s linear infinite;
}

#content .main-area .provide .ticker ul {
  animation:hscroll-r 60s linear infinite;
}

#content .main-area .ticker li {
  display:inline-block;
}

.name.line1 img{
  height: max(5vmin,50px);
}

.name.line2 img{
  height: max(9vmin,90px);
}

.name.line3 img{
  height: max(14vmin,140px);
}

.name{
  margin-bottom: max(1vmin,10px);
  display: flex;
  justify-content: center;
}

#content .main-area .rental .flag{
  width: max(80vmin,800px);
  margin: 0 auto max(7vmin,70px);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#content .main-area .flag.bns:before{
  content: "各団体\Aオリジナル印字";
  position: absolute;
  width: 44%;
  height: 60%;
  background-color: rgba(236,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 15%;
  box-sizing: border-box;
  font-size: max(2vmin,20px);
  white-space: pre;
  text-align: center;
  border: max(0.4vmin,4px) dotted #ffec02
}

#content .main-area .rental ul.rent-items,
#content .main-area .rental ul.rent-items li{
  display: flex;
}

#content .main-area .rental ul.rent-items{
  justify-content: center;
  margin-top: min(-4vmin,-40px);
}

#content .main-area .rental ul.rent-items li{
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: max(24vmin,240px);
}

#content .main-area .rental ul.rent-items li:last-child{
  width: max(30vmin,300px);
}

#content .main-area .rental ul.rent-items li img{
  margin-top: max(1vmin,10px);
}

#content .main-area .rental ul.rent-items li .item3{
  height: max(33vmin,330px);
}

#content .main-area .rental ul.rent-items li .item4{
  height: max(15vmin,150px);
}

#content .main-area .rental ul.rent-items li .item5{
  height: max(28vmin,280px);
}

#content .main-area .rental ul.rent-items li .item6{
  height: max(15vmin,150px);
}

#content .main-area .provide .item7{
  height: max(23vmin,230px);
  margin: 0 auto max(0.4vmin,4px);
}

#content .main-area .provide .minify{
  font-size: max(1.2vmin,12px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  margin-bottom: max(1vmin,10px)
}

#content .main-area .provide .minify span{
  background-color: rgba(0,0,0,0.8);
  padding: max(0.4vmin,4px); 
}

#content .main-area .provide .minify+a{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffec02;
  color: #e60012;
  font-size: max(2vmin, 20px);
  width: max(62vmin, 620px);
  padding: max(1vmin, 10px) max(2vmin, 20px);
  box-sizing: border-box;
  border-radius: max(1vmin, 10px);
  justify-content: center;
  box-shadow: max(1vmin, 10px) max(1vmin, 10px) 0 rgba(0, 0, 0, 0.9);
  margin: 0 auto max(2vmin, 20px);
}

#content .main-area .provide .minify+a .arrow {
  width: max(1.4vmin, 14px);
  margin-left: max(1vmin, 10px);
}

#content .main-area .provide .notice{
  font-size: max(0.8vmin,8px);
  font-weight: 400;
  text-indent: max(-1vmin,-10px);
  padding: max(0.6vmin,6px) max(0.6vmin,6px) max(0.6vmin,6px) max(1.6vmin,16px);
  background-color: rgba(0,0,0,0.8);
  width: max(57vmin,570px);
  margin: 0 auto max(7vmin,70px);
  text-align: left;
  letter-spacing: -0.1px
}

#content .main-area .provide .provide-items,
#content .main-area .provide .provide-items li,
#content .main-area .provide .provide-items li .info{
  display: flex;
}

#content .main-area .provide .provide-items{
  flex-direction: column;
  align-items: center;
}

#content .main-area .provide .provide-items li{
  width: max(82vmin,820px);
  align-items: center;
}

#content .main-area .provide .provide-items li+li{
  margin-top: max(4vmin,40px);
}

#content .main-area .provide .provide-items li>img{
  width: max(24vmin,240px);
}

#content .main-area .provide .provide-items li .info{
  flex-direction: column;
  margin-left: max(2vmin,20px);
  width: calc(100% - max(26vmin,260px));
  align-items: flex-start;
}

#content .main-area .provide .provide-items li .info .tag{
  background-color: #ffec02;
  color: #ec0000;
  font-size: max(1.8vmin,18px);
  padding: max(0.6vmin,6px) max(3vmin,30px);
  position: absolute;
  line-height: 1;
  right: 0;
  top: 0
}

#content .main-area .provide .provide-items li .info .tag span{
  transform: skewX(20deg);
  display: inline-block;
}

#content .main-area .provide .provide-items li .info .parallel .inner .block{
  padding: 0 max(1vmin,10px);
}

#content .main-area .provide .provide-items li .info dl,
#content .main-area .provide .provide-items li .info dl dd,
#content .main-area .provide .provide-items li .info dl dt{
  display: flex;
  align-items: center;
}

#content .main-area .provide .provide-items li .info dl{
  width: 100%
}

#content .main-area .provide .provide-items li .info dd{
  height: max(14vmin,140px);
  width: max(19vmin,190px);
  margin-right: max(1vmin,10px);
  justify-content: center;
}

#content .main-area .provide .provide-items li .info .item8-sample{
  height: max(12vmin,120px);
}

#content .main-area .provide .provide-items li .info .item9-sample{
  height: max(14vmin,140px);
}

#content .main-area .provide .provide-items li .info dt{
  color: #000;
  font-size: max(1.6vmin,16px);
  width: calc(100% - max(20vmin,200px));
  text-align: left;
}

#content .main-area .caution{
  background-color: #ffc306;
  position: relative;
  padding: max(6vmin,60px) max(2vmin,20px)
}

#content .main-area .caution:before{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: max(1.8vmin,18px);
  top: max(0.2vmin,2px);
  background: url(../img/lines.png) repeat-x;
  background-size: contain;
  background-position : center center;
  left: 0;
}

#content .main-area .caution:after{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: max(1.8vmin,18px);
  bottom: max(0.2vmin,2px);
  background: url(../img/lines.png) repeat-x;
  background-size: contain;
  left: 0;
}

#content .main-area .caution h4{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ec0000;
  font-size: max(3.6vmin,36px);
  margin-bottom: max(2.6vmin,26px);
  line-height: 1
}

#content .main-area .caution h4 img{
  height: max(5vmin,50px);
  margin-right: max(1vmin,10px)
}

#content .main-area .caution dl{
  display: flex;
  justify-content: center;
}

#content .main-area .caution dd{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#content .main-area .caution dd img{
  height: max(26vmin,260px);
}

#content .main-area .caution dd h5{
  font-size: max(2vmin,20px);
  margin-bottom: max(1.4vmin,14px);
  color: #000;
  line-height: 1
}

#content .main-area .caution dt{
  width: max(43vmin,430px);
  margin-left: max(2vmin,20px);
}

#content .main-area .caution dt h5{
  border: max(0.6vmin,6px) solid #000;
  padding: max(2vmin,20px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: #000;
  position: relative;
  z-index: 9
}

#content .main-area .caution dt h5:before{
  content: "";
  border: max(0.6vmin,6px) solid #000;
  height: max(3vmin,30px);
  width: max(3vmin,30px);
  position: absolute;
  transform: rotateZ(45deg);
  display: block;
  left: min(-2vmin,-20px);
  z-index: 8;
  background-color: #ffc306;
}

#content .main-area .caution dt h5:after{
  content: "";
  display: block;
  position: absolute;
  width: max(4vmin,40px);
  height: max(6vmin,60px);
  background-color: #ffc306;
  left: 0;
  z-index: 10
}

#content .main-area .caution dt ul li{
  font-size: max(1vmin,10px);
  font-weight: 500;
  text-indent: min(-1vmin,-10px);
  padding-left: max(1vmin,10px);
  text-align: justify;
  color: #000;
  margin-top: max(1.2vmin,12px)
}

#content .main-area .slash{
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-size: max(3.6vmin,36px);
  align-items: center;
  margin-top: max(8vmin,80px);
}

#content .main-area .slash img{
  width: max(32vmin,320px);
  margin-top: max(1vmin,10px);
}

#content .main-area .flavor{
  font-size: max(2.6vmin,26px);
  text-align: center;
  margin: max(3vmin,30px) auto max(2vmin,20px) 
}

#content .main-area .slash img.recipe-logo{
  width: max(12vmin,120px);
  margin-bottom: max(1vmin,10px);
  margin-top: 0
}

#content .main-area .recipe-box{
  width: max(82vmin,820px);
  box-sizing: border-box;
  border: max(1vmin,10px) solid #ec0000;
  background-color: #ec0000;
  color: #ffec02;
  margin: 0 auto;
  position: relative;
}

#content .main-area .recipe-box .recommend{
  position: absolute;
  width: max(20vmin,200px);
  left: min(-12vmin,-120px);
  top: min(-10vmin,-100px)
}

#content .main-area .recipe-box figure img{
  width: 100%
}

#content .main-area .recipe-box .process{
  display: flex;
  width: max(72vmin,720px);
  justify-content: center;
  margin: max(3vmin,30px) auto
}

#content .main-area .recipe-box .process dd,
#content .main-area .recipe-box .process dt{
  width: max(35vmin,350px);
}

#content .main-area .recipe-box .process h5{
  font-size: max(2.4vmin,24px);
  line-height: 1;
  margin-bottom: max(1vmin,10px);
}

#content .main-area .recipe-box .process li{
  font-size: max(1.6vmin,16px);
  font-weight: 600;
  text-indent: min(-1.8vmin,-18px);
  padding-left: max(1.8vmin,18px);
}

#content .main-area .recipe-box .process li+li{
  margin-top: max(0.4vmin,4px);
}

#content .main-area .recipe-box .accordion{
  border: max(0.2vmin,2px) solid #ffec02;
  width: max(72vmin,720px);
  margin: 0 auto max(3vmin,30px);
  transition: 0.2s
}

#content .main-area .recipe-box .accordion dd{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: max(2.4vmin,24px);
  padding: max(2vmin,20px)
}

#content .main-area .recipe-box .accordion dd img{
  margin-left: max(1vmin,10px);
  width: max(2.2vmin,22px);
  transition: 0.2s
}

#content .main-area .recipe-box .accordion dd.active img{
  transform: rotateZ(180deg);
}

#content .main-area .recipe-box .accordion dt{
  transition: 0.2s;
  height: 0;
  overflow: hidden;
  padding: 0 max(1vmin,10px);
  margin: 0 max(1vmin,10px);
}

#content .main-area .recipe-box .accordion dt.active{
  height: auto;
  overflow: inherit;
  padding: max(1vmin,10px);
  border-top: max(0.2vmin,2px) solid #ffec02;
}

#content .main-area .recipe-box .notice{
  background-color: rgba(255,255,255,0.8);
  padding: max(2vmin,20px) max(2vmin,20px) max(2vmin,20px) max(1vmin,10px);
  color: #000;
  display: flex;
}

#content .main-area .recipe-box .notice dd{
  font-size: max(2vmin,20px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: max(13vmin,130px);
  border-right: max(0.2vmin,2px) solid #000;
  box-sizing: border-box;
}

#content .main-area .recipe-box .notice dt{
  width: calc(100% - max(13vmin,130px));
  color: #000;
  display: flex;
  justify-content: flex-start;
  box-sizing: border-box;
  padding-left: max(2vmin,20px);
  align-items: center;
}

#content .main-area .recipe-box .notice dt li{
  font-size: max(1.2vmin,12px);
  font-weight: 500;
  text-indent: min(-1.4vmin,-14px);
  padding-left: max(1.4vmin,14px);
  text-align: justify;
}

#content .main-area .recipe-box .notice dt li+li{
  margin-top: max(0.4vmin,4px)
}

#content .main-area .subject .flavor{
  background-color: #ec0000;
  color: #ffec02;
  width: max(82vmin,820px);
  margin: max(4vmin,40px) auto max(5vmin,50px);
  padding: max(2vmin,20px) 0;
  position: relative;
  display: flex;
  justify-content: center;
}

#content .main-area .subject .flavor:after{
  content: "";
  display: block;
  position: absolute;
  width: max(4vmin,40px);
  height: max(4vmin,40px);
  transform: rotateZ(45deg);
  bottom: min(-2vmin,-20px);
  background-color: #ec0000;
  z-index: -1
}

#content .main-area .subject .parallel{
  width: max(92vmin,920px);
  margin: 0 auto;
  transform: skewX(-10deg);
}

#content .main-area .subject .parallel .inner .block{
  padding-bottom: max(2vmin,20px) ;
  transform: skewX(10deg);
}

#content .main-area .subject .parallel .inner .block li{
  color: #000;
  font-size: max(1.6vmin,16px);
  font-weight: 600;
  text-indent: min(-2vmin, -20px);
  padding-left: max(2vmin, 20px);
  text-align: justify;
}

#content .main-area .subject .parallel .inner .block li+li{
  margin-top: max(0.2vmin,2px);
}

#content .main-area .subject .parallel .inner .block li:first-letter{
  color: #ec0000;
}

#content .main-area .flow .flow-box{
  background-color: #ffec02;
  color: #e60012;
  width: max(82vmin,820px);
  box-sizing: border-box;
  padding: max(2vmin,20px);
  margin: max(4vmin,40px) auto max(5vmin,50px)
}

#content .main-area .flow .flow-box dl{
  display: flex;
  flex-wrap: wrap;
}

#content .main-area .flow .flow-box dd{
  font-size: max(2.6vmin,26px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: max(13vmin,130px);
  box-sizing: border-box;
  position: relative;
  text-align: center;
  color: #fff;
  line-height: 1
}

#content .main-area .flow .flow-box dd:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: max(6.5vmin,68px) solid transparent;
  border-left: max(6.5vmin,68px) solid transparent;
  border-top: max(2vmin,20px) solid #ffec02;
  border-bottom: 0;
  position: absolute;
  bottom: min(-2vmin,-20px)
}

#content .main-area .flow .flow-box dd:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: max(6.5vmin,65px) solid transparent;
  border-left: max(6.5vmin,65px) solid transparent;
  border-bottom: 0;
  position: absolute;
  bottom: min(-1.8vmin,-18px)
}

#content .main-area .flow .flow-box dd.st5:before,
#content .main-area .flow .flow-box dd.st5:after{
  display: none;
}

#content .main-area .flow .flow-box dd.st1{
  background-color: #f9bfc4;
  z-index: 5;
}

#content .main-area .flow .flow-box dd.st1:after{
  border-top: max(2vmin,20px) solid #f9bfc4;
}

#content .main-area .flow .flow-box dd.st2{
  background-color: #f599a0;
  z-index: 4
}

#content .main-area .flow .flow-box dd.st2:after{
  border-top: max(2vmin,20px) solid #f599a0;
}

#content .main-area .flow .flow-box dd.st3{
  background-color: #f06671;
  z-index: 3
}

#content .main-area .flow .flow-box dd.st3:after{
  border-top: max(2vmin,20px) solid #f06671;
}

#content .main-area .flow .flow-box dd.st4{
  background-color: #eb3342;
  z-index: 2
}

#content .main-area .flow .flow-box dd.st4:after{
  border-top: max(2vmin,20px) solid #eb3342;
}

#content .main-area .flow .flow-box dd.st5{
  background-color: #e60014;
  z-index: 1
}

#content .main-area .flow .flow-box dt{
  width: calc(100% - max(13vmin,130px));
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: max(4vmin,40px) 0 max(4vmin,40px) max(2vmin,20px);
  border-bottom: max(0.2vmin,2px) solid #e60012
}

#content .main-area .flow .flow-box dt.st5{
  border-bottom: none;
}

#content .main-area .flow .flow-box dt h5{
  font-size: max(2.4vmin,24px);
}

#content .main-area .flow .flow-box dt h5 a{
  text-decoration: underline;
  color: #000
}

#content .main-area .flow .flow-box dt ul li{
  color: #000;
  font-size: max(1.4vmin,14px);
  font-weight: 500;
  text-indent: min(-1.4vmin, -14px);
  padding-left: max(1.4vmin, 14px);
  text-align: justify;
}

#content .main-area .qa .accordion{
  width: max(82vmin,820px);
  margin: max(4vmin,40px) auto max(5vmin,50px);
  font-size: max(1.8vmin,18px)
}

#content .main-area .qa dd,
#content .main-area .qa dt{
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  padding: max(2vmin, 20px) max(6.6vmin, 66px)
}

#content .main-area .qa dd{
  background-color: #e60012;
  color: #ffec02;
  margin-top: max(1.6vmin, 16px);
}

#content .main-area .qa dt{
  background-color: #ffec02;
  color: #e60012;
  margin-top: max(0.4vmin, 4px);

}

#content .main-area .qa dt{
  height: 0;
  overflow: hidden;
  padding: 0 max(6.6vmin, 66px);
  transition: 0.2s
}

#content .main-area .qa dt.active{
  height: auto;
  overflow: initial;
  padding: max(2vmin, 20px) max(6.6vmin, 66px)
}

#content .main-area .qa dt .indent{
  margin-top: max(1vmin, 10px)
}

#content .main-area .qa dt .indent li{
  font-size: max(1.2vmin, 12px);
  color: #000;
  padding-left: max(1.6vmin, 16px);
  text-indent: min(-1.6vmin, -16px)
}

#content .main-area .qa dt a{
  text-decoration: underline;
  padding: 0 max(0.4vmin, 4px);
  display: inline-block;
  color: #000
}

#content .main-area .qa .question:before{
  content: "";
  display: flex;
  position: absolute;
  background: url(../img/bb-red.svg) no-repeat;
  background-size: contain;
  width: max(10vmin, 100px);
  height: max(9vmin, 90px);
  left: min(-5vmin, -50px);
  margin-top: min(-0.5vmin, -5px);
  font-size: max(2.5vmin, 25px);
  color: #fff;
  justify-content: center;
  align-items: center;
}

#content .main-area .qa .question:after{
  content: "";
  display: block;
  position: absolute;
  background: url(../img/arrow.svg) no-repeat;
  background-size: contain;
  width: max(2.2vmin, 22px);
  height: max(1.3vmin, 13px);
  right: max(2vmin, 20px);
  transition: 0.2s
}

#content .main-area .qa .question.active:after{
  transform: rotateZ(180deg);
}

#content .main-area .qa .question.q1:before{
  content: "Q1"
}
#content .main-area .qa .question.q2:before{
  content: "Q2"
}
#content .main-area .qa .question.q3:before{
  content: "Q3"
}
#content .main-area .qa .question.q4:before{
  content: "Q4"
}
#content .main-area .qa .question.q5:before{
  content: "Q5"
}
#content .main-area .qa .question.q6:before{
  content: "Q6"
}
#content .main-area .qa .question.q7:before{
  content: "Q7"
}
#content .main-area .qa .question.q8:before{
  content: "Q8"
}
#content .main-area .qa .question.q9:before{
  content: "Q9"
}
#content .main-area .qa .question.q10:before{
  content: "Q10"
}
#content .main-area .qa .question.q11:before{
  content: "Q11"
}
#content .main-area .qa .question.q12:before{
  content: "Q12"
}
#content .main-area .qa .question.q13:before{
  content: "Q13"
}

#content .main-area .qa .anser:before{
  content: "";
  display: flex;
  position: absolute;
  background: url(../img/bb-yellow.svg) no-repeat;
  background-size: contain;
  width: max(10vmin, 100px);
  height: max(9vmin, 90px);
  left: min(-5vmin, -50px);
  font-size: max(2.5vmin, 25px);
  color: #e60012;
  justify-content: center;
  align-items: center;
  transition: 0.2s;
  transform: scale(0);
}

#content .main-area .qa .anser.active:before{
  transform: scale(1);
}

#content .main-area .qa .anser.a1:before{
  content: "A1"
}
#content .main-area .qa .anser.a2:before{
  content: "A2"
}
#content .main-area .qa .anser.a3:before{
  content: "A3"
}
#content .main-area .qa .anser.a4:before{
  content: "A4"
}
#content .main-area .qa .anser.a5:before{
  content: "A5"
}
#content .main-area .qa .anser.a6:before{
  content: "A6"
}
#content .main-area .qa .anser.a7:before{
  content: "A7"
}
#content .main-area .qa .anser.a8:before{
  content: "A8"
}
#content .main-area .qa .anser.a9:before{
  content: "A9"
}
#content .main-area .qa .anser.a10:before{
  content: "A10"
}
#content .main-area .qa .anser.a11:before{
  content: "A11"
}
#content .main-area .qa .anser.a12:before{
  content: "A12"
}
#content .main-area .qa .anser.a13:before{
  content: "A13"
}
/*
#content .main-area .qa .anser.a8{
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}*/

#content .main-area .cv{
  background: url(../img/bg_ptn.png) center top repeat;
  background-size: 800px;
  margin-top: max(16vmin, 160px);
}

#content .main-area .cv .inazuma{
  height: max(30vmin, 300px);
}

#content .main-area .cv .inazuma.top{
  top: min(-10vmin, -100px)
}

#content .main-area .cv .inazuma.bottom{
  top: auto;
  bottom: min(-20vmin, -200px)
}

#content .main-area .cv .inner{
  margin-top: min(-30vmin, -300px);
  margin-bottom: min(-5vmin, -50px);
}

#content .main-area .cv .terms-box{
  background-color: #fff;
  padding: max(3vmin, 30px) max(2vmin, 20px) max(3vmin, 30px) max(4vmin, 40px);
  font-size: max(1.4vmin, 14px);
  font-weight: 500;
  width: max(82vmin, 820px);
  margin: max(4vmin,40px) auto max(5vmin,50px)
}

#content .main-area .cv .terms-box .terms-box-inner{
  width: 100%;
  height: max(37vmin, 370px);
  overflow: auto;
  color: #000;
  padding-right: max(2vmin, 20px);
  box-sizing: border-box;
  text-align: justify;
  word-break: break-all;
}

#content .main-area .cv .terms-box .terms-box-inner a{
  text-decoration: underline;
  color: #e60012
}

#content .main-area .cv .terms-box .terms-box-inner h5{
  font-weight: 900;
  font-size: max(1.6vmin, 16px);
  padding-bottom: max(0.4vmin, 4px);
  border-bottom: max(0.2vmin, 2px) solid #000;
  margin-bottom: max(0.8vmin, 8px)
}

#content .main-area .cv .terms-box .terms-box-inner .big>li+li{
  margin-top: max(3vmin, 30px);
}

#content .main-area .cv .terms-box .terms-box-inner .middle{
  margin-top: max(1vmin, 10px);
  /*padding-left: max(1vmin, 10px);*/
}

#content .main-area .cv .terms-box .terms-box-inner h5+.middle{
  margin-top: 0
}

#content .main-area .cv .terms-box .terms-box-inner .middle>li{
  text-indent: min(-1.6vmin, -16px);
  padding-left: max(1.6vmin, 16px);
}

#content .main-area .cv .terms-box .terms-box-inner .middle>li+li{
  margin-top: max(1vmin, 10px);
}

#content .main-area .cv .terms-box .terms-box-inner .small{
  margin-top: max(0.5vmin, 5px);
  font-size: max(1.2vmin, 12px);
}

#content .main-area .cv .terms-box .terms-box-inner .small>li{
  text-indent: min(-1.4vmin, -14px);
  padding-left: max(1.4vmin, 14px);
}

#content .main-area .cv .terms-box .terms-box-inner dl{
  display: flex;
  flex-wrap: wrap;
  /*padding-left: max(1.4vmin, 14px);*/
  font-size: max(1.2vmin, 12px);
  margin-bottom: max(2vmin, 20px);
}

#content .main-area .cv .terms-box .terms-box-inner dl dd{
  width: max(6vmin,60px);
  text-indent: 0;  
}

#content .main-area .cv .terms-box .terms-box-inner dl dt{
  width: calc(100% - max(6vmin,60px));
  text-indent: 0
}

#content .main-area .cv .terms-box .terms-box-inner dl dt+dd,
#content .main-area .cv .terms-box .terms-box-inner dl dt+dd+dt{
  padding-top: max(0.4vmin, 4px);
  margin-top: max(0.4vmin, 4px);
  border-top: max(0.1vmin, 1px) solid #ccc;
}

.cv-set{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#content .cv .cv-set{
  margin-top: max(13vmin, 130px);
}

.cv-set a{
  display: flex;
  position: relative;
  z-index: 9;
  justify-content: center;
  align-items: center;;
  background-color: #e50d13;
  border-radius: max(2vmin, 20px);
  padding: max(2vmin, 20px);
  width: max(68vmin, 680px);
  box-shadow: max(1vmin, 10px) max(1vmin, 10px) 0 rgba(0,0,0,0.9);
}

.cv-set a img{
  width: max(46vmin, 460px);
}

.cv-set a img.arrow{
  width: max(3vmin, 30px);
  margin-left: max(1vmin, 10px)
}

.cv-set .bb{
  width: max(108vmin, 1080px);
  position: absolute;
  transition: 0.2s
}

.cv .cv-set .bb{
  animation: hurueru 0.1s infinite;
}

.cv-set a:hover + .bb{
  animation: hurueru2 0.1s forwards;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg) scale(1)}
    25% {transform: translate(2px, 2px) rotateZ(1deg) scale(0.96)}
    50% {transform: translate(0px, 2px) rotateZ(0deg) scale(1)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg) scale(0.96)}
    100% {transform: translate(0px, 0px) rotateZ(0deg) scale(1)}
}

@keyframes hurueru2 {
    0% {transform: scale(1)}
    100% {transform: scale(0.8)}
}

#content .main-area .inquiry{
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: max(8vmin,80px);
  position: relative;
  z-index: 19
}

#content .main-area .inquiry h5{
  font-size: max(2.6vmin, 26px);
  text-align: center;
  margin-top: max(1.8vmin, 18px);
  background-color: rgba(0,0,0,0.8);
  padding: 0 max(1vmin, 10px);
}

#content .main-area .inquiry a{
  text-decoration: underline;
}

#content .main-area .inquiry a.btn{
  display: flex;
  text-decoration: none;
  background-color: #ffec02;
  color: #e60012;
  font-size: max(3vmin, 30px);
  width: max(68vmin, 680px);
  padding: max(2vmin, 20px);
  box-sizing: border-box;
  border-radius: max(2vmin, 20px);
  justify-content: center;
  box-shadow: max(1vmin, 10px) max(1vmin, 10px) 0 rgba(0,0,0,0.9);
  margin: max(3vmin, 30px) auto 
}

#content .main-area .inquiry a .arrow{
  width: max(2vmin, 20px);
  margin-left: max(1vmin, 10px)
}

#content .main-area .inquiry .info{
  font-size: max(2.2vmin, 22px);
  margin-bottom: max(3vmin, 30px);
  background-color: rgba(0,0,0,0.8);
}

#content .main-area .inquiry .notice{
  width: max(70vmin, 700px);
  background-color: rgba(0,0,0,0.8);
  padding: 0 max(1vmin, 10px);
  box-sizing: border-box;
}

#content .main-area .inquiry .notice li{
  font-size: max(1.4vmin,14px);
  font-weight: 500;
  text-indent: max(-1.6vmin, -16px);
  padding-left: max(1.6vmin, 16px);
  text-align: justify;
}

.cv-set.follow{
  transition: 0.2s;
  display: flex;
  transform: scale(0);
  position: fixed;
  bottom: min(-1vmin, -10px);
  z-index: 19
}

footer{
  background-color: #fff
}

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

header{
  background-size: 500px;
  height: auto;
}

header nav h1{
  left: 10px
}

header nav h1 img{
  width: 50px
}

header nav .share{
  padding: 6px 6px 6px 12px;
  border-radius: 0 0 0 10px
}

header nav .share h2{
  font-size: 14px
}

header nav .share ul{
  margin-left: 10px
}

header nav .share ul li+li{
  margin-left: 8px
}

header .kv{
  flex-direction: column;
  height: 160vw
}

header .kv .yatai{
  height: auto;
  width: 106vw;
  margin-right: -3vw;
  top: 40px
}

header .kv .title{
  z-index: 11;
  margin-left: -2vw;
  left: 0;
  top: 92vw;
  margin-top: auto;
}

header .kv .title img{
  height: auto;
  width: 84vw;
}

header .kv .sizzle{
  z-index: 10;
  height: auto;
  min-height: auto;
  width: 110vw;
  top: 80vw;
  margin-top: auto;
  margin-left: auto;
  right: -56vw
}

@keyframes anime-sizzle {
  0% {
    transform: scale(1)rotate(-90deg);
    right: -100vw;
  }
  100% {
    transform: scale(1)rotate(0deg);
    right: -56vw;
  }
}

header .kv .limited{
  margin-top: auto;
  top: 50px;
  margin-left: auto;
  height: auto;
  width: 60vw;
}

header .splash .insite{
  width: 94%;
  margin-top: -6%
}

#content .main-area{
  background: url(../img/star-sp.jpg) center top repeat;
  background-size: 100%;
  margin-top: min(-8vmin,-80px)
}

#content .inazuma{
  height: 40vmin
}

#content .main-area .intro{
  padding: 0 10px;
  width: 100%;
  font-size: 3.8vw
}

#content .main-area .intro .notice{
  font-size: 7px;
  margin-top: 10px;
  text-align: left;
  text-indent: -8px;
  padding-left: 8px
}

#content .main-area .caption{
  margin-top: max(4vmin,40px);
  margin-bottom: max(2vmin,20px)
}

#content .main-area .box.red+.caption{
  margin-bottom: max(6vmin,60px)
}

#content .main-area .caption img{
  height: 26vw;
}

#content .main-area .box{
  margin-left: max(1.5vmin,15px);
  margin-right: max(1.5vmin,15px);
  width: calc(100% - max(3vmin,30px));
  padding: max(2.6vmin,26px) max(1.5vmin,15px)
}

#content .main-area .box .txt img{
  height: auto;
  width: 100%
}

#content .main-area .box .summary .eg{
  margin: max(2vmin,20px) 0 max(1vmin,10px)
}

#content .main-area .box .summary .eg p{
  padding: 0 max(2vmin,20px);
  font-size: max(1.6vmin,16px)
}

#content .main-area .box .summary .eg:after{
  height: max(0.5vmin,5px)
}

#content .main-area .box .summary .eg+p{
  font-size: 3.6vw
}

#content .main-area .flag{
  padding: max(0.6vmin,6px);
}

#content .main-area .box .summary ul{
  margin-top: max(1vmin, 10px);
  margin-bottom: max(1.4vmin, 14px);
  font-size: max(0.8vmin,10px);
  padding-left: max(1vmin, 12px);
  text-indent: min(-1vmin, -12px);
}

#content .main-area .parallel{
  transform: skewX(-5deg);
  width: 94%;
  margin-left: 3%;
  border: max(0.4vmin, 4px) solid #fff;
  padding: max(0.4vmin, 4px);
}

#content .main-area .parallel .inner .block{
  transform: skewX(5deg);
  padding: max(1.4vmin,14px) max(1vmin,10px) max(1vmin,10px)
}

#content .main-area .box.red .parallel .inner .block{
  font-size: max(1.6vmin,16px)
}

#content .main-area .box.red .parallel .inner .block dl{
  margin-top: max(1vmin,10px)
}

#content .main-area .box.red .parallel .inner .block dl dd img{
  width: 26vw
}

#content .main-area .box.red .parallel .inner .block dl dt {
  font-size: max(1.2vmin,12px);
  margin-left: max(1vmin, 10px);
  width: calc(100% - 10px - 26vw)
}

#content .main-area .items dl{
  margin-left: max(1.5vmin,15px);
  margin-right: max(1.5vmin,15px);
  width: calc(100% - max(3vmin,30px));
  font-size: max(2vmin,20px)
}

#content .main-area .items dl dt{
  margin-left: max(1vmin,10px)
}

#content .main-area .items dl dd,
#content .main-area .items dl dt{
  flex-direction: column;
  width: calc(50% - max(0.5vmin,5px));
  padding: max(4vmin,40px) max(1vmin,10px) max(1vmin,10px)
}

#content .main-area .items img{
  width: max(12vmin,120px);
  margin-top: auto;
  top: min(-6vmin,-60px);
}

#content .main-area .items dl dd img{
  left: auto;
}

#content .main-area .items dl dt img{
  right: auto;
}

#content .main-area .items dl+.notice{
  margin-left: max(1.5vmin,15px);
  margin-right: max(1.5vmin,15px);
  width: calc(100% - max(3vmin,30px));
  font-size: 3.2vw;
  text-indent: -3.2vw;
  padding: max(1vmin,10px) calc(max(1vmin,10px) + 3.2vw)
}

#content .main-area .items .minify{
  margin-bottom: max(3vmin,30px);
  padding-left: max(1.5vmin,15px);
  padding-right: max(1.5vmin,15px);
  text-align: left;
  background-color: rgba(0,0,0,0.8)
}

#content .main-area .rental{
  border: max(1vmin, 10px) solid #ec0000;
  padding: 0 max(1vmin,10px) max(2vmin,20px);
  background-size: max(160vmin, 1600px);
  background-position: center min(-22vmin, -220px);
}

#content .main-area .ticker{
  font-size: max(1.6vmin,16px);
  padding-bottom: max(1.2vmin,12px);
  width: calc(100% + max(2vmin,20px));
  margin-left: min(-1vmin,-10px)
}

#content .main-area .rental .ticker,
#content .main-area .provide .ticker{
  margin-bottom: max(3vmin, 30px);
}

.name.line1 img{
  height: 8vw
}

.name.line2 img{
  height: 14vw
}

.name.line3 img{
  height: 22vw
}

#content .main-area .rental .flag{
  width: 100%;
  margin-bottom: max(4vmin,40px)
}

#content .main-area .flag.bns:before{
  border:max(0.2vmin,2px) dotted #ffec02;
  font-size: max(1.2vmin,12px)
}

#content .main-area .rental ul.rent-items{
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 0
}

#content .main-area .rental ul.rent-items li,
#content .main-area .rental ul.rent-items li:last-child{
  width: 50%
}

#content .main-area .rental ul.rent-items li>img{
  width: 40%;
  height: auto !important;
}

#content .main-area .provide{
  border: max(1vmin, 10px) solid #ffec02;
  padding: 0 max(1vmin, 10px) max(2vmin, 20px);
  background-size: max(160vmin, 1600px);
  background-position: center min(-16vmin, -160px);
}

#content .main-area .provide .item7{
  width: 40%;
  height: auto;
  margin-bottom: max(0.4vmin,4px)
}

#content .main-area .provide .minify{
  font-size: max(1vmin,10px)
}

#content .main-area .provide .minify span{
  padding: max(0.2vmin,2px)
}

#content .main-area .provide .minify+a{
  width: 100%;
  padding: max(0.8vmin, 8px);
  font-size: 3.4vw;
  letter-spacing: -0.6px
}

#content .main-area .provide .minify+a .arrow{
  width: max(0.8vmin, 8px);
  margin-left: max(0.8vmin, 8px);
}

#content .main-area .provide .notice{
  width: 100%;
  font-size: max(0.8vmin,8px);
  text-align: left;
  text-indent: min(-1vmin,-10px);
  margin-bottom: max(4vmin,40px)
}

#content .main-area .provide .provide-items li+li{
  margin-top: max(2vmin,20px)
}

#content .main-area .provide .provide-items li{
  width: 100%;
  align-items: flex-end
}

#content .main-area .provide .provide-items li .name.line1{
  margin-left: -30%;
  width: 130%;
}

#content .main-area .provide .provide-items li>img{
  width: 25%
}

#content .main-area .provide .provide-items li .info{
  width: 70%;
  margin-left: 0
}

#content .main-area .provide .provide-items li .info .tag{
  font-size: max(1vmin,10px);
  padding: max(0.2vmin,2px) max(1vmin,10px);
  left: 0;
  right: auto;
}

#content .main-area .provide .provide-items li .info .tag span{
  transform: skewX(5deg);
}

#content .main-area .provide .provide-items li .info dd{
  min-height: max(8vmin,80px);
  height: auto;
  width: 40%;
}

#content .main-area .provide .provide-items li .info .item8-sample,
#content .main-area .provide .provide-items li .info .item9-sample{
  height: auto !important;
}

#content .main-area .provide .provide-items li .info .item8-sample{
  width: 60%;
  margin: 10px 0 5px
}

#content .main-area .provide .provide-items li .info .item9-sample{
  width: 100%
}

#content .main-area .provide .provide-items li .info dt{
  width: 60%;
  font-size: max(1.1vmin,11px);
}

#content .main-area .provide .provide-items li .info dt br{
  display: none;
}

#content .main-area .provide .parallel{
  width: 103%;
}

#content .main-area .caution{
  padding: max(5vmin,50px) max(1vmin,10px)
}

#content .main-area .caution h4{
  font-size: 6vw;
  margin-bottom: max(2vmin,20px)
}

#content .main-area .caution h4 img{
  height: auto;
  width: 10vw
}

#content .main-area .caution dl{
  flex-direction: column;
  padding: 0 20px
}

#content .main-area .caution dd{
  padding-bottom: max(2vmin,20px);
}

#content .main-area .caution dd img{
  width: 70%;
  height: auto;
}

#content .main-area .caution dt{
  width: 100%;
  margin-left: auto;
}

#content .main-area .caution dt h5{
  font-size: 4vw
}

#content .main-area .caution dd h5{
  margin-bottom: max(1.6vmin,16px);
  font-size: 4.6vw
}

#content .main-area .caution dt h5:before{
  left: auto;
  right: 35%;
  top: min(-1.6vmin,-16px);
  height: max(2vmin, 20px);
  width: max(2vmin, 20px);
  }

#content .main-area .caution dt h5:after{
  right: 25%;
  left: auto;
  top: 0;
  height: max(2.5vmin,25px);
  width: 50%
}

#content .main-area .slash{
  font-size: max(2.6vmin,26px);
}

#content .main-area .slash img{
  width: 50vw
}

#content .main-area .flavor{
  font-size: 3.8vw;
  margin: max(2vmin,20px) auto max(1vmin,10px)
}

#content .main-area .recipe-box{
  width: calc(100% - max(4vmin,40px));
  margin: 0 max(2vmin,20px);
}

#content .main-area .recipe-box .recommend{
  width: max(10vmin,100px);
  top: min(-2vmin,-20px);
  left: min(-2vmin,-20px)
}

#content .main-area .recipe-box .process{
  width: 100%;
  box-sizing: border-box;
  padding: 0 10%;
  flex-direction: column
}

#content .main-area .recipe-box .process dd,
#content .main-area .recipe-box .process dt{
  width: 100%
}

#content .main-area .recipe-box .process dt{
  margin-top: max(2.6vmin,26px);
}

#content .main-area .recipe-box .process h5{
  font-size: 5.4vw
}

#content .main-area .recipe-box .process li{
  font-size: 3.2vw
}

#content .main-area .recipe-box .accordion{
  width: 100%;
}

#content .main-area .recipe-box .accordion dd{
  font-size: max(1.4vmin,14px);
  padding: max(1vmin, 10px);
}

#content .main-area .recipe-box .accordion dd img{
  width: max(1.8vmin,18px)
}

#content .main-area .recipe-box .notice{
  flex-direction: column;
  align-items: center;
}

#content .main-area .recipe-box .notice dd{
  width: auto;
  border-right: none;
  border-bottom: max(0.2vmin, 2px) solid #000;
  padding-bottom: max(0.4vmin, 4px);
  font-size: max(1.6vmin,16px)
}

#content .main-area .recipe-box .notice dt{
  padding-top: max(1vmin,10px);
  padding-left: 0;
  width: 100%
}

#content .main-area .recipe-box .notice dt li{
  font-size: max(1vmin,10px);
  font-weight: 500;
  text-indent: min(-1.2vmin, -12px);
  padding-left: max(1.2vmin, 12px);
}

#content .main-area .subject .flavor{
  width: calc(100% - max(4vmin,40px));
  margin: max(2vmin,20px) max(2vmin,20px) max(3vmin,30px);
  font-size: 3.8vw;
  padding: max(1vmin,10px) 0
}

#content .main-area .subject .flavor:after{
  bottom: min(-1vmin, -10px);
}

#content .main-area .subject .parallel{
  width: 90%;
  margin-left: 5%;
  transform: skewX(-3deg)
}

#content .main-area .subject .parallel .inner .block{
  transform: skewX(3deg);
  padding-left: max(2vmin, 20px);
  padding-right: max(3vmin, 30px);
}

#content .main-area .subject .parallel .inner .block li{
  font-size: max(1.2vmin,12px);
  text-indent: min(-1.4vmin, -14px);
  padding-left: max(1.4vmin, 14px);
}

#content .main-area .flow .flow-box{
  width: calc(100% - max(4vmin,40px));
  margin: max(2vmin,20px) max(2vmin,20px) max(3vmin,30px);
  padding: max(1vmin,10px)
}

#content .main-area .flow .flow-box dd{
 text-orientation: upright;
 writing-mode: vertical-rl;
 width: max(3vmin,30px);
 font-size: max(1.2vmin, 12px);
 letter-spacing: -1px
}

#content .main-area .flow .flow-box dd:before,
#content .main-area .flow .flow-box dd.st1:after,
#content .main-area .flow .flow-box dd.st2:after,
#content .main-area .flow .flow-box dd.st3:after,
#content .main-area .flow .flow-box dd.st4:after{
  border-top-width: max(0.6vmin,6px);
}

#content .main-area .flow .flow-box dd:before{
  bottom: min(-0.4vmin,-4px)
}

#content .main-area .flow .flow-box dd:after{
  bottom: min(-0.2vmin,-2px)
}

#content .main-area .flow .flow-box dt{
  width: calc(100% - max(3vmin,30px));
  padding: max(1vmin,10px);
  padding-right: 0;
  min-height: 80px
}

#content .main-area .flow .flow-box dd br{
  display: none;
}

#content .main-area .flow .flow-box dd:before{
  border-right: max(1.6vmin, 16px) solid transparent;
  border-left: max(1.6vmin, 16px) solid transparent;
}

#content .main-area .flow .flow-box dd:after{
  border-right: max(1.5vmin, 15px) solid transparent;
  border-left: max(1.5vmin, 15px) solid transparent;
}

#content .main-area .flow .flow-box dt h5{
  font-size: max(1.4vmin,14px)
}

#content .main-area .flow .flow-box dt ul li{
  font-size: max(1vmin,10px);
  text-indent: min(-1.2vmin, -12px);
  padding-left: max(1.2vmin, 12px);
}

#content .main-area .qa .accordion{
  width: calc(100% - max(4vmin,40px));
  margin: max(2vmin,20px) max(2vmin,20px) max(3vmin,30px);
  font-size: 3.4vw;
}

#content .main-area .qa dt .indent{
  margin-top: max(0.6vmin,6px)
}

#content .main-area .qa dt .indent li{
  font-size: 2.8vw;
}

#content .main-area .qa dd{
  padding: max(1vmin, 10px) max(3vmin, 30px);
  margin-top: max(1vmin, 10px)
}

#content .main-area .qa dt{
  padding: 0 max(3vmin, 30px)
}

#content .main-area .qa .question:before,
#content .main-area .qa .anser:before{
  width: max(5vmin, 50px);
  height: max(4.5vmin, 45px);
  left: min(-2.5vmin, -25px);
  font-size: max(1.2vmin, 12px)
}

#content .main-area .qa dt.active{
  padding: max(1vmin, 10px) max(3vmin, 30px)
}

#content .main-area .qa .question:after{
  width: max(1.6vmin, 16px);
  height: max(1vmin, 10px);
  right: max(1vmin, 10px)
}

#content .main-area .cv .terms-box{
  width: calc(100% - max(4vmin,40px));
  margin: max(2vmin,20px) max(2vmin,20px) max(3vmin,30px);
  padding: max(2vmin, 20px) max(1vmin, 10px) max(2vmin, 20px) max(2vmin, 20px)
}

#content .main-area .cv .terms-box .terms-box-inner{
  height: max(24vmin,240px);
  font-size: max(1.2vmin,12px);
  padding-right: max(1vmin, 10px)
}

#content .main-area .cv .terms-box .terms-box-inner .big>li+li{
  margin-top: max(2vmin,20px);
}

#content .main-area .cv .terms-box .terms-box-inner .middle{
  margin-top: max(0.6vmin, 6px);
  /*padding-left: max(0.6vmin, 6px);*/
}

#content .main-area .cv .terms-box .terms-box-inner .middle>li+li{
  margin-top: max(0.6vmin, 6px);
}

#content .main-area .cv .terms-box .terms-box-inner .middle>li{
  text-indent: min(-1.4vmin, -14px);
  padding-left: max(1.4vmin, 14px);
}

#content .main-area .cv .terms-box .terms-box-inner .small{
  margin-top: max(0.2vmin,2px);
  font-size: max(1vmin,10px);
}

#content .main-area .cv .terms-box .terms-box-inner .small>li{
  text-indent: min(-1.2vmin, -12px);
  padding-left: max(1.2vmin, 12px);
}

#content .main-area .cv .terms-box .terms-box-inner h5{
  font-size: max(1.4vmin,14px);
}

#content .main-area .cv .terms-box .terms-box-inner dl{
  margin-bottom: max(1vmin,10px);
}

#content .main-area .cv .terms-box .terms-box-inner dl dd{
  width: max(4vmin,40px)
}

#content .main-area .cv .terms-box .terms-box-inner dl dt{
  width: calc(100% - max(4vmin,40px))
}

#content .main-area .cv .inazuma{
  height: max(12vmin,120px) 
}

#content .main-area .cv .inazuma.top{
  top: min(-5vmin, -50px)
}

#content .main-area .cv .inazuma.bottom{
  bottom: min(-8vmin, -80px)
}

#content .main-area .cv{
  background-size: 500px;
  margin-top: max(12vmin, 120px);
  /*padding-bottom: max(3vmin, 30px)*/
}

#content .main-area .cv .slash{
  margin-top: max(22vmin,220px)  
}

.cv-set{
  padding: 12vw 0;
  overflow: hidden;
}

.cv-set .bb{
  width: 150%;
}

#content .cv .cv-set{
  margin-top: max(3vmin, 30px)
}

.cv-set a{
  width: calc(100% - max(4vmin,40px));
  margin: 0 max(2vmin,20px)
}

.cv-set a img{
  width: 80%
}

.cv-set a img.arrow{
  width: 5%;
}

#content .main-area .inquiry{
  padding: 0 20px max(6vmin,60px);
  margin-top: max(3vmin,30px)
}

#content .main-area .inquiry a.btn{
  width: 100%;
  font-size: 4.4vw;
  padding: max(1vmin, 10px);
  margin: max(2vmin, 20px) auto
}

#content .main-area .inquiry .notice{
  width: 100%
}

#content .main-area .inquiry h5{
  font-size: 4vw
}

#content .main-area .inquiry a .arrow{
  width: 5%
}

#content .main-area .inquiry .info{
  font-size: 3.6vw;
  letter-spacing: -0.6px
}

#content .main-area .inquiry .notice li{
  font-size: max(1vmin,10px);
  text-indent: min(-1.2vmin, -12px);
  padding-left: max(1.2vmin, 12px);
}

.cv-set.follow.active{
  transform: scale(1);
}

.cv-set.follow.active img.arrow{
  transform: rotateZ(90deg)
}

}