@charset "utf-8";

#bannerProduct {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 220px;
  z-index: 90;
}
.product-title-img{
	margin-bottom: 40px;
}
.product-title-img a{
		position: relative;
}
.product-title-img .base-btn.btn-inline{
	position: absolute;
	bottom: 20px;
	right: 50px;
	display:block;
	padding:10px;
	text-align:center;
	color: #fff;
	background: #134fac; /* Old browsers */
	background: -moz-linear-gradient(left,  #134fac 0%, #24a3c7 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #134fac 0%,#24a3c7 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #134fac 0%,#24a3c7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/*border: solid 1px #fff;*/
	text-decoration:none;
	-webkit-transition: all .4s;
	transition: all .4s;
}
.product-title-img .base-btn span{
	position:relative;
	display:inline-block;
	padding-left:15px;
}
.product-title-img .base-btn span:before{
	position:absolute;
	left:0;
	top:50%;
	content:"";
	width: 6px;
	height: 6px;
	margin-top:-5px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all .4s;
	transition: all .4s;
}

@media screen and (min-width:768px){
/*pc・タブレットcss*/

.shermo-mihariban{
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
	padding:30px 0px;
	/*border: solid 1px #CCCCCC;*/
}
.shermo-mihariban .ttl{
	position:relative;
	margin-bottom:15px;
	font-size:21px;
	line-height:1;
	font-weight:700;
	padding-left:20px;
	font-family: 'Noto Sans JP', sans-serif;
}
.shermo-mihariban .ttl:before{
	content:"";
	position: absolute;
	top:2px;
	left:0;
	width:3px;
	height:100%;
	background-color:#2060C0;
}
.shermo-mihariban .txt{
	width:70%;
}
.shermo-mihariban .ph{
	width:30%;
}

.specialty-point{

}
.specialty-point .content-area{
	position:relative;
	z-index:2;
}
.specialty-point li{
	position:relative;
	padding:10vw 0;
	overflow:hidden;
}
.specialty-point li:after{
	content:"";
	position:absolute;
	top:0;
	right:0;
	width:50%;
	height:100%;
	background-color:#ddd;
}
.specialty-point li:nth-child(odd):after{
	right:0;
}
.specialty-point li:nth-child(even):after{
	left:0;
}
.specialty-point li:nth-child(1):after{ background: url(../img/specialty/specialty_point_img01.jpg) no-repeat center center; background-size:cover;}
.specialty-point li:nth-child(2):after{ background: url(../img/specialty/specialty_point_img02.jpg) no-repeat center center; background-size:cover;}
.specialty-point li:nth-child(3):after{ background: url(../img/specialty/specialty_point_img03.jpg) no-repeat center center; background-size:cover;}
.specialty-point li:nth-child(4):after{ background: url(../img/specialty/specialty_point_img04.jpg) no-repeat center center; background-size:cover;}
.specialty-point li:nth-child(5):after{ background: url(../img/specialty/specialty_point_img05.jpg) no-repeat center center; background-size:cover;}

.specialty-point li:nth-child(odd):before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:100%;
	background: #134fac; /* Old browsers */
	background: -moz-linear-gradient(left,  #134fac 0%, #24a3c7 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #134fac 0%,#24a3c7 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #134fac 0%,#24a3c7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.specialty-point li:nth-child(odd) .txt{
	padding-right:55%;
	color:#fff;
}
.specialty-point li:nth-child(even) .txt{
	padding-left:55%;
}

.specialty-point .box:before{
	content:"";
	position:absolute;
	bottom:-0.2em;
	z-index:2;
	font-size:300px;
	display:block;
	line-height:1;
	font-family: 'Work Sans', sans-serif;
	font-weight:800;
}
.specialty-point li:nth-child(odd) .box:before{
	left:0;
	color:rgba(255,255,255,0.1);
}
.specialty-point li:nth-child(even) .box:before{
	right:0;
	color:rgba(13,51,163,0.1);
}
.specialty-point li:nth-child(1) .box:before{ content:"01";}
.specialty-point li:nth-child(2) .box:before{ content:"02";}
.specialty-point li:nth-child(3) .box:before{ content:"03";}
.specialty-point li:nth-child(4) .box:before{ content:"04";}
.specialty-point li:nth-child(5) .box:before{ content:"05";}
.specialty-point li:nth-child(6) .box:before{ content:"06";}


.facility-box{
	padding:5vw 0;
	color:#fff;
	text-align:center;
	background:url(../img/specialty/facility_bg.jpg) no-repeat center center;
	background-size:cover;
}
.facility-box .ttl01 span{
	border-bottom: solid 2px #fff;
}
}

@media screen and (min-width:768px) and ( max-width:1110px) {
}

@media (max-width: 768px) {
	#bannerProduct{
		width: 100%;
		height: auto;
	}

	.shermo-mihariban{
		padding:5vw;
		/*border: solid 1px #CCCCCC;*/
	}
	.shermo-mihariban .ttl{
		position:relative;
		margin-bottom:2vw;
		font-size:18px;
		line-height:1;
		font-weight:700;
		padding-left:20px;
		font-family: 'Noto Sans JP', sans-serif;
	}
	.shermo-mihariban .ttl:before{
		content:"";
		position: absolute;
		top:2px;
		left:0;
		width:3px;
		height:100%;
		background-color:#2060C0;
	}
	.shermo-mihariban .txt{
		width:100%;
		margin-bottom:5vw;
	}
	.shermo-mihariban .ph{
		width:80%;
		margin: 0 auto;
	}

	.specialty-point{
		padding: 0 5vw;

	}
	.specialty-point .content-area{
		position:relative;
		z-index:2;
	}
	.specialty-point li{
		position:relative;
		padding-top:60vw;
		padding-bottom:10vw;
		overflow:hidden;
		margin-bottom:5vw;
		background: #134fac; /* Old browsers */
		background: -moz-linear-gradient(left,  #134fac 0%, #24a3c7 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  #134fac 0%,#24a3c7 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  #134fac 0%,#24a3c7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
	.specialty-point li:after{
		content:"";
		position:absolute;
		top:0;
		right:0;
		width:100%;
		height:60vw;
		background-color:#ddd;
	}
	.specialty-point li:nth-child(1):after{ background: url(../img/specialty/specialty_point_img01.jpg) no-repeat center center; background-size:cover;}
	.specialty-point li:nth-child(2):after{ background: url(../img/specialty/specialty_point_img02.jpg) no-repeat center center; background-size:cover;}
	.specialty-point li:nth-child(3):after{ background: url(../img/specialty/specialty_point_img03.jpg) no-repeat center center; background-size:cover;}
	.specialty-point li:nth-child(4):after{ background: url(../img/specialty/specialty_point_img04.jpg) no-repeat center center; background-size:cover;}
	.specialty-point li:nth-child(5):after{ background: url(../img/specialty/specialty_point_img05.jpg) no-repeat center center; background-size:cover;}

	.specialty-point .txt{
		color:#fff;
		padding:5vw 0 0;
	}

	.specialty-point .box:before{
		content:"";
		position:absolute;
		bottom:-0.2em;
		z-index:2;
		font-size:200px;
		display:block;
		line-height:1;
		font-family: 'Work Sans', sans-serif;
		font-weight:800;
	}
	.specialty-point li .box:before{
		right:0;
		color:rgba(255,255,255,0.1);
	}
	.specialty-point li:nth-child(1) .box:before{ content:"01";}
	.specialty-point li:nth-child(2) .box:before{ content:"02";}
	.specialty-point li:nth-child(3) .box:before{ content:"03";}
	.specialty-point li:nth-child(4) .box:before{ content:"04";}
	.specialty-point li:nth-child(5) .box:before{ content:"05";}
	.specialty-point li:nth-child(6) .box:before{ content:"06";}


	.facility-box{
		padding:15vw 0;
		color:#fff;
		text-align:center;
		background:url(../img/specialty/facility_bg.jpg) no-repeat center center;
		background-size:cover;
	}
	.facility-box .ttl01 span{
		border-bottom: solid 2px #fff;
	}
	.product-title-img .base-btn.btn-inline{
		width: 100%;
		position: static;
	}
}

/* 2021.6 */
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
	margin-top:5px;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.ttl2{
	padding: 0.5rem;
	font-size:1.2em;
	font-weight:bold;
}

img.img80{
	width:80%;
}

img.img60{
	width:60%;
}

/*  2022.8  画像切替*/
.jkb-slide > .out{
    position: relative;
    margin-bottom:25px;
}
.in img{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .5s;
    z-index: 0;
}

.jkb-slide img{
    display: block;
    width: 100%;
    height: auto;
}

.jkb-slide input{
    display: none;
}

.in{
    display: flex;
    justify-content: center;
}

label span{
    display: block;
    width: 30px;
    height: 30px;
    padding: 7px;
    margin: -40px 0 0;
    border-radius: 100%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
label span::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.5;
    border-radius: 100%;
}
input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before,
input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before,
input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before{
    background: #000;
    opacity: 1;
}
label span::before{
    animation: slidebutton 16.5s infinite;
}
@keyframes slidebutton{
    0%{opacity: 0.5;background: #fff;}
    3%{opacity: 1;background: #000;}/* b÷x×100=y */
    33.33%{opacity: 1;background: #000;}/* 100÷c=z */
    36.33%{opacity: 0.5;background: #fff;}/* y+z */
}
label:nth-of-type(2) span::before,label:nth-of-type(2) img{
    animation-delay: 5.5s;
}
label:nth-of-type(3) span::before,label:nth-of-type(3) img{
    animation-delay: 11s;
}

input:nth-of-type(1):checked ~ .in label:nth-of-type(1) img,
input:nth-of-type(2):checked ~ .in label:nth-of-type(2) img,
input:nth-of-type(3):checked ~ .in label:nth-of-type(3) img{
    opacity: 1;
    z-index: 1;
}
.in img{
    animation: slide 16.5s infinite;/* (a+b)×c=x */
    opacity: 0;
}

@keyframes slide{
    0%{opacity: 0;}
    3%{opacity: 1;z-index: 1;}/* b÷x×100=y */
    33.33%{opacity: 1;}/* 100÷c=z */
    36.33%{opacity: 0;z-index: 0;}/* y+z */
}
input:checked ~ .in img,input:checked ~ .in span::before{
    animation: none;
}
.in:hover img,.in:hover span::before{
    animation-play-state:paused;/* マウスを載せると一時停止 */
}