/*reset css*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: inherit;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
blockquote,
dl,
dt,
dd,
ol,
ul,
li,
figure,
hr,
fieldset,
legend {
  margin: 0;
  padding: 0;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
th,
td {
  padding: 0;
}
form,
fieldset,
legend,
button,
input,
select,
optgroup,
option,
textarea,
keygen {
  margin: 0;
}
img,
audio,
video,
canvas,
progress,
meter,
iframe,
svg,
object,
embed {
  display: block;
}
img,
fieldset {
  border: 0;
}
img {
   width: 100%;
   height: auto;
}
button,
input,
select,
textarea,
keygen {
  font: inherit;
}
textarea {
  resize: none;
}
table {
  table-layout: fixed;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
}
button[disabled],
html input[disabled] {
  -webkit-appearance: none;
  appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-appearance: textfield;
  appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
legend {
  border: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: separate;
}
a img {
  border: none;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: none;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  font-size: 2em;
}
mark {
  background: #ff0;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 0;
}
hr {
  box-sizing: content-box;
}

body {
  background-color: #f2eeea;
}

/*ここまでreset css*/

/*ここからDesktop Layout*/
body {
  font-family: "YakuHanJP", "Zen Kaku Gothic New", "Arial", sans-serif;
  font-weight: 400;
  background-image: url("img/bg.png");
  background-size: cover
}
header {
  display: flex;
  align-items: center;
  gap: 80px;
  width: 100%;
  height: auto;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  padding: 16px 48px;
  margin: 0 0;
  background-color: #f2eeea;
}
nav {
  display: flex;
  align-items: center;
  width: 100%;
  white-space: nowrap;
  justify-content: space-between;
}

.nav-items {
  display: flex;
  gap: 56px;
}

.nav-item {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.inquiry-button {
  display: flex;
  padding: 8px 8px 8px 20px;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  border-radius: 56px;
  background: var(--cta, #00B38C);
  width: auto;
  height: auto;
  color: white;
}

nav a:hover {
  color: #00be91;
}
.first-view {
  max-width: 1280px;
  height: auto;
  margin: 160px auto 0px auto;
}
.shoulder-copy {
  display: inline-flex;
  padding: 6px 16px 8px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  background: var(--Bl, #383838);
  color: #fff;
  font-size: clamp(12px, 1.5vw, 20px);
  font-weight: 500;
  line-height: normal;
}
/* 肩コピーの行の高さを詰める */
.shoulder-copy {
  line-height: normal;
}

/* ルビの親文字とルビのサイズ・高さを調整 */
.shoulder-copy ruby {
  font-size: inherit;
  line-height: 1;
}

/* ルビのサイズだけ調整 */
rt {
  font-size: 0.6em;
  line-height: 1;
}
.copy {
position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  max-width: 640px;
  width: 45%;
  height: auto;
  z-index: 888;
  margin-left: 40px;
}
.main-copy {
  color: var(--Bl, #383838);
  font-family: "Zen Kaku Gothic New";
  font-size: clamp(24px, 3vw, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 4px;
  margin: 20px 0;
}
.sub-copy {
  display: flex;
  padding: 16px 16px 24px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: 16px;
  border: 2px solid var(--Pale-Green, #85d3c1);
  background: rgba(255, 255, 255, 0.3);
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  margin-bottom: 24px;
}
.sub-copy-headline {
   font-size: clamp(12px, 1.75vw, 20px);
  font-weight: 700;
  color: #00be91;
  border-bottom: 8px solid #f5ff88;
  line-height: 0.5; /* 下線とテキストの間隔を調整 */
  margin: 12px auto 4px auto;
}
.sub-copy-item-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.sub-copy-item {
  display: flex;
  gap: 8px;
  font-size: 15px;
}
.sub-copy-item i {
  color: #00be91;
}
.copy-above-button {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  width: auto;
  align-items: center; /* 線を上下中央 */
  display: flex; /* 文字と線を横並び */
  justify-content: center; /* 文字を中央寄せ */
}
.copy-above-button::before,
.copy-above-button::after {
   background-color: #383838; /* 線の色 */
   content: "";
   height: 1px; /* 線の高さ */
   width: 20px; /* 線の長さ */
}
.copy-above-button::before {
  margin-right: 8px;
  transform: rotate(60deg);
}
.copy-above-button::after {
  margin-left: 8px;
  transform: rotate(-60deg);
}
.copy-above-button span {
   font-weight: 700;
   font-size: 20px;
   color: #00be91;
}
.cta-button {
  display: flex;
  padding: 18px 22px;
  justify-content: space-between;
  align-items: center;
  border-radius: 56px;
  background: var(--Green, #00be91);
  width: 100%;
  height: auto;
  color: white;
  margin: 8px 0;
}
.cta-button:hover {
  opacity: 0.7;
}
.button-label {
  color: #f5ff88;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  width: 100%;
  margin: auto;
}
.cta-button .arrow_forward {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f5ff88;
  text-align: center;
  padding-top: 2px;
  line-height: 1.5;
  color: #00be91;
}
.caption {
   font-size: 12px;
font-weight: 300;
color: #383838;
}
.fv-img {
   position: absolute;
   right: 0;
   top: 0;
   max-width: 880px;
   width: 70%;
   height: auto;
}
.second-view {
   display: flex;
   width: 100%;
   height: auto;
   justify-content: space-between;
}
.sv-01 {
   width: 40%;
   height: auto;
   object-fit: contain;
}
.sv-02 {
   margin-top: 240px;
   width: 45%;
   height: auto;
   object-fit: contain;
}
#about {
   max-width: 1280px;
   height: auto;
   margin: 200px auto 80px auto;
}
#about,
#human-resources {
  scroll-margin-top: 120px; /* ヘッダーの高さに合わせて調整 */
}
.about-title {
   width: 1600px;
   height: auto;
   gap: 18px;
   color: #383838;
}
.about-title p {
   text-align: right;
}
.about-title-shoulder {
   font-size: clamp(18px, 3vw, 32px);
   margin-bottom: 24px;
}
.about-title-hipro {
   font-size: clamp(28px, 4.5vw, 56px);
   width: 100%;
}
.about-title-hipro-caption {
   font-size: clamp(12px, 1.5vw, 20px);
   font-weight: 300;
}
.about-wrapper {
   gap: 80px;
   width: 100%;
   height: auto;
   padding: 0 40px;
}
.about-copy {
   font-weight: 300;
   font-size: clamp(14px, 2vw, 20px);
   line-height: 2; /* 181.818% */
   width: auto;
}
.about-feature {
   max-width: 880px;
   margin: 80px auto 200px auto;
   padding: 0 40px;
}
.sp {
   display: none;
}
.banner {
   max-width: 1024px;
   margin: 0 auto;
}
.banner img {
   width: 90%;
   margin: 0 auto;
}
.banner02 img {
  width: 90%;
  margin: 40px auto 200px auto;
}
.flyer {
  width: 90%;
  margin: 16px auto 0 auto;
}
.banner:hover {
   opacity: 0.7;
}
.banner02:hover {
  opacity: 0.7;
}
#human-resources {
   max-width: 1280px;
   height: auto;
   margin: 160px auto 0px auto;
}
.human-resources-title {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: auto;
   padding: 80px auto 0px auto;
}
.human-resources-title-copy {
   font-weight: 500;
   font-size: clamp(14px, 2vw, 20px);
   line-height: 1.8; /* 181.818% */
   width: auto;
   margin-bottom: 8px;
   text-align: center;
}
.human-resources-title-caption {
   font-size: clamp(12px, 1.5vw, 20px);
   font-weight: 300;
}
.human-resources-title-data {
   max-width: 960px;
   width: 100%;
   height: auto;
   margin: 56px auto 96px auto;
   padding: 0 20px;
 } 
.human-resources-title-headline {
   font-size: clamp(18px, 4vw, 32px);
   margin-bottom: 24px;
   font-weight: 700;
}
.point-wrapper {
   background-color: #fff;
      display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 90%;
   height: auto;
   padding: 56px;
   max-width: 1024px;
   margin: 0 auto;
   border-radius: 40px;
}
.point-list {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   gap: 16px;
   margin-bottom: 80px;
   width: 100%;
}
.point-list-title {
   font-size: clamp(14px, 2vw, 20px);
   font-weight: 500;
   text-align: center;
}
.point-list-copy {
   font-size: 13px;
}
.number {
   width: 30%;
   height: auto;
}
.point {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 16px;
   width: 33.3333%;
   box-sizing: border-box;
}
.point-title {
   font-size: clamp(18px, 3vw, 32px);
   margin-bottom: 24px;
   font-weight: 700;
   text-align: center;
}
.mov-title {
   font-size: clamp(18px, 3vw, 32px);
   margin: 80px auto 40px auto;
   font-weight: 700;
   text-align: center;
}

/* たぶ　*/

.tab-wrap {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	border-radius: 12px;
}

.tab-label {
	color: #C3C3C3;
	cursor: pointer;
	flex: 1;
	font-weight: bold;
	order: -1;
	padding: 12px 24px;
	position: relative;
	text-align: center;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	user-select: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
   background-color: #fff;
}

.tab-label:hover {
	background: rgba(0, 191, 255,.1);
}

.tab-switch:checked + .tab-label {
	color: #00be91;
}

.tab-label::after {
	background: #00be91;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(100%);
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	width: 100%;
	z-index: 1;
}

.tab-switch:checked ~ .tab-label::after {
	transform: translateX(-100%);
}

.tab-switch:checked + .tab-label::after {
	opacity: 1;
	transform: translateX(0);
}

.tab-content {
	height:0;
	pointer-events:none;
	transform: translateX(-100%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}

.tab-switch:checked ~ .tab-content {
	transform: translateX(100%);
}

.tab-switch:checked + .tab-label + .tab-content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}

.tab-wrap::after {
	content: '';
	height: 20px;
	order: -1;
	width: 100%;
}

.tab-switch {
	display: none;
}

.hipro-direct {
   max-width: 1280px;
   height: auto;
   margin: 160px auto 0px auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}
.hiprodirect-title {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: auto;
   padding: 80px auto 0px auto;
   margin-bottom: 64px;
}
.hiprodirect-title-headline {
   font-size: clamp(18px, 4vw, 32px);
   margin-bottom: 24px;
   font-weight: 700;
}
.hiprodirect-title-copy {
   font-weight: 500;
   font-size: clamp(14px, 2vw, 20px);
   line-height: 1.8; /* 181.818% */
   width: auto;
   margin-bottom: 8px;
   text-align: center;
}
.hiprodirect-structure {
   max-width: 720px;
   width: 80%;
   height: auto;
}
.howtostart {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 48px;
   width: 100%;
   height: auto;
   padding: 0 40px;
   margin: 80px auto;
}
.howtostart-title {
   text-align: right;
   font-size: clamp(18px, 3vw, 32px);
   margin-bottom: 24px;
   font-weight: 700;
}
.steps img{
   margin-bottom: 16px;
}
footer {
   background-color: #fff;
   display: flex;
   padding: 32px 40px;
   gap: 32px;
}
footer .inquiry-button {
   display: flex;
   padding: 8px 8px 8px 20px;
   margin-left: auto;
   gap: 8px;
   justify-content: space-between;
   align-items: center;
   border-radius: 56px;
   background: var(--cta, #00B38C);
   width: 30%;
   height: 100%;
   color: white;
   margin: 8px 0;
 }
 .inquiry-button:hover {
   opacity: 0.7;
 }
 .inquiry-button-label {
   color: #f5ff88;
   text-align: center;
   font-size: 14px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   width: 100%;
   margin: auto;
 }
 .inquiry-button .arrow_forward {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 40px;
   height: 40px;
   aspect-ratio: 1 / 1;
   border-radius: 50%;
   background-color: #f5ff88;
   text-align: center;
   color: #00be91;
   /* padding-top: 2px; 削除して中央揃え */
   line-height: 1;
 }
 .logo {
   display: flex;
   width: 100%;
   justify-content: flex-start;
   align-items: center;
   gap: 8px;
   margin-bottom: 16px;
 }
 .logoimg {
  width: 270px;
 }
 .logo-wrapper {
   width: 70%;
 }
 .companyinfo {
   font-size: clamp(12px, 1.5vw, 15px);
 }
 footer p {
   font-size: 12px;
   font-weight: 300;
 }

/* 959px以下レイアウト */

@media screen and (max-width: 960px) {
   body {
      background-size: contain
   }
    header {
      background-color: #fff;
      gap: 8px;
      width: 100%;
      height: auto;
      z-index: 999;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 16px 16px;
      margin: 0 auto 0 auto;
      order: -1;
    }
    nav {
      display: flex;
      gap: 24px; /* ナビゲーションリンク間のスペース */
      font-size: 14px;
      justify-content: space-between; /* 親アイテムに対して左右均等配置 */
      width: 100%;
    }
    .nav-items {
      display: flex;
      gap: 32px;
    }
    .yamagatalogo {
      width: 120px;
      height: auto;
    }
    .first-view {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
   .fv-img {
      order: 0;
      position: relative;
      text-align: right;
      width: 100%;
      height: auto;
    }
    .first-view .fv-img img{
      width: 80%;
      height: auto;
      position: absolute;
      right: 0;
      top: -50px;

    }
    .copy {
      max-width: 756px;
      order: 1;
      width: auto;
      overflow: hidden;
      height: auto;
      margin: 65% 16px 0 16px;
      display: flex;
      justify-content: center;
    }
    .main-copy {
      font-size: 28px;
      margin: 12px 0 20px 0;
      letter-spacing: 4px;
    }
    .shoulder-copy {
      display: inline-flex;
      padding: 6px 16px 8px 16px;
      justify-content: center;
      align-items: center;
      border-radius: 40px;
      font-size: 16px;
    }
    .sub-copy-headline {
       font-size: 20px;
      margin: 4px auto 4px auto;
      text-align: center;
      line-height: 1.5;
    }
    .sub-copy-item-wrapper {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .sub-copy-item {
      display: flex;
      gap: 8px;
      width: auto;
    }
    .part1::after {
      content: "\A";
      white-space: pre;
    }
    .caption {
       font-size: 10px;
    }
    .copy-above-button {
      font-size: 13px;
    }
    .copy-above-button span {
      font-size: 18px;
   }
   .sv-01 {
      width: 50%;
      height: auto;
      object-fit: contain;
   }
   .sv-02 {
      margin-top: 160px;
      width: 47%;
      height: auto;
      object-fit: contain;
   }
   #about {
      margin: 48px auto 0px auto;
   }
   .about-title {
      gap: 8px;
      margin-bottom: 12px;
   }
   .about-title p {
      text-align: left;
   }
   .about-title-shoulder {
      font-size: 20px;
      margin-bottom: 4px;
   }
   .about-title-hipro {
      font-size: 40px;
   }
   .about-title-hipro-caption {
      font-size: 14px;
   }
   .about-wrapper {
      display: block;
      gap: 48px;
      width: 100%;
      height: auto;
      padding: 0 16px;
   }
   .about-copy {
      font-weight: 300;
      font-size: clamp(14px, 2vw, 20px);
      line-height: 2; /* 181.818% */
      width: auto;
   }
   .about-feature {
      margin: 24px auto 80px auto;
      padding: 0 16px;
   }
   .desktop {
      display: none;
   }
   .sp {
      display: block;
   }
   #human-resources {
      margin: 56px auto 0px auto;
   }
   .human-resources-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: auto;
      padding: 80px 16px 0px 16px;
   }
   .human-resources-title-copy {
      font-size: 16px;
      line-height: 1.8; /* 181.818% */
      width: auto;
      margin-bottom: 8px;
      text-align: center;
   }
   .human-resources-title-caption {
      font-size: 12px;
   }
   .human-resources-title-data {
      margin: 40px 0;
      padding: 0 0;
    } 
   .human-resources-title-headline {
      text-align: center;
      font-size: 20px;
      margin-bottom: 12px;
      font-weight: 700;
   }
   .point-wrapper {
      width: auto;
      padding: 40px 16px 16px 16px;
      margin: 0 16px;
      border-radius: 24px;
   }
   .point-list {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
      margin-bottom: 80px;
   }
   .point-list-title {
      font-size: 20px;
      margin-bottom: 8px;
   }
   .point-list-copy {
      font-size: 15px;
   }
   
   .number {
      width: 20%;
      height: auto;
   }
   .point {
      gap: 0;
      width: 100%;
   }
   .point-title {
      font-size: 20px;
      margin-bottom: 24px;
   }
   .tab-label {
      padding: 12px 8px;
      font-size: 13px;
      vertical-align: middle;
   }
   .hiprodirect-title-copy {
      font-weight: 500;
      font-size: 16px;
      line-height: 1.8; /* 181.818% */
      width: auto;
      margin-bottom: 8px;
      text-align: center;
   }
   .hiprodirect-title-headline {
      text-align: center;
      font-size: 20px;
      margin-bottom: 12px;
   }
   .hiprodirect-structure {
      width: 90%;
      height: auto;
   }
   .howtostart {
      display: block;
   }
   .howtostart-title {
      text-align: center;
      font-size: 20px;
      margin-bottom: 24px;
   }
   .steps {
      width: 100%;
   }
   footer {
      background-color: #fff;
      display: block;
      padding: 32px 16px;
      gap: 8px;
      margin: 0 auto;
      text-align: center;
   }
   .inquiry-button {
      width: 100%;
      padding: 4px 4px 4px 12px;
    }
    footer .inquiry-button {
      width: 100%;
      padding: 4px 4px 4px 12px;
    }
    .inquiry-button .arrow_forward {
      width: 32px;
      height: 32px;

    }
    .logo {
      display: block;
      width: 100%;
      justify-content: center;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
      margin: 0 auto 12px auto;
    }
    .logo-wrapper {
      width: 100%;
      margin: 0 auto 16px auto;

    }
    .logoimg {
      width: 70%;
      margin: 0 auto 4px auto;
    }
    .companyinfo {
      font-size: 12px;
      margin-bottom: 12px;
    }
    footer p {
      font-size: 12px;
      font-weight: 300;
    }
    .sub-copy {
      padding: 8px 12px 20px 12px;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      align-self: stretch;
      border-radius: 16px;
      border: 2px solid var(--Pale-Green, #85d3c1);
      background: rgba(255, 255, 255, 0.3);
      justify-content: center;
      align-items: center;
      height: auto;
      width: 100%;
      margin-bottom: 24px;
    }
   
}

.case-studies {
  display: flex;
  gap: 40px;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
}

.case-study {
  width: 50%;
  max-width: 560px;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9のアスペクト比 */
  margin-bottom: 20px;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.case-study-text {
  text-align: center;
}

.case-study-text h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #383838;
}

.case-study-text p {
  font-size: 16px;
  line-height: 1.6;
  color: #383838;
}

@media screen and (max-width: 960px) {
  .case-studies {
    flex-direction: column;
    align-items: center;
  }

  .case-study {
    width: 100%;
    max-width: 100%;
  }
}

/* 肩コピーのベースライン揃え＆ルビ調整 */
.shoulder-copy {
  display: inline-block !important;
  line-height: 1 !important;
  vertical-align: baseline !important;
  font-size: 20px;
  font-family: "Zen Kaku Gothic New", "Meiryo", sans-serif;
  font-weight: 500;
  background: #383838;
  color: #fff;
  border-radius: 40px;
  padding: 16px 32px; /* 上下16pxに変更 */
  letter-spacing: 0.1em;
}

.shoulder-copy ruby {
  line-height: 1;
}

.shoulder-copy rt {
  font-size: 0.6em;
  line-height: 1;
}