@charset "UTF-8";


/* -- font
-------------------------------------------------------------------------------- */
@font-face {
    font-family: 'NotoSansJapanese';
    src: url('/special/interview/css/font/NotoSansJP-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSansJapanese';
    src: url('/special/interview/css/font/NotoSansJP-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'miller';
    src: url('/special/interview/css/font/miller_display.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}


/* -- Base and Reset
-------------------------------------------------------------------------------- */
body,html {
	width: 100%;
    font-size: 20px;
    line-height: 1.6;
}
body {
	font-family: 'nimbus-sans', 'YakuHanJPs', 'NotoSansJapanese', '嗄ゴシック Medium', 'Yu Gothic Medium', '嗄ゴシック悶', YuGothic, 'ヒラギノ叔ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
	text-align: left;
    color:#333;
}
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: 'nimbus-sans', '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);
}
select::-ms-expand {
    display: none;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -webkit-touch-callout;
    opacity: 0;
    transition: opacity 0.3s ease;
}
body.active {
    opacity: 1;
}
.mincho{
    font-family: "Yu Mincho", "YuMincho", "ヒラギノ苧劾 ProN W3", "Hiragino Mincho ProN", "HG苧劾E", "ＭＳ Ｐ苧劾", "ＭＳ 苧劾", serif;
}
.pc-hide{
    display: none;
}


/* -- clearfix
-------------------------------------------------------------------------------- */
.cf:after {
	content: "";
	display: block;
	clear: both;
	height: 0!important;
}


/* -- wrapper
-------------------------------------------------------------------------------- */
.wrapper {
    overflow: hidden;
}


/* -- scroll-fade
-------------------------------------------------------------------------------- */
.img.scroll-fade{
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.img.scroll-fade.show{
    opacity: 1;
    transform: translateY(0);
}


/* -- content
-------------------------------------------------------------------------------- */
.content{
    position: relative;
    z-index: 1;
}
.content.fixed{
    position: fixed;
}


/* -- main-content
-------------------------------------------------------------------------------- */
.main-content{
    width: 100%;
}
.main-content::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 3;
    transition: opacity 0.4s ease;
    opacity: 0;
    display: none;
}
.main-content .border{
    position: absolute;
    top:0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: #f3f3f3;
    background: rgba(153,153,153,0.12);
    z-index: 1;
}
.main-content .border.border-1{
    left: 20%;
}
.main-content .border.border-2{
    left: 40%;
}
.main-content .border.border-3{
    left: 60%;
}
.main-content .border.border-4{
    left: 80%;
}
.main-content.mask-show::before{
    display: block;
}
.main-content.mask-show-active::before{
    opacity: 1;
}
.main-content .logo{
    width: auto;
    height: 1.2rem;
    position: absolute;
    top: 2rem;
    left: 6%;
    z-index: 2;
}
.main-content .logo img{
    width: auto;
    height: 100%;
}


/* -- sub-content
-------------------------------------------------------------------------------- */
.sub-content{
    width: calc(80% - 80px);
    height: 100%;
    margin-left: auto;
    margin-right: 0;
    top: 0;
    right: -80%;
    z-index: 1;
    transition: right 0.4s ease;
    display: none;
}
.sub-content.show{
    right: 0;
}
.sub-content .in{
    max-width: 800px;
}
.sub-content .sub-content-inner{
    position: relative;
    height: 100%;
}
.modal-hide{
    position: fixed;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    margin-right: -80px;
    background: #00bbc8;
    transition: right 0.4s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: background-color 20s linear infinite forwards;
}
.sub-content.show .modal-hide{
    right: 80%;
}
.modal-hide span{
    display: block;
    width: 30px;
    height: 30px;
    overflow: hidden;
    text-indent: -9999px;
    position: relative;
}
.modal-hide span::before,
.modal-hide span::after{
    content: "";
    display: block;
    width: 20px;
    height: 3px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1.5px 0 0 -10px;
    transform: rotate(45deg);
}
.modal-hide span::after{
    transform: rotate(-45deg);
}


/* -- header-img
-------------------------------------------------------------------------------- */
.header-img{
    white-space: nowrap;
    position: relative;
    z-index: 1;
    font-size: 0;
}
.header-img::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(315deg, rgb(241, 202, 220) 10%, rgb(131, 204, 210) 71%, rgb(0, 187, 200) 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.7;
}
.header-img ul{
    display: inline-block;
    animation: loop 60s linear infinite;
}
@keyframes loop {
	0% {transform: translateX(0);}
	100% {transform: translateX(-2400px);}
}
.header-img li{
    display: inline-block;
}
.header-img img{
    width: 240px;
    height: 240px;
    filter: grayscale(100%);
}


/* -- bg-txt
-------------------------------------------------------------------------------- */
.bg-txt{
    position: absolute;
    font-size: 14vw;
    line-height: 0.82;
    font-weight: bold;
    color:#999;
    white-space: nowrap;
    margin: -1.2vw 0 0 -1vw;
    opacity: 0.06;
    animation: txt-color 20s linear infinite forwards;
    z-index: -1;
}
.bg-txt2{
    letter-spacing: 0.025em;
}
@keyframes txt-color {
    0% { color: #00bbc8; }
    50% { color: #f772ff; }
    100% { color: #00bbc8; }
}


/* -- main-ttl
-------------------------------------------------------------------------------- */
.main-ttl{
    padding: 5em 6% 3em;
    position: relative;
    z-index: 1;
}
.main-ttl .in{
    text-align: center;
}
.main-ttl .ttl{
    font-size: 1.5em;
    font-weight: normal;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
}
.main-ttl .en{
	font-family: 'miller', serif;
    font-size: 0.75em;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    margin-top: 0.4rem;
    color: #929393;
}
.main-ttl .lead::before{
    content: "";
    display: block;
    width: 30px;
    height: 3px;
    background: #00bbc8;
    margin: 1.4em auto;
    animation: background-color 20s linear infinite forwards;
}
@keyframes background-color {
    0% { background-color: #00bbc8; }
    50% { background-color: #f772ff; }
    100% { background-color: #00bbc8; }
}
.main-ttl .lead p{
    font-size: 0.7em;
    line-height: 2;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
}
.main-ttl .num{
    margin-top: 3rem;
}
.main-ttl .num dt{
	font-family: 'miller', serif;
    font-size: 0.65em;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
}
.main-ttl .num dt::after{
    content: "/";
    display: block;
    margin: 0 auto;
}
.main-ttl .num dd{
    font-size: 2em;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-indent: 0.02em;
}


/* -- nav
-------------------------------------------------------------------------------- */
nav{
    font-size: 0.7em;
    padding: 0 6%;
    position: relative;
    z-index: 1;
}
nav ul{
    letter-spacing: -0.4em;
    line-height: 1.4;
    padding: 2rem 0;
    border-top: solid 1px;
    border-bottom: solid 1px;
    text-align: center;
}
nav li{
    display: inline-block;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    padding: 0 2%;
}
nav li a{
    transition: color 0.15s ease;
}
.pc nav li a:hover{
    color: #929393;
}
nav li a::after{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 7px;
    height: 7px;
    transform: rotate(45deg) translate(-3.5px,-3.5px);
    border-bottom:solid 1px;
    border-right:solid 1px;
    margin-left: 0.8em;
    transition: transform 0.15s ease;
}
.pc nav li a:hover::after{
    transform: rotate(45deg) translate(-0.5px,-0.5px);
}


/* -- list-block
-------------------------------------------------------------------------------- */
.list-block{
    padding: 0 6% 6rem 6%;
    position: relative;
    z-index: 1;
}
.list-block-inner{
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
}
.list-block ul{
    margin: -1.5rem -1rem;
    letter-spacing: -0.4em;
}
.list-block .list-box{
    display: inline-block;
    letter-spacing: 0;
    vertical-align: top;
    width: 16.666666%;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: 0.34s;
}
.member-list.show .list-box{
    opacity: 1;
    transform: translateY(0);
}
.list-block .list-box:nth-child(1){
    transition-delay: 0s;
}
.list-block .list-box:nth-child(2){
    transition-delay: 0.06s;
}
.list-block .list-box:nth-child(3){
    transition-delay: 0.11s;
}
.list-block .list-box:nth-child(4){
    transition-delay: 0.15s;
}
.list-block .list-box:nth-child(5){
    transition-delay: 0.19s;
}
.list-block .list-box:nth-child(6){
    transition-delay: 0.22s;
}
.list-block .list-box:nth-child(7){
    transition-delay: 0.25s;
}
.list-block .list-box:nth-child(8){
    transition-delay: 0.27s;
}
.list-block .list-box:nth-child(9){
    transition-delay: 0.29s;
}
.list-block .list-box:nth-child(10){
    transition-delay: 0.31s;
}
.list-block .list-box:nth-child(11){
    transition-delay: 0.32s;
}
.list-block .list-box:nth-child(12){
    transition-delay: 0.33s;
}
@media (max-width: 1800px){
    .list-block .list-box{
        width: 20%;
    }
}
@media (max-width: 1500px){
    .list-block .list-box{
        width: 25%;
    }
}
@media (max-width: 1200px){
    .list-block .list-box{
        width: 33.333333%;
    }
}


/* -- list-ttl-box
-------------------------------------------------------------------------------- */
.list-ttl-box {
    width: 100px;
    box-sizing: border-box;
    border-left: solid 1px #333;
    padding-left: 0.6rem;
    box-sizing: border-box;
}
.list-ttl-box .list-ttl {
    font-size: 16px;
    font-size: 0.8em;
    font-weight: normal;
    letter-spacing: 0.2em;
}
.list-ttl-box .list-ttl .txt {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.list-ttl-box .list-ttl .en{
	font-family: 'miller', serif;
    display: inline-block;
    font-size: 0.65rem;
    line-height: 1.2;
    letter-spacing: 0.1em;
}
.list-ttl-box .list-ttl .en::before{
    content: "/";
    display: inline-block;
    margin: 0.5em 0 0.6em;
}


/* -- member
-------------------------------------------------------------------------------- */
.member-list{
    font-size: 0.65rem;
    width: calc(100% - 100px);
}
.member{
    display: block;
    position: relative;
}
.member .img{
    margin: 0 12%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.member .img::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.pc a.member:hover .img::before{
    opacity: 0.6;
    visibility: visible;
}
.member .img .txt{
    font-family: 'miller', serif;
    font-size: 0.7rem;
    color:#fff;
    text-align: center;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    padding: 1px 1rem 0;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%,0);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.pc a.member:hover .img .txt{
    opacity: 1;
    visibility: visible;
    transform: translate(-50%,-50%);
    transition-delay: 0.1s;
}
.member .img img{
    width: 100%;
    height: auto;
    transition: transform 0.4s ease, filter 0.4s ease;
}
.pc a.member:hover .img img{
    transform: scale(1.08);
}
.member .vol {
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
}
.member .field{
    letter-spacing: 0.04em;
    text-indent: 0.04em;
    color: #6c6d6d;
    text-align: center;
    margin-top: 20px;
    margin-top: 1rem;
    margin-bottom: 0.4rem;
}
.member .name{
    font-size: 18px;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    text-align: center;
}
.member .en {
	font-family: 'miller', serif;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    text-align: center;
    color: #929393;
}

/* -- member-detail
-------------------------------------------------------------------------------- */
.member-detail{
    font-size: 0.7rem;
}
.member-detail-head{
    background: #6c6d6d;
    background-image: url(/special/interview/img/pattern_bg.png);
    background-size: 80.667px 80px;
    margin-bottom: -8vw;
}
.member-detail-head .ttl-box{
    color: #fff;
    margin-bottom: 3rem;
}
.member-detail-head .ttl-box .vol{
    padding: 2rem 10% 4rem;
    text-align: center;
}
.member-detail-head .ttl-box .vol li{
    display: inline-block;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: #b8b9b9;
}
.member-detail-head .ttl-box .vol li:first-child{
    color:#fff;
}
.member-detail-head .ttl-box .ttl {
    font-size: 28px;
    font-size: 1.4rem;
    letter-spacing: 0.06em;
    line-height: 1.8;
    font-weight: normal;
    padding: 0 10%;
    text-align: center;
}
.member-detail-head .img{
    width: 16vw;
    min-width: auto;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.member-detail-head .img img{
    width: 100%;
    height: auto;
}
.member-detail .member-detail-inner{
    background: #fff;
    padding: calc(2rem + 8vw) 10% 6rem
}
.member-detail .status-block{
    width: 100%;
    text-align: center;
    margin-bottom: 4rem;
}
.member-detail .status{
    letter-spacing: 0.04em;
    text-indent: 0.04em;
    color:#6c6d6d;
    margin-bottom: 0.4rem;
}
.member-detail .name{
    font-size: 22px;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    line-height: 1.8;
}
.member-detail .en{
	font-family: 'miller', serif;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
    color:#929393;
}
.member-detail .subject{
    text-align: left;
    letter-spacing: -0.4em;
    border-top: solid 1px #e5e5e5;
    border-bottom: solid 1px #e5e5e5;
    padding: 2em 0;
    margin-top: 3rem;
}
.member-detail .subject dt{
    letter-spacing: 0.04em;
    color: #6c6d6d;
    margin-bottom: 0.4rem;
}
.member-detail .subject dd{
    display: inline-block;
    vertical-align: top;
    width: 50%;
    font-size: 13px;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    margin-top: 0.8em;
    text-indent: -1.4em;
    padding-left: 1.4em;
    box-sizing: border-box;
}
/*SDZsのために弖紗　ynu2020/3/2 */
.member-detail .img_sdzs {
    text-align: left;
    width: 100%;
    height: auto;
}
.member-detail .img_sdzs hr{
    border-top: solid 1px #e5e5e5;
}
.member-detail .img_sdzs dt{
    text-align: left;
    letter-spacing: 0.04em;
    color: #6c6d6d;
    margin-bottom: 1.5rem;
}
/*SDZsのために弖紗　ここまで */

.member-detail .txt-block-wrap{
    width: 100%;
}
.member-detail .txt-block{
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: solid 1px #e5e5e5;
}
.member-detail .txt-block:first-child{
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.member-detail .txt-block .ttl-box{
    display: flex;
}
.member-detail .txt-block .ttl-box .q{
    font-family: 'miller', serif;
    font-size: 24px;
    font-size: 1.2rem;
    margin-right: 0.6em;
    color: #f772ff;
}
.member-detail .txt-block:nth-child(odd) .ttl-box .q{
    color: #00bbc8;
}
.member-detail .txt-block .ttl-box .ttl{
    font-size: 24px;
    font-size: 1.2rem;
    font-weight: normal;
    letter-spacing: 0.04em;
    line-height: 1.6;
}
.member-detail .txt-box{
    margin-top: 1.4rem;
}
.member-detail .txt-box p{
    letter-spacing: 0.04em;
    line-height: 2.1;
    margin-top: 2.1em;
    text-align: justify;
    text-justify: inter-ideograph;
}
.member-detail .txt-box p:first-child{
    margin-top: 0;
}
.member-detail .txt-box a{
    color: #929393;
}
.pc .member-detail .txt-box a:hover{
    text-decoration: underline;
}
.member-detail .txt-box .img{
    margin-top: 3rem;
    text-align: center;
}
.member-detail .txt-box .img img{
    width: 100%; 
    max-width: 600px;
    height: auto;
}
.member-detail .txt-box .img .cap{
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    line-height: 1.8;
    text-align: left;
    color: #6c6d6d;
    margin-top: 1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.member-detail .txt-box .img.length img{
    max-width: 360px;
}
.member-detail .txt-box .img.length .cap{
    max-width: 360px;
}
.member-detail .date{
    margin-top: 4rem;
    text-align: right;
}
.member-detail .date p{
    letter-spacing: 0.04em;
    color: #6c6d6d;
}

.sub-content .member-detail-head .ttl-box,
.sub-content .member-detail-head .img,
.sub-content .member-detail .status-block,
.sub-content .member-detail .txt-block-wrap{
    transition: opacity 0.3s ease;
}
.sub-content.disable .member-detail-head .ttl-box,
.sub-content.disable .member-detail-head .img,
.sub-content.disable .member-detail .status-block,
.sub-content.disable .member-detail .txt-block-wrap{
    opacity: 0;
}


/* -- member-detail-foot
-------------------------------------------------------------------------------- */
.member-detail-foot{
    background: #fff;
    padding: 4rem 10% 4.5rem;
    border-top:solid 1px #e5e5e5;
}
.member-detail-foot ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.member-detail-foot li{
}
.member-detail-foot li a{
    display: block;
}
.member-detail-foot .page-top{
    padding: 0.75rem 1rem;
}
.member-detail-foot .next{
    text-align: right;
}
.member-detail-foot .prev::before,
.member-detail-foot .next::after{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0.5rem;
    height: 0.5rem;
    border-left: solid 2px #929393;
    border-top: solid 2px #929393;
    transition: color 0.2s ease, transform 0.2s ease;
}
.member-detail-foot .prev::before{
    transform: rotate(-45deg);
}
.member-detail-foot .next::after{
    transform: rotate(135deg);
}
.pc .member-detail-foot .prev:hover::before{
    transform: rotate(-45deg) translate(-0.3rem,-0.3rem);
}
.pc .member-detail-foot .next:hover::after{
    transform: rotate(135deg) translate(-0.3rem,-0.3rem);
}
.member-detail-foot .page-close{
    display: block;
    width: 20px;
    height: 20px;
    padding: 10px;
    transition: background 0.2s ease;
}
.member-detail-foot .page-close svg{
    width: 20px;
    height: 20px;
}
.member-detail-foot .page-close svg path{
    fill:#333;
    transition: fill 0.2s ease;
}
.pc .member-detail-foot .page-close:hover svg path{
    fill:#929393;
}
.member-detail-foot .foot-box{
    display: inline-block;
    vertical-align: middle;
}
.member-detail-foot .prev .foot-box{
    padding-left: 1rem;
}
.member-detail-foot .next .foot-box{
    padding-right: 1rem;
}
.member-detail-foot .foot-box .vol{
    margin-bottom: 0.2rem;
}
.member-detail-foot .foot-box .name{
    font-size: 0.8rem;
}


/* -- footer
-------------------------------------------------------------------------------- */
footer{
    padding: 6em 6%;
    background: #1a1a1a;
    position: relative;
    text-align: center;
}
footer .ttl{
    font-size: 0.9rem;
    color:#fff;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
}
footer .prof{
    font-size: 0.6rem;
    color:#fff;
    letter-spacing: 0.05em;
    text-indent: 0.05em;
    margin-top: 1em;
    margin-bottom: 3em;
}
footer .copyright{
	font-family: 'miller', serif;
    font-size: 0.6rem;
    color:#929393;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
}
footer .page-top{
    display: block;
    padding: 0.55rem 1rem;
    position: fixed;
    bottom: 15px;
    right: 15px;
    background: rgba(26,26,26,0.2);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: background 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}
footer .page-top.show{
    opacity: 1;
    visibility: visible;
}
.pc footer .page-top:hover{
    background: rgba(26,26,26,0.3);
}
footer .page-top::before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0.6rem;
    height: 0.6rem;
    border-left: solid 2px #fff;
    border-top: solid 2px #fff;
    transform: rotate(45deg) translate(0.05rem,0.05rem);
    transition: transform 0.2s ease;
}
.pc footer .page-top:hover::before{
    transform: rotate(45deg) translate(-0.25rem,-0.25rem);
}


/* -- @media
-------------------------------------------------------------------------------- */
@media (max-width: 1024px){
    /* -- sub-content
    -------------------------------------------------------------------------------- */
    .sub-content{
        position: fixed;
        width: calc(100% - 80px);
        right: -100%;
    }
    .sub-content.show .modal-hide{
        right: 100%;
    }
    .sub-content .sub-content-inner{
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* -- member-detail
    -------------------------------------------------------------------------------- */
    .member-detail-head {
        margin-bottom: -10vw;
    }
    .member-detail-head .img {
        width: 20vw;
    }
    .member-detail .member-detail-inner {
        padding-top: calc(2rem + 10vw);
    }
}
@media (max-width: 767px){
    body,html {
        font-size: 16px;
    }
    .pc-hide{
        display: block;
    }
    .sp-hide{
        display: none;
    }
    
    /* -- bg-txt
    -------------------------------------------------------------------------------- */
    .bg-txt{
        font-size: 18.4vw;
        line-height: 0.86;
        opacity: 0.07;
        margin: -1.6vw 0 0 -1.3vw;
    }
    .bg-txt2 {
        letter-spacing: 0;
    }
    .bg-txt3 {
        letter-spacing: 0.035em;
    }
    
    /* -- main-content
    -------------------------------------------------------------------------------- */
    .main-content .border{
        background: rgba(153, 153, 153, 0.09);
    }
    .main-content .border.border-1{
        left: 25%;
    }
    .main-content .border.border-2{
        left: 50%;
    }
    .main-content .border.border-3{
        left: 75%;
    }
    .main-content .border.border-4{
        display: none;
    }
    .main-content .logo {
        height: 1.1rem;
        top: 1.5rem;
    }
    
    /* -- header-img
    -------------------------------------------------------------------------------- */
    @keyframes loop {
        0% {transform: translateX(0);}
        100% {transform: translateX(-1000px);}
    }
    .header-img img{
        width: 100px;
        height: 100px;
    }
    
    /* -- sub-content
    -------------------------------------------------------------------------------- */
    .sub-content{
        width: calc(100% - 50px);
        right: -100%;
    }
    .modal-hide{
        width: 50px;
        height: 50px;
        margin-right: -50px;
    }
    .modal-hide span::before,
    .modal-hide span::after{
        width: 16px;
        height: 2px;
        margin: -1px 0 0 -8px;
    }
    .sub-content.show .modal-hide{
        right: 100%;
    }

    /* -- main-ttl
    -------------------------------------------------------------------------------- */
    .main-ttl{
        padding-top: 3rem;
        padding-bottom: 2rem;
    }
    .main-ttl .num{
        margin-top: 2rem;
    }

    /* -- nav
    -------------------------------------------------------------------------------- */
    nav ul{
        padding-top: 0.75rem;
        padding-bottom: 1.5rem;
    }
    nav li{
        box-sizing: border-box;
        width: 33.333333%;
        padding-top: 0.75rem;
    }
    nav li a::after {
        width: 5px;
        height: 5px;
        transform: rotate(45deg) translate(-2px,-2px);
        margin-left: 0.6em;
    }

    /* -- list-block
    -------------------------------------------------------------------------------- */
    .list-block{
        padding-bottom: 4rem;
    }
    .list-block ul {
        margin: -0.75rem 0;
    }
    .list-block .list-box{
        width: 50%;
        padding: 0.75rem 0;
    }

    /* -- list-ttl-box
    -------------------------------------------------------------------------------- */
    .list-ttl-box {
        width: 50px;
        padding-left: 0.4rem;
    }
    .list-ttl-box .list-ttl .en{
        transform: translateX(-0.3em);
    }

    /* -- member-list
    -------------------------------------------------------------------------------- */
    .member-list {
        width: calc(100% - 50px);
    }
    .member .field{
        margin-top: 0.8rem;
    }
    .member .img{
        margin: 0 12%;
    }

    /* -- member-detail
    -------------------------------------------------------------------------------- */
    .member-detail-head {
        margin-bottom: -12vw;
    }
    .member-detail-head .img {
        width: 32vw;
    }
    .member-detail .member-detail-inner {
        padding-top: calc(1rem + 16vw);
        padding-bottom: 3rem;
    }
    .member-detail-head .ttl-box{
        margin-bottom: 2rem;
    }
    .member-detail-head .ttl-box .vol{
        padding-bottom: 2rem;
    }
    .member-detail-head .ttl-box .ttl{
        font-size: 1.2rem;
    }
    .member-detail .subject{
        margin-top: 2rem;
    }
    .member-detail .subject dd{
        width: 100%;
    }
    .member-detail .status-block{
        margin-bottom: 2rem;
    }
    .member-detail .txt-block{
        margin-top: 2rem;
        padding-top: 2rem;
    }
    .member-detail .txt-block .ttl-box .q{
        font-size: 1rem;
    }
    .member-detail .txt-block .ttl-box .ttl{
        font-size: 1rem;
        line-height: 1.8;
    }
    .member-detail .txt-box{
        margin-top: 1rem;
    }
    .member-detail .txt-box p{
        line-height: 2;
        margin-top: 2em;
    }
    .member-detail .txt-box .img{
        margin-top: 2rem;
    }
    .member-detail .txt-box .img .cap{
        line-height: 1.6;
        margin-top: 0.8rem;
    }
    .member-detail .date{
        margin-top: 2rem;
    }

    /* -- member-detail-foot
    -------------------------------------------------------------------------------- */
    .member-detail-foot{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .member-detail-foot li:first-child,
    .member-detail-foot li:last-child{
        width: calc(50% - 21px);
    }
    .member-detail-foot .prev::before,
    .member-detail-foot .next::after{
        display: none;
    }
    .member-detail-foot .prev .foot-box,
    .member-detail-foot .next .foot-box{
        padding-left: 0;
        padding-right: 0;
    }
    .member-detail-foot .page-close{
        width: 14px;
        height: 14px;
        margin: 0 0.8em;
    }
    .member-detail-foot .page-close svg{
        width: 14px;
        height: 14px;
    }
    .member-detail-foot .foot-box .en{
        line-height: 1.4;
        margin-top: 0.4em;
        height: 2.8em;
        margin-bottom: -1.4em;
    }

    /* -- footer
    -------------------------------------------------------------------------------- */
    footer {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    footer .page-top{
        padding: 0.469rem 0.888rem;
    }
}