@charset "utf-8";


/* ===================================================
メインビジュアル
====================================================== */
#main{
width: 100%;
margin:161px auto 55px;
position:relative;
}
@media screen and (max-width: 900px){
#main{
margin:66px auto 50px;
padding-top: 0;
}
}
@media screen and (max-width: 767px){
#main{
height:auto;
width:100%;
position:relative;
}
}
/* ------------------------------- */
.swiper-container{
position: relative;
}
.swiper-wrapper .swiper-slide {
background-position: center bottom;
background-size:cover;
background-repeat: no-repeat;
height: clamp(638px, 6.078vw + 583.3px, 700px);
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-image: url('../images/mainpict.jpg');
}
@media screen and (max-width:900px){
.swiper-wrapper .swiper-slide {
background-position: center center;
margin: 0 auto !important;
height: clamp(350px, 52.36vw + 166.74px, 638px);
}
.swiper-wrapper .swiper-slide img{
width:100%;
}
}
/* ------------------------------- */
#txt_area{
font-family: 'Noto Serif JP', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif, "Sawarabi Mincho";
font-size: 36px;
font-weight: 400;
width:100%;
position:absolute;
text-align: center;
line-height: 1.5;
margin: 0 auto;
bottom:50px;
top: 42%;
text-align: center;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index:2;
color:#072f4c;
}
@media (max-width: 900px) {
#txt_area { 
font-size: clamp(18px, 5.142857142857143vw , 32px);
}
}
/* ------------------------------- */
#main h1{
position:absolute;
right:40px;
bottom:40px;
z-index:99;
font-size:14px;
}
@media screen and (max-width:1199px){
#main h1{
bottom:24px;
}
}
@media screen and (max-width:767px){
#main h1{
right:10px;
bottom:12px;
font-size:12px;
text-align:right;
line-height:1.5;
}
}


/* ===================================================
個人・法人共通
====================================================== */

.top_kojin,
.top_houjin{
width:100%;
}
.top_midashi_block{
overflow:hidden;
width:100%;
margin-bottom:35px;
}
@media screen and (max-width:767px){
.top_kojin,
.top_houjin{
max-width:640px;
margin:0 auto;
}
.top_midashi_block{
display: block;
}
}


/* ===================================================
個人
====================================================== */

.top_kojin .top_midashi{
float:left;
width:260px;
background-color:#254169;
color:#fff;
text-align:center;
font-size:20px;
font-weight:700;
line-height:1.0;
padding:16px 12px 18px 12px;
}
.top_midashi_text{
float:right;
width:calc(100% - 290px);
text-align: left;
}
@media screen and (max-width: 900px) {
.top_kojin .top_midashi{
width: 100%;
margin-bottom: 25px;
padding: 8px;
font-size: 18px;
}
.top_midashi_text{
float:none;
width:100%;
padding:0 4px;
}
}
@media screen and (max-width:767px){
.top_kojin .top_midashi{
width:100%;
margin-bottom:25px;
padding:8px;
font-size:18px;
}
.top_midashi_text{
width:100%;
float:none;
}
}

/* ------------------------------- */
/* 4バナーリンク　------------------ */
.mainbana ul {
margin-bottom:30px;
display: flex;
gap: 10px; 
}
.mainbana ul li {
flex: 1; 
}
.mainbana ul li a {
position: relative;
display: block;
overflow: hidden;
}
.mainbana ul li a img {
display: block;
width: 100%;
height: auto;
}
.mainbana li span{
position: absolute;
display: block;
background-color: rgba(255,255,255,0.5);
width:100%;
text-align: center;
font-weight:500;
font-size:16px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap; 
padding:12px 8px;
color:#0d2241;
}
@media screen and (max-width:900px){
.mainbana li:nth-child(2) span{
letter-spacing: -0.5px;
}
}
@media screen and (max-width:767px){
.mainbana ul {
margin-bottom:30px;
flex-wrap: wrap;
}
.mainbana ul li {
flex: 0 0 calc(50% - 5px);
}
.mainbana li span{
font-size: clamp(14px, calc(3.409vw + 0.302px), 17px);
}
}
@media screen and (max-width:420px){
.mainbana li:nth-child(2) span{
letter-spacing: -0.5px;
}
}


/* オンライン対応　----------  */
.top_online{
background-color: #f2f2f2;
padding:35px 70px 35px;
margin:0 auto 55px;
max-width:900px;
}
.top_online h3{
font-size:17px;
color:#314069;
margin-bottom:20px;
font-weight:bold;
line-height:1.8;
text-align:center;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
letter-spacing: -0.5px;
}
.top_online_text{
margin-bottom:20px;
text-align: left;
}
@media screen and (max-width:900px){
.top_online{
padding:35px 7%;
}
}
@media screen and (min-width: 641px) and (max-width: 900px) {
.top_online{
width:100%;
}
}
@media only screen and (max-width:640px){
.top_online h3{
font-size:16px;
}
}


/* ===================================================
法人
====================================================== */
.top_houjin .top_midashi{
float:left;
width:260px;
background-color:#4f8b27;
color:#fff;
text-align:center;
font-size:20px;
font-weight:700;
line-height:1.0;
padding:16px 12px 18px 12px;
}
@media screen and (max-width: 900px) {
.top_houjin .top_midashi{
width: 100%;
padding: 8px;
font-size: 18px;
}
}
/* ------ */
.top_houjin_box {
overflow: hidden;
max-width: 900px;
margin: 0 auto 70px;
text-align: left;
}
/* ------ */
.top_houjin_pict {
float: right;
width: 46.5%;
margin-left: 4.5%; 
}
.top_houjin_pict img {
display: block;
width: 100%;
height: auto;
}
@media only screen and (max-width:767px){
.top_houjin_pict {
float: none;
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
margin:0 0 25px 0;
}
.top_houjin_pict img {
display: block;
width: 100%;
height: auto;
position: relative;
top: 50%; 
transform: translateY(-50%);
}
}
@media only screen and (max-width:500px){
.top_houjin_pict {
height: auto; 
}
.top_houjin_pict img {
top:inherit;
transform: translateY(0);
}
}
/* ------------------------------- */
.top_houjin_textbox {
float: left;
width: 49%;
padding:0 4px;
}
@media only screen and (max-width:767px){
.top_houjin_textbox {
float: none;
width: 100%;
}
}
/* ------------------------------- */
.top_houjin_textbox  > h3 {
font-size: 22px;
color: #333;
margin:4px 0 15px;
padding:0;
letter-spacing: -0.3px;
}
 @media only screen and (max-width:900px){
.top_houjin_textbox  > h3 {
font-size: 19px;
text-align: center;
letter-spacing: -0.5px;
margin:4px 0 0;
}
}
@media only screen and (max-width:480px){
.top_houjin_textbox  > h3 {
font-size: 18px;
letter-spacing: -0.5px;
}
}
/* ------------------------------- */
	.top_houjin_textbox  > .top_houjin_shield {
font-size: 40px;
margin-bottom: 10px;
padding:12px 0 15px 60px;
font-weight:700;
background-image: url("../images/corp/logo_shield.png");
background-repeat: no-repeat;
background-size: 50px;
}
@media only screen and (max-width:900px){
	.top_houjin_textbox  > .top_houjin_shield {
text-align: center;
font-size: 32px;
padding:0 0 0 10px ;
background-position: calc( 50% - 82px );
background-size: 40px;
margin-bottom: 0;
}
}
@media only screen and (max-width:640px){
	.top_houjin_textbox  > .top_houjin_shield {
padding:14px 0 14px 10px ;
}
}
/* ------------------------------- */
	.top_houjin_textbox  > .top_houjin_sub {
font-size: 17px;
margin-bottom: 30px;
font-weight:500;
}
 @media only screen and (max-width:900px){
.top_houjin_textbox > .top_houjin_sub{
text-align: center;
}
}
/* ------------------------------- */
.top_houjin_textbox  > .top_houjin_text {
margin-bottom: 30px;
}
/* ------------------------------- */
@media only screen and (max-width:900px){
.top_houjin_textbox_link{
text-align: center
}
}

/* ===================================================
 メッセージ
====================================================== */
.top_intro{
background-color: #eff8fe;
padding:60px 54px;
margin-bottom:60px;
}
.top_intro h3{
font-size:24px;
font-weight:700;
margin-bottom:40px;
}
.top_intro_text{
margin-bottom:40px;
text-align: left;
}
@media only screen and (max-width:767px){
.top_intro{
padding:60px 5%;
}
.top_intro h3{
font-size:20px;
line-height:1.5;
}
.top_intro_text{
margin-bottom:40px;
text-align: left;
}
}
/* ------------------------------- */
.top_intro h3 br{
display: none;
}
@media only screen and (max-width:400px){
.top_intro h3 br{
display: block;
}
}