@charset "UTF-8";

/*
breakpoint
--------------------------------------------------
[mobile first]
mobile・tablet：900px以下 スマートフォン（縦・横）、タブレット（縦）
tablet・desktop：901px以上 タブレット（横）、デスクトップ (min-width: 901px)

[pc first]
tablet・desktop：901px以上 タブレット（横）、デスクトップ 
mobile・tablet：900px以下 スマートフォン（縦・横）、タブレット（縦）(max-width: 900px)
*/

/*
variable
--------------------------------------------------
*/
/*
variable > color
--------------------------------------------------
*/
:root {
  --color-text-black: #222;
  --color-text-white: #fff;
  --color-text-blue: #0077c1;
  --color-text-green: #029439;

  --color-bg-black: #222;
  --color-bg-white: #fff;
  --color-bg-blue: #0077c1;
}

/*
variable > content-width
--------------------------------------------------
*/
:root {
  --width-content-950: 950px;
  --width-content-1060: 1060px;
  --width-content-1200: 1200px;
}

/*
variable > font
--------------------------------------------------
*/
@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 400;
  src: url("../font/NotoSansJP/NotoSansJP-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 600;
  src: url("../font/NotoSansJP/NotoSansJP-Medium.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 700;
  src: url("../font/NotoSansJP/NotoSansJP-Bold.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 900;
  src: url("../font/NotoSansJP/NotoSansJP-Black.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "GenJyuuGothicX";
  font-style: normal;
  font-weight: 400;
  src: url("../font/GenJyuuGothicX/GenJyuuGothicX-Regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  src: url("../font/Barlow/Barlow-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  --font-family-hiragino: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-family-noto-sans: "NotoSansJP", sans-serif;
  --font-family-genJyuu-gothic-x: "GenJyuuGothicX", sans-serif;
  --font-family-barlow: "Barlow", sans-serif;
}

/*
variable > font size
--------------------------------------------------
*/
:root {
  --font-size14: calc(14 / 16 * 1rem);
  --font-size16: calc(16 / 16 * 1rem);
  --font-size18: calc(18 / 16 * 1rem);
  --font-size20: calc(20 / 16 * 1rem);
  --font-size22: calc(22 / 16 * 1rem);
  --font-size24: calc(24 / 16 * 1rem);
  --font-size26: calc(26 / 16 * 1rem);
  --font-size28: calc(28 / 16 * 1rem);
  --font-size30: calc(30 / 16 * 1rem);
}

/*
variable > z-index
--------------------------------------------------
*/
:root {
  --z-index-100: 100;
  --z-index-50: 50;
  --z-index-10: 10;
  --z-index-1: 1;
}

/*
reset
--------------------------------------------------
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}
/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding: 0;
}
input, select {
    vertical-align: middle;
}

/*
base
--------------------------------------------------
*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
@media screen and (min-width: 901px) {
  html {
    scroll-padding-top: 20px;
  }
}

body {
  line-height: 1.8;
  font-size: 15px;
  color: var(--color-text-base);
  font-family: var(--font-family-genJyuu-gothic-x);
}
body.home {
  background: url(../img/top/top-bg-sp.png) left top no-repeat;
  background-size: contain;
  /* backdrop-filter: blur(10px);
  animation: blur 1s ease-in-out forwards; */
}
/* @keyframes blur{
  0% {
    backdrop-filter:blur(10px);
  }
  50% {
    backdrop-filter:blur(5px);
  }
  100% {
    backdrop-filter:none;
  }
} */
@media screen and (min-width: 901px) {
  body.home {
    font-size: var(--font-size16);
    background: url(../img/top/top-bg-pc.png) left top no-repeat;
    background-size: contain;
    /* opacity: 0;
    animation: fade-in-02 5s forwards; */
  }
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}
a {
  color: var(--color-text-black);
  text-decoration: none;
  transition: all .3s ease-in-out;
}
a:hover {
  opacity: .7;
}
a[href^="tel:"] {
    pointer-events: auto;
}
@media screen and (min-width: 901px) {
    a[href^="tel:"] {
        pointer-events: none;
    }
}
a[target=_blank] {
	position: relative;
  padding-right: 20px;
  color: var(--color-text-blue);
}
a[target=_blank]::after {
  content: "";
  background: url(../img/common/eternal-link.svg) no-repeat;
  display: inline-block;
  width: 18px;
  height: 18px;
  position: absolute;
  right: -5px;
  top: 2px;
}

/*
utility
--------------------------------------------------
*/
@media screen and (min-width: 901px) {
  .u-sp {
    display: none !important;
  }
}
.u-pc {
  display: none !important;
}
@media screen and (min-width: 901px) {
  .u-pc {
    display: block !important;
  }
}

/*
utility > text
--------------------------------------------------
*/
.u-text-center {
  text-align: center !important;
}
.u-text-left {
  text-align: left !important;
}
.u-text-right {
  text-align: right !important;
}
.u-text-bold {
  font-weight: 700 !important;
}

/*
utility > google map youtube
--------------------------------------------------
*/
.u-embed {
  aspect-ratio: 16/9;
}
.u-embed iframe {
  width:100%;
  height: 100%;
}

/*
utility > grayscale
--------------------------------------------------
*/
.u-grayscale:hover {
  filter: grayscale(1);
}

/*
utility > flashing
--------------------------------------------------
*/
.u-flashing:hover {
  animation: flashing 1s ease-in-out forwards;
}
@keyframes flashing {
  0% {
    opacity: 1;
  }
  5% {
    opacity: .6;
  }
  100% {
    opacity: 1;
  }
}

/*
component
--------------------------------------------------
*/
/*
component > button
--------------------------------------------------
*/
.c-button-radius10 a {
  color: var(--color-text-white);
  width: 300px;
  height: 100px;
  background-color: var(--color-bg-black);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-button-radius10 a::after {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  margin-left: 10px;
}

/*
component > arrow
--------------------------------------------------
*/
.c-arrow {
  font-family: var(--font-family-noto-sans);
  padding-left: 20px;
  position: relative;
}
.c-arrow::after {
  content: "\f061";
  font-family: "FontAwesome";
  color: var(--color-text-blue);
  position: absolute;
  left: 0;
}
.c-arrow-r {
  font-family: var(--font-family-noto-sans);
  position: relative;
}
.c-arrow-r::after {
  content: "\f061";
  font-family: "FontAwesome";
  color: var(--color-text-blue);
  position: absolute;
  right: 0;
}
.c-arrow-l {
  font-family: var(--font-family-noto-sans);
  position: relative;
  padding-left: 20px;
}
.c-arrow-l::after {
  content: "\f061";
  font-family: "FontAwesome";
  color: var(--color-text-blue);
  position: absolute;
  left: 0;
}

/*
component > title
--------------------------------------------------
*/
.c-title-level2 {
  display: block;
  font-size: var(--font-size24);
  font-weight: 400;
  margin-bottom: 50px;
  text-align: center;
}
@media screen and (min-width: 901px) {
  .c-title-level2 {
    font-size: var(--font-size26);
  }
}

.c-title-level2::before {
	content: "";
	width: 2px;
	height: 24px;
	background-color: var(--color-text-green);
	margin: 0 auto 15px;
	display: block;
}
.c-title-level3 {
  border-bottom: 1px solid #ddd;
  font-size: var(--font-size22);
  font-weight: 400;
  margin-bottom: 40px;
  padding-bottom: 20px;
}
@media screen and (min-width: 901px) {
  .c-title-level3 {
    font-size: var(--font-size24);
    margin-bottom: 60px;
  }
}

.c-title-level4 {
  display: flex;
	align-items: center;
  font-size: var(--font-size20);
  font-weight: 400;
  margin-bottom: 25px;
}
.c-title-level4::before {
	content: '';
	width: 20px;
	height: 1px;
	background-color: var(--color-text-green);
  margin-right: 10px;
}

/*
component > list
--------------------------------------------------
*/
.c-list li {
  display: flex;
	align-items: center;
  margin-bottom: 5px;
}
.c-list li::before {
	content: '';
	width: 10px;
	height: 2px;
	background-color: var(--color-text-green);
  margin-right: 5px;
}

/*
component > external-link
--------------------------------------------------
*/
/* .c-external-link {
  color: var(--color-text-blue);
  position: relative;
  padding-right: 20px;
}
.c-external-link::after {
  content: "";
  background: url(../img/common/eternal-link.svg) no-repeat;
  display: inline-block;
  width: 18px;
  height: 18px;
  position: absolute;
  right: -5px;
  top: 2px;
} */

/*
component > table
--------------------------------------------------
*/
.c-table {
  width: 100%;
}
.c-table tr:nth-child(odd) th,
.c-table tr:nth-child(odd) td {
  background-color: #f4f7f5;
}
.c-table th {
  color: var(--color-text-green);
  font-weight: normal;
  text-align: left;
  padding: 15px 20px 10px;
}
@media screen and (min-width: 901px) {
  .c-table th {
    text-align: center;
    padding: 10px 0;
    vertical-align: middle;
    width: 120px;
    box-sizing: border-box;
  }
}

.c-table td {
  padding: 0 20px 15px;
}
@media screen and (min-width: 901px) {
  .c-table td {
    padding: 10px 20px 10px 0;
    vertical-align: middle;
  }
}

@media screen and (min-width: 901px) {
  /* .c-table th span {
    border-right: 1px solid #bcbcbc;
    display: block;
    padding: 10px 10px 10px 0;
  } */
   .c-table td span {
    border-left: 1px solid #bcbcbc;
    display: block;
    padding: 10px 20px 10px 30px;
  }
}

.c-table th,
.c-table td {
  display: block;
}
@media screen and (min-width: 901px) {
  .c-table th,
  .c-table td {
    display: table-cell;
  }
}

/*
component > navigation
--------------------------------------------------
*/
.c-navigation {
  margin-top: 50px;
}
.c-navigation__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 40px;
}
.c-navigation__item {
  min-width: 80px;
  text-align: center;
}
.c-navigation__item:first-child a,
.c-navigation__item:last-child a {
  position: relative;
}
.c-navigation__item:first-child a::before {
  content: "\f060";
  font-family: "FontAwesome";
  color: var(--color-text-blue);
  position: absolute;
  left: -19px;
  top: -1px;
}
.c-navigation__item:last-child a::after {
  content: "\f061";
  font-family: "FontAwesome";
  color: var(--color-text-blue);
  position: absolute;
  right: -19px;
  top: -1px;
}

/*
component > column
--------------------------------------------------
*/
.c-column2 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
@media screen and (min-width: 901px) {
  .c-column2 {
    gap: 48px;
  }
}

.c-column2 > * {
  width: calc((100% - 20px) / 2);
}
@media screen and (min-width: 901px) {
  .c-column2 > * {
   width: calc((100% - 48px) / 2);
  }
}
.c-column3 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.c-column3 > * {
  width: calc((100% - 20px) / 2);
}
@media screen and (min-width: 901px) {
  .c-column3 > * {
    width: calc((100% - 40px) / 3);
  }
}

.c-column4 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.c-column4 > * {
  width: calc((100% - 20px) / 2);
}
@media screen and (min-width: 901px) {
  .c-column4 > * {
    width: calc((100% - 60px) / 4);
  }
}

.c-column5 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.c-column5 > * {
  width: calc((100% - 20px) / 2);
}
@media screen and (min-width: 600px) {
  .c-column5 > * {
    width: calc((100% - 40px) / 3);
  }
}
@media screen and (min-width: 901px) {
  .c-column5 > * {
    width: calc((100% - 80px) / 5);
  }
}

/*
component > image-box
--------------------------------------------------
*/
@media screen and (min-width: 901px) {
  .c-img-box {
    display: flex;
    gap: 0 40px;
  }
}

.c-img-box__image {
  margin-bottom: 20px;
}
@media screen and (min-width: 901px) {
  .c-img-box__image {
    flex: 1;
    margin-bottom: 0;
  }
}

.c-img-box__image img {
    width: 100%;
}

@media screen and (min-width: 901px) {
  .c-img-box__text {
    flex: 1;
  }
}

@media screen and (min-width: 901px) {
  .c-img-box--reverse {
    flex-direction: row-reverse;
  }
}

/*
component > animation
--------------------------------------------------
*/

.c-fade {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1s,visibility 1s, transform 1s;
}
.c-scroll {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.c-fade__td1-5 {
  transition-duration: 1.5s;
}
.c-fade__td2 {
  transition-duration: 2s;
}
.c-fade__td2-5 {
  transition-duration: 2.5s;
}
.c-animation-left {
  animation: fade-in-left 1s ease 1s 1 normal backwards;
}
@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.c-animation-bottom {
  animation: fade-in-bottom 1s ease 1s 1 normal backwards;
}
@keyframes fade-in-bottom {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.c-animation-fade {
  animation: fade-in 1s ease 1s 1 normal backwards;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.c-bar {
  position: relative;
  overflow: hidden;
}
.c-bar::before {
  content: "";
  display: inline-block;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: var(--color-text-green);
}
.c-scroll .c-bar::before {
  animation: bar forwards 1.5s 1 ease 0.1s normal;
}
.c-bar img {
  opacity: 0;
  transform: scale(1.1);
}
.c-scroll .c-bar img {
  animation: bar-image forwards 1.5s 1 ease 0.5s normal;
}
@keyframes bar{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
	}
}
@keyframes bar-image {
	0% {
    opacity: 0;
    transform: scale(1.1);
  }
	50% {
    opacity: 0;
    transform: scale(1.1);
  }
	100% {
    opacity: 1;
    transform: scale(1);
  }
}
.c-blur {
  transition: filter 0.3s linear;
  filter: blur(2px);
}

/*
layout
--------------------------------------------------
*/
/*
layout > container
--------------------------------------------------
*/
.l-container-950,
.l-container-1060,
.l-container-1200 {
  width: 90%;
  margin: 0 auto;
}
@media screen and (min-width: 901px) {
  .l-container-950,
  .l-container-1060,
  .l-container-1200 {
    width: 95%;
  }
}

.l-container-1200 .l-container-950 {
  width: 100%;
}
.l-container-950 {
  max-width: var(--width-content-950);
}
.l-container-1060 {
  max-width: var(--width-content-1060);
}
.l-container-1200 {
  max-width: var(--width-content-1200);
}

/*
layout > header
--------------------------------------------------
*/
.header {
  height: 80px;
  position: sticky;
  top: 0;
  left: 0;
  /* margin-bottom: 70px; */
  transition: all 0.5s;
  z-index: var(--z-index-100);
}
@media screen and (min-width: 901px) {
  .header {
    height: 100px;
    position: static;
    /* margin-bottom: 135px; */
  }
}

.header.scroll {
  background-color: rgba(255, 255, 255, 0.5);
  height: 80px;
}
@media screen and (min-width: 901px) {
  .header.scroll {
    background-color: transparent;
    height: 100px;
  }
}

.header-logo {
  margin-right: auto;
  width: 80%;
}
@media screen and (min-width: 901px) {
  .header-logo {
    width: 24%;
  }
}

.header__inner {
  display: flex;
  align-items: center;
  height: 80px;
}
@media screen and (min-width: 901px) {
  .header__inner {
    height: 100px;
  }
}

/*
layout > header > global-nav
--------------------------------------------------
*/
.hamburger-menu {
  display: block;
  /* position: fixed; */
  position: sticky;
  z-index: 3;
  right: 10px;
  top: 20px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger-menu span {
  display: block;
  position: absolute;
  width: 30px;
  height: 2px ;
  left: 6px;
  background-color: var(--color-bg-black);
  transition: all 0.3s ease-in-out;
}
.header.scroll .hamburger-menu span {
  background-color: var(--color-bg-blue);
}
.hamburger-menu span:nth-child(1) {
  top: 10px;
}
.hamburger-menu span:nth-child(2) {
  top: 20px;
}
.hamburger-menu span:nth-child(3) {
  top: 30px;
}
.hamburger-menu.active span:nth-child(1) {
  top: 16px;
  left: 6px;
  background-color:var(--color-bg-blue);
  transform: rotate(-45deg);
}
.hamburger-menu.active span:nth-child(2),
.hamburger-menu.active span:nth-child(3) {
  top: 16px;
  background-color:var(--color-bg-blue);
  transform: rotate(45deg);
}
.home .hamburger-menu span {
  background-color: var(--color-bg-white);
}
.global-nav {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  color: var(--color-text-black);
  background-color: #ECF5EF;
  width: 100%;
  transform: translateX(-100%);
  transition: all 0.6s;
  height: 100%;
  overflow-y: auto;
}
@media screen and (min-width: 901px) {
  .global-nav {
    position: relative;
    top: -10px;
    color: var(--color-text-black);
    background-color: transparent;
    transform: none;
    transition: none;
    width: 59.3%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column-reverse;
    height: auto;
  }
}

.home .global-nav {
  color: var(--color-text-white);
}

.global-nav.active {
  opacity: 100;
  display: block;
  transform: translateX(0%);
}
.global-nav__list {
  margin: 80px auto 30px;
  padding: 0;
  width: 90%;
}
@media screen and (min-width: 901px) {
  .global-nav__list {
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}

.global-nav__item {
  padding: 0;
  width: 100%;
  transition: .4s all;
  border-bottom: 1px solid #ccc;
}
@media screen and (min-width: 901px) {
  .global-nav__item {
    transition: none;
    border-bottom: none;
    width: auto;
  }
}

.global-nav__item:last-child {
  padding-bottom: 0;
}
.global-nav__link {
  display: block;
  color: var(--color-text-black);
  padding: 1em 0;
}
@media screen and (min-width: 901px) {
  .global-nav__link {
    padding: 0;
  }
  .home .global-nav__link {
    color: var(--color-text-white);
  }
  .global-nav__link.c-arrow-r {
    padding-left: 0;
    position: static;
  }
  .global-nav__link.c-arrow-r::after {
    content: "";
  }
}

.local-nav__list {
  margin: 0 auto;
  padding: 0;
  width: 90%;
}
@media screen and (min-width: 901px) {
  .local-nav__list {
    width: 100%;
    display: flex;
    gap: 0 20px;
    justify-content: right;
    align-items: center;
  }
}

.local-nav__item {
  margin-bottom: 20px;
}
@media screen and (min-width: 901px) {
  .local-nav__item {
    margin-bottom: 0;
  }
}

.local-nav__item:first-child .local-nav__link {
  display: block;
}
.local-nav__item:last-child {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.local-nav__number {
  color: var(--color-text-blue);
  font-family: var(--font-family-barlow);
  font-size: var(--font-size26);
  margin-left: 10px;
}
@media screen and (min-width: 901px) {
  .home .local-nav__number {
    color: var(--color-text-white);
  }
}

@media screen and (min-width: 901px) {
  .home .local-nav__link {
    color: var(--color-text-white);
  }
}

@media screen and (min-width: 901px) {
  .local-nav__link.c-arrow-l {
    padding-left: 0;
    position: static;
  }
  .local-nav__link.c-arrow-l::after {
    content: "";
  }
}

.global-nav.active .local-nav__item {
  color: var(--color-bg-black);
}

/*
layout > main
--------------------------------------------------
*/
.main {
  margin-bottom: 60px;
}
@media screen and (min-width: 901px) {
  .main {
    margin-bottom: 230px;
  }
}

@media screen and (min-width: 901px) {
  .main__inner{
    display: flex;
    flex-direction: row-reverse;
  }
}

.main-nav {
  margin-top: 70px;
}
@media screen and (min-width: 901px) {
  .main-nav {
    margin: 0 auto 0 0;
    width: 16.6%;
  }
}

.main-nav__title {
  font-size: var(--font-size18);
  margin-bottom: 5px;
}
@media screen and (min-width: 901px) {
  .main-nav__title {
    margin-bottom: 25px;
  }
}

.main-nav__item {
  border-bottom: 1px solid #ccc;
}
@media screen and (min-width: 901px) {
  .main-nav__item {
   border-bottom: none;
   margin-bottom: 10px;
  }
}

.main-nav__link {
  display: block;
  padding: 15px 0 15px 26px;
}
@media screen and (min-width: 901px) {
  .main-nav__link {
    padding: 0 0 0 26px;
  }
}

.main-nav__link {
  display: flex;
	align-items: center;
  padding-left: 0;
}
.main-nav__link::before {
	content: '';
	width: 16px;
	height: 1px;
	background-color: var(--color-text-white);
  margin-right: 10px;
}
.main-nav__link:hover {
	color: var(--color-text-blue);
}
.main-nav__link:hover::before {
	content: '';
	width: 16px;
	height: 1px;
	background-color: var(--color-text-blue);
  margin-right: 10px;
}

.main-nav__link.current {
  color: var(--color-text-blue);
  display: flex;
	align-items: center;
  padding-left: 0;
}
.main-nav__link.current::before {
	content: '';
	width: 16px;
	height: 1px;
	background-color: var(--color-text-blue);
  margin-right: 10px;
}

@media screen and (min-width: 901px) {
  .main-nav__link.c-arrow-r {
    position: static;
  }
  .main-nav__link.c-arrow-r::after {
    content: "";
  }
}

/*
layout > footer
--------------------------------------------------
*/
.footer {
  margin-bottom: 50px;
}

@media screen and (min-width: 901px) {
.footer__container {
  margin-bottom: 10px;
}
}

@media screen and (min-width: 901px) {
  .footer__inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
  }
}

.footer__image {
  margin-bottom: 40px;
  text-align: center;
}
@media screen and (min-width: 901px) {
  .footer__image {
    width: 19.6%;
    margin-bottom: 0;
  }
}

@media screen and (min-width: 901px) {
  .footer__text {
    width: 80.4%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.footer__name {
  font-size: var(--font-size14);
  margin-bottom: 15px;
  text-align: center;
}
@media screen and (min-width: 901px) {
  .footer__name {
    margin: 0 20px 0 0;
  }
}

.footer__address {
  font-size: var(--font-size14);
  margin-bottom: 10px;
  text-align: center;
}
@media screen and (min-width: 901px) {
  .footer__address {
    margin: 0 20px 0 0;
  }
}

.footer__tel {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family-barlow);
  font-size: var(--font-size22);
  margin-bottom: 15px;
}
@media screen and (min-width: 901px) {
  .footer__tel {
    margin-bottom: 0;
  }
}

.footer__tel-number {
  color: var(--color-text-green);
  font-family: var(--font-family-barlow);
  font-size: var(--font-size30);
  margin-left: 15px;
}
@media screen and (min-width: 901px) {
  .footer__tel-number {
    position: relative;
    top: -2px;
  } 
}

.footer__copyright {
  display: block;
  font-size: 13px;
  text-align: center;
}

/*
layout > footer > footer-nav
--------------------------------------------------
*/
@media screen and (min-width: 901px) {
  .footer-nav {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
    margin-bottom: 15px;
  }
  .footer-nav__list {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .footer-nav__item {
    border-right: 1px solid #ddd;
    padding-right: 15px;
    font-size: 14px;
  }
  .footer-nav__item:last-child {
    border-right: none;
    padding-right: none;
  }
}

/*
.breadcrumb
--------------------------------------------------
*/
.breadcrumb__list {
  font-size: 13px;
  white-space: nowrap;
  word-break: keep-all;
  overflow-x: auto;
  display: flex;
  margin: 10px 0 50px;
 }
.breadcrumb__item:not(:last-of-type)::after {
    content: "＞";
    margin: 0 10px;
}

/*
page > top
--------------------------------------------------
*/
.top-lead {
  margin-bottom: 50px;
}
@media screen and (min-width: 901px) {
  .top-lead {
    margin-bottom: 115px;
  }
}

.top-lead__title {
  color: var(--color-text-white);
  font-family: var(--font-family-noto-sans);
  font-size: var(--font-size18);
  font-weight: 400;
  letter-spacing: .3em;
  line-height: 2.5;
  margin: 70px 0 140px;
  text-decoration: underline 1px;
  text-underline-offset: 16px;
}
@media screen and (min-width: 901px) {
  .top-lead__title {
    font-size: var(--font-size30);
    margin: 135px 0 240px;
    text-underline-offset: 24px;
  }
}

.top-lead__sentence {
  margin-bottom: 15px;
  text-shadow: 0 0 5px #fff;
}
@media screen and (min-width: 901px) {
  .top-lead__sentence {
    font-size: var(--font-size22);
    margin-bottom: 35px;
    line-height: 2;
  }
}

.top-latest-news,
.top-exhibition-information {
  margin-bottom: 50px;
}
.top-latest-news .l-container-1060,
.top-exhibition-information .l-container-1060 {
  border: 1px solid var(--color-text-blue);
  box-sizing: border-box;
  padding-top: 20px;
  background-color: var(--color-bg-white);
  position: relative;
}
@media screen and (min-width: 901px) {
  .top-latest-news .l-container-1060,
  .top-exhibition-information .l-container-1060 {
    padding-top: 50px;
  }
}

.top-information__container {
  max-width: 90%;
  margin: 0 auto;
}
@media screen and (min-width: 901px) {
  .top-information__container {
    max-width: 900px;
  }
}

.information-list {
  margin-bottom: 40px;
}
.information-list__item {
  padding: 10px;
}
.information-list__item:nth-child(even) {
  background-color: #eff5f8;
}
.information-list__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media screen and (min-width: 901px) {
  .information-list__link {
    flex-wrap: nowrap;
  }
}

.information-list__date {
  width: 80px;
}
.information-list__category {
  width: 140px;
  margin-left: 10px;
}
@media screen and (min-width: 901px) {
  .information-list__category {
    margin-left: 30px;
  }
}

.information-list__title {
  width: 100%;
}
@media screen and (min-width: 901px) {
  .information-list__title {
    margin-left: 40px;
  }
}

@media screen and (min-width: 901px) {
  .information-list--exhibition-information .information-list__item {
    display: flex;
  }
  .information-list--exhibition-information .information-list__item p:nth-child(1) {
    flex: 1;
  }
  .information-list--exhibition-information .information-list__item p:nth-child(2) {
    flex: 3;
  }
  .information-list--exhibition-information .information-list__item p:nth-child(3) {
    flex: 5;
  }
}

.top-information__sentence {
  margin-bottom: 40px;
}

.top-latest-news__link-text {
  text-align: right;
}

/* .top-latest-news__link-text {
  position: absolute;
  right: 15px;
  bottom: 2px;
} */
/* .top-latest-news__link {
  position: relative;
  background-color: #0077c1;
  color: var(--color-text-white);
  padding: 5px 15px 5px 40px;
  position: relative;
  right: -15px;
  top: -2px;
}
.top-latest-news__link::before {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  border: none;
  border-left: 1em solid var(--color-text-white);
  border-bottom: 2em solid transparent;
}
.top-latest-news__link.c-arrow::after {
  color: var(--color-text-white);
  left: 18px;
  top: 3px;
} */
.top-business-information {
  margin-bottom: 200px;
  position: relative;
}
@media screen and (min-width: 901px) {
  .top-business-information {
    margin-bottom: 260px;
  }
}

@media screen and (min-width: 901px) {
  .top-business-information .l-container-1060 {
    position: relative;
  }
}

.top-business-information__container {
  border: 1px solid var(--color-text-green);
  box-sizing: border-box;
  padding: 30px 25px 20px 130px;
}
@media screen and (min-width: 901px) {
  .top-business-information__container {
    max-width: 920px;
    margin-left: 140px;
    padding: 50px 40px 25px 190px;
  }
}

@media screen and (min-width: 901px) {
  .top-business-information__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0 38px;
    max-width: 688px;
    margin: 0 auto;
  }
}

.top-business-information__contents {
  margin-bottom: 30px;
}
@media screen and (min-width: 901px) {
  .top-business-information__contents {
    width: 46%;
  }
}

.top-business-information__image img {
  width: 100%;
}
.top-business-information__title {
  background-color: #029439;
  color: var(--color-text-white);
  font-size: var(--font-size26);
  line-height: 1;
  width: 120px;
  height: 120px;
  text-align: center;
  position: absolute;
  top: 30px;
  left: 0;
}
@media screen and (min-width: 901px) {
  .top-business-information__title {
    font-size: 50px;
    width: 280px;
    height: 260px;
    top: 50px;
  }
}

.top-business-information__title-ja {
  font-size: var(--font-size16);
}
@media screen and (min-width: 901px) {
  .top-business-information__title-ja {
   font-size: var(--font-size26);
  }
}

.top-business-information__title-en {
  font-family: var(--font-family-barlow);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.top-business-information__title-02 {
  color: var(--color-text-blue);
  font-size: var(--font-size16);
  font-weight: 400;
  margin: 5px 0 8px;
}
@media screen and (min-width: 901px) {
  .top-business-information__title-02 {
    font-size: var(--font-size22);
  }
}

.top-business-information__sentence {
  margin-bottom: 5px;
}
.top-business-information__link {
  font-size: var(--font-size16);
}
.top-recruitment-information {
  margin-bottom: 95px;
}
@media screen and (min-width: 901px) {
  .top-recruitment-information {
    margin-bottom: 180px;
  }
}

.top-recruitment-information__inner {
    background-color: #ecf5ef;
    margin-right: 20px;
}
@media screen and (min-width: 901px) {
  .top-recruitment-information__inner {
    display: flex;
    margin-right: 50px;
  }
}

.top-recruitment-information__image {
  position: relative;
  top: -130px;

  width: 80%;
}
@media screen and (min-width: 901px) {
  .top-recruitment-information__image {
    width: 47.6%;
  }
}

.top-recruitment-information__image img {
  width: 80%;

  width: 100%;
}
@media screen and (min-width: 901px) {
  .top-recruitment-information__image img {
    width: 100%;
  }
}

.top-recruitment-information__contents {
  margin-top: -90px;
  padding: 0 20px 50px;
}
@media screen and (min-width: 901px) {
  .top-recruitment-information__contents {
    margin: -31px auto 0;
    padding: 0;
    width: 40.9%;
  }
}

.top-recruitment-information__title {
  color: var(--color-text-green);
  font-family: var(--font-family-barlow);
  font-size: 80px;
  font-weight: 400;
  line-height: .5;
  margin-bottom: 50px;
}
.top-recruitment-information__title-ja {
  color: var(--color-text-black);
  font-size: var(--font-size24);
}
.top-recruitment-information__lead {
  font-size: var(--font-size24);
  line-height: 1.5;
  margin-bottom: 20px;
}
.top-recruitment-information__sentence {
  font-size: var(--font-size16);
  margin-bottom: 30px;
}
.top-manufacturer__title {
  font-size: var(--font-size24);
  font-weight: 400;
  margin-bottom: 40px;
  text-align: center;
}
.top-manufacturer__link-text {
  margin-top: 45px;
  text-align: center;
}
@media screen and (min-width: 901px) {
  .top-manufacturer__link-text {
    margin-top: 35px;
  }
}

/*
page > top > top-mv
--------------------------------------------------
*/

/*
page > layer > common
--------------------------------------------------
*/
.main-visual {
  overflow: hidden;
}
.main-visual img {
  animation: zoom 3s forwards;
}
@keyframes zoom {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
  /* 100% {
    transform:scale(1.1);
  } */
}

.layer-section > section {
  margin-bottom: 50px;
}
.layer .c-title-level3 {
  border-bottom: 1px solid #a9cbb6;
}
.business-information-menu {
  margin-top: 140px; 
}
.business-information-menu__caption {
  margin-top: 8px;
}

/*
page > business-information
--------------------------------------------------
*/
.business-information__contents {
  margin-bottom: 50px;
}
.business-information__image {
  margin-bottom: 20px;
}
.business-information__title {
  color: var(--color-text-blue);
  font-size: var(--font-size20);
  font-weight: 400;
  margin-bottom: 10px;
}
@media screen and (min-width: 901px) {
  .business-information__title {
    font-size: var(--font-size22);
  }
}

.business-information__sentence {
  margin-bottom: 20px;
}

/*
page > medical-record
--------------------------------------------------
*/
.medical-record-lead {
  font-size: var(--font-size20);
  line-height: 1.5;
  margin-bottom: 20px;
}
.medical-record-image {
  margin-bottom: 25px;
}
.medical-record-title {
  color: var(--color-text-green);
  margin: 15px 0 5px;
}

/*
page > business-startup-support
--------------------------------------------------
*/
.business-startup-support-occasion {
  margin-bottom: 30px;
}
@media screen and (min-width: 901px) {
  .business-startup-support-occasion {
    display: flex;
    justify-content: space-between;
  }
}

.business-startup-support-occasion__contents {
  box-shadow: 2px 2px 4px #ccc;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 200px;
  margin:  0 auto 50px;
  padding: 15px;
  position: relative;
}
@media screen and (min-width: 901px) {
  .business-startup-support-occasion__contents {
    width: 120px;
    margin:  0;
  }
}

.business-startup-support-occasion__contents:last-child {
  margin-bottom: 0;
}
.business-startup-support-occasion__contents::after {
 content: "";
 display: inline-block;
 background: url(../img/business-startup-support/business-startup-support-arrow-sp.svg) no-repeat bottom center;
 width: 46px;
 height: 50px;
 position: absolute;
 left: 76px;
 bottom: -50px;
}
@media screen and (min-width: 901px) {
  .business-startup-support-occasion__contents::after {
     background: url(../img/business-startup-support/business-startup-support-arrow-pc.svg) no-repeat bottom right;
     left: 123px;
     bottom: 68px;
  }
}

.business-startup-support-occasion__contents:last-child::after {
  background: none;
}
.business-startup-support-occasion__text {
  line-height: 1.5;
  font-size: var(--font-size18);
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
}
.business-startup-support-occasion__image {
  text-align: center;
  width: 100%;
}
.business-startup-support-achievements {
  max-width: 800px;
}

/*
page > manufacturer
--------------------------------------------------
*/
.layer-manufacturer__inner {
  max-width: 875px;
  margin: 60px auto 0;
}
.layer-manufacturer__title {
  font-size: var(--font-size14);
  text-align: center;
}
.layer-manufacturer__image {
  text-align: center;
}

/*
page > company-profile
--------------------------------------------------
*/
.layer-company-profile .c-table tr:nth-child(odd) th,
.layer-company-profile .c-table tr:nth-child(odd) td {
  background-color: #fff;
}
.layer-company-profile .c-table tr:nth-child(even) th,
.layer-company-profile .c-table tr:nth-child(even) td {
  background-color: #f4f7f5;
}
.layer-company-profile-image {
  margin-top: 50px;
}

@media screen and (min-width: 901px) {
  .layer-company-profile-greeting .c-img-box__image {
    flex: 1
  }
  .layer-company-profile-greeting .c-img-box__text {
    flex: 2
  }
}

.layer-company-profile-access__map {
  margin-bottom: 10px;
}
@media screen and (min-width: 901px) {
  .layer-company-profile-access__map {
    height: 380px;
    width: 100%;
  }
}

@media screen and (min-width: 901px) {
  .layer-company-profile-access__text span {
    margin-left: 1em;
  }
}

@media screen and (min-width: 901px) {
  .layer-company-profile-history-list {
    max-width: 720px;
    margin: 0 auto;
    transform: skewX(-15deg);
  }
}

.layer-company-profile-history-list__item {
  position: relative;
  border-left: 2px solid var(--color-text-green);
  padding: 0 0 40px 20px;
}
/* @media screen and (min-width: 901px) {
  .layer-company-profile-history-list__item {
    left: 64px;
  }
} */

.layer-company-profile-history-list__item::before {
  content: "";
  width: 15px;
  height: 15px;
  background-color: var(--color-text-green);
  position: absolute;
  left: -8px;
  top: 0;
  border-radius: 100%;
}
@media screen and (min-width: 901px) {
  .layer-company-profile-history-list__item::before {
    transform: skewX(15deg);
  }
}

.layer-company-profile-history-list__item p {
  position: relative;
  top: -13px;
  margin-bottom: 10px;
}
@media screen and (min-width: 901px) {
  .layer-company-profile-history-list__item p {
    display: flex;
    align-items: center;
    top: -17px;
    transform: skewX(15deg);
    margin-bottom: 0;
  }
}

.layer-company-profile-history-list__item span {
  font-size: var(--font-size22);
}
@media screen and (min-width: 901px) {
  .layer-company-profile-history-list__item span {
    font-size: var(--font-size26);
    margin-right: 20px;
  }
}

/*
page > inquiry
--------------------------------------------------
*/
.layer-inquiry-contents {
  max-width: 620px;
  margin: 0 auto;
}
.layer-inquiry-contents__sentence {
  margin-bottom: 30px;
}
.inquiry-list {
  margin-bottom: 20px;
}
.inquiry-list:first-child .inquiry-list__data input {
  position: relative;
  top: -2px;
}
.inquiry-list__title {
  margin-bottom: 5px;
}
.inquiry-list__title span {
  color: #d30000;
  margin-left: 10px;
}
.inquiry-list__data {
  display: block;
}
.inquiry-list__box {
  border: 1px solid #dbdbdb;
  padding: 15px;
  width: 90%;
}
.layer-inquiry-contents__inner {
  margin-bottom: 30px;
}
@media screen and (min-width: 901px) {
  .layer-inquiry-contents__inner {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.layer-inquiry-contents__inner p {
  margin-top: 20px;
}
@media screen and (min-width: 901px) {
  .layer-inquiry-contents__inner p {
    margin: 0;
  }
}

.layer-inquiry-contents__inner a {
  position: relative;
  padding-right: 15px;
}
.layer-inquiry-contents__inner a::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
  position: absolute;
  right: 0;
  top: 7px;
}
.inquiry-confirmation .layer-inquiry-contents__inner {
  display: block;
}
.layer-inquiry-contents__button {
  max-width: 460px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.layer-inquiry-contents__button input {
  background: var(--color-bg-blue);
  border: none;
  color: var(--color-text-white);
  cursor: pointer;
  font-size: var(--font-size20);
  transition: all 0.3s;
  padding: 15px 0;
  width: 45%;
  margin: 0 auto;
  font-size: var(--font-size14);
}
@media screen and (min-width: 901px) {
  .layer-inquiry-contents__button input {
    font-size: var(--font-size16);
  }
}

.layer-inquiry-contents__button input:hover {
  background: rgba(0,119,193,0.7);
}
.wpcf7-list-item {
  margin: 0 1em 0 0!important;
}
div.wpcf7 .wpcf7-spinner {
  display: none !important;
}

@media screen and (min-width: 901px) {
  .layer-inquiry-contents__button--confirmation input {
    width: 320px;
  }
  .inquiry-previous {
    margin-right: auto;
  }
}

/*
page > latest-news
--------------------------------------------------
*/

/*
page > details
--------------------------------------------------
*/

/*
page > recruitment-information
--------------------------------------------------
*/
@media screen and (min-width: 901px) {
  .layer-recruitment-information__contents {
    display: flex;
    gap: 0 55px;
    max-width: 795px;
    margin: 75px auto 70px;
  }
}

.layer-recruitment-information__inner {
  background-color: #e9eff4;
  align-items: center;
  margin: 0 0 50px 50px;
}
@media screen and (min-width: 901px) {
  .layer-recruitment-information__inner {
    margin-bottom: 0;
    width: 320px;
  }
}

.layer-recruitment-information__inner.c-column2 {
  gap: 0;
}

.layer-recruitment-information__image {
  position: relative;
  top: -25px;
  left: -50px;
  width: auto;
}
.layer-recruitment-information__text {
  width: auto;
  position: relative;
  left: -30px;
}
.layer-recruitment-information__job-type {
  font-size: var(--font-size20);
}
.layer-recruitment-information__employment-status {
  margin-bottom: 10px;
}
.layer-recruitment-information__title {
  font-size: var(--font-size24);
  line-height: 1.5;
  margin-bottom: 20px;
}
.layer-recruitment-information__sentence {
  margin-bottom: 40px;
}
.layer-recruitment-information-application-guidelines table {
  margin-bottom: 40px;
}
@media screen and (min-width: 901px) {
  .layer-recruitment-information-application-guidelines table {
    margin-bottom: 90px;
  }
}

.tab-menu {
  max-width: 470px;
  margin: 0 auto 30px;
  display: flex;
  align-items: center;
  gap: 0 30px;
}
.tab-menu__item {
  width: calc(100% / 3);
  cursor: pointer;
  transition: all .3s;
}
.tab-menu__number {
  color: #71bf8e;
  font-size: 60px;
  font-family: var(--font-family-barlow);
  line-height: 1.3;
  text-align: center;
}
.tab-menu__item.active .tab-menu__number,
.tab-menu__item.active .tab-menu__date,
.tab-menu__item.active .tab-menu__name {
  color: #c7c7c7;
}
.tab-menu__item:hover,
.tab-menu__item:hover .tab-menu__number {
  color: #c7c7c7;
  transition: all .3s;
}
.tab-menu__name-02 {
  font-size: var(--font-size26);
}
.tab-menu__date {
  text-align: center;
}
.tab-menu__name {
  text-align: center;
}
.tab-contents {
  display: none;
  max-width: 600px;
  margin: 0 auto;
}
.tab-contents.show {
  display: block;
}
.tab-contents__inner {
  display: flex;
  align-items: center;
  gap: 0 30px;
}
.tab-contents__image {
  text-align: center;
}
.tab-contents__number {
  color: #71bf8e;
  font-size: 80px;
  font-family: var(--font-family-barlow);
}
.tab-contents__title {
  font-size: var(--font-size24);
  line-height: 1.5;
}
.tab-contents__sentence {
  margin-bottom: 40px;
}
.tab-contents__question {
  margin-bottom: 10px;
}
.tab-contents__answer {
  margin-bottom: 30px;
}

/*
page > privacy-policy
--------------------------------------------------
*/
.layer-privacy-policy__sentence {
  margin-bottom: 50px;
}
.layer-privacy-policy__sentence-02 {
  margin-bottom: 20px;
}
.layer-privacy-policy ol {
  list-style-position: inside;
  margin: 0 0 50px 20px;
}
.layer-privacy-policy ol ol {
  margin-top: 10px;
}
.layer-privacy-policy ol li {
  margin-bottom: 10px;
  text-indent: -1em;
  padding-left: 1em;
}
.layer-privacy-policy__list-02 {
  display: flex;
}

/*
page > 404 not found
--------------------------------------------------
*/
.layer-error404__link {
  margin-top: 30px;
}

/*
page > pagination
--------------------------------------------------
*/
.pagination {
  max-width: 430px;
  margin: 50px auto 0;
}
@media screen and (min-width: 901px) {
  .pagination {
    margin: 80px auto 0;
  }
}

.screen-reader-text {
  display: none;
}
.page-numbers {
  display: flex;
  justify-content: center;
  gap: 0 20px;
  position: relative;
}
.page-numbers li {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size22);
}
.page-numbers li a {
  color: #838383;
}
.page-numbers li a:hover,
.page-numbers .current {
  color: var(--color-text-blue);
  text-decoration: underline;
  text-underline-offset: 15px;
}
.page-numbers li a i {
  color: var(--color-text-blue);
}

/*
page > slider
--------------------------------------------------
*/
.slider {
  margin: 0 auto;
  width: 60%;
}
@media screen and (min-width: 901px) {
  .slider {
    width: 90%;
  }
}

.slider img {
  width: 100%;
  height: auto;
}
.slider .slick-next {
    right: 0!important;
}
.slider .slick-prev {
    left: 0!important;
}
/* .slider .slick-arrow {
    width: initial!important;
    height: initial!important;
    z-index: 2!important;
} */
/* .slider .slick-arrow:before {
    font-size: 30px!important;
} */
.slick-arrow {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 0;
    color: transparent;
    transition: opacity 0.5s;
    z-index: 1;
}
.slick-arrow:hover {
    opacity: 0.7;
}
.slick-next::before,
.slick-next::after,
.slick-prev::before,
.slick-prev::after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.slick-next::after,
.slick-prev::after {
    width: 40px;
    height: 40px;
    border-top: 1px solid var(--color-text-blue);
    border-right: 1px solid var(--color-text-blue);
}
.slick-next {
    right: 26px;
}
.slick-next::after {
    right: -50px;
    transform: rotate(45deg);
}
.slick-prev {
    left: 26px;
}
.slick-prev::after {
    left: -51px;
    transform: rotate(-135deg);
}

@media screen and (min-width: 901px) {
.inner {
  margin-inline: auto;
  max-width: 500px;
  width: 100%;
}
.box {
  display: flex;
  margin-top: 20px;
}
.box01 {
  margin-left: calc(50% - 50vw);
}
.image {
  flex-shrink: 0;
  width: 50vw;
}
.text {
  line-height: 1.5;
  width: 50%;
}
.image img {
  display: block;
  width: 100%;
}
}