@charset "utf-8";

/* common
-----------------------------------------------*/
.main_contents{
	width:min(144rem,1440px);
	margin:0 auto;
	font-size:min(1.6rem,16px);
	line-height:1.7;
}
.main_contents section{
	padding:6em 0;
}
.main_contents .inner{
	width:min(115.2rem,1152px);
	margin:0 auto;
}
.main_contents h2{
	line-height: 1.3;
	letter-spacing: 0.04em;
	margin:0;
}
.main_contents h2 sup{
	font-size:0.4em;
	top:-1.3em;
}
/*flex*/
.main_contents .flex_content{
	display:flex;
	justify-content: space-between;
	align-items: center;
}
.main_contents .flex_content.reverse{
	flex-direction: row-reverse;
}
.main_contents .flex_content > div{
	width:50%;
}
.main_contents .flex_content .text{
	padding:0 4% 0 6%;
}
.main_contents .flex_content.reverse .text{
	padding:0 6% 0 5%;
}
/*リンクボタン*/
.main_contents .link{
	text-align: center
}
.main_contents .link_btn{
	display:inline-flex;
	align-items: center;
	border:1px solid ;
	padding:0.75em 2em;
	border-radius:2.5em;
	transition: 0.4s;
}

.main_contents .link_btn::after{
	content:"";
	display:inline-block;
	margin-left:0.75em;
	width:1em;
	height:1em;
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 10" style="height: auto;"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M.65 5H11m0 0L6.565 9M11 5 6.565 1"></path></svg>');
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center;
	transition:0.4s;
}
/*円*/
.main_contents .circle{
	width:8.5em;
	aspect-ratio:1;
	border:1px solid;
	border-radius:50%;
	display:flex;
	justify-content: center;
	align-items: center;
	margin:auto;
	text-align: center;
}
/*margin*/
.main_contents .mt-1em {margin-top:1em !important}
.main_contents .mt-2em {margin-top:2em !important}
.main_contents .mt-3em {margin-top:3em !important}
.main_contents .mt-4em {margin-top:4em !important}
.main_contents .mt-5em {margin-top:5em !important}
.main_contents .mt-6em {margin-top:6em !important}
.main_contents .mt-7em {margin-top:7em !important}
.main_contents .mt-8em {margin-top:8em !important}

@media screen and (min-width: 769px) {
	.main_contents .link_btn:hover{
		background-color: #eee;
	}
	.main_contents .link_btn:hover::after{
		transform:translateX(0.3em);
	}
}

@media screen and (max-width: 768px) {
	.main_contents{
		width:100%;
		font-size:1.5rem;
	}
	.main_contents section{
		padding:5rem 0;
	}
	.main_contents .inner{
		width:32.4rem;
	}
	.main_contents h2{
		font-size:2.2rem;
		text-align: center;
	}

	/*flex*/
	.main_contents .flex_content{
		flex-direction:column;
	}
	.main_contents .flex_content.reverse{
		flex-direction: column;
	}
	.main_contents .flex_content > div{
		width:100%;
	}
	.main_contents .flex_content .text{
		padding:0 5%;
	}
	.main_contents .flex_content.reverse .text{
		padding:0 5%;
	}
	.main_contents .flex_content .image{
		margin-top:4rem;
		padding:0 5%;
	}
	/*リンクボタン*/
	.main_contents .link_btn{
		padding:0.75em 0;
		border-radius:2.5em;
		font-size:1.4rem;
		width:90%;
		justify-content: center
	}
	.main_contents .link_btn::after{
		margin-left:0.5em;
	}
	/*円*/
	.main_contents .circle{
		width:auto;
		aspect-ratio:auto;
		border-radius:0.8rem;
		padding:1rem 0;
		font-size:1.4rem
	}
}

/* Main Visual
-----------------------------------------------*/
.main_contents #mv{
	width:min(115.2rem,1152px);
	margin:2em auto 0;
}

@media screen and (max-width: 768px) {
	.main_contents #mv{
		margin-top:0;
		width:100%;
	}
}

/* #compact
-----------------------------------------------*/
.main_contents #compact {
	background-color:#F1F1F3;
}
.main_contents #compact .circle{
	width:9.5em;
}
@media screen and (max-width: 768px) {
	.main_contents #compact .circle{
		width:auto;
	}
}

/* #comfortable
-----------------------------------------------*/
.main_contents #comfortable {}

/* #cradle
-----------------------------------------------*/
.main_contents #cradle {
	background-color: #000;
	color:#fff;
}

/* #various
-----------------------------------------------*/
.main_contents #various {}

/* #battery
-----------------------------------------------*/
.main_contents #battery {
	background-color:#F1F1F3;
}

/* #connection
-----------------------------------------------*/
.main_contents #connection {}

/* 注釈
-----------------------------------------------*/
.main_contents .notes li{
	font-size: 0.875em;
	color:#666;
	text-indent:-1.8em;
	padding-left:1.8em;
}