﻿/*--   reset
------------------------------------------------------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0;line-height:1.5;vertical-align:middle}button{border:none}img{line-height:0;border:none}dl,dt,dd{margin:0;font-weight:normal}label:hover{cursor:default}table,table tr,table td,table th,p,ul,input{list-style:none outside none;margin:0;padding:0;font-weight:normal}h1{margin-top:0;}
*::before,*::after{box-sizing: border-box;margin:0;padding:0}

/*--   変数
------------------------------------------------------------------------------------ */

:root {
    --icon-triangle-top:    polygon(0 100%, 50% 0, 100% 100%);
    --icon-triangle-right:  polygon(0 0, 0% 100%, 100% 50%);
    --icon-border-triangle: polygon(0 7%, 7% 0, 57% 50%, 7% 100%, 0 93%, 43% 50%, 0 7%);
}

/*--   base
------------------------------------------------------------------------------------ */
input:disabled{border: none;opacity:0.5;cursor:default!important}
input::placeholder{opacity:0.5}
input,textarea,select{--webkit-appearance:none;appearance:none;-webkit-border-radius:0;margin:0;padding: 0}
input[type="text"],input[type="number"],textarea{width:100%}
input[type="number"]{appearance:textfield;-moz-appearance:textfield;ime-mode:disabled}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type="submit"],input[type="button"],input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;-webkit-border-radius:0}
input[type="text"]:focus,input[type="number"]:focus,textarea:focus,select:focus{outline: 0;}
table{width:100%;border-collapse:collapse}
a{text-decoration: underline;text-decoration-color: transparent;text-decoration-thickness: 1px;transition-duration: .3s;}
a:hover {text-decoration-color: currentColor;}
body {
    position: relative;
    font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic ProN", "YuGothic", sans-serif !important;
    font-size: 14px;
    color:#333
}
@media screen and (min-width: 768px) {
	body{font-size: 16px;}
}
#wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
#wrap:has(#headerArea.is-open) {
	position: fixed;
}
@media screen and (min-width: 768px) {
    #wrap { overflow: hidden }
}
footer {
	margin-top:auto
}
small {font-size: 12px}

/* input customize */
button, input, optgroup, select, textarea {font: inherit}
input[type="text"], input[type="number"], textarea, select {
	padding: .5em;
	width: 100%;
	border: solid 1px;
}
input[type="radio"]::after, input[type="radio"]::before {
    border-radius: 100%;
}
input[type="radio"], input[type="checkbox"] {
    appearance: none;
	position: relative;
    display: inline-block;
	width: 1rem;
	height: 1rem;
    margin-right: .5em;
	aspect-ratio: 1;
}
input[type="radio"]::after, input[type="checkbox"]::after,
input[type="radio"]::before, input[type="checkbox"]::before {
	content: "";
    position: absolute;
    top: 0;
    bottom: 0;
	left: 0;
    right: 0;
	display: block;
    margin: auto;
	aspect-ratio: 1;
}
input[type="radio"]::after, input[type="checkbox"]::after {
	width: 100%;
	height: 100%;
    border: solid 1px;
	pointer-events: none;
}
input[type="radio"]::before, input[type="checkbox"]::before {
	width: 50%;
    height: 50%;
    background: currentColor;
	opacity: 0;
}
input[type="radio"]:checked::before, input[type="checkbox"]:checked::before {
    opacity: 1;
}
select {
	line-height: 1;
}

/*--   width
------------------------------------------------------------------------------------ */
.w110,.w120,.w125,.w128,.w130,.w135,.w140,.w150,.w160,.w164,.w166,.w170,.w173,.w174,.w175,.w176,.w180,.w190,.w195,
.w200,.w205,.w210,.w215,.w220,.w223,.w224,.w225,.w228,.w230,.w233,.w234,
.w235,.w240,.w245,.w250,.w253,.w255,.w260,.w265,.w270,.w275,.w280,.w285,.w290,.w295,.w297,.w298,
.w300,.w303,.w305,.w308,.w310,.w315,.w320,.w325,.w330,.w335,.w340,.w344,.w345,.w346,.w350,.w355,.w360,.w365,.w370,.w375,.w380,.w382,.w383,.w385,.w390,.w395,
.w400,.w405,.w410,.w415,.w417,.w420,.w425,.w430,.w440,.w447,.w445,.w450,.w455,.w457,.w460,.w461,.w465,.w470,.w475,.w480,.w485,.w490,.w495,
.w500,.w505,.w510,.w515,.w518,.w520,.w525,.w530,.w534,.w535,.w540,.w545,.w550,.w555,.w560,.w565,.w570,.w575,.w580,.w585,.w590,.w595,
.w600,.w605,.w610,.w615,.w620,.w625,.w630,.w635,.w640,.w645,.w650,.w655,.w660,.w662,.w665,.w670,.w673,.w675,.w678,.w680,.w685,.w690,.w695,
.w700,.w710,.w720,.w730,.w740,.w750,.w760,.w770,.w780,.w790,.w800{width:100%!important;}
@media all and (min-width:768px){
	.w10{width:10px!important}.w20{width:20px!important}.w30{width:30px!important}.w40{width:40px!important}.w50{width:50px!important}.w60{width:60px!important}.w70{width:70px!important}.w80{width:80px!important}.w90{width:90px!important}.w95{width:95px!important}
	.w100{width:100px!important}.w110{width:110px!important}.w120{width:120px!important}.w125{width:125px!important}.w128{width:128px!important}.w130{width:130px!important}
	.w135{width:135px!important}.w140{width:140px!important}.w150{width:150px!important}.w160{width:160px!important}.w164{width:164px!important}.w166{width:166px!important}.w170{width:170px!important}.w173{width:173px!important}.w174{width:174px!important}.w175{width:175px!important}.w176{width:176px!important}.w180{width:180px!important}.w190{width:190px!important}.w195{width:195px!important}
	.w200{width:200px!important}.w205{width:205px!important}.w210{width:210px!important}.w215{width:215px!important}.w220{width:220px!important}.w223{width:223px!important}.w224{width:224px!important}.w225{width:225px!important}.w228{width:228px!important}.w230{width:230px!important}.w233{width:233px!important}.w234{width:234px!important}.w235{width:235px!important}.w240{width:240px!important}.w245{width:245px!important}.w250{width:250px!important}.w253{width:253px!important}.w255{width:255px!important}.w260{width:260px!important}.w265{width:265px!important}.w270{width:270px!important}.w275{width:275px!important}.w280{width:280px!important}.w285{width:285px!important}.w290{width:290px!important}.w295{width:295px!important}.w297{width:297px!important}.w298{width:298px!important}
	.w300{width:300px!important}.w303{width:303px!important}.w305{width:305px!important}.w308{width:308px!important}.w310{width:310px!important}.w315{width:315px!important}.w320{width:320px!important}.w325{width:325px!important}.w330{width:330px!important}.w335{width:335px!important}.w340{width:340px!important}.w344{width:344px!important}.w345{width:345px!important}.w346{width:346px!important}.w350{width:350px!important}.w355{width:355px!important}.w360{width:360px!important}.w365{width:365px!important}.w370{width:370px!important}.w375{width:375px!important}.w380{width:380px!important}.w382{width:382px!important}.w383{width:383px!important}.w385{width:385px!important}.w390{width:390px!important}.w395{width:395px!important}
	.w400{width:400px!important}.w405{width:405px!important}.w410{width:410px!important}.w415{width:415px!important}.w417{width:417px!important}.w420{width:420px!important}.w425{width:425px!important}.w430{width:430px!important}.w440{width:440px!important}.w447{width:447px!important}.w445{width:445px!important}.w450{width:450px!important}.w455{width:455px!important}.w457{width:457px!important}.w460{width:460px!important}.w461{width:461px!important}.w465{width:465px!important}.w470{width:470px!important}.w475{width:475px!important}.w480{width:480px!important}.w485{width:485px!important}.w490{width:490px!important}.w495{width:495px!important}
	.w500{width:500px!important}.w505{width:505px!important}.w510{width:510px!important}.w515{width:515px!important}.w518{width:518px!important}.w520{width:520px!important}.w525{width:525px!important}.w530{width:530px!important}.w534{width:534px!important}.w535{width:535px!important}.w540{width:540px!important}.w545{width:545px!important}.w550{width:550px!important}.w555{width:555px!important}.w560{width:560px!important}.w565{width:565px!important}.w570{width:570px!important}.w575{width:575px!important}.w580{width:580px!important}.w585{width:585px!important}.w590{width:590px!important}.w595{width:595px!important}
	.w600{width:600px!important}.w605{width:605px!important}.w610{width:610px!important}.w615{width:615px!important}.w620{width:620px!important}.w625{width:625px!important}.w630{width:630px!important}.w635{width:635px!important}.w640{width:640px!important}.w645{width:645px!important}.w650{width:650px!important}.w655{width:655px!important}
	.w660{width:660px!important}.w662{width:662px!important}.w665{width:665px!important}.w670{width:670px!important}.w673{width:673px!important}.w675{width:675px!important}.w678{width:678px!important}.w680{width:680px!important}.w685{width:685px!important}.w690{width:690px!important}.w695{width:695px!important}
	.w700{width:700px!important}.w710{width:710px!important}.w720{width:720px!important}.w730{width:730px!important}.w740{width:740px!important}.w750{width:750px!important}.w760{width:760px!important}.w770{width:770px!important}.w780{width:780px!important}.w790{width:790px!important}
	.w800{width:800px!important}
}
.pcOnly {display: none}
.spOnly {display: inherit}
@media screen and (min-width: 768px) {
	.pcOnly {display: inherit;}
    .spOnly {display: none}
}

/* --------------------------------------------------
	装飾
*/

hr {
	height: 1px;
    width: 100%;
    background: gray;
	border: none;
}

.c-lists-line > li {
	padding: 1em;
	border: solid 0 currentColor;
}
.c-lists-line > li + li {
    border-top-width: 1px;
}
@media screen and (min-width: 768px) {
	.c-lists-line > li + li {
		border-top-width: 0;
		border-left-width: 1px;
	}
	.c-lists-line > li:first-of-type {
		border-left-width: 1px;
	}
	.c-lists-line > li:last-of-type {
		border-right-width: 1px;
	}
}
.c-text-title {
	line-height: 2em;
	font-weight: bold;
	font-size: 1.5em;
}
.c-text-uline {
	vertical-align: baseline;
	text-decoration-color: currentColor;
}
.c-text-uline:hover {
	text-decoration-color: transparent
}
.c-text-arrow_bdLeft,
.c-text-arrow_icLeft,
.c-text-lineLeft {
	position: relative;
    padding-left: 1em;
}
.c-text-arrow_bdLeft::before {
    content: "";
	top: calc(1em / 2.5);
	display: inline-block;
    width: .75em;
    height: .75em;
    clip-path: var(--icon-border-triangle);
}
.c-text-arrow_icLeft::before {
	content: "";
	top: calc(1em / 2.5);
	width: .5em;
    height: .5em;
	clip-path: var(--icon-triangle-right);
	aspect-ratio: 1;
}
.c-text-lineLeft::before {
    content: "";
    width: 3px;
    height: 100%;
}
.c-text-arrow_bdLeft::before,
.c-text-arrow_icLeft::before,
.c-text-lineLeft::before {
	position: absolute;
	left: 0;
	display: inline-block;
    background: currentColor;
}

.c-icon-blank {
    position: relative;
    display: inline-block;
    margin-left: .25em;
    margin-right: .5em;
    width: 10px;
    height: 10px;
}
.c-icon-blank::after, 
.c-icon-blank::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
	display: block;
    margin: auto;
    width: 100%;
    height: 100%;
    border: solid 1px currentColor;
	border-top-width: medium;
}
.c-icon-blank::before {
    bottom: 50%;
    right: 50%;
}
.c-icon-blank::after {
	top: 50%;
    left: 50%;
}


/*--    矢印アイコン
---------------------------------------------------*/
/* 共通 */
.c-arrow-border,
.c-arrow-round {
	position: relative;
}
.c-arrow-border:after,
.c-arrow-round:after,
.c-arrow-round:before {
    content: '';
	display: block;
	position: absolute;
	top: 0;
    bottom: 0;
    margin: auto;
	right: .5em;
	width: 1em;
    height: 1em;
	aspect-ratio: 1;
}
.c-arrow-border:after,
.c-arrow-round:before {
	background: currentColor;
}
/* 棒線 */
.c-arrow-border:after {
    clip-path: var(--icon-border-triangle);
}
/* 丸矢印 */
.c-arrow-round:after {
    right: .7em;
    width: .8em;
    background: inherit;
    clip-path: var(--icon-triangle-right);
}
.c-arrow-round:before {
    width: 1.5em;
    height: 1.5em;
    border-radius: 100%;
}

/* --------------------------------------------------
	layout
*/

.l-inner {
	display: grid;
	gap: 2rem;
	width: 100%;
}
.l-contents {
	display: grid;
	gap: 1rem;
	width: 95%;
	margin: 0 auto;
}
@media screen and (min-width: 768px) {
	.l-inner  {
		margin: 0 auto;
		max-width: 950px;
	}
	.l-contents {
			width: 100%;
	}
}
.l-grid,
.l-grid_rows {
	display: grid;
	gap: 1em;
}
@media screen and (min-width: 768px) {
	.l-grid_rows {
		grid-auto-flow: column;
        justify-content: center;
        grid-auto-columns: minmax(auto, 100%);
	}
}
.l-rows {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}
/* 縦積みテーブル */
.l-table_vertical th {
	border-width: 0!important;
}
.l-table_vertical th,
.l-table_vertical td {
	display: block!important;
	width: 100%!important;
}

/* --------------------------------------------------
	module
*/

/* 検索ボックス */
.m-search {
	display: flex;
	align-items: center;
	padding: 0 1em;
	border: 1px solid;
}
@media screen and (min-width: 768px) {
	.m-search {
		order: 2;
	}
}
.m-search-input {
	background: transparent!important;
	border: none!important;
}
.m-search-submit {
	display: none!important;
}

/* 注釈（汎用） */
ul.m-text-notes {
	display: table;
	width: 100%;
	margin: 0;
	padding-left: 0;
}
ul.m-text-notes li .notes_head {
	display: table-cell;
	vertical-align: top;
	white-space: nowrap;
	padding-right: 0.5em;
}
ul.m-text-notes li .notes_body {
	display: table-cell;
	vertical-align: top;
}

/* --------------------------------------------------
	header
*/

.m-header {
	background: white;
}
.m-header .l-inner,
.m-footer .l-inner {
	position: relative;
	max-width: 1240px;
}
.m-header .l-inner {
	display: flex;
    align-items: center;
    min-height: 80px;
}
.m-header .l-inner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}
@media screen and (min-width: 768px) {
	.m-header .l-inner  {
        padding: 1em;
	}
	.m-header .l-inner::before {
		display: none;
	}
}

/* ヘッダーメニュー */
.m-header-menu {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    gap: 1em;
    padding: 80px 1em 1em;
    width: 100%;
    height: 100%;
    background: white;
    overflow-y: scroll;
    visibility: hidden;
    opacity: 0;
    transition: opacity .1s ease-out, visibility .2s ease-out;
    flex-direction: column;
}
.is-open .m-header-menu {
	visibility: visible;
	opacity: 1;
}
@media screen and (min-width: 768px) {
	.m-header-menu {
		position: static;
		justify-content: center;
		padding: 0;
		overflow-y: visible;
		visibility: visible;
		opacity: 1;
	}
}

/* ヘッダーメニューボタン */
.m-header-btn_menu {
    position: absolute;
    top: 0;
    bottom: 0;
	right: 1em;
    margin: auto;
    width: 1.5em;
    height: fit-content;
}
@media screen and (min-width: 768px) {
	.m-header-btn_menu {
		display: none;
	}
}
.m-header-btn_menu > span {
	margin: 5px auto 5px;
}
.m-header-btn_menu > span,
.m-header-btn_menu:before, 
.m-header-btn_menu:after {
	content: "";
	display: block;
	width: 100%;
	height: 3px;
	background: currentColor;
	border-radius: 4px;
}
.is-open .m-header-btn_menu > span {
	margin: -3px auto;
	transform: rotate(45deg)
}
.is-open .m-header-btn_menu:before,
.is-open .m-header-btn_menu:after {
	transform: rotate(-45deg)
}

/* ヘッダー小メニュー */
.m-nav_info,
.m-nav_info > ul {
	display: flex;
	flex-wrap: wrap;
    gap: 1em;
	font-size: 14px;
}
.m-nav_info > ul li {
	width: 100%;
}
@media screen and (min-width: 768px) {
	.m-nav_info,
	.m-nav_info > ul  {
		align-items: center;
		justify-content: flex-end;
	}
	.m-nav_info > ul li {
		width: fit-content;
	}
}

/* ヘッダーグローバルナビ */
.m-nav_global > ul {
	display: flex;
    flex-wrap: wrap;
	justify-content: flex-end;
}
.m-nav_global > ul li {
	width: 100%;
}
@media screen and (min-width: 768px) {
	.m-nav_global {
        order: 2;
    }
	.m-nav_global > ul li {
		display: flex;
		align-items: center;
		text-align: center;
		width: auto;
	}
}

/* 順番 */
.m-header .l-inner {
    z-index: 100;
}
.m-header .l-inner::before,
.m-header-logo,
.m-header-btn_menu  {
	z-index: 200;
}

/* --------------------------------------------------
	footer
*/

.m-footer .l-inner {
	gap: 1rem;
	max-width: 1240px;
	padding: 2.5rem 1.25rem;
}
.m-footer-menu {
	display: grid;
	gap: .5em;
}
@media screen and (min-width: 768px) {
	.m-footer {
		font-size: .875em;
	}
	.m-footer-menu {
		grid-auto-flow: column;
		justify-content: space-between;
	}
	.m-footer-menu .l-rows {
		gap: 2em;
	}
}

/* copyright */
.m-footer_copyright {
	display: block;
	text-align: center;
}
@media screen and (min-width: 768px) {
	.m-footer_copyright {
		text-align: left;
	}
}


/* ==================================================================
   ボタン		                                                    */

/* 共通 */
.m-btn {
	display: inline-block;
    padding: 1em;
    width: 100%;
	letter-spacing: .05em;
    text-align: center;
	cursor: pointer;
    transition: .3s all ease-out ;
}
.m-btn:hover{
	opacity: 0.8;
}
.m-btn_round {
	border-radius: 2em;
}

/* ==================================================================
   テキストエリア	 */
.m-area-note {
	padding: 1em;
	font-size: .875em;
}

/* ==================================================================
	FORM - テーブル													*/

.formTable tr {
	border: solid 1px;
	background: white;
}
.formTable th, 
.formTable td {
	display: block;
	width: 100%;
    padding: 1em 10px;
}
.formTable td:has(.errorTxt) {
	background: #FEEBEB;
}
@media all and (min-width:768px) {
	.formTable th, 
	.formTable td {
		width: auto;
		display: table-cell;
		vertical-align: middle;
		padding: 1em;
	}
	.formTable th {
		border: solid 1px;
		width: 240px;
	}
	.formTable td {
		width: calc(100% - 240px);
	}	
}

/* ==================================================================
		FORM - テーブルInner										*/	

/* th */
.item-inner {
	display: grid;
    grid-auto-flow: column;
    align-items: center;
	justify-content: space-between;
    gap: .5em;
	text-align: left;
}
.input-frame,
.input-frame .line {
    display: flex;
	flex-wrap: wrap;
    gap: .5em;
    width: 100%;
}
.input-frame .line:has(.check-wrapper) {
	gap: 1em;
}
.input-frame {
    align-items: center;
}
.formTable:nth-child(2) tr:first-child .input-frame{
	justify-content:space-between;
}
.input-wrapper,
.select-wrapper {
	position: relative;
	width: 100%;
}
.input-wrapper[class*="name"] {
	width: calc(50% - .5em);
}
.input-wrapper:has([maxlength="3"]){ max-width: 4em }
.input-wrapper:has([maxlength="4"]){ max-width: 5em }
@media all and (min-width:768px) {
	.formTable:nth-child(2) tr:first-child .input-frame{
	justify-content:flex-start;
	}
	.input-wrapper,
	.nest-inputMark-wrapper {
		max-width: 26.25em;
	}
	.input-wrapper[class*="name"] {
		max-width: 13em;
	}
	.calendar-wrapper,
	.select-wrapper {
		max-width: 15em;
	}
}
.select-wrapper::before,
.select-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    display: inline-block;
	margin: auto;
    pointer-events: none;
}
.select-wrapper::before {
    right: 0;
    width: 1.5em;
    height: 100%;
}
.select-wrapper::after {
    right: .45em;
    width: .5em;
    height: .45em;
    background: currentColor;
    clip-path: var(--icon-border-triangle);
	transform: rotate(90deg);
}


/* ==================================================================
	必須アイコン													*/

.icon-required {
    display: inline-block;
    padding: .25em .5em;
    background: white;
    border: solid 1px;
    line-height: 1;
    vertical-align: middle;
    font-size: x-small;
    color: red;
}
.icon-required.is-complete {
    color: gray;
}

/* ==================================================================
    注釈（テーブル）												*/

.formTable .input-mark {
	display: inline-block;
	color: inherit;
}
.formTable .input-notes {
	display: block;
	width: 100%;
	color: inherit;
}


/* ==================================================================
    エラー															*/

.formTable .js-error-alert {
	display: none;
}
.formTable [class$="-alert"] > p {
	font-weight: bold;
    font-size: .875em;
}
.formTable [class$="-alert"] > p::before {
	content: "!";
	display: inline-block;
	height: 1.5em;
    width: 1.5em;
	margin-right: .25rem;
	border-radius: 50%;
	text-align: center;
	color: white;
	background: red;
}