/* ==========================
共通設定
========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:
"Yu Gothic",
"Hiragino Sans",
sans-serif;
color:#333;
line-height:1.8;
background:#f8f4eb;
}

img{
width:100%;
display:block;
}

.container{
width:90%;
max-width:1100px;
margin:auto;
padding: 20px;
}

.section{
padding:80px 0;
}

h2{
text-align:center;
margin-bottom:50px;
font-size:2rem;
color:#ff7f50;
}

a {
      text-decoration: none;
      color: inherit;
    }

/* ==========================
ヘッダー
========================== */

.header{
background:#ffffff;
position:sticky;
top:0;
z-index:1000;
box-shadow:
0 2px 10px rgba(0,0,0,.08);
}

.header .container{
display:flex;
justify-content:space-between;
align-items:center;
height:80px;
}

.logo{
    text-decoration:none;
    text-shadow: 1px 1px 2px #aaa;
    font-size:1.6rem;
    font-weight:bold;
    color:#ff7f50;
}

.logo-area{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo-mark{
  width:50px;
  height:50px;
  object-fit:contain;
}

/* ==========================
ナビ
========================== */

.nav ul{
display:flex;
gap:30px;
list-style:none;
}

.nav a{
text-decoration:none;
color:#ff7f50;
font-weight:600;
}

.nav a:hover{
     color:#7ab85c;    
}

/* ==========================
ハンバーガー
========================== */

.hamburger{
display:none;
background:none;
border:none;
cursor:pointer;
}

.hamburger span{
display:block;
width:28px;
height:3px;
background:#ff7f50;
margin:5px 0;
}

/* ==========================
ヒーロー
========================== */

.hero{
min-height:85vh;
background:
linear-gradient(
rgba(255,255,255,.35),
rgba(255,255,255,.35)
),
url("images/IMG_8577.JPG");
background-size:cover;
background-position:center;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}

.hero-inner{
background:
rgba(255,255,255,.3);
padding:50px;
border-radius:20px;
max-width:700px;
}

.hero h1{
    font-family:"Yomogi", cursive;
    font-size:4rem;
    color:#ff7f50;
    text-shadow: 1px 1px 2px #aaa, 1px 1px ;
}

.catch{
font-size:1.5rem;
margin:20px 0;
}

.hero p{
margin-bottom:20px;
}

/* ==========================
ボタン
========================== */

.btn{
display:inline-block;
background:#ffa500;
color:#fff;
text-decoration:none;
padding:15px 40px;
border-radius:50px;
font-weight:bold;
transition:.3s;
}

.btn:hover{
transform:translateY(-3px);
background:#9cbb1c;
box-shadow:
0 10px 20px rgba(0,0,0,.15);
}
.about-box {
display:flex;
gap:40px;
align-items:center;
}
.about-box img{
width:400px;
border-radius: 30% 60% 60% 50% /80% 40% 70% 30%;
box-shadow:
0 5px 20px rgba(0,0,0,.15);    
}
.about-box p{
    font-size: 18px;
}

/*---身につく力---*/

.features-box{
display:flex;
justify-content: space-between;
gap:20px;
align-items:center;
padding: 10px;
}

.features-box img{
width:400px;
border-radius: 30% 60% 60% 50% /80% 40% 70% 30%;
box-shadow:
0 5px 20px rgba(0,0,0,.15);     
}

.features-p h3{
    color: #ff7f50;
    font-size:x-large
}

.features-p p{
    line-height: 2;
    font-size:18px;
    text-align:left;
}

/* ==========================
カード
========================== */

.cards{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}

.card{
background:#fff;
padding:30px;
border-radius:20px 20px 20px 20px / 20px 20px 20px 20px ;
box-shadow:
0 5px 20px rgba(0,0,0,.08),
0 0 0 3px #fffa9a,
0 0 0 6px #9cc883;
transition:.3s;
}

.card:hover{
transform:translateY(-8px);
}

.card h3{
color:#4a5d3a;
margin-bottom:15px;
}

/* ==========================
講師紹介
========================== */

.teacher{
background:#fff;
}

.teacher-box{
display:flex;
gap:40px;
align-items:center;
}

.teacher-box img{
width:250px;
border-radius: 30% 60% 60% 50% /80% 40% 70% 30%;
box-shadow:
0 5px 20px rgba(0,0,0,.15);
}

/* ==========================
ギャラリー
========================== */

.gallery{
background:#fdfaf3;
}

.gallery-grid{
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:20px;
}

.gallery-grid img{
border-radius: 50px / 30px;
transition:.3s;
box-shadow:0 5px 20px rgba(0,0,0,.15); 
}

.gallery-grid img:hover{
transform:scale(1.05);
}

.contact p  {
    text-align: center;
}

/* ==========================
月謝
========================== */

.price-box{
background:#fff;
padding:40px;
border-radius:20px;
text-align:center;
max-width:500px;
margin:auto;
box-shadow:
0 5px 20px rgba(0,0,0,.08);
}

.price-number{
font-size:2rem;
font-weight:bold;
color:#ff7f50;
margin-bottom:15px;
}

/* ==========================
アクセス
========================== */

.map{
margin-top:30px;
border-radius:20px;
overflow:hidden;
box-shadow:
0 5px 20px rgba(0,0,0,.1);
}

.morinoki{
    color:#7ab85c
}

/* ==========================
フッター
========================== */

footer{
background:#7ab85c;
color:#fff;
text-align:center;
padding:30px;
}

 .footer-logo{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-bottom:15px;
}

.footer-logo-mark{
  width:60px;
  height:60px;
  object-fit:contain;
}

/* ==========================
スマホ
========================== */

@media(max-width:768px){

.hamburger{
    display:block;
}

.nav{
    display:none;
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    background:#fff;
    padding:20px;
    z-index:9999;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.nav.active{
    display:block;
}

.nav ul{
    flex-direction:column;
    text-align:center;
}

.hero h1{
    font-size:2.5rem;
}

.catch{
    font-size:1.1rem;
}

.hero-inner{
    padding:30px;
}
    
.about-box{
     flex-direction:column;
    }
    
.about-box img{
    width: 80%;
    }
    
.features-box{
    flex-direction:column;   
    }
.features-box img{
     width: 80%;   
    }

.teacher-box{
    flex-direction:column;
}

.teacher-box img{
    width:70%;
}

.gallery-grid{
    grid-template-columns:
    repeat(2,1fr);
}
}

@media(max-width:480px){

.gallery-grid{
    grid-template-columns:1fr;
}

h2{
    font-size:1.6rem;
}
}

/* ==========================
見出し装飾
========================== */

h2{
position:relative;
display:inline-block;
left:50%;
transform:translateX(-50%);
padding-bottom:10px;
}

h2::after{
content:"";
position:absolute;
left:50%;
bottom:0;
transform:translateX(-50%);
width:80px;
height:4px;
background:#d8a35d;
border-radius:50px;
}

/* ==========================
セクション背景
========================== */

.about{
background:#fffdf8;
}

.features{
background:#f6f9f1;
}

.course{
background:#fffdf8;
}

.contact{
background:#f6f9f1;
}

/* ==========================
無料体験バナー
========================== */

.contact .btn{
font-size:1.2rem;
padding:18px 45px;
margin-top:20px;
}

/* ==========================
カード装飾
========================== */

/*コース案内*/
 .corse-header{
  display: flex;
  align-items: center;
  gap: 15px;
}

.corse-img img{
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.corse-title h3{
  color: #ff7f50;
  margin: 0;
  font-size: 1.4rem;
}

/* ==========================
ヒーローアニメーション
========================== */

.hero-inner{
animation:fadeUp 1.2s ease;
}

@keyframes fadeUp{
from{
    opacity:0;
    transform:translateY(30px);
}

to{
    opacity:1;
    transform:translateY(0);
}
}

/* ==========================
スクロールアニメーション用
========================== */

.fadein{
opacity:0;
transform:translateY(30px);
transition:1s;
}

.fadein.show{
opacity:1;
transform:translateY(0);
}

/* ==========================
ギャラリー画像
========================== */

.gallery-grid img{
aspect-ratio:1/1;
object-fit:cover;
}

#page-top{

    position:fixed;

    right:25px;
    bottom:25px;

    width:60px;
    height:60px;

    border:none;

    border-radius:50%;

    background:rgba(255,127,80,0.7);

    color:#fff;

    font-size:26px;

    cursor:pointer;

    box-shadow:0 5px 15px rgba(0,0,0,0.3);

    display:none;

    transition:.3s;

    z-index:999;
}

#page-top:hover{

    background:#ffa500;

    transform:translateY(-5px);
}

/*=========================
Instagram
=========================*/

.instagram-box{

    margin-top:50px;

    text-align:center;
}

.insta-text{

    margin-bottom:20px;

    font-size:1.1rem;

    color:#666;
}

.insta-link{

    display:inline-flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:#ff7f50;

    font-weight:bold;

    font-size:1.2rem;

    transition:.3s;
}

.insta-link:hover{

    transform:scale(1.05);
}

.insta-icon{

    width:50px;

    height:50px;
}

/* ==========================
ページ切り替えアニメーション
========================== */

body{
    opacity:0;
    animation:fadeIn .8s ease forwards;
}

body.fade-out{
    animation:fadeOut .8s ease forwards;
}

@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@keyframes fadeOut{
    from{
        opacity:1;
    }
    to{
        opacity:0;
    }
}