/* 背景カラー */
.sub-bg1 { background-color: #EDEDEA;}

.sub-bg2 { background-color: #422D23;}

/* 文字カラー */
.main-text { color: #333333;}

.sub-text1 { color: #B10100;}

/* 見出し。フォント */
h2 { 
    font-family: "游明朝体", "Yu Mincho", "YuMincho", serif;
    font-weight: 800;
    font-size: 1.5rem;
}

h3 {
    font-family: "游明朝体", "Yu Mincho", "YuMincho", serif;
    font-weight: 600;
    font-size: 1.3rem;
}

/* centerlineクラスがある場合は上書き */
h2.centerline,
h3.centerline {
    position: relative;
    display: inline-block;
}

h2.centerline::before,
h3.centerline::before {
    content: '';
    position: absolute;
    right: calc(100% + 20px);
    top: 50%;
    width: 60px;
    height: 1px;
    background-color: currentColor;
}

h2.centerline::after,
h3.centerline::after {
    content: '';
    position: absolute;
    left: calc(100% + 20px);
    top: 50%;
    width: 60px;
    height: 1px;
    background-color: currentColor;
    margin: 0 !important;
}

/* 強調 */
.emphasis {
    color: #B10100;
    font-weight: bold;
}

/* 中心に線 */
.center-line {
    position: relative;
    padding-bottom: 40px;
}

.center-line::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    width: 60px;
    height: 1px;
    background-color: currentColor;
}

/* Header */
.header {
    background-color: #EDEDEA;
    backdrop-filter: blur(3.5px);
    -webkit-backdrop-filter: blur(3.5px);
    height: 56px;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, transform 0.25s ease;
}

/* Header - レスポンシブ */
@media (min-width: 501px) {
    .header {
        max-width: 390px;
    }
}

.header.menu-open {
    background-color: rgba(255, 255, 255, 1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 下スクロール時にヘッダーを隠す */
.header.header--hidden {
    transform: translate(-50%, -100%);
}


.header-logo {
    flex: 0 0 auto;
}

.header-logo img {
    width: 82px;
    height: auto;
    display: block;
}

.header-menu-button {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
}

.header-menu-button:hover {
    opacity: 0.7;
}

.header-menu-button img {
    width: 24px !important;
    height: 18px !important;
    display: block;
    filter: brightness(0);
}

/* Header Menu */
.header-menu {
    background-color: #ffffff;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
    position: fixed;
    top: 56px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    z-index: 1000;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid #CCCCCC;
}

/* Header Menu - レスポンシブ */
@media (min-width: 501px) {
    .header-menu {
        max-width: 390px;
    }
}

.header-menu.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.header-menu-nav {
    display: flex;
    flex-direction: column;
}

.header-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    color: #333333;
    text-decoration: none;
    border-bottom: 1.5px solid #777777;
    transition: opacity 0.3s;
}

.header-menu-item span {
    margin: 0 10px;
}

/* .header-menu-item:first-child {
    border-top: 1px solid #e0e0e0;
} */

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

.header-menu-item .arrow {
    color: #333333;
}

/* メニューオーバーレイ（背景を隠す） */
.header-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
}
 COX_forbidden_markdown_tag_in_context_at_814_847_1061_1065_1067_1068_1069_1070_1071_1072_1073_1074_1075_1076_1077_1078_1079_1080_1081_1082_1083_1084_1085_1086_1087_1088_1089_1090_1091_1092_1093_1094_1095_1096_1097_1098_1099_1100_1101_1102_1103_1104_1105_1106_1107_1108_1109_1110_1111_1112_1113_1114_1115_1116_1117_1118_1119_1120_1121_1122_1123_1124_1125_1126_1127_1128_1129_1130_1131_1132_1133_1134_1135_1136_1137_1138_1139_1140_1141_1142_1143_1144_1145_1146_1147_1148_1149_1150_1151_1152_1153_1154_1155_1156_1157_1158_1159_1160_1161_1162_1163_1164_1165_1166_1167_1168_1169_1170_1171_1172_1173_1174_1175_1176_1177_1178_1179_1180_1181_1182_1183_1184_1185_1186_1187_1188_1189_1190_1191_1192_1193_1194_1195_1196_1197_1198_1199_1200_1201_1202_1203_1204_1205_1206_1207_1208_1209_1210_1211_1212_1213_1214_1215_1216_1217_1218_1219_1220_1221_1222_1223_1224_1225_1226_1227_1228_1229_1230_1231_1232_1233_1234_1235_1236_1237_1238_1239_1240_1241_1242_1243_1244_1245_1246_1247_1248_1249_1250_1251_1252_1253_1254_1255_1256_1257_1258_1259_1260_1261_1262_1263_1264_1265_1266_1267_1268_1269_1270_1271_1272_1273_1274_1275_1276_1277_1278_1279_1280_1281_1282_1283_1284_1285_1286_1287_1288_1289_1290_1291_1292_1293_1294_1295_1296_1297_1298_1299_1300_1301_1302_1303_1304_1305_1306_1307_1308_1309_1310_1311_1312_1313_1314_1315_1316_1317_1318_1319_1320_1321_1322_1323_1324_1325_1326_1327_1328_1329_1330_1331_1332_1333_1334_1335_1336_1337_1338_1339_1340_1341_1342_1343_1344_1345_1346_1347_1348_1349_1350_1351_1352_1353_1354_1355_1356_1357_1358_1359_1360_1361_1362_1363_1364_1365_1366_1367_1368_1369_1370_1371_1372_1373_1374_1375_1376_1377_1378_1379_1380_1381_1382_1383_1384_1385_1386_1387_1388_1389_1390_1391_1392_1393_1394_1395_1396_1397_1398_1399_1400_1401_1402_1403_1404_1405_1406_1407_1408_1409_1410_1411_1412_1413_1414_1415_1416_1417_1418_1419_1420_1421_1422_1423_1424_1425_1426_1427_1428_1429_1430_1431_1432_1433_1434_1435_1436_1437_1438_1439_1440_1441_1442_1443_1444_1445_1446_1447_1448_1449_1450_1451_1452_1453_1454_1455_1456_1457_1458_1459_1460_1461_1462_1463_1464_1465_1466_1467_1468_1469_1470_1471_1472_1473_1474_1475_1476_1477_1478_1479_1480_1481_1482_1483_1484_1485_1486_1487_1488_1489_1490_1491_1492_1493_1494_1495_1496_1497_1498_1499_1500_1501_1502_1503_1504_1505_1506_1507_1508_1509_1510_1511_1512_1513_1514_1515_1516_1517_1518_1519_1520_1521_1522_1523_1524_1525_1526_1527_1528_1529_1530_1531_1532_1533_1534_1535_1536_1537_1538_1539_1540_1541_1542_1543_1544_1545_1546_1547_1548_1549_1550_1551_1552_1553_1554_1555_1556_1557_1558_1559_1560_1561_1562_1563_1564_1565_1566_1567_1568_1569_1570_1571 Magic tokens detected

.header-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    background-color: #ffffff;
    pointer-events: auto;
}

/* メニューが開いている時にbodyのスクロールを無効化 */
body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Footer */
.footer {
    background-color: #333333;
    margin: 0 auto;
    width: 100%;
    padding: 30px 20px 40px;
    text-align: center;
}

/* Footer - レスポンシブ */
@media (min-width: 501px) {
    .footer {
        max-width: 390px;
    }
}

/* ページトップへ戻るボタン */
.back-to-top {
    display: block;
    width: 100%;
    max-width: 350px;
    margin: 0 auto 40px;
    padding: 11px 20px;
    border: 1px solid #cccccc;
    border-radius: 30px;
    color: #cccccc;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
    font-weight: 300 !important;
}

.back-to-top:hover { background-color: #cccccc; color: #333333; }

.back-to-top::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    position: relative;
    margin-left: 10px;
    border-left: 2px solid #cccccc;
    border-bottom: 2px solid #cccccc;
    transform: rotate(135deg);
    margin-bottom: -3px;
}

/* フッターロゴエリア */
.footer-logo-area {
    margin-bottom: 30px;
}

.footer-logo {
    width: 180px;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* フッターナビゲーション */
.footer-nav {
    margin-bottom: 30px;
}

.footer-nav-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 19px 0;
    color: #cccccc;
    text-decoration: none;
    border-bottom: 1px solid #555555;
    transition: opacity 0.3s;
    font-weight: 300 !important;
}

.footer-nav-item span {
    margin: 0 10px;
}

.footer-nav-item:first-child {
    border-top: 1px solid #555555;
}

.footer-nav-item:hover {
    opacity: 0.7;
}

/* フッター下部 */
.footer-bottom {
    padding-top: 20px;
}

.footer-bottom a {
    width: 95%;
}

.footer-link {
    display: inline-block;
    color: #cccccc;
    text-decoration: none;
    font-size:13px;
    margin: 0 10px 15px;
    transition: opacity 0.3s;
}

.footer-link:hover { opacity: 0.7; }

.footer-copyright { color: #cccccc; margin-top: 15px; opacity: 0.8; font-size:13px; }
