@charset "utf-8";

@import "keyframes.css";

body {}
#container { background: #32024b;}
.wrap { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
.wrap.bg-3 { background: url('../img/oil/bg.jpg') no-repeat 50% 0 / cover;}
.wrap.pb { padding-bottom: 150px;}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	.wrap.pb { padding-bottom: 80px;}
}

#hd .inner-hd { padding: 20px 30px 12px;}
#ft { background: url(../img/bg-ft-gd.jpg) no-repeat 50% 50% / cover;}
@media (max-width: 641px) {
	#ft { background: url(../img/bg-ft-gd-sp.jpg) no-repeat 50% 50% / 100% auto;}
}



.kv-oil { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background: url('../img/oil/bg-kv.jpg') no-repeat 50% 50% / cover;}
.kv-oil .inner-kv{ position: relative; width: 92%; min-height: 760px; max-width: 1100px; margin: 0 auto;}
.kv-oil .txt { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; z-index: 3;}
.kv-oil h2 { padding-left: 40%; text-align: center;}
.kv-oil h2 img { width: 100%; max-width: 540px;}
.kv-oil .sp-kv { display: none; position: relative;}
.kv-oil .sp-kv img { width: 100%;}
@media (max-width: 1001px) {
	.kv-oil { background-position: 45% 50%;}
}
@media (max-width: 801px) {
	.kv-oil { background-position: 40% 50%;}
}
@media (max-width: 641px) {
	.kv-oil .inner-kv { min-height: auto; width: 100%;}
	.kv-oil .txt { top: auto; transform: translateY(0%); bottom: 40px;}
	.kv-oil h2 { padding-left: 0%;}
	.kv-oil h2 img { width: 86%;}
	.kv-oil .sp-kv { display: block;}
}
@media (max-width: 481px) {
	.kv-oil .txt { bottom: 30px;}
}


.sct .inner-sct { width: 92%; max-width: 1200px; margin: 0 auto;}



/*		Quality
-------------------------------------------------- */
#oil-1 { position: relative; z-index: 8; padding-top: 40px;}
#oil-1 .comment { position: relative; width: 100%; max-width: 1400px; margin: 0 auto 80px;}
#oil-1 .comment:after { content: ''; display: block; width: 100%; height: 180px; background: rgba(255,255,255,0.6);
 position: absolute; right: 0; bottom: 0; z-index: 1;
}
#oil-1 .comment .pc-inner{ position: relative; display: flex; align-items: flex-end; width: 100%; z-index: 2;}
#oil-1 .comment .sp-inner { display: none;}
#oil-1 .comment .pht { width: 48%;}
#oil-1 .comment .pht img{ width: 100%;}
#oil-1 .comment .txt { width: 52%;}
#oil-1 .comment .txt h3 { color: #fff; font-size: 17px; line-height: 1.4;}
#oil-1 .comment .txt h3 span { font-size: 38px;}
#oil-1 .comment .txt p.name { margin-bottom: 20px; color: #fff;}
#oil-1 .comment .txt p.name span {  font-size: 25px;}
#oil-1 .comment .txt .txt-base { padding: 35px 10px 50px;}
#oil-1 .comment .txt .txt-base p { color: #333; font-size: 22px; line-height: 1.8;}
#oil-1 .comment .txt .txt-base p span { display: block;}
@media (max-width: 1001px) {
	#oil-1 .comment:after { height: 120px;}
	#oil-1 .comment .pht { width: 50%;}
	#oil-1 .comment .txt { width: 50%;}
	#oil-1 .comment .txt h3 { font-size: 15px;}
	#oil-1 .comment .txt h3 span { font-size: 32px;}
	#oil-1 .comment .txt .txt-base { padding: 25px 0px;}
	#oil-1 .comment .txt .txt-base p { font-size: 18px;}
}
@media (max-width: 801px) {
	#oil-1 .comment { margin: 0 auto 40px;}
	#oil-1 .comment:after { height: 100px;}
	#oil-1 .comment .txt .txt-base { padding: 20px 0px;}
}
@media (max-width: 641px) {
	#oil-1 .comment:after { content: none;}
	#oil-1 .comment .pc-inner{ display: none;}
	#oil-1 .comment .sp-inner { display: block;}
	#oil-1 .comment .sp-inner p img { width: 100%;}
}

#care .inner-sct { padding-bottom: 120px;}
#care .tit { margin-bottom: 40px; padding: 30px 0; background: url('../img/oil/bg-tit.jpg') no-repeat 50% 50% / cover;}
#care .tit h3 { text-align: center;}
#care .tit h3 img { width: 92%; max-width: 650px;}
#care p.lead { margin-bottom: 40px; color: #fff; font-size: 22px; font-weight: 700; letter-spacing: 0.06rem; line-height: 1.8; text-align: center;}
#care p.lead sub { font-size: 14px; vertical-align: baseline;}
#care .fig {}
#care .fig figure { width: 100%; max-width: 1080px; margin: 0 auto;}
#care .fig figure img { width: 100%;}
#care .fig figure img.sp { display: none;}
#care .video { width: 100%; max-width: 1080px; margin: 0 auto 100px; background: url('../img/oil/bg-frame.png') no-repeat 50% 50% / 100% 100%;}
#care .video h3 { text-align: center;}
#care .video h3 img { width: 100%;}
#care .video .inner { padding: 30px 40px 50px;}
#care .video .movie { position: relative; width: 100%; max-width: 960px; margin: 0 auto;}
#care .video .movie video { position: relative; width: 100%; z-index: 1;}
#care .video .movie .play { position: absolute; left: 0; top: 0; width: 100%; z-index: 2;}
#care .video .movie .play img { width: 100%;}
#care .video .movie .play.playActive { display: none;}

#care .prof { width: 88%; max-width: 1040px; margin: 0 auto;
 background: rgba(255,255,255,0.25); border: solid 2px #fff; box-shadow: 0 0 12px #fff, 0 0 12px #fff;
}
#care .prof .ctn { position: relative; display: block; width: 100%; margin: 0 auto; padding: 0px 0px 40px;}
#care .prof .ctn h4 { margin-bottom: 30px;}
#care .prof .ctn h4 img { width: 100%;}
#care .prof .ctn h4 img.sp { display: none;}
#care .prof .ctn p { width: 92%; margin: 0 auto 30px; color: #fff; font-size: 17px; letter-spacing: 0.1rem; text-align: center;}
#care .prof .ctn div { max-width:330px; margin: 0 auto;}
#care .prof .ctn div a.btn { border-width: 2px;}
#care .prof .ctn div a.btn span.box { font-weight: 700;}
#care .prof .ctn div a.btn span.box:after { width: 21px; height: 10px; background: url('../img/icn-arw.png') no-repeat 50% 50% / 100% auto; border: none;
 transform: translateY(-50%) rotate(0deg);
}
#care .note { padding: 30px 0 25px; background: #421c53;}
#care .note p { color: #fff; font-size: 10px; text-align: center;}
#care .note p span { display: inline-block; padding-left: 20px;}
@media (max-width: 641px) {
	#care .tit { margin-bottom: 20px; padding: 20px 0;}
	#care p.lead { margin-bottom: 20px; font-size: 3.5vw;}
	#care p.lead sub { font-size: 12px;}
	#care .fig figure img.pc { display: none;}
	#care .fig figure img.sp { display: block;}
	#care .video { margin: 0 auto 50px; background-size: 104% 100%;}
	#care .video .inner { padding: 20px 25px 30px;}
	#care .prof .ctn p { text-align: left; font-size: 15px;}
	#care .prof .ctn h4 img.pc { display: none;}
	#care .prof .ctn h4 img.sp { display: block;}
}
@media (max-width: 481px) {
	#care .inner-sct { padding-bottom: 60px;}
	#care p.lead sub { font-size: 10px;}
	#care .prof .ctn { padding: 0px 0px 20px;}
	#care .prof .ctn h4 {}
	#care .prof .ctn p { margin: 0 auto 20px;}
	#care .prof .ctn div { width: 90%;}
	#care .note { padding: 20px 0px;}
	#care .note p span { display: block; padding-left: 0px;}
}