@charset "UTF-8";
/*このcssはscssにより書き出されています*/
*,
*:before,
*:after {
  -webkit-appearance: none;
}

html {
  height: 100%;
  line-height: 1.8;
}

body {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic;
  overflow-x: hidden;
  background-color: white;
  text-align: center;
}

.f-MB101 {
  font-family: a-otf-gothic-mb101-pr6n, sans-serif;
  font-weight: 300;
  font-style: normal;
}

a,
button {
  cursor: pointer;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  will-change: transform;
  border: none;
  text-decoration: none;
  display: block;
}
a:hover,
button:hover {
  opacity: 0.8;
}

img, svg {
  vertical-align: top;
  max-width: 100%;
  height: auto;
  margin: auto;
}

.u-inner {
  width: 92%;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

@media only screen and (max-width: 1188px) {
  .u-pc {
    display: none;
  }
}

.u-sp {
  display: none;
}
@media only screen and (max-width: 1188px) {
  .u-sp {
    display: block;
  }
}

.js-effect {
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-transform: translate(0, 10px) scale(0.9);
          transform: translate(0, 10px) scale(0.9);
  opacity: 0;
  will-change: transform;
}
.js-effect.is-show {
  -webkit-transform: translate(0, 0) scale(1);
          transform: translate(0, 0) scale(1);
  opacity: 1;
}

.wrapper {
  overflow-x: hidden;
}

.bgWrap {
  background-color: #af1f24;
}

.bg-wh {
  background-color: white;
}

.bg-bw {
  background-color: #6b2700;
}

.contentWrap {
  position: relative;
}
@media screen and (min-width: 751px) {
  .contentWrap {
    padding: 0 3% 5%;
  }
}

#mainVisual {
  position: relative;
}
#mainVisual h1.logo {
  position: absolute;
  left: 2%;
  top: 16px;
  width: min(40%, 206px);
}
@media only screen and (min-width: 751px) {
  #mainVisual h1.logo {
    display: none;
  }
}
@media only screen and (max-width: 750px) {
  #mainVisual h1.logo {
    display: block;
    left: 16px;
    top: 16px;
    right: auto;
    width: min(40%, 206px);
    z-index: 10;
  }
}
#mainVisual .FV {
  width: min(100vh, 100%);
  margin: 0 auto;
}
@media only screen and (max-width: 750px) {
  #mainVisual .mainVisual__ttl {
    width: 101vw;
    margin: 0 calc(50% - 50.5vw);
  }
}
#mainVisual .mainVisual__intro {
  padding: 0;
}
#mainVisual .mainVisual__txt {
  margin-top: 20px;
  padding: 0 4% 20px;
}

#bnr {
  margin: 34px 0 50px;
}
@media only screen and (max-width: 750px) {
  #bnr {
    padding: 0 4%;
    margin-top: 20px;
  }
}

:root {
  --width: 60.5%;
}

#apply {
  padding: 20px 20px 50px;
  background-color: #fccf00;
  position: relative;
}
#apply .stepTtl {
  background-color: #fccf00;
  border-radius: 10px 10px 0 0;
  position: absolute;
  top: -36px;
  left: 10px;
  width: 132px;
  height: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (max-width: 750px) {
  #apply .stepTtl {
    width: 106px;
    top: -26px;
  }
}
#apply .stepTtl img {
  max-width: 80px;
}
@media only screen and (max-width: 750px) {
  #apply .stepTtl img {
    max-width: 66px;
  }
}
#apply ul.step {
  margin-bottom: 24px;
}
@media screen and (min-width: 751px) {
  #apply ul.step {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
#apply ul.step li {
  text-align: left;
}
#apply ul.step li .step1 {
  padding-bottom: 14px;
}
@media screen and (min-width: 751px) {
  #apply ul.step li .step1 {
    width: 72%;
    max-width: 353px;
  }
}
#apply ul.step li .step2 {
  border-top: 2px solid black;
  padding-top: 14px;
}
@media only screen and (max-width: 750px) {
  #apply ul.step li .step2 {
    border-bottom: 2px solid black;
    padding-bottom: 14px;
  }
}
@media screen and (min-width: 751px) {
  #apply ul.step li .step2 {
    max-width: 484px;
  }
}
#apply ul.step li .step3 {
  border-bottom: 2px solid black;
  padding-bottom: 24px;
  padding-left: 4px;
}
@media only screen and (max-width: 750px) {
  #apply ul.step li .step3 {
    padding-top: 14px;
  }
}
@media screen and (min-width: 751px) {
  #apply ul.step li .step3 {
    max-width: 335px;
  }
}
#apply ul.step li .step4 {
  padding-top: 14px;
  padding-left: 4px;
}
@media screen and (min-width: 751px) {
  #apply ul.step li .step4 {
    max-width: 335px;
  }
}
@media screen and (min-width: 751px) {
  #apply ul.step li:first-child {
    width: var(--width);
    border-right: 2px solid black;
    padding-right: 8px;
    margin-right: 8px;
  }
}
@media screen and (min-width: 751px) {
  #apply ul.step li:last-child {
    width: calc(100% - var(--width));
  }
}
#apply ul.step li img {
  width: 100%;
}
#apply .btn {
  margin-top: 20px;
}
#apply .btn img {
  -webkit-filter: drop-shadow(4px 6px 6px rgba(0, 0, 0, 0.25));
          filter: drop-shadow(4px 6px 6px rgba(0, 0, 0, 0.25));
}

@media only screen and (max-width: 750px) {
  #faq {
    width: 100%;
  }
}
@media screen and (min-width: 751px) {
  #faq .faq_inner {
    padding: 3%;
  }
}
#faq .contentWrap {
  padding: 4%;
}
@media screen and (min-width: 751px) {
  #faq .contentWrap {
    background-color: white;
    padding: 2%;
  }
}
@media screen and (min-width: 751px) {
  #faq ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
#faq ul li {
  margin-bottom: 24px;
}
@media screen and (min-width: 751px) {
  #faq ul li {
    width: 49%;
    background-color: #6b2700;
    padding: 4px 12px 24px 4px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-bottom: 16px;
  }
}
@media screen and (min-width: 751px) {
  #faq ul li:first-child {
    padding: 10px;
  }
}
@media only screen and (max-width: 750px) {
  #faq ul li:first-child {
    margin-bottom: 10px;
  }
}

footer {
  padding: 40px 0;
}
@media only screen and (max-width: 750px) {
  footer {
    background-color: #6b2700;
    border-top: 1px solid white;
  }
}
footer .copy {
  color: white;
  font-size: 12px;
}

#page-top {
  position: fixed;
  bottom: 15px;
  left: 20px;
  font-size: 14px;
  line-height: 1;
  z-index: 99;
}
@media only screen and (max-width: 750px) {
  #page-top {
    left: inherit;
    right: 10px;
    bottom: 66px;
  }
}

#page-top a {
  width: 90px;
  height: 90px;
  background: url(../images/top.png) no-repeat center center;
  background-size: contain;
  display: block;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media only screen and (max-width: 750px) {
  #page-top a {
    width: 55px;
    height: 55px;
  }
}

#page-top a:hover {
  text-decoration: none;
  opacity: 0.5;
}

@media only screen and (max-width: 750px) {
  #teaser {
    padding: 0 4% 10%;
    margin-top: -20px;
  }
}

.u-pb-5 {
  padding-bottom: 5%;
}

/* =========================================================
   LP adjustments (index - コピー.html)
   Scope: body.lp-thegyu
   ========================================================= */
body.lp-thegyu {
  background-color: #000;
}

body.lp-thegyu .bgWrap {
  background-color: #000;
}

body.lp-thegyu .bg-wh {
  background-color: #000;
  background-image: none !important;
}

/* PC版のメインビジュアル画像内にロゴがあるため、別ロゴはPCでは非表示 */
@media screen and (min-width: 751px) {
  body.lp-thegyu #mainVisual h1.logo {
    display: none;
  }
}

/* メインエリア背景 */
body.lp-thegyu #mainVisual {
  background-color: #000;
}

/* FVの横幅制限を解除してセンターエリアいっぱいに表示 */
body.lp-thegyu #mainVisual .FV {
  width: 100%;
}

/* mainVisual_introの左右余白をなくす＋動画の埋め込み */
body.lp-thegyu #mainVisual .mainVisual__intro {
  padding: 0;
  position: relative;
}

/* intro〜次セクション間の“黒いスジ”対策（余白を完全に排除） */
body.lp-thegyu #mainVisual .mainVisual__txt {
  margin-top: 0 !important;
  padding: 0 !important;
}
body.lp-thegyu #mainVisual .mainVisual__txt img {
  display: block;
  width: 100%;
}

body.lp-thegyu #mainVisual .mainVisual__intro > img {
  width: 100%;
  display: block;
}

/* YouTube */
body.lp-thegyu #mainVisual .mainVisual__movie {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6%;
  box-sizing: border-box;
  z-index: 2;
  pointer-events: none;
}

body.lp-thegyu #mainVisual .mainVisual__movie iframe {
  width: min(100%, 720px);
  aspect-ratio: 16 / 9;
  border: 0;
  pointer-events: auto;
}

@media only screen and (max-width: 750px) {
  body.lp-thegyu #mainVisual .mainVisual__movie {
    padding: 8% 6%;
  }
  body.lp-thegyu #mainVisual .mainVisual__movie iframe {
    width: 100%;
  }
}

/* PCメイン画像左上ロゴにリンクを貼る（透明のリンクエリア） */
body.lp-thegyu #mainVisual .mainVisual__logoLink {
  display: none;
}

@media screen and (min-width: 751px) {
  body.lp-thegyu #mainVisual .mainVisual__logoLink {
    display: block;
    position: absolute;
    top: 18px;
    left: 18px;
    width: min(38%, 240px);
    height: 64px;
    z-index: 10;
  }
}

/* spoon以降に背景画像 */
body.lp-thegyu .contentWrap {
  background-image: url(../images/mainVisual_background.png);
  background-repeat: repeat-y;
  background-position: top center;
  background-size: cover;
}

/* PC/Tabletでも画像が左右いっぱいになるよう、既存paddingを無効化 */
body.lp-thegyu .contentWrap {
  padding: 0 !important;
}

/* “おすすめトッピング”含む長尺画像をフル幅で表示 */
body.lp-thegyu #mySpoon img,
body.lp-thegyu #apply picture img {
  display: block;
  width: 100%;
  margin: 0;
}

/* このLPでは#applyの黄色背景を使わず、背景画像を見せる */
body.lp-thegyu #apply {
  background-color: transparent;
}


/* ===== NeFe adjustments (SP u-inner full width) ===== */
@media only screen and (max-width: 750px) {
  body.lp-thegyu .u-inner {
    width: 100%;
    max-width: none;
  }
  /* mainVisualテキスト画像もフル幅に */
  body.lp-thegyu #mainVisual .mainVisual__txt {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.lp-thegyu #mainVisual .mainVisual__txt img {
    display: block;
    width: 100%;
  }
  /* applyは外側はフル幅、内側の余白だけ維持 */
  body.lp-thegyu #apply {
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
  }
}

/* Footer copyright background */
body.lp-thegyu footer {
  background-color: #000 !important;
  border-top: none !important;
  padding: 0 !important;
}
body.lp-thegyu footer .copy {
  margin: 0;
  padding: 40px 0;
}


/* v7: SP header logo area (reserve space; no overlap) */
@media screen and (max-width: 750px){
  body.lp-thegyu #mainVisual h1.logo{
    display:block;
    position:static; /* remove overlay */
    width:100%;
    margin:0;
    padding:12px 16px;
    background:#000;
    box-sizing:border-box;
    z-index:auto;
    line-height:0;
  }
  body.lp-thegyu #mainVisual h1.logo a{
    display:inline-block;
  }
  body.lp-thegyu #mainVisual h1.logo img{
    display:block;
    width:auto;
    height:24px; /* keeps area based on logo height */
  }
  body.lp-thegyu #mainVisual .mainVisual__img{
    margin-top:0;
  }
}