@charset "UTF-8";


/*-- BASE -------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	section .in { width: 88%; margin: 0 auto; padding: 6%;}
	.ttl01 { text-align: center; font-size: 1.6em; font-weight: 700; }
	.ttl01 .xxsmall { font-size: 0.6em; }
	.decoTtl { text-align: center; color: var(--point-color); margin-bottom: 3vh; font-size: 0.8em; }
	.decoMark { text-align: center; width: 30px; margin: 0 auto; }
	#anch06 .decoMark { text-align: center; width: 80px; margin: 0 auto; }
	#anch07 { padding: 5vh 0; }
	
	.tllFlex { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 40px; }
	.tllFlex .decoTtl02 { margin-bottom: 0; margin-left: 2em; color: var(--point-color); }
	.fa-solid { color: #FFC107; }
	
	.ttl02 { font-size: 1.4em; font-weight: 700; }
	.decoTtl02 { color: var(--base-color); margin-bottom: 5vh; font-size: 0.8em; }
	.ttl03 { font-size: 1.1em; font-weight: 700; margin-bottom: 5vh; }
	
	.fa-solid { color: #FFC107; }
	.iconBk .fa-solid { color: var(--sub-color); font-size: 2.0rem; }
	.iconRed .fa-solid { color: var(--point-color); font-size: 1.8rem; }
	.iconRed .fa-brands { color: var(--point-color); font-size: 1.8rem; }
}
@media screen and (min-width: 600px) {
	section { padding: 5vh; }
	section .in { max-width: 1400px; width: 96%; margin: 0 auto; padding: 0 2%;}
	.ttl01 { text-align: center; font-size: 2.0em; font-weight: 700; }
	.ttl01 .xxsmall { font-size: 0.6em; }
	.decoTtl { text-align: center; color: var(--point-color); margin-bottom: 5vh; }
	.decoMark { text-align: center; width: 50px; margin: 0 auto; }
	
	.tllFlex { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 40px; }
	.tllFlex .decoTtl02 { margin-bottom: 0; margin-left: 2em; color: var(--point-color); }
	.fa-solid { color: #FFC107; }
	
	.ttl02 { font-size: 1.8em; font-weight: 700; }
	.decoTtl02 { color: var(--base-color); margin-bottom: 5vh; }
	.ttl03 { font-size: 1.5em; font-weight: 700; margin-bottom: 5vh; }
	
	.iconBk .fa-solid { color: var(--sub-color); font-size: 2.0rem; }
	.iconRed .fa-solid { color: var(--point-color); font-size: 1.8rem; }
	.iconRed .fa-brands { color: var(--point-color); font-size: 1.8rem; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	section { padding: 3vh; }
	#anch06 .decoMark { text-align: center; width: 120px; margin: 0 auto; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
}
@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) {
}

/*-- list  -------------------------------------------------------------*/
@media screen and (max-width: 899px) {
	.s-ttl01 { font-size: 1.2rem; font-weight: 700; }
	.s-enTtl { font-size: 3.0rem; line-height: 1.0; margin-bottom: 20px; }
	.s-enTtl span { color: var(--base-color); }
	.s-subTtl { font-size: 1.0rem; font-weight: 700; margin-bottom: 10px; }
	
	.mark { width: 30px; margin: 0 auto; }
}
@media screen and (min-width: 768px) and (max-width: 899px) {
	.s-ttl01 { font-size: 1.7rem; }
	.s-enTtl { font-size: 4.5rem; }
	.s-subTtl { font-size: 1.2rem; }
	
	.mark { width: 40px; margin: 0 auto; }
}
@media screen and (min-width: 900px) {
	section { position: relative; }
	section .in { margin: 0 auto; padding: 5vh 0; }
	
	.s-ttl01 { font-size: 1.8rem; font-weight: 700; }
	.s-enTtl { font-size: 6.0rem; line-height: 1.0; margin-bottom: 20px; }
	.s-enTtl span { color: var(--base-color); }
	.s-subTtl { font-size: 1.5rem; font-weight: 700; margin-bottom: 10px; }
	
	.mark { width: 50px; margin: 0 auto; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	.s-ttl01 { font-size: 1.75rem; }
	.s-enTtl { font-size: 4.75rem; }
	.s-subTtl { font-size: 1.25rem; }
	
	.mark { width: 45px; margin: 0 auto; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.s-ttl01 { font-size: 1.8rem; }
	.s-enTtl { font-size: 5.0rem; }
	.s-subTtl { font-size: 1.3rem; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.s-ttl01 { font-size: 1.85rem; }
	.s-enTtl { font-size: 5.25rem; }
	.s-subTtl { font-size: 1.35rem; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	.s-ttl01 { font-size: 1.9rem; }
	.s-enTtl { font-size: 5.5rem; }
	.s-subTtl { font-size: 1.4rem; }
}
@media screen and (min-width: 1390px) and (max-width: 1489px) {
	.s-ttl01 { font-size: 1.95rem; }
	.s-enTtl { font-size: 5.75rem; }
	.s-subTtl { font-size: 1.45rem; }
}

@media screen and (min-width: 2000px) {
	#anch01 .in-in { margin-left: 60%;  }
}

/*-- tech  -------------------------------------------------------------*/
@media screen and (max-width: 899px) {	
	#content section#anch02 { border-top: 1px solid #fef0ff; border-bottom:1px solid #fef0ff; background: var(--point-color); padding: 0; }
	#content section#anch02 .s-enTtl { margin-bottom: 0px; color: #fff; }
	#content section#anch02 .s-subTtl { color: #fff; margin-bottom: 20px; }
	#content section#anch02 p { color: #fff; }

	.anch01Img { position: relative; margin-bottom: 60px !important; }
	.anch01Img .secImg01 { width: 50%; margin: 0 25%; position: absolute; top: 10vh; z-index: 2;}
	
	.serviceImg { width: 80%; margin: 0 auto 20px !important; }
}
@media screen and (min-width: 768px) and (max-width: 899px) {
	#anch02 .in { padding: 5vh 4%; width: 92% }
	.anch01Img .secImg01 { width: 40%; margin: 0 30%; position: absolute; top: 20vh; z-index: 2;}
}
@media screen and (min-width: 900px) {
	#content section#anch02 { border-top: 1px solid #fef0ff; border-bottom:1px solid #fef0ff; background: var(--point-color); padding: 0; }
	#content section#anch02 .s-enTtl { margin-bottom: 0px; color: #fff; }
	#content section#anch02 .s-subTtl { color: #fff; }
	#content section#anch02 p { color: #fff; }
	
	#anch02 { background: var(--point-color); }
	#anch02 .in { padding: 0; }
	#anch02 .in-in { width: 50%; margin-right: 50%; padding: 10vh 0; }
	#anch02 .secImg01 { position: absolute; top: 50%; right: 20%; transform: translateY(-50%); z-index: 2; width: 20vw; }
	#anch02 .secImg02 { position: absolute; top: 50%; right: 2%; transform: translateY(-50%); z-index: 1; width: 25vw; }
}
@media screen and (min-width: 768px) and (max-width: 1189px) {
}

/*-- list  -------------------------------------------------------------*/
@media screen and (max-width: 767px) {	
	.lineupList { width: 90%; margin: 0 auto; }
	.lineupList li { margin-bottom: 20px; }
	.lineupList li div { margin-bottom: 0px;}
	.lineupTtl { text-align: left; font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; color: #fff; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.75); }
	.lineupTtl span { display: block; font-size: 0.6em; opacity: 0.75; }
	.lineupList li p { color: #fff; font-size: 0.9rem; margin-bottom: 0; }
	
	.lineupList li:hover .lineupTtl { color: var(--base-color); border-bottom: 1px solid var(--base-color); }
	.lineupList li:hover .lineupTtl span { color: var(--base-color); opacity: 0.75; }
	.lineupList li:hover p { color: var(--base-color); }	
}
@media screen and (min-width: 768px) {
	.lineupList { display: flex; justify-content: center; flex-wrap: wrap; }
	.lineupList li { width: 31%; margin: 0 1% 40px;  }
	.lineupList li div { margin-bottom: 10px;}
	.lineupTtl { text-align: left; font-size: 1.5rem; font-weight: 600; margin-bottom: 10px; color: #fff; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.75); }
	.lineupTtl span { display: block; font-size: 0.6em; opacity: 0.75; }
	.lineupList li p { color: #fff; margin-bottom: 0; }	
	
	.lineupList li:hover .lineupTtl { color: var(--base-color); border-bottom: 1px solid var(--base-color); }
	.lineupList li:hover .lineupTtl span { color: var(--base-color); opacity: 0.75; }
	.lineupList li:hover p { color: var(--base-color); }	
}
@media screen and (min-width: 768px) and (max-width: 899px) {
	.lineupTtl { font-size: 1.3rem; }
	.lineupList li p { font-size: 0.8rem; }
	
	.lineupList li { width: 48%; margin: 0 1% 40px;  }
	.lineupList li:nth-child(3) { width: 48%; margin: 0 26% 40px;  }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	.lineupTtl { font-size: 1.35rem; }
	.lineupList li p { font-size: 0.85rem; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.lineupTtl { font-size: 1.4rem; }
	.lineupList li p { font-size: 0.9rem; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.lineupTtl { font-size: 1.45rem; }
	.lineupList li p { font-size: 0.95rem; }
}

/*-- card  -------------------------------------------------------------*/
@media screen and (max-width: 767px) {	
	#anch03 { padding: 6%; }
	#anch03 .in { padding: 2%; width: 92%; }
	.cardTtl { color: var(--base-color); font-size: 1.3rem; font-weight: 700; margin-bottom: 20px; }	
	.cardTxt { font-size: 0.9rem; }	
	.yen { font-size: 0.9rem; }
	.yen .oswald { font-size: 1.5em; font-weight: 700; margin-right: 0.1em; }	
}
@media screen and (min-width: 768px) {
	.cardTtl { color: var(--base-color); font-size: 1.3rem; font-weight: 700; margin-bottom: 20px; }	
	.cardTxt { font-size: 0.9rem; }	
	.yen { font-size: 0.9rem; }
	.yen .oswald { font-size: 1.5em; font-weight: 700; margin-right: 0.1em; }
}
@media screen and (min-width: 768px) and (max-width: 899px) {
	#anch03 { padding: 6%; }
}
/*-- 動画 -------------------------------------------------------------*/
#anch04 { background: #f4f4f4; }
@media screen and (max-width: 599px) {
	#anch04 { padding: 6%; }
	.youtubeList li { margin: 0 1% 20px;}
}
@media screen and (min-width: 600px) {
	.youtubeList { display: flex; justify-content: center; }
	.youtubeList li { margin: 0 1%; width: 48%; }
}
@media screen and (min-width: 768px) and (max-width: 899px) {
	#anch04 { padding: 6%; }
}

/*-- MV News -------------------------------------------------------------*/
	.mvNews { position: absolute; right: 0; bottom: 0; z-index: 10; }
	.mvNews-flex { display: flex; justify-content: flex-end; align-items: center; }
	.mvNewsTtl { width: 120px; height: 120px; background: var(--base-color); color: #fff; font-family: "Oswald", sans-serif; display: flex; justify-content: center; flex-direction: column; margin-bottom: 0; font-size: 1.2rem; text-align: center; border: 1px solid var(--base-color); }
	
	.mvNews-flex ul { background:#fff; padding: 0px 30px; display: flex; flex-direction: column; justify-content: center; align-items: baseline; border-left: 1px solid #fff; height: 120px; border: 1px solid var(--base-color); }
	.mvNews-flex ul li { display: flex; justify-content: flex-start; margin-bottom: 10px; }
	.mvNews-flex ul li:last-child { margin-bottom: 0px; }
	.mvNews-flex ul li dl { display: flex; justify-content: flex-start; align-items: center; margin-right: 10px; }
	.mvNews-flex ul li dl dt { color: var(--base-color); font-family: "Oswald", sans-serif; margin-right: 10px; font-size: 0.6em; }
	.mvNews-flex ul li dl dd { color: #fff; background: var(--base-color);; padding: 0px 10px; font-size: 0.6em; font-family: "Oswald", sans-serif; }
	.mvNews-flex ul li p { margin-bottom: 0px; font-size: 0.8rem; color: var(--base-color);; }
	
	.mvNewsBtn { width: 120px; height: 120px; background: #333; color: #000; font-family: "Oswald", sans-serif; display: flex; justify-content: center; flex-direction: column; margin-bottom: 0; font-size: 1.0rem; text-align: center; border: 1px solid #333; border-left: none; transition: .3s; }
	.mvNews-flex .mvNewsBtn p { font-size: 0.7rem; margin-top: 10px; margin-bottom: 0; color: #fff; }
	.mvNews-flex .mvNewsBtn .fa-list { color: #fff; }
	.mvNews-flex .mvNewsBtn.g_box p.g_link { height: 0px; }
	.mvNews-flex .mvNewsBtn.g_box:hover { cursor:pointer; opacity:0.7;}
	.mvNews-flex .mvNewsBtn.g_box:hover p { color: #fff; }
	.mvNews-flex .mvNewsBtn.g_box:hover .fa-list { color: #fff; }

@media screen and (max-width: 767px) {
	.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; padding: 0vh 6%; } 
	.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: 768px) {
	.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; padding: 10vh 6%; } 
	.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);}
}


/*-- ロゴマーク　パララックス -------------------------------------------------------------*/
#wrapper { position: relative; overflow: hidden;}
.logomark { position: absolute; z-index: -1; opacity: 0;　pointer-events: none; will-change: transform; }
.logomark img { width: 25vw; height: auto; display: block; animation: spinAndScaleLogo 50s linear infinite;}
.add-show.logomark { opacity: 0.25 !important; }
/* 配置（好みに応じて調整できます） */
.logomark01 { top: 100px; right: -5vw; }
.logomark02 { top: 800px; left: -5vw; }
.logomark03 { top: 1500px; right: -5vw; }
.logomark04 { top: 2200px; left: -5vw; }
.logomark05 { top: 2900px; right: -5vw; }

@keyframes spinAndScaleLogo {
  0% {
    /* スタート時：元の角度、元のサイズ（1倍） */
    transform: rotate(25deg) scale(1); 
  }
  50% {
    /* 中間（10秒経過時）：半回転しつつ、1.2倍に大きくなる */
    transform: rotate(205deg) scale(0.8); 
  }
  100% {
    /* ゴール時：1周回って、元のサイズに戻る */
    transform: rotate(385deg) scale(1); 
  }
}