@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&family=Poppins:wght@300;400;500&display=swap";
*:where(:not(html):not(iframe):not(canvas):not(img):not(svg):not(video):not(audio):not(svg *):not(symbol *)) {
  all:unset;
  display:revert
}
*,
*:before,
*:after {
  box-sizing:border-box
}
html {
  -moz-text-size-adjust:none;
  -webkit-text-size-adjust:none;
  text-size-adjust:none
}
a,
button {
  cursor:revert
}
ol,
ul,
menu,
summary {
  list-style:none
}
ol {
  counter-reset:revert
}
img {
  max-width:100%;
  max-height:100%
}
table {
  border-collapse:collapse
}
input,
textarea {
  -webkit-user-select:auto
}
textarea {
  white-space:revert
}
meter {
  -webkit-appearance:revert;
  -moz-appearance:revert;
  appearance:revert
}
:where(pre) {
  all:revert;
  box-sizing:border-box
}
::-moz-placeholder {
  color:inherit
}
::placeholder {
  color:inherit
}
:where([hidden]) {
  display:none
}
:where([contenteditable]:not([contenteditable=false])) {
  -moz-user-modify:read-write;
  -webkit-user-modify:read-write;
  word-wrap:break-word;
  -webkit-line-break:after-white-space;
  -webkit-user-select:auto
}
:where([draggable=true]) {
  -webkit-user-drag:element
}
:where(dialog:modal) {
  all:revert;
  box-sizing:border-box
}
::-webkit-details-marker {
  display:none
}
:root {
  --c-navy: #334873;
  --c-turquoise: #0b88b4;
  --c-red: #a70000;
  --c-light-gray: #d9d9e1;
  --c-gray: #cacad3;
  --c-text: var(--c-navy);
  --grid-size: 50;
  --grid-size-px: calc(var(--grid-size) * 1px);
  --grid-size-vw: 3.8461538462vw
}
html {
  font-size:62.5%;
  scroll-behavior:smooth
}
:target {
  scroll-margin-top:30px
}
body {
  font-size:1.6rem;
  font-family:Poppins,Noto Sans JP,sans-serif;
  font-optical-sizing:auto;
  font-weight:400;
  font-style:normal;
  background:url(../img/bg.png) center top;
  color:#334873;
  color:var(--c-text);
  word-wrap:anywhere;
  word-break:normal;
  line-break:strict;
  -webkit-font-smoothing:antialiased
}
a {
  --color: inherit;
  color:inherit;
  color:var(--color);
  transition:color .15s linear 0s
}
a.link-fade {
  opacity:1;
  transition:opacity .15s linear 0s
}
a.link-fade:hover {
  opacity:.6
}
img {
  display:block
}
.bold {
  font-weight:800
}
.block-hex {
  --hex-size: var(--grid-size);
  --hex-size-px: calc(var(--hex-size) * 1px);
  --hex-size-vw: calc((var(--hex-size) / 1300) * 100vw);
  --hex-bg-color: #fff;
  --hex-text-color: var(--c-text);
  --hex-arrow-color: var(--hex-text-color);
  --hex-arrow-width: 2px;
  --hex-size-use: var(--hex-size-px);
  transition:--hex-bg-color .2s linear 0s,--hex-text-color .2s linear 0s;
  color:#334873;
  color:var(--hex-text-color);
  position:relative;
  z-index:1;
  display:block
}
.block-hex-inner {
  position:relative;
  padding:0 calc(var(--hex-size-use) / 2);
  z-index:2
}
.block-hex-inner:before,
.block-hex-inner:after {
  content:"";
  width:calc(var(--hex-size-use) / 2);
  height:var(--hex-size-use);
  background:var(--hex-bg-color);
  position:absolute;
  top:0
}
.block-hex-inner:before {
  clip-path:polygon(100% 100%,0% 50%,100% 0%);
  left:0
}
.block-hex-inner:after {
  clip-path:polygon(0% 100%,100% 50%,0% 0%);
  right:0
}
.block-hex-content {
  height:var(--hex-size-use);
  background:var(--hex-bg-color);
  display:flex;
  align-items:center;
  justify-content:center
}
.block-hex-border {
  --hex-border-color: var(--c-light-gray);
  --hex-border-size: 1;
  --hex-border-size-px: calc(var(--hex-border-size) * 1px);
  position:relative
}
.block-hex-border:before,
.block-hex-border:after {
  content:"";
  width:calc(var(--hex-size-use) / 2);
  height:var(--hex-size-use);
  background:var(--hex-border-color);
  position:absolute;
  top:0
}
.block-hex-border:before {
  clip-path:polygon(100% 100%,0% 50%,100% 0%);
  left:0
}
.block-hex-border:after {
  clip-path:polygon(0% 100%,100% 50%,0% 0%);
  right:0
}
.block-hex-border .block-hex-inner:before {
  clip-path:polygon(100% calc(100% - var(--hex-border-size) / var(--hex-size) * 100%),calc(var(--hex-border-size) / (var(--hex-size) / 2) * 100%) 50%,100% calc(var(--hex-border-size) / var(--hex-size) * 100%))
}
.block-hex-border .block-hex-inner:after {
  clip-path:polygon(0% calc(100% - var(--hex-border-size) / var(--hex-size) * 100%),calc(100% - var(--hex-border-size) / (var(--hex-size) / 2) * 100%) 50%,0% calc(var(--hex-border-size) / (var(--hex-size)) * 100%))
}
.block-hex-border .block-hex-content {
  border-top:var(--hex-border-size-px) solid var(--hex-border-color);
  border-bottom:var(--hex-border-size-px) solid var(--hex-border-color)
}
.block-hex-arrow:after {
  content:"";
  display:block;
  width:.65em;
  height:.65em;
  border-right:var(--hex-arrow-width) solid var(--hex-arrow-color);
  border-bottom:var(--hex-arrow-width) solid var(--hex-arrow-color);
  position:absolute;
  top:50%;
  right:1.2em;
  translate:0% -50%;
  rotate:-45deg;
  z-index:2
}
@property --hex-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --hex-text-color {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
.point-line {
  --color: #fff;
  --size: 30;
  --size-px: calc(var(--size) * 1px);
  --size-vw: calc(var(--size) / 1300 * 100vw);
  --size-use: var(--size-px);
  --gap: 15;
  --gap-px: calc(var(--gap) * 1px);
  --gap-vw: calc(var(--gap) / 1300 * 100vw);
  --gap-use: var(--gap-px);
  display:flex;
  align-items:stretch;
  gap:15px;
  gap:var(--gap-use)
}
.point-line-icon {
  position:relative;
  width:var(--size-use)
}
.point-line-icon:before,
.point-line-icon:after {
  content:"";
  display:block;
  background:var(--color);
  position:absolute
}
.point-line-icon:before {
  width:var(--size-use);
  height:1px;
  top:50%;
  translate:0 -50%
}
.point-line-icon:after {
  width:4px;
  height:4px;
  top:50%;
  right:0;
  translate:0 -50%;
  rotate:45deg
}
.point-line-text {
  flex:1
}
.section-line {
  --border-color: var(--c-navy);
  position:relative;
  padding:0 100px;
  padding:0 calc(var(--grid-size-px) * 2);
  border-right:1px solid #334873;
  border-right:1px solid var(--border-color);
  border-left:1px solid #334873;
  border-left:1px solid var(--border-color);
  max-width:1400px
}
.section-line:before,
.section-line:after,
.section-line-inner:before,
.section-line-inner:after {
  content:"";
  display:block;
  background:var(--border-color);
  position:absolute;
  width:4px;
  height:4px;
  rotate:45deg
}
.section-line:before {
  top:0;
  left:0;
  translate:calc(-50% - .5px) -50%
}
.section-line:after {
  bottom:0;
  left:0;
  translate:calc(-50% - .5px) 50%
}
.section-line-inner:before {
  top:0;
  right:0;
  translate:calc(50% + .5px) -50%
}
.section-line-inner:after {
  bottom:0;
  right:0;
  translate:calc(50% + .5px) 50%
}
.point-line-list {
  --border-color: var(--c-gray);
  border-bottom:1px solid #cacad3;
  border-bottom:1px solid var(--border-color);
  position:relative
}
.point-line-list:before,
.point-line-list:after {
  content:"";
  display:block;
  position:absolute;
  width:4px;
  height:4px;
  bottom:0;
  translate:0 calc(50% + .5px);
  rotate:45deg;
  background:var(--border-color)
}
.point-line-list:before {
  left:0
}
.point-line-list:after {
  right:0
}
.point-line-list>li {
  border-top:1px solid var(--border-color);
  position:relative
}
.point-line-list>li:before,
.point-line-list>li:after {
  content:"";
  display:block;
  position:absolute;
  width:4px;
  height:4px;
  top:0;
  translate:0 calc(-50% - .5px);
  rotate:45deg;
  background:var(--border-color)
}
.point-line-list>li:before {
  left:0
}
.point-line-list>li:after {
  right:0
}
.social-list {
  display:flex;
  justify-content:right
}
.social-list .social-item {
  width:100px;
  display:block;
  --hex-border-color: #cacad3
}
.social-list .social-item img {
  width:auto;
  height:30px
}
.container {
  position:relative
}
.contents-wrapper {
  max-width:1400px;
  margin:0 auto;
  padding:25px 0 0;
  padding:calc(var(--grid-size-px) / 2) 0 0
}
.contents {
  margin-top:50px;
  margin-top:calc(var(--grid-size-px))
}
header.global {
  display:flex;
  justify-content:space-between;
  margin:0 100px;
  margin:0 calc(var(--grid-size-px) * 2);
  position:relative
}
header.global .line-left,
header.global .line-right {
  position:absolute;
  top:50%;
  width:100px;
  width:calc(var(--grid-size-px) * 2);
  background-color:#d9d9e1;
  background-color:var(--c-light-gray);
  height:1px
}
header.global .line-left:before,
header.global .line-right:before {
  content:"";
  display:block;
  position:absolute;
  width:4px;
  height:4px;
  top:50%;
  translate:0 -50%;
  rotate:45deg;
  background:#d9d9e1;
  background:var(--c-light-gray)
}
header.global .line-left {
  left:0;
  translate:-100% -50%
}
header.global .line-left:before {
  left:0
}
header.global .line-right {
  right:0;
  translate:100% -50%
}
header.global .line-right:before {
  right:0
}
header.global .logo {
  --hex-size: 100;
  width:300px;
  position:relative
}
header.global .logo .header-logo {
  display:flex;
  align-items:center
}
header.global .logo img {
  width:196px;
  max-width:100%;
  height:auto
}
header.global .menu {
  display:flex;
  flex:1;
  align-items:center;
  font-size:1.6rem;
  font-weight:500
}
header.global .menu-primary {
  flex:1
}
header.global .menu-primary ul {
  display:flex;
  gap:60px
}
header.global .menu-primary a:hover {
  color:#0b88b4;
  color:var(--c-turquoise)
}
header.global .menu-sub {
  width:200px;
  --hex-bg-color: var(--c-turquoise);
  --hex-text-color: #fff
}
header.global .menu-sub:hover {
  --hex-bg-color: var(--c-navy)
}
header.global .menu-open {
  --hex-size: 40;
  --hex-bg-color: var(--c-navy);
  --hex-text-color: #fff;
  width:60px;
  display:none;
  position:relative
}
header.global .menu-open .menu-icon {
  width:16px;
  height:16px;
  position:absolute;
  top:50%;
  left:50%;
  translate:-50% -50%;
  z-index:3
}
header.global .menu-open .menu-icon .line {
  display:block;
  position:absolute;
  width:100%
}
header.global .menu-open .menu-icon .line1,
header.global .menu-open .menu-icon .line3 {
  background:#fff;
  height:12.5%;
  border-radius:1px;
  transition:width .25s cubic-bezier(.37,0,.63,1) 0s,left .25s cubic-bezier(.37,0,.63,1) 0s;
  left:0
}
header.global .menu-open .menu-icon .line1 {
  top:0
}
header.global .menu-open .menu-icon .line2 {
  top:0;
  height:100%
}
header.global .menu-open .menu-icon .line2:before,
header.global .menu-open .menu-icon .line2:after {
  content:"";
  display:block;
  background:#fff;
  width:137.5%;
  height:12.5%;
  position:absolute;
  top:50%;
  left:50%;
  translate:-50% -50%;
  border-radius:1px;
  transition:rotate .25s cubic-bezier(.37,0,.63,1) 0s
}
header.global .menu-open .menu-icon .line3 {
  bottom:0
}
header.global .menu-open.open .menu-icon .line1,
header.global .menu-open.open .menu-icon .line3 {
  width:0;
  left:50%
}
header.global .menu-open.open .menu-icon .line2:before {
  rotate:45deg
}
header.global .menu-open.open .menu-icon .line2:after {
  opacity:1;
  rotate:-45deg
}
footer.global {
  padding:50px 0;
  padding:var(--grid-size-px) 0;
  margin:0 100px;
  margin:0 calc(var(--grid-size-px) * 2);
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:auto auto;
  align-items:center
}
footer.global .terms {
  grid-column:3/4;
  grid-row:1/2
}
footer.global .terms ul {
  display:flex;
  justify-content:right
}
footer.global .terms li {
  border-right:1px solid #334873;
  border-right:1px solid var(--c-navy);
  padding:0 1.5em;
  line-height:1;
  font-size:1.2rem
}
footer.global .terms li:last-child {
  border-right:none;
  padding-right:0
}
footer.global .terms a:hover {
  --color: var(--c-turquoise)
}
footer.global #ss_gmo_globalsign_secured_site_seal {
  grid-column:1/2;
  grid-row:1/2;
}

footer.global .logo {
  grid-column:2/3;
  grid-row:1/2;
  display:flex;
  justify-content:center
}
footer.global .copyright {
  grid-column:1/4;
  grid-row:2/3;
  text-align:center;
  font-size:1rem;
  padding:1em 0 0
}
.smp-menu-modal {
  --bg: var(--c-navy);
  --grid-size-use: var(--grid-size-px);
  background:#334873;
  background:var(--bg);
  position:fixed;
  z-index:100;
  top:100px;
  left:50%;
  translate:-50% 0;
  max-width:320px;
  width:100%;
  font-size:1.2rem;
  display:none;
  opacity:0
}
.smp-menu-modal .block-hex {
  --hex-size-use: var(--hex-size-px)
}
.smp-menu-modal-top,
.smp-menu-modal-bottom {
  position:absolute;
  width:calc(100% - var(--grid-size-use) * 2);
  height:var(--grid-size-use);
  left:var(--grid-size-use);
  background:var(--bg)
}
.smp-menu-modal-top:before,
.smp-menu-modal-top:after,
.smp-menu-modal-bottom:before,
.smp-menu-modal-bottom:after {
  content:"";
  display:block;
  background:var(--bg);
  width:var(--grid-size-use);
  height:var(--grid-size-use);
  position:absolute
}
.smp-menu-modal-top {
  top:calc(var(--grid-size-use) * -1)
}
.smp-menu-modal-top:before {
  left:calc(var(--grid-size-use) * -1);
  clip-path:polygon(0% 100%,100% 100%,100% 0%)
}
.smp-menu-modal-top:after {
  right:calc(var(--grid-size-use) * -1);
  clip-path:polygon(0% 0%,100% 100%,0% 100%)
}
.smp-menu-modal-bottom {
  bottom:calc(var(--grid-size-use) * -1)
}
.smp-menu-modal-bottom:before {
  left:calc(var(--grid-size-use) * -1);
  clip-path:polygon(0% 0%,100% 0%,100% 100%)
}
.smp-menu-modal-bottom:after {
  right:calc(var(--grid-size-use) * -1);
  clip-path:polygon(100% 0%,0% 100%,0% 0%)
}
.smp-menu-modal-inner {
  display:flex;
  gap:15px;
  flex-direction:column;
  padding:0 var(--grid-size-use)
}
.smp-menu-modal .smp-menu-modal-link,
.smp-menu-modal .social-item,
.smp-menu-modal .terms {
  --hex-size: 40
}
.smp-menu-modal-main {
  display:flex;
  flex-wrap:wrap;
  row-gap:15px
}
.smp-menu-modal-item {
  width:50%
}
.smp-menu-modal-item.store {
  width:100%
}
.smp-menu-modal-item.store .smp-menu-modal-link {
  --hex-bg-color: var(--c-turquoise);
  --hex-text-color: #fff
}
.smp-menu-modal-sns {
  display:flex
}
.smp-menu-modal-sns .smp-menu-modal-item {
  width:33.3333333333%
}
.smp-menu-modal-sns .smp-menu-modal-item img {
  width:auto;
  height:22px
}
.smp-menu-modal-sub {
  display:flex;
  justify-content:center
}
.smp-menu-modal-sub .smp-menu-modal-link {
  --hex-bg-color: var(--c-navy);
  --hex-text-color: #fff
}
.smp-menu-modal-symbol {
  width:60px;
  margin:0 auto
}
.contents-title-area {
  display:flex;
  justify-content:space-between;
  padding:0 25px 0 0;
  padding:0 calc(var(--grid-size-px) / 2) 0 0
}
.contents-title {
  font-size:6rem;
  line-height:1
}
.contents-title.small {
  font-size:4rem
}
.contents-main {
  margin-top:50px;
  margin-top:var(--grid-size-px)
}
.contents-article p {
  margin-top:1em
}
.contents-article dl {
  margin-top:3em
}
.contents-article dt {
  font-weight:600;
  margin-top:3em
}
.contents-article ol {
  margin-top:1em;
  list-style:decimal;
  list-style-position:inside
}
@media screen and (max-width: 1500px) {
  .contents-title-area {
    padding:0 25px;
    padding:0 calc(var(--grid-size-px) / 2)
  }
}
@media screen and (max-width: 1450px) {
  .section-line {
    margin-left:24px;
    margin-left:calc(var(--grid-size-px) * .5 - 1px);
    margin-right:24px;
    margin-right:calc(var(--grid-size-px) * .5 - 1px)
  }
}
@media screen and (max-width: 1400px) {
  header.global {
    width:1200px;
    margin-right:auto;
    margin-left:auto
  }
  header.global .line-left,
  header.global .line-right {
    display:none
  }
}
@media screen and (max-width: 1300px) {
  body {
    background-size:7.6923076923% auto
  }
  .block-hex {
    --hex-size-use: var(--hex-size-vw)
  }
  .block-hex-inner:before {
    left:.5px
  }
  .block-hex-inner:after {
    right:.5px
  }
  .point-line {
    --gap-use: var(--gap-vw);
    --size-use: var(--size-vw)
  }
  .section-line {
    padding:0 calc(3.8461538462vw * 1.5);
    padding:0 calc(var(--grid-size-vw) * 1.5)
  }
  .social-list .social-item {
    width:7.6923076923vw
  }
  .social-list .social-item img {
    height:2.3076923077vw
  }
  .contents-wrapper {
    padding-top:calc(3.8461538462vw / 2);
    padding-top:calc(var(--grid-size-vw) / 2)
  }
  header.global {
    width:auto;
    margin-right:3.8461538462vw;
    margin-right:var(--grid-size-vw);
    margin-left:3.8461538462vw;
    margin-left:var(--grid-size-vw)
  }
  header.global .logo {
    width:23.0769230769vw
  }
  header.global .logo img {
    width:15.0769230769vw
  }
  header.global .menu {
    font-size:1.2307692308vw
  }
  header.global .menu-primary ul {
    gap:4.6153846154vw
  }
  header.global .menu-sub {
    width:15.3846153846vw
  }
}
@media screen and (max-width: 900px) {
  :root {
    --grid-size: 20
  }
  :target {
    scroll-margin-top:100px
  }
  body {
    background-image:url(../img/bg_small.png);
    background-size:auto auto
  }
  .block-hex {
    --hex-size-use: var(--hex-size-px)
  }
  .point-line {
    --gap-use: var(--gap-px);
    --size-use: var(--size-px)
  }
  .section-line {
    padding:0 75px;
    padding:0 calc(var(--grid-size-px) * 1.5)
  }
  .social-list {
    justify-content:center
  }
  .social-list .social-item {
    --hex-size: 40;
    width:70px
  }
  .social-list .social-item img {
    height:22px
  }
  .contents-wrapper {
    max-width:400px;
    padding-top:25px;
    padding-top:calc(var(--grid-size-px) / 2)
  }
  header.global {
    margin:0 25px;
    margin:0 calc(var(--grid-size-px) / 2);
    position:fixed;
    z-index:10
  }
  header.global .logo {
    --hex-size: 60;
    width:180px
  }
  header.global .logo img {
    width:116px;
    position:absolute;
    z-index:3;
    top:50%;
    left:50%;
    translate:-50% -50%
  }
  header.global .menu {
    flex:none
  }
  header.global .menu-primary {
    display:none
  }
  header.global .menu-sub {
    --hex-size: 40;
    width:140px;
    font-size:1.2rem
  }
  header.global .menu-open {
    display:block
  }
  footer.global {
    padding-top:60px;
    grid-template-columns:auto
  }
  footer.global .terms {
    display:none
  }
  footer.global #ss_gmo_globalsign_secured_site_seal {
    grid-column: 1/2;
    grid-row: 1/2;
    margin: 0 auto 50px;
  }
  footer.global .logo {
    grid-column:1/2;
    grid-row:2/3;
  }
  footer.global .logo img {
    width:140px
  }
  footer.global .copyright {
    grid-column:1/2;
    grid-row:3/4;
  }
  body.show-menu .smp-menu-modal {
    display:block
  }
  .contents-title-area {
    justify-content:center;
    flex-wrap:wrap;
    padding-top:200px;
    padding-top:calc(var(--grid-size-px) * 4)
  }
  .contents-title {
    padding:0 0 50px;
    padding:0 0 calc(var(--grid-size-px));
    font-size:4rem
  }
  .contents-main {
    margin-top:100px;
    margin-top:calc(var(--grid-size-px) * 2)
  }
}
@media screen and (max-width: 400px) {
  :root {
    --grid-size-vw: 5vw
  }
  body {
    background-size:10% auto
  }
  .block-hex {
    --hex-size-vw: calc((var(--hex-size) / 400) * 100vw);
    --hex-size-use: var(--hex-size-vw)
  }
  .section-line {
    padding:0 75px;
    padding:0 calc(var(--grid-size-px) * 1.5)
  }
  .social-list .social-item {
    width:17.5vw
  }
  .social-list .social-item img {
    height:5.5vw
  }
  .contents-wrapper {
    padding-top:calc(3.8461538462vw / 2);
    padding-top:calc(var(--grid-size-vw) / 2)
  }
  header.global {
    width:auto;
    margin-right:calc(3.8461538462vw / 2);
    margin-right:calc(var(--grid-size-vw) / 2);
    margin-left:calc(3.8461538462vw / 2);
    margin-left:calc(var(--grid-size-vw) / 2)
  }
  header.global .logo {
    width:45vw
  }
  header.global .logo img {
    width:29vw
  }
  header.global .menu-sub {
    width:35vw;
    font-size:3vw
  }
  header.global .menu-open {
    width:15vw
  }
  header.global .menu-open .menu-icon {
    width:4vw;
    height:4vw
  }
  .smp-menu-modal {
    --grid-size-use: var(--grid-size-vw)
  }
  .smp-menu-modal-top {
    translate:0 .5px
  }
  .smp-menu-modal-top:before {
    translate:.5px 0
  }
  .smp-menu-modal-top:after {
    translate:-.5px 0
  }
  .smp-menu-modal-bottom {
    translate:0 -.5px
  }
  .smp-menu-modal-bottom:before {
    translate:.5px 0
  }
  .smp-menu-modal-bottom:after {
    translate:-.5px 0
  }
  .contents-title {
    padding:0 0 calc(3.8461538462vw);
    padding:0 0 calc(var(--grid-size-vw))
  }
}
@media screen and (max-width: 340px) {
  .smp-menu-modal {
    left:10px;
    right:10px;
    translate:0 0;
    width:calc(100% - 20px)
  }
}
