@charset "utf-8";

/* =======================================

	CommonElements

======================================= */

* {
	margin: 0;
	padding: 0;
}
*::after,
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-right: auto;
	margin-left: auto;
}

html, body, div, span, applet, object, iframe,
footer,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
/*	outline: 0;*/
}

html {
	font-size: 75%;
	-webkit-text-size-adjust: none;
}

img {
	vertical-align: text-bottom;
	-ms-interpolation-mode: bicubic;
}

a {
	-webkit-tap-highlight-color: transparent;
}

strong {
	font-weight: bold;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: collapse;
/*	border-collapse: separate;*/
	border-spacing: 0;
}

caption, th, td {
	font-weight: normal;
	text-align: left;
	vertical-align: top;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

option {
	padding-right: 10px;
}

/* ------------------------------
	HTML5 ELEMENTS
------------------------------ */
header,article,aside,section,footer,
nav,menu,details,hgroup,summary {
	display: block;
}


body {
	font-size: 100%;
	line-height: 140%;
	font-family: Arial,Helvetica,sans-serif;
	color: #000;
	text-align: center;
}

a:link { text-decoration:none; color: #000;}
a:visited { text-decoration:none; color: #000;}
a:active { text-decoration:none; color: #000;}
a:hover { text-decoration:none; color: #000;}

.clear{
	clear: both;
}


/*******************************
ヘッダー
*******************************/

header{
	width: 100%;
	text-align: center;
	float: left;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	position: relative;	
}


#logo_pc {
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	float: left;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 0;
}


/* ------------------------------
   #menuList
------------------------------ */
#menuList {
	width: 100%;
	height: 34px;
	position: relative;
	z-index: 10;
	background: #ffa500;
}

#menuList ul {
	margin: 0 auto;
	width: 800px;
	height: 34px;
	text-align: left;
}

#menuList ul li {
	width: 160px;
	height: 34px;
	float: left;
	box-sizing: border-box;
	font-size: 15px;
}

#menuList ul li:last-child {
	border-right: #aaa 0px solid;
}

#menuList ul li a {
	height: 34px;
	line-height: 35px;
	display: block;
	text-align: center;
	transition: all 0.2s linear;
	color: #FFF;
}

#menuList ul li:hover > a {
	background-color: #f9c474;
}


@media only screen and (max-width: 800px) {
	#menuList ul {
		width: 100%;
	}

	#menuList ul li {
		width: 20%;
	}
}


/*******************************
コンテンツ
*******************************/

.container{
	width: 800px;
	margin-right: auto;
	margin-left: auto;
}

#base_about1{
	background-color: #fff4e1;
	float: left;
	width: 100%;
	margin-top: 30px;
}

#base_about2{
	background-color: #ffe4b3;
	float: left;
	width: 100%;
}

#base_about3{
	background-color: #fffdf9;
	float: left;
	width: 100%;
}

#blog {
	float: right;
	margin-bottom: 30px;
}

.photo {
	float: right;
}

.about_box{
	float: left;
	width: 100%;
	margin-bottom: 55px;
}

.menu_box{
	float: left;
	width: 100%;
	margin-bottom: 25px;
}

.txtbox1{
	float: left;
}

.txtbox1 h2{
	padding-bottom: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000;
	margin-bottom: 20px;
	font-size: 15px;
}

.about_box h3{
	padding-bottom: 15px;
	margin-bottom: 5px;
	font-size: 15px;
}

.menu_box h3{
	margin-bottom: 5px;
}

.contents {
	width: 800px;
	text-align: left;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	padding-top: 30px;
	padding-right: 0;
	padding-left: 0;
}

.contents p {
	font-size: 1em;
	line-height: 2em;
}

.sv{
	width: 100%;
	float: left;
	margin-top: 10px;
}

.sv li{
	width: 100%;
	float: left;
	margin-bottom: 20px;
}

.sv .step{
	font-size: 12px;
	width: 330px;
	float: left;
	background-image: url(../images/icon_arrow.png);
	padding-bottom: 40px;
	background-repeat: no-repeat;
	background-position: 30px bottom;
}

.sv .last{
	background-image: none;
}

.sv .step strong{
	font-weight: normal;
	font-size: 14px;	
}
.sv .sv_txt{
	float: left;
	width: 470px;
}

@media only screen and (max-width: 800px) {
.sv .step{
	width: 100%;
	background-image: none;
	margin: 0px;
	padding: 0px;
}
	
.sv .sv_txt{
	width: 100%;
	background-image: url(../images/icon_arrow.png);
	padding-bottom: 30px;
	background-repeat: no-repeat;
	background-position: 30px bottom;
}
	
	}


/*******************************
メイン画像
*******************************/
#mainImage{
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	height: auto;
	margin-bottom: 15px;
	background-size:contain;
	 background-size:cover;
	 background-size:100%;
}

#mainhead{
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	height: auto;
	margin-bottom: 15px;
	background-size: contain;
	background-size: cover;
	background-size: 100%;
	margin-top: 5px;
}

@media only screen and (max-width: 959px) {
#mainImage,#mainhead{
	width: 100%;
	height: auto;
}

.container{
	width: 100%;
	height: auto;
}


#mainImage img,#mainhead img{
	width: 100%;
	height: auto;	
}

}


/*******************************
/* フッター
*******************************/

#page-top{
   text-indent:-9999px;	
   width:46px;
   height:46px;	
   position:fixed;
   right:16px;
   bottom:20px;
	margin: 0;
	padding: 0;
	text-align: center;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	background-image: url(../images/icon_up.png);
	background-repeat: no-repeat;
	background-position: right bottom;
}
 
#page-top a{
	margin: 0;
	padding: 0;
	text-align: center;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;

}
 
#page-top p:hover{
   width:46px;
   height:46px;	
	background-image: url(../images/icon_up_on.png);
	background-repeat: no-repeat;
	background-position: right bottom;
}
 
#move-page-top{
   color:#fff;
   line-height:50px;
   text-decoration:none;
   display:block;
   cursor:pointer;
}

footer{
	text-align: center;
	float: left;
	padding-top: 55px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 0;
	width: 100%;
	background-color: #ffedcc;
}

footer #address{
	float: left;
	width: 389px;
}

footer #address .infotxt{
	float: left;
	margin-top: 10px;
}

footer #address .mail_button{
	float: left;
	margin-top: 20px;
}

footer #info{
	float: right;
}


footer small{
	float: left;
	width: 100%;
	margin-top: 60px;
}


/* ------------------------------
   スマホ用
------------------------------ */

@media only screen and (max-width: 768px) {
	
#logo_sp{
	float: left;
	position: relative;
	z-index: 10;
	margin-left: 10px;
	margin-top: 5px;
	}
	
#logo_sp img{
	width: 220px;}	
		
#logo_pc{
		display: none;
	}

#menuList {
		display: none;
	}
	

#rwdMenuWrap {
		width: 100%;
	}

#rwdMenuWrap #switchBtnArea {
	width: 100%;
	height: 60px;
	position: relative;
	background-color: #FFFFFF;
	padding-bottom: 5px;
	}

#rwdMenuWrap #switchBtnArea #switchBtn {
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	display: block;
	position: absolute;
	border-radius: 5px;
	background-color: #FEBD49;
	}

#rwdMenuWrap #switchBtnArea #switchBtn span {
		left: 20%;
		width: 60%;
		height: 4px;
		display: block;
		position: absolute;
		background-color: #fff;
		border-radius: 5px;
		transition: all 0.2s linear;
	}

#rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(1) {
		top: 10px;
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}

#rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(2) {
		top: 18px;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

#rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(3) {
		bottom: 10px;
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}

#rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(1) {
		top: 18px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

#rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(2) {
		-webkit-transform: scale(0);
		transform: scale(0);
	}

#rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(3) {
		bottom: 18px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}


#rwdMenuWrap ul {
		width: 100%;
		display: none;
	}


#rwdMenuWrap ul li {
	width: 100%;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #FFF;
	}


#rwdMenuWrap ul li a {
	padding: 15px 20px;
	text-align: left;
	display: block;
	position: relative;
	background-color: #FEE2AF;
	}


#rwdMenuWrap ul li a:after {
	content: '';
	margin-top: -4px;
	top: 50%;
	right: 15px;
	width: 8px;
	height: 8px;
	color: #FFF;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.2em;
	display: block;
	position: absolute;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	}


.contents {
	width: 100%;
	padding-right: 10px;
	padding-left: 10px;
	}

#blog {
	float: left;
	width: 100%;
	text-align: center;
	margin-top: 20px;
}		

#blog img{
	width: 100%;
	height:auto;
	max-width:390px;
	
}

.photo {
	float: left;
	width: 100%;
	text-align: center;
}		

.photo img{
	width: 100%;
	height:auto;
	max-width:248px;
	
}

footer{
	text-align: center;
	float: left;
	padding-top: 55px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
	width: 100%;
	background-color: #ffedcc;
}

footer #address{
	float: left;
	width: 100%;
	margin-top: 10px;
}

footer #address .infotxt{
	float: none;
	margin-top: 10px;
}

footer #address .infotxt img{
	width: 100%;
	height:auto;
	max-width:390px;
	
}

footer #address .mail_button{
	float: none;
	margin-top: 10px;
}

footer #address .mail_button img{
	width: 100%;
	height:auto;
	max-width:390px;
	
}

footer #info{
	float: left;
	width: 100%;
}

footer #info img{
	width: 100%;
	height:auto;
	max-width:390px;
}

footer small{
	float: left;
	width: 100%;
	margin-top: 60px;
}

	
}

/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
#menuList > ul:before,
#menuList > ul:after {
	content: " ";
	display: table;
}
#menuList > ul:after {clear: both;}
#menuList > ul {*zoom: 1;}