/* ------------------------------------
 * レイアウト
 * ----------------------------------- */
 /* 全体 */
 #aaih-settings-wrap {
	padding: 1em;
	box-sizing: border-box;
	max-width: 850px;
	width: 100%;
	background: #fff;
}

/* 設定form 全体 */
#aaih-settings-wrap form {
	padding: 0 2em 3em;
	border: 1px solid #000;
}

#aaih-settings-wrap .form-table td p.supplement {
	margin-top: 0.75em;
}

/* オプションページ */
#aaih-settings-wrap .content3 table.options,
#aaih-settings-wrap .content3 .table-title {
	max-width: 700px;
	margin-right: 2em;
	box-sizing: border-box;
}

@media screen and ( max-width: 480px ) {
	#aaih-settings-wrap label{
		display:inline-block;
	}
	/* オプションページ */
	#aaih-settings-wrap .content3 table.options,
	#aaih-settings-wrap .content3 .table-title {
		max-width: initial;
		margin-right: initial;
	}
}

/*
 * active / passive
 * .passive は 非表示：タブメニューは例外
 */
 #aaih-settings-wrap .passive:not(.tab) {
	display: none !important;
}

/*
 * 広告コードの設定
 */
/* 全体枠 */
#aaih-settings-wrap .ad-code-all{
	border: 5px solid #d5c3aa;
	background: #fff;
}
/* 全体枠 : .no-used */
#aaih-settings-wrap .ad-code-all.no-used {
	border-color: #cbcbcb;
}
/* フォームの間はゼロ: タブと下をくっつける */
#aaih-settings-wrap .ad-select-tab td {
	padding: 0;
	margin: 0;
	vertical-align: bottom;
}

/* 広告名（Adxx）　列 */
#aaih-settings-wrap .ad-code-all > th{
	padding: 2em 0 0 1em;
}
/* 広告コード設定　列 */
#aaih-settings-wrap .ad-code-all > td{
	padding: 2em 1.5em 2em 1em;
}

/*
 * オプションテーブル
 * 設定 td 内 で共通して使用する table class="options"
 */

 #aaih-settings-wrap table.options {
	width: 100%;
	border-collapse: collapse;
	margin-top: 0.5em;
	margin-bottom: 2em;
}
 /* 最下段：全体枠の内側余白を考慮して 0 にしておく */
 #aaih-settings-wrap table.options:last-of-type {
	margin-bottom: 0;
}
/* optionテーブル前に付けるタイトル */
#aaih-settings-wrap .table-title{
	margin: 2em 0 1em;
	padding: 0.5em;
	background: #888;
	color: #fff;
}

/* オプション narrow テーブル
 * 縦方向を狭めて使いたい場合に使用する
 * table class="options narrow"
 */
#aaih-settings-wrap table.options.narrow th{
	padding-top: 10px;
	padding-bottom: 10px;
}
#aaih-settings-wrap table.options.narrow td{
	padding-top: 0;
	padding-bottom: 0;
	vertical-align: middle;
}
#aaih-settings-wrap table.options.narrow tr:not(:last-child) td.supplement{
	padding-bottom: 1em;
}

/* 上余白が必要な場合は以下を使ってそろえる */
#aaih-settings-wrap .margin-top2{
	margin-top: 2em;
}
#aaih-settings-wrap .margin-top3{
	margin-top: 3em;
}

/* ラジオボタン : 横並びの左余白 */
#aaih-settings-wrap label + label {
	margin-left: 1em;
}

/* ------------------------------------
 * タブ表示
 * ----------------------------------- */
/* タブを横並びに */
#aaih-settings-wrap .ad-code-tab,
#aaih-settings-wrap .tab-menu {
	display: flex;
}

/* タブ自体の基本デザイン*/
#aaih-settings-wrap .tab {
	flex-grow: 1;
	margin: 0 1em 0 0;
	padding: 0.5em;
	max-width: 150px;
	text-align: center;

	border: 1px solid #aaa;
	border-bottom: 0;
	background: #ddd;
	cursor: pointer;

	font-size: 90%;
}

/* activeタブ */
#aaih-settings-wrap .tab.active{
	flex-grow: 2;

	position: relative;
	cursor: initial;
	margin-top: -15px;
	bottom: -1px;

	border-radius: 5px 5px 0 0;
	border-color: #000;
	border-bottom: 1px solid #fff;

	background: #fff;
	font-size: 100%;
}

/* タブ：ホバー色*/
#aaih-settings-wrap .tab:not(.active):hover {
	transition: 0.3s;
	background: #eee;
}

/* ------------------------------------
 * タブ : 広告コード入力用にカスタマイズ
 * ----------------------------------- */
 #aaih-settings-wrap .ad-code-tab {
	justify-content: center;
	padding-left: 2em;
}
 /* タブ個別 */
#aaih-settings-wrap .ad-code-tab .tab {
	padding: 0.5em 0;
	max-width: 80px;
}
/* タブ個別：アクティブタブ */
#aaih-settings-wrap .ad-code-tab .tab.active {
	position:relative;
	border: 5px solid #d5c3aa;
	border-bottom: 0;
	margin-bottom: -4px;
}
/* タブ個別：アクティブタブ 無効な広告 */
#aaih-settings-wrap .ad-code-tab .tab.active.no-used {
	border-color: #cbcbcb
}

/* 有効な Ad は tab部文字を太文字へ */
#aaih-settings-wrap .ad-code-tab .tab.enable .ad-tab {
	color: #666;
	font-weight: 700;
}

/* 設定に使用されている Ad は tab部文字に下線を付ける */
#aaih-settings-wrap .ad-code-tab .tab.used-ad .ad-tab {
	border-bottom: 2px solid #aaaaaa;
}

/* 設定に使用されている Ad で active 表示の場合は tab部文字下線の色を変える */
#aaih-settings-wrap .ad-code-tab .tab.used-ad.active .ad-tab {
	border-color: #d5c3aa;
}

/* ------------------------------------
 * H1見出し
 * タイトルの日本語名
 * ----------------------------------- */
#aaih-settings-wrap h1 .supplement {
	display: inline-block;
	margin: 0.5em;

	color: initial;
	font-size: 0.6em;
	font-weight: 400;
}

/* H1タイトル下の説明 */
#aaih-settings-wrap h1 + .description {
	max-width: 650px;
	margin-bottom: 3em;
}
#aaih-settings-wrap h1 + .description p {
	font-size: 11px;
}

/* ------------------------------------
 * H2見出し
 * ----------------------------------- */
 /* 基本 */
 #aaih-settings-wrap h2 {
	padding: 0.5em 1em;
	margin: 2em 0 1em;

	background: #5d7589;
	border-width: 0 0 0 15px;
	border-style: solid;
	border-color: #1c3144;
	border-radius: 0 10px 10px 0;

	line-height: 1.3;
	color: #fff;
}

/* タブページごとの色分け */
/* タブ１ */
#aaih-settings-wrap .tab-content.content1 h2:nth-last-of-type(1),
#aaih-settings-wrap .tab-content.content1 h2:nth-last-of-type(1) {
	background: #988;
	border-color: #844;
}

/* タブ2, 3, 4　*/
#aaih-settings-wrap .tab-content.content2 h2,
#aaih-settings-wrap .tab-content.content3 h2,
#aaih-settings-wrap .tab-content.content4 h2{
	background: #585;
	border-color: #030;
}

/* タブ4（言語、その他）の最後（デバッグ）は色変え */
#aaih-settings-wrap .tab-content.content4 h2:nth-last-of-type(1) {
	background: #c88;
	border-color: #733;
}

/* ------------------------------------
 * 送信ボタン（変更を保存）
 * ----------------------------------- */
 #aaih-settings-wrap #submit{
	margin-top: 4em;
	transition: 0.3s;
}
#aaih-settings-wrap #submit:hover {
	background: #08c!important;
	transition: 0.3s;
}

/* ------------------------------------
 * 共通部品
 * ----------------------------------- */
/* ご注意メッセージ */
#aaih-settings-wrap .warning{
	color:#900;
}
/* input形状 */
#aaih-settings-wrap input[type="text"],
#aaih-settings-wrap input[type="number"]{
	border-radius: 0;
}
 /* select Adxx 選択 */
 #aaih-settings-wrap select.ad-select {
	min-width: 6em;
	max-width: 25em;
}
 /* インラインブロック */
#aaih-settings-wrap .inline-block{
	display: inline-block;
}
/* 補足 */
#aaih-settings-wrap .supplement {
	font-size: 11px;
	color: #666;
}
/* 強調表示 : ワードプレスの初期状態と同じだけど念のため */
#aaih-settings-wrap .highlight{
	background-color: #f0f6fc;
	color: #3c434a;
}
#aaih-settings-wrap .blink {
	animation: blinkAnime 1.5s infinite alternate;
}
@keyframes blinkAnime{
	0% {
		opacity:0
	}
	100% {
		opacity:1
	}
}
/* ------------------------------------
 * コードの表示
 * ----------------------------------- */
#aaih-settings-wrap .show-code{
	padding: 1em!important;
	white-space: pre-wrap;
	word-break: break-word;

	font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
	font-size: 90%!important;

	background: #222;
	color: #ddd;
}

/* コード中の ID , data 表示 */
#aaih-settings-wrap .show-code .id {
	color: #fe9;
}
#aaih-settings-wrap .show-code .data {
	color: #fbb;
}

/* ------------------------------------
 * リセットボタン
 * ----------------------------------- */
 #aaih-settings-wrap #reset {
	border: none;
	text-align: right;
	padding: 2em;
}

#aaih-settings-wrap #reset #reset-all-settings {
	cursor: pointer;
	font-size: 90%;
	padding: .25em 1em;
}

/* ------------------------------------
 * 各設定項目 : 広告選択
 * ----------------------------------- */

/* 全体 : 列の非表示 ) 上下を狭めてまとめる */
 #aaih-settings-wrap tr.hide > th{
	display: none;
}
/* 全体 : 列の非表示 td ) 上下を狭めてまとめる */
 #aaih-settings-wrap tr.hide > td{
	padding: 0;
	width: 100%;
}

/* 広告セレクトボックス */
#aaih-settings-wrap table.options.narrow td.onoff {
	width: 8em;
}

#aaih-settings-wrap .check-wrap,
#aaih-settings-wrap .check-wrap .check {
	display: inline-block;
	padding: 0;
	margin: 0;
	width: 5px;
}

#aaih-settings-wrap .check-wrap .check {
	background: #f88;
	border-radius: 10px;
	height: 5px;
	vertical-align: middle;
}

/* ------------------------------------
 * 各設定項目 : 広告コードの設定
 * ----------------------------------- */

/* 設定項目：表示/非表示 */
#aaih-settings-wrap .ad-code-all tr.ad-name.off,
#aaih-settings-wrap .ad-code-all tr.ad-label.off,
#aaih-settings-wrap .ad-code-all tr.ad-shortcode.off{
	display: none;
}

/* 全体を文字を少し小さく*/
#aaih-settings-wrap .ad-code-all .ad-code th,
#aaih-settings-wrap .ad-code-all .ad-code td,
#aaih-settings-wrap .ad-code-all .ad-code input,
#aaih-settings-wrap .ad-code-all .ad-code select
{
	font-size: 95%;
}

/* 設定項目ラベル */
#aaih-settings-wrap .ad-code-all table.options th{
	width: 10em;
}

/* 表示内容 内側余白 */
#aaih-settings-wrap .ad-code-all .ad-code {
	padding: 1.25em 2em 2em;
}

/* 見出し：先頭 */
#aaih-settings-wrap .ad-code-all .ad-code .table-title.first {
/* margin-top: 0.5em; */
	display: none;
}

/* どこで使っているかの設定表示 */
#aaih-settings-wrap .ad-code-all .ad-code ul.used-ad-all {
	display: block;
	margin: 0 0 1.25em 0;
}
#aaih-settings-wrap .ad-code-all .ad-code ul.used-ad-all li {
	display: inline-block;
	padding: .25em 1em;
	margin: 2px 2px 2px 0;

	border: 1px solid #ddd;
	color: #bbb;
}

#aaih-settings-wrap .ad-code-all .ad-code ul.used-ad-all li.used {
	border-color: #919191;
	color: white;
	background: #a29b88;
	border-radius: 2px;
}

/* 広告ユニットID : 下余白を少し小さくしておく（コード表示との距離を短めにしておく） */
#aaih-settings-wrap table.options.narrow.ad-unit {
	margin-bottom: 1em;
}

/* 広告ユニットID : flex で 横並びに */
#aaih-settings-wrap .ad-code-all .ad-code .ad-unit-id-item.active {
	display: flex;
	align-items: center;
}
/* 広告ユニットID : ラベル */
#aaih-settings-wrap .ad-code-all .ad-code .ad-unit-id-item .label {
	width: 8em;
	font-size:90%;
}
#aaih-settings-wrap .ad-code-all .ad-code .ad-unit-id-item .label.en {
	width: 6em;
}
#aaih-settings-wrap .ad-code-all .ad-code .ad-unit-id-item .label .ad-unit {
	font-size: 11px;
}

/* 広告ユニット選択 : 下段の補足 */
#aaih-settings-wrap .ad-code-all table.options.ad-unit .explain {
	margin: 1em 0 0;
	max-width: 530px;
}

/* 広告コード表示 : 上下の補足 */
#aaih-settings-wrap table.options.code-insert tr.caption td {
	padding-left: 0;
}
#aaih-settings-wrap table.options.code-insert tr.caption.top td {
	padding-top: 0;
	padding-bottom: 0.5em;
}
#aaih-settings-wrap table.options.code-insert tr.caption.bottom td {
	padding-top: 0;
	padding-bottom: 0;
}

/* 上下の余白 , 広告ラベル：余白 */
#aaih-settings-wrap .ad-code-all input.margin {
	width: 5em;
}

/* 広告ラベル ;上マージンの微調整 */
#aaih-settings-wrap table.options tr.ad-label td.item {
	padding-top: 10px;
}

/* 広告ラベル ; 広告との間入力 */
#aaih-settings-wrap .ad-code-all .ad-label .space {
	margin-top: 0.5em;
}
/* 広告ラベル , メモ入力 */
#aaih-settings-wrap .ad-code-all input.ad-label-input,
#aaih-settings-wrap .ad-code-all input.name {
	width: 15em;
}

/* ショートコード : ショートコードの表示 */
#aaih-settings-wrap .ad-code-all .ad-shortcode pre.shortcode{
	display: inline-block;

	padding: 0.5em 1em 0.5em 0.5em;
	margin: 0 0.5em 0.5em 0;
	overflow: initial;

	min-width: 150px;
	box-sizing: border-box;

	background-color: #f5f5f5;
}

/* ショートコード コピーボタン */
#aaih-settings-wrap .ad-shortcode .copybtn {
	display: inline-block;

	padding: 0 0.5em;
	cursor: pointer;
	border: 1px solid #988;

	background: #a99;
	color: #fff;
	line-height: 1.75;
	font-size: 90%;

	transition: 0.3s;
}
#aaih-settings-wrap .ad-shortcode .copybtn:hover {
	background: #aaa;
	border: 1px solid #999;
	transition: 0.3s;
}

#aaih-settings-wrap .ad-shortcode .copymsg {
	display: none;
}
#aaih-settings-wrap .ad-shortcode .copymsg {
	margin: 0.5em 1em 1em 0;
	padding: 0.25em 0.5em;

	border: 3px solid #8dbd8d;
	background: #fff;
	font-size: 95%;
}
#aaih-settings-wrap .ad-shortcode .copymsg.error {
	border-color: #f88;
}

/* ------------------------------------
 * 各設定項目 : 広告置き換え対応
 * ----------------------------------- */
 /* 入力全体 */
 #aaih-settings-wrap .ad-replace .replace-all {
	margin: 1em 0;
}

 /* 入力 の上余白 */
 #aaih-settings-wrap .ad-replace .replace {
	margin-top: .5em;
	font-size: 95%;
}
 /* ショートコード入力 */
#aaih-settings-wrap .ad-replace .replace input {
	display: inline-block;
	width:10em;
	background: #eee;
}
 /* ショートコード入力 : 補足表示 */
#aaih-settings-wrap .ad-replace input::placeholder {
	font-size: 95%;
}

 /* オプション */
 #aaih-settings-wrap table.ad-replace.options td {
	padding-left: 0;
}

/* 先頭の Replace */
#aaih-settings-wrap .replace.ja .head {
	display: none;
}
/* 最後の ピリオド */
#aaih-settings-wrap .replace.en .period {
	display: none;
}

/* ------------------------------------
 * 各設定項目 : Lazy Load （遅延表示）
 * ----------------------------------- */
#aaih-settings-wrap table.lazyload.options.advance.narrow td {
	padding-bottom: 10px;
}

#aaih-settings-wrap table.lazyload.options.advance td.label {
	font-weight: 600;
}

/* ------------------------------------
 * 各設定項目 : グーグルアドセンスの自動広告
 * ----------------------------------- */
 /* 上の項目との微調整 */
#aaih-settings-wrap table.adsense-auto-ad.options.code-insert {
	margin-bottom: 1em;
}

/* ------------------------------------
 * 各設定項目 : 言語選択
 * ----------------------------------- */
#aaih-settings-wrap select.language-select {
    min-width: 12em;
	padding-right:5em;
}

/* ------------------------------------
 * 各設定項目 : デバッグモード
 * ----------------------------------- */
 #aaih-settings-wrap td.summary-disable {
	min-width: 8em;
}

/* ------------------------------------
 * モバイル対応 : max-width 782px　は ワードプレス( ver 5) に合わせた値
 * ----------------------------------- */
@media screen and ( max-width: 782px ) {
	/* ページタイトル */
	#aaih-settings-wrap h1 {
		font-size: 1.75em;
	}
	/* ラベル */
	#aaih-settings-wrap label{
		display:inline-block;
	}
	#aaih-settings-wrap label + label{
		margin-left: initial;
	}
	#aaih-settings-wrap label{
		margin-right: 1em;
	}

	/* input select */
	#aaih-settings-wrap input,
	#aaih-settings-wrap select {
		max-width: 270px;

		margin-top: 3px;
		margin-bottom: 3px;
	}
	#aaih-settings-wrap select.ad-select,
	#aaih-settings-wrap input.id.pub-id {
		display: inline-block;
	}

	/* 空白の th */
	#aaih-settings-wrap th:empty {
		display: none;
	}

	/* 広告選択*/
	#aaih-settings-wrap table.options.narrow td.onoff {
		width: initial;
	}
	/* 広告コード枠 */
	#aaih-settings-wrap .ad-code-all .ad-code {
		padding: 1.25em 1em 1em;
	}
	/* 上段の設定表示 */
	#aaih-settings-wrap .ad-code-all .ad-code ul.used-ad-all li {
		padding: 0.1em 0.5em;
	}

	/* 広告ユニットID入力 */
	#aaih-settings-wrap input.ad-unit-id {
		max-width: 11em;
	}
	/* 広告ラベル ;上マージンの微調整の取り消し */
	#aaih-settings-wrap table.options tr.ad-label td.item {
		padding-top: 0;
	}

	/* オプションページ */
	#aaih-settings-wrap .content3 table.options,
	#aaih-settings-wrap .content3 .table-title {
		max-width: initial;
		margin-right: initial;
	}
	#aaih-settings-wrap .tab-content.content3 .form-table tr.hide > td {
		padding: 0;
		border: none;
	}
	/* アナリティクスID ラベル */
	#aaih-settings-wrap table.analytics.id.options td.radio{
		width: initial;
	}
}