﻿@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@500&display=swap');

:root{--font_ShipporiMin: 'Shippori Mincho B1',"游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";}
:root{--font_zenkaku: 'Zen Kaku Gothic New', "Yu Gothic Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, "MS PGothic", sans-serif;}

.con1_title,.intro_title, #contents .con_title,h3,h2,h4,h5,h6,.loader_txt, .cms_title h2, #catch h2, #question h2, #contents h2, #contents .box h3, #top_cms .cms_title h2, #page_title h2,.menu ul li,.sub_title{font-family:var(--font_ShipporiMin);}

.en_font {
    font-family: 'Caveat', cursive;
}
 body, .font_sans-serif{font-family:var(--font_zenkaku);}

/*color----------------------------------------------------------------------------*/
:root{
    --color1:#9ccc51;
    --color2:#fffef7;
    --color3:#68bbbc;
    --color4:#fff688;
    --color5:#9ccc51;  
    --white:#ffffff;
    --black:#4e4f4b;
    --gray:#ccc;
}


body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: var(--black);}
.txt_white,.hvr_txt_white:hover{color: var(--white);}
.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 */
.txt_color5,.hvr_txt_color5:hover{color: var(--color5);} /* アクセントカラー2 */
/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: var(--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_color5,.hvr_bg_color5:hover{background-color: var(--color5);} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}
/* border-color ※!important */
.border_white,.hvr_border_white:hover{border-color: var(--white);}
.hvr_border_black:hover{border-color: var(--black);}
.border_black{border-color: var(--gray);}
.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);}
.border_color5,.hvr_border_color5:hover{border-color: var(--color5);}

.linkStyle{color: var(--color3);
          border-bottom:solid 1px;
}
body#body {
    background: var(--white);
}
/*color----------------------------------------------------------------------------*/

/*装飾に便利なposi_rel*/
#contents_box,#contents1,#contents2,#contents3,.con1_outer, .con2_outer, .con3_outer,.img5, .img6, .img7,div#left,div#right,div#intro_wrap,#contents2_wrap,.custom_wrap,.intro_left,.cms_title,.intro_wrap .font_bar,#contents_wrap .bg_container,#sticked,#top_cms1,#catch,.top_cms_box_wrap{position: relative;}
/*装飾に便利なposi_rel*/
/*装飾に便利な疑似クラス設定*/
#main_img::before, #main_img::after, #contents_box::before, .con1_outer::after, #attach::before, .con2_outer::before,.con2_outer::after,.con3_outer::before,.con3_outer::after,#page_title .title_img::after,article .width_1280-max::before,div#contents1::before,div#contents1::after,div#contents3::before,#contents2::before,div#contents2::after,#page_title .title_img::after,.img5::before, .img6::before, .img7::before,div#left::before,div#right::before,div#intro_wrap::before,div#intro_wrap::after,#contents2_wrap::before,.custom_wrap::before,.custom_wrap::after,.font_bar::before,.intro_left::before,.intro_left::after,.cms_title::before,#body::before,#contents_wrap .bg_container::before,#sticked::before,#top_cms1::before,#catch::before,.top_cms_box_wrap::before,#catch::after,#page_title::before{
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    z-index: 1;
}

.normal_img img, .rectangle_img, square_img, .box_wrap, ul.pager li a, section#page10 ul li a, #contact_mail a, #contact_tel a {
    border-radius: 10px;
}
/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.banner{display:none;}
#catch::before {
    background-image: url(dup/img/intro.png);
    width: 21%;
    height: 25%;
    top: 20px;
    left: 20px;
    background-size: contain;
    mix-blend-mode: hard-light;
}

.top_cms_box_wrap {
    background: var(--color2);
    border: solid 1px #f6f2d8;
}


.top_cms_box.cms1 .sub_title span {
    color: var(--color1);
    background: -webkit-linear-gradient(126deg, rgba(156,204,81,1) 0%, rgba(104,187,188,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#catch .box .title {
    background: rgb(156,204,81);
    background: linear-gradient(126deg, rgba(156,204,81,1) -10%, rgba(104,187,188,1) 100%);
}
div#contents3_wrap .txt_color3 {
    color: #3ab8b9;
}
div#contents3_wrap {
    background: rgb(156,204,81);
    background: linear-gradient(126deg, #fffde7 -30%, #abe9ef 150%);
    padding: 100px;
}

#contents3 .con_box {
    background-color: var(--white);
    border-radius: 10px;
    padding: 60px;
    margin: 0 7%;
}
#contents3 .check li p {
    background-image: url(./Dup/img/check.png);
    background-repeat: no-repeat;
    background-position: top 14px left 15px;
    background-size: 30px;
    padding-left: 60px;
    background-color: var(--color2);
    border: solid 1px #f6f2d8;
}


#contents .box:nth-child(odd) .box_item {margin-left: 55%;}

#contents .box .box_item {
    background-color: rgba(255 ,255 ,255,0.9);
    padding: 50px 40px;
    z-index: 2;
    margin-top: -400px;
    width: 45% !important;
    border: solid 1px #f6f2d8;
}

section#contents {padding: 120px 0;}


section#contents {
    padding: 120px 0;
    /*background-image: url(dup/img/bg.jpg);*/
    background-size: cover;
    /* background-attachment: fixed; */
    background-position: center;
}

#contents .box .box_item:before {
    /*border: 1px solid transparent;*/
    display: none;
}
#contents .box .box_item,#contents img {border-radius: 0px;}

/*タブレット*/
@media screen and (max-width: 768px){
#contents .box:nth-child(odd) .box_item {
    margin-left: 0;
}
#contents .box .box_item {
    background-color: rgba(255 ,255 ,255,0.9);
    padding: 50px 40px;
    z-index: 2;
    width: 100% !important;
    margin: 10px auto;
}
}

.marker {
    background: -webkit-linear-gradient(transparent 60%, var(--color4) 60%);
    background: -o-linear-gradient(transparent 60%, var(--color4) 60%);
    background: linear-gradient(transparent 60%, var(--color4) 60%);
}

.top_cms_wrap .marker {
    background: transparent;
    border-bottom: dotted 3px var(--color5);
    padding-bottom: 5px;}


.topimg01 {
    object-fit: cover;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    /*top: 50%;*/
    position: absolute !important;
    /*transform: translate(-50%, -50%);*/
    /*left: 50%;*/
}


span.catch img {
    max-width: 22vw;
    position: absolute;
    bottom: 8%;
    right: 3%;
    transform: translate(0%,0%);
    z-index: 1;
}

#catch::after {
    background-image: url(dup/img/item01.png),url(dup/img/item02.png);
    width: 102%;
    height: 134%;
    background-size: 13%, 10%;
    right: 0%;
    bottom: -10%;
    z-index: 2;
    background-position: right -1% top 0%,left 1% bottom 0%;
    pointer-events: none;
}


/*上下に揺らす----------------------------------------*/

#catch::after{
  animation: img_box_9955 8s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;}
 
@keyframes img_box_9955 {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-16px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(0) }}

/*上下に揺らす----------------------------------------*/


#contents .box .box_item .sub_title {
    top: -46px;
    width: inherit !important;
    color: var(--color1);
    background: -webkit-linear-gradient(126deg, rgba(156,204,81,1) 0%, rgba(104,187,188,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


#page_title::before {
    width: 100%;
    height: 100%;
    color: var(--color1);
    background: -webkit-linear-gradient(126deg, rgb(233 249 208) 0%, rgb(197 254 255) 100%);
    z-index: 0;
    opacity: 0.8;
    mix-blend-mode: normal;
}
.menu ul {
    background-color: rgba(255,255,255,0.9) !important;
}

.fadein{
	transform: translate(0%,0%);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;}
.fadein.start{transform: translate(0%,-3%);opacity: 1;}
.top_loader .logo {max-width: 300px;}

.menu ul li a {font-size: 20px;}

/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#cms_6-c .circle, #cms_6-c .arrow {display:none;}
#cms_6-c .cate_box {margin-bottom:50px;
                    border-radius:0px 0px 5px 5px ;}
#cms_6-c h3.box_title{border-bottom:dotted 2px var(--color2);}

ul.cate_list a {background: var(--color4);}
.page10 .content_wrap a {
    width: 27% !important;
}

div#cms_5-a .box_wrap {
    border-radius: 0;
}
/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.f_link {
    background: #fffcd7;
}


.header a:hover {
    color: var(--white);
    opacity: 0.7;
}
.cms_link_box a:hover {
    background: var(--color5);
    color: var(--white);
}


.fa-phone:before {
    content: "\f1d8" !important;
}



@media screen and (max-width: 1370px){
#catch::after {
    background-image: url(dup/img/item01.png),url(dup/img/item02.png);
    width: 102%;
    height: 118%;}
}

/*タブレット*/
@media screen and (max-width: 768px){
.topimg01 {height: 50vh;}
span.catch img {
    max-width: 42vw;
    position: absolute;
    bottom: 6%;
    right: inherit;
    left: 50%;
    transform: translate(-50%,0%);
    z-index: 1;
    filter: drop-shadow(0px 0px 6px rgb(66 135 98 / 50%));}
.fadein{transform: translate(-50%,0%);}
.fadein.start{transform: translate(-50%,-3%);opacity: 1;}
#catch::before{display:none;}
#catch::after {
    background-image: url(dup/img/item01.png),url(dup/img/item02.png);
    width: 102%;
    height: 106%;
    bottom: -4%;
    background-position: right -3% top 0%,left 1% bottom 0%;}
div#contents3_wrap {padding: 100px 0px;}
#contents .box .box_item .sub_title {top: -95px;}
#page_title {height: 180px;}
}


/*スマホ*/
@media screen and (max-width: 667px){
    
.top_loader .logo {max-width:200px;}    

p.more_txt1 {
    font-size: 16px;
    letter-spacing: 1px;}
#page_title {
    height: 140px;
}
.fadein{transform: translate(-50%,0%);}
.fadein.start{transform: translate(-50%,-1%);opacity: 1;}

.topimg01 {
    height: 45vh;
}

span.catch img {
    max-width: 55vw;
    position: absolute;
    bottom: -7%;
    left: 50%;
    z-index: 2;
    filter: drop-shadow(0px 0px 6px rgb(66 135 98 / 70%));}
    
#catch::after {
    background-image: url(dup/img/item01.png),url(dup/img/item02.png);
    width: 102%;
    height: 104%;
    bottom: -4%;
    background-position: right -8% top 0%,left 1% bottom 0%;
    background-size: 17%, 14%;
}


#contents3 .con_box {
    padding: 20px;
    margin: 0 4%;}
#contents3 .check li p {
    padding: 10px;
    padding-left: 35px;
    background-position: top 12px left 10px;
    background-size: 19px;
    font-size: 15px;}
    
#contents3 .con_box {
    padding: 20px 10px;
    margin: 0 5%;}
ul.check {margin-bottom: 15px;}

div#contents3_wrap .con_txt {
    font-size: 15px;
    padding: 0 5px;}
div#contents3_wrap h3 {
    font-size: 20px;
    letter-spacing: 1px;}
#contents .box .box_item .sub_title {top: -60px;}
#contents .box .box_item {padding: 40px 30px;}


section#catch {
    background-position: center;
}


.top_loader .loader_txt {
    font-size: 1rem;
    font-size: 1rem;
    letter-spacing: 1.5;
}
}



/*20230420*/
/* YouTube */

.yt {
    width: 100%;
    max-width: 1280px;
}
.video_cms{
	padding-bottom: 46.25%;
	height: 0;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 667px){
/* YouTube */
.yt{width: 100%;}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
/* YouTube */
.video_cms {padding-bottom: 56.25%;}

.yt {
    width: 90%;
}
}



/*20230922*/
.linkStyle{color:var(--white);}



/*20231002*/

span.catch img {
    max-width: 35vw;
    position: absolute;
    bottom: auto;
    top: 50%;
    left: 52%;
    transform: translate(-50%,-50%);
    z-index: 1;
}

.fadein.start {
    transform: translate(-50%,-53%);
    opacity: 1;
}



/*20231010*/
/* top loader */
.top_loader{
	z-index: 999;
	left: 0;
	top: 0;
}


.loader_bg {
    width: 100%;
    height: 100%;
    z-index: 9999;
    animation: loaderTxtDelay 0s ease 0.8s 1 forwards;
    pointer-events: none;
}
@-webkit-keyframes loaderTxtDelay {
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}


/*タブレット*/
@media screen and (max-width: 768px){
span.catch img {
    max-width: 62vw;
    left: 51%;
}

.top_loader .loader_txt {
    font-size: -webkit-calc(1rem + 17px);
    font-size: calc(1rem + 17px);
}
}


/*スマホ*/
@media screen and (max-width: 667px){
span.catch img {
    max-width: 66vw;
    left: 51%;
    top: 56%;
}

.top_loader .loader_txt {
    font-size: 20px;
}
    

.catch .fadein.start {
    transform: translate(-50%,-56%);
    opacity: 1;
}    
}


/*20231204 地図非表示*/    

div#map{
    display: none;
}


/*20240227*/
/*タブレット*/
@media screen and (max-width: 768px){
#contents3_wrap h3{
    font-size: 22px;
}
}


/*スマホ*/
@media screen and (max-width: 667px){
div#contents3_wrap h3 {
    font-size: 16px;
    letter-spacing: 1px;
}
}




/*20240419*/


@media screen and (max-width: 667px){
div#contents3_wrap h3 {
    font-size: 15px;
    letter-spacing: 0px;
}
}
