/*memo-------------------------------------------------------------------------*/
/*video-------------------------------------------------------------------------*/
#main_img {
    z-index: 1;
    overflow: hidden;
    position: relative;
    max-height: 100vh;
    min-height: 100%;}
/*video-------------------------------------------------------------------------*/

/*sns*/
.link_box .flex_space-between { justify-content: left !important;}
.link_box ul li { margin-right: 15px;
    width: 12% !important;
    height: 33px !important;}
.link_box ul li a img {
    width: auto !important;
    height: 97% !important;}
    
/*タブレット*/
@media screen and (max-width: 768px){
/*sns*/
.link_box .flex_space-between {justify-content: center !important;}
.link_box ul li {
        margin: 0 5px;
    width: 10% !important;
    height: 33px !important;}
footer .link_box li {max-width: 33px;}
}
    
/*cate_list ...*/
ul.cate_list li a {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 10px;}
    
/*memo-------------------------------------------------------------------------*/

/*color--------------------------------------------------------------------------------------------*/
.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #002813;}
.txt_color1,.hvr_txt_color1:hover{color: #47bb40} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #f8fff8} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #16633a} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #62c05c} /* アクセントカラー2 */
.bg_black{background-color: #002813} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #47bb40} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #f8fff8} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #16633a} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #eeffed} /* アクセントカラー2 */
/* border-color ※!important */
.border_color1,.hvr_border_color1:hover{border-color: #47bb40}
.border_color2,.hvr_border_color2:hover{border-color: #f8fff8}
.border_color3,.hvr_border_color3:hover{border-color: #16633a}
.border_color4,.hvr_border_color4:hover{border-color: #62c05c}

/*hvr before after*/
.cms_title::before {background-color: #16633a;}
#page_title .page_box::before {    background-color: #16633a;}
/*.button:hover::after {box-shadow: inset 0 0 0 15em rgba(98,192,92,1);}*/
.button:hover::after{box-shadow:none;}
.button2:hover {box-shadow: 0 0 20px rgba(98,192,92,0.5) inset;}
foot_tel_bt a:hover {background: #62c05c;}
.button:hover {background: #62c05c;}
/*---------------------*/
div#fakeloader.bg_color1{background-color: #b3f1a7 !important}
/*.spinner7 > div{background:#47bb40 !important;}*/
/*color--------------------------------------------------------------------------------------------*/


body {font-family: 'Noto Sans JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;}
    
h2,h3,h4,h5,h6,li a,.box_title1,.font_en{font-family:'Zen Kaku Gothic New','Noto Sans JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;}

body {font-size: 15px;
    color:#002813;
}
.txt3,.txt4,.txt6,.txt8{line-height:1.8 !important;}
#main_menu ul li a{font-size:16px;}
/*all-------------------------------------------------------------------*/    
header.grid_3 {
    width: 20%!important;
    background: rgb(238,255,237);
    background: linear-gradient(335deg, rgba(238,255,237,1) 20%, rgba(255,255,255,1) 160%);}
.main_box {margin-left: 20%;}
.main_box {width: 80%!important;
            overflow: hidden;}
#main_menu ul li a::before{display:none;}
#main_menu ul li a {
    padding-left: 30px;
    text-align: center;
    padding: 0;}
#main_menu ul li a:hover {padding-left: 0px;
                              color:#47bb40;}
#main_menu ul li:hover {transform: translateY(-5px);}
#main_menu ul li {transition:0.5s;}

footer{background:#f2fff1;}
footer::before {
    content: '';
    background-image: url(dup/img/f_img.png);
    position: absolute;
    width: 112%;
    height: 60%;
    top: -18%;
    left: 0;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}
/*all-------------------------------------------------------------------*/

/*top-------------------------------------------------------------------*/
    
#contents1, #contents2, #contents3, .width_1280-max {
    position: relative;
    padding-left: 90px;
    padding-right: 90px;
    margin: 0;
    max-width: 100%;
}
    
div#contents1 h2 { text-align: center;}
    
div#contents1 {
    background: url(dup/img/bg_sozai01.png);
    background-repeat: no-repeat;
    background-size: 90% 100%;
    background-position: center;
    padding-bottom: 130px;
    padding-top: 120px;
    margin-top: -10px;
}

div#contents2 {
    background: url(dup/img/bg_sozai02.png);
    background-repeat: no-repeat;
    background-size: 90% 100%;
    background-position:center;}

div#contents3 {
    background: url(dup/img/bg_sozai03.png);
    background-repeat: no-repeat;
    background-size: 90% 100%;
    background-position:center;
    padding-bottom: 150px;
    overflow: hidden;
}

div#contents2::before {
    background-image: url(dup/img/con03.png);
    content: "";
    position: absolute;
    width: 10%;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    transform: scale(-1,-1) rotate(101deg);
    top: -15%;
    left: 0%;
}

.con2_bg::after{
    background-image: url(dup/img/con01.png);
    content: "";
    position: absolute;
    width: 10%;
    height: 98px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 29;
    bottom: -41%;
    right: 8%;
}


#contents3::before {
    background-image: url(dup/img/con02.png);
    content: "";
    position: absolute;
    width: 15%;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 29;
    bottom: 6%;
    left: 6%;
}

#contents3:after {
    content: "";
    display: block;
    width: 112%;
    height: 70%;
    position: absolute;
    background-color: #f8fffc;
    border-radius: 0 40px 40px 0;
    top: 50px;
    left: -8%;
    top: 16%;
    z-index: -1;
    background: rgb(247,255,246);
    background: linear-gradient(90deg, rgba(247,255,246,1) 0%, rgba(248,255,252,1) 100%);
}

#contents2 .con2_bg:before {
    top: 0px;
    right: 0;
    z-index: 0;
}

#contents2 .con2_bg:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #ffe7ac;
    background: rgb(247,255,246);
    background: linear-gradient(90deg, rgba(247,255,246,1) 0%, rgba(248,255,252,1) 100%);
    z-index: -1;
}



#main_img::after {
    content: '';
    background: url(dup/img/catch.png);
    z-index: 20;
    width: 42%;
    height: 111px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 43%;

    left: 3%;}

@media screen and (max-width: 1700px){
#main_img::after {;
    width: 39%;
    height: 96px;}
}
.top_cms_box {padding-top: 100px;}
#top_cms {padding-bottom: 100px;}

div#attach::before {
    content: '';
    background: rgba(238,255,237,0.3);
    position: absolute;
    width: 100%;
    height: 100%;
    mix-blend-mode: soft-light;
}
/*top-------------------------------------------------------------------*/

/*fadein-------------------------------------------------------------------*/
.fadein{
     opacity: 0;
     transform: translateY(20px);
     transition: 1.5s;
     transition-property: opacity,transform
}
.fadein.fadetrans{
     opacity: 1;
     transform: none
}
/*fadein-------------------------------------------------------------------*/



/*sub-------------------------------------------------------------------*/

#page_title .title_img {background-position: bottom 20% center;}
.cms_wrap {padding: 0;}
.width_1280-max .width_1000-max {
    width: 100%;
    max-width: 1100px;}


section#page_title {
    position: relative;
}
section#page_title::before {
    content: '';
    background-image: url(dup/img/con04.png);
    position: absolute;
    width: 20%;
    height: 18%;
    background-size: contain;
    right: 0;
    bottom: -33%;
    background-repeat: no-repeat;
}

section#page_title::after {
    content: '';
    background-image: url(dup/img/bg_sozai02.png);
    position: absolute;
    width: 122%;
    height: 100%;
    background-size: contain;
    right: -60%;
    bottom: -30%;
    z-index: -2;
    background-repeat: no-repeat;
}

section#page_title::before {
    content: '';
    background-image: url(dup/img/con04.png);
    position: absolute;
    width: 20%;
    height: 18%;
    background-size: contain;
    right: 6%;
    bottom: -5%;
    background-repeat: no-repeat;
    transform: scale(-1,1) rotate(6deg);
}


/*linkStyle*/
a.linkStyle {
    color: #47bb40;
    border-bottom:solid 1px;
    transition: 0.5s;
}

.opacity07{opacity:0.9;}
#cms_1-c .box_title1{color: #388f61;}

/*qa*/
#cms_5-c .box_txt1::before {
    content: "A.";
    color: rgba(0,40,19,50%);
    font-family: 'Zen Kaku Gothic New','Noto Sans JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}

/*privacypolicy*/
section#page9 {padding: 50px 0 100px;}
/*site map*/
section#page10 {padding: 50px 0 100px;}
/*sub-------------------------------------------------------------------*/




/*タブレット*/
@media screen and (max-width: 768px){
    
header.grid_3 { width: 100%!important;}

h1#logo { max-width: 170px;}

.main_box {
    width: 100% !important;
    overflow: hidden;
    margin: 0;}
    
#contents1, #contents2, #contents3, .width_1280-max {
    padding-left: 25px;
    padding-right: 25px;}
footer::before { top: -10%;}

section#page9,section#page10 {padding: 25px 0 80px;}
section#page7 {padding-bottom: 80px;}
.cms_wrap.width_max_tb {padding-top: 30px;}

div#contents1 {
    padding-bottom: 60px;
    padding-top: 70px;}
div#contents2::before {
    width: 15%;
    height: 64px;
    z-index: 2;
    transform: scale(1,1) rotate(11deg);
    top: -9%;
    left: auto;
    right: 7%;
}

.con2_bg::after {
    width: 14%;
    height: 83px;
    z-index: 5;
    bottom: -31%;
    right: 8%;}
    
#attach {
    height: 200px;
    background-position: bottom 15% center;}

.top_cms_box {padding-top: 50px;}
#main_img::after {
    width: 39%;
    height: 58px;}
    
#contents3:after {height: 100%;}

div#contents1,div#contents2,div#contents3{    background-size: 100% 100%;}

}
/*スマホ*/
@media screen and (max-width: 667px){
#main_img::after {
    width: 48%;
    height: 35px;
    bottom: 35%;
}
div#contents1 {
    padding-bottom: 50px;
    padding-top: 60px;
}

div#contents2::before {
    width: 22%;
    height: 44px;
    z-index: 2;
    transform: scale(1,1) rotate(11deg);
    top: -5%;
    left: auto;
    right: 7%;}
    
h1#logo {max-width: 120px;}
div#contents1,div#contents2,div#contents3{background-image:none;}

.con2_bg::after {
    width: 20%;
    height: 59px;
    z-index: 5;
    bottom: 0;
    right: 3%;
    transform: rotate(20deg);}

div#contents3 { padding-bottom: 80px;}
#contents3::before {
    background-image: url(dup/img/con02.png);
    content: "";
    position: absolute;
    width: 21%;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 29;
    bottom: 2%;
    left: auto;
    right: 5%;
}

footer::before {
    top: -4%;
    background-size: 150%;
}

section#page_title::after {width: 175%;}
section#page_title::before {
    width: 26%;
    height: 16%;
    right: 6%;
    bottom: -1%;}


}


/*IE*/
@media all and (-ms-high-contrast: none){
    
.pc_box .contact_bt a {padding: 13px 0 14px !important;}
.more a{padding-bottom: 12px !important;}

.foot_tel_bt a{padding-top: 11px !important;}
.pager li a {padding: 4px 0 4px !important;}

#cms_2-a .cate .cate_title {padding-top: 12px !important;}
#cms_6-a .cate .cate_title {padding-top: 11px !important;}

#page9 .box p a {padding: 4px 8px 6px !important;}
#page10 ul li a {padding: 12px 0 13px !important;}


}



/*20220202デ*/
div#contents1 p {
    padding-left: 150px;
    padding-right: 150px;
    padding-top: 40px;
}


div#contents1 p {
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 40px;
    text-align: center;
    line-height: 2 !important;
    font-size: 15px;
}

div#contents1 h2 {
    text-align: center;
    font-size: 26px;
}

div#contents2 p {line-height: 2 !important;}

/* アニメーション前のスタイル */
.js-marker {
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, #dcfff0, #e8f7ff); /* 単色の場合は同じ色、グラデーションさせる場合は別々の色 */
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 30%; /* '30%'の部分にマーカーの太さを記入 */
  transition: all 1s ease-in-out; /* マーカーを引く速度を調整 */

}

/* アニメーション発火時 */
.js-marker.inview {
  background-size: 100% 30%; /* '30%'の部分は上で設定した太さに合わせる */
}





.emblem {
  position: absolute;
  left: 0;
  right: -80%;
  top: 25vh;
  margin: 0 auto;
  width: 60vh;
  height: 60vh;
  border-radius: 50%;
  font-weight: 300;
  color: #dcffe9;
  z-index: -1;
  animation: spinZ 100s linear infinite;
  text-align: center;}

.emblem span {
    position: absolute;
    display: inline-block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-transform: uppercase;
    font-size: 60px;
    transition: all .5s cubic-bezier(0,0,0,1);
    font-family: 'Lato','Zen Kaku Gothic New','Noto Sans JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;}


  @keyframes spinZ {
    0% {
      transform: rotateZ(360deg);
    }
    100% {
      transform: rotateZ(0deg);
    }
  }
  
  
.cms_1280{
    padding-left: 0px;
    padding-right: 0px;}

.top_cms_box{
    padding-left: 90px;
    padding-right: 90px;
    position: relative;}


.top_cms_box:nth-of-type(1) {
    background: url(dup/img/cms1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

.top_cms_box:nth-of-type(2) {
    background: url(dup/img/cms2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

.top_cms_box:nth-of-type(3) {
    background: url(dup/img/cms3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

.top_cms_box:nth-of-type(4) {
    background: url(dup/img/cms4.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

.top_cms_box:nth-of-type(3)::before {
    background-image: url(dup/img/con04.png);
    content: "";
    position: absolute;
    width: 14%;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    transform: rotate( 
297deg
 );
    bottom: -14%;
    right: 10%;
    opacity: 0.6;
}


@media screen and (max-width: 768px){
h1#logo {max-width: 200px;}
div#contents1 h2 {
    text-align: center;
    font-size: 22px;}

header.grid_3 {
    width: 100%!important;
    padding: 21px 0;}
    
div#contents1 p {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 28px;
    text-align: left;
    line-height: 1.8 !important;
    font-size: 15px;}
    
div#contents2 p {line-height: 1.5 !important;}

.top_cms_box {
    padding-left: 20px;
    padding-right: 20px;
    position: relative;}

.top_cms_box:nth-of-type(3)::before {
    width: 15%;
    height: 42px;
    transform: rotate( 290deg );
    opacity: 0.7;}


div#contents1 p {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    text-align: left;
    line-height: 1.8 !important;
    font-size: 14px;}
}

/*スマホ*/
@media screen and (max-width: 667px){
.emblem {
    left: -55%;
    right: auto;
    top: 28vh;}

.emblem span {font-size: 41px;}

.top_cms_box:nth-of-type(3)::before{content:none;}
.top_cms_box:nth-of-type(1),.top_cms_box:nth-of-type(2),.top_cms_box:nth-of-type(3),.top_cms_box:nth-of-type(4){background:#fff !important;}

.top_cms_box {
    padding-left: 10px;
    padding-right:10px;
    position: relative;}

header.grid_3 {
    width: 100%!important;
    padding: 12px 0;}

footer .logo {
    display: block;
    text-align: center;
}

}

/*IE*/
@media all and (-ms-high-contrast: none){
.js-marker{

    background: linear-gradient(transparent 70%, #dcfff0 30%);
}
}