@charset "UTF-8";


/* -- font
-------------------------------------------------------------------------------- */
@font-face {
    font-family: 'NotoSansJapanese';
    src: url('/special/youngpioneers/css/font/NotoSansCJKjp-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSansJapanese';
    src: url('/special/youngpioneers/css/font/NotoSansCJKjp-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Europa';
    src: url('/special/youngpioneers/css/font/Europa-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Europa';
    src: url('/special/youngpioneers/css/font/Europa-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}


/* -- Base and Reset
-------------------------------------------------------------------------------- */
html {
    font-size: 16px;
}
body,html {
	width: 100%;
}
body {
	font: 1rem/1.6 'Europa', 'NotoSansJapanese', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
	text-align: left;
    color: #1a1a1a;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
}
caption,th,td {
	font-weight: normal;
	text-align: left;
}
input,textarea,select {
	font-family: 'Europa', 'NotoSansJapanese', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
	vertical-align: middle;
}
textarea {
	resize: vertical;
}
h1,h2,h3,h4,h5,h6 { font-size: 100%; }
ul,ol { list-style: none; }
fieldset,img { border: 0; vertical-align: top; }
iframe {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
input{
    color:#333;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
label{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
a{
    text-decoration:none;
    color:inherit;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
a:focus{
    outline:none;
}
select::-ms-expand {
    display: none;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -webkit-touch-callout;
    font-feature-settings: "palt";
}
.pc-hide{
    display: none;
}
html {
    min-width: 1200px;
}
@media (min-width: 1700px){
    html {
        font-size: 17px;
    }
}
@media (max-width: 767px){
    html {
        font-size: 13px;
        min-width: auto;
    }
    .pc-hide{
        display: block;
    }
    .sp-hide{
        display: none;
    }
}
@media (max-width: 374px){
    html {
        font-size: 12px;
    }
}


/* --  page-cover
-------------------------------------------------------------------------------- */
.page-cover{
    position: fixed;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: #7e929c;
    transition: width 0.5s ease;
    z-index: 100;
    pointer-events: none;
}
.barba .page-cover{
    width: 100%;
    left: 0;
    right: auto;
}


/* --  .wrapper
-------------------------------------------------------------------------------- */
.wrapper{
    width: 100%;
    overflow: hidden;
}
.barba .wrapper .wrapper-inner{
    transition: 0.5s ease;
}
.barba.left .wrapper .wrapper-inner{
    transform: translateX(-6.25rem);
    transition: 0s;
}
.barba.right .wrapper .wrapper-inner{
    transform: translateX(6.25rem);
}
body:not(.barba).left .wrapper .wrapper-inner{
    transition: 0.5s ease;
}


/* --  scroll-fade
-------------------------------------------------------------------------------- */
.scroll-fade{
    opacity: 0;
    transform: translateY(2.5rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-fade.show{
    opacity: 1;
    transform: translateY(0);
}
.scroll-fade.txt-fade{
    opacity: 1;
    transform: translateY(0);
    display: inline-block;
}
.scroll-fade.txt-fade::before{
    content: "";
    display: block;
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #7e929c;
}
.scroll-fade.txt-fade.show::before{
    animation: txtFadeIn 0.6s ease forwards;
}
@keyframes txtFadeIn {
    0% {
        width: 0%;
        left: 0;
    }
    50% {
        width: 100%;
        left: 0;
    }
    100% {
        width: 0%;
        left: 100%;
    }
}
.scroll-fade.txt-fade .txt-fade-inner{
    opacity: 0;
    transition: opacity 0s 0.3s;
}
.scroll-fade.txt-fade.show .txt-fade-inner{
    opacity: 1;
}


/* -- ex-link
-------------------------------------------------------------------------------- */
.ex-link::after{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0.625rem;
    height: 0.625rem;
    background: url(/special/youngpioneers/img/ico_ex.svg) no-repeat;
    background-size: contain;
    transform: translateY(-0.125rem);
    margin-left: 0.5em;
}
.ex-link.wh::after{
    background-image: url(/special/youngpioneers/img/ico_ex_wh.svg);
}


/* -- header
-------------------------------------------------------------------------------- */
header{
    width: 100%;
    min-width: 1200px;
    padding: calc(1.875rem + 1rem) calc(1.875rem + 1rem) 0;
    box-sizing: border-box;
    position: absolute;
    display: flex;
    justify-content: space-between;
    z-index: 2;
}
header .logo{
    display: block;
    height: 2.5rem;
}
header .logo img{
    height: 100%;
}
header .logo-ynu{
    display: block;
    height: 1.125rem;
}
header .logo-ynu img{
    height: 100%;
}
@media (max-width: 767px){
    header {
        min-width: auto;
        padding: calc(1.25rem + 1rem) calc(1.25rem + 1rem) 0;
    }
}


/* -- main-visual
-------------------------------------------------------------------------------- */
.main-visual{
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    border-top: solid 1rem #7e929c;
    border-left: solid 1rem #7e929c;
    border-right: solid 1rem #7e929c;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.main-visual .inner{
    font-size: 1.125rem;
    position: relative;
    padding: 11.25vw 0;
    z-index: 1;
}
.main-visual .ttl{
    width: calc(6.75em * 4);
    height: 6.75em;
    text-align: center;
    position: relative;
    margin: 0 auto;
}
.main-visual .ttl .mark{
    position: absolute;
}
.main-visual .ttl .mark.mark-1{
    height: 100%;
    top: 0;
    left: 0;
}
.main-visual .ttl .mark.mark-2{
    height: 33%;
    left: 38.31775%;
    top: 24.75%;
    overflow: hidden;
}
.main-visual .ttl .mark.mark-3{
    height: 33%;
    left: 39%;
    top: 67.376%;
    overflow: hidden;
}
.main-visual .ttl .mark img{
    height: 100%;
    transition: transform 0.6s ease, opacity 0.6s ease;
}
.main-visual .ttl .mark.mark-1 img{
    transform: scale(1.15);
    opacity: 0;
}
.main-visual .ttl .mark.mark-2 img,
.main-visual .ttl .mark.mark-3 img{
    transform: translateY(100%);
}
.main-visual .ttl .mark.mark-3 img{
    transition-delay: 0.1s;
}
.main-visual.active .ttl .mark.mark-1 img{
    transform: scale(1);
    opacity: 1;
}
.main-visual.active .ttl .mark.mark-2 img,
.main-visual.active .ttl .mark.mark-3 img{
    transform: translateY(0);
}
.main-visual .ttl img{
    width: auto;
    height: 100%;
}
/* ieハック */
@media all and (-ms-high-contrast: none){
    .main-visual .ttl .mark img{
        height: auto;
    }
    .main-visual .ttl img{
        height: auto;
    }
}
.main-visual .sub-ttl{
    font-size: 1.5em;
    letter-spacing: 0.16em;
    margin-top: 1.25em;
    text-align: center;
}
.main-visual .sub-ttl .scroll-fade.txt-fade.show::before{
    animation-delay: 0.2s;
}
.main-visual .sub-ttl .scroll-fade.txt-fade .txt-fade-inner{
    transition-delay: 0.5s;
}
.main-visual .lead{
    font-size: 1rem;
    letter-spacing: 0.12em;
    line-height: 1.8;
    text-align: center;
    position: relative;
    padding-top: calc(2.8125rem + 1.5625rem);
    margin-top: 1.5625rem;
}
.main-visual .lead::before,
.main-visual .lead::after{
    content: "";
    display: block;
    width: 3px;
    height: 2.5rem;
    background: #1a1a1a;
    transform: translateX(-50%) rotate(45deg);
    position: absolute;
    top: 0;
    left: 50%;
}
.main-visual .lead::after{
    transform: translateX(-50%) rotate(-45deg);
}
.main-visual .svg,
.main-head .svg{
    width: 6.25rem;
    height: 6.25rem;
    position: absolute;
    bottom: 0;
    left: calc(75vw - 1.5rem);
    transform: translate(-50%, 50%);
    transition: opacity 0.3s ease 0.3s;
    z-index: 2;
}
.main-head .svg{
    top: 0;
    left: calc(75vw - 0.5rem);
    bottom: auto;
    transform: translate(-50%, -50%);
}
.main-visual .svg img,
.main-head .svg img{
	animation: rotate 30s linear infinite;
}
.bg-line{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.bg-line span{
    display: block;
    height: 100%;
    border-left: solid 1px rgba(0,0,0,0.07);
    position: absolute;
    top: 0;
}
.bg-line span.line-1{
    left: 25%;
}
.bg-line span.line-2{
    left: 50%;
}
.bg-line span.line-3{
    left: 75%;
}
@media (max-width: 767px){
    .main-visual .inner {
        font-size: 0.75em;
        padding: 10rem 0 6.25rem;
    }
}


/* -- bg-imgs
-------------------------------------------------------------------------------- */
.main-visual .bg-imgs{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.main-visual .bg-imgs .bg-img{
    position: absolute;
}
.main-visual .bg-imgs .bg-img p{
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    overflow: hidden;
    transition: width 0.6s ease;
}
.main-visual .bg-imgs .bg-img p.active{
    width: 100%;
}
.main-visual .bg-imgs .bg-img p.disable{
    width: 0%;
    left: auto;
    right: 0;
}
.main-visual .bg-imgs .bg-img span{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transform: scale(1.25);
    transition: transform 1.2s ease;
}
.main-visual .bg-imgs .bg-img p.active span{
    transform: scale(1);
}
.main-visual .bg-imgs .bg-img p.disable span{
    transform: scale(1.25);
    left: auto;
    right: 0;
}
.main-visual .bg-imgs .bg-img.img-1{
    top: 20%;
    left: 6%;
    width: 16vw;
    height: 22vw;
}
.main-visual .bg-imgs .bg-img.img-1 span{
    width: 16vw;
}
.main-visual .bg-imgs .bg-img.img-2{
    top: 32%;
    left: 0;
    width: 9vw;
    height: 12.375vw;
    z-index: 1;
}
.main-visual .bg-imgs .bg-img.img-2 span{
    width: 9vw;
}
.main-visual .bg-imgs .bg-img.img-3{
    bottom: 0;
    left: 15%;
    width: 13vw;
    height: 17.875vw;
    z-index: 1;
}
.main-visual .bg-imgs .bg-img.img-3 span{
    width: 13vw;
}
.main-visual .bg-imgs .bg-img.img-4{
    top: 0;
    right: 6%;
    width: 16vw;
    height: 22vw;
}
.main-visual .bg-imgs .bg-img.img-4 span{
    width: 16vw;
}
.main-visual .bg-imgs .bg-img.img-5{
    top: 40%;
    right: 0;
    width: 10vw;
    height: 13.75vw;
    z-index: 1;
}
.main-visual .bg-imgs .bg-img.img-5 span{
    width: 10vw;
}
.main-visual .bg-imgs .bg-img.img-6{
    bottom: 6%;
    right: 16%;
    width: 11vw;
    height: 15.125vw;
    z-index: 1;
}
.main-visual .bg-imgs .bg-img.img-6 span{
    width: 11vw;
}
.main-visual .bg-imgs {
    top: 0;
    height: 100%;
}
@media (max-width: 767px){
    .main-visual .bg-imgs {
        top: 5rem;
        height: 18.75rem;
    }
    .main-visual .bg-imgs .bg-img.img-1{
        top: 10%;
        width: 13vw;
        height: 17.875vw;
    }
    .main-visual .bg-imgs .bg-img.img-1 span{
        width: 13vw;
    }
    .main-visual .bg-imgs .bg-img.img-3{
        left: 10%;
        width: 16vw;
        height: 22vw;
    }
    .main-visual .bg-imgs .bg-img.img-3 span{
        width: 16vw;
    }
    .main-visual .bg-imgs .bg-img.img-6 {
        right: 15%;
    }
}


/* -- main-head
-------------------------------------------------------------------------------- */
.main-head {
    padding: 5rem 7% 5rem 10%;
    background: #7e929c;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.main-head .main-ttl{
    font-size: 1.75rem;
    letter-spacing: 0.07em;
    line-height: 1;
}
.main-head .main-ttl span{
    display: block;
    font-size: 0.875rem;
    letter-spacing: 0.07em;
    font-weight: normal;
    margin-top: 0.9375rem;
}
.main-head .sort {
    position: relative;
}
.main-head .sort::after {
    content: "";
    display: block;
    border: 1px solid rgba(255,255,255,0.5);
    border-right: 0;
    border-top: 0;
    width: 0.5rem;
    height: 0.5rem;
    pointer-events: none;
    position: absolute;
    transform: rotate(-45deg);
    margin-top: -0.4375rem;
    right: 1.5625rem;
    top: 50%;
}
.main-head .sort select {
    -moz-appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    align-items: center;
    border: none;
    position: relative;
    vertical-align: top;
    width: 100%;
    height: 3.75rem;
    font-size: 0.9375rem;
    letter-spacing: 0.07em;
    line-height: 1.8;
    padding-left: 1.5625rem;
    border-radius: 1.875rem;
    box-shadow: none;
    background-color: #64747c;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    display: block;
    outline: none;
    padding-right: 3.75rem;
}
.main-head .sort.active select {
    color: #fff;
}
.main-head .sort select option {
    display: none;
}
.main-head .sort select option.show {
    display: block;
}
@media (max-width: 767px){
    .main-visual .svg, .main-head .svg {
        left: auto;
        right: 0;
    }
    .main-visual .svg {
        right: -1rem;
    }
}
@media (max-width: 767px){
    .main-head {
        display: block;
        padding: 3.75rem 12.5%;
    }
    .main-head .sort {
        margin-top: 2.5rem;
    }
}


/* -- interview-box
-------------------------------------------------------------------------------- */
.interview-box-list{
    width: 100%;
    min-height: 500px;
    box-sizing: border-box;
    padding: 0 0 6.25rem 0;
    position: relative;
    background: #7e929c;
}
.interview-box-list::before{
    content: "";
    display: block;
    width: 100%;
    height: calc(100% - 10rem);
    position: absolute;
    left: 0;
    top: 10rem;
    background: #f3f3f0;
}
.interview-box-list .interview-box-list-inner{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    position: relative;
    margin-left: -1px;
    padding-right: 7%;
    margin-top: -3.75rem;
}
.interview-box{
    display: block;
    width: 33.3%;
    box-sizing: border-box;
    padding-left: 1px;
    position: relative;
    margin-top: 3.75rem;
}
.interview-box{
    width: 33.3%;
}
.interview-box:nth-child(3n+2){
    transition-delay: 0.1s;
}
.interview-box:nth-child(3n+3){
    transition-delay: 0.2s;
}
.interview-box .interview-box-inner{
    height: 100%;
}
.interview-box a{
    display: block;
    height: 100%;
}
.interview-box a .box-block{
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* ieハック */
@media all and (-ms-high-contrast: none){
    .interview-box a .box-block{
        display: block;
    }
}
.interview-box .img{
    width: 100%;
    padding-top: 62.5%;
    position: relative;
    overflow: hidden;
}
.interview-box .img .cover{
    width: 100%;
    height: 0%;
    position: absolute;
    top: 0;
    left: 0;
    background: #999;
    z-index: 1;
    transition: height 0.3s ease;
}
.interview-box.col-1 .img .cover{
    background: rgba(114, 177, 45, 0.8);
}
.interview-box.col-2 .img .cover{
    background: rgba(194, 46, 107, 0.8);
}
.interview-box.col-3 .img .cover{
    background: rgba(201, 154, 6, 0.8);
}
.interview-box.col-4 .img .cover{
    background: rgba(0, 170, 174, 0.8);
}
.interview-box.col-5 .img .cover{
    background: rgba(197, 156, 255, 0.8);
}
.interview-box.col-6 .img .cover{
    background: rgba(114, 177, 45, 0.8);
}
.interview-box.col-7 .img .cover{
    background: rgba(226, 113, 2, 0.8);
}
.interview-box.col-8 .img .cover{
    background: rgba(0, 133, 206, 0.8);
}
.interview-box.col-9 .img .cover{
    background: rgba(0, 153, 81, 0.8);
}
.interview-box.col-10 .img .cover{
    background: rgba(34, 48, 79, 0.8);
}
.interview-box.col-11 .img .cover{
    background: rgba(255, 117, 195, 0.8);
}
.interview-box .img .pic{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 0.5s ease;
}
.interview-box .img .more{
    font-size: 0.8125rem;
    letter-spacing: 0.07em;
    font-weight: bold;
    line-height: 1;
    height: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color:#fff;
    overflow: hidden;
}
.interview-box .img .more span{
    display: block;
    transform: translateY(1em);
}
@media (min-width: 1024px){
    .interview-box a:hover .img .cover{
        height: 100%;
        top: auto;
        bottom: 0;
    }
    .interview-box a:hover .img .pic{
        transform: scale(1.1);
    }
    .interview-box a:hover .img .more span{
        transform: translateY(0);
        transition: transform 0.3s ease 0.2s;
    }
}
.interview-box .ttl-box{
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    position: relative;
}
.interview-box .ttl-box .vol{
    font-size: 0.875rem;
    letter-spacing: 0.07em;
    font-weight: bold;
    margin-bottom: 0.625rem;
}
.interview-box.col-1 .ttl-box .vol{
    color: #72b12d;
}
.interview-box.col-2 .ttl-box .vol{
    color: #c22e6b;
}
.interview-box.col-3 .ttl-box .vol{
    color: #c99a06;
}
.interview-box.col-4 .ttl-box .vol{
    color: #00aaae;
}
.interview-box.col-5 .ttl-box .vol{
    color: #c59cff;
}
.interview-box.col-6 .ttl-box .vol{
    color: #72b12d;
}
.interview-box.col-7 .ttl-box .vol{
    color: #e27102;
}
.interview-box.col-8 .ttl-box .vol{
    color: #0085ce;
}
.interview-box.col-9 .ttl-box .vol{
    color: #009951;
}
.interview-box.col-10 .ttl-box .vol{
    color: #22304f;
}
.interview-box.col-11 .ttl-box .vol{
    color: #ff75c3;
}
.interview-box .ttl{
    font-size: 1.25rem;
    line-height: 1.6;
    letter-spacing: 0.07em;
    margin-bottom: 1.5625rem;
}
.interview-box .position{
    font-size: 0.8125rem;
    letter-spacing: 0.07em;
}
.interview-box .position p + p{
    margin-top: 0.2em;
}
.interview-box .position span{
    font-weight: bold;
}
.interview-box .date{
    font-size: 0.75rem;
    letter-spacing: 0.07em;
    color: #999;
    font-weight: bold;
    margin-top: 0.3125rem;
}
.interview-box .date span{
    font-style: italic;
}
.interview-box .pointer,
.page-nav .pointer{
    width: 2.5rem;
    height: 2.5rem;
}
.interview-box .pointer{
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
}
.interview-box .pointer .pointer-box,
.page-nav .pointer .pointer-box{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.interview-box .pointer .pointer-box svg,
.page-nav .pointer .pointer-box svg{
    width: 14px;
    fill: #1a1a1a;
    transition: 0.3s ease;
    position: relative;
}
.interview-box .pointer .pointer-box::before,
.page-nav .pointer .pointer-box::before{
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: #7e929c;
    transform: translate(-50%, -50%);
    transition: 0.3s ease;
}
@media (min-width: 1024px){
    .interview-box a:hover .pointer .pointer-box::before,
    .page-nav a:hover .pointer .pointer-box::before{
        width: 100%;
        height: 100%;
    }
    .interview-box a:hover .pointer .pointer-box svg,
    .page-nav a:hover .pointer .pointer-box svg{
        fill: #fff;
    }
}
@media (max-width: 767px){
    .interview-box-list {
        min-height: 200px;
        padding-bottom: 3.75rem;
    }
    .interview-box-list .interview-box-list-inner {
        display: block;
        margin-left: 0;
        margin-top: 0;
        padding: 0 1rem;
    }
    .interview-box {
        width: 100%;
        margin-top: 0;
        padding-left: 0;
    }
    .interview-box + .interview-box {
        margin-top: 1.25rem;
    }
}


/* -- pager
-------------------------------------------------------------------------------- */
.pager{
    margin-top: 3.75rem;
    position: relative;
}
.pager ul{
    display: flex;
    justify-content: center;
}
.pager li{
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 0.1875rem;
}
.pager li a,
.pager li p{
    font-size: 0.8125rem;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-sizing: border-box;
    border: solid 1px #7e929c;
    color: #7e929c;
    transition: background 0.2s ease, color 0.2s ease;
}
.pager li span{
    font-family: '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
    font-size: 0.875rem;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #7e929c;
}
.pager li p{
    background: #7e929c;
    color: #fff;
}
@media (min-width: 1024px){
    .pager li a:hover{
        background: #7e929c;
        color: #fff;
    }
}
@media (max-width: 767px){
    .pager {
        margin-top: 1.875rem;
    }
}


/* -- interview-details
-------------------------------------------------------------------------------- */
.interview-details{
    border-top: solid 1rem #7e929c;
    border-left: solid 1rem #7e929c;
    border-right: solid 1rem #7e929c;
}
.interview-details .head {
    position: relative;
    background: #f3f3f0;
}
.interview-details .head .inner {
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 1;
}
.interview-details .head .ttl-block {
    width: 44%;
    padding: 0 5% 0 10%;
    box-sizing: border-box;
}
.interview-details .head .img-block {
    width: 56%;
    position: relative;
    opacity: 1;
    transform: none;
}
.interview-details .head .img-block .svg {
    width: 6.25rem;
    height: 6.25rem;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
    z-index: 2;
    transition: opacity 0.3s ease 0.3s;
    opacity: 0;
}
.interview-details .head .img-block.show .svg {
    opacity: 1;
}
.interview-details .head .img-block .svg img {
    width: 100%;
	animation: rotate 30s linear infinite;
}
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.interview-details .head .img-block .img {
    width: 100%;
    padding-top: 66.6%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.interview-details .head .img-block .img::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #7e929c;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.interview-details .head .img-block.show .img::before {
    opacity: 1;
}
.interview-details .head .img-block .img img {
    width: 100%;
    position: relative;
    opacity: 0;
    transition: opacity 0.3s ease 0.3s;
}
.interview-details .head .img-block.show .img img {
    opacity: 1;
}
.interview-details .head .img-block .img .img-obj {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease 0.3s;
}
.interview-details .head .img-block.show .img-obj {
    opacity: 1;
}
.interview-details .head .img-block .img .svg {
    z-index: 2;
}
.interview-details .head .vol{
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.07em;
    color: #7e929c;
    margin-bottom: 1.25rem;
    position: relative;
}
.interview-details .head .ttl {
    font-size: 1.75rem;
    line-height: 1.6;
    letter-spacing: 0.07em;
}
.interview-details .head .position {
    font-size: 0.875rem;
    letter-spacing: 0.07em;
    margin-top: 1.875rem;
}
.interview-details .head .position p + p{
    margin-top: 0.2em;
}
.interview-details .head .position span.name{
    font-weight: bold;
}
.interview-details .head .date {
    font-size: 0.75rem;
    letter-spacing: 0.07em;
    color: #999;
    font-weight: bold;
    margin-top: 0.3125rem;
}
.interview-details .head .date span {
    font-style: italic;
}
.interview-details .head .breadcrumb {
    position: absolute;
    top: 6.75rem;
    left: 2.25rem;
    padding: 0;
    transform: rotate(90deg);
    transform-origin: top left;
    z-index: 2;
}
.interview-details .head .breadcrumb ul {
    display: flex;
    justify-content: flex-start;
}
.interview-details .head .breadcrumb li {
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    position: relative;
    color: #999;
}
.interview-details .head .breadcrumb li + li {
    margin-left: 2.5rem;
}
.interview-details .head .breadcrumb li + li::before {
    content: "";
    display: block;
    width: 1.25rem;
    border-top: solid 1px rgba(0,0,0,0.2);
    position: absolute;
    top: 50%;
    left: -1.875rem;
    margin-top: -1px;
}
.interview-details .head .breadcrumb li a {
    color: #64747c;
    transition: opacity 0.2s ease;
}
@media (min-width: 1024px){
    .interview-details .head .breadcrumb li a:hover {
        opacity: 0.7;
    }
}
.interview-details .head .person {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 1.875rem 5%;
    width: 56%;
    margin-left: auto;
    box-sizing: border-box;
}
.interview-details .head .person .ttl{
    display: block;
    font-size: 0.6875rem;
    font-weight: bold;
    letter-spacing: 0.07em;
    margin-bottom: 0.25rem;
    color: #7e929c;
}
.interview-details .head .person .img {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    position: relative;
    border: solid 2px #7e929c;
    box-sizing: border-box;
}
.interview-details .head .person .img img{
    height: 100%;
}
.interview-details .head .person .name{
    font-size: 0.9375rem;
    letter-spacing: 0.07em;
    font-weight: bold;
    margin-right: 1.5625rem;
    position: relative;
}
.interview-details .head .person .cross{
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    margin-right: 1.875rem;
}
.interview-details .head .person .cross::before,
.interview-details .head .person .cross::after{
    content: "";
    width: 1.875rem;
    border-top: solid 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.interview-details .head .person .cross::after{
    transform: translate(-50%, -50%) rotate(-45deg);
}
.interview-details .body {
    position: relative;
}
.interview-details .body article {
    padding: 7.5rem 0;
    position: relative;
}
.interview-details .body section {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 7%;
}
.interview-details .body section:nth-child(odd) {
    margin-left: auto;
    padding-left: 0;
    padding-right: 7%;
    flex-direction: row-reverse;
}
.interview-details .body section.no-img,
.interview-details .body section.no-img:nth-child(odd) {
    padding-right: 0;
    justify-content: center;
}
.interview-details .body section + section {
    margin-top: 10rem;
}
.interview-details .body .ttl-box {
    width: 54%;
}
.interview-details .body .ttl {
    font-size: 1.25rem;
    letter-spacing: 0.07em;
    margin-bottom: 2.5rem;
}
.interview-details .body .ttl h2 {
    display: flex;
    align-items: center;
}
.interview-details .body .ttl .q,
.interview-details .body .txt .a {
    display: inline-block;
    background: #7e929c;
    font-size: 0.9375rem;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
.interview-details .body .ttl .t,
.interview-details .body .txt-box{
    width: calc(100% - 2.5rem);
    padding-left: 1.25rem;
    box-sizing: border-box;
}
.interview-details .body .txt {
    display: flex;
}
.interview-details .body .txt .a {
    background: #7e929c;
    margin-top: -0.375rem;
}
.interview-details .body .txt-box {
    font-size: 1rem;
    line-height: 2;
    letter-spacing: 0.03em;
    text-align: justify;
}
.interview-details .body .txt p + p {
    margin-top: 2rem;
}
.interview-details .body .img {
    width: 46%;
    box-sizing: border-box;
    padding-left: 5rem;
    opacity: 1;
    transform: none;
}
.interview-details .body section:nth-child(odd) .img {
    padding-left: 0;
    padding-right: 5rem;
}
.interview-details .body .img p.img-inner {
    position: relative;
}
.interview-details .body .img p.img-inner::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #7e929c;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.interview-details .body .img.show p.img-inner::before {
    opacity: 1;
}
.interview-details .body .img img {
    width: 100%;
    position: relative;
    opacity: 0;
    transition: opacity 0.3s ease 0.3s;
}
.interview-details .body .img.show img {
    opacity: 1;
}
.interview-details .body .caption {
    text-align: justify;
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.8;
    padding-right: 7vw;
    color: #64747c;
}
.interview-details .body section:nth-child(odd) .caption {
    padding-right: 0;
    padding-left: 7vw;
}
.interview-details .body .imgs {
    width: 50%;
    box-sizing: border-box;
    padding-right: 7vw;
}
.interview-details .body section:nth-child(odd) .imgs {
    padding-right: 0;
    padding-left: 7vw;
}
.interview-details .body .imgs .inner {
    width: 100%;
}
.interview-details .body .imgs .img {
    width: 100%;
}
.interview-details .body .imgs .img + .img {
    margin-top: 1.5625rem;
}
.interview-details .body .imgs .caption,
.interview-details .body section:nth-child(odd) .imgs .caption {
    padding-right: 0;
    padding-left: 0;
}
.interview-details .profile{
    margin-left: auto;
    margin-right: auto;
    padding: 5rem 7%;
    background: #f3f3f0;
}
.interview-details .profile + .profile{
    position: relative;
}
.interview-details .profile + .profile .ttl::after{
    content: "";
    display: block;
    width: 100%;
    border-top: solid 1px rgba(0,0,0,0.07);
    position: absolute;
    top: -5rem;
    left: 0;
}
.interview-details .profile .profile-block{
    display: flex;
    justify-content: space-between;
}
.interview-details .profile .profile-block .profile-box{
    width: calc(50% - 2.5rem);
    position: relative;
}
.interview-details .profile .profile-block.no-links .profile-box{
    width: 100%;
}
.interview-details .profile .profile-block .profile-box + .profile-box::before{
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: -2.5rem;
    border-left: dashed 1px rgba(0,0,0,0.3);
}
.interview-details .profile .ttl{
    font-size: 1.25rem;
    padding-left: 1.25rem;
    margin-bottom: 2.5rem;
    position: relative;
}
.interview-details .profile .ttl::before{
    content: "";
    display: block;
    width: 0.1875rem;
    height: 1.375rem;
    position: absolute;
    top: 50%;
    left: 0;
    background: #7e929c;
    transform: translateY(-50%);
}
.interview-details .profile .ttl h3{
    display: flex;
    align-items: center;
}
.interview-details .profile .ttl span{
    font-size: 0.75rem;
    letter-spacing: 0.07em;
    font-weight: normal;
}
.interview-details .profile .ttl span:before{
    content: "／";
    margin: 0 0.625rem;
}
.interview-details .profile .sub-ttl{
    font-size: 1rem;
    letter-spacing: 0.07em;
    margin-bottom: 0.9375rem;
    margin-top: 1.875rem;
}
.interview-details .profile .sub-ttl:first-child{
    margin-top: 0;
}
.interview-details .profile p{
    font-size: 0.875rem;
    letter-spacing: 0.07em;
    text-align: justify;
    line-height: 2;
}
.interview-details .profile p + p{
    margin-top: 1.25rem;
}
.interview-details .profile .list-box {
    list-style: disc;
    padding-left: 1.25em;
}
.interview-details .profile .list-box li{
    font-size: 0.875rem;
    letter-spacing: 0.03em;
    line-height: 2;
    color: #7e929c;
}
.interview-details .profile .list-box li span{
    color: #1a1a1a;
}
.interview-details .profile .link-box {
    margin-top: 1.25rem;
}
.interview-details .profile .link-box li {
    font-size: 0.875rem;
    letter-spacing: 0.07em;
    position: relative;
}
.interview-details .profile .link-box li + li {
    margin-top: 1px;
}
.interview-details .profile .link-box li a {
    display: block;
    background: rgba(255, 255, 255, 0.7);
    padding: 0.9375rem 3.0625rem 0.9375rem 1.125rem;
    color: #64747c;
    transition: background 0.2s ease;
}
@media (min-width: 1024px){
    .interview-details .profile .link-box li a:hover {
        background: rgba(255, 255, 255, 1);
    }
    .interview-details .profile .link-box li a .arrow {
        display: block;
        width: 0.6875rem;
        height: 0.6875rem;
        position: absolute;
        top: 50%;
        right: 1.125rem;
        transform: translateY(-50%);
        overflow: hidden;
    }
    .interview-details .profile .link-box li a .arrow::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: url(/special/youngpioneers/img/ico_arrow.svg) no-repeat;
        background-size: cover;
        background-position: center;
    }
    .interview-details .profile .link-box li a:hover .arrow::before {
        animation: mo 0.3s linear forwards;
    }
}
.interview-details .profile .link-box li a::before {
}
.interview-details.col-1,
.interview-details.col-1 .head .person .img{
    border-color: #72b12d;
}
.interview-details.col-1 .head .vol,
.interview-details.col-1 .head .person .ttl,
.page-nav .txt .col.col-1{
    color: #72b12d;
}
.interview-details.col-1 .body .ttl .q,
.interview-details.col-1 .profile .ttl::before,
.interview-details.col-1 .review .body .ttl::before,
.page-cover.col-1{
    background: #72b12d;
}
.interview-details.col-2,
.interview-details.col-2 .head .person .img{
    border-color: #c22e6b;
}
.interview-details.col-2 .head .vol,
.interview-details.col-2 .head .person .ttl,
.page-nav .txt .col.col-2{
    color: #c22e6b;
}
.interview-details.col-2 .body .ttl .q,
.interview-details.col-2 .profile .ttl::before,
.interview-details.col-2 .review .body .ttl::before,
.page-cover.col-2{
    background: #c22e6b;
}
.interview-details.col-3,
.interview-details.col-3 .head .person .img{
    border-color: #c99a06;
}
.interview-details.col-3 .head .vol,
.interview-details.col-3 .head .person .ttl,
.page-nav .txt .col.col-3{
    color: #c99a06;
}
.interview-details.col-3 .body .ttl .q,
.interview-details.col-3 .profile .ttl::before,
.interview-details.col-3 .review .body .ttl::before,
.page-cover.col-3{
    background: #c99a06;
}
.interview-details.col-4,
.interview-details.col-4 .head .person .img{
    border-color: #00aaae;
}
.interview-details.col-4 .head .vol,
.interview-details.col-4 .head .person .ttl,
.page-nav .txt .col.col-4{
    color: #00aaae;
}
.interview-details.col-4 .body .ttl .q,
.interview-details.col-4 .profile .ttl::before,
.interview-details.col-4 .review .body .ttl::before,
.page-cover.col-4{
    background: #00aaae;
}
.interview-details.col-5,
.interview-details.col-5 .head .person .img{
    border-color: #c59cff;
}
.interview-details.col-5 .head .vol,
.interview-details.col-5 .head .person .ttl,
.page-nav .txt .col.col-5{
    color: #c59cff;
}
.interview-details.col-5 .body .ttl .q,
.interview-details.col-5 .profile .ttl::before,
.interview-details.col-5 .review .body .ttl::before,
.page-cover.col-5{
    background: #c59cff;
}
.interview-details.col-6,
.interview-details.col-6 .head .person .img{
    border-color: #72b12d;
}
.interview-details.col-6 .head .vol,
.interview-details.col-6 .head .person .ttl,
.page-nav .txt .col.col-6{
    color: #72b12d;
}
.interview-details.col-6 .body .ttl .q,
.interview-details.col-6 .profile .ttl::before,
.interview-details.col-6 .review .body .ttl::before,
.page-cover.col-6{
    background: #72b12d;
}
.interview-details.col-7,
.interview-details.col-7 .head .person .img{
    border-color: #e27102;
}
.interview-details.col-7 .head .vol,
.interview-details.col-7 .head .person .ttl,
.page-nav .txt .col.col-7{
    color: #e27102;
}
.interview-details.col-7 .body .ttl .q,
.interview-details.col-7 .profile .ttl::before,
.interview-details.col-7 .review .body .ttl::before,
.page-cover.col-7{
    background: #e27102;
}
.interview-details.col-8,
.interview-details.col-8 .head .person .img{
    border-color: #0085ce;
}
.interview-details.col-8 .head .vol,
.interview-details.col-8 .head .person .ttl,
.page-nav .txt .col.col-8{
    color: #0085ce;
}
.interview-details.col-8 .body .ttl .q,
.interview-details.col-8 .profile .ttl::before,
.interview-details.col-8 .review .body .ttl::before,
.page-cover.col-8{
    background: #0085ce;
}
.interview-details.col-9,
.interview-details.col-9 .head .person .img{
    border-color: #009951;
}
.interview-details.col-9 .head .vol,
.interview-details.col-9 .head .person .ttl,
.page-nav .txt .col.col-9{
    color: #009951;
}
.interview-details.col-9 .body .ttl .q,
.interview-details.col-9 .profile .ttl::before,
.interview-details.col-9 .review .body .ttl::before,
.page-cover.col-9{
    background: #009951;
}
.interview-details.col-10,
.interview-details.col-10 .head .person .img{
    border-color: #22304f;
}
.interview-details.col-10 .head .vol,
.interview-details.col-10 .head .person .ttl,
.page-nav .txt .col.col-10{
    color: #22304f;
}
.interview-details.col-10 .body .ttl .q,
.interview-details.col-10 .profile .ttl::before,
.interview-details.col-10 .review .body .ttl::before,
.page-cover.col-10{
    background: #22304f;
}
.interview-details.col-11,
.interview-details.col-11 .head .person .img{
    border-color: #ff75c3;
}
.interview-details.col-11 .head .vol,
.interview-details.col-11 .head .person .ttl,
.page-nav .txt .col.col-11{
    color: #ff75c3;
}
.interview-details.col-11 .body .ttl .q,
.interview-details.col-11 .profile .ttl::before,
.interview-details.col-11 .review .body .ttl::before,
.page-cover.col-11{
    background: #ff75c3;
}
@media (max-width: 1200px){
    .interview-details .body section,
    .interview-details .body section.no-img,
    .interview-details .body section.no-img:nth-child(odd){
        display: block;
        padding-right: 7%;
        box-sizing: border-box;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
    .interview-details .body section:nth-child(odd) {
        display: block;
        padding-left: 7%;
    }
    .interview-details .body section + section {
        margin-top: 6.25rem;
    }
    .interview-details .body .ttl-box {
        width: 100%;
    }
    .interview-details .body .img,
    .interview-details .body section:nth-child(odd) .img{
        width: 100%;
        padding-left: 3.75rem;
        padding-right: 3.75rem;
        margin-top: 5rem;
    }
    .interview-details .body section:nth-child(odd) .img {
        padding-left: 3.75rem;
        padding-right: 3.75rem;
    }
    .interview-details .body .imgs {
        width: 100%;
        padding-right: 0;
        margin-top: 5rem;
    }
    .interview-details .body .imgs .inner {
        display: flex;
        justify-content: space-between;
    }
    .interview-details .body .imgs .img,
    .interview-details .body section:nth-child(odd) .imgs .img{
        width: calc(50% - 1.25rem);
        margin-top: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .interview-details .body section:nth-child(odd) .imgs {
        padding-left: 0;
    }
    .interview-details .body .imgs .img + .img {
        margin-top: 0;
    }
    .interview-details .body .caption {
        padding-right: 0;
    }
    .interview-details .body section:nth-child(odd) .caption {
        padding-right: 0;
        padding-left: 0;
    }
}
@media (max-width: 767px){
    .interview-details .head .inner{
        display: block;
    }
    .interview-details .head .ttl-block {
        width: 100%;
        padding: calc(3.5625rem - 1rem + 6.25rem) 7% 2.5rem 5rem;
    }
    .interview-details .head .vol{
        margin-bottom: 0.9375rem;
    }
    .interview-details .head .ttl {
        font-size: 1.5rem;
    }
    .interview-details .head .img-block {
        width: 100%;
    }
    .interview-details .profile .profile-block {
        display: block;
    }
    .interview-details .profile .profile-block .profile-box {
        width: 100%;
    }
    .interview-details .profile .profile-block .profile-box + .profile-box {
        margin-top: 1.25rem;
    }
    .interview-details .profile .profile-block .profile-box + .profile-box::before {
        display: none;
    }
    .interview-details .head .img-block .svg {
        bottom: auto;
        top: 0;
        left: auto;
        right: 5%;
        transform: translate(0%, -50%);
    }
    .interview-details .head .person {
        padding: 1.5625rem 7%;
        width: 100%;
        justify-content: center;
    }
    .interview-details .head .breadcrumb{
        top: 5.375rem;
        left: 2rem;
    }
    .interview-details .body article {
        padding: 5rem 0;
    }
    .interview-details .body section + section {
        margin-top: 5rem;
    }
    .interview-details .body .ttl {
        margin-bottom: 1.25rem;
    }
    .interview-details .body .imgs .inner {
        display: block;
    }
    .interview-details .body .imgs .img,
    .interview-details .body section:nth-child(odd) .imgs .img {
        width: 100%;
    }
    .interview-details .body .imgs .img + .img,
    .interview-details .body section:nth-child(odd) .imgs .img + .img {
        margin-top: 1.5625rem;
    }
    .interview-details .body .img,
    .interview-details .body section:nth-child(odd) .img,
    .interview-details .body section:nth-child(odd) .imgs{
        padding-left: 0;
        padding-right: 0;
        margin-top: 3.75rem;
    }
    .interview-details .profile {
        padding: 3.75rem 7%;
    }
    .interview-details .profile + .profile .ttl::after{
        top: -3.75rem;
    }
}


/* -- review
-------------------------------------------------------------------------------- */
.interview-details .review{
    padding: 0 7%;
    margin-top: 6.25rem;
    position: relative;
}
.interview-details .review .review-inner{
    padding: 5rem;
    background: #fff;
    border: solid 3px rgba(0,0,0,0.07);
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}
.interview-details .review .img {
    width: 50%;
    padding-left: 0;
    box-sizing: border-box;
    padding-right: 3.125rem;
    margin-top: 0;
}
.interview-details .review .body {
    width: 50%;
    box-sizing: border-box;
    padding-left: 3.125rem;
}
.interview-details .review .body .ttl {
    letter-spacing: 0.1em;
    padding-left: 1.25rem;
    position: relative;
}
.interview-details .review .body .ttl::before {
    content: "";
    display: block;
    width: 0.1875rem;
    height: 84%;
    position: absolute;
    top: 50%;
    left: 0;
    background: #7e929c;
    transform: translateY(-50%);
}
.interview-details .review .body .ttl span {
    display: block;
    font-size: 0.8125rem;
    letter-spacing: 0.07em;
    font-weight: normal;
    line-height: 2;
}
.interview-details .review .body .txt-box {
    width: 100%;
    font-size: 0.9375rem;
    line-height: 2;
    letter-spacing: 0.03em;
    text-align: justify;
    padding: 0;
}
.interview-details .review p + p{
    margin-top: 2rem;
}
@media (max-width: 767px){
    .interview-details .review {
        margin-top: 5rem;
    }
    .interview-details .review .review-inner {
        padding: 1.875rem;
        display: block;
        border-width: 2px;
    }
    .interview-details .review .img {
        width: 100%;
        padding-right: 0;
        margin-top: 2.5rem;
    }
    .interview-details .review .body {
        width: 100%;
        padding-left: 0;
    }
}


/* -- page-nav
-------------------------------------------------------------------------------- */
.page-nav{
    padding: 5rem 7%;
}
.page-nav ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.page-nav li{
    font-weight: bold;
}
.page-nav .prev-box,
.page-nav .next-box{
    width: 33%;
}
.page-nav .prev,
.page-nav .next{
    display: flex;
    align-items: center;
}
.page-nav .next{
    justify-content: flex-end;
}
.page-nav .prev.hide,
.page-nav .next.hide{
    opacity: 0;
    visibility: hidden;
}
.page-nav .prev .icon,
.page-nav .next .icon{
    display: block;
    width: 3.75rem;
    height: 3.75rem;
    background: #7e929c;
    border-radius: 50%;
    position: relative;
}
.page-nav .icon span{
    display: block;
    width: 0.6875rem;
    height: 0.6875rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}
.page-nav .prev .icon span{
    transform: translate(-50%, -50%) scale(-1, 1);
}
.page-nav .prev .icon span::before,
.page-nav .next .icon span::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(/special/youngpioneers/img/ico_arrow_w.svg) no-repeat;
    background-size: cover;
    background-position: center;
}
@media (min-width: 1024px){
    .page-nav .prev:hover .icon span::before,
    .page-nav .next:hover .icon span::before{
        animation: mo 0.3s linear forwards;
    }
}
@keyframes mo{
	0% {
		transform: translateX(0%);
	}
	50% {
		transform: translateX(100%);
	}
	51% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(0%);
	}
}
.page-nav .prev .txt,
.page-nav .next .txt{
    width: calc(100% - 3.75rem);
    box-sizing: border-box;
}
.page-nav .prev .txt{
    padding-left: 1.875rem;
}
.page-nav .next .txt{
    padding-right: 1.875rem;
    text-align: right;
}
.page-nav .txt .col{
    display: block;
    font-size: 0.8125rem;
    letter-spacing: 0.07em;
    color: #7e929c;
    margin-bottom: 0.625rem;
}
.page-nav .txt .ttl{
    display: block;
    font-size: 1.125rem;
    letter-spacing: 0.07em;
}
.page-nav .index{
    display: block;
    font-size: 0.8125rem;
    text-align: center;
    letter-spacing: 0.07em;
    line-height: 1;
    position: relative;
}
.page-nav .index span{
    display: block;
    width: 1.1875rem;
    height: 1.1875rem;
    margin: 0 auto 1.25rem;
}
.page-nav .pointer{
    width: 3.75rem;
    height: 3.75rem;
}
.page-nav .index-ttl{
    width: 100%;
    text-align: center;
    padding-top: 0.9375rem;
    position: absolute;
    bottom: calc(-0.75rem - 0.9375rem);
    left: 0;
}
@media (max-width: 767px){
    .page-nav {
        padding: 3.125rem 7%;
    }
    .page-nav .txt {
        display: none;
    }
    .page-nav .index-ttl {
        bottom: -0.8125rem;
    }
    .page-nav .prev-box, .page-nav .next-box {
        width: auto;
    }
}


/* -- footer
-------------------------------------------------------------------------------- */
footer{
    background: #282e31;
    color: #fff;
    padding: 5rem 0;
    text-align: center;
}
footer .logo{
    height: 2.5rem;
}
footer .logo img{
    height: 100%;
}
footer .links{
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}
footer .links li{
    font-size: 0.8125rem;
    letter-spacing: 0.07em;
    line-height: 1.4;
    border-right: solid 1px rgba(255,255,255,0.2);
    padding: 0 1rem;
}
footer .links li:first-child{
    border-left: solid 1px rgba(255,255,255,0.2);
}
footer .links li a{
    transition: opacity 0.2s ease;
}
@media (min-width: 1024px){
    footer .links li a:hover{
        opacity: 0.7;
    }
}
footer .logo-ynu{
    height: 1.125rem;
    margin-top: 5rem;
    margin-bottom: 1.25rem;
}
footer .logo-ynu img{
    height: 100%;
}
footer .copyright{
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: #777878;
}
@media (max-width: 767px){
    footer {
        padding: 3.75rem 0;
    }
    footer .links {
        display: block;
    }
    footer .links li {
        border-right: none;
        padding: 0 0;
    }
    footer .links li + li {
        margin-top: 0.9375rem;
    }
    footer .links li:first-child {
        border-left: none;
    }
    footer .logo-ynu {
        margin-top: 3.75rem;
    }
}