@charset "UTF-8";

*{
	 /*outline: 2px blue solid;*/
	 font-family: "Hina Mincho", serif;
	 color: #5c5343;
}

#sp-nav{
	display: none;
}

.header-menu{ /*メニュー追従ver*/
	background-color:white;
	position: fixed;
	top: 0;
	height: 100px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	z-index: 2;
}

h1{
	padding-left: 30px;
	padding-bottom: 10px;
}

h2{
	font-size: 32px;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 30px;
}

.marker {
	background: linear-gradient(transparent 60%, #fdf4a7 60%);
  }

.kome{
	color: gray;
	font-size: smaller;
}

.line{
		/*記事内のリンクにアンダーラインつける*/
	text-decoration: underline;
  }

a:hover { 
	text-decoration: none;
	opacity: 0.5;
 } 

.anchor {
	/*ページ内リンクの場合メニューの高さを引く*/
	padding-top: 100px;
  }

#pc-nav ul{
	display: flex;
	justify-content: space-between;
}

#pc-nav ul li{
	padding: 10px 20px;
}

#pc-nav ul li:hover{
	opacity: 0.5;
}

.container img{
	width: 100vw;
	padding-top: 100px;/*メニュー追従の場合、メニューの高さを引く*/
}

main{
	padding-top: 0px;/*メニュー追従の場合、メニューの高さを引く*/
	line-height: 2;
}

#menu1,#menu2,#menu3,#menu4,#menu5{
    padding-top: 80px;
    padding-bottom: 80px;
}

#menu1,#menu3,#menu5{
    background-color:white;
}

#menu2,#menu4{
    background-color:#ffefef;
}

/*========= 固定メニュー =========*/

.kotei{
    position: fixed;
    top: 310px;                  /*上から100pxで固定*/
    right: 20px;                 /*右から20pxで固定*/
    font-size: 16px;
    color: #fff;
    background-color: #fe9b9b;
    border-radius: 24px;
    text-decoration: none;
    text-align: center;
	padding-top: 24px;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 24px;
    writing-mode:vertical-rl ;   /*文字を縦書きに*/
}

/*========= サロンについて =========*/

#menu1 img{
	display: block;
	margin: 0 auto;
	width: 500px;
	border-radius: 30px;
	margin-bottom: 60px;
	}

/*========= サービス内容 =========*/

.contents-flex{
    display: flex;
	margin-bottom: 30px;
}

h3{
	background-color: #ffffff;
	font-size: 1.6em;
	text-align: center;
	padding-top: 17px;
	padding-bottom: 23px;
}

.contents-title{
	background-color: #ffffff;
	padding: 10px;
	text-align: center;
}

.contents-title img{
	width: 250px;
	border-radius: 30px;
}

.contents-text{
	background-color: #ffffff;
	margin-bottom: 30px;
	padding: 10px;
}

.price{
	font-size: 20px;
	text-align: center;
	font-weight: bold;
}	

.price span{
	font-size: 50px;
	color: darkred;
}


/*========= ご入会の流れ =========*/

.nagare{
	width:60%;
	margin: 30px auto;
	padding: 20px;
	background-color: #ebebea;
}

/*矢印*/
.img-nagare{
display: block;
margin: 0 auto;
width: 60px;
}

/*画像*/
.nyuukai{
	display: block;
	margin: 0 auto;
	width: 500px;
	border-radius: 30px;
	margin-bottom: 60px;
	}

.box1 {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #FFF;
    border: solid 3px #f68a8a;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box1 p {
    margin: 0; 
    padding: 0;
}

/*========= 質問 =========*/

#menu4 img{
	display: block;
	margin: 0 auto;
	width: 500px;
	border-radius: 30px;
	margin-bottom: 60px;
	}


.qa dt {
    margin-bottom: 1em;
    color: #333333;
    font-weight: 600;
}

.qa dt::before,
.qa dd::before {
    margin-right: .4em;
}

.qa dt::before {
    content: "Q.";
}

.qa dd {
    margin: 0 0 2.5em;
    padding: 1em 1.5em;
    background-color: #ffffff;
}

.qa dd::before {
    content: "A.";
}

/*========= 入会ボタン =========*/

a.btn01{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 50px;
  position: relative;
  background: #ffffff;
  border: 1px solid #fe9b9b;
  border-radius: 30px;
  box-sizing: border-box;
  padding: 0 25px 0 25px;
  color: #fe9b9b;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
  margin: 50px auto;
}

a.btn01:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fe9b9b;
  border-right: 2px solid #fe9b9b;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -6px;
}

/* ホバー時、背景が白になる */

.btn01:hover:before {
	border-top: 2px solid #fe9b9b;
	border-right: 2px solid #fe9b9b;
  }

.btn01:hover {
  background: #ffffff;
  color: #fe9b9b;
}


/*========= プロフィール =========*/

#menu5 img{
	display: block;
	margin: 0 auto;
	width: 300px;
	}

/*=========  =========*/

.wrap{
	width: 900px;
	margin: 0 auto;
}

.wrap p{
	margin-bottom: 20px;
}


ul.list{
    margin: 1rem 0; /* 枠の外の余白 */
    padding: 1rem 1.5rem; /* 枠の中から文字までの余白 */
    color:#AAA; /* 文字色 */
    border: solid 1px #D3D6Db; /* リストの周りに枠をつける */
    border-radius:10px; /* 枠の角を丸くする */
}
ul li.list{
    list-style:none; /* デフォルトのリストのスタイルはなしに */
}
ul.list li::before {
    content: '●'; /* リストのスタイルを＊にします */
    color: #EEB1C0; /* リストのスタイルの色をピンクに */
    padding-right: 5px;/* リストの番号と文字の間に隙間をあける */
}







footer{
	/*height: 60px;*/
	background-color: #cac5c5;
	/*padding-top: 5px;*/
}

footer p{
	font-size: 14px;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

footer p a{
	text-decoration: underline;

}

/*========= ボタンのためのCSS =========*/

/*==================================
　MENUがCLOSEに
===================================*/

/*ボタン外側*/
.openbtn{
	/*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
	display: none;
	position: fixed;
	z-index: 2;
	top:10px;
	left:10px;
	background:#5c5343;
	cursor: pointer;
    width: 50px;
    height:50px;
	border-radius: 5px;
}

/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 5px;
	background: white;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:13px;	
}

.openbtn span:nth-of-type(2) {
	top:19px;
}

.openbtn span:nth-of-type(3) {
	top:25px;
}

.openbtn span:nth-of-type(3)::after {
	content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
	position: absolute;
	top:5px;
	left:-3px;
	color: white;
	font-size: 0.6rem;
	text-transform: uppercase; /* 大文字で表示 */
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/

.openbtn.active span:nth-of-type(1) {
    top: 14px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 26px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(3)::after {
	content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);/*その場で45度半時計回りに傾き、３本目の線に付いていく*/
	top:5px;
	left:1px;
}




@media screen and (max-width:1000px){

#pc-nav{
	display: none;
}

h1{
	margin: 0 auto;
	padding-left: 0px;
}

.wrap{
	width: 90%;
}

/*========= サロンについて =========*/

#menu1 img{
	width: 95%;
	}

/*========= ご入会の流れ =========*/

.nyuukai{
	width: 95%;
	}

	.nagare{
		width:80%;
	}

/*========= 質問 =========*/

#menu4 img{
	width: 95%;
	}
/*========= ナビゲーションのためのCSS =========*/

#sp-nav{
	display: block;
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 1;
    /*ナビのスタート位置と形状*/
    left:-120%;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:white;
    /*動き*/
	transition: all .6s;
	/*position: fixed;を指定したハンバーガーメニューをスマホの時にスクロールさせる*/
	height: 100%;
	overflow: auto;
}

/*アクティブクラスがついたら位置を0に*/
#sp-nav.panelactive{
    left: 0;
}

/*ナビゲーション*/
#sp-nav ul {
	display: block;
    position: absolute;
    /* z-index: 1; */
    top:100px;
	left:50%;
	transform: translateX(-50%);
    /* transform: translate(-50%,-50%); */
}

/*リストのレイアウト設定*/

#sp-nav li{
	list-style: none;
    text-align: center; 
	padding: 10px;
	border-bottom: 1px #967942 solid;
}

#sp-nav li:hover{
	opacity: 0.5;
}

#sp-nav li a{
	color: #5c5343;
	text-decoration: none;
	padding:20px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}

.openbtn{
	display: block;
}

}