@charset "UTF-8";

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1 {
  margin: 0;
}

h2 {
  margin: 0;
}

h3 {
  margin: 0;
}

h4 {
  margin: 0;
}

h5 {
  margin: 0;
}

p {
  margin: 0;
}

address {
  font-style: normal;
}

@font-face {
  font-family: "MPLUS2";
  src: url("font/MPLUS2-VariableFont_wght.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "DIN Bold";
  src: url("font/din-bold.otf") format("opentype");
  font-display: swap;
}

:root {
  --white: #fff;
  --black: #000;
  --blue: rgb(0 108 172);
  --light-blue: rgb(0 156 225);
  --pastel-blue: rgb(202 226 248);
  --green: rgb(49 165 65);
  --pink: rgb(237 88 115);
  --purple: rgb(229 0 255);
  --dark-purple: rgb(175 0 125);
  --yellow: rgb(255 240 0);
  --dark-yellow: rgb(255 237 95);
  --orange: rgb(234 114 2);

  font-family: "MPLUS2", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
}

.pc-only {
  display: none;
}

.sp-only {
  display: block;
}

/* header */
.header .w1200 {
  background: var(--blue);
  position: fixed;
  z-index: 100;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 calc(10vw / 3.9);
  width: 100%;
  height: min(calc(88vw / 3.9), 88px);
}

.header-body {
  margin-right: auto;
}

.header-logo > img {
  width: min(calc(159vw / 3.9), 159px);
  height: auto;
  display: block;
}

.header-icon {
  display: flex;
  gap: calc(8vw / 3.9);
  padding-right: 2%;
}

.header-mail,
.header-line {
  transition: 0.3s all;
}

.header-mail:hover,
.header-line:hover {
  filter: brightness(105%);
}

.icon-bg {
  width: min(calc(45vw / 3.9), 45px);
  aspect-ratio: 1;
}

.icon-bg img {
  display: block;
}

.header-nav {
  height: min(calc(88vw / 3.9), 88px);
  background-color: var(--yellow);
}

.hamburger-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;

  /* ハンバーガーメニュー+MENUの要素の高さを設定 */
  height: 90%;
}

.openbtn {
  position: relative;
  z-index: 9999;
  background: none;
  border: none;
  border-radius: 0;
  appearance: none;
  width: min(calc(70vw / 3.9), 70px);
  height: min(calc(88vw / 3.9), 88px);
}

.hamburger-wrapper p {
  font-size: min(calc(14vw / 3.9), 14px);
  font-weight: 500;
  color: var(--blue);
}

.openbtn span {
  width: clamp(2px, 8.9vw, 40px);
  transition: all 0.4s ease-in-out;
  height: 10%;
  background-color: var(--blue);
  border-radius: 20%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.openbtn span:nth-of-type(1) {
  top: min(calc(25vw / 3.9), 25px);
}

.openbtn span:nth-of-type(2) {
  top: min(calc(37vw / 3.9), 37px);
}

.openbtn span:nth-of-type(3) {
  top: min(calc(49vw / 3.9), 49px);
}

#g-nav {
  width: 100%;
  position: fixed;
  top: min(calc(88vw / 3.9), 88px);
  right: -100%;
  z-index: 999;
  transition: all 0.6s;
  background-color: rgb(255 255 255/ 90%);
}

#g-nav.active {
  right: 0;
  max-height: min(calc(330vw / 3.9), 400px);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.openbtn.active span:nth-of-type(1) {
  top: min(calc(36vw / 3.9), 36px);
  left: min(calc(18vw / 3.9), 18px);
  transform: rotate(-45deg);
  width: min(calc(36vw / 3.9), 36px);
}

.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
  top: min(calc(36vw / 3.9), 36px);
  left: min(calc(18vw / 3.9), 18px);
  transform: rotate(45deg);
  width: min(calc(36vw / 3.9), 36px);
}

#g-nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10vw / 3.9);
  height: 100%;
  padding: calc(16vw / 3.9) 0;
}

#g-nav a {
  display: block;
  font-weight: 700;
  text-decoration: none;
  color: var(--blue);
  font-size: min(calc(16vw / 3.9), 16px);
  position: relative;
}

#g-nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: min(calc(2vw / 3.9), 2px);
  background: var(--yellow);
  opacity: 0;
  visibility: hidden;
  transition: 0.2s ease-in-out;
}

#g-nav a:hover::after {
  bottom: max(calc(-6vw / 3.9), -6px);
  opacity: 1;
  visibility: visible;
}

#g-nav a span {
  display: inline;
}

/* main */
#main-visual {
  /* ヘッダーの高さ分確保する */
  padding-top: min(calc(88vw / 3.9), 88px);
}

/* about */
.point-title {
  padding: min(calc(20vw / 3.9), 20px) calc(10vw / 3.9)
    min(calc(10vw / 3.9), 10px);
}

.point-title > img {
  width: calc(300vw / 3.9);
  height: calc(30vw / 3.9);
  display: block;
  margin: 0 auto;
}

.point-des {
  text-align: center;
  font-size: min(calc(14vw / 3.9), 22px);
  line-height: 1.7;
  padding-bottom: calc(10vw / 3.9);
  font-weight: 600;
}

.point-color-multi-1 {
  color: var(--light-blue);
}

.point-color-multi-2 {
  color: var(--blue);
}

.point-color-multi-3 {
  color: var(--white);
}

.point-cotnts {
  background-image: url("img/point_cotnts.webp");
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  width: 95vw;
  position: relative;
  aspect-ratio: 1451 / 3196;
  line-height: clamp(1.5vw, calc(20vw / 3.9), 20vw);
}

.point-inner-title {
  padding-bottom: min(calc(10vw / 3.9), 10px);
  font-size: calc(21vw / 3.9);
  color: var(--yellow);
  text-align: center;
  line-height: 1.3;
}

.point-inner-des {
  font-size: calc(13.5vw / 3.9);
  text-align: center;
  color: var(--white);
}

.point1 {
  width: 70%;
  position: absolute;
  top: 19%;
  left: 57%;
  transform: translate(-50%, -50%);
}

.point1 .point-inner-title {
  position: relative;
}

.point1 .point-inner-title::after {
  content: "";
  width: 100%;
  height: 9px;
  background-image: url("img/point01_line.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  position: absolute;
  bottom: 0;
  transform: translateX(-83%);
}

.point2 {
  width: 70%;
  position: absolute;
  top: 44%;
  left: 54%;
  transform: translate(-50%, -50%);
}

.point2 .point-inner-title {
  position: relative;
}

.point2 .point-inner-title::after {
  content: "";
  width: 100%;
  height: 9px;
  background-image: url("img/point02_line.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  position: absolute;
  bottom: 0;
  transform: translateX(-92%);
}

.point3 {
  width: 70%;
  position: absolute;
  top: 68%;
  left: 60%;
  transform: translate(-50%, -50%);
}

.point3 .point-inner-title {
  position: relative;
}

.point3 .point-inner-title::after {
  content: "";
  width: 100%;
  height: 9px;
  background-image: url("img/point03_line.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  position: absolute;
  bottom: 0;
  transform: translateX(-92.5%);
}

.point4 {
  width: 80%;
  position: absolute;
  top: 91.5%;
  left: 57%;
  transform: translate(-50%, -50%);
}

.point4 .point-inner-title {
  position: relative;
}

.point4 .point-inner-title::after {
  content: "";
  width: 80%;
  height: 9px;
  background-image: url("img/point04_line.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  position: absolute;
  bottom: 0;
  transform: translateX(-90%);
}

/* what */
#what {
  margin-top: calc(40vw / 3.9);
  background-image: url("img/what_inkup_back.webp");
  background-size: contain;
  aspect-ratio: 814 / 849;
}

.what-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20vw / 3.9);
}

.what-image {
  width: calc(350vw / 3.9);
}

.sp-what-dec-title {
  font-size: calc(21vw / 3.9);
  color: var(--blue);
  padding-top: calc(20vw / 3.9);
  position: relative;
  letter-spacing: 0.2vw;
}

.sp-what-dec-title::before {
  content: "";
  background-image: url("img/what_inkup_title_hukidasi.webp");
  width: calc(125vw / 3.9);
  height: calc(80vw / 3.9);
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  top: calc(-50vw / 3.9);
  left: calc(-40vw / 3.9);
}

.what-dec-section {
  align-items: center;
}

.what-dec-text {
  font-size: min(calc(12vw / 3.9), 21px);
  font-weight: 600;
  text-align: center;
  line-height: 1.7;
  letter-spacing: 0.1vw;
  padding: 0 calc(40vw / 3.9);
}

.what-choice-text {
  width: calc(350vw / 3.9);
  text-align: center;
  font-size: calc(21vw / 3.9);
  color: var(--white);
  background-color: var(--blue);
  border-radius: calc(30vw / 3.9);
  padding: calc(16vw / 3.9) 0;
}

/* kunren */
.kunren-wrapper,
#process {
  background-image: url("img/kunren_process_back.webp");
}

.kunren-wrapper {
  position: relative;
  height: calc(950vw / 3.9);
}

.kunren-title {
  position: absolute;
  top: calc(-5vw / 3.9);
  left: 50%;
  transform: translateX(-50%);
}

/* 訓練内容の大きいまとまり */
.kunren-items {
  padding-top: calc(30vw / 3.9);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  gap: calc(5vw / 3.9);
  width: calc(380vw / 3.9);
}

/* 訓練内容の画像背景設定（共通） */
.kunren-background-box {
  width: calc(180vw / 3.9);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: calc(250vw / 3.9);
}

/* 訓練内容のテキスト設定（共通） */
.kunren-text-box {
  width: calc(180vw / 3.9);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kunren-title img {
  display: block;
}

.kunren-items p {
  font-weight: 600;
  font-size: calc(11vw / 3.9);
  text-align: center;
}

.kunren-items h3 {
  font-size: calc(17vw / 3.9);
  color: var(--blue);
  font-weight: 700;
  border-bottom: 2px dotted var(--yellow);
}

.kunren-items span {
  color: var(--black);
  font-size: calc(11vw / 3.9);
}

.kunren-items ul {
  padding-top: calc(5vw / 3.9);
}

.kunren-items ul li {
  font-size: calc(16vw / 3.9);
  font-weight: 600;
  position: relative;
}

.kunren-items ul li::before {
  content: "・";
  color: var(--black);
  font-weight: 600;
}

/* 訓練内容個別設定 */
.kunren-item-pc {
  background-image: url("img/kunren_pc.webp");
  position: relative;
}

.pc-box {
  position: absolute;
  top: calc(130vw / 3.9);
}

.kunren-item-group-work {
  background-image: url("img/kunren_group_work.webp");
  position: relative;
}

.group-work-box {
  position: absolute;
  top: calc(130vw / 3.9);
}

.kunren-item-dtp {
  background-image: url("img/kunren_dtp.webp");
  position: relative;
}

.dtp-box {
  position: absolute;
  top: calc(130vw / 3.9);
}

.kunren-item-program {
  background-image: url("img/kunren_program.webp");
  position: relative;
}

.program-box {
  position: absolute;
  top: calc(130vw / 3.9);
}

.kunren-item-light-work {
  background-image: url("img/kunren_light_work.webp");
  position: relative;
}

.light-work-box {
  position: absolute;
  top: calc(130vw / 3.9);
}

.kunren-item-job {
  background-image: url("img/kunren_job.webp");
  position: relative;
}

.job-box {
  position: absolute;
  top: calc(130vw / 3.9);
}

/* 在宅支援システムの設定 */

.zaitaku-system-img {
  width: calc(370vw / 3.9);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.zaitaku-system p {
  font-size: calc(10vw / 3.9);
  width: calc(120vw / 3.9);
  position: absolute;
  bottom: calc(12vw / 3.9);
  right: calc(15vw / 3.9);
  line-height: 1.5;
  color: var(--white);
}

/* process */
#process {
  /* kunrenとの背景間にできる余白を削除するため設定 */
  margin-top: 0;
}

.process-container {
  background-image: url("img/process_ill.webp");
  background-size: contain;
  background-repeat: no-repeat;
  aspect-ratio: 814 / 1760;

  /* 高さを継承させるため、親に指定 */
  position: relative;
}

.process-title {
  position: relative;
}

.process-title::before {
  content: "";
  background-image: url("img/must_see.webp");
  background-size: contain;
  background-repeat: no-repeat;
  width: calc(68vw / 3.9);
  height: calc(70vw / 3.9);
  position: absolute;
  top: calc(6vw / 3.9);
  left: calc(1vw / 3.9);
}

.process-title-img {
  width: calc(230vw / 3.9);
  padding-top: calc(50vw / 3.9);
  display: block;
  margin: 0 auto;
}

.process-flow-item {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* プロセス各アイテム設定 */
.process-item-title {
  color: var(--blue);
  font-size: calc(17vw / 3.9);
  padding-bottom: calc(2vw / 3.9);
  font-weight: 600;
}

.process1 {
  position: absolute;
  top: 20%;
  right: 26%;
}

.process2 {
  position: absolute;
  top: 36%;
  right: 12.5%;
}

.process3 {
  position: absolute;
  top: 40.5%;
  left: 31%;
}

.process4 {
  position: absolute;
  top: 54.5%;
  left: 8%;
}

.process5 {
  position: absolute;
  top: 61.5%;
  right: 34%;
}

.process6 {
  position: absolute;
  top: 71%;
  right: 5%;
}

.process7 {
  position: absolute;
  bottom: 11%;
  right: 26%;
}

/* qa */
#qa {
  margin-top: 0;
  background-color: var(--pastel-blue);
  height: calc(1200vw / 3.9);
  clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 98%, 0 95%);
}

.qa-container {
  /* qa-dogの配置のため、親設定 */
  position: relative;
}

.qa-title h2 {
  font-size: calc(23.5vw / 3.9);
  text-align: center;
  font-weight: 600;
  padding-top: calc(20vw / 3.9);
}

.qa-dog {
  position: absolute;
  top: 0%;
  left: calc(20vw / 3.9);
}

.qa-dog img {
  width: calc(40vw / 3.9);
  height: calc(58vw / 3.9);
}

.qa-body {
  display: flex;
  flex-wrap: wrap;
  row-gap: calc(16vw / 3.9);
  margin: 0 auto;
  width: calc(350vw / 3.9);
}

.qa-q {
  font-size: calc(13vw / 3.9);
  font-weight: 500;
  position: relative;
  padding: calc(12vw / 3.9) calc(5vw / 3.9) calc(14vw / 3.9) calc(36vw / 3.9);
}

.qa-a {
  font-size: calc(12vw / 3.9);
  font-weight: 500;
  line-height: 1.5;
  position: relative;
  padding: calc(2vw / 3.9) calc(5vw / 3.9) calc(14vw / 3.9) calc(36vw / 3.9);
}

.qa-q::before {
  content: "";
  background-image: url("img/q-icon.webp");
  background-size: cover;
  width: calc(14vw / 3.9);
  height: calc(15vw / 3.9);
  position: absolute;
  top: 50%;
  left: calc(10vw / 3.9);
  transform: translateY(-50%);
}

.qa-q::after {
  content: "";
  border-bottom: 1.6px dotted var(--black);
  position: absolute;
  bottom: 0;
  left: calc(12vw / 3.9);
  width: 93%;
}

.qa-a::before {
  content: "";
  background-image: url("img/a_icon.webp");
  background-size: cover;
  width: calc(13vw / 3.9);
  height: calc(13vw / 3.9);
  position: absolute;
  top: calc(4vw / 3.9);
  left: calc(10vw / 3.9);
}

.qa-box {
  display: flex;
  flex-direction: column;
  row-gap: calc(3.3vw);
  width: calc(350vw / 3.9);
}

.qa-body .qa1,
.qa-body .qa5,
.qa-body .qa8,
.qa-body .qa10 {
  background-color: var(--white);
  border-radius: calc(13vw / 3.9);
}

.qa-body .qa2,
.qa-body .qa6,
.qa-body .qa9{
  background-color: var(--dark-yellow);
  border-radius: calc(13vw / 3.9);
}

/* flow */

#flow {
  margin-top: calc(-80vw / 3.9);
  background-image: url("img/flow_back.webp");
  aspect-ratio: 814 / 2000;
}

.flow-container {
  padding-top: calc(70vw / 3.9);
  aspect-ratio: 814 / 1900;
  position: relative;
}

.flow-title h2 {
  font-size: calc(23.5vw / 3.9);
  text-align: center;
  font-weight: 600;
  color: var(--black);

  /* graphicを前後に設定する設定 */
  position: relative;
}

.flow-title h2::before {
  content: "";
  background-image: url("img/graphic_line_left.webp");
  background-size: cover;
  width: calc(20vw / 3.9);
  height: calc(45vw / 3.9);
  position: absolute;
  top: calc(-5vw / 3.9);
  left: calc(80vw / 3.9);
}

.flow-title h2::after {
  content: "";
  background-image: url("img/graphic_line_right.webp");
  background-size: cover;
  width: calc(22vw / 3.9);
  height: calc(47vw / 3.9);
  position: absolute;
  top: calc(-5vw / 3.9);
  right: calc(88vw / 3.9);
}

.flow-item {
  position: relative;
  color: var(--white);
}

.flow-item::before {
  content: "";
  background-image: url("img/flow_item_back.webp");
  background-size: contain;
  background-repeat: no-repeat;
  width: calc(300vw / 3.9);
  height: calc(1000vw / 3.9);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.flow-box {
  width: calc(175vw / 3.9);
  height: auto;
}

.flow-step-title {
  font-size: calc(16.5vw / 3.9);
  letter-spacing: 0.5vw;
  text-align: center;
  padding-bottom: calc(5vw / 3.9);
}

.flow-des {
  font-size: calc(12.5vw / 3.9);
}

.flow1 {
  position: absolute;
  top: calc(80vw / 3.9);
  left: 50%;
  transform: translateX(-50%);
}

.flow2 {
  position: absolute;
  top: calc(340vw / 3.9);
  left: 50%;
  transform: translateX(-50%);
}

.flow3 {
  position: absolute;
  top: calc(630vw / 3.9);
  left: 50%;
  transform: translateX(-50%);
}

.flow-kyara {
  position: absolute;
  width: calc(200vw / 3.9);
  bottom: 0;
  right: 0;
}

/* news */
#news {
  background-color: var(--yellow);
  padding: calc(32vw / 3.9) 0;
}

.news-title {
  font-size: calc(23.5vw / 3.9);
  letter-spacing: calc(0.8vw / 3.9);
  text-align: center;
  font-weight: 600;
  padding-bottom: calc(16vw / 3.9);
  position: relative;
}

.news-title::before {
  content: "";
  background-image: url("img/graphic_line_left.webp");
  background-size: cover;
  width: calc(20vw / 3.9);
  height: calc(50vw / 3.9);
  position: absolute;
  top: calc(-7vw / 3.9);
  left: calc(34vw / 3.9);
}

.news-title::after {
  content: "";
  background-image: url("img/graphic_line_right.webp");
  background-size: cover;
  width: calc(22vw / 3.9);
  height: calc(48vw / 3.9);
  position: absolute;
  top: calc(-7vw / 3.9);
  right: calc(34vw / 3.9);
}

#insta ul {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: calc(10vw / 3.9) 0;
  width: calc(240vw / 3.9);
  margin: 0 auto;
  padding: calc(10vw / 3.9);
  background-color: var(--white);
}

#insta a {
  text-decoration: none;
  display: inline-block;
}

#insta ul li {
  list-style: none;
  box-sizing: border-box;
  width: calc(220vw / 3.9);
  height: calc(220vw / 3.9);
  position: relative;
}

#insta ul li img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.captionTxt {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  padding: calc(20vw / 3.9);
  font-size: calc(12vw / 3.9);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(51 51 51 / 55%);
  color: var(--white);
  opacity: 0;
  transition: 0.5s opacity, 0.25s filter;
}

#insta ul li:hover .captionTxt {
  transition: 0.5s opacity, 0.25s filter;
  opacity: 1;
}

/* footer */
footer {
  background-color: var(--blue);
}

.guidance {
  text-align: center;
  position: relative;
}

.guidance::before {
  content: "";
  background-image: url("img/graphic_line_white_left.webp");
  background-size: cover;
  width: calc(18vw / 3.9);
  height: calc(60vw / 3.9);
  position: absolute;
  top: calc(20vw / 3.9);
  left: calc(45vw / 3.9);
}

.guidance::after {
  content: "";
  background-image: url("img/graphic_line_white_right.webp");
  background-size: cover;
  width: calc(23.4vw / 3.9);
  height: calc(65vw / 3.9);
  position: absolute;
  top: calc(20vw / 3.9);
  right: calc(50vw / 3.9);
}

.guidance h3 {
  color: var(--yellow);
  font-size: calc(18vw / 3.9);
  padding-top: calc(28vw / 3.9);
}

.guidance p {
  color: var(--white);
  font-size: min(calc(14vw / 3.9), 20px);
  padding: calc(20vw / 3.9) 0;
}

.footer-button {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tel,
.mail,
.line {
  box-sizing: border-box;
  width: calc(306vw / 3.9);
  height: calc(68vw / 3.9);
  border-radius: calc(34vw / 3.9);
  background-color: var(--yellow);
  text-decoration: none;
  color: var(--black);
  position: relative;
  margin-bottom: calc(16vw / 3.9);
  transition: 0.3s all;
}

.tel:hover,
.mail:hover,
.line:hover {
  filter: brightness(105%);
}

.tel {
  padding: calc(13vw / 3.9) calc(34vw / 3.9) calc(13vw / 3.9) calc(77vw / 3.9);
}

.tel::before {
  content: "";
  width: calc(36vw / 3.9);
  height: calc(42vw / 3.9);
  background-image: url("img/footer_tel_icon.webp");
  background-size: cover;
  position: absolute;
  top: calc(13vw / 3.9);
  left: calc(34vw / 3.9);
}

.tel-box {
  display: flex;
  flex-direction: column;
}

.tel-number {
  font-size: calc(28vw / 3.9);
  font-weight: 600;
  line-height: 0.9;
  align-self: center;
  font-family: "DIN Bold", sans-serif;
  letter-spacing: calc(0.8vw / 3.9);
}

.tel-txt {
  display: block;
  font-size: calc(12vw / 3.9);
  letter-spacing: unset;
  font-weight: 500;
  line-height: 1;
  padding-top: calc(6vw / 3.9);
  font-family: "MPLUS2", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
}

.mail,
.line {
  padding: calc(7vw / 3.9) calc(60vw / 3.9) calc(7vw / 3.9) calc(104vw / 3.9);
}

.mail::before {
  content: "";
  width: calc(31vw / 3.9);
  height: calc(24vw / 3.9);
  background-image: url("img/footer_mail_icon.webp");
  background-size: cover;
  position: absolute;
  top: calc(22vw / 3.9);
  left: calc(64vw / 3.9);
}

.line::before {
  content: "";
  width: calc(34.9vw / 3.9);
  height: calc(33vw / 3.9);
  background-image: url("img/footer_line_icon.webp");
  background-size: cover;
  position: absolute;
  top: calc(18vw / 3.9);
  left: calc(62vw / 3.9);
}

.mail > p,
.line > p {
  font-size: calc(15vw / 3.9);
  font-weight: 700;
  line-height: 3.333;
}

.map {
  margin-bottom: calc(12vw / 3.9);
}

.map-sp {
  display: block;
  width: calc(370vw / 3.9);
  height: calc(192vw / 3.9);
  margin: 0 auto;
}

.office-info {
  position: relative;
  margin-bottom: calc(36vw / 3.9);
}

.office-info-body {
  margin-left: calc(16vw / 3.9);
}

.footer-logo img {
  width: calc(214vw / 3.9);
  height: calc(148vw / 3.9);
}

.address > p {
  font-size: calc(15vw / 3.9);
  font-weight: 500;
  line-height: 1.533;
  color: var(--white);
}

.footer-mof {
  position: absolute;
  top: calc(-36vw / 3.9);
  right: calc(0vw / 3.9);
  width: calc(156vw / 3.9);
  height: calc(252vw / 3.9);
}

.footer-mof > img {
  width: 100%;
  height: 100%;
}

.copyright {
  font-size: calc(11vw / 3.9);
  font-weight: 400;
  line-height: 1;
  letter-spacing: calc(1vw / 3.9);
  color: var(--white);
  text-align: center;
  padding-bottom: calc(18vw / 3.9);
}

/* パソコン */
@media screen and (width >= 768px) {
  .pc-only {
    display: block;
  }

  .sp-only {
    display: none;
  }

  .w1200 {
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .w1920 {
    max-width: 1920px;
    margin: 0 auto;
  }

  /* header */
  .header {
    background: var(--white);
    left: 0;
    right: 0;
    box-shadow: 0 2px 8px rgb(0 0 0 / 40%);
    display: flex;
    align-items: center;
    margin: 0 auto;
    height: min(calc(140vw / 19.2), 140px);
  }

  .header .w1200 {
    width: calc(100% - 20vw);
    height: auto;
    background: initial;
    position: static;
    z-index: initial;
    padding: 0;
  }

  .header-body {
    margin-right: initial;
  }

  .header-logo > img {
    width: min(calc(410vw / 19.2), 410px);
    height: min(calc(89vw / 19.2), 89px);
  }

  .header-nav {
    height: auto;
    background-color: var(--white);
  }

  #g-nav {
    width: min(calc(740vw / 19.2), 740px);
    position: static;
    top: auto;
    right: auto;
    height: auto;
    transition: none;
  }

  #g-nav ul {
    line-height: 0;
    padding: 0;
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
    height: auto;
  }

  #g-nav a {
    display: inline;
    color: var(--black);
    font-weight: 600;
    font-size: min(calc(20vw / 19.2), 20px);
  }

  #g-nav a::after {
    bottom: max(calc(-10vw / 3.9), -10px);
    width: 100%;
    background: var(--blue);
  }

  #g-nav a span {
    display: none;
  }

  /* main */
  #main-visual {
    padding-top: 0;
  }

  /* about */
  #about {
    padding-top: calc(95vw / 19.2);
    margin-top: calc(-95vw / 19.2);
  }

  .point-title {
    width: min(calc(750vw / 19.2), 750px);
    margin: 0 auto;
    padding: min(calc(40vw / 19.2), 40px) min(calc(32vw / 19.2), 32px)
      min(calc(32vw / 19.2), 32px);
  }

  .point-title > img {
    height: auto;
  }

  .point-des {
    font-size: min(calc(26vw / 19.2), 26px);
    font-weight: 600;
    letter-spacing: 0.2vw;
    padding-bottom: 0;
  }

  .point-cotnts {
    background-image: unset;
    background-position: unset;
    background-size: unset;
    background-repeat: unset;
    aspect-ratio: unset;
    line-height: unset;

    /* 画面幅が拡大・縮小するとキャラクターのレイアウトが崩れるのを防ぐため、幅を設定 */
    width: min(calc(1500vw / 19.2), 1500px);
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  }

  .point-inner-title {
    font-size: min(calc(29vw / 19.2), 29px);
    line-height: 1.8;
    padding-bottom: 0;
    color: initial;
    font-weight: 700;
  }

  .point-inner-title span {
    border-bottom: 2px dotted var(--white);
  }

  .point-inner-des {
    font-size: min(calc(23vw / 19.2), 23px);
    line-height: 1.7;
    font-weight: 600;
    color: initial;
  }

  /* 矢印のカラーのみ上書き */
  .point-color-multi-3 {
    color: var(--blue);
  }

  .point1,
  .point2,
  .point3,
  .point4 {
    width: min(calc(400vw / 19.2), 400px);
    height: min(calc(600vw / 19.2), 600px);
  }

  .point1 {
    background-image: url("img/pc/pc_point_kanban_01.webp");
    background-size: contain;
    background-repeat: no-repeat;
    max-width: initial;
    position: relative;
    top: initial;
    left: initial;
    transform: initial;
  }

  .point1-innner {
    width: min(calc(260vw / 19.2), 260px);
    position: absolute;
    top: 54%;
    left: 54%;
    transform: rotate(-3deg) translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: min(calc(14vw / 19.2), 14px);
  }

  .point1-innner > .point-inner-title {
    color: var(--pink);
  }

  .point1 .point-inner-title::after {
    content: none;
  }

  .point2 {
    background-image: url("img/pc/pc_point_kanban_02.webp");
    background-size: contain;
    background-repeat: no-repeat;
    max-width: initial;
    position: relative;
    top: initial;
    left: initial;
    transform: initial;
  }

  .point2-innner {
    width: min(calc(300vw / 19.2), 300px);
    position: absolute;
    top: 62%;
    left: 48%;
    transform: rotate(3.5deg) translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: min(calc(10vw / 19.2), 10px);
  }

  .point2-innner > .point-inner-title {
    color: var(--blue);
  }

  .point2 .point-inner-title::after {
    content: none;
  }

  .point3 {
    background-image: url("img/pc/pc_point_kanban_03.webp");
    background-size: contain;
    background-repeat: no-repeat;
    max-width: initial;
    position: relative;
    top: initial;
    left: initial;
    transform: initial;
  }

  .point3-innner {
    width: min(calc(270vw / 19.2), 270px);
    position: absolute;
    top: 47%;
    left: 55%;
    transform: rotate(-2deg) translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: min(calc(14vw / 19.2), 14px);
  }

  .point3-innner > .point-inner-title {
    color: var(--green);
  }

  .point3 .point-inner-title::after {
    content: none;
  }

  .point4 {
    background-image: url("img/pc/pc_point_kanban_04.webp");
    background-size: contain;
    background-repeat: no-repeat;
    max-width: initial;
    position: relative;
    top: initial;
    left: initial;
    transform: initial;
  }

  .point4-innner {
    width: min(calc(280vw / 19.2), 280px);
    position: absolute;
    top: 58%;
    left: 45%;
    transform: rotate(3deg) translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: min(calc(14vw / 19.2), 14px);
  }

  .point4-innner .point-inner-title {
    color: var(--orange);
  }

  .point4 .point-inner-title::after {
    content: none;
  }

  .point-kyara {
    width: min(calc(330vw / 19.2), 330px);
    position: absolute;
    right: -10%;
    top: 80%;
    transform: translateY(-50%);
  }

  /* what */
  #what {
    margin-top: min(calc(45vw / 19.2), 45px);
    background-image: url("img/pc/pc_what_inkup_back.webp");
    background-repeat: no-repeat;
    aspect-ratio: 4001 / 896;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .what-container {
    flex-direction: row;
    gap: min(calc(48vw / 19.2), 48px);
  }

  .what-image {
    text-align: center;
    width: min(calc(570vw / 19.2), 570px);
  }

  .pc-what-dec-title {
    font-size: min(calc(36vw / 19.2), 36px);
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.15vw;
    color: var(--blue);
  }

  .pc-what-dec-title span {
    font-size: min(calc(30vw / 19.2), 30px);
  }

  .what-dec-section {
    display: flex;
    flex-direction: column;
    gap: min(calc(30vw / 19.2), 30px);
  }

  .what-dec-text {
    font-size: min(calc(23vw / 19.2), 23px);
    line-height: 1.8;
    padding: 0;
  }

  .what-choice-text {
    width: auto;
    font-size: min(calc(28vw / 19.2), 28px);
    color: var(--blue);
    background-color: var(--white);
    font-weight: 600;
    border-radius: 50px;
    padding: min(calc(20vw / 19.2), 20px);
    margin-top: 0;
  }

  /* kunren */
  .kunren-wrapper {
    height: min(calc(2150vw / 19.2), 2150px);
  }

  .kunren-title {
    width: min(calc(700vw / 19.2), 700px);
    top: -0.5%;
    left: 50%;
    transform: translateX(-50%);
  }

  /* 訓練内容の大きいまとまり */
  .kunren-items {
    padding-top: min(calc(128vw / 19.2), 128px);
    max-width: min(calc(1650vw / 19.2), 1650px);
    gap: clamp(5px, calc(20vw / 19.2), 32px);
  }

  /* 訓練内容の画像背景設定（共通） */
  .kunren-background-box {
    width: min(calc(600vw / 19.2), 600px);
    height: min(calc(550vw / 19.2), 550px);
  }

  /* 訓練内容テキスト設定（共通） */
  .kunren-text-box {
    width: min(calc(440vw / 19.2), 440px);
    height: min(calc(158vw / 19.2), 158px);
    display: block;
  }

  .kunren-items p {
    font-size: min(calc(22vw / 19.2), 22px);
    text-align: center;
  }

  .kunren-items h3 {
    font-size: min(calc(34vw / 19.2), 34px);
    margin: 0 auto;
    width: fit-content;
  }

  .kunren-items span {
    font-size: min(calc(16vw / 19.2), 16px);
  }

  .kunren-items ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: min(calc(10vw / 19.2), 10px);
  }

  .kunren-items ul li {
    font-size: min(calc(25.5vw / 19.2), 25.5px);
    position: static;
  }

  /* 訓練内容個別設定 */
  .kunren-item-pc {
    background-image: url("img/pc/pc_kunren_pc.webp");
  }

  .pc-box {
    top: 65%;
    left: 50%;
    transform: translateX(-50%);
  }

  .kunren-item-group-work {
    background-image: url("img/pc/pc_kunren_group_work.webp");
  }

  .group-work-box {
    top: 66%;
    left: 50%;
    transform: translateX(-50%);
  }

  .kunren-item-dtp {
    background-image: url("img/pc/pc_kunren_dtp.webp");
  }

  .dtp-box {
    top: 62%;
    left: 50%;
    transform: translateX(-50%);
  }

  .kunren-item-program {
    background-image: url("img/pc/pc_kunren_program.webp");
  }

  .program-box {
    top: 62%;
    left: 50%;
    transform: translateX(-50%);
  }

  .kunren-item-light-work {
    background-image: url("img/pc/pc_kunren_light_work.webp");
  }

  .light-work-box {
    top: 65%;
    left: 50%;
    transform: translateX(-50%);
  }

  .kunren-item-job {
    background-image: url("img/pc/pc_kunren_job.webp");
  }

  .job-box {
    top: 65%;
    left: 50%;
    transform: translateX(-50%);
  }

  /* 在宅支援システムの設定 */
  .zaitaku-system {
    /* widthはw1920クラスで適用しているため、highetのみ指定 */
    padding-top: min(calc(10vw / 19.2), 10px);
    height: min(calc(400vw / 19.2), 400px);
    position: relative;
  }

  .zaitaku-system-img {
    width: min(calc(1100vw / 19.2), 1100px);
    left: 50%;
    transform: translateX(-50%);
  }

  .zaitaku-system-img img {
    width: 100%;
    height: auto;
    display: block;
  }

  .zaitaku-system p {
    font-size: min(calc(22vw / 19.2), 22px);
    width: min(calc(320vw / 19.2), 320px);
    bottom: 7%;
    right: 23%;
    letter-spacing: min(calc(2vw / 19.2), 2px);
  }

  /* process */
  .process-container {
    background-image: url("img/pc/pc_process_ill.webp");
    background-position: center;
    aspect-ratio: 3000 / 2339;

    /* process-title・process-flow-itemの親 */
    position: relative;
  }

  .process-title {
    position: absolute;
    top: 18%;
    left: 35%;
  }

  .process-title::before {
    background-image: url("img/must_see.webp");
    width: min(calc(210vw / 19.2), 220px);
    height: min(calc(210vw / 19.2), 220px);
    position: absolute;
    top: -10%;
    left: -50%;
  }

  .process-title-img {
    width: min(calc(540vw / 19.2), 540px);
    padding: 0;
  }

  /* プロセス各アイテム設定 */
  .process-item-title {
    font-size: min(calc(30vw / 19.2), 30px);
    padding-bottom: 0;
    font-weight: 500;
  }

  .process-padding-item {
    padding-bottom: min(calc(7vw / 19.2), 7px);
  }

  .process-dec {
    font-size: min(calc(18.5vw / 19.2), 18.5px);
  }

  .process1 {
    top: 39%;
    right: 50%;
  }

  .process2 {
    top: 39%;
    right: 31%;
  }

  .process3 {
    top: 60.5%;
    left: 64.5%;
  }

  .process4 {
    top: 60.5%;
    left: 43.5%;
  }

  .process5 {
    top: 66%;
    right: 71.2%;
  }

  .process6 {
    top: 81%;
    right: 60.5%;
  }

  .process7 {
    top: 81%;
    right: 42%;
  }

  /* qa */
  #qa {
    background-image: url("img/pc/pc_qa_back.webp");
    background-size: contain;
    width: 100%;
    height: min(calc(1650vw / 19.2), 1650px);
    clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
  }

  .qa-title h2 {
    font-size: min(calc(45vw / 19.2), 45px);
    padding: min(calc(40vw / 19.2), 40px) 0;
    letter-spacing: 0.15vw;
  }

  .qa-dog {
    left: 26%;
  }

  .qa-dog img {
    width: min(calc(100vw / 19.2), 100px);
    height: min(calc(150vw / 19.2), 150px);
  }

  .qa-body {
    justify-content: space-between;
    row-gap: min(calc(20vw / 19.2), 20px);
    width: min(calc(1600vw / 19.2), 1600px);
  }

  .qa-q {
    font-size: min(calc(24vw / 19.2), 24px);
    font-weight: 500;
    line-height: min(calc(30vw / 19.2), 30px);
    padding: min(calc(40vw / 19.2), 40px) min(calc(36vw / 19.2), 36px)
      min(calc(18vw / 19.2), 18px) min(calc(86vw / 19.2), 86px);
  }

  .qa-a {
    font-size: min(calc(22vw / 19.2), 22px);
    line-height: min(calc(36vw / 19.2), 36px);
    padding: min(calc(22vw / 19.2), 22px) min(calc(36vw / 19.2), 36px)
      min(calc(40vw / 19.2), 40px) min(calc(86vw / 19.2), 86px);
  }

  .qa-q::before {
    width: min(calc(25vw / 19.2), 25px);
    height: min(calc(25vw / 19.2), 25px);
    top: 62%;
    left: 5%;
  }

  .qa-q::after {
    left: 5%;
    width: 90%;
  }

  .qa-a::before {
    width: min(calc(25vw / 19.2), 25px);
    height: min(calc(25vw / 19.2), 25px);
    top: min(calc(44vw / 19.2), 44px);
    left: 5%;
    transform: translateY(-50%);
  }

  .qa-box {
    display: block;
    flex-direction: initial;
    row-gap: initial;
    width: min(calc(780vw / 19.2), 780px);
  }

  .qa-body .qa-box.qa1 {
    background-color: var(--white);
    border-radius: min(calc(30vw / 19.2), 30px);
    height: min(calc(280vw / 19.2), 280px);
  }

  .qa-body .qa-box.qa2 {
    background-color: var(--dark-yellow);
    border-radius: min(calc(30vw / 19.2), 30px);
    height: min(calc(280vw / 19.2), 280px);
  }

  .qa-body .qa-box.qa3 {
    background-color: var(--dark-yellow);
    border-radius: min(calc(30vw / 19.2), 30px);
    height: min(calc(270vw / 19.2), 270px);
  }

  .qa-body .qa-box.qa4 {
    background-color: var(--white);
    border-radius: min(calc(30vw / 19.2), 30px);
    height: min(calc(270vw / 19.2), 270px);
  }

  .qa-body .qa-box.qa5 {
    background-color: var(--white);
    border-radius: min(calc(30vw / 19.2), 30px);
    height: min(calc(270vw / 19.2), 270px);
  }

  .qa-body .qa-box.qa6 {
    background-color: var(--dark-yellow);
    border-radius: min(calc(30vw / 19.2), 30px);
    height: min(calc(270vw / 19.2), 270px);
  }

  .qa-body .qa-box.qa7 {
    background-color: var(--dark-yellow);
    border-radius: min(calc(30vw / 19.2), 30px);
    height: min(calc(230vw / 19.2), 230px);
  }

  .qa-body .qa-box.qa8 {
    background-color: var(--white);
    border-radius: min(calc(30vw / 19.2), 30px);
    height: min(calc(230vw / 19.2), 230px);
  }
 
    .qa-body .qa-box.qa9 {
    background-color: var(--white);
    border-radius: min(calc(30vw / 19.2), 30px);
    height: min(calc(230vw / 19.2), 230px);
  }

  .qa-body .qa-box.qa10 {
    background-color: var(--yellow);
    border-radius: min(calc(30vw / 19.2), 30px);
    height: min(calc(230vw / 19.2), 230px);
  }


  /* flow */

  #flow {
    background-size: cover;
    aspect-ratio: initial;
  }

  .flow-container {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;

    /* margin-topで上に上げている分paddingを設定する */
    padding-top: clamp(80px, 20vw, calc(1000vw / 19.2));
  }

  .flow-title h2 {
    font-size: min(calc(45vw / 19.2), 45px);
    letter-spacing: 0.15vw;
  }

  .flow-title h2::before {
    width: min(calc(45vw / 19.2), 45px);
    height: min(calc(110vw / 19.2), 110px);
    top: -30%;
    left: 38%;
  }

  .flow-title h2::after {
    width: min(calc(49vw / 19.2), 49px);
    height: min(calc(110vw / 19.2), 110px);
    top: -30%;
    right: 38.5%;
  }

  .flow-item {
    /* 中身の絶対位置配置のため高さを設定 */
    height: min(calc(680vw / 19.2), 680px);
  }

  .flow-item::before {
    background-image: url("img/pc/pc_flow_item_back.webp");
    width: min(calc(1500vw / 19.2), 1500px);
    height: min(calc(680vw / 19.2), 680px);
  }

  .flow-box {
    width: min(calc(250vw / 19.2), 250px);
  }

  .flow-step-title {
    font-size: min(calc(24vw / 19.2), 24px);
    letter-spacing: 0;
    padding-bottom: min(calc(8vw / 19.2), 8px);
  }

  .flow-des {
    font-size: min(calc(18vw / 19.2), 18px);
    letter-spacing: 0.09vw;
  }

  .flow1 {
    position: absolute;
    top: 33%;
    left: 28%;
  }

  .flow2 {
    position: absolute;
    top: 31%;
    left: 50.5%;
  }

  .flow3 {
    position: absolute;
    top: 36%;
    left: 72%;
  }

  .flow-kyara {
    width: min(calc(400vw / 19.2), 400px);
    bottom: 0;
    right: 7%;
  }

  /* news */
  #news {
    padding: min(calc(70vw / 19.2), 94px) 0;
    position: relative;
    z-index: 30;
  }

  .news-container {
    position: relative;
  }

  .news-title {
    font-size: min(calc(45vw / 19.2), 45px);
    letter-spacing: 0.15vw;
    padding-bottom: min(calc(40vw / 19.2), 40px);
    font-weight: 500;
  }

  .news-title::before {
    content: none;
  }

  .news-title::after {
    content: none;
  }

  .news-kyara {
    width: min(calc(220vw / 19.2), 220px);
    position: absolute;
    top: -16%;
    left: 20%;
  }

  #insta ul {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0 min(calc(12vw / 19.2), 12vw);
    width: min(calc(1200vw / 19.2), 1200px);
    padding: min(calc(12vw / 19.2), 12vw);
  }

  #insta ul li {
    width: min(calc(384vw / 19.2), 384px);
    height: min(calc(384vw / 19.2), 384px);
  }

  .captionTxt {
    padding: min(calc(24vw / 19.2), 24vw);
    font-size: min(calc(20vw / 19.2), 20vw);
  }

  /* footer */
  .guidance {
    padding: min(calc(50vw / 19.2), 50px) 0;
  }

  .guidance::before {
    width: min(calc(50vw / 19.2), 50px);
    height: min(calc(150vw / 19.2), 150px);
    top: min(calc(56vw / 19.2), 56px);
    left: min(calc(510vw / 19.2), 510px);
  }

  .guidance::after {
    width: min(calc(57vw / 19.2), 57px);
    height: min(calc(160vw / 19.2), 160px);
    top: min(calc(56vw / 19.2), 56px);
    right: min(calc(510vw / 19.2), 510px);
  }

  .guidance h4 {
    font-size: min(calc(22vw / 19.2), 22px);
    color: var(--white);
    font-weight: normal;
  }

  .guidance h3 {
    font-size: min(calc(38vw / 19.2), 38px);
    padding: min(calc(15vw / 19.2), 15px) 0;
    letter-spacing: 0.1vw;
  }

  .guidance p {
    font-size: min(calc(18vw / 19.2), 18px);
    padding: 0;
  }

  .footer-button {
    width: min(calc(1054vw / 19.2), 1054px);
    flex-direction: row;
    justify-content: space-between;
    margin: 0 auto min(calc(5vw / 19.2), 5px);
  }

  .tel,
  .mail,
  .line {
    margin-bottom: min(calc(13vw / 19.2), 13px);
  }

  .tel {
    width: min(calc(382vw / 19.2), 382px);
    height: min(calc(85vw / 19.2), 85px);
    border-radius: min(calc(43vw / 19.2), 43px);
    padding: min(calc(12vw / 19.2), 12px) min(calc(42vw / 19.2), 42px)
      min(calc(12vw / 19.2), 12px) min(calc(100vw / 19.2), 100px);
  }

  .tel::before {
    width: min(calc(45vw / 19.2), 45px);
    height: min(calc(50vw / 19.2), 50px);
    top: min(calc(18vw / 19.2), 18px);
    left: min(calc(42vw / 19.2), 42px);
  }

  .tel-box {
    display: block;
  }

  .tel-number {
    font-size: min(calc(36vw / 19.2), 36px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
  }

  .tel-txt {
    font-size: min(calc(17vw / 19.2), 17px);
    letter-spacing: 0;
    padding-top: min(calc(2vw / 19.2), 2px);
    padding-bottom: min(calc(6vw / 19.2), 6px);
  }

  .mail,
  .line {
    width: min(calc(312vw / 19.2), 312px);
    height: min(calc(85vw / 19.2), 85px);
    border-radius: min(calc(43vw / 19.2), 43px);
    padding: min(calc(32vw / 19.2), 32px) min(calc(44vw / 19.2), 44px)
      min(calc(32vw / 19.2), 32px) min(calc(97vw / 19.2), 97px);
  }

  .mail::before {
    width: min(calc(45vw / 19.2), 45px);
    height: min(calc(34vw / 19.2), 34px);
    top: min(calc(23vw / 19.2), 23px);
    left: min(calc(44vw / 19.2), 44px);
  }

  .line::before {
    width: min(calc(48vw / 19.2), 48px);
    height: min(calc(45vw / 19.2), 45px);
    top: min(calc(20vw / 19.2), 20px);
    left: min(calc(44vw / 19.2), 44px);
  }

  .mail > p,
  .line > p {
    font-size: min(calc(18vw / 19.2), 18px);
    font-weight: 600;
    line-height: 1;
  }

  .footer-body {
    width: min(calc(1054vw / 19.2), 1054px);
    margin: 0 auto min(calc(94vw / 19.2), 94px);
    display: flex;
    justify-content: center;
    gap: 0 min(calc(40vw / 19.2), 40px);
  }

  .map {
    margin-bottom: 0;
  }

  .map-pc {
    display: block;
    width: min(calc(704vw / 19.2), 704px);
    height: min(calc(472vw / 19.2), 472px);
  }

  .office-info {
    margin-bottom: 0;
  }

  .office-info-body {
    margin-left: 0;
  }

  .footer-logo img {
    width: min(calc(254vw / 19.2), 254px);
    height: min(calc(180vw / 19.2), 180px);
    margin-bottom: min(calc(12vw / 19.2), 12px);
  }

  .address > p {
    font-size: min(calc(18vw / 19.2), 18px);
    line-height: 1.5;
    font-weight: normal;
  }

  .footer-mof {
    top: min(calc(320vw / 19.2), 320px);
    right: min(calc(30vw / 19.2), 30px);
    width: min(calc(350vw / 19.2), 350px);
    height: min(calc(242vw / 19.2), 242px);
  }

  .footer-mof img {
    width: auto;
  }

  .copyright {
    font-size: min(calc(18vw / 19.2), 18px);
    letter-spacing: min(calc(1vw / 19.2), 1px);
    padding-bottom: min(calc(20vw / 19.2), 20px);
  }

  /* side-button */

  .side-button {
    display: flex;
    flex-direction: column;
    gap: min(calc(20vw / 19.2), 20px) 0;
    position: fixed;
    right: 0;
    top: min(calc(206vw / 19.2), 206px);
    z-index: 200;
  }

  .sb-mail {
    background-color: var(--orange);
    width: min(calc(104vw / 19.2), 104px);
    height: min(calc(308vw / 19.2), 308px);
    border-radius: min(calc(35vw / 19.2), 35px) 0 0 min(calc(35vw / 19.2), 35px);
    position: relative;
  }

  .sb-line {
    background-color: var(--green);
    width: min(calc(104vw / 19.2), 104px);
    height: min(calc(320vw / 19.2), 320px);
    border-radius: min(calc(35vw / 19.2), 35px) 0 0 min(calc(35vw / 19.2), 35px);
    position: relative;
  }

  .side-button a {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    text-decoration: none;
  }

  .side-button p {
    writing-mode: vertical-lr;
    font-size: min(calc(18vw / 19.2), 18px);
    font-weight: 800;
    letter-spacing: min(calc(2.1vw / 19.2), 2.1px);
    line-height: min(calc(16vw / 19.2), 16px);
    color: var(--white);
    padding-left: min(calc(44vw / 19.2), 44px);
  }

  .sb-mail,
  .sb-line {
    transition: 0.3s all;
  }

  .sb-mail:hover,
  .sb-line:hover {
    filter: brightness(105%);
  }

  .sb-mail p {
    margin-top: min(calc(80vw / 19.2), 80px);
  }

  .sb-mail::before {
    content: "";
    width: min(calc(38vw / 19.2), 38px);
    height: min(calc(30vw / 19.2), 30px);
    background-image: url("img/pc/pc_side_mail_icon.webp");
    background-size: cover;
    position: absolute;
    top: min(calc(38vw / 19.2), 38px);
    left: min(calc(34vw / 19.2), 32px);
    pointer-events: none;
  }

  .sb-line p {
    margin-top: min(calc(76vw / 19.2), 76px);
  }

  .sb-line::before {
    content: "";
    width: min(calc(40vw / 19.2), 40px);
    height: min(calc(38vw / 19.2), 38px);
    background-image: url("img/pc/pc_side_line_icon.webp");
    background-size: cover;
    position: absolute;
    top: min(calc(28vw / 19.2), 28px);
    left: min(calc(30vw / 19.2), 32px);
    pointer-events: none;
  }
}