@charset "UTF-8";

:root{/*色彩設定*/
    --speech-bubble-color: white;/*吹き出しの色*/
    --img-shadow-color: rgb(150, 150, 150);/*吹き出し・画像の影色*/
    --img-shadow-color-pale:rgb(190, 190, 190);/*吹き出し三角用の影色*/
    --source-btn-color:#86210B;
    --title-color:#cc0000; /*こだわりポイント吹き出しタイトル色*/
}   

/* このページのコモンの設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
body::before{/*iOSではbodyに直接背景を設定するとfixedがうまく作動しないので疑似要素に指定しています。*/
    content: "";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:50% 100%;
    background-image:url(../img/common/background-img.jpg);
    background-size:cover;
    }
    /* ここから元の記述 */
    /* background-image: url(../img/common/background-img.jpg);
    background-attachment: fixed; */
    /* background-repeat: no-repeat; */
    /* background-size: cover; */
/* } */

p{
    font-weight: bold;
}

.w-container{
    margin: 0 auto;
    position: relative;
}


.source-btn{    
    display: flex;
    width: 250px;
}
/*このページのコモン設定ここまで＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*コンテナの真ん中配置設定*/
h2,h3,section{
 display: block; /*.w-containerに position:relative をかけて基準としています。*/
 text-align: center;
}

/* ヘッダー分全体を下げる */
h2{
    padding-top: 8rem;
}

/* h3の位置調整 */
h3{
    margin: 3rem;
    margin-bottom: 0;
    margin-top: 3rem;
}



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
国産食材セクションの設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 国産食材のコンテナの位置設定 */
.consept-foodstaff-container{
    margin-bottom: 10rem;
}

/*国産食材のそれぞれのこだわりポイントのコンテンツを横並びにする＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.consept-text-container{
    display: flex;
    justify-content: center;
    margin: 5rem;
    margin-top: 3rem;
}

/* こだわりポイント2だけ逆向きに設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.reverse{
    flex-direction: row-reverse;
}

 

/*国産食材のこだわりポイントの吹き出し設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.comfot-food {
    background-color: var(--speech-bubble-color);
    width: 20rem;
    border-radius: 80px;
    padding: 3rem;
    padding-top: 4rem;/*文字が吹き出しの真ん中に来るようにトップの幅で調整*/
    max-height: 18rem;
    max-height: 18rem;
    min-width: 288px;/*文字がはみ出さないように最小幅を指定*/
    position: relative;
    margin-top: 1rem;
    box-shadow: 0px 2px 10px 0px var(--img-shadow-color);

}
.vender{
    background-color: var(--speech-bubble-color);
    width: 20rem;
    border-radius: 80px;
    padding: 3rem;
    max-height: 18rem;
    min-width: 288px;
    position: relative;
    margin-top: 1rem;
    box-shadow: 0px 2px 10px 0px var(--img-shadow-color);

}
.confidence-taste{
    background-color: var(--speech-bubble-color);
    width: 20rem;
    border-radius: 80px;
    padding: 3rem;
    padding-top: 4rem;/*文字が吹き出しの真ん中に来るようにトップの幅で調整*/
    max-height: 18rem;
    min-width: 288px;
    position: relative;
    margin-top: 1rem;
    box-shadow: 0px 2px 10px 0px var(--img-shadow-color);

}

/* こだわりポイントあしらい設定============================== */
.comfot-food::before {
    content: url(../img/consept/consept-point1.png);
    display: block;
    position: absolute;
    top: -3rem;
    left: -4rem;  
}
.vender::after {
    content: url(../img/consept/consept-point2.png);
    display: block;
    position: absolute;
    top: -3rem;
    right: -3rem; 
}
.confidence-taste::before {
    content: url(../img/consept/consept-point3.png);
    display: block;
    position: absolute;
    top: -3rem;
    left: -4rem; 
}
/* こだわりポイントあしらい設定ここまで＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/


/* 吹き出しの三角の設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.triangle{
    content: "";
  
    /* 三角形の描画 */
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid var(--speech-bubble-color);
    margin-right: 3rem;
    height: 4rem;

    /*影をつける*/
     filter: drop-shadow(0px 4px 0px var(--img-shadow-color-pale));

    /* 位置調整 */
    margin-top: 7rem;
    margin-left: 0px;

}

.triangle-reverse{
    content: "";
  
    /* 三角形の描画 */
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 50px solid var(--speech-bubble-color);
    margin: 1rem;
    margin-left: 3rem;
    height: 4rem;

    /*影をつける*/
     filter: drop-shadow(0px 4px 0px var(--img-shadow-color-pale));

    /* 位置調整 ※一品メニューの分は個別に設定しています。 */
    margin-top: 7rem;
    margin-right: 0px;

}
/*国産食材のこだわりポイントの吹き出し設定ここまで＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* タイトル部分の大きさと色設定 */
.title{
    font-size: 1.5rem;
    color: var(--title-color);
    pointer-events: none;/*クリックで詳細表示を無効にする*/
}
span{
    display:block;/*spanはインライン要素なのでブロック要素に変更*/
    margin-top: 1.5rem;
    text-align: left;
    font-family: "Zen Maru Gothic", serif;
    font-weight: bold;
}


/* 国産食材のイメージの設定 丸抜き・影加工 */
.consept-text-container img{
    width: 20rem;
    border-radius: 50%;
    box-shadow: 0px 2px 10px 0px var(--img-shadow-color);
}

/* モバイル版でアコーディオンで隠れるところを表示 */
.box{
    display: block;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
国産食材セクションの設定ここまで
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */




/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
豊富な一品メニューセクションの設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 一品メニューの説明とイメージを横並び中央に設定 */
.consept-onedish-container{
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

/* 一品メニューの吹き出しの設定 */
.consept-onedish-text{
    background-color: var(--speech-bubble-color);
    width: 20rem;
    border-radius: 80px;
    padding: 2rem 3rem;
    max-height: 45rem;
    position: relative;
    margin-top: 15px;
    box-shadow: 0px 2px 10px 0px var(--img-shadow-color);
 
}

/* 一品メニューの吹き出しの三角の位置調整 */
.center{
    margin-top: 20rem;
    margin-right: 9rem;
}


/* 一品メニューのイメージの設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.consept-text-img-container img{
    display: block;
    border-radius: 50%;
    width: 15rem;
    padding: 0.5rem;

}

/* 一品メニューのテキスト間隔の設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.kimchi-text{
    margin-top: 1rem;
}
.scallops-text{
    margin-top: 5rem;
}

.pork-text{
    margin-top: 5rem;
}
/* 一品メニューのテキスト間隔の設定ここまで＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*一品メニュータイトル色・サイズ設定*/
.onedish-title{
    font-size: 1.5rem;
    color: var(--title-color);
    text-align: center;
}

/* 一品メニューの説明文のまとまりの間隔設定 */
.consept-onedish-text span{
    margin: 0px;
}
/* 一覧ボタン非表示 */
.to-menu-btn{
    display: none;
}
/* 詳しく見るボタンの設定 */
.source-btn-container{
    display: flex;
    justify-content: flex-end;
    margin: 3rem;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

モバイル版の記述

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media(max-width: 800px){

/* コモンの設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
 .w-container{
        width: 90vw;
        margin: 0 auto;
        position: relative;/*ここは独自になるかもしれないのでコピー時注意*/
    }

/* コモンの設定ここまで＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

h2{
   padding-top: 7rem; 
}

h3{
    width: 80%; /*そのままだと縮小していくとh3より大きくなってしまうので80％で調整しています。*/
    margin: 0 auto;
    margin-top: 2rem;/*間隔は後で全体の設定に合わせる*/
    margin-bottom: 1rem;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 
国産食材のコンテンツの再配置デザイン設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* コンテナの位置調整 */
.consept-foodstaff-container{
    margin-bottom: 5rem;
}

/* こだわりポイントの囲いの設定 */
    .consept-text-container{
        background-color: var(--speech-bubble-color);
        display: flex;
        flex-direction: column-reverse;/*文字と画像の上下を逆にする。*/
        margin: 0 auto;
        margin-top: 2rem;
        width: 330px;
        border-radius: 80px 80px 60px 60px;
        padding: 3rem;
        padding-bottom: 0;
        text-align: center;
        
    }
/* 国産食材のイメージの設定 大きさ縮小 */
    .consept-text-container img{
    width: 15rem;
}

/* テキストの調整設定 */
    .comfot-food {
        background-color: transparent; /*背景色に透明を指定*/
        width: 15rem;
        padding: 0rem;
        max-height: 18rem;
        margin-top: 1rem;
        box-shadow: none;
        padding-right: 35px;
    }

    .vender{
        background-color: transparent; /*背景色に透明を指定*/
        width: 15rem;
        padding: 0rem;
        max-height: 18rem;
        margin-top: 1rem;
        box-shadow: none;   
        padding-right: 35px;
    }

    .confidence-taste{
        background-color: transparent; /*背景色に透明を指定*/
        width: 15rem;
        padding: 0rem;
        max-height: 18rem;
        margin-top: 1rem;
        box-shadow: none;    
        padding-right: 35px;
    }
    
    
/* 吹き出しの三角を非表示 */
    .triangle, .triangle-reverse{
        display: none;
    }

/* こだわりポイントあしらい設定============================== */
.comfot-food::before {
    content: url(../img/consept/consept-point1.png);
    display: block;
    position: absolute;
    top: -20rem;
    left: -4rem;    
}
.vender::after {
    content: url(../img/consept/consept-point2.png);
    display: block;
    position: absolute;
    top: -20rem;
    right: -0.5rem;    
}
.confidence-taste::before {
    content: url(../img/consept/consept-point3.png);
    display: block;
    position: absolute;
    top: -20rem;
    left: -4rem;    
}
/* こだわりポイントあしらい設定ここまで＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 
国産食材のコンテンツの再配置デザイン設定ここまで
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */




/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 
一品メニューのコンテンツの再配置デザイン設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* コンテンツの背景を白にして影をつける */
.consept-onedish-container{
    position: relative;
    background-color: var(--speech-bubble-color);
    border-radius: 80px 80px 60px 60px;
    /* box-shadow: 0px 2px 10px 0px var(--img-shadow-color); こだわりの背景に合わせて影なしに変更*/
    width: 330px;
    margin: 0 auto;
}


/* 一品メニュー吹き出しメニューの調整 */
.consept-onedish-text{
    background-color: transparent; /*背景色に透明を指定*/
    box-shadow: none;
    padding: 1.5rem 0rem 1.5rem 1.5rem;
    width: 13rem;
}

/* 一品メニュー文字の大きさ調節 */
.consept-onedish-text p{
 font-size: 0.8rem;
}

/* 一品メニューのテキスト間隔の設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.consept-onedish-text span{
    margin-top: -10px;
}
.kimchi-text{
    margin-top: 0.5rem;
}
.scallops-text{
    margin-top: 3.5rem;
}

.pork-text{
    margin-top: 3rem;
    margin-bottom: 3rem;/*詳しく見るボタン実装後要調整*/
}
/* 一品メニューのテキスト間隔設定ここまで＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 一品メニューのタイトル設定 */
.onedish-title{
    font-size: 20px;
}
.porkginger{/*ポークジンジャーのみ文字数が多いためサイズ調整*/
    font-size: 17px;
    font-weight: bolder;
}


/* 一品メニュー画像の大きさ調整 */
.consept-text-img-container img{
    width: 13rem;
    padding: 0.5rem;
    padding-right: 1rem;
}

/* 一品メニュー画像の位置調整＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.consept-text-img-container{
    margin-top: 2rem;
}

.kimchi-img{
    margin-top: 10px;
}

.scallops-img{
    margin-top: 50px;
}


.pork-img{
    margin-top: 60px;
}

/* 一品メニュー画像の位置調整ここまで＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */


/* 詳しく見るボタンの非表示 */
.source-btn{
    display: none;
}

/* 一覧へボタンの設定 */
.to-menu-btn{/*テキストはhtmlのほうに (スペース)を入れて間隔を調節しています。*/
    display: block;
    position: absolute;
    background-color: var(--source-btn-color);
    color: var(--speech-bubble-color);
    font-family: "Zen Maru Gothic", serif;
    font-weight: bold;
    padding: 1rem;
    width: 330px;
    border-radius: 0 0 80px 80px;
    top: 641px;

}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
アコーディオン機能のCSS
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 96%;
    margin:0 auto;
}


.accordion-area section {
	border: 1px solid var(--speech-bubble-color);
}

/*アコーディオンタイトル*/
.title {
    pointer-events: auto;/*クリックで詳細表示を有効にする*/
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: bold;
    padding: 1rem;
    transition: all .5s ease;
    background-color: var(--source-btn-color);
    color: var(--speech-bubble-color);
    width: 330px;
    left: -48px;
    border-radius: 0 0 80px 80px;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: var(--speech-bubble-color);
    
}
.title::before{
    top:48%;
    left: 250px;
    transform: rotate(0deg);
    
}
.title::after{    
    top:48%;
    left: 250px;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
	transform: rotate(45deg);
}

.title.close::after{
	transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
    background: var(--speech-bubble-color);
	margin:0 3% 3% 3%;
    padding: 3%;
    margin-bottom: 1.5rem;
}

/*隠れている場所をタイトルの上に配置する*/
.comfot-food, .vender, .confidence-taste{
    display: flex;
    flex-direction: column-reverse;
}

}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

モバイル版の記述ここまで

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

 紙吹雪のCSS

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
    #particles-js{ 
	position:fixed;/*描画固定*/
	z-index:-1;/*描画を一番下に*/
	width: 100%;
	height: 100%;
}

#wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
	width:100%;
	height: 100%;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

湯気のCSS

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */


/* PC版の湯気の位置設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* こだわりポイント３付近の湯気 */
.consept-text-container.UpMove::after{/*右上の煙*/
    content: url(../img/index/steam-big@3x@1.5x.png);
    width: 50%;
    display: block;
    position: absolute;
    top: 66rem;
    right: 3rem;    
    animation: steam-move-02 5s infinite forwards;
    z-index: 1000;
}   
.consept-text-container.UpMove::before{/*左下の煙*/
    content: url(../img/index/steam-big@3x@1.5x.png);
    width: 50%;
    display: block;
    position: absolute;
    top: 78rem;
    right: 13rem;    
    animation: steam-move-02 5s infinite forwards;
    z-index: 1000;   
    animation-delay: -1.5s;/*afterの画像より早く再生開始*/
}

/*一品料理付近の湯気*/
.consept-text-img-container.UpMove::after{/*すじキムチ付近の湯気*/
    content: url(../img/index/steam-big@3x@1.5x.png);
    width: 50%;
    display: block;
    position: absolute;
    top: 113rem;
    right: 0rem;    
    animation: steam-move-03 7s infinite forwards;
    z-index: 1000;
}

.consept-onedish-text.UpMove::after{/*ホタテバター付近の湯気*/
    content: url(../img/index/steam-big@3x@1.5x.png);
    width: 50%;
    display: block;
    position: absolute;
    top: 10rem;
    right: -14rem;    
    animation: steam-move-04 7s infinite forwards;
    z-index: 1000;
    animation-delay: 1s;/*afterの画像より早く再生開始*/
}
.consept-text-img-container.UpMove::before{
    content: url(../img/index/steam-big@3x@1.5x.png);
    width: 50%;
    display: block;
    position: absolute;
    top: 143rem;
    right: 0rem;    
    animation: steam-move-03 7s infinite forwards;
    z-index: 1000;
    animation-delay: -1s;/*afterの画像より早く再生開始*/
 
} 

/* フッターのウサギにコンテンツが被らないよう調整 */
.consept-onedish{
    margin-bottom: 180px;
}


/* モバイル版の湯気の設定(非表示にする)＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media(max-width: 800px){
    .consept-text-container.UpMove::after{/*味への自信右上の煙*/
        display: none;
    }
    .consept-text-container.UpMove::before{/*味への自信左下の煙*/
        display: none;
    }
    .consept-text-img-container.UpMove::after{/*すじキムチの煙*/
        display: none;
    }
    .consept-onedish-text.UpMove::after{/*ホタテバターの煙*/
        display: none;
    }
    .consept-text-img-container.UpMove::before{/*ポークジンジャーの煙*/
        display: none;
    }
}
/* ipad版湯気非表示＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media(max-width: 1100px){
    .consept-text-container.UpMove::after{/*味への自信右上の煙*/
        display: none;
    }
    .consept-text-container.UpMove::before{/*味への自信左下の煙*/
        display: none;
    }
    .consept-text-img-container.UpMove::after{/*すじキムチの煙*/
        display: none;
    }
    .consept-onedish-text.UpMove::after{/*ホタテバターの煙*/
        display: none;
    }
    .consept-text-img-container.UpMove::before{/*ポークジンジャーの煙*/
        display: none;
    }

}



/* 湯気のアニメーションを定義＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 立ち上る動き */
@keyframes steam-move-01 {
    0% {
    　filter: blur(12px);
      transform: scale(0.8, 0.8) rotateY(0deg);
      opacity: 1;
      bottom: 100px;
    }
    6% {
      opacity: 1;
      top: 30px;
    }
    33% {
      transform: scale(0.9, 1.1) rotateY(30deg);
      opacity: 1;
      top: 5px;
    }
    66% {
      transform: scaleY(1, 0.8) rotateY(4deg);
    }
    100% {
      filter: blur(18px);
      transform: scaleY(1.5, 1.3) rotateY(50deg);
      opacity: 1;
      bottom: 0;
      top: 3px;
    }
  }

  /* その場でフワフワして消える湯気 */
  @keyframes steam-move-02 {
        0%{ 
            filter: blur(12px);
            transform: scale(0.8, 0.8) rotateY(0deg);
            opacity: 0;
        }
        6% {
        　filter: blur(12px);
          opacity: 0.3;
        }
        15% {
          opacity: 0.5;
        }
        33% {
          transform: scale(0.9, 1.1) rotateY(30deg);
          opacity: 0.3;
        }
        66% {
          transform: scaleY(1, 1.2) rotateY(4deg);
        }
        100% {
          filter: blur(18px);
          transform: scaleY(1.5, 1.4) rotateY(50deg);
          opacity: 0;
            }
  }

/* 右にに流れる湯気 */
@keyframes steam-move-03 {
    0%{ 
        filter: blur(12px);
        transform: scale(0.8) rotateY(0deg) translate(20px, -20px);
        opacity: 0.3;
    }
    6% {
    　filter: blur(12px);
      transform: scale(0.9) rotateY(-10deg) translate(30px, -30px);
      opacity: 1;
    }
    15% {
      transform: scale(0.8) rotateY(-20deg) translate(50px, -50px);
      opacity: 0.4;
    }
    33% {
      transform: scale(0.7) rotateY(-30deg)  translate(80px,-80px);
      opacity: 0.8;
    }
    66% {
      transform: scaleY(0.6) rotateY(-35deg) translate(100px,-100px);
    } 
    100% {
      filter: blur(18px);
      transform: scaleY(0.7) rotateY(-40deg) translate(120px,-120px);
      opacity: 0;
        }
}







/* 左にに流れる湯気 */
  @keyframes steam-move-04 {
    0%{ 
        filter: blur(12px);
        transform: scale(0.8) rotateY(0deg) translate(-30px,-30px);
        opacity: 0;
        bottom: 100px;
    }
    6% {
    　filter: blur(12px);
      transform: scale(1) rotateY(-30deg) translate(-50px, -50px);
      opacity: 1;
    }
    15% {
      transform: scale(0.8) rotateY(0deg) translate(-80px, -80px);
      opacity: 0.4;
    }
    33% {
      transform: scale(0.9) rotateY(-30deg)  translate(-100px,-100px);
      opacity: 1;
    }
    66% {
      transform: scaleY(1) rotateY(-35deg) translate(-130px,-130px);
    }
    100% {
      filter: blur(18px);
      transform: scaleY(0.8) rotateY(-50deg) translate(-150px,-150px);
      opacity: 0;
        }
}