@charset "utf-8";
/*回転時文字サイズ拡大OFF*/
html {
 -webkit-text-size-adjust: 100%;
}
body {
 font-size: 16px;
 background-color: #fdfae9;
 font-family: 'Yomogi', cursive;
 /*↑基本フォント*/
 line-break: strict; /*厳密な禁則処理*/
 width: 100%;
 max-width: 1240px;
 margin: 0 auto;
}
.header_set {
 display: flex;
 display: block;
 text-align: right;
 padding: 20px 20px;
 font-family: 'Kaisei Opti', serif;
 font-size: 1.1rem;
}
header nav li a:hover {
 text-decoration-line: underline;
 color: indigo;
}
header nav ul {
 display: flex;
 justify-content: space-around;
 width: 1240px;
 margin: 0 auto;
 paddeing: 10px 20px;
 font-size: 1.1rem;
 font-family: 'Kaisei Opti', serif;
}
header nav {
 margin-bottom: 30px;
}
/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#mainvisual {
 height: 720px;
 position: relative;
}
/*
テキストとボタンが画像の上に表示されるように「z-index」を設定
*/
#mainvisual .text {
 position: absolute;
 top: 280px;
 left: 10%;
 z-index: 10;
}
/*
「text-shadow」で文字の輪郭に白い影をつけることで、
文字が背景画像に埋もれないようにする
*/
#mainvisual .text .title {
 font-size: 2.875rem;
 font-weight: bold;
 margin-bottom: 30px;
 text-shadow: 0 4px 6px #fff;
}
#mainvisual .text .btn {
 background-color: #ff2a2a;
 /* 文字の下に影をつけてボタンに立体感を出す */
 border-bottom: 6px solid #9a0413;
 border-radius: 10px;
 color: #fff;
 font-size: 1.5rem;
 display: block;
 padding: 15px 35px;
 text-align: center;
 transition: 0.3s;
 position: relative;
}
/*
ボタンの右矢印
上と右にボーダーを設定し、「transform: rotate(45deg)」で
45度回転させることで矢印を作成
positionで位置を調整する
*/
#mainvisual .text .btn::after {
 content: "";
 width: 16px;
 height: 16px;
 border-top: solid 3px #fff;
 border-right: solid 3px #fff;
 transform: rotate(45deg);
 position: absolute;
 top: 26px;
 right: 30px;
}
/*
ホバー時は、opacityで透過させながら「transform: scale(1.05);」で
少しだけボタンのサイズを大きくする
*/
#mainvisual .text .btn:hover {
 opacity: 0.9;
 transform: scale(1.05);
}
/*
メインビジュアル
animationを使用して、画像をフェードイン、フェードアウトで切り替えを行う

※画像のフェード切り替えは、CSSアニメーション以外にも
jQueryのプラグインを使う等便利なやり方が色々ありますが、
今回は学習のためにアニメーションを使用しています。
*/
#mainvisual .fade li {
 width: 75%;
 position: absolute;
 top: 0;
 right: 0;
 /* 最初は3枚の画像を非表示にしておく */
 opacity: 0;
 /*
  アニメーションを実行
  fade：下で定義している「@keyframes fade」を実行
  15s：「@keyframes fade」の処理を15秒かけて実行
  infinite：アニメーションの処理を無限に繰り返す
  */
 animation: fade 15s infinite;
}
/*
1枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 0s;」ですぐに実行
*/
#mainvisual .fade li:nth-child(1) {
 animation-delay: 0s;
}
/*
2枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 5s;」で5秒後に実行
*/
#mainvisual .fade li:nth-child(2) {
 animation-delay: 5s;
}
/*
3枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 10s;」で10秒後に実行
*/
#mainvisual .fade li:nth-child(3) {
 animation-delay: 10s;
}
#mainvisual .fade li img {
 width: 100%;
 height: 720px;
 object-fit: cover;
}
/*
「box-shadow」で画像のまわりをぼかす
*/
#mainvisual .fade li::after {
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 box-shadow: inset 0px 0px 20px 20px #fff;
}
/*
アニメーション処理
上の「animation」で15sを指定しているので下記の処理を15秒かけて実行
0%が0秒を表し、100%が15秒後を表す。

0%の「opacity: 0;」で非表示の状態からスタートし、
15%になるまでの間に少しづつ画像を表示（フェードイン）させる。
そこから30%の時点までは画像を表示させたままの状態を維持し、
45%の時点に向けて画像を非表示（フェードアウト）する。
そこから100%まで非表示の状態を維持する。
*/
@keyframes fade {
 0% {
  opacity: 0;
 }
 15% {
  opacity: 1;
 }
 30% {
  opacity: 1;
 }
 45% {
  opacity: 0;
 }
 100% {
  opacity: 0;
 }
}
/*-------------------------------------------
Summary
-------------------------------------------*/
.text_1 {
 text-align: center;
}
/*
アニメーションを実行

fall：下で定義している「@keyframes fall」を実行
10s：アニメーションが始まってから終わるまでの時間（10sかけて実行）
infinite：アニメーションの繰り返し回数(無限に繰り返す)
linear：アニメーションの変化（開始から終了まで一定に変化）
*/
.top {
 text-align: center;
 font-family: 'Kaisei Opti', serif;
 font-size: 1.5rem;
 padding: 50px 0 50px 0;
}
#summary {
 background: url("../images/logo.png") repeat;
 animation: fall 50s infinite linear;
 padding: 60px 0;
 margin-bottom: 120px;
}
/*
アニメーション処理

10秒かけて背景画像の位置「background-position」を移動させる動作を繰り返す
*/
@keyframes fall {
 0% {
  background-position: 0 0;
 }
 100% {
  background-position: -700px 700px;
 }
}
#summary .menu {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
#summary .menu li {
 width: 48%;
 background-color: #fff;
 border-radius: 20px;
 padding: 60px;
 margin-bottom: 32px;
}
/* 3つ目以降はmargin-bottomを設定しない */
#summary .menu li:nth-child(n + 3) {
 margin-bottom: 0;
}
#summary .menu-title {
 font-weight: bold;
 line-height: 1;
 text-align: center;
}
#summary .menu-title .ja {
 display: block;
 font-size: 1.75rem;
 margin-bottom: 15px;
}
#summary .menu-title .en {
 display: block;
 font-size: 1.125rem;
 margin-bottom: 30px;
}
/*-------------------------------------------
Entry
-------------------------------------------*/
#entry {
 margin-bottom: 120px;
 text-align: center;
}
#entry .title {
 font-size: 2rem;
 font-weight: bold;
 margin-bottom: 5px;
}
#entry .catchphrase {
 font-size: 1.125rem;
 margin-bottom: 40px;
}
#entry .btn {
 background-color: #ff2a2a;
 border-radius: 40px;
 border: solid 3px #ff2a2a;
 color: #fff;
 font-size: 1.75rem;
 font-weight: bold;
 display: block;
 padding: 15px;
 text-align: center;
 transition: 0.3s;
}
#entry .btn:hover {
 background-color: #fff;
 border: solid 3px #ff2a2a;
 color: #ff2a2a;
}
/*-------------------------------------------
フッター
-------------------------------------------*/
#footer a {
 font-size: 0.875rem;
 /*
  ホバー時の透過をふわっとさせる（0.3秒かけて実行）
  */
 transition: 0.3s;
}
#footer a:hover {
 opacity: 0.7;
}
#footer .inner {
 display: flex;
 justify-content: space-between;
 margin-bottom: 60px;
}
#footer .inner > li {
 width: 25%;
}
#footer .inner .title {
 font-weight: bold;
}
#footer .inner .menu {
 padding: 10px 0 0 10px;
}
#footer .inner .menu li {
 margin-bottom: 3px;
}
#footer .copyright {
 font-size: 0.625rem;
 text-align: center;
}
/*コース説明*/
.menu-title img {
 width: 100%;
}
.top {
 padding-top: 100px;
 padding-bottom: 50px;
}
/*アクセス*/
iframe {
 text-align: center;
 width: 1240px;
 margin: 0 auto;
}
.acsess {
 font-size: 1.5rem;
 padding: 100px 50px;
 font-family: 'Kaisei Opti', serif;
 text-align: center;
}
.p_acsess {
 text-align: center;
 line-height: 2rem;
 padding-top: 10px;
}
/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 900px) {
 header nav ul {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin: 0 auto;
  paddeing: 10px 20px;
 }
 header nav {
  margin-bottom: 30px;
 }
 .wrapper {
  padding: 0 16px;
 }
 .section-title {
  font-size: 1.75rem;
  margin-bottom: 60px;
 }
 .section-title::after {
  width: 80px;
 }
 /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
 #header {
  padding: 25px 0 0 25px;
 }
 /* ハンバーガ―メニュー */
 .hamburger {
  width: 75px;
  height: 75px;
 }
 .hamburger span {
  width: 35px;
  left: 21px;
 }
 .hamburger span:nth-child(1) {
  top: 26px;
 }
 .hamburger span:nth-child(2) {
  top: 37px;
 }
 .hamburger span:nth-child(3) {
  top: 48px;
 }
 .hamburger.active span:nth-child(1) {
  top: 37px;
  left: 21px;
 }
 .hamburger.active span:nth-child(2), .hamburger.active span:nth-child(3) {
  top: 37px;
 }
 #navi .logo {
  top: 25px;
  left: 25px;
 }
 #navi .menu {
  margin-top: 110px;
 }
 /*-------------------------------------------
  Mainvisual
  -------------------------------------------*/
 #mainvisual {
  height: 490px;
  margin-bottom: 80px;
 }
 #mainvisual .fade li {
  width: 100%;
 }
 #mainvisual .fade li img {
  height: 300px;
 }
 #mainvisual .text {
  /* 両端に16pxづつ余白を作る */
  width: calc(100% - 32px);
  top: 310px;
  left: 16px;
 }
 #mainvisual .text .title {
  font-size: 1.75rem;
  margin-bottom: 10px;
 }
 #mainvisual .text .btn {
  width: 100%;
 }
 /*-------------------------------------------
  Summary
  -------------------------------------------*/
 #summary {
  margin-bottom: 80px;
 }
 #summary .menu {
  flex-direction: column;
 }
 #summary .menu li {
  width: 100%;
  padding: 30px;
 }
 #summary .menu li:nth-child(3) {
  margin-bottom: 32px;
 }
 #summary .menu-title .ja {
  font-size: 1.5rem;
 }
 #summary .menu-title .en {
  font-size: 1rem;
 }
 /*-------------------------------------------
  Entry
  -------------------------------------------*/
 #entry {
  margin-bottom: 80px;
 }
 #entry .title {
  font-size: 1.5rem;
 }
 #entry .catchphrase {
  font-size: 1rem;
 }
 #entry .btn {
  font-size: 1.5rem;
 }
 /*-------------------------------------------
  フッター
  -------------------------------------------*/
 #footer .inner {
  flex-wrap: wrap;
 }
 #footer a {
  font-size: 0.75rem;
 }
 #footer .inner .title {
  font-size: 0.9375rem;
 }
 #footer .inner > li {
  width: 50%;
 }
 #footer .inner > li:nth-child(1), #footer .inner > li:nth-child(2) {
  margin-bottom: 30px;
 }
}
/*お問い合わせ*/
.title {
 padding: 100px 0 50px 0;
}
.Form {
 margin-top: 80px;
 margin-left: auto;
 margin-right: auto;
 max-width: 720px;
}
@media screen and (max-width: 900px) {
 .Form {
  margin-top: 40px;
 }
}
.Form-Item {
 border-top: 1px solid #ddd;
 padding-top: 24px;
 padding-bottom: 24px;
 width: 100%;
 display: flex;
 align-items: center;
}
@media screen and (max-width: 900px) {
 .Form-Item {
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 16px;
  padding-bottom: 16px;
  flex-wrap: wrap;
 }
}
.Form-Item:nth-child(5) {
 border-bottom: 1px solid #ddd;
}
.Form-Item-Label {
 width: 100%;
 max-width: 248px;
 letter-spacing: 0.05em;
 font-weight: bold;
 font-size: 18px;
}
@media screen and (max-width: 900px) {
 .Form-Item-Label {
  max-width: inherit;
  display: flex;
  align-items: center;
  font-size: 15px;
 }
}
.Form-Item-Label.isMsg {
 margin-top: 8px;
 margin-bottom: auto;
}
@media screen and (max-width: 900px) {
 .Form-Item-Label.isMsg {
  margin-top: 0;
 }
}
.Form-Item-Label-Required {
 border-radius: 6px;
 margin-right: 8px;
 padding-top: 8px;
 padding-bottom: 8px;
 width: 48px;
 display: inline-block;
 text-align: center;
 background: #ff2a2a;
 color: #fff;
 font-size: 14px;
}
@media screen and (max-width: 900px) {
 .Form-Item-Label-Required {
  border-radius: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  width: 32px;
  font-size: 10px;
 }
}
.Form-Item-Input {
 border: 1px solid #ddd;
 border-radius: 6px;
 margin-left: 40px;
 padding-left: 1em;
 padding-right: 1em;
 height: 48px;
 flex: 1;
 width: 100%;
 max-width: 410px;
 background: #eaedf2;
 font-size: 18px;
}
@media screen and (max-width: 900px) {
 .Form-Item-Input {
  margin-left: 0;
  margin-top: 18px;
  height: 40px;
  flex: inherit;
  font-size: 15px;
 }
}
.Form-Item-Textarea {
 border: 1px solid #ddd;
 border-radius: 6px;
 margin-left: 40px;
 padding-left: 1em;
 padding-right: 1em;
 height: 216px;
 flex: 1;
 width: 100%;
 max-width: 410px;
 background: #eaedf2;
 font-size: 18px;
}
@media screen and (max-width: 900px) {
 .Form-Item-Textarea {
  margin-top: 18px;
  margin-left: 0;
  height: 200px;
  flex: inherit;
  font-size: 15px;
 }
}
.Form-Btn {
 border-radius: 6px;
 margin-top: 32px;
 margin-left: auto;
 margin-right: auto;
 padding-top: 20px;
 padding-bottom: 20px;
 width: 280px;
 display: block;
 letter-spacing: 0.05em;
 background: #ff2a2a;
 color: #fff;
 font-weight: bold;
 font-size: 20px;
 text-align: center;
}
@media screen and (max-width: 900px) {
 .Form-Btn {
  margin-top: 24px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 160px;
  font-size: 16px;
 }
 iframe {
  text-align: center;
  width: 100%;
  margin: 0 auto;
 }
}