@charset "utf-8";

:root {
  --header-font: "BIZ UDPGothic", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, Arial, sans-serif;
  --base-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", "Noto Sans JP", "Helvetica Neue", Arial, "Yu Gothic", sans-serif;
  --std-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --link-hover-bg: #fff5e0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0 auto; padding: 0;
  font-family: var(--base-font);
  color: #222;
  line-height: 1;
}

#wrap {
  margin: 0 auto;
  padding: 0 25px 1rem;
  width: 1000px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  box-sizing: content-box;
}

/* サイド */
.ad-sidebar {
  position: absolute;
  top: 20px;         /* 上からの位置（お好みで調整） */
  left: 100%;        /* メインの右端（800pxの境界線）を基準にする */
  margin-left: 10px; /* メインと広告の間のスキマ（お好みで調整） */

  min-width: 160px;      /* 広告の横幅 */
  min-height: 600px;     /* 広告の縦幅 */
  padding: 10px;
}

a:link    { color:#022eb0; }
a:visited { color:#939; }
a:hover   { color:#c63; }

/* ヘッダー */
header {
  margin-bottom: 1.5rem;
}
.header-logo {
  position: relative;
  margin: 0; padding: 0;
  width: 1000px; height: 50px;
  background: #af5;
  background: linear-gradient(to bottom, #af5, #f0ffe0 50%, #af5);
}
#header-background-left {
  position: absolute;
  top: 0; left: 0;
  width: 160px;
}
#header-background-right {
  position: absolute;
  top: 0; right: 0;
  width: 150px;
}

header nav {
  border-top: solid 1px #696;
  border-bottom: solid 1px #696;
  background: #ded;
}
header nav ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
header nav li a {
  display: block;
  padding: 10px 14px;
  border-right: solid 1px #9b9;
  text-align: center;
  text-decoration: none;
  color: #222 !important;
  font-family: var(--header-font);
  font-size: 15px;
  font-weight: bold;
  white-space: nowrap;
  transition: .2s;
}
header nav li.right {
  flex-grow: 1;
}
header nav li.right a {
  padding: 4px;
  border: none;
  text-align: right;
  text-decoration: underline;
  color: #022eb0 !important;
  font-family: var(--base-font);
  font-size: 13px;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
header nav a:hover {
  background: #bdb;
  background: linear-gradient(to bottom, #c4e4c4, #c8e8c8 30%, #bdb);
  color: #c63;
}
header nav li.right a:hover {
  background: #ded;
  text-decoration: underline;
  color: #c63 !important;
}
header nav a[aria-current="page"] {
  background: #bdb;
  background: linear-gradient(to bottom, #c4e4c4, #c8e8c8 30%, #bdb);
}

/* メイン */
#main {
  display: flex;
  gap: 16px;
}

/* セクション */
#left-column {
  width: 180px;
  flex-shrink: 0;
  order: 1;
}
#main-column {
  flex-grow: 1; 
  order: 2;
}
#middle-column {
  flex-grow: 1; 
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  grid-auto-rows: min-content;
  order: 2;
}
#right-column {
  width: 200px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 10px; row-gap: 10px;
  grid-auto-rows: min-content;
  font-size: 0.9rem;
  order: 3;
}

/* 左カラム */
#left-column ul {
  margin: 0; padding: 0;
  list-style: none;
}
#left-column li {
  margin: 0;
  display: inline;
  font-family: var(--std-font);;
  line-height: 1.5;
  font-size: 0.95rem;
}
#left-column li a {
  display: block;
  padding: 5px 5px 5px 20px;
  border-left: solid 5px #ebebeb;
  border-top: solid 1px #c8c8c8;
  background: #ebebeb;
  text-decoration: none;
  font-weight: normal;
  color: #222;
  transition: .2s;
}
#left-column a:hover {
  border-left: solid 5px #afafaf;
  background: #dcdcdc;
  color: black;
}
#left-column .selected {
  display: block;
  padding: 5px 5px 5px 20px;
  border-left: solid 5px #afafaf;
  border-top: solid 1px #c8c8c8;
  background: #dcdcdc;
  font-weight: normal;
}
#left-column .left-navheader-first {
  display: block;
  margin-bottom: 12px; padding: 5px 5px 5px 10px;
  background: #dcdcdc;
  text-decoration: none;
  font-weight: bold;
}
#left-column .left-navheader {
  display: block;
  margin-top: 12px; padding: 5px;
  border-left: solid 5px #ebebeb;
  background: #dcdcdc;
  text-decoration: none;
  font-family: var(--header-font);
  font-size: 1rem;
  font-weight: bold;
}

/* ボックスタイトル */
.middle-title {
  padding: 6px;
  font-family: var(--header-font);
  font-weight: bold;
  border-radius: 8px 8px 0 0;
}
.middle-title.top {
  background: #c8f0c4;
}
.middle-title.grey {
  background: #dcdcdc;
}
.middle-title.blue {
  background: #bbd3f7;
}
.middle-title.yellow {
  background: #ffec80;
}
.middle-title.green {
  background: #c4dd6c;
}
.middle-title.orange {
  background: #ffdba0;
}
.middle-title.cream {
  background: #fcf4d8;
}

/* ボックス */
.middle-box {
//  border: 1px solid white;
  border-radius: 8px;
//  border: 1px solid #e5e7eb;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
  transition: .2s;
}
.middle-box:hover {
  transform: scale3d(1.01, 1.01, 1.01);
  box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2);
}

.middle-box.wide {
  grid-column-start: 1;
  grid-column-end: 3;
}
.middle-box.top {
  background: #E0FFE5;
}
.middle-box.cream {
  background: #fefaec;
}
.middle-box.yellow {
  background: #FFF0AA;
}
.middle-box.blue {
  background: #E2EEFC;
}
.middle-box.green {
  background: #E0F4B5;
}
.middle-box.orange {
  background: #FFF0C8;
}
.middle-box.red {
  background: #FFDBDB;
}
.middle-box.white {
  
}

/**************************/
/* テキストヘッダーと段落 */
/**************************/
.middle-box p {
  margin: 5px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.middle-box p.c {
  text-align: center;
}

/************************/
/***     右カラム     ***/
/************************/
.right-title {
  padding: 6px 4px;
  font-family: var(--header-font);
  font-weight: bold;
}
.right-title.grey {
  background: linear-gradient(to bottom, #f4f4f4, #d4d4d4);
}
.right-title.blue {
  background: linear-gradient(to bottom, #eef2f7, #c0d7f7);
}
.right-title.yellow {
  background: linear-gradient(to bottom, #fff7cc, #f7e168);
}
.right-title.green {
  background: linear-gradient(to bottom, #edffae, #cae276);
}
.right-title.red {
  background: linear-gradient(to bottom, #ffdfdf, #ffb7b7);
}
.right-title.orange {
  background: linear-gradient(to bottom, #fff4d8, #ffdba0);
}

.right-box {
  padding: 3px;
  border: solid 1px #ccc;
}
.right-box.white {
  
}
.right-box.blue {
  background: #E2EEFC;
}
.right-box.yellow {
  background: #FFF0AA;
}
.right-box.green {
  background: #E0F4B5;
}
.right-box.red {
  background: #FFDBDB;
}
.right-box.orange {
  background: #fff0c8;
}
.right-box p {
  line-height: 1.4;
  margin: 4px 0;
}

a.card {
  display: block;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: .2s;
}
a.card:hover {
  border-color: #666;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}
a.card p.go {
  color: #022eb0;
  text-decoration: underline;
}
a.card:hover p.go {
  color: #c63;
}

p.go {
  padding-left: 14px;
  background: url(../img/ic_ar2.gif) no-repeat 0 1px;
}

/*******************/
/***  フッター   ***/
/*******************/
#credit, footer {
  clear: both;
  margin: 1rem 0; padding: 4px;
  border-top: 1px solid #999;
  text-align: center;
  font-size: 80%;
}

/**********************/
/***     その他     ***/
/**********************/
form { margin: 0px; }
input, select, button {
    font-family: var(--std-font);
    font-size: 16px;
}
select {
  padding-left: 6px;
  height: 36px;
  border: 1px solid #999;
  border-radius: 6px;
  background: linear-gradient(to bottom, white, #ececec);
}
select:hover {
  border: 1px solid #222;
  background: linear-gradient(to bottom, #f8f8f8, #e4e4e4);
}
button {
  margin-left: 4px;
  padding: 0px 10px;
  height: 36px;
  border: 1px solid gray;
  border-radius: 6px;
  background: linear-gradient(to bottom, white, #ececec);
  cursor: pointer;
}
button:hover {
  background: linear-gradient(to bottom, #f8f8f8, #e4e4e4);
}
label, input[type="checkbox"] {
  cursor: pointer;
}

.side_ad {
  margin: 1rem 0;
  text-align: center;
}
#bottom_ad {
  clear: both;
  margin: 1rem 0; padding: 4px;
  border-top: 1px dashed #999;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.8;
}
.ads-bottom {
  display: none;
  margin-top: 1.5rem;
  text-align: center;
}
.ads_bottom {
  margin-top: 1.5rem;
  padding-top: 1rem;
  width: 100%;
  height: 90px;
  border-top: 1px dashed #999;
  clear: both;
}

/* レスポンシブ */
@media (max-width: 1070px) {
  #wrap {
    padding: 0 8px 1rem;
    box-shadow: none;
  }
}

@media screen and (max-width: 768px) {
  #wrap, .header-logo, #main-column, #middle-column, #right-column {
    width: 100%; margin: 0; padding: 0;
  }
  body { background: initial; }
  #main { flex-wrap: wrap; }
  #main-column, #middle-column, #right-column {
    padding: 0 8px;
  }
  #middle-column { order: 1; }
  #left-column, #bottom_ad { display: none; }
  #right-column {
    grid-template-columns: 1fr 1fr;
    margin-top: 1rem;
    order: 2;
  }
  header nav ul {
    flex-wrap: wrap;
  }
  header nav li {
    width: 25%;
  }
  header nav li:nth-of-type(-n+4) a {
    border-bottom: solid 1px #9b9;
  }
  header nav li:nth-of-type(4) a {
    border-right: none;
  }
  .pc-only { display: none; }
  .ads-bottom { display: block; }
  .ads_bottom { padding: 1rem 8px 0; width: calc(100% - 16px); height: 50px; }
  .ad-sidebar { display: none; }
}
@media (max-width: 523px) {
  #middle-column {
    display: flex;
    flex-direction: column;
    row-gap: 10px; 
  }
}