@charset "UTF-8";
/*============================
基本スタイル設定
============================*/
/* ボタンサイズ
　　@include btnSize(s);
　　引数のs,m,lでサイズを選択 */
/* ユーザーアイコン（[class*="statusBorder_"]を付与したimgタグにinclude）
　　@include profIconSize(s);
　　引数のs,m,lでサイズを選択
  */
/* 会員区分アイコンのサイズ(.icon_statusにinclude)
　　@include statusIconSize(s);
　　引数のs,m,lでサイズを選択 */
/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
:where(::before),
:where(::after) {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
:where(p),
:where(table),
:where(blockquote),
:where(address),
:where(pre),
:where(iframe),
:where(form),
:where(figure),
:where(dl) {
  margin: 0;
}

/* Headings */
/* ============================================ */
:where(h1),
:where(h2),
:where(h3),
:where(h4),
:where(h5),
:where(h6) {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
:where(ul),
:where(ol),
:where(li) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
:where(dt) {
  font-weight: bold;
}

:where(dd) {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
:where(hr) {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
:where(pre) {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

:where(address) {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
:where(a) {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
:where(b),
:where(strong) {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
:where(code),
:where(kbd),
:where(samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
:where(small) {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
:where(sub),
:where(sup) {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

:where(sub) {
  bottom: -0.25em;
}

:where(sup) {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
:where(svg),
:where(img),
:where(embed),
:where(object),
:where(iframe) {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
:where(button),
:where(input),
:where(optgroup),
:where(select),
:where(textarea) {
  -webkit-appearance: none; /* 1 */
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
       appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
       appearance: radio;
}

/**
 * Correct cursors for clickable elements.
 */
:where(button),
:where([type=button]),
:where([type=reset]),
:where([type=submit]) {
  cursor: pointer;
}

:where(button):disabled,
:where([type=button]):disabled,
:where([type=reset]):disabled,
:where([type=submit]):disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */
:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */
:where(option) {
  padding: 0;
}

/**
 * Reset to invisible
 */
:where(fieldset) {
  margin: 0;
  padding: 0;
  min-width: 0;
}

:where(legend) {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
:where(progress) {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
:where(textarea) {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
:where(details) {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
:where(summary) {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
:where(table) {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

:where(caption) {
  text-align: left;
}

:where(td),
:where(th) {
  vertical-align: top;
  padding: 0;
}

:where(th) {
  text-align: left;
  font-weight: bold;
}

img {
  max-width: 100%;
  height: auto;
}

/*============================
css変数
============================*/
:root {
  --white: #fff;
  --black: #000;
  --black2: #333;
  --base01: #f4f4f4;
  --base02: #FFF1DA;
  --base03: #6e2617;
  --text01: #1E0909;
  --text02: #b5b5b5;
  --text03: #EA7611;
  --textBrown: #852F1E;
  --main01: #fb9235;
  --accent01: #fa6400;
  --accent02: #E93A00;
  --cv01: #58b71a;
  --btn: #656565;
  --line: #E3E3E3;
  --beige: #fff7eb;
  --gray: #A6A6A6;
  --yellow: #FFE098;
  --lightPink: #FFF4EB;
  --placeholder: #BABABA;
  --green: #0E8A00;
  --lightGreen: #EEFFE3;
  --cream: #FFE9C5;
  --z-header: 100;
  --z-drawer: calc(var(--z-header) + 1);
  --z-hamburger: calc(var(--z-header) + 2);
  --z-pageTopBtn: calc(var(--z-header) - 1);
  --padding-inline: 25px;
  --font-zenMaruGothic: "Zen Maru Gothic", sans-serif;
  --font-Quicksand: "Quicksand", sans-serif;
  --font-ZenKakuGothicNew: "Zen Kaku Gothic New", sans-serif;
  --font-Inter: "Inter", sans-serif;
  --headerHeight: 90px;
  --joinBtnHeight: 96px;
}

/*============================
スタイルの上書き
============================*/
body {
  font-family: var(--font-ZenKakuGothicNew);
  font-size: 16px;
  color: var(--text01);
  font-weight: 500;
  font-variant: normal;
  line-height: 1.7;
  letter-spacing: 0.02em;
  position: relative;
  text-align: left;
  word-break: break-all;
}

:where(em) {
  font-style: normal;
}

.btn:active,
input[type=submit]:active {
  opacity: 0.7;
  box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.3), 0px 0px 3px rgba(255, 255, 255, 0.7);
}

/*============================
サイト全体レイアウト
============================*/
body {
  display: grid;
  grid-template: "header" auto "contents" 1fr "footer" auto/100%;
  min-height: 100vh;
}

header {
  grid-area: header;
}

main {
  grid-area: contents;
}

footer {
  grid-area: footer;
}

/*============================
汎用スタイル
============================*/
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-padding-top: 68px;
}
/*============================
スクロール
============================*/
/* スクロールバー全体 */
::-webkit-scrollbar {
  width: 9px;
}

/* スクロールハンドル部分 */
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 1px;
}

/* スクロール背景部分 */
::-webkit-scrollbar-track {
  background-color: transparent;
}

/*============================
フォーム
============================*/
button.btn:disabled,
input.btn:disabled {
  cursor: no-drop !important;
}

/*============================
spモーダルの全画面表示（bootstrap上書き）
============================*/
/*============================
レスポンシブレイアウト
============================*/
/*============================
レイアウト
============================*/
#wrapper {
  height: 100%;
}

.inner {
  width: 100%;
  max-width: calc(1200px + var(--padding-inline) * 2);
  margin-inline: auto;
  padding-inline: var(--padding-inline);
}

@scope (.foster_guideline) {
  .inner {
    max-width: calc(840px + var(--padding-inline) * 2);
  }
}
.content_area {
  position: relative;
}
.content_area.foster_area {
  padding-block: 80px 120px;
}
.content_area.register_area {
  padding-block: 80px 80px;
}
.content_area.register_area_top {
  padding-block: 56px 120px;
}
.content_area.mypage_area_top {
  padding-block: 40px 48px;
}
.content_area.mypage_area {
  padding-block: 80px 80px;
}
.content_area.foster_recruitment_area {
  padding-block: 64px 120px;
}
.content_area.foster_detail_area {
  padding-block: 0 120px;
}
.content_area.foster_preview_area {
  padding-block: 117px 120px;
}
.content_area.foster_application_area {
  padding-block: 0;
}
.content_area.back-color {
  background: url("/assets/bg_content-c6d51b75.webp") no-repeat center center/cover;
}
.content_area.contact_area {
  padding-block: 64px 120px;
}

.content_body {
  position: relative;
}
.content_body.register_body {
  padding: 80px 20px;
  background-color: var(--white);
  border-radius: 24px;
}
.content_body.mypage_body_top {
  padding: 56px;
  background-color: var(--white);
  border-radius: 16px;
}
.content_body.foster_application_body {
  padding: 64px;
  background-color: var(--white);
  border-radius: 24px;
}

/*============================
ボタン
============================*/
/* タブキーでの選択で枠線を表示 */
button:focus,
.btn:focus {
  box-shadow: none;
}
button:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.btn {
  display: grid;
  grid-template-columns: 1fr 40px;
  align-items: center;
  gap: 15px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 118px;
  width: -moz-fit-content;
  width: fit-content;
  min-width: min(256px, 100%);
  min-height: 56px;
  padding-inline: 32px 9px;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0;
  font-family: var(--font-Inter);
  position: relative;
}
.btn::after {
  content: "";
  display: block;
  width: 40px;
  aspect-ratio: 1/1;
  -webkit-mask: url("/assets/icon_arrow_w-4609f5f5.svg") no-repeat center center/contain;
          mask: url("/assets/icon_arrow_w-4609f5f5.svg") no-repeat center center/contain;
  background-color: currentcolor;
  border: none;
}
.btn span {
  text-align: center;
}
.btn.primary {
  background: var(--cv01);
  color: var(--white);
  transition: background-color 0.2s;
}
.btn.accent {
  background: var(--accent01);
  color: var(--white);
  transition: background-color 0.2s;
}
.btn.reverse {
  background: var(--white);
  color: var(--cv01);
  border: 2px solid;
  grid-template-columns: 40px 1fr;
  padding-inline: 9px 32px;
  transition: background-color 0.2s;
}
.btn.reverse::after {
  content: none;
}
.btn.reverse::before {
  content: "";
  display: block;
  width: 40px;
  aspect-ratio: 1/1;
  -webkit-mask: url("/assets/icon_arrow_w-4609f5f5.svg") no-repeat center center/contain;
          mask: url("/assets/icon_arrow_w-4609f5f5.svg") no-repeat center center/contain;
  background-color: currentcolor;
  border: none;
  transform: scaleX(-1);
}
.btn.reverse.reverse_accent {
  color: var(--accent01);
}
.btn.secondary {
  background: var(--white);
  color: var(--cv01);
  transition: background-color 0.2s;
  border: 1px solid;
}
.btn.large {
  min-width: min(280px, 100%);
}
.btn.small {
  min-width: min(208px, 100%);
}
.btn.x_small {
  min-width: min(180px, 100%);
  min-height: 32px;
  font-size: 0.9375rem;
  font-weight: 500;
}
.btn.arrow_slant::after {
  transform: rotate(-45deg);
}
.btn.center {
  grid-template-columns: 1fr;
  padding-inline: 50px;
}
.btn.center::after {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
}
.btn.x_small.center {
  padding-inline: 30px;
}
.btn.x_small.center::after {
  width: 30px;
  right: 0;
}
.btn.center_reverse {
  grid-template-columns: 1fr;
  padding-inline: 50px;
}
.btn.center_reverse::before {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
}
.btn.narrow {
  padding-inline: 15px;
  min-width: min(310px, 100%);
  min-height: 40px;
  font-family: var(--font-ZenKakuGothicNew);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background-color 0.2s;
}
.btn.narrow::after {
  width: 10px;
  -webkit-mask: url("/assets/icon_arrow_single_w-5d268372.svg") no-repeat center center/contain;
          mask: url("/assets/icon_arrow_single_w-5d268372.svg") no-repeat center center/contain;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.btn.narrow.edit::before {
  content: "";
  display: block;
  width: 22px;
  aspect-ratio: 1/1;
  -webkit-mask: url("/assets/icon_pen-e68c5b40.svg") no-repeat center center/contain;
          mask: url("/assets/icon_pen-e68c5b40.svg") no-repeat center center/contain;
  background-color: currentcolor;
}
.btn.plus {
  min-height: 36px;
  padding-inline: 20px 6px;
  grid-template-columns: 1fr 24px;
  gap: 6px;
}
.btn.plus::after {
  width: 24px !important;
  -webkit-mask: url("/assets/icon_plus-a3a7f5c6.svg") no-repeat center center/contain;
          mask: url("/assets/icon_plus-a3a7f5c6.svg") no-repeat center center/contain;
  background-color: currentcolor;
}
.btn.arrow_none {
  grid-template-columns: 1fr;
  padding-inline: 32px;
}
.btn.arrow_none::after {
  content: none;
}
.btn.arrow_none.cv {
  padding-inline: 32px 4px;
}
.btn.arrow_custom::after {
  content: none;
}
.btn.arrow_none_reverse::before {
  content: none;
}
.btn:disabled, .btn.is_disabled {
  background: var(--text02);
  pointer-events: none;
}
.btn.pb {
  padding-block: 16px;
}

.join_btn {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  background: var(--cv01);
  border: 4px solid;
  border-radius: 16px;
  padding: 5px 28px;
  min-height: var(--joinBtnHeight);
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 10;
  transition: background-color 0.2s;
}
.join_btn::after {
  content: "";
  display: block;
  width: 28px;
  aspect-ratio: 28/28;
  background: url("/assets/icon_arrow_w_circle-27fac265.svg") no-repeat center center/contain;
}
.join_btn span {
  display: block;
  line-height: 1.6;
}
.join_btn span:first-child {
  font-size: 1rem;
}
.join_btn span:nth-child(2) {
  font-size: 1.375rem;
  font-family: var(--font-zenMaruGothic);
}

.btn_arr {
  width: 40px;
  height: 24px;
  flex-shrink: 0;
}

.btn_main_border {
  font-size: 0.875rem;
  font-weight: bold;
  display: grid;
  place-items: center;
  border: 1px solid;
  color: var(--main01);
  min-width: 209px;
  min-height: 32px;
  padding-inline: 20px;
  border-radius: 6px;
  transition: background-color 0.2s;
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}

/*============================
リンク
============================*/
.link_primary {
  font-size: 1rem;
  font-weight: 500;
  text-decoration: underline;
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}

.link_cv {
  font-size: 0.875rem;
  font-weight: bold;
  color: var(--cv01);
  text-decoration: underline;
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}

.link_main {
  font-size: 0.875rem;
  font-weight: bold;
  color: var(--main01);
  text-decoration: underline;
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}

.link_hover {
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}

.link_text {
  text-decoration: underline;
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}

/*============================
タイトル
============================*/
.sec_titleWrapper {
  display: grid;
  gap: 14px;
}

.sec_title {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
  color: var(--text01);
  font-family: var(--font-zenMaruGothic);
}

.sec_sub_title {
  font-family: var(--font-Quicksand);
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--main01);
}

/*============================
テキスト
============================*/
.txt_primary {
  font-size: 1rem;
}

.txt_large {
  font-size: 1.25rem;
}

.txt_small {
  font-size: 0.875rem;
}

.txt_bold {
  font-weight: bold;
}

.txt_center {
  text-align: center;
}

.txt_disabled,
a.txt_disabled {
  color: var(--text02);
}

.txt_accent,
a.txt_accent {
  color: var(--accent01);
}

.txt_error {
  display: none;
  color: var(--accent01);
  font-size: 1rem;
}
.txt_error.is_active {
  display: block;
}

/*============================
ヘッダー
============================*/
.header {
  position: relative;
  width: 100%;
}

.header_container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--headerHeight);
  z-index: 1000;
}

/*============================
右側ブロック（1段目+2段目）
============================*/
.header_right {
  background: var(--white);
  border-radius: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
}

/*============================
1段目：ユーティリティナビ
============================*/
.header_top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline: 24px 20px;
  gap: 16px;
  padding-bottom: 8px;
}

.header_topNav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header_topNav a {
  font-size: 0.875rem;
  color: var(--gray);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}

.header_topBtns {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header_topBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}
.header_topBtn.register {
  color: var(--cv01);
  border: 1px solid var(--cv01);
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}
.header_topBtn.login {
  background: var(--cv01);
  color: var(--white);
  border: 1px solid var(--cv01);
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}
.header_topBtn.mypage {
  background: var(--cv01);
  color: var(--white);
  border: 1px solid var(--cv01);
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}

/*============================
2段目：メインナビ
============================*/
.header_navbar {
  width: 100%;
  height: var(--headerHeight);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
}
.header_navbar .logo {
  display: grid;
  place-items: center;
  padding-inline: 24px 32px;
  background: var(--white);
  border-radius: 0 0 16px 0;
  flex-shrink: 0;
}
.header_navbar .logo a {
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}
.header_navbar .logo img {
  width: 220px;
  height: auto;
  display: block;
}

/*============================
ヘッダー内ナビゲーション
============================*/
.header_nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  gap: min(24px, 1.6666666667vw);
  padding-inline: 26px 20px;
  padding-bottom: 14px;
}

.header_navItems {
  display: flex;
  align-items: center;
  gap: min(36px, 2.5vw);
}

.header_navItem a {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}
.header_navItem a .icon_external {
  vertical-align: middle;
}

.header_btnItems {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header_btn {
  display: grid;
  grid-template-columns: 24px max-content;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 8px;
  min-width: 130px;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.02em;
  position: relative;
}
.header_btn.register {
  color: var(--cv01);
  border: 1px solid;
  transition: background-color 0.2s;
}
.header_btn.login, .header_btn.mypage {
  background-color: var(--cv01);
  border: 1px solid var(--cv01);
  color: var(--white);
  transition: background-color 0.2s, border 0.2s, opacity 0.2s;
  font-family: var(--font-zenMaruGothic);
}
.header_btn.join {
  background-color: var(--cv01);
  border: 1px solid var(--cv01);
  color: var(--white);
  transition: background-color 0.2s, border 0.2s, opacity 0.2s;
  grid-template-columns: max-content max-content;
  gap: 11px;
}
.header_btn.join::after {
  content: "";
  display: block;
  width: 28px;
  aspect-ratio: 28/28;
  background: url("/assets/icon_arrow_w_circle-27fac265.svg") no-repeat center center/contain;
}

/*============================
ハンバーガーボタン
============================*/
.header_hamburger {
  display: none;
  width: 32px;
  height: 20px;
  position: relative;
  z-index: var(--z-hamburger);
  margin: 0 20px;
}
.header_hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--btn);
  position: absolute;
  left: 0;
  border-radius: 10px;
  transition: transform 0.2s;
}
.header_hamburger span:nth-child(1 of span) {
  top: 50%;
  transform: translateY(-50%);
}
.header_hamburger span:nth-child(2 of span) {
  top: 0;
}
.header_hamburger span:nth-child(3 of span) {
  bottom: 0;
}
.header_hamburger[aria-expanded=true] span:nth-child(1 of span) {
  display: none;
}
.header_hamburger[aria-expanded=true] span:nth-child(2 of span) {
  top: 50%;
  transform: translateY(-50%) rotate(35deg);
}
.header_hamburger[aria-expanded=true] span:nth-child(3 of span) {
  top: 50%;
  transform: translateY(-50%) rotate(-35deg);
}

/*============================
ドロワーメニュー
============================*/
.drawer_menu {
  display: none;
}

.drawer_menuItems {
  display: grid;
}
.drawer_menuItems--sub .drawer_menuItem a {
  font-size: 0.875rem;
  color: var(--text02);
  padding: 14px 0;
}

.drawer_menuItems,
.drawer_btnItems {
  max-width: 400px;
  margin-inline: auto;
}

.drawer_menuItem a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 1rem;
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text01);
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}

.drawer_btnItems {
  margin-block-start: 40px;
  display: grid;
  gap: 8px;
}
.drawer_btnItems + .drawer_btnItems {
  margin-block-start: 24px;
  padding-block-start: 24px;
  border-top: 1px solid var(--text02);
}

/*============================
フッター
============================*/
.footer {
  width: 100%;
  background-color: var(--base03);
  position: relative;
  --footerWidth: 340px;
}
.footer::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("/assets/deco_wave_footer-b50afc4a.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.footer_container {
  padding-block-start: 64px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px 80px;
}

.footer_left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer_right {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer_logo {
  width: min(280px, 100%);
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}

/*============================
フッター内ナビゲーション
============================*/
.footer_btnItems {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer_btn {
  display: grid;
  grid-template-columns: 24px max-content;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  min-width: min(220px, 100%);
  min-height: 44px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--textBrown);
  background: var(--white);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
  border: 1px solid var(--white);
}
.footer_btn.login {
  font-family: var(--font-zenMaruGothic);
  font-weight: bold;
}
.footer_btn.logout {
  font-family: var(--font-zenMaruGothic);
  font-weight: bold;
  color: var(--white);
  background: transparent;
}
.footer_btn.mypage {
  font-family: var(--font-zenMaruGothic);
  font-weight: bold;
}

.footer_register {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: center;
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}

.footer_navItems {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px 32px;
}

.footer_navItem {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--white);
}
.footer_navItem a {
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}

.footer_navBottom {
  margin-block-start: 20px;
  padding-block-start: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: grid;
  gap: 8px;
}

.footer_navBottomItems {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer_navBottomItem {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}
.footer_navBottomItem a {
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}
.footer_navBottomItem a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.footer_navBottomItem a.link_external {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/*============================
コピーライト
============================*/
.copyright {
  display: block;
  width: 100%;
  color: var(--white);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-align: center;
  padding-block: 24px;
  margin-block-start: 96px;
  font-family: var(--font-zenMaruGothic);
}

/*============================
CVエリア
============================*/
.cvArea {
  background: var(--base02);
  padding-block: 64px 46px;
  container-type: inline-size;
  container-name: cvArea;
}
.cvArea .cvArea_items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@container cvArea (max-width: 1000px) {
  .cvArea .cvArea_items {
    grid-template-columns: repeat(1, 1fr);
    max-width: 600px;
    margin-inline: auto;
  }
}
.cvArea .cvArea_item {
  display: grid;
  grid-template-rows: subgrid;
  align-items: center;
  grid-row: span 2;
  gap: 26px;
  background: var(--white);
  padding-block: 32px 29px;
  border-radius: 16px;
}
.cvArea .cvArea_subText {
  font-size: 1.125rem;
  text-align: center;
  line-height: 1.6;
  font-family: var(--font-zenMaruGothic);
}
.cvArea .cvArea_text {
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.6;
  font-family: var(--font-zenMaruGothic);
}
.cvArea .cvArea_body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

/*============================
サブMV
============================*/
.subMv {
  background-color: var(--base02);
  background-image: url("/assets/subMv_back-2293f88e.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-block-start: 68px;
}
.subMv .subMv_inner {
  height: 100%;
}
.subMv .subMv_contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline-end: 280px;
  position: relative;
  min-height: 192px;
}
.subMv .subMv_title {
  font-size: 1.5rem;
  font-family: var(--font-zenMaruGothic);
  font-weight: bold;
  color: var(--text01);
}
.subMv .subMv_sub_title {
  font-size: 1rem;
  font-family: var(--font-zenMaruGothic);
  font-weight: bold;
  color: var(--text01);
}
.subMv .subMv_sub_title + .subMv_title {
  margin-block-start: 4px;
}
.subMv .subMv_img {
  width: 269px;
  position: absolute;
  right: 0;
  bottom: -20px;
  z-index: 5;
}

/*============================
パンくずリスト
============================*/
.breadcrumb_list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: calc(1200px + var(--padding-inline) * 2);
  padding-inline: var(--padding-inline);
  margin: 8px auto;
  font-weight: 400;
}

.breadcrumb_item {
  font-size: 0.75rem;
}
.breadcrumb_item a::after {
  content: "＞";
  color: currentColor;
  padding-inline: 0.8333333333em;
}

/*============================
メールアドレスコピー
============================*/
.mailCopy {
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  gap: 40px;
  font-size: 1.25rem;
  font-family: var(--font-Quicksand);
  font-weight: bold;
  background-color: var(--white);
  border: 1px solid var(--text02);
  padding: 24px 48px;
  border-radius: 16px;
  cursor: pointer;
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}
.mailCopy img {
  width: 100%;
}

/*============================
フラッシュメッセージ
============================*/
.flashMsg {
  display: none;
  opacity: 0;
  width: -moz-max-content;
  width: max-content;
  min-width: -moz-max-content;
  min-width: max-content;
  max-width: 90vw;
  min-height: 64px;
  border-radius: 8px;
  border: 4px solid;
  position: fixed;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  transition: opacity 0.2s;
  box-shadow: 0 1px 6px 1px color-mix(in srgb, #7D4D00 15%, transparent);
}
.flashMsg.is_active {
  display: grid;
  animation: fadeInUpFlashMsg 0.5s ease-in-out forwards;
}
@keyframes fadeInUpFlashMsg {
  from {
    transform: translate(-50%, 30px);
  }
  to {
    transform: translate(-50%, 0);
  }
}
.flashMsg.success {
  --mainColor: var(--cv01);
  background-color: #f7ffeb;
  border-color: var(--mainColor);
}
.flashMsg.error {
  --mainColor: var(--accent01);
  background-color: #ffebeb;
  border-color: var(--mainColor);
}
.flashMsg .flashMsg_inner {
  display: grid;
  grid-template-columns: 68px 1fr;
  max-width: inherit;
}
.flashMsg .flashMsg_icon {
  background-color: var(--mainColor);
  height: 100%;
  display: grid;
  place-items: center;
}
.flashMsg .flashMsg_icon img {
  width: 28px;
}
.flashMsg .flashMsg_text {
  padding-inline: 28px 48px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
}

/*============================
ページトップボタン
============================*/
.pageTopBtn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 46px;
  aspect-ratio: 1/1;
  z-index: var(--z-pageTopBtn);
  border: 2px solid var(--main01);
  border-radius: 50%;
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  color: var(--main01);
  font-size: 14px;
  color: var(--main01);
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  transition: opacity 0.2s, visibility 0.2s, background-color 0.2s, color 0.2s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.pageTopBtn::before {
  content: "";
  display: block;
  width: 10px;
  aspect-ratio: 10/10;
  -webkit-mask: url("/assets/icon_arrow_or-bd295b89.svg") no-repeat center center/contain;
          mask: url("/assets/icon_arrow_or-bd295b89.svg") no-repeat center center/contain;
  background-color: currentColor;
  transition: background-color 0.2s;
}
.pageTopBtn.is_show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body:has(.join_btn) .pageTopBtn {
  bottom: calc(var(--joinBtnHeight) + 28px + 16px);
}

/*============================
モーダル
============================*/
body:has(dialog[open]) {
  overflow: hidden;
}

dialog[open] {
  animation-name: modalFadeIn;
  animation-fill-mode: forwards;
  animation-duration: 200ms;
  animation-timing-function: ease-out;
}

dialog:not([open]) {
  animation-name: modalFadeOut;
  animation-fill-mode: forwards;
  animation-duration: 200ms;
  animation-timing-function: ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modalFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.modal[open] {
  display: block;
}

.modal {
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
  transition: opacity 0.5s;
  overflow: initial;
}

.modal {
  background: var(--white);
  border-radius: 24px;
  width: min(1200px, 90vw);
  max-height: 80vh;
  margin: auto;
  padding: 0;
}
.modal .modal_container {
  height: inherit;
  block-size: 100%;
  position: relative;
  max-height: inherit;
  height: inherit;
  overflow: hidden;
  border-radius: inherit;
}
.modal .modal_inner {
  padding: 64px 16px;
  height: inherit;
  max-height: inherit;
  overflow: scroll;
  overscroll-behavior: contain;
  border-radius: inherit;
}
.modal .modal_contents {
  width: min(760px, 100%);
  margin-inline: auto;
}
.modal .modal_head.line_bottom {
  border-bottom: 3px dashed var(--main01);
  padding-block-end: 20px;
}
.modal .modal_head {
  display: grid;
  gap: 40px;
}
.modal .modal_head_img {
  width: 96px;
  margin-inline: auto;
}
.modal .modal_title {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}
.modal .modal_body {
  margin-block-start: 74px;
}
.modal .modal_body.sub {
  margin-block-start: 40px;
}
.modal .modal_text {
  font-size: 1rem;
  text-align: center;
}
.modal .modal_text a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity: 1;
}
.modal .modal_text a img {
  width: 14px;
}
.modal .modal_message {
  margin-block-start: 56px;
}
.modal .modal_message_text {
  font-size: 1rem;
  text-align: left;
}
.modal .modal_dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 18px;
}
.modal .modal_dl .modal_row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  gap: 57px;
}
.modal .modal_dl .modal_dt {
  font-size: 1.125rem;
  text-align: left;
}
.modal .modal_dl .modal_dd {
  font-size: 1rem;
  font-weight: bold;
  font-family: var(--font-inter);
  text-align: left;
}
.modal .modal_detail {
  margin-block-start: 48px;
  padding: 48px;
  display: grid;
  gap: 46px;
  border-radius: 16px;
  border: 1px solid var(--text02);
}
.modal .modal_detail .modal_detail_item {
  display: grid;
  gap: 13px;
}
.modal .modal_detail .modal_detail_title,
.modal .modal_detail .modal_detail_text {
  font-size: 1rem;
  text-align: left;
}
.modal .modal_checkbox {
  margin-block-start: 56px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.modal .modal_checkbox.center {
  justify-content: center;
}
.modal .modal_checkbox input[type=checkbox] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 22px;
  aspect-ratio: 22/22;
  border: 1px solid var(--text02);
  border-radius: 2px;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
}
.modal .modal_checkbox input[type=checkbox]:checked {
  background-color: var(--main01);
  border-color: var(--main01);
}
.modal .modal_checkbox input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
}
.modal .modal_checkbox input[type=checkbox] + label {
  font-size: 1rem;
  line-height: 1.3;
}
.modal .modal_footer {
  margin-block-start: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px 36px;
}
.modal .modal_close {
  width: 35px;
  aspect-ratio: 27/25;
  color: var(--white);
  position: absolute;
  top: -45px;
  right: 0;
}
.modal .modal_close::before, .modal .modal_close::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  position: absolute;
  top: 50%;
  left: 50%;
}
.modal .modal_close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal .modal_close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
@media (width > 768px){
  .sp_only {
    display: none !important;
  }
}
@media (width <= 1066px){
  .header_right {
    display: none;
  }
  .header_top {
    display: none;
  }
  .header_navbar {
    height: var(--headerHeight);
    align-items: center;
    background: var(--white);
    gap: 0;
  }
  .header_navbar .logo {
    padding-inline: 14px;
    border-radius: 0;
  }
  .header_navbar .logo img {
    max-width: 140px;
  }
  .header_nav {
    width: 56px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  .header_navItems {
    display: none;
  }
  .header_btnItems {
    display: none;
  }
  .header_btn {
    width: 100%;
    height: 44px;
  }
  .header_hamburger {
    display: block;
  }
  .drawer_menu {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    overflow-y: scroll;
    z-index: var(--drawer);
    background: var(--white);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0.2s, clip-path 0.2s;
    padding: 80px 53px;
  }
  .drawer_menu[aria-hidden=false] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  body:has(.drawer_menu[aria-hidden=false]) {
    overflow: hidden;
  }
}
@media (width <= 768px){
  :root {
    --padding-inline: 20px;
    --headerHeight: 52px;
  }
  html {
    scroll-padding-top: 56px;
  }
  .modal.full_screen {
    /* Hide scrollbar for Chrome, Safari and Opera */
  }
  .modal.full_screen::-webkit-scrollbar {
    display: none;
  }
  .modal.full_screen {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    overflow: auto;
    background-color: #fff;
  }
  .modal.full_screen .modal-dialog {
    margin: 0;
    max-width: none;
  }
  .modal.full_screen .modal-content {
    width: 100vw;
    min-height: 100svh;
    border: none;
  }
  .modal.full_screen .modal-header {
    border-radius: 0;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 600;
  }
  .modal.full_screen .modal-header .close {
    opacity: 1;
  }
  .modal.full_screen .modal-footer {
    position: fixed;
    width: 100%;
    bottom: 0;
  }
  .pc_only {
    display: none !important;
  }
  .content_area.foster_area {
    padding-block: 40px 64px;
  }
  .content_area.register_area {
    padding-block: 49px 70px;
  }
  .content_area.register_area_top {
    padding-block: 49px 70px;
  }
  .content_area.mypage_area_top {
    padding-block: 40px 64px;
  }
  .content_area.mypage_area {
    padding-block: 40px 64px;
  }
  .content_area.foster_recruitment_area {
    padding-block: 40px 64px;
  }
  .content_area.foster_detail_area {
    padding-block: 0 64px;
  }
  .content_area.foster_preview_area {
    padding-block: 60px 64px;
  }
  .content_area.foster_application_area {
    padding-block: 0;
  }
  .content_area.contact_area {
    padding-block: 40px 64px;
  }
  .content_body.register_body {
    padding: 48px 16px;
  }
  .content_body.mypage_body_top {
    padding: 32px 20px;
  }
  .content_body.foster_application_body {
    padding: 32px 20px;
  }
  .btn.narrow {
    min-width: min(295px, 100%);
    min-height: 44px;
  }
  .join_btn {
    display: none;
  }
  .sec_title {
    font-size: 1.5rem;
  }
  .sec_title.small {
    font-size: 1.25rem;
  }
  .sec_sub_title {
    font-size: 0.75rem;
  }
  .footer::before {
    content: none;
  }
  .footer_container {
    padding-block-start: 48px;
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .footer_left {
    align-items: center;
  }
  .footer_logo {
    margin-inline: auto;
  }
  .footer_btnItems {
    flex-direction: column;
  }
  .footer_btn {
    width: 220px;
    min-width: initial;
    height: 44px;
  }
  .footer_navTop {
    margin-block-start: 0;
  }
  .footer_navItems {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 32px;
  }
  .footer_navBottom {
    gap: 16px;
    margin-block-start: 32px;
    padding-block-start: 32px;
  }
  .footer_navBottomItems {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .copyright {
    margin-block-start: 56px;
    padding-block: 24px 90px;
  }
  .cvArea {
    padding-block: 40px;
  }
  .cvArea .cvArea_item {
    padding-block: 32px 17px;
    gap: 24px;
    min-height: 266px;
    grid-template-rows: initial;
  }
  .subMv {
    padding-block-start: 56px;
  }
  .subMv .subMv_contents {
    min-height: 174px;
    padding-block-end: 80px;
    padding-inline-end: initial;
    align-items: flex-end;
  }
  .subMv .subMv_img {
    width: 128px;
    right: -20px;
    bottom: -13px;
  }
  .breadcrumb_list {
    margin: 16px auto 8px;
  }
  .mailCopy {
    grid-template-columns: 1fr 16px;
    font-size: 1rem;
    padding: 16px 16px;
    gap: 10px;
  }
  .flashMsg {
    top: 80px;
  }
  .flashMsg .flashMsg_text {
    padding-inline: 18px 20px;
    font-size: 1rem;
  }
  .pageTopBtn {
    bottom: 28px;
    right: 20px;
  }
  body:has(.join_btn) .pageTopBtn {
    bottom: 28px;
    right: 20px;
  }
  .modal {
    max-height: 70vh;
  }
  .modal .modal_head {
    gap: 24px;
  }
  .modal .modal_title {
    font-size: 1.25rem;
    text-align: left;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  .modal .modal_body {
    margin-block-start: 48px;
  }
  .modal .modal_body.sub {
    margin-block-start: 32px;
  }
  .modal .modal_text {
    text-align: left;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  .modal .modal_dl {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .modal .modal_dl .modal_row {
    grid-template-columns: 1fr;
    grid-column: initial;
    gap: 13px;
  }
  .modal .modal_detail {
    padding: 20px;
    gap: 20px;
  }
  .modal .modal_detail .modal_detail_item {
    gap: 10px;
  }
  .modal .modal_footer {
    flex-direction: column-reverse;
  }
}
@media (any-hover: hover){
  .btn.primary:hover {
    background-color: var(--green);
  }
  .btn.accent:hover {
    background-color: var(--accent02);
  }
  .btn.reverse:hover {
    background-color: var(--lightGreen);
  }
  .btn.reverse.reverse_accent:hover {
    background-color: var(--base02);
  }
  .btn.secondary:hover {
    background-color: var(--lightGreen);
  }
  .join_btn:hover {
    background-color: var(--green);
    opacity: 1;
  }
  .btn_main_border:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .link_primary:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .link_cv:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .link_main:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .link_hover:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .link_text:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .header_topNav a:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .header_topBtn.register:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .header_topBtn.login:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .header_topBtn.mypage:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .header_navbar .logo a:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .header_navItem a:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .header_btn.register:hover {
    background-color: var(--lightGreen);
    opacity: 1;
  }
  .header_btn.login:hover, .header_btn.mypage:hover {
    background-color: var(--green);
    border: 1px solid var(--green);
  }
  .header_btn.join:hover {
    background-color: var(--green);
    border: 1px solid var(--green);
  }
  .drawer_menuItem a:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .footer_logo:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .footer_btn:not(.logout):hover {
    background-color: var(--base02);
    border-color: var(--base02);
  }
  .footer_btn.logout:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 1;
  }
  .footer_register:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .footer_navItem a:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .footer_navBottomItem a:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .mailCopy:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
  .pageTopBtn:hover {
    background-color: var(--main01);
    color: var(--white);
  }
  .modal .modal_text a:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
}
@media (any-hover: hover) and (any-hover: hover){
  .footer_btn.logout:hover:hover {
    transition-property: opacity;
    transition-duration: 0.2s;
    opacity: 0.7;
    cursor: pointer;
  }
}
@media (prefers-reduced-motion: reduce){
  html {
    scroll-behavior: auto;
    -webkit-overflow-scrolling: auto;
  }
}