@charset "utf-8";

@media (max-width: 767px) {

body {
 -webkit-text-size-adjust: 100%;
}


header {
 margin: 0;  
 padding: 0;
}


/* トップバー・青グラデーション */
.img1 {
 margin: 0;  
 padding: 0;
}


/*//////////////////////////////////////////////////////////////////////////////////////////////*/
/* 縮小画面のメニュー指定 */

.container{
 position: relative; 
 }/* z-index用のclass指定 */
 
.nav-toggle {
 display: none;
 }
  
/* ハンバーガーボタン */
.btn-burger {
 position: absolute; /* 親要素（.header）を基準に絶対配置 */
 top: 2px;
 right: 0px;
 z-index: 30; /* ボックスの重なりの優先順位を指定。数値が大きいほど、手前（上）に配置される */
 display: block; /* ブロックレベル性質になるため、幅・高さを指定できる */
 width: 80px;
 height: 80px;
 background: url("../img/menu.png") center center / 60px 60px no-repeat; /* ハンバーガーボタンの画像を指定 */
 cursor: pointer; /* カーソルの形状を指定 */
}
   
/* メニューが開いたときの、ハンバーガーボタンの画像を指定 */
.nav-toggle:checked ~ .btn-burger {
 background: url("../img/close.png") center center / 60px 60px no-repeat;
}
   
/* ナビゲーション */
.nav {
 padding-top: 10px;
}
.global-Nav {
 display: none; /* 最初はメニュー（ul要素）を非表示にしておく指定 */
 margin: 0;
 padding-bottom: 10px;
 background-color: #f7f6f5; 
 position: absolute;
 z-index: 40;
}
.global-Nav li {
 margin: 0;
 padding: 10px;
 width: 780px;  /* メニュー1項目の横幅 */
}
.global-Nav a {
 display: block;  /* ブロックレベルで扱い、縦並びに表示している */
 color: #000;/* 文字色 */
 font-family: YuMincho,"ヒラギノ明朝 ProN","MS P明朝",serif; 
 font-size: 17px;
 padding-left: 2em;
}
 

/* メニューが開いたとき、<ul>を表示する */
.nav-toggle:checked ~ .nav .global-Nav {
 display: block;
}
 

/* ----------スマホ用・ナビゲーションのスタイル指定 ここまで---------- */
 
/* -------------------------- 
グローバルナビゲーションの装飾 
ドロップダウンメニューへ 
----------------------------- */
  
/* -------------------------- 
グローバルナビゲーション項目の装飾 
----------------------------- */
ul.global-Nav a:hover {
 background-color: #f7f6f5; /* メニュー項目にマウスが載ったときの背景色(パールホワイト) */
 color: #a9a9a9; /* メニュー項目にマウスが載ったときの文字色(薄グレー色) */
}
  
/* サブメニュー（ドロップダウンメニュー）は、とりあえず非表示に */
ul.global-Nav ul {
 display: none; /* 非表示にする */
}
  
/* -------------------------
ドロップダウンメニューの装飾 
----------------------------- */
ul.global-Nav ul {
 display: none; /* 標準では非表示にする */
 margin: 0px;/* ドロップダウンメニュー外側の余白 */
 padding: 0px; /* ドロップダウンメニュー内側の余白 */
 position: absolute; /* 絶対配置にする */
 z-index: 50!important;  /* ドロップダウンメニューを写真の上に表示 */
}
  
/* ----------------------------------------- 
ドロップダウンメニューがある場合に開く処理 
ドロップダウンメニューが1階層しか存在しない場合の記述 
------------------------------------------ */
ul.global-Nav li:hover ul {
 display: block; /* マウスポインタが載っている項目の内部にあるリストを表示する */
}
  
/* ----------------------------
ドロップダウンメニュー項目の装飾 
------------------------------- */
ul.global-Nav ul li {  
 width: 500px;  /* ドロップダウンメニュー1項目の横幅 */
 list-style: none;
 border-top: 1px dotted #a9a9a9; /* 項目上側の枠線(グレー色で1pxの点線) */
 background-color: #f7f6f5; 
}
ul.global-Nav ul li a {   
 line-height: 35px; /* ドロップダウンメニュー1項目の高さ */
 text-align: left; /* 文字列の配置 */
 padding-left: 1em; /* 文字列前方の余白 */
 font-weight: normal; /* 太字にはしない */
 background-color: #f7f6f5; 
 color: #000;
}
ul.global-Nav ul li a:hover {  
 background-color: #f7f6f5; /* ドロップダウン項目にマウスが載ったときの背景色(パールホワイト色) */
 color: #a9a9a9; /* ドロップダウン項目にマウスが載ったときの文字色(薄グレー色) */
}


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


/* メイン */
main {
margin: 0;
padding: 0;
}


/* メインの写真 */
p.main-photo-position {
 text-align: center; 
}

/* メインの写真 */
.main-photo {
 margin: 0;
 padding: 0;   
 width: 80%;
 height: 50%;
 text-align: center;    
 position: relative;
 padding-bottom: 30px; 
}


/* ヒーリングカテゴリー下・線太 */
.category-underline {
 height: 1.5px;
 background-color: #17184b;
 width: 100%;
 border: none;  
}


/* ヒーリングメニュー */
.menu {
 padding-bottom: 0em;
 line-height: 1.9;
 font-size: 17px;
 width: 100%;
 padding-left: 8%;

} 
.title {
 text-align: left;   
 font-family: YuMincho,"ヒラギノ明朝 ProN","MS P明朝",serif; 
 font-size: 25px;
 font-weight: bold;  
 margin-bottom: 0;
}
/* タイトル下・線太 */
.title-underline {
 height: 2px;
 background-color: #17184b;
 border: none;
}
.text {
 line-height: 1.7;
 padding-bottom: 100px;	
 margin-left: 8%;/*15%*/
 margin-right: 8%;/*15%*/
 font-size: 14px;
}

.healing-text {
 display: flex;   
 flex-direction: column-reverse;  
 margin-top: 10px;
 margin-bottom: 100px;
}

footer {
 margin: 0;  
 padding: 0;
}


/* ページトップへの全体のスタイル */  
p.page-top { 
 text-align: right;
 margin-right: 2em;
 margin-bottom: 7em;
 font-size: 16px;	
 font-family: YuMincho,"ヒラギノ明朝 ProN","MS P明朝",serif; 
}
.link {
 text-decoration: none;   
 color: #17184b;  
}


/* マウスオンで文字色を変える */
.link {
 display: inline-block; 	
 transition: all .1s ease 0s; 	
 text-decoration: none; 
} 
.link:hover { 	
 cursor: pointer; 	
 color: #a9a9a9;
}


.img2 {
 margin: 0;
 padding: 0;
/*下の隙間なくす*/
line-height: 1.0em;
vertical-align: bottom; 
} 

}/*スマホ版　767以下の}*/

/*７６８以上の指定をする----------------------------------------------------------------
------------------------------------------------------------------------------------
----------------------------------------------------------------------------------*/

@media screen and (min-width: 768px) {
    
header {
 margin: 0;  
 padding: 0;
}

/*トップバー・青グラデーション */
.img1 {
 margin: 0;
 padding: 0;
}

.nav-toggle {
 display: none;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////*/
/* ワイド画面のメニュー指定 */

/* ハンバーガーボタンを表示しない */
.btn-burger {
 display: none;/* 768px以上では使用しない */
}
      
.nav-toggle:checked ~ .nav .global-Nav {
 display: none;
}
  
   
/*////////////////////////////////////*/  
/* 横よこ・並びのナビに指定をする */
  
/* ブラウザがデフォルトで付けてしまう余白をリセット済み */
   
/* -------------------- */
/* グローバルナビゲーションの装飾 */
/* -------------------- */
   
.nav {
 margin: 0;
 padding: 0; 
 text-align: center; 
 padding-left: 15%;
 padding-right: 15%;
}
   
ul.global-Nav {
 margin: auto 0; /* メニューバー外側の余白 */
 padding: auto 0; /* メニューバー内側の余白 */
 background-color: #f7f6f5; /* バーの背景色(パールホワイト色) */
 display: flex;
 flex-direction: row;
 justify-content: space-between; 
 width: 100%;/* 画面の70%に表示・.navの左右paddingと合わせて画面いっぱい100%に表示する */  
}
     
ul.global-Nav li {
 display: inline-block;  /* 横並びに配置する */ 
 list-style-type: none;  /* リストの先頭記号を消す */
 position: relative; /* サブメニュー表示の基準位置にする */
 flex: 1 0 auto; /* メニュー余白幅を均等にする */         
 margin: 0;
 padding: 0;
 width: fit-content; /* 重要！！メニューの均等割付け・メニュー左右余白を均等に */
} 
ul.global-Nav a {
 background-color: #f7f6f5; /* メニュー項目の背景色(パールホワイト色) */
 color: #000; /* メニュー項目の文字色(鉄紺色) */
 line-height: 40px; /* メニュー項目のリンクの高さ(40px) */
 text-align: center; /* メインメニューの文字列の配置(中央寄せ) */
 text-decoration: none; /* メニュー項目の装飾(下線を消す) */
 font-weight: nomal; /* 太字にする */
 display: block; /* 項目内全域をリンク可能にする */
 font-size: 17px; 
 font-family: YuMincho,"ヒラギノ明朝 ProN","MS P明朝",serif; 
 margin: 0;
 padding: 0;
}
   
   
ul.global-Nav a:hover {
 background-color: #f7f6f5; /* メニュー項目にマウスが載ったときの背景色(パールホワイト) */
 color: #a9a9a9; /* メニュー項目にマウスが載ったときの文字色(薄グレー色) */
}
      
/* サブメニュー（ドロップダウンメニュー）は、とりあえず非表示に */
ul.global-Nav ul {
 display: none; /* 非表示にする */
}
      
/* ----------------------
ドロップダウンメニューの装飾 
----------------------- */
ul.global-Nav ul {
 display: none; /* 標準では非表示にする */
 margin: 0px;/* ドロップダウンメニュー外側の余白 */
 padding: 0px; /* ドロップダウンメニュー内側の余白 */
 position: absolute; /* 絶対配置にする */
 z-index: 2147483647 !important;  /* ドロップダウンメニューを写真の上に表示 */
}
      
/* ----------------------------------------- 
ドロップダウンメニューがある場合に開く処理 
ドロップダウンメニューが1階層しか存在しない場合の記述 
------------------------------------------ */
ul.global-Nav li:hover ul {
 display: block; /* マウスポインタが載っている項目の内部にあるリストを表示する */
}
      
/* ---------------------------
ドロップダウンメニュー項目の装飾 
---------------------------- */
ul.global-Nav ul li {  
 width: 360px;  /* ドロップダウンメニュー1項目の横幅 */
 list-style: none;
 border-top: 1px dotted #a9a9a9; /* 項目上側の枠線(グレー色で1pxの点線) */
 background-color: #f7f6f5; 
}
ul.global-Nav ul li a {   
 line-height: 35px; /* ドロップダウンメニュー1項目の高さ */
 text-align: left; /* 文字列の配置(左寄せ) */
 padding-left: 0px; /* 文字列前方の余白 */
 font-weight: normal; /* 太字にはしない */
 background-color: #f7f6f5; 
 color: #000; 
}
ul.global-Nav ul li a:hover {  
 background-color: #f7f6f5; /* ドロップダウン項目にマウスが載ったときの背景色(パールホワイト色) */
 color: #a9a9a9; /* ドロップダウン項目にマウスが載ったときの文字色(薄グレー色) */
}
   
   
/*//////////////////////////////////////////////////////////////////////////////////////////////*/
   

/* メイン */
main {
 margin: 0;  
 padding: 0
}

/* メインの写真 */
p.main-photo-position {
 text-align: center;
}
.main-photo {
 margin: 0;   
 padding: 0;
 width: 60%;
 height: 40%;
 padding-top: 20px; 
 text-align: center;
}


/* ヒーリングカテゴリー下・線太 */
.category-underline {
 height: 1.5px;
 background-color: #17184b;
 width: 100%;
 border: none;  
}

/* ヒーリングメニュー */
.menu {
 padding-bottom: 0em;
 line-height: 1.9;
 font-size: 17px;
 width: 30%;
}
.title {
 text-align: left;   
 font-family: YuMincho,"ヒラギノ明朝 ProN","MS P明朝",serif; 
 font-size: 30px;
 font-weight: bold;  
}
/* タイトル下・線太 */
.title-underline {
 height: 2px;
 background-color: #17184b;
 width: 100%;
 border: none;
}

.text {
 font-size: 17px;  
 line-height: 1.7;
 padding-bottom: 2em;	
 width: 60%;
 margin-left: 10px;
}

.healing-text {
 display: flex;
 justify-content: space-between;   
 padding-left: 15%;
 padding-right: 15%;
 margin-top: 100px;
 margin-bottom: 4em;
}


footer {
 margin: 0;  
 padding: 0;
}


/* ページトップへの全体のスタイル */  
p.page-top { 
 text-align: right;
 margin-bottom: 7em;
 padding-right: 17em;
 font-size: 16px;	
 font-family: YuMincho,"ヒラギノ明朝 ProN","MS P明朝",serif; 
}   
.link {
 text-decoration: none;   
 color: #17184b;  
}


/* マウスオンで文字色を変える */
.link {
 display: inline-block; 	
 transition: all .1s ease 0s; 	
 text-decoration: none; 
} 
.link:hover { 	
 cursor: pointer; 	
 color: #a9a9a9;
}


.img2 {
 margin: 0;
 padding: 0;
/*下の隙間なくす*/
line-height: 1.0em;
vertical-align: bottom; 
} 


}  /* 768以上の{消してはダメ　*/