@charset "UTF-8";

/*--------------------------------*/
.blue {color: rgba(24,73,130,1.00);}
.aqua {color: #0481A2;}
.red {color: #c30d23;}
.beige {color: #e8e1ca;}
.brown {color: rgba(149,97,52,1.00);}


/*-----webfont loade----------*/
html {
    visibility: hidden;
}

html.wf-active,
html.loading-delay {
    visibility: visible;
}
/*---------------*/


html, body {
  position: relative;
  height: 100%;
}

body {
	background-color: #fff;
	color: #333;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", 'Noto Serif JP', "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 1.4rem;
	line-height: 2;
	letter-spacing: 0.3rem;
}

/*font heading*/
h1,h2,h3,h4,h5{
font-family: "dnp-shuei-mincho-pr6n", serif;
font-weight: 400;
font-style: normal;
	white-space: nowrap;
}

/*-----------------------------
	  link
-------------------------------*/
.text-box a {
  color:rgba(255,255,255,1.00);
}
.text-box a:hover {
  opacity: 0.7;
}
.text-box a:hover {
	color: #0481A2;
}

/*---------------------------------
    header
-----------------------------------*/
header{
	position: fixed;/*header固定*/
	width: 100%;
	z-index: 9;
	display: flex;
	justify-content: space-between;
	align-items: center;/*縦位置中央*/
	padding : 10px 20px ;
}


.logo_pc {
	font-size: 1.8em;
	letter-spacing: 0.2em;
	text-shadow: 0px 0px 5px rgba(0,0,0,0.70);
}
.logo_pc img{
	filter: drop-shadow(0 0 3px #666);

	width: 50px;
	opacity: 0.9;
	vertical-align: middle;
	margin-right: 0.5em;
}
#pc_vav li {
	text-shadow: 0px 0px 3px rgba(0,0,0,0.70);
	padding-left:  2rem;
}

@media screen and (min-width: 900px) { /*pcのとき*/
	.logo_pc {
	font-size: 2em;
	letter-spacing: 0.3em;
}
}


/*===================================
	main navigation
===================================*/

header a{	color: #fff;}

#pc_vav ul{
	display: flex;
	flex-wrap: wrap;/*改行*/
	justify-content: flex-end;
	align-content: space-between;/*複数行*/
	font-size: 1.6rem;
	}


/*------------nav 切り替え css-------------------*/

@media screen and (max-width : 900px ){ /*mobileのとき◯*/
	#pc_vav  {  display: none; }
	.openbtn　{	display: block; }
}


@media screen and (min-width: 900px) { /*pcのとき*/
	.openbtn {  display: none;}
}




/* スクロールしたらヘッダーメニューのカラー変更 */

/*◯スクロール前*/
.openbtn.header a,.header{
  color: #fff;
  transition: color 0.4s ease-out;
} 
/* ◯スクロール後*/
.openbtn.header.headerColorScroll a,.header.headerColorScroll{
	color: #000;
	transition: color 0.4s ease-out;
}


/*スクロール前 brown grade*/
header.header {
	background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,0.00) 0%,rgba(81,46,16,1.00) 100%);
	background-image: -moz-linear-gradient(90deg,rgba(255,255,255,0.00) 0%,rgba(81,46,16,1.00) 100%);
	background-image: -o-linear-gradient(90deg,rgba(255,255,255,0.00) 0%,rgba(81,46,16,1.00) 100%);
	background-image: linear-gradient(0deg,rgba(255,255,255,0.00) 0%,rgba(81,46,16,1.00) 100%);
}
/* スクロール後 透明*/
header.header.headerColorScroll{
	background: transparent;
}



/* スクロールしたらPCメニューの表示非表示 */

@media screen and (min-width: 900px) { /*pcのとき*/
	
/* ◯　スクロール前　なし */
.openbtn.header a,.openbtn.header{
  display: none;
  transition: color 0.4s ease-out;
} 
/* ◯　スクロール後　あり */
.openbtn.header.headerColorScroll a,.openbtn.header.headerColorScroll{
  display: block;
  transition: color 0.4s ease-out;
}

	
	
/* PCナビ　スクロール前 　あり */
#pc_vav a,#pc_vav{
  display: block;
  transition: color 0.4s ease-out;
} 
/* PCナビ　スクロール後　なし */
.headerColorScroll #pc_vav a,.headerColorScroll #pc_vav{
  display: none; 
  transition: color 0.4s ease-out;
}
	
}



/*==================================================
　左から右に線が伸びる（下部）
===================================*/

.gnavi li a{
    /*線の基点とするためrelativeを指定*/
	position: relative; 
}

.gnavi li.current a,
.gnavi li a:hover{
	color:#FFF;
}

.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 1px;
    background:#0481A2;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: left top;/*左上基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}


/*===================================
	スクロールするとヘッダー背景画像が拡大 
===================================*/
#top-img{
	position: relative;/*背景を設定するdivの基点とするためrelativeをかける*/
  	width: 100%;
	height:100vh;
 	overflow: hidden;/*はみ出しているところを隠す*/
}

#header-img{
  	position: fixed;/*背景を固定するためfixedをかける*/
	z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
  	top: 0;/*topの位置がJSで変化*/
	/*以下画面で背景画像を表示させるための指定*/
  	width: 100%;
	height:100vh;
	background: url("../images/back_top.jpg") no-repeat center center;/*背景画像の設定※オリジナルの画像に設定してください*/
	background-size:cover;
	transform-origin:center;/*変化する基点を中心からに設定*/
}


#container{
	position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
	z-index: 2;/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
	background: #fff;
}


/*歩み　中央に配置*/
#top-img p{
	transform: translate(-50%, -40%);
	z-index: 2;/*#header-imgよりも手前に配置*/
}



/*-------こころ歩み   ご縁---------*/

.text_ayumi{
	font-size: 3rem;
	height: 27rem; /*heiht必須　= 3rem*7L+0.6rem*7L   */
	line-height: 1.2;
}

.catchphrase .conjunction{/*と、の*/
	font-size: 2.5rem;
}

@media (min-width: 900px) {/*600以上大きく*/
.text_ayumi { 
	font-size: 5rem;
	height: 41rem; /*heiht必須　= 文字サイズrem*文字数L+文字間隔rem*文字間数L */

	}
	.catchphrase .conjunction{/*と、の*/
	font-size: 4rem;
}
}



/*---------------------------------
    	layout
-----------------------------------*/


/*============vertical common==================*/
.vertical {
  letter-spacing: 0.6rem;
  /*background:rgba(100,100,100,0.5);*/

	  display: inline-block;

  /* テキストを縦書きに指定 */
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}


/*============layout common==================*/

/*box中央　横方向*/

.center-outer{
  position: relative;
}
.center-inner{
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
}



/*============common==================*/

/*検証用　線*/
.border-v {border: solid 1px red ;}


.inline-block {display: inline-block;
}

.left {	text-align: left;}
.right {text-align: right;}
.center {text-align: center;}
.center-contents{margin: 0 auto;}
.center-left {text-align: center;}/*600以上でleft*/


.txt {display: inline-block; text-align: left; }

.white-text{color: #fff;}
.white {background:#fff;}

.glay-light {background: #ccc;}
.glay-dark {background: #333; color: #fff}

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

.photo-odd { margin-left: 50px;}
.photo-even { margin-right: 50px;}


/*////////////////////////////////////

			 flex

//////////////////////////////////////*/

 .flex { display: flex; }


@media (min-width: 600px) { 

/*---------------------------------
    flex  600以上
-----------------------------------*/
	
 .flexbox { display: flex; }
	
.flex-row-revers{
	flex-direction: row-reverse;/*逆順*/
}

/*横位置*/
.flex-right{
	justify-content: flex-end;/*右揃え*/
}
.flex-center{
	justify-content: center;/*中央揃え*/
}
.flex-between{
	justify-content: space-between;/*両端揃え*/
}
.flex-around{
	justify-content: space-around;/*均等配置*/
}

/*縦位置*/
.flex-align-start{align-items: flex-start;/*上揃え*/
}	
.flex-align-center{align-items: center;/*中央揃え*/
}
.flex-align-botttom{align-items: flex-end;/*下揃え*/
}
.flex-align-bottom-con{align-content: flex-end;/*複数行下揃え*/
}

	
	.center-left {text-align: left;}
}

/*-------------------------
		back.css
	.text-box　.catch　.copy
----------------------------*/

.text-box {
  width: 100%;
	margin-left: auto;
	margin-right: auto;

   /*
	background-color: rgba(0,0,0,0.5);
		border: solid 1px green;
	*/
}

.gray-box {
    padding: 50px 25px;
	width: 80%;
    max-width: 640px;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
}
.catch {
  text-align: center;
}
.copy {	/*border: solid 1px red;*/
  width: 85%;
	margin-left: auto;
	margin-right: auto;
}
@media (min-width:900px) { /*900以上*/
  .copy {
    width: 60%;
  }
}
section.copy { /*border: solid 1px green;*/
  margin-bottom: 5rem;
}


/*-----------------------------
	  base tag 
-------------------------------*/
section { 
	position: relative;
}
h2 { 
	font-size: 2rem;
	margin: 3rem 5rem;;
}

h3{	font-size: 1.8rem;}
h4{	font-size: 1.6rem;}
h5{	font-size: 1.4rem;}

rt {font-size: 1.2rem;}

dt {
	margin-top: 2rem;
	font-weight: bold;
}

.border{
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	margin: 100px auto;
	padding: 50px 0;
}
.border-radius{
	border-radius: 20px;	
}
/*-----------------------------
	  整体について headerかぶせ領域
-------------------------------*/
	/*　茶円背景 */

#concept{
	height: 100vh;
	padding: 20% 0;
	background-repeat: no-repeat;
	background-image: url(../images/wa_w.png);
	background-position: 70vw 20vh;
	background-size: 30%;
}


/*-----------------------------
	  01 からだとこころの歩み
-------------------------------*/

/*　base .ayumi*/
#ayumi {
	text-align: right;
		text-shadow: 0px 0px 10px rgba(80,52,27,0.70);

	
}
#ayumi h2{
	color: rgba(255,255,255,0.90);
	letter-spacing: 1rem;
	line-height: 1.5;
}
#ayumi p{
	margin-right: 3rem;
	color: #fff;
	width: 50%;
	display: inline-block;
	text-align: right;
}
@media (max-width:600px) { /*600以下*/
	#ayumi p{width: 80%;
  }
}
/*-----------------------------
	  02 症状
-------------------------------*/
#shojo p {
	margin: 2rem 0;
}

.interior img{
	position: absolute;
	z-index: -1;
	width: 35%;
	max-width: 200px;
}
.interior img:first-child{ /*掛け軸*/
	right: 0;
	top:8rem;
}
.interior img:nth-child(2){ /*ストーブ*/
	left: 0;
	top:50%;
}
.interior img:nth-child(3){ /*石床*/
	right: 0;
	bottom:-20%;
}
/*-----------------------------
	  03 施術例
-------------------------------*/
#example figure{
	margin: 100px auto;
}
#example figcaption{

	background:rgba(255,255,255,0.80);
	padding:30px;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

@media (min-width: 600px){/*以上*/
	#example figure{
	gap:30px;/*imgとcapの間*/
	}
	#example figure img{
	width: 50%;
	}
}




/* Before After */


#be-af figure {
		margin-top :50px;
		margin-bottom :50px;
}
#be-af .flex{
	gap:20px; /*imgとimgの間*/
}


/*-----------------------------
	 04  料金
-------------------------------*/

#price th {
	font-weight: normal;
	text-align: right;
	white-space: nowrap;
}
#price th,#price td{
	padding: 0.5rem 1rem;
	vertical-align: top;
}

@media (max-width: 600px){/*以下*/
	.trip {
		font-size: 1.2rem ;
	}
}


/*-----------------------------
	  05 ご予約
-------------------------------*/

.tel{
	margin: 2rem;
	font-family: "Times New Roman", Times, serif;
	font-size: 3rem;
}
.tel a::after {
	width: 90%; /*.gnav線の伸び*/
}
.tel a{
	color: #000;
}
.tel .fas {
	font-size: 2rem;
	opacity: 0.6;
}




#profile h3 img{
	width: 50px;
	vertical-align: middle;
	margin-right: 1rem;
	margin-bottom: 1rem;
}
#profile p{
	margin-top: 3rem;
}

.face{/*顔写真*/
	width: 80%;	
}

@media (max-width: 600px){/*以下*/
.face{/*顔写真*/
	width: 50%;	
}
}

/*-----------------------------
	  06 ご案内
-------------------------------*/


.map {
  margin: 4em 0;
	width: 100%;
	max-width: 600px;	height: auto;
}
.Gmap a{
	color: rgba(255, 255, 255, 1);
	border: 1px solid rgba(255, 255, 255, 0.40);
	background-color: rgba(255,255,255,0.30);
	padding: 0.8rem 4rem;
	text-decoration: none;
}

/*-----------------------------
	  07 院の四季
-------------------------------*/
	  
/* siki
	swiper_origin */



/* ご縁に */

#goen { /*section size*/
	margin-top: 30vh;
	background: url("../images/paint.png") no-repeat;
	background-position: right center;
	background-size: contain;
}


/*-----------------------------
	  08 footer
-------------------------------*/

.copyright {
	margin-top: 200px;
}