/*==================================
Menu single Step1
==================================*/

.menu-single{

max-width:1100px;

margin:60px auto;

padding: 0 24px;

box-sizing: border-box;

}

.menu-hero{

display:grid;

grid-template-columns:minmax(560px,4fr) minmax(380px,3fr);

gap:70px;

align-items:start;

margin-bottom:40px;

}

.menu-photo img{

width:100%;

display:block;

}

.menu-title{

font-size:38px;

line-height:1.35;

font-weight:700;

margin-bottom:30px;

letter-spacing:.04em;

}

.menu-point-list{

display:flex;

flex-wrap:wrap;

gap:12px;

list-style:none;

padding:0;

margin:0;

justify-content:center;

}

.menu-point-list li{

background:#8CC63F;

color:#fff;

padding:8px 18px;

border-radius:30px;

font-size:14px;

font-weight:700;

}

.menu-comment{

background:#F8FFF0;

border-left:8px solid #8CC63F;

padding:35px;

border-radius:16px;

margin-top:30px;

font-weight:400;

font-size:15px;

line-height:1.9;

letter-spacing:.02em;

}

.menu-comment h2{

margin:0 0 18px;

font-size:28px;

color:#4A7F1F;

border:none;

}

.menu-comment p{

margin:0;

font-size:18px;

line-height:2;

}

/*==================================================
 商品基本情報
==================================================*/

.menu-basic-info{

    margin:20px 0 35px;

}

.menu-basic-top{

    display:flex;
    gap:30px;
    align-items:center;
    margin-bottom:20px;
    padding-bottom:16px;
    border-bottom:1px solid #e9ecef;

}

.menu-basic-top .basic-item{

    display:flex;
    align-items:center;
    gap:8px;

}

.menu-basic-top .label{

    color:#888;
    font-size:14px;
    font-weight:500;

}

.menu-basic-top .value{

    color:#333;
    font-size:15px;
    font-weight:600;

}

/*----------------------------------
 タクソノミー情報
----------------------------------*/

.menu-taxonomy-info{

    display:flex;
    flex-direction:column;
    gap:14px;

}

.taxonomy-row{

    display:flex;
    align-items:flex-start;
    line-height:1.8;

}

.taxonomy-label{

    width:95px;
    flex-shrink:0;

    color:#777;
    font-size:14px;
    font-weight:500;

}

.taxonomy-value{

    flex:1;

    color:#333;
    font-size:15px;
    font-weight:600;

}

/*==========================
Menu photo gallery
==========================*/

.photo-slider{

position:relative;

width:100%;

aspect-ratio:1/1;

max-height:580px;

display:flex;

align-items:center;

justify-content:center;

}

/*==========================
Main photo
==========================*/

#mainPhotoLink{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:100%;

}

#mainPhoto{

    display:block;

    max-width:100%;

    max-height:100%;

    width:auto;

    height:auto;

    object-fit:contain;

}

/*==========================
Thumbnail
==========================*/

.photo-thumb{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

margin-top:18px;

height:60px;

position:relative;

z-index:20;

}

.menu-photo .photo-thumb img{

width:60px;

height:60px;

object-fit:cover;

box-sizing:border-box;

border-radius:10px;

border:2px solid transparent;

transition:.2s;

cursor:pointer;

opacity:.82;

}

.thumb.active img{

border-color:var(--green);

transform:scale(1.08);

opacity:1;

}

/*------------------
Main visual
------------------*/

.menu-photo{

background:#fff;

padding:30px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

text-align:center;

}

.menu-photo img{

width:100%;

height:auto;

display:block;

}

/*------------------
material
------------------*/

.material-title{

    position:relative;

    margin:25px 0 18px;

    text-align:center;

    font-size:22px;

    font-weight:700;

}

.material-title::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    width:38%;

    height:1px;

    background:#D9D9D9;

}

.material-title::after{

    content:"";

    position:absolute;

    right:0;

    top:50%;

    width:38%;

    height:1px;

    background:#D9D9D9;

}

/*------------------
POINT
------------------*/

.menu-point{

margin:30x 0;

background:#F7FCEB;

padding:10px 20px 20px;

border-left:8px solid #8CC63F;

border-radius:18px;

}

.menu-point h2{

border:none!important;

margin:0 0 0px;

padding:0;

font-size:28px;

color:#6FA130;

}

.menu-point p{

margin:0;

line-height:2;

font-size:17px;

}

.menu-point .point-subtitle{

display:inline;

margin:0;

padding:0;

font-size:17px;

font-weight:700;

color:#6FA130;

border:none!important;

}

.menu-point .point-subtitle::before,

.menu-point .point-subtitle::after{

content:none!important;

display:none!important;

border:none!important;

}

.menu-point .point-materials{

margin-top:18px;

padding-top:16px;

border-top:1px solid #C9E5A5;

line-height:1.9;

font-size:16px;

color:#444;

}

/*------------------
Gallery
------------------*/

.menu-gallery{

margin:70px 0;

}

.menu-gallery h2{

margin-bottom:25px;

border:none!important;

}

.gallery-list{

display:flex;

gap:15px;

flex-wrap:wrap;

}

.gallery-list a{

display:block;

width:120px;

}

.gallery-list img{

width:100%;

border-radius:12px;

transition:.3s;

}

.gallery-list img:hover{

transform:scale(1.05);

}

/*------------------
Previous / Next navigation
------------------*/

.menu-nav{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin:80px 0;

}

.menu-nav > div{

    flex:1;

}

.menu-prev{

    text-align:left;

}

.menu-back{

    text-align:center;

}

.menu-next{

    text-align:right;

}


/*------------------
Navigation button
------------------*/

.menu-prev a,
.menu-back a,
.menu-next a{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    padding:14px 36px;

    border:none;
    border-radius:30px;

    color:#fff;
    text-decoration:none;
    font-weight:700;
    line-height:1;

    box-shadow:none;

    transition:background-color .3s ease;

}

/* Lightning hover reset */

.menu-prev a:hover,
.menu-back a:hover,
.menu-next a:hover{

    box-shadow:none;
    text-decoration:none;

}


/*------------------
Button color
------------------*/

/* 前・次 */

.menu-prev a,
.menu-next a{

    background:#8D959D;

}

.menu-prev a:hover,
.menu-next a:hover{

    background:#747C84;

}

/* 一覧へ戻る */

.menu-back a{

    background:#7DBA36;

}

.menu-back a:hover{

    background:#679A2B;

}

/*==================================
Menu feature
==================================*/

.feature-box{

margin:40px 0;

}

.feature-title{

margin:0 0 20px;

padding-bottom:12px;

font-size:24px;

font-weight:700;

border-bottom:2px solid #8CC63F;

color:#333;

}

.feature-list{

display:grid;

gap:8px;

list-style:none;

padding:0;

margin:0;

}

.feature-top{

grid-template-columns:repeat(2,1fr);

margin-bottom:10px;

}

.feature-bottom{

grid-template-columns:repeat(4,1fr);

}

.feature-list li{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:5px 5px;

    min-height:36px;

    font-size:12px;

    letter-spacing:.03em;

    font-weight:600;

    border-radius:6px;

    text-align:center;

    line-height:1.2;

    box-sizing:border-box;

}

.feature-list li.wide{

    grid-column:span 4;

}

.feature-list li.on{

    background:var(--green-light);

    color:var(--green-text);

    border:1px solid #C9E5A5;

}

.feature-list li.off{

    background:var(--gray);

    color:var(--gray-text);

    border:1px solid #E5E5E5;

}

.menu-capacity{

display:inline-block;

margin:8px 0 28px;

padding:6px 16px;

background:#F5F5F5;

border:1px solid #DDD;

border-radius:20px;

font-size:15px;

font-weight:600;

letter-spacing:0.03em;

color:#666;

line-height:1;

}

/*==========================
 商品タグ
==========================*/

.feature-tag-box{

    margin:22px 0 30px;

}

.feature-tag{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    padding:0;

    margin:0;

    list-style:none;

}

.feature-tag li{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 14px;

    background:#F6F8F2;

    border:1px solid #D7E6BE;

    border-radius:999px;

    color:#5C7A2D;

    font-size:13px;

    font-weight:700;

    line-height:1;

    white-space:nowrap;

    transition:.2s;

}

.feature-tag li a{

    display:block;

    color:inherit;

    text-decoration:none;

}

.feature-tag li:hover{

    background:#8CC63F;

    color:#fff;

}

.feature-tag li:hover a{

    color:#fff;

}

/*======================================
 成分テーブル
======================================*/

.component-table{

    width:100%;
    table-layout:fixed;

}

.component-table th,
.component-table td{

    width:25%;

}

.component-table td{

    text-align:center;

}

.component-table th,
.feeding-table th{
    background-color: #F8F9FA;
}

/*======================================
 給与量テーブル
======================================*/

.feeding-table{
    width:100%;
    table-layout:fixed;
}

.feeding-table th,
.feeding-table td{
    width:50%;
}

.feeding-table td{
    text-align:center;
}

/*------------------
Amazon購入リンク
------------------*/

.menu-shopping-link{

    text-align:center;
    margin:0 0 40px;

}

.menu-shopping-link a{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:14px 36px;

    background:#FF9900;
    border-radius:30px;

    color:#fff;
    font-weight:700;
    text-decoration:none;

    transition:.2s;

}

.menu-shopping-link a:hover{

    background:#E88A00;
    text-decoration:none;

}

/*------------------
Tablet
------------------*/

@media (max-width:1100px){

    .menu-single{
        max-width:1100px;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .menu-hero{
        grid-template-columns:1fr;
        gap:40px;
    }

    .menu-photo{
        max-width:520px;
        width:100%;
        margin:0 auto;
    }

    .menu-summary{
        width:100%;
    }

    .menu-title{
        font-size:28px;
    }

    .info-grid{
        grid-template-columns:1fr;
    }

}

/*------------------
Mobile
------------------*/

@media(max-width:767px){

    .menu-single{
        margin:30px auto;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .menu-photo{
        padding:20px;
    }

    .menu-point{
        padding:25px;
    }

    .feature-list{
        grid-template-columns:1fr;
    }

    .menu-nav{
        flex-direction:column;
    }

    .menu-prev,
    .menu-next,
    .menu-back{
        text-align:center;
        width:100%;
    }

    .gallery-list{
        justify-content:center;
    }

    .component-table,
    .component-table tbody{
        display: block;
        width: 100%;
    }

    .component-table tr{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .component-table th,
    .component-table td{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50%;
        box-sizing: border-box;
        padding: 8px 6px;
        text-align: center;
    }

}