@charset "UTF-8";
/*================================================
 *  style.css - ユーザー用スタイルシート
 *  ================================================
 *
 *  【索引】 ※ Ctrl+F で「#セクション名」を検索してジャンプ
 *
 *  #Variables ........... CSS変数（カラーパレット）
 *  #Reset ............... CSSリセット
 *  #Base ................ 主要デザイン（body, contents）
 *  #Header .............. ヘッダー（ロゴ・ログイン）
 *  #Footer .............. フッター
 *  #Headings ............ 見出しデザイン（h2〜h6）
 *  #Selectors ........... セレクタ（a, p, label 等）
 *  #Lists ............... リスト（ul, ol, dl）
 *  #PageTop ............. ページトップへの戻り
 *  #Modal ............... モーダルデザイン
 *  #Form ................ フォーム（input, select, textarea）
 *  #Tables .............. テーブル（list_table, form_table 等）
 *  #Pagination .......... ページネーション
 *  #TreeMenu ............ ツリーメニュー（details/summary）
 *  #Buttons ............. ボタンデザイン（btn00〜btn04）
 *  #MessageBox .......... メッセージボックス（warn, caution, info, comp）
 *  #Spacing ............. 余白ユーティリティ（MG-T, MG-B, PD-L, PD-R）
 *  #Utilities ........... その他ユーティリティ（TDC, flex_box 等）
 *  #Panel ............... マイページ - パネル
 *  #Strong .............. 強調文字
 *  #AddressSearch ....... 住所検索ボタン
 *
 ================================================*/

/*================================================
 *  #Variables - CSS変数（カラーパレット）
 ================================================*/
:root {
	--primary: #1a5276;
	--primary-dark: #0e3a55;
	--primary-light: #2980b9;
	--accent: #147ae0;
	--accent-hover: #0b66c3;
	--bg: #f4f6f8;
	--white: #ffffff;
	--text: #2c3e50;
	--text-light: #7f8c8d;
	--border: #dce1e6;
	--success: #27ae60;
	--danger: #e74c3c;
	--table-header-bg: #e8f0fe;
	--table-header-border: #b0c4d8;
	--hover-bg: var(--accent-hover);
	--shadow: 0 2px 8px rgba(0,0,0,0.08);
	--shadow-lg: 0 4px 20px rgba(0,0,0,0.12);
	--radius: 8px;
	--transition: 0.2s ease;
}
/*================================================
 *  #Reset - CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/*================================================
 *  #Base - 主要デザイン
 ================================================*/
 *, *:before, *:after {
	box-sizing: border-box;
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
         -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
            box-sizing:border-box;
}
body {
	width: 100%;
	font-size: 14px;
	color: var(--text);
	font-family: 'Noto Sans JP', "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	line-height: 1.6;
	background-color: var(--bg);
	overflow-y: auto;
	-webkit-print-color-adjust: exact;
	word-break: break-all;
}
body #contents {
	position: relative;
    width: 80%;
	margin: 20px auto;
	background: #fff;
	overflow: hidden;
	min-height: calc(100vh - (100.3px + 83.8px + 40px)); /* header+footer */
}
/*================================================
 *  #Header - ヘッダー
 ================================================*/
header {
	background: var(--white);
	border-bottom: 3px solid var(--primary);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: var(--shadow);
}
.header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
}
.logo {
	font-size: 20px;
	font-weight: 700;
	color: var(--primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}
.header-nav {
	display: flex;
	align-items: center;
	gap: 24px;
}
.header-nav a {
	text-decoration: none !important;
	color: var(--text);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: color var(--transition);
}
.header-nav a:hover { color: var(--primary); }
.cart-btn {
	position: relative;
	background: var(--primary);
	color: #fff !important;
	padding: 8px 16px;
	border-radius: var(--radius);
	font-size: 14px;
	transition: background var(--transition);
}
.cart-btn:hover { background: var(--primary-dark); }
.cart-badge {
	position: absolute;
	top: -6px; right: -6px;
	background: var(--accent);
	color: #fff;
	font-size: 11px;
	width: 20px; height: 20px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
}
.user-info {
	font-size: 13px;
	color: var(--text-light);
	display: flex;
	align-items: center;
	gap: 6px;
}
@media screen and (max-width: 768px) {
	.header-inner {
		height: auto;
		padding: 12px 16px;
		flex-direction: column;
		gap: 12px;
	}
	.logo {
		font-size: 18px;
	}
	.header-nav {
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px 16px;
		width: 100%;
	}
	.header-nav a {
		font-size: 13px;
	}
	.user-info {
		font-size: 12px;
	}
	.product_list {
		display: none;		
	}
}


/*================================================
 *  #Footer - フッター
 ================================================*/
footer {
	position: sticky;
	top: 100vh;
	width: 100%;
}
footer .copyright {
	clear: both;
	padding: 10px 0;
	font-size: 11px;
	text-align: center;
	color: rgba(255,255,255,0.7);
	background: var(--primary-dark);
}
/*================================================
 *  #Headings - 見出しデザイン
 ================================================*/
h2, h3, h4, h5, h6{
	line-height: 1.6;
}
h2 {
	margin-bottom: 0.5em;
	padding: 10px 0;
	font-size: 21px;
}
h3 {
	margin-bottom: 15px;
	padding: 8px 6px;
	color:#fff;
	font-size: 16px;
	background: #333;
}
h3 a {
	text-decoration: none;
	color:#fff;
}
h3 a:hover {
	text-decoration: underline;
	color:#00bfff;
}
h4 {
	margin-bottom: 10px;
	font-size: 16px;
	color: var(--primary);
	border-bottom: 3px solid var(--primary);
}
h5 {
	position: relative;
	margin-bottom: 0.25em;
	padding-left: 10px;
	color: var(--primary);
	font-size: 16px;
	font-weight: bold;
}
h5:before {
	content: "";
	position: absolute;
	margin-top: -9.5px;
	top: 50%;
	left: 0;
	width: 5px;
	height: 16px;
	background: var(--primary);
}
h6 {
	margin-bottom: 0.25em;
	color:#382400;
	font-size: 14px;
	font-weight: bold;
}
#contents h3:not(:first-of-type),
#contents h4:not(:first-of-type),
#contents h5:not(:first-of-type),
#contents h6:not(:first-of-type)
{
	margin-top : 30px;
}
/*================================================
 *  #Selectors - セレクタ
 ================================================*/
a {
	color:#3377ff;
	text-decoration: underline;
}
a:hover{
	cursor: pointer;
	text-decoration: none;
}
p {
	margin: 0 0 1em 0;
}
em,strong {
	font-weight: bold;
}
img {
	vertical-align: bottom;
}

/* ラベルとチェックボックスの組み合わせ */
label,
input[type="checkbox"],
input[type="radio"]
{
	cursor: pointer;
}
label {
	display: inline-block;
	vertical-align: middle;
	vertical-align: top;
}
label:hover {
	color : var(--primary-light);
}
label input[type="checkbox"],
label input[type="radio"] {
	top : 0 !important
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#b6b6b6;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:#b6b6b6;
}
::placeholder{ /* Others */
    color:#b6b6b6;
}
/*================================================
 * #Lists - リスト
 ================================================*/
ul,ol,dl {
	margin:0 0 1em 0;
}
ul li {
	list-style:disc;
}
ol li {
	list-style:decimal;
}
li {
	margin-left: 2em;
}
dt {
	margin-bottom: 0.5em;
	border-bottom: 1px dotted #ddd;
}
dt:before {
	content: "";
}
dd {
	margin-bottom: 1em;
}
.list {
	padding:0 0 0 0.5em;
}
.list li {
	margin:0;
	padding:0 0 0 15px;
	list-style:none;
	background:url(../common/images/check.png) 0 5px no-repeat;
}
/*================================================
 *  #PageTop - ページトップへの戻り
 ================================================*/
.totop {
	position: fixed;
	bottom: 15px;
	right: 15px;
}
.totop a {
	display: block;
	text-decoration: none;
}
.totop img {
	background: var(--primary);
}
.totop img:hover {
	background: var(--accent);
}
/*================================================
 * #Modal - モーダルデザイン
 ================================================*/
.modal_open {
	margin: 0;
	cursor: pointer;
}
.modal_box {
	position: fixed;
	z-index: 7777;
	display: none;
	width: 80%;
	max-width: 80%;
	margin: 0;
	padding: 70px 2vw 30px;
	border: 2px solid #aaa;
	background: #fff;
	box-sizing: border-box;
}
.modal_close {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 62px;
	font-size: 46px;
	color: #000;
	line-height: 62px;
	text-align: center;
}
.modal_close i {
	line-height: 62px;
	vertical-align: bottom;
}
.modal_bg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 6666;
	display: none;
	width: 100%;
	height: 120%;
	background-color: rgba(0,0,0,0.7);
}

/*================================================
 *  #Form - form
 ================================================*/
.button_form{
	width: 80%;
	margin: 2px auto;
	padding: 2px 0;
}
.button_form table.none {
	table-layout: fixed;
}
.button_form table.none td {
	vertical-align: top;
}
.button_form table.none td p{
	font-size: 90%;
	margin-top : 5px;
	margin-bottom: 0;
	color: #006BB9;
}
td table.none {
	margin-bottom: 0;
}

/* box_form */
form.box_form input[type="text"],
form.box_form input[type="email"],
form.box_form input[type="tel"],
form.box_form input[type="fax"],
form.box_form input[type="datetime-local"],
form.box_form input[type="number"],
form.box_form input[type="password"],
form.box_form input[type="time"],
form.box_form input[type="date"],
form.box_form select,
form.box_form textarea
{
	width : 90%;
	height: 2em;
	max-width: 90%;
	padding: 15px 5px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background-color: var(--white);
	font-size: 100%;
	font-family: inherit;
	-webkit-appearance: none;
	transition: border-color 0.2s ease;
}
form.box_form input[type="text"]:focus,
form.box_form input[type="email"]:focus,
form.box_form input[type="tel"]:focus,
form.box_form input[type="fax"]:focus,
form.box_form input[type="datetime-local"]:focus,
form.box_form input[type="password"]:focus,
form.box_form input[type="time"]:focus,
form.box_form input[type="date"]:focus,
form.box_form textarea:focus,
form.box_form select:focus
{
	box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.1);
	border: 1px solid var(--primary-light);
	background: var(--white);
}
form.box_form textarea {
	width : 100%;
	padding : 3px;
	height : 100px;
}
form.box_form select {
	width : auto;
	padding : 3px;
	-webkit-appearance: auto;
}
input[id$="zip1"] {
	width : 60px !important;
}
input[id$="zip2"] {
	width : 70px !important;
}
input[id$="tel1"],
input[id$="tel2"],
input[id$="tel3"],
.company_fax
{
	width : 70px !important;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    -moz-appearance:textfield !important;
}
/*================================================
 *  #Tables - table
 ================================================*/
table {
	width: 100%;
	margin-bottom: 1em;
	border-collapse: collapse;
	background-color :#fff;
	text-align: center;
	/* table-layout: fixed; */
}
th,td {
	padding: 5px;
	text-align: center;
	vertical-align: middle;
}

/* none */
table.none{
	border: none;
}
table.none th,
table.none td
{
	border: none !important;
	background-color: #fff !important;
}

/* 一覧テーブル */
table.list_table {
	border: 1px solid #ddd;
	font-size: 90%;
}
table.list_table th {
	border: 1px solid #ddd;
	background: #eee;
}
table.list_table td {
	border: 1px solid #ddd;
}
table.list_table [class^="btn0"]{
	width : auto;
}
/* 一覧-履歴テーブル */
table.list_table2 {
	border: 1px solid var(--table-header-border);
}
table.list_table2 th {
	border: 1px solid var(--table-header-border);
	background: var(--table-header-bg);
}
table.list_table2 td {
	border: 1px solid var(--table-header-border);
}
table.list_table2 [class^="btn0"]{
	width : auto;
}
table.list_table2 i.fa-file-alt {
	font-size: 1.5rem;
}

/* form_table */
table.form_table {
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}
table.form_table th,
table.form_table td {
	border: 1px solid #dbe1e8;
	padding: 8px;
	text-align: left;
}
table.form_table th {
	background: #eee;
	width: 200px;
}

/* form_table2 */
table.form_table2 {
	margin: 5px auto 10px;
}
table.form_table2 th,
table.form_table2 td {
	text-align: left;
	border: 1px solid var(--table-header-border);
	padding: 8px;
}
table.form_table2 th {
	background: var(--table-header-bg);
	width: 180px;
}
table.form_table2 td a[class^="btn0"]{
	margin : 0;
}

/* login_form */
table.login_form {
	width: 600px;
	border-collapse: collapse;
	margin:15px auto;
}
table.login_form th,
table.login_form td {
	border: 1px solid var(--table-header-border);
	padding: 15px 8px;
}
table.login_form th {
	width: 180px;
	text-align: left;
	background: var(--table-header-bg);
}
table.login_form td {
	text-align: left;
}
table.login_form input[type="text"],
table.login_form input[type="password"] {
	width: 100%;
}

/* レシートテーブル（申込） */
div.receipt_table {
	width : 800px;
	margin : 30px auto;
	background-color: var(--table-header-bg);
	border: 1px solid var(--table-header-border);
	border-radius: 8px;
	padding: 15px 10px;
}
div.receipt_table table {
	width: 100%;
	background-color: var(--table-header-bg);
	margin-bottom: 0;
}
div.receipt_table table th,
div.receipt_table table td
{
	padding: 15px 20px;
}
div.receipt_table table th{
	text-align: left;
}
div.receipt_table table td{
	text-align: right;
	font-size: 1.1em;
}
div.receipt_table table tr.total th,
div.receipt_table table tr.total td
{
	border-top: 1px dashed var(--table-header-border);
	padding : 20px 20px;
	font-size: 1.2em;
}


ul.text_choice_box li {
    list-style: none;
    margin-left: 1em;
    text-indent: -2em;
    padding-left: 3em;
	margin-bottom: 5px;
}




/*================================================
 *  #Pagination - ページネーション
 *================================================*/
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    background: #fefefe;
    font-size: 13px;
    position: relative;
    margin: 10px auto;
}
.pagination-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.pagination-btns div:not(.select_view) {
    min-width: 32px;
    height: 32px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: all var(--transition);
}
.pagination-btns div.select_view {
    position: absolute;
    left: 25px;
    font-size: 13px;
    color: var(--text-light);
}
.pagination-btns div:has(a.current_page) {
    background: var(--primary);
    border-color: var(--primary);
}
.pagination-btns div a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text);
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    padding: 0 8px;
}
.pagination-btns div a.current_page {
    color: #fff;
    cursor: default;
}
.pagination-btns div:hover:not(:has(a.current_page)) {
    background: #f0f4f8;
    border-color: var(--primary-light);
}
.pagination-btns div:hover a:not(.current_page) {
    color: var(--primary);
}
.pagination-btns div:has(a:not([data-page^="0"]):not([data-page^="1"]):not([data-page^="2"]):not([data-page^="3"]):not([data-page^="4"]):not([data-page^="5"]):not([data-page^="6"]):not([data-page^="7"]):not([data-page^="8"]):not([data-page^="9"])) {
    width: auto;
}

/*================================================
 *  #TreeMenu - ツリーメニュー
 ================================================*/
 div.input_area
 {
	 position: relative;
	 margin : 15px auto;
	 width : 90%;
 }
 details {
	margin-bottom : 15px;
 }
 details.tree_menu {
	 max-width: 85%;
	 border : 2px solid var(--primary);
	 border-radius: 8px;
	 margin : 0 auto 10px auto;
 }
 details.tree_menu summary {
	 padding : 15px;
	 font-size: 16px;
	 font-weight: bold;
	 letter-spacing: 0.2rem;
	 color : #fff;
	 background-color: var(--primary);
 }

details.tree_menu summary + div.tree_flex {
	padding : 15px 30px;
}
details.tree_menu summary + div.tree_flex label
{
	width: 33%;
	margin-bottom: 10px;
	font-size: 1.1rem !important;
}
details.tree_menu summary + div.tree_flex label:hover {
	color: var(--primary-light);
}
details.tree_menu summary + div {
	background-color: #dce8f0;
	padding : 15px 10px;
}
summary:hover {
	cursor: pointer;
}
/*================================================
 *  #Buttons - ボタンデザイン
 ================================================*/
/* 共通ベーススタイル */
.btn,
.btn-primary,
.btn-secondary,
.btn-accent,
.btn-danger,
.btn-remove,
.btn-add-cart,
.auth-btn,
[class^="btn0"] {
	display: inline-block;
	padding: 10px 24px;
	border-radius: var(--radius);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: all var(--transition);
	border: 1px solid transparent;
	line-height: 1.6;
	box-sizing: border-box;
}

/* プライマリ（確定、実行、ログイン、注文等） */
.btn-primary,
.auth-btn,
.btn01 {
	background-color: var(--primary);
	color: var(--white) !important;
	border-color: var(--primary);
	box-shadow: 0 4px 12px rgba(26, 82, 118, 0.2);
}
.btn-primary:hover,
.auth-btn:hover,
.btn01:hover {
	background-color: var(--primary-dark);
	border-color: var(--primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(26, 82, 118, 0.3);
}

/* セカンダリ（戻る、キャンセル等） */
.btn-secondary,
.btn02 {
	background-color: var(--white);
	color: var(--text) !important;
	border-color: var(--border);
}
.btn-secondary:hover,
.btn02:hover {
	background-color: var(--bg);
	border-color: var(--text-light);
	color: var(--text) !important;
}

/* アクセント（検索、次に、遷移等） */
.btn-accent,
.btn03 {
	background-color: var(--accent);
	color: var(--white) !important;
	border-color: var(--accent);
	box-shadow: 0 4px 12px rgba(20, 122, 224, 0.2);
}
.btn-accent:hover,
.btn03:hover {
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(20, 122, 224, 0.3);
}

/* カート追加（グラデーション） */
.btn-add-cart {
	background: linear-gradient(135deg, var(--accent) 0%, var(--primary-light) 100%);
	color: var(--white) !important;
	border: none;
	box-shadow: 0 4px 15px rgba(20, 122, 224, 0.3);
}
.btn-add-cart:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(20, 122, 224, 0.4);
}

/* デンジャー・削除（アウトライン） */
.btn-danger,
.btn-remove {
	background-color: transparent;
	color: var(--danger) !important;
	border-color: var(--danger);
	padding: 6px 16px;
	font-size: 13px;
}
.btn-danger:hover,
.btn-remove:hover {
	background-color: var(--danger);
	color: var(--white) !important;
}

/* 特殊・無効 */
.btn00 { /* 無効ボタン */
	pointer-events: none !important;
	background-color: #d7d7d7;
	border-color: #ccc;
	color: #fff !important;
	box-shadow: none;
}
.btn04 { /* 強調2 */
	background-color: var(--primary-dark);
	border-color: var(--primary-dark);
	color: var(--white) !important;
}

/* ---を用途に合わせた固有スタイル --- */
.auth-btn, .btn-add-cart {
	width: 100%;
}

/* サイズ・ユーティリティ */
.btn-lg { padding: 14px 40px; font-size: 16px; }
.btn-sm { padding: 6px 16px; font-size: 13px; }
.btn-full { width: 100%; display: block; }

/* 既存のbtn0x系の幅設定（互換用） */
[class^="btn0"] {
	width: 200px;
	margin: 0px auto;
	display: block;
}

/*================================================
 *  #MessageBox - メッセージボックス
 ================================================*/
.policy_box,
.warn_box,
.caution_box,
.info_box,
.comp_box {
   position: relative;
   border: 1px solid #333;
   border-radius: 5px;
   box-sizing: border-box;
   background: #ffeeee;
   padding: 20px 60px;
   width: 90%;
   min-height : 64px;
   margin: 15px auto;
   word-wrap: break-word;
}
.warn_box::after,
.caution_box::after,
.info_box::after,
.comp_box::after{
   position: absolute;
   top: 10px;
   left: 20px;
   font-size: 1.5rem;
   text-align: center;
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
}
.warn_box p,
.caution_box p,
.info_box p,
.comp_box p{
	margin-bottom: 0;
}
/* 警告 */
.warn_box{
   border-color: #E5411B;
   color: #E5411B;
}
.warn_box::after{
   content: "\f057";
   color: #E5411B;
}
/* 注意 */
.caution_box{
	border-color: #E5411B;
	background: #fdf5d2;
	box-sizing: border-box;
	color: #E5411B;
}
.caution_box::after{
   content: "\f071";
   color: #E5411B;
}
/* 情報 */
.info_box{
   border-color:  #1a0dab;
   color : #1a0dab;
   background: #d1e9ff;
}
.info_box::after{
   content: "\f05a";
}
/* 完了 */
.comp_box{
	border-color:  #005f10;
	color : #005f10;
	background: #eaffd1;
 }
.comp_box::after{
	content: "\f00c";
 }
.err_msg {
	color: #E5411B;
	margin-bottom: 0;
}
.err_msg::before{
	content: "\f057\00a0";
	color: #E5411B;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
 }
/*================================================
 *  #Spacing - 余白
 ================================================*/
/* Top */
.MG-T0 { margin-top: 0 !important; }
.MG-T5 { margin-top: 5px !important; }
.MG-T10 { margin-top: 10px !important; }
.MG-T15 { margin-top: 15px !important; }
.MG-T20 { margin-top: 20px !important; }
.MG-T25 { margin-top: 25px !important; }
.MG-T30 { margin-top: 30px !important; }
/* Bottom */
.MG-B0 { margin-bottom: 0 !important; }
.MG-B5 { margin-bottom: 5px !important; }
.MG-B10 { margin-bottom: 10px !important; }
.MG-B15 { margin-bottom: 15px !important; }
.MG-B20 { margin-bottom: 20px !important; }
.MG-B25 { margin-bottom: 25px !important; }
.MG-B30 { margin-bottom: 30px !important; }
/* Left */
.PD-L5 { padding-left: 5px !important; }
.PD-L10 { padding-left: 10px !important; }
.PD-L15 { padding-left: 15px !important; }
.PD-L20 { padding-left: 20px !important; }
.PD-L25 { padding-left: 25px !important; }
.PD-L30 { padding-left: 30px !important; }
/* Right */
.PD-R5 { padding-right: 5px !important; }
.PD-R10 { padding-right: 10px !important; }
.PD-R15 { padding-right: 15px !important; }
.PD-R20 { padding-right: 20px !important; }
.PD-R25 { padding-right: 25px !important; }
.PD-R30 { padding-right: 30px !important; }

/*================================================
 *  #Utilities - ＊＊＊
 ================================================*/
.TDC { text-align:center;}
.TDL { text-align:left; }
.TDR { text-align:right; }
.border_box {/* 申込者情報を受講者1に反映するで使用 */
	width : 200px;
	display: block;
	margin: 0 auto;
	padding : 5px 0;
	border : 3px solid var(--primary-light);
	border-radius: 10px;
}
.flex_box {
	display:flex;
	flex-wrap: nowrap;
	align-items: center;
}
.req {
	color: #CC0000;
}
.req_mm {
    color: #CC0000;
	font-size:90%;
}
.note {
	color: #006BB9;
}
.note_mm {
	color: #006BB9;
	font-size:90%;
}
.ui-datepicker { /*デートピッカーを最前列に表示*/
	z-index: 8888 !important;
}

/*================================================
 *  #Panel - マイページ - パネル
 ================================================*/
 /* パネル領域 */
 .panel_area {
	display: flex;
	flex-wrap: wrap;
	width: 80%;
	margin: 0 auto;
	justify-content: flex-start;
}
/* パネルデザイン */
.panel_area .panel {
	display: flex;
	flex-wrap: wrap;
	width: 50%;
	align-content: flex-start;
	margin: 0 0 20px 0;
	padding: 0px 5%;
}
/* パネルボタン */
.panel_area .p_btn {
	display: inline-flex;
    align-items: center;
    justify-content: center;
	width: 100%;
	height: 60px;
	box-sizing: border-box;
	border: 1px solid var(--accent);
	border-radius: 8px;
	font-weight: bold;
	font-size: 1.3em;
	letter-spacing: 0.3rem;
	color: #fff;
	background-color: var(--accent);
	margin-bottom: 5px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.panel_area .p_btn:hover {
	cursor: pointer;
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
}
.panel_area .anone { /* 無効デザイン */
	background-color: #696969 !important;
	border-color: #696969 !important;
	color: #c7c5c5 !important;
	pointer-events: none !important;
	-moz-user-select: none !important;
	-webkit-user-select: none !important;
	-ms-user-select: none !important;
	text-decoration:none !important;
}
/* パネルメモ */
.panel_area .p_memo {
	width: 100%;
	text-align: center;
	margin-bottom: 0;
}
/* icon */
.panel_area i{
	margin-left: 5px;
}
.panel_area .p_btn i {
	color: #fff;
}
.panel_area .anone i {
	color: #c7c5c5;
}

/*================================================
 *  #Strong - 強調文字
 ================================================*/
.strong {
	font-size: 1.5em;
	letter-spacing: 0.1em;
	font-weight: 600;
}
/*================================================
 *  #AddressSearch - 住所検索ボタン（リンク文字）
 ================================================*/
a.btn_search_addr {
	display: inline-block;
	text-decoration: none;
	margin-bottom: 1px;
}
a.btn_search_addr:hover {
	border-bottom: 1px dashed;
}
a.btn_search_addr::before {
	content : '\f002';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right : 2px;
}

/*================================================
 *  #Toast - トースト通知
 *================================================*/
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 100px);
  background: rgba(39, 174, 96, 0.95);
  color: #fff;
  padding: 16px 32px;
  border-radius: 40px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 10000;
  backdrop-filter: blur(4px);
}
.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}