@charset "utf-8";
/* CSS Document */

body {
   margin: 0;
   padding: 0;
   font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-family:"Font Awesome 5 Free","Font Awesome 5 Brands";
}
html { scroll-behavior: smooth;}

.inner {
	max-width: 1080px;
	width: 98%;
	margin: 0 auto;
	display: block;
	overflow: visible;
	position: relative;
	//border: 1px solid #ddd;
}
.flex-wrap {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.flex-wrap-btw {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.pc-only {
	display: block;
}
.sp-only {
	display: none;
}
.tb-only {
		display: none;
	}
.pc-only--none {
	display: none
}


@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/

.inner {
	width: 100%;
	padding: 0 1.5%;
}
.pc-only {
	display: none;
}
.tb-only {
		display: block;
	}
.sp-only {
	display: none;
}
.pc-only--none {
	display: block
}
}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/

.inner {
	width: 96%;
	margin: 0 2%;
}
.tb-only {
		display: none;
	}
.pc-only {
	display: none;
}
.sp-only {
	display: block;
}
.pc-only--none {
	display: block
}
	
}

/*==============================
背景・装飾系要素
==============================*/
.BgEB6C70 {
	background-color: #EB6C70;
}
.BgFACBCA {
	//background-color: #FACBCA;
	background: rgba(255,203,202,0.8);
}
.BgE7C78B{
	background-color: #E7C78B;
}
.parallax1, .parallax2, .parallax3, .parallax4, .parallax5, .parallax6, .parallax7, .parallax8 {
	position: fixed;
	height: auto;
	z-index: -3;
}
.parallax1 {
	left: -10%;
	top:0px;
	width: 400px;
}

.parallax2 {
	right: -5%;
	top: 500px;
	width: 300px;
}
.parallax3 {
	left: 40px;
	top: 0px;
	width: 400px;
}

.parallax4 {
	right: -100px;
	top: 0px;
	width: 400px;
}
.parallax5 {
	right: -50px;
	top: 0px;
	width: 200px;
}

.parallax6 {
	right: -30px;
	top: 0px;
	width: 400px;
}

.parallax7 {
	left: -100px;
	top: 0px;
	width: 400px;
}
.parallax8 {
	left: 150px;
	top: 0px;
	width: 200px;
}




@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/

.parallax1 {
	left: -20%;
	top:0px;
	width: 400px;
}

.parallax2 {
	right: -20%;
	top: 500px;
	width: 300px;
}
.parallax3 {
	left: -20%;
	top: 0px;
	width: 400px;
}

.parallax4 {
	right: -20%;
	top: 0px;
	width: 400px;
}
.parallax5 {
	right: -20%;
	top: 0px;
	width: 200px;
}

.parallax6 {
	right: -20%;
	top: 0px;
	width: 400px;
}

.parallax7 {
	left: -20%;
	top: 0px;
	width: 400px;
}
.parallax8 {
	left: -20%;
	top: 0px;
	width: 200px;
}
}

/*==============================
フォント要素
==============================*/

h1 {
	font-size: 4rem;
	color: #6A6A6A
}

h2 {
	font-size: 80px;
	color: #F9ABA6;
}
h3 {
	width: 100%;
	font-size: 25px;
	margin-bottom: 35px;
	z-index: 10
}
.align-center {
	width: 100%;
	//text-align: center
}
.caution {
	text-indent: -1em;
	padding-left: 1em;
	color: #7A7A7A;
	font-size: 0.8em;
}

.Rochester {
	font-family: 'Rochester', cursive;
}
.Sofia {
	font-family: 'Sofia', cursive;
}
.ShipporiMincho {
	font-family:'Shippori Mincho', serif;
}

.text--white {
	color: #FFF;
	text-shadow: none;
}
span.highlilght {
  position: relative;
  background: linear-gradient(transparent 50%, yellow 50%);
	font-weight: bold;
	font-size: 1.2em
}

.wf-roundedmplus1c { font-family: "M PLUS Rounded 1c"; }
@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
	.white-shadow {
		text-shadow: 0px 2px 2px #fff;
	}
}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/
	
h1 {
	position: absolute;
	font-weight: bold;
    font-size: 3vmax;
    top: 49px;
    left: 32%;
  transform:translate(-50%,-50%);
	width: 100%;
	text-align: center;
	color: #222222;
	text-shadow: 2px 2px 4px #ffffff;
}
span.h1highlilght {
  position: relative;
  background: linear-gradient(transparent 0%, yellow 0%);
}
	h2 {
		font-size: 7vmax
	}
h3 {
	width: 100%;
	font-size: 2.5vmax;
	margin-bottom: 35px;
	z-index: 10
}
	
}


/*==============================
ヘッダー&ナビ要素
==============================*/
#header {
	width: 100%;
	height: 65px;
	position:fixed;/*固定する*/
    top: 0;/*ブラウザの上からの距離はゼロ*/
	z-index: 999;
    overflow: hidden;
}
nav {
	max-width: 1080px;
	height: auto;
	padding: 8px 0;
	margin: 0 auto;
	display: block;
}

#navi {
}
.logo-area{
	width: 15%;
    text-align: center;
}
p.logo {
	color: #ffffff;
	font-size: 35px;
}

div.global-navigation {
	width: 80%;
	margin-left: 5%;
    padding-top: 19px;
}
div.global-navigation ul {
    line-height: 24px;
}

div.global-navigation ul li {
	width: 16%;
	text-align:center;
}



.global-navigation ul li a{
  position: relative;
  text-decoration: none;/*デフォルトで下線を非表示*/
  color: inherit;
  margin-bottom: 1rem;
color: #fff
}
/**** ホバーでブロックが出現するリンク ****/
.global-navigation ul li a:after{
  position: absolute;
  bottom: -10px;
  left: 0;
  content: '';
  width: 100%;
  height: 0; /*下線の太さ*/
  background: #E7C78B; /*下線の色*/
  transition: all .3s; /*アニメーション速度*/
}
.global-navigation ul li a:hover:after {
  height: 8px;
}



.gold-line {
	background: url("../img/gold-line.png") no-repeat center left;
	background-size: cover;
	height: 7px;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 100%;
    transform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
}


@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
	#header {
    padding-left: 10px;
	}
	.header--text {
		text-shadow: none;
		font-weight: normal;
		font-size: 1.2vmax;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
	}


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

  ここから下がハンバーガーメニュー  に関するCSS

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

/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 45px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #fff;
  transition: 0.5s;
  position: absolute;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
}

	
	
	
	
	
/* メニューのデザイン*/
.drawer-content {
  width: 100%;
  position: fixed;
  top: 65px;
  left: 102%;/* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #EB6C70;
  transition: .5s;
    box-shadow: 0px 0px 4px 2px rgba(0,0,0, 0.25);
}
	ul.drawer-list {
		width: 95%;
		margin: 5px auto 0;
	}
	
	.drawer-item {
		width: 30%;
		text-align: center;
		color: #FFFFFF;
    padding-bottom: 10px;
	}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 0;/* メニューを画面に入れる */
}

}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/
	
.header {
    /* display: flex; */
    /* justify-content: space-between; */
    /* align-items: center;*/
  padding: 0 20px;
  background: #EB6C70;
}

.logo {
  font-size: 24px;
}

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

  ここから下がハンバーガーメニュー
  に関するCSS

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

	.h1--text {
	}
	.header--text {
		text-shadow: none;
		font-weight: normal;
		font-size: 1.2vmax;
    position: absolute;
    top: 50%;
    left: 56%;
		
	}
/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 45px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #fff;
  transition: 0.5s;
  position: absolute;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
}

	
	
	
	
	
/* メニューのデザイン*/
.drawer-content {
  width: 100%;
  position: fixed;
  top: 65px;
  left: 102%;/* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #EB6C70;
  transition: .5s;
    box-shadow: 0px 0px 4px 2px rgba(0,0,0, 0.25);
}
	ul.drawer-list {
		width: 95%;
		margin: 5px auto 0;
	}
	
	.drawer-item {
		width: 30%;
		text-align: center;
		color: #FFFFFF;
    padding-bottom: 10px;
	}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 0;/* メニューを画面に入れる */
}

	
}



/*==============================
メインコンテンツ 要素
==============================*/
main {
	position: relative;
}

section {
	padding: 70px 0;
	//margin-bottom: 50px
}

article {
	margin-bottom: 80px;
}
 

@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/
}

/****** アイキャッチエリア ******/
#firstview {
	margin-top: 20px;
	height: 500px;
}
.header-title {
	margin-top: 100px;
    margin-left: 5%;
}
.header-img {
	position: absolute;
	right:-35%;
	top: 97%;
	margin-right: 0%;
	width: 600px;
	padding-bottom: 50%;
	background: url("../img/gigimage.png") no-repeat center center;
	background-size: contain;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
	z-index: -3
}

.vedio-contaner {
	max-width: 550px;
  width:100%; /* 任意の横幅を指定 */
	margin: 2em 0
}

.vedio-contaner iframe {
  width: 100%; /* 任意の横幅を指定 */
  height:100%;
  aspect-ratio: 16/9;
}

@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/
	
	
#firstview {
	margin-top: 20px;
	height: auto;
    padding-bottom: 72%;
	overflow: hidden;
}
	.header-title {
    margin-top: 0px;
    margin-left: 5%;
}
.header-img {
    position: absolute;
    top: 126px;
    left: 81%;
    margin-right: 0%;
    width: 100%;
    padding-bottom: 100%;
    background-size: contain;
    z-index: -3;
}
}






/****** コンセプト ******/
#concept {
	margin-top: -100px;
	margin-bottom: 50px
}
.concept--wrap {
	width: 90%;
	margin: 0 auto;
	border-left: 3px solid #F9ABA6;
	padding:0 2% 2%;
}
.concept--text {
	font-size: 14px;
	margin-top: 30px;
}

@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
	
	
}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/
	
}




/****** アバウト ******/
#about {
	position: relative;
}

.about {
	margin-bottom: 50px;
	position: relative;
}
.title--about {
	position: absolute;
	top: -160px;
	left: 4%;
}
.anchor--about { /*ページ内リンクの微調整*/
    display: block;
    padding-top: 150px;
    margin-top: -70px;
}

.AboutLeft {
	width: 23%;
	background-size: contain;
	margin-left: 20px;
}

.about-img-area {
	width: 238px;
	height: 306px;
	border-radius: 10px;
}
.about-img-area img {
	object-fit: cover;
	border-radius: 10px;
	box-shadow: -21px 28px 0 0 #fff;
}


.AboutRight {
	width: 73%;
	color:#303030;
}

.about--title{
	font-size: 16px;
}
.about--name-wrap {
  display: flex;
  justify-content: space-between;
	border-bottom: 1px solid #6A6A6A;
	padding:0;
	margin-bottom: 15px;
	position: relative;
}
.about--name {
	font-size:30px;
	font-weight: bold;
    margin-bottom: 10px;
}
.about--insta {
	position: absolute;
	bottom:10px;
	right: 0;
	font-size: 18px;
}
.about--insta i {
	font-size: 35px;
	padding-right: 8px;
}

.fa-instagram {
	color: #FC70B1;
	background: -webkit-radial-gradient(33% 100% circle, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF);
  background: radial-gradient(circle at 33% 100%, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.img--face {
	display: none
}

@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
	
.title--about {
	position: absolute;
	top: -160px;
	left: 38%;
}
	.AboutLeft  {
		width: 34%;
		}
	
	.about-img-area {
		width: 100%
	}
	
	.about-img-area img {
    margin-top: -37px;
	}
	.AboutRight  {
		width: 60%;
		}
}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/

.anchor--about { /*ページ内リンクの微調整*/
    display: block;
    padding-top: 190px;
    margin-top: -70px;
}
	.AboutLeft  {
		width:100%;
		}
	.about-img-area {
		width: 60%;
		height: auto;
		margin: 0px auto 20px;
	}
	
	.about-img-area img {
	box-shadow: 0 0 0 0 #fff;
		border: 5px solid #fff;
	}
	
.title--about {
	position: absolute;
    top: -13%;
    left: 50%;
    transform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
}	
.about {
    margin-bottom: 50px;
    padding: 30px 0;
}
.AboutRight {
	width: 100%;
	margin-left: 0;
	color:#303030;
	
}
	.title--about, .about--title, .about--name {
		//padding-left: 150px;
	}
.about--name-wrap {
  display: flex;
	align-items: baseline;
	}
.about--name {
	font-size:30px;
	font-weight: bold;
    margin-bottom: 10px;
	width: 100%
}
.about--insta {
	position: initial;
	font-size: 18px;
	width: 100%;
	padding-bottom: 8px;
	text-align: right;
}
.about--insta i {
    font-size: 20px;
	padding-right: 5px;
	}
}




/****** セッションについて ******/


ul.window {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
	width: 95%;
	margin: 0 2.5% 0;
	text-align: center
}
ul.window li {
	width: 28%;
	border: 2px solid #E7C78B;
	padding: 4% 0 3%;
	border-radius: 200vh 200vh 0 0;
	background: rgba(255,255,255,0.7);
}
.window i {
	font-size: 50px;
}
.nayami--title {
	color: #EB6C70;
	margin-top:20px;
	font-size: 20px;
	font-weight: bold;
}



.nayami--list {
	margin-top:20px;
	font-size: 14px;
}

.nayami--text {
	font-size: 14px;
	margin: 0;
}

@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
	
	ul.window {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 96%;
    margin: 0 2% 0;
}
ul.window li {
	width: 32%;
	}
}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/
	ul.window {
	width: 100%;
	margin:0;
}
ul.window li {
	width: 70%;
	border: 2px solid #E7C78B;
	padding: 30px 0;
	margin: 0 0 30px 0;
	border-radius: 200vh 200vh 0 0;
	background: rgba(255,255,255,0.7);
}
.window i {
	font-size: 50px;
}
.nayami--text {
	font-size: 2.3vmax;
	margin: 0;
}
}




/****** LINE 登録******/
.line {
	margin-bottom: 100px;
	box-shadow: 3px 3px 5px 5px rgba(0,0,0, 0.25);
}
.BgLine {
	background: url("../img/bg-line.jpg") no-repeat center left;
	background-size: cover
}
.line--wrap{
	max-width: 750px;
	margin: 0 auto;
	text-align: center;
	background-color: #ffffff;
	border-radius: 8px;
	border: 3px solid #E7C78B;
	padding: 20px 0;
}
.line--title {
	font-size: 18px;
	font-weight: bold;
	padding-bottom: 15px;
}
.line--text {
	font-size: 16px;
	padding-bottom: 15px;
}
.line--button {
	background-color: #00B900;
	border-radius: 100vh;
	 width:265px;
	padding: 8px 0;
	margin: 0 auto;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
}
.line--button i {
	padding-right: 8px;
}

@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
	
	
.BgLine {
	background: url("../img/bg-line.jpg") no-repeat center right;
	background-size: cover
}
}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/
	
.BgLine {
	background: url("../img/bg-line.jpg") no-repeat center right;
	background-size: cover
}
}







/****** 料金表 ******/
.bgF9ABA6 {background-color: #F9ABA6; color: #fff}
.bgFE8185 {background-color: #FE8185; color: #fff}
.bgEB6C70 {background-color: #EB6C70; color: #fff}

.anchor--price { /*ページ内リンクの微調整*/
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}


.menu--wrap {
	width: 90%;
	margin: 50px auto;
	border: 4px solid #E2E2E2;
	border-radius: 40px;
	padding: 50px;
	background: rgba(255,255,255,0.8);
}

.menu--title {
	    text-align: center;
    width: 100%;
    /* font-size: 15px; */
    color: #F9ABA6;
    position: absolute;
    top: -89px;
    left: 0;
}

.yellow--ballon {
	width: 264px;
	background-color: #E7C78B;
	color: #fff;
	border-radius: 100vh;
	margin: 0 auto;
	padding: 20px  0;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}
.pricelist {
	max-width: 630px;
	margin: 30px auto;
}

.pricelist--box01, .pricelist--box02, .pricelist--box03 {
	text-align: center;
	border: 4px solid;
	padding: 0px 0 20px;
	border-radius: 18px;
	width: 200px;
	position: relative;
}

.pricelist--box01 {
	border-color:#F9ABA6;
    height: 362px;
    margin: 20px 0 0 0;
}

.pricelist--box02 {
	border-color:#FE8185;
    height: 400px;
	box-shadow: 0px 2px 3px 3px rgba(0,0,0, 0.1);
}

.pricelist--box03 {
	border-color: #EB6C70;
    height: 362px;
    margin: 20px 0 0 0;
}
.price--number, .price--number--center {
	padding: 15px 0 8px 0;
	letter-spacing: 0.1em;
	border-radius: 5px 5px 0 0;
}
.price--number--center {
	padding-top: 25px;
}
.price--number::first-letter,  .price--number--center::first-letter{
	font-size: 2em
}
span.bigtext {font-size: 2em}
.price--comment{
	padding: 0;
}


.price--price {
	padding: 20px 0 0;
	font-size: 30px;
}
.yen {
	font-size: 0.7em
}
.border-pink {
	background-color: #EB6C70;
	height: 3px;
	width: 36px;
	margin: 20px auto;
}
.price--onesession {}
.price--comment {
    padding-bottom: 10px;
}
.price--smaii-text {
	font-size: 0.8em;
	color: #949494;
}

.yellow--ballon02 {
	width: 80%;
	background-color: #E7C78B;
	color: #fff;
	border-radius: 100vh;
	margin: 20px auto 0;
	padding: 8px  0;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
}

.pricelist--bottom-text {
	width: 100%;
	text-align: center;
}

.triangle01, .triangle02, .triangle03 {
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 96px solid transparent;
  border-left: 96px solid transparent;
  border-bottom: 0;
    margin: 0 auto;
}
.triangle01 {
  border-top: 25px solid #F9ABA6;
}
.triangle02 {
	border-top: 25px solid #FE8185;
}
.triangle03 {
  border-top: 25px solid #EB6C70;
}
.triangle04 {
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom:  15px solid #E7C78B;
  border-top: 0;
	position: absolute;
    left: 60px;
    bottom: 79px;
}
.triangle05 {
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom:  15px solid #E7C78B;
  border-top: 0;
	position: absolute;
    left: 60px;
    bottom: 98px;
}


.menu--info-wrap {
  -webkit-column-count: 2;
  -webkit-column-gap: 15px;
  -webkit-column-fill: balance;
  -moz-column-count: 2;
  -moz-column-gap: 15px;
  -moz-column-fill: balance;
  column-count: 2;
  column-gap: 15px;
  column-fill: balance;
  padding-bottom: 18px;
	width: 90%;
	margin: 0 auto;
 }


.menu--info {
	margin: 0 0 15px;
	background: rgba(255,255,255,0.8);
	padding: 15px;
	border: 3px solid #FFD5D4;
	border-radius: 15px;
}
.menu--info-title {
	color: #EB6C70;
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 8px;
}
.menu--info ul {
	margin-left: 3em;
}
.menu--info ul li {
	font-size: 14px;
    text-indent: -1em;
    padding-bottom: 4px;
	
}
.menu--info ul li::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0da";
	padding-right: 8px;
}


@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
	
.pricelist--box01, .pricelist--box02, .pricelist--box03 {
	width: 32%;
    overflow: hidden;
}
.menu--wrap {
    width: 95%;
    margin: 50px auto;
    padding: 65px 2%;
	}
.menu--info-wrap {	
    width: 95%;
    margin: 0px auto;
}
}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/
	
/*===========
.scroll-box
===========*/
.scroll-box {
  overflow-x: auto;
  padding-bottom: 10px;
    margin-bottom: 45px;
  -webkit-overflow-scrolling: touch;
}
 
/*===========
scrollbar
===========*/
/*スクロールバー全体の高さ*/
.scroll-box::-webkit-scrollbar {
  height: 4px;
}
/*スクロールバー全体の背景*/
.scroll-box::-webkit-scrollbar-track {
  background: #eee;
}
/*スクロールバーの動く部分*/
.scroll-box::-webkit-scrollbar-thumb {
  background: #aaa;
  border: none;
}
/*スクロールバーの動く部分のホバー（マウスオーバー）*/
.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #999;
}
 
/*===========
.f_area
===========*/
.scroll-box .f_area {
  display: flex;
  justify-content: flex-start;
    flex-wrap: initial;
}
.scroll-box .f_area .f_one {
  width: 33.333%;
    flex: 0 0 70%;
}
.scroll-box .f_area .f_one a {
  display: block;
  overflow: hidden;
  backface-visibility: hidden;
}
.scroll-box .f_area .f_one a img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  transform: scale(1);
  transition: .5s;
}
.scroll-box .f_area .f_one a img:hover {
  transform: scale(1.1);
}
	
	
	.pricelist--box02 {
		margin: 0 12px;
	}
.menu--wrap {
    width: 100%;
    margin: 50px auto 20px;
    padding: 65px 2%;
	}
.menu--info-wrap {	
    column-count: 1;
    width: 100%;
	}

}







/****** ご利用の流れ ******/

#flow {
	margin-top: 0px;
}

.anchor--flow { /*ページ内リンクの微調整*/
    display: block;
    padding-top: 150px;
    margin-top: -70px;
}

.flow--title--e {
	position: absolute;
	top: -161px;
	right: 50%;
    transform: translate(50%,0%);
    -webkit-transform: translate(50%,0%);
    -ms-transform: translate(50%,0%);
}
.flow--step {
	width: 28%;
	text-align: center;
	background-color: #fff;
	padding: 2em;
	border-radius: 15px
}
.flow--step-title {
	font-size: 35px;
	color: #303030;
}
.flow--step-subttitle {
	font-size: 18px;
	color: #EB6C70;
}
.flow--text {
	text-align: left;
}
.flow--arrow i {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
	color: #fff;
	font-size: 25px;
}
.flow--arrow i.fa-caret-down {
		display: none;
	}
.flow--image {
	height: 150px;
	margin: 20px 0;
}
.flow--image img {
	height: 100%;
}

@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
	
	
}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/
	
	.flow--arrow i.fa-caret-right {
		display: none;
	}
.flow--arrow i.fa-caret-down {
		display: block;
	font-size: 50px;
	}
	.flow--step {
    width: 98%;
	}
	.flow--arrow {
		width: 100%;
		text-align: center;
	}
.flow--title--e {
	position: absolute;
	top: -137px;
	right: 50%;
    transform: translate(50%,0%);
    -webkit-transform: translate(50%,0%);
    -ms-transform: translate(50%,0%);
}
}










/******  FAF ******/

.left--FAQ {
    width: 23%;
    text-align: left;
    margin: 0 0 0 20px;
}

.right--FAQ {
	width: 70%;
}

.FAQ--Q {
	background-color: #EB6C70;
	border-radius:30vh;
	color: #fff;
	height: 30px;
	width: 30px;
	font-size: 20px;
	padding: 5px 12px;
	margin-right:10px;
}

.FAQ--A {
	background-color: #E7C78B;
	border-radius:30vh;
	color: #fff;
	height: 30px;
	width: 30px;
	font-size: 20px;
	padding: 2px 8px;
    position: absolute;
    top: 0.7em;
    left: 3.5em;
}



.accordion {
    margin: 2em 20px 3em 0;
}
.toggle {
display: none;
}
.option {
position: relative;
margin-bottom: 1em;
background: rgba(255,255,255,0.8);
}
.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title {
padding: 1em;
display: block;
color: #6A6A6A;
font-weight: bold;
	background-color: #FACBCA;
	border-radius: 5px;
	color: #EB6C70;
	
}
.title::after,
.title::before {
content: "";
position: absolute;
right: 1.25em;
top: 1.55em;
width: 2px;
height: 0.75em;
background-color: #fff;
transition: all 0.3s;
}
.title::after {
transform: rotate(90deg);
}
.content {
max-height: 0;
overflow: hidden;
}
.content p {
margin: 0;
padding: 1em 1em 1em 9em;
font-size: 0.9em;
line-height: 1.5;
    color: #6A6A6A;
}
.toggle:checked + .title + .content {
max-height: 500px;
transition: all 1.5s;
}
.toggle:checked + .title::before {
transform: rotate(90deg) !important;
}

@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
	
.right--FAQ {
	width: 90%;
}
.accordion {
    margin: 2em 0 3em 0;
}
.left--FAQ {
	width: 100%;
    margin:0;
	text-align: center
}

}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/
.right--FAQ {
	width: 95%;
}
.accordion {
    margin: 2em 0 3em 0;
}
.left--FAQ {
	width: 100%;
    margin:0;
	text-align: center
}
.content p {
	padding: 1em 1em 1em 5em;
	}
	.FAQ--A {
    left: 1em;
	}
	.title {
    text-indent: -3.5em;
    padding:1em 2em 1em 4.3em;
		font-size: 13px;
	}
}




/*  特定商取引法に基づく表記  */

.infoWrap {
	width: 90%;
	margin: 0 5%;
}

.infoWrap table {
	width: 100%;
	border: 1px solid #393939;
	font-size: 14px;
	color: #393939
}
.infoWrap table th {
	width: 15%;
	border: 1px solid #393939;
	font-weight: bold;
	padding: 1%;
	background-color: #FFDFD8;
	
}
.infoWrap table td {
	width: 35%;
	border: 1px solid #393939;
	padding: 1%;
}

@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/
	.infoWrap table {
		font-size: 1.8vmax
	}
}




/*  プライバシーポリシー  */


p.ppTitle {
	
}
p.ppSubTitle {
	font-weight: bold;
    line-height: 1.5em;
    padding: 2em 0 0.5em 0;
}
ul.ppTextList {}

ul.ppTextList li {
    line-height: 1.5em;
    padding-bottom: 0.6em;
    padding-left: 1em;
    text-indent: -1em;
}
ul.ppTextList li:before {
	content: "・";
}



@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
	.acbox {
    width: 95%;
    margin: 7% auto 5%;
	}
}

@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/
	
	.acbox input:checked ~ div{
		padding: 11% 5% 6%;
	}
	.acbox {
    width: 95%;
    margin: 7% auto 0%;
	}
	
	
}




/*==============================
下部追随バナー　※スマホのみ 要素
==============================*/
.floating-banner {
    position: fixed;
    z-index: 99999;
    bottom: 0;
    right: 0;
    visibility: visible;
    display: block;
    margin-bottom: 33px;
    margin-right: 16px;
    width: auto;
    text-align: right;
    float: right;
}
.banner {
    width: auto;/* バナーの横幅 */
    color: #fff;/* バナー内の文字色 */
    font-weight: bold;
    text-align: center;
    padding:10px 67px 0 0;	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	
}
.floating-banner a {
    text-decoration: none;/* リンクに下線が入らないように */
}
.copy {
    font-size: 12px;
	padding:6px 1em 0;
    ine-height: 31px;
	background-color: #00B900;
	border-radius: 5px;
	height: 30px;
	box-shadow: 0px 2px 3px 3px rgba(0,0,0, 0.1);
}

.copy:before {
	position: absolute;
    display: block;
    content: '';
    margin: 0;
    top: 66%;
	right: 58px;
    margin-top: -6px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid #00B900;
    transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
}

.copy::after {
	background: url("../img/line_icon.png") no-repeat center center;
	background-size: contain;
    width: 50px;
    height: 50px;
    position: absolute;
    display: block;
    content: '';
    margin: 0;
    padding: 1em;
    top: 0;
    right: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 60%;
    background-color: #fff;
    border: 3px solid #00B900;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
	box-shadow: 3px 3px 4px 4px rgba(0,0,0, 0.2);
}


.cta {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    background: #ffffff; /* ボタンの背景 */
	box-shadow: 3px 3px 4px 4px rgba(0,0,0, 0.2);
    border-radius: 100vh;
    margin: 0;
	color: #00B900;
    border: 3px solid #00B900;
}




/*==============================
フッター 要素
==============================*/
footer {
	padding: 20px 0;
}
.footer-navigation {
	margin: 0 0 20px;
}
.logo-area-footer {
	margin-bottom: 30px;
}
ul.footer--navi {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	width: 70%;
	margin-right: 30%;
	margin-bottom: 20px;
}
ul.footer--navi li {
	color: #fff
}

ul.footer--navi li a{
  position: relative;
  text-decoration: none;/*デフォルトで下線を非表示*/
  color: inherit;
  margin-bottom: 1rem;
}
/**** ホバーでブロックが出現するリンク ****/
ul.footer--navi li a:after{
  position: absolute;
  bottom: -10px;
  left: 0;
  content: '';
  width: 100%;
  height: 0; /*下線の太さ*/
  background: #E7C78B; /*下線の色*/
  transition: all .3s; /*アニメーション速度*/
}
ul.footer--navi li a:hover:after {
  height: 8px;
}



ul.footer--btn {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	width: 50%;
	margin-right: 30%;
	margin-bottom: 20px;
}
ul.footer--btn li {
	color: #fff
}






.copyright {
	font-size: 12px;
	color: #fff;
}
a.btn--red.btn--cubic {
  border-bottom: 5px solid #BC9751;
	color: #fff;
  border-radius: 100vh;
}

a.btn--red.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #BC9751;
}

a.btn--radius {
  border-radius: 100vh;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - .5em);
  right: 1rem;
}
.btn--red, a.btn--red, button.btn--red {
    color: #fff;
    background-color: #E7C78B;
}

@media only screen and (min-width : 641px) and (max-width : 1008px) {
  /*tablet用のcssを記述*/
	ul.footer--navi, ul.footer--btn {
		width: 100%;
		justify-content: space-evenly;
	}
	
footer p.logo {
    text-align: center;
}
}
@media screen and (max-width:640px) {
  /*スマホ用のcssを記述*/
	
footer p.logo {
    color: #ffffff;
    font-size: 35px;
    text-align: center;
}
ul.footer--navi {
	display: none;
}
a.btn--red.btn--cubic {
    border-bottom: 5px solid #BC9751;
    color: #fff;
    border-radius: 100vh;
    width: 100%;
    text-align: center;
}	
	
ul.footer--btn {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	width:100%;
	margin-right: 30%;
	margin-bottom: 20px;
}
ul.footer--btn li {
	color: #fff;
    width: 60%;
    margin: 0 auto 20px;
	}

	
	
}