@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p');

.gNav .gNav_menu li a.column::after{ position: relative; display: block; left: 0; content: ''; width: 100%; height: 7px; background: #3F815D ; bottom: -24px; transition: .3s; }
@media screen and (max-width:800px){
    .gNav .gNav_menu li a.column{color: #3F815D;}
    .gNav .gNav_menu li a.column::after{ display: none;}
    
    /* ドロップメニュー下線 */
    .drop_menu_list li a.column01{ text-decoration: underline;}
    .drop_menu_list li a.column02{ text-decoration: none;}
    
}

.column_nocursor{ pointer-events: none; color: #808080;}
.container{ max-width: 1199px; margin: 0 3.125%;}
.big_arrow{ width: 8%; margin: 45px auto;}

#mv_column {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    top: 5px;
}



#merit_demerit { max-width: 1199px; margin: 0 3.125%;  background-image: url(../image/column/bg_column.webp); background-repeat: no-repeat; background-size: cover;}
#merit_demerit .merit_demerit_container{ max-width: 1080px; margin: 0 auto; padding: 5% 0px 50px;}
#merit_demerit .merit_demerit_container .merit_demerit_title{ margin: 0 20px 20px; text-align: center;}
#merit_demerit .merit_demerit_container .merit_demerit_title h2 { width: 100%; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; color: #3F815D; font-size: clamp(20px, 4.25vw, 33px); font-weight: bold; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; letter-spacing: 4px; font-feature-settings: "palt";}
#merit_demerit .merit_demerit_container .merit_demerit_title h2 span { width: 175px; margin-right: 2%; padding: 10px 5px; display: inline-block; color: #fff; font-size: 22px; font-weight: 400; font-family: 'M PLUS 1p', 'Noto Sans JP', sans-serif; letter-spacing: 2px; border-radius: 5px; background-color: #3F815D;}
#merit_demerit .merit_demerit_container .merit_demerit_title p{ font-weight: 500; font-size: 19px; text-align: center;  letter-spacing: 1.25px;}


#housing-expense { margin-bottom: 100px; padding: 0 4%; font-family: 'Noto Sans JP', sans-serif; font-weight: 300;}
#housing-expense h2{ margin: 30px 20px; color: #3F815D; font-size: 28px; font-weight: 400; text-align: center; letter-spacing: 1.5px;}
#housing-expense em{ max-width: 1080px; display: block; margin: 0 auto; padding: 5px 0; background-color: #3F815D; color: #fff; font-size: 25px; font-style: normal; text-align: center; letter-spacing: 1.5px;}
#housing-expense .housing-expense_container{ max-width: 920px; margin: 20px auto;}
#housing-expense .housing-expense_container .case01{ margin-bottom: 50px;}
#housing-expense .housing-expense_container .case01 .case01_title{ width: 100%; margin-bottom: 10px; padding-left: 2%; display: inline-block; color: #3F815D; font-size: 25px; text-align: center;}
#housing-expense .housing-expense_container .case01 .case01_txt{ display: block; margin-bottom: 30px; text-align: center; font-size: 19px; font-weight: 500;}
#housing-expense .housing-expense_container .case01 .case01_flex{ padding: 0 20px 10px; display: flex; justify-content: space-between; border-bottom: 1px solid #3E815C;}
#housing-expense .housing-expense_container .case01 .case01_flex p{ font-size: 30px; font-weight: 600;}
#housing-expense .housing-expense_container .case01 .case01_flex .case01_flex_txt01{ color: #EF8B1E;}
#housing-expense .housing-expense_container .case01 .case01_flex .case01_flex_txt01 span{ margin-right: 20px; padding: 5px 10px; color: #fff; background-color: #EF8B1E;}
#housing-expense .housing-expense_container .case01 .case01_flex .case01_flex_txt03{ color: #4889C6;}
#housing-expense .housing-expense_container .case01 .case01_flex .case01_flex_txt03 span{ margin-right: 20px; padding: 5px 10px; color: #fff; background-color: #4889C6;}
#housing-expense .housing-expense_container .case01 .case01_caption { margin-bottom: 50px; font-size: 15px; font-weight: 500; margin-top: 10px; padding-left: 1.5%;}

#housing-expense .housing-expense_container .case02{ margin-bottom: 50px; font-size: 16px; font-weight: 400; font-feature-settings: "palt";}
#housing-expense .housing-expense_container .case02 .case02_txt{ font-size: 19px;}
#housing-expense .housing-expense_container .case02 .case02_txt_sub { margin-bottom: 10px; font-size: 14px;}
#housing-expense .housing-expense_container .case02 .case02_title{ width: 100%; margin-bottom: 30px; padding-left: 4%; display: inline-block; color: #3F815D; font-size: 25px; text-align: center;}
#housing-expense .housing-expense_container .case02 .case02_table{ width: 100%; display: flex; justify-content: space-between;}
#housing-expense .housing-expense_container .case02 .case02_table .case02_table01{ width: 49.130%;}
#housing-expense .housing-expense_container .case02 .case02_table .case02_table01 tbody{ display: block; position: relative;}
#housing-expense .housing-expense_container .case02 .case02_table thead .case02_th01{ background-color: #EF8B1E; color: #fff; font-size: 20px;}
#housing-expense .housing-expense_container .case02 .case02_table .case02_table01 tbody .td_name{ width: 24.744%; padding: 5px; vertical-align: top; border-right: 1px dotted #ABABAB;}
#housing-expense .housing-expense_container .case02 .case02_table .case02_table01 tbody .td_item{ width: 73.255%; padding: 5px 0 5px 5px; vertical-align: top; font-feature-settings: "palt";}
#housing-expense .housing-expense_container .case02 .case02_table .case02_table01 tbody .td_item ul li span{ font-size: 13px;}
#housing-expense .housing-expense_container .case02 .case02_table .case02_table01 tbody .tr_line{ width: 100%; position: relative; display: flex; border-bottom: 1px solid #ABABAB;}
#housing-expense .housing-expense_container .case02 .case02_table .case02_table02{ width: 49.130%; }
#housing-expense .housing-expense_container .case02 .case02_table thead .case02_th02{ background-color: #4889C6; color: #fff; font-size: 20px;}
#housing-expense .housing-expense_container .case02 .case02_table tbody .case02_td02 { padding: 10px; vertical-align: top; text-align: left; line-height: 1.8;}
#housing-expense .housing-expense_container figure.case02_img { max-width: 750px; margin: 0 auto;}


#qa .qa_container{ max-width: 1080px; margin: 0 auto;}
#qa .qa_container .qa_title{ width: 100%; height: 180px; display: block; background-image: url(../image/column/q&a.webp); background-repeat: no-repeat;}
#qa .qa_container .qa_title .rgb {background-color: rgb(255, 255, 255, 0.3); }
#qa .qa_container .qa_title p{ display: block; height: 180px; margin: auto 0; padding: 67px 0; text-align: right; font-size: 29px; font-weight: 900; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;}
#qa .qa_container .qa01 { display: block; margin-top: 35px; padding-bottom: 40px; position: relative;}
#qa .qa_container .qa01::after { content: ''; display: block; width: 100%; position: relative; top: 20px; z-index: 0; border: 0.5px solid #ABABAB;}
#qa .qa_container .qa01 .qa_txt{ padding-left: 2%;}
#qa .qa_container .qa01 .qa_txt .question{ display: flex; align-items: center; color: #3F815D; font-size: 27px; font-weight: bold; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;}
#qa .qa_container .qa01 .qa_txt .question span{ margin-right: 20px; padding-top: 1%;}
#qa .qa_container .qa01 .qa_txt .answer{ display: flex; margin-left: 1.5%; font-size: 19px; font-weight: 500;}
#qa .qa_container .qa01 .qa_txt .answer span { margin-right: 10px;}
#qa .qa_container .qa01 .qa_txt .answer .answer_small { font-size: 17px;}
#qa .qa_container .qa01 .qa01_img{ width: 20%; position: absolute; top: -30%; right: 0; z-index: 2;}

#qa .qa_container .qa02 { width: 100%; display: flex; align-items: center; justify-content: space-evenly; margin-top: 30px; padding-bottom: 40px; border-bottom: 1px solid #ABABAB;}
#qa .qa_container .qa02 .qa02_img{ width: 20%;}
#qa .qa_container .qa02 .qa_txt{ width: 70%;}
#qa .qa_container .qa02 .qa_txt .question{ width: 100%; display: flex; align-items: center; color: #3F815D; font-size: 27px; font-weight: bold; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;}
#qa .qa_container .qa02 .qa_txt .question span{ margin-right: 20px; padding-top: 1%;}
#qa .qa_container .qa02 .qa_txt .answer{ display: flex; margin-left: 1.5%; font-size: 19px; font-weight: 500; font-feature-settings: "palt";}
#qa .qa_container .qa02 .qa_txt .answer span.arrow { margin-left: 0.6%; margin-right: 10px;}
#qa .qa_container .qa02 .qa_txt .answer span.txt_space{ padding-top: 20px;}


#calculation { margin: 45px 0 100px;}
#calculation .calculation_container { max-width: 1080px; margin: 0 auto;}
#calculation .calculation_container .calculation_title{ text-align: center;}
#calculation .calculation_container .calculation_title p{ color: #3F815D; font-size: 27px; font-weight: 900; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;}
#calculation .calculation_container .calculation_box{ margin-top: 45px; display: flex; justify-content: space-around;}
#calculation .calculation_container .calculation_txt{ margin-bottom: 80px; color: #3F815D; font-size: 26px; text-align: center; line-height: 1.8;}
#calculation .calculation_container p.calculation_summary { font-size: 12px; line-height: 1.5; font-feature-settings: "palt";}


#tel .tel_container { max-width: 1080px; margin: 0 auto;}
#tel .tel_container .tel_inner{ display: flex; align-items: center; justify-content: space-between; gap: 10px;}

#pickUp { margin-top: 30px;}
#pickUp .pickUp_inner{ max-width: 1080px; margin: 0 auto;}
#pickUp .pickUp_inner p{ margin-top: 10px; padding: 0 2%; font-size: 12px; font-weight: 500;}


#another-column { margin-top: 70px; padding-bottom: 1px;}
#another-column .another-column_contents { max-width: 1080px; margin: 0 auto;}
#another-column .another-column_contents h3{width: 100%; padding-left: 16px; border-bottom: #3F815D 2px solid; color: #3F815D; border-left: #3F815D 15px solid; font-size: 1.8rem; font-weight: normal; }
#another-column .another-column_contents h3 span{ padding: 0 35px 0 0; font-size: 2.2rem; font-family: "garamond-premier-pro-display", serif; font-weight: 300; font-style: normal; color: #3F815D;}
#another-column .another-column_contents .another-column_inner ul{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 20px 0; grid-row-gap: 30px}
#another-column .another-column_contents .another-column_inner ul li{ flex-basis: calc((100% - 25px) / 3);}



@media screen and (max-width:1300px){
    #merit_demerit .merit_demerit_container{ padding: 3% 40px 50px;}
}


@media screen and (max-width:1200px){
    #qa .qa_container,
    #calculation .calculation_container,
    #tel .tel_container,
    #pickUp .pickUp_inner,
    #another-column .another-column_contents{ padding: 0 4%;}
    #qa .qa_container .qa01 .qa01_img{ top: -70%;}
}



@media screen and (max-width:955px){
    #merit_demerit .merit_demerit_container .merit_demerit_title h2 { font-size: 3.98vw; flex-direction: column;}
    #merit_demerit .merit_demerit_container .merit_demerit_title h2 span { width: 100%; margin-right: 0; margin-bottom: 10px; padding: 5px 0;}
    #merit_demerit .merit_demerit_container .merit_demerit_title p{ font-size: 1.99vw;}

    
    #qa .qa_container .qa01 .qa01_img { width: 17vw; top: -80px; right: 0;}
}


@media screen and (max-width:800px){

    #merit_demerit .merit_demerit_container .merit_demerit_title img { width: 100%;}
    #merit_demerit .merit_demerit_container .merit_demerit_title p { text-align: start;}

    #housing-expense em { width: 100%;}
    #housing-expense .housing-expense_container .case02 .case02_table { flex-direction: column;}
    #housing-expense .housing-expense_container .case02 .case02_table .case02_table01 { width: 100%;}
    #housing-expense .housing-expense_container .case02 .case02_table .case02_table02 { width: 100%;}
    #housing-expense .housing-expense_container .case01 .case01_txt, #housing-expense .housing-expense_container .case02 .case02_txt { font-size: 3vw;}
    #housing-expense .housing-expense_container .case02 .case02_txt_sub{ font-size: min(14px, 2.5vw);}
    
    #qa .qa_container .qa_title p { width: 100%; right: unset; text-align: center;}
    #qa .qa_container .qa01 { height: 125px;}
    #qa .qa_container .qa01 .qa_txt { padding-top: 10%; padding-left: 0;}
    #qa .qa_container .qa01 .qa_txt .question { font-size: 20px;}
    #qa .qa_container .qa01 .qa_txt .answer { font-size: 17px;}
    #qa .qa_container .qa01 .qa01_img { width: 17vw; top: -60px; right: 40%;}
    #qa .qa_container .qa02 { flex-direction: column; margin-top: 120px; padding-top: 20px;}
    #qa .qa_container .qa02 .qa_txt { width: 100%;}
    #qa .qa_container .qa02 .qa_txt .question { font-size: 20px;}
    #qa .qa_container .qa02 .qa_txt .question span { margin-right: 10px;}
    #qa .qa_container .qa02 .qa_txt .answer { font-size: 17px;}

    #calculation .calculation_container .big_arrow { margin: 20px auto;}
    #calculation .calculation_container .calculation_txt { font-size: 18px;}

    #tel .tel_container .tel_inner { flex-direction: column;}
}


@media screen and (max-width:520px){
    
    #merit_demerit .merit_demerit_container { padding: 20px;}
    #merit_demerit .merit_demerit_container .merit_demerit_title { margin: 0 20px;}
    #merit_demerit .merit_demerit_container .merit_demerit_title h2 { font-size: 4.5vw; letter-spacing: 1.5px;}
    #merit_demerit .merit_demerit_container .merit_demerit_title h2 span { width: 100%; margin-right: 0; margin-bottom: 10px; padding: 5px 0; font-size: 3.23vw;}
    #merit_demerit .merit_demerit_container .merit_demerit_title p { font-size: 3.08vw;}
    #merit_demerit .merit_demerit_container picture { margin-top: 20px; display: block;}
    
    #housing-expense { margin-bottom: 50px;}
    #housing-expense h2 { font-size: 3.85vw; margin: 30px 0 10px; }
    #housing-expense em { font-size: 3.46vw; }
    #housing-expense .housing-expense_container .case01 .case01_title { padding-left: 0; font-size: 3.46vw; }
    #housing-expense .housing-expense_container .case01 .case01_flex { flex-direction: column; justify-content: auto; text-align: center; }
    #housing-expense .housing-expense_container .case01 .case01_flex p { font-size: 4.81vw;}
    #housing-expense .housing-expense_container .case01 .case01_caption { text-align: center; font-size: 2.69vw; }
    #housing-expense .housing-expense_container .case02,
    #housing-expense .housing-expense_container .case02 .case02_table .case02_table01 tbody .td_item ul li span { font-size: 2.88vw;}
    #housing-expense .housing-expense_container .case02 .case02_title { margin-bottom: 20px; font-size: 3.46vw;}

    #qa .qa_container .qa_title { background-size: contain; background-position: center;}
    #qa .qa_container .qa_title p { font-size: 4.81vw;}
    #qa .qa_container .qa01 { height: 180px; margin-top: 11%;}
    #qa .qa_container .qa02 { margin-top: 60px;}

    #calculation { margin: 45px 0 60px;}
    #calculation .calculation_container .calculation_box { flex-direction: column;}
    #calculation .calculation_container .calculation_box li:first-child { margin-bottom: 30px;}
    #calculation .calculation_container .big_arrow { width: 15%;}

    #another-column .another-column_contents .another-column_inner ul { grid-row-gap: 10px;}
    #another-column .another-column_contents .another-column_inner ul li { flex-basis: calc((100% - 15px) / 2);}
}


@media screen and (max-width:375px){
    #qa .qa_container .qa01 { margin-top: 20px;}
    #qa .qa_container .qa02 { margin-top: 90px;}

}