/* 
MARK: RESET
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* MARK: VARIABLE
*/
:root {
  --scrollbar-color: #F4F1EE;
  --text-color: #fff;
  --background-color: #3C3C4C;
  --leading-xs: 170%;
  --text-xs: 12px;
  --spacing: 4px;
}

@media (max-width: 1920px) {
  :root {
    --page-margin: calc((100vw - 1080px) / 2);
  }
}

@media (max-width: 1080px) {
  :root {
    --page-margin: 16px;
  }
}

/* MARK: BASE STYLES
*/
html,
body {
  width: 100%;
  height: 100%;
  background: var(--background-color);
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--text-color);
  font-size: 24px;
  line-height: 200%;
}

html {
  scroll-behavior: smooth;
}

p,
span {
  word-break: auto-phrase;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  opacity: 0.8;
}

ul,
ol {
  list-style: none;
}

img {
  width: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
}

/* MARK: UTILITY CLASSES
*/
.hidden {
  display: none;
}

.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

.text-xs {
  font-size: var(--text-xs);
}

.leading-xs {
  line-height: var(--leading-xs);
}

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

.relative {
  position: relative;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.w-max {
  width: max-content;
}

.block {
  display: block;
}

.justify-center {
  justify-content: center;
}

.justify-evenly {
  justify-content: space-evenly;
}

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

.border-collapse {
  border-collapse: collapse;
}

.border-solid {
  border-style: solid;
}

.border-x-0 {
  border-inline-width: 0;
}

.border-y {
  border-block-width: 1px;
}

.border-white {
  border-color: #fff;
}

/* MARK: SPACING UTILITIES
*/
.mt-41 {
  margin-top: calc(41 * var(--spacing));
}

.mt-31 {
  margin-top: calc(31 * var(--spacing));
}

.mt-30 {
  margin-top: calc(30 * var(--spacing));
}

.mt-20 {
  margin-top: calc(20 * var(--spacing));
}

.mt-18 {
  margin-top: calc(18 * var(--spacing));
}

.mt-16 {
  margin-top: calc(16 * var(--spacing));
}

.mt-14 {
  margin-top: calc(14 * var(--spacing));
}

.mt-10 {
  margin-top: calc(10 * var(--spacing));
}

.mt-8 {
  margin-top: calc(8 * var(--spacing));
}

.mb-20 {
  margin-bottom: calc(20 * var(--spacing));
}

.mb-7 {
  margin-bottom: calc(7 * var(--spacing));
}

.py-20 {
  padding-block: calc(20 * var(--spacing));
}

.px-4 {
  padding-inline: calc(4 * var(--spacing));
}

.py-8 {
  padding-block: calc(8 * var(--spacing));
}

.pb-33 {
  padding-bottom: calc(33 * var(--spacing));
}

.pb-8 {
  padding-bottom: calc(8 * var(--spacing));
}

.pb-5 {
  padding-bottom: calc(5 * var(--spacing));
}

.pt-12 {
  padding-top: calc(12 * var(--spacing));
}

.pt-20 {
  padding-top: calc(20 * var(--spacing));
}

.pt-10 {
  padding-top: calc(10 * var(--spacing));
}

.pt-8 {
  padding-top: calc(8 * var(--spacing));
}

.gap-16 {
  gap: calc(16 * var(--spacing));
}

.gap-10 {
  gap: calc(10 * var(--spacing));
}

.gap-6 {
  gap: calc(6 * var(--spacing));
}

/* MARK: LAYOUT COMPONENTS
*/
section {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #fff;
}

.container {
  width: 100%;
  max-width: 1080px;
}

.container-fluid {
  width: 100%;
  padding: 0 var(--page-margin);
}

.row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* MARK: CUSTOM SCROLLBAR
*/
.main-wrapper,
.simplebar-content {
  width: 100%;
  height: 100%;
}

.simplebar-scrollbar::before {
  background-color: var(--scrollbar-color);
  width: 8px;
  border-radius: 4px;
}

.simplebar-scrollbar.simplebar-visible::before {
  opacity: 0.8;
}

.simplebar-track.simplebar-vertical {
  width: 12px;
  background-color: transparent;
}

.simplebar-track.simplebar-horizontal {
  height: 12px;
  background-color: transparent;
}

/* MARK: HEADER
*/
#header {
  height: calc(46.875 * 1vw);
  max-height: 900px;
  display: flex;
  background: #F0ECE4;
  position: relative;
}

#header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333333;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  animation: revealRight 1.2s ease-in-out forwards;
}

#header svg {
  z-index: 1;
  max-width: 40%;
  opacity: 0;
  animation: shadein 1.2s 1.2s ease-in-out forwards;
}

#clamp-logo {
  height: 90%;
}

/* MARK: ANIMATIONS
*/
@keyframes revealRight {
  0% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  50% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
  }
}

@keyframes shadein {
  0% {
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* MARK: CUSTOM LAYOUT
*/
.cus-layout {
  max-width: 1920px;
  padding-left: var(--page-margin);
  display: grid;
  grid-template-columns: 250px 250px auto auto;
  gap: 40px;
  grid-template-areas:
    "text text img1 img1"
    "img2 . img1 img1"
    "img2 img3 img3 .";
}

/*.cus-layout img {
  aspect-ratio: 16/9;
}*/

.cus-layout > div > p {
  margin-top: 16px;
}

.cus-layout > div:first-child {
  grid-area: text;
  width: 540px;
}

.cus-layout > div:nth-child(2) {
  grid-area: img1;
  height: 100%;
}

.cus-layout > div:nth-child(3) {
  grid-area: img2;
  position: relative;
}

.cus-layout > div:nth-child(4) {
  grid-area: img3;
  width: auto;
  max-width: 600px;
}

.cus-layout > div:nth-child(3) img {
  width: calc(270px + var(--page-margin));
  max-width: 520px;
  position: absolute;
  right: 0;
  top: 0;
}

/* MARK: CUSTOM TITLE
*/
.cus-title {
  display: flex;
  flex-direction: column;
  gap: 40px;
  font-size: 52px;
  align-items: center;
}

/* MARK: CUSTOM DATE
*/
.cus-date {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.cus-date > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cus-date > svg {
  transform: translateY(14px);
}

.cus-date > div:nth-child(2) {
  align-self: flex-end;
  height: 32px;
}

.cus-date > div > div {
  display: flex;
  align-items: end;
  gap: 16px;
}

.cus-date > div > div span:not(:last-child) {
  font-size: 32px;
}

/* MARK: BUTTON COMPONENTS
*/
.square-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 520px;
  border: 1px solid #fff;
  padding: 36px;
  font-size: 52px;
  gap: 24px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.square-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.square-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}

.square-link:hover::before {
  left: 100%;
}

.capsule-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 640px;
  gap: 16px;
  border: 1px solid #fff;
  border-radius: 50px;
  padding: 26px 0;
  background: linear-gradient(89deg, #3B3B57 0%, #454A5B 100%);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.capsule-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.4s ease;
}

.capsule-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.15);
}

.capsule-link:hover::before {
  left: 100%;
}

.capsule-link svg {
  transition: transform 0.3s ease;
}

.capsule-link:hover svg {
  transform: rotate(180deg);
}

.capsule-link-sm {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  gap: 16px;
  border: 1px solid #fff;
  border-radius: 50px;
  padding: 22px 0;
  background: linear-gradient(89deg, #3B3B57 0%, #454A5B 100%);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.capsule-link-sm::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.4s ease;
}

.capsule-link-sm:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.15);
}

.capsule-link-sm:hover::before {
  left: 100%;
}

.capsule-link-sm svg {
  transition: transform 0.3s ease;
}

.capsule-link-sm:hover svg {
  transform: rotate(180deg);
}

/* MARK: FADE EFFECT
*/
[data-fade] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-fade].fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* MARK: SECTION SPECIFIC STYLES
*/
#lead .container > div:first-child::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 774px;
  background-color: #565663;
  filter: blur(200px);
  z-index: -1;
}

#contact {
  border-width: 0;
}

  #contact address {
	  font-style: normal;
  }
/* MARK: RESPONSIVE DESIGN
*/

/* 1370px以下 */
@media (max-width: 1370px) {
  .cus-layout > div:nth-child(3) > img {
    width: calc(100% + var(--page-margin) - 16px);
  }
}

/* 768px以下（タブレット・スマートフォン） */
@media (max-width: 768px) {
  /* iOS Safari対応 */
  html,
  body {
    -webkit-overflow-scrolling: touch;
    font-size: 18px;
    line-height: 180%;
  }

  /* ユーティリティクラス */
  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }

  /* ヘッダー調整 */
  h2 {
    padding: 0 20px;
  }

  #clamp-logo {
    height: 60%;
    /*max-height: 200px;*/
	  max-height: 360px;
  }

  #nagoya-logo {
    height: 40%;
    max-height: 80px;
  }

  /* メインコンテンツ調整 */
  section {
    padding: 40px 0;
    min-height: auto;
    height: auto;
  }

  .container {
    padding: 0 16px;
  }
#header {
  height: calc(46.875 * 2vw);
}

  /* リード部分 */
  #lead .container > div:first-child {
    padding: 0 0 30px;
	  margin-top: 0;
  }

  #lead .box-lyt-time {
	  max-width: 280px;
	  width: 100%;
	  margin: auto;
  }
	.cus-date .date1 > div svg:nth-child(1) {
		width: 36.75%;
	}
	.cus-date .date1 > div svg:nth-child(2),.cus-date .date2 > div svg:nth-child(2)  {
		width: 10.25%;
		margin-bottom: 10px;
	}
	.cus-date .date1 > div svg:nth-child(3)  {
		width: 28.25%;
		margin-bottom: 2px;
	}
	.cus-date .date1 > div svg:nth-child(4) {
		width: 24.75%;
	}
	.cus-date .date2 > div svg:nth-child(1) {
		width: 34.75%;
	}
	.cus-date .date2 > div svg:nth-child(3)  {
		width: 34.25%;
	}
	.cus-date .date2 > div svg:nth-child(4)  {
		width: 20.75%;
	}

  #lead .row {
    /*flex-direction: column;*/
    gap: 10px;
	  
	  max-width: 520px;
	  margin: auto;
  }

  #lead .row.nav {
    gap: 20px;
    flex-direction: column;
  }

  #lead p {
    font-size: 14px;
    /*line-height: 160%;*/
	  margin-top: 2em;
  }

  /* カスタムタイトル */
  .cus-title {
    font-size: 28px;
    gap: 20px;
  }

  .cus-title h2 svg {
    max-width: 100%;
    /*height: auto;*/
	  height: 49px;
  }

  /* 日付表示調整 */
  .cus-date {
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    padding: 0 16px;
    flex-wrap: nowrap;
  }

  .cus-date .date1,
  .cus-date .date2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 1;
  }

  .cus-date > svg {
    width: 20px;
    height: auto;
    flex-shrink: 0;
    transform: none;
  }

  /* 年表示を非表示 */
  .cus-date .date1 > svg:first-child,
  .cus-date .date2 > svg:first-child {
    display: none;
  }

  /* 日付の数字部分を横並び */
  .cus-date .date1 > div,
  .cus-date .date2 > div {
    display: flex;
    flex-direction: row;
    /*align-items: center;*/
    gap: 4px;
  }
  .cus-date .date1 > div > div,
  .cus-date .date2 > div > div {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 20px;
  }

  /* 縦書きの月日表示を非表示 */
  .cus-date .date1 > div > div > svg:last-child,
  .cus-date .date2 > div > div > svg:last-child {
    display: none;
  }

  /* ドット部分 */
  .cus-date .date1 > div > div > svg:first-child,
  .cus-date .date2 > div > div > svg:first-child {
    width: 4px;
    height: 4px;
  }

  /* カスタムレイアウト（画像グリッド）を縦並びに変更 */
  .cus-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-left: 16px;
    padding-right: 16px;
    max-width: 100%;
  }

  .cus-layout > div:first-child {
    width: 100%;
  }

  .cus-layout > div:nth-child(3) img {
    position: static;
    width: 100%;
    transform: none;
  }

  .cus-layout > div:nth-child(4) {
    width: 100%;
    max-width: 100%;
  }

  .cus-layout h3 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .cus-layout p {
    font-size: 14px;
    line-height: 160%;
    margin-top: 12px;
  }

  /* ボタン類の調整 */
  .square-link {
    max-width: 100%;
    padding: 24px 16px;
    font-size: 16px;
    gap: 16px;
    flex-direction: column;
    text-align: center;
  }

  .square-link svg {
    width: 80px;
    height: auto;
  }
  .square-link + .square-link svg {
    width: 180px;
  }
  .square-link svg + svg,
  .square-link + .square-link svg + svg{
    width: 45px;
  }

  .capsule-link {
    width: auto;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 30px;
    padding: 20px 24px;
    font-size: 14px;
    gap: 12px;
  }

  .capsule-link-sm {
    max-width: 280px;
    padding: 16px 20px;
    font-size: 12px;
    gap: 8px;
  }

  /* テーブル調整 */
  table {
    font-size: 14px;
  }

  table th,
  table td {
    padding: 12px 8px;
  }

  table th div {
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
  }

  table th svg {
    width: 32px;
    height: 32px;
  }

  /* コンタクトセクション */
  #contact {
    padding: 60px 0 40px;
  }

  #contact .container {
    padding: 0 20px;
  }

  #contact > div {
    font-size: 12px;
    line-height: 150%;
  }

  #contact address {
    font-size: 12px;
  }

  /* SNSアイコン調整 */
  #contact .flex {
    gap: 32px;
  }

  /* 公式サイト・公式Xのリンク調整 */
  .mt-8.flex.justify-center.gap-6/*,
  .mt-8.flex.gap-16*/ {
    flex-direction: column;
    white-space: nowrap;
  }

  /* スペーシング調整 */
  .mt-41 { margin-top: calc(20 * var(--spacing)); }
  .mt-31 { margin-top: calc(16 * var(--spacing)); }
  .mt-30 { margin-top: calc(16 * var(--spacing)); }
  .mt-20 { margin-top: calc(12 * var(--spacing)); }
  .mt-18 { margin-top: calc(12 * var(--spacing)); }
  .mt-16 { margin-top: calc(10 * var(--spacing)); }
  .mt-14 { margin-top: calc(10 * var(--spacing)); }
  .mt-10 { margin-top: calc(8 * var(--spacing)); }

  .pb-33 { padding-bottom: calc(16 * var(--spacing)); }
  .pt-12 { padding-top: calc(8 * var(--spacing)); }
  .pt-20 { padding-top: calc(12 * var(--spacing)); }
  .py-20 { padding-block: calc(12 * var(--spacing)); }

  .gap-16 { gap: calc(8 * var(--spacing)); }
  .gap-10 { gap: calc(6 * var(--spacing)); }
  .gap-6 { gap: calc(4 * var(--spacing)); }

  /* テキストサイズ調整 */
  .text-xs {
    font-size: 11px;
  }

  .text-xs.leading-\(--leading-xs\)[data-fade] {
    display: block;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .sp-only .text-xs.leading-\(--leading-xs\)[data-fade] {
    max-width: none;
  }
}

/* 480px以下（小さなスマートフォン） */
@media (max-width: 480px) {
  html,
  body {
    font-size: 16px;
  }

  .cus-title {
    font-size: 24px;
  }

  /* 小画面での日付表示調整 */
  .cus-date {
    padding: 0 12px;
    gap: 6px;
	  margin-top: .6em;
  }
  
  .cus-date > svg {
    width: 16px;
  }

  .cus-date .date1 > div > div,
  .cus-date .date2 > div > div {
    font-size: 18px;
    gap: 1px;
  }

  .cus-date .date1 > div > div > svg:first-child,
  .cus-date .date2 > div > div > svg:first-child {
    width: 3px;
    height: 3px;
  }


  .cus-layout {
    padding-left: 12px;
    padding-right: 12px;
  }

  .square-link {
    padding: 20px 12px;
    font-size: 14px;
  }

  .capsule-link {
    padding: 16px 20px;
    font-size: 13px;
  }

  .capsule-link-sm {
    padding: 14px 16px;
    font-size: 11px;
  }

  #contact .flex {
    gap: 24px;
  }
  #contact footer .flex {
    gap: 20px;
  }
  footer .mt-10,footer .mt-8 {
	  margin-top: 0;
  }
  footer .mt-30{
	  margin-top: 2em;
  }
}

/* 横向きスマートフォン対応 */
@media (max-width: 768px) and (orientation: landscape) {
  #header {
    height: 80vh;
    max-height: 500px;
  }

  #lead .container > div:first-child {
    padding: 0 0 40px;
  }

  section {
    padding: 60px 0;
  }
}