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

@import url(https://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese);

* {
   box-sizing: border-box;
}

body {
   margin: 0;
   padding: 0;
   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
   background-color: white;
}
.wrapper {
	 max-width:1100px;
	 margin:0 auto;
	 padding:0 4%;
 }

.header_index {
   padding: 1% 4% ;
   position: fixed; /* ヘッダー固定 */
   z-index:20;
   top: 0;
   width: 100%;
   background: rgba(255,255,255,0.5); 
   display: flex;
   align-items: center;
}
.header_index li {
   margin: 0 0 0 30px;
   font-size: 14px;
}

.header_salonschool {
   padding: 30px 4% 10px;
   position: fixed;  /* ヘッダー固定 */
   z-index:20;
   top: 0;
   width: 100%;
   background: rgba(240,240,240,0.5);     /*#f1f8ff; /*背景色*/
   display: flex;
   align-items: center;
   /* overflow:hidden; */
}
.header_salonschool li {
   margin: 0 0 0 15px;
   font-size: 14px;
}


.header_nav_h1{
   margin: 0; padding: 0;
   font-size: 20px;
}
.header_h1 {
   margin: 0; padding: 0;
   font-size: 22px;
   text-align: center;
   position:relative; 
   z-index:19;
  }
  .header_box {
   padding: 0.5em 1em; 
   margin: 0 auto;  /* 要素自体を中央右寄せ */
   width: 30em;
   color: black;
   border-top: solid 5px rgba(102,153,255,0.6);
   background: rgba(255,255,255,0.6); /*背景色*/
   box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
   position:relative; 
   z-index:19;
   text-align:center;
   /* border-radius: 10px;/*角の丸み*/
}
.header_box p {
    margin: 0; 
    padding: 0;
}

 .schoolheader_box {
    /*padding: 2em 1em; 
	display: block;/*コレ*/
    /*width: 40em;/*コレ*/
   /*margin: 0 auto;  /* 要素自体を中央右寄せ */
	
    margin-top: 9em;
	margin-left: 3em;
	padding: 3em 2em 2em; 
    width: 40em;
   color: black;
   border-top: solid 5px rgba(102,153,255,0.6);
   background: rgba(255,255,255,0.6); /*背景色*/
   box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
   position:relative; 
   z-index:19;
   text-align:center;
   /* border-radius: 10px;/*角の丸み*/
}
.schoolheader_box p {
    margin: 0; 
    padding: 0;
}
.schoolheader_h1 {
   margin: 0; padding: 0;
   font-size: 22px;
   text-align: center;
   position:relative; 
   z-index:19;
  }


a {	
   text-decoration: none;
   color: #4b4b4b;
}
nav {
   margin: 0 0 0 auto;
}
ul {
   list-style: none;
   margin: 0;
   display: flex;
   text-align:center; 
}


#index { 
   justify-content: center;
   align-items: center;
}
/* index Page 
  --------------------------------*/
.main-visual_index{
   /* display: flex; */
   height: 40vh;
  /*  background: url(images/3350696_haikei.jpg) top center / cover no-repeat; */
  text-align:center;
}

/* index_salon Page 
  --------------------------------*/
.main-visual_indexsalon{
   height: 100vh;
   background: url(images/salon_M2.png) top center / cover no-repeat;
}

/* index_school Page 
  --------------------------------*/
.main-visual_indexschool{
   /* display: flex; 
   justify-content: center;
   align-items: center;  */
   height: 100vh;
   background: url(images/aromaschool.jpg) top center / cover no-repeat;
}

.indexschool_box {
   padding: 0.5em 1em; 
   /*margin: 0 auto;  /* 要素自体を中央右寄せ */
   width: 50em;
   color: black;
   border-top: solid 5px rgba(102,153,255,0.6);
   background: rgba(255,255,255,0.6); /*背景色*/
   box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
   position:relative; 
   z-index:19;
   text-align:center;
   /* border-radius: 10px;/*角の丸み*/
}
.indexschool_h2 {
   margin: 0; 
   padding-top:15%;
   padding-left:8%;
   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 35px;
   /*font-weight: bolder; */
   /* font-weight:bold; */
   font-weight: normal;
   white-space: nowrap;  /* 折り返さない */
   text-shadow: 2px 2px 2px #000;
   color: white;
}
.indexschool_h3 {
   margin: 0; 
   padding-left:8%;
   font-size: 20.5px;
   /* font-weight: bolder; */
   font-weight: normal;
   white-space: nowrap;  /* 折り返さない */
   text-shadow: 2px 2px 2px #000;
   line-height:2.2;
   color: #FFF;
}


/* テキスト
-------------------------------------------------------*/
.header_h2 {
   margin: 0; 
   padding-top:20%;
   padding-left:8%;
    font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 32px;
   font-weight: normal;
   white-space: nowrap;  /* 折り返さない */
   text-shadow: 2px 2px 2px #CCC;
   color: #fff;
}

.header_h3 {
   margin: 0; 
   padding-left:8%;
   font-size: 19px;
   font-weight: normal;
   white-space: nowrap;  /* 折り返さない */
   text-shadow: 2px 2px 2px #CCC;
   line-height:2.2;
   color: #fff;
}

/* 蛍光ペン 
-------------------------------------------*/
.line{
	/* background-color: rgba(0,102,255,0.6); */
	/* background:linear-gradient(transparent 60%, rgba(51,204,153,0.4) 60%);  */
	background:linear-gradient(transparent 10%,#6CF);
}




/* フレックスボックス　横並び
-------------------------------------------------------*/
.flex_box {
	display: flex;              /* フレックスボックスにする */
    align-items:stretch;        /* 縦の位置指定 */
}

.flex_box_bk {
	display: flex;              /* フレックスボックスにする */
    align-items:stretch;        /* 縦の位置指定 */
	background: rgba(255,255,255,0.6); /*背景色*/
}


  /* button　  index ・ index_salon
------------------------------------------- */
.index_btn-circle-fishy {
  display: inline-block;
  text-decoration: none;
  font-size:24px;
  font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  color: #FFF;
  text-shadow: 2px 2px 2px #CCC;
  width: 140px;
  height: 140px;
  line-height: 140px;
  margin: 10px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  background-image: linear-gradient(45deg, #709dff  0%, #91fdb7 100%);
  transition: .4s;
  opacity: 0.8;
}

.index_btn-circle-fishy:hover {
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg);
}

.btn{
	margin:0 auto;  /* 要素自体を中央右寄せ */
	padding:0 4%;
	text-align:center;  /* 文字を中央寄せ */
}

/* 見出し
--------------------------------------------*/
.index_title {
  position: relative;
  padding: 0.5em;
  background: #b0dcfa; /*背景色*/
  /*background: #a6d3c8;*/
  font-family: 'Noto Serif SC', serif;
  color: white;
  text-shadow: 2px 2px 2px #CCC;
}

.index_title::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}



    /* footer
  --------------------------------------------------------*/ 
    footer {
	   background:#9CF;
	   text-align:center;
       /* padding:9px; */
	   padding:10px;
	   margin-top:30px;
 }
    footer p {
		color:#fff;
		font-size:0.875rem;
	}


 /* pagetop
------------------------------------------- */ 

.page-top.h2{
  text-align: center;
  margin-bottom: 30px;
}


#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #3f98ef;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #3f98ef;
}

/* スライダー
-------------------------------------------------------*/
.slider{
	/*margin: 0;*/
	padding-left: 15%;
}

   /* what's New 
--------------------------------------------------------------------- */ 
.wn_titlebar {
  position: relative;
  padding: 0.2em 0.5em;
  /*background: -webkit-linear-gradient(to right,  #00aceb, #74c7f0);
  background: linear-gradient(to right, #00aceb, #74c7f0);*/
  background: -webkit-linear-gradient(to right,  #72c6c7, #d4ebec);
  background: linear-gradient(to right, #72c6c7, #d4ebec);
  color: white;
  font-weight: bolder;
  text-shadow: 2px 2px 2px #CCC;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}

/* 画像位置＿＿＿＿＿＿＿＿＿＿＿＿＿*/
.picture {
  margin: 0 10px 10px 0;
  float: left;
}

.picture_r {
  margin: 0 0 10px 10px;
  float: right;
}