@charset "UTF-8";

/*---------------------------------------------------------
    余白
---------------------------------------------------------*/
.free_area > div, .free_area p{
    margin-bottom: 1.5rem;
}


/*---------------------------------------------------------
    画像
---------------------------------------------------------*/
.single-contents .free_area img{
    max-width: 70%;
}
.single-contents .aligncenter{
    margin-inline: auto;
}
.single-contents .flee_flt_box img.alignright{
    float: right;
    margin-left: 4%;
}
.single-contents .flee_flt_box img.alignleft{
    float: left;
    margin-right: 4%;
}
.single-contents .flee_flt_box img{
    max-width: 400px;
}
/* Tab (Portrait)
------------------------------------------*/
@media only screen and (max-width: 960px) {
.single-contents .flee_flt_box img{
    max-width: 280px;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.single-contents .free_area img{
    max-width: 90%;
}
.single-contents .flee_flt_box img.alignright{
    float: none;
    margin-left: 0;
    margin-inline: auto;
}
.single-contents .flee_flt_box img.alignleft{
    float: none;
    margin-right: 0;
    margin-inline: auto;
}
.single-contents .free_area img{
    float: none;
    width: 90%;
    padding: 0;
    margin: 1em auto;
}
.single-contents .flee_flt_box img{
    max-width: none;
}
}

/*---------------------------------------------------------
    title
---------------------------------------------------------*/
.single-contents h4,
.single-contents h5,
.single-contents h6{
    font-size: min(2.8vw, 156%);
    font-weight: var(--fw-bold);
    padding:1em 1.5em;
    margin-top: 60px;
    margin-bottom:40px;
}

.single-contents h4{
    color:#fff;
    background-color: #1c3670;
}

.single-contents h5{
    color:#3871b5;
    border-top: 1px solid #3871b5;
    border-bottom: 1px solid #3871b5;
}

.single-contents h6{
    color:#3871b5;
    background-color: #ecf0f1;
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.single-contents h4,
.single-contents h5,
.single-contents h6{
    font-size: 120%;
    padding:1em 1.5em;
    margin-top: 10%;
    margin-bottom:6%;
}
}

/*---------------------------------------------------------
    キャッチコピー
---------------------------------------------------------*/
.single-contents .free_copy{
    font-weight: var(--fw-bold);
    font-size: min(2.8vw, 150%);
    margin-bottom: 20px;
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.single-contents .free_copy{
    font-size: 120%;
    margin-bottom: 3%;
}
}

/*---------------------------------------------------------
    テキストリンク
---------------------------------------------------------*/
.single-contents a{
    text-decoration: underline;
}

/*---------------------------------------------------------
    btn
---------------------------------------------------------*/
.single-contents .free_btn{
    text-decoration: none;
    font-size: min(2vw, 1.25rem);
    font-weight: var(--fw-bold);
    letter-spacing: .1em;
    line-height: 1.2;
    font-feature-settings: "palt";
    color: #FFF;
    text-align: right;
    background-color: var(--color-org);
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: .8em;
    min-width: 16em;
    max-width: 430px;
    height: auto;
    min-height: 70px;
    border-radius: .5em;
    padding: .5em 3em .5em 1em;
    transition: filter .5s;
    position: relative;
    vertical-align: top;
    margin-top: .5em;
}
.single-contents .free_btn::after,
.single-contents .free_btn::before{
    position: absolute;
    display: block;
    font-family: 'fontello';
    content: '\e800';
    font-weight: normal;
    text-align: center;
    width: auto;
    right: 4%;
    top:50%;
    transform:translateY(-50%);
    transition: all .4s;
    animation-delay: 0.1s;
    animation-fill-mode: both;
    animation-duration: 0.6s;
    overflow: hidden;
}
.single-contents .free_btn:hover{
    filter: brightness(1.08);
}
.single-contents .free_btn:hover::before{
    animation-name: transformRightLeft;
    opacity: 0;
}
.single-contents .free_btn:hover::after{
    animation-name: transformLeftRight;
}
.single-contents .free_btn + .free_btn{
    margin-left: .8em;
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.single-contents .free_btn{
    font-size: 100%;
    text-align: left;
    display: block;
    min-width: auto;
    max-width: 90%;
    height: auto;
    min-height: auto;
    margin-inline:auto;
    padding: 1em 3em 1em 1em;
}
.single-contents .free_btn + .free_btn{
    margin-left: 0;
    margin-inline: auto;
}
}

/*---------------------------------------------------------
    table
---------------------------------------------------------*/
.single-contents th,
.single-contents td{
    border-collapse: collapse;
    vertical-align: top;
    border: 1px solid #ccc;
    padding: 1em;
}
.single-contents th{
    background-color: #ecf0f1;
    text-align: left;
    font-weight: normal;
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.single-contents th,
.single-contents td{
    padding: .7em;
}
}


/*---------------------------------------------------------
    ボックス
---------------------------------------------------------*/
.single-contents .free_box{
    background-color: #ecf0f1;
    padding:3em;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.single-contents .free_box{
    padding:2em;
}
}

/*---------------------------------------------------------
    ライン
---------------------------------------------------------*/
.single-contents hr{
    background: #ccc;
}

/*---------------------------------------------------------
    箇条書き
---------------------------------------------------------*/
.single-contents ol,
.single-contents ul{
    list-style: none;
}
.single-contents ol li,
.single-contents ul li,
.single-contents .free_check{
    border-bottom: 1px solid #ccc;
    position: relative;
}
.single-contents ol{
    counter-reset: step;
}
.single-contents ol li::before{
    counter-increment: step;
    content: counter(step);
    font-family: "Lexend Mega", sans-serif;
    font-size: 187%;
    color:#3871b5;
    position: absolute;
    left:0;
    top: .2em;
}
.single-contents ul li::before{
    content:"";
    display: inline-block;
    width: 0.8em;
    height:0.8em;
    background-color: #3871b5;
    border-radius: 50px;
    position: absolute;
    left:0;
    top: 1.7em;
}
.single-contents .free_check::before{
    content:"";
    display: inline-block;
    background-image: url(../images/common/icon-chk03.svg);
    background-repeat: no-repeat;
    width: 2em;
    height: 1.5em;
    position: absolute;
    left:0;
    top: 1.4em;
}
.single-contents .free_check{
    padding:1.3em 0 1.3em 3em;
}
.single-contents ol li{
    padding:1.3em 0 1.3em 2.3em;
}
.single-contents ul li{
    padding:1.3em 0 1.3em 2em;
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.single-contents ol li::before{
    font-size: 135%;
    top: 0.7em;
}
.single-contents ul li::before{
    width: 0.5em;
    height:0.5em;
    top: 1.8em;
}
.single-contents .free_check::before{
    width: 1.5em;
    height: 1em;
    top: 1.7em;
}
.single-contents .free_check{
    padding:1.3em 0 1.3em 2em;
}
.single-contents ol li{
    padding:1.3em 0 1.3em 1.5em;
}
.single-contents ul li{
    padding:1.3em 0 1.3em 1.5em;
}
}


/*---------------------------------------------------------
    faq
---------------------------------------------------------*/
.single-contents .l-qa__q{
    font-size: min(2.2vw, 150%);
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.single-contents .l-qa__q{
    font-size: 130%;
}
}


/*---------------------------------------------------------
    flow
---------------------------------------------------------*/
.single-contents .flow__wrap{
    margin:50px 0;
}
.single-contents .flow__flex{
    display: flex;
    align-items: center;
    column-gap: 3em;
    min-height: 280px;
    position: relative;
}
.single-contents .flow__left{
    padding-left:10%;
    width: 50%;
	flex-grow: 1;
}
.single-contents .flow__left::after{
    content:"";
    display: block;
    width:1px;
    height:100%;
    background-color: #3871b5;
    position: absolute;
    left: 3%;
    top: 0;
    z-index: -1;
}
.single-contents .flow__num{
    position: absolute;
    left:0;
    top: 0;
    background-color: #fff;
    padding: .5em 0;
}
.single-contents .flow__num-step{
    font-size: 80%;
    color:#3871b5;
}
.single-contents .flow__num-num{
    font-size: 170%;
    color:#3871b5;
}
.single-contents .flow__ttl{
    font-size: min(2.8vw, 156%);
    font-weight: var(--fw-bold);
}
.single-contents .flow__img{
    width: 50%;
    max-width: 320px;
}
.single-contents .flow{
    counter-reset: step;
}
.single-contents .flow__num-num::before{
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    display: block;
    margin-top: .1em;
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.single-contents .flow__wrap{
    margin:8% 0;
}
.single-contents .flow__flex{
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
    margin-bottom: 8%;
}
.single-contents .flow__left{
    padding-left:16%;
    width: 100%;
}
.single-contents .flow__left::after{
    left: 4%;
}
.single-contents .flow__num-step{
    font-size: 90%;
}
.single-contents .flow__num-num{
    font-size: 170%;
}
.single-contents .flow__ttl{
    font-size: 120%;
    margin-bottom: 3%;
}
.single-contents .flow__img{
    padding-left:16%;
    width: 100%;
    max-width: none;
}
.single-contents .flow__num{
    padding-top: 0;
}
}


/*---------------------------------------------------------
    関連記事
---------------------------------------------------------*/
.single_page .relation{
    border-left: 1px solid var(--accent-color);
    padding:2em 0 2em 4em;
}
.single_page .relation .relation__ttl{
    font-size: min(2.8vw, 150%);
    font-weight: var(--fw-bold);
    margin-bottom: 20px;
}
.single_page .relation .relation__list-wrap{
    display: flex;
    flex-wrap: wrap;
    row-gap:1em;
}
.single_page .relation .relation__list-item{
    padding: 0 4%;
    border-left:1px solid #000;
    line-height: 1;
}
.single_page .relation .relation__list-item:first-of-type{
    padding-left: 0;
    border:none;
}
.single_page .relation .relation__list-item:last-of-type{
    padding-right: 0;
}
.single_page .relation .relation__list-item a{
    font-size: 112%;
    font-weight: var(--fw-bold);
    text-decoration: underline;
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.single_page .relation{
    padding:1.5em 0 1.5em 1.5em;
}
.single_page .relation .relation__ttl{
    font-size: 120%;
    margin-bottom: 4%;
}
.single_page .relation .relation__list-item{
    padding: 0 4%;
}
.single_page .relation .relation__list-item a{
    font-size: 90%;
}
}


/*---------------------------------------------------------
    よくある質問ページ
---------------------------------------------------------*/
.page-faq .l-qa__q {
    font-size: min(2.2vw, 150%);
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.page-faq .l-qa__q {
    font-size: 130%;
}
}