/* ===== Webサイト全体のスタイル ===== */
/* html */

html {
  height: 100%;
}

/* body */
body {
  font-family: sans-serif;
  height: 100%;
  margin: 0;
}

/* h1見出し */
h1 {
  color: #000000;/* フォントの色 */
  font-size: 70px;/* フォントの大きさ */
  text-align: left;/* 文字・画像を中央にそろえる */
  height: 320px;/* 高さ */
  padding-top: 300px;/* 上がわの余白 */
  background-repeat: no-repeat;/* 背景のくり返しをやめる */
  background-position: top center;/* 背景の位置 */
  position:fixed;
  top: 0%;
  left: 0%;
  transform: translateY(-10%) translateX(-10%);
  font-weight:lighter;
  padding-right:50px;
  padding-left:80px;
  font-family: 'Josefin Sans', sans-serif;
}

h2{
  color:#000000;
  font-size:45px;
  font-family:Arial;
  text-align:left;
   position:fixed;
  top: 0%;
  left: 0%;
  padding-top: 430px;/* 上がわの余白 */
  font-weight:lighter;
}


.text-focus-in {
	-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}



/* ===== ヘッダーのスタイル ===== */
/* ヘッダーの箱 */
header {
  background: linear-gradient(to bottom left, #00afcc  50%, #ffffff 50%);
  padding-top: 150px;/* 上がわの余白 */
  background-repeat: no-repeat;/* 背景のくり返しをやめる */
  text-align: center;/* 文字・画像を中央にそろえる */
  height:100%;
  position:relative;
  width:100%;
  background-size:cover;
  padding:800px;
  padding-bottom:1500px;
}

header:before{
    /*header の疑似要素に背景画像を指定*/
  content:"";
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height: 100vh;
  background-color:#ffffff;
  background-size:cover;
  padding:200px;
}

.focus-in-contract-bck {
	-webkit-animation: focus-in-contract-bck 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: focus-in-contract-bck 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes focus-in-contract-bck {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(70px);
            transform: translateZ(70px);
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(10px);
            transform: translateZ(10px);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes focus-in-contract-bck {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(70px);
            transform: translateZ(70px);
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(10px);
            transform: translateZ(10px);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}


.menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #00afcc;
    margin:25px;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}

#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check {
    display: none;
}

.menu-content {
  width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #00afcc;
    transition: all 0.5s;/*アニメーション設定*/
    text-align:left;
}
.menu-content ul {
    padding: 100px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 30px;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}
#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}




/* ナビゲーションの箱 */
nav {
  background-color: rgba(255, 255, 255, 1);
  padding-top: 10px;
  position:fixed;
    width:100%;
 z-index:1;
}
  
/* リスト全体 */
nav ul {
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: left;
}

/* １つ１つのリスト */
nav li {
  display: inline-block;
  margin-right:20px;
  margin-left:20px;
}

/* リンク */
nav a {
  color: #426991;
  text-decoration:none;
  font-family:Mulish;
  font-size:45px;
  text-align:center;
}

/* リンクにふれた時 */
nav a:hover{
  color:#191970;
    font-weight:bold;
}


.WhyHiGA{
  margin-left:10px;
}
/* ===== お店紹介のスタイル ===== */
/* セクション */
.shop {
  background-image : url(img/shoolnice.jpg) ;/* 背景画像 */
  filter:brightness(100%);
  background-attachment: fixed;
  background-repeat: no-repeat;/* 背景のくり返しをやめる */
  text-align: center;/* 文字・画像を中央にそろえる */
  min-height:100vh;
  background-size: cover;
  position: relative;
  z-index:1;
    /*以下はレイアウトのための記述*/
  border-radius: 2000px 2000px 0 0 / 300px 300px 0 0;
  margin:-200px;
  height:2000px;
}

.shop h2{
  text-align:center;
  margin: 20px ;
  font-size:55px;
  color:#000000;
  position:initial;
  overflow: visible;
  padding-top:40px;
}

.title {
  font-size: 70px;
  padding-left: 15px;
  margin-bottom: 50px;
  text-align:left;
}

.reading{
  font-size:30px;
  text-align:center;
  width:700px;
  margin:30px;
  color:#0000000;
  font-family:NotoSansJapanese;
  height:100%;
}

.contentint{
  background-image:url(img/sora.jpeg);/* 背景画像 */
  filter:brightness(140%);
  background-attachment: fixed;
  background-repeat: no-repeat;/* 背景のくり返しをやめる */
  min-height:100vh;
  background-size: cover;
  position: relative;
  z-index:1;
  padding: 60px;
  margin-top:0px;
  margin-bottom:0px;
}

.content{
   background-image:url(img/sora.jpeg);/* 背景画像 */
  filter:brightness(140%);
  background-attachment: fixed;
  background-repeat: no-repeat;/* 背景のくり返しをやめる */
  min-height:100vh;
  background-size: cover;
  position: relative;
  z-index:1;
  padding: 60px;
  margin-top:0px;
  margin-bottom:0px;
}

.maincontent{
  float:right;
  right:500px;
}

.maintitle{
  font-size:40px;
  padding-right:100px;
  margin-bottom:10px;
  margin-top:30px;
  color:#192f60;
  display: inline-block;
  text-align:center;
  padding-right:400px;
  border-bottom: solid 3px #192f60;
}

.mainsentence{
  text-align:left;
  font-size:20px;
}
.sideimg{
  width:500px;
  text-align:left;
  left:20px;
  margin-top:40px;
}

.sideimglogo{
  width:200px;
  text-align:left;
  left:70px;
  margin-top:100px;
}

.std,
a.std,
button.std {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 5rem 5rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #2792c3;
  border-radius: 0.5rem;
}


.stdlink{
  font-size:43px;
  margin:30px;
  padding:20px;
  background-color:rgba(255,255,255,0.4);
  width:900px;
  display: inline-block;
  margin-top:20px;
  margin-left:0px;
  margin-bottom:0px;
  color:rgba(22,94,131);
  font-weight:bold;
  border-radius:100% 300px / 900px 200%;
}

.stdlink:hover{
  font-size:43px;
  margin:30px;
  padding:20px;
  background-color:rgba(22,94,131,0.4);
  border-radius:10px;
  width:900px;
  display: inline-block;
  margin-top:20px;
  margin-left:0px;
  margin-bottom:0px;
  color:rgba(255,255,255);
  font-weight:bold;
  border-radius:10% 250px / 70px 350%;  
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing:100px;
  font-size: 62.5%;
}

.btn,
a.btn,
button.btn {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 5rem 5rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #2792c3;
  border-radius: 0.5rem;
}

a.btn-malformation {
  font-size: 3rem;

  padding: 3.5rem 4rem;

  color: rgba(22,94,131);
  border-radius: 100% 80px / 80px 100%;
  background-color:rgba(255, 255, 255, 0.4);
}

a.btn-malformation:hover {
  color: #fff;
  border-radius: 60% 80% / 100% 80%;
  background-color:rgba(22,94,131,0.4);
}


.btn-malformation {
  font-size: 3rem;

  padding: 3.5rem 4rem;

  color: rgba(22,94,131);
  border-radius: 100% 80px / 80px 100%;
  background-color:rgba(255, 255, 255, 0.4);
}

.btn-malformation:hover {
  color: #fff;
  border-radius: 60% 80% / 100% 80%;
  background-color:rgba(22,94,131,0.4);
}

.maincontent2{
  float:left;
}

.maintitle2{
  font-size:40px;
  padding-right:100px;
  margin-bottom:50px;
  margin-top:10px;
  color:#192f60;
  border-bottom: solid 3px #192f60;
}

.mainsentence2{
  text-align:left;
  font-size:20px;
}
.sideimg2{
  width:500px;
  text-align:right;
  left:20px;
  margin-top:80px;
}

.maincontent3{
  float:right;
  padding-right:80px;
}
.maintitle3{
  font-size:35px;
  padding-right:100px;
  margin-bottom:10px;
  margin-top:30px;
  color:#192f60;
  display: inline-block;
  text-align:center;
  padding-left:80px;
  border-bottom: solid 3px #192f60;
}

.mainsentence3{
  text-align:left;
  font-size:20px;
  padding-left:100px;
}

.mainsentence1{
  font-size:20px;
  text-align:left;
  float:left;
  right:100px;
}

.maincontent3{
  float:right;
}


.MVV{
  background-image:url(img/sora.jpeg);/* 背景画像 */
  filter:brightness(140%);
  background-attachment: fixed;
  background-repeat: no-repeat;/* 背景のくり返しをやめる */
  min-height:100vh;
  background-size: cover;
  position: relative;
  z-index:1;
  padding: 30px;
}

.MVVtitle{
  text-align:center;
  font-size:70px;
  width:100%;
  padding:0px;
  position: static;
  font-weight:bold;
   border-bottom: solid 3px #192f60;
}

.flex_test-box {  
    padding:  10px;             /* 余白指定 */
}

.flex_test-item {
    padding: 10px;
    color:  #fff;               /* 文字色 */
    margin:  50px;              /* 外側の余白 */
    border-left-style: solid;
    border-left-width: 20px;
    border-left-color:#24140e;
    padding-left:20px;
}
 
.flex_test-item:nth-child(1) {
    background-color: rgba(255,255,255,0.4); /* 背景色指定 */
    color:#000000;
}
 
.flex_test-item:nth-child(2) {
    background-color: rgba(255,255,255,0.4); /* 背景色指定 */
     color:#000000;
}
 
.flex_test-item:nth-child(3) {
    background-color: rgba(255,255,255,0.4); /* 背景色指定 */
     color:#000000;
}
 
.MVT{
  font-size:30px;
} 

.MVE{
  font-size:15px;
}
 
.MVP{
  font-size:15px;
  font-weight:lighter;
} 
/* フッター */
footer {
  background-color: #393f4c;
  color: #ffffff;
  background-attachment: fixed;
  background-repeat: no-repeat;/* 背景のくり返しをやめる */
  min-height:100vh;
  background-size: cover;
  position: relative;
  z-index:1;
  padding: 30px;
}

.FTL{
  display:inline-block;
  margin:30px;
  padding-bottom:20px;
}

.FT{
  color:#abb1b5;
  font-size:36px;
  float:right;
  margin:0px;
  padding-top:20px;
}
.FI{
  text-align:left;
}

.INF{
  font-size:20px;
}

.map{
  text-align:center;
  margin:20px;
}