@charset "UTF-8";

/*===============================================
画面の横幅が768px以上（PC用）

(max-width: 767.99px) (max-width: 959.99px)
(max-width: 1024.99px) (max-width: 1059.99px)
===============================================
画面の横幅が約767.99pxまで（SP用）

(min-width: 376px)(max-width: 375.99px)
(min-width: 376px)(max-width: 567.99px)
(min-width: 568px)
(max-width: 959.99px)
===============================================*/

*{box-sizing: border-box;}


  html {
    font-family: "游明朝体", "Spartan", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
    font-size: 62.5%;
    line-height: 1.8;
    height: 100%;
    word-break: break-word;
    color: #4d4d4d;
    background-color: var(--color-base);
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;

    scroll-behavior: smooth;  /*スムーズスクロール*/

  }

  body {
    font-size: 20px;
    margin: 0;
    /*font-family: serif;*/

  }

  *,
  *::before,
  *::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  ::-moz-selection {
    color: #f2bb32;
    background: var(--color-theme);
  }

  ::selection {
    color: #f2bb32;
    background: var(--color-theme);
  }

  img {border: 0;margin: 0;}
  figure {margin: 0;}
  p {margin: 0; padding: 0;}


  a {
    text-decoration: none;
    color: #4d4d4d;
    /*filter: brightness(1);*/
    transition: filter 0.3s;
}

a:hover {filter: brightness(1.10);}
a:active {/* マウスダウン時に暗くする */ filter: brightness(0.90);}



  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  h1,
  h2,
  h3,
  h4 {
    font-size: 1.6rem;
    margin: 0;
    padding: 0;
  }

  main {display: block;}



/* ///  header ///////////////////////　*/

.header-all {
    margin: 0 auto;
    padding: 5px 0;
    width: 100%;
    background: #fff;
    z-index: 1;
    height: 50px;}
@media screen and (max-width: 1024.99px) {
.header-all {
    height: 55px;;
}}
@media screen and (max-width: 767.99px) {
.header-all {
    height: 45px;;
}}

.header{
    margin: 0rem auto 0;
    top: 0;
    left: 0;
    right: 0;
    position: relative;
    width: 100%;
    max-width: 1300px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    }


/*
.header .header_title {
    padding: 0.4rem 0 0.5rem 2%;
    margin: 0;
    float: left;
    width: 28%;
    line-height: 1.3;}
@media screen and (max-width: 767.99px) {
.header .header_title {
    padding: 0 0 0.5rem 3%;
    width: 66%;
}}
@media screen and (max-width: 959.99px) {
.header .header_title {
    width: 55%;
    height: 46px;
    display: flex;
    align-items: center;
}}



.header .header_title a{
    color: #00b900;
    font-size: 2.5rem;
    line-height: 1.1;
    font-family: auto;
    font-weight: bold;
    transition: .6s;}
@media screen and (max-width: 819.99px) {
.header .header_title a{
    font-size: 100%;
}}
*/




.header .header_logo {
margin: 0;
width: 40%;}
@media screen and (max-width: 1024.99px) {
.header .header_logo {
    margin: 0;
    width: 55%;
    padding: 0.6rem 2% 0.5rem 4%;
}}
@media screen and (max-width: 820.99px) {
.header .header_logo {
   width: 62%;
}}
@media screen and (max-width: 768.99px) {
.header .header_logo {
   width: 32%;
}}
@media screen and (max-width: 430.99px) {
.header .header_logo {
   width: 50%;
}}
@media screen and (max-width: 375.99px) {
.header .header_logo {
   width: 58%;
}}



.header .header_logo img{width:55%; }
@media screen and (max-width: 767.99px) {
.header .header_logo img{
        width: 100%;
}}


/*.header .header_title a:hover,*/
.header .header_logo img:hover{ 
    text-decoration:none;
    color: #71bd43;
    opacity: 0.7;}





.topview_all {
    /*padding-bottom: 3vh;*/
    width: 100%;
    margin-bottom: 0rem;
    height: fit-content;
    background:#fdfdf5; /*f3fff5*/
/*padding-bottom: 26em;
    background-image: url(../img/---.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
*/}
@media screen and (max-width: 767.99px) {
.topview_all {
    background:#fff;
}}





.topview_all .topviewtopimg{
    filter: drop-shadow(0px 2px 7px #55555550);
}

.topview_all .topviewtopimg img{
    width: 100%;
}


.topview {
    margin:0 auto;
    width: 100%;
max-width:1100px;
}

.topview .topviewimg {
    width: 100%;
    margin: 9vh auto 7vh;
    max-width: 900px;
    filter: drop-shadow(0px 1px 0px #fff);}
@media screen and (max-width: 1024.99px) {
.topview .topviewimg {
    width: 96%;
    margin: 3vh 2%;
    max-width:none;
}}

.topview .topviewimg img{
    width: 100%;
}




.topviewcomment {
    margin: 2rem 2% 2rem;
    padding: 0;
    width:96%;
    text-align: center;
    color: #4d4d4d;
    font-size: 2.6rem;
    font-weight:bold;
    line-height: 1.8;
    font-feature-settings: "palt";}
@media screen and (max-width: 1180.99px) {
.topviewcomment {
    font-size: 120%;
}}
@media screen and (max-width: 767.99px) {
.topviewcomment {
        font-size: 100%;
        line-height: 1.5;
        font-weight: 600;
        margin: 1rem 3%;
        width: 94%;
}}



.topviewminicomment {
    margin: 1rem auto 0rem;
    padding: 0 0 2rem;
    width:96%;
    text-align: center;
    color: #4d4d4d;
    font-size: 1.6rem;
    line-height: 1.8;
    font-feature-settings: "palt";}
@media screen and (max-width: 767.99px) {
.topviewminicomment {
    font-size: 70%;
    line-height: 1.5;
    margin: 1rem 2% 2rem;
    width: 96%;
}}



/*  */
.servicepoint {
    width: 96%;
    max-width: 1100px;
    margin: 4em auto 0em;
    display: flex;
    flex-wrap: wrap;
justify-content: center;}
@media screen and (max-width: 767.99px) {
.servicepoint {
    margin: 0em auto 0em;
}}


.servicepoint .servicepointin {
    width: 31%;
    margin: 3rem 1%;
    background: #fff;
    border-radius: 1rem;
    filter: drop-shadow(0.5px 4px 4px #55555530);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;}
@media screen and (max-width: 820.99px) {
.servicepoint .servicepointin {
margin: 2rem 1% 0;
    width: 48%;
}}
@media screen and (max-width: 766.99px) {
.servicepoint .servicepointin {
margin: 2rem 1% 0;
    width: 98%;
}}

.servicepointback {
    padding: 0.4rem 1vw 0.1rem;
    margin: 0;
    width: 100%;
    color: #fff;
    background: #5ab620;
    border-radius: 0.6rem 0.6rem 0 0;
    text-align: center;
    /* position: relative; */
    min-height: 23vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;}
@media screen and (max-width: 767.99px) {
.servicepointback {
min-height: fit-content;
    align-items: center;
}}



.servicepointback .servicepointimg {
    margin: 1.5rem 1% 0;
    width: 98%;
    text-align: center;}
@media screen and (max-width: 767.99px) {
.servicepointback .servicepointimg {
        margin: 1rem;
        width: 18%;
}}



.servicepointback .servicepointimg img{
        width: 38%;}
@media screen and (max-width: 1366.99px) {
.servicepointback .servicepointimg img{
    width: 44%;
}}    
@media screen and (max-width: 1024.99px) {
.servicepointback .servicepointimg img{
    width: 50%;
}}    
@media screen and (max-width: 767.99px) {
.servicepointback .servicepointimg img{
    width: 100%;
}}

.servicepointtitle {
    padding: 1rem 0vw;
    margin: 0;
    width: 100%;
    line-height: 1.2;
    font-size: 2.2rem;
    color: #fff000;
    text-align: center;
    font-weight: bold;
    font-feature-settings: "palt";
display: flex;
align-items: center;
justify-content: center;
min-height: 3.4em;}
@media screen and (max-width:1024.99px) {
.servicepointtitle {
    font-size: 130%;
min-height: 3.2em;
}}
@media screen and (max-width:820.99px) {
.servicepointtitle {
    font-size: 110%;
}}
@media screen and (max-width: 767.99px) {
.servicepointtitle {
    width: 76%;
    font-size: 110%;
    padding: 0rem 2vw;
    text-align: left;
    display: flow;
    min-height: inherit;
}}


.servicepointcap {
padding: 1rem 1vw;
        margin: 0rem auto;
        width: 100%;
        line-height: 1.4;
        font-size: 1.8rem;
        color: #4d4d4d;
        text-align: left;
        font-weight: 500;
        font-feature-settings: "palt";}
@media screen and (max-width: 1024.99px) {
.servicepointcap {
padding: 1rem 2vw;
    font-size: 100%;
}}
@media screen and (max-width: 357.99px) {
.servicepointcap {
    font-size: 80%;
}}







/*  */
.topviewbox {
    margin: 4em auto 0;
    padding: 3em 2vw;
    color: #333;
    text-align: center;
    border-radius: 1em;
    width: 96%;
    max-width: 900px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    font-feature-settings: "palt";
/*filter: drop-shadow(0.5px 4px 4px #55555530);
background: #fff;
border-radius: 1rem;*/}
@media screen and (max-width: 767.99px) {
.topviewbox {
padding: 3em 2vw 0;
    margin: 1em auto;
    font-size: 96%;
    width: 98%;
}}


.topviewbox .topviewboxtitle {
    padding: 0vh 1vw 0 4vw;
    margin: -36px auto 2vh;
    width: 100%;
    font-size: 2.6rem;
    font-weight: bold;
    font-feature-settings: "palt";
    text-align: left;
    color: #333;
    border-bottom: 2px solid #5ab620;}
@media screen and (max-width: 767.99px) {
.topviewbox .topviewboxtitle {
    font-size: 96%;
    width: 98%;
}}


.topviewbox .topviewboxminititle {
    padding: 0.4vh 1vw 0;
    margin: 0px auto 2vh;
    width: 100%;
    font-size: 1.2rem;
    font-feature-settings: "palt";
    text-align: right;
    color: #333;
    border-top: 3px solid #5ab620;}
@media screen and (max-width: 767.99px) {
.topviewbox .topviewboxminititle {
    font-size: 74%;
    width: 98%;
}}




.topviewbox .topviewboximg {
    width: 30%;
    margin: 0 2%;}
@media screen and (max-width: 767.99px) {
.topviewbox .topviewboximg {
    width: 38%;
    margin: -2em 0%;
    z-index: 1;
}}

.topviewbox .topviewboximg img{
    width:100%;
}





.topviewbox .boxinbox{
    margin: 0rem 1.5%;
    width: 62%;
    line-height: 1.3;
    text-align: left;
    color: #333;}
@media screen and (max-width: 767.99px) {
.topviewbox .boxinbox{
    margin: 0rem 0 0 21%;
                width: 78%;
                height: auto;
    }}


.topviewbox .boxtitle {
    width: 100%;
    font-size: 2.4rem;
    font-weight: bold;
    color: #5ab620;}
@media screen and (max-width: 767.99px) {
.topviewbox .boxtitle {
    font-size: 100%;
    width: 98%;
}}

.topviewbox .boxcap {
    font-size: 1.8rem;
        font-feature-settings: "palt";
        text-align: left;
        line-height: 1.8;
        padding: 0 1vw;}
@media screen and (max-width: 767.99px) {
.topviewbox .boxcap {
    font-size: 90%;
}}





.topviewbox .boxinbox .topviewboximg {
    margin: -4em 2% 0em;
    width: 100%;}
@media screen and (max-width: 767.99px) {
.topviewbox .boxinbox .topviewboximg {
    margin: -2em 1% 0em;
}}

.topviewbox .boxinbox .topviewboximg img{
    width: 100%;
    height: auto;
}





.topviewbox .boxinbox .boxtitle {
    width: 100%;
    font-size: 2.4rem;
    font-weight: bold;
    color: #5ab620;}
@media screen and (max-width: 767.99px) {
.topviewbox .boxinbox .boxtitle {
    font-size: 100%;
    width: 98%;
}}

.topviewbox .boxinbox .boxcap {
    font-size: 1.8rem;
    font-feature-settings: "palt";
    text-align: left;
    line-height: 1.8;}
@media screen and (max-width: 767.99px) {
.topviewbox .boxinbox .boxcap {
    font-size: 90%;
}}



/* btnmini */
.btnmini {
    margin: 1em 5px;
    width: auto;
    text-align: right;}
@media screen and (max-width: 767.99px) {
.btnmini {
}}


.btnmini a {
    position: relative;
    min-width: auto;
    width: auto;
    padding: 1rem 3vw 1rem;
    line-height: 1.2em;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #71bd43;
    background: #fff;
    border: 1px solid #71bd43;
    border-radius: 40px;
    transition: .3s;
    font-feature-settings: "palt";
}

.btnmini a:hover{
  opacity:0.9;
    background: #F8B500;
    color:#fff;
    border: 1px solid #F8B500;
}

.btnmini a::after {
    top: calc(50% - 11%);
    right: 7.5%;
    content: "";
    color: #71bd43;
    position: absolute;
    width: 9px;
    height: 9px;
    border-top: 1.5px solid #71bd43;
    border-right: 1.5px solid #71bd43;
    -webkit-transform: rotate(45deg);}
@media screen and (max-width: 767.99px) {
.btnmini a::after {
top: calc(50% - 12.5%);
        right: 5%;
}}

.btnmini :hover::after{
    border-top: 1.5px solid #fff;
    border-right: 1.5px solid #fff;
}










/*--------------------
footer
---------------------*/

footer {
    /* position: fixed; */
    bottom: 0;
    left: 0;
    width: 100%;
    /* overflow: hidden;*/
z-index:50000;
}


.footer-all {
    padding: 0.6rem 0 0;
    margin: 1rem auto 0;
    color: #4d4d4d;
    /* display: flex; */
    /* align-items: center; */
    justify-content: flex-end;
    height: 20px; /* 80px */
    background: #71bd43;
    width: 100%;}
@media screen and (max-width: 767.99px) {
.footer-all {
    border-top: none;
height: 30px; /* 74px */
}}


.footer-box {
    padding: 0rem 1vw;
        margin: 0rem auto 0;
        max-width: 1200px;
        color: #4d4d4d;
        width: 100%;
}



/* left */
.footer-box  .footer_logo {
    margin: 0;
    float: left;
    width: 11%;}
@media screen and (max-width: 767.99px) {
.footer-box  .footer_logo {
    width: 30%;
}}
@media only screen and (min-width: 768px) and (max-width: 959.99px) {
.footer-box  .footer_logo {
    width: 16%;
}}


.footer-box .footer_logo img {
    width: 100%;
}


/* right */
.footer_right {
padding: 0;
    color: #fff;
    width: 76%;
    float: right;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;}
@media screen and (max-width: 767.99px) {
.footer_right {
    width: 70%;
    padding: 0;
}}


.footer_right .footer_rightin {
display: flex;
width: 46%;
color: #fff;
align-items: flex-end;
padding-left: 1vw;}
@media screen and (max-width: 896.99px) {
.footer_right .footer_rightin {
    padding: 5px;
    width: 46%;
    margin-right: 40px;
}}
@media screen and (max-width: 767.99px) {
.footer_right .footer_rightin {
    margin-top: 7px;
    padding: 5px;
    width: 20%;
    margin-right: 80px;
}}


.footer_right .footer_rightin2 {
display: flex;
    width: 48%;
    color: #fff;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row-reverse;}
@media screen and (max-width: 767.99px) {
.footer_right .footer_rightin2 {
    margin-right: 5px;
    padding: 0.5rem 5px 0;
    width: 20%;
}}

.footer_right .footer_rightin a,
.footer_right .footer_rightin2 a{
    display: block;
    padding: 0;
    transition: 1s;
    margin: 0;
    transition: 0.3s ease-in-out;
}

.footer_right .footer_rightin a::hover,
.footer_right .footer_rightin2 a::hover{
    opacity:0.8;
}

.footer_right .footer_rightin .tellfree {
    margin: 0rem 1% 0 0;
    padding: 2px;
    font-size: 1.4rem;
        width: 44px;
    float: left;
    height: initial;
}


.footer_right .footer_rightin .tellfree .free {
    margin: 0rem 0 0rem;
    font-size: 100%;
    letter-spacing: 0.1em;
    border: 1px solid #fff;
    padding: 3px;
    line-height: 1.2;
    text-align: center;
}


.footer_right .footer_rightin .tellonoya {
margin: 0 2% 0 0;
    letter-spacing: -0.05em;
    font-feature-settings: "palt";
}
@media screen and (max-width: 767.99px) {
.footer_right .footer_rightin .tellonoya {
}}


.footer_right .footer_rightin .tellonoya .telephone {
    margin: 0rem 1% 0.46rem 0;
    text-align: left;
    width: 100%;
    font-size: 3.25rem;
    color: #fff;
    font-weight: bold;
    line-height: 0.4;
    font-feature-settings: "palt";}
@media screen and (max-width: 767.99px) {
.footer_right .footer_rightin .tellonoya .telephone {
    font-size: 160%;
    margin: 0.6rem 6% 0.6rem 0;
}}
@media screen and (max-width: 860.99px) {
.footer_right .footer_rightin .tellonoya .telephone {
    font-size: 160%;
}}
@media screen and (max-width: 959.99px) {
.footer_right .footer_rightin .tellonoya .telephone {
font-size: 144%;
}}



.footer_right .footer_rightin .tellonoya .telephone a{
    display: block;
    padding: 0 0 0.2rem;
    color: #fff;
    text-decoration: none;
    font-feature-settings: "palt";
    transition: 1s;
    font-size: 100%;
    line-height: 0.3;
    margin: 0;
    transition: 0.3s ease-in-out;
    }


.footer_right .footer_rightin .tellonoya .telephone a:hover{
    opacity: 0.9;
    }

.footer_right .footer_rightin .tellonoya .time {
    text-align: left;
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 0.025em;}
@media screen and (max-width: 767.99px) {
.footer_right .footer_rightin .tellonoya .time {
    font-size: 94%;
}}
@media screen and (max-width: 860.99px) {
.footer_right .footer_rightin .tellonoya .time {
    font-size: 62%;
}}
@media screen and (max-width: 959.99px) {
.footer_right .footer_rightin .tellonoya .time {
    font-size: 56%;
}}



.footer_right .footer_rightin .right_area .telephone {
    float: right;
    display: block;
    margin: 0 1rem 0 0;
    width: 44%; }
@media screen and (max-width: 767.99px) {
.footer_right .footer_rightin .right_area .telephone {
    width: 78%;
}}


/* */
.footer_right .footer_rightin2 .btnfoot {
    margin-right: 5px;
    width: auto;}
@media screen and (max-width: 767.99px) {
.footer_right .footer_rightin2 .btnfoot {
}}


.footer_right .footer_rightin2 .btnfoot a {
    position: relative;
    /* display: inline-block; */
    min-width: auto;
    width: auto;
    padding: 1rem 3vw;
    line-height: 1.2em;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #71bd43;
    background: #fff;
    border-radius: 40px;
    transition: .3s;
    font-feature-settings: "palt";
}

.footer_right .footer_rightin2 .btnfoot a:hover{
  opacity:0.9;
    background: #F8B500;
    color:#fff;
}

.footer_right .footer_rightin2 .btnfoot a::after {
    top: calc(50% - 11%);
    right: 7.5%;
    content: "";
    color: #71bd43;
    position: absolute;
    width: 9px;
    height: 9px;
    border-top: 1.5px solid #71bd43;
    border-right: 1.5px solid #71bd43;
    -webkit-transform: rotate(45deg);}
@media screen and (max-width: 767.99px) {
.footer_right .footer_rightin2 .btnfoot a::after {
top: calc(50% - 12.5%);
        right: 5%;
}}

.footer_right .footer_rightin2 .btnfoot :hover::after{
    border-top: 1.5px solid #fff;
    border-right: 1.5px solid #fff;
}








.copy-all {
margin: 0 auto 0;
    text-align: center;
padding: 0rem ;
    /*
        padding: 0.5rem 0 0;
        background: #ffffff30; */
    font-size: 170%;
    width: 100%;
    /*position: absolute;*/
    bottom: 0;}
 @media screen and (max-width: 767.99px) {
.copy-all {
    background: none;
  }}


.copyright{
    margin: 0% 0 0 0;
padding: 0rem ;
/*padding: 0rem 0 0.5rem;*/
    text-align: center;
    font-size: 30%;
    color: #fff;
    line-height: 1.1}
 @media screen and (max-width: 767.99px) {
.copyright {
    padding: 0rem 2% 1rem;
    font-size: 34%; /* 26% */
text-align: center;
  }}





h1{
    font-size: 4rem;
    font-weight: bold;
    margin: 0rem auto 2rem;
    padding: 1em 0 0;
    color: #71bd43;
    letter-spacing: 0.3em;
    line-height: 1.2;
    /*font-family: serif;*/}
  @media screen and (max-width: 767.99px) {
h1{
    font-size: 180%;
    font-weight: bold;
    font-feature-settings: "palt";

    }}


h1 a{
      text-decoration: none;
      transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
      display: block;
      padding: 1rem;
      color: #5ab620;}

h1 a:hover,h1 a:active{
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #fff;
    }


h2{
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    background: #71bd43;
    padding: 0.6rem 0;
    color: #fff;
    letter-spacing: 0.05em;
    text-align: center;
}

h2 a{
      text-decoration: none;
      transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
      display: block;
      padding: 1rem;
      color: #F8B500;
      font-weight: bold;
    }

h2 a:hover,h2 a:active{
    text-decoration: none;
    color: #efc755;
    }


h3{
    margin-top: 3rem;
    font-size: 140%;
    font-weight: bold;
    text-align: center;
    width: 100%;
    color: #333;
   }
h3 a:hover,h2 a:active{
  text-decoration: none;
  letter-spacing: 0.1em;
      color: #71bd43;
    }



.maintitle{
    margin: 6rem 10%;
        text-align: center;
        width: 80%;
        color: #333;
        font-size: 3.6rem;
        font-weight: bold;
        line-height: 1.3;
        font-feature-settings: "palt";}
@media screen and (max-width: 767.99px) {
.maintitle{
        font-size: 130%;
        margin: 3rem 2%;
        width: 96%;
}}





/* ///  BTN00 基本形 /////////　*/
.btn00{
        margin: 3rem 10% 0;
    padding: 0rem 1em;
    font-size: 1.6rem;
    font-weight: bold;
    font-feature-settings: "palt";
    background: #f68800ba;
    background-repeat: no-repeat;
    background-position: center top;
    /* color: #333; */
    text-decoration: none;
    text-align: center;
    border-radius: 20rem;
    width: 80%;
    outline: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;}
@media screen and (max-width: 1024.99px) {
.btn00{
margin: 2rem auto;
        width: 100%;
}}
@media screen and (max-width: 767.99px) {
.btn00{
        font-size: 90%;
        width: 96%;
        padding: 0.1rem 1%;
        margin: 3rem 2% 1rem;
}}



.btn00 a::after{
    content: "";
    position: absolute;
    width: 6%;
    height: 100px;
    bottom: 0;
    top: calc(50% - 0.45em);
    right: 0px;
    background-image: url(../img/ic_ore.png);
    background-size: 100%;
    vertical-align: bottom;
    background-repeat: no-repeat;}
@media screen and (min-width: 768px) and (max-width: 969.99px) {
.btn00 a::after{
        width: 7%;
        top: calc(50% - 1.3rem);
        right: 0%;
        background-size: 100%;
}}

@media screen and (max-width: 767.99px) {
.btn00 a::after{
    width: 6%;
    top: calc(50% - 0.5em);
    right: 3%;
    background-size: 100%;
}}


.btn00 :hover {
    animation: changehover4 2s ease;
    text-decoration:none;
}

@keyframes changehover4  {
  40% {opacity: 1; color: #F8B500;scale:1.02;}
  80% {opacity: 1;color: #4d4d4d;scale:1.0;}
  100% {opacity: 1;color: #4d4d4d;scale:1.0;}
}








/* ///  BUTTON シンプル形　/////////　*/
.button_all{
    margin: 3vh auto 7vh;
    text-align: center;
    padding: 1em 0;
    width: 70%;
    max-width: 700px;}
 @media screen and (max-width: 820.99px) {
.button_all{
    margin: 3vh auto;
    width: 90%;
}}



.button{
    margin: 0.5rem auto 1rem;
        padding: 0rem;
        text-align: center;
        width: 100%;
        outline: none;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;}
@media screen and (max-width: 767.99px) {
.button{
    width: 90%;
    padding: 0.4rem 1%;
}}


.button a{
    padding: 1.4rem 4vw;
    font-size: 2rem;
    font-weight: bold;
    font-feature-settings: "palt";
    background: #d1481d;
    /*background: linear-gradient(to bottom, #71bd43 0%, #00b900 100%);
*/
background: linear-gradient(to bottom, #d1481d 0%, #ff6f2b 100%);
    text-decoration: none;
    color: #fff;
    text-align: center;
    border-radius: 20rem;
    width: 100%;
    transition: 0.8s ease all;}
@media screen and (max-width: 767.99px) {
.button{
    font-size: 100%;
    width: 90%;
    padding: 0.4rem 1%;
}}



.button::after{
    top: calc(50% - 11%);
        right: 3%;
        content: "";
        color: #fff;
        position: absolute;
        width: 14px;
        height: 14px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        -webkit-transform: rotate(45deg);}
@media screen and (max-width: 767.99px) {
.button::after{
top: calc(50% - 8.5%);
        right: 6%;
        width: 12px;
        height: 12px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        -webkit-transform: rotate(45deg);
}}


.button_all .button a{ 
    color: #fff;
text-decoration: none;}

.button_all .button a:hover{ 
background: linear-gradient(to bottom, #e50012 0%, #d1481d 100%);
     border-radius: 20rem;
    animation: changeoubo 3s ease-in-out;

}

@keyframes changeoubo  {
  0% {opacity: 1;color: #ffffff;scale:1.0;}
  20% {opacity: 1; color: #fff000;scale:1.02;}
  30% {opacity: 1;color: #ffff00;scale:1.01;}
  100% {opacity: 1;color: #ffffff;scale:1.0;}
}



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

.btn_bn-all {
    margin: 0 auto 8vh;
    text-align: center;
    padding: 0;
    position: relative;
    max-width: 900px;}
@media screen and (max-width: 767.99px) {
.btn_bn-all {
    margin: 0 auto 3vh;
}}



.btn_bn-all a{
  padding: 0.5rem;
  display: block;
  font-size: 107%;
  font-weight: bold;
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
  position: relative;
  /*border: 1px solid #ccc;*/
  transition: 0.4s;

  & img{ width:100%; }
}


.btn_bn-all a:hover{
text-decoration: none;
-webkit-transform: scale(1.0);
  transform: scale(1.0);
}






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

.btn_link_all {
    margin: 2rem auto;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 900px;
    text-align: center;
    margin: 1rem auto; 
}



.btn_link{
    position: relative;
    display: inline-block;
    margin: 1rem auto;
    padding: 1.8rem 40px;
    font-size: 2rem;
    font-weight: bold;
    /*font-family: serif;*/
    /*letter-spacing: 0.06em;*/
    font-feature-settings: "palt";
    border: 1px solid #f68800;
    background: #f68800 ; 
    background: linear-gradient(to bottom, #ffeeb3 0%,#ffd028 100% );

    text-decoration: none;
    color: #333333;
    text-align: center;
    border-radius: 0.6rem;
    width: 90%;
    /*transition: 1s;*/}
@media screen and (max-width: 959.99px) {
.btn_link{
    font-size: 100%;
    padding: 1.4rem 10%;
    }}


.btn_link:after {
    position: absolute;
    top: calc(50% - 0.6em);
    right: 15px;
    content: ">"; 
}

.btn_link:hover{
    animation: changecolor 3s ease;
}

@keyframes changecolor  {
  0% {opacity: 1; color: #F8B500;scale: 1.0;/*transform: translateY(30px);*/}
  40% {opacity: 1; color: #F8B500;scale:1.04;}
  80% {opacity: 1;color: #4d4d4d;scale:1.0;}
  100% {opacity: 1;color: #4d4d4d;scale:1.0;}
}




/*--------------------
btn_minilink
---------------------*/

.btn_minilink {
    margin: 1rem 2% 1rem;
        background: #fffde5;
        color: #71bd43;
        text-align: right;
        border: 1px solid #71bd43;
        border-radius: 2rem;
        /* width: 34%; */
        transition: 0.5s;
    }


.btn_minilink a{
    padding: 0.6rem 4vw;
    display: inline-block;
        font-size: 1.6rem;
        font-weight: bold;
        color: #71bd43;
        text-decoration: none;
        position: relative;
        float: right;
        border-radius: 2rem;}
  @media screen and (max-width: 797.99px) {
.btn_minilink a {
    font-size: 120%;
    border-radius: 3rem;
    width: 92%;
    }}


.btn_minilink a:after {
    margin-top: 6px;
    content: "";
    color: #71bd43;
    position: absolute;
    right: 13px;
    font-weight: 600;
    width: 10px;
    height: 10px;
    border-top: 1px solid #71bd43;
    border-right: 1px solid #71bd43;
    -webkit-transform: rotate(45deg);
    }

.btn_minilink a:hover {
    color: #71bd43!important;
    background:#fff000;
    text-decoration: none!important;
}

.btn_minilink::after:hover {
    color: #71bd43!important;
}





/* cap */
.capcome {
    margin: 2rem auto 0;
    width: 100%;
    font-size: 2.4rem;
    color: #00b900!important;
    text-align: center;
    font-weight: bold;
    filter: drop-shadow(1px 2px 5px #ffffff);;
    animation: changehover0 3.2s ease infinite ;}
@media screen and (max-width: 767.99px) {
.capcome {
font-size: 86%;
    font-feature-settings: "palt";
}}


@keyframes changehover0  {
  0% {opacity: 1; color: #4d4d4d;scale:1.0;}
  70% {opacity: 1; color: #4d4d4d;scale:1.0;}
  86% {opacity: 1; color: #ffe8aa;scale:1.04;}
  100% {opacity: 1;color: #4d4d4d;scale:1.0;}
}




/* cap img */
.button-cap {
    width: 14%;
    margin: 1rem 1%;
    padding: 0rem;
    position: absolute;
    left: 2%;}
@media screen and (max-width: 768.99px) {
.button-cap {
width: 10%;
    left: 1%;
}}

.button-cap img{
    width: 100%;
    height: auto;
}

.button-cap a:hover {
    opacity:1!important;
}














/* ※なし注記 */
.t_tyuki {
    margin: 0rem auto 1rem;
    width: 100%;
    font-size: 86%;
    text-align: left;
    line-height: 1.4;
}

.tc_tyuki {
    margin: 0.5rem auto 1rem;
    width: 100%;
    font-size: 96%;
    text-align: center;
    line-height: 1.4;
    font-feature-settings: "palt";
}



/* ※注記 */
.tt_tyuki {
    margin: 0rem auto 0.6rem;
    width: 100%;
    font-size: 84%;
    text-align: left;
    line-height: 1.4;
    padding-left: 1em;
    text-indent: -1em;}
  @media screen and (max-width: 797.99px) {
.tt_tyuki {
    font-size: 80%;
    }}







/* ///// HAMBURGER ////// */

.hambuger {
    background: #00b90030;
    margin: 0;
    font-family: arial;
    animation: bugfix infinite 1s;
    -webkit-animation: bugfix infinite 1s;
}


@keyframes bugfix {
  from { padding: 0;}
  to {padding: 0;}
}

@-webkit-keyframes bugfix {
  from {padding: 0;}
  to {padding: 0; }
}

#overlay-button {
position: fixed;
    right: 2%;
    top: 0.45em;
    padding: 25px 14px;
    cursor: pointer;
    user-select: none;
    z-index: 6000;
    display: block;
    width: 64px;
background: #ffffff90;
}

#overlay-button span {
    height: 3px;
    width: 35px;
    border-radius: 2px;
    background-color: #00b900;
    position: relative;
    display: block;
    transition: all .2s ease-in-out;
}
#overlay-button span:before {
    top: -12px;
    visibility: visible;
}
#overlay-button span:after {
    top: 12px;
}
#overlay-button span:before, #overlay-button span:after {
    height: 3px;
    width: 35px;
    border-radius: 2px;
    background-color: #00b900;
    position: absolute;
    content: "";
    transition: all .2s ease-in-out;
}

#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
    background: #50711b;
}


input[type=checkbox] {
    display: none; 
  
}

input[type=checkbox]:checked ~ #overlay {
    visibility: visible; 
}

input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
    background: transparent;
}
input[type=checkbox]:checked ~ #overlay-button span:before {
    transform: rotate(45deg) translate(10px, 10px);
}
input[type=checkbox]:checked ~ #overlay-button span:after {
    transform: rotate(-45deg) translate(7px, -7px);
}

#overlay {
    /* height: 100vh; */
    height: auto;
    width: 18%;
    background: #00b90090;
    z-index: 2;
    visibility: hidden;
    position: fixed;
    right: 0;
    top: 65px;
    border-radius: 0rem 0 0 1rem;}
@media screen and (max-width: 767.99px) {
#overlay {
    width: 100%;
    height: 100vh;
    border-radius: 0rem 0 0 0;
 }}



#overlay.active {
}


#overlay ul {
    margin-top: 0rem;
        padding: 0.5rem 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        text-align: center;
        /* height: 100vh; */
        height: auto;
        padding-left: 0;
        list-style-type: none;
        font-weight: bold;
}

#overlay ul li {
    padding: 0;
    line-height: 1;
    border: 1px solid #50711bde;
    width: 100%;}
@media screen and (max-width: 767.99px) {
#overlay ul li {
    padding: 0em;
    width: 100%;
    border-bottom: 1px solid #fff;
 }}

/*
#overlay ul li:last-child{
    padding-bottom: 2em;
}
*/

#overlay ul li a {
    padding: 1.4rem 2%;
    color: #50711b;
    background: #ffffff;
    text-decoration: none;
    font-size: 1.7rem;
    filter: drop-shadow(1px 2px 2px #55555550);
    font-weight: 500;
    display: block;}
@media screen and (max-width: 767.99px) {
#overlay ul li a {
    font-size: 110%;
    padding: 1.8rem 2%;
 }}




#overlay ul li a:hover {
    color: #f68800!important;
}






/* ///// NAV ////// */

.gnav_all{
    padding: 0;
    text-align: center;
    width: 100%;
    background: #71bd43;
    filter: drop-shadow(2px 2px 2px #5c857c);
    /*top: 65px;*/
    /* position: fixed; */
    height: 40px;
    /*z-index: 1999;*/}
    @media screen and (max-width: 767.99px) {
.gnav_all{
    filter: none;
    z-index: 2;
    top: 0;
    left: 0;
    color: #fff;
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    width: 100%;
    /*height: 100vh;*/
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
    display: flex;
    align-items: center;
}}



.gnav_all .gnav{
    margin: 0 auto;
    width: 100%;
    padding: 0;
    margin: 0 auto 0;
    max-width: 1200px;
    justify-content: center;
  }

ul.gnav-navi {
    width: 100%;
    display: flex;
    /*background: #fafafa;*/}
 @media screen and (max-width: 767.99px) {
ul.gnav-navi {
    flex-wrap: wrap;
}}


ul.gnav-navi li{
    width: 16.333%;
    border-right: 1px solid #fff;
    height: auto;
    /*padding: 0.4em 1%;*/
    display: inline-flex;
    align-items: center;
    justify-content: center;}
@media screen and (max-width: 767.99px) {
ul.gnav-navi li{
    border: 1px solid #f5f5f5;
    height: auto;
    list-style-type: none;
    padding: 0;
    width: 100%;
    transition: .4s all; 
}}

ul.gnav-navi li:hover {
    background: #f4f9ec;
    transition: 1.0s ;
}

/*
ul.gnav-navi li.btn_item1 {
    border-left: 1px solid #f5f5f5;
}
*/

ul.gnav-navi li a{
    display: block;
padding: 0.5em 1%;
    text-decoration: none;
    line-height: 1.2;
    /* filter: drop-shadow(1px 1px 1px #fff); */
    color: #fff;
    font-weight: 600;
}

ul.gnav-navi li a:hover {
    color: #fff000;
    text-decoration: none;
    padding: 0;
    transition: 1.0s ;
}

.gnav_all ul li:first-of-type {
    border-left: 1px solid #fff;
}

.gnav_all ul li:last-of-type {
    padding-bottom: 0;
}

.gnav_all ul li:hover{
    background :#F8B500;/*82b03d*/
}


.gnav_all.active {
    opacity: 1;
}


ul.gnav-navi span {
    font-weight: 500;
    top: 26%;
    text-align: center;
    bottom: 26%;
    font-size: 1.6rem;
    margin: 0px auto 0;
    left: 3%;
    width: 100%;
    display: block;}
@media screen and (max-width: 767.99px) {
ul.gnav-navi span {
    font-size: 70%;
}}
@media screen and (max-width: 1024.99px) {
ul.gnav-navi span {
    font-size: 70%;
  }}



ul.gnav-navi span.tyosei{
    /*padding-top: 0.5em;*/
}