@charset 'UTF-8';

img { width: 100%; vertical-align: bottom; display: block; margin: 0; padding: 0; }
body { font-family: 'Noto Sans JP', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Helvetica', sans-serif; color: #000; -webkit-text-size-adjust: 100%; width: 100%; }
video{ width: 100%; height: auto; vertical-align: bottom; }
.pc{ display: block ; }
.sp{ display: none ; }
.disnon{ display:none; }
#maincontents{ width:750px; margin:0 auto; overflow: hidden; }

.cta_area{ position: relative; }
.cta_area #tab,
.cta_area #tab2,
.cta_area #tab3{ width: 692px; margin: 0px auto; position:absolute; top:12.5%; left:3.8%; }
.cta_area #tab dt,
.cta_area #tab2 dt,
.cta_area #tab3 dt{ display: inline-block; cursor:pointer; float:left; height:70px; padding:0; margin:11px 0 0; width: 48%; position:relative; }
.cta_area #tab dt.select,
.cta_area #tab2 dt.select,
.cta_area #tab3 dt.select{ display: inline-block; cursor:pointer; float:left; height:81px; padding:0; margin:0; position:relative; }
.cta_area #tab dt:nth-child(2),
.cta_area #tab2 dt:nth-child(2),
.cta_area #tab3 dt:nth-child(2){ float:right; }
.cta_area #tab dt.capsule,
.cta_area #tab2 dt.capsule,
.cta_area #tab3 dt.capsule{ background:url(https://d2w53g1q050m78.cloudfront.net/itawarushop/uploads/goodby_gluten/img/cta_tag_capsule.png); background-size:100%; }
.cta_area #tab dt.select.capsule,
.cta_area #tab2 dt.select.capsule,
.cta_area #tab3 dt.select.capsule{ background:url(https://d2w53g1q050m78.cloudfront.net/itawarushop/uploads/goodby_gluten/img/cta_tag_capsule_active.png); background-size:100%; width: 49%; }
.cta_area #tab dt.karyu,
.cta_area #tab2 dt.karyu,
.cta_area #tab3 dt.karyu{ background:url(https://d2w53g1q050m78.cloudfront.net/itawarushop/uploads/goodby_gluten/img/cta_tag_karyu.png); background-size:100%; }
.cta_area #tab dt.select.karyu,
.cta_area #tab2 dt.select.karyu,
.cta_area #tab3 dt.select.karyu{ background:url(https://d2w53g1q050m78.cloudfront.net/itawarushop/uploads/goodby_gluten/img/cta_tag_karyu_active.png); background-size:100%; width: 48%; }
.cta_area #tab dd,
.cta_area #tab2 dd,
.cta_area #tab3 dd{ height:auto; padding:0; margin:0; clear:both; position:relative; z-index:10; }
.listArea .cta_btn{ animation: poyopoyo 1s ease-out infinite; position:absolute; bottom:-12.5%; left:4%; width:92%; }
@keyframes poyopoyo {
  0% { transform: scale(1); }
  50% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

.fadein{ opacity: 0; transform: translateY(-20%); transition: 1s; }
.fadein.active{ opacity: 1; transform: translateY(0%); }
.moviein{ opacity: 1; }
.moviein.active{ opacity: 1; }



.fv_area{ position: relative; }
.fv_area .circle{ position:absolute; width:24%; top:8.5%; right:4%; animation: rotate-z 12s linear infinite; }
@keyframes rotate-z {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
}

.develop{ position:relative; }
.develop ul.kokki{ position:absolute; top:3.5%; left:0; width:100%; }
.develop ul::after{ content:""; display:block; clear:both; }
.develop .kokki li:nth-child(1) { float:left; width:41%; }
.develop .kokki li:nth-child(2) { padding:4.5% 1.5%; float:left; width:15%; }
.develop .kokki li:nth-child(3) { float:right; width:41%; }
.develop ul.tokkyo{ position:absolute; bottom:8%; left:0; width:100%; }
.develop .tokkyo li:nth-child(1) { -webkit-transition-delay: 35ms; transition-delay: 100ms; padding-left:8%; float:left; width:48%; }
.develop .tokkyo li:nth-child(2) { -webkit-transition-delay: 70ms; transition-delay: 500ms; padding-right:8%; float:right; width:48%; }
.develop .paper{ position:absolute; bottom:3.5%; left:0; }
.develop .movies{ position:absolute; top:39.25%; width:96%; left:2%; }
.develop .movies .block:nth-child(1){ float:left; margin-left:7.25%; width:40%; padding-bottom:2%; }
.develop .movies .block:nth-child(2){ float:right; margin-right:7.25%; width:40%; }
.develop .movies .block:nth-child(1) p{ width:58%; margin:4% auto; }
.develop .movies .block:nth-child(2) p{ width:98%; margin:4% auto; }

.sns_media_type{ position: relative; }
.sns_media_type .stick{ position:absolute; bottom:46%; right:0; }

.caution .reason{ position:relative; }
.caution .reason .coin{ position:absolute; bottom:26.5%; left:42%; width:17.9%; transform: rotateY(0) translateY(40px); }
.caution .reason .coin.active{ bottom:20.5%; transform: rotateY(360deg) translateY(0); }

@media screen and (max-width: 740px) {
  #maincontents{ width:100%; margin:0 auto; }
  .pc{ display: none; }
  .sp{ display: block; }

  .cta_area #tab,
  .cta_area #tab2,
  .cta_area #tab3{ width: 92.4%; }
  .cta_area #tab dt,
  .cta_area #tab2 dt,
  .cta_area #tab3 dt{ height:9vw; margin:1.5vw 0 0; }
  .cta_area #tab dt.select,
  .cta_area #tab2 dt.select,
  .cta_area #tab3 dt.select{ height:10.5vw; }

  .sns_media_type .stick{ width:32.5%; }
}