/* =========================================================
   Challenge Fuji Five Lakes Ultramarathon 2027
   ultra-core.css

   Common Fixed Page UI
========================================================= */


/* =========================================================
   01) Fixed Page Base
========================================================= */

.ultra-container,
.ultra-container *{
  box-sizing: border-box;
}

.ultra-container{
  width: min(
    var(--fuji-content, 960px),
    calc(100% - 48px)
  );

  margin: 0 auto;

  padding-top:
    calc(var(--fuji-header-height, 60px) + 48px);

  padding-bottom: 80px;

  color: var(--fuji-text, #222222);

  font-size: 15px;
  line-height: 1.7;

  letter-spacing: 0.03em;
}


/* =========================
   Section
========================= */

.ultra-section{
  width: 100%;

  margin: 0 0 72px;
}

.ultra-section:last-child{
  margin-bottom: 0;
}

.ultra-section--compact{
  margin-bottom: 40px;
}


/* =========================
   Text Elements
========================= */

.ultra-container p{
  margin: 0 0 16px;
}

.ultra-container p:last-child{
  margin-bottom: 0;
}

.ultra-container ul,
.ultra-container ol{
  margin: 0 0 18px;

  padding-left: 1.5em;
}

.ultra-container li{
  margin: 0 0 6px;
}

.ultra-container li:last-child{
  margin-bottom: 0;
}

.ultra-container :where(
  p,
  li,
  td,
  th
){
  overflow-wrap: anywhere;

  word-break: normal;
}


/* =========================
   Link
========================= */

.ultra-container a{
  color: var(--fuji-link, #006ccc);

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;

  transition:
    color var(--fuji-transition-base, 0.2s ease),
    opacity var(--fuji-transition-base, 0.2s ease);
}

@media (hover: hover){

  .ultra-container a:hover{
    opacity: 0.72;
  }

}


/* =========================
   Media
========================= */

.ultra-container img{
  display: block;

  max-width: 100%;
  height: auto;
}


/* =========================================================
   02) Headings
========================================================= */

.ultra-heading{
  margin-top: 0;

  font-weight: 800;
  line-height: 1.35;

  letter-spacing: 0.04em;
}


/* =========================
   XL
========================= */

.ultra-heading-xl{
  margin-bottom: 40px;

  color: var(--fuji-primary, #0060af);

  font-size: 32px;
  font-weight: 800;
  line-height: 1.25;

  letter-spacing: 0.05em;

  text-align: center;
}


/* =========================
   LG
========================= */

.ultra-heading-lg{
  display: block;

  width: 100%;

  margin: 0 0 30px;

  padding: 15px 18px;

  background:
    color-mix(
      in srgb,
      var(--fuji-primary, #0060af) 10%,
      #ffffff
    );

  color: var(--fuji-primary, #0060af);

  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;

  letter-spacing: 0.04em;
}


/* =========================
   MD
========================= */

.ultra-heading-md{
  margin: 38px 0 18px;

  color: var(--fuji-primary, #0060af);

  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
}


/* =========================
   MD - Left Bar
========================= */

.ultra-heading-bar{
  padding: 6px 0 6px 14px;

  border-left:
    5px solid
    var(--fuji-primary, #0060af);
}


/* =========================
   MD - Bottom Line
========================= */

.ultra-heading-line{
  padding: 0 0 10px;

  border-bottom:
    2px dotted
    color-mix(
      in srgb,
      var(--fuji-primary, #0060af) 70%,
      #ffffff
    );
}


/* =========================================================
   03) Text / Alignment
========================================================= */

.ultra-small{
  font-size: 13px;
  line-height: 1.65;

  color: var(--fuji-muted, #979797);
}

.ultra-note-text{
  font-size: 13px;
  line-height: 1.65;
}

/* =========================
   Hanging Indent　・に使う
========================= */

.ultra-indent{
  --ultra-indent: 1em;

  padding-left: var(--ultra-indent);

  text-indent:
    calc(var(--ultra-indent) * -1);
}


/* =========================
   Hanging Indent - Note　※に使う
========================= */

.ultra-indent--note{
  --ultra-indent: 0.65em;
}


/* =========================
   Hanging Indent - Wide　少し距離あけ
========================= */

.ultra-indent--wide{
  --ultra-indent: 1.5em;
}



.ultra-center{
  text-align: center;
}

.ultra-left{
  text-align: left;
}

.ultra-right{
  text-align: right;
}


/* =========================
   Rules
========================= */

.ultra-hr{
  width: 100%;
  height: 0;

  margin: 30px auto;

  border: 0;

  border-top:
    1px solid
    var(--fuji-border, #d0d0d0);
}

.ultra-dotRule{
  width: 100%;
  height: 0;

  margin: 24px auto;

  border: 0;

  border-top:
    2px dotted
    color-mix(
      in srgb,
      var(--fuji-primary, #0060af) 55%,
      #ffffff
    );
}


/* =========================================================
   04) Buttons
========================================================= */

.ultra-container .ultra-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  width: 100%;

  border-radius:
    var(--fuji-radius-pill, 999px);

  font-weight: 700;
  line-height: 1.25;

  letter-spacing: 0.04em;

  text-align: center;

  text-decoration: none;
  text-decoration-line: none;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  transition:
    background-color var(--fuji-transition-base, 0.2s ease),
    border-color var(--fuji-transition-base, 0.2s ease),
    color var(--fuji-transition-base, 0.2s ease),
    opacity var(--fuji-transition-base, 0.2s ease),
    transform var(--fuji-transition-base, 0.2s ease);
}

.ultra-container .ultra-btnL{
  max-width: 640px;
  min-height: 56px;

  padding: 0 26px;

  font-size: 17px;
}

.ultra-container .ultra-btnM{
  max-width: 440px;
  min-height: 48px;

  padding: 0 22px;

  font-size: 15px;
}

.ultra-container .ultra-btnS{
  max-width: 280px;
  min-height: 40px;

  padding: 0 16px;

  font-size: 13px;
}


/* =========================
   Primary
========================= */

.ultra-container .ultra-btn-primary{
  border:
    2px solid
    var(--fuji-primary, #0060af);

  background:
    var(--fuji-primary, #0060af);

  color: #ffffff;

  text-decoration: none;
}


/* =========================
   Outline
========================= */

.ultra-container .ultra-btn-outline{
  border:
    2px solid
    var(--fuji-primary, #0060af);

  background: #ffffff;

  color: var(--fuji-primary, #0060af);

  text-decoration: none;
}


/* =========================
   Hover
========================= */

@media (hover: hover){

  .ultra-container .ultra-btn:hover{
    opacity: 1;

    text-decoration: none;

    transform: translateY(-1px);
  }

  .ultra-container .ultra-btn-primary:hover{
    background:
      color-mix(
        in srgb,
        var(--fuji-primary, #0060af) 86%,
        #000000
      );

    border-color:
      color-mix(
        in srgb,
        var(--fuji-primary, #0060af) 86%,
        #000000
      );

    color: #ffffff;
  }

  .ultra-container .ultra-btn-outline:hover{
    background:
      var(--fuji-primary, #0060af);

    color: #ffffff;
  }

}


/* =========================
   Disabled
========================= */

.ultra-container .ultra-btn.is-disabled,
.ultra-container .ultra-btn[aria-disabled="true"],
.ultra-container button.ultra-btn:disabled{
  pointer-events: none;

  border-color: #bfbfbf;

  background: #bfbfbf;

  color: #ffffff;

  text-decoration: none;

  opacity: 1;

  cursor: default;

  transform: none;
}


/* =========================
   Button Layout
========================= */

.ultra-btnRow{
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  width: 100%;
}

.ultra-btnRow > *{
  min-width: 0;
}

.ultra-btnRow .ultra-btn{
  max-width: none;
}

.ultra-btnStack{
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 14px;

  width: 100%;
}


/* =========================================================
   05) Alert / Box
========================================================= */

.ultra-box,
.ultra-alert{
  width: 100%;

  margin: 0 0 18px;

  padding: 18px 20px;

  border-radius:
    var(--fuji-radius-md, 7px);
}

.ultra-box:last-child,
.ultra-alert:last-child{
  margin-bottom: 0;
}

.ultra-box > :first-child,
.ultra-alert > :first-child{
  margin-top: 0;
}

.ultra-box > :last-child,
.ultra-alert > :last-child{
  margin-bottom: 0;
}

.ultra-box__title,
.ultra-alert__title{
  margin: 0 0 8px;

  font-weight: 700;
  line-height: 1.5;
}


/* =========================
   Normal Box
========================= */

.ultra-box{
  border:
    1px solid
    color-mix(
      in srgb,
      var(--fuji-primary, #0060af) 30%,
      #ffffff
    );

  background: #ffffff;

  color:
    var(--fuji-text, #222222);
}


/* =========================
   Primary Box
========================= */

.ultra-box-primary{
  border:
    1px solid
    color-mix(
      in srgb,
      var(--fuji-primary, #0060af) 50%,
      #ffffff
    );

  background:
    color-mix(
      in srgb,
      var(--fuji-primary, #0060af) 10%,
      #ffffff
    );

  color:
    var(--fuji-primary, #0060af);
}


/* =========================
   Gray Box
========================= */

.ultra-box-gray{
  border:
    1px solid
    rgba(0, 0, 0, 0.5);

  background:
    rgba(0, 0, 0, 0.05);

  color:
    var(--fuji-text, #222222);
}


/* =========================
   Warning
========================= */

.ultra-alert-warning{
  border:
    1px solid
    color-mix(
      in srgb,
      var(--fuji-warning, #f2b705) 70%,
      #ffffff
    );

  background:
    color-mix(
      in srgb,
      var(--fuji-warning, #f2b705) 10%,
      #ffffff
    );

  color:
    var(--fuji-text, #222222);
}


/* =========================
   Danger
========================= */

.ultra-alert-danger{
  border:
    1px solid
    color-mix(
      in srgb,
      var(--fuji-danger, #d60000) 50%,
      #ffffff
    );

  background:
    color-mix(
      in srgb,
      var(--fuji-danger, #d60000) 10%,
      #ffffff
    );

  color:
    var(--fuji-text, #222222);
}


/* =========================
   Danger Strong
========================= */

.ultra-alert-danger-strong{
  border:
    1px solid
    color-mix(
      in srgb,
      var(--fuji-danger, #d60000) 50%,
      #ffffff
    );

  background:
    color-mix(
      in srgb,
      var(--fuji-danger, #d60000) 10%,
      #ffffff
    );

  color:
    var(--fuji-danger, #d60000);
}

.ultra-alert-danger-strong .ultra-alert__title{
  color:
    var(--fuji-danger, #d60000);
}


/* =========================================================
   06) Key Value
========================================================= */

.ultra-kv{
  width: 100%;

  margin: 0 auto 18px;

  overflow: hidden;

  border:
    1px solid
    var(--fuji-border, #d0d0d0);

  border-radius:
    var(--fuji-radius-md, 7px);

  background: #ffffff;
}

.ultra-kv__row{
  display: grid;

  grid-template-columns:
    180px
    minmax(0, 1fr);

  width: 100%;

  border-top:
    1px solid
    var(--fuji-border, #d0d0d0);
}

.ultra-kv__row:first-child{
  border-top: 0;
}

.ultra-kv__key{
  display: flex;
  align-items: flex-start;

  padding: 14px 16px;

  border-right:
    1px solid
    var(--fuji-border, #d0d0d0);

  background:
    color-mix(
      in srgb,
      var(--fuji-primary, #0060af) 8%,
      #ffffff
    );

  color:
    var(--fuji-text, #222222);

  font-weight: 700;
  line-height: 1.6;
}

.ultra-kv__value{
  min-width: 0;

  padding: 14px 16px;

  background: #ffffff;

  color:
    var(--fuji-text, #222222);
}

.ultra-kv__value > :first-child{
  margin-top: 0;
}

.ultra-kv__value > :last-child{
  margin-bottom: 0;
}

.ultra-kv--compact .ultra-kv__key,
.ultra-kv--compact .ultra-kv__value{
  padding: 10px 14px;
}


/* =========================================================
   07) Tables
========================================================= */

.ultra-table-wrap{
  width: 100%;

  margin: 0 auto 18px;

  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;

  border:
    1px solid
    var(--fuji-border, #d0d0d0);

  background: #ffffff;
}

.ultra-table{
  width: 100%;

  min-width: 640px;

  border-collapse: collapse;
  border-spacing: 0;

  background: #ffffff;
}

.ultra-table th,
.ultra-table td{
  padding: 12px 14px;

  border-right:
    1px solid
    var(--fuji-border, #d0d0d0);

  border-bottom:
    1px solid
    var(--fuji-border, #d0d0d0);

  background: #ffffff;

  color:
    var(--fuji-text, #222222);

  font-size: 14px;
  line-height: 1.65;

  text-align: left;
  vertical-align: top;
}

.ultra-table th,
.ultra-table td{
  border-right:
    1px solid
    var(--fuji-border, #d0d0d0);
}

.ultra-table tbody tr:last-child > *{
  border-bottom: 0;
}

.ultra-table thead th{
  background:
    color-mix(
      in srgb,
      var(--fuji-primary, #0060af) 10%,
      #ffffff
    );

  color:
    var(--fuji-text, #222222);

  font-weight: 700;

  vertical-align: middle;
}

.ultra-table tbody th{
  background:
    color-mix(
      in srgb,
      var(--fuji-primary, #0060af) 5%,
      #ffffff
    );

  font-weight: 700;
}


/* =========================
   Compact
========================= */

.ultra-table--compact th,
.ultra-table--compact td{
  padding: 8px 10px;

  font-size: 12px;
  line-height: 1.55;
}


/* =========================
   Schedule
========================= */

.ultra-table-wrap--schedule{
  overflow-x: visible;
}

.ultra-table--schedule{
  min-width: 0;

  table-layout: fixed;
}

.ultra-table--schedule .ultra-col-time{
  width: 8em;

  white-space: nowrap;
}

.ultra-table--schedule th,
.ultra-table--schedule td{
  padding: 10px 12px;

  line-height: 1.55;
}


/* =========================
   Wide
========================= */

.ultra-table-wrap--wide .ultra-table{
  min-width: 960px;
}

.ultra-table-wrap--xwide .ultra-table{
  min-width: 1200px;
}

.ultra-table-note{
  margin: 8px 0 0;

  font-size: 12px;
  line-height: 1.6;

  color:
    var(--fuji-muted, #979797);
}


/* =========================================================
   08) Tabs
========================================================= */

.ultra-tabs{
  width: 100%;

  margin: 0 auto;
}

.ultra-tabList{
  display: grid;

  grid-template-columns:
    repeat(
      var(--ultra-tabs, 4),
      minmax(0, 1fr)
    );

  align-items: end;

  gap: 0;

  width: 100%;
}

.ultra-tabBtn{
  position: relative;

  width: 100%;

  min-height: 50px;

  margin: 0;
  padding: 10px 12px;

  border:
    1px solid
    var(--fuji-border, #d0d0d0);

  border-radius:
    8px
    8px
    0
    0;

  background: #e7e7e7;

  color: #666666;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;

  text-align: center;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  transition:
    color var(--fuji-transition-base, 0.2s ease),
    background-color var(--fuji-transition-base, 0.2s ease),
    border-color var(--fuji-transition-base, 0.2s ease);
}

.ultra-tabBtn + .ultra-tabBtn{
  border-left: 0;
}

.ultra-tabBtn.is-active{
  z-index: 2;

  border-color:
    var(--fuji-primary, #0060af);

  background:
    var(--fuji-primary, #0060af);

  color: #ffffff;
}

.ultra-tabPanel{
  position: relative;

  width: 100%;

  margin-top: -1px;

  padding: 26px 24px;

  border:
    1px solid
    var(--fuji-border, #d0d0d0);

  background: #ffffff;
}

.ultra-tabPanel::before{
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background:
    var(--fuji-primary, #0060af);
}

.ultra-tabPanel[hidden]{
  display: none;
}


/* =========================
   Multi Color Tabs
========================= */

.ultra-tabs--multicolor .ultra-tabBtn{
  --ultra-tab-color:
    var(--fuji-primary, #0060af);

  background:
    color-mix(
      in srgb,
      var(--ultra-tab-color) 8%,
      #ffffff
    );

  border-color:
    color-mix(
      in srgb,
      var(--ultra-tab-color) 35%,
      #ffffff
    );

  color:
    color-mix(
      in srgb,
      var(--ultra-tab-color) 85%,
      #222222
    );
}

.ultra-tabs--multicolor .ultra-tabBtn.is-active{
  z-index: 2;

  border-color:
    var(--ultra-tab-color);

  background:
    var(--ultra-tab-color);

  color: #ffffff;
}

.ultra-tabs--multicolor .ultra-tabPanel{
  --ultra-tab-color:
    var(--fuji-primary, #0060af);

  border-color:
    color-mix(
      in srgb,
      var(--ultra-tab-color) 35%,
      #ffffff
    );

  background:
    color-mix(
      in srgb,
      var(--ultra-tab-color) 6%,
      #ffffff
    );
}

.ultra-tabs--multicolor .ultra-tabPanel::before{
  background:
    var(--ultra-tab-color);
}


/* =========================================================
   09) Accordion
========================================================= */

.ultra-accordion{
  width: 100%;

  margin: 0 0 12px;

  border:
    1px solid
    var(--fuji-border, #d0d0d0);

  background: #ffffff;
}

.ultra-accordion:last-child{
  margin-bottom: 0;
}

.ultra-accordion__summary{
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;
  min-height: 54px;

  padding: 14px 58px 14px 18px;

  background:
    color-mix(
      in srgb,
      var(--fuji-primary, #0060af) 7%,
      #ffffff
    );

  color:
    var(--fuji-text, #222222);

  font-weight: 700;
  line-height: 1.5;

  list-style: none;

  cursor: pointer;
}

.ultra-accordion__summary::-webkit-details-marker{
  display: none;
}

.ultra-accordion__summary::before,
.ultra-accordion__summary::after{
  content: "";

  position: absolute;
  top: 50%;
  right: 20px;

  width: 18px;
  height: 2px;

  background:
    var(--fuji-primary, #0060af);

  transform:
    translateY(-50%);

  transition:
    transform var(--fuji-transition-base, 0.2s ease);
}

.ultra-accordion__summary::after{
  transform:
    translateY(-50%)
    rotate(90deg);
}

.ultra-accordion[open]
.ultra-accordion__summary::after{
  transform:
    translateY(-50%)
    rotate(0deg);
}

.ultra-accordion__body{
  padding: 18px 20px;

  border-top:
    1px solid
    var(--fuji-border, #d0d0d0);

  background: #ffffff;
}

.ultra-accordion__body > :first-child{
  margin-top: 0;
}

.ultra-accordion__body > :last-child{
  margin-bottom: 0;
}


/* =========================================================
   10) Image
========================================================= */

.ultra-imgS{
  width: 100%;
  max-width: 320px;

  margin: 0 auto 18px;
}

.ultra-imgM{
  width: 100%;
  max-width: 600px;

  margin: 0 auto 18px;
}

.ultra-imgL{
  width: 100%;
  max-width: 960px;

  margin: 0 auto 18px;
}

.ultra-img-rounded{
  overflow: hidden;

  border-radius:
    var(--fuji-radius-md, 7px);
}

.ultra-zoom{
  position: relative;

  display: block;

  cursor: zoom-in;
}

.ultra-zoom img{
  width: 100%;

  transition:
    opacity var(--fuji-transition-base, 0.2s ease);
}

@media (hover: hover){

  .ultra-zoom:hover img{
    opacity: 0.9;
  }

}

.ultra-zoom::after{
  content: "＋ 拡大";

  position: absolute;
  right: 10px;
  bottom: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 28px;

  padding: 4px 9px;

  border-radius:
    var(--fuji-radius-pill, 999px);

  background:
    rgba(0, 0, 0, 0.68);

  color: #ffffff;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}


/* =========================
   Image Zoom Modal
========================= */

.ultra-image-modal{
  position: fixed;
  inset: 0;

  z-index: 20000;

  display: none;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  padding: 40px;

  background:
    rgba(0, 0, 0, 0.88);

  cursor: zoom-out;
}

.ultra-image-modal.is-open{
  display: flex;
}

.ultra-image-modal__img{
  display: block;

  max-width: 92vw;
  max-height: 88vh;

  width: auto;
  height: auto;

  object-fit: contain;
}

.ultra-image-modal__close{
  position: fixed;
  top: 20px;
  right: 24px;

  width: 44px;
  height: 44px;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  color: #ffffff;

  cursor: pointer;
}

.ultra-image-modal__close::before,
.ultra-image-modal__close::after{
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 30px;
  height: 2px;

  background: #ffffff;
}

.ultra-image-modal__close::before{
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}

.ultra-image-modal__close::after{
  transform:
    translate(-50%, -50%)
    rotate(-45deg);
}

body.is-ultra-modal-open{
  overflow: hidden;
}


/* =========================================================
   11) Embed
========================================================= */

.ultra-embed{
  position: relative;

  width: 100%;

  margin: 0 auto 18px;

  overflow: hidden;

  background: #eeeeee;
}

.ultra-embed--map{
  aspect-ratio: 16 / 9;

  min-height: 360px;
}

.ultra-embed--video{
  aspect-ratio: 16 / 9;
}

.ultra-embed iframe{
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}


/* =========================================================
   12) Columns
========================================================= */

.ultra-columns{
  display: grid;

  width: 100%;

  gap: 32px;
}

.ultra-columns--2{
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.ultra-column{
  min-width: 0;
}

.ultra-column > :first-child{
  margin-top: 0;
}

.ultra-column > :last-child{
  margin-bottom: 0;
}

.ultra-columns--media{
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  align-items: center;
}

.ultra-columns--reverse{
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(0, 0.9fr);
}


/* =========================================================
   13) Cards
========================================================= */

.ultra-cardGrid{
  display: grid;

  grid-template-columns:
    repeat(
      var(--ultra-card-columns, 3),
      minmax(0, 1fr)
    );

  gap: 20px;

  width: 100%;
}

.ultra-card{
  display: flex;
  flex-direction: column;

  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    var(--fuji-border, #d0d0d0);

  border-radius:
    var(--fuji-radius-md, 7px);

  background: #ffffff;
}

.ultra-card__image{
  width: 100%;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: #eeeeee;
}

.ultra-card__image img{
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.ultra-card__body{
  display: flex;
  flex-direction: column;

  flex: 1;

  padding: 18px;
}

.ultra-card__title{
  margin: 0 0 10px;

  color:
    var(--fuji-text, #222222);

  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

.ultra-card__text{
  margin: 0;

  font-size: 14px;
  line-height: 1.65;
}

.ultra-card__footer{
  margin-top: auto;

  padding-top: 18px;
}


/* =========================
   Card Rail
========================= */

.ultra-cardRail{
  display: flex;

  gap: 18px;

  width: 100%;

  overflow-x: auto;

  padding-bottom: 8px;

  scroll-snap-type: x proximity;

  -webkit-overflow-scrolling: touch;
}

.ultra-cardRail .ultra-card{
  flex:
    0
    0
    300px;

  scroll-snap-align: start;
}


/* =========================================================
   14) Badge
========================================================= */

.ultra-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 24px;

  padding: 4px 9px;

  border-radius:
    var(--fuji-radius-pill, 999px);

  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 0.02em;

  white-space: nowrap;
}

.ultra-badge--primary{
  border:
    1px solid
    color-mix(
      in srgb,
      var(--fuji-primary, #0060af) 50%,
      #ffffff
    );

  background:
    color-mix(
      in srgb,
      var(--fuji-primary, #0060af) 10%,
      #ffffff
    );

  color:
    var(--fuji-primary, #0060af);
}

.ultra-badge--gray{
  border:
    1px solid
    rgba(0, 0, 0, 0.35);

  background:
    rgba(0, 0, 0, 0.05);

  color:
    var(--fuji-text, #222222);
}

.ultra-badge--warning{
  border:
    1px solid
    color-mix(
      in srgb,
      var(--fuji-warning, #f2b705) 70%,
      #ffffff
    );

  background:
    color-mix(
      in srgb,
      var(--fuji-warning, #f2b705) 10%,
      #ffffff
    );

  color:
    var(--fuji-text, #222222);
}

.ultra-badge--danger{
  border:
    1px solid
    color-mix(
      in srgb,
      var(--fuji-danger, #d60000) 50%,
      #ffffff
    );

  background:
    color-mix(
      in srgb,
      var(--fuji-danger, #d60000) 10%,
      #ffffff
    );

  color:
    var(--fuji-danger, #d60000);
}


/* =========================================================
   15) Icon Information
========================================================= */

.ultra-iconInfo{
  display: grid;

  grid-template-columns:
    52px
    minmax(0, 1fr);

  gap: 16px;

  align-items: start;

  width: 100%;

  padding: 18px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--fuji-primary, #0060af) 30%,
      #ffffff
    );

  border-radius:
    var(--fuji-radius-md, 7px);

  background: #ffffff;
}

.ultra-iconInfo__icon{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;
}

.ultra-iconInfo__icon img{
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.ultra-iconInfo__body{
  min-width: 0;
}

.ultra-iconInfo__title{
  margin: 0 0 6px;

  color:
    var(--fuji-primary, #0060af);

  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.ultra-iconInfo__text{
  margin: 0;

  font-size: 14px;
  line-height: 1.65;
}

.ultra-iconInfoList{
  display: grid;

  grid-template-columns:
    repeat(
      var(--ultra-icon-columns, 2),
      minmax(0, 1fr)
    );

  gap: 16px;

  width: 100%;
}

.ultra-iconInfo--compact{
  grid-template-columns:
    38px
    minmax(0, 1fr);

  gap: 12px;

  padding: 14px;
}

.ultra-iconInfo--compact
.ultra-iconInfo__icon{
  width: 38px;
  height: 38px;
}


/* =========================================================
   16) Spacing Utilities
========================================================= */

.ultra-mt-sm{
  margin-top: 12px;
}

.ultra-mt-md{
  margin-top: 24px;
}

.ultra-mt-lg{
  margin-top: 40px;
}

.ultra-mb-sm{
  margin-bottom: 12px;
}

.ultra-mb-md{
  margin-bottom: 24px;
}

.ultra-mb-lg{
  margin-bottom: 40px;
}


/* =========================================================
   17) Motion
========================================================= */


/* =========================
   Reveal
========================= */

.ultra-reveal{
  --ultra-reveal-x: 0px;
  --ultra-reveal-y: 22px;
  --ultra-reveal-delay: 0ms;
}

body.is-ultra-motion-ready
.ultra-reveal{
  opacity: 0;

  transform:
    translate(
      var(--ultra-reveal-x),
      var(--ultra-reveal-y)
    );

  transition:
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1)
      var(--ultra-reveal-delay),
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1)
      var(--ultra-reveal-delay);

  will-change:
    opacity,
    transform;
}

body.is-ultra-motion-ready
.ultra-reveal.is-visible{
  opacity: 1;

  transform:
    translate(0, 0);

  will-change: auto;
}


/* =========================
   Reveal Left
========================= */

.ultra-reveal--left{
  --ultra-reveal-x: -24px;
  --ultra-reveal-y: 0px;
}


/* =========================
   Reveal Right
========================= */

.ultra-reveal--right{
  --ultra-reveal-x: 24px;
  --ultra-reveal-y: 0px;
}


/* =========================
   Reveal Soft
========================= */

.ultra-reveal--soft{
  --ultra-reveal-y: 12px;
}


/* =========================
   Hover Lift
========================= */

.ultra-hover{
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease;
}

@media (hover: hover) and (pointer: fine){

  .ultra-hover:hover{
    transform:
      translateY(-3px)
      scale(1.015);

    box-shadow:
      0 7px 16px rgba(0, 0, 0, 0.07);
  }

}


/* =========================
   Image Hover Zoom
========================= */

.ultra-hoverZoom{
  overflow: hidden;
}

.ultra-hoverZoom img{
  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease;
}

@media (hover: hover) and (pointer: fine){

  .ultra-hoverZoom:hover img{
    transform:
      scale(1.04);
  }

}


/* =========================
   Focus Card Rail
========================= */

.ultra-cardRail--focus{
  --ultra-focus-card-width: 300px;

  gap: 22px;

  padding-left:
    max(
      0px,
      calc(
        (100% - var(--ultra-focus-card-width)) / 2
      )
    );

  padding-right:
    max(
      0px,
      calc(
        (100% - var(--ultra-focus-card-width)) / 2
      )
    );

  padding-top: 18px;
  padding-bottom: 28px;

  scroll-padding-left:
    max(
      0px,
      calc(
        (100% - var(--ultra-focus-card-width)) / 2
      )
    );

  scroll-padding-right:
    max(
      0px,
      calc(
        (100% - var(--ultra-focus-card-width)) / 2
      )
    );

  scroll-snap-type: x mandatory;
}

.ultra-cardRail--focus .ultra-card{
  flex:
    0
    0
    var(--ultra-focus-card-width);

  scroll-snap-align: center;
  scroll-snap-stop: always;

  opacity: 0.55;

  transform:
    scale(0.94);

  transform-origin: center center;

  transition:
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.ultra-cardRail--focus .ultra-card.is-active{
  opacity: 1;

  transform:
    scale(1);

  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.08);
}



/* =========================================================
   18) Entry Cards
========================================================= */

.ultra-container .ultraEntryGrid{
  --entry-lawson: #f76f4b;
  --entry-sports: #22abe7;
  --entry-runnet: #0753a6;
  --entry-hurusato: #86653e;
  --entry-runjapan: #000000;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 20px 24px;

  width: 100%;

  margin: 20px auto 28px;
}


/* =========================
   Five Cards
========================= */

.ultra-container .ultraEntryGrid--5{
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
}

.ultra-container
.ultraEntryGrid--5
> .ultraEntryBtn{
  grid-column: span 2;
}

.ultra-container
.ultraEntryGrid--5
> .ultraEntryBtn:nth-child(4){
  grid-column: 2 / span 2;
}

.ultra-container
.ultraEntryGrid--5
> .ultraEntryBtn:nth-child(5){
  grid-column: 4 / span 2;
}


/* =========================
   Entry Card
========================= */

.ultra-container .ultraEntryBtn{
  --entry-color:
    var(--fuji-primary, #0060af);

  position: relative;

  display: block;

  min-width: 0;

  overflow: hidden;

  border:
    3px solid
    var(--entry-color);

  border-radius:
    14px;

  background: #ffffff;

  color: inherit;

  text-decoration: none;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease,
    filter 0.25s ease;
}

.ultra-container
.ultraEntryBtn,
.ultra-container
.ultraEntryBtn:link,
.ultra-container
.ultraEntryBtn:visited{
  color: inherit;

  text-decoration: none;
}

.ultra-container
.ultraEntryBtn *{
  text-decoration: none;
}


/* =========================
   Inner
========================= */

.ultra-container
.ultraEntryBtn__inner{
  display: flex;
  flex-direction: column;

  min-height: 138px;
}


/* =========================
   Logo Area
========================= */

.ultra-container
.ultraEntryBtn__top{
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 58%;

  min-height: 78px;

  padding: 16px 20px;

  background: #ffffff;
}

.ultra-container
.ultraEntryBtn__logo{
  display: block;

  width: min(78%, 220px);
  height: 46px;

  max-width: 100%;

  object-fit: contain;
}


/* =========================
   Text Area
========================= */

.ultra-container
.ultraEntryBtn__bottom{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  flex: 1;

  min-height: 58px;

  padding: 11px 14px 10px;

  background:
    var(--entry-color);

  color: #ffffff;

  text-align: center;
}

.ultra-container
.ultraEntryBtn__title{
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;

  letter-spacing: 0.03em;
}

.ultra-container
.ultraEntryBtn__sub{
  margin-top: 4px;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;

  letter-spacing: 0.02em;

  opacity: 0.95;
}


/* =========================
   Brand Colors
========================= */

.ultra-container
.ultraEntryBtn[data-brand="lawson"]{
  --entry-color:
    var(--entry-lawson);
}

.ultra-container
.ultraEntryBtn[data-brand="sports"]{
  --entry-color:
    var(--entry-sports);
}

.ultra-container
.ultraEntryBtn[data-brand="runnet"]{
  --entry-color:
    var(--entry-runnet);
}

.ultra-container
.ultraEntryBtn[data-brand="hurusato"]{
  --entry-color:
    var(--entry-hurusato);
}

.ultra-container
.ultraEntryBtn[data-brand="runjapan"]{
  --entry-color:
    var(--entry-runjapan);
}


/* =========================
   Run Japan Logo
========================= */

.ultra-container
.ultraEntryBtn[data-brand="runjapan"]
.ultraEntryBtn__logo{
  width: min(82%, 230px);
  height: 42px;
}


/* =========================
   Hover
========================= */

@media (hover: hover) and (pointer: fine){

  .ultra-container
  .ultraEntryBtn:hover{
    opacity: 1;

    transform:
      translateY(-3px)
      scale(1.01);

    box-shadow:
      0 7px 16px
      rgba(0, 0, 0, 0.07);
  }

  .ultra-container
  .ultraEntryBtn:hover
  .ultraEntryBtn__logo{
    transform:
      scale(1.025);
  }

}

.ultra-container
.ultraEntryBtn__logo{
  transition:
    transform 0.45s
    cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================
   Disabled / Sold Out
========================= */

.ultra-container
.ultraEntryBtn.is-disabled,
.ultra-container
.ultraEntryBtn.is-soldout,
.ultra-container
.ultraEntryBtn[aria-disabled="true"]{
  pointer-events: none;

  filter:
    grayscale(1);

  opacity: 0.52;

  transform: none;

  box-shadow: none;

  cursor: default;
}


/* =========================
   Status Label
========================= */

.ultra-container
.ultraEntryBtn__status{
  position: absolute;
  top: 12px;
  right: 12px;

  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 26px;

  padding: 4px 10px;

  border-radius:
    var(--fuji-radius-pill, 999px);

  background:
    rgba(34, 34, 34, 0.82);

  color: #ffffff;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.03em;
}


/* =========================
   SP
========================= */

@media screen and (max-width: 767px){

  .ultra-container
  .ultraEntryGrid,
  .ultra-container
  .ultraEntryGrid--5{
    display: flex;

    flex-direction: column;
    align-items: center;

    gap: 14px;
  }

  .ultra-container
  .ultraEntryBtn{
    width:
      min(430px, 100%);
  }

  .ultra-container
  .ultraEntryBtn__inner{
    min-height: 108px;
  }

  .ultra-container
  .ultraEntryBtn__top{
    min-height: 60px;

    padding: 10px 14px;
  }

  .ultra-container
  .ultraEntryBtn__logo{
    width: min(76%, 210px);
    height: 34px;
  }

  .ultra-container
  .ultraEntryBtn__bottom{
    min-height: 48px;

    padding: 8px 10px 7px;
  }

  .ultra-container
  .ultraEntryBtn__title{
    font-size: 15px;
  }

  .ultra-container
  .ultraEntryBtn__sub{
    margin-top: 2px;

    font-size: 10px;
  }

  .ultra-container
  .ultraEntryBtn[data-brand="runjapan"]
  .ultraEntryBtn__logo{
    width: min(82%, 220px);
    height: 34px;
  }

  .ultra-container
  .ultraEntryBtn__status{
    top: 8px;
    right: 8px;

    min-height: 23px;

    padding: 3px 8px;

    font-size: 10px;
  }

}


/* =========================================================
   99) Responsive
========================================================= */

@media screen and (max-width: 767px){

  /* =========================
     Fixed Page Base
  ========================= */

  .ultra-container{
    width:
      calc(100% - 32px);

    padding-top:
      calc(var(--fuji-header-height, 45px) + 32px);

    padding-bottom: 56px;

    font-size: 14px;
    line-height: 1.75;

    letter-spacing: 0.02em;
  }

  .ultra-section{
    margin-bottom: 40px;
  }

  .ultra-section--compact{
    margin-bottom: 24px;
  }


  /* =========================
     Headings
  ========================= */

  .ultra-heading-xl{
    margin-bottom: 30px;

    font-size: 24px;
    line-height: 1.3;

    letter-spacing: 0.03em;
  }

  .ultra-heading-lg{
    margin-bottom: 24px;

    padding: 12px 14px;

    font-size: 17px;
    line-height: 1.45;

    letter-spacing: 0.03em;
  }

  .ultra-heading-md{
    margin: 30px 0 16px;

    font-size: 15px;
  }

  .ultra-heading-bar{
    padding: 5px 0 5px 11px;

    border-left-width: 4px;
  }

  .ultra-heading-line{
    padding-bottom: 8px;
  }


  /* =========================
     Text
  ========================= */

  .ultra-small,
  .ultra-note-text{
    font-size: 12px;
  }


  /* =========================
     Button
  ========================= */

  .ultra-container .ultra-btnL{
    max-width: 100%;
    min-height: 50px;

    padding: 0 20px;

    font-size: 15px;
  }

  .ultra-container .ultra-btnM{
    max-width: 84%;
    min-height: 44px;

    padding: 0 18px;

    font-size: 14px;
  }

  .ultra-container .ultra-btnS{
    max-width: 68%;
    min-height: 38px;

    padding: 0 14px;

    font-size: 12px;
  }

  .ultra-btnRow{
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .ultra-btnRow .ultra-btn{
    max-width: 100%;
  }


  /* =========================
     Alert / Box
  ========================= */

  .ultra-box,
  .ultra-alert{
    padding: 15px 16px;

    margin-bottom: 14px;
  }


  /* =========================
     Key Value
  ========================= */

  .ultra-kv{
    margin-bottom: 14px;
  }

  .ultra-kv__row{
    grid-template-columns: 1fr;
  }

  .ultra-kv__key{
    padding: 10px 12px;

    border-right: 0;

    border-bottom:
      1px solid
      var(--fuji-border, #d0d0d0);

    font-size: 13px;
  }

  .ultra-kv__value{
    padding: 12px;
  }

  .ultra-kv--compact .ultra-kv__key,
  .ultra-kv--compact .ultra-kv__value{
    padding: 9px 11px;
  }


  /* =========================
     Tables
  ========================= */

  .ultra-table-wrap{
    margin-bottom: 14px;
  }

  .ultra-table{
    min-width: 560px;
  }

  .ultra-table th,
  .ultra-table td{
    padding: 9px 10px;

    font-size: 12px;
    line-height: 1.55;
  }

  .ultra-table-wrap--schedule{
    overflow-x: visible;
  }

  .ultra-table--schedule{
    width: 100%;

    min-width: 0;

    table-layout: fixed;
  }

  .ultra-table--schedule .ultra-col-time{
    width: 6.2em;
  }

  .ultra-table--schedule th,
  .ultra-table--schedule td{
    padding: 8px;

    font-size: 12px;
    line-height: 1.5;
  }

  .ultra-table--compact th,
  .ultra-table--compact td{
    padding: 7px 8px;

    font-size: 11px;
    line-height: 1.5;
  }

  .ultra-table-wrap--wide .ultra-table{
    min-width: 900px;
  }

  .ultra-table-wrap--xwide .ultra-table{
    min-width: 1100px;
  }

  .ultra-table-note{
    font-size: 11px;
  }


  /* =========================
     Tabs
  ========================= */

  .ultra-tabBtn{
    min-height: 44px;

    padding: 8px 5px;

    font-size: 11px;
    line-height: 1.35;
  }

  .ultra-tabPanel{
    padding: 20px 14px;
  }


  /* =========================
     Accordion
  ========================= */

  .ultra-accordion__summary{
    min-height: 50px;

    padding: 12px 50px 12px 14px;

    font-size: 13px;
  }

  .ultra-accordion__summary::before,
  .ultra-accordion__summary::after{
    right: 16px;

    width: 16px;
  }

  .ultra-accordion__body{
    padding: 15px 14px;
  }


  /* =========================
     Image
  ========================= */

  .ultra-imgS{
    max-width: 70%;
  }

  .ultra-imgM{
    max-width: 90%;
  }

  .ultra-imgL{
    max-width: 100%;
  }

  .ultra-zoom::after{
    right: 8px;
    bottom: 8px;

    font-size: 10px;
  }


  /* =========================
     Image Modal
  ========================= */

  .ultra-image-modal{
    padding: 60px 14px 30px;
  }

  .ultra-image-modal__img{
    max-width: 100%;
    max-height: 82vh;
  }

  .ultra-image-modal__close{
    top: 10px;
    right: 10px;

    width: 40px;
    height: 40px;
  }


  /* =========================
     Embed
  ========================= */

  .ultra-embed--map{
    aspect-ratio: 4 / 3;

    min-height: 0;
  }


  /* =========================
     Columns
  ========================= */

  .ultra-columns,
  .ultra-columns--2,
  .ultra-columns--media,
  .ultra-columns--reverse{
    grid-template-columns: 1fr;

    gap: 20px;
  }


  /* =========================
     Cards
  ========================= */

  .ultra-cardGrid{
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .ultra-card__body{
    padding: 15px;
  }

  .ultra-card__title{
    font-size: 15px;
  }

  .ultra-card__text{
    font-size: 13px;
  }

  .ultra-cardRail{
    width:
      calc(100% + 16px);

    margin-right: -16px;

    gap: 14px;
  }

  .ultra-cardRail .ultra-card{
    flex-basis:
      min(78vw, 290px);
  }


  /* =========================
     Badge
  ========================= */

  .ultra-badge{
    min-height: 22px;

    padding: 3px 8px;

    font-size: 10px;
  }


  /* =========================
     Icon Information
  ========================= */

  .ultra-iconInfoList{
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .ultra-iconInfo{
    grid-template-columns:
      44px
      minmax(0, 1fr);

    gap: 12px;

    padding: 14px;
  }

  .ultra-iconInfo__icon{
    width: 44px;
    height: 44px;
  }

  .ultra-iconInfo__title{
    font-size: 14px;
  }

  .ultra-iconInfo__text{
    font-size: 13px;
  }

  .ultra-iconInfo--compact{
    grid-template-columns:
      34px
      minmax(0, 1fr);

    gap: 10px;

    padding: 12px;
  }

  .ultra-iconInfo--compact
  .ultra-iconInfo__icon{
    width: 34px;
    height: 34px;
  }


  /* =========================
     Spacing
  ========================= */

  .ultra-mt-sm{
    margin-top: 10px;
  }

  .ultra-mt-md{
    margin-top: 20px;
  }

  .ultra-mt-lg{
    margin-top: 32px;
  }

  .ultra-mb-sm{
    margin-bottom: 10px;
  }

  .ultra-mb-md{
    margin-bottom: 20px;
  }

  .ultra-mb-lg{
    margin-bottom: 32px;
  }


  /* =========================
     Motion
  ========================= */

  .ultra-cardRail--focus{
    --ultra-focus-card-width:
      min(78vw, 290px);

    width:
      calc(100% + 32px);

    margin-left: -16px;
    margin-right: -16px;

    gap: 14px;

    padding-left:
      calc(
        (100% - var(--ultra-focus-card-width)) / 2
      );

    padding-right:
      calc(
        (100% - var(--ultra-focus-card-width)) / 2
      );

    padding-top: 16px;
    padding-bottom: 26px;

    scroll-padding-left:
      calc(
        (100% - var(--ultra-focus-card-width)) / 2
      );

    scroll-padding-right:
      calc(
        (100% - var(--ultra-focus-card-width)) / 2
      );
  }

  .ultra-cardRail--focus .ultra-card{
    flex:
      0
      0
      var(--ultra-focus-card-width);
  }

  .ultra-reveal--left{
    --ultra-reveal-x: -18px;
  }

  .ultra-reveal--right{
    --ultra-reveal-x: 18px;
  }

}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce){

  html{
    scroll-behavior: auto;
  }

  body.is-ultra-motion-ready
  .ultra-reveal,
  body.is-ultra-motion-ready
  .ultra-reveal.is-visible{
    opacity: 1;

    transform: none;

    transition: none;
  }

  .ultra-hover,
  .ultra-hoverZoom img,
  .ultra-cardRail--focus .ultra-card,
  .ultra-btn,
  .ultra-zoom img{
    transition: none;
  }

  .ultra-cardRail,
  .ultra-cardRail--focus{
    scroll-behavior: auto;
  }

}