@charset "utf-8";
/* ===== フォント変数 ===== */
:root{
  --heading-font:
    "YuMincho", "游明朝", "Yu Mincho",          /* Windows */
    "Hiragino Mincho ProN", "Hiragino Mincho Pro", /* macOS */
    "Noto Serif JP", serif;                     /* Fallback */
}


    /* =======================================
       全体の共通設定
       ======================================= */
    *, *::before, *::after {
      box-sizing: border-box; /* レイアウト崩れ防止 */
    }
  /* font-display: swap;文字が真っ白になるのを防ぐ*/
    body {
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
			 font-display: swap;
      line-height: 1.7;
      color: #F5F5F5; /* 文字は明るいオフホワイト */
      background: #071624; /* デザインカンプの濃紺背景に近い色 */
    }

    h1, h2, h3, h4, h5, h6, p {
      margin: 0; /* ブロック要素のデフォルト余白をリセット */
    }

    a {
      color: inherit; /* ボタン以外のリンクは文字色を継承 */
      text-decoration: none;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block; /* 下に余白ができるのを防止 */
    }

    .container {
      width: 90%;
      max-width: 820px; /* レイアウトを中央寄せで見やすく */
      margin: 0 auto;
    }

/*     =======================================
       １）タイトル(はじめての世界のビール) 画像貼り付け 
       ======================================= */
      /* 画像 */
		.titlephoto{
			width: 800px;
			max-width: 90%;
			height: auto;
			margin: 0 auto 24px;
			display: block;
		}
   /* 中央寄せ */
	.titleblock{
 	 display: flex;
 	 justify-content: center;
 	 align-items: center;
 	 flex-direction: column;
	}


    /* =======================================
       ２）ビール紹介リスト 一部画像貼り付け
       ======================================= */
/* マージン１との間隔150px*/
    .beer-list {
      margin: 150px 0 60px;
    }
    .beer-item {
      display: flex;
      gap: 0px;
      margin-bottom: 100px;
      align-items: flex-start;
    }
		/*↑align-items: flex-start;上部で揃える指定 */

    .beer-item img.flag {
      width: 150px; /* 商品画像の固定幅 */
      flex-shrink: 0;
    }

		/* 商品名 */
    .beerlist-product-name {
		 font-family: var(--heading-font);
      font-weight: 700;
      font-size: 1.8rem;
      color: #F5EAC2;
      margin-bottom: 10px;
    }


    /* =======================================
       3)ビールの魅力（Feature）画像貼り付け
       ======================================= */
/* マージン2との間隔150px*/
    .feature {
      margin: 150px 0;
    }

    .feature-heading {
      font-size: 1.6rem;
      color: #F5EAC2;
      margin-bottom: 16px;
    }

    .feature-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 16px;
      align-items: center;
    }

    /* =======================================
       ４）CTA（スターターセットを購入してみる）
       ======================================= */
/* パディング3との間隔150px*/
    .cta {
      text-align: center;
      padding: 150px 0;
    }
 /* スターターセットを購入してみる */
    .cta-title {
      font-size: 3rem;
      color: #F5EAC2;
      margin-bottom: 24px;
    }
 /* 今すぐ購入するボタン */
    .cta-btn {
      display: inline-block;
      background: #F5EAC2;
      color: #071624;
      padding: 16px 48px;
      font-size: 1.1rem;
      font-weight: bold;
      border-radius: 4px;
      transition: opacity 0.3s ease;
    }
		 /* カーソルが乗っている間、不透明度を 0.85 に変更するという宣言 */
    .cta-btn:hover {
      opacity: 0.85;
    }

    /* =======================================
       ５）レビュー（Testimonials）画像貼り付け
       ======================================= */
/* マージン４との間隔150px*/
    .reviews {
      margin: 150px 0;
    }
/* ← 横並び→縦並び flex-direction:column;*/
/*  中央寄せ align-items:center;  */
    .review-item {
      display: flex;
			flex-direction:column;
      gap: 16px;
      margin-bottom: 24px;
      align-items: center;
    }
/*  画像サイズと画像枠線  */
    .review-item img.avatar {
      width:300;
      height:300px;
     border: 2px solid #F5EAC2;
 
    }



    /* =======================================
       ６）FAQ
       ======================================= */
    .faq {
      margin: 80px 0 60px;
    }

    .faq-item {
      margin-bottom: 20px;
    }

    .faq-item-q {
      font-weight: 700;
      color: #F5EAC2;
    }

    /* =======================================
       ７）ご利用ガイド
       ======================================= */
    .guide {
      margin: 60px 0;
    }

    /* =======================================
       ８）フッター
       ======================================= */
    footer {
      text-align: center;
      font-size: 0.875rem;
      padding: 40px 0 60px;
      color: #8A98A6;
    }
		footer p{
 			 font-size: 0.8em;      /* 例: 0.8 × 14px = 11.2px */
 			 color: #999;
 			 margin: 0;             /* 余計な余白をリセット */
				}

    /* =======================================
       メディアクエリ（スマホ向けの調整例）
       ======================================= */
    @media (max-width: 600px) {
      .hero-title {
        font-size: 1.6rem;
        padding: 0.75rem 1.5rem;
      }

      .beer-item {
        flex-direction: column;
        align-items: flex-start;
      }

      .beer-item img.flag {
        margin-bottom: 12px;
      }
    }
/**/