* {
    box-sizing: border-box;
}

/* Google FontsからLoraフォントをインポート */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');


body, h1, h2, h3, p, a, th, td { /* すべての基本要素にフォントを適用 */
    font-family: 'Lora', serif;
}

li {
    margin: 0 30px 0 30px; /* リストアイテムの横の間隔を広げる */
    font-size: 18px; /* フォントサイズを少し大きく */
}

/* 基本的なスタイル */
body {
    font-family: 'YourCustomFont', Arial, sans-serif;
    line-height: 1.6;
    margin: 100px 0 0 0;
    padding: 0;
    color: #1E1E1E;
    background-color: #F8F5FA;
}

#main-header {
    background-color: transparent; /* 背景色を透明にする */
    color: #1E1E1E; /* 文字色を保持 */
    padding: 0; /* 余白をゼロに設定 */
    position: fixed;
    height: 70px;
    top: 0;
    width: 100%;
    display: flex;
    align-items: center;
    transition: top 0.6s ease;
}
.header-logo {
    margin-top: 25px;
    margin-left: 40px; /* 画像を右に20px移動 */
    width: auto;
    height: 70px;
}
nav {
    margin-left: auto; /* ナビゲーション全体を左に10pxだけ移動させる */
    margin-right: 20px;
}


nav a {
    transition: color 0.3s ease; /* 色変更のアニメーションをスムーズに */
}

nav a:hover {
    color: #C69AC7; /* ホバー時の色 */
}
nav ul {
    background-color: rgba(255, 255, 255, 0.9); /* 半透明の白色背景 */
    padding: 10px; /* リスト全体のパディング */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* 影を追加して浮き出し感を出す */
    border-radius: 5px; /* 角を丸く */
}

nav ul li {
    margin: 0 15px; /* リストアイテム間の距離 */
}
a {
    text-decoration: none;
    color: #1E1E1E;
}
ul {
    list-style: none;
    margin: 0;
    display: flex;
}
li {
    margin: 0 30px 0 30px;
    font-size: 16px;
}
.sp-nav {
    color: #fff;
}

/* 画像のスライドショーを管理する */

#slideshow {
    position: relative; /* 相対位置に設定 */
    top: 30px; /* ヘッダーの高さを考慮 */
    width: 100%; /* コンテナの幅全体 */
    max-width: 100%; /* 最大幅を画面の幅に合わせる */
    height: 100vh; /* 高さをビューポートの100%に設定 */
    z-index: -1; /* ヘッダーの下に画像が来るようにz-indexを設定 */
}

@media (min-width: 600px) {
    #slideshow {
        height: 60vw; /* 画面が小さいときは4:3の比率に変更 */
    }
}

#slideshow img {
    position: absolute;
    top: 50%; /* 上端から50%の位置に配置 */
    left: 50%; /* 左端から50%の位置に配置 */
    transform: translate(-50%, -50%); /* 中心点を正確に中央に移動 */
    max-width: 100%; /* 最大幅をコンテナの100%に制限 */
    max-height: 100%;
    height: auto; /* 高さは自動調整 */
    width: 100%;
    object-fit: cover;
    transition: opacity 2s ease-in-out; /* 2秒かけて透明度を変化させる */
}

/* img.main{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    height: auto;
} */

/* セクションのスタイル */
section {
    padding: 0;
    margin: 50px 15%;
    text-align: center;
}

hr{
    padding: 0;
    border: none;   
}

.hr-top{
    border-top: 5px solid #C69AC7;
    width: 10%;
}

.hr-submenu{
    border-top: 1px solid #C69AC7;
    width: 75%;
}

.hr-access{
    border-top: 1px solid #C69AC7;
    width: 30%;  
}

h2{
    margin-bottom: -10px;
    padding: 0;
}

p{
    margin-bottom: 10px;
}

.sp-nav {
    display: none;
}

/* コンセプトセクション */
#concept {
    text-align: center;
}

/* #menu{
} */

.service-background {
    background-size: cover;
    background-position: center;
    opacity: 0.5; /* 背景画像の透明度調整 */
}

#hair-removal {
    background-image: url('images/datsumou.JPG');
}

#skin-improvement {
    background-image: url('images/hadashitu-kaizen.JPG');
}

#body-care {
    background-image: url('images/body.JPG');
}

#head-treatments {
    background-image: url('images/head.JPG');
}



/* テーブルの基本スタイル */
table {
    width: 80%; /* テーブルの幅をページの中央に合わせて調整 */
    margin: 20px auto; /* 中央寄せ */
    border-collapse: collapse; /* セルの間隔なし */
    background: #ffffff; /* 背景色 */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 影を付ける */
}

th, td {
    border: 1px solid #dddddd; /* 境界線 */
    text-align: left; /* 左揃え */
    padding: 8px; /* 内側の余白 */
}

th {
    background-color: #f2f2f2; /* 見出しの背景色 */
}



/* レスポンシブ対応 */
@media (max-width: 600px) {
    table {
        width: 100%; /* 小さい画面でテーブル幅を調整 */
    }
}

img.grayscale{
    width: 50%;
    height: 50%;
}

iframe {
    width: 100%;
    aspect-ratio: 16/9; /* アスペクト比（縦横比）を指定 */
}

.line-pic {
    display: block; /* 画像をブロック要素として扱う */
    margin: 100px auto; /* 上下に20px、左右は自動で中央寄せ */
    width: 80%; /* 画像の幅を80%に設定し、小さく表示 */
}
  
/* フッターのスタイル */
footer {
    background: #EBE2F0; /* 濃い灰色の背景 */
    color: #53607A; /* 白色テキスト */
    text-align: center;
    padding: 20px 0;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    border-top: 3px solid #C69AC7; /* 上部に薄いピンクの線を追加 */
}

footer .footer-content p {
    margin: 10px 0;
}

footer .social-icons a {
    margin: 0 10px;
    display: inline-block;
}

footer .social-icons img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin: 0 10px;
    border-radius: 5px;       /* アイコンぽく丸みをつけても◎ */
}

footer .footer-logo {
    width: 200px; /* 画像の幅を指定 */
    height: auto; /* 高さは自動調整 */    
    margin-top: 40px; /* 画像の上に20pxのマージンを追加 */
    margin-bottom: 20px; /* 画像の下に20pxのマージンを追加 */
}

footer a {
    color: #C69AC7;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #fff;
}

/* メディアクエリーでレスポンシブ対応 */

/* メディアクエリでスマートフォンやタブレットの表示を最適化 */
@media (max-width: 768px) {
    body {
        margin: 0;
        font-size: 14px; /* フォントサイズを小さいデバイス用に調整 */
    }

    .header-logo {
        width: 60px; /* ロゴのサイズを小さくする */
        height: auto; /* 高さは自動調整 */
    }

    nav ul {
        padding: 5px; /* ナビゲーションのパディングを調整 */
        flex-direction: column; /* ナビゲーションアイテムを縦に並べる */
    }

    nav ul li {
        margin: 10px 0; /* リストアイテムのマージンを調整 */
    }

    section {
        margin: 20px 5%; /* セクションのマージンを調整 */
    }

    img.grayscale {
        width: 100%; /* 画像を画面幅に合わせる */
        height: auto; /* 高さは自動で調整 */
    }
}

@media (max-width: 480px) {
    h1, h2, h3 {
        font-size: 1.5rem; /* 見出しのフォントサイズを調整 */
    }

    .line-pic {
        width: 90%; /* LINEの画像の幅を調整 */
        margin: 20px auto; /* 画像のマージンを調整 */
    }

    footer .footer-logo {
        width: 150px; /* フッターロゴのサイズを調整 */
    }
}



@media screen and (max-width: 640px) {
    .pc-nav {
       display: none;
    }
    .pc-nav a{	
        text-decoration: none;
        color: #1e1e1e;
    }
    .sp-nav {
       z-index: 1;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100vh;
       display: block;
       width: 100%;
       background: rgba(0, 0, 0, .8);
       opacity: 0;
       transform: translateY(-100%);
       transition: all .2s ease-in-out;
    }
    .sp-nav a{	
        text-decoration: none;
        color: #fff;
    }
    #hamburger {
       position: relative;
       display: block;
       width: 30px;
       height: 25px;
       margin: 0 0 0 auto;
    }
    #hamburger span {
       position: absolute;
       top: 50%;
       left: 0;
       display: block;
       width: 100%;
       height: 2px;
       background-color: #1e1e1e;
       transform: translateY(-50%);
    }
    #hamburger::before {
       content: '';
       display: block;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 2px;
       background-color: #1E1E1E;
    }
    #hamburger::after {
       content: '';
       display: block;
       position: absolute;
       bottom: 0;
       left: 0;
       width: 70%;
       height: 2px;
       background-color: #1E1E1E;
    }
    /*スマホメニュー*/
    .sp-nav ul {
       padding: 0;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       height: 100%;
       color: #fff;
    }
    .sp-nav li {
       margin: 0;
       padding: 0;
    }
    .sp-nav li span {
       font-size: 15px;
       color: #fff;
    }
    .sp-nav li a, .sp-nav li span {
       display: block;
       padding: 20px 0;
    }
    /*-閉じるアイコンー*/
    .sp-nav .close {
       position: relative;
       padding-left: 20px;
    }
    .sp-nav .close::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 0;
       display: block;
       width: 16px;
       height: 1px;
       background: #fff;
       transform: rotate( 45deg );
    }
    .sp-nav .close::after {
       content: '';
       position: absolute;
       top: 50%;
       left: 0;
       display: block;
       width: 16px;
       height: 1px;
       background: #fff;
       transform: rotate( -45deg );
    }
    .toggle {
       transform: translateY( 0 );
       opacity: 1;
    }
}