@charset "UTF-8";
/* -----------------------------------------------------------------------------
共通
----------------------------------------------------------------------------- */
#tsunageCont {
    color: #231815;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.9;
    min-width: 1080px;
    background-color: #FBFBFB;
}
#tsunageCont, .modaal-wrapper {
    font-family: 'Noto Sans JP', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fontInter {
    font-family: 'Inter', sans-serif;
}
#tsunageCont a {
    color: #231815;
    text-decoration: none;
    transition: all .5s ease;
}
#tsunageCont a:hover {
    opacity: 0.7;
}
#tsunageCont img {
    width: 100%;
}
#tsunageCont .inner {
    width: 1080px;
    margin: 0 auto;
}
ruby > rt {
    letter-spacing: 0.15em;
}
@media screen and (max-width: 750px) {
    #tsunageCont {
        font-size: 4.267vw;
        min-width: 100%;
    }
    #tsunageCont img {
        width: 100%;
    }
    #tsunageCont .inner {
        width: 89%;
        margin: 0 auto;
    }
}


/* 共通 -- ボタン */
#tsunageCont .btn_wrap a {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 2.3;
    border: 2px solid #231815;
    border-radius: 2.5rem;
    background: #FFFFFF;
    position: relative;

    padding: 6px 40px 6px 30px;
}
#tsunageCont .btn_wrap a::after {
    position: absolute;
    content: '';
    display: block;
    top: 24%;
    right: 15px;
    width: 17.28px;
    height: 17.28px;
    background-position: 100% 50%;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-image: url(../img/btn_arrow.svg);
}

@media screen and (max-width: 750px) {
    #tsunageCont .btn_wrap a {
        font-size: 4vw;
        letter-spacing: 0.15em;
        line-height: 1.4;

        padding: 2.133vw 9.067vw 2.3vw 9.067vw;
    }
    #tsunageCont .btn_wrap a::after {
        top: 29%;
        right: 3.5vw;
        width: 4vw;
        height: 4vw;
    }
}
/* 共通 -- タイトルパーツ */
#tsunageCont h2 {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: 0.35em;
}
#tsunageCont h3 {
    font-size: 29px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-align: center;
}

#tsunageCont h3::after {
    content: "";
    margin-right: -0.2em;
}
@media screen and (max-width: 750px) {
    #tsunageCont h2 {
        font-size: 5.813vw;
    }
    #tsunageCont h3 {
        font-size: 6.933vw;
        font-weight: 700;
    }
}

/* 共通 -- flex */
#tsunageCont .flex-wrap {
    display: flex;
}
@media screen and (max-width: 750px) {
    #tsunageCont .flex-wrap {
        display: block;
    }
}
/* 共通 -- テキスト関連 */
#tsunageCont .tsunageTitle {
    font-size: 29px;
    letter-spacing: 0.2em;
    line-height: 1.75;
}
/* -----------------------------------------------------------------------------
 ナビゲーション
----------------------------------------------------------------------------- */
#tsunageCont .tsunage-local-nav {
    border-bottom: 0;
    width: 100%;
}
#tsunageCont .tsunage-local-nav.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
#tsunageCont .tsunage-local-nav .inner {
    display: flex;
    align-items: center;
    justify-content: center;
}
#tsunageCont .tsunage_logo {
    width: 150px;
    flex: none;
}

#tsunageCont #tsunage_lnavi ul {
    display: flex;
    justify-content: flex-start;
    height: 100px;
    line-height: 100px;
}
#tsunageCont #tsunage_lnavi ul li:first-child {
    margin-left: 50px;   
}
#tsunageCont #tsunage_lnavi ul li + li {
    margin-left: 25px;
}
#tsunageCont #tsunage_lnavi ul li a {
    display: inline;
    color: #231815;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.2em;
    position: relative;
}
#tsunageCont #tsunage_lnavi ul li:nth-child(4) a {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.18em;
}
#tsunageCont #tsunage_lnavi ul li a::after {
    color: "";
    margin-right: -0.2em;
}
#tsunageCont #tsunage_lnavi ul li a:hover::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px;
    display: block;
    background-color: #231815;
    width: 50px;
    height: 2px;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%);
}
@media screen and (max-width: 750px) {
    #tsunageCont #tsunage_lnavi .inner {
      width: 100%;  
    }
    #stationery #tsunageCont .tsunage-local-nav,
    #stationery.is_pagetop #tsunageCont .tsunage-local-nav {
        position: fixed;
        background-color: #FCFAF5;
        top: 46px;
        left: 0;
        width: 100%;
        z-index: 10;
        height: 66px;
    }
    #stationery.spmenu_opened {
        /* when modal active */
        touch-action: none;
        -webkit-overflow-scrolling: none;
        overflow: hidden;
        /* Other browsers */
        overscroll-behavior: none;
    }
    #stationery.spmenu_opened #tsunageCont .tsunage-local-nav {
        height: 130vh;
    }
    #stationery.is_scrolled.is_loaded #tsunageCont #tsunage_lnavi {
        background-color: initial;
    }
    #stationery #tsunageCont .tsunage-local-nav.fixed,
    #stationery.is_loaded.is_pagetop #tsunageCont .tsunage-local-nav {
        top: 46px;
    }
    #stationery #tsunageCont #tsunage_lnavi {
        background-color: #FBFBFB;
        border-bottom: 0;
    }
    #stationery.spmenu_opened #tsunageCont #tsunage_lnavi {
        top: 0;
        z-index: 110;
    }
    #stationery #tsunageCont #tsunage_lnavi.fixed {
        background-color: initial;
    }
    #stationery #tsunageCont .tsunage-local-nav .inner {
        background: url(../img/local-nav-bg.png) #82CDDB;
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: bottom;
    }
    #stationery #tsunageCont #tsunage_lnavi .inner {
        display: block;
        height: 0px;
        overflow: hidden;
        transition-property: height;
        transition-duration: .3s;
    }
    #stationery.spmenu_opened #tsunageCont #tsunage_lnavi .inner {
        height: 100dvh;
    }
    #stationery #tsunageCont #tsunage_lnavi .tsunage_logo {
        width: 94.8311px;
        position: absolute;
        top: 17px;
        left: 20px;
    }
    #stationery #tsunageCont #tsunage_lnavi.fixed .tsunage_logo,
    #stationery.is_scrolled.is_loaded #tsunageCont #tsunage_lnavi .tsunage_logo,
    #stationery.spmenu_opened #tsunageCont #tsunage_lnavi .tsunage_logo {
        display: none;
    }
    #stationery #tsunageCont #tsunage_lnavi ul {
        display: block;
        height: auto;
        margin-top: 18.667vw;
        margin-left: 11.733vw;
        line-height: 1;
    }
    #tsunageCont #tsunage_lnavi ul li:first-child {
        margin-left: 0;
    }
    #stationery #tsunageCont #tsunage_lnavi ul li + li {
        margin-left: 0;
        margin-top: 7.2vw;
    }
    #stationery #tsunageCont #tsunage_lnavi ul li a {
        display: inline;
        color: #231815;
        font-size: 5.333vw;
        font-weight: 800;
        line-height: 1.3;
        letter-spacing: 0.2em;
        position: relative;
    }
    #tsunageCont #tsunage_lnavi ul li:nth-child(4) a {
        font-size: 4.8vw;
    }
    #stationery #tsunageCont #tsunage_lnavi ul li a:after {
        content: "";
        margin-right: -0.34em;
    }
    #stationery #tsunageCont #tsunage_lnavi ul li a:hover::before {
        content: "";
        position: absolute;
        bottom: -3px;
        left: 3%;
        display: block;
        background-color: #EEAF9E;
        width: 94%;
        height: 0.75px;
    }
    #stationery #tsunageCont #btn-spmenu {
        display: block;
        background-color: #fff;
        width: 40px !important;
        height: 40px;
        position: absolute;
        top: 11px;
        right: 12px;
        z-index: 999;
        border: 1px solid #231815;
        border-radius: 25em;
        cursor: pointer;
    }
    #stationery.spmenu_opened #tsunageCont #btn-spmenu {
        background-color: initial;
        width: 40px !important;
        height: 40px;
        top: 20px;
        right: 12px;
    }
    #stationery #tsunageCont #btn-spmenu .icon-animation {
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
    }
    #stationery #tsunageCont #btn-spmenu .icon-animation span {
        width: 22px;
        height: 1px;
        display: block;
        background: #231815;
        position: absolute;
        left: 50%;
        top: calc(50% - 1px);
        margin-left: -11px;
        transition: all .3s;
    }
    #stationery.spmenu_opened #tsunageCont #btn-spmenu .icon-animation span {
        width: 20px;
        height: 1px;
        margin-left: -10px;
    }
    #stationery.spmenu_opened #tsunageCont #btn-spmenu .icon-animation .middle:before,
    #stationery.spmenu_opened #tsunageCont #btn-spmenu .icon-animation .middle:after {
        background: #231815;
        width: 20px;
        height: 1px;
    }
    #stationery.spmenu_opened #kokuyo-st-main-contents .tsunage-local-nav {
        top: 0px;
        transition-duration: 0.3s;
    }
    #stationery.spmenu_opened #tsunageCont .tsunage-local-nav nav {
        height: 100%;
    }
    #stationery #tsunageCont #btn-spmenu .icon-animation .top {
        transform: translateY(-6px) scale(1);
    }
    #stationery #tsunageCont #btn-spmenu .icon-animation .middle {
        background: none;
        position: relative;
    }
    #stationery #tsunageCont #btn-spmenu .icon-animation .middle:before,
    #stationery #tsunageCont #btn-spmenu .icon-animation .middle:after {
        transition: all .3s;
        content: "";
        width: 22px;
        height: 1px;
        background: #231815;
        display: block;
        transform: rotate(0deg);
        position: absolute;
    }
    #stationery #tsunageCont #btn-spmenu .icon-animation .bottom {
        width: 11px;
        transform: translateY(6px) scale(1);
    }
    #stationery.spmenu_opened #tsunageCont #btn-spmenu .icon-animation .top {
        transform: translateY(0px) scale(0);
    }

    #stationery.spmenu_opened #tsunageCont #btn-spmenu .icon-animation .bottom {
        transform: translateY(0px) scale(0);
    }

    #stationery.spmenu_opened #tsunageCont #btn-spmenu .icon-animation .middle:before {
        transform: rotate(45deg) scaleX(1.1);
    }

    #stationery.spmenu_opened #tsunageCont #btn-spmenu .icon-animation .middle:after {
        transform: rotate(-45deg) scaleX(1.1);
    }
    #stationery.is_loaded #tsunageCont .tsunage-local-nav {
        top: 0px;
    }

    .kokuyo-st-container #kokuyo-st-main-contents .wrap {
        width: 100%;
    }

    /* 既存ヘッダー */
    #stationery.is_loaded .kokuyo-st-container #header,
    #stationery.is_loaded.spmenu_opened .kokuyo-st-container #header {
        top: -46px;
        transition-property: top;
        transition-duration: .3s;
    }
    #stationery.is_pagetop .kokuyo-st-container #header {
        top: 0px;
        visibility: visible;
    }
}

/* -----------------------------------------------------------------------------
 キービジュアル
----------------------------------------------------------------------------- */
#tsunageCont .kv {
    position: relative;
}
#tsunageCont .kv::after {
    content: "";
    display: block;
    position: absolute;
    background: url(../img/kv_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    width: 62.006vw;
    height: 5.198vw;
    top: 0px;
    left: 8.346vw;

    z-index: 0;
}
#tsunageCont .kv h2 {
    position: absolute;
    left: 80px;
    bottom: -118px;
    line-height: 2;

    z-index: 1;
}

#tsunageCont .kv h2 span {
    background-color: #FBFBFB;
    padding-left: 20px;
    padding-bottom: 7px;
}

#tsunageCont .kv h2 span.bg_yellow {
    background-color: #FAEE00;
}

#tsunageCont #contents {
    padding-top: 40px;
    overflow: hidden;
}

/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
#tsunageCont .kv_slider {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/
#tsunageCont .kv_slider{
  position: relative;
  z-index: 1;
}
#tsunageCont .kv_slider__wrap {
  display: flex;
  overflow: hidden;
  margin-left: -3.66vw;
}

#tsunageCont .kv_slider__list {
  display: flex;
  list-style: none;
}

#tsunageCont .kv_slider__list--left {
    animation :infinity-scroll-left 80s infinite linear 0.5s both;
}

#tsunageCont .kv_slider__item {
  width: calc(100vw / 1);
  margin-left: 3.66vw;
}
#tsunageCont .repeat_item {
  margin-left: 0;
}
#tsunageCont .kv_slider__item > img{
   width: 100%;
}

@media screen and (max-width: 750px) {
    #tsunageCont .kv {
        margin-top: 67px;
    }
    #tsunageCont .kv::after {
        background: url(../img/kv_bg-sp.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
        width: 100%;
        height: 112.023vw;

        top: 1vw;
        left: 0;
    }
    #tsunageCont .kv h2 {
        left: 5.333vw;
        bottom: -18.4vw;
        line-height: 2;
        letter-spacing: 0.34em;
    }
    #tsunageCont .kv h2 span {
        padding-left: 4vw;
        padding-bottom: 1.333vw;
    }
    #tsunageCont #contents {
        padding-top: 29.272vw;
    }
    #tsunageCont .kv_slider__list--left {
        animation :infinity-scroll-left 40s infinite linear 0.5s both;
    }
    #tsunageCont .kv_slider__item {
      width: 100%;
      height: 112vw;
      margin-left: 8vw;
    }
    #tsunageCont .repeat_item {
      margin-left: 0;
    }
    #tsunageCont .kv_slider__item > img{
        width: auto;
        height: 100%;
    }

}
/* -----------------------------------------------------------------------------
 AR
----------------------------------------------------------------------------- */
#ar a {
    display: block;
    width: 999px;
    margin: 0 auto;
}
#ar .bg-wrap {
    background: url(../img/concept_topbg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
    padding-top: 443px;
    padding-bottom: 100px;
}
@media screen and (max-width: 750px) {
    #ar a {
        display: block;
        width: auto;
        margin: 0 auto;
    }
    #ar .bg-wrap {
        background: url(../img/concept_topbg-sp.png);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: top;
        padding-top: 22.933vw;
        padding-bottom: 0;
    }
    #ar .bg-wrap .inner {
        width: 100%;
        background: #82CDDB;
    }
}
/* -----------------------------------------------------------------------------
 CONCEPT
----------------------------------------------------------------------------- */
#concept {
    margin-top: 40px;
    background: url(../img/concept_btmbg.png);
    background-repeat: no-repeat;
    background-position: bottom;
}

#concept h3 {
    background: #82CDDB;
    padding-top: 160px;
    padding-bottom: 117px;
}
#concept h3 span {
    position: relative;
}
#concept h3 span::before {
    content: "";
    display: block;
    background: url(../img/concept_leftbg.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 370.901px;
    height: 121.728px;

    position: absolute;
    bottom: -40px;
    left: -448.434px;
}
#concept h3 span::after {
    content: "";
    display: block;
    background: url(../img/concept_rightbg.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 460.035px;
    height: 108.244px;

    position: absolute;
    bottom: -40px;
    right: -509.056px;
}
#concept .bg-wrap {
    background: #82CDDB;
}
#tsunageCont #concept .inner {
    position: relative;
    z-index: 2;
}
#concept .bg-wrap-btm {
    position: relative;
    padding-bottom: 153px;
    overflow: hidden;
}
#concept .bg-wrap-btm::before {
    background: url(../img/concept_btmbg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    content: "";
    display: block;
    width: 1217.037px;
    height: 336.393px;
    position: absolute;
    top: 546.321px;
    z-index: 2;
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%);
}
#concept .bg-wrap-btm::after {
    background: #96BC53;
    content: "";
    display: block;
    width: 100%;
    height: 350px;
    position: absolute;
    top: 584px;
    z-index: 1;
}

#concept .concept-top .flex-left .lead-wrap .tsunageText p {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.34em;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 23px;
    white-space: nowrap;
}
#concept .concept-top .flex-left .lead-wrap .tsunageText p::after {
    content: "";
    margin-right: -0.43em;
}
#concept .concept-top .flex-left .lead-wrap .tsunageText p::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    display: block;
    background: url(../img/line_dot.svg);
    width: 120px;
    height: 3px;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%);
}
#concept .concept-top .flex-left .lead-wrap .tsunageText img {
    width: 391px;
}

#concept .concept-top .flex-left .lead-wrap .tsunageSubText {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.59;
    margin-top: 25px;
    white-space: nowrap;
}

#concept .concept-top .flex-left .btn_wrap {
    margin-top: 40px;
}
#concept .concept-top .flex-right {
    width: 650px;
    margin-left: 50px;
    margin-right: -14px;
    flex: none;
}
#concept .concept-btm {
    margin-top: 135px;
}
#concept .concept-btm .flex-left {
    width: 515px;
    flex: none;
}

#concept .concept-btm .flex-right {
    margin-top: 70px;
    margin-left: 60px;
}

#concept .concept-btm .flex-right .tsunageTitle {
    font-weight: 800;
}
#concept .concept-btm .flex-right .tsunageTitle + .tsunageText {
    margin-top: 45px;
}
#concept .concept-btm .flex-right .tsunageText {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.94;
    letter-spacing: 0.15em;
}

#concept .concept-btm .flex-right .tsunageText + .tsunageText {
    margin-top: 40px;
}
@media screen and (max-width: 750px) {
    #concept {
        margin-top: 40px;
        background: url(../img/concept_btmbg.png);
        background-repeat: no-repeat;
        background-position: bottom;
    }
    #concept h3 {
        padding-top: 24vw;
        padding-bottom: 0;
        background: url(../img/concept_h3bg-sp.png),#82CDDB;
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: 100%;
    }
    #concept h3 span::before,
    #concept h3 span::after {
        content: none;
    }
    #concept .bg-wrap {
        padding-top: 10.667vw;
    }
    #concept .bg-wrap-btm {
        position: relative;
        padding-bottom: 70.633vw;
        overflow: hidden;
    }
    #concept .bg-wrap-btm::before {
        background: url(../img/concept_btmbg-sp.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center top;
        content: "";
        display: block;
        width: 93.287vw;
        height: 229.662vw;
        position: absolute;
        top: 147.867vw;
        z-index: 2;
        left: 0;
        -moz-transform: none;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
    #concept .bg-wrap-btm::after {
        background: #96BC53;
        content: "";
        display: block;
        width: 100%;
        height: 335.733vw;
        position: absolute;
        top: 161vw;
        z-index: 1;
    }
    #concept .concept-top .flex-left .lead-wrap .tsunageText {
        text-align: center;
    }
    #concept .concept-top .flex-left .lead-wrap .tsunageText p {
        font-size: 6.667vw;
        letter-spacing: 0.2em;
        text-align: center;
        padding-bottom: 6.667vw;
        margin-bottom: 5.867vw;
    }
    #concept .concept-top .flex-left .lead-wrap .tsunageText p::after {
        content: "";
        margin-right: -0.28em;
    }
    #concept .concept-top .flex-left .lead-wrap .tsunageText p::before {
        background: url(../img/line_dot-sp.svg);
        width: 22.333vw;
        height: 0.8vw;
    }
    #concept .concept-top .flex-left .lead-wrap .tsunageText img {
        width: 76.8vw;
    }

    #concept .concept-top .flex-left .lead-wrap .tsunageSubText {
        font-size: 5.333vw;
        letter-spacing: 0.23em;
        line-height: 1.75;
        margin-top: 6.667vw;
        margin-left: 6.267vw;
        text-indent: -3vw;
    }

    #concept .concept-top .flex-left .btn_wrap {
        margin-top: 11.733vw;
        text-align: center;
    }
    #concept .concept-top .flex-right {
        width: 66.667vw;
        margin: 22.933vw auto 0;
        position: relative;
    }

    #concept .concept-top .flex-right::after {
        content: "";
        position: absolute;
        display: block;
        background: url(../img/concept_rightbg-sp.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center top;
        width: 100vw;
        height: 240vw;
        top: -17.067vw;
        left: -17vw;
        z-index: 1;
    }

    #concept .concept-top .flex-right > img {
        position: relative;
        z-index: 10;
    }
    #concept .concept-btm {
        margin-top: 40vw;
        position: relative;
    }
    #concept .concept-btm .flex-left {
        width: 87.733vw;
        margin: 0 -3vw 0 auto;
    }

    #concept .concept-btm .flex-right {
        margin: 14.667vw auto 0;
        width: 81.067vw;
    }

    #concept .concept-btm .flex-left .tsunageTitle {
        font-size: 6.933vw;
        font-weight: 800;
        line-height: 1.8;
        letter-spacing: 0.2em;
        margin-bottom: 9.333vw;
    }

    #concept .concept-btm::before {
        content: "";
        position: absolute;
        display: block;
        background: url(../img/concept_btm_leftbg-sp.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center top;
        width: 100vw;
        height: 27.76vw;
        top: -7.467vw;
        left: -5.333vw;
        z-index: 1;
    }
    #concept .concept-btm .flex-right .tsunageTitle + .tsunageText {
        margin-top: 45px;
    }
    #concept .concept-btm .flex-right .tsunageText {
        font-size: 4.533vw;
        font-weight: 500;
        line-height: 1.7;
        letter-spacing: 0.15em;
        text-align: justify;
    }

    #concept .concept-btm .flex-right .tsunageText + .tsunageText {
        margin-top: 7vw;
    }
}
/* -----------------------------------------------------------------------------
 FEATURES
----------------------------------------------------------------------------- */
#futures {
    background: url(../img/futures_topbg.png) #96BC53;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}
#futures .inner {
    position: relative;
}
#futures .inner::after {
    content: "";
    display: block;
    position: absolute;
    background: url(../img/futures_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    width: 500px;
    height: 356.943px;

    top: -128px;
    right: -86.3444px;
}
#futures h3 {
    padding-top: 160px;
    padding-bottom: 65px;
}
#futures .bg-wrap {
    padding-bottom: 0;
}
#futures .flex-wrap {
    position: relative;
    z-index: 1;
}
#futures .point_title {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.4;
    color: #F29B87;
}

#futures .tsunageTitle {
    font-weight: 900;
    white-space: nowrap;
}
#futures .tsunageText {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.9;
    width: 375px;
    text-align: justify;
}
#futures .tsunageTitle::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    margin: 35px auto 40px 0;
    background: #F29B87;
}

#futures .flex-left {
    width: 608px;
    flex: none;
}

#futures .flex-right {
    margin-left: 70px;
}

#futures .point2 {
    margin-top: 93px;
    align-items: center;
}
@media screen and (max-width: 750px) {
    #futures{
        background: url(../img/futures_topbg-sp.png) #96BC53;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
    }
    #futures .inner::after {
        width: 45.333vw;
        height: 32.363vw;

        top: -37.467vw;
        right: -1.867vw;
    }
    #futures h3 {
        padding-top: 28vw;
        padding-bottom: 13.333vw;
        position: relative;
        z-index: 1;
    }
    #futures .bg-wrap {
        padding-bottom: 0;
    }
    #tsunageCont #futures .flex-wrap {
        display: flex;
        flex-direction: column-reverse;
    }
    #futures .point_title {
        font-size: 5.333vw;
    }

    #futures .tsunageTitle {
        font-size: 6.667vw;
    }
    #futures .tsunageText {
        font-size: 4.267vw;
        margin-top: 6.667vw;
        width: 100%;
    }
    #futures .tsunageTitle::after {
        width: 21.333vw;
        height: 0.533vw;
        margin: 5.867vw auto 6.667vw;
    }

    #futures .flex-left {
        width: 100%;
    }

    #futures .flex-right {
        margin-left: 0;
        text-align: center;
    }

    #futures .point2 {
        margin-top: 41.333vw;
    }

    #tsunageCont #futures .flex-wrap.point2 .flex-right,
    #tsunageCont #futures .flex-wrap.point2 .tsunageText {
        width: 89%;
        margin-left: auto;
        margin-right: auto;
    }
    #tsunageCont #futures .flex-wrap.point2 .tsunageText {
        margin-top: 4vw;
    }
    #tsunageCont #futures .flex-wrap.point2 {
        position: relative;
    }
    #tsunageCont #futures .flex-wrap.point2 span.animal03 {
        position: absolute;
        width: 54.759vw;
        top: -41.333vw;
        right: -63px;
    }
}

/*--------------------
 animals
--------------------*/
#futures .animals {
    position: relative;
    height: 376px;
}

#futures .animals span {
    position: absolute;
    z-index: 2;
}

#futures .animals span.animal01 {
    width: 440px;
    top: 52px;
    left: -142px;
} 
#futures .animals span.animal02 {
    width: 390px;
    top: 0;
    right: 152px;
} 
#futures .animals span.animal03 {
    width: 373px;
    top: -170px;
    right: -140px;
}
#futures .animals span.animal04 {
    width: 370px;
    right: -120px;
    bottom: -145px;
}
@media screen and (max-width: 750px) {
    #futures .animals {
        position: relative;
        height: 100.8vw;
    }

    #futures .animals span.animal01 {
        width: 65.119vw;
        top: 34.667vw;
        left: -26.133vw;
    }
    #futures .animals span.animal02 {
        width: 57.719vw;
        top: 0;
        right: -13vw;
    }
    #futures .animals span.animal04 {
        width: 54.759vw;
        right: 0;
        bottom: -14.4vw;
    }

}
/* -----------------------------------------------------------------------------
 Slider
----------------------------------------------------------------------------- */
#tsunageCont .content_slider__wrap {
  display: flex;
  overflow: hidden;
}

#tsunageCont .content_slider__list {
  display: flex;
  list-style: none;
}

#tsunageCont .content_slider__list--left {
    animation :infinity-scroll-left 50s infinite linear 0.5s both;
}

#tsunageCont .content_slider__item {
  width: 341.5px;
}
#tsunageCont .content_slider__item > img{
   width: 100%;
}
@media screen and (max-width: 750px) {
    #tsunageCont .content_slider__item {
      width: 50vw;
    }
}
/* -----------------------------------------------------------------------------
 絶滅危惧種について
----------------------------------------------------------------------------- */
#endangered {
    background: url(../img/endangered_topbg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}
#endangered h3 {
    color: #FAEE00;
    padding-top: 100px;
    padding-bottom: 15px;
}
#endangered .bg-wrap {
/*    background: #96BC53;*/
    padding-bottom: 260px;
    position: relative;
}
#endangered .lead-wrap {
    text-align: center;
    padding-bottom: 50px;
}
#endangered .lead-wrap .leadText {
    font-size: 29px;
    font-weight: 900;
    line-height: 1.75;
    letter-spacing: 0.3em;
}
#endangered .lead-wrap .leadsubText {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: 0.18em;
}
#endangered .endangered_list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 75px;
    row-gap: 73px;

}
#endangered .endangered_list .endangered_item {
    position: relative;
/*    width: 282px;*/
    background-color:#FFFFFF;
    border: 14px solid #FFFFFF;
    border-bottom-width: 60px;/*下のフチ幅*/
}
#endangered .endangered_list .endangered_item .itemText {
    position: absolute;
    width: 100%;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.75;
    letter-spacing: 0.3em;
    text-align: center;
    bottom: -40px;/*文字の縦位置*/
    line-height:1.3em;/*行の高さ*/
    left:0px;
}
#endangered .bg-wrap::after {
    background: url(../img/endangered_btmbg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    content: "";
    display: block;
    width: 1143.4416px;
    height: 159.938px;
    position: absolute;
    bottom: 72.7826px;
    z-index: 2;
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%);
}
@media screen and (max-width: 750px) {
    #endangered {
        background: url(../img/endangered_topbg-sp.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
    }
    #endangered h3 {
        font-size: 6.4vw;
        padding-top: 22.667vw;
        padding-bottom: 4vw;
    }
    #endangered .bg-wrap {
        padding-bottom: 72vw;
    }
    #endangered .lead-wrap {
        padding-bottom: 5.333vw;
    }
    #endangered .lead-wrap .leadText {
        font-size: 6.667vw;
        line-height: 1.56;
    }
    #endangered .lead-wrap .leadsubText {
        font-size: 5.333vw;
        margin-top: 2.667vw;
    }
    #endangered .endangered_list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 4vw;
        row-gap: 4vw;
        margin-right: -5.333vw;
        margin-left: -5.333vw;
        margin-top: 4vw;
    }
    #endangered .endangered_list .endangered_item {
        position: relative;
        background-color:#FFFFFF;
        border: 2.733vw solid #FFFFFF;
        border-bottom-width: 9.067vw;/*下のフチ幅*/
    }
    #endangered .endangered_list .endangered_item .itemText {
        font-size: 3.2vw;
        bottom: -5.867vw;/*文字の縦位置*/
    }
    #endangered .bg-wrap::after {
        background: url(../img/endangered_btmbg-sp.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center top;
        content: "";
        display: block;
        width: 82.412vw;
        height: 44.561vw;
        position: absolute;
        bottom: 17.867vw;
        z-index: 2;
        left: 0;
        -moz-transform: none;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

/*--------------------
 モーダル詳細
--------------------*/
.modal_wrap {
    display: grid;
    align-items: stretch;
    grid-template-columns: 500px 1fr;
}
.modaal-container {
    max-width: 1080px;
    min-height: 800px;
}
.modaal-content-container {
    padding: 0 !important;
}
.modal_wrap .modal_left {
    background: #EDE1CB;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.modal_wrap .modal_left .prf-top {
    text-align: center;
}
.modal_wrap .modal_left .name {
    font-size: 33px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.3em;
}
.modal_wrap .modal_left .text {
    font-size: 23px;
    font-weight: 900;
    line-height: 1.9;
    letter-spacing: 0.1em;
    margin-top: 10px;
    margin-left: -20px;
    margin-right: -20px;
}
.modal_wrap .modal_left .illust {
    margin-top: 20px;
}
.modal_wrap .modal_left .illust img {
    width: 100%;
}
.modal_wrap .modal_left .lead {
    margin-left: -20px;
    margin-right: -20px;
}
.modal_wrap .modal_left .lead p {
    font-size: 23px;
    font-weight: 900;
    line-height: 1.95;
    letter-spacing: 0.2em;

    text-align: center;

    margin-top: 20px;
}
.modal_wrap .modal_left .prf-btm {
    font-weight: 900;
    line-height: 2;
    letter-spacing: 0.2em;
    margin-top: 15px;
}
.modal_wrap .modal_right {
    background: #FBFBFB;
    padding: 95px 15px 50px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.modal_wrap .modal_right .right-item-wrap {
    height: 665px;
    padding-right: 30px;
    overflow-y: scroll;
}
.modal_wrap .modal_right .right-item-wrap::-webkit-scrollbar {
    width: 3px;
    background-color: #FFFFFF; 
}

.modal_wrap .modal_right .right-item-wrap::-webkit-scrollbar-thumb {
    background: #C9CACA;
    width: 3px;
    border-radius: 5px;
}
.modal_wrap .modal_right .right-item + .right-item {
    margin-top: 45px;
}
.modal_wrap .modal_right .right-item .title {
    font-size: 23px;
    font-weight: 900;
    line-height: 2.2;
    letter-spacing: 0.1em;
}
.modal_wrap .modal_right .right-item .text {
    font-weight: 500;
    line-height: 2.5;
    letter-spacing: 0.15em;
    margin-top: 20px;
}
.modaal-container {
    box-shadow: none;
}
.modaal-container .modaal-close {
    position: absolute;
    border: 1px solid black;
    width: 40px;
    height: 40px;
    top: 30px;
    right: 30px;
}
.modaal-close:after, .modaal-close:before {
    top: 10px;
    left: 19px;
    width: 1px;
    height: 20px;
    border-radius: initial;
    background: #231815;
}
.modaal-close:focus:after,.modaal-close:focus:before,.modaal-close:hover:after,.modaal-close:hover:before {
    background: #231815
}
.modaal-close:focus,.modaal-close:hover {
    background: initial;
}
@media screen and (max-width: 750px) {
    .modal_wrap {
        grid-template-columns: 1fr;
    }
    .modaal-inner-wrapper {
        padding-top: 8vw;
        padding-bottom: 8vw;
    }
    .modaal-container {
        max-width: none;
        min-height: auto;
        width: auto;
        height: 90vh;
        overflow-y: scroll;
    }

    .modaal-content-container {
        padding: 0 !important;
    }
    .modal_wrap .modal_left {
        background: linear-gradient(180deg, #EDE1CB 0%, #EDE1CB 40%, #FBFBFB 40%, #FBFBFB 100%);
        padding: 16vw 6.267vw 0 4vw;
    }
    .modal_wrap .modal_left .name {
        font-size: 8.8vw;
        letter-spacing: 0.2em;
    }
    .modal_wrap .modal_left .text {
        font-size: 6.133vw;
        margin-top: 2.667vw;
        margin-left: 0;
        margin-right: 0;
    }
    .modal_wrap .modal_left .lead {
        margin-left: 0;
        margin-right: 0;
    }
    .modal_wrap .modal_left .lead p {
        font-size: 6.133vw;
        text-align: left;

        margin-top: 9.333vw;
    }
    .modal_wrap .modal_left .illust {
        width: 72vw;
        margin: 5.333vw auto 0;
    }
    .modal_wrap .modal_left .prf-btm {
        margin-top: 6.667vw;
    }
    .modal_wrap .modal_right {
        padding: 8vw 6.267vw 16vw 4vw;
    }
    .modal_wrap .modal_right .right-item-wrap {
        height: auto;
        padding-right: 0;
        overflow-y: visible;
    }
    .modal_wrap .modal_right .right-item + .right-item {
        margin-top:16vw;
    }
    .modal_wrap .modal_right .right-item .title {
        font-size: 6.133vw;
    }
    .modal_wrap .modal_right .right-item .text {
        margin-top: 4vw;
    }
    .modaal-container .modaal-close {
        width: 10.667vw;
        height: 10.667vw;
        top: 2.667vw;
        right: 2.667vw;
    }
    .modaal-close:after, .modaal-close:before {
        top: 2.667vw;
        left: 5.067vw;
        width: 0.267vw;
        height: 5.333vw;
    }
}
/* -----------------------------------------------------------------------------
 MOVIE
----------------------------------------------------------------------------- */
#movie h3 {
    padding-top: 100px;
    padding-bottom: 15px;
}
#movie .bg-wrap {
    background: #EDE1CB;
    padding-bottom: 205px;
}
#movie .lead-wrap {
    text-align: center;
    padding-bottom: 50px;
}
#movie .lead-wrap .leadText {
    font-size: 29px;
    font-weight: 900;
    line-height: 1.75;
    letter-spacing: 0.3em;
}
#movie .lead-wrap .leadsubText {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.65;
    letter-spacing: 0.18em;
}
#movie .movie_item {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9のアスペクト比 */
    height: 0;
}

#movie .movie_item iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 750px) {
    #movie h3 {
        padding-top: 26.667vw;
        padding-bottom: 5vw;
    }
    #movie .bg-wrap {
        padding-bottom: 42.667vw;
    }
    #movie .lead-wrap {
        padding-bottom: 9.333vw;
    }
    #movie .lead-wrap .leadText {
        font-size: 6.667vw;
        line-height: 1.56;
    }
    #movie .lead-wrap .leadsubText {
        font-size: 4.8vw;
        margin-top: 5.333vw;
    }
    #movie .inner {
        width: 100%;
    }
}
/* -----------------------------------------------------------------------------
 LINE UP
----------------------------------------------------------------------------- */
#lineup h3 {
    padding-top: 109px;
    padding-bottom: 70px;
}

#lineup .bg-wrap {
    background: #D3AD78;
    padding-bottom: 150px;
}
#lineup .lineup_product::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    margin: 40px auto 120px;
    background: #231815;
}

#lineup .lineup_product ul {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
#lineup .lineup_product ul + ul {
    margin-top: 55px;
}
#lineup .lineup_product ul li + li {
    margin-left: 125px;
}
#lineup .lineup_product ul li .product_title {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.55;

    margin-bottom: 18px;
    text-align: center;
}
#lineup .lineup_product ul li .product_title span {
    font-size: 16px;
}
#lineup .lineup_product ul li .product_img {
    width: 329px;
    position: relative;
}
#lineup .lineup_product ul:first-child li .product_img {
    width: 672px;
} 
#lineup .lineup_product ul li .product_icon {
    position: absolute;
    width: 130px;
    top: 48.5px;
    right: -83px;
}

#lineup .lineup_product ul li .product_name {
    font-weight: 500;
    letter-spacing: 0.15em;
    text-align: center;

    margin-top: 15px;
}
#lineup .lineup_spec {
    position: relative;
}
#lineup .lineup_spec table {
    width: 900px;
    border-collapse: collapse;
    margin: 55px auto 0;
}
#lineup .lineup_spec table caption {
    font-weight: 500;
    letter-spacing: 0.24em;
    line-height: 1.9;
    margin-bottom: 0.5rem;
}

#lineup .lineup_spec table thead th {
    background-color: #EDE1CB;
    width: 223px;
    height: 58px;
}

#lineup .lineup_spec table thead th,
#lineup .lineup_spec table tbody td {
    font-size: 15px;
    letter-spacing: 0.18em;
    line-height: 1.4;
    font-weight: 400;
    text-align: center;
    border: solid 1px #231815;
    vertical-align: middle;
}
#lineup .lineup_spec table tbody td {
    letter-spacing: 0.24em;
    padding: 8px 5px;
    background-color: #FBFBFB;
}
#lineup .lineup_spec table tbody td:nth-child(3) {
    letter-spacing: 0.18em;
}
#lineup .lineup_spec table tbody td:nth-child(4) {
    letter-spacing: 0.22em;
}
#lineup .note-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 900px;
    margin: 20px auto 0;
}
#lineup .lineup_note {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.73;
    letter-spacing: 0.15em;
}
#lineup .lineup_note span {
    color: #E60012;
}
#lineup .lineup_logo {
    position: absolute;
    top: -13px;
    right: 89px;
}
#lineup .lineup_logo .logo_img {
    margin-left: auto;
    margin-right: 0;
    width: 125px;
}
#lineup .lineup_logo .tips {
/*    text-align: right;
    font-size: 15px;
    letter-spacing: 0.15em;
    line-height: 1.7;*/

    display: none;
    position: absolute;
    padding: 15px;
    font-size: 15px;
    letter-spacing: 0.1em;
    line-height: 1.7;
    color: #231815;
    border-radius: 5px;
    background: #FFFFFF;
    width: 170px;
    border: 1.53px solid #040000;
}
#lineup .lineup_logo .tips::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 33%;
    border-style: solid;
    border-width: 20px 20px 0 0;
    border-color: #040000 transparent transparent;
    translate: -50% 100%;
}
#lineup .lineup_logo .tips::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 33%;
    border-style: solid;
    border-width: 18px 18px 0 0;
    border-color: #ffffff transparent transparent;
    translate: calc(-50% - 0.3px) 100%;
}
#lineup .lineup_logo:hover .tips{
    display: inline-block;
    top: -160px;
    left: 0;
}

@media screen and (max-width: 750px) {
    #lineup h3 {
        padding-top: 26.667vw;
        padding-bottom: 6.667vw;
    }

    #lineup .bg-wrap {
        padding-bottom: 32vw;
    }
    #lineup .lineup_product::after {
        width: 21.333vw;
        height: 0.533vw;
        margin: 12.533vw auto 20vw;
    }
    #lineup .lineup_product > .product_icon {
        width: 53.333vw;
        margin: 0 auto;
    }
    #lineup .lineup_product ul {
        display: block;
        width: 81.333vw;
        margin: 0 auto;
    }
    #lineup .lineup_product ul li + li {
        margin-top: 13.333vw;
        margin-left: 0;
    }
    #lineup .lineup_product ul li .product_title {
        font-size: 5.333vw;
        margin-bottom: 4vw;
    }
    #lineup .lineup_product ul:first-child li .product_img,
    #lineup .lineup_product ul li .product_img {
        width: 100%;
    }
    #lineup .lineup_product ul li .product_icon {
        width: 28.267vw;
        top: auto;
        bottom: 2.667vw;
        right: -4vw;
    }

    #lineup .lineup_product ul li .product_name {
        font-size: 4.267vw;

        margin-top: 5.333vw;
    }
    #lineup .lineup_spec {
        overflow-x: scroll;
        overflow-scrolling: touch;
        margin-bottom: 1em;
    }

    #lineup .lineup_spec table {
        width: 240vw;
        margin: 10.667vw auto 0;
    }
    #lineup .lineup_spec table caption {
        line-height: 1.5;
        margin-bottom: 3.733vw;
    }

    #lineup .lineup_spec table thead th {
        width: 60vw;
        height: 15.467vw;
    }

    #lineup .lineup_spec table thead th,
    #lineup .lineup_spec table tbody td {
        font-size: 4vw;
    }
    #lineup .lineup_spec table tbody td {
        letter-spacing: 0.18em;
        padding: 2.133vw 1.333vw;
    }
    #lineup .lineup_spec table tbody td:nth-child(4) {
        letter-spacing: 0.18em;
    }
    #lineup .note-wrap {
        display: block;
        width: 100%;
        margin: 5.867vw  auto 0;
    }
    #lineup .lineup_note {
        font-size: 4vw;
        line-height: 1.4;  
        letter-spacing: 0.12em;
    }
    #lineup .lineup_spec_notice {
        font-size: 3.467vw;
    }

    #lineup .lineup_logo {
        position: relative;
        top: auto;
        right: auto;
    }
    #lineup .lineup_logo .logo_img {
        margin-left: auto;
        margin-right: auto;
        width: 33.333vw;
    }
    #lineup .lineup_logo .tips {
    /*    text-align: right;
        font-size: 15px;
        letter-spacing: 0.15em;
        line-height: 1.7;*/

        display: none;
        position: absolute;
        padding: 3.2vw;
        font-size: 4vw;
        letter-spacing: 0.1em;
        line-height: 1.7;
        color: #231815;
        border-radius: 5px;
        background: #FFFFFF;
        width: 45.333vw;
        border: 1.53px solid #040000;
    }
    #lineup .lineup_logo .tips::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 20%;
        border-style: solid;
        border-width: 20px 20px 0 0;
        border-color: #040000 transparent transparent;
        translate: -50% 100%;
    }
    #lineup .lineup_logo .tips::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 20%;
        border-style: solid;
        border-width: 18px 18px 0 0;
        border-color: #ffffff transparent transparent;
        translate: calc(-50% - 0.3px) 100%;
    }
    #lineup .lineup_logo:hover .tips{
        display: inline-block;
        top: -160px;
        left: auto;
        right: 6.667vw;
    }
}
/* -----------------------------------------------------------------------------
 ABOUT
----------------------------------------------------------------------------- */
#about .bg-wrap {
    background-color: #EDE1CB;
    padding-bottom: 144px;
}
#about h3 {
    background: url(../img/about_topbg.png) #D3AD78;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    padding-top: 160px;
    padding-bottom: 65px;
}
#about .about-btm {
    margin-top: 115px;
}
#about .flex-left {
    width: 430px;
    margin-left: 50px;
    flex: none;
}
#about .flex-right {
    margin-left: 65px;
}
#about .tsunageTitle {
    font-weight: 900;
}

#about .tsunageText {
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: 0.15em;
    text-align: justify;
}

#about .tsunageText::before {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    margin: 35px auto 40px 0;
    background: #231815;
}

#about .btn_wrap {
    margin-top: 20px;
    text-align: center;
}

#about .btn_wrap a {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2em;
    padding: 6px 50px 6px 55px;
}
@media screen and (max-width: 750px) {
    #about .bg-wrap {
        padding-bottom: 40vw;
    }
    #about h3 {
        background: url(../img/about_topbg-sp.png) #D3AD78;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
        padding-top: 24vw;
        padding-bottom: 17.6vw;
    }
    #about .about-btm {
        margin-top: 115px;
    }
    #about .flex-left {
        width: 100%;
        margin-left: 0;
    }
    #about .flex-right {
        margin-top: 9.333vw;
        margin-left: 0;
    }
    #about .tsunageTitle {
        font-size: 6.4vw;
        letter-spacing: 0.2em;
        text-align: center;
    }

    #about .tsunageTitle span {
        font-size: 7.733vw;
        letter-spacing: 0.12em;
    }

    #about .tsunageText {
        font-weight: 500;
        line-height: 1.9;
        letter-spacing: 0.15em;
        text-align: left;
    }

    #about .tsunageText::before {
        width: 21.333vw;
        height: 0.533vw;
        margin: 6.667vw auto 9.333vw;
        background: #231815;
    }

    #about .btn_wrap {
        margin-top: 10.667vw;
    }

    #about .btn_wrap a {
        font-size: 4.267vw;
        padding: 2.133vw 14.667vw 2.3vw 14.667vw;
    }
    #about .btn_wrap a::after {
        top: 32%;
    }
}
/* -----------------------------------------------------------------------------
 SHOP
----------------------------------------------------------------------------- */
#shop .bg-wrap {
    background: url(../img/shop_topbg.png) #EDE1CB;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    padding-top: 224px;
    padding-bottom: 190px;
}

#shop .online_links {
    width: 100%;
    max-width: 808px;
    margin: 0 auto;

    position: relative;
}

#shop .online_links::before {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    margin: 25px auto 35px;
    background: #231815;
}

#shop .online_links ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    list-style-type: none;
    flex-wrap: wrap;
}

#shop .online_links ul li {
    width: 100%;
    max-width: 190px;
    height: 50px;
    border: 1px solid #231815;
    position: relative;
    background-color: #FFFFFF;
    background-image: url(../img/icon_arrow.png);
    background-repeat: no-repeat;
    background-position: right 6px center;
}
#shop .online_links ul li + li {
    margin-left: 16px;
}
#shop .online_links ul li .aWrap {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-51%);
    line-height: 1em;
    text-align: center;
}

#shop .online_links ul li a {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
}
#shop .online_links ul li a:hover {
    opacity: 0.7;
}
#shop .online_note {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2em;
    margin-top: 35px;
    text-align: center;
}
@media screen and (max-width: 750px) {
    #shop .bg-wrap {
        background: url(../img/shop_topbg-sp.png) #EDE1CB;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
        padding-top: 29.333vw;
        padding-bottom: 33.333vw;
    }

    #shop .online_links {
        width: 100%;
        max-width: 808px;
        margin: 0 auto;

        position: relative;
    }

    #shop .online_links::before {
        content: "";
        display: block;
        width: 80px;
        height: 2px;
        margin: 25px auto 35px;
        background: #231815;
    }

    #shop .online_links ul li {
        max-width: 100%;
        margin-bottom: 4vw;
        margin-left: 0px;
        background-position: right 12px center;
    }
    #shop .online_links ul li + li {
        margin-left: 0;
    }
    #shop .online_links ul li .aWrap {
        transform: translateY(-50%) translateX(-50%);
    }

    #shop .online_note {
        font-size: 3.733vw;
        margin-top: 8vw;
        letter-spacing: 0.15em;
    }
}