@charset "UTF-8";

/************************************************************************
 * 外部フォント
 ************************************************************************/
@font-face {
	font-family: "CM+1cT";
	src: url(font/circle-mplus-1c-thin.ttf) format("truetype"), local(sans-serif);
	font-display: swap;
}
@font-face {
	font-family: "CM+1cL";
	src: url(font/circle-mplus-1c-light.ttf) format("truetype"), local(sans-serif);
	font-display: swap;
}
@font-face {
	font-family: "CM+1cR";
	src: url(font/circle-mplus-1c-regular.ttf) format("truetype"), local(sans-serif);
	font-display: swap;
}
@font-face {
	font-family: "CM+1cM";
	src: url(font/circle-mplus-1c-medium.ttf) format("truetype"), local(sans-serif);
	font-display: swap;
}
@font-face {
	font-family: "CM+1cB";
	src: url(font/circle-mplus-1c-bold.ttf) format("truetype"), local(sans-serif);
	font-display: swap;
}
@font-face {
	font-family: "CM+1cH";
	src: url(font/circle-mplus-1c-heavy.ttf) format("truetype"), local(sans-serif);
	font-display: swap;
}
@font-face {
	font-family: "CM+1cBL";
	src: url(font/circle-mplus-1c-black.ttf) format("truetype"), local(sans-serif);
	font-display: swap;
}
@font-face {
	font-family: "CM+1mT";
	src: url(font/circle-mplus-1m-thin.ttf) format("truetype"), local(monospace);
	font-display: swap;
}
@font-face {
	font-family: "CM+1mL";
	src: url(font/circle-mplus-1m-light.ttf) format("truetype"), local(monospace);
	font-display: swap;
}
@font-face {
	font-family: "CM+1mR";
	src: url(font/circle-mplus-1m-regular.ttf) format("truetype"), local(monospace);
	font-display: swap;
}
@font-face {
	font-family: "CM+1mM";
	src: url(font/circle-mplus-1m-medium.ttf) format("truetype"), local(monospace);
	font-display: swap;
}
@font-face {
	font-family: "CM+1mB";
	src: url(font/circle-mplus-1m-bold.ttf) format("truetype"), local(monospace);
	font-display: swap;
}
@font-face {
	font-family: "RM+1mR";
	src: url(font/rounded-mplus-1m-regular.ttf) format("truetype"), local(monospace);
	font-display: swap;
}
@font-face {
	font-family: "RxM+1cR";
	src: url(font/rounded-x-mplus-1c-regular.ttf) format("truetype"), local(monospace);
	font-display: swap;
}
@font-face {
	font-family: "RxM+1mL";
	src: url(font/rounded-x-mplus-1m-light.ttf) format("truetype"), local(monospace);
	font-display: swap;
}
@font-face {
	font-family: "Mgen+1m";
	src: url(font/mgenplus-1m-regular.ttf) format("truetype"), local(monospace);
	font-display: swap;
}
@font-face {
	font-family: "VLゴシック";
	src: url(font/VL-Gothic-Regular.woff) format("woff"), local(monospace);
	font-display: swap;
}
@font-face {
	font-family: "VLPゴシック";
	src: url(font/VL-PGothic-Regular.woff) format("woff"), local(sans-serif);
	font-display: swap;
}
@font-face {
	font-family: "やさしさアンチック";
	src: url(font/YasashisaAntique.otf) format("otf"), local(cursive);
	font-display: swap;
}
@font-face {
	font-family: "はんなり明朝";
	src: url(font/HannariMincho-Regular.otf) format("otf"), local(serif);
	font-display: swap;
}

/************************************************************************
 * メディア別設定
 ************************************************************************/
@media (max-width:576px) { :root {
	--font-size: 16px;
}}
@media (max-width:425px) { :root {
	--font-size: 14px;
}}
@media (max-width:375px) { :root {
	--font-size: 12px;
}}
@media (max-width:320px) { :root {
	--font-size: 10px;
}}

/************************************************************************
 * 共通デザイン
 ************************************************************************/
* {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-drag: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
	margin: 0px;
	padding: 0px;
	font-family: "RxM+1mL";
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
html,
body {
	font-size: var(--font-size);
	height: 100%;
}
a {
	cursor: pointer;
}
main {
	max-width: 720px;
	margin: 0.5rem auto;
	overflow-x: hidden;
}
.FormTitle {
	padding: 0;
	margin-bottom: 3rem;
}
.FormTitle span {
	position: relative;
	font-size: 2rem;
}
.FormTitle span::after {
	position: absolute;
	content: "";
	background-color:#084298;	/*下線の色*/
	width:40%;					/*線の幅*/
	height:3px;					/*線の太さ*/
	bottom:-0.4em;				/*線のタテ位置*/
	left:50%;					/*線のヨコ位置*/
	transform:translateX(-50%);	/*線のヨコ位置*/
}
.SectionTopMargin {
	margin-top: 3rem;
}
.SectionTitle {
	padding: 0 0.3em 0.1em 0.3em;
}
.BlockTopMargin {
	margin-top: 3rem;
}
.BlockTitle {
	border-bottom: solid 2px #084298;
	padding: 0 0.3em 0.1em 0.3em;
}
.NoBadge {
	display: none;
}
.NoDisplay {
	display: none;
}
.NoticeMessage {
	color: red;
}

/* モバイル向け設定 */
@media (max-width:576px) {
html,body,main {
	width: 100%;
	padding: 0;
	margin: 0;
}
}

/************************************************************************
 * Bootstrap5 デザイン変更
 ************************************************************************/
.howms-form-main ul,
.howms-form-main dl,
.howms-form-main ol {
	margin-top: 0;
	margin-bottom: 0;
}
.howms-form-main .form-control.is-invalid,
.howms-form-main .was-validated .form-control:invalid,
.howms-form-main .was-validated .form-select:invalid,
.howms-form-main .was-validated .form-check-input:invalid {
	background-color: #ffeeee;
}
.howms-form-main .form-check-label {
	white-space: normal;
	text-align: start;
}
.howms-form-main .input-group-text {
	text-align: start;
}
.howms-form-main span.badge {
	height: 2em;
	line-height: 1.25em;
}

/* モバイル向け設定 */
@media (max-width:576px) {
.howms-form-main .container {
	padding: 0;
	margin: 0;
}
}

/************************************************************************
 * パーツスタイル
 ************************************************************************/
div.HeaderMessage {
	margin: 0 0 0.5em 0;
}
div.FooterMessage {
	margin: 1em 0 0 0;
}

.PartsMessage {
}

.PartsGroup1 {
}
.PartsGroup1 .MethodLabel {
}
.PartsGroup1 .MethodSingletext {
}
.PartsGroup1 .MethodSingletext2 {
}
.PartsGroup1 .MethodSingletext3 {
}
.PartsGroup1 .MethodMultitext {
}
.PartsGroup1 .MethodRadio {
}
.PartsGroup1 .MethodSelect {
}
.PartsGroup1 .MethodCheckbox {
}
.PartsGroup1 .MethodFile {
}

.PartsGroup2 {
}
.PartsGroup2 .MethodLabel {
}
.PartsGroup2 .MethodRadio {
}
.PartsGroup2 .MethodSelect {
}
.PartsGroup2 .MethodCheckbox {
}

.PartsUserId {
}

.PartsName {
}

.PartsMailAddress {
}

.PartsAddress {
}

.PartsPayment {
}

.PartsSM {
}

.PartsBBDA {
}

.PartsFTA {
}

/* ポップアップダイアログ */
.PopupDialog {
}

/*----------------------------------------------------------------------*
 | 料金計算用
 *----------------------------------------------------------------------*/
.PartsCalcCommon > table {
	border-collapse: separate;
	border-spacing: 0 0;
	margin: 0 auto;
	font-size: larger;
}
.PartsCalcCommon > table tr th span {
	white-space: nowrap;
}
.PartsCalcCommon > table tr > th:nth-child(1) {
	padding-left: 0.5em;
	border-bottom: solid 1px red
}
.PartsCalcCommon > table tr > th:nth-child(2) {
	padding-right: 0.5em;
	border-bottom: solid 1px red
}
.PartsCalcCommon > table tr > th:nth-child(2) > span {
	padding-right: 0.2em;
	color: red;
}
.PartsCalcCommon > table tr td {
	font-size: 0.9em;
}
.PartsCalcCommon > table tr > td:nth-child(1) {
	padding-left: 1.5em;
}
.PartsCalcCommon > table tr > td:nth-child(2) {
	white-space: nowrap;
}
.PartsCalcCommon > table tr > td:nth-child(2) > span {
	padding-right: 0.2em;
}
.PartsCalcCommon > table tr > td:nth-child(3) {
	padding-left: 1em;
}
.PartsCalcCommon > table tr > td:nth-child(4) {
	white-space: nowrap;
	padding-right: 0.5em;
}
.PartsCalcCommon > table tr > td:nth-child(4) > span {
	padding-right: 0.2em;
}

.PartsCalcNewContract {
}
.PartsCalcNewContract table tr:nth-child(3) td:nth-child(1) span,
.PartsCalcNewContract table tr:nth-child(3) td:nth-child(3) span,
.PartsCalcNewContract table tr:nth-child(6) td:nth-child(1) span,
.PartsCalcNewContract table tr:nth-child(6) td:nth-child(3) span {
	white-space: nowrap;
}

.PartsCalcRenewContract {
}
.PartsCalcRenewContract table tr:nth-child(3) td:nth-child(1) span,
.PartsCalcRenewContract table tr:nth-child(3) td:nth-child(3) span,
.PartsCalcRenewContract table tr:nth-child(6) td:nth-child(1) span,
.PartsCalcRenewContract table tr:nth-child(6) td:nth-child(3) span {
	white-space: nowrap;
}

/************************************************************************
 * ポップアップダイアログ内のHTMLスタイル
 ************************************************************************/
.popup_dialog_content ol {list-style:none;padding-inline-start:1em;}
.popup_dialog_content ol li {list-style:none;padding-left:1.3em;text-indent:-1.3em;}
.popup_dialog_content table {border-collapse:collapse;margin:1em auto;}
.popup_dialog_content table tr th {border:solid 1px gray;padding:0.2em 0.5em;}
.popup_dialog_content table tr td {border:solid 1px gray;padding:0.2em 0.5em;}

/************************************************************************
 * ツールチップスタイル
 ************************************************************************/
#tooltip {
	display: none;
	max-width: calc(15em + 20px);
	background: #ffe8e8;
	color: #dc3545;
	font-size: 0.8rem;
	font-weight: bold;
	padding: 4px 8px;
	border-radius: 4px;
	box-shadow: 2px 2px 2px -1px grey;
	z-index: 999;
}

#arrow {
	visibility: hidden;
}

#arrow,
#arrow::before {
	position: absolute;
	width: 8px;
	height: 8px;
	background: inherit;
}

#arrow::before {
	visibility: visible;
	content: '';
	transform: rotate(45deg);
}

#tooltip[data-popper-placement^='top'] > #arrow {
	bottom: -4px;
}

#tooltip[data-popper-placement^='bottom'] > #arrow {
	top: -4px;
}

#tooltip[data-popper-placement^='left'] > #arrow {
	right: -4px;
}

#tooltip[data-popper-placement^='right'] > #arrow {
	left: -4px;
}