@charset "euc-jp";
/* CSS Document */

@media screen and (max-width:979px){
/* ----------------------
	for tablet
---------------------- */
body, td, th {
	font-size: 1.5rem;
}
.imgright {
	max-width: 50%;
}
.imgleft {
	max-width: 50%;
}
.button {
	width: 70%;
}
.button a {
	padding: 1.2em 1.5em;
}

/* ----------------------
	MAINMENU
---------------------- */

#logo {
	width: 55%;
	margin: 0 0 0.6em;
}
#logo p {
	font-size: 1.1rem;
}

#hdsubbox {
	width: 45%;
}

/* ----------------------
	font size
---------------------- */
.bg1 {
	background-size: 30% auto;
}
.contents, 
.contents td, 
.contents th {
	font-size: 1.5rem;
}
.contents h1::after, 
.contents h2::after {
	height: 4px;
}
.contents h3 {
	font-size: 2rem;
}

.pd5 {
	padding-right: 4%;
	padding-left: 4%;
}
.pd10 {
	padding-right: 8%;
	padding-left: 8%;
}
.pd15 {
	padding-right: 10%;
	padding-left: 10%;
}

.boxcontainer {
	margin: 0;
}

.forPC {
	display: ;
}
.forSP {
	display: none;
}
/* ----------------------
	FOOTER
---------------------- */

#footer {
	width: 100%;
}
#footer::before {
	width: 55%;
	height: 180px;
	top: -165px;
	right: 0;
}
#footer::after {
	width: 50%;
	height: 180px;
	top: -165px;
	left: 0;
}

#ft-l {
	width: 56%;
}
#ft-r {
	width: 42%;
}

.fs_xs { font-size: 1.2rem !important;}
.fs_s { font-size: 1.4rem !important;}
.fs_m { font-size: 1.6rem !important;}
.fs_l { font-size: 1.8rem !important;}
.fs_xl { font-size: 2.2rem !important;}
.fs_xxl { font-size: 2.8rem !important;}
.fs_xxxl { font-size: 3.2rem !important;}

}


@media screen and (max-width:799px){
#ft-l, #ft-r {
	float: none;
	width: 100%;
}
#ft-r {
	border-top: solid 1px #DDD;
	padding: 2em 0 0;
}
#ft-l li {
	min-width: 20%;
}
#footer::before {
	height: 150px;
	top: -130px;
}
#footer::after {
	height: 150px;
	top: -130px;
}
}

@media screen and (max-width:699px){
#btn_spmenu {
	width: 60px;
	height: 60px;
}
#btn_spmenu a {
	width: 60px;
	height: 60px;
}
#btn_spmenu a span, 
#btn_spmenu a span::before, 
#btn_spmenu a span::after {
	width: 24px;
}
#btn_spmenu a span::before {
	bottom: 8px;
}
#btn_spmenu a span::after {
	top: 8px;
}

section.seclast {
	padding-bottom: 140px;
}

#voice .box2 {
	width: 100%;
}
}

@media screen and (max-width:639px){
.pcbr:after {
	content:"";
	white-space: normal;
}
.spbr:after {
	content:"\A";
	white-space: pre;
}

/* ----------------------
	for smartphone
---------------------- */
.imgright {
	max-width: 40%;
}
.imgleft {
	max-width: 40%;
}
.imageStyleL {
	width: 100%;
	height: auto;
}
.forPC {
	display: none;
}
.forSP {
	display: block;
}

/* ------------------------------------------
	BUTTON SETTING
------------------------------------------ */
.button {
	width: 80%;
}
.buttonS {
	width: 49%;
	min-width: 200px;
}
.button a {
	font-size: 1.5rem;
	padding: 1.2em 1.8em;
}
.buttonS a {
	font-size: 1.3rem;
	padding: 1em 1.8em;
}

/* ----------------------
	MAINMENU
---------------------- */
#hdr {
	background-size: 50%;
	background-position: left -30% top 0, right -30% top 0;
}
#logo {
	width: 65%;
	max-width: 360px;
	margin: 0 auto 10px;
	padding: 10px 0 0;
	float: none;
}
#hdsubbox {
	display: none;
}
#hdr #menu {
	display: none;
}

nav:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}


/* ----------------------
	SPMENU BUTTON
---------------------- */
#slidemenu_list li{
	font-size: 1.4rem;
}
/* ----------------------
	BREADCRUMB
---------------------- */
#bread {
	font-size: 1.2rem;
}

/* ----------------------
	CONTENTS
---------------------- */
.bg1::before {
	height: 6px;
	background-size: auto 6px;
}
.bg7::before {
	width: 3%;
	background-size: 36px auto;
}
.contents, 
.contents td, 
.contents th {
	font-size: 1.5rem;
}
section {
	padding: 1em 1em 3em;
}
.contents h1 {
	font-size: 2rem;
}
.contents h2 {
	font-size: 1.8rem;
}
.contents h1::after, 
.contents h2::after {
	height: 4px;
	width: 20%;
	left: 40%;
}

.pd5 {
	padding-right: 1em;
	padding-left: 1em;
}
.pd10 {
	padding-right: 1em;
	padding-left: 1em;
}
.pd15 {
	padding-right: 5%;
	padding-left: 5%;
}

.imgbutton img {
	width: 80%;
}

/* ----------------------
	BOX
---------------------- */
.box2 {
	width: 100%;
}
.box4 {
	width: 49.5%;
}
.ltbox, 
.rtbox {
	width: 100%;
	float: none;
}

/* ----------------------
	googlemap
---------------------- */
.map {
	margin: 0 1em 1em;
}
.map iframe {
	height: 300px;
}

/* ----------------------
	FAQ
---------------------- */
.faq-container .faset .Q, 
.faq-container .faset .A {
	padding-left: 40px;
	background-size: 30px auto;
	min-height: 35px;
}

/* ----------------------
	FOOTER
---------------------- */
a#pageTop {
	width: 30px;
	line-height: 30px;
	font-size: 16px;
}
#footer::before {
	height: 120px;
	top: -110px;
}
#footer::after {
	height: 120px;
	top: -110px;
}
#footer a.fttel {
	display: inline-block;
	padding: 0.4em 0.5em;
	border: solid 1px #FFF;
	border-radius: 4px;
	color: #FFF;
	font-weight: bold;
}

#footer address {
	text-align: center;
}
#copy {
	margin: 2em 0 50px;
}

.fs_xs {font-size: 1.2rem !important;}
.fs_s {font-size: 1.4rem !important;}
.fs_m {font-size: 1.5rem !important;}
.fs_l {font-size: 1.6rem !important;}
.fs_xl {font-size: 1.8rem !important;}
.fs_xxl {font-size: 2.4rem !important;}
.fs_xxxl {font-size: 3rem !important;}
}


@media screen and (max-width:499px){
.imgright, 
.imgleft {
	max-width: 100%;
	float: none;
	padding: 0;
}
section {
	padding: 1em 10px;
}
#voice .box .inner::before {
	width: 80%;
	height: 140px;
	bottom: -20px;
	right: -20px;
}
#footer::before {
	height: 105px;
	top: -95px;
}
#footer::after {
	height: 105px;
	top: -95px;
}
#ft-l li {
	font-size: 1.4rem;
}
}

@media screen and (max-width:399px){
#footer::before {
	height: 90px;
	top: -85px;
}
#footer::after {
	height: 90px;
	top: -85px;
}
}