@charset "utf-8";

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
全デバイス共通のスタイルとスマートフォンおよび小型タブレット向けレイアウト指定
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/*全体のスタイル調整*/
*{
  box-sizing: border-box;
}

/*=========================================
bodyなど共通部分の初期スタイル設定
=========================================*/
body {
	width: 100%;
	color:#000;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	margin: 0px;
	padding: 0px;
	background-color: #fff;
}

/*初期スタイル調整*/
h1,
h2,
h3{
	margin-top: 0;
	line-height: 1.5;
	letter-spacing: 0.2em;
	text-align: center;
}

h2  {
    font-size: 24px;
	padding: 5px;
}

h3  {
    font-size: 20px;
	padding: 5px;
}

h4  {
    font-size: 18px;
	padding: 5px;
}
p{
	margin-top: 0;
	margin-bottom: 0.5em;
	text-align: justify;
}

address{
	font-style: normal;
}

a{
	color: #666;
	text-decoration: none;
}

a:hover,
a:focus{
	color: #000;
	text-decoration: none;
}

ul{
	margin: 1em 0;
	padding: 0;
	list-style: none;
}

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

section{
	padding: 60px 0;
}

/*h2タイトル等の共通設定*/

.h2-title{
	font-size: 28px;
	text-align: center;
	margin-bottom: 0.5em;
	background: #dfefff;
    box-shadow: 0px 0px 0px 5px #dfefff;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
}

.txt-center{
	text-align: center;
}
.txt-lead{
	font-weight: 700;
}

.txt-white{
	color: #FFFFFF;
}

.btn{
	display: block;
	padding: 10px 15px;
	border-radius: 8px;
	margin: 10px auto;
	border: none;
	color: #fff;
	background: #6699ff;
	text-align: center;
	width:60%;
}

.inner{
	padding: 0 15px;
	margin: 0 auto;
}

.sp-only{
	display: block;
}

.pc-only{
	display: none;
}

@media only screen and (min-width : 768px ){
	.h2-title{
		font-size: 36px;
	}
	.inner{
		max-width: 1200px;
	}
	.sp-only{
		display: none;
	}
	.pc-only{
		display: block;
	}
	
}
/*ボックスレイアウトの共通設定*/
.fcont1-3{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.fitem1-3{
	background: #09b;
	color: #fff;
	padding: 1em;
	margin: 0 1em 1em;
	flex-basis: 30%;
}

.fitem1-3 dt{
	margin-bottom: 10px;
	font-size: 1.2em;
	font-weight: 700;
	text-align: center;
}

.fcont1-2{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.fitem1-2{
	color: black;
	padding: 1em;
	margin: 0 1em 1em;
	flex-basis: 46%;
}

.fitem1-2full{
	color: black;
	padding: 0;
	margin: 0;
	flex-basis: 46%;
}

.fitem1-3sym{
	padding: 1em;
	margin: 1em 1em 1em;
	flex-basis: 28%;
	background: #09b;
	color: #fff;
}

.fitem1-3sym h4{
	text-align: center;
}

@media only screen and (min-width : 768px ){
	.fcont1-3{
		flex-direction: row;
		flex-wrap: wrap;
	}
	.fitem1-3{

	}
	.fcont1-2{
		flex-direction: row;
		flex-wrap: wrap;

	}
	.fcont1-2full{
		flex-direction: row;
		flex-wrap: wrap;
	}
}


/*=========================================
ヘッダーのスタイル１ハンバーガーボタン
=========================================*/

/*=========================================
ヘッダーのスタイル２グローバルナビ
=========================================*/


/*=========================================
ヘッダーのスタイル３ボトムナビゲーション
=========================================*/

.bottom-menu {
	position: fixed;
	left: 0;
	bottom: 0;
	background: white;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	z-index: 10;
}
.bottom-menu-item {
	width: 100%;
	padding: 5px;
	list-style: none;
	text-align: center;
	background-color:#D0EBD8;
}

.bottom-menu-item a{
	color: black; 
}

.bottom-menu a span {
	display: block;
	font-size: 14px;
	text-align: center;
}


/*　PC向けおよび大型タブレット向けのレイアウト指定：769px-　*/
@media only screen and (min-width : 768px ){

.bottom-menu {
		display: none;
}
	
}


/*=========================================
メインコンテンツのスタイル(共通)
=========================================*/


/*トップページのヒーローイメージのCSS*/
.mv-area{
	width: 100vw;
	height: 90vh;
	background-size: cover;
	background-position: center center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.mv-title{
	margin-top: 0px;
	font-size: 40px;
}
.mv-titlesub{
	margin-top: 0px;
	font-size: 32px;
}

.mv-text{
	font-size: 20px;
	letter-spacing: 1em;
}

@media only screen and (min-width : 768px ){
	.mv-area{
		width: 100%;
		height: 100vh;
	}
	.mv-title{
		margin-top: 180px;
		font-size: 50px;
	}
	.mv-titlesub{
		margin-top: 0px;
		font-size: 50px;
	}

}

/*sectionのCSSスタイル*/
.nayami-area{
	background-color: antiquewhite;
}
.kokorogake-area{
	background-color:#CCEAD6;
}
.nagare-area{
	background-color:beige;
}
.negai-area{
	background-color:linen;
}
.fee-area{
	background-color:#C6E3EE;
}


/*各ページのヒーローイメージのCSS*/


/*各ページのヒーローイメージ等の背景画像のCSS*/
.indexgazou{
	background-image: url("../logogifnado/index/pagetoptransition1.jpg");	
}
.conceptgazou1{
	background-image: url("../logogifnado/index/conceptgazou2.jpg");	
}
.conceptgazou2{
	background-image: url("../logogifnado/index/conceptgazou1.jpg");	
}

/*=========================================
目次ありページの目次レイアウト
=========================================*/
.mokuzi {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0;
}
.mokuzi li {
  position: relative;
  padding: 0.5em;
  line-height: 1.5em;
  background: #f1f8ff;
  border-left : solid 35px #5c9ee7;
  margin-bottom: 5px;
}
.mokuzi li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: -35px;
  width: 35px;
  height: 1em;
  line-height: 1;
  text-align: center;
}

/*=========================================
「ここがポイント」のレイアウトリストCSS
=========================================*/
.point {
  border: solid 2px #ffb03f;
  padding: 0.5em;
  position: relative;
  margin-top: 2em;
}
.point li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none!important;
}
.point li:last-of-type {
  border-bottom: none;
}
.point li:before {
  /*リスト内のアイコン*/
  font-family: "Font Awesome 5 Free";
  content: "\f138";/*アイコン種類*/
  font-weight: 900;
  position: absolute;
  left : 0.5em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
}
.point li:after {
  /*タイトルタブ*/
  background: #ffb03f;
  color: #fff;
  font-weight: bold;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 7px;
  content: "POINT";/*タブの文字*/
  letter-spacing: 0.05em;/*字間*/
}

/*=========================================
チェックリスト、症状まとめのレイアウトリストCSS
=========================================*/
.sympcheck {
  background: #fffcf4;
  border-radius :8px;/*角の丸み*/
  box-shadow :0px 0px 5px silver;/*5px=影の広がり具合*/
  padding: 0.5em 2em 0 2em;
  margin-bottom: 1em;
}

.sympcheck h3{
	  text-align: center;
	  border-bottom: solid 1px black;
	  font-size: 2em;
}

.checklist li {
  line-height: 1.5;
  padding: 0.5em 0.5em 0.5em 1.5em;
  list-style-type: none!important;/*ポチ消す*/
}

.checklist li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  position: absolute;
  left : 3em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
  font-weight: 900;
}



/*=========================================
Q&Aページ、質問のアコーディオンの設定
=========================================*/
.accordionqa {
	width:80%;
	margin: 0 auto 20px;	
}

.accordionqa dt{
	font-size:16px;
	color:#fff;
	background-color: darkcyan;
	padding: 8px 12px;
	border-radius: 3px;
	margin: 0 0 2px;
}

.accordionqa dd{
	font-size:14px;
	color:black;
	background-color:antiquewhite;
	padding: 10px 20px;
	margin: 0 0 2px;
}


/*　PC向けおよび大型タブレット向けのレイアウト指定：769px-960px　*/
@media only screen and (min-width : 768px ){
#contents dl.accordionqa dt{
	font-size:20px;
	
}

#contents dl.accordionqa dd{
	font-size:20px;
}
	
}
/*=========================================
ページトップへボタンのスタイル
=========================================*/

/*=========================================
フッターのスタイル
=========================================*/
.copyright{
	text-align: center;
	width: 100%;
	font-size: 16px;
	line-height: 1.5em;
	margin: 0px;
	padding: 0px;
	background-color: #09b;
	color: #fff;
}

#wrapper{
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 48px;
	overflow: auto;
}
.tab-bar{
	width: 100%;
	height: 48px;
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
		
}
.tab-bar ul{
	list-style: none;
}

.tab-bar li{
	float: left;
	width: 25%;
	padding:0px;
	border: 0px;
	margin: 0px;
	height: 48px;
	background-color: #BBE1A5;
	position: relative;
}

.tab-bar a{
	cursor: pointer;
	text-align: center;
    position: relative;
	display: block;
	height:48px;
	padding: 0px;
	font-size:16px;
	color: #FFF;
	text-decoration: none;
	line-height: 48px;
	background: #58B433;
	border-radius: 4px;
	
}

/*　PC向けおよび大型タブレット向けのレイアウト指定：769px-960px　*/
@media only screen and (min-width : 768px ){
	.tab-bar{
		display: none;
	}
}

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
メディアクエリによる切り替え
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/*　PC向けおよび大型タブレット向けのレイアウト指定：769px-960px　*/
@media only screen and (min-width : 768px ){
}

/*　PC向けのレイアウト指定：961px以上では固定レイアウト　*/
@media only screen and (min-width: 961px){
}