@charset "UTF-8";
/*
Theme Name: conan
Description: コナンテーマ
Version: 1.1
*/

/* -----------------------------------------
   ★効率化：デザインシステム（CSS変数）
----------------------------------------- */
:root {
    /* フォント設定 */
    --font-main: 'Playfair Display', 'Cinzel', 'Noto Serif JP', serif;

    /* ブランドカラー（文字・背景） */
    --color-text-main: #3d2a1d;
    --color-text-muted: #8e7668;
	--color-bg-navy: #221e2a;
    --color-bg-light: #fcf9f2;
    --color-bg-dark: #1a1008;

    /* アクセントカラー */
    --color-accent-brown: #8b5a2b;
    --color-accent-gold: #dfb743;
    --color-light-gold: #ebdcb9;
    
    /* セクション固有カラー */
    --color-bg-top-banner: #21150b;
    --color-bg-marquee: #907666;
    --color-copyright: #c9bb9c;

    /* 共通アニメーション */
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* -----------------------------------------
   Reset & Base Styles
----------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.br-sp{
	display: none;
}

body {
    font-family: var(--font-main);
    font-weight: 300;
    color: var(--color-text-main); 
    background-color: var(--color-bg-light); 
    line-height: 1.8;
    letter-spacing: 0.05em;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    color: var(--color-accent-brown);
    text-decoration: none;
    transition: var(--transition-smooth); 
}

a:hover{
	opacity: .8;
	transition: .3s;
}

/* -----------------------------------------
   Main Layout & Sections
----------------------------------------- */
.section-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 20px;
    text-align: center;
}

.section-title {
    max-width: 300px;
    margin: 0 auto 30px;
}

/* -----------------------------------------
   TOP Banner Area
----------------------------------------- */
.top-banner-section {
    width: 100%;
}

.top-banner-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
	animation: blurFadeIn 1.0s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.top-banner-img {
    width: 100%;
    display: block;
    transition: transform 1.2s ease;
}

.top-banner-link {
    position: absolute;
    bottom: 3%;  /* メインビジュアルの下端から30pxの位置（左上に置くなら top: 30px; に変更） */
	left: 50%;             /* 左から50%の位置に配置 */
    transform: translateX(-50%); /* 画像の横幅の半分だけ左に戻すことで完全に中央揃えにする */
    width: 22%;    /* 重ねる画像のサイズ（メインビジュアルに対する横幅の割合。px指定でも可） */
    z-index: 2;    /* メインビジュアルより確実に前面に出す設定 */
    display: block;
}

.top-banner-link img {
    width: 100%;
    height: auto;
    display: block;
}

@keyframes blurFadeIn {
    0% {
        filter: blur(15px); 
        opacity: 0;         
        transform: scale(1.03); 
    }
    100% {
        filter: blur(0);    
        opacity: 1;         
        transform: scale(1);   
    }
}

/* -----------------------------------------
   Logo Marquee Section
----------------------------------------- */
.logo-marquee-section {
    width: 100%;
    overflow: hidden; 
    background-color: #a48f78;
    padding: 5px 0;
    border-top: 1.5px solid #59586d;
    border-bottom: 1.5px solid #59586d;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-right 70s linear infinite;
}

.marquee-group {
    display: flex;
    justify-content: space-around;
    gap: 70px; 
    padding-right: 70px;
	flex-shrink: 0; /* ★修正：大きな画面でも枠が潰れて画像が縮まないように固定 */
}

.marquee-img {
    height: 22px; 
    width: auto;
    object-fit: contain;
    opacity: 0.8;
}

@keyframes marquee-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* -----------------------------------------
   Link Area
----------------------------------------- */
.link-section {
    background-image: url("images/bg_light.jpg");
    background-size: 700px;
}

.link-banner-container {
    margin: 0 auto;
}

.banner-link {
    display: block;
    position: relative;
    transition: var(--transition-smooth), filter 0.2s ease;
}

/* ★効率化：PC環境のみ浮かび上がって明るくなる設定 */
@media (hover: hover) {
    .banner-link:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(139, 90, 43, 0.2);
        border-color: var(--color-accent-gold);
        filter: brightness(1.08); /* 前回の明るさUPエフェクトも統合 */
    }
}

/* ★効率化：スマホ環境で指で押した時の心地よいリアクション */
.banner-link:active {
    filter: brightness(1.08);
	opacity: .8;
}

.link-banner-img {
    width: 100%;
    display: block;
}

/* -----------------------------------------
   Footer & Footer Logo
----------------------------------------- */
.site-footer {
    background-color: var(--color-bg-navy); 
    color: var(--color-text-muted);
    padding: 60px 20px 40px;
}

.footer-inner {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.footer-logo-area {
    margin-bottom: 30px;
}

.footer-logo-link {
    display: inline-block;
    transition: transform 0.3s ease;
}

.footer-logo-link:hover {
    transform: scale(1.08) rotate(-1deg); 
    opacity: 1;
}

.footer-logo-img {
    max-width: 120px; 
    height: auto;
}

.footer-links , .footer-ltr {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px;
    font-size: 0.9rem;
	color: var(--color-light-gold);
}

.footer-links a {
    color: var(--color-light-gold);
    position: relative;
    padding-bottom: 4px;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: var(--color-accent-gold);
    transition: width 0.3s ease, left 0.3s ease;
}

.footer-links a:hover {
    color: var(--color-accent-gold);
}

.footer-links a:hover::after {
    width: 100%;
    left: 0;
}

.copyright {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--color-copyright);
}

/* -----------------------------------------
   レスポンシブ (スマホ対応)
----------------------------------------- */
@media screen and (max-width: 480px) {
    .section-title { max-width: 200px; }
    .marquee-img { height: 16px; }
    .footer-links a { font-size: 12px; }
    .footer-logo-img { max-width: 100px; }
	.link-section { background-size: 500px; }
	.banner-link:hover {
        opacity: .8;
    }
	.marquee-group {
    gap: 30px;
    padding-right: 30px;
}
	
	.br-sp{
		display: block;
	}
}

/* -----------------------------------------
   JavaScript Animation Styles (動きの仕掛け)
----------------------------------------- */
.js-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.0s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.0s cubic-bezier(0.25, 1, 0.5, 1);
}

.js-fade.is-show {
    opacity: 1;
    transform: translateY(0);
}

.js-bounce {
    opacity: 0;
    transform: translateY(60px);
}

.js-bounce.is-show {
    animation: bounceInUp 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(60px) scaleY(1.2); 
    }
    50% {
        opacity: 1;
        transform: translateY(-15px) scaleY(0.9); 
    }
    70% {
        transform: translateY(7px) scaleY(1.05);  
    }
    85% {
        transform: translateY(-3px) scaleY(0.98); 
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);       
    }
}
/* ★効率化：最下部にあった余分な「 } 」を綺麗に削除しました */