@charset "UTF-8";

/*---共通 スマホ表示---*/
/*---↓↓画像--*/
#sp-case-v1 img {
    width: 100%;
    height: auto;
    margin: 0 auto 0;
}
#sp-case-v1 p.img {
    width: 100%;
    margin: 0 0 1rem;
}
/*---↓↓体裁・余白---*/
#sp-case-v1 {
    text-align: left;
    width: 100%;
    margin: 4rem 0;
}
/*--↓↓１番目のsection--*/
#sp-case-v1 .sec-1 {
    margin: 0 auto 3rem;
    width: 100%;
}
/*--↓↓２番目以降のsection--*/
#sp-case-v1 .sec-2 {
    width: 98%;
    margin: 0 auto 6rem;
}
#sp-case-v1 .sec-2:last-child {
    margin: 0 auto;
}
#sp-case-v1 .sec-3 {
    width: 98%;
    margin: 0 auto 3rem;
}

/*--連続sectionの区切り線--*/
#sp-case-v1 .border {
    display: block;
    border-top: dashed 1px #d1d1d1;
}

/*--↓↓flex-wrap--*/
.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: center; /*水平方向*/
    align-items: start; /*垂直方向*/
    align-content: flex-start; /*複数行にした時の揃え*/
}
#sp-case-v1 .row { flex-direction: row-reverse;}

/*-- ↓↓3番目以降：小さい画僧を使う用 --*/
#sp-case-v1 .width-25 {width: 25%;}
#sp-case-v1 .width-50 {
    width: 50%;
    padding: 0 0.5rem;
}
#sp-case-v1 .width-75 {
    width: 75%;
    padding: 0 0.5rem;
}
#sp-case-v1 .tbl-width-40,
#sp-case-v1 .tbl-width-60,
#sp-case-v1 .tbl-width-70 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /*justify-content: left; /*水平方向*/
}
#sp-case-v1 .width-75 > .h2-2nd,
#sp-case-v1 .width-50 > .h2-2nd,
#sp-case-v1 .width-75 > .bold,
#sp-case-v1 .width-50 > .bold/*,
#sp-case-v1 .width-75 > ul*/ {
    margin-top: 4%  !important;
}


/*---段落・テキスト---*/
/*--↓↓画像の説明--*/
#sp-case-v1 p.note {
    font-size: 1.4rem;
    line-height: 1.5;
    margin: 0.6rem 0 1rem;
}
#sp-case-v1 .txt-red {
    color: red;
}
#sp-case-v1 .txt-c {
    text-align: center;
}
#sp-case-v1 ul.no-sym {
    list-style-type: none;
    font-size: 1.4rem;
    line-height: 1.5;
    margin: 0.5rem 0 1rem 1.5rem;
    padding-left: 1.3em;
    text-indent: -1.3em;
}
#sp-case-v1 ul.disc {
    list-style-type: disc;
    font-size: 1.4rem;
    line-height: 1.5;
    margin: 0.5rem 0 1rem 1.5rem;
    padding-left: 1.3em;
}
#sp-case-v1 ul li {
    margin: 0 0 1rem;
    line-break: strict;
}


/*---見出し↓↓---*/
/*--↓↓.h2-1stの下線↓↓--*/
#sp-case-v1 h2.h2-1st:after {
    content: "";
    display: block;
    height: 4px;
    background: rgb(94,94,94);
    background: linear-gradient(90deg, rgba(94,94,94,1) 0%, rgba(214,214,214,1) 100%);
    position: relative;
}
/*---↓↓.h2-1st 全体に対して---*/
#sp-case-v1 h2.h2-1st {
    font-family: Roboto, "Droid Sans", "HiraKakuProN-W3", 'ヒラギノ角ゴ Pro W3', Verdana, "Yu Gothic", 游ゴシック, "Meiryo", メイリオ, sans-serif !important;
    font-size: 5.8vw;
    line-height: 1.2;
    margin: 0.4rem 0 0;
    color: #494949;
    text-align: center;
}
/*---↓↓iPhone---*/
#sp-case-v1 span.iphone {
    font-size: 5.8vw;
    letter-spacing: -0.1em;/*文字間隔*/
    margin:0 0.4rem 0 0;
    color: #494949;
}
/*--↓↓機種名↓↓　c1--*/
#sp-case-v1 span.model-c1 {
    font-size: 6.4vw;
    margin: 0 0.8rem 0 0;
    letter-spacing: -0.08em;/*文字間隔*/
}
/*--↓↓機種名↓↓　c2--*/
#sp-case-v1 span.model-c2 {
    display: inline-block;
    font-size: 5.4vw;
    transform: scale(1, 1.2) translate(0, -4%);
    margin: 0 0.6rem 0 -0.1rem;
    letter-spacing: -0.095em;
}
/*--↓↓対応↓↓--*/
#sp-case-v1 span.sprt {
    font-size: 5.4vw;
    color: #ffffff;
    letter-spacing: -0.1em;/*文字間隔*/
    background-color: red;
    border-radius: 6px; /*角を丸く*/
    margin: 0;
    padding: 0.2rem;
    position: relative;
    top: -3px;
}

/*--↓↓※画像は旧モデル...のテキスト--*/
#sp-case-v1 p.un-h2-1st {
    display: block;
    font-size: 1.6rem;
    line-height: 1.5;
    margin: 1rem 0 0;
    line-height: 1;
    text-align: center;
}
/*--↓↓2番目以降のsectionの見出し--*/
#sp-case-v1 .width-50 > h2.h2-2nd {
    font-size: 1.6rem;
}
#sp-case-v1 h2.h2-2nd,
#sp-case-v1 .bold /*←追加*/ {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
    margin: 0.6em auto 0.4em;
    padding: 0;
    color: #494949;
}
/*--↓↓素材・詳細・ブランドの見出し--*/
#sp-case-v1 span.highlight {
    font-family: Roboto, "Droid Sans", Courier, "HiraKakuProN-W3", 'ヒラギノ角ゴ Pro W3', "Arial", "Yu Gothic", 游ゴシック, "Meiryo", メイリオ, sans-serif !important;
    display: block;
    font-size: 2.2rem;
    line-height: 1.2;
    margin: 12rem 0 1.5rem;
    padding: 0.4rem 0 0.4rem 2rem;
    color: #838383;
    border-left: solid 5px #d7d7d7;
    border-bottom: solid 5px #f0f0f0;
    font-weight: 400;
}
/*--サブ見出し＠素材・詳細・ブランド--*/
#sp-case-v1 span.sub-HL {
    position: relative;
    display: inline-block;
    padding: 0 50px;
    margin: 0 10px 0;
}
#sp-case-v1 span.sub-HL:before,
#sp-case-v1 span.sub-HL:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 35px;
    height: 2px;
    background-color: #d7d7d7;
}
#sp-case-v1 span.sub-HL:before {
    left: 8px;
}
#sp-case-v1 span.sub-HL:after {
    right: 8px;
}
/* ↓デザイン見出し↓ */
.designIndex-bgBlack {
    font-family:"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    background-color: #2C2C2E;
    color: #ffffff;
    text-align: center;
    margin: 12rem 0 1.5rem;
    padding: 1.6rem 0;
    font-size: 2.2rem;
    line-height: 0.8;
    display: block;
}
.designIndex-bgBlack > span {
    font-size: 1.2rem;
}
.designIndex {
    font-family:"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    color: #2C2C2E;
    position: relative;
    text-align: center;
    margin: 12rem 0 1.5rem;
    font-size: 2.2rem;
    line-height: 1.2;
    display: block;
}
.designIndex:before {
    content: '';
    position: absolute;
    bottom: -5px;
    display: inline-block;
    width: 50%;
    max-width: 200px;
    height: 1px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #2C2C2E;
}
/*---見出しここまで↑↑---*/

/* おすすめポイント ↓ */
.recommendPointsBox {
    flex-wrap: wrap;
    width: 98%;
    margin: 0 auto 10rem;
    padding: 0 0 2px;
    background-color: #2C2C2E;
}
.recommendPointsBox > .designIndex-bgBlack {
    margin: 0 auto;
}
.inbox-recommendPointsBox {
    display: flex;
    flex-wrap: wrap;
    width: 95%;
    margin: 0 auto 6px;
    background-color: #ffffff;
}
.inner-border {
    outline : 1px solid #2C2C2E;
    outline-offset : -5px;
}
.inbox-recommendPointsBox > .w-50 {width:50%;}
.inbox-recommendPointsBox > .imgbox {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.imgbox > img {
    height: 100%;
    width: auto;
}
.recommended-details {
    margin: 0 auto;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.backgBlack-fontWhite {
    background-color: #2C2C2E;
    color: #ffffff;
    margin: -1px;
}
.recommended-details p {
    padding: 0 2%;
    margin: 0.6rem auto;
    font-size: clamp(10px, 2.9vw, 25px);
}
img+.recommended-details {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.IndexNum-recomedBox {
    text-align: center;
    margin: 0 auto 0.2rem;
    font-size: clamp(12px, 4vw, 30px);
    font-weight: bold;
    position: relative;
}
.IndexNum-recomedBox:before {
    content: '';
    position: absolute;
    bottom: 2px;
    display: inline-block;
    width: 100%;
    height: 1px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: black;
    border-radius: 2px;
}
/* おすすめポイント ↑ */


@media screen and (min-width:600px) {
    /*---↓↓余白体裁---*/
    #sp-case-v1 {
        max-width: 845px;
        margin: 4rem auto;
    }
    #sp-case-v1 .sec-2 {
        margin: 0 auto 10rem;
    }
    /*#sp-case-v1 .sec-3 {
        width: 90%;
    }*/
    #sp-case-v1 .width-50,
    #sp-case-v1 .width-75 {
        padding: 0 1rem;
    }
    #sp-case-v1 .tabl-vert-c { align-items: center;}
    #sp-case-v1 .tabl-vert-s { align-items: start;}
    /*#sp-case-v1 .row { flex-direction: row-reverse;}*/
    #sp-case-v1 .tbl-width-40 {
        width: 40%;
        justify-content: center;
    }
    #sp-case-v1 .tbl-width-60 {
        width: 60%;
        justify-content: center;
    }
    #sp-case-v1 .tbl-width-70 {
        width: 70%;
        justify-content: center;
    }
    /*#sp-case-v1 .sec-2:last-child {
        margin: 0 auto;
    }*/
    /*---↓↓段落・テキスト---*/
    #sp-case-v1 p.note {
        font-size: 1.8rem;
    }
    #sp-case-v1 ul.no-sym,
    #sp-case-v1 ul.disc {
        font-size: 1.8rem;
    }

    /*---見出し↓↓---*/
    /*#sp-case-v1 h2 {
        text-align: center;
    }*/
    /*---↓↓iPhone model XXX 全体に対して---*/
    #sp-case-v1 h2.h2-1st {
        font-size: 4vw;
    }
    #sp-case-v1 span.iphone {
        font-size: 4vw;
    }
    /*--↓↓機種名↓↓　c1--*/
    #sp-case-v1 span.model-c1 {
        font-size: 4.2vw;
        letter-spacing: -0.03em;/*文字間隔*/
    }
    /*--↓↓機種名↓↓　c2--*/
    #sp-case-v1 span.model-c2 {
        font-size: 4.2vw;
        transform: initial;
        margin: 0 0.8rem 0 0rem;
    }
    #sp-case-v1 span.sprt {
        font-size: 4vw;
    }
    #sp-case-v1 p.un-h2-1st {
        font-size: 1.8rem;
    }
    #sp-case-v1 h2.h2-2nd,
    #sp-case-v1 .width-50 > h2.h2-2nd,
    #sp-case-v1 .bold,
    #sp-case-v1 span.highlight,
    .designIndex-bgBlack, .designIndex {
        font-size: 2.4rem;
    }
    /*---見出しここまで↑↑---*/
}

@media screen and (min-width:1200px) {
    /*---余白体裁---*/
    /*#sp-case-v1 {
        min-width: 845px;
    }*/
    /*---↓↓段落・テキスト---*/
    #sp-case-v1 p.note {
        font-size: 3rem;
    }
    #sp-case-v1 ul.no-sym,
    #sp-case-v1 ul.disc {
        font-size: 3rem;
    }
    #sp-case-v1 ul li {
        margin: 0 0 3rem;
    }
    #sp-case-v1 .sec-2 {
        margin: 0 auto 16rem;
    }
    /*---見出し↓↓---*/
    #sp-case-v1 h2.h2-1st {
        font-size: 4rem;
    }
    #sp-case-v1 span.iphone {
        font-size: 4rem;
    }
    #sp-case-v1 span.highlight,
    .designIndex-bgBlack, .designIndex {
        margin: 20rem 0.4rem 2rem;
        font-size: 4rem;
    }
    #sp-case-v1 h2.h2-2nd,
    #sp-case-v1 .bold {
        font-size: 4rem;
    }
    #sp-case-v1 .width-50 > h2.h2-2nd {
        font-size: 3rem;
    }
    /*--↓↓機種名↓↓　c1--*/
    #sp-case-v1 span.model-c1 {
        font-size: 5rem;
        letter-spacing: 0em; /*文字間隔*/
    }
    /*--↓↓機種名↓↓　c2--*/
    #sp-case-v1 span.model-c2 {
        font-size: 5rem;
        letter-spacing: -0.08em; /*文字間隔*/
    }
    #sp-case-v1 span.sprt {
        font-size: 4rem;
    }
    #sp-case-v1 p.un-h2-1st {
        font-size: 2.6rem;
    }
    /*---見出しここまで↑↑---*/
}