@charset "UTF-8";
/* --------------------------------------------------
　共通レイアウト
-------------------------------------------------- */
#main{
    max-width: 100%!important;
    padding-inline: 0!important;
}
header{
    display:none;
}
.contents-in{
    max-width: 100%;
    padding: 0;
    margin: auto;
    background-color:#dbe3ee;
}
.page #content{
    margin-top:0;
}
#main article{
    background:url(img/yosha/mv_bg.png)no-repeat center top;
    padding-top: 160px;
    background-size: contain;
}
#footer .footer-txt:last-of-type{
    display:none;
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
    #footer .foot-r-menu-top{
        margin-bottom:0;
    }
}

/* --------------------------------------------------
　共通見出し・ブロック
-------------------------------------------------- */
#main .titlePage{
    margin:0;
    background:url(img/yosha/ttl_txt.png)no-repeat center top;
    height: 0;
    padding-top: 316px;
    aspect-ratio: 632 / 317;
    margin-inline: auto;
    line-height: 0;
    margin-bottom: 40px;
    overflow: hidden;
    text-indent: -999999px;
}
#main section h2{
    background: none!important;
    font-size: 42px;
    color: #0f2350;
}
#main section h2:before{
    content: none!important;
}

/* --------------------------------------------------
　共通ユーティリティ
-------------------------------------------------- */
#main .max800,
#main .max900{
    padding-inline:0;
}
#main .max800{
    max-width: 840px!important;
    margin-inline: auto;
    padding-inline:20px;
}
#main .max900{
    max-width:940px;
    margin-inline:auto;
    padding-inline:20px;
}

.spOnly{
    display:none;
}
.pcOnly{
    display:block;
}

/* --------------------------------------------------
　CTS1
-------------------------------------------------- */

#main #cts1{
    text-align:center;
}
#main #cts1 .introTxt{
    font-size:26px;
    line-height:1.5;
    font-weight: bold;
    margin-bottom: -50px;
}
#main .bgYellow{
    text-align:left;
    background:url(img/yosha/intro_bg.png)no-repeat center top;
    max-width: 600px;
    margin-inline: auto;
    position: relative;
    padding: 70px 120px 90px 80px;
    letter-spacing: 0.4px;
    line-height:2;
    font-size: 20px;
    bottom: -120px;
    font-weight: bold;
}
#main .bgYellow .img{
    position:absolute;
    right:-40px;
    top:-120px;
}
#main .full{
    background: #102046;
    padding-top: 140px;
    padding-bottom: 100px;
}
#main .full .flex {
    display:flex;
    justify-content: space-between;
    max-width: 900px;
    margin-inline: auto;
}
#main .full .flex p{
    background:#fff;
    border-radius:20px;
    display:flex;
    width: 100%;
    height:200px;
    justify-content: center;
    align-items:center;
    padding: 0;
    flex-basis: calc(33% - 20px);
    line-height: 2;
    font-size: 20px;
    font-weight: bold;
}

#main .bgWhite{
    text-align:left;
    background:#fff;
    max-width: 900px;
    margin-inline: auto;
    position: relative;
    padding: 80px 100px 70px;
    letter-spacing: 0.4px;
    line-height:2;
    font-size: 16px;
    border-radius: 20px;
    bottom: -100px;
}
#main .bgWhite:before{
    content:"";
    padding:0px;
    position:absolute;
    top: -1px;
    left:0;
    right:0;
    max-width:100px;
    margin:auto;
    height: calc(30px / 2 * tan(60deg));
    width: 10%;
    clip-path: polygon(100% 0, 50% 100% ,0 0);
    background: #dbe3ef;
}
#main .bgWhite .img{
    margin:0 auto 40px;
}
#main #cts1 h2{
    margin-top: 0;
    position: relative;
    top: 60px;
    font-size: 62px;
    text-align: center;
    /* margin-bottom: -10px; */
    padding-bottom: 0;
}


/* --------------------------------------------------
　CTS2
-------------------------------------------------- */
#main #cts2{
    background:#fff100;
    padding-top: 150px;
    padding-bottom:60px;
}
#main #cts2 h2{
    text-align:center;
    font-size: 42px;
}
#main #cts2 ul{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    max-width:900px;
    margin:auto;
    padding:0;
    list-style:none;
}
#main #cts2 ul li{
    flex-basis:50%;
    max-width:400px;
    margin:40px auto;
    border:solid 10px #0f2350;
    border-radius:20px;
    position:relative;
}
#main #cts2 ul li p{
    padding:30px;
    line-height:2;
    letter-spacing: 0.5px;
    margin: 0;
}
#main #cts2 ul li h3{
    background:#0f2350;
    color:#fff;
    text-align:center;
    padding:20px;
    padding-top:40px;
    margin-top:0;
    margin-bottom: 0;
    font-size: 24px;
}
#main #cts2 ul li span{
    background:#fff100;
    color:#0f2350;
    border:solid 10px #0f2350;
    border-radius:100%;
    padding:10px;
    font-weight:bold;
    font-size:32px;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
    aspect-ratio:1/1;
    width:80px;
    height:80px;
    position:absolute;
    left:0;
    right:0;
    top:-40px;
    margin:auto;
}

/* --------------------------------------------------
　CTS3
-------------------------------------------------- */
#main #cts3 {
    background:#0f2350;
    color:#fff;
    padding-top:40px;
    padding-bottom: 40px;
}
#main #cts3 h2{
    text-align:center;
    color: #fff;
    font-size: 42px;
}
#main #cts3 ul{
    max-width:900px;
    margin:auto;
    list-style:none;
    padding:0;
}
#main #cts3 li{
    margin-bottom:40px;
    padding-left: 110px;
    background: url(img/yosha/icon_check.svg)no-repeat left;
}
#main #cts3 li h3{
    font-size:24px;
}
#main #cts3 li p{
    padding:0;
    line-height:2;
}


/* --------------------------------------------------
　CTS4
-------------------------------------------------- */
#main #cts4 {
    padding-top: 80px;
}
#main #cts4 > p{
    line-height:2;
    margin-bottom:40px;
}
#main #cts4 h2{
    text-align:center;
    font-size:42px;
    margin-bottom: 30px;
    margin-top: 0;
}
#main #cts4 h2 small{
    font-size:50%;
    display:block;
}
#main #cts4 .tableBox{
    max-width:980px;
    margin:auto;
    border-radius: 20px;
    overflow: hidden;
    padding: 50px;
    background: #fff!important;
}
#main #cts4 .sampleBox{
    max-width:980px;
    margin:auto;
    text-align:center;
    background:#0f2350;
    color:#fff;
    line-height: 0;
}
#main #cts4 .sampleImg{
    display:flex;
}
#main #cts4 .sampleImg img{
    width: 50%;
    display:flex;
}
#main #cts4 .sampleBox h3{
    margin:auto;
    padding:20px;
    line-height:1;
    margin-bottom:50px;
    font-size: 24px;
}
#main #cts4 > h3{
    text-align:center;
    color:#0f2350;
    font-size: 24px;
    margin-bottom: 30px;
}

#main #cts4 .tableBox{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(50vw + 490px);
    max-width: 100%;
    margin-left: auto;
    border-radius: 20px 0 0 20px!important;
    padding-right: 0!important;
}
#main #cts4 .tableBox > h4{
    margin-bottom:1rem;
}
#main #cts4 .tableBox > *:not(.scroll_table) {
    padding-left: 0;
    max-width: 980px;
}
#main #cts4 .tableBox > h3{
    padding-right:0;
    position:relative;
    /* padding-left: 20px!important; */
}
#main #cts4 .tableBox > h3:after{
    content:"";
    background:#0f2350;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    z-index:-1
}
#main #cts4 .tableBox > h4{
    margin-left:-50px;
}
#main #cts4 .tableBox > p{
    line-height:2;
}
#main #cts4 .tableBox > .max800{
    margin-left:0;
    margin-right:calc(50vw - 50%);
    padding-right: 0;
    padding-left: 50px;
    margin-bottom:40px;
}
#main #cts4 .tableBox#table2{
    margin-bottom:60px;
}

#main #cts4 .tableBox,
#main #cts5 .tableBox{
    margin:auto;
    margin-bottom:40px;
    border-radius:20px;
    background: #dbe3ef;
    padding: 50px;
    border-radius:20px;
    overflow:hidden;
}

#main #cts4 .tableBox .caption,
#main #cts5 .tableBox .caption{
    text-align:right;
    margin-bottom:1rem;
}
#main #cts4 .tableBox h3,
#main #cts5 .tableBox h3{
    margin: -50px -50px 50px;
    margin-right: 0;
    padding: 20px;
    line-height: 1;
    margin-bottom: 50px;
    text-align: center;
    color:#fff;
    background: #0f2350;
    font-size: 24px;
}

#main #cts4 .tableBox h4,
#main #cts5 .tableBox h4{
    color:#0f2350;
    text-align:center;
    font-weight:bold;
    font-size:24px;
}

#main #cts4 .tableBox table,
#main #cts5 .tableBox table{
    margin-top:0;
    margin-bottom: 0;
    border-collapse:separate;
    border-spacing:1px;
    background:#000;
    border:none;
    overflow: visible;
}

#main #cts4 .tableBox table tr >*,
#main #cts5 .tableBox table tr >*{
    padding:1rem;
    border:none;
}
#main #cts5 .tableBox table tr >*{
    text-align:left;
}

#main #cts4 .tableBox table th,
#main #cts5 .tableBox table th{
    background:#fff100;
    text-align:center;
}
#main #cts5 .tableBox table .year{
    min-width:120px;
}
#main #cts5 .tableBox table .alignLeft{
    text-align:left;
}
#main #cts4 .tableBox table th small,
#main #cts5 .tableBox table th small{
    font-size:80%;
    display:block;
}

/* --------------------------------------------------
　CTS5
-------------------------------------------------- */
#main #cts5 {
    background:#fff;
    padding-top:40px;
    padding-bottom: 40px;
}
#main #cts5 h2{
    text-align:center;
    font-size:42px;
    color: #0f2350;
    margin-bottom: 60px;
}

#main #cts5 .tableBox{
    max-width:980px;
}

#main #cts5 .tableBox h3{
    margin-right:-50px;
}
#main #cts5 .tableBox table tr td:first-of-type{
    text-align:center;
}
#main #cts5 .tableBox#table3 table tr td:nth-of-type(n+4),
#main #cts5 .tableBox#table4 table tr td:nth-of-type(n+3){
    text-align:right;
}
#main #cts5 .tableBox table tr:last-of-type td{
    font-weight:bold;
}


#main .tableBox table td.imgCell{
    padding: 0!important;
}
#main .tableBox#table1 table td img{
    min-width: 300px!important;
}
#main .tableBox#table2 table td.imgCell img{
    min-width:120px;
    height:auto;
    display:flex;
}



/* --------------------------------------------------
　CTS6
-------------------------------------------------- */
#main #cts6{
    background:linear-gradient(0deg,#0f2350 0, #226bae 100%);
    color:#fff;
    padding-block:60px;
    padding-inline: 20px;
}
#main #cts6 p{
    max-width: 500px;
    margin-inline:auto;
    line-height:2;
    background: url(img/yosha/contact.png)no-repeat right;
    min-height: 270px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 20px;
}
#main #cts6 .btn{
    width:100%;
    max-width:800px;
    margin-inline:auto;
}
#main #cts6 .btn a{
    background:linear-gradient(0deg,#ffef06 0, #fffebf 100%);
    color: #0f2350;
    font-size: 20px;
    font-weight: bold;
    width:100%;
    height:100px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    border-radius:50px;
    position: relative;
}
#main #cts6 .btn a:before{
    content:none;
}
#main #cts6 .btn a:after{
    border:none;
    background:url(img/yosha/contact_arrow.svg)no-repeat center;
    padding:10px;
    max-width: 20px;
    top: 0;
    bottom: 0;
    left: 0;
    right: -200px;
    margin: auto;
}

.scroll_table {
    overflow-x: auto;
    display: block;
}
.tableBox#table1 .scroll_table table tr td:nth-of-type(2){
    position:relative;
}
.tableBox#table1 .scroll_table table tr td:nth-of-type(2):before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    border-left:solid 10px;
    border-right:solid 10px;
    border-color: #fff100!important;
}
.tableBox#table1 .scroll_table table tr:first-of-type td:nth-of-type(2):before{
    border:solid 10px;
    border-bottom:0;
}
.tableBox#table1 .scroll_table table tr:last-of-type td:nth-of-type(2):before{ 
    border:solid 10px;
    border-top:0;
}

.tableBox#table2 .scroll_table table tr:nth-of-type(4) td{
    position:relative;
}
.tableBox#table2 .scroll_table table tr:nth-of-type(4) td:before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    border-block:solid 10px;
    border-color: #fff100!important;
}
.tableBox#table2 .scroll_table table tr:nth-of-type(4) td:first-of-type:before{
    border-left:solid 10px;
}
.tableBox#table2 .scroll_table table tr:nth-of-type(4) td:last-of-type:before{
    border-right:solid 10px;
}

.scroll_table table th,
.scroll_table table td {
    white-space: nowrap;
    text-align: center;
}
.scroll_table {
    overflow-x: scroll;
    overflow-y: hidden;
    display: block;
    padding-bottom: 20px;
    scrollbar-color: #576584
    /* ---- Firefox用 ---- */
    scrollbar-color: #576584 #cdd1da;
}

/* ---- Chrome / Edge / Safari 用 ---- */
.scroll_table::-webkit-scrollbar {
    height: 20px;
    background-color: #cdd1da;
    border-radius: 10px;
}
.scroll_table::-webkit-scrollbar-thumb {
    min-width: 200px;
    background-color: #576584;
    border-radius: 10px;
}
@media screen and (max-width: 980px) {
    #main .full .flex,
    #main .bgWhite,
    #main #cts2 ul,
    #main #cts3 ul,
    #main #cts4 .tableBox,
    #main #cts5 .tableBox,
    #main #cts4 .sampleBox{
        max-width:calc(100% - 40px);
    }
    #main #cts2 ul li {
        flex-basis: calc(50% - 10px);
    }
}
@media screen and (max-width: 640px) {
    .spOnly{
        display:block;
    }
    .pcOnly{
        display:none;
    }
    #main{
        font-size: 4.2666vw;
    }
    #main .titlePage{
        background-image:url(img/yosha/ttl_txt_sp.png);
        background-size: calc(100% - 20px);
        aspect-ratio: 632 / 581;
        padding: 0;
        height: 100%;
    }
    #main #cts1 .introTxt{
        font-size: 4.8vw;
        margin-bottom: -22%;
        margin-top: -8%;
    }
    #main .full {
        padding-top: 20%;
        padding-bottom: 10%;
    }
    #main #cts2{
        padding-top: 20%;
        padding-bottom: 10%;
    }
    #main #cts3,
    #main #cts4,
    #main #cts5{
        padding-top: 10%;
    }
    #main #cts3 h2,
    #main #cts4 h2,
    #main #cts5 h2{
        margin-top:0;
    }
    #main section h2{
        font-size: 8.27vw!important;
    }
    #main #cts5 h2{
        margin-bottom:30px;
    }
    #main #cts1 h2{
        margin-bottom:-10px;
    }
    #main .bgYellow{
        background-image:url(img/yosha/intro_bg_sp.png);
        background-size: 100%;
        background-position: top center;
        max-width: calc(100% - 20px);
        padding: 0% 20% 15% 6%;
        margin-inline: auto;
        aspect-ratio: 710 / 1099;
        display: flex;
        align-items: center;
        font-size: 4.533vw;
        letter-spacing: -0.2px;
        bottom: -35vw;
    }
    #main .bgYellow .img{
        max-width: 30%;
        right: 0;
        top: -10%;
    }
    #main .bgWhite{
        padding:20px;
        max-width: calc(100% - 40px);
        font-size: 4.2666vw;
    }
    #main .bgWhite:before{
        width: 20%;
    }
    #main .full .flex{
        flex-direction:column;
        padding-inline: 60px;
    }
    #main .full .flex p{
        aspect-ratio:5 / 3;
        font-size: 4.533vw;
    }
    #main #cts2 ul{
        flex-direction:column;
    }
    #main #cts2 ul li{
        width: 100%;
        max-width: calc(100% - 20px);
    }
    #main #cts2 ul li p{
        font-size: 4.2666vw;
    }
    #main #cts2 ul li span{
        font-size:8.53vw;
    }
    #main #cts2 ul li h3{
        font-size:5.60vw
    }
    #main #cts3 ul{
        max-width: calc(100% - 40px);
    }
    #main #cts3 li{
        background-size:42px;
        background-position: top left;
        padding-left: 60px;
        font-size: 4.2666vw;
    }
    #main #cts3 li h3{
        font-size:5.60vw
    }
    #main #cts4{
        
    }
    #main #cts4 .tableBox{
        margin-left: 10px;
        max-width: calc(100% - 20px);
        padding-left: 0;
    }
    #main #cts4 >*:not(.tableBox){
        /* max-width: calc(100% - 40px); */
        margin-inline: auto;
    }
    #main #cts4 > p{
        padding-inline:20px;
    }
    #main #cts4 h3{
        font-size:5.60vw;
    }
    #main #cts5 .tableBox{
        max-width: calc(100% - 40px);
        padding-inline: 20px;
    }
    #main #cts5 .tableBox h3{
        margin-bottom:20px;
        margin-left: 0 ;
    }
    
    #main .tableBox#table1 table td img {
        max-width: 150px;
        min-width: 0!important;
        width: auto;
    }
    #main #cts4 .tableBox > *:not(.scroll_table){
        padding-inline:20px;
        max-width:100%;
        margin-inline: auto;
    }
    #main #cts4 .tableBox h3{
        margin-left: 0;
        margin-bottom: 0;
    }
    #main #cts5 .tableBox h3{
        margin-left: -20px;
    }
    #main #cts4 .tableBox table tr >*,
    #main #cts5 .tableBox table tr >*{
        /*padding:4.2666vw;*/
    }
    #main #cts4 .tableBox .scroll_table{
        margin-left:20px;
    }
    #main #cts4 .sampleImg{
        flex-direction:column;
    }
    #main #cts4 .sampleImg img{
        width: 100%;        
    }
    #main #cts6 .btn a{
        height:75px;
    }
    #main #cts6 p{
        font-size: 4.533vw;
    }
}
@media screen and (min-width: 641px) {
    #table3 .scroll_table ,
    #table4 .scroll_table {
        overflow:hidden;
    }
    #table3 .scroll_table table tr > *,
    #table4 .scroll_table table tr > *{
        white-space: normal;
    }
}