@charset "UTF-8";
html{
	font-size: 62.5%;
	margin: 0;
	padding: 0;
}
body{
	font-size: 1.5em;
	font-weight: var(--fw-medium);
	margin: 0 auto;
}
header,footer,section,aside,nav,article,main{
	display: block;
}
h1, h2, h3, h4, h5, h6, figure,
p, ul, ol, li, dl, dt, dd{
	margin: 0;
	padding: 0;
}
ul li, ol li{
	color: #000;
	list-style: none;
}
a, a:visited, a:hover, a:link{
	color: #000;
	text-decoration: none;
}
img {
	border: none;
	margin: 0;
	padding: 0;
	vertical-align: top;
	width: 100%;
}
*, *::before, *::after{
	box-sizing: border-box;
}
/* button初期化 */
button{
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: none;
	font-family: inherit;
	margin: 0;
	outline: none;
	padding: 0;
}
@media (any-hover: hover){
	button:hover{
		cursor: pointer;
	}
}
/* 表示切替 */
.jsSwitch{
	visibility: hidden;
}
.sp{
	display: none;
}
/*
	base_setting
-----------------------------------------------------------------------------------------------*/
/* 変数
========================================*/
:root{
	/* color */
	--c-accent: #1A82D7;
	--c-accent-rgb: 26, 130, 215;
	--c-ippan: #27BEAC;
	--c-kanrei: #3493EB;
	--c-gray: #747E87;
	--bd-gray: #BDCAD5;
	--bg-blue: #F1F4F8;
	/* weight */
	--fw-medium: 500;
	--fw-bold: 700;
	/* border-radius */
	--bdrs5: 5px;
	--bdrs10: 10px;
	/* transition */
	--trs-time: .3s;
	/* width */
	--cts-w: 1265px;
}
/*
	common
-----------------------------------------------------------------------------------------------*/
/* box
============================== */
#wrapper{
	font-family: "Zen Kaku Gothic New", sans-serif;
}
.cts-area{
	margin: 0 auto;
	padding: 80px 30px 0;
	position: relative;
	text-align: center;
	width: var(--cts-w);
}
.cts-area:last-of-type{
	padding-bottom: 0;
}
[class$="-picture"]{
	display: inline-block;
}
/* ボタン
============================== */
.btn-base{
	align-items: center;
	border: 1px solid #000;
	display: flex;
	font-size: 1.5rem;
	height: 65px;
	justify-content: center;
	margin: 0 auto;
	padding: 20px;
	position: relative;
	transition: var(--trs-time);
	width: 255px;
}
/* 矢印 */
.arrow{
	position: relative;
}
.arrow::before,
.arrow::after{
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
}
.arrow::before{
	background: #000;
	height: 1px;
	width: 13px;
}
.arrow::after{
	border-right: 1px solid #000;
	border-top: 1px solid #000;
	height: 10px;
	transform: translate(0, -45%) rotate(45deg);
	width: 10px;
}
@media (any-hover: hover){
	.btn-base:hover{
		color: var(--c-accent);
		transition: var(--trs-time);
	}
	:hover .arrow::before,
	:hover .arrow::after{
		transition: var(--trs-time);
	}
}
/* テキストリンク
============================== */
.txtlink,
a.txtlink{
	color: #808080;
	display: inline-block;
	font-size: 1.2rem;
	font-weight: var(--fw-medium);
	transition: var(--trs-time);
}
.txtlink:has(.arrow),
a.txtlink:has(.arrow){
	padding-right: 20px;
}
.txtlink .arrow::before,
.txtlink .arrow::after{
	right: -18px;
}
.txtlink .arrow::before{
	background: #808080;
}
.txtlink .arrow::after{
	border-right: 1px solid #808080;
	border-top: 1px solid #808080;
}
@media (any-hover: hover){
	.txtlink:hover,
	a.txtlink:hover{
		color: var(--c-accent);
		text-decoration: none;
		transition: var(--trs-time);
	}
	.txtlink:hover .arrow::before,
	.txtlink:hover .arrow::after{
		right: -23px;
	}
	.txtlink:hover .arrow::before{
		background: var(--c-accent);
	}
	.txtlink:hover .arrow::after{
		border-color: var(--c-accent);
	}
}
/* リード文
============================== */
.lead-head{
	font-size: 1.7rem;
	font-weight: var(--fw-medium);
	line-height: 1.8;
	margin-bottom: 32px;
}
/* 文字選択
============================== */
::selection {
  background: rgba(var(--c-accent-rgb), .6);
}
/*
	一般／寒冷　選択ボタン
-----------------------------------------------------------------------------------------------*/
.area-list{
	display: flex;
	gap: 35px;
}
[class^="area-btn-"]{
	align-items: center;
	background: #fff;
	border-radius: 100px;
	display: flex;
	font-size: 2.0rem;
	font-weight: var(--fw-medium);
	height: 200px;
	justify-content: center;
	letter-spacing: .1rem;
	transition: var(--trs-time);
	width: 200px;
}
.area-btn-ippan{
	border: 1px solid var(--c-ippan);
}
.area-btn-kanrei{
	border: 1px solid var(--c-kanrei);
}
@media (any-hover: hover){
	[class^="area-btn-"]:hover{
		transition: var(--trs-time);
	}
	.area-btn-ippan:hover{
		color: var(--c-ippan);
	}
	.area-btn-kanrei:hover{
		color: var(--c-kanrei);
	}
}
/*
	下層ページ（共通）
-----------------------------------------------------------------------------------------------*/
/* ページタイトル
========================================*/
#page-header{
	min-width: var(--cts-w);
}
.page-header-wrapper{
	align-items: center;
	background-color: var(--bg-blue);
	background-image: radial-gradient(circle, rgba(var(--c-accent-rgb), .06) 1.5px, transparent 1.5px);
	background-position: 0 0;
	background-size: 6px 6px;
	display: flex;
	height: 250px;
	justify-content: center;
	padding: 20px;
	position: relative;
}
/* 地域選択
============================== */
#page-area{
	align-items: center;
	display: flex;
	gap: 0 20px;
	left: 20px;
	position: absolute;
	top: 20px;
}
.area-radio{
	border: 1px solid #BDCAD5;
	border-radius: var(--bdrs5);
	display: inline-flex;
	justify-content: center;
	overflow: hidden;
}
.area-radio-box{
	height: 35px;
	width: 95px;
}
.area-radio-input{
	display: none;
}
.area-radio-label{
	align-items: center;
	background: #BDCAD5;
	color: rgba(255, 255, 255, .5);
	cursor: pointer;
	display: flex;
	font-size: 1.3rem;
	font-weight: var(--fw-bold);
	height: 100%;
	justify-content: center;
	transition: var(--trs-time);
	width: 100%;
}
.area-radio-input:checked + .area-radio-label{
	background: #fff;
	cursor: default;
	transition: none;
}
#radio01:checked + .area-radio-label{
	color: var(--c-ippan);
}
#radio02:checked + .area-radio-label{
	color: var(--c-kanrei);
}
@media (any-hover: hover){
	.area-radio-label:hover{
		color: rgba(255, 255, 255, .9);
		transition: var(--trs-time);
	}
}
/* 見出し
========================================*/
.page-header-head{
	font-size: 3.0rem;
	font-weight: var(--fw-bold);
}
/* パンくず
========================================*/
.path-list{
	display: flex;
	gap: 34px;
	justify-content: end;
	margin-right: 14px;
}
.path-item{
	position: relative;
}
.path-item:not(:first-child)::before{
	border-right: 1px solid #A9B5BF;
	border-top: 1px solid #A9B5BF;
	content: '';
	height: 5px;
	left: -22px;
	position: absolute;
	top: 50%;
	transform: rotate(45deg);
	transform-origin: center;
	width: 5px;
}
.path-txt{
	color: #A9B5BF;
	display: inline-block;
	font-size: 1.0rem;
	font-weight: var(--fw-medium);
	transition: var(--trs-time);
}
@media (any-hover: hover){
	.path-link:hover .path-txt{
		color: var(--c-accent);
		text-decoration: underline;
		transition: var(--trs-time);
	}
}
/* リスト
========================================*/
.select-list{
	display: flex;
	flex-wrap: wrap;
	gap: 25px 32px;
}
.select-item{
	width: calc((100% - 96px)/4);
}
.select-link{
	display: flex;
	flex-direction: column;
}
.select-picture{
	aspect-ratio: 55 / 39;
	border: 1px solid #fff;
	border-radius: var(--bdrs5);
	overflow: hidden;
	position: relative;
	transition: border var(--trs-time);
	z-index: 1;
}
.select-picture > *{
	transition: var(--trs-time);
	width: 100%;
}
.select-tit{
	align-items: center;
	display: flex;
	font-size: 1.4rem;
	height: 40px;
	font-weight: var(--fw-medium);
	padding: 0 8px;
	position: relative;
	text-align: left;
	transition: var(--trs-time);
}
.select-tit::before{
	background: rgba(var(--c-accent-rgb), .07);
	background: var(--c-accent);
	border-radius:0 0  var(--bdrs5) var(--bdrs5);
	bottom: 0;
	content: '';
	height: 45px;
	left: 0;
	opacity: 0;
	position: absolute;
	transition: .4s ease-out;
	width: 0;
}
.select-link .arrow{
	width: 100%;
}
.select-link .arrow::before,
.select-link .arrow::after{
	right: 7px;
	top: 45%;
}
@media (any-hover: hover){
	.select-link:hover .select-picture{
		border: 1px solid var(--c-accent);
		transition: border var(--trs-time);
	}
	.select-link:hover .select-picture > *{
		transform: scale(1.06);
		transition: var(--trs-time);
	}
	.select-link:hover .select-tit{
		color: var(--c-accent);
		color: #fff;
		transition: var(--trs-time);
	}
	.select-link:hover .select-tit::before{
		opacity: 1;
		transition: .4s ease-out;
		width: 100%;
	}
	.select-link:hover .arrow::before,
	.select-link:hover .arrow::after{
		right: 2px;
	}
	.select-link:hover .arrow::before{
		background: #fff;
	}
	.select-link:hover .arrow::after{
		border-right: 1px solid #fff;
		border-top: 1px solid #fff;
	}
}
/* 一覧に戻るボタン
========================================*/
.btn-area{
	margin-top: 70px;
}
/* 特長
========================================*/
#merit{
	padding: 100px 30px 0;
	margin: 0 auto;
	width: var(--cts-w);
}
.merit-area{
	align-items: center;
	border: 1px solid #000;
	border-radius: var(--bdrs10);
	display: flex;
	flex-direction: row-reverse;
	gap: 23px;
	justify-content: space-between;
	margin-top: 20px;
	padding: 82px 0 50px;
	position: relative;
}
.merit-head{
	background: #fff;
	font-size: 3.7rem;
	font-weight: var(--fw-bold);
	left: 50%;
	line-height: 1.0;
	padding: 0 40px;
	position: absolute;
	text-align: center;
	top: -20px;
	transform: translate(-50%, 0);
}
.merit-list{
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	padding-right: 44px;
}
.merit-item{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 34px 0;
	text-align: center;
	width: calc(100%/2);
}
.merit-item:first-child{
	border-bottom: 1px solid #ECEEF1;
	border-right: 1px solid #ECEEF1;
}
.merit-item:nth-child(2){
	border-bottom: 1px solid #ECEEF1;
}
.merit-item:nth-child(3){
	border-right: 1px solid #ECEEF1;
}
.merit-item:nth-child(odd){
	padding-inline: 10px 22px;
}
.merit-item:nth-child(even){
	padding-inline: 22px 10px;
}
.merit-svg{
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 53px;
}
[src*="ico_merit01"]{
	width: 57px;
}
[src*="ico_merit02"]{
	width: 41px;
}
[src*="ico_merit03"]{
	width: 62px;
}
[src*="ico_merit04"]{
	width: 38px;
}
.merit-tit{
	font-size: 1.7rem;
	font-weight: var(--fw-bold);
}
.merit-txt{
	color: #3A3A3A;
	font-size: 1.2rem;
	font-weight: var(--fw-medium);
	line-height: 1.7;
}
.merit-img{
	flex: 0 0 52%;
}
.merit-picture{
	max-width: 623px;
	width: 100%;
}
.merit-picture img{
	width: 100%;
	height: auto;
	display: block;
}
@media screen and (max-width:750px){
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	br.sp{
		display: inline-block;
	}
	/*
		base_setting
	-----------------------------------------------------------------------------------------------*/
	#footerArea{
		margin-top: 50px!important;
	}
	/* 変数
	========================================*/
	:root{
		/* border-radius */
		--bdrs5: 3px;
		--bdrs10: 8px;
		/* width */
		--cts-w: 100%;
		--max-w: 500px;
	}
	/*
		common
	-----------------------------------------------------------------------------------------------*/
	/* box
	============================== */
	.cts-area{
		max-width: var(--max-w);
		padding: 60px 25px 0;
	}
	/* ボタン
	============================== */
	.btn-base{
		font-size: 1.3rem;
		height: 60px;
		max-width: 270px;
		padding: 20px;
		width: 70%;
	}
	/* 矢印 */
	.arrow::before{
		width: 10px;
	}
	.arrow::after{
		height: 8px;
		width: 8px;
	}
	/* テキストリンク
	============================== */
	.txtlink,
	a.txtlink{
		font-size: 1.1rem;
	}
	.txtlink:has(.arrow),
	a.txtlink:has(.arrow){
		padding-right: 20px;
	}
	.txtlink .arrow::before{
		right: -19px;
	}
	.txtlink .arrow::after{
		right: -18px;
	}
	/* リード文
	============================== */
	.lead-head{
		font-size: 1.3rem;
		line-height: 1.6;
		margin-bottom: 18px;
	}
	/*
		一般／寒冷　選択ボタン
	-----------------------------------------------------------------------------------------------*/
	.area-list{
		gap: 12px;
	}
	.area-item{
		aspect-ratio: 1 / 1;
		border-radius: 100%;
		overflow: hidden;
		width: calc((100% - 12px)/2);
	}
	[class^="area-btn-"]{
		aspect-ratio: 1 / 1;
		border-radius: 100%;
		font-size: 1.7rem;
		height: 100%;
		width: 100%;
	}
	/*
		下層ページ（共通）
	-----------------------------------------------------------------------------------------------*/
	/* ページタイトル
	========================================*/
	.page-header-wrapper{
		align-items: start;
		flex-direction: column;
		height: auto;
		justify-content: start;
		padding: 20px 25px;
	}
	/* 地域選択
	============================== */
	#page-area{
		gap: 0 15px;
		margin-bottom: 10px;
		position: static;
	}
	.area-radio-box{
		height: 34px;
		width: 78px;
	}
	.area-radio-label{
		font-size: 1.2rem;
	}
	/* 見出し
	========================================*/
	.page-header-head{
		align-items: center;
		display: flex;
		font-size: 2.3rem;
		justify-content: center;
		line-height: 1.3;
		min-height: 90px;
		padding: 12px 0;
		text-align: center;
		width: 100%;
	}
	/* パンくず
	========================================*/
	#path{
		display: none;
	}
	/* リスト
	========================================*/
	.select-list{
		gap: 5px 15px;
	}
	.select-item{
		width: calc((100% - 15px)/2);
	}
	.select-tit{
		font-size: 1.2rem;
		height: 28px;
		padding: 0 3px;
	}
	.select-tit::before{
		background: rgba(var(--c-accent-rgb), .07);
		border-radius:0 0  var(--bdrs5) var(--bdrs5);
		bottom: 0;
		content: '';
		height: 45px;
		left: 0;
		position: absolute;
		transition: var(--trs-time);
		width: 0;
	}
	.select-link .arrow{
		width: 100%;
	}
	.select-link .arrow::before,
	.select-link .arrow::after{
		right: 5px;
		top: 45%;
	}
	.select-link .arrow::before{
		right: 4px;
	}
	/* 一覧に戻るボタン
	========================================*/
	.btn-area{
		margin-top: 34px;
	}
	/* 特長
	========================================*/
	#merit{
		max-width: var(--max-w);
		padding: 60px 30px 0;
	}
	.merit-area{
		flex-direction: column;
		gap: 16px;
		justify-content: center;
		margin-top: 23px;
		padding: 42px 0 20px;
	}
	.merit-head{
		font-size: 2.4rem;
		line-height: 1.2;
		padding: 0 10px;
		top: -27px;
		width: 86%;
	}
	.merit-list{
		flex: 1;
		padding-inline: 20px;
	}
	.merit-item{
		gap: 5px;
		padding: 10px 0 15px;
	}
	.merit-item:nth-child(odd){
		padding-inline: 0 16px;
	}
	.merit-item:nth-child(even){
		padding-inline: 16px 0;
	}
	.merit-svg{
		min-height: 43px;
	}
	[src*="ico_merit01"]{
		width: 43px;
	}
	[src*="ico_merit02"]{
		width: 28px;
	}
	[src*="ico_merit03"]{
		width: 42px;
	}
	[src*="ico_merit04"]{
		width: 30px;
	}
	.merit-tit{
		align-items: center;
		display: flex;
		font-size: 1.3rem;
		justify-content: center;
		line-height: 1.3;
		min-height: 34px;
	}
	.merit-txt{
		font-size: 1.0rem;
		line-height: 1.4;
	}
	.merit-img{
		flex: none;
	}
	.merit-picture{
		max-width: none;
		width: calc(100% - 20px);
	}
}