@charset "utf-8";

/*//////////////////////////////////////////////////////////////////////////////

	Gutenberg・記事本文

//////////////////////////////////////////////////////////////////////////////*/

/*------------------------------------------------------------------------------

	変数

------------------------------------------------------------------------------*/

:root {
	/* ★common.css ＝ editor.css★ */
	--main-color: 31,82,142;
	--sub-color: 248,158,176;
	--accent-color: 28,156,189;
}

/*------------------------------------------------------------------------------

	エディター画面のみ

------------------------------------------------------------------------------*/

/* 全体
------------------------------------------------------------------------------*/

body#tinymce,
.edit-post-visual-editor .editor-styles-wrapper,
.edit-post-visual-editor .editor-styles-wrapper textarea  {
	/* ★common.css ＝ editor.css★ */
	line-height: 1.6;
	font-family: YuGothic,"游ゴシック","メイリオ",Meiryo,sans-serif,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,verdana,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	font-size: 16px;
	font-weight: 500;
	color: rgba(35,35,0,1);
  	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt";
}

/* 入力画面幅
------------------------------------------------------------------------------*/

.edit-post-visual-editor__post-title-wrapper,
.block-editor-block-list__layout {
	margin: 0 auto;
	width: 90%;
	max-width: 800px;
}


/* マージン上下
------------------------------------------------------------------------------*/

/* hx */
.edit-post-visual-editor .editor-styles-wrapper h2,
.edit-post-visual-editor .editor-styles-wrapper h3,
.edit-post-visual-editor .editor-styles-wrapper h4,
.edit-post-visual-editor .editor-styles-wrapper h5,
.edit-post-visual-editor .editor-styles-wrapper h6,
body.contents main h2,
body.contents main h3,
body.contents main h4,
body.contents main h5,
body.contents main h6 {
	margin-top: 50px;
	font-weight: bold;
}

/* h2 */
.edit-post-visual-editor .editor-styles-wrapper h2,
body.contents main h2 {
	margin-bottom: 48px;
}

/* h3・h4・h5・h6 */
.edit-post-visual-editor .editor-styles-wrapper h3,
.edit-post-visual-editor .editor-styles-wrapper h4,
.edit-post-visual-editor .editor-styles-wrapper h5,
.edit-post-visual-editor .editor-styles-wrapper h6,
.edit-post-visual-editor .editor-styles-wrapper table,
body.contents main h3,
body.contents main h4,
body.contents main h5,
body.contents main h6,
body.contents main table {
	margin-bottom: 25px;
}

/* table・ul・ol・dl・figure */
.edit-post-visual-editor .editor-styles-wrapper table,
.edit-post-visual-editor .editor-styles-wrapper ul,
.edit-post-visual-editor .editor-styles-wrapper ol,
.edit-post-visual-editor .editor-styles-wrapper dl,
.edit-post-visual-editor .editor-styles-wrapper figure,
body.contents main table,
body.contents main ul,
body.contents main ol,
body.contents main dl,
body.contents main figure {
	margin-top: 25px;
	margin-bottom: 25px;
}

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

/* hx */
.edit-post-visual-editor .editor-styles-wrapper h2,
.edit-post-visual-editor .editor-styles-wrapper h3,
.edit-post-visual-editor .editor-styles-wrapper h4,
.edit-post-visual-editor .editor-styles-wrapper h5,
.edit-post-visual-editor .editor-styles-wrapper h6,
body.contents main h2,
body.contents main h3,
body.contents main h4,
body.contents main h5,
body.contents main h6 {
	margin-top: 7vw;
}

/* h2 */
.edit-post-visual-editor .editor-styles-wrapper h2,
body.contents main h2 {
	margin-bottom: 5vw;
}

/* h3・h4・h5・h6 */
.edit-post-visual-editor .editor-styles-wrapper h3,
.edit-post-visual-editor .editor-styles-wrapper h4,
.edit-post-visual-editor .editor-styles-wrapper h5,
.edit-post-visual-editor .editor-styles-wrapper h6,
body.contents main h3,
body.contents main h4,
body.contents main h5,
body.contents main h6 {
	margin-bottom: 4vw;
}
	
/* table・ul・ol・dl・figure */
.edit-post-visual-editor .editor-styles-wrapper table,
.edit-post-visual-editor .editor-styles-wrapper ul,
.edit-post-visual-editor .editor-styles-wrapper ol,
.edit-post-visual-editor .editor-styles-wrapper dl,
.edit-post-visual-editor .editor-styles-wrapper figure,
body.contents main table,
body.contents main ul,
body.contents main ol,
body.contents main dl,
body.contents main figure {
	margin-top: 4vw;
	margin-bottom: 4vw;
}

}


/* 見出し
------------------------------------------------------------------------------*/

/* h1にあたるtextareaの標準設定 */
.edit-post-visual-editor .editor-styles-wrapper .editor-post-title__block textarea {
	line-height: 1.6;
	font-size: 2em;
	word-break: normal;
	font-weight: bold;
}

/* h1 */

body.contents main .post header {
	position: relative;
	margin-bottom: 50px;
    padding-bottom: 30px;
}

body.contents main .post header h1 {
	position: relative;
	padding-bottom: .5em;
	font-size: 2em;
	font-weight: bold;
	color: rgba(var(--main-color),1);
}

body.contents main .post header::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	content: "";
	width: 100%;
	height: 10px;
	background-image: repeating-linear-gradient(-45deg, rgba(var(--main-color),1) 0, rgba(var(--main-color),1) 1px, transparent 0, transparent 50%);
	background-size: 9px 9px;
}

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

body.contents main .post header {
	margin-bottom: 8vw;
	padding-bottom: 8vw;
}	
	
body.contents main .post header h1 {
	font-size: 6vw;
	padding-bottom: 3vw;
}
	
}


/* h2 */
.edit-post-visual-editor .editor-styles-wrapper h2,
body.contents main h2 { 
	padding: .65em 1em;
	font-size: 1.25em;
	background-color: rgba(var(--main-color),.15);
}

/* h3 */
.edit-post-visual-editor .editor-styles-wrapper h3,
body.contents main h3 {
	padding-bottom: .5em;
	font-size: 1.125em;
	border-bottom: 1px solid rgba(var(--main-color),.4);
}

/* h4 */
.edit-post-visual-editor .editor-styles-wrapper h4,
body.contents main h4 {
	padding: .4em 0 .4em 1em;
	border-left: 2px solid rgba(35,35,0,.2);
}

/* h5 */
.edit-post-visual-editor .editor-styles-wrapper h5,
body.contents main h5 {
	color: rgba(var(--main-color),1);
}

/* h6 */
.edit-post-visual-editor .editor-styles-wrapper h6,
body.contents main h6 {
	font-size: .875em;
	font-style: italic;
}


/* 段落
------------------------------------------------------------------------------*/

.edit-post-visual-editor .editor-styles-wrapper p,
body.contents main p {
	line-height: 1.8;
}

body.contents main .has-text-align-right {
	text-align: right;
}

body.contents main .has-text-align-center {
	text-align: center;
}

body.contents main .has-text-align-left {
	text-align: left;
}


/* リスト
------------------------------------------------------------------------------*/

.edit-post-visual-editor .editor-styles-wrapper li,
body.contents main li {
	line-height: 1.8;
}



/* テーブル
------------------------------------------------------------------------------*/

.edit-post-visual-editor .editor-styles-wrapper th,
.edit-post-visual-editor .editor-styles-wrapper td,
body.contents main th,
body.contents main td {
	padding: .6em 1em;
	border: 1px solid rgba(var(--main-color),1);
}

.edit-post-visual-editor .editor-styles-wrapper th,
.edit-post-visual-editor .editor-styles-wrapper tr td:first-of-type,
body.contents main th,
body.contents main tr td:first-child {
	min-width: 8em;
	background-color: rgba(var(--main-color),.1);
}

.edit-post-visual-editor .editor-styles-wrapper thead th,
body.contents main thead th {
	background-color: rgba(var(--main-color),.6);
	font-weight: bold;
	color: #FFF;
	text-align: center;
}


/* テーブル（管理画面用）
------------------------------------------------------------------------------*/

.edit-post-visual-editor .editor-styles-wrapper .wp-block-table {
	width: 100%;
}


/* アンカー
------------------------------------------------------------------------------*/

.edit-post-visual-editor .editor-styles-wrapper a,
body.contents main a {
	color: rgba(var(--main-color),1);
}


/* 画像
------------------------------------------------------------------------------*/

.edit-post-visual-editor .editor-styles-wrapper figure.wp-block,
body.contents main figure.wp-block-image,
body.contents main .wp-block-image figure {
	display: table;
}

.edit-post-visual-editor .editor-styles-wrapper figure.wp-block figcaption,
body.contents main figure.wp-block-image figcaption,
body.contents main .wp-block-image figure figcaption {
	display: table-caption;
	caption-side: bottom;
	text-align: left;
}

body.contents main .wp-block-image .aligncenter {
	margin-right: auto;
	margin-left: auto;
}

.edit-post-visual-editor .editor-styles-wrapper .wp-block[data-align="center"] figcaption,
body.contents main .wp-block-image .aligncenter figcaption {
	text-align: center;
}

.edit-post-visual-editor .editor-styles-wrapper .wp-block[data-align="left"] figcaption,
body.contents main .wp-block-image .alignright figcaption {
	text-align: left;
}

.edit-post-visual-editor .editor-styles-wrapper .wp-block[data-align="right"] figcaption,
body.contents main .wp-block-image .alignright figcaption {
	text-align: right;
}

.edit-post-visual-editor .editor-styles-wrapper .wp-block[data-align="right"] figure,
body.contents main .wp-block-image .alignright {
	margin-left: auto;
}

body.contents main figure img {
	height: auto;
}

/* 画像（管理画面用）
------------------------------------------------------------------------------*/

.edit-post-visual-editor .editor-styles-wrapper .wp-block[data-align="left"],
.edit-post-visual-editor .editor-styles-wrapper .wp-block[data-align="right"],
.edit-post-visual-editor .editor-styles-wrapper .wp-block[data-align="left"] > *,
.edit-post-visual-editor .editor-styles-wrapper .wp-block[data-align="right"] > * {
	float: none;
	height: auto;
}

.edit-post-visual-editor .editor-styles-wrapper .wp-block[data-align="right"] > .wp-block-image {
	float: right;
	margin: 0;
}

.edit-post-visual-editor .editor-styles-wrapper .wp-block[data-align="right"]:after {
	display: block;
	content: "";
	clear: both;
	height: 0;
}

.edit-post-visual-editor .editor-styles-wrapper .wp-block-table table + figcaption {
	display: none;
}

.edit-post-visual-editor .editor-styles-wrapper .wp-block {
	margin-left: 0;
}


/* ドロップキャップ打ち消し
------------------------------------------------------------------------------*/

.edit-post-visual-editor .editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter {
	float: none;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	margin: 0;
	text-transform: none;
	font-style: inherit;
}


/* カラー設定
------------------------------------------------------------------------------*/

body.contents main .has-inline-color.has-important-color,
body.contents main .has-inline-color.has-important-color a,
body.contents main .has-text-color.has-important-color,
body.contents main .has-text-color.has-important-color a,
.edit-post-visual-editor .editor-styles-wrapper .has-inline-color.has-important-color,
.edit-post-visual-editor .editor-styles-wrapper .has-inline-color.has-important-color a,
.edit-post-visual-editor .editor-styles-wrapper .has-text-color.has-important-color,
.edit-post-visual-editor .editor-styles-wrapper .has-text-color.has-important-color a {
	background: none;
	color: rgba(180,0,20,1);
}

body.contents main .has-inline-color,
.edit-post-visual-editor .editor-styles-wrapper .has-inline-color,
.edit-post-visual-editor .editor-styles-wrapper .has-important-background-color {
	background-color: transparent !important;
}

body.contents main .has-inline-color,
body.contents main .has-background.has-important-background-color,
.edit-post-visual-editor .editor-styles-wrapper .has-inline-color,
.edit-post-visual-editor .editor-styles-wrapper .has-background.has-important-background-color {
	display: inline;
	background:linear-gradient(transparent 70%, rgba(180,0,20,.2) 70%);
	color: inherit;
}

.edit-post-visual-editor .editor-styles-wrapper .has-background {
	padding: 0;
}


/* 本文のスタイルを継承したくないものをリセット
------------------------------------------------------------------------------*/

/* 記事内アーカイブ部分 */
body.contents main .article h2,
body.contents main .category h2,
body.contents main .year h2 {
	margin: 0;
	padding: 0;
	font-size: 1em;
	background: none;
	border: none;
}


/* 埋め込み
------------------------------------------------------------------------------*/

.iframe_content {
	position: relative;
	width: 100%;
	margin: 2em 0;
}

iframe.instagram-media {
	margin: 2em auto !important;
}

.twitter-tweet,
.wp-block-embed.wp-block-embed-twitter,
.iframe_content.youtube,
.iframe_content.facebook {
	margin-right: auto;
	margin-left: auto;
}

.iframe_content.youtube {
	max-width: 1200px !important;
}

.iframe_content.youtube iframe,
.iframe_content.gmap iframe {
	width: 100%;
	height: 100%;
}

.fb_iframe_widget_fluid span,
.iframe_content.facebook,
.post .fb_iframe_widget {
	background-color: #FFF;
}

.iframe_content.facebook {
	width: max-content;
}

.fb_iframe_widget_fluid span {
    max-width: 100% !important;
}

.iframe_content.youtube,
.iframe_content.gmap {
     position: relative;
	 aspect-ratio: 16 / 9;
     overflow: hidden;
}

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

.iframe_content.gmap {
	 aspect-ratio: 4 / 3;
}

}

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

.iframe_content.gmap {
	 aspect-ratio: 1 / 1;
}

.iframe_content.facebook {
	width: auto;
}

}


/* コード
------------------------------------------------------------------------------*/

.wp-block-code {
	position: relative;
	margin-top: 1em;
	padding: 2.5em 1em 1em;
	background-color: rgba(0,0,0,.05);
}

.wp-block-code::before {
	position: absolute;
	left: 0;
	top: 0;
	content: "code";
	padding: .5em 1em;
	background-color: rgba(0,0,0,.05);
	font-size: .875em;
	line-height: 1;
}

.wp-block-code code {
	font-size: .875em;
}