/* file name: style.css */
/* index.html用 */
@charset "UTF-8";

/* test用(すべての要素に境界線を入れる。謎の右側空白あぶり出し) */
/*
*{
    outline: 2px red solid;
}
*/
/* test用ここまで */
/*========= レイアウトのためのCSS ===============*/

html, body {
  margin: 0;
  padding: 0;
  /* 04260159 追加 */
  width: 100%;
  /* ここまで */
  height: 100%;
  overflow-x: hidden;/* 横スクロール出ないようにする */
}

#iframe {
  width: 100%;
  border: none;
  overflow: hidden;
}

iframe#content {
  display: block;
  width: 100%;
  /* 2504250930
  height: 100%;
  */
  min-height: 100vh;
  border: none;
  overflow: auto;
}

* {
  box-sizing: border-box;
}
/*
h1,h2{
  font-size:1.2rem;
}

h2,
*/
#container p,
small{
/*  margin:0 0 30px 0;*/ /* 上,右,下,左 */
}

small{
  display: block;
  text-align: center;
}
/*
#index-body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
*/
/*========= 左固定レイアウトのためのCSS ===============*/

/*左と右を囲う全体のエリア*/
#wrapper{
  position: relative;/*position stickyの基点にするため relativeをかける*/
  display: flex;/*左エリア、右エリア横並び指定*/
  flex-wrap: wrap;/*ボックスの折り返し可*/
  /* 04252259
  width: 100%;
  */
  /* 04252259 修正 */
  width: 100vw;
  box-sizing: border-box;
  /* ここまで */
  /*
  background-color:yellow;
  */
}

/*左エリア*/
#fixed-area{
  /*左固定記述*/
  position: -webkit-sticky;/*Safari用*/
  position: fixed;
  /*
  position: sticky;
  */
  top: 0;
  overflow: auto;
  /*
  z-index: 100;
  */
  /*横10%　縦を100vhにする*/
  /* 04252301
  width: 10%;
  */
  /* 04252301 修正 */
  width: 12vw;
  /* ここまで */
  height: 100vh;
  /*装飾のためのCSS*/
  display: flex;
  /*
  background-color:yellow;
  */
}
.grid-area {
  display: grid;
  height: 100vh;                /* grid全体の高さを設定 */
  grid-template-rows: 50px auto;  /* gridの割合が2:8になるよう2行用意 */
/*  grid-template-rows: 8% 92%;*/  /* gridの割合が2:8になるよう2行用意 */
  grid-template-columns: 10vw;  /* 横幅いっぱいに1列用意 */
  align-self: stretch; /* 上から下までぴったり伸ばす */
}
.top-area p{
  margin: 0;
  padding: 0;
}

.top-area {
  display: flex;
  justify-content: center; /* 水平方向に中央揃え */
  align-items: center;     /* 垂直方向にも中央揃え（お好みで） */
  height: 50px;
  margin: 0;
  padding: 0;
  line-height: 1; /* 行の高さもぴったりに */
  align-self:center;
  grid-row: 1;
  grid-column: 1;
  background-color: white;
  /*
  background-color:yellow;
  */
  text-align: center;
  color:#0033ff;
}

  a:link { color: #00CC99; }
  a:visited { color: #66CCFF; }
  a:hover { color: #ff0000; }
  a:active { color: #FFCC00; }

.bottom-area {
  /* 250425追加 */
  width: 100%;
  box-sizing: border-box;
  /* 250425追加ここまで */
  align-self:start;
  grid-row: 2;
  grid-column: 1;
  background-color: white;
  overflow-y: auto; /* これを追加。縦方向にコンテンツがあふれた場合スクロール可能として処理する */
}

/* === PC環境用 === */
/*右エリア*/
#container{
  /*右側90%にする*/
  /* 04252304
  width: 90%;
  */
  /* 04260016 修正 */
  margin-left: 12vw;          /* ←固定領域分を空ける */
  width: calc(100vw - 12vw);
  /* ここまで */
  /* 04250050
  width: calc(90% - 4px);
  */
  min-height: 100vh;
  overflow-y: auto;
  /*
  overflow: hidden;
  */
  /* 04252329 追加 */
  max-width: 100%;
  overflow-x: hidden;
  /* ここまで */
}
#container > iframe{
  display: block;
  width: 100%;
  min-height: 100%;
  /*
  height: 100vh;
  */
  max-width: 100%;
  overflow-x: hidden;
  border: none;
  margin: 0;
  padding: 0;
}

.bottom-area details {
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
}

.bottom-area summary {
  cursor: pointer;
}

.bottom-area details summary {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 5px 0;
  cursor: pointer;
  font-weight: bold;
  color: #663399;
  box-shadow: 0 2px 5px rgba(255, 182, 193, 0.2);
  transition: all 0.3s ease;
}
.bottom-area details summary:hover {
  background-color: #ffe0f0;
  color: #d63384;
}

/* === スマホ環境用 === */
@media screen and (max-width: 768px) {
  /* 04260158 追加 */
  html, body {
    width: 100%;
    overflow-x: hidden;
  }
  /* ここまで */

  /* 04251349 追加 */
  .menu {
    width: 100%;
  }
  /* ここまで */

  /* 04260224 追加 */
    summary {
    cursor: pointer;
    font-size: 1.2em;
    text-align: center;
  }

  details[open] summary::after {
    content: "▲";
    float: right;
  }
  
  details summary::after {
    content: "▼";
    float: right;
  }
  /* ここまで */

  details[open] summary {
    white-space: nowrap;
  }

  details[open] ul {
    padding-left: 1em;
  }

  a {
    font-size:1.2rem;
  }

  #wrapper {
    /* 04260203 追加 */
    display: block;
    /* 04260130 追加・修正 */
    width: 100%;
    max-width: 100%;
    /*
    width: 100vw;
    */
    overflow-x: hidden;
    /* ここまで */
    /* 04260207
    flex-direction: column;
    */
  }

  iframe {
    max-width: 100%;
  }
  /* ここまで */

  #fixed-area {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    /* 04251347 追加 */
    min-height: auto;
    /* ここまで */
    /* 04251346
    min-height: 240px;
    */
    /* 04251150
    width: 220px;
    */
    /* 04251347
    height: 100vh;
    */
    /*
    width: 100vw;
    */
    /* 2504251316
    height: 240px;
    */
  }

  #container {
    /* 04260214 追加 */
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    /* ここまで */
    /* 04260214
    width: 100vw;
    */
    /* 04251302
    height: calc(100vh - 0px);
    overflow: hidden;
    flex-direction: column;
    display: flex;
    */
    /* 04251302 */
    overflow: visible;
    display: block;
    /* ここまで */
  }

  #container > iframe {
    flex-grow: 1;
    border: none;
    width: 100%;
    height: 100%;
  }

  .top-area, .bottom-area {
    text-align: center;
  } 

  .grid-area {
    /* 04260208 追加 */
    display: flex;
    flex-direction: column;
    height: auto;
    /* ここまで */
    /* 04260208
    display: block;
    */
    /* 2504251343 追加 */
    width: 100%;
    /* ここまで */
  }

  /* 04260211 追加 */
  .top-area, .bottom-area {
    width: 100%;
    text-align: center;
  }
  /* ここまで */
  .top-area {
    background-color: pink; /* わかりやすくする例 */
    text-align: center;
  }

  .bottom-area {
    overflow-y: visible;
  }

  iframe#content {
    /* 04260218 追加 */
    width: 100%;
    height: 100vh;
    border: none;
    margin: 0;
    padding: 0;
    /* ここまで */
    /* 04260218
    height: auto;
    */
    /* ここまで */
    /* 04251311
    width: 100vw;
    */
    /* 04251154
    width: calc(100vw - 220px);
    */
    /* 04251313
    height: 100dvh;
    */
    display: block;
    overflow: auto;
  }
}

/* 🌸 ハンバーガーメニューの見た目と動き */

.menu-toggle {
  background-color: #ffcce5;
  color: #444;
  padding: 12px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  border-bottom: 2px solid #eee;
  text-align: center;
  user-select: none;
}

/* --- 左サイドメニュー共通装飾 --- */
nav, .menu {
  background: rgba(255, 240, 250, 0.8);  /* ふんわりピンク背景 */
  border-radius: 15px;
  padding: 15px 10px;
  margin: 10px;
  box-shadow: 0 0 10px rgba(255, 182, 193, 0.3);  /* やさしい影 */
  font-family: "Hiragino Maru Gothic ProN", "Rounded M+ 1c", sans-serif;
}
nav ul,
.menu ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
nav li,
.menu li {
  margin-bottom: 10px;
}
nav li a,
.menu li a {
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #663399;
  background: rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
  position: relative;
}

/* ホバー時の変化 */
nav li a:hover,
.menu li a:hover {
  background: #ffddf4;
  color: #d63384;
  transform: scale(1.05);
  box-shadow: 0 0 5px rgba(255, 182, 193, 0.4);
}
/* アイコン風に */
nav li::before,
.menu li::before {
  content: "🌸 ";
  margin-right: 4px;
}
/* メニュー項目の「選択中」を強調 */
nav li a.active {
  background: #ffbbdd;
  color: #aa2266;
  font-weight: bold;
}

.menu {
  display: none;
  max-width: 100%;
  width: 100%;
  background-color: #fff;
  padding: 10px;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  margin: 8px 0;
}

.menu li a {
  color: #00aaff;
  text-decoration: none;
  font-weight: bold;
}

/* 🌟 JavaScriptで開くときの表示用クラス */
.menu.show {
  display: block;
}

/* 🎀 パソコン表示ではメニュー常時表示 */
@media screen and (min-width: 768px) {
  .menu {
    display: block !important;
  }

  .menu-toggle {
    display: none;
  }
}