@charset "UTF-8";

/*==========================================
 PC  1920px-1024px
 Tab 1024px-768px
 SP  768px-
===========================================*/

/*-----------
 変数・基本設定
-----------*/
:root {
  /* z-index */
  --z-index-minus: -1;
  --z-index-default: 1;
  --z-index-side-button: 2;
  --z-index-open-back: 50;
  --z-index-hamburger: 30;
  --z-index-header-under: 40;
  --z-index-header: 50;
  --z-index-navi: 50;
  --z-index-sp-footer: 60;
  --z-index-modal: 100;
  --z-index-max: 999;

  /* main color */
  --color-main: #007D5C;
  --color-main-sub: #82C49B;
  --color-main-sub-lt: #D8F0E1;
  --color-main-gray: #F2F7F2;
  --color-main-dark: #005E45;
  --color-white: #fff;
  --color-lt-gray: #FAFAFA;
  --color-lt-gray-2: #ddd;
  --color-m-gray: #BCBCBC;
  --color-gray: #5A5A5A;
  --color-black: #252525;

  /* other color */
  --color-yellow: #FFEB00;
  --color-yellow-lt: #FFF8D9;
  --color-orange: #BF400E;
  --color-orange-dark: #8C2F0A;
  --color-orange-sub: #F0A33A;
  --color-orange-sub-2: #FFEBCF;
  --color-orange-lt: #FFF5EB;
  --color-red: #AD2535;
  --color-blue: #23408C;
  --color-blue-dark: #1A3271;
  --color-blue-sub: #60C1BD;
  --color-blue-sub-2: #C8E8E7;
  --color-blue-lt: #D9EFEE;
  --color-pink: #BD4654;

  /* gradation color */
  --color-gradation-green: linear-gradient(135deg, #f2fafa 25%, #f0ffd8 75%);
  --color-gradation-green-sub: linear-gradient(-135deg, #33B27F 25%, #AFCB3C 75%);
  --color-gradation-green-dark: linear-gradient(135deg, #004581 25%, #00815F 75%);
  --color-gradation-orange: linear-gradient(135deg, #fffdf4 25%, #ffece0 75%);
  --color-gradation-orange-reverse: linear-gradient(135deg, #ffece0 25%, #fffdf4 75%);

  /* transition */
  --transition-default: 0.5s;

  /* width */
  --contents-width: min(100%, 1200px);
  --contents-width-pc: min(70%, 1200px);

  /* font */
  --base-font-family: "Noto Sans JP", sans-serif;
  --en-font-family: "Sen", sans-serif;
}

/* font */
@font-face {
  font-display: swap;
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-jp-v55-japanese-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-sans-jp-v55-japanese-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Sen';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/sen-v12-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Sen';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/sen-v12-latin-700.woff2') format('woff2');
}

/* keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/*-----------
 サイト基本設定
-----------*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: 40px;
}

body {
  position: relative;
  width: 100%;
  margin: 0;
  color: var(--color-black);
  font-family: var(--base-font-family);
  font-size: clamp(0.875rem, 0.815rem + 0.25vw, 1rem);
  /* 14-16px 幅390〜1200px */
  font-weight: 400;
  font-style: normal;
  line-height: 1.8;
  letter-spacing: 0.05em;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
  -webkit-text-size-adjust: 100%;
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
  animation: fadeIn 1.5s ease 0s 1 normal;
}

body.is-open::before {
  content: '';
  display: block;
  background: rgba(0, 0, 0, .8);
  position: absolute;
  z-index: var(--z-index-open-back);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: var(--transition-default);
}

main {
  position: relative;
  overflow: clip;
  padding-block-start: 1rem;
}

.contentsInner {
  padding-block-start: 2.5rem;
}

.wrapper {
  width: var(--contents-width);
  margin-inline: auto;
  padding-inline: 20px;
}

@media print,screen and (min-width: 1024px) {

  html {
    scroll-padding-top: 130px;
  }

  main {
    padding-block-start: 0;
  }

  .contentsInner {
    padding-block-start: 3.75rem;
  }

}


/*-----------
　 レスポンシブ制御
-----------*/
.pc-on {
  display: none;
}

.tab-on,
.sp-on {
  display: block;
}

@media print,screen and (min-width: 768px) {
  .tab-on {
    display: none;
  }
}

@media print,screen and (min-width: 1024px) {

  .pc-on {
    display: block;
  }

  .sp-on {
    display: none;
  }
}


/*-----------
 テキスト・見出し・リスト
-----------*/
h1,
h2,
h3,
h4,
h5 {
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  margin-block-end: 0.75em;
}

h1 {
  font-size: clamp(1.5rem, 1.019rem + 1.98vw, 2.5rem);
  /* 24-40px */
}

h2 {
  font-size: clamp(1.375rem, 1.014rem + 1.48vw, 2.125rem);
  /* 22-24px */
}

main h2:not([class]):not(.nodecoHeading),
main h2.wp-block-heading {
  position: relative;
  padding-block-end: 0.5em;
  border-bottom: 2px dotted var(--color-main);
}

main h2:not([class]):not(.nodecoHeading)::after,
main h2.wp-block-heading::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -9px;
  left: -3px;
  width: 18px;
  height: 18px;
  background-color: var(--color-main-sub);
  border: 3px solid var(--color-white);
  border-radius: 50%;
}

h3 {
  font-size: clamp(1.25rem, 1.009rem + 0.99vw, 1.75rem);
  /* 20-28px */
}

main h3:not([class]):not(.nodecoHeading),
main h3.wp-block-heading {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 0.75rem;
}

main h3:not([class]):not(.nodecoHeading) > span,
main h3.wp-block-heading > span {
  display: block;
}

main h3:not([class]):not(.nodecoHeading)::before,
main h3.wp-block-heading::before {
  content: '';
  display: block;
  width: 8px;
  height: 1em;
  margin-block-start: 0.2em;
  background-color: var(--color-main-sub);
  border-radius: 4px;
}

h4 {
  font-size: clamp(1.125rem, 0.944rem + 0.74vw, 1.5rem);
  /* 18-24px */
}

main h4:not([class]):not(.nodecoHeading),
main h4.wp-block-heading {
  position: relative;
  display: inline-block;
  padding-block-end: 0.5em;
}

main h4:not([class]):not(.nodecoHeading)::after,
main h4.wp-block-heading::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 4px;
  background-color: var(--color-main-sub);
  border-radius: 3px;
}

h5 {
  font-size: clamp(1rem, 0.88rem + 0.49vw, 1.25rem);
  /* 16-20px */
}

main h5:not([class]):not(.nodecoHeading),
main h5.wp-block-heading {
  display: grid;
  grid-template-columns: 1em minmax(0, 1fr);
  align-items: baseline;
  gap: 0.25rem;
}

main h5:not([class]):not(.nodecoHeading)::before,
main h5.wp-block-heading::before {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  background-color: var(--color-main-sub);
  border-radius: 50%;
}

h6 {
  font-size: clamp(0.875rem, 0.755rem + 0.49vw, 1.125rem);
  /* 14-18px */
}

main p {
  margin-block-end: 1em;
}

strong,
.textStrong {
  font-weight: 700;
}

small {
  font-weight: 700;
  font-size: 0.625rem;
}

.textSmall {
  font-size: clamp(0.75rem, 0.69rem + 0.25vw, 0.875rem);
  /* 12-14px */
}

.parentSmall {
  font-size: 75%;
}

.textCenter {
  text-align: center;
}

.textRight {
  text-align: right;
}

.inlineText {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.inlineText.center {
  align-items: center;
}

.inlineText > p {
  margin-block-end: 0;
}

.inlineText.center > p {
  text-align: center;
}

.colorMain {
  color: var(--color-main);
}

.colorGray {
  color: var(--color-gray);
}

.textBackYellow {
  display: inline;
  border-bottom: 5px solid var(--color-yellow);
  /* background: linear-gradient(90deg, rgb(255, 226, 0) 0%, rgb(255, 226, 0) 100%);
  background-size: 100% 30%;
  background-position: 0 100%;
  background-repeat: no-repeat; */
}

.textBackRed {
  display: inline-block;
  padding-inline: 0.5em;
  padding-block: 0.25em;
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
  background-color: var(--color-red);
  border-radius: 5px;
}

.textBackGray {
  display: inline-block;
  padding-inline: 0.5em;
  padding-block: 0.25em;
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
  background-color: var(--color-gray);
  border-radius: 5px;
}

.textBackWhite {
  display: inline-block;
  padding-inline: 0.5em;
  padding-block: 0.25em;
  color: var(--color-black);
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
  background-color: var(--color-white);
  border-radius: 5px;
}

.space {
  padding-inline-start: 1em;
}

.inlineBlock {
  display: inline-block;
}

.block {
  display: block;
}

/* カテゴリー */
.categoryList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  margin-block-end: 0.75rem;
}

.categoryList span {
  display: block;
  padding: 0.25em 1em;
  color: var(--color-main);
  font-size: clamp(0.75rem, 0.69rem + 0.25vw, 0.875rem);
  /* 12-14px */
  font-weight: 700;
  background-color: var(--color-white);
  border: 1px solid var(--color-main);
  border-radius: 5px;
}

/* リスト */
main ul {
  padding-inline-start: 1.2em;
  margin-block: 1.5em;
  list-style-type: disc;
}

main ul li:not(:last-child):not(.splide__slide):not(.newsList) {
  margin-block-end: 0.75em;
}

main ul li::marker {
  color: var(--color-main);
}

main ol:not(.breadcrumbsList) {
  margin-block: 1.5rem;
}

main ol:not(.breadcrumbsList) li {
  position: relative;
  margin-block-end: 0.75em;
  padding-inline-start: 1.2em;
}

/* 定義リスト */
dl:not(.cardSummary) div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

dl dt {
  padding-inline: 0;
  padding-block: 0.5em 0;
}

dl:not(.cardSummary):not(.slim):not(.nodeco) dt {
  border-bottom: 1px solid var(--color-main-sub);
}

dl dd {
  padding-inline: 0;
  padding-block: 0.5em;
}

dl dd>ul {
  list-style: disc;
  margin-block: 0;
  margin-inline-start: 1em;
}

  /* 定義リスト スリムタイプ */
dl.slim div {
  display: flex;
  flex-direction: column;
  margin-block-end: 1em;
}

dl.slim dt,
dl.slim dd {
  padding-inline: 0;
  padding-block: 0;
}

dl.slim dd {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

dl.slim .finish {
  color: var(--color-main);
}

dl.slim .finish::before {
  content: '';
  display: block;
  width: 1.25em;
  height: 1.25em;
  -webkit-mask-image: url("../images/icon-check.svg");
  mask-image: url("../images/icon-check.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-main);
}

dl.slim .midway {
  color: var(--color-orange);
}

dl.slim .yet {
  color: var(--color-red);
}

dl.slim .midway::before,
dl.slim .yet::before {
  content: '';
  display: block;
  width: 1.25em;
  height: 1.25em;
  -webkit-mask-image: url("../images/icon-attention.svg");
  mask-image: url("../images/icon-attention.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

dl.slim .midway::before {
  background-color: var(--color-orange);
}
 
dl.slim .yet::before {
  background-color: var(--color-red);
}

@media print,screen and (min-width: 1024px) {

  .textLead {
    text-align: center;
  }

  /* 定義リスト */
  dl:not(.cardSummary) div {
    grid-template-columns: minmax(0, 12em) minmax(0, 1fr);
  }

  dl.long div {
    grid-template-columns: minmax(0, 22em) minmax(0, 1fr) !important;
    align-items: center;
  }

  dl dt,
  dl dd {
    padding-inline: 1em;
    padding-block: 1em;
  }

  dl:not(.cardSummary):not(.slim):not(.nodeco) dd {
    border-bottom: 1px solid var(--color-lt-gray-2);
  }

  /* 定義リスト スリムタイプ */
  dl.slim div {
    flex-direction: row;
    gap: 0.5em;
    margin-block-end: 0;
  }

  dl.slim dt,
  dl.slim dd {
    padding-block: 0.5em;
  }

}

@media print,screen and (min-width: 1200px) {

  .inlineText {
    flex-direction: row;
    gap: 40px;
  }

  .inlineText.center {
    justify-content: center;
  }

  .inlineText strong {
    display: inline-block;
    padding-right: 1em;
  }
  
}


/*-----------
 特別な見出し（メインページ・ページ見出し・検索ボックス見出し・吹き出し見出し etc.）
-----------*/
/* メインページ見出し */
.mainPageHeading {
  width: 100%;
  background: var(--color-gradation-green);
  padding-block: 1rem;
}

.mainPageHeadingInner {
  position: relative;
}

.mainPageHeading .ja {
  margin-block-start: 0.25em;
  margin-block-end: 0;
  text-align: center;
}

.post-type-archive-company .mainPageHeading,
.page-id-1609 .mainPageHeading,
.page-id-1700 .mainPageHeading,
.page-id-1592 .mainPageHeading {
  padding-block: 1rem 0;
}

.post-type-archive-company .mainPageHeadingInner,
.page-id-1609 .mainPageHeadingInner,
.page-id-1700 .mainPageHeadingInner,
.page-id-1592 .mainPageHeadingInner {
  top: -2rem;
}

.post-type-archive-company .mainPageHeadingInner::before,
.page-id-1609 .mainPageHeadingInner::before,
.page-id-1700 .mainPageHeadingInner::before,
.page-id-1592 .mainPageHeadingInner::before {
  content: '';
  display: block;
  width: auto;
  height: 40px;
  margin-inline: auto;
}

/* 企業・インターンシップ一覧 */
.post-type-archive-company .mainPageHeadingInner::before {
  background: url("../images/illust-company.png") no-repeat center center / contain;
}

/* イベント一覧 */
.page-id-1609 .mainPageHeadingInner::before {
  background: url("../images/illust-event.png") no-repeat center center / contain;
}

/* 相談窓口一覧 */
.page-id-1700 .mainPageHeadingInner::before {
  background: url("../images/illust-choose.png") no-repeat center center / contain;
}

/* お知らせ一覧 */
.page-id-1592 .mainPageHeadingInner::before {
  background: url("../images/illust-support.png") no-repeat center center / contain;
}

.mainPageHeading .en {
  margin-block-end: 0;
  color: var(--color-main);
  font-family: var(--en-font-family);
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
}

@media print,screen and (min-width: 1024px) {

  .mainPageHeading {
    padding-block: 2rem;
  }

  .post-type-archive-company .mainPageHeading,
  .page-id-1609 .mainPageHeading,
  .page-id-1700 .mainPageHeading,
  .page-id-1592 .mainPageHeading {
    padding-block: 2rem 1rem;
  }

  .post-type-archive-company .mainPageHeadingInner,
  .page-id-1609 .mainPageHeadingInner,
  .page-id-1700 .mainPageHeadingInner,
  .page-id-1592 .mainPageHeadingInner {
    top: -2.5rem;
  }

  .post-type-archive-company .mainPageHeadingInner::before,
  .page-id-1609 .mainPageHeadingInner::before,
  .page-id-1700 .mainPageHeadingInner::before,
  .page-id-1592 .mainPageHeadingInner::before {
    height: 60px;
  }

}

/* シゴトピ！見出し */
.topicsPageHeading {
  width: 100%;
  background: var(--color-gradation-green);
  padding-block: 1rem;
}
  
.topicsPageHeadingInner {
  display: grid;
  grid-template-columns: min(20%, 145px) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  background: url("../images/illust-miyagi-shape.png") no-repeat center right / contain;
}

.topicsPageHeadingInner::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 73 / 90;
  background: url("../images/illust-cafe.png") no-repeat center center / contain;
}

.topicsPageHeading .ja {
  margin-block-start: 0;
  margin-block-end: 0;
}

.topicsPageHeading .en {
  margin-block-end: 0.5em;
  color: var(--color-main);
  font-family: var(--en-font-family);
  font-weight: 700;
  text-transform: uppercase;
}

.topicsPageHeading .subtext {
  margin-block-end: 0;
  font-size: clamp(0.75rem, 0.63rem + 0.49vw, 1rem);
  /* 12-16px */
  font-weight: 700;
}

@media print,screen and (min-width: 1024px) {
  
  .topicsPageHeadingInner {
    gap: 2rem;
  }

}

/* ページ見出し */
.pageHeading {
  width: 100%;
  background: var(--color-gradation-green);
  padding-block: 2rem;
}

.pageHeading .ja {
  margin-block: 0;
}

.pageHeading .en {
  margin-block-end: 0.5em;
  color: var(--color-main);
  font-family: var(--en-font-family);
  font-weight: 700;
  text-transform: uppercase;
}

@media print,screen and (min-width: 1024px) {

  .pageHeading {
    padding-block: 3.75rem;
  }

}

/* 検索ボックス・絞り込み見出し */
.searchBoxHeading,
.filterHeading {
  height: fit-content;
  font-size: clamp(1.125rem, 1.065rem + 0.25vw, 1.25rem);
  /* 18-20px */
  margin-block-end: 0;
}

.searchBoxHeading {
  width: 100em;
}

.filterHeading {
  width: 100%;
}

.searchBoxHeading span,
.filterHeading span {
  display: inline-block;
  border-bottom: 2px solid var(--color-black);
}

/* 吹き出し見出し */
.speechHeading {
  position: relative;
  width: fit-content;
  padding-inline: 2em;
  padding-block: 0.75em;
  margin-inline: auto;
  color: var(--color-white);
  text-align: center;
  font-size: clamp(0.875rem, 0.755rem + 0.49vw, 1.125rem);
  /* 16-18px */
  font-weight: 700;
  white-space: nowrap;
  background-color: var(--color-main);
  border-radius: 3em;
}

.speechHeading::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  width: 12px;
  height: 12px;
  margin: auto;
  background-color: var(--color-main);
  transform: rotate(45deg);
}

.speechHeading.gradationGreen {
  background: var(--color-gradation-green-dark);
}

.speechHeading.gradationGreen::after {
  background-color: #2d656d;
}

.speechHeading.orange {
  background-color: var(--color-orange);
}

.speechHeading.orange::after {
  background-color: var(--color-orange);
}


@media print,screen and (min-width: 1024px) {

  .searchBoxHeading {
    width: 8em;
  }

  .filterHeading {
    width: 23%;
  }

  .searchBoxHeading,
  .filterHeading {
    padding-block: 0.5em;
  }

}

/* 吹き出し見出し */
.bubbleHeading {
  text-align: center;
  font-size: clamp(1rem, 0.88rem + 0.49vw, 1.25rem);
  /* 16-20px */
}

.bubbleHeading span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: fit-content;
  margin-inline: auto;
}

.bubbleHeading span::before {
  content: '';
  display: block;
  width: 1em;
  height: 1em;
  -webkit-mask-image: url("../images/icon-bubble-left.svg");
  mask-image: url("../images/icon-bubble-left.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-main-sub);
  transition: var(--transition-default);
}

.bubbleHeading span::after {
  content: '';
  display: block;
  width: 1em;
  height: 1em;
  -webkit-mask-image: url("../images/icon-bubble-right.svg");
  mask-image: url("../images/icon-bubble-right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-main-sub);
  transition: var(--transition-default);
}

.bubbleHeading.orange span::before,
.bubbleHeading.orange span::after {
  background-color: var(--color-orange);
}

/* キーワード見出し */
.keywordHeading {
  display: grid;
  grid-template-columns: 1.25em minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  /* 16px */
  margin-block-end: 0.75rem;
}

.keywordHeading::before {
  content: '';
  display: block;
  width: 1.25em;
  height: 1.25em;
  -webkit-mask-image: url("../images/icon-search.svg");
  mask-image: url("../images/icon-search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-main);
}

/* アピールポイント見出し */
.appealHeading {
  display: grid;
  grid-template-columns: 1.75em minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.appealHeading::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 23 / 17;
  -webkit-mask-image: url("../images/icon-megaphone.svg");
  mask-image: url("../images/icon-megaphone.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-main-sub);
}

/* 関連リンク見出し */
.relatedLinkHeading {
  display: grid;
  grid-template-columns: 1.25em minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(1rem, 0.88rem + 0.49vw, 1.25rem);
  /* 16-20px */
  margin-block-end: 0.75rem;
}

.relatedLinkHeading::before {
  content: '';
  display: block;
  width: 1.25em;
  height: 1.25em;
  -webkit-mask-image: url("../images/icon-link.svg");
  mask-image: url("../images/icon-link.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-main-sub);
}


/*-----------
 表組み
-----------*/
.tableScroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.tableScroll table {
  width: 800px;
}

.tableScroll::-webkit-scrollbar {
  height: 15px;
}

.tableScroll::-webkit-scrollbar-track {
  background: var(--color-m-gray);
}

.tableScroll::-webkit-scrollbar-thumb {
  background: var(--color-main);
}

table {
  width: 100%;
}

table thead {
  border-bottom: 2px solid var(--color-gray);
}

table tfoot {
  border-top: 3px solid var(--color-gray);
}

table thead th,
table tfoot th {
  background-color: var(--color-main-sub-lt);
}

table th,
table td {
  padding-inline: 1em;
  padding-block: 0.75em;
  border: 1px solid var(--color-gray);
}

table th {
  background-color: var(--color-main-gray);
}

table td {
  background-color: var(--color-white);
}

table td ul {
  margin-block: 0;
}

table td>ol {
  margin-block: 0;
}

@media print,screen and (min-width: 768px) {

  .tableScroll table {
    width: 100%;
  }

}

@media print,screen and (min-width: 1024px) {

  table th,
  table td {
    padding-inline: 1.5em;
    padding-block: 1.25em;
  }
}


/*-----------
 リンク・ボタン
-----------*/
* a,
a img,
a::before,
a::after,
button,
button::after,
button * {
  -webkit-transition: var(--transition-default);
  transition: var(--transition-default);
}

header a:focus {
  color: var(--color-main);
}

main a,
.footerNavi ul a {
  text-decoration: underline;
}

main a:focus {
  color: var(--color-main);
}

.contentsInner a {
  font-weight: 700;
}

footer a:focus {
  color: var(--color-main);
}

a[href^=https]::after,
a[href^=http]::after,
a[href^="//"]::after {
  content: "";
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin-inline-start: 0.5rem;
  vertical-align: middle;
  -webkit-mask-image: url("../images/icon-external.svg");
  mask-image: url("../images/icon-external.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--color-main);
}

a[href^="https://my-musubi.pref.miyagi.jp"]::after,
a[href^="http://my-musubi.pref.miyagi.jp"]::after,
a[href^="https://miyagimusubi.sakura.ne.jp"]::after,
a[href^="http://miyagimusubi.sakura.ne.jp"]::after,
a[href^="https://x.com/"]::after,
a[href^="https://twitter.com/"]::after,
a[href^="https://www.facebook.com/"]::after,
a[href^="https://www.youtube.com/"]::after,
a[href^="https://social-plugins.line.me/"]::after {
  display: none;
  margin-inline-start: 0;
}

/* テキストリンク　 */
.textLink a {
  color: var(--color-black) !important;
  font-weight: 700;
}

.textLink a::after {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-inline-start: 0.5rem;
  vertical-align: middle;
  -webkit-mask-image: url("../images/icon-circle-arrow-right.svg");
  mask-image: url("../images/icon-circle-arrow-right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--color-main);
}

.textLink a:focus::after {
  transform: translateX(3px);
}

.checkTextLink a::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-inline-end: 0.5rem;
  vertical-align: middle;
  -webkit-mask-image: url("../images/icon-pc-check.svg");
  mask-image: url("../images/icon-pc-check.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--color-main);
}

/* .contentsInner p a {
  color: var(--color-main);
} */

/* skipLink */
#skipLink:has(a:focus) {
  top: 0;
}

#skipLink {
  position: absolute;
  z-index: var(--z-index-header);
  top: -4em;
  left: 0;
  -webkit-transition: top 0.5s ease;
  transition: top 0.5s ease;
}

#skipLink a {
  display: block;
  padding: 2px 10px;
  color: var(--color-white);
  text-align: left;
  font-size: clamp(0.75rem, 0.69rem + 0.25vw, 0.875rem);
  /*12-14px*/
  overflow: hidden;
  background-color: var(--color-black);
}

/* ボタン要素 */
button {
  font-family: var(--base-font-family);
  font-style: normal;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* 共通ボタン */
.buttonFlexBox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em;
}

.button {
  width: fit-content;
  margin-block-end: 1em;
}

.buttonCenter {
  margin-inline: auto;
}

.button a {
  display: block;
  position: relative;
  padding-block: 1em;
  padding-inline: 2em calc(1em + 1.5rem);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  border-radius: 3em;
}

.button.min a {
  padding-block: 0.75em;
  padding-inline: 2em calc(1em + 1.5rem);
  font-size: 0.875rem;
  /* 14px */
  line-height: 1.5;
}

.button a::after {
  content: '';
  display: block;
  position: absolute;
  top: calc(50% - 0.75rem);
  right: 1em;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icon-circle-arrow-right.svg");
  mask-image: url("../images/icon-circle-arrow-right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-main);
  transition: var(--transition-default);
}

/* ボタン　バリエーション */
.normalButton,
.normalOrangeButton,
.normalBlueButton,
.accentButton,
.accentOrangeButton,
.accentBlueButton,
.blackButton,
.shadowButton,
.favoriteNormalButton {
  width: min(100%, 360px);
}

.normalButton a {
  background-color: var(--color-white);
  border: 2px solid var(--color-main);
}

.normalOrangeButton a {
  background-color: var(--color-white);
  border: 2px solid var(--color-orange);
}

.normalOrangeButton a::after {
  background-color: var(--color-orange);
}

.normalBlueButton a {
  color: var(--color-black);
  background-color: var(--color-white);
  border: 2px solid var(--color-blue);
}

.normalBlueButton a::after {
  background-color: var(--color-blue);
}

.accentButton a {
  color: var(--color-white);
  background-color: var(--color-main);
  border: 2px solid var(--color-main);
}

.accentButton a:focus {
  color: var(--color-white);
  background-color: var(--color-main-dark);
  border-color: var(--color-main-dark);
}

.accentButton a::after {
  background-color: var(--color-white);
}

.accentOrangeButton a {
  color: var(--color-white);
  background-color: var(--color-orange);
  border: 2px solid var(--color-orange);
}

.accentOrangeButton a:focus {
  color: var(--color-white);
  background-color: var(--color-orange-dark);
  border-color: var(--color-orange-dark);
}

.accentOrangeButton a::after {
  background-color: var(--color-white);
}

.accentBlueButton a {
  color: var(--color-white);
  background-color: var(--color-blue);
  border: 2px solid var(--color-blue);
}

.accentBlueButton a:focus {
  color: var(--color-white);
  background-color: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
}

.accentBlueButton a::after {
  background-color: var(--color-white);
}

.blackButton a {
  color: var(--color-white);
  background-color: var(--color-black);
  border: 2px solid var(--color-black);
}

.blackButton a:focus {
  color: var(--color-white);
  background-color: var(--color-gray);
  border-color: var(--color-gray);
}

.blackButton a::after {
  background-color: var(--color-white);
}

table td > .blackButton {
  margin-block-end: 0.75em;
}

table td > .blackButton a {
  padding-block: 0.5em;
  padding-inline: 0.75em calc(1em + 1.5rem);
  font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem);
  /* 12-14px */
}

table td > .blackButton:last-of-type {
  margin-block-end: 0;
}

table td > .blackButton a::after {
  top: calc(50% - 0.5rem);
  width: 1rem;
  height: 1rem;
}

.shadowButton a {
  background-color: var(--color-white);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.shadowButton.orange a::after {
  background-color: var(--color-orange);
}

.moreButton a::after {
  -webkit-mask-image: url("../images/icon-more.svg");
  mask-image: url("../images/icon-more.svg");
}

/* 窓口 ボタン */
.counterButton {
  position: relative;
}

.counterButton a {
  padding-block: 2em;
  padding-inline: 25% calc(1em + 1.5rem);
  text-decoration: none;
  font-weight: 700;
  border-radius: 10px;
}

.counterAccentButton a {
  color: var(--color-white);
  background-color: var(--color-orange);
}

.counterAccentButton a:focus {
  color: var(--color-white);
  background-color: var(--color-orange-dark);
}

.counterNormalButton a {
  background-color: var(--color-white);
  border: 2px solid var(--color-orange);
}

.counterNormalButton a:focus {
  color: var(--color-white);
  background-color: var(--color-orange);
}

.counterButton a::after {
  content: '';
  display: block;
  position: absolute;
  top: calc(50% - 0.75rem);
  right: 1em;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icon-circle-arrow-right.svg");
  mask-image: url("../images/icon-circle-arrow-right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: var(--transition-default);
}

.counterAccentButton a::after {
  background-color: var(--color-white);
}

.counterNormalButton a::after {
  background-color: var(--color-orange);
}

.counterButtonImage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5%;
  margin: auto;
  width: 15%;
  height: fit-content;
}

/* 企業関係　ボタン */
.favoriteButton {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  top: calc((100cqi / 16 * 9) - 40px + 8px);
  right: -8px;
  width: 40px;
  height: 40px;
  background-color: var(--color-white);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}

.favoriteButton::after {
  content: '';
  display: block;
  width: 50%;
  height: 50%;
  background-image: url("../images/icon-favorite-off.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.favoriteButton.is-active::after {
  background-image: url("../images/icon-favorite-on.svg");
}

.favoriteTextButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  position: relative;
  width: min(100%, 360px);
  padding-block: 1em;
  padding-inline: 2em calc(1em + 1.5rem);
  margin-inline: auto;
  margin-block-end: 1em;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  border-radius: 3em;
  color: var(--color-white);
  background-color: var(--color-main);
}

.favoriteTextButton::before {
  content: '';
  display: block;
  width: 1.25em;
  height: 1.25em;
  -webkit-mask-image: url("../images/icon-favorite-on.svg");
  mask-image: url("../images/icon-favorite-on.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-white);
}

/* サイトへ戻るボタン */
.homeButton a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  position: relative;
  width: min(100%, 360px);
  padding-block: 1em;
  padding-inline: 2em calc(1em + 1.5rem);
  margin-inline: auto;
  margin-block-end: 1em;
  text-align: center;
  text-decoration: none;
  font-size: 0.875rem;
  /* 14px */
  font-weight: 700;
  border-radius: 3em;
  color: var(--color-main);
  background-color: var(--color-white);
  border: 2px solid var(--color-main);
  border-radius: 10px;
}

.homeButton a::before {
  content: '';
  display: block;
  width: 1.25em;
  height: 1.25em;
  -webkit-mask-image: url("../images/icon-home.svg");
  mask-image: url("../images/icon-home.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-main);
}

/* 決定報告ボタン */
.accentSquareButton a {
  display: block;
  position: relative;
  width: min(100%, 360px);
  padding-block: 1em;
  padding-inline: 2em calc(1em + 1.5rem);
  margin-inline: auto;
  margin-block-end: 1em;
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  font-size: 0.875rem;
  /* 14px */
  font-weight: 700;
  border-radius: 10px;
  background-color: var(--color-main);
  border: 2px solid var(--color-main);
}

.accentSquareButton a::after {
  content: '';
  display: block;
  position: absolute;
  top: calc(50% - 0.75rem);
  right: 1em;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../images/icon-circle-arrow-right.svg");
  mask-image: url("../images/icon-circle-arrow-right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-white);
  transition: var(--transition-default);
}

.accentSquareButton a:focus {
  color: var(--color-white);
  background-color: var(--color-main-dark);
  border-color: var(--color-main-dark);
}

/* フォーム関係ボタン */
.deleteButton {
  background-color: var(--color-red);
}

.previewButton {
  background-color: var(--color-orange);
}

.submitButton {
  background-color: var(--color-main);
}

@media print,screen and (min-width: 1024px) {

  /* 窓口 ボタン */
  .counterButton a {
    padding-inline: 30% calc(1em + 1.5rem);
    padding-block: 2.5em;
  }

  .counterButtonImage {
    top: -10%;
    width: 23%;
  }
}

@media (any-hover: hover) {

  /* リンク・ボタン */
  a:hover img {
    opacity: 0.7;
  }

  main a:hover,
  .footerNavi ul a:hover {
    color: var(--color-main);
  }

  /* テキストリンク　 */
  .textLink a:hover::after {
    transform: translateX(3px);
  }

  /* ボタン要素 */
  button[type=button]:not(.hamburgerButton):not(.searchButton):not(.dashboardButton):not(.deleteButton):not(.previewButton):not(.splide__arrow):not(.splide__toggle):hover {
    background-color: var(--color-black);
  }

  /* 共通 ボタン　 */
  .button a:hover::after {
    transform: translateX(3px);
  }

  /* ボタン　バリエーション */
  .normalButton a:hover {
    color: var(--color-white);
    background-color: var(--color-main);
  }

  .normalOrangeButton a:hover {
    color: var(--color-white) !important;
    background-color: var(--color-orange);
  }

  .normalOrangeButton a:hover::after {
    background-color: var(--color-white);
  }

  .normalBlueButton a:hover {
    color: var(--color-white) !important;
    background-color: var(--color-blue);
  }

  .normalBlueButton a:hover::after {
    background-color: var(--color-white);
  }

  .normalButton a:hover::after {
    background-color: var(--color-white);
  }

  .accentButton a:hover {
    color: var(--color-white);
    background-color: var(--color-main-dark);
    border-color: var(--color-main-dark);
  }

  .accentOrangeButton a:hover {
    color: var(--color-white) !important;
    background-color: var(--color-orange-dark);
    border-color: var(--color-orange-dark);
  }

  .accentBlueButton a:hover {
    color: var(--color-white) !important;
    background-color: var(--color-blue-dark);
    border-color: var(--color-blue-dark);
  }

  .blackButton a:hover {
    color: var(--color-white) !important;
    background-color: var(--color-gray);
    border-color: var(--color-gray);
  }

  .shadowButton a:hover {
    color: var(--color-main);
  }

  .shadowButton.orange a:hover {
    color: var(--color-orange);
  }

  /* 窓口 ボタン */
  .counterAccentButton a:hover {
    color: var(--color-white);
    background-color: var(--color-orange-dark);
  }

  .counterNormalButton a:hover {
    color: var(--color-white);
    background-color: var(--color-orange);
  }

  .counterNormalButton a:hover::after {
    background-color: var(--color-white);
  }
  
  .counterButton a:hover::after {
    transform: translateX(3px);
  }

  /* 企業関係　ボタン */
  .favoriteTextButton:hover {
    background-color: var(--color-main-dark);
  }

  /* サイトへ戻るボタン */
  .homeButton a:hover {
    color: var(--color-white);
    background-color: var(--color-main);
  }

  .homeButton a:hover::before {
    background-color: var(--color-white);
  }

  /* 決定報告ボタン */
  .accentSquareButton a:hover {
    color: var(--color-white);
    background-color: var(--color-main-dark);
    border-color: var(--color-main-dark);
  }

  .accentSquareButton a:hover::after {
    transform: translateX(3px);
  }

  /* フォーム関係ボタン */
  .deleteButton:hover {
    background-color: var(--color-orange-dark);
  }

  .previewButton:hover {
    background-color: var(--color-orange-dark);
  }

  .submitButton:hover {
    background-color: var(--color-main-dark);
  }

}


/* -----------
 フォーム
-----------*/
fieldset {
  margin-block-start: 2em;
  padding-block-end: 2em;
  border-bottom: 2px dotted var(--color-m-gray);
}

fieldset .fieldsetGroup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25em 2em;
}

fieldset .fieldsetGroupColumn {
  align-items: start;
  flex-direction: column;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=number],
select,
textarea {
  width: 100%;
  padding-inline: 0.75em;
  padding-block: 0.75em;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid var(--color-black);
}

input::placeholder {
  color: var(--color-gray);
}

input[type=checkbox],input[type=radio] {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-end: 0.2em;
  vertical-align: middle;
  border-color: var(--color-black);
}

label > span {
  display: inline;
  vertical-align: middle;
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline: 0.75em calc(12px + 1.75em);
  background-image: url("../images/icon-arrow-bottom.svg");
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: right 1em center;
  cursor: pointer;
}

@media (any-hover: hover) {

  input[type=button]:hover {
    background-color: var(--color-main-dark);
  }

}

/* -----------
 画像・メディア
-----------*/
picture {
  display: block;
}

img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.videoArea {
  width: min(100%, 540px);
  aspect-ratio: 16 / 9;
  margin-inline: auto;
}
.videoArea iframe {
  width: 100%;
  height: 100%;
}


/*-----------
 header
-----------*/
/* ヘッダー本体 */
.headerInner {
  position: relative;
  z-index: var(--z-index-header);
  padding-block-start: 10px;
}

.headerName {
  position: relative;
  width: min(50%, 260px);
  height: fit-content;
  margin-inline: auto;
}

/* ナビがオープンした時 */
body.is-open .headerName {
  opacity: 0;
}

/* SP 下部ボタンボックス */
.spButtonBox {
  display: grid;
  grid-template-columns: 40% repeat(2, minmax(0, 1fr));
  align-items: center;
  position: fixed;
  z-index: var(--z-index-sp-footer);
  bottom: 0;
  width: 100vw;
  min-height: 67px;
  border-top: 1px solid var(--color-m-gray);
}

/* SP 検索ボタン */
.searchButton,
.dashboardButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 100%;
  padding-block: 1em;
  padding-inline: 0.5em;
  font-size: 0.688rem;
  font-weight: 700;
  background-color: var(--color-white);
  border-right: 1px solid var(--color-m-gray);
}

.searchButton img,
.dashboardButton img {
  display: none;
  width: min(30%, 35px);
  height: fit-content;
}

.searchButton span::after {
  content: '';
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-inline-start: 0.5em;
  vertical-align: middle;
  -webkit-mask-image: url("../images/icon-search.svg");
  mask-image: url("../images/icon-search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-main);
}

/* マイページボタン */
.mypageButtonBox {
  height: 100%;
}

.mypageButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 100%;
  padding-block: 1em;
  padding-inline: 0.5em;
  font-size: 0.688rem;
  font-weight: 700;
  background-color: var(--color-white);
}

.mypageButton::before {
  content: '';
  display: block;
  width: 14px;
  height: 20px;
  -webkit-mask-image: url("../images/icon-mypage.svg");
  mask-image: url("../images/icon-mypage.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-orange);
}

/* 企業ボタン */
.companyButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 100%;
  padding-block: 1em;
  padding-inline: 0.5em;
}

.companyButton::before {
  content: '';
  display: block;
  width: 21px;
  height: 20px;
  -webkit-mask-image: url("../images/icon-company.svg");
  mask-image: url("../images/icon-company.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-main);
}

/* ハンバーガーボタン */
.hamburgerButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  z-index: var(--z-index-hamburger);
  height: 100%;
  padding-block: 1em;
  padding-inline: 0.5em;
  font-size: 0.688rem;
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-main);
}

.hamburgerButton.pc-on {
  display: none;
}

.hamburgerBox {
  display: flex;
  align-items: center;
}

.hamburgerBoxInner {
  display: block;
  position: relative;
  width: 24px;
  height: 18px;
}

.hamburgerLine {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-white);
}

.hamburgerLine:first-child {
  top: 0;
}

.hamburgerLine:nth-child(2) {
  top: 50%;
}

.hamburgerLine:last-child {
  top: 100%;
}

.hamburgerText {
  display: block;
}

/* ハンバーガーボタンがクリックされたとき */
.hamburgerButton.is-active .hamburgerLine:first-child,
.dashboardButton.is-active .hamburgerLine:first-child {
  top: 50%;
  transform: rotate(35deg);
}

.hamburgerButton.is-active .hamburgerLine:nth-child(2),
.dashboardButton.is-active .hamburgerLine:nth-child(2) {
  opacity: 0;
}

.hamburgerButton.is-active .hamburgerLine:last-child,
.dashboardButton.is-active .hamburgerLine:last-child {
  top: 50%;
  transform: rotate(-35deg);
}

/* naviBox */
#globalNaviBox {
  display: flex;
  /* align-items: center; */
  justify-content: center;
  position: fixed;
  opacity: 0;
  visibility: hidden;
  z-index: var(--z-index-navi);
  right: -100%;
  top: 0px;
  width: 90%;
  height: calc(100% - 67px);
  background-color: var(--color-lt-gray);
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
  overflow-y: scroll;
  border-radius: 20px 0 0 0;
  transition: var(--transition-default);
}

/* メニューボタンがクリックされたとき */
#globalNaviBox.is-active {
  opacity: 1;
  visibility: visible;
  right: 0;
}

/* naviBoxコンテンツ */
.naviBoxInner {
  width: 80%;
  padding-block-start: 1.5rem;
}

.naviLogo {
  width: min(25%, 90px);
  margin-inline: auto;
}

.nomalMenu li a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.5em;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  padding-inline: 0.5em;
  padding-block: 1.5em;
  font-weight: 700;
  border-bottom: 2px dotted var(--color-m-gray);
  text-decoration: none;
}

.nomalMenu li a:after {
  content: '';
  display: block;
  width: 1.5em;
  height: 1.5em;
  -webkit-mask-image: url("../images/icon-circle-arrow-right.svg");
  mask-image: url("../images/icon-circle-arrow-right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background: var(--color-gradation-green-sub);
}

.loginMenu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding-block: 2.5rem;
}

.loginMenu a {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-width: 16em;
  padding-inline: 2em;
  padding-block: 1em;
  font-size: 0.875rem;
  /* 14px */
  font-weight: 700;
  background-color: var(--color-white);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  border-radius: 3em;
}

/* searchBox */
#searchNaviBox {
  display: flex;
  justify-content: center;
  position: fixed;
  opacity: 0;
  visibility: hidden;
  z-index: var(--z-index-modal);
  right: -100%;
  top: 0px;
  width: 90%;
  height: calc(100% - 67px);
  padding-block: 2rem;
  background-color: var(--color-lt-gray);
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
  border-radius: 20px 0 0 0;
  transition: var(--transition-default);
}

/* 検索ボタンがクリックされたとき */
#searchNaviBox.is-active {
  opacity: 1;
  visibility: visible;
  right: 0;
}

/* BoxInnerコンテンツ */
.searchNaviBoxInner {
  width: 80%;
}

#searchNavi {
  padding-block-end: 3.75rem;
}

#searchNavi ul li a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.5em;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: 0.5em;
  padding-block: 1.5em;
  font-weight: 700;
  border-bottom: 2px dotted var(--color-m-gray);
  text-decoration: none;
}

#searchNavi ul li a:after {
  content: '';
  display: block;
  width: 1.5em;
  height: 1.5em;
  -webkit-mask-image: url("../images/icon-circle-arrow-right.svg");
  mask-image: url("../images/icon-circle-arrow-right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background: var(--color-gradation-green-sub);
}

#searchNavi ul li.has-submenu {
  padding-inline: 0.5em;
}

#searchNavi ul li.has-submenu .menu-parent {
  display: block;
  padding-block: 1.25em 0.5em;
  padding-inline: 0.5em;
  font-weight: 700;
}

#searchNavi ul li.has-submenu .submenu {
  list-style: none;
  padding-inline-start: 0;
  padding-block-end: 1em;
  margin-block: 0;
}

#searchNavi ul li.has-submenu .submenu li {
  margin-block-end: 0 !important;
}

#searchNavi ul.submenu li a {
  padding-inline: 1.5em 0.5em;
  border-bottom: none;
  font-size: 0.875em;
  font-weight: 400;
}

#searchNavi ul.submenu li:not(:last-of-type) a {
  padding-block: 1.25em 0.5em;
}

#searchNavi ul.submenu li a:after {
  width: 1em;
  height: 1em;
  margin-inline: auto;
  -webkit-mask-image: url("../images/icon-arrow-right.svg");
  mask-image: url("../images/icon-arrow-right.svg");
}

#searchNavi ul.submenu {
  border-bottom: 2px dotted var(--color-m-gray);
}

/* headerNavi */
#headerNaviBox {
  display: none;
  position: relative;
  opacity: 0;
  visibility: hidden;
  z-index: var(--z-index-modal);
}

/* メニュー・検索ボタンがクリックされたとき */
body.is-open #headerNavi {
  opacity: 0;
  visibility: hidden;
}

@media print,screen and (min-width: 375px) {

  /* SP 検索・管理メニューボタン */
  .searchButton,
  .dashboardButton {
    font-size: 0.75rem;
  }

  .searchButton img,
  .dashboardButton img {
    display: block;
  }

  /* SP マイページボタン */
  .mypageButton {
    font-size: 0.75rem;
  }

  /* ハンバーガーボタン */
  .hamburgerButton {
    font-size: 0.75rem;
  }
}

@media print,screen and (min-width: 1024px) {
  header {
    position: sticky;
    z-index: var(--z-index-header);
    left: 0;
    top: 0;
    width: 100%;
  }

  .headerInner {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: var(--z-index-header);
    /* background-color: var(--color-white); */
    padding-block-start: 0;
    transition: var(--transition-default);
  }

  /* スクロール時に背景色追加 */
  .is-scrolled .headerInner {
    background-color: var(--color-white);
  }

  .headerInner::before {
    display: none;
  }

  body.is-open .headerInner {
    background-color: transparent;
  }

  /* ヘッダーロゴ */
  .headerName {
    padding-inline-start: 2.5rem;
    padding-block-start: 1rem;
    margin-inline: 0;
    transition: var(--transition-default);
  }

  /* スクロール時のヘッダーロゴ */
  .is-scrolled .headerName {
    width: min(35%, 230px);
    padding-block-start: 0.5rem;
    padding-block-end: 0.5rem;
  }

  /* SP 下部ボタンボックス */
  .spButtonBox {
    display: none;
  }

  /* ハンバーガーボタン */
  .hamburgerButton.pc-on {
    display: block;
    position: fixed;
    z-index: var(--z-index-hamburger);
    right: 0;
    top: 0;
    width: 90px;
    height: 85px;
    padding-block: 1.5em;
    padding-inline: 1.5em;
    border-bottom-left-radius: 10px;
  }

  .hamburgerBox {
    /* display: flex; */
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
  }

  /* グローバルナビ */
  #globalNaviBox {
    height: 100svh;
    border-radius: 60px 0 0 60px;
    width: 60%;
  }

  .naviBoxInner {
    padding-block-start: 2rem;
  }

  .naviLogo {
    margin-block-end: 1rem;
  }

  .nomalMenu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.5rem;
  }

  .loginMenu {
    flex-direction: row;
    gap: 0 1.5rem;
    padding-block: 2.5rem 5rem;
  }

  .loginMenu a {
    padding-block: 1.5em;
  }

  #headerNaviBox {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    position: relative;
    top: 0;
    right: 90px;
  }

  #headerNavi ul {
    display: flex;
    align-items: center;
  }

  #headerNavi ul li {
    border-left: 1px solid var(--color-m-gray);
  }

  #headerNavi ul li a {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1.25em 1.75em;
    font-size: 0.875rem;
    /* 14px */
    font-weight: 700;
  }

  /* マイページボタン */
  .mypageButton {
    background-color: transparent;
  }

  /* searchBox */
  #searchNaviBox {
    display: none;
  }
}

@media (any-hover: hover) {
  /* ハンバーガーボタン */
  .hamburgerButton:hover {
    background-color: var(--color-main-dark);
  }

  .nomalMenu li a:hover::after {
    transform:translateX(3px);
  }
}


/*-----------
 mainLayout
-----------*/
@media print,screen and (min-width: 1024px) {

  .mainLayout {
    display: flex;
    align-items: flex-start;
  }

}


/*-----------
 sideber
-----------*/
.sideber {
  display: none;
}

@media print,screen and (min-width: 1024px) {
  .sideber {
    display: block;
    position: sticky;
    left: 0;
    top: 120px;
    width: min(25%, 320px);
    z-index: 1;
  }

  /* スクロールしたら */
  .is-scrolled + .mainLayout .sideber {
    top: 100px;
  }

  .sideberInner {
    max-height: calc(100svh - 100px);
    overflow-y: auto;
    padding-block: 1rem 2.5rem;
    padding-inline: 20px;
    background-color: var(--color-white);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    border-radius: 0 20px 20px 0;
  }

  .sideberTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    margin-block-end: 0.5em;
    font-size: clamp(1rem, 0.273rem + 1.14vw, 1.125rem);
    /* 16-18px 1024-1200px */
    font-weight: 700;
  }

  .sideberTitle img {
    width: min(30%, 100px);
  }

  .sideberTitle span {
    display: block;
  }

  .sideberTitle span::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-inline-start: 0.5em;
    vertical-align: middle;
    -webkit-mask-image: url("../images/icon-search.svg");
    mask-image: url("../images/icon-search.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: var(--color-main);
  }

  .sideberNavi ul {
    list-style: none;
    padding-inline-start: 0;
    margin-block: 0;
  }

  .sideberNavi ul li {
    margin-block-end: 0 !important;
  }

  .sideberNavi ul li a {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.5em;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: 0.5em;
    padding-block: 1.25em;
    font-size: clamp(0.75rem, 0.023rem + 1.14vw, 0.875rem);
    /* 12-14px 1024-1200px */
    font-weight: 700;
    border-bottom: 2px dotted var(--color-m-gray);
    text-decoration: none;
  }

  .sideberNavi ul li a::after {
    content: '';
    display: block;
    width: 1.5em;
    height: 1.5em;
    -webkit-mask-image: url("../images/icon-circle-arrow-right.svg");
    mask-image: url("../images/icon-circle-arrow-right.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    background: var(--color-gradation-green-sub);
  }

  .sideberNavi ul.submenu li a {
    padding-inline: 1.5em 0.5em;
    border-bottom: none;
    font-size: 0.813rem;
    font-weight: 400;
  }

  .sideberNavi ul.submenu li:not(:last-of-type) a {
    padding-block: 1.25em 0;
  }

  .sideberNavi ul.submenu li a::after {
    width: 1em;
    height: 1em;
    margin-inline: auto;
    -webkit-mask-image: url("../images/icon-arrow-right.svg");
    mask-image: url("../images/icon-arrow-right.svg");
  }

  .sideberNavi ul.submenu {
    border-bottom: 2px dotted var(--color-m-gray);
  }
}

@media print,screen and (min-width: 1360px) {
  .sideberInner {
    padding-inline: 35px;
  }
}

@media (any-hover: hover) {
  .sideberNavi ul li a:hover::after {
    transform:translateX(3px);
  }
}

/* サイドバー サブメニュー（has-submenu / menu-parent はサンプルにないHTML構造の補完） */
.sideberNavi ul li.has-submenu .menu-parent {
  display: block;
  padding-block: 1.25em 0.5em;
  padding-inline: 0.5em;
  font-size: clamp(0.75rem, 0.023rem + 1.14vw, 0.875rem);
  font-weight: 700;
}



/*-----------
 contents
-----------*/
#contents {
  position: relative;
  margin-block: 1rem 3.75rem;
}

@media print,screen and (min-width: 1024px) {
  #contents {
    width: calc(100vw - min(25%, 320px));
    margin-block: 1.5rem 10rem;
  }
}


/*-----------
 footer
-----------*/
footer {
  position: relative;
  background: var(--color-gradation-green);
}

.pageTop {
  display: block;
  position: absolute;
  top: -30px;
  right: 10px;
  width: 60px;
  height: 60px;
}

.pageTop a {
  display: block;
}

.footerInner {
  padding-block: 2.5rem;
}

.footerName {
  text-align: center;
  font-size: clamp(1.25rem, 1.009rem + 0.99vw, 1.25rem);
  /* 20-28px */
  font-weight: 700;
  margin-block-end: 1.25rem;
}

.footerContact {
  padding: 1rem;
  background-color: var(--color-white);
  border-radius: 10px;
}

.footerContact>p:first-child {
  margin-block-end: 1em;
  text-align: center;
  font-size: clamp(1rem, 0.88rem + 0.49vw, 1.25rem);
  /* 16-20px */
  font-weight: 700;
}

.telBoxArea {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1.5rem;
  margin-block-end: 1.25rem;
}

.telBoxArea .button {
  margin-block-end: 0;
}

.footerBanner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block-start: 2rem;
}

.footerBanner a {
  display: block;
  width: calc(50% - 0.5rem);
}

.footerBanner a::after {
  display: none;
}

.footerBanner img {
  margin-block-end: 0.5em;
  border: 1px solid var(--color-lt-gray-2);
}

.footerBottom {
  padding-block: 2rem 5rem;
  border-top: 1px solid var(--color-black);
}

.footerNavi {
  margin-block-end: 1.25rem;
}

.footerNavi ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25em;
}

.footerNavi ul li {
  font-size: clamp(0.75rem, 0.69rem + 0.25vw, 0.875rem);
  /* 12-14px */
}

.copyright {
  text-align: center;
}

.copyright small {
  font-family: var(--en-font-family);
}

@media print,screen and (min-width: 768px) {

  .footerContact {
    padding: 2.5rem;
    background-color: var(--color-white);
    border-radius: 10px;
  }

  .footerBanner {
    justify-content: center;
  }

  .footerBanner a {
    display: block;
    width: calc(25% - 0.5rem);
  }
}

@media print,screen and (min-width: 1024px) {

  .pageTop {
    top: -50px;
    right: 40px;
    width: 100px;
    height: 100px;
  }

  .footerInner {
    padding-block: 3.75rem;
  }

  .footerName {
    margin-block-end: 1.5rem;
  }

  .footerContact .button a {
    width: 360px;
  }

  .telBoxArea {
    justify-content: center;
    flex-direction: row;
    gap: 3.75rem;
    margin-block-end: 1.5rem;
  }

  .footerBanner {
    margin-block-start: 3.75rem;
  }

  .footerBottom {
    padding-block: 2.5rem;
  }

  .footerBottomInner {
    display: flex;
    justify-content: space-between;
  }

  .footerNavi {
    margin-block-end: 0;
  }

  .footerNavi ul {
    align-items: flex-start;
    flex-direction: row;
    gap: 2.5em;
  }

  .copyright {
    text-align: right;
  }
}

@media (any-hover: hover) {

  .pageTop a:hover {
    transform: translateY(-3px);
  }

}


/*-----------
 block: 検索ボックス
-----------*/
.searchBox {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-inline: 1.25rem;
  padding-block: 1.25rem;
  background-color: var(--color-lt-gray);
  border-radius: 10px;
}

.searchBox form  {
  width: 100%;
}

.searchInputArea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6em;
  align-items: center;
  gap: 0.5em;
  width: 100%;
}

.searchInputArea button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding-inline: 0.75em;
  padding-block: 0.75em;
  color: var(--color-white);
  background-color: var(--color-black);
  border-radius: 5px;
}

.searchInputArea button::after {
  content: '';
  display: block;
  width: 1em;
  height: 1em;
  -webkit-mask-image: url("../images/icon-search.svg");
  mask-image: url("../images/icon-search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-white);
}

.searchBox fieldset {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.searchBox fieldset > legend {
  margin-block-end: 0.5em;
  font-weight: 700;
}

.searchInputButton {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-start: 2em;
}

.searchInputButton button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  padding-inline: 2em;
  padding-block: 1em;
  color: var(--color-white);
  font-size: clamp(0.875rem, 0.815rem + 0.25vw, 1rem);
  /* 14-16px */
  font-weight: 700;
  background-color: var(--color-black);
  border-radius: 3em;
  cursor: pointer;
}

.searchInputButton button::after {
  content: '';
  display: block;
  width: 1em;
  height: 1em;
  -webkit-mask-image: url("../images/icon-search.svg");
  mask-image: url("../images/icon-search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-white);
}

@media print,screen and (min-width: 1024px) {

  .searchBox {
    flex-direction: row;
    padding-inline: 3.125rem;
    padding-block: 3.75rem;
  }

  .searchBox form  {
    width: calc(100% - 8em - 1.25rem);
  }

  .searchBox fieldset {
    grid-template-columns: 8em minmax(0, 1fr);
    gap: 1em;
  }

  .searchBox fieldset > legend {
    position: absolute;
    top: 0;
    left: 0;
    grid-column: 1;
    grid-row: 1;
  }

  .searchBox fieldset .fieldsetGroup {
    grid-column: 2;    /* 2列目 */
    grid-row: 1;       /* 1行目（legend と同じ高さに開始） */
  }

}

@media (any-hover: hover) {

  .searchInputArea button:hover {
    background-color: var(--color-gray);
  }

  .searchInputButton button:hover {
    background-color: var(--color-gray);
  }
}


/*-----------
 block: 絞り込みボックス
-----------*/
.filterBox {
  padding-inline: 1.25rem;
  padding-block: 1.25rem;
  background-color: var(--color-lt-gray);
  border-radius: 10px;
}

.filterInner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-block: 1.5rem;
}

.filterInner:first-of-type {
  padding-block-start: 0;
}

.filterInner:last-of-type {
  padding-block-end: 0;
}

.filterInner:not(:last-of-type) {
  border-bottom: 2px dotted var(--color-m-gray);
}

.filterBox fieldset:last-of-type,
fieldset.nomalFieldset:last-of-type {
  padding-block-end: 0;
  border-bottom: none;
}

.filterLinkList {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25em 0.75em;
  padding-inline: 0;
  margin-block: 0;
  list-style: none;
}

.filterLinkList li {
  position: relative;
  margin-block-end: 0 !important;
}

.filterLinkList li.current a {
  color: var(--color-white);
  background-color: var(--color-black);
}

.filterLinkList li.current a::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  width: 12px;
  height: 12px;
  margin: auto;
  background-color: var(--color-black);
  transform: rotate(45deg);
  mask-image: none;
}

.filterLinkList a {
  display: block;
  padding-inline: 1em;
  padding-block: 0.875em;
  color: var(--color-gray);
  text-decoration: none;
  font-size: clamp(0.75rem, 0.63rem + 0.49vw, 1rem);
  /* 12-16px */
  letter-spacing: 0.03em;
  white-space: nowrap;
  background-color: var(--color-white);
  border: 2px solid var(--color-black);
  border-radius: 3em;
}

.filterBox .js-details {
  margin-block-start: 0;
}

@media print,screen and (min-width: 1024px) {

  .filterBox {
    padding-inline: 3.125rem;
    padding-block: 3.75rem;
  }

  .filterInner {
    flex-direction: row;
    padding-block: 2.5rem;
  }
  
  .filterLinkList {
    gap: 1.25em 2em;
  }

  .filterItem {
    width: calc(100% - 23% - 1.25rem);
  }

  .filterLinkList a {
    padding-inline: 2em;
  }

}

@media (any-hover: hover) {

  .filterLinkList a:hover {
    color: var(--color-white);
    background-color: var(--color-black);
  }

}


/*-----------
 block: 相談＆サポートエリア
-----------*/
.supportArea {
  width: 100%;
  background: var(--color-gradation-orange);
  padding-block: 1rem 0.5rem;
  border-radius: 20px;
}

.supportAreaInner {
  position: relative;
  top: -2rem;
}

.supportHeading .ja {
  margin-block-end: 0;
  text-align: center;
  font-size: clamp(1.5rem, 1.019rem + 1.98vw, 2.5rem);
  /* 24-40px */
}

.supportHeading .en {
  margin-block-end: 0;
  color: var(--color-orange);
  font-family: var(--en-font-family);
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
}

.supportHeading .subtext {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin-block-start: 1em;
  font-weight: 700;
}

.supportHeading .subtext::before,
.supportHeading .subtext::after {
  content: '';
  display: block;
  width: 1em;
  height: 2px;
  background-color: var(--color-black);
}

.supportHeadingImage {
  width: fit-content;
  height: 35px;
  margin-inline: auto;
  margin-block-end: 1em;
}

.supportHeadingImage img {
  width: auto;
  height: 100%;
}

.supportItem .bubbleHeading span::before,
.supportItem .bubbleHeading span::after {
  background-color: var(--color-orange);
}

.supportItem .cardImage {
  border: 1px solid var(--color-lt-gray-2);
}

.supportItem .shadowButton a:focus {
  color: var(--color-orange);
}

@media print,screen and (min-width: 1024px) {

  .supportArea {
    padding-block: 2rem;
    border-radius: 40px;
  }

  .supportAreaInner {
    top: -2.5rem;
  }

  .supportHeadingImage {
    height: 65px;
  }

}

/*-----------
 block: タブコンテンツ
-----------*/
.tabLinkList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  padding-inline: 0.5em;
  margin-block: 0;
  list-style: none;
  border-bottom: 2px solid var(--color-main);
}

.tabList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  padding-inline: 0.5em;
  margin-block: 0;
  list-style: none;
  border-bottom: 2px solid var(--color-main);
}

.tabLinkList li {
  margin-block-end: 0 !important;
}

.tabLinkList li a,
.tabList button {
  display: block;
  padding-inline: 1em;
  padding-block: 0.75em;
  text-align: center;
  text-decoration: none;
  font-size: clamp(0.813rem, 0.722rem + 0.37vw, 1rem);
  /* 13-16px */
  font-weight: 700;
  border-radius: 10px 10px 0 0;
  border-left: 2px solid var(--color-main);
  border-top: 2px solid var(--color-main);
  border-right: 2px solid var(--color-main);
  background-color: var(--color-white);
}

.tabLinkList li a:focus,
.tabList button:focus {
  padding-block: 1.25em;
  color: var(--color-white);
  background-color: var(--color-main);
}

.tabLinkList li.current a,
.tabList button.is-active {
  padding-block: 1.25em;
  color: var(--color-white);
  background-color: var(--color-main);
}

.tabContent,
.tabPanel {
  /* padding-inline: 0.5rem; */
  padding-inline: 1rem;
  padding-block: 2.5rem;
  border-bottom: 2px solid var(--color-main);
}

.tabPanel {
  display: none;
  background-color: var(--color-white);
}

.tabPanel.is-active {
  display: block;
}

.tabPanel > .groupMin:first-of-type {
  margin-block-start: 0;
}

.tabPanel > .groupMin:last-of-type {
  margin-block-end: 0;
}

@media print,screen and (min-width: 768px) {

  .tabLinkList {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding-inline: 1em;
  }

  .tabList {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    padding-inline: 1em;
  }
  
  .tabList.tabList2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tabList.tabList3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tabList.tabList4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}

@media print,screen and (min-width: 1024px) {

  .tabContent,
  .tabPanel {
    padding-inline: 2rem;
    padding-block: 3.75rem 5rem;
  }

}

@media (any-hover: hover) {

  .tabLinkList li a:hover,
  .tabList button:hover {
    padding-block: 1.25em;
    color: var(--color-white);
    background-color: var(--color-main) !important;
  }

}


/*-----------
 Block: newsList
-----------*/
.newsBoxSide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.newsBox .textLink {
  padding-inline-end: 0.5em;
  text-align: right;
}

.newsList {
  list-style: none;
  padding-inline: 0;
  margin-block: 0 2rem;
}

.newsList li {
  margin-block-end: 0 !important;
}

.newsList li:first-of-type a {
  padding-block-start: 0;
}

.newsList li a {
  display: block;
  position: relative;
  padding-inline: 0.5em calc(1rem + 2em);
  padding-block: 1.5em;
  color: var(--color-black);
  font-weight: 400;
  text-decoration: none;
  border-bottom: 2px dotted var(--color-m-gray);
}

.newsList li a::after {
  content: '';
  display: block;
  position: absolute;
  top: calc(50% - 0.5rem);
  right: 1em;
  width: 1rem;
  height: 1rem;
  -webkit-mask-image: url("../images/icon-arrow-right.svg");
  mask-image: url("../images/icon-arrow-right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-main);
  transition: var(--transition-default);
}

.newsSummary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5em;
}

.newsSummary .unread {
  display: inline-block;
  padding-inline: 0.5em;
  padding-block: 0.25em;
  margin-inline-end: 1em;
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
  background-color: var(--color-red);
  border-radius: 5px;
}

.newsSummary .newsTitle {
  display: block;
}

@media print,screen and (min-width: 1024px) {

  .newsBoxSide {
    grid-template-columns: 23% minmax(0, 1fr);
    gap: 1rem;
  }

  .newsSummary {
    grid-template-columns: 9em minmax(0, 1fr);
    gap: 1em;
  }

}

@media (any-hover: hover) {

  .newsList li a:hover::after {
    transform: translateX(3px);
  }

}

/*-----------
 Block: cardList
-----------*/
.cardList {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-block: 2rem;
}

[class^="boxBack"] .cardList,
.tabPanel .cardList {
  margin-block: 0;
}

.cardItem {
  position: relative;
  container-type: inline-size; 
}

.cardLink {
  display: block;
  text-decoration: none;
}

.cardImage {
  position: relative;
  margin-block-end: 1.25rem;
  border-radius: 10px;
  overflow: hidden;
}

.cardImage img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.cardTitle {
  font-size: clamp(1rem, 0.88rem + 0.49vw, 1.25rem);
  /* 16-20px */
  margin-block-end: 0.75rem;
}

.cardCategory {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75em;
  margin-block-end: 0.75rem;
}

.cardCategory span {
  display: block;
  padding: 0.25em 0.75em;
  color: var(--color-main);
  font-size: clamp(0.75rem, 0.727rem + 0.11vw, 0.813rem);
  /* 12-13px */
  font-weight: 700;
  background-color: var(--color-white);
  border: 1px solid var(--color-main);
  border-radius: 5px;
}

.cardCategory.sub span {
  color: var(--color-black);
  background-color: var(--color-lt-gray-2);
  border: 1px solid var(--color-lt-gray-2);
}

.cardDescription {
  margin-block-end: 0 !important;
  font-size: clamp(0.75rem, 0.69rem + 0.25vw, 0.875rem);
  /* 12-14px */
  font-weight: 400;
}

.cardSummary {
  margin-block-end: 1rem;
}

.cardSummary div {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr);
  gap: 0.5em;
  padding-block: 0.5em;
  border-bottom: 2px dotted var(--color-m-gray);
}

.cardSummary dt,
.cardSummary dd {
  padding-inline: 0;
  padding-block: 0;
  font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem);
  /* 12-14px */
}

.cardSummary dd {
  font-weight: 400;
}

.statusTag {
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding-inline: 0.75em;
  padding-block: 0.25em;
  color: var(--color-white);
  font-size: clamp(0.75rem, 0.69rem + 0.25vw, 0.875rem);
  font-weight: 700;
  text-transform: uppercase;
  background-color: var(--color-pink);
  border-radius: 10px 0 10px 0;
}

@media print,screen and (min-width: 768px) {

  .cardList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media print,screen and (min-width: 1024px) {

  .cardList {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    margin-block: 3.75rem;
  }

}

@media (any-hover: hover) {

  .cardLink:hover * {
    opacity: 1;
  }

  .cardLink:hover .cardImage img {
    transform: scale(1.1, 1.1);
  }

}


/*-----------
 Block: calendar
-----------*/
.calendar h3 {
  display: block !important;
  margin-block-end: 0.25em;
  text-align: center;
}

.calendar h3::before {
  display: none !important;
}

.calendar .prevnext {
  display: flex;
  justify-content: space-between;
}

.calendar .prevnext a {
  display: block;
  font-weight: 700;
}

.calendar a[rel="prev"]::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-inline-end: 0.5rem;
  vertical-align: middle;
  mask-image: url("../images/icon-circle-arrow-right.svg");
  mask-repeat: no-repeat;
  background-color: var(--color-main);
  transform: rotate(180deg);
}

.calendar a[rel="next"]::after {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-inline-start: 0.5rem;
  vertical-align: middle;
  mask-image: url("../images/icon-circle-arrow-right.svg");
  mask-repeat: no-repeat;
  background-color: var(--color-main);
}

.calendarTable {
  margin-block-start: 1.5rem;
}

.calendarTable thead {
  display: none;
}

.calendarTable tbody tr {
  display: block;
}

.calendarTable tbody th,
.calendarTable tbody td {
  display: block;
}

.calendarTable tbody td {
  border-bottom: none;
}

.calendarTable tbody tr:last-of-type td {
  border-bottom: 1px solid var(--color-gray);
}

.calendarTable .title ul li a {
  display: block;
  margin-block-end: 0.5em;
  font-weight: 700;
}

.calendarTable .title .cardCategory {
  margin-block-end: 0;
}

@media print,screen and (min-width: 768px) {

  .calendarTable thead {
    display: table-header-group;
  }

  .calendarTable tbody tr {
    display: table-row;
  }

  .calendarTable tbody th,
  .calendarTable tbody td {
    display: table-cell;
  }

  .calendarTable tbody td {
    border-bottom: 1px solid var(--color-gray);
  }

  .calendarTable .date {
    width: 16em;
  }
}

@media (any-hover: hover) {

  .calendar a[rel="prev"]:hover::before {
    transform: rotate(180deg) translateX(3px);
  }
  
  .calendar a[rel="next"]:hover::after {
    transform: translateX(3px);
  }

}


/*-----------
　component: グループ
-----------*/
.group {
  margin-block: 3.75rem;
  /* 60px */
}

.groupMin {
  margin-block: 2.5rem;
  /* 40px */
}

@media print,screen and (min-width: 1024px) {

  .group {
    margin-block: 6.25rem;
    /* 100px */
  }

  .groupMin {
    margin-block: 3.75rem;
    /* 60px */
  }

}


/*-----------
 component: ボックス
-----------*/
.boxBackGray,
.boxBackGreen,
.boxBackYellow,
.boxBackOrange,
.boxBackBlue {
  padding-inline: 1rem;
  padding-block: 1.25rem;
  border-radius: 10px;
}

.boxBackGray {
  background-color: var(--color-lt-gray);
}

.boxBackGreen {
  background-color: var(--color-main-gray);
}

.boxBackYellow {
  background-color: var(--color-yellow-lt);
}

.boxBackOrange {
  background-color: var(--color-orange-lt);
}

.boxBackBlue {
  background-color: var(--color-blue-lt);
}

.boxBackShadow {
  padding-inline: 1rem;
  padding-block: 1.25rem;
  background-color: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.boxBackGraOrenge {
  padding-inline: 1rem;
  padding-block: 1.25rem;
  background: var(--color-gradation-orange);
  border-radius: 10px;
}

.boxBorder {
  padding-inline: 1rem;
  padding-block: 1.25rem;
  border: 5px solid var(--color-main-gray);
  border-radius: 10px;
} 

.boxBackGray p:last-of-type,
.boxBackGreen p:last-of-type,
.boxBackYellow p:last-of-type,
.boxBackOrange p:last-of-type,
.boxBackBlue p:last-of-type,
.boxBackShadow p:last-of-type,
.boxBorder p:last-of-type {
  margin-block-end: 0;
}

.boxBackGray ul:last-of-type,
.boxBackGreen ul:last-of-type,
.boxBackYellow ul:last-of-type,
.boxBackOrange ul:last-of-type,
.boxBackBlue ul:last-of-type,
.boxBackShadow ul:last-of-type,
.boxBorder ul:last-of-type,
.boxBackGray ol:last-of-type,
.boxBackGreen ol:last-of-type,
.boxBackYellow ol:last-of-type,
.boxBackOrange ol:last-of-type,
.boxBackBlue ol:last-of-type,
.boxBackShadow ol:last-of-type,
.boxBorder ol:last-of-type {
  margin-block-end: 0;
}

@media print,screen and (min-width: 1024px) {

  .boxBackGray,
  .boxBackGreen,
  .boxBackYellow,
  .boxBackOrange,
  .boxBackBlue {
    padding-inline: 2rem;
    padding-block: 2rem;
  }

  .boxBackShadow,
  .boxBorder:not(.widePadding) {
    padding-inline: 2rem;
    padding-block: 2rem;
  }

  .boxBorder.widePadding {
    padding-inline: 3.125rem;
    padding-block: 3.125rem;
  }

  .boxBackGraOrenge {
    padding-inline: 3.125rem;
    padding-block: 3.75rem;
  }

  [class^="boxBack"].inlineWide {
    padding-inline: 3.75rem;
  }

}


/*-----------
 component: sideButtonBox
-----------*/
.sideButtonBox {
  width: fit-content;
  position: fixed;
  z-index: var(--z-index-side-button);
  top: 48svh;
  right: 0;
  opacity: 1;
  visibility: visible;
  transition: var(--transition-default);
}

.sideButtonBox.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.sideFavoriteButton {
  padding-inline: 0.75em;
  padding-block: 0.75em;
  text-align: center;
  font-size: clamp(0.625rem, 0.535rem + 0.37vw, 0.813rem);
  /* 10-13px */
  font-weight: 700;
  letter-spacing: 0;
  background-color: var(--color-white);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px 0 0 10px;
}

.sideFavoriteButton::after {
  content: '';
  display: block;
  width: 2em;
  height: 2em;
  margin-inline: auto;
  background: url("../images/icon-favorite-off.svg") no-repeat center center / contain;
  transition: var(--transition-default);
}

.sideFavoriteButton.is-active::after {
  background: url("../images/icon-favorite-on.svg") no-repeat center center / contain;
}

.sideReserveButton {
  display: block;
  padding-inline: 0.75em;
  padding-block: 0.75em;
  text-align: center;
  font-size: clamp(0.625rem, 0.535rem + 0.37vw, 0.813rem);
  /* 10-13px */
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0;
  background-color: var(--color-white);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px 0 0 10px;
}

.sideReserveButton::after {
  content: '';
  display: block;
  width: 2em;
  height: 2em;
  margin-inline: auto;
  -webkit-mask-image: url("../images/icon-memo.svg");
  mask-image: url("../images/icon-memo.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-main);
}

@media (any-hover: hover) {

  .sideFavoriteButton:hover {
    background-color: var(--color-lt-gray);
  }

  .sideReserveButton:hover {
    background-color: var(--color-lt-gray);
  }

}


/* -----------
 component: カラムレイアウト
-----------*/
/* カラム */
[class^=column] {
  margin-bottom: 1em;
}

[class^=column] a {
  display: block;
}

.column2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.column3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.column4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.column2pc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.column3pc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.column4pc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.flexcolumn2 {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.flexcolumn2pc {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}

.flexBetween {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  width: 100%;
}

.mainColumnBox {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.textImageColumnBox {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.textImageColumnBox img {
  border-radius: 10px;
}

.textImageColumnBox.center {
  align-items: center;
}

@media print,screen and (min-width: 768px) {

  /* カラム */
  .column2pc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .column3pc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .column4pc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .textImageBox {
    grid-template-columns: minmax(0, 1fr) 25%;
  }

  .mainColumnBox {
    grid-template-columns: 38% minmax(0, 1fr);
    gap: 30px;
  }

  .textImageColumnBox {
    grid-template-columns: 30% minmax(0, 1fr);
    gap: 40px;
  }
}

@media print,
screen and (min-width: 1024px) {

  /* カラム */
  .column2 {
    gap: 40px;
  }

  .column3 {
    gap: 40px;
  }

  .column4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .column2pc {
    gap: 40px;
  }

  .column3pc {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }

  .column4pc {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .flexcolumn2pc {
    flex-direction: row;
  }

  .textImageBox {
    gap: 60px;
  }

  .mainColumnBox {
    gap: 80px;
  }

  .textImageColumnBox {
    gap: 60px;
  }
}


/*-----------
 component: アコーディオン
-----------*/
/* アコーディオン */
.js-details {
  margin-block-start: 1.5em;
}

.detailsSummary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  text-align: center;
  font-weight: 700;
  padding-inline: 0.75em;
  padding-block: 0.75em;
  border-radius: 5px;
  border: 1px solid var(--color-black);
  background-color: var(--color-white);
  cursor: pointer;
}

.detailsSummary::after {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  margin-block-end: 0.5em;
  border-right: 2px solid var(--color-black);
  border-bottom: 2px solid var(--color-black);
  transform: rotate(45deg);
  transition: var(--transition-default);
}

.detailsSummary.is-active::after {
  margin-block-end: 0;
  transform: rotate(-135deg);
}

/* アコーディオン閉じるボタン */
.closeButton {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  width: fit-content;
  padding-block: 1em;
  padding-inline: 2em calc(1em + 1.5rem);
  margin-inline: auto;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  background-color: var(--color-white);
  border: 2px solid var(--color-black);
  border-radius: 5px;
}

.closeButton::after {
  content: '';
  display: block;
  width: 0.75em;
  height: 0.75em;
  margin-block-start: 0.5em;
  border-right: 2px solid var(--color-black);
  border-top: 2px solid var(--color-black);
  transform: rotate(-45deg);
  transition: var(--transition-default);
}

@media (any-hover: hover) {
 
  .closeButton:hover {
    color: var(--color-white);
  }

  .closeButton:hover::after {
    border-right: 2px solid var(--color-white);
    border-top: 2px solid var(--color-white);
  }
}


/* -----------
 component: telBox
-----------*/
/* 電話番号 */
.telBox {
  text-align: center;
}

.telBoxNumber {
  color: var(--color-main);
  font-family: var(--en-font-family);
  font-weight: 700;
  font-size: clamp(1.875rem, 1.574rem + 1.23vw, 2.5rem);
  /* 30-40px */
  line-height: 1.2em;
}

.telBoxNumber span {
  display: inline-block;
  margin-inline-end: 0.5em;
  font-size: 50%;
}


/* -----------
 component: timeBox
-----------*/
/* 時間 */
.timeBox {
  text-align: center;
}

.timeBoxNumber {
  margin-block-end: 0;
  color: var(--color-main);
  font-family: var(--en-font-family);
  font-weight: 700;
  font-size: clamp(1.875rem, 1.574rem + 1.23vw, 2.5rem);
  /* 30-40px */
  line-height: 1.2em;
}

.timeBoxNumber span {
  display: inline-block;
  /* margin-inline-end: 0.5em; */
  font-size: 50%;
}

.timeText {
  margin-block-end: 0;
  font-size: 0.875rem;
  /* 14px */
  font-weight: 700;
}


/* -----------
 component: timeBox
-----------*/
.map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.map iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}


/* -----------
 component: sns
-----------*/
.sns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  width: var(--contents-width);
  margin-block: 2rem 1.25rem;
}

.snsTitle {
  margin-block-end: 0;
  font-size: 0.75rem;
  font-weight: 700;
}

.snsList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding-inline-start: 0;
  margin-block: 0;
  list-style: none;
}

.snsList li {
  margin-block-end: 0 !important;
}

.snsList li a {
  display: flex;
  align-items: center;
  width: fit-content;
  height: 40px;
}

.snsList li a img {
  width: auto;
  height: 100%;
}

@media print,screen and (min-width: 1024px) {

  .sns {
    gap: 25px;
  }

  .snsList li a {
    height: 30px;
  }

}