@charset "utf-8";
/* ------------------------------------------------------------ common */
h3.title { font-size: 38px; background: url(../images/bar_01.gif) no-repeat center bottom; padding: 0 0 30px; text-align: center; }
h3.title span { font-size: 20px; color: #adadad; font-family: 'PT Serif Caption', serif; display: block; padding: 0 0 20px; letter-spacing: 4px; }
h3.title.left { background: url(../images/bar_01.gif) no-repeat left bottom; text-align: left; }
/* ------------------------------------------------------------ header */
#header { padding: 0 0 0 40px; position: fixed; width: 100%; background: #fff; box-sizing: border-box; -webkit-box-sizing: border-box; top: 0; min-width: 1280px; z-index: 500; }
#header h1 { float: left; padding: 28px 0 0; }
#header .right { float: right; }
#header .right ul { float: left; padding: 32px 30px 32px 0; }
#header .right ul li { float: left; padding: 0 0 0 25px; }
#header .right ul li:first-child { padding: 0; }
#header .right ul li a { font-size: 14px; }
#header .right .tel { float: right; }
#header .right .tel a { font-size: 16px; text-align: center; color: #fff; background: #0c2882; display: block; padding: 30px 25px; }
#header .right .tel a strong { font-size: 24px; }
#header .right .tel a span { font-size: 14px; display: block; text-align: center; padding: 5px 0  0; }
/* ------------------------------------------------------------ fv */
#fv { background: url(../images/fv.jpg) no-repeat center top; background-size: cover; margin: 80px auto 0; padding: 120px 0 0; }
#fv h2 { text-align: right; padding: 0 0 380px; margin: 0 -80px 0 0; }
#fv .inner.ex { }
#fv .bottom { background: url(../images/fv_bottom_pattern.gif) repeat; padding: 20px 0; }
#fv .bottom .inner { position: relative; }
#fv .bottom img.fukidashi { position: absolute; top: -100px; left: 180px; }
#fv .bottom p { text-align: center; }
/* ------------------------------------------------------------ about */
#about { background: url(../images/about_bg.jpg) no-repeat center top; margin: 80px auto 50px; }
#about .textbox { width: 480px; padding: 105px 0 0; }
#about .textbox h4 { font-size: 24px; line-height: 42px; padding: 50px 0 0; }
#about .textbox p { font-size: 16px; line-height: 37px; padding: 15px 0 30px; }
#about .textbox ul { display: table; }
#about .textbox ul li { display: table-cell; width: 132px; text-align: center; vertical-align: middle; font-size: 32px; color: #ec6100; background: #fce5c1; line-height: 40px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; padding: 26px 0; }
#about .textbox ul li:first-child { background: #bfdfb6; color: #006d35; }
#about .textbox ul li.batu { width: 26px; background: none; padding: 26px 20px; }

.about_bottom { background: url(../images/about_bottom_bg.jpg) no-repeat center center; padding: 0 0 135px; }
.about_bottom .about_photo { padding: 0 0 100px; }
.about_bottom .about_photo ul { margin: 50px 0 0 -10px; }
.about_bottom .about_photo ul li { width: 360px; float: left; padding: 0 0 0 10px; }
.about_bottom .smile { background: url(../images/icn_02.png) no-repeat center top; padding: 130px 0 0; }
.about_bottom .smile h4 { font-size: 32px; text-align: center; line-height: 59px; }
.about_bottom .smile h4 span { font-size: 18px; color: #adadad; font-family: 'PT Serif Caption', serif; display: block; padding: 0 0 10px; }

.happy_smile { height: 550px; background: url(../images/pic_05.jpg) no-repeat center top; background-size: cover; }
.thanks ul li { float: left; width: 535px; padding: 120px 0 0 15px; }
.thanks ul li:first-child { float: left; width: 550px; padding: 0; }
.thanks ul li h4 { font-size: 30px; background: url(../images/fukidashi.png) no-repeat center center; width: 502px; text-align: center; padding: 23px 0 56px; margin: 0 auto 20px; }
.thanks ul li h4 span { font-size: 40px; color: #0c2882; }
.thanks ul li h5 { font-size: 50px; background: url(../images/right.png) no-repeat right bottom; }
.thanks ul li h5 strong { font-size: 130px; font-family: 'EB Garamond', serif; color: #1a3489; background: url(../images/left.png) no-repeat left 78px; padding: 0 0 0 40px; }
/* ------------------------------------------------------------ contact */
#contact { background: #faf5e6; padding: 70px 0 65px; }
#contact .box_top { background: url(../images/contact_bg_top.png) no-repeat center top; padding: 22px 0 0; }
#contact .box_center { background: url(../images/contact_bg_center.png) repeat-y center center; padding: 40px 0 80px; }
#contact .box_bottom { background: url(../images/contact_bg_bottom.png) no-repeat center bottom; padding: 0 0 14px; }
#contact ul { width: 854px; margin: 30px auto 0; }
#contact ul li { float: left; }
#contact ul li:first-child { padding: 0 30px 0 0; }
/* ----------------------------------------------------------- concept */
#concept { background: url(../images/concept_bg.png) no-repeat center top; background-size: 100%; padding: 150px 0 120px; }
#concept h2 { font-size: 54px;  text-align: center; padding: 0 0 70px; }
#concept h4 { text-align: center; font-size: 26px; padding: 40px 0 0; }
#concept .intro { text-align: center; font-size: 16px; line-height: 30px; padding: 20px 0 0; }
#concept .madori { text-align: center; padding: 65px 0 0; }
#concept .mama_concept { padding: 160px 0 0; }
#concept .mama_concept h3 { border-bottom: solid 3px #fff100; text-align: center; padding: 0 0 30px; margin: 0 auto 50px; }
#concept .mama_concept ol { margin: 0 0 0 -33.333px; }
#concept .mama_concept ol.center {  border-top: solid 1px #e5e5e5; border-bottom: solid 1px #e5e5e5; padding: 50px 0 70px; margin: 70px 0 50px -33.333px; }
#concept .mama_concept ol li { float: left; width: 250px; padding: 0 0 0 33.333px; }
#concept .mama_concept ol li span { font-size: 38px; font-family: 'PT Serif Caption', serif; display: block; text-align: center; color: #0c2882; background: url(../images/text_01.png) no-repeat center top; padding: 20px 0 15px; }
#concept .mama_concept ol li h4 { font-size: 24px; text-align: left; padding: 30px 0 15px; }
#concept .mama_concept ol li h4.ex { line-height: 32px; padding: 25px 0 12px; }
#concept .mama_concept ol li p { font-size: 16px; line-height: 26px; } 
/* ------------------------------------------------------------ works */
#works { padding: 100px 0 150px; }
#works ul { margin: 50px 0 0 -40px; }
#works ul li { float: left; width: 530px; padding: 0 0 70px 40px; }
#works ul li h4 { font-size: 22px; line-height: 32px; text-align: center; padding: 20px 0 0; }
#works ul li .one { height: 64px; }
#works .btn { text-align: center; }
#works .btn a { display: inline-block; *display: inline; *zoom: 1; width: 300px; height: 60px; line-height: 60px; font-size: 16px; text-align: center; background: url(../images/arrow_01.png) no-repeat 96% center #000; color: #fff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
/* ------------------------------------------------------------ access */
#access_location { padding: 0 0 110px; }
#access_location .happyhome { background: url(../images/pic_08.jpg) no-repeat center center; background-size: cover; height: 550px; }
#access_location h3 { padding: 100px 0 30px; }
#access_location p { font-size: 16px; line-height: 30px; text-align: center; padding: 40px 0 55px; }
#access_location .address { padding: 0 0 15px; }
#access_location .map { text-align: center; }
#access_location .map .gmap { padding: 0 0 24px; }
#access_location .map .gmap iframe { width: 100%; height: 450px; }
#access_location .map a { font-size: 14px; text-decoration: underline; background: url(../images/map_icn.gif) no-repeat left center; padding: 0 0 0 22px; letter-spacing: normal; }
/* ------------------------------------------------------------ privilege */
#privilege { padding: 100px 0 140px; background: #eff4f7; }
#privilege ul { margin: 40px 0 0 -40px; }
#privilege ul li { padding: 0 0 0 40px; float: left; width: 530px; }
/* ------------------------------------------------------------ overview */
#overview { padding: 110px 0; }
#overview h3 { margin: 0 auto 50px; }
#overview table , td, th {
	border: 1px solid #595959;
	border-collapse: collapse;
	font-family:"ヒラギノ角ゴ Pro w3","Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif; 
}
#overview td, th {
	padding: 20px 15px;
	font-size: 16px;
	
}
#overview th {
	background: #faf5e6;
	width: 150px;
	
}
#overview td {
	width: 400px;
}
#overview .even {
	background: #fbf8f0;
}
#overview .odd {
	background: #fefcf9;
}
/* ------------------------------------------------------------ footer */
#footer { padding: 60px 0 40px;}
#footer p { text-align: center; font-size: 12px; line-height: 22px; letter-spacing: normal; }
#footer p img { margin: 0 auto; }
#footer p.tel { padding: 18px 0 25px; }
#footer p.tel a { font-size: 22px; letter-spacing: 1px; }
#footer small { text-align: center; font-size: 12px; display: block; padding: 35px 0 0; letter-spacing: 1px; }





/* --------------------------------------------------------------------- mobile ------------------------------------------------------------ */

@media only screen and (max-width:640px){
/* ------------------------------------------------------------ common */
.pagetopbtn { position: fixed; right: 20px; bottom: 20px; }
.is-fixed { position: fixed !important; top: 0; width: 100%; z-index: 99; }

h3.title { font-size: 24px; padding: 0 0 20px; line-height: 32px; letter-spacing: 2px; background-size: 52px; }
h3.title span { font-size: 16px; padding: 0 0 10px; letter-spacing: 4px; }
h3.title.left { background: url(../images/bar_01.gif) no-repeat center bottom; background-size: 52px; text-align: center; }
/* ------------------------------------------------------------ header */
#header { padding: 12px 5%; width: 100%; min-width: 100%; }
#header h1 { padding: 11px 0 0; }
#header h1 img { width: 150px; height: auto; }

#mask { background: #000; height: 100%; width: 100%; min-height: 100%; position: fixed; opacity: 0.7; filter: alpha(opacity=70); -moz-opacity:0.70; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; display: none; }
#open_modal { cursor: pointer; display: block; }

#menu-btn { width: 45px; height: auto; float: right; }
#menu-btn img { display: inline !important; width: 100%; height: auto; }

#navigation { position: fixed; text-align: center; margin: 0; top: 0; right: 0; left: 0; z-index: 999; display: none; height: 100%; overflow-y: scroll; background: #fff; }
#menu-header { background: #fff; padding: 30px 0; position: fixed; z-index: 999; width: 100%; }
#menu-header .close_modal { position: absolute; right: 6%; top: 0; }
#menu-header .close_modal img { width: 25px; height: 25px; padding: 15px 0 0; }
#navigation #menu-header a { display: block; width: 140px; margin: 0 auto; }
#navigation #menu-header a img { width: 100%; height: auto; margin: 0 auto; padding: 0; }
#navigation ul { font-size: 14px; z-index: 999; width: 100%; background: #fff; padding: 76px 0 0; }
#navigation ul li { background: #fff; text-align: left; border-bottom: #e5e5e5 solid 1px;  }
#navigation ul li:first-child { border-top: #e5e5e5 solid 1px; }
#navigation ul li a { font-size: 14px; color: #000; display: block; width: 100%; padding: 18px 5%; background: url(../images/arrow_02.png) no-repeat 95% center; background-size: 8px; box-sizing: border-box; -webkit-box-sizing: border-box; }
#navigation ul li.close { text-align: center; background: #1a3489; color: #fff; padding: 18px 5%; cursor: pointer; }
/* ------------------------------------------------------------ fv */
#fv { background: none; height: inherit; margin: 64px auto 0; padding: 0; }
#fv img { width: 100%; height: auto; }

/* ------------------------------------------------------------ about */
#about { background: none; margin: 30px auto 0; }
#about .textbox { width: 100%; padding: 20px 0 0; }
#about .textbox h4 { font-size: 18px; line-height: 32px; padding: 30px 0 0; text-align: center; }
#about .textbox img.SP { width: 100%; height: auto; padding: 30px 0 0; }
#about .textbox p { font-size: 14px; line-height: 27px; padding: 15px 0 30px; }

#about .textbox ul { width: 257px; margin: 0 auto; }
#about .textbox ul li { width: 96px; font-size: 18px; line-height: 22px; padding: 26px 0; }
#about .textbox ul li:first-child { }
#about .textbox ul li.batu { width: 20px; background: none; padding: 26px 20px; }
#about .textbox ul li.batu img { width: 20px; height: auto; }

.about_bottom { background: url(../images/accent_01.png) no-repeat 10px 113%; background-size: 100px; padding: 0 0 80px; }

.about_bottom .about_photo { padding: 0 0 50px; background: url(../images/accent_01.png) no-repeat right bottom; background-size: 100px; }
.about_bottom .about_photo ul { margin: 30px 0 0; }
.about_bottom .about_photo ul li { width: 33.333%; padding: 0 0 0; }
.about_bottom .about_photo ul li img { width: 100%; height: auto; }

.about_bottom .smile { padding: 90px 0 0; background-size: 90px;}
.about_bottom .smile h4 { font-size: 17px; line-height: 32px; letter-spacing: 1px; }
.about_bottom .smile h4 span { font-size: 12px; }

.happy_smile { height: 150px; }

.thanks { padding: 0 0 70px; }
.thanks ul li { float: none; width: 100%; padding: 0 0 0; }
.thanks ul li:first-child { float: none; width: 100%; padding: 20px 0 20px; }
.thanks ul li img { width: 100%; height: auto; }
.thanks ul li img.SP { width: 85%; height: auto; margin: 0 auto; }
/* ------------------------------------------------------------ contact */
#contact { padding: 50px 0 55px; }
#contact .box_top { background: #fff; padding: 40px 5%; box-shadow: 8px 8px rgba(0,0,0,0.1); width: calc( 100% - 8px); box-sizing: border-box; -webkit-box-sizing: border-box; }
#contact .box_center { background: none; padding: 0 0; }
#contact .box_bottom { background: none; padding: 0 0 14px; }
#contact ul { width: 100%; margin: 30px auto 0; }
#contact ul li { float: none; text-align: center; }
#contact ul li:first-child { padding: 0 0 20px; }
#contact ul li img { width: 100%; height: auto; max-width: 300px; }
/* ----------------------------------------------------------- concept */
#concept { background-size: 100%; padding: 80px 0 20px; }
#concept h2 { font-size: 30px; padding: 0 0 30px; }
#concept h4 { font-size: 20px; padding: 40px 0 0; line-height: 32px; }
#concept .intro { font-size: 14px; line-height: 27px; padding: 10px 0 0; }
#concept .madori { padding: 30px 0 0; }
#concept .madori img { width: 100%; height: auto; }
#concept .mama_concept { padding: 100px 0 0; }
#concept .mama_concept h3 { padding: 0 0 15px; margin: 0 auto 40px; }
#concept .mama_concept h3 img { width: 100%; height: auto; }
#concept .mama_concept ol { margin: 0 auto; }
#concept .mama_concept ol.center { border: none; padding: 0; margin: 0; }
#concept .mama_concept ol li { float: none; width: 100%; padding: 0 0 60px; }
#concept .mama_concept ol li img { width: 100%; height: auto; }
#concept .mama_concept ol li span { font-size: 27px; background: url(../images/text_01_sp.png) no-repeat center top; background-size: 80px; padding: 20px 0 15px; }
#concept .mama_concept ol li h4 { font-size: 20px; padding: 13px 0 5px; }
#concept .mama_concept ol li h4.ex { line-height: 100%; padding: 20px 0 10px; }
#concept .mama_concept ol li p { font-size: 14px; line-height: 24px; } 
/* ------------------------------------------------------------ works */
#works { padding: 60px 0 100px; }
#works ul { margin: 40px 0 0; }
#works ul li { float: none; width: 100%; padding: 60px 0 0; }
#works ul li:first-child { padding: 0; }
#works ul li img { width: 100%; height: auto; }
#works ul li h4 { font-size: 16px; line-height: 26px; padding: 15px 0 0; }
#works ul li .one { height: inherit; }
#works .btn { padding: 40px 0 0; }
#works .btn a { width: 250px; height: 50px; line-height: 50px; font-size: 14px; background-size: 7px; letter-spacing: 1px; }
/* ------------------------------------------------------------ access */
#access_location { padding: 0 0 90px; }
#access_location .happyhome { height: 150px; }
#access_location h3 { padding: 50px 0 20px; }
#access_location p { font-size: 16px; line-height: 30px; padding: 30px 0 40px; }
#access_location .address { padding: 0 0 15px; font-size: 14px; line-height: 150%; }
#access_location .address a { line-height: 150%; }
#access_location .map {}
#access_location .map .gmap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin: 0 auto 15px; }
#access_location .map .gmap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#access_location .map a { font-size: 14px; padding: 0 0 0 22px; letter-spacing: normal; background: url(../images/map_icn_sp.gif) no-repeat left center; background-size: 14px; }

/* ------------------------------------------------------------ privilege */
#privilege { padding: 50px 0 90px; }
#privilege ul { margin: 40px 0 0; }
#privilege ul li { padding: 0 0 0; float: none; width: 100%; }
#privilege ul li:first-child { padding: 0 0 20px; }
#privilege ul li img { width: 100%; height: auto; }

/* ------------------------------------------------------------ overview */
#overview { padding:70px 0 50px; }
#overview h3 { margin: 0 auto 30px; }
#overview table,tbody,tr { display: block; }
#overview table , td, th {
	border: none;
	display: block;
	width: 100%;
}
#overview td, th {
	padding: 15px;
	font-size: 16px;
	display: block;
	box-sizing: border-box; -webkit-box-sizing: border-box;
	text-align: center;
	line-height: 24px; 
}
#overview th {
	width: 100%;
}
#overview td {
	width: 100%;
	padding: 10px 0 30px;
}


/* ------------------------------------------------------------ footer */
#footer { padding: 50px 0 30px;}
#footer p { text-align: left; font-size: 12px; line-height: 22px; letter-spacing: normal; }
#footer p.logo { text-align: center; }
#footer p img { width: 200px; height: auto; margin: 0 auto; }
#footer p.tel { padding: 18px 0 25px; text-align: center; }
#footer p.tel a { font-size: 20px; letter-spacing: 1px; }
#footer small { font-size: 10px; padding: 35px 0 0; line-height: 18px; }

}