@charset "UTF-8";* {margin: 0;padding: 0;}

html{font-size:62.5%;}
body {font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif, serif;font-size:12px; font-size:1.4rem;	line-height:2.1rem;    argin-bottom: 20px; background:url(../img/background.jpg); line-height:1.8em;}
address a {text-decoration:none; color:#fff;}
p{color:#584B45; text-align:center; margin:30px auto;}
.small {font-size:80%; margin:0 auto;}
section.wrap{ max-width:1200px; width:80%; margin:30px auto;}
/*#form section.wrap{ max-width:1200px; width:100%; margin:0 auto;}*/
header h1{float:left;}
.wrap h1 img{width:100%;}
/*header .inbox_1{margin-top:90px;}*/
header .inbox_1 nav li{display:block; float:left;}

h3{width:20%; margin:15px auto 10px;}
h3 img{ margin:0 auto; display:block; width:90%;}
h3 span{ text-align:center; display:block; font-size:12px; margin-top:-3px; font-weight:bold;}

nav {height:40px;}
header .inbox_1 { width:83%;float:right;}

.inbox_1 h3{width:100%; margin-top:5px; margin-bottom:0;} 
.inbox_1 h3 img.chache{width:90%;float:left;}
.inbox_1 h3 img.sns{width:30px;float:right; margin-right:1%; margin-top:40px;}

.inbox_2 { width:40%; position:relative; margin:0 auto 20px;}
.inbox_2 img.sozai{width:auto;}
.inbox_2 p{ float:left;}

.inbox_3{ width:20%; margin:0 auto 20px;width:100%;}
.inbox_3 img{ width:100%;margin-right:3px;}

.inbox_4 dl dt{float: left; width:30%; margin-top:20px;}
.inbox_4 dl dd {float:left; width:70%; margin-top:20px;} 
.inbox_4 dl dd.right {float:right; width:70%; margin-top:20px;} 
.inbox_4 {position:relative; padding:0; margin:0 auto 20px;}

ul.inbox_5{padding:0; margin:0 auto; width:100%;}
ul.inbox_5 li {width:14%; float:left; display:-webkit-box;}
ul.inbox_5 li img{ width:100%; margin-right:0; display:block;}


#how_to .inbox_2{ width:70%; position:relative;}
#how_to .inbox_2 img {width:43%; float:left; margin-right:2%;}
#how_to .inbox_2 img.photo_9{position:absolute; top:-10px; right:20px; width:50px;}
#how_to .inbox_2 p{width:47%; float:left;}
#how_to .inbox_2 p img{width:100%;}
#how_to .inbox_4 {width:80%;}
#how_to .inbox_4 p img{width:80%;}
#how_to .inbox_4 .photo_6{ position:absolute; right:25%;  bottom:30px; width:80px;}
#how_to .inbox_4 .photo_7{ position:absolute; left:70px; bottom:0px; width:60px;}
#how_to .inbox_4 .photo_8{ float:left; width:20%;}}


#contact .inbox_2 img,#contact .inbox_2 a {width:50%; text-decoration:none; text-align:center; color:#584B45;}
#contact .inbox_2 img {width:70%; display:block; margin:0 auto;}
#contact .inbox_2 img.mov_none{display:none;}
#contact .inbox_2 { width:52%; margin-top:30px;}
#contact .inbox_2 a img {width:100%;}
#contact .inbox_2 p.infoText{ line-height: 2; float: none;}
#contact .inbox_2 p.infoText .m_font{ display: block; color: #555; font-size: 20px; text-decoration: underline; text-align: center;}

#access .inbox_5 {width:100%;}
#access .inbox_5 {margin-top:30px; margin-bottom:50px;}
#access .inbox_5 img.photo{width:20%;}
#access .inbox_5 .ad{width:33%;display:block; float:left;}
#access .inbox_5 .ad img{display:block; float:none;width:100%;}
#access .inbox_5 .ad p{text-align:left; margin-top:10px; margin-bottom:0;}
#access .inbox_5 .ad p span{font-size:0.8em;}
#access .inbox_5 .ad p.small { margin-top:10px; margin-bottom:10px; line-height:1.5rem;}
#access .inbox_5 .access_map{ float:left; width:40%; margin:0 3%;}
#access .inbox_5 h2{ line-height:1em; font-weight:bold;}


footer {background:#706562; margin-top:20px; padding:50px 2%; width:96%;}
footer address{text-align:center; font-size:14px; color:#fff;}


.inner { /*width: 980px;*/ margin: 0 auto;}
.inner:after { content: "";clear: both;display: block;}
 
/* header */
#top-head {top: -100px;width: 100%;line-height: 1;z-index: 999; margin-bottom:30px;}
#top-head a,#top-head {color: #fff;text-decoration: none;}
#top-head .inner {position: relative; }
#top-head .logo {float: left;font-size: 36px; width:10%;}
#global-nav ul {list-style: none; position: absolute ;ßright: 0;bottom: 0;font-size: 14px;}
#global-nav ul li { float: left; width:18.4%; margin:0 auto; background:#fff;}
#global-nav ul li img{width:100%;}

footer address a img{ width:30px; margin:0 auto;}
#about h3{margin-top:70px;}
 
/* Toggle Button */
#nav-toggle { display: none;position: absolute;right: 12px;top: 18px;width: 34px;height: 36px;cursor: pointer;z-index: 101;}
#nav-toggle div { position: relative;}
#nav-toggle span {display: block;position: absolute;height: 1px;width: 100%;background: #666;left: 0;-webkit-transition: .35s ease-in-out;-moz-transition: .35s ease-in-out;transition: .35s ease-in-out;}
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 11px;}
#nav-toggle span:nth-child(3) {top: 22px;}

#how_to .inbox_2 .left h4{float:left; width:25%;}
#how_to .left dl {float:left; width:75%;}
#how_to .left dl dd	{font-size: 80%; margin:0 auto;}
#how_to .left dl dt{ font-size:100%;}
#how_to .left dl dd span {font-size:1.3em;}
#how_to  dl {width:100%; margin:0 auto; float:left; position:relative;}
#contact .inbox_2 a p {margin:0 auto 20px; text-align:center; float:none;}
.line{width:100%; margin:30px 0; text-align:center;}

#viewer {
    margin: 0 auto 30px;
    width: 100%;
    height: 500px;
    text-align: left;
    overflow: hidden;
    position: relative;
}
 
#viewer img {
    top: 0;
    left: 0;
    position: absolute;
	width:100%;
	height:auto;
}

.tab_none,.pc_none{display:none;}
.pctab_none{display:none;}
#access .inbox_5 .ad img.pctab_none{display:none;}
br.pc_none{display:none;}

ul.samplebox { width:80%; margin:50px 10% 0;}
ul.samplebox li{ float:left; width:30%; margin:0 1.5%;}
ul.samplebox li a{ display:block;} 
ul.samplebox li a img{width:100%;}
.bold{font-weight:600;}


.btn_top{ display:none;}
/*.iframe{width:100%; !important;}*/
.iframe{

width:100%;
}
 
.iframe iframe{

top:0;
left:0;
width:100%; !important;
overflow:hidden;
}
	#form section.wrap{margin:0 auto;}
	#form footer{margin-top:-8px;}

/* iPHone4,iPhone5,iPhone5s */
@media screen and (max-width: 320px) {
	section.wrap{width:100%;margin:0 auto; }
	ul.samplebox li {width:47%; margin-bottom:10px;}
	p img{width:95%; margin:0 auto;}
	.pc_dpn{display:none;}
	header h1.logo{width:30%;position:relative;}
	header img {width:100%;}
	header .inbox_1 {margin-top:-40px;}
	header .inbox_1 h3{width:65%; position:relative; top:-15px; right:0; margin-right:0;}
	.inbox_2 {position:relative; padding:0 10px; margin:0 auto 20px;}
    .inbox_2 .mov_none{display:none;}
    .inbox_2 img{margin-right:10px;}
	.inbox_3 {width:100%;}
	#contact .inbox_2 {width:100%; margin:0 margin-top:-10px;} 
	#contact .inbox_2 p.infoText {font-size: 14px;}
	#access .access_map{width:80px; margin:0 auto;float:right;}
    #access .inbox_5 .pc_none{ display:block; width:30%;}
    #access .inbox_5 .mov_none{ display:none;}
	#access .inbox_5 .mov_none{ display:none;}
	img.line{width:95%; margin: 0 2.5%;}
	.line{width:90%; margin:0 5%;}
    #top-head .logo img{ z-index:-999; height:56px; width:46px;}
	#how_to .inbox_2 img.photo_9 {margin-right:0;}
	br.pc_none{display:block;}
	ul.samplebox { width:90%; margin:-110px 5%;}
	#viewer {height:200px;}
	/*#form section.wrap{max-width: 320px; margin:0 auto;}
	#form .iframe{ width:320px; !important;}
	#form .iframe iframe{ 　width:100%; !important;}*/
}


/* iPHone4,iPhone5,iPhone5s,iPhone6,iPhone6 Plus */
@media screen and (min-width: 321px) and (max-width: 450px){
    #top-head .logo img{ z-index:-999; height:56px; width:46px;}
	section.wrap{width:100%; margin:0 auto;}
	header h1.logo{width:30%; position:relative;}
	header .inbox_1 {margin-top:-40px;}
	header .inbox_1 h3{width:65%; position:relative; top:-20px; right:0; margin-right:0;}
    .inbox_2 .mov_none{display:none;}
	p img{width:95%; margin:0 auto;}
	.pc_dpn{display:none;}
    #access .inbox_5 .pc_none{ display:none;}
    #access .inbox_5 .pc_none{ display:block;width:30%;}
    #access .inbox_5 .mov_none{ display:none;}
    #access .ad {width:70%;}#how_to .inbox_2
    .inbox_3 img.mov_none{display:none;}
	.line{width:90%; margin:0 5%;}
	br.pc_none{display:block;}
	ul.samplebox { width:90%; margin:-120px 5% 0;}
	#viewer {height:200px;}
	#contact .inbox_2 a img{width:100%;}
	#form section.wrap{max-width: 450px; margin:0 auto;}
	#form .iframe{ width:450px; !important;}
	#form .iframe iframe{ 　width:100%; !important;}
		}
@media screen and  (max-width: 640px) {
	#how_to .left dl dd{font-size:100%;}
	#how_to .left dl dt {margin-top:15px;}
	#how_to .inbox_2 .left h4 {width:100%;}
	#how_to .inbox_4{width:100%;}
	section.wrap{margin-top:0;}
	#how_to .left dl dd span.mov_none{display:none;}
	.inbox_4 dl dd {margin-top:0;}
	.inbox_4 dl dt { margin-top:15px;}
	p.small{ margin:0 auto;}
	section.contents{ position:relative ;top:-155px;}
	#form section.contents{ position:relative ;top:-2px;}
	#access .inbox_5 {margin-top:30px; margin-bottom:0;}
	#top footer{clear:both; margin-top:-100px;}
	footer{clear:both; margin-top:130px;}
	#form footer{clear:both; margin-top:-20px;}
	.inbox_1 h3 img.chache{width:135%; position:absolute; top:-130px; left:50px;}
	p{text-align:left; margin:30px auto;}
	footer address {font-size:80%;}
	header .inbox_1 h3{margin-top:150px; margin-left:-0px;}
	#about,#how_to,#sample,#contact{clear:both; margin-top:50px; width:90%; margin:0 5%; top:-50px;}
	header .inbox_1{float:none;}
    #top-head, .inner { width: 100%;padding: 0;}
    #top-head {/*position:fixed; top:0; */ top: 0;margin-top: 0;}
    /* Fixed reset */
    #top-head.fixed {padding-top: 0;background: transparent;}
    #mobile-head { background: #fff;width: 100%;height: 66px;z-index: 999;}
    #top-head.fixed .logo,
    #top-head .logo {color: #333;font-size: 26px;}
    #top-head .logo img{ z-index:-999; height:56px; margin:5px;}
    #global-nav {position: absolute;/* 開いてないときは画面外に配置 */
        top: -500px;background: #fff;width: 100%;text-align: center;padding:0;-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;transition: .5s ease-in-out;}
    #global-nav img { width:75px;}
    #global-nav ul {
        list-style: none;position: static;right: 0;bottom: 0;font-size: 14px;box-shadow: 0px 5px 2px rgba(0,0,0,0.2);}
    #global-nav ul li { float: none;position: static; }
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a { width: 100%;display: block;color: #fff;padding:0; margin:0 auto; border-bottom:1px solid #716662; padding:10px 0;}
    #top-head.fixed #global-nav ul li {margin:0 auto;}
    #nav-toggle {
        display: block;}
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;-webkit-transform: rotate(315deg);-moz-transform: rotate(315deg);transform: rotate(315deg);}
    .open #nav-toggle span:nth-child(2) {
        width: 0;left: 50%;}
    .open #nav-toggle span:nth-child(3) {
        top: 11px;-webkit-transform: rotate(-315deg);-moz-transform: rotate(-315deg);transform: rotate(-315deg);}
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(556px);-webkit-transform: translateY(556px);transform: translateY(556px); margin-top:11px; z-index:99;}
	.mov_none{display:none;}
	.tab_none{display:block;}
	.pc_none{display:block;}
	.top img{width:100%;}
	h3 {width:60%;}
	#how_to  dl {float:none; width:100%; margin-top:30px;}
	#how_to  dl.menu {float:none; width:100%; margin-top:-15px;}
	#how_to  dl dt {width:100%; margin-top:15px;}
	#how_to  dl dd{width:100%;}
	#contact .inbox_2{width: 90%;}
	#contact .inbox_2 a {width:100%;}
	#contact .inbox_2 a img {width:100%; margin:0 auto; margin-top:20px; margin-bottom:0;}
	#contact .inbox_2 p.infoText {margin:10px auto 0; float:none; font-size: 13px;}
	#contact .inbox_2 p.infoText .m_font{font-size: 18px;text-align:center;}
	#contact .inbox_2 p.infoText span.m_font{line-height: 1.2; margin-bottom: 20px;}
	ul.inbox_5 li{width:33%;}
	#how_to  .inbox_3 {width:100%; margin:50px auto 30px; padding:0;}
	#contact .inbox_2 img.mov_none{display:none;}
	.inbox_4 {width:100%; margin:0 auto; padding:0;}
	#contact .inbox_2 img {float:none; display:block;}
	.inbox_2 {padding:0;}
	#access .inbox_5 .ad {width:100%; float:none;}
	ul.inbox_5 {width:100%; margin:0 auto 30px;}
	#access .inbox_5 h2{ margin-left:10%; line-height:1.5em;}
	#access .inbox_5 .ad p{width:80%; margin:0 10%;}
	#access .inbox_5 img.photo {width:80%; margin:0 10%;}
	#how_to .inbox_2{ width:100%; position:relative; margin:auto 0;}
	#access .inbox_5 .access_map {margin:20px auto; width:100%;}
	section.wrap {width:100%;}
	.wrap h1 img {width:auto;}
	#access .inbox_5 .ad img.pctab_none{display:block;}
	#global-nav ul li {width:100%;}
	#global-nav ul li img {width:40%;}
	br.pc_none{display:block;}
	#mobile-head {font-size:80%; border-bottom:1px solid #716662;}
	#viewer {height:200px; top:-110px;}
	.btn_top a{text-decoration:none; padding:10px; display:block; font-size:25px; color:#fff; width:30px; height:30px; border-radius:50%; background:#706562; opacity:0.6; text-align:center;position:fixed; bottom:10px; right:10px;}
	.form{margin-top:-150px;}
	#form section.wrap{max-width: 640px; margin:0 auto;}
/*	#form .iframe{ width:640px; !important;}
	#form .iframe iframe{ 　width:100%; !important;}*/
}

/* タブレット */
@media screen and  (min-width: 451px) and (max-width: 639px) {}

/* タブレット */
@media screen and (min-width: 640px) and (max-width: 800px){
		<!--#form section.wrap{ max-width: 800px margin:0 auto;}-->
		p {font-size:0.8em;}
		h3{width:30%;}
		#viewer{ height:300px;}
		header .inbox_1 {margin-top:15px;}
		.pc_none{display:none;}
		.pctab_none{display:none;}
		#how_to h4{width:30%; float:left; font-size:80%;}
		#how_to  dl.menu {font-size:0.8em;  width:70%;}
		#how_to  dl {font-size:0.8em;  width:100%;}
		#contact .inbox_2{width:100%; margin:0;}
		#contact .inbox_2 img {font-size:0.8em; width:33%;}
		#contact .inbox_2 img {margin:0 auto;}
		#access .inbox_5 .ad {width:40%;}
		#access .inbox_5 .access_map {margin:0;}
		#access .inbox_5 .ad p {line-height:1.3em; margin-top:10px;}
		br.pc_none{display:block;}
		ul.samplebox { width:90%; margin:30px 5% 0;}
		#contact .inbox_2 a img {width:40%;}
		#access .inbox_5 .ad p.small {font-size:80%;}
		#top-head .logo {width:13%;}
		.inbox_1 h3 img.sns {margin-top:17px;}
	/*	#form section.wrap{max-width: 800px; margin:0 auto;}
		#form .iframe{ width:800px; !important;}
		#form .iframe iframe{ 　width:100%; !important;}*/
}