/*--------------------------------------------
 色 ・　文字
----------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=RocknRoll+One&display=swap');
:root{
    --color1: #92B748;
    --color2: #F6F9EF;
    --color3: #007B00;
    --color4: #E1E7D4;
    --color5: #F5FFD9;
    --color6: #fff;
    --color7: #ffe7a2;
    --introbg: #d2e5cd;
    --hilighttext: #127300;/* 箇条書き強調箇所の文字色 */
    --hilightbg: #ffe14e;/* 箇条書き強調箇所の背景色 */
	--text: #111111;
    --base: #ffffff;
    
    --topcontu:100px;/* TOPコンテンツの上下余白 */
    --titile_size: 50px;/* TOPタイトルサイズ */
    --titile_under: 50px;/* TOPタイトルの下余白 */
    --font1: 20px;
    --fontB1: 26px;
    --fontB2: 30px;
    --font-jp: 'Noto Sans JP', "游ゴシック Medium", sans-serif;
    --font-title: 'Mochiy Pop One', sans-serif;
}
/* タブレット */
@media screen and (max-width: 768px){
    :root{
        --topcontu:100px;
        --titile_size: 43px;
        --titile_under: 50px;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    :root{
        --topcontu:30px;
        --titile_size: 28px;
        --titile_under: 30px;
        --fontB1: 21px;
        --fontB2: 25px;
    }
}
/*--------------------------------------------
 スクロールするとマーカーがつく
----------------------------------------------*/
.hilight{
    color: var(--hilighttext);
    /*background-color: var(--hilightbg);*/
    position: relative;
    z-index: 2;
}
.hilight::before{
    content: "";
    position: absolute;
    z-index: -1;
    background-color: var(--hilightbg);
    height: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0%;
    transition: all 1s;
}
.hilight.start::before{
    width: 100%;
}
/* スマホ */
@media screen and (max-width: 667px){
    /*.hilight::before{width: 100%;}*/
}

/*--------------------------------------------
 TOP
----------------------------------------------*/
.human{}
.top_title{
    font-size: var(--titile_size);
    font-weight: normal;
    font-family: var(--font-title);
    /*font-family: 'RocknRoll One', sans-serif;*/
        text-shadow: 0px 2px 0px var(--color3);
}
.titile_under{
    margin-bottom: var(--titile_under);
}
.contents_box{
    padding: var(--topcontu) 0;
}
.contents_box .width_1280-max{}


.list p{
    display: block;
    background-color: var(--base);
    margin-bottom: 25px;
    padding: 15px 3%;
    border-radius: 5px;
    font-weight: bold;
}

#intro{
    background: url(./Dup/img/intro_bg.png);
    background-color: var(--introbg);
    padding-top: 0!important;
    	background-size: 400px;
	background-position: top 0 left 0;
	background-repeat: repeat;
	animation: bgloop 20s linear infinite;
}
@keyframes bgloop {
	0% {background-position: top 0 left 0;}
	100% {background-position: top -400px left 400px;}
}

#intro_title,#intro_txt{
    background-color: var(--base);
}
#intro_txt{
    padding-top: var(--titile_under);
    border-radius: 0 0 25px 25px;
}
#intro_title{
    margin-bottom: 0!important;
    padding: var(--titile_under) 0;
    background-color: var(--color7);
    /*border-radius: 25px;*/
}
#intro #intro_title .intro_title_img{
     width: max(40%, 500px);/* 最小値 */
}
#intro #intro_title h2{
    display: block;
    line-height: 1.5;
    width: 400px;
    margin: 0 auto;
        color: var(--color3);
    text-shadow: 0px 2px 0px var(--base);
}
#intro #intro_title h2::before,#intro #intro_title h2::after{
    content: "";
    background-image: url(./Dup/img/kyoucho_l.png);
    display: block;
    width: 50px;
    height: 97px;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -50px;
}
#intro #intro_title h2::after{
    background-image: url(./Dup/img/kyoucho_r.png);
    left: auto;
    right: -50px;
}
#intro .human{
    bottom: 0;
    right: 5%;
    width: min(37%,450px);
}
#intro_txt .list{
    width: max(530px, 60%);
    margin: auto;
}
#intro_txt .list:nth-child(even){}
#intro_txt .list p{
    position: relative;
    background-color: var(--color5);
    border: solid 3px var(--color1);
    border-radius: 20px;
    margin-bottom: 60px;
}
#intro_txt .list p::before{
    content: "";
    background-image: url(./Dup/img/fukidashi_l.png);
    width: calc(124px*0.55);
    height: calc(90px*0.55);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: calc(-90px*0.55);
    right: 10%;
}

#intro_txt .list:nth-child(even) p::before{
    background-image: url(./Dup/img/fukidashi_r.png);
    right: auto;
    left: 10%;
}
#intro_txt .list:last-child{
    margin-bottom: 0;
    padding-bottom: var(--titile_under);
}

#contents1 .human{
    bottom: 0;
    right: 2%;
    width: min(20%, 300px);
}
#con1_txt .list{}
#con1_txt .list p{
    padding: 25px 25px 25px 75px;
    margin: 0;
    border-radius: 0;
    border-bottom: 2px dashed var(--color1);
}
#con1_txt .list:last-of-type p{
    border-bottom: none;
}
#con1_txt .list p::before{
    content: "";
    background-image: url(./Dup/img/check.png);
    position: absolute;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    top: 50%;
    left: 20px;
    background-size: cover;
    background-repeat: no-repeat;
}
#con1_txt .tet_other{}

#contents2{}
#contents2 .spacer{
    width: 100%;
    height: 50px;
}
#contents2 .contents2_sub_title{}
#contents2 #contents2_box_wrap .con_box .con_txt{
    font-family: var(--font-title);
    font-size: var(--fontB2);
    color: var(--hilighttext);
    position: relative;
    border-bottom: 3px solid var(--color1);
    border-top: 3px solid var(--color1);
    line-height: 1.7;
}
#contents2 .con_box .pc_number {
    font-family: var(--font-title);
    font-size: 55px;
    top: -95px;
    left: 0px;
    color: var(--color1);
}


#contents3{}
#contents3 .spacer{
    /*width: 100%;*/
    /*height: 50px;*/
}
#contents3 .human{
    position: relative;
    bottom: -100px;
}
#con3_txt .list{}
#con3_txt .list p{}
#con3_txt .tet_other{}

#contents4{}
#contents4::before{
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0.1;
    background-image: url('./Dup/img/kaeru.png');
	background-size: 200px;
	background-position: bottom 0 right 0;
	background-repeat: repeat;
	animation: bgloop 10s linear infinite;
}
@keyframes bgloop {
	0% {background-position: top 0 left 0;}
	100% {background-position: top -200px left 200px;}
}
#contents4::after{
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    background-color: var(--color6);
}
#contents4.contents_box .width_1280-max{
    /*background-color: var(--base);*/
}
#contents4_title{}
#contents4_title .anatahe_img{
    width: min(100%, 900px);
}
#contents4_txt{}

#contents4_title2{
    width: min(100%, 550px);
    margin: 0 auto 50px;
}
#con4_txt .list{
    width: max(80%, 440px);
    margin-bottom: 30px;
    background-color: var(--color5);
    border-radius: 20px;
}
#con4_txt .list .img_tokucho{
    background-color: var(--color1);
    border-radius: 20px 0 0 20px;
    width: 20%;
}
#con4_txt .list p{
    background-color: var(--color5);
    border-radius: 0 20px 20px 0;
    padding: 25px;
    font-size: var(--fontB1);
    font-family: var(--font-title);
    color: var(--hilighttext);
    font-weight: normal;
    line-height: 1.7;
    width: calc(80% - 50px);
    margin: 0;
}
#con4_txt .list p .text_s{
    font-size: calc(var(--fontB1) * 0.7);
}

#contents5{}
#contents5_title{}
#con5_txt{
    margin-bottom: 30px;
}
#contents5 .youtube{}
#contents5 .youtube iframe{
    width: 60vw;
    /*height: calc(60vw * 0.65);*/
    height: calc(60vw * 0.9);
    margin: 0 auto;
    display: block;
}

#close{}
#close .close_txt,#close .close_con_btn{
    overflow: hidden;
    width: min(86%, 900px);
    border: 3px solid var(--color1);
}
#close .close_txt{
    border-bottom: none;
}
#close .close_txt,#close .close_txt img{
    border-radius: 30px 30px 0 0;
}
#close .close_con_btn{
    /*border-top: none;*/
    padding: 20px 0;
    background-color: var(--color7);
    border-radius: 0 0 30px 30px;
}
#close .con_btn{
    width: min(70%, 500px);
    margin: 0 auto;
    /*position: absolute;*/
    /*bottom: 150px;*/
}



/*画面幅が広い時*/
@media screen and (min-width: 1280px){
    #intro .human{
        right: 8%;
    }
    #contents1 .human{
        right: auto;
        left: 77%;
        transform: translateX(-50%);
    }
}

/* タブレット */
@media screen and (max-width: 768px){
    .top_title{
        line-height: 1.4;
    }
    
    #contents2 .con_box .number {
        /*font-family: 'Roboto Mono', cursive;*/
        font-family: var(--font-title);
        font-size: 100px;
        bottom: 90%;
        left: 0;
        line-height: 1;
        text-shadow: 0 0 15px rgba(0,0,0,0.2);
        font-weight: bold;
    }
    
    #con4_txt .list{
        width: max(55%, 430px);
    }
    #con4_txt .list .img_tokucho{
        border-radius: 20px 20px 0 0;
        width: 100%;
        padding: 10% 0;
    }
    #con4_txt .list p{
        border-radius: 0 0 20px 20px;
        padding: 25px 18px;
        width: calc(100% - 36px);
    }
    }

/* スマホ */
@media screen and (max-width: 667px){
    .top_title{
        letter-spacing: 0em;
    }
    
    #intro{
        background-color: var(--base);
        padding: 0;
    }
    #intro #intro_title .intro_title_img,
    #intro .human,
    #intro_txt .list,
    #con4_txt .list{
        width: 90%;
        margin: 0 auto;
    }
    #intro.contents_box .width_1280-max{
        padding: 0;
    }
    #intro #intro_title h2::before,#intro #intro_title h2::after{
        width: calc(41px * 0.8);
        height: calc(79px * 0.8);
        top: 60%;
        left: -40px;
    }
    #intro #intro_title h2::after{
        left: auto;
        right: -40px;
    }
    #intro #intro_title h2{
        width: max(70%,210px);
    }
    #intro_txt .list p{
        letter-spacing: 0em;
    }

    #intro .spacer{
        width: 100%;
        height: 90px;
    }
    #intro .human{
        width: 70%;
        max-width: 230px;
    }
    
    #contents1{}
    #con1_txt .list p{
        padding: 20px 12px 20px 50px;
            letter-spacing: 0em;
    }
    #con1_txt .list p::before{
        width: 30px;
        height: 30px;
        left: 12px;
    }
    #con1_txt .tet_other{
        margin-top: 20px;
    }
    #contents1 .spacer{
        width: 100%;
        height: 50px;
    }
    #contents1 .human{
        width: min(35%, 150px);
    }
    
    #contents2 .con_box .number{
        font-size: 50px;
    }
    #contents2 #contents2_box_wrap .con_box .con_txt p{
        padding: 20px 0;
    }
    
    #contents3 .human{
        bottom: -30px;
    }
    #con3_txt .list p{
        padding: 15px 25px;
    }
    
    #contents4::before{
        background-size: 100px;
    }
    #con4_txt .list{
        margin-bottom: 25px;
    }
    #contents4.contents_box .width_1280-max{
        padding: 20px 15px;
    }
    
    #contents5.contents_box .width_1280-max{
        padding: 20px 15px;
    }
    #contents5 .youtube iframe{
        width: 90vw;
        /*height: calc(90vw * 0.65);*/
        height: calc(90vw * 0.9);
    }
    
    
    #close .con_btn{
        width: 96%;
    }
}
/*--------------------------------------------
 バナー
----------------------------------------------*/
#cta_link{
    position: fixed;
    /*width: 320px;*/
    width: 450px;
    bottom: 20px;
    box-sizing: border-box;
    z-index: 99;
    right: 10%;
    /*transform: translateX( -50%);*/
    
    transition: all 0.7s;
}
#cta_link .cta_link_box{
    width: 100%;
}
#cta_link a{
    transition: all 0.5s;
}
#cta_link a:hover{}

#cta_link.added{
    right: 20px;
}
/* タブレット */
@media screen and (max-width: 768px){
    #cta_link{
        right: auto;
        left: 50%;
        transform: translateX( -50%);
    }
    #cta_link.added{
        right: auto;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    #cta_link{
        width: 86vw;
        bottom: 10px;
    }
}
/*--------------------------------------------
 お客様の声
----------------------------------------------*/
.v_type1 .triangle {
    display: block;
    border: var(--color3) solid 2px;
    border-radius: 15px;
    box-shadow: 5px 5px 0 0 var(--color4);
}
.v_type1 .triangle:before {
    content: '';
    position: absolute;
    display: block;
    z-index: 1;
    border-style: solid;
    border-color: #FFF transparent;
    border-width: 13px 13px 0 0;
    bottom: -13px;
    left: 50%;
    margin-left: -9px;
}
.v_type1 .triangle:after {
    content: '';
    position: absolute;
    display: block;
    z-index: 0;
    border-style: solid;
    border-color: var(--color3) transparent;
    border-width: 15px 15px 0 0;
    bottom: -17px;
    left: 50%;
    margin-left: -11px;
}


/*--------------------------------------------
 よくある質問
----------------------------------------------*/
.qa_type5 .faq_no {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    top: -10px;
    left: 0;
	-webkit-background-clip: padding-box; 
	-moz-background-clip: padding; 
	background-clip: padding-box;
}
.qa_type5 .box_title1, .qa_type5 .box_txt1 {padding-left: 70px;line-height: 1.7;}

/*--------------------------------------------
 プライバシーポリシー
----------------------------------------------*/



/*--------------------------------------------
 お問い合わせ
----------------------------------------------*/

.contact_tel .bnr_box{
    max-width: 1200px;
    margin: 30px auto 0;
}
.contact_tel .line,.contact_tel .tel,.contact_tel .mail{
    width: clamp(290px, 32%, 700px);
    margin: 20px auto 0;
    border-radius: 10px;
}
.contact_tel .line a,.contact_tel .tel a,.contact_tel .mail a{
    box-shadow: 2px 4px 0px rgba(0,0,0,0.3);
    color: var(--base);
    border-radius: 10px;
}

.contact_tel .line{
    background-color: #06c755;
}
.contact_tel .tel{
    background-color: var(--color3);
}

@media screen and (max-width: 990px){
    .contact_tel .line,.contact_tel .tel,.contact_tel .mail{width: 60%;}
}
/* タブレット */
@media screen and (max-width: 768px){
    .contact_tel .line,.contact_tel .tel,.contact_tel .mail{
        width: 60%;
        border-radius: 1.5vw;
    }
    .contact_tel .line a,.contact_tel .tel a,.contact_tel .mail a{
        border-radius: 1.5vw;
    }
}

/* スマホ */
@media screen and (max-width: 667px){
    .contact_tel .line,.contact_tel .tel,.contact_tel .mail{
        width: clamp(290px, 32%, 700px);
        border-radius: 2vw;
    }
    .contact_tel .line a,.contact_tel .tel a,.contact_tel .mail a{
        border-radius: 2vw;
    }
}

/* --------------------------------------------
 メインイメージ 
---------------------------------------------*/
#main_img > div{
    border-radius: 30px;
    overflow: hidden;
}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    #main_img{
        padding: 0;
    }
}

/* --------------------------------------------
 リンクボタン 
---------------------------------------------*/
.linkStyle,a{
	color: var(--color1);
	text-decoration: underline;
	transition: all 0.5s;
}
a{
    text-decoration: none;
}
.linkStyle:hover,a:hover{
	opacity: 0.7;
	text-decoration: none;
}

.cate_list li a,#page10 ul li a,.more a{
    background-color: var(--color1);
    /*background: linear-gradient(90deg, var(--color3)5%, var(--color1)95%);*/
    color: var(--base);
    font-weight: bold;
    padding: 10px 20px;
    transition: all 0.8s;
}
.cate_list{
    padding: 0;
}
.cate_list li a{
    border-radius: 15px;
    line-height: 1.7;
}
#page10 ul li a{
    padding-top: 15px;
    padding-bottom: 15px;
}
.cate_list li a:hover,#page10 ul li a:hover,.more a:hover{
    background-color:var(--color3);
    opacity: 0.7;
}

/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}
/*--------------------------------------------
 色 ・　文字
----------------------------------------------*/
html,body,.font_10,.font_11,.font_12,.font_13,.font_14,.font_15,.font_16,.font_17,.font_18{font-size: var(--font1);}
.font_2up{font-size: max(calc(var(--font1) + 2px), calc(1rem  + 2px));}
.font_4up{font-size: max(calc(var(--font1) + 4px), calc(1rem  + 4px));}
.font_2dw{font-size: max(calc(var(--font1) - 2px), calc(1rem  - 2px));}
.font_4dw{font-size: max(calc(var(--font1) - 4px), calc(1rem  - 4px));}
.font_6dw{font-size: max(calc(var(--font1) - 6px), calc(1rem  - 6px));}

.sc_nav .logo{
    width: 20%!important;
}
.sc_nav h1,footer h2{
     width: min(16%,200px)!important;
}
footer h2{
    margin: 0 auto;
}
#loader > div figure{
    width: min(80%,200px);
}



/* タブレット */
@media screen and (max-width: 768px){
    #copyright{padding-bottom: 100px;}
    header.sc_nav{
        background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.40) 80%, rgba(255,255,255,0) 100%);
    }
    #header h1{
        width: 22%!important;
    }
    #wrap{
        padding-top: 170px;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    #loader > div figure,#loader > div p{
        top: 45%;
    }
    #header h1{
        width: 30%!important;
    }
    #wrap{
        padding-top: 120px;
    }
}


/* color */
body, .txt_color_nomal, .hvr_txt_color_nomal:hover{color: var(--text);}
.linkStyle{transition: 0.5s;color: var(--text)}
.linkStyle:hover{opacity: 0.7}

.txt_white, .hvr_txt_white:hover{color: white;}
.txt_red, .hvr_txt_red:hover{color: var(--red);}
.txt_color1, .hvr_txt_color1:hover{color: var(--color1)} /* メインカラー */
.txt_color2, .hvr_txt_color2:hover{color: var(--color2)} /* サブカラー */
.txt_color3, .hvr_txt_color3:hover{color: var(--color3)} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: var(--color4)} /* アクセントカラー2 */

/* background-color */
.bg_white, .hvr_bg_white:hover{background-color: white} /* 白背景 */
.bg_black, .hvr_bg_black:hover{background-color: var(--black)} /* 黒背景 */
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1)} /* メインカラー */
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2)} /* サブカラー */
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3)} /* アクセントカラー1 */
.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4)} /* アクセントカラー2 */
.bg_color_clear, .hvr_bg_color_clear:hover{background-color: transparent!important}


/* border-color ※!important */
.border_white, .hvr_border_white:hover{border-color: white}
.border_black, .hvr_border_black:hover{border-color: var(--black)}
.border_color1, .hvr_border_color1:hover{border-color: var(--color1)}
.border_color2, .hvr_border_color2:hover{border-color: var(--color2)}
.border_color3, .hvr_border_color3:hover{border-color: var(--color3)}
.border_color4, .hvr_border_color4:hover{border-color: var(--color4)}


/*--------------------------------------------
 2024.10.02　スマホ時TOPのスクロールを少なくする修正
----------------------------------------------*/
/* タブレット */
@media screen and (max-width: 768px){
    #con4_txt .list p{line-height: 1.3;}
}

/* スマホ */
@media screen and (max-width: 667px){
    
    :root{
    --titile_under: 20px;}

#intro_txt .list p::before{display: none;}
#intro_txt .list p{
    border: none;
    border-bottom: dashed 1px var(--color1);
    margin-bottom: 0px;
    border-radius: 0px;
    line-height: 1.4;
}
#intro_txt .list:last-child p{
    border-bottom: none;
}
#intro .human{display: none;}
#intro .spacer{height: 0px;}

#contents1{
    padding: 0;
}

#con1_txt .list p{
    padding: 10px 12px 10px 50px;
    line-height: 1.5;
}
#contents1 .spacer{height: 0px;}
#contents1 .human{display: none;}

#contents2{
    padding: 0;}
#contents2_sub_title{
    line-height: 1.3;}

#contents2 #contents2_box_wrap .con_box .con_txt{
    border: none;
    line-height: 1.3;}
#contents2 #contents2_box_wrap .con_box .con_txt p{
padding: 0px 0;}
#contents2 .spacer{height: 0px;}

#contents2 .con_box{
margin: 0 auto 60px;}

#contents3{
    padding: 0;
}
#con3_txt .list p{
    margin-bottom: 0px;
    padding: 10px 25px;
    line-height: 1.3;
}
#con3_txt .tet_other{
    line-height: 1.3;
    margin-top: 20px;
}

#contents4_title2{
    margin: 0 auto 20px;}
#contents4_txt{
    line-height: 1.4;
    letter-spacing: -0.05em;
    padding: 0 0 20px;
}


#con4_txt .list{
    display: flex;
    align-items: stretch;
    width: 100%;
}
#con4_txt .list .img_tokucho{
    width: 20%;
    border-radius: 10px 0px 0 10px;
    padding: 5% 0;
}
#con4_txt .list p{
    padding: 10px 16px;
    width: calc(80% - 32px);
    line-height: 1.3;
}

}


/*--------------------------------------------
 モーダル 
----------------------------------------------*/
.modal_bt{
    cursor: pointer;
    border-radius: 10px;
    margin-top: 30px;
    margin-bottom: 20px;
    margin-left: 20%;
    border: 2px solid;
    color: var(--base);
    background-color: var(--color1);
}
.modal_bt:hover{
    opacity: 0.7!important;
    /*background-color: var(--color2);
    color: var(--color1);*/
}


.modal_box{
    top: 0;
    left: 0;
    background-color: rgba(245,255,255,0.9);
    z-index: 101;
    overflow-y: scroll;
}
.modal_box .close{
    top: -15px;
    right: -15px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: var(--color3);
}

/* タブレット */
@media screen and (max-width: 768px){
    .modal_bt{
        margin: 20px auto;
    }
    .modal_wrap .modal_item{
        padding-top: 130px;
    }
}

/* スマホ */
@media screen and (max-width: 667px){
    .modal_bt{margin: 0px auto 30px;}
    .modal_txt{
        font-weight: 600;
        line-height: 1.4;
    }
}