/* CSS Document */

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

2017.9.15,19,21
HTMLエディタで入力する部分のスタイル
・エディタ内（#htmlEditter）
・確認画面（.field）

--------------------*/
#htmlEditter{padding:10px;}

/* 改行されずはみ出してしまうのを防ぐ */
#htmlEditter pre,
.field pre{white-space: normal;}

/*▼以下、実際の画面用スタイルと同様*/
#htmlEditter p,
.field p{
	margin:0;
	text-align:justify;
	text-justify:inter-ideograph;
	line-height:2;
}

/* テーブル */
#htmlEditter table,
.field table{
	width:auto !important;
	border-style:solid;
}

#htmlEditter th,
.field th,
#htmlEditter td,
.field td{
	vertical-align: top;
	padding:10px;
}

#htmlEditter th,
.field th{
	font-weight: bold;
	background-color: #eee;
}

/*見出し*/
#htmlEditter h2,
.field h2,
#htmlEditter h3,
.field h3,
#htmlEditter h4,
.field h4,
#htmlEditter h5,
.field h5,
#htmlEditter h6,
.field h6{
	margin:0 0 15px 0;
	line-height:1.2;
	font-weight:bold;
}

#htmlEditter h2,
.field h2{
    font-size:20px;
}

#htmlEditter h3,
.field h3{
	padding: 5px;
    font-size: 18px;
    border-bottom: 3px solid #ddd;
}

#htmlEditter h4,
.field h4{
	padding: 4px 6px;
    font-size: 16px;
    border-left: 6px solid #ccc;
}

#htmlEditter h5,
.field h5{
	font-size: 16px;
}

#htmlEditter h6,
.field h6{
	font-size: 16px;
}

/*リスト*/
#htmlEditter ul,
.field ul{
	padding-left:0;
}

#htmlEditter ul li,
.field ul li{
	position:relative;
	padding-left:1em;
	list-style-type:none;
}

#htmlEditter ul li:after,
.field ul li:after{
	display:block;
	content:'';
	position:absolute;
	top:.5em;
	left: .3em;
	width:4px;
	height:4px;
	background-color:#666;
	border-radius:100%;
}

#htmlEditter .sns li,
.field .sns li{padding:0;}

#htmlEditter .sns li:after,
.field .sns li:after{display:none;}

#htmlEditter ol,
.field ol{padding-left:2em;}

#htmlEditter ol li,
.field ol li{list-style-type:decimal;}

/*リンク*/
#htmlEditter a,
.field a{
	text-decoration:underline;
    color:#0B60ED;
}

#htmlEditter a:hover,
.field a:hover{text-decoration:none;}


/*
#htmlEditter,
.field{
font-family: 'ヒラギノ角ゴ W3 JIS2004','Hiragino Kaku Gothic W3 JIS2004','ヒラギノ角ゴシック Pro','Hiragino Kaku Gothic Pro',游ゴシック体,'Yu Gothic',YuGothic,メイリオ,Meiryo,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}*/

#htmlEditter em,
.field em{
	display:inline-block;
	-webkit-transform: skewX(-15deg);
    -moz-transform: skewX(-15deg);
    -o-transform: skewX(-15deg);
    transform: skewX(-15deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.26794919243112214, M21=0, M22=1, SizingMethod='auto expand')";
}

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

店舗登録の法人選択でラジオボタンが選択されているように見えてしまうのを修正

--------------------*/
.vue-picker li:after{
	display:none !important;
}

/* 太字・斜体 
#htmlEditter em,
.field em{font-style:oblique;}*/

/* リスト 
#htmlEditter ul,
#htmlEditter ol,
.field ul,
.field ol{margin-left:40px;}*/

/* 見出し 
#htmlEditter h1,
.field h1{font-size:26px; font-weight:bold !important; line-height:1.2; margin:0;}

#htmlEditter h2,
.field h2{font-size:24px; font-weight:bold; line-height:1.2; margin:0;}

#htmlEditter h3,
.field h3{font-size:22px; font-weight:bold; line-height:1.2; margin:0;}

#htmlEditter h4,
.field h4{font-size:20px; font-weight:bold; line-height:1.2; margin:0;}

#htmlEditter h5,
.field h5{font-size:18px; font-weight:bold; line-height:1.2; margin:0;}

#htmlEditter h6,
.field h6{font-size:16px; font-weight:bold; line-height:1.2; margin:0;}*/

/*#htmlEditter h1,
#htmlEditter h2,
#htmlEditter h3,
#htmlEditter h4,
#htmlEditter h5,
#htmlEditter h6,
.field h1,
.field h2,
.field h3,
.field h4,
.field h5,
.field h6{
	margin-bottom:20px;
}*/

/* 吹き出し
#htmlEditter h2,
.field h2{
	position: relative;
	padding:20px;
	background:#eee;
	margin-bottom:32px;
	border:2px solid #6BC7C1;
	background-color:#6BC7C1;
	border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;
	color:#fff;
}

#htmlEditter h2:after,
.field h2:after{
	position: absolute;
	content:'';
	top:100%;
	left:30px;
	border:12px solid transparent;
	border-top:12px solid #6BC7C1;
	width:0;
	height:0;
} */

/* 上下に線 
#htmlEditter h3,
.field h3{
	padding:20px;
	border-top: solid 3px #6BC7C1;
	border-bottom: solid 3px #6BC7C1;
}*/

/* 左に線（２色） 
#htmlEditter h4,
.field h4{
	position:relative;
    padding-left:20px;
    line-height:30px !important;
}

#htmlEditter h4:before,
.field h4:before{
	position: absolute;
    top: 0px;
    left: 0px;
    width: 7px;
    height: 20px;
    background: #6BC7C1;
    content: "";
}

#htmlEditter h4:after,
.field h4:after{
	position: absolute;
    top: 20px;
    left: 0;
    width: 7px;
    height: 10px;
    background: #41ABA4;
    content: "";
}*/

/* 背景に薄いグレーの斜めストライプ 
#htmlEditter h5,
.field h5{
	padding:20px;
	background: -webkit-repeating-linear-gradient(-45deg, #fff, #fff 3px,#eee 3px, #eee 7px);
	background: repeating-linear-gradient(-45deg, #fff, #fff 3px,#eee 3px,#eee 7px);
}*/

/* エディタ内見出しメニュー 
.mce-menu-item{
	padding:0 5px !important;
	border:0 !important;
}

.mce-menu-item span{
	display:block;
	padding:0 !important;
	border:0 !important;
	background-color:transparent !important;
	color:#333 !important;
}*/


/* ------------------------------
2021.9.8～
------------------------------ */
/*カテゴリ管理の編集のポップアップで、画面からはみ出した下部分が表示されないのを修正*/
.modal-container{
	height: 100%;
	overflow: auto;
}

/**/
#htmlEditter p img,
.field p img{
	max-width: 100%;
	height: auto;
}