/* Reset & Base */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
  margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {display:block;}
body {
  line-height:1.6; background:#f9f4ec; color:#000; font-family:sans-serif; font-size:18px;
}
ol,ul { list-style:none; }
a { text-decoration:none; color:#e94919; }
a:hover { text-decoration:underline; }

/* Colors */
.fox-color { color:#cb9134; }
.red-color { color:#e94919; }
.inari-color { color:#000; }

:root {
  --concept-color: #6b8f23;
}

/* Wrapper */
.wrapper {
  max-width:1200px; margin:0 auto; padding:0 20px;
}

/* Fixed bottom images */
.fixed-bottom-left {
  position:fixed; bottom:10px; left:10px; z-index:2000;
}
.fixed-bottom-right {
  position:fixed; bottom:10px; right:10px; z-index:2000;
}

/* Header & Menu */
.site-header {
  background: rgba(255,255,255,0.9);
  border-bottom:1px solid #ddd;
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  backdrop-filter: blur(5px);
}
.header-inner {
  max-width:1200px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo-area img { height:40px; }
.menu-toggle { display:none; background:none; border:none; font-size:1.5em; cursor:pointer; color:var(--concept-color); }
.nav-area { transition:max-height 0.3s ease; }

.main-nav > ul {
  display:flex; gap:20px; align-items:center;
}
.main-nav li { position:relative; }
.main-nav a {
  font-family:"GyoushoFont",serif; 
  color:var(--concept-color);
  font-size:1.1em;
  padding:5px 10px;
  transition:color 0.3s;
}
.main-nav a:hover { color:#cb9134; }
.has-sub > a::after {
  content:"▼"; font-size:0.8em; margin-left:5px;
}
.sub-menu {
  position:absolute; top:100%; left:0;
  background:#fff; border:1px solid #ddd;
  display:none; min-width:150px;
}
.sub-menu li a {
  display:block; padding:5px 10px; white-space:nowrap; font-size:0.9em;
}
.has-sub:hover .sub-menu { display:block; }

@media(max-width:768px) {
  .main-nav > ul { flex-direction:column; gap:10px; max-height:0; overflow:hidden; }
  .header-inner.nav-open .main-nav > ul { max-height:300px; }
  .menu-toggle { display:block; margin-left:auto; }
  .nav-area { width:100%; }
  .has-sub:hover .sub-menu { display:block; }
}

/* Loading */
#loading-overlay {
  position:fixed; top:0; left:0; width:100%; height:100vh; background:#fff;
  display:flex; align-items:center; justify-content:center; z-index:9999;
  transition:opacity 1s ease;
}
.loading-content { text-align:center; animation:fadeIn 1s forwards; }
.loading-fox-icon {
  width:80px; height:80px; margin:0 auto 20px;
  background:url('images/fox_silhouette.png') no-repeat center center; background-size:contain;
  animation:pulse 2s infinite alternate;
}
.loading-title {
  font-family:"GyoushoFont", serif; font-size:2.5em; color:#e94919; margin-bottom:10px;
}
.loading-sub { font-size:1.3em; color:#cb9134; }

main { padding-top:100px; }

/* Main Visual */
.main-visual {
  position:relative; height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;
}
.visual-background {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:url('images/torii_fox_bg.jpg') no-repeat center center; background-size:cover; filter:blur(2px); z-index:-1;
}
.main-title {
  font-family:"GyoushoFont", serif; font-size:4em; color:#e94919; margin-bottom:20px;
  text-shadow:2px 2px 4px rgba(0,0,0,0.3);
}
.catchphrase { font-size:1.5em; margin-bottom:30px; color:#000; }

.visual-content { position:relative; width:100%; height:100%; }
.concept-image { width:60vw; transition: all 1s ease; }
.text-and-buttons {
  position:absolute; left:50%; transform:translate(-50%,-50%);
  text-align:center; top:50%; transition:all 1s ease; opacity:0;
}
body.show-concept .text-and-buttons { opacity:1; }
body.text-move-down .text-and-buttons { top:70%; transform:translate(-50%,-50%); }

/* Top triple tiles: smaller */
.fixed-tiles {
  position:absolute; bottom:5%; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; /* 間隔を小さく */
  z-index:1500;
}
.link-item {
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:10px 15px; /* 小さめに戻す */
  background:#cb9134; color:#fff; border-radius:4px;
  font-size:1em; /* 小さめ */
  text-align:center; transition: background 0.3s ease;
  min-width:100px;
}
.link-item:hover { background:#e94919; }
.large-tile { transform:scale(1.1); }
.center-content { display:flex; justify-content:center; align-items:center; }
.small-text { font-size:0.9em; }
.small-text-btn { font-size:1em; }
.triple-tile { line-height:1.4; }

/* Rounded-bg for intro */
.rounded-bg {
  background:#fff; border-radius:30px; padding:40px 20px; box-shadow:0 0 10px rgba(0,0,0,0.1);
}

/* small-tile class for reverting tile size after main triple tiles */
.small-tile {
  font-size:1em; padding:10px 15px; min-width:auto; display:inline-block;
}

/* Sections */
section { padding:60px 0; text-align:center; }
.intro-text h2, .news-section h2, .members-digest h2, .org-order-digest h2, .links-section h2, .sample-manga-digest h2, .special-thanks h2 {
  font-family:"GyoushoFont", serif; font-size:2em; color:var(--concept-color); margin-bottom:30px;
}
p { font-size:1.2em; line-height:1.8; }
.news-list li { margin-bottom:10px; }
.more-link a { font-weight:bold; }

/* Members (PC横, SP縦) */
.members-digest .member-tiles {
  display:flex; flex-direction:row; gap:20px; justify-content:center; align-items:flex-start;
}
.member-tile {
  background:#fff; border:1px solid #ddd; padding:10px; width:220px; text-align:center; transition:transform 0.3s;
}
.member-tile img { max-width:100%; display:block; margin:0 auto; }
.member-info p { margin-top:10px; font-size:1.1em; }

@media(max-width:768px) {
  .members-digest .member-tiles {
    flex-direction:column; align-items:center;
  }
  .members-digest .member-tile {
    width:100%; max-width:500px;
  }
}

/* Links section small tiles revert size */
.links-grid {
  display:flex; flex-wrap:wrap; gap:20px; justify-content:center;
}
.links-grid .link-item {
  font-size:1em; /* revert smaller */
  width:150px; /* 小さめに */
}

/* Sample manga section: 狐社稲荷物語大きくとあったが、再度要望でタイル小さく戻したのでフォントは抑えめ */
.sample-manga-digest p .bigger-text {
  font-size:1.3em; font-weight:bold;
}

/* Footer */
.site-footer {
  background:#fff; border-top:1px solid #ddd; text-align:center; padding:20px 0; margin-top:60px; font-size:1.1em;
}
.site-footer p {
  color:#000;
}
.site-footer p .fox-color, .site-footer p .red-color { font-weight:bold; }

/* Fox mascot */
.fox-mascot {
  position:fixed; right:20px; bottom:20px; width:60px; height:60px;
  background:url('images/fox_mascot.png') no-repeat center center; background-size:contain;
}

/* Effects */
.hover-pulse:hover { animation:pulse 0.5s infinite alternate; }
.ink-hover {
  position:relative;
}
.ink-hover::after {
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#e94919; transform:scaleX(0);
  transform-origin:left; transition:transform 0.3s ease;
}
.ink-hover:hover::after { transform:scaleX(1); }

.fade-in { animation: fadeIn 1s forwards; }
.slide-in-up { animation: slideInUp 1s forwards; margin-top:20px; }
.zoom-in { animation: zoomIn 0.8s forwards; }

@keyframes fadeIn {0%{opacity:0;}100%{opacity:1;}}
@keyframes slideInUp {0%{transform:translateY(50px);opacity:0;}100%{transform:translateY(0);opacity:1;}}
@keyframes zoomIn {0%{transform:scale(0.8);opacity:0;}100%{transform:scale(1);opacity:1;}}
@keyframes pulse {0%{transform:scale(1);}100%{transform:scale(1.05);}}

@media(max-width:768px) {
  .header-inner { flex-direction:column; align-items:flex-start; }
  .main-title { font-size:3em; }
  .intro-text p, .catchphrase { font-size:1.1em; }
}


/* 新たに追加するCSS */

/* 署名セクション(ごあいさつ)関連 */
.sign-off-section {
  position:relative;
  max-width:500px; 
  margin:40px auto; 
  text-align:center;
}

.sign-off-section img.fox-left,
.sign-off-section img.fox-right {
  position:absolute; 
  top:50%; 
  transform:translateY(-50%);
  width:40px;
}
.fox-left { left:-50px; }
.fox-right { right:-50px; }

.sign-off-box {
  background:#fff; 
  border:1px solid #ddd; 
  border-radius:10px; 
  box-shadow:0 0 5px rgba(0,0,0,0.1); 
  padding:20px; 
  text-align:center; 
  position:relative;
  max-width:400px;
  margin:0 auto;
}

.sign-off-box img.person-img {
  width:80px; 
  border-radius:50%; 
  margin:10px 0;
}
.sign-off-box h4 {
  font-size:1em; 
  margin-bottom:10px; 
  font-family:"GyoushoFont",serif;
  color:#333;
}
.sign-off-box p {
  font-size:0.9em; 
  line-height:1.6;
  margin:5px 0;
  color:#333;
}

/* 名刺の秘密用セクション(もし別途必要なら)
 既存の.intro-text .rounded-bgで対応可能なため、
 特別なクラス追加は不要だった場合、この部分は省略可能。
 以下は例として用意しているが、不要なら削除可。
*/
/*
.card-secret-box {
  display:inline-block;
  max-width:400px;
  text-align:center;
}
*/

/* 必要に応じてSNSタイルや他ボタンと同様のクラスは既存の.link-itemなどで対応可能 */

/* 狐色、社色は既に定義済みの.fox-color, .red-colorを使用 */

.intro-text {
  text-align: center;
}