/*--------------------------------------*/
/*　　共通　　*/
/*--------------------------------------*/

html[lang="ja"] {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    color: #333;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: #F4F1ED;
}

table {
    table-layout: fixed;
    word-break: break-all;
}

.contents_area {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    background-color: #fff;
}

.section {
    padding: 20px 45px;
}

.txt_bold {
    font-weight: bold;
}

.txt_big {
    margin-right: 2px;
    margin-left: 2px;
    font-size: 35px;
}

.txt_red {
    color: #ED1C24;
}

.txt_orange {
    color: #FF7300;
}

.inline_block {
    display: inline-block;
}

a:-webkit-any-link {
    color: #333;
    text-decoration: none;
    cursor: pointer;
}
a:-webkit-any-link:active {
    color: #333;
}

#ranking_1, #ranking_2, #ranking_3, #ranking_4, #ranking_5 {
    scroll-margin-top: 20px;
}

/*--------------------------------------*/
/*　　MV　　*/
/*--------------------------------------*/

.mv_area {
    width: 100%;
    background-color: #FFC970;
}

.mv_img_wrap {
    margin: 0;
}

.mv_img {
    display: block;
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
}

/*--------------------------------------*/
/*　　おすすめ人気ランキング　　*/
/*--------------------------------------*/

.recommend_ttl {
    padding: 10px 10px 30px;
    margin: 0;
    font-size: 24px;
    text-align: center;
}

.recommend_scroll_wrap {
    display: none;
}

.recommend_table_wrap {
    margin-bottom: 5px;
}

.recommend_table {
    border-collapse:  collapse;
    background-color: #fff;
}

.cell_another {
    border: solid 2px #c1c1c1;
}

.recommend_table td{
    padding: 18px 10px;
    text-align: center;
}

.recommend_table th {
    position: relative;
    padding: 15px;
    width: calc(100% / 5);
    font-size: 21px;
}

.recommend_table th:nth-child(1)::before, .recommend_table th:nth-child(2)::before, .recommend_table th:nth-child(3)::before {
    position: absolute;
    top: 0;
    left: 20px;
    bottom: 0;
    width: 30px;
    height: 30px;
    margin: auto;
    content: '';
    background-image: url("./img/rank_gold.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.recommend_table th:nth-child(2)::before {
    background-image: url("./img/rank_silver.png");
}

.recommend_table th:nth-child(3)::before {
    background-image: url("./img/rank_bronze.png");
}

tr.recommend_table_tr:nth-child(2n) {
    background-color: #F7F7F7;
}

.recommend_table thead {
    background-color: #F7F7F7;
}

.recommend_table_label {
    margin-bottom: 10px;
    font-weight: bold;
}

.recommend_table_logo {
    width: 100%;
}

.recommend_table_logo_link, .recommend_table_logo_link:-webkit-any-link {
    color: #333;
    text-decoration: underline;
    transition: .2s;
}

.recommend_table_logo_link:hover, .recommend_table_logo_link:-webkit-any-link:hover {
    opacity: .7;
}

.recommend_table_answer_img {
    width: 50px;
    max-width: 80%;
    height: auto;
}

.cell_1 {
    border: solid 2px #FF7300;
}

.recommend_table_strong_bg {
    background-color: #fdf0e5;
}

.recommend_table_btn, .recommend_table_btn:-webkit-any-link {
    position: relative;
    display: block;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    background-color: #FF7300;
    box-shadow: 0 4px 0 #D84D00;
    border-radius: 4px;
    transition: .2s;
}

.recommend_table_btn:hover, .recommend_table_btn:-webkit-any-link:hover {
    transform: translate3d(0, 3px, 0);
    box-shadow: 0 2px 0 #D84D00;
    opacity: .7;
}

.recommend_table_btn::before {
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    vertical-align: middle;
    margin: auto;
    width: 5px;
    height: 5px;
    content: "";
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*--------------------------------------*/
/*　　ランキング詳細　　*/
/*--------------------------------------*/

.section.__ranking {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.ranking_block {
    position: relative;
    background-color: #fff;
    border: solid 2px #D3D3D3;
}

.ranking_block::before {
    position: absolute;
    top: -8px;
    left: 15px;
    width: 125px;
    height: 115px;
    margin: auto;
    content: '';
    background-image: url("./img/ranking_no1.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.ranking_block:nth-child(2)::before {
    background-image: url("./img/ranking_no2.png");
}

.ranking_block:nth-child(3)::before {
    background-image: url("./img/ranking_no3.png");
}

.ranking_block:nth-child(4)::before {
    background-image: url("./img/ranking_no4.png");
}

.ranking_block:nth-child(5)::before {
    background-image: url("./img/ranking_no5.png");
}

/*　サービス名　*/

.ranking_servise_name {
    padding: 30px 20px 25px 140px;
    margin: 0 auto;
    width: 95%;
    font-size: 27px;
    font-weight: bold;
    box-sizing: border-box;
    border-bottom: solid 1px #cccccc;
}

/*　紹介タイトル　*/

.ranking_ttl {
    position: relative;
    display: block;
    margin: 28px auto;
    width: fit-content;
    font-size: 21px;
    font-weight: bold;
    text-align: center;
}

.ranking_ttl::before, .ranking_ttl::after {
    position: absolute;
    top: 0;
    left: -60px;
    bottom: 0;
    width: 40px;
    height: 50px;
    margin: auto;
    content: '';
    background-image: url("./img/yellow_sold_decoration.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.ranking_ttl::after {
    right: -60px;
    left: auto;
    transform: scale(-1, 1);
}

/*　スクリーンショット　*/

.ranking_ss {
    display: block;
    margin: 0 auto;
    width: 80%;
    object-fit: cover;
    border: solid 1px #D3D3D3;
    border-radius: 5px;
}

/*　基本情報　*/

.ranking_info_ttl {
    position: relative;
    margin: 28px auto 20px;
    width: fit-content;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

.ranking_info_ttl::before, .ranking_info_ttl::after {
    position: absolute;
    top: 5px;
    left: -130px;
    bottom: 0;
    width: 90px;
    height: 15px;
    margin: auto;
    content: '';
    background-image: url("./img/yellow_triangle.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.ranking_info_ttl::after {
    right: -130px;
    left: auto;
}

.ranking_info_table {
    margin: 20px auto 30px;
    width: 80%;
    background-color: #F4F1ED;
    border-top: solid 1px #C6C6C6;
    border-bottom: solid 1px #C6C6C6;
    border-collapse:  collapse;
}

.ranking_info_table th, .ranking_info_table td {
    padding: 13px 20px;
}

.ranking_info_table th {
    text-align: left;
    width: 130px;
    white-space: nowrap;
}

.ranking_info_table tr:nth-child(2n) {
    background-color: #fff;
}

.ranking_info_table_star {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ranking_info_star {
    width: 110px;
    height: fit-content;
}

.ranking_info_link, .ranking_info_link:-webkit-any-link {
    color: #FF7300;
    text-decoration: underline;
    transition: .2s;
}

.ranking_info_link:hover, .ranking_info_link:-webkit-any-link:hover {
    opacity: .7;
}

/*　チェック　*/

.ranking_check {
    display: flex;
    margin: 0 auto;
    width: 80%;
    background-color: #fff;
    border: solid 1px #FFC200;
    border-radius: 5px;
}

.ranking_check_img_wrap {
    display: flex;
    align-items: center;
    padding: 10px;
    width: 50px;
    background-color: #FFC200;
    border-radius: 5px 0 0 5px;
}

.ranking_check_img {
    width: 100%;
}

.ranking_check_list {
    flex: 1;
    padding: 10px 20px;
    margin: 0;
    list-style: none;
    background-color: #FFF7F0;
    border-radius: 0 5px 5px 0;
}

.ranking_check_list_item:not(:last-child) {
    border-bottom: dashed 1px #E2E2E2;
}

.ranking_check_list_item {
    position: relative;
    padding: 13px 13px 13px 37px;
}

.ranking_check_list_item::before {
    position: absolute;
    top: 17px;
    left: 6px;
    width: 19px;
    height: 19px;
    margin: auto;
    content: '';
    background-image: url("./img/check_icon.png");
    background-repeat: no-repeat;
    background-size: contain;
}

/*　ボタン　*/

.ranking_btn, .ranking_btn:-webkit-any-link {
    position: relative;
    display: block;
    padding: 20px 30px;
    margin: 35px auto 50px;
    width: fit-content;
    max-width: 84%;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: #FF7300;
    box-shadow: 0 5px 0 #D84D00;
    box-sizing: border-box;
    border-radius: 6px;
    transition: .2s;
}

.ranking_btn:hover, .ranking_btn:-webkit-any-link:hover {
    transform: translate3d(0, 3px, 0);
    box-shadow: 0 2px 0 #D84D00;
    opacity: .7;
}

.ranking_btn::before {
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    vertical-align: middle;
    margin: auto;
    width: 5px;
    height: 5px;
    content: "";
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*--------------------------------------*/
/*　　ランキング詳細　--1位用css　　*/
/*--------------------------------------*/

.ranking_block.__first {
    background-color: #FFF7F0;
    border: solid 2px #fff;
}

.ranking_block.__first .ranking_check_list {
    background-color: #fff;
}

.ranking_block.__first .ranking_servise_name {
    border-bottom: solid 1px #ffc931;
}

/*--------------------------------------*/
/*　　3つのポイント　　*/
/*--------------------------------------*/

.section.__point, .section.__try {
    padding: 10px 0;
}

.section_ttl_band {
    padding: 23px 10px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    background-color: #FFEDD1;
}

/*　ポイントイラスト　*/

.point_img {
    display: block;
    width: 670px;
    max-width: 90%;
    margin: 40px auto;
}

/*　ポイント説明　*/

.point_block {
    display: block;
    box-sizing: border-box;
    width: 800px;
    max-width: 90%;
    padding: 22px 28px;
    margin: 17px auto 10px;
    border: solid 1px #FF9D00;
    border-radius: 10px;
}

.point_ttl {
    display: flex;
    align-items: flex-end;
    font-size: 18px;
    font-weight: bold;
}

.point_ttl_img {
    padding: 0 10px 10px 10px;
    width: 98px;
    height: fit-content;
    border-bottom: solid 2px #FF9100;
}

.point_ttl_txt {
    flex: 1;
    padding: 0 20px 10px 10px;
    margin: 0;
    border-bottom: solid 2px #CECECE;
}

/*--------------------------------------*/
/*　　try　　*/
/*--------------------------------------*/

.try_contents {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 80%;
    margin: 0 auto;
}

.try_img {
    margin-top: 10px;
    width: 250px;
    height: auto;
}

.try_txt {
    flex: 1;
}

/*--------------------------------------*/
/*　　表　　*/
/*--------------------------------------*/

.section.__recommend_bottom {
    padding-top: 40px;
    padding-bottom: 20px;
}

/*--------------------------------------*/
/*　　運営者情報　　*/
/*--------------------------------------*/

.section.__manager {
    padding-top: 0;
}
.manager_ttl {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.manager_table {
    width: 60%;
    margin: 0 auto 50px;
    border-collapse: collapse;
}

.manager_table th, .manager_table td {
    padding: 10px;
}

.manager_table th {
    width: 100px;
    border-bottom: solid 2px #ffbe47;
}

.manager_table td {
    border-bottom: solid 2px #d3d3d3;
}

/*--------------------------------------*/
/*　　tablet　　*/
/*--------------------------------------*/

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

    .recommend_table_wrap {
        overflow-x: scroll;
    }

    .recommend_table_btn::before {
        right: 11px;
    }

    .ranking_block::before {
        top: -5px;
        left: 23px;
        width: 92px;
    }

    /*　ランキング見出しタイトル　*/

    .ranking_ttl {
        width: 320px;
        font-size: 20px;
    }

    .ranking_ttl::before, .ranking_ttl::after {
        top: auto;
        bottom: 0;
        left: -33px;
        width: 25px;
        height: 38px;
    }

    .ranking_ttl::after {
        right: -33px;
        left: auto;
    }

    /*　○○の基本情報　*/

    .ranking_info_ttl {
        margin: 20px auto 30px;
        font-size: 16px;
    }

    .ranking_info_ttl::before {
        width: 64px;
        height: 15px;
        right: 0;
        left: 0;
        bottom: -45px;
    }

    .ranking_info_ttl::after {
        display: none;
    }
}

/*--------------------------------------*/
/*　　sp　　*/
/*--------------------------------------*/

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

    .section {
        padding: 10px;
    }

    .section_ttl_band {
        margin-top: 24px;
    }

    /*　スクロールヒント　*/

    .recommend_scroll_wrap {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #808080;
    }

    .recommend_scroll {
        position: relative;
        padding: 3px 10px;
        font-size: 14px;
        background-color: #E2E2E2;
    }

    .recommend_scroll::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: -15px;
        margin: auto;
        width: 15px;
        height: 100%;
        content: '';
        background-color: #E2E2E2;
        clip-path: polygon(100% 0%, 100% 100%, 0 100%);
    }

    .recommend_scroll_icon {
        width: 25px;
        height: auto;
    }

    /*　比較表　*/

    .recommend_ttl {
        padding: 20px 10px;
        font-size: 21px;
        line-height: 1.1;
    }

    .recommend_table_wrap {
        margin-bottom: 25px;
    }

    .recommend_table_star {
        width: 98px;
    }

    .recommend_table th:nth-child(1)::before, .recommend_table th:nth-child(2)::before, .recommend_table th:nth-child(3)::before {
        left: 11px;
        width: 24px;
        height: 24px;
    }

    .section.__recommend_bottom {
        padding-top: 12px;
        padding-bottom: 8px;
    }

    /*　ランキング詳細　*/

    .section.__ranking {
        gap: 26px;
    }

    .ranking_servise_name {
        padding: 18px 17px 19px 88px;
        font-size: 24px;
    }

    .ranking_block::before {
        top: -5px;
        left: 10px;
        width: 70px;
    }

    /*　ランキング見出しタイトル　*/

    .ranking_ttl {
        width: 257px;
        font-size: 17px;
    }

    .ranking_ttl::before, .ranking_ttl::after {
        top: auto;
        bottom: 0;
        left: -33px;
        width: 25px;
        height: 38px;
    }

    .ranking_ttl::after {
        right: -33px;
        left: auto;
    }

    .ranking_ss {
        width: 90%;
    }

    .ranking_info_table {
        margin: 20px auto 22px;
        width: 90%;
    }

    .ranking_info_table th {
        width: 60px;
        font-size: 14px;
    }

    .ranking_info_table th, .ranking_info_table td {
        padding: 13px;
    }

    .ranking_check {
        flex-direction: column;
        align-items: center;
        width: 90%;
    }

    .ranking_check_img_wrap {
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        border-radius: 5px 5px 0 0;
    }

    .ranking_check_img {
        display: block;
        width: 100px;
    }

    .ranking_check_list {
        padding: 10px;
        border-radius: 0 0 5px 5px;
    }

    .ranking_check_list_item {
        padding: 13px 8px 13px 38px;
    }

    .ranking_btn, .ranking_btn:-webkit-any-link {
        margin: 28px auto 36px;
        font-size: 18px;
    }

    /*　3つのポイント　*/

    .section.__point, .section.__try {
        padding: 1px 0;
    }

    .section_ttl_band {
        padding: 17px 10px;
        font-size: 19px;
    }

    .section.__point .section_ttl_band {
        padding: 8px 10px 14px;
    }

    .point_img {
        width: 380px;
        margin: 30px auto;
    }

    .point_block {
        padding: 20px 15px 10px;
    }

    .point_ttl_img {
        width: 90px;
    }

    /*　try　*/

    .try_contents {
        flex-direction: column;
        gap: 2px;
        width: 90%;
    }

    /*　運営者情報　*/

    .manager_table {
        width: 95%;
        font-size: 14px;
    }

    .manager_table th {
        width: 84px;
    }

    .manager_table th, .manager_table td {
        padding: 10px 4px;
    }
}

.note{
    font-size: 12px;
}