﻿/* all page */
/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');
:root{
	--color1: #719c8b;
	--colorb: #222;
	--color4: #d9d7cb;
	--font-jp: "Zen Maru Gothic", serif;
}
.maru, #top_cms .cms_title p, .other .box_title, #page_title .page_title_box .wrap p{font-family: var(--font-jp);}

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #160a0a;text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
#google_privacy a{color: #160a0a;}
body, .txt_color_nomal {color: #222;}

.txt_color1, .hvr_txt_color1:hover{color: var(--color1);}
/*.txt_color2, .hvr_txt_color2:hover{color: #e6e6e6}*/
/*.txt_color3, .hvr_txt_color3:hover{color: var(--color3);}*/
/*.txt_color4, .hvr_txt_color4:hover{color: #c9baa9}*/

/* background-color */
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1);}
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color1);}
/*.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3);}*/
/*.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4);}*/

/* border-color ※!important */
.border_color1, .hvr_border_color1:hover{border-color: var(--color1);}
/*.border_color2, .hvr_border_color2:hover{border-color: #e6e6e6}*/
/*.border_color3, .hvr_border_color3:hover{border-color: var(--color3);}*/
.border_color4, .hvr_border_color4:hover{border-color: var(--color4);}

#wrap {overflow: hidden;}

/* header */
.top_nav ul li, .top_nav ul li a{color: var(--colorb);}
.top_nav ul li a span{
    text-shadow: 0 0 0 rgba(255,255,255,1), 1px 1px 0 rgba(255,255,255,1);
    font-weight: bold;
}
.is-fixed {transition: all 0.3s;}
.logo {transition: all 0.3s;}

/* footer */



/* top ----------------------------------------------------------------*/

/* main img */
.main_img_wrap {position: relative;margin: 0 auto;}
/*.main_img{text-align: center;}*/
.main_img_wrap #video{
	-webkit-mask-image: url("../Dup/img/mask.png");
    mask-image: url("../Dup/img/mask.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top;
    mask-position: top;
    -webkit-mask-size: 90% 100%;
    mask-size: 90% 100%;
    margin: 0 auto;
    max-height: 100vh;
}
video {min-height: auto;}
.video_box img{
    width: auto;
    height: 100%;
}
.video_box .leaf_l{
    left: 0;
    bottom: 0;
    z-index: 1;
    height: 100%;
}
.video_box .leaf_r{
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 100%;
}
.video_box .tori {
    right: 0;
    top: 0;
    z-index: 1;
    height: 20%;
    max-height: 160px;
    animation:katakata2 1.5s steps(2,start) infinite;
}
.main_img_wrap .main_l {
    left: -1%;
    bottom: 0;
    z-index: 1;
    width: 30%;
    max-width: 210px;
}
.main_img_wrap .main_r {
    right: -1%;
    bottom: 0;
    z-index: 1;
    width: 30%;
    max-width: 200px;
}
.main_img_wrap .catch_01 {
    right: 1%;
    bottom: 1%;
    z-index: 1;
    width: 50%;
    max-width: 600px;
}

/* main */
.main_wrap {margin-top: 0;}

@keyframes katakata{
0%{transform:rotate(-13deg);}
50%{transform:rotate(0deg);}
100%{transform:rotate(-13deg);}
}
@keyframes katakata2{
0%{transform:rotate(13deg);}
50%{transform:rotate(0deg);}
100%{transform:rotate(13deg);}
}

/* intro */
.intro{
    background-image: url('./Dup/img/99.jpg');
    background-repeat: none;
    background-position: center;
    background-size: cover;
}
.intro .intro_title, .intro p{
    position: relative;
    z-index: 1;
}
.intro h3::before{
    content: "";
    background-color: var(--color1);
    height: 2px;
    width: 30px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}
#con_space {
    display: block;
    margin-bottom: -1px;
    /*background-color: var(--color1);*/
    width: calc(100% + 1px);
}
.cls-2 {
    fill: #f6f5ee;
    stroke-width: 0px;
}
.intro .intro_01 {
    left: 3%;
    top: 5%;
    width: 30%;
    max-width: 170px;
    animation:katakata 1.5s steps(2,start) infinite;
}
.intro .intro_02 {
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: 30%;
    max-width: 110px;
    animation:katakata2 1.5s steps(2,start) infinite;
}
.intro .intro_03 {
    left: 3%;
    bottom: 20%;
    width: 30%;
    max-width: 160px;
    animation:katakata 1.5s steps(2,start) infinite;
}
.intro .intro_04 {
    right: 1%;
    top: 15%;
    width: 30%;
    max-width: 200px;
    animation:katakata 1.5s steps(2,start) infinite;
}
.intro .intro_05 {
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
    width: 30%;
    max-width: 280px;
    animation:katakata2 1.5s steps(2,start) infinite;
}

/* contents */
.animate {
  opacity: 0;
  transition: all 1s;
}
.animate.show {
  opacity: 1;
  transition-delay: 0.5s;
}

#contents{
    z-index: 1;
    position: relative;
}
.dec {width: 75px;}
#dec1, #dec3, #dec5, #dec7 {
    margin-top: -30px;
    margin-bottom: -30px;
}
#dec2, #dec4, #dec6, #dec8 {
    margin-top: 0px;
    margin-bottom: 0px;
}
.img-container:before{background-color: var(--color1);}
.img-container.active:before {
    transform: translateX(101%);
}
#contents .box .txt_wrap {
    position: relative;
    z-index: 1;
}
#contents .con_01 {
    left: -1%;
    top: -5%;
    width: 25%;
    max-width: 350px;
}
#contents .con_02 {
    right: -3%;
    bottom: -35%;
    width: 22%;
    max-width: 300px;
    z-index: 2;
}
#contents .con_03 {
    left: -5%;
    bottom: -15%;
    width: 22%;
    max-width: 250px;
    z-index: 2;
}
#contents .con_04 {
    right: -5%;
    bottom: -25%;
    width: 20%;
    max-width: 280px;
    z-index: 2;
}
#contents .con_05 {
    left: -3%;
    bottom: -30%;
    width: 20%;
    max-width: 350px;
    z-index: 2;
}

/* topcms */
/*#top_cms:before{*/
/*    background-image: url('./Dup/img/border.png');*/
/*    background-position: top left;*/
/*    background-size: 20px;*/
/*}*/

.topcms_news_type2 .cate_box {
	width: 46.33333%!important;
	margin-right: 1.5%;
	margin-left: 1.5%;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
	margin-bottom: 30px;
	box-shadow: 0 6px 12px rgb(0 0 0 / 0);
	/* padding: 20px; */
	/* border-radius: 20px; */
	/* background-color: #f5f5f5; */
}
.topcms_news_type2 .cate_box:hover {
	transform: translateY(-5px);
}
.topcms_news_type2 .cate_box .box_item {
	cursor: pointer;
}
.topcms_news_type2 .txt_height {
	height: 5em
}
.topcms_news_type2 .box_img1 {
	border-radius: 10px;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.topcms_news_type2 .cate_box {width: 100%!important;}
.topcms_news_type2 .txt_height {height: 3em}
}

/* under page ----------------------------------------------------------------*/
#page_title:after {
    background-image: url('./Dup/img/con_02.png');
    background-position: bottom 0px right -1%;
    background-size: 250px;
    background-repeat: no-repeat;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -35%;
    right: 0;
    z-index: 1;
}
.cate_list li {width: auto;}
/* cms4 */
.cms_5-e .box_item h3, #cms_5-e .box_item h3{color: #fff;}


/* ---------- 1536px ---------- */
@media screen and (max-width: 1536px){
.intro .intro_01 {
    top: 3%;
    width: 8%;
}
.intro .intro_02 {
    left: 5%;
    width: 5%;
}
.intro .intro_03 {
    bottom: 15%;
    width: 8%;
}
.intro .intro_04 {
    top: 22%;
    width: 11%;
}
.intro .intro_05 {
    right: 2%;
    top: 47%;
    width: 15%;
}

}
/* ---------- 1366px ---------- */
@media screen and (max-width: 1366px){
#contents .con_01 {
    top: -6%;
    width: 23%;
}

}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.main_img_wrap .catch_01 {width: 45%;}
header .logo, header #nav_menu {
    background-color: rgba(255,255,255,0.8);
    border-radius: 5px;
}
.intro .intro_01 {
    top: 3%;
    width: 13%;
}
.intro .intro_02 {
    left: 0%;
    top: 45%;
    width: 9%;
}
.intro .intro_03 {
    left: auto;
    right: -1%;
    bottom: 3%;
    width: 11%;
}
.intro .intro_04 {
    right: 1%;
    top: 3%;
    width: 15%;
}
.intro .intro_05 {
    right: 0%;
    top: 50%;
    width: 17%;
}
#contents .con_01 {
    top: -4%;
    width: 28%;
}
#contents .con_02 {bottom: -10%;}
#contents .con_03 {bottom: -3%;}
#contents .con_04 {
    right: -3%;
    bottom: -10%;
}
#contents .con_05 {
    bottom: -35%;
    width: 30%;
}
#page_title:after {
    background-size: 130px;
    bottom: -25%;
}
.all_header {
    pointer-events: auto;
    background-color: #fff;
}
#wrap, .all_header #header {background-color: #fff;}

}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.main_img_wrap .main_l {width: 20%;}
.main_img_wrap .main_r {width: 20%;}
.intro h3::before {bottom: -20px;}
.intro .intro_01 {
    top: 1%;
    width: 16%;
}
.intro .intro_02 {
    left: 1%;
    top: 49%;
    width: 13%;
}
.intro .intro_03 {
    right: 1%;
    bottom: 0%;
    width: 17%;
}
.intro .intro_04 {width: 17%;}
.intro .intro_05 {
    right: 0%;
    top: 43%;
    width: 30%;
}
#contents .con_01 {
    top: -2%;
    width: 35%;
}
#contents .con_02 {
    bottom: -6%;
    width: 30%;
}
#contents .con_03 {
    bottom: -16%;
    width: 28%;
}
#contents .con_04 {
    right: -3%;
    bottom: -2%;
    width: 28%;
}
#contents .con_05 {
    bottom: -10%;
    width: 42%;
}
#dec1, #dec3, #dec5, #dec7 {
    margin-top: 0;
    margin-bottom: -20px;
}
.dec {width: 60px;}
.other .box_title {
    font-family: var(--font-jp);
    letter-spacing: 1px;
    font-size: calc(1rem + 10px);
}
#page_title:after {background-size: 90px;}
#page_title .img-container::after {background-color: rgba(113,156,139,0.4);}
#footer {position: relative;}

}

/*20240308修正*/
.main_img_wrap .catch_01 {
    bottom: 5%;
    max-width: 780px;
}
.video_box .leaf_l {left: -20px;}
.intro {
    background-image: none;
    background-color: #bbe2f1;
}
.intro .intro_02 {max-width: 60px;}
.intro .intro_05 {max-width: 150px;}
#contents .con_01 {
    width: 20%;
    max-width: 210px;
}
#contents .con_05 {
    bottom: -40%;
    width: 16%;
    max-width: 250px;
}
footer {background-color: #e8dabe;}
footer p{color: #111!important;}
#footer .logo {
    z-index: 5;
    position: relative;
}
footer svg {
    opacity: 0.3;
    z-index: -5;
}
#title_img, #title_img span {height: 400px;}
#page_title:after {
    background-image: url('./Dup/img/con_02_1.png');
    top: 65%;
    transform: scale(1, -1);
    pointer-events: none;
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.main_img_wrap .catch_01 {width: 60%;}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.main_img_wrap .catch_01 {
    width: 65%;
    right: -2%;
}
.video_box .leaf_l {left: -10px;}
.intro .intro_03 {width: 23%;}
.intro .intro_05 {
    top: 48%;
    width: 25%;
}
#contents .con_01 {width: 23%;}
#contents .con_05 {
    bottom: -13%;
    width: 27%;
}
#title_img, #title_img span {height: 200px;}

}

/*20240322修正*/
.intro .intro_01 {max-width: 110px;}
.intro .intro_04 {max-width: 80px;}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.intro .intro_01 {max-width: 60px;}
.intro .intro_04 {max-width: 50px;}
.intro .intro_03 {z-index: 3;}
}

