body{
    color: #121212;
    background-color: #F3F4F5;
}
*{
    font-family: "Noto Sans JP", serif;
}
.serif{
    font-family: "Noto Serif", serif;
}
.big11{
    font-size: 1.1em;
}
.big125{
    font-size: 1.25em;
}
.big16{
    font-size: 1.6em;
}
.inner{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
.blue{
    color: #1E3D74;
    font-weight: 600;
}
.wavy{
    text-decoration: underline wavy #4C75F2;
}
section{
	background-color: #f3f4f5;
}
.tbl-inner{
	width: 95%;
    margin: 0 auto;
	display:flex;
	justify-content:center;
	align-items:center;
}
.point-tbl-wrap{
	display: inline-flex;
	justify-content: center;
	flex-direction: row;
	align-items: flex-start;
}
.appeal-tbl{
	border-collapse: collapse;
}
.appeal-tbl2{
	border-spacing: 4px;
	box-sizing: border-box;
    margin-left: -2px;
}
thead th{
    font-size: 23px;
}
td,th{
    font-size: 15px;
	background-color: #fff;
	padding: 1.6em 0.6em;
	text-align: center;
	min-width: 11em;
	line-height: 1.2;
	white-space: nowrap;
}
.appeal-tbl2 th{
    padding: 1.02em 0.6em;
}
td{
    border: 2px solid #9BA8BF;
}
.appeal-tbl1 tbody th,
.appeal-tbl2 thead th{
    border: 2px solid #9BA8BF;
}
.appeal-tbl2 th{
	background-color: #1E3D74;
	text-align: center;
	font-weight: 600;
	color: #FFFFFF;
}
.tbody-th{
	background-color: #1E3D74;
	text-align: center;
	font-weight: 600;
	color: #FFFFFF;
}
.th-gold{
	background:linear-gradient(120deg , #b2a569 , #7b6e38) ;
	padding: 0.91em 0;
	text-align: center;
	font-weight: 600;
	color: #FFFFFF;
	position: relative;
}
.th-gold::after{
	content: "";
	display: block;
	position: absolute;
	background:linear-gradient(120deg , #b2a569 0% , #7b6e38 140%) ;
	transform: translate(-50% , 0);
	top: 100%;
	left: 50%;
	height: 0.78em;
	width: 1.36em;
	clip-path: polygon(0 0,50% 100% ,100% 0);
}
.th-gold::before{
    content: "";
    border: 8px solid;
    display: block;
    border-image: linear-gradient(280deg , #d2c36f 0% , #6c6439 26% , #d2c36f 53% , #f2e598 60% , #d2c36f 75%);
    border-image-slice: 1;
    width: calc(100% + 4px);
    height: calc(13.6em + 4px);
    position: absolute;
    top: 0;
    left: 0;
}
td .small{
	font-size: 0.8em;
	font-weight: 600;
}
.td1-1,.td2-1{
	padding: 1.52em 0.6em ;
}
.td1-2,.td2-2{
	padding: 2.2em 0.6em;
}
.td1-3,.td2-3{
	padding: 1.58em 0.6em;
}
.back_gray{
    background-color: rgba(30,61,116,0.05);
}
@media (max-width:1260px) {
    .tbl-inner{
        justify-content: flex-start;
        overflow: auto;
    }
}
/* header */
header{
    padding-left: 5%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: auto;
}
.header-left{
    font-size: 1.5rem;
    font-weight: 900;
    font-family: "Inter" ,serif;
    color: #1E3D74;
}
.header-right{
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 1.75rem;
}
.header-nav{
    display: flex;
    flex-direction: column;
}
.header-ul{
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
}
.header-li{
    font-weight: 600;
    color: #000;
}
.header-btm-ul{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    font-size: 1.25rem;
    gap:2em;
    transform: translateY(0.8em);
}
.header-btm-link{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.66em;
}
.header-btm-link-icon{
    height: 1.4em;
}
.hamburger-menu{
    background-color: #1E3D74;
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 20px 0;
}
.hamburger-line{
    background-color: #f3f4f5;
    width: 36px;
    height: 3.2px;
    border-radius: 5%;
    display: block;
}


/* ファーストビュー */
.fv-sec {
    margin-top: 48px;
    position: relative;
    width: 100%;
}

.fv-img {
    width: 100%;
}
.fv-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fv-sec{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    position: relative;
}
.fv-left{
    position: relative;
    z-index: 1;
    width: 70%;
}
.fv-text {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    background-color: #153C78;
    width: 100vw;
    font-size:  2rem;
    padding: 1.4em 0 2.2em 60vw;
}


.fv-text--right{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fv-accent {
    width: 400px;
}

.fv-heading {
    position: relative;
    white-space: nowrap;
    font-family: "Noto Serif", serif;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.42857143;
}

.fv-heading-small {
    font-size:  1.125rem;
    font-weight: 500;
}

.fv-heading-border::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 4px;
    left: 0;
    bottom: 0;
    background-color: #D2C36F;
    opacity: 0.8;
}

.fv-profile {
    position: absolute;
    bottom: 20px;
    left: calc(30% - 12rem);
    background-color: rgba(243,244,245,0.66);
    max-width: 305px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px 30px;
    border-radius: 20px;
    font-size: 20px;
    font-weight: 500;
}
.fv-comment{
    position: absolute;
    font-size: 1.6em;
    left: calc(30% - 12rem);
    bottom: 60%;
}

.fv-profile p {
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 1.4444;
    color: #3a3a3a;
}

.fv-profile-name{
    font-size: 1.75rem !important;
}
.sp-big{
    display: none;
}
@media (min-width:1388px) {
    .fv-accent{
        width: 30vw;
    }
    .fv-heading{
        font-size: 2.6vw;
    }
    .fv-text{
        padding: 3.64vw 0 5.72vw 60vw;
    }
    .fv-profile{
        max-width: initial;
        font-size: 1.44vw;
    }
    .fv-comment{
        font-size: 1.9vw;
    }
}
@media (max-width:1198px) {
    .fv-text{
        padding: 1.4em 0 2.8em 64vw;
    }
    .fv-left{
        width: 75%;
    }
    .fv-accent{
        width: 330px;
    }
}
@media (max-width:988px) {
    .fv-accent{
        width: 300px;
    }
    .fv-heading{
        font-size: 1.8rem;
    }
}
@media (max-width:878px) {
    .fv-sec{
        display: flex;
        flex-direction: column;
    }
    .fv-left{
        width: 100%;
    }
    .fv-text{
        position: initial;
        padding-bottom: 2rem;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 1.4em 0 2.2em 0;
    }
    .fv-text--right{
        position: initial;
        transform: initial;
    }
    .fv-sec{
        flex-direction: column;
    }
    .sp-big{
        display: initial;
    }
    .pc-big{
        display: none;
    }
    .fv-comment{
        bottom: 60%;
        left: 10%;
    }
    .fv-profile{
        left: 10%;
    }
}
@media screen and (max-width: 769px) {

}
@media (max-width:560px) {
    .fv-comment{
        font-size: 4vw;
        left: 10%;
    }
    .fv-profile{
        font-size: 2.86vw;
        left: 10%;
    }
}



/* Call to Action */
.cta1{
    background-image: url("../img/kaleido.png");
    margin-top: 0;
}
.cta2{
    background-image: url("../img/penki.png");
}
.cta{
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 8rem 0;
}
.cta-h{
    text-align: center;
    font-size: 6rem;
    color: #1E3D74;
}
.cta-p{
    font-size: 1.78rem;
    margin: 1em auto 2em;
    color: #1E3D74;
    line-height: 1.6;
    font-weight: 500;
}
.cta-link{
    font-size: 2rem;
    background: linear-gradient(-255deg , #B88229 0%
        ,#FEEC85 39% ,#BA7C18 64% ,#EEBB4F 100%);
    padding: 0.6em 1.4em 0.6em 2em;
    box-shadow: 3px 3px 6px #646464;
    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 0.4em;
    align-items: center;
}
.cta-link::after{
    content: "";
    position: absolute;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    transform: translate(-50% , -50%);
    left: 50%;
    top: 50%;
    border: 2px solid #fff;
}
.link-left{
    text-shadow: 1px 2px 3px #B97C18;
    color: #fff;
}
.link-right{
    width: 1em;
    display: block;
}
.play-img{
    width: 100%;
}


/* このようなニーズにお応えできます！ */
.catch-sec{
    padding-top: 60px;
}
.catch-h{
    font-size: 2.15rem;
    color: #1E3D74;
    text-shadow: 4px 4px 4px rgba(0,0,0,0.25);
    font-weight: 600;
    text-align: center;
}
.catch-ul{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 58.2%;
    margin: 4.05rem 0 3.82rem;
    font-size: 1.25rem;
    position: relative;
    z-index: 2;
}
.catch-img{
    position: absolute;
    bottom: 48px;
    right: -5%;
    z-index: 0;
    width: 52%;
}
.catch-li{
    color: #f3f4f5;
    background-color: #1E3D74;
    padding: 10px 0 10px 4em;
    position: relative;
}
.catch-li::after{
    content:"";
    background-image: url("../img/clock.png");
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 2em;
    width: 1.25em;
    height: 1.25em;
    transform: translate(-50%,-50%);
}
.yellow{
    color: #D2C36F;
}
.catch-btm-h{
    font-size: 3rem;
    padding: 0.52em 2.5em 0.52em 4em;
    display: inline-block;
    position: relative;
    background-color: #1E3D74;
    color: #f3f4f5;
    font-weight: 900;
}
.catch-btm-h::after{
    content:"";
    background-image: url("../img/clock.png");
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 2.5em;
    width: 1.25em;
    height: 1.25em;
    transform: translate(-50%,-50%);
}
.catch-sec .inner{
    position: relative;
}

/* 1E3D74 */
.reason-sec{
    padding: 3.85rem 0;
}
.reason-ttl{
    width: 100%;
    text-align: center;
    margin-bottom: 3.85rem;
}
.reason-ttl-img{
    width: 100%;
    max-width: 960px;
}
.reasons{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 1070px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.reason-item{
    text-align: center;
    font-size: 1.25rem;
    width: 32%;
    max-width: 290px;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}
.reason-item-h
,.support-figcap{
    font-size: 1.32rem;
}
.reason-fig{
    font-size: 1.2em;
    background-color: #1E3D74;
    padding: 1.5em 0 2.5em 0;
}
.reason-figcap{
    color: #fff;
    margin-bottom: 2em;
}
.reason-fig-img{
    width: 4.2em;
}


/* 他者とはここが決定的に違います */
.point-sec{
    padding: 60px 0;
}
.point-h{
    text-align: center;
    font-size: 2.15rem;
    color: #1E3D74;
    text-shadow: 4px 4px 4px rgba(0,0,0,0.25);
    margin-bottom: 1.4em;
}
.point-h .wavy{
    letter-spacing: 0.1em;
    padding-left: 0.2em;
}
.point-tbl-wrap{
    margin: 0 auto;
    padding-bottom: 1rem;
}
.point-tbl-img{
    width: 100%;
}

/* CareerChannelのサポート体制の魅力 */
.support-sec{
    padding: 60px 0;
    text-align: center;
}
.support-inner{
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
}
.support-h{
    font-size: 2.15rem;
    color: #1E3D74;
    text-shadow: 4px 4px 4px rgba(0,0,0,0.25);
    margin-bottom: 1.12em;
}
.support-boxes{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 100px 100px;
}
@media (max-width:1010px) {
    .support-boxes{
        gap: 9vw;
    }
}
.support-box{
    height: 40vw;
    max-height: 400px;
    background-color: rgba(30,61,116,0.1);
    width: 40vw;
    max-width: 400px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-size: 1.25rem;
}
.support-box1
,.support-box3{
    gap: 60px;
}
.support-box2
,.support-box4{
    gap: 40px;
}
.support-figcap{
    line-height: 1.4;
}
.support-img1{
    width: 140px;
}
.support-img2{
    width: 100px;
}
.support-img3{
    width: 150px;
}
.support-img4{
    width: 100px;
}
.support-btm-ul{
    display: flex;
    flex-direction: column;
    width: 95%;
    max-width: 800px;
    margin: 0 auto 20px;
    gap:15px;
}
.support-btm-li{
    display: flex;
    flex-direction: row;
    gap: 0.4em;
}
.support-btm-li_num{
    font-size: 1.5rem;
    color: #fff;
    background-color: #1E3D74;
    height: 1.6em;
    width: 1.6em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.6em;
    min-width: 1.6em;
}
.support-btm-li_txt{
    font-size: 1.68rem;
    font-weight: 600;
    display: flex;
    flex-direction: row;
    gap: 10px;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: #D2C36F;
    text-decoration-thickness: 4px;
    
}
.support-bottom{
    padding: 60px 0;
}
.support-btm-h{
    font-size: 2rem;
    font-weight: 500;
    color: #1E3D74;
    margin-bottom: 1.62em;
}
.support-btm-p{
    font-size: 1.25rem;
    margin: 1em auto 2em;
    line-height: 1.8;
    max-width: 772px;
}
.support-btm-img{
    display: block;
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
}


/* 私たちが推薦します！ */
.recomm-sec{
    padding: 4.32rem 0 6.6rem;
    background-image: url("../img/Recommendation.png");
    background-size: cover;
}
.recomm-inner{
    width: 85%;
    max-width: 990px;
    margin: 0 auto;
    text-align: center;
}
.recomm-h{
    position: relative;
    display: inline-block;
    font-size: 2rem;
    margin: 0 auto 1.8em;
    font-weight: 900;
}
.recomm-txt{
    text-shadow: 4px 4px 6px rgba(0,0,0,0.4);
    position: relative;
    z-index: 2;
}
.recomm-txt::after{
    content: "私たちが推薦します！";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(180deg , #fff 0% , #D2C36F 100%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    position: absolute;
    z-index: 2;
}
.recomm-h-box{
    position: absolute;
    width: 140%;
    height: 0.6em;
    background-color: rgba(56,115,218,0.7);
    transform: translate(-50%,0%) rotate(-1deg);
    top: 75%;
    left: 50%;
}
.recomm-boxes{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.recomm-fig{
    width: 30%;
    max-width: 268px;
}
.recomm-img{
    width: 100%;
}
.recomm-figcap{
    text-align: left;
    color: #f5f5f5;
    padding: 1.2em 0.8em;
    line-height: 1.6;
}



@media (max-width:1080px) {
    html{
        font-size: 14px;
    }
}

@media (max-width:920px) {
    html{
        font-size: 14px;
    }
    .cta-h{
        font-size: 3.4rem;
    }
    .cta-p{
        font-size: 1.28rem;
    }
    .cta-link{
        font-size: 1.8rem;
    }
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
    .header-btm-ul{
        transform: initial;
    }
    header{
        padding-left: 2%;
    }
    .catch-h{
        font-size: 2.95rem;
    }
    .catch-btm-h{
        font-size: 1.8rem;
        width: 100%;
        text-align: center;
    }
    .catch-ul{
        width: 100%;
        font-size: 1.2rem;
    }
    .catch-img{
        position: initial;
        display: block;
        width: 100% ;
    }
    .support-btm-ul{
        width: 100%;
        padding: 0 1rem;
    }
    .point-tbl-img{
        width: 178vw;
        max-width: initial;
    }
    .support-box {
        height: 43vw;
        width: 43vw;
    }
    .support-boxes{
        gap: 4vw;
        flex-wrap: wrap;
        justify-content: center;
    }
    .header-left{
        font-size: 2.25rem;
    }
    .header-btm-ul{
        font-size: 1.5rem;
        gap: 0.8em;
    }
    .support-img1{
        width: 17.3vw;
    }
    .support-img2{
        width: 12.3vw;
    }
    .support-img3{
        width: 18.5vw;
    }
    .support-img4{
        width: 12.3vw;
    }
    .inner , .support-inner{
        width: 92.5%;
    }
    form{
        width: 100%;
    }
    .form-btn,.cta-link,.support-btm-h{
        font-size: 1.8rem;
    }
    .recomm-h{
        font-size: 1.8rem;
    }
    .recomm-figcap{
        font-size: 1.2rem;
    }
    .catch-h,.point-h,.support-h
    ,.footer-h,.form-h{
        font-size: 2rem;
    }
    .footer-p{
        font-size: 1.95rem;
    }
    .cta-link{
        width: 92.5%;
        justify-content: center;
    }
    .support-btm-li_num{
        font-size: 0.9rem;
    }
    .support-btm-li_txt{
        font-size: 1rem;
    }
}
@media (max-width:768px) {
    .recomm-boxes{
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5.2rem;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .th-gold{
        padding: 1.28em 0;
    }
    .th-gold::before{
        height: calc(14.72em + 4px);
    }
    .support-box{
        padding: 2em 0;
        width: 100%;
        height: auto;
        gap: 2em;
        max-height: initial;
    }
    .cta-h{
        font-size: 2.8rem;
    }
    .cta-p{
        font-size: 1.18rem;
    }
    .support-img{
        width: 35%;
    }
    .recomm-fig{
        max-width: 252px;
        width: 100%;
    }
    .support-btm-li_txt::after {
        height: 4px;
        bottom: 0;
    }
    .reasons{
        gap: 4rem;
    }
    .reasons{
        justify-content: center;
    }
    .reason-item{
        width: 100%;
        max-width: 264px;
    }
    thead th{
        font-size: 16px;
    }
    td,th{
        font-size: 11px;
        line-height: 1rem;
    }
    .td1-1,.td2-1{
        padding: 1.58em 0.6em ;
    }
    .td1-2,.td2-2{
        padding: 2.26em 0.6em;
    }
    .td1-3,.td2-3{
        padding: 1.62em 0.6em;
    }
    .appeal-tbl2 th{
        padding: 1.24em 0.6em;
    }
    .catch-ul{
        font-size: 1rem;
    }
    .catch-li{
        padding: 10px 10px 10px 3.2em;
    }
    .catch-li::after{
        left: 1.8em;
        top: 51.5%;
    }
    .catch-btm-h{
        font-size: 1.68rem;
        padding: 0.36em 1em 0.36em 2.4em;
    }
    .catch-btm-h::after{
        width: 1.15em;
        height: 1.15em;
        left: 1.9em;
    }
}