@charset "UTF-8";
/* css for print */
@media print {
  /* ページのサイズをA4に設定 */
  @page {
    size: A4;
    /* 横向きにしたい場合は "A4 landscape" */
    margin: 1cm;
    /* 適切なマージンを設定 */
  }
  /* 不要な要素を非表示にする */
  header,
  footer,
  nav,
  .no-print {
    display: none;
  }
  /* 用紙幅に合わせて調整 */
  body {
    width: 100%;
    font-size: 12pt;
    /* フォントサイズを調整 */
  }
  /* テーブルや画像の縮小 */
  table,
  img {
    max-width: 100%;
    page-break-inside: avoid;
    /* テーブルや画像が途中で切れるのを防ぐ */
  }
}
section {
  page-break-inside: avoid;
  /* セクションが途中で切れるのを防ぐ */
  page-break-after: always;
  /* セクションの後で改ページを入れる */
}

/* テーブルや長い要素がページをまたぐ場合の対策 */
table {
  page-break-inside: auto;
  /* テーブルは途中で改ページを許可 */
}

tr {
  page-break-inside: avoid;
  /* テーブル行が途中で切れるのを防ぐ */
}

p,
h2,
img {
  page-break-inside: avoid;
  /* 段落や見出し、画像が途中で切れるのを防ぐ */
}

/* common css */
body {
  color: #000;
  font-family: "YakuHanMP", "YakuHanJP", "Noto Sans JP", sans-serif;
  background: none;
  font-size: 16px;
  /* デフォルトのフォントサイズを設定 */
  -webkit-text-size-adjust: none;
  /* iOS Safari向けのプレフィックス */
  -moz-text-size-adjust: none;
  /* Firefox向けのプレフィックス */
  -ms-text-size-adjust: none;
  /* Microsoft Edge向けのプレフィックス */
  text-size-adjust: none;
}

a,
.link {
  color: #343772;
  transition: all 0.5s;
}
a.tdon,
.link.tdon {
  text-decoration: underline;
}
a:hover,
.link:hover {
  color: #4c50a7;
  transition: all 0.5s;
}

button,
input,
select,
textarea {
  font-size: 100%;
  /* Corrects font size in all browsers */
  margin: 0;
  /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
  vertical-align: baseline;
  /* Appearance and consistency in all browsers */
  *vertical-align: middle;
  /* Appearance and consistency in IE6/IE7 */
}

input[type=text],
input[type=email],
input[type=url],
input[type=tel],
input[type=number],
input[type=date],
input[type=time],
input[type=password],
input[type=file],
textarea {
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
  margin-bottom: 1rem;
  background-color: #fafafa;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 36px;
  font-family: "YakuHanMP", "YakuHanJP", "Noto Sans JP", sans-serif;
}

input[type=search] {
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: transparent;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

input[type=reset],
input[type=button],
input[type=submit] {
  background-color: #343772;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 0 none;
  color: #fff;
  cursor: pointer;
  display: block;
  margin-bottom: 30px;
  padding: 6px 18px;
  text-align: center;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

input[type=reset]:hover,
input[type=button]:hover,
input[type=submit]:hover {
  background-color: #747474;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=search]:focus,
input[type=password]:focus,
textarea:focus {
  border-color: rgba(0, 0, 0, 0.2);
  background-color: #fff;
}

input[type=search]:focus {
  background-color: #f8f8f8;
}

input[type=checkbox],
input[type=radio] {
  padding: 0;
  /* Addresses excess padding in IE8/9 */
}

input[type=search] {
  -webkit-appearance: none;
  appearance: none;
}

input[type=color] {
  position: relative;
  top: 0.25em;
}

label {
  display: block;
  margin: 0.25em 0;
}

.radio-g {
  margin: 0;
}
.radio-g label {
  position: relative;
  padding: 0.25em 1em 0.25em 2em;
  line-height: 1;
  margin: 0.5em 0;
}
.radio-g label input[type=radio] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  margin: 0;
  width: 1.5em;
  height: 1.5em;
  border-radius: 100%;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: rgb(0, 0, 0) 0 0 4px -2px;
  background-color: rgb(255, 255, 255);
  background-image: radial-gradient(#343772 0%, #343772 15%, #343772 45%, rgba(0, 0, 0, 0) 45%);
  background-repeat: no-repeat;
  background-size: 0 0;
  background-position: center;
  transform-origin: center;
  outline: none;
}
.radio-g label input[type=radio]:checked {
  border: solid 2px #343772;
  background-size: 100% 100%;
  transition: background-size 0.1s cubic-bezier(0, 0, 0.2, 1);
  transform-origin: center;
}
.radio-g label input[type=radio]:active {
  transform: scale(1.2);
  transform-origin: center;
  transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1);
}
.radio-g.inline {
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5em;
}
.radio-g.inline label {
  display: inline-block;
  margin: 0 0 0.5em;
}

.checkbox-g {
  margin: 0;
}
.checkbox-g label {
  position: relative;
  padding: 0.25em 1em 0.25em 2em;
  line-height: 1;
  margin: 0.5em 0;
}
.checkbox-g label input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  margin: 0;
  width: 1.5em;
  height: 1.5em;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.9) 0 0 4px -2px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  transform-origin: center;
  outline: none;
}
.checkbox-g label input[type=checkbox]::after {
  content: "";
  display: block;
  width: 30%;
  height: 60%;
  position: absolute;
  top: 15%;
  left: 30%;
  border: 2px solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  filter: invert(10%) grayscale(100%) contrast(100%);
}
.checkbox-g label input[type=checkbox]:checked {
  border: solid 2px #343772;
}
.checkbox-g label input[type=checkbox]:checked::after {
  content: "";
  display: block;
  width: 30%;
  height: 60%;
  position: absolute;
  top: 15%;
  left: 30%;
  border: 2px solid #343772;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  filter: none;
}
.checkbox-g label input[type=checkbox]:active {
  transform: scale(1.2);
  transform-origin: center;
  transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1);
}
.checkbox-g.inline {
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5em;
}
.checkbox-g.inline label {
  display: inline-block;
  margin: 0 0 0.5em;
}

.selectbox {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.selectbox::after {
  position: absolute;
  right: 15px;
  width: 10px;
  height: 7px;
  background-color: #535353;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: "";
  pointer-events: none;
}
.selectbox select {
  appearance: none;
  min-width: 180px;
  height: 2.2em;
  padding: 0.1em calc(0.8em + 30px) 0.1em 0.8em;
  border: 1px solid #cccccc;
  border-radius: 5px;
  background-color: #fff;
  color: #333333;
  font-size: 1em;
  cursor: pointer;
}
.selectbox select:focus {
  outline: none;
  background-color: #fff;
}
.selectbox select:active {
  background-color: #fff;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

.password-wrapper {
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin-bottom: 1rem;
}
.password-wrapper .password__input {
  flex: 1;
  outline: none;
  appearance: none;
  padding: 10px 0 10px 10px;
  border: none;
  border-radius: 5px 0 0 5px;
  margin: 0;
}
.password-wrapper .password__toggle {
  width: 40px;
  border: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='48'><path d='M24 31.5q3.55 0 6.025-2.475Q32.5 26.55 32.5 23q0-3.55-2.475-6.025Q27.55 14.5 24 14.5q-3.55 0-6.025 2.475Q15.5 19.45 15.5 23q0 3.55 2.475 6.025Q20.45 31.5 24 31.5Zm0-2.9q-2.35 0-3.975-1.625T18.4 23q0-2.35 1.625-3.975T24 17.4q2.35 0 3.975 1.625T29.6 23q0 2.35-1.625 3.975T24 28.6Zm0 9.4q-7.3 0-13.2-4.15Q4.9 29.7 2 23q2.9-6.7 8.8-10.85Q16.7 8 24 8q7.3 0 13.2 4.15Q43.1 16.3 46 23q-2.9 6.7-8.8 10.85Q31.3 38 24 38Zm0-15Zm0 12q6.05 0 11.125-3.275T42.85 23q-2.65-5.45-7.725-8.725Q30.05 11 24 11t-11.125 3.275Q7.8 17.55 5.1 23q2.7 5.45 7.775 8.725Q17.95 35 24 35Z'/></svg>") no-repeat center center;
  background-size: 50% auto;
  cursor: pointer;
}
.password-wrapper .password__toggle.is-visible {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='48'><path d='m31.45 27.05-2.2-2.2q1.3-3.55-1.35-5.9-2.65-2.35-5.75-1.2l-2.2-2.2q.85-.55 1.9-.8 1.05-.25 2.15-.25 3.55 0 6.025 2.475Q32.5 19.45 32.5 23q0 1.1-.275 2.175-.275 1.075-.775 1.875Zm6.45 6.45-2-2q2.45-1.8 4.275-4.025Q42 25.25 42.85 23q-2.5-5.55-7.5-8.775Q30.35 11 24.5 11q-2.1 0-4.3.4-2.2.4-3.45.95L14.45 10q1.75-.8 4.475-1.4Q21.65 8 24.25 8q7.15 0 13.075 4.075Q43.25 16.15 46 23q-1.3 3.2-3.35 5.85-2.05 2.65-4.75 4.65Zm2.9 11.3-8.4-8.25q-1.75.7-3.95 1.075T24 38q-7.3 0-13.25-4.075T2 23q1-2.6 2.775-5.075T9.1 13.2L2.8 6.9l2.1-2.15L42.75 42.6ZM11.15 15.3q-1.85 1.35-3.575 3.55Q5.85 21.05 5.1 23q2.55 5.55 7.675 8.775Q17.9 35 24.4 35q1.65 0 3.25-.2t2.4-.6l-3.2-3.2q-.55.25-1.35.375T24 31.5q-3.5 0-6-2.45T15.5 23q0-.75.125-1.5T16 20.15Zm15.25 7.1Zm-5.8 2.9Z'/></svg>");
}

@media (any-hover: hover) {
  .password__toggle:hover {
    opacity: 0.7;
  }
}
.rating-set {
  display: flex;
}
.rating-set input {
  display: none;
}
.rating-set label {
  color: #aaa;
}
.rating-set label.checked {
  color: #ff7f00;
}

.btn {
  display: inline-block;
  text-align: center;
  padding: 0.25em 2em;
  background-color: #343772;
  color: #fff;
  text-decoration: none;
  border-radius: 1em;
  font-weight: bold;
}
.btn.lg {
  padding: 1em 4em;
}
.btn:hover {
  background-color: #4c50a7;
  color: #fff;
}
.btn.light {
  background-color: #7175af;
}

img {
  max-width: 100%;
}

.fbox {
  display: flex;
  gap: 1.5rem;
}
.fbox > * {
  flex: 0 0 100%;
}
@media (min-width: 769px) {
  .fbox > *.fitem-2 {
    flex: 0 0 calc(50% - 0.75rem) !important;
  }
  .fbox > *.fitem-3 {
    flex: 0 0 calc(33.333% - 1rem) !important;
  }
  .fbox > *.fitem-4 {
    flex: 0 0 calc(25% - 1.125rem) !important;
  }
  .fbox > *.fitem-5 {
    flex: 0 0 calc(20% - 1.2rem) !important;
  }
  .fbox > *.fitem-6 {
    flex: 0 0 calc(16.666% - 1.25rem) !important;
  }
}
.fbox.no-gap {
  gap: 0;
}
.fbox.no-gap > * {
  flex: 0 0 100%;
}
@media (min-width: 769px) {
  .fbox.no-gap > *.fitem-3 {
    flex: 0 0 50% !important;
  }
  .fbox.no-gap > *.fitem-3 {
    flex: 0 0 33.333% !important;
  }
  .fbox.no-gap > *.fitem-4 {
    flex: 0 0 25% !important;
  }
  .fbox.no-gap > *.fitem-5 {
    flex: 0 0 20% !important;
  }
  .fbox.no-gap > *.fitem-6 {
    flex: 0 0 16.666% !important;
  }
}
.fbox.jc-center {
  justify-content: center;
}
.fbox.jc-sa {
  justify-content: space-around;
}
.fbox.jc-sb {
  justify-content: space-between;
}
.fbox.wrap {
  flex-wrap: wrap;
}
.fbox.fd-row {
  flex-direction: row;
}
.fbox.fd-column {
  flex-direction: column;
}
.fbox .full {
  flex: 0 0 100%;
  width: 100%;
}
.fbox .half {
  flex: 0 0 100%;
  width: 100%;
}
@media (min-width: 769px) {
  .fbox .half {
    flex: 0 0 50%;
    width: 50%;
  }
}

.auto-divide {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: left;
  justify-content: center;
}
.auto-divide > * {
  flex: 0 0 100%;
}
@media (min-width: 769px) {
  .auto-divide > *.fitem-2 {
    flex: 0 0 calc(50% - 0.75rem) !important;
  }
  .auto-divide > *.fitem-3 {
    flex: 0 0 calc(33.333% - 1rem) !important;
  }
  .auto-divide > *.fitem-4 {
    flex: 0 0 calc(25% - 1.125rem) !important;
  }
  .auto-divide > *.fitem-5 {
    flex: 0 0 calc(20% - 1.2rem) !important;
  }
  .auto-divide > *.fitem-6 {
    flex: 0 0 calc(16.666% - 1.25rem) !important;
  }
}
.auto-divide.no-gap {
  gap: 0;
}
.auto-divide.no-gap > * {
  flex: 0 0 100%;
}
@media (min-width: 769px) {
  .auto-divide.no-gap > *.fitem-3 {
    flex: 0 0 50% !important;
  }
  .auto-divide.no-gap > *.fitem-3 {
    flex: 0 0 33.333% !important;
  }
  .auto-divide.no-gap > *.fitem-4 {
    flex: 0 0 25% !important;
  }
  .auto-divide.no-gap > *.fitem-5 {
    flex: 0 0 20% !important;
  }
  .auto-divide.no-gap > *.fitem-6 {
    flex: 0 0 16.666% !important;
  }
}

.t-l {
  text-align: left;
}

.t-r {
  text-align: right;
}

.t-c {
  text-align: center;
}

br.sp {
  display: block;
}
@media (min-width: 769px) {
  br.sp {
    display: none;
  }
}
br.pc {
  display: none;
}
@media (min-width: 769px) {
  br.pc {
    display: block;
  }
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: solid 1px #fff;
  margin-bottom: 1rem;
}
table tr {
  border-bottom: solid 1px #fff;
}
table tr th {
  padding: 0.5rem;
  text-align: center;
  border-right: solid 1px #fff;
  background-color: rgba(0, 0, 0, 0.2);
  width: 9rem;
  font-size: 0.7rem;
}
@media (min-width: 769px) {
  table tr th {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    width: 15rem;
  }
}
table tr td {
  padding: 0.5rem;
  text-align: left;
  width: calc(100% - 9rem);
}
@media (min-width: 769px) {
  table tr td {
    padding: 0.5rem 1rem;
    width: calc(100% - 15rem);
  }
}
table tfoot tr {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-bottom: none;
}
table.alt tr {
  background-color: #fff;
}
table.alt tr:nth-child(odd) {
  background-color: rgba(199, 230, 206, 0.5);
}
table .btn {
  padding: 0.25em 1em;
  margin: 0;
}
table.mypage tr th {
  display: block;
  width: 100%;
  padding: 0.75rem 0;
}
table.mypage tr td {
  display: block;
  width: 100%;
  padding: 1.5rem 0;
}

.accordion {
  width: 100%;
  margin: 0.75rem auto 1.5rem;
}
.accordion .a_item {
  border: 1px solid #ccc;
  margin-top: 0.75rem;
  cursor: pointer;
}
.accordion .a_item .a_title {
  position: relative;
  padding: 15px 60px 15px 20px;
  font-weight: bold;
  cursor: pointer;
}
.accordion .a_item .a_title::before {
  content: "";
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-color: #343772;
  width: 20px;
  height: 4px;
  transition: all 0.3s;
}
.accordion .a_item .a_title::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-color: #343772;
  width: 20px;
  height: 4px;
  transition: all 0.3s;
  transform: rotate(90deg);
}
.accordion .a_item .a_content {
  padding: 0 20px 15px 20px;
  display: none;
  cursor: pointer;
}
.accordion .a_item .a_content.is-open {
  display: block;
}
.accordion .a_item.is-active .a_title::before {
  transform: rotate(180deg);
}
.accordion .a_item.is-active .a_title::after {
  transform: rotate(180deg);
  opacity: 0;
}

.tab-container {
  width: 100%;
  margin: 0 auto;
}
.tab-container .tab-menu ul {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tab-container .tab-menu ul li {
  cursor: pointer;
  margin: 0;
  padding: 0;
  display: inline-block;
  width: auto;
}
.tab-container .tab-item > div {
  display: none;
}
.tab-container .tab-item > div.active {
  display: block;
}

.stab-container {
  width: 100%;
  margin: 0 auto;
}
.stab-container .stab-menu ul {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stab-container .stab-menu ul li {
  cursor: pointer;
  margin: 0;
  padding: 0;
  display: inline-block;
  width: auto;
}
.stab-container .stab-item > div {
  display: none;
}
.stab-container .stab-item > div.active {
  display: block;
}

.modal .modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
}
.modal .modal__overlay .modal__container {
  background-color: #fff;
  padding: 2rem;
  max-width: 800px;
  width: 80vw;
  max-height: 80vh;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
  position: relative;
}
.modal .modal__overlay .modal__container .modal__close {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fff;
  width: 2em;
  height: 2em;
  line-height: 1;
  padding: 0.5em;
  border-radius: 100%;
  border: 0;
}
.modal .modal__overlay .modal__container .modal__close:before {
  content: "✕";
}

/**************************\
	Demo Animation Style
  \**************************/
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}
.micromodal-slide {
  display: none;
}
.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden=false] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=false] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

/* keyframes */
@keyframes animbg {
  from {
    background-position: 100% 100%;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
/*
animation-name: animbg;
animation-fill-mode:backwards;
animation-duration:1s;
animation-iteration-count:1; //infinite
animation-timing-function:liner;
animation-delay: 0;
animation-direction:alternate;
*/
#comment {
  padding: 2px;
  border: solid 2px #343772;
  margin-bottom: 1.5rem;
  max-width: 922px;
  margin-right: auto;
  margin-left: auto;
}
#comment h2 {
  background-color: #343772;
  color: #fff;
  padding: 0.75rem;
  margin: 0;
  font-size: 1.2rem;
}
#comment .comment-container {
  padding: 1.5rem;
}
#comment .comment-container p {
  text-align: center;
  margin: 0;
}
#comment .comment-container .comment h3 {
  font-size: 1.2rem;
  font-weight: bold;
}
#comment .comment-container .comment .k-content {
  font-weight: 300;
}
#comment .comment-container .comment .k-content {
  margin: 1.5rem auto;
}
#comment .comment-container .comment .k-meta {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-start;
  font-weight: 300;
  flex-direction: column;
}
@media (min-width: 769px) {
  #comment .comment-container .comment .k-meta {
    gap: 1.5rem;
    flex-direction: row;
  }
}
#comment .comment-container .comment .k-meta span {
  display: inline-block;
}
#comment .comment-container .comment .k-meta span.k-rate-1:before {
  content: "★";
  color: #ff7f00;
}
#comment .comment-container .comment .k-meta span.k-rate-1:after {
  content: "★★★★";
  color: #aaa;
}
#comment .comment-container .comment .k-meta span.k-rate-2:before {
  content: "★★";
  color: #ff7f00;
}
#comment .comment-container .comment .k-meta span.k-rate-2:after {
  content: "★★★";
  color: #aaa;
}
#comment .comment-container .comment .k-meta span.k-rate-3:before {
  content: "★★★";
  color: #ff7f00;
}
#comment .comment-container .comment .k-meta span.k-rate-3:after {
  content: "★★";
  color: #aaa;
}
#comment .comment-container .comment .k-meta span.k-rate-4:before {
  content: "★★★★";
  color: #ff7f00;
}
#comment .comment-container .comment .k-meta span.k-rate-4:after {
  content: "★";
  color: #aaa;
}
#comment .comment-container .comment .k-meta span.k-rate-5:before {
  content: "★★★★★";
  color: #ff7f00;
}
#comment .comment-container .comment .k-meta span.k-rate-5:after {
  content: "";
  color: #aaa;
}

#post-com-container {
  padding: 0;
  border: solid 1px #343772;
  max-width: 922px;
  margin-right: auto;
  margin-left: auto;
}
#post-com-container #com-trigger {
  padding: 0.75rem;
  text-align: center;
  font-size: 1.2rem;
  background-color: #fff;
  color: #343772;
}
#post-com-container #com-inner {
  border-top: solid 1px #343772;
  padding: 0;
  background-color: #f1f1f1;
}
#post-com-container #com-inner form div {
  padding: 1.5rem;
}
#post-com-container #com-inner form div + div {
  border-top: solid 1px #343772;
}
#post-com-container #com-inner form div h3 {
  text-align: left;
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}
#post-com-container #com-inner form div h3 span {
  background-color: #000;
  color: #fff;
  padding: 0.25em 0.75em;
  border-radius: 1em;
  font-size: 0.6em;
  margin-left: 1em;
  line-height: 1em;
}
#post-com-container #com-inner form div.send {
  border: none;
  text-align: center;
  margin-top: -1.5rem;
}
#post-com-container #com-inner form div.attention h3 {
  text-align: center;
  color: #8f252c;
}
#post-com-container #com-inner form div.attention p {
  max-width: 600px;
  margin: 1rem auto;
}
#post-com-container #com-inner form div p {
  font-size: 0.8em;
}
#post-com-container #com-inner form div input,
#post-com-container #com-inner form div textarea {
  border: none;
  margin-bottom: 0.75rem;
}
#post-com-container #com-inner form div input[type=text]:focus,
#post-com-container #com-inner form div input[type=password]:focus,
#post-com-container #com-inner form div textarea:focus {
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0.05);
}
#post-com-container #com-inner form div input[type=text]:focus,
#post-com-container #com-inner form div input[type=password]:focus,
#post-com-container #com-inner form div textarea:active {
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0.05);
}
#post-com-container #com-inner form div div {
  background-color: #fff;
  padding: 0.75rem;
}

.parallax {
  position: relative;
  height: 50vh;
  /* パフォーマンスを最適化 */
  overflow: hidden;
}
.parallax .inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  background-color: rgba(0, 0, 0, 0);
  /* 半透明 */
}
.parallax .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  clip-path: inset(0);
}
.parallax .bg .img {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*
&.parallax{
	height: 100vh;
	text-align: center;
	.bg{
		.img{
			background-image: url('../images/reesoratop.webp');
		}
	}
}
*/
.form-row {
  display: flex;
  flex-direction: column;
  margin: 0 auto 5px;
  gap: 5px;
}
@media (min-width: 769px) {
  .form-row {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
}
.form-row .title {
  display: flex;
  align-items: center;
  background-color: #f1f1f1;
  padding: 0 0.75rem;
  flex: 0 0 100%;
}
.form-row .title .required {
  display: inline-block;
  background-color: rgb(228, 24, 24);
  color: #fff;
  font-size: 0.6em;
  padding: 0.1em 0.5rem;
  border-radius: 0.2rem;
  margin: 0 0.5rem;
}
@media (min-width: 769px) {
  .form-row .title {
    flex: 0 0 calc(30% - 5px);
  }
}
.form-row .data {
  flex: 0 0 100%;
  padding: 0;
}
.form-row .data > * {
  margin: 0;
}
@media (min-width: 769px) {
  .form-row .data {
    flex: 0 0 60%;
  }
}
.form-row .data .radio-g {
  padding: 0.75rem;
}
.form-row.pp {
  margin: 1.5rem 0;
}

.form-ms {
  text-align: center;
  font-size: 1.2rem;
  margin: 3rem auto;
  line-height: 2;
}

/* this site css start */
main {
  margin: 0;
  padding: 0;
}
main section {
  width: 100%;
  max-width: 1658px;
  padding: 0 1.5rem;
  margin: auto;
}

#common {
  /* 	main {
  } */
}
#common #toggle {
  position: fixed;
  z-index: 103;
  top: 0;
  right: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  outline: none;
  cursor: pointer;
  /*-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
   box-shadow: -7px -7px 20px 0px #fff9,
  	-4px -4px 5px 0px #fff9,
  	7px 7px 20px 0px #0002,
  	4px 4px 5px 0px #0001,
  	inset 0px 0px 0px 0px #fff9,
  	inset 0px 0px 0px 0px #0001,
  	inset 0px 0px 0px 0px #fff9,
  	inset 0px 0px 0px 0px #0001;
  transition: box-shadow 0.6s cubic-bezier(.79, .21, .06, .81); */
}
#common #toggle span {
  background-color: #343772;
  width: 2rem;
  height: 3px;
  border-radius: 3px;
  margin: 3px 0px;
  transition: margin 0.4s cubic-bezier(0.79, 0.21, 0.06, 0.81), transform 0.4s cubic-bezier(0.79, 0.21, 0.06, 0.81);
}
#common #toggle span:nth-child(2) {
  transform-origin: 50% 50%;
}
#common #toggle.open {
  /* box-shadow: 0px 0px 0px 0px #fff9,
  0px 0px 0px 0px #fff9,
  0px 0px 0px 0px #0001,
  0px 0px 0px 0px #0001,
  -2px -2px 6px rgba(255, 255, 255, .6),
  -2px -2px 4px rgba(255, 255, 255, .4),
  2px 2px 2px rgba(255, 255, 255, .05),
  2px 2px 4px rgba(0, 0, 0, .1),
  inset -5px -5px 15px 0px #fff9,
  inset -2px -2px 3px 0px #fff9,
  inset 4px 4px 8px 0px #0003,
  inset 2px 2px 3px 0px #0001; */
}
#common #toggle.open span {
  margin: -1.5px;
}
#common #toggle.open span:nth-child(1) {
  transform: rotate(-45deg);
}
#common #toggle.open span:nth-child(2) {
  transform: scale(0);
}
#common #toggle.open span:nth-child(3) {
  transform: rotate(45deg);
}
#common #gnav {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  margin: 0;
  padding: 3rem 1.5rem 1.5rem;
  width: 100%;
  background-color: #fcfbf7;
  height: 100vh;
  overflow-y: auto;
}
@media (min-width: 769px) {
  #common #gnav {
    width: 450px;
  }
}
#common #gnav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#common #gnav ul li {
  margin: 0;
  padding: 0;
}
#common #gnav ul li a {
  text-decoration: none;
}
#common #gnav.open {
  display: block;
}
#common header {
  position: fixed;
  z-index: 102;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.75rem;
  pointer-events: none;
}
#common header .logo {
  font-size: 2rem;
  margin: 0;
  padding: 0;
}
#common header .logo a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
}
#common header .logo a img {
  height: 2rem;
  width: auto;
}
#common footer {
  padding: 0 1.5rem;
  background-color: #f1f1f1;
}
#common footer .copy {
  text-align: center;
  margin: 0;
}
#common #first-view {
  max-width: none;
}
#common #first-view.parallax {
  height: 100vh;
  text-align: center;
}
#common #first-view.parallax .bg .img {
  background-image: url("../images/topbg.jpg");
}

/* 管理画面 */
#mg {
  background-color: #fff;
  color: #37474F;
  display: flex;
  flex-wrap: nowrap;
  justify-content: left;
  /* padding-left: 1.5rem;
  padding-right: 1.5rem; */
  gap: 1.5rem;
  /* footer {
  	padding: 0 1.5rem;
  	background-color: transparent;

  	.copy {
  		text-align: center;
  		margin: 0;
  	}
  } */
}
@media (min-width: 1390px) {
  #mg {
    justify-content: center;
  }
}
#mg #toggle {
  position: fixed;
  z-index: 101;
  bottom: 0.25rem;
  right: 0.25rem;
  width: 3rem;
  height: 3rem;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #eee;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, 0.6), -4px -4px 5px 0px rgba(255, 255, 255, 0.6), 7px 7px 20px 0px rgba(0, 0, 0, 0.1333333333), 4px 4px 5px 0px rgba(0, 0, 0, 0.0666666667), inset 0px 0px 0px 0px rgba(255, 255, 255, 0.6), inset 0px 0px 0px 0px rgba(0, 0, 0, 0.0666666667), inset 0px 0px 0px 0px rgba(255, 255, 255, 0.6), inset 0px 0px 0px 0px rgba(0, 0, 0, 0.0666666667);
  transition: box-shadow 0.6s cubic-bezier(0.79, 0.21, 0.06, 0.81);
}
@media (min-width: 769px) {
  #mg #toggle {
    display: none;
  }
}
#mg #toggle span {
  background-color: #FF6F00;
  box-shadow: 0px 0px 10px 0px rgba(240, 128, 128, 0.3);
  width: 1.25rem;
  height: 3px;
  border-radius: 3px;
  margin: 2px 0px;
  transition: margin 0.4s cubic-bezier(0.79, 0.21, 0.06, 0.81), transform 0.4s cubic-bezier(0.79, 0.21, 0.06, 0.81);
}
#mg #toggle span:nth-child(2) {
  transform-origin: 50% 50%;
}
#mg #toggle.open {
  box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.6), 0px 0px 0px 0px rgba(255, 255, 255, 0.6), 0px 0px 0px 0px rgba(0, 0, 0, 0.0666666667), 0px 0px 0px 0px rgba(0, 0, 0, 0.0666666667), -2px -2px 6px rgba(255, 255, 255, 0.6), -2px -2px 4px rgba(255, 255, 255, 0.4), 2px 2px 2px rgba(255, 255, 255, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.1), inset -5px -5px 15px 0px rgba(255, 255, 255, 0.6), inset -2px -2px 3px 0px rgba(255, 255, 255, 0.6), inset 4px 4px 8px 0px rgba(0, 0, 0, 0.2), inset 2px 2px 3px 0px rgba(0, 0, 0, 0.0666666667);
}
#mg #toggle.open span {
  margin: -1.5px;
}
#mg #toggle.open span:nth-child(1) {
  transform: rotate(-45deg);
}
#mg #toggle.open span:nth-child(2) {
  transform: scale(0);
}
#mg #toggle.open span:nth-child(3) {
  transform: rotate(45deg);
}
#mg #gnav {
  display: none;
  background-color: #FF6F00;
}
#mg #gnav.open {
  display: block;
}
#mg button {
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  padding: 0.7em 1.7em;
  font-size: 0.8rem;
  border-radius: 0.5em;
  text-align: center;
  background: #ECEFF1;
  outline: none;
  cursor: pointer;
  transition: 0.1s ease-in-out;
  box-shadow: -3px -3px 5px rgba(255, 255, 255, 0.7), -3px -3px 5px rgba(255, 255, 255, 0.5), 3px 3px 5px rgba(255, 255, 255, 0.075), 3px 3px 5px rgba(0, 0, 0, 0.15);
}
#mg button:hover {
  color: #333;
  box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.6), -2px -2px 4px rgba(255, 255, 255, 0.4), 2px 2px 2px rgba(255, 255, 255, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.1);
}
#mg button:active {
  box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.7), inset -2px -2px 4px rgba(255, 255, 255, 0.5), inset 2px 2px 2px rgba(255, 255, 255, 0.075), inset 2px 2px 4px rgba(0, 0, 0, 0.15);
}
#mg input[type=submit] {
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  padding: 0.7em 1.7em;
  font-size: 0.8rem;
  border-radius: 0.5em;
  text-align: center;
  background: #ECEFF1;
  outline: none;
  cursor: pointer;
  transition: 0.1s ease-in-out;
  box-shadow: -3px -3px 5px rgba(255, 255, 255, 0.7), -3px -3px 5px rgba(255, 255, 255, 0.5), 3px 3px 5px rgba(255, 255, 255, 0.075), 3px 3px 5px rgba(0, 0, 0, 0.15);
}
#mg input[type=submit]:hover {
  color: #333;
  box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.6), -2px -2px 4px rgba(255, 255, 255, 0.4), 2px 2px 2px rgba(255, 255, 255, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.1);
}
#mg input[type=submit]:active {
  box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.7), inset -2px -2px 4px rgba(255, 255, 255, 0.5), inset 2px 2px 2px rgba(255, 255, 255, 0.075), inset 2px 2px 4px rgba(0, 0, 0, 0.15);
}
#mg header {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  padding: 0;
}
#mg header #gnav {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 100;
  padding-bottom: 3rem;
}
@media (min-width: 769px) {
  #mg header #gnav {
    position: sticky;
    top: 0;
    flex: 0 0 250px;
    width: 250px;
    min-height: 100vh;
    z-index: 0;
    display: block;
    padding: 0;
  }
}
#mg header #gnav ul {
  list-style: none;
  margin: 0 auto 3rem;
  padding: 0;
  /* @media(min-width:$bp1){
  	padding: 1.5rem;

  } */
}
#mg header #gnav ul li {
  margin: 0;
  padding: 0;
}
#mg header #gnav ul li a {
  display: block;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  padding: 0.7em 1.7em;
  font-size: 0.8rem;
  text-align: center;
  background: #FF6F00;
  outline: none;
  cursor: pointer;
  transition: 0.1s ease-in-out;
  /* box-shadow: -3px -3px 5px rgba(255, 255, 255, .7),
  	-3px -3px 5px rgba(255, 255, 255, .5),
  	3px 3px 5px rgba(255, 255, 255, .075),
  	3px 3px 5px rgba(0, 0, 0, .15); */
}
#mg header #gnav ul li a:hover {
  color: #333;
  box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.6), -2px -2px 4px rgba(255, 255, 255, 0.4), 2px 2px 2px rgba(255, 255, 255, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.1);
}
#mg header #gnav ul li a:active {
  box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.7), inset -2px -2px 4px rgba(255, 255, 255, 0.5), inset 2px 2px 2px rgba(255, 255, 255, 0.075), inset 2px 2px 4px rgba(0, 0, 0, 0.15);
}
#mg .main {
  background-color: #fff;
}
@media (min-width: 769px) {
  #mg .main {
    z-index: 10;
    flex: 0 0 auto;
    width: calc(100% - 250px - 1.5rem);
  }
}
#mg .main main {
  padding: 0;
}
@media (min-width: 769px) {
  #mg .main main {
    min-height: calc(100vh - 2.5rem);
  }
}
#mg .main main h2 {
  font-weight: normal;
  font-size: 1rem;
  padding: 0.75em 1.5em 0.6em;
  margin-bottom: 1.5rem;
  line-height: 1.25;
  color: #FF6F00;
  border: 2px solid #FF6F00;
  font-weight: bold;
  /* box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.555),
  	inset -2px -2px 4px rgba(255, 255, 255, .5),
  	inset 2px 2px 2px rgba(255, 255, 255, .075),
  	inset 2px 2px 4px rgba(0, 0, 0, .15),
  	-2px -2px 6px rgba(255, 255, 255, .6),
  	-2px -2px 4px rgba(255, 255, 255, .4),
  	2px 2px 2px rgba(255, 255, 255, .05),
  	2px 2px 4px rgba(0, 0, 0, .1); */
}
#mg .main main article {
  padding: 0;
}
#mg .main main .inner {
  padding: 1.5em;
  border-radius: 0.5em;
  background: #fff;
  margin-bottom: 1.5rem;
  border: 1px solid #fff;
  transition: all 0.3s;
  /* box-shadow: -2px -2px 6px rgba(255, 255, 255, .6),
  	-2px -2px 4px rgba(255, 255, 255, .4),
  	2px 2px 2px rgba(255, 255, 255, .05),
  	2px 2px 4px rgba(0, 0, 0, .1); */
}
#mg .main main .inner > *:last-child {
  margin-bottom: 0;
}
#mg .main main .inner ul {
  list-style-type: none;
  padding: 0;
}
#mg .main main .inner ul li {
  margin: 0;
  padding: 0 0 0 1.5em;
  position: relative;
}
#mg .main main .inner ul li::before {
  position: absolute;
  content: "";
  display: inline-block;
  top: 0.35em;
  left: 0;
  width: 0.8em;
  height: 0.8em;
  border-radius: 100%;
  background: linear-gradient(145deg, #8c8c8c, #7a7a7a, #585858, #404040);
  box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.6), -2px -2px 4px rgba(255, 255, 255, 0.4), 2px 2px 2px rgba(255, 255, 255, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.1);
  outline: none;
}
#mg .main main .inner ul li a {
  text-decoration: none;
}
#mg .main footer {
  padding: 0;
  margin: 0;
  bottom: 0;
}
#mg .main footer .copy {
  margin: 0;
  padding: 0.75rem 1.5rem;
  font-size: 0.8rem;
  line-height: 1;
  text-align: center;
}
@media (min-width: 769px) {
  #mg .main footer .copy {
    font-size: 1rem;
    text-align: right;
  }
}
#mg .ms {
  font-weight: normal;
  font-size: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 1.25;
  border: 1px solid #37474F;
  transition: all 0.3s;
  /* box-shadow: inset -2px -2px 6px rgba(255, 255, 255, .7),
  		inset -2px -2px 4px rgba(255, 255, 255, .5),
  		inset 2px 2px 2px rgba(255, 255, 255, .075),
  		inset 2px 2px 4px rgba(0, 0, 0, .15); */
}
#mg .ms > *:last-child {
  margin-bottom: 0;
}
#mg #g-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
@media (min-width: 769px) {
  #mg #g-menu .item {
    width: calc(50% - 0.75rem);
  }
}
#mg #g-menu .item a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  padding: 1.5rem;
  height: 100%;
  border-radius: 0.5em;
  text-align: center;
  background: #ECEFF1;
  outline: none;
  cursor: pointer;
  transition: 0.1s ease-in-out;
  box-shadow: -3px -3px 5px rgba(255, 255, 255, 0.7), -3px -3px 5px rgba(255, 255, 255, 0.5), 3px 3px 5px rgba(255, 255, 255, 0.075), 3px 3px 5px rgba(0, 0, 0, 0.15);
}
#mg #g-menu .item a:hover {
  color: #333;
  box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.6), -2px -2px 4px rgba(255, 255, 255, 0.4), 2px 2px 2px rgba(255, 255, 255, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.1);
}
#mg form {
  margin-bottom: 1.5rem;
}
#mg form > *:last-child {
  margin-bottom: 0;
}

/* SCSS for 扇建設 website */
#public {
  /* Animations */
  /* Scroll Animation */
}
#public a {
  text-decoration: none;
}
#public #toggle {
  position: fixed;
  z-index: 103;
  top: 0.75rem;
  right: 0.75rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  outline: none;
  cursor: pointer;
}
@media (min-width: 769px) {
  #public #toggle {
    display: none;
  }
}
#public #toggle span {
  background-color: #5d3587;
  width: 2rem;
  height: 3px;
  border-radius: 3px;
  margin: 3px 0px;
  transition: margin 0.4s cubic-bezier(0.79, 0.21, 0.06, 0.81), transform 0.4s cubic-bezier(0.79, 0.21, 0.06, 0.81);
}
#public #toggle span:nth-child(2) {
  transform-origin: 50% 50%;
}
#public #toggle.open span {
  margin: -1.5px;
}
#public #toggle.open span:nth-child(1) {
  transform: rotate(-45deg);
}
#public #toggle.open span:nth-child(2) {
  transform: scale(0);
}
#public #toggle.open span:nth-child(3) {
  transform: rotate(45deg);
}
#public #gnav {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  margin: 0;
  padding: 10rem 1.5rem 1.5rem;
  width: 100%;
  background-color: #fff;
  height: 100vh;
  overflow-y: auto;
  flex-direction: column;
}
@media (min-width: 769px) {
  #public #gnav {
    position: relative;
    display: flex;
    top: auto;
    right: auto;
    z-index: 0;
    margin: 0;
    padding: 0;
    width: auto;
    background-color: transparent;
    height: auto;
    overflow-y: auto;
    flex-direction: row;
  }
}
#public #gnav.open {
  display: block;
  display: flex;
}
#public #gnav a {
  text-align: center;
}
#public body {
  font-family: "Inter", sans-serif;
  color: #333;
  background-color: #f9fafb;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}
#public .container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
#public .text--left {
  text-align: left;
}
#public .text--white {
  color: #fff;
}
#public .text--lg {
  font-size: 1.125rem;
}
#public .text--gray-700 {
  color: #4a5568;
}
#public .leading-relaxed {
  line-height: 1.625;
}
#public .mb-6 {
  margin-bottom: 1.5rem;
}
#public section {
  padding-top: 5rem;
  padding-bottom: 5rem;
  position: relative;
}
#public .section-title {
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
  font-size: 2.5rem;
  font-weight: 700;
  color: #5d3587;
}
#public .section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: #5d3587;
  border-radius: 2px;
}
#public .section-title.text--white {
  color: #fff;
}
#public .section-title.text--white::after {
  background-color: #fff;
}
#public .section-subtitle {
  font-size: 1.125rem;
  color: #4a5568;
  margin-top: 1rem;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  #public .section-subtitle {
    font-size: 1.25rem;
  }
}
#public .header {
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: fixed;
  width: 100%;
  z-index: 50;
}
#public .nav {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#public .logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#public .logo__image {
  height: 2rem;
}
@media (min-width: 768px) {
  #public .logo__image {
    height: 2.5rem;
  }
}
#public .logo__text {
  font-size: 1.5rem;
  font-weight: 700;
  color: #4c1d95;
}
#public .nav__menu-desktop {
  display: none;
  gap: 2rem;
}
@media (min-width: 768px) {
  #public .nav__menu-desktop {
    display: flex;
  }
}
#public .nav__link {
  color: #4a5568;
  transition: color 0.3s ease;
}
#public .nav__link:hover {
  color: #8b5cf6;
}
#public .nav__button--mobile {
  display: block;
  color: #4a5568;
  z-index: 101;
}
#public .nav__button--mobile:hover {
  color: #8b5cf6;
}
#public .nav__button--mobile svg path {
  stroke: #000;
}
#public .nav__menu--mobile {
  display: none;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
#public .nav__menu--mobile.is-visible {
  display: block;
}
#public .nav__link--mobile {
  display: block;
  padding: 0.5rem 1.5rem;
  color: #4a5568;
}
#public .nav__link--mobile:hover {
  background-color: #f7fafc;
}
#public #hero {
  height: 100vh;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 2rem;
  transform-style: preserve-3d;
}
#public #hero .hero__content {
  position: relative;
  z-index: 10;
}
#public #hero h1 {
  font-size: 2.25rem;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  animation: fadeInUp 1s ease-in-out;
}
@media (min-width: 768px) {
  #public #hero h1 {
    font-size: 3.75rem;
  }
}
#public #hero p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  animation: fadeInUp 1s ease-in-out 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@media (min-width: 768px) {
  #public #hero p {
    font-size: 1.5rem;
  }
}
#public .hero__background {
  position: fixed;
  /* Parallax effect requires fixed position */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#public .hero__background img,
#public .hero__background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#public .hero__background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}
#public .button {
  display: inline-block;
  font-weight: 700;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
#public .button--primary {
  background-color: #8b5cf6;
  color: #fff;
}
#public .button--primary:hover {
  background-color: #3b82f6;
}
#public .button--secondary {
  background-color: #fff;
  color: #4c1d95;
}
#public .button--secondary:hover {
  background-color: #e2e8f0;
}
#public .button--large {
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
}
#public .button--cta {
  background-color: #fff;
  color: #4c1d95;
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
  box-shadow: 0 10px 30px rgba(93, 53, 135, 0.3);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
#public .button--cta:hover {
  transform: scale(1.05);
  background-color: rgba(255, 255, 255, 0.9);
}
#public .card-grid {
  display: grid;
  gap: 2.5rem;
  margin-top: 3rem;
}
@media (min-width: 768px) {
  #public .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
#public #about {
  background-color: #fff;
}
#public #about .container {
  text-align: center;
}
#public #about .card {
  padding: 1.5rem;
  background-color: #f7fafc;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* &:hover {
  	transform: translateY(-10px);
  	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  } */
}
#public #about .card h3 {
  font-weight: 700;
  font-size: 1.25rem;
  color: #4c1d95;
  margin-bottom: 0.5rem;
}
#public #about .card p {
  color: #4a5568;
}
#public #services {
  background-color: #e2e8f0;
}
#public #services .container {
  text-align: center;
}
#public #services .card-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  #public #services .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
#public #services .card {
  background-color: #fff;
  padding: 2rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  text-align: left;
}
#public #services .card > div:first-of-type {
  /* SVG Icon container */
  width: 4rem;
  height: 4rem;
  background-color: #3b82f6;
  color: #fff;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
#public #services h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #5d3587;
}
#public #services p {
  color: #4a5568;
}
#public .work-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 640px) {
  #public .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  #public .work-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
#public #works .container {
  text-align: center;
}
#public #works .work-card {
  background-color: #f7fafc;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* &:hover {
  	transform: translateY(-10px);
  	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  } */
}
#public #works .work-card img {
  max-width: none;
}
#public #works .work-card div {
  padding: 1.5rem;
}
#public #works .work-card h3 {
  font-weight: 700;
  font-size: 1.25rem;
  color: #333;
  margin-bottom: 0.5rem;
  text-align: left;
}
#public #works .work-card p {
  color: #4a5568;
  font-size: 0.875rem;
  text-align: left;
}
#public #recruitment {
  background-color: #4c1d95;
  color: #fff;
}
#public #recruitment .container {
  text-align: center;
}
#public #recruitment .section-title {
  color: #fff;
}
#public #recruitment .section-title::after {
  background-color: #fff;
}
#public #recruitment .section-subtitle {
  color: #fff;
}
#public #recruitment .recruitment-block {
  background-color: rgb(54.2247191011, 20.691011236, 106.308988764);
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: inset 10px 10px 15px rgba(0, 0, 0, 0.1), inset -10px -10px 15px rgba(255, 255, 255, 0.1);
  margin-bottom: 3rem;
}
#public #recruitment .recruitment-block h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
#public #recruitment .voice-grid {
  display: grid;
  gap: 2rem;
  text-align: left;
}
@media (min-width: 768px) {
  #public #recruitment .voice-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
#public #recruitment .voice-card {
  background-color: rgb(97.7752808989, 37.308988764, 191.691011236);
  padding: 1.5rem;
  border-radius: 0.5rem;
}
#public #recruitment .voice-card p:nth-child(1) {
  font-style: italic;
  color: #e2e8f0;
}
#public #recruitment .voice-card p:nth-child(2) {
  font-size: 0.875rem;
  font-weight: 700;
  color: #8b5cf6;
  margin-top: 1rem;
}
#public #recruitment ul {
  list-style-type: disc;
  list-style-position: inside;
  font-size: 1.125rem;
  line-height: 1.6;
}
#public #recruitment .job-list {
  margin-top: 3rem;
  color: #4a5568;
}
#public #recruitment .job-card {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem;
  text-align: left;
  transition: all 0.3s ease;
  /* 	&:hover {
  	transform: scale(1.05);
  	background-color: #ecf0f1;
  } */
}
#public #recruitment .job-card h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
#public #recruitment .job-card p {
  color: #4a5568;
}
#public #cta {
  background-color: #e2e8f0;
}
#public #cta .container {
  text-align: center;
}
#public #cta .cta-modern {
  background: linear-gradient(135deg, #5d3587, #8d6cb9);
  border-radius: 1rem;
  padding: 3rem 2rem;
  color: #fff;
  text-align: center;
  box-shadow: 0 10px 30px rgba(93, 53, 135, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#public #cta .cta-modern:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(93, 53, 135, 0.4);
}
#public #cta .cta-modern h2 {
  font-size: 2.25rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  #public #cta .cta-modern h2 {
    font-size: 3rem;
  }
}
#public #cta .cta-modern p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}
@media (min-width: 768px) {
  #public #cta .cta-modern p {
    font-size: 1.25rem;
  }
}
#public #cta .cta-button-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
@media (min-width: 768px) {
  #public #cta .cta-button-group {
    flex-direction: row;
    gap: 2rem;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#public #hero h1 {
  animation-delay: 0s;
}
#public #hero p {
  animation-delay: 0.5s;
}
#public #hero .button--primary {
  animation-delay: 1s;
}
#public .scroll-animate {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
#public .scroll-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}
#public .scroll-animate.is-visible:nth-child(2) {
  transition-delay: 0.2s;
}
#public .scroll-animate.is-visible:nth-child(3) {
  transition-delay: 0.4s;
}
#public .scroll-animate.is-visible:nth-child(4) {
  transition-delay: 0.6s;
}
#public footer {
  background-color: #1f2937;
  color: #fff;
  padding: 2rem 0;
}
#public footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}
#public footer .section-title {
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 2rem;
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
}
#public footer .section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: #fff;
  border-radius: 2px;
}
#public footer .map-container {
  margin-top: 2rem;
  margin-bottom: 2rem;
  width: 100%;
  max-width: 1200px;
  height: 400px;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
#public footer .map-container iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
}
#public footer p {
  line-height: 1.5;
  margin-bottom: 1rem;
}
#public footer p:last-of-type {
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: 0.875rem;
}
#public footer .privacy-policy {
  margin-top: 1rem;
}
#public footer .pp {
  color: #fff;
  text-decoration: none;
  transition: text-decoration 0.3s ease;
}
#public footer .pp:hover {
  text-decoration: underline;
}
#public .scroll-animate {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
#public .scroll-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}
#public main .page_title {
  padding: calc(75px + 3rem) 1.5rem 3rem;
  background-color: #e2e8f0;
  text-align: center;
}
#public main .inner {
  padding: 3rem 1.5rem;
}/*# sourceMappingURL=base.css.map */