/* ============================================================

  /pages/
  このディレクトリのCSSは「ページ特有の特有のスタイル」を
  記述してください。。
  
  **produc-brands.cssについて**
  本CSSはブランドページ専用CSSです。
  300行を超えるCSSとなる場合は分割を、分割を検討してください。
  
  product-brands.css 内ルール
  
  1. Dress機能、ブロックエディタの詳細CSSで制御できないスタイル、
     ページ個別の内容の内容のみ記述すること。
  2. CMS標準の機能で定義できないもののみ記述を可とする。
  3. **共通化できる内容の記述**は絶対にしないでください。
  
============================================================ */
body, main,
.b-both_diff:has(#header_nav), 
#header_nav_sp, .l-header__nav, .m-menu__child,
.-dress_83619ad495df4f41b60ac94ddc370757 .m-motion.-f li ul li{
	background-color: #e0e0e0!important;
}
.-dress_83619ad495df4f41b60ac94ddc370757 .m-motion.-f li ul li:hover{
	background: #c4c4c4!important;
}
.bd-webp #a-billboard {
	height: calc(100vh - 78px);
}

#a-billboard h1{
	font-size: 30px;
	line-height: 106px;
	letter-spacing: 6px;
	padding: 0 30px;
}
@media (min-width: 1280px){
	#a-billboard h1{
		padding: 0;
	}
}

#brand_detail .-column2{
	display: flex;
	align-items: center;
}


/*--------------------------------------
 clickable map タブエリア
---------------------------------------*/
/* 全体のコンテナ */
.hover-gallery-container {
  width: 100%;
  max-width: 1000px; /* 必要に応じて調整 */
  margin: 0 auto;
}

/* ボタンの横並び（前回と同じ） */
.button-list {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
  width: 100%;
  max-width: 1200px;
  justify-content: space-around;
}
.button-list li{
	text-align: center;
}
#taste_matrix_kubota .button-list li{
	width: calc(100% / 5);
}
#taste_matrix_asahiyama .button-list li{
	width: calc(100% / 4);
}
.btn-item a, .no-link {
  display: block;
  width: 100%;
  padding: 4px 8px;
  text-decoration: none;
  border: 0.5px solid #000;
  color: #000;
  background: rgba(0 0 0 0);
  cursor: pointer;
  transition: background 0.3s;
}
.btn-item.active a, 
.btn-item.active .no-link{
	color: #f6f4f3;
	background: #000;
}

.display-area {
	display: grid;
    grid-template-columns: 1fr;
    width: 100%;
}

.content-set {
	grid-area: 1 / 1 / 2 / 2;
	display: block;
	opacity: 0;
	visibility: visible;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}
.content-set p,
#chart .c-note{
	margin-top: 24px;
	font-size: 1em;
}
.content-set.active {
	opacity: 1;
	height: auto;
	visibility: visible;
	z-index: 10;
	pointer-events: auto;
}

.content-set .image-box img {
	aspect-ratio: 3 / 2;
	width: 100%;
	height: auto;
	object-fit: cover;
}



.cssskin-_block_top_entitle h4{
	border: 0.5px solid #000;
    width: 208px;
    padding: 4px 16px;
    text-align: center;
}
#product_lst{
	display: flex;
}
#product_lst .column,
#product_lst .column a{
	display: grid;
	grid-template-areas: "stack"; 
	grid-template-rows: max-content;
	align-items: end;
	justify-items: center;
	height: auto;
	position: relative;
	/*overflow: hidden;*/
}
#product_lst .column > * {
	grid-area: stack;
	margin: 0;
}
#product_lst .c-body.c-center {
	grid-area: stack;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: -50px;
}
#product_lst .c-img img, 
#product_lst picture img {
	grid-area: stack;
	display: block;
	/*width: 100%;
	max-width: 115px;
	aspect-ratio: 750 / 2410; */
	object-fit: contain;
	/*height: auto;*/
	height:370px;
}
#product_lst .limitedbrew_badge{
	grid-area: stack;
	z-index: 3;
	align-self: start;
	justify-self: start;
	margin: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 5.8em;
	height: 5.8em;
	border: 0.5px solid #000;
	border-radius: 50%;
	text-align: center;
	font-size: 14px;
	line-height: 1.2;
	transform: translateX(-10px);
}
#product_lst span.cond-txt{
	transform: scaleX(0.8);
}
#product_lst h4.c-small_headline,
#product_lst h3.c-large_headline{
	z-index: 2;
	width: 100%;
}
#product_lst h3.c-large_headline{
	/*position: absolute;
	width: max-content;*/
	font-size: 18px;
	top: 19.5em;
}
#product_lst h4.c-small_headline {
	/*grid-area: stack;
	align-self: start;*/
	position: relative;
	font-size: 14px;
    border: none;
	/*margin-top: 22.5em;*/
}

#product_lst .column > p:empty,
#product_lst .c-none {
	display: none;
}

/*--------------------------------------
 KUBOTA MAIL NEWS タブエリア
---------------------------------------*/
.-dress_83619ad495df4f41b60ac94ddc370757 .a-main div.cssskin-block_mailnews{
	background: #000;
	max-width: initial;
}
.-dress_83619ad495df4f41b60ac94ddc370757 .a-main div.inner__w1200{
	max-width: 1200px;
	margin: auto;
}

#_opt-in_title{
	max-width: 224px;
}
#common-parts_opt-in .-col8 .c-body{
	margin-bottom: 34px;
}

/* ==========================================
   Tablet & Shared Mobile (max-width: 1024px)
   ========================================== */
@media screen and (max-width: 1024px) {
    /* ボタンリストの基本調整 */
    #taste_matrix_kubota ul.button-list {
        width: 100%;
        max-width: 975px;
        margin: auto;
        text-align: center;
    }

    #taste_matrix_kubota .button-list li,
    #taste_matrix_asahiyama .button-list li {
        width: 100%;
        margin: 0;
    }

    /* 1024px以下ではホバーのリンク遷移を防ぐため、ボタン内のaタグの挙動を安定させる */
    .btn-item a {
        display: block;
        width: 100%;
    }

    /* 表示エリアの設定 */
    .display-area {
        padding: 0;
        position: relative;
        min-height: 200px; /* 中身が空の時の崩れ防止 */
    }

    /* --- コンテンツセットの表示・非表示制御 --- */
    .display-area .content-set {
        position: absolute; /* 重ね合わせる */
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.6s ease, visibility 0.6s ease;
        z-index: 1;
    }

    /* JSで .active が付いた時だけ表示 */
    .display-area .content-set.active {
        position: relative; /* 表示されるものだけが高さを持つ */
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 2;
    }

    /* 画像の調整 */
    #taste_matrix_kubota .c-img,
    #taste_matrix_asahiyama .c-img {
        aspect-ratio: 3 / 2;
        width: 100%;
        overflow: hidden;
    }

    #taste_matrix_kubota .c-img img,
    #taste_matrix_asahiyama .c-img img,
    #chart .c-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
        max-width: 560px;
        margin: 0 auto 30px;
    }

    #taste_matrix_kubota .content-set,
    #taste_matrix_kubota .content-set.active {
        margin-top: 30px;
    }

    p.c-note {
        margin-top: 24px;
        font-size: 1em;
    }

    .cssskin-_block_top_entitle h4 {
        font-size: 0.94em !important;
        width: 160px;
    }
}

/* ==========================================
   Tablet Only (641px - 1024px)
   ========================================== */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    .btn-item .no-link, .btn-item a {
        font-size: clamp(14px, 1.6vw, 16px);
    }

    /* PC版マトリクスを隠し、SP/TB版を表示する切り替え */
    .is-sp-hide #taste_matrix,
    .is-sp-hide #taste_matrix_kubota,
    .is-sp-hide #taste_matrix_asahiyama {
        display: none !important;
    }

    /* 特定のIDを持つ要素が含まれる場合のみ表示を強制 */
    .is-pc-hide:has(#taste_matrix_kubota, #taste_matrix_asahiyama, #taste_matrix) {
        display: block !important;
    }

    #taste_matrix_kubota .b-tab_navigation li {
        max-width: calc(100% / 5);
    }

    #taste_matrix_asahiyama .b-tab_navigation li {
        max-width: calc(100% / 4);
    }
}

/* ==========================================
   Smartphone Only (max-width: 640px)
   ========================================== */
@media screen and (max-width: 640px) {
    #a-billboard {
        margin-top: 60px;
    }
    #sp_topcopy{
    	background: #000;
    }

    #header_nav_sp, .l-header__nav, .m-menu__child {
        background: #e0e0e0;
    }

    .bd-webp #a-billboard {
        width: 100%;
        height: auto;
        aspect-ratio: 5 / 4;
    }

    /* ボタンをグリッド配置（2列） */
    #taste_matrix_kubota ul.button-list,
    #taste_matrix_asahiyama ul.button-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        height: auto;
        min-height: auto;
    }

    #taste_matrix_kubota li:first-child {
        grid-column: 1 / 3; /* ALLボタンを1枚板にする */
    }

    #product_lst .c-img img, 
    #product_lst picture img {
        height: 240px;
        object-fit: contain;
    }
    
    #common-parts_opt-in .column .c-body {
        margin-bottom: 34px;
        text-align: justify;
    }
}