/* CSS Document */

main.fs-l-main {
    max-width: inherit;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #aee0ef;
}

.fs-l-pageMain {
    margin: auto;
}

.clearfix:after {
    content: " ";
    display: block;
    clear: both;
}

ul {
    padding: 0;
}

@media screen and (min-width:970px) {

    .contents.pc {
        display: block;
    }

    .contents.sp {
        display: none;
    }

    .contents {
        height: auto;
        width: 950px;
        padding: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: auto;
        margin-right: auto;
        background-repeat: repeat;
        background-attachment: scroll;
        background-color: #ffffff;
        color: #000;
    }

    .banner {
        background-repeat: no-repeat;
        width: 950px;
        height: 322px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        background-attachment: scroll;
        text-align: left;
        padding: 0px;
        clear: both;
        background-image: url(https://pair.itembox.design/item/whiteclover/pages/marriagering/pc/main_img01.jpg);
    }

    .item {
        text-align: center;
        top: 10px;
        padding-top: 15px;
    }

    .item li {
        display: inline-block;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 4.5px;
        padding-left: 4.5px;
    }

    .contents .item li {
        display: inline-block;
        padding: 0;
    }

    .title_img01 {
        display: block;
        margin: 0 auto 26px;
    }

    .page_menu {
        margin-bottom: 40px;
    }


    .mintyo,
    .page_about h3,
    .page_about h4 {
        /* font-family: "小塚明朝 Pr6N", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */
        font-family: 'Noto Serif JP', serif;
    }

    .ranking1 {
        width: 836px;
        margin: 0 auto;
        position: relative;
    }

    .ranking1 .detail_btn {
        position: absolute;
        top: 180px;
        right: 56px;
    }

    .ranking1 .product_title {
        position: absolute;
        top: 77px;
        left: 515px;
        line-height: 24px;
        font-size: 18px;
        font-weight: bold;
    }

    .ranking1 .product_text {
        width: 730px;
        position: absolute;
        top: 314px;
        left: 48px;
        line-height: 24px;
    }

    .ranking_l_r {
        width: 825px;
        margin: 30px auto 0;
    }

    .ranking_l,
    .ranking_r {
        width: 400px;
        float: left;
    }

    .ranking_l {
        margin-right: 25px;
    }

    .ranking_l .product_title,
    .ranking_r .product_title {
        font-size: 18px;
        line-height: 24px;
        font-weight: bold;
        margin: 20px 5px 0;
    }

    .ranking_l .product_text,
    .ranking_r .product_text {
        line-height: 21px;
        margin: 10px 5px;
    }

    .ranking_l .detail_btn,
    .ranking_r .detail_btn {
        display: block;
        margin: 0 auto 30px;
    }

    .product_detail01,
    .product_detail02 {
        text-align: center;
        border: solid #aee0ef 1px;
        width: 906px;
        margin: 20px auto 0;
        padding: 30px 0;
    }

    .product_detail01 .product_detail_img,
    .product_detail01 .product_detail_text,
    .product_detail02 .product_detail_img,
    .product_detail02 .product_detail_text {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
    }

    .product_detail01 .product_detail_text,
    .product_detail02 .product_detail_text {
        margin-left: 50px;
        line-height: 24px;
    }

    .link_btn_single {
        display: block;
        margin: 80px auto 30px;
    }

    .links {
        margin: 50px 0 0;
        padding: 0 0 50px;
    }

    .links .link_btn {
        display: block;
        margin: 20px auto 0;
    }


    /* page_about */

    .page_about {
        width: 820px;
        margin: 0 auto;
    }

    .page_about p {
        font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
        margin-bottom: 20px;
        line-height: 21px;
    }

    .page_about h3 {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        margin-top: 70px;
        margin-bottom: 30px;
    }

    .page_about h4 {
        color: #000;
        font-size: 15px;
        font-weight: bold;
    }

    .page_about img {
        display: block;
        margin: 40px 0 0 20px;
    }

    .ring_size_box_l {
        float: left;
        width: 370px;
        margin-bottom: 45px;
    }

    .ring_size_box_r {
        width: 370px;
        float: right;
        margin-bottom: 45px;
    }

    .ring_size img {
        display: block;
        margin: 20px auto 0;
    }

    .size_table table {
        width: 390px;
        table-layout: fixed;
        text-align: center;
        margin-bottom: 20px;
    }

    .size_table_l {
        float: left;
    }

    .size_table_r {
        float: right;
    }

    .size_table th {
        background-color: #aee0ef;
    }

    .size_table th,
    .size_table td {
        padding: 12px 0;
        border: solid 1px #888888;
    }


    /* page_qa */


    /*　タブ　*/

    #qa .tab_area ul li {
        display: block;
        float: left;
        width: 20%;
        box-sizing: border-box;
        text-align: center;
        padding: 10px 0;
        border-top: 2px solid #aee0ef;
        border-bottom: 2px solid #aee0ef;
        border-left: 1px solid #aee0ef;
        border-right: 1px solid #aee0ef;
        border-radius: 5px 5px 0 0;
    }

    #qa .tab_area ul li:hover,
    #qa .tab_area ul li.active {
        background-color: #aee0ef;
        cursor: pointer;
    }

    #qa .content_area {
        border-top: 5px solid #aee0ef;
        position: relative;
    }

    #qa .content_area .content_block {
        padding: 0 10px 20px;
    }

    #qa .content_area .content_block .dropdown>dt {
        padding: 20px 20px 20px 60px;
        margin: 20px 0 0;
        background-color: #aee0ef;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        position: relative;
    }

    #qa .content_area .content_block .dropdown>dt:before {
        position: absolute;
        content: "Q.";
        left: 30px;
    }

    #qa .content_area .content_block .dropdown>dt:after {
        position: absolute;
        content: "　";
        background-image: url(https://pair.itembox.design/item/whiteclover/pages/marriagering/pc/arrow.png);
        right: 20px;
        width: 34px;
        height: 34px;
        top: 10px;
        -webkit-transition: -webkit-transform 0.5s ease;
        transition: -webkit-transform 0.5s ease;
        transition: transform 0.5s ease;
        transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    }

    #qa .content_area .content_block .dropdown>dt.open:after {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    #qa .content_area .content_block .dropdown>dd {
        margin: 20px 0;
        font-size: 14px;
        display: none;
        padding: 0 60px 20px;
        line-height: 1.5em;
        position: relative;
    }

    #qa .content_area .content_block .dropdown>dd:before {
        font-size: 16px;
        position: absolute;
        content: "A.";
        left: 30px;
        font-weight: bold;
        font-family: "小塚明朝 Pr6N", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    }

    .qa_details_list dt {
        font-size: 105%;
    }

    .qa_details_list dd {
        margin-left: 1.2em;
        margin-bottom: 1em;
    }

    .qa_details_list dd span {
        margin-left: 1.2em;
        position: relative;
        display: block;
    }

    .qa_details_list dd span::before {
        position: absolute;
        content: "※";
        left: -1.2em;
    }
}

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

    main.fs-l-main {
        background-color: #fff;
    }

    .contents.pc {
        display: none;
    }

    .contents.sp {
        display: block;
    }

    .main_text {
        width: 95%;
        margin: 5px auto 15px;
    }

    .item {
        text-align: center;
    }

    .item li {
        display: inline-block;
        padding: 0;
    }

    .page_menu li {
        width: 32%;
    }

    .contents {
        margin-bottom: 30px;
    }

    .contents img {
        width: 100%;
        display: block;
        margin-right: auto;
        margin-left: auto;
    }

    .mintyo,
    .page_about h3 {
        /* font-family: "小塚明朝 Pr6N", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */
        font-family: 'Noto Serif JP', serif;
    }

    .contents .title_img01 {
        width: 60%;
        margin: 10px auto;
        display: block;
    }

    .page_best5,
    .page_about,
    .page_qa {
        width: 95%;
        margin: 0 auto;
    }


    /* page_best5 */

    .ranking1 {
        position: relative;
    }

    .ranking1 .product_text {
        width: 90%;
        position: absolute;
        top: 60%;
        left: 0;
        right: 0;
        margin: 0 auto;
        color: #000;
    }

    .ranking_l_r {
        margin: 30px auto 0;
    }

    .ranking_l,
    .ranking_r {
        width: 49%;
        float: left;
    }

    .ranking_l {
        margin-right: 2%;
    }

    .ranking_l .product_title,
    .ranking_r .product_title {
        margin: 10px auto 0;
        width: 90%;
    }

    .ranking_l .detail_btn,
    .ranking_r .detail_btn {
        display: block;
        margin: 10px auto 30px;
        width: 85%;
    }

    .product_detail01,
    .product_detail02 {
        text-align: center;
        border: solid #aee0ef 1px;
        margin: 10px auto 0;
        padding: 10px 5px 20px;
    }

    .product_detail01 .product_detail_img,
    .product_detail01 .product_detail_text {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        width: 49%;
    }

    .product_detail02 .product_detail_img,
    .product_detail02 .product_detail_text {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        width: 95%;
    }

    .product_detail02 .product_detail_text {
        margin-top: 10px;
    }

    .link_btn_single {
        margin-bottom: 20px;
    }

    .links {
        margin: 30px 0 0;
        padding: 0 0 30px;
    }

    .links .link_btn {
        display: block;
        margin: 10px auto 0;
    }


    /* page_about */

    .page_about p {
        font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
        margin-bottom: 20px;
        line-height: 21px;
    }

    .page_about_contents {
        border-bottom: 1px solid #aee0ef;
        margin: 20px 0;
    }

    .page_about h3 {
        text-align: center;
        font-size: 140%;
        font-weight: bold;
        margin: 20px 0;
        position: relative;
    }

    .page_about h3:after {
        position: absolute;
        content: "　";
        background-image: url(https://pair.itembox.design/item/whiteclover/pages/marriagering/sp/arrow_b.png);
        background-size: cover;
        right: 10px;
        width: 1.5em;
        height: 1.5em;
        bottom: 0;
        -webkit-transition: -webkit-transform 0.5s ease;
        transition: -webkit-transform 0.5s ease;
        transition: transform 0.5s ease;
        transition: transform 0.5s ease, -webkit-transform 0.5s ease;
        top: 0;
        margin: auto;
    }

    .page_about h3.open:after {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .page_about h4 {
        color: #000;
        font-size: 105%;
    }

    .page_about h4 span {
        color: #aee0ef;
    }

    .ring_size img {
        display: block;
        margin: 20px auto;
        width: 30%;
    }

    .size_table table {
        table-layout: fixed;
        text-align: center;
        width: 80%;
        margin: 0 auto 5px;
    }

    .size_table th {
        text-align: center;
        background-color: #aee0ef;
    }

    .size_table th,
    .size_table td {
        padding: 5px 0;
        border: solid 1px #888888;
    }

    .page_about .mb-0 {
        margin-bottom: 0;
    }

    .page_about .note {
        position: relative;
        margin-left: 1.2em;
    }

    .page_about .note::before {
        position: absolute;
        content: "※";
        left: -1.2em;
    }

    .page_about .comment {
        display: none;
        padding-bottom: 30px;
    }


    /* page_qa */


    /*　タブ　*/

    #qa .tab_area ul li {
        display: block;
        float: left;
        width: 20%;
        box-sizing: border-box;
        text-align: center;
        padding: 10px 4px;
        border-top: 2px solid #aee0ef;
        border-bottom: 2px solid #aee0ef;
        border-left: 1px solid #aee0ef;
        border-right: 1px solid #aee0ef;
        border-radius: 5px 5px 0 0;
    }

    #qa .tab_area ul li:hover,
    #qa .tab_area ul li.active {
        background-color: #aee0ef;
        cursor: pointer;
    }

    #qa .content_area {
        border-top: 5px solid #aee0ef;
        position: relative;
    }

    #qa .content_area .content_block .dropdown>dt {
        padding: 5px 3em 5px 2em;
        margin: 20px 0 0;
        background-color: #aee0ef;
        font-weight: bold;
        cursor: pointer;
        position: relative;
    }

    #qa .content_area .content_block .dropdown>dt:before {
        content: "Q.";
        position: absolute;
        left: 0.5em;
    }

    #qa .content_area .content_block .dropdown>dt:after {
        position: absolute;
        content: "　";
        background-image: url(https://pair.itembox.design/item/whiteclover/pages/marriagering/sp/arrow.png);
        background-size: cover;
        right: 10px;
        width: 2em;
        height: 2em;
        bottom: 0;
        -webkit-transition: -webkit-transform 0.5s ease;
        transition: -webkit-transform 0.5s ease;
        transition: transform 0.5s ease;
        transition: transform 0.5s ease, -webkit-transform 0.5s ease;
        top: 0;
        margin: auto;
    }

    #qa .content_area .content_block .dropdown>dt.open:after {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    #qa .content_area .content_block .dropdown>dd {
        margin: 10px 0 20px;
        display: none;
        padding: 5px 5px 5px 2em;
        position: relative;
    }

    #qa .content_area .content_block .dropdown>dd:before {
        content: "A.";
        position: absolute;
        left: 0.5em;
        font-weight: bold;
    }

    .qa_details_list dt {
        font-size: 105%;
    }

    .qa_details_list dd {
        margin-left: 1.2em;
        margin-bottom: 1em;
    }

    .qa_details_list dd span {
        margin-left: 1.2em;
        position: relative;
        display: block;
    }

    .qa_details_list dd span::before {
        position: absolute;
        content: "※";
        left: -1.2em;
    }

}