@charset "utf-8";
/* ################################################################################
   Object_Project_Article（投稿記事ページ）
   ################################################################################ */


/* ======================================================================
   Article（投稿記事ページ）
   ====================================================================== */

/* 下記のCSSの記述（ID名、Class名など）は、WordPressの記事ページに表示される事を想定し、命名をしています。 */
/* WordPressなどのCMSを使わない場合でも、問題が発生しないよう命名をしていますが、ID・Class名の混濁が発生する場合は、追加で発生しないCSSを考えます。 */


/* 記事_全体
   ================================================================= */

.p-article {
  max-width: 100%;
  margin: 0 auto var(--layout-content-margin-bottom);
  padding: 0;
  color: var(--fontcolor-article-text);
  font-family: var(--fontfamily-article-text);
  font-size: var(--fontsize-article-text);
  line-height: var(--lineheight-article-text);
  letter-spacing: var(--letterspacing-article-text);
  font-weight: var(--fontweight-article-text);
}




/* 記事_ヘッダー
   ================================================================= */

.p-article-header {
	display: flex;
  flex-direction: column;
  overflow: hidden;
	margin: 0;
  padding: 0;
	background: var(--bgcolor-content);
}




/* 記事_コンテンツ
   ================================================================= */

.p-article-contents {
  overflow: hidden;
	margin: 0;
	margin-top: -0.5em;
	padding: 0 var(--layout-site-bothends-padding);
	background: var(--bgcolor-content);
}
.p-article-contents:before, 
.p-article-contents:after {
	content: "";
	display: table;
}
.p-article-contents:after {
	clear: both;
}




/* 記事_タイトル
   ================================================================= */

.p-article-title {
	order: 0;
	margin: var(--space-025-basic) var(--layout-site-bothends-padding);
	padding: 0;
  font-size: 1.4444em;
	font-weight: normal;
}

/* 記事タイトル装飾仕様のPタグ登録対策 */
.p-article-title p {
	margin-top: 0;
	margin-bottom: 0;
}

/* [Custom Field]記事タイトルの表示オンオフ機能 */
.p-article-title--display {
	display: block;
}

.p-article-title--hidden {
	display: none;
}



/* ------------------------------------------------------------
   [Decoration]通常記事
   ------------------------------------------------------------ */

.p-article-title--single {
	font-weight: bold;
}



/* ------------------------------------------------------------
   [Decoration]ページ
   ------------------------------------------------------------ */

.p-article-title--page {
  font-weight: bold;
}




/* 記事_サブタイトル
   ================================================================= */

.p-sub-title {
	min-width: auto;
  max-width: 100%;
	margin: var(--space-025-basic) var(--layout-site-bothends-padding);
  padding: 0;
}

.p-sub-title p {
	margin: 0;
  padding: 0;
}



/* ------------------------------------------------------------
   [旧仕様][Decoration]吹き出し（しっぽ下付き）
   ------------------------------------------------------------ */

.p-sub-title--balloon-under {
	position: relative;
  display: inline-block;
  margin-top: 0.6em;
	margin-bottom: 1.2em;
  padding: 0.6em 0.8em;
  max-width: 100%;
  background: var(--keycolor-article-main);
  border-radius: 0.8em;
  color: #fff;
}
.p-sub-title--balloon-under:before{
	content: "";
  position: absolute;
  top: 100%;
  left: 12%;
  border: 0.8em solid transparent;
  border-top: 0.8em solid var(--keycolor-article-main);
}




/* 記事_メタ情報
   ================================================================= */

.p-article-meta-infomation {
  display: flex;
  flex-wrap: wrap;
	margin: var(--space-025-basic) var(--layout-site-bothends-padding) var(--space-050-basic);
	padding: 0;
	color: #4c4c4c;
	font-size: 0.8888em;
	word-break: normal;
}

.p-article-meta-infomation__item {
	display: inline-block;
	margin: 0 0.75em 0 0;
  padding: 0;
}
.p-article-meta-infomation_item:last-child {
	margin-right: 0;
}



/* ------------------------------------------------------------
   メタ情報の配置
   ------------------------------------------------------------ */

.meta-justify-right {
	justify-content: flex-end;
}

.meta-justify-center {
	justify-content: center;
}

.meta-justify-between {
	justify-content: space-between;
}

.meta-justify-around {
	justify-content: space-around;
}



/* ------------------------------------------------------------
   記事_投稿日時
   ------------------------------------------------------------ */

.p-article-date {
}



/* ------------------------------------------------------------
   記事_筆者
   ------------------------------------------------------------ */

.p-article-author-name {
}



/* ------------------------------------------------------------
   記事_カテゴリー
   ------------------------------------------------------------ */

.article-category-name {
}


/* カテゴリーごとのデザイン変化
   ------------------------------------------------------- */

/* WP管理画面の「カテゴリー」のスラッグに記載した命名が、CSSの名前になります。 */
/* デザインを変化させる必要があるカテゴリーの数に応じて、指定を追加していく。カスタム投稿のカテゴリーも同様。 */


.category-00 {
}

.category-01 {
}

.category-02 {
}




/* 記事_タグ
   ================================================================= */

.p-article-tags {
	display: inline-block;
	margin: 0 0.75em 0 0;
  padding: 0;
}




/* 記事_アイキャッチ
   ================================================================= */

.p-article-eyecatch {
	margin: 0 0 var(--space-025-basic);
  padding: 0;
}



/* ------------------------------------------------------------
   アイキャッチ画像
   ------------------------------------------------------------ */

.p-article-eyecatch-image {
	position: relative;
	margin: 0;
	padding: 0;
}

.p-article-eyecatch img {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}



/* ------------------------------------------------------------
   アイキャッチ動画
   ------------------------------------------------------------ */

.p-article-eyecatch-video {
	position: relative;
	margin: 0;
	padding: 0;
}

.p-article-eyecatch-video__video {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}



/* ------------------------------------------------------------
   CTAボタン_アイキャッチ動画内の左下
   ------------------------------------------------------------ */

.p-article-eyecatch-video__cta-link {
	position: absolute;
	left: 2%;
	bottom: 6.5%;
	width: 8.5%;
	height: auto;
	margin: 0;
	padding: 0;
}

.p-article-eyecatch-video__cta-image {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
}



/* ------------------------------------------------------------
   CTAボタン_アイキャッチ動画の直下
   ------------------------------------------------------------ */

.p-article-eyecatch-banner {
	position: relative;
	margin: 0;
	padding: 0;
}

.p-article-eyecatch-banner__link {
	margin: 0;
	padding: 0;
}

.p-article-eyecatch-banner__image {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
}




/* 記事_ヘッダー_内部コンテンツの順序
   ================================================================= */


/* 「記事ヘッダー内の各要素」の配置順序を、選択式で指定できようにしている。 */
/* 記事ヘッダー内の各要素：記事_タイトル、記事_メタ情報、記事_アイキャッチ */


/* ヘッダー内の最初
   ------------------------------------------------------- */

.p-article-header__order-first {
	order: -3;
	margin-top: 0;
}

.p-sub-title.p-article-header__order-first {
	margin-top: var(--space-050-basic);
}

.p-article-meta-infomation.p-article-header__order-first {
	margin-top: var(--space-050-basic);
	margin-bottom: var(--space-025-basic);
}

.p-article-eyecatch.p-article-header__order-first {
	margin-top: 0;
}


/* タイトルの前
   ------------------------------------------------------- */

.p-article-header__order-upper {
	order: -2;
}

.p-sub-title.p-article-header__order-upper {
}

.p-article-meta-infomation.p-article-header__order-upper {
	margin-bottom: var(--space-025-basic);
}

.p-article-eyecatch.p-article-header__order-upper {
	margin-top: var(--space-025-basic);
}


/* タイトルの直上
   ------------------------------------------------------- */

.p-article-header__order-directly-upper {
	order: -1;
}

.p-sub-title.p-article-header__order-directly-upper {
}

.p-article-meta-infomation.p-article-header__order-directly-upper {
	margin-bottom: var(--space-025-basic);
}

.p-article-eyecatch.p-article-header__order-directly-upper {
	margin-top: var(--space-025-basic);
}


/* タイトルの直下
   ------------------------------------------------------- */

.p-article-header__order-directly-bottom {
	order: 1;
}

.p-sub-title.p-article-header__order-directly-bottom {
}

.p-article-meta-infomation.p-article-header__order-directly-bottom {
	margin-bottom: var(--space-025-basic);
}

.p-article-eyecatch.p-article-header__order-directly-bottom {
	margin-top: var(--space-025-basic);
}


/* タイトルの後
   ------------------------------------------------------- */

.p-article-header__order-bottom {
	order: 2;
}

.p-sub-title.p-article-header__order-bottom {
}

.p-article-meta-infomation.p-article-header__order-bottom {
	margin-bottom: var(--space-025-basic);
}

.p-article-eyecatch.p-article-header__order-bottom {
	margin-top: var(--space-025-basic);
}


/* ヘッダー内の最後
   ------------------------------------------------------- */

.p-article-header__order-last {
	order: 3;
	margin-bottom: 0;
}

.p-sub-title.p-article-header__order-last {
}

.p-article-meta-infomation.p-article-header__order-last {
}

.p-article-eyecatch.p-article-header__order-last {
	margin-top: var(--space-025-basic);
}




/* 記事コンテンツの各要素
   ================================================================= */


/* ------------------------------------------------------------
   記事コンテンツの各要素_共通指定
   ------------------------------------------------------------ */

.p-article-contents h1, 
.p-article-contents h2, 
.p-article-contents h3, 
.p-article-contents h4, 
.p-article-contents h5, 
.p-article-contents h6 {
	font-size: 1.1111em;
	font-weight: normal;
}

.p-article-contents > h1, 
.p-article-contents > h2, 
.p-article-contents > h3, 
.p-article-contents > h4, 
.p-article-contents > h5, 
.p-article-contents > h6 {
  margin: 1.0em 0;
}

.p-article-contents > p, 
.p-article-contents > ol, 
.p-article-contents > ul, 
.p-article-contents > pre, 
.p-article-contents > blockquote, 
.p-article-contents > table, 
.p-article-contents > hr, 
.p-article-contents > figure, 
.p-article-contents > video, 
.p-article-contents > canvas, 
.p-article-contents > iframe, 
.p-article-contents > audio, 
.p-article-contents > form {
  margin: 1.0em 0;
}

.p-article-contents > div {
  margin: 1.0em 0;
}

/* [Clearfix] */
.p-article-contents li:before, 
.p-article-contents li:after, 
.p-article-contents blockquote:before, 
.p-article-contents blockquote:after {
	content: "";
	display: table;
}
.p-article-contents blockquote:after, 
.p-article-contents blockquote:after {
	clear: both;
}



/* ------------------------------------------------------------
   記事_見出しの個別指定
   ------------------------------------------------------------ */

.p-article-contents h1 {
}

.p-article-contents h2 {
}

.p-article-contents h3 {
}

.p-article-contents h4 {
}

.p-article-contents h5 {
}

.p-article-contents h6 {
}




/* 記事_リストの個別指定
   ================================================================= */

/* Reference URL: https://saruwakakun.com/html-css/reference/ul-ol-li-design */


/* ------------------------------------------------------------
   Ordered List（ナンバリングされたリスト）
   ------------------------------------------------------------ */

.p-article-contents ol {
	counter-reset: li;
	list-style-type: none;
	padding: 0;
}

.p-article-contents ol li {
	position: relative;
  padding: 0.5em 0 0.5em 1.75em;
}
.p-article-contents ol li:before {
	content: counter(li) "";
	counter-increment: li;
	position: absolute;
	left: 0;
  top: 1.66em;
  width: 1.6em;
  height: 1.6em;
  background: var(--keycolor-article-main);
  border-radius: 50%;
  color: #fff;
  font-size: 0.75em;
  line-height: 1.6em;
	text-align: center;
	-webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}



/* ------------------------------------------------------------
   Unordered List（箇条書きタイプのリスト）
   ------------------------------------------------------------ */

.p-article-contents ul {
	counter-reset: li;
	list-style-type: none;
	padding: 0;
}

.p-article-contents ul li {
	position: relative;
	padding: 0.5em 0 0.5em 1.5em;
}
.p-article-contents ul li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	background: #fff;
	border-radius: 0;
	color: #fff;
	text-align: center;
}
.p-article-contents ul li:after {
	content: "";
  position: absolute;
	left: 0.25em;
  top: 1.25em;
  width: 0;
  height: 0;
  margin: -0.5em 0 0 0;
  border: solid 0.5em transparent;
  border-left: solid 0.75em var(--keycolor-article-main);
}




/* 記事_画像・動画
   ================================================================= */

/* 画像の縦横サイズにより、記事内で表示される大きさを制御しています。 */


.p-article-contents > img, 
.p-article-contents > p img, 
.p-article-contents > a img, 
.p-article-contents > video, 
.p-article-contents > p video, 
.p-article-contents > a video {
	display: block;
  width: auto;
  height: auto;
	max-width: 64.0rem;
	max-height: 64.0rem;
  margin-left: auto;
  margin-right: auto;
}

.p-article-contents > div img, 
.p-article-contents > div p img, 
.p-article-contents > div a img, 
.p-article-contents > div video, 
.p-article-contents > div p video
.p-article-contents > div a video {
	display: block;
  width: auto;
  height: auto;
	max-width: 56.0rem;
	max-height: 56.0rem;
  margin-left: auto;
  margin-right: auto;
}

.p-article-contents a img:hover {
	opacity: 0.8;
}

@media screen and (max-width:959px) {
.p-article-contents > img, 
.p-article-contents > p img, 
.p-article-contents > a img, 
.p-article-contents > video, 
.p-article-contents > p video, 
.p-article-contents > a video {
	max-width: 72.0vw;
	max-height: 72.0vw;
}

.p-article-contents > div img, 
.p-article-contents > div p img, 
.p-article-contents > div a img, 
.p-article-contents > div video, 
.p-article-contents > div p video
.p-article-contents > div a video {
	max-width: 60.0vw;
	max-height: 60.0vw;
}
}

@media screen and (max-width:559px) {
.p-article-contents > img, 
.p-article-contents > p img, 
.p-article-contents > a img, 
.p-article-contents > video, 
.p-article-contents > p video, 
.p-article-contents > a video {
	max-width: 84.0vw;
	max-height: 84.0vw;
}

.p-article-contents > div img, 
.p-article-contents > div p img, 
.p-article-contents > div a img, 
.p-article-contents > div video, 
.p-article-contents > div p video
.p-article-contents > div a video {
	max-width: 68.0vw;
	max-height: 68.0vw;
}
}



/* ------------------------------------------------------------
   画像の縦横サイズコントロールの除去
   ------------------------------------------------------------ */


/* 画像のオリジナルサイズで表示する（width:auto, height:auto）
   ------------------------------------------------------- */

.p-article-contents .image-size-control__normalize {
  display: inline;
}

.p-article-contents .image-size-control__normalize img, 
.p-article-contents .image-size-control__normalize p img, 
.p-article-contents .image-size-control__normalize a img, 
.p-article-contents .image-size-control__normalize video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-left: 0;
  margin-right: 0;
}


/* 画像を表示枠の横幅いっぱいに広げる（width:100%, height:auto）
   ------------------------------------------------------- */

.p-article-contents .image-size-control__normalize-wide {
  display: inline;
}

.p-article-contents .image-size-control__normalize-wide img, 
.p-article-contents .image-size-control__normalize-wide p img, 
.p-article-contents .image-size-control__normalize-wide a img, 
.p-article-contents .image-size-control__normalize-wide video {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-left: 0;
  margin-right: 0;
}



/* ------------------------------------------------------------
   各要素の左右スペースの除去
   ------------------------------------------------------------ */

.p-article-contents .space-side-removal {
	margin-left: 0;
	margin-right: 0;
}




/* 記事_キャプション
   ================================================================= */

.wp-caption {
	width: auto !important;
  margin: 1.0em 0;
  padding: 0.75em;
  background: #f3f3f3;
  text-align: center;
}

.wp-caption > img {
	display: block !important;
	width: auto !important;
	height: auto !important;
	max-width: 56.0rem !important;
  max-height: 56.0rem !important;
  margin-top: 0 !important;
}

.wp-caption > .wp-caption-text {
	margin: 0.75em 0 0 !important;
  font-size: 0.825em !important;
}

@media screen and (max-width:959px) {
.wp-caption {
}
	
.wp-caption > img {
	max-width: 60.0vw !important;
	max-height: 60.0vw !important;
}
}

@media screen and (max-width:559px) {
.wp-caption {
}
	
.wp-caption > img {
	max-width: 68.0vw !important;
	max-height: 68.0vw !important;
}
}




/* 記事_動画
   ================================================================= */


/* ------------------------------------------------------------
   videoタグ表示_WordPressビジュアル
   ------------------------------------------------------------ */

.p-article-contents .wp-video {
	max-width: 64.0rem !important;
	max-height: 64.0rem !important;
	margin: 1.0em auto;
}

.p-article-contents .wp-video video {
	width: 100% !important;
	height: auto !important;
	max-width: initial !important;
	max-height: initial !important;
	margin: 0 !important;
	padding: 0 !important;
}

@media screen and (max-width:959px) {
.p-article-contents .wp-video {
	max-width: 72.0vw !important;
	max-height: 72.0vw !important;
}
}

@media screen and (max-width:559px) {
.p-article-contents .wp-video {
	max-width: 84.0vw !important;
	max-height: 84.0vw !important;
}
}



/* ------------------------------------------------------------
   YouTubeタグ表示
   ------------------------------------------------------------ */

.p-article-contents .p-youtube {
	position: relative;
	width: 100%;
	margin: 1.0em 0;
	padding-top: 56.25%;
}

.p-article-contents .p-youtube iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}





/* ======================================================================
   記事ページでの使用を想定した機能各種
   ====================================================================== */


/* ルーレットページ用装飾コード
   ================================================================= */

/* 使用する際は、「ルーレット用の独自ページ」を作成し、FTP経由でサーバにアップする必要がある。 */
/* ページURLを、iFrameタグ内に記載し、記事内の表示させたい箇所に、iFrameタグを設置する。 */


.p-roulette-frame {
	position: relative;
	width: 100%;
	margin: 1.0em 0;
}

.p-roulette-frame:before {
	content: "";
	display: block;
	padding-top: 76%; 
}

.p-roulette-frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	border: none
}




/* [jQuery]TwentyTwenty
   ================================================================= */

/* ビフォーアフター画像の比較スクリプト */
/* reference URL: http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-twentytwenty.html */


/* ------------------------------------------------------------
   [Overwrite]
   ------------------------------------------------------------ */

.twentytwenty-container img {
	width: 100% !important;
	height: auto !important;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
}




/* [jQuery]ニュースティッカー
   ================================================================= */

/* Refernce URL: http://kachibito.net/web-design/simple-ticker.html */


.p-news-ticker {
}

.p-article-contents .ticker {
  width: 100%;
  height: 21.5rem;
  overflow: hidden;
  margin: 0 auto;
  padding: 0.5rem 1.2rem 1.0rem 1.2rem;
  border: solid 0.1rem #313131;
  list-style: none;
  font-size: 2.5rem;
}

.p-article-contents .ticker li {
  height: 7.0rem;
  margin: 0;
  padding: 0.8rem;
  border-top: 0.1rem dashed #575757;
  font-size: 1.6rem;
}

.p-article-contents .ticker li:first-child {
  border-top: none;
}

.p-article-contents .ticker li:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: 0;
  border: none;
  border-left: none;
}

.p-article-contents .p-news-ticker__heading {
  margin: 0 !important;
  padding: 0.7rem;
  background: #313131;
  color: #fff;
  font-size: 1.8rem;
  text-align: center;
}

.p-article-contents .p-article-date {
  margin: 0;
  color: #fff;
  font-size: 1.8rem;
}

@media screen and (max-width:959px) {
.p-news-ticker {
}

.p-article-contents .ticker {
  height: 18.6rem;
  padding: 0.5rem 1.0rem 1.0rem 1.0rem;
}

.p-article-contents .ticker li {
  height: 6.0rem;
  padding: 0.6rem;
  font-size: 1.4rem;
}

.p-article-contents .p-news-ticker__heading {
  margin: 0 !important;
  padding: 0.6rem;
  font-size: 1.6rem;
}

.p-article-contents .p-article-date {
  margin: 0;
  color: #fff;
  font-size: 1.6rem;
}
}

@media screen and (max-width:559px) {
.p-news-ticker {
}

.p-news-ticker .ticker {
  height: 15.7rem;
  padding: 0.5rem 1.0rem 1.0rem 1.0rem;
}

.p-news-ticker .ticker li {
  height: 5.0rem;
  padding: 0.4rem;
  font-size: 1.2rem;
}

.p-news-ticker .p-news-ticker__heading {
  margin: 0 !important;
  padding: 0.5rem;
  font-size: 1.4rem;
}

.p-article-contents .p-news-ticker .p-article-date {
  margin: 0;
  color: #fff;
  font-size: 1.4rem;
}
}




/* ======================================================================
   SNS
   ====================================================================== */


/* Instagram
   ================================================================= */

iframe.instagram-media {
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}





/* ======================================================================
   WordPress独自の指定
   ====================================================================== */


/* 記事投稿関連
   ================================================================= */


/* ------------------------------------------------------------
   画像の位置
   ------------------------------------------------------------ */

img.centered {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

img.alignright {
  display: inline !important;
  max-width: calc(50% - 1.0em) !important;
  margin: 0 0 0.75em 0.75em !important;
  padding: 0;
}

img.alignleft {
  display: inline !important;
  max-width: calc(50% - 1.0em) !important;
  margin: 0 0.75em 0.75em 0 !important;
  padding: 0;
}

.aligncenter {
	display: block !important;
	margin: 0 auto !important;
}

.alignleft {
  display: block !important;
	float: left !important;
}

.alignright {
  display: block !important;
	float: right !important;
}






/* ################################################################################
   Object_Project_Article Accessories（記事の付属情報）
   ################################################################################ */


/* ======================================================================
   Article Accessories（記事の付属情報）
   ====================================================================== */


/* Article Accessories_Common Specifications（記事の付属情報の共通指定）
   ================================================================= */


/* ------------------------------------------------------------
   「テキスト情報」が含まれる情報の共通指定
   ------------------------------------------------------------ */

/* ▽指定されている記事の付属情報
　　Comments（コメント一覧）
　　Related Posts_Custom（関連記事一覧_カスタム）
　　Article Message_Custom（記事の補足メッセージ_カスタム）
　　Author Infomation_Custom（ライター情報_カスタム）
　　Current Viewers_Custom（現在の閲覧者数_カスタム）
*/

.p-comments, 
.p-custom-related-post, 
.p-article-message, 
.p-author-infomation, 
.p-current-viewers {
	color: var(--fontcolor-article-text);
  font-family: var(--fontfamily-article-text);
	font-size: var(--fontsize-article-text);
	line-height: var(--lineheight-article-text);
  font-weight: var(--fontweight-article-text);
  letter-spacing: var(--letterspacing-article-text);
}




/* Comments（コメント一覧）[Foundation]
   ================================================================= */


/* ------------------------------------------------------------
   [Foundation]スタンダード
   ------------------------------------------------------------ */

.p-comments {
  max-width: 100%;
  margin: 0 auto var(--layout-content-margin-bottom);
  padding: 0;
}

.p-comments--form-comment {
	display: none;
}


/* コメントリスト
   ------------------------------------------------------- */

.p-comments__list {
	list-style-type: none;
	margin: 0;
	padding: 0;
}


/* コメント_親
   ------------------------------------------------------- */

.p-comments__comment {
	margin: 0 0 1.0em;
  padding: 1.0em;
  background: #fff;
  border: solid 0.1rem #bfbfbf;
}
.p-comments__comment:last-child {
	margin: 0;
}


/* コメント_子（孫以降にも反映されます。）
   ------------------------------------------------------- */

.p-comments__comment .children {
	list-style-type: none;
	margin: 1.0em 0 0;
	padding: 0;
}


/* コメント_ヘッダー
   ------------------------------------------------------- */

.p-comments__comment-header {
	margin: 0 0 1.0em;
  padding: 0;
}


/* コメント枠_情報
   ------------------------------------------------------- */

.p-comments__meta-infomation {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	color: var(--fontcolor-article-sub);
	font-size: 0.777em;
}


/* コメント枠_アバター
   ------------------------------------------------------- */

.p-comments .avatar {
	margin: 0 0.5em 0 0;
	padding: 0;
	width: 2.0em;
}


/* コメント枠_筆者
   ------------------------------------------------------- */

.p-comments__author {
	margin: 0 0.5em 0 0;
	padding: 0;
  font-style: normal;
}


/* コメント枠_日時
   ------------------------------------------------------- */

.p-comments__datetime {
	margin: 0 0.5em 0 0;
	padding: 0;
}


/* コメント枠_編集ページリンク
   ------------------------------------------------------- */

.p-comments__comment-edit {
	margin: 0 0.5em 0 0;
	padding: 0;
}

.p-comments__comment-edit .comment-edit-link {
	color: var(--fontcolor-article-sub);
}
.p-comments__comment-edit .comment-edit-link:hover {
	color: var(--fontcolor-article-sub);
}


/* コメント枠_本文
   ------------------------------------------------------- */

.p-comments__comment-body {
	margin: 0;
}

.p-comments__comment-body p {
  margin: 1.0em 0;
}

.p-comments__comment-body p:last-child {
	margin: 1.0em 0 0;
}

.p-comments__comment-body img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}


/* コメントフォーム
   ------------------------------------------------------- */

.p-comments .comment-form {
	margin: 0;
}


/* コメントフォーム_タイトル
   ------------------------------------------------------- */

.p-comments .comment-reply-title {
	margin: 0;
	padding: 0;
}


/* コメントフォーム_コメント入力欄
   ------------------------------------------------------- */

.p-comments__form-comment {
	margin: 0 0 1.0em;
}

.p-comments__form-comment-heading {
	display: block;
	margin: 0 0 0.5em;
}

.p-comments__form-comment-textarea {
  width: 100%;
  padding: 0.5em;
	border: solid 0.1rem #bfbfbf;
}


/* コメントフォーム_筆者の名前
   ------------------------------------------------------- */

.p-comments .comment-form-author {
	margin: 0 0 0.5em;
}

.p-comments .comment-form-author label {
}

.p-comments .comment-form-author input {
  width: 100%;
  padding: 0.5em;
	border: solid 0.1rem #bfbfbf;
}


/* コメントフォーム_メールアドレス
   ------------------------------------------------------- */

.p-comments .comment-form-email {
	margin: 0 0 0.5em;
}

.p-comments .comment-form-email label {
}

.p-comments .comment-form-email input {
  width: 100%;
  padding: 0.5em;
	border: solid 0.1rem #bfbfbf;
}


/* コメントフォーム_サイトURL
   ------------------------------------------------------- */

.p-comments .comment-form-url {
	margin: 0 0 0.5em;
}

.p-comments .comment-form-url label {
}

.p-comments .comment-form-url input {
  width: 100%;
  padding: 0.5em;
	border: solid 0.1rem #bfbfbf;
}


/* コメントフォーム_cookie保存の承諾チェックボックス
   ------------------------------------------------------- */

.p-comments .comment-form-cookies-consent {
	margin: 0 0 0.5em;
}

.p-comments .comment-form-cookies-consent label {
	font-size: 0.75em;
}

.p-comments .comment-form-cookies-consent input {
}


/* コメントフォーム_送信ボタン
   ------------------------------------------------------- */

.p-comments .form-submit {
	margin: 0;
	text-align: right;
}

.p-comments .form-submit input {
	padding: 0.6em 0.8em;
  background: #fff;
  border: solid 0.1rem var(--keycolor-main);
  color: var(--keycolor-main);
}
.p-comments .form-submit input:hover, 
.p-comments .form-submit input:active, 
.p-comments .form-submit input:focus {
	background: #fff;
  border: solid 0.1rem var(--keycolor-sub);
  color: var(--keycolor-sub);
}

@media screen and (max-width:959px) {
.p-comments .form-submit {
}
	
.p-comments .form-submit input {
	width: 36%;
}
}

@media screen and (max-width:559px) {
.p-comments .form-submit {
	text-align: center;
}
	
.p-comments .form-submit input {
	width: 100%;
}
}



/* ------------------------------------------------------------
   [Decoration]Simple
   ------------------------------------------------------------ */


/* コメント_親
   ------------------------------------------------------- */

.p-comments__comment--simple {
	margin: 0;
  padding: 1.0em 0;
  border: none;
	border-top: solid 0.1rem #bfbfbf;
}
.p-comments__comment--simple:last-child {
	border-bottom: solid 0.1rem #bfbfbf;
}


/* コメント_子（孫以降にも反映されます。）
   ------------------------------------------------------- */

.p-comments__comment--simple .children {
}

.p-comments__comment--simple .children .p-comments__comment--simple {
	border-bottom: none;
	padding-bottom: 0;
}


/* コメント_ヘッダー
   ------------------------------------------------------- */

.p-comments__comment-header--simple {
  padding: 0 1.0em;
}


/* コメント枠_本文
   ------------------------------------------------------- */

.p-comments__comment-body--simple {
	padding: 0 1.0em;
}



/* ------------------------------------------------------------
   [Decoration]Speech Bubble
   ------------------------------------------------------------ */


/* インナー（Speech Bubbleにて使用）
   ------------------------------------------------------- */

.p-comments__inner--speech-bubble {
	display: flex;
	padding: 0.5em;
}


/* コメント_親
   ------------------------------------------------------- */

.p-comments__comment--speech-bubble {
	margin: 0;
  padding: 0;
  border: none;
	border-top: solid 0.1rem #bfbfbf;
}
.p-comments__comment--speech-bubble:last-child {
	border-bottom: solid 0.1rem #bfbfbf;
}


/* コメント_子（孫以降にも反映されます。）
   ------------------------------------------------------- */

.p-comments__comment--speech-bubble .children {
	margin: 0;
}

.p-comments__comment--speech-bubble .children .p-comments__comment--speech-bubble {
	border-bottom: none;
	padding-bottom: 0;
}


/* コメント_ラッパー（Speech Bubbleにて使用）
   ------------------------------------------------------- */

.p-comments__comment-wrapper--speech-bubble {
	/* 計算の値：ラッパーの横幅 - アバターの横幅_ アバターのマージン右幅 */
	width: calc(100% - 2.0em - 0.5em);
  padding-left: 0.5em;
  padding-right: 0.5em;
	padding-top: 0.25em;
  padding-bottom: 0.5em;
  background: #f5f5f5;
  border-radius: 0.5em;
}


/* コメント_ヘッダー
   ------------------------------------------------------- */

.p-comments__comment-header--speech-bubble {
	display: flex;
	height: 2.0em;
	margin: 0;
  padding: 0;
}


/* コメント_アバター_ラッパー（Speech Bubbleにて使用）
   ------------------------------------------------------- */

.p-comments__avatar--speech-bubble {
	width: 2.0em;
  margin-right: 0.5em;
	padding-top: 0.25em;
}


/* コメント_アバター
   ------------------------------------------------------- */

.p-comments--speech-bubble .avatar {
	margin: 0;
	width: 2.0em;
	border-radius: 50%;
}


/* コメント枠_本文
   ------------------------------------------------------- */

.p-comments__comment-body--speech-bubble {
	margin: 0;
	padding: 0;
}

.p-comments__comment-body--speech-bubble p {
	margin: 0.5em 0;
	font-size: 0.85em;
}
.p-comments__comment-body--speech-bubble p:first-child {
	margin: 0 0 0.5em;
}
.p-comments__comment-body--speech-bubble p:last-child {
	margin: 0.5em 0 0;
}




/* Related Posts_Custom（関連記事一覧_カスタム）
   ================================================================= */


/* ------------------------------------------------------------
   カスタムフィールドで登録された「関連記事一覧」
   ------------------------------------------------------------ */

.p-custom-related-post {
	max-width: 100%;
	margin: 0 auto var(--layout-content-margin-bottom);
  padding: 0;
  background: var(--link-bgcolor);
}

.p-custom-related-post__list {
	width: 100%;
	margin: 0;
  padding: 0;
}
.p-custom-related-post__list:last-child {
}

.p-custom-related-post__link {
  display: flex;
  padding: 0.75em;
	background: var(--link-bgcolor);
  color: inherit;
}
.p-custom-related-post__link:hover,
.p-custom-related-post__link:active, 
.p-custom-related-post__link:focus {
  background: var(--link-bgcolor-hover);
  color: inherit;
  text-decoration: none;
}

.p-custom-related-post__header {
  align-self: center;
  flex-basis: 25%;
	min-width: 25%;
  padding: 0 0.75em 0 0;
}

.p-custom-related-post__body {
  display: flex;
  align-items: center;
	flex-basis: auto;
}

.p-custom-related-post__title {
	margin: 0;
	font-size: 1em;
	font-weight: normal;
}

.p-custom-related-post__thumbnail {
}

.p-custom-related-post__thumbnail-image {
	display: block;
	width: 100%;
	height: auto;
  object-fit: cover;
}

@media screen and (max-width:959px) {
.p-custom-related-post__title {
	font-size: 1.0em;
}
}

@media screen and (max-width:559px) {
.p-custom-related-post__title {
	font-size: 0.75em;
}
}




/* Article Message_Custom（記事の補足メッセージ_カスタム）
   ================================================================= */

/* カスタムフィールドで登録された「記事の補足メッセージ」 */


/* ------------------------------------------------------------
   [Foundation]
   ------------------------------------------------------------ */

.p-article-message {
  margin: 0;
  color: #4c4c4c;
}



/* ------------------------------------------------------------
   [Decoration]補足メッセージの位置揃え
   ------------------------------------------------------------ */

.p-article-message--aligin-center {
	text-align: center;
}

.p-article-message--align-right {
	text-align: right;
}



/* ------------------------------------------------------------
   [Decoration]記事本文の最下部
   ------------------------------------------------------------ */

.p-article-message--top {
  clear: both;
	margin: 1.5em var(--layout-site-bothends-padding) 0 !important;
	font-size: 0.777em;
}



/* ------------------------------------------------------------
   [Decoration]ページの下部
   ------------------------------------------------------------ */

.p-article-message--bottom {
	margin: 0 0 var(--layout-content-margin-bottom);
	padding: 0;
	font-size: 0.875em;
}



/* ------------------------------------------------------------
   [Decoration]コメント欄の下部
   ------------------------------------------------------------ */

.p-article-message--comment {
	margin: 0.5em 0 0 !important;
	font-size: 0.777em !important;
}




/* CTA Banner_Custom（CTA用バナー_カスタム）
   ================================================================= */

/* ------------------------------------------------------------
   カスタムフィールドで登録された「CTA用バナー」
   ------------------------------------------------------------ */

.p-custom-banner {
  max-width: 100%;
  margin: 0 auto var(--layout-content-margin-bottom);
  padding: 0;
}

.p-custom-banner__image {
	display: block;
  width: 100%;
  height: auto;
}

.p-custom-banner__image a {
	display: block;
}
.p-custom-banner__image a:hover {
	opacity: 0.7;
}

.p-custom-banner__image img {
	width: 100%;
	height: auto;
}




/* Author Infomation_Custom（ライター情報_カスタム）
   ================================================================= */

/* ------------------------------------------------------------
   カスタムフィールドで登録された「ライター情報」
   ------------------------------------------------------------ */

.p-author-infomation {
  margin: 0 auto var(--layout-content-margin-bottom);
  padding: 0;
	word-break: normal;
}

.p-author-infomation__row {
  display: flex;
	width: 100%;
	margin: auto;
	padding: 0;
}

.p-author-infomation__column {
}

.p-author-infomation__column:last-child {
}

.p-author-infomation__column--left {
	flex-basis: 20%;
	min-width: 20%;
  align-self: center;
  padding: 0 0.75em 0 0;
}

.p-author-infomation__column--right {
	flex-basis: auto;
  align-self: center;
  padding: 0;
}

.p-author-infomation__thumbnail {
	position: relative;
  width: 100%;
}

.p-author-infomation__thumbnail-image {
	display: block;
	width: 100%;
	height: auto;
}

.p-author-infomation__title {
  margin: 0 0 0.25em;
  font-size: 1.0em;
  font-weight: bold;
}

.p-author-infomation__text {
  margin: 0;
  font-size: 0.75em;
}

@media screen and (max-width:959px) {
.p-author-infomation__column--left {
	flex-basis: 25%;
	min-width: 25%;
}
}

@media screen and (max-width:559px) {
.p-author-infomation__column--left {
	flex-basis: 25%;
	min-width: 25%;
}
}




/* Current Viewers_Custom（現在の閲覧者数_カスタム）
   ================================================================= */

.p-current-viewers {
	position: fixed;
	z-index: 9000;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0.8em;
  background: var(--keycolor-main);
	line-height: 1;
  text-align: center;
}

.p-current-viewers__text {
	margin: 0;
}

.p-current-viewers__people-number {
  font-size: 1.35em;
  font-weight: bold;
}

.p-current-viewers__classifier {
  font-size: 0.75em;
}