@charset 'UTF-8';
/*-------------------------------------------------------

base

-------------------------------------------------------*/
html
{
font-size: 62.5%;
}

body
{
font-family: Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
font-size: 1.6rem;
line-height: 1.6666;

word-break: break-all;

color: #1f1f1f;
background: #fff;
}

@media screen and (max-width: 767px)
{
body
{
font-size: 16px;
font-size: 1.6rem;
line-height: 1.4375;

width: 100%;
}
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main,
time,
mark,
audio,
video
{
margin: 0;
padding: 0;
border: 0;
}

article,
aside,
dialog,
figure,
figcaption,
footer,
header,
hgroup,
nav,
section,
main
{
display: block;
}

ul,
ol
{
padding: 0;

list-style: none;
}

a
{
color: #1f1f1f;
}

a:hover,
a:active,
a:focus
{
text-decoration: none;

opacity: .7;
}

*
{
box-sizing: border-box;
}

main p {
margin-top: 1rem;
}

img
{
display: block;

max-width: 100%;
}

em
{
font-weight: bold;
font-style: normal;
color: #ae027e;
}

em span {
text-decoration-color: #fff27f;
text-decoration-line: underline;
text-decoration-thickness: 10px;
text-underline-offset: -2px;
}

@media screen and (max-width: 767px)
{
em span
{
text-decoration-thickness: 8px;
text-underline-offset: -4px;
}
}

sup
{
font-size: 1.2rem;
}

.mt10
{
margin-top: 10px !important;
}

.mb15
{
margin-bottom: 15px !important;
}

.mt20
{
margin-top: 20px !important;
}

.ml20
{
margin-left: 20px !important;
}

.mr20
{
margin-right: 20px !important;
}

.mb20
{
margin-bottom: 20px !important;
}

.pr20
{
padding-right: 20px !important;
}

.pb20
{
padding-bottom: 20px !important;
}

.mt30 {
margin-top: 30px !important;
}

.mb30 {
margin-bottom: 30px !important;
}

.mt40 {
margin-top: 40px;
}

.mb40 {
margin-bottom: 40px;
}

.mt50 {
margin-top: 50px;
}

.mb50 {
margin-bottom: 50px;
}

.fs20 {
font-size: 20px !important;
}

.fc01 {
color: #686868;
}

.ac
{
text-align: center !important;
}

.al
{
text-align: left !important;
}

.ar
{
text-align: right !important;
}

.w720 {
width: 720px !important;
}

.pc-db
{
display: block;
}

@media screen and (max-width: 767px)
{
.pc-db
{
display: none !important;
}
}

.sp-db
{
display: none;
}

@media screen and (max-width: 767px)
{
.sp-db
{
display: block;
}
}

/*-------------------------------------------------------

header

-------------------------------------------------------*/
#header .header-inner
{
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px 0;
}

@media screen and (max-width: 767px)
{
#header .header-inner
{
width: 100%;
margin: 0;
padding: 20px 10px;
}
#header .header-inner img
{
width: 40%;
}
}

/*-------------------------------------------------------

footer

-------------------------------------------------------*/
#footer
{
border-top: 1px solid #d8d8d8;
}

#footer .footer-inner
{
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px 0;
}

@media screen and (max-width: 767px)
{
#footer .footer-inner
{
width: 100%;
padding-right: 10px;
}
}

#footer .copyright
{
font-size: 12px;

text-align: right;

color: #666;
}

/*-------------------------------------------------------

mainvisual

-------------------------------------------------------*/
h1 {
width: 100%;
max-width: 1000px;
}
/*-------------------------------------------------------

main

-------------------------------------------------------*/

main {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding-bottom: 100px;
}

@media screen and (max-width: 1000px)
{
main
{
padding-bottom: 160px;
width: auto;
margin: 0 5%;
}
}

section {
text-align: center;
}

section:nth-child(n+2) {
margin-top: 60px;
}

@media screen and (max-width: 767px)
{
section:nth-child(n+2) {
margin-top: 40px;
}
}

h2 {
font-size: 26px;
font-weight: bold;
}
@media screen and (max-width: 767px)
{
h2 {
font-size: 24px;
}
}
h3 {
font-size: 20px;
font-weight: bold;
border-radius: 40px;
background-color: #d82b90;
color: #fff;
margin: 0 auto;
padding: 10px 5px 7px;
width: 17rem;
}
@media screen and (max-width: 767px)
{
h3{
font-size: 18px;
padding: 11px 5px 7px;
width: 15rem;
}
}
h4 {
font-weight: bold;
font-size: 18px;
margin-bottom: 12px;
}
@media screen and (max-width: 767px)
{
h4 {
font-size: 16px;
}
}

.bl-text {
font-size: 22px !important;
margin-top: 0;
}

.pk-text {
font-size: 26px !important;
}

ruby rt {
font-size: 20px;
}

@media screen and (max-width: 767px)
{
.bl-text {
font-size: 16.5px !important;
}
.pk-text {
font-size: 20px !important;
}
ruby rt {
font-size: 16px;
}
.sp-text {
text-align: left;
padding-top: 20px;
}
.fs24 {
    font-size: 24px;
}
}

.bg-pk {
background-color: #faebf5;
margin-top: -360px;
padding: 410px 0 30px;
width: 100vw;

margin-left: calc(-50vw + 50%);
}
@media screen and (max-width: 767px)
{
.bg-pk {
margin-top: -230px;
padding: 280px 0 15px;
width: 100vw;
}
}

#movie {
border-radius: 24px;
box-shadow: 0 8px 36px rgba(50, 50, 50, .08);
background-color: #fff;
width: 100%;
max-width: 680px;
text-align: center;
padding: 40px 110px 35px;
margin: 60px auto 0;
position: relative;
z-index: 3;
}
@media screen and (max-width: 767px)
{
#movie {
border-radius: 12px;
box-shadow: 0 4px 13px rgba(50, 50, 50, .08);
padding: 21px 35px 17px;
margin: 30px auto 0;
}
}
.youtube {
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


.lay-image-col1 {
margin: 0 auto;
max-width: 720px;
}

.btn-text {
display: inline-block;
font-size: 22px;
font-weight: bold;
background: url(/shared/images/modules/bg/text_bg_01.png) no-repeat left 0;
}
.btn-text > span {
display: block;
padding: 1px 30px 7px;
background: url(/shared/images/modules/bg/text_bg_02.png) no-repeat right 0;
}
@media screen and (max-width: 767px)
{
.btn-text {
background-size: 15px;
font-size: 18px;
}
.btn-text > span {
background-size: 15px;
padding: 0px 22px 7px;
}
}
/*-------------------------------------------------------

link

-------------------------------------------------------*/

/*-------------------------------------------------------

btn

-------------------------------------------------------*/
.site-flow-btn {
width: 100%;
max-width: 500px;
text-align: center;
display: inline-block;
position: relative;
padding: 2rem 3.8rem 2.1rem;
border: 2px solid #d82b90;
border-radius: 12px;
background-color: #d82b90;
color: #fff;
box-shadow: none;
margin-bottom: 0;
margin-top: 20px;
font-weight: bold;
}
.site-flow-btn::after {
position: absolute;
top: 50%;
right: 21px;
width: 8px;
height: 16px;
margin-top: -7px;
background: url(/app-files/img/arrow_03.svg) no-repeat left top / 100%;
content: "";
}
.site-flow-btn:hover {
top: 0px;
box-shadow: none;
color: #fff;
background-color: #ad2273;
border-color: #ad2273;
}
.site-flow-btn-sp {
border: 2px solid #d82b90;
border-radius: 12px;
background-color: #d82b90;
color: #fff;
box-shadow: none;
margin-top: 10px;
font-weight: bold;
text-decoration: none;
position: relative;
width: 100%;
padding: 1.2rem 5rem 1rem;
display: inline-block;
}
.site-flow-btn-sp::after {
position: absolute;
top: 50%;
right: 21px;
width: 8px;
height: 16px;
margin-top: -7px;
background: url(/app-files/img/arrow_03.svg) no-repeat left top / 100%;
content: "";
}

/*-------------------------------------------------------

box

-------------------------------------------------------*/
@media screen and (max-width: 767px) {
.web {
margin: 0 5%;
}
}
.box-01 {
border-radius: 20px;
background-color: #fff;
width: 100%;
max-width: 680px;
margin: 0 auto;
padding: 20px 54px 22px;
}
@media screen and (max-width: 767px)
{
.box-01
{
padding: 20px 0px 22px;
margin-bottom: 16px;
}
}
.box-01 + .box-01 {
margin-bottom: 26px;
}
.box-01 ul {
text-align: left;
padding: 20px 35px 0px;
}
/*-------------------------------------------------------

layout

-------------------------------------------------------*/
.layout .list-contents {
width: 100%;
max-width: 890px;
margin: 0 auto;
}
main .layout li {
background-color: #fff;
margin-bottom: 28px;
border-radius: 20px;
}
.layout .list-contents li {
width: 100%;
padding: 42px 44px 46px;
}
@media screen and (max-width: 767px)
{
.layout .list-contents li {
padding: 32px 9% 35px;
}
main .layout li {
margin-bottom: 20px;
}
}
.layout .list-contents li img {
margin: 0 auto;
width: 100%;
max-width: 330px;
}
.layout .list-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 30px;
}
.layout .list-content li {
width: 100%;
max-width: 430px;
padding: 44px;
}
@media screen and (max-width: 1000px) {
.layout {
margin: 0 5%;
}
.layout .list-content li {
padding: 30px 9%;
}
}
/*-------------------------------------------------------

list

-------------------------------------------------------*/
[class^='list-']
{
margin-bottom: 15px;
}

@media screen and (max-width: 767px)
{
[class^='list-']
{
margin-bottom: 8px;
}
.bg-pk > li
{
margin-bottom: 10px;
}
}

[class^='list-'] > li
{
margin-bottom: 10px;
}

.list-bullet > li
{
position: relative;
padding-left: 1em;
}

.list-bullet > li::before
{
position: absolute;
top: 5px;
left: -5px;
display: block;
width: 12px;
height: 12px;
content: '';
border-radius: 50%;
background: #ababab;
}

.list-bullet > li:last-child
{
margin-bottom: 0;
}

.list-bullet.pd {
padding: 24px 56px 6px;
}

.content .list-bullet li {
    text-align: left;
}

@media screen and (max-width: 767px) {
.list-bullet.fwn li b {
font-weight: normal;
}
}
/*-------------------------------------------------------

tab-wrap

-------------------------------------------------------*/
.tab-wrap {
display: flex;
flex-wrap: wrap;
margin: 60px 0;
}
.tab-label {
background: #f2f2f2;
font-weight: bold;
white-space: nowrap;
text-align: center;
padding: 54px .5em 2px;
order: -1;
position: relative;
z-index: 1;
cursor: pointer;
flex: 1;
border: 1px solid #ccc;
}
.tab-label:not(:last-of-type) {
margin-right: 12px;
}
.tab-label img {
position: absolute;
top: 1px;
left: calc((100% - 60px) / 2);
width: 60px;
}
.tab-content {
width: 100%;
height: 0;
overflow: hidden;
opacity: 0;
text-align: left;

}
.tab-switch:checked+.tab-label+.tab-content {
height: auto;
overflow: auto;
padding: 15px;
opacity: 1;
transition: .5s opacity;
border: 1px solid #ccc;
margin-top: -1px;
z-index: 2;
background: #fff;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
background: #fff;
border-top: 4px solid #d82b90;
border-bottom: none;
z-index: 3;
padding: 50px .5em 10px;
color: #ae027e;
}
.tab-switch:checked+.tab-label img {
top: -3px;
}
/* ラジオボタン非表示 */
.tab-switch {
display: none;
}
/*-------------------------------------------------------

popupBanner

-------------------------------------------------------*/
#popupBanner_v2 {
z-index: 100;
position: fixed;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
overflow: hidden;
display: none;
background: #fff;
}
#popupBanner_v2 #popupBanner-inner {
position: relative;
margin: 0 auto;
padding-bottom: 20px;
}
#popupBanner_v2 .site-flow-btn {
margin-bottom: 0;
}
@media screen and (max-width: 767px)
{
#popupBanner_v2 #popupBanner-inner {
margin: 0 5%;
}
}
/*-------------------------------------------------------

toggle

-------------------------------------------------------*/
.toggle-att-list-v2 {
padding: 0;
}
.hdg-lv02-tgl-v2 {
padding: 18px 16px;
position: relative;
zoom: 1;
background: url(/app-files/img/accordion_01.svg) no-repeat center right 10px;
border: 2px solid #e5e5e5;
border-radius: 10px;
margin-bottom: 15px;
}
.hdg-lv02-tgl-v2 > span {
position: relative;
padding: 3px 40px 0 55px;
font-size: 1.6rem;
display: block;
}
.hdg-lv02-tgl-v2 > span::before {
content: ' ';
display: inline-block;
background-size: contain;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 4%;
transform: translateY(-50%);
}
.hdg-lv02-tgl-v2 > span.hdg-lv02-01::before {
background-image: url(/img/index_img_01_03.png);
}
.hdg-lv02-tgl-v2 > span.hdg-lv02-02::before {
background-image: url(/campaign/housing_loan/251020/movie/images/index_img_02_02.png);
}
.hdg-lv02-tgl-v2 > span.hdg-lv02-03::before {
background-image: url(/campaign/housing_loan/251020/movie/images/index_img_02_03.png);
}
.hdg-lv02-tgl-v2 > span.hdg-lv02-04::before {
background-image: url(/campaign/housing_loan/251020/movie/images/index_img_02_04.png);
}
.hdg-lv02-tgl-v2 > span.hdg-lv02-05::before {
background-image: url(/img/index_img_01_07.png);
}
.hdg-lv02-tgl-v2 > span.hdg-lv02-06::before {
background-image: url(/campaign/housing_loan/251020/movie/images/index_img_02_05.png);
}
.hdg-lv02-tgl-v2 > span.hdg-lv02-07::before {
background-image: url(/campaign/housing_loan/251020/movie/images/index_img_02_06.png);
}
.hdg-lv02-tgl-v2 > span.hdg-lv02-08::before {
background-image: url(/img/index_img_01_14.png);
}
.js-toggle-02-v2 {
list-style: none;
}
.js-toggle-02-v2 > .content {
display: none;
}
.js-toggle-02-v2.open .hdg-lv02-tgl-v2 {
background: url(/app-files/img/accordion_02.svg) no-repeat center right 10px;
}
.js-toggle-02-v2.open > .content {
position: relative;
display: block;
padding: 10px 22px 24px;
animation: fadeIn 0.3s ease-in-out forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*-------------------------------------------------------

pagetop

------------------------------------------------------n-*/
#pagetop {
    width: auto;
    position: fixed;
    font-size: 80%;
    line-height: 1;
    font-weight: bold;
    z-index: 200;
    color: #999;
    display: none;
    bottom: 100px;
    right: 20px;
}
#pagetop a {
    background: url(/shared/images/modules/icon/pagetop.png) no-repeat center 10px #ffffff;
    text-decoration: none;
    width: 70px;
    padding: 35px 10px 10px 10px;
    text-align: center;
    display: block;
    border: 1px solid #cbcbcb;
    border-radius: 8px;
    color: #999;
    position: relative;
    behavior: url(/shared/js/PIE.htc);
}
#pagetop a:hover {
    text-decoration: none;
    background: url(/shared/images/modules/icon/pagetop_o.png) no-repeat center 10px #ffffff;
    color: #999;
}