@charset "utf-8";

* {
	box-sizing: border-box;
}
:root {
  /* --main-color: hsla(12%,90%,85%,1); */
  --main-color: #3A1274;
  --color-gray: #E5E5E5;
  --subtitle: 1.6rem;
  --normal-font-size: 1.4rem;
  --normal-font-weight: 300;
  --normal-line-height: 2;
}

html {
	font-size:62.5%;
	-webkit-text-size-adjust: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  color: #707070;
}

img {
	width: 100%;
	height: auto;
  display: block;
}
body {
  background: #fff;
  margin: 0 auto;
  position: relative;
  font-size: var(--normal-font-size);
  font-weight: var(--normal-font-weight);
  line-height: var(--normal-line-height);
  /* overflow: hidden; */
}
.inner {
  max-width: 1000px;
  margin: 0 auto;
}

/*アンカータグの設定*/
a {
	text-decoration: none;
  display: block;
  color: #707070;
  transition: 0.5s;
}
a:hover {
	opacity: 0.5;
}

li {
	list-style: none;
}

.flex {
	display: flex;
	flex-wrap: wrap;
}

/* パソコン版非表示 */
.pc {
  display: none;
}
    


.clearfix::after {
	content: "";
	display: block;
	clear: both;
}



/* button  無料相談はコチラから!ボタン */
.support .flex,
#faq .flex {
  justify-content: center;

}

.button a,
.button-online a{
  /* display: flex; */
  /* justify-content: space-between; */
  align-items: center;
  padding: 1em 1.2em;
  width: 29rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  background-color:#3A1274;
  transition: 0.5s;
  border-radius: 6px;
  line-height: 1.5em;
  text-align: center;
  margin: 2rem;
}

/* button online!オンライン予約ボタン */

.button-online a{
  background-color: #4EBB65;
}




.fa-chevron-right {
  padding-right: 8px;
}


/* gnav */
header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* padding: 0 5%; */
  height: 84px;
  position: fixed;
  background: #ffffff;
  width: 100vw;
  z-index: 999;
}

h1 {
  /* width: 22%; */
  margin-right: 10%;
  max-width: 25rem;
  height: 5.8rem;
  margin-left: 5%;
}

header nav {
  width: auto;
  flex-grow: 1;
  font-weight: 400;
}
.gnav {
  display: flex;
  justify-content: flex-end;
}
.gnav li {
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  /* margin-right: 2%; */

}
.gnav a {
  font-size: 1.6rem;
}



/* footer nav */
/* footer nav {
} */
footer {
  padding: 5rem 0;
  background: #E5E5E5;
}
footer .flex {
  justify-content: center;
}

footer li {
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.8;
  padding: 2.5rem;
}
footer a {
  max-width: 25rem;
  height: 5.8rem;
  margin: 2rem auto;
}



.copyright {
  text-align: center;
  line-height: 1.8;
  margin-top: 2rem;
}





/* テキストエリアの可変を無くす */
textarea {
	resize: none;
  width: 100%;
  height: 10rem;

}

/*========= PageTopのためのCSS ===============*/
#topheader {
  background-image: url(../img/index/top.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom -40px right;
  height: 50vh;
}

/*=======ふわっ=======*/
/* fadeUp */
.fadeUp {
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

.flipLeft{
  animation-name:flipLeftAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  perspective-origin:left center;
  opacity:0;
  }

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,
.flipLeftTrigger {
  opacity: 0;
}

/*=============== メディアクエリ =================*/

@media screen and (max-width: 1153px) {
header {
  justify-content: flex-start
  }
/* hamburger変形 */
.menu-trigger {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  display: inline-block;
  padding: 2rem;
  z-index: 4;
}
#open .hamburger {
  width: 40px;
  height: 4px;
  background-color: var(--main-color);
  display: block;
  transition: .6s;
}
.menu-trigger span:nth-child(2) {
  margin: 8px 0;
}
.menu-trigger.click span:nth-of-type(1) {
  transform: translateY(5px) rotate(-405deg);
}
.menu-trigger.click span:nth-of-type(2) {
  transform: translateY(5px) rotate(180deg);
  opacity: 0;
}
.menu-trigger.click span:nth-of-type(3) {
  transform: translateY(-20px) rotate(405deg);
}

/* ナビゲーション */
#menu {
  width: 100%;
	height: 100vh;
	position: absolute;
	top: -9999px;
  left: 0px;
	backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
	background-color: #f7f2f26b;
	transition: .6s;
	z-index: 3;
}
body.active #menu {
  top: 0;
}
header .gnav img {
  display: none;
}

header .gnav {
  flex-direction: column;
  align-items: center;
  margin: 5rem auto;
}

header .gnav li {
  padding: 1rem 0;
}

header .gnav a {
  padding: 0 5rem;
}


@media screen and (max-width: 960px) {
footer .gnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}


}






}


/* 画面幅520px"以下"の時に読み込むスタイル */
@media screen and (max-width:520px) { 
  






















}