@charset "UTF-8";
html{font-size: 16px;scroll-behavior: smooth;margin: 0;padding: 0;}
body{
  background: linear-gradient(
    to bottom,
    #2c4f66 0%,
    #294a60 100%
  );
  margin: 0;padding: 0;
}
body::before{
  content: "";
  position: fixed;
  inset: 0;               /* top/right/bottom/left = 0 */
  height: 100dvh;         /* 動的ビュー高さに合わせる */
  background: url("img/揺らめき.png") repeat;
  opacity: 0.15;
  animation: waterMove 25s linear infinite;
  pointer-events: none;
  z-index: -1;
  background-size: cover; /* 必要に応じて調整 */
}
@keyframes waterMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 400px 200px;
  }
}
.about{max-width: 1000px;margin:10px auto;text-align: center;line-height: 2.5;}
.text{max-width: 900px;margin: auto;text-align: center;line-height: 1.5;}
p,div{
  font-family: "Kiwi Maru", serif;
  font-weight: 300;
  font-style: normal;
}
.title{
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-style: normal;
}

/*文字*/
a{text-decoration: none;}
h1{color: #fff;}
.concept-title {
  text-align: center;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: white;
  margin: 40px 0;
  position: relative;
}
/* 上下ライン */
.concept-title::before,
.concept-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: white;
  margin: 10px auto;
}
.intro-banner {
  background-color: #0d3b66;
  padding: 25px 20px;
  text-align: center;
  border-bottom: 2px solid #f4a261;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.intro-text {
  font-family: 'Kiwi Maru', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
}
.concept-catch{font-size: 20px;text-align: left; margin-bottom: 50px;color: #ffe9d6;text-shadow: 0 2px 10px rgba(0,0,0,0.4);}
.concept-p{max-width: 500px;margin: auto;text-align: left;font-size: large;color: #f5e6d8;text-shadow: 0 2px 10px rgba(0,0,0,0.4);}
.concept-p span{
  color: #ffb07a !important;
}
.cta-text{  
  text-align: center;
  font-size: 22px;
  margin: 60px 0;
  color: #ffd8b0;
  letter-spacing: 0.1em;}
.back-tenji p{max-width: 500px;margin: auto;font-size: large;color: #fff;font-size: 20px;}
.tenji-p{max-width: 500px;margin: auto;}
.tenji-p p{text-align: left;font-size: large;color: #fff;margin-top: 30px;}
.tenji1-extra-p{color: #a4f2ff;}
.tenji2-extra-p{color: #c1ff71;}

/*画像*/
.top-title{width: 500px;margin: auto;}
.topimg{background-image: url(img/topimg-pc1.png);width: 100%;height: 100vh;object-fit: cover;margin: 0;padding-top: 10px;background-size: 100% 100%;position: relative;transition:transform 3s ease;}
img{ max-width: 100%;display: block; }
.gaikan{margin-bottom: 30px;position: relative;}
.gaikan img{
  max-width: 100%;
  height: auto;
  width: 700px;
  margin: auto;
  border-radius: 20px;
  box-shadow: 8px 8px 20px rgba(0,0,0,0.4);
  filter: brightness(1.05) contrast(0.95) saturate(1.05);
}
.tenji{display: flex;flex-direction: column;gap: 2rem;}
.container{padding-left: 8px;padding-right: 8px;}
.container img{border-radius: 15px;margin-bottom: 20px;box-shadow: 5px 5px 5px #8a8a8a;}
.container img:hover{transform: translateY(3px);}
.color-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* クリック邪魔しない */
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 9999;
}
.color-overlay.active {
  opacity: 1;
}
.back-concept{  position: relative;
  border-radius: 20px;
  background: linear-gradient(
    to bottom,
    rgba(255, 210, 160, 0.45), /* 夕焼け */
    rgba(255, 150, 200, 0.18)
  );
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.back-concept::before{
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at 50% 0%,
    rgba(255, 255, 255, 0.25), /* ←ここ追加 */
    rgba(255, 180, 120, 0.25),
    rgba(255, 180, 120, 0.1) 30%,
    transparent 60%
  );

  pointer-events: none;
}
.back-alltenji{
  max-width: 1100px;
  border: 5px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
}
.back-alltenji p{padding: 7px;}
.back-tenji{background-image:url(img/Texture-水色.png);background-size: cover;}
.back1 {
  position: relative;
  background-color: #1c79ca; /* 藍色 */
  overflow: hidden;
}
.back1::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/青海波.jpg");
  background-repeat: repeat;
  opacity: 0.08;
  pointer-events: none;
}
.back1>*{  position: relative;
  z-index: 1;}
.back2 {
  position: relative;
  background-color: #468148; /* 抹茶色 */
  overflow: hidden;
}
.back2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/麻の葉.png");
  background-repeat: repeat;
  opacity: 0.08;
  pointer-events: none;
}
.back2>*{  position: relative;
  z-index: 1;}
.tenji-map{border-radius: 20px;margin-bottom: 20px;}
.back1-1{background:#a4f2ff}
.back2-2{background:#c1ff71}
.back-detail{color: #fff;max-width: 800px;margin: auto;min-height: 100vh;}

/* 黒オーバーレイ */
.overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  transition:opacity 3s;
}
.overlay.show{
opacity:1;
}
/* トップ文字 */
.topMessage{
  color:white;
  font-size:3rem;
  letter-spacing:0.1em;
  text-align: center;
}
.topMessage-top{margin-bottom: 20px;}
.topMessage-bottom{margin-top: 20px;}
.overlay.show .topMessage{
opacity:1;
transform:translateY(0);
filter:blur(0);
}

/* JSで追加されるクラス */
.overlay.show{
  opacity:1;
}

/*メインメニュー*/
.main-menu{padding-inline-start: 0px;margin-top: 0px;}
.main-menu li{list-style-type:none;border-bottom: 1.5px solid #111;background-color: rgba(187, 232, 255, 0.5);}
.yajirusi-box{display: block;list-style: none;padding: 0px 10px;}
.yajirusi-box-inside{display: flex;align-items: center;gap: 5px;}
.yajirusi{width: 32px;color: #000;}
.yajirusi-img{height: 32.4px;}
.yajirusi-p{color: #000;font-weight: 500;font-size: large;}


.container-tenji{flex-direction: row;}
/*音楽*/
.audio-player {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin: 20px 0;
  background-color: #111;
  border-radius: 15px;
}
.audio-player p {
  margin: 0;
  font-size: 14px;
}
.audio-player button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #2c3e50;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.audio-player input[type="range"] {
  min-width: 150px;
}
/* 上部横スクロール */
.sidebar{
background-color:rgba(255, 255, 255, 0.4);
padding:15px;
display:flex;
gap:12px;
position: relative;
}
.thumb{
cursor:pointer;
transition:0.3s;
}
.thumb img{
width:100%;
border-radius:6px;
}
/* クリック後に適用される */
.sidebar.clicked .thumb{
opacity:0.4;
}
.sidebar.clicked .thumb.active{
opacity:1;
}
/* 右側メイン */
.main{
    flex:1;
    text-align:center;
    padding:5px;
    position: relative;
    overflow-y: visible;
}
.mainImage img{
    width:98%;
    border-radius:20px;
    box-shadow:8px 8px 8px rgb(36, 36, 36);
}
.title-icon{
width:50px;
height:50px;
object-fit:contain;
}
.title1{
    color:#a4f2ff;line-height: 1;
    margin-top: 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size: 50px;
    font-weight: 500;
}
.subtitle1{
    color: #a4f2ff;
    font-size: 18px;
}
.desc1{color: #a4f2ff;}
.title2{
    color:#c1ff71;line-height: 1;
    margin-top: 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size: 50px;
    font-weight: 500;
}
.subtitle2{
    color: #c1ff71;
    font-size: 18px;
}
.desc2{color: #c1ff71;}
.description{
    margin-top:8px;
    font-size:18px;
}
/* 追加情報 */
.extra{
    margin-top:40px;
}
.extraImg{
box-shadow:5px 5px 5px rgb(36, 36, 36);
}
/* 初期メッセージ */
.startMessage{
font-size:24px;
color:#ffffff;
margin-top:100px;
}
.extra img{
width:90%;
border-radius:10px;
margin-left: 5%;
margin-bottom:30px;
}
.extra p {
  display: none;
}
.main.open .extra p {
  display: block;
}
/* ======================
   メイン表示アニメーション
====================== */
.main .title1,
.main .title2,
.main .subtitle1,
.main .subtitle2,
.main .extra,
.main .mainImage,
.main .description{
  opacity:0;
  transform:translateY(20px);
}
/* アニメーション開始 */
.main.animate .title1,
.main.animate .title2{
  animation:fadeUp 0.9s ease forwards;
}
.main.animate .subtitle1,
.main.animate .subtitle2{
  animation:fadeUp 0.9s ease forwards;
  animation-delay:0.2s;
}
.main.animate .extra{
  animation:fadeUp 0.9s ease forwards;
  animation-delay:0.5s;
}
.main.animate .mainImage{
  animation:fadeUp 0.9s ease forwards;
  animation-delay:1.0s;
}
.main.animate .description{
  animation:fadeUp 0.9s ease forwards;
  animation-delay:1.3s;
}
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.tenji-back{
  display: none;
  margin: 15px;
  font-size: 20px;
  color: #000;
}
.tenji-back:hover{opacity: 0.7;}
.tenji-nav{
display:none;
justify-content:space-between;
margin-top:30px;
}


/*Q&A*/
.qa-section{
  position:relative;
  padding:80px 20px;
  overflow:hidden;
}
/* 流水紋風背景 */
.qa-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.05) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.04) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,0.03) 0%, transparent 50%);
  animation: flow 20s linear infinite;
  z-index: 0;
}
@keyframes flow{
  0%{transform:translateY(0);} 
  50%{transform:translateY(-20px);} 
  100%{transform:translateY(0);} 
}
.qa-container{
  position:relative;
  max-width:700px;
  margin:0 auto;
  z-index: 1;
}
.qa-item{
  margin-bottom:50px;
  opacity:0;
  transform:translateY(20px);
  transition:all 0.8s ease;
}
.qa-item.show{
  opacity:1;
  transform:translateY(0);
}
.qa-q{
  font-size:18px;
  letter-spacing:0.1em;
  cursor:pointer;
  position:relative;
  overflow: hidden;
  padding-left:20px;
  color: #fff;
  margin-bottom: 5px;
}
.qa-q::before{
  content:"Q";
  margin-right:8px;
  opacity:0.5;
  font-size:14px;
}
.qa-a{
  margin-top:10px;
  padding-left:20px;
  font-size:16px;
  line-height:2;
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition:all 0.6s ease;
  color: #fff;
  position: relative;
}
.qa-a.open{
  opacity:0.95;
  max-height:1000px;
}
.qa-a::before{
  content:"A";
  position:absolute;
  transform:translateX(-20px);
  opacity:0.4;
}
/* 水紋エフェクト */
.ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  background: radial-gradient(circle,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0.1) 40%,
    transparent 70%);
  animation:ripple-effect 1.2s ease-out; /* ←ゆっくりに */
  pointer-events:none;
}

@keyframes ripple-effect{
  to{
    transform:scale(5); /* ←広がりも大きく */
    opacity:0;
  }
}

/*詳細*/
.detail-intro p{
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 20px;
  padding: 7px;
}
/* detailsデザイン */
.detail-more{
  border-top: 1px solid #ccc;
  padding-top: 20px;
}
.detail-more summary{
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  list-style: none;
  position: relative;
}
/* デフォルトの三角消す */
.detail-more summary::-webkit-details-marker {
  display: none;
}
/* カスタム矢印 */
.detail-more summary::after{
  content: "▼";
  margin-left: 10px;
  font-size: 12px;
  transition: transform 0.3s;
}

.detail-more[open] summary::after{
  content: "▲";
}
.shake {
  display: inline-block;
  animation: gentleScale 1.8s infinite ease-in-out;
}
@keyframes gentleScale {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.shake:hover {
  animation-play-state: paused;
}
/* 中身 */
/* 初期状態 */
.detail-content {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
/* 表示時 */
.detail-content.show {
  opacity: 1;
  transform: translateY(0);
}
.detail-content h3{
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 10px;
}
.detail-content p{
  font-size: 15px;
  line-height: 1.9;
  padding: 7px;
}
.detail-img{
  margin: 20px 0;
  text-align: center;
}
.detail-img img{
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
/* まとめブロック */
.detail-summary{
  max-width: 800px;
  margin: 80px auto 40px;
  padding: 40px 20px;
  text-align: center;
  line-height: 2;
  font-size: 1.05rem;
  color: #f0f8ff;
}
/* まとめの段落 */
.detail-summary p{
  margin-bottom: 20px;
}
.logo-placeholder img {
  max-width: 80%; /* サイズ調整 */
  margin: 30px auto;
}
/* 最後の一行（キャッチ） */
.final-line{
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  margin: 60px 0 180px;
  color: #c0e0ff;;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5); /* 黒で軽く縁取り */
  font-weight: 500;
}

/*作成者について*/
.creator-info {
  text-align: center;
  padding: 60px 20px;
  color: #c0e0ff; /* 明るい水色 */
  text-shadow: 0 0 6px rgba(0,0,0,0.5); /* 背景に映える */
  font-family: "Kiwi Maru", sans-serif;
}
.creator-info a {
  color: #c0e0ff;
  text-decoration: none;
  margin: 0 10px;
  transition: 0.3s;
}
.creator-info a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(0,0,0,0.6);
}
.creator-name {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 20px;
}
.creator-name-large {
  font-size: 3rem;
  font-weight: bold;
}
.creator-profile {
  font-size: 1rem;
  font-style: italic;
  margin-bottom: 12px;
}
.creator-contact {
  margin-bottom: 8px;
}
/*タブ*/
.btn-yoko{display: grid;grid-template-columns: repeat(3,1fr);gap: 1rem 1rem;width: 90%;margin:1rem auto;}
.btn-yoko li{list-style: none;box-shadow: 0 2px 0 #777777;border: #000 1px solid;}
.btn-yoko li:hover{transform: translateY(2px);box-shadow: none;}
.btn-box{display: block;list-style: none;padding: 0px;}
.btn-box-inside{display: flex;align-items: center;gap: 10px;}
.btn-yajirusi{width: 32px;margin-top: 11px;color: #000;}
.btn-img{height: 60px;}
.btn-image{height: 100%;border: #000 0.5px solid;background-color: #fff;}
.btn-p{font-size: 16px;font-weight: 500;color: #000;margin-top: 11px;text-shadow: none;}

/* 理由セクション */
.reason-section{
  padding: 60px 15px;
  background: linear-gradient(to bottom, #87b7dc, #6aa2cc);
  color: #fff;
}
.reason-container{
  max-width: 100%;
  margin: 0 auto;
}
/* 各ブロック */
.reason-block{
  margin-bottom: 40px;
  padding: 20px;
  background: rgba(255,255,255,0.08);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  transition: 0.3s;
}
.reason-block h2{
  font-size: 18px;
  margin-bottom: 15px;
  letter-spacing: 1px;
}
.reason-block p{
  line-height: 1.8;
  margin-bottom: 10px;
  font-size: 14px;
}
.for-bussiness{text-align: end;}

/*シェア*/
.share-buttons {
  text-align: center;
  padding: 40px 20px;
}

.share-buttons p {
  margin-bottom: 20px;
  font-size: 18px;
}

.share-btn {
  display: inline-block;
  margin: 10px;
  padding: 12px 20px;
  border-radius: 30px;
  text-decoration: none;
  color: white;
  font-weight: bold;
}

/* X */
.share-btn.x {
  background: #000;
}

/* LINE */
.share-btn.line {
  background: #06C755;
}

/* Instagram風 */
.insta-btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 30px;
  text-decoration: none;
  color: white;
  font-weight: bold;
  background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
  transition: 0.3s;
}

/*pc版*/
@media(min-width:1000px){
    html{font-size: 15px;}
    .concept-title {
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }
  .concept-title::before,
  .concept-title::after {
    display: inline-block;
    width: 100px;
    margin: 0;}
    .concept-catch{margin-left: 100px;font-size: 40px;}
    .cta-text{font-size: 40px;}
    .tenji{font-size: 40px;display: flex;flex-direction: row;gap: 0;justify-content: space-around;}
    .sponly{display: none;}
    /*メインメニュー*/
    .main-menu{margin-top: 1rem;display: grid;grid-template-columns: repeat(5,1fr);gap: 1rem 1rem;}
    .main-menu li{list-style: none;border: 1.5px solid #000;}
    .main-menu li:hover{transform: scale(1.04);}
    .yajirusi-box{text-align: center;padding: 20px 10px;}
    .yajirusi-box-inside{display: grid;align-items: stretch;gap: 5px;}
    .yajirusi{display: none;}
    .yajirusi-img{height: 70px;margin: auto;}
    .yajirusi-p{font-size: 25px;}
    .container-tenji{display: flex;flex-direction: row;height: 100vh;height: 100dvh;}
    .main{height: auto;}
    .tenji-map{width: 90%;margin: 10px auto 20px;}
    .sidebar{
        scrollbar-width: none;       /* Firefox */
        -ms-overflow-style: none;    /* IE */
        cursor: grab;
        width: 20%;
        height: auto;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .sidebar:active{
        cursor: grabbing;
    }
    .sidebar::-webkit-scrollbar{
        display:none;                /* Chrome / Safari */
    }
    .sidebar img{
        user-select:none;
        -webkit-user-drag:none;
    }
    .sidebar-scroll-guide{display: none !important;}
    .main-flex{display: flex;}
    .flex-ex{width: 40%;}
    .flex-mn{width: 60%;}
    .mainImage img{margin-top: 30px;}
    .back-alltenji{margin: 20px auto;padding: 40px;
    }
    .detail-img img{max-width: 500px;margin: auto;}
    .reason-section{
    padding: 80px 20px;
    max-width: 800px;
    margin: 0 auto 100px;
  }
  .reason-container{
    max-width: 800px;
  }
  .reason-block{
    margin-bottom: 60px;
    padding: 30px;
    border-radius: 20px;
  }
  .reason-block:hover{
    transform: translateY(-5px);
    background: rgba(255,255,255,0.12);
  }
  .reason-block h2{
    font-size: 22px;
  }
  .reason-block p{
    font-size: 16px;
  }

}

/*タブレット・スマホ版*/
@media(max-width:1000px){
.topimg,
.about,
.back-alltenji,
.back-detail,
.creator-info {
  min-height: 50dvh; /* ここがポイント */
}
.pconly{display:none;}
.topimg{background-image: url(img/topimg-sp1.png);}
.topMessage{font-size: 2rem;text-align: left;}
.concept-catch{padding: 7px;font-size: 25px;}
.concept-p{padding: 7px;}
.margin-sp{margin: 20px auto;}
.container{
flex-direction:row;
}
/* stickyが動く構造 */
.container-tenji{
display:flex;
flex-direction:column;
height:auto;
}
/* サムネイル */
.thumb{
height:60px;
display:flex;
align-items:center;
flex:0 0 auto;
}
.thumb img{
height:54px;
width:90px;
}
/* メイン画像 */
.mainImage img{
width:95%;
}
.extra img{
width:90%;
}
.sidebar{
position:relative;
width:100%;
height:70px;
display:flex;
flex-direction:row;
overflow-x:auto;
overflow-y:hidden;
padding:8px;
gap:8px;
flex-wrap:nowrap;
align-items:center;
touch-action:pan-x;
-webkit-overflow-scrolling:touch;
}
/* =========================
   スクロールガイド
========================= */
.sidebar-scroll-guide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
color:white;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
z-index:10;
cursor:pointer;
pointer-events:auto;
}
.scroll-text{
font-size:large;
}
/* PC用スクロールガイド消す */
.scroll-guide{
display:none !important;
}
.main.open .tenji-back{display: block;}
.main.open .tenji-nav{
display:flex;
}
.tenji-nav button{
color:white;
border:none;
padding:4px;
font-size:16px;
cursor:pointer;
border-radius:6px;
}
.tenji-nav button:hover{
opacity:0.8;
}
/*展示1*/
.main-type1 .tenji-nav button{
background:#1e3a5f;
}
/* 展示2 */
.main-type2 .tenji-nav button{
background:#084f0a;
}
.qa-q{padding-left:7px ;}
.qa-section{padding: 80px 0;}
/*タブ*/
 .btn-yoko{display: block;list-style: none;padding: 0;margin: auto;}
  .btn-yoko li{border-bottom: 1.5px solid #111;padding: 5px 10px;}
  .btn-box{display: block;list-style: none;padding: 0px;}
  .btn-box-inside{display: flex;align-items: stretch;gap: 10px;}
}