@charset "UTF-8";
/* CSS Document */
#anch03 { background: #fff; }
@media screen and (max-width: 899px) {
	#anch01 { padding: 5vh;}
	#anch-service .in-flex { margin: 0 4%; display: flex; flex-direction: column; }
	#anch-service .in-flex-L { background: var(--sub-color); padding: 3vh 4%; position: relative; order: 1; margin-bottom: 3vh; }
	#anch-service .in-flex-R { background: var(--base-color); padding: 3vh 4%; position: relative; order: 2; }
	
	.in-flex .mv-ttl01 { color: #fff; font-size: 2.2rem; margin-bottom: 10px; }
	.in-flex .mv-ttl06 { color: #fff; font-family:'Roboto Condensed', sans-serif; font-weight:bold; font-size: 5.0em; margin-bottom: 10px; opacity: 0.1; line-height: 1.0; }
	.in-flex .mv-ttl02 { color: #fff; margin-bottom: 10px; font-size: 1.1em; font-weight: bold; }
	.in-flex .mv-ttl06 { position: absolute; top: 0; left: 0; }
	/*.in-flex-L .mv-ttl06 { position: absolute; top: 0; left: 0; }
	.in-flex-R .mv-ttl06 { position: absolute; top: 0; right: 0; }
	.in-flex-R .mv-ttl01 { text-align: right; }
	.in-flex-R .mv-ttl02 { text-align: right; }*/
	
	.serviceTtl { display: flex; justify-content: space-between; align-items: center; }
	.serviceTtl-L { width: 60%; }
	.serviceTtl-R { width: 36%; }
	.border-solid { margin-bottom: 20px; border-bottom: 1px solid #fff; margin-top: 20px; }
	
	#anch-service { margin-bottom: 3vh;}
	#anch-service .in-flex p { color: #fff; }
	.numList { display: flex; justify-content: flex-start; margin-bottom: 20px; }
	.numList li { width: 31%; margin-right: 3.5%; }
	.numList li .icon { width: 30%; margin: 0 auto 10px; }
	.numList li:last-child { margin-right: 0px; }
	.numList li h4 { text-align: center; margin-bottom: 10px; background: #144425; padding: 5px 0; font-size: 0.9rem; color: #fff; }
	.numList li h5 { text-align: center; font-size: 3.6rem; line-height: 1.0; color: #fff; }
	.numList li h5 .xsmall { font-size: 0.5em; margin-left: 0.25em; }
	
	.nice-icon { width: 30%; margin: 0 auto 10px; }
	
	#anch-service .in-flex-L h4 {background: #135181; }
	
	#anch-service .in-flex-L .box_link_btn a { color:var(--opa-color); border:#fff 1px solid; margin: 0 0; }
	#anch-service .in-flex-L .box_link_btn a:link    { color:#fff; }
	#anch-service .in-flex-L .box_link_btn a:visited { color:#fff; }
	#anch-service .in-flex-L .box_link_btn a:hover   { color:var(--base-color); background:#fff; }
	#anch-service .in-flex-L .box_link_btn a:active  { color:#fff; }
	#anch-service .in-flex-L .box_link_btn a:after { background: #fff; }
	#anch-service .in-flex-L .box_link_btn a:hover:after { background: var(--base-color); }
	#anch-service .in-flex-L .box_link_btn a::before { background-color: #fff; }
	#anch-service .box_link_list { justify-content: center; }
	
	#anch-service .box_link_btn a { color:var(--opa-color); border:#fff 1px solid; margin: 0 auto; }
	#anch-service .box_link_btn a:link    { color:#fff; }
	#anch-service .box_link_btn a:visited { color:#fff; }
	#anch-service .box_link_btn a:hover   { color:var(--base-color); background:#fff; }
	#anch-service .box_link_btn a:active  { color:#fff; }
	#anch-service .box_link_btn a:after { background: #fff; }
	#anch-service .box_link_btn a:hover:after { background: var(--base-color); }
	#anch-service .box_link_btn a::before { background-color: #fff; }
	
	
	.in-flex02 { max-width: 1400px; margin: 0 auto; width: 100%; }
	
	.in-flex02 .in-flex-L { position: relative; height: 200px; width: 40%; overflow: hidden; }
	.in-flex02 .in-flex-L::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/common/b-it.png") center center no-repeat; background-size: cover; transition: transform 0.5s ease; }	
	.in-flex02 .in-flex-R { position: relative; height: 200px; width: 40%; overflow: hidden; }
	.in-flex02 .in-flex-R::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/common/bill.png") center center no-repeat; background-size: cover; transition: transform 0.5s ease; }
	
	.in-flex02 .in-flex-L .ovry { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--sub-color); opacity: 0.75; }
	.in-flex02 .in-flex-R .ovry { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--base-color); opacity: 0.75; }
	.in-flex02 .copy-01 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 10; width: 90%; margin: 0 auto; }
	.in-flex02 .mv-ttl06 { color: #fff; font-family:'Roboto Condensed', sans-serif; font-weight:bold; font-size: 1.5em; margin-bottom: 20px; opacity: 0.55; line-height: 1.0; text-align: center; }
	.in-flex02 .in-flex-L .mv-ttl06 { position: unset; }
	.in-flex02 .in-flex-R .mv-ttl06 { position: unset; }
	.in-flex02 .in-flex-L .mv-ttl01,.in-flex02 .in-flex-R .mv-ttl01 { text-align: center; }
	.in-flex02 .in-flex-L .mv-ttl02,.in-flex02 .in-flex-R .mv-ttl02 { text-align: center; }
	
	/* ホバー時に拡大 */
	.in-flex02 .in-flex-L:hover { cursor: pointer; }
	.in-flex02 .in-flex-L:hover .ovry { opacity: 0.25; }
	.in-flex02 .in-flex-L:hover::before { transform: scale(1.2); /* 120%に拡大 */ }
	.in-flex02 .in-flex-R:hover { cursor: pointer; }
	.in-flex02 .in-flex-R:hover .ovry { opacity: 0.25; }
	.in-flex02 .in-flex-R:hover::before { transform: scale(1.2); /* 120%に拡大 */ }
	
	#anch-product { margin-top: 5vh; }
	#anch-product .in-flex { border-top: 1px solid #dedede; margin:5vh 0; padding: 5vh 0; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; max-width: 1400px; margin: 0 auto; width: 100%; }
	#anch-product .in-flex .series { width: 48%; }
	#anch-product .in-flex .seriesLogo { width: 40%; margin: 0 auto 20px; }
	.seriesDl { display: flex; justify-content: center; margin-bottom: 20px; }
	.seriesDl dt { font-weight: bold; font-size: 1.1em; margin-right: 1em; }
	.seriesDl dd { font-weight: bold; font-size: 1.1em; }
	
	#anch-product .box_link_btn a { color:#000; border:#000 1px solid; margin: 0 auto; }
	#anch-product .box_link_btn a:link    { color:#000; }
	#anch-product .box_link_btn a:visited { color:#000; }
	#anch-product .box_link_btn a:hover   { color:#fff; background:#000; }
	#anch-product .box_link_btn a:active  { color:#000; }
	#anch-product .box_link_btn a:after { background: #000; }
	#anch-product .box_link_btn a:hover:after { background: #fff; }
	#anch-product .box_link_btn a::before { background-color: #000; }
}
@media screen and (max-width: 599px) {
	.in-flex .mv-ttl06 { font-size: 4.0em; }
	.serviceTtl { display: block;  }
	.serviceTtl-L { width: 100%; }
	.serviceTtl-R { width: 80%; margin: 0 auto;}
	.in-flex .mv-ttl01 { color: #fff; font-size: 1.6rem; }
	.numList li h4 { font-size: 0.7rem; } 
	.numList li h5 { font-size: 1.6rem; }
	
	#anch-service .in-flex-L .box_link_btn a { background: none; margin: 0 auto 10px; }
	#anch-service .in-flex-R .box_link_btn a { background: none;}
}
@media screen and (min-width: 900px) {
	#anch01 { padding: 5vh;}
	.in-flex { margin: 0 4%; display: flex; justify-content: space-between; }
	.in-flex-L { width: 49%; background: var(--sub-color); padding: 3vh 3%; position: relative; }
	.in-flex-R { width: 49%; background: var(--base-color); padding: 3vh 3%; position: relative; }
	
	.in-flex .mv-ttl01 { color: #fff; font-size: 2.2rem; margin-bottom: 10px; }
	.in-flex .mv-ttl06 { color: #fff; font-family:'Roboto Condensed', sans-serif; font-weight:bold; font-size: 5.0em; margin-bottom: 10px; opacity: 0.1; line-height: 1.0; }
	.in-flex .mv-ttl02 { color: #fff; margin-bottom: 10px; font-size: 1.1em; font-weight: bold; }
	.in-flex .mv-ttl06 { position: absolute; top: 0; left: 0; }
	/*.in-flex-L .mv-ttl06 { position: absolute; top: 0; left: 0; }
	.in-flex-R .mv-ttl06 { position: absolute; top: 0; right: 0; }
	.in-flex-R .mv-ttl01 { text-align: right; }
	.in-flex-R .mv-ttl02 { text-align: right; }*/
	
	.serviceTtl { display: flex; justify-content: space-between; align-items: center; }
	.serviceTtl-L { width: 60%; }
	.serviceTtl-R { width: 36%; }
	.border-solid { margin-bottom: 20px; border-bottom: 1px solid #fff; margin-top: 20px; }
	
	#anch-service .in-flex p { color: #fff; }
	.numList { display: flex; justify-content: flex-start; margin-bottom: 20px; }
	.numList li { width: 31%; margin-right: 3.5%; }
	.numList li .icon { width: 30%; margin: 0 auto 10px; }
	.numList li:last-child { margin-right: 0px; }
	.numList li h4 { text-align: center; margin-bottom: 10px; background: #144425; padding: 5px 0; font-size: 0.9rem; color: #fff; }
	.numList li h5 { text-align: center; font-size: 3.6rem; line-height: 1.0; color: #fff; }
	.numList li h5 .xsmall { font-size: 0.5em; margin-left: 0.25em; }
	
	.nice-icon { width: 30%; margin: 0 auto 10px; }
	
	#anch-service .in-flex-L h4 {background: #135181; }
	
	#anch-service .in-flex-L .box_link_btn a { color:var(--opa-color); border:#fff 1px solid; margin: 0 0; }
	#anch-service .in-flex-L .box_link_btn a:link    { color:#fff; }
	#anch-service .in-flex-L .box_link_btn a:visited { color:#fff; }
	#anch-service .in-flex-L .box_link_btn a:hover   { color:var(--base-color); background:#fff; }
	#anch-service .in-flex-L .box_link_btn a:active  { color:#fff; }
	#anch-service .in-flex-L .box_link_btn a:after { background: #fff; }
	#anch-service .in-flex-L .box_link_btn a:hover:after { background: var(--base-color); }
	#anch-service .in-flex-L .box_link_btn a::before { background-color: #fff; }
	#anch-service .box_link_list { justify-content: center; }
	
	#anch-service .box_link_btn a { color:var(--opa-color); border:#fff 1px solid; margin: 0 auto; }
	#anch-service .box_link_btn a:link    { color:#fff; }
	#anch-service .box_link_btn a:visited { color:#fff; }
	#anch-service .box_link_btn a:hover   { color:var(--base-color); background:#fff; }
	#anch-service .box_link_btn a:active  { color:#fff; }
	#anch-service .box_link_btn a:after { background: #fff; }
	#anch-service .box_link_btn a:hover:after { background: var(--base-color); }
	#anch-service .box_link_btn a::before { background-color: #fff; }
	
	
	.in-flex02 { max-width: 1400px; margin: 0 auto; width: 100%; }
	
	.in-flex02 .in-flex-L { position: relative; height: 200px; width: 40%; overflow: hidden; }
	.in-flex02 .in-flex-L::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/common/b-it.png") center center no-repeat; background-size: cover; transition: transform 0.5s ease; }	
	.in-flex02 .in-flex-R { position: relative; height: 200px; width: 40%; overflow: hidden; }
	.in-flex02 .in-flex-R::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/common/bill.png") center center no-repeat; background-size: cover; transition: transform 0.5s ease; }
	
	.in-flex02 .in-flex-L .ovry { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--sub-color); opacity: 0.75; }
	.in-flex02 .in-flex-R .ovry { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--base-color); opacity: 0.75; }
	.in-flex02 .copy-01 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 10; width: 90%; margin: 0 auto; }
	.in-flex02 .mv-ttl06 { color: #fff; font-family:'Roboto Condensed', sans-serif; font-weight:bold; font-size: 1.5em; margin-bottom: 20px; opacity: 0.55; line-height: 1.0; text-align: center; }
	.in-flex02 .in-flex-L .mv-ttl06 { position: unset; }
	.in-flex02 .in-flex-R .mv-ttl06 { position: unset; }
	.in-flex02 .in-flex-L .mv-ttl01,.in-flex02 .in-flex-R .mv-ttl01 { text-align: center; }
	.in-flex02 .in-flex-L .mv-ttl02,.in-flex02 .in-flex-R .mv-ttl02 { text-align: center; }
	
	/* ホバー時に拡大 */
	.in-flex02 .in-flex-L:hover { cursor: pointer; }
	.in-flex02 .in-flex-L:hover .ovry { opacity: 0.25; }
	.in-flex02 .in-flex-L:hover::before { transform: scale(1.2); /* 120%に拡大 */ }
	.in-flex02 .in-flex-R:hover { cursor: pointer; }
	.in-flex02 .in-flex-R:hover .ovry { opacity: 0.25; }
	.in-flex02 .in-flex-R:hover::before { transform: scale(1.2); /* 120%に拡大 */ }
	
	#anch-product { margin-top: 5vh; }
	#anch-product .in-flex { border-top: 1px solid #dedede; margin:5vh 0; padding: 5vh 0; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; max-width: 1400px; margin: 0 auto; width: 100%; }
	#anch-product .in-flex .series { width: 48%; }
	#anch-product .in-flex .seriesLogo { width: 40%; margin: 0 auto 20px; }
	.seriesDl { display: flex; justify-content: center; margin-bottom: 20px; }
	.seriesDl dt { font-weight: bold; font-size: 1.1em; margin-right: 1em; }
	.seriesDl dd { font-weight: bold; font-size: 1.1em; }
	
	#anch-product .box_link_btn a { color:#000; border:#000 1px solid; margin: 0 auto; }
	#anch-product .box_link_btn a:link    { color:#000; }
	#anch-product .box_link_btn a:visited { color:#000; }
	#anch-product .box_link_btn a:hover   { color:#fff; background:#000; }
	#anch-product .box_link_btn a:active  { color:#000; }
	#anch-product .box_link_btn a:after { background: #000; }
	#anch-product .box_link_btn a:hover:after { background: #fff; }
	#anch-product .box_link_btn a::before { background-color: #000; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	.in-flex .mv-ttl01 { font-size: 1.85rem; }
	#anch-service .in-flex { margin: 0 2%;  }
	.numList li h5 { text-align: center; font-size: 2.8rem; }
	.in-flex .mv-ttl01 { font-size: 1.90rem; }
	.in-flex { margin: 0 2%; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.in-flex .mv-ttl01 { font-size: 1.9rem; }
	#anch-service .in-flex { margin: 0 2%;  }
	.numList li h5 { text-align: center; font-size: 2.9rem;} 
	.in-flex .mv-ttl01 { font-size: 1.95rem; }
	.in-flex { margin: 0 2%; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.in-flex .mv-ttl01 { font-size: 1.95rem; }
	#anch-service .in-flex { margin: 0 2%;  }
	.numList li h5 { text-align: center; font-size: 3.0rem; }
	.in-flex .mv-ttl01 { font-size: 2.00rem; }
	.in-flex { margin: 0 2%; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	.in-flex .mv-ttl01 { font-size: 2.0rem; }
	#anch-service .in-flex { margin: 0 2%;  }
	.numList li h5 { text-align: center; font-size: 3.1rem;}
	.in-flex .mv-ttl01 { font-size: 2.05rem; }
	.in-flex { margin: 0 2%; }
}
@media screen and (min-width: 1390px) and (max-width: 1489px) {
	.in-flex .mv-ttl01 { font-size: 2.1rem; }
	#anch-service .in-flex { margin: 0 2%;  }
	.numList li h5 { text-align: center; font-size: 3.2rem; }
	.in-flex .mv-ttl01 { font-size: 2.10rem; }
	.in-flex { margin: 0 2%; }
}
@media screen and (min-width: 1490px) and (max-width: 1589px) {
	.in-flex .mv-ttl01 { font-size: 2.1rem; }
	#anch-service .in-flex { margin: 0 2%;  }
	.numList li h5 { text-align: center; font-size: 3.3rem; }
	.in-flex .mv-ttl01 { font-size: 2.15rem; }
	.in-flex { margin: 0 2%; }
}