@charset "UTF-8";

#wrapper { overflow-x: hidden; }
header.is-fix { background-image: none; }
@media screen and (max-width: 899px) {
	section { position: relative; }
	section .in { margin: 0 0%; padding: 5vh 0; }
		
	.ttl01 { font-size: 1.5em; font-weight: 700; line-height: 1.0; margin-bottom: 10px; }
	.enTtl { font-size: 4.0em; font-weight: 700; line-height: 1.0; margin-bottom: 40px; }
	.secContainer { margin-left: 0em; }
	.subTtl { font-size: 1.2em; font-weight: 700; line-height: 1.0; margin-bottom: 20px; color: var(--sub-color); }

	.in-flex-Ttl { position: relative; }
	.in-flex-Ttl .enTtl {  position: absolute; top: -30px; left: -6%; z-index: -1; color: #f6f6f6; }
	.in-flex-Ttl .subTtl { font-size: 2.0em; font-weight: 700; line-height: 1.2; margin-bottom: 20px; letter-spacing: 0.075em; color: var(--base-color); }
	.in-flex-Ttl .subTtl02 { font-size: 1.2em; font-weight: 700; line-height: 1.7; margin-bottom: 0px; letter-spacing: 0.075em; }
	.in-flex-Ttl .subTtl em { font-style: normal; color: var(--base-color); }
	.in-flex-Ttl .subTtl02 em { font-style: normal; color: var(--base-color); }
	
	.secContainer p { margin-bottom: 20px;}
	
	.in-flex { display: flex; justify-content: space-between; flex-direction: column; width: 100%; padding: 0 !important; }
	.in-flex .in-flex-Txt { padding: 12% 6% 6%; order: 2;}
	.text-content { margin-bottom: 40px; }
	#anch01 { position: relative; }
	#anch01 .in-flex-Img { background: url("../img/common/top01.webp") center center no-repeat; background-size: cover; height: 250px; width: 100%; order: 1; }
	#anch01 .cycle01 { position: absolute; top: -5vh; right: -5vw; width: 25vw; z-index: 1; animation: rotateAnimation 30s linear infinite; }
	
	#anch02 { position: relative; }
	#anch02 .in-flex-Img { background: url("../img/common/top02.webp") center center no-repeat; background-size: cover; height: 250px; width: 100%; order: 1;  }
	#anch02 .cycle02 { display: none; }
	
	#anch03 { position: relative; }
	#anch03 .in-flex-Img { background: url("../img/common/top03.webp") center center no-repeat; background-size: cover; height: 250px; width: 100%; order: 1; }
	#anch03 .cycle03 { display: none; }
	
	#anch04 { position: relative; }
	#anch04 .in-flex-Img { background: url("../img/common/top04.webp") center center no-repeat; background-size: cover; height: 250px; width: 100%; order: 1;  }
	#anch04.cycle04 { display: none; }
	
	.in-flex-L { margin-bottom: 0px;}
	.newsSec { margin: 0 6%; }
	.newsList li { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dotted #dedede;}
	.newsCate { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px; }
	.newsCate dt { font-family: "Oswald", sans-serif; font-weight: 700; padding: 5px 10px; line-height: 1.0; font-size: 0.9em; }
	.newsCate dd { font-family: "Oswald", sans-serif; font-weight: 700; padding: 5px 10px; background: var(--base-color); color: #fff; line-height: 1.0; font-size: 0.9em; }
	.newsList li p { margin-bottom: 0px;}
	.newsSec .enTtl { margin-bottom: 0px; }
	.newsSec .ttl01 { margin-bottom: 20px; }
	
	.newsContact { background: #fff; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; padding: 0vh 6%; margin-top: 5vh; } 
	.halfFlex { }
	.in-half { border-bottom: 1px solid #dedede; padding: 5vh 0%; }
	.in-half:nth-child(2) { border-bottom: none; }
	.in-half .subTtl02 { font-size: 1.8em; font-weight: 700; line-height: 1.7; margin-bottom: 20px; letter-spacing: 0.075em; text-align: center; }
	.in-half .tel { font-size: 2.0rem; line-height: 1.0; margin-bottom: 10px; }
	.in-half .tel .fa-phone { transform: rotate(90deg);}
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	#anch01 .in-flex-Img { height: 450px; }
	#anch02 .in-flex-Img { height: 450px; }
	#anch03 .in-flex-Img { height: 450px; }
	#anch04 .in-flex-Img { height: 450px; }
}
@media screen and (min-width: 900px) {
	#content { padding-top: 10vh; }
	section { position: relative; }
	section .in { margin: 0; padding: 5vh 0; }
	
	.in-flex { display: flex; justify-content: space-between; width: 100%; }
	.in-flex-Txt { padding: 10vh 4%; width: 52%;}
	.in-flex-Img { width: 40%; }
		
	.ttl01 { font-size: 2.0em; font-weight: 700; line-height: 1.0; margin-bottom: 10px; }
	.enTtl { font-size: 6.0em; font-weight: 700; line-height: 1.0; margin-bottom: 0px; }
	.subTtl { font-size: 1.5em; font-weight: 700; line-height: 1.0; margin-bottom: 20px; }
	.text-content { margin-bottom: 40px;}
	
	.in-flex-Ttl { margin-bottom: 20px; position: relative; }
	.in-flex-Ttl .enTtl {  position: absolute; top: -50px; left: -2%; z-index: -1; color: #f6f6f6; }
	.in-flex-Ttl .subTtl { font-size: 2.7em; font-weight: 700; line-height: 1.2; margin-bottom: 0px; letter-spacing: 0.075em; color: var(--base-color); }
	.in-flex-Ttl .subTtl02 { font-size: 1.5em; font-weight: 700; line-height: 1.7; margin-bottom: 0px; letter-spacing: 0.075em; }
	.in-flex-Ttl .subTtl em { font-style: normal; color: var(--base-color); }
	.in-flex-Ttl .subTtl02 em { font-style: normal; color: var(--base-color); }
	
	.halfFlex .enTtl {  position: absolute; top: -50px; left: 50%; transform: translateX(-50%); z-index: 0; color: #f6f6f6; font-size: 4.0em; }
	
	#anch01 { position: relative; /*background: url("../img/common/kika_01.png") left top no-repeat; background-size: 10vw;*/}
	#anch01 .in-flex-Img { background: url("../img/common/top01.webp") center center no-repeat; background-size: cover; border-radius: 10px 0 0 10px;  }
	#anch01 .cycle01 { position: absolute; top: -5vh; right: -5vw; width: 25vw; z-index: 1; animation: rotateAnimation 30s linear infinite; }
	
	#anch02 { position: relative; /*background: url("../img/common/kika_02.png") right top no-repeat; background-size: 10vw;*/ }
	#anch02 .in-flex-Img { background: url("../img/common/top02.webp") center center no-repeat; background-size: cover; border-radius: 0 10px 10px 0;  }
	#anch02 .cycle02 { position: absolute; top: -5vh; left: -5vw; width: 25vw; z-index: 1; animation: rotateAnimation 30s linear infinite; }
	
	#anch03 { position: relative; /*background: url("../img/common/kika_01.png") left top no-repeat; background-size: 10vw;*/ }
	#anch03 .in-flex-Txt { padding-top: 15vh; padding-bottom: 15vh; }
	#anch03 .in-flex-Img { background: url("../img/common/top03.webp") left center no-repeat; background-size: cover; }
	#anch03 .cycle03 { position: absolute; top: -5vh; right: -5vw; width: 25vw; z-index: 1; animation: rotateAnimation 30s linear infinite; }
	
	#anch04 { position: relative; /*background: url("../img/common/kika_02.png") right top no-repeat; background-size: 10vw;*/ }
	#anch04 .in-flex-Img { background: url("../img/common/top04.webp") center center no-repeat; background-size: cover; border-radius: 0 10px 10px 0;  }
	#anch04.cycle04 { position: absolute; top: -5vh; left: -5vw; width: 25vw; z-index: 1; animation: rotateAnimation 30s linear infinite; }
	
	.newsSec { position: relative; background:url("../img/common/bgNews.jpg") bottom center no-repeat; }
	.newsSec .ovry { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to right, #00bba9, #4d9e79, #047642); opacity: 0.95;  }
	.newsSec .in { max-width: 1200px; width: 92%; margin: 0 auto; position: relative; z-index: 2;}
	.newsSec .in-flex-L { width: 30%; font-size: 0.8em; border-right: 1px solid #fff; padding: 0 4% 0 0; display: flex; justify-content: center; flex-direction: column; align-items: center; }
	.newsSec .in-flex-L .ttl01 { color: #fff; text-align: center; font-size: 1.2em; margin-bottom: 20px;}
	.newsSec .in-flex-L .enTtl { color: #fff; font-size: 5.0em; text-align: center; }
	.newsSec .in-flex-R { width: 70%; padding: 0 0 0 4%; }
	
	.newsList li { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dotted #dedede; }
	.newsCate { display: flex; justify-content: flex-start; align-items: center; margin-right: 10px; }
	.newsCate dt { font-family: "Oswald", sans-serif; font-weight: 700; padding: 5px 10px; line-height: 1.0; font-size: 0.9em; color: ar(--base-color); }
	.newsCate dd { font-family: "Oswald", sans-serif; font-weight: 700; padding: 2px 10px; background:var(--base-color); color:#fff; line-height: 1.0; font-size: 0.8em; }
	.newsList li p { margin-bottom: 0px;}
	
	.newsList li a         { resize: none; }
	.newsList li a:link    { color:#000; text-decoration: none; }
	.newsList li a:visited { color:#000; text-decoration: none; }
	.newsList li a:hover   { color:#000; text-decoration: underline; }
	.newsList li a:active  { color:#000; text-decoration: none; }
	
	.newsContact { background: #fff; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; padding: 10vh 6%; margin-top: 5vh; } 
	.halfFlex { display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; }
	.in-half { width: 50%; border-right: 1px solid #dedede; padding: 0 4%; }
	.in-half:nth-child(2) { border-right: none; }
	.in-half .subTtl02 { font-size: 1.8em; font-weight: 700; line-height: 1.7; margin-bottom: 20px; letter-spacing: 0.075em; text-align: center; }
	.in-half .tel { font-size: 2.0rem; line-height: 1.0; margin-bottom: 10px; }
	.in-half .tel .fa-phone { transform: rotate(90deg);}
}
/*@media screen and (min-width: 768px) and (max-width: 899px) {
	#content { padding-top: 5vh; }
	section .in {padding: 0vh 0; }
	.ttl01 { font-size: 1.5em; }
	.enTtl { font-size: 4.0em; }

	.newsContact { padding: 5vh 2%; }
}*/
@media screen and (min-width: 900px) and (max-width: 1089px) {
	.ttl01 { font-size: 1.8em; }
	.enTtl { font-size: 5.0em; }
	
	.newsContact { padding: 5vh 4%; }
	#anch03 .in-flex-Txt { padding-top: 10vh; padding-bottom: 10vh; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	#anch03 .in-flex-Txt { padding-top: 10vh; padding-bottom: 10vh; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	#anch03 .in-flex-Txt { padding-top: 12.5vh; padding-bottom: 12.5vh; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
}
@media screen and (min-width: 1390px) and (max-width: 1489px) {
}
@media screen and (min-width: 1490px) {
}

@keyframes AnimationTitle {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/*-- 背景固定　パララックス -------------------------------------------------------------*/
@media screen and (max-width: 599px){
	.parallax_content { height: 300px; overflow: hidden; position: relative; padding: 0 !important; }	
	.parallax_bg { background-image: url("../img/common/bgsp.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: translateY(0); will-change: transform; }
}
@media screen and (min-width: 600px) and (max-width: 1089px) {
	.parallax_content { height: 250px; overflow: hidden; position: relative; }	
	.parallax_content::before { content:""; display: flex; height: 100%; padding: 100%; justify-content: center; align-items: center; background-image: url("../img/common/bg.jpg") ; background-attachment: fixed; background-position: center; background-size: cover; background-repeat: no-repeat; }
}
@media screen and (min-width: 1090px) {
	.parallax_content { height: 300px; overflow: hidden; position: relative; }	
	.parallax_content::before { content:""; display: flex; height: 100%; padding: 100%; justify-content: center; align-items: center; background-image: url("../img/common/bg.jpg") ; background-attachment: fixed; background-position: center; background-size: cover; background-repeat: no-repeat; }
}

/*-- ロゴマーク　パララックス -------------------------------------------------------------*/
#wrapper { position: relative; overflow: hidden;}
.logomark { position: absolute; z-index: -1; width: 100vw; opacity: 0.25;　pointer-events: none; will-change: transform; }
.logomark img { width: 100%; height: auto; display: block; }

/* 配置（好みに応じて調整できます） */
.logomark01 { top: 1200px; left: -10vw; }
.logomark01 img { transform: rotate(25deg)}
.logomark02 { top: 1600px; right: -10vw; }
.logomark02 img { transform: rotate(-25deg)}
.logomark03 { top: 2000px; left: -10vw; }
.logomark03 img { transform: rotate(25deg)}





