/* すべてのページで適応させるCSS */

/* ヘッダー */


/* ヘッダーを固定表示 */
header {
    position: fixed; /* 画面上部に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 70px; /* ヘッダーの高さ */
    background-color: #d48a9e;
    opacity: 0.9;
    z-index: 1000; /* 最前面に配置 */
    transition: transform 0.3s ease-in-out;
}

/* ヘッダーを隠す */
header.hidden {
    transform: translateY(-100%);
}



/* ヘッダーの中身の配置 */
.header-position {
    width: 100%;
    margin: 0 auto;
	overflow: hidden;
	display: flex;               /* 横並びにする */
 justify-content: space-between; /* 両端に配置 */
   align-items: center;         /* 垂直方向中央揃え */
    /*position: relative;*/
}

/* ヘッダーのロゴ */
.logo {
    margin-top: 8px;
    height: 55px;
}

/* ヘッダーのハンバーガーメニュー */
.hamburger {
    margin-top: 10px;
   margin-right: 10px;
    width: 51px;
    height: 50px;
    float: right;
 	background-image: url('../image/ico_hamb.png');
    background-size: contain;
    background-repeat: no-repeat; 
}

/* header.php のデスクトップ用カテゴリー用ナビゲーション */
.header-categories {
  display: none; /* 初期状態は非表示 */
}


/* モバイルメニューの基本スタイル */
.mobile-menu {
  display: none; /* 初期状態は非表示 */
  position: absolute;
  top: 70px; /* ヘッダーの下に配置 */
  right: 0;
  background: #fff;
  width: 200px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 1001;
}

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

.mobile-menu ul li {
  border-bottom: 1px solid #ddd;
}

.mobile-menu ul li:last-child {
  border-bottom: none;
}

.mobile-menu ul li a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}

.mobile-menu ul li a:hover {
  background-color: #f4f4f4;
}
/*active クラスを使って表示させる設定も追加すると管理が楽*/
.mobile-menu.active {
  display: block;
}

/* 横幅が768px以上の場合に表示 */
@media (min-width: 768px) {
  .header-categories {
    display: flex;
    margin-top: 10px;
    margin-right: 10px;
    gap: 40px;  /* リンク間のスペース */
    align-items: center;
    font-family: 'Yu Gothic', '游ゴシック', 'YuGothic', Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #fff;
  }
  
  /* ハンバーガーメニューを非表示 */
  .hamburger {
    display: none;
  }
}
/* body基本設定 */
body {
    font-family: 'Yu Gothic', '游ゴシック', 'YuGothic', 'Helvetica', 'Arial', sans-serif;
    /* 游ゴシックをデフォルトに設定 */
    font-size: 16px;
    /* 文字サイズ */
    color: #717171;
    /* 文字の色 */
    line-height: 1.0;
    /* 行間 */
    margin: 0;
    /* デフォルトのマージンをリセット */
    padding: 0;
    /* デフォルトのパディングをリセット */
}

/* title-backgroundクラスのスタイル */
.title-background {
    position: absolute;
    top: ;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../image/title-background.jpg');
    /* 画像のURL */
  background-size: cover;
    /* 縦横のいずれかに合わせて全体を覆う */
    background-position: center;
    /* 画像の中央を表示 */
    opacity: 0.5;
    /* 不透明度50% */
    clip-path: inherit;
    /* 親のclip-pathを引き継ぐ */
}

/* リンク要素の設定 */
a {
    color: inherit;
    /* 親要素の文字色に合わせる */
    text-decoration: none;
    /* アンダーラインを削除 */
}

/* 新着情報のフォント */
.new-posts {
    text-align: center;
    max-width: 1060px;
    /* 最大幅を1060pxに設定 */
    margin: 0 auto;
    /* コンテンツを中央に配置 */
}

/* にこもじの指定 */
@font-face {
    font-family: 'nocomojiFont';
    /* 自分で指定するフォント名 */
    src: url('./nicomoji-plus_v2-5.ttf') format('truetype');
    /* フォントファイルのパス */
}

.nicomoji {
    font-family: 'nocomojiFont';
    /* 指定したフォントを適用 */
    color: #717171;
    /* 文字の色 */
}
.nicomoji-w {
    font-family: 'nocomojiFont';
    /* 指定したフォントを適用 */
    color: #DDEEEE;
    /* 文字の色 */
}
/* フッターのデザイン */
footer {
    background-color: #cce5ff; /* フッターの背景色 */
    text-align: center; /* テキストを中央揃え */
    padding: 5px;
    color: #666; /* 文字色 */
    font-size: 0.8rem;
   /* position: relative;  記事内容が短くてもフッターが固定されないように */
    width: 100%;
     margin-top: 20px; /* footerの上に20pxの余白を追加 */
}
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.content {
  flex: 1; /* メインコンテンツ部分が空いているスペースを埋める */
}
/* フッターが常に下に表示されるように */
html, body {
    height: 100%;
}

.article-main {
    min-height: calc(100vh - 150px); /* フッターを押し下げるための余白 */
}
/* 表の画像位置 */
th img{
vertical-align: bottom;
}

/*背景に色を付けたいときに使う*/
	.divgray {
        background-color: #EBEBEB;
    }
    
    .divpink {
    	background-color: #FFC0CB;
    }
    
    .divblue {
    	background-color: #e6f7ff;
    }

/* Yes No 診断のときにつかうエリア */

#quiz-container {
  background-color: #e6f7ff; /* 薄い青色 */
  padding: 20px;             /* 余白を適度につける */
  border-radius: 8px;        /* 角を丸くする */
  max-width: 500px;          /* 表示エリアの幅を調整 */
    min-height: 400px;  
  margin: auto;              /* 中央揃え */
  text-align: center;        /* テキスト中央揃え */
}
button { padding: 10px 20px; margin: 10px; }