@charset "UTF-8";

/*  全体を包むdivのクラス名「wrapper」*/

/* ネイビー背景部分を包むdivのクラス名「background_navy」 */
/* メモ【ネイビー背景部分のフォント指定】　本文：「Noto Sans JP Bold」「Noto Sans JP Regular」 */
.background_navy{
    background-color:#fff;
    color: #e0e0e0;
    font-family: 'Noto Sans JP';
    text-align: center;

    padding: 2% 2% 4% 2%;
}

.background_navy .mv{
    width: 70%;
    height: auto;
}
.background_navy .check{
    display: block;
    max-width: 400px;
    margin: 60px auto 0;
}

/* レッド背景部分を包むdivのクラス名「background_navy」 */
/* メモ【レッド背景部分のフォント指定】　本文：「Noto Sans JP Bold」「Noto Sans JP Regular」 */
.background_red{
    background-image: url(https://miruus.itembox.design/item/gruria_bg_red.svg);
    background-color: #F1EEEC;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    color: #e0e0e0;
    font-family: 'Noto Sans JP';
    text-align: center;
    padding: 12vw 10%;
}
.background_red .top_text1{
    color: #fff;
    font-size: 30px;
    padding-bottom: 0.3em;
    border-bottom: 2px solid #fff;
}
.background_red .top_text1 span{
    color: #FFFFA0;
}
.background_red .top_text2{
    color: #fff;
    font-size: 22px;
}


/* TOPテキストその1のｐのクラス名「top_text1」 */
/* TOPテキストその1(top_text1)の中の黄色い文字は「span」でくくっています */
.top_text1{
    font-weight: bold;
    font-size: 22px;
    line-height: 200%;
    letter-spacing: 1px;
    color: #666464;
    padding: 3% 0% 0% 0%;
    display: inline-block;

    }
    
    .top_text1 span{
    color: #DD4A39;
    padding-bottom: 0.3em;
    border-bottom: 2px solid #DD4A39;
    }
    
    
    /* TOPテキストその2のｐのクラス名「top_text2」 */
    /* TOPテキストその2(top_text2)の中の太い文字は「span」でくくっています */
    .top_text2{
        font-size: 16px;
        /* font-size: 75% */
        line-height: 180%;
        letter-spacing: 2px;
        font-weight: 400;

        padding: 2% 0% 0% 0%;
    }
    .top_text2 span{
        
        font-weight: bold;
        }
    
    
    /* 小文字にするspanのクラス名「small_text」 */
    .small_text{
        font-size: 9px;
        font-weight: 200;
        letter-spacing: 2px;
    }

.background_navy .top_text1 span{
    font-size: 30px;
}

.background_red .top_text2 {
    font-size: 14px;
}

/* ベージュ背景部分を包むdivのクラス名「background_beige」 */
/* メモ【ベージュ背景部分のフォント指定】　英語：Montserrat　日本語：Noto Sans JP */
.background_beige{
    /* background-color:#ede8e5; */
    text-align: center;

    /* padding: 3% 17% 5% 17%; */

}


/* 3カラム全体を包むdivのクラス名「container」 */
.container {
    /*
    display: flex;
    justify-content: space-between;
    */
    margin: 0 auto;

    
  }

  /* 画像　typeの見出しアイコン　icon_type */
.icon_type{
    width: 30%;
    height: auto;

    padding: 3% 0% 5% 0%;
}

/* type1,type2,type3を包むdivのクラス名「type1_contents」 [type2_contents」 「type3_contents」 */
.type1_contents,
.type2_contents,
.type3_contents{
    color: #00172f;
    padding: 1% 2% 0% 2%;

}

/* type1を包むdivのクラス名「type1_contents」 */
/* type2を包むdivのクラス名「type2_contents」 */
/* type3を包むdivのクラス名「type3_contents」 */



/* 白背景箇所を包むdivのクラス名「background_whitebox」 */

.background_whitebox{
    display: flex;
    justify-content: space-between;
    max-width: 1220px;
    margin: 0 auto;
}

.background_whitebox .text{
    flex: 0 0 50%;
    position: relative;
}
.background_whitebox .text:after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background-color: #fff;
    border-radius: 50%;
    width: 100%;
    padding-bottom: 100%;
    box-shadow: 0 0 21px rgb(233 85 50 / 70%);
}
.background_whitebox .text_inner {
    position: relative;
    z-index: 2;
    padding-left: 100px;
    padding-top: 100px;
}

.background_whitebox .text h3{
    font-family: 'Noto Sans JP';
    text-align: left;
    color: #646464;
    padding-top: 0;
    margin-bottom: 1em;
    font-size: 26px;
    line-height: 1.5;
}

.background_whitebox .text p{
    font-family: 'Noto Sans JP';
    text-align: left;
    color: #646464;
    line-height: 1.8;
}
.background_whitebox .text .button{
    width: 100%;
    max-width: 306px;
    display: block;
    margin-top: 2em;
}

.background_whitebox .logo{
    width: 124px;
}

.background_beige {
    background-image: url(https://miruus.itembox.design/item/gruria_bg_lineup_1.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    padding-top: 12vw;
}
.type1_contents {
    background-color: #F1EEEC;
    padding-bottom: 120px;
}
.type2_contents {
    background-image: url(https://miruus.itembox.design/item/gruria_bg_lineup_2.svg);
    background-color: #F1EEEC;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    padding-top: 12vw;
    padding-bottom: 12vw;
}
.type3_contents {
    background-image: url(https://miruus.itembox.design/item/gruria_bg_lineup_3.svg);
    background-color: #EBDDDF;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    padding-bottom: 12vw;
}
.type2_contents .background_whitebox{
    flex-direction: row-reverse;
}


/* 本文英語見出しのｈ2「LINE UP」 */

h2{
    font-family: 'Montserrat';
    font-weight: 600;
    font-size: 50px;
    /* font-size: 300%; */
    color: #DD4A39;
}


/* 本文英語見出しの「LINE UP」 のルビ*/

.background_beige h2 + p {
    margin-bottom: 4em;
}

.background_beige p span{
    font-size: 16px;
    font-weight: 900;
    color: #DD4A39;
}
/* テキスト　p class="lineup_text"「着用スタイルに合わせて選べる3タイプ」 */
.lineup_text{
    font-family: 'Noto Sans JP';
    font-weight:bold;
    font-size: 28px;
    /* font-size: 180%; */
    letter-spacing: 4px;

    padding: 3% 0% 1% 0%;
}



/* 本文英語小見出しのｈ3「SMART」「CLIP ON」「OVER GLASS」 */
h3{
    font-family: 'Montserrat';
    font-weight: 600;
    font-size: 28px;
    letter-spacing: 2px;

    padding: 10% 0% 0% 0%;

}
/* ルビ　class="ruby"　本文英語小見出しのｈ3「SMART」「CLIP ON」「OVER GLASS」のルビ */
.ruby{
    font-family: 'Noto Sans JP';
    font-weight:600;
    font-size: 15px;


    padding: 0% 0% 0% 0%;
}

/* テキスト　ｐ 商品説明文ブロック1 main_text1*/
.main_text1{
    font-family: 'Noto Sans JP';
    font-weight:400;
    font-size: 14px;
    padding: 5% 0% 0% 0%;
}

/* テキスト　ｐ 商品説明文ブロック2 main_text2*/
.main_text2{
    font-family: 'Noto Sans JP';
    font-weight:700;
    font-size: 16px;

    padding: 5% 0% 6% 0%;
}

/* 画像　商品説明写真1 img glass1*/
.glass1{
    padding: 2% 9% 2% 9%;
}

/* 画像　商品説明写真2 img glass2*/
.glass2{
    padding: 0% 9% 0% 9%;
}

.button{

    width: 80%;
    height: auto;

 padding: 0% 0% 10% 0%;
}


.sp_br {
    display: none; 
  }


/* レスポンシブレイアウト */

@media (max-width: 1200px) {
    /* この中に中間サイズ用のCSSを記述 */


    /* ベージュ背景部分を包むdivのクラス名「background_beige」 */
    /* メモ【ベージュ背景部分のフォント指定】　英語：Montserrat　日本語：Noto Sans JP */
    .background_beige{
        /* background-color:#ede8e5; */
        text-align: center;
        overflow: hidden;
    }

    .background_whitebox .text_inner{
        padding: 10vw 10% 0;
    }
    .background_whitebox .text h3 {
        font-size: 20px;
    }
    .background_whitebox .text p {
        font-size: 14px;
    }
    .background_whitebox .logo {
        width: 102px;
    }
    .background_whitebox .text:after {
        width: min(130vw, 520px);
        padding-bottom: min(130vw, 520px);
    }
    .background_whitebox .image {
        position: relative;
        z-index: 10;
    }
    .background_red{
        background-image: url(https://miruus.itembox.design/item/gruria_bg_red_sp.png);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
        padding-bottom: 80px;
    }
}

@media (max-width: 800px) {
    /* この中にスマホ用のCSSを記述 */

    .sp_br {
        display: block; 
      }
    

    /*  全体を包むdivのクラス名「wrapper」*/

/* ネイビー背景部分を包むdivのクラス名「background_navy」 */
/* メモ【ネイビー背景部分のフォント指定】　本文：「Noto Sans JP Bold」「Noto Sans JP Regular」 */
.background_navy{
    padding: 13% 2% 10% 2%;
}

.background_navy .mv{
    width: 90%;
    height: auto;
}
.background_navy .check{
    width: 90%;
    margin: 10% auto 0;
}

/* TOPテキストその1のｐのクラス名「top_text1」 */
/* TOPテキストその1(top_text1)の中の黄色い文字は「span」でくくっています */
.top_text1{
    font-weight: bold;
    font-size: 15px;
    line-height: 200%;
    letter-spacing: 1px;

    padding: 10% 0% 0% 0%;

    }
    
    .top_text1 span{
    color: #DD4A39;
    /* font-size: 120% */

    }
    
    
    /* TOPテキストその2のｐのクラス名「top_text2」 */
    /* TOPテキストその2(top_text2)の中の太い文字は「span」でくくっています */
    .top_text2{
        font-size: 14px;
        /* font-size: 75% */
        line-height: 200%;
        letter-spacing: 2px;
        font-weight: 400;

        padding: 6% 0% 0% 0%;
    }
    .top_text2 span{
        
        font-weight: bold;
        }
    
    
    /* 小文字にするspanのクラス名「small_text」 */
    .small_text{
        font-size: 12px;
        font-weight: 200;
        letter-spacing: 2px;
    }


/* ベージュ背景部分を包むdivのクラス名「background_beige」 */
/* メモ【ベージュ背景部分のフォント指定】　英語：Montserrat　日本語：Noto Sans JP */
.background_beige{
    text-align: center;
    overflow: hidden;
}
.background_whitebox .text  {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.background_whitebox .text_inner{
    padding: 10vw 10% 0;
}
.background_whitebox .text h3 {
    font-size: 20px;
}
.background_whitebox .text p {
    font-size: 14px;
}
.background_whitebox .image {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.background_whitebox .logo {
    width: 102px;
}
.background_whitebox .text:after {
    width: min(130vw, 520px);
    padding-bottom: min(130vw, 520px);
}


/* 3カラム全体を包むdivのクラス名「container」 */
.container {
    padding: 0;
  }

  /* 画像　typeの見出しアイコン　icon_type */
.icon_type{
    width: 30%;
    height: auto;

    padding: 10% 0% 5% 0%;
}

/* type1,type2,type3を包むdivのクラス名「type1_contents」 [type2_contents」 「type3_contents」 */
.type1_contents,
.type2_contents,
.type3_contents{
    color: #00172f;

}

/* type1を包むdivのクラス名「type1_contents」 */
/* type2を包むdivのクラス名「type2_contents」 */
/* type3を包むdivのクラス名「type3_contents」 */

.background_beige {
    background-image: url(https://miruus.itembox.design/item/gruria_bg_lineup_1_sp.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    padding-top: 20vw;
}
.type1_contents {
    background-color: #F1EEEC;
    padding-bottom: 20vw;
    padding-bottom: 0;
}
.type2_contents {
    background-image: url(https://miruus.itembox.design/item/gruria_bg_lineup_2_sp.png);
    background-color: #F1EEEC;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    padding-top: 40vw;
    padding-bottom: 0;
}
.type3_contents {
    background-image: url(https://miruus.itembox.design/item/gruria_bg_lineup_3_sp.png);
    background-color: #EBDDDF;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    padding-top: 40vw;
    padding-bottom: 20vw;
}

/* 白背景箇所を包むdivのクラス名「background_whitebox」 */

.type2_contents .background_whitebox,
.background_whitebox{
    flex-direction: column-reverse;
}

.background_whitebox .image {
    position: relative;
    z-index: 10;
}

.background_whitebox .text .button {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;    
}

/* 本文英語見出しのｈ2「LINE UP」 */

h2{
    font-family: 'Montserrat';
    font-weight: 900;
    font-size: 34px;
    
    padding: 10% 0% 0% 0%;
}


/* 本文英語見出しの「LINE UP」 のルビ*/

.background_beige p span{
    font-size: 13px;
    font-weight: 900;
}
/* テキスト　p class="lineup_text"「着用スタイルに合わせて選べる3タイプ」 */
.lineup_text{
    font-family: 'Noto Sans JP';
    font-weight:bold;
    font-size: 21px;
    letter-spacing: 4px;

    padding: 8% 0% 1% 0%;
}



/* 本文英語小見出しのｈ3「SMART」「CLIP ON」「OVER GLASS」 */
h3{
    font-family: 'Montserrat';
    font-weight: 600;
    font-size: 28px;
    letter-spacing: 2px;

    padding: 10% 0% 0% 0%;

}
/* ルビ　class="ruby"　本文英語小見出しのｈ3「SMART」「CLIP ON」「OVER GLASS」のルビ */
.ruby{
    font-family: 'Noto Sans JP';
    font-weight:600;
    font-size: 15px;


    padding: 0% 0% 0% 0%;
}

/* テキスト　ｐ 商品説明文ブロック1 main_text1*/
.main_text1{
    font-family: 'Noto Sans JP';
    font-weight:500;
    font-size: 14px;
    padding: 5% 0% 0% 0%;
}

/* テキスト　ｐ 商品説明文ブロック2 main_text2*/
.main_text2{
    font-family: 'Noto Sans JP';
    font-weight:800;
    font-size: 16px;
    line-height: 120%;

    padding: 5% 0% 8% 0%;
}

/* 画像　商品説明写真1 img glass1*/
.glass1{
    width: 90%;
    height: auto;

    padding: 2% 9% 2% 9%;
}

/* 画像　商品説明写真2 img glass2*/
.glass2{

    display: none; 
}

.button{

    width: 80%;
    height: auto;

 padding: 0% 0% 10% 0%;
}
.background_navy .top_text1 span{
    font-size: 19px;
}
.background_red .top_text1{
    font-size: 19px;
}

}