/* ==================================================================
	変数
*/
:root {
	--color-company:	rgb(0 110 188);
	--color-blue:		rgb(0 88 173);
	--color-lightblue:	rgb(232 247 255);
	--color-gray:		rgb(218 218 218);
	--color-lightgray:	rgb(245 245 245);;
	--color-black:		rgb(34 34 34);
	--color-orange:		rgb(235 96 0);

	--color-errorfont: rgb(238 0 0);
	--color-errorback: rgb(255 246 246);
}

/* ==================================================================
	parts
*/
body { 
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'メイリオ', Meiryo, sans-serif;
	color: var(--color-black);
}
a { color: rgb(0 166 203) }
#wrap-contents {
	font-size: 14px;
    line-height: 1.5em;
}
.l-wrap {
    padding: .5rem;
}
main {
	margin: 2em 0 60px;
}

/* -------------------
	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}
}

/* -------------------
    装飾
*/

.theme-color__red {
	color: var(--color-errorfont);
}
.theme-color__orange {
	color: var(--color-orange);
}

/* 別窓リンクアイコン */
.o-icon__blank::after, .o-icon__blank::before{
	width: 0.9em;
    height: 0.65em;
	background-color: #ffffff;
	border-top-width: thin;
}

/* ==================================================================
	header, footer
*/
:is(#headerArea) .l-rows {
	flex-wrap: nowrap;
}
#footerArea {
	border-top: solid 1px var(--color-gray);
	text-align: center;
}
#footerArea .l-inner.l-grid {
	gap: .5rem;
}
#footerArea a, #footerArea .l-copyright {
	font-size: 12px;
	color: var(--color-black);
	padding: 0;
}
#footerArea a::before {
	content: '';
    display: inline-block;
    margin-right: 0.5em;
    width: 0.5em;
    height: 0.65em;
    background: rgb(0 166 203);
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
}

/* ==================================================================
	parts
*/
h1 {
	padding: 1rem 0;
	background: var(--color-company);
	color: white;
	font-size: 1.5rem;
    font-weight: normal;
}
h2 {
	font-size: 1.2rem;
}
/* 縦並び中央揃え */
.l-grid li:has(.c-btn) {
	margin: 0 auto;
}
.c-btn.theme-btn__send,
.c-btn.theme-btn__revision {
	position: relative;
    padding: 0.5em 0.5em 0.5em 1em;
    min-width: 14em;
    max-width: 100%;
	font-size: 1.3em;
}
.c-btn.theme-btn__send::before,
.c-btn.theme-btn__revision::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
	left: .5rem;
    margin: auto;
    display: inline-block;
    width: 1em;
    height: 1em;
    clip-path: polygon(0 7%, 7% 0, 57% 50%, 7% 100%, 0 93%, 43% 50%, 0 7%);
    aspect-ratio: 1;
    background: currentColor;
}
.c-btn.theme-btn__send {
    background: var(--color-company);
}
.c-btn.theme-btn__send:disabled {
	background: var(--color-gray);
	opacity: 1;
}
.c-btn.theme-btn__revision {
    background: var(--color-gray);
}

.theme-note__wrap {
	padding: 0.5rem;
}

/* ==================================================================
	FORM - 要素
*/
input[type="radio"], input[type="checkbox"] {
	position: relative;
	width: 13px;
	height: 13px;
	border-radius: 100%;
}
:is(input[type="radio"], input[type="checkbox"])::after {
	position: absolute;
	top: .3em;
	border-color: #999;
}
/* :is(input[type="radio"], input[type="checkbox"]):checked::after {
	border-color: var(--color-company);
} */
:is(input[type="radio"], input[type="checkbox"])::before {
	position: absolute;
	top: .3em;
	width: 7px;
	height: 7px;
	background: var(--color-company);
}
input[type="text"], input[type="number"], textarea, select {
	background: rgb(255, 247, 238);
	border: solid 2px var(--color-gray);
}

/* ==================================================================
	FORM - テーブル
*/
/* 縦積み */
.l-table caption {
	padding: 0;
	margin-bottom: 1rem;
}
.l-table caption h3 {
	margin-bottom: .5rem;
	padding: 1rem;
	background: var(--color-lightblue);
	font-size: 1rem;
    font-weight: bold;
}
.l-table caption small {
	display: inline-block;
	font-weight: normal;
}

.l-table th .l-table__inner {
    align-items: flex-start;
	justify-content: start;
}
@media screen and (min-width: 768px) {
	.l-table th .l-table__inner {
		align-items: center;
	}
}

.l-table .l-table__contents:has([type="radio"], [type="checkbox"]):not(:is(.o-note__wrap .l-table__contents)) {
	display: block;
	width: 100%;
	background: rgb(255, 247, 238);
	border: solid 2px var(--color-gray);
}
.l-table .l-table__contents label:has([type="radio"], [type="checkbox"]) {
	display: flex;
	gap: 3px;
	padding: 0.7em 0.6em;
	width: 100%;
	line-height: 1;
}

.l-table tr {
	border: solid 1px var(--color-gray);
}
.l-table tr:has([rowspan]) {
	border-bottom: none;
}
.l-table tr:not(:has(th)){
	border-bottom: none;
	border-top: none;
}
.l-table tr:not(:has(th)):last-of-type {
	border-bottom: solid 1px var(--color-gray);
}
.l-table th {
	border: none;
}
.l-table td {
	padding: 0 1em 1.5em;
}
@media screen and (min-width: 768px) {
	.l-table th {
		font-weight: 600;
		padding: 1.5em 0.5em 1.5em 1.5em;
		width: 40%;
	}
	.l-table td {
		padding: 1.5em 1.5em 1.5em 1.3em;
		width: 60%; 
	}

    .l-table__contents:not(:has(textarea)) {
        max-width: 100%;
    }
}

.o-note__wrap .l-table tbody {
	display: grid;
    gap: 1.5rem;
}
.o-note__wrap .l-table th {
    padding: 0;
}
.o-note__wrap .l-table td .l-table__contents label:has([type="radio"], [type="checkbox"]) {
	padding: 0 0.6em;
}

.o-note__wrap .l-table td:has(.is-error__text) {
	padding: .5em;
}

.theme-table__inner {
	display: grid;
    gap: .5rem;
}
@media screen and (min-width: 768px) {
	.theme-table__inner .l-table__contents {
		display: flex;
        justify-content: space-between;
        align-items: center;
	}
	.theme-table__inner .l-table__contents label {
		width: calc(100% - 4rem);
	}
}

/* ==================================================================
    validation
*/
/* 注意点 */
.c-text__attention {
	color: var(--color-company);
    font-weight: normal;
}
/* 必須アイコン */
.o-icon__required,
[data-status] {
	padding: .25rem;
	margin: 0 0 0 auto;
	border: solid 1px currentColor;
	color: white;
    vertical-align: bottom;
}
.o-icon__required.icon-required,
[data-status="required"] {
	background: var(--color-orange);
}
.o-icon__required.icon-complete,
[data-status="complete"] {
	background: gray;
}
/* error */
.js-error__list,
.is-error__text {
	color: var(--color-errorfont);
}
.js-error__list,
td:has(.is-error__text) {
	padding-top: 1.5em;
	background: var(--color-errorback);
}

.c-input__mark {
	color: inherit;
}
.c-input__notes {
	font-size: 14px;
}

/* ==================================================================
    フロー図
*/

.o-list__flow li,
.o-list__flow li:after {
	background: white;
}
.o-list__flow li {
	margin-right: 1.5em;
    border: solid 1px var(--color-black);
	color: currentColor;
    border-right: none;
}
.o-list__flow li::after, 
.o-list__flow li::before {
	left: calc(100%);
}
.o-list__flow li:last-of-type:after,
.o-list__flow li:last-of-type::before {
    display: block;
}
.o-list__flow li:after  {
    width: 20px;
    height: 35px;
    border-left: solid 2px white;

}
.o-list__flow li::before {
    width: 21px;
    height: 37px;
}

.o-list__flow li.is-active,
.o-list__flow li.is-active::after,
.o-list__flow li.is-active::before  {
    background: var(--color-company);
	border-color: var(--color-company);
	border-left: solid 1px var(--color-company);
	color: white;
}

/* ==================================================================
    アイコン
*/
.o-icon__blank {
    margin-left: .05em;
    margin-right: 1em;
}
.o-icon__blank::before {
    bottom: 0%;
    right: 0;
    left: 70%;
    z-index: 1;
}

/* ==================================================================
    JS分岐箇所
*/
[data-attention] {
	display: none;
}