@charset "UTF-8";

/*
Theme Name: リラミウ-2025 深氣整りらく
Description: Relaxation by Miu専用テーマ
Author: dynamis life / 橋本 貴史
Author URI: https://dynamis-life.com
Version: 2025.1*/

/*
ベースカラー
#CDBA88
#E7CEB7
#FFF0E6
#CDAA7E
#7ccfc8

2nd
#C6AB63
#E7CAB7
#F7DDCD
#BBA384
#B6DCB8

基本色
--color-main: #C6AB63;
--color-bk1: #E2FFE5;
--color-bk2: #C2C4AE;
--color-bk3: #EFDCD2;
--color-bk4: #FFD2DD;
--color-accent: #ABFF63;
*/

:root {
	/*基本色*/
	--color-main: #CDBA88;

	--color-bk1: #E7CEB7;
	--color-bk2: #FFF0E6;
	--color-bk3: #EFDCD2;
	--color-bk4: #CDAA7E;
	--color-bk5: #FFFDF7;/*kiji-bk*/

	--color-accent1: #7ccfc8;
	--color-accent2: #F09099;
	--color-accent3: #7CCFC8;

	/*etc*/
	--color-icon: #92BC97;/*未使用*/
	--hover-pink: rgba(239,216,210,0.8);/*未使用*/
	--hover-main: rgba(198,179,99,0.4);

	/*color-border*/
	--color-border1: #E6E6E6;
	--color-border2: #CCCCCC;
	--color-border3: #B3B3B3;/*未使用*/
	--color-border4: #808080;/*未使用*/
	--color-border5: #333333;/*未使用*/

	/*font*/
	--font-mincho: 'IPA P明朝';
	--font-gothic: 'IPA Pゴシック';
	--color-p1: #666666;
	--color-p2: #404040;

	/*fontsize*/
	--font-size1: 16px;
	--font-size2: 21px;
	--font-size3: 26px;
	--font-size4: 32px;
	--font-size5: 37px;

	/*layout*/
	--width-min: 768px;
	--width-max: 1000px;

	--fix-head: 145px;
	--fix-head-tb: 145px;
	--fix-head-sm: 67px;

	--fix-topimg: 145px;/*topのimgのみ*/
	--fix-topimg-tb: 145px;/*topのimgのみ*/
	--fix-topimg-sm: 67px;/*topのimgのみ*/

	--fix-bodypage: 145px;/*all page　のfix*/
	--fix-bodypage-tb: 145px;/*all page　のfix*/
	--fix-bodypage-sm: 67px;/*all page　のfix*/
}

@font-face {
	font-family:'IPA P明朝';
	src: local('IPA P明朝'),
			url(./font/ipa-mp/ipamp.woff2) format("woff2"),
			url(./font/ipa-mp/ipamp.woff) format("woff"),
			url(./font/ipa-mp/ipamp.ttf) format("truetype");
	font-display: swap;
}

@font-face {
	font-family:'IPA Pゴシック';
	src: local('IPA Pゴシック'),
			url(./font/ipa-gp/ipagp.woff2) format("woff2"),
			url(./font/ipa-gp/ipagp.woff) format("woff"),
			url(./font/ipa-gp/ipagp.ttf) format("truetype");
	font-display: swap;
}

@font-face {
	font-family:'JK';
	src: local('JK'),
			url(./font/jk/JKG-L_3.woff2) format("woff2"),
			url(./font/jk/JKG-L_3.woff) format("woff"),
			url(./font/jk/JKG-L_3.ttf) format("truetype");
	font-display: swap;
}

@font-face {
	font-family:'hui';
	src: local('hui'),
			url(./font/hui/HuiFont29.woff2) format("woff2"),
			url(./font/hui/HuiFont29.woff) format("woff"),
			url(./font/hui/HuiFont29.ttf) format("truetype");
	font-display: swap;
}

@font-face {
	font-family:'hui P';
	src: local('hui P'),
			url(./font/hui/HuiFontP29.woff2) format("woff2"),
			url(./font/hui/HuiFontP29.woff) format("woff"),
			url(./font/hui/HuiFontP29.ttf) format("truetype");
	font-display: swap;
}


@font-face {
  font-family: "TA1";
  src: url("./font/shinkisei-riraku/TA1.otf") format("opentype");
  font-display: swap;
}


/* basic
++--------------------------------------------++*/
body {
	/*font-family:'IPA Pゴシック', 'Noto Sans JP', 'Lucida Sans Unicode', 'Tenderness', 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif, '游明朝', 'Times New Roman';*/
	font-family:'Noto Sans JP', 'Lucida Sans Unicode', 'Tenderness', 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif, '游明朝', 'Times New Roman';
	line-height: 1.5;
	word-wrap: break-word;
	overflow-wrap: break-word;
	color: var(--color-p1);}

.mincho{font-family: 'IPA P明朝', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'HGP明朝B', serif;}
.gothic{font-family: 'IPA Pゴシック';}
.jk{font-family: 'JK';}
.hui{font-family: 'hui';}
.huiP{font-family: 'hui P';}
.awesome{font-family:'FontAwesome';}

a {color: #937F49;}
del {color: #BEBFBF}
p {padding: 0 0 1.0em 0;}


/*-----------------------------------------------++
■ helper
++-----------------------------------------------*/

.hp_red{
	color: #DE6B6B !important;
}
.hp_txtSmall{
	font-size: 1.3rem !important;
}
.hp_txt-14{
	font-size: 1.4rem !important;
}
.hp_txt-16{
	font-size: 1.6rem !important;
}


.hp_mt1{
	margin-top: 1em !important;
}
.hp_mt3{
	margin-top: 3em !important;
}


.hp_pb0{
	padding-bottom: 0em !important;
}

.hp_mb0{
	margin-bottom: 0em !important;
}
.hp_mb1{
	margin-bottom: 1em !important;
}
.hp_mb3{
	margin-bottom: 3em !important;
}
.hp_mb4{
	margin-bottom: 4em !important;
}
.hp_mb5{
	margin-bottom: 5em !important;
}

.hp_ml0-5{
	margin-left: 0.5em !important;
}
.hp_ml1{
	margin-left: 1em !important;
}

/*-----------------------------------------------*/


/* search */
#searchform{
	position: relative;
	margin: 0 auto;
	width: 90%;}

.searchfield {
	padding: 5px;
	font-size: 14px; font-size: 1.4rem;
	width: 85%;}

.searchsubmit{
	position: absolute;
	top: 4px;
	width: 25px;
	right: 1px;}

.searchsubmit:focus{
	outline: 0;}/*周りの青線*/

/*font awa
.searchsubmit{
	font-family: 'FontAwesome';
	border: none;
	width: 30px;
	height: 30px;
	background: transparent;
	font-size: 18px; font-size: 1.8rem;
	cursor: pointer;}*/



/* temmplate
++--------------------------------------------++*/
.newline{
	display: block;}

.aligncenter{
	display: block;
	margin: 0 auto;}

a:hover{
	text-decoration: none;
	opacity: 0.6;
	transition: all .3s ease-out;
	/*color: var(--color-accent1);*/}

strong{background: linear-gradient(rgba(255,240,230,0) 70%, rgba(255,240,230,1) 80%);}

video{
	width: 100%;
	height: auto;}

/*:target{
	background: #ffa2a4;}*/

/* decoration
++--------------------------------------------++*/
/*transparentはNG*/
.highlight0{color: #CD8888;}

.highlight-red{display: inline; background: linear-gradient(transparent 70%, rgba(238, 123, 123, 0.24) 85%)}
.highlight-blue{display: inline; background: linear-gradient(transparent 70%, rgba(141,208,221,.6) 85%)}
.highlight-blue-block{background: linear-gradient(transparent 70%, rgba(141,208,221,.6) 85%)}

.highlight1{background: linear-gradient(rgba(255,240,230,0) 70%, rgba(255,240,230,1) 80%);}
.highlight2{background: linear-gradient(rgba(240,144,153,0) 70%, rgba(240,144,153,1) 80%);}
.highlight3{background: linear-gradient(rgba(240,144,153,0) 60%, rgba(240,144,153,0.3) 90%);}
.highlight4{background: linear-gradient(rgba(93,179,250,0) 60%, rgba(93,179,250,0.3) 90%);}

hr{border:none;
	height: 2px;
	background: linear-gradient(90deg, rgba(231,206,183,0.1) 0%, rgba(205,186,136,1.0) 50%, rgba(231,206,183,0.1) 100%);}

q{ quotes: "《""》";}
q:before{content: open-quote;}
q:after{content: close-quote;}
q:before, q:after{color: #1aa7b1;}

/*180x180 img を元にする 20170920使ってない*/
.border-image1{
	border: 1px solid #000;

	border-image-source: url(../../../../uploads/img/bg-border/a.png);
	border-image-slice: 60;
	border-image-width: 60px;
	border-image-repeat: repeat;/*stretch*/
	padding: 5rem;}

/* 吹き出し */
.fukidashi{
	display: inline-block;
	position: relative;
	padding: 0.6em;
	color: #fff;
	background: var(--color-accent2);}

.fukidashi:after{
	content: '';
	position: absolute;
	top: 100%;
	left: 30px;
	border: 15px solid transparent;
	border-top: 15px solid var(--color-accent2);
	width: 0;
	height: 0;}


/* effect
++--------------------------------------------++*/
/*mousu hover*/
.hover-slow{
	transition: color 0.4s ease-out,
	background-color 0.7s ease-out;}


/*animate*/
@keyframes fadeInUp2 {
	0% {
		opacity: 0;
		transform: translate3d(0, 5%, 0);
	}
	100%{
		opacity: 1;
		transform: none;
	}
}
.fadeInUp2 {
	animation-name: fadeInUp2;
	opacity: 1;}


/*animate*/
@keyframes fadeIn2 {
	0% {
		opacity: 0;
		/*transform: translate3d(0, 5%, 0);*/
	}
	100%{
		opacity: 1;
		transform: none;
	}
}
.fadeIn2 {
	animation-name: fadeIn2;
	opacity: 1;}


/*animate*/
@keyframes fadeInRight2 {
	0% {
		opacity: 0;
		transform: translate3d(6%, 2%, 0);
		/*transform: translate3d(0, 5%, 0);*/
	}
	100%{
		opacity: 1;
		transform: none;
	}
}
.fadeInRight2 {
	animation-name: fadeInRight2;
	opacity: 1;}

/*.head-reserve, .menu-sec img{
	transition: opacity 1.2s ease;}
.head-reserve:hover, .menu-sec img:hover{
	opacity: 0.7;}*/

/*logo-effect*/
/*#logo a:hover img, .head-reserve img:hover, .menu-sec li:hover {*/
.flashimg:hover{
	opacity: 1.0;
	animation: logoflash 1.4s;}

@keyframes logoflash {
	0% {opacity: .3;}
	100% {opacity: 1.0;}
}

/*global nav line*/
.gnav ul li a:after {
	content: "";
	display: block;
	margin: 0 auto;
	width: 0%;/*Default横線の幅*/
	height: 1px;
	background-color: var(--color-main);
	transition: 0.4s ease-out;}

.gnav ul li a:hover:after {
	width: 100%;}

/*img shadow*/
/*.shadow{
	display: block;
	width: 100%;
	margin: 50px auto;
	position: relative;}

.shadow:after {
	content: '';
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 0;
	right: 0;
	z-index: -1;
	box-shadow: 0 0 40px rgba(0,0,0,0.1);
	border-radius: 10px;}*/

/*nori*/
.dropshadow{
	box-shadow: 0px 1px 4px 0px ##C22A2A,
							0 0 40px 0 #C22A2A inset;
	position: relative;}

.dropshadow:before, .dropshadow:after{
	content: "";
	position: absolute;
	z-index: -2;
	bottom: 15px;
	left: 10px;
	width: 50%;
	height: 20%;
	max-width: 300px;
	box-shadow: 0 15px 10px #4c4c4c;
	transform: rotate(-3deg);}

.dropshadow:after{
	right: 10px;
	left: auto;
	transform: rotate(3deg);}

/*font*/
.futidori1{
	text-shadow: 1px 1px 4px #7db59b,
		1px -1px 4px #7db59b,
		-1px 1px 4px #7db59b,
		-1px -1px 4px #7db59b;}

/* 固有のcss
++--------------------------------------------++*/
/*page header*/
.page-h2{
	text-align: center;
	background-color: var(--color-bk2);
	color: #404040;
	font-family: var(--font-gothic);
	font-size: 24px; font-size: 2.4rem;
	margin: 0px 0px 1em;
	padding: 0.5em 0;}

.page-h3{
	font-size: 20px; font-size: 2.0rem;
	margin: 1em 0 1em;
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	color: var(--color-p2);/*文字色*/
	background: transparent;/*背景透明に*/
	border-left: solid 5px var(--color-bk2);}

/*kiji img*/
.info-creambath-top, .info-creambath-bottom{
	display: flex;
	justify-content: space-around;}

.polaroid{
	padding: 1em 0;
	list-style: none !important;}

.polaroid li{
	position: relative;
	margin: 0;}

.polaroid li img{
	width: 250px;
	height: auto;
	border: 10px solid #fff;
	border-bottom: 55px solid #fff;
	box-shadow: 1px 1px 20px #969696;}

.polaroid li p{
	display: block;
	position: absolute;
	text-align: center;
	width: 100%;
	bottom: 0px;
	color: #525252;
	font-size: 20px;}

/* cva
++--------------------------------------------++*/
.but-green{
	text-align: center;}

.but-green a{
	font-size: 19px; font-size: 1.9rem;
	display: inline-block;
	color: #fff;
	border: solid 1px #B2B2B2;
	background: var(--color-accent3);
	text-align: center;
	padding: 1em 1.5em;}

.but-green a:hover{
	color: #fff;
	text-decoration: none;
	opacity: 0.8;}

@media (max-width: 767px){
	.but-green{
		width: 90%;
		margin: 0 auto;}
}

/* stepBox
++--------------------------------------------++*/
.stepBox {
	text-align: center;
	overflow: hidden;
	padding: 1em 0 2em;}

.stepBox ol {
	list-style: none;
	counter-reset: num;
	margin:0;
	padding:0;}

.stepBox ol li {
	display: inline-block;
	vertical-align: bottom;
	background: #eee;
	color: #a6a6a6;
	margin: 0 2px;
	padding: 0 15px 0 35px;
	line-height: 46px;}


.stepBox ol li::after {
	position: relative;
	display: block;
	margin-top: -18px;
	margin-left: auto;
	margin-right: -14px;
	height: 15px;
	width: 11px;
	content: " ";
	transform: skew(-23deg);
	background: #eee;
	border-right: 1px solid white;}

.stepBox ol li::before {
	float: right;
	display: block;
	margin-bottom: -25px;
	margin-left: auto;
	margin-right: -14px;
	height: 15px;
	width: 11px;
	content: " ";
	transform: skew(23deg);
	background: #eee;
	border-right: 1px solid white;}

.stepBox ol li:first-child {
	padding-left: 3px;
	border-radius: 5px 0 0 5px;}

.stepBox ol li:last-child {
	padding-left: 0px;
	padding-right: 3px;
	border-radius: 0 5px 5px 0;}

.stepBox ol li:last-child::before {
	border: 0;
	background: transparent !important;}

.stepBox ol li:last-child::after {
	border: 0;
	background: transparent !important;}

.stepBox ol li.current {
	background: #D2BC8F;
	color: #fff;}

.stepBox ol li.current::before{
	background: #D2BC8F;}

.stepBox ol li.current::after{
	background: #D2BC8F;}

.stepBox ol li.current:last-child {
	margin-right: -35px;}

.stepBox ol li.current:last-child::before {
	border: 0;
	background: transparent !important;}

.stepBox ol li.current:last-child::after {
	border: 0;
	background: transparent !important;}

.stepBox ol li::after {
	margin-top: -25px;
	margin-right: -25px;
	height: 22px;
	width: 20px;
	content: " ";
	transform: skew(-30deg);}

.stepBox ol li::before {
	margin-right: -25px;
	height: 21px;
	width: 20px;
	content: " ";
	transform: skew(30deg);
	border-right: 1px solid white;}

.stepBox ol li:first-child {
	padding-left: 20px;}

.stepBox ol li:last-child {
	padding-left: 35px;
	padding-right: 40px;}