/* ロコモティブシンドローム — page-specific styles */

/* Medical support note: a softly bound memo pad with paper texture. */
.locomotive-note{
  --locomotive-note-cutout:#F3F5F7;
  position:relative;
  isolation:isolate;
  width:min(100%,880px);
  height:auto;
  margin:40px auto 0;
  padding:72px 48px 40px;
  overflow:hidden;
  border-radius:24px 24px 16px 16px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFDF9 100%);
  box-shadow:
    8px 12px 24px rgba(16,43,73,.11),
    0 2px 4px rgba(16,43,73,.08),
    inset 0 0 0 1px rgba(16,43,73,.04);
}
.locomotive-note::before{
  content:"";
  position:absolute;
  top:0;
  right:clamp(24px,5vw,64px);
  left:clamp(24px,5vw,64px);
  z-index:2;
  height:40px;
  pointer-events:none;
  background:
    radial-gradient(
      circle at 50% 22px,
      var(--locomotive-note-cutout) 0 9px,
      rgba(16,43,73,.13) 9.5px,
      rgba(16,43,73,.05) 10.5px,
      transparent 11px
    ) 0 0 / 14.285714% 40px repeat-x,
    linear-gradient(
      to right,
      transparent calc(50% - 3px),
      rgba(16,43,73,.08) calc(50% - 3px),
      var(--locomotive-note-cutout) calc(50% - 1px),
      var(--locomotive-note-cutout) calc(50% + 3px),
      transparent calc(50% + 3px)
    ) 0 0 / 14.285714% 22px repeat-x;
}
.locomotive-note::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.14;
  background-image:repeating-linear-gradient(
    0deg,
    rgba(92,101,111,.05) 0,
    rgba(92,101,111,.05) 1px,
    transparent 1px,
    transparent 3px
  );
}
.locomotive-note__title,
.locomotive-note__text{
  position:relative;
  z-index:1;
  max-width:760px;
  margin-right:auto;
  margin-left:auto;
}
.locomotive-note__title{
  margin-top:0;
  margin-bottom:16px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(15.5px,1.25vw,17px);
  font-weight:900;
  line-height:1.7;
  text-align:center;
}
.locomotive-note__title::after{
  content:"";
  display:block;
  width:min(100%,240px);
  height:8px;
  margin:16px auto 0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='8' viewBox='0 0 48 8'%3E%3Cpath d='M0 4 C4 0 8 0 12 4 S20 8 24 4 S32 0 36 4 S44 8 48 4' fill='none' stroke='%23DD7C2F' stroke-opacity='.38' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position:center;
  background-repeat:repeat-x;
  background-size:48px 8px;
}
.locomotive-note__text{
  margin-top:0;
  margin-bottom:0;
  color:#333D4A;
  font-size:15.5px;
  font-weight:500;
  line-height:2;
}

@media (min-width:681px) and (max-width:980px){
  .locomotive-note{padding-right:40px;padding-left:40px;}
}
@media (max-width:680px){
  .locomotive-note{
    width:100%;
    padding:64px 24px 32px;
    border-radius:16px 16px 12px 12px;
    box-shadow:
      6px 10px 22px rgba(16,43,73,.1),
      0 2px 4px rgba(16,43,73,.07),
      inset 0 0 0 1px rgba(16,43,73,.04);
  }
}