@charset "UTF-8";
/*
**
template style
**
** reset
** web font
** overall
** header
** gnav
** contents
** main
** side
** topicpath
** footer
** fixed
**
*/
/*==================================================

** reset
==================================================*/
/*==================================================

fonts
==================================================*/
/*Safariでヒラギノ角ゴシックをきれいに表示させるCSS*/
/*
@font-face {
	font-family: sans-serif;
	src: local(HiraginoSans-W3);
	font-weight: normal;
	font-display: swap;
}
@font-face {
	font-family: sans-serif;
	src: local(HiraginoSans-W6);
	font-weight: bold;
	font-display: swap;
}
*/
@font-face {
  font-family: 'Hiragino Kaku Gothic Pro';
  src: local(HiraginoSans-W3);
  font-weight: normal;
  font-display: swap; }
@font-face {
  font-family: 'Hiragino Kaku Gothic Pro';
  src: local(HiraginoSans-W6);
  font-weight: bold;
  font-display: swap; }
@font-face {
  font-family: 'ヒラギノ角ゴ Pro W3';
  src: local(HiraginoSans-W3);
  font-weight: normal;
  font-display: swap; }
@font-face {
  font-family: 'ヒラギノ角ゴ Pro W3';
  src: local(HiraginoSans-W6);
  font-weight: bold;
  font-display: swap; }
@font-face {
  font-family: 'ヒラギノ角ゴ ProN W3';
  src: local(HiraginoSans-W3);
  font-weight: normal;
  font-display: swap; }
@font-face {
  font-family: 'ヒラギノ角ゴ ProN W3';
  src: local(HiraginoSans-W6);
  font-weight: bold;
  font-display: swap; }
@font-face {
  font-family: 'ＭＳ Ｐゴシック';
  src: local(HiraginoSans-W3);
  font-weight: normal;
  font-display: swap; }
@font-face {
  font-family: 'ＭＳ Ｐゴシック';
  src: local(HiraginoSans-W6);
  font-weight: bold;
  font-display: swap; }
@font-face {
  font-family: 'MS P Gothic';
  src: local(HiraginoSans-W3);
  font-weight: normal;
  font-display: swap; }
@font-face {
  font-family: 'MS P Gothic';
  src: local(HiraginoSans-W6);
  font-weight: bold;
  font-display: swap; }
@font-face {
  font-family: 'MS PGothic';
  src: local(HiraginoSans-W3);
  font-weight: normal;
  font-display: swap; }
@font-face {
  font-family: 'MS PGothic';
  src: local(HiraginoSans-W6);
  font-weight: bold;
  font-display: swap; }
/*==================================================

sectioning	
==================================================*/
/* Box sizing rules */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

/*	outline	*/
:where(html,
body) {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1; }

html {
  font-size: 62.5%; }

body {
  font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  overflow-wrap: anywhere;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased; }

:where(p,
blockquote,
address,
small,
dt,
dd,
li,
th,
td) {
  font-style: normal;
  line-height: 1.6;
  overflow-wrap: break-word; }

:where(div) {
  line-height: 1; }

:where(article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section) {
  display: block; }

/*	heading	*/
:where(h1,
h2,
h3,
h4,
h5,
h6) {
  margin: 0;
  padding: 0;
  vertical-align: top;
  font-weight: normal;
  font-size: 100%;
  line-height: 1.6;
  overflow-wrap: break-word; }

/*==================================================

link	
==================================================*/
:where(a) {
  color: inherit;
  text-decoration: inherit;
  cursor: pointer;
  text-decoration-skip-ink: auto;
  touch-action: manipulation; }

/*==================================================

content	
==================================================*/
/*	text	*/
:where(p,
blockquote) {
  margin: 0; }

/*	list	*/
:where(ol,
ul,
dl,
dt,
dd,
menu,
summary) {
  margin: 0; }

:where(ol,
ul,
menu,
summary) {
  padding: 0;
  list-style: none;
  list-style-position: inside; }

/*	table	*/
:where(table) {
  border-collapse: collapse; }

:where(th) {
  font-weight: normal; }

/*	embed	*/
:where(img,
svg,
video,
canvas,
audio,
iframe,
embed,
object,
figure,
picture) {
  display: block; }

:where(img,
svg,
video) {
  block-size: auto;
  max-inline-size: 100%; }

:where(img,
picture) {
  image-rendering: -webkit-optimize-contrast;
  border: 0;
  max-inline-size: 100%;
  max-block-size: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom; }

:where(img[src$=".svg"]) {
  width: 100%; }

:where(figure) {
  margin: 0;
  padding: 0; }

:where(iframe) {
  border: none;
  width: 100%;
  vertical-align: bottom; }

:where(video) {
  outline: none; }

:where(svg) {
  stroke: none;
  fill: currentColor; }

:where(svg):where(:not([fill])) {
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round; }

/*	semantics	*/
:where(ruby,
rt,
mark,) {
  margin: 0;
  padding: 0;
  line-height: 1; }

:where(small) {
  font-size: 100%; }

:where(em,
cite,
dfn,
i,
strong,
b) {
  font-style: normal;
  font-weight: normal; }

:where(ins,
del) {
  text-decoration: none; }

:where(q) {
  quotes: none; }

:where(sup) {
  vertical-align: super; }

:where(sub) {
  vertical-align: sub; }

:where(mark) {
  background: none; }

/**/
:where(pre,
code,
kbd,
samp) {
  display: block;
  font: inherit; }

/*==================================================

form
==================================================*/
:where(form) {
  margin: 0; }

:where(input,select,textarea,button) {
  -webkit-appearance: none;
  box-shadow: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  outline: none;
  color: inherit;
  touch-action: manipulation; }

:where(label,button,select) {
  cursor: pointer; }

:where(input[type="file"]) {
  cursor: auto; }

:where(input[type="file"])::-webkit-file-upload-button,
:where(input[type="file"])::file-selector-button {
  cursor: pointer; }

:where(fieldset) {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0; }

:where(textarea) {
  resize: vertical;
  vertical-align: bottom; }

:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])[disabled] {
  cursor: not-allowed; }

/*==================================================

** web font
==================================================*/
/*==================================================

** overall
==================================================*/
/*
*::selection {
	background:lighten($color-bk,20%);
	color:#fff;
}
*::-moz-selection {
	background: lighten($color-bk,20%);
	color:#fff;
}
*/
:where(html,body) {
  height: 100%;
  width: 100%; }

@media screen and (max-width: 960px) {
  html.is-gnavopen {
    overflow: hidden; } }

body {
  color: #222;
  position: relative;
  font-optical-sizing: auto; }

.wrap {
  position: relative;
  margin-inline: auto; }
  @media screen and (min-width: 961px) {
    .wrap {
      max-width: 1164px;
      padding-inline: 20px; } }
  @media screen and (max-width: 960px) {
    .wrap {
      width: 90%; } }

:where(a,button) {
  transition: all 0.4s; }
  :where(a,button):hover {
    transition: all 0.6s; }
  :where(a,button):has(img):hover {
    opacity: 0.8; }

/*======================================= ===========

** header
==================================================*/
#header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 93px;
  padding-inline: clamp(20px, calc( (48/1920) * 100% ), 48px); }
  #header::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(254, 254, 254, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 1;
    transition: all 0.4s; }
  #header .logo {
    width: 274px;
    position: relative;
    z-index: 9; }
    #header .logo h1 {
      line-height: 1; }
    #header .logo-a {
      display: block; }

#menubtn {
  display: none; }

@media screen and (max-width: 960px) {
  #header {
    padding-inline: 5% 0; }
    .is-gnavopen #header::before {
      opacity: 0;
      transition: all 0.4s; }

  #menubtn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 9;
    height: 93px;
    aspect-ratio: 1;
    border: none;
    background: #222; }
    #menubtn [class^='bar-'] {
      display: block;
      background: #fefefe;
      width: 32px;
      height: 3px;
      margin-inline: auto;
      position: absolute;
      right: 0;
      left: 0;
      transition: all 0.4s; }
    #menubtn .bars {
      display: block;
      width: 32px;
      aspect-ratio: 32/25;
      position: relative; }
    #menubtn .bar-1 {
      top: 0; }
    #menubtn .bar-2 {
      top: 11px; }
    #menubtn .bar-3 {
      top: 21px; }
    .is-gnavopen #menubtn .bar-1 {
      top: 11px;
      rotate: 45deg; }
    .is-gnavopen #menubtn .bar-2 {
      width: 0px; }
    .is-gnavopen #menubtn .bar-3 {
      top: 11px;
      rotate: -45deg; } }
@media screen and (max-width: 767px) {
  #header {
    height: 64px; }
    #header .logo {
      width: min(54.4vw, 204px); }

  #menubtn {
    height: 64px; } }
/*==================================================

** gnav
==================================================*/
#gnav .gnav-menu {
  display: flex; }
  #gnav .gnav-menu-li {
    position: relative;
    padding-inline: 32px; }
    #gnav .gnav-menu-li + .gnav-menu-li::before {
      content: '';
      display: block;
      width: 1px;
      height: 24px;
      background: #c3c3c3;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      margin-block: auto; }
    #gnav .gnav-menu-li:first-of-type {
      padding-left: 0; }
    #gnav .gnav-menu-li:last-of-type {
      padding-right: 0; }
  #gnav .gnav-menu-a {
    display: flex;
    align-items: center;
    line-height: 93px;
    position: relative;
    font-size: 1.8rem;
    font-weight: 700; }
    #gnav .gnav-menu-a::after {
      content: '';
      display: block;
      width: 100%;
      height: 3px;
      background: #222;
      position: absolute;
      left: 0;
      bottom: 0;
      transform: scale(0, 1);
      transform-origin: right top;
      transition: transform 0.3s cubic-bezier(0.8, 0, 0.2, 1) 0s; }
    #gnav .gnav-menu-a:hover::after {
      transform: scale(1, 1);
      transform-origin: left top; }

@media screen and (min-width: 961px) {
  #gnav {
    display: block !important; } }
@media screen and (max-width: 960px) {
  #gnav {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: rgba(254, 254, 254, 0.6);
    backdrop-filter: blur(17.5px);
    -webkit-backdrop-filter: blur(17.5px); }
    #gnav .gnav-wrap {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      justify-content: safe center;
      padding: 93px 5%; }
    #gnav .gnav-menu {
      flex-direction: column;
      align-items: center;
      gap: 64px; }
      #gnav .gnav-menu-li {
        width: 100%;
        padding-inline: 0;
        text-align: center; }
        #gnav .gnav-menu-li + .gnav-menu-li::before {
          content: none; }
      #gnav .gnav-menu-a {
        display: inline-flex;
        font-size: 1.6rem;
        line-height: 1.6; }
        #gnav .gnav-menu-a::after {
          content: none; } }
/*==================================================

** contents
==================================================*/
#contents {
  padding-top: 93px; }
  @media screen and (max-width: 767px) {
    #contents {
      padding-top: 64px; } }

/*==================================================

** main
==================================================*/
/* pagettl */
/* main style */
.main :where(p,address) + :where(p,address) {
  margin-top: 16px; }
.main :where(ol,ul) {
  counter-reset: number; }
  .main :where(ol,ul) li {
    position: relative; }
    .main :where(ol,ul) li > :first-child {
      margin-top: 0; }
  .main :where(ol,ul) > li {
    counter-increment: number; }
.main :where(table), .main .tbl {
  width: 100%; }
  .main :where(table) tr, .main .tbl tr {
    border-bottom: 1px solid #ccc; }
  .main :where(table) th, .main :where(table) td, .main .tbl th, .main .tbl td {
    width: auto;
    text-align: left;
    vertical-align: top;
    padding-block: 16px;
    font-size: 1.5rem; }
    .main :where(table) th > :first-child, .main :where(table) td > :first-child, .main .tbl th > :first-child, .main .tbl td > :first-child {
      margin-top: 0; }
  .main :where(table) th, .main .tbl th {
    width: 124px;
    font-weight: 700;
    padding-right: 24px; }
.main :where(dl) dt > :first-child, .main :where(dl) dd > :first-child {
  margin-top: 0; }
.main :where(blockquote) {
  display: block;
  padding: 20px; }
  .main :where(blockquote):before, .main :where(blockquote):after {
    display: block; }
  .main :where(blockquote):before {
    content: '“';
    text-align: left; }
  .main :where(blockquote):after {
    content: '”';
    text-align: right; }
.main em {
  font-style: italic; }
.main strong {
  font-weight: bold; }
.main :where(h1,h2,h3,h4,h5,h6) {
  font-weight: 700; }
.main :where(h1) + *, .main .h1 + * {
  margin-top: 0; }
.main :where(h1) + p, .main .h1 + p {
  margin-top: 0; }
.main :where(h2).h2-ptn1, .main .h2.h2-ptn1 {
  margin-top: 0; }
  .main :where(h2).h2-ptn1 .jp, .main .h2.h2-ptn1 .jp {
    margin-top: 0;
    font-size: 1.6rem;
    font-weight: 700; }
  .main :where(h2).h2-ptn1 .en, .main .h2.h2-ptn1 .en {
    margin-top: 20px;
    font-size: 5.6rem;
    font-weight: 800;
    line-height: 1; }
.main :where(h2) + *, .main .h2 + * {
  margin-top: 0; }
.main :where(h2) + p, .main .h2 + p {
  margin-top: 0; }
.main :where(h3) + *, .main .h3 + * {
  margin-top: 0; }
.main :where(h3) + p, .main .h3 + p {
  margin-top: 0; }
.main :where(h4) + *, .main .h4 + * {
  margin-top: 0; }
.main :where(h4) + p, .main .h4 + p {
  margin-top: 0; }
.main :where(h5) + *, .main .h5 + * {
  margin-top: 0; }
.main :where(h5) + p, .main .h5 + p {
  margin-top: 0; }
@media screen and (max-width: 767px) {
  .main .tbl th, .main .tbl td {
    display: block;
    width: 100%; }
  .main .tbl th {
    padding-block: 24px 8px; }
  .main .tbl td {
    padding-block: 8px 24px; }
  .main :where(h2).h2-ptn1 .en, .main .h2.h2-ptn1 .en {
    margin-top: 16px;
    font-size: 4.8rem; }
  .main :where(h2) + *, .main .h2 + * {
    margin-top: 0; }
  .main :where(h2) + p, .main .h2 + p {
    margin-top: 0; } }

/*==================================================

** side
#side {}
==================================================*/
/*==================================================

** topicpath
#topicpath {
    ol { @include wrap; }
    li {
        display: inline;
    }
    span {
        //タームなどが連続する時用
        + span {
            &:before {
                content:',';
                margin:0 5px;
            }
        }
    }
    a {}
}
==================================================*/
/*==================================================

** footer
==================================================*/
#footer {
  background: #222;
  padding-block: 72px 16px; }
  #footer .logo {
    width: 260px;
    margin-inline: auto; }
    #footer .logo-a {
      display: block; }
  #footer .sitemap {
    margin-top: 48px; }
    #footer .sitemap-li {
      position: relative; }
      #footer .sitemap-li + .sitemap-li::before {
        content: '';
        display: block;
        width: 1px;
        height: 16px;
        background: #c3c3c3;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin-block: auto; }
    #footer .sitemap-a {
      display: inline-block;
      padding-inline: 32px;
      font-size: 1.4rem;
      font-weight: 700;
      color: #fefefe; }
      #footer .sitemap-a:hover {
        text-decoration: underline; }
  #footer .copy {
    margin-top: 82px;
    font-size: 1.2rem;
    text-align: center;
    color: #666; }

@media screen and (max-width: 767px) {
  #footer {
    padding-block: 64px 82px; }
    #footer .logo {
      width: 200px; }
    #footer .sitemap {
      margin-top: 24px; }
      #footer .sitemap-li {
        width: 100%;
        text-align: center;
        line-height: 1; }
        #footer .sitemap-li + .sitemap-li {
          margin-top: 40px; }
          #footer .sitemap-li + .sitemap-li::before {
            width: 16px;
            height: 1px;
            right: 0;
            top: -20px;
            bottom: auto;
            margin-inline: auto; }
      #footer .sitemap-a {
        padding-inline: 0; }
    #footer .copy {
      margin-top: 48px; } }
/*==================================================

** fixed
==================================================*/
#pagetop {
  display: none;
  position: fixed;
  z-index: 99;
  width: 40px;
  right: 20px;
  bottom: 20px; }
  #pagetop a {
    display: block; }
  @media screen and (max-width: 767px) {
    #pagetop {
      right: 5%; } }