/* 共通調整-------------------------------------------------------------------------------------------- */

/* 余白等調整 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 画像サイズ調整 */
/* 画像の下にできる隙間をなくす */
img {
    max-width: 100%;
    vertical-align: middle;
}

/* リストスタイルを削除 */
ul {
    list-style-type: none;
}

/* リストの下線を削除 */
/* リストの文字色変更 */
/* リストを太文字に */
a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

/* リストの文字ポイント時に色変更 */
a:hover {
    color: #fff;
}


/* フォントサイズ基準決定 */
/* 行間を広げる */
/* グーグルフォントの指定 */
html {
    font-size: 16px;
    line-height: 1.6;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;
}

/* 強調したい文字のサイズ決定 */
.bigword {
    font-size: 40px;
}




/* ヘッダー-------------------------------------------------------------------------------------------- */

/* 背景色指定 */
/* 幅拡張 */
/* ヘッダー固定 */
/* 重ね順TOPに */
/* ヘッダー幅調整 */
header {
    background-color: rgba(219, 219, 219, 0.85);
    padding: 20px 50px 20px 0;
    position: fixed;
    z-index: 99;
    width: 100%;
}


/* リンクを横並びに */
/* 横並びにしたリンクをセンターに */
/* リンク同士の間隔調整 */
header ul {
    display: flex;
    justify-content: right;
    gap: 30px;
}



/* ヒーロー-------------------------------------------------------------------------------------------- */

/* ヘッダーとメイン間の幅を広げる */
h1 {
    margin-bottom: 50px;
    text-align: center;
}

/* スマホ版ヘッダー消す */
.hero-sp {
    display: none;
}


/* メイン導入------------------------------------------------------------------------------------------ */

/* 導入部分の幅・高さ決定 */
#donyu {
    max-width: 1000px;
    margin: 0 auto;
}

/* 導入文字と画像の距離調整 */
.donyu-box {
    margin-bottom: 50px;
}

/* 導入文字のサイズ決定 */
/* 導入文字をセンターに */
/* 導入文字同士の距離調整 */
.donyu {
    font-size: 25px;
    text-align: center;
    margin-bottom: 20px;
}

/* 導入部分のイメージ画像サイズ決定 */
/* 画像をセンターに・導入文字との距離調整 */
.worry-photo {
    width: 80%;
    margin: 0 auto 30px auto;
}

/* お悩みの幅を決定 */
/* お悩みを立て並びに */
/* お悩みのフォントサイズ決定 */
/* お悩みをセンターに */
.worry-box {
    width: 280px;
    display: flex;
    flex-direction: column;
    font-size: 20px;
    margin: 0 auto 50px auto;
}

/* ☑とお悩み内容を横並びに */
/* ☑とお悩み内容の間隔調整 */
/* お悩み同士の間隔調整 */
.worry {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

/* ☑のサイズ決定 */
.worry div {
    width: 25px;
}

/* メッセージ01をセンター表示 */
/* フォントサイズ決定 */
/* 行間決定 */
/* メッセージ01と02の間隔調整 */
.message01 {
    text-align: center;
    font-size: 18px;
    line-height: 2.5;
    margin-bottom: 20px;
}

/* メッセージ02をセンター表示 */
/* フォントサイズ決定 */
/* 行間決定 */
/* メッセージ02とサービス特徴の間隔調整 */
.message02 {
    text-align: center;
    font-size: 18px;
    line-height: 2.5;
    margin-bottom: 100px;
}


/* メインサービス---------------------------------------------------------------------------------------- */


/* 高さ決定 */
/* 画像挿入 */
/* 画像リピートなし */
/* 画像表示調整 */
/* 画像を上基準で表示 */
/* 「サービスの～」の垂直位置調整 */
/* 「サービスの～」をセンターに */
/* 「サービスの～」を白文字に */
/* 「サービスの～」のフォントサイズ決定 */
/* 「サービスの～」と内容の間隔調整 */

#service h2 {
    height: 300px;
    background-image: url(../images/service-image.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;

    padding-top: 150px;
    text-align: center;
    color: #fff;
    font-size: 40px;

    margin-bottom: 100px;
}

/* サービス部分の幅・高さ決定 */
.service-box {
    max-width: 1000px;
    margin: 0 auto;

}

/* サービスタイトルと内容の水平位置指定 */
.service {
    padding: 0 50px;
    margin: 0 0 50px 0;
}

/* サービスタイトルに下線 */
/* サービスタイトルのフォントサイズ決定 */
/* サービスタイトルと内容の間隔調整 */
.service h3 {
    border-bottom: 1px solid #000;
    font-size: 24px;
    margin-bottom: 30px;
}

/* フォントサイズを決定 */
/* サービス内容説明の行間調整 */
.service p {
    font-size: 18px;
    line-height: 2;
}


/* cook-boxを横並びに */
/* cook-boxをセンターに */
/* サービス1とサービス2の間隔調整 */
.cook-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 120px;
}

/* cookのサイズ決定 */
/* cookの中を折り返す */
/* cookの左右余白をつける */
.cook {
    width: 40%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 15px;
    margin: 10px;
    background-color: #EFC58E;
    border-radius: 8px
}


/* 料理写真と説明の間隔調整 */
.cook-photo {
    margin-right: 10px;
}


/* 料理説明のサイズ決定 */
/* 料理説明のフォントサイズ決定 */
.cook-text {
    width: 50%;
    font-size: 13px;
}

/* 「講師紹介」をセンターに */
/* 「講師紹介」のフォントサイズ決定 */
/* 「講師紹介」と内容の間隔調整 */
.teacher-introduction {
    text-align: center;
    font-size: 22px;
    margin-bottom: 50px;
}

/* teacher-boxを縦並びに */
.teacher-box {
    display: flex;
    flex-direction: column;
}

/* 講師写真と説明を横並びに */
/* 講師写真と説明をセンターに */
/* 講師同士の間隔調整 */
.teacher {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

/* 講師紹介を交互に */
.sort0 {
    order: 0;
}

.sort1 {
    order: 1;
}


/* 講師写真のサイズ決定 */
/* 講師写真の左右に余白つける */
.teacher-photo {
    width: 300px;
    padding: 0 30px;
}

/* 講師説明のサイズ決定 */
/* 講師説明の余白追加 */
/* 講師説明の背景色設定 */
/* 講師説明の背景色を角丸に */
.teacher-text {
    width: 55%;
    padding: 15px 15px 0 15px;
    background-color: #f7f5f4;
    border-radius: 8px;
}

/* 講師名前のフォントサイズ決定 */
/* 講師名前と肩書の間隔調整 */
.teacher h4 {
    font-size: 20px;
    margin-bottom: 15px;
}

/* 講師説明の行間調整 */
/* 講師説明の間隔調整 */
.teacher p {
    line-height: 2;
    margin-bottom: 10px;
}

/* 講師説明01と02の間隔調整 */
.teacher-profile-01 {
    margin-bottom: 23px;
}

/* 吹き出しのサイズ決定 */
/* 吹き出しの位置調整 */
.balloon {
    width: 150px;
    margin: 0 0 0 300px;
}

/* 「過去の配信～」のフォントサイズ決定 */
.archive h3 {
    font-size: 24px;
}

/* 「過去の配信～」と画像の間隔調整 */
.archive p {
    margin-bottom: 10px;
}

/* 「過去の配信～」センターに */
/* サービス02と03の間隔調整 */
.archive {
    text-align: center;
    margin-bottom: 120px;
}

/* アーカイブ写真のサイズ決定 */
/* アーカイブ写真をセンターに */
.archive-photo {
    width: 60%;
    margin: 0 auto;
}


/* service03-photo-boxのサイズ決定 */
/* メール画像とコンテスト画像を縦並びに */
/* メール画像とコンテスト画像をセンターに、料金プラントの間隔調整 */
.service03-photo-box {
    width: 80%;
    display: flex;
    flex-direction: column;
    margin: 0 auto 120px auto;
}

/* メール画像とコンテスト画像のサイズ決定 */
.mail-photo,
.content-photo {
    width: 50%;
}

/* メール画像とコンテスト画像の間隔調整 */
.mail-photo {
    margin-bottom: 20px;
}

/* コンテスト画像を左寄せに */
.content-photo {
    margin-left: auto;
}



/* お客様の声に下線 */
/* お客様の声のフォントサイズ決定 */
/* お客様の声と内容の間隔調整 */
/* 文字をセンターに */
.customer-box h3 {
    border-bottom: 1px solid #000;
    font-size: 24px;
    margin-bottom: 50px;
    text-align: center;
}

/* お客様の感想の幅調整 */
/* お客様の声同士の間隔等調整 */
.customer {
    max-width: 850px;
    margin: 15px auto 40px auto;
}

/* お客様情報画像のサイズと、コメントとの間隔調整 */
.customer div {
    width: 25%;
    margin-bottom: 10px;
}

/* お客様の感を情報画像の内側に */
/* お客様の感想のフォントサイズ決定 */
/* お客様の感想の背景色設定 */
/* お客様の感想の背景色を角丸に */
.customer p {
    padding: 30px;
    font-size: 14px;
    background-color: #f7f5f4;
    border-radius: 8px;
}


/* お客様と料金プランの感想調整 */
.customer-box {
    margin-bottom: 120px;
}



/* メイン料金プラン------------------------------------------------------------------------------------ */

/* 高さ決定 */
/* 画像挿入 */
/* 画像リピートなし */
/* 画像表示調整 */
/* 画像を上基準で表示 */
/* 「料金プラン」の垂直位置調整 */
/* 「料金プラン」をセンターに */
/* 「料金プラン」を白文字に */
/* 「料金プラン」のフォントサイズ決定 */
/* 「料金プラン」と内容の間隔調整 */
#plan h2 {
    height: 300px;
    background-image: url(../images/plan-image.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;

    padding-top: 150px;
    text-align: center;
    color: #fff;
    font-size: 40px;

    margin-bottom: 100px;

}

/* plan-boxの幅を決定 */
/* plan-boxをセンターに、申し込みボタンとの間隔調整 */
.plan-box {
    max-width: 1000px;
    margin: 0 auto 100px auto;
}

/* plan-boxの「h3」のフォントサイズを決定 */
/* plan-boxの「h3」をセンターに */
.plan-box h3 {
    font-size: 28px;
    text-align: center;
}

/* plan-boxの「p」のフォントサイズ決定 */
/* plan-boxの「p」をセンターに */
/* 文字と料金表との間隔調整 */
.plan-box p {
    font-size: 17px;
    text-align: center;
    margin-bottom: 70px;
}

/* 料金表のサイズ決定 */
/* 料金表の余白調整 */
/* 背景色設定 */
/* 角丸に */
/* センターに */
.list-pc {
    width: 90%;
    padding: 30px 30px 50px 30px;
    background-color: #f7f5f4;
    border-radius: 8px;
    margin: 0 auto;
}

/* 改行消す */
.plan-message {
    display: none;
}

/* スマホ版料金表を消す */
.list-sp {
    display: none;
}

/* 申し込みボタンのサイズ決定 */
/* 電話情報との間隔調整 */
.button-pc {
    width: 65%;
    margin: 0 auto 70px auto;
}

/* スマホ版ボタン消す */
.button-sp {
    display: none;
}


/* 申し込み説明をセンターに */
/* 申し込み説明のフォントサイズ決定 */
/* 申し込み説明と会社概要との間隔調整 */
.application {
    text-align: center;
    font-size: 20px;
    margin-bottom: 30px;
}

/* 会社概要をセンターに */
/* 会社概要とフッターとの間隔調整 */
#company {
    text-align: center;
    margin-bottom: 20px;
}

/* 会社概要とロゴとの間隔調整 */
#company p {
    margin-bottom: 20px;
}

.company {
    display: none;
}

/* ロゴのサイズ決定 */
.logo {
    width: 150px;
    margin: 0 auto 30px auto;
}


/* フッター---------------------------------------------------------------------------------- */

/* 幅を広げる */
/* 背景色の決定 */
/* コピーライトをセンターに */
footer {
    padding: 20px 0;
    background-color: rgba(219, 219, 219, 0.85);
    text-align: center;
}



/* レスポンシブ----------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* 余白設定 */
    #donyu,
    .service-box,
    .plan-box,
    .application,
    #company {
        padding: 0 4%;
    }

    /* PC版ヘッダー消す */
    .hero-pc {
        display: none;
    }

    /* スマホ版ヘッダー表示 */
    .hero-sp {
        display: block;
    }

    /* 幅調整 */
    header {
        padding: 10px 20px;
    }

    /* リンクの位置調整 */
    header ul {
        justify-content: center;
        justify-content: space-around;
        font-size: 14px;
    }

    /* 吹き出しの位置調整 */
    .balloon {
        width: 150px;
        margin: 0 0 0 50px;
    }

    /* ヒーロー画像の位置変更用 */
    h1 {
        position: relative;
        top: 42.4px;
        margin-bottom: 80px;
    }

    /* 強調したい文字のサイズ決定 */
    .bigword {
        font-size: 30px;
    }


    /* 導入文字のサイズ決定 */
    /* 導入文字をセンターに */
    /* 導入文字同士の距離調整 */
    .donyu {
        font-size: 18px;
        text-align: center;
        margin-bottom: 5px;
    }

    /* 導入文字と画像の距離調整 */
    .donyu-box {
        margin-bottom: 30px;
    }


    /* 導入部分のイメージ画像サイズ、位置調整 */
    .worry-photo {
        width: 100%;
        margin: 0 auto 20px auto;
    }

    /* お悩みのフォントサイズ、位置調整 */
    .worry-box {
        font-size: 16px;
        margin: 0 auto 30px auto;
    }


    /* ☑のサイズ調整 */
    .worry div {
        width: 20px;
    }

    /* お悩み同士の間隔調整 */
    .worry {
        margin: 0 0 15px 30px;
    }

    /* フォントサイズ調整、左寄せに */
    .message01 {
        text-align: left;
        font-size: 16px;
    }

    /* フォントサイズ調整、左寄せに */
    .message02 {
        text-align: left;
        font-size: 16px;
    }

    /* 改行削除 */
    .br-message {
        display: none;
    }

    /* サービスタイトル調整 */
    .service {
        padding: 0 10px;
    }

    /* フォントサイズを調整 */
    .service p {
        font-size: 16px;
    }


    /* cookのサイズ、位置 */
    .cook {
        width: 100%;
        padding: 20px 5px 15px 5px;
    }

    /* 料理写真とサイズ調整 */
    .cook-photo {
        width: 41%;
    }

    /* 料理説明のサイズ調整 */
    .cook-text {
        width: 51%;
        font-size: 12px;
    }

    /* 講師写真と説明を横並び解除 */
    .teacher {
        display: block;
    }

    /* 講師写真の位置調整 */
    .teacher-photo {
        margin: 0 auto 20px auto;
        order: 1;
    }

    /* 講師説明のサイズ調整 */
    .teacher-text {
        width: 100%;
        font-size: 14px;
        padding-bottom: 15px;
        order: 0;
    }


    /* service03-photo-boxのサイズ調整 */
    .service03-photo-box {
        width: 95%;

    }

    /* メール画像とコンテスト画像のサイズ調整 */
    .mail-photo,
    .content-photo {
        width: 70%;
    }

    /* お客様情報画像のサイズ調整 */
    .customer div {
        width: 50%;
    }


    /* plan-boxの「h3」のフォントサイズや位置を調整 */
    .plan-box h3 {
        width: 92%;
        font-size: 20px;
        margin: 0 auto 20px auto;
    }


    /* 申し込みボタンのサイズ調整 */
    .button {
        width: 90%;
    }

    /* 申し込み説明のフォントサイズ等調整 */
    .application {
        width: 90%;
        font-size: 18px;
        margin: 0 auto 20px auto;
    }

    /* 会社概要をセンターに */
    /* 会社概要とフッターとの間隔調整 */
    #company {
        width: 90%;
        margin: 0 auto;
    }

    /* 会社情報折り返し */
    .company {
        display: inline;
    }

    /* PC版ボタン消す */
    .button-pc {
        display: none;
    }

    /* スマホ版ボタン表示 */
    .button-sp {
        display: block;
        width: 85%;
        margin: 0 auto 50px auto;
    }

    /* PC版料金表を消す */
    .list-pc {
        display: none;
    }

    /* スマホ版料金表を表示 */
    .list-sp {
        display: block;
        padding: 15px;
        margin: 0 auto;
        background-color: #f7f5f4;
        border-radius: 8px;
    }

    /* 申し込みボタンとの間隔調整 */
    .plan-box {
        margin: 0 auto 60px auto;
    }

    /* 改行する */
    .plan-message {
        display: block;
    }

    /* リンクホバー打ち消し */
    a:hover {
        color: #000;
    }



}