/* ========== Components (buttons / cards / generic UI) ========== */
@charset "UTF-8";

/* Hide author box components */
section.l-articleBottom__section.-author,
.p-authorBox,.c-authorBox,.author-box,.entry-author-info,
.author-avatar,.p-authorBox__avatar,
.p-authorBox__name,.entry-author-name{ display:none !important; }

/* Buttons */
.btn-01 a,.btn-01 .btn-01-button{
  border:1px solid #000; border-bottom:3px solid #000; font-weight:bold;
  line-height:1; display:block; width:100%; max-width:455px; margin:0 auto;
  padding:1.6rem 2rem; transition:.2s; text-align:center; background:#fff; color:#000; font-size:1.6rem; letter-spacing:.04em; position:relative;
}
.btn-01 a:before,.btn-01 .btn-01-button:before{
  content:""; position:absolute; right:2rem; top:50%; transform:translateY(-50%);
  font-size:3rem;
}
@media(min-width:768px){ .btn-01 a,.btn-01 .btn-01-button{ max-width:330px; } }
@media(min-width:769px){
  .btn-01 a,.btn-01 .btn-01-button{ font-size:1.8rem; padding:2.3rem 3rem 2.3rem 0; max-width:455px; }
  .btn-01 a:before,.btn-01 .btn-01-button:before{ right:4rem; }
  .btn-01 a:hover,.btn-01 .btn-01-button:hover{ background:#000; color:#fff; }
}

.btn-02 a,.btn-02 .btn-02-a{
  border:1px solid #000; border-bottom:3px solid #000; font-weight:bold; line-height:1;
  display:block; width:100%; min-width:205px; margin:0 auto; padding:1.6rem 0;
  transition:.2s; text-align:center; background:#fff; color:#000; font-size:1.6rem;
}
@media(min-width:768px){ .btn-02 a,.btn-02 .btn-02-a{ width:330px; } }
@media(min-width:769px){
  .btn-02 a,.btn-02 .btn-02-a{ font-size:1.8rem; padding:2.3rem 0; }
  .btn-02 a:hover,.btn-02 .btn-02-a:hover{ background:#000; color:#fff; }
}

/* Generic article card (archive/list) */
@media(min-width:769px){ .c-article__list{ display:flex; flex-wrap:wrap; } }
.c-article__item{ margin-bottom:3rem; }
@media(min-width:769px){
  .c-article__item{ margin-bottom:4.5rem; margin-right:4rem; width:calc((99.9% - 8rem)/3); }
  .c-article__item:nth-of-type(3n){ margin-right:0; }
}
.c-article__item a{ display:flex; }
@media(min-width:769px){
  .c-article__item a{ display:flex; flex-direction:column; height:100%; }
  .c-article__item a:hover .c-article__item__img img{ opacity:.6; }
}
.c-article__item__img{ width:44%; position:relative; text-align:center; }
.c-article__item__img img{ width:100%; height:100px; object-fit:cover; }
@media(min-width:768px){ .c-article__item__img{ width:22.5%; } }
@media(min-width:769px){
  .c-article__item__img{ width:100%; margin-bottom:1rem; background:#fff; }
  .c-article__item__img img{ transition:.2s; width:100%; height:257px; }
}
.c-article__item__txtbox{ flex:1; padding-left:1.5rem; display:flex; flex-direction:column; justify-content:space-between; }
@media(min-width:769px){ .c-article__item__txtbox{ padding-left:0; } }
.c-article__item__ttl{ font-size:1.2rem; font-weight:bold; }
@media(min-width:768px){ .c-article__item__ttl{ font-size:1.6rem; } }
@media(min-width:769px){ .c-article__item__ttl{ font-size:1.6rem; line-height:2; padding-bottom:1.5rem; flex:1 0 auto; } }

/* Column variant */
.c-article__item--column{ margin-bottom:4rem; }
.c-article__item--column a{ display:block; }
@media(min-width:769px){ .c-article__item--column a{ display:flex; } }
.c-article__item--column .c-article__item__img{ width:100%; margin-bottom:1.4rem; }
.c-article__item--column .c-article__item__img img{ height:auto; }
@media(min-width:769px){
  .c-article__item--column .c-article__item__img{ margin-bottom:1.5rem; }
  .c-article__item--column .c-article__item__img img{ height:252px; }
}
.c-article__item--column .c-article__item__txtbox{ padding-left:0; }
.c-article__item--column .c-article__item__ttl{ font-size:1.5rem; padding-bottom:1.5rem; }

/* Generic square card parts (used by sliders/lists) */
.card-image{ position:relative; width:100%; height:0; padding-bottom:100%; overflow:hidden; border-radius:8px 8px 0 0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }
.slide-thumbnail,.pickup-thumbnail{
  position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:transform .3s ease;
}
.no-image,.pickup-no-image{
  position:absolute; inset:0; background:linear-gradient(135deg,#f5f5f5,#e0e0e0);
  display:flex; align-items:center; justify-content:center; color:#999; font-weight:bold;
}
.slide-card{ background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.1); transition:transform .3s, box-shadow .3s; height:auto; display:flex; flex-direction:column; }
.slide-card:hover{ transform:translateY(-8px); box-shadow:0 8px 25px rgba(0,0,0,.15); }
.slide-card:hover .slide-thumbnail{ transform:scale(1.05); }
.card-content{ padding:15px; flex-grow:1; display:flex; flex-direction:column; justify-content:space-between; }
.card-title{ font-size:14px; font-weight:bold; line-height:1.3; margin:0 0 8px; color:#333; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-date{ color:#888; font-size:12px; margin-top:auto; }

/* Aspect ratio helpers */
.card-image.aspect-4-3{ padding-bottom:75%; }
.card-image.aspect-3-2{ padding-bottom:66.67%; }
.card-image.aspect-16-9{ padding-bottom:56.25%; }

/* Object position options */
.slide-thumbnail{ object-position:center center; }
.pickup-thumbnail{ object-position:center center; }

/* Hover frame */
.card-image::after{
  content:''; position:absolute; inset:0; border:2px solid transparent; border-radius:8px 8px 0 0; pointer-events:none; transition:border-color .3s;
}
.slide-card:hover .card-image::after{ border-color:rgba(255,107,107,.3); }

/* Swiper small site-wide tweaks */
.swiper-pagination-bullet{ margin:0 2.5px; width:10px; height:10px; background:#000; opacity:1; }
@media(min-width:769px){ .swiper-pagination-bullet{ margin:0 5px; width:15px; height:15px; } }
.swiper-pagination-bullet-active{ background:var(--main-color); }

/* Responsive tweaks for cards */
@media(min-width:1024px){ .card-image{ border-radius:8px 8px 0 0; } .card-content{ padding:15px; } .card-title{ font-size:14px; } }
@media(min-width:768px) and (max-width:1023px){ .card-content{ padding:12px; } .card-title{ font-size:13px; } .card-date{ font-size:11px; } }
@media(max-width:767px){
  .card-image{ border-radius:8px 8px 0 0; }
  .card-content{ padding:12px; }
  .card-title{ font-size:12px; -webkit-line-clamp:2; }
  .card-date{ font-size:11px; }
}

/* ========= Category Menu（WP版：キャンバスと同等デザイン） ========= */

/* カラー変数 */
:root{
  --c-001:#E54A3A; --c-002:#009767; --c-003:#28548C; --c-004:#f4bb3e; --c-005:#b18fdd; --c-006:#4082c4;
}

/* data-color → サブカラーに割当て */
.cat-tile[data-color="001"]{ --sub-color:var(--c-001); }
.cat-tile[data-color="002"]{ --sub-color:var(--c-002); }
.cat-tile[data-color="003"]{ --sub-color:var(--c-003); }
.cat-tile[data-color="004"]{ --sub-color:var(--c-004); }
.cat-tile[data-color="005"]{ --sub-color:var(--c-005); }
.cat-tile[data-color="006"]{ --sub-color:var(--c-006); }

/* グリッド */
.cat-menu__grid{
  padding:15px;
  display:grid; gap:15px; grid-template-columns:repeat(2,1fr);
}
@media(min-width:1024px){ .cat-menu__grid{ grid-template-columns:repeat(4,1fr); gap:28px; max-width:1200px; margin:auto;}}

/* タイル本体（背景＝サブカラー、写真は使わず透かしアイコンを敷く） */
.cat-tile{
  position:relative; z-index:0; overflow:hidden;
  min-height:auto; border-radius:10px; padding:18px;
  background:var(--sub-color);
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .2s ease;
}
.cat-tile:hover{ transform: translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.10); }

/* 透かし背景アイコン */
.cat-tile::after{
  content:""; position:absolute; inset:0; z-index:0;
  background-image: var(--bg-icon);
  background-repeat:no-repeat;
  background-position:right 8% bottom 8%;
  background-size:38%;
  opacity:.16; pointer-events:none; transition:opacity .2s, transform .2s;
}
@media(max-width:640px){
  .cat-tile::after{ background-position:right 6% bottom 6%; background-size:44%; }
}

@supports (-webkit-mask-image: url("")) or (mask-image: url("")){
  .cat-tile::after{
    background-image:none;
    /* ← 色と透け具合をここで自由に */
    background-color: var(--icon-color, rgba(255,255,255,.16));
    opacity:1; /* 透過は color の alpha で調整 */

    -webkit-mask-image: var(--bg-icon);
    mask-image: var(--bg-icon);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:right 8% bottom 8%; mask-position:right 8% bottom 8%;
    -webkit-mask-size:38%;         mask-size:38%;
  }
}

/* 内容は前面 */
.cat-tile__head, .cat-tile__cta, .cat-tile__open, .cat-tile__submenu { position:relative; z-index:1; }

/* タイトル */
.cat-tile__icon{ display:none !important; }
.cat-tile__title{ margin:4px 0 0; font-weight:800; color:#fff; letter-spacing:.02em; line-height:1.3; font-size:2rem; }

/* サブメニュー（丸ポチなし／矢印なし） */
.cat-tile__submenu{ margin:10px 0 0; }
.cat-tile__submenu ul{ list-style:none; margin:0; padding:0; }
.cat-tile__submenu li{ list-style:none; margin:0; padding:0; }
.cat-tile__submenu li::marker{ content:''; }
.cat-tile__submenu li+li{ margin-top:10px; }
.cat-tile__submenu a{ color:#fff; font-weight:700; text-decoration:none; letter-spacing:.02em; }

/* CTAボタン（PCのみ表示） */
.cat-tile__cta{ margin-top:14px; }
.cat-tile__cta .btn{
  background:#fff; border:2px solid #ededed; border-radius:9999px;
  height:56px; display:inline-flex; align-items:center; gap:12px; padding:0 22px 0 20px;
  text-decoration:none; transition:.25s;
}
.cat-tile__cta ._text{ color:#2e2e2e; font-weight:700; font-size:16px; }
.cat-tile__cta ._arrow{ color:var(--sub-color); font-weight:800; }
.cat-tile__cta .btn:hover{ background:var(--sub-color); border-color:var(--sub-color); }
.cat-tile__cta .btn:hover ._text{ color:#fff; }
.cat-tile__cta .btn:hover ._arrow{ color:#fff; }

/* SP：右寄せ段落の矢印のみ表示（→） */
.cat-tile__arrow.sp{
  display:block; width:100%; text-align:right; margin:0px 0 0; font-size:26px; line-height:1.4; color:#fff;
}
@media(max-width:640px){
  .cat-tile__cta{ display:none; }
  .cat-tile__arrow.sp{ display:block; }
}

/* 開閉ボタンは既存のまま（必要なら非表示でもOK） */
.cat-tile__open{ position:absolute; right:12px; bottom:12px; display:none; } /* ←使わないなら消す */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* サブメニュー初期表示：SPは閉、PCはお好みで */
@media(max-width:640px){
  .cat-tile__submenu{ display:block; }
  .cat-tile__submenu.is-open{ display:block; }
}

/* タイトルを最大2行、常に2行ぶんの高さを確保 */
.cat-tile__title{
  /* 既存のフォント設定はそのままでOK。必要なら調整 */
  font-size: 1.65rem;
  line-height: 1.3;

  /* 2行まで表示＆以降は省略（環境依存で … は付かないことも）*/
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* 高さを固定（1.3行 × 2行 = 2.6em）*/
  min-height: 2.6em;
  margin: 4px 0 6px;
}

/* SPのフォントサイズを変える場合でもずれない（emなので自動追従）*/
@media (max-width: 640px){
  .cat-tile__title{
    font-size: 2rem;   /* ここはお好みで */
    /* min-height は 2.6em のままでOK（行数基準だから崩れない） */
  }
}

/* 予備：古い環境向け（line-clamp未対応時は高さで切る）*/
@supports not (-webkit-line-clamp: 2){
  .cat-tile__title{ max-height: 2.6em; }
}

/*タグ関連コメントオフ*/
div#connect-area-widget-center2 {
    display: none;
}

.cat-tile { position: relative; }

/* 全面クリック用カバーリンク */
.cat-tile__cover{
  position: absolute;
  inset: 0;
  z-index: 10;
  text-indent: -9999px; /* 視覚非表示 */
}

/* 装飾矢印・サブメニューボタンはカバーリンクより前面に */
.cat-tile__arrow,
.cat-tile__open{
  position: relative;
  z-index: 2;
}

/* サブメニュー自体も前面に（必要に応じて） */
.cat-tile__submenu{ position: relative; z-index: 3; }


section.cat-menu{
	padding-bottom: 3rem;
}

span.inner_arrow{
  display: flex;
  justify-content: center;
  align-items: center;
}

svg.icon-arrow-circle {
    margin-right: 10px;
}

a.inner_pic {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}