@charset "utf-8";

section:not(section.mv,section.inquiry){
	padding: 70px 0 50px;
}
/* メインビュー */

section.mv img{
	width: min(100% ,800px);
	margin: 0 auto;
	height: auto;
}
h1{
	font-size: clamp(25px, (100vw - 600px) * 6 / 600 + 30px, 35px);
	padding: 20px 10px;
	font-weight: 550;
}
/* 見出し */
h2{
	font-size: clamp(18px, (100vw - 600px) * 6 / 600 + 24px, 30px);
	font-weight: 550;
	padding: 0 20px 10px;
	margin: 0 0 30px;
	border-left: 5px solid var(--mainColor);
	width: fit-content;
	line-height: 1.5em;
}
h3{
	color: var(--mainColor);
	font-weight: 550;
	margin-bottom: 10px;
	line-height: 1.3em;
}
/* ナビゲーション */
main nav ul {
	width: 100%;
}
.menuList li:first-child{
	border-left: none;
}
.menuList li:last-child{
	border-right: none;
}
/* 主な特長 */
#features ul.flexBox{
	justify-content: center;
	gap: 10px;
	flex-direction: column;
}
#features ul.flexBox >li{
	border: 2px solid var(--mainColor);
	border-radius: 5px;
	flex: 1;
	padding: 20px 10px;
}
/* 運用の流れ */
.operationContents{
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}
.operationContents li{
	border: 2px solid var(--mainColor);
	border-radius: 5px;
	width: calc(50% - 10px);
}
.operationNumbersBox{
	position: relative;
	width: 70px;
	height: 70px;
}
.operationContents li span{
	position: absolute;
	top: 0;
	left: 0;
	border-top: 35px solid var(--mainColor);
	border-right: 35px solid transparent;
	border-bottom: 35px solid transparent;
	border-left: 35px solid var(--mainColor);
}
.operationNumbers{
	position: absolute;
	top: calc(50% - 26px);
	left: calc(50% - 20px);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}
.operationContents li .flexBox{
	flex-direction: column;
	margin-top: 10px;
	padding: 0 10px 20px;
}
.operationContents li .flexBox p{
	flex-basis: 100px;
}
/* オプション */
.optionListSection{
	padding: 20px;
	border-radius: 10px;
	background: var(--lightColor1);
	gap: 20px;
	align-items: center;
}
.optionSummary{
	margin: 20px auto;
	padding: 20px 0;
	border-bottom: 1px dashed var(--mainColor);
	border-top: 1px dashed var(--mainColor);
}
.optionListBox{
	border-radius: 5px;
	border: 3px solid var(--mainColor);
	flex: 1;
}
.titleBox{
	background: var(--mainColor);
	gap: 10px;
	padding: 5px 10px;
}
.titleBox div{
	width: min(100% ,40px);
}
.optionListBox h5{
	color: #fff;
	font-weight: 600;
	display: flex;
	align-items: center;
}
.optionList{
	list-style-type: disc;
	padding: 0 10px 10px 30px;
	background: #fff;
}
.optionList li{
	padding: 10px 0 0;
}
.optionImg{
	width: min(100% ,400px);
}
#option h4{
	width: fit-content;
	font-weight: 700;
	padding: 0 20px 5px;
	margin: 40px 0 20px;
}
@media (max-width: 900px){
	.optionListSection{
		flex-direction: column;
	}
}
@media (max-width: 630px){
	.operationContents li{
		flex: none;
		width: min(100% ,500px);
	}
}