@charset "utf-8";
/* ******************************************* */
/* Layout of the heading & sectioning contents */
/* ******************************************* */
/* 画面の幅・余白・背景色を設定 */
body {
	min-width: 314px;
	margin: 0 auto;
	padding: 3px;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%
}
@media (min-width: 429px) and (min-height: 429px) {
	body {
		min-width: 314px;
		margin: 0 auto;
		padding: 1em;
	}
}
/* ******************************************* */
/* Main header area layout */
/* ******************************************* */
body>header {
	display: flex;
	flex-flow: row wrap-reverse;/*wrap;*/
	justify-content: space-between;
	align-content: center;
	align-items: stretch;
}
/* Main header - logo */
.header_logo {
	/*flex: 0 0 168px;*/
	/*text-align: center;*/
	flex: 0 0 314px;
	text-align: left;
	display: flex;
	align-items: center;
}
.header_logo a {
	font-size: 12px;
flex: 0 0 204px;
/*height: 72px;*/
}
.header_logo a img {
	/*width: 168px;*/ /*336px;*/
	/*height: 45px;*/ /*280px;*/
	font-size: 1em;
	width: 100%;
}
@media (min-width: 429px) and (min-height: 429px) {
	.header_logo a img {
		/*width: 226px;*/ /*336px;*/
		/*height: 60px;*/ /*280px;*/
	}
}

.header_sticker {
 /*height: 72px;*/
 height: 75px;
 /*background-color: black;*/
 /*width: 110px;*/
 flex: 0 0 110px;
}

.header_sticker a img {
	width: auto;
}

/* Main header - title */
.header_title {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	align-items: center;

	padding: 0 3px;
	flex: 99 1 140px;
	background-color: transparent;
	font-size: 11px;
	text-align: center;
}
.header_title span {
	display: inline-block;
	flex: 0 0 auto;
	color: white;
	font-size: 1em;
	text-align: center;
	padding: 0 0.25em 0 0;
}
.header_title span:first-child {
	font-size: 17px;
	flex: 0 0 100%;
	font-weight: bold;
}
.header_dumy {
	flex: 0 1 168px;
	background-color: black;
}
/* Main header - information */
.header_information {
	display: flex;
	flex-flow: row wrap;
	/*justify-content: center;*/
	/*align-content: center;*/
	/*align-items: flex-end;*/

	/*flex: 1 0 314px;*/
	/*background-color: black;*/

	/*justify-content: flex-end;*/
	align-content: center;
	flex: 1 0 309px;
	padding-left: 5px;
	/*margin-top: 0.5em;*/
	
}
@media (min-width: 668px) {
	.header_information {
		margin-top: 0;
	}
}
/* Main header - information - login information */
.header_information > a {
	display: flex;
	flex-flow: row wrap;
	/*justify-content: flex-start;*/
	align-content: flex-start;
	align-items: flex-start;

	/*flex: 1 0 314px;*/
	/*margin: 2px 1px 1px 0;*/
	/*padding: 0 7px;*/
	border-radius: 0px;
	/*font-size: 11px;*/
	text-decoration: none;
	transition: .33s;

	justify-content: flex-end;
	/*flex: 1 0 146px;*/
	font-size: 0.6em;
	flex: 0 0 100%;
	gap: 0 0;
	overflow: hidden;
}
.header_information a:hover {
	background-color: var(--deep-indigo);
	transition: .2s;
}
.header_information a span {
	display: inline-block;
	flex: 0 0 auto;
	/*color: white;*/
	/*font-size: 1em;*/
	font-weight: bold;
	/*line-height: 14px;*/
	transition: .33s;
	font-size: 1.2em;
	line-height: 1.2em;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: right;
}
.header_information a:hover span {
	color: black;
	transition: .2s;
}
/* Main header - information - main navigation */
.header_information nav {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	align-items: center;

	flex: 1 0 314px;
	padding-left: 1px;
}
.header_information nav a {
	flex: 1 0 auto;
	margin: 0 1px 1px 0;
	padding: 5px 2px;
	background-color: darkgray;
	text-align: center;
	line-height: 1;
}
.header_information nav a:first-child { /* かっこ悪いけど、幅調整のため */
	/*padding-left: 8px;*/
}
.header_information nav a:hover {
	background-color: white;
}
.header_information nav a span {
	font-size: 14px;
}
#btn_top:hover {
	color: white;
}
#btn_servey:hover {
	color: white;
}
#btn_report:hover {
	color: white;
}
#btn_account:hover {
	color: white;
}
#btn_account > span {
	/*height: 14px;*/
	/*max-width: 257px;*/
	overflow: hidden;
	text-overflow: ellipsis;

	height: 1.2em;
	max-width: 100%;
	padding: 0 0.25em;
}
#btn_account #btn_account_lt {
	max-width: none;
	width: 100%;
	text-align: right;
}
@media (max-width: 633px) {
	#btn_account #btn_account_nm {
		flex: 7 0 auto;
		max-width: none;
		width: 257px;
	}
	#btn_account #btn_account_lt {
		flex: 1 0 auto;
		width: 203px;
	}
}
#btn_logout:hover {
	color: white;
}
/* Main header - contents navigation ( Bbreadcrumb list ) */
.header_navigation {
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
	flex: 1 0 146px;
	/*margin-top: 0.5em;*/
}
.header_navigation nav {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: stretch;
	flex: 1 0 146px;
	gap: 0px 6px;
}
@media (min-width: 768px) and (min-height: 429px) {
/*@media (min-width: 960px) and (min-height: 429px) {*/
	.header_information > a {
		font-size: 0.8em;
	}
	.header_navigation {
		margin-top: 0;
	}
}
 /*
 .header_navigation {
	width: 100%;
	padding: 10px 0 0;
	background-color: ghostwhite;
}
.header_navigation ol {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: flex-end;
	align-items: flex-end;
}
.header_navigation ol li {
	flex: 0 0 auto;
	font-size: 12px;
}
.header_navigation ol li:after {
	content: '＞';
	font-size: 1em;
}
.header_navigation ol li a {
	display: inline-block;
	padding: 0 3px 2px;
	font-size: 1em;
	transition: .2s;
}
.header_navigation ol li a:hover {
	background-color: lightskyblue;
	transition: .33s;
}
*/
/* Main header - contents title */
.contents_title {
	width: 100%;
	/*padding: 0.5em 0.5em 0.2em 0.2em;*/
	font-size: 1em;/*1.3em;*/
	font-weight: bold;
	/*margin-top: 0.5em;*/
	border-bottom: 2px solid #007bff;

	/*padding: 1.5em 0.2em 0.2em 0.2em;*/
	padding: 0.5em 0.2em 0.2em 0.2em;
}
.contents_title .go_back {
/*	padding: 3px 0.75em;*/    
	padding: 4px 2em 1px;
}
/*
.contents_title {
	width: 100%;
	padding: 3px 0 3px 10px;
	background-color: ghostwhite;
	*//* border-bottom: 1px solid darkgray; *//*
	font-size: 20px;
	font-weight: bold;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	margin-top: 5px;
}
*/
/*
.contents_title {
	width: 100%;
	padding: 10px 0 5px 0.5em;
	background-color: ghostwhite;
	border-bottom: 1px solid darkgray;
	font-size: 20px;
	font-weight: bold;
}
*/
/* Main header - contetns massage */
.msgbox {
	border: 3px solid var(--deep-red);
	padding: 0.5em;
	white-space: pre-wrap;
	font-size: 14px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.6);
	margin-top: 5px;
}
@media (min-width: 429px) and (min-height: 429px) {
	.msgbox {
		padding: 1em;
		margin-top: 1em;
	}
}
/*
.msgbox {
	margin: 0.5em 0.5em 0;
	border: 3px solid darkgray;
	padding: 0.25em;
	white-space: pre-wrap;
	font-size: 14px;
}
*/
.msgbox li{
	font-size: 14px;
	font-weight: bold;
}
.msgbox.notice {
	border-color:  var(--deep-indigo);
	color:  var(--deep-indigo);
}
.msgbox.notice li{
	color:  var(--deep-indigo);
}
.msgbox.error {
	border-color: var(--deep-red);
	color: var(--deep-red);
}
.msgbox.error li{
	color: var(--deep-red);
}
.infoStyle {
	color: var(--deep-indigo);
}
.warnStyle {
	color: var(--deep-orange);
}
.errorStyle {
	color: var(--deep-red);
}
.fatalStyle {
	color: var(--deep-pink);
}

/* ******************************************* */
/* Main navigation area layout */
/* ******************************************* */
body>nav {
	padding: 0.5em 0.5em 0;
}
body>nav h1 {
	padding: 0.5em 0 0.3em 0.2em;
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
}
/* ******************************************* */
/* Main contents area layout */
/* ******************************************* */
body>form>article {
	margin: 0.5em auto 3em;
}
@media (min-height: 429px) {
	body>form>article {
		/*padding-top: 51px;*/
		margin-top: 5%;
	}
}
@media (min-height: 769px) {
	body>form>article.login_article {
		/*margin-top: 5%;*/
	}
}
body>form>article.on_title {
	margin-top: 0.5em;
}
/*
.article_title {
	margin: 2em auto 1em;
	padding: 0.25em;
	text-align: center;
	line-height: 1.5;
	font-weight: bold;
}
*/
.article_title {
	text-align: center;
	font-weight: bold;
	position: absolute;
	top: 50%;
	bottom: 0;
	margin-top: -0.5em;
	left: 0;
	right: 0;
}
.reception_title {
	border: 5px solid var(--deep-blue);
	border-radius: 0.25em;
	margin: 1em auto;
	padding: 2em 1em;
}
.reception_title > p {
	font-size:14px;
	line-height:1.5;
}
.notice_area {
	border: 5px solid var(--deep-red);
	border-radius: 0.25em;
	margin: 1em auto;
	padding: 2em 1em;
}
.notice_area > p {
	color:black;
	font-weight:bolder;
	text-align: center;
}
@media (min-width: 960px) and (min-height: 429px) {
/*	.article_title {
		font-size:24px;
	}
	.notice_area {
		font-size:24px;
	}*/
}
@media (min-width: 376px) {
	.reception_title {
		margin: 2em auto;
		padding: 2em;
	}
	.notice_area {
		margin: 2em auto;
		padding: 2em;
	}
}
/* Main contents title */
body>form>article h1 {
	/*argin: 0 auto 2em;*/
	/*padding: 0.7em 0.5em 0.5em;*/
	/*background-color: ghostwhite;*/
	font-weight: bold;
	line-height: 1;
	width: 100%;
	/*box-shadow: 2px 2px 2px rgba(0,0,0,0.2);*/
/*	margin: 0 0 2em;*/
    margin: 0;
	padding: 0.5em;
	border-bottom: 2px solid darkslategray;
	text-align: center;
}
/*
@media (min-height: 668px) {
	body>form>article h1 {
		margin: 0 auto 2em;
		padding: 1.2em 0.5em 0.8em;
	}
}
*/
/* ******************************************* */
/* Sub contents area layout */
/* ******************************************* */
body>form>article section {
	margin: 0 auto;
	/*margin: 0.5em auto 0;*/
	/*max-width: 720px;*/
    max-width: 976px;
	text-align: center;
}
body>form>article>section h1 {
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(to right, transparent 0%, darkslategray 50%, transparent 100%) 1;
}
/* Sub contents area - layer2 */
body>form>article>section section {
/*  max-width: 408px;*/
	text-align: center;
}
body>form>article>section section h1 {
	font-size: 18px;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(to right, var(--deep-indigo) 0%, transparent 100%) 1;
}
/* go Back button Area */
.go_back {
	text-align: left;
}
/* go Next button Area */
/*.go_next {
	text-align: center;
}*/
/* ******************************************* */
/* Footer area layout */
/* ******************************************* */
body>footer {
	padding: 3px;
	background-color: white;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
}
body>footer p {
	/*color: white;*/
	font-size: 10px;
	text-align: right;
}
/* footer - information */
.footer_information nav {
	/*margin-top: 1em;*/
	/*text-align: center;*/
}
@media (min-width: 429px) and (min-height: 429px) {
	body>footer {
		padding: 1em;
	}
}
/* ******************************************* */
/* Public class */
/* ******************************************* */
.clear {
	clear: both;
}
.hide {
	display: none;
}
.width_full {
	width: 100%;
}
.width_auto {
	width: auto;
}
.flex_center {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	align-items: center;
    column-gap: 17px;
    row-gap: 1em;
    margin-bottom: 3em;
}
.flex_left {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: center;
	align-items: center;
    column-gap: 17px;
    row-gap: 1em;
    margin-bottom: 3em;
}
.flex_between {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: center;
	align-items: center;
    column-gap: 17px;
    row-gap: 1em;
    margin-bottom: 3em;
}
.flex_around {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-content: center;
	align-items: center;
    column-gap: 17px;
    row-gap: 1em;
    margin-bottom: 3em;
}
.flex_item {
	flex: 1 0 314px;
	/*flex: 1 0 281px;*/
	/*flex: 1 0 315px;*/
	/*margin-bottom: 10px;*/
	align-self: first baseline;
	/*min-height: 7em;*/
}
/*
@media (min-height: 429px) {
	.flex_item {
		min-height: 8em;
	}
}
@media (min-height: 569px) {
	.flex_item {
		min-height: 8em;
	}
}
@media (min-height: 668px) {
	.flex_item {
		min-height: 8em;
	}
}
*/
.no_contents {
	min-height: 0em;
}
/* panel使用時の余白設定 */
.flex_item.ui-panel {
	margin: 1em 0;
	padding: 3px;
}
@media (min-width: 584px) {
	.flex_item.ui-panel {
		margin: 1em 3px;
	}
}
.flex_item.ui-panel > .ui-panel-content {
	padding: 0;
}
.gap_zero {
    gap: 0;
}
.refiner {
    max-width: 100%;
    gap: 10px;
    margin-bottom: 10px;
}
.refiner_term {
    margin: 0;
    flex: 0 1 37em;
    border: 1px solid gainsboro;
    padding: 5px 0.5em 5px;
    border-radius: 3px;
    box-shadow: 2px 2px 5px rgb(0 0 0 / 10%);
    box-sizing: border-box;
    gap: 10px 0;
}
.refiner_term_date {
    margin: 0;
    flex: 0 1 27em;
    border: 1px solid gainsboro;
    padding: 5px 0.5em 5px;
    border-radius: 3px;
    box-shadow: 2px 2px 5px rgb(0 0 0 / 10%);
    box-sizing: border-box;
    gap: 10px 0;
}
/*.refiner_term > input[type="date"]
,.refiner_term_date > input[type="date"]
,.refiner_term > div input[type="date"]
,.refiner_term_date > div input[type="date"] {
	text-align: left;
    width: 7em;
}
.refiner_term > input[type="time"]
,.refiner_term > div > input[type="time"] {
	text-align: right;
}*/
.refiner_term_old {
    margin: 0;
    flex: 0 1 39em;
    border: 1px solid gainsboro;
    padding: 5px 5px 5px 16px;
    border-radius: 3px;
    box-shadow: 2px 2px 5px rgb(0 0 0 / 10%);
    box-sizing: border-box;
}
.refiner_term_date_old {
    margin: 0;
    flex: 0 1 31em;
    border: 1px solid gainsboro;
    padding: 5px 5px 5px 16px;
    border-radius: 3px;
    box-shadow: 2px 2px 5px rgb(0 0 0 / 10%);
    box-sizing: border-box;
}
.refiner_status_type {
    max-width: 100%;
    margin: 0;
    flex: 0 1 auto;
    border: 1px solid gainsboro;
    padding: 0 0 0 5px;
    border-radius: 3px;
    box-shadow: 2px 2px 5px rgb(0 0 0 / 10%);
    box-sizing: border-box;
    gap: 0;
}
.flex_paper {
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    margin: 0.5em auto 0;
    max-width: 976px;
}
.flex_paper > section > h1 {
  text-align: center;
  /*margin: 0 0 2em;*/
  margin: 1em 0.5em 2em;
  width: 100%;

  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 1em;
}
.flex_paper > section > h1 > span {
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1;
}
@media (min-width: 429px) and (min-height: 429px) {
	.flex_paper > section {
	
	  /*box-shadow: 6px 6px 12px rgba(0,0,0,0.3);*/
      box-shadow: inset 0 0 2em rgba(240, 240, 255, 0.9);
	  padding: 2em;
	}
	.flex_paper > section > h1 {
	  margin: 1em 0;
	}
}
.flex_menu {
/*    max-width: 551px;*/
}
/* メニュークラスが付いている場合は最大幅を設定 */
.flex_menu > .flex_item {
  /* flex: 0 1 720px; */
  flex: 0 1 976px;
}
.flex_back {
	margin-top: 3em;
}
.txt_left {
	width: 100%;
	text-align: left;
}
.txt_center {
	width: 100%;
	text-align: center;
}
.txt_right {
	width: 100%;
	text-align: right;
}
.txt_large {
	font-size: 22px;
}
.msg {
	margin: 0.5em 0.5em 0;
	padding: 0.5em;
}
.msg li{
	font-size: 16px;
	font-weight: bold;
	line-height: 1.2;
}
.msg.notice li{
	color: var(--deep-indigo);
}
.msg.error li{
	color: var(--deep-red);
}
.comment {
	margin: 2px 0;
	font-size: 12px;
	font-weight: bold;
}
.comment_error {
	margin: 2px 0;
	color: var(--deep-red);
	font-size: 12px;
	font-weight: bold;
}
.comment_notice {
	margin: 2px 0;
	color:  var(--deep-indigo);
	font-size: 12px;
	font-weight: bold;
}
.comment_large {
	font-size: 16px;
}
.msg_error {
	font-size: 0.7em;
	font-weight: bold;
	color: var(--deep-red);
}
.msg_warn {
    font-size: 0.7em;
    font-weight: bold;
    color: var(--deep-orange);
}
.msg_notice {
	font-size: 0.7em;
	font-weight: bold;
	color:  var(--deep-indigo);
}
.msg_notice2 {
    font-size: 0.7em;
    font-weight: bold;
    color: var(--deep-indigo);
}
.msg_info {
    font-size: 0.7em;
	font-weight: bold;
	color: var(--deep-indigo);
}
.msg_large {
	font-size: 0.8em;
}
.div_background {
	width: auto;
}