@charset "UTF-8";

/* --------------------------------------------
FONTS
--------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+Antique:wght@400;500;700;900&display=swap');

@font-face{
	font-family : "Zen Kaku Gothic Antique";
	font-style : normal;
	font-weight : 500;
}
:root{
	--fontFamily : "Zen Kaku Gothic Antique" , sans-serif;
}
@font-face{
	font-family : "Zen Kaku Gothic Antique";
	font-style : normal;
	font-weight : 400;
}
@font-face{
	font-family : Roboto;
	font-variation-settings : "wdth" 100;
	font-style : normal;
	font-weight : 400;
	font-optical-sizing : auto;
}

/* --------------------------------------------
UNIT
--------------------------------------------- */
@media screen and ( width <= 800px ){
	@property --breakPoint{
		syntax : "<number>";
		inherits : false;
		initial-value : 400;
	}
	@property --wrapperSize{
		syntax : "<number>";
		inherits : false;
		initial-value : 340;
	}
	@property --gutter{
		syntax : "<number>";
		inherits : false;
		initial-value : 30;
	}
}
@media print , screen and ( width > 800px ){
	@property --breakPoint{
		syntax : "<number>";
		inherits : false;
		initial-value : 1424 ;
	}
	@property --wrapperSize{
		syntax : "<number>";
		inherits : false;
		initial-value : 944;
	}
	@property --gutter{
		syntax : "<number>";
		inherits : false;
		initial-value : 80;
	}
}
@property --remBase{
	syntax : "*";
	inherits : false;
	initial-value : * .1rem;
}
:root{
	--percentBase : * 100% / var( --wrapperSize );
	--viewportBase : * 100% / var( --breakPoint );
}

/* --------------------------------------------
COLOR
--------------------------------------------- */
@property --base{
	syntax : "<color>";
	inherits : false;
	initial-value : #343434;
}
@property --black02{
	syntax : "<color>";
	inherits : false;
	initial-value : #222;
}
@property --yellow{
	syntax : "<color>";
	inherits : false;
	initial-value : #f2e724;
}
@property --red{
	syntax : "<color>";
	inherits : false;
	initial-value : #b3261e;
}
@property --blue{
	syntax : "<color>";
	inherits : false;
	initial-value : #30b0c7;
}

/* --------------------------------------------
FILTER COLOR
--------------------------------------------- */
@property --filterWhite{
	syntax : "*";
	inherits : false;
	initial-value : brightness( 0 ) invert( 1 );
}
@property --filterBlack02{
	syntax : "*";
	inherits : false;
	initial-value : invert( 10% ) sepia( 0% ) saturate( 1% ) hue-rotate( 326deg ) brightness( 95% ) contrast( 90% );
}

/* --------------------------------------------
FONT SIZE
--------------------------------------------- */
@media screen and ( width <= 800px ){
	:root{
		--min : 10px;
		--max : 20rem;
	}
}
@media print , screen and ( width > 800px ){
	:root{
		--min : 10px;
		--max : 20rem;
	}
}

/* --------------------------------------------
TRANSITION
--------------------------------------------- */
@property --easeInSine{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .47 ,  , .745 , .715 );
}
@property --easeOutSine{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .39 , .575 , .565 , 1 );
}
@property --easeInOutSine{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .445 , .05 , .55 , .95 );
}
@property --easeInQuad{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .55 , .085 , .68 , .53 );
}
@property --easeOutQuad{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .25 , .46 , .45 , .94 );
}
@property --easeInOutQuad{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .455 , .03 , .515 , .955 );
}
@property --easeInCubic{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .55 , .055 , .675 , .19 );
}
@property --easeOutCubic{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .215 , .61 , .355 , 1 );
}
@property --easeInOutCubic{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .645 , .045 , .355 , 1 );
}
@property --easeInQuart{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .895 , .03 , .685 , .22 );
}
@property --easeOutQuart{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .165 , .84 , .44 , 1 );
}
@property --easeInOutQuart{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .77 ,  , .175 , 1 );
}
@property --easeInQuint{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .755 , .05 , .855 , .06 );
}
@property --easeOutQuint{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .23 , 1 , .32 , 1 );
}
@property --easeInOutQuint{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .86 ,  , .07 , 1 );
}
@property --easeInExpo{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .95 , .05 , .795 , .035 );
}
@property --easeOutExpo{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .19 , 1 , .22 , 1 );
}
@property --easeInOutExpo{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( 1 ,  ,  , 1 );
}
@property --easeInCirc{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .6 , .04 , .98 , .335 );
}
@property --easeOutCirc{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .075 , .82 , .165 , 1 );
}
@property --easeInOutCirc{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .785 , .135 , .15 , .86 );
}
@property --easeInBack{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .6 , -.28 , .735 , .045 );
}
@property --easeOutBack{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .175 , .885 , .32 , 1.275 );
}
@property --easeInOutBack{
	syntax : "*";
	inherits : false;
	initial-value : cubic-bezier( .68 , -.55 , .265 , 1.55 );
}
@property --transitionAppearance{
	syntax : "*";
	inherits : false;
	initial-value : .3s ease-out;
}
@property --transitionBoundsTiming{
	syntax : "*";
	inherits : false;
	initial-value : linear( 0 , .009 , .035 2.1% , .141 , .281 6.7% , .723 12.9% , .938 16.7% , 1.017 , 1.077 , 1.121 , 1.149 24.3% , 1.159 , 1.163 , 1.161 , 1.154 29.9% , 1.129 32.8% , 1.051 39.6% , 1.017 43.1% , .991 , .977 51% , .974 53.8% , .975 57.1% , .997 69.8% , 1.003 76.9% , 1.004 83.8% , 1 );
}
:root{
	--transitionBase : 1s var( --easeOutExpo );
	--transitionBounds : 1s var( --transitionBoundsTiming );
}

/* --------------------------------------------
REGULATE
--------------------------------------------- */
*{
	padding : 0;
	margin : 0;
	word-break : normal;
}
* , *::before , *::after{
	box-sizing : border-box;
}
*:not(fieldset, progress, meter ){
	background-repeat : no-repeat;
	background-origin : border-box;
	border-style : solid;
	border-width : 0;
}
:root{
	color-scheme : light ! important;
}
:where( html ){
	block-size : 100%;
	-webkit-text-size-adjust : none;
	tab-size : 2;
	scrollbar-gutter : stable;
}
@media ( prefers-reduced-motion : no-preference ){
	html{
		scroll-behavior : smooth;
	}
}
:where( html:has( dialog[open] ) ){
	overflow : clip;
}
:where( body ){
	overflow-x : clip;
	overflow-y : auto;
	font-family : var( --fontFamily );
	font-weight : 500;
	font-feature-settings : "palt" on;
	font-optical-sizing : auto;
	line-height : 1;
	color : var( --base );
	overflow-wrap : anywhere;
	text-rendering : optimizeLegibility;
	min-block-size : 100%;
	line-break : strict;
	scrollbar-gutter : stable;
}
main{
	overflow-x : clip;
}
:where( svg, video, canvas, audio, iframe, embed, object ){
	display : block;
}
:where( img, svg, video ){
	max-width : inherit;
	font-size : 0;
	vertical-align : top;
	inline-size : auto;
}
:where( img ){
	image-rendering : -webkit-optimize-contrast;
}
:where( svg ){
	fill : currentColor;
	stroke : none;
}
:where( svg:not( [fill] ) ){
	fill : none;
	stroke : currentColor;
	stroke-linecap : round;
	stroke-linejoin : round;
}
:where( svg:not( [width] ) ){
	inline-size : 5rem;
}
:where( fieldset , legend ){
	all : unset;
	display : block;
}
:where( input, button, textarea, select , input[type="file"]::-webkit-file-upload-button ){
	font : inherit;
	font-size : inherit;
	color : inherit;
	letter-spacing : inherit;
	outline : none;
}
:where( input[type="number"] ){
	&::-webkit-outer-spin-button ,
	&::-webkit-inner-spin-button{
		-webkit-appearance : none;
		margin : 0;
	}
}
:where( p, h1, h2, h3, h4, h5, h6 ){
	overflow-wrap : break-word;
}
:where( p, h1, h2, h3, h4, h5, h6 , a ){
	&:has( > img:only-child ){
		font-size : 0;
		line-height : 1;
	}
}
:where( ul, ol ){
	list-style : none;
}
:where( a ){
	color : var( --base );
	-webkit-text-decoration : none;
	text-decoration : none;
	text-underline-offset : calc( ( 1lh - 1em ) / 2 );
	touch-action : manipulation;
	cursor : pointer;
	text-decoration-skip-ink : auto;
}
:where( button , [type="button"] , [type="reset"] , [type="submit"] ){
	touch-action : manipulation;
}
:where( button ){
	background-color : transparent;
}
:where( button, input, label[for], select, summary, textarea, [tabindex]:not( [tabindex*="-"] ) ){
	touch-action : manipulation;
	cursor : pointer;
}
:where( :disabled ){
	cursor : not-allowed;
}
:where( label:has( > input:disabled ), label:has( + input:disabled ) ){
	cursor : not-allowed;
}
:where( button, button[type], input[type="button"], input[type="submit"], input[type="reset"],input[type="file"]::-webkit-file-upload-button,input[type="file"]::file-selector-button ){
	-webkit-tap-highlight-color : transparent;
	-webkit-touch-callout : none;
	user-select : none;
}
:where( select ){
	appearance : none;
}
:where( table ){
	border-collapse : collapse;
}
:where( picture ){
	display : block;
	font-size : 0;
}
:where( em,dfn ){
	font-style : normal;
}
:where( dialog , [popover] ){
	inset : unset;
	max-width : unset;
	max-width : 100%;
	max-height : unset;
	max-height : 100%;
	color : inherit;
	background : none;
	border : none;
}
:where( dialog:not( [open] ), [popover]:not( :popover-open ) ){
	display : none;
}
:where( summary  ){
	display : block;
	list-style : none;
}
:where( summary  ){
	&::-webkit-details-marker{
		display : none;
	}
}
@view-transition{
	navigation : auto;
}


/*--追加--------------*/
@media screen and ( width <= 800px ){
	p {
		font-size: calc( 14 var( --remBase ) );
		line-height: 1.7;
	}
	.caution {
		font-size: calc( 12 var( --remBase ) );
	}
}
@media print , screen and ( width > 800px ){
	p {
		font-size: calc( 14 var( --remBase ) );
		line-height: 1.7;
	}
	.caution {
		font-size: calc( 12 var( --remBase ) );
	}
}


.mb-05 {
	margin-bottom: calc( 16 var( --remBase ) );
}
.mb-1 {
	margin-bottom: calc( 24 var( --remBase ) );
}
.mb-2 {
	margin-bottom: calc( 32 var( --remBase ) );
}
.mb-3{
	margin-bottom: calc( 40 var( --remBase ) );
}
.mb-4{
	margin-bottom: calc( 48 var( --remBase ) );
}
.d-block {
	display: block;
	margin-top: calc( 4 var( --remBase ) );;
}
input::placeholder {
  color: #999999;
}
input[disabled],
button[disabled] {
	/* disabled状態のスタイル */
	opacity: 0.6; /* 例：透明度を下げる */
	cursor: not-allowed; /* 例：カーソルを変更する */
	background-color: #eee; /* 例：背景色を変える */
	border-color: #ccc; /* 例：枠線を変更する */
}
.checkboxItem {
  display: flex;
  align-items: center;
  column-gap: 4px;
  width: fit-content;
  line-height: 1;
  cursor: pointer;
}

.checkboxItem:not(:last-of-type) {
  margin-bottom: 16px;
}

.checkbox {
  appearance: none;
  position: relative;
  width: calc( 24 var( --remBase ) );
  height: calc( 24 var( --remBase ) );
  border: 1px solid #a1a1a1;
  background-color: #f2f2f7;
  cursor: pointer;
}

.checkbox:checked {
  border: none;
  background-color: #a1a1a1;
}

.checkbox:checked::after {
  content: "";
  position: absolute;
  top: calc( 7 var( --remBase ) );
  left: calc( 4 var( --remBase ) );
  width: calc( 16 var( --remBase ) );
  height: calc( 6 var( --remBase ) );
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  transform: rotate(-45deg);
}

textarea.text-box {
  width: calc( 600 var( --remBase ) );
  max-width: 100%;           /* 画面が狭いときは折り返し */
  padding: calc( 8 var( --remBase ) );             /* 余白 */
  border: 1px solid #a1a1a1; /* ボーダー */
  background: #fff;          /* 背景 */
  border-radius: 0%;        /* 角丸(不要なら削除) */
  box-sizing: border-box;    /* 幅計算を直感的に */
  line-height: 1.6;
  font: inherit;             /* 親のフォント継承 */
  resize: vertical;          /* 縦方向だけリサイズ可 */
  outline: none;             /* デフォのアウトライン無効 */
}

/* フォーカス時の見やすさ */
textarea.text-box:focus {
  border-color: #888;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

/* 参考：プレースホルダーの色（必要なら） */
textarea.text-box::placeholder {
  color: #9aa0a6;
}

.alert {
	background-color: #f8d7da;
	color: #58151c;
	padding: 1em;
	margin: .5em 0;
	line-height: 1.7em;
	font-size: calc( 16 var( --remBase ) );

	a {
		color: #58151c;
		text-decoration: underline;
	}
}
.complete {
	background-color: #CCE6F4;
	color: #013;
	padding: 1em;
	margin: .5em 0;
	line-height: 1.7em;
	font-size: calc( 16 var( --remBase ) );

	a {
		color: #013;
		text-decoration: underline;
	}
}

#passwordSettings{
	padding-block : calc( 16 var( --remBase ) );
	margin-top : calc( 16 var( --remBase ) );
	outline : solid 1px #d1d1d6;
	outline-offset : -1px;
	h4{
		font-size : calc( 16 var( --remBase ) );
		font-weight : 700;
		line-height : 1.7;
		+ p{
			margin-top : calc( 8 var( --remBase ) );
		}
	}
	ul , p{
		font-size : calc( 13 var( --remBase ) );
		line-height : 1.7;
	}
	li{
		display : grid;
		grid-template-columns : 1em auto;
		align-items : start;
		justify-content : start;
		&::before{
			text-align : center;
			content : "・";
		}
	}
	@media screen and ( width <= 800px ){
		padding-inline : calc( 16 var( --percentBase ) );
	}
	@media print , screen and ( width > 800px ){
		padding-inline : calc( 16 * 100% / 480 );
	}
}

/* ローディング */
.loading-overlay {
  position: fixed;
  inset: 0; /* top, right, bottom, left を一括指定 */
  background: rgba(255, 255, 255, 0.8); /* 半透明白背景（任意） */
  display: flex;
  align-items: center;   /* 縦中央 */
  justify-content: center; /* 横中央 */
  z-index: 9999; /* 最前面に */
}

/* ここは前のスピナーパーツを流用 */
.loader.spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid #e6e8f0;
  border-top-color: #666;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/*-------------------*/
.swal2-popup {
	font-size: calc( 16 var( --remBase ) );
}


/* 通常のフォーム入力欄に合わせたreadonly指定 */
input[readonly],
textarea[readonly] {
  background-color: #f9f9f9; /* ややグレーで非アクティブ感 */
  color: #999;              /* 少し淡い文字色 */
  border: 1px solid #ddd;   /* 枠線は控えめなグレー */
  cursor: not-allowed;      /* カーソルを禁止マークに */
  box-shadow: none;
  outline:#ddd;
}

/* フォーカス時（クリックしても変化しないように） */
input[type="text"][readonly]focus,
textarea[readonly]:focus {
  outline: none;
  border-color: #ddd;
  box-shadow: none;
}

/* hover時も変化を抑える */
input[type="text"][readonly]:hover,
textarea[readonly]:hover {
  background-color: #f9f9f9;
}

.hissu {
	color: #b3261e;
}

.swal2-container {
	 .swal2-title {
		font-size: 18px;
	 }
	 .swal2-html-container {
		font-size: 14px;
	 }

}
div:where(.swal2-container) div:where(.swal2-popup) {
    display: none;
    position: relative;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 100%);
    width: var(32em);
    max-width: 100%;
    padding: 0 0 1.25em;
    border: none;
    border-radius: 0.3125rem;
    background: white;
    color: #545454;
    font-family: inherit;
    font-size: 1rem;
    container-name: swal2-popup;

	div:where(.swal2-icon) {
		position: relative;
		box-sizing: content-box;
		justify-content: center;
		width: 5em;
		height: 5em;
		margin: 2.5em auto .6em;
		zoom: var(--swal2-icon-zoom);
		border: .25em solid rgba(0, 0, 0, 0);
		border-radius: 50%;
		border-color: #000;
		font-family: inherit;
		line-height: 5em;
		cursor: default;
		user-select: none;
	}
	div:where(.swal2-icon).swal2-info {
		border-color: #3fc3ee;
		color: #3fc3ee;
	}
}