/*
Theme Name:lexa-theme-child
Template:lexa-theme
Theme URI: https://lexa.co.jp
Author: Lexa inc.
Author URI: https://lexa.co.jp
Version: 1.0.0
*/
/**********************
- ROOT
- BASE
- GENERAL
-- FONT
-- ALIGN
-- FLEX
-- LIST
-- OTHER
- HEADER
- BREADCRUMB
- CONTAINER
- HEADING
- BUTTON
- FOOTER
- ARCHIVE
- SINGLE
- STAGE
- CONTACT
- FRONT
- PAGE PARTS
- LOADING
- COLOR
- MARGIN
- ANIMATION
- RESPONSIVE
***********************/
/**********************
* ブレイクポイント
* 560px/960px
**********************/
/*********************
ROOT
**********************/
/* カラー */
/* -------------------------------------------------------------------------- */
:where(:root) {
/* text color */
--color-base: #333333;
--color-link: var(--brand);
--color-accent: var(--brand);
/* background color */
--background-base: #fff;
--background-gray: #F5F5F5;
--background-hover: #e7f7fa;
/* border color */
--border-base: #999999;
--border-sub: #D9D9D9;
/* brand color */
--brand-base: #50BFCC;
}
:root {
--bg-base: #FFF;
--bg-1: #333;
--bg-2: #f6fafb;
--bg-3: #e4eff0;
--line: #f2f1f1;
--text-main: #333;
--text-sub: #a4a6aa;
--text-fff: #fffFFF;
--brand: #50BFCC;
/* --main-color-1: #5BC2C7; */
/* --sub-color-1: #FFF000;
--sub-color-2: #FFFBB3; */
--accent-color-1: #f1b614;
--accent-color-2: #FF0000;
--accent-color-3: #88b2be;
/* --gradient: linear-gradient(70deg, #5BC2C7, #FFFBB3); */
--font-jp: 'Zen Kaku Gothic Antique', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
--font-base: 'Noto Sans JP';
--font-en: 'Poppins', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
--font-material: 'Material Icons Round';
--light: 300;
--normal: 400;
--bold: 700;
--container: calc(1920px + 6%);
--container-side: 3%;
--container-xl: 1240px;
--container-l: 1120px;
--container-m: 990px;
--container-ms: 920px;
--container-s: 800px;
--container-ss: 512px;
/* ビューポート設定 */
--clamp-viewport-min: 375;
--clamp-viewport-max: 1440;
/* フォントサイズ設定 */
/* -------------------------------------------------------------------------- */
--fontSize-xxs-min: 10;
--fontSize-xxs-max: 11;
--fontSize-xs-min: 11;
--fontSize-xs-max: 12;
--fontSize-sm-min: 13;
--fontSize-sm-max: 14;
--fontSize-base-min: 15;
--fontSize-base-max: 16;
--fontSize-md-min: 16;
--fontSize-md-max: 18;
--fontSize-lg-min: 17;
--fontSize-lg-max: 20;
--fontSize-xl-min: 18;
--fontSize-xl-max: 22;
--fontSize-2xl-min: 20;
--fontSize-2xl-max: 28;
--fontSize-3xl-min: 24;
--fontSize-3xl-max: 34;
--fontSize-4xl-min: 30;
--fontSize-4xl-max: 42;
--fontSize-5xl-min: 38;
--fontSize-5xl-max: 54;
--fontSize-6xl-min: 50;
--fontSize-6xl-max: 64;
/* フォントサイズ変数の定義 */
--fontSize-xxs: clamp(calc(var(--fontSize-xxs-min) * 1px),
calc(var(--fontSize-xxs-min) * 1px + (var(--fontSize-xxs-max) - var(--fontSize-xxs-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--fontSize-xxs-max) * 1px));
--fontSize-xs: clamp(calc(var(--fontSize-xs-min) * 1px),
calc(var(--fontSize-xs-min) * 1px + (var(--fontSize-xs-max) - var(--fontSize-xs-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--fontSize-xs-max) * 1px));
--fontSize-sm: clamp(calc(var(--fontSize-sm-min) * 1px),
calc(var(--fontSize-sm-min) * 1px + (var(--fontSize-sm-max) - var(--fontSize-sm-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--fontSize-sm-max) * 1px));
--fontSize-base: clamp(calc(var(--fontSize-base-min) * 1px),
calc(var(--fontSize-base-min) * 1px + (var(--fontSize-base-max) - var(--fontSize-base-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--fontSize-base-max) * 1px));
--fontSize-md: clamp(calc(var(--fontSize-md-min) * 1px),
calc(var(--fontSize-md-min) * 1px + (var(--fontSize-md-max) - var(--fontSize-md-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--fontSize-md-max) * 1px));
--fontSize-lg: clamp(calc(var(--fontSize-lg-min) * 1px),
calc(var(--fontSize-lg-min) * 1px + (var(--fontSize-lg-max) - var(--fontSize-lg-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--fontSize-lg-max) * 1px));
--fontSize-xl: clamp(calc(var(--fontSize-xl-min) * 1px),
calc(var(--fontSize-xl-min) * 1px + (var(--fontSize-xl-max) - var(--fontSize-xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--fontSize-xl-max) * 1px));
--fontSize-2xl: clamp(calc(var(--fontSize-2xl-min) * 1px),
calc(var(--fontSize-2xl-min) * 1px + (var(--fontSize-2xl-max) - var(--fontSize-2xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--fontSize-2xl-max) * 1px));
--fontSize-3xl: clamp(calc(var(--fontSize-3xl-min) * 1px),
calc(var(--fontSize-3xl-min) * 1px + (var(--fontSize-3xl-max) - var(--fontSize-3xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--fontSize-3xl-max) * 1px));
--fontSize-4xl: clamp(calc(var(--fontSize-4xl-min) * 1px),
calc(var(--fontSize-4xl-min) * 1px + (var(--fontSize-4xl-max) - var(--fontSize-4xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--fontSize-4xl-max) * 1px));
--fontSize-5xl: clamp(calc(var(--fontSize-5xl-min) * 1px),
calc(var(--fontSize-5xl-min) * 1px + (var(--fontSize-5xl-max) - var(--fontSize-5xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--fontSize-5xl-max) * 1px));
--fontSize-6xl: clamp(calc(var(--fontSize-6xl-min) * 1px),
calc(var(--fontSize-6xl-min) * 1px + (var(--fontSize-6xl-max) - var(--fontSize-6xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--fontSize-6xl-max) * 1px));
/* スペース設定 */
/* -------------------------------------------------------------------------- */
--space-xxs-min: 3;
--space-xxs-max: 4;
--space-xs-min: 6;
--space-xs-max: 8;
--space-sm-min: 10;
--space-sm-max: 12;
--space-md-min: 12;
--space-md-max: 16;
--space-lg-min: 16;
--space-lg-max: 20;
--space-xl-min: 20;
--space-xl-max: 28;
--space-2xl-min: 32;
--space-2xl-max: 40;
--space-3xl-min: 42;
--space-3xl-max: 60;
--space-4xl-min: 60;
--space-4xl-max: 80;
--space-5xl-min: 80;
--space-5xl-max: 120;
--space-6xl-min: 100;
--space-6xl-max: 160;
--space-7xl-min: 110;
--space-7xl-max: 180;
/* スペース変数の定義 */
--space-xxs: clamp(calc(var(--space-xxs-min) * 1px),
calc(var(--space-xxs-min) * 1px + (var(--space-xxs-max) - var(--space-xxs-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--space-xxs-max) * 1px));
--space-xs: clamp(calc(var(--space-xs-min) * 1px),
calc(var(--space-xs-min) * 1px + (var(--space-xs-max) - var(--space-xs-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--space-xs-max) * 1px));
--space-sm: clamp(calc(var(--space-sm-min) * 1px),
calc(var(--space-sm-min) * 1px + (var(--space-sm-max) - var(--space-sm-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--space-sm-max) * 1px));
--space-base: clamp(calc(var(--space-base-min) * 1px),
calc(var(--space-base-min) * 1px + (var(--space-base-max) - var(--space-base-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--space-base-max) * 1px));
--space-md: clamp(calc(var(--space-md-min) * 1px),
calc(var(--space-md-min) * 1px + (var(--space-md-max) - var(--space-md-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--space-md-max) * 1px));
--space-lg: clamp(calc(var(--space-lg-min) * 1px),
calc(var(--space-lg-min) * 1px + (var(--space-lg-max) - var(--space-lg-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--space-lg-max) * 1px));
--space-xl: clamp(calc(var(--space-xl-min) * 1px),
calc(var(--space-xl-min) * 1px + (var(--space-xl-max) - var(--space-xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--space-xl-max) * 1px));
--space-2xl: clamp(calc(var(--space-2xl-min) * 1px),
calc(var(--space-2xl-min) * 1px + (var(--space-2xl-max) - var(--space-2xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--space-2xl-max) * 1px));
--space-3xl: clamp(calc(var(--space-3xl-min) * 1px),
calc(var(--space-3xl-min) * 1px + (var(--space-3xl-max) - var(--space-3xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--space-3xl-max) * 1px));
--space-4xl: clamp(calc(var(--space-4xl-min) * 1px),
calc(var(--space-4xl-min) * 1px + (var(--space-4xl-max) - var(--space-4xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--space-4xl-max) * 1px));
--space-5xl: clamp(calc(var(--space-5xl-min) * 1px),
calc(var(--space-5xl-min) * 1px + (var(--space-5xl-max) - var(--space-5xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--space-5xl-max) * 1px));
--space-6xl: clamp(calc(var(--space-6xl-min) * 1px),
calc(var(--space-6xl-min) * 1px + (var(--space-6xl-max) - var(--space-6xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--space-6xl-max) * 1px));
--space-7xl: clamp(calc(var(--space-7xl-min) * 1px),
calc(var(--space-7xl-min) * 1px + (var(--space-7xl-max) - var(--space-7xl-min)) * ((100vw - var(--clamp-viewport-min) * 1px) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)))),
calc(var(--space-7xl-max) * 1px));
/* ヘッダー高さ設定 */
--header-h: var(--space-5xl);
@media only screen and (max-width: 560px) {
--header-h: var(--space-4xl);
}
}
/*********************
BASE
*********************/
html {
font-size: 62.5%;
}
body {
background-color: var(--bg-base);
color: var(--text-main);
font-family: var(--font-base);
font-weight: var(--normal);
font-size: var(--fontSize-base);
letter-spacing: .025em;
line-height: 1.7;
line-break: strict;
overflow-x: hidden;
}
section {
position: relative;
width: 100%;
}
h1,
h2,
h3 {
font-weight: 500;
font-family: var(--font-jp);
margin-bottom: .5em;
}
p {
margin: 0 0 1em;
line-height: 1.8;
}
a {
color: var(--brand);
transition: all 0.3s;
/* text-decoration: none; */
}
@media (any-hover: hover) {
a:hover {
opacity: 0.7;
}
}
img {
height: auto;
border: none;
line-height: 0;
vertical-align: bottom;
}
ol,
ul {
padding: 0;
}
ol li {
margin: 0 0 1em 1.5em;
}
ul li {
margin: 0 0 1em 1.2em;
/* list-style: none; */
font-size: var(--fontSize-base);
line-height: 1.6;
}
dl,
dt,
dd {
margin: 0;
}
@media only screen and (max-width: 560px) {
body {
font-size: 1.5rem;
}
}
/*********************
GENERAL
*********************/
/*FONT*/
.font-en {
font-family: var(--font-en);
}
.font-jp {
font-family: var(--font-jp);
}
.small {
font-size: var(--fontSize-sm);
}
.large {
font-size: 1.2em;
}
.strong {
font-weight: var(--bold);
}
.uppercase {
text-transform: uppercase;
}
.line-heighter,
.line-heighter * {
line-height: 2.1;
}
.line-heighter p {
margin: 0 0 2em;
}
/*ALIGN*/
.center {
text-align: center;
}
.center>* {
margin-left: auto;
margin-right: auto;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
/*IMAGE*/
.img-circle {
border-radius: 50%;
}
.img-radius {
border-radius: 30px;
}
.img-object {
padding-top: 66%;
position: relative;
overflow: hidden;
}
.img-object>img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/*FLEX*/
.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-reverse {
flex-direction: row-reverse;
}
.flex-column {
flex-direction: column;
}
.nowrap {
flex-wrap: nowrap;
}
.space-around {
justify-content: space-around;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.items-center {
align-items: center;
}
.items-stretch {
align-items: stretch;
}
.cell {
position: relative;
}
.cell img {
display: block;
width: 100%;
}
.cell>*:last-child {
margin-bottom: 0;
}
.cell--1-2 {
width: 45%;
}
.cell--1-3 {
width: 30%;
}
.cell--1-4 {
width: 23%;
}
.cell--2-3 {
width: 60%;
}
.cell--3-4 {
width: 73%;
}
@media only screen and (max-width: 560px) {
.flex {
flex-direction: column;
}
.cell--1-2,
.cell--1-3,
.cell--1-4,
.cell--2-3,
.cell--3-4 {
margin-bottom: 1em;
width: 100%;
}
.order0 {
order: 0;
}
.order1 {
order: 1;
}
}
/*LIST*/
.list-none {
list-style: none;
padding-left: 0;
margin: 0;
}
.list-dot li {
list-style: none;
padding-left: 1em;
text-indent: -1em;
margin: 0 0 1em;
}
.list-dot li::before {
content: '';
background-color: var(--main-color-2);
border-radius: 50%;
display: inline-block;
width: 9px;
height: 9px;
margin-right: .5em;
}
/*OTHER*/
.relative {
position: relative;
}
.block {
display: block;
}
.shadow {
box-shadow: 0 0 1.8rem -1rem rgb(0 0 0 / 27%);
}
.marker {
background: linear-gradient(transparent 60%, var(--sub-color-2) 60%);
}
.box {
padding: 30px;
background-color: #fff;
border-radius: 15px;
}
.box>*:last-child {
margin-bottom: 0;
}
@media only screen and (max-width: 960px) {}
@media only screen and (max-width: 560px) {
.box {
padding: 20px;
}
}
/*********************
BUTTON
*********************/
.btn-main {
width: 29rem;
}
.btn-main a {
font-size: var(--fontSize-base);
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
/* width: 29rem; */
height: 6.4rem;
padding: 0 4rem;
color: var(--text-main);
transition: 0.3s ease-in-out;
font-weight: 700;
letter-spacing: 0.025em;
padding-right: 6.5rem;
background-color: #fff;
text-decoration: none;
font-family: var(--font-jp);
}
.btn-main a::before,
.btn-main a::after {
position: absolute;
width: 100%;
height: 0.4rem;
content: '';
transition: all .3s;
background: #000;
}
.btn-main a::before {
top: 0;
left: 0;
}
.btn-main a::after {
right: 0;
bottom: 0;
}
/* --- 1) hoverの対象を に限定（ラッパーdivでは反応させない） --- */
@media (any-hover: hover) {
.btn-main a:hover::before,
.btn-main a:hover::after {
width: 0;
/* 上下ラインのアニメーション */
}
.btn-main a:hover {
color: var(--text-main);
background: var(--background-hover);
opacity: 1;
}
}
/* --- 2) 矢印の初期位置を明示、動かすのも :hover に統一 --- */
.btn-main a span {
position: relative;
/* 矢印の基準にする */
display: inline-block;
}
.btn-main a span::after {
content: '';
position: absolute;
top: 50%;
right: -30px;
/* ★ 初期位置を固定 */
transform: translateY(-50%);
/* X方向のtranslateは使わない */
width: 3.1rem;
height: 1.6rem;
background-image: url(../../uploads/button-main_arrow.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: right .3s ease;
/* ★ rightだけを滑らかに */
}
@media (any-hover: hover) {
.btn-main a:hover span::after {
right: -38px;
/* ★ 少しだけスライド */
}
}
@media only screen and (max-width: 560px) {
.btn-main {
width: 25rem;
}
}
.btn {
color: var(--brand);
display: inline-block;
font-size: 1em;
font-weight: normal;
line-height: 1.7;
position: relative;
z-index: 1;
}
.btn a {
text-decoration: none;
}
.btn-main.btn-cta {
background-color: var(--brand);
color: #fff;
font-weight: var(--semibold);
padding: 0.4em 2em;
}
.btn-wrap {
margin: var(--space-3xl) 0;
}
@media only screen and (max-width: 765px) {
.btn-wrap {
margin: var(--space-2xl) auto;
}
}
.cta-button-wrap {
max-width: 89.5rem;
flex-direction: row;
justify-content: center;
column-gap: 4rem;
}
.cta-button-wrap .btn-wrap {
margin: 10px 0;
}
.btn-main.cta-button {
width: 41rem;
}
@media only screen and (min-width: 961px) {
.btn-main:hover {
background-color: #fff;
color: var(--brand);
}
.btn-main.cta-button a {
font-size: 2em;
height: 10.5rem;
display: flex;
align-items: flex-end;
padding: 2rem 6.5rem 2rem 2.5rem;
}
.btn-main.cta-button span::after {
top: 65%;
}
}
/* リンク本体 */
.btn-sub_link {
display: flex;
align-items: center;
column-gap: var(--space-xs);
width: fit-content;
text-decoration: none;
opacity: 1;
/* 念のための初期値 */
margin-bottom: 16px;
}
/* ここでグローバルの a:hover を上書き（特定ボタンのみ） */
.btn-sub .btn-sub_link:hover,
.btn-sub .btn-sub_link:focus-visible {
opacity: 1;
/* a:hover { opacity:.7 } を無効化 */
}
/* 矢印の丸 */
.btn-sub_arrow {
width: 24px;
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid var(--text-main);
display: flex;
align-items: center;
justify-content: center;
background: transparent;
overflow: hidden;
position: relative;
}
.btn-sub_arrow svg {
width: 28px;
position: relative;
z-index: 2;
}
.btn-sub_arrow svg path {
transition: fill 0.3s ease;
}
/* 横方向スケールでアニメさせる */
.btn-sub_arrow::after {
content: '';
position: absolute;
z-index: 1;
inset: 0;
background: var(--text-main);
/* 塗りつぶし色 */
transform: scaleX(0);
/* 最初はゼロ幅 */
transform-origin: left center;
/* 左から伸びる */
transition: transform 0.35s ease;
/* 速度調整 */
will-change: transform;
}
@media (any-hover: hover) {
/* ホバーで左→右へ塗りつぶし */
.btn-sub_link:hover .btn-sub_arrow::after {
transform: scaleX(1);
}
/* 塗りつぶしに合わせて矢印の色を白へ */
.btn-sub_link:hover .btn-sub_arrow svg path {
fill: #fff;
}
}
/* テキスト */
.btn-sub_text {
color: var(--text-main);
font-size: var(--fontSize-base);
line-height: 1.5;
display: inline-block;
position: relative;
font-family: var(--font-jp);
font-weight: 700;
letter-spacing: 0.8px;
}
.btn-sub_text::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -2px;
/* 下線の位置調整 */
height: 1px;
background: var(--text-main);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.35s ease;
will-change: transform;
}
@media (any-hover: hover) {
.btn-sub_link:hover .btn-sub_text::before {
transform: scaleX(1);
}
}
/* アニメ苦手な環境への配慮（任意） */
@media (prefers-reduced-motion: reduce) {
.btn-sub_arrow::after,
.btn-sub_text::before,
.btn-sub_arrow svg path {
transition: none;
}
}
/*********************
FRONT
*********************/
.fv {
position: relative;
/* ←擬似要素の基準 */
overflow: hidden;
width: 100%;
padding: var(--header-h) 0 var(--space-2xl);
}
.fv::before {
content: "";
position: absolute;
left: 0;
top: calc(-1 * var(--header-h));
/* ←ヘッダーの上まで伸ばす */
width: 100%;
height: calc(100% + var(--header-h));
/* ←FV下端で終わる */
background: repeat top url(../../uploads/jimon_02.svg);
background-size: 100px 100px;
background-color: #CAECF0;
transform: scale(-1, 1);
z-index: -5;
}
.fv::after {
content: url(../../uploads/img_sensu.png);
display: block;
position: absolute;
top: 28%;
z-index: -5;
left: calc((100% - 1120px) / 2 + 35vw);
transform: scale(calc(0.3 + 0.6 * (100vw / 1120px)));
}
@media only screen and (min-width: 1120px) {
.fv::after {
top: 30%;
left: calc((100% - 1120px) / 2 + 400px);
transform: scale(1.0);
}
}
.top-news::before,
.top-regular::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeat top url(../../uploads/jimon_01.svg);
background-size: 100px 100px;
transform: scale(-1, 1);
background-color: #f6f7f7;
z-index: -5;
overflow: hidden;
}
.fv__inner {
position: relative;
max-width: min(90vw, 1240px);
margin-top: var(--space-xl);
aspect-ratio: 11 / 4.8;
}
.fv__title-wrap {
/* width: 52%; */
/* height: fit-content; */
display: flex;
justify-content: space-between;
}
.fv__title-logo {
position: relative;
z-index: 10;
/* margin-left: 2%; */
/* top: 18rem; */
flex-wrap: nowrap;
gap: min(2.3vw, 2.3rem);
justify-content: flex-start;
flex-direction: row;
width: 100%;
}
.site-catch .char {
/* background-color: #fff; */
padding: 0 0.05em;
}
/* .site-catch .hare {
color: var(--brand);
} */
.fv__pic {
position: relative;
z-index: 5;
/* max-height: 47.6vw;
max-width: 47.6vw; */
left: -2%;
/* top: 1.5rem; */
/* clip-path: circle(47.6% at 50% 50%); */
/* background-color: #c4dadf; */
}
.fv__pic-wrap {
position: absolute;
width: 63%;
z-index: 0;
height: fit-content;
right: -15%;
/* bottom: calc(var(--space-3xl) * (-1)); */
top: -5%;
}
.fv__pic ul {
margin: 0;
}
.fv__pic ul li {
margin: 0;
list-style: none;
}
.fv__pic__deco {
position: fixed;
z-index: 5;
animation: floating-y 2.8s ease-in-out infinite alternate-reverse;
}
.fv__cloud-wrap {
animation: floating-x 8.2s ease-in-out infinite alternate-reverse;
position: fixed;
z-index: -1;
opacity: .7;
inset: 0;
pointer-events: none;
aspect-ratio: 11 / 4.8;
max-width: calc(min(90vw, 1240px) + 10vw);
margin-top: var(--header-h);
}
@keyframes floating-x {
0% {
transform: translateX(-5%);
}
100% {
transform: translateX(5%);
}
}
@keyframes floating-y {
0% {
transform: translateY(-10%);
}
100% {
transform: translateY(8%);
}
}
.fv__pic__deco img {
width: 16.7vw;
min-width: 150px;
max-width: 240px;
}
.fv__pic__deco.--01 {
left: -8%;
top: 56%;
}
.fv__pic__deco.--02 {
right: 40%;
top: -2%;
}
.fv__pic__deco.--03 {
right: 33%;
top: 62%;
}
.fv__pic__deco.--04 {
right: -6%;
top: 40%;
}
.fv__pic__deco.--05 {
left: 25%;
top: 90%;
}
.fv__pic__deco.--01 img {
width: 20vw;
min-width: 180px;
max-width: 267px;
}
.fv__pic img {
/* width: 100%;
max-width: 54.4rem;
height: auto; */
/* object-position: -2rem -8rem; */
}
.site-catch {
position: absolute;
font-size: 2.65vw;
font-weight: 700;
z-index: 20;
text-align: left;
}
@media only screen and (min-width: 1330px) {
.site-catch {
font-size: 3.65rem;
}
}
.site-title {
/* max-width: 11vw; */
position: relative;
width: 100%;
flex-direction: column;
z-index: 10;
padding-top: min(13%, var(--space-4xl));
}
.site-title-text {
max-width: 63%;
margin-left: 2rem;
padding-top: 2rem;
}
.site-title-en {
color: var(--brand);
text-align: start;
font-family: var(--font-en);
font-size: min(1.2vw, var(--fontSize-sm));
font-weight: 600;
letter-spacing: 0.2em;
line-height: normal;
margin: var(--space-sm) 0;
}
.sns {
position: relative;
align-content: center;
margin-left: var(--space-md);
}
.sns ul {
margin: 0;
display: flex;
place-self: center;
}
.sns ul li {
display: inline-block;
list-style: none;
margin: 0;
padding: 0 var(--space-sm);
}
.fv-main {
width: 64%;
}
.fv__banner {
max-width: 32.5%;
position: absolute;
z-index: 10;
margin-bottom: 0;
transition: filter 0.35s ease;
bottom: 0;
}
.fv__banner-list {
list-style: none;
margin: 0;
padding: 0;
width: fit-content;
}
.fv__banner-list li {
list-style: none;
margin: auto;
}
.fv__banner-list a {
position: relative;
display: inline-block;
overflow: hidden;
transition: filter 0.35s ease;
vertical-align: bottom;
}
/* 通常：時々キラリ */
.fv__banner-list a::before {
content: "";
position: absolute;
top: 0;
left: -150%;
width: 45%;
height: 100%;
background: linear-gradient(115deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.35) 50%,
rgba(255, 255, 255, 0) 100%);
transform: skewX(-20deg);
pointer-events: none;
animation: kirari 6s infinite;
opacity: 0.55;
}
/* ホバー：ふわっと明るく＋キラッ（PC用） */
.fv__banner-list a:hover {
filter: brightness(1.08);
opacity: 1;
}
.fv__banner-list a:hover::before {
animation: shine-hover 1.1s ease-out;
}
@keyframes kirari {
0% {
left: -150%;
}
8% {
left: 150%;
}
100% {
left: 150%;
}
}
@keyframes shine-hover {
0% {
left: -150%;
opacity: 0.25;
}
40% {
opacity: 0.55;
}
100% {
left: 150%;
opacity: 0;
}
}
.topic-banner,
.regular-banner {
/* background-color: var(--brand); */
display: flex;
padding-bottom: 3.4rem;
justify-content: center;
align-items: center;
/* margin-top: -20.6rem; */
position: relative;
z-index: 10;
height: inherit;
max-height: 20.6rem;
}
.regular-banner {
margin: var(--space-5xl) auto 0;
max-height: fit-content;
padding-bottom: 0;
}
.topic-banner__inner,
.regular-banner__inner {
list-style: none;
margin: 0;
padding: 0;
gap: 2rem;
}
.topic-banner__inner li,
.regular-banner li {
list-style: none;
margin: 0;
}
.regular-banner {
gap: 0.5rem
}
.regular-banner li {
max-width: 368px;
}
@media (min-width: 560px) and (max-width: 790px) {
.regular-banner {
flex-direction: row;
margin-top: var(--space-2xl);
}
.regular-banner li {
width: 48.5%;
}
}
@media (max-width: 560px) {
.regular-banner {
margin-top: var(--space-2xl);
}
}
/* .topic-banner__inner li:first-of-type {
margin: 0;
} */
/* .fv-banner-wrap {
max-height: 15.1rem;
}
.fv-banner ul li img {
max-height: 15.1rem;
} */
/* .fv-banner li+li {
list-style: none;
/* margin: 0 0 0 3.3rem;
}*/
/* .top-news {
background: repeat top url(../../uploads/jimon_01.svg);
padding: 12rem 0 12rem 0;
} */
.top-news {
padding: 3.4rem 2rem;
}
.top-regular {
padding: 6rem 2rem 12rem;
}
.news-list {
width: calc(100% - 50px);
}
.news-list::after {
content: "";
display: block;
position: absolute;
right: 10px;
top: 0;
bottom: 0;
margin: auto;
width: 40px;
height: 40px;
background: url(../../uploads/img_Internal_link.svg) #fff;
background-size: cover;
border-radius: 50%;
z-index: 1;
}
.regular-link {
position: relative;
display: block;
padding-right: 50px;
}
.regular-list {
width: 100%;
}
.regular-link::after {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: url(../../uploads/img-external_link.svg) #fff;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius: 50%;
z-index: 1;
}
@media screen and (max-width: 767px) {
.news-list::after,
.regular-link::after {
right: 5px;
width: 26px;
height: 26px;
}
.news-list,
.regular-link {
width: calc(100% - 35px);
}
.news-list>.flex {
flex-direction: row;
}
}
/* .top-news::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeat top url(../../uploads/jimon_01.svg);
background-size: 100px 100px;
transform: scale(-1, 1);
background-color: #f7f6f6;
z-index: 0;
overflow: hidden;
} */
.top-news_inner {
height: 100%;
display: flex;
/* flex-flow: column; */
justify-content: space-between;
background-color: #fff;
padding: var(--space-4xl);
box-shadow: 0 0 40px 0 rgba(215, 209, 209, 0.25);
}
.top-news_heading {
writing-mode: vertical-rl;
}
.top-news_heading>.h2-top {
letter-spacing: .12em;
}
.top-news_inner>.btn-wrap {
margin-left: auto;
margin-bottom: 0;
}
.heading-jp::before {
content: "";
display: inline-block;
width: 3.3rem;
height: 2.2rem;
background-image: url(../../uploads/fan.svg);
background-repeat: no-repeat;
position: relative;
background-size: contain;
background-position: center;
}
.h2-top {
margin-bottom: 0px;
margin-left: 0px;
}
.top-news_contents {
width: 84%;
max-width: calc(100% - 120px);
}
.top-rakugo .heading-jp::before,
.top-profile .heading-jp::before {
margin-right: 10px;
}
.h2-top {
font-size: var(--fontSize-base);
font-weight: var(--bold);
}
@media only screen and (min-width: 1101px) {
.h2-top {
margin-left: 10px;
}
}
/* モバイル対応 */
@media (max-width: 768px) {
.fv {
aspect-ratio: 2 / 3.3;
}
.fv__inner {
flex-direction: column;
margin-top: 0;
aspect-ratio: 2 / 3.3;
height: fit-content;
min-height: 0;
}
.fv-main {
width: 100%;
flex-direction: column-reverse;
}
.fv__title,
.fv__pic {
max-width: 100%;
margin: 0;
}
.fv::after {
top: calc(5 * 100vw / 13.5);
left: calc((100% - 1120px) / 2 + 22vw);
transform: scale(calc(100vw / 780px));
height: max-content;
}
/* .fv__pic {
margin-top: 20px;
} */
/* .fv__pic img {
width: 80%;
} */
.site-title {
padding-top: var(--space-xl);
}
.site-title-en {
display: flex;
/* justify-content: center; */
font-size: max(3vw, var(--fontSize-xs));
}
.fv__pic {
display: flex;
justify-content: center;
}
.site-catch {
writing-mode: vertical-rl;
font-size: min(5vw, var(--fontSize-3xl));
margin: 2.5rem 0 0 0.5rem;
line-height: normal;
right: 8%;
top: 15%;
}
.site-catch .sp-blank {
margin-top: 1.2em;
}
.h2-top {
font-size: var(--fontSize-base);
}
/* .fv-main {
flex-direction: column;
} */
.fv__pic-wrap {
width: 120%;
position: relative;
margin-top: -15%;
right: 0;
aspect-ratio: 5 / 4;
height: fit-content;
min-height: 0;
}
.fv__title-wrap {
width: 100%;
}
.fv__banner {
width: 100%;
max-width: 100%;
padding-top: var(--space-xl);
/* position: absolute; */
/* margin-top: -18vw; */
margin-bottom: 1rem;
}
.fv__banner-list {
width: 100%;
}
.fv__banner-list li {
width: 100%;
}
.fv__banner-list a {
width: 100%;
}
.fv__banner-list img {
width: 100%;
}
.site-catch .char {
padding: .05em 0;
}
.site-catch .word::after {
content: "";
display: block;
margin-left: 5px;
/* 行間の調整 */
}
.fv__cloud-wrap {
aspect-ratio: auto;
}
/* .fv__pic__deco img {
width: 16.7vw;
min-width: 150px;
max-width: 240px;
} */
.fv__pic__deco.--01 {
left: -5%;
top: 45%;
}
.fv__pic__deco.--02 {
right: 10%;
top: 1%;
}
.fv__pic__deco.--03 {
left: -4%;
top: 15%;
}
.fv__pic__deco.--04 {
right: -6%;
top: 30%;
}
.fv__pic__deco.--05 {
right: -10%;
top: 68%;
left: auto;
}
/* .fv__pic__deco.--01 img {
width: 20vw;
min-width: 180px;
max-width: 267px;
} */
}
.sp-only {
display: none;
}
@media screen and (max-width: 768px) {
.sp-only {
display: block;
}
}
@media only screen and (max-width: 1100px) {
.top-news_inner {
flex-direction: column;
padding: var(--space-3xl);
}
.top-news_heading {
width: 100%;
}
.top-news_contents {
max-width: 100%;
width: 100%;
margin-top: var(--space-2xl);
}
.top-news_heading {
writing-mode: horizontal-tb;
/* 通常 */
flex-direction: column-reverse;
display: flex;
}
.h2-top.heading-jp::before {
display: inline-flex;
vertical-align: bottom;
}
}
@media only screen and (max-width: 560px) {
.top-news_inner {
padding: var(--space-2xl) var(--space-md) var(--space-3xl);
}
.top-news {
padding: 2rem 1rem 6rem;
}
.top-regular {
padding: 6rem 1rem 12rem;
}
}
.top-profile {
background-color: #fff;
}
.top-profile::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% + var(--space-5xl));
background-color: #fff;
overflow: hidden;
}
.top-rakugo,
.top-profile {
padding-top: var(--space-5xl);
padding-bottom: var(--space-5xl);
}
.top-rakugo::before,
.footer-cta::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%;
background: repeat top url(../../uploads/jimon_02.svg);
background-size: 100px 100px;
background-color: #CAECF0;
transform: scale(-1, 1);
z-index: -2;
}
.top-rakugo .heading-en,
.top-profile .heading-en {
margin-right: 2rem;
}
.top-rakugo_heading {
margin-bottom: 2rem;
}
.top-rakugo_heading,
.top-profile_heading {
display: flex;
align-items: center;
flex-direction: row-reverse;
}
.top-rakugo .heading-jp::before,
.top-profile .heading-jp::before {
display: inline-flex;
vertical-align: sub;
margin-right: 10px;
}
.top-rakugo_contents {
max-width: 1185px;
margin: var(--space-4xl) auto;
}
.profile-contents {
position: relative;
margin-top: 5rem;
display: flex;
align-items: center;
padding: 0 var(--space-lg);
}
.profile-img {
position: relative;
max-width: 55%;
height: 100%;
clip-path: circle(49.5%);
left: calc(var(--space-4xl) * -1);
}
.profile-img img {
height: auto;
}
.profile-text {
position: relative;
font-weight: 700;
font-size: var(--fontSize-lg);
/* line-height: 2.2em; */
max-width: 45%;
left: -2rem;
}
.profile-text .name {
font-size: var(--fontSize-3xl);
line-height: 1.3em;
}
.proile-description {
font-family: "Noto Sans JP";
font-size: var(--fontSize-base);
font-style: normal;
font-weight: var(--normal);
line-height: 1.75em;
text-align: justify;
margin-top: 3rem;
}
.profile-text .btn-wrap {
margin-top: 2rem;
}
.profile-title img {
position: absolute;
top: -220%;
left: 100%;
z-index: -10;
max-width: 20.8svw;
}
/* @media only screen and (max-width: 960px) {
.fv {
height: 100svh;
}
}
@media only screen and (max-width:560px) {
.fv {
height: 100svh;
}
} */
@media only screen and (max-width: 900px) {
.profile-title img {
position: absolute;
top: -100%;
left: 75%;
}
}
@media only screen and (max-width: 600px) {
.top-rakugo_heading,
.top-profile_heading {
align-items: flex-start;
flex-direction: column-reverse;
}
.top-rakugo .heading-en,
.top-profile .heading-en {
margin-left: 0;
}
.tag-stage-wrapper {
flex-direction: row;
}
.profile-contents,
.profile-text {
display: block;
}
.profile-img,
.profile-text {
left: 0;
max-width: 95%;
margin: 25px auto;
}
.profile-title {
left: 0;
}
.profile-title img {
position: absolute;
top: -30%;
right: 0;
z-index: -10;
max-width: 20.8svw;
}
}
/*********************
HEADER
*********************/
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 600;
transition: .8s ease;
height: var(--header-h);
}
.header.js-scroll {
backdrop-filter: blur(6px);
background: #fff8;
box-shadow: 0 0 1.8rem -1rem rgb(0 0 0 / 27%);
}
.header-inner {
align-items: center;
justify-content: space-between;
margin: 0 auto;
height: var(--header-h);
width: 100%;
}
.logo_wrap.flex {
flex-direction: row;
margin: auto auto auto 0;
}
/* .header-fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 100;
pointer-events: none;
} */
.header-logo {
pointer-events: auto;
position: relative;
padding-left: var(--space-2xl);
width: 63%;
}
.header-start .header-inner {
width: 90%;
max-width: 1440px;
margin-left: 100px;
margin-right: 100px;
flex-direction: row-reverse;
justify-content: space-evenly;
padding: 0 10px;
}
.header-start .header-nav-list {
display: flex;
flex-direction: row;
margin: 0;
/* justify-content: end; */
/* margin-left: 8.5rem; */
}
.header-start .header-nav-link {
padding-bottom: 0;
line-height: 1.5;
}
.header-title {
margin: 0;
}
.header-nav {
justify-content: center;
}
/* ===============================================
ハンバーガーボタンのスタイリング
=============================================== */
.hamburger {
width: 50px;
height: 50px;
position: fixed;
top: 35px;
right: 25px;
appearance: none;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
z-index: 999;
background-color: transparent;
}
.hamburger span,
.hamburger span::after,
.hamburger span::before {
position: absolute;
display: block;
content: "";
width: 100%;
height: 3px;
background-color: var(--bg-1);
transition: ease .4s
}
.hamburger span::before {
top: -10px;
}
.hamburger span::after {
bottom: -10px;
}
.hamburger.open span {
background-color: transparent;
}
.hamburger.open span::before {
top: 0;
transform: rotate(45deg);
}
.hamburger.open span::after {
bottom: 0;
transform: rotate(-45deg);
}
/* .hamburger.open span, */
.hamburger.open span::after,
.hamburger.open span::before {
background-color: var(--bg-base);
}
/* #drawer-input {
display: none;
} */
.header-nav-list li {
margin: 0;
}
.header-content {
/* width: 83%; */
justify-content: space-between;
}
.header-content .header-nav-item {
list-style: none;
padding: 0px var(--space-md);
}
.header-nav-link {
color: var(--text-main);
display: block;
font-family: var(--font-jp);
font-size: 1.6rem;
font-weight: 700;
position: relative;
text-decoration: none;
border-radius: 2.8rem;
letter-spacing: 0.01em;
}
.menu-item-has-children>a::after {
content: "";
float: inline-end;
inline-size: 0.8rem;
margin-block: calc((1lh - 0.5rem) / 2);
aspect-ratio: 1;
border-bottom: 0.2rem solid var(--text-main);
border-right: 0.2rem solid var(--text-main);
transform: rotate(45deg);
translate: 0 -0.125rem;
margin-left: 1rem;
}
.btn-main.cta-button>span::before {
content: '';
display: block;
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
left: 15%;
top: -10%;
transform: translate(-2.8em, -50%);
}
.btn-main.cta-button a:hover {
color: var(--text-main);
}
.btn-main a:hover>img {
transform: scale(1.05);
}
.profile-btn img {
position: absolute;
bottom: -8em;
left: 28rem;
z-index: 100;
width: calc(var(--space-5xl) * 1.17);
}
#menu-item-72 {
border-right: none;
padding: 0;
margin: 0 0 0 1rem;
}
.header-content .menu-item-72 .header-nav-link {
background-color: var(--brand);
color: var(--text-fff);
display: flex;
font-size: 1.6rem;
font-weight: var(--bold);
justify-content: center;
align-items: center;
width: 14rem;
height: 5.6rem;
padding-bottom: 0;
/* margin-right: 50px; */
transition: .2s;
}
.header-content .menu-item-425 .header-nav-link {
background-color: var(--text-main);
color: var(--text-fff);
display: flex;
font-size: 1.6rem;
font-weight: var(--bold);
justify-content: center;
align-items: center;
width: 14rem;
height: 5rem;
padding-bottom: 0;
border-right: none;
}
.drawer_content.container {
padding: 0;
}
.header-nav-list {
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
.header-nav-item {
margin: 0 0 0 1.8vw;
}
/* .header-nav-item:first-child {
display: none;
} */
.header-nav-item:nth-child(2) {
margin-left: 0;
}
.header-nav .modal__open-btn,
.drawer-nav .modal__open-btn {
background-color: var(--brand);
color: var(--text-fff);
display: flex;
font-size: 1.6rem;
font-weight: var(--bold);
justify-content: center;
align-items: center;
width: 14.6rem;
height: 5rem;
padding-bottom: 0;
/* margin-right: 50px; */
transition: .2s;
margin: 0 var(--space-md);
border-radius: 2.8rem;
letter-spacing: 0.01em;
cursor: pointer;
}
.drawer-nav .modal__open-btn {
margin: auto;
}
@media only screen and (min-width: 950px) {
.hamburger {
display: none;
}
.hamburger.open {
display: inherit;
}
}
@media only screen and (max-width: 949px) {
.header-nav {
display: none;
}
.header-logo {
width: 15vw;
min-width: 10rem;
padding-left: var(--space-lg);
align-content: center;
}
.hamburger {
top: calc(1.2 * var(--space-xl));
right: var(--space-xl);
width: 35px;
height: 35px;
}
.slider4 .splide__slide img {
width: 600px;
height: auto;
}
}
#drawer_content.open {
width: 100%;
/* height: 100%; */
right: 0;
}
#drawer_content {
background-color: var(--bg-1);
overflow: auto;
position: fixed;
top: 0;
right: -100%;
z-index: 700;
width: 60vw;
max-width: 600px;
height: 100%;
transition: ease .4s;
}
#drawer_content.container {
display: flex;
flex-direction: column;
padding-bottom: 50px;
padding-top: 50px;
padding-left: 5%;
padding-right: 5%;
height: 100vh;
}
@media only screen and (max-width:560px) {
#drawer_content.container {
height: 100dvh;
}
.hamburger {
top: var(--space-md);
}
}
.drawer-nav-list li {
margin: 0 0 30px 0;
}
.drawer-nav-link {
color: var(--text-fff);
text-decoration: none;
font-family: var(--font-jp);
font-size: var(--fontSize-base);
font-weight: 700;
display: block;
}
.drawer-nav-item .sub-menu li {
margin-top: 25px;
}
.drawer-nav-list {
margin-top: 5rem;
}
.header-nav-item {
margin: 0;
padding-bottom: 15px;
border-right: none;
}
#menu-item-72.header-nav-item,
#menu-item-337.header-nav-item {
border-bottom: none;
border-right: none;
}
#menu-item-72,
#menu-item-337 {
margin: 0;
}
.drawer-nav-list #menu-item-773 {
display: none;
}
#menu-item-426 .header-nav-link,
#menu-item-427 .header-nav-link {
font-size: 1.4rem;
}
.drawer-sns ul {
width: 8.5rem;
display: flex;
margin: 0;
justify-content: space-between;
margin-top: var(--space-4xl);
}
.drawer-sns ul li {
display: flex;
margin: 0;
}
.header-nav-link,
.drawer-nav-link {
transition: .2s;
}
@media (any-hover: hover) {
.header-nav-link:hover,
.drawer-nav-link:hover {
color: var(--brand);
opacity: 1;
/* transform: scale(1.04); */
;
}
.header-nav .modal__open-btn:hover {
transform: scale(1.04);
}
.menu-item-836>.header-nav-link:hover {
color: var(--text-main);
opacity: 1;
/* transform: scale(1.04); */
;
}
}
@media only screen and (max-width: 560px) {
#drawer_content {
width: 90vw;
}
#drawer_content .container {
padding-left: var(--container-side);
padding-right: var(--container-side);
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
/* .drawer-content-title {
width: 180px;
} */
}
/*********************
BREADCRUMBS
*********************/
#breadcrumb {
/* padding: 0.5em; */
background-color: var(--bg-base);
border-bottom: 1px solid var(--line);
display: none;
}
.breadcrumb-list {
padding: 0;
margin: 0 auto;
}
.breadcrumb-item {
color: var(--text-main);
font-size: var(--fontSize-xs);
line-height: 1;
list-style: none;
display: inline-block;
margin: 0;
}
.breadcrumb-item:not(:last-of-type)::after {
content: '>';
padding: 0 0.5em;
}
.breadcrumb-item a {
color: inherit;
font-weight: var(--medium);
text-decoration: none;
}
.breadcrumb-item .home>span::before {
position: relative;
display: inline-block;
content: "";
width: 1.5em;
height: 1.2em;
background: url(../../uploads/img_home.svg) no-repeat;
vertical-align: bottom;
background-size: contain;
}
/*********************
CONTAINER
*********************/
.section-wrap {
padding-top: var(--space-4xl);
padding-bottom: var(--space-5xl);
position: relative;
}
.container {
max-width: var(--container);
padding-right: var(--container-side);
padding-left: var(--container-side);
position: relative;
margin: 0 auto;
width: 100%;
}
.container-xl {
max-width: var(--container-xl);
margin: 0 auto;
}
.container-l {
max-width: var(--container-l);
margin: 0 auto;
}
.container-m {
max-width: var(--container-m);
margin: 0 auto;
}
.container-ms {
max-width: var(--container-ms);
margin: 0 auto;
}
.container-s {
max-width: var(--container-s);
}
.container-ss {
max-width: var(--container-ss);
}
.map-wrap {
position: relative;
}
.map-wrap::before {
content: "";
display: block;
padding-top: 50%;
}
.map-wrap iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
@media only screen and (max-width: 560px) {
.section-wrap {
padding-top: 50px;
padding-bottom: 50px;
}
.container {
padding-right: 3.5%;
padding-left: 3.5%;
}
}
.site-content {
overflow: hidden;
}
/*********************
HEADING
*********************/
.h1-page {
font-size: var(--fontSize-base);
font-weight: var(--bold);
margin: 0;
padding-left: 2.25em;
}
.h1-page_heading {
/* display: flex; */
/* align-items: center; */
padding: 0 5%;
/* margin: auto; */
height: var(--space-7xl);
align-content: center;
/* justify-content: flex-end; */
/* flex-direction: row-reverse; */
}
.h1-page.heading-jp::before {
vertical-align: sub;
margin-right: 10px;
}
.heading-title {
display: flex;
align-items: center;
/* padding: 0 3%; */
margin: auto;
/* height: var(--space-7xl); */
/* align-content: center; */
/* justify-content: flex-end; */
/* flex-direction: row-reverse; */
}
.heading-description {
color: var(--text-main);
font-family: "Zen Kaku Gothic Antique";
font-size: var(--fontSize-base);
font-weight: 500;
padding-top: var(--space-xs);
}
.h2-page {
font-size: 1.4rem;
font-weight: var(--normal);
position: relative;
padding-bottom: 90px;
text-align: center;
}
.h3-page {
font-size: 2rem;
font-weight: var(--bold);
margin-bottom: 1em;
}
.header-page {
width: 100vw;
height: var(--space-7xl);
margin-top: var(--header-h);
}
.header-page::before {
content: "";
position: absolute;
width: 100%;
height: var(--space-7xl);
background: repeat top url(../../uploads/jimon_02.svg);
background-size: 100px 100px;
background-color: #CAECF0;
transform: scale(-1, 1);
z-index: -2;
}
/* .top-rakugo::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 120rem;
background: repeat top url(../../uploads/jimon_02.svg);
background-color:#CAECF0;
transform: scale(-1, 1);
z-index: -2;
} */
/* .header-page::before {
content: "";
position: absolute;
width: 100%;
height: 17.2rem;
background: repeat top url(../../uploads/jimon_02.svg);
transform: scale(-1, 1);
} */
.heading-en {
color: var(--text-main);
font-family: var(--font-en);
font-weight: 800;
text-transform: uppercase;
font-size: var(--fontSize-6xl);
/* letter-spacing: .1em; */
line-height: 1;
}
@media only screen and (max-width: 1023px) {
.h1-page_heading {
/* flex-direction: column-reverse; */
align-items: flex-start;
justify-content: center;
height: 14rem;
}
.header-page::before {
height: 14rem;
}
.header-page {
height: 14rem;
}
.h1-page_heading .heading-en {
margin-left: 0;
}
.privacy.heading-title {
flex-direction: column;
align-items: flex-start;
}
.privacy.h1-page {
padding: 0;
margin: 0;
}
}
@media only screen and (max-width: 560px) {
.h1-page {
font-size: var(--fontSize-xm);
padding: 0;
/* translate: 2.25em; */
}
.heading-en {
font-size: var(--fontSize-5xl);
}
.heading-description {
font-size: var(--fontSize-sm);
padding-top: var(--space-xxs);
}
.heading-title {
flex-direction: column;
align-items: flex-start;
}
}
/*********************
FOOTER
*********************/
#footer {
position: relative;
z-index: 200;
}
.footer-cta {
padding: 0;
z-index: 200;
position: relative;
/* margin-top: var(--space-5xl); */
}
.cta-content {
color: var(--text-main);
position: relative;
padding: var(--space-md) var(--space-2xl) var(--space-2xl);
font-size: 1rem;
margin-bottom: var(--space-2xl);
}
.cta-title-en {
font-size: var(--fontSize-5xl);
font-weight: 800;
letter-spacing: 0.028em;
/* margin-bottom: 0.2rem; */
line-height: 100%;
}
.cta-title {
width: 30rem;
position: relative;
}
.cta-title-en::before {
content: "";
z-index: -1;
width: 6.2rem;
height: 3.3rem;
background-image: url(../../uploads/fan.svg);
background-repeat: no-repeat;
position: absolute;
top: -16%;
transform: scale(3.125);
margin: auto;
right: 0;
left: 0;
background-position: center;
}
.cta-title-jp {
font-size: var(--fontSize-md);
font-weight: 900;
margin-top: 0;
padding-bottom: 3.5rem;
}
.cta-text {
font-family: "Noto Sans JP";
font-size: var(--fontSize-lg);
line-height: 2em;
letter-spacing: 0.02em;
margin-bottom: 2em;
}
.footer-inner {
margin: 0 var(--space-xl);
}
.footer-logo {
display: block;
width: 120px;
}
.footer-main {
background-color: var(--bg-1);
padding-top: 5rem;
padding-bottom: 5rem;
position: relative;
z-index: 50;
width: 100%;
overflow: hidden;
}
.footer-menu-main {
column-gap: 2.5em;
}
.footer-info {
width: 100%;
justify-content: center;
}
.footer-menu-foot {
align-items: center;
}
.footer-menu_wrap {
/* height: 15.1rem; */
margin: var(--space-4xl) 0;
}
.footer-foot-list {
/* gap: var(--space-md); */
list-style: none;
margin: 0;
flex-direction: row;
flex-wrap: wrap;
/* height: 15.1rem; */
align-content: stretch;
justify-content: center;
}
.footer-foot-list li {
font-size: 1em;
margin: 0 0.8em 1em 0.8em;
position: relative;
}
.footer-foot-link {
color: var(--text-fff);
text-decoration: none;
font-family: var(--font-jp);
font-size: var(--fontSize-base);
font-weight: 700;
}
#menu-item-390,
#menu-item-391 {
font-size: 1.2rem;
margin-top: -10px;
}
/* #menu-item-131 {
font-size: 1.2rem;
margin-top: 4px;
} */
/* .sub-menu li {
font-size: 1.4rem;
letter-spacing: 0.08em;
} */
.footer-sns ul {
width: 100%;
display: flex;
margin: 0;
justify-content: space-evenly;
}
.footer-sns ul li {
margin: 0;
}
.copyright a {
color: #fff;
font-size: 1.3rem;
text-decoration: none;
letter-spacing: 0.06em;
}
.copyright-wrap {
flex-direction: column;
width: 18.4rem;
gap: 0.16rem
}
p.copyright {
margin-top: 3rem;
}
@media only screen and (max-width:960px) {}
@media only screen and (max-width:610px) {
/* .footer-cta {
padding: 45px 0 60px;
} */
.footer-menu-main {
padding: 40px 0;
}
.footer-main-item:not(:last-of-type) {
margin: 0 0 2em 0;
}
.copyright-wrap {
margin: auto;
}
.footer-sns ul li {
margin: 0;
}
}
/*********************
ARCHIVE
*********************/
.archive-title {
text-align: center;
font-family: var(--font-jp);
font-size: var(--fontSize-3xl);
font-weight: 700;
margin-top: var(--space-4xl);
}
.archive-title.heading-jp::before {
content: "";
display: inline-block;
width: var(--space-3xl);
height: var(--space-xl);
background-image: url(../../uploads/fan.svg);
background-repeat: no-repeat;
position: relative;
background-size: contain;
}
/*card*/
.archive-card {
/* background-color: #FFFFFF; */
/* border-radius: 5px; */
/* margin: 0 1.6% 10%; */
box-shadow: 2px 2px 10px #cdcccc33;
height: fit-content;
}
.tax-archive-card {
/* margin: 0 1.6% 10%; */
box-shadow: 2px 2px 10px #cdcccc33;
}
.archive-card a,
.tax-archive-card a {
display: block;
width: 100%;
height: 100%;
/* border-radius: 5px; */
overflow: hidden;
text-decoration: none;
max-width: 400px;
}
.archive-card a:hover,
.tax-archive-card a:hover {
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .1);
opacity: 1;
}
.image-archive {
position: relative;
z-index: -20;
aspect-ratio: 21 / 29.7;
background-color: #E3E2DB;
}
.image-archive>img {
object-fit: contain;
left: 0;
top: 0;
transition: all .3s;
width: 100%;
height: 100%;
}
.archive-card:hover .image-archive>img,
.tax-archive-card:hover .image-archive>img {
transform: scale(1.03);
}
.text-archive {
color: #000000;
padding: 2.5rem;
background-color: #FFFFFF;
height: 27.7rem;
}
.text-archive .time-archive {
color: #777777;
margin-bottom: 1em;
}
/*list*/
.archive-list,
.regular-item {
border-bottom: 1px solid var(--line);
/* margin-top: 1.7rem; */
transition: all 0.4s;
}
/* .archive-list:last-of-type {
margin-bottom: 1.5em;
} */
.schedule-time {
color: var(--text-main);
font-weight: var(--normal);
letter-spacing: .1em;
}
.archive-list a {
display: block;
text-decoration: none;
width: 100%;
padding: var(--space-md) var(--fontSize-md);
transition: background-color 0.3s;
}
.regular-item a {
display: block;
text-decoration: none;
width: 100%;
padding: var(--space-md) var(--fontSize-md);
transition: background-color 0.3s;
}
.regular-programs ul li {
margin: 0;
list-style: none;
line-height: inherit;
}
.regular-programs ul {
margin: 0;
}
/*
.regular-programs {
width: 70rem;
} */
@media (any-hover: hover) {
.archive-list a:hover,
.regular-item a:hover {
background-color: var(--background-hover);
opacity: 1;
}
}
.archive-list .time-archive {
color: var(--text-sub);
align-self: center;
width: 90px;
}
.archive-list .title-archive,
.regular-programs .title-archive {
font-size: var(--fontSize-base);
font-family: "Noto Sans JP";
color: var(--text-main);
font-style: normal;
font-weight: var(--normal);
line-height: 2.6rem;
/* 175% */
/* height: 4.6rem; */
margin-top: var(--space-xs);
display: flex;
align-items: center;
/* text-align: justify; */
}
.regular-programs .title-archive {
max-width: 90%;
}
.title-archive_wrap {
width: 75%;
}
.cat-archive {
margin: 0 17px;
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
.cat-archive_text {
color: #fff;
padding: 0 0.5rem 0 0.6rem;
display: block;
min-width: 80px;
max-width: 100px;
/* height: 20px; */
font-size: var(--fontSize-xs);
align-self: center;
}
.cat-archive_text a {
color: #FFF;
text-decoration: none;
}
.header-media-info>.cat-archive_text:hover {
opacity: 0.7;
transition: ease .3s;
}
.stage-archive-wrap {
margin: var(--space-5xl) 0 0;
justify-content: center;
gap: var(--space-4xl) var(--space-2xl);
}
.stage-archive-wrap article {
border: 1px solid var(--line);
}
.top-rakugo_contents article {
border: none;
}
.news-archive {
min-height: 37.2rem;
}
.news-archive-wrap .schedule-date {
padding: 0 8px 0 0;
}
.news-archive-wrap .schedule-place {
margin-right: 0;
}
.news-archive-wrap .archive-list .title-archive {
display: inline-block;
letter-spacing: 0.01em;
}
/* .news-text {
margin-top: var(--space-xs);
} */
.news_contents {
width: 80rem;
}
.news-archive-contents {
width: 100%;
padding-top: var(--space-4xl);
padding-bottom: var(--space-4xl);
}
.schedule_catlist {
height: fit-content;
}
.schedule-place {
color: var(--text-main);
font-family: "Noto Sans JP";
font-size: var(--fontSize-sm);
font-weight: 400;
margin-right: 10px;
align-self: end;
/* min-width: 80px; */
}
.schedule-date,
.regular-daytime,
.media-date,
.stage-date {
color: var(--text-main);
font-family: "Zen Old Mincho";
font-weight: 900;
/* padding: 0 10px; */
letter-spacing: 0.04em;
font-size: var(--fontSize-base);
max-width: 75%;
}
.schedule-date,
.media-date,
.stage-date {
white-space: nowrap;
}
.schedule-list {
width: 824px;
}
.schedule-week {
margin-left: -5px;
margin-right: -9px;
}
.schedule_catlist {
height: fit-content;
}
/* @media only screen and (max-width: 800px) {
.schedule-list {
width: 100%;
}
} */
.is-new {
color: var(--accent-color-2);
font-family: var(--font-en);
font-size: var(--fontSize-xs);
font-weight: 800;
line-height: normal;
align-self: center;
}
.stage-card.is-new {
font-size: var(--fontSize-md);
font-weight: 800;
position: fixed;
right: 0;
top: calc(var(--space-xl) * (-1.2));
}
.schedule-list.is-new {
position: absolute;
top: 2px;
left: var(--space-ms);
}
@media only screen and (max-width:960px) {
.archive-card,
.tax-archive-card {
/* margin: 0 1% 12%; */
align-items: center;
min-width: 270px;
}
}
@media only screen and (max-width: 600px) {
/* .schedule-date,
.regular-daytime {
padding: 5px 0 0 0;
;
} */
.archive-card,
.tax-archive-card {
margin: var(--space-2xl) auto var(--space-2xl);
max-width: 360px;
min-width: 260px;
}
.stage-archive-wrap {
margin: var(--space-5xl) 20px 0;
}
.cat-archive_text {
min-width: calc(var(--space-3xl)*1.4);
}
/* .is-new {
font-size: var(--fontSize-xxs);
} */
.schedule-list.is-new {
top: 4px;
}
}
/*category*/
.cat-regular-stage {
background-color: var(--brand);
color: #fff;
}
.cat-rakugokai {
background-color: #2E5FA7;
color: #fff;
}
.cat-event {
background-color: #E56B3E;
color: #fff;
}
.cat-tv {
background-color: #007B43;
color: #fff;
}
.cat-radio {
background-color: #745399;
color: #fff;
}
.cat-magazine {
background-color: #7BA23F;
color: #fff;
}
.cat-cm {
background-color: #4A90E2;
color: #fff;
}
.cat-podcast {
background-color: #745399;
color: #fff;
}
.cat-movie {
background-color: #D3381C;
color: #fff;
}
.cat-book {
background-color: #F0C93A;
color: #fff;
}
/*PAGENATION*/
/* リンクの枠 */
.navigation.pagination {
margin-top: 4em;
width: 100%;
}
/* .pagination .nav-links {
} */
/* 数字のリンク */
.pagination .page-numbers {
color: var(--text-main);
font-family: var(--font-en);
font-weight: var(--normal);
display: flex;
justify-content: center;
margin: 0;
align-items: center;
}
.pagination .page-numbers li {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
}
.pagination .page-numbers li:first-of-type {
margin-left: 0;
}
.pagination .page-numbers li:last-of-type {
margin-right: 0;
}
.pagination .page-numbers a {
text-decoration: none;
border: 1px solid var(--text-main);
border-radius: 50%;
width: 2.5em;
height: 2.5em;
align-items: center;
}
.pagination .page .page-numbers {
margin-right: 1.2em;
}
.pagination .page a.next.page-numbers {
margin-right: 0;
}
/* 前へ、次へボタン */
.pagination .nav-links .prev,
.pagination .nav-links .next {
width: 3em;
height: 3em;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.pagination .nav-links .prev {
background-image: url(../../uploads/arrow.svg);
transform: scale(-1, 1);
border: none;
}
.pagination .nav-links .next {
background-image: url(../../uploads/arrow.svg);
border: none;
}
/* ドット */
.pagination .nav-links .dots {
border: none;
}
/* 現在のページ */
.pagination .nav-links .current {
background-color: #CAECF0;
width: 2.5em;
height: 2.5em;
border-radius: 50%;
border: 1px solid var(--text-main);
align-items: center;
}
/* カテゴリーリスト */
.cat-list li {
margin: 0;
list-style: none;
}
.cat-list a {
color: var(--text-main);
font-weight: var(--bold);
padding-left: var(--space-lg);
display: block;
height: 4.8rem;
align-content: center;
border-left: 4px solid var(--border-sub);
text-decoration: none;
}
.cat-list a.current {
font-weight: bold;
color: var(--brand);
border-color: var(--brand);
}
@media only screen and (max-width: 560px) {
/* .archive-list:last-child {
margin-bottom: 1.5em;
} */
.archive-list .time-archive {
margin-right: 0;
/* margin-bottom: .5em; */
}
/* .archive-list .time-archive, */
.archive-list .title-archive {
width: 100%;
}
.archive-list a,
.regular-item a {
padding: var(--space-lg) 0;
}
}
/*********************
SINGLE
*********************/
.main-single-post {
background-color: var(--bg-2);
justify-content: center;
align-items: center;
}
.single-wrap {
background-color: #fff;
margin: auto;
box-shadow: 0 0 40px 0 rgba(215, 209, 209, 0.25);
display: flex;
padding: var(--space-2xl);
flex-direction: column;
max-width: 1005px;
}
.single-outer {
padding: var(--space-4xl) var(--space-6xl);
}
.header-single {
position: relative;
}
.content-single {
position: relative;
padding-top: var(--space-2xl);
/* max-width: 800px; */
}
/* .content-single p {
text-align: justify;
} */
.time-single {
display: inline-block;
margin-bottom: .5em;
color: var(--text-sub);
}
.title-single {
font-size: var(--fontSize-2xl);
font-weight: var(--bold);
border-bottom: 1px solid var(--color-base);
padding: var(--space-xl) 0px;
}
.main-single-post h2 {
font-size: 1.8em;
}
.main-single-post h3 {
font-size: 1.5em;
}
.main-single-post h4 {
font-size: 1.2em;
}
.main-single-post h2,
.main-single-post h3,
.main-single-post h4 {
margin: 1em 0;
}
.main-single-post p+h2,
.main-single-post img+h2,
.main-single-post figure+h2,
.main-single-post table+h2 {
margin-top: 3em;
}
.main-single-post p+h3,
.main-single-post img+h3,
.main-single-post figure+h3,
.main-single-post table+h3 {
margin-top: 2em;
}
.main-single-post ul,
.main-single-post ol {
margin: 0.5em 0;
}
.main-single-post figure,
.main-single-post img {
display: block;
/* max-width: 100%; */
margin: auto;
/* width: 350px; */
height: auto;
/* アスペクト比を維持 */
}
.main-single-post figure {
margin-bottom: 2em;
}
.main-single-post figcaption {
font-size: .8em;
line-height: 1.7;
margin-top: .5em;
}
.main-single-post table {
border: solid 1px #DDD;
border-collapse: collapse;
}
.main-single-post tr {
border-bottom: solid 1px #DDD;
}
.main-single-post th,
.main-single-post td {
padding: 1em;
border-right: solid 1px #DDD;
}
.sitelink-button a {
color: #ee8d72;
}
.time_cat_wrap {
display: flex;
align-items: baseline;
}
.cat-archive a {
text-decoration: none;
}
.single-cat.cat-archive_text:hover {
background-color: var(--brand);
transition: ease .3s;
}
.single-btn-wrap {
margin: var(--space-5xl) 0 0 0;
}
@media only screen and (max-width: 950px) {
.single-outer {
padding: var(--space-4xl);
}
}
@media only screen and (max-width: 560px) {
.title-news {
font-size: 1.9rem;
}
.single-outer {
padding: var(--space-3xl) var(--space-xl);
}
.title-single {
font-size: var(--fontSize-lg);
padding: var(--space-md) 0px;
}
.cat-date {
flex-direction: row;
}
.single-wrap {
padding: var(--space-lg);
}
}
/*********************
STAGE
*********************/
.header-stage {
width: 60%;
justify-content: flex-start;
}
.gallery-stage {
max-width: 300px;
margin-left: 10px;
}
.item-table {
display: flex;
/* justify-content: space-between; */
padding: 1em 0;
gap: var(--space-md);
border-bottom: solid 1px var(--line);
}
.item-table:last-of-type {
margin-bottom: 0;
}
.item-table dt {
color: var(--text-light);
width: var(--space-5xl);
text-align: center;
font-size: var(--fontSize-sm);
letter-spacing: normal;
font-weight: 500;
/* padding-top: 2px; */
background-color: var(--bg-3);
align-content: center;
}
.item-table dd {
width: calc(100% - var(--space-5xl) - 10px);
}
.item-table a:not([class]) {
transition: 0.3s;
text-decoration: underline;
;
}
.item-table p {
margin: 0;
word-wrap: break-word;
}
.category-stage {
font-family: var(--font-jp);
font-size: 2.0rem;
color: #fff;
background-color: var(--text-main);
font-weight: var(--bold);
line-height: 25px;
/* 125% */
letter-spacing: 2px;
padding: 5px 16px 6px 16px;
align-items: flex-end;
position: absolute;
top: -36px;
left: 0px;
z-index: 50;
border-radius: 12px 12px 0px 0px;
}
.category-stage a {
color: #fff;
text-decoration: none;
}
.category-stage:hover {
background-color: var(--brand);
transition: ease .3s;
}
/* .tag-stage li {
font-size: 1.1rem;
list-style: none;
margin: 0px 10px 10px 0px;
width: 120px;
} */
.tag-stage-wrapper {
gap: 7px;
align-items: center;
}
.tag-stage {
font-size: 1.1rem;
margin: 0;
gap: 7px;
align-items: center;
}
.tag-stage .ended,
.tag-stage .today,
.tag-stage .upcoming {
font-size: 11px;
border-radius: 1em;
border: 1px solid var(--text-main);
background: #FFF;
display: flex;
height: 20px;
padding: 0px 8px 0px 10px;
position: relative;
margin: auto;
align-content: center
}
.article-stage .tag-stage .ended,
.article-stage .tag-stage .today,
.article-stage .tag-stage .upcoming {
margin: 0;
}
.tag-stage.ended {
border: 1px solid var(--accent-color-3);
color: var(--accent-color-3);
}
.tag-stage.today {
background: var(--accent-color-1);
border: none;
color: var(--text-fff);
}
/* .event-status {
display: inline-block;
font-size: 1.4rem;
padding: 4px 8px;
border-radius: 1em;
font-size: 0.9em;
font-weight: bold;
} */
/* .event-status.ended {
background-color: #f8d7da;
color: #721c24;
}
.event-status.upcoming {
background-color: #d1ecf1;
color: #0c5460;
} */
.tag-stage .soldout,
.tag-stage .day-soldout,
.tag-stage .night-soldout {
font-family: var(--font-en);
font-size: var(--fontSize-xs);
color: #fff;
background-color: var(--accent-color-2);
border-radius: 1em;
display: flex;
/* height: 20px; */
padding: 0px 10px 0px 10px;
}
.tag-stage-li .soldout,
.tag-stage-li .day-soldout,
.tag-stage-li .night-soldout {
font-family: var(--font-en);
font-size: var(--fontSize-xxs);
color: #fff;
background-color: var(--accent-color-2);
border-radius: 1em;
display: flex;
padding: 0px 8px 0px 8px;
margin: 0 auto 0 0;
line-height: inherit;
}
.tag-stage-li {
margin: 0 0 0;
}
.tag-stage .tag-place {
font-size: var(--fontSize-base);
width: 100%;
padding: 0.15em 0.8em;
vertical-align: middle;
background: var(--text-main);
color: #FFF;
font-weight: 700;
letter-spacing: 0.07em;
}
.tag-stage .single-tag-place {
font-size: var(--fontSize-md);
padding: 0.15em 0.6em;
vertical-align: middle;
background: var(--text-main);
color: #FFF;
font-weight: 700;
letter-spacing: 0.07em;
margin: 0;
}
.tag-place {
margin: 0;
}
.archive-card .title-archive,
.tax-archive-card .title-archive {
font-size: 2.2rem;
}
.archive-card .stage-title-archive,
.tax-archive-card .stage-title-archive {
font-size: var(--fontSize-md);
font-family: var(--font-jp);
font-weight: 700;
line-height: 1.5;
margin-top: 0.8rem;
letter-spacing: 0;
}
.font-stage-date.day.small {
margin-left: -1em;
position: relative;
}
/* .date-stage {
font-size: 2.2rem;
font-weight: 400;
margin-bottom: 0.4em;
} */
/* .date-stage .week {
font-size: 0.7em;
vertical-align: 6%;
} */
.date-stage-wrap {
margin-top: 1rem;
height: 3rem;
}
.font-stage-date {
font-family: "Zen Old Mincho";
font-weight: 700;
letter-spacing: 0.07em;
line-height: 22px;
}
.font-stage-date.schedule-week,
.font-media-date.schedule-week {
margin-left: -1em;
}
.font-stage-date.large {
font-size: var(--fontSize-2xl);
letter-spacing: 0.125em;
font-weight: 900;
vertical-align: baseline;
}
.font-media-date {
font-family: "Zen Old Mincho";
font-weight: 700;
letter-spacing: 0.07em;
line-height: 22px;
}
.font-media-date.large {
font-size: var(--fontSize-2xl);
letter-spacing: 0.125em;
font-weight: 900;
vertical-align: top;
}
.font-media-date.day.small {
margin-left: -1em;
position: relative;
}
.font-media-date.small {
margin-left: 1em;
}
.date-media {
white-space: nowrap;
}
.cat-date {
align-items: center;
}
/* Archive card */
.stage-text-archive {
color: var(--text-main);
padding: var(--space-md);
background-color: #FFFFFF;
min-height: 28rem;
overflow: hidden;
}
.stage-text-archive a {
color: var(--text-main);
}
.table-stage-wrap {
margin-top: 0.5em;
}
.table-stage {
display: flex;
margin-top: 0.45em;
}
.table-stage dt {
font-family: var(--font-jp);
font-size: var(--fontSize-xs);
color: #FFF;
font-weight: 500;
letter-spacing: 0.55px;
border-radius: 2px;
background: var(--brand);
display: flex;
height: 20px;
/* padding: 4px 10px; */
justify-content: center;
align-items: center;
vertical-align: text-top;
min-width: 43px;
}
.table-stage dd {
font-family: "Noto Sans JP";
font-size: var(--fontSize-sm);
font-weight: 500;
margin-left: 7px;
overflow: hidden;
line-height: 1.5;
position: relative;
top: -0.1em;
letter-spacing: 0;
}
.table-stage dd span {
display: block;
}
@media only screen and (max-width: 1140px) {
.article-stage {
flex-direction: column;
}
.header-stage {
width: 100%;
}
.gallery-stage {
width: 50vw;
max-width: 300px;
margin: auto;
}
}
@media only screen and (max-width: 980px) {
.stage-text-archive {
min-height: 26.5rem
}
}
@media only screen and (max-width: 640px) {
.stage-text-archive {
min-height: 26rem
}
.top-rakugo-wrap {
width: 80%;
}
.archive-card,
.tax-archive-card {
/* width: inherit; */
}
}
@media only screen and (max-width: 560px) {
.tag-stage {
gap: 5px;
flex-direction: row;
}
.tag-stage .single-tag-place {
font-size: var(--fontSize-sm);
}
.gallery-stage {
max-width: 300px;
margin: auto;
}
.main-single-post ul,
.main-single-post ol {
margin: 1em 0;
}
.category-stage {
font-size: var(--fontSize-md);
font-weight: 900;
line-height: 18px;
letter-spacing: 2px;
top: -28px;
border-radius: 6px 6px 0px 0px;
}
/* .date-stage-wrap {
margin-top: 0;
} */
.item-table {
flex-direction: column;
}
.item-table dt,
.item-table dd {
width: 100%;
}
.top-rakugo-wrap {
width: 85%;
}
}
@media only screen and (max-width: 360px) {
.top-rakugo-wrap {
width: 95%;
}
}
/*********************
MEDIA-INFO
*********************/
.header-media-info {
width: 100%;
}
/*********************
PROFILE
*********************/
.profile-name-wrap {
display: flex;
flex-direction: row;
margin-bottom: 2rem;
align-items: baseline;
justify-content: flex-start;
}
.profile-name {
font-family: var(--font-jp);
font-size: var(--fontSize-3xl);
font-weight: 600;
/* margin-right: 1.6rem; */
}
.profile-name-title,
.profile-name-family {
font-family: var(--font-jp);
font-size: var(--fontSize-base);
font-weight: 600;
}
.profile-text-list li {
margin: 0;
text-align: justify;
font-size: var(--fontSize-base);
line-height: var(--fontSize-2xl);
}
.profile-text-list {
margin: 0 0 var(--space-2xl);
margin-left: 1.6em;
text-indent: -1.8em;
}
.profile-text-list li::before {
content: "・";
/* 記号(黒丸)を挿入 */
/* color: var(--brand); */
/* 好きな色にする */
font-size: 2.5rem;
/* 点の大きさ */
margin-right: .1em;
/* 点とテキストの距離 */
vertical-align: sub;
}
.profile-page-top {
display: flex;
justify-content: center;
align-items: flex-start;
gap: var(--space-2xl);
}
.profile-text-wrap {
width: 41%;
text-align: justify;
/* display: flex;
flex-direction: column;
justify-content: center; */
}
.profile-text-wrap p {
margin-bottom: var(--space-xs);
}
.profile-text-wrap .btn-main {
margin-bottom: var(--space-2xl);
}
.profile-img-wrap {
width: 54%;
}
.profile-page-img img {
width: 100%;
}
.profile-page-h2 {
text-align: center;
font-family: var(--font-jp);
font-size: var(--fontSize-3xl);
font-weight: 700;
margin-bottom: 0;
}
.profile-page-h2.heading-jp::before {
content: "";
display: inline-block;
width: var(--space-3xl);
height: var(--space-xl);
background-image: url(../../uploads/fan.svg);
background-repeat: no-repeat;
position: relative;
background-size: contain;
}
.profile-page-stage {
padding-bottom: var(--space-7xl);
}
.profile-heading-en {
color: var(--text-main);
text-align: center;
font-family: var(--font-jp);
font-size: var(--fontSize-base);
letter-spacing: 0.8px;
text-transform: uppercase;
display: block;
font-weight: 700;
margin-bottom: var(--space-2xl);
}
.profile-regular .regular-programs {
margin: auto;
}
.dokuenkai__banner {
position: relative;
z-index: 10;
transition: filter 0.35s ease;
max-width: 40rem;
margin: auto;
}
.dokuenkai__banner-list {
/* display: flex;
flex-wrap: wrap; */
gap: 16px;
list-style: none;
padding: 0;
margin: 0;
}
.dokuenkai__banner-list li {
list-style: none;
margin: 0;
}
/* .dokuenkai__banner-list a {
position: relative;
display: inline-block;
overflow: hidden;
transition: filter 0.35s ease;
} */
.dokuenkai__banner-item {
flex: 1 1 0;
min-width: 0;
}
.dokuenkai__banner-item a {
display: block;
}
.dokuenkai__banner-item img {
width: 100%;
height: auto;
display: block;
max-width: 400px;
margin: auto;
}
.profile-stage-list {
margin: auto;
width: fit-content;
font-family: var(--font-base);
font-size: var(--fontSize-base);
font-weight: 700;
line-height: var(--fontSize-3xl);
letter-spacing: 0.8px;
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.profile-stage-list li,
.profile-sns-list li,
.profile__banner-list li {
margin: 0;
list-style: none;
/* justify-content: flex-start; */
}
.profile-stage {
gap: var(--space-sm);
align-items: baseline;
flex-direction: row;
width: max-content;
}
.profile-stage>.tag-place {
font-size: var(--fontSize-sm);
padding: 0 0.3em;
vertical-align: middle;
background: var(--text-main);
color: #FFF;
font-weight: 700;
letter-spacing: 0.07em;
width: calc(var(--space-5xl) * 1.2);
min-width: 106px;
text-align: center;
}
.profile-stage>.place-link {
font-size: (var(--font-base));
}
.profile-live p {
margin: auto;
width: fit-content;
font-family: var(--font-base);
font-size: var(--fontSize-base);
font-weight: 700;
line-height: var(--fontSize-3xl);
letter-spacing: 0.8px;
}
.profile-sns ul {
display: flex;
gap: var(--space-xl);
justify-content: flex-start;
/* margin-bottom: var(--space-4xl); */
flex-direction: column;
}
.profile-sns-list ul li a {
display: inline-flex;
/* 横並びに */
align-items: center;
/* 縦位置を中央に */
gap: var(--space-sm);
/* 画像と文字の間に余白 */
text-decoration: none;
/* 下線を消す */
color: var(--text-main);
font-family: var(--font-base);
font-size: var(--fontSize-base);
font-weight: 700;
line-height: var(--fontSize-3xl);
letter-spacing: 0.8px;
}
.profile-sns-list ul li a img {
width: var(--fontSize-3xl);
/* アイコンの大きさを揃える */
height: auto;
display: block;
}
.profile__banner-list {
flex-direction: row;
gap: var(--space-md);
}
.profile__banner-list li {
width: 49%;
}
.profile-banner {
padding-top: var(--space-3xl);
}
.profile-banner-wrap {
margin: auto;
}
/* .frag-lab>img {
width: fit-content;
} */
@media only screen and (max-width: 930px) {
.profile-page-top {
display: flex;
justify-content: center;
flex-direction: column-reverse;
align-items: center;
gap: var(--space-2xl);
}
.profile-text-wrap .btn-main {
margin: 0 auto var(--space-2xl);
}
.profile-text-wrap {
width: 90%;
text-align: justify;
flex-direction: column;
}
.profile-img-wrap {
width: 70%;
}
.profile-sns ul {
display: flex;
gap: var(--space-xl);
justify-content: center;
margin-bottom: var(--space-4xl);
flex-direction: row;
}
.profile__banner-list {
flex-direction: column;
padding-right: var(--container-side);
padding-left: var(--container-side);
}
.profile__banner-list li {
width: 100%;
}
.profile-banner {
padding-top: 0;
}
}
@media only screen and (max-width: 420px) {
.profile-text-wrap .profile-name {
margin-bottom: 0;
}
.profile-sns ul {
gap: var(--space-2xl);
}
.profile-img-wrap {
width: 80%;
}
}
section {
padding-block: var(--space-xl);
}
.inquiries-heading {
font-family: var(--font-jp);
font-size: var(--fontSize-3xl);
font-weight: 700;
border-bottom: 5px solid var(--brand);
margin: auto;
width: fit-content;
padding: 0 var(--space-xl) var(--space-md);
margin-bottom: var(--space-md);
}
.profile-page-top::before,
.profile-page-stage::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeat top url(../../uploads/jimon_02.svg);
background-size: 100px 100px;
transform: scale(-1, 1);
background-color: #EDF8FA;
z-index: -5;
overflow: hidden;
}
/* #modal1::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% + var(--space-5xl));
background: repeat top url(../../uploads/jimon_01.svg);
background-size: 100px 100px;
transform: scale(-1, 1);
background-color: #f6f7f7;
z-index: -5;
overflow: hidden;
} */
.profile-heading-en.inquiries {
margin-bottom: var(--space-md);
}
.profile-page-inquiries>.detail {
color: #7F8286;
text-align: center;
font-family: "Zen Kaku Gothic Antique";
font-size: var(--font-base);
font-weight: 500;
line-height: var(--fontSize-2xl);
/* 175% */
max-width: 440px;
margin: 0 auto var(--space-4xl);
}
.service__img img {
aspect-ratio: 210 / 120;
object-fit: cover;
}
.service__title {
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 1.5;
margin-bottom: 16px;
}
.service__text {
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 1.5;
margin-bottom: 16px;
}
.service__btn {
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 1.5;
}
.service__btn a {
color: #333;
/* common/btn-jp */
font-family: var(--font-jp);
font-size: var(--fontSize-base);
font-weight: 600;
letter-spacing: 0.8px;
}
.service__item {
display: grid;
grid-template-areas:
"title img"
"text img"
"list img"
"btn img";
grid-template-columns: calc(390 / 1040 * 100%) 1fr;
column-gap: var(--space-4xl);
margin: auto;
}
@media (max-width: 1080px) {
.service__title {
font-size: 26px;
margin-bottom: 20px;
}
.service__text {
font-size: 14px;
margin-bottom: 20px;
}
.service__btn {
font-size: 18px;
}
.service__item {
column-gap: var(--space-2xl);
}
}
@media (max-width: 768px) {
.service__title {
font-size: 24px;
margin-bottom: 24px;
}
.service__img {
width: calc(100%);
margin: auto;
max-width: 422px;
}
.service__text {
font-size: 16px;
margin: var(--space-xl) 0;
}
/* .service__btn {
font-size: 24px;
} */
}
.service__container {
display: flex;
flex-direction: column;
row-gap: var(--space-5xl);
}
.service__item:nth-of-type(even) {
grid-template-areas:
"img title"
"img text"
"img list"
"img btn";
grid-template-columns: 1fr calc(390 / 1040 * 100%);
margin: auto;
}
@media (max-width: 768px) {
.service__item {
grid-template-areas:
"title"
"img"
"text"
"list"
"btn";
grid-template-columns: 1fr;
max-width: 422px;
column-gap: var(--space-xl);
}
.service__item:nth-of-type(even) {
grid-template-areas:
"title"
"img"
"text"
"list"
"btn";
grid-template-columns: 1fr;
max-width: 422px;
}
}
.service__img {
grid-area: img;
}
.service__title {
grid-area: title;
/* align-self: end; */
color: var(--brand);
font-family: var(--font-base);
font-size: var(--fontSize-2xl);
font-weight: 600;
letter-spacing: 1.2px;
}
.service__text {
grid-area: text;
color: var(--text-main);
font-family: var(--font-base);
font-size: var(--fontSize-base);
font-style: normal;
font-weight: 700;
line-height: var(--fontSize-3xl);
letter-spacing: 0.8px;
text-align: justify;
}
.service__list {
grid-area: list;
/* align-self: end; */
list-style: none;
margin-top: 0;
}
.service__list li {
margin: 0;
margin-left: calc(1.2 * var(--fontSize-sm));
text-indent: -1.2em;
font-size: var(--fontSize-sm);
letter-spacing: 0;
text-align: justify;
}
.service__list li::before {
content: "⚫︎";
/* 記号(黒丸)を挿入 */
color: var(--brand);
/* 好きな色にする */
font-size: (var(--fontSize-sm) * 1.2);
/* 点の大きさ */
/* margin-right: .1em; 点とテキストの距離 */
vertical-align: bottom;
}
.service__list li ul li {
list-style: disc;
}
.service__list li ul li::before {
content: " ";
}
.service__btn {
grid-area: btn;
}
@media (max-width: 800px) {
.service__btn {
text-align: center;
}
}
/*********************
FAQ
*********************/
.answer-text {
display: none;
}
.question-text {
background-color: #FFF;
padding: 12px 45px 10px 20px;
margin: 10px 0 0;
transition: background .3s ease;
cursor: pointer;
position: relative;
}
.question-text::before,
.question-text::after {
position: absolute;
content: '';
top: 1px;
right: 20px;
bottom: 0;
width: 12px;
height: 2px;
margin: auto;
background: #151E2F;
}
.question-text::after {
transform: rotate(-90deg);
transition: transform 0.3s;
}
.question-text.active::after {
transform: rotate(0deg);
}
.answer-text {
background-color: #FFF;
padding: 12px 20px 10px;
}
.question-text span,
.answer-text span {
padding-left: 25px;
position: relative;
}
.question-text span::before {
position: absolute;
content: "Q.";
top: -6px;
left: 0;
color: #151E2F;
font-size: 20px;
}
.answer-text span::before {
position: absolute;
content: "A.";
top: -6px;
left: 0;
color: #151E2F;
font-size: 20px;
}
/* hover */
.question-text:hover {
background-color: #F2F2F2;
}
/*********************
CONTACT
*********************/
.contact-catch {
font-family: 'Noto Sans JP';
}
.form-contents {
margin: auto;
}
input[type=email],
input[type=text],
input[type=tel],
input[type=file],
input[type=url],
input[type=number],
input[type=date],
select,
textarea {
color: inherit;
font-size: 1.6rem;
display: inline-block;
width: 100%;
}
input[type=email],
input[type=text],
input[type=tel],
input[type=url],
input[type=number],
input[type=date],
select,
textarea {
border: 1px solid #DBDBDB;
border-radius: 5px;
background-color: #FFF;
line-height: 1.7;
padding: 1rem .9rem;
}
input[type=number] {
margin-right: .5rem;
padding: .5rem 1rem;
width: calc(4em + 2rem);
}
input[type=checkbox],
input[type=radio],
.wpcf7-list-item-label {
vertical-align: middle;
}
input[type=submit] {
background-color: var(--text-main);
border: 1px solid var(--text-main);
color: #fff;
display: inline-block;
font-size: 1.6rem;
font-weight: var(--semibold);
letter-spacing: .12em;
padding: 0.8em 2em;
text-align: center;
text-decoration: none;
transition: all .3s;
line-height: 1;
position: relative;
}
input[type=submit]:hover {
opacity: 0.7;
}
.number-month,
.number-date {
margin-left: 1em;
}
.wpcf7-list-item {
margin: 0 1em 0 0;
}
.wpcf7-list-item:last-child {
margin: 0;
}
.item-form-contact {
margin-bottom: 2rem;
}
.heading-form-contact {
font-size: 1em;
font-weight: var(--bold);
}
.detail-form-contact {
padding-top: 8px;
padding-bottom: 20px;
}
.contact-label {
background-color: var(--brand);
border-radius: 2px;
color: #fff;
display: inline-block;
font-size: 12px;
font-weight: 600;
margin-left: 10px;
padding: 5px 12px;
line-height: 1;
vertical-align: text-bottom;
}
::placeholder {
color: #ddd;
font-size: 1.6rem;
letter-spacing: .15rem;
line-height: 1.5;
}
.wpcf7-checkbox .wpcf7-list-item {
display: block;
margin-bottom: .5em;
}
.wpcf7-acceptance .wpcf7-list-item {
margin: 0;
}
/*送信完了メッセージ*/
.wpcf7 form.sent .wpcf7-response-output {
background-color: #fff;
border-color: #4a84af;
margin-top: 3em;
padding: 2em;
}
/*Google reCAPCHA*/
.reCAPTCHA {
font-size: 10px;
}
@media only screen and (max-width: 560px) {
input[type=submit] {
width: 100%;
}
.heading-form-contact {
font-size: 1.4rem;
padding: 10px 0 0;
}
.detail-form-contact {
padding: 5px 0 15px;
}
.contact-label {
font-size: 1.1rem;
}
::placeholder {
font-size: 1em;
}
.wpcf7-list-item-label {
font-size: 1.3rem;
}
.wpcf7-text,
.wpcf7-textarea {
font-size: 1.6rem;
}
}
/*********************
PAGE PARTS
*********************/
/*privacy*/
.privacy-text {
margin: auto;
}
.privacy-text h2 {
font-size: var(--fontSize-2xl);
margin: 2em 0 .5em;
font-weight: 600;
}
/*record*/
.record-text {
margin: auto;
}
.record-text h2 {
font-size: var(--fontSize-2xl);
margin: 2em 0 .5em;
font-weight: 600;
}
.record-contents ul li {
margin: 0 0 0 1.2em;
line-height: 1.75;
}
/*page-top*/
#page_top {
width: 150px;
height: 40px;
justify-content: flex-end;
align-items: center;
border-radius: var(--space-sm) var(--space-sm) 0 0;
background: var(--brand);
margin-left: auto;
margin-right: 5vw;
position: relative;
bottom: 0;
padding-top: 0.5rem;
}
#page_top a {
position: absolute;
left: 16px;
}
#page_top a::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f062';
font-size: 18px;
color: #fff;
/* position: absolute; */
}
#page_top a::after {
content: 'PAGE TOP';
color: #fff;
/* position: absolute; */
font-family: var(--font-en);
font-size: 16px;
font-weight: 600;
line-height: 25px;
/* 156.25% */
letter-spacing: 1.6px;
margin: auto;
padding-left: 10px;
}
/*********************
LOADING
*********************/
#loading,
#loading_logo {
display: none;
}
.home #loading {
background-color: var(--bg-base);
display: block;
position: fixed;
left: 0;
text-align: center;
width: 100%;
height: 100%;
z-index: 999;
}
.home #loading_logo {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
#loading_logo img {
width: 210px;
}
/*********************
COLOR
**********************/
.bg-white {
background-color: #fff;
}
.bg-gray {
background-color: var(--bg-gray);
}
.bg-black {
background: var(--bg-black);
}
.color-black {
color: #000;
}
.color-pink {
color: var(--pink-dark);
}
.color-green {
color: var(--green-dark);
}
/*********************
MARGIN
*********************/
.margin-intro {
margin-bottom: 180px;
}
.margin-section {
margin-bottom: 160px;
}
.margin-content {
margin-bottom: 100px;
}
.margin-card {
margin-bottom: 60px;
}
.margin-image {
margin-bottom: 25px;
}
@media only screen and (max-width: 560px) {
.margin-intro {
margin-bottom: 150px;
}
.margin-section {
margin-bottom: 90px;
}
.margin-content {
margin-bottom: 80px;
}
.margin-card {
margin-bottom: 50px;
}
.margin-image {
margin-bottom: 60px;
}
}
/*********************
ANIMATION
*********************/
.fadein {
opacity: 0;
transform: translateY(20px);
transition-property: transform, opacity;
transition-duration: 1.5s;
transition-delay: 0s;
}
.fadein.is-active {
opacity: 1;
transform: translateY(0);
}
.delay--1 {
transition-delay: 1s;
}
.delay--2 {
transition-delay: 1.8s;
}
.delay--3 {
transition-delay: 2.3s;
}
.delay--4 {
transition-delay: 2.8s;
}
.delay--5 {
transition-delay: 4.5s;
}
/* .animation__text {
font-size: 80px;
line-height: 1;
font-weight: 700;
} */
.animation__text .char {
opacity: 0;
}
/* .animation__text span {
overflow: hidden;
} */
.fade-in-left {
opacity: 0;
/* 初期状態では透明 */
transform: translateX(-80px);
/* 左にオフセット */
animation: fadeInLeft 1.0s 2.0s ease-in-out forwards;
/* アニメーションを適用 */
}
/* アニメーションの定義 */
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.zoomin {
animation: zoomIn 5s cubic-bezier(0.2, 1, 0.25, 1) forwards;
}
@keyframes zoomIn {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
opacity: 1;
transform: scale(1);
}
}
@media only screen and (min-width: 561px) {}
/*********************
RESPONSIVE
*********************/
@media only screen and (min-width: 961px) {
.tb_only {
display: none !important;
}
.sp_only {
display: none !important;
}
.sp_tb {
display: none !important;
}
}
@media only screen and (min-width: 561px) and (max-width: 960px) {
.pc_only {
display: none !important;
}
.sp_only {
display: none !important;
}
.sp_pc {
display: none !important;
}
}
@media only screen and (max-width: 560px) {
.pc_only {
display: none !important;
}
.tb_only {
display: none !important;
}
.tb_pc {
display: none !important;
}
}
@media only screen and (max-width: 320px) {
html {
font-size: .58em;
}
}
/* stagepage内 Splide */
/* .splide__track.stage-single { */
/* height: 450px; */
/* } */
.splide__slide {
display: flex;
justify-content: center;
}
.splide__slide img {
width: 100%;
height: 100%;
}
.splide__arrow--prev {
left: -5em;
opacity: 1;
background: #000000;
}
.splide__arrow--next {
right: -5em;
opacity: 1;
background: #000000;
}
.splide__pagination {
bottom: -1.5em;
left: 0;
padding: 0 1em;
position: absolute;
right: 0;
z-index: 1;
}
.splide__pagination li {
display: inline-block;
line-height: 1;
list-style-type: none;
margin: 0;
pointer-events: auto;
}
/* .splide__pagination__page {
background: #ccc;
border: 0;
border-radius: 2.5px;
display: inline-block;
height: 5px;
margin: 3px;
padding: 0;
position: relative;
width: 20px;
} */
.splide__pagination__page {
margin: 0 10px;
}
.slider2 .splide__pagination li {
margin: -5px;
}
.splide__pagination__page.is-active {
background: var(--text-main);
z-index: 1;
}
.splide__track.stage-archive-wrap {
overflow: visible;
margin: auto;
}
.splide-wrapper {
position: relative;
width: 100%;
/* margin: 8rem 0; */
}
.splide__list.slider1-list {
width: 100%;
}
/* .splide__arrow svg {
fill: #fff;
height: 1.2em;
width: 1.2em;
} */
/* .slider2 .splide__arrow--prev {
left: -2.5em;
opacity: 0.5;
background: #000000;
}
.slider2 .splide__arrow--next {
right: -2.5em;
opacity: 0.5;
background: #000000;
} */
/* .fv-banner-wrap {
height: 100%;
width: 1120px;
overflow: hidden;
margin: 0;
} */
/* .slider3 .splide__pagination {
bottom: 1.2rem;
}
.slider3 .splide__track {
overflow: visible;
} */
/* .slider4 .splide__slide img {
transition: 10s 2s ease-in-out;
} */
/*
.slider4 .splide__slide[class*=-active] img {
transition-delay: 0s;
transform: scale(1.05);
} */
/* .splide__track.slider4 {
overflow: visible;
} */
/* .slider4 .splide__pagination__page {
visibility: hidden;
} */
/* 矢印のクリック範囲など */
.splide-button {
background-color: transparent;
/* ボタンの背景を透明にする */
height: 50px;
transition: .2s;
width: 50px;
}
/* 矢印共通のスタイル */
.splide-button::before {
background-repeat: no-repeat;
background-size: contain;
/* bottom: 0; */
content: "";
height: 6.4rem;
/* left: 0; */
margin: auto;
position: absolute;
/* top: 0; */
width: 6.4rem;
}
/* 前の矢印 */
.prev::before {
background-image: url(../../uploads/arrow.svg);
transform: scale(-1, 1);
left: 5.2rem;
}
/* 次の矢印 */
.next::before {
background-image: url(../../uploads/arrow.svg);
right: 5.2rem;
}
/* 次のスライドが無い場合の矢印 */
.splide-button:disabled::before {
opacity: .5;
}
/* スライドのサイズ調整
.splide__slide img {
height: auto;
width: 100%;
} */
.slider2 .prev::before {
width: 4rem;
}
.slider2 .next::before {
width: 4rem;
}
.slider2 .splide__pagination {
bottom: -3rem;
}
.splide__arrow {
background: transparent;
width: 0;
height: 0;
}
.splide__arrow:hover::before {
opacity: .8;
}
.slider3 .splide__pagination {
display: none;
}
@media only screen and (max-width: 560px) {
.splide-wrapper,
.splide__track.stage-archive-wrap {
margin-top: 25px;
}
}
.year-list,
.term-list {
margin: 0;
}
.year-list li,
.term-list li {
margin: 0;
list-style: none;
}
.year-list a,
.term-list a {
color: var(--text-main);
font-weight: var(--bold);
padding-left: var(--space-lg);
display: block;
height: 4.8rem;
align-content: center;
border-left: 4px solid var(--border-sub);
text-decoration: none;
}
.term-child-current {
margin-left: 1em;
font-size: 0.9em;
opacity: 0.85;
}
.year-list a.active,
.term-list a.active {
font-weight: bold;
color: var(--brand);
border-color: var(--brand);
}
.media-list {
width: 824px;
}
.media-year-title {
position: relative;
color: var(--text-main);
font-family: var(--font-en);
font-size: var(--fontSize-4xl);
font-weight: 800;
top: -20px;
}
.media-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
border-left: 2px solid var(--line);
}
.media-item .circle-icon {
position: absolute;
left: -11px;
/* 左にはみ出す量 */
top: calc(var(--space-lg) + 4px);
width: 20px;
height: 20px;
background-color: #fff;
clip-path: circle(50%);
}
.table-media {
display: flex;
margin-top: 0.4em;
align-items: center;
}
.table-media dt {
font-family: var(--font-jp);
font-size: var(--fontSize-xxs);
color: #FFF;
font-weight: 500;
letter-spacing: 0.55px;
border-radius: 2px;
background: var(--text-main);
display: flex;
height: 18px;
padding: 4px 4px;
justify-content: center;
align-items: center;
vertical-align: text-top;
min-width: fit-content;
}
.table-media dd {
font-family: "Noto Sans JP";
font-size: var(--fontSize-sm);
font-weight: 400;
margin-left: 7px;
overflow: hidden;
line-height: var(--fontSize-2xl);
position: relative;
top: -0.1em;
color: var(--text-main);
width: fit-content;
}
.media-title {
color: var(--text-main);
font-family: var(--font-jp);
font-size: var(--fontSize-base);
font-weight: 500;
line-height: 25px;
letter-spacing: inherit;
margin-top: 3px;
}
.media-thumb {
flex: 0 0 156px;
}
.media-thumb img {
width: 100%;
height: auto;
/* display: block; */
}
.media-content {
flex: 1;
}
.media-archive-wrap {
width: 100%;
padding-top: var(--space-4xl);
padding-bottom: var(--space-4xl);
}
.media-station {
color: #675F58;
font-family: "Noto Sans JP";
font-size: 14px;
font-weight: 400;
/* margin: 10px 10px 10px 0 ;
align-self: end; */
}
.media-time {
color: var(--text-main);
font-weight: var(--normal);
letter-spacing: .04em;
align-self: end;
}
/* media-listは既にwidth:824pxと聞いているので、子要素は100%で合わせる */
.media-link {
display: flex;
align-items: flex-start;
width: 100%;
/* 824pxいっぱいに */
text-decoration: none;
color: inherit;
box-sizing: border-box;
padding: var(--space-lg);
}
.media-cat-date {
width: 100%;
}
@media (any-hover: hover) {
.media-link:hover {
background-color: var(--background-hover);
opacity: 1;
}
}
/* 左：本文は左端いっぱい（残り全部使う） */
.media-content {
flex: 1 1 auto;
min-width: 0;
max-width: 72%;
}
/* 右：サムネは右端に156pxで固定 */
.media-thumb {
flex: 0 0 156px;
/* ここを指定の156pxに */
width: 156px;
margin: auto 0 auto;
/* ←これで右端にピタッと寄せる */
}
/* 画像は枠内にフィット */
.media-thumb img,
.fallback-thumb {
/* display: block; */
width: 100%;
height: auto;
object-fit: contain;
max-height: 156px;
}
.media-cat-date,
.stage-cat-date,
.schedule-cat-date,
.regular-cat-date {
gap: var(--space-xs);
}
.regular-cat-date {
flex-direction: row;
}
.media-content>.tag-stage-li {
margin-top: 5px;
}
/* スマホ時の挙動：縦積み。代替画像は非表示*/
@media (max-width: 824px) {
.media-thumb {
width: 22%;
flex: none;
/* margin: 8px auto 0; */
}
.fallback-thumb {
display: none;
/* 代替画像はスマホで非表示 */
}
.media-cat-date,
.stage-cat-date,
.schedule-cat-date {
flex-direction: row;
}
.table-media {
align-items: start;
}
.media-content {
max-width: 75%;
}
.media-link:has(.fallback-thumb) .media-content {
max-width: 100%;
}
.media-link:has(.fallback-thumb) .media-thumb {
width: 0;
padding: 0;
}
}
@media only screen and (max-width: 560px) {
.media-link {
flex-direction: row;
padding: var(--space-xl) 0 var(--space-xl) var(--space-sm);
}
.media-item .circle-icon {
width: 18px;
height: 18px;
left: -10px;
top: calc(var(--space-xl) + 3px);
}
.table-media dd {
margin-left: 5px;
}
}
@media (min-width: 1100px) {
.media-list {
width: 824px;
}
}
@media only screen and (max-width: 1100px) {
.year-list li,
.term-list li,
.cat-list li {
margin: 0;
display: inline-block;
}
.year-list a,
.term-list a,
.cat-list a {
color: var(--text-main);
font-weight: var(--bold);
padding-left: 0;
display: block;
height: 3.6rem;
align-content: center;
border-left: none;
border-bottom: 4px solid var(--border-sub);
text-decoration: none;
}
.media-archive-wrap {
flex-direction: column;
padding-top: var(--space-2xl);
padding-bottom: var(--space-2xl);
}
.schedule_catlist {
max-width: 100%;
margin: auto;
}
.media-year-title {
top: 0;
}
.media-list {
margin: auto;
width: 100%;
}
.year-nav,
.schedule-filter,
.term-nav {
margin-bottom: var(--space-2xl);
}
.year-list,
.term-list,
.cat-list {
margin: 0 var(--space-sm);
gap: var(--space-xs);
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.schedule-list {
width: 100%;
}
.place-title {
flex-direction: row;
}
.schedule-place {
margin-top: var(--space-xs);
}
}
/*********************
MODAL
*********************/
/* 初期設定 */
button {
background: none;
}
/* :where(dialog) {
width: unset;
max-width: unset;
height: unset;
max-height: unset;
padding: unset;
background-color: unset;
border: unset;
overflow: unset;
} */
body:has(dialog[open]) {
overflow: hidden;
}
/* ボタンのスタイル */
.modal__open-btn {
border: none;
}
/* モーダルのスタイル ============ */
dialog.js-show.modal__content {
opacity: 1;
border: none;
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(6px);
opacity: 1;
transition: opacity .3s ease, backdrop-filter .3s ease;
}
/* 開く直前に .js-show を付けるなら、閉じる時に外すだけでOK */
dialog:not(.js-show)::backdrop {
opacity: 0;
}
.modal__content {
overflow: scroll;
opacity: 0;
transition: opacity 0.3s ease-in-out;
/* モーダル枠組みのスタイル */
width: min(80vw, 95%);
/* height: fit-content; */
background: #fff;
}
.modal__inner {
overflow-y: scroll;
/* height: 100%; */
position: relative;
padding: 8rem 2rem 0;
}
.modal__text {
font-size: var(--fontSize-base);
}
.modal__close-btn {
position: sticky;
z-index: 2;
top: 0;
left: 100%;
cursor: pointer;
display: block;
width: 30px;
height: 30px;
background: #333; /* ボタンの背景色 */
}
.modal__close-btn::before,
.modal__close-btn::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 3px;
height: 25px;
background: #fff;
/* バツ印の色 */
}
.modal__close-btn::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.modal__close-btn::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.cta-btn-main {
width: 29rem;
font-size: var(--fontSize-base);
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
width: 29rem;
height: 6.4rem;
padding: 0 4rem;
color: var(--text-main);
transition: 0.3s ease-in-out;
font-weight: 700;
letter-spacing: 0.025em;
padding-right: 6.5rem;
background-color: #fff;
text-decoration: none;
font-family: var(--font-jp);
cursor: pointer;
}
.cta-btn-main::before,
.cta-btn-main::after {
position: absolute;
width: 100%;
height: 0.4rem;
content: '';
transition: all .3s;
background: #000;
}
.cta-btn-main::before {
top: 0;
left: 0;
}
.cta-btn-main::after {
right: 0;
bottom: 0;
}
@media (any-hover: hover) {
.cta-btn-main:hover::before,
.cta-btn-main:hover::after {
width: 0;
}
}
.cta-btn-main:hover {
color: var(--text-main);
background: var(--background-hover);
opacity: 1;
}
.cta-btn-main span {
position: relative;
/* 矢印の基準にする */
display: inline-block;
}
.cta-btn-main span::after {
content: '';
position: absolute;
top: 50%;
right: -30px;
/* ★ 初期位置を固定 */
transform: translateY(-50%);
/* X方向のtranslateは使わない */
width: 3.1rem;
height: 1.6rem;
background-image: url(../../uploads/button-main_arrow.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: right .3s ease;
/* ★ rightだけを滑らかに */
}
@media (any-hover: hover) {
.cta-btn-main:hover span::after {
right: -38px;
}
}
@media only screen and (max-width: 800px) {
.btn-main {
width: 25rem;
margin: 2rem auto;
}
.cta-btn-main {
width: 25rem;
margin: auto;
}
.profile-btn img {
bottom: -6em;
left: 22rem;
max-width: 40%;
}
.btn-main a {
padding: 0 5rem 0 3rem;
}
.modal__content {
width: 90%;
height: fit-content;
}
}
@media only screen and (max-width: 660px) {
.profile-btn img {
bottom: -2.5em;
left: 24rem;
max-width: 30%;
}
.profile-contents {
padding: 0 0 var(--space-2xl);
}
.cta-title {
width: 21rem;
position: relative;
}
.cta-title-en {
font-size: var(--fontSize-5xl);
margin-bottom: 1rem;
}
.cta-title-en::before {
transform: scale(2.5);
}
.cta-text {
font-size: var(--fontSize-base);
}
}
@media(min-width: 821px) {
.header-nav li {
position: relative;
}
.header-nav .sub-menu {
position: absolute;
/* overflow: hidden; */
/* width: 120%; */
/* height: 0; */
transition: .8s;
opacity: 0;
/* background-color: var(--brand); */
pointer-events: none;
padding: var(--space-xs) var(--space-lg) var(--space-lg) 0;
}
.header-nav li:hover .sub-menu {
height: auto;
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.header-nav .sub-menu li {
display: block;
/* margin-left: 20px; */
padding: var(--space-xxs) var(--space-md);
border-right: none;
color: #fff;
background-color: var(--bg-1);
right: 5.2rem;
}
}
@media (any-hover: hover) {
.header-nav .sub-menu li:hover {
transition: .5s;
opacity: 0.8;
}
}
.header-nav .menu-item-has-children:nth-last-child(1) .sub-menu,
.header-nav .menu-item-has-children:nth-last-child(2) .sub-menu {
/* right: 0;
left: auto; */
width: max-content;
}
.header-nav .sub-menu li a {
padding: 0.2em 0;
font-size: var(--fontSize-sm);
color: var(--text-fff);
}