:root {
      --card-width: 30vw; /* 共通サイズを変数として指定 */
      --transition-speed: 0.2s; /* アニメーション速度 */
    }


    .thumbnail-list {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
      padding: 2rem;
      list-style: none;
      margin: 0;
      padding-left: 0;
    }

    .thumbnail-list__item {
      display: block;
    }

    .thumbnail-list__figure {
      margin: 0;
      overflow: hidden;
    }

    .thumbnail {
      cursor: pointer;
      width: 150px;
      height: 150px;
      object-fit: cover;
      border: 1px solid #ccc;
      display: block;
      transition: .2s;
    }

    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 1000;
      justify-content: center;
      align-items: center;
    background-image: url(../assets/cmn/modal-closeBtn.svg);
    background-repeat: no-repeat;
    background-position: top right;
    cursor: pointer;
    }



    /*枠*/
    .modal-container {
      position: relative;
      background: transparent;

 
      visibility: hidden;
      animation-fill-mode: both;
    }

    .modal-container--appear {
      animation: modalComeIn 0.25s ease forwards;
      visibility: visible;
    }

    .modal-container--leave {
      animation: modalHeadOut 0.35s ease forwards;
      visibility: visible;
    }


    /*モーダル稼働時のアニメーション*/
    @keyframes modalComeIn {
      0% {
        opacity: 0;
        transform: scale(0.8);
      }
      65% {
        transform: scale(1.03);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes modalHeadOut {
      0% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      100% {
        opacity: 0;
        transform: translateY(35px) scale(0.97);
      }
    }


    .card {
     width: calc(var(--card-width));
 
      position: relative;
      display: flex;
      flex-direction: column;
      font-size: 1rem;
      transition: transform 0.3s ease;
    }





    .card__img {
      width: var(--card-width);
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      transition: .2s;
    }
    /*モーション時画像の位置を左へ*/
    .card--move .card__img{
      transform: translateX( calc(var(--card-width) / 2 * -1));
    }


    .card__info {
      position: absolute;
      top: 0;
      left: 0;
      background: #000000;
      color: #fff;
      width: var(--card-width);
      padding: 2rem 1rem;
      line-height: 1.5;
      z-index: 9;
      transition: .2s;
      overflow: hidden;   
    }

   

    /*モーション時画像の位置を左へ*/
    .card--move .card__info{
      transform:translateX( calc(var(--card-width) / 2));
    }


    .card__name {
      line-height:150%;
      font-size: 2.5rem;
      margin-bottom:1rem;
    }

    .card__category,
    .card__date {
      font-size: 1rem;
      margin-bottom:.5rem;
   
    }

    .card__comments {
      max-height: 280px;
      overflow-y: auto;
      margin-top: 2rem;
    }



.card__more-info {
  all: unset; /* 要素の初期化 */
  appearance: none; /* ボタンのデフォルトスタイルを消去 */
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 122;
  font-size: 1rem;
  width: 40px; /* 画像に合わせたサイズ */
  height: 40px;
  background-image: url("../assets/cmn/s.svg");
  background-size: cover;
  background-position: center;

  cursor: pointer;

}




/*hamburgerMenu*/

.hamburgerBtn{
  display: none;
  width: 100%;

  background: #000000;
  padding: 1rem 0rem 1rem 2rem;
  
  
}
.hamburgerBtn__text{
  z-index: 300;
  font-size:1rem ;
  color: #fff;
}
.hamburgerMenu{
  color:#fff;
}

.hamburgerMenu .footer__inner{
  border-top:solid 1px #fff;
  padding-top: 1rem;
  border-bottom:none;
  padding-bottom: 0;
  background:#434447;/*この背景がないとoverscroll時に透けて見える*/
}





.hamburgerBtn__icon {
  position: relative;
  z-index: 100;
  right: 16px;
  height: 24px;
  width: 36px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 500;
}



.hamburgerBtn__iconBar {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background: #fff;
}

.hamburgerBtn__iconBar::before,
.hamburgerBtn__iconBar::after {
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background: #fff;
  transition: 0.3s ease;
}

.hamburgerBtn__iconBar::before {
  top: 0;
}

.hamburgerBtn__iconBar::after {
  bottom: 0;
  width: 80%;
}

.hamburgerBtn__icon.is-active .hamburgerBtn__iconBar {
  height: 0;
}

/* ボタンをクリックしたときにバツに変える */
.hamburgerBtn__icon.is-active .hamburgerBtn__iconBar::before {
  opacity: 1;
  top: 50%;
  transform: rotate(45deg) translateY(-50%);
  transition: 0.3s ease;
}

.hamburgerBtn__icon.is-active .button-bar::after {
  opacity: 1;
  top: 50%;
  width: 100%;
  transform: rotate(-45deg) translateY(-50%);
  transition: 0.3s ease;
}

/*hamburgerMenu innerMenu*/
.hamburgerMenu {
  opacity: 0;
  position: fixed;
  inset: 0;
  transition: 0.3s ease;
  background:#434447;
  z-index: -10;

}

.hamburgerMenu.is-active {
  opacity: 1;
  visibility: visible;
  width: 100%;
  height: 100vh;
  transition: 0.5s ease;
  z-index: 100;
  
}


.overlay {
  position: fixed;
  inset: 0;
  z-index: 31;
  width: 100vw;
  height: 100vh;
    padding: 2rem;
  

}
.overlay__body{
    display: flex;
  justify-content: center; /* 横方向中央 */
  align-items: center;    /* 縦方向中央 */
  height: 100vh; 
  color: #fff;
}

.overlay__body li{
  margin-bottom: 3rem;

}

.overlay__body a{
  padding: 1rem 0;
  text-decoration: none;
  font-weight: bold;
  color: #fff;

}

.verticalNav__list{
    text-align: center;
    font-size:2rem;
    color: white;
}


.verticalNav__item{
    margin-bottom: 1rem;
}






/*ハンバーガーメニューの帯サイズ*/
.functionsMenu{
    width:70px;
    display: inline-block;
}











    .card {
      padding: 0;
      margin: 0;
      position: relative;
    }

    .card__wrapper {
      background-color: rgb(255, 255, 255);
      cursor: pointer;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;




    }

    .card__img {
      width: var(--card-width); /* 変数を使用 */
    }

    .card__info {
        background: #000000;
      width: var(--card-width); /* 変数を使用 */
      padding: 1rem;
      line-height: 150%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      transition: var(--transition-speed); /* 変数を使用 */
    }

    .card__name {
      font-size: 1.75rem;
      margin-bottom: 1rem;
    }

    .card__category {
      font-size: 1rem;
      margin-bottom: 1rem;
    }

    .card__date {
      font-size: 1rem;
      margin-bottom: 1rem;
    }

    .card__comments {
      overflow-y:auto;
      font-size: 1rem;
      padding: 1rem 0;
    }

    .card__info.move {
      left: var(--card-width); /* アニメーションの移動幅も変数で指定 */
    }





/*トップページメインビジュアル*/
.topHeadSection {
    display: flex;
    justify-content: center; /* 水平方向の中央配置 */
    align-items: center; /* 垂直方向の中央配置 */
    height: 100vh; /* ビューポート全体の高さ */
    width: 100%; /* 親要素に依存 */
    max-width: 1920px;
    margin: 0;
    padding: 0;
    overflow: hidden; /* スクロールバーを非表示に */
    position: relative; /* 絶対配置の基準にする */

}

.topHeadSection--first{
  margin-bottom: 5rem;
}



.topHeadSection__layer {
    position: absolute;
    top:0;
    left: 0;
    width:100vw;
    height: 100vh;
    z-index: 10;

}



.topHeadSection__content{
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.topHeadSection__contentUp {
  height: 71%;

  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 下寄せに必要ならこっちも */

}



.topHeadSection__contentBottom {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end; /* 右寄せ */
  align-items: flex-end;     /* 下寄せ */
  padding: 20px;

}

.bottom-right-item {

  padding: 10px;
  border-radius: 4px;
}

/*mainVisual Copy*/
.copy{
    display: inline-block;

    padding: 1rem;
}

.copy__title{
     font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 8rem;
    font-size: clamp(3rem, 6.67vw, 8rem);
    font-weight: bold;
    list-style: 150%;
    margin-bottom: 1.2rem;
}

.copy__lead{
    font-size: 1.875rem;
    font-size: clamp(1rem, 1.56vw, 1.875rem);
    font-weight: bold;

}
/*newsList*/
.newsList{
 
    padding: 1rem;
    background:rgba(255, 255, 255, 0.7);
}
.newsList__item{

    margin-bottom: 1rem;
}
.newsList__item a{
  text-decoration: none;
    font-size:1rem;
    color: #4f4f4f;
}

.newsList__item a:hover{
  text-decoration: underline;
}

.newsList__text{
    line-height: 150%;
   padding-left: 1rem;
}

.newsList__more{
  display: block;
  width: 100%;
  color: #000;
  text-align: right;
}

.newsList__more a{
  font-weight: bold;
  margin-right: 1rem;
  transition: .2s;
  color:#000;
}

.newsList__more a:hover{
  margin-right:.5rem;
}


/*header*/
.header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 132;
    width: 100%;

    display: flex;
    text-align: right;
    padding: 1rem 0 1rem 0;/*下層ページの増加分+.8rem*/
    display: flex;
    justify-content:end;   /* 横方向の中央揃え */
}


 .header > :first-child {
  margin-right: auto; /* 最初の子要素だけ左寄せ */
}


/*headNav*/
.headNav{
display: flex;
justify-content:end;   /* 横方向の中央揃え */
align-items: center;       /* 縦方向の中央揃え（行が1つの場合） */


    
}
/*header navigation*/
.navigation{
    margin-right: 2rem;
    display: flex;
}
.navigation__item{
    margin: 0 .5rem;
    font-size: 24px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight:bold;
    line-height: 100%;

}


.navigation__item:first-child::after{
    padding-left: 1rem;
    content:"";
    border-right: solid 2px black;
}

.navigation__item a{
  text-decoration: none;
  color: #000;

}
.navigation__item a:hover{
  text-decoration: underline;
}

/*header sns*/
.sns{

    display: flex;
}
.sns__item{
    margin: 0 .5rem;

}
.sns__item img{
    width: 38px;
    height: auto;
}
/*トップメインビジュアル用の入れ物*/
canvas {

    position: relative; /* 絶対配置を外す */
    display: block; /* ブロック要素として描画 */
    margin: auto; /* 中央に配置 */

    height: 100%; /* Canvasをセクション内に収める */
    margin: 0 auto;

}

/*topsectionTitle*/

.sectionTitle{
    font-size:40px;
    font-weight: bold;

    margin-bottom: 2rem;
}

/*artlist*/

.artListContainer {
  display: flex;
  gap:3.8vw;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
 box-sizing: border-box;

}
.artListContainer__column--fixed {
  flex: 0 0 400px;
}

.artListContainer__column--fixed img {

  width: 100%;
  height: auto;
  display: block;

}

/*ここが右のエリア*/
.artListContainer__column--flexible {
  flex: 1;
  display: flex;
  justify-content: flex-end;  /* 水平方向：右端に寄せる */
  align-items: center;        /* 垂直方向：中央揃え */
}


/*ul*/
.artListContainer__thumbnailList {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}





.artListContainer__item {
  width:25%;
  padding: 0.83vw;
  
}



.artListContainer__imgWrap {
  aspect-ratio: 1; /* 正方形を維持 */
  overflow: hidden;
  position:relative;
  border: solid 1px #ccc;


}
.artListContainer__imgWrap::after{
  content: url(../assets/cmn/plus-icon.svg);
  position: absolute;
  bottom: .2rem;
  right:.3rem;
  z-index: 1;
  cursor: pointer;
transform: scale(.9);
}

.artListContainer__img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition:.2s;
  cursor: pointer;

  
}




.artListContainer__img:hover {
  transform: scale(1.2);
  filter: blur(2px);         /* ← ブラー効果 */

}




/*下層ページ用のサムネイル*/

.lower-section .artListContainer__item{
  width:20%;
  padding: 0.83vw;
}

.lower-section .artListContainer__imgWrap{
  max-width: 200px;
}

/*トップ各コンテンツ*/
.topContentArea{
    padding: 5rem 0;

}

.topContentArea--1440{
    max-width: 1440px;
    margin: 0 auto;
}

.topContentArea--1000{
    max-width: 1000px;
    margin: 0 auto;
}

.topContentArea__title{
  font-size: 1.75;
  font-size: max(1.75rem, 2.5vw);
  font-weight: bold;
  margin-bottom: 2rem;

}

.linkBtnPosition{
  text-align: right;
  margin: 2rem;
}
/*リンク用ボタン*/
.linkBtn{

  appearance: none;     /* ブラウザ独自のスタイルを排除 */
  -webkit-appearance: none; /* Safari向けのベンダープレフィックス */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  font-size:1.25rem;
  font-weight: bold;
  line-height: 100%;


}

.linkBtn:hover::after{
  padding-left: .4rem;

}
.linkBtn::after{
  content: url('../assets/cmn/link_arrow.svg');
  padding-left: 1rem;
  line-height: 100%;
  transition:.2s;
 
}

     .toolArea {
      background:url('../assets/top/ornament-stars.svg');
      background-position: top center;
      background-repeat: no-repeat;
      display: flex;

      padding-top:10.4rem;
      background-size:contain;
   
  }
  .toolArea__left {
    max-width: 340px;
    width: 100%;

  }
  .toolArea__image {
    max-width: 100%; /* 画像を調整 */
    height: auto;
  }
  .toolArea__right {
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    padding: 2rem;
  }
  .toolArea__heading {
    margin-bottom: 16px; /* 見出しのスペース */
  }
  .toolArea__table {
    border-collapse: collapse;
    width: 80%;
  }
  .toolArea__table th, .toolArea__table td {
    border: 1px solid #000;
    padding: 8px;
    text-align: left;
  }

  .ornament-stars{
    max-width: 100%;
    height: auto;
  }

/*table horizontal*/

.m-horizontal-table{
  width:  100%;
}

/*横スクロールを出す*/
.m-horizontal-table{
  max-width:calc(100vw - 4rem);/*画面幅から左右余白を引く*/
}
.m-verical-table__headerRow{
    border-bottom: solid 1px #000;
}

.m-horizontal-table__headerTitle:nth-child(2){
  text-align: center;
}


.m-horizontal-table__inner{
  width: 100%;
}
.m-horizontal-table__row{
  border-bottom: solid 3px #000;

}

.m-horizontal-table__text{
  font-size:1.5rem;
  font-weight: bold;
  line-height: 200%;
  padding: 1rem;
  vertical-align: middle;
}















    /*loopAnimation*/
.loopAnimation{
  margin: 5rem 0;
  overflow: hidden; /* スクロールバー非表示 */
  background: #fff;
}

.scroll-container {
  width: 100vw;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}
.scroll-text {
    line-height: 150%;
  font-size: 96px; /* min()に対応していないブラウザ用 */
  font-size: max(5vw, 3rem); /* 5vwと3remの小さい方を採用 */
  font-weight: bold;
  display: inline-block;
  white-space: nowrap;
  min-width: 200%; /* コンテンツ幅を拡張！ */
  animation: scroll-loop 60s linear infinite;
  transform: translateX(-100%);
}


.scroll-text span {
  display: inline-block;

}
@keyframes scroll-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}




/*footer*/
.footer{
  background: #464646;
  color: #fff;
  width: 100%;

}
.footer__inner{
  max-width: 1920px;
  padding: 1rem;
}
.footer__title{
  font-size:1.5rem;
  font-weight: bold;
  line-height: 150%;
}
.footer__list{
  margin-top: 1rem;
  display: flex;

}
.footer__listItem{
  margin-right: 2rem;
}
.footer__listItem:last-child{
  margin-right: 0;
}




.footer__listItem a{
  font-size: 1rem;
  color: #fff;
  padding: .5rem 0;
  font-weight: bold;
  text-decoration: none;
}
.footer__img{
  width:40px;
  height: auto;
  border-radius: 50%;
  transition:.2s;
}

.footer__img:hover{
  border-radius: 0%;
}



.copyright{
  margin-top: 4.1rem;
  text-align: center;
  font-size:1rem;
  font-weight: bold;

}


/*fanbox*/
.fanbox {
  max-width: 1440px;
  padding: 50px 1rem 0px 1rem;
  text-align: center;
  background-image: url('../assets/cmn/fan-bg1.png'), url('../assets/cmn/fan-bg2.png'),url('../assets/cmn/fan-bg3.png'), url('../assets/cmn/fan-bg4.png');
  background-position:10% 0px, 90% 0, 100% 80%, 0 83%;
  background-size: 154px auto, 148px auto, 186px auto, 192px auto;
  background-repeat: no-repeat;
}

.fanbox__inner{
  display: inline-block;
  padding: 1rem .5rem;
  background:transparent;/*背景処理どうしようか悩む*/
}

.fanbox__title{
  font-size:2.25rem;
  font-weight: bold;
  margin-bottom: 1.875rem;
}
.fanbox__text{
  font-size: 1.25rem;
  line-height: 180%;
}
.fanbox__imgWrap{

  margin: 0 auto;
}

.fanbox__img{
  max-width:327px;
  width: 100%;
}
.fanbox__linkText{

  font-size: 1rem;

}

.fanbox__arrow{
  margin: 2.5rem auto;
}

.dcode img{
  margin: 1rem;  
  width: 100px;
;

}
/*footernavigation*/
.footerNav{
  width: 100%;
  padding: 1rem;
  text-align: center;
  background: #EDEDED;
}
.footerNav__list{
  display: flex;
  justify-content: center; /* 横方向に中央揃え */


}
.footerNav__item{
  padding: 0 1.25rem;
  border-right: solid 3px #000;
}
.footerNav__item:last-child{
  border: none;
    padding-right: 0;
}
.footerNav__item a{
  font-size:1.5rem;
  font-weight: bold;
  text-decoration: none;
  color: #000;
}
.footerNav__item a:hover{
  text-decoration: underline;
}



/*mediaquery*/
.m-horizontal-table--mdScroll{
  overflow-x: auto;
}

.m-horizontal-table--mdScroll .m-horizontal-table__text{
  white-space: nowrap;
}

/*pageTop*/
.pageTop{
    position: fixed;
    bottom: -10rem;
    right: 2rem;
    cursor: pointer;
    transition: .5s;
}


.isActive.pageTop{
    position: fixed;
    bottom: 2rem;
}



/*下層ページデザイン*/
.pageTitle{
  padding:  0.8rem 2rem;
  
}
.pageTitle--toppage{
  display: none;
}


.pageTitle a{
text-decoration: none;
color:#000;
}
.pageLogo{
  font-size:1.7rem;
  font-weight: bold;
}

.lower-header{
  text-align: center;

  width: 100%;
  margin:4rem 0;

}
.lower-section{
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding:1.67vw 2.5vw;

  background: #f0f0f0;
}


/*bread-navi*/
.breadNav{
  width: 100%;
  max-width:1440px;

  padding: 0.5rem 1rem;
  margin:0 auto 1rem auto;

}

.breadNav__list{
  width: 100%;
}

.breadNav__list::after{
  content: "";
  display: table;
  clear: left;
}

.breadNav__item{
  float: left;
  padding-bottom: .5rem;
}

.breadNav__item::after{
  margin-right:1rem;
  padding-left: 1rem;
  content: ">";
}


.breadNav__item:last-child::after{
  margin-right: 0;
  content: "";
}

.breadNav__item a{
  color: #000;
 
  text-decoration: none;
}
.breadNav__item:first-child a{
  position: relative;
  padding-left:2rem;
}
.breadNav__item:first-child a::before{
  position: absolute;
  top:calc(50% - 9px);
  left: 0;
  content: url(../assets/cmn/breadIcon.svg);
  width: 14px;
}


.breadNav__item a:hover{
  text-decoration:underline;
}
.breadNav__item:last-child a{
  margin-right:0;
}
.breadNav__item:last-child{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}


/**一覧ページ　カテゴリー切り替えボタン**/
.categoryLink {
  margin: 1rem 0 2rem 0;
  display: flex;
}
.categoryLink__item{
  cursor: pointer;
  font-size:.75rem;
  padding:.5rem  1rem;
  margin: 0 .3rem;
  border: solid 1px #ccc;
  transition:.2s;

}
.categoryLink__item:hover{
  background: #ccc;
}



.categoryLink__link{
  text-decoration: none;
  color: #000;
}

/*投稿ページ*/
.journal{

  line-height: 180%;

}
.journal header{
  margin-bottom: 2.5rem;

}

/*投稿見出し*/
.journal h2{
   line-height: 150%;
  font-weight: bold;
  font-size:3rem;
  margin:1rem 0 1rem 0;
}

/*カテゴリー*/
.journal .category{
  margin-right:1rem;
  padding: .2rem .5rem;
  background: #ccc;
}


.journal h3{
  font-weight: bold;
  font-size:1.8rem;
  padding-left: 1rem;
  line-height: 120%;
  border-left:solid .4rem #000;
  margin:1.5rem 0 1.5rem 0;
}


.journal iframe{
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/*投稿日*/
.journal time{
  font-size:.9rem;
  color: #8E8E8E;

}


/*テキスト*/
.journal p{
  margin-bottom: 3rem;
}
.journal p:last-child{
  margin-bottom: 1rem;
}

/*リスト*/

.journal ul {
  list-style-type: disc; /* ・を表示 */
  padding-left: 1rem;    /* 左側にスペースを少し追加 */
  margin-bottom: 3rem;
}

.journal li {
  margin-bottom: .2rem;    /* 項目間に少し間隔を設定 */
}

.journal img{
  max-width: 430px;
  width:100%;
  height: auto;
  margin-bottom: 2rem;
}
.journal figure {
  margin-top: 2.5rem;
}
.journal figure > img{
  margin-bottom: .3rem;
}


/*記事ページページャー*/
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
  


}

.pagination {

    list-style: none;
    padding: 0;
    display: flex;
    gap: 10px; /* ボタン間の間隔 */
    justify-content: center;
    padding-top: 3rem;
  
}

.pagination li {

    display: inline-block;
}

.pagination a, .pagination span {
    display: block;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px; /* 角を丸くする */
    text-decoration: none;
    color: #333;
    transition:.2s;
}

.pagination .current {
    background-color: #000000;
    color: #fff;
    border-color: #0078d7;
    
}

.pagination a:hover {
    background-color: #ffffff;
}



/*blogArchiveブログ一覧*/
.blogArchive{
  width:100%;
}

.blogArchive__link{
  display: block;
  padding:1.5rem 1rem;
  line-height: 150%;
  color: #000;
  text-decoration: none;
  transition:.2s;
}

.blogArchive__link:hover{
  background:white;
  transition:.5s;
}
.blogArchive__item{
  border-bottom:solid 2px #000;
}

.blogArchive__time{
  margin-right: 2rem;
}
.blogArchive__category{
  background: #cccccc;
  padding: .2rem;
  margin-right: .5rem;
}



/*関連記事*/
.relatedPost{
  margin-top: 3rem;
}
.relatedPost__item{

}
.relatedPost__link{
  color:#000;
  text-decoration: none;
}

.relatedPost__link:hover{
  text-decoration:underline;
}
/*記事切り替え*/
.pager {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0 0 0;
  border-top:solid 1px #ccc;
}

.pager__previous {
  text-align: left;
}

.pager__next {
  text-align: right;
}

/*404*/
.not-faund{
  margin: 3rem auto;
  text-align: center;
}

.not-faund__text{
  font-size:2.5rem;
  font-weight: bold;
  margin-bottom: 4rem;
  line-height: 150%;}

.not-faund__subText{
  line-height: 150%;
}

/*以下モバイル用*/
@media (max-width: 920px) {


:root {
      --card-width: 75vw; /* 共通サイズを変数として指定 */

    }
/*トップ各コンテンツ*/
.topContentArea{
    padding: 3rem 1rem;
}


/*下層ページデザイン*/




    .card {
        width: var(--card-width);
      position: relative;
      display: flex;
      flex-direction: column;
      font-size: 1rem;
      transition: transform 0.3s ease;
      cursor: pointer;
    }

  




    .card__img {
      width: var(--card-width);
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      transition: .2s;
    }
    /*モーション時画像の位置を左へ*/
    .card--move .card__img{
      transform: translateX(0);
    }


    .card__info {
      position: absolute;
      top: -1rem;
      left: 0;
      background: #000000;
      color: #fff;
      width: var(--card-width);
      padding: 2rem 1rem;
      line-height: 1.5;
      z-index: 9;
      transition: .2s;
      opacity: 0;
    }

     /*モーション時画像の位置を左へ*/
    .card--move .card__info{
      top: 0rem;
      z-index:20;
            opacity: 1;
    }





    /*モーション時画像の位置を左へ*/
    .card--move .card__info{
      transform:translateX(0);
    }







/*mainvisual*/
.topHeadSection__contentBottom {

  justify-content: flex-start; /* 右寄せ */
  align-items:center;     /* 下寄せ */
  padding: 10px;
}


/*artList*/
.artListContainer__column--fixed {

  max-width: 300px;
  flex: 0 0 50vw;
}
.artListContainer {
  gap:1rem;
}

.artListContainer__item {
  width:50%;
  padding: .5rem;
  
}
/*下層ページ用のサムネイル*/

.lower-section .artListContainer__item{
  width:33.3%;
  padding: .5rem;
}


/*fanbox*/
.fanbox__inner{

  background:rgba(255, 255, 255, 0.7);
}


/*bread-navi*/

.breadNav{
  width: 100%;
  max-width: 1920px;
  padding:.2rem 0.875rem ;
  margin: 0 auto;
  line-height: 120%;
}

.breadNav__list{
  width: 100%;
  font-size: .75rem;
}

.breadNav__list::after{
  content: "";
  display: table;
  clear: left;
}

.breadNav__item{

  float: left;
}

.breadNav__item::after{
  margin-right:.5rem;
  padding-left: .5rem;
  content: ">";
}


.breadNav__item:last-child::after{
  margin-right: 0;
  content: "";
}

.breadNav__item a{
  color: #000;
 
  text-decoration: none;
}
.breadNav__item:first-child a{
  position: relative;

}
.breadNav__item:first-child a::before{
  position: absolute;
  top:calc(50% - 10px);
  left: 0;
  content: url(../assets/cmn/breadIcon.svg);
  width: 14px;
}


.breadNav__item a:hover{
  text-decoration:underline;
}
.breadNav__item:last-child a{
  margin-right:0;
  
}


.breadNav__item:last-child{
  width: 15rem;/*ここで文字数制限*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

/*ページャーモバイル時の下余白*/
.pagination {
  padding-top: 2rem;
  padding-bottom:2rem
  
}


  .toolArea__right {
    padding: 2rem 0;
  }



}


/*以下モバイル用*/
@media (max-width: 710px) {

.header{
    padding: 0;
}

/*ロゴ*/
.pageTitle{
  padding:  0.8rem .75rem;
  
}


.pageTitle--toppage{
  display: block;
}

/*header_humbergermenu-icon*/
.hamburgerBtn{
  display: flex;

}

/*header menu*/
.headNav{
  display: none;
}

/*header sns*/
.sns{

    display: none;
}

/*fanbox*/
.fanbox {

  background-image: none;

}



.artListContainer {
  gap:0rem;
}

.artListContainer__column--fixed {
  display: none;
}
.lower-section .artListContainer__item{
  width:50%;
  padding: .5rem;
}


/**/
.topContentArea{
 padding: 3rem 1rem;
}


/*toolarea*/
.toolArea {
    display: flex;
    flex-direction: column-reverse; 
    background-position: top center;

}



/*投稿見出し*/
.journal h2{

  font-size:2rem;

}

.journal h3{
  font-weight: bold;
  font-size:1.5rem;

}


/*記事切り替え*/
.pager {

  padding: 1rem 0 1rem 0;

}



.artListContainer__img:hover {
  filter:none;         /* ← ブラー効果 */
}

.blogArchive__time{
  display: block;
  margin-bottom: .5rem;
  margin-right: 0rem;
}




}