@charset "utf-8";

/* Y'S GEAR : school.css */

body {
	overflow-x: hidden;
	margin-right: auto !important;
}

.contentsWidth {
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
}
.contentsWidth *,
.contentsWidth *::before,
.contentsWidth *::after { box-sizing: border-box; }
.contentsWidth a,
.contentsWidth a::before,
.contentsWidth a::after,
.contentsWidth a img { transition: all 0.3s ease; }

.contentsWidth h2,
.contentsWidth h3,
.contentsWidth h4,
.contentsWidth h5 { line-height: 1.2; } 


@media screen and (min-width: 769px) {
	.contentsWidth .sp { display: none; }
} /* */

@media screen and (max-width: 768px) {
	.contentsWidth .pc { display: none; }
} /* */


/*==============================================*
 *  [ メイン ] 
 *==============================================*/

@media screen and (max-width: 768px) {
	.main-img,
	.main-m-img {
		margin: 0 -10px;
	}
	.main-img img,
	.main-m-img img {
		width: 100%;
		height: auto;
	}
}

/*==============================================*
 *  [ TOPメニュー ] 
 *==============================================*/

.top-contents {
	text-align: center;
	padding: 50px;
	margin-bottom: 50px;
	background-image: linear-gradient(0deg, rgba(0, 175, 134, 1), rgba(40, 131, 239, 1));
}

.top-contents h2 {
	color: #fff;
	font-size: 3.0rem;
	font-weight: bold;
	line-height: 50px;
	margin-bottom: 56px;
}

.top-contents ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 50px;
}

.top-contents li {
	list-style: none;
	width: calc((880px - 100px) / 3);
	height: 197px;
	background-color: #fff;
	box-shadow: 0 3px 3px rgba(0,0,0,0.15);
}
.top-contents li:hover {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 60%, rgba(169, 243, 225, 1));
}

.top-contents li a {
	display: block;
	padding: 30px 30px 23px;
}

.top-contents li img {
	margin-bottom: 17.5px;
}

.top-contents li p {
	color: #01AE86;
	font-size: 2.4rem;
	line-height: 3.0rem;
}

@media screen and (max-width: 768px) {
	.top-contents {
		margin: -1px -10px 50px;
		padding: 30px;
		background-image: linear-gradient(0deg, rgba(0, 175, 134, 1), rgba(40, 131, 239, 1));
	}
	.top-contents h2 {
		font-size: 2.0rem;
		line-height: 2.6rem;
		margin-bottom: 30px;
	}
	.top-contents ul {
		display: block;
	}
	.top-contents li {
		width: 100%;
		height: auto;
		margin-bottom: 20px;
	}
	.top-contents li a {
		display: flex;
		justify-content: space-around;
		align-items: center;
		gap: 10px;
	}
	.top-contents li a div {
		width: 20%;
	}
	.top-contents li img {
		margin-bottom: 0;
	}
	.top-contents li p {
		width: calc(80% - 30px);
		font-size: 1.8rem;
		line-height: 2.0rem;
	}
}


/*==============================================*
 *  [ 上部メニュー ] 
 *==============================================*/
.school-nav {
	margin-top: 10px;
	margin-bottom: 30px;
}
.school-nav ul {
	display: flex;
	justify-content: center;
	align-items: center;
}
.school-nav li {
	position: relative;
	list-style: none;
	text-align: center;
	width: calc(100% / 5);
	height: 167px;
	background-color: #fff;
	box-shadow : 0 0 0 1px #009E79;
}
.school-nav li:hover {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 60%, rgba(169, 243, 225, 1));
}
.school-nav .active {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 60%, rgba(169, 243, 225, 1));
}
.school-nav li a {
	display: block;
	padding: 20px 0;
}
.school-nav li img {
	margin-bottom: 14px;
	transition: .3s;
}
.school-nav li:hover img {
	transform: translateY(5px);
}

.school-nav li p {
	color: #01AE86;
	font-size: 1.8rem;
	line-height: 2.4rem;
}


@media screen and (max-width: 768px) {
	.school-nav {
		margin-top: 0;
	}
	.school-nav-sp {
		color: #00B48A;
		font-size: 1.4rem;
		background-color: #fff;
		border: 1px solid #00B48A;
		margin: 0 -10px;
	}
	.school-nav-sp a {
		display: block;
		position: relative;
		padding: 15px;
	}
	.school-nav-sp a::before, 
	.school-nav-sp a::after {
		position: absolute;
		top: calc(50% - 2px);
		right: 10px;
		width: 20px;
		height: 3px;
		background: #00B48A;
		content: "";
	}
	.school-nav-sp a::after {
		display: none;
		transform: rotate(90deg);
	}
	.school-nav-sp a::after {
		display: block;
	}
}

/*==============================================*
 *  [ モーダル ] 
 *==============================================*/

.modalBox {
	display: none;
}

@media screen and (max-width: 768px) {
	.remodal-wrapper {
		padding: 20px 20px 0!important;
	}
	.remodal {
		margin-bottom: 0!important;
		padding: 20px 20px 55px!important;
	}
	.modalBox .title {
		text-align: center;
		color: #00B48A;
		font-size: 2.0rem;
	}
	.modalBox .green-line {
		border-bottom: 1px solid #00B48A;
		margin-top: 10px;
	}
	.modalBox ul {
		margin: 20px 0;
	}
	.modalBox li {
		height: 50px;
		list-style: none;
		display: block;
		text-align: left;
		margin-bottom: 10px;
	}
	.modalBox li a {
		outline: none;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 20px;
	}
	.modalBox li div {
		width: 50px;
		height: 50px;
		background-color: #00B48A;
		padding: 10px 8px;
		box-sizing: border-box;
	}
	.modalBox li img {
		width: 100%;
		height: 100%;
	}
	.modalBox li p {
		color: #00B48A;
		font-size: 1.6rem;
		text-align: left;
		line-height: 24px;
	}
	.modalBox button {
		position: absolute;
		bottom: 0;
		right: 0!important;
		left: 0!important;
		padding: 20px 0!important;
		margin: 0 auto;
		border: none;
		background: rgba(255, 255, 255, 0);
		color: #00B48A !important;
		font-size: 1.6rem;
		font-weight: bold;
		cursor: pointer;
		outline: none;
		-webkit-transition: all ease .3s;
		transition: all ease .3s;
	}
	.modalBox button::before, 
	.modalBox button::after { display: none; }
} /* */


/*==============================================*
 *  [ 下部メニュー ] 
 *==============================================*/

.under-nav {
	margin-bottom: 50px;
}
.under-nav li {
	height: 120px;
}
.under-nav li img {
	height: 30px;
	margin-bottom: 20px;
}
.under-nav li p {
	font-size: 1.4rem;
	line-height: 2.0rem;
}

.under-nav li:hover img {
	transform: none;
}


@media screen and (max-width: 768px) {
	.under-nav { display: none}
}


/*==============================================*
 *  [ オイル教室 コンテンツ ] 
 *==============================================*/

.school-contents {
	margin-bottom: 50px;
}
.school-contents .course-title {
	height: 100px;
	color: #fff;
	text-align: center;
	font-size: 3.0rem;
	font-weight: bold;
	background-color: #00B48A;
	padding: 30px;
	margin-bottom: 30px;
}
.school-contents .course-title img {
	height: 40px;
}

.cf {
	margin-bottom: 40px;
}

.commonTitleH2 {
	text-align: center!important;
	font-size: 1.6rem!important;
}

@media screen and (max-width: 768px) {
	.school-contents .course-title {
		height: 66px;
		text-align: left;
		font-size: 2.0rem;
		margin-right: -10px;
		margin-left: -10px;
		padding: 20px;
	}
	.school-contents .course-title img {
		height: 26px;
	}
}

/*==============================================*
 *  [ オイル教室 エンジンオイルの役割 ] 
 *==============================================*/

.role-txtarea {
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	flex-direction: row-reverse;
}
.no-reverse {
	flex-direction: row;
}

img.floatRight {
	margin-bottom: 40px;
}
.role-txtarea p {
	font-size: 1.6rem;
	line-height: 3.0rem;
	margin-bottom: 25px;
}
.role-txtarea p strong {
	color: #089eff;
	font-size: 1.8rem;
}
.difference-img {
	width: 293px;
	margin-left: 20px;
}
.difference-img img {
	max-width: 250px;
	margin-bottom: 10px;
}
.difference-img p {
	font-size: 1.2rem;
	line-height: 1.8rem;
}


@media screen and (max-width: 768px) {
	.role-txtarea {
		display: block;
		text-align: center;
	}
	.role-txtarea img {
		margin-bottom: 20px;
	}
	.role-txtarea p {
		text-align: left;
		font-size: 1.4rem;
		line-height: 2.6rem;
	}
	.role-txtarea p strong {
		font-size: 1.6rem;
	}
	.difference-img {
		text-align: center;
		width: calc(100% - 60px);
		margin: 30px;
	}
	.difference-img p {
		text-align: center;
		font-size: 1.2rem;
	}
	.difference-img img {
		width: 100%!important;
	}
}


/*==============================================*
 *  [ オイル教室 なぜオイル交換は必要？ ] 
 *==============================================*/

.change-txtarea {
}
.change-txtarea p {
	font-size: 1.6rem;
	line-height: 3.0rem;
	margin-bottom: 25px;
}
.change-txtarea p strong {
	color: #089eff;
	font-size: 1.8rem;
}
.change-img {
	display: flex;
	justify-content: center;
	gap: 50px;
}


@media screen and (max-width: 768px) {
	.change-txtarea {
		display: block;
		text-align: center;
	}
	.change-txtarea p {
		text-align: left;
		font-size: 1.4rem;
		line-height: 2.6rem;
	}
	.change-txtarea p strong {
		font-size: 1.6rem;
	}
	.change-img {
		display: block;
	}
	.change-img img {
		max-width: 300px;
		width: 100%!important;
		margin-bottom: 40px;
		padding-left: 20px;
		padding-right: 20px;
	}
}


/*==============================================*
 *  [ オイル教室 オイルはいつ交換すればいい？ ] 
 *==============================================*/

	.colBox {
		margin: 0 -10px;
	}
	.colBox section {
		float: left;
		width: 50%;
		margin-top: 5px;
		padding: 0 10px;
		box-sizing: border-box;
	}
	.colBox h3 {
		margin: 0 0 10px;
	}
	.commonNotesBox {
		font-size: 1.6rem;
	}
	.commonList > li:before {
		font-size: 1.0rem;
		padding-right: 5px;
	}

	.colBox img { width: 100%; max-width: 300px; }
	.colBox2 { display: flex; justify-content: space-between; text-align: center; align-items: center; }
	.colBox2 > * { margin: 0 !important; }
	.colBox2 > * h3, .colBox2 > * h4 { margin-top: 0 !important; }
	.colBox2 > div { width: 50%; order: 2; }
	.colBox2 > section { border: 1px solid #e6e6e6; background: #f8f7f7; }
	.colBox2 > section:nth-child(2) { width: calc(25% - 20px); order: 1; }
	.colBox2 > section:nth-child(3) { width: calc(25% - 20px); order: 3; }
	.colBox2 > section h4 { border-bottom: 1px solid #e6e6e6; color: #cc1533; }
	.colBox2 > section p { line-height: 1.2; font-weight: bold; }
	.colBox2 > section p b { font-size: calc(1em + 0.4rem); }
	.colBox2 > section ul.commonList { margin: 15px 10px; text-align: left; }
	.colBox2 > section ul.commonList li + li { margin-top: 5px; }
	.colBox2 > section ul.commonList b { color: #ff0000; }

	@media screen and (max-width: 768px) {
		.colBox {
			margin: 0 -10px;
		}
		.colBox section {
			float: none;
			width: auto;
			margin: 5px 0 20px;
			padding: 0 10px;
			box-sizing: border-box;
		}
		.colBox h3 {
			margin: 0 0 10px;
		}
	
		.colBox2 { flex-wrap: wrap; }
		.colBox2 > div { width: 100%; order: 1; }
		.colBox2 > section:nth-child(2) { width: calc(50% - 10px); order: 2; }
		.colBox2 > section:nth-child(3) { width: calc(50% - 10px); order: 3; }
		.colBox2 > section h4 { margin-right: 0 !important; margin-left: 0 !important; }
		.commonNotesBox { font-size: 1.4rem; }
		
		.commonWrap section .alignCenter {
			text-align: center!important;
		}
	} /* */


/*==============================================*
 *  [ オイル教室 YAMALUBEって何がいいの？ ] 
 *==============================================*/

.commonTitleH3 {
	font-size: 1.6rem;
}

.yamalubeKind {
	position: relative;
	text-align: center;
}
.yamalubeKind h2,
.yamalubeKind h3,
.yamalubeKind p,
.yamalubeKind dd {
	text-align: left;
}
.yamalubeKind h3 {
	background: none;
	padding: 10px 0;
	font-size: 1.6rem;
	border-bottom: 1px solid #707070;
}
.yamalubeKind .commonText {
	margin-bottom: 20px;
	padding-bottom: 35px;
}
.yamalubeKind .commonText::after {
	width: 0;
	height: 0;
	margin-top: 45px;
	border-style: solid;
	border-width: 20px 21.5px 0 21.5px;
	border-color: #ff0000 transparent transparent transparent;
	content:"";
	position: absolute;
	left: 45%;
}
.yamalubeKind .commonText + p {
	padding: 15px 20px;
	background: #f00;
	color: #fff;
	display: inline-block;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
}
.yamalubeKind dl {
	margin-top: 25px;
}
.yamalubeKind dt {
	width: 7em;
	margin-bottom: 20px;
	padding: 7px 13px;
	background: #d90012;
	color: #fff;
	float: left;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
}
.yamalubeKind dd + dt {
	background: #d94800;
}
.yamalubeKind dd + dt + dd + dt {
	background: #d99100;
}
.yamalubeKind dd {
	margin: 0 0 22px 9em;
	font-size: 16px;
	font-size: 1.6rem;
}
.yamalubeKind ul {
	display: flex;
	align-items: center;
	margin: 25px 0 15px;
}
.yamalubeKind li {
	display: flex;
	align-items: center;
	width: calc(50% - 10px);
}
.yamalubeKind li + li {
	margin-left: 20px;
}
.yamalubeKind li b {
	width: 114px;
	margin-right: 20px;
	padding: 10px;
	background: #003f96;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
}
.yamalubeKind li p {
	flex: 1;
	margin: 0;
	color: #003f96;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.2;
}
.yamalubeKind li p span {
	display: inline-block;
}
.yamalubeKind .commonNotes {
	text-align: center;
}
.yamalubeKind .textCenter {
	text-align: center;
}

@media screen and (max-width: 768px) {
	.commonTitleH3 {
		text-align: left;
	}
	.yamalubeKind h3 {
		padding-right: 10px;
		padding-left: 10px;
	}
	.yamalubeKind ul {
		display: block;
		align-items: start;
	}
	.yamalubeKind li {
		width: 100%;
		align-items: start;
	}
	.yamalubeKind li + li {
		margin: 20px 0 0;
	}
	.yamalubeKind li p {
		font-size: 1.6rem;
	}
	.yamalubeKind .floatRight {
		margin: 0 0 20px;
		float: none;
	}
}


/*==============================================*
 *  [ オイル教室 用語集 ] 
 *==============================================*/

.glossarylist-container {
	border-bottom: 1px solid #ddd;
}
.glossarylist-title {
	position: relative;
	font-size: 1.6rem;
	font-weight: bold;
	padding: 20px;
	text-align: left;
	z-index: +1;
	cursor: pointer;
	transition-duration: 0.2s;
}

.glossarylist-title::before, 
.glossarylist-title::after {
	position: absolute;
	top: calc(50% - 2px);
	right: 10px;
	width: 20px;
	height: 2px;
	background: #CC1533;
	content: "";
}
.glossarylist-title::after {
	display: block;
	transform: rotate(90deg);
}
.glossarylist-title.open::after {
	display: none;
}

.glossarylist-title p::before {
	content: "●";
	color: #CC1533;
}
.glossarylist-title:hover {
	opacity: 0.8;
}
.glossarylist-title span {
	padding-left: 10px;
}

.glossarylist-title.open {
	border-bottom: none;
}
.glossarylist-title.open span {
	color: #CC1533;
}
.glossarylist-inner {
	display: none;
	padding: 0 20px 20px;
	box-sizing: border-box;
}
.gl-inner-wraper {
	height: auto;
}
p.gl-txt {
	margin: 0;
	line-height: 3.0rem;
	padding-left: 2.6rem;
}

.gl-table {
	width: 100%;
	font-size: 1.6rem;
	margin: 20px 0;
}
.gl-table tr {
	border-bottom: 1px solid #707070;
}
.gl-table th {
	text-align: center;
	background-color: #E5E5E5;
	padding: 20px 40px;
}
.gl-table td {
	background-color: #fff;
	padding: 20px 40px;
}

@media screen and (max-width: 768px) {
	.glossarylist-title {
		font-size: 1.4rem;
	}
	p.gl-txt {
		font-size: 1.4rem;
		padding-left: 2.4rem;
	}
	.gl-table {
		font-size: 1.4rem;
	}
	.gl-table th {
		padding: 20px;
	}
	.gl-table td {
		padding: 20px;
	}
}


/*==============================================*
 *  [ 緑背景 ] 
 *==============================================*/

.greenbg {
	padding: 20px;
	background-color: rgba(0, 175, 134, 0.1);
}

.greenbg-title {
	font-size: 1.6rem;
	margin-bottom: 25px;
}

.greenbg ul {
	font-size: 1.4rem;
}
.greenbg li {
	color: #CB123B;
	font-weight: bold;
	list-style: none;
	line-height: 3.0rem;
	margin-bottom: 20px;
}
.greenbg .list-disc {
	margin-left: 20px;
}
.greenbg .list-disc li {
	line-height: 1.0rem!important;
	list-style-type: disc!important;
}
.greenbg li:last-child {
	margin-bottom: 0;
}
.greenbg span {
	color: #333;
	font-weight: 400;
	padding-left: 1.0em;
}

@media screen and (max-width: 768px) {
	.greenbg-title {
		font-size: 1.4rem;
		margin-bottom: 20px;
	}
	.greenbg ul {
		font-size: 1.2rem;
	}
}


/*==============================================*
 *  [ コンテンツバナー ] 
 *==============================================*/

.bunnerArea {
	background-color: #ddd;
	padding: 20px;
	margin-bottom: 50px;
}

.bunnerArea ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.bunnerArea li {
	width: calc((940px - 20px) / 3);
}

.bunnerArea li img {
	width: 100%;
}

@media screen and (max-width: 768px) {
	.bunnerArea {
		margin: 0 -10px 50px;
	}
	.bunnerArea li {
		width: 100%;
	}
}


/*==============================================*
 *  [ TOPへ戻る ] 
 *==============================================*/

.returntop {
	text-align: center;
	margin-bottom: 100px;
	height: 60px;
}

.returntop a {
	color: #333;
	font-size: 2.0rem;
	border: 3px solid #F5F5F5;
	background-color: #fff;
	padding: 17px 32px 17px 26px;
}
.returntop a:hover {
	border: 3px solid #F5F5F5!important;
}

.returntop a b::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 1.2rem;
	height: 1.2rem;
	border: 3px solid #CC1533;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateX(25%) rotate(-135deg);
	margin-right: 30px;
}

@media screen and (max-width: 768px) {
	.returntop a {
		height: 40px;
		font-size: 1.6rem;
	}
	.longbtn a b::before {
		margin-right: 10px;
	}
}