/**************************/
/* 才華學舎 */
/**************************/



html, body {
    font-family: "Noto Sans JP", "游ゴシック", "ヒラギノ角ゴ ProN W3", "メイリオ", sans-serif;
    font-size: 24px; /* ここがデフォルトのフォントサイズ */
    width: 100%;
    height: 100%;
    margin-left: 0px;
    margin-right: 0px;
}


/**************************
Dify CgatBot用
    #dify-chatbot-bubble-button
    #dify-chatbot-bubble-button
**************************/



#dify-chatbot-bubble-button {
    background-color: #1C64F2 !important;
}
#dify-chatbot-bubble-window {
    width: 24rem !important;
    height: 40rem !important;
}



/**************************
    基本的なパーツのスタイル
    .input:focus 
    .textarea:focus 
    .textBoxr:focus
    a
    a:hover
    a:visited:hover
    .h10
    .h20
    h1
    h2, h3
    h2::first-letter
**************************/



input:focus {
    background-color: #fff0d1;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);
    font-family: Meiryo UI,メイリオ,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', Osaka, Verdana, Helvetica, Arial, 'ＭＳ Ｐゴシック', sans-serif;
}
.textarea:focus {
    background-color: #fff0d1;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);
    font-family: Meiryo UI,メイリオ,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', Osaka, Verdana, Helvetica, Arial, 'ＭＳ Ｐゴシック', sans-serif;
}
.textBoxr:focus {
    border-color: #ff0000;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);
    font-family: Meiryo UI,メイリオ,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', Osaka, Verdana, Helvetica, Arial, 'ＭＳ Ｐゴシック', sans-serif;
}
a {
    text-decoration: none;
}
    a:hover {
        color: #FF0000;
        text-decoration: underline;
    }
    a:visited:hover {
        color: #FF0000;
    }
.h10 {
    height: 10px;
    padding: 10px 0 0 0;
    border-style: none;
}
.h20 {
    height: 20px;
    padding: 20px 0 0 0;
    border-style: none;
}
h1 {
    color: #333;
    font-size: 48px;
    line-height: 54px;
    font-weight: bold;
}
h2, h3 {
    color: #333;
    font-size: 42px;
    line-height: 48px;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-thickness: 8px; /* アンダーラインの太さを指定 */
    text-underline-offset: 10px; /* アンダーラインの余白を指定 */
    text-decoration-color: #D00000; /* アンダーラインの色を指定 */
}
    h2::first-letter {
        font-size: 62px; /* 文字を大きくする */
        font-weight: bold; /* 太字にする */
    }



/**************************
    メイン画面・背景・ロゴ
    .saikaBanner
    .saikaBanner img 
    .saikabackGraund
    .backGround
    .pageBackGround
    .saikaTitle
**************************/



    .saikaBanner {
    margin-left: 15px;
    width: 100px;
    height: 100px;
    padding: 15px;
}
    .saikaBanner img {
        width:320px;
    }
.saikabackGraund {
width: 50%;
height: 70%;
background-image: url("../img/logo_c.png");
background-size: 80%; /* 画像サイズを小さく */
background-repeat: no-repeat; /* 背景画像を繰り返さない */
background-position: center; /* 背景画像を中央に配置 */
}
.backGround {
    width: 100%;
    height: 100%;
    background-image: url("../img/pixta_110620820r.jpg");
    background-size: cover; /* 背景画像を拡大縮小 */
    background-repeat: no-repeat; /* 背景画像を繰り返さない */
    background-position: top; /* 背景画像を右に配置 */
}
.pageBackGround {
    width: 100%;
    height: 50%;
    background-image: url("../img/pixta_110620820r.jpg");
    background-size: cover; /* 背景画像を拡大縮小 */
    background-repeat: no-repeat; /* 背景画像を繰り返さない */
    background-position: right; /* 背景画像を右に配置 */
}
.saikaTitle{
    width: 80%;
    height: 30%;
    font-size: 72px;
    line-height: 80px;
    align-items: center;
    text-align: left;
    padding:80px;
    margin: 0 auto; /* 中央に配置 */
    }



/**************************
    ページ内のタイトル・本文
    .titleArea
    .pageTitleStyle
    .pageTextStyle
**************************/



.titleArea {
    width: 100%;
    display: block;
    justify-content: center; /* 中央寄せ */
    gap: 10px; /* 画像間のスペース */
    align-items: center;
}
.pageTitleStyle {
    width: 70%;
    font-size: 72px;
    line-height: 88px;
    margin-top: 10px; /* テキストと画像の間に余白を追加 */
    align-items: center;
    text-align: center;
    margin: 0 auto; /* 中央に配置 */
    font-weight: bold; /* 文字を太くする */
}
.pageTextStyle {
    width: 80%;
    font-size: 36px;
    line-height: 46px;
    margin: 0 auto; /* 中央に配置 */
}



/**************************
    ボタンイメージのスタイル
    .image-container
    .image-box
    .image-box2
    .image-box:hover
    .image-box2:hover
    .image-box img
    .image-box2 img
    .image-box p
    .image-box2 p
    .imageComment
 **************************/



.image-container {
    width: 100%;
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 10px; /* 画像間のスペース */
    align-items: center;
    align-items: flex-start; /* 上に揃える */
}
.image-box {
    padding: 5px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease; /* 変形のトランジションを追加 */
    text-align: center; /* テキストを中央寄せ */
    max-width: 480px; /* 最大幅を設定 */
    font-size: 24px;
    line-height: 32px;
    color: #333;
}
.image-box2 {
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease; /* 変形のトランジションを追加 */
    text-align: center; /* テキストを中央寄せ */
    max-width: 480px; /* 最大幅を設定 */
    font-size: 24px;
    line-height: 32px;
    color: #333;
}
.image-box:hover {
    transform: scale(1.1); /* マウスオーバー時に1.1倍に拡大 */
}
.image-box2:hover {
    transform: scale(1.1); /* マウスオーバー時に1.1倍に拡大 */
}
    .image-box img {
        width: 480px;
        height: auto;
        display: block;
        margin: 0 auto; /* 画像を中央寄せ */
    }
.image-box2 img {
    width: auto;
    height: 320px;
    display: block;
    margin: 0 auto; /* 画像を中央寄せ */
}
.image-box p {
    margin-top: 10px; /* 画像とテキストの間に余白を追加 */
    font-size: 24px;
    color: #333;
}
.image-box2 p {
    margin-top: 10px; /* 画像とテキストの間に余白を追加 */
    font-size: 24px;
    color: #333;
}
.imageComment {
    font-size: 24px;
    color: #333;
    text-align:left;
    padding :0px 25px 0px 25px;
    margin-right    10px;
}



/**************************
    フッターのスタイル
    foter
    footLine {
    footText
**************************/



.footer {
    color: #fff;
    background-color: #f6aeae;
    display: flex;
    flex-direction: column;
    gap: 10px; /* ライン間のスペース */
    padding: 40px 0;
    justify-content: center; /* 中央寄せ */
    gap: 20px; /* 要素間のスペース */
    border-top: 1px solid #ddd; /* 上部に境界線を追加 */
    align-items: center;
}
.footLine {
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 20px; /* 要素間のスペース */
    text-underline-offset: 5px; /* アンダーラインと文字の間隔をあける */
}
.footText {
    font-size: 24px;
    line-height: 28px;
    color: #100f53;
    padding: 0px 25px 0px 25px;
    margin-right 10px;
    text-align: left;
}



/**************************
    キャンペーン
    campaignBannerArea
    campaignArea
    campaignTitle
    campaignSubTitle
    campaignText
    campaignButton
    campaignButton:hover
**************************/



.campaignBannerArea {
    width: 60%;
    height: 200px;
    display: flex;
    align-items: center; /* 垂直方向の中央寄せ */
    justify-content: center; /* 中央寄せ */
    gap: 10px; /* 画像間のスペース */
    align-items: center;
    margin: 0 auto; /* 中央に配置 */
    background-color: #b00000;
    color: #ffffff;
    border-top-left-radius: 20px; /* 左上の角を丸くする */
    border-top-right-radius: 20px; /* 右上の角を丸くする */
}
.campaignArea {
    width: 60%;
    display: block;
    justify-content: center; /* 中央寄せ */
    gap: 10px; /* 画像間のスペース */
    align-items: center;
    margin: 0 auto; /* 中央に配置 */
    background-color: #f6b9b9;
    border-bottom-left-radius: 20px; /* 左下の角を丸くする */
    border-bottom-right-radius: 20px; /* 右下の角を丸くする */
}
.campaignTitle {
    width: auto;
    font-size: 62px;
    line-height: 70px;
    align-items: center;
    text-align: center;
}
.campaignSubTitle {
    width: auto;
    font-size: 52px;
    line-height: 60px;
    align-items: center;
    text-align: center;
}
.campaignText {
    width: 60%;
    font-size: 42px;
    line-height: 50px;
    margin: 0 auto; /* 中央に配置 */
}
.campaignButton {
    width: 60%;
    height: 200px;
    background-color: #215b27;
    color: #fff;
    display: block;
    font-size: 62px;
    justify-content: center; /* 中央寄せ */
    gap: 10px; /* 画像間のスペース */
    align-items: center;
    margin: 0 auto; /* 中央に配置 */
    border-radius: 20px; /* 四隅を丸くする */
}
    .campaignButton:hover {
        background-color: #ff0000;
    }



@media only screen and (max-width: 768px) { /* SmartPhone */
    body {
        font-size: 18px; /* スマホ向けのフォントサイズ */
        line-height:
        24px;
    }
    .h10 {
        height: 5px;
        padding: 5px 0 0 0;
    }
    .h20 {
        height: 10px;
        padding: 10px 0 0 0;
    }
    li {
        font-size: 14px;
        line-height: 20px;
    }
    li a {
        font-size: 20px;
        line-height: 26px;
    }
    h1 {
        font-size: 22px;
        line-height: 26px;
    }
    h2, h3 {
        font-size: 22px;
        line-height: 26px;
        text-decoration-thickness: 2px; /* アンダーラインの太さを指定 */
        text-underline-offset: 4px; /* アンダーラインの余白を指定 */
    }
        h2::first-letter {
            font-size: 30px; /* 文字を大きくする */
            font-weight: bold; /* 太字にする */
        }



        .saikaBanner {
        width: 100%;
        height: 60px;
    }
        .saikaBanner img {
            width: 120px;
        }
    .saikabackGraund {
        width: 60%;
        margin-left: 25px;
        background-size: 70%; /* 画像サイズを100%に */
        background-position: left; /* 背景画像を右に配置 */
    }
    .backGround {
        width: 100%;
        background-position: center; /* 背景画像を右に配置 */
        background-size: cover; /* 背景画像を拡大縮小 */
        background-position: 65% 0; /* 背景画像のX軸50%から表示 */
    }
    .saikaTitle {
        font-size: 32px;
        line-height: 36px;
        padding: 30px;
    }
    .pageTitleStyle {
        width: 90%;
        font-size: 22px;
        line-height: 28px;
        padding:26px;
    }
    .pageTextStyle {
        width: 90%;
        font-size: 16px;
        line-height: 19px;
    }
    .pageTextStyle p {
        font-size: 16px;
        line-height: 19px;
    }



    .image-container {
        width: 100%;
        display: flex;
        flex-direction: column; /* 縦方向に配置 */
        align-items: center; /* 中央寄せ */
        gap: 10px; /* 画像間のスペース */
    }
    .imageComment {
        font-size: 18px;
        line-height: 22px;
        color: #333;
        text-align: left;
        padding: 0px 25px 0px 25px;
        margin-right 10px;
    }
    .image-box img {
        width: 200px;
        height: auto;1
    }
    .image-box2 img {
        width: 200px;
        height: auto;
    }



    .footLine {
        display: flex;
        justify-content: center; /* 中央寄せ */
        gap: 1px; /* 要素間のスペース */
    }
    .footText {
        font-size: 14px;
        line-height: 24px;
        color: #101010;
        padding: 0px 5px 0px 5px;
        margin-right 5px;
    }
    .footText a {
        color: #101010;
    }
    .footText a:visited {
        color: #101010;
    }



    .campaignBannerArea {
        width: 90%;
        height: 60px;
    }
    .campaignArea {
        width: 90%;
    }
    .campaignTitle {
        width: 100%;
        font-size: 18px;
        line-height: 22px;
    }
    .campaignSubTitle {
        width: 100%;
        font-size: 14px;
        line-height: 11px;
    }
    .campaignText {
        width:90%;
        font-size: 12px;
        line-height: 15px;
    }
    .campaignButton {
        width: 90%;
        height: 60px;
        font-size: 18px;
        line-height: 22px;
    }
}