@charset "utf-8";
/* CSS Document */

/* MV
=================================================================== */
#mv { clear: both; position: relative; height: 850px; margin-bottom:80px; text-align: center; background: url("../images/mv.jpg") no-repeat center top; background-size: cover;}
#mv .mv-txt { position: absolute; margin: 0; bottom:-50px; left:12%;}
#mv .mv-line { position: absolute; bottom:8%; right:25%; }

@media screen and (max-width:959px){
    #mv { clear: both; height: 450px; margin-bottom:50px; text-align: center; background: url("../images/mv.jpg") no-repeat center top; background-size: cover;}
    #mv .mv-txt { height:465px; bottom:-15px; left:10%; }
    #mv .mv-line { width: 200px; bottom:5%; right:15%;}
}

@media screen and (max-width:640px){
    #mv { clear: both; height:300px; margin-bottom:50px; text-align: center; background: url("../images/mv.jpg") no-repeat center top; background-size: cover;}
    #mv .mv-txt { height:310px; bottom:-10px;left:4%; }
    #mv .mv-line { width: 160px; bottom:5%; right:5%;}
}

.home #main section { width:100%; margin: 0 auto 80px;}

@media screen and (max-width:959px){
    .home #main section { margin: 0 auto 40px;}
}

/*--------------------------------------------------------------
 3つの安心
--------------------------------------------------------------*/
#top-about { background: #fff; border-radius:20px; padding:90px 8%;}
#top-about .s-tit { width: 45%; text-align: left;}
#top-about .s-tit p { display: inline-block; color: #FFF; font-size:27px; font-weight: bold; margin: 0; padding:8px 50px 8px 10px; background: #005FAA; }
#top-about .s-tit strong { font-size: 115%;}
#top-about .s-tit h3 { width: 100%; margin: 0; padding:0; color: #005FAA; font-size: 71px; font-weight: bold; text-align: left; position: relative; display: inline-block;}
#top-about .s-tit h3 strong { font-size: 131%;}
#top-about .s-tit h3:after{ content: ''; position: absolute; top: 50%; right:0; display: inline-block; width:calc(100% - 6em); height:5px; background-color:#005FAA;}

#top-about ul { width: 50%;}
#top-about li { position: relative; display: block; list-style: none; text-align: left; margin-bottom: 30px; padding: 0 0 0 70px;}
#top-about li:before { position: absolute; left: 10px; font-family: "Font Awesome 6 Free"; content: "\f00c"; font-size: 50px; font-weight: 900; color:#FFD900;}
#top-about li h4{ clear: both; padding: 1px; margin: 0 auto 0.15em auto; font-size: 27px; font-weight: bold; }
#top-about li h4 strong{ display: inline-block; font-size: 27px; font-weight: bold; background: linear-gradient(transparent 50%, #FFE600 50%);}
#top-about li p { }

@media only screen and (max-width:1200px) {
    #top-about .s-tit { width: 100%; margin-bottom: 20px; } 
    #top-about ul { width: 100%;}
}

@media only screen and (max-width:959px) {
    #top-about { padding:40px 5%;}
    #top-about .s-tit p { font-size:19px; }
    #top-about .s-tit h3 { font-size:41px;}
    #top-about li { margin-bottom: 20px; padding: 0 0 0 40px;}
    #top-about li:before { font-size: 25px; }
    #top-about li h4 { font-size: 21px; }
    #top-about li h4 strong{ font-size: 21px; }
}

/*--------------------------------------------------------------
 保険
--------------------------------------------------------------*/
#top-hoken {margin: 0 auto;}
#top-hoken h3{ position: relative; display: inline-block; margin-bottom: 1.5em; font-size: 41px; font-weight: bold;}
#top-hoken h3:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width:420px; height:5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #5798CB;}
#top-hoken .item { width: 31%; margin: 0 1.15%; background: #0081E8; color: #fff; border-radius:20px; padding:40px;}
#top-hoken .item h4 { width: 100%; font-size: 33px; font-weight: bold; position: relative; padding:0; margin-bottom: 1.5em; }
#top-hoken .item h4:after{ content: ''; position: absolute; bottom: -17px; left:0; right:0; width:50px; margin: 0 auto; border-bottom: 8px dotted #FFD900; text-align: center;}
#top-hoken .item img { margin-bottom:20px;}
#top-hoken .item p { margin-bottom:30px; text-align: left; font-weight: bold;}
#top-hoken .item .btn-w {float: right;}

@media only screen and (max-width:959px) {
    #top-hoken h3{ font-size: 22px; margin-bottom: 50px;}
    #top-hoken h3:before { width:210px;}
    #top-hoken .item { width:100%; margin-bottom: 20px;}
    #top-hoken .item h4 {font-size: 21px; }
}

#top-hoken2 { margin: 0 auto; padding:90px 8%; background: #fff; border-radius:25px;}
#top-hoken2 section {}
#top-hoken2 .box { position: relative; width: 47%; padding:60px 40px 40px 40px; background: #F2F2F2; border-radius:10px;}
#top-hoken2 .box .cat { position: absolute; top: 0; left: 0; padding: 5px 40px; font-size: 17px; font-weight: bold; color: #fff; background: #005FAA; border-radius:10px 0 10px 0;}
#top-hoken2 .box h3 { margin-bottom: 1em; font-size: 31px; font-weight: bold; border-bottom:5px solid #005FAA; text-align: left;}
#top-hoken2 .box img { float: left; max-width: 45%; margin-right: 30px;}
#top-hoken2 .box p { margin-bottom: 50px; padding-top: 1em; font-weight: bold; text-align: left;}
#top-hoken2 .box a.btn { padding-left: 40px; }

@media only screen and (max-width:959px) {
    #top-hoken2 { margin: 0 auto; padding:30px;}
    #top-hoken2 .box { width:100%; margin-bottom: 20px; padding:60px 20px 40px 20px;}
    #top-hoken2 .box .cat { padding: 5px 30px; font-size: 15px;}
    #top-hoken2 .box h3 { font-size:21px; }
    #top-hoken2 .box img { margin-right: 10px;}
}

/*--------------------------------------------------------------
 FAQ
--------------------------------------------------------------*/
#top-faq { margin: 0 auto; padding: 80px 20px 50px 20px; background: #DDEAF5;}
#top-faq h3{ position: relative; display: inline-block; margin-bottom: 1.7em; font-size: 41px; font-weight: bold;}
#top-faq h3:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width:420px; height:5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color:#5798CB;}
#top-faq ul li { position: relative; width: 90%; max-width: 1400px; margin: 10px auto 30px auto; padding: 30px 60px; background-color:#fff;}
#top-faq ul li .num { position: absolute; top: -10px; left: -10px; width:50px; height:50px; padding: 0; font-size: 25px; font-weight: bold; color: #fff; background-color:#3071B9; border-radius: 50%; line-height:50px;}
#top-faq ul li h4 { margin-bottom:0.5em; font-size: 18px; font-weight: bold; color: #005FAA; text-align: left;}
#top-faq ul li h4 strong { font-size: 127.78%; }
#top-faq ul li p { margin-bottom: 0; text-align: left; font-size: 18px; line-height: 1.2;}
#top-faq ul li p:before { margin-right:15px; font-family: "Font Awesome 6 Free"; content: "\f30b"; font-size: 27px; font-weight: 900; color:#FFD900; vertical-align:middle;}

@media only screen and (max-width:959px) {
    #top-faq h3{ font-size: 19px;}
    #top-faq h3:before { width:210px;}
    #top-faq ul li { padding: 30px 30px;}
    #top-faq ul li h4 { font-size: 17px;}
    #top-faq ul li p { font-size: 16px;}
    #top-faq ul li p:before {font-size:19px; margin-right:10px;}
}

/*--------------------------------------------------------------
 GUIDE
--------------------------------------------------------------*/
#top-guide { background: #A8DBF4; padding:90px 8%; border-radius: 50px;}
#top-guide h3 { position: relative; margin-bottom: 0.7em; font-size: 65px; font-weight: bold; text-align: left; color: #005AAA; line-height: 1.1;}
#top-guide h3:before { content: ''; position: absolute; bottom: -15px; left: 2px; width: 40px; height: 1px; background-color:#005AAA;}
#top-guide p.cap { color:#222; font-size:21px; font-weight: bold; text-align: left;}
#top-guide .flex { margin-top: 50px; align-items:stretch;}
#top-guide .item { position: relative; width: 31%; padding: 40px 40px 90px 40px; background: #fff; border-radius: 15px;}
#top-guide .item h4 { position: relative; margin-bottom:2em; font-size:27px; font-weight: bold; color:#222; text-align: left; line-height: 1.1;}
#top-guide .item h4:before { content: ''; position: absolute; bottom: -20px; left: 2px; width: 40px; height: 1px; background-color:#005AAA;}
#top-guide .item p { text-align: left;}
#top-guide .item a.btn { position:absolute; bottom:30px; right:40px;}

@media only screen and (max-width:1200px) {
    #top-guide { padding:40px 8%; }
    #top-guide h3 { font-size: 41px; }
    #top-guide h3 span { font-size:16px; }
    #top-guide .item { width:100%; margin-bottom: 20px; padding: 40px 20px 90px 20px; }
    #top-guide .item h4 { font-size:23px;}
}

/*--------------------------------------------------------------
 NEWS INFORMATION
--------------------------------------------------------------*/
section#top-news-info { width:100%; }
#top-news-info .hl { margin-bottom:25px; border-bottom: 5px solid #005FAA;}
#top-news-info .hl h3 {width: calc(100% - 140px); margin-bottom:13px; font-size: 49px; font-weight: bold; text-align: left; color:#005FAA; line-height:0.5;}
#top-news-info .hl h3 span { font-size:19px; font-weight: bold; text-align: left; color:#212121; letter-spacing: 0.1em;}
#top-news-info .hl a { width:130px; text-align: right; padding-top:35px; color:#212121; }
#top-news-info .hl a:after { font-family: "Font Awesome 6 Free"; content: "\f061"; font-weight: 900; padding-left:7px; color: #005FAA; text-align: right;}

@media only screen and (max-width:959px) {
    #top-news-info .hl h3 { font-size: 31px; line-height:0.6; }
    #top-news-info .hl h3 span { font-size:16px; }
    #top-news-info .hl a { font-size:15px; padding-top:23px;}
}

#top-news { width: 44.3%;}
#top-information { width: 44.3%;}

@media only screen and (max-width:959px) {
    #top-news { width:100%; margin-bottom: 50px;}
    #top-information { width:100%;}
}

#top-news dl { text-align: left;}
#top-news dt { padding: 30px 0 5px 0;}
#top-news dd { padding:0 0 25px 0; border-bottom: 1px dashed #B1CBF1;}
#top-news dd a {text-decoration: underline;}

#top-information .map{ position:relative; width:100%; max-width: 620px; height:320px; margin: 0 auto 15px auto;}
#top-information .map iframe { position:absolute; top:0; left:0; width:100%; height: 100%;}
#top-information p { text-align: left; max-width: 620px; margin: 0 auto; }
#top-information a { color: #1F1F1F;}

@media only screen and (max-width:640px) {
    #top-information .map{ width:100%; }
}