@charset "UTF-8";

:root {
	/* color */
	--ion-color-primary: #037F9E;
	--ion-color-primary-rgb: 3, 127, 158;
	--ion-color-primary-contrast: #ffffff;
	--ion-color-primary-contrast-rgb: 255, 255, 255;
	--ion-color-primary-shade: #066e5c;
	--ion-color-primary-tint: #208a77;

	--ion-color-secondary: #E1EBED;
	--ion-color-secondary-rgb: 225, 235, 237;
	--ion-color-secondary-contrast: #222222;
	--ion-color-secondary-contrast-rgb: 34, 34, 34;
	--ion-color-secondary-shade: #4854e0;
	--ion-color-secondary-tint: #6370ff;

	--ion-color-tertiary: #5260ff;
	--ion-color-tertiary-rgb: 82, 96, 255;
	--ion-color-tertiary-contrast: #ffffff;
	--ion-color-tertiary-contrast-rgb: 255, 255, 255;
	--ion-color-tertiary-shade: #4854e0;
	--ion-color-tertiary-tint: #6370ff;

	--ion-color-success: #2dd36f;
	--ion-color-success-rgb: 45, 211, 111;
	--ion-color-success-contrast: #000000;
	--ion-color-success-contrast-rgb: 0, 0, 0;
	--ion-color-success-shade: #28ba62;
	--ion-color-success-tint: #42d77d;

	--ion-color-warning: #ffc409;
	--ion-color-warning-rgb: 255, 196, 9;
	--ion-color-warning-contrast: #000000;
	--ion-color-warning-contrast-rgb: 0, 0, 0;
	--ion-color-warning-shade: #e0ac08;
	--ion-color-warning-tint: #ffca22;

	--ion-color-danger: #ff0000;
	--ion-color-danger-rgb: 255, 00, 00;
	--ion-color-danger-contrast: #ffffff;
	--ion-color-danger-contrast-rgb: 255, 255, 255;
	--ion-color-danger-shade: #cf3c4f;
	--ion-color-danger-tint: #ed576b;

	--ion-color-medium: #92949c;
	--ion-color-medium-rgb: 146, 148, 156;
	--ion-color-medium-contrast: #000000;
	--ion-color-medium-contrast-rgb: 0, 0, 0;
	--ion-color-medium-shade: #808289;
	--ion-color-medium-tint: #9d9fa6;

	--ion-color-light: #f4f5f8;
	--ion-color-light-rgb: 244, 245, 248;
	--ion-color-light-contrast: #000000;
	--ion-color-light-contrast-rgb: 0, 0, 0;
	--ion-color-light-shade: #d7d8da;
	--ion-color-light-tint: #f5f6f9;

	/* space */
	--ion-font-family: "Noto Sans Japanese", sans-serif;
	--ion-border-color: var(--border-color);
}

/* ------------------------------------
	common
--------------------------------------*/
h2, h3, h4, h5 {
	margin-top: 0px;
	margin-bottom: 0px;
}

/* ------------------------------------
	layout
--------------------------------------*/
ion-page {
	/* max-width: 1366px; */
	margin: auto;
}

.header-md  {
	box-shadow: none;
}

ion-toolbar {
	padding: 0 0 0 0;
	height: 60px;
}

ion-footer ion-toolbar {
	height: fit-content;
	--min-height: 30px;
}

ion-title {
	padding: 0px;
	overflow-wrap: break-word;
	line-height: 1;
}

ion-title span {
	line-height: 1 !important;
}

ion-content {
	--padding-end: var(--padding-page);
	--padding-start: var(--padding-page);
	--padding-top: 4px;
	--padding-bottom: 16px;
}

/* ------------------------------------
	element
--------------------------------------*/

/* --------- ion-item ----------- */

ion-item {
	--inner-border-width: 0;
	--inner-padding-end: 0;
}

/* ion-item::part(native) {
	flex-direction: column;
	align-items: start;
	padding: 0;
} */

ion-select-popover ion-item::part(native) {
	flex-direction: row;
	align-items: center;
	padding: 0;
}

ion-select-popover ion-item {
	min-height:34px;
	flex-direction: row;
}

/* --------- ion-button ----------- */
ion-button {
	margin: 2px;
	--padding-top: 8px;
	--padding-bottom: 8px;
	--padding-left: 16px;
	--padding-right: 16px;
	--border-radius: 20px;
	border-radius: 20px;

	--background-focused-opacity: 0;
	--background-hover-opacity: 0;
	
	--ripple-color: transparent;
	min-width: 200px;
}

ion-button::part(native) {
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.02em;
	line-height: 1.5;
	border: 1px solid var(--primary-bg-color);
	overflow-wrap: break-word;
	white-space: normal!important;
}

/* --------- ion-input ----------- */
.sc-ion-input-md-h:not(.legacy-input), .sc-ion-input-ios-h:not(.legacy-input) {
	min-height: 0;
}

ion-input.has-focus {
	border: 1px solid var(--focus-border-color);
	box-shadow: inset 0 0 0 1px var(--focus-border-color);
	outline: none;
}

ion-input {
	--padding-top: 0px;
	background-color: white;
}

/* input padding */
.sc-ion-input-md-h,
.sc-ion-input-ios-h {
	--padding-top: 3px;
	--padding-bottom: 3px;
	--padding-end: 3px;
	--highlight-color-focused: none;
}

/* change default height */
ion-input[type=password] {
	height: 28px;
}

/* --------- ion-radio ----------- */
ion-radio {
	/* margin-top: 4px;
	margin-bottom: 4px;
	margin-right: 8px; */
	--color-checked: blue;

	--border-radius: 50%;
	--border-width: 2px;
	--border-style: solid;
	--color: rgba(0, 0, 0, 0.6);
	height: inherit;
}

ion-radio::part(container) {
	width: 16px;
	height: 16px;
	margin-right: -8px;

	border-radius: var(--border-radius);
	border-width: var(--border-width);
	border-style: var(--border-style);
	border-color: var(--color);

}


ion-radio:focus {
	--ion-color-primary-tint: var(--focus-border-color);
}

ion-radio ion-label {
	padding-left: 8px;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 0.04em;
	line-height: 1.7;
}

ion-radio::part(mark) {
	transition: none;
}

ion-radio::part(label) {
    height: inherit;
    user-select: auto;
}
/* --------- ion-select ----------- */

ion-select:focus {
	outline: 2px solid var(--focus-border-color) !important;
	border: 1px solid var(--focus-border-color) !important;
}

ion-select {
	width: 200px;
	min-height: 30px;
	height: 30px;
	border-radius: 5px;
	border: 1px solid var(--border-color);	
	--highlight-color-focused: none;
}

ion-select::part(container) {
	
	padding: 4px;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 0.04em;
	line-height: 1.7;
}

ion-select::part(icon) {
	-webkit-transform: none;
	transform: none;
}

ion-select-popover ion-item {
	--background-hover: currentColor;
}

/* select 折り返し表示 */
ion-select-popover ion-radio::part(label) {
	white-space: normal;
}

ion-select-popover .select-interface-option::part(native) {
	padding-inline-start: 6px;
}
ion-select-popover .select-interface-option {
	--inner-padding-end: 4px;
}

/* --------- ion-checkbox ----------- */

ion-checkbox:focus {
	--border-color: var(--focus-border-color) !important;
	--border-width: 2px;
	--border-color-checked: var(--focus-border-color) ;
}

ion-checkbox {
	--border-style: solid;
	--border-width: 2px;
	--checkbox-background-checked: blue;
	--border-color-checked: blue;
}

ion-checkbox::part(container) {
	width: 16px;
	height: 16px;
	margin-top: 8px; 
	margin-bottom: 8px;
	margin-right: -8px;

	position: absolute;
	top: -4px;
}

ion-checkbox ion-label {
	padding-left: 8px;
	
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 0.04em;
	line-height: 1.7;	
}

ion-checkbox::part(label) {
    height: inherit;
    user-select: auto;
}

/* --------- ion-textarea ----------- */

ion-textarea.has-focus {
	border: 1px solid var(--focus-border-color);
	box-shadow: inset 0 0 0 1px var(--focus-border-color);
	outline: none;
}

/* --------- ion-label ----------- */

ion-label {
	white-space: normal;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.7;
	display: block;
}

/* --------- ion-datetime ----------- */

ion-datetime-button {
	display: inline-block;
}

ion-datetime {
	--background: var(--ion-color-secondary);
	--wheel-highlight-background: rgb(var(--ion-color-primary-rgb), 0.2);
	--wheel-highlight-border-radius: 48px;
	--wheel-fade-background-rgb: var(--ion-color-secondary-rgb);
}

ion-datetime-button::part(native) {
	background-image: url("../images/calendar-sharp.svg");
	background-color: var(--ion-color-primary-rgb);
	background-size: contain;
	width: 28px;
	height: 28px;
	font-size: 12px;
	text-indent: -9999px;
	border-radius: 0px;
}

ion-datetime-button.timepicker::part(native) {
	background-image: url("../images/time-sharp.svg");
}

/* --------- disabled / inert ----------- */

ion-input[disabled],
ion-textarea[disabled],
ion-select[disabled] {
	border-color: #A6A6A6;
	background-color: #E1EBED;
	color: #A6A6A6;
	-webkit-text-fill-color: #6D6D6D;
	opacity: 1 !important;	
}

[inert] input, [inert] ion-input, [inert] ion-select, [inert] ion-textarea,
input[inert], ion-input[inert], ion-select[inert], ion-textarea[inert] {
    border-color: #A6A6A6;
    background-color: #E1EBED;
    color:#A6A6A6;
    opacity: 1 !important;
}

[inert] ion-checkbox, [inert] ion-radio, ion-checkbox[inert], ion-radio[inert] {
    --border-color: #A6A6A6;
    color:#A6A6A6;
    opacity: 1 !important;
}

[inert] ion-checkbox, ion-checkbox[inert] {
	--checkbox-background-checked:#A6A6A6;
	--border-color-checked: #A6A6A6;
}

[inert] a, a[inert] {
	opacity: 0.7;
}

[inert] ion-button, ion-button[inert]{
	cursor: default;
	opacity: 0.5;
	pointer-events: none;
}


/* input left padding */
.native-input.sc-ion-input-md,
.native-textarea.sc-ion-textarea-md,
.native-input.sc-ion-input-ios,
.native-textarea.sc-ion-textarea-ios {
	padding-left: 4px;
}

/* ------------------------------------
	focus
--------------------------------------*/
/* input focus */
/* .ion-focused {
	--background-focused: transparent;
	--background-focused-opacity: 1;
} */

ion-popover .ion-focused {
	--background-focused: currentColor;
	--background-focused-opacity: 0.12;
}

.item-has-focus {
	--highlight-height: 0px;
}


ion-segment-button:focus {
	border: 2px solid #ffffff !important;
	outline: 2px solid var(--ion-color-primary-tint) !important;
	z-index:9;
}
		
ion-label.ion-text-wrap {
	border-left: 5px solid;
	border-left-color: var(--ion-color-primary-shade);
	padding-left: 4px;
	margin-bottom: 2px;
	font-size: 1.1em !important;
}

ion-label.ion-no-border {
	border: 0px;
}

ion-item-divider {
	--color: #000000;
}

ion-label.cus-radio {
	float: right;
}


/* Removes the hover/activated states */
ion-item {
	--background-hover: none;
	--background-activated: none !important;
	--ripple-color: transparent !important;
	--show-full-highlight: 0;
}


.textarea-highlight.sc-ion-textarea-md {
	height:0px; 
}


ion-card {
	--ion-card-color:#000000;
	--ion-color-step-850:#000000;
}

ion-card-title {
	font-size: 14px;
}

/* alertController の改行対応 */
ion-alert div.alert-message[id^="alert"] {
	white-space: pre-line;
}