/* ======================================================================
 reset
====================================================================== */
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  overflow-y: scroll;
}
/* html, body {
  height: 100%;
} */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
ul {
  list-style: none;
  padding-left: 0;
}


/* ======================================================================
 base
====================================================================== */
:root {
  --color-main: #ff2a00;
  --color-text: #333;
  --font-base: "Noto Sans JP", 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic',Avenir, "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, sans-serif;
  --font-alpha: "Poppins", sans-serif;
  --font-awesome: "Font Awesome 6 Free";
  --base-width: 1240px;
  --cal-var: 750;
}

html {
  font-size: 62.5%;
}

body {
  font-family: var(--font-base);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.6;
  word-wrap : break-word;
	word-break: break-all;
  min-width: var(--base-width);
	overflow: hidden;
  @media (width <= 768px) {
    min-width: inherit;
  }
}

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

strong {
	font-weight: bold;
}

a {
	&:link {
		color: var(--color-text);
		text-decoration: none;
		cursor: pointer;
	}
	&:visited {
		color: var(--color-text);
		text-decoration: none;
	}
	&:hover {
		color: var(--color-text);
		text-decoration: none;
	}
	&:active {
		color: var(--color-text);
		text-decoration: none;
	}
}

/* モバイル時 電話番号カラー */
a[href^="tel"]{
  color: var(--color-text);
}

:focus-ring {
  outline: none;
}


/* input */
/* ( 1 ) radio / checkbox 以外リセット */
input[type='button'], input[type='submit'], input[type='text'], input[type='email'], input[type='tel'],  input[type='url'], input[type='password'], input[type='reset'], input[type='search'], textarea, select {
  display: block;
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  border-image: none;
  background: transparent;
  font-family: inherit; /* 子要素へ引き継ぎ */
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea {
  resize: vertical;
}

input, textarea {
  &:placeholder-shown {
    color: var(--color-text);
  }
  &::placeholder {
    color: var(--color-text);
  }
  &:focus {
    &:placeholder-shown {
      color: var(--color-text);
    }
    &::placeholder {
      color: var(--color-text);
    }
  }
}



/* =================================
 l-content__size
================================= */
.l-content__size-pc-1 {
  width: var(--base-width);
  margin: 0 auto;
  padding-inline: 20px;
  @media (width <= 768px) {
    width: auto;
    margin: 0;
    padding-inline: calc(40 / var(--cal-var) * 100vw);
  }
}


/* =================================
 l-header
================================= */
.l-header {
  z-index: 996;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 20px 50px;
  min-width: var(--base-width);
  @media (width <= 768px) {
    min-width: inherit;
    padding: calc(20 / var(--cal-var) * 100vw) calc(40 / var(--cal-var) * 100vw);
  }
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* &.active {
    .l-header__toggle {
      span {
        &:nth-of-type(1) {
          top: 29px;
          transform: rotate(45deg);
        }
        &:nth-of-type(2) {
          top: 29px;
          width: 0;
          left: 50%;
        }
        &:nth-of-type(3) {
          top: 29px;
          transform: rotate(-45deg);
        }
      }
    }
  } */
}

.l-header__logo {
  @media (width <= 768px) {
    width: calc(246 / var(--cal-var) * 100vw);
    margin-top: calc(14 / var(--cal-var) * 100vw);
  }
}

.l-header__right {
  display: flex;
}
.l-header__contact {
  margin-right: 50px;
  @media (width <= 768px) {
    display: none;
  }
  a {
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
    background: #222736;
    border-radius: 30px;
    width: 210px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform .2s;
    &:hover {
      transform: scale(1.05);
    }
  }
}

.l-header__toggle {
  position: relative;
  cursor: pointer;
  width: 40px;
  height: 31px;
  margin-top: 14px;
  @media (width <= 768px) {
    width: calc(60 / var(--cal-var) * 100vw);
    height: calc(42 / var(--cal-var) * 100vw);
    margin-top: calc(4 / var(--cal-var) * 100vw);
  }
  span {
    width: 40px;
    height: 3px;
    background: #222736;
    display: block;
    position: absolute;
    left: 0;
    transition: transform 0.6s ease-in-out, top 0.5s ease;
    @media (width <= 768px) {
      width: calc(60 / var(--cal-var) * 100vw);
      height: calc(4 / var(--cal-var) * 100vw);
    }
    &:nth-of-type(1) {
      top: 0px;
    }
    &:nth-of-type(2) {
      top: 14px;
      @media (width <= 768px) {
        top: calc(20 / var(--cal-var) * 100vw);
      }
    }
    &:nth-of-type(3) {
      top: 28px;
      @media (width <= 768px) {
        top: calc(40 / var(--cal-var) * 100vw);
      }
    }
  }
}


.l-menu {
  z-index: 998;
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  height: 100dvh;
  background: #fff;
  padding-block: 34px;
  overflow: auto;
  opacity: 0;
  /* transition-duration: 0.4s; */
  transform: translate(300px , 0);
  transition: transform 0.3s ease, opacity 0.3s ease; /* アニメーション */
  @media (width <= 768px) {
    padding-block: calc(40 / var(--cal-var) * 100vw);
  }
  .l-header__toggle {
    margin-inline: auto 50px;
    height: 40px;
    margin-top: 0;
    @media (width <= 768px) {
      margin-inline: auto calc(40 / var(--cal-var) * 100vw);
      height: calc(60 / var(--cal-var) * 100vw);
    }
    span {
      &:nth-of-type(1) {
        top: 20px;
        transform: rotate(45deg);
        @media (width <= 768px) {
          top: calc(20 / var(--cal-var) * 100vw);
        }
      }
      &:nth-of-type(2) {
        top: 20px;
        width: 0;
        left: 50%;
        @media (width <= 768px) {
          top: calc(20 / var(--cal-var) * 100vw);
        }
      }
      &:nth-of-type(3) {
        top: 20px;
        transform: rotate(-45deg);
        @media (width <= 768px) {
          top: calc(20 / var(--cal-var) * 100vw);
        }
      }
    }
  }
  &.active {
    opacity: 1;
    transform: translate(0 , 0);
  }
}

.l-menu__nav {
  padding-inline: 30px;
  font-size: 2rem;
  font-weight: 500;
  margin-top: 20px;
  @media (width <= 768px) {
    padding-inline: calc(40 / var(--cal-var) * 100vw);
    font-size: calc(32 / var(--cal-var) * 100vw);
    margin-top: calc(30 / var(--cal-var) * 100vw);
  }
  li + li {
    margin-top: 14px;
  }
}

.l-menu__overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / .5);
  z-index: 997;
  &.active {
    display: block;
  }
}

/* =================================
 l-footer
================================= */
.l-footer {
}


/* =================================
 l-main
================================= */
.l-main {
  /* margin-top: 100px;
  @media (width <= 768px) {
    margin-top: calc(116 / var(--cal-var) * 100vw);
  } */
}


/* =================================
 c-btn
================================= */
.c-btn {
  a {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 30px;
    background: linear-gradient( 90deg, rgb(98,103,107) 0%, rgb(72,77,81) 100%);
    width: 300px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform .2s;
    @media (width <= 768px) {
      font-size: calc(32 / var(--cal-var) * 100vw);
      border-radius: calc(50 / var(--cal-var) * 100vw);
      width: calc(500 / var(--cal-var) * 100vw);
      height: calc(100 / var(--cal-var) * 100vw);
    }
    &:hover {
      transform: scale(1.05);
    }
  }
}

.c-btn__small {
  a {
    font-size: 1.8rem;
    background: #3d3d45;
    width: 260px;
    height: 50px;
    @media (width <= 768px) {
      font-size: calc(30 / var(--cal-var) * 100vw);
      width: calc(520 / var(--cal-var) * 100vw);
      height: calc(100 / var(--cal-var) * 100vw);
      margin-inline: auto;
    }
  }
}

.c-ttl__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
  @media (width <= 768px) {
    display: block;
    margin-bottom: calc(80 / var(--cal-var) * 100vw);
  }
}

.c-ttl__meta-left {
  width: calc(100% - 280px);
  @media (width <= 768px) {
    width: 100%;
  }
}

.c-ttl__en {
  font-size: 2.6rem;
  font-family: var(--font-alpha);
  font-weight: 600;
  display: flex;
  align-items: center;
  @media (width <= 768px) {
    font-size: calc(36 / var(--cal-var) * 100vw);
  }
  &:before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-main);
    margin-right: 16px;
    display: inline-block;
    @media (width <= 768px) {
      width: calc(20 / var(--cal-var) * 100vw);
      height: calc(20 / var(--cal-var) * 100vw);
      margin-right: calc(16 / var(--cal-var) * 100vw);
    }
  }
}

.c-ttl__ja {
  font-size: 5rem;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: -0.02em;

  @media (width <= 768px) {
    font-size: calc(60 / var(--cal-var) * 100vw);
    margin-bottom: calc(40 / var(--cal-var) * 100vw);
  }
}

.c-txt {
  font-size: 2rem;
  line-height: 2;
  @media (width <= 768px) {
    font-size: calc(30 / var(--cal-var) * 100vw);
  }
}

.c-contact {
  background: url(../img/common/bg_contact.jpg) center top / auto no-repeat;
  height: 835px;
  position: relative;
  overflow: hidden;
  @media (width <= 768px) {
    background: url(../img/common/sp/bg_contact.jpg) center top / 100% no-repeat;
    height: calc(1690 / var(--cal-var) * 100vw);
  }
}

.c-contact__ttl {
  font-size: 3rem;
  font-weight: 600;
  font-family: var(--font-alpha);
  color: #fff;
  padding-top: 38px;
  margin-bottom: 68px;
  @media (width <= 768px) {
    font-size: calc(40 / var(--cal-var) * 100vw);
    padding-top: calc(30 / var(--cal-var) * 100vw);
    margin-bottom: calc(63 / var(--cal-var) * 100vw);
  }
}

.c-contact__txt-1 {
  font-size: 4.2rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 10px;
  @media (width <= 768px) {
    font-size: calc(54 / var(--cal-var) * 100vw);
    margin-bottom: calc(20 / var(--cal-var) * 100vw);
  }
}

.c-contact__txt-2 {
  font-size: 2.4rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 40px;
  @media (width <= 768px) {
    font-size: calc(30 / var(--cal-var) * 100vw);
    margin-bottom: calc(50 / var(--cal-var) * 100vw);
  }
}

.c-contact__list {
  margin-bottom: 96px;
  @media (width <= 768px) {
    margin-bottom: calc(466 / var(--cal-var) * 100vw);
  }
}

.c-contact__item {
  & + & {
    margin-top: 40px;
    @media (width <= 768px) {
      margin-top: calc(60 / var(--cal-var) * 100vw);
    }
  }
  a {
    display: flex;
    align-items: center;
    background: linear-gradient(to left, var(--color-main) 80px, #fff 80px);
    border-radius: 10px;
    width: 780px;
    position: relative;
    @media (width <= 768px) {
      display: block;
      background: linear-gradient(to left, var(--color-main) calc(70 / var(--cal-var) * 100vw), #fff calc(70 / var(--cal-var) * 100vw));
      border-radius: calc(20 / var(--cal-var) * 100vw);
      width: 100%;
    }
    &:after {
      content: "\f061";
      font-family: var(--font-awesome);
      font-weight: 900;
      font-size: 2.2rem;
      color: #fff;
      margin-right: 30px;
      transition: margin .3s;
      @media (width <= 768px) {
        font-size: calc(22 / var(--cal-var) * 100vw);
        margin-right: 0;
        position: absolute;
        right: calc(25 / var(--cal-var) * 100vw);
        top: calc(50% - (11 / var(--cal-var) * 100vw));
        transition: right .3s;
      }
    }
    &:hover {
      &:after {
        margin-right: 25px;
        @media (width <= 768px) {
          margin-right: 0;
          right: calc(20 / var(--cal-var) * 100vw);
        }
      }
    }
  }
}

.c-contact__item-ttl {
  font-size: 3rem;
  font-weight: 700;
  width: 225px;
  padding-left: 40px;
  @media (width <= 768px) {
    font-size: calc(40 / var(--cal-var) * 100vw);
    width: inherit;
    padding-top: calc(30 / var(--cal-var) * 100vw);
    padding-left: calc(45 / var(--cal-var) * 100vw);
  }
}

.c-contact__item-info {
  flex: 1;
  margin-block: 24px;
  padding-left: 28px;
  border-left: 1px solid #cdcdcd;
  font-size: 2rem;
  @media (width <= 768px) {
    margin-block: calc(25 / var(--cal-var) * 100vw) calc(30 / var(--cal-var) * 100vw);
    padding-block: calc(30 / var(--cal-var) * 100vw) calc(35 / var(--cal-var) * 100vw);
    padding-left: 0;
    margin-inline: calc(45 / var(--cal-var) * 100vw) calc(110 / var(--cal-var) * 100vw);
    border-top: 1px solid #cdcdcd;
    border-left: none;
    font-size: calc(28 / var(--cal-var) * 100vw);
  }
  li {
    &:nth-last-of-type(2),
    &:nth-last-of-type(3) {
      font-weight: 600;
      font-family: var(--font-alpha);
    }
  }
  i {
    color: #555555;
    margin-right: 10px;
    @media (width <= 768px) {
      font-size: calc(24 / var(--cal-var) * 100vw);
      margin-right: calc(14 / var(--cal-var) * 100vw);
    }
  }
}


@keyframes scrollText {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.c-contact__slider-outer {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.c-contact__slider {
  display: inline-flex;
  align-items: center;
  gap: 0 150px;
  -webkit-animation: scrollText 30s linear infinite;
  animation: scrollText 30s linear infinite;
  position: relative;
  z-index: 5;
  @media (width <= 768px) {
    gap: 0 calc(150 / var(--cal-var) * 100vw);
  }
}

.c-contact__slider p {
  -webkit-text-stroke: 1px rgb(255 255 255 / .3);
  text-stroke: 1px rgb(255 255 255 / .3);
  color: transparent;
  font-size: 20rem;
  font-weight: 600;
  font-family: var(--font-alpha);
  line-height: 1;
  @media (width <= 768px) {
    font-size: calc(200 / var(--cal-var) * 100vw);
  }
}

.c-pro {
  background-image: url(../img/common/ashirai02.png), linear-gradient(90deg, rgb(98,103,107) 0%, rgb(72,77,81) 100%);
  background-position: center -50px, center top;
  background-size: auto, 100% 500px;
  background-repeat: no-repeat, no-repeat;
  padding-block: 110px 100px;
  @media (width <= 768px) {
    background-image: url(../img/common/ashirai02.png), linear-gradient(90deg, rgb(98,103,107) 0%, rgb(72,77,81) 100%);
    background-position: center calc(-50 / var(--cal-var) * 100vw), center top;
    background-size: calc(521 / var(--cal-var) * 100vw), 100% calc(750 / var(--cal-var) * 100vw);
    background-repeat: no-repeat, no-repeat;
    padding-block: calc(110 / var(--cal-var) * 100vw) calc(120 / var(--cal-var) * 100vw);
  }
  .c-ttl__en,
  .c-ttl__ja,
  .c-txt {
    color: #fff;
    text-align: center;
  }
  .c-ttl__en {
    justify-content: center;
    &:before {
      display: none;
    }
  }
  .c-btn {
    a {
      margin-inline: auto;
    }
  }
}

.c-pro__img {
  margin-top: 50px;
  @media (width <= 768px) {
    margin-top: calc(80 / var(--cal-var) * 100vw);
    margin-inline: calc(-40 / var(--cal-var) * 100vw);
  }
  img {
    border-radius: 10px;
    @media (width <= 768px) {
      border-radius: 0;
    }
  }
}

.c-pro__list {
  display: grid;
  grid-template-columns: 340px 340px 340px;
  grid-template-rows: auto;
  gap: 40px;
  margin: -40px 50px 0;
  text-align: center;
  @media (width <= 768px) {
    display: flex;
    flex-direction: column;
    gap: calc(40 / var(--cal-var) * 100vw);
    margin: calc(-37 / var(--cal-var) * 100vw) 0 0;
  }
}

.c-pro__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 4px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #eeeeee;
  padding: 30px;
  @media (width <= 768px) {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: calc(20 / var(--cal-var) * 100vw);
    padding: calc(30 / var(--cal-var) * 100vw);
  }
}

.c-pro__item-num {
  font-size: 1.6rem;
  font-weight: 600;
  font-family: var(--font-alpha);
  color: var(--color-main);
  @media (width <= 768px) {
    font-size: calc(26 / var(--cal-var) * 100vw);
  }
}

.c-pro__item-txt {
  font-size: 2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  @media (width <= 768px) {
    font-size: calc(30 / var(--cal-var) * 100vw);
  }
}


/* =================================
 p-index
================================= */
.p-index {
  
}

.p-index__mv {
  background: url(../img/index/mv.jpg) center top / cover no-repeat;
  min-height: 750px;
  padding-top: 108px;
  color: #fff;
  @media (width <= 768px) {
    background: url(../img/index/sp/mv.jpg) center top / cover no-repeat;
    min-height: calc(1300 / var(--cal-var) * 100vw);
    padding-top: calc(70 / var(--cal-var) * 100vw);
  }
}

.p-index__mv-txt-1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 30px;
  line-height: 1;
  @media (width <= 768px) {
    font-size: calc(32 / var(--cal-var) * 100vw);
    margin-bottom: calc(40 / var(--cal-var) * 100vw);
  }
}

.p-index__mv-txt-2 {
  font-size: 11rem;
  font-weight: 600;
  font-family: var(--font-alpha);
  margin-bottom: 40px;
  line-height: 1;
  @media (width <= 768px) {
    font-size: calc(90 / var(--cal-var) * 100vw);
    margin-bottom: calc(89 / var(--cal-var) * 100vw);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
}

.p-index__mv-txt-3 {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 30px;
  line-height: 1;
  @media (width <= 768px) {
    font-size: calc(55 / var(--cal-var) * 100vw);
    margin-bottom: calc(40 / var(--cal-var) * 100vw);
    line-height: 1.6;
  }
}

.p-index__mv-txt-4 {
  font-size: 2rem;
  margin-bottom: 50px;
  @media (width <= 768px) {
    font-size: calc(30 / var(--cal-var) * 100vw);
    margin-bottom: calc(60 / var(--cal-var) * 100vw);
    line-height: 1.8;
  }
}

.p-index__about {
  padding-block: 120px 150px;
  @media (width <= 768px) {
    padding-block: calc(110 / var(--cal-var) * 100vw) calc(120 / var(--cal-var) * 100vw);
  }
  .c-btn {
    margin-top: 40px;
    @media (width <= 768px) {
      margin-top: calc(60 / var(--cal-var) * 100vw);
    }
  }
}

.p-index__about-inner {
  display: flex;
  @media (width <= 768px) {
    flex-direction: column;
    gap: calc(70 / var(--cal-var) * 100vw);
  }
}

.p-index__about-info {
  margin-right: -60px;
  position: relative;
  @media (width <= 768px) {
    margin-right: 0;
  }
}

.p-index__about-img {
  img {
    border-radius: 10px;
    @media (width <= 768px) {
      border-radius: calc(20 / var(--cal-var) * 100vw);
    }
  }
}

.p-index__feature {
  background-image: url(../img/common/ashirai01.png), linear-gradient(90deg, rgb(238,238,238) 0%, rgb(214,220,224) 100%);
  background-position: calc(50% + 460px) -50px, center top;
  background-size: auto, 100% 450px;
  background-repeat: no-repeat, no-repeat;
  padding-block: 110px 90px;
  @media (width <= 768px) {
    background-image: url(../img/common/ashirai01.png), linear-gradient(90deg, rgb(238,238,238) 0%, rgb(214,220,224) 100%);
    background-position: calc(50% + (216 / var(--cal-var) * 100vw)) calc(-50 / var(--cal-var) * 100vw), center top;
    background-size: calc(521 / var(--cal-var) * 100vw), 100% calc(750 / var(--cal-var) * 100vw);
    background-repeat: no-repeat, no-repeat;
    padding-block: calc(110 / var(--cal-var) * 100vw) calc(120 / var(--cal-var) * 100vw);
  }
}

.p-index__feature-slide-wrap {
  width: var(--base-width);
  margin-inline: auto;
  padding-inline: 20px;
  @media (width <= 768px) {
    width: auto;
    margin-bottom: calc(80 / var(--cal-var) * 100vw);
    padding-inline: 0;
  }
}

.p-index__feature-imgs {
  display: flex!important;
  gap: 30px;
  @media (width <= 768px) {
    gap: 0;
  }
}

.p-index__feature-item-img {
  margin-bottom: 20px;
  @media (width <= 768px) {
    margin-bottom: calc(30 / var(--cal-var) * 100vw);
  }
  img {
    border-radius: 10px;
    @media (width <= 768px) {
      border-radius: calc(20 / var(--cal-var) * 100vw);
      width: 100%;
    }
  }
}

.p-index__feature-item-subttl {
  font-size: 1.6rem;
  font-weight: 600;
  font-family: var(--font-alpha);
  color: #ababab;
  @media (width <= 768px) {
    font-size: calc(24 / var(--cal-var) * 100vw);
  }
}

.p-index__feature-item-ttl {
  font-size: 2.4rem;
  font-weight: 700;
  @media (width <= 768px) {
    font-size: calc(36 / var(--cal-var) * 100vw);
  }
}

.p-index__machine {
  border-top: 1px solid #cdcdcd;
  padding-block: 90px 100px;
  @media (width <= 768px) {
    padding-block: calc(110 / var(--cal-var) * 100vw) calc(120 / var(--cal-var) * 100vw);
  }
}

.p-index__machine-item {
  @media (width <= 768px) {
    margin-bottom: calc(30 / var(--cal-var) * 100vw);
  }
  & + & {
    margin-top: 50px;
    @media (width <= 768px) {
      margin-top: 0;
    }
  }
}

.p-index__machine-item-img {
  margin-bottom: -210px;
  @media (width <= 768px) {
    margin-bottom: calc(-93 / var(--cal-var) * 100vw);
  }
  img {
    border-radius: 10px;
    @media (width <= 768px) {
      border-radius: calc(20 / var(--cal-var) * 100vw);
    }
  }
}

.p-index__machine-item-info {
  width: 430px;
  padding: 50px 20px 50px 50px;
  margin-left: auto;
  border-radius: 10px;
  background: #fff;
  position: relative;
  @media (width <= 768px) {
    width: calc(600 / var(--cal-var) * 100vw);
    padding: calc(50 / var(--cal-var) * 100vw);
    margin-left: calc(-40 / var(--cal-var) * 100vw);
    border-radius: 0 calc(20 / var(--cal-var) * 100vw) 0 0;
  }
}

.p-index__machine-item-subttl {
  font-size: 1.8rem;
  font-weight: 600;
  font-family: var(--font-alpha);
  color: #ababab;
  margin-bottom: 4px;
  @media (width <= 768px) {
    font-size: calc(28 / var(--cal-var) * 100vw);
    margin-bottom: calc(10 / var(--cal-var) * 100vw);
  }
}

.p-index__machine-item-ttl {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
  @media (width <= 768px) {
    font-size: calc(40 / var(--cal-var) * 100vw);
    margin-bottom: calc(20 / var(--cal-var) * 100vw);
  }
}

.p-index__machine-item-txt {
  font-size: 1.8rem;
  line-height: 2;
  color: #555;
  @media (width <= 768px) {
    font-size: calc(28 / var(--cal-var) * 100vw);
  }
}

.p-index__offer {
  background-image: url(../img/common/ashirai01.png), linear-gradient(90deg, rgb(238,238,238) 0%, rgb(214,220,224) 100%);
  background-position: calc(50% + 460px) -50px, center top;
  background-size: auto, 100% 500px;
  background-repeat: no-repeat, no-repeat;
  padding-block: 110px 100px;
  @media (width <= 768px) {
    background-image: url(../img/common/ashirai01.png), linear-gradient(90deg, rgb(238,238,238) 0%, rgb(214,220,224) 100%);
    background-position: calc(50% + (216 / var(--cal-var) * 100vw)) calc(-50 / var(--cal-var) * 100vw), center top;
    background-size: calc(521 / var(--cal-var) * 100vw), 100% calc(750 / var(--cal-var) * 100vw);
    background-repeat: no-repeat, no-repeat;
    padding-block: calc(110 / var(--cal-var) * 100vw) calc(120 / var(--cal-var) * 100vw);
  }
}

.p-index__offer-slide {
  @media (width <= 768px) {
    margin-bottom: calc(80 / var(--cal-var) * 100vw);
  }
}

.p-index__offer-slide-item-img {
  margin-bottom: 20px;
  @media (width <= 768px) {
    margin-bottom: calc(30 / var(--cal-var) * 100vw);
  }
  img {
    border-radius: 10px;
    @media (width <= 768px) {
      border-radius: calc(10 / var(--cal-var) * 100vw);
    }
  }
}

.p-index__offer-slide-item-ttl {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 14px;
  @media (width <= 768px) {
    font-size: calc(40 / var(--cal-var) * 100vw);
    margin-bottom: calc(20 / var(--cal-var) * 100vw);
  }
}

.p-index__offer-slide-item-txt {
  font-size: 1.8rem;
  color: #555;
  @media (width <= 768px) {
    font-size: calc(28 / var(--cal-var) * 100vw);
  }
}

.p-index__maintenance {
  border-top: 1px solid #cdcdcd;
  padding-block: 90px 180px;
  @media (width <= 768px) {
    padding-block: calc(110 / var(--cal-var) * 100vw) calc(150 / var(--cal-var) * 100vw);
  }
  .splide__pagination {
    bottom: -38px;
    left: calc(50% + 130px);
    @media (width <= 1240px) {
      left: calc(50% - 50px);
    }
    @media (width <= 768px) {
      bottom: calc(-29 / var(--cal-var) * 100vw);
      left: 0;
    }
  }
  .splide__pagination__page {
    width: 100px;
    height: 4px;
    border-radius: 0;
    margin: 0 10px;
    opacity: .2;
    background: #333333;
    @media (width <= 768px) {
      width: calc(120 / var(--cal-var) * 100vw);
      height: calc(6 / var(--cal-var) * 100vw);
      margin: 0 calc(15 / var(--cal-var) * 100vw);
    }
  }
  .splide__pagination__page.is-active {
    transform: scale(1);
    opacity: 1;
  }
}

.p-index__maintenance-slide-wrap {
  margin-inline: -200px;
  @media (width <= 1240px) {
    margin-inline: -20px;
  }
  @media (width <= 768px) {
    margin-inline: calc(-40 / var(--cal-var) * 100vw);
  }
}

.p-index__maintenance-slide-item {
  position: relative;
}

.p-index__maintenance-slide-item-img {
  @media (width <= 1240px) {
    width: 1136px;
  }
  @media (width <= 768px) {
    width: calc(710 / var(--cal-var) * 100vw);
    margin-bottom: calc(-100 / var(--cal-var) * 100vw);
  }
}

.p-index__maintenance-slide-item-info {
  background: #fff;
  border-radius: 10px 0 0 0;
  padding: 40px 50px;
  margin-left: auto;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 557px;
  @media (width <= 768px) {
    padding: calc(40 / var(--cal-var) * 100vw) calc(50 / var(--cal-var) * 100vw);
    width: calc(710 / var(--cal-var) * 100vw);
    position: relative;
  }
}

.p-index__maintenance-slide-item-num {
  font-size: 4rem;
  font-weight: 600;
  font-family: var(--font-alpha);
  line-height: 1;
  color: #ababab;
  margin-bottom: 20px;
  @media (width <= 768px) {
    font-size: calc(50 / var(--cal-var) * 100vw);
    margin-bottom: calc(20 / var(--cal-var) * 100vw);
  }
}

.p-index__maintenance-slide-item-ttl {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
  @media (width <= 768px) {
    font-size: calc(40 / var(--cal-var) * 100vw);
    margin-bottom: calc(20 / var(--cal-var) * 100vw);
  }
}

.p-index__maintenance-slide-item-txt {
  font-size: 1.8rem;
  line-height: 2;
  @media (width <= 768px) {
    font-size: calc(28 / var(--cal-var) * 100vw);
  }
}

.p-index__info {
  border-top: 1px solid #cdcdcd;
  padding-block: 90px 150px;
  @media (width <= 768px) {
    padding-block: calc(110 / var(--cal-var) * 100vw) calc(120 / var(--cal-var) * 100vw);
  }
  .c-ttl__en,
  .c-ttl__ja,
  .c-txt {
    text-align: center;
  }
  .c-ttl__en {
    justify-content: center;
    &:before {
      display: none;
    }
  }
  .c-ttl__ja {
    @media (width <= 768px) {
      margin-bottom: calc(30 / var(--cal-var) * 100vw);
    }
  }
}

.p-index__info-inner {
  display: flex;
  margin-top: 50px;
  @media (width <= 768px) {
    display: block;
    margin-top: calc(80 / var(--cal-var) * 100vw);
  }
}

.p-index__info-item {
  width: 50%;
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  text-align: center;
  position: relative;
  @media (width <= 768px) {
    width: 100%;
    height: calc(600 / var(--cal-var) * 100vw);
  }
  &:nth-of-type(1) {
    background: url(../img/index/shop01.jpg) center center / cover no-repeat;
    border-right: 1px solid #fff;
    @media (width <= 768px) {
      background: url(../img/index/sp/shop01.jpg) center center / cover no-repeat;
      border-right: none;
      border-bottom: 3px solid #fff;
    }
  }
  &:nth-of-type(2) {
    background: url(../img/index/shop02.jpg) center center / cover no-repeat;
    border-left: 1px solid #fff;
    @media (width <= 768px) {
      background: url(../img/index/sp/shop02.jpg) center center / cover no-repeat;
      border-left: none;
    }
  }
  &:has(.p-index__info-item-btn a:hover) {
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgb(48 48 54 / .5);
    }
  }
  
}

.p-index__info-item-subttl {
  font-size: 2rem;
  font-weight: 600;
  font-family: var(--font-alpha);
  margin-bottom: 20px;
  @media (width <= 768px) {
    font-size: calc(30 / var(--cal-var) * 100vw);
    margin-bottom: calc(30 / var(--cal-var) * 100vw);
  }
}

.p-index__info-item-ttl {
  font-size: 5rem;
  font-weight: 700;
  margin-bottom: 30px;
  line-height: 1;
  @media (width <= 768px) {
    font-size: calc(60 / var(--cal-var) * 100vw);
    margin-bottom: calc(40 / var(--cal-var) * 100vw);
  }
}

.p-index__info-item-txt {
  font-size: 1.8rem;
  margin-bottom: 40px;
  @media (width <= 768px) {
    font-size: calc(28 / var(--cal-var) * 100vw);
    margin-bottom: calc(50 / var(--cal-var) * 100vw);
  }
}

.p-index__info-item-btn {
  a {
    font-size: 1.8rem;
    font-weight: 700;
    background: #fff;
    border-radius: 25px;
    width: 260px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline: auto;
    transition: transform .2s;
    @media (width <= 768px) {
      font-size: calc(28 / var(--cal-var) * 100vw);
      border-radius: calc(50 / var(--cal-var) * 100vw);
      width: calc(400 / var(--cal-var) * 100vw);
      height: calc(100 / var(--cal-var) * 100vw);
    }
    &:hover {
      transform: scale(1.05);
    }
  }
}

.p-index__gallery {
  background: linear-gradient(90deg, rgb(238,238,238) 0%, rgb(214,220,224) 100%) center top / 100% 500px no-repeat;
  padding-block: 110px 100px;
  @media (width <= 768px) {
    padding-block: calc(70 / var(--cal-var) * 100vw) calc(50 / var(--cal-var) * 100vw);
  }
}

.p-index__gallery-meta {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-bottom: 50px;
  @media (width <= 768px) {
    display: block;
    margin-bottom: calc(80 / var(--cal-var) * 100vw);
    text-align: center;
  }
}

.p-index__gallery-meta-en {
  font-size: 10rem;
  font-weight: 600;
  font-family: var(--font-alpha);
  color: #fff;
  line-height: 1;
  @media (width <= 768px) {
    font-size: calc(110 / var(--cal-var) * 100vw);
    margin-bottom: calc(-60 / var(--cal-var) * 100vw);
  }
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
    to {
    transform: translateX(-100%);
  }
}

.p-index__gallery-scroll {
  display: flex;
  overflow: hidden;
}

.p-index__gallery-scroll-list {
  display: flex;
  list-style: none;
  padding: 0;
  animation: infinity-scroll-left 60s infinite linear 0.5s both;
}

.p-index__gallery-scroll-item {
  width: 360px;
  margin-inline: 25px;
  @media (width <= 768px) {
    width: calc(540 / var(--cal-var) * 100vw);
    margin-inline: calc(20 / var(--cal-var) * 100vw);
  }
  img {
    border-radius: 10px;
    @media (width <= 768px) {
      border-radius: calc(20 / var(--cal-var) * 100vw);
    }
  }
}

.p-subcon__mv-img {
  img {
    @media (width <= 768px) {
      width: 100%;
    }
  }
}

.p-subcon__mv-inner {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  @media (width <= 768px) {
    min-height: calc(450 / var(--cal-var) * 100vw);
  }
}

.p-subcon__mv-ttl-en {
  font-size: 7rem;
  font-weight: 600;
  font-family: var(--font-alpha);
  line-height: 1;
  color: #fff;
  margin-bottom: 20px;
  @media (width <= 768px) {
    font-size: calc(85 / var(--cal-var) * 100vw);
    margin-bottom: calc(20 / var(--cal-var) * 100vw);
    line-height: 1.2;
  }
}

.p-subcon__mv-ttl {
  font-size: 2.4rem;
  font-weight: 500;
  color: #fff;
  @media (width <= 768px) {
    font-size: calc(34 / var(--cal-var) * 100vw);
  }
}

.p-subcon__lead {
  padding-block: 100px;
  @media (width <= 768px) {
    padding-block: calc(120 / var(--cal-var) * 100vw) calc(145 / var(--cal-var) * 100vw);
  }
}

.p-subcon__lead-ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 40px;
  @media (width <= 768px) {
    font-size: calc(60 / var(--cal-var) * 100vw);
    margin-bottom: calc(50 / var(--cal-var) * 100vw);
    padding-block: calc(40 / var(--cal-var) * 100vw);
    border-top: 8px double var(--color-main);
    border-bottom: 8px double var(--color-main);
    text-align: center;
    line-height: 1.4;
  }
  &:before, &:after {
    color: var(--color-main);
    font-size: 5.5rem;
    @media (width <= 768px) {
      display: none;
    }
  }
  &:before {
    content: "《";
    margin-right: 20px;
  }
  &:after {
    content: "》";
    margin-left: 20px;
  }
}

.p-subcon__lead-txt {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 50px;
  @media (width <= 768px) {
    font-size: calc(30 / var(--cal-var) * 100vw);
    margin-bottom: calc(60 / var(--cal-var) * 100vw);
    text-align: center;
  }
}

.p-subcon__lead-scroll {
  display: flex;
  overflow: hidden;
}

.p-subcon__lead-scroll-list {
  display: flex;
  list-style: none;
  padding: 0;
  animation: infinity-scroll-left 60s infinite linear 0.5s both;
}

.p-subcon__lead-scroll-item {
  width: 525px;
  margin-inline: 20px;
  @media (width <= 768px) {
    width: calc(525 / var(--cal-var) * 100vw);
    margin-inline: calc(20 / var(--cal-var) * 100vw);
  }
  img {
    border-radius: 10px;
    @media (width <= 768px) {
      border-radius: calc(10 / var(--cal-var) * 100vw);
    }
  }
}

.p-about {
  .p-subcon__mv {
    background: url(../img/about/mv.jpg) center top / cover no-repeat;
    @media (width <= 768px) {
      background: url(../img/common/sp/bg_mv.jpg) center top / 100% no-repeat;
    }
  }
}

.p-about__point {
  background-image: url(../img/common/ashirai01.png), linear-gradient(90deg, rgb(238,238,238) 0%, rgb(214,220,224) 100%);
  background-position: calc(50% + 460px) -50px, center top;
  background-size: auto, auto;
  background-repeat: no-repeat, no-repeat;
  padding-block: 90px 100px;
  margin-bottom: 116px;
  @media (width <= 768px) {
    background-image: url(../img/common/ashirai01.png), linear-gradient(90deg, rgb(238,238,238) 0%, rgb(214,220,224) 100%);
    background-position: calc(50% + (216 / var(--cal-var) * 100vw)) calc(-50 / var(--cal-var) * 100vw), center top;
    background-size: calc(521 / var(--cal-var) * 100vw), auto;
    background-repeat: no-repeat, no-repeat;
    padding-block: calc(110 / var(--cal-var) * 100vw) calc(120 / var(--cal-var) * 100vw);
    margin-bottom: calc(120 / var(--cal-var) * 100vw);
  }
}

.p-about__point-list {
  margin-top: 50px;
  @media (width <= 768px) {
    margin-top: calc(80 / var(--cal-var) * 100vw);
  }
}

.p-about__point-item {
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 40px;
  @media (width <= 768px) {
    display: block;
    border-radius: calc(20 / var(--cal-var) * 100vw);
    padding-top: calc(40 / var(--cal-var) * 100vw);
  }
  & + & {
    margin-top: 50px;
    @media (width <= 768px) {
      margin-top: calc(60 / var(--cal-var) * 100vw);
    }
  }
}

.p-about__point-item-ttl {
  width: 300px;
  height: 70px;
  border-radius: 0 35px 35px 0;
  background: var(--color-main);
  color: #fff;
  font-size: 3.2rem;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  @media (width <= 768px) {
    width: calc(400 / var(--cal-var) * 100vw);
    height: calc(90 / var(--cal-var) * 100vw);
    border-radius: 0 calc(45 / var(--cal-var) * 100vw) calc(45 / var(--cal-var) * 100vw) 0;
    font-size: calc(42 / var(--cal-var) * 100vw);
  }
}

.p-about__point-item-dl {
  flex: 1;
  padding: 30px 40px 30px 0;
  @media (width <= 768px) {
    padding: calc(26 / var(--cal-var) * 100vw) calc(40 / var(--cal-var) * 100vw) calc(40 / var(--cal-var) * 100vw);
  }
  dt {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
    @media (width <= 768px) {
      font-size: calc(40 / var(--cal-var) * 100vw);
      margin-bottom: calc(20 / var(--cal-var) * 100vw);
    }
  }
  dd {
    font-size: 1.8rem;
    @media (width <= 768px) {
      font-size: calc(28 / var(--cal-var) * 100vw);
    }
  }
}

.p-about__feature {
  @media (width <= 768px) {
    margin-bottom: calc(50 / var(--cal-var) * 100vw);
  }
}

.p-about__feature-item {
  border-top: 1px solid #cdcdcd;
  padding-block: 100px;
  @media (width <= 768px) {
    padding-block: calc(100 / var(--cal-var) * 100vw);
  }
}

.p-about__feature-item-inner {
  display: flex;
  align-items: center;
  gap: 50px;
  @media (width <= 768px) {
    display: block;
  }
}


.p-about__feature-item-img {
  @media (width <= 768px) {
    margin-bottom: calc(50 / var(--cal-var) * 100vw);
  }
  img {
    border-radius: 10px;
    @media (width <= 768px) {
      border-radius: calc(20 / var(--cal-var) * 100vw);
    }
  }
}

.p-about__feature-item-num {
  font-size: 1.8rem;
  font-weight: 600;
  font-family: var(--font-alpha);
  margin-bottom: 10px;
  @media (width <= 768px) {
    font-size: calc(28 / var(--cal-var) * 100vw);
    margin-bottom: calc(16 / var(--cal-var) * 100vw);
  }
  .red {
    color: var(--color-main);
  }
}

.p-about__feature-item-ttl {
  font-size: 4.4rem;
  font-weight: 700;
  margin-bottom: 20px;
  @media (width <= 768px) {
    font-size: calc(54 / var(--cal-var) * 100vw);
    margin-bottom: calc(36 / var(--cal-var) * 100vw);
  }
}

.p-about__feature-item-txt {
  font-size: 1.8rem;
  @media (width <= 768px) {
    font-size: calc(28 / var(--cal-var) * 100vw);
  }
}

.p-about__feature-item-list {
  font-size: 2.2rem;
  font-weight: 700;
  margin-top: 30px;
  @media (width <= 768px) {
    font-size: calc(32 / var(--cal-var) * 100vw);
    margin-top: calc(40 / var(--cal-var) * 100vw);
  }
  li {
    &:before {
      content: "\f058";
      font-family: var(--font-awesome);
      font-weight: 900;
      color: var(--color-main);
      margin-right: 10px;
      @media (width <= 768px) {
        margin-right: calc(15 / var(--cal-var) * 100vw);
      }
    }
  }
}


.p-feature {
  .p-subcon__mv {
    background: url(../img/feature/mv.jpg) center top / cover no-repeat;
    @media (width <= 768px) {
      background: url(../img/common/sp/bg_mv.jpg) center top / 100% no-repeat;
    }
  }

  .c-pro {
    background-size: auto, 100% 600px;
    padding-block: 110px 150px;
    @media (width <= 768px) {
      background-size: calc(521 / var(--cal-var) * 100vw), 100% calc(800 / var(--cal-var) * 100vw);
      padding-block: calc(110 / var(--cal-var) * 100vw) calc(150 / var(--cal-var) * 100vw);
    }

    .c-ttl__ja {
      @media (width <= 768px) {
        margin-inline: calc(-30 / var(--cal-var) * 100vw);
      }
    }
  }

}

.p-feature__1column {
  border-top: 1px solid #cdcdcd;
  padding-block: 90px 100px;
  @media (width <= 768px) {
    padding-block: calc(110 / var(--cal-var) * 100vw) calc(120 / var(--cal-var) * 100vw);
  }
}

.p-feature__1column-contents {
  margin-top: 60px;
  position: relative;
  @media (width <= 768px) {
    margin-top: calc(50 / var(--cal-var) * 100vw);
  }
}

.p-feature__1column-img {
  
  img {
    border-radius: 10px;
    @media (width <= 768px) {
      border-radius: calc(20 / var(--cal-var) * 100vw);
    }
  }
}

.p-feature__1column-info {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  border-radius: 10px 0 10px 0;
  padding: 40px 50px 0;
  @media (width <= 768px) {
    position: static;
    border-radius: 0;
    padding: calc(30 / var(--cal-var) * 100vw) 0 0;
  }
}

.p-feature__1column-ttl {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 10px;
  @media (width <= 768px) {
    font-size: calc(40 / var(--cal-var) * 100vw);
    margin-bottom: calc(20 / var(--cal-var) * 100vw);
  }
}

.p-feature__1column-txt {
  font-size: 1.8rem;
  @media (width <= 768px) {
    font-size: calc(28 / var(--cal-var) * 100vw);
  }
}

.p-feature__2column {
  border-top: 1px solid #cdcdcd;
  padding-block: 90px 150px;
  @media (width <= 768px) {
    padding-block: calc(110 / var(--cal-var) * 100vw) calc(120 / var(--cal-var) * 100vw);
  }
}

.p-feature__2column-list {
  display: flex;
  gap: 40px;
  margin-top: 60px;
  @media (width <= 768px) {
    flex-direction: column;
    gap: calc(60 / var(--cal-var) * 100vw);
    margin-top: calc(60 / var(--cal-var) * 100vw);
  }
}

.p-feature__2column-item {
  width: 580px;
  @media (width <= 768px) {
    width: inherit;
  }
}

.p-feature__2column-item-img {
  margin-bottom: 20px;
  @media (width <= 768px) {
    margin-bottom: calc(30 / var(--cal-var) * 100vw);
  }
  img {
    border-radius: 10px;
    @media (width <= 768px) {
      border-radius: calc(20 / var(--cal-var) * 100vw);
    }
  }
}

.p-feature__2column-item-ttl {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 10px;
  @media (width <= 768px) {
    font-size: calc(40 / var(--cal-var) * 100vw);
    margin-bottom: calc(14 / var(--cal-var) * 100vw);
  }
}

.p-feature__2column-item-txt {
  font-size: 1.8rem;
  color: #555;
  @media (width <= 768px) {
    font-size: calc(28 / var(--cal-var) * 100vw);
  }
}

.p-feature__3column {
  background-image: url(../img/common/ashirai01.png), linear-gradient(90deg, rgb(238,238,238) 0%, rgb(214,220,224) 100%);
  background-position: calc(50% + 460px) -50px, center top;
  background-size: auto, 100% 450px;
  background-repeat: no-repeat, no-repeat;
  padding-block: 90px 100px;
  @media (width <= 768px) {
    background-image: url(../img/common/ashirai01.png), linear-gradient(90deg, rgb(238,238,238) 0%, rgb(214,220,224) 100%);
    background-position: calc(50% + (216 / var(--cal-var) * 100vw)) calc(-50 / var(--cal-var) * 100vw), center top;
    background-size: calc(521 / var(--cal-var) * 100vw), 100% calc(750 / var(--cal-var) * 100vw);
    background-repeat: no-repeat, no-repeat;
    padding-block: calc(110 / var(--cal-var) * 100vw) calc(120 / var(--cal-var) * 100vw);
  }
}

.p-feature__3column-imgs {
  display: flex;
  gap: 30px;
  margin-top: 60px;
  @media (width <= 768px) {
    flex-direction: column;
    gap: calc(60 / var(--cal-var) * 100vw);
    margin-top: calc(80 / var(--cal-var) * 100vw);
  }
}

.p-feature__3column-item-img {
  margin-bottom: 20px;
  @media (width <= 768px) {
    margin-bottom: calc(30 / var(--cal-var) * 100vw);
  }
  img {
    border-radius: 10px;
    @media (width <= 768px) {
      border-radius: calc(20 / var(--cal-var) * 100vw);
    }
  }
}

.p-feature__3column-item-subttl {
  font-size: 1.6rem;
  font-weight: 600;
  font-family: var(--font-alpha);
  color: #ababab;
  @media (width <= 768px) {
    font-size: calc(26 / var(--cal-var) * 100vw);
  }
}

.p-feature__3column-item-ttl {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 20px;
  @media (width <= 768px) {
    font-size: calc(36 / var(--cal-var) * 100vw);
    margin-bottom: calc(20 / var(--cal-var) * 100vw);
  }
}

.p-feature__3column-item-txt {
  font-size: 1.6rem;
  color: #555555;
  @media (width <= 768px) {
    font-size: calc(26 / var(--cal-var) * 100vw);
  }
}

.p-feature__leftimg {
  border-top: 1px solid #cdcdcd;
  padding-block: 90px 150px;
  @media (width <= 768px) {
    padding-block: calc(110 / var(--cal-var) * 100vw) calc(120 / var(--cal-var) * 100vw);
  }
}

.p-feature__leftimg-inner {
  display: flex;
  gap: 50px;
  margin-top: 60px;
  @media (width <= 768px) {
    display: block;
    margin-top: calc(60 / var(--cal-var) * 100vw);
  }
}

.p-feature__leftimg-img {
  @media (width <= 768px) {
    margin-bottom: calc(40 / var(--cal-var) * 100vw);
  }
  img {
    border-radius: 10px;
    @media (width <= 768px) {
      border-radius: calc(20 / var(--cal-var) * 100vw);
    }
  }
}

.p-feature__leftimg-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  @media (width <= 768px) {
    gap: calc(40 / var(--cal-var) * 100vw);
  }
}

.p-feature__leftimg-item {
  border: 1px solid #eeeeee;
  border-radius: 10px;
  padding: 20px 30px;
  @media (width <= 768px) {
    border-radius: calc(20 / var(--cal-var) * 100vw);
    padding: calc(30 / var(--cal-var) * 100vw) calc(40 / var(--cal-var) * 100vw);
  }
  dt {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 4px;
    @media (width <= 768px) {
      font-size: calc(40 / var(--cal-var) * 100vw);
      margin-bottom: calc(10 / var(--cal-var) * 100vw);
    }
  }
  dd {
    font-size: 1.8rem;
    @media (width <= 768px) {
      font-size: calc(28 / var(--cal-var) * 100vw);
    }
  }
}


.p-info {
  .p-subcon__mv {
    background: url(../img/info/mv.jpg) center top / cover no-repeat;
    @media (width <= 768px) {
      background: url(../img/common/sp/bg_mv.jpg) center top / 100% no-repeat;
    }
  }
}

.p-info__contents {
  background: url(../img/info/img01.jpg) center center / cover no-repeat;
  background-image: linear-gradient(90deg, rgb(48 48 54 /.8) 0%, rgb(48 48 54 /.8) 100%), url(../img/info/img01.jpg);
  background-position: left center, center center;
  background-size: calc(50% + 110px), cover;
  background-repeat: no-repeat, no-repeat;
  margin-top: 100px;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  @media (width <= 768px) {
    background: #303036;
    margin-top: calc(120 / var(--cal-var) * 100vw);
    min-height: inherit;
  }
  &.musashiurawa {
    background: url(../img/info/img02.jpg) center center / cover no-repeat;
    background-image: linear-gradient(90deg, rgb(48 48 54 /.8) 0%, rgb(48 48 54 /.8) 100%), url(../img/info/img02.jpg);
    background-position: right center, center center;
    background-size: calc(50% + 110px), cover;
    background-repeat: no-repeat, no-repeat;
    margin-top: 50px;
    @media (width <= 768px) {
      background: #303036;
      margin-top: calc(100 / var(--cal-var) * 100vw);
    }
    .p-info__contents-box {
      margin-left: auto;
    }
  }
}

.p-info__contents-img {
  img {
    @media (width <= 768px) {
      width: 100%;
    }
  }
}

.p-info__contents-box {
  width: calc(50% + 30px);
  @media (width <= 768px) {
    width: inherit;
    padding-block: calc(80 / var(--cal-var) * 100vw);
  }
}

.p-info__contents-subttl {
  font-size: 2rem;
  font-weight: 600;
  font-family: var(--font-alpha);
  margin-bottom: 10px;
  @media (width <= 768px) {
    font-size: calc(30 / var(--cal-var) * 100vw);
    margin-bottom: calc(30 / var(--cal-var) * 100vw);
  }
}

.p-info__contents-ttl {
  font-size: 3.6rem;
  font-weight: 700;
  margin-bottom: 20px;
  @media (width <= 768px) {
    font-size: calc(44 / var(--cal-var) * 100vw);
    margin-bottom: calc(40 / var(--cal-var) * 100vw);
  }
}

.p-info__contents-txt {
  font-size: 1.8rem;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgb(255 255 255 / .2);
  @media (width <= 768px) {
    font-size: calc(28 / var(--cal-var) * 100vw);
    margin-bottom: calc(50 / var(--cal-var) * 100vw);
    padding-bottom: calc(50 / var(--cal-var) * 100vw);
  }
}

.p-info__contents-list {
  dl {
    & + & {
      margin-top: 25px;
      @media (width <= 768px) {
        margin-top: calc(40 / var(--cal-var) * 100vw);
      }
    }
  }
  dt {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
    @media (width <= 768px) {
      font-size: calc(30 / var(--cal-var) * 100vw);
      margin-bottom: calc(5 / var(--cal-var) * 100vw);
    }
    &:before {
      content: "\f058";
      font-family: var(--font-awesome);
      font-weight: 900;
      color: var(--color-main);
      margin-right: 10px;
    }
  }
  dd {
    font-size: 1.6rem;
    @media (width <= 768px) {
      font-size: calc(26 / var(--cal-var) * 100vw);
    }
  }
  
}

.p-info__contents-attend {
  margin-top: 30px;
  font-size: 1.2rem;
  @media (width <= 768px) {
    font-size: calc(20 / var(--cal-var) * 100vw);
  }
}

.p-info__shop {
  border-top: 1px solid #cdcdcd;
  padding-block: 110px 150px;
  @media (width <= 768px) {
    padding-block: calc(110 / var(--cal-var) * 100vw) calc(150 / var(--cal-var) * 100vw);
  }
  .c-ttl__en,
  .c-ttl__ja,
  .c-txt {
    text-align: center;
  }
  .c-ttl__en {
    justify-content: center;
    &:before {
      display: none;
    }
  }
}

.p-info__shop-list {
  display: grid;
  grid-template-columns: 570px 570px;
  grid-template-rows: auto;
  gap: 0 60px;
  margin-top: 50px;
  @media (width <= 768px) {
    display: flex;
    flex-direction: column;
    gap: calc(80 / var(--cal-var) * 100vw);
    margin-top: calc(80 / var(--cal-var) * 100vw);
  }
}

.p-info__shop-item {
  width: 570px;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  @media (width <= 768px) {
    width: inherit;
    display: block;
  }
}

.p-info__shop-item-img {
  margin-bottom: 20px;
  @media (width <= 768px) {
    margin-bottom: calc(20 / var(--cal-var) * 100vw);
  }
  img {
    border-radius: 10px;
    border: 1px solid #eeeeee;
    @media (width <= 768px) {
      border-radius: calc(20 / var(--cal-var) * 100vw);
    }
  }
}

.p-info__shop-item-ttl {
  font-size: 3.6rem;
  font-weight: 700;
  margin-bottom: 14px;
  @media (width <= 768px) {
    font-size: calc(44 / var(--cal-var) * 100vw);
    margin-bottom: calc(20 / var(--cal-var) * 100vw);
  }
}

.p-info__shop-item-txt {
  color: #555;
  font-size: 1.8rem;
  line-height: 2;
  margin-bottom: 18px;
  @media (width <= 768px) {
    font-size: calc(28 / var(--cal-var) * 100vw);
    margin-bottom: calc(38 / var(--cal-var) * 100vw);
  }
}

.p-info__shop-item-attend {
  font-size: .8em;
}

.p-info__shop-item-address {
  font-size: 1.6rem;
  margin-bottom: 40px;
  @media (width <= 768px) {
    font-size: calc(26 / var(--cal-var) * 100vw);
    margin-bottom: calc(38 / var(--cal-var) * 100vw);
  }
}


/* =================================
 utility
================================= */
 /* spからコーディング : モバイルファースト */
/* @media (width >= 1025px) {
  .u-pc {
    display: block;
  }
  .u-sp {
    display: none;
  }
}
@media (width <= 1024px) {
  .u-pc {
    display: none;
  }
  .u-sp {
    display: block;
  }
} */

/* pcからコーディング */
@media (width >= 769px) {
  .u-pc {
    display: block;
  }
  .u-sp {
    display: none;
  }
}
@media (width <= 768px) {
  .u-pc {
    display: none;
  }
  .u-sp {
    display: block;
  }
}