/*
Theme Name: CMSA Theme
Theme URI: http://cmsa.com
Author: CMSA
Description: 全日本整備システム協会 会員制サイト
Version: 1.0
*/

body, h1, h2, h3, p, ul, li { margin:0; padding:0; font-family:sans-serif; }
body { line-height:1.6; background:#f9f9f9; color:#333;}

/* Header */
header {background:#103b63; color:#fff; padding:15px 30px; display:flex; justify-content: space-between; align-items:center;}
header nav a {margin-left:20px; color:#fff; font-weight:600;}

/* Hero */
.hero h1 {font-size:2em; margin-bottom:10px;color:#fff;text-shadow: 0px 0px 25px black;}
.hero p {font-size:1.2em; color:#fff;text-shadow: 0px 0px 25px black;}
.hero {
  position: relative;
  background:#e6f0fa;
  width: 100%;
  height: 600px; /* 好きな高さに調整 */
  background-image: url('http://cmsa-jp.com/wp-content/uploads/2025/09/32535962_m.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.hero-overlay {
  width: 100%;
  height: 100%;
  background: rgb(50 61 49 / 24%);/* 文字を見やすく */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-people {
  position: absolute;
  right: 40px;       /* 右端から少し余白 */
  bottom: -40px;     /* ヒーロー下に40pxはみ出す */
  width: 383px;     /* 必要に応じて調整 */
  /* 人物っぽい影をつける */
  filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, 0.4));
  /* 滑らかに表示 */
  transition: all 0.3s ease;
}
/* 画面幅1168px以下で小さくする */
@media (max-width: 1168px) {
  .hero-people {
    width: 287px;      /* 小さくする */
    right: 10px;        /* 少し左にずらす */
    bottom: -35px;      /* はみ出しも少なめに */
  }
}
/* 画面幅768px以下で小さくする */
@media (max-width: 930px) {
  .hero-people {
    width: 240px;      /* 小さくする */
    right: 10px;        /* 少し左にずらす */
    bottom: -30px;      /* はみ出しも少なめに */
  }
}
/* 画面幅480px以下ではさらに調整 */
@media (max-width: 480px) {
  .hero-people {
    width: 172px;
    right: 5px;
    bottom: -20px;
  }
}
/* Section */
section {padding:40px 30px; background:#fff; margin-bottom:15px; box-shadow:0 2px 5px rgba(0,0,0,0.1);}
section h2 {margin-bottom:20px; color:#103b63;}

/* Cards */
.cards-box .cards {display:flex; flex-wrap:wrap; gap:20px; justify-content:center;}
.cards-box .card {background:#f0f4f8; padding:20px; border-radius:8px; width:280px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,0.1); transition: all 0.3s ease;}
.cards-box .card h3 {margin-bottom:10px; color:#103b63;}
.cards-box .card:hover {
}
.cards-box .card-img {
  height: 80px;
  object-fit: cover; /* 縦横比を維持して切り抜き */
  margin-bottom: 15px;
  border-radius: 8px;
}

/* News list */
.news-list li {margin-bottom:10px;}
.news-list li a {color:#103b63; font-weight:500;}

/* Footer */
footer {background:#103b63; color:#fff; padding:20px 30px; text-align:center;}

/* 会員ログインページ */
.login-container {max-width:400px; margin:50px auto; padding:30px; background-color: rgba(255,255,255,0.9); border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.1);}
.login-container h2 {text-align:center; margin-bottom:20px; color:#103b63;}
.login-container input[type=text],
.login-container input[type=password] {width:94%; padding:10px; margin-bottom:15px; border:1px solid #ccc; border-radius:5px;}
.login-container button {width:100%; padding:10px; background:#103b63; color:#fff; border:none; border-radius:5px; font-size:1em; cursor:pointer;}
.login-container button:hover {background:#0b2a4d;}
.login-box {
    position: relative; /* オーバーレイ用に相対位置 */
    background-image: url('http://cmsa-jp.com/wp-content/uploads/2025/09/25897524_m.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-height: 400px; /* 好きな高さに調整 */
}
/* オーバーレイ */
.login-box::before {
    content:"";
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.4); /* 黒を40%の透過で暗くする */
    z-index:1;
}
/* ボックス内の文字やフォームはオーバーレイの上に */
.login-box > * {
    position: relative;
    z-index:2;
}
.login-min-box{
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	width:90%;
	max-width:600px;
	background-color: rgba(255,255,255,0.8);
	padding:20px 0 1px 0;
	margin:auto;
}
.login-container .button-primary {
    display: inline-block;
    width: 100%;
    padding: 12px 0;
    background: #103b63;       /* メインカラー */
    color: #fff;
    font-size: 1.1em;
    font-weight: 600;
    border: none;
    border-radius: 8px;         /* 角丸 */
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* 少し浮いた感じ */
	transition: all 0.2s ease-in-out;
	margin-top:10px;
}
.login-container .button-primary:hover {
    background: #0b2a4d;        /* ホバーで濃く */
    transform: translateY(-2px); /* 少し浮くアニメーション */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}


.members-post-list { list-style:none; padding:0; }
.members-post-list li { padding:10px 15px; margin-bottom:8px; border-radius:5px; }
.members-post-list li a { text-decoration:none; font-weight:500; }

.post-read { background:#e0f0d9; color:#333; }      /* 既読は緑系 */
.post-read a { color:#2a7a2a; }

.post-unread { background:#fff4e6; color:#333; }    /* 未読はオレンジ系 */
.post-unread a { color:#d35400; font-weight:600; }

/* ===== ヒーロー全幅 ===== */
.hero-full {
    width: 100%;
    background:#e6f0fa;
    padding:100px 0;
    text-align:center;
}
.hero-full .hero-content {
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}
.hero-buttons a {
    display:inline-block;
    margin: 20px 10px 0 10px;
    padding: 14px 32px;
    border-radius:8px;
    text-decoration:none;
    color:#fff;
    font-weight:600;
    box-shadow:0 3px 6px rgba(0,0,0,0.15);
    transition:all 0.2s ease-in-out;
}
.hero-buttons a:first-child { background:#103b63; }
.hero-buttons a:last-child { background:#d35400; }
.hero-buttons a:hover {
    transform:translateY(-2px);
    opacity:0.9;
}

/* ===== 全体コンテナ ===== */
.container {
    max-width:1000px;
    margin:0 auto;
    padding:40px 20px;
}

/* ===== CMSAとは ===== */
.cmsa-about {
    padding:40px 30px;
    background:#fff;
    border-radius:12px;
    margin-bottom:20px;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    text-align:center;
}
.cmsa-about-box img{
	max-width:600px;
}
/* ===== お知らせ ===== */
.news {
    margin-bottom:40px;
}
.news-list li { 
    margin-bottom:10px; 
}
.news-list a { 
    text-decoration:none; 
    color:#103b63; 
    padding:4px 8px;
    display:inline-block;
    border-radius:4px;
    transition:background 0.2s;
}
.news-list a:hover { 
    background:rgba(16,59,99,0.1);
}
/* ニュースボックス */
.news-items {
    display:flex;
    flex-direction:column;
    gap:15px;
}
.news-item {
    display:flex;
    align-items:center;
    border:1px solid #ccc;
    border-radius:8px;
    padding:15px;
    background:#fff;
    text-decoration:none;
    color:#333;
    transition: all 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.news-item:hover {
    background:#f5f5f5;
    transform: translateY(-3px);
}
.news-date {
    flex: 0 0 100px;
    font-weight:600;
    color:#555;
}
.news-content {
    flex:1;
    justify-content:space-between;
    align-items:center;
    gap:15px;
}
.news-title {
    margin:0;
    font-size:1.1em;
    font-weight:600;
    color:#506916;
}
.news-thumb img {
    max-width:80px;
    max-height:60px;
    object-fit:cover;
    border-radius:4px;
}
.more-button {
    display: inline-block;
    padding: 15px 20px;
    background: #0e4916;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s;
    width: 200px;
    border: solid;
}
.more-button:hover {
    background:#09290d;
    transform: translateY(-2px);
}



/* ===== 会員ログイン ===== */
.login-section .login-container {
    max-width:400px;
    margin:20px auto;
    padding:30px;
    background-color: #fff;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    text-align:center;
}

/* ===== 目的と事業概要 ===== */
.purpose-box {
    background:#f0f4f8;
    padding:40px 30px;
    text-align:center;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.buttons a {
    display:inline-block;
    padding:45px 150px;
    margin:40px 15px 0 15px;
    border-radius:8px;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    box-shadow:0 3px 6px rgba(0,0,0,0.15);
    transition:all 0.2s;
}
.buttons a:first-child { background:#103b63; }
.buttons a:last-child { background:#d35400; }
.buttons a:hover { transform:translateY(-2px); opacity:0.9; }

@media (max-width: 600px) {
	.buttons a {
	    display:inline-block;
    	padding:12px 24px;
    	margin:20px 5px 0 5px;
    	border-radius:8px;
    	color:#fff;
    	text-decoration:none;
    	font-weight:600;
    	box-shadow:0 3px 6px rgba(0,0,0,0.15);
    	transition:all 0.2s;
	}
}
/* BOXは幅いっぱい */
.cmsa-about-box {
    width: 100%;
    background: #fff;
    padding: 40px 0;   /* 上下の余白 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* BOX内の中身だけ最大幅1000pxで中央寄せ */
.cmsa-about-box .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* 横の余白 */
    text-align: center;
}

/* NO IMAGE プレースホルダ */
.no-image {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 2px dashed #e2e8f0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(16,59,99,0.05);
  color: #7a8896;
  margin: 20px 0;
  padding: 18px;
  box-sizing: border-box;
  text-align: center;
  max-width: 300px;
}

/* アイコンサイズ */
.no-image__icon {
  width: 88px;
  height: auto;
  margin-bottom: 12px;
  opacity: 0.95;
}

/* キャプション */
.no-image__text {
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: #4b5563;
  font-weight: 600;
}

/* レスポンシブ - スマホでは高さを低めに */
@media (max-width: 600px) {
  .no-image__icon { width: 64px; margin-bottom:10px; }
  .no-image__text { font-size: 0.92rem; }
  .no-image { padding: 12px; border-radius:10px; }
}

#login{
	padding-top: 90px; margin-top: -90px;
}

.news-categories {
    margin-top: 5px;
}

.news-category {
    display: inline-block;
    background: #90b33d;
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    margin-right: 5px; /* 右に詰める */
    margin-bottom: 3px; /* BOX同士の縦間隔 */
}

.news-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
}
.news-content {
    flex: 1;
}
.news-title {
    margin: 0 0 5px 0;
}
/* 簡単に既読/未読を色分け */
.members-post-list { list-style:none; padding:0; }
.members-post-list li { margin-bottom:10px; }
.post-read a { color: #999; text-decoration:line-through; }
.post-unread a { font-weight:bold; color:#103b63; }

/* 会員ページアクセスボタン */
.btn-members {
    display: inline-block;
    padding: 10px 20px;
    background: #d35400; /* ヘッダーオレンジ */
    color: #fff;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s;
    margin-right: 10px;
	margin-top:20px;
}
.btn-members:hover {
    background: #e67e22;
}

/* ログアウトボタン */
.btn-logout {
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    background: #8f8f8f;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s;
}
.btn-logout:hover {
    background: #afafaf;
}

/* カレンダー */
.members-calendar {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 12px; /* 小さく */
}
.members-calendar th,
.members-calendar td {
    border: 1px solid #ccc;
    width: 14.28%;
    height: 30px; /* 高さを調整 */
    vertical-align: top;
    padding: 2px;
}
.members-calendar th{
    height: 20px; /* 高さを調整 */
}
.members-calendar th {
    background: #103b63;
    color: #fff;
}
.calendar-day {
    font-weight: bold;
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    line-height: 0;
    margin-top: 8px;
}
.calendar-post a {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #d35400;
    border-radius: 50%;
    text-indent: -9999px;
    margin: 1px;
	font-size: 5px;
}
.calendar-post a:hover {
    background: #f39c12;
}
.calendar-nav {
    text-align: center;
    margin-bottom: 5px;
}
.calendar-nav a {
    color: #103b63;
    text-decoration: none;
    font-weight: bold;
    margin: 0 5px;
}
.calendar-nav .disabled {
    color: #ccc;
    margin: 0 5px;
}

.calendar-post{display:inline;height:8px;}




/* 会員ページにログイン　TOPページ　スマホ表示調整 */
@media screen and (max-width: 768px) {
    .login-min-box {
        width: 96vw;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -48vw;
        margin-right: -47vw;
    }

    .login-min-box h2 {
        font-size: 20px;     /* タイトルを小さめ */
        margin-bottom: 10px;
    }
	.login-container{
		margin:20px auto;
		margin-bottom:10px;
	}
    .login-description p {
        font-size: 14px;     /* 説明文を小さめ */
        margin-bottom: 6px;
    }

    .login-links a {
        display: block;      /* リンクを縦並びに */
        margin: 6px 0;
    }

    .btn-members,
    .btn-logout {
        display: block;      /* ボタンを縦並びに */
        margin: 10px 0;
        width: 100%;
        box-sizing: border-box;
    }
}



/* 最新ニュース スマホ用調整 */
@media screen and (max-width: 768px) {
    .news-item {
        display: block; /* 横並び解除 */
    }

    .news-date,
    .news-categories {
        display: inline-block; /* 上段に横並び */
        margin-right: 10px;
        font-size: 12px;
    }

    .news-content {
        display: block;
        margin-top: 5px;
    }

    .news-title {
        display: block;
        font-size: 16px;
        margin-top: 5px; /* 上段との間隔 */
    }

    .news-thumb {
        margin-top: 10px; /* サムネイルとの間隔 */
    }
}


.members-hero {
    height: 100px; /* 高さだけ固定 */
    background-image: url('https://cmsa-jp.com/wp-content/themes/cmsa-theme/images/members-hero.jpg');
    background-size: cover;      /* いっぱいに広げて切り抜き */
    background-position: center; /* 中央に寄せる */
    background-repeat: no-repeat;
}

/* 非会員用（会員限定）記事 */
.news-item.private {
    pointer-events: none;      /* クリックできない */
    background-color: #f0f0f0; /* 背景を淡く */
    border-color: #ccc;        /* 枠も淡く */
}

.news-item.private .news-title {
    color: #999;               /* タイトルも淡色に */
}

.news-item.private .news-category {
    background: #bbb;          /* カテゴリも薄く */
}

.wp-block-list{
	margin-left:26px;
}