@charset "UTF-8";
:root {
  --color-white: rgb(255, 255, 255);
  --color-black: rgb(0, 0, 0);
  --color-figure: rgb(55, 61, 63);
  --color-body: rgb(255, 255, 255);
  --padding-page: 5.6rem 1.5rem 5.6rem 1.5rem;
  --padding-page--block: 5.6rem 5.6rem;
  --padding-page--inline: 1.5rem 1.5rem;
  --padding-page--t: 5.6rem;
  --padding-page--r: 1.5rem;
  --padding-page--b: 5.6rem;
  --padding-page--l: 1.5rem;
  --padding-content--t: 5.6rem;
  --padding-content--b: 5.6rem;
  --width-content: 35rem;
  --margin: 1.4rem;
  --margin-width: 2rem;
  --margin-section: 2.8rem;
  --margin-article: 5.6rem;
  --font-size--xxs: 0.8rem;
  --letter-spacing--xxs: 0;
  --font-size--xs: 1rem;
  --letter-spacing--xs: 0;
  --font-size--sm: 1.2rem;
  --letter-spacing--sm: 0;
  --font-size--md: 1.4rem;
  --letter-spacing--md: 0;
  --font-size--lg: 1.6rem;
  --letter-spacing--lg: 0;
  --font-size--xl: 2rem;
  --letter-spacing--xl: 0;
  --font-size--xxl: 2.8rem;
  --letter-spacing--xxl: 0;
}
@media print, screen and (min-width: 568.02px) and (max-width: 794px) {
  :root {
    --padding-page: 6.4rem 1.5rem 6.4rem 1.5rem;
  }
}
@media print, screen and (min-width: 794.02px) and (max-width: 1020px) {
  :root {
    --padding-page: 7.2rem 1.5rem 7.2rem 1.5rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  :root {
    --padding-page: 8.4rem 3rem 8.4rem 3rem;
  }
}
@media print, screen and (min-width: 1080.02px) {
  :root {
    --padding-page: 8.4rem 6rem 8.4rem 6rem;
  }
}
@media print, screen and (min-width: 568.02px) and (max-width: 794px) {
  :root {
    --padding-page--block: 6.4rem 6.4rem;
  }
}
@media print, screen and (min-width: 794.02px) and (max-width: 1020px) {
  :root {
    --padding-page--block: 7.2rem 7.2rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  :root {
    --padding-page--block: 8.4rem 8.4rem;
  }
}
@media print, screen and (min-width: 568.02px) and (max-width: 1020px) {
  :root {
    --padding-page--inline: 1.5rem 1.5rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  :root {
    --padding-page--inline: 3rem 3rem;
  }
}
@media print, screen and (min-width: 1080.02px) {
  :root {
    --padding-page--inline: 6rem 6rem;
  }
}
@media print, screen and (min-width: 568.02px) and (max-width: 794px) {
  :root {
    --padding-page--t: 6.4rem;
  }
}
@media print, screen and (min-width: 794.02px) and (max-width: 1020px) {
  :root {
    --padding-page--t: 7.2rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  :root {
    --padding-page--t: 8.4rem;
  }
}
@media print, screen and (min-width: 568.02px) and (max-width: 1020px) {
  :root {
    --padding-page--r: 1.5rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  :root {
    --padding-page--r: 3rem;
  }
}
@media print, screen and (min-width: 1080.02px) {
  :root {
    --padding-page--r: 6rem;
  }
}
@media print, screen and (min-width: 568.02px) and (max-width: 794px) {
  :root {
    --padding-page--b: 6.4rem;
  }
}
@media print, screen and (min-width: 794.02px) and (max-width: 1020px) {
  :root {
    --padding-page--b: 7.2rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  :root {
    --padding-page--b: 8.4rem;
  }
}
@media print, screen and (min-width: 568.02px) and (max-width: 1020px) {
  :root {
    --padding-page--l: 1.5rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  :root {
    --padding-page--l: 3rem;
  }
}
@media print, screen and (min-width: 1080.02px) {
  :root {
    --padding-page--l: 6rem;
  }
}
@media print, screen and (min-width: 568.02px) and (max-width: 794px) {
  :root {
    --padding-content--t: 6.4rem;
  }
}
@media print, screen and (min-width: 794.02px) and (max-width: 1020px) {
  :root {
    --padding-content--t: 7.2rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  :root {
    --padding-content--t: 8.4rem;
  }
}
@media print, screen and (min-width: 568.02px) and (max-width: 794px) {
  :root {
    --padding-content--b: 6.4rem;
  }
}
@media print, screen and (min-width: 794.02px) and (max-width: 1020px) {
  :root {
    --padding-content--b: 7.2rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  :root {
    --padding-content--b: 8.4rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  :root {
    --width-content: 96rem;
  }
}
@media print, screen and (min-width: 568.02px) and (max-width: 794px) {
  :root {
    --margin: 1.6rem;
  }
}
@media print, screen and (min-width: 794.02px) and (max-width: 1020px) {
  :root {
    --margin: 1.8rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  :root {
    --margin: 2.1rem;
  }
}
@media print, screen and (min-width: 568.02px) and (max-width: 794px) {
  :root {
    --margin-width: 2.4rem;
  }
}
@media print, screen and (min-width: 794.02px) and (max-width: 1020px) {
  :root {
    --margin-width: 2.6rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  :root {
    --margin-width: 2.8rem;
  }
}
@media print, screen and (min-width: 1080.02px) {
  :root {
    --margin-width: 4.2rem;
  }
}
@media print, screen and (min-width: 568.02px) and (max-width: 794px) {
  :root {
    --margin-section: 3.2rem;
  }
}
@media print, screen and (min-width: 794.02px) and (max-width: 1020px) {
  :root {
    --margin-section: 3.6rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  :root {
    --margin-section: 4.2rem;
  }
}
@media print, screen and (min-width: 568.02px) and (max-width: 794px) {
  :root {
    --margin-article: 6.4rem;
  }
}
@media print, screen and (min-width: 794.02px) and (max-width: 1020px) {
  :root {
    --margin-article: 7.2rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  :root {
    --margin-article: 8.4rem;
  }
}
@media print, screen and (min-width: 794.02px) {
  :root {
    --font-size--xxs: 1rem;
  }
}
@media print, screen and (min-width: 794.02px) {
  :root {
    --font-size--xs: 1.2rem;
  }
}
@media print, screen and (min-width: 794.02px) {
  :root {
    --font-size--sm: 1.4rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  :root {
    --font-size--md: 1.6rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  :root {
    --font-size--lg: 2rem;
  }
}
@media print, screen and (min-width: 794.02px) {
  :root {
    --font-size--xl: 2.8rem;
  }
}
@media print, screen and (min-width: 794.02px) {
  :root {
    --font-size--xxl: 4.4rem;
  }
}

/*! Reset - Base: Eric Mayer Reset v2.0 */
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
button,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
main,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
}

time {
  display: inline;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::after, blockquote::before {
  content: "";
  content: none;
}

q::after, q::before {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*! Reset - Base: Eric Mayer Reset v2.0: END */
*,
*:after,
*:before {
  box-sizing: border-box;
}

html {
  --scrollbar-width: 15px;
}

body {
  -webkit-print-color-adjust: exact;
}

input::-ms-clear {
  visibility: hidden;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

input[type=password]::-ms-reveal {
  display: none;
}

input[type=range] {
  margin: 0;
  padding: 0;
}

svg:not(:root) {
  overflow: hidden;
}

video,
small,
textarea,
picture,
svg {
  display: block;
}

s, .s,
strike, .strike,
del, .del {
  text-decoration: line-through;
}

hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

button {
  background-color: transparent;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal !important;
}

a, button {
  outline: 0;
}

img, picture, object {
  display: block;
}

dialog {
  border: 0;
  background-color: transparent;
  padding: 0;
  margin: auto;
  max-height: unset;
  max-width: unset;
}
dialog::backdrop {
  background-color: transparent;
}

summary {
  display: block;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

input::-webkit-calendar-picker-indicator {
  opacity: 0;
  display: none;
}

@media print, screen and (min-width: 568.02px) {
  .only--p {
    display: none !important;
  }
}

@media print, screen and (min-width: 1020.02px) {
  .only--p-t {
    display: none !important;
  }
}

@media print, screen and (max-width: 1020px) {
  .only--d {
    display: none !important;
  }
}

.l-content {
  padding-inline: var(--padding-page--inline);
  max-width: calc(var(--width-content) + var(--padding-page--r) + var(--padding-page--l));
  max-width: calc(var(--width-content) + var(--padding-page--r) + var(--padding-page--l));
}
@supports (padding: env(safe-area-inset-left)) {
  .l-content {
    padding-inline: calc(var(--padding-page--l) + env(safe-area-inset-left)) calc(var(--padding-page--r) + env(safe-area-inset-right));
  }
}

.l-content {
  margin-inline: auto;
}

body, input, select, textarea, mark {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}

body, input, select, textarea, mark {
  color: var(--color-figure);
  font-size: var(--font-size--md);
  letter-spacing: var(--letter-spacing--md);
  line-height: 1.5;
  line-break: strict;
}

h1, h2, h3, h4, h5 {
  font-variant-numeric: oldstyle-nums;
}

::selection {
  background: rgba(50, 154, 240, 0.25);
}

pre {
  white-space: pre-wrap;
}

sup,
sub {
  line-height: 1em;
  font-size: 0.75em;
}
sup::before, sup::after,
sub::before,
sub::after {
  content: " ";
}

sup {
  vertical-align: 0.25em;
}

sub {
  vertical-align: 0;
}

b, .b, strong, .strong {
  font-style: normal;
  font-weight: bold;
}

em {
  font-style: normal;
  color: #FF922B;
}

mark, .mark {
  background-color: #FFFF00;
}

ruby {
  text-emphasis: none;
}

p a, button {
  color: #3F4FFF;
  outline: none;
  text-underline-offset: 0.25em;
}
@media (hover: hover) {
  a:hover, button:hover {
    text-decoration-line: underline;
    text-decoration-thickness: 0.1rem;
    color: #3F4FFF;
  }
}
a:focus-visible, a.is-hover, button:focus-visible, button.is-hover {
  text-decoration-line: underline;
  text-decoration-thickness: 0.1rem;
  color: #3F4FFF;
}
article a, article button {
  text-decoration-line: underline;
  text-decoration-thickness: 0.1rem;
}
html.un-touched article a:focus-visible, html.un-touched article button:focus-visible {
  outline: rgba(50, 154, 240, 0.6) solid 0.3rem;
  outline-offset: 0.6rem;
}
a[disabled], button[disabled] {
  color: rgba(55, 61, 63, 0.5);
  pointer-events: none;
}

a, button, .button {
  transition-property: color,background,border,opacity,outline;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
  transition-delay: 0s;
}

.s-intro,
.s-chu,
.s-parents {
  background-image: url(../images/bg--stripe.png);
  background-size: 40rem 3.3rem;
  background-position: center top;
  background-repeat: repeat;
}
@media print, screen and (min-width: 1020.02px) {
  .s-intro,
  .s-chu,
  .s-parents {
    background-size: 120rem 9.9rem;
  }
}
.s-intro::before,
.s-chu::before,
.s-parents::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
@media print, screen and (min-width: 568.02px) and (max-width: 1020px) {
  .s-intro::before,
  .s-chu::before,
  .s-parents::before {
    background-size: 83.4rem auto;
  }
}
@media print, screen and (min-width: 1020.02px) {
  .s-intro::before,
  .s-chu::before,
  .s-parents::before {
    background-size: 192rem auto;
  }
}

.s-intro::before {
  top: 16.5rem;
  height: calc(100% - 16.5rem);
  background-image: url(../images/bg--intro--sp.png);
}
@media print, screen and (min-width: 568.02px) and (max-width: 1020px) {
  .s-intro::before {
    top: 15rem;
    height: calc(100% - 15rem);
    background-image: url(../images/bg--intro--md.png);
  }
}
@media print, screen and (min-width: 1020.02px) {
  .s-intro::before {
    top: 35rem;
    height: calc(100% - 35rem);
    background-image: url(../images/bg--intro.png);
  }
}

.s-chu {
  background-color: #F3FDFF;
}
.s-chu::before {
  top: -2rem;
  height: calc(100% + 2rem);
  background-image: url(../images/bg--chu--sp.png);
}
@media print, screen and (min-width: 568.02px) and (max-width: 1020px) {
  .s-chu::before {
    background-image: url(../images/bg--chu--md.png);
  }
}
@media print, screen and (min-width: 1020.02px) {
  .s-chu::before {
    background-image: url(../images/bg--chu.png);
  }
}

.s-parents {
  background-color: #EEFFE8;
  padding-bottom: 2rem;
}
@media print, screen and (min-width: 1020.02px) {
  .s-parents {
    padding-bottom: 5.5rem;
  }
}
.s-parents::before {
  top: -3rem;
  height: calc(100% + 3rem);
  background-image: url(../images/bg--parents--sp.png);
}
@media print, screen and (min-width: 568.02px) and (max-width: 1020px) {
  .s-parents::before {
    background-image: url(../images/bg--parents--md.png);
  }
}
@media print, screen and (min-width: 1020.02px) {
  .s-parents::before {
    background-image: url(../images/bg--parents.png);
  }
}

body {
  background-color: #FFFEF1;
}

.s-head {
  margin-bottom: -2rem;
}
@media print, screen and (min-width: 1020.02px) {
  .s-head {
    margin-bottom: 6rem;
  }
}
.s-head h2 {
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.4em;
  text-align: center;
  width: fit-content;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
@media print, screen and (min-width: 1020.02px) {
  .s-head h2 {
    font-size: 3.4rem;
    line-height: 1;
  }
}
.s-head h2::before {
  content: "";
  height: 0.6rem;
  width: 100%;
  background-color: #FC6832;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
@media print, screen and (min-width: 1020.02px) {
  .s-head h2::before {
    height: 1rem;
  }
}
.s-chu .s-head h2::before {
  background-color: #1796f0;
}
.s-parents .s-head h2::before {
  background-color: #10B761;
}
.s-head h2 .inner {
  padding-left: 0.4em;
  display: inline-block;
  position: relative;
  z-index: 3;
}

.s-section {
  margin-block: 4rem;
}
@media print, screen and (min-width: 1020.02px) {
  .s-section {
    margin-block: 7.5rem;
  }
}

.s-paper {
  position: relative;
}
.s-paper:not(:last-child) {
  margin-bottom: 5rem;
}
@media print, screen and (min-width: 1020.02px) {
  .s-paper:not(:last-child) {
    margin-block: 7.5rem;
  }
}
.s-paper::after {
  content: "";
  position: absolute;
  right: -0.2rem;
  bottom: 0;
  width: 5.2rem;
  height: 4.4rem;
  background-image: url(../images/corner--sp.png);
  background-size: contain;
  background-repeat: no-repeat;
}
@media print, screen and (min-width: 1020.02px) {
  .s-paper::after {
    right: -0.3rem;
    width: 6.8rem;
    height: 5.8rem;
  }
}
.s-paper h2 {
  font-size: 1.6rem;
  line-height: 3rem;
  color: #1C6996;
  letter-spacing: 0.4em;
  margin-bottom: 0.5em;
  text-align: center;
}
@media print, screen and (min-width: 1020.02px) {
  .s-paper h2 {
    font-size: 2.6rem;
  }
}

.s-paper__inner {
  position: relative;
  padding: 2rem;
  padding-top: 4rem;
  padding-bottom: 5rem;
  z-index: 1;
  width: calc(100% + 0.4rem);
  margin-left: -0.2rem;
}
.s-paper:has(.vimeo) .s-paper__inner {
  padding-bottom: 6rem;
}
@media print, screen and (min-width: 1020.02px) {
  .s-paper__inner {
    padding: 7rem;
    padding-bottom: 6rem;
    width: calc(100% + 0.6rem);
    margin-left: -0.3rem;
  }
}
.s-paper__inner::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  height: calc(100% - 4.4rem);
  width: 100%;
  border: 0.2rem solid rgba(97, 83, 66, 0.1490196078);
  border-bottom: 0;
  background-color: #ffffff;
  z-index: 2;
  background-clip: content-box;
}
@media print, screen and (min-width: 1020.02px) {
  .s-paper__inner::before {
    height: calc(100% - 5.8rem);
    border: 0.3rem solid rgba(97, 83, 66, 0.1490196078);
    border-bottom: 0;
  }
}
.s-paper__inner::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  height: 4.4rem;
  width: calc(100% - 5.2rem);
  border: 0.2rem solid rgba(97, 83, 66, 0.1490196078);
  border-top: 0;
  border-right: 0;
  background-color: #ffffff;
  z-index: 2;
  background-clip: content-box;
}
@media print, screen and (min-width: 1020.02px) {
  .s-paper__inner::after {
    height: 5.8rem;
    width: calc(100% - 6.8rem);
    border: 0.3rem solid rgba(97, 83, 66, 0.1490196078);
    border-top: 0;
    border-right: 0;
  }
}
.s-paper__inner > * {
  position: relative;
  z-index: 3;
}

.s-paper__box {
  display: grid;
  gap: 1rem;
}
.s-paper__box {
  grid-template-columns: auto;
}
@media print, screen and (min-width: 568.02px) and (max-width: 1020px) {
  .s-paper__box {
    grid-template-columns: auto;
  }
}
@media print, screen and (min-width: 1020.02px) {
  .s-paper__box {
    grid-template-columns: 25.9rem auto;
  }
}
@media print, screen and (min-width: 1020.02px) {
  .s-paper__box {
    gap: 4rem;
  }
}
.s-paper__box:not(:last-child) {
  margin-bottom: 1.5rem;
}
@media print, screen and (min-width: 1020.02px) {
  .s-paper__box:not(:last-child) {
    margin-bottom: 6rem;
  }
}

.s-paper__box__fig img {
  margin-inline: auto;
  border: 0.1rem solid #8A8A8A;
}
@media print, screen and (max-width: 1020px) {
  .s-paper__box__fig img {
    max-width: 21.6rem;
  }
}
@media print, screen and (max-width: 1020px) {
  .s-paper__box__fig .horizontal img {
    max-width: 29.6rem;
  }
}

.s-paper__double {
  display: grid;
  gap: 4rem;
  text-align: center;
  margin-top: 2.5rem;
}
.s-paper__double {
  grid-template-columns: auto;
}
@media print, screen and (min-width: 568.02px) and (max-width: 1020px) {
  .s-paper__double {
    grid-template-columns: auto;
  }
}
@media print, screen and (min-width: 1020.02px) {
  .s-paper__double {
    grid-template-columns: 1fr 1fr;
  }
}
.s-paper__double img {
  border: 0.1rem solid #8A8A8A;
}

.s-paper__double__item__fig {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-align-content: space-between;
  align-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.s-paper__double__item__fig > * {
  min-width: 0;
}
.s-paper__double__item__fig > *.minimum {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  white-space: nowrap;
}
@media print, screen and (min-width: 1020.02px) {
  .s-paper__double__item__fig {
    height: 34.5rem;
  }
}
.s-paper__double__item__fig img {
  margin-inline: auto;
}
.s-paper__double__item__fig .vertical img {
  width: 21.6rem;
  height: 28.8rem;
}
@media print, screen and (min-width: 1020.02px) {
  .s-paper__double__item__fig .vertical img {
    width: 25.9rem;
    height: 34.5rem;
  }
}
.s-paper__double__item__fig .horizontal img {
  width: 29.6rem;
}
@media print, screen and (min-width: 1020.02px) {
  .s-paper__double__item__fig .horizontal img {
    width: 100%;
  }
}

#s1 {
  padding-top: 4rem;
  padding-bottom: 6rem;
}
@media print, screen and (min-width: 1020.02px) {
  #s1 {
    padding-top: 10rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  #s1 {
    padding-bottom: 12rem;
  }
}

.s-paper--intro a, .s-paper--intro button {
  text-decoration-line: none;
}
@media (hover: hover) {
  .s-paper--intro a:hover, .s-paper--intro button:hover {
    text-decoration-line: none;
  }
}
.s-paper--intro a:focus-visible, .s-paper--intro a.is-hover, .s-paper--intro button:focus-visible, .s-paper--intro button.is-hover {
  text-decoration-line: none;
}
.s-paper--intro a, .s-paper--intro button {
  color: var(--color-figure);
}
@media (hover: hover) {
  .s-paper--intro a:hover, .s-paper--intro button:hover {
    color: #3F4FFF;
  }
}
.s-paper--intro a:focus-visible, .s-paper--intro a.is-hover, .s-paper--intro button:focus-visible, .s-paper--intro button.is-hover {
  color: #3F4FFF;
}
@media print, screen and (max-width: 1020px) {
  .s-paper--intro .s-paper__inner {
    padding-top: 2rem;
    padding-bottom: 6rem;
  }
}
@media print, screen and (min-width: 1020.02px) {
  .s-paper--intro .s-paper__inner {
    padding-inline: 13rem;
  }
}

.s-paper--intro__mei {
  text-align: center;
  margin-bottom: 2em;
}
@media print, screen and (min-width: 1020.02px) {
  .s-paper--intro__mei {
    text-align: right;
  }
}
.s-paper--intro__mei span {
  display: inline-block;
}

.s-paper--intro__text {
  height: 4.5em;
  overflow: hidden;
}
@media print, screen and (min-width: 1020.02px) {
  .s-paper--intro__text {
    height: 3em;
  }
}
.s-paper--intro.is-active .s-paper--intro__text {
  height: auto;
}

.s-paper--intro__more {
  text-align: right;
}
.s-paper--intro.is-active .s-paper--intro__more {
  display: none;
}

.s-paper--intro__close {
  text-align: right;
  display: none;
}
.s-paper--intro.is-active .s-paper--intro__close {
  display: block;
}

h3 {
  font-size: 1.5rem;
  line-height: 2.2rem;
  letter-spacing: 0.4rem;
  z-index: 2;
  position: relative;
  padding-right: 0.4rem;
  padding-bottom: 0.4rem;
}
@media print, screen and (min-width: 1020.02px) {
  h3 {
    font-size: 2.6rem;
    line-height: 3.5rem;
    padding-right: 0.6rem;
    padding-bottom: 0.6rem;
  }
}
h3 .inner {
  padding: 1rem;
  border-radius: 0.3rem;
  border: 0.2rem solid currentcolor;
  z-index: 3;
  position: relative;
  background-color: #ffffff;
  display: block;
}
@media print, screen and (min-width: 1020.02px) {
  h3 .inner {
    padding: 2.5rem;
  }
}
h3 .inner__str {
  display: block;
  text-align: center;
}
h3::before {
  content: "";
  width: calc(100% - 0.4rem);
  height: calc(100% - 0.4rem);
  background-color: #FC6832;
  border-radius: 0.3rem;
  border: 0.2rem solid currentcolor;
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: 0;
}
@media print, screen and (min-width: 1020.02px) {
  h3::before {
    width: calc(100% - 0.6rem);
    height: calc(100% - 0.6rem);
  }
}
.s-chu h3::before {
  background-color: #1796f0;
}
.s-parents h3::before {
  background-color: #10B761;
}
h3 .main {
  font-size: 1.8rem;
  line-height: 2.6rem;
}
@media print, screen and (min-width: 1020.02px) {
  h3 .main {
    font-size: 3.6rem;
    line-height: 5.3rem;
  }
}

h4 {
  line-height: 2.4rem;
  width: fit-content;
  color: #ffffff;
  font-size: 1.5rem;
  margin-inline: auto;
  background-color: #FC6832;
  position: absolute;
  margin-inline: auto;
  right: 0;
  left: 0;
  position: absolute !important;
  top: -4rem;
  padding-left: 0.5em;
  translate: 0 -50%;
  letter-spacing: 0.5em;
}
@media print, screen and (min-width: 1020.02px) {
  h4 {
    font-size: 2.4rem;
    line-height: 4.4rem;
    top: -6rem;
  }
}
h4::before, h4::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1.5em;
  height: 100%;
  background-image: url(../images/ribbon--1.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 100%;
}
h4::before {
  left: -1.5em;
}
h4::after {
  right: -1.5em;
  rotate: 180deg;
}
.s-chu h4 {
  background-color: #1796f0;
}
.s-chu h4::before, .s-chu h4::after {
  background-image: url(../images/ribbon--2.png);
}
.s-parents h4 {
  background-color: #10B761;
}
.s-parents h4::before, .s-parents h4::after {
  background-image: url(../images/ribbon--3.png);
}
.s-paper__inner > h4 {
  top: 0;
}

.haitou {
  border-bottom: 0.2rem solid #FC6832;
  width: fit-content;
  margin-bottom: 0.25em;
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-inline: auto;
  text-align: center;
}
@media print, screen and (min-width: 1020.02px) {
  .haitou {
    font-size: 1.6rem;
    line-height: 2.4rem;
    margin-inline: 0;
  }
}
@media print, screen and (min-width: 1020.02px) {
  .haitou br {
    display: none;
  }
}
.s-chu .haitou {
  border-color: #1796f0;
}
.s-parents .haitou {
  border-color: #10B761;
}

h5.title {
  font-size: 1.6rem;
  line-height: 1.25;
  border-bottom: 0.3rem solid #FC6832;
  margin-bottom: 1rem;
  padding-bottom: 0.3em;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  text-align: center;
}
@media print, screen and (min-width: 1020.02px) {
  h5.title {
    font-size: 2.4rem;
    line-height: 3.6rem;
    text-align: left;
  }
}
.s-chu h5.title {
  border-color: #1796f0;
}
.s-parents h5.title {
  border-color: #10B761;
}

h5.kanren {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  margin-top: 1.5rem;
  font-size: 14px;
  line-height: 1.5;
  border-left: 0.3rem solid #FC6832;
  border-bottom: 0.1rem solid #c5c5cc;
  padding-left: 1.1rem;
  margin-bottom: 1rem;
}
@media print, screen and (min-width: 1020.02px) {
  h5.kanren {
    margin-top: 5rem;
    font-size: 1.8rem;
  }
}
.s-chu h5.kanren {
  border-left-color: #1796f0;
}
.s-parents h5.kanren {
  border-left-color: #10B761;
}
.s-paper__double + h5.kanren {
  margin-top: 3.5rem;
}

.button {
  margin-top: 1.5rem;
  height: 3.5rem;
  line-height: 3.5rem;
  color: #ffffff;
  background-color: #FC6832;
  border-radius: 999.9rem;
  display: block;
  width: fit-content;
  font-size: 1.2rem;
  padding-left: 4rem;
  padding-right: 2rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  position: relative;
  box-shadow: 0 0 0.6rem 0 rgba(58, 58, 58, 0.2);
}
@media print, screen and (max-width: 1020px) {
  .button {
    margin-top: 2.4rem;
    margin-inline: auto;
  }
}
@media print, screen and (min-width: 1020.02px) {
  .button {
    font-size: 1.8rem;
    height: 4.5rem;
    line-height: 4.5rem;
    padding-left: 7rem;
    padding-right: 3.5rem;
  }
}
.s-chu .button {
  background-color: #1796f0;
}
.s-parents .button {
  background-color: #10B761;
}
.s-paper__double .button {
  margin-inline: auto;
}
@media (hover: hover) {
  .button:hover {
    color: #ffffff;
    text-decoration: none;
  }
}
.button::before {
  content: "";
  width: 4rem;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../images/button--dl.png);
  background-repeat: no-repeat;
  background-size: 1.7rem auto;
  background-position: center;
}
@media print, screen and (min-width: 1020.02px) {
  .button::before {
    width: 7rem;
    background-size: 2.5rem 2.4rem;
  }
}

.vimeo {
  max-width: 56rem;
  margin-inline: auto;
}

.bg {
  background: none;
  background-repeat: no-repeat;
  transition-property: color, background, border, box-shadow;
}

html {
  scroll-padding-top: var(--margin-section);
}
html.no-js {
  scroll-behavior: smooth;
}

body,
html {
  min-height: 100%;
}

body {
  width: 100%;
}

@page {
  margin: 8mm 8mm 8mm 8mm;
}
.l-main:empty {
  display: none;
}

.l-full {
  width: 100%;
  position: relative;
  z-index: 0;
}
.l-full > .l-content {
  margin-top: 0;
  margin-bottom: 0;
}
.l-full > .l-content:first-child {
  padding-top: 4rem;
}
@media print, screen and (min-width: 1020.02px) {
  .l-full > .l-content:first-child {
    padding-top: 10rem;
  }
}
.l-full > .l-content:last-child {
  padding-bottom: 6rem;
}
@media print, screen and (min-width: 1020.02px) {
  .l-full > .l-content:last-child {
    padding-bottom: 12rem;
  }
}
.l-full + .l-block {
  margin-top: var(--margin);
}

main img, main picture, main object, main figure {
  width: 100%;
  height: auto;
}

header {
  line-height: 13px;
}
header a, header button {
  text-decoration-line: none;
}
@media (hover: hover) {
  header a:hover, header button:hover {
    text-decoration-line: none;
  }
}
header a:focus-visible, header a.is-hover, header button:focus-visible, header button.is-hover {
  text-decoration-line: none;
}
header a, header button {
  color: inherit;
}
@media (hover: hover) {
  header a:hover, header button:hover {
    color: inherit;
  }
}
header a:focus-visible, header a.is-hover, header button:focus-visible, header button.is-hover {
  color: inherit;
}
header a:hover {
  opacity: 0.8;
  color: #6FA7CE;
}

.l-wrap {
  background: none !important;
}