@charset "UTF-8";
/* テキストをポップアップで表示できるプラグイン　*/
.featherlight-sample {
display: none;
}

/*PC*/
@media print, screen and (min-width: 768px) {
.hed_btn{
width: 100%;
background: #f2f5fc;
padding: 20px 0;
box-sizing: border-box;
margin:0;
}

.hed_btn.fixed {
position: fixed;
top: 90px;
left: 0;
width:100%;
z-index: 10;
}

.hed_btn_placeholder {
height: 0;
}

.hed_btn ul{
width: 70%;
min-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content:space-between;
}

.hed_btn ul li{
width:18.5%;
}

.hed_btn ul li a{
display: block;
width: 100%;
border: 2px solid #0066a1;
border-radius: .6rem;
padding: 10px;
box-sizing: border-box;
text-align: center;
background: #FFF;
font-weight: 800;
line-height: 1;
color: #0066a1;
position: relative;
transition: .5s;
}

.hed_btn ul li a:before {
content: '';
width: 6px;
height: 6px;
border: 0;
border-bottom: solid 2px #0066a1;
border-right: solid 2px #0066a1;
transform: rotate(45deg);
position: absolute;
top: -4px;
right: 15px;
bottom: 0;
margin: auto;
}

.hed_btn ul li a:hover{
background: #0066a1;
color: #FFF;
}

.hed_btn ul li a:hover:before {
content: '';
width: 6px;
height: 6px;
border: 0;
border-bottom: solid 2px #FFF;
border-right: solid 2px #FFF;
transform: rotate(45deg);
position: absolute;
top: -4px;
right: 15px;
bottom: 0;
margin: auto;
}

#insurance{
margin: 0 auto 160px;
padding-top: 150px;
box-sizing: border-box;
}

#insurance .block{
position: relative;
margin: 0 auto 120px;
}

#insurance .block .s_ttl{
font-size: 3.2rem;
font-weight: 800;
line-height: 1.4;
letter-spacing: .1rem;
text-align: center;
margin: 0 0 40px;
}

#insurance .block .s_ttl2{
font-size: 2.2rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: .1rem;
text-align: center;
margin: 0 0 20px;
}

#insurance .block .red_txt{
font-size: 1.2rem;
font-weight: 600;
text-align: center;
margin: 0 0 60px;
}

#insurance .individua_wrap2{
padding:8% 0;
box-sizing: border-box;
background: #ddf4f9;
position: relative;
overflow: hidden;
margin: 0 auto 100px;
}

#insurance .block .tab_list{
position: relative;
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto 60px;
border-bottom: 2px solid rgb(0, 102, 161);
z-index: 5;
}

#insurance .block .tab_list li{
width: 32%;
margin: 0 1%;
}

#insurance .block .tab_list li a{
display:block;
border-top: 2px solid rgb(0, 102, 161);
border-left: 2px solid rgb(0, 102, 161);
border-right: 2px solid rgb(0, 102, 161);
border-radius: 10px 10px 0 0;
background: #FFF;
padding:15px 10px;
box-sizing: border-box;
text-align: center;
font-size: 1.2rem;
font-weight: 700;
line-height: 1;
color:rgb(0, 102, 161);
transition: .5s;
}

#insurance .block .tab_list li a:hover{
color: #FFF;
background: rgb(0, 102, 161);
}

#insurance .block .tab_list li a.active{
color: #FFF;
background: rgb(0, 102, 161);
}

#insurance .individua_wrap2 .illust{
position: absolute;
top:0%;
left:-10%;
width:40%;
opacity: .3;
}

#insurance .individua_wrap2 .ayumi_list{
width: 80%;
margin: 0 auto 30px;
display: flex;
flex-wrap: wrap;
position: relative;
z-index: 5;
}

#insurance .individua_wrap2 .ayumi_list li{
width:calc(23.5% - 2px);
border: 1px solid #0066a1;
border-radius: 1rem;
margin-right: 2%;
margin-bottom: 2%;
background: #FFF;
}

#insurance .individua_wrap2 .ayumi_list li a{
position: relative;
display: block;
padding: 15px 25px 15px 15px;
box-sizing: border-box;
}

#insurance .individua_wrap2 .ayumi_list li a .icon{
position: absolute;
top: 5px;
right: 5px;
width: 18px;
}

#insurance .individua_wrap2 .ayumi_list li a .ayumi_ttl{
text-align: center;
font-size: 1rem;
color: #0066a1;
line-height: 1.4;
margin: 0 0 10px;
}

#insurance .individua_wrap2 .ayumi_list li a .img{
margin: 0 0 10px;
}

#insurance .individua_wrap2 .ayumi_list li a .img img{
border-radius: .4rem;
}

#insurance .individua_wrap2 .ayumi_list li:nth-child(4n){
margin-right: 0;
}

#insurance .individua_wrap2 .ayumi_list li a .txt{
font-size: .9rem;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 任意の行数を指定 */
}

#insurance .individua_wrap2 .ayumi_btn_list{
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 60%;
margin: 0 auto;
}

#insurance .individua_wrap2 .ayumi_btn_list li{
width: 45%;
margin: 0 2%;
}

#insurance .individua_wrap2 .ayumi_btn_list li a{
width: 100%;
display: table;
padding:15px 25px;
box-sizing: border-box;
font-size: 1.2rem;
line-height: 1;
font-weight: 700;
color:#FFF;
background:#0066a1;
border-radius:.4rem;
text-align: center;
position: relative;
}

#insurance .individua_wrap2 .ayumi_btn_list li a:before {
content: '';
width: 8px;
height:8px;
border: 0;
border-top: solid 2px #FFF;
border-right: solid 2px #FFF;
transform: rotate(45deg);
position: absolute;
top: 0;
right: 15px;
bottom: 0;
margin: auto;
}

#insurance .btn3{
margin:60px auto 0;
}

#insurance .btn3 a{
display:table;
padding: 20px 55px;
box-sizing: border-box;
font-size: 1.4rem;
line-height: 1;
font-weight: 700;
color: #FFF;
background:#e60216;
border-radius: .6rem;
position: relative;
}

#insurance .btn3 a:before {
content: '';
width: 12px;
height:12px;
border: 0;
border-top: solid 3px #FFF;
border-right: solid 3px #FFF;
transform: rotate(45deg);
position: absolute;
top: 0;
right: 18px;
bottom: 0;
margin: auto;
}


}
/*sp*/
@media only screen and (max-width: 767px) {
.hed_btn{
width: 100%;
background: #f2f5fc;
padding: 20px 5%;
box-sizing: border-box;
margin: 60px 0 0;
}


.hed_btn ul{
width: 100%;
margin: 0 auto;
}

.hed_btn ul li{
width:100%;
margin: 0 0% 15px;
}

.hed_btn ul li:last-child{
margin-bottom: 0;
}

.hed_btn ul li a{
display: block;
width: 100%;
border: 2px solid #0066a1;
border-radius: .6rem;
padding: 10px;
box-sizing: border-box;
text-align: center;
background: #FFF;
font-size: .8rem;
font-weight: 800;
line-height: 1;
color: #0066a1;
position: relative;
transition: .5s;
}

.hed_btn ul li a:before {
content: '';
width: 6px;
height: 6px;
border: 0;
border-bottom: solid 2px #0066a1;
border-right: solid 2px #0066a1;
transform: rotate(45deg);
position: absolute;
top: -4px;
right: 15px;
bottom: 0;
margin: auto;
}

.hed_btn ul li a:hover{
background: #0066a1;
color: #FFF;
}

.hed_btn ul li a:hover:before {
content: '';
width: 6px;
height: 6px;
border: 0;
border-bottom: solid 2px #FFF;
border-right: solid 2px #FFF;
transform: rotate(45deg);
position: absolute;
top: -4px;
right: 15px;
bottom: 0;
margin: auto;
}

#insurance{
margin: 0 auto 60px;
}

#insurance .block{
position: relative;
margin: 0 auto 60px;
}

#insurance .block:nth-child(2){
margin:0 auto;
}

#insurance .block .s_ttl{
font-size: 1.4rem;
font-weight: 800;
line-height: 1.4;
letter-spacing: .1rem;
text-align: center;
margin: 0 0 20px;
}

#insurance .block .s_ttl2{
font-size: 1rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: .1rem;
text-align: center;
margin: 0 0 20px;
}

#insurance .block .red_txt{
font-size: 1rem;
font-weight: 600;
text-align: center;
margin: 0 0 30px;
padding: 0 5%;
box-sizing: border-box;
}

#insurance .individua_wrap2{
padding:8% 0;
box-sizing: border-box;
background: #ddf4f9;
position: relative;
overflow: hidden;
margin: 0 auto 60px;
}

#insurance .block .tab_list{
position: relative;
width: 90%;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto 20px;
border-bottom: 2px solid rgb(0, 102, 161);
z-index: 5;
}

#insurance .block .tab_list li{
width: 46%;
margin: 0 1%;
}

#insurance .block .tab_list li a{
display:block;
border-top: 2px solid rgb(0, 102, 161);
border-left: 2px solid rgb(0, 102, 161);
border-right: 2px solid rgb(0, 102, 161);
border-radius: 10px 10px 0 0;
background: #FFF;
padding:10px 5px;
box-sizing: border-box;
text-align: center;
font-size: .8rem;
font-weight: 700;
line-height: 1;
color:rgb(0, 102, 161);
transition: .5s;
}

#insurance .block .tab_list li a:hover{
color: #FFF;
background: rgb(0, 102, 161);
}

#insurance .block .tab_list li a.active{
color: #FFF;
background: rgb(0, 102, 161);
}

#insurance .individua_wrap2 .illust{
position: absolute;
top:0%;
left:-10%;
width:40%;
opacity: .3;
}

#insurance .individua_wrap2 .ayumi_list{
width: 90%;
margin: 0 auto 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#insurance .individua_wrap2 .ayumi_list li{
width:calc(48% - 2px);
border: 1px solid #0066a1;
border-radius: 1rem;
margin-bottom:15px;
background: #FFF;
}

#insurance .individua_wrap2 .ayumi_list li a{
position: relative;
display: block;
padding: 10px 15px 10px;
box-sizing: border-box;
}

#insurance .individua_wrap2 .ayumi_list li a .icon{
position: absolute;
top: 0;
right: 5px;
width: 10px;
}

#insurance .individua_wrap2 .ayumi_list li a .ayumi_ttl{
text-align: center;
font-size: .9rem;
color: #0066a1;
line-height: 1.2;
margin: 0 0 10px;
}

#insurance .individua_wrap2 .ayumi_list li a .img{
margin: 0 0 10px;
}

#insurance .individua_wrap2 .ayumi_list li a .img img{
border-radius: .4rem;
}

#insurance .individua_wrap2 .ayumi_list li:nth-child(4n){
margin-right: 0;
}

#insurance .individua_wrap2 .ayumi_list li a .txt{
font-size: .8rem;
line-height: 1.4;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 任意の行数を指定 */
}




#insurance .btn3{
width: 90%;
margin:30px auto 0;
}

#insurance .btn3 a{
display:table;
padding: 10px 25px;
box-sizing: border-box;
font-size: 1rem;
line-height: 1;
font-weight: 700;
color: #FFF;
background:#e60216;
border-radius: .6rem;
position: relative;
}

#insurance .btn3 a:before {
content: '';
width: 6px;
height:6px;
border: 0;
border-top: solid 3px #FFF;
border-right: solid 3px #FFF;
transform: rotate(45deg);
position: absolute;
top: 0;
right: 10px;
bottom: 0;
margin: auto;
}

}