/* frame */ .frame{position: fixed;width: 100%;height: 100dvh;top: 0;left: 0;z-index: 9996;pointer-events: none;border: 14px solid #1E2069;border-image: linear-gradient(to bottom, #1E2069, #98599E) 1; &:after{position: absolute;content: "";width: 100%;height: 100%;top: 0;left: 0;pointer-events: none;border: 1px solid #30F9F9;} .corner{position: absolute;pointer-events: none; img{width: 100%; height: auto;} &.top{top: -16px;width: min(200px, 26vw); &.left{left: -16px; transform: scale(-1, 1);} &.right{right: -16px;} } &.bottom{bottom: -16px; width:min(200px, 26vw); &.left{left: -16px; transform: scale(-1, 1)} &.right{right: -16px;} } } .deco{ &.center{position: absolute;bottom: calc(min(7px,0.7vw) * -1);left: 50%;transform: translateX(-50%);width: min(400px, 46vw); img{width: 100%; height: auto;} } } } @media only screen and (max-width: 768px){ .frame{border-width: 8px; /* borderショートハンドだとborder-imageがリセットされるためwidthのみ指定 */ z-index: calc(var(--z_nav) + 1); /* SPナビ表示時もframeをナビの上に */ .corner{ &.top{top: -2vw; &.left{left: -2vw;} &.right{right: -2vw;} } &.bottom{bottom: -2vw; &.left{left: -2vw;} &.right{right: -2vw;} } } } } .bg_video{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;pointer-events: none; video{position: absolute;min-width: 100%;min-height: 100%;opacity: 1;top: 50%;left: 50%;transform: translate(-50%, -50%);} } /*---------------------------------------- btn ------------------------------------------*/ /* .cmn_btn_outer{ .cmn_link_btn{border: 2px solid #2AB0B9; border-radius: 999px; font-size: min(38px, 3.8vw); line-height: 1.5em; font-weight: 700; padding: 0.3em; color: #2AB0B9; background-color: #ffffff;width: 50%; margin: 0 auto; text-align: center; display: flex; align-items: center; justify-content: center; gap: 0.3em; min-width: 380px; position: relative; &::after{content: ""; background-image: url(../images/parts/btn_arrow.svg); aspect-ratio: 1/1;position: absolute;transform: translateY(-50%);top: 50%; width:min(38px, 6.5vw); right: 3%;background-position: center; background-repeat: no-repeat; background-size: contain;} } } @media only screen and (max-width: 768px){ .cmn_btn_outer{ .cmn_link_btn{font-size: min(30px, 5.8vw); line-height: 1.5em; padding: 0.3em; width: 100%; gap: 0.3em; min-width: 0px; .btn_arrow{width: 1.5em;} } } } */ .cmn_btn_outer { .cmn_link_btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 435px; aspect-ratio: 434.59 / 72.24; margin: 0 auto; font-family: var(--f_01); font-size: min(36px, 7vw); font-weight: 500; line-height: 1.1; letter-spacing: 0.02em; color: #fff; text-decoration: none; /* 六角形 + グラデーション(#BD6096→#8A4BAB) + 白の山形ライン */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 434.59 72.24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23BD6096'/%3E%3Cstop offset='1' stop-color='%238A4BAB'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='24,0 410.59,0 434.59,36.12 410.59,72.24 24,72.24 0,36.12' fill='url(%23g)'/%3E%3Cpolyline points='41,-1 16,36.12 41,73.24' fill='none' stroke='%23fff' stroke-width='4'/%3E%3Cpolyline points='393.59,-1 418.59,36.12 393.59,73.24' fill='none' stroke='%23fff' stroke-width='4'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transition: filter 0.3s ease; span { position: relative; display: inline-block; &::after { content: ""; position: absolute; top: 50%; left: calc(100% + 0.75em); width: 0.9em; aspect-ratio: 1 / 1; background: url(../images/parts/btn_arrow_w.svg) center / contain no-repeat; transform: translateY(-50%); transition: transform 0.3s ease; } } &:hover { filter: brightness(1.12); span::after { transform: translateY(-50%) translateX(25%); } } &.back { span::after { left: auto; right: calc(100% + 0.75em); transform: translateY(-50%) scaleX(-1); } &:hover span::after { transform: translateY(-50%) translateX(-25%) scaleX(-1); } } } } @media only screen and (max-width: 768px) { .cmn_btn_outer { .cmn_link_btn { max-width: 340px; } } } /*---------------------------------------- anime ------------------------------------------*/ .top_page{ &:before{opacity: 0; visibility: hidden; filter: blur(10px); transform: scale(1.4);} .frame{opacity: 0; visibility: hidden; filter: blur(10px); transform: scale(1.2);} .lily_bg{opacity: 0; visibility: hidden; filter: blur(10px); transform: scale(1.2);} .fv{opacity: 0; visibility: hidden; filter: blur(10px); transform: scale(1.4);} &.load_open{ &:before{opacity: 1; visibility: visible; filter: blur(0); transform: scale(1); transition: 1.4s var(--easeOutCubic); transition-delay: 0.4s;} .frame{opacity: 1; visibility: visible; filter: blur(0); transform: scale(1); transition: 1.4s var(--easeOutCubic); transition-delay: 0.8s;} .lily_bg{opacity: 1; visibility: visible; filter: blur(0); transform: scale(1); transition: 1.4s var(--easeOutCubic); transition-delay: 1.2s;} .fv{opacity: 1; visibility: visible; filter: blur(0); transform: scale(1); transition: 1.8s var(--easeOutCubic); transition-delay: 0.8s;} } } .in_page{ &:before{opacity: 1;} .frame{opacity: 1;} .lily_bg{opacity: 1; } } .anime{opacity: 0; visibility: hidden; transform: translateY(min(40px,4vw)); transition: 1.2s var(--easeOutCubic); transition-delay: 0.05s; &.scroll_in{opacity: 1; visibility: visible; transform: translateY(0);} } /*---------------------------------------- top page ------------------------------------------*/ .top_wrap{position: relative;border-top:1px solid #30F9F9;border-bottom:1px solid #30F9F9;width: calc(100% - 28px);margin: 0 auto;padding: min(200px, 20vw) 0; .bg_box{position: absolute;pointer-events: none; width: 100%;height: 100%;top: 0;left: 0;z-index: -1; .corner{position: absolute;width: min(200px, 20vw); img{width: 100%; height: auto;} &.top{ &.left{top: -1px;left: -1px;transform: scale(-1, -1);} &.right{top: -1px;right: -1px;transform: scale(1, -1);} } &.bottom{ &.left{bottom: -1px;left: -1px;transform: scale(-1, 1);} &.right{bottom: -1px;right: -1px;} } } .s_deco{position: absolute;width: min(100px, 12vw); img{width: 100%;height: auto;} &.top{top: calc(min(19px,3.7vw) * -1); &.left{transform: scale(-1, 1);left: min(240px,15vw);} &.right{right: min(240px,15vw);} } &.bottom{bottom: calc(min(17px,1.9vw) * -1); &.left{transform: scale(-1, 1);left: min(240px,15vw);} &.right{ right: min(240px,15vw); } } } .c_deco{position: absolute;width: min(200px,24vw);left: 50%;transform: translateX(-50%); img{width: 100%; height: auto;} &.top{top: calc(min(24px,2.9vw) * -1);} /* 画像(195:46)の高さの約半分 */ &.bottom{bottom: calc(min(24px,3vw) * -1);} } } } @media only screen and (max-width: 768px){ .top_wrap{width: calc(100% - 16px);} } .tit_wrap{position: relative; padding:min(120px , 20vw) 0 calc(var(--base_distance) * 0.5); &.second{padding: 0 0 calc(var(--base_distance) * 0.5);} &.sns{padding:0 0 calc(var(--base_distance) * 0.15);} .top_tit{font-family: var(--f_01);font-size: min(120px,12vw);font-weight: 600;line-height: 1.6em;position: relative;--tit_grad: linear-gradient(180deg,rgba(122, 247, 233, 1) 10%, rgba(114, 93, 121, 1) 100%);background: var(--tit_grad);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;color: transparent; letter-spacing: -5px; span{position: relative;display: inline-block; &:before{content: attr(data-text);position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-text-fill-color: transparent;-webkit-text-stroke: max(1px, 0.03em) #1CB5B5;pointer-events: none;z-index: -1;} &:after{position: absolute;content: "";background-image: url(../images/parts/tit_deco.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: min(320px);height: min(30px);bottom: 0px;left: 50%;transform: translateX(-50%);} } } } .top_tit.sns{font-size: min(56px,5vw);font-weight: 700;line-height: 1.5em;position: relative; span{ &:after{content: none;} } } .comment{display: block;width: min(100%,300px);color: #e6decd;border: 1px solid #e6decd;background-color: #15102da6;margin: 12px auto 0;font-size: 0.9em;padding: 0.5em;} .c_01{color: #8A0000 !important;} @media only screen and (max-width: 768px){ .tit_wrap { .top_tit {font-size: min(100px,16vw); &.long { font-size: min(100px, 14vw); line-height: 2em; } span { position: relative; /* iOS Safariはinline-blockの子に親のbackground-clip:textが効かないため、spanにもPCと同じグラデーションを指定 */ background: var(--tit_grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; /* letter-spacing(-5px)で最後の文字がspanの幅からはみ出し、塗りが欠けるのを防ぐ */ padding-right: 5px; margin-right: -5px; &:before { text-align: left; } /* padding分で縁取りが中央寄せでずれないように */ &:after { width: 38vw; height: 5vw; } } } } .top_tit.sns{font-size: min(40px,8vw);font-weight: 700;line-height: 1.5em; width: 90%; padding: 0.2em 1em;margin: 0 auto;} } .section_wrap{padding-bottom: 0; &:not(:last-of-type){padding-bottom: min(200px, 20vw)} } .fv {--frame: 15px; padding: var(--frame) var(--frame) 0; .fv_flexwrap {display: flex;justify-content: center;align-items: flex-end;gap: 3%;width: min(calc(90% - 40px), 145vh);width: min(calc(90% - 40px), 145svh);max-width: 1400px;margin: 0 auto;padding: 56px 0 0; .inner { flex: 1; min-width: 0; align-self: stretch; display: flex; } .stack { width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 5% 0; .main_tit { width: 90%; margin: 0 auto; } .date { margin: 0; } .top_credit { width: 76%; margin: 0 auto; } .main_tit img { width: 100%; height: auto; display: block;filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.32));} .date img { width: 76%; height: auto; display: block; margin: 0 auto; } .top_credit img { width: 100%; height: auto; display: block; } } .kv { flex: 1; min-width: 0; img { display: block; width: 100%; height: auto; } } } } @media only screen and (max-width: 768px){ .fv{--frame: 9px; /* SP: border(8px) + 1px */ .fv_flexwrap{flex-direction: column-reverse;width: calc(98% - 30px);padding: 0;padding-bottom: 8vw; .inner{width: 100%; .stack{display: block;padding: 0;} .main_tit{width: min(90%,500px);margin: 0 auto min(60px, 8vw);} .date{margin-bottom: min(60px, 8vw); img{width: 84%;} } .top_credit{width: 60%;margin-bottom: 0;} } } .kv{width: 100%!important;margin-bottom: 1em;} } } /* top about */ .top_news{ .news_wrap{text-align: left; .news {margin-bottom: min(24px, 4vw); &:last-of-type {margin-bottom: min(80px,8vw);} .news_link {position: relative;display: flex;border: 1px solid #D479AE;background: #00000080;border-radius: 30px;text-decoration: none;transition: transform 0.2s ease, filter 0.2s ease; &:before{position: absolute;content: "";display: block;border: 1px solid #D479AE;width: 98.6%;height: 100%;border-radius: 30px;top: 0;left: 0.7%;pointer-events: none;} &:after{position: absolute;content: "";background-image: url(../images/parts/btn_arrow.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: 1.6em;height: 100%;top: 0;right: 2em;transition: 0.3s ease;} &:hover { &:after{right: 1.6em;} } .date {font-family: var(--f_01);font-size: clamp(18px, 2vw, 25px);color: #fff;line-height: 1em;font-weight: 600;width: 13%;display: flex;align-items: center;justify-content: center;flex-direction: column; .date_y {display: block;font-size: 0.7em;position: relative;left: -0.5em;} .date_dot {display: none;} } .news_title {font-size: clamp(14px, 1.5vw, 18px);padding: 1.5em 6em 1.5em 1.5em;color: var(--c_font_color);line-height: 1.7em;font-weight: 600;border-left: 1px dashed #D479AE;} &.disactive { pointer-events: none; &:after { content: none; } .detail { display: none; } } } } } } @media only screen and (max-width: 768px){ .top_news{ .news_wrap{ .news{ .news_link{flex-direction: column;padding: 1.8em 4em 1.8em 1.8em; &:after{right: 1.3em;} .date {width: 100%;display: block;margin-bottom: 0.4em; .date_y {display: inline-block;font-size: 1em;left: 0;} .date_dot {display: inline-block;} } .news_title {padding: 0;border-left: none;} } } } } } /* btn sec */ .btn_sec{margin: 0 auto calc(var(--base_distance)*1); text-align: center; a{display: block; width: 60%; margin: 0 auto; transition: 0.2s; &:hover{transform: translateY(-3px); filter: brightness(1.1);} img{width: 100%; height: auto;} } } @media only screen and (max-width: 768px){ .btn_sec{ a{width: 80%;} } } /* =============================================== # news =============================================== */ #news{ .title_block{flex-direction: column; display: flex; border-bottom: 1px solid var(--c_font_color); font-size: clamp(16px, 2vw, 20px); line-height: 1.7em;gap: .2em; padding: 0 0 .6em; margin-bottom: 1em; text-align: left; .date{color: #26AEBB; line-height: 1.4em; font-weight: 700; span{font-size: .7em;}} /* .news_title{font-weight: 600; font-size: 1.2em; line-height: 1.5em;} */ } .cmn_write_box_outer { position: relative; padding: clamp(24px, 5vw, 50px); background: #00000080; border: 1px solid #D479AE; border-radius: 30px; filter: none; &::before { position: absolute; content: ""; border: 1px solid #D479AE; border-radius: 30px; pointer-events: none; width: 98.6%; height: 100%; top: 0; left: 0.7%; } > .title_block { position: relative; padding-bottom: 1.2em; margin-bottom: 2em; border-bottom: 1px dashed #D479AE; .date {color: #fff; font-family: var(--f_01); font-size: 1.5em; font-weight: 600; } .news_title {font-weight: 600; font-size: 1.2em; line-height: 1.5em;} } > .cmn_write_box.type_content { color: #fff; font-size: clamp(14px, 1.5vw, 16px); line-height: 1.9; hr { border-top: 1px dashed #D479AE; } h2 { padding: 0 0 0.2em; border: 0; border-bottom: 1px solid #fff; color: #fff; &::before { content: none; } } } } } /* =============================================== # CAST =============================================== */ #cast{position: relative; /* li幅は全グループ共通（4列時の幅基準）、見出し幅＝列数分のli幅＋gap */ --cast_gap: min(30px, 2.5vw); --cast_w: min(235px, calc((var(--base_wrap_width) - var(--cast_gap) * 3) / 4)); .h_outer{z-index: 2;position: relative;} .sec_inner{position: relative;z-index: 3;} .cast_inner{--col: 4;position: relative;margin: 0 auto;width: calc(var(--cast_w) * var(--col) + var(--cast_gap) * (var(--col) - 1)); &.col2{--col: 2;} &.col3{--col: 3;} &.col4{--col: 4;} } /* 見出し・区切り線共通のデコライン */ .s_deco{display: inline-block;width: 100%;height: 1px;background-color: #fff; position: relative; &:before{position: absolute;content: "";background-image: url(../images/parts/cast_group_parts.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: min(70px,12vw);height: min(35px,6vw);top: 35%;left: 0;transform: translateY(-50%);} &:after{position: absolute;content: "";background-image: url(../images/parts/cast_group_star.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: min(35px,6vw);height: min(35px,6vw);top: 50%;right: -10px;transform: translateY(-50%);} } .cast_line{display: flex;font-size: clamp(20px,6vw,70px);margin-bottom: min(120px, 12vw);} .cast_wrap{text-align: center;margin-bottom: min(120px, 16vw); .stit{position: relative;margin-bottom: min(60px, 6vw);font-size: clamp(30px,6vw,60px);font-weight: 700;font-family: var(--f_02);text-align: left;line-height: 1em;display: flex;align-items: center;gap: 0.2em; .s_left{display: block;white-space: nowrap;} } ul{display: flex;column-gap: var(--cast_gap);row-gap: min(50px, 5vw);justify-content: center;flex-wrap: wrap; .cast{width: var(--cast_w); .cast_img{margin-bottom: min(25px, 3vw); img{width: 100%;aspect-ratio: 3 / 4;object-fit: cover;} } .name_block{ .part{font-size: min(20px, 3vw);line-height: 1.2em;margin-bottom: 0.3em;font-weight: 600;color: #D479AE;} .name{font-size: min(26px, 4.5vw);line-height: 1.3em;font-weight: 600;} } } } &.last{margin-bottom: min(150px, 10vw);} &:last-child{margin-bottom: 0;} .list_blank{padding: 60px; @media screen and (max-width: 768px){padding: 24px;}} } .ensemble_wrap{text-align: center;margin-bottom: min(120px, 12vw); .ensemble_tit{font-family: var(--f_02);font-size: min(30px, 6vw);font-weight: 700;line-height: 1.2em;color: #D479AE;margin-bottom: min(30px, 4vw);} ul{display: grid;grid-template-columns: repeat(var(--col), var(--cast_w));column-gap: var(--cast_gap);row-gap: min(20px, 3vw);justify-content: center; li{font-size: min(24px, 4.5vw);line-height: 1.4em;font-weight: bold;} } } } #staff{ .list_blank{padding: 15px;} .staff_list{margin-bottom: calc(var(--base_gap) * 5); dl{display: flex;font-size: 20px;line-height: 1.4em; text-align: center; justify-content: center;font-weight: 600; &:not(:last-of-type){margin-bottom: .8em;} dt{color: #d27ac0;} dd{color: #fff; span{font-size: 16px;}} &.logo{align-items: center; img{max-height: 50px;}} } } } @media screen and (max-width: 768px) { #cast{padding: 0px 0;overflow:hidden;margin-bottom: 100px; /* SPは全グループ2列・同幅 */ --cast_gap: 4vw; --cast_w: calc((92vw - 30px - var(--cast_gap)) / 2); .cast_inner{ &.col3, &.col4{--col: 2;} } .cast_wrap{ .tit{font-size: 18px;line-height: 1.4em;} } } #staff{ .list_blank{padding: 10px;} .staff_list{ dl{font-size: 16px;line-height: 1.4em; dt{text-align: right;} dd{span{font-size: 13px; text-align: left; &.long{display: block;}}} &.logo{ img{max-height: 40px;}} } } } } /* =============================================== # schedule =============================================== */ .ticket_btn {position: relative;display: flex;align-items: center;justify-content: center;width: 100%;max-width: 910px;min-height: min(70px, 13vw);margin: 0 auto;padding: 0.4em 50px;background: linear-gradient(0deg, #8A4BAB, #BD6096);border-radius: 13px;font-size: clamp(18px, 2.2vw, 22px);color: #fff;line-height: 1.4em;font-weight: 700;text-decoration: none;transition: filter 0.5s ease; &::before { content: ""; position: absolute; top: 50%; right: 30px; width: min(23px, 4vw); aspect-ratio: 23 / 30; transform: translateY(-50%); background: url(../images/parts/btn_arrow_w.svg) no-repeat center / contain; transition: transform 0.2s ease; } &:not(:last-of-type) { margin-bottom: min(16px, 2.5vw); } &:has(+ p) { margin-bottom: min(8px, 1.25vw)!important; } &:hover { filter: brightness(1.2); &::before { transform: translateY(-50%) translateX(5px); } } @media screen and (max-width: 768px){ padding: 0.4em 40px; &::before { right: 15px; } } } #schedule{ .schedule_wrap{ text-align: left; &:not(:last-of-type){margin-bottom: min(120px, 11vw);} .venue_list{margin-bottom: min(80px, 10vw);} .date{display: block;transition: opacity 0.2s ease; &:not(:last-child){margin-bottom: min(50px, 8vw);} &:hover{opacity: 0.7;} img{width: 100%;} } .hoshi_img{margin-bottom: 1em; img{width: 100%;} } } } #tickets{ .price_wrap{ margin-bottom: min(120px, 15vw); .price_table{display: flex;font-size: clamp(18px, 3vw, 26px); justify-content: space-between;align-items: center; border-top: 1px solid rgba(255,255,255,0.6); border-bottom: 1px solid rgba(255,255,255,0.6); padding: min(35px, 5vw) min(10px, 1.5vw); font-weight: 700; line-height:1.4em; &:not(:first-of-type){border-top:none; } &:last-of-type{margin-bottom: min(40px, 4vw);} .seats{text-align: left; line-height: 1.4em; span{font-size: clamp(11px, 1.3vw, 14px); line-height: 1.4em;padding-left: 10px; @media screen and (max-width: 768px){font-size: 13px; padding-left: 10px; display: inline-block;}}} .price{white-space: nowrap; span{font-size: clamp(11px, 1.3vw, 14px);} } @media screen and (max-width: 768px){ flex-direction: column;text-align: left;padding-left: 1.5vw;gap: 1.5vw;align-items: baseline; } } } .tickets_wrap{max-width: 1030px;text-align: center; .tickets_tit{font-size: clamp(24px, 4vw, 40px); line-height: 1.5em; margin-bottom: min(40px, 6vw); color: var(--cmn_write_box_theme_color); font-weight: 700;} .ticket_list{margin-bottom: min(50px, 6vw); .tickets_name{color: #d27ac0;font-size: clamp(18px, 2.6vw, 26px);font-weight: 700;line-height: 1.5em;margin-bottom: .3em;} .tickets_date{font-size: clamp(15px, 2.2vw, 22px);font-weight: 600; margin-bottom: min(50px, 6vw);} .cmn_link_btn_outer{margin-bottom: min(30px, 6vw); &:last-child{margin-bottom: 0;}} &:last-of-type{margin-bottom: min(150px, 20vw);} } } .cmn_list_kome{text-align: left; li{margin-bottom: 0.4em;}} /* お問い合わせ・注意事項 */ .cmn_write_box.type_content{color: #fff; h3{padding: 0 0 0.6em;margin-bottom: 1.2em;font-size: clamp(16px, 2.4vw, 26px);color: #fff;border-bottom: 1px solid #D479AE; &::before{content: none;} } } .ticket_list .cmn_list_kome{font-size: clamp(12px, 1.5vw, 15px); li{margin-bottom: 0.2em;}} .cmn_link_btn_outer{ margin-bottom: min(30px, 3vw); &:last-child{margin-bottom: 0;} p{font-size: clamp(13px, 1.5vw, 20px);margin-bottom: 1em;}} } #guide{ h2 + h3 { margin-top: 0 !important;} h3 + h4 { margin-top: 0 !important;} h4 + h5 { margin-top: 0 !important;} .tit{font-size: clamp(24px, 5vw, 38px);font-weight: 800;text-align: center;color: var(--c_gold);margin: 0 auto 1em;line-height: 1.5em;} p{ &:last-child{margin-bottom:0;} } .cmn_list_kome, .cmn_list_circle{ &:last-child{margin-bottom:0;} } } #goods{ .goods_info{padding: 30px 30px;background: #ffffff99;border: 1px solid var(--c_gold);margin-bottom: 4em;text-align: left; .text_block{ .tit{border-bottom: 1px dashed var(--c_gold);font-size: clamp(20px,2vw,26px);line-height: 1.4em;padding-bottom: 0.3em;margin-bottom: 0.4em; font-weight: bold;} .text{width: 100%;} } } .goods{margin-bottom: 2em;padding: 14px;background: #ffffff99;border: 1px solid var(--c_gold);text-align: left; .goods_img{margin-bottom: 12px; position: relative;width: 100%; img{width: 100%;aspect-ratio: 1/1;object-fit: contain;height: 100%;} } .text_block{width: 100%; .tit_box{margin-bottom: 0.4em;border-bottom: 1px dashed var(--c_gold);padding-bottom: .3em;display: flex;justify-content: space-between;align-items: center;} .tit{font-size: clamp(18px,2vw,22px);line-height: 1.4em;font-weight: bold;} .price{font-size: clamp(16px,1.6vw,20px);line-height: 1.4em; font-weight: bold; text-align: right; span{font-size: 0.7em;line-height: 1.1em;}} .text{width: 100%;} } } } .swiper_controller .swiper-pagination-bullet{ background-color: var(--c_gold); } .swiper_controller .swiper-pagination-bullet-active { opacity: 1 !important; } .goods_modal{ .modal_inner{max-height: 88svh;width: 92%;max-width: 1000px;overflow-y: scroll;} .cmn_write_box{ .main_tit{text-align: center;font-weight: bold;margin-bottom: 1em;font-size: clamp(20px,2vw,28px);line-height: 1.3em; } } } @media screen and (max-width: 768px) { /* .goods_modal{ .cmn_write_box{padding: 20px 14px;} } */ #goods{ .goods_info{padding: 20px 16px; .reverse{ flex-direction: column-reverse;}} } } .price_time { margin-bottom: 0.3em; table {table-layout: fixed;border-collapse: collapse;width: 100%;border: 1px solid #000000;margin-bottom: 20px; &:last-of-type { margin-bottom: 0;} th {border-bottom: 1px solid #000000;text-align: center;vertical-align: middle;font-size: 14px;line-height: 1.4em;padding: 4px; &:not(:last-of-type) { border-right: 1px solid #000000; } span {font-size: 0.8em;font-weight: normal; } &.small {font-size: 12px; } } td {font-size: 14px;line-height: 1.4em;padding: 4px;border-bottom: 1px solid #000000;text-align: center;vertical-align: middle;border-right: 1px solid #000; &:not(:last-of-type) {border-right: 1px solid #000; } span {font-size: 0.8em; } } } &.table02 { table { th {padding: 6px;} td { padding: 14px; font-size: 16px; line-height: 1.2em;} } } } @media screen and (max-width: 768px) { .price_time > div { overflow-x: scroll; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; } .price_time > div::-webkit-scrollbar { display: none; } .price_time table { table-layout: auto; width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; border: none; } .price_time table th, .price_time table td { font-size: 12px; line-height: 1.2em; border-right: 1px solid #000; border-bottom: 1px solid #000; border-left: none; border-top: none; } .price_time table th.small { width: 114px; } .price_time .pt-border-left { border-left: 1px solid #000 !important; } .price_time .pt-border-top { border-top: 1px solid #000 !important; } .price_time .pt-sticky { position: sticky; background: #ffffff; z-index: 2; } .price_time .pt-sticky-0 { left: 0; } } .price_time_scrollbar_track { height: 6px; background: #ddd; border-radius: 3px; position: relative; cursor: pointer; } .price_time_scrollbar_thumb { height: 100%; background: #888; border-radius: 3px; position: absolute; top: 0; left: 0; min-width: 30px; } .stremimg_h2{margin-top: 2em !important;} #blu-ray{ p{margin-bottom: 0;} .h2_tit{border-bottom: 1px solid var(--c_red); margin-bottom: 1em; h2{margin-top: 2em; font-size: clamp(20px , 2.5vw , 28px);font-weight: 700;margin-bottom: 0.1em; color: #fff; background-color: var(--c_red); padding: .5em;} } .ticket_btn{text-decoration: none; color: #fff;margin-top: .5em;} .h2_tit + h3 { margin-top: 0 !important;} h3 + h4 { margin-top: 0 !important;} h4 + h5 { margin-top: 0 !important;} h3{margin-top: 2em;} } #introduction{text-align: center;margin-bottom: 100px;padding-top: calc(var(--base_distance) * 0.3); .intro_text{margin: 0 auto min(150px, 15vw);color: #fff; .intro_tit{font-size: clamp(18px, 2.2vw, 24px);font-weight: 700;line-height: 1.5em;color: #D479AE;margin-bottom: min(30px, 4vw);} .plot{font-weight: 600;} .about_tit{margin: 0 auto 40px;width: 100%;max-width: 500px; img{width: 100%;height: auto;filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.7));} } p{line-height: 2.4em; font-size: clamp(14px, 1.5vw, 18px); word-break: auto-phrase; &:not(:last-of-type){margin-bottom: 2.4em;} span{white-space: nowrap;} } } } @media screen and (max-width: 768px) { #introduction{ .intro_text{ .about_tit{width: 75%;} p{line-height: 2em; &:not(:last-of-type){margin-bottom: 2em;} } } } } /* 404 */ #notfound{text-align: center; .notfound_text{margin: 0 auto min(80px, 12vw);color: #fff; .notfound_en{font-family: var(--f_01);font-size: clamp(20px, 2.4vw, 32px);font-weight: 600;letter-spacing: 0.1em;margin-bottom: 1em;} p{line-height: 2.4em; font-size: clamp(14px, 1.5vw, 18px); word-break: auto-phrase; span{white-space: nowrap;} } } } @media screen and (max-width: 768px) { #notfound{ .notfound_text{ p{line-height: 2em;} } } }