@charset "UTF-8";
/* 
================================================================================
サイズ
================================================================================
*/
/* 
================================================================================
色
================================================================================
*/
/* 
================================================================================
書体
================================================================================
*/
/* 
================================================================================
設定
================================================================================
*/
/* 
================================================================================
追加オプション
================================================================================
*/
/* 
================================================================================
サイズ
================================================================================
*/
/* 
================================================================================
色
================================================================================
*/
/* 
================================================================================
書体
================================================================================
*/
/* 
================================================================================
設定
================================================================================
*/
/* 
================================================================================
追加オプション
================================================================================
*/
/* $break-point以下の時に@contentを適用 */
/* $break-point以上の時に@contentを適用 */
/* $break-point-min以上、$break-point-max以下の時に@contentを適用 */
/* 
================================================================================
サイズ
================================================================================
*/
/* 
================================================================================
色
================================================================================
*/
/* 
================================================================================
書体
================================================================================
*/
/* 
================================================================================
設定
================================================================================
*/
/* 
================================================================================
追加オプション
================================================================================
*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap");
/*/////////////////////////
 reset
//////////////////////////*/
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  border: 0; /*font-size: 100%;font: inherit;*/
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a,
a:link,
button {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none !important;
  color: inherit;
}
a.blank-link:not(.noline)::after,
a:link.blank-link:not(.noline)::after,
button.blank-link:not(.noline)::after {
  content: "";
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(0, -25%);
  width: 0.8em;
  height: 0.8em;
  background: url(../img/icon/icon_blank.svg) center center/contain no-repeat;
}
a.blank-link:not(.noline) .iconBlank,
a:link.blank-link:not(.noline) .iconBlank,
button.blank-link:not(.noline) .iconBlank {
  display: inline;
  transform: translate(0, -35%);
  width: 0.7142857143rem;
  height: auto;
  margin-left: 0.2em;
}

b,
strong {
  font-weight: 700;
}

img,
svg {
  display: block;
  width: 100%;
  height: auto;
}

* {
  box-sizing: border-box;
}

small {
  font-size: 0.85em;
  letter-spacing: 0;
  font-weight: 300;
}

sup,
sub {
  outline: 0;
  border: 0;
}

img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: auto;
}

/* 
================================================================================
tag
================================================================================
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.5;
  text-align: center;
  margin: auto;
  width: 100%;
  margin-bottom: 1em;
}

p {
  width: 100%;
  margin-bottom: 1em;
  word-break: break-all;
}

p + h4 {
  margin-top: 2em;
}

img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 100%;
  height: auto;
}

img,
input,
svg,
*:before,
*:after {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

a:hover img,
a:hover input {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

dl dt {
  text-align: left;
  font-size: 1.2em;
  margin-bottom: 0.5em;
}
dl dd + dt {
  margin-top: 1em;
}
dl dd:not(:last-child) {
  margin-bottom: 1.5em;
}
dl.count {
  counter-reset: ref-counter; /* カウンターを初期化 */
}
dl.count dt {
  font-size: 1em;
  line-height: 1.4;
  padding-left: 1.5em;
  counter-increment: ref-counter;
}
dl.count dt::before {
  content: "" counter(ref-counter) "."; /* ※＋数字 */
  position: absolute;
  left: 0;
}

svg {
  width: 100%;
  height: auto;
}
svg g path {
  stroke: #404040;
  fill: #404040;
  stroke-width: 0.05;
  stroke-dashoffset: 0;
}

ul {
  list-style: disc;
  padding-left: 1.5em;
}
ul li {
  position: relative;
  line-height: 1.6;
}
ul li:not(:last-child) {
  margin-bottom: 1em;
}

ol {
  list-style: decimal;
  padding-left: 1.5em;
}
/* 
================================================================================
Guide & Debug tool
================================================================================
*/
.sampledummy {
  margin: 1em;
  padding: 1em;
  background-color: #d9f5f1;
}

.pageDebuger {
  font-size: 12px;
  line-height: 1.4;
  position: fixed;
  right: 0em;
  bottom: 0em;
  width: fit-content;
  z-index: 10000;
  background-color: #000 !important;
  color: #fff;
}
.pageDebuger dl dt {
  color: yellow;
  background-color: #222;
  padding: 0.2em;
}
.pageDebuger dl dd {
  margin-bottom: 1em;
  padding: 0.2em;
}

body.guide .template_header, body.guide .template_footer {
  background-color: #ddd;
}
body.guide .template_include {
  background-color: #f5ecd8;
}
body.guide .template_header, body.guide .template_include, body.guide .template_footer {
  margin: 2em;
  padding: 1em;
  border: dashed 2px #000;
}
body.guide .template_header::before, body.guide .template_include::before, body.guide .template_footer::before {
  display: block;
}
body.guide .template_header::before {
  content: "header.php";
}
body.guide .template_include::before {
  content: attr(data-temp) "";
}
body.guide .template_footer::before {
  content: "footer.php";
}
body.guide .fn {
  margin: 1em;
  padding: 1em;
  background-color: #f2f2f2;
}
body.guide .fn h6 {
  font-size: 1.2em;
  margin-bottom: 1em;
}
body.guide .fn ul {
  display: flex;
}
body.guide .fn ul li {
  padding: 0.5em;
}
body.guide .fn ul li:not(:last-child)::after {
  content: " > ";
  display: inline-block;
  margin-left: 1em;
}
body.guide .fn ul li a {
  text-decoration: underline;
}

dl.alldata {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5em;
}
dl.alldata dd {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5em;
}

/* 
================================================================================
サイズ
================================================================================
*/
/* 
================================================================================
色
================================================================================
*/
/* 
================================================================================
書体
================================================================================
*/
/* 
================================================================================
設定
================================================================================
*/
/* 
================================================================================
追加オプション
================================================================================
*/
/* 
================================================================================
サイズ
================================================================================
*/
/* 
================================================================================
色
================================================================================
*/
/* 
================================================================================
書体
================================================================================
*/
/* 
================================================================================
設定
================================================================================
*/
/* 
================================================================================
追加オプション
================================================================================
*/
/* $break-point以下の時に@contentを適用 */
/* $break-point以上の時に@contentを適用 */
/* $break-point-min以上、$break-point-max以下の時に@contentを適用 */
/* 
================================================================================
fonts
================================================================================
*/
/* 
================================================================================
class
================================================================================
*/
@media screen and (max-width: 768px) {
  #container .only-pc {
    display: none;
  }
}
#container .only-sp {
  display: none;
}
@media screen and (max-width: 768px) {
  #container .only-sp {
    display: block;
  }
  #container .only-sp.flex {
    display: flex;
  }
}
#container .only-under1700 {
  display: none;
}
@media screen and (max-width: 1700px) {
  #container .only-under1700 {
    display: block;
  }
  #container .only-under1700.flex {
    display: flex;
  }
}
#container .only-lang {
  height: 27.7777777778cqw;
  padding-bottom: 6.9444444444cqw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}
#container .null {
  height: 0px;
  margin: 0;
  padding: 0;
}
body:not(.lang-ja) #container .lang-ja {
  display: none;
}
body:not(.lang-kr) #container .lang-kr {
  display: none;
}
#container .lang-en {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
}
#container .lang-en.tuning {
  font-size: 1.3em;
  transform: translate(0, 7%);
  padding-right: 0.2em;
}
#container .lang-jp.function::before, #container .lang-kr.function::before {
  content: "＜フィルターフック切り替え＞";
  background-color: green;
  color: #fff;
  padding: 0.5em;
  display: none;
  font-size: 10px;
}
#container .lang-jp.dialog::before, #container .lang-kr.dialog::before {
  content: "＜ダイヤログ切り替え＞";
  background-color: yellow;
  color: #000;
  padding: 0.5em;
  display: block;
  font-size: 10px;
}
#container .tag-head::before {
  content: attr(data-en);
  display: block;
  position: relative;
  width: 100%;
  transform: translate(0, 0%);
  line-height: 1;
  font-size: 1em;
  font-weight: 400;
  opacity: 0.5;
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}
#container .text-left {
  text-align: left !important;
}
#container .text-center {
  text-align: center !important;
}
#container .text-right {
  text-align: right !important;
}
#container .btn-item {
  --cut-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6944444444cqw 5.5555555556cqw;
  min-height: 5.5555555556cqw;
  background-color: #064b5c; /* 画像に近い色 */
  color: #f8fbce;
  border: none;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.4;
  cursor: pointer;
  /* 多角形で切り抜き */
  /* 左上 -> 右上(x) -> 右上(y) -> 右下 -> 左下(x) -> 左下(y) */
  clip-path: polygon(0 0, calc(100% - var(--cut-size)) 0, 100% var(--cut-size), 100% 100%, var(--cut-size) 100%, 0 calc(100% - var(--cut-size)));
  /* width可変に対応 */
  min-width: 38.8888888889cqw;
}
@media screen and (max-width: 768px) {
  #container .btn-item {
    --cut-size: 15px;
    clip-path: polygon(0 0, calc(100% - var(--cut-size)) 0, 100% var(--cut-size), 100% 100%, var(--cut-size) 100%, 0 calc(100% - var(--cut-size)));
    padding: 2.7777777778cqw 5.5555555556cqw;
    min-height: 11.1111111111cqw;
    min-width: 55.5555555556cqw;
  }
}
#container .btn-item:hover {
  background-color: #09718a;
}
#container .btn-item.bg-yellow {
  background-color: #ffd200;
  color: #303030;
}
#container .btnWrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2em;
}
@media screen and (max-width: 768px) {
  #container .btnWrap {
    flex-wrap: wrap;
    gap: 1em;
  }
}
#container .btnWrap .btn {
  margin: 0 auto;
}
#container fieldset {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
}
#container fieldset legend {
  padding-inline: 1rem;
  padding-block: 0.25rem;
  background-color: #333;
  color: #fff;
  height: auto;
  margin: auto;
  display: none;
}
#container fieldset .div_text:not(:last-child) {
  margin-bottom: 2em;
}
#container fieldset input[type=text],
#container fieldset input[type=password],
#container fieldset input[type=email] {
  width: 100%;
}
#container fieldset .input-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1em 0.5em;
  margin-bottom: 2em;
}
@media screen and (max-width: 768px) {
  #container fieldset .input-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em;
    text-align: left;
  }
}
#container fieldset .input-wrap .input-group {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}
@media screen and (max-width: 768px) {
  #container fieldset .input-wrap .input-group {
    display: block;
  }
}
#container fieldset .input-wrap .input-group label {
  padding: 0.25em 1em 0;
  text-align: right;
}
@media screen and (max-width: 768px) {
  #container fieldset .input-wrap .input-group label {
    padding: 0.25em 0em 0;
    display: block;
    width: 100%;
    text-align: left;
  }
}
#container fieldset .input-wrap .input-group input {
  min-width: 41.6666666667cqw;
}
#container fieldset .input-wrap .input-group .div_select {
  width: fit-content;
  text-align: left;
  display: inline-flex;
  position: relative;
}
#container fieldset .input-wrap .input-group .div_select::after {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 15px;
  width: 10px;
  height: 7px;
  background-color: #535353;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: "";
  pointer-events: none;
}
#container fieldset .input-wrap .input-group .div_select select {
  outline: none;
  appearance: none;
  min-width: 230px;
  height: 2.8em;
  padding: 0.4em calc(0.8em + 30px) 0.4em 1em;
  border: 1px solid #49b1c5;
  background-color: #fff;
  color: #333333;
  font-size: 1em;
  cursor: pointer;
}
#container fieldset .policy-text {
  margin-bottom: 1em;
}
#container fieldset .agree-check {
  margin-bottom: 2em;
}
#container fieldset .delete-check {
  margin-bottom: 2em;
}
#container fieldset .delete-check ul {
  width: fit-content;
  max-width: 69.4444444444cqw;
  margin: auto;
}
#container fieldset .field-note {
  font-size: 0.8em;
  line-height: 1.4;
  padding-top: 0.2em;
  margin-bottom: 0.5em;
}
#container fieldset .action-wrap {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#container fieldset .button_div {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#container fieldset .button_div.is-deactive {
  pointer-events: none;
}
#container fieldset .button_div.is-deactive .buttons {
  background-color: #aaa;
  color: #ccc;
}
#container fieldset .button_div_item:nth-of-type(1) {
  order: 2;
}
#container fieldset .button_div input[name=Submit],
#container fieldset .button_div input.buttons,
#container fieldset .button_div button[name=Submit],
#container fieldset .button_div button.buttons {
  margin-bottom: 1em;
  --cut-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6944444444cqw 5.5555555556cqw;
  min-height: 5.5555555556cqw;
  background-color: #064b5c; /* 画像に近い色 */
  color: #f8fbce;
  border: none;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.4;
  cursor: pointer;
  /* 多角形で切り抜き */
  /* 左上 -> 右上(x) -> 右上(y) -> 右下 -> 左下(x) -> 左下(y) */
  clip-path: polygon(0 0, calc(100% - var(--cut-size)) 0, 100% var(--cut-size), 100% 100%, var(--cut-size) 100%, 0 calc(100% - var(--cut-size)));
  /* width可変に対応 */
  min-width: 38.8888888889cqw;
}
@media screen and (max-width: 768px) {
  #container fieldset .button_div input[name=Submit],
  #container fieldset .button_div input.buttons,
  #container fieldset .button_div button[name=Submit],
  #container fieldset .button_div button.buttons {
    --cut-size: 15px;
    clip-path: polygon(0 0, calc(100% - var(--cut-size)) 0, 100% var(--cut-size), 100% 100%, var(--cut-size) 100%, 0 calc(100% - var(--cut-size)));
    padding: 2.7777777778cqw 5.5555555556cqw;
    min-height: 11.1111111111cqw;
    min-width: 55.5555555556cqw;
  }
}
#container fieldset .button_div input[name=Submit]:hover,
#container fieldset .button_div input.buttons:hover,
#container fieldset .button_div button[name=Submit]:hover,
#container fieldset .button_div button.buttons:hover {
  background-color: #09718a;
}
#container .entrylist {
  margin-bottom: 2em;
  text-align: left;
}
#container .entrylist-item {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0em;
}
#container .entrylist-item:not(:last-child) {
  margin-bottom: 2.7777777778cqw;
}
#container .entrylist-item .meta {
  font-size: 0.8rem;
  display: grid;
  grid-template-columns: 6em auto 1fr;
  grid-gap: 1em;
  align-items: center;
  margin-bottom: 0.6944444444cqw;
}
#container .entrylist-item .meta .date {
  font-weight: bold;
}
#container .entrylist-item .meta .series a {
  text-decoration: none;
  padding: 0.2em 0.6em;
  min-width: 10em;
  background-color: #064b5c;
  color: #fff;
}
#container .entrylist-item .title a {
  text-decoration: none;
  display: block; /* inline-block → block に変更 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%; /* 親要素に収める */
}
#container .entrylist-item .title a:not(.nolink):hover {
  background-color: #ffd200;
}
#container .entrylist-item.icon-new .meta .status {
  position: relative;
  height: 100%;
}
#container .entrylist-item.icon-new .meta .status::after {
  content: "NEW";
  color: #d7000f;
  letter-spacing: 0;
  font-weight: bold;
  position: absolute;
  top: -0.2em;
  left: 0;
  line-height: 1;
}
#container .entrylist.archives {
  border-bottom: 0;
}
#container .entrylist.archives .entrylist-item {
  display: block;
  text-align: left;
}
#container .entrylist.archives .entrylist-item:not(:last-child) {
  margin-bottom: 4.1666666667cqw;
}
#container .entrylist.archives .entrylist-item-date time {
  font-size: 0.8rem;
}
#container .entrylist.archives .entrylist-item-contents {
  display: grid;
  grid-template-columns: 34.7222222222cqw 1fr;
  grid-gap: 2.7777777778cqw;
  font-size: 0.85rem;
}
@media screen and (max-width: 768px) {
  #container .entrylist.archives .entrylist-item-contents {
    grid-template-columns: 1fr;
  }
}
#container .entrylist.archives .entrylist-item-contents-unit h4 {
  font-size: 1rem;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 768px) {
  #container .entrylist.archives .entrylist-item-contents-unit .item-frame {
    height: auto;
    aspect-ratio: 16/9;
  }
}
#container .entrylist.archives .entrylist-item.icon-new time::after {
  content: "NEW";
  display: inline-block;
  color: #d7000f;
  margin-left: 1em;
  letter-spacing: 0;
}
#container .series-unit {
  margin-bottom: 4.8611111111cqw;
  border: solid 2px #303030;
  padding: 5.5555555556cqw 8.3333333333cqw;
}
#container .series-unit h3 {
  margin-bottom: 1em;
}
#container .series-unit h3 img {
  width: 27.7777777778cqw;
  margin: auto;
}
#container .series-banner {
  padding-top: 6.9444444444cqw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
#container .series-banner-item {
  width: 34.7222222222cqw;
  margin: 0 2.7777777778cqw;
}
@media screen and (max-width: 768px) {
  #container .series-banner-item {
    width: 48.6111111111cqw;
    margin: auto;
  }
}
#container .sitelogo {
  width: 68.0555555556cqw;
  margin-bottom: 4.1666666667cqw;
}
#container .phrase-label {
  font-size: 1.5em;
  margin-bottom: 4.1666666667cqw;
}
#container .spacer {
  display: block;
  width: 100%;
  height: 3.4722222222cqw;
}
#container .spacer.size-s {
  height: 1.3888888889cqw;
}
#container .spacer.size-l {
  height: 6.9444444444cqw;
}
#container .spacer.size-footer {
  height: 20.8333333333cqw;
}
#container .wpmem-title {
  font-size: 2.7777777778cqw;
  margin-bottom: 1.3888888889cqw;
}
#container .wpmem-msg-content {
  color: #c00;
  margin-bottom: 4.1666666667cqw;
}
#container .wpmem_msg {
  background-color: #c00;
  color: #fff;
  padding: 2em;
  margin-bottom: 2em;
}
#container .wpmem-mydata.my_qr_code img {
  width: 200px;
  margin: auto;
}
#container .wpmem-mydata.my_members_card h3 {
  display: none;
}
#container .wpmem-mydata.my_members_card .card-image {
  position: relative;
  background: url(../img/members_card_base.png) center center/contain no-repeat;
  width: 52.7777777778cqw;
  aspect-ratio: 1000/1585;
  margin: auto;
  color: #c00;
}
#container .wpmem-mydata.my_members_card .card-image .member-number {
  position: absolute;
  top: 25cqw;
  left: 0%;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 1em;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#container .wpmem-mydata.my_members_card .card-image .member-number img {
  width: auto;
  height: 2.0833333333cqw;
  margin: 0 0.1em;
}
#container .wpmem-message--success .wpmem-title {
  display: none;
}
#container .fieldset .label {
  display: flex;
  justify-content: center;
}
#container .fieldset .btnWrap {
  margin-bottom: 0;
}
#container .separator {
  width: 100%;
  margin: 5.5555555556cqw 0;
}
#container .separator-or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
#container .separator-or::before, #container .separator-or::after {
  content: "";
  display: block;
  background: transparent linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) no-repeat center/100% 1px;
}
#container .separator-or span {
  display: inline-block;
  padding: 0 1em;
}
#container .separator-double {
  width: 100%;
  height: 0.8333333333cqw;
  border: solid 2px #303030;
  border-right: 0;
  border-left: 0;
  margin-bottom: 4.8611111111cqw;
}
#container dl.unit dt, #container dl.faq dt {
  font-weight: bold;
}
#container dl.unit dd, #container dl.faq dd {
  padding-left: 1em;
}
#container dl.unit dd:not(:last-child), #container dl.faq dd:not(:last-child) {
  margin-bottom: 3em;
}
#container dl.unit dd ul, #container dl.faq dd ul {
  padding-top: 1em;
}
#container .item-frame {
  --cut-size: 10px;
  --cut-size-wrap: 9px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0rem;
  min-height: inherit;
  height: 10rem;
  line-height: 1;
  clip-path: polygon(0 0, calc(100% - var(--cut-size)) 0, 100% var(--cut-size), 100% 100%, var(--cut-size) 100%, 0 calc(100% - var(--cut-size)));
  min-width: 5.7142857143rem;
  background-color: #d2d2d2;
  overflow: hidden;
}
#container .item-frame-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  overflow: hidden;
  padding: 0rem;
  width: 100%;
  height: 100%;
  z-index: 2;
}
#container .item-frame-wrap img {
  position: absolute;
  object-fit: cover;
  top: 0.0714285714rem;
  left: 0.0714285714rem;
  width: calc(100% - 0.1428571429rem);
  height: calc(100% - 0.1428571429rem);
  clip-path: polygon(0 0, calc(100% - var(--cut-size-wrap)) 0, 100% var(--cut-size-wrap), 100% 100%, var(--cut-size-wrap) 100%, 0 calc(100% - var(--cut-size-wrap)));
}
#container .item-frame::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.0714285714rem;
  left: 0.0714285714rem;
  width: calc(100% - 0.1428571429rem);
  height: calc(100% - 0.1428571429rem);
  clip-path: polygon(0 0, calc(100% - var(--cut-size-wrap)) 0, 100% var(--cut-size-wrap), 100% 100%, var(--cut-size-wrap) 100%, 0 calc(100% - var(--cut-size-wrap)));
  background-image: linear-gradient(#edf1f2, #d4dddf);
  z-index: -1;
}
#container .item-frame[data-type=audio] span {
  display: block;
  width: 3.1428571429rem;
  height: 3rem;
  background: url(../img/icon/audio.png) center center/contain no-repeat;
}
#container .item-frame.icon-zoom {
  cursor: pointer;
}
#container .item-frame.icon-zoom::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0.3571428571rem;
  right: 0.3571428571rem;
  width: 1.7142857143rem;
  height: 1.7142857143rem;
  background: url(../img/icon/zoom.png) center center/contain no-repeat;
  z-index: 5;
}
#container .modal-window {
  position: fixed;
  inset: 0;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  display: none;
  transition: opacity 300ms ease;
}
#container .modal-window.open {
  display: flex;
  opacity: 1;
  pointer-events: all;
}
#container .modal-window.open .modal-close,
#container .modal-window.open .modal-window-contents {
  pointer-events: all;
}
#container .modal-window-close {
  position: absolute;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
#container .modal-window-frame {
  position: relative;
  width: 90%;
  max-width: 57.1428571429rem;
  height: auto;
  z-index: 1001;
  pointer-events: none;
}
#container .modal-window-frame-close {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(110%, -110%);
  color: #fff;
  font-size: 3.5714285714rem;
}
@media screen and (max-width: 768px) {
  #container .modal-window-frame-close {
    transform: translate(0.2em, -110%);
  }
}
#container .modal-window-contents audio {
  width: 100%;
}
#container .grid {
  width: 70%;
  margin: 10em auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
}
#container .grid-item {
  background-color: #aaa;
  display: grid;
  grid-template-rows: subgrid;
  grid-gap: 0.2em;
  grid-row: span 4;
}
#container .grid-item div {
  text-align: left;
  border: solid 1px #c00;
  padding: 1em;
}
/* 
================================================================================
サイズ
================================================================================
*/
/* 
================================================================================
色
================================================================================
*/
/* 
================================================================================
書体
================================================================================
*/
/* 
================================================================================
設定
================================================================================
*/
/* 
================================================================================
追加オプション
================================================================================
*/
/* 
================================================================================
サイズ
================================================================================
*/
/* 
================================================================================
色
================================================================================
*/
/* 
================================================================================
書体
================================================================================
*/
/* 
================================================================================
設定
================================================================================
*/
/* 
================================================================================
追加オプション
================================================================================
*/
/* $break-point以下の時に@contentを適用 */
/* $break-point以上の時に@contentを適用 */
/* $break-point-min以上、$break-point-max以下の時に@contentを適用 */
/* 
================================================================================
body
================================================================================
*/
html {
  background-color: #000;
  font-size: 14px;
}
@media screen and (max-width: 720px) {
  html {
    font-size: 3.8888888889vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 3.3333333333vw;
  }
}
html.scrollMode_onepage {
  overflow: hidden;
}
body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.03em;
  text-align: center;
  overflow: auto;
  font-feature-settings: "palt";
  color: #000;
  padding: 0;
  margin: 0;
  background: url(../img/common/bg.png) center top;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  body {
    line-height: 1.8;
    font-weight: 600;
  }
}
body.scrollMode_onepage {
  -webkit-overflow-scrolling: touch;
}
body.modal-active {
  /* when modal active */
  touch-action: none;
  -webkit-overflow-scrolling: none;
  overflow: hidden;
  /* Other browsers */
  overscroll-behavior: none;
}
body.fixed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
}
body.loading-finished #container {
  opacity: 1;
}
body.logged-in #membership-banner {
  display: none;
}
body.menu-open #header-menu {
  height: 100vh !important;
}
body.footer-show #membership-banner {
  opacity: 0;
  transform: scale(0);
}

#container {
  opacity: 0;
  transition: opacity 300ms ease;
}
#container #base {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}
#container #base #global-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  min-height: 4.2857142857rem;
  display: flex;
  align-items: center;
  background-color: #fff;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.6));
}
#container #base #global-header a {
  color: #064b5c;
  font-weight: 700;
  letter-spacing: 0;
}
#container #base #global-header .l-header-primary {
  display: flex;
  align-items: center;
  margin-left: 1.4285714286rem;
  position: relative;
  z-index: 3;
}
#container #base #global-header .l-header-primary .logo {
  position: relative;
  width: 9.2857142857rem;
  margin: 0 1.4285714286rem 0 0;
}
#container #base #global-header .l-header-primary ul {
  list-style: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2.1428571429rem;
}
@media screen and (max-width: 768px) {
  #container #base #global-header .l-header-primary ul {
    display: none;
  }
}
#container #base #global-header .l-header-primary ul li {
  margin: 0;
}
#container #base #global-header .l-header-primary ul li a {
  display: block;
}
#container #base #global-header .tools {
  position: absolute;
  right: 1.4285714286rem;
  top: 50%;
  transform: translate(0, -50%);
  display: flex;
  z-index: 4;
}
@media screen and (max-width: 768px) {
  #container #base #global-header .tools {
    right: 18.0555555556vw;
  }
}
#container #base #global-header .tools .logout {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  #container #base #global-header .tools .logout {
    display: none;
  }
}
#container #base #global-header .tools .logout .btn-item {
  --cut-size: 5px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.7142857143rem;
  min-height: inherit;
  height: 1.8571428571rem;
  background-color: #064b5c;
  color: #064b5c;
  border: none;
  font-size: 0.8571428571rem;
  line-height: 1;
  font-weight: bold;
  clip-path: polygon(0 0, calc(100% - var(--cut-size)) 0, 100% var(--cut-size), 100% 100%, var(--cut-size) 100%, 0 calc(100% - var(--cut-size)));
  min-width: 5.7142857143rem;
}
#container #base #global-header .tools .logout .btn-item > span {
  display: inline-block;
  transform: translateY(-0.0714285714rem);
  line-height: 0;
}
#container #base #global-header .tools .logout .btn-item::before {
  --cut-size-in: 4px;
  content: "";
  display: block;
  position: absolute;
  top: 0.1428571429rem;
  left: 0.1428571429rem;
  width: calc(100% - 0.2857142857rem);
  height: calc(100% - 0.2857142857rem);
  clip-path: polygon(0 0, calc(100% - var(--cut-size-in)) 0, 100% var(--cut-size-in), 100% 100%, var(--cut-size-in) 100%, 0 calc(100% - var(--cut-size-in)));
  background-color: #fff;
  z-index: -1;
}
#container #base #global-header .tools .mypage {
  display: flex;
  align-items: center;
  margin-right: 1.4285714286rem;
}
@media screen and (max-width: 768px) {
  #container #base #global-header .tools .mypage {
    display: none;
  }
}
#container #base #global-header .tools .lang {
  margin-left: 1.4285714286rem;
  border: solid 0.1428571429rem #064b5c;
  padding: 0.1428571429rem;
}
#container #base #global-header .tools .lang a {
  font-size: 0.8571428571rem;
}
#container #base #global-header .tools .lang-switch-container {
  border: solid 0.0714285714rem #064b5c;
  height: 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
#container #base #global-header .tools .lang-switch-container a {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 0.7142857143rem;
  background-color: #fff;
}
#container #base #global-header .tools .lang-switch-container a.active {
  cursor: default;
  pointer-events: none;
  color: #fff;
  background-color: #064b5c;
}
#container #base #global-header:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 2;
}
#container #base #global-header .menuBtn {
  position: absolute;
  top: 0;
  right: 0;
  width: 4.2857142857rem;
  height: 4.2857142857rem;
  color: #fff;
  font-size: 0.5em;
  z-index: 4;
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
#container #base #global-header .menuBtn span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5.5555555556vw;
  height: 4.1666666667vw;
}
#container #base #global-header .menuBtn span hr {
  position: absolute;
  margin: 0;
  width: 100%;
  height: 2px;
  background-color: #064b5c;
  border: 0;
}
#container #base #global-header .menuBtn span hr:nth-of-type(1) {
  top: 0;
}
#container #base #global-header .menuBtn span hr:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
}
#container #base #global-header .menuBtn span hr:nth-of-type(3) {
  bottom: 0;
}
body.menu-open #container #base #global-header .menuBtn span hr:nth-of-type(1) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
body.menu-open #container #base #global-header .menuBtn span hr:nth-of-type(2) {
  display: none;
}
body.menu-open #container #base #global-header .menuBtn span hr:nth-of-type(3) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  bottom: auto;
}
@media screen and (max-width: 768px) {
  #container #base #global-header .menuBtn {
    display: flex;
  }
}
#container #base #global-header #header-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 1;
  display: flex;
  justify-content: center;
  overflow: hidden;
  height: 0;
  transition: all 300ms ease-in-out;
}
#container #base #global-header #header-menu .l-header-menu-contents {
  padding-top: 27.7777777778vw;
}
#container #base #global-header #header-menu .l-header-menu-contents .btn a {
  color: #fff;
}
#container #base #global-header #header-menu .l-header-menu-contents ul {
  list-style: none;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
}
#container #base #global-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: dashed 1px #666;
  background-color: #333;
  color: #fff;
}
#container #base #global-footer .l-footer-contents {
  width: 100%;
  min-height: 14.2857142857rem;
  padding-top: 4.2857142857rem;
  padding-bottom: 7.1428571429rem;
  max-width: 720px;
  background-size: 27px 27px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  container-type: inline-size;
}
#container #base #global-footer ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2.1428571429rem;
  display: flex;
  justify-content: center;
  gap: 1.4285714286rem;
}
#container #base #global-footer .copyright {
  font-size: 0.7142857143rem;
  color: #666;
}
#container #base #global-main {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: calc(100dvh - 14.2857142857rem);
}
#container #base #global-main article:not(:last-child) {
  margin-bottom: 7.1428571429rem;
}
#container #base #global-main-container {
  width: 100%;
  min-height: 14.2857142857rem;
  padding-top: 4.2857142857rem;
  padding-bottom: 7.1428571429rem;
  max-width: 720px;
  background: url(../img/common/bg_grid.png) center top;
  background-size: 27px 27px;
  z-index: 2;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.6));
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  container-type: inline-size;
}
@media screen and (min-width: 720px) {
  #container #base #global-main-container {
    max-width: 720px;
  }
}
#container #base #global-main #membership-banner {
  position: fixed;
  bottom: 1.4285714286rem;
  right: 1.4285714286rem;
  padding: 0;
  z-index: 100;
  transition: all 200ms ease;
}
@media screen and (max-width: 768px) {
  #container #base #global-main #membership-banner {
    bottom: 6.9444444444vw;
    right: 2.7777777778vw;
  }
}
#container #base #global-main #membership-banner a {
  position: relative;
  bottom: 0rem;
  right: 0rem;
  width: 10.7142857143rem;
  height: 10.7142857143rem;
  aspect-ratio: 1/1;
  border-radius: 99999px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffd200;
  line-height: 1.4;
  font-weight: bold;
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.6));
}
@media screen and (max-width: 768px) {
  #container #base #global-main #membership-banner a {
    width: 20.8333333333vw;
    height: 20.8333333333vw;
    font-size: 1.9444444444vw;
  }
}

/* 
================================================================================
contents
================================================================================
*/
#container section {
  width: 100%;
  padding: 0cqw 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
body.slug-check #container section {
  margin-bottom: 7.1428571429rem;
}
#container section div {
  width: 100%;
}
#container section input[type=text], #container section input[type=password], #container section input[type=email] {
  border: solid 1px #49b1c5;
  border-radius: 2px;
  padding: 0.75em;
}
#container section a:not(.btn-item) {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  line-height: 1.8;
  position: relative;
}
#container section section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}
#container section section:not(:last-of-type) {
  margin-bottom: 13.8888888889cqw;
}
@media screen and (max-width: 768px) {
  #container section section:not(:last-of-type) {
    margin-bottom: 13.8888888889cqw;
  }
}
#container section article {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}
#container section article:not(:last-of-type) {
  margin-bottom: 7.1428571429rem;
}
#container section .section-frame {
  width: 100%;
  max-width: 86.1111111111cqw;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  flex-direction: row;
}
#container section .section-frame.align-top {
  align-content: flex-start;
}
#container section .section-frame > section:first-child {
  padding-top: 0 !important;
}
#container section .section-frame .section-title {
  padding-top: 13.8888888889cqw;
  margin-bottom: 0cqw;
  background: #eee url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;
  text-shadow: 5px -5px black, 4px -4px white;
  font-weight: bold;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
#container section .section-frame .section-title * {
  font-size: 4.4444444444cqw;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #container section .section-frame .section-title * {
    font-size: 6.25cqw;
  }
}
#container section .section-frame .section-title .title-unit {
  display: grid;
  width: fit-content;
  margin: auto;
  grid-template-columns: auto auto;
  align-items: center;
}
@media screen and (max-width: 768px) {
  #container section .section-frame .section-title .title-unit {
    grid-template-columns: 1fr;
    grid-gap: 0em;
  }
}
#container section .section-frame .section-title .title-unit-item:nth-of-type(1) img {
  margin-top: 1.3888888889cqw;
  width: 29.1666666667cqw;
  height: auto;
}
@media screen and (max-width: 768px) {
  #container section .section-frame .section-title .title-unit-item:nth-of-type(1) img {
    width: 69.4444444444cqw;
    margin: auto;
  }
}
#container section .section-frame .section-title .title-unit-item:nth-of-type(2) img {
  width: 29.1666666667cqw;
  height: auto;
}
@media screen and (max-width: 768px) {
  #container section .section-frame .section-title .title-unit-item:nth-of-type(2) img {
    width: 48.6111111111cqw;
    margin: auto;
  }
}
#container section .section-frame .section-subtitle {
  padding-top: 0cqw;
  margin-bottom: 5.5555555556cqw;
}
#container section .section-frame .section-subtitle h2 {
  width: fit-content;
  position: relative;
  font-size: 3.3333333333cqw;
  font-weight: bold;
  color: #303030;
  line-height: 1.2;
  padding: 0 0.2em;
}
@media screen and (max-width: 768px) {
  #container section .section-frame .section-subtitle h2 {
    font-size: 4.8611111111cqw;
  }
}
#container section .section-frame .section-subtitle h2::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.5em;
  background-color: #ffd200;
  z-index: -1;
}
#container section .section-frame .section-summary {
  margin-bottom: 13.8888888889cqw;
}
#container section .entry-header {
  width: stretch;
  text-align: left;
}
#container section .entry-content {
  width: stretch;
  text-align: left;
  margin-bottom: 8.3333333333cqw;
}
#container section .entry-footer {
  width: stretch;
}
#container section .entry-meta {
  display: flex;
  gap: 1em;
  width: fit-content;
  align-items: center;
  margin-bottom: 1em;
}
#container section .entry-meta time {
  font-weight: bold;
}
#container section .entry-meta .category-series {
  display: inline-flex;
  height: 100%;
  align-items: center;
}
#container section .entry-meta .category-series div {
  font-size: 1.3888888889cqw;
  display: inline-block;
  padding: 0.2em 1em;
  min-width: 8em;
  background-color: #064b5c;
  color: #fff;
}
#container section .entry-title h1 {
  width: 100%;
  text-align: left;
  margin-bottom: 1em;
  font-size: 1.5rem;
}

/* 
================================================================================
お問い合わせフォーム
================================================================================
*/
span.wpcf7-list-item.deactive {
  display: inline-block;
  pointer-events: none;
  opacity: 0.3 !important;
}

.ajax-loader {
  position: absolute;
  top: 0;
  opacity: 0;
}

.wpcf7 {
  /* 同意チェックボックスのスタイル例 */
}
.wpcf7 .screen-reader-response {
  position: relative;
  overflow: auto;
  height: auto;
}
.wpcf7-form-control-wrap {
  position: relative;
  display: block;
}
.wpcf7-form-control-wrap[data-name=your-message] .wpcf7-not-valid-tip {
  top: 0 !important;
  transform: translate(0, 50%) !important;
}
.wpcf7-form-control {
  width: 100%;
  padding: 0em;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wpcf7-form-action p {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wpcf7-not-valid-tip {
  display: inline-block !important;
  position: absolute !important;
  top: 50% !important;
  right: 1em !important;
  left: auto;
  padding: 0.6em 1em !important;
  line-height: 1 !important;
  font-size: 0.8em !important;
  transform: translate(0, -50%) !important;
  background-color: #bf0000 !important;
  color: #fff !important;
  border-radius: 1em;
}
.wpcf7-response-output {
  display: none;
  visibility: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 !important;
  transform: translate(0, 0%);
  width: 100%;
  font-size: 1.2em !important;
  text-align: center !important;
  border: 0 !important;
  padding: 0.5em !important;
  color: #064b5c !important;
  background: #eee !important;
}
.wpcf7-submit {
  --cut-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6944444444cqw 5.5555555556cqw;
  min-height: 5.5555555556cqw;
  background-color: #064b5c; /* 画像に近い色 */
  color: #f8fbce;
  border: none;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.4;
  cursor: pointer;
  /* 多角形で切り抜き */
  /* 左上 -> 右上(x) -> 右上(y) -> 右下 -> 左下(x) -> 左下(y) */
  clip-path: polygon(0 0, calc(100% - var(--cut-size)) 0, 100% var(--cut-size), 100% 100%, var(--cut-size) 100%, 0 calc(100% - var(--cut-size)));
  /* width可変に対応 */
  min-width: 38.8888888889cqw;
  max-width: 38.8888888889cqw;
}
@media screen and (max-width: 768px) {
  .wpcf7-submit {
    --cut-size: 15px;
    clip-path: polygon(0 0, calc(100% - var(--cut-size)) 0, 100% var(--cut-size), 100% 100%, var(--cut-size) 100%, 0 calc(100% - var(--cut-size)));
    padding: 2.7777777778cqw 5.5555555556cqw;
    min-height: 11.1111111111cqw;
    min-width: 55.5555555556cqw;
  }
}
.wpcf7-submit:hover {
  background-color: #09718a;
}
.wpcf7-submit:disabled {
  pointer-events: none;
  background-color: #ccc;
  color: #ddd;
}
.wpcf7-not-valid {
  background-color: #fdd2d2 !important;
}
.wpcf7-radio {
  padding: 0;
}
.wpcf7-radio .wpcf7-list-item {
  margin: 0 2em 1em 0;
  border-radius: 0.5em;
  border: dashed 1px #555;
}
@media screen and (max-width: 768px) {
  .wpcf7-radio .wpcf7-list-item {
    width: 100%;
  }
}
.wpcf7-radio .wpcf7-list-item label {
  cursor: pointer;
  display: block;
  padding: 0.5em 2em 0.5em 1em;
}
@media screen and (max-width: 768px) {
  .wpcf7-radio .wpcf7-list-item label {
    line-height: 1.5;
    padding-left: 8.3333333333vw;
  }
  .wpcf7-radio .wpcf7-list-item label input {
    position: absolute;
    top: 2.0833333333vw;
    left: 1.3888888889vw;
  }
  .wpcf7-radio .wpcf7-list-item label small {
    font-size: 0.6em;
  }
}
.wpcf7-radio .wpcf7-list-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.wpcf7-radio .wpcf7-list-item.active {
  background-color: #303030;
  color: #fff;
}
.wpcf7-radio .wpcf7-list-item.active:hover {
  background-color: none;
}
.wpcf7-acceptance {
  margin-bottom: 15px;
  font-size: 0.9em;
}
.wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}
.wpcf7-acceptance:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* 
================================================================================
loader
================================================================================
*/
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 50000;
  transition: all 800ms ease;
}
body.loadingFinish #loader {
  opacity: 0;
  pointer-events: none;
}
#loader #loadingAnim {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.8571428571rem;
  height: 2.8571428571rem;
  border: solid 1px #ccc;
  border-radius: 50%;
  pointer-events: all;
  transform-origin: center;
  transition: transform 0.05s linear; /* スムーズにしたいなら */
}
#loader #loadingAnim::before {
  content: "↑";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: url("../img/arrow/2.svg") center center/100% auto;
  transition: all 300ms ease-in-out;
}
#loader #loadingAnim .arrow {
  width: 2.8571428571rem;
  height: 2.8571428571rem;
  margin-bottom: -0.1428571429rem;
  position: relative;
  background: url("../img/arrow/2.svg") center center/100% auto;
  transition: all 200ms ease;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  #loader #loadingAnim .arrow {
    transform: rotate(-30deg);
    width: 5.5555555556vw;
    height: 5.5555555556vw;
    margin-bottom: 1.3888888889vw;
  }
}
#loader #loadingAnim .arrow::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/arrow/1.svg") center center/100% auto;
  transition: all 300ms ease-in-out;
  transform: translate(0, 0%);
}
#loader #loadingAnim .arrow::after {
  content: "";
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/arrow/3.svg") center center/100% auto;
  transform: translate(0%, 0%) scale(1, 1);
}
#loader #loadingAnim .arrow svg {
  position: absolute;
  top: 0.3571428571rem;
  left: 50%;
  transform: translate(-50%, 0);
  width: 2.8571428571rem;
  height: 2.1428571429rem;
}
@media screen and (max-width: 768px) {
  #loader #loadingAnim .arrow svg {
    top: 0.6944444444vw;
    width: 5.5555555556vw;
    height: 4.1666666667vw;
  }
}
#loader #loadingAnim .arrow path {
  stroke: #222;
  stroke-width: 20;
  fill: none;
}
body.loadingAnimFinish #loader #loadingAnim {
  opacity: 0;
}
#loader #loadingCircle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7.1428571429rem;
  height: auto;
  transition: all 800ms ease;
  visibility: hidden;
}
body.loaderOut #loader #loadingCircle {
  opacity: 0;
  transform: translate(-50%, -50%);
  filter: blur(5px);
}
#loader #loadingCircle::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 227/164;
}
#loader #loadingCircle::after {
  content: "";
  display: block;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  animation-name: loading_anime;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: 500ms;
}
#loader .per {
  display: none;
}

@keyframes loading_circle {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes loading_popup {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -0.8rem, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes loading_anime {
  0% {
    background: url(../img/intro/0.png) center center/contain no-repeat;
  }
  3% {
    background: url(../img/intro/1.png) center center/contain no-repeat;
  }
  6% {
    background: url(../img/intro/2.png) center center/contain no-repeat;
  }
  9% {
    background: url(../img/intro/3.png) center center/contain no-repeat;
  }
  12% {
    background: url(../img/intro/4.png) center center/contain no-repeat;
  }
  15% {
    background: url(../img/intro/5.png) center center/contain no-repeat;
  }
  18% {
    background: url(../img/intro/6.png) center center/contain no-repeat;
  }
  21% {
    background: url(../img/intro/7.png) center center/contain no-repeat;
  }
  24% {
    background: url(../img/intro/8.png) center center/contain no-repeat;
  }
  27% {
    background: url(../img/intro/9.png) center center/contain no-repeat;
  }
  30% {
    background: url(../img/intro/10.png) center center/contain no-repeat;
  }
  33% {
    background: url(../img/intro/11.png) center center/contain no-repeat;
  }
  36% {
    background: url(../img/intro/12.png) center center/contain no-repeat;
  }
  39% {
    background: url(../img/intro/13.png) center center/contain no-repeat;
  }
  42% {
    background: url(../img/intro/14.png) center center/contain no-repeat;
  }
  45% {
    background: url(../img/intro/15.png) center center/contain no-repeat;
  }
  48% {
    background: url(../img/intro/16.png) center center/contain no-repeat;
  }
  51% {
    background: url(../img/intro/17.png) center center/contain no-repeat;
  }
  54% {
    background: url(../img/intro/18.png) center center/contain no-repeat;
  }
  57% {
    background: url(../img/intro/19.png) center center/contain no-repeat;
  }
  60% {
    background: url(../img/intro/20.png) center center/contain no-repeat;
  }
  63% {
    background: url(../img/intro/21.png) center center/contain no-repeat;
  }
  66% {
    background: url(../img/intro/22.png) center center/contain no-repeat;
  }
  69% {
    background: url(../img/intro/23.png) center center/contain no-repeat;
  }
  100% {
    background: url(../img/intro/23.png) center center/contain no-repeat;
  }
}