@charset "utf-8";
/* ===================================
GRAPHIC WALL
Others Style Sheet
First Update  2017-08-18
Last Update   2020-07-15
Creat by Basic Plus Design Inc.
=================================== */

/* ===========================================================
 ABOUT page
=========================================================== */

#about h1.title {
	background-image: url(../images/others/title_about.png);
	margin-bottom: 5em;
}

#about.main h2 {
	font-size: 1em;
	font-weight: bolder;
	padding: 1em 0 2em 0;
	border-top: 2px solid #393b39;
}

#about.main .content {
	padding: 3em 2em
}

#about.main .content>div {
	padding-bottom: 5em;
}

.greeting figcaption {
	margin-top: 1em;
}

.greeting p {
	margin-bottom: 1em;
}

.outline .tbl-base th {
	background-color: #efefef;
	width: 10em;
}

.outline .tbl-base td {
	background-color: #fff;
}

.outline .tbl-base tr:first-child {
	border-top: 1px dotted #393b39;
}

.history .tbl-base th {
	width: 10em;
}

.history .tbl-base td {
	background-color: #fff;
}

.history .tbl-base tr:first-child {
	border-top: 1px dotted #393b39;
}

.license li {
	display: inline-block;
	width: 100%;
	padding: 0.5em 0;
	border-bottom: 1px dotted #393b39;
}

.license li:first-child {
	border-top: 1px dotted #393b39;
}

/* -----------------------------------------------------------
	 ABOUT page MediaQuery
----------------------------------------------------------- */
@media screen and (max-width: 640px) {
	.outline .tbl-base th {
		text-align: left;
		padding: 0.2em 0.5em;
		margin-top: 0.5em;
	}

	.history .tbl-base th {
		text-align: left;
		padding: 0.5em 0 0 0;
	}

	.history .tbl-base td {
		padding: 0 0 0.5em 0;
	}

	.license li {
		padding: 0.5em 0;
	}
}

@media screen and (min-width: 769px) {
	.greeting p {
		margin-right: 3em;
		margin-bottom: 1em;
		margin-top: 0;
		line-height: 2;
	}

	.greeting figcaption {
		text-align: right;
	}

	.outline .tbl-base tr:first-child {
		border-top: 1px dotted #393b39;
	}

	.outline .tbl-base th {
		text-align: center;
	}

	.history .tbl-base tr:first-child {
		border-top: 1px dotted #393b39;
	}

	.history .tbl-base th {
		text-align: center;
	}

	.license li {
		width: 49%;
	}

	.license li:nth-child(2n) {
		margin-left: 1%;
	}

	.license li:nth-of-type(2) {
		border-top: 1px dotted #393b39;
	}

}

@media screen and (min-width: 1000px) {
	#about.main .content {
		padding: 10em 0;
	}
}

/* ===========================================================
 faq.html
=========================================================== */
#faq.main .content {
	padding: 3em 2em
}

#faq #title-part {
	background-image: url(../images/others/faq_title_bg.jpg);
}

#faq #title-part p {
	background-image: url(../images/others/faq_title.png);
	background-position: center top 30%;
	max-width: 70px;
	color: #FFF
}

#faq #title-part h1 {
	color: #FFF;
}

#faq .page-nav {
	margin-bottom: 5em;
}

#faq .page-nav li {
	border-bottom: 1px dotted #393b39;
	padding: 0.5em 0;
}

#faq .page-nav li:first-child {
	border-top: 1px dotted #393b39;
}

#faq.main h2 {
	padding-bottom: 1em;
	font-weight: 900;
	font-size: 12rem;
	font-size: 1.2em;
	font-family: "Noto Sans Japanese";
}

.panel {
	border-bottom: 1px dotted #393b39;
	margin-top: 3em;
	margin-bottom: 5em;
}

.panel>dt {
	font-weight: bold;
	cursor: pointer;
	border-top: 1px dotted #393b39;
	padding: 1em 0;
	font-size: 11rem;
	font-size: 1.1em;
	font-family: "Noto Sans Japanese";
	padding: 1.5em 0 2em 4em;
	position: relative;
}

.panel>dt:before {
	content: "Q";
	color: #393b39;
	font-family: 'Bevan', cursive;
	font-size: 25rem;
	font-size: 2.5em;
	display: block;
	position: absolute;
	top: 7px;
	left: 0;
}

.panel>dd {
	padding: 0em 0 1.5em 4em;
	position: relative;
}

.panel>dd:before {
	content: "A";
	color: #db533b;
	font-family: 'Bevan', cursive;
	font-size: 25rem;
	font-size: 2.5em;
	display: block;
	line-height: 1;
	position: absolute;
	top: 0;
	left: 0;
}

.panel>dd p {
	line-height: 1.6;
}

#faq .question {
	font-size: 11rem;
	font-size: 1.1em;
	padding: 1em 0 1em 50px;
	position: relative;
}

#faq .question:before {
	content: "Q";
	color: #393b39;
	font-family: 'Bevan', cursive;
	font-size: 25rem;
	font-size: 2.5em;
	display: block;
	position: absolute;
	top: 0px;
	left: 0;
}

#faq .answer {
	padding: 0.5em 0 0 50px;
	position: relative;
}

#faq .answer:before {
	content: "A";
	color: #db533b;
	font-family: 'Bevan', cursive;
	font-size: 25rem;
	font-size: 2.5em;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

#faq .sort {
	font-family: 'Catamaran', sans-serif;
	background-color: #ebebeb;
	padding: 0 0.5em;
}

#faq.main dl a,
#faq.main .page-nav a {
	color: #393b39;
}

#faq.main dl a:hover,
#faq.main .page-nav a:hover {
	opacity: 0.5;
	transition: 0.3s;
}

#faq dl.panel a {
	border-bottom: 1px dashed #CCC;
	padding-bottom: 2px;
}

/* -----------------------------------------------------------
	 faq.html MediaQuery
----------------------------------------------------------- */
@media screen and (min-width: 769px) {
	#faq.main .content {
		padding: 5em 0;
	}

	#faq #title-part p {
		background-position: center top 40%;
	}

	#faq #title-part h1 {
		top: 55%;
	}

	#faq .page-nav li {
		margin-right: 3em;
	}

	#faq .panel {
		margin-top: 10em;
	}
}
@media screen and (min-width: 1000px) {
	#faq.main {
		padding-top: 8px;
	}
}

/* ===========================================================
 NEWS page
=========================================================== */

#news h1.title {
	background-image: url(../images/others/title_news.png);
	margin-bottom: 5em;
}

#news.main .content {
	padding: 3em 2em
}

#news.main .lead {
	text-align: center;
	margin-bottom: 3em;
}

#news dl {
	text-align: left;
	border-top: 1px solid #393b39;
}

#news dt {
	margin-top: 1em;
}

#news dd {
	border-bottom: 1px solid #393b39;
	padding-bottom: 1.5em;
}

#news dd.sort {
	display: inline-block;
	margin-right: 1em;
	float: left;
	border-bottom: 0;
}

#news dt+dd {
	font-weight: bolder;
}

#news .time {
	font-weight: bolder;
	font-family: 'Catamaran', sans-serif;
	font-size: 11rem;
	font-size: 1.1em;
}

#news .lead.time {
	font-size: 13rem;
	font-size: 1.3em;
}

#news .sort {
	font-family: 'Catamaran', sans-serif;
	background-color: #ebebeb;
	padding: 0 0.5em;
}

#news .article .sort {
	display: inline-block;
	margin-bottom: 1em;
}

#news.main dl a,
#news.main .article a {
	color: #393b39;
	border-bottom: 1px dashed #CCC;
	padding-bottom: 2px;
}

#news.main dl a:hover,
#news.main .article a:hover {
	opacity: 0.5;
	transition: 0.3s;
}

/* -----------------------------------------------------------
	 NEWS page MediaQuery
----------------------------------------------------------- */

@media screen and (min-width: 1000px) {
	#news.main .content {
		padding: 10em 0;
	}
}

/* ===========================================================
 CONTACT page
=========================================================== */
#contact h1.title {
	background-image: url(../images/others/title_contact.png);
	margin-bottom: 5em;
}

#contact.main .content {
	padding: 3em 2em
}

#contact.main .lead {
	text-align: center;
	margin-bottom: 3em;
}

#contact.main .link_line {
	max-width: 570px;
	margin: 40px auto;
}

#contact.main .link_line:hover img {
	opacity: 0.8;
}

#contact.main h2 {
	background-repeat: no-repeat;
	/*background-position:left center;*/
	background-size: 40px;
	height: 40px;
	line-height: 40px;
	padding-bottom: 70px;
	/*padding-left:35px;
	display:inline-block;*/
	font-weight: bold;
	background-position: bottom center;
	/*background-size:60px;
		padding-left:0;
		padding-bottom:90px;
		display: inherit;*/
	margin: 0 auto;
	text-align: center;
	font-size: 12rem;
	font-size: 1.2em;
}

#contact.main .tel h2 {
	background-image: url(../images/others/ico_tel.png);
	width: 100%;
	margin: 1em 0 20px 0;
}

#contact.main .mail h2 {
	background-image: url(../images/others/ico_mail.png);
	margin-top: 1em;
	width: 100%;
	margin: 1em 0 15px 0;
}

#contact.main .form h2 {
	background-image: url(../images/others/ico_form.png);
	margin-top: 1em;
}

#contact .tel_wrapper {
	border-top: 1px solid #393b39;
}

#contact .tel {
	text-align: center;
	margin-bottom: 1em;
}

/*#contact .tel p{ margin-left:35px;}*/
#contact .tel a {
	background: url(../images/others/number_tel.png) no-repeat top center;
	background-size: contain;
	/*width:55%;*/
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	/*display:inline-block;
			background-size:contain;*/
	width: 100%;
	height: 45px;
	margin: 0 auto;
	display: block;
}

#contact .mail {
	text-align: center;
	border-top: 1px solid #393b39;
}

#contact .mail a {
	font-family: 'Catamaran', sans-serif;
	font-family: 'Fjalla One', sans-serif;
	font-weight: bolder;
	font-size: 30rem;
	font-size: 3.0em;
	color: #393b39;
}

#contact .mail a:hover {
	opacity: 0.5;
	transition: 0.3s;
}

#contact .mail p {
	font-size: 9rem;
	font-size: 0.9em;
}

#contact .form {
	border-top: 1px solid #393b39;
	margin-top: 1em;
	text-align: center;
}

#contact.main .form h2 {
	margin: 2em auto;
}

#contact #mailformpro label {
	display: block;
}

#contact #mailformpro label input {
	margin-left: 0.5em
}

#contact #mailformpro label input[type="radio"] {
	margin-left: 0;
	margin-right: 0.5em
}

#contact #mailformpro dd a {
	color: #64c1bf;
}

#contact #mailformpro dd a:hover {
	opacity: 0.5;
	transition: 0.3s;
}

#contact #mailformpro dd li:first-child span {
	margin-right: 0.1em;
}

#contact #mailformpro dd li:first-child select {
	margin-top: 3px
}

#contact #mailformpro dd li span {
	margin-right: 0.5em;
}

#contact #mailformpro li {
	margin-bottom: 0.5em;
}

#contact #mailformpro select {
	padding: 4px 0;
}

#contact #mailformpro .mail_again {
	margin-top: 0.5em;
}

#contact #mailformpro textarea {
	width: 100% !important;
}

#contact .contact_button {
	width: 100%;
	text-align: center;
}

/*  mailformpro.css 上書き用（index.html）---------------------------------------*/
.mfp_element_text,
.mfp_element_number,
.mfp_element_select-one,
.mfp_element_email,
.mfp_element_tel,
.mfp_element_textarea,
.mfp_element_date,
.mfp_element_password {
	border: solid 1px #CCC;
	border-radius: 0px !important;
	box-shadow: none !important;
	padding: 3px 8px;
	margin: 2px;
	vertical-align: middle;
}

form#mailformpro label.mfp_checked {
	border: solid 0px #CCC !important;
	box-shadow: none !important;
}

form#mailformpro label.mfp_not_checked {
	border: solid 0px #EEE !important;
}

form#mailformpro dl dt {
	border-top: solid 1px #CCC !important;
	text-align: left !important;
}

form#mailformpro dl dd {
	border-top: solid 0px #CCC !important;
	padding: 0 0 1em 0px !important;
}

.must {
	display: inline-block !important;
	background-color: #FFF !important;
	border: none !important;
	text-shadow: none !important;
	padding: 2px 5px;
	font-size: inherit !important;
	color: #db533b !important;
	float: none !important;
	margin: 0px 5px;
	border-radius: 0 !important;
	box-shadow: 0px 0px 0px #CCC !important;
	background-image: none !important;
	background-size: 100% 100%;
}

.mfp_element_submit,
.mfp_element_reset

/*,.mfp_element_button,button.mfp_next,button.mfp_prev */
	{
	border-radius: 0px !important;
	padding: 1em 0 !important;
	border: 0 !important;
	background: none !important;
	text-shadow: none !important;
	font-size: 14px !important;
	cursor: pointer;
	outline: none;
}

.mfp_element_reset {
	border: 1px solid #393b39 !important;
	background-color: #FFF !important;
	color: #393b39 !important;
	width: 48%;
	margin-right: 2%
}

.mfp_element_submit {
	background-color: #393b39 !important;
	color: #FFF !important;
	width: 48%;
}

/*  mailformpro.css 上書き用（thanks.html）---------------------------------------*/
div#mfp_thanks {
	text-align: left !important;
}

div.mfp_thanks {
	padding: 0px !important;
}

div#mfp_thanks strong {
	color: #db533b !important;
}

/* -----------------------------------------------------------
	 CONTACT page MediaQuery
----------------------------------------------------------- */

@media screen and (min-width: 769px) {
	#contact.main h2 {
		background-position: bottom center;
		background-size: 60px;
		padding-left: 0;
		padding-bottom: 90px;
		display: inherit;
		margin: 0 auto;
		text-align: center;
		font-size: 12rem;
		font-size: 1.2em;
	}

	#contact.main .mail h2 {
		position: relative;
	}

	#contact.main .mail h2:after {
		content: "";
		background: url(../images/others/24h_orange.png) no-repeat top right;
		background-size: contain;
		display: block;
		width: 100px;
		height: 100px;
		position: absolute;
		top: 0;
		right: 15%;
	}

	#contact .tel_wrapper {
		padding-top: 1em;
	}

	#contact .tel {
		text-align: center;
		border-right: 1px solid #393b39;
		margin-bottom: 0;
	}

	#contact .tel a {
		background-size: contain;
		width: 80%;
		height: 55px;
		margin: 0 auto;
		display: block;
	}

	#contact .tel p {
		margin: 1em 0 2em 0;
	}

	#contact .mail {
		border-top: 0px;
	}

	#contact .mail p {
		margin: 0em 0 2em 0;
	}

	#contact .form {
		border-top: 1px solid #393b39;
		margin-top: 1em;
		text-align: center;
	}

	#contact.main .form h2 {
		position: relative;
	}

	#contact.main .form h2:after {
		content: "";
		background: url(../images/others/24h_blue.png) no-repeat top right;
		background-size: contain;
		display: block;
		width: 100px;
		height: 100px;
		position: absolute;
		top: 0;
		right: 25%;
	}

	#contact .form form {
		text-align: left;
	}

	#contact #mailformpro label {
		display: inline-block;
	}

	#contact #mailformpro .form_inner {
		border: 2em solid #F1F1F1;
		padding: 2em;
		margin-bottom: 2em
	}

	#contact #mailformpro dl dt {
		border-top: solid 1px #393b39 !important;
		float: left !important;
		width: 170px !important;
		clear: both !important;
		font-size: 12px !important;
		padding: 10px 0px !important;
		margin: 0px !important;
	}

	#contact #mailformpro dl dt:nth-of-type(1) {
		border-top: 0px !important;
	}

	#contact #mailformpro dl dd {
		border-top: solid 1px #393b39 !important;
		margin: 0px !important;
		padding: 10px 5px 1em 180px !important;
		font-size: 12px !important;
		line-height: 1.5em !important;
	}

	#contact #mailformpro dl dd:nth-of-type(1) {
		border-top: 0px !important;
	}

	#contact #mailformpro dl.yourName dd:last-child {
		border-bottom: solid 1px #393b39 !important;
	}

	#contact #mailformpro dl#yourAddres {
		border-bottom: solid 1px #393b39 !important;
	}

	.mfp_element_reset {
		width: 30% !important;
		margin-right: 3% !important
	}

	.mfp_element_submit {
		width: 30% !important;
	}

	div#mfp_thanks {
		text-align: left !important;
	}

	div.mfp_thanks {
		padding: 0px !important;
	}
}


@media screen and (min-width: 1000px) {
	#contact.main .content {
		padding: 10em 0;
	}
}

/* ===========================================================
 LINK page
=========================================================== */

#link h1.title {
	background-image: url(../images/others/title_link.png);
	margin-bottom: 5em;
}

#link.main .content {
	padding: 3em 2em
}

#link dl {
	text-align: left;
	border-top: 1px solid #393b39;
}

#link dt {
	float: left;
	padding: 2em 0;
	text-align: center;
	width: 100%;
	clear: left;
}

#link dt img {
	max-width: 260px;
}

#link dd {
	border-bottom: 1px solid #393b39;
	padding: 2em 0;
	text-align: center;
}

#link span.company_name {
	display: block;
	font-size: 14rem;
	font-size: 1.4em;
	color: #231815;
	font-weight: bolder;
	margin: 0.3em 0;
}

#link .hot {
	color: #db533b;
	font-weight: bolder;
	font-size: 11rem;
	font-size: 1.1em;
}

#link .hot img {
	max-width: 100px;
	margin-left: 0.5em
}


#link a.ico_arrow {
	font-family: 'Catamaran', sans-serif;
	color: #393b39;
	font-size: 12rem;
	font-size: 1.2em;
	padding-right: 2em;
	background: url(../images/ico_arrow.png) center right no-repeat;
}

#link a:hover {
	opacity: 0.7;
	transition: 0.3s;
}

/* -----------------------------------------------------------
	 LINK page MediaQuery
----------------------------------------------------------- */

@media screen and (min-width: 769px) {

	#link dt {
		float: left;
		padding: 3em 0;
		width: 50%;
		clear: left;
		min-height: 180px;
		vertical-align: middle;
	}

	#link dt.tbt {
		padding: 3em 0;
	}

	#link dt.gd {
		padding: 6em 0;
	}

	#link dt.st {
		padding: 7em 0;
	}

	#link dd {
		padding: 3em 0 3em 50%;
		min-height: 180px;
		text-align: left;
	}

	#link span.company_name {
		margin: 1em 0;
	}
}


@media screen and (min-width: 1000px) {
	#link.main .content {
		padding: 10em 0;
	}
}

/* ===========================================================
 PRIVACY POLICY page
=========================================================== */

#privacy h1.title {
	background-image: url(../images/others/title_privacy.png);
	margin-bottom: 5em;
}

#privacy.main .content {
	padding: 3em 2em
}

#privacy.main .lead {
	text-align: center;
	margin-bottom: 3em;
}


#privacy dl {
	text-align: left;
	border-top: 1px solid #393b39;
}

#privacy dt {
	padding: 1em 0;
	width: 100%;
	font-size: 10rem;
	font-size: 1.0em;
	font-weight: bolder;
}

#privacy dd {
	border-bottom: 1px solid #393b39;
	padding-bottom: 1em;
	min-height: 7em;
}

/* -----------------------------------------------------------
	 PRIVACY POLICY page MediaQuery
----------------------------------------------------------- */

@media screen and (min-width: 1000px) {
	#privacy.main .content {
		padding: 10em 0;
	}
}

/* ===========================================================
 SITE MAP page
=========================================================== */

#sitemap h1.title {
	background-image: url(../images/others/title_sitemap.png);
	margin-bottom: 5em;
}

#sitemap.main .content {
	padding: 3em 2em
}

#sitemap.main li {
	padding: 0.5em 0;
	text-align: center;
}

#sitemap.main li:nth-of-type(10) {
	margin-bottom: 3em;
}

#sitemap a {
	color: #393b39;
}

#sitemap a:hover {
	opacity: 0.7;
	transition: 0.3s;
}

/* -----------------------------------------------------------
	 SITE MAP page MediaQuery
----------------------------------------------------------- */

@media screen and (min-width: 1000px) {
	#sitemap.main .content {
		padding: 10em 0;
	}
}

/* ===========================================================
 ERROR page
=========================================================== */

@media screen and (min-width: 1000px) {
	#error.main .content {
		padding: 10em 0;
	}
}