/* ==========================================================================
	Headding1
   ========================================================================== */
/* Headding2
  -------------------------------------------------- */
/* Headding3 */

/* ==========================================================================
	Setting
   ========================================================================== */

:root {

  /* font-family
  -------------------------------------------------- */
  --ff-basic: "Shippori Mincho", serif;
  --ff-num: "Libre Baskerville", serif;
  --ff-orn: "Parisienne", cursive;

  /* color
  -------------------------------------------------- */
  --txt-black: #353535;
  --line-grey: #C9C9C9;
  --teal: #003B54;

  /* line-height
  -------------------------------------------------- */
  --lh-min: 1.2;
  --lh-basic: 1.6;
  --lh-slow: 2.2;

  /* inner
  -------------------------------------------------- */
  --inner-size: 1100px;
  /* --inner-size-expand: 1760px; */
  --inner-side-margin: clamp(20px, -10.272px + 8.073vw, 100px);

  /* spacing
  -------------------------------------------------- */
  --sh: clamp(2px, 1.243px + 0.202vw, 4px);
  --s1: clamp(4px, 2.486px + 0.404vw, 8px);
  --s2: clamp(8px, 4.973px + 0.807vw, 16px);
  --s3: clamp(12px, 7.459px + 1.211vw, 24px);
  --s4: clamp(16px, 9.946px + 1.615vw, 32px);
  --s5: clamp(20px, 12.432px + 2.018vw, 40px);
  --s6: clamp(24px, 14.918px + 2.422vw, 48px);
  --s7: clamp(28px, 17.405px + 2.825vw, 56px);
  --s8: clamp(32px, 19.891px + 3.229vw, 64px);
  --s9: clamp(36px, 22.377px + 3.633vw, 72px);
  --s10: clamp(40px, 24.864px + 4.036vw, 80px);

  /* font-size
  -------------------------------------------------- */
  --f50: clamp(40px, 36.216px + 1.009vw, 50px);
  --f40: clamp(30px, 26.216px + 1.009vw, 40px);
  --f24: clamp(20px, 18.486px + 0.404vw, 24px);
  --f20: clamp(18px, 17.243px + 0.202vw, 20px);
  --f18: clamp(16px, 15.243px + 0.202vw, 18px);
  --f17: clamp(15px, 14.243px + 0.202vw, 17px);
  --f16: clamp(14px, 13.243px + 0.202vw, 16px);
  --f14: clamp(12px, 11.243px + 0.202vw, 14px);
  --f12: clamp(10px, 9.243px + 0.202vw, 12px);

  /* その他
  -------------------------------------------------- */
  --transition-basic: 500ms;

}

/* ==========================================================================
	Generic（Reset）
   ========================================================================== */

*,
*::before,
*::after {
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  word-wrap: break-word;
}

a {
  text-decoration: none;
  color: inherit;
  user-select: none;
  cursor: pointer;
  outline: none;
}

a[href^="tel:"] {
  pointer-events: none;
}
@media screen and (max-width: 767px) and (hover: none) and (pointer: coarse) {
  a[href^="tel:"] {
    pointer-events: auto;
  }
}

html,
body {
  overflow-x: hidden;
}

input,
button,
select,
textarea {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  font: inherit;
  line-height: inherit;
  color: inherit;
  align-items: normal;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

b,
i {
  font-weight: inherit;
  font-style: normal;
}


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

body {
  font-family: var(--ff-basic);
  color: var(--txt-black);
  box-sizing: border-box;
  font-weight: 500;
  line-height: var(--lh-basic);
  font-size: var(--f16);
}

b {
  font-weight: 700;
}

i {
  display: inline-block;
  text-decoration: inherit;
}


/* ==========================================================================
	Layouts
   ========================================================================== */

/* l-header
  -------------------------------------------------- */
.l-header {
  display: grid;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: auto 1fr;
  gap: var(--s5);
  padding-inline: var(--s3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  background: #fff;
  transition: var(--transition-basic);
}
@media (max-width: 1180px) {
  .l-header {
    grid-template-columns: auto 1fr;
  }
}
.is-spMenuOpen .l-header {
  background: transparent;
}

.l-header_left {
  padding-block: var(--s2);
  display: grid;
  align-items: center;
  grid-template-columns: 235fr 160fr;
  gap: var(--s3);
}
@media (max-width: 1180px) {}
@media (max-width: 767px) {}

.l-header_right {
  justify-self: end;
  display: grid;
  grid-template-columns: 600fr auto;
  height: 100%;
  /* font-size: clamp(12px, 8.973px + 0.807vw, 20px); */
}
@media (min-width: 1181px) {
  .l-header_right--sp {
    display: none;
  }
}
@media (max-width: 1180px) {
  .l-header_right--pc {
    display: none;
  }
}

.l-header_logo {
  max-width: 235px;
}
.l-header_logo img {
  transition: var(--transition-basic);
}
.is-spMenuOpen .l-header_logo img {
  filter: brightness(0) invert(1);
}

.l-header_logo100th {
  transition: var(--transition-basic);
  transition-property: visibility, opacity;
}
.is-spMenuOpen .l-header_logo100th {
  visibility: hidden;
  opacity: 0;
}


.l-header_btns {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: var(--s3);
  padding-inline: var(--s5);
  font-weight: 600;
}
.l-header_btns a {
  position: relative;
}
.l-header_btns a::after {
  content: "";
  position: absolute;
  background: var(--teal);
  height: 2px;
  width: 0;
  left: 50%;
  bottom: -5px;

  transform: translateX(-50%);
  transition: width 300ms;
}
.l-header_btns a.is-current::after,
.l-header_btns a:hover::after {
  width: calc(100% + 10px);
}

.l-header_spBtn {
  display: block;
  /* width: clamp(80px, 72.432px + 2.018vw, 100px); */
  min-height: 100%;
  padding-block: var(--s1);
  /* background: var(--green); */
  /* border-radius: 100px; */
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.l-header_spBtn_icon {
  height: 32px;
}
.l-header_spBtn_txt {
  font-size: var(--f12);
  font-weight: 700;
  line-height: var(--lh-min);
  color: var(--teal);
}
.is-spMenuOpen .l-header_spBtn_txt--open {
  display: none;
}
.is-spMenuClose .l-header_spBtn_txt--close {
  display: none;
}

.l-header_spBtn_icon {
  position: relative;
  display: grid;
  place-content: center;
  background: var(--teal);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #fff;
}
.l-header_spBtn_icon i {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 2px;
  position: absolute;
  background: #fff;
  transition: 300ms;
  transition-property: transform, width, top;
}
.l-header_spBtn_icon i:first-child {
  top: calc(50% - 7px);
}
.l-header_spBtn_icon i:last-child {
  top: calc(50% + 7px);
}
.is-spMenuOpen .l-header_spBtn_icon i:first-child {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.is-spMenuOpen .l-header_spBtn_icon i:nth-child(2) {
  width: 0;
}
.is-spMenuOpen .l-header_spBtn_icon i:last-child {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.l-header_spMenu {
  position: fixed;
  top: 0;
  /* top: calc(var(--header-height) - 1px); */
  left: 0;
  width: 100%;
  /* height: calc(100% - var(--header-height) + 1px); */
  height: 100%;
  padding-top: var(--header-height);
  background: var(--teal);
  background: url(../img/bg-paper-teal-min.png) center/100% repeat-y var(--teal);

  color: #fff;
  transition: 500ms;
  /* display: flex;
  flex-direction: column;
  justify-content: space-between; */
  display: grid;
  grid-template-rows: 1fr auto;
  z-index: -1;
}
.l-header_spMenu_top {
  display: grid;
  place-content: center;
}
.l-header_spMenu_pages {
  text-align: center;
  margin-top: var(--s5);
  font-size: var(--f20);
}
.l-header_spMenu_pages::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(../img/symbol.svg) no-repeat center/50% auto;
  filter: brightness(0) invert(1);

}
.l-header_spMenu_pages a {
  display: block;
  font-weight: 700;
  padding-block: var(--s4);
  border-bottom: 1px solid var(--light-grey);
  position: relative;
}
.l-header_spMenu_pages a iconify-icon {
  font-size: var(--f32);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: var(--s5);
  color: var(--blue);
  margin: 0;
}
.l-header_spMenu_pages--app a {
  background: var(--green);
  color: #fff;
  margin-block: var(--s2);
  margin-inline: var(--s3);
  border-radius: 100px;
  text-align: center;
  border: 2px solid #fff;
  font-size: var(--f20);
}
.l-header_spMenu_pages--app a iconify-icon {
  color: #fff;
  right: calc(var(--s2) - 2px);
}

.l-header_spMenu_bottom {
  padding: var(--s6) var(--s3);
}
.l-header_spMenu_lnks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--s3);
}
.l-header_spMenu_lnks a {
  opacity: 0.6;
  color: #fff;
}
.l-header_spMenu_lnks a::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  /* akar-icons:link-out */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.5 10.5L21 3m-5 0h5v5m0 6v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.5 10.5L21 3m-5 0h5v5m0 6v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  margin-left: 4px;
}


.is-spMenuClose .l-header_spMenu {
  opacity: 0;
  visibility: hidden;
}
.is-spMenuOpen .l-header_spMenu {
  visibility: visible;
  opacity: 1;
}


/* l-footer
  -------------------------------------------------- */
.l-footer {
  background: var(--teal);
  color: #fff;
  text-align: center;
  padding-block: var(--s8);
}


/* l-loading
  -------------------------------------------------- */

.is-loaded .l-loading {
  display: none;
}

.l-loading_body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--teal);
  background: url(../img/bg-paper-teal-min.png) center/100% repeat-y var(--teal);

  z-index: 999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  transition-delay: 500ms;
}
.is-preLoaded .l-loading_body {
  animation: body .8s cubic-bezier(.83, 0, .17, 1) both;
}
@media (max-width: 767px) {
  .l-loading_body {
    height: 100svh;
  }
}
@keyframes body {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  51% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

.l-loading_slide {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, .8);
  z-index: 99999;
}
.is-preLoaded .l-loading_slide {
  animation: slide .8s cubic-bezier(.83, 0, .17, 1) both;
}
@keyframes slide {
  0% {
    left: 0;
  }
  50% {
    left: 0;
  }
  51% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

.l-loading_logo {
  position: relative;
  width: 400px;
  max-width: 70%;
  margin-inline: auto;
  padding-top: 2%;
}
.l-loading_logo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 190/261;
  z-index: -1;
  background: url(../img/symbol.svg) no-repeat center/100% 100%;
  width: 250px;
  max-width: 80%;
  filter: brightness(0) invert(1);
}

.l_loading_element {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  text-align: center;
}
@media (max-width: 767px) {}
.l-loading_spinner {
  margin-inline: auto;
  width: 30px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side, rgba(255, 255, 255, .5) 94%, #0000) top/2px 2px no-repeat,
    conic-gradient(#0000 30%, rgba(255, 255, 255, .5));
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0);
  animation: l13 1s infinite linear;
}
@keyframes l13 {
  100% {
    transform: rotate(1turn)
  }
}
.l-loading_txt {
  margin-top: 12px;
  font-size: var(--f16);
  animation: l1 1s linear infinite alternate;
}
.l-loading_txt:before {
  content: "Loading..."
}
@keyframes l1 {
  to {
    opacity: 0
  }
}


/* ==========================================================================
	Objects
   ========================================================================== */

/* inner
  -------------------------------------------------- */

.o-inner {
  margin-inline: max((100vw - var(--inner-size))/2, var(--inner-side-margin));
}
.o-innerP {
  padding-inline: max((100vw - var(--inner-size))/2, var(--inner-side-margin));
}

.o-mts {
  margin-top: var(--s3);
}
.o-mtm {
  margin-top: var(--s5);
}

/* grid
  -------------------------------------------------- */

.o-gridBasic {
  display: grid;
  grid-template-columns: 350fr 700fr;
  gap: var(--s7);
  align-items: center;
}
@media (max-width: 767px) {
  .o-gridBasic {
    grid-template-columns: 1fr;
    /* gap: var(--s5); */
  }
}

/* more
  -------------------------------------------------- */

.o-centerWrapper {
  display: grid;
  place-content: center;
}

.o-historyBlock {
  padding-block: var(--s9);
  position: relative;
  z-index: 10;
}
.o-historyBlock::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 0;
  border-left: 2px dashed #fff;
  opacity: 0.2;
}
.o-historyBlock--last {
  padding-bottom: calc(var(--s1)*25);
}
@media (max-width: 767px) {
  .o-historyBlock {
    display: grid;
    row-gap: var(--s4);
  }
  .o-historyBlock::before {
    /* left: 0; */
    left: var(--inner-side-margin);
  }
}

/* mv
  -------------------------------------------------- */

.o-mv {
  padding-top: var(--header-height);
  min-height: 100vh;
  position: relative;
  z-index: 10;
}
.o-mv_back {
  position: absolute;
  /* position: sticky; */
  width: 100%;
  height: 100%;
  z-index: -1;
}
.o-mv_back img {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.o-mv_cnt_message {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 5% 5% 5% 50%;
  gap: var(--s7);
}
.o-mv_cnt_message img {
  width: 16vw;
}
.o-mv_cnt_txt {
  padding-top: .5em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 2.4vw;
  color: var(--teal);
}
@media (max-width: 767px) {
  .o-mv {
    min-height: 100svh;
  }
  .o-mv_cnt_message {
    padding: 8.5% 3% 5%;
  }
  .o-mv_cnt_message img {
    width: 32vw;
  }
  .o-mv_cnt_message p {
    font-size: 6.4vw;
  }
}


/* ローディング後のアニメーション */

:root {
  --mv-animation-time: 1s;
  --mv-animation-delay: .1s;
  --mv-animation-tf: cubic-bezier(.83, 0, .17, 1);
}

.c-mvAnimate span {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.c-mvAnimate span::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  /* right: 5%; */
  width: 90%;
  height: 100%;
  background: #fff;
}
.is-loaded .c-mvAnimate span::after {
  animation: loadAfterSlide var(--mv-animation-time) var(--mv-animation-tf) var(--mv-animation-delay);
}
@keyframes loadAfterSlide {
  0% {
    left: -95%;
  }
  50% {
    left: 5%;
  }
  51% {
    left: 5%;
  }
  100% {
    left: 95%;
  }
}

.c-mvAnimateLogo {
  position: relative;
  overflow: hidden;
}
.c-mvAnimateLogo::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  top: 0;
  left: -100%;
}
.is-loaded .c-mvAnimateLogo::after {
  animation: loadAfterSlideLogo var(--mv-animation-time) var(--mv-animation-tf) var(--mv-animation-delay);
}
@keyframes loadAfterSlideLogo {
  0% {
    left: -100%;
  }
  50% {
    left: 0%;
  }
  51% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}

.c-mvAnimate span i {
  opacity: 0;
}
.is-loaded .c-mvAnimate span i {
  animation: loadAfterBack var(--mv-animation-time) var(--mv-animation-tf) var(--mv-animation-delay) both;
}
.c-mvAnimateLogo img {
  opacity: 0;
}
.is-loaded .c-mvAnimateLogo img {
  animation: loadAfterBack var(--mv-animation-time) var(--mv-animation-tf) var(--mv-animation-delay) both;
}
@keyframes loadAfterBack {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.p-mvNews {
  position: absolute;
  max-width: 90%;
  width: 1200px;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, .95);
  border-radius: var(--s3) 0 0 0;
  padding: var(--s2) var(--s3);
  display: flex;
  align-items: center;
}
.p-mvNews_head {
  color: var(--teal);
  font-size: var(--f20);
  padding-right: var(--s3);
  border-right: 1px solid var(--line-grey);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .p-mvNews {
    display: block;
    max-width: 80%;
    padding-bottom: var(--s4);
  }
  .p-mvNews_head {
    border: none;
    margin-bottom: var(--s2);
    font-size: var(--f18);
  }
}

.p-mvNews_slider {
  display: flex;
  overflow: hidden;
  flex-grow: 1;
}
.p-mvNews_slider_wrapper {
  align-items: center;
}
.p-mvNews_slider_slide {
  display: flex;
  align-items: center;
}
.p-mvNews_item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  line-height: 1.4;
  padding-inline: var(--s3);
  transition: var(--transition-basic);
  transition-property: filter, opacity;
}
.p-mvNews_item time {
  font-family: var(--ff-num);
}
@media (hover: hover) {
  a.p-mvNews_item:hover {
    filter: brightness(150%);
    color: var(--teal);
  }
}
@media (max-width: 767px) {
  .p-mvNews_item {
    padding-inline: 0;
    display: block;
  }
  .p-mvNews_item time {
    display: block;
    margin-bottom: var(--s1);
    font-size: var(--f14);
  }
}

.p-mvNews_arrows {
  font-size: 32px;
  display: flex;
  gap: var(--s1);
  padding-left: var(--s3);
  border-left: 1px solid var(--line-grey);
  /* margin-left: var(--s3); */
}
.p-mvNews_arrow {
  position: static;
  margin: 0;
  color: var(--teal);

  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.p-mvNews_arrow--prev {
  /* mingcute--arrow-left-line */
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='M3.636 11.293a1 1 0 0 0 0 1.414l5.657 5.657a1 1 0 0 0 1.414-1.414L6.757 13H20a1 1 0 1 0 0-2H6.757l3.95-3.95a1 1 0 0 0-1.414-1.414z'/%3E%3C/g%3E%3C/svg%3E");
}
.p-mvNews_arrow--next {
  /* mingcute:arrow-right-line */
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='m14.707 5.636l5.657 5.657a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 0 1-1.414-1.414l3.95-3.95H4a1 1 0 1 1 0-2h13.243l-3.95-3.95a1 1 0 1 1 1.414-1.414'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 767px) {
  .p-mvNews_arrows {
    border: none;
    position: absolute;
    top: var(--s1);
    right: var(--s2);
    z-index: 20;
  }
}



/* greeting
  -------------------------------------------------- */

.o-secGreeting {
  padding-block: calc(var(--s1)*18) calc(var(--s1)*12);
  position: relative;
  z-index: 10;
}
@media (max-width: 767px) {
  .o-secGreeting {
    padding-block: calc(var(--s1)*12) calc(var(--s1)*15);
  }
}

.o-greetingGrid {
  display: grid;
  grid-template-columns: 610fr 435fr;
  grid-template-areas: "left right";
  gap: var(--s10);
}
.o-greetingGrid_left {
  grid-area: left;
}
.o-greetingGrid_right {
  grid-area: right;
}
@media (max-width: 767px) {
  .o-greetingGrid {
    grid-template-columns: 1fr;
    grid-template-areas: "left" "right";

  }
}

/* news
  -------------------------------------------------- */

.o-secNews {
  padding-block: calc(var(--s1)*15);
}
@media (max-width: 767px) {
  .o-secNews {
    padding-block: var(--s10) calc(var(--s1)*15);
  }
}

/* movie
  -------------------------------------------------- */

.o-secMovie {
  padding-block: calc(var(--s1)*15);
}
@media (max-width: 767px) {
  .o-secMovie {
    padding-block: var(--s10) calc(var(--s1)*15);
  }
}

/* message
  -------------------------------------------------- */

.o-secMessage {
  padding-block: calc(var(--s1)*18) calc(var(--s1)*12);
  position: relative;
  z-index: 10;
}
@media (max-width: 767px) {
  .o-secMessage {
    padding-block: calc(var(--s1)*25) calc(var(--s1)*40);
  }
}

.o-messageGrid {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "left right";
  gap: var(--s7);
}
.o-messageGrid_left {
  grid-area: left;
  display: grid;
  place-content: center;
}
.o-messageGrid_right {
  grid-area: right;
}
@media (max-width: 767px) {
  .o-messageGrid {
    grid-template-columns: 1fr;
    grid-template-areas: "left" "right";

  }
}


/* movie
  -------------------------------------------------- */


.p-mdlYtpBtn {
  display: block;
  width: min(750px, 100%);
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  transition: 300ms;
  border-radius: 8px;
}
.p-mdlYtpBtn::before {
  content: "";
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .7);
  transition: 300ms;
}
.p-mdlYtpBtn::after {
  content: "";
  position: absolute;
  z-index: 20;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  aspect-ratio: 1;
  background: url(../img/icon-play.svg) center/100% 100%;

  display: grid;
  place-content: center;
}
@media (hover: hover) {
  .p-mdlYtpBtn:hover::before {
    opacity: 0.8;
  }
  .p-mdlYtpBtn:hover img {
    transform: scale(1.1);
  }
}
.p-mdlYtpBtn img {
  display: block;
  transition: 300ms;
  position: relative;
}
.p-mdlYtpBtn--cs {
  pointer-events: none;
}
.p-mdlYtpBtn--cs::after {
  content: "COMMING SOON";
  position: absolute;
  width: 100%;
  height: 100%;
  background: none;
  transform: translate(-50%, -50%);
  font-family: var(--font-anton);
  font-size: var(--font-size-24);
  color: #fff;
}

.p-mdlYtpCnt {
  /* display: none; */
  position: fixed;
  z-index: 1000000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  transition: 500ms;
  padding: 1px;
}
.p-mdlYtpCnt:not(.is-open) {
  opacity: 0;
  visibility: hidden;
}

.p-mdlYtpCnt_bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  /* background-color: rgba(0, 0, 0, 0.8); */
  background: url(../img/bg-paper-teal.png) center/100% repeat-y;
  opacity: 0.9;
}

.p-mdlYtpCnt_wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 100%);
  aspect-ratio: 16/9;
}

.p-mdlYtpCnt_close {
  position: absolute;
  top: .3em;
  right: .6em;
  font-size: 50px;
  line-height: 1;
  cursor: pointer;
  z-index: 9999999;
  color: #fff;
}

.p-mdlYtpCnt_player {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  font-size: 30px;
}

/* ==========================================================================
	Components
   ========================================================================== */

.c-copyright {
  /* font-family: var(--ff-num); */
  font-weight: 300;
}

.c-heddingVrt {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(24px, 17.946px + 1.615vw, 40px);
  color: var(--teal);
  position: relative;
  z-index: 10;
  margin-block: auto;
  letter-spacing: .175em;
  min-height: 270px;
  /* text-align: center; */
  display: grid;
  place-content: center;
}
.c-heddingVrt::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  aspect-ratio: 190/261;
  z-index: -1;
  background: url(../img/symbol.svg) no-repeat center/100% 100%;
}
.c-heddingVrt--white {
  color: #fff;
}
.c-heddingVrt--white::after {
  width: 260px;
  filter: brightness(0) invert(1);
}
@media (max-width: 767px) {
  .c-heddingVrt {
    min-height: 180px;
  }
  .c-heddingVrt::after {
    width: 130px;
  }
  .c-heddingVrt--white::after {
    width: 180px;
  }
}
.c-heddingVrt_ind {
  padding-top: 2.35em
}

.c-heddingOrn {
  font-family: var(--ff-orn);
  color: var(--teal);
  line-height: var(--lh-min);
  opacity: 0.2;
  font-size: var(--f50);
  margin-bottom: var(--s5);


  /* background: #000;
  background-clip: text;
  background-size: 100% 0;
  color: transparent;
  transition: 500ms; */
}
/* .c-heddingOrn:hover {
  background-size: 100% 100%;
} */

.c-button {
  font-size: var(--f18);
  color: var(--teal);
  position: relative;
  padding-right: 40px;
  transition: var(--transition-basic);
}
.c-button::after {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='m14.707 5.636l5.657 5.657a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 0 1-1.414-1.414l3.95-3.95H4a1 1 0 1 1 0-2h13.243l-3.95-3.95a1 1 0 1 1 1.414-1.414'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;
  content: "";
  position: absolute;
  top: 50%;
  right: var(--s1);
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  /* vertical-align: -0.125em; */
  background-color: var(--teal);
  /* akar-icons:link-out */
  -webkit-mask: var(--svg);
  mask: var(--svg);
  margin-left: 4px;
  transition: var(--transition-basic);
}
.c-button--outlink::after {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.5 10.5L21 3m-5 0h5v5m0 6v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
a.c-button::before {
  content: "";
  position: absolute;
  width: 0;
  right: 0;
  left: auto;
  bottom: -5px;
  height: 1px;
  background: var(--teal);
  transition: var(--transition-basic);
  border-radius: 100px;
}
@media (hover: hover) {
  a.c-button:hover {
    filter: brightness(150%);
  }
  a.c-button:hover::before {
    left: 0;
    width: 100%;
  }
  a.c-button:hover::after {
    transform: translateY(-50%) translateX(2px);
  }
}

.p-greeting {
  position: relative;
}
.p-greeting_hd {
  position: absolute;
  bottom: 100%;
}
@media (max-width: 767px) {
  .p-greeting_hd {
    position: static;
  }
}

.c-greetingImg_img {
  position: relative;
}
.c-greetingImg img {
  border-radius: 8px;
}
.c-greetingImg_sakura {
  position: absolute;
  width: 20%;
  aspect-ratio: 71/73;
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
  background: url(../img/sakura-03.svg) center/100% 100%;
}
@media (max-width: 767px) {
  .c-greetingImg {
    max-width: 90%;
    margin-inline: auto;
  }
  .c-greetingImg_sakura {
    display: none;
  }
}

.c-greetingOrn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}
.c-greetingOrn::before,
.c-greetingOrn::after {
  content: "";
  position: absolute;
  top: var(--s4);
}
.c-greetingOrn::before {
  right: 0;
  background: url(../img/sakura-tree-r.svg) center/100% 100%;
  width: 20%;
  aspect-ratio: 346/269;
}
.c-greetingOrn::after {
  left: 0;
  background: url(../img/sakura-tree-l.svg) center/100% 100%;
  width: 15%;
  aspect-ratio: 191/193;
}
@media (max-width: 767px) {
  .c-greetingOrn::before {
    width: 40%;
  }
  .c-greetingOrn::after {
    width: 30%;
  }
}

.c-greetingSakura {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.c-greetingSakura_item {
  position: absolute;
}
.c-greetingSakura_item--01 {
  width: 10%;
  aspect-ratio: 141/181;
  top: 60%;
  right: -24px;
  transform: translateY(-50%);
  background: url(../img/sakura-01.svg) center/100% 100%;
}
.c-greetingSakura_item--02 {
  width: 8.5%;
  aspect-ratio: 117/187;
  top: 70%;
  left: -24px;
  transform: translateY(-50%);
  background: url(../img/sakura-02.svg) center/100% 100%;
}
.c-greetingSakura_item--03 {
  width: 9.5%;
  aspect-ratio: 131/88;
  bottom: 8px;
  right: 24px;
  background: url(../img/sakura-04.svg) center/100% 100%;
}
@media (max-width: 767px) {
  .c-greetingSakura_item--01 {
    width: 20%;
    top: 67%;
    right: -4px;
  }
  .c-greetingSakura_item--02 {
    width: 20%;
    top: 75%;
    left: -12px;
  }
  .c-greetingSakura_item--03 {
    width: 20%;
    bottom: 16px;
    left: 0;
    transform: scale(1, -1);
  }
}

.p-news_item {
  display: block;
  border-bottom: 1px solid var(--line-grey);
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  position: relative;
  transition: var(--transition-basic);
}
.p-news_item p {
  position: relative;
  padding-right: 40px;
}
.p-news_item time {
  display: block;
  font-size: var(--f14);
  font-family: var(--ff-num);
  margin-bottom: var(--s1);
}
.p-news_item p::after {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='m14.707 5.636l5.657 5.657a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 0 1-1.414-1.414l3.95-3.95H4a1 1 0 1 1 0-2h13.243l-3.95-3.95a1 1 0 1 1 1.414-1.414'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;
  content: "";
  font-size: var(--f18);
  position: absolute;
  top: 50%;
  right: var(--s1);
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  /* vertical-align: -0.125em; */
  background-color: var(--teal);
  /* akar-icons:link-out */
  -webkit-mask: var(--svg);
  mask: var(--svg);
  margin-left: 4px;
  transition: var(--transition-basic);
}
.p-news_item--outlink p::after {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.5 10.5L21 3m-5 0h5v5m0 6v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
@media (hover: hover) {
  a.p-news_item:hover {
    color: var(--teal);
    border-color: var(--teal);
    filter: brightness(150%);
  }
  a.p-news_item:hover p::after {
    transform: translateY(-50%) translateX(2px);
  }
}


.c-historyOrn {
  font-family: var(--ff-orn);
  position: absolute;
  z-index: -1;
  top: -100px;
  height: auto;
  writing-mode: vertical-rl;
  /* text-orientation: upright; */
  font-size: clamp(30px, 18.648px + 3.027vw, 60px);
  opacity: 0.1;
  white-space: nowrap;
}
.c-historyOrn--left {
  left: 0;
}
.c-historyOrn--right {
  right: 0;
}
@media (max-width: 767px) {
  .c-historyOrn {
    display: none;
  }
}

.c-historySakura {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100px;
  display: grid;
  place-content: center;
  top: 0;
}
.c-historySakura::before {
  position: absolute;
  content: "";
  width: 13.54%;
  aspect-ratio: 1;
}
.c-historySakura--left::before {
  left: 0;
}
.c-historySakura--right::before {
  right: 0;
  transform: rotate(180deg);
}
.c-historySakura--01::before {
  background: url(../img/sakura-w-01.svg) center/100% 100%;
}
.c-historySakura--02::before {
  background: url(../img/sakura-w-02.svg) center/100% 100%;
}
.c-historySakura--03::before {
  background: url(../img/sakura-w-03.svg) center/100% 100%;
}
@media (max-width: 767px) {
  .c-historySakura--left::before {
    left: auto;
    right: 0;
  }
}

.o-historyHead {
  padding-block: calc(var(--s1)*20);
}
@media (max-width: 767px) {
  .o-historyHead {
    padding-block: calc(var(--s1)*10);
  }
}

.o-historyBody {
  padding-top: calc(var(--s1)*20);
  position: relative;
  z-index: 10;
}
.o-historyBody::after {
  content: "";
  position: absolute;
  background: url(../img/sakura-w-03.svg) center/100% 100%;
  z-index: -1;
  top: 24px;
  right: 24px;
  width: 13.54%;
  aspect-ratio: 1;
}

.c-historyIntro {
  font-size: var(--f24);
}
@media (max-width: 767px) {
  .c-historyIntro {
    font-size: var(--f16);
  }
}

.c-historyYear {
  text-align: center;
  position: relative;
  z-index: 10;
}
.c-historyYear p {
  opacity: 0.3;
  font-family: var(--ff-num);
  font-size: clamp(50px, 31.08px + 5.045vw, 100px);
}
.c-historyYear p i {
  font-size: 30px;
  content: "年代";
  margin-left: var(--s2);
}
/* .c-historyYear p::after {
  font-size: 30px;
  content: "年代";
  margin-left: var(--s2);
} */
@media (max-width: 767px) {
  .c-historyYear {
    text-align: left;
    /* margin-left: calc(var(--s4) - var(--s4) - var(--s4)); */
    margin-left: var(--s2);
  }
}

.c-historyCards {
  --frame-color: #555;
  --bg-color: #484848;
  --text-color: #bbbbbb;
  --text: "あゆみ";
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "left right";
  column-gap: var(--s10);
}
.c-historyCards_left {
  grid-area: left;
}
.c-historyCards_right {
  grid-area: right;
}
.c-historyCards--mts {
  margin-top: var(--s3);
}
.c-historyCards--mtl {
  margin-top: var(--s6);
}
@media (max-width: 767px) {
  .c-historyCards {
    padding-left: var(--s5);
    grid-template-columns: 1fr;
    grid-template-areas: initial;
    row-gap: var(--s4);
  }
  .c-historyCards_left,
  .c-historyCards_right {
    grid-area: initial;
  }
  .c-historyCards--mts,
  .c-historyCards--mtl {
    margin-top: 0;
  }
  .c-historyCards_left:has(.c-historyCards_img) {
    order: 2;
  }
  .c-historyCards_left:has(.c-historyCards_orn) {
    display: none;
  }
}

.c-historyCards_img {
  border-radius: 8px;
  border: 3px solid var(--frame-color);
  overflow: hidden;
}
.c-historyCards_caps {
  font-size: clamp(12px, 10.486px + 0.404vw, 16px);
  opacity: 0.6;
  margin-top: var(--s1);
}
@media (max-width: 767px) {
  .c-historyCards_img+.c-historyCards_caps {
    margin-bottom: var(--s3);
  }
}

.c-historyCards_text {
  display: grid;
  row-gap: var(--s4);
  align-content: center;
  height: 100%;
}
@media (max-width: 767px) {
  .c-historyCards_text {
    height: auto;
  }
}
.c-historyCards_text_item {
  background: var(--bg-color);
  border-radius: 8px;
  padding: var(--s3) var(--s4);
  font-size: clamp(14px, 11.73px + 0.605vw, 20px);
  position: relative;
}
.c-historyCards_text_date {
  opacity: 0.5;
  margin-bottom: var(--s2);
  line-height: var(--lh-min);
}
.c-historyCards_text_date::after {
  content: var(--text);
  color: var(--text-color);
  font-size: clamp(10px, 8.486px + 0.404vw, 14px);
  opacity: 0.5;
  position: absolute;
  top: 8px;
  right: 16px;
}
.c-historyCards_text_item::before {
  --position: calc(var(--s5) - var(--s5) - var(--s5) - 5px);
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: var(--position);
  width: 10px;
  height: 10px;
  background: var(--frame-color);
  border-radius: 50%;
}
.c-historyCards_text_item::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 100%;
  width: var(--s5);
  border-bottom: 2px dashed var(--frame-color);
}
.c-historyCards_left .c-historyCards_text_item::before {
  left: auto;
  right: var(--position);
}
.c-historyCards_left .c-historyCards_text_item::after {
  right: auto;
  left: 100%;
}
@media (max-width: 767px) {
  .c-historyCards_text_item::before {
    right: auto !important;
    left: var(--position) !important;
  }
  .c-historyCards_text_item::after {
    left: auto !important;
    right: 100% !important;
  }
}

.c-historyCards_img--ad,
.c-historyCards_text--ad {
  --frame-color: #027375;
  --bg-color: rgba(2, 155, 117, .15);
  --text-color: #18EBEE;
  --text: "足立信用金庫のあゆみ";
}
.c-historyCards_img--sw,
.c-historyCards_text--sw {
  --frame-color: #7A6F45;
  --bg-color: rgba(84, 68, 0, 0.25);
  --text-color: #ffef3a;
  --text: "成和信用金庫のあゆみ";
}
.c-historyCards_img--as,
.c-historyCards_text--as {
  --frame-color: #6D3237;
  --bg-color: rgba(160, 30, 32, 0.2);
  --text-color: #ffaaab;
  --text: "足立成和信用金庫のあゆみ";
}

.c-historyCards_orn {
  font-family: var(--ff-orn);
  opacity: .1;
  font-size: clamp(20px, 8.648px + 3.027vw, 50px);
  line-height: var(--lh-min);
  position: relative;
  display: grid;
  align-items: center;
  height: 100%;
}
.c-historyCards_orn i {
  width: max-content;
  padding-inline: var(--s5);
  position: absolute;
  left: 0;
}
.c-historyCards_left .c-historyCards_orn i {
  text-align: right;
  left: auto;
  right: 0;
}
@media (max-width: 767px) {
  .c-historyCards_orn {
    display: none;
  }
}

.c-messageLogo {
  width: 420px;
  margin-inline: auto;
  margin-bottom: var(--s8);
}
@media (max-width: 767px) {
  .c-messageLogo {
    max-width: 80%;
  }
}

.c-message {
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: var(--lh-slow);
}
.c-message_intro {
  font-size: var(--f24);
  color: var(--teal);
}
.c-message_desc h5 {
  padding-block: var(--s8) var(--s2);
  font-size: var(--f20);
}
@media (max-width: 767px) {
  .c-message {
    writing-mode: inherit;
    text-orientation: inherit;
  }
}

.c-messageOrn {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: -1;
}
.c-messageOrn p {
  position: absolute;
  font-family: var(--ff-orn);
  font-size: clamp(30px, 14.864px + 4.036vw, 70px);
  opacity: 0.07;
  max-width: 70%;
  line-height: var(--lh-min);
}
.c-messageOrn::after {
  content: "";
  position: absolute;
}

.c-messageOrn--top {
  top: 0;
}
.c-messageOrn--top p {
  top: var(--s3);
  left: var(--s4);
  /* opacity: 0.5; */
}
.c-messageOrn--top::after {
  top: var(--s2);
  right: 0;
  background: url(../img/sakura-tree-r.svg) center/100% 100%;
  width: 20%;
  aspect-ratio: 346/269;
}
@media (max-width: 767px) {
  .c-messageOrn--top::after {
    width: 40%;
  }
}

.c-messageOrn--btm {
  bottom: 0;
}
.c-messageOrn--btm p {
  bottom: var(--s2);
  right: var(--s4);
  text-align: right;
}
.c-messageOrn--btm::after {
  bottom: var(--s2);
  left: 0;
  background: url(../img/sakura-tree-l.svg) center/100% 100%;
  width: 15%;
  aspect-ratio: 191/193;
}
@media (max-width: 767px) {
  .c-messageOrn--btm::after {
    width: 30%;
  }
}


/* ==========================================================================
	Trumps（Utility）
   ========================================================================== */

/* Spacing
  -------------------------------------------------- */

/* .mts1 {
  margin-top: var(--s1);
}
.mts2 {
  margin-top: var(--s2);
}
.mts3 {
  margin-top: var(--s3);
}
.mts4 {
  margin-top: var(--s4);
}
.mts5 {
  margin-top: var(--s5);
}
.mts6 {
  margin-top: var(--s6);
}
.mts7 {
  margin-top: var(--s7);
}
.mts8 {
  margin-top: var(--s8);
}
.mts9 {
  margin-top: var(--s9);
}
.mts10 {
  margin-top: var(--s10);
}
.mts11 {
  margin-top: calc(var(--s10) + var(--s1));
}
.mts12 {
  margin-top: calc(var(--s10) + var(--s2));
}
.mts13 {
  margin-top: calc(var(--s10) + var(--s3));
}
.mts14 {
  margin-top: calc(var(--s10) + var(--s4));
}
.mts15 {
  margin-top: calc(var(--s10) + var(--s5));
} */

.pts1 {
  padding-top: var(--s1);
}
.pts2 {
  padding-top: var(--s2);
}
.pts3 {
  padding-top: var(--s3);
}
.pts4 {
  padding-top: var(--s4);
}
.pts5 {
  padding-top: var(--s5);
}
.pts6 {
  padding-top: var(--s6);
}
.pts7 {
  padding-top: var(--s7);
}
.pts8 {
  padding-top: var(--s8);
}
.pts9 {
  padding-top: var(--s9);
}
.pts10 {
  padding-top: var(--s10);
}
.pts11 {
  padding-top: calc(var(--s10) + var(--s1));
}
.pts12 {
  padding-top: calc(var(--s10) + var(--s2));
}
.pts13 {
  padding-top: calc(var(--s10) + var(--s3));
}
.pts14 {
  padding-top: calc(var(--s10) + var(--s4));
}
.pts15 {
  padding-top: calc(var(--s10) + var(--s5));
}
.pts16 {
  padding-top: calc(var(--s10) + var(--s6));
}
.pts17 {
  padding-top: calc(var(--s10) + var(--s7));
}
.pts18 {
  padding-top: calc(var(--s10) + var(--s8));
}
.pts19 {
  padding-top: calc(var(--s10) + var(--s9));
}
.pts20 {
  padding-top: calc(var(--s10) + var(--s10));
}

.pbs1 {
  padding-bottom: var(--s1);
}
.pbs2 {
  padding-bottom: var(--s2);
}
.pbs3 {
  padding-bottom: var(--s3);
}
.pbs4 {
  padding-bottom: var(--s4);
}
.pbs5 {
  padding-bottom: var(--s5);
}
.pbs6 {
  padding-bottom: var(--s6);
}
.pbs7 {
  padding-bottom: var(--s7);
}
.pbs8 {
  padding-bottom: var(--s8);
}
.pbs9 {
  padding-bottom: var(--s9);
}
.pbs10 {
  padding-bottom: var(--s10);
}
.pbs11 {
  padding-bottom: calc(var(--s10) + var(--s1));
}
.pbs12 {
  padding-bottom: calc(var(--s10) + var(--s2));
}
.pbs13 {
  padding-bottom: calc(var(--s10) + var(--s3));
}
.pbs14 {
  padding-bottom: calc(var(--s10) + var(--s4));
}
.pbs15 {
  padding-bottom: calc(var(--s10) + var(--s5));
}
.pbs16 {
  padding-bottom: calc(var(--s10) + var(--s6));
}
.pbs17 {
  padding-bottom: calc(var(--s10) + var(--s7));
}
.pbs18 {
  padding-bottom: calc(var(--s10) + var(--s8));
}
.pbs19 {
  padding-bottom: calc(var(--s10) + var(--s9));
}
.pbs20 {
  padding-bottom: calc(var(--s10) + var(--s10));
}


/* font-size
  -------------------------------------------------- */

.f48 {
  font-size: var(--f48) !important;
}
.f36 {
  font-size: var(--f36) !important;
}
.f32 {
  font-size: var(--f32) !important;
}
.f24 {
  font-size: var(--f24) !important;
}
.f20 {
  font-size: var(--f20) !important;
}
.f18 {
  font-size: var(--f18) !important;
}
.f17 {
  font-size: var(--f17) !important;
}
.f16 {
  font-size: var(--f16) !important;
}
.f14 {
  font-size: var(--f14) !important;
}
.f12 {
  font-size: var(--f12) !important;
}

/* color
  -------------------------------------------------- */

.teal {
  color: var(--teal) !important;
}
.white {
  color: #fff;
}


/* alignment
  -------------------------------------------------- */

.ac {
  text-align: center;
}
.al {
  text-align: left;
}
.ar {
  text-align: right;
}
@media (max-width: 767px) {
  .acsp {
    text-align: center;
  }
  .alsp {
    text-align: left;
  }
  .arsp {
    text-align: right;
  }
}

.acbl {
  max-width: max-content;
  margin-inline: auto;
}


/* .over {
	transition: opacity 200ms;
}
@media (hover: hover) {
	.over:hover {
		opacity: 0.6;
	}
} */

@media (max-width: 767px) {
  .pcOnly {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .spOnly {
    display: none !important;
  }
}

.bgPaper {
  background: url(../img/bg-paper.png) center/100% repeat-y;
}
.bgPaperTeal {
  background: url(../img/bg-paper-teal.png) center/100% repeat-y;
}
.bgOfficeTeal {
  background: url(../img/bg-office-teal.png) center/cover no-repeat;
}