@charset "UTF-8";
/* HEX */
:root {
  --leading-trim: calc((1em - 1lh) / 2);
  /* width */
  --w1200:1200px;
  --w980:980px;
  --w860:860px;
  --c_white: #ffffff;
  --c_black: #0F0F0F;
  --c_bgcolor1:#f1f7eb;
  --c_red1: #c90027;
  --c_green1: #4a6d41;
  --c_yellow1: #ffe818;
  --c_beige1: #705336;
  --c_course01: #ed7700;
  --c_course02: #ae569c;
  --c_txt1: #2c2f30;
  --c_link: #6d6d6d;
  --c_logo1: #eb517d;
  --c_logo2: #6cb830;
  --c_logo3: #fabc00;
  --c_logo4: #0aa2dd;
  --c_logo5: #ed7600;
  --c_logo6: #ad589d;
  --c_logo7: #00b3a7;
}

.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-maru-gothic-medium {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-maru-gothic-bold {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/*
@mixin midashi_wave {
&:after {
	background-image : url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90.579' height='5.227'%3E%3Cpath fill='none' stroke='%23000' stroke-miterlimit='10' d='M.29.614l5.622 4 5.624-4 5.624 4 5.624-4 5.624 4 5.623-4 5.62 4 5.622-4 5.625 4 5.625-4 5.625 4 5.626-4 5.623 4 5.629-4 5.632 4 5.632-4'/%3E%3C/svg%3E");
	background-position : center center;
	background-repeat : no-repeat;
	background-size : contain;
	content : "";
	display : block;
	height : 6px;
	margin : 10px auto 0;
	width : 200px;
}
}
*/
/* reset
----------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll;
}

img, picture, video, canvas, svg {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  margin-block-end: 0.8em;
}

* > :last-child {
  margin-block-end: 0;
}

a {
  word-break: break-all;
}

svg {
  display: inline-block;
  fill: currentColor;
}

/* font
----------------- */
html,
body {
  padding: 0;
  margin: 0;
  background-color: var(--c_white);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 140px;
}

body {
  font-family: "Zen Maru Gothic", "Noto Sans JP Variable", "游ゴシック", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  color: rgb(var(--black));
  font-feature-settings: "palt";
  letter-spacing: 0.04em;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  word-break: normal; /* 単語の分割はデフォルトに依存 */
  line-break: strict;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}
@media (hover: hover) {
  a:where(:-moz-any-link, :enabled, summary):hover {
    text-decoration: none;
  }
  a:where(:any-link, :enabled, summary):hover {
    text-decoration: none;
  }
}
a[href^="tel:"] {
  pointer-events: auto;
}
@media (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

br.spon {
  display: block;
}
@media (min-width: 768px) {
  br.spon {
    display: none;
  }
}
br.spoff {
  display: none;
}
@media (min-width: 768px) {
  br.spoff {
    display: block;
  }
}

.nolist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.scrollin {
  transform: translateY(30px);
  opacity: 0;
  transition: all 0.9s ease-in-out;
}

.scrollin.active {
  transform: translateY(0);
  opacity: 1;
}

/* font */
.f_zenmaru {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.f_zenmaru {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.f_deco {
  font-family: "Kaisei Decol", serif;
  font-weight: 500;
  font-style: normal;
}

/* container
------------------- */
:where([class^=sec_]):not(.sec_title) {
  padding-block: 4rem;
}
@media (min-width: 768px) {
  :where([class^=sec_]):not(.sec_title) {
    padding-block: 7rem;
  }
}

:where([class$=_title]) {
  line-height: 1.2;
}

.container {
  container-type: inline-size;
  position: relative;
  display: flow-root;
  max-width: 1200px;
  width: calc(100% - 11vw);
  margin-inline: auto;
  /*@include g.sp-min {
    padding: 0 4vw;
  }*/
}

.container_m {
  max-width: 980px;
}

.container_s {
  max-width: 860px;
}

/* svgsize
--------------------- */
svg {
  display: inline-block;
  fill: currentColor;
  stroke: none;
}

body {
  background-image: url(../images/bg.png);
  background-size: cover;
  background-attachment: fixed;
}

.frm {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "image" "recruit";
}
@media (min-width: 768px) {
  .frm {
    grid-template-columns: 1fr 420px;
    grid-template-rows: 1fr auto;
    grid-template-areas: "image recruit";
    align-items: start;
  }
}

.frm_poster {
  grid-area: image;
}
@media (min-width: 768px) {
  .frm_poster {
    position: sticky;
    top: 0;
    height: 100dvh;
  }
}

.frm_main {
  align-self: start;
  grid-area: recruit;
  position: relative;
}

/* frm_poster
------------------ */
.frm_poster {
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block: 50px;
}
@media (min-width: 768px) {
  .frm_poster {
    padding-block: 0;
  }
}

.frm_poster_memo {
  font-size: 0.9rem;
  padding-block: 8px;
  padding-inline: 1rem;
  text-align: center;
}
.frm_poster_memo span {
  display: inline-block;
}

.poster {
  text-align: center;
  margin-inline: 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.poster img {
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.3);
}
@media (min-width: 768px) {
  .poster img {
    width: auto;
    height: 86vh;
  }
}

/* main
------------------ */
:root {
  --inline:30px;
}

.frm_main {
  position: relative;
  padding-block: 2rem;
  padding-inline: var(--inline);
  background-color: #ffcdec;
  background-image: url(../images/stripe.png);
  background-attachment: fixed;
  container-type: inline-size;
}

.openingstaff {
  position: relative;
}

/*リボンの位置*/
.openingstaff_title {
  position: relative;
}
.openingstaff_title h2 {
  color: #ffffff;
  background-color: #30cfa0;
  -webkit-clip-path: polygon(100% 0%, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%, 0 0);
          clip-path: polygon(100% 0%, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%, 0 0);
  padding-block: 5px;
  text-align: center;
  font-size: 1.2rem;
}
.openingstaff_title h2 span {
  display: block;
  border-top: dashed 1px #FFF;
  border-bottom: dashed 1px #FFF;
  padding-block: 0.8rem;
  padding-inline: 20px;
}

.openingstaff_memo {
  margin-block: 1.8rem;
  background-color: #fff;
  padding-block: 0.8em;
  padding-inline: 1.2rem;
  border-radius: 10px;
}

.recruit dt {
  position: relative;
  background-color: #ff16a6;
  color: #fff;
  padding-block: 0.4em;
  padding-inline: 1.2rem;
  border-radius: 10px;
  display: inline-block;
}
.recruit dt::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 10px;
  background-color: #ff16a6;
  bottom: -10px;
  left: 0;
  right: 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
          clip-path: polygon(0 0, 100% 0, 50% 100%);
  margin: auto;
}
.recruit dd {
  margin-block: 8px 1.4rem;
  background-color: #fff;
  padding-block: 0.8em;
  padding-inline: 1.2rem;
  border-radius: 10px;
}
.recruit .list {
  text-indent: -1em;
  padding-left: 1em;
}

.recruit_btn {
  text-align: center;
}
.recruit_btn img {
  filter: drop-shadow(2px 6px 8px rgba(0, 0, 0, 0.2));
}
@media (min-width: 768px) {
  .recruit_btn {
    position: fixed;
    bottom: 20px;
    right: 384px;
  }
  .recruit_btn img {
    transform: rotate(-8deg);
  }
}

.sns_btn {
  text-align: center;
  margin-block-start: 2rem;
}
.sns_btn .btn_x {
  display: flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  gap: 10px;
  padding-block: 0.3em;
  padding-inline: 1.4em;
  background-color: #000;
  border-radius: 8px;
  color: #fff;
}

.copyright {
  margin-block-start: 3rem;
  text-align: right;
  font-size: 12px;
}/*# sourceMappingURL=style.css.map */