/* ==========================================================
   Kochi Design System
========================================================== */
:root {

  /* Brand */
  --ew-logo: #6c3524;
  --ew-heading: #250d00;
  --ew-text: #000b00;

  /* Sub */
  --ew-sub: #8a7a70;
  --ew-line: #e5e0dc;
  --ew-bg: #ffffff;
  --ew-overlay: rgba(255,255,255,.55);
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

/* ==========================================================
   Base
========================================================== */
h1.entry-title{
  display:none;
}

.top-page{
  margin-top:0;
  padding-top:0;
}

.l-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

.l-container--narrow{
  max-width:900px;
  margin:0 auto;
  padding:0 16px;
}

br.sp-only{
  display:none;
}

@media(max-width:768px){
  br.sp-only{
    display:inline;
  }
}

/* ============= section ============= */
.section{
  width:100%;
  max-width:900px;
  margin: 1rem auto;
  background: #f3f3f2;
}

.section h2{
  font-size: 1.5rem;
  margin-top: 0.5rem;
}

.section-text{
  width:100%;
  max-width:900px;
  margin:0.5rem auto 0.5rem;

  text-align:center;

  color:var(--ew-text);
  font-size:1rem;
  line-height:1.8;
  letter-spacing:.1rem;
}

/* ============= First View ============= */
.top-fv{
  position: relative;
  height: 60vh;
  top: 0;
  left: 0;
  width: 100%;
  min-height: auto;
  z-index: 1;

  background-image:url("https://kochi-divination.com/wp-content/uploads/2026/06/kochi_top.webp");
  background-size: cover;
  background-position: center 15%;
  background-repeat: no-repeat;

  overflow: hidden;
}

.top-page .section{
  position: relative;
  z-index: 2;
  background: #fff;
}

.top-fv__overlay{
  position: absolute;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(880px, 88vw);
  height: min(48vh,480px);
  background-color: rgba(243,243,242,0.4);
  z-index: 1;
}

.top-fv__content{
  position: relative;
  z-index: 2;
  width: min(820px, 86vw);
  margin: 0 auto;
  padding: 8rem 2rem;
  text-align: center;
}

/*---- fv h ----*/
.top-fv h1{
  color: var(--ew-heading);
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  line-height: 1.5;
  padding: 1rem;
}

h2{
  text-align: center;
}

.top-fv h3{
  font-size: 1rem;
  padding: 1rem;
  letter-spacing: 0.3rem;
}

/*---- Introduction ----*/

.section-label{
  margin:0 auto .25rem;
}

.section-label + p{
  margin-top:0;
}

.section-label + h2{
  margin:0 auto .5rem;
}

.section-label + h2 + p{
  margin-top:0;
}

.top-fv__label{
  color:var(--ew-logo);
  font-size:0.85rem;
  letter-spacing:0.2rem;
  margin: -1.5rem auto 2rem;
  padding:1rem auto;
  text-align: center;
}

.top-fv__lead{
  color:var(--ew-text);
  line-height:1.9;
  letter-spacing:0.2rem;
  margin-top: -0.5rem;
}

/*---- fv cta -----*/
.top-fv__cta{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  margin: 3rem auto;
}

.top-fv__cta a{
  display:flex;
  justify-content:center;
  align-items:center;

  width:180px;      /* ← 今より細く */
  height:40px;

  padding:0;

  border:1px solid var(--ew-logo);
  border-radius:999px;

  color:var(--ew-logo);
  text-decoration:none;
}

.top-fv__cta a:hover{
  background:var(--ew-logo);
  color:#fff;
}

/*---- FV Text ----*/
.fv-text p{
  width:100%;
  max-width:700px;

  margin-top:8rem;

  text-align:center;

  color:var(--ew-text);
  font-size:1rem;
  line-height:1.8;
  letter-spacing:.1em;
}

/* ============= TOP Navigation ============= */
.top-section-nav{
  width: 100%;
  max-width: 100%;

  margin: 0.5rem auto 0;
  padding: 0 1rem;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
}

.top-section-nav a{
  flex:1;
  max-width:140px;

  display:flex;
  justify-content:center;
  align-items:center;

  padding:0.3rem 0.5rem;

  border:1px solid var(--ew-line);
  background-color: rgba(243,243,242,0.4);

  color:var(--ew-heading);
  text-decoration:none;
  letter-spacing:0.1em;

  transition:
    color .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.top-section-nav a:hover{
  color:#82ae46;
  border-color:#82ae46;
  background:#fff;
}

/* ============= Section Read More ============= */

.section-more{
  position:relative;

  display:flex;
  justify-content:center;
  align-items:center;

  width:max-content;
  min-height:32px;
  margin:1rem auto .5rem;
  padding:0 2.5rem 0 .5rem;

  color:var(--ew-heading);
  font-family:serif;
  font-size:.9rem;
  font-style:italic;
  letter-spacing:.08em;
  text-decoration:none;

  transition:
    color .25s ease,
    transform .25s ease;
}

.section-more::before{
  content:"";

  position:absolute;
  right:.45rem;
  top:50%;

  width:16px;
  height:16px;

  transform:translateY(-50%);

  border-radius:50%;
  background:#82ae46;
}

.section-more::after{
  content:"";

  position:absolute;
  right:.8rem;
  top:50%;

  width:0;
  height:0;

  transform:translateY(-50%);

  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:5px solid #fff;
}

.section-more:hover{
  color:#82ae46;
  transform:translateX(4px);
}

/* ============= blog link ============= */
.blog-link-list{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;

  width:100%;
  margin:1rem auto 0;
}

.blog-link{
  position:relative;

  display:flex;
  justify-content:center;
  align-items:center;

  width:180px;
  height:40px;

  padding-left:24px;

  border:1px solid #432f2f;
  border-radius:999px;

  background:#fff;

  color:var(--ew-heading);
  text-decoration:none;
  letter-spacing:.1em;

  transition:
    color .25s ease,
    background .25s ease;
}

.blog-link-title{
  font-size:1rem;
  font-family: serif;
  font-weight:400;
  letter-spacing:0.1rem;
  margin:0 auto ;
  padding-right: 1rem;
  padding-bottom: 0.2rem;
  color:var(--ew-heading);
}

/* 緑アイコン */
.blog-link::before{
  content:"";

  position:absolute;
  left:1rem;
  top:50%;

  width:15px;
  height:15px;

  transform:translateY(-50%);

  border-radius:50%;
  background:#82ae46;
}

/* 白矢印 */
.blog-link::after{
  content:"";

  position:absolute;
  left:1.4rem;
  top:50%;

  width:0;
  height:0;

  transform:translateY(-50%);

  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:5px solid #fff;
}

/* hover */
.blog-link:hover{
  color:#82ae46;
  background:#fafaf8;
  transform:translateX(4px);
}

/* ==========================================================
   Top Content Layout + Information & Calendar
========================================================== */
.top-content-wrap{
  display:grid;
  grid-template-columns:6.5fr 3.5fr;
  gap:2rem;

  width:100%;
  max-width:1200px;
  margin:4rem auto;
  padding:0 1rem;
}

.top-main-sections{
  min-width:0;
}

.top-content-wrap .section{
  width:100%;
  max-width:none;
  margin:0 0 2rem;
}

.top-sidebar{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.top-news,
.top-calendar{
  background:#fff;
  padding:1.2rem;
  border:1px solid var(--ew-line);
  border-radius:8px;
}

.top-news h2,
.top-calendar h2{
  margin:0 0 .75rem;
  text-align:center;
  color:#250d00;
  font-size:1.2rem;
  font-weight:400;
  letter-spacing:.12em;
}


/* ==========================================================
   What's New
   トップページ：リンクなし・テキスト表示
========================================================== */

.top-news-heading{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:2rem;
  margin-bottom:.75rem;
}

.top-news-heading h2{
  width:max-content;
  margin:0;
  text-align:center;
}

.top-news-list{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0;
}

.top-news-item{
  margin:0;
  padding:.9rem 0;
  border-bottom:1px solid var(--ew-line);
}

.top-news-item:first-child{
  border-top:1px solid var(--ew-line);
}

.top-news-item__text{
  display:flex;
  align-items:baseline;
  gap:.75rem;

  margin:0;

  color:var(--ew-text);
  font-size:.9rem;
  line-height:1.8;
  letter-spacing:.04em;
  text-align:left;
}

.top-news-item__date{
  flex-shrink:0;

  color:var(--ew-sub);
  font-size:.8rem;
  letter-spacing:.08em;
  white-space:nowrap;
}

.top-news-item__message{
  min-width:0;
}

.top-news-empty{
  margin:0;
  padding:1rem 0;
  color:var(--ew-sub);
  font-size:.9rem;
  text-align:center;
}

.top-calendar p{
  text-align:left;
  font-size:.9rem;
  line-height:1.8;
}

.top-calendar iframe{
  width:100%;
  height:400px;
  border:none;
  border-radius:8px;
}

/* ==========================================================
   SP
========================================================== */

@media (max-width:768px){

  .top-fv{
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:calc(100vh - 50px);
    margin-top:50px; /* ← header分はこっちで確保 */
    background-position:center 18%;
    overflow:hidden;
  }

  .top-fv__overlay{
    top: 3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    height: 82vh;
  }

  .top-fv__content{
    width: 100%;
    max-width: 100%;
    padding: 5rem 1.5rem;
    text-align: center;
  }

  .top-fv__label{
    font-size:.75rem;
    letter-spacing:.1rem;
    margin:-.8rem auto 1rem;
    padding:0;
  }

  .top-fv h1{
    font-size:clamp(1.35rem, 6vw, 1.8rem);
    line-height:1.55;
    padding:.5rem 0;
  }

  .top-fv h3{
    font-size:.85rem;
    letter-spacing:.18rem;
    padding:.8rem 0;
  }  

  .top-fv__lead{
    font-size:.9rem;
    line-height:1.8;
    letter-spacing:.12rem;
    margin-top:.2rem;
  }

  .top-fv__cta{
    flex-direction:column;
    gap:.7rem;
    margin:1.5rem auto;
  }

  .top-fv__cta a{
    width:100%;
    max-width:300px;
    height:38px;
  }

  .fv-text{
    max-width:90%;
    margin:2rem auto 0.8rem;
    font-size:.85rem;
    line-height:1.7;
    letter-spacing:.08em;
  }

/*---- navi ----*/
  .top-section-nav{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:.7rem;
    max-width:320px;
    margin:.8rem auto 0;
    padding:0;
  }

  .top-section-nav a{
    max-width:none;
    min-height:38px;
    padding: 0.3rem 0.3rem;
    font-size:.85rem;
  }

/*---- section ----*/
 .section{
    width:88%;
    max-width:88%;
    margin:1rem auto;
    border-radius:8px;
  }

  .section h2{
    font-size:1.35rem;
  }

  .section-text{
    max-width:100%;
    margin:.5rem auto;
    font-size:.9rem;
    line-height:1.8;
    letter-spacing:.08rem;
  }

  /*---- section read more ----*/
  .section-more{
    min-height:30px;
    margin:.8rem auto .25rem;
    padding-right:2.25rem;
    font-size:.85rem;
  }

  /*---- blog link ----*/
  .blog-link-list{
    display:flex;
    flex-direction:row;   /* ←横並び */
    justify-content:center;
    align-items:center;

    gap:1rem;
    margin:1.2rem auto 0;
  }

  .blog-link{
    width:150px;
    max-width:none;
    height:38px;
  }

  .blog-link-title{
    font-size:.85rem;
    letter-spacing:.05rem;
  }

  /*---- content + sidebar ----*/
  .top-content-wrap{
    grid-template-columns:1fr;
    width:88%;
    padding:0;
    gap:1.5rem;
    margin:2rem auto;
  }

  .top-content-wrap .section{
    margin:0 0 1rem;
  }


  /*---- What's New ----*/
  .top-news-item{
    padding:.8rem 0;
  }

  .top-news-item__text{
    gap:.6rem;
    font-size:.86rem;
  }

  .top-news-item__date{
    font-size:.76rem;
  }


}