@charset "utf-8";
/* loginweb.css
ver. 2025-M04-D26
[z-index range] = 0 - 99
[cache control] = ?ver=YYYYMMDD
[require css] header.css(import webfont.css)
++++++++++++++++++++++++++++++++++++++++
* NOTE
++++++++++++++++++++++++++++++++++++++++
- Do not use 2byte Charactor.
- Charset: utf-8
- Return code: LF
++++++++++++++++++++++++++++++++++++++++ */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}/*!

/* variables
++++++++++++++++++++++++++++++++++++++++ */
:root {
  --color-rich-black:     #0a1f33;

  --color-text-emphasis: #e74a21;
  --color-text-label: #8299ae;
  --color-text-link: #0067c3;

  --color-button-brand: #0c9dc2;

  --color-border-primary: #dde0e5;
  --color-border-emphasis: #e74a21;
  --color-border-focus: #55beec;

  --color-background-primary: #eff5fa;
  --color-background-emphasis: #fdeeef;
  --color-background-focus: #eff5fa;
  --color-background-disabled: #dbdfea;

  /* image */
  --icon-keyboard-svg: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M20.25%205.25H3.75C2.51%205.25%201.5%206.26%201.5%207.5v9c0%201.24%201.01%202.25%202.25%202.25h16.5c1.24%200%202.25-1.01%202.25-2.25v-9c0-1.24-1.01-2.25-2.25-2.25zM21%2016.5a.75.75%200%200%201-.75.75H3.75A.75.75%200%200%201%203%2016.5v-9a.75.75%200%200%201%20.75-.75h16.5a.75.75%200%200%201%20.75.75v9zM15.75%2015a.75.75%200%200%201-.75.75H9a.75.75%200%201%201%200-1.5h6a.75.75%200%200%201%20.75.75zM7.5%209a.75.75%200%200%201-.75.75H6a.75.75%200%201%201%200-1.5h.75A.75.75%200%200%201%207.5%209zM9%209a.75.75%200%200%201%20.75-.75h.75a.75.75%200%201%201%200%201.5h-.75A.75.75%200%200%201%209%209zm3.75%200a.75.75%200%200%201%20.75-.75h.75a.75.75%200%201%201%200%201.5h-.75a.75.75%200%200%201-.75-.75zm6%200a.75.75%200%200%201-.75.75h-.75a.75.75%200%201%201%200-1.5H18a.75.75%200%200%201%20.75.75zM7.5%2012a.75.75%200%200%201-.75.75H6a.75.75%200%201%201%200-1.5h.75a.75.75%200%200%201%20.75.75zM9%2012a.75.75%200%200%201%20.75-.75h.75a.75.75%200%201%201%200%201.5h-.75A.75.75%200%200%201%209%2012zm3.75%200a.75.75%200%200%201%20.75-.75h.75a.75.75%200%201%201%200%201.5h-.75a.75.75%200%200%201-.75-.75zm6%200a.75.75%200%200%201-.75.75h-.75a.75.75%200%201%201%200-1.5H18a.75.75%200%200%201%20.75.75z%22%2F%3E%3C%2Fsvg%3E");
  --icon-visibility-off-svg: url("data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m13.261%2011.33-1.153-1.099c.12-.593-.06-1.149-.537-1.667-.477-.517-1.094-.72-1.85-.606l-1.152-1.098a3.49%203.49%200%200%201%20.686-.227c.232-.05.48-.076.746-.076.994%200%201.84.331%202.536.994s1.043%201.468%201.043%202.415c0%20.252-.026.49-.079.71a3.112%203.112%200%200%201%20-.239.653zm2.546%202.386-1.154-1.06a8.554%208.554%200%200%200%201.343-1.203%206.714%206.714%200%200%200%201.004-1.487%207.584%207.584%200%200%200%20-2.854-3.04c-1.24-.751-2.621-1.126-4.146-1.126-.384%200-.762.025-1.134.076-.37.05-.735.126-1.093.227l-1.233-1.175a9.144%209.144%200%200%201%201.67-.483%209.659%209.659%200%200%201%201.79-.16c2.002%200%203.785.526%205.35%201.58%201.564%201.055%202.697%202.422%203.4%204.1a8.748%208.748%200%200%201%20-1.203%202.075%208.554%208.554%200%200%201%20-1.74%201.676zm.397%204.659-3.34-3.144a9.966%209.966%200%200%201%20-1.402.313c-.471.069-.958.104-1.462.104-2.002%200-3.785-.527-5.35-1.582-1.564-1.054-2.697-2.42-3.4-4.1a8.85%208.85%200%200%201%202.506-3.41l-2.188-2.12%201.114-1.061%2014.636%2013.94zm-11.334-10.758a8.307%208.307%200%200%200%20-1.054%201.08%206.78%206.78%200%200%200%20-.816%201.269%207.584%207.584%200%200%200%202.854%203.04c1.24.75%202.621%201.127%204.146%201.127.265%200%20.524-.016.776-.048.252-.031.51-.066.775-.104l-.716-.72a3.813%203.813%200%200%201%20-.417.086%202.959%202.959%200%200%201%20-.418.028c-.994%200-1.84-.331-2.536-.994s-1.044-1.468-1.044-2.415c0-.139.01-.272.03-.398s.05-.259.09-.398z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --icon-visibility-on-svg: url("data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m10%2013.75c.994%200%201.84-.365%202.536-1.094s1.043-1.614%201.043-2.656-.348-1.927-1.043-2.656c-.697-.73-1.542-1.094-2.536-1.094s-1.84.365-2.536%201.094-1.044%201.614-1.044%202.656.348%201.927%201.044%202.656c.697.73%201.542%201.094%202.536%201.094zm0-1.5a2.025%202.025%200%200%201%20-1.521-.656%202.224%202.224%200%200%201%20-.627-1.594c0-.625.21-1.156.627-1.594a2.025%202.025%200%200%201%201.521-.656c.597%200%201.104.219%201.521.656.418.438.627.969.627%201.594s-.21%201.156-.627%201.594a2.025%202.025%200%200%201%20-1.521.656zm0%204c-1.936%200-3.699-.566-5.29-1.698-1.59-1.132-2.744-2.65-3.46-4.552.716-1.903%201.87-3.42%203.46-4.552%201.591-1.132%203.354-1.698%205.29-1.698s3.699.566%205.29%201.698c1.59%201.132%202.744%202.65%203.46%204.552-.716%201.903-1.87%203.42-3.46%204.552-1.591%201.132-3.354%201.698-5.29%201.698zm0-1.667a7.34%207.34%200%200%200%204.126-1.24c1.254-.825%202.211-1.939%202.874-3.343-.663-1.403-1.62-2.517-2.874-3.344a7.34%207.34%200%200%200%20-4.126-1.24%207.34%207.34%200%200%200%20-4.126%201.24c-1.254.827-2.211%201.941-2.874%203.344.663%201.403%201.62%202.517%202.874%203.344a7.34%207.34%200%200%200%204.126%201.24z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");

  --bgi-mainbanner: url(../images/bg-mainbanner.webp);
  --bgi-loggedout: url(../images/img-hatchukun-logged-out.webp);
  --bgi-sorry: url(../images/img-hatchukun-sorry.webp);
  --bgi-sendmail: url(../images/img-hatchukun-sendmail.webp);
  --bgi-icon-faq: url(../images/icon-faq.webp);

  /**/
  --color-scroll-offset-gray: #f6f6f7;
  --scroll-offset-top: 0;
}
@media (max-width: 767.98px) {
  :root {
    --body-fz-default: 1.4rem;
    --body-bgi: none;
  }
}
@media (min-width: 768px) {
  :root {
    --scroll-offset-top: 29px;
    --body-fz-default: 1.6rem;
    --body-bgi: linear-gradient(to left, var(--color-scroll-offset-gray), var(--color-scroll-offset-gray));
  }
  body[data-gmoheader="pc"] {
    --scroll-offset-top: 29px;
  }
}

/* initialize
++++++++++++++++++++++++++++++++++++++++ */
*,
*::before,
*::after {
  box-sizing: inherit;
  /* letter-spacing: var(--lts-default, normal); */
}
html {
  font-size: 10px;
  scroll-padding-top: var(--scroll-offset-top);
}
body {
  padding: 0;
  margin: 0;

  box-sizing: border-box;

  -webkit-tap-highlight-color: initial;
  -webkit-text-size-adjust: 100%;

  position: static;
  padding-top: var(--scroll-offset-top);
  background: #fff;
  background-image: var(--body-bgi);
  background-size: 100vw 29px;
  background-position: top;
  background-repeat: repeat-x;

  color: var(--color-rich-black);
  text-align: justify;
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;

  font-size: var(--body-fz-default);
  font-weight: 400;
  line-height: 1.75;

  /* used webfont family */
  font-family: "Roboto", "YakuHanJP", "Subset-NotoSansJP", Meiryo, sans-serif;/* static.click-sec CDN */
  /*font-family: "Roboto Flex", "Noto Sans JP", sans-serif;/* google fonts CDN */

  /* Set based on webfont */
  /* --lts-default: 0.0625em;
  letter-spacing: var(--lts-default, normal); */
  font-feature-settings: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  margin-block: 1.5em;
}
hr {
  margin-block: 1.5em;
  border-style: solid;
  border-width: 1px 0 0;
  color: var(--color-border-primary);
}
a:where([href]) {
  color: var(--color-text-link);
  text-decoration: none;
  text-underline-offset: 4px;
  transition: all 0.3s ease;
}
@media (hover: hover) {
  a:where(:hover) {
    text-decoration: underline;
  }
}

b,
strong {
  font-weight: 500;
}
em {
  color: var(--color-text-emphasis);
  font-style: normal;
}
u {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  text-underline-offset: 4px;
}
ins {
  text-decoration: underline;
  text-decoration-style: double;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  text-underline-offset: 4px;
}
del {
  text-decoration: line-through;
  text-decoration-style: double;
}
mark {
  background: linear-gradient(transparent 60%, rgba(255,255,0,0.6) 0);
}
img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
figure {
  margin-block: 1.5em;
  margin-inline: 0;
}
ul {
  padding-inline-start: 1.2em;
}
ol {
  padding-inline-start: 2em;
}
ul, ol, dl {
  margin-block: 1.5em;
}
:where(ul, ol, dl) ul,
:where(ul, ol, dl) ol,
:where(ul, ol, dl) dl {
  margin-block: 0;
}
:where(ul, ol) > li {
  margin-block-start: 0.25em;
  padding-inline-start: 0.5em;
}
dt {
  margin-block-start: 0.25em;
}
dd {
  margin-inline-start: 2em;
}
dd > *:where(:first-child) {
  margin-block-start: 0;
}
dd > *:where(:last-child) {
  margin-block-end: 0;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
th,
caption {
  text-align: inherit;
}
tbody,
td,
tfoot,
th,
thead,
tr {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

/* form */
button,
input,
optgroup,
select,
textarea {
  font: inherit;
  vertical-align: middle;
}
textarea {
  max-width: 100%;
}
input::placeholder {
  color: inherit;
  font-family: inherit;
  opacity: 0.5;
}
input::-webkit-input-placeholder {
  color: inherit;
  font-family: inherit;
  opacity: 0.5;
}
input:-ms-input-placeholder {
  color: rgba(33,46,70,0.6);
  font-family: inherit;
}

[hidden] {
  display: none !important;
}


/* utility
++++++++++++++++++++++++++++++++++++++++ */

/* margin ++++++++++ */
/* margin top */
.u-mt-a { margin-top: auto !important;}
.u-mt0 { margin-top: 0 !important;}
.u-mt12 { margin-top: 12px !important;}
.u-mt24 { margin-top: 24px !important;}
/* margin Yaxis */
.u-my12 { margin-top: 12px !important; margin-bottom: 12px !important;}
.u-my24 { margin-top: 24px !important; margin-bottom: 24px !important;}


/* display ++++++++++++++++ */
.u-d-n { display: none !important;}

@media (max-width: 767.98px) {
  .u-d-n-sp { display: none !important;}
}
@media (min-width: 768px) {
  .u-d-n-pc { display: none !important;}
}

/* layout
++++++++++++++++++++++++++++++++++++++++ */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > * {
  flex: 0 0 auto;
}
body > main {
  flex-grow: 1;
  width: 100%;
}

main.loginweb {
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0;

}
@media (max-width: 767.98px) {
  main.loginweb {
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media (min-width: 768px) {
  main.loginweb {
    margin-top: -48px;
    background-color: var(--color-background-primary);
    border-image-source: linear-gradient(var(--color-background-primary), var(--color-background-primary));
    border-image-slice: fill 0;
    border-image-outset: 0 50vw;
  }
}


/* module
++++++++++++++++++++++++++++++++++++++++ */

/* button ++++++++++++++++++++ */
.m-btn {
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: 5.6rem;
  min-width: 200px;
  margin: 0 auto;
  padding: 9px 24px 7px;
  border: 0;
  border-radius: 100vh;

  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.025em;
  text-indent: 0.025em;
  font-weight: bold;
}

.m-btn.-act {
  background: var(--color-button-brand);
  color: #fff;
}

.m-btn.-act:disabled {
  /* opacity: 0.4; */
  pointer-events: none;
  background: rgba(10,31,51,0.2);
}

@media (hover: hover) {
  .m-btn {
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .m-btn:hover {
    opacity: 0.7;
  }
}

/* input field ++++++++++++++++++++ */
.m-inputfield {
  --inputtext-input-bgc: #fff;
  --inputtext-input-bdc: var(--color-border-primary);
  --inputtext-input-bdw: 1px;

  position: relative;
  display: block;
  margin: 0;
  width: auto;
  min-width: 296px;
  font-size: 1.6rem;
}

.m-inputfield .label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;

  position: absolute;
  top: 20px;
  left: 12px;
  display: block;
  height: 16px;
  transform-origin: 0 0;
  transition: all 0.2s ease;
  color: var(--color-text-label);
  font-size: inherit;
  line-height: 1;
}

.m-inputfield input {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  outline: none;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;

  padding: 28px 12px 12px;
  height: 56px;
  background: var(--inputtext-input-bgc);
  box-shadow: 0 0 0 var(--inputtext-input-bdw) var(--inputtext-input-bdc) inset;
  color: inherit;
  font-size: inherit;
}
.m-inputfield [data-visibility-for] {
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  position: absolute;
  top: 4px;
  right: 2px;
  z-index: 2;
  width: 40px;
  height: 48px;
  border: 0;

  overflow: hidden;
  white-space: nowrap;
  text-indent: 120%;

  background: var(--color-text-label);
  opacity: 0.6;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 6px center;

}
.m-inputfield [type="password"] {
  padding-right: 44px;
}
.m-inputfield [type="password"] ~ [data-visibility-for] {
  -webkit-mask-image: var(--icon-visibility-off-svg);
  mask-image: var(--icon-visibility-off-svg);
}
.m-inputfield [type="text"] ~ [data-visibility-for] {
  -webkit-mask-image: var(--icon-visibility-on-svg);
  mask-image: var(--icon-visibility-on-svg);
  opacity: 1;
}
.is-open-sk .m-inputfield input.is-focus,
.m-inputfield input:focus {
  --inputtext-input-bdc: var(--color-border-focus);
  --inputtext-input-bgc: var(--color-background-primary);
  --inputtext-input-bdw: 2px;
}
.m-inputfield input:-webkit-autofill ~ .label,
.is-open-sk .m-inputfield input.is-focus ~ .label,
.m-inputfield input:focus ~ .label,
.m-inputfield input:not(:placeholder-shown) ~ .label {
  transform: translate(-4px,-14px) scale(0.75);
}

.m-inputfield input.is-invalid {
  --inputtext-input-bdc: var(--color-border-emphasis);
  --inputtext-input-bgc: var(--color-background-emphasis);
  --inputtext-input-bdw: 1px;
}

.m-inputfield input:disabled,
.m-inputfield input:disabled ~ .label,
.m-inputfield input:disabled ~ [data-visibility-for] {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.m-inputfield input:disabled {
  background-color: var(--color-background-disabled);
}


/* open keybord ++++++++++++++++++++ */
.m-openkbd {
  max-width: 400px;
  margin: 0 auto;
  text-align: right;
  line-height: 1;
}
.m-openkbd a {
  position: relative;
  display: inline-block;
  padding-left: 28px;
  font-size: 1.4rem;
  line-height: 2.4rem;
  vertical-align: top;
}
.m-openkbd a::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: var(--icon-keyboard-svg);
  mask-image: var(--icon-keyboard-svg);
  content: "";
}

/* error list ++++++++++++++++++++ */
.m-errlist {
  display: block;
  max-width: 400px;
  margin: 0 auto;
  padding: 0;
  color: var(--color-text-emphasis);
  font-size: 1.4rem;
  line-height: 1.5;
}


/* callout ++++++++++++++++++++ */
.m-callout {
  display: block;
  max-width: 400px;
  margin: 0 auto;
  padding: 16px;
  border-radius: 8px;
  background-color: #fff7d3;
  line-height: 1.5;
}
.m-callout > *:first-child {
  margin-top: 0;
}
.m-callout > *:last-child {
  margin-bottom: 0;
}
.m-callout > strong {
  display: block;
  font-size: 1.6rem;
  font-weight: bold;
}
.m-callout > p {
  margin: 4px auto 0;
  font-size: 1.4rem;
}

/* loggedout ++++++++++++++++++++ */
.m-loggedout {
  margin: 40px auto;
  font-size: 1.4rem;
  text-align: center;
}
.m-loggedout::before {
  display: block;
  margin-bottom: 12px;
  height: 120px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  background-image: var(--bgi-loggedout);
  content: "";
}

/* contents
++++++++++++++++++++++++++++++++++++++++ */
@media (max-width: 767.98px) {
  .loginsect {
    display: block;
  }
}
@media (min-width: 768px) {
  .loginsect {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border-radius: 24px;
  }
}

/*  ++++++++++++++++++++ */
.loginbox {
  position: relative;
  display: block;
  background: #fff;
}
.loginbox h1 {
  margin: 0 auto 24px;
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
}
/**/
.loginfield {
  display: block;
  max-width: 400px;
  margin: 0 auto;
  padding: 0;
  border: 0;
}

/**/
.supportlinks {
  max-width: 400px;
  margin: 0 auto;
  list-style: none;
  font-size: 1.4rem;
  line-height: 1.5;
}
.supportlinks a {
  display: block;
  width: fit-content;
  margin-bottom: 4px;
}

/**/
.entrylink {
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 767.98px) {
  .loginbox {
    padding: 32px 16px;
  }
}
@media (min-width: 768px) {
  .loginbox {
    padding: 40px 100px;
  }
}

/*  ++++++++++++++++++++ */
.mainbanner {
  display: grid;
  place-items: center;
  gap: 16px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: var(--bgi-mainbanner);
}
.mainbanner .bnr a {
  display: block;
  margin: 0 16px;
}
.mainbanner .bnr a:first-child {
  margin-top: 40px;
}
.mainbanner .bnr a:last-child {
  margin-bottom: 40px;
}

.mainbanner img {
  max-width: 360px;
  border-radius: 8px;
}

.subbanner .bnr {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
  margin: 0 auto;
  padding: 0 16px;
  background-color: var(--color-background-primary);
}
.subbanner .bnr a {
  display: block;
}

.subbanner .bnr img {
  width: 100% !important;
  max-width: 360px;
  margin: 0 !important;
  border-radius: 8px;
  vertical-align: top;
}

@media (max-width: 767.98px) {
  .subbanner .bnr a:first-child {
    margin-top: 32px;
  }
  .subbanner .bnr a:last-child {
    margin-bottom: 32px;
  }
}
@media (min-width: 768px) {
  .subbanner .bnr {
    padding-top: 40px;
  }
}

/* modalSend
++++++++++++++++++++++++++++++++++++++++ */
html.is-modalOpen {
  --scroll-padding-top: 0;
}
html.is-modalOpen body[data-gmoheader="pc"] .modalSend {
  margin-top: -29px;
}
html.is-modalOpen body {
  overflow: hidden;
}
html.is-modalOpen .modalSend {
  display: flex;
}
.modalSend {
  display: none;
  position: fixed;
  width: 100vw;
  min-height: 100vh;
  height: 100vh;
  height: 100%;
  background-color: rgba(255,255,255,0.8);
  z-index: 1000000;
  justify-content: center;
  align-items: center;
}
.modalSend ._wrap {
  max-height: 100vh;
  overflow-y: auto;
  width: 336px;
  height: fit-content;
  max-height: 100vh;
  border-radius: 8px;
  background-color: #fff;
  z-index: 1000001;
  box-shadow: 0px 8px 32px 0px #00000033;
}
.modalSend ._wrap ._ttl {
  position: relative;
  text-align: center;
  background: linear-gradient(83.54deg, #4CC2D6 5.16%, #7EA8EE 94.84%);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  line-height: 56px;
  letter-spacing: 0.05em;
  text-align: center;
  height: 56px;
}
.modalSend ._wrap ._ttl .icon {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  margin-left: 8px;
  vertical-align: middle;
  background-image: var(--bgi-icon-faq);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.modalSend ._wrap ._inner {
  padding: 128px 24px 24px;
  background-repeat: no-repeat;
  background-position: center top 17px;
  background-size: 160px;
  background-image: var(--bgi-sendmail);
}
.modalSend.-error ._wrap ._inner {
  background-image: var(--bgi-sorry);
}
.modalSend ._wrap ._inner ._sendmail {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 0;
  position: relative;
}
.modalSend ._wrap ._inner ._sendmail p {
  width: 100%;
  margin: 0;
  padding: 0 16px 0 80px;
  line-height: 40px;
  height: 40px;
  background: #EFF5FA;
}
.modalSend ._wrap ._inner ._sendmail::before {
  width: 100px;
  height: 40px;
  line-height: 40px;
  position: absolute;
  display: block;
  content: "送信先";
  margin: auto;
  left: 16px;
  font-size: 14px;
  color: #8299AE;
}
.modalSend ._wrap ._inner p {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  margin: 24px auto 12px;
}
.modalSend.-error ._wrap ._inner p {
  text-align: center;
}
.modalSend ._wrap ._inner ._send {
  margin-top: 12px;
  margin-bottom: 20px;
  margin-left: auto;
  width: 100%;
  text-align: right;
  height: 20px;
}
.modalSend ._wrap ._inner ._send .loader {
  width: 20px;
  height: 20px;
  margin-right: 16px;
  margin-left: auto;
  transform: translate3d(0,0,0);
  opacity: 1;
}
.modalSend ._wrap ._inner ._send a {
  font-size: 14px;
  line-height: 1.4;
  line-height: 20px;
}
.modalSend.-error ._wrap ._inner ._send a {
  display: block;
  margin-top: 85px;
}
.modalSend ._wrap ._inner ._btn {
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 128px;
  height: 40px;
  border-radius: 28px;
  margin: auto;
  color: #0A1F33;
  border: 1px solid #DDE0E5;
  background-color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
}

@media (max-width: 767.98px) {
  html.is-modalOpen .modalSend {
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  html.is-modalOpen body .modalSend {
    width: 1200px;
  }
}
@media (hover: hover) {
  .modalSend ._wrap ._inner ._btn {
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .modalSend ._wrap ._inner ._btn:hover {
    opacity: 0.7;
  }
}

/* +++++++++++++++++++++++++++++++++++++ */