*{
box-sizing: border-box; /*Paddingに関係なく、箱のサイズをそろえる。*/
}

/* === Mobile Page (幅767px以下のViewport) これが基準。 === */
/* ---------------------------- */
header{
	background-color: #000000;
	padding: 16px 12px;
	text-align: center;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
#title{
	font-size: 18px;
	color: #ffffff;
  margin: 0;
}

#subtitle{
	font-size: 12px;
	color: #ffffff;
  margin-top: 4px;
}

/* ---------------------------- */
nav {
  background-color: #696969;
  display: flex;
  align-items: center;
}
nav a:link,
nav a:visited {
  color: #ffffff;
  text-align: center;
  padding: 10px 8px;
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap; /* 折り返し防止 */
}

nav a:hover{
  color: black;
	background-color: #81D8D0;
	text-decoration: none;
}

/* Englishのみ右寄せ */
#lang {
  margin-left: auto;
}

/* ---------------------------- */
.CLM01{
  width: 100%;
  padding: 5px;
}

.main-section {
  background-color: #D3D3D3;
  margin-bottom: 16px;
  border-radius: 6px;
  overflow: hidden;
}

.main-section-body {
  padding: 12px;
}

.quiz-section-body {
  padding: 12px;
}

.main-section-title{
	background-color: #000000;
	color: #ffffff;
	font-size: 15px;
	padding: 6px 8px;
	margin: 0;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

/* ハイパーリンクのデフォルト設定 (本文用) */
a:link, a:visited {
  color: blue;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: blue;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

/* 隠しリンク用 */
#hidden:link,
#hidden:visited,
#hidden:hover,
#hidden:active {
  color: #fff;
  text-decoration: none;
  cursor: default;
}

/* ---------------------------- */
/* 左側のカラム（PCのみ） */
.CLM02{
  width: 100%;
  padding: 5px;
}

.sub-section {
  background-color: #fff; /* 白色 */
  margin-bottom: 16px;
  border-radius: 6px;
  overflow: hidden;
}

.sub-section-title{
	background-color: #D3D3D3;
	color: #000;
	font-size: 15px;
	padding: 6px 8px;
	margin: 0;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

.sub-section-body {
  padding: 12px;
}

/* 画像の書式。 */
.PZL-img{
	width: 100%;
  height: auto;
}

.PRF-img{
	width: 100%;
  height: auto;
}

.QUIZ-img{
  max-width:100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.ITEM-img{
  width: 96%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

/* 箇条書きの書式。 */
.archive-list {
  list-style-type: disc;
  padding-left: 20px;    
}

/* ---------------------------- */
footer {
  background-color: #000;
  color: #fff;
  font-size: 10px;
  padding: 6px;
  display: flex;
  align-items: center;
  line-height: 1.6;
}

footer p {
  margin: 0;
  padding: 4px;
  flex: 1;           /* ← 三等分 */
}

#days {
  text-align: left;
}

#sign {
  text-align: center;
}



/* ----------------- */

#twitter {
  text-align: right;
}

/* ---------------------------- */
.btn{
	background-color: #ffffff;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	color: #000000;
	padding: 20px;
	font-size: 20px;
	border-style: solid;
	border-width: 1px;
	cursor: pointer;
	width: 100%;
	height: auto;
}
.btn:hover{
background-color: #d5dcb8;
color: #000000;
}


.next{
	clear:both;
	display: block;
	background-color: #d5dcb8;
		width:100%;
		text-align: center;
}


/* Table設定*/

table, th, td {
  border: 1px solid #000000;
  border-collapse: collapse; /* これがないと線が二重になる。*/
}


/* mobileで見えないもの */
.CLM02 {display: none;}
.next-meeting-image {display: none;}


/* -------------------------------------------------------------------- */

/* Ipad＆Desktop layout(幅が768px以上の画面) */
@media only screen and (min-width: 768px){

header{
  padding: 25px;
  text-align: center;
}
#title{font-size: 32px;}/* h1は32px*/
#subtitle{font-size: 18px;}

nav a:link,
nav a:visited {
  color: white;
  padding: 10px 12px;
  font-size: 16px;
}
nav a:hover {
    color: black;
    background-color: #81D8D0;
    text-decoration: none;
  }

/* --------------------------- */

.CLMS {
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    gap: 16px;
  }
.CLM01 {
    order: 2;
    flex: 0 0 70%;
  }
.CLM02 {
    order: 1;
    display: block;
    flex: 0 0 30%;
  }

/* --------------------------- */
.main-section-title{
  font-size: 18px;
  }
.sub-section-title{
  font-size: 16px;
  }

.quiz-section-body{
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }

.ITEM-img{
    width: 96%;
    max-width: 600px;
    filter: grayscale(100%);
    transition: filter 0.2s;
  }

.ITEM-img:hover {
    filter: grayscale(0%);
  }

.QUIZ-img{
    width: 45%;
    margin: 0;
  }

.quiz-text{
    width: 55%;
  }

/* ----------Indexの横並び表示------------ */
.next-meeting-top{
    display: flex;
    align-items: center;
    gap: 20px;
  }

.next-meeting-info{
    width: 55%;
  }

.next-meeting-image{
    display: block;
    width: 45%;
  }

/* ---------------------- */
footer {
    font-size: 14px;
    line-height: 1.8;
  }

}