body{
    background: url(img/washi.jpg) no-repeat center center fixed;
    background-size: cover;
}

h2, h3, p, small{
  font-family: serif;
}

.relationship_deco{
  position: absolute;
  z-index: 1;
  width: 50%;
  bottom: 32%;
  right: 65%;
}


.relationship-deco-top-left{
    width: 35vw;
    height: auto;
    position: absolute;
    z-index: 1;
    bottom: 5em;
    left: -3em;
}

.relationship-deco-bottom-left{
    width: 25vw;
    height: auto;
    position: absolute;
    z-index: 3;
    right: 77vw;
    bottom: 5em;
}

.relationship-deco-top-right{
    width: 35vw;
    height: auto;
    position: absolute;
    z-index: -1;
    right: 1em;
    bottom: 25em;
}



@media screen and (min-width:1380px){
  .relationship-decoration{
  position: relative;
  z-index: 0;
}
 
.relationship-decoration::before {
  content: "";
  background-image: url(img/momiji_left2.png);
  background-size: cover;
  background-position: 2% 85%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 25em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.relationship-decoration::after {
  content: "";
  background-image: url(img/momiji_right3.png);
  background-size: cover;
  background-position: 95% 20%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 35em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
}

@media screen and (min-width:1170px) and (max-width:1379px){
  .relationship-decoration{
  position: relative;
  z-index: 0;
}
 
.relationship-decoration::before {
  content: "";
  background-image: url(img/momiji_left2.png);
  background-size: cover;
  background-position: 2% 85%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 17em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.relationship-decoration::after {
  content: "";
  background-image: url(img/momiji_right3.png);
  background-size: cover;
  background-position: 95% 20%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 22em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
}

@media screen and (min-width:770px) and (max-width:1170px){
  .relationship-decoration{
  position: relative;
  z-index: 0;
  }
.relationship-decoration::before {
  content: "";
  background-image: url(img/momiji_left2.png);
  background-size: cover;
  background-position: 1em 30em;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 17em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}}

/*
.relationship-decoration::after {
  content: "";
  background-image: url(img/momiji_right3.png);
  background-size: cover;
  background-position: 65em 2em;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 22em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}*/


.relationship-title{
  position: sticky;
  top: 0;
  left: 0;
}

.relationship-section h2 {
  font-size: 2rem;
  margin:40px 0  20px 30px;
  padding-bottom: 10px;
  text-shadow: 1px 2px 3px white;
  z-index: 3;
}


 .relationship {
    display: flex;
    padding: 80px 50px;
    gap: 40px; 
    max-width: 1500px; 
    flex-wrap: wrap; 
  }

  .relationship-left,
  .relationship-right {
    flex: 1; 
    min-width: 300px; 
  }

  .relationship-left iframe {
    width: 100%;
    height: 315px;
    border: 0;
  }

  .relationship-right {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .relationship-text {
    max-width: 500px;
  }

  .relationship-text h3 {
    margin-top: 0;
  }

  /* レスポンシブ対応 */
  @media screen and (max-width: 770px) {
    .relationship {
      flex-direction: column;
      gap: 20px;
      padding: 0 20px;
    }

    .relationship-left iframe {
      height: 200px;
    }

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



.cafe02, .marathon2, .newyear, .offsite, .golf01{
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  width: 100%;
}



.topics-section h2 {
  font-size: 2rem;
  margin:0 0  20px 30px;
  padding:40px 0 10px;
  text-shadow: 1px 2px 3px white;
}



.topics-title{
position: sticky;
  top: 0;
  left: 0;
}

.topics {
  display: flex;
  max-width: 1500px;
  gap: 40px; 
  padding-bottom: 80px;
  flex-wrap: wrap;
}

.topics-left {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.topics-left,
.topics-right {
  flex: 1;
  min-width: 300px; 
}


.topics-right img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}


.topics-section {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.topics-section::before {
  content: "";
  position: absolute;
  top: 0;left: 0;right: 0;bottom: 0;
  background: url(img/winter.png) center center no-repeat;
  background-size: cover;
  z-index: -1;
}



/* レスポンシブ */
@media screen and (max-width: 769px) {
  .topics {
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
  }
  .topics-left,
  .topics-right {
    width: 100%;
  }
  .topics-left {
    text-align: center;
  }
}



.history-section {
  position: relative;
  width: 100%;
  height: 600px;     
  overflow-y: auto;  
  padding-right: 10px; 
}

.history-section::-webkit-scrollbar {
  display: none; 
}

.history-section h2 {
  font-size: 2rem;
  margin:40px 0  20px 30px;
  padding-bottom: 10px;
  position: sticky;
  top: 0;
  z-index: 3;           
  text-shadow: 1px 2px 3px white;
}

.history-title{
position: sticky;
  top: 0;
  left: 0;
}




.timeline {
  position: relative;

  margin: auto;      
  padding: 50px 0;
}


.timeline-item {
  position: relative;
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
  text-align: center; 
}

.timeline-item.center {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-item.left {
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end; 
}

.timeline-item.right {
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
}

.circle {
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 6px solid #D0104C;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  display: block; 
  text-decoration: none;
}

.year {
  margin-top: 10px;
  font-weight: bold;
  color: #333;
  text-align: center;
}


.size1 { width: 120px; height: 120px; }
.size2 { width: 150px; height: 150px; }
.size3 { width: 180px; height: 180px; }
.size4 { width: 210px; height: 210px; }
.size5 { width: 240px; height: 240px; }
.size6 { width: 270px; height: 270px; }


.circle {
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 4px solid #CE0404; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  display: block;
  text-decoration: none;
  transition: transform 0.3s ease; 
}

.circle:hover {
  transform: scale(1.1);
}

@media screen and (max-width:600px){
  .size1 { width: 70px; height: 70px; }
.size2 { width: 90px; height: 90px; }
.size3 { width: 110px; height: 110px; }
.size4 { width: 140px; height: 140px; }
.size5 { width: 170px; height: 170px; }
.size6 { width: 200px; height: 200px; }
}



.container-text-center{
    background-color: #CE0404;
    display: block;
    color: #fff;
    text-align: center;
    padding: 10px 50px;
}




/*  永澤追加  */

@media screen and (min-width: 771px) {
  .box4 {
    position: relative;
    left: 20px; 
  }
}

@media screen and (max-width: 770px) {

  /* コンテンツの縦並びと間隔調整 */
  .content2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 1;
  }

  /* 親コンテナ調整 */
  .box4-container,
  .relationship-right,
  .topics-right {
    width: 100%;
    max-width: 100vw;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    overflow: hidden; 
    text-align: center; 
  }

  /* box4画像の調整 */
  .box4 {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    object-position: center center;
    padding: 0;
    border: none;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: none !important;
  }

  /* hanabi1 と hanabi2 の共通設定 */
  .hanabi1,
  .hanabi2 {
    position: absolute;
    z-index: -1;
    width: 100%;
    max-width: 100vw;
    height: auto;
    pointer-events: none;
  }

  /* hanabi2 は左にずらす */
  .hanabi1 {
    left: 0%;
  }
  .hanabi2 {
    left: -20%;
  }

  .Message-text {
    width: 100%;           
    max-width: 100%;       
    box-sizing: border-box; 
    padding-left: 10px;    
    padding-right: 10px;   
    margin-left: auto;
    margin-right: auto;
    margin-top: -50px;
  }

  /* Messageテキストの余白調整 */
  .Message-text > p {
    padding-bottom: 0 !important;
    margin-bottom: 0;
  }

  /* kumo-wrapperは非表示 */
  .kumo-wrapper {
    display: none;
  }

  /* 画像のサイズ調整 */
  .topics-right img,
  .relationship-right img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  /* iframeのレスポンシブ対応 */
  .relationship-left iframe {
    max-width: 100%;
    width: 100%;
    height: auto; 
  }

  /* 横スクロール防止 */
  body, html {
    overflow-x: hidden;
  }

}