@charset "utf-8";

:root {
  --color: #1e1e1e;
  --misugi-pink: #ed6ba3;
  --misugi-blue: #3a5595;

  --c-main: #f38712;
  --c-sub: #5d4037;
  --c-point: #dccbb8;
  --c-link: #0071bc;
  --gray: #e0e0e0;
  --gray_d: #999;
  --bg-main: #fff9f0;
  --bg-sub: #ece3d9;
  --bg-point: #fdebd0;
  --bg-gray: #f5f5f5;
  --border: 1px solid var(--gray);
  --radius: 5px;

  --en: "Archivo Black", sans-serif;
  --opacity: 0.9;
  --transition: 0.3s;
}

/* -------------------------------------
body
-------------------------------------*/
* {
  box-sizing: border-box;
  font-style: normal;
  font-weight: unset;
  list-style: none;
}
body {
  color: var(--color);
  font-family: "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
  font-size: 100% !important;
  line-height: 170% !important;
}

@media (max-width: 680px) {
  body {
    font-size: 95% !important;
    line-height: 170% !important;
  }
}

/* -------------------------------------
セクション
-------------------------------------*/
section,
aside {
  margin: 90px auto;
}
section[class*="bg"] {
  overflow: hidden;
}
section:not([class*="sec-w90p"]) {
  margin-block: 0;
  padding: 90px 0;
}
.sec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
}

@media (max-width: 680px) {
  section,
  aside {
    margin: 70px auto;
  }
  section:not([class*="sec-w90p"]) {
    padding: 70px 0;
  }
  .sec-grid {
    gap: 40px;
  }
}

/* -------------------------------------
clearfix
-------------------------------------*/
/* clearfix */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

/* -------------------------------------
display
-------------------------------------*/
body .sp {
  display: none;
}
@media (max-width: 680px) {
  body .pc {
    display: none;
  }
  body .sp {
    display: block;
  }
}

/* -------------------------------------
width
-------------------------------------*/
.w100p {
  width: 100%;
}
.sec-w90p {
  width: 90%;
  max-width: 1000px;
  margin-inline: auto;
}
@media (max-width: 680px) {
  .sec-w90p {
    width: 88%;
  }
}

/* -------------------------------------
margin
-------------------------------------*/
.mrb0 {
  margin-bottom: 0px !important;
}
.mrb4 {
  margin-bottom: 4px !important;
}
.mrb5 {
  margin-bottom: 5px !important;
}
.mrb10 {
  margin-bottom: 10px !important;
}
.mrb15 {
  margin-bottom: 15px !important;
}
.mrb20 {
  margin-bottom: 20px !important;
}
.mrb30 {
  margin-bottom: 30px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.mrb40 {
  margin-bottom: 40px !important;
}
.mrb50 {
  margin-bottom: 50px !important;
}
.mrb60 {
  margin-bottom: 60px !important;
}
.mrb70 {
  margin-bottom: 70px !important;
}
.mrb80 {
  margin-bottom: 80px !important;
}
.mrb90 {
  margin-bottom: 90px !important;
}
.mrb100 {
  margin-bottom: 100px !important;
}

.mrt0 {
  margin-top: 0px !important;
}
.mrt10 {
  margin-top: 10px !important;
}
.mrt20 {
  margin-top: 20px !important;
}
.mrt30 {
  margin-top: 30px !important;
}
.mrt40 {
  margin-top: 40px !important;
}
.mrt50 {
  margin-top: 50px !important;
}
.mrt60 {
  margin-top: 60px !important;
}
.mrt70 {
  margin-top: 70px !important;
}
.mrt80 {
  margin-top: 80px !important;
}
.mrt90 {
  margin-top: 90px !important;
}
.mrt100 {
  margin-top: 100px !important;
}

.mrr10 {
  margin-right: 10px !important;
}
.mrr20 {
  margin-right: 20px !important;
}

body .mb0 {
  margin-bottom: 0;
}
body .mb5 {
  margin-bottom: 5px;
}
body .mb10 {
  margin-bottom: 10px;
}
body .mb15 {
  margin-bottom: 15px;
}
body .mb20 {
  margin-bottom: 20px;
}
body .mb30 {
  margin-bottom: 30px;
}
body .mb40 {
  margin-bottom: 40px;
}
body .mb50 {
  margin-bottom: 50px;
}
body .mb70 {
  margin-bottom: 70px;
}
body .mb80 {
  margin-bottom: 80px;
}
body .mb100 {
  margin-bottom: 100px;
}
body .mb150 {
  margin-bottom: 150px;
}
body .mt0 {
  margin-top: 0px;
}
body .mt5 {
  margin-top: 5px;
}
body .mt10 {
  margin-top: 10px;
}
body .mt15 {
  margin-top: 15px;
}
body .mt20 {
  margin-top: 20px;
}
body .mt30 {
  margin-top: 30px;
}
body .mt40 {
  margin-top: 40px;
}
body .mt50 {
  margin-top: 50px;
}
body .mt70 {
  margin-top: 70px;
}
body .mt80 {
  margin-top: 80px;
}
body .mt100 {
  margin-top: 100px;
}
body .mt150 {
  margin-top: 150px;
}

@media (max-width: 680px) {
  body .mb20 {
    margin-bottom: 15px;
  }
  body .mb30 {
    margin-bottom: 25px;
  }
  body .mb40 {
    margin-bottom: 30px;
  }
  body .mb50 {
    margin-bottom: 40px;
  }
  body .mb70 {
    margin-bottom: 50px;
  }
  body .mb80 {
    margin-bottom: 60px;
  }
  body .mb100 {
    margin-bottom: 80px;
  }
  body .mb150 {
    margin-bottom: 100px;
  }
  body .mt20 {
    margin-top: 15px;
  }
  body .mt30 {
    margin-top: 25px;
  }
  body .mt40 {
    margin-top: 30px;
  }
  body .mt50 {
    margin-top: 40px;
  }
  body .mt70 {
    margin-top: 50px;
  }
  body .mt80 {
    margin-top: 60px;
  }
  body .mt100 {
    margin-top: 80px;
  }
  body .mt150 {
    margin-top: 100px;
  }
}

/* -------------------------------------
padding
-------------------------------------*/
body .pb0 {
  padding-bottom: 0;
}
body .pb5 {
  padding-bottom: 5px;
}
body .pb10 {
  padding-bottom: 10px;
}
body .pb15 {
  padding-bottom: 15px;
}
body .pb20 {
  padding-bottom: 20px;
}
body .pb30 {
  padding-bottom: 30px;
}
body .pb40 {
  padding-bottom: 40px;
}
body .pb50 {
  padding-bottom: 50px;
}
body .pb70 {
  padding-bottom: 70px;
}
body .pb80 {
  padding-bottom: 80px;
}
body .pb100 {
  padding-bottom: 100px;
}
body .pb150 {
  padding-bottom: 150px;
}
body .pt0 {
  padding-top: 0px;
}
body .pt5 {
  padding-top: 5px;
}
body .pt10 {
  padding-top: 10px;
}
body .pt15 {
  padding-top: 15px;
}
body .pt20 {
  padding-top: 20px;
}
body .pt30 {
  padding-top: 30px;
}
body .pt40 {
  padding-top: 40px;
}
body .pt50 {
  padding-top: 50px;
}
body .pt70 {
  padding-top: 70px;
}
body .pt80 {
  padding-top: 80px;
}
body .pt100 {
  padding-top: 100px;
}
body .pt150 {
  padding-top: 150px;
}

@media (max-width: 680px) {
  body .pb20 {
    padding-bottom: 15px;
  }
  body .pb30 {
    padding-bottom: 25px;
  }
  body .pb40 {
    padding-bottom: 30px;
  }
  body .pb50 {
    padding-bottom: 40px;
  }
  body .pb70 {
    padding-bottom: 50px;
  }
  body .pb80 {
    padding-bottom: 60px;
  }
  body .pb100 {
    padding-bottom: 80px;
  }
  body .pb150 {
    padding-bottom: 100px;
  }
  body .pt20 {
    padding-top: 15px;
  }
  body .pt30 {
    padding-top: 25px;
  }
  body .pt40 {
    padding-top: 30px;
  }
  body .pt50 {
    padding-top: 40px;
  }
  body .pt70 {
    padding-top: 50px;
  }
  body .pt80 {
    padding-top: 60px;
  }
  body .pt100 {
    padding-top: 80px;
  }
  body .pt150 {
    padding-top: 100px;
  }
}

/* -------------------------------------
img
-------------------------------------*/
img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
figure {
  overflow: hidden;
}

/* objedt-fit*/
.ojf img {
  width: 100%; /*サイズ指定必須*/
  height: 100%; /*サイズ指定必須*/
  object-fit: cover;
}

/* -------------------------------------
font
-------------------------------------*/
body .fz18 {
  font-size: 18px;
}
body .fz20 {
  font-size: 20px;
}
body .fz22 {
  font-size: 22px;
}
body .fz24 {
  font-size: 24px;
}
body .fz26 {
  font-size: 26px;
}
body .fz28 {
  font-size: 28px;
}
body .fz30 {
  font-size: 30px;
}
body .fz32 {
  font-size: 32px;
}
body .fz35 {
  font-size: 35px;
}
body .fz40 {
  font-size: 40px;
}
body .fz44 {
  font-size: 44px;
}
body .fz46 {
  font-size: 46px;
}
body .fz50 {
  font-size: 50px;
}
body .fz54 {
  font-size: 54px;
}
body .fz60 {
  font-size: 60px;
}
body .fz70 {
  font-size: 70px;
}

@media (max-width: 520px) {
  body .fz18 {
    font-size: 16px;
  }
  body .fz20 {
    font-size: 16px;
  }
  body .fz22 {
    font-size: 16px;
  }
  body .fz24 {
    font-size: 18px;
  }
  body .fz26 {
    font-size: min(5vw, 22px);
  }
  body .fz28 {
    font-size: min(5vw, 24px);
  }
  body .fz30 {
    font-size: min(5vw, 26px);
  }
  body .fz32 {
    font-size: min(5.6vw, 28px);
  }
  body .fz35 {
    font-size: min(5.6vw, 30px);
  }
  body .fz40 {
    font-size: min(6.4vw, 36px);
  }
  body .fz44 {
    font-size: min(6.4vw, 36px);
  }
  body .fz46 {
    font-size: min(6.4vw, 40px);
  }
  body .fz50 {
    font-size: min(6.4vw, 42px);
  }
  body .fz54 {
    font-size: min(6.4vw, 42px);
  }
  body .fz60 {
    font-size: min(8vw, 40px);
  }
  body .fz70 {
    font-size: min(8vw, 48px);
  }
}

/* -------------------------------------
font ユニバーサル
-------------------------------------*/
body .fs11 {
  font-size: 1.1em;
}
body .fs12 {
  font-size: 1.2em;
}
body .fs14 {
  font-size: 1.4em;
}
body .fs15 {
  font-size: 1.5em;
}

/* -------------------------------
page-tit
-------------------------------- */
/* page-tit */
.page-tit {
  height: 150px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 5px;
  text-align: center;
  line-height: 1.2;
  background: url(../img/bg07.gif) repeat;
}
.page-tit span {
  color: var(--c-sub);
  font-size: 2em;
  font-weight: bold;
}
.page-tit i {
  color: var(--c-main);
  font-weight: bold;
}

@media (max-width: 680px) {
  .page-tit {
    height: 120px;
    margin-top: 65px;
  }
  .page-tit span {
    font-size: 1.6em;
  }
}

/* -------------------------------
tit
-------------------------------- */
.tit {
  color: var(--c-sub);
  font-weight: bold;
}

/* tit-horizon. */
.tit-horizon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8em;
  margin-bottom: 30px;
  font-size: 2em;
  color: var(--c-sub);
  font-weight: bold;
  line-height: 1.3;
}
.tit-horizon::before,
.tit-horizon::after {
  content: "";
  display: block;
  flex: auto;
  height: 1px;
  border-bottom: 1px solid var(--c-point);
}

/* tit-info */
.tit-info {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 5px;
  margin: 0 auto 40px;
  text-align: center;
  line-height: 1.2;
}
.tit-info::before {
  --width: 35px;
  content: "";
  width: var(--width);
  aspect-ratio: 1/1;
  background: url(../img/ico-info.svg) no-repeat center / cover;
  margin-bottom: 10px;
}
.tit-info span {
  color: var(--c-sub);
  font-size: 2em;
  font-weight: bold;
}
.tit-info i {
  color: var(--c-point);
  font-weight: bold;
}

@media (max-width: 680px) {
  /* tit-horizon. */
  .tit-horizon {
    margin-bottom: 20px;
    font-size: 1.3em;
  }

  /* tit-info */
  .tit-info {
    margin: 0 auto 20px;
  }
  .tit-info::before {
    --width: 30px;
    margin-bottom: 5px;
  }
  .tit-info span {
    font-size: 1.3em;
  }
  .tit-info i {
    font-size: 0.8em;
  }
}

/* -------------------------------------
link
-------------------------------------*/
a {
  color: currentColor;
  text-decoration: none;
}

a[href^="tel:"] {
  pointer-events: none;
}
@media (max-width: 680px) {
  a[href^="tel"] {
    pointer-events: auto;
  }
}

/* tel */
.tel {
  display: flex;
  align-items: center;
  gap: 0.1em;
  line-height: 1;
}
.tel::before {
  --width: 0.6em;
  content: "";
  width: var(--width);
  aspect-ratio: 20/28;
  -webkit-mask: url(../img/ico-tel.svg) center / 100% auto no-repeat;
  mask: url(../img/ico-tel.svg) center / 100% auto no-repeat;
  background: currentColor;
}

/* link */
.link a {
  color: var(--c-link);
  text-decoration: underline;
}
.link a:hover {
  text-decoration: none;
}

/*----------------------------------------
btn
-------------------------------------**/
.btn,
[class^="btn_"] {
  --height: 60px;
  --color: var(--c-main);
  width: min(350px, 80%);
  display: flex;
  align-items: center;
  gap: 0.7em;
  height: var(--height);
  margin: 40px auto 0;
  padding: 10px 5px 10px 10px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  background: var(--color);
  border: 1px solid var(--color);
}
:is(.btn, [class^="btn_"]) span {
  flex: 1;
  height: var(--height);
  display: grid;
  place-content: center;
}
:is(.btn, [class^="btn_"])::after {
  --width: 25px;
  content: "";
  width: var(--width);
  aspect-ratio: 1/1;
  -webkit-mask: url(../img/ico-arrow_af.svg) center / 100% auto no-repeat;
  mask: url(../img/ico-arrow_af.svg) center / 100% auto no-repeat;
  background: currentColor;
}
:is(.btn, [class^="btn_"]):hover {
  opacity: 0.9;
}

/* 色分け */
[class^="btn_white"] {
  color: var(--color);
  background: #fff;
}
[class^="btn_point"] {
  --color: var(--c-point);
}

/*----------------------------------------
btn-bf
-------------------------------------**/
.btn-bf {
  --color: var(--c-main);
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 5px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  background: var(--color);
  border: 2px solid var(--color);
}
.btn-bf span {
  flex: 1;
  display: grid;
  place-content: center;
}
.btn-bf::before {
  --width: 25px;
  content: "";
  width: var(--width);
  aspect-ratio: 1/1;
  -webkit-mask: url(../img/ico-arrow_bf.svg) center / 100% auto no-repeat;
  mask: url(../img/ico-arrow_bf.svg) center / 100% auto no-repeat;
  background: currentColor;
}
.btn-bf:hover {
  opacity: 0.9;
}

.btn-bf.wh {
  background: #fff;
  color: var(--c-main);
}

/* -------------------------------------
text
-------------------------------------*/
.en {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-style: normal;
}
body .t_R {
  text-align: right;
}
body .t_L {
  text-align: left;
}
body .t_C {
  text-align: center;
}

/* -------------------------------------
bg
-------------------------------------*/
.bg {
  background: var(--bg-main);
}
.bg-sub {
  background: var(--bg-sub);
}
.bg-gray {
  background: var(--bg-gray);
}

/* -------------------------------------
レイアウト
-------------------------------------*/
/* flx */
.flx {
  --gap: 5%;
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
}
.flx .text {
  flex: 1;
}
.flx figure img {
  aspect-ratio: 3/2;
  object-fit: cover;
}

@media screen and (max-width: 680px) {
  .flx {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
}

/* flxC */
.flx2c,
.flx3c,
.flx4c {
  --gap: 5%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px var(--gap);
}
.flx2c {
  --row: 2;
}
.flx3c {
  --row: 3;
}
.flx4c {
  --row: 4;
}
:is(.flx2c, .flx3c, .flx4c) > * {
  width: calc((100% - var(--gap) * calc(var(--row) - 1)) / var(--row));
}
:is(.flx2c, .flx3c, .flx4c) > figure img {
  aspect-ratio: 3/2;
  object-fit: cover;
}

@media (max-width: 680px) {
  .flx2c,
  .flx3c,
  .flx4c {
    --gap: 4%;
    gap: 30px var(--gap);
  }
  body .sp1c {
    --row: 1;
  }
  body .sp2c {
    --row: 2;
  }
  body .sp3c {
    --row: 3;
  }
}

/* list-numC */
.list-numC {
  --row: 3;
  --gap: 20px;
  --width: calc((100% - var(--gap) * (var(--row) - 1)) / var(--row));
  display: flex;
  flex-flow: wrap;
  gap: var(--gap);
  position: relative;
  z-index: 5;
}
.list-numC > * {
  width: var(--width);
  display: flex;
  flex-flow: column;
  gap: 20px;
}
.list-numC figure {
  display: block;
}
.list-numC figure img {
  aspect-ratio: 768/512;
  object-fit: cover;
}

@media screen and (max-width: 680px) {
  .list-numC {
    --row: 2;
    --gap: 10px;
  }
  .list-numC > * {
    gap: 15px;
  }
}

/**-------------------------------------
iframe
-------------------------------------**/
.gmap {
  height: 370px;
}
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
:is(.gmap, .youtube) iframe {
  width: 100%;
  height: 100%;
}
.yt-short {
  text-align: center;
  filter: grayscale(1);
}

@media (max-width: 480px) {
  .gmap {
    height: 32vh;
  }
}

/**-------------------------------------
post
-------------------------------------**/
.post-side-wrap {
  display: grid;
  grid-template-columns: auto 300px;
  gap: 50px;
}

/* post-content */
.post-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  word-break: break-word;
  overflow-wrap: anywhere; /* 長い英数字や罫線や記号も自動改行 */
}
.post-content {
}
.post-content a {
  color: var(--c-link);
  text-decoration: underline;
}
.post-content a:hover {
  text-decoration: none;
}
.post-content strong {
  font-weight: bold;
}
/* 見出し */
.post-content :is(h2, h3, h4, h5, h6) {
  font-size: 1.2em;
  font-weight: bold;
}
/* youtube */
.is-type-video div:has(iframe) {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.is-type-video iframe {
  width: 100%;
  height: 100%;
}
/* PDF ファイル */
.post-content .wp-block-file a {
  font-weight: bold;
  font-size: 1.1em;
}
.post-content .wp-block-file__button {
  padding: 10px 2em;
  color: #fff;
  font-weight: bold;
  background: var(--c-main);
}

/* side-other-post */
.side-other-post {
  display: block;
  margin: 100px 0 0;
}
.side-tit {
  font-weight: bold;
  border-bottom: 2px solid var(--gray);
}

@media (max-width: 520px) {
  .post-side-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* post-content */
  .post-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .post-content a {
    color: var(--c-link);
    text-decoration: underline;
  }
  .post-content a:hover {
    text-decoration: none;
  }
  .post-content strong {
    font-weight: bold;
  }
  /* 見出し */
  .post-content :is(h2, h3, h4, h5, h6) {
    font-size: 1.2em;
    font-weight: bold;
  }
  /* youtube */
  .is-type-video div:has(iframe) {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .is-type-video iframe {
    width: 100%;
    height: 100%;
  }
  /* PDF ファイル */
  .post-content .wp-block-file a {
    font-weight: bold;
    font-size: 1.1em;
  }
  .post-content .wp-block-file__button {
    padding: 10px 2em;
    color: #fff;
    font-weight: bold;
    background: var(--c-main);
  }

  /* side-other-post */
  .side-other-post {
    display: block;
    margin: 100px 0 0;
    /* background: var(--bg-gray); */
  }
  .side-tit {
    font-weight: bold;
    border-bottom: 2px solid var(--gray);
  }
}

/* custom-pagination */
.custom-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 30px 0;
  text-align: center;
}
.custom-pagination > * {
  display: grid;
  place-content: center;
  width: 2.5em;
  aspect-ratio: 1/1;
  color: var(--c-sub);
}
.custom-pagination a {
  text-decoration: underline;
  background: var(--bg-gray);
}
.custom-pagination a:hover {
  text-decoration: none;
}
.custom-pagination span.current {
  background: none;
  border: 1px solid var(--gray);
}