@charset "UTF-8";
/* @import url(/10th-anniversary/css/tokens/variables.css);
@import url(/10th-anniversary/css/base.css);
@import url(/10th-anniversary/css/header.css); */

/* /template/css/common.css
----------------------------------- */
.cprght-inner ul li a {
  color: var(--color-navy);
}

.a-link .u-line {
  padding-bottom: 2px;
  transition: background-size 0.35s;
  background: linear-gradient(#101d32, #101d32) 0 100%/0 1px no-repeat;
}

@media screen and (min-width: 769px) {
  .a-link:hover {
    opacity: 1;
  }

  .a-link:hover .u-line {
    background-size: 100% 1px;
    transition: background-size 0.35s;
  }
}

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

.bold {
  font-weight: bold;
}

.cprght-inner {
  margin: 48px auto !important;
}

.d-none {
  display: none !important;
}

/* Font
----------------------------------- */
.text-primary {
  color: var(--color-primary);
}

.text-black {
  color: var(--color-black);
}

.text-gradient {
  background: var(--color-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.with-border {
  padding-bottom: 4px;
  border-bottom: 2px solid;
  border-image: var(--color-gradient);
  border-image-slice: 1;
  width: fit-content;
  margin-inline: auto;

  @media screen and (max-width:560px) {
    padding-bottom: var(--spacing-2)
  }
}

.fw-normal {
  font-weight: normal;
}

.blank,
.pdf {
  .icon-after {
    margin-left: 0.5em;
    position: relative;
    top: -0.1em;

    i {
      font-size: 0.8em;
    }
  }

  /* aタグでなくspanについているケースは従来どおりの表示をキープ */
  &:not(a) {
    position: relative;
    padding-right: 25px !important;

    &::after {
      position: absolute;
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      margin-left: 3px;
    }
  }
}

/* Font
----------------------------------- */
/* Font sizes base 16px */

.fz-16 {
  font-size: var(--typo-fz-16);
}

.fz-18 {
  font-size: var(--typo-fz-18);
}

.fz-20 {
  font-size: var(--typo-fz-20);
}

.fz-24 {
  font-size: var(--typo-fz-24);
}

.fz-28 {
  font-size: var(--typo-fz-28);
}

.fz-32 {
  font-size: var(--typo-fz-32);
}

.fz-36 {
  font-size: var(--typo-fz-36);
}

.fz-38 {
  font-size: var(--typo-fz-38);
}

.fz-42 {
  font-size: var(--typo-fz-42);
}

.fz-48 {
  font-size: var(--typo-fz-48);
}

.fz-84 {
  font-size: var(--typo-fz-84);
}

/* line-height base 1.8 */

.lh-10 {
  line-height: 1.0;
}

.lh-12 {
  line-height: 1.2;
}

.lh-13 {
  line-height: 1.3;
}

.lh-14 {
  line-height: 1.4;
}

.lh-15 {
  line-height: 1.5;
}

.lh-16 {
  line-height: 1.6;
}

/* letter-spacing base 1.8 */
.ls-0 {
  letter-spacing: 0;
}

.ls-02 {
  letter-spacing: 0.02em;
}

.ls-10 {
  letter-spacing: 0.1em;
}

.ls-20 {
  letter-spacing: 0.2em;
}

/* spacing
----------------------------------- */
/* .mt-0_25 {
  margin-top: var(--spacing-0_25);
}
.mt-0_5 {
  margin-top: var(--spacing-0_5);
}
.mt-1_5 {
  margin-top: var(--spacing-1_5);
}
*/
.mt1 {
  margin-top: var(--spacing-1);
}

.mt2 {
  margin-top: var(--spacing-2);
}

.mt3 {
  margin-top: var(--spacing-3);
}

.mt4 {
  margin-top: var(--spacing-4);
}

.mt5 {
  margin-top: var(--spacing-5);
}

.mt6 {
  margin-top: var(--spacing-6);
}

.mt7 {
  margin-top: var(--spacing-7);
}

.mt8 {
  margin-top: var(--spacing-8);
}

.mt9 {
  margin-top: var(--spacing-9);
}

.mt10 {
  margin-top: var(--spacing-10);
}


/* other
----------------------------------- */
.br {
  display: inline-block;
}

br.sp {
  @media screen and (min-width:769px) {
    display: none;
  }
}

.comment {
  font-size: var(--typo-fz-14);
  line-height: 1.8;
  color: var(--color-gray-900);
  letter-spacing: 0.04em;
}

.container-wrapper {
  padding: 0 var(--spacing-5);

  @media screen and (max-width:768px) {
    padding: 0 10px;
  }
}

.container-wide {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.container {
  max-width: 1040px;
  margin: 0 auto;
  width: calc(100% - calc(var(--spacing-4)*2));

  @media screen and (max-width:768px) {
    width: calc(100% - 20px);
  }
}

.logoTitle {
  display: flex;
  gap: var(--spacing-1) var(--spacing-2);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  img {
    width: 120px;
  }
}

/*  musubi */
footer {
  border-top: 2px solid rgb(58, 175, 197);
  position: relative;
  background-color: var(--color-white);

  &::before {
    content: "";
    position: absolute;
    width: 102px;
    height: 70px;
    top: -35px;
    left: calc(50% - 51px);
    background: url(/template/img/motif.png) 0% 0% / contain no-repeat;
    z-index: 100;
  }
}

/* bottom-content */
.bottom-content {
  background-color: var(--color-white);

  .bottom-content__inner {
    padding: var(--spacing-10) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: var(--spacing-3);
  }

  img {
    width: 196px;
    margin-right: var(--spacing-2);
  }

  .textWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: var(--spacing-2);
  }

  .buttonWrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
  }
}

.main-content {
  overflow: hidden;
  position: relative;
  background-color: var(--color-gray-100);

  >*:not(.bg-img-wrapper) {
    position: relative;
    z-index: 1;
  }
}

.bg-img-wrapper {
  position: absolute;
  width: 100%;

  &.sectionTop {
    top: 0;
    height: 1159px;
    background-image: url(/10th-anniversary/img/sectionTop_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
  }

  &.sectionBottom {
    top: 1159px;
    height: -webkit-fill-available;
    background-image: url(/10th-anniversary/img/bg_10.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
  }
}

.accentHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--spacing-3);

  p {
    white-space: nowrap;
    text-align: center;
    letter-spacing: 0.1em;
  }
}