@charset "utf-8";


/*PC・タブレット・スマホ共通*/
/*全体*/
* {
	outline: 0px solid magenta;
}
html {
	font-size: 16px;
}
body {
	margin: 0px;
	padding: 0px;
	color: #333;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	line-height: 1.3;
	background: #ffffff;
	-webkit-text-size-adjust: none;
}

.maru {
	color: #ff8727;
}
.marublue {
	color: #111100;
}
.br_resp0 {
	display: none;
}

/*リンク*/
a {
	color: #333;
	text-decoration: none;
	transition: 0.5s;
	
}
a:hover {
	color: #ff9999;

}

/*site max-width*/
.container {
    display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	/*background: #ffffff;	*/
	max-width: 1450px;	/*サイトの最大幅。これ以上大きくならない。*/
	margin: 0 auto;
	padding: 0 50px;
}


/*Header*/
header {
	grid-column-start: 1;
	grid-column-end: 7;
	position: relative;
	height: 0;	/*ヘッダーの高さ*/
	max-width: 1450px;
	background:url(img/main-imga.webp) no-repeat center center / cover;
	padding-top: 24%;
}

header h1 {
    position: absolute;
	right: 2%;
	top: 0;
	margin: 0px;
	padding: 0px;
	font-size: 90%;
}

/*adress*/
header address {
	position: absolute;
	font:85%/100% "Mplus 1p";
	right: 2%;
	top: 24px;
	text-align: right;
	text-shadow: 1px 1px 3px #fff, -1px -1px 3px #fff;
}

/*time*/
header address .time {
	color: #111;
	text-align: right;
}

footer {
	grid-column-start: 1;
	grid-column-end: 7;
	grid-row-start: 10;
	grid-row-end: 11;
	font:100%/150% "Mplus 1p";
	margin: 10px 10px 0px 10px; 
}
/*navigation*/
ul {
	grid-column-start: 1;
	grid-column-end: 7;
	grid-row-start: 2;
	grid-row-end: 3;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	height: 45px;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	z-index: 100;
}

/*li a*/
ul li a {
	font:90%/1.3 "Mplus 1p";
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 45px;		/*高さ*/
	color: #000000;		/*文字色*/
	border-left: 1px dashed #fff;	/*メニューの左側の線の幅、線種、色（古いブラウザ用）*/
	border-left: 1px dashed rgba(255,255,255,0.4);	/*左の線の幅、線種、255,255,255は白の事で0.4は40%色がついた状態の事。*/
    background: -moz-linear-gradient(bottom, #ff9c26 20%,#ffd700, #FFd700);
    background: -webkit-linear-gradient(bottom, #ff9c26 20%,#ffd700, #FFd700);
    background: linear-gradient(to top, #ff9c26 20%,#ffd700, #FFd700);
}
/*li span*/
ul li span {
	display: block;
	font-size: 80%;		/*文字サイズ*/
	font-weight: normal;	/*文字を太字でなく標準に戻す設定*/
	letter-spacing: 0.2em;	/*文字間隔を少しあける設定*/
	opacity: 0.5;			/*透明度50％*/
}
/*mouse on and current*/
ul li a:hover {
    background: -moz-linear-gradient(bottom, #ff8f00 20%,#ffc500, #ffc500);
    background: -webkit-linear-gradient(bottom, #ff8f00 20%,#ffc500, #ffc500);
    background: linear-gradient(to top, #ff8f00 20%,#ffc500, #ffc500);
}

/*line*/
ul li.line a  {
	color: #ffffff;
	font-weight: bold;
	border-left: 1px dashed #01b428;
	background: -moz-linear-gradient(bottom, #01b428 20%,#1eb43f, #52b568);
    background: -webkit-linear-gradient(bottom, #01b428 20%,#1eb43f, #52b568);
    background: linear-gradient(to top, #01b428 20%,#1eb43f, #52b568);
}
/*■□■□■□■□■□■□■□ホーム■□■□■□■□■□■□■□■□■□*/
h2 {
	grid-column-start: 1;
	grid-column-end: 5;
	height: fit-content;
	margin: 10px 10px 0px 10px; 
	font-size: 20px;
	font:120%/1.3 "Mplus 1p";
	font-weight: bold;
	display: block;
}
h3.description{
	color:#333; 
	grid-column-start: 1;
	grid-column-end: 5;
	grid-row-start: 4;
	grid-row-end: 5;
	margin: 10px 10px 0px 10px;
	font:100%/1.2 "Mplus 1p";
	border-bottom: 0px;
	padding-bottom: 0px;
}
.description a {
	font:bold 100%/1.2 "Mplus 1p";
	text-decoration: underline;
}

.menucare, .menunotice, .menutreat, .faq, .baby, .echo {
	min-width: 180px;
	min-height: 150px;
	font:100%/1.3 "Mplus 1p";
	margin: 15px 10px 0px 10px; 
	border: 1px #dddddd solid; 
	box-sizing: border-box; 
	border-radius: 8px;
	position: relative;
}
.menucare, .menunotice {
	width: auto;
}
.profile {
	grid-column-start: 5;
	grid-column-end: 7;
	grid-row-start: 8;
	grid-row-end: 10;
	min-width: 110px;
	font: 100%/1.3 "Mplus 1p"; 
	text-align: center;
	height:fit-content;
	width: auto;
	margin: 60px 10px 0px 10px; 
}
h3 {
	font:bold 110%/1.3 "Mplus 1p"; 
	color:#ff6600; 
	margin: 10px 5px 5px 10px;
	border-bottom: 1px solid #ffcd00;
	padding-bottom: 1px;
}
h4 {
	font:bold 100%/1.3 "Mplus 1p";
	color:#ff6600;
	margin: 5px 10px 0px 10px;
}
p {
	font:100%/1.3 "Mplus 1p"; 
	margin: 5px 10px 0px 10px;
}
.baby p, .echo p {
	color:#ff6600;
	margin: 10px 10px 10px 10px;
}
.menulink {
	font:11px/100% "Mplus 1p";
	position: absolute;
	bottom: 10px;
	right: 10px;
}
.menunotice {
	grid-column-start: 1;
	grid-column-end: 5;
	grid-row-start: 5;
	grid-row-end: 6;
}
.menucare {
	grid-column-start: 1;
	grid-column-end: 5;
	grid-row-start: 6;
	grid-row-end: 7;
}
.menutreat {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 7;
	grid-row-end: 8;
}
.faq {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 7;
	grid-row-end: 8;
}
.baby {
	position: relative;
	grid-column-start: 3;
	grid-column-end: 4;
	display: flex;
	grid-row-start: 7;
	grid-row-end: 8;
}
.echo {
	position: relative;
	grid-column-start: 4;
	grid-column-end: 5;
	grid-row-start: 7;
	grid-row-end: 8;
	display: flex;
}
.baby img, .echo img{
	height: 80px;
	width: auto;
	z-index: -1;
	margin: auto 10px auto -5px;
}

/*■□■□■□■□■□■□■□施術案内ページ■□■□■□■□■□■□■□■□■□*/
#treat, #bodycare, #echo, #water, #kansyo, #ssp, #headache, #ems {
	display: block;
	padding-top: 80px;
	margin-top: -80px;
}
.hoken{
	grid-column-start: 1;
	grid-column-end: 5;
	grid-row-start: 4;
	grid-row-end: 5;
	margin: 15px 10px 0px 10px;
	display: flex;
	flex-wrap: wrap;
	border: 1px #dddddd solid; box-sizing:border-box; border-radius:8px; margin-left:15px; position:relative; float:left;
	background: -moz-linear-gradient(bottom, #fed533 40%,#fff, #FFF);
	background: -webkit-linear-gradient(bottom, #fed533 40%,#fff, #FFF);
	background: linear-gradient(to top, #fed533 40%,#fff, #FFF);
}
.hoken h3{
	font:bold 100%/1.2 "Mplus 1p";
	margin: 10px 10px 0px 10px;
	width: 100%;
}
.hokenmaru{
	font:bold 85%/5.5 "Mplus 1p";
	width:75px;
	height:75px;
	border-radius:50%; 
	background:#ffffff; 
	border:1px #eeeeee solid; 
	box-sizing:border-box; 
	margin:5px auto; 
	text-align:center; 
	white-space:nowrap; 
}
.treat {
	grid-column-start: 1;
	grid-column-end: 5;
	grid-row-start: 5;
	grid-row-end: 6;
	margin: 15px 10px 0px 10px;
	font: 100%/1.3 "Mplus 1p";
	position: relative;
}
.treat img {
	position: absolute;
	right: 0px;
	bottom: 0px;
	z-index: -1;
}
.treat h3 {
	font:bold 110%/1.3 "Mplus 1p";
	color:#99cc33;
	border-bottom: 0px;
	margin: 0px 10px 0px 10px;
}
.treat h4 {
	font:bold 100%/1.3 "Mplus 1p";
	color:#333;
	margin: 0px 10px 0px 10px;
}
.treat .maru {
	font-size: 80%;
	color: #99cc33;
	margin-left: 10px;
}
.guide {
	grid-column-start: 1;
	grid-column-end: 5;
	grid-row-start: 6;
	grid-row-end: 7;
	margin: 15px 10px 0px 10px;
	font: 100%/1.3 "Mplus 1p";
}
.guide h3{
	font:bold 120%/1.3 "Mplus 1p";
	color:#99cc33;
	border-bottom: 0px;
	margin: 0px 10px 0px 10px;
}
.guide h4 {
	font:bold 110%/1.3 "Mplus 1p";
	color:#333;
	
}
.guide .maru {
	font-size: 80%;
	color: #99cc33;
	margin-left: 10px;
}
.guide .description {
	display: flex;
	flex-wrap: nowrap;
	margin: 0px 10px 20px 10px;
	font: 100%/1.3 "Mplus 1p";
}
.guide img {
	width:200px;
	height:150px;
	margin-right: 10px;
	border-radius: 8px;
}
.guide .img2 {
	width:300px;
	height:fit-content;
}
.guide .warterdescription {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	margin: 0px 10px 20px 10px;
}
.guide .warterdescription .img1 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 3;
}
.guide .warterdescription .img2 {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;

}
.guide .warterdescription .watertxt {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

/*■□■□■□■□■□■□■□FAQページ■□■□■□■□■□■□■□■□■□*/
.question {
	grid-column-start: 1;
	grid-column-end: 5;
	grid-row-start: 3;
	grid-row-end: 9;
}
.question h3{
	font:bold 110%/1.3 "Mplus 1p";
	color:#99cc33;
	border-bottom: 0px;
	margin: 0px 0px 5px 0px;
}
.qbox {
	width:auto; 
	height:auto; 
	background:#ffffff; 
	border: 1px #ffe57f solid; 
	box-shadow: 0 0 0 4px #fff, 0 0 0 6px #ffcc00;
	box-sizing:border-box; 
	border-radius:8px; 
	margin:30px 30px 10px 50px; 
	position:relative; 
	float:left;
}
.qen {
	width:60px; 
	height:60px; 
	border-radius:50%; 
	border: 1px #ff9a00 solid; 
	box-sizing:border-box; 
	position:absolute; 
	top:-10px; 
	left:-40px; 
	text-align:center;
	background: -moz-linear-gradient(bottom, #ff9a00 40%,#ffc400);
	background: -webkit-linear-gradient(bottom, #ff9a00 40%,#ffc400);
	background: linear-gradient(to top, #ff9a00 40%,#ffc400);
}
.qentxt {
	width:100%; 
	font:25px/100% "Mplus 1p"; 
	font-weight:500; 
	line-height:60px; 
	color:#fff;
}
.qtext {
	width:auto; 
	margin:15px 30px 15px 30px;
}

 /*■□■□■□■□■□■□■□アクセス■□■□■□■□■□■□■□■□■□*/
.access {
	grid-column-start: 1;
	grid-column-end: 5;
	grid-row-start: 3;
	grid-row-end: 9;
	display: flex;
	flex-direction: column;
}

.gmap {
	height: 250px;
	margin:10px 0px 10px 10px; 
}
.access h3 {
	font:bold 110%/1.3 "Mplus 1p";
	color:#99cc33;
	border-bottom: 0px;
	margin: 0;
}
.atext{
	font: 100%/1.6 "Mplus 1p";
	width:90%; 
	margin:0px 10px; 
}
.accbox {
	font:bold 75%/1.5 "Mplus 1p";
	color: #fff;
	background: #ff9a00;
	padding:2px;
}

 /*■□■□■□■□■□■□■□サイドバー■□■□■□■□■□■□■□■□■□*/
aside {
	height: 410px;
	grid-column-start: 5;
	grid-column-end: 7;
	grid-row-start: 3;
	grid-row-end: 8;
	margin:0px;
	display: grid;
}
aside p{
        font:100%/1.3 "Mplus 1p";
}
aside .notice{
        font:90%/1.3 "Mplus 1p";
}
.schedule {
    grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	margin:10px;
}
.dayoff {
    grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
	margin:10px;
}
.minibar{
	width:auto;
	height:32px;
	border: 0.5px #ff6600 solid; box-sizing:border-box;
	background: -moz-linear-gradient(bottom, #ff8727 20%,#ffa746, #ffa746);
	background: -webkit-linear-gradient(bottom, #ff8727 20%,#ffa746, #ffa746);
	background: linear-gradient(to top, #ff8727 20%,#ffa746, #ffa746);
}
.minibar h3 {
	font:100%/1.3 "Mplus 1p";
	font-weight:600;
	color:#ffffff;
	border-bottom: 0px;
	margin: 4px auto auto 5px;
}
.ym {
	font:100%/1.3 "Mplus 1p"; 
	color:#ff6600;
	margin: 10px auto 5px auto;
	font-weight: bold;
}

#calendar {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 3;
	grid-row-end: 4;
	margin:10px 10px 10px 10px;
	height: auto;

}
#calendar p {
	font:100%/1.3 "Mplus 1p";
	margin: 0;
	color: #ff8727;
}
#calendar table {
	font:100%/1.3 "Mplus 1p";
	border-spacing: 0;
	border-collapse: collapse;
	margin:0px;
	width: 100%;
}
#calendar .dayoff {
	font:100%/1.3 "Mplus 1p";
	color: red;
	font-weight: bold;
	margin: 0;
}
#calendar .dayoff2 {
	font:100%/1.3 "Mplus 1p";
	color: #00bfff;
	font-weight: bold;
	margin: 0;
}
#calendar .dayoff3 {
	font:100%/1.3 "Mplus 1p";
	color: #00bfff;
	font-weight: bold;
	margin: 0;
}
#calendar .blank {
	font:100%/1.3 "Mplus 1p";
	color: #ffffff;
	font-weight: bold;
	margin: 0;
}
#calendar td {
	font:100%/1.3 "Mplus 1p";
	font-weight: bold;
	border: 2px solid #ff8727;
	padding: 2px 2px;
	text-align: center;
	width: fit-content;
}
#calendar td.ym{
	font:100%/1.3 "Mplus 1p"; 
	color:#ff6600;
	margin: 10px auto 5px auto;
	font-weight: bold;
	text-align: left;
	border: 0px;
}
#calendar td.off {
        background: #ffdddd;
}
#calendar td.off2 {
        background: #ffffff;
}
#calendar td.today {
	background: #fff;
}
#calendar td.calendar_footer {
	margin: 5px 10px;
	font:font:100%/1.3 "Mplus 1p";
	font-weight: bold;
	text-align: left;
	border: 0px;
}
.calendar_footer .maru {
	color: #ff8727;
}
.calendar_footer .maru2 {
	color: #00bfff;
}
/* 土曜日 */
#calendar  .day:nth-child(7) {
	color: royalblue;
}
/* 日曜日 */
#calendar  .day:first-child {
	color: red;
}

#calendar td.is-disabled {
	color: #c5c5c5;
}

/*sticky*/

.sticky {
	max-width: 1450px;
	position: fixed;
	top: 0;
	margin: 0 auto;
	inset: 0;
}

.br_resp {
	display: none;
}
/*スマホ用メニューを表示させない*/
.menubar-s {display: none;}
/*３本バーアイコンを表示させない*/
.menubar_hdr {display: none;}


/*画面幅1450px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1450px){
/*■□■□■□■□■□■□■□ホーム■□■□■□■□■□■□■□■□■□*/
.br_resp0 {
	display: block;
}
.menunotice {
	grid-row-start: 5;
	grid-row-end: 6;
}
.menucare {
	grid-row-start: 6;
	grid-row-end: 7;
}
.menutreat {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 7;
	grid-row-end: 8;
}
.faq {
	grid-column-start: 3;
	grid-column-end: 5;
	grid-row-start: 7;
	grid-row-end: 8;
}
.baby {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 8;
	grid-row-end: 9;
	display: flex;
}
.echo {
	grid-column-start: 3;
	grid-column-end: 5;
	grid-row-start: 8;
	grid-row-end: 9;
	display: flex;
}

}



/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){

/*■□■□■□■□■□■□■□ホーム■□■□■□■□■□■□■□■□■□*/
body {
	font-size: 15px;

}
.container {
	padding: 0;
}
.br_resp0 {
	display: none;
}

header address {
	font:85%/100% "Mplus 1p";
	top: 15%;
}
h2 {
	grid-column-start: 1;
	grid-column-end: 7;
}
h3.description{
	color:#000000; 
	grid-column-start: 1;
	grid-column-end: 7;
	grid-row-start: 4;
	grid-row-end: 5;
	margin: 10px 10px 0px 10px;
	font:100%/1.2 "Mplus 1p";
	border-bottom: 0px;
	padding-bottom: 0px;
}
.menunotice {
	grid-column-start: 1;
	grid-column-end: 7;
	grid-row-start: 5;
	grid-row-end: 6;
} 
.menucare {
	grid-column-start: 1;
	grid-column-end: 7;
	grid-row-start: 6;
	grid-row-end: 7;
}
.menutreat {
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 7;
	grid-row-end: 8;
}
.faq{
	grid-column-start: 4;
	grid-column-end: 7;
	grid-row-start: 7;
	grid-row-end: 8;
}
.baby {
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 8;
	grid-row-end: 9;
	display: flex;
}
.echo {
	grid-column-start: 4;
	grid-column-end: 7;
	grid-row-start: 8;
	grid-row-end: 9;
	display: flex;
}
.profile {
	grid-column-start: 1;
	grid-column-end: 7;
	grid-row-start: 9;
	grid-row-end: 10;
        margin: 15px 10px 0px 10px; 
}
/*■□■□■□■□■□■□■□施術案内■□■□■□■□■□■□■□■□■□*/
.hokenmaru{
	font:bold 90%/5.5 "Mplus 1p";
}
.hoken{
	grid-column-start: 1;
	grid-column-end: 7;
	grid-row-start: 4;
	grid-row-end: 5;
}
.treat {
	grid-column-start: 1;
	grid-column-end: 7;
	grid-row-start: 5;
	grid-row-end: 6;
}
.guide {
	grid-column-start: 1;
	grid-column-end: 7;
	grid-row-start: 6;
	grid-row-end: 7;
}
/*■□■□■□■□■□■□■□ＦＡＱ■□■□■□■□■□■□■□■□■□*/
.question {
	grid-column-start: 1;
	grid-column-end: 7;
	grid-row-start: 3;
	grid-row-end: 9;
}
/*■□■□■□■□■□■□■□アクセス■□■□■□■□■□■□■□■□■□*/
.access {
	grid-column-start: 1;
	grid-column-end: 7;
	grid-row-start: 3;
	grid-row-end: 9;
 }
/*■□■□■□■□■□■□■□サイドバー■□■□■□■□■□■□■□■□■□*/
aside{ 
        height: auto;
	grid-column-start: 1;
	grid-column-end: 7;
	grid-row-start: 10;
	grid-row-end: 11;
}
/*■□■□■□■□■□■□■□フッター■□■□■□■□■□■□■□■□■□*/
footer {
	grid-column-start: 1;
	grid-column-end: 7;
	grid-row-start: 11;
	grid-row-end: 12;
        margin: 10px 10px 0px 10px;
}
}

/*画面幅680px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:680px){
/*■□■□■□■□■□■□■□全体設定■□■□■□■□■□■□■□■□■□*/
body {
	/*font-size: 12px;*/
}
.container {
	padding: 0;
}
.br_resp {
	display: block;
}

ul li a {
	font: 100% / 1.3em "Mplus 1p";
}
ul li.line a  {
	font-weight: bold;
}
/*■□■□■□■□■□■□■□ホーム■□■□■□■□■□■□■□■□■□*/
.menucare, .menunotice, .menutreat, .faq, .baby, .echo {
	min-width: 118px;
	min-height: 100px;
}
.menulink {
	display: none;
}
.baby img, .echo img{
	height: 50px;
	z-index: -1;
	margin: auto 10px auto -5px;
}
/*■□■□■□■□■□■□■□施術案内■□■□■□■□■□■□■□■□■□*/
.hokenmaru{
	font:bold 113%/5.5 "Mplus 1p";
	margin: 5px 20px 5px 20px;
}
.treat img {
	display: none;
}
.guide .description {
	flex-wrap: wrap;
}
.guide .description div{
	margin-top: 5px;
}
.guide .warterdescription {
	grid-template-columns: 1fr;
}
.guide .warterdescription .img1 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
}
.guide .warterdescription .img2 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
}
.guide .warterdescription .watertxt {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 3;
	grid-row-end: 4;
	margin-top: 5px;
}
.guide img {
	width:200px;
	height:fit-content;
}
.guide .img2 {
	width:100%;
}

}