/*-----------------------------------------------
 『はじめての方へ』画面CSS
-----------------------------------------------*/

html { scroll-behavior: smooth;}

/* コンテナー */
.about_container {
    padding-top: 50px;
    padding-bottom: 50px;
}

/* インナー */
.about {
    margin: 0px auto;
    max-width: 1140px;
    display: flex;
}

/* タイトル領域 */
.about .head_title_area {
    margin-top: 5px;
    margin-bottom: 50px;
}

/* カテゴリ名 */
.about .category_title {
    margin-bottom: 5px;
    font-size: 18px;
}

/* ホームページ～カンタンに！ラベル */
.about .br_label {
    display: none;
}

/* 各カテゴリの領域 */
.about .topic {
    margin-bottom: 50px;
}

/* 箇条書き */
.about .topic li {
    margin-bottom: 20px;
    position: relative;
    padding-left: 15px;
    margin-left: 5px;
    line-height: 1.5;
}
.about .topic li:last-child {
    margin-bottom: 0px;
}
/* 箇条書きの点 */
.about .topic li::before {
    border-radius: 50%;
    width: 6px;
    height: 6px;
    display: block;
    position: absolute;
    left: 0;
    top: 0.5em;
    content: "";
    background: rgb(150, 150, 150);
}

/* テキスト */
.about .topic_text_area {
    line-height: 1.5;
}

/* 小さい文字 */
.about .topic .small {
    font-size: 12px;
}

/* 仕切り線 */
.about_topic_area hr {
    size: 0.5px;
    width: 100%;
    margin-bottom: 50px;
}

/* カード会社ロゴ領域 */
.about .topic .card_logo {
    height: 25px;
    width: 100%;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../../img/card_logo/ico-creditcard.svg);
}

/* === ボタン関連 ========================================= */
/* 各ボタン領域 */
.about .btn_area {
    position: relative;
    padding-top: 20px;
}
/* ボタン */
.about .start_btn {
    border-radius: 30px;
    background-color: rgb(255,155,000);
    color: white;
    border: none;
    outline: none;
    font-size: 16px;
    padding-left: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
    width: 250px;
    position: absolute;
    right: 0px;
    vertical-align: middle;
}
.about .start_btn:hover {
    color: white;
    text-decoration: none;
}

/* ボタンの矢印マーク */
.about .btn_area .icon_arrow {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 24px;
    height: 24px;
    background-image: url(../../img/arrow/ico-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
/* ========================================================= */

/* === 写真加工関連 ======================================== */
/* 写真加工領域 */
.about .photo_area {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* sample1, 2 領域 */
.about .photo_area .sample1_area {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 620px;
}

.about .photo_area .sample1_area > div{
    margin: 0px;
    padding: 0px;
}

/* テキスト */
.about .photo_area label {
    font-size: 18px;
}
/* 縦並びの際に表示するテキスト */
.about .photo_area .sample_photo_label {
    display: none;
}

/* 画像 */
.about .photo_area .before_photo_1 {
    background-image: url(../../img/about/about_before1.jpg);
}
.about .photo_area .before_photo_2 {
    background-image: url(../../img/about/about_before2.jpg);
}
.about .photo_area .after_photo_1 {
    background-image: url(../../img/about/about_after1.jpg);
}
.about .photo_area .after_photo_2 {
    background-image: url(../../img/about/about_after2.jpg);
}
/* 画像共通 */
.about .photo_area .photo {
    /* 幅:高さ=1:1 */
    width: 300px;
    height: 300px;
    text-align: center;
    margin: 0px;
    padding: 0px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* ========================================================= */

/* === 料金プラン関連 ======================================= */
/* 全体 */
.about .price-wrap {
    padding: 0px 0px;
    max-width: 690px;
    gap: 8px;
}
/* 各プラン領域 */
.about .price-wrap > div {
    width: 23.5%;
    min-width: 165px;
}

/* プラン名(英語) */
.about .price-wrap .price-box .plan {
    font-size: 12px;
}

/* プラン名(日本語) */
.about .price-wrap .price-box>span {
    font-size: 16px;
}

/* 料金 */
.about .price-wrap .price-box:first-child .price p {
    font-size: 35px;
    margin-top: -10px;
}

/* 説明文の領域 */
.about .price-wrap .price-box .price-content {
    min-height: 115px;
}
/* 説明文 */
.about .price-wrap .price-box .price-content p {
    font-size: 10px;
    line-height: 1.4;
}
.about .price-wrap .price-box .price-content b {
    font-size: 10px;
}
/* ※文 */
.about .price-wrap > div > p {
    font-size: 8px;
}
/* Comming Soon */
.about .price-wrap .price-box .price-commingsoon {
    font-size: 14px;
    padding: 7px 10px 10px;
    width: 80%;
    left: 9%;
}

/* 無料お試し領域 */
.about .cursor_pointer {
    cursor: pointer;
}
/* ========================================================== */

/* === メニュー関連 ========================================= */
/* メニュー領域 */
.about .topic_menu_area {
    width: 165px; /* 子要素と同じ幅 */
    position: absolute;
    right: 0px;
}

.about .topic_menu_nav {
    position: fixed;
    width: 165px;
}
.about .anchors {
    background:white;
    border-radius: 5px;
    box-shadow: 1px 1px 4px 4px rgb(0 0 0 / 15%);
    text-align: left;
    padding: 12px 12px
}
.about .anchors ul {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style: none;
}
/* ========================================================== */

@media (max-width: 1156px){
    .about .left_innner_area {
        max-width: 100%;
        flex: 0 0 100%;
        padding-left: 0px;
        padding-right: 0px;
    }
    
    .about .right_inner_area {
        display: none;
        padding: 0px;
    }
}

@media (max-width: 796px){
    .about #recommend {
        line-height: 1.5;
    }

    /* ホームページ～カンタンに！ラベル */
    .about .br_label {
        display: block;/* pタグの方を表示 */
    }
    .about .not_br_label {
        display: none;
    }
}

@media (max-width: 767px){
    /* === 料金プラン関連 ======================================= */
    /* 全体 */
    .about .price-wrap {
        max-width: 370px;
    }
    /* ========================================================= */
}

@media (max-width: 750px){
    /* === 写真加工関連 ======================================== */
    /* 画像共通 */
    .about .photo_area .photo {
        /* 幅:高さ=1:1 */
        width: 250px;
        height: 250px;
    }
    /* ========================================================= */
}

@media (max-width: 650px){
    .about .left_innner_area {
        padding-left: 0px;
        padding-right: 0px;
    }

    /* === 写真加工関連 ======================================== */
    /* 画像共通 */
    .about .photo_area .photo {
        /* 幅:高さ=1:1 */
        width: 200px;
        height: 200px;
    }
    /* ========================================================= */
}

@media (max-width: 580px){
    /* === 写真加工関連 ======================================== */
    /* 画像共通 */
    .about .photo_area .photo {
        /* 幅:高さ=1:1 */
        width: 200px;
        height: 200px;
    }
    /* ========================================================= */

    /* ボタン */
    .about .start_btn {
        font-size: 12px;
        padding-left: 12px;
        width: 190px;
    }

    /* ボタンの矢印マーク */
    .about .btn_area .icon_arrow {
        right: 3px;
        top: 3px;
        width: 18px;
        height: 18px;
    }

    /* プレミアムプランの※文 */
    .about .price-wrap > div > p {
        margin-bottom: 0px;
    }
}

@media (max-width: 532px){
    /* === 写真加工関連 ======================================== */
    /* テキスト */
    .about .photo_area label {
        display: none;
        font-size: 14px;
    }
    /* 縦並びの際に表示するテキスト */
    .about .photo_area .sample_photo_label {
        display: block;
    }
    /* ========================================================= */
}

@media (max-width: 420px){
    .about .price-wrap {
        margin: auto;
        max-width: 100%;
    }
    .about .price-wrap > div {
        min-width: 100%;
    }
    .about .price-wrap .price-box {
        margin-bottom: 5px;
    }
    .about .price-wrap .price-box .price-content {
        min-height: 65px;
    }
}