/* ---------- font ---------- */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@500&family=Zen+Kaku+Gothic+New:wght@500;900&display=swap');

:root{
    --font-jp: 'Zen Kaku Gothic New', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    --font-en: 'Jost', 'Zen Kaku Gothic New', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	/*font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";*/
}
body, .font_sans-serif, .font_serif, .loader_txt, .cms_title h2, #catch h2, #question h2, #contents h2, #contents .box h3, #top_cms .cms_title h2, #page_title h2{
    font-family: var(--font-jp);
        font-family: "Noto Sans JP", "游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: 500;
}
.font_en, a[href^="tel:"]{
    font-family: var(--font-en);
}

/* ---------- color ---------- */

.linkStyle{color: #160a0a;transition: opacity .3s;text-decoration: underline;}
.linkStyle:hover{opacity: 0.7}

:root {
    --normal_color: #333333;
    --color1: #07AD73; /* メインカラー */
    --color2: #faf5ec; /* サブカラー */
    --color3: #FF8017; /* アクセントカラー1*/
    --color4: #f7f7f7; /* アクセントカラー2*/
}
.txt{
	color: var(--normal_color);
}
.cms_link_box a {
    background-color: var(--color3);
    color: #0e0e0e !important;
    border: 2px solid #fff;
    border-radius: 3px 0 0 3px;
}
.cms_link_box:last-of-type a{
    background-color: var(--color1);
}

.marker {
    background: -webkit-linear-gradient(transparent 60%, #fef488 60%);
    background: -o-linear-gradient(transparent 60%, #fef488 60%);
    background: linear-gradient(transparent 60%, #fef488 60%);
}


/* ---------- all ---------- */
#wrap{
    min-width: 1100px;
}
header {
    background-color: var(--color1)!important;
}
header .logo {
    max-width: 130px;
}
.cms_link_box{
    transition: .5s;
}
.all_page header .logo img{
    height: 53px !important;
}
.hvr_txt_color3:hover {
    color: #FFE91D;
}
.menu{
    top: 0;
    left: 0;
    transform: none;
    max-width: 300px;
}
.menu .logo{
    padding: 30px;
}

#catch, .top_loader {
    background-image: url(../img/bg1.png) !important;
    background-size: 800px;
    background-position: top 0 left 0;
    background-repeat: repeat;
    animation: bgloop 20s linear infinite;
    background-color: var(--color2);
}
.top_loader{
    background-image: url(../img/bg1_load.png) !important;
    background-color: var(--color1);
}
#catch{
    padding: 50px 0;
}
@keyframes bgloop {
	0% {background-position: top 0 left 0;}
	100% {background-position: top -400px left 400px;}
}

.f_logo .logo {
    max-width: 150px;
}


/* ---------- top ---------- */
.main_img_wrap{
    background-color: var(--color1);
    overflow: hidden;
}
.fv_anim{
    bottom: 0;
    width: 100%;
}
.fv_txt{
    z-index: 3;
    width: min(80%, 1450px);
    top: 40%;
    left: 49%;
}
.menu  .logo{
    width: 62%;
}

.item1{
    bottom: -20vh;
    left: 0;
    right: 0;
    margin: auto;
    width: min(100vh, 1500px);;
    z-index: 4;
}
.item2 {
    top: 0;
    right: -3%;
    width: min(65%, 1000px);
    z-index: 2;
}

#catch .box .title {
    font-size: 30px;
    font-weight: bold;
}
/*#catch{position: relative;margin-top: 147px;}
#catch::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 119px;
    left: 0;
    top: -79px;
    background-image: url(../img/bg2.png);
    background-size: 100% 100%;
    z-index: 3;
}*/
#catch .box {
    width: 45% !important;
    margin-right: 0;
    margin-left: 12%;
    background-color: rgb(255 255 255);
}
.item3 {
    max-width: 521px;
    margin: auto;
    order: 2;
    z-index: 2;
    left: -34px;
    position: relative;
}
.item3::before {
    content: "";
    display: inline-block;
    width: 30%;
    position: absolute;
    background-image: url(../img/item3_bg.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 36vw;
    height: 33vw;
    bottom: -10vw;
    right: -9vw;
}

#contents .title{
    color: var(--normal_color);
    font-size: 5vw;
    background-image: url(../img/item4.png), url(../img/item5.png);
    background-position: left center, right center;
    background-repeat: no-repeat;
    background-size: 25vw,25vw;
    margin-bottom: 85px;
}
#contents .box h3 {
    font-weight: bold;
    font-size: 30px;
}

#contents .marker{
    background: linear-gradient(transparent 60%, #fef48800 60%);
    background: -webkit-linear-gradient(transparent 60%, #fef48800 60%);

}

.cms_title{
    text-align: center;
}
.cms_title > div{
    width: 100%;
}
.cms_title > div h2, #page_title h2{
    font-size: 40px;
}
.top_cms_box {
    margin-bottom: 100px;
}

.b_wrap{margin-top: 42px;}
.top_bnr1, .top_bnr2 {
    max-width: 550px !important;
    margin: 15px;
    width: 45% !important;
}

/* anim */
.load_anim,.box_anime {
	opacity: 0;
}
.load_anim.start, .box_anime.start {
	animation: poyoyon 1s ease-in-out 1 forwards;
}
.fv_txt .load_anim {
    animation-delay: .6s;
}
@keyframes poyoyon {
0% {
    opacity: 0;
    transform: translateY(50px) scale3d(0.5, 0.5, 0.5);
  }
  40% {
    opacity: 1;
    transform: translateY(-20px) scale3d(1, 1, 1);
  }
  70% {
    opacity: 1;
    transform: translateY(5px) scale3d(1, 1, 1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale3d(1, 1, 1);
  }
}

.item2 img {
  opacity: 0;
  transform: translate(45%, -47%);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.item2.start img {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- under ---------- */
#page_title {
    height: 148px;
    background-image: none !important;
    background-color: #fff;
}
#cms_5-f .cate_box .box_txt1, .cms_5-f .cate_box .box_txt1 {
    background-color: var(--color2);
}

.line_bnr  {
    width: min(100%, 800px);
    margin-top: -55px;
}
.page8 .line_bnr{
    margin-top: 30px;
}


/* ---------- tablet ---------- */
@media screen and (max-width: 768px){
#wrap{
    min-width: 100%;
}
.all_page header .logo img,header .logo img{
    height: 53px !important;
}
.all_page header.clone-nav{
    background-color: var(--color1) !important
}
header.clone-nav {
    background-color: transparent !important;
}
header.is-show {
    background-color: var(--color1)!important
}
.main_img_wrap {
    height: 83vh;
    margin-top: 0;
}
.fv_anim {
    bottom: 103px;
    width: 164vh;
    left: -13%;
}
.fv_txt {
    width: 91%;
    top: 34%;
}
.item1 {
    bottom: -35px;
    width: 89%;
}
.item2 {
    top: 0;
    right: -16%;
    width: 74%;
}

#catch {
    padding: 89px 0 51px;
    position: relative;
}
#catch .box {
    width: 77% !important;
    margin-right: 0;
    margin-left: 0;
}
.item3{
    width: 24.66667% !important;
    left: auto;
    right: -22px;
    top: -44px;
    position: absolute;
}
.item3::before{
    opacity: 0;
}
}

/* ---------- mobile ---------- */
@media screen and (max-width: 667px){
.all_page header .logo img,header .logo img{
    height: 45px !important;
}
.main_img_wrap {
    height: 535px;
    margin-top: 0;
}
.fv_anim {
    bottom: 9%;
    width: 147vh;
}
.fv_txt {
    width: 90%;
    top: 37%;
}
.item1 {
    bottom: 0;
    width: 84%;
}
.item2 {
    top: 0;
    right: -26%;
    width: 100%;
}

.top_cms_box.cms1 {
    margin-top: 50px;
    margin-bottom: 57px;
}

#catch {
    padding: 62px 0 2px;
}
#catch .box .title, #contents .box h3 {
    font-size: 20px;
}
#catch .box{
    width: 88% !important;
}
.item3{
    position: relative;
    top: -49px;
    width: 41.66667% !important;
}
.item3::before {
    opacity: 1;
    width: 49vw;
    height: 38vw;
    bottom: -15vw;
    right: -20vw;
}
#contents .title {
    font-size: 8vw;
    background-size: 14vw, 16vw;
    margin-bottom: 32px;
}
.box con2{
    margin-top: 50px;
}

.top_cms_wrap {
    padding-top: 50px;
}
.top_bnr1, .top_bnr2 {
    margin: 5px;
    width: 79% !important;
}

#page_title{
    height: 109px;
}
.cms_title > div h2, #page_title h2 {
    font-size: 30px;
}
.cms_title > div h2, #page_title h2 {
    font-size: 25px;
}
.content_wrap {
    margin-top: 50px;
}
.page-top {
    bottom: 57px;
}
#cms_2-b .cate, #cms_2-b .cate_wrap {
    margin-bottom: 0;
}
}




/* fix_bnr ---------------------------------------------------------------------------------------------*/
#fix_bnr {
    bottom: 9px;
    right: 67px;
    z-index: 10;
    width: 70%;
    max-width: 320px;
    transition: 0.5s;
    opacity: 0;
}
#fix_bnr.scroll{
    opacity: 1;
}
#fix_bnr.close{
    opacity: 0;
    z-index: -1;
}
@media screen and (max-width: 768px){
#fix_bnr.close{
    transform: translateX(200px);
}
}
@media screen and (max-width: 667px){
#fix_bnr {
    width: 57%!important;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 10px;
}
}
/* fix_bnr end ---------------------------------------------------------------------------------------------*/