@charset utf-8;


/** ================================================================================================


	Wordpress エディタースタイル

	※テンプレート用の独自拡張

	@Ver. 1.0    2023.11.06 New
	@wordpress   6.2.2


==================================================================================================== **/



/* デフォルトエディタースタイル */
@import url("css/editor-classic.css");
@import url("css/editor-block.css");





/** 以下、カスタマイズ  ================================================================ **/


:root {
	--logo-color: #c95560;
	--gochic-font-family : "Noto Sans JP", "YuGothic", "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
	--mincho-font-family : "Noto Serif JP", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
	--eng-font-family    : "Cormorant Garamond", serif;
	
	/* Chinese */
	--scn-gochic-font-family : "Noto Sans SC", sans-serif;
	--scn-mincho-font-family : "Noto Serif SC", serif;

	/* English */
	--en-gochic-font-family : "Noto Sans", sans-serif;
	--en-mincho-font-family : "Noto Serif", serif;

	/* Vietnamese */
	--vi-gochic-font-family : "Noto Sans", sans-serif;
	--vi-mincho-font-family : "Noto Serif", serif;
	
	/* base color */
	--color01 : #16314b;
	--color02 : #316689;
	--color03 : #5e8db2;
	--color04 : #e4ebf0;
	--color05 : #f4f7f9;
	--color06 : #f0e7db;
	--color07 : #dd5458;
	
	/* english title */
	--eng-title-font-family : "Cormorant Garamond", serif;
	--eng-title-font-size   : 70px;
	--eng-title-font-weight : 400;
	--eng-title-line-height : 1;
}





.classicEdit hr,
body#tinymce.wp-editor.content hr {
    height: 4px;
    margin: 3em auto;
    background: #e60013;
}



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

	見出し h3 h4 を装飾

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



.classicEdit h3, 
body#tinymce.wp-editor.content h3, 
h3.wp-block-heading {
	position: relative;
	padding-bottom: 0.8em;
	border-bottom: 4px solid #e4ebf0;
}

.classicEdit h3::after, 
body#tinymce.wp-editor.content h3::after, 
h3.wp-block-heading::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 100%;
	width: 50px;
	height: 4px;
	margin: 0;
	padding: 0;
	background-color: #316689;
background-color: #dd5458;
}

.classicEdit h3.has-text-align-center::after, 
body#tinymce.wp-editor.content h3.align-center::after, 
h3.wp-block-heading.has-text-align-center::after {
	left: 50%;
	transform: translateX(-50%);
}

.classicEdit h3.has-text-align-right::after, 
body#tinymce.wp-editor.content h3.align-right::after, 
h3.wp-block-heading.has-text-align-right::after {
	left: auto;
	right: 0;
}

.classicEdit h4, 
body#tinymce.wp-editor.content h4, 
h4.wp-block-heading {
	padding-left: 0.5em;
	border-left: 4px solid #316689;
}

.classicEdit h4, 
body#tinymce.wp-editor.content h4, 
h4.wp-block-heading {
	position: relative;
	padding-left: 0.5em;
	border-left: 4px solid #316689;
}

.classicEdit h4.align-center,
body#tinymce.wp-editor.content h4.align-center::after,
h4.wp-block-heading.has-text-align-center {
	position: relative;
	padding-left: 0;
	padding-bottom: 0.5em;
	border-left: 0;
}

.classicEdit h4.align-center::after,
body#tinymce.wp-editor.content h4.align-center::after,
h4.wp-block-heading.has-text-align-center::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: 100%;
	width: 40px;
	height: 4px;
	margin: 0;
	padding: 0;
	background-color: #316689;
	transform: translateX(-50%);
}


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

	区切り線

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


.wp-block-separator {
    border-bottom: 4px solid #e4ebf0;
}






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

	Block Group : Q & A   ※add Q and A

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



.wp-block-group.faq {}

.wp-block-group.faq > .wp-block-group__inner-container > *:first-child {
	display: block;
	position: relative;
	padding-left: 3em;
	font-weight: 700;
}

.wp-block-group.faq > .wp-block-group__inner-container > *:first-child::before {
	content: "Q";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 2em;
	height: 2em;
	margin: 0;
	padding: 0;
	
	line-height: 2em;
	text-align: center;
	color: #ffffff;

	background-color: var(--color02);
	border-radius: 50%;
}

.wp-block-group.faq > .wp-block-group__inner-container > *:last-child {
	display: block;
	position: relative;
	padding-left: 3em;
	margin-top: 0 !important;
}

.wp-block-group.faq > .wp-block-group__inner-container > *:last-child::before {
	content: "A";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 2em;
	height: 2em;
	margin: 0;
	padding: 0;
	
	line-height: 2em;
	text-align: center;
	color: #ffffff;
	font-weight: 700;

	background-color: var(--color03);
	border-radius: 50%;
}



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

	注意書きリスト ※

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



ul.kome {
	font-size: smaller;
	list-style-type: none;
}

ul.kome li {
	margin-left: 1.2em;
	text-indent: -0.8em;
}

ul.kome li::before {
	content: "* ";
}



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

	価格表

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


.wp-block-group.price .wp-block-table {
	border: 1px solid #c0c0c0;
}

.wp-block-group.price .wp-block-table tbody tr {
/*	background-color: #e4ebf0; */
}

.wp-block-group.price .wp-block-table tbody tr:nth-of-type(even) {
	background-color: #f3f6f8;
}


.wp-block-group.price .wp-block-table thead {
/*	border-bottom: 0; */
}

.wp-block-group.price .wp-block-table thead tr {
	background-color: #d4e0e8;
}



.wp-block-group.price .wp-block-table th,
.wp-block-group.price .wp-block-table td {
	border: 0;
}

.wp-block-group.price .wp-block-table tr td:first-child,
.wp-block-group.price .wp-block-table tr th:first-child {
	text-align: left;
}

.wp-block-group.price .wp-block-table tr td:last-child,
.wp-block-group.price .wp-block-table tr th:last-child {
	text-align: right;	
}

/*
.wp-block-group.price .wp-block-table thead tr th,
.wp-block-group.price .wp-block-table thead tr td {
	text-align: center;
}
*/



html[lang="en-US"] .wp-block-group.price { display: none; }
html[lang="zh-hans"] .wp-block-group.price { display: none; }
html[lang="vi-VN"] .wp-block-group.price { display: none; }






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

	Dr.衣理式はここが違う

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


.wp-block-group.erishiki {
	min-height: 200px;
	padding: 30px 30px 30px 210px;
	background-image: url("img/erishiki.jpg");
	background-position: 30px 30px;
	background-repeat: no-repeat;
	background-size: 150px auto;
/*
	border: 3px solid #5e8db2;
	border-radius: 10px;
*/	
	border: 1px solid #dd5458;
	border-radius: 0;
}

@media screen and (max-width:767px) {
	
	.wp-block-group.erishiki {
		padding: 210px 20px 20px 20px;
		background-position: center 30px;
/*
		border-width: 2px;
		border-radius: 5px;
*/
	}
}


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

	こんな方におすすめです。
	効果
	組み合わせると効果的！

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


.wp-block-group.osusume,
.wp-block-group.effects,
.wp-block-group.options {
	padding: 30px;
	background-color: #e4ebf0;
}

.wp-block-group.osusume ul,
.wp-block-group.effects ul,
.wp-block-group.options ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	list-style-type: none;
}

.wp-block-group.osusume li,
.wp-block-group.effects li,
.wp-block-group.options li {
	width: calc( 50% - 10px );
	margin: 5px;
	padding: 5px 10px;
	box-sizing: border-box;
	border: 1px solid #ffffff;
	background-color: #ffffff;
}

.wp-block-group.osusume h3.wp-block-heading,
.wp-block-group.effects h3.wp-block-heading,
.wp-block-group.options h3.wp-block-heading {
	border-bottom-color: #ffffff;
}

.wp-block-group.osusume .wp-block-column ul {
	display: block;
}

.wp-block-group.osusume .wp-block-column li {
	width: auto;
}


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

	.wp-block-group.osusume,
	.wp-block-group.effects,
	.wp-block-group.options {
		padding: 20px;
	}

	.wp-block-group.osusume li,
	.wp-block-group.effects li,
	.wp-block-group.options li {
		width: calc( 100% - 10px );
		margin: 3px 0;
	}
}



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

	スペック表

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


.wp-block-table.spec {
}

.wp-block-table.spec table {
	table-layout: auto;
	width: auto;
	max-width: 100%;
	min-width: 30%;
	margin: 0 auto;
	font-size: smaller;
}

.wp-block-table.spec tbody {}

.wp-block-table.spec tr {}

.wp-block-table.spec td {
	border-left: 0;
	border-right: 0;
}


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

	注意事項

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


.wp-block-group.notes {
	padding: 30px;
	border: 3px solid #e4ebf0;
	background-color: #ffffff;
}

.wp-block-group.notes > .wp-block-group__inner-container {}

.wp-block-group.notes h4.wp-block-heading {
	font-size: inherit;
}

.wp-block-group.notes ul {
	font-size: smaller;
}

.wp-block-group.notes li {}


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

	施術ステップ

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



.wp-block-group.steps {}

.wp-block-group.steps > .wp-block-group__inner-container {}

.wp-block-group.steps h3.wp-block-heading {}

.wp-block-group.steps .wp-block-columns {}

.wp-block-group.steps .wp-block-column {
	position: relative;
	padding: 20px;
	border: 3px solid #f0f0f0;
	background-color: #ffffff;
	box-sizing: border-box;
}

.wp-block-group.steps .wp-block-column h4.wp-block-heading {
	border-left: 0;
	padding-left: 0;
}


.wp-block-group.steps .wp-block-column::before {
	content: "1";
	display: block;
	position: absolute;
	left: 5px;
	top: 5px;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	background-color: #16314b;
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
	
	border-radius: 50%;
	overflow: hidden;
	transform: translate( -50% , -50% );
}
.wp-block-group.steps .wp-block-columns .wp-block-column:nth-child(1)::before { content: "1"; }
.wp-block-group.steps .wp-block-columns .wp-block-column:nth-child(2)::before { content: "2"; }
.wp-block-group.steps .wp-block-columns .wp-block-column:nth-child(3)::before { content: "3"; }

.wp-block-group.steps .wp-block-columns:nth-child(3) .wp-block-column:nth-child(1)::before { content: "4"; }
.wp-block-group.steps .wp-block-columns:nth-child(3) .wp-block-column:nth-child(2)::before { content: "5"; }
.wp-block-group.steps .wp-block-columns:nth-child(3) .wp-block-column:nth-child(3)::before { content: "6"; }

.wp-block-group.steps .wp-block-columns:nth-child(4) .wp-block-column:nth-child(1)::before { content: "7"; }
.wp-block-group.steps .wp-block-columns:nth-child(4) .wp-block-column:nth-child(2)::before { content: "8"; }
.wp-block-group.steps .wp-block-columns:nth-child(4) .wp-block-column:nth-child(3)::before { content: "9"; }


.wp-block-group.steps .wp-block-columns .wp-block-column.none { border: 0; background-color: transparent;}
.wp-block-group.steps .wp-block-columns .wp-block-column.none::before { display: none; }



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

	施術ステップ2

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



.wp-block-group.sequence {}

.wp-block-group.sequence > .wp-block-group__inner-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
}

.wp-block-group.sequence > .wp-block-group__inner-container > * {
	position: relative;
	width: calc( 100% / 2 - 25px );
	margin: 20px 10px 10px 15px;
	padding: 30px 20px 20px;
	box-sizing: border-box;
	border: 1px solid #16314b;
	background-color: #ffffff;
}

.wp-block-group.sequence.sequence3 > .wp-block-group__inner-container > * { width: calc( 100% / 3 - 25px ); }
.wp-block-group.sequence.sequence4 > .wp-block-group__inner-container > * { width: calc( 100% / 4 - 25px ); }

.wp-block-group.sequence > .wp-block-group__inner-container > *::before {
	content: "1";
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	background-color: #16314b;
	color: #ffffff;
	font-size: 30px;
	font-weight: 400;
	line-height: 40px;
	text-align: center;
	
	border-radius: 50%;
	overflow: hidden;
	transform: translate( -50% , -50% );
}
.wp-block-group.sequence > .wp-block-group__inner-container > *:nth-child(1)::before { content: "1"; }
.wp-block-group.sequence > .wp-block-group__inner-container > *:nth-child(2)::before { content: "2"; }
.wp-block-group.sequence > .wp-block-group__inner-container > *:nth-child(3)::before { content: "3"; }
.wp-block-group.sequence > .wp-block-group__inner-container > *:nth-child(4)::before { content: "4"; }
.wp-block-group.sequence > .wp-block-group__inner-container > *:nth-child(5)::before { content: "5"; }
.wp-block-group.sequence > .wp-block-group__inner-container > *:nth-child(6)::before { content: "6"; }
.wp-block-group.sequence > .wp-block-group__inner-container > *:nth-child(7)::before { content: "7"; }
.wp-block-group.sequence > .wp-block-group__inner-container > *:nth-child(8)::before { content: "8"; }
.wp-block-group.sequence > .wp-block-group__inner-container > *:nth-child(9)::before { content: "9"; }




/** for Smart Phone --------------------------------- **/

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

	.wp-block-group.sequence {}

	.wp-block-group.sequence > .wp-block-group__inner-container {
		display: block;
	}

	.wp-block-group.sequence > .wp-block-group__inner-container > *,
	.wp-block-group.sequence.sequence3 > .wp-block-group__inner-container > *,
	.wp-block-group.sequence.sequence4 > .wp-block-group__inner-container > *{
		width: auto;
		margin: 30px 0 10px 15px;
		padding: 30px 20px 20px;
	}
}



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

	ページ内リンク

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


ul.internals {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	list-style-type: none;
	margin: 4em 0;
}

ul.internals li {
	width: calc( 50% - 10px );
	margin: 5px;
	padding: 0;
	box-sizing: border-box;
}

ul.internals a {
	display: block;
	position: relative;
	margin: 0;
	padding: 5px 10px;
	box-sizing: border-box;
	
	border: 2px solid #316689;
	background-color: #ffffff;
	color: #316689;
	text-decoration: none;
	text-align: center;
	
	transition: all 0.3s;
}

ul.internals a::after {
	content: "";
	display: block;
	position: absolute;
	right: 10px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin: 0;
	padding: 0;
	border-top: 3px solid #316689;
	border-right: 3px solid #316689;
	transform: translateY(-50%) rotate(135deg);
}

ul.internals a:link,
ul.internals a:visited { color: #316689; }
ul.internals a:hover,
ul.internals a:active { 
	color: #ffffff;
	background-color: #316689;
	border-color: #316689;
}

ul.internals a:hover::after {
	border-top-color: #ffffff;
	border-right-color: #ffffff;
}

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

	ul.internals li {
		width: 100%;
	}
}


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


	目次


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


.wp-block-group.mokuji {
	padding: 20px;
	border: 1px solid var(--color03);
	background-color: var(--color05);
}



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


	アコーディオン


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


.wp-block-group.accordion {
	position: relative;
	
	padding: 20px;
	border:1px solid var(--color03);
}

.wp-block-group.accordion::before {
	content: "";
	display: block;
	position: absolute;
	right: 30px;
	top: 30px;
	width: 15px;
	height: 15px;
	margin: 0;
	padding: 0;
	
	border-top: 3px solid var(--color02);
	border-right: 3px solid var(--color02);
	transform: translateY(-50%) rotate(135deg);
	transition: all 0.5s;
	
	cursor: pointer;
}


.wp-block-group.accordion > .wp-block-group__inner-container {}

.wp-block-group.accordion > .wp-block-group__inner-container > *:first-child {
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 0;
	transition: all 0.5s;
	border-bottom : 0;
	cursor: pointer;
}
.wp-block-group.accordion > .wp-block-group__inner-container > *:first-child::after {
	display: none;
}

.wp-block-group.accordion > .wp-block-group__inner-container > *:last-child {
	margin-top: 0;
	margin-bottom: 0;
	max-height: 0px;
	overflow: hidden;
	transition: all 0.5s;
}


/* open */
.wp-block-group.accordion.open::before {
	transform: translateY(-50%) rotate(-45deg);
}

.wp-block-group.accordion.open > .wp-block-group__inner-container > *:first-child {
	margin-bottom: 2em;
}

.wp-block-group.accordion.open > .wp-block-group__inner-container > *:last-child {
	max-height: 10000px;
}


/* edit */
.editor-styles-wrapper .wp-block-group.accordion > .wp-block-group__inner-container > *:last-child {
	max-height: 10000px;
}