body{
    margin:0;
    padding:0;
    font-size: 16px;
    line-height: 1.5;
}

a{
    text-decoration: none;
    color: #5F6269;
}
a:hover{
    text-decoration: underline;
}

h2{
    font-size: 1.5rem;
    padding:10px 0;
    margin:0 0 20px 0;
}
h3{
    font-size:1.125rem;
    margin:10px 0;
}
p{
    font-size: 1rem;
    margin: 0;
}
aside{
    font-size:0.8rem
}
table{
    border:solid 1px #c4c5c6;
    border-collapse: collapse;
    table-layout: fixed;
}
td,th{
    border: solid 1px #c4c5c6;
}

thead tr{
    background-color: #D5E5DB;
}
tbody tr:nth-child(even){
    background-color: #F2F2F2;
}
td{
    font-size: 0.9rem;
    padding:0.3rem;
}
img{
    width: 100%; 
    text-align: center;
    max-width: initial !important;
}

/* 蜈ｨ逕ｻ髱｢陦ｨ遉ｺ縺ｮ縺溘ａ蛻･縺ｧ菴ｿ繧上ｌ縺ｦ縺�ｋ繧ｯ繝ｩ繧ｹ繧堤┌蜉ｹ蛹� */
.layout_menu, .layout_right{
    display: none;
}
.container-belos{
    padding:2.5rem 0;
    margin: 0 5% 0 5%;
}
/* 閭梧勹濶ｲ螟画峩 */
.area-gray{
    background-color: #7A7C80;
    color: #FFFFFF;
}
/* 繝昴う繝ｳ繝磯Κ蛻��繧ｹ繧ｿ繧､繝ｫ螟画峩 */
.point{
    font-size: 1.25rem;
    font-weight:bold;
    margin:10px 0;
}
.table-container {
    display: grid;
    overflow-x: auto; /* 讓ｪ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧呈怏蜉ｹ縺ｫ */
    -webkit-overflow-scrolling: touch; /* 繧ｹ繝槭�縺ｧ縺ｮ繧ｹ繝�繝ｼ繧ｺ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ */
    max-width: 100%;
    text-align: center;
  }
/* 繧ｰ繝ｪ繝�ラ蠖｢蠑上〒縺ｮ陦ｨ遉ｺ */
.future-list,.specification{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    list-style: none;
    padding:0;
    column-gap: 20px;
    row-gap: 20px;
}

.future-img{
    object-fit: scale-down;
    width: 300px;
    height: 200px;
    align-items: center;
    margin-bottom:0.625rem;
}
/* 繝昴う繝ｳ繝医�荳ｭ縺ｮ隕∫ｴ�繧偵げ繝ｪ繝�ラ */
.future-item{
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: start;
    align-items:center;
    padding:0.2rem;
}
/* 蜷��繧､繝ｳ繝医�繝�く繧ｹ繝医�縺ｿ蟾ｦ蟇�○ */
.future-explanation{
    justify-self: start;
    padding-left: 0.625rem;
}
/* 譽壹�繧ｫ繝ｩ繝ｼ繝舌Μ繧ｨ繝ｼ繧ｷ繝ｧ繝ｳ縺ｮ隕∫ｴ�繧偵げ繝ｪ繝�ラ蠖｢蠑丞喧 */
.variations{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    list-style: none;
    padding: 0;
    column-gap: 50px;
    row-gap: 20px;
}

/* 繝��繝悶Ν縺ｮ蛻励�濶ｲ繧貞､画峩 */
.depth{
    background-color:#D5E5DB;
}


@media screen and (max-width:589.999px) {
    .table-container {
        overflow-x: auto; /* 繧ｹ繝槭�縺ｧ讓ｪ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧呈怏蜉ｹ縺ｫ */
        white-space: nowrap; /* 繧ｻ繝ｫ蜀��繝�く繧ｹ繝域隼陦後ｒ髦ｲ縺� */
      }
    
    table {
        width: auto; /* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ縺ｧ縺阪ｋ繧医≧縺ｫ蟷�ｒ閾ｪ蜍戊ｪｿ謨ｴ */
      }
    .future-list,.specification{
        display: grid;
        grid-template-columns: 1fr;
    }
    .future-item{
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
    }
    /* .variations{
        display: grid;
        grid-template-columns: 1fr;
    } */

    .variations {
        display: grid;
        grid-auto-flow: column; /* 蛻玲婿蜷代↓閾ｪ蜍暮�鄂ｮ */
        gap: 20px; /* 逕ｻ蜒城俣縺ｮ髢馴囈 */
        overflow-x: auto; /* 讓ｪ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧呈怏蜉ｹ縺ｫ縺吶ｋ */
        white-space: nowrap;
        padding: 10px;
        scroll-snap-type: x mandatory; /* 繧ｹ繝翫ャ繝励せ繧ｯ繝ｭ繝ｼ繝ｫ */
    }
    /* 蜷�判蜒上�繧ｹ繧ｿ繧､繝ｫ */
    .variations img {
        width: 250px !important;
        height: auto;
        object-fit: cover;
        scroll-snap-align: start; /* 繧ｹ繝翫ャ繝嶺ｽ咲ｽｮ縺ｮ險ｭ螳� */
    }
    }