/*common START*/

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

img, a {
  user-drag: none;         /* Chrome, Safari用 */
  -webkit-user-drag: none; /* 古いSafari用 */
  -khtml-user-drag: none;  /* 古いKonqueror用 */
}

@font-face {
    font-family: 'NotoSansJP';
    src: url('../font/NotoSansJP-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LieToMe';
    src: url('../font/LieToMe.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'NotoSansJP';
}

#wrapper {
    overflow: hidden;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.center {
    text-align: center;
}

a {
    text-decoration: none;
}

h2 {
    font-weight: 500;
}

/*common END*/

/*******************************/
/*******************************/

header {
    background: #fff;
    width: 585px;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 9999;
    border-radius: 75px;
    top: 7.5%;
    left: 50%;
    transform: translate(-50%, -50%);
}

header a {
    text-decoration: none;
    color: #000;
    font-size: 1.6rem;
}

header a {
    margin-right: 3%;
}

header a:first-child {
    color: #004b9d;
    font-weight: 700;
    line-height: 1;
}

/*mv START*/

.mv {
    background: url("../img/mv_bg.jpg") center/cover no-repeat;
    width: 100%;
    height: 730px;
}

.main_copy {
    top: 25%;
    right: 10%;
}

.sub_copy {
    top: 65%;
    right: 11.2%;
}

.sub_copy p {
    font-size: 3.2rem;
    font-weight: 700;
    color: #fff;
    text-shadow: -3.54px 3.54px 5px rgba(136, 136, 136, 0.5);
}

.jrathlete_logo {
    top: 5%;
    left: 2.5%;
}

/*mv END*/

/*******************************/
/*******************************/

/*message START*/

.message {
    width: 90%;
    margin: 0 auto;
    margin-top: 100px;
}

.message_container {
    background: #004b9d;
    padding: 100px 0;
}

.message_container h2 {
    margin-bottom: 30px;
}

.message_container p {
    color: #fff;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.5;
}

/*message END*/

/*******************************/
/*******************************/

/*interview START*/

.interview {
    width: 90%;
    margin: 0 auto;
    margin-top: 100px;
}

.interview_container {
    background: #fff;
    position: relative;
}

.interview_container h2 {
    margin-bottom: 30px;
}

.interview_container p.u_h2 {
    font-size: 3.2rem;
    font-weight: 500;
    margin-bottom: 40px;
}

.interview_container .overlay p {
    font-size: 2rem;
    font-weight: 500;
    position: absolute;
    bottom: 20%;
    left: 5%;
    right: 5%;
}

@media screen and (max-width:767px) {
.interview_container .overlay p {
    font-weight: 500;
    position: absolute;
    bottom: 25%!important;
    left: 5%;
    right: 5%;
}
}

.interview_container h3 {
    font-size: 24px;
    font-weight: 700;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 4vh;
    text-align: center;
}


.interview_inner {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    opacity: 1;
    transform: translateY(20px);

}


.card {
    width:100%;
    height: 80vh;
    flex: 1;
}

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

    transition: transform 0.4s ease;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 60%);
}

.overlay {
  pointer-events: none;
}

/*
.interview_inner.visible {
    opacity: 1;
    transform: translateY(0);
}

.card:hover img {
    transform: scale(1.2);
}


  */

/*interview END*/

/*******************************/
/*******************************/

/*contactsec START*/
.contactsec {
    background: url("../img/contactsec_bg.jpg") center/cover no-repeat;
    width: 100%;
    padding: 100px 0;
}

.contactsec h2 {
    margin-bottom: 30px;
}

.contactsec p {
    color: #fff;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 50px;
}

.contact_btn {
    width: 300px;
    height: 50px;
    margin: 0 auto;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    border-radius: 25px;
}

.contact_container {
    text-align: center;
}

.contact_container a {
    display: inline-block;
    color: #000;
}

/*contactsec END*/

/*pre-footer START*/
.pre-footer {
    background: #004b9d;
    padding: 60px 0;
}

.pre-footer_container {
    width: 90%;
    margin: 0 auto;
}

.pre-footer_inner {
    display: flex;
    width: 100%;
}

.pre-footer_container .left,
.pre-footer_container .right {
    width: 50%;
}

.pre-footer_container .left img {
    display: block;
}

.pre-footer_container .left img:first-child {
    margin-bottom: 40px;
}

.pre-footer_container .right a {
    color: #fff;
    display: block;
    text-decoration: none;
    font-size: 1.6rem;
    line-height: 2;
}

/*pre-footer END*/

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    color: #004b9d;
    font-weight: 500;
}

@media screen and (max-width:1240px) {
    .interview_container h3 {
        font-size: 2rem;
        ;
    }
}

@media screen and (max-width:1040px) {
    .interview_container h3 {
        font-size: 1.4rem;
    }
}

@media screen and (min-width:767px) {
    .sp_only {
        display: none;
    }
}

@media screen and (max-width:767px) {
    .pc_only {
        display: none;
    }

    .sp_only {
        display: block;
        position: relative;
        z-index: 99999;
    }

    .mv {
        background-image: url('../img/mv_bg_sp.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        aspect-ratio: 4 / 3;
        width: 100%;
        height: auto;
    }

    .main_copy,
    .sub_copy {
        display: none;
    }

    .jrathlete_logo {
        width: 30%;
    }

    h2 {
        width: 85%;
        margin: 0 auto;
    }

    h2 img {
        width: 100%;
    }

    .hamburger-morph {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1000;
        width: 48px;
        height: 48px;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
    }

    .hamburger-morph__icon {
        width: 100%;
        height: 100%;
    }

    .hamburger-morph__line {
        fill: none;
        stroke: #fff;
        stroke-width: 6;
        transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
            stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hamburger-morph__line:nth-child(1) {
        stroke-dasharray: 60 207;
    }

    .hamburger-morph__line:nth-child(2) {
        stroke-dasharray: 60 60;
    }

    .hamburger-morph__line:nth-child(3) {
        stroke-dasharray: 60 207;
    }

    .hamburger-morph.active .hamburger-morph__line:nth-child(1) {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
    }

    .hamburger-morph.active .hamburger-morph__line:nth-child(2) {
        stroke-dasharray: 1 60;
        stroke-dashoffset: -30;
    }

    .hamburger-morph.active .hamburger-morph__line:nth-child(3) {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
    }

    .nav-morph {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 75, 157, 0.8);
        clip-path: circle(0% at calc(100% - 44px) 44px);
        transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 900;
    }

    .nav-morph.active {
        clip-path: circle(150% at calc(100% - 44px) 44px);
    }

    .nav-morph__wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .nav-morph__list {
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
    }

    .nav-morph__item {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .nav-morph.active .nav-morph__item {
        opacity: 1;
        transform: translateY(0);
    }

    .nav-morph.active .nav-morph__item:nth-child(1) {
        transition-delay: 0.3s;
    }

    .nav-morph.active .nav-morph__item:nth-child(2) {
        transition-delay: 0.4s;
    }

    .nav-morph.active .nav-morph__item:nth-child(3) {
        transition-delay: 0.5s;
    }

    .nav-morph.active .nav-morph__item:nth-child(4) {
        transition-delay: 0.6s;
    }

    .nav-morph__link {
        position: relative;
        display: inline-block;
        padding: 20px;
        font-size: 28px;
        color: #fff;
        text-decoration: none;
        overflow: hidden;
    }

    /*message START*/

    .message {
        width: 90%;
        margin: 0 auto;
        margin-top: 50px;
    }

    .message_container {
        padding: 7.5%;
    }

    .message_container h2 {
        margin-bottom: 15px;
    }

    .message_container p {
        color: #fff;
        font-size: 1.6rem;
        font-weight: 500;
        line-height: 1.5;
    }

    /*message END*/

    /*interview START*/
    .interview_container p.u_h2 {
        font-size: 1.6rem;
    }

    .interview {
        margin-top: 50px;
    }

    .interview_inner {
        margin-bottom: 50px;
    }

    .interview_inner .card p {
        font-size: 1.6rem;
        bottom: 20%;
    }


/*interview START*/

.interview {
    width: 90%;
    margin: 0 auto;
    margin-top: 100px;
}

.interview_container {
    background: #fff;
    position: relative;
}

.interview_container h2 {
    margin-bottom: 30px;
}

.interview_container p.u_h2 {
    font-size: 3.2rem;
    font-weight: 500;
    margin-bottom: 40px;
}

.interview_container .overlay p {
    font-size: 2rem;
    font-weight: 500;
    position: absolute;
    bottom: 20%;
    left: 5%;
    right: 5%;
}

@media screen and (max-width:767px) {
.interview_container .overlay p {
    font-weight: 500;
    position: absolute;
    bottom: 25%!important;
    left: 5%;
    right: 5%;
}
}

.interview_container h3 {
    font-size: 24px;
    font-weight: 700;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 4vh;
    text-align: center;
}


.interview_inner {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    opacity: 1;
    transform: translateY(20px);

}

.card {
    width:100%;
    height: 80vh;
    flex: 1;
}

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

    transition: transform 0.4s ease;
}
/*
.interview_inner.visible {
    opacity: 1;
    transform: translateY(0);
}




.card:hover img {
    transform: scale(1.2);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 60%);
    transition: background 0.4s ease;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.card:hover .overlay {
  background: none;
}
  */

    /*interview END*/

    .pre-footer_inner {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }

    .pre-footer_container .left,
    .pre-footer_container .right {
        width: 48%;
    }

    .pre-footer_container .left img,
    .pre-footer_container .right img {
        width: 100%;
    }



}


.profile p {
    margin-bottom: 2%;
}

@media screen and (max-width:767px) {
    .jrathlete_logo {
        width: 30%;
    }

    .jrathlete_logo img {
        width: 100%;
    }

    .profile p {
        margin-bottom: 4%;
    }
}

.profile p span {
    font-weight: 700;
}





.hero_sec {
    background: #c6c0ad;
    position: relative;
    height: 450px;
}

.hero_sec h1 {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 5.6rem;
    color: #fff;
    text-shadow: 3px 3px 5px rgba(14, 51, 29, 0.5);
    z-index:999999;
}

@media screen and (max-width:767px) {
.hero_sec h1 {
    font-size: 3.2rem!important;
}

.hero_sec {
    background: none;
    position: relative;
    height: auto;
}

.hero_sec img {
    width:100%;
    margin:0 auto;
    position: static!important;
    margin-top:5%;
}

}

@media screen and (max-width:500px) {
.hero_sec h1 {
    font-size: 2rem!important;
}

}

.hero_sec h1 span {
    font-size: 4.8rem;
}

.hero_sec img {
    position: absolute;
    right: 5%;
    bottom: 0%;
    z-index: 5000
}


.hero_sec div {
    background: #fff;
    color: #000;
    padding: .5%;
}

.hero_sec div.name {
    position: absolute;
    right: 2.5%;
    bottom: 17.5%;
    font-size: 3.2rem;
    z-index: 99995;
}

.hero_sec div.name span {
    font-size: 2rem;
}

.hero_sec div.activity {
    position: absolute;
    right: 2.5%;
    bottom: 5%;
    font-size: 2rem;
    z-index: 99995;
}

.breadcrumb {
    margin-top: 2.5%;
}



.card-wrapper {
  perspective: 1000px;
  width: 100%;
  height: 36vw;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card-wrapper:hover .card {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  top: 0;
  left: 0;
}

.card-face.front {
  z-index: 2;
}

.card-face.back {
  transform: rotateY(180deg);
}

.overlay p , .overlay h3 {color:#fff;}

.interview_container .overlay h3 {
    font-size: 2.4rem;
    font-weight: 500;
    position: absolute;
    top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.breadcrumb {margin-top:2.5%!important;}


@media screen and (max-width:767px) {

.interview_inner {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    opacity: 1;
    transform: translateY(20px);
}

.card-wrapper {
    perspective: 1000px;
    width: 100%;
    height: 150vw;
    margin-bottom:5%;
} 

.overlay {
    width: 100%;
}

}

@media screen and (max-width: 767px) {
  .interview_inner {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* カード間の余白 */
  }

  .interview_inner .card {
    flex: 1 1 50%; /* 2列 */
    max-width: 47%;
    box-sizing: border-box; /* 幅計算の安全対策 */
  }

  .card-face {
    position: absolute;
    width: 210%;
    height: 100%;
    backface-visibility: hidden;
    top: 0;
    left

}

}

@media screen and (max-width: 767px) {

/* カードラッパー（透視距離） */
.card-wrapper {
  perspective: 1000px;
  width: 100%;
  height: 100vw; /* 高さは幅の1.5倍くらいで調整 */
  margin-bottom: 5%;
  position: relative;
}

/* カード本体 */
.card {
  width: 100%;
  height: 100vw;
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  cursor: pointer;
}

/* ホバーまたはタップ時の回転 */
.card-wrapper:hover .card,
.card-wrapper:focus .card,
.card-wrapper.active .card {
  transform: rotateY(180deg);
}

/* 表・裏の両面 */
.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  top: 0;
  left: 0;
}

/* 表面 */
.card-face.front {
  z-index: 2;
}

/* 裏面 */
.card-face.back {
  transform: rotateY(180deg);
}

/* スマホ用調整（幅制限など） */

  .interview_inner {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .interview_inner .card-wrapper {
    flex: 1 1 48%; /* 2列表示 */
    max-width: 100%;
    box-sizing: border-box;
  }

  .card-face {
    width: 100%; /* 210%は逆効果なので100%に修正 */
    height: 100%;
  }

  .card img {
    width: 213%;

}

.hero_sec h1 {
    position: absolute;
    left: 5%;
    top: 57.5%;
    transform: translateY(-50%);
    font-size: 3.2rem;
    color: #fff;
    text-shadow: 3px 3px 5px rgba(10, 30, 20, 0.8);
z-index:4999;
}

.overlay p {font-size:1.6rem!important;}

.overlay h3 {font-size:2rem!important;}

.contactsec p  {font-size:1.6rem!important;
padding:0 5%!important;}

.hero_sec div.name {
    position: absolute;
    right: 2.5%;
    bottom: 15%;
    font-size: 2rem;
    z-index: 99995;
}

.hero_sec div.activity {
    position: absolute;
    right: 2.5%;
    bottom: 5%;
    font-size: 1.6rem;
    z-index: 99995;
}

.totoppage {color:#fff;
font-size:2.4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 90%);
font-weight:700;
}

}


.cta_sec {background: #004b9d;
padding:5% 0;
position:relative;
padding-bottom:10%;}

.cta_sec h4 {color:#fff;
font-size:3.2rem;
margin-bottom:2%;}

.cta_sec div {color:#fff;
font-size:1.6rem;
margin-bottom:2%;}

.cta_sec a {background: #fff;
padding:1%;
margin-bottom:2%;}

.cta_sec p {font-size:2.4rem;
color:#fff;}

@media screen and (max-width:767px) {
.cta_sec p {font-size:2rem;}

.cta_sec {
padding-bottom:30%;}


}

.cta_sec h4 {font-size:2rem;}

.btn_box {
    width: 90%;
}

.btn_box{
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width:400px;
}

#btn_animation .btn {
  display: block;
  position: relative;
  padding:2%;
  line-height: 78px;
  font-size: 24px;
  text-decoration: none;
  background-color: #c6c0ad;
  color: #fbfbfb;
  text-align: center;
  overflow: hidden;
  border-radius:125px;
}

@media screen and (max-width:767px) {
#btn_animation .btn {
  line-height: 50px;
}
}

#btn_animation .btn:hover {
    text-decoration: none;
    color: #fbfbfb;
}

#btn_animation .btn::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    padding:2%;
    height: 100%;
    background-color: #fbfbfb;
    animation: btn_animation 2.5s ease-in-out infinite;
}

@-webkit-keyframes btn_animation {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}





@media screen and (max-width:767px) {
.btn_box {
  width:90%;
margin:0 auto;
padding:1%;
}

.btn_box a {
font-size:1.4rem;
font-weight:700;
}

.overlay h3 {font-size:1.4rem!important;}

}





.overlay p {top:75;
font-size:1.6rem!important;}

.overlay h3 {top:85;
font-size:2rem!important;}

@media screen and (max-width:767px) {
.overlay p {top:50%!important;
font-size:1.4rem!important;
font-weight:300!important;}

.overlay h3 {top:85%!important;
font-size:1.4rem!important;}
}