@charset "utf-8";
/* CSS Document */

/*##################################################################
　　　基本前提
##################################################################*/

html {
  height: 100%;
  font-size: 62.5%; /* --------- 62.5% = 16px; → 1.6rem --------- */
}

body {
  background: #666666;
  font-family: NotoSansJP-Medium-subset, sans-serif; /* ■■■ 変更箇所：基本フォント種類 ■■■ */
  font-weight: 400; /* ■■■ 変更箇所：基本フォントウェイト（300・400・500 + bold） ■■■ */
  color: #474747; /* ■■■ 変更箇所：基本フォント色 ■■■ */
  line-height: 20px;
  text-size-adjust: 100%; /* --------- ★スマホ横向きでの崩れ対策★ --------- */
  -webkit-text-size-adjust: 100%; /* --------- ★スマホ横向きでの崩れ対策★ --------- */
  box-shadow: 0px 0px 0px 0px #f00014 inset; /* --------- ★背景画像のスライドショーに隙間を挿入可★ --------- */
  word-wrap: break-word; /* --------- ★テキストを折り返す★ --------- */
  height: 100%;
}

a {
  text-decoration: none;
}

/* ◆◇◆◇◆ GoogLike ScrollBar（スクロールバーを常に表示） ◆◇◆◇◆ */
::-webkit-scrollbar {
  width: 14px;
  height: 8px;
  background-color: rgba(0, 0, 0, 1);
}
::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px #fff solid;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

/* ◆◇◆◇◆ 余白と枠を横幅高さに含める（全ての要素） ◆◇◆◇◆ */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* ◆◇◆◇◆ micro clearfix ◆◇◆◇◆ */
/* For modern browsers */
.cf:before,
.cf:after {
  content: '';
  display: table;
}

.cf:after {
  clear: both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
  zoom: 1;
}

/* ◆◇◆◇◆ LOGOマークやイメージ画像（拡大縮小） ◆◇◆◇◆ */
#img-box img {
  width: 100%;
  vertical-align: bottom; /* --------- ★画像の下にできる隙間対策★ --------- */
}

/*##################################################################
　　　基本構造
##################################################################*/

#maincontent {
  /* --------- flexbox styles --------- */
  display: flex;
  flex-direction: column;
  align-items: center; /* --------- PCサイズでの横幅上限設定のため（中央寄せ） --------- */
  min-height: 100vh;
  min-width: 300px;
  z-index: 5;
  width: 100%;
}

/* ■■■ 変更箇所：全体背景網掛け.dot種類等 ■■■ */
.dot {
  position: relative;
  z-index: 4;
  background: url(../img/dot.png) repeat;
}

.wrap_header-main-aside {
  width: 100%;
  max-width: 1300px;
} /* --------- PCサイズでの横幅上限設定のため --------- */

.area_outer {
  /* --------- flexbox styles --------- */
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: start;
  line-height: 20px;
  color: #333333;
  background-color: rgba(91, 245, 44, 0); /* --------- ★★★★あとで消す★★★★ --------- */
}

.area_inner {
  /* --------- flexbox styles --------- */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: rgba(10, 10, 10, 0.3); /* ■■■ 変更箇所：エリア背景色（透過） ■■■ */
  line-height: 20px;
  color: #666666;
}

.inner {
  border-radius: 0;
  line-height: 20px;
  color: #666666;
  background: rgba(255, 255, 255, 0.5); /* ■■■ 変更箇所：エリア背景色（透過） ■■■ */
}

/* ■■■ 変更箇所：基本テキストエリアの設定等 ■■■ */
.text {
  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
  width: 100%;
  padding-left: 4%;
  padding-right: 7%;
  padding-bottom: 2%;
  color: #474747;
  line-height: clamp(17px, 1.9vw, 20px);
  font-size: 1.3rem;
}

/* ◆◇◆◇◆ サイズ・余白等の調整（汎用） ◆◇◆◇◆ */
.w100 {
  width: 100%;
}

.w95 {
  width: 95%;
}

.w80 {
  width: 80%;
}

.w50 {
  width: 50%;
}

.w30 {
  width: 30%;
}

.w20 {
  width: 20%;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.right {
  display: flex;
  justify-content: flex-end;
}

.margin-bottom15 {
  margin-bottom: 1.5%;
}

.margin-right10 {
  margin-right: 1%;
}

/* --------- div内を非表示 --------- */
.clear {
  display: none;
}

/* --------- コンテンツ背景色を透明化 --------- */
.no-color {
  background: rgba(255, 255, 255, 0);
}

/* --------- 空白を挿入 --------- */
.space01 {
  background-size: auto auto;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  height: 20px;
}

@media only screen and (max-width: 959px) {
  /* ■■■ 変更箇所（中画面以下）：基本テキストエリアの設定等 ■■■ */
  .text {
    font-size: 1.3rem;
  }

  #maincontent {
    float: right; /* --------- スライドナビの右展開化に伴い追記 --------- */
  }
}

@media only screen and (max-width: 499px) {
  /* ■■■ 変更箇所（小画面以下）：基本テキストエリアの設定等 ■■■ */
  .text {
    font-size: 1.2rem;
  }
}

/*##################################################################
　　　ヘッダー（.header）
##################################################################*/

.header {
  /* --------- flexbox styles --------- */
  justify-content: space-between;
  align-content: end;
  align-items: center;
  color: none;
  background-color: transparent;
  border-radius: 0px;
  border: 0px;
  padding-left: 5%;
  padding-right: 5%;
}

/* ■■■ 変更箇所：.logoサイズ等 ■■■ */
.logo {
  width: 25%;
  max-width: 260px;
  min-width: 200px;
  overflow: hidden;
  padding-bottom: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}

@media only screen and (max-width: 959px) {
  .header {
    /* --------- flexbox styles --------- */
    flex-wrap: nowrap; /* --------- アイテム（メニューボタン）を折り返さない --------- */
  }

  /* ■■■ 変更箇所（中画面以下）：.logoサイズ等 ■■■ */
  .logo {
    padding-bottom: 0px;
  }
}

/*##################################################################
　　　メイン（.main）
##################################################################*/

.wrap_main {
  /* --------- flexbox styles --------- */
  display: flex;
  align-items: flex-start;
  flex-grow: 1; /* --------- header & footer を最上下に固定 --------- */
  padding-left: 5%;
  padding-right: 5%;
  overflow: hidden; /* --------- 子要素のmarginはみ出し対策 --------- */
}

.main {
  margin-left: 1%;
  margin-bottom: 2%;
  width: 80%;
}

.inner_main1 {
  padding: 1.5%;
  margin-right: 1%;
  overflow: hidden; /* --------- ★★★2024/1/17追記★★★ --------- */
}

.inner_main2 {
  padding: 1.5%;
  padding-bottom: 0%;
  overflow: hidden; /* --------- ★★★2024/1/17追記★★★ --------- */
}

@media only screen and (max-width: 959px) {
  .wrap_main {
    /* --------- flexbox styles --------- */
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .main {
    width: 100%;
    margin-left: 0%;
  }
}

/*##################################################################
　　　アサイド（.aside）
##################################################################*/

.aside {
  /* --------- flexbox styles --------- */
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-evenly;
  flex-direction: column;
  width: 20%;
}

.inner_aside1 {
  padding: 5%;
}

.inner_aside2 {
  background: rgba(10, 10, 10, 0.3); /* ■■■ 変更箇所：エリア背景色（透過） ■■■ */
  padding: 1.5%;
  margin-bottom: 5%;
}

.margin-fix_inner_aside2 {
  margin-bottom: 0%;
}

.padding_aside {
  padding-right: 1%; /* --------- メイン（.main）の右端と揃える --------- */
  padding-left: 0%;
  padding-top: 0%;
  padding-bottom: 5%; /* --------- フッター（.footer）間の余白 --------- */
}

.aside-img {
  margin: 5%;
  padding: 0%;
}

/* ■■■ 変更箇所：アサイド・タイトルのフォント設定等 ■■■ */
.aside_text h3 {
  font-size: 1.2rem;
  margin-bottom: 3px;
  line-height: 1.5rem;
  color: #ffffff;
  font-weight: 500;
  word-break: break-all;
}

/* ■■■ 変更箇所：アサイド・文章のフォント設定等 ■■■ */
.aside_text p {
  font-size: 1.2rem;
  margin-bottom: 3px;
  line-height: 1.5rem;
  color: #cacaca;
  font-weight: 300;
}

@media only screen and (max-width: 959px) {
  .aside {
    width: 100%;
    margin: 0%;
    margin-bottom: 1%;
  }

  .inner_aside1 {
    padding: 1.5%;
  }

  .inner_aside2 {
    /* --------- flexbox styles --------- */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-bottom: 1%;
    padding: 0%; /* --------- .aside-imgのmarginに依存 --------- */
  }

  .margin-fix_inner_aside2 {
    margin-bottom: 0%;
  }

  .aside-img {
    width: 23%;
    min-width: 130px;
    margin: 1%;
  }

  .aside_text {
    /* --------- flexbox styles --------- */
    justify-content: start;
    width: 70%;
    text-align: start;
    margin-bottom: auto; /* --------- .aside-imgの中央寄せに対して上寄せ --------- */
    padding-left: 3%;
    padding-right: 0%;
    padding: 1%;
  }

  .aside_text h3 {
    line-height: 1.6rem;
    margin-bottom: 2px;
  }

  .aside_text p {
    line-height: 1.6rem;
  }

  .mobile {
    display: none;
  } /* --------- モバイルサイズで非表示にするasideバナー --------- */
}

@media only screen and (max-width: 499px) {
  .aside-img {
    width: 33%;
    margin: 1%;
  }

  /* ■■■ 変更箇所（小画面以下）：アサイド・タイトルのフォント設定等 ■■■ */
  .aside_text h3 {
    font-size: 1.1rem;
  }

  /* ■■■ 変更箇所（小画面以下）：アサイド・文章のフォント設定等 ■■■ */
  .aside_text p {
    font-size: 1.1rem;
  }
}

/*##################################################################
　　　フッター（.footer）
##################################################################*/

.footer {
  margin-top: auto;
  margin-left: 0%;
  margin-right: 0%;
  margin-bottom: 0%;
  height: 80px;
  width: 100%;
  background-color: #292929; /* ■■■ 変更箇所：フッター背景色 ■■■ */
}

.inner_footer {
  align-items: end;
  text-align: right;
  border-top: 1.5px solid #ccc; /* ■■■ 変更箇所：フッター上辺ライン色 ■■■ */
}

/* ■■■ 変更箇所：フッターのフォント設定等 ■■■ */
.inner_footer a {
  font-family: TitilliumWeb-Regular, Arial;
  font-size: 1.2rem;
  text-decoration: none;
  color: #fff;
  font-weight: normal;
  display: block;
  margin-right: 4%;
  margin-top: 40px;
}

@media only screen and (max-width: 959px) {
  .footer {
    height: 70px;
  }

  /* ■■■ 変更箇所（中画面以下）：フッターのフォント設定等 ■■■ */
  .inner_footer a {
    font-size: 1.1rem;
    margin-right: 3%;
    margin-top: 30px;
  }
}


/*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*
　　　背景画像のスライドショー
*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*■*/

#supersized-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  text-indent: -999em;
  background: url(/img/progress.gif) no-repeat center center;
}

#supersized {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: -999;
  height: 100%;
  width: 100%;
}

#supersized img {
  width: auto;
  height: auto;
  position: relative;
  display: none;
  outline: none;
  border: none;
}

#supersized.speed img {
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -moz-crisp-edges;
}

#supersized.quality img {
  -ms-interpolation-mode: bicubic;
  image-rendering: optimizeQuality;
}

#supersized li {
  display: block;
  list-style: none;
  z-index: -30;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #111;
}

#supersized a {
  width: 100%;
  height: 100%;
  display: block;
}

#supersized li.prevslide {
  z-index: -20;
}

#supersized li.activeslide {
  z-index: -10;
}

#supersized li.image-loading {
  background: #111 url(/img/progress.gif) no-repeat center center;
  width: 100%;
  height: 100%;
}

#supersized li.image-loading img {
  visibility: hidden;
}

#supersized li.prevslide img,
#supersized li.activeslide img {
  display: inline;
}