:root {
    --color-main: #cbcbcb;
    --color-bg: #D2D2D2;
    --color-text: #000000;
    --color-accent: #f93232;
    --color-accent-dark: #AB1F24;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/* Base (スマホ・共通レイアウト) */
html, body {
    overflow-x: hidden;
}
body {
    font-family: 'ten-mincho','ten-mincho-text',sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    margin: 0;
    width: 100%;
    text-align: center;
}
img {
    aspect-ratio: attr(width) / attr(height);
    max-width:100%;
    height: auto;
}
section { 
    overflow: hidden; 

}
a { 
    text-decoration: none; 
}

ul { 
    padding: 0; margin: 0; list-style: none; 
}

.iphone-br { 
    display: inline; 
}

.pc-br { 
    display: none; 
}

.mid-br { 
    display: none; 
}

/* Header */
#header-top { 
    display:none;
    /*display: flex;
    justify-content:space-evenly;
    align-items:center;*/
}

header { 
    background-color: var(--color-bg); 
    padding: 0vw 0 
}

.header-picture_1 { 
    display: block; 
    position: relative; 
    z-index: 10; 
    width: 100%; 
}

.header-picture_1 img { 
    aspect-ratio: 650 / 650; 
    animation: spin 70s linear infinite;
}

.header-picture_2 { 
    display: block; 
    position: relative; 
    z-index: 10; 
    width: 100%; 
    margin-top:-101%;
    margin-left:-0.5%;
}

.header-picture_2 img { 
    aspect-ratio: 650 / 650; 
}

.header-fmr, .header-title, .header-subtitle, .header-date, .header-place {
    color: var(--color-text); 
    width: 100%; 
    text-align: center;
}

.header-fmr { 
    top: 50%; 
    font-size: 3.8vw; 
}
.header-title { 
    top: 59%;
    font-size: clamp(10vw,7vw,5vw);
    text-align:center;
    text-decoration: none;
    text-decoration-line: none;
}

.header-fmr { 
    top: 90%;
    font-size: 4vw; 
    text-align:center;
}
.header-date { 
    top: 77%;
    font-size: 3.5vw; 
    line-height: 2; 
    letter-spacing: 0.1rem; 
    text-align:center;
}
.header-place { 
    top: 83%; 
    font-size: 3.5vw; 
    line-height: 2; 
    letter-spacing: 0.1rem; 
    text-align:center;
}
/* Header終わり */

.motif1{
        display:none;
    }
.motif2{
        display:none;
    }
.motif3{
        display:none;
    }
.motif4{
        display:none;
    }

/* Concept */
.about-exhibition { 
    padding: 50px 2%; 
}
.h2-concept { 
    font-size: 13vw; 
    font-weight: 900; 
    margin-bottom: 7%; 
    margin-right:3vw;
    text-align: right;
    letter-spacing:-0.04em;
}

.about-title-sentence-1 { 
    font-size: clamp(2.5vw,2vw,1vw); ; 
    line-height: 1.3; 
    display: inline-block;
    writing-mode: vertical-rl;
    text-align: left;
    margin-bottom:10%;
    
}
.about-title-sentence-2 { 
    font-size: clamp(2.5vw,2vw,1vw); ; 
    line-height: 1.36; 
    display: inline-block;
    writing-mode: vertical-rl;
    text-align: left;
    margin-left:1%;
}
.concept-big{
    display: inline-block;
    font-size:5.5vw;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}
.concept-big.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.concept-ruby {
    display: inline-block; 
    vertical-align: middle;
    font-size: 1.7vw;
    margin: 0.5em 0;
    margin-top: -0.8em;
}
.concept-ruby span {
    display: block;
    line-height: 1.4;
}
.concept-ruby-1{
    font-size:1.7vw;
    margin-bottom:3%;
}
.concept-answer{
    color:var(--color-accent);
    font-size:5vw;
    display: inline-block;
      animation: blink 1s ease-in-out infinite;
}

/* Concept終わり */

/* About FMR */
.about-fmr { 
    padding: 10% 5%;
}
.about-title{
    font-size: 13vw; 
    font-weight: 900; 
    margin-bottom: 12%; 
    margin-right:3vw;
    text-align: right;
    letter-spacing:-0.04em;
    line-height:0.9em;
}
.about-comment { 
    font-size: 3vw; 
    line-height:1.8; 
    display: inline-block;
    writing-mode: vertical-rl;
    text-align: left;
    margin-right:5%;
}

.about-comment-sentence-1-iphone{
    font-size: clamp(2.5vw,2vw,1vw); 
    line-height: 1.5; 
    display: inline-block;
    writing-mode: vertical-rl;
    text-align: left;
    margin-bottom:10%;
}
.about-comment-sentence-1-pc{
    display: none;
}
.about-comment-sentence-2{
    font-size: clamp(2.5vw,2vw,1vw); 
    line-height: 1.5; 
    display: inline-block;
    writing-mode: vertical-rl;
    text-align: left;
    margin-bottom:10%;
}
.about-comment-sentence-3{
    font-size: clamp(2.5vw,2vw,1vw); ; 
    line-height: 1.8; 
    display: inline-block;
    writing-mode: vertical-rl;
    text-align: left;
    margin-bottom:10%;
}
.about-comment-sentence-4{
    font-size: clamp(2vw,2vw,1vw); ; 
    line-height: 1.7; 
    display: inline-block;
    writing-mode: vertical-rl;
    text-align: left;
    margin-bottom:10%;
}
/* About FMR終わり*/

/* Works */
.works { 
    margin: 55px 0 85px;
    scroll-margin-top: 80px;
}
.works-title { 
    font-size: clamp(48px, 13vw, 160px); 
    font-weight: 900; 
    margin: 0 8vw 12% 0;
    text-align: right;
    letter-spacing:-0.04em;
    line-height:0.9em;
}

.works-content{
    list-style: none;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 5vw;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(28px, 4vw, 56px);
}

.works-item {
    opacity: 1;
    transition: opacity 0.5s;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.works-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.works-item.is-visible:hover {
  opacity: 0.8;
}

.works-item:hover { 
    opacity: 0.8; 
}

.works-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.works-icon {
    width: 100%;
    aspect-ratio: 4 / 4.5;
    overflow: hidden;
    border-radius: 50cqw 50cqw 0 0;
    container-type: inline-size;
}

.works-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.works-item-name {
    font-size: clamp(16px, 2vw, 26px);
    font-weight: 400;
    color: var(--color-text);
    margin-top: 10px;
    text-align: center;
    transition: color 0.3s;
}

.works-item:hover .works-item-name {
    color: var(--color-accent);
}

.works-link:focus-visible .works-item-name {
    color: var(--color-accent);
}
 /* Works終わり */

/* Information */
.information { 
    background-color: var(--color-bg); 
    padding: 5vw 0; 
    color: var(--color-text); 
}
.information-title { 
    font-size: 13vw; 
    font-weight: 900; 
    margin-bottom: 12%; 
    margin-right:1.3vw;
    text-align: right;
    letter-spacing:-0.04em;
    line-height:0.9em;
}
.information-content { 
    display: flex; 
    flex-direction: column; 
}
.information-map {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
}

.information-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.information-area { 
    width: 100%; 
    padding: 0 5vw;

}
.information-date-area, 
.information-location-area, 
.information-access-area, 
.information-reservation-area, 
.information-organizer-area,
.information-supervisor-area { 
    display: flex; 
    padding: 0; 
    margin-bottom: 1vw; 
}
.information-area-left { 
    width: 30%;
    font-size: clamp(14px, 4vw, 20px);
    line-height: 2;
    text-align: left;
}
.information-area-right { 
    width: 70%; 
    font-size: clamp(14px, 4vw, 20px);
    line-height: 2; 
    letter-spacing: 0.1em; 
    text-align: left; 
}
.information-area-right a { 
    color: inherit; 
    transition: color 0.3s; 
    word-break: break-all;

}
.information-area-right a:hover { 
    color: var(--color-accent); 
}
/* Information終わり */

/* Credit */
.credit { 
    background-color: var(--color-accent-dark); 
    padding-bottom: 10vw; 
    color:var(--color-main);
}
.job{
    font-size:3vw;
}
.names{
    font-size:2.4vw;
}

/* Credit終わり */

/* Footer */
#footer { 
    background-color: var(--color-main); 
}


.ex-exhibition{
    margin-left: 11vw;
    margin-right: 11vw;
    margin-bottom:4%;
    color: var(--color-accent-dark);
    display: block;	
    background-color:var(--color-bg);
    height: 12vw;
    line-height: 12vw;
    border-radius: 10px;
    text-align: center;	
    text-decoration: none;
    font-size: 4vw;
    margin-top:7%;
    letter-spacing:1em;
    text-indent:1em;
}
.sns-icon { 
    display: flex; 
    justify-content: center; 
    gap: 20px; 
    margin-top: 20px; 
}
.ig-icon, .x-icon { 
    width: 40px; 
    height: auto; 
}
.copyright {
    color: var(--color-white); 
    text-align: center; 
    margin-top: 7em; 
    font-size: 2vw; 
}
/* Footer終わり */

/* タブレット (min-width: 600px) */
@media (min-width: 600px) and (max-width: 960px) {
    .works-content { grid-template-columns: repeat(2, 1fr); }
    /* iPad等で横に伸びすぎないようにする調整 */
    .header-picture_1, .header-picture_2 { max-width: 600px; margin: 0 auto; }
    .header-picture_2 { margin-top: -600px; /* max-widthに合わせて調整 */ }
}


/* PC画面 (min-width: 961px) */
@media screen and (min-width: 961px) {
    .iphone-br { display: none; }
    .pc-br{ display: inline;}
    
    nav { 
        width: 4.5rem; 
        height: 100vh; 
        /*background-color: var(--color-accent-dark); */
        font-size: 1rem; 
        position: fixed; 
        top: 0; 
        right: 0; 
        z-index: 30; 
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    nav.is-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
        
    
    #header-top { 
        display: flex; 
        flex-direction: column; 
        justify-content: right; 
        align-items: center; 
        height: 100%; 
        padding: 2vh 0;
        margin: 0;
        list-style: none;
        gap: clamp(1rem, 6vh, 4rem);
    }

    nav a { 
        color: var(--color-white); 
        text-decoration: none;
        letter-spacing: 0.15em;
        transition: color 0.3s; 
        writing-mode: vertical-rl;
    }
    
    nav a.hover { 
        color: var(--color-accent); 
    }

    header { 
        padding-bottom:3vw; 
        padding-left:20vw;
        padding-right:20vw;
        padding-top:0.1vw;
        
    }
    .header-picture img { 
        aspect-ratio: 100 / 100; 
    }
    .header-fmr,
    .header-title,
    .header-date,
    .header-place {
    position: static;      /* top/left/rightを無効化して重なりを防ぐ */
    width: 100%;
    margin: 0;
    text-align: center;
}
    .header-fmr { 
        margin-left: -15vw; 
        margin-top:5vw;
        margin-bottom:2vw;
        font-size: clamp(2.5vw, 4vw, 30px); 
        text-align: right; 
        letter-spacing: 0.4em;
        text-align: left;  
        box-sizing: border-box;
    }
    .header-title {
        position:relative;
        z-index:4;
        font-size: 8.5vw; 
        line-height: 1.3;
        white-space: nowrap;   /* 途中で折り返さない */
        margin: 2vw 0;
        text-align:right;
        margin-left:8.5vw;
    }
    .header-date { 
        margin-bottom:2vw;
        margin-left: -15vw; 
        font-size: clamp(2.5vw, 4vw, 30px); 
        letter-spacing: 0.2em;
        line-height: 2;
        text-align: left; 

    }
    .header-place { 
        margin-left: -15vw; 
        font-size: clamp(2.5vw, 4vw, 30px); 
        letter-spacing: 0.2em;
        line-height: 2;
        text-align: left;  
        box-sizing: border-box;
    }

    .motif1 {
        position: absolute;
        z-index: 1;
        display: block;
        width: 45vw;
        height: auto;
        transform-origin: top left;
        transform: rotate(140deg);
        margin-top: 19%;
        margin-left: 30%;; 
    }

    .motif1 img {
        width: 100%;
        height: auto;
        display: block;
    }

    .motif2 {
        position: absolute;
        z-index: 1;
        display: block;
        width: 45vw;
        height: auto;
        transform-origin: top left;
        transform: rotate(-140deg);
        margin-top: 47.9%;
        margin-left: 30.9%;; 
    }

    .motif2 img {
        width: 100%;
        height: auto;
        display: block;
    }

    .about-exhibition { 
        padding: 5% 5%;
    }
    .h2-concept { 
        font-size: 8.6vw; 
        margin-bottom: 10%; 
        margin-top:20%;
        margin-right:40vw;
        text-align:center;
        position: relative;
        z-index: 2;
    }

    .about-title-sentence-1 { 
    font-size: 1.5vw;
    line-height:2;
    }
    .about-title-sentence-2 { 
    font-size: 1.5vw;
    line-height:2.3;
    margin-left:-5vw;
    }
    .concept-big{
        font-size:3.4vw;
        margin-top:-0.3em;
    }
    .concept-ruby {
        display: inline-block; 
        vertical-align: middle;
        font-size: 1vw;
        margin: 0.5em 0;
        margin-top: -1em;
    }
    .concept-ruby span {
        display: block;
        line-height: 1.4;
    }
    .concept-ruby-1{
        font-size:1.7vw;
        margin-bottom:3%;
    }
    .concept-answer{
        color:var(--color-accent);
        font-size:5vw;
        margin-bottom:0.2em;
    }


    .about-title { 
        font-size:8.6vw; 
        margin-bottom:10%; 
        margin-right:10%;
        text-align:right;

    }
    .about-comment-sentence-1-pc{ 
    display:inline-block;
    font-size: 1.5vw;
    line-height:2.2;
    writing-mode: vertical-rl;
    text-align: left;
    margin-bottom:5%;
    }
    .about-comment-sentence-1-iphone{
        display: none;
    }

    .about-comment-sentence-2 { 
    font-size: 1.5vw;
    line-height:2.2;
    }
    .about-comment-sentence-3 { 
    font-size: 1.5vw;
    line-height:2.2;
    }

    .motif3 {
        position: absolute;
        z-index: 1;
        display: block;
        width: 45vw;
        height: auto;
        transform-origin: top left;
        transform: rotate(180deg);
        margin-top: -5%;
        margin-left: 90%;
    }

    .motif3 img {
        width: 100%;
        height: auto;
        display: block;
    }

    .motif4 {
        position: absolute;
        z-index: 1;
        display: block;
        width: 45vw;
        height: auto;
        transform-origin: top left;
        transform: rotate(-90deg);
        margin-top: 14.5%;
        margin-left: 64.6%;; 
    }

    .motif4 img {
        width: 100%;
        height: auto;
        display: block;
    }

    .about-comment { 
        font-size:1.5vw; 
        line-height:2;
    }


    .works { 
        margin: 25px 0 85px;
    }
    .works-title { 
        font-size: clamp(60px, 8.6vw, 180px);
        text-align: center;
        margin-right: 0;
        margin-bottom: 10%;
    }
    
    .works-content{
        grid-template-columns: repeat(6, 1fr);
    }

    .works-item {
        grid-column: span 2;
    }
    .works-item:nth-child(10) {
        grid-column: 3 / span 2;
    }

    .works-item:nth-child(-n+3) {
        transform: translateX(-3vw);
    }
    .works-item:nth-child(n+4):nth-child(-n+6) {
        transform: translateX(-1vw);
    }
    .works-item:nth-child(n+7):nth-child(-n+9) {
        transform: translateX(1vw);
    }
    .works-item:nth-child(10) {
        transform: translateX(3vw);
    }

    .information-title { 
        font-size: 8.6vw; 
        margin-bottom: 10%; 
        margin-left:15vw;
        text-align:center;
    }
    .information-container {
        display:flex;
        flex-direction: row-reverse;
        align-items: flex-start;
        gap:3vw;
        padding: 0 5vw;

    }
    .information-content { 
        flex-direction: row-reverse; 
        align-items: flex-start;
        flex: 1;
    }
    .information-area { 
        padding: 0; 
    }

    .information-area-left { 
        width: 30%; 
        font-size: clamp(15px, 1.2vw, 25px);
    }
    .information-area-right { 
        width: 70%;
        font-size: clamp(15px, 1.2vw, 25px);
    }  
    .information-map { 
    flex: 1;
    aspect-ratio: auto;
    align-self: stretch;
    margin: 1.5vw 0;
    border-radius: 16px;
    overflow: hidden;
    
    } 


    .credit { 
        padding-bottom: 1%; 
    }
    .job{
        font-size:1.4em;
    }
    .names{
        font-size:1em;
    }

    #fotter { 
        padding: 9vw 0 0; 
    }
    .ex-exhibition{
    margin-left: 20vw;	
    margin-right: 20vw;		
    color: var(--color-accent-dark);	
    display: block;	
    background-color:var(--color-bg);		
    height: 7vw;		
    line-height: 7vw;	
    text-align: center;	
    text-decoration: none;
    font-size: 2.5vw;
    margin-top:4%;
    letter-spacing:1.6em;
}
    
    .copyright { 
        font-size: clamp(20px, 1.5vw, 30px); 
    }
}


#loading {
  position: fixed;
  z-index: 9999;
  background: #fff;
  width: 100vw;
  height: 100vh;
  top: 0; left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader {
  border: 8px solid #e0e0e0;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0%   { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}






@media screen and (min-width: 961px) and (max-width: 1160px) {
    .mid-br { display: inline; }
}