@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&family=Noto+Serif+JP:wght@200..900&display=swap');
body{
  background-color: #ede9e8; /* 全体背景色 */ 
  color: #4d5254;/* 黒に近い紫 */
  font-family: 'Libre Bodoni','Noto Serif Jp','ヒラギノ明朝 ProN','ＭＳ Ｐ明朝', serif;/* 日本語　明朝体 */
}
/*========= ライン ===============*/
.solid{
  border-top:2px dotted rgba(179,176,175,.5);
  margin: 0.65em;
}
.link{
text-decoration:underline;
font-weight:bold;
}
.link:hover {
  text-decoration:underline;
  color:#008fe8;/* 文字色 */
}
/*================== font指定　ゴシック体 ==================*/
ul.topnav,.switch,.switch2,h1,h2,.box-d {
  font-family: 'Comfortaa','Kosugi Maru','メイリオ','ＭＳ Ｐゴシック', sans-serif;
}
/*========= グローバルナビ ===============*/
ul.topnav li a.active {
  background: rgba( 134, 122, 230, 0.4 );/* 青紫 */
}
/*================== ページ毎のボタン ==================*/
.switch,.switch2 {
  --_switch-bg-clr: #867ae6;/* 青紫 */
  --_slider-bg-clr: #bfbfe3;/* 薄紫 */
}
/*================== タイトル ==================*/
.event{
  color: #bfbfe3;/* 薄紫 */
}
 /*ダンジョン名選択の下線*/
h2::after {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(to right, rgb(77, 82, 84), transparent);
}
/*================== サブイベント選択 ==================*/
/*ダンジョン選択*/
.box-d{
  border-bottom: solid 3px #bfbfe3;/* 薄紫 線 */
  margin-bottom: 1.1em;
}
/*================== 新聞風テクスチャボックス ==================*/
.texture{
  filter: url(../img1/back7.png) repeat;
  background:#ede9e8 url(../img1/back7.png) repeat;
  border-left:2px dotted rgba(179,176,175,.5);
  border-right:2px dotted rgba(179,176,175,.5);
  border-top:2px dotted rgba(179,176,175,.5);
  padding: 1.1em;
}
/*================== ダンジョンnoとダンジョン名と攻略レベル ==================*/
.no{
  position: relative;
  text-align: right;
  font-size: clamp(0.688rem, 0.646rem + 0.21vw, 0.813rem);/* 0.688rem (11px) → 0.813rem (13px) 320→1280 */
  border-bottom:1px solid #4d5254;/* 黒に近い紫 */
  padding:0 0.65em;
}
/*ダンジョン名*/
h3 {
  font-size: clamp(1.5rem, 1.292rem + 1.04vw, 2.125rem); /* 1.5rem (24px) → 2.125rem (34px) 320→1280 */
  margin-top: 1.1em;
  padding: 0.25em 0em 0em;
  text-align: center;
  font-weight:700;
}
/*大見出し*/
h4 { 
  font-size: clamp(0.938rem, 0.792rem + 0.73vw, 1.375rem);/* 0.938rem (15px) → 1.625rem (22px) 320→1280 */
  line-height:150%;
}
/*中見出し*/
h5 { 
  font-size: clamp(1.063rem, 0.938rem + 0.63vw, 1.438rem);/* 1.063rem (17px) → 1.438rem (23px) 320→1280*/
}
/*小見出し*/
h6 { 
  font-size: clamp(1rem, 0.554rem + 0.71vw, 1.125rem);/* 1rem (16px) → 1.438rem (18px) 1000→1280*/
}
h5, h6 {
  font-weight:700;
  padding: 0.4em 0;
}
/*===========================================*/
/*                 gridレイアウト               */
/*     レスポンシブ ブレイクポイント　960 720 580     */
/*===========================================*/
/*グリッドレイアウト外枠*/
.unit {
 position: relative;
 display: grid;
 max-height: 100%;
 font-size: clamp(0.813rem, 0.143rem + 1.07vw, 1rem);/* 0.813rem (13px) → 1rem (16px) 1000→1280 */
 padding-bottom: 0.65em;
 border-bottom: solid 1px #4d5254;/* 黒に近い紫 */
 margin-bottom: 1.25em;
 line-break: strict;line-height: 160%;
}
/*================== バトルイベントのgridレイアウト1 ==================*/
.layout1{
 grid-template-columns: 83% 17% ;/* エリアが3なので2 */
 grid-template-rows: 3.6em 5.2em repeat(3, auto) ;/* 6なので5 */
 width: 100%; /* margin padding分を引く */
 height: 100%;
 }
 /*バトルイベントのgridレイアウト*/
.layout2{
 grid-template-columns: 25.5% 32% 25.5% 17% ;/* エリアが5なので4 */
 grid-template-rows: 3.6em 86px 1fr 1.8fr;/* 5なので4 */
 width: 100%; /* margin padding分を引く */
 height: 100%;
 }
/*================== 記事一字下げ　画像グレイ→カラー枠線　画像下キャプション ==================*/
.div3 p,.div4 p,.div5 p,.div6 p,.div7 p,.div8 p,.div9 p{
  text-indent: 1em;/* 一字下げ */
  text-align: left;
}
.unit img {
  filter: grayscale(100%);
  border: solid 1px #4d5254;/* 黒に近い紫*/
  opacity: 0.8;
}
.unit img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
.div4 img,.div6 img{
  max-height: calc(100% - 2em);
}
.caption{
  font-size: clamp( 0.625rem, 0.583rem + 0.21vw, 0.75rem);/* 0.625rem (10px) → 0.75rem (12px) 320→1280 */
  text-align: center;
  line-height: 100%;
}
/*================== .div1　推奨レベル ==================*/
.div1{
  grid-area: 1 / 1 / 2 / 3; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
  border-top: solid 2px #4d5254;/* 黒に近い紫 太い二重線*/
  border-bottom: solid 2px #4d5254;/* 黒に近い紫 太い二重線*/
  padding: 3px 0;
}
ul.note{
  position: relative;
  display: flex;
  justify-content: space-around;  /*均等に間隔をあける・両端にも間隔をあける*/
  align-items: center;     /*中央揃え*/
  border-top: solid 1px #4d5254;/* 黒に近い紫 太い二重線*/
  border-bottom: solid 1px #4d5254;/* 黒に近い紫 太い二重線*/
  height: 100%;
}
ul.note li{
  font-size: clamp(0.75rem, 0.688rem + 0.31vw, 0.938rem);/* 0.75rem (12px) → 0.938rem(15px) 320→1280 */
  
}
/*================== .div2　見出し大文字 ==================*/
.div2 { 
  grid-area: 2 / 1 / 3 / 2;
  position: relative;
  text-align: left;
  padding: 0.65em 0;/* パディング（上右下左） */ 
}
/* 最初の文字 */
.big {
  position: relative;
  line-height: 120%;
  float: left;
  font-size: clamp(2.625rem, 2.167rem + 2.29vw, 4rem);/* 2.625rem (42px) → 1.625rem (64px) 320→1280 */
  font-weight: 700;
  margin-right: 0.1em;
}
.big:hover::first-letter {
  color: #867ae6;/* 青紫 */
}
/*================== .div3　右側縦長画像 ==================*/
.div3 {
  grid-area: 2 / 2 / 5 / 3;
  display: inline-block;
  position: relative;
  border-left: solid 1px #4d5254;/* 黒に近い紫 */
  padding-left: 1em;
  margin:1em 0 1em 1em; /* margin（上右下左） */
  overflow: hidden; /* コンテンツがはみ出た場合、隠す */
}
.boxr {
  width: 100%;
  height: calc(100% - 3em);
  color: rgba(150, 148, 153, 0.8);/* 文字色（透明度） */
}
.div3 img{
  object-position: right top;
  object-fit: cover;
  height:100%;
}
 /* --- 文字BOX(子要素) ------------------ */
.over {
  position: absolute; /* 親要素からの絶対位置 */
  box-sizing: border-box;
  white-space: nowrap; /* 折返しなし */
  display: inline-block; /* 文字囲みのBOXにする */
  top: 30%; /* 親要素からの上位置 */
  left: 89%; /* 親要素からの左位置 */
  transform: translate(-89%, -30%); /* 文字BOXの位置ずらし */
  font-size: clamp(1.625rem, 0.286rem + 2.14vw, 2rem);/* 1.625rem (26px) → 2rem(32px) 1000→1280 */
  font-weight: bold; /* 太字 */
  line-height: 1em; /* 1行の高さ */
  writing-mode: vertical-rl;/* 縦書き */
}
.boxr:hover {
  color:#fff;/* 文字色（透明度） */
}
/*================== .div4 ボス戦について　記事1 2 画像　==================*/
.div4 {
  grid-area: 3 / 1 / 4 / 2;
  position: relative;
  display: grid;
  grid-template-rows: subgrid;  /* サブグリッドを設定 */
  grid-template-columns: repeat(2, 1fr);/* エリアが3なので2 31% 31% 38% */
  grid-template-rows: repeat(2, auto);/* 3なので2 */
  padding-top: 0.5em;
  border-bottom: solid 1px #4d5254;/* 黒に近い紫 */
}
.sub41 {
  grid-area: 1 / 1 / 2 / 2;
  position: relative;
  padding-right:0.5em;/* パディング（上右下左） */
}
.sub42 {
  grid-area: 2 / 1 / 3 / 2;
  position: relative;
  padding-right:0.5em;/* パディング（上右下左） */
}
.sub43{
  grid-area: 1 / 2 / 3 / 3;
  position: relative;
  padding-left: 0.5em;/* パディング（上右下左） */
}
/*========== .div5 商売熱心な妖精 h5 gif 画像と記事 恐怖の赤い部屋 h5と画像と記事 ============*/
.div5 {
  grid-area: 4 / 1 / 5 / 2;
  position: relative;
  display: grid;
  grid-template-rows: subgrid;  /* サブグリッドを設定 */
  grid-template-columns: 40% 60%;/* エリアが3なので2 */
  grid-template-rows: auto 5em;/* 3なので2 */
  margin: 1em 0;/*（上右下左） */
}
/*==============　.sub51にサブグリッド指定 商売熱心な妖精　===================*/
.sub51 {
  grid-area: 1 / 1 / 2 / 2;
  position: relative;
  display: grid;
  grid-template-rows: subgrid;  /* サブグリッドを設定 */
  grid-template-columns: 4em auto;/* エリアが3なので2 */
  grid-template-rows: 1fr 0.5fr;/* 3なので2 */
  padding-right:1em;/* パディング（上右下左） */
  border-right: solid 1px #4d5254;/* 黒に近い紫 */
}
/*==============　.sub51t 商売熱心な妖精h5　===================*/
.sub51t{
  grid-area: 1 / 1 / 2 / 2;
  position: relative;
}
.sub51t h5{
 color: #ede9e8;
 writing-mode: vertical-rl;/* 縦書き */
 background-color: #4d5254;/* 黒に近い紫 */
 padding:0.8em 1em 0.8em 0.7em ;/* パディング（上右下左） */
}
.sub51t h5:hover{
  background-color: #867ae6;/* 青紫 */
}
/*==============　.sub51g 商売熱心な妖精gif　===================*/
.sub51g{
  grid-area: 2 / 1 / 3 / 2;
   position: relative;
 }
.sub51g img {
  position: absolute;
  top: clamp(-60px, calc(-60px + ((1280px - 100vw) * (60 / 319))), 0px);
  bottom: 0;
  left: 0;
  right: 0;
  max-width: clamp(100%, calc(100% + ((100vw - 960px) * (20 / 320))), 120%);
  max-height: clamp(100%, calc(100% + ((100vw - 960px) * (20 / 320))), 120%);
  margin: auto;
}

/* 🔹 動作の仕組み:
- clamp(min, preferred, max)
- preferred: calc(...) → ビューポートに応じて変化する値

- 100vw で 現在の画面幅 を取得
- (1280px - 100vw) で 幅の変化量 を求める(最大幅ー100vw)
- (60 / 212) は 変化の割合（topの変化幅60pxをwidthの変化幅212pxで割る）
- calc(-60px + 変化量) で top を調整し、最小値 -60 最大値 -0px に制限
幅1280-1068px top-60px-0px */

/*==============　.sub51i 商売熱心な妖精 画像と記事　===================*/
.sub51i {
  grid-area: 1 / 2 / 2 / 3;
  position: relative;
  margin-left: 1em;
  margin-bottom: 0.5em;
}
.sub51p {
  grid-area: 2 / 2 / 3 / 3;
  position: relative;
  margin-left: 1em;
}
/*==============　.sub52にサブグリッド指定　恐怖の赤い部屋 h5と画像と記事　===================*/
.sub52 {
  grid-area: 1 / 2 / 2 / 3;
  position: relative;
  display: grid;
  grid-template-rows: subgrid;  /* サブグリッドを設定 */
  grid-template-columns: 1fr 2fr;/* エリアが3なので2 */
  grid-template-rows: 5.4em auto;/* 3なので2 */
  padding-left: 1em;/* パディング（上右下左） */
}
.sub52t{
  grid-area: 1 / 1 / 2 / 3;
  position: relative;
 }
.sub52t h5{
 color: #ede9e8;
 background-color: #4d5254;/* 黒に近い紫 */
 border: solid 1px #4d5254;/* 黒に近い紫*/
 padding:1em ;/* パディング（上右下左） */
 overflow: hidden;
 position: relative;
}
.sub52t h5:before{
  background-color: #fff; /* 切り替わる色 */
  content: '';
  display: block;
  opacity: 0.6; /* 不透明度 */
  transform: rotate(-30deg);
  position: absolute;
  bottom: -30px;
  right: -100px;
  width: 200px;
  height: 200px;
}
.sub52t h5:hover {
 text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
 letter-spacing: 0.125em;
 animation: textflicker 0.01s infinite;
 animation-direction: alternate;
}
.sub52t h5:hover::before {
  background-color: #bfbfe3;/* 薄紫 線 */
  opacity: 1; /* 不透明度 */
}
@keyframes textflicker {
  from {
    text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;
  }
  to {
    text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
  }
}
.sub52i {
  grid-area: 2 / 1 / 3 / 2;
  position: relative;
}
.sub52i img {
  padding: 0.5em;
}
.sub52p {
  grid-area: 2 / 2 / 3 / 3;
  position: relative;
  padding-left:0.5em;/* パディング（上右下左） */
}
/*==============　.sub53 円形画像h5と記事　===================*/
.sub53 {
  grid-area: 2 / 1 / 3 / 3;
  position: relative;
  border: double 3px #4d5254;/* 黒に近い紫*/
  margin-top: 1em;
  display: flex;
  align-items: center;/*中央揃え*/
}
.sub53 h5 {
  display: inline-block;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  text-align:center;
  line-height: 2em;
}
.sub53 h5 img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  border: none;
}
.sub53 h5 img:hover {
animation: fuwa 2s ease-in infinite;
}
@keyframes fuwa {
 40% {
    transform: rotate(-30deg);
  }
 60% {
    transform: rotate(15deg);
  }
  80% {
    transform: rotate(-10deg);
  }
}
.sub53p,.sub61p,.sub65 {
  font-size: clamp(0.75rem, 0.08rem + 1.07vw, 0.938rem);/* 0.75rem (12px) → 0.938rem (15px) 1000→1280 */
}
/*============= .div6 .sub61現金さえあれば　.sub62.御堂が仲間に .sub63.sub64モンスター .sub65小話 .sub66gif  =============*/
.div6 {
  grid-area: 5 / 1 / 6 / 3;
  position: relative;
  border-top: solid 1px #4d5254;/* 黒に近い紫 太い二重線*/
  display: grid;
  grid-template-rows: subgrid;  /* サブグリッドを設定 */
  grid-template-columns: 17% 2fr 1fr 1fr;/* エリアが4なので3 */
  grid-template-rows: repeat(3, auto) 80px;/* 5なので4 */
  padding-top: 1em;/*（上右下左） */
}
/*==============　.sub61にサブグリッド指定 現金さえあれば　===================*/
.sub61 {
  grid-area: 1/ 1/ 5/ 2;
  position: relative;
  display: grid;
  grid-template-rows: subgrid;  /* サブグリッドを設定 */
  grid-template-columns:1fr;/* エリアが2なので1 */
  grid-template-rows: 4em repeat(2, auto);/* 3なので2 */
  border-right: solid 1px #4d5254;/* 黒に近い紫 */
  padding-right: 1.3em;
}
.sub61t{
grid-area: 1/ 1/ 2/ 2;
position: relative;
}
.sub61t h6{
position: relative;
padding: 0.5em;
background: #ccc7cc;
margin-bottom: 1em;
}
.sub61t h6:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #ccc7cc;
  width: 0;
  height: 0;
}
.sub61t h6:hover {
   background: #bfbfe3;/* 薄紫 */
}
.sub61t h6:hover::after {
  border-top-color: #bfbfe3; /* h6のhover時の背景色に合わせる */
}
.sub61i {
  grid-area: 2/ 1/ 3/ 2;
  margin-right: 0.5em;
}
.sub61p{
  grid-area: 3/ 1/ 4/ 2;
}
/*================ .sub62.御堂が仲間に =================*/
.sub62 {
  grid-area: 1/ 2/ 5/ 3;
  border-right: solid 1px #4d5254;/* 黒に近い紫 */
  padding:0 1.3em;
}
.sub62 h5{ 
display: inline-block;
position: relative;
text-indent: 2em;/* 一字下げ */
border-bottom: double 3px #4d5254;/* 黒に近い紫 */
margin-bottom: 0.5em;
}
.sub62 h5 img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right:calc(0 - 1.5em);
  max-width:100%;
  max-height:100%;
  margin: auto;
  border: none;
}

.sub62 img {
  margin: 0.65em 0.65em 0 0;/* パディング（上右下左） */
}
/*==============　.sub63.sub64にサブグリッド指定 モンスター　===================*/
.sub63,.sub64 {
  display: grid;
  grid-template-rows: subgrid;  /* サブグリッドを設定 */
  grid-template-columns: auto;/* エリアが2なので1 */
  grid-template-rows: 1fr 1fr;/* 3なので2 */
  border-right: solid 1px #4d5254;/* 黒に近い紫 */
  padding: 0 0.65em;
  margin-right: 0.65em;
}
.sub63 {
  grid-area: 1/ 3/ 3/ 4;
}
.sub64 {
  grid-area: 3/ 3/ 5/ 4;
}
/*.sub63.sub64のサブグリッド*/
.sub63i,.sub64i{
grid-area: 1/ 1/ 2/ 2;
}
.sub63p,.sub64p{ 
grid-area: 2/ 1/ 3/ 2;
}
.sub63i img,.sub64i img{
  max-height: 4em;
}
.sub63p{
border-bottom:2px dotted rgba(179,176,175,.5);
}
/*======================= .sub65小話 =========================*/
 /* 手書き風 */
.sub65{
  grid-area: 1/ 4/ 4/ 5; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
  margin: 0.65em 0.35em 0.65em 0.65em; /* 外側の余白（上右下左） */
  padding: 0.5em 1em;                   /* 内側余白 */
  border-radius: 30px 60px / 60px 30px;  /* 角をランダムに丸めて手書き風に */
  border: solid 8px #ccc7cc;/* 太めの枠線（8px、色: #ccc7be） */
}
.sub65:hover {
  border: solid 8px #bfbfe3;/* 薄紫 太めの枠線（8px、色: #ccc7be） */
}
/*======================= .sub66gif =========================*/
.sub66 {
  grid-area: 4/ 4/ 5/ 5;
  position: relative;
}
/* 画像を中央に配置 */
.sub66 img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
/*==============================================*/
/*                  レスポンシブ用                  */
/*==============================================*/
@media screen and (min-width: 961px) {
 .gyou1::after{ /* spanで改行 */
 content:"\A";
 white-space:pre;
} 
}
@media screen and (max-width: 960px) {
h6 { 
 white-space: nowrap; /* 1000px未満では改行なし */
}
/*===========================================*/
/*                 gridレイアウト               */
/*        レスポンシブ ブレイクポイント　960         */
/*===========================================*/
.layout1{
 grid-template-rows: 3.6em 4.5em repeat(3, auto) ;/* 6なので5 */
 }
/*gridレイアウト*/
.unit {
 font-size: clamp(0.813rem, 0.25rem + 1.25vw, 1rem);/* 0.813rem (13px) → 1rem (16px) 720→960 */
}
/*================== .div3 右側縦長画像 位置調整==================*/
.div3 img{
  object-position: center top;
}
/* ------ 文字BOX(子要素) ------ */
.over {
  top: 10%;/* 親要素からの上位置 */
  left: 50%;/* 親要素からの左位置 */
  transform : translate(-50%, -10%);/* 文字BOXの位置ずらし */
}
/*================== .div4 ボス戦について　記事1 2 画像　==================*/
.div4 {
  grid-template-columns: 1fr 1fr;/* エリアが3なので2 */
  grid-template-rows: repeat(2, auto);/* 4なので3 */
}
.sub41 {
  grid-area: 1 / 1 / 2 / 3;/*（縦横縦横） */
  padding-right:0;
}
.sub42 {
  grid-area: 2 / 1 / 3 / 2;
  padding-right:0;
  padding-bottom: 1em;
}
.sub43{
  grid-area: 2 / 2 / 3 / 3;
   padding-left: 0;
}
/*========== .div5 商売熱心な妖精 h5 gif 画像と記事 恐怖の赤い部屋 h5と画像と記事 ============*/
.div5 {
  grid-template-columns: 82% 18%;/* エリアが3なので2 */
  grid-template-rows: 1fr 1.4fr;/* 3なので2 */
}
/*==============　.sub51にサブグリッド指定 商売熱心な妖精　===================*/
.sub51 {
  grid-area: 1 / 1 / 2 / 3;
  grid-template-columns: 3em repeat(2, auto);/* エリアが3なので2 */
  grid-template-rows: 5em 1fr;/* 3なので2 */
  padding-right:0;/* パディング（上右下左） */
  border-right:none;
}
/*==============　.sub51t 商売熱心な妖精h5　===================*/
.sub51t{
  grid-area: 1 / 3 / 2 / 4;
  margin-left: 0.5em;
}
.sub51t h5{
 color: #ede9e8;
 writing-mode: horizontal-tb;/* 横書き */
 background-color: #4d5254;/* 黒に近い紫 */
 padding:1em 1em 1em 0.7em ;/* パディング（上右下左） */
}
/*==============　.sub51g 商売熱心な妖精gif　===================*/
.sub51g{
  grid-area: 1 / 1 / 3 / 2;
 }
.sub51g img {
  bottom: calc(50% - 1em);
}
/*==============　.sub51i 商売熱心な妖精 画像と記事　===================*/
.sub51i {
  grid-area: 1 / 2 / 3 / 3;
}
.sub51p {
  grid-area: 2 / 3 / 3 / 4;
  position: relative;
  margin-left: 0.5em;
}
/*==============　.sub52にサブグリッド指定　恐怖の赤い部屋 h5と画像と記事　===================*/
.sub52 {
  grid-area: 2 / 1 / 3 / 2;
  padding-left: 0;/* パディング（上右下左） */
  margin-right: 1em;
}
/*==============　.sub53 円形画像h5と記事　===================*/
.sub53 {
  grid-area: 2 / 2 / 3 / 3;
  display: block;
  margin-top: 0;
  padding: 0 0.5em;
}
.sub53 h5 {
  display: inline-block;
  width: 2em;
  height: 3em;
  border-radius: 50%;
  text-align:center;
  line-height: 2em;
}
.sub53 h5 img{
  bottom: 80%;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  border: none;
}
.sub53p,.sub61p,.sub65 {
  font-size: clamp(0.75rem, 0.662rem + 0.44vw, 0.938rem);/* 0.75rem (12px) → 0.938rem (15px) 320→1000 */
}
/*============= .div6サブグリッド　.sub62画像付き記事3　.sub63.sub64画像付き記事4 .sub65小話 .sub66アニメ =============*/
.div6 {
  grid-template-columns: 1.2fr 1fr ;/* エリアが3なので2 */
  grid-template-rows: repeat(2, 1fr) 80px repeat(2, auto);/* 5なので4 */
 }
 /*==============　.sub61にサブグリッド指定　===================*/
.sub61 {
  grid-area: 4/ 1/ 5/ 3; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
  grid-template-columns:4em 1fr 4fr;/* エリアが2なので1 */
  grid-template-rows: auto;/* 3なので2 */
  border-top: solid 1px #4d5254;/* 黒に近い紫 */
  border-bottom: solid 1px #4d5254;/* 黒に近い紫 */
  border-right: none;/* 黒に近い紫 */
  margin: 1em 0;
  padding: 1em 0 0;
}
.sub61t{
   grid-area: 1/ 1/ 2/ 2;
}
.sub61t h6{
writing-mode: vertical-rl;/* 縦書き */
padding: 1em 0.7em 1em 0.5em;/* パディング（上右下左） */
margin-bottom: 1em;
font-size: clamp(0.875rem, 0.816rem + 0.29vw, 1rem);/* 1rem (16px) → 1.438rem (18px) 320→1000*/
}
.sub61t h6:after {
  top: 30px;
  left: 100%;
  border: 15px solid transparent;
  border-left: 15px solid #ccc7cc;
}
.sub61t h6:hover::after {
  border-top-color: transparent; /* h6のhover時の背景色に合わせる */
  border-left-color: #bfbfe3; /* h6のhover時の背景色に合わせる */
}
.sub61i {
  grid-area: 1/ 2/ 2/ 3; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
 margin-right: 1em;
}
.sub61p{
  grid-area: 1/ 3/ 2/ 4; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
}
/*=================================*/
.sub62 {
  grid-area: 1/ 1/ 4/ 2; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
  margin-right: 0.65em;
}
/*==============　.sub63.sub64にサブグリッド指定　===================*/
.sub63,.sub64 {
  grid-template-columns: 1fr 1.5fr;/* エリアが3なので2 */
  grid-template-rows: 1fr;/* 2なので1 */
  border-right: none;/* 黒に近い紫 */
  padding: 0 ;
  margin-right: 0;
  border-bottom:2px dotted rgba(179,176,175,.5);
}
.sub63 {
  grid-area: 1/ 2/ 2/ 3; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
}
.sub64 {
  grid-area: 2/ 2/ 3/ 3; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
}
/*.sub63.sub64のサブグリッド*/
.sub63i,.sub64i{
grid-area: 1/ 1/ 2/ 2; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
}
.sub63p,.sub64p{
grid-area: 1/ 2/ 2/ 3; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
padding: 2em 0 0 0.5em;/* パディング（上右下左） */
}
.sub63i img,.sub64i img{
  max-height: 5em;
}
.sub63p{
border-bottom:none;
}
/* 手書き風 */
.sub65{
  grid-area: 5/ 1/ 6/ 3; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
  margin: 0.65em; /* 外側の余白（上下と中央配置） */
}
.sub66 {
  grid-area: 3/ 2/ 4/ 3; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
}
}
@media screen and (max-width: 895px) {
.gyou2::after{ /* spanで改行 */
 content:"\A";
 white-space:pre;
} 
}
@media screen and (max-width: 780px) {
.texture{
  margin: 0 0.65em;/* inc-t.cssでmarginを消してるので必要 */
}
}
@media screen and (max-width: 732px) {
.layout1{
 grid-template-rows: 3.6em 6.4em repeat(3, auto) 100px;/* 6なので5 */
 }
 /* 最初の文字 */
.big {
  line-height: 160%;
}
}
/*===========================================*/
/*                 gridレイアウト               */
/*          レスポンシブ ブレイクポイント 720        */
/*===========================================*/
@media screen and (max-width: 720px) {
/*グリッドレイアウト外枠*/
.unit {
 font-size: clamp(0.813rem, 0.295rem + 1.43vw, 0.938rem);/* 0.813rem (13px) → 0.938rem (15px) 580→720 */
 padding-bottom: 1em;
}
 /*================== バトルイベントのgridレイアウト1 ==================*/
.layout1{
 grid-template-columns: auto;/* エリアが2なので1 */
 grid-template-rows: 3.6em 4.5em repeat(3, auto) 100px;/* 6なので5 */
 }
 .div1{
  grid-area: 1 / 1 / 2 / 2;
}
 /* 最初の文字 */
.big {
  line-height: 120%;
}
  /*================== .div3右側縦長画像2を最下に ==================*/
.div3 {
  grid-area: 6 / 1 / 7 / 2;
  display: inline-block;
  position: relative;
  border-left:none;/* 黒に近い紫 */
  border: solid 1px #4d5254;/* 黒に近い紫*/
  padding-left: 0; /* パディング（上右下左） */
  margin:0 auto;
  width: 100%;
}
.boxr {
  display: inline-block;
  position: absolute; /* 子要素を絶対配置にする */
  transform-origin: 100% 0; /* 左上を回転軸にする */
  transform: rotate(-90deg);/* 90度回転 */
  translate: -100px;
  max-width: 100px; /* 領域の幅 */
  height:  100vw; /* 領域の高さ */
  top: 0; /* 上端の座標 */
  left: 0; /* 左端の座標 */
}
.div3 h5{
  display: none;
}
.div3 img{
  width: 100%; /* 領域にフィット */
  height: 100%; /* 領域にフィット */
  border:none;/* 黒に近い紫 */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
 /* ------ 文字BOX(子要素) ------ */
.over {
  top: 40%; /* 親要素からの上位置 */
  left: clamp(-170%, calc(-170% + ((720px - 100vw) * (114 / 400))), -56%); 
  /* 🔹 動作の仕組み:
- 100vw で 現在の画面幅 を取得
- (720px - 100vw) で 幅の変化量 を求める(最大幅ー100vw)
- (114 / 400) は 変化の割合（topの変化幅114%をwidthの変化幅400pxで割る）
- calc(-170% + 変化量) で top を調整し、最小値 -170% 最大値 -56% に制限
親要素からの左位置（-90度回転）720-320px -170%-56% */
  transform: translate(190%, -40%);/* 文字BOXの位置ずらし */
  font-size:clamp(0.813rem, 0.262rem + 2.75vw, 1.5rem);/* 0.813rem (13px) → 1.5rem(24px) 320→720 */
  writing-mode: horizontal-tb;
  transform: rotate(90deg);/* 90度回転 */
}
.boxr:hover {
 text-shadow: 2px 3px 3px rgba(150, 148, 153, 0.8);
}
/*========== .div5 商売熱心な妖精 h5 gif 画像と記事 恐怖の赤い部屋 h5と画像と記事 ============*/
.div5 {
  grid-template-rows: auto 1.3fr;
}
/*============= .div6サブグリッド　.sub65小話とdiv3の隙間 =============*/
.div6 {
  grid-area: 5 / 1 / 6 / 2;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 604px) {
.gyou3::after{ /* spanで改行 */
 content:"\A";
 white-space:pre;
}
.layout1{
 grid-template-rows: 4.6em 4.5em repeat(3, auto) 100px;/* 6なので5 */
 }
}
/*===========================================*/
/*                 gridレイアウト               */
/*         レスポンシブ ブレイクポイント　580        */
/*===========================================*/
@media screen and (max-width: 580px) {
.gyou2::after { 
 white-space: nowrap; /* 1000px未満では改行なし */
}
/*================== グリッドレイアウト外枠 ==================*/
/*gridレイアウト*/
.unit {
 font-size: clamp(0.813rem, 0.659rem + 0.77vw, 0.938rem);/* 0.813rem (13px) → 0.938rem (15px) 320→580 */
}
.div4 img{
  max-height: 100%;
}
/*================== .div4 記事1記事2画像　sub41 .sub42 .sub43 ==================*/
.div4 {
  grid-template-columns: 1fr;/* エリアが3なので2 */
  grid-template-rows: repeat(3, auto);/* 4なので3 */
    padding-bottom: 1em;
}
.sub41 {
  grid-area: 1 / 1 / 2 / 2;
  padding-right:0;/* パディング（上右下左） */
}
.sub42 {
  grid-area: 2 / 1 / 3 / 2;
  padding-right:0;/* パディング（上右下左） */
  padding-bottom: 1em;
}
.sub43{
  grid-area: 3 / 1 / 4 / 2;
   padding-left: 0;/* パディング（上右下左） */
}
/*========== .div5 商売熱心な妖精 h5 gif 画像と記事 恐怖の赤い部屋 h5と画像と記事 ============*/
.div5 {
  grid-template-columns: 100%;/* エリアが3なので2 */
  grid-template-rows: 1fr 0.75fr 6em;/* 3なので2 */
}
/*==============　.sub51にサブグリッド指定 商売熱心な妖精　===================*/
.sub51 {
  grid-area: 1 / 1 / 2 / 2;
  grid-template-columns: 4em auto;/* エリアが3なので2 */
  grid-template-rows: 0.5fr 0.5fr 0.25fr;/* 3なので2 */
 
}
/*==============　.sub51t 商売熱心な妖精h5　===================*/
.sub51t{
  grid-area: 1 / 1 / 2 / 2;
  margin-left: 0;
}
.sub51t h5{
 writing-mode: vertical-rl;/* 縦書き */
}
/*==============　.sub51g 商売熱心な妖精gif　===================*/
.sub51g{
  grid-area: 2 / 1 / 3 / 2;
 }
.sub51g img {
  top: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 90%;
  max-height: 90%;
}
/*==============　.sub51i 商売熱心な妖精 画像と記事　===================*/
.sub51i {
  grid-area: 1 / 2 / 3 / 3;
  margin-left: 1em;
  margin-bottom: 0.5em;
}
.sub51p {
  grid-area: 3 / 2 / 4 / 3;
  margin-left: 1em;
}
/*==============　.sub52にサブグリッド指定　恐怖の赤い部屋 h5と画像と記事　===================*/
.sub52 {
  grid-area: 2 / 1 / 3 / 2;
  grid-template-columns: 1fr 2fr;/* エリアが3なので2 */
  grid-template-rows: 4.8em auto;/* 3なので2 */
  padding-left: 0;/* パディング（上右下左） */
  margin-right: 0;
}
.sub52t{
  grid-area: 1 / 1 / 2 / 3;
 }
.sub52i {
  grid-area: 2 / 1 / 3 / 2;
}
.sub52p {
  grid-area: 2 / 2 / 3 / 3;
 }
 .sub52p {
  font-size: clamp(0.75rem, 0.177rem + 2.1vw, 0.938rem);/* 0.75rem (12px) → 0.938rem (15px) 320→1000 */
}
/*==============　.sub53 円形画像h5と記事　===================*/
.sub53 {
  grid-area: 3 / 1 / 4 / 2;
  display: flex;
  align-items: center;/*中央揃え*/
  margin-top: 1em;
}
.sub53 h5 {
  width: clamp(96px, calc(96px + ((580px - 100vw) * (96 / 260))), 192px);
  height: 4em;
}
/* 🔹 動作の仕組み:
- clamp(min, preferred, max)
- preferred: calc(...) → ビューポートに応じて変化する値
- 100vw で 現在の画面幅 を取得
- (580px - 100vw) で 幅の変化量 を求める(最大幅ー100vw)
- (96 / 260) は 変化の割合（topの変化幅96pxをwidthの変化幅260pxで割る）
- calc(96px + 変化量) で top を調整し、最小値 96px 最大値 192px に制限
幅580-320px width96pxから192px　6emから12em */
.sub53 h5 img{
  bottom: 0;
  right: 100%;
}
/*============= .div6サブグリッド　.sub62画像付き記事3　.sub63.sub64画像付き記事4 .sub65小話 .sub66アニメ =============*/
.div6 {
  grid-template-columns: 1fr ;/* エリアが3なので2 */
  grid-template-rows: auto repeat(2, 1fr) 80px repeat(2, auto);/* 7なので6 */
 }
/*.div6のサブグリッド*/
.sub62 {
  grid-area: 1/ 1/ 2/ 2; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
  border-right: none;/* 黒に近い紫 */
  border-bottom: solid 1px #4d5254;/* 黒に近い紫 */
  margin-right: 0;
  padding: 0 0 1em;
}
.sub62 img {
  margin:  0.65em 0 0 0;/* パディング（上右下左） */
}
/*==============　.sub63.sub64にサブグリッド指定　===================*/
.sub63,.sub64 {
  padding: 0.5em 0 ;/* パディング（上右下左） */
}
.sub63 {
  grid-area: 2/ 1/ 3/ 2; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
}
.sub64 {
  grid-area: 3/ 1/ 4/ 2; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
}
.sub66 {
  grid-area: 4/ 1/ 5/ 2; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
}
.sub61 {
  grid-area: 5/ 1/ 6/ 2; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
  grid-template-columns:1fr 1fr;/* エリアが2なので1 */
  grid-template-rows: 4em auto;/* 3なので2 */
}
.sub61t{
grid-area: 1/ 1/ 2/ 3;
}
.sub61t h6{
  writing-mode: horizontal-tb;/* 横書き */
  padding: 0.5em;
}
.sub61t h6:after {
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #ccc7cc;
}
.sub61t h6:hover::after {
  border-top-color: #bfbfe3; /* h6のhover時の背景色に合わせる */
  border-left-color: transparent; /* h6のhover時の背景色に合わせる */
}
.sub61i {
  grid-area: 2/ 1/ 3/ 2;
}
.sub61p{
  grid-area: 2/ 2/ 3/ 3;
}
.sub61i img {
 max-height: 100%;
}
/* 手書き風 */
.sub65{
  grid-area: 6/ 1/ 7/ 2; /*縦起点　横起点　縦終点３ならブロック２　横終点　*/
  margin: 0.65em 0; /* 外側の余白（上下と中央配置） */
}
}
@media screen and (max-width: 574px) {
 /*================== バトルイベントのgridレイアウト1 ==================*/
.layout1{
 grid-template-rows: 4.6em 5.6em repeat(3, auto) 100px;/* 6なので5 */
 }
 /* 最初の文字 */
.big {
  line-height: 160%;
}
}
/*===========================================*/
/*                 gridレイアウト               */
/*         レスポンシブ ブレイクポイント　527        */
/*                   div5                  */
/*===========================================*/
@media screen and (max-width: 527px) {
/*========== .div5 商売熱心な妖精 h5 gif 画像と記事 恐怖の赤い部屋 h5と画像と記事 ============*/
.div5 {
  grid-template-rows: auto 1fr 0.22fr;/* 3なので2 */
}
/*==============　.sub51にサブグリッド指定 商売熱心な妖精　===================*/
.sub51 {
  grid-area: 1 / 1 / 2 / 2;
  grid-template-columns: auto 4em;/* エリアが3なので2 */
  grid-template-rows: 5em 6em auto ;/* 3なので2 */
 }
/*==============　.sub51t 商売熱心な妖精h5　===================*/
.sub51t{
  grid-area: 1 / 1 / 2 / 3;
  margin-bottom: 0.5em;
}
.sub51t h5{
 writing-mode: horizontal-tb;/* 横書き */
}
/*==============　.sub51g 商売熱心な妖精gif　===================*/
.sub51g{
  grid-area: 3 / 2 / 4 / 3;
 }
.sub51g img {
  top: 0;
  bottom: 20%;
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
}
/*==============　.sub51i 商売熱心な妖精 画像と記事　===================*/
.sub51i {
  grid-area: 3 / 1 / 4 / 2;
  margin-left: 0;
  margin-right: 0.5em;
  padding-bottom: 1em;
}
.sub51p {
  grid-area: 2 / 1 / 3 / 3;
  margin-left: 0;
}
/*==============　.sub52にサブグリッド指定　恐怖の赤い部屋 h5と画像と記事　===================*/
.sub52 {
  grid-area: 2 / 1 / 3 / 2;
  grid-template-columns: 4.1em auto;/* エリアが3なので2 */
  grid-template-rows: auto auto;/* 3なので2 */
  padding-left: 0;/* パディング（上右下左） */
  margin-right: 0;
  border-top: solid 1px #4d5254;/* 黒に近い紫*/
  padding-top: 1em;
}
.sub52t{
  grid-area: 1 / 1 / 2 / 2;
  writing-mode: vertical-rl;/* 縦書き */
  margin-bottom: 1em;
}
.sub52t h5{
 padding: 1em 1.2em 1em 0.8em;/* パディング（上右下左） */
}
.sub52t h5:before{
  transform: rotate(-40deg);
  right: -120px;
  height: 100px;
}
.sub52i {
  grid-area: 1 / 2 / 2 / 3;
}
.sub52p {
  grid-area: 2 / 1 / 3 / 3;
 }
 .sub52p {
  font-size: clamp(0.75rem, 0.177rem + 2.1vw, 0.938rem);/* 0.75rem (12px) → 0.938rem (15px) 320→1000 */
}
/*==============　.sub53 円形画像h5と記事　===================*/
.sub53 {
  grid-area: 3 / 1 / 4 / 2;
  display: flex;
  align-items: center;/*中央揃え*/
  padding: 0.5em;
  margin-top: 1em;
}
.sub53 h5 img{
  bottom: 0;
  right: 100%;
}
}
@media screen and (max-width: 437px) {
.sub61t{
grid-area: 1/ 1/ 2/ 2;
margin-right: 1em;
}
.sub61p{
  grid-area: 1/ 2/ 3/ 3;
}
}
@media screen and (max-width: 375px) {
 /*================== バトルイベントのgridレイアウト1 ==================*/
.layout1{
 grid-template-rows: 4.6em 7.5em repeat(3, auto) 100px;/* 6なので5 */
 }
 /* 最初の文字 */
.big {
  line-height: 200%;
}
}
@media screen and (max-width: 370px) {
.sub51 {
  grid-template-rows: 5em 7em auto ;/* 3なので2 */
 }
 .sub53 h5 {
  width: 12em;
}
}