/* style.css */

/* 共通リセット */
body, h1, h2, h3, h4, p, ul, li { margin: 0; padding: 0;}
body { font-family: sans-serif; line-height: 1.6; font-size: 0.95em;}
ul { list-style: none;}
a { text-decoration: none; color: #fff;}
h1 {margin-top: 40px;font-family: serif;}
h2 {font-size:1.3em;}
h3 { font-size:1.5em; padding-bottom: 30px; text-align: center;}
h4 {font-size:1.4em; padding: 20px;}
h5 { font-size:1.3em; margin: 10px 0 30px 0; }
footer {padding: 10px; background:#000000; color: #fff; font-size: 0.8em; text-align: center;}
p.large {font-size:1.6em;}
.small {font-size:0.8em;}
.purple {color: #4253aa;}
.blue {color: #007A76;}
.kon {color: #031169;}
.pink { color: #ff3a80;}
.red { color: #FF3600;}
.orange { color: #FF6C06;}
.dgrey {color:#343434;}
.white {color: #fff;}
.markery {background: linear-gradient(transparent 35% , #fff172 35%);} 
.markeryb {background: linear-gradient(transparent 35% , #000000 35%);} 

.dshadow { text-shadow: 1px 1px 1px #e0e0e0;}
/* メニュー */
#menu {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0,0,0,0.6);
  padding: 10px 30px 10px 20px;
  z-index: 1000;
}
#logo {  color: white;  font-weight: bold;}
#menu ul { display: flex; gap: 3px; }
#menu li:last-child a { padding-right: 60px; }
#menu li a { color: white;  text-decoration: none; padding: 5px 12px; font-size: 0.8em;}
#menu li a:hover {color: #ffffff;}

/* ボタン専用スタイル */
#menu li a.btn {
  background-color:#00A294;   /* ピンク系 */
  padding: 8px 18px;
  border-radius: 25px;         /* 丸み */
  font-weight: bold;
  transition: background 0.3s ease, transform 0.2s ease;
}

/* ホバー時 */
#menu li a.btn:hover {
  background-color: #38E1CB;
  transform: translateY(-2px); /* ふわっと浮く */
}
/* トップ画像 */
#top_img {
  background: url("img/p00.jpg") no-repeat center center/cover;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: top;
  text-align: center;
}

.top_content h1 { padding: 30px 0 0 0 ;  color:#fff; 
  font-size: 3.1em; filter: drop-shadow(2px 2px 0px #202252); text-shadow: 2px 3px 3px #202252;}
.top_content h2 { color: #000; margin-top: 20px; margin-bottom: 0px; }
h2.bboder {
  background-color: #fff;
  opacity: 0.7;
  margin-bottom: 10px;
  padding: 5px 10px;
  display: inline-block; /* 文字数に合わせて背景をピッタリ */
}
ruby[data-ruby] rt { display: none;}
ruby[data-ruby] {position: relative; display: inline-block;} 
ruby[data-ruby]::after {
  content: attr(data-ruby);
  position: absolute;
  transform: translate(-50%, -1.0em);
  display: block;
  left: 50%;
  top: 0;
  white-space: nowrap;
  font-size: 44%;
  letter-spacing: 0;}
.rudius {border-radius: 10px; overflow: hidden;}
img.top_img_extra  {
  max-width: 70%;     /* 可変で縮小 */
  height: auto;
  margin-top: 30px;   /* 上に余白 */
  opacity: 0.9;
 filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
  border-radius: 10px;   /* ← 角丸を追加 */
}
/* ラベル全体を並べる */
.labels {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;       /* 狭い画面では折り返し */
  gap: 10px;             /* ラベル同士の間隔 */
  justify-content: center;
}

/* ラベル共通スタイル */
.label {
  padding: 6px 14px;
  border-radius: 20px;
  color: #fff;
  font-size: 0.9em;
  font-weight: bold;
  display: inline-block;
  white-space: nowrap;
}

/* 個別の色 */
.label.work { background-color: #FF3600;  }    /* 青：仕事運 */
.label.support { background-color: #cf2c00;} /* 緑：協力者運 */
.label.love { background-color: #FF3600; }    /* ピンク：恋愛 */
.label.marry { background-color: #cf2c00; }   /* オレンジ：玉の輿 */


/* セクション共通 */
section { padding: 60px 20px; text-align: center;}
#feature { background: #fff; }
#people { background: #6c5ce7;
 background: url("img/p01.jpg") no-repeat center center/cover;margin: 0 auto; }
#history {  background: #ffddd1; color: #333;  height: 60vh;  margin: 0 auto; }
#voice { background: url("img/p03.jpg") no-repeat center center/cover;
  text-align: center; margin: 0 auto;  }
#cta1, #cta2 { background: #f4f4f4; }
#qa { background-image: linear-gradient(to right top, #fffef5, #fefcf2, #fdfbf0, #fdf9ed, #fcf7eb, #fef7ec, #fff6ee, #fff6f0, #fff8f6, #fffafb, #fffdfe, #ffffff); color: #888;margin: 0 auto;font-family: sans-serif; }
#closing { background-image: linear-gradient(to right top, #153171, #153776, #153d7a, #16437f, #184983, #10538c, #075d94, #00679b, #0077a6, #0087b0, #0097b7, #00a7bd); color: white;margin: 0 auto; }

/*table*/
table , td, th {margin: 20px 10px; border: none; border-collapse: collapse; font-weight: bold; }
td.naw {padding: 3px;width: 160px;height: 25px;}
td.wide {padding: 3px;width: 300px;height: 25px;}

/* ボックス */
.box p,li { padding: 10px; color: #333;}
.box li { font-weight: bold; padding-bottom: 5px;}
.box { margin : 0 auto 20px auto; width: 60%; padding: 20px;
  background: rgba(255, 255, 255, 0.8); /* 白を80%透過 */
  border-radius: 10px;                  /* 角丸で柔らかく */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* うっすら影 */
 text-align:left;position: relative;}
.nbox { margin : 0 auto 20px auto; width: 60%; padding: 20px; text-align:left; }
.bbox { margin : 0 auto 20px auto; width: 60%; padding: 20px;
  background: rgba(20, 46, 86, 0.8); /* 白を80%透過 */
  border-radius: 10px;                  /* 角丸で柔らかく */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* うっすら影 */
 text-align:left;position: relative;}
#people .box:first-of-type::after {
  content: "";
  position: absolute;
  bottom: -25px;     /* 下からの距離 */
  right: 0px;      /* 右からの距離 */
  width: 300px;      /* 挿絵の大きさ */
  height: 300px;
  background: url("img/p07.png") no-repeat center/contain;
  opacity: 0.95;
  pointer-events: none; /* クリックを邪魔しない */
}

/*voice*/
p.person { color: #000; border-bottom: dashed 2px #6594e0; font-weight: bold; font-size: 0.85em;}
p.voice { color: #000; font-size: 0.85em;}

/*QA*/
.qa-item {margin-bottom: 30px;}
.qa-q span, .qa-a span { display: inline-flex; justify-content: center; align-items: center; width: 32px;  height: 32px;   border-radius: 50%;
  color: #fff; font-weight: bold;  font-size: 16px; font-family:Arial, Helvetica, "sans-serif";
  line-height: 1;    /* 行間をリセット */
  flex-shrink: 0;    /* 文字数に応じて潰れないように */}
.qa-q span { background: #1e90ff; } /* Qは青 */
.qa-a span { background: #FF3600; } /* Aは赤 


/* カード */
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;}
.card { background: white; padding: 20px; border-radius: 10px; width: 300px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); position: relative; overflow: hidden;}
/* 頭のライン */
.card::before {
  content: "";
  display: block;
  height: 8px;                 
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.card:nth-child(1)::before { background: #333; /* 青 */}
/* 2つ目のカード */
.card:nth-child(2)::before { background:  #777; /* 赤 */}
/* 3つ目のカード */
.card:nth-child(3)::before { background: #777; /* 青 */}
.card h3, .card h4 { margin-bottom: 10px;}
.card-icon { font-size: 2rem; color: #FFBF00; margin-bottom: 10px;}

/* CTAボタン */
.cta_btn {display: inline-block; background: #FF3600;
  color: white; border: none; padding: 10px 20px;
  margin-top: 15px; border-radius: 25px; cursor: pointer; transition: 0.3s;}
.cta_btn:hover { background: #FF9377 ;}


/* 上に戻るボタン */
#back_to_top {
  display: none;               /* 最初は非表示 */
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: #888;         /* ピンク系で可愛い雰囲気 */
  color: white;
  font-size: 1.9em;
  border: none;
  border-radius: 50%;          /* 完全な丸 */
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  z-index: 999;
}

/* ホバー時 */
#back_to_top:hover { background: #777; transform: scale(1.1); }

/* レスポンシブ */
@media (max-width: 980px) {
#top_img {
  background: url("img/p00.jpg") no-repeat center center/cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: top;
  text-align: center;
}
.top_img_extra img {
  max-width: 50%;     /* 可変で縮小 */
  height: auto;
  margin-top: 40px;   /* 上に余白 */
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); /* ちょっと浮かせる */
}    
    
}

@media (max-width: 768px) {
#menu ul { display: flex; gap: 3px; }
#menu li:last-child a { padding-right: 25px; }
#menu li a { color: white;  text-decoration: none; padding: 5px 6px; font-size: 0.8em;}
#menu li a:hover {color: #ffffff;}

/* ボタン専用スタイル */
#menu li a.btn {
  background-color:#00A294;   /* ピンク系 */
  padding: 8px 10px;
  border-radius: 25px;         /* 丸み */
  font-weight: bold;
  transition: background 0.3s ease, transform 0.2s ease;
}

#top_img {
  background: url("img/p00.jpg") no-repeat center center/cover;
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: top;
  text-align: center;
}
.top_img_extra img {
  max-width: 85%;     /* 可変で縮小 */
  height: auto;
  margin-top: 30px;   /* 上に余白 */
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); /* ちょっと浮かせる */
}
.box {  width: 90%;}
.nbox {  width: 90%;}
.bbox {  width: 90%;}
#people .box:first-of-type::after {
  content: "";
  position: absolute;
  bottom: -9px;     /* 下からの距離 */
  right: 0px;      /* 右からの距離 */
  width: 100px;      /* 挿絵の大きさ */
  height: 100px;
  background: url("img/p07.png") no-repeat center/contain;
  opacity: 0.95;
  pointer-events: none; /* クリックを邪魔しない */
}
.top_content h1 {  font-size: 2.6em;}
.cards {  flex-direction: column; align-items: center; width: 95%; }
table , td, th {margin: 20px 5px; border: none; border-collapse: collapse; font-weight: bold; }
td.naw {padding: 3px;width: 190px;height: 25px;}
td.wide {padding: 3px;width: 350px;height: 25px;}
.box li { font-weight: bold; padding-bottom: 5px; font-size: 0.85em;}
    
#back_to_top {
  display: none;               /* 最初は非表示 */
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: #888;         /* ピンク系で可愛い雰囲気 */
  color: white;
  font-size: 2.0em;
  border: none;
  border-radius: 50%;          /* 完全な丸 */
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  z-index: 999;
}

}