.book-container {
    position: relative;
    width: 100%;
    height: 700px; /* 高さは画面いっぱい */
    background-color: #F3F6FB;
}
.book-container-at {
  display: inline-block;
  position: absolute;
  background-color: #ccc; /* 背景グレー */
  color: #000;
  padding: 10px 15px;
  border-radius: 8px; /* 角丸 */
  font-size: 14px;
  line-height: 1.4;
    top: -9px;
    right: -543px;
  z-index: 2000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* 影 */

  /* 上下ゆらゆら + 表示非表示 */
  animation:
             fadeInOut 10s ease-in-out infinite;
}

@keyframes fadeInOut {
  0%, 30% {
    opacity: 1;   /* 最初の3秒くらい表示 */
  }
  40%, 80% {
    opacity: 0;   /* 消える時間を長めに（約4〜5秒） */
  }
  90%, 100% {
    opacity: 1;   /* また出てくる */
  }
}
/* 左の三角 */
.book-container-at::before {
  content: "";
  position: absolute;
  top: 50%; /* 縦中央 */
    left: -12px;
  transform: translateY(-50%);
    border-width: 8px 14px 8px 0; /* 上 右 下 左 */
  border-style: solid;
  border-color: transparent #ccc transparent transparent;
  /* 上右下左の順に色。右側だけ背景色 */
}

.book-base {
     filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.3));
    width: 863px;

    position: absolute;
    top: 105px;           /* 上からの位置 */
    left: 50%;           /* 左右中央 */
    transform: translateX(-50%);
    z-index: 1;          /* 背景として最背面 */
}
#flipbook a{
  pointer-events: none;
}
  
#flipbook .empty {
  width: 288px; /* 見開きの左半分と同じ幅 */
  height: 100%;
}
/* 最初のページだけ右に20pxずらす例 */

.flip_page1{
  position: absolute;
  left:0;
  top:0;
    width:366px; /* 見開きの左半分と同じ幅 */
    height: 100%;
}


#flipbook div img {
    width: 100%;
    height: auto;
    display: block;
}

.flipbox{
    width: 733px;
  position: absolute;
  top: 118px;           /* 上から5pxずらす（本ベースの上から60px + 5px） */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
      /* 中央寄せ */
}

.top-1{
width: 102px;
position: absolute;
top:0;
left:0;
}
.top-2{
    transform: rotate(10deg);
    transform-origin: center center;
    width: 288px;
    position: absolute;
    top: 153px;
    right: -206px;
}
.top-3{
    transform: rotate(-20deg);
    transform-origin: center center;
    width: 47px;
    position: absolute;
    bottom: -44px;
    left: 18px;
}

.cont-base-sec04{
  margin-top: 70px;
  width: 100%;
  background-color: var(--brand-blue);
  padding: 60px 0;
  display: flex;
  gap:40px;
      color: white;
        justify-content: center; /* 横方向の中央寄せ */
  align-items: start;     /* 縦方向の中央寄せ */
}

.date-cat {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* 日付とバッジの間隔 */
}

  .news-cat {
    line-height: 0.9em;
  }
.news-cat a{

  display: inline-block;
padding: 2px 6px;
    line-height: 1em;
    color: white;
    font-size: 11px;
    background-color: var(--brand-blue);
}
.cont-base-sec04-1{
  
  width: 230px;
}
.cont-base-sec04 .base-c{
  margin-left: 0px;
}
.cont-base-sec04-2{
  max-width: 666px;
  background-color: white;
  border-radius: 20px;
  padding: 70px;
  color: black;
  font-size: 1.7rem;
  width: 100%;
      height: 470px;
  }
  

  
  .cont-base-sec04-2 span{
color: var(--brand-blue);
    }
    .cont-base-sec04-2 li{
      padding-top: 1em;
      padding-bottom: 1em;
    border-top: 1px solid var(--brand-blue);
    }
        .cont-base-sec04-2 li:last-child{
            border-bottom: 1px solid var(--brand-blue);
        }
.cont-base-sec05{
    margin-top: 144px;
    margin-left: auto;
padding: 40px;
background-color: white;
border: 3px solid var(--brand-blue);
width: 693px;
height: 435px;
}
  .cont-base-sec05-box{
    position: relative;
    width: 1095px;
    margin: 0 auto;
  }
.cont-base-sec05-box .base-c{
  margin-left: 0px;
    width: 230px;
    }
.cont-base-sec05-box .base-w li:nth-child(2){
color: #999999;
    }
    .cont-base-sec05-2{
      font-size: 1.7rem;
      margin: 40px 0 74px;
    }
.cont-base-sec05-und{
  width: 693px;
  height: 435px;
      top: 38px;
  z-index: -1;
  position: absolute;
  background-color: var(--brand-blue);
}
.cont-base-sec05-und img{
  left: 125px;
  top:135px;
  position: absolute;
  width: 150px;
}
.sec06-w-box2 span{
    color: var(--brand-blue);
    font-weight: bold;
}
.sec06-w1{
  margin-bottom: 1em;
  color: var(--brand-blue);
  font-size: 2.1rem;
  font-weight: bold;
}
.sec06-box{
  line-height: 1.8em;
  gap:56px;
    font-size: 1.6rem;
display: flex;
}
.swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0; /* top, right, bottom, left: 0 */
  background-color: #d3d3d4;
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none; /* クリック等をスルー */
}
.swiper-slide {
  position: relative; /* ::before を中で相対配置するため */
}

.swiper-slide{

}

.top-swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  width: 100%;
  height: 100%;
  position: relative;
}

.swiper-slide img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.swiper-button-next,
.swiper-button-prev {
  display: none !important;
}

/* ボタンやページネーションの調整 */
.swiper-button-next,
.swiper-button-prev {
  color: #fff;
}

.swiper-pagination-bullet-active {
  background: #fff;
}
.top-swiper{
  height: 700px;
  position: relative;
  background-color: gray;
}
.cont-area2{
  position: relative;
  padding: 120px 0;
  background-color: var(--brand-blue);
}
.top-w{
  text-align: left;
  margin-left: 50px;
  color: white;
  font-size: 2.1rem;
  line-height: 2.4em;
}
.cont-area2-2{
      line-height: 1;
  position: absolute;
  bottom:-4px;
  letter-spacing: 8px;
  right: 50px;
  font-weight: bold;
  font-size: 9.5rem;
  color: #c0c9db;
}
.cont-area3{
  box-sizing: border-box;
  overflow: hidden;

    height: 5101px;
  position: relative;
}
.base06.cont-base{
    width: 570px;
    height: 800px;
}
.cont-base{
position: absolute;
  align-items: flex-start; /* 中身を上に寄せる */
  background-color: var(--brand-blue);
  width: 870px;
  border-radius: 50px;
  padding: 70px;
  height: 426px;
  display: flex;
  color: white;
}
.cont-base-sec06-2 iframe {
        margin: 393px 0;
  width: 100%;
  height: 480px;
  border: 0;
}

.base01{

    top:96px;
     right: -180px;
}
.base02{

  padding: 70px 94px 104px;
    top:1231px;
    left: -46px;
}
.base06{
  z-index: -1;
  padding: 55px 94px 104px;
    top:4040px;
    left: -46px;
}

.base03{
      top: 1930px;
     right: -180px;
}
.cont-base-sec06-3{
  position: absolute;
    width: 674px;

    box-sizing: border-box;
        z-index: 100;
  background-color: #e8f3fa;
    padding: 40px;
  }
.cont-sec01 {
  position: relative;
  z-index: 100;
  width: 1100px;

  margin: 310px auto 0;
  background-color: white;
  border: 3px solid var(--brand-blue);
  padding: 30px 58px; /* お好みで内側余白 */
  box-sizing: border-box;

  
}
.cont-sec01 .top.row {
    border-bottom: 3px solid var(--brand-blue);
  }
.cont-sec01 .row {
  display: flex;
}
.cont-sec01 .row > * {
  flex: 1;           /* 子要素を均等に伸ばす */
  box-sizing: border-box; /* paddingやborderを含めて計算 */
}
.cont-sec-und{
  display: flex;
}
.cont-sec01 .top,.top2 {
  justify-content: space-between; /* または flex-start */
}

.cont-sec01 .top .item {
  flex: 1; /* 3等分 */
  /* もしくは幅指定でもOK */
  max-width: calc((1100px - 20px)/3); /* 3列で隙間を引いた幅 */
  background-color: #e0f7fa;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}
.base-a{
      margin-top: 20px;
  max-width: 230px;
}
.base-a2{
      margin-top: 24px;
  max-width: 230px;
}
.cont-base-sec03{
z-index: 50;
  position: absolute;
  left: 95px;
  padding: 50px;
  display: flex;
  gap:50px;

   width: fit-content; /* 内容に合わせて幅を自動調整 */
background-color: white;
border: 2px solid var(--brand-blue);

}
.cont-base-sec03-2{
  z-index: 20;
    padding: 50px;
right:95px;
  background-color: white;
        top: 70px;

  position: absolute;
   width: fit-content; /* 内容に合わせて幅を自動調整 */

border: 2px solid var(--brand-blue);
}
.cont-base-sec03-wrap{
  width: 950px;
    margin: 260px auto 0;
    position: relative;
height: 500px;
}

.cont-base-sec03-2-shadow {
content: "";
    position: absolute;
    top: 30px;
    bottom: 31px;
    right: 173px;
    width: 589px;
    height: 327px;
    background-color: #d9d9d9;

}
.cont-base-sec02{
  position: relative;
  padding: 50px;
  display: flex;
  gap:50px;
    margin: 300px auto 0;
   width: fit-content; /* 内容に合わせて幅を自動調整 */
background-color: white;
border: 2px solid var(--brand-blue);
}
/* 右下にコピー */
.cont-base-sec02::after {
    content: ""; /* 疑似要素を出す */
    position: absolute;
    bottom: -5px; /* 元要素の右下に少しずらす */
    right: -5px;
    width: 100%; /* 元の幅と同じ */
    height: 100%; /* 元の高さと同じ */
    background-color: white;
    border: 2px solid var(--brand-blue);
    z-index: -1; /* 元の下に置く */
    transform: translate(10px, 10px); /* 少しずらして重ねる場合 */
}

.cont-sec02-1{
  border: 3px solid var(--brand-blue);
  background-color: #E2E7F2;
  overflow: hidden;
  position: relative;
  height: 300px;
  width: 300px;
}
.cont-sec02-1 img{
  position: absolute;
  width: 238px;
  left:20px;
  top:20px;
}
.cont-sec02-2{
  font-size: 1.7rem;
  line-height: 2em;
    width: 267px;
}
.cont-sec03-2{
  letter-spacing: 2px;
  height: auto;
  font-size: 1.7rem;
  line-height: 2em;
    width: 257px;
}
.cont-sec03-3 img{
width: 332px;
}
.con-sec01 .base-a{
      margin-top: 30px;
}
.con-sec03 .base-a{
      margin-top: 41px;
}
.con-sec03.cont-sec-1 {
    padding-top: 10px;
  }
.cont-sec-in1 {
  position: relative; /* 疑似要素の基準に */
  width: fit-content;
}
.con-sec01 .cont-sec-in1::before{
  margin-top: -9px;
}
.con-sec02 .cont-sec-in1::before{
  margin-top: -16px;
}
.con-sec02 img{
    margin-top: -26px;
}
.con-sec03 img{
  width: 244px;
    margin-top: -11px;
}
.con-sec03 .cont-sec-in1::before{
  margin-top: -1px;
}
.cont-sec-in1::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  background:  var(--brand-blue2); /* 円の色 */
  border-radius: 50%; /* 円形 */
  top: 50%;  /* 好みで調整 */
  left: 50%; /* 好みで調整 */
  transform: translate(-50%, -50%);
  z-index: -1; /* 画像の後ろに配置 */
}
.con-sec04-2 .cont-sec-in1{
  width: 180px;
}
.con-sec04 .cont-sec-w{
  margin-bottom: 48px;
}
.con-sec04 .base-a{
      margin-top: 40px;
}
.con-sec04-2 .cont-sec-w{
  margin-bottom: 18px;
}
.con-sec05 .base-a{
      margin-top: 46px;
}

.con-sec03 .cont-sec-in1{
  width: 177px;
}
.con-sec05 .cont-sec-in1{
  width: 123px;
}
.top2 .cont-sec-in1::before {
  width: 132px;
  height: 132px;
}
.cont-sec-1 {
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.bottom .cont-sec-1 {
    padding-top: 20px;
}
.cont-sec01 .bottom {
  justify-content: space-between;
}
.con-sec01,.con-sec02,.con-sec04,.con-sec04-2{
  border-right: 3px solid var(--brand-blue);
}

.cont-sec01 .bottom .item {
  flex: 1;
  max-width: calc((1100px - 10px)/2); /* 2列で隙間を引いた幅 */
  background-color: #b2ebf2;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}


.base-c{
  margin-top: 30px;
  margin-left: 50px;
}
.base-w li:first-child{
  letter-spacing: 3px;
  font-size: 4.5rem;
  font-weight: bold;
}
.base-w li:nth-child(2){
    letter-spacing: 3px;
  font-size: 1.8rem;
    font-weight: bold;
}
.cont-sec-in1{
width: 164px;
}
.con-sec02 .cont-sec-in1{
width: 200px;
}
.con-sec01{
      padding-bottom: 40px;
margin-left: 13px
}
.con-sec03,.con-sec05{
margin-right: 13px
}
.con-sec03 .cont-sec-in1{
width: 270px;
}
.con-sec04{
      padding-bottom: 20px;
margin-left: 13px
}
.cont-sec-w span {
    padding: 0 4px;
    display: inline-block;
    position: relative;
}


.cont-sec-w span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background-color: #cd8383;
      transition: width 0.5s ease;
      transition-delay: calc(var(--index) * 0.2s);
}

.cont-sec-w span.active::after {
    width: 100%;
}

.con-sec03 .cont-sec-w span{
  width: fit-content;
  text-align: center;
    padding: 0 3px;
    display: block;
}
.con-sec03 .cont-sec-w span:nth-child(1){
  width: 128px;
  margin: 0 auto;
}
.cont-sec-w{
      margin-bottom: 40px;
      line-height: 1.2em;
  font-size: 3.5rem;
font-family: "Noto Serif", serif;
font-weight: bold;
}
@media screen and (max-width: 768px) {
  .flipbox {
    width: 270px;
    position: absolute;
    top: 111px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.con-sec03 .cont-sec-w span,
.con-sec04 .cont-sec-w span,
.con-sec04-2 .cont-sec-w span,
.con-sec05 .cont-sec-w span{
          line-height: 1.4em;
    display: inline-block;
    font-size: 2rem;
}
.con-sec05 .cont-sec-in1 {
    width: 91px;
}
.con-sec04 .cont-sec-in1{
    width: 126px;
}
.top2 .cont-sec-in1::before {
    width: 90px;
    height: 90px;
}
.flip_page1 {
    width: 134px;
  
}
.book-base {
    width: 324px;}

.top-1 {
    width: 102px;
    position: absolute;
    top: -196px;
    left: -37px;
}
.top-2 {
    transform: none;
    width: 207px;
    position: absolute;
    top: 180px;
    right: -119px;
  }
    
.top-3 {
display: none;
}
.book-container {
    height: 445px;
}
.cont-area2 {
    position: relative;
        padding: 50px 0 94px;
  }
  .nobr{
    display: inline;
  }
.top-w {
    text-align: left;
    margin:0 20px;
    color: white;
    font-size: 1.3rem;
    line-height: 2.4em;
}

  .cont-base-sec02::after {
      bottom: -1px;
      right: -1px;
    }
.cont-area2-2 {
    bottom: -2px;
    letter-spacing: 2px;
    right: 24px;
    font-size: 4.1rem;
}


.base01.cont-base {
          height: 1373px;
    
        padding: 30px 30px 50px 31px;
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
      border-top-left-radius: 30px; /* 左上だけ丸く */
  border-top-right-radius: 0;   /* 他は0で丸くしない */
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  }
.base02 .cont-button {
    margin-right: 27px;
  }
  .cont-base-sec02 {
max-width: 275px;
 width: calc(100% - 60px); /* 左右20pxずつの余白を確保 */
    gap:15px;
          padding: 25px;
        align-items: center;
        flex-direction: column;
        margin: 242px auto 0;
  }
  .cont-base-sec06-3 {
        padding:30px 16px;
    position:relative;
      margin: 20px auto;
     width: calc(100% - 40px); /* 左右20pxずつの余白を確保 */
  }
  .kaso-ser-00-2{
  padding: 0!important;
  }
  .sec06-box {
        gap: 16px;
    flex-direction: column;}
  .cont-sec02-1 {
    height: 227px;
    width: 227px;
  }
  .cont-sec02-1 img {
    position: absolute;
    width: 178px;
  }
  .cont-sec02-2 {
    font-size: 1.3rem;
    width: auto;
}
.base03 {
        top: 2394px;
    }
    .base03 {
      align-items: center;
              align-items: flex-start;
      width: 100%;
          flex-direction: column;
              border-top-left-radius: 30px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
              padding: 30px 30px 50px 31px;
    right: auto;
    left: 30px;
}
.cont-base-sec02-2 .cont-button {
        position: absolute;
        top: 1808px;
        right: 88px;
}
  .base02.cont-base {
    z-index: -1;
    pointer-events: auto;
            padding: 30px 30px 50px 31px;
        flex-direction: column;
        width: 100%;
        left: auto;
              align-items: flex-end;
      right: 30px;
        top: 1715px;
              border-top-left-radius: 0px; /* 左上だけ丸く */
          border-top-right-radius: 30px;   /* 他は0で丸くしない */
          border-bottom-right-radius: 0;
          border-bottom-left-radius: 0;
          
  }
  .base01 .cont-button{
    margin-left: 0px;
  }
  .base01 {
        left: 30px;
    top: 70px;
    right: auto;
}
.base-w li:first-child {
  text-align: center;
    letter-spacing: 3px;
    font-size: 3rem;
  }
  .base-w li:nth-child(2) {
    font-size: 1.2rem;
    text-align: center;
  }
  .base-c {
    margin-top: 17px;
    margin-left: 0px;
}
.cont-base-sec05-box .base-c {
    margin-left: auto;
          width: 177px;
}
.base03 .base-w{
  width: 177px;
  text-align: center;
}

.cont-base-sec03 {
  left: auto;
position: relative;
  padding: 35px;
    margin: 0px 40px 0;
transform:none;

}
.cont-sec03-2 {
      font-size: 1.3rem;
  width: auto;
    height: auto;}
.cont-base-sec03-2 {
    padding: 50px;
    right: -250px;
    bottom: -34px;
  }
  .cont-sec03-3 img {
    width: 170px;
}
.cont-base-sec03-2 {
    padding: 20px;
    right: 20px;
  
    bottom: auto;
  top: 154px;
  }
    .cont-base-sec03-wrap::before {
      display: none;
    }
    .cont-base-sec03-wrap {
      width: auto;
    margin: 276px auto 0;
        height: 400px;
  }
.cont-base-sec03-2-shadow {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 31px;
left: 20px;
    width: 226px;
    height: 229px;
    background-color: #d9d9d9;

}

.cont-base-sec03-wrap::after {
  display: none;
  max-width: 283px;
  height: 203px;
      bottom: -40px;
    right: 46px;
    z-index: 0;
  }
.cont-base-sec04 {
  flex-direction: column;
  width: auto;
align-items: stretch;
}
.cont-base-sec04 .date-cat {
    display: inline-flex;
flex-wrap: wrap;      /* ← これで横幅に収まらない場合は改行 */
  margin-bottom: 10px;
}
.cont-base-sec04-2 span {

  display: inline-block;

}
.kaso-ser-00-2.topser {
  top:auto;
}
.cont-area3 {
    height: 5301px;
}
.base06.cont-base {
  top:auto;
          margin-top: 250px;
  flex-direction: column;
    align-items: flex-end;
        padding: 30px 30px 50px 30px;
    width: 100%;
    height: 800px;
    left: auto;
    right: 30px;
    border-top-left-radius: 0px;
        border-top-right-radius: 30px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
}
.cont-base-sec04-2 li {
    padding-top: 1em;
    padding-bottom: 1em;
    border-top: 1px solid #8596b9;
}
.cont-base-sec04-2 li:last-child {
    border-bottom: 1px solid #8596b9;
}
.cont-base-sec05-box {
    width: auto;
  }
  .cont-base-sec05-2 {
    font-size: 1.3rem;
    line-height: 2em;
          margin: 17px 0 14px;
}
.cont-base-sec05 {
margin-top: 96px;
  height: auto;

    margin-right: auto;
    margin-left: auto;
     width: calc(100% - 40px); /* 左右20pxずつの余白を確保 */
  }
  .cont-base-sec05-und img {
    left:50%;
    transform: translateX(-50%);
    
    top: 246px;
    position: absolute;
    width: 118px;
}
  .cont-base-sec05-und {
    width: 100%;
    height: 400px;
  }
  .base06 {
top: 4172px;
  }
  .cont-base-sec06-2 iframe {
          margin: 382px 0 10px;
  }
.cont-base-sec04-2 {
    height: 319px;
     width: calc(100% - 40px); /* 左右20pxずつの余白を確保 */
  line-height: 1.2em;
  font-size: 1.2rem;
      padding: 30px;
          border-radius: 10px;
margin: 0 auto;
}
.cont-base-sec04 .base-c {
    margin-left: auto;
}
.cont-base-sec04-1 {
  display: flex;
  width: auto;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.base03 .base-c {
    margin-top: 17px;
    margin-left: 0px;
}
.cont-sec01 {
width: auto;
}
.cont-sec01 .row {
  flex-direction: column;
}
.con-sec03.cont-sec-1 {
  padding-top: 40px;
    padding-bottom: 40px;
}
.con-sec01, .con-sec02, .con-sec04, .con-sec04-2 {
    border-right: none;
    margin-left: 0px;
        padding-bottom: 40px;
    border-bottom: 2px solid var(--brand-blue);
}
.cont-sec01 {
        margin: 245px 20px 0 20px;
    border: 3px solid var(--brand-blue);
    padding: 30px 30px;
  }
  .cont-sec-1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  grid-template-rows: auto auto;         /* 2行 */
  gap: 0px;
 }
 .cont-sec-1 > :nth-child(3) {
  grid-column: 1 / -1; /* 左右両端にまたがる */
}
.con-sec03 .cont-sec-w span:nth-child(1) {
    width: 73px;}
    .con-sec03 .cont-sec-w span {
    width: 94px;
  }
 .cont-sec-in1 {
    width: 84px;
}
.cont-sec-in1::before {
    width: 90px;
    height: 90px;
        margin-top: 1px;
        margin-left: 11px;
  }
  .con-sec04 .cont-sec-w {
  margin-bottom: -7px;
}
.con-sec04-2 .cont-sec-in1 {
    width: 124px;
}
.base-a2 {
    margin-top: 19px;
  }
  .con-sec03 .base-a {
    margin-top: 15px;
}
  .cont-sec-w {
    margin-bottom: 20px;
        font-size: 2.8rem;
  }
  .con-sec01 .base-a {
    margin-top: 8px;
}
.con-sec02 .cont-sec-in1 {
    width: 118px;
}
.con-sec03 .cont-sec-in1 {
    width: 145px;
}
.book-container-at {
  font-size: 11px;
width: 150px;
text-align: center;
    top: 289px;
  
    right:-150px;
  z-index: 2000;

}



/* 左の三角 */
  .book-container-at::before {
    top: -12px;
    left: 112px; /* 好きな位置に調整 */
    transform: none;
    border-width: 0 8px 12px 8px; /* 上 右 下 左 */
    border-style: solid;
    border-color: transparent transparent #ccc transparent;

}