@charset 'utf-8';
/*
 * name:top.css
 * author: Nulo Lab
*/
/* page
===================================*/
.page-headline{ height: 25em; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background-repeat: no-repeat; background-size: cover; background-position: center center; background-image: url(../../img/share/headline_bg_1.png); }
.page-headline-ttl{ font-size: 6.5em; font-family: var(--ff-noto-serif); line-height: calc(84.5/65); text-align: center; }
.page__cont{ max-width: 100% !important; padding: 10em 0 0; }
@media only screen and (min-width: 769px) {
    .page-headline.topics-headline{ background-image: url(../../img/share/headline_bg_2.jpg); }
}
@media only screen and (max-width: 768px) {
    .page-headline{ height: 12em; background-image: url(../../img/share/headline_bg_sp_1.png); }
    .page-headline.topics-headline{ background-image: url(../../img/share/headline_bg_sp_2.jpg); }
    .page-headline-ttl{ font-size: 3.3em; }
    .page-mobile-bottom-padding{ padding-bottom: 10em; }
}

/* product
===================================*/
.product-banner{ display: flex; flex-wrap: wrap; justify-content: flex-end; background-color: var(--red-color); }
.product-content{ margin-top: 10em; }
.product-pannel{ position: relative; padding: 7em 7em; background: url(../../img/share/frame_xl_1.png) no-repeat 0 0 / 8em 8em, url(../../img/share/frame_xl_2.png) no-repeat right 0 / 8em 8em, url(../../img/share/frame_xl_3.png) no-repeat 0 bottom / 8em 8em, url(../../img/share/frame_xl_4.png) no-repeat right bottom / 8em 8em; }
.product-pannel+.product-pannel{ margin-top: 10em; }
.product-pannel:after{ content: ''; position: absolute; left: 1em; top: 1em; width: calc(100% - 2em); height: calc(100% - 2em); background-color: var(--light-brown); z-index: -1; }
.product-name{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font-family: var(--ff-noto-serif); font-size: inherit; background: url(../../img/share/top_show_border_3.png) no-repeat 0 0 / auto 100%, url(../../img/share/top_show_border_4.png) no-repeat right 0 / auto 100%; }
.product-name-red{ margin-top: .2909em; color: var(--red-color); letter-spacing: .118em; }
.product-slide{ padding-bottom: 3em; }
.product-slide-img{ height: 100%; border-radius: .5em; overflow: hidden; }
.product-slide-img img{ object-fit: cover; object-position: center center; width: 100%; height: 100%; }
.product-slide-pagination{ bottom: -2px !important; }
.product-slide-pagination .swiper-pagination-bullet{ margin: 0 .5em !important; width: 5em !important; height: .6em !important; border-radius: .5em !important; background-color: #fff !important; opacity: 1 !important; }
.product-slide-pagination .swiper-pagination-bullet-active{ background-color: #AD6001 !important; }
.product-shortdecs{ font-size: 1.8em; line-height: calc(29.2/18);  }
.product-price{ margin-top: 1.3em; display: flex; flex-wrap: wrap; }
.product-price p{ display: inline-flex; flex-wrap: wrap; align-items: flex-start; font-family: var(--ff-noto-serif); font-weight: bold; }
.product-price p+p{ margin-left: .7142em; }
.product-price b{ font-size: 3em; }
.product-price small{ margin-top: 1em; margin-left: .3125em; font-size: 1.6em; }
.product-row{ margin-top: 4em; }

@media only screen and (min-width: 769px) {
    .product-pannel{ display: flex; flex-wrap: wrap; }
    .product-col-left{ width: calc(205/1160 * 100%); }
    .product-col-right{ width: calc(955/1160 * 100%); }
    .product-name{ position: sticky; top: 11em; left: 0; min-height: 48em; width: 15em; flex-direction: column; }
    .product-name-black{ font-size: 3.5em; writing-mode: vertical-rl; }
    .product-name-red{ font-size: 5.5em; writing-mode: vertical-rl; }
    .product-info{ max-width: 91em; margin-top: 5.5em; }
    .product-row{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
    .product-row-col--left{ width: calc(558/910 * 100%); }
    .product-row-col--right{ width: calc(290/910 * 100%); }
    .product-slide-img{ max-height: 48em; }
}

@media only screen and (max-width: 768px) {
    .product-banner{ padding-left: 2.5em; }
    .product-pannel {
        padding: 3.5em 3.3em 5.7em;
        background-size: 2.9em;
    }
    .product-pannel+.product-pannel{ margin-top: 5em; }
    .product-pannel:after{ left: 0.5em; top: 0.5em; width: calc(100% - 1em); height: calc(100% - 1em); }
    .product-content{ margin-top: 5em; }
    .product-content .wrap-1320{ padding: 0 1em; }
    .product-name{ position: relative; left: -.8em; width: calc(100% + 1.6em); margin: 0 auto 2em; max-width: 30.5em; min-height: 6.6em; background: url(../../img/products/border2.png) no-repeat center 0 / contain, url(../../img/products/border3.png) no-repeat center bottom / contain; }
    .product-name-black,
    .product-name-red{ font-size: 2.3em; }
    .product-name-red{ margin-top: 0; }
    .product-slide{ width: calc(100% + 8.6em); margin-left: -4.3em; padding-bottom: 2.3em; }
    .product-slide-pagination .swiper-pagination-bullet{ height: 3px !important; }
    .product-info{ margin-top: 2.5em; }
    .product-price b{ font-size: 2.6em; }
    .product-price small{ font-size: 1.4em; }
    .product-row{ margin-top: 3.7em; }
    .product-row-col--right{ margin-top: 3.7em; }
}

/* Food guide
===================================*/
.food-guide{ margin-top: 14em; padding: 13em 0 12em; color:var(--light-brown); background-color: #3C1100; }
.food-guide-ttl{ margin-bottom: .4375em; font-size: 3.2em; font-family: var(--ff-noto-serif); }
.food-guide-topdesc ul{ font-size: .75em; line-height: calc(18/12); }
.food-guide-topdesc ul li{ padding-left: 1em; text-indent: -1.2em; }
.food-guide-topdesc ul li::before{ content:'※'; padding-right: .25em; }
.food-guide-topdesc ul li+li{ margin-top: .3125em; }

@media only screen and (min-width: 769px) {
    .food-guide-row{ margin-top: 4.5em; padding-bottom: 3.4em; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; }
    .food-guide-row.food-guide-center{ justify-content: center; }
    .food-guide-row:not(.food-guide-center)::before{ content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 6px; height: 100%; background: url(../../img/products/border1.png) no-repeat center center / auto 100%; }
    .food-guide-col{ width: calc(522/1160 * 100%); }
    .food-guide-center .food-guide-col{ width: calc(800/1160 * 100%); }
    .food-guide-topdesc{ margin-bottom: 4em; }
    .food-guide-topdesc ul{ margin-top: .6666em; }
}

@media only screen and (max-width: 768px) {
    .food-guide{ padding: 5em 0 5.8em; margin-top: 6em; }
    .food-guide-ttl{ margin-bottom: 0;font-size: 2.1em; line-height: calc(31.5/21); }
    .food-guide-topdesc{ margin-top: 1em; margin-bottom: 3em; }
    .food-guide-row{ margin-top: 3em; }
    .food-guide-col{ position: relative; }
    .food-guide-col+.food-guide-col{ margin-top: 6em; padding-top: 6em; }
    .food-guide-col+.food-guide-col .food-guide-topdesc{ margin-bottom: 3.5em; }
    .food-guide-col+.food-guide-col:before{ content: ''; position: absolute; left: -2.5em; top: 0; height: 5px; width: calc(100% + 5em); background: url(../../img/products/border4.png) no-repeat 0 0 / 100% auto; }
    .food-guide-topdesc ul{ margin-top: 1em; }
}

/* recommend
===================================*/
.recommend{ padding-top: 10em; margin-top: 3em; }
.recommend-item{ max-width: 80em; margin: 4.6em auto 0; }
.recommend-item a{display: flex; flex-wrap: wrap; border-radius: .5em; overflow: hidden; }
.recommend-item-name{ display: inline-flex; flex-wrap: wrap; flex-direction: column; font-family: var(--ff-noto-serif); align-items: center; justify-content: center; min-height: 38.1em; font-size: inherit; color:#fff; background-color: var(--red-color); transition: .2s ease; }
.recommend-item-name-small{ writing-mode: vertical-rl; font-size: 3.1em; letter-spacing: .11em; }
.recommend-item-name-large{ margin-top: .1111em; writing-mode: vertical-rl; font-size: 4.5em; letter-spacing: .117em; }
.recomment-item-pht{ overflow: hidden; }
.recomment-item-pht img{ object-fit: cover; object-position: center; width: 100%; height: 100%; transition: .2s ease; }

@media only screen and (min-width: 769px) {
    .recommend-item-name{ width: 10.6em; }
    .recomment-item-pht{ width: calc(100% - 10.6em); }
    a:hover .recommend-item-name{ background-color: var(--main-color); }
    a:hover .recomment-item-pht img{ transform: scale(1.1); }
}

@media only screen and (max-width: 768px) {
    .recommend{ padding-top: 6em; margin-top: 0; }
    .recommend-item{ margin-top: 1.5em; }
    .recommend-item a{ border-radius: 0; }
    .recommend-item-name{ padding: 1em 0; width: 6em; min-height: 21.5em; }
    .recommend-item-name-small{ font-size: 1.8em; }
    .recommend-item-name-large{ font-size: 2.6em; }
    .recomment-item-pht{ width: calc(100% - 6em); }
}

/*
Topics
------------------------------ */
.topics-posts{ margin-top: 8em; }

@media only screen and (max-width: 768px) {
    .topics-posts{ margin-top: 4em; }
}

/* single
------------------------------------ */
.single--block{ margin-top: 10em; position: relative; }
.single__cont { display: block; position: relative; max-width: 80em; }
.single__cont--title { font-size: 3.2em; font-family: var(--ff-noto-serif); font-weight: bold; line-height: 1.5; margin-bottom: .375em; }
.single__cont--head { display: flex; flex-wrap: wrap; margin-bottom: 6em; }
.single__cont--cate { display: block; box-sizing: border-box; }
.single__cont--cate span { font-size: 1.3em; font-weight: bold; line-height: 1; color: #fff; background: #AD6001; display: inline-block; padding: .22em .8em .33em; text-align: center; border-radius: 10em; transition: linear .2s; }
.single__cont--date { font-size: 1.3em; line-height: 1.538; margin-left: 1.92em; }
.single__cont--thumb { display: block; overflow: hidden; position: relative; border-radius: .5em; margin-bottom: 7em; width: 100%; aspect-ratio: 1/.61113; box-sizing: border-box; }
.single__cont--thumb.no-thumb { border: 1px solid #D6D6BA; }
.single__cont--thumb img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: block; object-fit: cover; object-position: center; }
.single__cont--desc { font-size: 1.6em; line-height: 1.7; }
.single__cont--desc .wp-block-image{ margin-bottom: 1.875em; }
.single__cont--desc img { border-radius: .5em; }
.single__cont--desc p + p { margin-bottom: 1.87em; }
.single__cont--desc .wp-block-list{ margin-top: 1em; margin-bottom: 1.87em; }
.single__cont--desc p + figure,
.single__cont--desc p + p img,
.single__cont--desc p + .wp-block-table,
.single__cont--desc figure + .wp-block-table,
.single__cont--desc .wp-block-buttons + .wp-block-table { margin-top: 4em; }
.single__cont--desc ol li { list-style: number; margin-left: 1em; }
.single__cont--desc ul li { list-style: disc; margin-left: 1em; }
.single__cont--desc h2,
.single__cont--desc h3,
.single__cont--desc h4,
.single__cont--desc h5,
.single__cont--desc h6 { margin-bottom: .75em; }
.single__cont--desc p + h2,
.single__cont--desc p + h3,
.single__cont--desc p + h4,
.single__cont--desc p + h5,
.single__cont--desc p + h6,
.single__cont--desc figure + h2,
.single__cont--desc figure + h3,
.single__cont--desc figure + h4,
.single__cont--desc figure + h5,
.single__cont--desc figure + h6,
.single__cont--desc .wp-block-buttons + h2,
.single__cont--desc .wp-block-buttons + h3,
.single__cont--desc .wp-block-buttons + h4,
.single__cont--desc .wp-block-buttons + h5,
.single__cont--desc .wp-block-buttons + h6 { margin-top: 3.5em; }
.single__cont--desc h2 { font-size: 162.5%; }
.single__cont--desc h3 { font-size: 137.5%; }
.single__cont--desc h4 { font-size: 125%; }
.single__cont--desc h5 { font-size: 112.5%; }
.single__cont--desc h6 { font-size: 100%; }
.single__cont--desc a { display: inline-block; position: relative; }
.single__cont--desc a:not([class]) { color: var(--red-color); }
.single__cont--desc a:not([class]):before { content: ""; position: absolute; left: 0; width: 100%; bottom: 0; background: var(--red-color); height: 1px; transition-property: width; transition-duration: 0.3s; transition-timing-function: ease-out; }
.single__cont--desc table,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table { width: 100%; border-collapse: separate !important; border-spacing: 2px; }
.single__cont--desc table.has-background{ border-collapse: collapse !important; overflow: hidden; border-radius: .3125em; }
.single__cont--desc table.has-background th+th,
.single__cont--desc table.has-background td+td{ border-left: 2px solid #fff !important; }
.single__cont--desc table.has-background tr+tr { border-top: 2px solid #fff; }


.single__cont--desc table thead tr,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tbody tr:nth-child(odd),
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th{ font-weight: bold; background: var(--light-brown) !important; }
.single__cont--desc table th,
.single__cont--desc table td,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tr th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tr td { padding: 1.1875em .2em !important; font-size: initial; text-align: center !important; color: var(--main-color); box-sizing: border-box; border: none !important; }
/* .single__cont--desc table tbody tr td:first-child,
.single__cont--desc table tbody tr th:first-child,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tbody tr td:first-child,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tbody tr th:first-child { min-width: 11.09em; }
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th { background: none; } */
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr:first-child th:first-child,
.single__cont--desc table thead th:first-child{border-radius: .3125em 0 0 0;}
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr:first-child th:last-child,
.single__cont--desc table thead th:last-child{border-radius: 0 .3125em 0 0;}
.single__cont--desc p + .wp-block-buttons,
.single__cont--desc figure + .wp-block-buttons { margin-top: 3.75em; }
.single__cont--desc .wp-block-buttons { display: block; position: relative; text-align: center; }
.single__cont--desc .wp-block-buttons a { font-weight: bold; box-sizing: border-box; width: initial; padding: .7em 1.2em .7em; color: #fff; background: var(--main-color); text-align: center; display: inline-block; position: relative; border-radius: 10em; }

    @media only screen and (min-width: 769px) {
        .single--block{ min-height: 50em; }
        .single__cont--desc a:not([class]):hover:before { left: auto; right: 0; width: 0; }
        .single__cont--desc .wp-block-buttons a:hover { background: var(--red-color); }
    }

    @media only screen and (max-width: 768px) {
        .single--block{ margin-top: 5em; }
        .single__cont--title { font-size: 1.8em; line-height: 1.3; margin-bottom: .44em; }
        .single__cont--head { margin-bottom: 4em; }
        .single__cont--thumb { margin-bottom: 4em; }
        .single__cont--desc p + p { margin-bottom: 1.87em; }
        .single__cont--desc p + figure,
        .single__cont--desc p + p img,
        .single__cont--desc p + .wp-block-table,
        .single__cont--desc figure + .wp-block-table,
        .single__cont--desc .wp-block-buttons + .wp-block-table  { margin-top: 2.125em; }
        .single__cont--desc p + h2,
        .single__cont--desc p + h3,
        .single__cont--desc p + h4,
        .single__cont--desc p + h5,
        .single__cont--desc p + h6,
        .single__cont--desc figure + h2,
        .single__cont--desc figure + h3,
        .single__cont--desc figure + h4,
        .single__cont--desc figure + h5,
        .single__cont--desc figure + h6 { margin-top: 3.375em; }
        .single__cont--desc h2 { font-size: 112.5%; }
        .single__cont--desc h3 { font-size: 100%; }
        .single__cont--desc h4 { font-size: 93.75%; }
        .single__cont--desc h5 { font-size: 87.5%; }
        .single__cont--desc h6 { font-size: 81.25%; }
        .single__cont--desc table th,
        .single__cont--desc table td,
        .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tr th,
        .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tr td { padding: .9062em .2em !important; }
        /* .single__cont--desc table,
        .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table { width: 100%; display: block; margin-bottom: -1px; }
        .single__cont--desc table tbody,
        .single__cont--desc table tbody tr,
        .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tbody,
        .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tbody tr { display: block; } */
        /* .single__cont--desc table tr th,
        .single__cont--desc table tbody tr td,
        .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tr th,
        .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tbody tr td { display: block; width: 100% !important; } */
        /* .single__cont--desc table tbody tr td:first-child,
        .single__cont--desc table tbody tr th:first-child,
        .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tr td:first-child,
        .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table > table tr th:first-child { padding-top: 1.5625em; padding-bottom: 0; } */
        .single__cont--desc p + .wp-block-buttons,
        .single__cont--desc figure + .wp-block-buttons { margin-top: 2.5em; }
        .single__cont--desc .wp-block-buttons a { max-width: 17.75em; padding: .41em 1.2em; border-radius: 1.5625em; }
    }
.single__sidebar { display: block; position: relative; max-width: 28em; }
.single__sidebar--block { display: block; position: relative; }
.single__sidebar--block:not(:last-child) { margin-bottom: 5em; }
.single__sidebar--title { font-size: 1.6em; font-weight: bold; line-height: 1.7; padding: .65em 1.25em; color:var(--yellow-color); border-top-left-radius: .625em; border-top-right-radius: .625em; background: var(--main-color); border-bottom: .125em solid; box-sizing: border-box; }
.single__sidebar--links,
.single__sidebar--links li { position: relative; display: block; }
.single__sidebar--links li { border-bottom: .1em solid #D6D6BA; transition: .2s ease; }
.single__sidebar--links li a { font-size: 1.6em; font-weight: bold; color: var(--main-color); line-height: 1.7; padding: 1em 0; padding-right: 2.1em; display: block; position: relative; transition: .2s ease; }
.single__sidebar--links li a:after { content: ''; display: inline-block; width: 1.25em; height: 1.25em; position: absolute; right: .8125em; top: 50%; transform: translateY(-50%); background: url(../../img/icon/icon_link_dot_red.svg) no-repeat; background-size: 100% 100%; }



    @media only screen and (min-width: 769px) {
        .single__sidebar { position: absolute; right: 0; top: 0; width: 100%; height: 100%; }
        .single__sidebar--sticky { position: sticky; top: 12em; left: 0; }
        .single__sidebar--links li:hover{ border-color: #AD6001; }
        .single__sidebar--links li a:hover{ color:#AD6001; }
    }
    @media only screen and (max-width: 768px) {
        .single__sidebar { margin: 8em auto 0;  }
    }
/* related
------------------------------------ */
#related{ margin-top: 13.5em; padding-top: 13.5em; border-top: 1px solid #CCCCCC; }
.related-items{ margin-top: 4.5em; }
.related-btn{ max-width: 29em; margin: 6em auto 0; }
@media only screen and (max-width: 768px) {
    #related{ margin-top: 8em; padding-top: 6em; }
    .related-btn{ margin-top: 4em; }
    .related-slide{ padding-bottom: 2.3em; }
    .related-pagination{ bottom: -2px !important; }
    .related-pagination .swiper-pagination-bullet{ margin: 0 .5em !important; width: 5em !important; height: 3px !important; border-radius: 5px !important; background-color: var(--light-brown) !important; opacity: 1 !important; }
    .related-pagination .swiper-pagination-bullet-active{ background-color: var(--yellow-color) !important; }
}

/*
commitment
------------------------------------ */
.commitment-interview-title{ display: flex; flex-wrap: wrap; align-items: center; flex-direction: column; justify-content: center; height: 12em; text-align: center; background: url(../../img/share/frame_gold_1.png) no-repeat 1em 1em / 3em 3em, url(../../img/share/frame_gold_2.png) no-repeat calc(100% - 1em) 1em / 3em 3em, url(../../img/share/frame_gold_4.png) no-repeat 1em calc(100% - 1em) / 3em 3em, url(../../img/share/frame_gold_3.png) no-repeat calc(100% - 1em) calc(100% - 1em) / 3em 3em; background-color: var(--main-color); }
.commitment-interview-title h2{ font-size: 3.2em; font-family: var(--ff-noto-serif); color: var(--yellow-color); line-height: calc(48/32); }
.commitment-interview-title h2 small{ font-size: .6875em; }
.commitment-interview-title--badge{ display: flex; flex-wrap: wrap; justify-content: center; }
.commitment-interview-title--badge span{ margin: 0 -.1em; display: inline-flex; align-items: center; justify-content: center; width: 1.625em; height: 1.625em; font-size: 1.6em; font-weight: bold; line-height: 1; color: #fff; border-radius: 50%; }
.commitment-interview-title--badge .badge-group-02{ margin-left: 1.4em; }
.commitment-interview-title--badge .badge-group-02 span{ background-color: var(--red-color); }
.commitment-interview-title--badge .badge-group-01 span{ color:var(--main-color); background-repeat: no-repeat; background-size: cover; background-position: center center; }
.commitment-interview-title--badge .badge-group-01 span:nth-child(1){ background-image: url(../../img/commitment/round_1.png); }
.commitment-interview-title--badge .badge-group-01 span:nth-child(2){ background-image: url(../../img/commitment/round_2.png); }
.commitment-interview-title--badge .badge-group-01 span:nth-child(3){ background-image: url(../../img/commitment/round_3.png); }
.commitment-interview-title--badge .badge-group-01 span:nth-child(4){ background-image: url(../../img/commitment/round_4.png); }
.commitment-interview-desc{ padding: 5em 2.5em 6.91em; background: url(../../img/commitment/bg_01.jpg) no-repeat center center / cover; }
.commitment-interview-desc p{ font-weight: bold; }
.commitment-interview-desc--inner{ max-width: 700px; margin: 0 auto; }
.commitment-block{ padding: 13em 0; min-height: 93.4em; background-repeat: no-repeat; background-size: cover; background-position: center center; }
#commitment02{ color:var(--light-brown); background-color: #3C1100; }
.commitment-block-title{ font-size: 4.2em; font-family: var(--ff-noto-serif); text-align: center; line-height: calc(55.2/42); }
.commitment-row{ margin-top: 4.5em; }
.commitment-info-title{ margin-bottom: .7em; padding-left: 1.25em; position: relative; font-size: 2em; line-height: calc(30/20); color: var(--yellow-color); }
.commitment-info-title::before{ content: ''; position: absolute; top: .6em; left: 0; width: .75em; height: 2px; background-color: var(--red-color); border-radius: 2px; }

@media only screen and (min-width: 769px) {
    .commitment-row{ display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row; }
    .commitment-block:nth-child(odd) .commitment-row{ flex-direction: row-reverse; }
    .commitment-phts{ width: calc(470/1160 * 100%); }
    .commitment-info{ width: calc(630/1160 * 100%); }
    #commitment01{ background-image: url(../../img/commitment/block_bg_1.jpg); }
    #commitment03{ background-image: url(../../img/commitment/block_bg_2.jpg); }
    .commitment-see-more--btn { display: none !important; }
    .commitment-text-wrapper+.commitment-text-wrapper{ margin-top: 4.3em; }
}

@media only screen and (max-width: 768px) {
    .commitment-row{ margin-top: 1.5em; }
    .commitment-interview-title{ padding: 1.4em 1em 1.5em; height: auto; background: url(../../img/share/frame_gold_1.png) no-repeat .5em .5em / 3em 3em, url(../../img/share/frame_gold_2.png) no-repeat calc(100% - .5em) .5em / 3em 3em, url(../../img/share/frame_gold_4.png) no-repeat .5em calc(100% - .5em) / 3em 3em, url(../../img/share/frame_gold_3.png) no-repeat calc(100% - .5em) calc(100% - .5em) / 3em 3em; background-color: var(--main-color); }
    .commitment-interview-title h2{ font-size: 2.6em;  }
    .commitment-interview-title h2 small{ font-size: .6923em;  }
    .commitment-interview-desc{ padding: 3.5em 2.5em 3.5em; min-height: 30em; background-image: url(../../img/commitment/sp_bg_01.jpg); }
    .commitment-block{ padding: 6em 0; }
    .commitment-block-title{font-size: 2.1em; text-align: left; }
    .commitment-gallery{ width: calc(100% + 5em); margin-left: -2.5em; }
    .commitment-info{ margin-top: 4em; }
    .commitment-info-title{ margin-bottom: 0.625em; font-size: 1.6rem; line-height: calc(24/16); }
    #commitment01{ background: url(../../img/commitment/sp_block_bg_1_top.jpg) no-repeat 0 0 / 100% auto, url(../../img/commitment/sp_block_bg_1_bottom.jpg) no-repeat 0 bottom / 100% auto; }
    #commitment03{ background: url(../../img/commitment/sp_block_bg_2_top.jpg) no-repeat 0 0 / 100% auto, url(../../img/commitment/sp_block_bg_2_bottom.jpg) no-repeat 0 bottom / 100% auto; }
    .commitment-text-wrapper+.commitment-text-wrapper{ margin-top: 5em; }
    .commitment-text--container {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 7;
      transition: max-height 0.3s ease;
    }

    .commitment-text--container.expanded {
      -webkit-line-clamp: unset;
    }
    .commitment-see-more--btn {
        margin: 1.25em auto 0;
        width: 9.125em;
        font-size: 1.6em;
        color: var(--main-color);
        cursor: pointer;
        display: none;
        text-align: center;
        line-height: 2.5em;
        border: 1px solid #CCCCCC;
        border-radius: .3125em;
        background: transparent;
    }
    .commitment-see-more--btn.second-btn{ border-color: var(--light-brown); color: var(--light-brown); }
    .commitment-see-more--btn.white-btn{ background-color: #fff; }
}