/*------------------
|- main
------------------*/
.top-img {
    width: 100%;
    max-width: 1100px;
    margin: 30px auto 80px;
}
.top-btn {
    max-width: 900px;
    margin: 0 auto 110px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0 30px;
}
.top-btn__item a {
    padding: 3px 0;
    color: #fff;
    font-feature-settings: 'palt';
    font-size: var(--fs20);
    text-align: center;
    background: #009B63;
    border: 2px solid #009B63;
    border-radius: 25px;
    box-shadow: 0 3px 6px rgb(6 6 6 / 16%);
    display: block;
}
@media (hover: hover) {
    .top-btn__item a:hover {
        color: #009B63;
        font-weight: 400;
        background: #fff;
    }
}
@media screen and (max-width: 767px) {
    .top-img {
        margin: 25px auto 50px;
    }
    .top-btn {
        width: 91%;
        margin: 0 auto 50px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 10px;
    }
    .top-btn__item:nth-child(1) {
        grid-area: 1 / 1 / 2 / 3;
    }
    .top-btn__item:nth-child(2) {
        grid-area: 2 / 1 / 3 / 2;
    }
    .top-btn__item:nth-child(3) {
        grid-area: 2 / 2 / 3 / 3;
    }
    .top-btn__item a {
        padding: 1px 0;
        font-size: var(--fs17);
    }
}
/*------------------
|- section
------------------*/
.section {
    width: 91%;
    max-width: 960px;
    margin: 0 auto 110px;
    padding: 0;
}
h2.section-ttl {
    margin-bottom: 50px;
    padding-bottom: 5px;
    font-feature-settings: 'palt';
    font-size: var(--fs26);
    font-weight: 500;
    letter-spacing: .05rem;
    text-align: left;
    border-bottom: 2px solid #009B63;
}
.contact-btn {
    max-width: 500px;
    margin: 80px auto;
    box-shadow: 0 3px 6px rgb(6 6 6 / 16%);
    border-radius: 10px;
}
.download-btn {
    max-width: 298px;
    margin: 80px auto 150px;
    box-shadow: 0 3px 6px rgb(6 6 6 / 16%);
    border-radius: 10px;
}
.contact-btn a {
    display: block;
    transition: .3s;
}
.download-btn a {
    display: block;
    transition: .3s;
}
.back-btn {
    width: 250px;
    margin: 0 auto;
}
.back-btn a {
    width: 100%;
    padding: 7px 0;
    color: #169B65;
    font-size: var(--fs20);
    font-weight: 500;
    text-align: center;
    border: 3px solid #169B65;
    box-sizing: border-box;
    background: #E5F4EC;
    border-radius: 10px;
    display: block;
    transition: .3s;
}
@media (hover: hover) {
    .contact-btn a:hover {
        opacity: .8;
        transform: translateY(5px);
    }
    .download-btn a:hover {
        opacity: .8;
        transform: translateY(5px);
    }
    .back-btn a:hover {
        color: #fff;
        background: #169B65;
    }
}
@media screen and (max-width: 767px) {
    .section {
        margin: 0 auto 75px;
    }
    h2.section-ttl {
        margin-bottom: 25px;
        padding-bottom: 3px;
        font-size: var(--fs20);
        letter-spacing: 0;
    }
    .contact-btn {
        max-width: 300px;
        margin: 50px auto;
        border-radius: 5px;
    }
    .download-btn {
        max-width: 200px;
        margin: 50px auto 75px;
        border-radius: 5px;
    }
    .back-btn {
        width: 47%;
        margin: 50px auto 0;
    }
    .back-btn a {
        padding: 3px 0;
        font-size: var(--fs16);
        border: 2px solid #169B65;
        border-radius: 5px;
    }
}
/*------------------
|- content01
------------------*/
.feature-block {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0 6%;
}
.feature-num {
    width: 170px;
    margin: 0 auto 20px;
    font-family: century-gothic, sans-serif;
    font-size: 5rem;
    color: #009B63;
    line-height: 1;
    text-align: center;
    border: 5px solid #009B63;
    border-radius: 10px;
}
.feature-ttl {
    width: 100%;
    margin-bottom: 40px;
    padding: 5px 0;
    text-align: center;
    background: #009B63;
}
.feature-ttl span {
    position: relative;
    color: #fff;
    font-feature-settings: 'palt';
    font-size: var(--fs22);
    font-weight: 500;
}
.feature-ttl span::after {
    content: '';
    position: absolute;
    top: -22px;
    right: -50px;
    width: 37px;
    height: 47px;
    background: url('/wp/wp-content/themes/daiwapax/common/img/microwavablepouch/img_arrow.svg') no-repeat;
    background-size: 100%;
}
.feature-img {
    width: 93%;
    margin: 0 auto 35px;
}
.feature-txt {
    font-feature-settings: 'palt';
    font-size: var(--fs18);
    line-height: 2;
}
@media screen and (max-width: 890px) {
    .feature-block {
        gap: 0 3%;
    }
    .feature-num {
        font-size: 4.5rem;
    }
    .feature-ttl span {
        font-size: var(--fs18);
    }
    .feature-ttl span::after {
        top: -19px;
        right: -40px;
        width: 32px;
        height: 42px;
    }
    .feature-txt {
        font-size: var(--fs15);
    }
}
@media screen and (max-width: 767px) {
    .feature-block {
        grid-template-columns: 1fr;
        gap: 35px 0;
    }
    .feature-ttl-box {
        margin-bottom: 25px;
        display: flex;
        align-items: center;
    }
    .feature-num {
        width: 85px;
        margin-bottom: 0;
        font-size: 2.5rem;
        border: 3px solid #009B63;
        border-radius: 5px;
    }
    .feature-ttl {
        width: calc(100% - 85px);
        margin-bottom: 0;
        padding: 10px 15px;
        line-height: 1;
        text-align: left;
    }
    .feature-ttl span::after {
        top: -14px;
        right: -35px;
        width: 26px;
        height: 33px;
        background: url('/wp/wp-content/themes/daiwapax/common/img/microwavablepouch/img_arrow_sp.svg') no-repeat;
        background-size: 100%;
    }
    .feature-img {
        width: 62%;
        margin: 0 auto 25px;
    }
    .feature-txt {
        width: 85%;
        margin: 0 auto;
        font-size: var(--fs16);
        line-height: 1.4;
    }
}
/*------------------
|- content02
------------------*/
.table {
    width: 100%;
    border-collapse: collapse;
}
.table th {
    width: 80px;
    font-feature-settings: 'palt';
    font-size: var(--fs16);
    color: #fff;
    background: #009B63;
}
.table-ttl__size {
    background: #42A280 !important;
}
.table td {
    font-feature-settings: 'palt';
    font-size: var(--fs15);
    text-align: center;
    border-right: 20px solid #fff;
}
.table td:last-of-type {
    border: 0;
}
.table-item__img {
    padding: 30px 0;
    background: #F6F6F6;
}
.table-item__size {
    padding: 15px 0;
    background: #E9E9E9;
}
.table-item__composition {
    padding: 15px 0;
    background: #F6F6F6;
}
@media screen and (max-width: 767px) {
    .table-block {
        overflow-x: scroll;
    }
    .table {
        width: 785px;
    }
    .table th {
        position: sticky;
        left: 0;
        width: 65px;
        font-size: var(--fs15);
    }
    .table td {
        border-right: 15px solid #fff;
    }
}
/*------------------
|- content03
------------------*/
#content03 {
    margin: 0 auto;
}
.sample-block {
    padding: 50px 9% 30px;
    background: #F6F6F6;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 50px 6%;
}
.figcaption {
    font-feature-settings: 'palt';
    font-size: var(--fs15);
}
@media screen and (max-width: 767px) {
    #content03 {
        width: 100%;
    }
    #content03 .section-ttl {
        width: 91%;
        margin: 0 auto 25px;
    }
    .sample-block {
        padding: 27px 0 30px;
        grid-template-columns: 1fr;
        gap: 30px 0;
    }
    .sample-box {
        width: 85%;
        margin: 0 auto;
    }
}
/*------------------
|- 共通
------------------*/
img {
    width: 100%;
    height: auto;
}
#main .img {
    width: 61%;
    border-radius: 0;
}
main {
    position: relative;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 300;
    overflow: hidden;
}
picture {
    display: block;
}
#footer {
    margin-top: 150px;
}
@media screen and (max-width: 767px) {
    #main .img {
        width: 100%;
    }
    #footer {
        margin-top: 75px;
    }
}

:root {
    --fs14: .875rem;
    --fs15: .9375rem;
    --fs16: 1rem;
    --fs17: 1.0625rem;
    --fs18: 1.125rem;
    --fs19: 1.1875rem;
    --fs20: 1.25rem;
    --fs21: 1.3125rem;
    --fs22: 1.375rem;
    --fs23: 1.4375rem;
    --fs24: 1.5rem;
    --fs25: 1.5625rem;
    --fs26: 1.625rem;
    --fs27: 1.6875rem;
    --fs28: 1.75rem;
    --fs29: 1.8125rem;
    --fs30: 1.875rem;
}