/***************************************************
*** 1.全サイズ共通設定 Common settings for all sizes***
****************************************************/

    /*** タイポグラフィ typography ***/
    * {
        font-family:'M PLUS Rounded 1c', sans-serif;
        font-size: 16px;
        font-weight: 400;
        text-decoration: none;
    }
    h1, h2, h3, h4, h5, h6{
        font-family: 'Noto Serif JP', serif;
        font-weight: 400;
    }
    .mrb-heading, .fs-c-subSection__title, .fs-c-wishlistProduct__title{
        border: none;
        letter-spacing: 2px;
        padding: 0;
    }
    p{
        font-weight: 400;
        line-height: 1.7;
    }
    a:hover {
        opacity: 0.7;
        transition: 0.3s;
        text-decoration: none;
    }


    /*** レイアウト全般 General layout ***/
        /** ヘッダー Header **/
        .fs-p-headerNavBar{
            background-color: #ABD140;
        }

        /** サイドバーをドロワーメニューに変更 Change sidebar to drawer menu **/
        .fs-p-drawer{
            padding: 10px 10px 24px 10px;
            position: fixed;
            z-index: 500;
            width: 50%;
            transform: translateX(-101%);
            transition-timing-function: ease-in-out;
            transition-duration: 0.3s;
        }
        .fs-p-drawerButton--overlay{
            background: #000;
            opacity: 0;
            pointer-events: none; /*ポインタの動作全部無効化*/
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            right: 0;
            z-index: 499;
        }
        .fs-p-drawer, .fs-p-drawerButton--overlay{
            -webkit-transform: all .7s;
            transition: all .7s;
        }
        .fs-p-ctrlDrawer:checked ~ .fs-p-drawer{
            transform: translateX(0);
        }
        .fs-p-ctrlDrawer:checked ~ .fs-p-drawerButton--overlay{
            opacity: 0.7; /* メインエリアを暗くする */
            pointer-events: auto; /* ポインタの動作デフォルトに戻す */
        }

        .fs-p-drawer__loginLogout, .fs-p-drawer__welcomeMsg{
            display: block;
        }
        .fs-p-drawerButton{
            display: inline-block;
        }
        .fs-p-drawerButton__icon{
            font-size: 40px;
        }

        /** メインセクションを全幅に変更 Change main section to full width **/
        .fs-l-sideArea + .fs-l-pageMain, .fs-l-pageMain{
            width: 100%;
            max-width: none;
        }
        /** セクション section **/
        .mrb-section-lightgreen{
            background-color: rgba(237,244,237,0.99);
        }

        /** フッター Footer **/
        .mrb-footer-section{
            border: none;
            margin-top: 0;
            background-color: rgba(32,41,25,0.85);
        }
        .mrb-footer-section > div{
            color: #ffffff;
        }
        .mrb-footer .five-per{
            margin: 2rem 0;
            max-width: 240px;
        }
        .fs-p-footerCopyright{
            background-color: #202919;
        }

        /** 横幅のコントロール width control **/
        .mrb-section-container-max1000{
            max-width:1000px;
            margin-left: auto;
            margin-right: auto;
        }
        .mrb-section-container-max600{
            max-width:600px;
            margin-left: auto;
            margin-right: auto;
        }
        .fs-l-main{
            max-width: none;
        }
    

        /** 揃えの指定 Alignment specification **/
        .fs-p-footerSnsLink{
            justify-content: start;
        }
        .mrb-btn-align-left{
            justify-content: start;
        }
        .mrb-btn-align-center , .fs-c-buttonContainer--myPageTop{
            justify-content: center;
        }
        .mrb-align-center, .fs-c-wishlistProduct__title{
            text-align: center;
        }
        .mrb-align-left{
            text-align: left;
        }
    

    .mrb-col{
        padding: 10px;
    }

    /*** ドロワーメニュー drawer menu ***/
    .fs-p-sideMenu a:hover{
        color: #ffffff;
        background-color: #FD6892;
    }
        /** カテゴリLv1 Category Lv1 **/
        .fs-p-sideMenu a.fs-pt-menu__link--lv1::after{
            content: none;
            content: '\f105';
            font-family: "Font Awesome 5 Free" !important; /* FSデフォルトCSSにてfont-familyに!important指定があるため、上書きに!importantが必要 */
            font-weight: 900;
            font-size: inherit;
            line-height: inherit;
        } 
        /** カテゴリLv2 Category Lv2**/
        .fs-p-sideMenu .fs-pt-menu__heading.fs-pt-menu__heading--lv2{
            border: none;
        }
        .fs-p-sideMenu a.fs-pt-menu__link--lv2::before{
            content: none;
            content: '\f105';
            font-family: "Font Awesome 5 Free" !important; /* FSデフォルトCSSにてfont-familyに!important指定があるため、上書きに!importantが必要 */
            font-weight: 900;
            font-size: inherit;
            line-height: inherit;
            margin-right: 8px;
        }

    /*** ボタン・アイコン button・icon ***/
    .fs-c-button--primary:hover{
        color: rgba(253,104,146,0.8);
        background-color: rgba(255,255,255,0.8);
    }
    .fs-p-drawer__loginLogout__logout:hover, .fs-p-drawer__loginLogout__login:hover{
        background-color: #FD6892;
        color: #ffffff;
    }
    .mrb-social-icon{
        border-radius: 50%;
        padding: 10px;
        text-align: center;
        background-color: #FD6892;
    }
    .mrb-social-icon:hover{
        background-color: rgba(255,255,255,0.8);
    }
    .mrb-social-icon i{
        color: #ffffff;
        font-size: 20px;
        width: 1em;
        height: 1em;
        display: block;
    }
    .mrb-social-icon:hover i{
        color: rgba(253,104,146,0.8);
    }

/*****************************
*** 個別ページ関連 Individual page related ***
******************************/

    /*** フロントページ front page ***/
    .mrb-front-trouble{
        background-color: rgba(237,244,237,0.99);
    }
    .mrb-front-news{
        background-color: rgba(135,142,118,0.15);
    }
    .mrb-products-category-col .fs-pt-column__heading{
        /* 商品カテゴリ表示コラム　見出し */
        font-family: 'Noto Serif JP',serif;
        font-weight: 400;
        font-size: 2.4rem; /* =24px */
        text-align: center;
    }
    .mrb-products-category-col .fs-pt-column__description{
        /* 商品カテゴリ表示コラム　説明文 */
        color: inherit;
    }

    /*** 商品グループページ Product group page ***/
    .fs-c-subgroupList__link::after{
        content: none;
        content: '\f105';
        font-family: "Font Awesome 5 Free" !important; /* FSデフォルトCSSにてfont-familyに!important指定があるため、上書きに!importantが必要 */
        font-weight: 900;
        font-size: inherit;
        line-height: inherit;
    }
    
    /*** 個別商品詳細ページ Individual product detail page ***/
        /** 商品名 **/
        .fs-c-productNameHeading__copy, .fs-c-productNameHeading__name{
            display: inline-block;
            width: 100%;
        }
        .fs-c-productNameHeading__name{
            font-size: 3rem; /* =30px */
        }
        /** 商品番号 Item Number **/
        .fs-c-productNumber{
            border: none;
            padding-left: 0;
        }
        .fs-c-productNumber span{
            font-size: 1.1rem; /* =11px */
            color: #878E76;
        }
        /** 商品価格 Item price **/
        .fs-c-price__value{
            font-size: 4rem; /* =40px */
        }
        .fs-c-productPrices--productDetail div.fs-c-productPrice:nth-last-child(2) .fs-c-price__value
        , .fs-c-productListItem__prices div:nth-last-child(2) .fs-c-price__value{
            font-size: inherit;
        }
        .fs-c-productPrice__addon *{
            font-size: 1.2rem; /* =12px */
        }
        /** 商品数量選択＆お気に入り追加ボタン Product quantity selection & add favorite button **/
        .fs-c-productQuantityAndWishlist{
            display: block;
        }
        .fs-c-quantity{
            display: block;
            max-width: 5em;
        }
        .fs-c-productQuantityAndWishlist__wishlist{
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem 0;
        }
        .fs-c-productQuantityAndWishlist__quantity.fs-c-quantity.fs-system-assistTarget::before{
            content: "数量選択：";
        }
        /** カートに入れるボタン add to cart button **/
        .fs-c-button--addToCart--detail{
            padding: 2.0rem 0.8rem; /* 上下=20px 左右=8px */
        }
        .fs-c-button--addToCart--detail::before{
            content: "\f217";
            font-family:"Font Awesome 5 Free";
            font-weight:900;
            font-size: 2rem; /* =20px */
            margin-right: 8px;
        }
        /** 関連商品 Related products **/
        .fs-body-product .fs-c-featuredProduct{
            border-bottom: 2px solid currentColor;
        }
    
    /*** ショッピングカート shopping cart ***/
    .fs-c-cartDiscountInfo__body div{
        display: block;
    }
    /*** レビューを書く write a review ***/
    .fs-c-reveiwNotes{
        border: none;
    }
    /*** 会員登録完了 Membership registration completed https://www.mirobeena.shop/p/register/success ***/



    /*** 会員登録ページ Member registration page https://www.mirobeena.shop/p/register ***/
    .mrb-register-section-form{
        background-color: rgba(237,244,237,0.99);
    }

    /*** お気に入りログイン favorite login https://www.mirobeena.shop/p/login?type=wishlist ***/
    .fs-body-wishlist-login .fs-c-loginForm{
        margin: 24px auto;
    }

    /*** 商品検索結果一覧 List of product search results ***/
    .fs-c-sortItems__list__item:hover{
        color: #ffffff;
        background-color: rgba(253,104,146,0.8);
    }
    .fs-c-sortItems__list__item.is-active{
        background-color: rgba(253,104,146,0.8);
    }
    .fs-p-productSearch{
        border: none;
    }
    .fs-c-productList__list article{
        border: none;
    }
    .fs-c-productList__list .fs-c-price__value{
        font-size: 2rem;
    }

/*****************************
*** ヘッダーナビゲーション関連 Header navigation related ***
******************************/
.fs-p-headerNavBar{
    border: none;
}
.fs-l-header--min{
    border: none;
}

/************************
*** フォーム(input)関連 ***
*************************/

/*** 検索ボックス ***/
span.fs-p-searchForm__inputGroup{
    border: none;
}

/************************
*** 2.スクリーンサイズ別 By screen size ***
*************************/

/****************************************************
*** FSサンプルテンプレートのbreak pointは5つ（=6段階変形）
*** ①
*** | 480px
*** ②
*** | 600px
*** ③
*** | 768px
*** ④
*** | 960px
*** ⑤
*** | 1200px
*** ⑥
*****************************************************/

/****************************************************
*** MRBテンプレートのbreak pointはオフィシャルサイトを踏襲して
*** 2つ（=3段階変形）にする
*** ①
*** | 768px
*** ②
*** | 1025px
*** ③
*****************************************************/

/************************
*** スマホ用スタイル指定 Style specification for smartphones ***
*************************/
@media screen and (max-width: 768px) {

    /*** タイポグラフィ共通 common typography ***/
    .mrb-h1{
        font-size: 30px;
    }
    .fs-c-price__value{
        /* 個別商品ページ以外（一覧等）で表示される商品価格は小さめ */
        font-size: 2rem; /* =20px */
    }
    .mrb-h2, .fs-c-wishlistProduct__title{
        font-size: 25px;
    }
    /* コラムパーツタイポ column parts typo */
    .fs-pt-column__heading{
        font-size: 1.8rem; /* =18px */
        text-align: center;
    }

    /*** レイアウト全般 General layout ***/
    .fs-l-main{
        margin: 0;
        padding: 0;
    }
    .mrb-section-wrap-2col{
        display: grid;
        grid-template-columns: 1fr;
    }
    .mrb-spacer-middle{
        height: 30px;
    }
    .mrb-spacer-large{
        height: 60px;
    }

    /*** ドロワーメニュー drawer menu ***/
    .fs-l-sideArea{
        max-width: none; /* FSデフォルトCSSによるmax-width:240px(@media:1200px以上)を解除 */
        width: 100%;
    }

    /*** ヘッダー Header ***/
    a.logo__link{
        text-align: center;
    }
    .mrb-header-logo{
        width: 70%;
        height: auto;
        max-height: 80px; /* FSデフォルトCSSのmax-height:48pxを解除 */
    }
    /*** 検索ボックス search box ***/
    span.fs-p-searchForm__inputGroup{
    border: 1px solid #41493C;
    }

    /*** セクション共通 common to section ***/
    .mrb-section{
        padding: 40px 10px;
    }
    .mrb-section-padding-0{
        padding: 0;
    }
    .mrb-section-padding-bottom-0{
        padding-bottom: 0;
    }

    /*** フロントページ front page ***/
    .mrb-products-category-col .fs-pt-column__description{
        /* 商品カテゴリ表示コラム　説明文 */
        text-align: center;
    }

    /*** 個別商品詳細ページ Individual product detail page ***/
        /** 商品価格 Item price **/
        .fs-body-product .fs-l-productLayout.fs-system-product .productLayout__item--2 .fs-c-price__value{
            /* 商品詳細ページ内のメイン商品紹介エリアの価格表示は大きめ */
            font-size: 4rem; /* =40px */
        }
        /** 商品数量選択＆お気に入り追加ボタン Product quantity selection & add favorite button **/
        .fs-c-productQuantityAndWishlist__wishlist{
            justify-content: start;
        }
        /** カートに入れるボタン add to cart button **/
        .fs-c-button--addToCart--detail{
            min-width: 100%;
        }

}
/*** ↑↑スマホ用スタイル指定ここまで Up to here to specify the style for smartphones↑↑ ***/

/*************************************************
*** タブレット用スタイル指定 Styling for tablets ***
**************************************************/
@media screen and (min-width: 769px) and (max-width: 1024px){

    /*** タイポグラフィ typography ***/
    .mrb-h1{
        font-size: 50px;
    }
    .mrb-h2, .fs-c-wishlistProduct__title{
        font-size: 40px;
    }

    /*** レイアウト全般 General layout ***/
    .fs-l-main{
        margin: 0;
        padding: 0;
    }
    .mrb-section-wrap-2col{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .mrb-spacer-middle{
        height: 50px;
    }
    .mrb-spacer-large{
        height: 100px;
    }
    /*** ヘッダー Header ***/
    .mrb-header-logo{
        max-height: 80px;
    }

    /*** 検索ボックス Search box ***/
    span.fs-p-searchForm__inputGroup{
        border: 1px solid #41493C;
    }

    /*** セクション Section ***/
    .mrb-section{
        padding: 80px 20px;
    }
    .mrb-section-padding-bottom-0{
        padding-bottom: 0;
    }

    /*** フロントページ Top page ***/
    .mrb-products-category-col .fs-pt-column__description{
        /* 商品カテゴリ表示コラム　説明文 */
        text-align: center;
    }

    /*** 商品詳細ページ Product detail page ***/
    .fs-l-product4 .fs-l-productLayout{
        grid-template-columns: calc(50% - 16px / 2) calc(50% - 16px / 2);
    }

    /*** 商品検索結果ページ Product search result page ***/
    .fs-p-productSearch__inputTable:nth-child(1){
        grid-row: 1;
        grid-column: 1;
    }
    .fs-p-productSearch__inputTable:nth-child(2){
        grid-row: 1;
        grid-column: 2;
    }
    .fs-p-productSearch__searchButtonContainer{
        grid-row: 3;
    }

}
/*** ↑↑タブレット用スタイル指定ここまで End of styling for tablets↑↑ ***/

/**********************************************
*** PC用スタイル指定 Style specification for PC ***
**********************************************/
@media screen and (min-width: 1025px){

    /*** タイポグラフィ typography ***/
    .mrb-h1{
        font-size: 50px;
    }
    .mrb-h2, .fs-c-wishlistProduct__title{
        font-size: 40px;
    }

    /*** レイアウト全般 General layout ***/
    .fs-l-main{
        margin: 0;
        padding: 0;
    }
    .mrb-section-wrap-2col{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .mrb-spacer-middle{
        height: 50px;
    }
    .mrb-spacer-large{
        height: 100px;
    }

    /*** ドロワーメニュー drawer menu ***/
    .fs-l-sideArea{
        max-width: none; /* FSデフォルトCSSによるmax-width:240px(@media:1200px以上)を解除 */
        box-shadow: 1px 1px 5px #b2b2b2;
    }

    /*** ヘッダー Header ***/
    .mrb-header-logo{
        max-height: 80px;
    }

    /*** セクション Section ***/
    .mrb-section{
        padding: 80px 20px;
    }
    .mrb-section-padding-bottom-0{
        padding-bottom: 0;
    }

    /*** フロントページ Top page ***/
    .mrb-products-category-col .fs-pt-column__description{
        /* 商品カテゴリ表示コラム　説明文 */
        text-align: left;
    }

    /*** 商品詳細ページ Product detail page ***/
    .fs-l-product4 .fs-l-productLayout{
        grid-template-columns: calc(50% - 16px / 2) calc(50% - 16px / 2);
    }
    

    /*** 商品検索結果ページ Product search result page ***/
    .fs-p-productSearch__inputTable:nth-child(1){
        grid-row: 1;
        grid-column: 1;
    }
    .fs-p-productSearch__inputTable:nth-child(2){
        grid-row: 1;
        grid-column: 2;
    }
    .fs-p-productSearch__searchButtonContainer{
        grid-row: 3;
    }

}
/*** ↑↑PC用スタイル指定ここまで End of style specification for PC↑↑ ***/

  /*** 商品ページ Youtube page settings ***/
.youtube-video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.youtube-video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.youtube-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}