@charset "utf-8";

body {
background:#e9e9e9; /* ページ全体の背景色 */
margin:0;
font-family: 'Roboto', 'Yu Gothic', 'Meiryo', sans-serif;
}

/* 全体のリック色 */
a:link {
text-decoration: none;
color: #ffffff;
}
a:visited {
text-decoration: none;
color: #636363;
}
a:hover {
text-decoration: none;
color: #d5faf5;
}
a:active {
text-decoration: none;
color: #a3a5fa;
}

/* 緑メニュー */
.brand-bar {
background:#060;
color:#fff;
width:100%;
}

/* 上段：タイトル＋メニュー＋三本線 */
.brand-top {
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 12px;
px; /* クリアランス確保 */
}

/* h1フォントサイズ */
.site-title {
color:#FFFFFF;
font-size:20px;   /* タイトル文字指定 */ 
padding-left: 30px;
margin:0;
white-space:nowrap; /* 改行しない */
}

.lang-menu {
display: none; /* 隠す */
position: absolute; /* 相対的に配置 */
background-color: white; /* 背景色 */
border: 1px solid #ccc; /* ボーダー */
z-index: 100; /* 他の要素の上に表示 */
}

.lang-box:hover .lang-menu, /* ホバー時に表示 */
.lang-menu.active {
display: block; /* 表示に切り替え */
}

.dropdown {
position: relative; /* 位置を指定 */
}

.dropdown-menu ul {
list-style: none; /* リストスタイルを消す */
padding: 0; /* パディングのリセット */
margin: 0; /* マージンのリセット */
}

.dropdown-menu li {
border-bottom: 1px solid #ccc; /* 各項目のボーダー */
}

.dropdown-menu li a {
padding: 10px; /* パディング */
display: block; /* ブロック要素に */
text-decoration: none; /* テキストの下線を消す */
color: ##555555; /* 文字色 */
}

.dropdown-menu li a:hover {
color:#29ab1b;  /* ホバー時の背景色 */
}

/*■■TOPメニュー■■ */
.top-menu {
display: flex;
justify-content: space-between; /* 要素間のスペースを均等に */
}

#menu-toggle {
position: absolute;
opacity: 0;
pointer-events: none;
}

.top-menu {
display:flex;
align-items:center;
gap:8px;
margin-left:200px;
}

.top-menu a {
color:#fff;
font-size: 16px;
text-decoration:none;
font-weight:bold;
padding:0 6px;
border-right:1px solid #fff;
}

.top-menu a:hover {
text-decoration: none;
color: #d5faf5;
}

.top-menu a:active {
transform:scale(0.95);  /* 少し縮んで押した感 */
color:#a3a5fa;             /* 押した色 */
}

.top-menu a:last-child { 
border-right:none; 
}

/*■ドロップダウンメニューのスタイル■ */
.dropdown {
position: relative; /* 位置を指定 */
}

.dropdown-menu {
display: none; /* 初期状態は非表示 */
position: absolute; /* ドロップダウンが位置する */
background-color: #eef7fa; /* 背景色 */
border: 1px solid #ccc; /* ボーダー */
z-index: 100; /* 重なり順 */
}

.dropdown-menu ul {
list-style: none; /* リストスタイルを消す */
padding: 0; /* パディングのリセット */
margin: 0; /* マージンのリセット */
}

.dropdown-menu li {
border-bottom: 1px solid #ccc; /* 各項目のボーダー */
}

.dropdown-menu li a {
font-size: 14px;
padding: 8px; /* パディング */
display: block; /* ブロック要素に */
text-decoration: none; /* テキストの下線を消す */
color:#555555; /* テキストカラー */
}

.dropdown-menu li a:hover {
background-color: #e1f9eb; /* ホバー時の背景色 */
}

.dropdown:hover .dropdown-menu, /* ホバー時に表示 */
.dropdown-menu.active {
display: block; /* 表示に切り替え */
}

.dropdown a { 
padding: 10px; /* パディング */
display: block; /* ブロック要素に */
}


/* ■3本線を透過■ */
.menu-toggle {
margin-right: 20px;
font-size:35px;       /* 三本線の大きさ */
background:none;      /* 背景を透過 */
border:none;          /* 枠線を消す */
color:#ffffff;           /* 三本線の色 */
cursor:pointer;
padding:0px;          /* スマホで押しやすくする */
}

.close-menu {
font-size: 30px;       /* 閉じるボタンのサイズ */
background: none;      /* 背景を透過 */
border: none;          /* 枠線を消す */
color: #ffffff;        /* 閉じるボタンの色 */
cursor: pointer;
padding: 10px;         /* クリックしやすくするためのパディング */
position: absolute;     /* メニューを絶対位置に表示 */
top: 10px;             /* メニューの上部からの距離 */
right: 10px;           /* メニューの右側からの距離 */
}

.menu-toggle:hover {
color:#b7fbfb;           /* ホバー色 */
}

.top-menu {
display:flex;
gap:10px;/* 余白を少し減らす */
align-items:center;
white-space: nowrap; /* ← 折り返し禁止 */
justify-content: flex-start; /* 余白を均等にせず左寄せ */
}

.top-menu a {
color:#fff;
text-decoration:none;
font-weight:bold;
padding:0 8px;
border-right:1px solid #fff;
}

.top-menu a:last-child {
border-right:none;
}

/* 翻訳BOX */
.lang-box {
position:relative; /* 翻訳リンクを基準にする */
display:inline-block; 
padding-right: 50px;
}

/* 翻訳位置指定 */
.lang-menu {
display:none;
position:absolute;
top:100%; /* 翻訳リンクの真下 */
left:0;
background:#060;
padding:10px 20px;
white-space:wrap;
justify-content: space-between;
}

.lang-menu.open { display:block; }
.lang-menu a {
display:block;
color:#fff;
margin:4px 0;
}

.lang-menu.open { display:block; 
}

.lang-menu a {
display:block;
color:#fff;
text-decoration:none;
margin:5px 0;
white-space: nowrap;/* ← 省略表示 */
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px; /* ← 幅で小さく表示 */
}

/* 翻訳メニュー長さ調整 */
#translate-select {
width: 100px; /* 幅を固定 */
max-width: 100%; /* 最大幅を設定 */
}

/* 英語スペル短くする */
#translate-select {
  font-size: 12px; /* フォントサイズを小さく設定 */
}
#translate-select option {
font-size: 12px; /* オプションのフォントサイズを小さく設定 */
}

/* ■ハンバーガーメニュー■ */
.menu {
font-size: 14px;
line-height: 1.7;
display: none;
position: absolute;
top:71px;
right: 0;
left: auto;
width: 80%;/* 幅を100%に設定 */
height: 100%;
background:#eef7fa;/* メニュー色 薄い#eef7fa 濃い#e8f5fa*/
padding:30px;
z-index: 9999;/* 上に表示*/

.menu { display: none; 
} 
#menu-toggle:checked ~ .menu { 
display: block;
}

/* 右側に隠す */
transform: translateX(100%);
transition: transform 0.3s ease;
}

.menu.open {
display: block;
transform: translateX(0);
}

/* 閉じる✕ボタン */
.menu-close {
color: #18cb35; /* X の色（好きに変えてOK） */
font-size: 18px;
font-weight:bold;
cursor: pointer;
position: relative;
top: -20px; /* ← これで5px上に移動 */
}

/* メニューが開いているときのスタイル */
.menu.open { 
display:block;/* メニューが表示される */
}

.menu ul {
list-style:none;
margin:0; padding:0;
}

.menu li { margin:10px 0; 
}

.menu a {
color:#555555; /* テキストカラー */
text-decoration:none;
font-weight:bold;
}

.menu  a:hover {
color:#29ab1b; /* 緑に変化 */
border-bottom:2px solid #29ab1b; /* 下線が出る */
}


/* 翻訳アコーディオン */
.lang-menu {
display:none;
position:absolute;
top:100%; /* 翻訳リンクのすぐ下に表示 */
left:0;
background:##060;
padding:10px 20px;
z-index:1000; /* ← 追加 */
}

.lang-menu.open { display:block; }
.lang-menu a {
display:block;
color:#fff;
text-decoration:none;
margin:5px 0;
}

/* フッター全体 */
.footer-container {
display: flex;
flex-direction: column; /* カードを縦積み */
align-items: center; /* 中央配置 */
gap: 12px; /* カード間の余白 */
margin: 16px auto; /* 上下のマージンを設定し、左右は自動で中央寄せ */
}

.footer-card {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 12px 16px;

border: 1px solid #ddd;    /* ←カードの薄い枠線 */
border-radius: 8px;        /* 角丸 */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 影 */
}

/* ボタンの装飾（紫の枠線） */
.footer-card a {
display: inline-block;
border: 1px solid #5a5abe; /*  青の枠線 5a5abe */
padding: 6px 12px;
border-radius: 6px;
background: transparent;
margin: 4px;
color: #5a5abe;
text-decoration: none;
}

.footer-card a:hover {
background: #5fbe5a; /*  青の枠線 5a5abe */
color: #fff;
}

/* カード内文字白 */
#footer a:hover {
color: #fff;
}

/* バッジ */
.badge {
display: inline-block;
color: #fff;
background: #d92d33;
padding: 5px 8px;
border-radius: 4px;
font-weight: bold;
margin-right: 10px;
}

.logo-btn {
display: inline-block;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.01); /* ← α値を0.15にして薄め */
transition: transform 120ms ease, box-shadow 120ms ease;
}

.logo-btn:hover {
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
transform: scale(1.05); /* ズームをさらに強調 */
}

.logo-btn:active {
transform: translateY(2px) scale(0.97);
box-shadow: 0 1px 4px rgba(0,0,0,0.12); /*押下時はさらに薄く*/
}

/* メディアクエリ一一覧*/
/*ハンバーガーメニュー位置 */
@media screen and (min-width: 900px) {
.menu {
width: 170px;
transform: translateX(170px); /* ← 隠す位置を150pxに */
}
.menu.open {
transform: translateX(0);
}
}

@media screen and (max-width: 450px) {
.menu {
width: 100%;
transform: translateX(100%); /* ← 隠す位置を100%に */
}
.menu.open {
transform: translateX(0);
}
}
/* 420px以下：Galaxy系など縦長スマホ */ 
@media (max-width:420px) { 
.menu { 
top:90px; /* ← ここでさらに下げる */
} 
.site-title {
font-size:16px;   /* タイトル文字指定 */ 
padding-left: 10px;
}
}
@media screen and (max-width: 800px) {
.pc-only {
display: none;
}
}