@charset "UTF-8";

/********************************************
                  ResetCSS
*********************************************/
* {
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    background-size: contain;
    word-break: keep-all;
}

/********************************************
                フォントの定義
*********************************************/

/*@font-face {
    font-family: "UZURA";
    src: url("./fonts/UZURA.woff") format('woff') !important;
    font-style: normal;
    font-weight: 400;
} */
body {
    font-family: 'sans-serif', 'メイリオ', 'Meiryo', 'ＭＳ ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3';
}

/********************************************
                ＰＣサイズ
*********************************************/

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

    html {
        display: block;
        width: 100%;
        height: auto;
    }

    body {
        display: flex;
        flex-direction: column;
        height: auto;
        font-size: 14pt;
        background-image: url();
        color: #000;
        width: 100%;
        background-size: contain;
        font-family: sans-serif;
    }

    #wrapper {
        padding-bottom: 5%;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        flex: 1;
        background-size: contain;
        background-color: transparent;
    }

    .content {
        width: 70%;
        margin: 0 auto;
        background-color: transparent;
        background-size: contain;
        padding: 1.5em;
    }

    a {
        text-decoration: none;
        color: #fff;
    }

    a:link {
        color: #fff;
    }

     a:visited {
        color: #fff;
    }

     a:hover {
        color: #fff;
    }

     a:active {
        color: #fff;
    }

    #scrollTop {
        background-color: #036eb8;
        border-radius: 20px;
        color: #fff;
        font-size: 18pt;
        bottom: 20px;
        padding: 1em;
        position: fixed;
        right: 20px;
    }

    /*******************************************
   
*******************************************/
    #content-top {
        width: 100%;
        height: auto;
    }

    .top_1 {
        width: 100%;
        height: 35px;
        background-color: #fff;
        margin-top: 5%;
        text-align: center;

    }

    .col_s {
        color: silver;
        font-size: 17pt;
        font-weight: bold;
    }

    .col_b {
        color: #036eb8;
        font-size: 36pt;
        font-weight: bold;
        margin: -38px;
    }

    .top_2 {
        width: 100%;
        height: 50px;
        background-color: silver;
        margin-top: 3%;
        font-weight: bold;
        display: flex;
        align-items: center;
    }

    .txt_19 {
        margin-left: 19%;
    }

    .top_3 {
        background-size: cover;
        background-image: url(../img/fv.jpg);
        width: 100%;
        height: 600px;
        background-position: center;
        background-attachment: scroll;
        color: #fff;
        margin: -1% 0;
    }

    .right {
        position: absolute;
        left: 53%;
        top: 50%;
        font-weight: bold;
        font-size: 26pt;
    }

    .txt_right {
        margin: 0 0 0 65.5%;
    }

    .txt_51 {
        font-size: 51pt;
    }

    .txt_58 {
        font-size: 58pt;
    }

    .top_4 {
        width: 100%;
        height: 50px;
        background-color: silver;
        font-weight: bold;
        display: flex;
        align-items: center;
    }

    .center {
        margin: 0 auto;
    }

    .center2 {
        text-align: center;
    }

    /*******************************************
   
*******************************************/
    #header {
        background: #fff;
        width: 100%;
        height: 50px;
        background-size: contain;
        /*--------------------
          header固定設定
      -----------------------*/
        margin: 0;
        z-index: 5;
        position: fixed;
        clear: both;
    }

    .header_logo {
        float: left;
        margin: 0;
    }

    .header_content {
        text-align: right;
        color: gray;
        font-size: 28pt;
        padding: 0 0.75em 0 0;
    }

    #footer {
        text-align: center;
        background: #036eb8;
        color: #fff;
        max-width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*******************************************
              .section_1
*******************************************/
    .section_1 {
        background-image: url(../img/bk.jpg);
        height: 600px;
        background-size: cover;
    }

    h2 {
        padding: 0em 0.5em;
        color: #036eb8;
        background: transparent;
        border-left: solid 15px #9f9fa0;
        /*line-height:;*/
    }

    .h2 {
        font-weight: bold;
        font-size: 21pt;
        margin: 0.5em 0 2em 0;
    }

    .txt_48 {
        font-size: 42pt;
    }

    .col_red {
        color: #f00;
        font-size: 11pt;
    }

    .radius {
        border: solid 3px #036eb8;
        border-radius: 10px;
        width: 60%;
        background-color: rgb(255, 255, 255, 0.9);
        margin: 30px auto;
        padding: 2em;
        letter-spacing: 0.25em;
        line-height: 3.5em;
        z-index: 0;
        position: relative;
    }

    .radius_2 {
        border: solid 3px #036eb8;
        border-radius: 10px;
        width: 45%;
        font-family: 'メイリオ';
        color: #fff;
        background-color: #036eb8;
        margin: 0 auto -60px auto;
        padding: 1em;
        font-size: 13.5pt;
        z-index: 1;
        position: relative;
    }

    .radius_3 {
        border: solid 3px #036eb8;
        border-radius: 10px;
        width: 50%;
        font-family: 'メイリオ';
        font-size: 14pt;
        background-color: rgb(255, 255, 255, 0.8);
        margin: 10px auto;
        padding: 5em 2em 2em 5em;
        z-index: 0;
        position: relative;
    }

    .txt_24 {
        font-size: 24pt;
        color: #036eb8;
        font-family: 'メイリオ';
    }

    .txt_11 {
        font-size: 11pt;
        color: gray;
        font-family: 'メイリオ';
    }

    .txt_18 {
        font-size: 18pt;
        color: #000;
        font-family: 'メイリオ';
    }

    .br-s {
        padding: 2em 0.5em;
    }

    ruby {
        position: relative;
        ruby-position: over;
    }

    ruby rt {
        position: absolute;
    }

    ruby rt.rt {
        margin: -45px;
    }

    .hr-s {
        border: solid 0px transparent;
        padding: 0.5em;
    }

    /*******************************************
             .section_2
*******************************************/
    .text_content {
        font-family: 'メイリオ';
        padding-top: 2em;
        font-size: 14pt;
    }

    .h3_1 {
        color: #036eb8;
    }

    .txt_item {
        color: gray;
        padding-bottom: 2em;
    }

    .txt_item_2 {
        color: #036eb8;
        font-size: 18pt;
        font-weight: bold;
        background: linear-gradient(transparent 30%, #ffff66 70%);
    }

    .radius_4 {
        border: solid 3px #036eb8;
        border-radius: 10px;
        color: #fff;
        background-color: #036eb8;
        padding: 1em;
        width: 60%;
        margin: 2em auto 0 auto;
        font-size: 15pt;
    }

    .txt_21_0 {
        font-size: 21pt;
    }

    .txt_left_in {
        display: inline-block;
        text-align: left;
        margin: 0 0 0 5em;
    }

    /*******************************************
              .section_3
*******************************************/
    .result_content {
        font-size: 12.5pt;
        padding: 0 2em;
        font-family: 'メイリオ';
    }

    .radius_5 {
        border: solid 3px #036eb8;
        border-radius: 10px;
        color: #fff;
        background-color: #036eb8;
        padding: 0.5em;
        width: 100%;
        font-size: 21pt;
        text-align: center;
    }



    .h3_2 {
        padding: 1em 0;
        margin-left: -1em;
    }

    .line_1 {
        background: linear-gradient(transparent 30%, #ffff66 70%);
    }

    ul {
        margin-left: 0.5em;
    }

    /*******************************************
              .section_4
*******************************************/
    .comparison_content_left {
        float: left;
        width: 40%;
        font-family: 'メイリオ';
    }

    .comparison_content_right {
        float: right;
        width: 30%;
    }

    .radius_content {
        margin: 0 auto;
    }

    .radius_6 {
        border: solid 3px #036eb8;
        border-radius: 10px;
        width: 80%;
        font-family: 'メイリオ';
        color: #fff;
        background-color: #036eb8;
        margin: 0 5% -30px 23%;
        padding: 1em;
        font-size: 13.5pt;
        z-index: 1;
        position: relative;
        text-align: center;

    }

    .radius_7 {
        border: solid 3px #036eb8;
        border-radius: 10px;
        width: 100%;
        background-color: rgb(255, 255, 255, 0.8);
        margin: 10px 5% 0 12%;
        padding: 3em 2em 2em 2em;
        z-index: 0;
        position: relative;
    }

    .txt_item_3 {
        color: gray;
        font-family: 'メイリオ';
        font-size: 10pt;
        position: relative;
    }

    ul li.mark {
        list-style: none;
        padding: 0 0 0 4.5em;
    }



    .rate {
        position: relative;
        display: inline-block;
    }

    .rate:before {
        content: "★★★★★";
        color: #ccc;
    }

    .rate0-5:after,
    .rate1:before,
    .rate1:after,
    .rate1-5:before,
    .rate1-5:after,
    .rate2:before,
    .rate2:after,
    .rate2-5:before,
    .rate2-5:after,
    .rate3:before,
    .rate3:after,
    .rate3-5:before,
    .rate3-5:after,
    .rate4:before,
    .rate4:after,
    .rate4-5:before,
    .rate4-5:after,
    .rate5:after {
        position: absolute;
        top: 0;
        left: 0;
        color: #FFA500;
        overflow: hidden;
        height: 24px;
    }

    .rate .rate0-5:after,
    .rate .rate1-5:after,
    .rate .rate2-5:after,
    .rate .rate3-5:after,
    .rate .rate4-5:after {
        width: 8px;
        content: "★";
    }

    .rate .rate1:after,
    .rate .rate1-5:before {
        content: "★";
    }

    .rate .rate1-5:after {
        left: 1em;
    }

    .rate .rate2:after,
    .rate .rate2-5:before {
        content: "★★";
    }

    .rate .rate2-5:after {
        left: 2em;
    }

    .rate .rate3:after,
    .rate .rate3-5:before {
        content: "★★★";
    }

    .rate .rate3-5:after {
        left: 3em;
    }

    .rate .rate4:after,
    .rate .rate4-5:before {
        content: "★★★★";
    }

    .rate .rate4-5:after {
        left: 4em;
    }

    .rate .rate5:after {
        content: "★★★★★";
    }











}

/*******************************************
    レスポンシブデザイン用のメディアクエリ
*******************************************/
/**画像メディア対応**/
@media only screen and (max-width: 834px) {
    img {
        max-width: 100%;
    }
}

/**印刷機能**/
@media print {
    body img .logo .sidenavi {
        display: block;
    }
}

@media print, screen and (-webkit-min-device-pixel-ratio: 0) {
    ::i-block-chrome {
        display: block;
    }
}

/*******************************************/