@charset "shift_jis"; 

/*********************************************************
共通設定
*********************************************************/

:root {
}


/*
見出し
*********************************************************/

h1{}/*logo*/
/*mainImg*/
h2{
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
	text-align:center;
	color:var(--pink);
	font-size: clamp(24px, 3vw, 40px);/*最小サイズ, 推奨値, 最大サイズ*/
	line-height:1.3em;
	font-weight:bold;
	}
h2.h2cms a{
	color:var(--pink);
	text-decoration:none;
	pointer-events: none;
	}

h3{
	position:relative;
	text-align:center;
	color:var(--brown);
	font-size: clamp(18px, 3vw, 36px);/*最小サイズ, 推奨値, 最大サイズ*/
	line-height:1.5em;
	font-weight:bold;
	margin-bottom:20px;
	z-index:1;
	}
.h3ico{
	display:block;
	max-width:50px;
	margin:auto;
	text-align:center;
	color:var(--pink);
	font-size: clamp(26px, 3vw, 40px);/*最小サイズ, 推奨値, 最大サイズ*/
	line-height:1.5em;
	}
.h3en{
	display:block;
	color:var(--pink);
	font-size:0.7em;
	line-height:1.5em;
	font-weight:400;
	}
h4{
	color:var(--pink);
	font-weight:bold;
	font-size:1.2em;
	border-bottom:var(--pink) solid 2px;
	padding-bottom:10px;
	margin-bottom:10px;
	}
.h4date{
	font-size:0.7em;
	font-weight:400;
	color:#333;
	}
h5{
	border-left:var(--pink) solid 4px;
	padding:5px 5px 5px 14px;
	color:var(--pink);
	font-weight:bold;
	margin-bottom:10px;
	}

@media only screen and (min-width : 600px){
	.h3ico{
		max-width:70px;
		}
	h4{ margin-bottom:15px;}

}
@media only screen and (min-width : 1025px){
	h3{ margin-bottom:30px;}
	h4{ margin-bottom:20px;}
	h5{ margin-bottom:20px;}
}
/*IE*/
@media all and (-ms-high-contrast:none){
}


/*
共通-コンテンツ
*********************************************************/

.contents{
	background-color:#fff;
	padding:20px 0 30px;
	}
.contents.bgGrayF7{
	background-color:#f7f7f7;
	}
.cosmosBg{
	background-image:url(../images/common/serviceBg.png);
	background-position: center center;
	background-repeat:no-repeat;
	}
.whiteWrap{
	background-color:#fff;
	border-radius:20px;
	padding:10px;
	overflow:hidden;
  box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.3);
	}
/*TABLET*/
@media only screen and (min-width : 600px){
	.contents{padding:30px 0 40px;}
	.whiteWrap{
		padding:20px;
		}
}
/*PC*/
@media only screen and (min-width : 1025px){
	.contents{padding:60px 0 80px;}
	.whiteWrap{
		padding:40px;
		}
}



/**********************/
.secondImg{
	background:url(../images/common/h2bg.jpg?ver=260910) center center no-repeat;
	background-size:cover;
	padding:3em 1em;
	text-shadow: 5px 5px 8px rgba(255,255,255,1), -5px 5px 8px rgba(255,255,255,1), 5px -5px 8px rgba(255,255,255,1), -5px -5px 8px rgba(255,255,255,1);
	}
@media only screen and (min-width : 600px){
	.secondImg{
		padding:6em 1em;
		}
}
@media only screen and (min-width : 1025px){
	.secondImg{
		padding:9em 1em;
		}
}
/*
subMenu
***********************************************************/
.subMenu{
	position:relative;
	z-index:1;
	display:flex;
	flex-wrap: wrap;
	border-top:var(--pink) solid 2px;
	border-bottom:var(--pink) solid 2px;
	padding:10px 0;
	gap:5px 2%;
	}
.subMenu p{
		}
.subMenu a{
	text-decoration:none;
	color:#333;
		}
.subMenu a:hover,
.subMenu a:active{
	color:var(--pink);
	}

.subMenu a i{
	color:var(--pink);
	font-size:0.8em;
	margin-right:3px;
	}
@media only screen and (min-width : 1025px){
	.subMenu{
		align-items: stretch;
		justify-content: space-between;
		padding:20px 0px;
		gap:10px;
		}
	.subMenu p{
		 flex: 1 0 10%;
		}
	.subMenu a i{
		margin-right:1px;
		margin-left:-7px;}
	.subMenu a{
		display: flex;
		align-items: center;
		justify-content: center;
		position:relative;
		height:100%;
		text-align:center;
		color:#333;
		text-decoration:none;
		font-weight:500;
		font-size:0.9em;
		line-height:1.3em;
		border:#cccccc solid 1px;
		padding:8px 2px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		behavior: url(../css/border-radius.htc); /* IE */
		background:-webkit-gradient(
			linear, left top, left bottom, 
			from(#ffffff),
			to(#f7f7f7));
		background:-webkit-linear-gradient(top, #ffffff 0% , #f7f7f7 100%);
		background:-moz-linear-gradient   (top, #ffffff 0% , #f7f7f7 100%);
		background:-o-linear-gradient     (top, #ffffff 0% , #f7f7f7 100%);
		background:-ms-linear-gradient(top, #ffffff, #f7f7f7); /* IE */
		background:linear-gradient        (top, #ffffff 0% , #f7f7f7 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(
			GradientType=0,startColorstr='#FFffffff', endColorstr='#FFf7f7f7');/*IE10用（色の頭にFFが必要）*/
		transition: 0.1s all ease 0s;
		}
	.subMenu a:hover,
	.subMenu a:active{
		background:#f7f7f7;
		}


}


/*ボタン*/

.btn a{
	display:block;
	background-color:var(--pink);
	color:#fff;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	padding:10px;
	border-radius:20px;
	}
.btn a:hover,
.btn a:active{
	background-color:var(--pink-on);
	}
.btn a i{
	display:block;
	text-align:center;
	margin:auto;
	font-size:2.6em;
	line-height:1.2em;
	}


/*<p class="btnS"><a href="">コンセプト <i class="fa-regular fa-circle-arrow-right"></i></a></p>*/
.btnS a{
	display:block;
	width:80%;
	max-width:400px;
	margin-left:auto;
	margin-right:auto;
	background-color:var(--pink);
	color:#fff;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	padding:10px;
	border-radius:50px;
	}
.btnS a:hover,
.btnS a:active{
	background-color:var(--pink-on);
	}




/*
ヘッダー
*********************************************************/
#header{
	clear:both;
	float:none;
	padding:8px 0;
	padding-right:50px;
	background:#fff;
	}
.logo img{max-height:44px;}

@media only screen and (min-width : 600px){
	#header{
		padding:10px 0;
		padding-right:50px;
		}
}

@media only screen and (min-width : 1200px){
	#header{
		position:fixed;
		top:0;
		left:0;
		width:100%;
		padding:10px 0;
		height:118px;
		z-index:100;
	box-shadow: 0 0 3px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 0 3px 0px rgba(0,0,0,0.3);
	-o-box-shadow: 0 0 3px 0px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 0 3px 0px rgba(0,0,0,0.3);
		}
	.wrapper{
		padding-top:118px;
		}
	#header > div{
		display:flex;
		align-items:center;
		}
	p.logo{
		margin-right:auto;
		}
	nav{margin-left:auto;}
	.logo img{max-height:64px;}
}
/*IE*/
@media all and (-ms-high-contrast:none){
}



/*
フッター
*********************************************************/
.f-inq{
	background:inherit;
	}
.f-inq .whiteWrap{
	background-color:rgba(255,255,255,0.8);
	}


#footer{
	width:100%;
	clear:both;
	float:none;
	background:var(--l-pink);
	}
#footer .inner{
	display:flex;
	flex-direction: column;
	gap:10px;
	text-align:center;
	}
#footer .logo{ margin:0;}
#footer .logo img{ margin:auto;}
#f-bnr{
	background:#fff;
	padding:20px;
	}
#f-bnr p{
	border:#ccc solid 1px;
	}
#f-bnr img{
	margin:auto;
	}
.f-insta img{
	max-height: 64px;
	margin:auto;
	}

.copyright{
	background:var(--pink);
	padding:8px 0;
	font-size:0.6em;
	line-height:1;
	color:#ffffff;
	text-align:center;
	}

@media only screen and (min-width : 1025px){
	#footer .inner{
	display:flex;
	align-items:center;
	justify-content: center;
	flex-direction: row;
	gap:30px;
	font-size:0.9em;
	text-align:left;
	}
	#f-bnr{
		padding:40px;
		}
}



/*********************************************************
index
*/

/*コンセプト*/
#topConcept{
	text-align:center;
	}
.chara1{
	position:absolute;
	right:-2%;
	top:10%;
	width:25%;
	max-width:160px;
	z-index:1;
	}
.chara2{
	position:absolute;
	left:-2%;
	bottom:20%;
	width:25%;
	max-width:160px;
	z-index:1;
	}
.chara1 img{
	transform: scale(-1, 1);
	}
.topConceptTxt{
	position:relative;
	z-index:2;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	text-shadow: 1px 1px 1px #ffffff;
	font-size: clamp(13px, 2vw, 18px);/*最小サイズ, 推奨値, 最大サイズ*/
	line-height:1.5em;
	text-align:center;
	}

/*空床*/
.available{}
.available h4{
	padding-bottom:0;
	border:none;
	margin-bottom:5px;
	}

.available dl{
	display:flex;
	border:var(--pink) solid 1px;
	text-align:center;
	background:#fff;
	}
.available dl > *{
	flex-shrink: 0;
	width:calc(100% / 6);
  display: flex;
  align-items: center;
  justify-content: center;
	padding:10px 2px;
	font-size:0.9em;
	}
.available dt{
	background-color:var(--pink);
	color:#fff;
	}

@media only screen and (min-width : 1025px){
	.column1-2.available{
		gap: 20px 2%;
		}
	.column1-2.available > *{
		width: calc((100% - 2%) / 2);
		}
}

/*サービス*/
#service{
	background:#fff url(../images/common/serviceBg.png) center center no-repeat;
	}

.serviceList{}


.serviceList a{
	display:block;
	background-color:var(--l-pink);
	border-radius:10px;
	overflow:hidden;
	text-align:center;
	text-decoration:none;
	font-weight:bold;
	color:var(--pink);
	box-shadow: 0 5px 0 0 rgba(232,93,96,0.5);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	}
.serviceList a:hover,
.serviceList a:active{
	color:var(--pink-on);
	transform: translateY(3px);
	box-shadow: 0 2px 0 0 rgba(232,93,96,0.16);
	}
.serviceListImg{}
.serviceListTxt{
	font-size: clamp(13px, 3vw, 18px);/*最小サイズ, 推奨値, 最大サイズ*/
	padding:1em 2px;
	}
.serviceListTxt2{
	padding:0 15px 15px;
	font-weight:400;
	color:#222;
	text-align:left;
	font-size:0.86em;
	line-height:1.5em;
	}
/*Pickup*/
.topPickup{
	background-color:var(--l-pink);
	border-radius:10px;
	overflow:hidden;
	padding: clamp(10px, 3vw, 30px);
	}
.topPickup a{
	display:block;
	border:var(--pink) solid 1px;
	border-radius:10px;
	overflow:hidden;
	text-decoration:none;
	text-align:center;
	background:#fff;
	color:var(--brown);
	font-weight:bold;
	font-size: clamp(13px, 3vw, 18px);/*最小サイズ, 推奨値, 最大サイズ*/
	padding:1em 2px;
	box-shadow: 0 5px 0 0 rgba(232,93,96,0.16);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	}
.topPickup a:hover,
.topPickup a:active{
	color:var(--pink-on);
	transform: translateY(3px);
	box-shadow: 0 2px 0 0 rgba(232,93,96,0.16);
	}
.topPickupIco{
	width: clamp(30px, 3vw, 50px);/*最小サイズ, 推奨値, 最大サイズ*/
	height: clamp(30px, 3vw, 50px);/*最小サイズ, 推奨値, 最大サイズ*/
	margin:0 auto 10px;
	text-align:center;
	}

.topPickupIco i{
	color:var(--pink);
	font-size:2em;
	line-height:1.3em;
	text-align:center;
	}


/*NEWS*/
#news{}
#news h3{}
@media only screen and (min-width : 1025px){
	#news h3{
		display:flex;
		align-items:center;
		justify-content: center;
		gap: clamp(5px, 2vw, 10px);
		font-size: clamp(18px, 3vw, 22px);/*最小サイズ, 推奨値, 最大サイズ*/
		line-height:1.3em;
		}
	#news .h3ico{ margin:0;}

}

.newsScroll{
	max-height:510px;
	overflow-y:auto;
	}
	.newsScroll::-webkit-scrollbar {
    width: 5px;
		}
	.newsScroll::-webkit-scrollbar-track {
    background-color:#ddd;
		}
 	.newsScroll::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		background-color:#ccc;
		}
#cms .newsScroll{
	max-height:1500px;
	}

.news{}
.news dl{
	display:flex;
	align-items:flex-start;
	flex-wrap: wrap;
	padding:20px 10px;
	gap:5px;
	border-bottom:#ccc solid 1px;
	}
.news .newsDate{
	flex-shrink: 0;
	width:83px;
	padding:2px 0;
	margin-right:auto;
	}
.news .newsCate{
	flex-shrink: 0;
	width:160px;
	padding:2px;
	background:#fff;
	font-size:0.9em;
	border:#ccc solid 1px;
	text-align:center;
	margin-left:auto;
	border-radius:50px;
	}
	.newsCate.newsCate1{border-color:var(--pink); background-color:var(--pink); color:#fff;}
	.newsCate.newsCate2{border-color:var(--pink);color:var(--pink);}
	.newsCate.newsCate3{border-color:#ee57cd;color:#ee57cd;}
	.newsCate.newsCate4{border-color:var(--green);color:var(--green);}
	.newsCate.newsCate5{border-color:#1044d8;}
.news .newsTtl{
	flex-shrink: 0;
	width:100%;
	}
.news a{ text-decoration:none;}

/*TABLET*/
@media only screen and (min-width : 600px){
}
/*PC*/
@media only screen and (min-width : 1025px){
}
/*IE*/
@media all and (-ms-high-contrast:none){
}


.instaScroll{
	max-height:510px;
	overflow-y:auto;
	}
	.instaScroll::-webkit-scrollbar {
    width: 5px;
		}
	.instaScroll::-webkit-scrollbar-track {
    background-color:#ddd;
		}
 	.instaScroll::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		background-color:#ccc;
		}


/*********************************************************
老健コスモス苑とは
*/

.philosophyWrap{
	background:url(../images/outline/philosophyBg.jpg) center center no-repeat;
	background-size:cover;
	padding:40px;
	text-align:center;
	font-size:1.4em;
	line-height:2em;
	font-weight:bold;
	font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	}
@media all and (-ms-high-contrast:none){
	.philosophyWrap{
		/* アンチエイリアスを有効にさせたい要素に指定 */
		-webkit-transform: rotate(.028deg);
		-ms-transform: rotate(.028deg);
		transform: rotate(.028deg);	
	}
}
.logoWrap{
	display:flex;
	gap:20px;
	align-items:center;
	justify-content: center;
	flex-direction: column;
	}
.logoWrap dt{
	font-size:1.2em;
	font-weight:bold;
	}
.favi1 img{ max-width:200px;}

@media only screen and (min-width : 1025px){
.logoWrap{
	flex-direction: row;
	gap:40px;
	}

}

/*バリアフリー表記*/
.barrierfree table {
    -ms-writing-mode : tb-lr;
    writing-mode : vertical-lr;
	}
.barrierfree table th{
    -ms-writing-mode : lr-tb;
    writing-mode : horizontal-tb;
		}
.barrierfree table img{
	width:30px;
	margin:2px;
	}
@media only screen and (min-width : 1025px){
	.barrierfree table {
			-ms-writing-mode:inherit;
			writing-mode:inherit;
		}
	.barrierfree table th{
		width:calc(100% / 8) !important;
    -ms-writing-mode : inherit;
    writing-mode : inherit;
		}
	.barrierfree table img{
		width:40px;
		margin:5px auto;
		}
	}

#newsletter a{
	display:block;
	text-align:center;
	font-size:0.9em;
	}
#newsletter a img{ margin:0 auto 10px;}


/*********************************************************
サービス案内
*/
.serviceDtlWrap {}
.serviceDtlWrap > p{}
.serviceDtlWrap > p img{ width:100%;}
.serviceDtlWrap > div{}

@media only screen and (min-width : 1140px){
	.serviceDtlWrap > p{order:2;}
	.serviceDtlWrap > div{order:1;}

}

/*********************************************************
利用案内
*/
.nayamiWrap{
	}
.nayamiWrap dl{
	padding-bottom:20px;
	border-bottom:dotted 4px var(--brown);
	margin-bottom:20px;
	}
.nayamiWrap dl:last-child{
	margin-bottom:0;
	}
.nayamiWrap dt{
	position:relative;
	font-size:1.2em;
	font-weight:bold;
	padding-left:35px;
	margin-bottom:5px;
	}
.nayamiWrap dt:before{
	position:absolute;
	width:30px;
	height:24px;
	top:0;
	left:0;
	content:'';
	background:url(../images/howto/check.png) center center no-repeat;
	background-size:contain;
	}
.nayamiWrap dd{
	padding-left:35px;
	}
/*flow*/
.flow-container {
	}
.flow-step {
  display: flex;
  position: relative;
	gap:20px;
  margin-bottom: 20px;
	}
/*
.flow-step:last-child {
  margin-bottom: 0;
	}
*/
/* 縦のライン（最後のステップ以外に適用） */
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 20px; /* バッジの中心に合わせる */
  top: 40px;  /* バッジの下からスタート */
  bottom: -40px; /* 次のステップまで繋ぐ */
  width: 2px;
  background:var(--pink);
}
.step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:var(--pink);
  color: #fff;
  font-weight: 700;
  z-index: 1;
}
.flow-content {
  padding-top: 10px;
  flex-shrink: 0;
  width: calc(100% - 60px);
	}
.flow-content h4{
	border-bottom:none;
	padding-bottom:0;
}

@media only screen and (min-width : 1025px){
	.flow-step {
		gap:40px;
		}
	.step-badge {
		width:80px;
		height:80px;
		font-size:1.8em;
		line-height:1em;
		}
	.flow-step:not(:last-child)::after {
		left:40px;
	  top: 80px;  /* バッジの下からスタート */
		}
	.flow-content {
		padding-top: 10px;
		flex-shrink: 0;
		width: calc(100% - 120px);
		}
	.flow-content h4{
		margin-bottom:10px;
		}
}

/*FAQ*/
.faqWrap{}
.faqWrap h5{
	color:#222;
	margin-bottom:0;
	}

/*********************************************************
2nd
*/
/*TABLET*/
@media only screen and (min-width : 600px){
}
/*PC*/
@media only screen and (min-width : 1025px){
}
/*IE*/
@media all and (-ms-high-contrast:none){
}