@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/* :rootのCSS変数の宣言 */
:root {
  --primary_00: #FA863E;
  --primary_01: #FFF5EC;
  --primary_02: #F9DDC6;
  --primary_03: #9B8A81;
  --primary_04: #483C34;
  --primary_05: #FBF3D5;
  --mono_00: #000000;
  --mono_01: #ffffff;
  --mono_02: #666666;
  --mono_03: #eeeeee;
  --mono_04: #f6f6f6;
  --moji_01: #483C34;
  --moji_02: #FA863E;
  --clr_hisu: #e32221;
  --tbl_bdr: #F9DDC6;
  --tbl_bg: #172449;
  --grad_01: #5dbffe;
  --grad_02: #236487;
  --grad_03: #e3c672;
  --grad_04: #c58f25;
}

/* ---------------------------------------------------------------------------------------------------------

 base

--------------------------------------------------------------------------------------------------------- */
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Meiryo", "メイリオ", "Osaka", "MS PGothic", "helvetica", "arial", sans-serif;
  line-height: 1.8;
  font-size: 1.6rem;
  color: var(--primary_04);
  background: var(--mono_01);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

@media screen and (min-width: 320px) and (max-width: 480px) {
  html {
    font-size: 2.5vw;
  }
}
@media print, screen and (min-width: 768px) {
  html {
    font-size: 62.5%;
  }
}
/* ---------------------------------------------------------------------------------------------------------

 layout

--------------------------------------------------------------------------------------------------------- */
.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.wrapper footer {
  margin-top: auto;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media print, screen and (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media print, screen and (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media print, screen and (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.container-full {
  margin: 0 calc(50% - 50vw);
}

.container-wide {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.w_container {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
@media print, screen and (min-width: 1200px) {
  .w_container {
    padding-left: 0;
    padding-right: 0;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

.d_flex {
  display: flex;
  flex-wrap: wrap;
}

.jc_sb {
  justify-content: space-between;
}

.jc_c {
  justify-content: center;
}

.ai_c {
  align-items: center;
}

.ai_b {
  align-items: flex-end;
}

.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

@media print, screen and (min-width: 768px) {
  .hidden-md {
    display: none !important;
  }

  .visible-md {
    display: block !important;
  }
}
@media print, screen and (min-width: 992px) {
  .hidden-lg {
    display: none !important;
  }

  .visible-lg {
    display: block !important;
  }
}
@media print, screen and (min-width: 1200px) {
  .hidden-xl {
    display: none !important;
  }

  .visible-xl {
    display: block !important;
  }
}
/* indent 二行目以降を1字下げる*/
.att {
  padding-left: 1em;
  text-indent: -1em;
}

/* カウンタ */
ol.counter {
  counter-reset: item;
  list-style-type: none;
  padding-left: 0;
}

ol.counter li {
  text-indent: -1.3em;
  padding-left: 1.3em;
}

ol.counter li:before {
  counter-increment: item;
  content: counter(item) ".";
  padding-right: .5em;
}

ul.list-disc {
  list-style: none;
}

ul.list-disc li {
  position: relative;
  padding-left: 1em;
  line-height: 1.4;
  margin-bottom: .8em;
}

ul.list-disc li:last-child {
  margin-bottom: 0;
}

ul.list-disc li::after {
  display: block;
  content: '';
  position: absolute;
  top: .5em;
  left: 0em;
  width: 6px;
  height: 6px;
  background-color: var(--primary_00);
  border-radius: 100%;
}

/* ---------------------------------------------------------------------------------------------------------

 font size

--------------------------------------------------------------------------------------------------------- */
.align-l {
  text-align: left;
}

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

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

.f-bold {
  font-weight: bold;
}

.fz12 {
  font-size: clamp(1rem, 1vw, 1.2rem);
}

.fz14 {
  font-size: clamp(1.2rem, 1.4vw, 1.4rem);
}

.fz16 {
  font-size: clamp(1.4rem, 1.8vw, 1.6rem);
}

.fz17 {
  font-size: clamp(1.5rem, 1.8vw, 1.7rem);
}

.fz18 {
  font-size: clamp(1.5rem, 2vw, 1.8rem);
}

.fz20 {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
}

.fz22 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
}

.fz24 {
  font-size: clamp(1.8rem, 4.5vw, 2.4rem);
}

.fz26 {
  font-size: clamp(2rem, 2.6vw, 2.6rem);
}

.fz28 {
  font-size: clamp(2rem, 2.6vw, 2.8rem);
}

.fz30 {
  font-size: clamp(2rem, 2.6vw, 3rem);
}

.fz36 {
  font-size: clamp(2.4rem, 3vw, 3.6rem);
}

.fz60 {
  font-size: clamp(3rem, 5vw, 6rem);
}

.fz110 {
  font-size: clamp(5rem, 8vw, 11rem);
}

/* ---------------------------------------------------------------------------------------------------------

 margin

--------------------------------------------------------------------------------------------------------- */
.mt1 {
  margin-top: 1em;
}

.mt2 {
  margin-top: 2em;
}

.mt3 {
  margin-top: 3em;
}

.mb1 {
  margin-bottom: 1em;
}

.mb2 {
  margin-bottom: 2em;
}

.mb3 {
  margin-bottom: 3em;
}

@media print, screen and (min-width: 768px) {
  .mt0-md {
    margin-top: 0;
  }

  .mb0-md {
    margin-bottom: 0;
  }
}
@media print, screen and (min-width: 992px) {
  .mt0-lg {
    margin-top: 0;
  }

  .mb0-lg {
    margin-bottom: 0;
  }
}
@media print, screen and (min-width: 1200px) {
  .mt0-xl {
    margin-top: 0;
  }

  .mb0-xl {
    margin-bottom: 0;
  }
}
.box_ptb {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media print, screen and (min-width: 992px) {
  .box_ptb {
    padding-top: 180px;
    padding-bottom: 180px;
  }
}

.box_pt {
  padding-top: 80px;
}
@media print, screen and (min-width: 992px) {
  .box_pt {
    padding-top: 180px;
  }
}

.box_pb {
  padding-bottom: 80px;
}
@media print, screen and (min-width: 992px) {
  .box_pb {
    padding-bottom: 180px;
  }
}

/* ---------------------------------------------------------------------------------------------------------

 table

--------------------------------------------------------------------------------------------------------- */
[class^="tbl_base"] {
  width: 100%;
  border-top: solid 1px var(--tbl_bdr);
}
[class^="tbl_base"] tbody th,
[class^="tbl_base"] tbody td {
  padding: 2em 1em;
}
[class^="tbl_base"] tbody th {
  border-bottom: solid 1px var(--tbl_bdr);
  width: 25%;
  font-weight: 700;
  vertical-align: middle;
}
[class^="tbl_base"] tbody td {
  border-bottom: solid 1px var(--tbl_bdr);
}

@media screen and (max-width: 768px) {
  [class^="tbl_base"] tbody th {
    width: 36%;
  }
}
@media screen and (max-width: 768px) {
  .tbl_base_responsive {
    border-top: none;
    border-bottom: solid 1px var(--tbl_bdr);
  }
  .tbl_base_responsive tbody th,
  .tbl_base_responsive tbody td {
    display: block;
    width: 100%;
  }
  .tbl_base_responsive tbody th {
    border-top: solid 1px var(--tbl_bdr);
    padding-bottom: 0;
    border-bottom: none;
  }
  .tbl_base_responsive tbody td {
    padding-top: 1em;
  }
}
.tbl_bdr_none {
  width: 100%;
}
.tbl_bdr_none tbody th,
.tbl_bdr_none tbody td {
  padding: 2em 1em;
}
.tbl_bdr_none tbody th {
  width: 25%;
  font-weight: 700;
  vertical-align: middle;
}

@media screen and (max-width: 768px) {
  .tbl_bdr_none tbody th {
    width: 36%;
  }
}
@media screen and (max-width: 768px) {
  .tbl_bdr_none tbody th,
  .tbl_bdr_none tbody td {
    display: block;
    width: 100%;
  }
  .tbl_bdr_none tbody th {
    padding-bottom: 0;
  }
  .tbl_bdr_none tbody td {
    padding-top: 1em;
  }
}
/* ---------------------------------------------------------------------------------------------------------

 expansion

--------------------------------------------------------------------------------------------------------- */
strong {
  font-weight: 700;
}

/* 背景 */
.bg_w {
  background: var(--mono_01);
}

.bg_key {
  background: var(--primary_01);
}

.link_b {
  transition: all 0.5s ease 0s;
  color: var(--primary_04);
}
.link_b:hover {
  color: var(--moji_02);
}

/* ホバーで画像を拡大 */
.zoom_img {
  position: relative;
  overflow: hidden;
}
.zoom_img img {
  transition: transform .6s ease;
}
.zoom_img:hover img {
  transform: scale(1.1);
}

/*　マーカーペン　*/
.marker {
  background: linear-gradient(transparent 70%, var(--primary_00) 0%);
  display: inline;
  /*横に余白をつけたり、下にずらしたりするときは以下のpaddingを調整してください*/
}

/* ---------------------------------------------------------------------------------------------------------

 button

--------------------------------------------------------------------------------------------------------- */
.btn_base {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 24rem;
  min-height: 5rem;
  padding: 2rem 1.9rem 2rem 2.5rem;
  border-radius: 100px;
  background: var(--primary_00);
  background-position: 1% 50%;
  background-size: 200% auto;
  transition: all 0.3s ease-out;
}
.btn_base:hover {
  opacity: .7;
}
@media print, screen and (min-width: 992px) {
  .btn_base {
    width: 285px;
  }
}
.btn_base .btn_text {
  display: block;
  font-size: 1.6rem;
  color: var(--mono_01);
  font-weight: 700;
  margin-left: auto;
  margin-right: auto;
}

.btn_more {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  width: 19rem;
  height: auto;
}
.btn_more.align_c {
  left: 50%;
  margin-left: -9.5rem;
}
.btn_more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 5rem;
  height: 5rem;
  background: var(--primary_00);
  border-radius: 5rem;
}
.btn_more .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}
.btn_more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 2.125rem;
  height: 0.225rem;
  background: none;
}
.btn_more .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.75rem;
  right: 0.0625rem;
  width: 1.625rem;
  height: 1.625rem;
  border-top: 0.225rem solid #fff;
  border-right: 0.225rem solid #fff;
  transform: rotate(45deg);
}
.btn_more .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.8rem 0;
  margin-left: 4rem;
  color: var(--primary_04);
  font-weight: 700;
  line-height: 1.9;
  text-align: center;
  text-transform: uppercase;
}
.btn_more:hover .circle {
  width: 100%;
}
.btn_more:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}
.btn_more:hover .button-text {
  color: #fff;
}

/* ---------------------------------------------------------------------------------------------------------

 heading

--------------------------------------------------------------------------------------------------------- */
.page_title {
  display: none;
}
.page_title {
  height: 300px;
}
@media print, screen and (min-width: 992px) {
  .page_title {
  margin-left: 13.74vw;
  display: flex;
  align-items: center;
  margin-top: 1.25vw;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
    height: 500px;
/*    display: block;*/
  }
}
.page_title h2 {
  font-size: clamp(3rem, 5vw, 6rem);
  color: var(--primary_00);
  font-weight: 700;
  margin-left: 1em;
}
.page_title.business_pagettl {
  background-image: url("../images/business_page_ttl.jpg");
}
.page_title.company_pagettl {
  background-image: url("../images/company_page_ttl.jpg");
}
.page_title.recruit_pagettl {
  background-image: url("../images/recruit_page_ttl.jpg");
}
.page_title.contact_pagettl {
  background-image: url("../images/contact_page_ttl.jpg");
}

.heading01 {
  margin-bottom: 2em;
  line-height: 1.4;
}
.heading01 span {
  display: block;
  font-weight: 700;
}
.heading01 .jp {
  font-size: clamp(2.4rem, 3vw, 3.6rem);
}
.heading01 .en {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  color: var(--moji_02);
}

.sub_catch {
  font-size: clamp(2rem, 2.6vw, 3rem);
  font-weight: 700;
  color: var(--moji_02);
  margin-bottom: 1em;
}

.heading02 {
  font-weight: 700;
  font-size: clamp(2rem, 2.6vw, 3rem);
  color: var(--primary_04);
  position: relative;
  padding-top: 15px;
  margin-bottom: 1em;
}
.heading02::before, .heading02::after {
  content: '';
  background: var(--primary_00);
  position: absolute;
  left: 0;
  top: 0;
}
.heading02::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.heading02::after {
  width: 50px;
  height: 1px;
  top: 5px;
}

/* ---------------------------------------------------------------------------------------------------------

 breadcrumbs

--------------------------------------------------------------------------------------------------------- */
.breadcrumbs {
  display: flex;
  padding-top: 1em;
}
.breadcrumbs li {
  font-size: 1.4rem;
  color: var(--primary_03);
}
.breadcrumbs li a {
  transition: all 0.5s ease 0s;
  color: var(--primary_03);
}
.breadcrumbs li a:hover {
  color: var(--moji_02);
}
.breadcrumbs li:not(:last-child) {
  position: relative;
  margin-right: 5px;
}
.breadcrumbs li:not(:last-child)::after {
  content: '\f105';
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  padding-left: 5px;
}

/* ---------------------------------------------------------------------------------------------------------

 header

--------------------------------------------------------------------------------------------------------- */
.h_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  background: var(--primary_05);
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
}
@media print, screen and (min-width: 1200px) {
  .h_container {
    min-width: 1140px;
    height: 100px;
    padding-left: 40px;
    padding-right: 40px;
  }
}

.h_container h1 {
  display: flex;
  align-items: center;
}
.h_container h1 img {
  width: 200px;
}
@media print, screen and (min-width: 1200px) {
  .h_container h1 img {
    width: 324px;
  }
}

/* ---------------------------------------------------------------------------------------------------------

 gnav

--------------------------------------------------------------------------------------------------------- */
body.is-menuOpen {
  height: 100vh;
  overflow: hidden !important;
}

.hamburger {
  display: block;
}
@media print, screen and (min-width: 1200px) {
  .hamburger {
    display: none !important;
  }
}

.hamburger {
  width: 100%;
}

.hamburger .btn-gNav {
  position: fixed;
  top: 25px;
  right: 20px;
  width: 30px;
  height: 24px;
  z-index: 200;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

.hamburger .btn-gNav span {
  position: absolute;
  width: 100%;
  height: 4px;
  background: var(--primary_00);
  border-radius: 10px;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}
.hamburger .btn-gNav span:nth-of-type(1) {
  top: 0;
}
.hamburger .btn-gNav span:nth-of-type(2) {
  top: 10px;
}
.hamburger .btn-gNav span:nth-of-type(3) {
  top: 20px;
}

.hamburger .btn-gNav.open span {
  background: var(--primary_00);
}
.hamburger .btn-gNav.open span:nth-of-type(1) {
  top: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.hamburger .btn-gNav.open span:nth-of-type(2), .hamburger .btn-gNav.open span:nth-of-type(3) {
  top: 6px;
  background: var(--primary_00);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

.btn-gNav {
  display: block;
}
@media print, screen and (min-width: 1200px) {
  .btn-gNav {
    display: none !important;
  }
}

@media screen and (max-width: 1200px) {
  .gNav_wrap {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    box-sizing: border-box;
    z-index: 10;
    padding-top: 50px;
    padding-bottom: 50px;
    transition: .3s;
    overflow: scroll;
    z-index: 100;
  }

  .gNav_wrap.open {
    right: 0;
  }
}
.gNav_wrap .gNav .gnav_menu {
  text-align: center;
  line-height: 1.4;
}
.gNav_wrap .gNav .gnav_menu li {
  transition: .3s;
  margin-bottom: 4rem;
  font-weight: 700;
}
.gNav_wrap .gNav .gnav_menu a {
  transition: .3s;
  display: block;
  position: relative;
}
.gNav_wrap .gNav .gnav_menu a:hover {
  color: var(--moji_02);
}
.gNav_wrap .gNav .gnav_menu a:hover::before {
  content: '';
  background: var(--moji_02);
  width: 32px;
  height: 1px;
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
}
.gNav_wrap .gNav .gnav_menu a.current {
  color: var(--moji_02);
}
.gNav_wrap .gNav .gnav_menu a.current::before {
  content: '';
  background: var(--moji_02);
  width: 32px;
  height: 1px;
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
}

@media print, screen and (min-width: 1200px) {
  .gNav_wrap {
    margin-left: auto;
  }

  .gNav_wrap .gNav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column-reverse;
  }

  .gNav_wrap .gNav .gnav_menu {
    margin-top: 0.5em;
  }
  .gNav_wrap .gNav .gnav_menu li {
    display: inline-block;
    text-align: right;
    margin-right: 0;
    margin-bottom: 0;
    padding-left: 2em;
  }

  .gNav_wrap .gNav .gnav_other {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
.gNav_wrap .gNav .gnav_other {
  text-align: center;
}
@media print, screen and (min-width: 1200px) {
  .gNav_wrap .gNav .gnav_other {
    display: flex;
    justify-content: center;
  }
}
.gNav_wrap .gNav .gnav_other li {
  padding: 0 5px;
}
.gNav_wrap .gNav .gnav_other li:not(:last-child) {
  position: relative;
  margin-bottom: 1em;
}
@media print, screen and (min-width: 1200px) {
  .gNav_wrap .gNav .gnav_other li:not(:last-child) {
    margin-bottom: 0;
  }
}
.gNav_wrap .gNav .gnav_other .btn_base {
  width: 160px;
  min-width: inherit;
  min-height: inherit;
  padding: 1em;
  line-height: 1;
}
.gNav_wrap .gNav .gnav_other [data-action="call"] {
  color: var(--moji_02);
  font-size: 2rem;
  font-weight: 700;
  padding-left: 30px;
  position: relative;
}
.gNav_wrap .gNav .gnav_other [data-action="call"]::before {
  content: '';
  display: block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24px 24px"><path fill="%23FA863E" d="M20 15.5C18.8 15.5 17.5 15.3 16.4 14.9H16.1C15.8 14.9 15.6 15 15.4 15.2L13.2 17.4C10.4 15.9 8 13.6 6.6 10.8L8.8 8.6C9.1 8.3 9.2 7.9 9 7.6C8.7 6.5 8.5 5.2 8.5 4C8.5 3.5 8 3 7.5 3H4C3.5 3 3 3.5 3 4C3 13.4 10.6 21 20 21C20.5 21 21 20.5 21 20V16.5C21 16 20.5 15.5 20 15.5M5 5H6.5C6.6 5.9 6.8 6.8 7 7.6L5.8 8.8C5.4 7.6 5.1 6.3 5 5M19 19C17.7 18.9 16.4 18.6 15.2 18.2L16.4 17C17.2 17.2 18.1 17.4 19 17.4V19M15 12H17A5 5 0 0 0 12 7V9A3 3 0 0 1 15 12M19 12H21C21 7 16.97 3 12 3V5C15.86 5 19 8.13 19 12Z" /></svg>');
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media print, screen and (min-width: 1200px) {
  .gNav_wrap .gNav .gnav_lang {
    margin-left: 20px;
  }
}
/* ---------------------------------------------------------------------------------------------------------

 footer

--------------------------------------------------------------------------------------------------------- */
footer {
  background: var(--primary_05);
}
footer .container {
  padding-top: 42px;
  padding-bottom: 42px;
}
@media print, screen and (min-width: 992px) {
  footer .container {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
footer .container > .d_flex {
  justify-content: center;
}
@media print, screen and (min-width: 992px) {
  footer .container > .d_flex {
    justify-content: space-between;
  }
}
footer .f_main {
  text-align: center;
}
@media print, screen and (min-width: 992px) {
  footer .f_main {
    text-align: left;
  }
}
footer .f_main .address > div {
  margin-top: 1em;
}
footer .f_main .address [data-action="call"] {
  color: var(--moji_02);
  font-size: 2rem;
  font-weight: 700;
  padding-left: 30px;
  position: relative;
}
footer .f_main .address [data-action="call"]::before {
  content: '';
  display: block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24px 24px"><path fill="%23FA863E" d="M20 15.5C18.8 15.5 17.5 15.3 16.4 14.9H16.1C15.8 14.9 15.6 15 15.4 15.2L13.2 17.4C10.4 15.9 8 13.6 6.6 10.8L8.8 8.6C9.1 8.3 9.2 7.9 9 7.6C8.7 6.5 8.5 5.2 8.5 4C8.5 3.5 8 3 7.5 3H4C3.5 3 3 3.5 3 4C3 13.4 10.6 21 20 21C20.5 21 21 20.5 21 20V16.5C21 16 20.5 15.5 20 15.5M5 5H6.5C6.6 5.9 6.8 6.8 7 7.6L5.8 8.8C5.4 7.6 5.1 6.3 5 5M19 19C17.7 18.9 16.4 18.6 15.2 18.2L16.4 17C17.2 17.2 18.1 17.4 19 17.4V19M15 12H17A5 5 0 0 0 12 7V9A3 3 0 0 1 15 12M19 12H21C21 7 16.97 3 12 3V5C15.86 5 19 8.13 19 12Z" /></svg>');
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
footer .f_menu {
  display: none;
  flex: 1;
}
@media print, screen and (min-width: 992px) {
  footer .f_menu {
    display: block;
  }
}
footer .f_menu .f_sitemap {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  line-height: 1.4;
}
footer .f_menu .f_sitemap li:not(:last-child) {
  font-weight: 700;
  margin-left: 2em;
}
footer .f_menu .f_sitemap li:not(:last-child) a {
  transition: all 0.5s ease 0s;
}
footer .f_menu .f_sitemap li:not(:last-child) a:hover {
  color: var(--moji_02);
}
footer .f_menu .f_sitemap li:last-child {
  width: 100%;
  text-align: right;
  margin-top: 2em;
}

.copyright {
  text-align: center;
  padding: 1em 0;
  background: var(--primary_04);
}
.copyright small {
  color: var(--mono_01);
  font-size: 1.2rem;
}

#pagetop {
  position: fixed;
  right: 30px;
  bottom: 30px;
  visibility: hidden;
}
@media print, screen and (min-width: 1200px) {
  #pagetop {
    visibility: visible;
  }
}

/* ---------------------------------------------------------------------------------------------------------

 index

--------------------------------------------------------------------------------------------------------- */
/* visual
----------------------------------------------------------*/
.visual {
  position: relative;
  padding-top: 56px;
  padding-bottom: 56px;
}
@media print, screen and (min-width: 992px) {
  .visual {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
.visual::before, .visual::after {
  content: '';
  position: absolute;
  width: 60vw;
  height: 20vh;
}
.visual::before {
  background: var(--primary_02);
  top: 0;
  left: 0;
}
.visual::after {
  background: var(--primary_03);
  bottom: 0;
  right: 0;
}

.visual .catchcopy {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
  padding: 30px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 2px 2px 6px #0000004D;
}
@media print, screen and (min-width: 768px) {
  .visual .catchcopy {
    bottom: 30px;
  }
}
@media print, screen and (min-width: 992px) {
  .visual .catchcopy {
    padding: 50px;
    right: 4%;
    bottom: 100px;
    background: white;
  }
}
@media print, screen and (min-width: 1200px) {
  .visual .catchcopy {
    bottom: 180px;
  }
}
.visual .catchcopy h2 {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 700;
}
.visual .catchcopy h2 span {
  font-size: clamp(2rem, 2.6vw, 3rem);
  color: var(--moji_02);
}

.swiper {
  width: 95%;
  margin: 0 auto;
  background: #fff;
  height: 40vh;
}
@media print, screen and (min-width: 1200px) {
  .swiper {
    min-width: 1140px;
    max-width: 1800px;
    min-height: 800px;
    height: 80vh;
  }
}

.swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* index content
----------------------------------------------------------*/
.top_msg {
  overflow: hidden;
}
.top_msg .text_area {
  margin-top: 8rem;
  padding-bottom: 3em;
  position: relative;
}
.top_msg .text_area::before {
  content: '';
  background: var(--primary_01);
  width: calc(100% - 50px);
  max-width: 760px;
  height: calc(100% - 200px);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.top_msg .text_area .headline {
  position: relative;
}
.top_msg .text_area .headline h4 {
  position: relative;
  z-index: 2;
  font-size: clamp(2rem, 2.6vw, 3rem);
  color: #fff;
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
}
@media print, screen and (min-width: 768px) {
  .top_msg .text_area .headline h4 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-bottom: 0;
  }
}
.top_msg .text_area .headline h4 span {
  display: inline-block;
  background: var(--primary_00);
  padding: 0 26px;
  width: fit-content;
  line-height: 1.4;
}
@media print, screen and (min-width: 768px) {
  .top_msg .text_area .headline h4 span {
    margin: 10px 0;
  }
}
.top_msg .text_area .headline .img {
  width: 80%;
  margin-left: auto;
  position: relative;
}
.top_msg .text_area .headline .img::after {
  content: '';
  background: var(--primary_03);
  width: 260px;
  height: 260px;
  position: absolute;
  right: -40px;
  top: -40px;
  z-index: -1;
}
@media print, screen and (min-width: 768px) {
  .top_msg .text_area .headline .img {
    width: 67.9%;
  }
}
.top_msg .text_area p {
  position: relative;
  line-height: 2.4;
  margin-top: 42px;
}
@media print, screen and (min-width: 768px) {
  .top_msg .text_area p {
    margin-top: 60px;
  }
}

.top_business ul {
  width: 100%;
  display: grid;
  gap: 1px;
}
@media print, screen and (min-width: 768px) {
  .top_business ul {
    grid-template-columns: 53.4027777778vw auto;
    grid-template-rows: repeat(2, 1fr);
  }
}
.top_business ul li a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.top_business ul li:nth-of-type(1) {
  grid-row: 1;
  grid-column: 3;
}
@media print, screen and (min-width: 768px) {
  .top_business ul li:nth-of-type(1) {
    grid-row: 1/3;
    grid-column: 1;
  }
}
.top_business ul li:nth-of-type(2) {
  grid-row: 2;
  grid-column: 3;
}
@media print, screen and (min-width: 768px) {
  .top_business ul li:nth-of-type(2) {
    grid-row: 1;
    grid-column: 2;
  }
}
.top_business ul li:nth-of-type(3) {
  grid-row: 3;
  grid-column: 3;
}
@media print, screen and (min-width: 768px) {
  .top_business ul li:nth-of-type(3) {
    grid-row: 2;
    grid-column: 2;
  }
}
.top_business ul .headline {
  position: absolute;
  z-index: 10;
  top: 2em;
  left: 2em;
}
.top_business ul .headline h3 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  width: 19rem;
  height: auto;
}
.top_business ul .headline h3.align_c {
  left: 50%;
  margin-left: -9.5rem;
}
.top_business ul .headline h3 .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 5rem;
  height: 5rem;
  background: var(--primary_00);
  border-radius: 5rem;
}
.top_business ul .headline h3 .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}
.top_business ul .headline h3 .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 2.125rem;
  height: 0.025rem;
  background: none;
}
.top_business ul .headline h3 .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.75rem;
  right: 0.0625rem;
  width: 1.625rem;
  height: 1.625rem;
  border-top: 0.225rem solid #fff;
  border-right: 0.225rem solid #fff;
  transform: rotate(45deg);
}
.top_business ul .headline h3 .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.8rem 0;
  margin-left: 4rem;
  color: #fff;
  font-weight: 700;
  line-height: 1.9;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
}
.top_business ul a:hover .circle {
  width: 100%;
}
.top_business ul a:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}
.top_business ul a:hover .button-text {
  color: #fff;
}
.top_business ul .img {
  height: 100%;
}
.top_business ul .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top_business ul .img.pc {
  display: none;
}
@media print, screen and (min-width: 768px) {
  .top_business ul .img.pc {
    display: block;
  }
}
.top_business ul .img.sp {
  display: block;
}
@media print, screen and (min-width: 768px) {
  .top_business ul .img.sp {
    display: none;
  }
}

.top_recruit p {
  line-height: 2.4;
}
.top_recruit .text_area,
.top_recruit .photo_area {
  width: 100%;
}
.top_recruit .photo_area {
  text-align: center;
}
@media print, screen and (min-width: 992px) {
  .top_recruit .text_area {
    width: 60%;
  }
}
@media print, screen and (min-width: 992px) {
  .top_recruit .photo_area {
    width: 35%;
  }
}

.top_merit {
  position: relative;
}
.top_merit::before {
  content: '';
  background: var(--primary_01);
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
.top_merit h3 + p {
  text-align: center;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  color: var(--mono_01);
  line-height: 1.4;
}
.top_merit h3 + p span {
  background: var(--primary_00);
  display: inline-block;
  padding: 5px 0.5em;
}
.top_merit .container,
.top_merit .w_container {
  position: relative;
}
.top_merit .w_container ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 6rem;
  margin-top: 6rem;
}
.top_merit .w_container ul li {
  width: 100%;
  margin-bottom: 3rem;
}
@media print, screen and (min-width: 768px) {
  .top_merit .w_container ul li {
    width: 47%;
  }
}
@media print, screen and (min-width: 992px) {
  .top_merit .w_container ul li {
    width: 23%;
    max-width: 400px;
  }
  .top_merit .w_container ul li:nth-child(even) {
    margin-top: 50px;
  }
}
.top_merit .w_container ul p {
  margin-top: .8em;
}

/* ---------------------------------------------------------------------------------------------------------

 business

--------------------------------------------------------------------------------------------------------- */
.anhor_menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.anhor_menu li {
  width: 30%;
}
.anhor_menu li a {
  display: block;
  padding: 1em .5em;
  border-bottom: solid 1px var(--primary_03);
  font-weight: 700;
  transition: all 0.5s ease 0s;
  position: relative;
}
.anhor_menu li a::after {
  content: '';
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24px 24px"><path fill="%23FA863E" d="M11,6H13V14L16.5,10.5L17.92,11.92L12,17.84L6.08,11.92L7.5,10.5L11,14V6M12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20Z" /></svg>');
  width: 24px;
  height: 24px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.anhor_menu li a:hover {
  color: var(--primary_00);
}

.business_text_area {
  margin-top: 8rem;
  padding-bottom: 3em;
  position: relative;
}
.business_text_area::before {
  content: '';
  background: var(--primary_01);
  width: calc(100% - 50px);
  max-width: 760px;
  height: calc(100% - 200px);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.business_text_area .headline {
  position: relative;
}
.business_text_area .headline h4 {
  position: relative;
  z-index: 2;
  font-size: clamp(2rem, 2.6vw, 3rem);
  color: #fff;
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
}
@media print, screen and (min-width: 768px) {
  .business_text_area .headline h4 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-bottom: 0;
  }
}
.business_text_area .headline h4 span {
  display: inline-block;
  background: var(--primary_00);
  padding: 0 26px;
  width: fit-content;
  line-height: 1.4;
}
@media print, screen and (min-width: 768px) {
  .business_text_area .headline h4 span {
    margin: 10px 0;
  }
}
.business_text_area .headline .img {
  width: 80%;
  margin-left: auto;
  position: relative;
}
.business_text_area .headline .img::after {
  content: '';
  background: var(--primary_03);
  width: 260px;
  height: 260px;
  position: absolute;
  right: -15px;
  top: -40px;
  z-index: -1;
}
@media print, screen and (min-width: 768px) {
  .business_text_area .headline .img::after {
    right: -40px;
  }
}
@media print, screen and (min-width: 768px) {
  .business_text_area .headline .img {
    width: 67.9%;
  }
}
.business_text_area p {
  position: relative;
  line-height: 2.4;
  margin-top: 42px;
}
@media print, screen and (min-width: 768px) {
  .business_text_area p {
    margin-top: 60px;
  }
}

.business_item {
  width: 100%;
  margin-top: 3em;
}
@media print, screen and (min-width: 992px) {
  .business_item {
    width: 48%;
  }
}
.business_item .text_area p {
  margin-bottom: 1em;
}
.business_item .text_area h5 {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  color: var(--primary_00);
  margin-bottom: 0.5em;
  font-weight: 700;
}
.business_item .text_area ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.business_item .text_area ul li {
  width: 100%;
  background: var(--primary_05);
  border: solid 1px var(--primary_02);
  border-radius: 5px;
  padding: 1em;
  margin-bottom: 1em;
}
@media print, screen and (min-width: 1200px) {
  .business_item .text_area ul li {
    width: 48%;
  }
}
.business_item .text_area ul li.w100 {
  width: 100% !important;
}

/* ---------------------------------------------------------------------------------------------------------

 company

--------------------------------------------------------------------------------------------------------- */
.company_msg .text_area {
  padding-top: 3em;
  padding-bottom: 3em;
  position: relative;
}
.company_msg .text_area::before {
  content: '';
  background: var(--primary_01);
  width: calc(100% - 50px);
  max-width: 760px;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.company_msg .text_area p {
  font-size: clamp(1.5rem, 2vw, 1.8rem);
  line-height: 2.4;
  position: relative;
}
.company_msg .text_area p + p {
  margin-top: 2em;
}
.company_msg .text_area .ceo_name {
  text-align: right;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  line-height: 1.4;
}
.company_msg .text_area .ceo_name span {
  font-size: clamp(1.2rem, 1.4vw, 1.4rem);
  display: block;
}

.company_outline dl dt {
  font-weight: 700;
}
.company_outline dl dd {
  position: relative;
  padding-left: 14px;
}
.company_outline dl dd::before {
  content: '';
  background: var(--primary_00);
  border-radius: 10px;
  width: 5px;
  height: 5px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.company_access .text_area {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.company_access dl {
  width: 100%;
}
@media print, screen and (min-width: 992px) {
  .company_access dl {
    width: 32%;
  }
}
.company_access dl:not(:first-child) {
  margin-top: 2em;
}
@media print, screen and (min-width: 992px) {
  .company_access dl:not(:first-child) {
    margin-top: 0;
  }
}
.company_access dl dt {
  font-weight: 700;
  color: var(--moji_02);
}

.mission .photo {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
@media print, screen and (min-width: 992px) {
  .mission .photo {
    width: 70%;
    margin-left: -20%;
  }
}
.mission .text_area {
  width: 100%;
  margin-top: 3em;
}
@media print, screen and (min-width: 992px) {
  .mission .text_area {
    width: 50%;
    padding-left: 4em;
    margin-top: 0;
  }
}
.mission h4 + p {
  width: fit-content;
  background: var(--primary_00);
  padding: 0 .5em;
  color: #fff;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 700;
}
.mission p {
  margin-bottom: 1em;
}
.mission p span {
  display: inline-block;
  background: var(--primary_02);
}

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

.philosophy_item {
  margin-bottom: 5em;
  width: 100%;
  border: solid 1px var(--primary_03);
  padding: 2em;
}
@media print, screen and (min-width: 992px) {
  .philosophy_item {
    width: 48%;
  }
}
.philosophy_item h4 {
  color: var(--moji_02);
}
.philosophy_item h4 + p {
  font-weight: 700;
}
.philosophy_item ul {
  margin-top: 2em;
}
.philosophy_item ul li {
  border-bottom: dashed 1px var(--tbl_bdr);
  border-bottom: dashed 1px var(--primary_03);
  padding: 1em;
  padding-left: 2em;
  position: relative;
}
.philosophy_item ul li::before {
  content: '';
  background: var(--primary_00);
  width: 5px;
  height: 5px;
  border-radius: 5px;
  position: absolute;
  left: 1em;
  top: 1.75em;
}

/* ---------------------------------------------------------------------------------------------------------

 recruit

--------------------------------------------------------------------------------------------------------- */
.recruit_msg .photo_area {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
@media print, screen and (min-width: 992px) {
  .recruit_msg .photo_area {
    width: 70%;
    margin-left: -20%;
  }
}
.recruit_msg .text_area {
  width: 100%;
  margin-top: 3em;
}
@media print, screen and (min-width: 992px) {
  .recruit_msg .text_area {
    width: 50%;
    padding-left: 4em;
    margin-top: 0;
  }
}

.recruit_merit {
  position: relative;
}
.recruit_merit::before {
  content: '';
  background: var(--primary_01);
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
.recruit_merit .container,
.recruit_merit .w_container {
  position: relative;
}
.recruit_merit .w_container ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 6rem;
  margin-top: 6rem;
}
.recruit_merit .w_container ul li {
  width: 100%;
  margin-bottom: 3rem;
}
@media print, screen and (min-width: 768px) {
  .recruit_merit .w_container ul li {
    width: 47%;
  }
}
@media print, screen and (min-width: 992px) {
  .recruit_merit .w_container ul li {
    width: 23%;
    max-width: 400px;
  }
  .recruit_merit .w_container ul li:nth-child(even) {
    margin-top: 50px;
  }
}
.recruit_merit .w_container ul p {
  margin-top: .8em;
}

.recruit_flow ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
}
.recruit_flow ul li {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  border: solid 3px var(--primary_02);
  padding: 1em;
  position: relative;
}
@media print, screen and (min-width: 992px) {
  .recruit_flow ul li {
    width: 29%;
  }
}
.recruit_flow ul li:not(:last-child)::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-top: 2px solid var(--primary_00);
  border-right: 2px solid var(--primary_00);
  transform: rotate(135deg);
  position: absolute;
  bottom: -40px;
  left: calc(50% - 10px);
}
@media print, screen and (min-width: 992px) {
  .recruit_flow ul li:not(:last-child)::before {
    transform: rotate(45deg);
    left: inherit;
    right: -40px;
    top: 50%;
  }
}
.recruit_flow ul dt {
  font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  color: var(--primary_00);
}
.recruit_flow ul .num {
  background: var(--primary_00);
  color: #fff;
  width: 2em;
  height: 2em;
  text-align: center;
  display: inline-block;
  border-radius: 2em;
  margin-right: 10px;
}
.recruit_flow ul dd {
  margin-top: 1em;
}

.recruit_entry h3 + p {
  text-align: center;
}
.recruit_entry ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background: var(--primary_01);
  margin-top: 2em;
  padding: 2em;
}
@media print, screen and (min-width: 992px) {
  .recruit_entry ul {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}
.recruit_entry ul li {
  width: 100%;
  text-align: center;
}
.recruit_entry ul li:last-child {
  margin-top: 1em;
}
@media print, screen and (min-width: 992px) {
  .recruit_entry ul li {
    width: 50%;
    margin-top: 0;
  }
}
.recruit_entry ul li h4 {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 700;
  margin-bottom: 0.5em;
}
.recruit_entry ul li [data-action="call"] {
  color: var(--moji_02);
  font-size: clamp(2rem, 2.6vw, 3rem);
  font-weight: 700;
  padding-left: 30px;
  position: relative;
}
.recruit_entry ul li [data-action="call"]::before {
  content: '';
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24px 24px"><path fill="%23FA863E" d="M20 15.5C18.8 15.5 17.5 15.3 16.4 14.9H16.1C15.8 14.9 15.6 15 15.4 15.2L13.2 17.4C10.4 15.9 8 13.6 6.6 10.8L8.8 8.6C9.1 8.3 9.2 7.9 9 7.6C8.7 6.5 8.5 5.2 8.5 4C8.5 3.5 8 3 7.5 3H4C3.5 3 3 3.5 3 4C3 13.4 10.6 21 20 21C20.5 21 21 20.5 21 20V16.5C21 16 20.5 15.5 20 15.5M5 5H6.5C6.6 5.9 6.8 6.8 7 7.6L5.8 8.8C5.4 7.6 5.1 6.3 5 5M19 19C17.7 18.9 16.4 18.6 15.2 18.2L16.4 17C17.2 17.2 18.1 17.4 19 17.4V19M15 12H17A5 5 0 0 0 12 7V9A3 3 0 0 1 15 12M19 12H21C21 7 16.97 3 12 3V5C15.86 5 19 8.13 19 12Z" /></svg>');
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* ---------------------------------------------------------------------------------------------------------

 contact

--------------------------------------------------------------------------------------------------------- */
.required, .any {
  display: inline-block;
  color: var(--mono_01);
  padding: 3px 5px;
  border-radius: 3px;
  line-height: 1;
  font-size: 76%;
}

.required {
  background: var(--clr_hisu);
}

.any {
  background: #999;
}

/* tel,fax
----------------------------------------------------------*/
.contact_tel .tel_box {
  background: var(--primary_01);
  padding: 2em 3em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.contact_tel .tel_box h3 {
  font-size: clamp(2rem, 2.6vw, 3rem);
  font-weight: 700;
  text-align: center;
  width: 100%;
}
@media print, screen and (min-width: 992px) {
  .contact_tel .tel_box h3 {
    width: 200px;
  }
}
.contact_tel .tel_box .phone,
.contact_tel .tel_box .fax {
  text-align: center;
  width: 100%;
  margin-top: 1em;
}
@media print, screen and (min-width: 992px) {
  .contact_tel .tel_box .phone,
  .contact_tel .tel_box .fax {
    width: calc((100% - 200px) / 2);
    margin-top: 0;
  }
}
.contact_tel .tel_box .number {
  color: var(--moji_02);
  font-size: clamp(2rem, 2.6vw, 3rem);
  font-weight: 700;
  padding-left: 30px;
  position: relative;
}
.contact_tel .tel_box .number::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.contact_tel .tel_box .reception {
  font-size: clamp(1.2rem, 1.4vw, 1.4rem);
}
.contact_tel .tel_box .phone .number::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24px 24px"><path fill="%23FA863E" d="M20 15.5C18.8 15.5 17.5 15.3 16.4 14.9H16.1C15.8 14.9 15.6 15 15.4 15.2L13.2 17.4C10.4 15.9 8 13.6 6.6 10.8L8.8 8.6C9.1 8.3 9.2 7.9 9 7.6C8.7 6.5 8.5 5.2 8.5 4C8.5 3.5 8 3 7.5 3H4C3.5 3 3 3.5 3 4C3 13.4 10.6 21 20 21C20.5 21 21 20.5 21 20V16.5C21 16 20.5 15.5 20 15.5M5 5H6.5C6.6 5.9 6.8 6.8 7 7.6L5.8 8.8C5.4 7.6 5.1 6.3 5 5M19 19C17.7 18.9 16.4 18.6 15.2 18.2L16.4 17C17.2 17.2 18.1 17.4 19 17.4V19M15 12H17A5 5 0 0 0 12 7V9A3 3 0 0 1 15 12M19 12H21C21 7 16.97 3 12 3V5C15.86 5 19 8.13 19 12Z" /></svg>');
}
.contact_tel .tel_box .fax .number {
  display: inline;
}
.contact_tel .tel_box .fax .number::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24px 24px"><path fill="%23FA863E" d="M19 9H18V4H8V20H22V12C22 10.34 20.66 9 19 9M10 6H16V9H10V6M14 17H10V12H14V17M16 17C15.45 17 15 16.55 15 16C15 15.45 15.45 15 16 15C16.55 15 17 15.45 17 16C17 16.55 16.55 17 16 17M16 14C15.45 14 15 13.55 15 13S15.45 12 16 12C16.55 12 17 12.45 17 13S16.55 14 16 14M19 17C18.45 17 18 16.55 18 16C18 15.45 18.45 15 19 15S20 15.45 20 16C20 16.55 19.55 17 19 17M19 14C18.45 14 18 13.55 18 13S18.45 12 19 12 20 12.45 20 13 19.55 14 19 14M4.5 8C3.12 8 2 9.12 2 10.5V18.5C2 19.88 3.12 21 4.5 21S7 19.88 7 18.5V10.5C7 9.12 5.88 8 4.5 8Z" /></svg>');
}

/* form
----------------------------------------------------------*/
.contact_form .text_area p .required {
  margin-right: 5px;
}
.contact_form .text_area p + p {
  padding-top: 1em;
}
.contact_form .pp {
  background: var(--mono_04);
  padding: 1.5em;
  margin-top: 3em;
}
@media print, screen and (min-width: 768px) {
  .contact_form .pp {
    padding: 3em;
  }
}
.contact_form .pp h3 {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 700;
  border-bottom: #000 double 3px;
  margin-bottom: 2em;
}
.contact_form .pp h4 {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 1.5em;
}
.contact_form .pp h4 + p {
  margin-bottom: 2em;
}
.contact_form .pp .pp_txt {
  height: 30em;
  overflow: auto;
  word-wrap: break-word;
}
.contact_form .pp .pp_txt p {
  padding-bottom: 1.5em;
}
.contact_form .pp .pp_txt dt {
  font-weight: bold;
  font-size: 1.6rem;
  padding-bottom: 1em;
}
.contact_form .pp .pp_txt dd {
  margin-bottom: 2em;
}
.contact_form .pp .pp_txt dd:last-child {
  margin-bottom: 0;
}
.contact_form .pp a[target="_blank"] {
  text-decoration: underline;
}

.contact_form table {
  margin-top: 3em;
}
.contact_form .radio-item {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
}
.contact_form .radio-item li {
  width: 38%;
}
.contact_form input[type="checkbox"],
.contact_form input[type="radio"] {
  all: revert;
}
.contact_form input[type="text"],
.contact_form textarea {
  padding: 1em;
  outline: none;
  border-radius: 3px;
  background: var(--mono_04);
  border: 1px solid var(--mono_03);
  color: #333;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.contact_form input[type="text"]::placeholder,
.contact_form textarea::placeholder {
  color: #999;
}
.contact_form input[type="text"]:-ms-input-placeholder,
.contact_form textarea:-ms-input-placeholder {
  color: #999;
}
.contact_form input[type="text"]::-ms-input-placeholder,
.contact_form textarea::-ms-input-placeholder {
  color: #999;
}
.contact_form input[type="text"]:focus,
.contact_form textarea:focus {
  border: 1px solid var(--primary_03);
}
.contact_form input[type="text"] {
  width: 100%;
}
.contact_form input.w50[type="text"] {
  width: 100%;
}
.contact_form textarea {
  width: 100%;
  height: 10em;
}
.contact_form .agree_check {
  text-align: center;
  padding-top: 4%;
}
.contact_form .submit_form {
  padding-top: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px 0;
}
.contact_form .submit_form button {
  font-weight: 700;
  text-align: center;
  width: 300px;
  padding: 1em;
  cursor: pointer;
  color: #fff;
  transition: all 0.5s ease 0s;
  border-radius: 100px;
}
.contact_form .submit_form button:hover {
  opacity: .7;
}
.contact_form .submit_form .btn_confirm {
  background: var(--primary_00);
}
.contact_form .submit_form .btn_send {
  background: var(--primary_00);
}
.contact_form .submit_form .btn_back {
  background: var(--mono_00);
}