/* 全体設定 */
body {

    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0ece5;
    font-family: "Zen Kaku Gothic New", serif;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    scroll-behavior: auto; /* ← これにしてみる（競合防止） */
}
@font-face {
    font-family: "Nocturne Serif Light";
    src: url("fonts/nocturne-serif-light.woff2") format("woff2"),
         url("fonts/nocturne-serif-light.woff") format("woff"),
         url("fonts/nocturne-serif-light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}
.title {

    text-align: center; /* 中央寄せ */
    padding-top: 20px;
    margin: 0 auto; /* 左右中央に配置 */
    display: block; /* 幅を確保 */
    width: 100%; /* 横幅いっぱい */
	color: #9d5c3a;


}

.title2 {
    font-size: 45px;
font-family: "Nocturne Serif Light", serif;
	font-weight: 350;
    text-align: center; /* 中央寄せ */
    padding-top: 20px;
    margin: 0 auto; /* 左右中央に配置 */
    display: block; /* 幅を確保 */
    width: 100%; /* 横幅いっぱい */
	color: #fff;
	font-weight: 100;
}
.title2-2 {
    font-size: 20px;
    font-family: "Zen Old Mincho", serif;
    text-align: center; /* 中央寄せ */
    padding-top: 0px;
    margin: 0 auto; /* 左右中央に配置 */
    display: block; /* 幅を確保 */
    width: 100%; /* 横幅いっぱい */

	font-weight: 100;
}

.moji_mincho {
    color: #fff;
    font-family: "Zen Old Mincho", serif;
}
.moji_big {
    color: #fff;
    font-size: 130%;
}

/* PC版のメイン画像 */
.pc-main {
    position: relative;
    width: 100%;
    max-width: 3000px; /* 必要に応じて調整 */
}

.pc-bg {
    width: 100%;
    display: block;
}

.pc-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 249px; /* 必要に応じて調整 */
}

.pc-logo-top {
    position: absolute;
    top: 10px;
    left: 10px;

}


/* セクションの調整 */
.section-container,
.bottom-section {
    margin: 0;
    padding: 0;
}

.section-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 50px 0;
    margin-top: 3vh;
    overflow: hidden;
    margin-bottom:0;
}

.section-content {
    width: 100%;
    max-width: 12000px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* テキストエリアを下に配置 */
    position: relative;
    z-index: 2;
margin-bottom: 0;
}

/* テキストエリア：左寄せ、下寄せ */
.text-content {
    width: 50%;
    padding-left: 5%;
    color: #9d5c3a;
    font-weight: 580;
    size:1.6em;
    line-height: 1.8;
    z-index: 2;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* エリア下に寄せる */
    padding-bottom: 150px;

}

/* 画像エリア：右寄せ */
.image-wrapper {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.image-content img {
    max-width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
}

/* 背景エリア（画像の背面に設置） */
.image-background {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* ページ横幅いっぱい */
    height: 20vh; /* 画面の50%の高さ */
    background-color: #9d5c3a;
    z-index: 1; /* 画像とテキストの背面 */
}




/* スマホレイアウト */
@media (max-width: 768px) {
    .section-content {
        flex-direction: column;
        align-items: left;
        text-align: left;
    }
    .text-content {
        width: 98%;
        padding: 20px;
        text-align: left;
        padding-bottom: 20px;
    }
    .image-wrapper {
        width: 100%;
        justify-content: right;
    }
    .image-content img {
        width: 100%;
        max-width: 350px;
        padding-right: 0%;
    }
    .image-background {
        height: 40vh; /* スマホでは少し小さめに */
    }
}


.bottom-section {
    margin: 0px;
    width: 100%;
    background: #9d5c3a;
    color: #fff;
    text-align: center;
    padding: 40px 0; /* 必要なら調整 */

}
.bottom-section p {
    font-size: 18px;
    margin-bottom: 20px;

}

.cta-button {
    background: #fff;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 320px;             /* ← 横幅を広くする（元260px） */
    padding: 20px 40px;           /* ← 左右paddingを増やす */
    color: #9d5c3a;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    text-decoration: none; /* aタグのデフォルトの下線を削除 */
				font-weight: 800;
}

.cta-button:hover {
    background: #525151;
    color: #fff;
				font-weight: 800;
}

.cta-button::after {
    content: '';
    width: 9px;
    height: 9px;
    border-top: 2px solid #9d5c3a;
    border-right: 2px solid #9d5c3a;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;     
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}

.cta-button:hover::after {
    border-color: #fff;
}


/* スマホ版 */
.mobile-main {
    width: 100vw;
    height: 640px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* メイン画像（スマホ版） */
.slide-image {
    height: 640px;
    width: 1280px; /* 横幅を固定 */
    object-fit: cover;
}

/* 中央に配置するロゴ */
.mobile-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px; /* ロゴのサイズは適宜調整 */
}

/* 左上に配置するロゴ */
.mobile-logo-top {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 150px; /* ロゴのサイズは適宜調整 */
}



/* PC版とスマホ版の表示切り替え */
@media (max-width: 768px) {
    .pc-main {
        display: none;}


}
@media (min-width: 769px) {
    .mobile-main {
        display: none;
    }
}

.mobile-main {
    width: 100vw;
    height: 640px;
    overflow: hidden;
    position: relative;
}

.slider {
    width: 1280px; /* 画像1枚分の幅に調整 */
    height: 640px;
    display: flex;
    transition: transform 8s ease-in-out;
}

.slide-image {
    height: 640px;
    width: 1280px; /* 固定サイズ */
    object-fit: cover;
}

/* スライドアニメーション */
@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-300px); } /* 1枚分スライド */
}

/* スマホでスライドを適用 */
@media (max-width: 768px) {
    .slider {
        animation: slide 8s linear forwards;
    }
}

/* ハンバーガーメニュー */
.menu-container {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
	    overflow: visible; /* 画像を隠さない */
}

/* ハンバーガーメニュー */
.hamburger {
    width: 30px;
    height: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
    z-index: 1100;
    margin:10px 20px;
}

.hamburger span {
    display: block;
    height: 1px;
    width: 100%;
    background: #f0ece5;
    transition: 0.3s;
}

/* メニューが開いたときのハンバーガーメニュー */
.hamburger.open span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}


/* メニュー本体 */
.menu {
  position: fixed;
  inset: 0;                 /* top/right/bottom/left を全部0 */
  width: 100dvw;            /* ビューポート幅いっぱい */
  height: 100dvh;           /* ← 80vh をやめて全画面に */
  background: rgba(157, 92, 58, 0.9);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
  overflow-y: auto;         /* メニュー内が長い時にスクロール */
}

.menu.active {
    transform: translateX(0);
}

.menu-logo {
    width: 150px;
    margin-bottom: 20px;
}

/* メニューのリスト */
.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.menu ul li {
    margin: 10px 0;
    text-align: left; /* 左寄せ */
}

.menu ul li a {
    text-decoration: none;
    color: #f0ece5; /* 文字色 */
    font-size: 18px;
    display: block;
    padding: 5px 15px;
}

/* メニュー内のアイコン配置 */
/* メニューアイコン配置 */
.menu-icons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
}
.instagram-icon {
    margin-left: 0; /* 左寄せ */
}
.start-icon {
    margin-left: auto;
    margin-right: 60px; /* 画面から切れないよう調整 */
}

/* "with Wine とは？" セクション */
.with-wine-section {
    background-color: #f0ece5;
    padding: 50px 20px;
    text-align: center;
    margin-top: 40px;
}

.with-wine-section h2 {
    font-family: "Zen Kaku Gothic New", serif;
    font-size: 24px;
    color: #9d5c3a;
    margin-bottom: 40px;
}

/* スクロール時の固定帯 */
.menu-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* 高さは適宜調整 */
    background-color: #9d5c3a;
    z-index: 800; /* 他の要素より低く設定 */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.menu-bar.active {
    opacity: 1;
}

.logo-overlay {
    position: fixed;

    z-index: 801; /* 他の要素より低く設定 */

}


/* コンテンツエリア */
.with-wine-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;


}

.center-line {
    border: none;
    border-top: 1px solid white;
    width: 80%;        /* ページ中央、左右に余白 */
    margin: 30px auto; /* 上下マージン30px、左右中央寄せ */
  }

  
/* 画像コンテナ */
.wine-box03 {
    width: calc(50% - 10px);
    padding: 20px;
    text-align: center;
    position: relative;
}

.wine-box03 img {

    height: auto;
    border-radius: 5px;
}

.wine-box03 p {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 16px;
    color: #9d5c3a;

}
.wine-box02{
	margin-top: 10px;
	        width: 400px; 
}

/* PC版でランダムに配置 */
@media (min-width: 769px) {
    .with-wine-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        max-width: 1200px;
        margin: 0 auto;
        height: auto;
    }

    .wine-box03 {
        width: calc(50% - 10px); /* 2列に配置 */
        max-width: 450px; /* 画像を少し小さくするためコンテナの幅を狭く */
        padding: 20px;
        text-align: center;
        position: relative;
    }

    /* 画像を小さく */
    .wine-box03 img {
        width: 80%;  /* 画像サイズを少し小さくする */
        height: auto; /* 縦横比を維持 */
        display: block;
        margin: 0 auto; /* 中央配置 */
    }

    /* 1番目の画像を少し上に配置 */
    .wine-box03:nth-child(1) {
      transform: translateY(-50px, 50px);
    }
    /* 2番目の画像を少し下に配置 */
    .wine-box03:nth-child(2) {
		    
     
    }
    /* 3番目の画像を上に配置 */
    .wine-box03:nth-child(3) {
        transform: translate(10px, -250px);
    }
    /* 4番目の画像を少し右下に配置 */
    .wine-box03:nth-child(4) {
        transform: translate(50px, 50px);
    }
	    /* 4番目の画像を少し右下に配置 */
    .wine-box03:nth-child(5) {
        transform: translate(50px, -50px);
    }

}

/* SP版でランダムに配置 */
@media (max-width: 768px) {
    .with-wine-content {
        display: flex;
        flex-direction: column;
       padding: 0px;
        max-width: 100%;
        margin: 0 auto;
    }

    .wine-box03 {
        width: 100%;
        padding: 0px;
        position: relative;
    }

     /* 画像を100%幅にする */
    .wine-box03 img {
		        padding: 0px;
        width: 90%;  /* 親要素の幅いっぱい */
        height: auto; /* 縦横比を維持 */
        display: block; /* 余白を削除 */
        margin-top: 50px;
    }

	
    /* 画像ごとの配置調整 */
   .wine-box03:nth-child(1),
    .wine-box03:nth-child(3),
    .wine-box03:nth-child(5) {
        transform: translate(-20px, 50px);
 
    }
	
		   .wine-box03:nth-child(2),
	   .wine-box03:nth-child(4)
	{
        transform: translate(100px, 50px);
	

    }
}

/* PLAN */
.plans-section {
    padding: 0px;
	margin:  0px;
    background-color: #E9E4D9;
}
.plans-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
		    padding: 25px;
}
.plan {
    text-align: center;
    width: 100%;
    max-width: 500px;

}
.plan_cha {
    color: white;
    padding: 25px;
    border-radius: 15px;
    background: #9d5c3a;
    text-align: center;
}
.plan_cha h3 {
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 1px;
}
.plan_cha2 {
    color: white;
    padding: 25px;
    border-radius: 15px;
    background: #864744;
    text-align: center;
}
.plan_cha2 h3 {
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 1px;
}
.plan-title {
    font-size: 15px;
}
.plan-title2 {
    font-size: 30px;
    padding: 5px;
}
.plan-price {
    font-size: 16px;
    font-weight: normal;
    line-height: 1.6;
}
.price-large {
    font-size: 40px; /* 「3,980」の部分だけ大きく */
    font-family: "Zen Old Mincho", serif;
}
.price-large2 {
    font-size: 20px; /* 「月々」「550円」の部分 */
    font-family: "Zen Old Mincho", serif;
}
.plan-description {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 20px 20px 20px;
	text-align: left;
}
.plan-button {
    display: inline-block;
    padding: 10px 20px;
    background: white;
    color: #9d5c3a;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: 0.3s ease-in-out;
    max-width: 250px;
    margin: 10px auto;
}
.plan-button:hover {
    background: #814c3a;
    color: white;
}
.plan-badge {
    display: inline-block;
    background: white;
    color: #9d5c3a;
    font-size: 15px;
    font-weight: bold;
    padding: 5px 30px;
    border-radius: 15px;
    margin-bottom: 10px;
    letter-spacing: 3px;
}
.plan-themes {
    margin-top: 40px;
    padding: 0px;
    background: white;
    border-radius: 15px;
    color: #9d5c3a;
    text-align: left;
    position: relative;
}
.plan-themes h4 {
    position: absolute;
    top: -40px; /* ボックスの上にはみ出す */
    left: 50%;
    transform: translateX(-50%);
    border-radius: 15px;
    font-weight: bold;
    color: #9d5c3a;
    font-size: 20px;
    white-space: nowrap; /* 改行を防ぐ */
    display: inline-block; /* ボックス内で適切に配置 */
    max-width: 100%; /* ボックスの幅に適応 */
}

.theme-container {
    padding: 10px;
    border-radius: 15px;
}
.theme-list {
    list-style: decimal;
    padding-left: 20px;
    padding-top: 20px;
    color: #474342;
    font-weight: 400; /* 文字を太字にする */
    line-height:2; /* 行間を広げる */
	font-size: 110%;
}
.theme-link {
    display: block;
    margin-top: 10px;
    color: #474342;
    text-align: right;
}

.plans-section_kome {
    font-size: 13px;
    line-height:2.5;
}
@media (min-width: 769px) {
    .plans-container {
        flex-direction: row;
    }
    .plan {
        width: 48%;
    }
}
@media (max-width: 768px) {
    .plans-container {
        flex-direction: column;
    }
    .plan {
        width: 100%;
    }
}


.kome-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 40px ;

    background-color: #E9E4D9;
}

.kome-container {
	  text-align: left;
	    width: 80%;
    max-width: 1000px;

			  font-size: 13px;	
	}

@media (max-width: 768px) {
	.kome-section {
		    padding: 5px ;
	}
	}
/* ギフトセクション */
.gift-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    background-color: #E9E4D9;
}

.gift-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: url('images/gift-bg.jpg') no-repeat center center/cover;
    width: 80%;
    max-width: 800px;
    padding: 20px 100px ;
    border-radius: 10px;
}

/* テキスト */
.gift-text {
    color: white;
    font-size: 30px;
text-align: left;
    font-family: "Zen Old Mincho", serif;
    line-height: 1.6;


}

/* ボタンコンテナ */
.gift-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ボタン */
.gift-button {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    padding: 16px 20px;
    border-radius: 40px;
    background: #fff;
    color: #9d5c3a;
    font-weight: 800;
    font-size: 16px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: 0.3s ease-in-out;
    text-decoration: none;
}

.gift-button:hover {
	    background: #525151;
    color: #fff;

}

.gift-button::after {
   content: '';
    width: 9px;
    height: 9px;
    border-top: 2px solid #9d5c3a;
    border-right: 2px solid #9d5c3a;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 30px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}

.gift-button span {
    font-size: 20px;
    font-weight: bold;

}

.gift-button:hover::after {
    border-color: #fff;
}

/* スマホ用 */
@media (max-width: 768px) {
    .gift-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .gift-text {
        font-size: 25px;
        margin-bottom: 20px;
		text-align: center;
			padding-left: 0;
    }

    .gift-buttons {
        width: 100%;
        align-items: center;
    }

    .gift-button {
        width: 80%;           /* ← 画面幅の80%に調整（狭めに） */
        max-width: 250px;     /* 最大幅は250pxまで */
        margin: 0 auto;       /* 水平方向中央揃え */
        justify-content: center; /* flexの中身も中央に */
      }
}
/* enjoywine */
.enjoywine-section {
    background-color: #9d5c3a;
    padding: 50px 20px;
    text-align: center;

}

/* タイトル */
.enjoywine-title {
    font-size: 32px;
    font-family: "Zen Old Mincho", serif;
    color: white;
    margin-bottom: 40px;
}

/* コンテンツのレイアウト */
.enjoywine-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 各ワイン楽しみ方のブロック */
.enjoywine-item {
    position: relative;
    width: calc(50% - 10px);
    max-width: 500px;
    text-align: center;
}

.enjoywine-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* テキスト部分 */
.enjoywine-text {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: white;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: bold;
    color: #9d5c3a;
    border-radius: 5px;
}

/* スマホ版 */
@media (max-width: 768px) {
    .enjoywine-container {
        flex-direction: column;
    }

    .enjoywine-item {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }

    .enjoywine-text {
        font-size: 12px;
        top: 5px;
        left: 5px;
        padding: 5px 8px;
    }
}

/*with Wineの楽しみ方*/

/* 画像コンテナ */
.wine-box04 {
    width: calc(50% - 10px);
    padding: 20px;
    text-align: center;
    position: relative;
}

.wine-box04 img {

    height: auto;
    border-radius: 5px;
}

.wine-box04 p {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 16px;
    color: #9d5c3a;
    margin-top: 10px;
}


/* PC版でランダムに配置 */
@media (min-width: 769px) {

    .wine-box04 {
        width: calc(50% - 10px);
        max-width: 500px;
        padding: 20px;
        text-align: center;
        position: relative;

    }



    /* 1番目の画像を少し上に配置 */
    .wine-box04:nth-child(1) {
        transform: translate(100px, 0px);

    }
    /* 3番目の画像も少し上に配置 */
    .wine-box04:nth-child(2) {
        transform: translate(200px, 50px);

    }
    /* 番目の画像も少し上に配置 */
    .wine-box04:nth-child(3) {
        transform: translate(-700px, 450px);
    }
    /* 5番目の画像も少し上に配置 */
            .wine-box04:nth-child(4) {
                transform: translate(100px, 50px);
    
            }

}
/* SP版でランダムに配置 */
@media (max-width: 768px) {


    .wine-box04 {
        width: 100%;
        max-width: 500px;
        padding: 10px;
        text-align: center;
        position: relative;
    }

    /* 1番目の画像を少し上に */
    .wine-box04:nth-child(1) {
        transform: translate(-90px, 50px);
        align-self: center; /* 中央揃え */
    }

    /* 2番目の画像を完全に右端に */
    .wine-box04:nth-child(2) {
        transform: translate(60px, 20px);
        align-self: flex-end; /* 右端にぴったり */
		    margin-top: 50px; /* 上に50pxの隙間を作る */
    }

    /* 3番目の画像は中央 */
    .wine-box04:nth-child(3) {
        transform: translate(-90px, 50px);
        align-self: center; /* 中央揃え */
    }

    /* 4番目の画像を完全に右端に */
    .wine-box04:nth-child(4) {
        transform: translate(60px, 50px);
        align-self: flex-end; /* 右端にぴったり */
    }

    /* 5番目の画像を少し上に */
    .wine-box04:nth-child(5) {
        transform: translate(0px, 50px);
        align-self: center; /* 中央揃え */
    }
}
/* with Wineのこだわり */
.wine-commitment {
    background-color: #E9E4D9;
    padding: 60px 20px;
    text-align: center;
}

/* タイトル */
.section-title {
    font-size: 32px;
    font-family: "Zen Old Mincho", serif;
    color: #9d5c3a;
    margin-bottom: 40px;
}

.section-title-sub {
    font-size: 18px;
    font-family: "Zen Old Mincho", serif;
    color: #9d5c3a;
}

/* コンテンツコンテナ */
.commitment-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    margin: 30px auto;
}

/* 各ボックス */
.commitment-box {
    width: 45%;
    background: white;
    border-radius: 0; /* 角丸をなくす */
    overflow: hidden;
    text-align: center;
}

/* 画像部分 */
.commitment-image {
    background: #fff; /* グレーのプレースホルダー */
    height: 250px;
    margin-bottom: 10px ;
}

/* テキスト部分 */
.commitment-text {
    padding: 20px;
	color: #474342;
	    text-align: left;
}

.commitment-text2  {
    font-size: 13px;
    padding: 3px;
	color: #474342;
	    text-align: left;
        padding-bottom: 10px;
}

.commitment-text h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.commitment-text p {
    font-size: 14px;
    line-height: 1.6;
}

/* 説明文 */
.commitment-description {
    margin-top: 40px;
    font-size: 14px;
    color: #9d5c3a;
    line-height: 1.8;
	font-weight: bold;
}

/* CTAボタン */
.commitment-button {
    margin-top: 20px;
}

.cta-button {
  background: #fff;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 260px;
    padding: 20px 25px;
    color: #9d5c3a;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    text-decoration: none; /* aタグのデフォルトの下線を削除 */
				font-weight: 800;
}

.cta-button:hover {
    background: #525151;
}

/* スマホ版 */
@media (max-width: 768px) {
    .commitment-container {
        flex-direction: column;
        align-items: center;
    }

    .commitment-box {
        width: 90%;
    }
}
/* 画像のサイズ調整 */
.commitment-image img {
    width: 100%; /* コンテナの幅いっぱい */
    height: 250px; /* PC版で高さ固定 */
    object-fit: cover; /* 画像を適切にトリミング */
}

/* スマホ版では高さ自動調整 */
@media (max-width: 768px) {
    .commitment-image img {
        height: auto;
    }
}
/* 1文字目の数字 */
.commitment-number{
		color: #474342;
   width: 100%;
 }
.commitment-number::first-letter{
	color: #474342;
   float: left;
   line-height: 1;
   font-size: 310%;
   padding-right: 25px;
 }
ul {
    list-style-type: disc; /* リストマーカーを通常の黒丸に */
    list-style-position: outside; /* マーカーをリスト外に配置（デフォルト） */
    padding-left: 20px; /* 左側の余白を適切に調整 */
    font-size: 14px;
}



.cta-button2 {
    background: #9d5c3a;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 260px;
    padding: 20px 25px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    text-decoration: none; /* aタグのデフォルトの下線を削除 */
				font-weight: 800;
}

.cta-button2:hover {
    background: #525151;
    color: #fff;
				font-weight: 800;
}

.cta-button2::after {
    content: '';
    width: 9px;
    height: 9px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 30px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}

.cta-button2:hover::after {
    border-color: #fff;
}


/* VOICEセクション全体 */
.voice-section {
    background-color: #F7F3EE;
    padding: 50px 20px;
    text-align: center;
}

/* タイトル */
.voice-title {
    font-size: 32px;
    font-family: "Zen Old Mincho", serif;
    color: #9d5c3a;
    margin-bottom: 5px;
}

/* サブタイトル */
.voice-subtitle {
    font-size: 16px;
    font-family: "Zen Old Mincho", serif;
    color: #9d5c3a;
    margin-bottom: 30px;
}

/* コンテナ（PC版で横並び） */
.voice-container {
    display: flex;
    flex-wrap: nowrap; /* 折り返しを防ぐ */
    justify-content: space-between; /* 均等配置 */
    gap: 20px;
    max-width: 1100px; /* 1000pxから少し広げる */
    margin: 0 auto;
}

/* 各ボックス（吹き出し風） */
.voice-box {
    background: white;
    padding: 20px;
    border-radius: 20px;
    text-align: left;
    width: calc(33.333% - 10px); /* 計算を修正 */
    font-size: 14px;
    line-height: 1.8;
    color: #474342;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}


/* 吹き出しの三角部分 */
.voice-box::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 23px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
}

/* スマホ版（縦並びにする） */
@media (max-width: 768px) {
    .voice-container {
        flex-direction: column;
        align-items: center;
    }

    .voice-box {
        width: 90%;
    }
}

/* FAQ セクション */
.faq-section {
    background-color: #F7F3EE;
    padding: 50px 20px;
    text-align: center;
}

/* タイトル */
.faq-title {
    font-size: 32px;
    font-family: "Zen Old Mincho", serif;
    color: #9d5c3a;
    margin-bottom: 5px;
}

/* サブタイトル */
.faq-subtitle {
    font-size: 16px;
    font-family: "Zen Old Mincho", serif;
    color: #9d5c3a;
    margin-bottom: 30px;
}

/* FAQコンテナ */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

/* 各FAQ項目 */
.faq-item {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
}

/* 質問 */
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 16px;

    color: #474342;
}

.faq-q {
    font-weight: bold;
    color: #9d5c3a;
}

.faq-text {
    flex-grow: 1;
    margin-left: 5px;
}

/* プラスマーク（開閉ボタン） */
.faq-toggle {
    font-size: 18px;
    font-weight: bold;
    color: #9d5c3a;
    transition: transform 0.3s ease-in-out;
}

/* 回答（デフォルトで非表示） */
.faq-answer {
    display: none;
    padding: 10px 0;
    font-size: 14px;
    line-height: 1.8;
    color: #474342;
}

/* 開いた時のスタイル */
.faq-item.active .faq-answer {
    display: block;
}

/* ボタン */


.cta-button3 {
    background: #525151;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px auto;
    max-width: 260px;
    padding: 20px 25px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    text-decoration: none; /* aタグのデフォルトの下線を削除 */
				font-weight: 800;
}

.cta-button3:hover {
    background: #9d5c3a;
    color: #fff;
				font-weight: 800;
}

.cta-button3::after {
    content: '';
    width: 9px;
    height: 9px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 30px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}

.cta-button3:hover::after {
    border-color: #fff;
}




/* スマホ対応 */
@media (max-width: 768px) {
    .faq-container {
        max-width: 100%;
    }

    .faq-question {
        font-size: 14px;
    }

    .faq-answer {
        font-size: 13px;
    }
}

/* INSTAGRAMセクション */
.instagram-section {
    background-color: #F7F3EE;
    padding: 50px 20px;
    text-align: center;
    overflow: hidden;
}


/* フッター全体 */
.footer {
  
    width: 100vw; /* ビューポート全体の幅を確保 */
    margin-top:40px ;
    padding: 40px 0;
}

/* フッターコンテナ */
.footer-container {
    max-width: 1200px; /* 中央のコンテンツ幅を制限 */
    margin: 0 auto;
    padding: 0 20px; /* 左右の余白 */
}
/* ロゴ */
.footer-logo img {
    width: 120px; /* 必要に応じて調整 */
    height: auto;
    margin-bottom: 15px;
}

/* Instagram アイコン */
.footer-instagram a img {
    width: 24px;
    height: auto;
    margin-bottom: 15px;
}

/* フッターリンク */
.footer-links {

    font-size: 14px;
    color: #999;
}

.footer-links a {
    color: #999;
    text-decoration: none;
    margin: 0 10px;
}

.footer-links a:hover {
    color: #9d5c3a;
}

.wine-box04 {
    position: relative;
    width: 100%;
    max-width: 300px; /* 必要に応じて調整 */
    height: auto;
    margin-bottom: 20px;
}

.wine-box04 img {
    width: 100%;
    height: auto; /* または例：height: 200px; */
    display: block;
}

.wine-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 10px;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .commitment-number::first-letter {
      font-size: 200%; /* スマホで少し小さく調整 */
      padding-right: 10px;
      float: none;      /* floatを解除することで、折り返しを防ぐ */
      display: inline-block; /* インラインブロックに変更 */
    }
  }

  /* ---------------------
グラス1杯分部分
--------------------- */

 .section04 {
  background-color: #9d5c3a;
  padding: 60px 20px;
  color: #fff;
  text-align: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

.section04-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.section04-text p {
  font-size: 20px; /* 18px → 20px に拡大 */
  line-height: 1.8;
  margin-bottom: 30px;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

.section04-img img {
  width: 200px;
  margin-bottom: 40px;
}

.section04-content-box {
  background-color: #fff;
  border-radius: 16px;
  color: #333;
  padding: 30px 20px;
  max-width: 500px;
  margin: 0 auto;
  font-family: "Zen Kaku Gothic New", sans-serif;
  position: relative; /* 三角形表示のために必要 */
}

.section04-content-box::before {
  content: "";
  position: absolute;
  top: -30px; /* 必要に応じて上に上げる */
  left: 60px; /* 三角の位置（必要に応じて調整） */
  border-style: solid;
  border-width: 0 1px 30px 29px; /* ← 横幅・高さを調整 */
  border-color: transparent transparent #fff transparent;
}


.section04-content-box h3 {
  font-size: 20px; /* 18px → 20px */
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  display: inline-block;
  padding-bottom: 5px;
}

.section04-content-box ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  font-size: 16px; /* 15px → 16px */
  line-height: 1.7;
}

.cards-image {
  width: 100%;
  max-width: 220px;
  margin-top: 10px;
}

  .section04-kome{
    font-size: 12px;
  }


/* ---------------------
   レスポンシブ対応
--------------------- */

@media (min-width: 768px) {
  .section04-text p {
    font-size: 22px; /* 20px → 22px */
  }

  .section04-img img {
    width: 200px;
  }

  .section04-content-box h3 {
    font-size: 22px;
  }

  .section04-content-box ul {
    font-size: 17px;
  }

  .cards-image {
    max-width: 260px;
  }

  .section04-kome{
    font-size: 14px;
  }




}
/* --- 横スクロール＆右余白の根本対策 --- */

/* 1) 画面外にはみ出したら切る（最終防衛ライン） */
html, body { overflow-x: hidden; }

/* 2) 100vwによるズレ回避（モバイルのスクロールバー分の誤差を防ぐ） */
.footer,
.mobile-main { width: 100%; }

/* 3) グローバルではみ出し計算ミスを減らす */
*, *::before, *::after { box-sizing: border-box; }

/* 4) スマホ時に“固定幅/変形”でハミ出す要素を中止・自動伸縮に */
@media (max-width: 768px) {
  /* スライダーは画面幅にフィット */
  .slider { width: 100%; }
  .slide-image { width: 100%; height: auto; }

  /* 画像やカードが transform で右へ飛び出すのを無効化 */
  .wine-box03,
  .wine-box04 {
    transform: none !important;
    margin: 24px auto 0;   /* 中央寄せ */
  }

  /* 念のため、親に隠し枠を付与（万一のはみ出しガード） */
  .with-wine-content,
  .enjoywine-container { overflow: hidden; }

  /* 画像は常にコンテナ内で収まる */
  .image-content img { max-width: 100%; height: auto; }
}

/* --- ハンバーガーメニューのフルスクリーンBGを復旧 --- */
/* 使っていそうなクラス名をまとめて上書き（該当するものだけ効きます） */
.menu-bg,
.drawer-bg,
.hamburger-bg,
.nav-overlay,
.drawer__overlay,
.overlay {
  position: fixed !important;    /* ビューポートに固定 */
  inset: 0 !important;           /* top/right/bottom/left を全部0に */
  width: auto !important;        /* 親幅の影響を受けない */
  height: auto !important;
  inline-size: 100dvw;           /* モバイルのアドレスバーを考慮したviewport単位 */
  block-size: 100dvh;
  z-index: 9999;                 /* 手前に */
  overflow: visible !important;  /* 念のため */
}

/* オーバーレイの中のメニュー本体が右へはみ出していたら */
.menu-panel,
.drawer-panel,
.nav-drawer {
  max-width: 100%;
  transform: none;
}

/* 親の overflow でオーバーレイが切られる場合の保険（想定されるラッパーにだけ） */
.with-wine-content,
.enjoywine-container {
  overflow: visible;
}

/* PLAN内のボタンだけを確実に上書き */
.plans-section .plan_cha .cta-button {
  max-width: 340px;               /* 横長に */
  padding: 18px 56px 18px 24px;   /* → 右側を広めにして矢印の分を確保 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;                       /* 文字と矢印の視覚的余裕（保険） */
}

/* 矢印の位置も合わせて調整 */
.plans-section .plan_cha .cta-button::after {
  right: 20px;                    /* 30px → 20px（好みで微調整OK） */
}