@charset "UTF-8";

/* =========================================================
   TUTTI 創刊号専用CSS
   HTML・標準CSSは変更しない

   標準CSS：
   tutti-base.css
   tutti-content.css
   tutti-page.css
   ========================================================= */


/* ---------------------------------------------------------
   1. ページ全体・創刊号ヘッダー
   --------------------------------------------------------- */

main.issue-001 {
	max-width: 860px;
	padding: 3rem 4.2rem;
}

.issue-001 .founder-masthead {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	margin: 0 auto 1.1rem;
	padding: 0;
}

.issue-001 .founder-logo {
	display: block;
	width: min(100%, 390px);
	max-width: 100%;
	height: auto;
	object-fit: contain;
	margin: 0 auto;
}


/* ---------------------------------------------------------
   2. 本文全体・段組み
   --------------------------------------------------------- */

.issue-001 .founder-content {
	width: 100%;
	min-width: 0;
	column-count: 2;
	column-gap: 1.7rem;
	column-fill: balance;
	column-rule: none;
	font-size: .8rem;
	line-height: 1.5;
}

/* sectionの意味構造はHTMLに残し、視覚ボックスを解除 */
.issue-001 .founder-content > section:not(.notices) {
	display: contents;
}

/* ページ境界を含む段落 */
.issue-001 .page-split-paragraph {
	display: contents;
}

/* ページ境界前後の本文 */
.issue-001 .paragraph-run {
	display: block;
	font-size: .98rem;
	line-height: 1.8;
	text-align: justify;
	word-break: normal;
	overflow-wrap: normal;
}

.issue-001 .paragraph-run-before {
	text-indent: 1em;
}

.issue-001 .paragraph-run-after {
	text-indent: 0;
}

/* 通常の本文段落 */
.issue-001 .founder-content p {
	margin: 0 0 .52rem;
	padding: 0;
	font-size: .98rem;
	line-height: 1.8;
	text-indent: 1em;
	text-align: justify;
	word-break: normal;
	overflow-wrap: normal;
	break-inside: auto;
}


/* ---------------------------------------------------------
   3. 記事見出し
   基本構造・基本配置は tutti-content.css を使用
   --------------------------------------------------------- */

.issue-001 .article-heading {
	flex-wrap: wrap;
	column-gap: .45rem;
	row-gap: .1rem;
	margin-bottom: .45rem;
	padding: 0;
	line-height: 1.35;
	break-after: avoid;
	-webkit-column-break-after: avoid;
}

.issue-001 .article-heading .title {
	min-width: 0;
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.35;
	word-break: normal;
	overflow-wrap: normal;
}

/*
  bylineの基本配置・文字サイズは標準CSSを使用。

  旧ローカル指定：
  flex: 0 1 auto;
  max-width: 100%;
  margin-left: auto;
  font-size: 1rem;
  line-height: 1.35;
  white-space: normal;
*/

/* 段組み先頭の見出し */
@media screen and (min-width: 601px) {
	.issue-001 .article-heading.column-start {
		margin-top: 0;
	}
}


/* ---------------------------------------------------------
   4. ページ番号・ページ境界
   --------------------------------------------------------- */

/* 1/4：本文中にある専用マーカー */

.issue-001 .page-marker-inline {
	display: flex;
	align-items: center;
	justify-content: center;
	column-span: all;
	-webkit-column-span: all;
	width: 100%;
	margin: 1.05rem 0 1rem;
	padding: .22rem 0;
	color: #8d887e;
	font: 400 .68rem/1.2 Arial, sans-serif;
	letter-spacing: .025em;
	text-indent: 0;
	white-space: nowrap;
}

.issue-001 .page-marker-inline::before,
.issue-001 .page-marker-inline::after {
	content: "";
	display: block;
	flex: 1;
	height: 1px;
	background: #e8e6e1;
}

.issue-001 .page-marker-inline > span {
	padding: .12rem .28rem;
	border: 1px solid #efede8;
	color: #969187;
	background: #fff;
	white-space: nowrap;
}

/* 2/4・3/4：標準ページマーカーの段組み上の配置 */

.issue-001 .founder-content > .page-marker {
	column-span: all;
	-webkit-column-span: all;
	break-inside: avoid;
	margin: 1.05rem 0 1.1rem;
}

/* 4/4：最終ページマーカー */

.issue-001 .founder-content > .page-end {
	column-span: all;
	-webkit-column-span: all;
	margin: .75rem 0 0;
}


/* ---------------------------------------------------------
   5. 段組み制御
   --------------------------------------------------------- */

.issue-001 .column-next {
	display: block;
	break-before: column;
	-webkit-column-break-before: always;
}


/* ---------------------------------------------------------
   6. お知らせ・編集後記
   --------------------------------------------------------- */

.issue-001 .notices {
	display: block;
	column-span: all;
	-webkit-column-span: all;
	column-count: 1;
	column-gap: 0;
	width: 100%;
	max-width: 100%;
	margin: .25rem 0 0;
	padding: 0;
	font-size: .82rem;
	line-height: 1.5;
}

.issue-001 .notices h2 {
	margin: .2rem 0 .35rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

.issue-001 .notices h3 {
	margin: .55rem 0 .22rem;
	font-size: .88rem;
	font-weight: 700;
	line-height: 1.35;
}

.issue-001 .notices p {
	margin: 0 0 .38rem;
	font-size: .78rem;
	line-height: 1.48;
	text-indent: 1em;
	text-align: left;
	word-break: normal;
	overflow-wrap: normal;
}

.issue-001 .notice-list p {
	margin: 0 0 .06rem;
	padding-left: 1.35em;
	text-indent: 0;
}

.issue-001 .editorial {
	margin-top: .75rem;
}

.issue-001 .editorial h2 {
	margin: .55rem 0 .25rem;
	font-size: .95rem;
	line-height: 1.35;
}

.issue-001 .editorial p {
	margin: 0 0 .24rem;
	font-size: .76rem;
	line-height: 1.45;
	text-indent: 0;
}


/* =========================================================
   7. スマートフォン表示
   標準CSSと同じ600pxを境界にする
   ========================================================= */

@media screen and (max-width: 600px) {

	/* ページ全体 */
	main.issue-001 {
		max-width: none;
		padding: .6rem 1rem 2rem;
	}

	/* ロゴ下の余白を縮小 */
	.issue-001 .founder-masthead {
		margin-bottom: 0;
	}

	/* 本文は1段組み */
	.issue-001 .founder-content {
		column-count: 1;
		column-gap: 0;
	}

	/*
	  sectionの表示を通常ブロックに戻す。
	  display: contents と同じセレクタで上書きする。
	*/
	.issue-001 .founder-content > section:not(.notices) {
		display: block;
	}

	/* ページ境界段落 */
	.issue-001 .page-split-paragraph {
		display: block;
	}

	.issue-001 .paragraph-run {
		display: inline;
		font-size: .88rem;
		line-height: 1.7;
	}

	.issue-001 .paragraph-run-before,
	.issue-001 .paragraph-run-after {
		display: inline;
		text-indent: 0;
	}

	/* 段組み移動を解除 */
	.issue-001 .column-next {
		display: inline;
		break-before: auto;
		-webkit-column-break-before: auto;
		column-span: none;
		-webkit-column-span: none;
		width: auto;
	}

	/* 1/4マーカーは段組みを解除して全幅表示 */
	.issue-001 .page-marker-inline {
		column-span: none;
		-webkit-column-span: none;
		width: 100%;
		margin: 1.05rem 0 1rem;
	}

	/* 最初の見出し：ロゴ直後の余白を縮小 */
	.issue-001 .founder-content > section:first-of-type > .article-heading {
		margin-top: .5rem;
	}

	/* 本文 */
	.issue-001 .founder-content p {
		font-size: .88rem;
		line-height: 1.7;
	}

	/* お知らせ */
	.issue-001 .notices p {
		font-size: .86rem;
		line-height: 1.6;
	}
}


/* =========================================================
   標準CSSへの移行候補
   現時点では標準CSSを変更しない。
   ========================================================= */

/*
  候補1：ページ途中のページ番号表示
  .page-marker-inline
  .page-marker-inline::before / ::after
  .page-marker-inline > span

  候補2：段組みの任意位置で改段する指定
  .column-next

  候補3：ページ境界をまたぐ段落の表示制御
  .page-split-paragraph
  .paragraph-run
  .paragraph-run-before
  .paragraph-run-after

  これらは創刊号固有のHTML構造に依存しているため、
  現時点ではローカルCSSに残す。
*/