@charset "UTF-8";

.imax_r{
    max-width: 400px;
    margin: auto;
}


.format__title{
    
 color:#FFE899;
  font-weight: 700;
	margin-bottom: 1.5rem;
	font-size:clamp(1.3rem, 1.045rem + 1.27vw, 2rem);
	text-align: center;
	line-height: 2.5rem;
}


.format__large{
    position: relative;
font-size:clamp(0.9rem, 0.791rem + 0.55vw, 1.2rem);
 color: var(--link-font-color);
font-weight:var(--font-weight-bold);
    /*text-align: center;*/
   line-height: 1.8;
}


.format__title2{
font-size:clamp(1.1rem, 0.991rem + 0.55vw, 1.4rem);
 color:#FFE899;
font-weight:var(--font-weight-bold2);
}


.format__text{
font-size:clamp(0.85rem, 0.759rem + 0.45vw, 1.1rem);
 color: #fff;
font-weight:var(--font-weight-bold);
      line-height: 1.8;
}


.imax_bt_theater{
max-width:500px;
    margin: auto;
}



.imax_bt{
    width:32.5%;
}

.imax-bt-set{
    max-width:800px;
    margin: auto;
}

.imax-poster{
    margin: auto;
    max-width: 700px;
}

@media screen and (max-width: 767px) {
    
    
    .imax_r{
        width:90%;
    max-width: 400px;
    margin: auto;
}
    
    .imax-poster{
    margin: auto;
    max-width:80%;
}
    
    .format__text{
          line-height: 1.7;
}
    
    
    .imax_bt{
    width:49%;
        margin:0px 0;
}

.imax-bt-set{
    max-width:100%;
    margin: auto;
}
    
.imax_bt_theater{
max-width:80%;
 
} 
    
}
/* フォーマット体感：動画と同寸の透過PNGを重ねる */
.imax-bt-set .imax_bt {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
}
.imax-bt-set .imax_bt img {
    display: block;
    width: 100%;
    height: auto;
}
.imax-bt-set .imax_bt:focus-visible,
.format-player__play:focus-visible {
    outline: 2px solid #FFE899;
    outline-offset: 4px;
}
.format-player__screen {
    position: relative;
    aspect-ratio: 2048 / 1432;
    overflow: hidden;
    background: #000;
}
.format-player__video,
.format-player__mask {
    display: block;
    width: 100%;
    height: 100%;
}
.format-player__video {
    object-fit: contain;
}
.format-player__mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.format-player__play {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(56px, 10vw, 110px);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: opacity .2s ease;
    touch-action: manipulation;
}
.format-player__play img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}
.imax-bt-set .imax_bt {
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.imax-bt-set .imax_bt img { pointer-events: none; }
.imax-bt-set .imax_bt .imax_bt__on {
    position: absolute;
    inset: 0;
    height: 100%;
    opacity: 0;
    transition: opacity .25s ease;
}
.imax-bt-set .imax_bt.is-active .imax_bt__on { opacity: 1; }
.format-player__mask {
    opacity: 0;
    transition: opacity .3s ease;
}
.format-player__mask.is-active { opacity: 1; }
.format-player__screen { cursor: pointer; }
.format-player.is-playing .format-player__play { opacity: 0; }
.format-player.is-playing .format-player__play img { visibility: hidden; }
.format-player__pause { display: none; }
.format-player.is-playing .format-player__pause {
    display: block;
    position: absolute;
    inset: 0;
    border: 3px solid #b2b2b2;
    border-radius: 50%;
    background: rgb(0 0 0 / 35%);
}
.format-player__pause::before,
.format-player__pause::after {
    content: '';
    position: absolute;
    top: 30%;
    width: 9%;
    height: 40%;
    background: #b2b2b2;
}
.format-player__pause::before { left: 35%; }
.format-player__pause::after { right: 35%; }
.format-player.is-playing .format-player__play:focus-visible { opacity: 1; }
@media (hover: hover) {
    .imax-bt-set .imax_bt:not(.is-active):hover .imax_bt__on { opacity: .5; }
    .format-player.is-playing .format-player__screen:hover .format-player__play { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .format-player__mask,
    .imax-bt-set .imax_bt .imax_bt__on,
    .format-player__play { transition: none; }
}

@media screen and (max-width: 767px) {
    .imax-bt-set {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 3%;
    }
    .imax-bt-set .imax_bt {
        width: 48.5%;
    }
}

.imax-bt-set .imax_bt:focus-visible .imax_bt__on { opacity: 1; }