@charset "UTF-8";
/*colum70*/
/*---------------------------faq*/

/* ==================================================
   基本レイアウト (.colum70)
================================================== */
.colum70 {
    text-align: left;
    display: block;
    clear: both;
    margin: 5vh auto;
    padding: 0;
    width: 100%;
    max-width: 1000px;
    font-size: 110%;
    color: #555353;
    line-height: 1.8;
    background: #fff;
}

.colum70::after,
.colum70-box::after {
    content: "";
    clear: both;
    display: block;
}

/* リンク */
.colum70 a:link,
.colum70 a:visited {
    color: #535253;
    text-decoration: none;
}

.colum70 a:hover {
    color: #535253;
    text-decoration: underline;
    transition: 1s;
}

/* ==================================================
   見出し設定 (h2, h3, h4, h5, h6)
================================================== */
.colum70 h2 {
    font-size: 200%;
    color: #fff;
    line-height: 1;
    margin: 1vh auto;
    padding: 0.5em 1%;
    text-shadow: 1px 1px 1px rgba(1, 1, 1, 0.5);
    border-left: 8px solid #24b4f0;
    background: #1479c2 url(../images/bg8.png) right no-repeat;
    background-size: cover;
    display: block;
    width: 98%;
}

.colum70 h2 small {
    font-family: "M PLUS Rounded 1c";
    font-size: 50%;
    color: #fff;
    line-height: 1.8;
    margin: 0;
    padding: 0;
    display: block;
}

/* 質問（Q）全体のマージン設定 */
.colum70 h3,
.colum70 h4 {
    font-size: 120%;
    color: #302f2f;
    line-height: 1.8;
    margin: 20px 50px 0px 50px;
    /* 左右に余白を設けて長すぎを防止 */
    display: block;
    width: auto;
}

.colum70 h4 i {
    color: #31c5fc;
    margin-right: 0.5em;
}

.colum70 h5 {
    font-size: 120%;
    color: #302f2f;
    line-height: 1.8;
    margin: 1em auto 5vh auto;
    padding: 1em 1%;
    border: 4px solid #249af0;
    display: block;
    width: 98%;
}

.colum70 h6 {
    clear: both;
    display: block;
    width: 60%;
    padding: 0.5em 5% 2em 5%;
    margin: 0 auto;
    text-align: left;
    border: 1px solid #1479c2;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    font-size: 120%;
    color: #555353;
    line-height: 1.8;
}

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

.colum70 h6 strong {
    font-size: 150%;
    color: #fff;
    line-height: 1;
    margin: 0 auto 0.5em auto;
    padding: 0.5em;
    text-align: center;
    border-radius: 5px;
    position: relative;
    top: -1.5em;
    display: block;
    width: 8em;
    background: #1068a8;
}

/* ==================================================
   FAQ・テキスト設定
================================================== */
/* 回答（A）全体のマージン設定 */
.colum70-box p {
    margin: 0px 50px 20px 50px;
    /* Qに合わせて左右に余白 */
    display: block;
    width: auto;
}

.colum70 p strong {
    font-size: 120%;
    color: #302f2f;
    line-height: 1.8;
}

.colum70 p strong i {
    color: #31c5fc;
    margin-right: 0.5em;
}

.colum70 ul {
    margin: 0 1em 0 2em;
}

/* FAQアイコン設計 (Q & A) */
.redbg1,
.bluebg1,
.yellowbg1 {
    position: relative;
    padding: 0.25em 0.5em 0.25em 3.2em !important;
}
.redbg1,
.bluebg1,
.yellowbg1 {
    background: transparent;
    /* 背景を透明にする */
}


.redbg1::before,
.bluebg1::before,
.yellowbg1::before {
    content: "Q";
    position: absolute;
    left: 0.25em;
    top: 0.25em;
    font-size: 110%;
    color: #fff;
    border-radius: 2px;
    padding: 0.1em 0.5em;
    line-height: 1.2;
}

.redbg1::before {
    background: #e8383d;
}

.bluebg1::before {
    background: #2881e6;
}

.yellowbg1::before {
    background: #31c5fc;
}

.bluebg2 {
    position: relative;
    padding: 0 0 0 3.2em !important;
    font-size: 110%;
    color: #535253;
    line-height: 1.8;
    display: block;
}

.bluebg2::before {
    content: "A";
    position: absolute;
    left: 0.25em;
    top: 0;
    font-size: 100%;
    color: #fff;
    background: #74c8eb;
    border-radius: 2px;
    padding: 0.1em 0.5em;
    line-height: 1.2;
}

/* ==================================================
   テーブル (table) / リスト (dl)
================================================== */
.colum70 dl {
    width: 94%;
    margin: 0.5em auto 2vh auto;
    padding: 0;
    display: block;
}

.colum70 dt {
    font-size: 120%;
    color: #302f2f;
    line-height: 1.8;
    margin: 1em 2%;
    padding: 0.5em 2%;
    border: 1px solid #31c5fc;
    background: #d4f3ff;
    border-radius: 5px;
    display: inline-block;
}

.colum70 table {
    border-collapse: collapse;
    margin: 2vh auto;
    padding: 0;
    width: 90%;
    color: #535253;
    font-weight: normal;
    border: solid 1px #dbd9d9;
    font-size: 80%;
}

.colum70 table caption {
    color: #fff;
    background: #278dd6 url(../images/bg8.png) center no-repeat;
    background-size: 100%;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    font-size: 150%;
    margin: 0;
    padding: 0.5em;
}

.colum70 .subgroup {
    color: #313030;
    font-weight: normal;
    background: #f8f7f8;
}

.colum70 tr th:nth-child(1),
.colum70 tr th:nth-child(2),
.colum70 tr th:nth-child(3),
.colum70 tr th:nth-child(4),
.colum70 tr th:nth-child(9) {
    color: #313030;
    font-weight: bold;
    background: #ece9ec;
}

.colum70 table p {
    display: block;
    margin: 0;
    padding: 0;
}

.colum70 table th,
.colum70 table td {
    border: solid 1px #dbd9d9;
}

.colum70 table th {
    padding: 0.5em;
    white-space: nowrap;
}

.colum70 table td {
    color: #535253;
    font-weight: normal;
    padding: 0.5em;
}

/* ==================================================
   画像設定 (.photo, img, figure)
================================================== */
.colum70-box img {
    width: 40%;
    margin: 2% 5%;
    padding: 0;
    float: right;
}

.colum70 h6 figure {
    width: 30%;
    margin: 0 1% 5% 1%;
    box-sizing: border-box;
    float: left;
}

.colum70 h6 figcaption {
    text-align: center;
    color: #555353;
    font-weight: normal;
    font-size: 80%;
    width: 96%;
    margin: 1% auto;
}

.colum70 h6 figure img {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

.colum70 .largephoto,
.colum70 .largephoto2,
.colum70 .largephoto3,
.colum70 .smallphoto,
.colum70 .smallphoto2,
.colum70 .smallphoto3 {
    transition: 1s;
    padding: 0;
}

.colum70 .largephoto:hover,
.colum70 .smallphoto:hover {
    opacity: 0.5;
}

.colum70 .largephoto {
    display: block;
    width: 90%;
    margin: 0 5% 5vh 5%;
}

.colum70 .largephoto2 {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.colum70 .largephoto3 {
    display: block;
    width: 94%;
    margin: 1% 3%;
}

.colum70 .smallphoto,
.colum70 .smallphoto2,
.colum70 .smallphoto3 {
    display: none;
    margin: 0 auto;
    width: 100%;
}

.colum70 .smallphoto {
    margin-bottom: 5vh;
}

.colum70 .largephoto img,
.colum70 .largephoto2 img,
.colum70 .largephoto3 img,
.colum70 .smallphoto img,
.colum70 .smallphoto2 img,
.colum70 .smallphoto3 img {
    display: block;
    width: 100%;
}

/* ==================================================
   その他のコンポーネント (smallbox, btn3)
================================================== */
.colum70-smallbox {
    display: block;
    margin: 2vh 2%;
    padding: 0;
    width: 96%;
    text-align: left;
}

.colum70-smallbox p {
    width: auto;
    margin: 0.5em auto;
    padding: 0 1em;
    float: right;
}

.colum70 .btn3 {
    padding: 0.5em 1em;
    text-decoration: none;
    background-color: #1479c2;
    color: #fff;
    border-bottom: solid 4px #1068a8;
    border-radius: 3px;
    transition: all .4s ease-out;
    font-size: 90%;
    width: 30%;
    margin: 1.5em auto 1em auto;
    font-weight: normal;
    text-align: center;
    display: block;
}

.colum70 .btn3 i {
    vertical-align: middle;
    box-sizing: border-box;
    margin: 0 0.25em 0 0;
}

.colum70 .btn3:link,
.colum70 .btn3:visited {
    text-decoration: none;
    color: #fff;
}

.colum70 .btn3:hover {
    background-color: #b9a27f;
    border-bottom: solid 4px #98866a;
    transition: 1s;
}

/* ==================================================
   メディアクエリ (タブレット・スマホ) max-width: 768px
================================================== */
@media screen and (max-width: 768px) {
    .colum70 {
        margin: 2vh auto 0 auto;
        width: 90%;
    }

    .colum70-box {
        display: block;
        width: 100%;
    }

    .colum70 dl i {
        transform: rotateX(-45deg);
        display: block;
    }

    .colum70 dt {
        width: 94%;
    }

    /* スマホ版でも同じくwidthの制限を外してはみ出しを防止 */
    .colum70 h3,
    .colum70 h4 {
        margin: 1em 2% 0 2%;
        width: auto;
    }

    .colum70-box p {
        margin: 0.5em 2% 2em 2%;
        width: auto;
    }

    .colum70 ul {
        margin: 0 1em 0 -1em;
    }

    .colum70 img {
        width: 90%;
        margin: 2% 5%;
        float: left;
        box-sizing: border-box;
    }

    .colum70 table {
        width: 100%;
    }

    .colum70-smallbox p {
        display: block;
        margin: 0.5em auto;
        padding: 0 1em;
    }

    .colum70-smallbox figcaption br {
        display: block;
    }

    .colum70 h6 {
        width: 90%;
    }

    .colum70 .largephoto3 {
        display: none;
    }

    .colum70 .smallphoto3 {
        display: block;
        width: 94%;
        margin: 1% 3%;
    }

    .colum70 .btn3 {
        width: 90%;
    }
}

/* ==================================================
   メディアクエリ (小型スマホ) max-width: 600px
================================================== */
@media screen and (max-width: 600px) {
    .colum70 h6 figure {
        width: 96%;
        margin: 0 2% 2% 2%;
    }

    .colum70 h6 figure img {
        width: 60%;
        margin: 0 20%;
    }

    .colum70 .largephoto,
    .colum70 .largephoto2 {
        display: none;
    }

    .colum70 .smallphoto {
        display: block;
        width: 90%;
        margin: 0 5% 5vh 5%;
    }

    .colum70 .smallphoto2 {
        display: block;
    }
}