@charset "utf-8";
*{
    padding: 0;
    margin: 0;
}

/* LP画像のみの構築：既存コード */
#main {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

#cr {
    width: 100%;
    max-width: 600px;
    margin: 50px auto 0 auto;
    text-align: center;
    color: #333;
    font-size: 0.8rem;
    display: flex;
    justify-content: center;
}
.system_top{
    text-align:center;
}

.btn {
    padding: 0.5em 0;
    font-size: 1.8rem;
    width: 90%;
    margin: 0 auto;
}

img.lp {
    width: 100%;
    max-width: 600px;
}

/* lpテキスト再生成：追加css */
body{
    padding: 10px;
    font-family:'M PLUS Rounded 1c','Kosugi Maru', "HG丸ｺﾞｼｯｸM-PRO",'MS PGothic',"Hiragino Kaku Gothic Pro W3",  sans-serif;
    font-weight: 400;
    display: flex;
    flex-direction: column;
}

h1{padding-top: 5px;
    display: inline;
}

h1 {
    font-family: 'Kosugi Maru';
    padding-top: 1rem;
    background:linear-gradient(transparent 75%, #ff6 60%);
    font-weight: bold;
    font-style: italic; /* タイトルを斜体にする */
    font-size: 1.98rem; 
}

/* heading タイトル～iOS...OK!まで*/
.heading {
    display: grid; /* グリッドコンテナとして設定 */
    grid-template-columns: 65% 35%; /* 2列のグリッド */
    grid-template-rows: 45% 55%; /* 2行のグリッド */
}

.contents {
    padding-left: 10px;
    grid-column: 1 / 2; /* 1列目に配置 */
    grid-row: 1 / 2; /* 1行目に配置 */
}

.container_text {
    align-self: start;
    margin-top: 20px;
    margin: 15px 15px;
    grid-column: 1 / 2; /* 2列目に配置 */
    grid-row: 2 / 3; /* 1行目から2行目にまたがって配置 */
}
.container_text span{
    font-weight: bold;
}
.order {
    height: 100%;
    width: 100%;
    height: 300px;
    align-self: center; /* 垂直方向（上下）の中央に配置 */
    justify-self: center; /* 水平方向（左右）の中央に配置 */
    grid-column: 2 / 3; /* 1列目に配置 */
    grid-row: 1 / 3; /* 2行目に配置 */

}

.contents ul{
    list-style: none;
    font-weight: bold;
    font-size: 1.4rem;
    text-align: left; /* テキストを左揃えにする */
    letter-spacing: 0.4px; /* 段落の文字間を少し広げる */
    line-height: 2.5rem;
    padding-left: 0.5rem;
    margin-top: 20px;
    padding-bottom: 10px;
}
.contents ul li{
    background:url(../img/arrow_trans.png) no-repeat 0 center;
    background-size:auto 20px;
    padding-left: 30px;
    text-align: left;
    font-weight: bold;
    margin-bottom: 5px;
}
.contents ul li span{
    font-weight: bold;
}
.contents span{
    font-weight: bold;
}
.container_text p{
    display: block;
    font-size: 1rem;
    color: rgb(70, 69, 69);
    font-family: "メイリオ";
    text-align: left; /* テキストを左揃えにする */
    letter-spacing: 0.3px; /* 段落の文字間を少し広げる */
    line-height: 1.5rem;
    text-align: justify;
    padding-right: 0.6rem;
    padding-left: 1rem;
    margin-bottom: 40px;
}

.contsntslist img {
    max-width: 100%;
    height: auto;
}

.container01,.container02,.container03{
    display: flex;  
    align-items: center;
    

}
.container02{
    padding: auto;
    padding-top: 1rem;
}
.container03{
    padding: auto;
    padding-top: 1rem;
    padding-bottom: 1.2rem;
}

.font_pink {
    color: rgb(236, 30, 121);
    font-weight: bold;
}
.smallfont_pink{
    text-align: right;
    padding-right: 1rem;
    color: rgb(236, 30, 121);
    font-family: "メイリオ";
    font-weight: bold;
    padding-bottom: 1.5rem;
    margin-top: -20px;
}

.square_red{
    background-color: #FFCBCB;
    max-width: 100%;
    height: 100%;
    height: 110px;
    padding-left: 20px;
    margin-bottom: 25px;
}
.square_red h2{
    font-size: 2.6rem;
    text-align: center;
    font-family: "HG丸ｺﾞｼｯｸM-PRO",'MS PGothic','Kosugi Maru',"HG丸ｺﾞｼｯｸM-PRO","Hiragino Kaku Gothic Pro W3",  sans-serif;
}
.square_contets small {
    font-family:'M PLUS Rounded 1c', "メイリオ";
    font-weight: 300;
    font-weight: bold;
    padding-top: 10px;
    font-size: 1.2rem;
    text-align: left; /* smallタグ内のテキストを左揃えにする */
    padding-left: 10px;
    display: block; /* smallタグをブロック要素にする */
}
.tow_weekline{    
    font-weight: bold;
    font-size: 2.8rem;
    
}
.tow_weekline span{
    color:rgb(255, 0, 0);
    padding-left: 8px;
    padding-right: 8px;
    
}
.trial_recommend{
    font-weight: bold;
    padding: 15px;
    font-size: 1.3rem;
}

.user1{
    margin-top: 20px;
    margin-bottom: 100px;
    padding-top: 20px;
}
.user2{
    margin-top: 20px;
    margin-bottom: 50px;
    padding-top: 20px;
}

/* ゴールド*/
.gradation_gold{

    background: linear-gradient(#dfc77b,#FFF);
    max-width: 100%;
    width: 100%;
    height: 100%;
    height: 80px;
    margin-top: 30px;
    margin-bottom: 10px;
}

/* グリッドシステム */
.square_gold{
    padding-top: 15px;
}
.gradation_gold h2{
    /* font-weight: bold; */
    /* font-family: "HG丸ｺﾞｼｯｸM-PRO"; */
    font-family: 'Kosugi Maru',"HG丸ｺﾞｼｯｸM-PRO",'MS PGothic',"Hiragino Kaku Gothic Pro W3",  sans-serif;
    font-weight: 300;
    font-size: 1.7rem;
}
.gridrow_flex01{
    display: flex;
    padding-top: 30px;
    justify-content: left;
    align-items: left;
    text-align: left;
    }
.mokuji-container{
    text-align: left; /* テキストを左揃えにする */
}

.col-6 p{
    font-size: 1rem;
    color: rgb(77, 77, 77);
    font-family: "メイリオ";
    text-align: left; /* テキストを左揃えにする */
    letter-spacing: 0.2px; /* 段落の文字間を少し広げる */
    line-height: 1.5rem;
    text-align: justify;
    padding-right: 1rem;
    padding-bottom: 3rem;
    margin-top: -10px;
}
/* h3とピンク矢印の設定 */
/* [テキスト]＋[→] の設定*/
.rcustom-arrow{
    text-align: left;
    font-weight: bold;
    font-size: 1.45rem;
    padding-top: 5px;
    position: relative;
    padding-right: 50px; /* 右側にスペースを確保 */
    font-weight: bold;
    padding-bottom: 15px;
}
.rcustom-item::after {
    content: ""; /* 内容は空に */
    position: absolute;
    margin-left: 10px;
    background: url('../img/arrow2_right.png') no-repeat ; /* 画像のURLを指定 */
    width: 80px; /* 画像の幅を設定 */
    height: 80px; /* 画像の高さを設定 */
}

/* [←]＋[テキスト] の設定*/
.lcustom-arrow{
    font-weight: bold;
    font-size: 1.45rem;
    position: relative;
    font-weight: bold;
    padding-left: 45px;
}
.lcustom-item::before {
    content: ""; /* 内容は空に */
    position: absolute;
    left: 0px;
    top: -2px;
    background: url('../img/arrow2_left.png') no-repeat  ; /* 画像のURLを指定 */
    width: 80px; /* 画像の幅を設定 */
    height: 80px; /* 画像の高さを設定 */
}
/* [→]+[テキスト]の設定 */
.r-lcustom-arrow{
    font-weight: bold;
    font-size: 1.45rem;
    position: relative;
    font-weight: bold;
    padding-left: 50px;
}
.r-lcustom-item::before {
    content: ""; /* 内容は空に */
    display: inline-block;
    position: absolute;
    padding-left: 35px;
    /* left: 10px; */
    left: 5px;
    top: -2px;
    background: url('../img/arrow2_right.png') no-repeat  ; /* 画像のURLを指定 */
    width: 80px; /* 画像の幅を設定 */
    height: 80px; /* 画像の高さを設定 */
}

/* 目次と五十音 */
.mokuji-container {
    display: grid; /* グリッドコンテナとして設定 */
    grid-template-columns: 15% 70% 15%; /* 1列のグリッド */
    /* padding: -100px auto ; */
    margin-top: -50px auto;
    margin-bottom: -40px;
    /* grid-template-rows: 50% 50%;  */
}
.mokuji-container img,p{
    display: block;
    margin: 0 auto;
    text-align: center;
}
.mokuji-container p{
    margin-top: -30px;
    font-size: 1rem;
    color: rgb(77, 77, 77);
    font-family: "メイリオ";
    text-align: left; /* テキストを左揃えにする */
    letter-spacing: 0.2px; /* 段落の文字間を少し広げる */
    line-height: 1.5rem;
    text-align: justify;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-bottom: 3rem;
}
/* [→]+[テキスト]の設定 */
.mokuji-container .commonr-lcustom-arrow{
    padding-left: 30px;
    font-weight: bold;
    font-size: 1.45rem;
    position: relative;
    font-weight: bold;
}
.mokuji-container .cmmonr-lcustom-item::before {
    content: ""; /* 内容は空に */
    display: inline-block;
    position: absolute;
    left: -20px;
    top: -2px;
    background: url('../img/arrow2_right.png') no-repeat  ; /* 画像のURLを指定 */
    width: 80px; /* 画像の幅を設定 */
    height: 80px; /* 画像の高さを設定 */
}
.mokuji-gold01{
    grid-column: 2 / 3; /* 1列目に配置 */
}
.mokuji-gold02{
    grid-column: 2 / 3; /* 1列目に配置 */
}
.mokuji-gold01 h2{
    padding-left: 300px;
}
.mokuji-gold02{
    align-items: center;
    margin: 0 auto;
}

/* 判例索引 */
.hannrei_container {
    width: 100%; /* コンテナの幅を調整 */
    margin-top: -90px;
    display: grid;
    grid-template-columns: 1fr;
}
.hannrei_container .commonr-lcustom-arrow{
    padding-left: px;
    font-weight: bold;
    font-size: 1.45rem;
    position: absolute;
    padding-left: 60px;
    font-weight: bold;
}

.hannrei_container .cmmonr-lcustom-item::before {
    content: ""; /* 内容は空に */
    position: absolute;
    margin-left: -50px;
    top: -2px;
    background: url('../img/arrow2_right.png') no-repeat  ; /* 画像のURLを指定 */
    width: 80px; /* 画像の幅を設定 */
    height: 80px; /* 画像の高さを設定 */
}


.hannrei_container img,p{
    display: block;
    margin: 0 auto;
    text-align: left;
    padding: 5px;
}

.hanrei-p p {
    display: grid;
    place-items: center;
}
.hanrei-titlle{
    margin-top: 20px;
    margin-bottom: 40px;
}
.hannrei-img{
    margin-top: -90px;
}
.hanrei-p{
    font-size: 1rem;
    color: rgb(77, 77, 77);
    font-family: "メイリオ";
    text-align: left; /* テキストを左揃えにする */
    vertical-align: top;
    letter-spacing: 0.3px; /* 段落の文字間を少し広げる */
    line-height: 1.5rem;
    text-align: justify;
    padding-right: 1rem;
    margin-top: 20px;
    margin-left: 30px;
}

.img_flex img{
    /* display: inline-block; */
}
.img_flex {
    /* margin-top: 3px; */
}
.img_flex{
    margin: 0 auto;
}
/* .flex{
    display: flex;
    padding-top: 10px;
    padding-bottom: 15px;
    margin: 0 auto;
    justify-content: left;
} */
.arrow_img{
    max-width: 100%;
    height: auto;
    padding-bottom: 30px;
    margin: 0 auto;
}

.list_ul ul{
    padding-bottom: 15px;
}
.list_ul li{
    padding-left:70px;
    text-align: left;
    font-size: 1rem;
    color: rgb(77, 77, 77);
    font-family: "メイリオ";
    text-align: left; /* テキストを左揃えにする */
    letter-spacing: 0.2px; /* 段落の文字間を少し広げる */
    line-height: 1.7rem;
    text-align: justify;
    padding-right: 1rem;
    list-style: none; /* デフォルトのマーカーを削除 */
    position: relative;
    padding-left: 50px; /* テキストにパディングを追加 */
}
.list_ul li::before{
    content:"・";
    font-size: 1rem;
    position: absolute;
    left: 0 ;
    top: 0;
    line-height: 1.7rem;
    padding-left: 33px; /* テキストにパディングを追加 */
}
.mobile-br{
    display: inline-block  ;
}
.br{
    display: none;
}
.try-br{
    display: none;
}
.br-phone{
    display: none;
}
@media screen and (min-width: 621px) {

    .order img{
        width: 290px;
        height: 310px;
        padding-top: -100px;
        margin-top: -35px;
        margin-right: 10;
    }

    .mokuji-container{
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2列のグリッドを作成 */
        width: 100%; /* コンテナの幅を画面全体にする */
        margin-bottom: px; /* 下部のマージン */
    }
    .mokuji-img02{
        margin-bottom: 10px;
    }
    .mokuji-container p{
        margin: -50px;
    }

    .mokuji-gold01, .mokuji-gold02 {
        padding: 10px; /* コンテンツの余白 */
    }

    .mokuji-gold01{
        grid-column: 1; /* 左列に配置 */
    }
    .mokuji-gold02{
        grid-column: 2; /* 右列に配置 */
    }

    /* 目次の設定：位置と矢印を左に変更 */
    .mokuji-titlle01{
        position: absolute;
        padding-top: 10px;
        padding-left: 330px;
    }
    .mokuji-p01{
        position: absolute;
        margin-left: 350px;
        margin-top: -380px;
        width: 180px;
    }
    .mokuji-container .r-lcustom-arrow{
    }
    /* [→]+[テキスト]の設定 */
    .mokuji-container .change-lcustom-arrow{
        padding-left: 30px;
        font-weight: bold;
        font-size: 1.45rem;
        position: relative;
        font-weight: bold;
    
    }
    
    .mokuji-container .change-lcustom-item::before {
        content: ""; /* 内容は空に */
        display: inline-block;
        position: absolute;
        left: -20px;
        top: -2px;
        background: url('../img/arrow2_left.png') no-repeat  ; /* 画像のURLを指定 */
        width: 80px; /* 画像の幅を設定 */
        height: 80px; /* 画像の高さを設定 */
    }
    /* 五十音の設定：位置を変更 */
    .mokuji-p02{
        position: absolute;
        margin-top: -70px;
        margin-left: -250px;
        width: 180px;
    }
    .mokuji-img02{
        margin-top: 180px;
    }
    .mokuji-titlle02{
        position: absolute;
        padding-top: 20px;
        margin-top: 480px;
        margin-left: -270px;
    }

        .mokuji-container .possition-lcustom-arrow{
            padding-left: 30px;
            font-weight: bold;
            font-size: 1.45rem;
            position: relative;
            font-weight: bold;
        
        }
        
        .mokuji-container .possition-lcustom-item::before {
            content: ""; /* 内容は空に */
            display: inline-block;
            position: absolute;
            left: -20px;
            top: -2px;
            background: url('../img/arrow2_right.png') no-repeat  ; /* 画像のURLを指定 */
            width: 80px; /* 画像の幅を設定 */
            height: 80px; /* 画像の高さを設定 */
        }
        /* 判例索引の設定：矢印変更 */
        .hannrei_container .change-lcustom-arrow{
            margin-left: 180px;
            top: 90px;
            font-weight: bold;
            font-size: 1.45rem;
            position: relative;
            font-weight: bold;
        }
        
        .hannrei_container .change-lcustom-item::before {
            content: ""; /* 内容は空に */
            display: inline-block;
            position: absolute;
            left: 200px;
            background: url('../img/arrow2_left.png') no-repeat  ; /* 画像のURLを指定 */
            width: 80px; /* 画像の幅を設定 */
            height: 80px; /* 画像の高さを設定 */
        }
        .hanrei-p{
            position: absolute;
            margin-top: 150px;
            margin-left: 330px;
            width: 240px;

        }

        /* 検索機能・検索結果 */
        .img_flex{
            justify-content: center;
            display: flex;
            gap: 40px;
        }
        
        /* safariのみにスタイルシート適用 */
        _::-webkit-full-page-media, _:future, :root .contents ul{ 
            font-size: 1.33rem;
        }
        /* safariのみにスタイルシート適用 */
        _::-webkit-full-page-media, _:future, :root .square_red h2{ 
            font-size: 2.5rem;
            font-family:'MS PGothic','M PLUS Rounded 1c','Kosugi Maru', "HG丸ｺﾞｼｯｸM-PRO","Hiragino Kaku Gothic Pro W3",  sans-serif;
        }
}

@media only screen and (min-width: 566px) and (max-width: 620px) {
    

    body{
        display: flex;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;

    }
    h1{
        margin-bottom: 30px;
    }
    .mobile-br{
        display: block;
    }
    .heading {
        display: grid; /* グリッドコンテナとして設定 */
        grid-template-columns: 40% 60%; /* 2列のグリッド */
        grid-template-rows: 10% 90%; /* 2行のグリッド */
    }
    
    .contents {
        margin: 0 auto;
        padding-top: 90px;
        align-self: center;
        grid-column: 1 / 3; /* 1列目に配置 */
        grid-row: 1 / 2; /* 1行目に配置 */
    }
    .contents ul{
        line-height: 3rem;
    }
    
    .container_text {
        align-self: center;
        margin-top: -20px;
        margin-left: 30px;
        margin-right: 30px;
        grid-column: 2 / 3; /* 1列目に配置 */
        grid-row: 2 / 3; /* 2行目に配置 */
    }
    .iphone{
        margin-top: -100px;
    }
    .order {
        align-self: center;
        margin: auto;
        margin-left: 50px;
        align-self: left; 
        grid-column: 1 / 2; /* 2列目に配置 */
        grid-row: 2 / 3; /* 1行目から2行目にまたがって配置 */
    }
    .gradation_gold{
        /* margin-bottom: 30px; */
    }
    
    .lcustom-arrow{
        margin-top: -50px;
    }
    .gold_mokuji{
        margin-bottom: -150px;
    }
    .mokuji-gold01{
        margin-top: -80px;
        margin-bottom: -20px;
    }
    .hannrei_text{
        padding-top: 40px;
    }
    .hanrei-titlle{
        margin-bottom: 35px;
    }
    .hanrei-p p{
        margin-top: -30px;
        margin-bottom: 3px;
    }
    .gradation_gold{
        margin-bottom: 90px;
    }
    .goldpink_pading{
        margin-bottom: 15px;
    }
    .pinkimg_pading{
        margin-bottom: 20px;
    }
    .list_ul ul{
        margin-top: -15px;
    }
    .try-br{
        display: none;
    }
    .br-phone{
        display: none;
    }
    .br{
        display: block;
    }
    .list_ul .ul{
        display: inline-block;
    }
    .list_ul .ul{
        margin-top: -30px;
    }
    /* 検索機能・検索結果 */
    .img_flex {
        display: flex;
        flex-direction: column;
        align-items: center; /* オプション：画像を中央揃えにする場合 */
        gap: -50px;
    }
    .img_flex img{
        margin: -10px auto;
    }
    /* safariのみにスタイルシート適用 */
    _::-webkit-full-page-media, _:future, :root .square_red h2{ 
        font-size: 2.5rem;
        font-family:'MS PGothic','M PLUS Rounded 1c','Kosugi Maru', "HG丸ｺﾞｼｯｸM-PRO","Hiragino Kaku Gothic Pro W3",  sans-serif;
    }
    /* safariのみにスタイルシート適用 */
    _::-webkit-full-page-media, _:future, :root .contents ul{ 
        font-size: 1.33rem;
    }

}
@media only screen and (max-width: 565px){
    body{
        display: flex;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;

    }
    h1{
        margin-bottom: 30px;
    }
    .mobile-br{
        display: block;
    }
    .heading {
        display: grid; /* グリッドコンテナとして設定 */
        grid-template-columns: 40% 60%; /* 2列のグリッド */
        grid-template-rows: 10% 90%; /* 2行のグリッド */
    }
    
    .contents {
        margin: 0 auto;
        padding-top: 90px;
        align-self: center;
        grid-column: 1 / 3; /* 1列目に配置 */
        grid-row: 1 / 2; /* 1行目に配置 */
    }
    .contents ul{
        line-height: 3rem;
    }
    
    .container_text {
        align-self: center;
        margin-top: -20px;
        margin-left: 30px;
        margin-right: 30px;
        grid-column: 2 / 3; /* 1列目に配置 */
        grid-row: 2 / 3; /* 2行目に配置 */
    }
    .iphone{
        margin-top: -100px;
    }
    .order {
        align-self: center;
        margin: auto;
        margin-left: 50px;
        align-self: left; 
        grid-column: 1 / 2; /* 2列目に配置 */
        grid-row: 2 / 3; /* 1行目から2行目にまたがって配置 */
    }
    .gradation_gold{
        /* margin-bottom: 30px; */
    }
    
    .lcustom-arrow{
        margin-top: -50px;
    }
    .gold_mokuji{
        margin-bottom: -150px;
    }
    .mokuji-gold01{
        margin-top: -80px;
        margin-bottom: -20px;
    }
    .hannrei_text{
        padding-top: 40px;
    }
    .hanrei-titlle{
        margin-bottom: 35px;
    }
    .hanrei-p p{
        margin-top: -30px;
        margin-bottom: 3px;
    }
    .gradation_gold{
        margin-bottom: 90px;
    }
    .goldpink_pading{
        margin-bottom: 15px;
    }
    .pinkimg_pading{
        margin-bottom: 20px;
    }
    .list_ul ul{
        margin-top: -15px;
    }
    .try-br{
        display: none;
    }
    .br-phone{
        display: none;
    }
    .br{
        display: block;
    }
    .list_ul .ul{
        display: inline-block;
    }
    .list_ul .ul{
        margin-top: -30px;
    }
    /* 検索機能・検索結果 */
    .img_flex {
        display: flex;
        flex-direction: column;
        align-items: center; /* オプション：画像を中央揃えにする場合 */
        gap: -50px;
    }
    .img_flex img{
        margin: -10px auto;
    }
    /* safariのみにスタイルシート適用 */
    _::-webkit-full-page-media, _:future, :root .square_red h2{ 
        font-size: 2.5rem;
        font-family:'MS PGothic','M PLUS Rounded 1c','Kosugi Maru', "HG丸ｺﾞｼｯｸM-PRO","Hiragino Kaku Gothic Pro W3",  sans-serif;
    }
    /* safariのみにスタイルシート適用 */
    _::-webkit-full-page-media, _:future, :root .contents ul{ 
        font-size: 1.33rem;
    }
    .square_red h2 {
        font-size: 2.3rem;
    }
}
@media only screen and (max-width: 555px){
    .contents ul{
        line-height: 3rem;
    }
    .square_red h2,small{
        font-size: 2.3rem;
    }
    /* safariのみにスタイルシート適用 */
    _::-webkit-full-page-media, _:future, :root .square_red h2,small{ 
        font-size: 2.25rem
    }
    body{
        display: flex;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
    
    .mobile-br{
        display: block;
    }
    .heading {
        display: grid; /* グリッドコンテナとして設定 */
        grid-template-columns: 40% 60%; /* 2列のグリッド */
        grid-template-rows: 10% 90%; /* 2行のグリッド */
        margin-bottom: -120px;
    }
    .contents {
        margin: 0 auto;
        padding-top: 90px;
        align-self: center;
        grid-column: 1 / 3; /* 1列目に配置 */
        grid-row: 1 / 2; /* 1行目に配置 */
    }
    
    .container_text {
        align-self: center;
        margin-top: 5px;
        margin-left: 40px;
        margin-right: 30px;
        grid-column: 2 / 3; /* 1列目に配置 */
        grid-row: 2 / 3; /* 2行目に配置 */
    }
    .mokuji-container{
        padding-top: 80px;
    }
    .mokuji-gold01{
        margin-bottom: -20px;
    }
    .hannrei_container{
        margin-top: 35px;
    }
    .hanrei-titlle{
        padding-bottom: 3px;
    }
    
    .order {
        align-self: center;
        margin: auto;
        margin-left: 50px;
        align-self: left; 
        grid-column: 1 / 2; /* 2列目に配置 */
        grid-row: 2 / 3; /* 1行目から2行目にまたがって配置 */

    
    }
    .arrow_img{
        margin-top: -50px;
    }
    .br{
        display: block;
    }
    .gradation_gold{
        margin-bottom: 30px;
    }
    .tow_weekline{    
        font-weight: bold;
        font-size: 2.25rem;
    }
    .mokuji-container{
        margin-top: 50px;
    }
    .hanrei-titlle{
        margin-bottom: 30px;
    }
    .hanrei-p{
        margin-top: 20px;
        margin-bottom: -10px;
    }
    .relative{
        margin-bottom: 20px;
        margin-top: -20px;
        top: 20px;
        left:-30px;
    }

    .gradation_gold{
        margin-bottom: 90px;
    }
    .goldpink_pading{
        margin-bottom: 15px;
    }
    .pinkimg_pading{
        margin-bottom: 58px;
    }
    .gold_mokuji{
        margin-bottom:-40px;
    }
    .list_ul ul{
        margin-top: -20px;
    }
    .try-br{
        display: none;
    }
    .br-phone{
        display: none;
    }
    /* 検索機能・検索結果 */
    .img_flex {
        display: flex;
        flex-direction: column;
        align-items: center; /* オプション：画像を中央揃えにする場合 */
        gap: -50px;
        margin-top: -35px;
    }
    .img_flex img{
        margin-top: -15px;
    }
    
    .list_ul .ul{
        display: inline-block;
    }
    .list_ul .ul{
        margin-top: -30px;
    }

    /* safariのみにスタイルシート適用 */
    _::-webkit-full-page-media, _:future, :root .square_red h2{ 
        font-size: 2.25rem;
        font-family:'MS PGothic','M PLUS Rounded 1c','Kosugi Maru', "HG丸ｺﾞｼｯｸM-PRO","Hiragino Kaku Gothic Pro W3",  sans-serif;
    }
    /* safariのみにスタイルシート適用 */
    _::-webkit-full-page-media, _:future, :root .contents ul{ 
        font-size: 1.33rem;
    }
}

@media only screen and (max-width: 499px) {

    body{
        justify-self: end; /* 水平方向で右端に配置 */
        align-self: start; /* 垂直方向で上端に配置 */
        display: flex;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
    .contents ul{
        line-height: 3rem;
    }
    .heading {
        display: flex; /* Flexboxを使用 */
        flex-direction: column; /* 要素を縦に並べる */
        align-items: center; /* 水平方向の中央揃え */
        justify-content: center; /* 垂直方向の中央揃え */
        width: 100%; /* 必要に応じて幅を指定 */
        margin: 0 auto; /* 左右のマージンを自動で中央揃え */
        justify-self: end; /* 水平方向で右端に配置 */
        align-self: start; /* 垂直方向で上端に配置 */
        display: flex;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
    .contents, .container_text {
        width: 100%; /* 各要素の幅をコンテナの幅に合わせる */
        text-align: center; /* テキストを中央揃えにする */
        align-items: center;
        display: flex;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        margin: 0 auto;
        margin-top: -70px;
    }
    .order{
        margin: 0 auto;
        height: 100%;
        justify-self: end; /* 水平方向で右端に配置 */
        align-self: start; /* 垂直方向で上端に配置 */
        display: flex;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        padding-bottom: 70px;
    }
    
    .order img {
        
        max-width: 100%; 
        height: auto; 
    }
    .container_text{
        padding: 10px 30px;
    }
    .smallfont_pink{
        text-align: center;
    }
    .tow_weekline{    
        font-weight: bold;
        font-size: 2.3rem;
    }

    .try-br{
        display: block;
    }
    .square_red{
        background-color: #FFCBCB;
        max-width: 100%;
        height: 100%;
        height: 140px;
        padding-left: 20px;
        margin-bottom: 25px;
    }
    .tow_weekline{
        letter-spacing: 0.1em;
        font-weight: 900;
        font-size: 100%;
    }
    .trial_recommend{
        font-size: calc(0.25vw + 1rem);
    }
    /* safariのみにスタイルシート適用 */
    _::-webkit-full-page-media, _:future, :root .trial_recommend{ 
        font-size: calc(2vw + 0.5rem);
    }


    .hannrei_text{
        top: -5%;
        position: absolute;
        left: 65%;
    }
    .hannrei_text p{
        margin-left: -40px;
        margin-right: 10px;
    }
    .hanrei-titlle{
        margin-bottom: 30px;
    }
    .br{
        display: block;
    }

    .br-phone{
        display: none;
    }
    /* safariのみにスタイルシート適用 */
    _::-webkit-full-page-media, _:future, :root .square_red h2{ 
        font-size: 2.25rem;
        font-family:'MS PGothic','M PLUS Rounded 1c','Kosugi Maru', "HG丸ｺﾞｼｯｸM-PRO","Hiragino Kaku Gothic Pro W3",  sans-serif;
    }
    /* safariのみにスタイルシート適用 */
    _::-webkit-full-page-media, _:future, :root .contents ul{ 
        font-size: 1.33rem;
    }
    
}
@media only screen and (max-width: 410px) {
    .contents ul{
        margin-left: -10px;
        font-size: 1.35rem;
        line-height: 3rem;
    }
    
    /* safariのみにスタイルシート適用 */
    _::-webkit-full-page-media, _:future, :root .contents ul{ 
        font-size: 1.25rem;
        }
    .gradation_gold h2{
        font-size: 1.5rem;
    }
    .hanrei-titlle{
        margin-bottom: 30px;
    }
    /* safariのみにスタイルシート適用 */
    _::-webkit-full-page-media, _:future, :root .square_red h2{ 
        font-size: 2.25rem;
        font-family:'M PLUS Roundedc','MS PGothic','Kosugi Maru', "HG丸ｺﾞｼｯｸM-PRO","Hiragino Kaku Gothic Pro W3",  sans-serif;
    }
    /* safariのみにスタイルシート適用 */
    _::-webkit-full-page-media, _:future, :root .contents ul{ 
        font-size: 1.25rem;
    }
    /* safariのみにスタイルシート適用 */
    _::-webkit-full-page-media, _:future, :root .trial_recommend{ 
        font-size: 1rem;
    }
}
    @media only screen and (max-width: 395px) {
        .contents ul{
            line-height: 3rem;
        }
        .square_red h2{
            font-size: 2.25rem;
        }
        .trial_recommend{
            font-size: 0.99rem;
        }
        .contents ul{
            margin-left: -15px;
            font-size: 1.3rem;
        }
        .gradation_gold h2{
            font-size: 1.5rem;
        }
            .hanrei-titlle{
        margin-bottom: 30px;
    }
            /* safariのみにスタイルシート適用 */
        _::-webkit-full-page-media, _:future, :root .square_red h2,small{ 
            font-size: 2.05rem;
        }
                /* safariのみにスタイルシート適用 */
        _::-webkit-full-page-media, _:future, :root .trial_recommend{ 
            font-size: 0.9rem;
        }
        /* safariのみにスタイルシート適用 */
        _::-webkit-full-page-media, _:future, :root .square_red h2{ 
            font-size: 2.05rem;
            font-family:'MS PGothic','M PLUS Rounded 1c','Kosugi Maru', "HG丸ｺﾞｼｯｸM-PRO","Hiragino Kaku Gothic Pro W3",  sans-serif;
        }
            /* safariのみにスタイルシート適用 */
        _::-webkit-full-page-media, _:future, :root .contents ul{
            font-size: 1.25rem;
        }
            /* safariのみにスタイルシート適用 */
        _::-webkit-full-page-media, _:future, :root .trial_recommend{ 
            font-size: 0.9rem;
        }
    }
    @media only screen and (max-width: 395px) {
        .gradation_gold h2 {
            font-size: 1.38rem;
        }
        .mokuji-container h3 span,.hannrei_container h3 span, .list_ul h3 span{
            font-size: 1.36rem;
        }
    }


    /* Firefoxのためのcss */
    @-moz-document url-prefix(){
        .contents ul{
            font-size: 1.3rem;
        }
        @media screen and (min-width: 620px) {
            .order img{
                margin-top: -20px;
            }
            .order {
                margin-left: 30px;
            }
            .container_text{
                margin-top: -10px;
            }
            .gold_mokuji{
                margin-bottom: 0px;
            }
            .goldpink_pading{
                margin-bottom: 10px;
            }
        }
        /* Firefoxのためのcss */
        @media screen and (max-width: 620px) {
        
        .lp{
            padding-top: 30px;
        }
        
        .mokuji-gold01{
            margin-top: -30px;
        }
        .gold_mokuji{
            margin-bottom: 50px;
        }
        .contents{
            margin-top: -100px;
        }
        .arrow_img{
            padding-top: 30px;
        }
        
        .lcustom-arrow{
            margin-top: -15px;
        }
        .hannrei_text{
            margin-top: 20px;
        }
        .iphone{
            margin-top: -80px;
        }
        .gold_mokuji{
            margin-bottom: 35px;
        }
        .goldpink_pading{
            margin-bottom: 10px;
        }
        .goldpink_pading{
            margin-bottom: 10px;
        }
        .hannrei_container{
            margin-top: -50px;
        }
        .fr_mokuji{
            margin-top: -30px;
        }
        .img_flex{
            margin-top: -30px;
            margin-bottom: 35px;
        }
        .img_flex img{
            margin-bottom: -50px;
        }
        .under_img{
            margin-top: -40px;
        }
        }
        /* Firefoxのためのcss */
        @media screen and (max-width:555px) {
            .hannrei_text{
                margin-top: 20px;
            }
            .hannrei_text{
                position: absolute;
            }
            .square_red h2{
                font-size: 2.18rem;
            }
            .iphone{
                margin-top: 50px;
            }
            .img_flex img{
                margin-bottom: -30px;
            }
            .img_flex{
                margin-top: -30px;
                margin-bottom: 25px;
            }
            .mokuji-container{
                margin-top: -80px;
            }
            .under_img{
                margin-top: -80px;
            }
            .img_flex{
                margin-top: -60px;
            }
            .img_flex img{
                padding-bottom: 15px;
            }
            .list_ul ul{
                margin-top: 5px;
            }

    
        }
        /* Firefoxのためのcss */
        @media screen and (max-width:499px) {
            .iphone{
                margin-top: -50px;
            }
        }
        /* Firefoxのためのcss */
        @media screen and (max-width:410px) {
            .contents{
                padding-top: 150px;
                padding-bottom: 30px;
            }
            .trial_recommend{
                font-size: 1rem;
            }

        }
        /* Firefoxのためのcss */
        @media  screen and (max-width:390px){
            .contents ul{
                margin-top: -30px;
                font-size: 1.25rem;
            }
            .square_red h2{
                font-size: 2.2rem;
            }
            .trial_recommend{
                font-size: 0.95rem;
            }
        }
            
        }