html {
  height: 100%; 
}

body {
  -webkit-text-size-adjust: 100%;
  background-color: #fff;
  color: #3e3e3e;
  font-family: "montserrat", "source-han-sans-japanese", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 12px;
  line-height: 170%;
  text-align: left;
  margin: 0;
  padding: 0;
  min-width: 1000px;
}

p {
  margin-right: 15px;
}

a {
  text-decoration: underline;
  color: #827a73;
}

a:hover {
  text-decoration: underline;
  color: #d7b4a3;
}



/* header */

header {
  height: 7.4em;
  background-color: #fff;
}

.header_box {
  position: relative;
  background-color: #6daddb;
  background-image: linear-gradient(315deg, #6daddb 0%, #313131 74%);
  height: 2.4em;
}

.header_box .box_imageRight {
  position: absolute;
  right: 1em;
  margin-top: 0.3em;
  font-size: 11px;
  color: #fff;
  text-decoration: none;
}

.header_box .box_imageRight a {
  text-decoration: underline;
  color: #fff;
}

.header_box .box_imageRight a:hover {
  text-decoration: underline;
  color: #ccc;
}

.header_box2 {
  position: relative;
  display: flex;
  width: 1000px;
  height: 5em;
  margin: 0 auto;
}

.header_box2 .box_imageLeft {
  position: absolute;
  margin-top: 0.6em;
  margin-left: 1px;
}

.header_box2 .box_Right {
  position: absolute;
  margin-top: 2.1em;
  margin-left: 848px;
  text-align: right;
}

.header_box3 {
  position: relative;
  height: 1px;
  border-bottom: 1px solid #fff;
}



/* footer */

footer {
  height: 3.3em;
  background-color: #6daddb;
  background-image: linear-gradient(315deg, #6daddb 0%, #313131 74%);
}

.footer_box {
  position: relative;
  background-color: #e2dfd6;
}

.footer_box .box_imageRight {
  position: absolute;
  right: 1em;
  margin: 1em;
  font-family: "p22-underground", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 11px;
  color: #fff;
}

.footer_box .box_imageRight .lastud {
  font-family: "montserrat", "source-han-sans-japanese", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 10px;
  line-height: 170%;
}



/* navigation */

nav {
  background: #fff;
  width: 1000px;
  margin: 0 auto;
}

.navi_menu {
  display: flex;
  width: 1000px;
  align-items: center;
}

.navi_title,
.navi_title_gld {
  flex: 1;
  display: inline-block;
  position: relative;
  font-family: "montserrat", "source-han-sans-japanese", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 12px;
  font-feature-settings: "palt";
  letter-spacing: 0.01em;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  color: #8a6d4d;
  outline: none;
  overflow: hidden;
  transition: all .2s;
}

.navi_title {
  width: calc(100% / 9);
  height: 33px;
  margin: 0 0 2px 0;
  background: linear-gradient(to bottom, #efefef, #fff);
  border-top: 1px solid #444;
  border-left: 1px solid #ccc;
}

.navi_title:nth-child(1) {
  border-left: none;
}

.navi_title:hover {
  color: #8a6d4d;
  border-top: 1px solid #444;
  border-left: 1px solid #ccc;
  text-decoration: none;
}

.navi_title:hover:nth-child(1) {
  border-left: none;
}

.navi_title a:hover {
  color: #8a6d4d;
  text-decoration: none;
  border-top: 1px solid #444;
  border-left: 1px solid #ccc;
}

.navi_title a:hover:nth-child(1) {
  border-left: none;
}

.navi_title_gld {
  height: 32px;
  margin: 0;
  background-color: #eee;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-image: linear-gradient(to bottom, #ccc, #eee) 1;
}

.navi_title_gld:nth-child(1) {
  border-left: none;
}

.navi_title_gld:nth-child(3) {
  flex: 7;
}

.navi_title_gld:hover {
  color: #8a6d4d;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  text-decoration: none;
}

.navi_title_gld:hover:nth-child(1) {
  border-left: none;
}

.navi_title_gld a:hover {
  color: #8a6d4d;
  text-decoration: none;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.navi_title_gld a:hover:nth-child(1) {
  border-left: none;
}

.navi_title span,
.navi_title_gld span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all .5s;
  display: block;
  white-space: nowrap;
}

.navi_title span:nth-child(2),
.navi_title_gld span:nth-child(2) {
  opacity: 0;
}

.navi_title:hover span:nth-child(1),
.navi_title_gld:hover span:nth-child(1) {
  opacity: 0;
}

.navi_title:hover span:nth-child(2),
.navi_title_gld:hover span:nth-child(2) {
  opacity: 1;
}



/* content */

.container {
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}

.detail p {
  margin-left: 10px;
}



/* top_page */

.box_toppage {
  display: grid;
  grid-template-columns: 776px 224px;
  grid-template-rows: repeat(7, 255px);
  margin: 0 0 2px 0;
  padding: 0;
  gap: 0;
}

.div1 { grid-area: 1 / 1 / 3 / 2; }

.div2 {
  grid-area: 3 / 1 / 8 / 2;
  font-size: 14px;
  line-height: 170%;
  text-align: left;
  margin: 0;
  vertical-align: top;
}

.div3 { grid-area: 1 / 2 / 2 / 3; }
.div4 { grid-area: 2 / 2 / 3 / 3; }
.div5 { grid-area: 3 / 2 / 4 / 3; }
.div6 { grid-area: 4 / 2 / 5 / 3; }
.div7 { grid-area: 5 / 2 / 6 / 3; }
.div8 { grid-area: 6 / 2 / 7 / 3; }
.div9 { grid-area: 7 / 2 / 8 / 3; }

.div10 {
  grid-area: 8 / 2 / 9 / 3;
  margin: 0;
  padding: 0;
  width: 224px;
  height: 255px;
}

.box_news_mds_i {
  width: 724px;
  padding: 8px;
  margin: 0;
  border-bottom: 1px solid #8a6d4d;
}

.box_news_mds_i p {
  font-family: "montserrat", "source-han-sans-japanese", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-feature-settings: "palt";
  font-size: 20px;
  line-height: 170%;
  color: #8a6d4d;
  margin: 0;
  padding: 0;
}

.whatsnew {
  display: grid;
  grid-template-columns: 130px 611px;
  margin: 0 5px;
  padding: 0;
  gap: 10px;
}

.whatsnew p {
  font-size: 12px;
  font-weight: 300;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  margin-left: 5px;
}

.index_even_d,
.index_even,
.index_even_w {
  margin: 0 10px 0 -10px;
  padding-left: 10px;
}

.index_even_d {
  background: #f8f8f8;
  width: 140px;
}

.index_even {
  background: #f8f8f8;
  width: 595px;
}

.index_even_w {
  width: 595px;
}



/* last_update */

.update {
  font-size: 10px;
  line-height: 170%;
  text-align: right;
  margin: 10px;
}



/* back_to_top */

#page_top {
  position: fixed;
  right: 5px;
  bottom: 45px;
  width: 45px;
  height: 45px;
  background: #876d4a;
  opacity: 0.6;
  border-radius: 50%;
}

#page_top a {
  position: relative;
  display: block;
  width: 45px;
  height: 45px;
  text-decoration: none;
}

#page_top a::before {
  font-family: 'Font Awesome 6 Pro';
  font-weight: 900;
  content: '\f102';
  font-size: 20px;
  color: #fff;
  position: absolute;
  width: 20px;
  height: 20px;
  inset: 0;
  top: -1px;
  margin: auto;
  text-align: center;
}



/* font-size, colour_utilities */

.mds_jp,
.mds_jpw,
.mds_en,
.fpx21b,
.fpx18b_en,
.fpx13b,
.fpx12l,
.fpx12lw,
.fpx11l,
.fpx11r,
.fpx11copy,
.fpx08r {
  font-feature-settings: "palt";
}

.mds_jp {
  font-weight: 500;
  letter-spacing: 0.02em;
}

.mds_jpw {
  font-weight: 500;
  letter-spacing: 0.08em;
}

.mds_en {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.fpx21b {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.fpx18b_en {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.fpx13b {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.fpx12l {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.05em;
}

.fpx12lw {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.08em;
}

.fpx11l {
  font-size: 11px;
  font-weight: 300;
}

.fpx11r {
  font-size: 11px;
  font-weight: 300;
  text-align: right;
  padding-right: 5px;
}

.fpx11copy {
  font-size: 11px;
  font-weight: 300;
  text-align: right;
  padding-right: 5px;
  margin-top: -5px;
}

.fpx08r {
  font-size: 8px;
  font-weight: 300;
  text-align: right;
  padding-right: 0;
}

.clr_gold { color: #876d4a; }
.clr_blue { color: #083388; }
.clr_note { color: #bab2ac; }
.clr_grey { color: #827a73; }

.fpx11i_red {
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  font-feature-settings: "palt";
  color: #f05c45;
  vertical-align: top;
}

.fpx9i_red {
  font-size: 9px;
  font-weight: 400;
  font-style: italic;
  font-feature-settings: "palt";
  color: #f05c45;
  vertical-align: top;
}

.fpx6_sup {
  font-size: 6px;
  font-weight: normal;
  vertical-align: top;
}

.fpx6b_sup {
  font-size: 6px;
  font-weight: bold;
  vertical-align: top;
}

.fpx8_sup {
  font-size: 8px;
  font-weight: normal;
  vertical-align: top;
}

.fpx8b_sup {
  font-size: 8px;
  font-weight: bold;
  vertical-align: top;
}



/* spacer */

.ml5  { margin-left: 5px; }
.ml8  { margin-left: 8px; }
.ml10 { margin-left: 10px; }

.top0   { margin-top: 0; }
.top2   { margin-top: 2px; }
.top10  { margin-top: 10px; }
.top12  { margin-top: 12px; }
.top15  { margin-top: 15px; }
.top20  { margin-top: 20px; }
.top23  { margin-top: 23px; }
.top30  { margin-top: 30px; }
.top45  { margin-top: 45px; }
.top60  { margin-top: 60px; }
.top80  { margin-top: 80px; }
.top90  { margin-top: 90px; }
.top120 { margin-top: 120px; }
.top150 { margin-top: 150px; }
.top180 { margin-top: 180px; }
.top240 { margin-top: 240px; }



/* outline */

.area_outline {
  border: 1px solid #fff;
  border-bottom: transparent;
  border-right: transparent;
}

.area_outline_top {
  border: 1px solid #fff;
  border-top: transparent;
  border-bottom: transparent;
  border-right: transparent;
}

.area_outline img,
.area_outline_top img {
  display: block;
}