html{
	scroll-padding-top: 150px;
}

p, h1, h2{
    color: #333;
}

/*ヘッダー*/
header {
    position: fixed;
    height: auto;
    border-bottom: solid 3px #c84860;
    border-bottom: solid 3px #c84860;
    box-sizing: border-box;
}
header::before {
    width: 100%;
    height: 10px;
    content: "";
    display: block;
    background: #c84860;
}
.header-container {
    max-width: 1220px;
    margin: auto;
    padding: 13px;
	padding-bottom: 7px;
}


/* グローバルナビ全体 */
nav.pc-nav .nav-list {
	--nav-gap: 180px;  /* 必要に応じて調整 */
	display: flex;
	justify-content: center;  /* 中央寄せにしてgapで間隔をコントロール */
	gap: var(--nav-gap);  /* アイテム間隔 */
	padding-top: 25px;	
	font-size: 18px;
	font-weight: bold;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

/* 各項目 li */
nav.pc-nav .nav-list li {
	position: relative;  /* 疑似要素の基準にする */
	display: flex;
	align-items: center;  /* 文字を垂直方向に揃える */
	justify-content: center;
	height: 27px;
	padding: 0 0.1em;  /* 文字周りの余白（必要に応じて調整） */
}

/* 最後の項目以外に縦線を追加（中間） */
nav.pc-nav .nav-list li:not(:last-child)::after {
	content: "";
	position: absolute;
	/* liの右端からgapの半分だけ進んだ位置→両項目の中間 */
	left: calc(100% + (var(--nav-gap)/2));
	top: 12%;   /* 線の上下余白 */
	bottom: 12%;
	width: 2px;
	background-color:  #c84860;  /* 線の色 */
	transform: translateX(-50%); /* 念のため中央揃え */
}
/* リンク */
nav.pc-nav .nav-list li a {
	display: block;
	text-decoration: none;
	color: #333;
	translation: color .25s;
	padding: 0 0.1em;
}

nav.pc-nav .nav-list li a svg {
	width: 0.8em;
	height: 0.8em;
	vertical-align: middle;
	margin-left: 0.5em;
}

nav.pc-nav .nav-list li:hover a {
	color: #c84860; 
}
/* noリンク */
li.nolink a {
    pointer-events: none;
	color: #a8a8a8 !important;
}
.header-top {
    display: flex;
    align-items: center;
}

.ntt-logo {
    width: 120px;
    position: absolute;
    max-width: 20%;
}

.center-logo {
    text-align: center;
    margin: auto;
    max-width: 330px;
    width: 50%;
}

.input-hidden{
	display: none;
}
	/* label */
.hamburger-switch{
    cursor: pointer;
    position: absolute;
    right: 3%;
    top: 25px;
    z-index: 9999;
    width: 30px;
    height: 30px;
}
/* メニュー展開時にハンバーガーアイコンを固定 */
#hamburger-demo1:checked ~ .hamburger-switch{
	position: fixed;
}
/* ハンバーガーアイコン */
.hamburger-switch-line1, .hamburger-switch-line1:before, .hamburger-switch-line1:after{
	width: 25px;
	height: 3px;
	background: #333; /* ハンバーガーアイコンの色 */
	position: absolute;
	top: 50%;
	left: 50%;
	transition: .3s;
	content: "";
}
.hamburger-switch-line1{
		transform: translate(-50%, -50%);
}
.hamburger-switch-line1:before{
	transform: translate(-50%, -300%);
}
.hamburger-switch-line1:after{
	transform: translate(-50%, 200%);
}
/* ハンバーガーアイコン･アニメーション */
#hamburger-demo1:checked ~ .hamburger-switch .hamburger-switch-line1{
	width: 0;
}
#hamburger-demo1:checked ~ .hamburger-switch .hamburger-switch-line1:before{
	transform: rotate(45deg) translate(-40%, 325%);
}
#hamburger-demo1:checked ~ .hamburger-switch .hamburger-switch-line1:after{
	transform: rotate(-45deg) translate(-40%, -325%);
}
/* メニューエリア */
.hamburger-menuwrap{
	position: fixed;
	height: 100%;
	background: #fafafa; /* メニューエリアの背景色 */
	padding: 5em 3% 2em;
	z-index: 9998;
	transition: .3s;
	overflow-y: scroll; /* メニュー内容が多い場合に縦スクロールする */
	top: 0;
	left: 100%;
	width: 70%;
}
/* メニューリスト */
.hamburger-menulist{
	margin-right: 3%;
	padding-left: 5% !important; /* !important不要な場合もあり */
	list-style: none;
}
.hamburger-menulist li a{
	text-decoration: none;
	color: #333; /* メニューリストの文字色 */
	display: block;
	padding: .5em 0;
    font-size: 16px;
}
/* メニューエリア･アニメーション */
	/* 右から */
#hamburger-demo1:checked ~ .hamburger-menuwrap{
	left: 30%;
}
	/* コンテンツカバー */
#hamburger-demo1:checked ~ .hamburger-cover{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9997;
	background: rgba(3,3,3,.5);
	display: block;
}
/* PCではハンバーガーメニューを表示しない */
@media (max-width: 767px){
	.pc-nav{
		display: none;
	}
}
@media (min-width: 768px){
	.hamburger-menubox{
		display: none;
	}
}
/*トップページ_スライダー*/
.top-slick {
    height: fit-content;
    width: 90%;
    max-width: 2000px;
    margin: auto;
    display: flex;
}
.top-slick .slick-slide {
    position: relative;
}

.top-slick div img{
   width:100%;
   height:100%;
   object-fit: cover;
}
.slick-initialized .slick-slide {
    margin: 10px 30px;
    height:auto;
    box-shadow: 3px 3px 15px #80808052;
    aspect-ratio: 4 / 3;
}
.slick-initialized .slick-slide:hover {
    box-shadow: 3px 3px 3px #80808052;
}
/*トップページ_スライダー矢印*/
.slick-arrow {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 20px;
  height: 38px;
  color: transparent;
  z-index: 1;
  transition: opacity 0.5s;
  z-index: 1;
}
.slick-arrow:hover {
  opacity: 0.7;
}

.slick-next::before,
.slick-next::after,
.slick-prev::before,
.slick-prev::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
  color: transparent !important;
}
.slick-next::after,
.slick-prev::after {
  width: 26px;
  height: 26px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}
.top-slick p.date {
    text-align: right;
}
.top-slick .top-article-summary {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 30px 20px 15px;
    font-size: 18px;
    background: -webkit-linear-gradient(top, rgb(255 255 255 / 0%), rgb(255 255 255 / 80%) 25%, #FFF 100%);
}
.top-slick .top-article-summary .keyword, .top-slick .top-article-summary .date{
    font-size: 16px;
}
/* next */

.slick-next {
  right: -26px;
}
.slick-next::after {
  right: 4px;
  transform: rotate(45deg);
}

/* prev */

.slick-prev {
  left: -26px;
}
.slick-prev::after {
  left: 4px;
  transform: rotate(-135deg);
}

/*トップページ_トップメインビジュアル*/
.mainvisual {
    position: relative;
    padding: 50px 0;
    background: #fff;
}



/* =========================================
   TOP：記事2枚以下時の対応＝出し分け（PC=静的 / SP=slick）
   ========================================= */
.top-slick--slider { display: none; }
.top-static--pc { display: block; }

/* SP：slick表示、静的非表示 */
@media screen and (max-width: 767px){
  .top-slick--slider { display: block !important; }
  .top-static--pc    { display: none !important; }
}

/* =========================================
   TOP：PC 静的2枚（slickを使わない）
   ========================================= */
.mainvisual .top-static {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;

  display: flex;
  gap: 60px;
  align-items: stretch;
}

/* 1枚（カード） */
.mainvisual .top-static > .top-card {
  flex: 1 1 0;
  min-width: 0;

  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  box-shadow: 3px 3px 15px #80808052;
}

/* 画像 */
.mainvisual .top-static > .top-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* summary重ね（top-slickと見た目揃え） */
.mainvisual .top-static > .top-card .top-article-summary {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 30px 20px 15px;
  font-size: 18px;
  background: -webkit-linear-gradient(
    top,
    rgb(255 255 255 / 0%),
    rgb(255 255 255 / 80%) 25%,
    #fff 100%
  );
}

.mainvisual .top-static > .top-card .top-article-summary .keyword,
.mainvisual .top-static > .top-card .top-article-summary .date {
  font-size: 16px;
}

.mainvisual .top-static > .top-card p.date {
  text-align: right;
}




/*トップページ_メイン*/
span.EN {
    font-family: 'Agency FB';
    font-size: 42px;
    display: block;
    font-weight: bold;
}

.main {
    max-width: 1220px;
    margin: auto;
    padding: 0 10px;
}

.main h2 {
    font-size: 24px;
    margin: 60px auto 20px;
    text-align: center;
    width: fit-content;
    position: relative;
    font-weight: bold;
}
.main h2::before, .main h2::after {
    content: "";
    width: 100px;
    height: 2px;
    background: #c84860;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.main h2::before {
    left: -120px;
}
.main h2::after {
    right: -120px;
}
.article-list ul {
    display: flex;
    flex-wrap: wrap;
}
.article-list ul:has(> :nth-child(-n+3):last-child) {
    justify-content: center;
}
.article-list ul div {
    background-color: #fff;
    padding: 15px 20px 25px;
}

.article-list ul li {
    position: relative;
    width: calc( ( 100% - 66px ) / 3);
    margin: 15px 10px;
    max-width: 470px;
    border: 1px solid #d3d3d3;
    background: #fff;
}
.article-list ul li img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
p.title {
    font-weight: bold;
    line-height: 1.3em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height:2.6em;
    margin: 15px 0;
}


.article-list ul div p {
    line-height: 1.3em;
}

.article-list ul div p.keyword, .article-list ul div p.date {
    font-size: 16px;
}

.article-list ul div p.date {
    color: #c84860;
    font-weight: bold;
}

p.keyword {
    margin-top: 5px;
    color: #636363;
    font-weight: 500;
    min-height: 42px;
}


.wrapper {
    background: #f7f7f7;
    margin-top: 120px;
}

a.btn {
    margin: 50px auto 80px;
    background-color: #c84860;
    width: 350px;
    color: #fff;
    font-size: 16px;
    letter-spacing: .24em;
    height: 100%;
    padding: 13px 10px;
    position: relative;
    transition: all .3s;
}

a.btn:hover {
    color: white!important;
    background: #333;
}
.main.article a.btn {
    color: black;
}
svg {
    width: 9px;
    height: 12px;
    margin-left: .5em;
}
.main.article .box_outline {
    background: #f3f2f2;
    padding: 20px;
    margin: 20px 0;
}

.main.article .box_outline li {
    list-style: disc;
}

.main.article .box_outline ul {
    padding: 0 35px;
}

.main.article .box_outline h3 {
    margin: 10px;
}
.main.article .gray-back {
    background: #F3F2F2;
    padding: 30px;
}
.main.article .gray-back li {
    list-style-type: square;
    margin-left: 20px;
}
/*フッター*/
footer.footer {
    font-size: 16px;
    background: #333;
    color: #fff;
}

footer .container {
    max-width: 1500px;
    margin: auto;
    padding: 30px 30px 40px;
}
footer .container img{
    max-width:340px;
}


.footer .footer-contact {
    text-align: center;
	margin-bottom: 2em;
}

.footer .footer-contact h2 {
    font-size: 24px;
    text-align: center;
    position: relative;
    font-weight: bold;
    color: #fff;
}

.footer .footer-contact p {
	margin-top: 25px;
    text-align: center;
	line-height: 1.4;
    color: #fff;
}

.footer .footer-contact a.btn {
	display: inline-block;
    margin: 30px auto 20px;
    background-color: #fff;
    width: 350px;
    font-color: #333;
    font-size: 16px;
    letter-spacing: .24em;
    height: 100%;
    padding: 13px 10px;
    position: relative;
    transition: all .3s;
}
.footer .footer-contact a.btn:hover {
    color: #fff;
    background: #999;
}

.footer .footer-line {
	width: 98%;
	height: 0.5px;
	background-color: #eee;
	border: none;
	margin: 10px auto 0;
}

.footer .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer .footer-nav p {
    float: right;
    margin: 20px;
    color:#fff;
}
.footer .footer-nav ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: 15px;
}
.footer .footer-nav ul li:last-child {
    border: none;
}
.footer .footer-nav svg {
    width: 7px;
    height: 10px;
    margin-left: 15px;
    margin-right: 5px;
}

.footer .footer-nav .copyright {
    float: right;
    margin: 20px;
    color:#fff;
}
.top-slick span.category {
    background-color: #c84860;
    padding: 5px 20px;
    color: white;category
    font-size: 16px;
    left: -15px;
}

/*記事一覧ページ*/
.mainvisual.sub-list {
    padding:0;
    background: none;
}

.mainvisual.sub-list h2 {
    font-size: 30px;
    line-height: 70px;
    margin: 80px auto 0;
    max-width: 1240px;
    color: black;
    padding: 10px 20px;
}

/*記事ページ*/

.main .article-contents {
    background: #fff;
    padding: 30px 30px 80px;
    margin:30px 0;
}

.sub {
    max-width: 1220px;
    margin: 50px auto;
   padding:0 20px;
}

.main.article figure {
    max-width: 800px;
    margin: 40px auto;
    text-align: center;
}
/* 基本は枠あり */
.main.article figure img {
  border: 1px solid #c3c3c3;
}
/* no-border の時だけ枠なし */
.main.article figure.no-border img {
  border: none;
}
.main.article figure.large {
    max-width: 1000px;
}
.main.article figure.small {
    max-width: 600px;
}

.summary .keyword span{
    font-weight: bold;
    margin-right: 10px;
}
.main ul.gray-back abstract {
    padding: 20px;
	background: #F1f1f1;
}
.main ul.TOC {
    border: 1px solid #c3c3c3;
    padding: 20px;
}
.category {
  display: inline-block;
  position: relative;
  text-align: center;
  padding: 5px 20px;
  font-size: 18px;
  background: #c84860;
  color: #FFF;
  box-sizing: border-box;
}


/* =================================================
   記事トップ（新テンプレ：category → title → keyword → hero image）
   ================================================= */

/* リード（カテゴリ・タイトル・キーワード） */
.main.article .article-contents .article-lead {
  margin: 0 0 14px;
  padding: 0;
}

.main.article .article-contents .article-lead .category {
  padding-left: 0;
  margin-left: 0;
  text-indent: 0;
}

.main.article .article-contents .article-lead .title {

  font-size: 26px;
  font-weight: bold;
  margin: 0 0 10px;
  line-height: 1.3;
}

@media screen and (max-width: 767px) {
  .main.article .article-contents .article-lead .title {
    font-size: 22px;
    margin-bottom: 8px;
  }
}

/* 記事メタ行 */
.main.article .article-contents .article-lead .meta-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 5px 0px 0px 0px;
}

/* カテゴリ：左に自然配置＋BOX内文字は中央 */
.main.article .article-contents .article-lead .meta-row .category {
  display: inline-flex;
  align-items: center;
  justify-content: center;  /* 文字を中央 */
  padding: 6px 14px;        /* 高さを詰める */
  line-height: 1.2;
  margin: 0;
}

/* 日付：右端へ押し出す */
.main.article .article-contents .article-lead .meta-row .date {
  margin-left: auto; 
  font-size: 16px;
  color: #666;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .main.article .article-contents .article-lead .date {
    font-size: 13px;
  }
}


/* キーワード（記事リード内） */
.main.article .article-contents .article-lead p.keyword {
  min-height: 30px;
  margin-top: 0; 
  font-size: 16px;
  color: #999;
}

/* ヒーロー画像（本文幅制限なし／ヒーローだけ1200px） */
.main.article .article-contents figure.article-hero {
  max-width: 1200px;
  width: 100%;
  margin: auto; /* 上はリードから、下は本文側で持たせるなら0でもOK */
}

.main.article .article-contents figure.article-hero img {
  width: 100%;
  display: block;
  aspect-ratio: 2 / 1.0;
  object-fit: cover;
  border-radius: 12px;
}

/* ヒーロー画像：fullview（全体表示） */
.main.article .article-contents figure.article-hero.article-hero--fullview {
  max-width: 1200px;
  width: 100%;
  margin: auto;
  border-radius: 12px;
  overflow: hidden;

  background: transparent;
  box-shadow: inset 0 0 0 2000px #f3f2f2; /* ← 内側だけ塗る */
}

/* ::before は使わない */
.main.article .article-contents
figure.article-hero.article-hero--fullview::before {
  content: none;
}

/* 画像：切らずに全体表示 */
.main.article .article-contents figure.article-hero.article-hero--fullview img {
  width: 100%;
  aspect-ratio: 2 / 1.0;
  object-fit: contain;
  display: block;
  padding: 18px 0;
  background: transparent;
}

/* hero fullview：白背景 */
.main.article .article-contents
figure.article-hero.article-hero--fullview.article-hero--framed-white > img {
  border: 1px solid #c3c3c3;
  box-sizing: border-box;
}
.main.article .article-contents
figure.article-hero.article-hero--fullview.article-hero--framed-white {
  border-radius: 12px;
  overflow: hidden;

  background: #fff;
  box-shadow: none;
}

/* heroキャプション（ある時だけ表示される） */
.main.article .article-contents figure.article-hero .article-hero__caption {
  margin-top: 10px;
  font-size: 13px;
  color: #666;
  line-height: 1.2;
  text-align: left;
}

/* caption だけ左揃えにする */
.main.article .article-contents figure.article-hero {
}
.main.article .article-contents figure.article-hero .article-hero__caption {
  max-width: 100%;
}



/*記事リード（category → title → keyword → 画像）ここまで*/

/* =================================================
   【移行期間】旧 article-header（画像横にsummaryを重ねる）
   - 旧HTMLが残っている間だけ一時的に有効化する
   - 新テンプレ移行完了後に削除
   ================================================= */

.article-header > div { 
  display: flex;
  width: 100%;
  position: relative;
}

.article-header {
  margin: 50px 0;
}

.article-header .summary {
  width: 40%;
  padding: 30px;
  position: absolute;
  right: 0;
  bottom: 15px;
  background: #fff;
}

.article-header .summary h1 {
  font-size: 26px;
  font-weight: bold;
  margin: 20px 0;
  line-height: 1.3;
}

.article-header .summary .date {
  margin-top: 10px;
  text-align: right;
}

.article-header img {
  width: 60%;
  height: fit-content;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.article-header .summary .category:after {
  top: 0;
  right: 0;
  border-width: 20px 18px 20px 0px;
  border-color: transparent white transparent transparent;
  border-style: solid;
}

/* =========================
   article-header：summaryを画像の上に（PCのみ）
   ========================= */
@media screen and (min-width: 1031px) {
  .article-header > div {
    flex-direction: column;   /* 1カラム縦積み */
  }

  .article-header .summary {
    position: static;         /* absolute解除 */
    width: auto;
    order: -1;                /* 上に */
    right: auto;
    bottom: auto;
  }

  .article-header img {
    width: 100%;
    aspect-ratio: 2 / 0.9;    /* 高さ0.9：幅2 */
    border-radius: 12px;      /* 角丸 */
    display: block;
  }
}
/*article-headerのカスタマイズ（テスト用）ここまで*/


/*【移行期間】旧 article-header（画像横にsummaryを重ねる）ここまで*/


.category:after {
  top: 0;
  right: 0;
  border-width: 20px 18px 20px 0px;
  border-color: transparent f3f2f2 transparent transparent;
  border-style: solid;
}

.main.article h2 {
	position: relative;
    font-weight: bold;
/*   display: flex;
    align-items: center;*/
    line-height:1.4;
    margin: 80px 0 20px;
    color:#000;
	padding-left: 35px;
}

.main.article h2::before {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    background: #c84860;
    display: inline-block;
    margin: 0 10px 0 0;
    left: 0;
	top: 50%;
    transform: translateY(-50%);
}
.main.article h2::after {
    content: none
}

/* h3：通常版 */
.main.article h3 {
	position: relative;
    font-size: 20px;
    color: #c84860;
    font-weight: bold;
    margin: 40px 0 20px;
    line-height:1.4;
	padding-left: 40px;
}
.main.article h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: 30px;
  height: 5px;
  background: #c84860;
}
/* h3：プレーン版（装飾線なし） */
.main.article h3.h3-plain {
  padding-left: 0;          /* 左の余白を消す */
  margin: 40px 0 10px; 　　　/* 下のマージン小さめ */
}

.main.article h3.h3-plain::before {
  content: none;
}

.main.article h2.related-title {
    font-size: 24px;
    margin: 80px auto 20px;
    text-align: center;
    width: fit-content;
    position: relative;
    font-weight: bold;
    color: #c84860;
	padding-left: 0px;
}
.main.article h2.related-title::before, .main.article h2.related-title::after {
    content: "";
    width: 100px;
    height: 2px;
    background: #c84860;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.main.article h2.related-title::before {
    left: -120px;
}
p.strong{
    font-weight:bold;
}
ul.list{
    list-style:disc;
    padding-left: 4em;
}
.img-flex {
    display: flex;
    max-width: 900px;
    margin: 20px auto;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: space-around;
}

.main.article .img-flex figure {
    margin: 20px;
    max-width: 410px;
}

/* PCで2カラムにしたいとき用 */
@media screen and (min-width: 768px) {
  .main.article .img-flex.img-flex-2col {
    display: flex;                 /* 念のため明示 */
    justify-content: space-between;
    align-items: center;           /* ← 上下中央 */
    gap: 40px;                     /* calcの-40pxと整合するなら 40px */
  }

  .main.article .img-flex.img-flex-2col figure {
    width: calc(50% - 20px);       /* gap:40pxなら片側-20pxが自然 */
    max-width: none;
    margin: 20px 0;
  }
}

figcaption {
    font-size: 16px;
    margin: 10px auto;
    text-align: center;
}

/* 著者プロフィール全体 */
.main.article .author {
  position: relative;
  background: #F3F2F2;
  padding: 50px 30px 30px 40px; /* 上にラベル分の余白を確保 左だけ +10px */
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
  display: block; /* item を縦積みにするため */
}
/* 著者プロフィール組み方1人分 */
.main.article .author-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 著者プロフィール組み方著者同士の区切り */
.main.article .author-item + .author-item {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #d3d3d3;
}

/* 著者プロフィール写真なし */
.main.article .author-item.no-photo {
  align-items: flex-start;
}

.main.article .author-item.no-photo .author-body {
  margin-left: 0;
}


/* 著者プロフィール箱の左上ラベル */
.main.article .author-label {
  position: absolute;
  top: 10px;
  left: 25px;          /* ← 左の余白はここで調整 */
  font-weight: bold;
  color: #c84860;
  padding-left: 14px;  /* ← 色バー分の内側余白 */
}

/* 著者プロフィール左側のアクセントバー */
.main.article .author-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 70%;
  background: #c84860;
}

/* 著者プロフィール画像エリア */
.main.article .author-media {
  flex: 0 0 110px;
}

.main.article .author-media img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* 著者プロフィール右側テキスト */
.main.article .author-body {
  flex: 1;
}

/* 著者名 */
.main.article .author-name {
  font-weight: bold;
  font-size: 18px;
  margin: 0 0 8px;
}

/* ふりがな */
.main.article .author-name .author-furigana {
  font-weight: normal;
　font-size: 0.8em;
　letter-spacing: -0.02em; 
}

.main.article .author-text {
  margin: 0;
  line-height: 1.6;
}

/* article-contents の最初が author の場合、上の余白を詰める */
.main.article .article-contents > .author:first-child {
  margin-top: 0;
}

/* 著者プロフィールSP：縦並び */
@media screen and (max-width: 767px) {
  .main.article .author {
    flex-direction: column;
    align-items: center;
    text-align: left;
    padding-top: 45px; /* ラベル分 */
  }

  .main.article .author-label {
    left: 25px;        /* PCと同じ左位置 */
    transform: none;  /* 中央寄せ解除 */
  }
}
/* 著者プロフィールここまで*/


/* リンクテキスト */
.main.article a {
    color: #007bc2;
}

.main.article a:hover {
    color: #688799;
}
/* 参照番号リンク区別のため濃く */
.main.article a.refmark{
  color: #005a92;               /* 少し濃い青 */
  font-weight: 600;
  margin-right: 0.4em;
/*  text-decoration: underline;
  text-decoration-color: #005a92;
  text-underline-offset: 2px;*/
}
.main.article a.refmark:hover{
  color: #004a78;
  text-decoration-color: #004a78;
}

.main.article figure.float-right{
    float:right;margin:10px 20px;
}
.main.article figure.float-left{
    float:left;margin:10px 20px;
}
.has-float-img{
    display:inline-block;
}

.main.article .related-contents {
    padding: 0 30px;
}

.main.article ul.banner-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.main.article ul.banner-list li {
    width: calc(100% / 2 - 30px);
    position: relative;
    min-width: 300px;
    margin: 10px auto;
}

.main.article ul.banner-list span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-shadow: 0 0 5px black;
}

.main.article ul.banner-list a::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: #c8486070;
    transition: .3s;
}
.main.article ul.banner-list li:hover a::before {
    background: #c93450b8;
}


@media screen and (max-width: 1030px){
.header-container{
    padding:15px;
}
.top-article-summary {
    padding: 10px;
}
.top-article-summary p{
    line-height:1.4;
}

.article-header > div {
    flex-direction: column;
    max-width: 800px;
    margin: auto;
}
.article-header img {
    width: 100%;
}
.article-header .summary {
    width: auto;
    padding: 15px;         

    position: relative;
}
.article-header .summary .date {
    position: initial;
    text-align: right;
}
}

@media screen and (max-width: 767px) {
.wrapper {
    margin-top: 100px;
}
  .slick-next::after,
  .slick-prev::after {
    width: 10px;
    height: 10px;
  }
  .slick-next {
    right: 8px;
  }
  .slick-prev {
    left: 8px;
  }
  .slick-next::after {
    right: 2px;
  }
.article-list ul {
    justify-content: space-between;
    flex-direction: column;
}
.main .article-contents{
    padding:20px 10px;
}
.article-list ul li {
    width: 100%;
    margin: 20px auto;
    max-width: 500px;
}
h2{
    font-size:20px;
}
footer .row, ul.footer-nav {
    flex-direction: column;
    margin: 10px 0;
}
ul.footer-nav li{
    line-height: 1.5;
}
ul.footer-nav li svg{
    display: none;
}
.main.article figure.float-left, .main.article figure.float-right{
    margin:10px auto;
}
.has-float-img{
    display:inline-grid;
}
.img-flex {
    align-items: center;
    flex-direction: column;
}
.main.article .img-flex figure {
    max-width: 800px;
}
.main.article .related-contents{
    padding:0;
}
}

/*記事ページ用：概要・目次*/
/* gray-back abstract を基準にする */
.main.article .gray-back.abstract {
  position: relative;
  padding-top: 50px; 
}
/* 記事概要：author-labelと同じ見出し */
.main.article .gray-back.abstract > h2 {


  position: absolute;
  top: 10px;
  left: 25px;

  margin: 0;
  font-size: 18px;     /* author-labelと揃える */
  font-weight: bold;
  line-height: 1.75;
  color: #c84860;

  padding-left: 14px;  /* 左バー分 */
  background: none;    /* h2既存装飾を無効化 */
}
/* 左側アクセントバー */
.main.article .gray-back.abstract > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 70%;
  background: #c84860;
}

/* 見出し無し：上余白を通常に戻す */
.main.article .gray-back.abstract.no-title {
  padding-top: 30px; /* 通常の gray-back と同じに */
}

@media screen and (max-width: 767px) {
  .main.article .gray-back.abstract > h2 {
    left: 25px;
  }
}
/*記事ページ用：概要・目次ここまで*/



/*記事ページ用：表デザイン*/
/* 表ブロック（表＋注記をまとめて幅管理） */
.main.article .table-block {
　display: block;   
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* 表はブロック幅いっぱいに */
.main.article .table-block .table-article {
  width: 100%;
  border-collapse: collapse;
  margin: 0; 
  background: #fff;
}
.main.article .table-block .table-article th,
.main.article .table-block .table-article td {
  border: 2px solid #d3d3d3;
  padding: 12px;
  text-align: left;
  color: #333;
}

.main.article .table-block .table-article th {
  background: #f3f2f2;
  font-weight: bold;
}

.main.article .table-block .table-article caption {
    font-size: 16px;
    margin: 10px auto;

    text-align: center;
    caption-side: top; /* 表の上に配置（明示） */
}

/* 表注記（下に置く） */
.main.article .table-block .table-note {
  margin: 8px 0 0;     /* 表の下に少しだけ間隔 */
  font-size: 14px;     /* 小さめ */
  color: #666;
  text-align: left;    /* 表の左端と揃う */
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  .main.article .table-block {
    width: 95%;
  }	
  .main.article .table-block .table-article {
    font-size: 16px;
  }
  .main.article .table-block .table-article th {
    font-size: 16px;
  }
  .main.article .table-block .table-note {
    font-size: 13px;
  }
}
/*記事ページ用：表デザインここまで*/



/* 記事ページ用対談（talk）ブロック */

.main.article .talk {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 20px 0px 30px;
}

/* 丸アイコン */
.main.article .talk-avatar {
  flex: 0 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main.article .talk-avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-top: 2px;
}

/* 話者名（写真の下） */
.main.article .talk-avatar .talk-name {
  margin: 2px 0 0;
  font-weight: bold;	
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  color: #555;
  letter-spacing: 0.04em; 
}

/* 本文側 */
.main.article .talk-body {
  flex: 1;
  min-width: 0; /* 折り返し事故防止 */
}

/* 発言ボックス */
.main.article .talk-text {
  background: #f7f7f7;
  padding: 12px 14px;
  border-radius: 6px;
}

.main.article .talk-text p {
  margin: 0;
  line-height: 1.6;
}

/* SP微調整 */
@media screen and (max-width: 767px) {
  .main.article .talk {
    gap: 10px;
  }

  .main.article .talk-avatar {
    flex-basis: 48px;
  }

  .main.article .talk-avatar img {
    width: 48px;
    height: 48px;
  }
}

/*記事ページ用：対談（talk）ブロックここまで*/


/* =================================================
記事ページ：最終上書き（本文まわり）
=================================================*/

/* 本文行間調整 */
body.pageLaboratory .main.article .article-contents p,
body.pageLaboratory .main.article .article-contents li {
  line-height: 1.75;
}

/* 2) h2 と本文の間隔調整 */
/* h2 自体の余白 */
body.pageLaboratory .main.article .article-contents h2 {
  margin-top: 2.5em;
  margin-bottom: 1.0em;
}

/* h2 直後の要素との間隔を詰める */
body.pageLaboratory .main.article .article-contents h2 + p,
body.pageLaboratory .main.article .article-contents h2 + ul,
body.pageLaboratory .main.article .article-contents h2 + ol,
body.pageLaboratory .main.article .article-contents h2 + div,
body.pageLaboratory .main.article .article-contents h2 + table,
body.pageLaboratory .main.article .article-contents h2 + figure {
  margin-top: 0.4em;
}

/* gray-back内のh2は、箱の上の余白を小さくする */
body.pageLaboratory .main.article .article-contents .gray-back h2 {
  margin-top: 0.4em; 
  margin-bottom: 0.7em;  
}

/* list 整理（記事本文） */
/* 本文用リスト：●を使わない */
body.pageLaboratory .main.article .article-contents ul.list {
  list-style: none;
  padding-left: 2em; 
  margin-left: 0;
}

/* 疑似要素で●を付けているCSS対策 */
body.pageLaboratory .main.article .article-contents ul.list li::before {
  content: none !important;
}

/* シンプルな1行リストの行間を詰める */
body.pageLaboratory .main.article .article-contents ul.list li {
  margin-bottom: 0.25em; /* ← ここで“間延び”解消 */
  line-height: 1.55;     /* ← リスト内は少し詰める */
}

/* liの中にpが入ってる「文章型」だけは読みやすく戻す */
body.pageLaboratory .main.article .article-contents ul.list li p {
  line-height: 1.85;     /* 本文相当 */
  margin: 0.2em 0;       /* 文章型の中だけ少し余白 */
}

/* ol は数字をそのまま使う */
body.pageLaboratory .main.article .article-contents ol {
  list-style: decimal;
  padding-left: 1.5em;
}

/* ol にも疑似要素がある場合の保険 */
body.pageLaboratory .main.article .article-contents ol li::before {
  content: none !important;
}