@charset "UTF-8";


/* -- font
-------------------------------------------------------------------------------- */
@font-face {
    font-family: 'NotoSansJapanese';
    src: url('/about/project/yokokokuday/2021/css/font/NotoSansCJKjp-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSansJapanese';
    src: url('/about/project/yokokokuday/2021/css/font/NotoSansCJKjp-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'circular';
    src: url('/about/project/yokokokuday/2021/css/font/circular-book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'circular';
    src: url('/about/project/yokokokuday/2021/css/font/circular-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}


/* -- Base and Reset
-------------------------------------------------------------------------------- */
html {
	font-size: 62.5%;
}
body {
	font: 1.6rem/1.6 'circular', '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: 'circular', '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;
}
body.fix {
    overflow: hidden;
}
@media (max-width: 1280px){
    html {
        font-size: 56.25%;
    }
}
@media (max-width: 1024px){
    html {
        font-size: 8.75px;
    }
}
@media (max-width: 767px){
    html {
        font-size: 8.125px;
    }
}
@media (max-width: 414px){
    html {
        font-size: 7.5px;
    }
}
@media (max-width: 374px){
    html {
        font-size: 6.25px;
    }
}


/* -- scroll-fade
-------------------------------------------------------------------------------- */
.scroll-fade{
    opacity: 0;
    transform: translateX(12rem);
}
.scroll-fade.show{
    opacity: 1;
    transform: translateX(0);
    transition: 1s ease;
}
.scroll-fade.show.comp{
    transition: none;
}


/* -- txt-split
-------------------------------------------------------------------------------- */
.txt-split{
    display: flex;
    align-items: center;
}
.txt-split span{
    display: block;
    transform: translateX(24rem);
}
.txt-split.reverse{
    justify-content: flex-end;
}
.txt-split.reverse span{
    transform: translateX(-24rem);
}
.txt-split.show span{
    transform: translateX(0);
    transition: transform 1s ease;
}
.txt-split span span,
.txt-split.reverse span span{
    transform: scale(0,1);
    opacity: 0;
}
.txt-split.show span span,
.txt-split.reverse.show span span{
    transform: scale(1,1);
    opacity: 1;
    transition: transform 1s ease, opacity 1s ease;
}
.txt-split.show span:nth-child(2),
.txt-split.show span:nth-child(2) span{
    transition-delay: 0.04s;
}
.txt-split.show span:nth-child(3),
.txt-split.show span:nth-child(3) span{
    transition-delay: 0.08s;
}
.txt-split.show span:nth-child(4),
.txt-split.show span:nth-child(4) span{
    transition-delay: 0.12s;
}
.txt-split.show span:nth-child(5),
.txt-split.show span:nth-child(5) span{
    transition-delay: 0.16s;
}
.txt-split.show span:nth-child(6),
.txt-split.show span:nth-child(6) span{
    transition-delay: 0.2s;
}
.txt-split.show span:nth-child(7),
.txt-split.show span:nth-child(7) span{
    transition-delay: 0.24s;
}
.txt-split.show span:nth-child(8),
.txt-split.show span:nth-child(8) span{
    transition-delay: 0.28s;
}
.txt-split.show span:nth-child(9),
.txt-split.show span:nth-child(9) span{
    transition-delay: 0.32s;
}
.txt-split.show span:nth-child(10),
.txt-split.show span:nth-child(10) span{
    transition-delay: 0.36s;
}


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


/* -- header
-------------------------------------------------------------------------------- */
header{
    width: 100%;
    box-sizing: border-box;
    padding: 4rem 4%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}
header.scroll-fade{
    transform: translateX(0);
    top: -11rem;
}
header.scroll-fade.show{
    top: 0;
}
header .logo{
    display: block;
    height: 3rem;
}
header .logo span{
    display: block;
    height: 100%;
}
header .logo span.sp{
    display: none;
}
header .logo img{
    height: 100%;
}
header nav{
    display: flex;
}
header nav a{
    font-weight: bold;
    letter-spacing: 0.04em;
}
header nav a + a{
    margin-left: 4rem;
}
@media (max-width: 767px){
    header {
        padding: 4rem 6%;
    }
    header .logo span.pc{
        display: none;
    }
    header .logo span.sp{
        display: block;
    }
    header nav a + a {
        margin-left: 3.2rem;
    }
}


/* -- main-visual
-------------------------------------------------------------------------------- */
.main-visual{
    height: 100vh;
    min-height: 700px;
    max-height: 1000px;
    overflow: hidden;
    position: relative;
}
.ttl-area{
    font-size: 1rem;
    height: 75%;
    min-height: 525px;
    max-height: 750px;
    position: absolute;
    display: flex;
    align-items: center;
    padding-left: 16%;
    z-index: 1;
}
.ttl-area .ttl-area-inner{
    position: relative;
}
.ttl-area .sub-ttl{
    height: 8em;
    margin-left: -4em;
    margin-bottom: -1.2em;
}
.ttl-area .sub-ttl img{
    height: 100%;
}
.ttl-area .ttl{
    font-size: 6em;
    line-height: 1;
    letter-spacing: 0.08em;
}
.ttl-area .ttl .fs-L{
    font-size: 1.1em;
    letter-spacing: 0.04em;
}
.ttl-area .ttl .ls-L{
    margin-left: 0.04em;
}
.ttl-area .txt{
    margin-top: 2.4em;
}
.ttl-area .txt p{
    font-size: 2em;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 0.04em;
}
.ttl-area .txt p span{
    color: #f90;
}
.ttl-area .leaf{
    height: 2.4em;
    position: absolute;
    top: 6em;
    right: 24.4em;
    transform: translateX(0);
}
.main-visual .ttl-area .leaf{
    top: -4em;
}
.main-visual .ttl-area .leaf.show{
    animation: fall 4s ease-in-out forwards, sway 4s ease-in-out alternate forwards;
}
@keyframes fall {
    to {
        top: 6em;
    }
}
@keyframes sway {
    0% {
        transform: translateX(0px) rotate(0deg);
    }
    40% {
        transform: translateX(7em) rotate(-45deg);
    }
    80% {
        transform: translateX(-1em) rotate(5deg);
    }
    100% {
        transform: translateX(0) rotate(0);
    }
}
.leaf img{
    height: 100%;
}
.catch-area{
    position: absolute;
    top: 20%;
    right: 8%;
    z-index: 1;
}
@media (max-height: 700px){
    .catch-area{
        top: 14rem;
    }
}
@media (min-height: 1000px){
    .catch-area{
        top: 20rem;
    }
}
.catch-area p{
    width: 100;
    font-size: 2rem;
    font-weight: bold;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
/*     letter-spacing: 0.32em;
     writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl; */
}
.catch-area p span{
    display: block;
}
/*  .catch-area p span + span{
    margin-top: 1.32em;
} */
.img-area{
    height: 100%;
    position: relative;
}
.img-area .img{
    width: 100%;
    position: absolute;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.img-area .img-1{
    animation: disp2 30s ease infinite;
    bottom: calc(-32rem + 16%);
    opacity: 0.8;
}
.img-area .img-2{
    bottom: calc(-36rem + 16%);
    animation: disp 30s ease infinite reverse;
}
@keyframes disp {
    0% {
        transform: translate(0,0);
    }
    25% {
        transform: translate(2rem,2rem);
    }
    50% {
        transform: translate(0,0);
    }
    75% {
        transform: translate(0,-2rem);
    }
    100% {
        transform: translate(0,0);
    }
}
@keyframes disp2 {
    0% {
        transform: translate(0,0);
    }
    25% {
        transform: translate(1.2rem,1.2rem);
    }
    50% {
        transform: translate(0,0);
    }
    75% {
        transform: translate(0,-1.2rem);
    }
    100% {
        transform: rotate(0deg) translate(0,0);
    }
}
.img-area .img img{
    width: 100%;
    min-width: 1500px;
    transform: scale(1.02);
}
@media (max-width: 767px){
    .main-visual{
        min-height: 454px;
        max-height: none;
    }
    .ttl-area{
        font-size: 0.9rem;
        height: 100%;
        min-height: auto;
        max-height: none;
        padding-left: 12%;
    }
    .catch-area{
        top: 14%;
    }
    .img-area .img-1{
        bottom: calc(-20rem + 16%);
    }
    .img-area .img-2{
        bottom: calc(-24rem + 16%);
    }
    .img-area .img img {
        min-width: 640px;
    }
}


/* -- section
-------------------------------------------------------------------------------- */
section .section-inner{
    padding: 16rem 12%;
    box-sizing: border-box;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}
section .section-ttl{
    margin-bottom: 8rem;
}
section .section-ttl .en{
    font-size: 8rem;
    line-height: 1.2;
    letter-spacing: 0.04em;
    transition: none;
}
section .section-ttl .jp{
    display: block;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
}
@media (max-width: 767px){
    section .section-inner{
        padding: 12rem 12%;
    }
    section .section-ttl{
        margin-bottom: 6rem;
    }
    section .section-ttl .en{
        font-size: 6rem;
    }
}


/* -- lead
-------------------------------------------------------------------------------- */
.lead{
    height: 16rem;
    background: #eff2ef;
    position: relative;
}
.lead .section-inner{
    width: 100%;
    padding: 0;
    position: relative;
    transform: translateY(calc(-100% + 20rem));
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}
.lead .lead-body-wrap{
    width: 35%;
    margin-left: auto;
    margin-right: 12%;
}
.lead .lead-body{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 6rem 5.2rem;
    background: #fff;
}
.lead .lead-body.scroll-fade{
    transform: translateY(12rem);
}
.lead .lead-body.scroll-fade.show{
    transform: translateY(0);
}
.lead .lead-ttl{
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    margin-bottom: 2.4rem;
    color: #f90;
}
.lead p{
    font-weight: bold;
    line-height: 2.2;
    text-align: justify;
}
.lead p + p{
    margin-top: 2em;
}
.lead .leaf{
    height: 9rem;
    position: absolute;
    right: -2.4rem;
    bottom: -3.2rem;
}
@media (max-width: 767px){
    .lead {
        height: auto;
        padding: 0 6%;
        margin-bottom: -12rem;
    }
    .lead .section-inner {
        transform: translateY(0);
        transition: transform 1s ease;
    }
    .lead .lead-body-wrap{
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    body.loaded .lead .section-inner {
        transform: translateY(-12rem);
    }
    .lead .lead-body {
        padding: 4.8rem 4rem;
    }
    .lead .lead-body.scroll-fade {
        transform: translateY(0);
    }
}


/* -- imgs
-------------------------------------------------------------------------------- */
.imgs{
    display: block;
    margin: 0;
    background: #eff2ef;
    position: relative;
}
.imgs .imgs-inner{
    overflow: hidden;
    transform: none;
}
.imgs ul{
    white-space: nowrap;
    margin: 0 -1rem;
    animation: rotate 90s linear infinite;
}
@keyframes rotate {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-58.4rem * 6));
    }
}
.imgs li{
    display: inline-block;
    width: 56rem;
    height: 56rem;
    margin: 0 1rem;
}
.imgs li img{
    width: 100%;
    height: 100%;
    object-fit:cover; 
}
.leaf{
    position: absolute;
}
.leaf.leaf-1{
    height: 18rem;
    top: -12rem;
    left: -0.1rem;
}
.leaf.leaf-2{
    height: 16rem;
    bottom: -10rem;
    right: 6rem;
}
@media (max-width: 767px){
    @keyframes rotate {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(calc(-42.4rem * 3));
        }
    }
    .imgs ul{
        animation-duration: 30s;
    }
    .imgs li{
        display: inline-block;
        width: 40rem;
        height: 40rem;
        margin: 0 1rem;
    }
    .leaf.leaf-1 {
        height: 16rem;
        top: -8rem;
    }
    .leaf.leaf-2 {
        height: 14rem;
        bottom: -8rem;
        right: 4rem;
    }
}


/* -- event
-------------------------------------------------------------------------------- */
.event{
    background: #eff2ef;
}
.event .section-inner{
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}
.event .section-ttl{
    padding-left: 12%;
    padding-right: 12%;
    box-sizing: border-box;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}
.card-wrap{
    padding-left: 8%;
    padding-right: 8%;
    padding-bottom: 4rem;
    box-sizing: border-box;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}
.card{
    display: flex;
    flex-wrap: wrap;
}
.card {
    margin: -8rem -2rem 0;
}
.card li{
    width: 50%;
    box-sizing: border-box;
    padding: 0 2rem;
    margin-top: 8rem;
    position: relative;
}
.card li:nth-child(3n + 2){
    transform: translateY(4rem);
}
.card li:nth-child(3n + 3){
    transform: translateY(8rem);
}
.card a,
.card .card-inner-wrap{
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 2rem;
    overflow: hidden;
}
.card a.active{
    visibility: hidden;
    opacity: 0;
}
.card .card-inner{
    width: 100%;
    height: 100%;
    position: relative;
}
.card .card-img{
    width: 100%;
    padding-top: 70%;
    position: relative;
}
.card .card-img span{
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.card .card-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}
.card .card-body{
    padding: 4.8rem 4rem calc(4.8rem + 3.2rem + 2.4rem);
    position: relative;
}
.card .card-body .ttl{
    font-size: 2rem;
    line-height: 1.4;
    letter-spacing: 0.08em;
}
.card .card-body .ttl .en{
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    margin-bottom: 1.6rem;
    color: #f90;
}
.card .card-body .ttl .schedule,
.modal-content .schedule{
    font-size: 1.6rem;
    letter-spacing: 0;
    line-height: 1.4;
    margin-top: 0.6rem;
    color: #999;
    display: flex;
    flex-wrap: wrap;
}
.card .card-body .ttl .schedule span,
.modal-content .schedule span{
    margin-right: 1em;
}
.card .card-body .ttl .schedule span + span,
.modal-content .schedule span + span{
    margin-right: 0;
}
.card .card-body .txt{
    margin-top: 2rem;
    line-height: 1.8;
    text-align: justify;
}
.card .detail-btn{
    position: absolute;
    bottom: 2.4rem;
    right: 2.4rem;
}
.card .detail-btn p{
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.card .detail-btn .txt{
    margin-right: 1.2rem;
}
.card .detail-btn .mark{
    display: block;
    width: 4.8rem;
    height: 4.8rem;
    background: #000;
    border-radius: 50%;
    position: relative;
}
.card .detail-btn .mark::before{
    content: "";
    display: block;
    width: 1.4rem;
    height: 0.4rem;
    position: absolute;
    top: 50%;
    left: 50%;
    background: url(/about/project/yokokokuday/2021/img/ico_mark.svg) no-repeat center;
    transform: translate(-50%, -50%);
}
.card .ttl-icon{
    display: block;
    font-family: 'NotoSansJapanese', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    background: #7f0019;
    color: #fff;
    border-radius: 3.2rem;
    padding: 0.6rem 1.2rem 0.7rem;
    position: absolute;
    top: 2.4rem;
    right: 2.4rem;
}
@media (max-width: 767px){
    .event .section-inner {
        padding-top: 12rem;
    }
    .card-wrap{
        padding-bottom: 0;
        padding-left: 6%;
        padding-right: 6%;
    }
    .card {
        margin: -4rem -1rem 0;
    }
    .card li {
        padding: 0 1rem;
        margin-top: 4rem;
    }
    .card .card-body {
        padding: 3.2rem 2.4rem calc(4.8rem + 1.6rem + 2.4rem);
    }
    .card .detail-btn .txt{
        display: none;
    }
    .card .ttl-icon {
        top: auto;
        right: auto;
        left: 2.4rem;
        bottom: 2.4rem;
    }
    .event .card li {
        width: 100%;
    }
    .event .card li:nth-child(3n + 2) {
        transform: translateY(0);
    }
}
<style type="text/css">
#slideshow {
   position: relative;
   width:  900px; /* 画像の横幅に合わせて記述 */
   height: 600px; /* 画像の高さに合わせて記述 */
}
#slideshow img {
   position: absolute;
   top: 0;
   left:0;
   z-index: 8;
   opacity: 0.0;
}
#slideshow img.active {
   z-index: 10;
   opacity: 1.0;
}
#slideshow img.last-active {
   z-index: 9;
}
</style>

/* -- project
-------------------------------------------------------------------------------- */
.project{
    background: #eff2ef;
}
.project .section-inner{
    padding-left: 0;
    padding-right: 0;
    max-width: none;
    background: #eff2ef; /* 入れ替え後追記 */
}
.project .section-ttl{
    padding-left: 12%;
    padding-right: 12%;
    text-align: right;
    margin-bottom: 4rem;
    max-width: 1600px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
.project .card-wrap{
    padding-bottom: 4rem;
}
.project .card li{
    width: 33.3%;
}
.project .card .card-body .number{
    font-size: 4.8rem;
}
@media (max-width: 960px){
    .project .card li{
        width: 50%;
    }
    .project .card li:nth-child(3n + 2){
        transform: translateY(0);
    }
    .project .card li:nth-child(3n + 3){
        transform: translateY(0);
    }
    .project .card li:nth-child(2n + 2){
        transform: translateY(4rem);
    }
}
@media (max-width: 767px){
    .project .section-ttl {
        margin-bottom: 2rem;
    }
}


/* -- outline
-------------------------------------------------------------------------------- */
.outline{
    background: #d6e5db;
    position: relative;
}
.outline::before{
    content: "";
    display: block;
    width: 100%;
    height: 40%;
    background: url(/about/project/yokokokuday/2021/img/img_2.png) no-repeat center top;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0.4;
}
.outline .section-inner{
    position: relative;
    overflow: hidden;
    padding-bottom: 40rem;
}
.outline .outline-body{
    display: flex;
    justify-content: flex-end;
    position: relative;
}
.outline .outline-img{
    width: 24rem;
    height: 24rem;
}
.outline .outline-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.outline .outline-list{
    width: 65%;
}
.outline .outline-list dl{
    display: flex;
    border-bottom: solid 1px rgba(0,0,0,0.07);
}
.outline .outline-list dl:first-child{
    border-top: solid 1px rgba(0,0,0,0.07);
}
.outline .outline-list dt,
.outline .outline-list dd{
    padding: 2.4rem 0;
}
.outline .outline-list dt{
    width: 10em;
}
.outline .outline-list dd{
    flex: 1;
}
.outline .leaf{
    height: 20rem;
    position: absolute;
    top: -10rem;
    left: 0;
}
@media (max-width: 767px){
    .outline .outline-list {
        width: 100%;
    }
    .outline .outline-list dt {
        width: 7em;
    }
    .outline .section-inner{
        padding-bottom: 24rem;
    }
    .outline .section-inner::before{
        height: 20%;
    }
    .outline .leaf {
        height: 16rem;
        top: -8rem;
    }
}


/* -- footer
-------------------------------------------------------------------------------- */
footer{
    background: #fff;
}
footer .footer-inner{
    padding: 16rem 12%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
footer .ttl-area{
    height: auto;
    font-size: 0.7rem;
    min-height: auto;
    padding-left: 0;
    position: relative;
}
footer .copyright{
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: #999;
    margin-top: 3.2rem;
}
footer .sns-area {
    display: flex;
}
footer .sns-area a{
    display: block;
    width: 4rem;
    height: 4rem;
}
footer .sns-area a + a{
    margin-left: 1.2rem;
}
footer .sns-area a svg{
    width: 100%;
}
@media (max-width: 767px){
    footer .footer-inner {
        display: block;
        padding-top: 12rem;
        padding-bottom: 6rem;
        padding-right: 8%;
    }
    footer .sns-area {
        margin-top: 12rem;
        justify-content: flex-end;
    }
}


/* -- modal
-------------------------------------------------------------------------------- */
.modal{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}
.modal.active{
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}
.modal::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.modal.show::before{
    opacity: 1;
}
.modal .card{
    display: block;
    width: 0;
    height: 0;
    margin: 0;
    position: absolute;
    z-index: 1;
}
.modal.active .card{
    width: 100%;
    height: 100%;
}
.modal .card .card-inner-wrap{
    position: absolute;
    z-index: 1;
    transform: translate(-50%,-50%);
}
.modal.active .card .card-inner-wrap{
    transition: 0.6s ease;
}
.modal.show .card .card-inner-wrap{
    box-shadow: 0 1.2rem 4.8rem rgba(0,0,0,0.3);
}
.modal.active.moved .card .card-inner-wrap{
    width: 900px!important;
    height: 80%!important;
    top: 50%!important;
    left: 50%!important;
}
.modal .card .card-inner{
    top: 0!important;
    left: 0!important;
}
.modal .card .modal-body{
    height: 100%;
    display: none;
}
.modal .card .modal-body .modal-body-ttl{
    height: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-bottom: solid 1px #f0f0f0;
    position: relative;
}
.modal .card .modal-body .modal-body-ttl p{
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: #f90;
}
.modal .card .modal-body .modal-body-ttl .modal-close-btn{
    width: 4.8rem;
    height: 4.8rem;
    position: absolute;
    top: 50%;
    right: 1.2rem;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal .card .modal-body .modal-body-ttl .modal-close-btn svg{
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    fill: none;
    stroke: #1a1a1a;
    stroke-width: 3;
    transition: 0.1s ease;
}
.modal .card .modal-body .modal-body-inner{
    height: calc(100% - 7rem);
    padding: 6rem 5.2rem;
    box-sizing: border-box;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
.modal .card .modal-body .modal-content{
    display: none;
}
.modal .card .modal-body .modal-content.active{
    display: block;
}
@media (max-width: 1024px){
    .modal.active.moved .card .card-inner-wrap{
        width: 90%!important;
    }
}
@media (max-width: 767px){
    .modal.active.moved .card .card-inner-wrap {
        width: 88%!important;
    }
    .modal .card .modal-body .modal-body-inner {
        padding: 4rem 3.2rem;
    }
}


/* -- modal-content
-------------------------------------------------------------------------------- */
.modal-content .ttl-wrap{
}
.modal-content .ttl-icon{
    display: inline-block;
    position: static;
    margin-bottom: 2rem;
}
.modal-content .ttl{
    flex: 1;
    font-size: 2.6rem;
    line-height: 1.4;
    letter-spacing: 0.08em;
}
.modal-content .schedule{
    font-weight: bold;
}
.modal-content .sub-ttl{
    letter-spacing: 0.04em;
    margin-top: 2.4rem;
    margin-bottom: 0.8rem;
}
.modal-content .txt{
    line-height: 2;
    text-align: justify;
}
.modal-content .txt a{
    display: inline;
    text-decoration: underline;
    color: #7f0019;
}
.modal-content .content-body{
    margin-top: 3.2rem;
}
.modal-content .content-body .video {
    width: 100%;
    padding-top: 56.25%;
    border-radius: 0.3125rem;
    background: #f0f0f0;
    overflow: hidden;
    position: relative;
    margin-top: 4.8rem;
}
.modal-content .content-body iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}


/* -- intro
-------------------------------------------------------------------------------- */
.intro{
    width: 100%;
    height: 100%;
    background: #d6e5db;
    position: fixed;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}
.intro.disable{
    opacity: 0;
    transition: opacity 1s ease;
}
.intro.hide{
    display: none;
}
.intro .intro-inner{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.intro .ttl{
    width: 40.7rem;
    height: 12rem;
    margin-bottom: -2.4rem;
}
.intro .ttl span{
    display: block;
    width: 0;
    height: 100%;
    overflow: hidden;
    transform: translateX(-12rem) scale(1);
}
.intro.active .ttl span{
    width: 100%;
    transform: translateX(0) scale(1);
    transition: width 1s ease, transform 1s ease, opacity 0.3s ease;
}
.intro.active.disable .ttl span{
    transform: translateX(0) scale(0);
    opacity: 0;
}
.intro .ttl img{
    width: 40.7rem;
    height: 12rem;
}
.intro .txt{
    font-weight: bold;
    letter-spacing: 0.04em;
    line-height: 1.4;
    opacity: 0;
}
.intro .txt p span {
    color: #f90;
}
.intro.active .txt{
    opacity: 1;
}
.intro.disable .txt{
    transition: opacity 0.3s ease;
    opacity: 0;
}
@media (max-width: 767px){
}


/* -- hover
-------------------------------------------------------------------------------- */
@media (min-width: 1025px){
    header nav a,
    .card .detail-btn .mark,
    footer .sns-area a svg,
    .modal .card .modal-body .modal-body-ttl .modal-close-btn svg{
        transition: 0.2s ease;
    }
    header nav a:hover{
        color: #f90;
    }
    .card a:hover .detail-btn .mark{
        background: #f90;
    }
    .card a:hover .card-img img{
        transform: scale(1.06);
    }
    footer .sns-area a:hover svg{
        fill: #f90;
    }
    .modal .card .modal-body .modal-body-ttl .modal-close-btn:hover svg{
        stroke: #f90;
    }
}