html { scroll-behavior: smooth; }

body {
  background-color: #c0772e;
  font-family: "hannari","ten-mincho-text","source-han-serif-jp-subset","Cinzel",serif;
  font-style: normal;
  font-size: 100%;
  line-height: 1.33;
  font-weight: normal;
  /* z-index: は不要＆小数不可 */
}

/* Cinzel のユーティリティ名に < > は使えないので改名 */
.cinzel {
  font-family: "Cinzel", serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

header {
        font-size: 80%;
        font-weight: normal;
        text-align: center;
        padding-top:0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        margin-bottom: 100px;
  }

a {    color: #000;
       text-decoration: none; /* 下線を消す場合 */
       transition: color 0.7s;
}

a:hover {color: #535353;}
a:active {color: #535353;}

p {text-align: center;
    mix-blend-mode: col or-burn;}

   .logo {
      display: block; /* デフォルトでブロック要素に */
      margin: 0 auto; /* 中央配置のため */
      height: auto;   /* アスペクト比を維持 */
    }

    .logo.large {
      display: block; /* デフォルトで表示 */
    }

    .logo.small {
      display: none;  /* デフォルトで非表示 */
    }

    @media (max-width: 768px) { /* 例：画面幅が768px以下の場合 */
      .logo.large {
        display: none;
      }
      .logo.small {
        display: block;
      }
    }

.statement p {
    color: #b9bbb6;
    display: flex;
    text-align: center;
    mix-blend-mode: difference;
}

/* GREATVISIONCHANT */
.menu {
  display: flex;
  justify-content: space-around;
}

.square{
    position: relative;/*親要素にrelative*/
}

.square p{
  position: absolute;/*重ねたい子要素にabsolute*/
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  font-size: 1.8rem;
  text-align: center;
  letter-spacing: 0.13em; /* 文字間隔を広げる */
  mix-blend-mode: difference;
  /*background-color: rgba(255,255,255,0.2);
  padding: 1rem 2rem;/*文字の回りの余白*/*/
  border-radius: 50%;
  -webkit-backdrop-filter: ;/* ベンダープレフィックス*/
  backdrop-filter: ;
  /*margin: 0!important;/*文字がずれている場合や*/
  /*padding: 0!important;/*文字が折り返される場合*/
}

.square a {color: #FFF;
       text-decoration: none; 
       transition: color 0.7s;}
.square a:hover {color: #535353;}
.square a:active {color: #535353;}

@media (max-width: 768px) {
    .menu { flex-wrap: wrap; /* 画像を折り返す */ }
    .square img { width: 45%; /* 2つ並べる */
        margin-bottom: 20px; }
    .square p{
        font-size: 1.3rem;
        text-align: center;
    }
}

/*　波紋　*/
.circle span.mask{
	position: relative;/*波紋の基点となる位置を定義*/
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

.circle span.mask::before {
	position: absolute;
	content:"";
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	transform: scale(0);/*円の大きさ初期値は0*/
	opacity: 0;/*透過0*/
	width:50%;/*円のサイズ指定*/
	height:60%;/*円のサイズ指定*/
	border-radius:50%;/*円の角丸指定*/
	background: rgba(255,255,255,0.15);/*円の背景色*/
}

.circle span.mask:hover::before {/*hoverした時の変化*/
	animation: circle 7s;/*アニメーションの名前と速度を定義*/
}

@keyframes circle {
  0% {
  transform: scale(0);
  opacity: 1;/*透過なし*/
  }
  30% {
    opacity: 1;
  }
  100% {
  transform: scale(2);/*アニメーションで大きくなった2倍の円の指定*/
  }
}

/*コンセプト*/
.concept {
  display: flex;               /* Enables horizontal layout */
  justify-content: center;     /* Centers the boxes horizontally */
  /*align-items: center;       /* Centers the boxes vertically (optional) */
  height: 170vh;               /* Full viewport height */
  background-color: ;
  gap: 80px;                   /* Space between boxes */
}

.box {padding-top: 0px;
  width: 750px;
  height: 170vh;
  background-color: ;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: top;
  font-size: 100%;
  border-radius: ;
}

/*CONCEPTレスポンシブー小画面で高さ固定をやめて余白だけにする */
@media (max-width: 1024px){
  .concept{
    height: auto ;
    min-height: 100vh ;
    padding-top: clamp(24px, 6vw, 48px) ;
    padding-bottom: clamp(24px, 6vw, 56px) ;
  }
  .box{
    height: auto ;
    min-height: 100vh ;
    padding-top: clamp(40px, 8vw, 72px) ;  /* 中の余白で調整 */
  }
}

/*ドネーション*/
.donation_box {
    position: relative;
    text-align: center;
    margin-top: 0px;
    padding-top: 0px;
    font-size: 90%;
}

.donation_box img {
    position: relative;}

.donation_box p {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin-top: ;
    font-size: 1.8rem;
    letter-spacing: 0.3em;
    mix-blend-mode: difference;
}
.donation_box a {  color: #FFF;
       text-decoration: none; 
       transition: color 0.7s;
}
.donation_box a:hover {color: #535353;}
.donation_box a:active {color: #535353;}

.donation {
  display: flex;               /* Enables horizontal layout */
  justify-content: center;     /* Centers the boxes horizontally */
  /*align-items: center;       /* Centers the boxes vertically (optional) */
  height: 50vh;               /* Full viewport height */
  background-color: ;
  gap: 80px;                   /* Space between boxes */
}

/*DONATIONレスポンシブ*/
/* 修正：余分な } を削除して1つにまとめる */
@media screen and (max-width: 1024px) {
  .donation_box p { font-size: 18px; }
  .donation .box-2 { height: 40vh; }
}

.box-2 {
  width: ;
  height: 50vh;
  background-color: ;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: top;
  font-size: 90%;
  border-radius: ;
}

/*mainの背景*/
:root {
  --hero-ratio-desktop: 0.7;     /* tree-4: 1000x700 */
  --hero-ratio-mobile:  0.483;   /* tree-3: 1450x700 */
  --hero-maxw: 1100px;           /* 通常幅の最大サイズ（見かけ幅） */

  /* “下げ量”の基準（必要に応じて微調整） */
  --hero-shift-normal: 300px;    /* PC通常時に少し下げる量 */
  --hero-shift-wide:   320px;    /* 超大画面での下げ量 */
  --hero-shift-tab:    300px;    /* タブレットでの下げ量 */
  --hero-shift-phone:  340px;    /* スマホでの下げ量 */
}

/* 基本（PC〜） */
main {
  background-image: url("tree-4.png");
  background-repeat: no-repeat;
  background-size: contain;

  /* “位置”は top 固定にし、下げたい分は padding-top に加算して高さを増やす */
  background-position: center top;

  /* 見かけ高さ = 画像の高さ + 下げ量（＝donation が重ならない） */
  padding-top: clamp(
    calc(240px + var(--hero-shift-normal)),
    calc(var(--hero-ratio-desktop) * 100vw + var(--hero-shift-normal)),
    calc(var(--hero-ratio-desktop) * var(--hero-maxw) + var(--hero-shift-normal))
  );

  /* 下のセクションとの余白（好みで微調整） */
  margin-bottom: clamp(20px, 5vw, 96px);
}

/* 超大画面（1600px以上）：拡大打ち止め＋シフトも加算 */
@media (min-width: 1600px) {
  main {
    background-size: 1400px auto;                 /* 上限を 1300px に */
    /* 画像高さ(0.7*1300=910px) + 下げ量 */
    padding-top: calc(0.7 * 1400px + var(--hero-shift-wide));
    background-position: center top;              /* top 固定 */
  }
}

/* タブレット以下（1024px以下）：モバイル用画像＋同じ考え方 */
@media (max-width: 1024px) {
  main {
    background-image: url("tree-3.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;

    /* 画像高さ(0.483*88vw) + 下げ量  ※上限300pxはお好みで */
    padding-top: clamp(
      calc(140px + var(--hero-shift-tab)),
      calc(var(--hero-ratio-mobile) * 88vw + var(--hero-shift-tab)),
      calc(300px + var(--hero-shift-tab))
    );

    margin-bottom: clamp(10px, 3.5vw, 40px);
  }
}

/* スマホ（600px以下）：さらに下げつつ、同様に“高さに加算” */
@media (max-width: 600px) {
  main {
    background-position: center top;
    padding-top: clamp(
      calc(130px + var(--hero-shift-phone)),
      calc(var(--hero-ratio-mobile) * 84vw + var(--hero-shift-phone)),
      calc(300px + var(--hero-shift-phone))
    );
  }
}

@media (max-width: 430px){
  main{
    background-image: url("tree-3.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;

    /* 画像高さ(0.483*84vw) + 下げ量(280px) ※好みで 260〜340px */
    padding-top: clamp(
      calc(120px + 280px),
      calc(0.483 * 84vw + 280px),
      calc(260px + 280px)
    );

    margin-bottom: clamp(8px, 3vw, 28px);
  }
}