@charset "UTF-8";
/*-------------------
----- All Page ------
-------------------*/

/*==========================================================
   Original style
========================================================= */

html,
body {
   height: 100%;
}

html {
   font-size: 62.5%;
}

body {
   margin: 0;
   padding: 0;
   overflow-x: hidden;
   color: #5D4923;
   font-size: 1.6rem;
   font-weight: 500;
   line-height: 1.7;
   word-wrap: break-word;
   font-family: "Zen Maru Gothic", "メイリオ", "Meiryo", sans-serif;
   letter-spacing: .06rem;
   transition: .3s;
   background: #fff;
}

img {
   width: 100%;
   vertical-align: bottom;
}

li {
   list-style-type: none;
}

hr {
   display: none;
}

a,
button {
   -webkit-transition: all .3s;
   transition: all .3s;
}

button {
   border: none;
   appearance: none;
}

a {
   display: block;
}

a:hover {
   opacity: .6;
}

.flex {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   width: 100%;
}

.nowrap {
   white-space: nowrap;
}

/*=========================================================
   Break Point
==========================================================*/

/* スマホで見たときは"sp"のclassがついたコンテンツを表示 */
.sp {
   display: block !important;
}
.pc {
   display: none !important;
}

/* 1080px～の場合"pc"のclassがついたコンテンツを表示 */
@media only screen and (min-width: 1080px) {
   .pc {
      display: block !important;
   }
   .sp {
      display: none !important;
   }
}

/*==========================================================
   font-family
===========================================================*/

.ff-ano {
   font-family: "Outfit", "Hiragino Sans","Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif;
   letter-spacing: .09rem;
   line-height: 1.9;
}

/*=========================================================
   wrapper/bg
==========================================================*/

.wrapper {
   position: relative;
   overflow: hidden;
   background-image: url(../image/common/parts_tree01.png),
                     url(../image/common/parts_tree02.png),
                     url(../image/common/parts_line.png),
                     url(../image/common/parts_line.png),
                     url(../image/common/bg.png);
   background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,repeat;
   background-position: left top,right top,calc(50% + 960px) bottom,calc(50% - 960px) bottom,left top;
   background-size: 255px,230px,1530px,1530px,85px;
   z-index: 0;
}

.wrapper::before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: #fdeb6331;
   z-index: 0;
}

.sp-wrapper {
   position: relative;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   max-width: 390px;
   height: 100dvh;
   height: calc(var(--vh, 1vh) * 100);
   background: url(../image/common/bg.png) repeat;
   background-size: 85px;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.322);
   overflow-x: hidden;
   z-index: 1;
   scroll-behavior: smooth;
}

/*スクロールバーの横幅指定*/
.sp-wrapper::-webkit-scrollbar,
.navigation-contentWrap::-webkit-scrollbar {
   width: 5px;
}
/*スクロールバーの背景色・角丸指定*/
.sp-wrapper::-webkit-scrollbar-track,
.navigation-contentWrap::-webkit-scrollbar-track {
   border-radius: 10px;
   background: transparent;
}
/*スクロールバーの色・角丸指定*/
.sp-wrapper::-webkit-scrollbar-thumb,
.navigation-contentWrap::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background:#5d492331;
}

.scroll-prevent {
   overflow-y: hidden;
}

/*==========================================================
   header
==========================================================*/
header {
   position: sticky;
   top: 0;
   width: 100%;
   max-width: 390px;
   height: auto;
   background: #fff;
   z-index: 1000;
}

.headerWrap {
   position: relative;
   height: 60px;
}

.headerLogo {
   position:absolute;
   top: 50%;
   left: 3%;
   transform: translateY(-50%);
   width: 70%;
   max-width: 220px;
   z-index: 998;
}

.headerLogo a {
   justify-content: flex-start;
   flex-wrap: nowrap;
   width: calc(100% + 4%);
}

.g-navWrap {
   position: absolute;
   right: 0;
   z-index: 1000;
}


/*
ハンバーガー　ボタン部分
---------------------------------*/
.hamburger-menu {
   position: relative;
   width: 70px;
   height: 60px;
   cursor: pointer;
   z-index: 1000;
}

.hamburger-menu__bar {
   display: inline-block;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   width: 35px;
   height: 3px;
   transition: .5s;
}

.hamburger-menu__bar:first-child {
   top: 17px;
   background: #97C765;
}

.hamburger-menu__bar:nth-child(2) {
   top: 50%;
   transform: translate(-50%, -50%);
   background: #E0541B;
}

.hamburger-menu__bar:last-child {
   bottom: 16px;
   background: #FDEB63;
}

.hamburger-menu.active .hamburger-menu__bar:first-child {
   width: 38px;
   transform: translate(-20px,10px) rotate(35deg);
}

.hamburger-menu.active .hamburger-menu__bar:nth-child(2) {
   width: 38px;
   transform: translate(-20px,-3px) rotate(-35deg);
}

.hamburger-menu.active .hamburger-menu__bar:last-child {
   display: none;
}

/*
ハンバーガー　メニューリスト部分
---------------------------------*/

.navigation {
   position: absolute;
   top: 60px;
   right: -100%;
   width: 100%;
   height: auto;
   transition: all .8s ease;
   z-index: 999;
}

.navigation.is_active {
   right: 0;
}

.navigation-contentWrap {
   position: relative;
   top: 0;
   height: calc(100dvh - 60px);
   height: calc(var(--vh, 1vh) * 100 - 60px);
   background: #FDEB63;
   border-radius: 40px 0 0 0;
   overflow-y: auto;
}

.navigation__list {
   margin: 0 auto;
   padding-top: 40px;
   max-width: 275px;
}

.navigation__link {
   display: block;
   padding: 30px 0;
   font-size: 1.8rem;
   font-weight: 700;
   letter-spacing: .2rem;
   border-bottom: solid 2px #fff;
   transition: .5s;
   white-space: nowrap;
}

.navigation__list-item:last-child .navigation__link {
   border-bottom: none;
}

.en-title {
   display: block;
   padding-left: .2em;
   font-size: 1rem;
}

/*logout*/

.logout {
   padding: 25px 0 70px;
}

.logout-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   padding: .5em;
   max-width: 275px;
   color: #707070;
   font-size: 1.4rem;
   background: #fff;
   border-radius: 100vh;
}

.logout-icon {
   margin-right: 6px;
   width: 15px;
}

/*---------------------------------------------------------
   PC（画面幅1080px以上で読み込む）
---------------------------------------------------------*/
@media screen and (min-width:1080px) {
   header {
      position: absolute;
      max-width: 100%;
      height: 100dvh;
      height: calc(var(--vh, 1vh) * 100);
      background: transparent;
      z-index: 0;
   }

   .logo-wrap {
      position: absolute;
      top: 38%;
      right: calc(50% + 24vw);
      width: 18%;
   }

   .headerLogo {
      position: static;
      transform: translateY(0);
      width: 100%;
      max-width: 340px;
      z-index: 0;
   }

   @media screen and (min-width:1400px) {
      .logo-wrap {
         right: calc(50% + 19vw);
      }
   }
   @media screen and (min-width:1900px) {
      .logo-wrap {
         right: calc(50% + 16vw);
      }
   }

   .logout {
      padding: 0;
   }

   /*
   ハンバーガー　メニューリスト部分
   ---------------------------------*/

   .navigation {
      position: absolute;
      top: 50%;
      left: calc(50% + 22vw);
      transform: translateY(-57%);
      max-width: 145px;
      height: 550px;
      z-index: 0;
   }

   @media screen and (min-width:1400px) {
      .navigation {
         left: calc(50% + 18vw);
      }
   }
   @media screen and (min-width:1900px) {
      .navigation {
         left: calc(50% + 15vw);
      }
   }

   .navigation-contentWrap {
      position: inherit;
      background: transparent;
      border-radius: 0;
   }

   .navigation__list {
      padding: 0;
   }

   .navigation__link {
      padding: 15px;
      border-bottom: none;
   }

   .navigation__list-item:last-child .navigation__link {
      border-bottom: none;
   }
}

/*==========================================================
   main / heading
===========================================================*/

h2 {
   position: relative;
   padding-bottom: .5em;
   text-align: left;
   color: #E0541B;
   font-size: 1.8rem;
   font-weight: 700;
   letter-spacing: .2rem;
   border-bottom: solid 2px #5D4923;
}

h2::before {
   content: '';
   position: absolute;
   bottom: -2px;
   width: 8rem;
   height: 2px;
   background: #E0541B;
}

/*==========================================================
   main / parts
===========================================================*/

/*
arrow
----------------------------------*/

.arrow {
   position: relative;
   display: inline-block;
   width: 6.2px;
   height: 10.5px;
   width: 26px;
   height: 26px;
   border-radius: 100vh;
}

.arrow::before,
.arrow::after {
   content: "";
   position: absolute;
   top: calc(50% - 1px);
   left: 35%;
   width: 8px;
   height: 2px;
   border-radius: 1000px;
   transform-origin: calc(100% - 1px) 50%;
}

.arrow::before {
   transform: rotate(45deg);
}

.arrow::after {
   transform: rotate(-45deg);
}

/*
white
----------------*/

.arrow-wh {
   background: #fff;
}

.arrow-wh::before,
.arrow-wh::after {
   background-color: #97C765;
}

/*
green
------------------*/

.arrow-gr {
   background: #97C765;
}

.arrow-gr::before,
.arrow-gr::after {
   background-color: #fff;
}

/*
btn
----------------------------------*/

.btn {
   display: flex;
   position: relative;
   align-items: center;
   margin: 0 auto;
   padding: .8em;
   width: 80%;
   max-width: 260px;
   color: #fff;
   font-size: 1.8rem;
   font-weight: 400;
   letter-spacing: .1rem;
   background: #97C765;
   border-radius: 100vh;
   overflow: hidden;
   z-index: 0;
}

.btn::before {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 0%;
   height: 100%;
   background: #E0541B;
   -webkit-transition: .3s;
   transition: .3s;
   z-index: -1;
}

.btn-txt {
   width: calc(100% - 20%);
   text-align: center;
}

/*
hover
------------------*/

.btn:hover {
   opacity: 1;
}

.btn:hover::before {
   width: 100%;
}

.btn:hover .arrow-wh::before,
.btn:hover .arrow-wh::after {
   background-color: #E0541B;
}


/*==========================================================
   main / article
==========================================================*/

article {
   border-bottom: solid 2px #5d492331;
}

article .flex {
   margin-bottom: 3px;
   justify-content: flex-start;
}

.date {
   color: #E0541B;
   font-size: 1.5rem;
   font-weight: 700;
}

.cate {
   margin-left: 10px;
   padding-bottom: .1rem;
   width: 100px;
   text-align: center;
   color: #fff;
   font-size: 1.4rem;
   font-weight: 400;
   line-height: 1.3;
}

.cate01 {
   background: #97C765;
}

.cate02 {
   background: #EF875D;
}

/*==========================================================
   main / page-contents-list
==========================================================*/

.page-contents-list--wrap {
   margin: 35px 0 40px;
   text-align: center;
}

.page-contents-list {
   display: inline-block;
}

.page-contents-list--item a {
   display: flex;
   align-items: center;
   margin-bottom: .8em;
   font-weight: 1.8rem;
   font-weight: 700;
}

.page-contents-list--item:last-of-type a {
   margin-bottom: 0;
}

.page-contents-list--item a::before {
   content: "▼";
   padding-right: .5em;
   color: #E0541B;
   font-size: 80%;
}


/*==========================================================
   footer
===========================================================*/

footer {
   position: relative;
   padding-top: 35px;
   background: #fff;
   text-align: center;
}


/*
page top
-------------------------------*/

#page-top {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 62px;
}

/*
logo
-------------------------------*/

.footer-logo {
   margin: 10px auto;
   width: 100%;
   max-width: 330px;
}

/*
privacy policy
-------------------------------*/
.privacy {
   display: inline-block;
   margin-top: 30px;
   color: #97C765;
   font-size: 1.4rem;
}

/*
copyright
-------------------------------*/

.copyright {
   margin-top: 20px;
   text-align: center;
   font-size: 1.3rem;
   color: #fff;
   font-weight: 400;
   background: #97C765;
}


/*==========================================================
   adjust
===========================================================*/

.inner {
   margin: auto;
   width: 92%;
   max-width: 600px;
}

/*---------------margin top-----------------*/

.mt10 {
   margin-top: 10px;
}
.mt15 {
   margin-top: 15px;
}
.mt20 {
   margin-top: 20px;
}
.mt25 {
   margin-top: 25px;
}
.mt30 {
   margin-top: 30px;
}
.mt35 {
   margin-top: 35px;
}
.mt40 {
   margin-top: 40px;
}
.mt45 {
   margin-top: 45px;
}
.mt50 {
   margin-top: 50px;
}
.mt55 {
   margin-top: 55px;
}
.mt60 {
   margin-top: 60px;
}
.mt65 {
   margin-top: 65px;
}
.mt70 {
   margin-top: 70px;
}
.mt75 {
   margin-top: 75px;
}
.mt80 {
   margin-top: 80px;
}
.mt85 {
   margin-top: 85px;
}
.mt90 {
   margin-top: 90px;
}
.mt95 {
   margin-top: 95px;
}
.mt100 {
   margin-top: 100px;
}

/*---------------margin bottom-----------------*/

.mb10 {
   margin-bottom: 10px;
}
.mb15 {
   margin-bottom: 15px;
}
.mb20 {
   margin-bottom: 20px;
}
.mb25 {
   margin-bottom: 25px;
}
.mb30 {
   margin-bottom: 30px;
}
.mb35 {
   margin-bottom: 35px;
}
.mb40 {
   margin-bottom: 40px;
}
.mb45 {
   margin-bottom: 45px;
}
.mb50 {
   margin-bottom: 50px;
}
.mb55 {
   margin-bottom: 55px;
}
.mb60 {
   margin-bottom: 60px;
}
.mb65 {
   margin-bottom: 65px;
}
.mb70 {
   margin-bottom: 70px;
}
.mb75 {
   margin-bottom: 75px;
}
.mb80 {
   margin-bottom: 80px;
}
.mb85 {
   margin-bottom: 85px;
}
.mb90 {
   margin-bottom: 90px;
}
.mb95 {
   margin-bottom: 95px;
}
.mb100 {
   margin-bottom: 100px;
}

/*---------------padding top-----------------*/
.pt10 {
   padding-top: 10px;
}
.pt15 {
   padding-top: 15px;
}
.pt20 {
   padding-top: 20px;
}
.pt25 {
   padding-top: 25px;
}
.pt30 {
   padding-top: 30px;
}
.pt35 {
   padding-top: 35px;
}
.pt40 {
   padding-top:40px;
}
.pt45 {
   padding-top: 45px;
}
.pt50 {
   padding-top: 50px;
}
.pt55 {
   padding-top: 55px;
}
.pt60 {
   padding-top: 60px;
}
.pt65 {
   padding-top: 65px;
}
.pt70 {
   padding-top: 70px;
}
.pt75 {
   padding-top: 75px;
}
.pt80 {
   padding-top: 80px;
}
.pt85 {
   padding-top: 85px;
}
.pt90 {
   padding-top: 90px;
}
.pt95 {
   padding-top: 95px;
}
.pt100 {
   padding-top: 100px;
}

/*---------------padding bottom-----------------*/
.pb10 {
   padding-bottom: 10px;
}
.pb15 {
   padding-bottom: 15px;
}
.pb20 {
   padding-bottom: 20px;
}
.pb25 {
   padding-bottom: 25px;
}
.pb30 {
   padding-bottom: 30px;
}
.pb35 {
   padding-bottom: 35px;
}
.pb40 {
   padding-bottom:40px;
}
.pb45 {
   padding-bottom: 45px;
}
.pb50 {
   padding-bottom: 50px;
}
.pb55 {
   padding-bottom: 55px;
}
.pb60 {
   padding-bottom: 60px;
}
.pb65 {
   padding-bottom: 65px;
}
.pb70 {
   padding-bottom: 70px;
}
.pb75 {
   padding-bottom: 75px;
}
.pb80 {
   padding-bottom: 80px;
}
.pb85 {
   padding-bottom: 85px;
}
.pb90 {
   padding-bottom: 90px;
}
.pb95 {
   padding-bottom: 95px;
}
.pb100 {
   padding-bottom: 100px;
}