@charset "UTF-8";

#blockimg480 { display: none; }


/* CSS Document */

/* ************************************************** */
/* PC  Display */
/* ************************************************** */

@media screen and (max-width:1200px) {


}


/* ************************************************** */
/*  Mobile  Display  MAX-WIDTH 960px */
/* ************************************************** */
@media only screen and (max-width:980px){

/* ------- common block rayout ------ */
.wrpper-main {	width: 90%;margin: 0 5%; }

#logoBlock { width: 100%;height: 40px; }

#logo_mobile { display: block; }

h1#logo_mobile {
	display: block;
	width: 100%;
	top: 30px;
	position: fixed;
	text-align: center;
}

#headerArea { width: 100%; }

#nav { display: none; }

.main_img { height: 450px;background-size: cover; }
.main_img h1 { font-size: 28px;letter-spacing: 0; }
.main_img h1 span { font-size: 36px; }

/* ----- CONTACT BARNNER Rayout ----- */
	
#banner_block,
#banner_block .button {	height: 300px; }
#banner_block .button h3.en { padding: 75px 0 0; }

/* ----- Footer Rayout ----- */
#footer { padding: 0; }

#footer_grid { height: initial;width: 50%; }
#footer_grid.navigation { width: 48%;margin: 20px 0 0 2%; }
#footer_grid.navigation ul { width: 100%; }
#footer_grid.navigation ul li {	width: 20%;margin: 0 1% 0 0; }
#footer_grid.flo_right { float: left; }

#footer_grid .corporation {	width: 100%;margin: 20px 0;padding: 0; }
#footer_grid .corporation .block .shop { width: 100%;margin: 0; }


}


/* ************************************************** */
/* iPad Tate */
/* ************************************************** */
@media only screen and (max-width:800px){

/* ------ Header Barnner ----*/
.head .banner { width: 70px;height: 40px; }

.head .banner a {
	background-image: url("../images/common/ico_map.png");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 30px;
	padding-top: 30px;
	font-size: 6px;
	line-height: 10px;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-weight: bold;
}

.head .banner a:hover { background-image: url("../images/common/ico_map_w.png"); }
.head .banner a.contact { background-image: url("../images/common/ico_contact.png"); }
.head .banner a.contact:hover { background-image: url("../images/common/ico_contact_n.png"); }

}

/* ************************************************** */
/*  Footer  RAYOUT  */
/* ************************************************** */

@media screen and (max-width:740px) {

.main_img h1 { margin: 250px 0 0; }

.contents .banner .callsystem { text-align: center; }
.contents .banner .callsystem br { display: block; }
.contents .banner .callsystem span { width: 100%; }

.single_common .bottom_bar .button_red,
.bottom_bar .button_red { width: 80%;margin: 0 10%; }

.single_common .bottom_bar .button_red a,
.bottom_bar .button_red a { font-size: 20px; }

.footer { margin: 0; }
.footer .logo { width: 100%;text-align: center; }
.footer .address { width: 100%;margin: 10px 0; text-align: center; }
.footer .navi {	width: 100%; }
.footer .navi ul { width: 90%;margin: 10px 5%; }
.footer .footer_end .copyright { width: 100%;margin: 0;text-align: center; }

}

/* ************************************************** */
/*  Mobile  Display  iPhone5 640px */
/* ************************************************** */

@media screen and (max-width:640px) {

.logo { width: 270px;background-position: right; }
.logo img { width: 230px;margin: 30px 0 0 0; }

.main_img { height: 350px; }
.main_img h1 { margin: 180px 0 0;font-size: 22px;letter-spacing: 1px;line-height: 30px; }

.main_img h1 span {	font-size: 18px; }

.intro h2.jp {
	width: 90%;
	margin: 50px 5%;
	font-size: 20px;
	line-height: 30px;
}

.message h2 {
	width: 90%;
	margin: 30px 5%;
	font-size: 16px;
}

.contents .subtitle h2 { font-size: 20px; }

/* ----- Footer Rayout ----- */
#footer_grid { width: 100%; }
#footer_grid.navigation { width: 380px;margin: 20px auto;float: none; }
#footer_grid.navigation ul { width: 100%; }
#footer_grid.navigation ul li {	width: 90px;margin: 0 5px 0 0; }

#footer_grid .corporation .logo-foot { width: 245px;margin: 0 auto; }
#footer_grid .corporation .block { width: 100%;margin: 0 0 10px; }
#footer_grid .corporation .block .shop,
#footer_grid .corporation .block .adress,
#footer_grid .corporation .block .tel_no { width: 100%; text-align: center; }


}

/* ************************************************** */
/* Smart-Phone Tate(Portrayte) */
/* ************************************************** */
@media only screen and (max-width:580px){

#content h1 { background-position: right;width: 100%;padding: 20px 0 0; }

#viewdetail ul{ width: 80%; }
#viewdetail li{ width:100%; }

#banner_block,
#banner_block .button {	height: 250px; }

#banner_block .button h3.en {
	font-size: 40px;
	padding: 70px 0 0;
	line-height: 40px;
}

#banner_block .button h3 {
	font-size: 24px;
	margin: 20px auto 0;
}

.footer .navi ul li {
	width: 90%;
	margin: 0 5% 5px;
	text-align: center;
}

.footer_end .navi .sns {
	width: 100%;
	margin: 10px 0;
	padding: 0;
	float: left;
	display: flex;
	text-align: center;
}

.footer_end .navi .sns .box {
	width: auto;
	margin: auto;
}

}

/* ************************************************** */
/* Smart-Phone Tate(Portrayte) */
/* ************************************************** */
@media only screen and (max-width:480px){

#logo {	width: 60%;top:35px;left: 20%; }

.contents .subtitle {
	height: auto;
}

.contents .subtitle h2 {
	font-size: 18px;
	line-height: 25px;
	margin: 0;
	padding: 15px 0 15px 60px;
	background-image: url("../images/common/ico_title.png");
	background-position: left 5px center;
	background-repeat: no-repeat;
	border: none;
}

/* ----- Footer Rayout ----- */
#footer_grid { width: 100%; }
#footer_grid.navigation { width: 100%;margin: 20px 0; }
#footer_grid.navigation ul { width: 98%;padding: 0 1%; }
#footer_grid.navigation ul li {	width: 23%;margin: 0 1%; }


}