@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');

:root {
  --tomato: #B31F24;
  --cheese: #F8E15A;
  --lettuce: #578835;
  --buns: #DC8210;
  --meet: #9E6011;
  --dark: #333;
  --gray: #999;
  --light-gray: #e2e0e0;
  --light: #fff;

}
/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,li {
  list-style: none;
}
a {
  text-decoration: none;
}
a:hover,
a:active {
  opacity: 0.6;
}
p {
  color: #333;
}
img {
  width: 100%;
}
/* 全体 */
body{
    width: 100%;
    line-height: 1.6;
  /* background: var(--tomato); */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", YuGothic, "Yu Gothic", "Noto Sans", Meiryo, sans-serif;
      }
b, strong, .bold{
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
  "Hiragino Sans", YuGothic, "Yu Gothic", "Noto Sans", Meiryo, sans-serif;
}

/* tab/pc */
@media screen and (min-width:600px) {
  /* about */
.container.-about-container {
    width: calc(100% - 20%);
    padding: 100px 0;
    /* background-image: url(../images/bg_hb-black.png); */
    /* background-repeat: no-repeat; */
    /* background-size: 100%; */
    /* background-position: center; */
}
.content_about {
  width: 100%;
  max-width: 1000px;
  margin-bottom: 40px;
  text-align: center;
}
  .contact_block {
    width: 60%;
    margin: 0 auto;
  }
}
@media screen and (min-width:768px) {
    .sp-only {
        display: none;
      }
      .pc-only {
        display: block;
      }
    h2 img {
        width: auto;
        height: 126px;
        margin-bottom: 60px;
    }
    h3 img {
        width: auto;
        height: 36px;
        margin-bottom: 40px;
    }
    h2,h3,h4 {
      text-align: center;
    }
    section {
      padding: 80px 0;
      margin: 0 auto;
    }
    
    .container {
      /* width: calc(100% - 10%); */
      margin: 0 auto;
      padding: 100px 50px;
      box-sizing: border-box;
    }
    .box_tomato {
        width: calc(100% - 2vw);
        background: var(--light);
        border: 10px solid var(--tomato);
        border-radius: 80px;
        padding: 40px 0;
        box-sizing: border-box;
    }

  /* menu */
  .menu {
    width: 100%;
  }
  .content_menu {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    gap: 3vw;
  }
  .content_menu-card {
    width: calc((100% - 3vw) / 2);
  }
  .wrapper-comtent_menu div {
  }
  .wrapper-comtent_menu {
    flex-direction: column-reverse;
  }
  .shop-price {
    font-size: 1rem;
  }
  .shop-price .menu-ttl {
    text-align: left;
  }
  .shop-txt {
    font-size: 1rem;
  }
  .annotation {
    padding: 1em;
  }
  .annotation p {
    font-size: 1rem;
  }

/* about */
.main-ttl {
  font-size: 1.4rem;
}
.sub-ttl {
  font-size: 1.2rem;
  
}
.sub-ttl.-yellow {
  font-size: 1.4rem;
}
.discretion {
  font-size: 1.0rem;
}
    /* satacoco */
    .ttl_wrap {
      padding-left: 40px;
      padding-bottom: 24px;
      display: inline-block;
    }
    .satacoco-ttl {
      width: 100%;
      /* bubbleと同じ幅 */
      color: var(--light);
      font-size: 2.4rem;
      line-height: 1.6;
      font-weight: bold;
      border-bottom: dotted 6px var(--cheese);
    }
    /* satacoco */
    .satacoco .ttl_wrap {
      width: 100%;
    }
    .satacoco .ttl_wrap figure {
      max-width: 400px;
    }
    .satacoco_wrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    .cast_images figure {
      padding-left: 10%;
    }
    .bubble {
      position: relative;
      display: inline-block;
      width: 65%;
      padding: 40px;
      background: var(--light);
      border-radius: 30px;
    }

    .bubble:before {
      content: "";
      position: absolute;
      top: 40%;
      left: 91%;
      border-left: 2em solid transparent;
      border-right: 2em solid transparent;
      border-bottom: 4em solid var(--light);
      transform: rotate(-60deg);
    }
    .bubble p {
      font-weight: bold;
      font-feature-settings: "palt";
      letter-spacing: 0.25rem;
    }
    .cast_images {
      max-width: 30%;
      width: 240px;
      height: 240px;
      /* padding-left: 60px; */
      background: url(../images/img_cast.png);

    }
    /* movie */ 
    .movie_card_block {
      width: 90%;
      max-width: 1000px;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      gap: 4vw;
    }
    .movie_card p {
      font-weight: bold;
      line-height: 1.8;
    }
    .movie_card figure {
      margin-bottom: 8px;
    }
    /* access */
  .access_block {
      width: 90%;
      max-width: 1000px;
      margin: 0 auto;
      gap: 2vw;
  }
  .access_wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .access_left_block {
    flex: 1;
  }
  .access_right_block {
    flex: 1;
  }
  .spo-logo_block-row {
    padding: 0 5%;
  }
  .h2-menu img  {
    height: 80px;
  }
  .access dt {
    font-size: 1.2rem;
  }

  .access dd {
    font-size: 1.0rem;
  }
  .access .traffic::before {
    content: '〇';
    padding-right: 0.5em;
  }

}

@media screen and (min-width:800px) {
  .tab-only {
    display: none;
  }
}

@media screen and (min-width:1000px) {
    .box_tomato {
      padding: 100px 0;
      border-radius: 100px;
  }
  
    /* header */
/* 横並びのメニューを768px以上の画面幅で適用 */
  .Nav {
    position: static;
    width: auto;
    height: auto;
    background-color: transparent;
    color: var(--dark);
    transform: none;
    display: flex;
    align-items: center;
  }

  .Nav-List {
    display: flex;
    padding: 0;
  }

  .Nav-List-Item {
    border: none;
    padding: 0 16px;
    width: auto;
  }
  /* .Nav-List-Item a::after {
    content: '★';
    padding: 0 10px;
  } */

  .Nav-List-Item a {
    color: var(--light);
    font-weight: bold;
    text-decoration: none;
  }
/* 余白部分をグレーで透過 */
  .Overlay {
    display: none;
  }

  /* ハンバーガーボタンを非表示 */
  .Button {
    display: none;
  }

  /* SNSリンクをメニューに横並びで追加 */
  .sns_link {
    display: none;
  }

  /* main-visual */
  .main-visual {
    background: var(--buns);
    background-image: url(../images/bg_halftone.png);
    background-repeat: repeat-x;
    background-size: 100%;
    padding: 8px;
  }
  .box-mainvisual,
  .box-collabo {
    max-width: 1200px;
    margin: 0 auto;
  }

    /* grid */
    .mv_parent {
      display: grid;
      grid-template-columns: 1fr 1fr; /* 左右半分 */
      grid-template-rows: 1fr auto auto; /* 上から順に: 左右均等、下は自動調整 */
      gap: 0; /* 各ブロック間のスペース */
    }
    
    .mv_left_block {
      grid-column: 1 / 2; /* 左側半分 */
      grid-row: 1 / 4;    /* 左側を上下3段にわたる */
    }
    
    .mv_left_block img {
      height: 100%; /* 左側の画像の高さを全体に合わせる */
      object-fit: cover;
    }
    
    .mv_right_block {
      grid-column: 2 / 3; /* 右側上半分 */
      grid-row: 1 / 2;
      display: flex; /* 画像を横並びに配置 */
      gap: 0;
    }
    
    .mv_right_block-second {
      grid-column: 2 / 3; /* 右側下半分 */
      grid-row: 2 / 3;
      display: flex; /* 画像を横並びに配置 */
      gap: 0;
    }
    
    .mv_right_block-third {
      grid-column: 2 / 3; /* 右側の一番下に配置 */
      grid-row: 3 / 4;
      justify-content: center; /* 画像を中央揃え */
    }
    
    .mv_right_block-third img {
      /* 高さ100pxに固定 */
      /* height: 100px;  */
      width: 100%; /* 幅は自動調整 */
    }
    
    .main-visual figure img {
      border-radius: 0;
      object-fit: cover;
      height: 100%;
    }
    
    .mv_right_block figure, .mv_right_block-second figure {
      flex: 1; /* 各画像が均等に伸縮する */
    }
    
  
  /* menu */
  .menu {
    width: 100%;
    /* max-width: 1280px; */
    padding: 0;
  }
  .content_menu-card {
    width: calc((100% - 3vw) / 2);
  }
  .wrapper-comtent_menu {
    flex-direction: row;
  }

  /* about */
  .container.-about-container {
    width: calc(100% - 30%);
    padding: 100px 0;
    background-size: 80%;
    padding: 100px 0;
  }
  .content_about {
    width: 100%;
    max-width: 1000px;
    height: auto;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 80px;
  }
  .content_about p {
    margin-bottom: 24px;
  }
  .main-ttl-one,
  .main-ttl-two  {
    font-size: 1.6rem;
    line-height: 3;
  }
  .sub-ttl {
    font-size: 1.4rem;
    
  }
  .sub-ttl.-yellow {
    font-size: 1.6rem;
  }
  .discretion {
    font-size: 1.2rem;
  }
  /* satacoco */
    .container.-satacoco-container {
      width: 100%;
      max-width: 1100px;
    }
    .satacoco_wrapper {
      align-items: unset;
    }
    .cast_images figure {
      padding-left: 10%;
    }
    .bubble {
        width: 70%;
    }
    .bubble:before {
      left: 93%;
    }
    .cast_images figure {
        padding-top: 0;
    }
    /* sponcer */
    .container.-sponcer-container {
      max-width: 1100px;
    }
    /* contact */
    .contact_block {
    width: 100%;
    max-width: 600px;
  }
    /* menuへ戻るボタン */
    .pagemenu {
      cursor: pointer;
      position: fixed;
      right: 24px;
      bottom: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
      max-width: 200px;
      height: auto;
      transition: .3s;
    }
    .pagemenu:hover,
    .pagemenu:active {
      opacity: 0.6;
    }
  }
@media screen and (min-width:1500px) {
    .content_menu {
      gap: 2vw;
    }
    .content_menu-card {
      width: calc((100% - 4vw) / 3);
      padding: 16px;
      background: linear-gradient(128deg, rgba(252, 194, 0, 1) 0%, rgba(232, 155, 0, 1) 100%);
      position: relative;
    }
    .shop-ttl {
        font-size: 2.5rem;
    }
}