/* ====================================================================
   featurePage.css
   （コラム内リストを .page-article__list 内に限定適用、
    既存スタイルはそのまま残し、末尾に追記）
   ==================================================================== */

/* H1 */
h1 {
  font-size: 2.6rem;
  font-weight: 800;
  color: #1C3040;
  line-height: 1.4;
  letter-spacing: 0.03em;
  margin: 2.5em 0 1.5em;
}

/* H2 */
h2 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #1C3040;
  background-color: #E6F7FB;
  border-left: 4px solid #00AEEF;
  padding: 1em 1em;
  margin: 1.8em 0 1em;
  line-height: 1.6;
  letter-spacing: 0.03em;
  border-radius: 6px;
}

nav h2 {
  all: unset;  
  display: block;  
 font-size: 2.3rem;
  font-weight: 700;
  color: #1C3040;
  border-left: 6px solid #00AEEF;
  padding-left: 0.8em;
  margin:1em 0 1em;
  line-height: 1.0;
  letter-spacing: 0.02em;
}

/* H3 */
h3 {
      font-size: 2.0rem;
  font-weight: 600;
  color: #1C3040;
  border-left: 6px solid #00AEEF;
  padding-left: 0.8em;
  margin: 1em 0 1em;
  line-height: 1.5;
  letter-spacing: 0.02em;

}

/* H4 */
h4 {
  font-size: 1.9rem;
  font-weight: 600;
  color: #1C3040;
  position: relative;
  padding-left: 1.4em;
  margin: 1.5em 0 0.5em;
  line-height: 1.6;
  letter-spacing: 0.01em;
}
h4::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0.1em;
  color: #00AEEF;
  font-size: 0.9em;
}

/* H5 */
h5 {
  font-size: 1.7rem;
  font-weight: 600;
  color: #1C3040;
  border-bottom: 1px dotted #A0CFA5;
  padding-bottom: 0.3em;
  margin: 1.2em 0 0.6em;
  letter-spacing: 0.01em;
}

/* H6 */
h6 {
  font-size: 1.5rem;
  font-style: italic;
  color: #7A8B99;
  margin: 0.8em 0 0.4em;
  line-height: 1.5;
}

/* marker-green */
.marker-green {
  background: #FFB74D;
  font-weight: bold;
  display: inline;
}

/* marker-pink */
.marker-pink {
  background: #B3E5FC;
  display: inline;
}

/* blockquote */
blockquote {
  quotes: "‟" "„";
  max-width: 85%;
  margin: 2em auto;
  border: 1px solid #696969;
  padding: 1.8em 1.5em;
  font-style: italic;
  color: #4682b4;
  line-height: 1.8;
  position: relative;
  border-radius: 6px;
  padding-left: 5em;
}
a:hover,
a:focus {
  color: #00bfff;           
}
blockquote::before {
  content: "‟";
  font-size: 4rem;
  color: #696969;
  position: absolute;
  top: -0.4em;
  left: 0.8em;
}
blockquote::after {
  content: "„";
  font-size: 4rem;
  color: #696969;
  position: absolute;
  bottom: -0.4em;
  right: 0.8em;
}
@media screen and (max-width: 767px) {
  blockquote {
    max-width: 100%;
    margin: 2em auto 1em;
    padding: 1.5em 1.2em;
  }
}

/* underline */
u {
  text-decoration: underline;
  text-decoration-color: #7CBF88;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1.5px;
  font-weight: 600;
  color: #1C3040;
}

/* テーブル表 */
figure.table table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  border: 1px solid #666;
}
figure.table th {
  padding: 0.8em 1em;
  text-align: left;
  border: 1px solid #666;
  background-color: #E6F7FB;
  color: #1C3040;
}
figure.table td {
  padding: 0.8em 1em;
  border: 1px solid #666;
  background-color: #fff;
  color: #1C3040;
}

/* 合わせて読みたい */
.c-relatedColumn {
  background-color: #fff;
  border-radius: 15px;
  border: 2px solid #358ceb;
  position: relative;
  padding: 42px 10px 15px;
  max-width: 530px;
  margin: 25px auto 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
/* …（以降オリジナルの .c-relatedColumn 以降のルールも同様に続きます）… */

/* 末尾に、記事中リスト専用スタイルを追加 */
.page-article__list ul,
.page-article__list ol {
  margin: 1.5em 0 1.5em 1.5em;
  padding: 0;
  color: #1C3040;
  line-height: 1.7;
  list-style-position: inside;
}
.page-article__list ul li {
  list-style: none;
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.6em;
}
.page-article__list ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #00AEEF;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1;
}
.page-article__list ol {
  list-style: decimal inside !important;
}
.page-article__list ol li {
  display: list-item !important;
  margin-bottom: 0.6em;
}
/*=================*/
.container-wrap__feature .m-formHeading-head{
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}
.container-wrap__feature .p-featureListHeading-head__nav{
    position: absolute;
    left: 5px;
    top: 20px;
}
.container-wrap__feature .c-form-title{
    margin-top: 0;
}
.container-wrap__feature .p-featureListCnt{
    display: flex;
    font-size: 12px;
}
.container-wrap__feature .p-featureListCnt__cnt{
    margin-left: 14px;
}
.container-wrap__feature .m-featureListLine{
    display: flex;
    justify-content: center;
    margin-left: -15px;
    margin-right: -15px;
    flex-wrap: wrap;
}
.container-wrap__feature .m-featureListLine__item{
    max-width: 25%;
    flex: 0 0 25%;
    padding: 0 15px;
    margin-bottom: 25px;
}

.container-wrap__feature .m-formHeading-body__tagList{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border-bottom: 1px solid #ececec;
    margin-bottom: 25px;
}
.container-wrap__feature .m-formHeading-body__tagList li{
    max-width: 220px;
    flex: 0 0 220px;
    text-align: center;
    margin: 0 8px;
}
.m-formHeading-body__tagList li a{
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    height: 56px;
    font-size: 18px;
    font-weight: 600;
    position: relative;
    padding: 7px 12px 0;
    bottom: -1px;
    line-height: 1.3;
    background-color: #ffffff;
    border-top: 1px solid #ececec;
    border-left: 1px solid #ececec;
    border-right: 1px solid #ececec;
}
.container-wrap__feature .c-pager__next,
.container-wrap__feature .p-featureListHeadPager,
.container-wrap__feature .c-pager__prev{
    display: none;
}
.container-wrap__feature .c-feature-head__picture img{
    max-height: 220px;
    object-fit: cover;
    width: 100%;
}
.container-wrap__feature .c-feature-body__title h3{
    background-color: transparent;
    border-left: none;
    padding: 0;
    margin: 8px 0 0;
}

#s-featureContent .c-relatedColumn__label{
    position: absolute;
    top: 0;
    left: -2px;
    border-radius: 20px;
    background-color: #358ceb;
    color: #fff;
    padding: 5px 15px;
    font-size: 14px;
}
#s-featureContent .c-relatedColumn__thumb{
    flex: 0 0 47%;
    max-width: 47%;
}
#s-featureContent .c-relatedColumn__body{
    flex: 0 0 53%;
    max-width: 53%;
    padding-left: 8px;
}
#s-featureContent .c-relatedColumn__title{
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
#s-featureContent .c-relatedColumn__body p{
    margin-bottom: 10px;
}
#s-featureContent .c-relatedColumn__body p:has(.c-relatedColumn__button){
    margin-top: 6px;
    margin-bottom: 0;
    text-align: right;
}
#s-featureContent .c-relatedColumn__button{
    display: inline-block;
    border: 1px solid #358ceb;
    padding: 0 8px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
}
.m-featureSide{
    justify-content: center;
}
.container_feature_detail,
.container_feature_list ~ .container-wrap__feature .l-container-fluid-md .s-formContent-head,
.container_feature_list ~ .container-wrap__feature .l-container-fluid-md .s-formContent-body,
.container_feature_list ~ .container-wrap__feature .m-formHeading-head{
    display: none;
}

.container_feature_list ~ .container-wrap__feature{
    position: relative;
}
.container_feature_list ~ .container-wrap__feature .m-breadcrumb{
    position: absolute;
    top: -388px;
}
@media (max-width: 1024px) {
    .container-wrap__feature .m-featureListLine__item{
        max-width: 33.3333%;
        flex: 0 0 33.3333%;
    }
}
@media (max-width: 991px) {
    .container_feature_list ~ .container-wrap__feature{
        position: initial;
    }
    .container_feature_list ~ .container-wrap__feature .m-breadcrumb{
        top: 68px;
    }
}
@media (max-width: 767px) {
    .container-wrap__feature .m-breadcrumb{
        margin-top: 1.3rem;
        max-width: 100%;
    }
    .container-wrap__feature .s-formContent-body{
        padding: 0 15px;
    }
    .container-wrap__feature .m-featureListLine__item{
        max-width: 50%;
        flex: 0 0 50%;
    }
}
@media (max-width: 575px) {
    .m-breadcrumb{
        margin-top: 1.3rem;
        margin-bottom: 1.3rem;
    }
    .container-wrap__feature .m-featureListLine__item{
        max-width: 100%;
        flex: 0 0 100%;
    }
    .container-wrap__feature .m-formHeading-body__tagList li {
        max-width: 170px;
        flex: 0 0 170px;
    }
    .container-wrap__feature .c-form-title{
        text-align: center;
    }
    .m-formHeading-body__tagList li a{
        font-size: 13px;
        height: 40px;
        border-radius: 6px 6px 0 0;
    }
    .m-formHeading-body--border-md-none{
        border-bottom: 0;
        padding-bottom: 8px;
    }
    .m-featureSide{
        margin-left: -15px;
        margin-right: -15px;
    }
    .m-featureSide-container{
        flex: 1 auto;
    }
}
@media (max-width: 480px) {
    #s-featureContent .c-relatedColumn{
        padding-top: 25px;
    }
    #s-featureContent .c-relatedColumn__label{
        max-width: 180px;
        width: 100%;
        text-align: center;
        top: -15px;
        border-radius: 16px;
        padding: 3px 12px;
        font-size: 13px;
    }
    #s-featureContent .c-relatedColumn__excerpt{
        display: none;
    }
    #s-featureContent .c-relatedColumn__title{
        font-size: 15px;
        -webkit-line-clamp: 4;
    }
}