@charset "UTF-8";
html {
  font-size               : 62.5%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust   : 100%;
  -ms-text-size-adjust    : 100%;
  text-size-adjust        : 100%;
}
body {
  /*font-family: 'M PLUS Rounded 1c','Noto Sans JP', sans-serif;*/
  /*font-family: 'Yu Gothic', '游ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', 'Meiryo', 'メイリオ', sans-serif;*/
  font-family: "hiragino-kaku-gothic-pron", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "YuGothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  color      : #2F2F2F;
  background : #fff5de;
}
body.noscroll {
  overflow: hidden;
}
a {
  display: block;
}
img {
  width    : 100%;
  max-width: 100%;
  display  : block;
}
.wrap {
  overflow: hidden;
}
.container {
  max-width: 1064px;
  margin   : 0 auto;
  padding  : 0 30px;
}
.txt {
  font-size  : 1.8rem;
  line-height: 2;
}
@media screen and (max-width: 360px) {
  html {
    font-size: 53.5%;
  }
}
.header {
  height    : 50px;
  background   : rgba(255, 255, 255, 0.9);
  padding   : 0 40px;
  position  : fixed;
  top       : 0;
  left      : 0;
  right     : 0;
  z-index   : 1000;
}
.h_container {
  height     : 100%;
  display    : flex;
  align-items: center;
}
.h_logo {
  display: flex;
  gap:10px;
  width: 73%;
}
.h_logo a img{
  width: 120px;
  height: 36px;
}
.h_btn_list {
  width          : calc(100% - 60px);
  display        : flex;
  justify-content: flex-end;
  align-items    : center;
  gap            : 40px;
}
.h_btn {
  width : 50px;
  height: 30px;
}
.h_login_btn {
  background     : url(../assets/img/h-login-btn.svg) no-repeat;
  background-size: 100%;
}
.h_signup_btn {
  background     : url(../assets/img/h-signup-btn.svg) no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 600px) {
  .header {
    height : 50px;
    padding: 0 16px 0 12px;
  }
  .h_logo a img{
    width: 120px;
    height: 36px;
  }
  .h_btn_list {
    width: calc(100% - 41px);
    gap  : 0;
  }
  .h_btn_list li:nth-child(2) {
    margin: 0 15px 0 15px;
  }
  .h_btn {
    width : 50px;
    height: 30px;
  }
}
.nav_btn {
  width          : 25px;
  height         : 32px;
  display        : flex;
  flex-direction : column;
  justify-content: center;
  align-items    : center;
  cursor         : pointer;
  position       : relative;
  z-index        : 200;
}
.nav_btn span {
  width        : 100%;
  height       : 5px;
  background   : #ffbf1f;
  display      : inline-block;
  transition   : 0.3s;
  border-radius: 20px;
}
.nav_btn span:nth-child(2) {
  margin: 4px 0;
}
.nav_btn.active span:nth-child(1) {
  transform    : translateY(11.5px) rotate(-45deg);
  transition   : 0.3s;
  background   : #000;
  height       : 8px;
  border-radius: unset;
}
.nav_btn.active span:nth-child(2) {
  transform       : scaleX(0);
  transform-origin: right top;
  transition      : transform .3s;
}
.nav_btn.active span:nth-child(3) {
  transform    : translateY(-10px) rotate(45deg);
  transition   : 0.3s;
  background   : #000;
  height       : 8px;
  border-radius: unset;
}
.nav_search-icon{
  display: inline-block;
  width:25px;
  height:25px;
  cursor: pointer;
}
@media screen and (max-width: 600px) {
  .nav_btn {
    width : 25px;
    height: 32px;
  }
  .nav_btn span:nth-child(2) {
    margin: 4px 0;
  }
  .nav_btn.active span:nth-child(1) {
    height   : 8px;
    transform: translateY(11.5px) rotate(-45deg);
  }
  .nav_btn.active span:nth-child(3) {
    height: 8px;
  }
}
.h_nav {
  width     : 28%;
  height    : 90vh;
  position  : fixed;
  top       : 0;
  right     : -25%;
  transition: all .5s;
  visibility: hidden;
  z-index   : 100;
  background: #FFBF1F;
}
.h_nav.active {
  position  : fixed;
  top       : 0;
  right     : -1%;
  visibility: visible;
  height    : 90vh;
  z-index   : 100;
  overflow-y: scroll;
  transition: all .5s;
  background: #FFBF1F;
}
.h_nav_list {
  width          : 100%;
  height         : 100%;
  display        : flex;
  flex-direction : column;
  justify-content: center;
  padding        : 0 20px;
}
.h_nav_list li {
  width      : 100%;
  line-height: 1.4;
}
.h_nav_list li:nth-child(3) {
  margin: 0 0;
}
.h_nav_list li a {
  font-size  : 2.0rem;
  font-weight: 800;
}
@media screen and (max-width: 1100px) {
  .h_nav_list li a {
    font-size: 2rem;
  }
}
@media screen and (max-width: 1024px) {
  .h_nav {
    right: -40%;
  }
  .h_nav.active {
    width: 40%;
  }
  .h_nav_list li a {
    font-size: 2rem;
  }
}
@media screen and (max-width: 700px) {
  .h_nav_list li a {
    font-size: 2.0rem;
  }
}
@media screen and (max-width: 600px) {
  .h_nav {
    right: -85%;
  }
  .h_nav.active {
    width: 85%;
  }
  .h_nav_list li a {
    font-size: 2.0rem;
  }
}
.main__container {
  /*max-width      : 1094px;*/
  max-width: 136rem;
  margin         : 0 auto;
  padding        : 10px 10px 0;
  display        : flex;
  justify-content: space-between;
  align-items    : flex-start;
  gap            : 0 15px;
  /*margin-top     : 50px;*/
  position: relative;
}
@media screen and (max-width: 1024px) {
  .main__container {
    flex-direction: column;
    padding       : 0;
  }
}

.main {
  width    : 65%;
  /*max-width: 650px;*/
}
.main section {
  background: #fff;
}
.main__sec_ttl {
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .main {
    width    : 100%;
    max-width: 100%;
  }
}
.main__top {
  padding      : 0px 0 0px;
  margin-bottom: 0px;
}
.main__top_head {
  margin-left: 10px;
}
.main__top_logo {
  width        : 212px;
  margin-bottom: 0px;
}
.main__top_lead {
  font-size   : clamp(1.2rem, 3vw, 2.0rem);
  line-height : 1.5;
  padding-left: 2px;
  color:#9c9b9b;
}

@media screen and (max-width: 1024px) {
  .main__top {
    padding      : 0px 0 0px;
    margin-bottom: 0px;
  }
}

.side {
  width    : 39%;
  /*max-width: 340px;*/
}
.side section {
  background   : #fff;
  margin-bottom: 20px;
}
.side__container {
  padding   : 17px 19px 15px;
  background: #fff;
}
.side__sec_ttl {
  font-size    : 2rem;
  line-height  : 1.45;
  margin-bottom: 12px;
}
.side__list {
  display       : flex;
  flex-direction: column;
  gap           : 20px;
}
.side__list_item {
  display        : flex;
  justify-content: start;
  align-items    : flex-start;
  gap            : 10px;
}
.side__list_item:hover {  
  opacity: 70%;
}
.side__list_item img {
  width: 20%;
  aspect-ratio: 4 / 4;
  max-height: 100px;
  object-fit: cover;
  border-radius: 5px;
}
.side__list_item img:hover {
  filter    : brightness(85%);
}
.side__txt {
  font-size  : 1.4rem;
  line-height: 1.7;
  text-align : start;
}
.side__list_txt {
  width: calc(100% - 20%);
}

.feature .side__txt {
  color     : #FF006F;
  margin-top: 10px;
}
.feature .side__txt:after {
  display    : inline-block;
  margin-left: 10px;
}

@media screen and (max-width: 1024px) {
  .side {
    width    : 100%;
    max-width: 100%;
    padding  : 20px;
  }
}
@media screen and (max-width: 600px) {
  .side {
    padding: 10px 10px 5px;
  }
  .side section {
    margin-bottom: 10px;
  }
  .side__container {
    padding: 17px 12px 15px 10px;
  }
}
.side_sensei_list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows	:1fr 1fr 1fr ;
  gap: 4px;
}


/* 新着リスト全体 */
.side__list.sideNew{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 1アイテム */
.sideNew__item{
  margin: 0;
}

/* クリック領域（カード） */
.sideNew__link{
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 12px;
  align-items: center;

  padding: 12px;
  border-radius: 14px;

  background: #fff;
  border: 2px solid rgba(255,191,31,0.20); /* playListの黄色に寄せる */
  box-shadow: 0 10px 18px rgba(0,0,0,0.06);

  text-decoration: none;
  color: inherit;

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

/* hover */
.sideNew__link:hover{
  transform: translateY(-1px);
  border-color: rgba(255,191,31,0.55);
  background: rgba(255,191,31,0.06);
  box-shadow: 0 14px 24px rgba(0,0,0,0.08);
}

/* focus */
.sideNew__link:focus-visible{
  outline: 3px solid rgba(255,191,31,0.55);
  outline-offset: 3px;
}

/* サムネ */
.sideNew__thumb{
  width: 76px;
  height: 76px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,191,31,0.12);
  flex: 0 0 auto;
}

.sideNew__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 画像がないとき */
.sideNew__thumbPlaceholder{
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,191,31,0.16), rgba(0,0,0,0.03));
}

/* テキスト */
.sideNew__body{
  min-width: 0; /* 省略を効かせる */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sideNew__title{
  font-size: 1.45rem;
  font-weight: 900;
  color: #333;
  line-height: 1.25;

  /* 長いタイトル対策（2行まで） */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sideNew__quote{
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.35;

  /* “声かけ例”を目立たせる（今の水色を踏襲） */
  color: #3BB0C8;

  /* 長いときの省略（2行） */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 右矢印 */
.sideNew__arrow{
  font-size: 2.2rem;
  color: rgba(0,0,0,0.28);
  padding-left: 4px;
}

/* 既存の side__list_item 等が残っていても影響が出にくいように無効化（任意） */
.side__list_item{ gap: 0; }
.side__list_item:hover{ opacity: 1; }



a.bt-group{
  display: block;
  text-decoration: none;
  height:40px;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 40px;
  min-width: 80px;
  width: 50%;
  box-sizing: border-box;
  font-size: 1.5rem;
  text-align: center;
  color: #fff;
  background: #ff006f; 
  margin:20px auto 10px auto ;
  border-radius: 20px;
}
a.bt-group:hover{
  opacity:0.7 ;
}
a.bt-group:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  opacity:0.7 ;
  box-shadow: none;
}

.btn {
  font-size         : 1.8rem;
  color             : #fff;
  font-weight       : 500;
  width             : 295px;
  height            : 60px;
  display           : flex;
  align-items       : center;
  justify-content   : center;
  border-radius     : 5px;
  transition        : .2s
}
.btn.btn_org {
  background: #FFBF1F;
}
.btn.btn_rd {
  background: #FF006F;
}
.btn:hover {
  filter    : brightness(85%) contrast(120%);
  transition: .2s
}

.main__sec_container {
  padding: 0 12px;
}
@media screen and (max-width: 768px) {
  .main__sec_container {
    padding: 0 10px;
  }
}

.l-container {
   background: #FFF;
   gap: 0 2rem;
   margin: 6rem auto 0;
   max-width: 136rem;
   padding: 2.4rem 4rem;
}
@media screen and (max-width: 1024px) {
   .l-container {
    margin-top: 5rem;
   }
}

@media screen and (max-width: 768px) {
   .l-container {
      background: #fff;
      flex-direction: column;
      gap: 4rem 0;
      padding: 0;
   }
}
@media screen and (max-width: 600px) {
   .l-container {
      gap: 1rem 0;
   }
}

   /* グローバルメニュー */
   .global-menu-bar {
   display: flex;
   align-items: center;
   background-color: #ffbf1f;
   height: 56px;
   }

   /* 各メニューを均等幅に */
   .menu-item {
   flex: 1;                           /* ★ ここが肝 */
   display: flex;
   justify-content: center;           /* 横中央 */
   align-items: center;               /* 縦中央 */
   gap: 6px;
   text-decoration: none;
   color: #000;
   position: relative;
   }

   /* 区切り線（各エリアの右端＝ちょうど中央） */
   .menu-item:not(:last-child)::after {
   content: "";
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 1px;
   height: 26px;
   background-color: rgba(0,0,0,0.35);
   }

   .menu-item img {
   width: 28px;
   height: 28px;
   object-fit: contain;
   }

   .global-menu-font {
   font-size: 2.4rem;
   }

   .global-menu-font-small {
   font-size: 1.2rem;
   }

   .menu-item-keisai {
   display: flex;
   flex-direction: row;
   align-items: center;
   height: 2.4rem;
   flex-direction: column;
   justify-content: center;

   }


   /* レスポンシブ */
   @media screen and (max-width: 768px) {
    .global-menu-font {
        font-size: 2.0rem;
    }
    .global-menu-font-small {
    font-size: 1.4rem;
    }
   }

   @media screen and (max-width: 600px) {
   .global-menu-font {
      font-size: 1.0rem;
   }
    .global-menu-font-small {
    font-size: 0.8rem;
    }

   .menu-item img {
      width: 14px;
      height: 14px;
   }
   }

      /* Top Description 共通 */
   .top-description {
   font-size: 3rem;
   }

   /* 900px以上：PC */
   @media screen and (max-width: 768px) {
   .top-description {
      font-size: 2.0rem;
   }
   }

   /* 600px以上：タブレット */
   @media screen and (max-width: 600px) {
   .top-description {
      font-size: 1.4rem;
   }
   }

   /* Breadcrumb */
   .breadcrumb{
   /* 背景 #FFBF1F / 不透明度15% */
   background: rgba(255, 191, 31, 0.15);
   padding: 10px 14px;
   }

   .breadcrumb__list{
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   gap: 6px 10px;
   align-items: center;
   margin: 0;
   padding: 0;
   }

   .breadcrumb__item{
   display: inline-flex;
   align-items: center;
   font-size: 2.4rem;
   line-height: 1.2;
   color: #525252;
   }

   /* 区切り（最後以外） */
   .breadcrumb__item:not(:last-child)::after{
   content: "＞";
   margin-left: 10px;
   opacity: 0.65;
   }

   .breadcrumb__link{
   color: inherit;
   text-decoration: none;
   padding: 2px 4px;
   border-radius: 6px;
   }

   .breadcrumb__link:hover{
   background: rgba(0, 0, 0, 0.06);
   }

   .breadcrumb__item--current{
   font-weight: 700;
   }

   /* スマホ微調整 */
   @media (max-width: 768px){
   .breadcrumb{
      padding: 9px 12px;
   }
   .breadcrumb__item{
      font-size: 2.0rem;
   }
   }


   /* スマホ微調整 */
   @media (max-width: 600px){
   .breadcrumb{
      padding: 9px 12px;
   }
   .breadcrumb__item{
      font-size: 1.0rem;
   }
   }



.problem_search {
  width        : 100%;
  max-width: 1024px;
  height       : 60px;
  border-radius: 6px;
  box-shadow   : 1px 3px 10px lightgrey;
  margin       : 0 auto 20px;
}
.index-search{
  display: none;
  overflow: hidden;
  position: fixed;
  top: 70px;	
  width: 95%;
  margin-left: auto;
  margin-right: auto;	
  z-index: 1000;
  width: 100%;
  max-width: 1024px;
}
.problem_search_btn_wrap {
  width          : 100%;
  height         : 100%;
  position       : relative;
  display        : flex;
  justify-content: space-between;
}
.problem_search_btn_wrap:before {
  content                  : "";
  display                  : inline-block;
  width                    : 21px;
  height                   : 100%;
  background               : #FFBF1F;
  position                 : absolute;
  left                     : 0;
  border-top-left-radius   : 6px;
  border-bottom-left-radius: 6px;
  z-index                  : 10;
}
.search_btn_txtarea {
  font-size    : 1.8rem;
  width        : 100%;
  background   : #fff;
  padding      : 0 10px 0 35px;
  position     : relative;
  text-align   : left;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.search_btn_txtarea::placeholder {
  font-size: 1.8rem;
  color    : #D2D2D2;
}
.search_btn {
  width                     : 69px;
  height                    : 60px;
  background                : #FFBF1F;
  position                  : relative;
  border-top-right-radius   : 6px;
  border-bottom-right-radius: 6px;
  margin-left: -2px;
}
.search_btn::before {
  content        : "";
  width          : 100%;
  height         : 100%;
  display        : inline-block;
  background     : url(../assets/img/icon-search.svg) no-repeat center center;
  background-size: 50%;
}
@media screen and (max-width: 600px) {
  .problem_search {
    height: 54px;
    margin: 0 auto max(30px, 7%);
  }
  .search_btn {
    height: 54px;
  }
}
.problem {
  padding      : 20px 0 0;
  margin-bottom: 20px;
}
.problem_ttl {
  width    : 66.8%;
  min-width: 287px;
  margin   : 0 auto 20px;
}
.problem_items {
  margin: 0px auto 0;
}
@media screen and (max-width: 1024px) {
  .problem {
    padding      : 20px 0 0;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 600px) {
  .problem_items {
    margin: max(15px, 5%) auto 0;
  }
}
.playing {
  padding-top  : 20px;
  margin-bottom: 20px;
}
.playing_ttl {
  width        : 52%;
  max-width    : 322px;
  min-width    : 242px;
  margin-bottom: 20px;
}
.playing .date_area {
  background: #FF006F;
}
.playing_contents {
  position  : relative;
  transition: all .3s;
  width: 94%;
  margin: 0 auto;
}
.playing_contents.active {
  padding-bottom: 390px;
  transition    : all .3s;
}
.playing_box {
  font-size: clamp(1.3rem, 3.2vw, 1.8rem);
}
.playing_list {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: space-between;
  position       : relative;
  z-index        : 100;
}
.playing_list li {
  width     : 28%;
  width     : 48%;
  transition: all .3s;
  cursor    : pointer;
}
.playing_list li img:hover{
  opacity   : 0.7;
  transform: scale(1.02);
  transition: transform 0.2s ease;
}

.playing_list li img:active{
  opacity   : 0.7;
  transform : translateY(2px);
}

.playing_interest.active {
  margin-bottom: 140px;
  transition   : all .3s;
}
.age_btn.active {
  transition: all .3s;
}
.nr_btn.active {
  transition: all .3s;
}
.playing_list p {
  font-size  : clamp(1.4rem, 3.3vw, 2rem);
  color      : #514e4e;
  line-height: 1.45;
  text-align : center;
  padding    : 10px 0 24px;
}
.interest_box {
  width     : calc(100% - 26px);
  position  : absolute;
  left      : 13px;
  transition: all .1s;
  visibility: hidden;
  transform : scaleY(0);
}
.interest_box.active {
  width     : calc(100% - 26px);
  position  : absolute;
  left      : 13px;
  visibility: visible;
  transition: all .1s;
  transform : scaleY(1);
  z-index   : 1000;
}
.interest_sch_btn_wrap {
  max-width      : 840px;
  height         : 100%;
  position       : relative;
  display        : flex;
  justify-content: space-between;
  box-shadow     : 1px 3px 10px lightgrey;
  border-radius  : 6px;
}
.interest_sch_btn_wrap:before {
  content                  : "";
  display                  : inline-block;
  width                    : 15px;
  height                   : 100%;
  background               : orange;
  position                 : absolute;
  left                     : 0;
  border-top-left-radius   : 6px;
  border-bottom-left-radius: 6px;
}
.interest_sch_btn_txtarea {
  width        : 100%;
  padding      : 0 10px 0 25px;
  background   : #fff;
  color        : #2f2f2f;
  border-radius: 6px;
}
@media screen and (max-width: 1024px) {
  .playing {
    padding      : max(20px, 3%) 0 max(18px, 3%);
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 600px) {
  .playing_list p {
    padding: 10px 0 15px;
  }
}
.picture_book {
  padding-top: 20px;
}
.picture_book_ttl {
  width    : 60.5%;
  max-width: 378px;
  min-width: 251px;
}
.picture_book_sch_items {
  padding     : 2px 10px 0;
}
.picture_book_sch_list {
  color             : #2f2f2f;
  display           : flex;
  flex-wrap         : wrap;
  justify-content   : space-between;
}
.picture_book_sch_list li {
  width     : 100%;
  background: #fff;
  cursor    : pointer;
  border-top: 1px solid #D2D2D2;
}
.picture_book_sch_list li .ttl {
  font-size      : 2rem;
  letter-spacing : 0.05em;
  width          : 100%;
  display        : flex;
  justify-content: space-between;
  padding        : 20px 0;
}
.picture_book_sch_list li .ttl:after {
  content       : ">>";
  display       : inline-block;
  font-size     : 2rem;
  color         : #FF0070;
  margin-right: 10px;
}
.picture_book_sch_box {
  width    : 100%;
  font-size: 1.8rem;
  padding  : 10px 0 10px;
  display  : none;
}
.picture_book_sch_box dl dd:hover {
  background-color: #f8eccb;
}
.picture_book_sch_btn_wrap {
  max-width         : 650px;
  height            : 100%;
  position          : relative;
  display           : flex;
  justify-content   : space-between;
  box-shadow        : 1px 3px 10px lightgrey;
}
.picture_book_sch_btn_wrap:before {
  content                  : "";
  display                  : inline-block;
  width                    : 15px;
  height                   : 100%;
  background               : orange;
  position                 : absolute;
  left                     : 0;
  border-top-left-radius   : 6px;
  border-bottom-left-radius: 6px;
}
.picture_book_sch_btn_txtarea {
  width     : 100%;
  padding   : 0 10px 0 25px;
  background: #fff;
  color     : #2f2f2f;
}
.keywords_sch_btn_area {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: space-between;
  gap            : 10px 2.6%;
  margin-top     : 25px;
  padding        : 0 10PX;
}
.keywords_btn_sticky {
  width      : 48%;
  font-size    : 1.6rem;
  color        : #373636;
  background   : #fff;
  border: 1px solid;
  border-radius: 20px;
  border-color: #acacac;
  padding      : 10px 20px;
  margin-bottom: 5px;
  box-shadow   : 0px 2px 2px rgba(0, 0, 0, 0.15);
  cursor       : pointer;
  display      : flex;
  align-items  : center;
  justify-content: center; 
}
.keywords_btn_sticky:active {
  box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
  transform : translateY(2px);
}
.picture_book_sch_box dl dd {
  font-size         : 1.8rem;
  padding           : 15px 0;
  background        : #fff;
  display           : flex;
  justify-content   : space-between;
  border-top        : 2px solid #F8F8EA;
}
.picture_book_sch_box dl dd:last-child {
  border-bottom: 2px solid #F8F8EA;
}
.picture_book_sch_box dl dd:after {
  content       : ">>";
  display       : inline-block;
  font-size     : 2rem;
  color         : #FFBF1F;
  margin-left   : auto;
  margin-right: 5px;
}
.picture_book .btn_org {
  border-radius: 8px;
  margin       : 50px auto 0;
}
.picture_book_slider {
  background: #FAE6AC;
  padding   : 45px 19px 30px;
  position  : relative;
  z-index   : 10;
}
.picture_book .swiper-container {
  padding-bottom: 10px !important;
}
.picture_book .swiper-slide {
  border-radius: 5px !important;
  padding      : 0px;
}
.picture_book .swiper-slide img {
  border-top-left-radius : 5px !important;
  border-top-right-radius: 5px !important;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.picture_book .slide_txtarea {
  display                      : flex;
  gap                          : 15px;
  background                   : #fff;
  padding                      : 10px 15px;
  box-shadow                   : 0px 5px 4px 0px rgb(0 0 0 / 10%);
  border-bottom-left-radius    : 5px;
  border-bottom-right-radius   : 5px;
  height: 8rem;
}
.picture_book .date_area {
  font-size      : 1.2rem;
  color          : #fff;
  width          : 50px;
  min-width      : 50px;
  height         : 50px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : #FFBF1F;
  border-radius  : 5px;
}
.picture_book .slide_txt_books {
  font-size  : 1.2rem;
  color      : #514e4e;
  line-height: 1.3;
  width      : calc(100% - 50px);
}
.picture_book .pagenation_wrap {
  display        : flex;
  justify-content: center;
  align-items    : center;
  margin-top     : 40px;
}
.picture_book .swiper-pagination {
  position: relative;
  top     : -10px;
  margin  : 0 15px;
  display : flex;
  gap     : 15px;
}
.picture_book .swiper-button-prev {
  width          : 40px !important;
  height         : 40px !important;
  background     : url(../assets/img/slide-prev-org.png) no-repeat !important;
  background-size: cover !important;
  position       : static !important;
}
.picture_book .swiper-button-next {
  width          : 40px !important;
  height         : 40px !important;
  background     : url(../assets/img/slide-next-org.png) no-repeat !important;
  background-size: cover !important;
  position       : static !important;
}
.swiper-pagination-bullet-active {
  background: #767474 !important;
}
@media screen and (max-width: 1024px) {
  .picture_book {
    padding-top: max(15px, 3%);
  }
}

button a {
  display: block;  
  font-size: 0.75rem;
  text-align: center;
  color: #fff;
  background-color: #666666;
  border-color: #666666;
  padding: 0.8rem 2.5rem;
  border-radius: 0.100rem;
}
button a:hover {
  color: #fff;
  background-color: #313131;
  border-color: #313131;
  text-decoration: none;
}
.picture_book .btn_org {
  margin-right: auto;
  position    : relative;
  top         : 10px;
  z-index     : 100;
}

.bottom__nav a img:hover {
  transform: rotateY(-180deg);
  transition: .3s;
}
@media screen and (min-width: 1024px) {
  .bottom_arrow {
    display:none;
}
}
.switch_age_level{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  }


.problem_part{
  width: 100%;
  margin:30px 0px 10px;
}
.date_ttl {
  font-weight: 500;
  display    : flex;
  align-items: center;
  min-width  : 106px;
  font-size: 1.6rem;
  color: #514e4e;
}


.problem_contents {
  position  : relative;
  transition: all .3s;
  width: 96%;
  margin: 0 auto;
}
.problem_contents.active {
  padding-bottom: 390px;
  transition    : all .3s;
}
.problem_box,
.problem_select_box {
  font-size: clamp(1.3rem, 3.2vw, 1.8rem);
}
.problem_list {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: space-between;
  position       : relative;
  z-index        : 100;
}
.problem_list li {
  width     : 48%;
  transition: all .3s;
  cursor    : pointer;
}
.problem_list p {
  font-size  : clamp(1.6rem, 3.3vw, 2rem);
  color      : #514e4e;
  line-height: 1.45;
  text-align : center;
  padding    : 5px 0 15px;
  font-weight: bold;
}
.child_concentrate_ttl {
  font-size  : clamp(1.6rem, 3vw, 1.8rem);
  font-weight: 500;
  padding    : 15px 0px;
  background : #FFF;
  display    : inline-block;
  border-left: 15px solid #FF006F;
  display    : flex;
  align-items: center;
  box-shadow   : 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
  color: #514e4e;
  height: 60px;
  width    : 96%;
  margin: 0 auto;
  min-width: 250px;
  left     : 2.5%;
  cursor: pointer;
  }
.child_concentrate_ttl::before {
  content        : "";
  display        : inline-block;
  width          : 40px;
  height         : 44px;
  background     : url(../assets/img/under/concentrate.svg) no-repeat;
  background-size: 100%;
  margin         : 0 15px;
}
.child_violence_ttl {
  font-size  : clamp(1.6rem, 3vw, 1.8rem);
  font-weight: 500;
  padding    : 15px 0px;
  background : #FFF;
  display    : inline-block;
  border-left: 15px solid #EC7820;
  display    : flex;
  align-items: center;
  box-shadow   : 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
  color: #514e4e;
  height: 60px;
  width    : 96%;
  margin: 0 auto;
  min-width: 250px;
  left     : 2.5%;
  cursor: pointer;
}
.child_violence_ttl::before {
  content        : "";
  display        : inline-block;
  width          : 40px;
  height         : 44px;
  background     : url(../assets/img/under/violence.svg) no-repeat;
  background-size: 100%;
  margin         : 0 15px;
}
.child_emotion_ttl {
  font-size  : clamp(1.6rem, 3vw, 1.8rem);
  font-weight: 500;
  padding    : 15px 0px;
  background : #FFF;
  display    : inline-block;
  border-left: 15px solid #FFBF1F;
  display    : flex;
  align-items: center;
  box-shadow   : 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
  color: #514e4e;
  height: 60px;
  width    : 96%;
  margin: 0 auto;
  min-width: 250px;
  left     : 2.5%;
  cursor: pointer;
}
.child_emotion_ttl::before {
  content        : "";
  display        : inline-block;
  width          : 40px;
  height         : 44px;
  background     : url(../assets/img/under/emotion.svg) no-repeat;
  background-size: 100%;
  margin         : 0 15px;
}
.child_management_ttl {
  font-size  : clamp(1.6rem, 3vw, 1.8rem);
  font-weight: 500;
  padding    : 15px 0px;
  background : #FFF;
  display    : inline-block;
  border-left: 15px solid #30B72B;
  display    : flex;
  align-items: center;
  box-shadow   : 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
  color: #514e4e;
  height: 60px;
  width    : 96%;
  margin: 0 auto;
  min-width: 250px;
  left     : 2.5%;
  cursor: pointer;
}
.child_management_ttl::before {
  content        : "";
  display        : inline-block;
  width          : 40px;
  height         : 44px;
  background     : url(../assets/img/under/management.svg) no-repeat;
  background-size: 100%;
  margin         : 0 15px;
}
.child_learning_ttl {
  font-size  : clamp(1.6rem, 3vw, 1.8rem);
  font-weight: 500;
  padding    : 15px 0px;
  background : #FFF;
  display    : inline-block;
  border-left: 15px solid #0D9BB2;
  display    : flex;
  align-items: center;
  box-shadow   : 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
  color: #514e4e;
  height: 60px;
  width    : 96%;
  margin: 0 auto;
  min-width: 250px;
  left     : 2.5%;
  cursor: pointer;
}
.child_learning_ttl::before {
  content        : "";
  display        : inline-block;
  width          : 40px;
  height         : 44px;
  background     : url(../assets/img/under/learning.svg) no-repeat;
  background-size: 100%;
  margin         : 0 15px;
}
.child_language_ttl {
  font-size  : clamp(1.6rem, 3vw, 1.8rem);
  font-weight: 500;
  padding    : 15px 0px;
  background : #FFF;
  display    : inline-block;
  border-left: 15px solid #1751A9;
  display    : flex;
  align-items: center;
  box-shadow   : 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
  color: #514e4e;
  height: 60px;
  width    : 96%;
  margin: 0 auto;
  min-width: 250px;
  left     : 2.5%;
  cursor: pointer;
}
.child_language_ttl::before {
  content        : "";
  display        : inline-block;
  width          : 40px;
  height         : 44px;
  background     : url(../assets/img/under/language.svg) no-repeat;
  background-size: 100%;
  margin         : 0 15px;
}
.child_friend_ttl {
  font-size  : clamp(1.6rem, 3vw, 1.8rem);
  font-weight: 500;
  padding    : 15px 0px;
  background : #FFF;
  display    : inline-block;
  border-left: 15px solid #7010C4;
  display    : flex;
  align-items: center;
  box-shadow   : 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
  color: #514e4e;
  height: 60px;
  width    : 96%;
  margin: 0 auto;
  min-width: 250px;
  left     : 2.5%;
  cursor: pointer;
}
.child_friend_ttl::before {
  content        : "";
  display        : inline-block;
  width          : 40px;
  height         : 44px;
  background     : url(../assets/img/under/friend.svg) no-repeat;
  background-size: 100%;
  margin         : 0 15px;
}
.child_body_ttl {
  font-size  : clamp(1.6rem, 3vw, 1.8rem);
  font-weight: 500;
  padding    : 15px 0px;
  background : #FFF;
  display    : inline-block;
  border-left: 15px solid #050404;
  display    : flex;
  align-items: center;
  box-shadow   : 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
  color: #514e4e;
  height: 60px;
  width    : 96%;
  margin: 0 auto;
  min-width: 250px;
  left     : 2.5%;
  cursor: pointer;
}
.child_body_ttl::before {
  content        : "";
  display        : inline-block;
  width          : 40px;
  height         : 44px;
  background     : url(../assets/img/under/body.svg) no-repeat;
  background-size: 100%;
  margin         : 0 15px;
}

.p-game_top_date_keyword {
  display        : flex;
  align-items    : flex-start;
  justify-content: space-between;
}
.p-game_top_date_keyword_item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width          : 100%;
  margin-bottom  : 20px;
  margin-left: auto;
  margin-right: auto;
  gap: 5px;
}
.p-game_top_date_keyword_item::after,
.p-game_top_date_keyword_item::before {
  content: "";
  display: block;
  height : 0;
}
.p-game_top_date_keyword_item::before {
  order: 1;
}
/* チップ本体 */
.p-game_top_date_keyword_item li a{
  /* 文字 */
  font-size: 1.45rem;
  font-weight: 800;
  color: #222;

  /* レイアウト */
  width: 100%;
  min-height: 30px;             /* 押しやすさ */
  height: auto;                 /* 固定高さをやめる */
  padding: 7px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;

  /* 長文対策（2行までOK） */
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;

  /* 見た目（黄色テーマ） */
  background: #fff;
  border: 2px solid rgba(255,191,31,0.35);
  box-shadow: 0 10px 18px rgba(0,0,0,0.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;

  text-decoration: none;
}

/* # 表現を控えめに（ピンク強すぎ問題を解消） */
.p-game_top_date_keyword_item li a::before{
  content: "#";
  font-size: 10px;
  margin-right: 8px;
  color: rgba(255,191,31,0.95); /* 黄色 */
  transform: translateY(-1px);
}

/* hover：濃淡＋浮き */
.p-game_top_date_keyword_item li a:hover{
  transform: translateY(-1px);
  border-color: rgba(255,191,31,0.60);
  background: rgba(255,191,31,0.10);
  box-shadow: 0 14px 22px rgba(0,0,0,0.08);
}

/* active：押し込み */
.p-game_top_date_keyword_item li a:active{
  transform: translateY(0);
  box-shadow: 0 8px 14px rgba(0,0,0,0.06);
}

/* キーボードフォーカス */
.p-game_top_date_keyword_item li a:focus-visible{
  outline: 3px solid rgba(255,191,31,0.55);
  outline-offset: 3px;
}

.keyword_select_box {
  transition : all .3s;
  visibility : hidden;
  z-index    : -1;
  opacity    : 0;
  position   : absolute;
  width      : 90%;
  margin: 20px auto;
  max-width  : 650px;
  margin-left: 0;
  transform  : translatey(-10%);
}
.keyword_select_box.active {
  visibility: visible;
  transition: all .3s;
  z-index   : 10;
  opacity   : 1;
  width     : 90%;
  margin: 20px auto;
  max-width : 650px;
  transform : translateY(0);
  position  : static;
}
@media screen and (max-width: 1024px) {
  .keyword_select_box,
  .keyword_select_box.active {
    max-width: 1024px;
  }
}

.top4_button {
  box-shadow   : 3px 3px 3px lightgrey;
  border-radius: 3%;
}
.top4_button:hover {
  opacity   : 0.7;
  transform: scale(1.02);
  transition: transform 0.2s ease;
}
.top4_button:active {
  opacity   : 0.7;
  transform : translateY(2px);
}
.problem_select_box{
  width: 45%;
  margin: auto 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100px;
  border-radius: 10px;
  box-shadow   : 3px 3px 3px lightgrey;
  cursor: pointer;
}
.problem_select_box:hover {
  opacity   : 0.7;
}
.problem_select_box:active {
  opacity   : 0.7;
  transform : translateY(2px);
}

input[type="checkbox"] {
  display: none;
}
label {
  color: #7e7e7e;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  border: solid 1px #d2d2d2;
  transition: 0.25s;
  padding: 8px 15px;
  cursor: pointer;
  font-size: 1.4rem;
  margin: 0px;
}
input[type="checkbox"]:checked + label {
  background: #7e7e7e;
  color: #fff;
}

/* 改善案C：シーン別カード */
.main__nav.navC {
  background: #fff;
}

.navC__list{
  list-style:none;
  padding:0;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  width: 90%;
}

/* 1枚のカード */
.navC__link{
  display:flex;
  align-items:center;
  gap:14px;

  padding:14px 16px;
  border-radius:16px;

  background:#fff;
  border: 2px solid rgba(255, 191, 31, 0.35); /* ←黄色ボーダー */
  box-shadow: 0 10px 22px rgba(0,0,0,.06);

  text-decoration:none;
  color:#222;
  position:relative;

  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.navC__link:hover{
  transform:translateY(-1px);
  border-color: rgba(255, 191, 31, 0.55);
  box-shadow: 0 14px 26px rgba(0,0,0,.08);
}

.navC__link:active{
  transform:translateY(0);
}

/* 左の丸いアイコン背景（薄い色） */
.navC__icon{
  width:62px;
  height:62px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255, 191, 31, 0.22);
  flex:0 0 auto;
  overflow:hidden;
}

.navC__icon img{
  width:42px;
  height:42px;
  object-fit:contain;
  display:block;
}

/* テキスト */
.navC__text{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0; /* 省略表示のため */
}

.navC__title{
  font-size:1.8rem;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.navC__sub{
  font-size:1.3rem;
  color:rgba(0,0,0,.60);
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 右矢印 */
.navC__arrow{
  margin-left:auto;
  font-size:2.4rem;
  line-height:1;
  color:rgba(0,0,0,.35);
  padding-left:10px;
}

/* フォーカス（キーボード操作） */
.navC__link:focus-visible{
  outline:3px solid rgba(255,191,31,.55);
  outline-offset:3px;
}

/* スマホ微調整 */
@media (max-width: 600px){
  .navC__link{
    padding:12px 14px;
    border-radius:14px;
  }
  .navC__icon{
    width:56px;
    height:56px;
  }
  .navC__icon img{
    width:38px;
    height:38px;
  }
  .navC__title{
    font-size:1.7rem;
  }
  .navC__sub{
    font-size:1.2rem;
  }
}



/* セクション見出し（ボタンに見えない版） */
.secHead{
  width:96%;
  margin: 18px auto 14px;

  display:flex;
  align-items:center;
  gap:12px;

  padding: 6px 0 10px;
  border-bottom: 3px solid rgba(255,191,31,0.55); /* 黄色下線 */
}

/* 丸いアイコン背景だけ付ける */
.secHead__icon{
  width:52px;
  height:52px;
  border-radius:999px;
  background: rgba(255,191,31,0.22);

  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.secHead__icon img{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
}

.secHead__title{
  margin:0;
  font-size:2.2rem;
  font-weight:900;
  color:#222;
  line-height:1.2;
}

/* スマホ */
@media (max-width:600px){
  .secHead{
    margin: 14px auto 10px;
    border-bottom-width: 2px;
  }
  .secHead__icon{
    width:46px;
    height:46px;
  }
  .secHead__icon img{
    width:30px;
    height:30px;
  }
  .secHead__title{
    font-size:2.0rem;
  }
}

/* 2ボタン全体 */
.problemSelect{
  width: min(960px, 96%);
  margin: 26px auto 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* ボタン本体（カード風） */
.problemSelect__btn{
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;

  padding: 18px 18px;
  border-radius: 16px;
  text-decoration: none;
  color: #1f1f1f;

  /* “押せる”質感 */
  background: #fff;
  border: 2px solid rgba(255,191,31,0.35); /* 黄色っぽい枠 */
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* 左アイコン */
.problemSelect__icon{
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,191,31,0.20);
  font-size: 22px;
}

/* ラベル */
.problemSelect__label{
  font-size: clamp(1.6rem, 2.3vw, 2.0rem);
  font-weight: 900;
  line-height: 1.2;
}

/* 例の補足（小さめ） */
.problemSelect__hint{
  grid-column: 2 / 3;
  font-size: 1.2rem;
  color: rgba(0,0,0,0.55);
  line-height: 1.3;
}

/* 右矢印 */
.problemSelect__arrow{
  grid-column: 3 / 4;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 2.6rem;
  color: rgba(0,0,0,0.35);
}

/* hover / active */
.problemSelect__btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,191,31,0.60);
  box-shadow: 0 14px 28px rgba(0,0,0,0.10);
}
.problemSelect__btn:active{
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

/* キーボード操作のフォーカス */
.problemSelect__btn:focus-visible{
  outline: 3px solid rgba(255,191,31,0.55);
  outline-offset: 3px;
}

/* それぞれの“薄い色味”で識別（ベタ塗りにしない） */
.problemSelect__btn.is-scene{
  background: linear-gradient(0deg, rgba(70,157,65,0.08), rgba(70,157,65,0.08)), #fff;
}
.problemSelect__btn.is-problem{
  background: linear-gradient(0deg, rgba(76,108,165,0.10), rgba(76,108,165,0.10)), #fff;
}

/* SPは縦並びに */
@media (max-width: 600px){
  .problemSelect{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .problemSelect__btn{
    padding: 16px 14px;
    border-radius: 14px;
  }
  .problemSelect__hint{
    font-size: 1.15rem;
  }
}

.podcast-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  margin: 0px auto 40px;
  width: 90%;
}

/* カード（aタグ） */
.podcast-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;

  background: #fff;
  border-radius: 20px;
  padding: 24px 20px 28px;
  max-width: 420px;
  width: 100%;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  margin-left: auto;
  margin-right: auto;
}

/* カード全体ホバー */
.podcast-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

/* 画像エリア（上・中央） */
.podcast-image {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* 画像 */
.podcast-image img {
  width: 300px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  box-shadow: 5px 5px 5px rgb(166, 166, 166);
}

/* タイトル */
.podcast-card h3 {
  font-size: 18px;
  text-align: center;
  margin: 0 0 14px;
  line-height: 1.5;
  font-weight: bold;
}

/* 説明文 */
.podcast-card p {
  font-size: 14px;
  color: #555;
  text-align: left;
  line-height: 1.7;
}

/* =========================
   レスポンシブ（スマホ）
========================= */
@media (max-width: 768px) {
  .podcast-list {
    flex-direction: column;
    gap: 24px;
  }

  .podcast-card {
    padding: 20px 16px 24px;
    margin: 0 auto;
  }

  .podcast-image img {
    width: 300px;
  }
}


@media (max-width: 350px) {
.podcast-card p {
  font-size: 10px;
}
}


.footer {
  background: #FFBF1F;
}

.f_container {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 136rem;
  margin: 0 auto;
  padding: 40px 40px 30px;
}

.f_logo {
  width: 120px;
  flex: 0 0 auto;
}
.f_logo_link img{
  width: 72px;
  height: 72px;
  border-radius: 12px;
}

.f_nav { flex: 1; }

.f_grid{
  display: grid;
  grid-template-columns: 0.8fr 1.6fr 1fr;
  gap: 26px;
}

.f_section{
  background: rgba(255,255,255,0.35);
  border-radius: 14px;
  padding: 14px 14px 16px;
}

.f_title{
  font-size: 1.6rem;
  font-weight: 800;
  color: #111;
  margin-bottom: 10px;
}

.f_subtitle{
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 1.3rem;
  font-weight: 800;
  color: #222;
  opacity: .9;
}

.f_list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.f_list a{
  color: #111;
  text-decoration: none;
  font-size: 1.45rem;
  line-height: 1.4;
}
.f_list a:hover{
  text-decoration: underline;
}

.f_primary_link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.65);
  color: #111;
  text-decoration: none;
  font-weight: 800;
  margin-bottom: 14px;
  font-size: 1rem;
}
.f_primary_link:hover{ filter: brightness(0.98); }

.f_cta{
  display: block;
  text-decoration: none;
  color: #fff;
  font-weight: 900;
  line-height: 1.3;
  padding: 14px 14px;
  border-radius: 14px;
  background: #111;
}
.f_cta:hover{ filter: brightness(1.05); }

.pref-block{ margin-top: 12px; }
.pref-title{
  font-size: 1.25rem;
  font-weight: 900;
  color: #111;
  margin-bottom: 8px;
}

.pref-grid{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.pref-grid a{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  background: #7478C2; /* デフォルト色 */
}
.pref-grid a:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* 地方ごとに色を変えたい場合（任意） */
.pref-block:nth-of-type(2) .pref-grid a{ background:#33BEC8; } /* 関東 */
.pref-block:nth-of-type(3) .pref-grid a{ background:#2BB673; } /* 中部 */
.pref-block:nth-of-type(4) .pref-grid a{ background:#AFB62D; } /* 近畿 */
.pref-block:nth-of-type(5) .pref-grid a{ background:#F09E27; } /* 中国 */
.pref-block:nth-of-type(6) .pref-grid a{ background:#D08F68; } /* 四国 */
.pref-block:nth-of-type(7) .pref-grid a{ background:#FF8383; } /* 九州沖縄 */

.copyright {
  height: 50px;
  background: #151515;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
  .f_container { padding: 40px 24px 40px; }
  .f_grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 768px) {
  .f_logo { width: 72px; }
  .f_logo_link img{ width:60px; height:60px; }

  .pref-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}




/*Written by Hajime End*/