/*
Theme Name: Thanks Japan
Theme URI: https://www.thanksjapan.co.jp/
Author: Thanks Japan
Description: 株式会社サンクス・ジャパンのWordPressテーマです。
Version: 2.3.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: thanks-japan
*/
/* ==============================
   共通スタイル
============================== */

/* ----- リセット & 基本 ----- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Yu Gothic", "游ゴシック", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  background-color: #fff;
}

/* ----- ヘッダー共通 ----- */
header {
  background-color: #000; /* 黒背景 */
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

header .menu {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* 中央寄せ */
  align-items: center;
  padding: 15px 10px;
}

header .menu-item {
  color: #fff;           /* 文字白 */
  font-weight: bold;     /* 太字 */
  text-decoration: none; /* 下線なし */
  margin: 0 60px;
  position: relative;
  cursor: pointer;
}

header .menu-item:hover {
  opacity: 0.8;
}

/* ----- ドロップダウン ----- */
header .menu-item .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #000;
  flex-direction: column;
  min-width: 200px;
  padding: 10px 0;
}

header .menu-item:hover .dropdown {
  display: flex;
}

header .menu-item .dropdown a {
  color: #fff;
  text-decoration: none;
  padding: 8px 20px;
  font-weight: normal;
}

header .menu-item .dropdown a:hover {
  background-color: #222;
}

/* ----- メイン共通 ----- */
main {
  max-width: 900px;
  margin: 120px auto 50px; /* ヘッダー固定分マージン */
  padding: 20px;
}

/* ----- セクションタイトル ----- */
h1, h2 {
  color: #000;
}

h2 {
  font-size: 26px;
  font-weight: bold;
  margin-top: 60px;
  margin-bottom: 15px;
  border-left: 6px solid #1e73be;
  padding-left: 14px;
}

/* ----- 段落 ----- */
p {
  font-size: 18px;
  line-height: 2;
  margin-bottom: 15px;
}

/* ----- 箇条書き ----- */
ul {
  padding-left: 20px;
  margin-bottom: 25px;
}

li {
  font-size: 18px;
  line-height: 2;
}

/* ==============================
   固定背景クラス
============================== */
.fixed-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -1; /* 背景として下に配置 */
  opacity: 0.40; /* ← ここを75％透過に設定 */
}

/* ==============================
   スライドショー画像クラス（index専用）
============================== */
.slide-image {
  display: block;
  max-width: 100%;       /* 50%サイズ */
  margin: 50px auto 0;  /* 上50px, 中央寄せ */
}

/* ==============================
   コンテンツ中央寄せ
============================== */
.content-center {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
 text-shadow: 0.5px 0.5px 0.5px rgba(0,0,0,0.7); /* 黒の影 */
}

/* ----- 左寄せコンテンツ（必要に応じて） ----- */
.content-left {
  text-align: left;
 text-shadow: 0.5px 0.5px 0.5px rgba(0,0,0,0.7); /* 黒の影 */
}

/* ----- アイテムブロック（index） ----- */
.item-block {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}

.item-block .item-image {
  width: 150px;
  height: auto;
  margin-right: 20px;
}

.item-block .item-text {
  flex: 1;
  font-size: 16px;
  line-height: 1.8;
}

/* ==============================
   スライドショー切り替え用（必要ならJS対応）
============================== */
.slide-image:not(.active) {
  display: none;
}


/* 本文＋スライドの横並び */
.waste-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* 本文側 */
.waste-page {
  width: 65%;
}

/* スライド側 */
.slide-area {
  width: 35%;
  position: relative;
}

/* スライド画像 */
.slide-image {
  width: 100%;
  display: none;
  border-radius: 10px;
}

/* 表示中の画像 */
.slide-image.active {
  display: block;
}

/* WordPress integration and responsive improvements */
:root{--tj-blue:#1e73be;--tj-green:#168447;--tj-header-height:76px}
html{scroll-behavior:smooth}
body{overflow-wrap:anywhere}
body.admin-bar .site-header{top:32px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #f4c542;outline-offset:3px}
img{max-width:100%;height:auto}
.screen-reader-text,.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:10px;left:10px;z-index:10000;padding:10px 14px;color:#000;background:#fff}
.site-header{min-height:var(--tj-header-height);box-shadow:0 2px 12px rgba(0,0,0,.2)}
.header-inner{display:flex;align-items:center;max-width:1380px;min-height:var(--tj-header-height);padding:0 24px;margin:0 auto}
.site-brand{flex:0 0 auto;margin-right:24px;color:#fff;font-size:18px;font-weight:800;letter-spacing:.03em;text-decoration:none;white-space:nowrap}
.custom-logo-link{display:flex;align-items:center;margin-right:24px}.custom-logo{width:auto;max-height:52px}
.site-navigation{flex:1 1 auto}.menu-toggle{display:none}
.site-navigation .menu,.site-navigation .sub-menu{list-style:none}
.site-navigation .menu{display:flex;align-items:center;justify-content:flex-end;padding:0;margin:0}
.site-navigation .menu>li{position:relative;margin:0 12px}
.site-navigation .menu a{display:block;padding:24px 5px;color:#fff;font-weight:700;line-height:1.4;text-decoration:none;white-space:nowrap}
.site-navigation .menu a:hover,.site-navigation .menu a:focus-visible,.site-navigation .current-menu-item>a,.site-navigation .current_page_item>a{color:#a7e4bd}
.site-navigation .sub-menu{position:absolute;top:100%;left:0;display:none;min-width:230px;padding:8px 0;margin:0;background:#000;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.site-navigation li:hover>.sub-menu,.site-navigation li:focus-within>.sub-menu{display:block}
.site-navigation .sub-menu a{padding:10px 18px;font-weight:500;white-space:normal}
.site-navigation .sub-menu a:hover,.site-navigation .sub-menu a:focus-visible{background:#222}
main,main.content-center{width:min(900px,calc(100% - 40px));margin:112px auto 50px}
.content-left,.waste-page{text-align:left}.text-green{color:var(--tj-green);font-weight:700}
.waste-page{width:100%}.waste-layout .waste-page{width:65%}.success-section{width:100%;padding:0;margin:40px auto 0}
.slide-image.active{animation:tj-fade .8s ease both}@keyframes tj-fade{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
.contact-page,.recruit-page{margin-top:96px;padding:60px 20px}.contact-page{max-width:800px}
.contact-page h1,.recruit-page h1{text-align:center;font-size:32px;margin-bottom:40px}
.form-group{margin-bottom:25px}.form-group label{display:block;font-weight:700;margin-bottom:8px}
.form-group input,.form-group textarea{width:100%;padding:12px;font:inherit;font-size:16px;border:1px solid #aaa;border-radius:4px;background:rgba(255,255,255,.96)}
.form-group textarea{min-height:180px;resize:vertical}
.submit-btn{display:block;width:min(260px,100%);margin:40px auto 0;padding:14px;font-size:18px;font-weight:700;background:var(--tj-blue);color:#fff;border:0;border-radius:30px;cursor:pointer}
.contact-notice{padding:14px 18px;margin:0 0 28px;border-left:5px solid var(--tj-blue);background:#eef7ff;font-size:16px}
.contact-notice.is-success{border-color:var(--tj-green);background:#edf9f1}.contact-notice.is-error{border-color:#b42318;background:#fff1f0}
.tj-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.recruit-page{max-width:900px}.recruit-table{width:100%;max-width:800px;margin:0 auto;border-collapse:collapse;background:rgba(255,255,255,.85);font-size:17px}
.recruit-table th,.recruit-table td{padding:16px;border:1px solid #aaa;line-height:1.8;text-align:left;vertical-align:top}.recruit-table th{width:30%}
.entry-content{padding:28px;border-radius:8px;background:rgba(255,255,255,.85)}
.site-footer{padding:24px 20px;margin-top:70px;background:#000;color:#fff;text-align:center}.site-footer p{margin:0;font-size:14px}
@media(max-width:1100px){.site-navigation .menu>li{margin:0 7px}.site-navigation .menu a{font-size:14px}}
@media(max-width:900px){
 :root{--tj-header-height:66px}body.admin-bar .site-header{top:46px}.header-inner{position:relative;min-height:var(--tj-header-height);padding:0 18px}
 .site-brand{margin-right:auto}.site-navigation{flex:0 0 auto}.menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid #777;border-radius:4px;background:#111;color:#fff;font:inherit;font-weight:700;cursor:pointer}
 .site-navigation .menu{position:absolute;top:100%;right:0;left:0;display:none;max-height:calc(100vh - var(--tj-header-height));padding:8px 18px 18px;overflow-y:auto;background:#000}
 .site-navigation.is-open .menu{display:block}.site-navigation .menu>li{margin:0;border-top:1px solid #333}.site-navigation .menu a{padding:12px 4px;white-space:normal}
 .site-navigation .sub-menu{position:static;display:block;min-width:0;padding:0 0 6px 18px;box-shadow:none}.site-navigation .sub-menu a{padding:8px 4px}
 main,main.content-center{width:min(100% - 24px,900px);padding:16px;margin-top:90px}.waste-layout{display:block}.waste-layout .waste-page,.slide-area{width:100%}.slide-area{max-width:480px;margin:30px auto 0}
}
@media(max-width:620px){h1{font-size:28px}h2{margin-top:42px}p,li{font-size:16px}.item-block{display:block}.item-block .item-image{display:block;width:min(220px,70%);margin:0 auto 18px}.recruit-table,.recruit-table tbody,.recruit-table tr,.recruit-table th,.recruit-table td{display:block;width:100%}.recruit-table tr{margin-bottom:18px}.recruit-table th{border-bottom:0;background:rgba(30,115,190,.1)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.slide-image.active{animation:none}}

.text-red{color:#b42318;font-weight:700}

/* Editable core-block content migrated from legacy templates. */
.entry-content.entry-content--blocks{padding:0;background:transparent;border-radius:0}
.thanks-japan-sdgs-content{padding-top:120px}
.thanks-japan-sdgs-image{margin:0 auto 50px}
.thanks-japan-sdgs-image img{display:block;width:min(512px,100%);margin:0 auto}
.thanks-japan-sdgs-content>.wp-block-heading{margin:0 0 28px}
.thanks-japan-sdgs-lead{margin-bottom:0;text-align:center}
.thanks-japan-sdgs-sections{text-align:left}
.thanks-japan-sdgs-sections p{margin-bottom:35px}
@media(max-width:900px){.thanks-japan-sdgs-content{padding-top:80px}}