@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
/* =========================================================初期設定 */ :root {
 --header-height: 73px;
 --header-height_sp: 50px;
 --basic-width: 1200px;
 --basic-s-width: 1040px;
 --basic-padding: 2em;
 --basic-sp-padding: 1em;
}
html {
 font-size: 62.5%;
}
body {
 color: #555;
 background-color: #fff;
 font-family: 'Noto Sans JP', "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
 font-size: 1.7rem;
 font-feature-settings: "palt";
 letter-spacing: .5px;
 margin: 0;
 padding: 0;
 animation: fadeIn 1.5s ease-in-out forwards;
 &:has(nav.is-open), &.search-open {
  overflow: hidden;
 }
}
a:hover {
 opacity: .8;
}
img {
 width: 100%;
 height: auto;
}
::placeholder {
 font-family: 'Noto Sans JP', sans-serif;
}
h1 {
 font-size: 3em;
}
h2 {
 font-size: 2.5em;
 color: #0066cc;
}
h3 {
 font-size: 2em;
}
table {
 width: 100%;
 border-collapse: collapse;
 th {
  padding: 10px 15px;
  border: 1px solid #ddd;
  background: #f4f4f4;
  font-weight: bold;
  text-align: center;
 }
 td {
  padding: 10px 15px;
  border: 1px solid #ddd;
  background: #ffffff;
 }
}
/*JDL検索追加調整*/
search-dialog {
 .ad {
  border: 1px solid #ccc;
  padding: .5em;
  .url {
   font-size: 0.7em;
   color: #00801e;
  }
  h3 {
   font-size: 1.0em;
   text-decoration: underline;
   a {
    text-decoration: underline;
   }
  }
  .adivision {
   display: flex;
   gap: 7px;
   li:first-child {
    width: 70px;
   }
  }
 }
 .search-modal a {
  text-decoration: none;
 }
 recommended-keywords hr {
  display: none;
 }
}
.search-bar a {
 text-decoration: none;
 line-height: 1;
 &.search-bar-clear {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
 }
}
p.notes {
 font-size: .8em;
 font-weight: normal;
 padding-left: 1em;
 text-indent: -1em;
}
.wrapper {
 display: flex;
 flex-direction: column;
 min-height: 100dvh;
}
header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 border-bottom: 3px solid #ddd;
 z-index: 999;
 position: relative;
 background: #fff;
 position: sticky;
 top: 0;
 .headerNavBtn {
  color: #fff;
  font-size: 12px;
  background: #0066cc;
  padding: 15px;
  height: 72px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  cursor: pointer;
  line-height: 1;
  gap: 8px;
 }
 .l-header_logo {
  max-width: 100px;
 }
 a {
  color: #000;
  text-decoration: none;
 }
 a:hover {
  opacity: .8;
 }
 p.l-header_sub {
  font-weight: 600;
  white-space: nowrap;
 }
 .l-header_inr:first-child {
  display: grid;
  grid-template-columns: 40% 1fr;
  width: 100%;
  align-items: center;
  max-width: fit-content;
  gap: .5em;
  padding-left: .5em;
  font-size: clamp(.76em, 1.6vw, 1em);
 }
 .l-header_inr:last-child {
  display: flex;
  align-items: center;
 }
 .search-bar .search-bar-submit-container > a {
  display: grid;
  background: #e5e5e5;
  width: 72px;
  aspect-ratio: 1;
  place-content: center;
 }
 search-bar .search-bar-submit-container {
  padding: 0;
 }
 .search-modal .search-bar-submit-container a {
  aspect-ratio: inherit !important;
  background: transparent !important;
 }
 .icon-sch {
  max-width: 72px;
 }
 .headerNavBtn > span {
  font-family: monospace;
  text-align: center;
  font-weight: bold;
 }
 .headerNavBtn .Nav_txt-close {
  display: none;
 }
 .headerNavBtn.is-open .Nav_txt-open {
  display: none;
 }
 .headerNavBtn.is-open .Nav_txt-close {
  display: inline;
 }
 .l-headerBtn-gNav_ico {
  position: relative;
  width: 27px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  span {
   position: absolute;
   left: 0;
   width: 100%;
   height: 2px;
   background-color: #fff;
   transition: all 0.3s ease-in-out;
  }
  span:nth-child(1) {
   top: 0;
  }
  span:nth-child(2) {
   top: 50%;
  }
  span:nth-child(3) {
   top: 100%;
  }
 }
 /* ボタンが開いた時（is-open）の「×」の形状と色の変化 */
 .headerNavBtn.is-open .l-headerBtn-gNav_ico span {
  background-color: #fff;
  &:nth-child(1) {
   top: 11px;
   transform: rotate(-45deg);
  }
  &:nth-child(2) {
   opacity: 0;
  }
  &:nth-child(3) {
   top: 11px;
   transform: rotate(45deg);
  }
 }
}
body#toppage {
 header {
  .l-header_inr:first-child {
   grid-template-columns: 1fr;
  }
  .l-header_inr:last-child {
   gap: 2em;
   .l-header_subright {
    font-weight: 600;
    font-size: .8em;
    display: flex;
    gap: 2em;
   }
  }
 }
}
nav#global-nav {
 position: fixed;
 top: -100%;
 left: 0;
 width: 100%;
 height: calc(100vh - var(--header-height));
 background-color: #0083D1;
 color: #fff;
 z-index: 998;
 display: flex;
 justify-content: center;
 align-items: flex-start;
 visibility: hidden;
 overflow: hidden;
 transition: top 0.4s ease-in-out, visibility 0.4s ease-in-out;
 transition-delay: 0s, 0.4s;
 &.is-open {
  top: var(--header-height);
  visibility: visible;
  overflow-y: auto;
  transition-delay: 0s, 0s;
 }
 .l-gnav_inr {
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-template-areas:
   "nav1 nav2"
   "ot ot";
  gap: 10px;
  width: 100%;
  max-width: 1200px;
  padding: var(--basic-padding);
  line-height: 2;
  a {
   color: #fff;
   text-decoration: none;
  }
  ul.l-gnav_ul:not(.footerbox) {
   display: flex;
   flex-direction: column;
   gap: 1em;
   line-height: 1.4;
   font-weight: 700;
   > li > a:not(:has(img)) {
    display: block;
    text-decoration: none;
    border-left: 4px solid #fff;
    padding: 0 0 0 .5em;
    &.nolink {
     pointer-events: none;
    }
   }
   > li > a:has(img) {
    width: fit-content;
    display: block;
   }
   ul.l-gnav_subul {
    margin-left: .5em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    line-height: 1.3;
    padding: .4em;
    > li > a {
     font-size: .9em;
     font-weight: 400;
     line-height: 2;
     display: block;
    }
   }
  }
  div:has(> ul.l-gnav_ul.subbox) {
   display: flex;
   flex-direction: column;
   gap: 1em;
  }
  .mainbox {
   grid-area: nav1;
  }
  .subbox {
   grid-area: nav2;
  }
  .footerbox {
   grid-area: ot;
   display: flex;
   gap: 1em;
   justify-content: flex-end;
   border-top: 2px solid #fff;
   width: 100%;
   font-size: .9em;
   font-weight: 800;
  }
 }
}
nav#page-nav {
 background: #0086c6;
 position: sticky;
 top: 75px;
 z-index: 1;
 ul {
  display: flex;
  max-width: var(--basic-width);
  width: 100%;
  margin: auto;
  font-size: .9em;
  border-bottom: 1px solid #6facc9;
  li {
   flex: 1;
   a {
    display: grid;
    color: #fff;
    text-decoration: none;
    line-height: 1.2;
    place-content: center;
    text-wrap: balance;
    text-align: center;
    height: 100%;
    padding: .5em;
    &.current {
     background: #fff;
     color: #0086c6;
     font-weight: 600;
    }
   }
  }
 }
}
main {
 flex: 1;
 :is(h1, h2) {
  display: flex;
  flex-direction: column;
 }
 h1 {
  font-size: clamp(2em, 5vw, 4em);
  span.sub-title {
   font-size: clamp(.3em, 3.6vw, .5em);
   line-height: 1;
  }
 }
 .flash {
  animation-name: flash;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: 3;
 }
 #contents {
  max-width: var(--basic-width);
  margin: 0 auto;
  display: flex;
  gap: 2em;
  flex-direction: column;
  padding: var(--basic-padding);
  section {
   display: flex;
   flex-direction: column;
   gap: 2em;
  }
  h2 {
   font-size: clamp(2em, 3.6vw, 3em);
   text-align: center;
   span.sub-title {
    font-size: clamp(.5em, 3.6vw, .7em);
   }
  }
  article {
   display: flex;
   flex-direction: column;
   gap: .7em;
   h3 {
    font-size: clamp(1.1em, 3vw, 2em);
    border-bottom: 3px solid #0070ff;
    padding-bottom: .2em;
   }
   &.grid-container {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    margin: 0 auto;
    align-items: center;
    .text-content {
     display: flex;
     flex-direction: column;
     gap: 10px;
    }
    .img-content {
     display: grid;
     place-content: center;
     img {
      width: 100%;
      max-width: 350px;
      height: auto;
      object-fit: cover;
      display: block;
     }
    }
    &.rev {
     grid-template-columns: auto 1fr;
     .text-content {
      order: 2;
     }
     .img-content {
      order: 1;
     }
    }
   }
  }
  ul.grid-box {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 10px;
   text-align: center;
   li a {
    display: flex;
    flex-direction: column;
    gap: .3em;
    text-decoration: none;
    color: #555;
   }
  }
  #search-box {
   margin: 0 auto;
   max-width: 700px;
  }
 }
 section#top {
  background: #eee;
  min-height: 200px;
  background-image: url(../image/title_bkg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  > .top {
   max-width: var(--basic-width);
   margin: auto;
   display: grid;
   grid-template-columns: 1fr 40%;
   align-items: center;
   gap: 1em;
   padding: var(--basic-padding);
   h1 {
    gap: .2em;
   }
  }
 }
}
footer {
 .aside > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: 1200px;
  margin: 0 auto;
  font-size: clamp(.7em, 1.7vw, 1em);
 }
 .aside {
  background: #0066cc;
  a {
   color: #fff;
   display: grid;
   place-content: center;
   line-height: 3.5;
   text-decoration: none;
   font-weight: 600;
   &:hover {
    background: #007cf8;
   }
  }
  li a {
   position: relative;
  }
  li:not(:last-of-type) a::after {
   content: "";
   position: absolute;
   top: 50%;
   translate: 0 -50%;
   background: #fff;
   width: 1px;
   height: 20px;
   right: 0;
  }
 }
 .footer-box {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  font-size: .7em;
  align-items: center;
  a {
   color: #000;
   padding: 0 .5em;
  }
  ul.footer-txt {
   display: block;
   padding: .5em;
   list-style: none;
   text-align: center;
   li {
    display: inline;
    position: relative;
    &:not(:last-of-type)::after {
     content: "";
     width: 1px;
     height: 58%;
     background: #000;
     position: absolute;
     top: 50%;
     translate: 0 -50%;
    }
   }
  }
 }
}
body#toppage footer {
 border-top: 2px solid #555;
}
/* --- 動画再生ボタンのスタイル --- */
.btn-watch-video {
 position: relative;
 padding: 14px;
 background: linear-gradient(135deg, #ff4b2b, #ff416c);
 color: #ffffff;
 font-size: 1em;
 font-weight: bold;
 text-decoration: none;
 border-radius: 50px;
 box-shadow: 2px 2px 4px rgba(255, 65, 108, 0.35);
 transition: all 0.3s ease;
 cursor: pointer;
 width: 100%;
 max-width: 350px;
 text-align: center;
 margin: 0 auto;
}
&:hover .play-icon {
 transform: scale(1.1);
}
}
.play-icon {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 32px;
 aspect-ratio: 1;
 background-color: #ffffff;
 border-radius: 50%;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
 transition: transform 0.3s ease;
 position: absolute;
 top: 50%;
 translate: 0 -50%;
 &::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #ff416c;
  margin-left: 2px;
 }
}
.mfp-iframe-scaler {
 padding-top: 56.25% !important;
}
/*アニメーション*/
@keyframes fadeIn {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
@keyframes flash {
 0%, 100% {
  opacity: 1;
 }
 50% {
  opacity: 0;
 }
}
@media (max-width: 1200px) {
 footer {
  .footer-box {
   flex-direction: column;
   .others {
    text-align: center;
    order: 2;
   }
  }
 }
}
@media (max-width: 768px) {
 header {
  .headerNavBtn {
   font-size: 10px;
   height: 56px;
   .l-headerBtn-gNav_ico {
    width: 20px;
    height: 12px;
   }
   &.is-open {
    gap: 0;
   }
  }
  .icon-sch {
   max-width: 56px;
  }
  search-bar .search-bar-submit-container {
   width: 3.5em;
  }
  .search-bar .search-bar-submit-container > a {
   width: 56px;
   img.search-bar-submit {
    width: 22px;
   }
  }
 }
 nav#global-nav {
  height: calc(100vh - var(--header-height_sp));
  &.is-open {
   top: var(--header-height_sp);
  }
  .l-gnav_inr {
   grid-template-columns: 1fr;
   grid-template-areas:
    "nav1""nav2""ot";
   gap: 0;
   ul.l-gnav_ul:not(.footerbox) {
    gap: 0;
    > li > a:not(:has(img)) {
     display: block;
     text-decoration: none;
     border-left: 0;
     border-bottom: 1px solid #fff;
     padding: .2em;
     font-weight: 400;
     line-height: 2;
    }
    ul.l-gnav_subul {
     display: block;
     margin: 0;
    }
    .nolink {
     pointer-events: inherit !important;
    }
   }
   ul.l-gnav_ul.babox {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    max-width: 400px;
    margin: 10px auto;
    gap: 5px;
   }
   .has-sub {
    position: relative;
    ul.l-gnav_subul {
     > li > a {
      border-bottom: 1px solid #eee;
     }
    }
   }
   .has-sub > a {
    display: block;
    padding-right: 40px;
    position: relative;
    cursor: pointer;
   }
   .has-sub > a::after {
    content: '+';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1em;
    font-weight: bold;
   }
   .has-sub.is-active > a::after {
    content: '-';
   }
   ul.l-gnav_subul {
    height: 0;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: height 0.35s ease, padding 0.35s ease;
   }
   .has-sub.is-active > ul.l-gnav_subul {
    padding-top: 0.4em !important;
    padding-bottom: 0.4em !important;
   }
   .footerbox {
    font-weight: 500;
    flex-direction: column;
    gap: 0;
    a {
     display: block;
     border-bottom: 1px solid #fff;
    }
   }
  }
 }
 nav#page-nav {
  top: 59px;
  ul {
   font-size: .7em;
  }
 }
 main {
  #contents {
   padding: var(--basic-sp-padding);
   article {
    &.grid-container {
     grid-template-columns: 1fr;
     gap: 15px;
     &.rev {
      grid-template-columns: 1fr;
     }
    }
    .img-content {
     grid-row: 1;
    }
    .text-content {
     grid-row: 2;
    }
   }
  }
 }
}
@media (max-width: 640px) {
 nav#global-nav {
  .l-gnav_inr {
   padding: var(--basic-sp-padding);
  }
 }
 main {
  & section#top {
   > .top {
    grid-template-columns: 1fr;
    padding: var(--basic-sp-padding);
   }
  }
 }
}