@charset "utf-8";

/**
 * Variables
 *
 */
:root {
	--color-main: #0057A5;
	--color-sub: #CEE8FD;
	--color-text: #333;
	--color-white: #fff;
	--color-black: #000;
	--color-gray: #bfbfbf;
	--color-border: transparent;
	--color-red: #E67C72;
	--color-red2: #E60000;
	--color-green: #3F8143;
	--color-yellow: #F1F1E6;
}

.bg-white {
	background-color: var(--color-white)!important;
	color: var(--color-black)!important;
}

.bg-red {
	background-color: var(--color-red2)!important;
}

.bg-green {
	background-color: var(--color-green)!important;
}
.color-red {
	color: var(--color-red2);
}
.color-main {
	color: var(--color-main);
}
body {
	position: relative;
	min-width: 320px;
}
p {
	line-height: 1.5;
}
.main-contents {
	/* padding-top: 180px; */
	padding-top: 90px;
}

.section-header__ttl {
	text-align: center;
	font-size: var(--golden-16);
	font-weight: 500;
	margin-bottom: 1em;
}

.gh__logo {
	/* flex: 1 0 auto; */
}

.logo-img {
	margin: 0 auto;
	width: 100px;
}

/* 会社名 */
.company-name {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	text-align: left;
}
@media screen and (max-width: 480px) {
	.company-name {
		text-overflow: initial;
		overflow: initial;
		white-space: initial;
	}
}

/* form */
input,button {
	-webkit-appearance: none;
	-moz-appearance: none;
			 appearance: none;
	font-family: inherit;
}
input,
select {
	width: 100%;
	padding: 15px 5px;
}

input:active,
select:active,
button:active {
	outline: none;
}

input:focus,
select:focus,
button:focus {
	outline: none;
}

select {
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
	background-color: var(--color-white);
}
.form-table {
	margin-bottom: 2em;
}
.form-table:last-of-type {
	margin-bottom: 0;
}
.form-table__ttl {
	font-size: 1.3em;
	margin-bottom: .8em;
}
.box-dec {
	border-radius: 7px;
	padding: 1em 1em;
	border: none;
	box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.1);
	position: relative;
	background-color: var(--color-white);
}


/* btn */

.g-btn {
	padding: 30px 0;
	text-align: center;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	position: fixed;
	z-index: 99990;
	width: 100%;
	bottom: 0;
	background-color: var(--color-white);
}
.btn {
	padding: .5em 2em;
	background-color: var(--color-main);
	color: var(--color-white);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border-radius: 7px;
	border: none;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	position: relative;
	font-size: 1.3em;
}
.btn-l {
	padding: .5em 3.5em;
	background-color: var(--color-main);
	color: var(--color-white);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border-radius: 7px;
	border: none;
	font-size: 1.4em;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.btn-s {
	padding: .3em 2em;
	background-color: var(--color-main);
	color: var(--color-white);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border-radius: 7px;
	border: none;
	font-size: 1.2em;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	width: 180px;
}

.btn:active {
	outline: none;
}

.btn:focus {
	outline: none;
}
@media screen and (max-width: 600px) {
	.btn-s {
		font-size: 1.1em;
		width: 165px;
	}
}

.btn.back {
	background-color: var(--color-gray);
	color: var(--color-black);
}

.btn.w100 {
	display: block;
}

.text-box {
	border: 1px solid;
	padding: 1em;
}
/* リスト */

.item {
	padding: 25px;
	border-top: 1px solid var(--color-gray);
}

.item:last-of-type {
	border-bottom: 1px solid var(--color-gray);
}

.item-color-green {
	border-left: 20px solid var(--color-green);
}

.item-color-green button {
	background-color: var(--color-green);
}

.item-color-red {
	border-left: 20px solid var(--color-red);
}

.item-color-red button {
	background-color: var(--color-red);
}

.item>dl {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.item>dl dt {
	font-size: 1.1em;
	width: 35%;
	padding-left: 15px;
	margin-left: 0px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.item>dl dt ul{
	font-size: 0.8em;
}
.item>dl dd {
	width: 30%;
	text-align: right;
}
.item>dl dd button{
	width: 100%;
	max-width: 165px;
}
.report-btn-p{
	display: flex;
	justify-content: space-between;
	padding-right: 25px;
	padding-left: 45px;
	text-align: right;
}

.report-btn-p::before{
	content: '';
	display: block;
	width: 70%;
}

@media screen and (max-width: 480px) {
	.item>dl {
		flex-direction: column;
		align-items: flex-end;
	}
	.flex-sort1{
		order: 1;
	}
	.flex-sort2{
		order: 2;
	}
	.flex-sort3{
		order: 3;
	}
	.item>dl dt {
		font-size: 1.3em;
		width: 100%;
	}
	.item>dl dd {
		text-align: right;
		margin-bottom: 15px;
		margin-left: 0;
		width: 100%;
	}
}

.item__info {
	margin-top: 1em;
}
.item__info.item-hide {
	margin: 1em 0;
}

.item__block-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.item__block {
	width: calc(50% - .5em);
}
.item__block li span {
	display: block;
	margin-top: .5em;
}

/* javascriptのテンプレート追加時用 */
.tmp-item-hide{
	display: none;
}

@media screen and (max-width: 600px) {
	.item__block-wrap {
		display: block;
	}
	.item__block {
		width: 100%;
	}
	.item__block:nth-of-type(1) {
		margin-bottom: 1.5em;
		padding: 0;
	}
}

.item__block li {
	margin-bottom: 1em;
	background-color: var(--color-white);
}

.item__block li:last-of-type {
	margin-bottom: 0;
}

.item__block .item__icon {
	margin-right: .5em;
}

.item__block a span {
	display: inline-block;
}

.item__block .address {
	vertical-align: top;
}

.item__block .tel {
	vertical-align: super;
}

@media screen and (max-width: 480px) {
	.item__info {
		display: block;
	}
}


/* リスト間隔あり */

.item-list-space .item {
	/* margin-bottom: 2em; */
	/* box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.1); */
	/* border-top: none; */
	border-top: 1px solid var(--color-gray);
}

.item-list-space .item:last-of-type {
	margin-bottom: 0;
	/* border-bottom: none; */
	border-bottom: 1px solid var(--color-gray);
}

/* リスト追加・削除 */
.move {
	display: inline-block;
	border: 1px solid;
	border-radius: 7px;
	padding: .5em;
	font-size: .7em;
}
.item-edit .item-btn {
	padding: 15px;
	cursor: pointer;
}
.item-edit .item-btn > h1 {
	display: inline-block;
	vertical-align: super;
	font-size: 15px;
	text-overflow: ellipsis;
	width: 40%;
	white-space:nowrap;
	overflow: hidden;
}
.item-edit .item-btn .item-ttl.show-list {
	white-space: initial;
	width: 80%;
}
.item-app {
	display: inline-block; font-size: .9em; margin-left: .9em; vertical-align: top; line-height: 1.4;
}
.item-app {
	width: 40%;
}
.item-app li {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.item-app.show-list {
	display: none;
}
@media screen and (max-width: 480px) {
	.item-edit .item-btn > h1 {
		font-size: 14px;
		width: 70%;
	}
	.item-edit .item-btn .item-ttl.show-list {
		width: 75%;
		white-space: initial;
	}
	.item-app {
		margin-top: 10px;
		margin-left: 0;
		width: 90%;
	}
	.move {
		font-size: .8em;
	}
}

.item-edit .item {
	position: relative;
	padding: 0;
	background-color: white;
}

.item-edit .item-plus,
.item-edit .item-minus {
	display: block;
	width: 30px;
	height: 30px;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	cursor: pointer;
}

.item-edit .item-plus {
	background-image: url(../image/plus.png);
	top: -15px;
	left: 25%;
}

.item-edit .item-minus {
	background-image: url(../image/minus.png);
	top: 20px;
	right: 30px;
}
@media screen and (max-width: 480px) {
	.item-edit .item-minus {
		right: 20px;
	}
}
.item-edit {
	position: relative;
}

.item-edit .item-plus-under {
	bottom: -15px;
	top: initial;
}


/* 検索フォーム */

.display-none{
	display: none;
}

.search {
	display: flex;
}

.search input {
	max-width: 400px;
	margin-right: 10px;
}

.search button {
	width: 160px;
}

/* ラジオボタン */
.radio-input{
	display: none;
  }
  .radio-input + label{
	padding-left: 20px;
	margin-right: 20px;
  }
  .radio-input + label::before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	border: 1px solid #999;
	border-radius: 50%;
	background-color: var(--color-white);
  }
  .radio-input:checked {
	color: var(--color-black);
  }
  .radio-input:checked + label::after{
	content: '';
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
	width: 10px;
	height: 10px;
	background: var(--color-black);
	border-radius: 50%;
  }
/* モーダル */

.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal__bg {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba( 0, 0, 0, .8);
	z-index: -1;
}

.modal__container {
	background-color: var(--color-white);
}

.modal__header {
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	padding: 0.6em 2em;
	text-align: center;

}

.modal-hidden{
	display: none;
}


.modal__header .search {
	justify-content: center;
}

.modal__body {
	overflow-y: scroll;
	max-height: 500px;
	padding: 1em 2em;
}
.modal__body .item {
	padding: 0;
}
.modal__body label {
	padding: 0;
	margin: 0;
}
.modal__body .item__info {
	padding: 25px;
	padding-left: 45px;
	margin-top: 0;
}
.modal__body .item__info > h1 {
	margin-bottom: 15px;
	font-size: 1.3em;
}
.modal__body .radio-input:checked + label .item__info {
	background-color: var(--color-yellow);
  }
  .modal__body .radio-input:checked + label .item__info  {
	background-color: var(--color-yellow);
  }
.modal__body .radio-input + label::before {
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
}
.modal__body .radio-input + label::after {
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
}
@media screen and (max-width: 480px) {
	.modal__body {
		overflow-y: scroll;
		max-height: 50vh;
		padding: 1em 2em;
	}
	.modal__body .item__info {
		padding-left: 0;
		padding: 25px;
		padding-top: 45px;
	}
	.modal__body .item__info > h1 {
		text-align: center;
	}
	.modal__body .item__block {
		width: 100%;
	}
	.modal__body .radio-input + label::before {
		top: 15px;
		left: 50%;
		transform: translateX(-50%);
	}
	.modal__body .radio-input + label::after {
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
	}
}

.modal__body .item {
	border-right: 1px solid var(--color-gray);
	border-left: 1px solid var(--color-gray);
	position: relative;
}

.modal__footer {
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	padding: 2em;
	text-align: center;
}


/* テーブル */


table {
	width: 100%;
}
table thead th {
	text-align: center;
	background-color: var(--color-yellow);
}

table thead th,
table tbody td {
	padding: 1em;
	border: 1px solid;
	vertical-align: middle;
}
table tbody .remove{
	background-color: rgb(212, 212, 212);
}
@media screen and (max-width:600px) {
	.table-wrap {
		overflow: scroll;
		margin-right: -2em;
	}
	table {
		width: 900px;
		margin-right: 2em;
	}
}
/* header */

.gh {
	position: fixed;
	z-index: 99997;
	top: 0;
	left: 0;
	width: 100%;
	transition: all .3s ease;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	background-color: #fff;
}

.gh__main {
	width: 100%;
	height: 65px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--color-main);
	background-color: var(--color-white);
	position: fixed;
	top: 0;
	z-index: 99999;
}

.gh__main-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 20px;
	width: 100%;
	height: 100%;
}
.gh__ttl {
	/* position: fixed; */
	/* top: 30px; */
	/* left: 50%; */
	/* transform: translateX(-50%); */
	font-size: 1.2em;
	/* flex: 1 0 auto; */
	text-align: center;
}
@media screen and (max-width: 480px) {
	.gh__ttl {
		display: none;
	}
}
.gh__button {
	/* position: fixed; */
	z-index: 99999;
	/* top: 30px; */
	/* right: 20px; */
	/* width: 50px; */
	cursor: pointer;
}

@media screen and (min-width: 768px) {
	.gh__button {
		margin-left: 150px;
	}
}

.gh__button p {
	font-size: 1em;
	text-align: center;
}

.gh__button span {
	width: 100%;
	display: block;
	position: relative;
	margin-bottom: 7px;
	height: 15px;
}
.show .gh__button span {
	margin-top: 10px;
}

.gh__button span::before,
.gh__button span::after {
	content: "";
	display: block;
	width: 100%;
	height: 3px;
	background-color: var(--color-main);
	transition: all .4s;
	position: absolute;
}

.gh__button span::before {
	top: 0px;
}

.gh__button span::after {
	bottom: 0px;
}

.show .gh__button span::before {
	transform: rotate(30deg);
	top: initial;
}
.gh__nav {
	width: 100%;
	position: fixed;
	top: 65px;
	background-color: var(--color-white);
	transition: all .2s ease;
	transform: translateY(-100%);
	max-height: calc(100vh - 90px);
	overflow-y: scroll;
}
.gh__nav-bg {
	width: 100%;
	height: calc(100vh - 90px);
	background-color: var(--color-black);
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: 90px;
	z-index: -1;
	transition: all .2s ease;
}
.gh__nav .gh__nav-list {
}
.gh__nav .gh__nav-list li {
	border-bottom: 1px solid rgb(238, 238, 238);
}

.gh__nav .gh__nav-list li:last-of-type {
	margin-bottom: 0;
	border-bottom: none;
}
.gh__nav .gh__nav-list li a {
	font-size: 1.25em;
	display: inline-block;
	padding: 1.5em 1em;
	width: 100%;
}
.show .gh__nav {
	transform: translateY(0);
}
.show .gh__nav-bg {
	opacity: .8;
	visibility: visible;
}
.show .gh__nav .gh__nav-list {
}
.show .gh__button span::after {
	transform: rotate(-30deg);
	bottom: initial;
}

/*
.gh__sub {
	height: 60px;
	background-color: var(--color-sub);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
	font-weight: bold;
	position: fixed;
	top: 90px;
	width: 100%;
}
*/

.h-back {
	text-align: center;
}

.h-back a {
    display: block;
}

.icon-back {
	display: block;
	width: 50px;
	height: 30px;
	position: relative;
}
.icon-back::before,
.icon-back::after {
	content: '';
	display: block;
	width: 30px;
	height: 3px;
	background-color: var(--color-main);
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -15px;
	transform-origin: left center;
}
.icon-back::before {
	transform: rotate(-20deg);
	margin-top: 1px;
}
.icon-back::after {
	transform: rotate(20deg);
}

.h-back a::after {
    content: 'BACK';
    display: block;
    margin-top: .25em;
    font-size: 1em;
}

.gh__nav--info {
    padding: .5em;
    font-weight: bold;
    text-align: center;
    background-color: var(--color-sub);
}

.h-date {
	margin-bottom: .5em;
	font-weight: bold;
	font-size: 25px;
	white-space: nowrap;
}

.h-date span {
	/* margin-left: -.25em; */
}

.h-name {
	display: flex;
	align-items: center;
	font-size: 1.2em;
	justify-content: center;
	white-space: nowrap;
}

.h-name::before {
	content: "";
	display: inline-block;
	background-image: url(../image/user-icon.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-right: 5px;
}

@media screen and (max-width: 480px) {
	.h-date {
		font-size: 18px;
	}
	.h-name {
		font-size: 3vw;
	}
}

/* ログイン画面 */
.login .chapter-section {
	background-color: #f3fcff;
	border-radius: 7px;
	padding: 2em;
}
.login-birthday .row {
	justify-content: space-between;
}
.login-birthday .row {
	justify-content: space-between;
	align-items: center;
}
.login-birthday .date-separator {
	margin: 0 .5em;
}
.login-birthday .row select {
	width: 30%;
}
@media screen and (max-width: 480px) {
	.login-birthday .row select {
		width: 100%;
		margin-bottom: 1em;
	}
	.login-birthday .row select:last-of-type {
		margin-bottom: 0em;
	}
}
/* トップページ */

.top .chapter-section {
	width: calc(100% - 20px);
	max-width: 400px;
	margin: auto;
	margin-top: 100px;
}

.top .chapter-section p {
	font-size: 1.2em;
	font-weight: bold;
	color: gray;
	text-align: center;
	margin-bottom: 30px;
}

.top .chapter-section .message.success {
  font-weight: bold;
  color: var(--color-green);
}

.top .chapter-section select {
	font-size: 1.2em;
}

.top .h-back {
	display: none;
}


/* 収集報告画面 */
.caption_box{
  position: relative;
}

.caption_box .caption{
  position: absolute;
  top: 50%;
  left:-47px;
  font-size: 1em;
  padding: 0;
  margin: 0;
	transform: translateY(-50%) translateX(1.7em);
	display: inline-block;
  text-align: center;
  width: 20px;
}
.root-confirm .modal__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.root-confirm .modal__header h1 {
	font-size: 1.2em;
}
.root-confirm .modal__header h1:first-of-type {
	white-space: nowrap;
	margin-right: 1em;
}
.report_textarea{
	width: 100%;
}
.otherItem{
	width: 100%;
	margin: 3px 0;
	text-align: right;
}

.otherItem input{
	width: 70%;
	margin-left:5px;
}

.report_modal_close{
	margin-left: 163px;
	background-color: transparent;
	border: 0;
	opacity: .5;
	line-height: 1;
	font-weight: 700;
	font-size: 3rem;
	padding: 1rem;
}

@media screen and (max-width: 480px) {
	.root-confirm .modal__header {
		display: block;
	}
	.root-confirm .modal__header h1:first-of-type {
		margin-right: 0;
		margin-bottom: 1em;
	}
}


/* Flash */
.section-flash {
	font-weight: bold;
	text-align: center;
}
.message.success {
  font-weight: bold;
  color: var(--color-green);
}
.message.error {
  color: var(--color-red);
}
.message.hidden {
  display: none;
}


/* change password */
.pwd-toggle {
	position: relative;
}
.pwd-toggle > input {
	padding-right: 3.5em;
}
.pwd-toggler {
	display: inline-block;
	padding: 0 .25em;
	position: absolute;
	top: .8em;
	right: 1em;
}
.pwd-toggler:focus {
	outline: 1px dashed var(--color-text);
}
.pwd-toggler::before {
	content: '\f070';
	font-family: 'Font Awesome 5 Free';
	color: var(--color-main);
}
.visible .pwd-toggler::before {
	content: '\f06e';
}
label.error {
	display: block;
	margin-top: .5em;
	font-weight: bold;
	font-size: .9em;
	color: var(--color-red);
}

/* Ajax */
#loading {
  /* display: table; */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba( 0, 0, 0, .8);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

#ajaxCSS {
  border: 3px solid hsla(185, 100%, 62%, 0.2);
  border-top-color: #3cefff;
  border-radius: 50%;
  width: 3em;
  height: 3em;
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* MIT License

Copyright (c) 2019 Jonathan Olaleye

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. */