@charset "utf-8";
/* CSS Document */

*{
    padding: 0;
    margin: 0;
    box-sizing:border-box;
}

body{
    font-family: 'Noto Serif JP', serif;
    font-size: 18px;
    font-weight: bold;
}

.english-font{font-family: 'Cormorant Garamond', serif;}

section{position: relative;}

/*h2各見出し start*/
h2{
    width: 45%;
    text-align: center;
    font-size: 36px;
    letter-spacing: 9px;
    margin: 23px auto 65px;
}

h2 span{
    font-size: 22px;
    margin-bottom: 9px;
    display: flex;
    align-items: center;
}

h2:before {
    content: '';
    width: 105px;
    height: 30px;
    background-size: contain;
    margin: 0 auto 17px;
    display: block;
}

h2 span:before,h2 span:after {
    content: "";
    height: 1px;
    flex-grow: 1;
}

h2 span:before {margin-right: 1rem;}
h2 span:after {margin-left: 1rem;}

.tittle-yellow{color:#eac105;}
.tittle-yellow span:before,.tittle-yellow span:after{background-color:#eac105;}

.tittle-brown{color:#40220f;}
.tittle-brown span:before,.tittle-brown span:after{background-color:#40220f;}

.tittle-green{color:#074023;}
.tittle-green span:before,.tittle-green span:after{background-color:#074023;}

.tittle-yellow:before {background: url(../image/tittle-icon1.webp) no-repeat;}
.tittle-brown:before {background: url(../image/tittle-icon2.webp) no-repeat;}
.tittle-green:before {background: url(../image/tittle-icon3.webp) no-repeat;}

/*下層ページのタイトル*/
.page-tittle-brown{
    color:#40220f;
    width: 71%;
    text-align: center;
    font-size: 36px;
    letter-spacing: 9px;
    margin: 23px auto 65px;
    z-index: 1;
    position: sticky;
}
.page-tittle-brown span:before,.page-tittle-brown span:after{background-color:#40220f;}

.page-tittle-brown span{
    font-size: 22px;
    margin-bottom: 21px;
    display: flex;
    align-items: center;
}


.page-tittle-brown span:before,.page-tittle-brown span:after {
    content: "";
    height: 1px;
    flex-grow: 1;
}

.page-tittle-brown span:before {margin-right: 1rem;}
.page-tittle-brown span:after {margin-left: 1rem;}


@media screen and (max-width: 1215px) {
    .tittle-yellow{margin: 0px auto 65px;}

}

@media screen and (max-width:990px) {
    h2,.page-tittle-brown{
        font-size: 32px;
        width: 90%;
    }

    h2 span,.page-tittle-brown span {font-size: 18px;}
    .tittle-yellow,.page-tittle-brown{padding-top: 23px;}
}


@media screen and (max-width: 700px) {
    .page-tittle-process-company{
        margin-bottom: 32px;
    }
}

@media screen and (max-width: 600px) {

    .tittle-yellow span,.page-tittle-brown span {
        margin-bottom: 6px;
    }

    h2,.page-tittle-brown{
        font-size: 28px;
        letter-spacing: 4px;
        padding: 70px 0 0;
    }

    h2 span,.page-tittle-brown span{font-size: 16px;}

    .tittle-yellow ,.page-tittle-brown{
        padding-top:0;
        margin: 23px auto 70px;
        line-height: 1.4;
    }
}
@media screen and (max-width: 450px){
    .tittle-yellow {
        padding-top: 0;
        margin: -18px auto 70px;
        line-height: 1.4;}
}
/*h2見出し end*/

/*トップへ戻るボタンPC用 start*/
#page-top-pc{
    width: 80px;
    height: 80px;
    background: #074023;
    color: #fff;
    text-align: center;
    z-index: 1;
    position: fixed;
    right: 36px;
    bottom: 55px;
    box-shadow: 1px 1px 2px #3a3a3a;
}

#page-top-pc a{
    letter-spacing: 3px;
    font-size: 15px;
    position:absolute;
    left: 50%;
    transform: translate(-50%, 31%);
}

#page-top-pc span{display: block;}

#page-top-pc a::before {
    content: '';
    background: url(../image/arrow-top.webp) no-repeat;
    background-size: 100%;
    transition: all .5s ease;
    display:block;
    margin: 0 auto;
    width: 19px;
    height: 15px;
}

#page-top-pc a:hover::before {
    transform: translateY(-9px);
}

@media screen and (max-width: 600px) {
    #page-top-pc{display: none !important;}
}
/*トップへ戻るボタンPC用　end*/

/*index以外共通トップ start*/

.content-top{
    margin-top: 116px;
}

.page-head{
    position: relative;
}

.page-head p {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8vw;
    font-weight: bold;
    color: #204e20;
    text-align: center;
}

.page-head p:before {
    content: '';
    background: url(../image/tittle-icon3.webp) no-repeat;
    width:95px;
    height: 29px;
    display: block;
    background-size: cover;
    margin: 0 auto 21px;
}

.other-online-btn{
    position: absolute;
    bottom: -80px;
    right: 28px;
    z-index: 1;
}

.p-list{
    display: flex;
    padding:9px 16% 0;
}

.p-list-arrow{
    padding: 0 16px;
}

.p-current{color:#076134;}

@media screen and (max-width:1300px) {
    .content-top{
        margin-top: 0;
    }
}
@media screen and (max-width:990px) {

    .page-head p {
        font-size: 3.3vw;
        color: #eac107;
    }

    .page-head p:before {
        background: url(../image/tittle-icon1.webp) no-repeat;
    }

    .other-online-btn{display: none;}
}

@media screen and (max-width:600px) {
    .page-head p:before {
        margin: 0 auto 6px;
    }
}
@media screen and (max-width:1200px) {
    .page-head p:before {
        margin: 0 auto 6px;
    }

    .p-list {
        display: none;
    }
}
/*index以外共通トップ end*/

/* header start */
#top-head {
    display: flex;
    border-bottom: 4px solid #eac105;
    background:#022615;

    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
}

#sp-head{
    margin-right:auto;
}

.logo-wrap{
    padding: 15px 0 10px;
}

.logo {
    width: 250px;
}

#header-menu{
    width: 65%;
    flex-wrap: wrap;
    align-items: center;
    display: flex;
    justify-content:space-evenly;
}
#header-menu img {
    margin: 0 auto;
    box-shadow: 1px 1px 2px #3a3a3a;
}

#header-menu li{
    padding-left: 41px;
}

#header-menu a{
    color: #eac105;
    font-size: 18px;
}

#header-menu a{/*下線アニメーション*/
    padding-bottom: 7px;
    position: relative;
  }

#header-menu a::before {
    background-color: #eac105;
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    transition: .5s all;
    width: 0;
}

#header-menu a:hover::before{
    width: 100%;
}/*下線アニメーション*/


.btn-blog a,.btn-contact a{
    font-size: 16px;
}

.btn-blog,.btn-contact{
    align-items: center;
    align-content: center;
    text-align: center;
    display: grid;
    height: 100%;
    width: 120px;
}

.btn-blog{
    background: #40220f;
    padding: 0;
    color: #eac105;

}

.btn-contact{
    background:#eac105;
    padding: 0 6px;
}

.btn-contact{
    color: #074023 !important;
}

.btn-blog::before,.btn-contact::before{
    content: '';
    display: block;
}

.btn-blog::before{
    background: url(../image/icon-blog.webp) no-repeat;
    width: 28px;
    height: 28px;
    margin: 0 auto 8px;
}

.btn-contact::before{
    background: url(../image/icon-contact.webp) no-repeat;
    width: 35px;
    height: 25px;
    background-size: contain;
    margin: 0 auto 10px;
}

#nav-toggle {
    display: none;
}

.menu-sp{display: none;}
.menu-btn-sp{display: none;}
.menu-btn-pc{display: block;display: flex;}

@media screen and (max-width: 1450px) {
    #header-menu li {
        padding-left: 8px;
    }
}

@media screen and (max-width: 1300px){
    .menu-sp{display:block;}
    .menu-btn-sp{display: block;}
    .menu-btn-pc{display: none;}

    .content-top {
        margin-top: 75px;
    }

    #top-head{
        width: 100%;
        padding: 0;
        top: 0;
        position: fixed;
        margin-top: 0;
        z-index: 2;
        border-bottom: none;

    }

    #sp-head {
        background:#eac105;
        width: 100%;
        height: 75px;
        z-index: 999;
        position: relative;

        display: flex;
    }

    .logo-wrap{
        width: 19%;
        margin-right: auto;
    }

    #top-head .logo {
        position: absolute;
        left: 3px;
        top: 2px;
        width: 194px;
    }

    #header-menu {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -645px;
        background: #074023;
        width: 100%;
        text-align: center;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }

    #header-menu li {
        width: 100%;
        padding:17px 0 15px;
        text-align: left;
        border-bottom: 1px solid #ffffff6b;
    }

    #header-menu li{
        padding-left: 13px;
    }

    #header-menu a {
        font-size: 17px;
        position: unset;
    }

    #header-menu a::after{
        content: '\f054';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        right: 20px;
    }

    .sp-online{
        text-align: center !important;
        padding: 27px 0 24px !important;
    }

    .sp-online a::after{
        content: '' !important;
    }

    #nav-toggle {
        display: block;
        position: absolute;
        right: 26px;
        top: 20px;
        width: 34px;
        height: 36px;
        cursor: pointer;
        z-index: 101;
    }

    .buger-menu span:nth-of-type(3)::after {
        content:"MENU";
        transition:.5s all ease;
        position: absolute;
        color: #eac105;
        top:5px;
        font-size: 0.6rem;
        text-transform: uppercase;
    }

    .buger-menu.active span:nth-of-type(3)::after {
        content:"CLOSE";
        top:5px;
    }

    #nav-toggle span {
        display: block;
        position: absolute;
        height: 1px;
        width: 100%;
        background: #eac105;
        left: 0;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
    }

    #nav-toggle span:nth-child(1) {top: 0;}
    #nav-toggle span:nth-child(2) {top: 11px;}
    #nav-toggle span:nth-child(3) {top: 22px;}

    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .open #nav-toggle span:nth-child(2) {
       -webkit-transform: rotate(-135deg);
       -moz-transform: rotate(-135deg);
       transform: rotate(-135deg);
    }

    .open #nav-toggle span:nth-child(3) {
        width: 0;
    }

    .open #header-menu {
        -moz-transform: translateY(720px);
        -webkit-transform: translateY(720px);
        transform: translateY(720px);
    }

    .buger-wrap{
        width: 78px;
        background-color: #074023;
    }

    .menu-btn,.buger-wrap{
        z-index: 999;
    }

    .btn-blog, .btn-contact {
        width: 86px;
        padding: 0 2px;
    }

    .menu-btn {
        width: auto;
        margin: 0;
    }

    .btn-blog {
        width:78px;
    }
    .btn-contact{
        display: none;
    }

    .btn-blog a, .btn-contact a {
        font-size: 12px;
    }

    .btn-blog::before {
        width: 22px;
        height: 22px;
        margin: 0 auto 5px;
    }

    .btn-contact::before {
        width: 27px;
        height: 20px;
    }

    .btn-contact::before,.btn-blog::before {
        background-size: cover;
    }
}

@media screen and (max-width:600px){

    #top-head .logo {
        width: 165px;
    }

    #sp-head {
        height: 64px;
    }

    .content-top {
        margin-top: 64px;
    }

    #header-menu {
        top: -656px;
    }

    #nav-toggle {
        top: 15px;
    }

}
/*header end*/

/*index ファーストビュー start*/

.first-view {
    position: relative;
    overflow: hidden;
    width: 100%;
    background-size: cover;
    background-position: center;
    height: calc(100vh - 116px);
    margin-top: 116px;
  }
  .slide-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    animation: slider-1 12s linear infinite;
  }
  .slide-image:nth-child(1) {
    background-image: url(../image/main01.webp);
    animation-delay: -2s;
  }
  .slide-image:nth-child(2) {
    background-image: url(../image/main02.webp);
    animation-delay: 2s;
  }
  .slide-image:nth-child(3) {
    background-image: url(../image/main11.webp);
    animation-delay: 6s;
  }
	.slide-image:nth-child(4) {
    background-image: url(../image/main03.webp);
    animation-delay: 10s;
  }

  @media screen and (min-width: 801px){
    .first-view-sp{display: none;}
}
@media screen and (max-width: 800px){
    .slide-image{display: none;}
    .first-view-sp {
        position: relative;
        overflow: hidden;
        width: 100vw;
        background-size: cover;
        background-position: center;
        height: calc(100vh - 156px);
      }
      .slide-image-sp {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        opacity: 0;
        animation: slider-1 12s linear infinite;
        margin-top: 63px;
      }
      .slide-image-sp:nth-child(1) {
        background-image: url(../image/main01-sp.webp);
        animation-delay: -2s;
      }

      .slide-image-sp:nth-child(2) {
        background-image: url(../image/main02-sp.webp);
        animation-delay: 2s;
      }

      .slide-image-sp:nth-child(3) {
        background-image: url(../image/main03-sp.webp);
        animation-delay: 6s;
      }
}

 @keyframes slider-1 {
    /* 非表示状態からフェードインを開始する */
    0% {
      opacity: 0;
    }
    /* フェードインを完了し完全表示する */
    4.16% {
      opacity: 1;
    }
    /* ここまで完全表示を維持したらフェードアウトを開始する */
    33.33% {
      opacity: 1;
    }
    /* フェードアウトを完了し非表示にする */
    41.66% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }*
.first-viwe-txt,.first-viwe-online{position: absolute;}

.first-viwe-txt{
    transform: translate(-50%, -50%);
    top: 44%;
    left: 41%;
}

.mv-txt{
    color: white;
    line-height: 1.6;
    margin-top:2.6vw;
    font-size:41px;
    text-shadow: 1px 1px 2px #3a3a3a;
}

.first-viwe-online{
    bottom:18px;
    right:19px;
    width: 15%;
}

.first-viwe-online img{
    width: 100%;
}

@media screen and (max-width: 1300px){
    .first-view {
        /*height: calc(100vh - 116px);*/
        height: calc(100vh - 165px);
        margin-top: 0px;
    }

    .first-viwe-txt p {
        font-size: 37px;
    }

    .first-viwe-online {
        display: none;
    }
}

@media screen and (max-width: 1009px){
    .first-viwe-txt {
        left: 50%;
        width: 77%;
    }

    .first-viwe-txt img {
        width: 279px;
    }

    .first-viwe-txt p {
        font-size: 4.7vw;
    }
}

@media screen and (max-width: 600px) {

    .first-view {
        background-position: 69%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 550px) {

    .first-viwe-txt {
        width: 90%;
    }

    .first-viwe-txt img {
        width: 240px;
    }

    .first-viwe-txt p {
        font-size: 5.8vw;
    }

}
/*index ファーストビュー end*/

/*title start*/
.title-green1{
    padding: 5px 0 0 14px;
    width: 52%;
}

.title-green2{
    padding: 5px 15px 0 14px;
    width: 52%;
    min-width: 527px;
}

.title-green3{
    padding: 5px 15px 0 14px;
    width: 83%;
    min-width: 527px;
}

.title-green4{
    padding: 5px 15px 0 14px;
    width: 86%;
    min-width: 527px;
}

.title-green1,.title-green2,.title-green3,.title-green4{
    display: flex;
    align-items: center;
    background: #074023;
    font-size: 23px;
    color: #fff;
    position: absolute;
    top: -34px;
    left: -19px;
    height: 64px;
}

@media screen and (max-width: 990px){
    .title-green1,.title-green2,.title-green3,.title-green4{
        font-size: 20px;
        height: 47px;
    }

    .title-green1{
        padding: 3px 0 0px 14px;
    }

    .title-green2{
        width: fit-content;
        min-width: unset;
        z-index: 1;
    }

    .title-green3{
        width: fit-content;
        min-width: unset;
        z-index: 1;
    }

    .title-green4{
        width: 87%/*fit-content*/;
        min-width: unset;
    }
}

@media screen and (max-width: 845px){
    .title-green1,.title-green2,.title-green3,.title-green4{
        font-size: 17px;
    }

    .title-green1{
        width: 55%;
    }

    .title-green2{
        padding: 2px 15px 0 14px;
    }

    .title-green3{
        padding: 2px 15px 0 14px;
    }

    .title-green4{
        padding: 2px 15px 0 14px;
    }
}
@media screen and (max-width: 700px){
    .title-green1,.title-green2,.title-green3,.title-green4{
        font-size: 17px;
        position: unset;
        width: 100%;
    }

    .title-green1 {
        padding:13px 0 8px 14px;
    }

    .title-green2{
        padding:10px 0 8px 14px;
    }

    .title-green3{
        padding:10px 0 8px 14px;
        line-height: 1.5;
    }

    .title-green4{
        padding:10px 0 8px 14px;
        line-height: 1.5;
    }
}

@media screen and (max-width: 590px){

    .title-green3,.title-green4 {
        height: auto;
        padding:10px 6px 8px 14px;
    }
}

@media screen and (max-width: 421px){
    .title-green1,.title-green2{
        height: auto;
        padding:10px 2px 8px 14px;
        line-height: 1.5;
    }
}

/*title-green end*/

/*index 商品紹介 start*/
.back1{
    background: url(../image/back-green.svg) no-repeat;
    background-size: cover;
    padding: 50px 0 85px;
    background-position:center top;
}

.block3{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 10%;
}

.block3 div{
    width: 32%;
    text-align: center;
}

.block3 div img{
    max-width: 100%;
}

.block3 div p{
    text-align: center;
    color: white;
    margin-top: 18px;
    line-height: 1.7;
}

.block3 div span {
    display: block;
    font-size: 23px;
}

.btn-yellow {
    text-align: center;
    width: 370px;
    margin: 46px auto 0;
    height: 69px;
}

.btn-yellow a {
    background-color: #eac105;
    color: #074023;
    position: relative;
    font-size: 21px;
    display: block;
    width: 100%;
    height: 100%;
    align-items: center;
    display: grid;
}

.btn-yellow a::before {
    content: "";
    position: absolute;
    display: block;
    top: 2px;
    bottom: 2px;
    left: 2px;
    right: 2px;
    border: 3px solid #074023;
}

.btn-yellow a::after {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 50px;
    transition: all .5s ease;
}
.btn-yellow a:hover::after{
    right: 35px;
}

@media screen and (max-width: 1290px) {
    .back1 {
        padding: 24px 0 56px;
    }
    .block3 div {width: 31%;}
    .block3 div span {font-size: 22px;}
    .back1 img {margin: 0 auto;}
}

@media screen and (max-width: 1100px) {
    .block3 {padding: 0 6%;}
    .block3 div p {font-size: 16px;}
    .block3 div span {font-size: 19px;}
}

@media screen and (max-width: 986px) {
    .back1 {
        padding-top:0;
    }

}

@media screen and (max-width:855px) {
    .back1 {
        padding-top: 59px;
    }

    .block3 div {
        width: 100%;
        margin-bottom: 37px;
    }

    .block3 div p {font-size: 21px;}
    .block3 div span {font-size: 27px;}

    .btn-yellow {
        width: 296px;
        height: 55px;
    }
}

/*index 商品紹介 end*/

/*index  宮古島ブランドの極上マンゴー start*/
.back2{
    /*background: url(../image/back-beach.webp) no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;*/
    padding: 50px 0 85px;
    max-width: 100%;
}
.back2:after{
  content: '';
  background: url(../image/back-beach.webp) no-repeat;
  background-size: cover;
  width: 100%; height: 100%;
  position: fixed; top: 0; left: 0; z-index: -1;
}

.brand-wrap{
    height:100%;
    position: relative;
}

.brand-left{
    background: #ffffffb8;
    position: absolute;
    width: 61%;
    height:100%;
    top: 45px;
}

.brand-left-inner{
    width: 74%;
    margin-left: auto;
}

.brand-left p{
    transform: translate(-14%, -50%);
    line-height: 1.7;
    color: #40220f;
    font-size: 1.2vw;
    top: 50%;
    position: absolute;
}

.brand-right{
    margin-left: auto;
    width: 39%;
    z-index: 1;
    position: relative;
}

.brand-right img{
    width: 100%;
}

@media screen and (max-width:1000px) {

    .brand-left {
        width: 63%;
        top: 30px;
    }

    .brand-left-inner {
        width: 68%;
    }

    .brand-left p {
        font-size: 1.4vw;
    }
}


@media screen and (max-width:854px) {
    .tittle-brown {
        padding: 56px 0 0;
    }

    .back2 {
        padding:0;
        background-position: 20%;
    }

    .brand-left {
        position: unset;
        width: 100%;
        margin: 0 auto;
        padding:4% 6% 2%;
    }

    .brand-left-inner {
        width: 100%;
    }

    .brand-left p {
        font-size: 17px;
        transform: unset;
        position:unset;
    }

    .brand-right {
        width: 100%;
        padding: 0 6% 5%;
        background:#ffffffc2;
    }
}
/*index  宮古島ブランドの極上マンゴー end*/

/*index  生産者のこだわり start*/
.back3{
    background: url(../image/back-obsession.webp) no-repeat;
    background-size: cover;
    padding: 50px 0 85px;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.back3:before,.back3:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

.back3:before {
    background: url(../image/obsession-back-img1.webp) no-repeat;
    top: 0px;
    left: 90px;
}

.back3:after{
    background: url(../image/obsession-back-img2.webp) no-repeat;
    top:0px;
    right:96px;
    background-position: right top;
}

.obsession-inner{
    padding: 0 10%;
}

.obsession-top-txt{
    line-height: 1.7;
    color: #074023;
    font-size: 1.4vw;
    text-align: center;
}

.obsession-wrap{
    /*border-image: url(../image/obsession-frame.webp) 30;
    border-width: 40px;*/
    margin: 5% auto 0;
    max-width: 1100px;
}

.obsession-block{
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 30px;
}

.obsession-block:nth-of-type(3){
    margin-bottom: 0;
}

.obsession-right{
    width:49%;
}

.obsession-right img{
    max-width: 880px;
    width: 100%;
}

.obsession-left{
    width: 51%;
    background: #fff;
    padding: 40px 40px 21px;
}

.obsession-left-wrap{
    display: flex;
    position: relative;
    margin-bottom: 18px;
}

.obsession-left-tittle{
    position: absolute;
    top: 50%;
    left:155px;
    transform: translate(0, -50%);
    font-size: 46px;
    letter-spacing: 3px;
    color: #dbe0da;
}

.obsession-left-txt {
    color: #40220f;
    line-height: 1.7;
    font-size: 22px;
}

@media screen and (max-width:1250px){

    .obsession-left {
        padding: 25px 25px 16px;
    }

    .obsession-right {
        width: 450px;
        margin-left: auto;
    }

    .obsession-left-txt {
        font-size: 19px;
    }
}

@media screen and (max-width: 1100px){
    .obsession-inner {
        padding: 0 6%;
        margin-bottom: 90px
    }
}

@media screen and (max-width: 1075px){
    .back3:before {left: 45px;}
    .back3:after {right: 46px;}

    .obsession-wrap {
        margin: 5% 0%;
    }

    .obsession-top-txt {
        font-size: 18px;
        text-align: left;
    }

    .obsession-block {
        flex-wrap: wrap;
    }

    .obsession-right{width: 100%;}

    .obsession-left{
        width: 100%;
        padding: 22px 22px 60px;
    }

    .obsession-left-wrap {
        margin-bottom: 68px;
    }

    .obsession-left-img img{
        position: absolute;
        bottom: -48px;
    }

    .obsession-left-tittle{
        top: 0%;
        right: 0px;
        left: auto;
        font-size: 32px;
        margin-top: 5px;
    }
}

@media screen and (max-width: 800px){
    .back3:before{
        left: 14px;
        top: 0px;
        background-size: contain;
        width: 164px;
    }

    .back3:after {
        right: 21px;
        top: 0px;
        width: 128px;
        background-size: contain;
    }
}

@media screen and (max-width: 600px){

    .back3 {
        padding: 0;
    }

    .obsession-left-txt {
        font-size: 17px;
    }

    .obsession-left-img img {
        bottom: -38px;
        width: 80px;
    }
}
/*index  生産者のこだわり end*/


/*process start*/
.back-glay{
    background: #eeeeee;
    padding:40px 18%;
}

.process-txt:before{
    content: '';
    background: url(../image/process-back-img.webp) no-repeat;
    display: block;
    width: 97px;
    height: 86px;
    background-size: cover;
    margin: 21px auto 13px;
}

.process-txt{
    line-height: 1.7;
    color: #40220f;
    text-align: center;
    font-size: 1.7vw;
    margin-bottom: 85px;
}

.block-patern1-wrap{
    background: #fff;
    margin-bottom: 80px;
    position: relative;
    box-shadow: 0 4px 14px 0 rgb(0 0 0 / 50%);
}

.brown-txt{
    color: #40220f;
    line-height: 1.7;
}

.block-patern1{
    display: flex;
    padding:15px 15px;
}

.block-patern1-left{width: 50%;margin-right:auto;margin-top:30px;}
.block-patern1-right{width: 48%;position: relative;}

.block-patern1-number{
    font-family: 'Cormorant Infant', serif;
    color: #eac105;
    font-size: 40px;
    padding-right: 13px;
}

.block-patern1-month{
    font-size: 16px;
    padding-left: 8px;
}

.block-patern1-left p{
    font-size: 1vw;
}

.block-patern1-right p{
    color: #fff;
    position: absolute;
    bottom: 4px;
    left: 6px;
    font-size: .9vw;
}

@media screen and (max-width:1290px) {
    .back-glay {
        padding: 23px 12%;
    }

    .block-patern1-left p {font-size: 1.2vw;}
}

@media screen and (max-width: 1100px){
    .back-glay {
        padding: 23px 6%;
    }

    .block-patern1-number {
        font-size: 35px;
    }

    .block-patern1-month {
        font-size: 15px;
        padding-left: 5px;
    }

    .block-patern1-left p {font-size: 1.3vw;}
}

@media screen and (max-width: 990px){
    .block-patern1-left {
        margin-top: 20px;
    }
}

@media screen and (max-width: 845px){

    .block-patern1-left {width: 52%;margin-top: 10px;}
    .block-patern1-right{width: 46%;}

    .block-patern1-right p {left: 2px;}

    .block-patern1-number {font-size: 31px;}
    .block-patern1-month {font-size: 13px;}
}

@media screen and (max-width: 700px){

    .process-txt{
        margin-bottom: 45px;
        font-size: 18px;
    }

    .block-patern1-wrap {
        margin-bottom: 45px;
    }

    .block-patern1{
        flex-flow: column-reverse;
        padding: 0;
    }

    .block-patern1-left {
        width: 100%;
        margin:0;
        padding:14px 15px;
    }

    .block-patern1-right{
        width: 100%;
    }

    .block-patern1-left p {
        font-size:15px;
    }

    .block-patern1-right p {
        left: 6px;
    }
}
/*process end*/

/*item start 960px、780px、460pxで分ける*/
/*.yellow-item{
    background: #eac105;
    padding: 135px 0 17%;
    margin: -85px calc(50% - 50vw) 0;
    width: 100vw;
}

.item-2block{
    display: flex;
    align-items: center;
}

.item-2block-left{
    padding-left: 18%;
    margin-right: auto;
    width: 55%;
}

.item-2block-right{

    width: 39%;
    position: absolute;
    right: 0;
}

.item-2block p{
    color: #40220f;
    line-height: 1.7;
    font-size:1.2vw;
    padding-left:17px;
}
*/
.item-3block{
    display: flex;
    justify-content:space-between;
    margin-top: -45px;
}

.item-3block div{
    width: 31%;
}

.item-3block img{
    filter: drop-shadow(4px 2px 4px #797979);
}

.item-3block p{
    text-align: center;
    color: #40220f;
    margin-top: 15px;
}

.item-padding{
    padding: 96px 17px 76px;
    margin-bottom: 90px;
}

.item-top-txt{
    font-size: 1.1vw;
}

.back-obsession{
    /*padding-top: 102px;*/
}

.item-guide1,.item-guide2{
    background: #fff;
    color: #40220f;
    position: relative;
}

.item-guide1-tittle{background: #cc3433;}
.item-guide2-tittle{background:#339966;}

.item-guide1-tittle,.item-guide2-tittle{
    color: #fff;
    display: inline-block;
    padding: 22px 11px 18px 16px;
    font-size: 22px;
    position: absolute;
    left: -19px;
    top: -22px;
}

.item-guide1-tittle:after{background: url(../image/item-illust1.webp) no-repeat;}
.item-guide2-tittle:after{background: url(../image/item-illust2.webp) no-repeat;}

.item-guide1-tittle:after,.item-guide2-tittle:after{
    position: absolute;
    content: '';
    display: block;
    background-size: contain;
    width: 171px;
    height: 90px;
    top: -15px;
    right: -188px;
}

.item-guide1-wrap {
    display: flex;
}

.item-guide1-left{
    width:52%;
    margin-right: auto;
}

.item-guide1-right{
    width:45%;
}

.item-guide1-left p{
    color: #40220f;
    line-height: 1.7;
    font-size: 1.2vw;
}

.item-guide1-left span{
    color: #cc3433;
}

.item-mango4block {
    display: flex;
    justify-content: space-between;
    margin: 40px 0 0;
}

.item-mango4block div{
    width: 23.5%;
}

.item-mango4block div p{
    color: #40220f;
    line-height: 1.7;
    font-size: 1vw;
    text-align: center;
    margin-top: 10px;
}

.item-mango4block div span{
    display: block;
}

.item_list {
    margin: 43px auto 18px;
    font-size: 17px;
    border-collapse: collapse;
    width: 100%;
}

.item_list thead {
    background-color:#cc3433;
    color: #fff;
}

.capacity{width: 23%;}
.item-price{width: 21%;}

.item_list-center{
    text-align: center;
}

.list-red{
    background: #cc3433;
}

.list-case{
    color: #fff;
    border-radius: 50px;
    font-size: 13px;
    padding: 4px 7px 2px;
    display: block;
    margin-bottom: 6px;
    width: 82px;
    text-align: center;
}

.list-gift{
    font-size: 14px;
    padding-left: 13px;
}

.list-guide{
    display: block;
    font-size: 11px;
    margin-top: 5px;
}

.item_list th, .item_list td {
    border: 1px solid #c6c6c6;
    vertical-align: middle;
    padding: 8px 0 6px;
}

.item_list th span{
    display: block;
    font-size: 13px;
    margin-top: 3px;
}

.item_list td {
    padding: 9px 15px;
}

.item-keet-wrap{
    display: flex;
    justify-content:space-between;
    margin: 18px 0 0;
}

.item-keet-wrap div{
    width: 45%;
}

.item-keet-wrap p{
    font-size: .9vw;
    text-align: center;
    margin: 8px 0 0;
}

.item-keet-wrap span{
    display: block;
}

.item_list-green thead{
    background-color: #339966;
}

.list-green{
    background-color: #339966;
}

.red-btn,.green-btn,.yellow-btn {
    text-align: center;
    margin-top: 56px;
}
.yellow-btn {
	margin-top: 0;
}
.red-btn a{background: #cc3433;}
.green-btn a{background:#339966;}
.yellow-btn a{
	background: #eac105;
    display: flex;
    width: 370px;
    justify-content: center;
    align-items: center;
    height: 50px;
    margin: 0 auto;
}

.red-btn a,.green-btn a,.yellow-btn a {
    border-radius: 50px;
    color: #fff;
    padding: 9px 30px;
    font-size: 22px;
    letter-spacing: 2px;
    transition: all .5s ease;
}

.red-btn a:hover{
    background: #fff;
    color:  #cc3433;
    border: 1px solid  #cc3433;
}
.green-btn a:hover{
    background: #fff;
    color:#339966;
    border: 1px solid #339966;
}
.yellow-btn a:hover{
    background: #fff;
    color:#40220f;
    border: 1px solid #eac105;
}
section.back-brown {
	background-color: #40220f;
	padding: 80px 0;
}
section.back-brown .item-padding {
	padding: 0;
	margin-bottom: 0;
}


@media screen and (max-width:1290px) {
    .item-top-txt{
        font-size: 1.5vw;
    }
    /*.item-2block-left{padding-left: 12%;}

    .item-2block p{
        font-size:15px;
    }*/
}



@media screen and (max-width: 1075px){
    .item-back:before {
        left: 0;
        top: 0;
        background-size: contain;
        width: 144px;
    }

    .item-back:after {
        right: 0;
        top: 49px;
        width: 108px;
        background-size: contain;
    }

    .item-guide1-wrap {
        flex-wrap: wrap;
    }

    .item-guide1-left {
        width: 100%;
        margin-bottom: 22px;
    }

    .item-guide1-left p {
        font-size: 18px;
    }

    .item-guide1-right {
        width: 100%;
    }

    .item-mango4block {
        flex-wrap: wrap;
    }

    .item-mango4block div {
        width: 48%;
        margin-bottom: 21px;
    }

    .item-mango4block div p {
        font-size: 15px;
    }

    .item-keet-wrap p {
        font-size: 1.9vw;
    }

    .red-btn a, .green-btn a {
        padding: 9px 13px;
        font-size: 19px;
    }
}

@media screen and (max-width:950px) {
    .item_list {
        margin: 5px auto 18px;
        width: 100%;
    }

    .item_list tbody td {
        display: block;
        padding: 14px 6px 11px;
        width: 100%;
    }

    .item_list tbody .title {
        background-color:#cc3433;
        color: #fff;
        text-align: -webkit-center;
        margin-top: 20px;
    }

    .title-green{
        background-color: #339966 !important;
    }

    .list-green{
        color: #339966 !important;
    }

    .list-case {
        background-color: #fff;
        color:#cc3433;
    }

    .capacity:before{
        content: "内容量";
        padding-right: 5px;
    }

    .item-price::before{
        content: "料金（送料無料）";
        padding-right: 5px;
    }

    .capacity {
        background:#fafafa;
    }

    .capacity,.item-price{
        font-size: 15px;
   }

   .list-guide {
        line-height: 1.7;
    }

    /* IE8対応 */
    .item_list th{
        display:none !important;
    }
}

@media screen and (max-width:865px) {

    .page-tittle-item{
        margin: 23px auto 35px;
    }

    /* .yellow-item{
        padding: 55px 0 4%;
        margin: -90px calc(50% - 50vw) 0;
    }

   .item-2block {
        align-items: center;
        flex-wrap: wrap;
        padding: 0 6%;
    }

    .item-2block-left {
        padding-left:0;
        width: 100%;
        margin-bottom: 23px;
    }

    .item-2block-right{
        width: 100%;
        margin-bottom: 23px;
        position: unset;
    }*/

    .item-3block {
        flex-wrap: wrap;
        margin: 0 calc(50% - 50vw);
        width: 100vw;
        background: #eac105;
    }

    .item-3block div {
        width: 100%;
        margin: 6% 0;
        padding: 0 6%;
    }

    .item-3block p {
        margin-top: 15px;
    }

    .item-top-txt {
        font-size: 17px;
    }

    .item-back-img:before{
        width: 155px;
        height: 100px;
        background-size: contain;
    }

    .item-back-img:after{
        width: 155px;
        height: 100px;
        background-size: contain;
        top: 0px;
    }
}

@media screen and (max-width:600px) {

    .item-back {
        margin: 130px 0 121px;
    }

    .item-padding{
        padding: 0px 17px 55px;
    }

    .item-mango-wrap{
        padding-top: 115px !important;
    }

    .item-guide1-tittle ,.item-guide2-tittle{
        padding: 20px 2px 15px;
        font-size: 18px;
        position: unset;
        width: 100%;
        text-align: center;
        margin-bottom: 16px;
    }

    .item-guide1-tittle ,.item-guide2-tittle{
        position: unset;
    }

    .item-guide1-tittle:after ,.item-guide2-tittle:after{
        width: 110px;
        height: 91px;
        top: -15px;
        right: unset;
        left: 50%;
        transform: translate(-50%,-70%);
    }

    .item-mango4block {
        margin: 33px 0 0;
    }

    .item-mango4block div {
        width: 100%;
        margin-bottom: 26px;
    }

    .item-keet-wrap {
        flex-wrap: wrap;
        margin: 29px 0 0;
    }

    .item-keet-wrap div {
        width: 100%;
        margin-bottom: 23px;
    }

    .item-keet-wrap p {
        font-size: 16px;
    }

    .item-padding {
        margin-bottom: 73px;
    }

    .item-mango-block{
        margin-bottom: 120px;
    }
}

@media screen and (max-width:430px) {
    .obsession-left-wrap {
        margin-bottom: 38px;
    }

    .obsession-left {
        padding: 22px 22px 32px;
    }

    .obsession-left-img img {
        bottom: -20px;
        width: 57px;
        left: -11px;
    }

    .obsession-left-tittle {
        right: -5px;
        font-size: 30px;
        margin-top: 0px;
    }

    .obsession-left-txt {
        font-size: 12px;
    }
}
/*item end*/

/*cut start*/
.cut-wrap1,.cut-wrap2{
    display: flex;
    margin: 0 0 35px;
}
.cut-wrap2{
    margin:0;
}

.cut-wrap1-left,.cut-wrap2-left{
    width: 60%;
    margin-right: auto;
}
.cut-wrap1-right,.cut-wrap2-right{
    width: 35%;
}

.cut-wrap1-left p{
    text-indent: -1.5rem;
    padding-left: 1.5rem;
}

.cut-wrap1-left p,.cut-wrap2-left p{
    font-size: 1.2vw;
    line-height: 1.9;
    margin-bottom: 17px;
}

.cut-wrap1-left p::before{
    content: '\f0c8';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    padding-right: 7px;
}

.cut-wrap2-left span{
    color:#cc3433;
}


.block-patern2-wrap{
    background: #fff;
    margin-bottom: 80px;
    position: relative;
    box-shadow: 0 4px 14px 0 rgb(0 0 0 / 50%);
    margin-top: 50px;
}

.block-patern2{
    display: flex;
    padding:49px 15px 15px;
}

.block-patern2-left{width: 50%;margin-right:auto;}
.block-patern2-right{width: 48%;position: relative;}

.block-patern2-number{
    font-family: 'Cormorant Infant', serif;
    color: #eac105;
    font-size: 40px;
    padding-right: 13px;
}

.block-patern2-month{
    font-size: 16px;
    padding-left: 8px;
}

.block-patern2-left p{
    font-size: 1vw;
}

.block-patern2-right p{
    color: #fff;
    position: absolute;
    bottom: 4px;
    left: 6px;
    font-size: .9vw;
}

.back-white{
    padding: 66px 17px 6%;
    background: #fff;
    margin: 0 0 70px;
    position: relative;
}

.block-patern3-wrap{
    background: #fff;
    margin-bottom: 80px;
    position: relative;
    box-shadow: 0 4px 14px 0 rgb(0 0 0 / 50%);
    padding-bottom: 63px;
}

.block-patern3-wrap img{
    border: 1px solid #b3b3b3;
}

.block-patern3{
    display: flex;
    padding:49px 15px 15px;
}

.block-patern3-left{width: 50%;margin-right:auto;}
.block-patern3-right{width: 48%;position: relative;}

.block-patern3-number{
    font-family: 'Cormorant Infant', serif;
    color: #eac105;
    font-size: 40px;
    padding-right: 13px;
}

.block-patern3-month{
    font-size: 16px;
    padding-left: 8px;
}

.block-patern3-left p{
    font-size: 1vw;
}

.block-patern3-right p{
    color: #fff;
    position: absolute;
    bottom: 4px;
    left: 6px;
    font-size: .9vw;
}

.flower-wrap{
    padding: 49px 15px 0;
}

.cut-number1,.cut-number2,.cut-number3{
    position: relative;
    padding-left:4.8rem;
    margin-top: 12px;
    font-size: 1vw;
}

.cut-number1:before{content: "1";}
.cut-number2:before{content: "2";}
.cut-number3:before{content: "3";}

.cut-number1:before,.cut-number2:before,.cut-number3:before{
    background: #074023;
    color: #fff;
    width: 47px;
    height: 47px;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    left: 14px;
    text-align: center;
    line-height: 47px;
    font-size: 32px;
}

.other-cut{
    display: flex;
    margin-bottom: 6px;
    justify-content: space-between;
}

.other-cut div{
    width: 32%;
}

.cut-other-txt{
    font-size: 1vw;
}

@media screen and (max-width:1290px) {
    .back-glay {
        padding: 23px 12%;
    }

    .block-patern2-left p {font-size: 1.2vw;}

    .cut-number1, .cut-number2, .cut-number3,.cut-other-txt{
        font-size: 1.2vw;
    }
}

@media screen and (max-width: 1100px){
    .back-glay {
        padding: 35px 6%;
    }

    .block-patern2-number {
        font-size: 35px;
    }

    .block-patern2-month {
        font-size: 15px;
        padding-left: 5px;
    }

    .block-patern2-left p {font-size: 1.3vw;}

    .block-patern3-wrap {
        padding-bottom: 37px;
    }

    .block-patern3-number {
        font-size: 35px;
    }

    .cut-number1, .cut-number2, .cut-number3,.cut-other-txt{font-size: 1.3vw;}
}

@media screen and (max-width: 990px){

    .flower-wrap{
        padding: 33px 15px 0;
    }

    .block-patern2 {
        padding: 39px 15px 15px;
    }

    .block-patern3{
        padding: 39px 15px 15px;
    }
}

@media screen and (max-width:960px){
    .cut-wrap1, .cut-wrap2 {
        flex-flow: column-reverse;
    }

    .cut-wrap1-left, .cut-wrap2-left {
        width: 100%;
        margin-top: 24px;
    }

    .cut-wrap1-left p, .cut-wrap2-left p {
        font-size: 1.7vw;
        margin-bottom: 5px;
    }

    .cut-wrap1-right, .cut-wrap2-right {
        width: 55%;
        margin: 0 auto;
    }
}


@media screen and (max-width: 845px){

    .block-patern2 {padding: 27px 15px 15px;}
    .block-patern2-left {width: 52%;}
    .block-patern2-right{width: 46%;}

    .block-patern2-right p {left: 2px;}

    .block-patern2-number {font-size: 31px;}
    .block-patern2-month {font-size: 13px;}

    .block-patern3 {padding: 27px 15px 15px;}

    .cut-wrap1-left p, .cut-wrap2-left p {
        font-size: 16px;
        margin-bottom: 13px;
    }

}

@media screen and (max-width: 700px){
    .block-patern2-wrap {
        margin-bottom: 45px;
    }

    .block-patern2{
        flex-flow: column-reverse;
        padding: 0;
    }

    .block-patern2-left {
        width: 100%;
        margin:0;
        padding:14px 15px;
    }

    .block-patern2-right{
        width: 100%;
    }

    .block-patern2-left p {
        font-size:15px;
    }

    .block-patern2-right p {
        left: 6px;
    }

    .flower-wrap {
        padding: 22px 15px 0;
        margin-bottom: 9px;
    }

    .block-patern3-wrap {
        margin-bottom: 45px;
    }

    .block-patern3{
        flex-flow: column-reverse;
        padding: 0;
    }

    .block-patern3-left {
        width: 100%;
        margin:0;
        padding:14px 15px;
    }

    .block-patern3-right{
        width: 100%;
    }

    .cut-number1, .cut-number2, .cut-number3 {
        font-size:15px;
        margin-top: 5px;
        padding-left: 4rem;
    }

    .cut-number1:before, .cut-number2:before, .cut-number3:before {
        width: 43px;
        height: 43px;
        left: 11px;
        line-height: 43px;
        font-size: 26px;
    }

    .block-patern3-right p {
        left: 6px;
    }

    .cut-other-txt{
        font-size:15px;
    }
}

@media screen and (max-width:600px){
    .cut-wrap1-right, .cut-wrap2-right {
        width: 100%;
    }


    .other-cut {
        flex-wrap: wrap;
    }

    .other-cut div {
        width: 100%;
        margin-bottom: 24px;
    }

    .other-cut div:last-of-type{
        margin-bottom:0;
    }
}
/*cut end*/


/*company start*/
    /*class名「block-patern2-wrap」等を使い構築。*/
/*company end*/




/*accecss start 960px、780px、460pxで分ける*/
.back-white-top{
    padding: 79px 17px 6%;
    background: #fff;
    margin: -85px 0 70px;
}

.back-white-top p{
    color: #40220f;
}

.access-wrap{
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.access-wrap p{
    font-size: 1.2vw;
    line-height: 1.9;
    text-indent: -4.8vw;
    padding-left: 4.8vw;
}

.access-left{
    width: 55%;
    margin-right: auto;
}
.access-right{
    width: 45%;
}
.caution{
    color: #40220f;
    font-size: 1.2vw;
    line-height: 1.9;
    margin-top: 25px;
}
.caution h3 {
    text-align: center;
    margin-bottom: 0;
}
@media screen and (max-width:960px){
    .access-wrap p {
        font-size: 14px;
        text-indent: -3.5rem;
        padding-left: 3.5rem;
    }
    .caution{
        font-size: 14px;
    }
}

@media screen and (max-width:780px){
    .back-white-top {
        padding: 55px 17px 6%;
    }

    .access-wrap {
        margin-bottom: 26px;
    }

    .access-left {
        width: 100%;
        margin-bottom: 15px;
    }

    .access-right {
        width: 100%;
    }
}
/*accecss end*/

/*contact start 960px、780px、460pxで分ける*/
.contact-wrap {
    width: 71%;
    margin: 0 auto;
}

.contact-block{
    margin-bottom: 25px;
}

.contact-block input,.contact-block textarea{
    margin-top: 7px;
    padding:10px;
    outline: none;
}

input,textarea{
    border: 1px solid #c7c7c7;
    display: block;
    width: 100%;
    color: #40220f !important;
}

input{
    height: 35px;
}

input:focus{
    outline:unset;
}

.contact-block label{
    color: #40220f;
}

.privacy{
    display: flex;
    align-items: center;
    justify-content: center;
}

.privacy label{
    border-bottom: 1px dotted #40220f;
}

.privacy input{
    width: auto;
    margin-right: 11px;
}

.submit{
    width: 118px;
    margin: 10px auto 0;
}

.submit input{
    height: 38px;
    letter-spacing: 6px;
    text-align: center;
    transition: all .5s ease;
}

.submit input:hover{
    color: #022615 !important;
    background:#eac105;
}



@media screen and (max-width:780px){
    .contact-wrap {
        width: 100%;
    }
    .privacy label{
     font-size: small;
    }
}
/*contact end*/



/*footer start*/
footer{
    background: #074023;
    padding:45px 6% 35px;
    height: 328px;
}

.footer-wrap{
    display: flex;
}

.footer-wrap {
    color: #eac105;
    line-height: 1.6;
}

.footer-left{
    width: 50%;
    margin-right: auto;
}

.footer-center{width: 25%;}
.footer-right{width: 30%;}

h3{
    margin-bottom: 18px;
}

h3 span{
    display: block;
    font-size: 26px;
}

.footer-adr{
    margin-bottom: 12px;
}

.footer-label-pc{
    font-size: 15px;
}

.footer-label-pc a::before{
    content: '\f0da';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    padding-right: 7px;
}

.footer-menu{
    margin-bottom: 13px;
}

.footer-label-sp{
    display: none;
}

.copyright{
    background-color: #eac105;
    color: #074023;
    text-align: center;
    padding:22px 0 14px;
    font-size: 15px;
}

.sp-footer{display: none;}

@media screen and (max-width:1050px){
    .footer-left {width: 43%;}
    .footer-center {width: 27%;}
   .footer-right{width: 30%;}
}

@media screen and (max-width: 854px){

    footer {
        padding: 59px 6% 35px;
        height: auto;
    }

    .footer-wrap {flex-wrap: wrap;}

    .footer-left {
        width: 100%;
        text-align: center;
    }

    .footer-center,.footer-right{
        width: 100%;
    }

   .footer-adr span{
        font-size: 27px;
        margin: 4px 0 23px;
        display: block;
   }

   .footer-menu {
        margin: 0;
        border-top: 1px solid #2c5c44;
        padding: 12px 0 7px 0px;
    }

    .footer-menu a{padding-left: 5px;}

    .copyright {
        padding: 12px 0 15px;
        font-size: 14px;
    }

   .footer-label-sp{display:block;}
   .footer-label-pc{display: none;}
}

@media screen and (max-width:600px) {
    .copyright {margin-bottom: 71px;}

    .sp-footer{display:block;}

    .sp-footer-wrap{
        display: flex;
        background:#074023;
        color: #fff;
        text-align: center;
        font-size: 12px;
        border-top: 1px solid #fff;
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 1;
    }

    .sp-footer-wrap div{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .footer-tel{width: 21%;}
    .footer-mail{width: 21%;}
    .footer-online{width: 40%;}
    #page-top{width: 18%;}

    .footer-online a{
        display: flex;
    }


    .footer-tel,.footer-mail,.footer-online {
        border-right: 1px solid #fff;
        position: relative;
    }

    .footer-tel img,.footer-mail img{
        display: block;
    }

    .footer-tel img{
        margin: 0 auto 6px;
        width: 24px;
        height: 24px;
    }

    .footer-mail img{
        margin: 0 auto 8px;
        width: 25px;
        height: 19px;
    }

    .footer-online img{
        width: 26px;
        height: 26px;
        margin-right: 9px;
    }

    .footer-online-font1{
        font-size: 11px;
        line-height: 1.2;
    }

    .footer-online-font2{
        font-size: 15px;
    }

    #page-top{
        height: 70px;
        background: #074023;
        color: #fff;
        text-align: center;
        z-index: 1;
        position: unset;
    }

    #page-top a{
        letter-spacing: 3px;
        position: unset;
        font-size: 12px;
        transform: unset;
    }

    #page-top a::before {
        content: '';
        background: url(../image/arrow-top.webp) no-repeat;
        background-size: 100%;
        left: 50%;
        transition: all .5s ease;
        position: unset;
        display:block;
        transform: unset;
        margin: 0 auto;
        width: 19px;
        height: 15px;
    }
}

@media screen and (max-width:700px) {
    .footer-online::before{left: 21%;}
	.red-btn a, .green-btn a {
		font-size: 16px;
	}
}
@media screen and (max-width: 350px){
.red-btn a, .green-btn a {
  font-size: 12px;
}}
@media screen and (max-width:550px) {
    .footer-online::before{left: 14%;}
}
/*footer end*/


/*popUP*/
#popUp{ position:fixed; top:0; left:0; width:100vw; height:100vh; display:block; z-index:999;}
#popUp .fakeBtn{ position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(255,255,255,.5); z-index:0;}
#popUp .ppInner{ position:absolute; top:50%; left:50%; width:94%; max-width:800px; max-height:50%; transform:translate(-50%,-50%); z-index:1; background:#fff; padding:20px; box-sizing: border-box; border-radius:15px;/* font-family: fot-tsukubrdgothic-std, sans-serif;*/ box-shadow:0 5px 5px rgba(0,0,0,.2);}
#popUp .closeBtn{ position:absolute; top:0; right:-20px; background:#074023; padding:8px; border-radius:10px; cursor:pointer; font-weight:bold; transform:translateY(-50%); color:#fff;}
#popUp .closeBtn:hover{ top:5px;}
#popUp .block{ text-align:center;}
#popUp .block p{ width: 100%; text-align:center; font-size:1.25em; font-weight:bold; border-bottom:2px dotted #ddd; margin:0 0 20px; padding:0 0 10px; height: auto; font-size: inherit;}
#popUp .block .contents{ line-height:1.8;}
a.pplink{color:orangered; transition: .3s; display: inline-block; position: relative;}
a.pplink:hover{color:orange;}
a.pplink{margin: 0 .2em;}
a.pplink span{position: relative; z-index: 1;}
a.pplink:before{content:''; width: 100%; height: 8px; background: yellow; position: absolute; bottom: 2px; left: 0; z-index: 0;}
@media screen and (max-width: 768px) {
	#popUp .ppInner{ max-height:90%;}
	#popUp .closeBtn{right:-0px; transform:translateY(-65%);}
	#popUp .start h2 {
	padding: 0;
    margin: 0 0 20px;
	font-size: 24px;
    letter-spacing: 2px;
	}
	#popUp .ppInner {
		padding: 15px;
	}
}/*popUP*/

/* SNS
--------------------------------------------*/
.sns {
    margin-bottom: 15px;
    display: flex;
  }
  .sns img {
    text-align: center;
    margin: 0 15px;
    width: 25px;
  }
  /* SNS*/

.pc_hide {
	display: none;
}
@media screen and (max-width: 768px) {
	.pc_hide {
	display: block;
}
}