/*
	基本レイアウト
	
	
	
*/
.contents-wrap .contents {
	padding: 120px 120px 0px 120px;
	position: relative;
}
@media screen and (max-width: 720px) {
	.contents-wrap .contents {
		padding: 80px 20px 0px 20px;
	}
	.pc {
		display: none;
	}
}
@media screen and (max-width: 320px) {
	.contents-wrap .contents {
		padding: 80px 10px 0px 10px;
	}
	.pc {
		display: none;
	}
}


.text-right {text-align: right;}
.text-left {text-align: left;}
.text-center {text-align: center;}
.bold600 {font-weight: 600;}
.bold700 {font-weight: 700;}
.bold800 {font-weight: 800;}
.bold900 {font-weight: 900;}
.lh1 {line-height: 1.5em;}
.lh2 {line-height: 2em;}
.lh3 {line-height: 2.5em;}
.lh4 {line-height: 3em;}
.ls1 {letter-spacing: 1.2em;}
.ls2 {letter-spacing: 0.9em;}
.ls3 {letter-spacing: 0.7em;}
.ls4 {letter-spacing: 0.4em;}
.shadow-white {text-shadow: 0 0 20px white;}
.shadow-black {text-shadow: 0 0 20px black;}

.float-right {float: right;}
.clearfix::after {
	content: "";
	display: block;
	clear: both;
  }


.h1 {font-size: 4em;}
.h2 {font-size: 3.5em;}
.h3 {font-size: 2.5em;}
.h4 {font-size: 2.0em;}
.h5 {font-size: 1.5em;}
.h6 {font-size: 1.3em;}
.h7 {font-size: 1.1em;}
.h8 {font-size: 0.9em;}
.h9 {font-size: 0.8em;}
@media screen and (max-width: 720px) {
	.h1 {font-size: 2.5em;}
	.h2 {font-size: 1.9em;}
	.h3 {font-size: 1.6em;}
	.h4 {font-size: 1.3em;}
	.h5 {font-size: 1.1em;}
	.h6 {font-size: 0.9em;}
	.h7 {font-size: 0.8em;}
	.h8 {font-size: 0.5em;}
	.h9 {font-size: 0.3em;}
}

.justify {
	text-align: justify;
}


.sp { display:none; }
@media screen and (max-width: 720px) {
	.sp { display:block; }
}

/*
	カスタム変数
	8c6b35
*/
:root {
	--amo-color: white;
	--amo-text-color: #777;
}


#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	padding: 20px 0px;
	background-color: white;
/* 	box-shadow: 6px 0 25px rgba(0,0,0,.15); */
	z-index: 8000;
}
#header .header-contents-wrap .header-contents a {
	display: inline-block;
	text-decoration: none;
	color: black;
	padding-left: 15px;
}
#header .header-contents-wrap .header-contents img {
	width: 120px;
}

/*
	====
	hamberger
*/

#nav-drawer {
	display: none;
	position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
	display:none;
}

#nav-open {
	display: inline-block;
	width: 30px;
	height: 22px;
	vertical-align: middle;
	position: absolute;
	top: -20px;
	right: 20px;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 3px;
	width: 25px;
	border-radius: 3px;
	background: var(--amo-color);
	display: block;
	content: '';
	cursor: pointer;
}
#nav-open span:before {
	bottom: -8px;
}
#nav-open span:after {
	bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
	display: none;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	right: -300px;
	z-index: 9999;
	width: 50%;
	max-width: 300px;
	height: 100%;
	background:  var(--amo-color);
	transition: .3s ease-in-out;
	padding: 40px 20px 20px 20px;
}

#nav-content li {
	font-size: 13px;
	padding: 15px 0px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#nav-content li:hover {
	background-color: rgba(255, 255, 255, 0.1);
} 

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(-300px);
  transform: translateX(-300px);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}



@media screen and (max-width: 720px) {
	#header {
		font-size: 12px;
	}
	#header a span {
		padding: 0px 10px;
	}
	#header .header-contents-wrap .header-contents img {
		width: 100px;
	}
	#header .header-contents-wrap .header-contents a.menus {
		display: none;
	}
	#header .header-contents-wrap .header-contents #nav-drawer {
		display: block;
	}
	#header .header-contents-wrap .header-contents a {
		color: white;
	}
}

/*
	spiner
*/
.spinner {
	margin: 100px auto 0;
	width: 70px;
	text-align: center;
	padding-bottom: 100px;
}
.spinner > div {
	width: 14px;
	height: 14px;
	background-color: #767676;
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}


/*
	modal
*/
.modal {
	display: none;
	height: 100vh;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9990;
}
.modal__bg {
	background: rgba(0,0,0,0.8);
	height: 100vh;
	position: absolute;
	width: 100%;
	z-index: 9995;
}
.modal__content {
	background: #fff;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 90%;
	max-height: 70vh;
	overflow-y;scroll;
	overflow-x:hidden;
	z-index: 9996;
}
.modal__content .hr {
	border-bottom: 1px solid rgba(204, 204, 204, 0.5);
	margin: 15px 10px 5px 10px;
}


/*
	FORM
*/
form .form-parts {
	padding: 5px 0px;
}
form .form-parts p.title {
	font-size: 13px;
	font-weight: 600;
}
form .form-parts p.title span {
	font-size: 10px;
	font-weight: 300;
	margin-top: 5px;
	margin-bottom: 10px;
	padding: 0px 5px;
}

.form-parts .infomation {
	padding: 5px 0px 5px 0px;
	line-height: 25px;
	font-size: 20px;
}
.form-parts .infomation.bold {
	font-weight: 600;
}
.form-parts .infomation.line {
	border-bottom: 1px solid black;
}
.form-parts.submit {
	padding-top: 30px;
}
.form-parts.float-right {
	text-align: right;
}

.form-parts .all_checked {
	font-size: 10px;
	padding: 5px 10px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 5px;
}


select,
textarea,
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="time"],
input[type="text"],
input[type="number"] {
	font-size: 16px;
	width: calc(100% - 20px);
	padding: 10px 10px;
	background-color: rgba(178, 178, 178, 0.1);
}
.form-parts input[type="checkbox"],
input[type="radio"] {
	display: none;
}
.form-parts input[type="checkbox"] + label,
input[type="radio"] + label {
	padding: 5px 15px;
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 25px;
	margin: 10px 0px;
	color: #ccc;
	font-size: 13px;
}
.form-parts input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
	color: white;
	background-color: rgba(0, 0, 0, 1);
	
}
.form-parts select {
	width: 100%;
}

button {
	font-size: 16px;
	padding: 8px 15px;
	color: white;
	background-color: black;
	position: relative;
	width: 100%:
}
button.w100 {
	width: 100%:
}
button.outline {
	background-color: rgba(255, 255, 255, 0.3);
	color: black;
	border: 1px solid black;
}
button.outline:hover {
	background-color: rgba(201, 201, 201, 0.5);
}
button.disabled {
	background-color: #ccc;
}
button.cancel {
	background-color: #777777;
}
button.delete {
	background-color: #a03333;
}


button > img {
	width: 35px;
	position: absolute;
	top: 2px;
	left: 3px;
}

.error_text {
	font-size: 12px;
	color: #c51e1e;
	padding: 5px 0px;
}

.form-parts input.w-50 {
	width: calc(50vw - 142px);
	
}

@media screen and (max-width: 720px) {
	form .form-parts p.title {
		font-size: 14px;
		padding: 0px;
	}
	.form-parts .infomation {
		padding: 10px 0px 10px 0px;
		font-size: 25px;
		line-height: 15px;
		margin-bottom: 30px;
	}
	select,
	textarea,
	input[type="tel"],
	input[type="date"],
	input[type="email"],
	input[type="time"],
	input[type="password"],
	input[type="text"],
	input[type="number"] {
		font-size: 16px;
	}
	button {
		font-size: 13px;
	}
	.form-parts input.w-50 {
		width: calc(50vw - 42px);
	}
}


/*
	index
*/
	#main-page {
		padding: 55px 0px 0px 0px;
	}
	.content {
		padding: 60px 0px 0px 0px;
		color: var(--amo-text-color);
	}
	
	.welcom {
		height: 80vh;
		text-align: center;			
		background-image: url('../img/bg2.png');
		background-size: cover;
		position: relative;
		opacity: 1;
	}
	.welcom .box {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit- transform: translateY(-50%) translateX(-50%);
		width: calc(100vw-160px);
		/* position: absolute;
		top: 15vh;
		left: 0;
		margin: auto; */
		color: var(--amo-color);
		text-shadow: 1px 2px 3px #808080;
		font-weight: 600;
		padding: 60px 80px;
	}
	
	.content .title {
		font-size: 30px;
		line-height: 45px;
		font-weight: 400;
		letter-spacing: 0.3em;
	}
	.content .sub-title {
		font-size: 25px;
		line-height: 35px;
	}
	
	.h2 {
		font-size: 35px;
		line-height: 45px;
	}
	.h3 {
		font-size: 25px;
		line-height: 35px;
	}
	.btn01 {
		padding: 10px 30px;
		font-size: 16px;
		color: white;
		background-color: rgba(255, 255, 255, 0);
		border: 1px solid white;
		border-color: white;
		border-radius: 25px;
		margin-top: 20px;
	}
	
	.btn02 {
		padding: 10px 30px;
		font-size: 16px;
		color: var(--amo-text-color);
		background-color: rgba(255, 255, 255, 0);
		border: 1px solid var(--amo-text-color);
		border-color: var(--amo-text-color);
		border-radius: 25px;
		margin-top: 20px;
	}
	.btn02:hover {
		background-color: var(--amo-text-color);
		color: white;
		border-color: var(--amo-text-color);
	}
	
	.about {
		text-align: center;
		padding-left: 100px;
	}
	.about .body {
		text-align: left;
	}
	.about.content .sub-title {
		padding: 30px;
	}
	
	.about img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		vertical-align: bottom;
	}
	.about .five {
		padding: 30px 60px 60px 0px;
		display: grid;
		grid-template-columns: 3em auto;
		text-align: left;
	}
	.about .five p {
	}
	.about .five p:nth-child(odd)
	{
		font-weight: 600;
	}
	
	.grid2 {
		display: grid;
		grid-template-columns: 50% 50%;
	}
	.grid2 > div {
		padding: 60px;
	}
	.grid2 > div:first-child {
		padding: 60px 0px 60px 60px;
		line-height: 2em;
	}
	
	.company {
		text-align: center;
		color: black;
		background-color: rgba(0, 0, 0, 0.1);
		padding-bottom: 80px;
	}
	.company.content .title {
		padding: 20px 30px;
	}
	
	.company img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		vertical-align: bottom;
	}
	.grid3 {
		display: grid;
		grid-template-columns: 33.333333% 33.3333333% 33.3333333%;
		padding: 80px;
	}
	.grid3 > div {
		padding: 10px 10px 10px 10px;
	}
	.grid4 {
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		padding: 40px;
	}
	.grid4 > div {
		padding: 10px 10px 10px 10px;
	}
	.company .business_content {
		
	}
	.company .business_content > .category {
		background-color: #6f6f6f;
		color: white;
		font-size: 18px;
		font-weight: 600;
		padding: 10px 0px;
	}
	.company .business_content > div:not(.category) {
		padding: 10px 20px;
		background-color: white;
		min-height: 200px;
	}
	.company .business_content > div > p.title {
		font-size: 18px;
		font-weight: 600;
		padding: 20px 0px;
		line-height: 18px;
	}
	.company .business_content > div > p.body {
		text-align: left;
		color: var(--amo-text-color);
		line-height: 2em;
	}
	.company .business_content > img {
		width: 100%;
		height: 40%;
		object-fit: cover;
	}
	
	.company_data {
		color: black;
		text-align: center;
		padding: 80px 25%;
		background-color:rgba(255,255,255,0.8);
	}
	.company_data .title {
		font-weight: 400;
		letter-spacing: 0.3em;
	}
	.company_data .sub-title {
		padding: 10px 0;
	}
	.company_data .discription {
		font-size: 20px;
		padding: 20px 25%;
		line-height: 35px;
	}
	.company_data table {
		margin: 30px 0px 0px 0px;
		width: 100%;
		text-align: left;
	}
	.company_data table tr {
		border-bottom: 1px solid rgba(0, 0, 0, 0.5);
	}
	.company_data table tr:last-child {
		border: none;
	}
	.company_data table th {
		padding: 1.5em 1em 1.5em 1em;
		width: 5em;
	}
	.company_data table td {
		padding: 1.5em 1em 1.5em 1em;
	}
	
	.company_data table th {
		font-weight: 600; 
	}
	.company_data table p {
		padding: 2px 0px;
	}
	.company_data .members {
		padding: 80px 0%;
		display: grid;
		grid-template-columns: 33.33333% 33.33333% 33.33333%;
	}
	.company_data .member {
		padding: 20px 0px;
	}
	.company_data .member img {
		width: 150px;
		height: 150px;
		object-fit: cover;
		border-radius: 50%;
	}
	.company_data .member p.tag {
		padding: 10px 0px;
		letter-spacing: 0.1em;
		font-weight: 800;
	}
	.company_data .member p.name {
		padding: 0px;
		letter-spacing: 0.1em;
	}
	
	
	.contact {
		color: black;
		background-color: rgba(0, 0, 0, 0.1);
		text-align: center;
		padding: 80px;
	}
	.contact .title {
		font-weight: 400;
		letter-spacing: 0.3em;
	}
	.contact .grid50 {
		text-align: left;
		display: grid;
		grid-template-columns: 50% 50%;
		padding: 40px;
	}
	.contact .company-info {
		position: relative;
	}
	.contact .company-info img {
		width: 50px;
		height: 50px;
		object-fit: cover;
	}
	.contact .company-info .title {
		font-size: 25px;
		font-weight: 600;
		padding: 5px 0px;
	}
	.contact .company-info .add {
		font-size: 16px;
		font-weight: 500;
		padding: 5px 0px;
	}
	.contact .company-info .tel {
		font-size: 18px;
		font-weight: 500;
		padding: 5px 0px;
	}
	.contact .company-info .tel a {
		text-decoration: none;
		color: black;
	}
	.contact .company-info iframe {
		
	}
	
	
@media screen and (max-width: 720px) {
	#main-page {
		padding: 45px 0px 0px 0px;
	}
	.welcom {
		height: 60vh;
		background-size: cover;
		background-position: left 85% top 0%;
	}
	.welcom .box {
		width: calc(100% - 40px);
		padding: 60px 20px;
	}
	.h2 {
		font-size: 25px;
		line-height: 35px;
	}
	.h3 {
		font-size: 20px;
		line-height: 30px;
	}
	.h4 {
		font-size: 14px;
		line-height: 20px;
	}
	.content .title {
		font-size: 20px;
		line-height: 30px;
		padding-bottom: 10%;
	}
	.content .sub-title {
		font-size: 18px;
		line-height: 30px;
	}
	.about {
		padding-left: 0px;
	}
	.about .five {
		padding: 60px 0px;
	}
	.about .five p {
		padding-bottom: 10px;
	}
	.grid2 {
		display: grid;
		grid-template-columns: 100%;
	}
	.grid2 > div {
		padding: 0px;
	} 
	.grid2 > div:first-child {
		padding: 0px 30px 20px 30px;
		line-height: 25px;
	}
	.grid4 {
		display: grid;
		grid-template-columns: 50% 50%;
		padding: 5px;
	}
	.grid3 {
		display: grid;
		grid-template-columns: 100%;
		padding: 5px;
	}
	.about.content .sub-title {
		padding: 15px 30px;
	}
	.company .business_content {
		margin-bottom: 0px;
	}
	.company .business_content > .category {
		font-size: 13px;
	}
	.company .business_content > div:not(.category) {
		padding: 10px;
		background-color: white;
		min-height: 180px;
		padding: 10px 15px;
	}
	.company .business_content > div > p.title {
		font-size: 14px;
		line-height: 13px;
		padding: 15px 0px;
	}
	.company .business_content > div > p.body {
		font-size: 13px;
		line-height: 1.5em;
	}
	.company .business_content > img {
		height: 200px;
	}
	
	.company_data {
		padding: 80px 10px;
	}
	.company_data table {
		margin: 0;
		text-align: left;
	}
	.company_data table tr {
		font-size: 14px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	}
	.company_data table td ,
	.company_data table th {
		
	}
	.company_data table th {
		font-weight: 600;
	}
	.company_data table p {
		padding: 2px 0px;
	}
	
	
	.company_data .members {
		padding: 30px 0px 30px 0px;
		display: grid;
		grid-template-columns: 50% 50%;
	}
	.company_data .member {
		padding: 15px 0px;
	}
	.company_data .member img {
		width: 120px;
		height: 120px;
		object-fit: cover;
		border-radius: 50%;
	}
	.company_data .member p.tag {
		padding: 10px 0px;
		letter-spacing: 0.1em;
		font-weight: 800;
	}
	.company_data .member p.name {
		padding: 0px;
		letter-spacing: 0.1em;
	}
	
	
	.contact {
		padding: 80px 0px 40px 0px;
	}
	.contact .grid50 {
		display: grid;
		grid-template-columns: 100%;
		padding: 40px 20px;
	}
	.contact .company-info {
		padding-bottom: 20px;
	}
	.contact .company-info img {
		width: 50px;
	}
	.contact .company-info .title {
		font-size: 18px;
		font-weight: 600;
		padding: 5px 0px;
	}
	.contact .company-info .add {
		font-size: 16px;
		font-weight: 500;
		padding: 5px 0px;
	}
	.contact .company-info .tel {
		font-size: 16px;
		font-weight: 500;
		padding: 5px 0px;
	}
	
}