@charset "utf-8";

/*
//  HTML, Body
// ============================================= */

/*
//  Root
// ============================================= */
:root {
  --white: #fff;
  --black: #000;

  --lg-space: clamp(5.625rem, 4.018rem + 8.04vw, 11.25rem); /* 90 - 180 */
  --md-space: clamp(3.75rem, 3.013rem + 3.68vw, 6.25rem); /* 60 - 100 */
  --sm-space: clamp(2.5rem, 1.964rem + 2.68vw, 4.375rem); /* 40 - 70 */
}

html,body {
  padding: 0;
  margin: 0;
}
html {
  background: #000;
}
body {
  padding-block: clamp(3.375rem, 2.911rem + 2.32vw, 5rem);
  color: #fff;
  font-family: "EB Garamond", serif;
  font-size: clamp(0.94rem, 0.90rem + 0.18vw, 1.06rem);
  line-height: 2;
  text-align: center;
}
@media screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2){
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
body * {
  box-sizing: border-box;
  scroll-margin-block-start: 12.5rem;
}

/*
//  タグ基本
// ============================================= */
a {
  transition: all 0.3s ease;
}
p {
  margin: 0;
}
:where(h2, h3, h4, h5, h6) {
  font-weight: 400;
}
h2,
.largeTitle {
  margin-block: 4em 0.75em;
  font-size: calc( 0.0625rem * 20 );
  font-weight: 400;
  line-height: 1.4;
}
h2.wideSpace,
.largeTitle.wideSpace {
  margin-block-end: 1.75em;
}

h3,
.mediumTitle {
  margin-block: 2em 0;
  font-size: 1rem;
}
img {
  max-width: 100%;
  height: auto;
}
ol {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  list-style-position: outside;
  margin-inline: auto;
  width: fit-content;
  text-align: left;
}
ol li {
  padding-inline-start: 0.75em;
  line-height: 1.6;
}

/*
//  レイアウト
// ============================================= */
.largePadding {
  padding-block: var(--lg-space);
}
.mediumPadding {
  padding-block: var(--md-space);
}
.smallPadding {
  padding-block: var(--sm-space);
}

.largeSection {
  margin-block-end: var(--lg-space);
}
.mediumSection {
  margin-block-end: var(--md-space);
}
.smallSection {
  margin-block-end: var(--sm-space);
}


*[class*="wrapper"] {
  padding-inline: 1.5rem;
}
.wrapper--600 {
  max-width: calc(0.0625rem * 600);
  margin-inline: auto;
}
.pageContent > *:not(:first-child) {
  margin-block-start: 1.5em;
}
.borderedContent {
  border: 1px solid var(--white);
  padding: 1.5rem;
}

/*
//  リンク
// ============================================= */
.btn {
  display: block;
  border: 1px solid #fff;
  padding-block: 0.5rem;
  padding-inline: 1.5rem;
  margin-inline: auto;
  margin-block-start: 2rem;
  width: min(100%, 15rem);
  color: #fff;
  text-decoration: none;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover{
    background: #fff;
    color: #000;
  }
}

/*
//  画像
// ============================================= */
.fullImg {
  position: sticky;
  top: 0;
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100svh;
}
/* Styles for small screen */
@media (min-width: calc( 0.0625rem * 520 )) {
  .fullImg {
    height: auto;
  }
}

[class*="narrowImg"] img,
img[class*="narrowImg"] {
  display: block;
  margin-inline: auto;
}
.narrowImg--400 {
  width: min(100%, calc(0.0625rem * 400));
}


/*
//  文字
// ============================================= */
.textAlignLeft {
  text-align: left;
}
.textAlignCenter {
  text-align: center;
}
.textAlignRight {
  text-align: right;
}

/*
//  Margin調整
// ============================================= */
.marginTop--0 {
  margin-block-start: 0;
}

/*
//  改行調整
// ============================================= */
@media (max-width: calc( 0.0625rem * 520 )) {
  .spBr::after {
    content: '\A';
    display: inline;
    white-space: pre;
  }
}

/*
//  スクリーンリーダー
// ============================================= */
.screenReaderText {
  position: absolute;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  margin: -1px;
  padding: 0;
  overflow: hidden;
  width: 1px;
  height: 1px;
  word-wrap: normal !important;
}


/*
//  トップページ
// ============================================= */
.mainCopy {
  margin-block: 0 0.5rem;
  font-size: clamp(1.25rem, 1.179rem + 0.36vw, 1.5rem);
  line-height: 1.6;
}
.mainImage {
  display: block;
  margin-inline: auto;
  width: min(100%, 25rem);
  height: auto;
}