@charset "UTF-8";

/*主たるブレイクポイント
ｓｐ　~599px
tab　600~1024px
ｐｃ　1025px~
*/

/*==============================================================
全体の設定　　ここから
================================================================*/

/*-------------------------------------フォントサイズ------------------------------*/
html {
    /*レスポンシヴに対応した相対的なフォントサイズになるうようにする。10.8px*/
    font-size: 67.5%;
}

body {
    /*------------------------------------背景色---------------------------------*/
    background-color: #f7db4e;
    /*-----------------フォントサイズ、フォント、行の高さ、文字色、領域の幅-----------*/
    /*レスポンシヴに対応した相対的なフォントサイズになるうようにする。
    htmlで指定したのを1.6倍にして16pxに戻す*/
    font-size: 1.4rem;

    /*font-size: min(3vw, 2rem);*/
    /*全体のフォントの指定*/
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 400;
    /*全体のラインハイトの指定*/
    line-height: 2.2;
    /*全体の文字の色*/
    color: #333;

}

/*>>>>>>>>>>>>>>>min-width:980px>>>>>>>>>>>>>>>*/
@media screen and (min-width:980px) {
    body {
        font-size: 1.6rem;
    }
}

/*<<<<<<<<<<<<<<<min-width:980px<<<<<<<<<<<<<<<*/



/*---------------------------リンクのaには下線が入ってるから消す---------------------*/
a {
    text-decoration: none;
}

/*-----------------------------aタグにホバーしたら半透明にする----------------------*/

a:hover {
    opacity: 0.6;
}

a:active {
    color: #486d46;
}


ul {
    padding-left: 0;
    list-style: none;
}

/*==============================================================
全体の設定  ここまで
================================================================*/


/*==============================================================
汎用　全体のパディング　ここから
================================================================*/
/*--------------------------------
画面のサイドの余白
---------------------------------*/
.inner {
    padding-left: 4.37%;
    padding-right: 4.37%;
    /*
    領域の最大幅を1180pxとする*/
    /*max-width: 1180px;*/
    /*1180pょリ大きくなると、それ以上写真が画面幅いっぱいに大きくならないから、中央寄せにしておく。*/
    margin-left: auto;
    margin-right: auto;
}

.maxw {
    max-width: 1980px;
    left: 50%;
    transform: translateX(-50%);

}


/*==============================================================
汎用　全体のパディング  ここまで
================================================================*/


/*==============================================================
汎用　ボタンの設定  ここから
================================================================*/
.btn {
    /*横幅を設定したいけどaタグなのでブロック要素にする*/
    display: block;
    /*最大で380pxにして大きい画面になったときも大きくなりすぎないようにする。380pxより小さい端末では100%で表示される*/
    max-width: 380px;
    /*文字を縦方向中央に配置*/
    line-height: 80px;
    /*文字を横方向中央に配置*/
    text-align: center;
    /*画面幅がおおきくなったとき、画面幅よりボタンが小さきくなったときに左に寄っちゃうので中央に寄せる*/
    margin-right: auto;
    margin-left: auto;
    /*本文テキストよりやや大きく*/
    font-size: 1.3rem;
    /*ボタンの文字色*/
    color: #fff;
    /*ボタンの背景色*/
    background-color: #37571b;
    /*丸みのあるボタン*/
    border-radius: 70px;

    /*liが角丸のぎりぎりにならないよう設定*/
    padding: 0 20px;
    /*要素にアウトライン*/
    outline: 4.4px #ffffff dotted;
    /*要素の内側にアウトライン*/
    outline-offset: -8px;
    width: 300px;
    font-weight: 600;
    /*ホバー時の変化*/
    transition: 0.4s ease;

}

.btn:hover {
    background-color: #465d42;
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}


/*==============================================================
汎用　ボタンの設定　　ここまで
================================================================*/


/*==============================================================
スクロールしたら下からフェードイン　　ここから
================================================================*/
/*フェードインさせたい要素にはjs-fade-in-upクラスを
いれている。*/

/*About領域sec01と.sec02のクラスjs-fade-in-upがついてる要素
（タイトル、サブタイトル、画像、テキスト）を
下からフェードインするときの
クラスを追加する前のスタイル*/
.js-fade-in-up {
    /*はじめは非表示*/
    opacity: 0;
    /*はじめはy軸方向、下に100px移動した位置にいる*/
    transform: translate(0, 100px);
    /*フェードインさせたい要素のすべてのスタイルに対して。
   1.8秒かけてフェードイン*/
    transition: all 1.8s;
    /*100px下に移動してるとき、領域からはみ出た部分は非表示*/
    overflow: hidden;
}

/*About領域sec01と.sec02のクラスjs-fade-in-upがついてる要素
（タイトル、サブタイトル、画像、テキスト）に
jQでfadeクラスを追加したときのスタイル*/
.js-fade-in-up.fade {
    /*スクロールして
    要素のtopが画面下辺から100px出てきたときに表示*/
    opacity: 1;
    /*はじめは100px7下に移動させてたので元の位置に戻る*/
    transform: translate(0, 0);
    overflow: visible
}


/*==============================================================
スクロールしたら下からフェードイン　　ここまで
================================================================*/


/*==============================================================
ローディングここから
================================================================*/
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f7db4e;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}



.rice {
    width: 34px;
    opacity: 0;
    animation: riceFade 4s infinite;
}

@keyframes riceFade {

    0%,
    100% {
        opacity: 0;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.loading-text {
    margin-top: 20px;
    font-size: 18px;
    color: #fff;
    font-family: sans-serif;
}

.dots::after {
    content: "";
    animation: dotLoading 1s steps(3, end) infinite;
}

@keyframes dotLoading {

    0%,
    20% {
        content: "";
    }

    40% {
        content: ".";
    }

    60% {
        content: "..";
    }

    80%,
    100% {
        content: "...";
    }
}


/*==============================================================
ローディングここまで
================================================================*/


/*==============================================================
ヘッダー領域　ここから
================================================================*/
header {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    /*子要素h1とmenu_boxをフレックスで並べる*/
    display: flex;
    /*子要素を垂直方向中央*/
    align-items: center;
    /*子要素を水平方向中央*/
    justify-content: center;
    /*.menu_boxにabsoluteをつけてるのでその動く範囲を設定*/
    position: relative;
}



h1 {
    /*メインビジュアルの高さを
    画面高さからh1の高さ（＝幅）を引いた分で
    指定するために
    画面幅を基準に設定*/
    width: 20vw;
    /*spで上下に余白をとるためpadding設定*/
    padding-top: 10px;
    padding-bottom: 10px;
    max-width: 100px;

}

h1:hover {
    opacity: 0.8;
}



/*>>>>>>>>>>>>>>min-width:1028px>>>>>>>>>>>>>>*/
@media screen and (min-width:1028px) {

    /*pcでは*ヘッダーの中身であるh1を position: absolute;にして浮かせることで
ヘッダーの高さを0にして、position:relativeにしているキービジュアルを
画面天井にくっつけて全画面表示にするために設定*/
    h1 {
        position: absolute;
        /*ロゴの位置*/
        top: 20px;
        left: 50px;
        padding: 0;
        width: 10vw;
        max-width: 180px;
        z-index: 10;
    }
}

/*<<<<<<<<<<<<<<<min-width:1028px<<<<<<<<<<<<<<<*/

/*==============================================================
ヘッダー領域　ここまで
================================================================*/


/*==============================================================
ハンバーガーメニュー　ここから
================================================================*/

/*ーーーーーーーーーーーーーーーーハンバーガーメニューの領域ーーーーーーーーーーーーーーーー*/
/*ハンバーガーメニューの三本線とMENUテキストの箱
幅高さは指定せず子要素のheader .menu_btnの幅高さになる
ようにすることで子要素のサイズにして、headerでflexの配置をするとき無駄な余白ができて中央寄せがずれて見えることを防ぐ*/
header .menu_box {
    right: 10vw;
    position: fixed;
    z-index: 3;
}

/*ハンバーガーメニューの三本線の大きさ*/
header .menu_btn {
    width: 45px;
    height: 38px;
}


/*ーーーーーーーーーーーーーーーーハンバーガーメニューの3本線ーーーーーーーーーーーーーーーー*/
header .menu_btn span {
    /*高さを指定するためにブロック要素にして縦並びにして高さを指定*/
    display: block;
    height: 4px;
    /*線端に丸みをつける*/
    border-radius: 4px;
    background-color: #37571b;
    /*ゆっくり動く*/
    transition: 0.3s;
}

/*2本目をy軸方向に13px移動して中央に*/
header .menu_btn span:nth-child(2) {
    transform: translateY(13px);
}

/*3本目をmenu_btnの下ぴったりに移動*/
header .menu_btn span:last-child {
    transform: translateY(26px);
}

/***ハンバーガーメニューを開いた時のスタイル***/
/*2本目を消す*/
.on header .menu_btn span:nth-child(2) {
    display: none;
}

/*1本目を真ん中に移動　.onを忘れずに。*/
.on header .menu_btn span:first-child {
    transform: translateY(16px) rotate(45deg);
}

/*3本目を真ん中に移動 .onを忘れずに。*/
.on header .menu_btn span:last-child {
    transform: translateY(12px) rotate(-45deg);
}




/*ーーーーーーーーーーーーーーーーMENUとCLOSEの文字ーーーーーーーーーーーーーーーー*/

header .menu_box .menu_btn_text {
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.6rem;
    color: #37571b;
    /*MENUとCLOSEを同じ位置に配置するため浮かせる*/
    position: absolute;
}

/*通常はハンバーガーメニューのCLOSEを非表示*/
header .menu_box .click-on {
    opacity: 0;
}

/*navが表示されたときはCLOSEを表示*/
.on header .menu_box .click-on {
    opacity: 1;
}

/*navが表示されたときはMENUを非表示*/
.on header .menu_box .click-off {
    opacity: 0;
}

/*通常はMENUを表示*/
header .menu_box .click-off {
    opacity: 1;
}

/*==============================================================
ハンバーガーメニュー　ここまで
================================================================*/


/*==============================================================
ナビゲーション ここから
================================================================*/
/*//////////////////////////////////////////////////////////////
SPナビゲーション　ここから
////////////////////////////////////////////////////////////////*/

nav {
    /***navの領域の設定***/
    /*画面上部に固定*/
    position: fixed;
    top: 0;
    /*画面幅いっぱいに広げる*/
    width: 100%;
    /*端末の画面の縦幅と同じにする。*/
    height: 100vh;

    /****navの背景の設定******/
    background-color: rgb(245, 206, 69, 0.9);
    /*background-image: url(../img/about_page_mv_object_left.png);
    /*navの背景画像は繰り返し表示しない*/
    background-repeat: no-repeat;
    /*navの背景画像の配置は横方向中央*/
    background-position-x: center;
    /*navの背景画像の配置は上から画面縦幅35％の位置
    ulの高さと合わせて画像の上にナビゲーションのテキストがくるようにする*/
    background-position-y: 27vh;
    /*navの背景画像の大きさはnavの領域の60％*/
    background-size: 70%;
    /*背景画像と背景色をブレンドモードカラーバーンにする*/
    background-blend-mode: color-burn;

    /***ハンバーガーメニューをクリックしたときナビゲーションをふわっと表示させる設定***/
    /*通常は透明*/
    opacity: 0;
    /*通常はnavを非表示*/
    visibility: hidden;
    /*0.3秒かけてopacity1にする*/
    transition: 0.3s;
    /*SPで横画面にしたときコンテントが画面縦幅からはみでて見えなくなるのでスクロールできるようにする*/
    overflow: auto;
    z-index: 2;
    left: 0;
}

/*>>>>>>>>>>>>>>>min-width:1028px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1028px) {
    nav {
        /*spではoverflow autoにしてるので、隠れて見えなくなってしまうのでみえるようにする*/
        overflow: visible;
    }
}

/*<<<<<<<<<<<<<<<min-width:1028px<<<<<<<<<<<<<<<*/

.on nav {
    /***ハンバーガーメニューをクリックしたときナビゲーションをふわっと表示させる設定***/
    /*ハンバーガーメニューをクリックすると表示*/
    opacity: 1;
    visibility: visible;
}

/*ーーーーーーーーーーーーーーーーナビゲーションのロゴーーーーーーーーーーーーーーーー*/
nav p {
    margin-left: auto;
    margin-right: auto;
    width: 20vw;
    padding-top: 10px;
    padding-bottom: 10px;
    max-width: 100px;
}


/*ーーーーーーーーーーーーーーーーナビゲーションのリスト全体ーーーーーーーーーーーーーーーー*/
nav ul {
    /*リストの点を消してデフォルトで左に入ってるpaddingをなくす*/
    list-style: none;
    padding: 0;
    /*****navの背景画像の高さと合わせて画像の上にナビゲーションのテキストがくるようにしたいのでtopを指定できるようにabsoluteにする******/
    position: absolute;
    top: 25vh;
    /*****左右中央に配置****/
    /*左に50％いったとことが要素の左辺*/
    left: 50%;
    /*要素の幅の半分左に戻る*/
    transform: translate(-50%, 0);

}

/*ーーーーーーーーーーーーーーーーナビゲーションの各リストーーーーーーーーーーーーーーーー*/
nav ul li {
    text-align: center;
    /*htmlに指定したフォントサイズ(約10px）の3.5倍*/
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 7rem;
}

/*ナビゲーションのテキストの設定*/
nav ul li a {
    color: #486d46;
    /*ブロック要素にして幅や高さを指定できるようにする*/
    display: block;
}

/*ｓｐでは英語の表示を隠す*/
nav ul li a span {
    display: none;
}

.nav_back {
    position: absolute;
    width: 100%;
    mix-blend-mode: color-burn;
    top: 27vh;
    left: 50%;
    transform: translateX(-50%);
}

.nav_back img {
    width: 70%;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
}

/*>>>>>>>>>>>>>>>min-width:1028px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1028px) {
    .nav_back {
        display: none;
    }
}

/*<<<<<<<<<<<<<<<min-width:1028px<<<<<<<<<<<<<<<*/


/*ーーーーーーーーーーーーーーーーSPのナビゲーションのオブジェクトーーーーーーーーーーーーーーーー*/
/*nav_iconおこめくんを配置*/
nav .nav_icon img {
    width: 30%;
    /*浮かせるためにブロック要素*/
    display: block;
    /*wrapper_nvにrelative*/
    position: absolute;
    /*画面右から20px*/
    right: 20px;
    /*画面下から20px*/
    bottom: 20px;
}

/*//////////////////////////////////////////////////////////////
SPナビゲーション　ここまで
////////////////////////////////////////////////////////////////*/

/*//////////////////////////////////////////////////////////////
PCナビゲーション　ここから
////////////////////////////////////////////////////////////////*/

/*>>>>>>>>>>>>>>>min-width:1028px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1028px) {
    .wrapper_nv {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        max-width: 1920px;

    }

    nav {
        /*spのnavタグに入れたopacity 0を1にして一旦表示*/
        opacity: 1;
        /*spのnavタグに入れたvisibility hiddenをvisibleにして一旦表示*/
        visibility: visible;
        /*背景色を透明*/
        background: transparent;
        /*SP版でnavの幅が100％になってるので60％にしてロゴに重ならないようにする。*/
        width: 100%;
        /*高さが100vhになってるから元に戻す*/
        height: auto;
        /*spの設定でposition:fixedになってるので浮いてる状態にあるかたtopの指定が可能*/
        top: 6%;
        /*セパレーターの疑似要素の範囲で浮かせてるモチーフたちの表面の階層に来るように*/
        z-index: 10;
        /*SPのnavでleft:0;にしているので1920px以上に画面幅を広げていくとナビゲーションが左に寄って行ってしまう*/
        left: auto;
    }

    /*PCナビゲーションのロゴ／オブジェクト*/
    nav p,
    nav .nav_icon {
        /*navのロゴマークとオブジェクトはPCの時のナビゲーションには必要ないので消す*/
        display: none;
    }

    /*PCナビゲーションのリスト全体*/
    nav ul {

        /*各ナビゲーションを横並びにする*/
        display: flex;
        /*各ナビゲーションを親の中に等間隔に並べる*/
        /* justify-content: space-between;
        /*ｓｐで ulに対してposition: absolute;かけて
        top: 33vh;にしてたから元に戻す*/
        top: 0;
        /*spで背景画像を調整するためにleft50%と
        transformのx軸-50%にしてたから、
        left0にしてtransformのx軸+50%にもどした
        left: 0;
        transform: translate(+50%, 0);*/
        /*角丸*/
        border-radius: 100px;
        background-color: #fff;
        opacity: 0.8;
        box-sizing: border-box;
        /*liが角丸のぎりぎりにならないよう設定*/
        padding: 0 20px;
        /*要素にアウトライン*/
        outline: 3.4px #37571b dotted;
        /*要素の内側にアウトライン*/
        outline-offset: -8px;

    }

    /*PCナビゲーションの各リスト*/
    nav ul li {
        /*画面のサイズに合わせてフォントサイズを収縮
        1.8remにすると画面幅が1920px前後でロゴに重なってしまうので最大1.6rem*/
        font-size: min(1.2vw, 1.6rem);
        /*各ナビゲーションの範囲
        liの親のulの親のnavの領域*/
        width: 100%;
        /*liに対してラインハイトを設定してナビゲーションのテキストの行間を調整*/
        line-height: 1.5;
        /*画面幅が小さくなってもナビゲーションの折り返さない*/
        white-space: nowrap;
        padding: 0;

    }

    nav ul li a {
        width: 100%;
        /*ナビゲーションのテキストの間隔を画面幅に応じて空ける*/
        padding: 22px 0 22px 2vw;
        /*背景色や背景画像を設定。ｓｐの設定でaタグはブロック要素にしてるので要素全体に広がる。*/
        /*background-color: #fff;
        opacity: 0.8;
        background-image: url(../img/top_mv_cloud03.png);
        background-repeat: no-repeat;*/

        /*背景画像は領域の縦幅いっぱいに広がる*/
        /*background-size: contain;
        background-position: center center;*/

    }


    nav ul li:last-child a {
        /*ナビゲーションの一番右側のリストだけ右パディングを設定*/
        padding-right: 2vw;
    }



    nav ul li a span {
        /*英語表示のspanタグをdisplay noneにしてたのでblockにして表示する*/
        display: block;
        font-size: min(0.8vw, 1.4rem);
    }

    /*ーーーーーーーーーーーーーーーーPCハンバーガーメニューーーーーーーーーーーーーーーーー*/

    header .menu_box {
        /*ハンバーガーメニューを消す*/
        display: none;
    }

    /*ロゴh1が中央に寄ってるからrelativつけてる親のheaderにjustify-content: left;つけて左に寄せる*/
    header {
        justify-content: left;
    }
}

/*<<<<<<<<<<<<<<<min-width:1028px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:1920px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1920px) {
    nav ul li a {
        width: 100%;
        /*1920px以上では*/
        padding: 22px 0 22px 22px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1920px<<<<<<<<<<<<<<<*/

/*==============================================================
ナビゲーション ここまで
================================================================*/


/*==============================================================
キービジュアル  ここから
================================================================*/


/*
にpaddingの左右をつけてるから、
キービジュアルのところではpaddingをなくす*/
#key {
    /*display: none;*/
    opacity: 1;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    /*#keyのコンテントには浮かせたいモチーフ.kv_objしかないから、領域を指定。指定することで背景画像を表示して、.kv_obj（キービジュアルのモチーフ）を画面幅の大きさで配置する。*/
    width: 100%;
    max-width: 1920px;
    height: 88dvh;
    /* 背景画像を常に天地左右の中央に配置 */
    background-position: center top;
    /* 背景画像を繰り返し表示しない */
    background-repeat: no-repeat;
    /*背景画像を領域いっぱいに表示*/
    background-size: cover;
    /*固定*/
    /*background-attachment: fixed;*/
    background-color: #486d46;
    /*うかせて画面topにくっつけるため。親は指定してないからbodyが基準*/
    position: relative;
    /*画面幅を狭めたとき領域からはみ出した部分を非表示にする*/
    overflow: hidden;
}

/* 背景フェード用オーバーレイ */
#key::before {
    content: "";
    position: absolute;
    inset: 0;
    /* KVの背景色 */
    background-color: #486d46;
    opacity: 1;
    /* ↓ここがフェード時間 */
    transition: opacity 2.5s ease;
    z-index: 1;
    pointer-events: none;
}

/* フェード完了状態 */
#key.bg-visible::before {
    opacity: 0;
}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {

    /*キービジュアルの領域の大きさ*/
    #key {

        /*ヘッダーの下に潜り込んで画面いっぱいに配置するため*/
        top: 0;
        left: 0;
        /*pcでは広がりすぎないようにする*/
        width: 100%;
        /*PCでは画面いっぱいに表示*/
        height: 100dvh;
        background-size: cover;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/

/*---------------キービジュアルの中のキャッチコピー-------------*/
.kv_title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 70%;
    /*メインビジュアルのテキスト画像のサイズを調整するために設定*/
    width: 50%;
    min-width: 76%;

    /*width100％ではないので中央寄せ*/
    margin-left: auto;
    margin-right: auto;
}

.kv_title_holder {
    position: relative;
    width: 100%;

}

.kv_title img {
    /*親要素いっぱいに広げるために設定*/
    display: block;
    width: 100%;
    /*左右の位置px 上下の位置px ぼかし具合px 色*/

}

.kv_title .title_img {
    filter: drop-shadow(2px 2px 5px rgba(190, 155, 85, 0.6));
}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {
    .kv_title {
        left: 12%;
        transform: translateX(0);
        top: 40%;
        /*1028以上では文字が大きくなりすぎないように。SPと同じセレクタにすること*/
        width: 40%;
        min-width: 200px;
        max-width: 500px;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/

/* ===== KVオブジェクト ===== */
#key .title_img {
    opacity: 0;
    transition: opacity 2s ease-in-out;
    position: relative;
    z-index: 2;
}


/* 光エフェクト */
.title_shine {
    position: absolute;
    width: 200%;
    top: -50%;
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    /* クリック阻害防止 */
}

/* 光るアニメーション */
.title_shine.flash {
    animation: titleFlash 0.8s ease-out forwards;
}

@keyframes titleFlash {
    0% {
        opacity: 0;
        transform: scale(0.98);
    }

    30% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.05);
    }
}

.kv_obj {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

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

/* ===== キラキラ点滅 ===== */

.kv_obj.twinkle.twinkle-animate {
    animation: twinkleFlash 0.8s ease-out forwards;
}

@keyframes twinkleFlash {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.6;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.6;
    }
}

/* ===== KVセパレーター ===== */

.kv_obj_group {
    position: absolute;
    bottom: 0%;
    left: 0;
    width: 100%;
    height: 180px;
}

/*>>>>>>>>>>>>>>>min-width:1028px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1028px) {
    .kv_obj_group {
        height: 400px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1028px<<<<<<<<<<<<<<<*/

.kv_obj_group_inner {
    /*要素の領域の高さを指定。.kv_obj（キービジュアルのモチーフ）をabsoluteで配置するために
    親要素の.kv_obj_group_innerに幅と高さ（absoluteの範囲）を指定。この要素の下に疑似要素を作る*/
    /*height: 15vh;

    /*.kv_obj_group_innerの後ろにつく疑似要素の背景画像としてセパレータの画像を挿入*/
    background-image: url(../img/top_about_sec01sec02_spt.png);

    background-repeat: repeat-x;
    background-position: bottom left;
    /*横幅いっぱいに縦横比を保ったまま広がる。拡大したときは少し下が切れるけど*/
    background-size: contain;
    /*.kv_obj_group_innerの領域内に浮かせる*/
    position: absolute;
    height: 100%;
    /*ナビゲーションの下,
    雲の下になるように設定*/
    z-index: 1;
    /*左右が画面からはみ出ないように設定*/
    left: 0;
    right: 0;
    /*下のセクションとの間隔を設定*/
    bottom: 0;
    /*上のセクションに重なるように設定*/
    top: 0;

}


/*/////////////////////////////////////////////////////////////////////////
キービジュアルモチーフの配置とアニメーション　　ここから
//////////////////////////////////////////////////////////////////////////*/

/*---------------------キービジュアルのオブジェクト外箱--------------------*/
/*キービジュアル(.kv)のモチーフ（.kv_obj）を浮かせて配置、はみ出たところは非表示。
親となる範囲は.kv_obj_group_inner（セパレーターの範囲）*/
.kv_obj {
    object-fit: cover;
    /*親の.kv_obj_group_innerの範囲内に自由に配置*/
    position: absolute;
    /*画面を縮小したとき要素がはみ出しても
    バーが出ないようにはみ出た部分は切る*/
    overflow: hidden;
    /*ナビゲーション開いたとき、ナビゲーションの上にならないようにする*/
    z-index: 3;
    /*filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4));*/
}



/*---------------------キービジュアルのオブジェクトそのものすべて--------------------*/
.kv_obj img {
    width: 100%;
}

/*-----------------------------雲のオブジェクトすべて------------------------------*/
.kv_obj.cloud {
    /*この箱の中に入ってるimgの方に幅を指定してしまうとこの箱に余白ができてしまうから
    imgは100％にしてこちらの箱を親要素に対する％で指定する*/
    width: 30%;

}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {
    .kv_obj.cloud {
        /*この箱の中に入ってるimgの方に幅を指定してしまうとこの箱に余白ができてしまうから
    imgは100％にしてこちらの箱を親要素に対する％で指定する*/
        width: 30%;
        /*SP横画面で大きすぎないようにする*/
        max-width: 150px;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:980px>>>>>>>>>>>>>>>*/
@media screen and (min-width:980px) {
    .kv_obj.cloud {
        max-width: 240px;
    }
}

/*<<<<<<<<<<<<<<<min-width:980px<<<<<<<<<<<<<<<*/

/*--------------------------雲01(kv_titleが親要素)---------------------------*/
.kv_obj.cloud.cloud1 {
    width: 35vw;
    top: -22vh;
    left: -20%;
    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: kv-cloud1 2s steps(2, jump-start) infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes kv-cloud1 {

    /*アニメーション開始時*/
    0% {
        transform-origin: center;
        transform: skew(-3deg);
    }

    /*アニメーション終了時*/
    100% {
        transform-origin: center;
        transform: skew(3deg);
    }

}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {

    .kv_obj.cloud1 {
        top: -30vh;
        left: 5%;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/

/*--------------------------雲02---------------------------*/
.kv_obj.cloud2 {
    top: -60vh;
    left: 20%;
    animation: kv-cloud2 2.5s steps(2, jump-start) infinite;
}

@keyframes kv-cloud2 {
    0% {
        transform-origin: center;
        transform: skew(-5deg)
    }

    100% {
        transform-origin: center;
        transform: skew(5deg);
    }
}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {

    .kv_obj.cloud2 {
        top: -90vh;
        left: 25%;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:810px>>>>>>>>>>>>>>>*/
@media screen and (min-width:810px) {
    .kv_obj.cloud2 {
        top: -85vh;
    }
}

/*<<<<<<<<<<<<<<<min-width:810px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:1028px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1028px) {

    .kv_obj.cloud2 {
        top: -56vh;
        left: 25%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1028px<<<<<<<<<<<<<<<*/

/*--------------------------雲03---------------------------*/

.kv_obj.cloud3 {
    top: -14vh;
    right: 1%;
    animation: kv-cloud3 2.9s steps(2, jump-start) infinite;
}


@keyframes kv-cloud3 {

    0% {
        transform-origin: center;
        transform: skew(-3deg);
    }

    100% {
        transform-origin: center;
        transform: skew(3deg)
    }
}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {

    .kv_obj.cloud3 {
        top: -14vh;
        right: 3%;
        animation: kv-cloud3 2.9s steps(2, jump-start) infinite;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:980px>>>>>>>>>>>>>>>*/
@media screen and (min-width:980px) {
    .kv_obj.cloud3 {
        max-width: 250px;
    }
}

/*<<<<<<<<<<<<<<<min-width:980px<<<<<<<<<<<<<<<*/


/*--------------------------田植えイラスト---------------------------*/
.kv_obj.taue01 {

    animation: kv-taue 2.9s steps(2, jump-start) infinite;
}

@keyframes kv-taue {

    0% {
        transform-origin: center;
        transform: rotate(-3deg);
    }

    100% {
        transform-origin: center;
        transform: rotate(3deg)
    }

}

/***田植えSP***/
.kv_obj.taue01 {
    top: -18vh;
    right: 2%;
    width: 30%;
}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {

    /***田植えPC***/
    .kv_obj.taue01 {
        max-width: 140px;
        top: -20vh;
        right: 5%;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:980px>>>>>>>>>>>>>>>*/
@media screen and (min-width:980px) {
    .kv_obj.taue01 {
        max-width: 220px;
    }
}

/*<<<<<<<<<<<<<<<min-width:980px<<<<<<<<<<<<<<<*/

/*---------------------------稲のオブジェクトすべて------------------------------*/
.kv_obj.ine {
    /*この箱の中に入ってるimgの方に幅を指定してしまうとこの箱に余白ができてしまうから
    imgは100％にしてこちらの箱を親要素に対する％で指定する*/
    width: 12%;
}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {
    .kv_obj.ine {
        /*この箱の中に入ってるimgの方に幅を指定してしまうとこの箱に余白ができてしまうから
    imgは100％にしてこちらの箱を親要素に対する％で指定する*/
        width: 8%;
        max-width: 80px;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/

/*--------------------------稲01---------------------------*/
.kv_obj.ine1 {
    bottom: 2vh;
    left: 5%;
    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: kv-ine1 1.7s linear alternate-reverse infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes kv-ine1 {

    /*アニメーション開始時*/
    0% {
        transform-origin: bottom center;
        transform: rotate(0deg);
    }

    /*アニメーション終了時*/
    100% {
        transform-origin: bottom center;
        transform: rotate(5deg);
    }

}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {

    .kv_obj.ine1 {
        bottom: 4vh;
        left: 5%;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/


/*--------------------------稲02---------------------------*/
.kv_obj.ine2 {
    bottom: 2vh;
    left: 10%;
    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: kv-ine2 1.9s linear alternate-reverse infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes kv-ine2 {

    /*アニメーション開始時*/
    0% {
        transform-origin: bottom center;
        transform: rotate(0deg);
    }

    /*アニメーション終了時*/
    100% {
        transform-origin: bottom center;
        transform: rotate(5deg);
    }

}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {

    .kv_obj.ine2 {
        bottom: 4vh;
        left: 10%;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/


/*--------------------------稲03---------------------------*/
.kv_obj.ine3 {
    bottom: 2vh;
    left: 14%;
    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: kv-ine3 1.9s linear alternate-reverse infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes kv-ine3 {

    /*アニメーション開始時*/
    0% {
        transform-origin: bottom center;
        transform: rotate(0deg);
    }

    /*アニメーション終了時*/
    100% {
        transform-origin: bottom center;
        transform: rotate(5deg);
    }

}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {

    .kv_obj.ine3 {
        bottom: 4vh;
        left: 14%;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/

/*--------------------------稲04---------------------------*/
.kv_obj.ine4 {
    bottom: 1.5vh;
    left: 25%;
    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: kv-ine4 2.1s linear alternate-reverse infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes kv-ine4 {

    /*アニメーション開始時*/
    0% {
        transform-origin: bottom center;
        transform: rotate(0deg);
    }

    /*アニメーション終了時*/
    100% {
        transform-origin: bottom center;
        transform: rotate(5deg);
    }

}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {

    .kv_obj.ine4 {
        bottom: 3vh;
        left: 25%;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/


/*--------------------------稲05---------------------------*/
.kv_obj.ine5 {
    bottom: 1vh;
    left: 30%;
    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: kv-ine5 2.3s linear alternate-reverse infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes kv-ine5 {

    /*アニメーション開始時*/
    0% {
        transform-origin: bottom center;
        transform: rotate(0deg);
    }

    /*アニメーション終了時*/
    100% {
        transform-origin: bottom center;
        transform: rotate(5deg);
    }
}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {

    .kv_obj.ine5 {
        bottom: 2vh;
        left: 30%;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/

/*--------------------------トンボ---------------------------*/
.kv_obj.tonbo {
    width: 10%;
    bottom: 35vh;
    left: 8%;
    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: kv-tonbo 2.3s steps(2, jump-start) infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes kv-tonbo {

    0% {
        transform: translate(0%, 0%);
    }

    100% {
        transform: translate(0%, -20px);
    }
}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {

    .kv_obj.tonbo {
        max-width: 80px;
        bottom: 25vh;
        left: 25%;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/


/*--------------------------稲06---------------------------*/
.kv_obj.ine6 {
    bottom: 2vh;
    right: 5%;
    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: kv-ine6 1.7s linear alternate-reverse infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes kv-ine6 {

    /*アニメーション開始時*/
    0% {
        transform-origin: bottom center;
        transform: rotate(0deg);
    }

    /*アニメーション終了時*/
    100% {
        transform-origin: bottom center;
        transform: rotate(5deg);
    }
}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {

    .kv_obj.ine6 {
        bottom: 4vh;
        right: 5%;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/

/*--------------------------稲07---------------------------*/
.kv_obj.ine7 {
    bottom: 2vh;
    right: 14%;
    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: kv-ine7 1.9s linear alternate-reverse infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes kv-ine7 {

    /*アニメーション開始時*/
    0% {
        transform-origin: bottom center;
        transform: rotate(0deg);
    }

    /*アニメーション終了時*/
    100% {
        transform-origin: bottom center;
        transform: rotate(5deg);
    }
}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {

    .kv_obj.ine7 {
        bottom: 4vh;
        right: 14%;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/

/*--------------------------稲08---------------------------*/
.kv_obj.ine8 {
    bottom: 1.5vh;
    right: 20%;
    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: kv-ine8 2.1s linear alternate-reverse infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes kv-ine8 {

    /*アニメーション開始時*/
    0% {
        transform-origin: bottom center;
        transform: rotate(0deg);
    }

    /*アニメーション終了時*/
    100% {
        transform-origin: bottom center;
        transform: rotate(5deg);
    }
}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {

    .kv_obj.ine8 {
        bottom: 3vh;
        right: 25%;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/


/*--------------------------稲09---------------------------*/
.kv_obj.ine9 {
    bottom: 1vh;
    right: 30%;
    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: kv-ine9 2.3s linear alternate-reverse infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes kv-ine9 {

    /*アニメーション開始時*/
    0% {
        transform-origin: bottom center;
        transform: rotate(0deg);
    }

    /*アニメーション終了時*/
    100% {
        transform-origin: bottom center;
        transform: rotate(5deg);
    }
}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {

    .kv_obj.ine9 {
        bottom: 2vh;
        right: 30%;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/


/*ーーーーーーーーーーーーーーーー山ーーーーーーーーーーーーーーーー*/
.kv_obj.mountain {
    width: 25%;
    bottom: 5%;
    right: 0;
    z-index: 0;
}

/*ーーーーーーーーーーーーーーーーキービジュアル下部のセパレーター領域のオブジェクトーーーーーーーーーーーーーーーー*/
.kv_obj.kv-main_separator_group {
    bottom: -4vw;

}

/*>>>>>>>>>>>>>>>min-width:1500px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1500px) {
    .kv_obj.kv-main_separator_group {
        bottom: -16%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1500px<<<<<<<<<<<<<<<*/

.kv_obj.insect1 {
    left: 50%;
}

.kv_obj.twinkle1,
.kv_obj.twinkle3,
.kv_obj.twinkle5,
.kv_obj.twinkle7 {
    animation: kv-twinkle-a 2.0s ease-in-out alternate-reverse infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes kv-twinkle-a {

    0% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

.kv_obj.twinkle2,
.kv_obj.twinkle4,
.kv_obj.twinkle6,
.kv_obj.twinkle8 {
    animation: kv-twinkle-b 2.0s ease-in-out alternate-reverse infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes kv-twinkle-b {

    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.2;
    }
}

/*/////////////////////////////////////////////////////////////////////////
キービジュアルモチーフの配置とアニメーション　　ここまで
//////////////////////////////////////////////////////////////////////////*/

/*==============================================================
キービジュアル  ここまで
================================================================*/




/*==============================================================
Aboutセクション.sec01　ここから
================================================================*/
/*ーーーーーーーーーーーーsec01の領域サイズ、位置ーーーーーーーーーーーーー*/
.sec01 {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    position: relative;



}

.sec01 .inner {
    /*セパレータを画面幅いっぱいに広げるため
    汎用クラスで入れてたpaddingを0にする*/
    padding-left: 0;
    padding-right: 0;
}

/*ーーーーーーーーーーーーーーーsec01の背景画像ーーーーーーーーーーーーー*/


.sec01 {
    /*
    クラスは入れてないから画面幅が100％
    高さはこの中に入ってる要素の分が高さとなる*/
    width: 100%;
    background-image: url(../img/key_separator_yellow-14.png), url(../img/top_section01_bg_left.png), url(../img/top_section01_bg_right.png);
    background-repeat: no-repeat, no-repeat, no-repeat;
    /*要素の大きさに対する割合。containだと大きい画面にしたとき右端が切れたから*/
    background-size: 100%, 60%, 50%;
    background-position: 0 0, 0 60%, 100% 45%;
    padding-top: 32px;
    overflow: hidden;
}

.sec01_background_cloud_sp {
    width: 40%;
    position: absolute;
    bottom: -3%;
    right: -4%;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec01_background_cloud_sp {
        bottom: -14%;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:980px>>>>>>>>>>>>>>>*/
@media screen and (min-width:980px) {

    .sec01 {
        background-size: 100%, 40%, 40%;
        background-position: 0 0, 0 47%, 100% 35%;
    }
}

/*<<<<<<<<<<<<<<<min-width:980px<<<<<<<<<<<<<<<*/



/*ーーーーーーーーーーーーーーsec01の領域の中の箱の設定ーーーーーーーーーーーーー*/
.sec01_theme {
    /*.sec01_theme .sub_titを浮かせるために設定*/
    position: relative;
    z-index: 1;

}


/*>>>>>>>>>>>>>>>min-width:980px>>>>>>>>>>>>>>>*/
@media screen and (min-width:980px) {

    /*spではabout領域の幅は最大で600pxにしてるから、
        ｐｃ幅になると小さすぎるので、
        ＰＣでは最大幅をおおきくする*/
    .sec01_theme {
        max-width: 1920px;
        /*全体に余白をとってるけど、
            PCではその余白だけだと横に間延びして見えてしまうから
            about領域はさらに余白を増やす*/
        margin-left: auto;
        margin-right: auto;
    }
}

/*<<<<<<<<<<<<<<<min-width:980px<<<<<<<<<<<<<<<*/



/*--------------------------sec01タイトのまとまり-----------------------------*/
.sec01_theme_title {
    padding-top: 88px;
    /*.sec01_obj にabsolute*/
    position: relative;
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
}

/*>>>>>>>>>>>>>>>min-width:980px>>>>>>>>>>>>>>>*/
@media screen and (min-width:980px) {
    .sec01_theme_title {
        padding-top: 168px;
    }
}

/*<<<<<<<<<<<<<<<min-width:980px<<<<<<<<<<<<<<<*/




/*-----------------------sec01サブタイトルのまとまり--------------------------*/
/*画面を縮めていったとき、サブタイトルの画像の左右が切れないように設定*/

/*「ひと粒からしあわせを作る」*/
.sec01_theme_title_keyword {
    width: 90%;
    max-width: 480px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
}

.sec01_theme_title_keyword img {
    width: 100%;
}


/*「今日の食卓に並ぶ~~~」*/
.sec01_theme_title_detail {
    font-weight: 500;
    /*画面幅に合わせて伸縮させる
    基本は画面幅の3％のサイズにする、
    けど、2remより大きくしない
    画面幅を広げていっても2remよりお大きくしない*/
    /*font-size: min(3vw, 2rem);*/
    font-family: 'Zen Maru Gothic', serif;
    text-align: center;

}


.sec01_theme_title_detail p {
    font-size: 1.2rem;
    line-height: 3rem;

}

/*>>>>>>>>>>>>>>>min-width:980px>>>>>>>>>>>>>>>*/
@media screen and (min-width:980px) {
    .sec01_theme_title_detail p {
        font-size: clamp(14px, 1.6vw, 1.8rem);
        line-height: 5rem;
    }
}

/*<<<<<<<<<<<<<<<min-width:980px<<<<<<<<<<<<<<<*/

/*「ひと粒からしあわせをつくる」~~「今日の食卓に並ぶ~~」　の間のこめつぶ画像*/
.sec01_theme_title_detail img {
    width: 3.5%;
    max-width: 28px;
    display: block;
    margin-left: auto;
    margin-right: auto;

}

/*---------------------sec01タイトル周辺のイラストのオブジェクト------------------------------*/

/*sec1タイトル周辺のモチーフ（.sec01_obj）を浮かせて配置、はみ出たところは非表示。
親となる範囲はsec01_theme_title （セパレーターの範囲）*/
.sec01_obj {
    object-fit: cover;
    /*親のsec01_theme_title の範囲内に自由に配置*/
    position: absolute;
    /*画面を縮小したとき要素がはみ出しても
    バーが出ないようにはみ出た部分は切る*/
    overflow: hidden;
    /*ナビゲーション開いたとき、ナビゲーションの上にならないようにする*/
    z-index: 1;
}

.sec01_obj img {
    width: 100%;
}

/*-------------------------星------------------------------*/
.sec01_obj.star1 {
    width: 40%;
    top: 0%;
    left: 0;
    z-index: -3;
}

.sec01_obj.star2sp {
    width: 100%;
    top: 10%;
    left: 0;
    z-index: 0;
}

.sec01_obj.star2pc {
    display: none;
}

.sec01_obj.star3 {
    width: 40%;
    top: 0;
    right: 0;
    z-index: -3;
}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {
    .sec01_obj.star2sp {
        display: none;
    }

    .sec01_obj.star2pc {
        display: block;
        width: 80%;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 0;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:1200px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1200px) {
    .sec01_obj.star1 {
        display: block;
        width: 25%;
        top: 10%;
        left: 0;
        z-index: 0;
    }

    .sec01_obj.star2pc {
        width: 50%;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 0;
    }

    .sec01_obj.star3 {
        display: block;
        width: 25%;
        top: 10%;
        right: 0;
        z-index: 0;
    }
}

/*<<<<<<<<<<<<<<<min-width:1200px<<<<<<<<<<<<<<<*/



/*------------------------カエル-------------------------*/
.sec01_obj.sec01_flog {
    width: 10%;
    top: 5%;
    right: 10%;

    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: sec1-obj 2.0s steps(2, jump-start) infinite;
}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {
    .sec01_obj.sec01_flog {
        max-width: 100px;
        top: 23%;
        right: 16%;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:1200px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1200px) {
    .sec01_obj.sec01_flog {
        right: 23%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1200px<<<<<<<<<<<<<<<*/


/*------------------------雲大-------------------------*/
.sec01_obj.sec01_cloud1 {
    width: 20%;
    top: 2%;
    left: 5%;
    z-index: -2;
    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: sec1-obj 2.0s steps(2, jump-start) infinite;
}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {
    .sec01_obj.sec01_cloud1 {
        width: 14%;
        top: 1%;
        left: 10%;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:1200px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1200px) {
    .sec01_obj.sec01_cloud1 {
        top: 3%;
        left: 13%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1200px<<<<<<<<<<<<<<<*/


/*------------------------雲小-------------------------*/
.sec01_obj.sec01_cloud2 {
    width: 15%;
    top: 10%;
    right: 3%;
    z-index: -2;
    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: sec1-obj 2.0s steps(2, jump-start) infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes sec1-obj {

    0% {
        transform: translate(0%, 10%);
    }

    100% {
        transform: translate(0%, -10px);
    }
}

.sec01_obj.separator {
    top: 0;
}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {
    .sec01_obj.sec01_cloud2 {
        width: 10%;
        top: 23%;
        left: 16%;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:1200px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1200px) {
    .sec01_obj.sec01_cloud2 {
        left: 19%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1200px<<<<<<<<<<<<<<<*/



/*-----------------------------sec01のおこめ型写真---------------------------*/
.sec01_theme_img {
    width: 90%;
    text-align: center;
    padding-top: 48px;
    margin-left: auto;
    margin-right: auto;
}

/*>>>>>>>>>>>>>>>min-width:690px>>>>>>>>>>>>>>>*/
@media screen and (min-width:690px) {
    .sec01_theme_img {
        width: 65%;
        max-width: 780px;
    }
}



.sec01_theme_img img {
    width: 100%;
}

/*---------------------sec01とsec02の間のセパレータ--------------------*/
.sec01sec02_separator_sp {
    width: 100%;
    position: relative;
}

.sec01sec02_separator_pc {
    display: none;
}


/*>>>>>>>>>>>>>>>min-width:980px>>>>>>>>>>>>>>>*/
@media screen and (min-width:980px) {
    .sec01sec02_separator_sp {
        display: none;
    }

    .sec01sec02_separator_pc {
        display: block;
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        z-index: -1;
    }

}

/*<<<<<<<<<<<<<<<min-width:980px<<<<<<<<<<<<<<<*/
/*sec01の一番外側に背景色白に設定*/
.sec01_theme_sub-area {
    background-color: #fff;
}


.sec01_theme_sub-area_content {
    position: relative;
    /*稲フレームをsec01_theme_sub-area_content領域のbottomにぴったりくっつけて配置したときの位置調整のため設定。SPではpaddingのなかにオブジェクトを配置*/
    padding-bottom: 14vw;
}

/*>>>>>>>>>>>>>>>min-width:980px>>>>>>>>>>>>>>>*/
@media screen and (min-width:980px) {
    .sec01_theme_sub-area_content {

        max-width: 1020px;
        margin-left: auto;
        margin-right: auto;
        /*PCではsec01_theme_sub-area_contentに高さを設定してその中にオブジェクトを配置*/
        padding-bottom: 0;
        height: 37vw;
        /*テキストと稲フレームの間隔の空きすぎ防止*/
        max-height: 440px;
    }
}

/*<<<<<<<<<<<<<<<min-width:980px<<<<<<<<<<<<<<<*/



/*------------------------sec01のテキストの外の箱----------------------------*/
.sec01_theme_sub-area_content-text_box {
    background-color: #fff;
}

.sec01_theme_sub-area_content_text {
    /*background-color: #fff;*/
    padding-left: 0;
    padding-right: 0;
    text-align: center;

}



/*>>>>>>>>>>>>>>>min-width:980px>>>>>>>>>>>>>>>*/
@media screen and (min-width:980px) {
    .sec01_theme_sub-area_content-text_box {
        /*.sec01_theme_sub-area_contentがrelative*/
        position: absolute;
        left: 23%;
        top: -22%;
        padding-left: 0;
        padding-right: 0;
        width: 56%;
        background-color: rgb(255, 255, 255, 0);
        background-image: url(../img/sec01_text_box_background.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        /*背景画像の中にテキストを入れるため広めにpaddingを設定*/
        padding: 7rem 0 0 0;
        z-index: 1;


    }
}

/*<<<<<<<<<<<<<<<min-width:980px<<<<<<<<<<<<<<<*/






/*------------------------sec01のテキストのｐ要素----------------------------*/
.sec01_theme_sub-area_content_text p {
    font-weight: 500;
    font-size: clamp(14px, 1.6vw, 1.8rem);
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    line-height: 5rem;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec01_theme_sub-area_content_text p {
        width: 80%;
    }

}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:460px>>>>>>>>>>>>>>>*/
@media screen and (min-width:460px) {

    .sec01_theme_sub-area_content_text.text1 p {
        display: inline;
    }
}

/*<<<<<<<<<<<<<<<min-width:460px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:980px>>>>>>>>>>>>>>>*/
@media screen and (min-width:980px) {

    .sec01_theme_sub-area_content_text.text1 p {
        display: block;
    }

}

/*<<<<<<<<<<<<<<<min-width:980px<<<<<<<<<<<<<<<*/


/*--------------------------sec01サブエリアオブジェクト～親子---------------------------------*/
/*～～～～～～親子ＳＰ～～～～～～～*/
.sec01sec02_separator_sp .sec01_sub_area_obj.family_sp {
    position: absolute;
    width: 25%;
    bottom: 5%;
    right: 10%;
}


.sec01_sub_area_obj.family_sp img,
.sec01_sub_area_obj.family_pc img {
    width: 100%;
}

/*～～～～～～親子ＰＣ～～～～～～～*/
.sec01_theme_sub-area_content-text_box .sec01_sub_area_obj.family_pc {
    display: none;
}

/*>>>>>>>>>>>>>>>min-width:980px>>>>>>>>>>>>>>>*/
@media screen and (min-width:980px) {

    .sec01sec02_separator_sp .sec01_sub_area_obj.family_sp {
        display: none;
    }

    .sec01_theme_sub-area_content-text_box .sec01_sub_area_obj.family_pc {
        position: absolute;
        display: block;
        width: 38%;
        max-width: 300px;
        bottom: 0;
        left: 0;
        z-index: 1;
    }
}

/*<<<<<<<<<<<<<<<min-width:980px<<<<<<<<<<<<<<<*/


/*--------------------------sec01サブエリアオブジェクト～稲フレーム----------------------------*/


.sec01_sub_area_obj.ine_flame {
    position: absolute;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    z-index: 1;
}

/*>>>>>>>>>>>>>>>min-width:980px>>>>>>>>>>>>>>>*/
@media screen and (min-width:980px) {
    .sec01_sub_area_obj.ine_flame {
        bottom: 18%;
    }
}

/*<<<<<<<<<<<<<<<min-width:980px<<<<<<<<<<<<<<<*/

.sec01_sub_area_obj.ine_flame img {
    width: 100%;
}


/*ーーーーーーーーーーーーーーsec01サブエリアオブジェクト～稲ふりふりおこめ君ーーーーーーーーーーーー*/
/*～～～～～～おこめ君の外箱～～～～～～*/
.sec01_sub_area_obj.okome {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 10%;
    z-index: 1;

}

/*>>>>>>>>>>>>>>>min-width:980px>>>>>>>>>>>>>>>*/
@media screen and (min-width:980px) {

    .sec01_sub_area_obj.okome {
        top: 145px;
        left: 50%;
        width: 10%;
        max-width: 156px;
    }
}

/*<<<<<<<<<<<<<<<min-width:980px<<<<<<<<<<<<<<<*/

/*～～～～～～おこめ君全体～～～～～～*/
.sec01_sub_area_obj.okome .okome_all {
    position: relative;
}

/*～～～～～～おこめ君ボディとおこめ君手～～～～～～*/
.sec01_sub_area_obj.okome .okome_all .okome_body,
.sec01_sub_area_obj.okome .okome_all .okome_hand {
    position: absolute;
    top: 0;
    left: 0;
}

/*～～～～～～おこめ君の手～～～～～～*/
.sec01_sub_area_obj.okome .okome_all .okome_hand {
    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: sec01-okome 2.0s steps(2) infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes sec01-okome {

    0% {
        transform-origin: 20% 50%;
        transform: rotate(10deg);
    }

    100% {
        transform-origin: 20% 50%;
        transform: rotate(-10deg);
    }
}

/*==============================================================
ここまで　　　Aboutセクション.sec01  
================================================================*/



/*==============================================================
sec02sec03sec04sec05サブタイトルの設定  ここから
================================================================*/


/*-----------------------------------------------------------------------
sec02sec03sec04sec05サブタイトルの設定
-------------------------------------------------------------------------*/
/*各sectionタイトルの英字の設定*/
.sub_title_common {
    /*imgをabsoluteにして浮かせて、親の.sub_titleにrelativeを設定してその中で配置*/
    position: relative;
    /*親のrelativeだから領域の幅をつくる*/
    width: 100%;
    /*ナビゲーションを開くとその上層にきちゃうので下層に下げておく*/
    z-index: -1;
}



/*==============================================================
sec02sec03sec04sec05サブタイトルの設定  ここまで 
================================================================*/



/*========================================================================
Aboutセクション.sec02　　　　ここから
==========================================================================*/
/*ーーーーーーーーーーーーーーーsec02の背景画像ーーーーーーーーーーーーーーーーー*/
.sec02 {
    background-color: #fff;
    /*
    クラスは入れてないから画面幅が100％
    高さはこの中に入ってる要素の分が高さとなる*/
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20vw;
    /*ボタンのボトムからその下までのコンテントまでの間隔。
    次のセクションの::beforeのなかにセパレーターを入れるので
    セパレーターの分の間隔をとるため広めに指定。
    padding-bottom: 8rem;*/
    /*marginをとらないと、その下の疑似要素で浮かせてるセパレーターが
    見えなくなっちゃうのでマージンをとる。*/
    /*margin-bottom: 8vh;*/
    box-sizing: border-box;
    /* background-image: url(../img/sec01-sec02_separator_twinkle_under_b.png);
    background-repeat: no-repeat;
    background-size: 230%;
    background-position: 0 100%;*/
    overflow: hidden;
    /*sec02のオブジェクトにabsolute*/
    position: relative;

}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec02 {
        background-size: 100%;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:1580px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1580px) {
    .sec02 {
        padding-top: 340px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1580px<<<<<<<<<<<<<<<*/


/*ーーーーーーーーーーーーーーーーsec01背景のキラキラーーーーーーーーーーーーーーーー*/
.sec01-sec02_separator {
    position: absolute;
    top: 80px;
    left: 0;
}

/*ーーーーーーーーーーーーーーーsec02の内側の箱の大きさーーーーーーーーーーーーーーーーー*/
.sec02 .top_about {
    /* max-width: 1424px;
    margin-left: auto;
    margin-right: auto;*/
    padding-top: 6rem;

}

/*🔽sec2のタイトルが画面幅によっては上のセクションの雲のしたに入り込んでしまうので調整*/
/*>>>>>>>>>>>>>>min-width:580px>>>>>>>>>>>>*/
@media screen and (min-width:580px) {
    .sec02 .top_about {
        padding-top: 0;

        /* background-image: url(../img/top_section02_bg_left_c.png);
        background-repeat: no-repeat;
        /*要素の大きさに対する割合。containだと大きい画面にしたとき右端が切れたから*/
        background-size: 45% 40%;
        background-position: 2vw 4vw;
    }
}

/*<<<<<<<<<<<<<min-width:580px<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec02 .top_about {
        padding-bottom: 8rem;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

/*ーーーーーーーーーーーーーーsec02の各箱の設定ーーーーーーーーーーーーーーーーーー*/

.sec02 .top_about_content {
    position: relative;

}


/*>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>*/
@media screen and (min-width:790px) {

    .sec02 .top_about_content {
        padding-bottom: 6%;
        padding-left: 40px;
        padding-right: 40px;

    }
}

/*<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<*/



/*ーーーーーーーーーーーーーーーsec02の箱のタイトルーーーーーーーーーーーーーーーーー*/

/*about領域のsec2のタイトルと下の領域の距離*/
.sec02 .top_about .top_about_title {
    text-align: center;
    margin-bottom: 48px;
}

/*>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>*/
@media screen and (min-width:790px) {

    /*about領域のsec2のタイトルと下の領域の距離*/
    .sec02 .top_about .top_about_title {
        margin-bottom: 56px;
    }
}

/*<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<*/


/*ーーーーーーーーーーーーーーーsec02 1つ目フレックスボックスのエリアーーーーーーーーーーーーーーー*/
.top_about_content_ct01_outer {

    color: #fff;
    max-width: 1920px;
    padding-bottom: 38%;
    background-image: url(../img/top_section02_bg_left_g.png);
    background-repeat: no-repeat;
    /*要素の大きさに対する割合。containだと大きい画面にしたとき右端が切れたから*/
    background-size: 100% 45%;
    background-position: 100% 80%;

}

/*>>>>>>>>>>>>min-width:790px>>>>>>>>>>>*/
@media screen and (min-width:790px) {

    .top_about_content_ct01_outer {
        padding-bottom: 0;
        background-size: 49% 90%;
        background-position: 0 0;
    }
}

/*>>>>>>>>>>>>min-width:790px>>>>>>>>>>>*/

/*>>>>>>>>>>>>>>>min-width:1200px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1200px) {
    .top_about_content_ct01_outer {}
}

/*<<<<<<<<<<<<<<<min-width:1200px<<<<<<<<<<<<<<<*/


/*ーーーーーーーーーーーーーーーsec02 2つ目フレックスボックスのエリアーーーーーーーーーーーーー*/
.top_about_content_ct02_outer {
    color: #fff;
    background-image: url(../img/top_section02_bg_right_g.png);
    background-repeat: no-repeat;
    background-size: 100% 45%;
    background-position: 15% 80%;
    max-width: 1920px;
    padding-bottom: 38%;
    /*padding-top: 10vw;*/
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .top_about_content_ct02_outer {
        padding-bottom: 0;
        background-size: 49% 90%;
        background-position: 100% 0%;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/


/*ーーーーーーーーーーーーsec02 各フレックスボックスのエリアーーーーーーーーーーーーー*/
/*>>>>>>>>>>>>min-width:790px>>>>>>>>>>>*/
@media screen and (min-width:790px) {

    /*横並びにする*/
    .sec02 .top_about .top_about_content {
        display: flex;
        /*子要素の写真とテキストを左右の端にふる.
        写真とテキストの幅は計算して設定してるので、左右に振ることで真ん中に余白が勝手にできる*/
        justify-content: space-between;
        align-items: center;
        max-width: 1240px;
        margin-left: auto;
        margin-right: auto;
        /*height: 48vw;
        max-height: 680px;*/
        position: relative;
    }

    .sec02 .top_about .top_about_content.ct01 {
        /*写真とテキストの左右の位置を変える*/
        flex-direction: row-reverse;
    }
}

/*<<<<<<<<<<<min-width:790px<<<<<<<<<*/


/*ーーーーーーーーーーーーsec02 各フレックスボックスのテキストーーーーーーーーーーーーーー*/

/*モチーフを配置するためにテキストの箱をrelativeにする*/
.sec02 .top_about_content_text {
    position: relative;
    /*モチーフを領域はみ出して配置するので見えるようにする*/
    overflow: visible;
    /*背景に色を敷いて文字を見やすく*/
    /*background-color: rgb(255, 255, 255, 0.5);*/
    width: 76%;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0px 0px 20px rgb(0, 0, 0);
}

/*>>>>>>>>>>>>>>>min-width:490px>>>>>>>>>>>>>>>*/
@media screen and (min-width:490px) {
    .sec02 .top_about_content_text {
        width: 65%;
    }
}

/*<<<<<<<<<<<<<<<min-width:490px<<<<<<<<<<<<<<<*/

/*sec02タイトル*/
.sec02 .content_text_title h3 {
    text-align: center;
    padding-bottom: 0;
    background-image: url(../img/subtitle_back_icon.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    font-size: clamp(16px, 2vw, 22px);
    color: #000;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec02 .content_text_title h3 {
        padding-bottom: 10%;
        color: #fff;
        background-image: none
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/
.sec02 .content_text_title.sp {
    margin-bottom: 5%;
}

.sec02 .content_text_title.pc {
    display: none;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {

    .sec02 .content_text_title.sp {
        display: none;
    }

    .sec02 .content_text_title.pc {
        display: block;

    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:1080px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1080px) {
    .sec02 .content_text_title h3 {
        /*  padding-top: 40px;
        padding-bottom: 40px;*/
    }
}

/*<<<<<<<<<<<<<<<min-width:1080px<<<<<<<<<<<<<<<*/


/*sec02各テキスト*/
.sec02 .top_about_content_text p {
    font-weight: 500;
    font-size: clamp(15px, 1.55vw, 20px);
    margin-top: 24px;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {

    /*横並びにしたときのテキストの箱のサイズ*/
    .sec02 .top_about_content_text.tx01 {
        width: 36%;
        /*テキストの箱が最大幅になったときテキストの箱を画像側に寄せてflexにかけてるgapの間隔にする。tx01もtx02も。*/
        margin-left: auto;
        margin-top: 2%;
        max-width: 552px;
        position: relative;

    }

    .sec02 .top_about_content_text.tx02 {
        width: 36%;
        /*テキストの箱が最大幅になったときテキストの箱を画像側に寄せてflexにかけてるgapの間隔にする。tx01もtx02も。*/
        margin-right: auto;
        max-width: 552px;
        /*   background-color: rgba(64, 107, 22, 0.5);*/
        margin-top: 2%;
    }

    .sec02 .top_about_content_text p {
        line-height: 3vw;
        margin-top: 0;
        font-size: clamp(13px, 1.55vw, 17px);
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:1500px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1500px) {
    .sec02 .top_about_content_text p {
        line-height: 4.5rem;
    }
}

/*<<<<<<<<<<<<<<<min-width:1500px<<<<<<<<<<<<<<<*/


/*ーーーーーーーーーーーーーーーsec02 各フレックスボックスの画像ーーーーーーーーーーーーーーー*/

.sec02 .top_about_content_img {
    position: relative;
    /* filter: drop-shadow(-3px 5px 5px rgb(255, 255, 255));*/
    width: 90%;
    margin-left: auto;
    margin-right: auto;

    padding: 8px;
    background: #567834;
    border-radius: 30px;
}

/*about領域の画像はSPの場合は親の幅に対して100％
親はimgの親のdivのtop_about_contentの
親のセクションtop_about*/
.sec02 .top_about_content .top_about_content_img img.art {
    border-radius: 30px;

}

/*>>>>>>>>>>>>>>>min-width:490px>>>>>>>>>>>>>>>*/
@media screen and (min-width:490px) {
    .sec02 .top_about_content_img {
        width: 65%;
    }
}

/*<<<<<<<<<<<<<<<min-width:490px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>min-width:790px>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .top_about .top_about_content_img {
        /*フレックスボックスの親に対して45％XDで画像を配置して距離を測り、計算。*/
        width: 45%;
        display: inline-block;
        height: 100%;
        max-width: 560px;
    }

    /*<<<<<<<<<<<min-width:790px<<<<<<<<<*/
}



/*ーーーーーーーーーーーーーーーーsec02のオブジェクトーーーーーーーーーーーーーー*/
.top_about_content_obj {
    position: absolute;
}

.top_about_content_obj img {
    width: 100%;
    position: relative;
}

/*ーーーーーーーーーーーーーsec02 キャラクターとこどものオブジェクトーーーーーーーーーーーーーーー*/

.top_about_content_img .top_about_content_obj.sec02_child4 {
    top: -57%;
    right: 2%;
    width: 33%;

}


/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .top_about_content_img .top_about_content_obj.sec02_child4 {
        /*親.top_about_contentのrelativeにはheightをvwで指定。max-heightも指定*/
        top: -10vw;
        right: -5vw;
        width: 45%;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:1500px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1500px) {
    .top_about_content_img .top_about_content_obj.sec02_child4 {
        top: -160px;
        right: -40px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1500px<<<<<<<<<<<<<<<*/

/*ーーーーーーーーーーーーーーーー.sec02 カエルと子どもオブジェクトーーーーーーーーーーーーーーーー*/



.top_about_content.ct01 .top_about_content_obj.sec02_child2 {
    bottom: -24vw;
    left: 34vw;
    width: 20%;
    z-index: 1;
}


/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .top_about_content.ct01 .top_about_content_obj.sec02_child2 {
        /*親.content_text_theのrelative*/
        bottom: 0;
        left: 50%;
        width: 12%;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:1500px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1500px) {
    .top_about_content.ct01 .top_about_content_obj.sec02_child2 {
        top: 372px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1500px<<<<<<<<<<<<<<<*/

/*ーーーーーーーーーーーーーーーーsec02 稲ーーーーーーーーーーーーーーーー*/

.top_about_content_obj.sec02_ine01_sp {
    bottom: -23vw;
    left: 71%;
    width: 9%;
}

.top_about_content_obj.sec02_ine01_pc {
    display: none;
}

.top_about_content_obj.sec02_ine02_sp {
    bottom: -21vw;
    left: calc(50% + 10%);
    width: 8%;
}

.top_about_content_obj.sec02_ine02_pc {
    display: none;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .top_about_content_obj.sec02_ine01_pc {
        display: block;
        bottom: 61%;
        left: 2%;
        width: 6%;
    }

    .top_about_content_obj.sec02_ine01_sp {
        display: none;
    }

    .top_about_content_obj.sec02_ine02_pc {
        display: block;
        bottom: 54%;
        left: calc(50% - 7%);
        width: 5%;
    }

    .top_about_content_obj.sec02_ine02_sp {
        display: none;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:1500px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1500px) {
    .top_about_content_obj.sec02_ine01_pc {
        bottom: 52%;
        left: 5%;
    }

    .top_about_content_obj.sec02_ine02_pc {
        bottom: 50%;
        left: 10%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1500px<<<<<<<<<<<<<<<*/


/*ーーーーーーーーーーーーーーーーsec02 黄色雲ーーーーーーーーーーーーーーーー*/
.top_about_content_obj.sec02_cloud_sp {
    bottom: -6vw;
    left: 74vw;
    width: 18%;
}

.top_about_content_obj.sec02_cloud_pc {
    display: none;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .top_about_content_obj.sec02_cloud_pc {
        display: block;
        top: 0%;
        left: 15%;
        width: 12%;
    }

    .top_about_content_obj.sec02_cloud_sp {
        display: none;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/


/*ーーーーーーーーーーーーーーーーsec02 農作業　ねこぐるまーーーーーーーーーーーーーーーー*/

/*農作業オブジェクト　画像領域がrelative*/
.top_about_content_obj.sec02_child1 {
    top: 2%;
    right: 5vw;
    width: 24%;
    z-index: 1;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .top_about_content_obj.sec02_child1 {
        /*親.top_about_contentのrelativeにはheightをvwで指定。max-heightも指定*/
        width: 20%;
        top: 38%;
        right: calc(50% - 10px);
    }

}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:1500px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1500px) {
    .top_about_content_text_obj.sec02_child1 {
        bottom: 120px;
        right: 400px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1500px<<<<<<<<<<<<<<<*/

/*ーーーーーーーーーーーーーーーーsec02きょうだい子どもーーーーーーーーーーーーーーーー*/
.ct02 .top_about_content_img .sec02_child3 {
    top: -35%;
    left: 0;
    width: 18%;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {

    /*子ども３兄弟　画像領域がrelative*/
    .ct02 .top_about_content_img .sec02_child3 {
        width: 23%;
        top: -7vw;
        left: -5vw;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:1500px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1500px) {
    .top_about_content_img .top_about_content_obj.sec02_child3 {
        top: -156px;
        left: -40px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1500px<<<<<<<<<<<<<<<*/


/*ーーーーーーーーーーーーーーーーsec02 カエルーーーーーーーーーーーーーーーー*/
.top_about_content_obj.sec02_tonbo {
    position: absolute;
    width: 5%;
    bottom: -7%;
    right: 46%;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .top_about_content_obj.sec02_tonbo {
        position: absolute;
        width: 5%;
        bottom: 45%;
        right: 2%;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:1500px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1500px) {
    .top_about_content_obj.sec02_tonbo {
        bottom: 57%;
        right: -10%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1500px<<<<<<<<<<<<<<<*/

.top_about_content_obj.sec02_flog {
    position: absolute;
    width: 14%;
    bottom: -19vw;
    right: 54%;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .top_about_content_obj.sec02_flog {
        position: absolute;
        width: 7%;
        bottom: 13%;
        right: 28%;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:1500px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1500px) {
    .top_about_content_obj.sec02_flog {
        bottom: 32%;
        right: -4%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1500px<<<<<<<<<<<<<<<*/

.top_about_content_obj.sec02_sun {
    position: absolute;
    width: 18%;
    bottom: -17vw;
    right: 22%;
    z-index: 1;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .top_about_content_obj.sec02_sun {
        width: 15%;
        top: -11%;
        right: 1%;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/


/*>>>>>>>>>>>>>>>min-width:1500px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1500px) {
    .top_about_content_obj.sec02_sun {
        right: -8%;
    }

}

/*<<<<<<<<<<<<<<<min-width:1500px<<<<<<<<<<<<<<<*/

.top_about_background_ct01 {
    position: absolute;
    width: 100%;
    top: 42%;
    left: 0;
    z-index: 0;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .top_about_background_ct01 {
        position: absolute;
        width: 50%;
        top: 64%;
        left: 0;
        z-index: 0;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

.top_about_background_ct02 {
    position: absolute;
    width: 100%;
    top: 82%;
    left: 0;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .top_about_background_ct02 {
        width: 50%;
        top: 65%;
        left: 50%;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

.sec02 .btn {
    margin-top: 64px;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec02 .btn {
        margin-top: 0;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/



/*========================================================
ここまで　　　おこめふぁーむについて　Aboutセクション.sec02　　
===========================================================*/

/*///////////////////////////////
セパレータイエロー-トップ（sec02とsec03の間） ここから
//////////////////////////////*/
/***********************************
    セパレーター上にオブジェクトを浮かせる場合、かつ親要素の領域から左右へのはみ出しがある場合
    １★セパレータ画像の用意
        ⑴下のセクションと同じ色のセパレータ画像を用意する場合
            用意するセパレーターの画像は左右に直線部分のある、セパレーター領域の高さの分だけの、高さの画像を用意。
            セパレータ画像は下の方に寄せてセパレータを描く
            かつ、::beforeのbackground-coloerを上の領域の背景色と同じにすること。
        ⑵上のセクションと同じ色のセパレータ画像を用意する場合
            用意するセパレーターの画像は左右に直線部分のある、セパレーター領域の高さの分だけの、高さの画像を用意。
            セパレータ画像は下の方に寄せてセパレータを描く
            （つまり、大部分は上の領域の背景色のベタになる）
    　　　　
    ２★セパレーターは下の領域の::beforeとして領域をとる。
    セパレーターを設置したい下のセクションに::beforeをつけて、
    その疑似要素に高さheightをあたえてあげることで
    疑似要素の領域つまり、セパレータの領域を作る。

    疑似要素の領域の背景画像としてセパレータの画像を入れる。
        この::beforeの領域の高さはセパレータの領域の高さの分とる。つまり、用意した画像の高さ分取っておく。
        なおかつ親要素の下の領域のpadding-topも同じ分の高さとっておく。
    widthは親要素のほうに100％をつけておくと大丈夫。

    ３contentは空”　”にしておく。

    ４疑似要素を設定した状態では、下の領域と重なるように配置されてしまうので、
    下の領域にposition：relativeを設定し、
    ::beforeにはposition：absolute;を設定してあげることで、
    親要素の領域の左上を基点として自由に配置できるようにする。
    topはマイナスの値を入れることで、親要素の領域より上方向に移動するので
    親要素と同じ色で作ってるセパレータの背景画像が見えてくる。
    leftは0でいい。

    ５::beforeの背景画像は　background-repeat: no-repeat;
    background-size: cover;　
    を指定して、1つのセパレータ画像が領域幅いっぱいに広がるようにして
    さらに、なぜかbackground-position: 50% 0;をしていしておくと::before領域に
    セパレータの背景画像がきれいに収まる。
    z-indexはもし重なり順がおかしければ、1ずつ上げ下げして調整。
    z-indexは浮いてる要素同士でした扱えないので、（position：relative、absolute、fixedや
    display：flex、float:OOなど）注意。
    ::beforeはdisplay:blockにして表示しておく。

    ６浮かせたいオブジェクトたちはオブジェクトのimg画像をimgタグで入れて、imgタグはdivで囲っておく。
    divには全てのオブジェクトに共通するクラスをつけておく。その他それぞれのオブジェクト固有のクラスを付けておく。

    ７浮かせたいオブジェクトたちは共通のクラスを使ってposition absoluteを設定しておく。
    下の領域にセパレータの親としてrelativeを設定してるので、新たにrelativeを設定する必要はない。

    ８画面サイズに合わせてサイズを変えたいときや
    画像のサイズを小さくしたいとき（大きくしたいとき）は
    オブジェクトのimgタグに幅を％で指定するのではなく、
    それを囲ってるdivタグに対して％で指定する。つまり、すべてのオブジェクトに共通でつけてるクラスを使えば、
    みな同じ比率で、画面サイズを変えるたびにサイズもみな同じ比率で変化する
    imgの方にはwidth100％を設定しておく。

    ９もしオブジェクトが親う要素からはみ出してしまうと、画面下にスクロールバーが出てきてしまう。
    これを回避する方法は、absoluteをかけてはみ出してしまったオブジェクト達の親にrelativeをかけてるので
    その親にoverflow：hiddenをかけてはみ出した分は表示しないようにすること。
    ただし、overflow：hiddenを書けると、その親要素のpaddingより外側にはみ出てして配置している
    すべてのabsoluteの要素が非表示になってしまうので、★の上記の通りに、
    疑似要素の領域と親要素のpadding-topの幅を、セパレータの高さ分とっておくことが必要となる！！

    ※オブジェクトは各オブジェクトがしっかり位置関係を保たなければちぐはぐになってしまうようなモチーフどおしは
    あらかじめ1つのオブジェクトとして作っておく。たとえは、地面がセパレータ、そのセパレータの上に辺に建物が建ってるような
    場合だと、こまめにレスポンシヴを変えないと位置がずれてしまうので、１つのオブジェクト画像として用意しておいた方がいい。
    ただし、画面幅ですべてオブジェクトをまとめて画面幅で高さもある画像を用意する場合はサイトが重くなってしまい、
    表示に時間がかかってしまうのでなるべく一つにまとめずに1つずつ用意したほうが軽く済む。
    1つずつの位置関係がずれにくい単位や計算方法があればいいのだけど、現段階ではむっずかしい。
    *************************************/


.sec03.separator_white_bottom {
    /*疑似要素を.separator_white_bottomの領域内で浮かせて配置するために設定
   .separator_white_bottom （セパレーターの中）を範囲として　.kv_obj（キービジュアルのモチーフ）をabsoluteで配置するために設定*/
    position: relative;
    /*要素の領域の高さを指定。.kv_obj（キービジュアルのモチーフ）をabsoluteで配置するために親要素の.separator_Whiteに幅と高さ（absoluteの範囲）を指定。この要素の下に疑似要素を作る*/
    /*height: 7vh;*/
    width: 100%;
    overflow: hidden;
}



.sec03::before {

    width: 100%;
    /*.separator_white_bottomの後ろにつく疑似要素の背景画像としてセパレータの画像を挿入*/
    background-image: url(../img/top_about_sec01sec02_spt_rv-02.png);
    content: "";
    background-repeat: no-repeat;
    /*横幅いっぱいに縦横比を保ったまま広がる。拡大したときは少し下が切れるけど*/
    background-size: cover;
    /* background-position: 50% 0;
    /*.separator_white_bottomの領域内に浮かせる*/
    position: absolute;
    /*ナビゲーションの下,
    雲の下になるように設定*/
    z-index: 1;
    /*左右が画面からはみ出ないように設定*/
    left: 0;
    /*  right: 0;
    /*下のセクションとの間隔を設定*/
    bottom: 0;
    /*親要素のセクションのパディングの上辺に合わせるため0にする*/
    top: 0;
    height: 8rem;
    display: block;
    box-sizing: border-box;
    background-color: #f7e286;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec03::before {
        background-size: cover;
        /*親要素のsec03のpadding=topとおなじ高さとる*/
        height: 28rem;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/


/*>>>>>>>>>>>>min-width:1028px>>>>>>>>>>>*/
/*@media screen and (min-width:1028px) {
    .sec03.separator_white_bottom::before {
        height: 50rem;
    }}*/

/*<<<<<<<<<<<min-width:1028px<<<<<<<<<*/


/*///////////////////////////////
ここまで　セパレータイエロー-トップ（sec02とsec03の間） 
//////////////////////////////*/

/*========================================================
生産銘柄sec03　    ここから
==========================================================*/
.sec03 {

    /*
    クラスは入れてないから画面幅が100％
    高さはこの中に入ってる要素の分が高さとなる*/
    width: 100%;
    max-width: 1920px;
    /*background-image: url(../img/top_section03_bg_left.png), url(../img/top_section03_bg_right.png);

    background-repeat: repeat-y, repeat-y;
    /*要素の大きさに対する割合。containだと大きい画面にしたとき右端が切れたから*/
    background-size: 10%;
    background-position: 0 100%, 100% 0;
    background-color: #f7e286;
    overflow: hidden;
    padding-bottom: 20Svw;
    padding-top: 16rem;
    z-index: 0;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec03 {
        padding-top: 8rem;
        padding-bottom: 15vw;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/


/*生産銘柄領域の外箱*/
.sec03 .brand_wrapper {
    /*sec02とsec03の間のセパレータの分だけ高さとる*/
    /* margin-top: 8rem;*/
    width: 100%;
    max-width: 1424px;
    position: relative;
    overflow: hidden;

}

/*>>>>>>>>>>>>min-width:790px>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec03 .brand_wrapper {
        padding-top: 8rem;
    }

    /*<<<<<<<<<<<min-width:790px<<<<<<<<<*/
}

/*>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec03 .brand_wrapper {
        padding-top: 30rem;
        /*<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<*/
    }
}

/*生産銘柄領域のオブジェクト*/
.brand_wrapper_obj {
    position: absolute;
}

.brand_wrapper_obj img {
    width: 100%;
}

/*銘柄子どもきょうだい*/
.brand_wrapper_obj_left.sp {
    width: 18%;
    top: -16vw;
    left: 50%;
    transform: translateX(-50%);
}

.brand_wrapper_obj_left.pc {
    display: none;
}


/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .brand_wrapper_obj_left.pc {
        display: block;
        width: 12%;
        top: 23%;
        left: 8%;
    }

    .brand_wrapper_obj_left.sp {
        display: none;
    }
}

/*稲持つ農家さん*/
/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

.brand_wrapper_obj_right.sp {
    width: 25%;
    top: -18vw;
    left: 50%;
    transform: translateX(-50%);
}

.brand_wrapper_obj_right.pc {
    display: none;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .brand_wrapper_obj_right.pc {
        display: block;
        width: 11%;
        top: 20%;
        left: 78%;
        z-index: 1;
    }

    .brand_wrapper_obj_right.sp {
        display: none;
    }


}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/



/*レシピ領域のタイトル*/
.top_brand_title {
    /*ラインナップ領域のタイトルの箱の設定*/
    text-align: center;
    margin-bottom: 32px;
}

/*レシピ領域のテキスト*/
.sec03 .top_brand_text p {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
}

/*>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec03 .top_brand_text p {
        width: 50%;
    }

    /*<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<*/
}

/*レシピ3つの箱*/
.sec03 ul {
    /*銘柄のそれぞれの箱がli。その親の銘柄全体の箱がul。
    ul>liのリストマーカーを消す*/
    padding-left: 0px;
    list-style-type: none;
    margin-top: 84px;
    margin-bottom: 84px;
    margin-left: 10px;
    margin-right: 10px;
}

/*>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec03 ul {
        display: flex;
        gap: 1vw;
        margin-top: 84px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 124px;

    }

    /*<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<*/
}

/*レシピの箱*/
.sec03 ul li {
    width: 95%;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    list-style: none;
    position: relative;
    /*.js-fade-in-upに対してフェードインの設定でhiddenをかけてるので表示*/
    overflow: visible;
    margin-top: 20vw;
    margin-bottom: 4rem;
    background-image: url(../img/brand_bg_akita.png);
    /*１つ１つの銘柄の箱の枠線の設定
    外側にborderつけたいからcontent-boxにする*/
    box-sizing: border-box;
    border: 8px dotted #ffffff;

}


/*>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec03 ul li {
        width: 80%;
        border: 8px dotted #fff;
        /*ulでひとかたまりにするのでそれぞれのmarginはいったんなくしておく*/
        margin-top: 0;
        margin-bottom: 0;
    }

    .sec03 ul li:nth-child(2) {
        transform: translateY(40px);
    }
}

/*<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<*/

/*半円*/
.circle {
    position: absolute;
    top: -10vw;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    width: 30vw;
    height: 15vw;
    max-width: 200px;
    max-height: 100px;
    border-radius: 50% / 100% 100% 0 0;
    border: #fff dotted 5px;


}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .circle {
        top: -10%;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/


/*レシピの箱　いわて*/
.sec03 ul li.iwa {
    background-image: url(../img/brand_bg_iwate.png);
}

/*レシピの箱　ひとめぼれ*/
.sec03 ul li.hito {
    background-image: url(../img/brand_bg_hitomebore.png);
}

/*レシピ画像*/
.sec03 ul li .brand_img_box,
.product_page_wrapper ul li .brand_img_box {
    position: relative;
    width: 90%;
    margin-left: auto;
    margin-right: auto;

}

.product_page_wrapper ul li .brand_img_box img {
    border-radius: 30px;
}

/*レシピタイトルの箱*/
.sec03 ul li .brand_title,
.product_page_wrapper ul li .brand_title {
    position: absolute;
    bottom: 5%;
    right: 0;
    width: 55%;
    text-align: center;
    background-color: rgba(158, 141, 55, 0.4);
}

/*レシピタイトルの箱　いわてっこ*/
.sec03 ul li .brand_title .iwa,
.product_page_wrapper ul li .brand_title .iwa {

    background-color: rgba(158, 101, 55, 0.4);
}

/*レシピタイトルの箱　ひとめぼれ*/
.sec03 ul li .brand_title .hito,
.product_page_wrapper ul li .brand_title .hito {

    background-color: rgba(127, 158, 55, 0.4);
}

/*レシピサブタイトル*/
.sec03 ul li .brand_title .brand_subtitle,
.product_page_wrapper ul li .brand_title .brand_subtitle {
    font-size: 1.2rem;
    line-height: 2rem;
    border-bottom: 0.8px solid #ffffff;
    color: #fff;
}

/*レシピメインタイトル*/
.sec03 ul li .brand_title .brand_name,
.product_page_wrapper ul li .brand_title .brand_name {
    color: #fff;
}

.sec03 ul li .brand_title .brand_name::after,
.product_page_wrapper ul li .brand_title .brand_name::after {
    background-image: url(../img/brand__obj_mini.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100px;
    height: 110px;
    display: block;
    content: "";
    position: absolute;
    top: -20px;
    right: -20px;
    z-index: 2;
}



/*レシピの説明の箱*/
.sec03 ul li .brand_detail_text,
.product_page_wrapper ul li .brand_detail_text {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 16px;
    padding-bottom: 16px;
}

/*レシピグラフの箱*/
.sec03 ul li .brand_revel,
.product_page_wrapper ul li .brand_revel {
    width: 88%;
    margin-left: auto;
    margin-right: auto;

    border-radius: 10px;
    background-color: #C4AE42;
    padding: 8px;

    margin-bottom: 16px;
}

/*レシピグラフの箱 いわてっこ*/
.sec03 ul li .brand_revel.iwa,
.product_page_wrapper ul li .brand_revel.iwa {
    background-color: rgba(158, 101, 55, .8);

}

/*レシピグラフの箱　ひとめぼれ*/
.sec03 ul li .brand_revel.hito {
    background-color: rgba(127, 158, 55, .8);

}

/*レシピグラフ*/
.sec03 ul li .brand_revel img,
.product_page_wrapper ul li .brand_revel img {
    object-fit: cover;
    width: 100%;

}

/*ロゴ あきたこまち*/
.brand_box.aki::before {
    background-image: url(../img/komelogo_akita.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 110px;
    height: 118px;
    display: block;
    content: "";
    position: absolute;
    top: 1px;
    left: 2px;
    z-index: 2;
}

/*ロゴ　いわてっこ*/
.brand_box.iwa::before {
    background-image: url(../img/komelogo_iwateko.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 110px;
    height: 118px;
    display: block;
    content: "";
    position: absolute;
    top: 1px;
    left: 4px;
    z-index: 2;
}

/*ロゴ　ひとめぼれ*/
.brand_box.hito::before {
    background-image: url(../img/komelogo_hitomebore.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 110px;
    height: 120px;
    display: block;
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 2;
}





/*///////////////////////////////
    se03のオブジェクトの配置　ここから
    //////////////////////////////*/

/*------------------------sec03内のオブジェクト--------------------*/
.sec03_object.brand_obj {
    width: 25%;
    z-index: -1;
}

/*>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec03_object.brand_obj {
        width: 26%;
        z-index: -1;
    }

    /*<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<*/
}

.sec03_object.brand_obj1 {
    top: 15%;
    left: 1%;
}

.sec03_object.brand_obj2 {
    width: 30%;
    top: 36%;
    left: 70%;

}

.sec03_object.brand_obj3 {
    width: 35%;
    top: 63%;
    left: 63%;

}

.sec03_object.brand_obj4 {
    width: 28%;
    top: 68%;
    left: 1%;

}

.sec03_object.brand_obj5 {
    width: 28%;
    top: 94%;
    left: 71%;

}

.sec03_object.brand_obj6 {
    width: 32%;
    top: 40%;
    left: 1%;

}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec03_object.brand_obj1 {
        top: 25%;
        left: 1%;
    }

    .sec03_object.brand_obj2 {
        top: 24%;
        left: 72%;

    }

    .sec03_object.brand_obj3 {
        width: 20%;
        top: 52%;
        left: 97%;

    }

    .sec03_object.brand_obj4 {
        top: 73%;
        left: -9%;

    }

    .sec03_object.brand_obj5 {
        top: 76%;
        left: 75%;

    }

    .sec03_object.brand_obj6 {
        width: 24%;
        top: 49%;
        left: -21%;

    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

/*-------------------------セパレータの親要素としてのスタイル------------------*/
.sec03 {
    position: relative;
    /*セパレータがの分だけ間隔取る*/
    /* padding-top: 28rem;*/
}

/*sec03内に浮かせたいオブジェクトの設定*/
.sec03_object {
    position: absolute;
    top: 0;
    left: 0;
    /*子要素のimgのサイズを小さくすると親要素の.sec03_objectの右に隙間ができてしまい
        角度をつけたアニメーションをつけるとき、中心がずれてしまうので、
        img要素を.sec03_objectの中心に配置するためにflexとｊ-ｃ：ｃを設定*/
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 1;
}

.sec03_object img {
    width: 100%;
}

.sec03_object.sp_w_sun {
    width: 20%;
    top: 0%;
    left: 10%;
}

.sec03_object.sp_w_cloud1 {
    width: 20%;
    top: 8rem;
    left: 40%;
}

.sec03_object.sp_w_cloud2 {
    width: 20%;
    top: 3rem;
    left: 65%;
}

.sec03_object.sp_w_cloud3 {
    width: 20%;
    top: 10rem;
    left: 80%;
}

.sec03_object.sp_w_tanbo01 {
    width: 50%;
    top: 24rem;
    left: -10%;
    transform: rotate(6deg);
}

.sec03_object.sp_w_tanbo02 {
    width: 50%;
    top: 24rem;
    left: 50%;
    transform: rotate(3deg);
}

.sec03_object.sp_w_river {
    width: 70%;
    top: 26rem;
    left: 5%;
    transform: rotate(-9deg);
}

.sec03_object.sp_w_ine1 {
    width: 10%;
    top: 18rem;
    left: 5%;
}

.sec03_object.sp_w_ine2 {
    width: 10%;
    top: 19rem;
    left: 15%;
}

.sec03_object.sp_w_ine3 {
    width: 10%;
    top: 20rem;
    left: 75%;
}

.sec03_object.sp_w_ine4 {
    width: 10%;
    top: 19rem;
    left: 85%;
}

.sec03_object.sp_w_rain01 {
    width: 20%;
    top: 12rem;
    left: 40%;
}

.sec03_object.sp_w_rain02 {
    width: 20%;
    top: 5rem;
    left: 60%;
}

/*>>>>>>>>>>>>min-width:570px>>>>>>>>>>>*/
@media screen and (min-width:570px) {
    .sec03_object.sp_w_river {
        width: 70%;
        top: 27rem;
        left: 5%;
        transform: rotate(-9deg);
    }

    .sec03_object.sp_w_ine1 {
        top: 12rem;
        left: 15%;
    }

    .sec03_object.sp_w_ine2 {
        top: 14rem;
        left: 25%;
    }

    .sec03_object.sp_w_ine3 {
        top: 17rem;
        left: 75%;
    }

    .sec03_object.sp_w_ine4 {
        top: 15rem;
        left: 85%;
    }

    /*<<<<<<<<<<<min-width:570px<<<<<<<<<*/
}

/*>>>>>>>>>>>>min-width:1028px>>>>>>>>>>>*/
@media screen and (min-width:1028px) {
    .sec03_object.sp_w_sun {
        max-width: 300px;
        top: 0%;
        left: 10%;
    }

    .sec03_object.sp_w_cloud1 {
        max-width: 210px;
        top: 10rem;
        left: 40%;
    }

    .sec03_object.sp_w_cloud2 {
        max-width: 235px;
        top: 3rem;
        left: 65%;
    }

    .sec03_object.sp_w_cloud3 {
        max-width: 200px;
        top: 10rem;
        left: 80%;
    }

    .sec03_object.sp_w_tanbo01 {
        max-width: 500px;
        top: 42rem;
        left: 0%;
        transform: rotate(6deg);
    }

    .sec03_object.sp_w_tanbo02 {
        max-width: 500px;
        top: 45rem;
        left: 60%
    }

    .sec03_object.sp_w_ine1 {
        width: 10%;
        max-width: 90px;
        top: 28rem;
        left: 15%;
    }

    .sec03_object.sp_w_ine2 {
        width: 10%;
        max-width: 90px;
        top: 30rem;
        left: 25%;
    }

    .sec03_object.sp_w_ine3 {
        width: 10%;
        max-width: 90px;
        top: 35rem;
        left: 75%;
    }

    .sec03_object.sp_w_ine4 {
        width: 10%;
        max-width: 90px;
        top: 32rem;
        left: 85%;
    }

    .sec03_object.sp_w_river {
        max-width: 600px;
        top: 45rem;
        left: 30%;
        transform: rotate(-9deg);
    }

    .sec03_object.sp_w_rain01 {
        max-width: 180px;
        top: 12rem;
        left: 40%;
    }

    .sec03_object.sp_w_rain02 {
        max-width: 180px;
        top: 5rem;
        left: 60%;
    }

    /*<<<<<<<<<<<min-width:1028px<<<<<<<<<*/
}

/*///////////////////////////////
    ここまで　se03のオブジェクトの配置　
    //////////////////////////////*/

/*///////////////////////////////
    sec03オブジェクトのアニメーション　ここから
    /////////////////////////////*/
.sec03_object.mv {
    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: sec03_object 2s steps(2) infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes sec03_object {

    /*アニメーション開始時*/
    0% {

        transform: rotate(-4deg);
    }

    ↴

    /*アニメーション終了時*/
    100% {

        transform: rotate(4deg);
    }
}

/*///////////////////////////////
    ここまで　sec03オブジェクトのアニメーション
//////////////////////////////*/

/*.separator_yellow_bottom::before*/
.sec03::after {
    /*.separator_yellow_bottomの後ろにつく疑似要素の背景画像としてセパレータの画像を挿入*/
    background-image: url(../img/separator_white-02.png);
    content: "";
    background-repeat: no-repeat;
    /*coverだと横幅いっぱいに縦横比を保ったまま広がるから画面幅小さいときはcover。だけど拡大したときは少し下が切れるから、画面幅広げたときはcontain。containだと背景画像の用意した画像の高さで表されるからセパレータにはいい。*/
    background-size: 100%;
    /*.separator_yellow_bottomの領域内に浮かせる*/
    position: absolute;
    /*ナビゲーションの下,
    雲の下になるように設定*/
    z-index: 0;

    /*左右が画面からはみ出ないように設定*/
    left: 0;
    right: 0;
    bottom: 0;
    height: 10vw;
    max-height: 204px;

}



/*========================================================
ここまで　ラインナップsec03　 
==========================================================*/



/*////////////////////////////////////////////////////////
sec03とsec04の間のセパレーター　ここから
//////////////////////////////////////////////////////////*/


/*sec04とsec05のセパレータ*/
/*.recipe_wrapper::before*/
.how_wrapper::after {
    /*.separator_yellow_bottomの後ろにつく疑似要素の背景画像としてセパレータの画像を挿入*/
    background-image: url(../img/separator_yellow.png);
    content: "";
    background-repeat: repeat-x;
    /*coverだと横幅いっぱいに縦横比を保ったまま広がるから画面幅小さいときはcover。だけど拡大したときは少し下が切れるから、max-heightを設定する。containだと背景画像の用意した画像の高さで表されるからセパレータにはいい。画面幅広げたときはcontain。*/
    background-size: contain;
    /*.separator_yellow_bottomの領域内に浮かせる*/
    position: absolute;
    /*ナビゲーションの下,
    雲の下になるように設定*/
    z-index: 2;
    /*画面幅に応じて可変。*/
    /*top: -10%;*/

    /*左右が画面からはみ出ないように設定*/
    left: 0;
    bottom: 0;
    /*下のセクションとの間隔を設定*/

    /*画面幅に応じて可変。beforeのcontentの位置（top）もvwで設定。
    固定値だと画面幅広げたときに親要素から離れてしまう*/
    height: 6vw;
    max-height: 142px;
    width: 100%;
    z-index: 1;
}


/*////////////////////////////////////////////////////////////
ここまで　セパレータイエロー-ボトム（sec03とsec04の間
//////////////////////////////////////////////////////////////*/


/*=======================================================================
おこめのおいしい食べ方sec04　ここから
=========================================================================*/
.sec04 {
    width: 100%;

}


/*セパレータの画像を::beforeの領域を浮かせて配置してるの::beforeの画像の下にsec4のcontent部分が隠れちゃってるので、sec4の領域の中に作った箱を下セパレータの下方まで移動させる*/
.how_wrapper {
    padding-top: 8vw;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    position: relative;

    background-image: url(../img/top_section01_bg_all.png);
    background-repeat: repeat-y;
    background-position: 0 0;
    background-size: contain;

    background-color: #fff;
}

/*>>>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .how_wrapper {
        padding-top: 64px;
    }
}

/*>>>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>>>*/

/*>>>>>>>>>>>>>>>>>min-width:1500px>>>>>>>>>>>>>>>>>*/
@media screen and (min-width:1500px) {
    .how_wrapper {
        padding-top: 88px;
    }
}

/*>>>>>>>>>>>>>>>>>min-width:1500px>>>>>>>>>>>>>>>>>*/

/*sec04タイトル*/
.sec04 .how_title {
    text-align: center;
    margin-bottom: 32px;
}

/*sec04サブタイトル*/
.sec04 .how_subtitle {
    text-align: center;
    margin-bottom: 32px;
    margin-top: 32px;
}

.sec04 .how_subtitle p {
    text-align: center;
    font-weight: 600;
}

/*テキストと画像の箱*/
.sec04 .how_box {
    margin-top: 116px;
    position: relative;
}

/*>>>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {

    .sec04 .how_box {
        max-width: 980px;
        display: grid;
        /*グリッドの列は3列。等間隔で。*/
        grid-template-columns: repeat(2, 1fr);
        /*グリッド行は4列。等間隔で。*/
        grid-template-rows: repeat(auto, auto);
        /*グリッドの列間の幅*/
        column-gap: 3px;
        /*グリッドの行間の幅*/
        row-gap: 0;
        /*子要素のfigureの行全体をコンテナ内で上辺に寄せて配置*/
        align-items: center;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }


    /*1つ目の画像と説明文のfigureの箱の位置*/
    .sec04 .how_box:first-child {
        /*列は1本目と2本目の間*/
        grid-column: 2/3;
        /*行は1本目と2本目の間に入れる*/
        grid-row: 1/2;
    }

    .sec04 .how_box:nth-child(2) {
        grid-column: 1/2;
        /*行は1本目と2本目の間に入れる*/
        grid-row: 1/3;
    }
}

/*>>>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>>>*/


/*sec04領域のオブジェクト*/
.how_box_obj {
    position: absolute;
}

.how_box_obj img {
    width: 100%;
}

/*.sec04 .how_boxにrelative*/
.how_box_obj_left {
    width: 21%;
    top: -24%;
    left: 5%;
}

/*.sec04 .how_box .how_text_box_txnにrelative*/
.how_box_obj_right {
    width: 15%;
    top: -10vw;
    right: 19%;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .how_box_obj_left {
        width: 35%;
        top: -40%;
        left: 5%;
    }

    .how_box_obj_right {
        width: 35%;
        top: -50%;
        right: 8%;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:1156px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1156px) {
    .how_box_obj_right {
        width: 35%;
        top: -60%;
        right: 8%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1156px<<<<<<<<<<<<<<<*/

/*sec04画像の外箱*/
.sec04 .how_box .how_img {
    width: 82%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 28px;
    /* .how_box_obj_leftにabsolute*/
    position: relative;
}


/*sec04画像本体*/
.sec04 .how_box .how_img img {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
    object-fit: cover;

}

/*>>>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec04 .how_box .how_img {
        display: flex;
        align-items: center;
        /* vertical-align: middle;*/
        width: 100%;
    }
}

/*>>>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>>>*/

/*sec04テキストの外箱*/
.sec04 .how_box .how_text_box_tx {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    background-color: rgb(255, 255, 255);
    position: relative;
    overflow-y: visible;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec04 .how_box .how_text_box_tx {
        width: 90%;
    }
}

.how_text_box.js-fade-in-up {
    overflow: visible;
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

.sec04 .how_box .how_text_box_tx p {
    padding-top: 24px;
    padding-bottom: 24px;
    border-top: 6px dotted #f7db4e;
    border-bottom: 6px dotted #f7db4e;

}

/*sec04のボタン*/
.sec04_btn {
    padding-top: 84px;
    padding-bottom: 124px;

}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec04_btn {
        padding-top: 64px;
        padding-bottom: 15vw;

    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/




/*//////////////////////////////////////////////////////
sec04のオブジェクト
////////////////////////////////////////////////////////*/
.sec04 {
    position: relative;

    overflow: hidden;
}


.sec04_object {
    position: absolute;
    width: 20%;

    top: 0;
    left: 0;
}

.sec04_object img {
    width: 100%;

}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*ごはん　ボタン下　画像本体*/
.sec04 .sec04_obj.rice img {
    display: block;
    margin-left: auto;
    margin-right: auto;

}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.sec04_obj_rice {
    position: relative;
    padding-top: 40px;
    width: 70%;
    bottom: 0;
    left: 50%;
    transform: translateX(-150px);
    height: 14vw;
    max-height: 440px;

}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.rice_cyawan {
    position: relative;
    display: flex;
    vertical-align: middle;
    justify-content: center;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

/*>>>>>>>>>>>>>>>min-width:590px>>>>>>>>>>>>>>>*/
@media screen and (min-width:590px) {
    .rice_cyawan {
        width: 300px;
    }
}

/*<<<<<<<<<<<<<<<min-width:590px<<<<<<<<<<<<<<<*/

.sec04_obj.rice_yuge {
    position: absolute;
    display: flex;
    vertical-align: middle;
    justify-content: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.sec04_obj.rice_yuge img {
    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: rice 1.6s ease-in-out alternate-reverse infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes rice {

    0% {
        transform-origin: center center;
        transform: rotate(5deg);
    }

    100% {
        transform-origin: center center;
        transform: rotate(-5deg);
    }
}





/*稲　ボタン横*/
.sec04 .sec04_obj.ine {
    position: absolute;
    width: 15%;
    display: none;
}




/*>>>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {

    /*稲　ボタン横*/
    .sec04 .sec04_obj.ine {
        width: 6%;
        display: block;
    }

    .sec04 .sec04_obj.ine1 {
        left: 15%;
        bottom: 40px;
    }

    .sec04 .sec04_obj.ine2 {
        left: 25%;
        bottom: 50px;
    }

    .sec04 .sec04_obj.ine3 {
        right: 25%;
        bottom: 50px;
    }

    .sec04 .sec04_obj.ine4 {
        right: 15%;
        bottom: 40px;
    }
}

/*>>>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>>>*/


.sec04_object.sun {
    top: 5%;
    left: 10%;
}


.sec04_object.sp_y_cloud1 {
    top: 5%;
    left: 50%;
}

.sec04_object.sp_y_cloud2 {
    top: 10%;
    left: 30%;
}

.sec04_object.sp_y_cloud3 {
    top: 8%;
    left: 70%;
}

.sec04_object.sp_y_rain {
    top: 8%;
    left: 46%;
}



/*>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec04_object {
        width: 15%;
        /*画面幅広げていくと大きくなりすぎるので最大幅を決める*/
        max-width: 20%;
    }

    .sec04_object.sun {
        top: 0%;
        left: 10%;
    }

    .sec04_object.sp_y_cloud1 {
        top: 5%;
        left: 50%;
    }

    .sec04_object.sp_y_cloud2 {
        top: 10%;
        left: 30%;
    }

    .sec04_object.sp_y_cloud3 {
        top: 8%;
        left: 70%;
    }

    .sec04_object.sp_y_rain {
        top: 8%;
        left: 46%;
    }


    .sec04_object.s_y_mountain {
        width: 40%;
        top: 12%;
        left: 60%;
    }

}

/*>>>>>>>>>>>>>>min-width:1500px>>>>>>>>>>>>*/
@media screen and (min-width:1500px) {
    .sec04_object.sp_y_river {
        width: 40%;
        top: 35%;
        left: 50%;
    }

    /*<<<<<<<<<<<<<min-width:1500px<<<<<<<<<<<<<*/
}

/*<<<<<<<<<<<<<min-width:1500px<<<<<<<<<<<<<*/

/*=======================================================================
おこめのおいしい食べ方sec04　ここまで
=========================================================================*/




/*=======================================================================
おこめのレシピ　sec05　ここから
=========================================================================*/
.sec05 {
    width: 100%;
    position: relative;
    background-image: url(../img/rice01.png), url(../img/rice04.png);
    background-repeat: repeat-y;
    background-size: 120px;
    background-position: 0 0, 100% 0;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;


}




/*レシピ領域の外箱*/
.sec05 .recipe_wrapper {
    /*sec02とsec03の間のセパレータの分だけ高さとる*/
    padding-top: 8rem;
    width: 100%;
    max-width: 1424px;
    position: relative;

}



/*>>>>>>>>>>>>min-width:790px>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec05 .recipe_wrapper {
        padding-top: 64px;
    }

    /*<<<<<<<<<<<min-width:790px<<<<<<<<<*/

    /*>>>>>>>>>>>>>>>>>min-width:1500px>>>>>>>>>>>>>>>>>*/
    @media screen and (min-width:1500px) {
        .sec05 .recipe_wrapper {
            padding-top: 88px;
        }
    }

    /*>>>>>>>>>>>>>>>>>min-width:1500px>>>>>>>>>>>>>>>>>*/
}

/*sec05領域のオブジェクト*/
.recipe_wrapper_obj {
    position: absolute;
}

.recipe_wrapper_obj img {
    width: 100%;
}

/*.sec04 .recipe_wrapperにrelative*/
.recipe_wrapper_obj_left {
    width: 16%;
    top: 4%;
    left: 11%;
}

/*.sec04 .recipe_wrapper .how_text_box_txnにrelative*/
.recipe_wrapper_obj_right {
    width: 11%;
    top: 3%;
    right: 14%;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {

    /*.sec04 .recipe_wrapperにrelative*/
    .recipe_wrapper_obj_left {
        width: 18%;
        top: 10%;
        left: 7%;
    }

    /*.sec04 .recipe_wrapper .how_text_box_txnにrelative*/
    .recipe_wrapper_obj_right {
        width: 12%;
        top: 6%;
        right: 10%;
    }

}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

/*レシピ領域のタイトル*/
.top_recipe_title {
    /*ラインナップ領域のタイトルの箱の設定*/
    text-align: center;
    margin-bottom: 32px;
}

/*レシピ領域のテキスト*/
.sec05 .top_recipe_text p {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
    background-color: rgb(247, 219, 78, 0.8);
}

/*>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec05 .top_recipe_text p {
        width: 50%;
    }

    /*<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<*/
}

/*レシピ3つの箱*/
.sec05 ul {
    /*銘柄のそれぞれの箱がli。その親の銘柄全体の箱がul。
    ul>liのリストマーカーを消す*/
    padding-left: 0px;
    list-style-type: none;

    margin-top: 64px;
    margin-bottom: 0;
    margin-left: 10px;
    margin-right: 10px;
}

/*>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec05 ul {
        display: flex;
        gap: 8px;
    }

    /*<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<*/
}

/*レシピの箱*/
.sec05 ul li {
    width: 95%;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    list-style: none;
    position: relative;
    /*.js-fade-in-upに対してフェードインの設定でhiddenをかけてるので表示*/
    overflow: visible;
    margin-top: 4rem;
    margin-bottom: 4rem;
    background-image: url(../img/recipe_bg_akita.png);
    /*１つ１つの銘柄の箱の枠線の設定
    外側にborderつけたいからcontent-boxにする*/
    box-sizing: border-box;
    border: 8px double #ffffff;
    background-color: #fff;
}

/*>>>>>>>>>>>>>>min-width:870px>>>>>>>>>>>>*/
@media screen and (min-width:870px) {
    .sec05 ul li {
        border: 8px dotted #fff;
        /*ulでひとかたまりにするのでそれぞれのmarginはいったんなくしておく*/
        margin-top: 0;
        margin-bottom: 0;
    }

}


/*<<<<<<<<<<<<<min-width:870px<<<<<<<<<<<<<*/



/*レシピ画像*/
.sec05 ul li .recipe_img_box {
    position: relative;
}

/*レシピタイトルの箱*/
.sec05 ul li .recipe_title {
    position: absolute;
    bottom: -72px;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    max-width: 180px;
    text-align: center
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec05 ul li .recipe_title {
        width: 58%;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/



/*レシピサブタイトル*/
.sec05 ul li .recipe_title .recipe_subtitle {
    font-size: 1.2rem;
    line-height: 1.5rem;
    border-bottom: 0.8px solid #ffffff;
    color: #fff;
    background-image: url(../img/recipe_gohan.png);
    background-size: 100%;
    background-repeat: no-repeat;
    padding-top: 36%;
}

/*レシピメインタイトル*/
.sec05 ul li .recipe_title .recipe_main_title {
    color: #fff;
    background-image: url(../img/recipe_chawan.png);
    background-size: 100%;
    background-repeat: no-repeat;
    padding-bottom: 29%;
}

.sec05 ul li .recipe_title .recipe_main_title h3 {
    padding-top: 1vw;
    font-size: clamp(14px, 1.5vw, 16px);
}

/*>>>>>>>>>>>>>>>min-width:1050px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1050px) {
    .sec05 ul li .recipe_title .recipe_main_title h3 {
        padding-top: 4px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1050px<<<<<<<<<<<<<<<*/


/*レシピの説明の箱*/
.sec05 ul li .recipe_detail_text {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 16px;
    position: relative;
    /*レシピの説明の箱の::beforeとパディングとおなじにする*/
    padding-top: 35%;
}

.sec05 ul li .recipe_detail_text::before {
    content: "";
    background-image: url(../img/recipe_hasi.png);
    width: 100%;
    /*レシピの説明の箱のパディングとおなじにする*/
    height: 35%;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .sec05 ul li .recipe_detail_text::before {
        /*レシピの説明の箱のパディングとおなじにする*/
        height: 38%;
        top: 19px;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:1120px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1120px) {
    .sec05 ul li .recipe_detail_text::before {
        /*レシピの説明の箱のパディングとおなじにする*/
        height: 31%;
        top: -8px;
        left: 0;
    }
}

/*<<<<<<<<<<<<<<<min-width:1120px<<<<<<<<<<<<<<<*/

.sec05 ul li .recipe_detail_text h3 {
    text-align: center;
}


.sec05 ul li .recipe_title p {
    /*画面幅に合わせて伸縮させる
    基本は画面幅の1.5％のサイズにする、
    けど、2.4remより大きくしない
    画面幅を広げていっても1.9remよりお大きくしない*/
    font-size: min(3.2vw, 14px);
}

/*>>>>>>>>>>>>>>>>>min-width:350px>>>>>>>>>>>>>>>>>*/
@media screen and (min-width:350px) {

    /*レシピサブタイトル*/
    .sec05 ul li .recipe_title .recipe_subtitle {
        line-height: 1.5rem;
        background-repeat: no-repeat;
        padding-top: 30%;
    }

    /*レシピメインタイトル*/
    .sec05 ul li .recipe_title .recipe_main_title {
        padding-bottom: 30%;
    }

    /*レシピの説明の箱*/
    .sec05 ul li .recipe_detail_text {
        width: 85%;
        padding-bottom: 16px;
        /*レシピの説明の箱の::beforeとパディングとおなじにする*/
        padding-top: 39%;
    }


}

/*>>>>>>>>>>>>>>>>>min-width:350px>>>>>>>>>>>>>>>>>*/



.sec05 .recipe_img_box {
    position: relative;
}

/*ロゴ 全体（いわてっこ）*/
.sec05 .recipe_box::before {
    background-image: url(../img/komelogo_iwateko.png);
    background-repeat: no-repeat;
    background-position: left;
    width: min(20%, 100px);
    /*画面幅広い場合80px以上にならない。画面幅狭い場合親に応じて縮む*/
    aspect-ratio: 1 / 1;
    /* ロゴ比率 */
    height: auto;
    background-size: contain;
    /*ロゴではcontainを使う。ロゴが切れるのを防ぐ*/
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-10px, -20px);
    z-index: 2;
}




/*ロゴ　ひとめぼれ*/
.recipe_box.riceball::before {
    background-image: url(../img/komelogo_hitomebore.png);
}

/*ロゴ　あきたこまち*/
.recipe_box.teisyoku::before {
    background-image: url(../img/komelogo_akita.png);
}


/*sec05のボタン*/
.sec05_btn {
    padding-top: 64px;
}








/*=======================================================================
おこめのレシピ　sec05　ここまで
=========================================================================*/




/*=======================================================================
スライダーここから
=========================================================================*/
/*スライダー領域の設定*/
.slider_content {
    width: 100%;
    position: relative;
    background-color: #fff;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 23vw;
    margin-bottom: 16vw;

}

.cloud_left {
    top: 0;
    left: 0;
}

.cloud_right {
    top: 0;
    right: 0;
}



.slider {
    /*max-width: 1540px;*/
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    background-size: contain;

    padding-top: 16px;
    padding-bottom: 16px;
    /*画面幅を縮めると横スクロールでるので*/
    overflow-x: hidden;
    position: relative;
    overflow-y: visible;

}

.slider_content::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: -100%;
    left: 0;
    background-image: url(../img/top_about_sec01sec02_spt.png), url(../img/gohan_yuge.png);
    background-repeat: no-repeat, repeat;
    background-size: 100%, 20%;
    z-index: -1;
    background-position: 0 100%, 0 0;

}


.slider_content::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    bottom: -100%;
    left: 0;
    background-image: url(../img/top_about_sec01sec02_spt_rv-02.png), url(../img/gohan_yuge.png);
    background-repeat: no-repeat, repeat;
    background-size: 100%, 20%;
    background-position: 0 0, 0 100%;

}

ul.slider {
    list-style: none;
    padding-left: 0;
    position: relative;
}


/*=======================================================================
スライダーここまで
=========================================================================*/



.footer_before_inq {
    margin-top: 32px;
    margin-bottom: 32px;
}



/*==============================================================
お知らせsec06　ここから
================================================================*/
.sec06 {
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;

    overflow-x: hidden;
    overflow-y: hidden;

}

.news_wrapper {
    width: 90%;
    margin-left: auto;
    margin-right: auto;

    overflow-x: hidden;
    overflow-y: hidden;

}

/*>>>>>>>>>>>>>>>min-width:490px>>>>>>>>>>>>>>>*/
@media screen and (min-width:490px) {
    .news_wrapper {
        width: 66%;
    }
}

/*<<<<<<<<<<<<<<<min-width:490px<<<<<<<<<<<<<<<*/

.news_box {
    /*お知らせのタイトルとテキストの箱を縦方向中央寄せにするためflex*/
    display: flex;
    align-items: center;
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    margin-top: 12vw;
    margin-bottom: 66px;
    padding-top: 32px;
    padding-left: 16px;
    padding-bottom: 32px;
    padding-right: 16px;
    background-color: rgb(255, 255, 255, 0.6);
    border-radius: 30px;
    border: #fff dotted 10px;
    position: relative;
}

/*>>>>>>>>>>>>>>>min-width:490px>>>>>>>>>>>>>>>*/
@media screen and (min-width:490px) {
    .news_box {
        margin-bottom: 6vw;
        padding-top: 66px;
        padding-left: 66px;
        padding-bottom: 66px;
        padding-right: 66px;
    }
}

/*<<<<<<<<<<<<<<<min-width:490px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:1040px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1040px) {
    .news_box {
        margin-top: 116px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1040px<<<<<<<<<<<<<<<*/

/*-------------newsのオブジェクトここから-----------------*/
.news_obj {
    position: absolute;
}

.news_obj img {
    width: 100%;
}



.news_obj.okome {
    width: 17%;
    max-width: 137px;
    top: 0;
    left: 5%;
    transform: translateY(-100%);
}

/*>>>>>>>>>>>>>>>min-width:490px>>>>>>>>>>>>>>>*/
@media screen and (min-width:490px) {
    .news_obj.okome {
        width: 10%;
    }
}

/*<<<<<<<<<<<<<<<min-width:490px<<<<<<<<<<<<<<<*/

/*-------------newsのオブジェクトここまで----------------*/


/*-------------newsのタイトルと記事のまとまりの箱ここから-----------------*/
.news_content {
    margin: 0px 32px 0px 32px;
    padding: 0px;
    width: 100%;
}

/*>>>>>>>>>>>>>>>min-width:1040px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1040px) {
    .news_content {
        display: flex;
        align-items: center;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 88px;
        justify-content: space-between;
    }
}

/*<<<<<<<<<<<<<<<min-width:1040px<<<<<<<<<<<<<<<*/
/*-------------newsのタイトルと記事のまとまりの箱ここまで-----------------*/


/*-------------newsのタイトルの設定ここから-----------------*/
.news_title {
    text-align: center;
    margin-bottom: 32px;
}

/*>>>>>>>>>>>>>>>min-width:490px>>>>>>>>>>>>>>>*/
@media screen and (min-width:490px) {
    .news_title {
        margin-bottom: 66px;
    }
}

/*<<<<<<<<<<<<<<<min-width:490px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:1040px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1040px) {
    .news_title {
        /*news_titleとnews_link pcを縦並びの中央揃えにするためにflex*/
        display: flex;
        flex-direction: column;
        align-items: center;
        /*spではflex boxの30％の幅;*/
        width: 38%;
        margin-bottom: 0;
    }
}

/*<<<<<<<<<<<<<<<min-width:1040px<<<<<<<<<<<<<<<*/
/*-------------newsのタイトルの設定ここまで-----------------*/


/*-------------一覧を見るの設定ここから-----------------*/
.news_link.sp {
    /*.news_link spanと.news_arrowを横並びにするためflex*/
    display: flex;
    align-items: center;
    margin-top: 32px;
}

.news_link.pc {
    display: none;
}

/*>>>>>>>>>>>>>>>min-width:490px>>>>>>>>>>>>>>>*/
@media screen and (min-width:490px) {
    .news_link.sp {
        margin-top: 66px;
    }
}

/*<<<<<<<<<<<<<<<min-width:490px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:1040px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1040px) {
    .news_link.sp {
        display: none;
    }

    .news_link.pc {
        /*.news_link spanと.news_arrowを横並びにするためflex*/
        display: flex;
        align-items: center;
        margin-top: 16px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1040px<<<<<<<<<<<<<<<*/
/*-------------一覧を見るの設定ここまで-----------------*/


/*-------------一覧を見るの矢印ここから-----------------*/
.news_arrow {
    position: relative;
    /*矢印を円の中心に配置するためflex*/
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #486d46;
    border-radius: 50%;
    margin-left: 24px;
    transition: 0.3s ease-in;
}

.news_title a:hover .news_arrow {
    transform: translateX(5px);
}


.news_arrow::before,
.news_arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 2px);
    width: 20px;
    height: 4px;
    border-radius: 9999px;
    background-color: #fff;
    transform-origin: calc(100% - 2px) 50%;
}

.news_arrow::before {
    transform: rotate(35.25deg);
}

.news_arrow::after {
    transform: rotate(-35.25deg);
}

/*-------------一覧を見るの矢印ここまで-----------------*/



/*newsの各項目のリンク*/
.news_item a {
    color: #303130;
    text-decoration: none;
    font-weight: 500;
}

/*>>>>>>>>>>>>>>>min-width:1040px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1040px) {

    /*newsの項目全体*/
    .news_item {
        width: 65%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1040px<<<<<<<<<<<<<<<*/


/*newsの各項目*/
.news_list {
    border-bottom: dotted 3px #486d46;
}

/*newsのカテゴリ*/
.news_category {
    border-bottom: 1px solid #486d46;
    border-left: 1px solid #486d46;
    border-radius: 128px;
    border-right: 1px solid #486d46;
    border-top: 1px solid #486d46;
    color: #486d46;
    font-family: var(--s-font-edb3ba26);
    font-size: 13px;
    font-weight: 700;
    margin: 0px 0px 0px 0px;
    padding: 3px 17px 4px 17px;
    max-width: 100%;
}

/*newsの各項目の日付とカテゴリのまとまり*/
.news_subheading {
    margin-top: 16px;
}

/*newsの各項目のテキスト*/
.news_item p {
    padding-top: 8px;
    padding-bottom: 16px;
}



/*==============================================================
お知らせsec06　ここまで
================================================================*/

/*お問い合わせボタン*/
.footer_before_inq .btn {
    border-radius: 10px;
    line-height: 98px;
    max-width: 400px;

}

/*=======================================================================
フッタ前のセパレータ　ここから
=========================================================================*/



/*フッターにはボタン要素がたくさんあるので、フッターをrelativeにして、中身のオブジェクトたちをabsoluteにして浮かせて配置しよとするとz-indexの関係で、aタグがおせなくなってしまう。何重にも浮かせていて、z-indexが複雑に絡み合うので、footerのなかにオブジェクトを入れるのではなく、footerの前のmain領域の下にセパレータとそのオブジェクト達を入れることにした。*/
.footer_before_space {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 48vw;


    /*中身のない領域全体を浮かせてるときは、一番上の層にきてしまうので、ナビゲーションがその領域の上に来ると.btnで設定してるナビゲーションボタンが押せない。ナビゲーションの下の層にいくようにする。*/

}

/*>>>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .footer_before_space {
        margin-top: 120px;
    }

}

/*>>>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>>>*/

/*⭐footerにposition：relative、その１つめの内箱にposition：absolute、さらにその内箱である２つめの内箱ににposition：relative、そしてオブジェクト達にposition：absoluteをかけて、画面幅が変わって位置を調整するときは、footerの１内箱のtopの位置を調整することでまとめて配置をちょうせいできるようにする。*/
.footer_obj_box {
    position: absolute;
    top: 0;
    left: 0;

    /*浮かせると幅と高さが無くなるので必ず設定する*/
    width: 100%;
    height: 48vw;
    background-image: url(../img/sec01_background_star1.png);
    background-repeat: repeat;
    background-size: 56%;
    background-position: 0 100%;

}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .footer_obj_box {
        background-size: 25%;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

/*オブジェクト達はこの内箱の位置を基準にして動かす。親の幅と高さになってるから、実質、footerの１つめの内箱の範囲が基準となる*/
.footer_obj_inner_box {
    position: relative;
    width: 100%;
    height: 240px;
    height: 48vw;


    /* 画像の高さに合わせて調整 */
    background-image: url("../img/footer.png");
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: auto 100%;
    /* 高さに合わせて拡大縮小 */

}

/*>>>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .footer_before_space {
        height: 48vw;
    }

    .footer_obj_box {
        height: 320px;
        height: 40vw;
    }

    .footer_obj_inner_box {
        height: 320px;
        height: 40vw;
    }
}

/*>>>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>>>*/

/*>>>>>>>>>>>>>>>>>min-width:1200px>>>>>>>>>>>>>>>>>*/
@media screen and (min-width:1200px) {
    .footer_before_space {
        height: 40vw;
        max-height: 648px;
    }

    .footer_obj_box {
        height: 648px;
        height: 40vw;
        max-height: 648px;
    }

    .footer_obj_inner_box {
        height: 648px;
        height: 40vw;
        max-height: 648px;
    }
}

/*>>>>>>>>>>>>>>>>>min-width:1200px>>>>>>>>>>>>>>>>>*/

.footer_obj img {
    width: 100%;
}

.footer_obj {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 15%;
}




.footer_obj.seisansya {
    width: 22%;
    max-width: 320px;
    bottom: 0;
    left: 42%;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {

    .footer_obj.seisansya {
        width: 13%;
        bottom: 50px;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

.footer_obj.seisansya_ine {
    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: seisansya_ine 3s steps(2, jump-start) infinite;
}

@keyframes seisansya_ine {

    /*アニメーション開始時*/
    0% {
        transform-origin: 45%;
        transform: skew(0deg) rotate(0deg);

    }

    20% {
        transform-origin: 45%;
        transform: skew(8deg) rotate(2deg);

    }

    30% {
        transform-origin: 45%;
        transform: skew(5deg) rotate(3deg);

    }

    40% {
        transform-origin: 45%;
        transform: skew(8deg) rotate(5deg);
    }

    50% {
        transform-origin: 45%;
        transform: skew(9deg) rotate(4deg);
    }

    60% {
        transform-origin: 45%;
        transform: skew(12deg) rotate(2deg);
    }

    70% {
        transform-origin: 45%;
        transform: skew(10deg) rotate(4deg);
    }

    80% {
        transform-origin: 45%;
        transform: skew(9deg) rotate(4deg);
    }

    90% {
        transform-origin: 45%;
        transform: skew(8deg) rotate(5deg);
    }

    100% {
        transform-origin: 45%;
        transform: skew(5deg) rotate(3deg);
    }

}



.footer_obj.ine {

    width: 8%;
    max-width: 80px;

    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: kv-ine1 1.7s linear alternate-reverse infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes kv-ine1 {

    /*アニメーション開始時*/
    0% {
        transform-origin: bottom center;
        transform: rotate(0deg);
    }

    /*アニメーション終了時*/
    100% {
        transform-origin: bottom center;
        transform: rotate(5deg);
    }

}



.footer_obj.ine1 {
    bottom: 0;
    left: 5%;
}

.footer_obj.ine2 {
    bottom: 0;
    left: 15%;
}

.footer_obj.ine3 {
    bottom: 0;
    left: 25%;
}

.footer_obj.ine4 {
    bottom: 0;
    left: 33%;
}

.footer_obj.ine5 {
    bottom: 0;
    left: 40%;
}

.footer_obj.ine6 {
    bottom: 0;
    left: 65%;
}

.footer_obj.ine7 {
    bottom: 0;
    left: 75%;
}

.footer_obj.ine8 {
    bottom: 0;
    left: 85%;
}


.footer_obj.insect {

    width: 2.8%;
    max-width: 60px;

    /*アニメーション　名前　1回の時間　イージング　再生法方向　ループ指定*/
    animation: footer_insect 1.7s steps(2, jump-start) infinite;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/

@keyframes footer_insect {

    /*アニメーション開始時*/
    0% {
        transform: translateY(3px);
    }

    /*アニメーション終了時*/
    100% {

        transform: translateY(-3px);
    }

}


.footer_obj.butterfly_left {
    top: 24%;
    left: 12%;
}

.footer_obj.butterfly_right {
    top: 24%;
    left: 86%;
}

.footer_obj.dragonfly_one_left {
    top: 41%;
    left: 9%;
}

.footer_obj.dragonfly_two_left {
    top: 33%;
    left: 24%;
}

.footer_obj.dragonfly_one_right {
    top: 41%;
    left: 89%;
}

.footer_obj.dragonfly_two_right {
    top: 33%;
    left: 74%;
}




/*>>>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .footer_obj_ta {
        position: absolute;

        left: 0;
        z-index: -2;

    }


}

/*=======================================================================
フッタ前のセパレータ　ここまで
=========================================================================*/



/*=======================================================================
フッター　ここから
=========================================================================*/
footer {
    position: relative;
    width: 100%;
    overflow-x: hidden;




}

/*フッターのまとまりの箱*/
.footer_content {
    max-width: 1920px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    padding-top: 80px;
    margin-bottom: 64px;

}

/*フッターセパレータ―*/
/*footer::before {
    position: absolute;
    content: "";
    height: 40%;
    width: 100%;
    top: 35%;
    left: 0;
    background-image: url(../img/separator_white-04.png);
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: -1;
}

/*>>>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>>>*/
/*@media screen and (min-width:790px) {
    footer::before {
        top: 45%
    }
}

/*>>>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>>>*/

.footer_inq {
    display: none;
}


.footer_logo {
    width: 25%;
    margin-left: auto;
    margin-right: auto;

}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .footer_logo {
        width: 50%;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

.footer_logo:hover {
    opacity: 0.8;
}

.address_box {
    color: #486d46;
    margin-top: 10vw;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.address_box .address {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .address_box {
        margin-top: 0;
        text-align: left;
        display: block;

    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/
small {
    text-align: center;
    color: #486d46;
}

.footer_content .address_box .address,
.footer_content .address_box .address_mail {
    padding-bottom: 16px;
    font-weight: 500;

}

.footer_content .footer_menu a {
    display: block;
    padding: 4px 0;
    color: #486d46;
    font-weight: 500;
}

.footer_menu {
    text-align: center;
    margin-top: 24px;
    margin-bottom: 24px;
}


.footer_menu a {
    text-decoration: underline;
    margin-left: auto;
    margin-right: auto;
}

small {
    display: block;
}


/*>>>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {


    .footer_content {
        max-width: 1200px;
        display: grid;
        /*グリッドの列は2列。等間隔で。*/
        grid-template-columns: repeat(3, 1fr);
        /*グリッド行は2行。中身の高さに合わせる。*/
        /*grid-template-rows: repeat(auto, auto);
        /*グリッドの列間の幅*/
        column-gap: 10%;
        /*子要素のfigureの行全体をコンテナ内で上辺に寄せて配置*/
        align-content: center;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        justify-content: left;
        align-items: start;
        padding-top: 64px;
        z-index: 100;

    }


    /*1つ目の画像と説明文のfigureの箱の位置*/
    .footer_content :nth-child(1) {
        /*列は1本目と2本目の間*/
        grid-column: 1/2;
        /*行は1本目と2本目の間に入れる*/
        grid-row: 1/2;
    }

    /*3つ目の画像と説明文のfigureの箱の位置*/
    .footer_content :nth-child(3) {
        /*列は1本目と2本目の間*/
        grid-column: 3/4;
        /*行は1本目と2本目の間に入れる*/
        grid-row: 1/2;
    }

    .footer_logo {
        width: 100%;
        margin-top: 0;

    }


    .address_box {
        text-align-last: left;
    }

    .footer_content .footer_logo {
        width: 54%;
    }

    .footer_menu {
        text-align: left;
        margin-top: 0;
        margin-bottom: 0;
    }

    .footer_menu a {
        text-decoration: none
    }

    .footer_inq {
        display: block;
    }

    .footer_inq a {
        margin-left: 0;
    }

    small {
        padding: 8px 0;
    }
}

/*>>>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>>>*/

/*=======================================================================
フッター　ここまで
=========================================================================*/




/*==============================================================
/*==============================================================
　　↓↓↓　aboutページここから　↓↓↓
================================================================
================================================================*/

/*トップページでは最大幅を1920pxにしていて、下層ページでは最大幅を1450pxにするので
ロゴがはみ出さないようにヘッダーも1450pxにする*/
#about header,
#product-infomation header,
#recipe header,
#inquily header,
#way-to-eat header {
    max-width: 1450px;
}



/*>>>>>>>>>>>>>>>min-width:1029px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1029px) {

    #about nav,
    #product-infomation nav,
    #recipe nav,
    #inquily nav,
    #way-to-eat nav {
        position: relative;
        max-width: 1980px;
    }

    #about nav ul,
    #product-infomation nav ul,
    #recipe nav ul,
    #inquily nav ul,
    #way-to-eat nav ul {
        margin-top: 40px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1029px<<<<<<<<<<<<<<<*/


.under_title {
    /*height: 800px;*/
    background-image: url(../img/under_title_background_img_c.png);
    background-size: 120% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    width: 100%;
    /*max-width: 1450px;*/
    max-height: 960px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 48px;
    padding-bottom: 88px;
}

/*>>>>>>>>>>>>>>>min-width:1020px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1020px) {

    .under_title {
        background-image: url(../img/under_title_background_img.png);
        background-size: cover;
        padding-top: 15%;
        padding-bottom: 18%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1020px<<<<<<<<<<<<<<<*/

.under_title_box {
    position: relative;
}


.under_title_box h2 {
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: min(5vw, 2.8rem);
}

.under_title_obj {
    position: absolute;
}

.under_title_obj img {
    width: 100%;
}

.under_title_obj.background_img {
    width: 45%;

}

/*
.under_title_obj.rice_picture_left {
    width: 18%;
    top: 35%;
    transform: translateY(-50%);
    left: 2%;
}

.under_title_obj.rice_picture_right {
    width: 18%;
    top: 35%;
    transform: translateY(-50%);
    right: 2%;
}
*/

.under_title_obj.rice_picture_white_left {
    width: 13%;
    bottom: 40%;
    left: 8%;
}

.under_title_obj.rice_picture_white_right {
    width: 13%;
    bottom: 40%;
    right: 8%;
}

.under_title_obj.ine_all {
    width: 7%;
}

.under_title_obj.ine01 {
    bottom: 3%;
    left: 22%;
}

.under_title_obj.ine02 {
    bottom: 0;
    left: 29%;
}

.under_title_obj.ine03 {
    bottom: 1%;
    left: 67%;
}

.under_title_obj.ine04 {
    bottom: 0;
    left: 75%;
}

.under_title_obj.mountain {
    width: 20%;
    bottom: 0;
    right: 0;
}

.under_title_obj.separator {
    width: 100%;
    bottom: 0;
    left: 0;
}

.under_title_obj.sun {
    width: 10%;
    bottom: 13%;
    right: 11%;
}

.under-title-bottom {
    height: 10vw;
    background-image: url(../img/separator_white-02_bottom.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.under-section-top-img {
    max-width: 1450px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}


.under-section-top-img::before {
    content: "";
    width: 41%;
    height: 55%;
    position: absolute;
    background-image: url(../img/product_page_subtitle_top.png);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-size: contain;
    background-repeat: no-repeat;
}



.about_page_wrapper {
    background-image: url(../img/sec01_background_star1.png);
    background-size: 60%;
    background-position: 0 0;
    background-repeat: repeat;
    background-blend-mode: lighten;
    background-color: rgb(247, 219, 78, 0.2);

}

.about_page_sec01 {
    max-width: 1450px;

    background-image: linear-gradient(#ffffff, #ffffff 91%, #f7db4e);
    display: flex;
    flex-flow: column;
    vertical-align: middle;
    padding-bottom: 10%;
    position: relative;
}

.sec01_title {
    text-align: center;
    padding-top: 10%;
}

.about_page_sec01_box {
    position: relative;
    padding-top: 8%;
}

.about_page_sec01_img {
    display: flex;
    justify-content: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.about_page_sec01_img img {
    border-radius: 30px;
}

.about_page_sec01_box_obj {
    position: absolute;
}

.about_page_sec01_box_obj img {
    width: 100%;
}

.about_page_sec01_box_obj.ine01 {
    width: 7%;
    top: -2%;
    left: 28%;
}

.about_page_sec01_box_obj.ine02 {
    width: 7%;
    top: -2%;
    left: 35%;
}

.about_page_sec01_text {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10%;
    font-weight: 500;
}

/*>>>>>>>>>>>>>>>min-width:1020px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1020px) {
    .about_page_sec01_text {
        width: 50%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1020px<<<<<<<<<<<<<<<*/


.about_page_sec01_text p {
    margin-bottom: 32px;
    font-size: clamp(13px, 1.55vw, 17px);
    font-weight: 500;
}

.about_page_sec01_text:last-child {
    padding-bottom: 15%;
}

.about_page_sec01_separator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.about_page_sec02 {
    padding-top: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f7db4e;
}

/*>>>>>>>>>>>>>>>min-width:1020px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1020px) {
    .about_page_sec02 {
        max-width: 1450px;
        flex-direction: row;
        gap: 7%;

        align-items: center;
    }
}

/*<<<<<<<<<<<<<<<min-width:1020px<<<<<<<<<<<<<<<*/


.about_page_sec02_text {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    padding: 32px;
    border-top: 8px dotted #fff;
    border-bottom: 8px dotted #fff;
    background-color: rgb(255, 255, 255, 0.3);
    font-weight: 500;
}

/*>>>>>>>>>>>>>>>min-width:1020px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1020px) {
    .about_page_sec02_text {
        flex: 1;
        margin-top: 0;
    }
}

/*<<<<<<<<<<<<<<<min-width:1020px<<<<<<<<<<<<<<<*/

.about_page_sec02_text p {
    margin-bottom: 32px;
    font-size: clamp(13px, 1.55vw, 17px);
    font-weight: 500;
}


/*>>>>>>>>>>>>>>>min-width:1020px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1020px) {
    .about_page_sec02_img {
        flex: 0 0 45%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1020px<<<<<<<<<<<<<<<*/
.about_page_sec02_img img {
    border-radius: 30px;
}

#about .footer_before_inq,
#product-infomation .footer_before_inq,
#recipe .footer_before_inq,
#inquily .footer_before_inq,
#way-to-eat .footer_before_inq {
    margin-top: 16px;
    text-align-last: auto;
}


#about .footer_obj_inner_box,

#recipe .footer_obj_inner_box,
#inquily .footer_obj_inner_box,
#way-to-eat .footer_obj_inner_box {
    height: 36vw;
}

#about .footer_content,
#product-infomation .footer_content,
#recipe .footer_content,
#inquily .footer_content,
#way-to-eat .footer_content {
    padding-top: 26px;
}

#about .footer_before_inq .btn,
#product-infomation .footer_before_inq .btn,
#recipe .footer_before_inq .btn,
#inquily .footer_before_inq .btn,
#way-to-eat .footer_before_inq .btn {
    line-height: 72px;
    width: 75%;
    font-size: clamp(14px, 1.5vw, 16px);
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {

    #about .footer_before_inq .btn,
    #product-infomation .footer_before_inq .btn,
    #recipe .footer_before_inq .btn,
    #inquily .footer_before_inq .btn,
    #way-to-eat .footer_before_inq .btn {
        width: 109%;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

#about .footer_menu,
#product-infomation .footer_menu,
#recipe .footer_menu,
#inquily .footer_menu,
#way-to-eat .footer_menu {
    margin-top: 14vw;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {

    #about .footer_menu,
    #product-infomation .footer_menu,
    #recipe .footer_menu,
    #inquily .footer_menu,
    #way-to-eat .footer_menu {
        margin-top: 0;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:490px>>>>>>>>>>>>>>>*/
@media screen and (min-width:490px) {

    #about .footer_before_inq,
    #product-infomation .footer_before_inq,
    #recipe .footer_before_inq,
    #inquily .footer_before_inq,
    #way-to-eat .footer_before_inq {
        margin-top: 40px;
    }
}

/*<<<<<<<<<<<<<<<min-width:490px<<<<<<<<<<<<<<<*/


/*==============================================================
/*==============================================================
　　↑↑↑　aboutページここまで　↑↑↑
================================================================
================================================================*/




/*==============================================================
/*==============================================================
　　↓↓↓　productページここから　↓↓↓
================================================================
================================================================*/
/*ーーーーーーーーーーーーーーーーproductページ全体ーーーーーーーーーーーーーーーー*/
.product_page_wrapper {
    max-width: 1450px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    padding-top: 32px;
}

#product-infomation .under-section-top-img::before {
    background-image: none;
}

/*ーーーーーーーーーーーーーーーーproductページサブタイトルーーーーーーーーーーーーーーーー*/
.product_page_wrapper .product_page_subtitle {
    position: relative;
    text-align: center;
    margin-bottom: 56px;
    color: #486d46;
}

.product_page_wrapper .product_page_subtitle_box {
    background-color: #fff;
    position: relative;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 21%;
}

/*ーーーーーーーーーーーーーーーーproductページサブタイトル文字ーーーーーーーーーーーーーーーー*/
.product_page_wrapper .product_page_subtitle_text {
    text-align: center;
}

.product_page_wrapper .product_page_subtitle_text p {
    font-weight: 500;
}

/*>>>>>>>>>>>>>>>min-width:875px>>>>>>>>>>>>>>>*/
@media screen and (min-width:875px) {
    .product_page_wrapper .product_page_subtitle_text p {
        display: inline;
    }
}

/*<<<<<<<<<<<<<<<min-width:875px<<<<<<<<<<<<<<<*/

.product_page_wrapper .prooduct_page_subtitle_img {
    position: absolute;
}

.product_page_wrapper .prooduct_page_subtitle_img img {
    width: 100%;
}

.product_page_wrapper .prooduct_page_subtitle_img.top {
    width: 65%;
    top: -17%;
    left: 50%;
    transform: translateX(-50%);
}

.product_page_wrapper .prooduct_page_subtitle_img.bottom {
    width: 65%;
    top: 105%;
    left: 50%;
    transform: translateX(-50%);
}

/*>>>>>>>>>>>>>>>min-width:540px>>>>>>>>>>>>>>>*/
@media screen and (min-width:540px) {
    .product_page_wrapper .prooduct_page_subtitle_img.top {
        width: 45%;
        top: -17%;
        left: 50%;
        transform: translateX(-50%);
    }

    .product_page_wrapper .prooduct_page_subtitle_img.bottom {
        width: 45%;
        top: 105%;
        left: 50%;
        transform: translateX(-50%);
    }
}

/*<<<<<<<<<<<<<<<min-width:540px<<<<<<<<<<<<<<<*/



/*>>>>>>>>>>>>>>>min-width:1020px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1020px) {
    .product_page_wrapper .prooduct_page_subtitle_img.top {
        width: 30%;
        top: -17%;
        left: 50%;
        transform: translateX(-50%);
    }

    .product_page_wrapper .prooduct_page_subtitle_img.bottom {
        width: 30%;
        top: 95%;
        left: 50%;
        transform: translateX(-50%);
    }
}

/*<<<<<<<<<<<<<<<min-width:1020px<<<<<<<<<<<<<<<*/



/*ーーーーーーーーーーーーーーーーproductページサブタイトルオブジェクトーーーーーーーーーーーーーーーー*/
.product_page_wrapper .product_page_subtitle_obj {
    position: absolute;
}


.product_page_wrapper .product_page_subtitle_obj img {
    width: 100%;
}

/*画面幅狭いときはオブジェクトを減らす*/
.product_page_wrapper .product_page_subtitle_obj.back {
    display: none;
}

.product_page_wrapper .product_page_subtitle_obj.left_obj {
    width: 25%;
    left: -6vw;
    top: 5vw;
}

.product_page_wrapper .product_page_subtitle_obj.right_obj {
    width: 25%;
    right: -4vw;
    top: 5vw;
}

/*>>>>>>>>>>>>>>>min-width:1020px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1020px) {

    .product_page_wrapper .product_page_subtitle_obj.back {
        display: block;
    }

    .product_page_wrapper .product_page_subtitle_obj.left_obj {
        width: 17%;
        left: 4vw;
        top: 4vw;
    }

    .product_page_wrapper .product_page_subtitle_obj.left_01_obj {
        width: 16%;
        left: -4vw;
        top: 7vw;
    }

    .product_page_wrapper .product_page_subtitle_obj.left_02_obj {
        width: 13%;
        left: 10vw;
        top: 8vw;
    }

    .product_page_wrapper .product_page_subtitle_obj.right_obj {
        width: 16%;
        right: 0%;
        top: 5vw;
    }

    .product_page_wrapper .product_page_subtitle_obj.right_01_obj {
        width: 13%;
        right: -5vw;
        top: 8vw;
    }

    .product_page_wrapper .product_page_subtitle_obj.right_02_obj {
        width: 16%;
        right: 8vw;
        top: 9vw;
    }


}

/*<<<<<<<<<<<<<<<min-width:1020px<<<<<<<<<<<<<<<*/


/*>>>>>>>>>>>>>>>min-width:1450px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1450px) {



    .product_page_wrapper .product_page_subtitle_obj.left_obj {
        width: 17%;
        left: 4%;
        top: 33%;
    }

    .product_page_wrapper .product_page_subtitle_obj.left_01_obj {
        width: 16%;
        left: -5%;
        top: 80%;
    }

    .product_page_wrapper .product_page_subtitle_obj.left_02_obj {
        width: 13%;
        left: 12%;
        top: 79%;
    }

    .product_page_wrapper .product_page_subtitle_obj.right_obj {
        width: 16%;
        right: 0%;
        top: 50%;
    }

    .product_page_wrapper .product_page_subtitle_obj.right_01_obj {
        width: 13%;
        right: -7%;
        top: 101%;
    }

    .product_page_wrapper .product_page_subtitle_obj.right_02_obj {
        width: 16%;
        right: 12%;
        top: 112%;
    }

}

/*<<<<<<<<<<<<<<<min-width:1450px<<<<<<<<<<<<<<<*/




.product_page_wrapper .product_page_brand_box {
    position: relative;
}

.product_page_wrapper .product_page_subtitle_separator {
    position: relative;
}

.product_page_wrapper .product_page_brand_box .brand_name_obj.girl {
    width: 13%;
    position: absolute;
    top: -8vw;
    left: 40vw;
}

/*>>>>>>>>>>>>>>>min-width:1450px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1450px) {
    .product_page_wrapper .product_page_brand_box .brand_name_obj.girl {
        top: -4%;
        left: 43%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1450px<<<<<<<<<<<<<<<*/

.product_page_wrapper ul.product_page_brand {
    position: relative;
    padding: 0;
}

.product_page_wrapper ul.product_page_brand li {
    list-style: none;
}



.product_page_wrapper ul.product_page_brand li.brand_box {
    padding-top: 12%;
}


.product_page_wrapper ul.product_page_brand li.brand_box.aki {
    background-color: #F9F2DF;
}


.product_page_wrapper ul.product_page_brand li.brand_box.aki::before {
    display: none;
}

.product_page_wrapper ul li {
    position: relative;
}

.product_page_wrapper ul li .brand_page_brand_name_img {
    display: block;
    position: absolute;
    width: 35%;
    top: -3vw;
    left: 50%;
    transform: translateX(-50%);
}

/*>>>>>>>>>>>>>>>min-width:1450px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1450px) {
    .product_page_wrapper ul li .brand_page_brand_name_img {
        top: -32px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1450px<<<<<<<<<<<<<<<*/

.product_page_wrapper ul li .brand_title .brand_name::after {
    z-index: 1;
}

.product_page_wrapper ul.product_page_brand li .brand_box_grid {
    text-align: center;
    overflow: visible;
}

/*>>>>>>>>>>>>>>>min-width:1020px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1020px) {
    .product_page_wrapper ul.product_page_brand li .brand_box_grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 32px;
        padding-left: 32px;
        padding-right: 32px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
}

/*<<<<<<<<<<<<<<<min-width:1020px<<<<<<<<<<<<<<<*/


.product_page_wrapper ul.product_page_brand li.aki .brand_img_box::before {

    background-image: url(../img/komelogo_akita_logo_white.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 40vw;
    height: 40vw;
    display: block;
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    filter: drop-shadow(-1px 3px 4px rgba(0, 0, 0, 0.4));
    z-index: 1;
}

/*>>>>>>>>>>>>>>>min-width:370px>>>>>>>>>>>>>>>*/
@media screen and (min-width:370px) {
    .product_page_wrapper ul.product_page_brand li.aki .brand_img_box::before {
        width: 160px;
        height: 160px;
    }
}

/*<<<<<<<<<<<<<<<min-width:370px<<<<<<<<<<<<<<<*/
.product_page_wrapper ul.product_page_brand li .brand_img_box {
    display: inline-block;
}

/*>>>>>>>>>>>>>>>min-width:1020px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1020px) {
    .product_page_wrapper ul.product_page_brand li .brand_img_box {
        width: 100%;
        max-width: 540px;
    }

    .product_page_wrapper ul.product_page_brand li .brand_img_box img {
        width: 100%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1020px<<<<<<<<<<<<<<<*/




/*==============================================================*/
.brand_img_box {
    position: relative;
}

.brand_img_quality {
    position: absolute;
    border-radius: 50%;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    text-align: center;
    width: 80px;
    height: 80px;
    font-weight: 600;
    color: #fff;
}

.brand_box.aki .brand_img_quality {
    background: radial-gradient(circle at center,
            rgba(230, 205, 90, 0.9) 0%,
            rgba(211, 186, 60, 0.8) 80%);
}

.brand_box.iwa .brand_img_quality {
    background: radial-gradient(circle at center,
            rgba(189, 148, 115, 0.9) 0%,
            rgba(171, 133, 102, 0.8) 80%);

}

.brand_box.hito .brand_img_quality {
    background: radial-gradient(circle at center,
            rgba(184, 201, 135, 0.9) 0%,
            rgba(143, 157, 102, 0.8) 80%);

}

.brand_img_quality.one {
    width: 20vw;
    height: 20vw;
    top: -7%;
    left: 13%;
    line-height: 20vw;
    z-index: 3;
    font-size: 4vw;
}

.brand_img_quality.two {
    width: 20vw;
    height: 20vw;
    top: 14%;
    left: 16%;
    line-height: 20vw;
    z-index: 1;
    font-size: 4vw;
}

.brand_img_quality.three {
    width: 20vw;
    height: 20vw;
    top: 6%;
    left: 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    font-size: 4vw;
}

/*>>>>>>>>>>>>>>>min-width:370px>>>>>>>>>>>>>>>*/
@media screen and (min-width:370px) {
    .brand_img_quality.one {
        width: 80px;
        height: 80px;
        line-height: 80px;
        font-size: 16px;
    }

    .brand_img_quality.two {
        width: 80px;
        height: 80px;
        line-height: 80px;
        font-size: 16px;
    }

    .brand_img_quality.three {
        width: 80px;
        height: 80px;
        line-height: 80px;
        font-size: 16px;
    }
}

/*<<<<<<<<<<<<<<<min-width:370px<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:1020px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1020px) {
    .brand_img_quality.one {
        top: -7%;
        left: 10%;
    }

    .brand_img_quality.two {
        top: 14%;
        left: 12%;
    }

    .brand_img_quality.three {
        top: 6%;
        left: -4%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1020px<<<<<<<<<<<<<<<*/




.brand_img_quality.three span {
    text-align: center;
    line-height: 1.2;
}

/*================================================================*/
.product_page_wrapper ul.product_page_brand li .brand_title {
    bottom: 75%;
    right: 4%;
    width: 40%;
    background-color: rgba(211, 186, 60, 0.8);
}

/*>>>>>>>>>>>>>>>min-width:470px>>>>>>>>>>>>>>>*/
@media screen and (min-width:470px) {
    .product_page_wrapper ul.product_page_brand li .brand_title {
        bottom: 80%;
    }
}

/*<<<<<<<<<<<<<<<min-width:470px<<<<<<<<<<<<<<<*/
.product_page_wrapper ul.product_page_brand li .brand_detail_text h3 {
    text-align: center;
    border-bottom: solid 16px #d3ba3cab;
    margin-bottom: 16px;
    border-top: solid 16px #d3ba3cab;
}

.product_page_wrapper ul.product_page_brand li .brand_detail_text p {
    font-weight: 500;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/*>>>>>>>>>>>>>>>min-width:1020px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1020px) {
    .product_page_wrapper ul.product_page_brand li .brand_detail_text p {
        width: 100%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1020px<<<<<<<<<<<<<<<*/

.product_page_wrapper ul.product_page_brand li .brand_subtext_box {
    background-color: rgba(211, 186, 60, 1);
    border-radius: 30px;
    border: #b18f5f double 3.5px;
    padding: 24px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    max-width: 564px;
}

/*>>>>>>>>>>>>>>>min-width:1020px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1020px) {
    .product_page_wrapper ul.product_page_brand li .brand_subtext_box {
        width: 100%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1020px<<<<<<<<<<<<<<<*/


.product_page_wrapper ul.product_page_brand li .brand_subtext {
    padding-bottom: 24px;
    text-align: left;
}

/*>>>>>>>>>>>>>>>min-width:610px>>>>>>>>>>>>>>>*/
@media screen and (min-width:610px) {
    .product_page_wrapper ul.product_page_brand li .brand_subtext {
        text-align: center;
    }
}

/*<<<<<<<<<<<<<<<min-width:610px<<<<<<<<<<<<<<<*/

.product_page_wrapper ul.product_page_brand li .brand_subtext p {
    color: #fff;
    font-weight: 600;
    display: inline;
}

/*>>>>>>>>>>>>>>>min-width:610px>>>>>>>>>>>>>>>*/
@media screen and (min-width:610px) {
    .product_page_wrapper ul.product_page_brand li .brand_subtext p {
        color: #fff;
        font-weight: 600;
        display: block;
    }
}

/*<<<<<<<<<<<<<<<min-width:610px<<<<<<<<<<<<<<<*/

.product_page_wrapper ul.product_page_brand li .brand_level_box {
    display: block;
    justify-content: center;
    align-items: center;
    gap: 22px;
}

/*>>>>>>>>>>>>>>>min-width:610px>>>>>>>>>>>>>>>*/
@media screen and (min-width:610px) {
    .product_page_wrapper ul.product_page_brand li .brand_level_box {
        display: flex;
    }
}

/*<<<<<<<<<<<<<<<min-width:610px<<<<<<<<<<<<<<<*/

.product_page_wrapper ul.product_page_brand li .brand_recomend {
    display: flex;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: clamp(13px, 1.2vw, 15px);
    white-space: nowrap;
    padding-bottom: 24px;
    justify-content: center;

}

/*>>>>>>>>>>>>>>>min-width:610px>>>>>>>>>>>>>>>*/
@media screen and (min-width:610px) {
    .product_page_wrapper ul.product_page_brand li .brand_recomend {
        display: block;
        padding-bottom: 0;
    }
}

/*<<<<<<<<<<<<<<<min-width:610px<<<<<<<<<<<<<<<*/

.product_page_wrapper ul.product_page_brand li .brand_recomend p:first-child {
    padding-left: 24px;
    padding-right: 24px;
    line-height: 24px;
    border-right: #fff solid 1px;
}

/*>>>>>>>>>>>>>>>min-width:610px>>>>>>>>>>>>>>>*/
@media screen and (min-width:610px) {
    .product_page_wrapper ul.product_page_brand li .brand_recomend p:first-child {
        border-bottom: #fff solid 1px;
        border-right: none;
        padding-bottom: 16px;
        padding-left: 24px;
        padding-right: 24px;
        line-height: 24px;
    }
}

/*<<<<<<<<<<<<<<<min-width:610px<<<<<<<<<<<<<<<*/

.product_page_wrapper ul.product_page_brand li .brand_recomend p:last-child {
    padding-left: 16px;
    padding-right: 16px;
    line-height: 24px;
    display: inline;
}

/*>>>>>>>>>>>>>>>min-width:610px>>>>>>>>>>>>>>>*/
@media screen and (min-width:610px) {
    .product_page_wrapper ul.product_page_brand li .brand_recomend p:last-child {
        padding-left: 0;
        padding-right: 0;
        padding-top: 16px;
        line-height: 24px;
    }
}

/*<<<<<<<<<<<<<<<min-width:610px<<<<<<<<<<<<<<<*/

.product_page_wrapper ul.product_page_brand li .brand_level {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    padding: 16px;
    border-radius: 20px;
    border: #fff solid 4px;
    background-color: rgba(211, 186, 60, 1);
    text-align: center;
}

/*>>>>>>>>>>>>>>>min-width:500px>>>>>>>>>>>>>>>*/
@media screen and (min-width:500px) {
    .product_page_wrapper ul.product_page_brand li .brand_level {
        width: 73%;
    }
}

/*<<<<<<<<<<<<<<<min-width:500px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:1020px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1020px) {
    .product_page_wrapper ul.product_page_brand li .brand_level {
        width: 55%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1020px<<<<<<<<<<<<<<<*/

.product_page_wrapper .product_btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.product_page_wrapper .news_arrow {
    width: 30px;
    height: 30px;
    background-color: #fff;
    margin-left: 0;
    margin-right: 32px;
}

.brand_box a:hover .news_arrow {
    transform: translateX(8px);
}

.product_page_wrapper .news_arrow::before,
.product_page_wrapper .news_arrow::after {
    width: 15px;
    height: 4px;
    background-color: #ab3220;
}

.product_page_wrapper a {
    width: 90%;
    padding-top: 16px;
    padding-bottom: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background-color: #ab3220;
    color: #fff;
    font-weight: 600;
    margin-left: auto;
    margin-right: auto;
    border: solid 1px #fff;
    box-sizing: border-box;
    margin-top: 72px;
    margin-bottom: 10%;
}

/*ーーーーーーーーーーーーーーーー商品へボタンの演出ーーーーーーーーーーーーーーーー*/
.product_page_wrapper a {
    transition:
        background-color .3s,
        transform .3s,
        box-shadow .3s;
}

.product_page_wrapper a:hover {
    opacity: 0.8;
    transform: translateY(-2px);
    box-shadow: 0 8px 10px rgba(0, 0, 0, .25);
}

/*ーーーーーーーーーーーーーーーーいわてっこーーーーーーーーーーーーーーーー*/
.product_page_wrapper ul.product_page_brand li.brand_box.iwa {
    background-color: #fbf1ec;
}

.product_page_wrapper ul.product_page_brand li.brand_box.iwa::before {
    display: none;
}

.product_page_wrapper ul.product_page_brand li.iwa .brand_img_box::before {

    background-image: url(../img/komelogo_iwate_logo_white.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 40vw;
    height: 40vw;
    display: block;
    content: "";
    position: absolute;
    top: 6px;
    left: 13px;
    filter: drop-shadow(-1px 3px 4px rgba(0, 0, 0, 0.4));
    z-index: 1;
}

/*>>>>>>>>>>>>>>>min-width:370px>>>>>>>>>>>>>>>*/
@media screen and (min-width:370px) {
    .product_page_wrapper ul.product_page_brand li.iwa .brand_img_box::before {
        width: 173px;
        height: 173px;
    }
}

/*<<<<<<<<<<<<<<<min-width:370px<<<<<<<<<<<<<<<*/
.product_page_wrapper ul.product_page_brand li.iwa .brand_title {
    background-color: rgba(158, 101, 55, 0.8);
}

.product_page_wrapper ul.product_page_brand li.iwa .brand_detail_text h3 {
    border-bottom: solid 16px #9E6537ab;
    border-top: solid 16px #9E6537ab;
}

.product_page_wrapper ul.product_page_brand li.iwa .brand_subtext_box {
    background-color: #B0815A;
    border: #886d46 double 3.5px;
}

.product_page_wrapper ul.product_page_brand li.iwa .brand_level {
    background-color: #B0815A;
}



.product_page_wrapper ul.product_page_brand li.brand_box.hito {
    background-color: #f9fae3;
    padding-bottom: 5%;
}

.product_page_wrapper ul.product_page_brand li.brand_box.hito::before {
    display: none;
}

.product_page_wrapper ul.product_page_brand li.hito .brand_img_box::before {

    background-image: url(../img/komelogo_hitomebore_logo_white.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 40vw;
    height: 40vw;
    display: block;
    content: "";
    position: absolute;
    top: -10px;
    left: -2px;
    filter: drop-shadow(-1px 3px 4px rgba(0, 0, 0, 0.4));
    z-index: 1;
}

/*>>>>>>>>>>>>>>>min-width:370px>>>>>>>>>>>>>>>*/
@media screen and (min-width:370px) {
    .product_page_wrapper ul.product_page_brand li.hito .brand_img_box::before {
        width: 153px;
        height: 153px;
    }
}

/*<<<<<<<<<<<<<<<min-width:370px<<<<<<<<<<<<<<<*/

.product_page_wrapper ul.product_page_brand li.hito .brand_title {
    background-color: rgba(127, 158, 55, 0.8);
}

.product_page_wrapper ul.product_page_brand li.hito .brand_detail_text h3 {
    border-bottom: solid 16px #98B059ab;
    border-top: solid 16px #98B059ab;
}

.product_page_wrapper ul.product_page_brand li.hito .brand_subtext_box {
    background-color: #98B059;
    border: #798c47 double 3.5px;
}

.product_page_wrapper ul.product_page_brand li.hito .brand_level {
    background-color: #98B059;
}


.product_page_wrapper ul.product_page_brand li.hito .product_page_sec01_separator {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -6vw;

}

/*>>>>>>>>>>>>>>>min-width:1450px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1450px) {
    .product_page_wrapper ul.product_page_brand li.hito .product_page_sec01_separator {
        bottom: -86px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1450px<<<<<<<<<<<<<<<*/

.product_page_wrapper ul.product_page_brand li.hito .product_page_sec01_separator img {
    width: 100%;

}

#product-infomation .footer_obj_inner_box {
    z-index: 1;
    height: 30vw;
    max-height: 590px;
    margin-top: 160px;
}

#product-infomation .footer_content {
    padding-top: 0;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    #product-infomation .footer_content {
        padding-top: 20%;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:1920px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1920px) {
    #product-infomation .footer_content {
        padding-top: 264px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1920px<<<<<<<<<<<<<<<*/

#product-infomation .footer_obj_box {
    height: 37vw;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    #product-infomation .footer_obj_box {
        height: 24vw;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:1200px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1200px) {
    #product-infomation .footer_obj_box {
        height: 30vw;
        max-height: 313px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1200px<<<<<<<<<<<<<<<*/

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    #product-infomation .footer_before_space {
        height: 20svw;
        margin-top: 0;
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

#product-infomation main {
    margin-bottom: 80px;
}

/*==============================================================
/*==============================================================
　　↑↑↑　productページここまで　↑↑↑
================================================================
================================================================*/




/*==============================================================
/*==============================================================
　　↓↓↓　way to eatページこここから　↓↓↓
================================================================
================================================================*/
.way-to-eat-page_wrapper p {
    font-weight: 500;
}

.way-to-eat-page_wrapper .under_title_box h2 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.way-to-eat-page_wrapper .sec01_container {
    background-color: #fff;
    max-width: 1450px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-image: url(../img/kumo_yellow.png), url(../img/kumo_yellow.png), url(../img/kumo_yellow.png), url(../img/kumo_yellow.png);
    background-position: -10% 0%, -10% 100%, 110% 0%, 110%55%;
    background-repeat: no-repeat;
    background-size: 30%, 40%, 30%, 40%;
}

.way-to-eat-page_wrapper .subtitle_box {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
}

.way-to-eat-page_wrapper .sec01_container .subtitle_box {
    margin-bottom: 32px;
}


/*>>>>>>>>>>>>>>>min-width:640px>>>>>>>>>>>>>>>*/
@media screen and (min-width:640px) {
    .way-to-eat-page_wrapper .sec01_container .subtitle_box {
        width: 70%;
    }
}

/*<<<<<<<<<<<<<<<min-width:640px<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:1240px>>>>>>>>>>>>>>>*/
/*@media screen and (min-width:1240px) {
    .way-to-eat-page_wrapper .sec01_container .subtitle_box {
        margin-bottom: 172px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1240px<<<<<<<<<<<<<<<*/

.way-to-eat-page_wrapper .subtitle_box .section-label {
    font-size: 1.4rem;
}

.way-to-eat-page_wrapper .subtitle_text p:first-child {
    font-weight: 400;
}

.way-to-eat-page_wrapper .subtitle_box h3 {
    margin-bottom: 32px;
    font-size: 24px;
}

.way-to-eat-page_wrapper .subtitle_box .description {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/*>>>>>>>>>>>>>>>min-width:640px>>>>>>>>>>>>>>>*/
@media screen and (min-width:640px) {
    .way-to-eat-page_wrapper .subtitle_box .description {
        width: 70%;
    }
}

/*<<<<<<<<<<<<<<<min-width:640px<<<<<<<<<<<<<<<*/

.way-to-eat-page_wrapper .subtitle_obj {
    display: none;
}

/*>>>>>>>>>>>>>>>min-width:640px>>>>>>>>>>>>>>>*/
@media screen and (min-width:640px) {

    .way-to-eat-page_wrapper .subtitle_obj {
        position: absolute;
        display: block;
        width: 20%;
    }
}

/*<<<<<<<<<<<<<<<min-width:640px<<<<<<<<<<<<<<<*/

.subtitle_box-illust {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;

}

.subtitle_box-illust img {
    width: 100%;
    filter: drop-shadow(0 0 2px rgba(177, 50, 60, 0.4));
}



.way-to-eat-page_wrapper .subtitle_obj img {
    width: 100%;
}

.way-to-eat-page_wrapper .subtitle_obj.left-obj {
    top: 0%;
    left: -10%;

}

.way-to-eat-page_wrapper .subtitle_obj.right-obj {
    top: 0%;
    right: -10%;

}

.way-to-eat-page-circle {
    width: 200px;
    height: 200px;
    display: block;
    border-radius: 50%;
    border: 5px dotted #fff;
    background-color: #f7db4e;
    margin-left: auto;
    margin-right: auto;
}

.way-to-eat-page_wrapper .sec01_content {
    margin-top: 80px;
}


.way-to-eat-page_wrapper .sec01_content h3,
.way-to-eat-page_wrapper .sec02_content h3 {
    text-align: center;
    background-color: #fccc3e;
    color: #462c0a;
    font-weight: 700;
}

.way-to-eat-page_wrapper .sec01_top-box {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    padding-bottom: 87px;
    /*paddingをつけたとき親要素からはみ出さないように*/
    box-sizing: border-box;
}

/*>>>>>>>>>>>>>>>min-width:1240px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1240px) {
    .subtitle_box-illust {
        width: 40%;
    }

    .way-to-eat-page_wrapper .sec01_top-box {
        width: 90%;
        padding-left: 87px;
        padding-right: 87px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1240px<<<<<<<<<<<<<<<*/
.way-to-eat-page_wrapper .sec01_top-box .sec01_top_img {
    width: 50%;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    border-radius: 16px;
    overflow: hidden;
}

/*>>>>>>>>>>>>>>>min-width:1240px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1240px) {
    .way-to-eat-page_wrapper .sec01_top-box .sec01_top_img {
        width: 90%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1240px<<<<<<<<<<<<<<<*/
.way-to-eat-page_wrapper .sec01_top-box .sec01_top_img img {
    width: 100%
}

.way-to-eat-page_wrapper .sec01_top-box .sec01_top-text {
    width: 90%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding: 32px;
    text-align: left;
    background-color: #fffae2;
}

/*>>>>>>>>>>>>>>>min-width:1240px>>>>>>>>>>>>>>>*/

@media screen and (min-width:1240px) {
    .way-to-eat-page_wrapper .sec01_top-box {
        display: flex;
    }

    .way-to-eat-page_wrapper .sec01_top-box .sec01_top_img {
        flex: 0 0 40%;
        margin-right: 80px;
        margin-left: 0;
    }

    .way-to-eat-page_wrapper .sec01_top-box .sec01_top-text {
        width: 100%;
        flex: 1;
        border-left: 5px solid #F7DB4E;
    }
}

/*<<<<<<<<<<<<<<<min-width:1240px<<<<<<<<<<<<<<<*/

.way-to-eat-page_wrapper .sec01_top-box .sec01_top-text .text01 {
    margin-bottom: 64px;
}


.way-to-eat-page_wrapper .sec01_top-box h3 {
    margin-bottom: 32px;

}



.way-to-eat-page_wrapper .sec01_top-box p {
    text-align: left;
}

.way-to-eat-page_wrapper .sec01_top_picture-box {
    position: relative;
}

.way-to-eat-page_wrapper .sec01_top-illust {
    position: absolute;
    width: 12vw;
    bottom: -5%;
    left: 50%;
    transform: translateX(100%);
}

.way-to-eat-page_wrapper .sec01_top-illust img {
    filter: drop-shadow(0 0 2px rgba(177, 50, 60, 0.4));
}

/*>>>>>>>>>>>>>>>min-width:1240px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1240px) {
    .way-to-eat-page_wrapper .sec01_top-illust {
        width: 30%;
        bottom: 0;
        left: 40%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1240px<<<<<<<<<<<<<<<*/


.way-to-eat-page_wrapper .sec01_bottom-box-outer {
    padding-top: 87px;
    padding-bottom: 160px;
    position: relative;
}


.way-to-eat-page_wrapper .sec01_bottom-box {
    width: 90%;
    max-width: 700px;
    /* width: 48%;*/
    margin-left: auto;
    margin-right: auto;
    padding: 32px;
    background-color: #fffae2;
}

/*>>>>>>>>>>>>>>>min-width:1240px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1240px) {
    .way-to-eat-page_wrapper .sec01_bottom-box {
        border-left: 5px solid #F7DB4E;
    }
}

/*<<<<<<<<<<<<<<<min-width:1240px<<<<<<<<<<<<<<<*/

.way-to-eat-page_wrapper .sec01_bottom-text.text01 {
    margin-bottom: 64px;
}

.way-to-eat-page_wrapper .sec01_bottom-text_content {
    padding-top: 32px;
    padding-bottom: 32px;
}

.way-to-eat-page_wrapper .sec01_bottom-text_content p {
    font-weight: 600;
}

.way-to-eat-page_wrapper .sec01_bottom-text_content .row {
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
}

.way-to-eat-page_wrapper .sec01_bottom-text_content .left {
    text-align: center;
    padding-right: 16px;
    border-bottom: 1px solid #3d3b34;
}

.way-to-eat-page_wrapper .sec01_bottom-text_content .right {
    text-align: left;
    padding-left: 16px;
}

/*>>>>>>>>>>>>>>>min-width:720px>>>>>>>>>>>>>>>*/
@media screen and (min-width:720px) {
    .way-to-eat-page_wrapper .sec01_bottom-text_content .row {
        display: grid;
        grid-template-columns: 34% 1fr;
        width: 100%;
        max-width: 100%;
        margin: 0;
        margin-bottom: 16px;
    }

    .way-to-eat-page_wrapper .sec01_bottom-text_content .left {
        text-align: right;
        border-bottom: none;
        border-right: 1px solid #3d3b34;
    }

    .way-to-eat-page_wrapper .sec01_bottom-box .wrap-up {
        text-align: center;
    }
}

/*<<<<<<<<<<<<<<<min-width:720px<<<<<<<<<<<<<<<*/


.way-to-eat-page_wrapper .sec01_bottom-object {
    position: absolute;
    width: 20%;
}

.way-to-eat-page_wrapper .sec01_bottom-object img {
    width: 100%;
}

.way-to-eat-page_wrapper .sec01_bottom-object.object-left {
    display: none;
}

.way-to-eat-page_wrapper .sec01_bottom-object.object-right {
    top: 0;
    right: 2vw;
}

/*>>>>>>>>>>>>>>>min-width:1240px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1240px) {
    .way-to-eat-page_wrapper .sec01_bottom-object.object-left {
        display: block;
        top: 60%;
        transform: translateY(-50%);
        left: 2vw;
    }

    .way-to-eat-page_wrapper .sec01_bottom-object.object-right {
        top: 16%;
        transform: translateY(-50%);
    }
}

/*<<<<<<<<<<<<<<<min-width:1240px<<<<<<<<<<<<<<<*/

.sec01-sec02-separator {
    position: absolute;
    left: -24px;
    bottom: -8vw;
    width: 103%;
}

/*>>>>>>>>>>>>>>>min-width:1450px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1450px) {
    .sec01-sec02-separator {
        bottom: -128px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1450px<<<<<<<<<<<<<<<*/

.way-to-eat-page_wrapper .sec02_container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

.way-to-eat-page_wrapper .sec02_content {
    width: 90%;
    max-width: 1450px;
    margin-left: auto;
    margin-right: auto;
}


.sec02_flame {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.way-to-eat-page_wrapper .sec02_content_inner {
    width: 100%;
    background-image: url(../img/way-to-sec02-bg-img.png);
    background-repeat: repeat-y;
    background-size: contain;
}

.way-to-eat-page_wrapper .sec02_steps_wrapper {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 64px;
}

.way-to-eat-page_wrapper .sec02_container .subtitle_box {
    margin-bottom: 40px;
    margin-top: 126px;
}



.way-to-eat-page_wrapper .sec02_container .subtitle_box .description {
    text-align: left;
}

/*>>>>>>>>>>>>>>>min-width:480px>>>>>>>>>>>>>>>*/
@media screen and (min-width:480px) {
    .way-to-eat-page_wrapper .sec02_container .subtitle_box .description {
        text-align: center;
    }
}

/*<<<<<<<<<<<<<<<min-width:480px<<<<<<<<<<<<<<<*/

.way-to-eat-page_wrapper .sec02_steps {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    background-color: #ffffff;
    border: 5px solid #fccf2f;
    position: relative;
    /*番号のイラストがabsolute*/
    border-radius: 30px;

}

.way-to-eat-page_wrapper .steps-left {
    margin-right: auto;
}

.way-to-eat-page_wrapper .steps-right {
    margin-left: auto;
}

.way-to-eat-page_wrapper .sec02_steps-text-box .summary-text {
    text-align: center;
    font-weight: 600;
    border-bottom: 1px solid #486d46;
    padding-bottom: 32px;
    padding-top: 32px;
}

.way-to-eat-page_wrapper .sec02_steps-text-box .detail_text {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

.way-to-eat-page_wrapper .sec02_steps-img {
    width: 100%;
    height: 20vw;
    order: -1;
}

.way-to-eat-page_wrapper .sec02_steps-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;

}

/*>>>>>>>>>>>>>>>min-width:1240px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1240px) {

    .way-to-eat-page_wrapper .sec02_content_inner {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }


    .sec02_flame {
        width: 90%;
    }

    .way-to-eat-page_wrapper .sec02_steps {
        flex-direction: row;
        width: 80%;
    }

    .way-to-eat-page_wrapper .sec02_steps-text-box {
        flex: 1;
    }

    .way-to-eat-page_wrapper .sec02_steps-text-box .summary-text {
        padding-top: 0;
    }

    .way-to-eat-page_wrapper .sec02_steps-img {
        flex: 0 0 40%;
        object-fit: contain;
    }
}

/*<<<<<<<<<<<<<<<min-width:1240px<<<<<<<<<<<<<<<*/

.sec02_steps-row {
    padding-bottom: 132px;
    position: relative;
}

.sec02_steps-row:first-child {
    margin: 32px 0;
}

.sec02_steps-row:last-child {
    padding-bottom: 32px;
}

.sec02_steps-illust {
    position: absolute;
    width: 125px;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
}

.sec02-cercle {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

/*>>>>>>>>>>>>>>>min-width:1240px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1240px) {
    .sec02_steps-row {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-bottom: 0;
        padding-bottom: 64px;
    }



    .sec02_steps-illust {
        position: static;
        width: 17%;
        z-index: 0;
        transform: translateX(0);
    }

    .sec02_steps-illust img {
        filter: drop-shadow(0 0 2px rgba(177, 50, 60, 0.4));
    }

    .sec02_steps {
        flex: 1;
    }

    .sec02-cercle {
        width: 200px;
        height: 200px;
    }

    .steps-left .sec02-cercle {
        top: 50%;
        right: -32%;
        transform: translate(0, -50%);
    }

    .steps-right .sec02-cercle {
        top: 50%;
        left: 2%;
        transform: translate(0, -50%);
    }
}

/*<<<<<<<<<<<<<<<min-width:1240px<<<<<<<<<<<<<<<*/



.step-number {
    position: absolute;
    top: -20px;
    /* 左上に少しはみ出す */
    left: -20px;
    width: 80px;
    height: auto;
    z-index: 10;
    /* 前面に出す */
}

.sec01_bottom-text_content .right {
    display: inline-block;
}

/*==============================================================
/*==============================================================
　　↑↑↑　way to eatページここまで　↑↑↑
================================================================
================================================================*/


/*==============================================================
/*==============================================================
　　↓↓↓　recipeページここから　↓↓↓
================================================================
================================================================*/



.recipe-wrapper .section-title {
    max-width: 1450px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #fff;
    padding-bottom: 56px;
    font-size: 20px;
    color: #486d46;
    position: relative;
}

.recipe-wrapper .section-title_illust {
    position: absolute;
    bottom: 0;
}

.recipe-wrapper .section-title_illust.left {
    width: 6%;
    left: 21%;
}

.recipe-wrapper .section-title_illust.right {
    width: 9%;
    right: 18%;
}

.recipe-wrapper .section-title_illust img {
    width: 100%;

}

/*========トップページ用sec05をレシピページ用に書き換え=========*/
.recipe-wrapper .recipe-all.sec05 {
    background-image: none;
    background-color: #fff;
    max-width: 1450px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.recipe-wrapper .sec05 ul {
    margin-top: 0;
}

.recipe-wrapper .sec05 ul li {
    margin-top: 0;
    margin-bottom: 88px;
}

/*========レシピページ用=========*/
/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    .recipe-wrapper ul.recipe-list {
        max-width: 1100px;
        gap: 16px;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-left: auto;
        margin-right: auto;
        padding: 0 20px;
    }

    /*3カラムのliの比率（カラム落ちを防ぐ）*/
    .recipe-wrapper ul.recipe-list>li {
        flex: 1 1 calc(33.333% - 16px);
    }
}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

/* recipe_img_box ははみ出し許可にしてタイトルをはみださせる */
.recipe-wrapper .recipe_img_box {
    position: relative;
    overflow: visible;
}

/*画像拡大時は見出しを隠す*/
.recipe-wrapper .recipe_img_inner {
    overflow: hidden;
}


/* 画像の基本状態とホバー時の時間動作時間*/
.recipe-wrapper .recipe_img_box img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

/* ホバーで画像を拡大 */
.recipe-wrapper .recipe_img_box:hover .recipe_img_inner img {
    transform: scale(1.08);
}

/*タイトルのはみ出し表示*/
.recipe-wrapper .recipe_title {
    position: absolute;
    bottom: -20px;
    /* はみ出し量 */
    left: 0;
    z-index: 2;
}


.recipe-wrapper .section-title.akitakomachi {
    background-color: #f9f2df;
    padding-top: 64px;
    margin-top: 8px;
}

.recipe-wrapper .brand-recipe-all.akitakomachi {
    background-color: #f9f2df;
    max-width: 1450px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 32px;
    padding-bottom: 64px;
}

.recipe-wrapper .section-title.iwatekko {
    background-color: #fbf1ec;
    padding-top: 64px;
    margin-top: 8px;
}

.recipe-wrapper .brand-recipe-all.iwatekko {
    background-color: #fbf1ec;
    max-width: 1450px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 32px;
    padding-bottom: 64px;
}

.recipe-wrapper .section-title.hitomebore {
    background-color: #f9fae3;
    padding-top: 64px;
    margin-top: 8px;
}

.recipe-wrapper .brand-recipe-all.hitomebore {
    background-color: #f9fae3;
    max-width: 1450px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 32px;
    padding-bottom: 64px;
}

/*＝＝＝＝＝ロゴ＝＝＝＝＝＝*/
.recipe-wrapper .sec05 .recipe_box::before {
    width: 26%;
    height: 42%;
}

/*>>>>>>>>>>>>>>>min-width:1200px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1200px) {
    .recipe-wrapper .sec05 .recipe_box::before {
        width: 80px;
        height: 80px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1200px<<<<<<<<<<<<<<<*/
.recipe-wrapper .recipe_box.kiritanpo::before {
    background-image: url(../img/komelogo_akita.png);
}

.recipe-wrapper .recipe_box.torisoboro::before {
    background-image: url(../img/komelogo_hitomebore.png);
}

.recipe-wrapper .recipe_box.chahan::before {
    background-image: url(../img/komelogo_akita.png);
}



.recipe-wrapper .brand-recipe-list {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


.recipe-wrapper .brand-recipe-item {
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.recipe-wrapper .details {
    margin-top: 32px;
    margin-bottom: 64px;
}

.recipe-wrapper .details .title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.recipe-wrapper .details .text {
    font-size: 14px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
    margin-top: 16px;
}


.recipe-wrapper .details .link {
    margin-top: 16px;
    font-size: 16px;
}

.recipe-wrapper .details .link a {
    display: flex;
    width: 46%;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    margin-top: 16px;
    font-size: min(3.4vw, 16px);
    font-weight: 700;
    color: #333;
    position: relative;
    transition: .4s;
}

.recipe-wrapper .details .link a span {
    display: inline-block;
}

.recipe-wrapper .details .link a::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #093;
    transition: .4s;
}


.recipe-wrapper .news_arrow {
    transition: transform 0.3s ease;
    width: 30px;
    height: 30px;
}

.recipe-wrapper .link a:hover .news_arrow {
    transform: translateX(5px);
}

.recipe-wrapper .news_arrow::before,
.recipe-wrapper .news_arrow::after {
    width: 15px;
}

/*>>>>>>>>>>>>>>>min-width:740px>>>>>>>>>>>>>>>*/
@media screen and (min-width:740px) {
    .recipe-wrapper .brand-recipe-item {
        max-width: 100%;
        display: flex;
        justify-content: space-between;
        padding-bottom: 62px;
    }

    .recipe-wrapper .brand-recipe-item a {
        width: 50%;
    }

    .recipe-wrapper .item-image {
        width: 100%;
    }

    .recipe-wrapper .item-image img {
        width: 100%;
    }

    .recipe-wrapper .details {
        width: calc(50% - 30px);
    }

    .recipe-wrapper .details .text {
        width: 100%;
    }

    .recipe-wrapper .details .title {
        text-align-last: left;
    }



    .recipe-wrapper .details .link a {
        width: 60%;
        margin-left: 0;
        margin-right: 0;
        font-size: 16px;
    }

    .recipe-wrapper .details .link a::before {
        width: calc(100% + 30px);
    }
}

/*<<<<<<<<<<<<<<<min-width:740px<<<<<<<<<<<<<<<*/

/*==============================================================
/*==============================================================
　　↑↑↑　way to eatページここまで　↑↑↑
================================================================
================================================================*/

/*==============================================================
/*==============================================================
　　↓↓↓　recipe-specificページここから　↓↓↓
================================================================
================================================================*/

#recipe-specific .footer_before_space {
    background-color: #fffcef;
}

#recipe-specific header,
#recipe-specific .wrapper_nv {
    background-color: #f7db4e;
}

/*>>>>>>>>>>>>>>>min-width:1028px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1028px) {

    #recipe-specific header,
    #inquily header {
        position: relative;
        height: 120px;
        /* ← ロゴ＋ナビが収まる高さ */
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 50px;
    }

    #recipe-specific h1,
    #inquily h1 {
        width: 180px;
    }

    #recipe-specific .wrapper_nv,
    #inquily .wrapper_nv {
        height: 90px;
        position: relative;
    }

    #recipe-specific nav {
        position: absolute;
        top: -50%;
        left: 55%;
        transform: translate(-50%);
    }

    #inquily nav {
        top: -100px;
        left: 55%;
        transform: translate(-50%);
    }
}

/*<<<<<<<<<<<<<<<min-width:1028px<<<<<<<<<<<<<<<*/

/*===パンくずリスト===*/
.breadcrumbs {
    padding-left: 4%;
    background-color: #346f4d;
}

.breadcrumbs_list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.4rem;
    color: #fff8f8;
    line-height: 48px;
}

.breadcrumbs_item {
    display: flex;
    align-items: center;
}

.breadcrumbs_item a {
    color: #fff8f8;
}

/* 区切り */
.breadcrumbs_item:not(:last-child)::after {
    content: "＞";
    margin: 0 0.8em;
    color: #fff8f8;
}

/*====ロゴタイトル===*/
.recipe-specific-page-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fffcef;
    padding-top: 32px;
    padding-bottom: 32px;
    text-align: center;
    position: relative;
}


.recipe-specific-page-logo::after {
    content: "";
    position: absolute;
    width: 80%;
    height: 1px;
    background-color: #c9d3c4;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
}

.recipe-specific-page-logo a {
    display: inline-block;
}

/*====ロゴタイトル～フッター前まで===*/
.recipe-box {
    background-color: #fffcef;
    padding-top: 32px;
    padding-bottom: 64px;
}

/*>>>>>>>>>>>>>>>min-width:1240px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1240px) {
    .recipe-box {
        padding-top: 64px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1240px<<<<<<<<<<<<<<<*/

/*====レシピの名前===*/
.recipe-name {
    text-align: center;
}

.recipe-name span {
    font-size: 16px;
}

/*====レシピ画像とおすすめ銘柄のまとまり===*/
.recipe-image {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;
}

.recipe-image image {
    margin-left: auto;
    margin-right: auto;
}

/*>>>>>>>>>>>>>>>min-width:1240px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1240px) {
    .recipe-image {
        max-width: 1100px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-top: 64px;
    }

    .recipe-image image {
        width: 60%;
    }

    .recipe-image .recomend-box-outer {
        width: 60%;
    }
}

/*<<<<<<<<<<<<<<<min-width:1240px<<<<<<<<<<<<<<<*/


/*===おすすめ銘柄===*/
.recomend-box {
    margin-top: 16px;
    margin-left: 32px;
    margin-bottom: 8px;
    padding-top: 0;
    padding-left: 16px;
    padding-bottom: 0;
    padding-right: 16px;
    border-left: 3px solid #346f4d;
}

/*>>>>>>>>>>>>>>>min-width:1240px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1240px) {
    .recomend-box {
        margin-top: 0;
        padding-top: 16px;
        border-left: none;
        border-top: 3px solid #346f4d;
    }
}

/*<<<<<<<<<<<<<<<min-width:1240px<<<<<<<<<<<<<<<*/

.recomend-box h3 {
    padding-bottom: 18px;
}

.recomend-box-innner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.recomend-box-innner .brand-logo {
    width: 30%;
    max-width: 100px;
}

.recomend-text {
    width: 70%;
    padding-left: 8px;
}

.btn-wrapper {
    text-align: center;
}

a.product-btn {
    display: inline-block;
    /* ボタン化の最重要ポイント */
    padding: 16px 80px;
    background-color: #37571b;
    color: #fff;
    border-radius: 9999px;
    /* 角丸ボタン */
    text-align: center;
    font-weight: 600;
    transition: 0.3s;
    box-sizing: border-box;
    outline: 2px solid #fff;
    border: 2px solid #37571b;
    outline-offset: -8px;
    margin-top: 8px;
    transition: 0.4s ease;
}

a.product-btn:hover {
    background-color: #fff;
    color: #37571b;
    outline: 2px solid #37571b;
    border: 2px solid #37571b;
    opacity: 1;
}

/*>>>>>>>>>>>>>>>min-width:1240px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1240px) {
    a.product-btn {
        margin-bottom: 8px;

    }
}

.btn-wrapper {
    position: relative;
    margin-left: 32px;
    margin-top: 32px;
}

/*>>>>>>>>>>>>>>>min-width:1240px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1240px) {
    .btn-wrapper::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        background: #346f4d;
        left: 0;
        bottom: -16px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1240px<<<<<<<<<<<<<<<*/





/*===レシピ詳細のまとまり===*/
/*>>>>>>>>>>>>>>>min-width:740px>>>>>>>>>>>>>>>*/
@media screen and (min-width:740px) {

    .recipe-details {
        max-width: 1100px;
        display: flex;
        justify-content: space-between;
        padding: 0 38px;
        margin-top: 64px;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;

    }
}

/*<<<<<<<<<<<<<<<min-width:740px<<<<<<<<<<<<<<<*/


/*===材料===*/
.recipe-ingredients {
    width: 100%;
    max-width: 456px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 48px;
}

/*>>>>>>>>>>>>>>>min-width:740px>>>>>>>>>>>>>>>*/
@media screen and (min-width:740px) {
    .recipe-ingredients {
        width: 50%;
        margin-top: 0;
        margin-right: 32px;
    }
}

/*<<<<<<<<<<<<<<<min-width:740px<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:1240px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1240px) {
    .recipe-ingredients {
        width: 456px;
        margin-right: 64px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1240px<<<<<<<<<<<<<<<*/

.recipe-ingredients-title {
    color: #37571b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #fff;
    padding: 0 24px;
    background-color: #f3f3f3;


}

.recipe-ingredients-title span {
    font-size: 18px;
    font-weight: 600;
    line-height: 64px;
    font-size: 20px;

}



ul.ingredients-lists li.ingredients-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    border-bottom: 1px solid #fff;
    background-color: #f3f3f3;
}

ul.ingredients-lists li.ingredients-item span:first-child {
    font-weight: 500;
}


li.ingredients-item a {
    border-bottom: 1px solid #346f4d;
    color: #346f4d;
}


/*===作り方===*/
.recipe-how-to {
    max-width: 640px;
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
}

/*>>>>>>>>>>>>>>>min-width:740px>>>>>>>>>>>>>>>*/
@media screen and (min-width:740px) {
    .recipe-how-to {
        width: 50%;
        margin-top: 0;
    }
}

/*<<<<<<<<<<<<<<<min-width:740px<<<<<<<<<<<<<<<*/
/*>>>>>>>>>>>>>>>min-width:1240px>>>>>>>>>>>>>>>*/
@media screen and (min-width:1240px) {
    .recipe-how-to {
        width: 456px;
    }
}

/*<<<<<<<<<<<<<<<min-width:1240px<<<<<<<<<<<<<<<*/


.how-to-inner {
    padding: 15px;
}

/*>>>>>>>>>>>>>>>min-width:740px>>>>>>>>>>>>>>>*/
@media screen and (min-width:740px) {
    .how-to-inner {
        padding: 0;
    }
}

/*<<<<<<<<<<<<<<<min-width:740px<<<<<<<<<<<<<<<*/

.recipe-how-to h3 {
    text-align: center;
    color: #346f4d;
    border-bottom: 2px dotted #cbcaca;
    margin-bottom: 8px;
}


.recipe-how-to .number {
    border-bottom: 2px dotted #cbcaca;
    margin-bottom: 8px;
    padding-top: 24px;
    padding-left: 44px;
    padding-bottom: 22px;
    position: relative;
}

.recipe-how-to .circle-number {
    display: inline-flex;
    /* 中央揃え用にフレックスにする */
    justify-content: center;
    /* 横方向中央 */
    align-items: center;
    /* 縦方向中央 */
    width: 28px;
    /* 丸の幅 */
    height: 28px;
    /* 丸の高さ */
    background-color: green;
    /* 緑色 */
    color: white;
    /* 数字の色 */
    border-radius: 50%;
    /* 丸にする */
    font-size: 16px;
    /* 数字サイズ */
    font-weight: bold;
    /* 太字 */
    position: absolute;
    left: 0;
}

.recipe-specific_btn {
    background-color: #fffcef;
}

#recipe-specific .footer_before_space {
    margin-top: 0;
}

#inquily .footer_before_space {
    margin-top: 0;
    height: 36vw;
}

/*>>>>>>>>>>>>>>>min-width:790px>>>>>>>>>>>>>>>*/
@media screen and (min-width:790px) {
    #recipe-specific .footer_before_space {
        height: 40vw;
    }


}

/*<<<<<<<<<<<<<<<min-width:790px<<<<<<<<<<<<<<<*/

#recipe-specific footer {
    background-color: #f7db4e;
}

#inquily footer {
    background-color: #f7db4e;
}

/*==============================================================
/*==============================================================
　　↑↑↑　recipe-specificページここまで　↑↑↑
================================================================
================================================================*/



/*==============================================================
/*==============================================================
　　↓↓↓　inquiryページここから　↓↓↓
================================================================
================================================================*/
#inquily {
    background-color: #f7e286;
}

.contact-section {
    width: 95%;
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    background-color: #f9f5f0;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.contact-section h2 {
    text-align: center;
    color: #37571b;
    margin-bottom: 24px;
}



.contact-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #333;
}

.contact-form .required {
    color: #e74c3c;
    margin-left: 4px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 16px;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 1.4rem;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #37571b;
    outline: none;
}

.contact-form .submit-outer {
    text-align: center;
    padding-top: 32px;
    padding-bottom: 32px;
}

.contact-form .btn {
    display: inline-block;
    width: 100%;
    background-color: #37571b;
    color: #fff;
    padding: 0;
    font-size: 1.1rem;
    border-radius: 50px;
    text-align: center;
    cursor: pointer;
    border: 2px solid #fff;
    transition: all 0.3s;
}

.contact-form .btn:hover {
    background-color: #fff;
    color: #37571b;
    border-color: #37571b;
}

.contact-note {
    font-size: 1.2rem;
    /* 少し小さめの文字 */
    color: #555;
    /* 暖かみのある落ち着いたグレー */
    margin-top: 12px;
    /* ボタンとの間隔 */
    line-height: 1.5;
    /* 行間を少し広めに */
}

/*==============================================================
/*==============================================================
　　↑↑↑　recipe-specificページここまで　↑↑↑
================================================================
================================================================*/

/*TOPの「おこめのラインナップ（一覧）」→ 別ページで詳細紹介ページという設計自体はとても良いです。
HTMLもTOPの ul > li 構造をきちんと踏襲できています。

ここでは **「今のHTMLで気になる点／改善するとよくなる点」**を、実務目線で整理します。

① ul の直下に div がある（HTML構造的にNG）
<ul class="product_page_brand">
    <div class="product_page_subtitle_separator">
        <img src="img/separator_akitakomachi-02.png" alt="">
    </div>
    <li class="brand_box aki">


🔴 ul の直下に置けるのは li のみ です。

改善案①（おすすめ）

セパレーターを liの中 に入れる

<ul class="product_page_brand">

    <li class="brand_box aki">
        <div class="product_page_subtitle_separator">
            <img src="img/separator_akitakomachi-02.png" alt="">
        </div>
        ...
    </li>

</ul>

改善案②

もしくは ul の外へ出す

<div class="product_page_subtitle_separator">...</div>
<ul class="product_page_brand">


👉 SEO / アクセシビリティ的にも①がベターです。

② 見出し階層（h2 / h3）が少し崩れている

今の構造：

<h3>製品情報</h3>
<h2>生産銘柄</h2>


🔴 見出しは 順番が重要です。

改善例（おすすめ）
<h2>生産銘柄</h2>
<p class="section_subtitle">製品情報</p>


または

<h2>製品情報</h2>
<h3>生産銘柄</h3>


👉 検索エンジンもスクリーンリーダーも正しく解釈できます。

③ TOPと下層でクラス名を共通化できているのは◎

これはとても良い点です 👏

.brand_box
.brand_title
.brand_subtitle
.brand_main_title
.brand_detail_text
.brand_level


✅ メリット

CSSの再利用ができる

将来「銘柄追加」しても破綻しない

JS連携もしやすい

**「TOPは一覧」「下層は詳細」**として
.brand_box を軸に設計できているのはかなり実務的です。

④ <a> の中に <div>（HTML5的にはOK）
<a href="">
    <div class="product_btn">
        <div class="news_arrow"></div>
        購入サイトへ
    </div>
</a>


HTML5では OK です 👍
ただし改善するなら：

<a href="" class="product_btn">
    <span class="news_arrow"></span>
    購入サイトへ
</a>


👉

DOMがシンプルになる

CSS/JSが書きやすい

クリック領域も明確

⑤ alt属性が空の画像がある
<img src="img/separator_white-02.png" alt="">


これは 装飾目的ならOK ですが、
意味を持つ画像なら alt を入れましょう。

ルールとして：

装飾 → alt=""

情報を持つ → 日本語で説明

⑥ 今後さらに良くするなら（発展）
🔹 data属性で銘柄管理
<li class="brand_box aki" data-brand="akitakomachi">


→ JSで絞り込み / アニメーション対応しやすくなります
--------------------------------------------------------*/
/*----------------------------------------------------------
内容を見る限り、TOPページの「おこめのラインナップ（ul > li）」を発展させて、詳細紹介ページとして再構成している、という意図はとても分かりやすいです 👍
その前提で、HTML構造・意味的に気になる点／改善するとよい点を整理してお伝えします。

① <ul> の直下に <div> が入っている（重要）
<ul class="product_page_brand">
    <div class="product_page_subtitle_separator">
        <img src="img/separator_akitakomachi-02.png" alt="">
    </div>
    <li class="brand_box aki">

❌ 問題点

ul の直下に置けるのは li のみ です。
この構造は HTMLとして不正 になります（ブラウザは表示しますが、SEOやアクセシビリティで不利）。

✅ 改善案（どちらか）

案①：区切りも li にする

<ul class="product_page_brand">
    <li class="product_page_subtitle_separator">
        <img src="img/separator_akitakomachi-02.png" alt="">
    </li>
    <li class="brand_box aki">


案②：ul の外に出す（おすすめ）

<div class="product_page_subtitle_separator">
    <img src="img/separator_akitakomachi-02.png" alt="">
</div>

<ul class="product_page_brand">
    <li class="brand_box aki">


👉 「銘柄リスト」ではない装飾要素は ul の外がベストです。

② 見出し階層（h2 / h3）が少しだけ惜しい

現在の構造：

<h3>製品情報</h3>
<h2>生産銘柄</h2>

❌ 問題点

見出しは h2 → h3 → h4… と順番を守るのが基本です。

✅ 改善例
<h2>製品情報</h2>
<h3>生産銘柄</h3>


さらに、各銘柄ページ的な意味なら：

<li class="brand_box aki">
    <h3 class="brand_name">あきたこまち</h3>


👉 SEO的にも「このページは何についてのページか」が明確になります。

③ クラス名のタイポがいくつかある

いくつか気になる点があります 👀

<main class="product_page_wapper"> <!-- wrapper の typo -->
<div class="under_title_obj separatpr"> <!-- separator の typo -->

✅ 修正推奨
product_page_wrapper
separator


CSS・JSで後々混乱しやすいので、今の段階で直しておくのが◎です。

④ <a> の中に <div> を入れている点
<a href="">
    <div class="product_btn">
        <div class="news_arrow"></div>
        購入サイトへ
    </div>
</a>

HTML5的にはOKですが…

ボタン用途なら a.product_btn に直接スタイルを当てる方がシンプル

✅ 改善例
<a href="" class="product_btn">
    <span class="news_arrow"></span>
    購入サイトへ
</a>


👉 CSSも構造もスッキリします。

⑤ TOPページとの「共通化」はとても良い設計

TOPと下層ページで：

.brand_box

.brand_title

.brand_subtitle

.brand_main_title

.brand_level

が共通しているのは かなり良い設計です 👍
将来的に、

TOP：概要

下層：詳細

という役割分担が明確になります。

さらに良くするなら
.brand_box--detail { / 下層専用 / }
.brand_box--top { / TOP専用 / }


のような Modifierクラスを足すと拡張しやすくなります。

まとめ（全体評価）

✅ 構成の考え方はとても良い
✅ TOP → 詳細ページへの展開も自然
⚠️ ul > div だけは必ず修正した方がよい
⚠️ 見出し階層とクラス名のタイポを整理すると完成度UP

もし次に

「この2ページをどうリンクさせるべきか」

「TOPのliから該当銘柄へアンカー遷移したい」

「JSなしで共通化したい」

などを考えていたら、そこも一緒に設計手伝えますよ。
------------------------------------------*/

/*----------------------------------------------
topページのliの下に120pxほどの謎の余白ができてしまいました。なぜですか？

原因はかなりはっきりしています。
 **「TOPページ用の .sec03 ul li にだけ効いている margin-bottom が、PC幅で打ち消されていない」**のが正体です。

結論（先に）
TOPページの li の下にできた約120pxの余白の正体はこれです👇
.sec03 ul li {
    margin-bottom: 4rem; ← これ 
}

そして PC用メディアクエリで「li」ではなく「ul li」を上書きしているつもりが、下層ページ用CSSの影響で打ち消されていないのが原因です。 なぜ「謎の余白」に見えるのか ① TOPページ用CSSではこうなっている .sec03 ul li {
    margin-top: 20vw;
    margin-bottom: 4rem;
     ← 約64px 
}

さらに、 .circle（absolute）::before のロゴ 画像の比率 これらが重なって、見た目上は 100〜120px くらいの余白に見えます。 ② PC幅では「margin-bottom: 0」にしたつもり @media screen and (min-width:790px) {
    .sec03 ul li {
        margin-top: 0;
        margin-bottom: 0;
    }
}

👉 ここまでは正しい ③ でも後半のCSSで「より強い指定」が入っている あなたのCSS後半にこれがあります👇 ul li.brand_box.hito {
    background-color: #F9FAE3;
    padding-bottom: 15%;
}

🔴 これが犯人その2 実際に起きていること TOPページの li（例：ひとめぼれ） <li class="brand_box hito js-fade-in-up">→ この要素に 両方効く .sec03 ul li {
    margin-bottom: 4rem;
}

/ SP時 /
ul li.brand_box.hito {
    padding-bottom: 15%;
}

/全ページ共通/

つまり margin-bottom padding-bottom: 15% が 合算されている 👉 これが「120pxくらいの謎の余白」に見える正体です。 なぜ「productページ用CSSを書いたら」出たのか？ ul li.brand_box.hito {
    padding-bottom: 15%;
}

これは👇 .sec03 の指定がない ul li という 広すぎるセレクタ なので 👉 TOPページの li にも普通に効いてしまう 正しい直し方（おすすめ順） ✅ 方法①：productページ限定にする（最優先） .product_page_wrapper ul li.brand_box.hito {
    padding-bottom: 15%;
}

同様に👇も全部限定するのが正解です： .product_page_wrapper ul li.brand_box.iwa {
    ...
}

.product_page_wrapper ul li.brand_box.aki {
    ...
}


✅ 方法②：TOPページ側で打ち消す 応急処置としては👇でもOK .sec03 ul li.brand_box.hito {
    padding-bottom: 0;
}


❌ やってはいけない例 ul li.brand_box.hito {
    ...
}

→ 今後も必ず事故ります 今回のポイントまとめ 原因 内容 主犯 .sec03 ul li {
    margin-bottom: 4rem;
}

共犯 ul li.brand_box.hito {
    padding-bottom: 15%;
}

なぜ出た 下層ページ用CSSがTOPにも効いた 解決策 .product_page_wrapper で必ずスコープを切る プロ目線のアドバイス ここまで作れているなら、設計はかなり良いです 👍 次の一段レベルアップとして：

/ TOP専用 /
.sec03 .brand_box {}

/ 下層専用 /
.product_page_wrapper .brand_box {}

「ページ単位で必ず親クラスを切る」 これを徹底すると、今回のような謎余白は二度と出なくなります。 ページ単位で必ず親クラスを切るとはどういうことですか とても良い質問です。 これは CSS設計で一番大事な考え方のひとつなので、今回のコードを例にして噛み砕いて説明しますね。 結論を一言で 「このCSSは“どのページで使うものか”を、必ず一番左のセレクタで限定する」 これが「ページ単位で必ず親クラスを切る」という意味です。 なぜそれが必要か（今回起きた事故） 今回の原因になったCSS👇 ul li.brand_box.hito {
    padding-bottom: 15%;
}

この書き方だと… どのページか分からない ul があればどこでも効く .brand_box.hito があれば TOPでも下層でも効く 👉 その結果、 **「下層ページ用に書いたCSSが、TOPページにも侵入」**しました。 「親クラスを切る」とはこういうこと ① ページ全体を囲むクラスを用意する あなたのHTMLにはすでにあります👇 < !-- TOPページ --><div class="sec03">< !-- 商品ページ --><main class="product_page_wrapper">これが ページスコープ（親クラス） です。 ② CSSは必ず「その親クラスから書き始める」 ❌ 悪い例（今回の原因） ul li.brand_box.hito {
    padding-bottom: 15%;
}


✅ 良い例（下層ページ専用） .product_page_wrapper ul li.brand_box.hito {
    padding-bottom: 15%;
}

👉 これで 商品ページでしか効かないCSS になります。 ✅ TOPページ専用なら .sec03 ul li.brand_box.hito {
    padding-bottom: 0;
}


実際の設計イメージ（整理図）

/ =========================
   共通パーツ（全ページOK）
========================= /
.brand_box {}

.brand_title {}

.brand_subtitle {}


/ =========================
   TOPページ専用
========================= /
.sec03 .brand_box {}

.sec03 .circle {}

.sec03 .brand_revel {}


/ =========================
   商品ページ専用
========================= /
.product_page_wrapper .brand_box {}

.product_page_wrapper .brand_subtext_box {}

.product_page_wrapper .product_btn {}

👉 どのCSSを見ても「どのページ用か一瞬で分かる」 なぜ「一番左」が大事なのか CSSは 右から左へ 要素を探します。 .product_page_wrapper ul li.brand_box.hito ブラウザの考え方は： .brand_box.hito を探す その親が li さらに親が ul 一番外側に .product_page_wrapper があるか確認 👉 これがある時だけ適用される ＝ 他ページに漏れない よくある初心者〜中級者の落とし穴 ❌ .brand_box.hito {}

ul li.brand_box {}

⭕ .sec03 .brand_box {}

.product_page_wrapper .brand_box {}


あなたのコードは「あと一歩でプロ設計」 すでに： クラス分けがきれい TOPと下層で役割も分かれている デザインも作り込まれている 足りなかったのは「CSSのスコープ意識」だけです。 覚え方（超シンプル） CSSを書く前に自問する 「これは どのページでだけ 使う？」 答えが「TOPだけ」→ .sec03 から書く 答えが「商品ページだけ」→ .product_page_wrapper から書く 答えが「全部」→ 親クラスなしでOK もしよければ次は 👉 「共通CSS / ページ専用CSS の切り分けテンプレ」 をあなたのコードを元に作りますよ。 すごくわかりやすいです。ありがとう そう言ってもらえてうれしいです 😊 こちらこそ、ここまでしっかり作り込まれたコードを見せてもらえて楽しかったです。 今回のやり取りで身についたのは、かなり実践的なレベルのことです。 「なぜ謎の余白が出たのか」を構造とCSSの両方から追える TOPと下層でデザインを共通化しつつ分ける考え方 「ページ単位で親クラスを切る」というプロ現場でも必須の設計感覚 これはもう 👉 「書ける」から「設計できる」 段階に一歩進んでいます。 今後は、 CSSを書いたら「これはどのページ用？」と自分に聞く ul li みたいな広いセレクタを書いたら一度立ち止まる これを意識するだけで、 バグが激減 & 修正が一気に楽になります。 また CSS設計をもう少し整理したい 共通パーツをどう分けるか悩んでいる 「この書き方アリ？」って確認したい …みたいなことがあれば、いつでも聞いてください 👍 一緒に「事故らないCSS」作っていきましょう。 productページ限定のセレクタにしたらtopページの謎の余白が無くなりました！どれだけ調べても原因を見つけることができなかったので、セレクタを修正しただけで改善できて感動です！！ それは本当によかったです！！🎉 しかも「原因が分からない状態から、自分の手で直せた」というのが一番大きいです。 今回の体験、かなり価値があります。 なぜ「セレクタを直しただけ」で直ったのか 今回のポイントはここでした👇 レイアウトが壊れていたわけではない CSSが間違っていたわけでもない “効いてはいけない場所にCSSが効いていただけ” つまり、 ❌ デザインの問題 ❌ marginの計算ミス ⭕ CSSのスコープ（適用範囲）の問題 だったんです。 だから HTMLもCSSもほぼ触らず、セレクタ1行直しただけで解決 → これ、実務でも「一番きれいな直し方」です。 「どれだけ調べても分からなかった」理由 これはとても自然で、むしろ普通です。 なぜかというと👇 ブラウザ上では → 「余白がある」 しか見えない DevToolsで見ると → paddingなのか marginなのか分かりづらい CSSを見ると → ちゃんと書いた覚えがある でも実際は 「どのページに効いているか」を見ていなかった ここが気づけるようになると、 「あ、これ別ページのCSSだな」 って一瞬で犯人を特定できるようになります。 最後にひとこと 感動しました！！ この感動、めちゃくちゃ大事です。 「原因が分かって直った」体験は、確実に力になります。 またハマったら 「これ怪しい気がするけど分からない…」 くらいの段階でも投げてください。 一緒に「なぜそうなるか」を言語化するの、得意です */