/*----------
 common
 ----------*/
 .pageHeader{
    position: fixed;
    z-index: 2;
    width: 100%;
 }

 .page-fadeIn{
    opacity: 0;
    transform: scale(.9);
    -webkit-transform: scale(.9);
    animation: pageFadeIn var(--transition) .55s forwards;
 }

@keyframes pageFadeIn {
    0% {
        opacity: 0;
        transform: scale(.9);
        -webkit-transform: scale(.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

.page-single.page-fadeIn,
.page-main.page-fadeIn{
    animation: pageFadeIn var(--transition) .6s forwards;
}

.-title_fadeIn{
    opacity: 0;
    animation: pageFadeIn .3s ease-in-out .9s forwards;
}

/*--- page main title/contents --*/
.page-titleArea{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    padding: min(6rem, 12vw) 0 min(3rem, 6vw);
}

.page-titleArea>.page-titleArea_logo{
    width: min(58%, 39rem);
    margin-bottom: min(4vw, 2rem);
}

h2.pageContent-title{
    position: relative;
    text-align: center;
    z-index: 4;
    width: 90%;
}

h2.pageContent-title svg{
    height: min(7rem, 8.6vw);
}

@keyframes slide-in-text{
    0% {
        transform: translateX(-16%);
        opacity: 1;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

.svg-title{
    fill: var(--c-white);
}

.page-titleAnim path{
    opacity: 0;
    animation: slide-in var(--transition) .3s normal forwards;
}

.page-titleAnim path:nth-of-type(2){
    animation-delay: .35s;
}
.page-titleAnim path:nth-of-type(3){
    animation-delay: .4s;
}

.page-main{
    z-index: 2;
    position: relative;
}

.single-title{
    text-align: center;
}

.single-title>.topics-dateArea{
    justify-content: center;
}

.single-titleArea.page-titleArea{
    height: auto;
    margin: min(4rem,8vw) 0;
}

 @media screen and (min-width: 769px) {
    .page-titleArea{
        padding: min(4rem) 0 min(3rem);
    }

    .page-titleArea>.page-titleArea_logo{
        width: min(68%, 30rem);
        margin-bottom: min(5vw, 2rem);
    }

    .page-titleArea>.page-titleArea_logo a:hover{
        opacity: .6;
    }

    h2.pageContent-title svg{
        height: min(4.24rem,3.24vw);
    }


 }


 @media screen and (min-width: 1025px) {
}

/*--- page contents --*/
.page-contents{
    margin-bottom: var(--ps-margin);
}

.page-contents:last-of-type{
    margin-bottom: 0;
}

/*--- page title --*/
.page-contentsTitle{
    text-align: center;
    font-size: var(--font-224rem);
    font-weight: 600;
    margin-bottom: var(--titleB-margin);
    border: var(--b-brown);
    padding: min(.6rem);
    line-height: 1.5;
}

.contentsMenu-illust{
    position: absolute;
    z-index: 3;
}

/*-- coming soon --*/
.comingSoon{
    padding: 22% 0;
    text-align: center;
}

.comingSoon p{
    font-weight: 800;
    font-size: var(--font-224rem);
    text-transform: uppercase;
    color: var(--c-orange);
}
.comingSoon p span{
    display: block;
    font-size: min(4.4rem, 9.8vw);
    line-height: 1.4;
}

.comingSoon-image{
    width: min(63vw, 28rem);
    margin: 32px auto 0;
    position: relative;
}

/*-- tabMenu --*/
.js-tabContents {
	display: none;
	opacity: 0;
}

.js-tabContents.is-active {
    display: block;
    animation-name: displayAnime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}



/*----------
Topics
----------*/
.page-topics{
    background: var(--c-blue);
    color: var(--c-black);
    padding: var(--section-margin) 0;
}

.page-topics a{
    color: var(--c-black);
    font-weight: 600;
}

ul.page-topics_list{
    display: flex;
    flex-wrap: wrap;
    gap: min(2rem) min(1rem);
}

ul.page-topics_list>li{
    width: 100%;
}

/*-----single-----*/
.single-title{
    width: 90%;
}

.single-title h2{
    font-size: min(5.24vw, 2.4rem);
    word-wrap: break-word;
    line-height: 1.5;
}

.single-page_inner{
    margin-bottom: var(--section-margin);
}

.single-contents p{
    margin-top: min(2rem,4vw);
}
.single-contents p:first-of-type{
    margin-top: 0;
}

.single-contents p a{
    color: var(--c-blue);
    text-decoration: underline;
    font-weight: 600;
}

.page-single{
    margin-bottom:var(--section-margin);
}

.page-single .linkBox{
    border: 0.2rem solid var(--c-white);
}
.page-single .linkBox svg{
    fill: var(--c-white);
}

.page-single .linkBox span::before{
    color: var(--c-white);
}

.single-contents h1{
    font-size: min(2.24rem, 4.4vw);
    line-height: 1.5;
    border-bottom: .2rem solid #c2e1f6;
    position: relative;
    margin: min(3rem, 6vw) 0;
    padding-bottom: min(1rem);
}

.single-contents h1::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.2rem; /* border のすぐ下 */
    width: 100%;
    height: 0.2rem; /* 発光の厚み */
    box-shadow: 
        0 0 var(--box-blur) var(--glow6),
        0 0 var(--box-blur) var(--glow7),
        0 0 var(--box-blur) var(--glow5);
    pointer-events: none;
}

.single-contents h2{
    font-size: min(2rem, 4vw);
    line-height: 1.5;
    margin: min(2rem, 4vw) 0;
    border-left: solid min(.5rem, 1.24vw) var(--c-blue);
    padding-left: min(1rem, 2vw);
}

.single-contents h3{
    color: var(--c-blue);
    font-size: min(1.83rem, 3.83vw);
    margin: min(2rem, 4vw) 0
}

.single-contents blockquote{
    border: 0.2rem solid #ffffff;
    border-radius: min(.5rem);
    width: 100%;
    box-shadow: inset 0 0 0 0px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(0, 0, 0, 0.15), /* --- glow --- */ inset 0 0 var(--box-blur) var(--glow3), 0 0 var(--box-blur) var(--glow3), /* --- glow2 --- */ inset 0 0 var(--box-blur) var(--glow4), 0 0 var(--box-blur) var(--glow4), /* --- glow --- */ inset 0 0 var(--box-blur) var(--glow5), 0 0 var(--box-blur) var(--glow5);
    padding: calc(var(--bgw-margin) / 2);
    margin: min(3rem, 6vw) 0;
}

.single-contents blockquote p:first-of-type{
    margin: 0;
}


@media screen and (min-width: 521px) {
    ul.page-topics_list>li{
        width: calc((100% - min(1rem)) / 2);
    }
}

@media screen and (min-width: 769px) {
    .page-topics{
        padding: calc(var(--section-margin) / 2) 0;
    }

    .page-single{
        margin-bottom:calc(var(--section-margin) / 2);
    }

    /*-----single-----*/
    .single-page_inner{
        margin-bottom: var(--section-margin);
    }

    .single-contents p a:hover,.breadcrumbs a:hover{
        opacity: .6;
    }

}