/*==============================================================================
	基本設定
==============================================================================*/
*{
	margin				:0;
	padding				:0;
}
	
html{
	font-size			:10px;
}
	
:root {
    --main-color		:#eb1c24;    /* 朱色：情熱と伝統 */
    --sub-color		:#1f222e;     /* 紺色：信頼と知性 */
    --bg-color			:#f8f6f1;      /* 生成り：温かみと上質 */
    --font-serif		:"Yu Mincho", "MS PMincho", serif;
}

body {
	margin				:0;
	padding				:0;
   background-color	:var(--bg-color);
   color					:var(--sub-color);
   font-family			:var(--font-serif);
   -webkit-font-smoothing: antialiased;
	overflow-x			:hidden;
}

p, input, button, select, textarea, a{
	margin				:0;
	padding				:0;
	color					:var(--sub-color);
	font-family			:var(--font-serif);
}

/*==============================================================================
	header style
==============================================================================*/
.syokutsu_header{
	width					:100%;
   height				:80px;
   background-color	:var(--bg-color); /* 生成り */
   border-bottom		:1px solid rgba(31, 34, 46, 0.1);
   position				:sticky;
   top					:0;
   z-index				:1000;
   transition			:all 0.4s ease;
}

/* スクロール時の演出 */
.syokutsu_header.is_scrolled {
   height				:60px;
   box-shadow			:0 4px 20px rgba(0, 0, 0, 0.05);
   background-color	:rgba(248, 246, 241, 0.95);
   backdrop-filter	:blur(10px);
}

.header_inner {
   max-width			:1200px;
   height				:100%;
   margin				:0 auto;
   padding				:0 5%;
   display				:flex;
   align-items			:center;
   justify-content	:space-between;
}

.header_logo img {
   height				:40px;
   width					:auto;
}

.header_pc_nav ul {
   display				:flex;
   list-style			:none;
   gap					:4rem;
}

/* ロゴエリアのDoodleスタイリング */
.logo_container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.syokutsu_header .header_logo img {
    height: 32px; /* 少しコンパクトにしてテキストのスペースを作る */
    width: auto;
    transition: transform 0.3s ease;
}

.doodle_text {
    font-size: 1.4rem;
    color: #888;
    line-height: 1.2;
    max-width: 150px;
    padding-left: 10px;
    border-left: 1px solid #ddd; /* 区切り線でGoogle感を演出 */
    font-family: "MS PMincho", serif;
    animation: fadeIn 1s ease;
	width:calc(1.4rem * 10);
}

/* 記念日の時の演出 */
.doodle_text.is_special {
    color: #eb1c24;
    font-weight: bold;
}

/* スクロール時にコンパクトにする演出 */
.is_scrolled .doodle_text {
    display: none; /* スクロール時はロゴだけに集中 */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-5px); }
    to { opacity: 1; transform: translateX(0); }
}

@media screen and (max-width: 480px) {
    .doodle_text {
        font-size: 0.6rem;
        max-width: 100px;
    }
}

#daily_doodle {
    transition: opacity 0.5s ease, transform 0.5s ease;
    display: inline-block; /* アニメーションを効かせるため */
    will-change: opacity, transform;
}

/* 記念日がある時の特別な装飾（既存クラス活用） */
#daily_doodle.is_special {
    color: var(--main-color);
    font-weight: bold;
}

.header_pc_nav a {
   text-decoration	:none;
   color					:var(--sub-color); /* 紺色 */
   font-weight			:900;
   font-size			:1.6rem;
   text-align			:center;
   display				:block;
}

.header_pc_nav a span {
   display				:block;
   font-size			:1.2rem;
   color					:var(--main-color); /* 朱色 */
   font-weight			:400;
   letter-spacing		:0.1em;
   margin-top			:-4px;
}

.header_utility {
   display				:flex;
   align-items			:center;
   gap					:2rem;
}

.beginner_drawer{}
.beginner_drawer a{
	display				:flex;
	font-size			:1.4rem;
	line-height			:2rem;
}

.beginner_drawer a img{
	width					:2rem;
	height				:2rem;
	margin-right		:0.5rem;
}
	
/* ログインボタン：ミニマルな品格 */
.btn_login_minimal {
   font-size			:1.4rem;
   color					:var(--sub-color);
   text-decoration	:none;
   border				:1px solid var(--sub-color);
   padding				:0.6rem 2rem;
   transition			:all 0.3s;
}

.btn_login_minimal:hover {
   background-color	:var(--main-color);
   color					:var(--bg-color);
	border-color		:transparent!important;
}

.cartBtn{
	margin-left			:0.5rem;
	position				:relative;
}
.cartBtn img{
	width					:2rem;
	height				:2rem;
}
.cartBtn a{
	position				:absolute;
	inset					:0;
}


.header_prArea{
	width					:100%;
	background			:var(--main-color);
	padding				:0.75rem 0;
	text-align			:center;
	position				:relative;
}
.header_prArea p{
	font-size			:1.6rem;
	font-weight			:900;
	color					:var(--bg-color);
}
.header_prArea a{
	position				:absolute;
	inset					:0;
}

/*=== ハンバーガーメニュー(SP専用) ===*/
.nav_toggle {
	display				:none;/*PC非表示*/
   width					:30px;
   height				:24px;
   background			:none;
   border				:none;
   position				:relative;
   cursor				:pointer;
   z-index				:1001;
}
.nav_toggle .bar{
   display				:block;
   width					:100%;
   height				:2px;
   background-color	:var(--sub-color);
   position				:absolute;
   left					:0;
   transition			:all 0.3s ease-in-out;
}
.nav_toggle .bar:nth-child(1) { 
	top					:0;
}
.nav_toggle .bar:nth-child(2) {
	top					:11px;
}
.nav_toggle .bar:nth-child(3) { 
	top					:22px;
}
.nav_toggle.is_active .bar:nth-child(1) {
   top					:11px;
   transform			:rotate(45deg);
}
/*=== ✕への変換 ===*/
.nav_toggle.is_active .bar:nth-child(2) {
   opacity				:0;
   transform			:translateX(-10px);
}
.nav_toggle.is_active .bar:nth-child(3) {
   top					:11px;
   transform			:rotate(-45deg);
}
	
/*=== モバイルドロワー ===*/
.mobile_drawer {
   position				:fixed;
   top					:80px;
   right					:-100%;
   width					:80%;
   height				:calc(100vh - 80px);
   background			:var(--bg-color);
   transition			:right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   z-index				:999;
   padding				:4rem 10%;
}

.mobile_drawer.is_open {
   right					:0;
   box-shadow			:-10px 0 30px rgba(0,0,0,0.1);
}



/* レスポンシブ */
@media screen and (max-width: 1025px)
{
	.header_pc_nav 
	{
		display				:none;
	}
   .syokutsu_header
	{ 
		height				:60px;
	}
   .mobile_drawer
	{ 
		top					:60px;
		height				:calc(100vh - 60px);
	}

	.nav_toggle
	{
		display				:block;
   }
    
   .nav_toggle span 
	{
		display				:block;
      width					:25px;
      height				:2px;
      background-color	:var(--sub-color);
      position				:absolute;
      left					:7px;
      transition			:all 0.3s;
   }
    
   .nav_toggle span:nth-child(1)
	{
		top					:15px;
	}
   .nav_toggle span:nth-child(2)
	{ 
		top					:23px;
	}
}

	
/*==============================================================================
	Footer　style
==============================================================================*/
.syokutsu_footer{
   background-color	:var(--sub-color); /* 紺色 */
   color					:var(--bg-color); /* 生成り */
   padding				:6rem 5% 12rem; /* ボトムナビの分、下を開ける */
}
.footer_inner{
   max-width			:1000px;
   margin				:0 auto;
}

.footer_logo{
   width					:180px;
   margin-bottom		:1.5rem;
}

.footer_tagline {
   font-size			:1.4rem;
   letter-spacing		:0.1em;
   opacity				:0.8;
	color					:var(--bg-color);
}

.footer_links{
   display				:flex;
   gap					:4rem;
   margin				:4rem 0;
   flex-wrap			:wrap;
}

.link_group h4{
   font-size			:1.6rem;
	font-weight			:900;
   margin-bottom		:1.5rem;
   color					:var(--bg-color); /* 朱色 */
}

.link_group ul { 
	list-style			:none;
}
.link_group a {
   color					:var(--bg-color);
   text-decoration	:none;
   font-size			:1.4rem;
   line-height			:2.5;
}

.copyright{
	color					:var(--bg-color);
}

/*=== モバイル固定ナビ（PWA向け） ===*/
.mobile_fixed_nav{
   display				:none; /*PC非表示*/
}

@media screen and (max-width: 1025px)
{
	.mobile_fixed_nav 
	{
   	display				:block;
      position				:fixed;
      bottom				:0;
      left					:0;
      width					:100%;
      height				:75px;
      background			:rgba(248, 246, 241, 0.95);
      backdrop-filter	:blur(10px);
      border-top			:1px solid rgba(31, 34, 46, 0.1);
      z-index				:2000;
      padding-bottom		:env(safe-area-inset-bottom); /* iPhoneのバー対策 */
   }
	
   .mobile_fixed_nav ul 
	{
   	display				:flex;
      justify-content	:space-around;
      align-items			:flex-end;
      height				:100%;
      list-style			:none;
   }

   .mobile_fixed_nav li a 
	{
		text-decoration	:none;
      display				:flex;
      flex-direction		:column;
      align-items			:center;
      padding				:1rem 0;
   }

   .mobile_fixed_nav img 
	{ 
		width					:24px;
		height				:24px;
	}
   .mobile_fixed_nav span 
	{
		font-size			:1rem;
		color					:var(--sub-color);
		font-weight			:bold;
		margin-top			:4px;
	}

    .nav_main_cube 
	{
    
		transform			:translateY(-15px);
   }
   
	.cube_icon_wrap 
	{
   	width					:55px;
      height				:55px;
      background			:var(--main-color);
      border-radius		:50%;
      display				:flex;
      justify-content	:center;
      align-items			:center;
      box-shadow			:0 4px 15px rgba(235, 28, 36, 0.3);
   }
   
	.cube_icon_wrap img 
	{
		width					:35px; 
		height				:35px;
		filter				:brightness(0) invert(1);
	}
}
	

/*==============================================================================
	Main style
==============================================================================*/
.content_wrapper{
   max-width			:1000px;
   margin				:0 auto;
   padding				:4rem 4%;
   background-color	:#fff;
}

.content_header {
  text-align			:left;
  margin-bottom		:3rem;
  border-left			:5px solid var(--main-color);
  padding-left			:2rem;
}

.main_title {
  font-size				:2.8rem;
  line-height			:1.3;
  letter-spacing		:-0.02em;
  margin-top			:1rem;
}

.category_tag{
  color					:var(--main-color);
  font-weight			:bold;
  font-size				:1.4rem;
  letter-spacing		:0.2em;
  margin-bottom		:1rem;
}

.content_footer{
	margin-top			:6rem;
   padding				:3rem;
   background-color	:var(--bg-color); /* 生成りの背景で区切りを明確に */
   border-top			:1px solid var(--sub-color);
}

.author_name {
   font-weight			:900;
   color					:var(--sub-color);
   display				:block;
   margin-bottom		:0.5rem;
}

/*==============================================================================
	広告表示スペース
==============================================================================*/
.ad_space_horizontal {
   max-width			:1000px;
   margin				:2rem auto 4rem;
   text-align			:center;
   border-top			:1px solid #eee;
   padding-top			:1rem;
}

.ad_label {
   font-size			:1rem;
   color					:var(--main-color); /* 朱色 */
   letter-spacing		:0.2em;
   margin-bottom		:0.5rem;
   font-family			:var(--font-serif);
}


/*==============================================================================
	loading style
==============================================================================*/
/* --- 1. 豆知識テキストの制御 --- */
#loading-tip {
    font-size: 2rem;
    color: #1f222e;
    font-family: "MS PMincho", serif;
    letter-spacing: 0.1em;
    min-height: 2.4rem;
}

/* span への直接指定を強化 */
#loading-tip span {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    vertical-align: middle;
}

/* B（オチ）の装飾 */
#loading-tip span:nth-of-type(2) {
    color: #eb1c24;
    font-weight: bold;
    margin-left: 0.5em;
}

/* --- 2. サイト名の制御 --- */
.siteNameArea { 
	font-size:2rem;
	margin-top: 2rem; 
	text-align: center; 
}
.site_sub { 
	font-size:2rem;
	margin-bottom: 0.5rem; }

/* site_main の初期状態：隠して下にずらす */
.site_main {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.LoadingArea_verNum{
	font-size: 1.4rem;
	color: #888;
}
	
/* 表示時のクラス */
.site_main.show {
    opacity: 1;
    transform: translateY(0);
}

/* --- 3. レイアウト・ゲージ（既存） --- */
#Loading { position: fixed; inset: 0; z-index: 9999; background: #f8f6f1; display: flex; place-items: center; justify-content: center; }
.loading_trivia_wrapper { margin-bottom: 3rem; display: flex; justify-content: center; align-items: center; }
.gauge_container { position: relative; width: 140px; height: 140px; margin: 0 auto; }
.gauge_svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.gauge_bg { fill: none; stroke: rgba(31, 34, 46, 0.05); stroke-width: 2; }
.gauge_fill { fill: none; stroke: #eb1c24; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 283; }
.circleInLogo { position: absolute; inset: 15px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.circleInLogo img { width: 70%; height: auto; animation: logoPulse 2s infinite ease-in-out; }
@keyframes logoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
#Loading.loaded { opacity: 0; pointer-events: none; transition: opacity 0.8s ease-in-out; }


/* ==========================================================================
   遷移前広告モーダル (Transition Ad Modal)
   ========================================================================== */

/* 1. モーダル外枠：画面全体を覆い、位置を固定 */
#transitionAdModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important; /* AdSenseによるauto書き換えを阻止 */
    background-color: rgba(31, 34, 46, 0.9); /* 背景を暗くして没入感 */
    display: none; /* JSでflexに切り替え */
    justify-content: center;
    align-items: center;
    z-index: 99999 !important; /* 最前面を確保 */
    backdrop-filter: blur(8px);
}

/* 2. 白い箱：コンテンツの器 */
.ad-content {
    background-color: #f8f6f1; /* サイト共通の生成り色 */
    width: 95%;
    max-width: 860px; /* 800px広告 + 左右余白30pxずつ */
    padding: 40px 30px;
    border-radius: 30px;
    position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    text-align: center;
    border: 1px solid rgba(235, 28, 36, 0.3);
    /* AdSense対策：高さをコンテンツに依存させつつ、画面からはみ出させない */
    height: auto !important;
    max-height: 95vh !important;
    overflow-y: auto;
}

/* 3. 広告表示エリア：ここが心臓部 */
.ad-body {
    width: 800px; /* 固定サイズ広告に合わせる */
    height: 200px !important; /* 固定サイズを死守 */
    margin: 20px auto;
    overflow: hidden;
    background: #eee; /* 読み込み前のプレースホルダー色 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* AdSenseのinsタグへの直接攻撃 */
.ad-body ins.adsbygoogle {
    width: 800px !important;
    height: 200px !important;
    display: inline-block !important;
}

/* 4. ADラベルとボタン */
.ad-label {
    position: absolute;
    top: 15px;
    left: 30px;
    background: #1f222e;
    color: #fff;
    font-size: 0.8rem;
    padding: 3px 12px;
    border-radius: 5px;
    font-weight: bold;
}

/* 閉じるボタン */
.m-btn-primary {
    background: #eb1c24; /* ブランドカラー */
    color: #fff;
    border: none;
    padding: 18px;
    border-radius: 40px;
    font-size: 1.2rem;
    font-weight: bold;
    width: 100%;
    max-width: 400px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}

/* 5. モバイル対応：800pxの固定広告をスマホ画面に収める */
@media screen and (max-width: 840px) {
    .ad-body {
        /* 画面幅に合わせて広告を縮小表示（要素自体は800pxのまま） */
        transform: scale(calc(100vw / 900)); 
        transform-origin: center center;
        margin: 0 auto;
    }
    
    .ad-content {
        padding: 40px 15px 20px;
        width: 98%;
    }
}