@charset "UTF-8";
/* ============================================================
   CCA Theme - Front Page Stylesheet
   - PC基準のデザインをベースにタブレット/スマホ対応
   - 色: 黒 #000 / 白 #FFF / 薄グレー #777 / 濃グレー #191919 / グリーン #6A9070
   ============================================================ */

/* ============================================================
   Opening Loader（オープニングアニメーション）
   ページ読み込み時にロゴを中央表示 → フェードアウト
   ============================================================ */
.opening-loader {
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background-color:#000000;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
opacity:1;
pointer-events:auto;
transition:opacity 0.8s ease;
}

.opening-loader.is-hidden {
opacity:0;
pointer-events:none;
}

.opening-loader__inner {
text-align:center;
opacity:0;
transform:translateY(8px);
animation:loaderFadeIn 1.2s ease forwards;
}

.opening-loader__logo {
display:inline-block;
color:#FFFFFF;
}

.opening-loader__logo img {
display:block;
width:300px;
}
@media screen and (max-width:757px) {
.opening-loader__logo img {
width:180px;
}
}

.opening-loader__title {
display:block;
font-size:32px;
font-weight:700;
letter-spacing:0.04em;
line-height:1;
}
@media screen and (max-width:757px) {
.opening-loader__title {
font-size:22px;
}
}

.opening-loader__title .colon {
color:#FFFFFF;
}

.opening-loader__sub {
display:block;
margin-top:10px;
font-size:12px;
letter-spacing:0.22em;
font-weight:700;
}
@media screen and (max-width:757px) {
.opening-loader__sub {
font-size:10px;
}
}

@keyframes loaderFadeIn {
0% { opacity:0; transform:translateY(8px); }
100% { opacity:1; transform:translateY(0); }
}


/* ============================================================
   Site Header
   ============================================================ */
.site-header {
position:fixed;
top:0;
left:0;
width:100%;
padding:10px 50px;
z-index:200;
background:transparent;
transition:background-color 0.3s ease;
}
@media screen and (max-width:1030px) {
.site-header {
padding:10px 30px;
}
}
@media screen and (max-width:757px) {
.site-header {
padding:5px 15px;
}
}

.site-header.is-scrolled {
background-color:rgba(0,0,0,0.8);
backdrop-filter:blur(8px);
}

.site-header__inner {
display:flex;
justify-content:space-between;
max-width:1600px;
margin:0 auto;
margin-top:10px;
}
@media screen and (max-width:757px) {
.site-header__inner {
margin-top:0px;
}
}

/* ロゴコンテナ（ミニロゴがフローを確保するので height 指定は不要） */
.site-header__logo {
position:relative;
display:inline-block;
line-height:1;
color:#FFFFFF;
}

/* ロゴ画像共通 */
.site-header__logo-img {
display:block;
width:auto;
transition:opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
           transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change:opacity, transform;
}

/* ミニロゴ（logo-2.png）：通常フローに配置。常にコンテナサイズの基準 */
.site-header__logo-img--mini {
height:28px;
opacity:1;
transform:scale(1);
}
@media screen and (max-width:757px) {
.site-header__logo-img--mini {
height:20px;
margin-top:10px;
}
}

/* メインロゴ（logo-1.png）：ミニロゴの上に重ねる絶対配置 */
.site-header__logo-img--main {
position:absolute;
top:50%;
left:0;
height:90px;
opacity:0;
transform:translateY(-50%) scale(0.96);
pointer-events:none;
margin-top:30px;
}@media screen and (max-width:757px) {
.site-header__logo-img--main {
height:50px;
margin-top:20px;
}
}

/* トップページ & スクロール前：メインをフェードイン、ミニをフェードアウト */
.is-front-page .site-header:not(.is-scrolled) .site-header__logo-img--main {
opacity:1;
transform:translateY(-50%) scale(1);
}
.is-front-page .site-header:not(.is-scrolled) .site-header__logo-img--mini {
opacity:0;
transform:scale(1.04);
}

.site-header__logo-main {
font-size:22px;
font-weight:700;
letter-spacing:0.04em;
}
@media screen and (max-width:757px) {
.site-header__logo-main {
font-size:18px;
}
}

.site-header__logo-sub {
font-size:9px;
letter-spacing:0.2em;
font-weight:700;
margin-top:4px;
}
@media screen and (max-width:757px) {
.site-header__logo-sub {
font-size:8px;
}
}

.site-header__nav {
display:flex;
align-items:top;
}

.site-header__nav-list {
display:flex;
gap:40px;
align-items:top;
}
@media screen and (max-width:1024px) {
.site-header__nav-list {
gap:28px;
}
}
@media screen and (max-width:757px) {
.site-header__nav-list {
display:none;
}
}

.site-header__nav-list a {
font-size:16px;
font-weight:700;
color:#777777;
}
@media screen and (max-width:1024px) {
.site-header__nav-list a {
font-size:12px;
}
}

.site-header__nav-list a:hover {
color:#fff;
transition: color 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ハンバーガーボタン（PC時は非表示） */
.site-header__toggle {
display:none;
width:40px;
height:40px;
position:relative;
z-index:300; /* モバイルメニューより前面 */
background:transparent;
}
@media screen and (max-width:757px) {
.site-header__toggle {
display:block;
}
}

/* ラベルは視覚的には隠す（スクリーンリーダー対応） */
.site-header__toggle-label {
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}

/* 2本線（擬似要素） - 閉じている時は横2本、開いた時は × */
.site-header__toggle::before,
.site-header__toggle::after {
content:"";
position:absolute;
left:50%;
width:26px;
height:1px;
background-color:#FFFFFF;
transform-origin:center center;
transition:top 0.4s cubic-bezier(0.77, 0, 0.175, 1),
           transform 0.6s cubic-bezier(0.77, 0, 0.175, 1),
           background-color 0.3s ease;
}

/* 上の線（閉じている時） */
.site-header__toggle::before {
top:calc(50% - 5px);
transform:translate(-50%, -50%) rotate(0deg);
}

/* 下の線（閉じている時） */
.site-header__toggle::after {
top:calc(50% + 5px);
transform:translate(-50%, -50%) rotate(0deg);
}

/* 開いた状態：2本の線が中央へ寄り、くるっと1回転して × に */
.site-header__toggle.is-open::before {
top:50%;
transform:translate(-50%, -50%) rotate(405deg); /* 360 + 45 */
}
.site-header__toggle.is-open.is-open::after {
top:50%;
transform:translate(-50%, -50%) rotate(-405deg); /* -(360 + 45) */
}



/* ============================================================
   Mobile Menu
   ============================================================ */
.mobile-menu {
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background-color:rgba(0,0,0,0.95);
z-index:150;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transition:opacity 0.4s ease;
}

.mobile-menu.is-open {
opacity:1;
pointer-events:auto;
}

.mobile-menu__list {
text-align:center;
}

.mobile-menu__list li {
margin:28px 0;
}

.mobile-menu__list a {
font-size:18px;
font-weight:700;
color:#FFFFFF;
}