@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

:root {
  --pc-design-base: 1920;
  --pc: min(calc(100vw / var(--pc-design-base)), 1px);
  --sp-design-base: 390;
  --sp: calc(100vw / var(--sp-design-base));
  --page-background: #fffcd4;
  --gradient-content-width: 1100px;
  --gradient-width: 70px;
  --content-width: calc(1100 * var(--pc));
  --section-padding-block: calc(20 * var(--pc));
  --section-padding-inline: calc(40 * var(--pc));
  --color-mv-bottom: #e5edf4;
  --green01-start: #9ad171;
  --green01-end: #b9de9d;
  --orange01-start: #ffb62a;
  --orange01-end: #ffdd5a;
  --green02-start: #9ad171;
  --green02-end: #b9de9d;
  --blue01-start: #0087d1;
  --blue01-end: #009fdb;
  --orange02-start: #f07a31;
  --orange02-end: #f49158;
  --pink01-start: #ef5d94;
  --pink01-end: #f785af;
  --purple01-start: #8e479a;
  --purple01-end: #9a5ea5;
  --blue02-start: #1c5aa5;
  --blue02-end: #376aae;
  --gray01-start: #4f4f4f;
  --gray01-end: #818181;
  --green03-start: #9ad071;
  --green03-end: #b9de9d;
  --content-overlap: calc(40 * var(--pc));
}

html { font-size: 62.5%; font-family: "Noto Sans JP", sans-serif; }
body { margin: 0; color: #000; background: var(--page-background); overflow-x: hidden; }
img { display: block; width: 100%; height: auto; }
picture { display: block; }
.NotoSans { font-family: "Noto Sans JP", sans-serif; }
.visuallyhidden01 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* PC画面左右のグラデーション。クリック操作は妨げない */
body::before,
body::after {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 9999;
  width: calc((100vw - var(--gradient-content-width)) / 2 + var(--gradient-width));
  content: "";
  pointer-events: none;
}

body::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--page-background) 0,
    var(--page-background) calc(100% - var(--gradient-width)),
    transparent 100%
  );
}

body::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--page-background) 0,
    var(--page-background) calc(100% - var(--gradient-width)),
    transparent 100%
  );
}

@media screen and (max-width: 1100px) {
  body::before,
  body::after { display: none; }
}

/* ローディング */
#splash { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; background: #fff; }
#splash-logo { width: min(300px, 60vw); }
#wrapper { width: 100%; max-width: 1920px; margin: 0 auto; opacity: 0; }
body.appear #wrapper { animation: page-appear 1s 0.2s forwards; }
@keyframes page-appear { to { opacity: 1; } }

/* MV・画像主体コンテンツ */
#mainvisualwrap01,
#mainvisualwrap01 picture,
#mainvisualwrap01 img,
#maincontentswrap01 { width: 100%; }
#mainvisualwrap01 { background: var(--color-mv-bottom); }

/* 色違いでも共通で使うコンテンツ幅・上下余白 */
.color-section {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  padding: var(--section-padding-block) var(--section-padding-inline);
}

.color-section__inner {
  width: min(100%, var(--content-width));
  max-width: 1100px;
  margin-inline: auto;
}

/* 最初のコンテンツだけ斜め区切りへ少し重ねる
.color-section--overlap-top .color-section__inner {
  position: relative;
  z-index: 3;
  margin-top: calc((var(--section-padding-block) * 6 + var(--content-overlap)) * -1);
} */

.color-section--green01 { background: linear-gradient(180deg, var(--green01-start), var(--green01-end)); }
.color-section--orange01 { background: linear-gradient(180deg, var(--orange01-start), var(--orange01-end)); }
.color-section--green02 { background: linear-gradient(180deg, var(--green02-start), var(--green02-end)); }
.color-section--blue01 { background: linear-gradient(180deg, var(--blue01-start), var(--blue01-end)); }
.color-section--orange02 { background: linear-gradient(180deg, var(--orange02-start), var(--orange02-end)); }
.color-section--pink01 { background: linear-gradient(180deg, var(--pink01-start), var(--pink01-end)); }
.color-section--purple01 { background: linear-gradient(180deg, var(--purple01-start), var(--purple01-end)); }
.color-section--blue02 { background: linear-gradient(180deg, var(--blue02-start), var(--blue02-end)); }
.color-section--gray01 { background: linear-gradient(180deg, var(--gray01-start), var(--gray01-end)); }
.color-section--green03 { background: linear-gradient(180deg, var(--green03-start), var(--green03-end)); }

.diagonal-transition {
  position: relative;
  width: 100%;
  aspect-ratio: 1946 / 178;
  overflow: hidden;
}

/* 区切り画像の線位置に合わせ、背景を上下の色へ塗り分ける */
.diagonal-transition--mv-green01 {
  --transition-top: var(--color-mv-bottom);
  --transition-bottom: var(--green01-start);
}

.diagonal-transition--green01-orange01 {
  --transition-top: var(--green01-end);
  --transition-bottom: var(--orange01-start);
}

.diagonal-transition--orange01-green02 {
  --transition-top: var(--orange01-end);
  --transition-bottom: var(--green02-start);
}

.diagonal-transition--green02-blue01 { --transition-top: var(--green02-end); --transition-bottom: var(--blue01-start); }
.diagonal-transition--blue01-orange02 { --transition-top: var(--blue01-end); --transition-bottom: var(--orange02-start); }
.diagonal-transition--orange02-pink01 { --transition-top: var(--orange02-end); --transition-bottom: var(--pink01-start); }
.diagonal-transition--pink01-purple01 { --transition-top: var(--pink01-end); --transition-bottom: var(--purple01-start); }
.diagonal-transition--purple01-blue02 { --transition-top: var(--purple01-end); --transition-bottom: var(--blue02-start); }
.diagonal-transition--blue02-gray01 { --transition-top: var(--blue02-end); --transition-bottom: var(--gray01-start); }
.diagonal-transition--gray01-green03 { --transition-top: var(--gray01-end); --transition-bottom: var(--green03-start); }

.diagonal-transition { background: var(--transition-bottom); }

.diagonal-transition::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--transition-top);
  clip-path: polygon(0 0, 100% 0, 100% 8%, 0 94%);
  content: "";
}

.diagonal-divider {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 100%;
  line-height: 0;
  pointer-events: none;
  transform: translateX(-50%);
}

.diagonal-divider img { width: 100%; height: auto; }

/* HTML要素を置く部分だけ、細い背景画像を縦方向に反復する */
.application-links,
.social-link-block,
.map-panel {
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
}

.application-links { background-image: url("../img/contents07-bg_pc.png"); }
.social-link-block,
.map-panel { background-image: url("../img/contents10-bg_pc.png"); }

/* HTMLテキストリンク */
.application-links,
.social-link-block {
  box-sizing: border-box;
  width: 100%;
  margin-inline: auto;
  padding: calc(24 * var(--pc));
  background-color: transparent;
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: calc(24 * var(--pc));
  font-weight: 400;
  line-height: 1.8;
  text-align: center;
}

.application-links a,
.social-link-block a {
  color: #0085ce;
  text-decoration: none;
  text-underline-offset: 0.18em;
}

.application-links a { font-weight: 700; }
.social-link-block a { font-weight: 400; }

.application-links a:hover,
.social-link-block a:hover,
.application-links a:focus-visible,
.social-link-block a:focus-visible { text-decoration: underline; }

.application-links__name {
  font-size: 130%;
  font-weight: 700;
}

.social-link-block__title {
  margin-bottom: calc(16 * var(--pc));
  font-size: calc(36 * var(--pc));
  font-weight: 700;
}

.social-link-block__account {
  box-sizing: border-box;
  width: min(100%, calc(900 * var(--pc)));
  max-width: 900px;
  margin-inline: auto;
  padding: calc(18 * var(--pc));
  background: #eaf3cc;
  font-size: calc(32 * var(--pc));
  font-weight: 400;
}

/* Google Map */
.mapframe01 { position: relative; width: min(100%, calc(900 * var(--pc))); max-width: 900px; margin: 0 auto; aspect-ratio: 2 / 1; overflow: hidden; background: #eee; }
.mapframe01 iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

@media screen and (max-width: 767px) {
  :root {
    --content-width: calc(350 * var(--sp));
    --section-padding-block: calc(40 * var(--sp));
    --section-padding-inline: calc(20 * var(--sp));
    --content-overlap: calc(12 * var(--sp));
  }

  body::before,
  body::after { display: none; }

  .mapframe01 { width: min(320px, calc(320 * var(--sp))); max-width: 320px; aspect-ratio: 320 / 300; }
  .diagonal-transition { aspect-ratio: 391 / 43; }
  .diagonal-transition::before { clip-path: polygon(0 0, 100% 0, 100% 15%, 0 88%); }
  .diagonal-divider { width: 100%; }
  .color-section {
    padding: var(--section-padding-block) var(--section-padding-inline);
  }
/*
  .color-section--overlap-top .color-section__inner {
    margin-top: calc((var(--section-padding-block) + var(--content-overlap)) * -1);
  }
*/
  .application-links,
  .social-link-block {
    padding: calc(16 * var(--sp));
    font-size: calc(14 * var(--sp));
  }
  .application-links { background-image: url("../img/contents07-bg_sp.png"); }
  .social-link-block,
  .map-panel { background-image: url("../img/contents10-bg_sp.png"); }
  .social-link-block__account { width: min(320px, calc(320 * var(--sp))); max-width: 320px; padding: calc(12 * var(--sp)); font-size: calc(14 * var(--sp)); }
  .social-link-block__title {
    margin-bottom: calc(10 * var(--sp));
    font-size: calc(20 * var(--sp));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.appear #wrapper { animation-duration: 0.01ms; }
}