@charset "UTF-8";
.button {
  background: red;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px; }

.card {
  border: 1px solid #ddd;
  padding: 1rem;
  background: #fff; }

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  color: #333; }

header {
  text-align: center;
  padding: 0;
  background: none;
  position: fixed;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 60px;
  justify-content: space-between; }
  @media (max-width: 768px) {
    header {
      height: 40px; } }
  header .header_wrap1 img {
    height: 60px; }
    @media (max-width: 768px) {
      header .header_wrap1 img {
        height: 30px; } }
  header .header_wrap2 {
    display: flex;
    flex-direction: row; }
    header .header_wrap2 img {
      height: 60px;
      margin: 1rem; }
      @media (max-width: 768px) {
        header .header_wrap2 img {
          height: 22px;
          margin: 0.4rem; } }

.header_wrap3 {
  display: flex;
  position: absolute;
  flex-direction: row; }
  .header_wrap3 img {
    display: flex;
    position: fixed;
    bottom: 0;
    right: 0;
    flex-direction: row;
    height: 200px;
    width: 200px;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
    .header_wrap3 img:hover {
      transform: translateY(-5px) scale(1.23);
      opacity: 0.85; }
    @media (max-width: 768px) {
      .header_wrap3 img {
        height: 100px;
        width: 100px;
        margin: 0.4rem; } }

footer {
  text-align: center;
  padding: 0;
  background: none; }
  footer .footer_wrap1 {
    display: flex;
    flex-direction: row;
    background-color: #4fc2af;
    justify-content: center;
    align-items: center; }
    footer .footer_wrap1 img {
      width: 40%;
      height: auto; }
    footer .footer_wrap1 a {
      width: 40%;
      height: auto; }
      footer .footer_wrap1 a img {
        width: 100%; }
  footer .footer_wrap2 {
    display: flex;
    flex-direction: row;
    background-color: #ffbf00;
    justify-content: center;
    align-items: center;
    padding: 1rem 0; }
    @media (max-width: 768px) {
      footer .footer_wrap2 {
        flex-direction: column; } }
    footer .footer_wrap2 img {
      width: 30rem;
      padding: 1rem; }

.sale-products {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 1rem;
  justify-content: center; }

.product {
  background: transparent;
  box-shadow: none;
  border: 1px solid #ccc;
  padding: 1rem;
  max-width: 300px; }

.price {
  color: red;
  font-weight: bold; }

.hero {
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  width: 100%;
  height: 100vh;
  padding-bottom: 10rem;
  position: fixed;
  padding: 8rem 0;
  z-index: -10; }
  @media (max-width: 768px) {
    .hero {
      background-image: url("/img/bg.jpg");
      /* 普通の画像1枚でOK */
      background-size: cover;
      background-position: top center;
      background-repeat: no-repeat;
      width: 100vw;
      height: 100vh;
      image-rendering: auto;
      /* ブラウザ任せでOK */
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0);
      /* GPU描画でぼけを軽減 */ } }

.hero-title {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  margin: auto; }

.hero-spacer {
  height: 30rem; }
  @media (max-width: 768px) {
    .hero-spacer {
      height: 22rem; } }

.products {
  /* 白背景を消す */
  padding: 0rem 0rem; }
  .products .container {
    max-width: 1000px;
    margin: 0 auto; }
    .products .container .product-grid1 {
      display: grid;
      flex-wrap: wrap;
      gap: 2rem;
      justify-content: center; }
      .products .container .product-grid1 .product-card1 {
        border-radius: 2px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 2rem;
        width: 100%;
        background-color: white;
        display: flex;
        position: relative;
        flex-direction: row-reverse; }
        @media (max-width: 768px) {
          .products .container .product-grid1 .product-card1 {
            flex-direction: column;
            max-width: 500px; } }
        .products .container .product-grid1 .product-card1 .product-card-wrap1 {
          flex-grow: 1;
          width: 30%;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center; }
          @media (max-width: 768px) {
            .products .container .product-grid1 .product-card1 .product-card-wrap1 {
              width: 80%;
              margin: auto; } }
          .products .container .product-grid1 .product-card1 .product-card-wrap1 .raku {
            height: 4rem; }
        .products .container .product-grid1 .product-card1 .product_name {
          min-height: 1.2rem;
          font-size: 1.6rem;
          font-weight: bold;
          margin: 1rem 0; }
          @media (max-width: 768px) {
            .products .container .product-grid1 .product-card1 .product_name {
              max-width: 20rem; } }
          .products .container .product-grid1 .product-card1 .product_name img {
            /*コレ*/
            width: auto;
            /*コレ*/
            height: 2.4rem;
            display: block; }
        .products .container .product-grid1 .product-card1 .product-card-wrap2 {
          flex-grow: 1;
          width: 70%;
          position: relative; }
          @media (max-width: 768px) {
            .products .container .product-grid1 .product-card1 .product-card-wrap2 {
              width: 100%; } }
          .products .container .product-grid1 .product-card1 .product-card-wrap2 .category_label {
            font-size: 1.6rem;
            font-weight: bold;
            color: #FFF;
            margin: 0;
            padding: .5rem 0.8rem;
            background-color: red; }
          .products .container .product-grid1 .product-card1 .product-card-wrap2 .maker_name {
            height: 2rem;
            margin: 0 1rem; }
            @media (max-width: 768px) {
              .products .container .product-grid1 .product-card1 .product-card-wrap2 .maker_name {
                margin: 1rem 0; } }
            .products .container .product-grid1 .product-card1 .product-card-wrap2 .maker_name img {
              height: 2rem; }
          .products .container .product-grid1 .product-card1 .product-card-wrap2 .product-card-wrap2-1 {
            display: flex;
            align-items: center; }
            @media (max-width: 768px) {
              .products .container .product-grid1 .product-card1 .product-card-wrap2 .product-card-wrap2-1 {
                flex-direction: column;
                align-items: flex-start; } }
          .products .container .product-grid1 .product-card1 .product-card-wrap2 .product-card-wrap2-2 {
            display: flex;
            align-items: center; }
            .products .container .product-grid1 .product-card1 .product-card-wrap2 .product-card-wrap2-2 .product-card-wrap2-2-1 {
              display: flex;
              flex-direction: column; }
              .products .container .product-grid1 .product-card1 .product-card-wrap2 .product-card-wrap2-2 .product-card-wrap2-2-1 p {
                margin: 0;
                display: flex;
                flex-direction: column; }
              .products .container .product-grid1 .product-card1 .product-card-wrap2 .product-card-wrap2-2 .product-card-wrap2-2-1 .modej_number {
                font-size: 0.8rem; }
              .products .container .product-grid1 .product-card1 .product-card-wrap2 .product-card-wrap2-2 .product-card-wrap2-2-1 .original_price {
                font-weight: bold; }
              .products .container .product-grid1 .product-card1 .product-card-wrap2 .product-card-wrap2-2 .product-card-wrap2-2-1 .original_price_cap {
                font-size: 0.8rem; }
            .products .container .product-grid1 .product-card1 .product-card-wrap2 .product-card-wrap2-2 .product-card-wrap2-2-2 {
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
              align-items: flex-start; }
            .products .container .product-grid1 .product-card1 .product-card-wrap2 .product-card-wrap2-2 .discounted_price {
              font-size: 2.4rem;
              color: red;
              font-weight: bold;
              font-family: 'impact';
              line-height: 1.2; }
              .products .container .product-grid1 .product-card1 .product-card-wrap2 .product-card-wrap2-2 .discounted_price span {
                font-size: 2.0rem;
                font-family: 'impact'; }
            .products .container .product-grid1 .product-card1 .product-card-wrap2 .product-card-wrap2-2 .discounted_price_cap {
              font-size: 0.8rem;
              line-height: 1; }
        .products .container .product-grid1 .product-card1 .badge {
          width: 6rem;
          /* バッジ画像のサイズに合わせて調整 */
          height: 6rem;
          background-image: url("../img/badge.png");
          /* PHPはテンプレート内で */
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          position: absolute;
          right: 0;
          top: -1rem;
          display: inline-block; }
          @media (max-width: 768px) {
            .products .container .product-grid1 .product-card1 .badge {
              right: 0;
              top: -4rem; } }
          .products .container .product-grid1 .product-card1 .badge .badge_text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-weight: bold;
            font-size: 1.6rem;
            margin: 0;
            text-align: center;
            color: #F5E828;
            line-height: 0.8;
            text-shadow: -1px -1px 0 #800000, 1px -1px 0 #800000, -1px 1px 0 #800000, 1px 1px 0 #800000;
            /* 下右 */ }
            .products .container .product-grid1 .product-card1 .badge .badge_text span {
              font-size: 1.2rem; }
        .products .container .product-grid1 .product-card1 .badge2 {
          width: 6rem;
          /* バッジ画像のサイズに合わせて調整 */
          height: 6rem;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          position: absolute;
          right: 6rem;
          top: -1rem;
          display: inline-block; }
          @media (max-width: 768px) {
            .products .container .product-grid1 .product-card1 .badge2 {
              right: 0rem;
              top: 2rem; } }
        .products .container .product-grid1 .product-card1 .special {
          width: 6rem;
          /* バッジ画像のサイズに合わせて調整 */
          height: 6rem;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          position: absolute;
          right: 0rem;
          bottom: 0rem;
          display: inline-block; }
          @media (max-width: 768px) {
            .products .container .product-grid1 .product-card1 .special {
              right: 0rem;
              top: 2rem; } }

#usual .hero {
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  display: flex;
  width: 100%;
  height: 100vh;
  padding-bottom: 20rem;
  position: relative;
  z-index: -10; }
  @media (max-width: 768px) {
    #usual .hero {
      background-image: url("/img/bg.jpg");
      /* 普通の画像1枚でOK */
      background-size: cover;
      background-position: top center;
      background-repeat: no-repeat;
      width: 100vw;
      height: 100vh;
      image-rendering: auto;
      /* ブラウザ任せでOK */
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0);
      /* GPU描画でぼけを軽減 */ } }
  #usual .hero div.illustback {
    position: absolute;
    bottom: 0px;
    width: 100%; }
    #usual .hero div.illustback img {
      position: absolute;
      bottom: 0; }
#usual .credo {
  background-color: #A4CD53;
  margin: 0;
  padding: 20px 0px; }
  #usual .credo .credo_wrap {
    background-color: #0081CC;
    width: 800px;
    margin: auto;
    padding: 20px; }
    #usual .credo .credo_wrap .credo_inner {
      background-color: white;
      width: 760px;
      padding: 50px 20px;
      margin: auto;
      border-radius: 24px;
      /* ulタグのデフォルトスタイルをリセット */
      /* liタグにFlexboxを適用 */
      /* ::beforeでマーカーを自作 */
      /* 1行ずつマーカーの色を変える */ }
      #usual .credo .credo_wrap .credo_inner h3 {
        text-align: center;
        color: #0081CC;
        font-size: 2.4em;
        margin: auto;
        padding: 10px 0;
        display: block;
        border-bottom: solid #0081CC 2px;
        width: fit-content;
        font-family: heisei-maru-gothic-std, sans-serif;
        font-weight: 800;
        font-style: normal; }
      #usual .credo .credo_wrap .credo_inner img {
        margin: auto; }
      #usual .credo .credo_wrap .credo_inner ul {
        margin: 0;
        padding: 10px 5em;
        font-family: a-otf-jun-pro, sans-serif;
        font-weight: 300;
        font-style: normal; }
        #usual .credo .credo_wrap .credo_inner ul li {
          font-size: 1.6em; }
      #usual .credo .credo_wrap .credo_inner ul {
        list-style: none;
        /* デフォルトのマーカーを非表示に */ }
      #usual .credo .credo_wrap .credo_inner li {
        display: flex;
        /* Flexboxを有効にする */
        align-items: center;
        /* 中身を上下中央に揃える ★これがポイント */
        margin: 20px auto;
        /* リスト間の余白 */ }
      #usual .credo .credo_wrap .credo_inner li::before {
        content: "●";
        /* 表示するマーカーの形 */
        font-size: 1.5em;
        /* マーカーの大きさ (文字の1.5倍) */
        margin-right: 8px;
        /* マーカーと文字の間の余白 */
        line-height: 1;
        /* 文字の高さとずれないように調整 */
        padding: 0 10px; }
      #usual .credo .credo_wrap .credo_inner li:nth-child(1)::before {
        color: #FF00AA; }
      #usual .credo .credo_wrap .credo_inner li:nth-child(2)::before {
        color: #0091FF; }
      #usual .credo .credo_wrap .credo_inner li:nth-child(3)::before {
        color: #00FF32; }
      #usual .credo .credo_wrap .credo_inner li:nth-child(4)::before {
        color: #FFC800; }
      #usual .credo .credo_wrap .credo_inner li:nth-child(5)::before {
        color: #FF6E00; }
#usual .contents {
  background-color: #A4CD53;
  padding-bottom: 20px; }
  #usual .contents img {
    margin: auto; }
  #usual .contents img.hosptality {
    width: 30rem; }
  #usual .contents p {
    text-align: center;
    font-size: 1.2rem; }
  #usual .contents .bnr-area1 {
    width: 50rem;
    margin: auto; }
  #usual .contents .bnr-area2 {
    width: 800px;
    display: flex;
    margin: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between; }
    #usual .contents .bnr-area2 a img {
      width: 380px;
      margin: 20px auto; }
  #usual .contents .bnr-area1 a,
  #usual .contents .bnr-area2 a {
    display: block;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
    #usual .contents .bnr-area1 a:hover,
    #usual .contents .bnr-area2 a:hover {
      transform: translateY(-5px) scale(1.03);
      opacity: 0.85; }
  #usual .contents .top-video .youtube {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    margin: 2rem auto; }
@media (max-width: 768px) {
  #usual .hero {
    background-attachment: scroll;
    height: 70vh;
    padding-bottom: 10rem;
    justify-content: flex-start;
    padding-top: 60px; }
  #usual .hero-title img {
    max-width: 90%; }
  #usual .contents {
    padding-top: 0; }
    #usual .contents img.hosptality {
      width: 90%;
      max-width: 300px; }
    #usual .contents p {
      font-size: 1rem; }
    #usual .contents .bnr-area1, #usual .contents .bnr-area2 {
      width: 100%; }
    #usual .contents .bnr-area2 {
      flex-direction: column;
      align-items: center; }
      #usual .contents .bnr-area2 a {
        margin: 1rem auto; }
    #usual .contents .bnr-area1 a, #usual .contents .bnr-area2 a {
      width: 90%;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto; }
    #usual .contents .top-video .youtube {
      width: 90%;
      margin: 1rem auto; } }

/* VenoBoxのサイズ指定を最優先させるためのCSS */
.vbox-overlay .vbox-container {
  width: var(--vbox-w, 90%);
  height: var(--vbox-h, auto); }
.vbox-overlay .vbox-content {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important; }

@media (max-width: 768px) {
  .vbox-overlay .vbox-container {
    width: 95% !important;
    height: auto !important; } }
html {
  box-sizing: border-box;
  font-size: 16px; }

*, *::before, *::after {
  box-sizing: inherit; }

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  line-height: 1.6;
  background-color: #fff;
  color: #333; }

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem; }

img {
  max-width: 100%;
  height: auto;
  display: block; }

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem; }
  @media (max-width: 768px) {
    .grid-2 {
      grid-template-columns: 1fr; } }

h1 {
  font-size: 2.5rem; }
  @media (max-width: 768px) {
    h1 {
      font-size: 1.8rem; } }

p {
  font-size: 1rem; }
  @media (max-width: 768px) {
    p {
      font-size: 0.95rem; } }

.acceess {
  background-color: white;
  text-align: center;
  padding: 2rem; }
  .acceess h3 {
    font-size: 1.6rem; }
  .acceess iframe {
    width: 600px;
    height: 400px;
    border: 0; }
    @media (max-width: 768px) {
      .acceess iframe {
        width: 300px;
        height: 200px; } }

.copyright {
  font-size: 0.6rem; }