h1,h2,h3 {
  text-align: center;
}

p {
  font-size: 1.25em;
}

p.abc {
  font-size: 1.0em;
}

body {
	font-family: "Zen Old Mincho", serif;
        background-color: #223344;
         color: #fffeee;
}

.zen-old-mincho-medium {
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
  }

.atama {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 1fr;
  gap: 0px;
}

img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.shiori {
  grid-column: 2 / 7;
  grid-row: 1 / 2;
  overflow: hidden;
}



.hako {
  display: grid;
  grid-template-areas:
   "art-a1 art-a1 art-a2 art-a3"
   "art-a1 art-a1 art-a4 art-a5"
   "art-b3 art-b2 art-b1 art-b1"
   "art-b4 art-b5 art-b1 art-b1";
  gap: 5px;
}

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 767px) { 
.hako {
  display: grid;
  grid-template-areas:
   "art-a1 art-a1"
   "art-a1 art-a1"
   "art-a2 art-a3"
   "art-a4 art-a5"
   "art-b1 art-b1"
   "art-b1 art-b1"
   "art-b3 art-b2"
   "art-b4 art-b5";
   gap: 3px;
 }
}

.art-a1 {
  grid-area: art-a1;
  overflow: hidden;
  position: relative;
  display: block;  /* またはinline block */
/*	mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.5));
	mask-size: cover; /* マスク画像のサイズ */
	mask-position: center;  *//* マスク画像の配置 */
}

.art-a1 img {
  transition: all 0.8s ease;
}

.art-a1 img:hover {
  transform: scale(1.1);
} 

.art-a1 span {
  position: absolute;
  top: 75%;
  left: 1%; 
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%; 
  opacity: 0;  /* 初期状態では透明 */
  transition: opacity 0.6s ease; /* ホバー時のアニメーション */
  color: #fff;
  font-size: 1.0rem;
  padding-left: 10px;
}

.art-a1:hover span {
  opacity: 1;  /* ホバー時に表示 */
}

.art-a2 {
  grid-area: art-a2;
  overflow: hidden;
  position: relative;
}

.art-a2 span {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100%;
  opacity: 0;  /* 初期状態では透明 */
  transition: opacity 0.6s ease; /* ホバー時のアニメーション */
  color: #fff;
  font-size: 1.0rem;
  padding-left: 10px
}

.art-a2:hover span {
  opacity: 1;  /* ホバー時に表示 */
}


.art-a3 {
  grid-area: art-a3;
  overflow: hidden;
}

.art-a4 {
  grid-area: art-a4;
  overflow: hidden;
}

.art-a5 {
  grid-area: art-a5;
  overflow: hidden;
}

.art-b1 {
  grid-area: art-b1;
  overflow: hidden;
  position: relative;
/*	mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.5));
	mask-size: cover; /* マスク画像のサイズ */
	mask-position: center; */ /* マスク画像の配置 */
  display: block;  /* またはinline block */
}

img {
  transition: all 0.8s ease;
}

img:hover {
  transform: scale(1.1);
}

.art-b1 span {
  position: absolute;
  bottom: 18%;
  left: 1%;
  
  background-color: rgba(0, 0, 0, 0.8);
  width: 96%;
  opacity: 0;  /* 初期状態では透明 */
  transition: opacity 0.6s ease; /* ホバー時のアニメーション */
  color: #fff;
  font-size: 1.0rem;
}

.art-b1:hover span {
  opacity: 1;  /* ホバー時に表示 */
}

/*
.art-b1 img:hover {
  transition: all 0.8s ease; 
  transform: scale(1.1);
}
*/
.art-b2 {
  grid-area: art-b2;
  overflow: hidden;
}

.art-b3 {
  grid-area: art-b3;
  overflow: hidden;
}

.art-b4 {
  grid-area: art-b4;
  overflow: hidden;
}

.art-b5 {
  grid-area: art-b5;
  overflow: hidden;
}


.iremono {
  display: grid;
  grid-template-areas:
   "art-c1 art-c1 art-c2"
   "art-c1 art-c1 art-c3"
   "art-d2 art-d1 art-d1"
   "art-d3 art-d1 art-d1";
  gap: 5px;
}

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 767px) { 
.iremono {
  display: grid;
  grid-template-areas:
   "art-c1 art-c1"
   "art-c2 art-c2"
   "art-c3 art-c3"

   "art-d1 art-d1"
   "art-d2 art-d2"
   "art-d3 art-d3";
   gap: 3px;
 }
}

.art-c1 {
  grid-area: art-c1;
  overflow: hidden;
  position: relative;
  display: block;  /* またはinline block */
}

.art-c1 img {
  transition: all 0.8s ease;
}
.art-c1 img:hover {
  transform: scale(1.1);
}

.art-c1 span {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: 6px ;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100%;
  opacity: 0;  /* 初期状態では透明 */
  transition: opacity 0.6s ease; /* ホバー時のアニメーション */
  color: #fff;
  font-size: 1.0rem;
}

.art-c1:hover span {
  opacity: 1;  /* ホバー時に表示 */
}


.art-c2 {
  grid-area: art-c2;
  overflow: hidden;
}

.art-c3 {
  grid-area: art-c3;
  overflow: hidden;
}

.art-d1 {
  grid-area: art-d1;
  overflow: hidden;
  position: relative;
  display: block;  /* またはinline block */
}

.art-d1 img {
  transition: all 0.8s ease;
}
.art-d1 img:hover {
  transform: scale(1.1);
}

.art-d1 span {
  position: absolute;
  bottom: 5px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  width: 96%;
  opacity: 0;  /* 初期状態では透明 */
  transition: opacity 0.6s ease; /* ホバー時のアニメーション */
  color: #fff;
  font-size: 1.0rem;
}

.art-d1:hover span {
  opacity: 1;  /* ホバー時に表示 */
}

.art-d2 {
  grid-area: art-d2;
  overflow: hidden;
}

.art-d3 {
  grid-area: art-d3;
  overflow: hidden;
}


.tamatebako {
  display: grid;
  grid-template-areas:
   "art-e3 art-e2 art-e1 art-e1 art-e1 art-e1 art-e1 art-e1 art-e1 art-e1 art-e1 art-e1 art-e1 art-e1 art-e1"
   "art-f1 art-f1 art-f1 art-f1 art-f1 art-f1 art-f1 art-f1 art-f1 art-f1 art-f1 art-f1 art-f1 art-f2 art-f3";
  gap: 5px;
}

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 767px) { 
.tamatebako {
  display: grid;
  grid-template-areas:
   "art-e3 art-e2"
   "art-e1 art-e1"
   "art-f2 art-f3"
   "art-f1 art-f1";
   gap: 3px;
 }
}

.art-e1 {
  grid-area: art-e1;
  overflow: hidden;
  position: relative;
  display: block;  /* またはinline block */
}

.art-e1 img {
  transition: all 0.8s ease;
}
.art-e1 img:hover {
  transform: scale(1.1);
}

.art-e1 span {
  position: absolute;
  bottom: 5px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  width: 96%;
  opacity: 0;  /* 初期状態では透明 */
  transition: opacity 0.6s ease; /* ホバー時のアニメーション */
  color: #fff;
  font-size: 1.0rem;
}

.art-e1:hover span {
  opacity: 1;  /* ホバー時に表示 */
}

.art-e2 {
  grid-area: art-e2;
  overflow: hidden;
}

.art-e3 {
  grid-area: art-e3;
  overflow: hidden;
}

.art-f1 {
  grid-area: art-f1;
  overflow: hidden;
  position: relative;
  display: block;  /* またはinline block */
}

.art-f1 img {
  transition: all 0.8s ease;
}
.art-f1 img:hover {
  transform: scale(1.1);
}

.art-f1 span {
  position: absolute;
  bottom: 5px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  width: 96%;
  opacity: 0;  /* 初期状態では透明 */
  transition: opacity 0.6s ease; /* ホバー時のアニメーション */
  color: #fff;
  font-size: 1.0rem;
}

.art-f1:hover span {
  opacity: 1;  /* ホバー時に表示 */
}

.art-f2 {
  grid-area: art-f2;
  overflow: hidden;
}

.art-f3 {
  grid-area: art-f3;
  overflow: hidden;
}
 
.reiko {
  display: grid;
  grid-template-areas:
    "art-g1 art-g2 art-g3 art-g4 art-g5" ;
   gap: 3px;
 }

.art-g1 {
  grid-area: art-g1;
  overflow: hidden;
}

.art-g2 {
  grid-area: art-g2;
  overflow: hidden;
}

.art-g3 {
  grid-area: art-g3;
  overflow: hidden;
}

.art-g4 {
  grid-area: art-g4;
  overflow: hidden;
}

.art-g5 {
  grid-area: art-g5;
  overflow: hidden;
}


/*

.bangai pc-only {
  display: grid;
  grid-template-areas: 
    "art-g1 art-g2 art-g3 art-g4 art-g5" ;
   gap:5px;
}

.art-g1 {
  grid-area: art-g1;
  overflow: hidden;
}

.art-g2 {
  grid-area: art-g2;
  overflow: hidden;
}

.art-g3 {
  grid-area: art-g3;
  overflow: hidden;
}

.art-g4 {
  grid-area: art-g4;
  overflow: hidden;
}

.art-g5 {
  grid-area: art-g5;
  overflow: hidden;
}
*/



/*-------------------------------------
@media screen and (max-width: 767px) { 
.bangai {
  display: grid;
  grid-template-areas:
   "art-g1 art-g2 art-g3" 
   "art-g4 art-g5 art-g6";
   column-gap:3px;
   row-gap: 2em;
 }
}

-------------------------------------*/


 /* 効果参照ここから */
/*
.art-a1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  overflow: hidden;
  position: relative;
  display: block;  
}

.art-a1 img {
  transition: all 0.8s ease;
}
.art-a1 img:hover {
  transform: scale(1.1);
} 

.art-a1 span {
  position: absolute;
  bottom: 5px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  width: 98%;
  opacity: 0;  
  transition: opacity 0.6s ease; 
  color: #fff;
  font-size: 1.0rem;
}

.art-a1:hover span {
  opacity: 1;  
}
*/

 /* 効果参照ここまで */


/*
.art-a1 .caption {
  font-size: 1.2lem;
  left: 30px;
  bottom: 15px;
  color: #fff;
}
.art-a1 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top:  200px;
  left: 0px;
  opacity: 0;  
  background-color: rgba(0,0,0,0.4);
  -webkit-transition:	all 0.2s ease;
  transition:		all 0.2s ease;
}

.art-a1:hover .musk {
  opacity: 1;  
}
*/