@charset "utf-8";

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

	Gutenberg・記事本文

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

/*

■WPのバージョン（違うかも）によって管理画面の構造が違うのでクラスの置換が必要です。

.editor-styles-wrapperを↓に差し替えてどれで動くか確認してください。

.edit-post-visual-editor .editor-styles-wrapper
.editor-styles-wrapper
.block-editor-iframe__body.editor-styles-wrapper

■「入力画面幅」もバージョン（違うかも）違いがあるので、適宜使い分けてください。
　※「★入力画面幅パターン②★」を検索すると該当箇所にジャンプ可能

■こちらは使用後削除してください。

*/


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

	変数

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

:root {
	/* ★common.css ＝ editor.css★ */
	--main-color: 0,157,158;
	--sub-color: 255,241,22;
	--gray-color: 240,240,240;
	--font-en: "Montserrat", sans-serif;
}

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

	エディター画面のみ

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

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

body#tinymce,
.editor-styles-wrapper,
.editor-styles-wrapper textarea  {
	/* ★common.css ＝ editor.css★ */
	line-height: 1.8;
	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 {
	width: 100%;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
}

.block-editor-iframe__body.editor-styles-wrapper,
html :where(.wp-block) {
	max-width: none;
	background-color: #FFF;
}


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

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

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

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

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

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



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

	本文

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

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

/* hx */
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
body.contents main h2,
body.contents main h3,
body.contents main h4 {
	margin-top: 40px;
	font-weight: bold;
}

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

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

/* table・ul・ol・dl・figure */
.editor-styles-wrapper table,
.editor-styles-wrapper ul,
.editor-styles-wrapper ol,
.editor-styles-wrapper dl,
.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;
}

.editor-styles-wrapper ol,
.editor-styles-wrapper ul {
	padding-left: 1.5em;
}

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

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

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

/* h3・h4 */
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
body.contents main h3,
body.contents main h4 {
	margin-bottom: 4vw;
}
	
/* table・ul・ol・dl・figure */
.editor-styles-wrapper table,
.editor-styles-wrapper ul,
.editor-styles-wrapper ol,
.editor-styles-wrapper dl,
.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;
}

}


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

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4 {
	line-height: 1.4;
}

/* h1の標準設定 */
.editor-styles-wrapper h1,
body.contents main .post h1,
.archive main h2 {
	line-height: 1.41;
	font-size: 2.125em;
	word-break: normal;
	font-weight: bold;
}

/* h2 */
.editor-styles-wrapper h2,
body.contents main h2 {
	padding: .5em 1em;
	font-size: 1.875em;
	border-top: 2px solid rgba(var(--main-color),1);
	border-bottom: 2px solid rgba(var(--main-color),1);
	color: rgba(var(--main-color),1);
}

/* h3 */
.editor-styles-wrapper h3,
body.contents main h3 {
	padding-left: .8em;
	font-size: 1.625em;
	border-left: 3px solid rgba(var(--main-color),1);
	color: rgba(var(--main-color),1); 
}

/* h4 */
.editor-styles-wrapper h4,
body.contents main h4 {
	padding: .4em 0;
	border-bottom: 1px dashed #333;
	font-size: 1.25em;
}

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

.editor-styles-wrapper h1,
body.contents main .post h1,
.archive main h2 {
	font-size: 5vw;
}

.editor-styles-wrapper h2,
body.contents main h2 {
	font-size: 4.5vw;
}

.editor-styles-wrapper h3,
body.contents main h3 {
	font-size: 4.2vw;
}

.editor-styles-wrapper h4,
body.contents main h4 {
	font-size: 4vw;
}

}

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

.editor-styles-wrapper p,
body.contents main p {
	line-height: 1.8;
	font-size: 1.125em;
}

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;
}


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

.editor-styles-wrapper li,
body.contents main li {
	line-height: 1.8;
	font-size: 1.125em;
}



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

.wp-block-table,
.wp-block-table table {
	margin: 0;
}

.wp-block-table tfoot {
	border: none;
}

.editor-styles-wrapper .wp-block-table thead,
body.contents main .wp-block-table thead{
	border-bottom: none;
}

.editor-styles-wrapper th,
.editor-styles-wrapper td,
body.contents main th,
body.contents main td {
	padding: 1.5em 1em;
	border-top: none;
	border-bottom: 2px solid #FFF;
	border-left: none;
	border-right: none;
	font-size: 1.125em;
}

.editor-styles-wrapper thead th:first-child,
.editor-styles-wrapper tbody td:first-child,
body.contents main tbody tr:first-child td:first-child,
body.contents main tbody tr:first-child th:first-child {
	width: 30%;
	min-width: 8em;
}

.editor-styles-wrapper th,
.editor-styles-wrapper tr td:first-of-type,
body.contents main th,
body.contents main tr :first-child:not(p,a,span,sup,sub) {
	background-color: rgba(var(--main-color),.2);
	font-weight: bold;
}

.editor-styles-wrapper tr:nth-child(odd) td:not(:first-of-type),
body.contents main tr:nth-child(odd) td:not(:first-of-type),
body.contents main tr:nth-child(odd) th + td {
    background-color: rgba(51,51,51,.05);
}

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

.editor-styles-wrapper thead th:first-child,
.editor-styles-wrapper tbody td:first-child,
body.contents main tbody tr:first-child td:first-child,
body.contents main tbody tr:first-child th:first-child {
	min-width: auto;
}
	
.editor-styles-wrapper th,
.editor-styles-wrapper td,
body.contents main th,
body.contents main td {
	font-size: 2.5vw;
}
	
}


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

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

.editor-styles-wrapper .wp-block-table .has-fixed-layout {
	table-layout: auto;
}


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

.editor-styles-wrapper a:not(a[href^="tel:"]),
body.contents main a:not(a[href^="tel:"]) {
	color: rgba(var(--main-color),1);
}


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

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

.editor-styles-wrapper figure.wp-block figcaption,
.editor-styles-wrapper .wp-block-image 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: center;
}

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


.editor-styles-wrapper .is-layout-flow > .wp-block[data-align="right"] figure,
.editor-styles-wrapper .is-layout-flow > .wp-block.alignright,
body.contents main .wp-block-image .alignright,
body.contents main .wp-block-image.alignright {
	float: none;
	margin-right: 0;
	margin-left: auto;
}

.editor-styles-wrapper .is-layout-flow > .wp-block[data-align="left"] figure,
.editor-styles-wrapper .is-layout-flow > .wp-block.alignleft,
body.contents main .wp-block-image .alignleft,
body.contents main .wp-block-image.alignleft {
	float: none;
	margin-right: auto;
	margin-left: 0;
}

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


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

.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,
.editor-styles-wrapper .has-inline-color.has-important-color,
.editor-styles-wrapper .has-inline-color.has-important-color a,
.editor-styles-wrapper .has-text-color.has-important-color,
.editor-styles-wrapper .has-text-color.has-important-color a {
	background: none;
	color: rgba(180,0,20,1);
}

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

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

.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: 600px;
}

.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;
}

}


/* ギャラリー（管理画面用）
------------------------------------------------------------------------------*/

.editor-styles-wrapper .wp-block-gallery {
	display: flex !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	flex-wrap: wrap !important;
	gap: 0 !important;
	--wp--style--unstable-gallery-gap: 0 !important;
	width: 100% !important;
}

.editor-styles-wrapper .wp-block-gallery figure {
	flex-grow: 0 !important;
	margin: 0 3% 25px 0 !important;
}

.editor-styles-wrapper .wp-block-gallery figure figcaption {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	bottom: auto !important;
	background: none !important;
	color: inherit !important;
}

/* 1-2 */
.editor-styles-wrapper .wp-block-gallery.columns-default figure,
.editor-styles-wrapper .wp-block-gallery.columns-2 figure {	width: 48.5% !important;}
.editor-styles-wrapper .wp-block-gallery.columns-2 figure:nth-child(2n) { margin-right: 0 !important;}

/* 3 */
.editor-styles-wrapper .wp-block-gallery.columns-3 figure { width: calc(94% / 3) !important;}
.editor-styles-wrapper .wp-block-gallery.columns-3 figure:nth-child(3n) { margin-right: 0 !important;}

/* 4 */
.editor-styles-wrapper .wp-block-gallery.columns-4 figure { width: calc(91% / 4) !important;}
.editor-styles-wrapper .wp-block-gallery.columns-4 figure:nth-child(4n) { margin-right: 0 !important;}

/* 5 */
.editor-styles-wrapper .wp-block-gallery.columns-5 figure { width: calc(88% / 5) !important;}
.editor-styles-wrapper .wp-block-gallery.columns-5 figure:nth-child(5n) { margin-right: 0 !important;}

/* 6 */
.editor-styles-wrapper .wp-block-gallery.columns-6 figure { width: calc(85% / 6) !important;}
.editor-styles-wrapper .wp-block-gallery.columns-6 figure:nth-child(6n) { margin-right: 0 !important;}

/* 7 */
.editor-styles-wrapper .wp-block-gallery.columns-7 figure { width: calc(82% / 7) !important;}
.editor-styles-wrapper .wp-block-gallery.columns-7 figure:nth-child(7n) { margin-right: 0 !important;}

/* 8 */
.editor-styles-wrapper .wp-block-gallery.columns-8 figure { width: calc(79% / 8) !important;}
.editor-styles-wrapper .wp-block-gallery.columns-8 figure:nth-child(8n) { margin-right: 0 !important;}

/* 注意事項 */
.components-panel__body:not(.blocks-table-settings) > div.components-base-control.components-range-control::after {
	content: "ギャラリーの追加時に並べたい個数がうまく認識されない場合があります。上部のカラムの数値を増減して調整してください。（写真が横並びになる最大数：8）";
	display: block;
	margin-top: 2em;
	padding: 1.25em;
	background-color: rgba(0,0,0,.05);
	white-apace: pre;
}

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

.editor-styles-wrapper .wp-block-gallery.columns-default figure {
	width: 48.5% !important;
}

.editor-styles-wrapper .wp-block-gallery figure:nth-child(2n) {
	margin-left: 0 !important;
}

}


/* ギャラリー
------------------------------------------------------------------------------*/

body.contents main .custom_original_gallery {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0;
	margin-bottom: 0;
}

body.contents main .custom_original_gallery figure {
	margin: 0 3% 3% 0;
}

/* 1-2 */
body.contents main .custom_original_gallery.columns-default figure,
body.contents main .custom_original_gallery.columns-2 figure { width: 48.5%;}
body.contents main .custom_original_gallery.columns-default figure:nth-child(2n),
body.contents main .custom_original_gallery.columns-2 figure:nth-child(2n) { margin-right: 0;}

/* 3 */
body.contents main .custom_original_gallery.columns-3 figure { width: calc(94% / 3);}
body.contents main .custom_original_gallery.columns-3 figure:nth-child(3n) { margin-right: 0;}

/* 4 */
body.contents main .custom_original_gallery.columns-4 figure { width: calc(91% / 4);}
body.contents main .custom_original_gallery.columns-4 figure:nth-child(4n) { margin-right: 0;}

/* 5 */
body.contents main .custom_original_gallery.columns-5 figure { width: calc(88% / 5);}
body.contents main .custom_original_gallery.columns-5 figure:nth-child(5n) { margin-right: 0;}

/* 6 */
body.contents main .custom_original_gallery.columns-6 figure { width: calc(85% / 6);}
body.contents main .custom_original_gallery.columns-6 figure:nth-child(6n) { margin-right: 0;}

/* 7 */
body.contents main .custom_original_gallery.columns-7 figure { width: calc(82% / 7);}
body.contents main .custom_original_gallery.columns-7 figure:nth-child(7n) { margin-right: 0;}

/* 8 */
body.contents main .custom_original_gallery.columns-8 figure { width: calc(79% / 8);}
body.contents main .custom_original_gallery.columns-8 figure:nth-child(8n) { margin-right: 0;}


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

body.contents main .custom_original_gallery.columns-3 figure,
body.contents main .custom_original_gallery.columns-3 figure:nth-child(n),
body.contents main .custom_original_gallery.columns-4 figure,
body.contents main .custom_original_gallery.columns-4 figure:nth-child(n),
body.contents main .custom_original_gallery.columns-5 figure,
body.contents main .custom_original_gallery.columns-5 figure:nth-child(n),
body.contents main .custom_original_gallery.columns-6 figure,
body.contents main .custom_original_gallery.columns-6 figure:nth-child(n),
body.contents main .custom_original_gallery.columns-7 figure,
body.contents main .custom_original_gallery.columns-7 figure:nth-child(n),
body.contents main .custom_original_gallery.columns-8 figure,
body.contents main .custom_original_gallery.columns-8 figure:nth-child(n) {
	 width: 48.5%;
	 margin-right: 3%;
	 margin-bottom: 3%;
}

body.contents #content main .custom_original_gallery figure:nth-child(2n) {
	margin-right: 0;
}

}