@charset "UTF-8";
@font-face {
  font-family: 'webfont';
  src: 
  url('/font/ZenKakuGothicNew-Black.ttf')  format('ttf'),
  url('/font/ZenKakuGothicNew-Light.ttf')  format('ttf'),
  url('/font/ZenKakuGothicNew-Medium.ttf')  format('ttf'),
  url('/font/ZenKakuGothicNew-Regular.ttf')  format('ttf'),
  url('/font/ZenKakuGothicNew-Bold.ttf')  format('ttf');
}

h1,h2,h3,h4,p,li,a {
  font-family: 'webfont', sans-serif;
  font-weight: 400;
  font-style: normal;
}

.tab li a:hover {
    opacity: 1;
}


.tab_content img {
    height: auto;
}

.tab_content {
    padding: 2%;
    margin: 70px 20px 30px;
}

/*tabの形状*/
.tab{
	display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
    margin: 0 auto;
}
.tab li {
    width: 100%;
    max-width: 290px;
    list-style-type: none;
    background-color: #0062b0;
    border-radius: 20px 20px 0 0;
    z-index: 999;
}
.tab li a{
    height: 50px;
    text-decoration-line: none;
	display: block;
	padding: 25px 0;
    margin: 3px 3px 0;
    background-color: #fff;
    border-radius: 17px 17px 0 0;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	background: #0062b0;
    color: #fff;
}




.tab_area.is-active {
    display: block;
    padding-top: 200px;
    margin-top: -200px;
}



/*エリアの表示非表示と形状*/
.tab_area {
    width: 100%;
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
    margin: 0 auto;
    border-radius: 0 0 20px 20px;
}
.tab_area .border {
    border: 3px solid #0062b0;
    background: #fff;
    padding: 30px 20px;
    border-radius: 0 0 17px 17px;
}

/*areaにis-activeというクラスがついた時の形状*/
.tab_area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 0s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}








.tab_flex a:hover {
    opacity: .7;
}


.tab .lichild {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 40px 0 10px;
    color: #ff8296;
}
.tab .liso_nyu {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: #4eaeb3;
}
.tab .lisenior {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: #b164a3;
}
#child h2 {
    font-weight: 500;
    font-size: 2rem;
    margin: 0 auto 20px;
    display: inline-block;
    border-bottom: 4px solid #ff8296;
}
#child span {
    font-weight: 600;
    color: #ff8296;
}
#child .color_box {
    text-align: left;
    max-width: 700px;
    background-color: #fce8f0;
    border-radius: 10px;
    padding: 2%;
    margin: 20px auto 10px;
}

#so_nyu h2 {
    font-weight: 500;
    font-size: 2rem;
    margin: 0 auto 20px;
    display: inline-block;
    border-bottom: 4px solid #4eaeb3;
}
#so_nyu span {
    font-weight: 600;
    color: #4eaeb3;
}
#so_nyu .color_box {
    text-align: left;
    width: 90%;
    max-width: 700px;
    background-color: #c3e3e5;
    border-radius: 10px;
    padding: 2%;
    margin: 20px auto 10px;
}
#so_nyu h3 {
    font-size: 2rem;
    color: #4eaeb3;
}
#so_nyu .hasen {
    margin: auto;
    box-sizing: border-box;
    width: 90%;
    height: 20px;
    background: #ffffff;
    border-bottom: 4px dotted #4eaeb3;
    border-radius: 1px;
    box-shadow: 0 0 0 12px #ffffff;
    margin: 20px auto;
}

#senior h2 {
    font-weight: 500;
    font-size: 2rem;
    margin: 0 auto 20px;
    display: inline-block;
    border-bottom: 4px solid #b164a3;
}
#senior span {
    font-weight: 600;
    color: #b164a3;
}
#senior .color_box {
    text-align: left;
    width: 90%;
    max-width: 700px;
    background-color: #eddae9;
    border-radius: 10px;
    padding: 2%;
    margin: 20px auto 10px;
}
#senior h3 {
    font-size: 2rem;
    color: #b164a3;
}
#senior .hasen {
    margin: auto;
    box-sizing: border-box;
    width: 90%;
    height: 20px;
    background: #ffffff;
    border-bottom: 4px dotted #b164a3;
    border-radius: 1px;
    box-shadow: 0 0 0 12px #ffffff;
    margin: 20px auto;
}


/*------共通------*/
.tab_area h3 {
    margin: 15px 0 10px;
}
.color_box p {
    max-width: 500px;
    margin: 0 auto;
}
.btn_kuwashiku img {
    width: 90%;
    max-width: 550px;
    margin: 2% auto;
    transition: .2s
}
.btn_kuwashiku img:hover {
    opacity: .7;
    transition: .2s
}
.tab_flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #fff;
}
.tab_flex img {
    max-width: 350px;
    margin: 20px;
}




/*-----特約タブ-----*/
.tokuyaku .tab_content {
    width: 90%;
    max-width: 850px;
    margin: 30px auto;
    padding: 20px 0;
}
.tokuyaku .tab_area img {
    max-width: 300px;
}
.tokuyaku .tab_area h3 img {
    max-width: 500px;
}
.tokuyaku .tab_area h3 {
    margin: 0 auto;
    padding-right: 0;
}
.tokuyaku section {
    border-bottom: 0px;
    padding: 0;
}
.tokuyaku .accordion-area {
    padding: 0;
}
.tkyk_sn,.tkyk_ju {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: #4eaeb3;
}
.tkyk_ju {
    color: #b164a3;
}
.tokuyaku .tab li {
    max-width: 420px;
}
.tokuyaku .tab li a {
    max-width: 414px;
}


/*-----共済金支払い事例-----*/
.ex img {
    width: 100%;
    max-width: 600px;
    height: 100%;
}
.ex .tab_flex img {
    margin: 20px auto;
}
.ex .txt h3 {
    font-size: 2rem;
    margin: 0 10px;
    color: #3c3c3c;
    font-weight: 500;
}
.ex .txt .marker {
    font-size: 2.2rem;
    color: #0062b0;
    background: linear-gradient(transparent 70%, #fff9b3 70%);
}
.ex .txt .marker span {
    color: #0062b0;
    font-size: 2.6rem;
    font-weight: 600;
}
.ex .txt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2%;
    align-items: last baseline;
}
.ex .smallkome {
    text-align: left;
    max-width: 80%;
    font-size: .8rem;
    margin: 10px auto 0;
}
.ex .tab_content {
    max-width: 1000px;
    margin: 0 auto 30px;
    padding: 5% 2%;
}
.ex .tab li {
    max-width: 326px;
}
.ex .tab li a {
    max-width: 320px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
}
.ex .ex_nyu2,.ex .ex_so4 {
    padding: 40px 0 10px;
}
.ex .border {
    padding: 0 20px 20px;
}
.ex .tab_area,.ex .tab {
    max-width: 1000px;
}
.ex .aco_title {
    max-width: 500px;
    margin: 0 auto;
    padding-right: 0;
}
.ex .tab_flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.ex .accordion-area {
    padding: 0;
}
.ex section {
    border: none;
}
.ex .box {
    background-color: #fff;
}



/*---------------------
	PCとスマホの切り替え
-----------------------*/
.pc_view {}

.sp_view {
    display: none;
}



@media screen and (max-width:1050px) {
    .ex .tab li {
        max-width: 256px;
    }
    .ex .tab li a {
        max-width: 250px;
    }
}

@media screen and (max-width:980px) {
    .lineup .tab li {
        max-width: 226px;
    }
    .lineup .tab li a {
        max-width: 220px;
    }
    .ex .tab_content {
        width: 90%;
        margin: 0 auto;
    }
    .tokuyaku .tab li {
        max-width: 356px;
    }
    .tokuyaku .tab li a {
        max-width: 350px;
    }
}

@media screen and (max-width:870px){
	.ex .tab li {
        max-width: 226px;
    }
    .ex .tab li a {
        max-width: 220px;
    }
}

@media screen and (max-width:820px) {
    .tokuyaku .tab li {
        max-width: 336px;
    }
    .tokuyaku .tab li a {
        max-width: 330px;
    }
}

@media screen and (max-width:770px) {
    .lineup .tab li {
        max-width: 196px;
    }
    .lineup .tab li a {
        max-width: 190px;
    }
    .tokuyaku .tab li {
        max-width: 296px;
    }
    .tokuyaku .tab li a {
        max-width: 290px;
    }
    .ex .tab li {
        max-width: 196px;
    }
    .ex .tab li a {
        max-width: 190px;
    }
    .ex .tab_flex {
        width: 90%;
        margin: 0 auto;
    }
}

@media screen and (max-width:670px) {
    .lineuptab .tab li {
        max-width: 156px;
    }
    .lineuptab .tab li a {
        max-width: 150px;
    }
    .tokuyaku .tab li {
        max-width: 236px;
    }
    .tokuyaku .tab li a {
        max-width: 230px;
    }
    .ex .tab li {
        max-width: 156px;
    }
    .ex .tab li a {
        max-width: 150px;
    }
    .btn_kuwashiku img {
        width: 100%;
    }
}

@media screen and (max-width:550px) {
    .tab li a {
        padding: 20px 0 10px;
    }
    .tab .lichild,.tab .ex_nyu2, .tab .ex_so4 {
        padding: 30px 0 0;
    }
    .tokuyaku .tab_area img {
        max-width: 260px;
    }
    .lineuptab .tab li {
        max-width: 136px;
    }
    .lineuptab .tab li a {
        max-width: 130px;
        font-size: 1rem;
    }
    .ex .smallkome {
        max-width: 90%;
    }
    .border .txt {
        padding: 10px 0 20px;
    }
    .border .txt h3, .border .txt .marker,.border .txt .marker span {
        font-size: 1.4rem;
        margin: 0;
        padding: 0;
    }
    .ex .tab_flex img {
         max-width: 310px;
         margin: 20px 0;
    }
    
    /*---------------------
	PCとスマホの切り替え
-----------------------*/

    .pc_view {
        display: none;
    }
    .sp_view {
        display: block;
    }
}

@media screen and (max-width:540px) {
    .tab_flex img {
        margin-left: 0;
        margin-right: 0;
    }
    .tokuyaku .tab li {
        max-width: 186px;
    }
    .tokuyaku .tab li a {
        max-width: 180px;
        font-size: 1rem;
    }
    .ex .tab li {
        max-width: 126px;
    }
    .ex .tab li a {
        max-width: 120px;
        font-size: 1rem;
    }
    .tab_flex img {
        max-width: 260px;
    }
}

@media screen and (max-width:490px) {
    .lineuptab .tab li {
        max-width: 116px;
    }
    .lineuptab .tab li a {
        max-width: 110px;
    }
    #so_nyu h3,#senior h3 {
        font-size: 1.6rem;
    }
    .tab_area .border {
        padding: 25px 15px;
    }
    
    .tab_area.is-active {
    display: block;
    padding-top: 150px;
    margin-top: -150px;
}
}

@media screen and (max-width:440px) {
    .riyu .accordion-area section {
        margin: 0 15px;
    }
    #child h2,#so_nyu h2,#senior h2 {
        font-size: 1.5rem;
    }
    #child .color_box,#so_nyu .color_box,#senior .color_box {
        padding: 10px 12px;
    }
    .lineuptab .tab_content {
        margin-left: 15px;
        margin-right: 15px;
    }
    .lineuptab .tab li {
        max-width: 101px;
    }
    .lineuptab .tab li a {
        max-width: 95px;
        font-size: .9rem;
    }
    .tokuyaku .tab_content {
        max-width: 330px;
    }
    .tokuyaku .tab li {
        max-width: 156px;
    }
    .tokuyaku .tab li a {
        max-width: 150px;
        font-size: 1rem;
    }
    .ex .tab_content {
        max-width: 330px;
    }
    .ex .tab li {
        max-width: 106px;
    }
    .ex .tab li a {
        max-width: 100px;
        font-size: .9rem;
    }
    .color_box p {
        font-size: .8rem;
    }
}