@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; } }

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; } }

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; }