@charset "utf-8";

html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,address,em,img,strong,sub,sup,b,i,dl,dt,dd,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,figcaption,figure,footer,header,hgroup,menu,nav,section,time,audio,video,fieldset{margin:0;padding:0;border:0;outline:0;font-size:100%;font-style:normal;vertical-align:baseline;background:transparent}
html {-webkit-text-size-adjust: 100%;}
img,svg {line-height:0;vertical-align:top;}
main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,time,picture,summary{display:block}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{color:inherit;margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select,textarea,label{vertical-align:top}
input,textarea,button,select{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;outline:none;resize:none;}
button {cursor:pointer;padding:0;border:0;background:transparent}
button[disabled] {cursor:default;}
*,::before,::after {box-sizing:border-box;overflow-wrap: break-word;}
select::-ms-expand { display: none;}
summary::-webkit-details-marker { display: none;}
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none;}

:root {
  --vw: 1vw;
  --basic-pc-size: 1440;
  --basic-sp-size: 390;
  --color-primary: #F08300;
  --contents-width: min(100% - 2rem, 24.375rem);
  --basic-contents-width: 1024;
}
@media (min-width: 768px) {
  :root {
    --contents-width: calc(var(--basic-contents-width) / 16 * 1rem);
  }
}

html {
  color: #424242;
}
@media (min-width: 390px) {
  html {
    font-size: clamp(16px, var(--vw) * 16 / var(--basic-sp-size) * 100, 18px);
  }
}
@media (min-width: 768px) {
  html {
    font-size: calc(var(--vw) * 16 / var(--basic-pc-size) * 100);
  }
}
@media (min-width: 1440px) {
  html {
    font-size: 16px;
  }
}
@media (min-width: 1920px) {
  html {
    font-size: calc(var(--vw) * 16 / 1920 * 100);
  }
}

body {
  font-size: calc(15 / 16 * 1rem);
  font-family: 'Noto Sans JP', sans-serif;
  line-height: calc(25 / 15);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px) {
  body {
    font-size: 1rem;
    line-height: calc(31 / 16);
  }
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.l-header {
  padding: 1.066rem;
  margin-bottom: 1rem;
}
.l-header__logo {
  width: calc(200 / 16 * 1rem);
}
.l-main {
  width: var(--contents-width);
  margin-inline: auto;
  padding-bottom: calc(80 / 16 * 1rem);
}
.p-home__heading {
  font-size: 1.1rem;
  margin-bottom: 1em;
}
.p-home__body {

}
.p-home__text {
  font-weight: 500;
}

.p-home__names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(50 / 16 * 1rem);
  margin-top: calc(40 / 16 * 1rem);
}
.p-home__name {
  width: 100%;
  position: relative;
}
.p-home__name.is-ren::after {
  content: '';
  aspect-ratio: 80/73;
  background: url('../img2/arrow.webp') no-repeat center / contain;
  width: calc(30 / 16 * 1rem);
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.625rem);
  rotate: 90deg;
  margin-inline: auto;
}

.p-home__date {
  font-weight: 900;
  line-height: 1.5;
  margin-top: calc(10 / 16 * 1rem);
  width: fit-content;
  margin-inline: auto;
}

.p-home__button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--color-primary);
  width: 100%;
  --webkit-mask: url('../img2/ren_btn_shape.webp') no-repeat center / contain;
  mask: url('../img2/ren_btn_shape.webp') no-repeat center / contain;
  aspect-ratio: 960/194;
  text-decoration: none;
  width: 100%;
  margin-top: calc(60 / 16 * 1rem);
  margin-inline: auto;
}
.p-home__button::before {
  position: absolute;
  inset: 0;
  background: url('../img2/ren_btn_bg.webp') no-repeat center / contain;
  content: '';
  transition: opacity .4s ease-in-out;
}

.p-home__button__arrow {
  position: absolute;
  top: 50%;
  right: calc(100% - 1.5em);
  aspect-ratio: 10 / 9;
  width: 2.5em;
  background-color: var(--color-primary);
  -webkit-mask: url(../img2/shape_icon_wrap.webp) no-repeat center center / 100% 100%;
  mask: url(../img2/shape_icon_wrap.webp) no-repeat center center / 100% 100%;
  translate: 100% -50%;
  color: #fff;
  display: block;
  display: grid;
  place-items: center;
  transition: .3s ease;
}
.p-home__button__arrow::before {
  background-color: currentColor;
  content: "";
  aspect-ratio: 56 / 52;
  -webkit-mask: url(../img2/shape_arrow.webp) no-repeat center center / 99% 99%;
  mask: url(../img2/shape_arrow.webp) no-repeat center center / 99% 99%;
  width: 1em;
  display: block;
  font-size: .95em;
}
.p-home__button__label {
  position: relative;
  font-weight: 900;
  padding-left: calc(50 / 16 * 1rem);
}

@media (hover: hover) {
  .p-home__button:hover {
    color: #fff;
  }
  .p-home__button:hover::before {
    opacity: 0;
  }
  .p-home__button:hover .p-home__button__arrow {
    color: var(--color-primary);
    background-color: #fff;
  }
}

@media (min-width: 768px) {
  .l-header {
    padding: calc(34 / 16 * 1rem) calc(40 / 16 * 1rem);
    margin-bottom: calc(28 / 16 * 1rem);
  }

  .l-header__logo {
    width: calc(260 / 16 * 1rem);
  }

  .l-main {

  }

  .p-home__heading {
    font-weight: 900;
    font-size: calc(30 / 16 * 1rem);
    line-height: 1.5;
  }

  .p-home__body {

  }

  .p-home__text {

  }

  .p-home__names {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: calc(120 / 16 * 1rem);
    margin-top: calc(48 / 16 * 1rem);
  }

  .p-home__name.is-ren::after {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(100% + 3.75rem);
    translate: 50% calc(-50% - 1.0625rem);
    rotate: 0deg;
    margin: 0;
    /* margin-bottom: 2.215rem; */
  }

  



  .p-home__button {
    font-size: calc(20 / 16 * 1rem);
    width: calc(477 / 16 * 1rem);
    margin-top: calc(48 / 16 * 1rem);
  }
  .p-home__button__label {
    padding-left: calc(64 / 16 * 1rem);
  }
}