@charset "UTF-8";
/* CSS Document */
/*******************************
	トップページ,イオン用CSS
*******************************/

/*******************************
	キービジュアル
*******************************/
.kvArea .kv {
    padding: 0 10px;
    line-height: 0;
    background-size: cover;
    background-position-x: center;
    text-align: center;
}
.kvArea .kvAdiva {
    padding: 0 10px;
    line-height: 0;
    background-size: cover;
    background-position-x: center;
    text-align: center;
}

/* メイン
------------------------------*/
.mainCont {
    padding-top: 40px;
}
.mainCont .contArea {
    border-bottom: 1px solid #eaeaea;
    background-color: #fff;
    box-shadow: 1px 2px 6px 0 rgba(0, 0, 0, 0.1);
}
.mainCont .contArea section + section {
    margin-top: 40px;
}
#basic h4 {
    color: #7cb52a;
}
.importantArea {
    background-color: #f9f8f1;
    font-size: 0.9em;
}

/* 数字
------------------------------*/
.itemList {
    counter-reset: listCount;
}
.itemList li {
    padding-left: 2em;
    line-height: 1.65;
    font-size: 1em;
}
.itemList li:before {
    counter-increment: listCount;
    content: counter(listCount) ". ";
    display: inline-block;
    width: 0;
    text-indent: -2.5em;
}
#repayment li {
    font-size: 0.9em;
}

/*******************************
	エリア
*******************************/
/* 重要エリア
------------------------------*/
.importantArea {
    margin-bottom: 20px;
    background-color: #f2f6fa;
}

/* 注釈（※）
------------------------------*/
.attention {
    margin-top: 20px;
}
.attention > li {
    padding-left: 1.5em;
    font-size: 12px;
    text-indent: -1.5em;
}
.attention > li:before {
    content: "※";
    padding-right: 0.5em;
}

/* 注釈内リスト（アイコン） */
.attention .listArea {
    margin-left: 0.8em;
    text-indent: 0;
}

/*******************************
	リスト
*******************************/
/* アイコン
------------------------------*/
.listArea li {
    padding-left: 15px;
    color: initial;
    background-image: url("/template/image/aeon/icon_list.png");
    background-repeat: no-repeat;
    background-size: 6px 6px;
    background-position: left calc((1rem - 6px) / 2);
    font-size: 1em;
}

/* ベーシックの場合 */
/* 	レベル3
------------------------------*/
h5 {
    line-height: 1;
    padding: 13px 0 13px 20px;
    margin-bottom: 30px;
    font-weight: bold;
    background-color: #fafafa;
}
/* ベーシックの場合 */
#basic h5 {
    border-left: 2px solid #7cb52a;
}

/*******************************
	テーブル
*******************************/
.auto-loan-inner table {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
}
.auto-loan-inner table tr {
    height: 30px;
}
.auto-loan-inner table th,
.auto-loan-inner table td {
    width: calc(100% / 3);
    text-align: center;
    border: 1px solid #ddd;
    vertical-align: middle;
    font-weight: normal;
}

/* 見出し */
.auto-loan-inner table thead {
    color: #fff;
}

/* 内容 */
.auto-loan-inner table tbody tr:first-child td {
    font-size: 18px;
    font-weight: bold;
}
.auto-loan-inner table thead {
    /*background-color: #276e36;*/
    background-color: #d4d8de;
    color: #424b5c;
}
.auto-loan-inner table tbody th {
    /*background-color: #f9f8f1;*/
    background: #f2f3f5;
}
.auto-loan-inner table tbody tr:first-child td {
    /*color: #7cb52a;*/
    color: brown;
}

/* --------------------------------------------------------
    ローンについて
-------------------------------------------------------- */

.merit p {
    font-size: 1.54rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.merit div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 40px;
}

.merit div ul {
    margin-bottom: 20px;
}

.merit div ul li {
    text-align: center;
    color: #2e3e67;
    font-weight: bold;
    font-size: 1.09rem;
    line-height: 1.4;
}

.merit div ul li:first-of-type {
    margin-bottom: 10px;
}

.merit div ul li span {
    display: block;
    font-size: 12px;
    background: #2e3e67;
    color: #fff;
    border-radius: 40px;
    width: 80px;
    margin: 0 auto 5px auto;
}

/* --------------------------------------------------------
    contact
-------------------------------------------------------- */
.contact {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 20px;
    font-weight: bold;
    margin-bottom: 2rem;
}

.contact ul {
    display: flex;
    flex-flow: column;
}

.contact ul a {
    color: #d75a4a;
    font-size: inherit;
    text-decoration: none;
}

.contact ul span.paid-font {
    font-size: initial;
}

.contact ul li:first-of-type {
    display: flex;
    align-items: center;
    font-size: 1.54rem !important;
    margin-right: 10px;
}

.contact ul li:first-of-type:before {
    content: "";
    background: url("/template/image/aeon/icon_freedial.svg") no-repeat left center;
    background-size: contain;
    width: 50px;
    height: 33px;
    margin-right: 10px;
    display: inline-block;
}

.contact ul li:last-of-type {
    font-size: 16px;
    color: #424b5c;
    /* vertical-align: middle; */
    display: block;
    margin-left: 60px;
    font-weight: normal;
}

.contact ul li:last-of-type span.reception {
    display: inline-block;
    border: 1px solid #424b5c;
    padding: 0 5px;
    margin-right: 5px;
    font-size: 0.8rem;
}

/**************************************************
	スマートフォン用CSS
**************************************************/
@media only screen and (max-width: 640px) {
    /*******************************
		キービジュアル
	*******************************/
    .kvArea .kv {
        height: 130px;
        padding-top: 60px;
    }
    .kvArea .kvAdiva {
        height: 220px;
        padding-top: 60px;
    }

    /* メイン
	------------------------------*/
    .mainCont {
        padding-bottom: 50px;
    }
    .mainCont .contArea {
        padding: 40px 10px 50px;
    }

    /* 	レベル2
	------------------------------*/
    h4 {
        margin-bottom: 30px;
        font-size: 20px;
    }

    /* 数字
	------------------------------*/
    .itemList {
        padding-left: calc(15px + 0.5em);
    }

    /*******************************
		エリア
	*******************************/
    /* 重要エリア
	------------------------------*/
    .importantArea {
        padding: 20px 15px;
        font-size: 13px;
    }

    /* キービジュアル画像 */

    /* ベーシックの場合 */
    #basic .kvArea {
        padding-bottom: 20px;
    }
    #basic .kvArea .kv01.loan-img-sp {
        width: 100%;
    }
    #basic .kvArea .kv01.loan-img-pc {
        display: none;
    }
    .auto-loan-inner table {
        font-size: 13px;
    }
    #repayment li {
        font-size: 1em;
    }
}

/**************************************************
	PC用CSS
**************************************************/
@media only screen and (min-width: 641px) {
    /*******************************
		キービジュアル
	*******************************/
    .kvArea .kv {
        height: 260px;
        padding-top: 120px;
    }
    .kvArea .kvAdiva {
        height: 338px;
        padding-top: 0px;
    }
    /* キービジュアル画像 */

    /* ベーシックの場合 */
    #basic .kvArea {
        padding-bottom: 20px;
    }
    #basic .kvArea .kv01.loan-img-pc {
        width: 100%;
    }
    #basic .kvArea .kv01.loan-img-sp {
        display: none;
    }
    /* キービジュアルテキスト */
    .kvArea .kv img {
        max-width: 100%;
    }

    /* メイン
	------------------------------*/
    .mainCont {
        padding-bottom: 80px;
    }
    .mainCont .contArea {
        padding: 40px 40px 60px 40px;
    }

    /* 	レベル2
	------------------------------*/
    h4 {
        margin-bottom: 40px;
        font-size: 24px;
    }

    /* 数字
	------------------------------*/
    .itemList {
        padding-left: calc(40px + 0.5em);
    }

    /*******************************
		エリア
	*******************************/
    /* 重要エリア
	------------------------------*/
    .importantArea {
        padding: 15px 40px;
    }

    .pcHidden {
        display: none !important;
    }

    /*Contact Media Queries******************************************/
    .contact ul {
        flex-flow: row;
        align-items: center;
    }
    .contact ul li:last-of-type {
        display: inline;
    }

    .contact ul li:last-of-type {
        margin-left: 0;
    }
}