:root {
    --spacing_xs: 4px;   /* 非常に小さい間隔 */
    --spacing_sm: 8px;   /* 小さな間隔 */
    --spacing_md: 12px;  /* 中間の間隔（基準値） */
    --spacing_lg: 16px;  /* 大きな間隔 */
    --spacing_xl: 24px;  /* 非常に大きな間隔 */
    --main_color: #1300ff;
    --sub_color01:#E0F7FA;
    --sub_color02:#bbdefb;
    --white_color:#fff;
    --black_color:#333;
    --accent_color01: #dc3545;
    --accent_color02: #ffcc00;

  }

/* Reset some default margins and paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Basic styles for the body */
body {
    background-color: var(--sub_color01);
    font-family: 'Noto Sans JP', sans-serif !important; /* フォントファミリーを Noto Sans JP に設定 */
    line-height: 1.6;
    color: var(--black_color);
}

/* Styles for articles and sections */
section {
    text-align: center; /* セクション内のテキストを中央揃えにする */
    margin-bottom: var(--spacing_xl);
    padding: var(--spacing_lg);
}

/* コンテナの共通スタイル */
.container{
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing_lg);
}

/* ヘッダーのフレックスボックス */
header {
    background-color: var(--main_color); /* 濃い青 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 必要に応じて適切な z-index を設定 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* ヘッダーに影をつける */
    & .header_container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        & h1{
            display: flex;
            align-items: center;
            font-size: 1.25rem;
            color: var(--white_color); /* テキストの色を白に設定 */
            .logo{
                max-width: 48px; /* ロゴ画像の最大幅を設定 */
                height: auto; /* 高さを自動調整 */
                margin-right: var(--spacing_sm); /* ロゴとテキストの間のスペース */
            }
        }
        /* ハンバーガーメニューのスタイリング */
        .burger {
            display: none;
            cursor: pointer;
            flex-direction: column;
            & div{
                width: 32px;
                height: 4px;
                background-color: var(--black_color);
                margin: 4px 0;
                transition: all 0.3s ease;
            }
            &.toggle .line1{
                transform: rotate(-45deg) translate(-8px, 9px);
            }
            &.toggle .line2{
                opacity: 0;
            }
            &.toggle .line3{
                transform: rotate(45deg) translate(-8px, -9px);
            }
        }
        /* ナビゲーションのスタイリング */
        .nav_links {
            list-style: none;
            display: flex;
            justify-content: space-around;
            &.responsive{
                display: none;
            }
            & li{
                display: inline-block;
                padding: 0 8px;
                & a{
                    position: relative;
                    color: var(--white_color);
                    text-decoration: none;
                    transition: color 0.3s ease;
                    display: inline-block;
                    padding: 8px 0;
                    & i{
                        margin-right: 4px; /* アイコンとテキストの間隔を調整 */
                    }
                    &::after{
                        content: '';
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        width: 0;
                        height: 2px;
                        background: var(--accent_color02); /* 下線の色を設定 */
                        transition: width 0.3s;
                    }
                    &:hover{
                        color: var(--accent_color02);
                    }
                    &:hover::after{
                        width: 100%;
                    }
                }
                &.current_page a{
                    color: var(--accent_color02); /* 下線の色と一致させる */
                    &::after{
                        width: 100%; /* 下線を全幅にする */
                    }
                }

            }

        }
    }
}


/* セクションタイトル */
.section_title {
    margin-bottom: var(--spacing_md); /* 下部マージン */
    border-bottom: 2px solid #1300ff; /* 下線の色と太さ */
    display: inline-block; /* インラインブロックで表示 */
}

/*他セクション共通部分*/
.decorated_heading {
    position: relative; /* Overlay relative to parent */
    background-image: url('../images/header_image.jpg');
    background-size: cover; /* Adjust background image to fit the element */
    background-position: center; /* Center the background image */
    text-align: center; /* Center align text */
    margin-top: 72px;
    padding: 60px; /* Set appropriate padding */
    &::before{
        content: ''; /* Empty content for overlay */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(19, 0, 255, 0.5); /* Semi-transparent black overlay */
        z-index: 1; /* Place overlay behind text */
    }
    & .decorated_heading_title{
        font-size: 2rem; /* Set font size */
        display: inline;
        color: var(--white_color); /* White text */
        padding: 0.5rem;
        letter-spacing: 0.1em; /* Add letter spacing */
        position: relative;
        z-index: 2; /* Place text above overlay */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 影の色とぼかし具合 */
    }

}

/* 無料体験のお問い合わせセクション */
.free_trial_contact {
    position: relative;
    background-color: var(--sub_color01); /* 背景色を設定 */
    background-image: url('../images/free_trial_contact_image.jpg'); /* 背景画像を設定 */
    background-size: cover; /* 背景画像をカバー */
    background-position: center; /* 背景画像を中央に配置 */
    background-attachment: fixed; /* 背景画像を固定 */
    text-align: center; /* テキストを中央揃え */
    margin-bottom: 0; /* 下部マージンを設定 */
    overflow: hidden; /* オーバーフローを隠す */
    color: var(--white_color); /* テキストカラーを白に設定 */
    &::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(19, 0, 255, 0.5); /* 半透明の背景 */
        z-index: 1; /* 背景の上に重ねる */
    }
    & .contact_container{
        position: relative;
        z-index: 2; /* コンテンツの上に重ねる */
        & .contact_message{
            font-size: 32px; /* フォントサイズを設定 */
            margin-bottom: var(--spacing_md); /* 下部マージンを設定 */
            color: var(--accent_color02);
        }
        & .contact_details{
            font-size: 16px; /* フォントサイズを設定 */
        }
    }
}

/* フッタースタイリング */
footer {
    background-color: var(--main_color); /* ダークブルーの背景 */
    color: var(--white_color); /* 白い文字 */
    padding: var(--spacing_lg);
    text-align: center; /* テキストを中央揃え */
    /* フッターメニュースタイリング */
    & .footer_menu{
        margin-bottom: var(--spacing_md);
        & ul li{
            display: inline; /* インラインリスト項目 */
            margin-right: var(--spacing_lg); /* メニュー項目間のスペース */
        }
    }
    
    & h3{
        font-size: 16px;
    }

    & a{
        color: var(--white_color); /* リンクの文字を白に設定 */
        text-decoration: none; /* 下線を削除 */
        transition: color 0.3s ease; /* 背景色の遷移効果 */
        &:hover{
            color: var(--accent_color02); /* ホバー時の黄色い文字 */
        }
    }
    & ul{
        list-style-type: none;
    }
    /* ソーシャルメディアリンクのスタイル */
    & .social_media_links {
        margin-bottom: var(--spacing_md);
        display: flex;
        justify-content: center;
        flex-direction: row;
        & a{
            display: inline-block;
            margin-right: var(--spacing_md);
            &:last-child{
                margin-right: 0px;
            }
        }
    }
    /* 提携団体リンクのスタイル */
    & .affiliations{
        margin-bottom: var(--spacing_md);
        & p{
            font-weight: bold;
        }
        & ul{
            display: flex;
            justify-content: center;
            flex-direction: row;
            margin-bottom: var(--spacing_md);
            & li{
                margin-right: var(--spacing_md);
                &:last-child{
                    margin-right: 0px;
                }
            }
        } 
    }
}

/* レスポンシブデザイン */
@media screen and (max-width: 1024px) {
    header{
        & .header_container{
            & .nav_links{
                display: none; /* デフォルトは非表示 */
                & li{
                    width: 100%;
                    text-align: center;
                    margin: 12px 0;
                    padding: var(--spacing_sm);
                    & a{
                        width: 100%;
                        font-size: 24px;
                        text-align: left;
                        transition: background-color 0.3s;
                        padding: var(--spacing_sm);
                        &:is(:hover,:focus){
                            background-color: rgba(255, 255, 255, 0.1);
                        }
                        &:active{
                            background-color: var(--sub_color02);
                        }
                        &::after{
                            transition: width 0s;
                        }
                    }
                }
                &.responsive{
                    position: absolute;
                    right: 0;
                    top: 84px;
                    background-color: var(--main_color);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 100%;
                    min-height: calc(100vh - 80px); /* メニューの高さを設定 */
                    transform: translateX(100%);
                    transition: transform 0.5s ease-in;
                    z-index: 1000;
                    justify-content: flex-start;
                    &.nav_active{
                        transform: translateX(0%);
                    }
                }
            }
            & span{
                font-size: 20px;
            }
            & .burger{
                display: flex;
                background-color: var(--accent_color02);
                padding: var(--spacing_sm);
            }
        }
    }
}


/* 最大幅768px用のレスポンシブデザイン */
@media screen and (max-width: 768px) {
    .free_trial_contact{
        & .contact_container{
            /* 無料体験のお問い合わせレスポンシブスタイル */
            & .contact_message {
                font-size: 24px; /* フォントサイズを小さくする */
            }
            & .contact_details {
                font-size: 14px; /* フォントサイズを小さくする */
            }
        }
    }
    /* フッターのレスポンシブスタイリング */
    footer {
        /* フッターメニュースタイリング */
        & .footer_menu{
            & ul li{
                display: block; /* モバイル向けのブロック表示 */
                margin-bottom: var(--spacing_sm); /* モバイル用のスペーシング調整 */
                margin-right: 0px;
                &:last-child{
                    margin-bottom: 0px;
                }
            }
        }
        & .social_media_links{
            flex-direction: column;
            & a{
                margin-right: 0px;
                margin-bottom: var(--spacing_xs);
                &:last-child{
                    margin-bottom: 0px;
                }
            }
        }
        & .affiliations{
            & ul{
                flex-direction: column;
                & li{
                    margin-right: 0px;
                    margin-bottom: var(--spacing_xs);
                    &:last-child{
                        margin-bottom: 0px;
                    }
                }
            }
        }
    }
}