@charset "utf-8";
@import "common/layout.css";

/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, 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 {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* -------------------------------------------------------------- */

body{
color:#555;
font:12px verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.5;
background:#ffffff;
-webkit-text-size-adjust: none;
background-image:url(../img/paquet_howto/bg.jpg)
}

a:hover img {
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);	/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}
 
a img {
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}

/*SNS幅固定.box_snssp{
width:930px;
margin:0 auto;
background-color:#e1c9be;
}*/

ul.page_sns li{
	display:inline;
}
.page_sns{
	width:800px;
	padding-left:20px;
	padding-top:8px;
	
	
}


/* リンク設定
------------------------------------------------------------*/
a{color:#b99253;text-decoration:none;}
a:hover{color:#866326;}
a:active, a:focus{outline:0;color:#866326;}



/* 全体
------------------------------------------------------------*/
#wrapper{
margin:0 auto;
padding:0 1%;
width:98%;
position:relative;
}

.inner{
margin:0 auto;
width:100%;
}


/*************
/* ヘッダー
*************/
#header .inner{
margin-top:20px;
overflow:hidden;
background:#;
border:;
}

* html #header{height:1%;}



/**************************
/* 
**************************/

/*SNS幅固定.box_snssp{
width:930px;
margin:0 auto;
background-color:#e1c9be;
}*/

ul.page_sns li{
	display:inline;
}
.page_sns{
	width:700px;
	padding-left:50px;
	padding-top:8px;
	height:20px;
	
}







#main-in { 
     width: 940px; 
	 margin:0 auto;
	 background-color:#FFFFFF;
	 padding-bottom:30px;
}

#main-in .howto{ 
     text-align:center;
	 padding:0 0 15px 15px;
}
#main-in .txt{
	 font-size:18px;
	 padding:20px 30px 30px 30px;
	 color:#9c8678;
}
#main-in .spic{
	 display:none;
}
#main-in .pointtitle{display:none;}


/*----paquet01--------------------*/

.paquet01 {
padding: 15px 0 5px 30px;
margin-bottom:15px;
background-repeat:no-repeat;
background-image:url("../img/paquet_howto/line.png");
background-position : center bottom;
}
.paquet01 .main-title {
	width:400px;
	padding:0 0 0 50px;
	float: left;
	text-align:left;
}
.paquet01 .main-title .pch {padding:0 0 10px 0;}
.paquet01 .main-title .smph2 {display:none;}
.paquet01 .main-title .main-smpimage {display:none;}

.paquet01 .main-title p {
		padding: 0 0 1em 0;
		font-size:100%;
		font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
		line-height: 135%;
		letter-spacing:10%;
		text-align:center;
		color:#866326;
}		
.paquet01 .main-image {
	width:380px;
	padding:0 70px 0 0;
	float: right;
}
.paquet01 .main-image  p {
	padding: 0 0 1em 0;
		font-size:120%;
		font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
		line-height: 135%;
		letter-spacing:10%;
		text-align:center;
		color:#866326;
}
.paquet01 .main-image p a{
	    display:block;
	}
.paquet01 .main-image a:link    {}
.paquet01 .main-image a:visited {}
.paquet01 .main-image a:hover   {opacity:0.8;}
.paquet01 .main-image a:active  {opacity:0.8;}
	/* IE用 ↓*/
.paquet01 .main-image a:hover img {filter:alpha(opacity=80);}

/*----paquet02--------------------*/

.paquet02 {
padding: 15px 0 5px 30px;
margin-bottom:15px;
background-repeat:no-repeat;
background-image:url("../img/paquet_howto/line.png");
background-position : center bottom;
}
.paquet02 .main-title {
	width:400px;
	padding:0 0 0 50px;
	float: left;
	
}

.paquet02 .main-title p a{
	    display:block;
	}
.paquet02 .main-title a:link    {}
.paquet02 .main-title a:visited {}
.paquet02 .main-title a:hover   {opacity:0.8;}
.paquet02 .main-title a:active  {opacity:0.8;}
	/* IE用 ↓*/
.paquet02 .main-title a:hover img {filter:alpha(opacity=80);}

.paquet02 .main-title .pch{padding:0 0 10px 0;}

.paquet02 .main-title .main-smpimage {display:none;}

.paquet02 .main-title p {
		padding: 0 0 1em 0;
		font-size:120%;
		font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
		line-height: 135%;
		letter-spacing:10%;
		text-align:center;
		color:#866326;
}		
.paquet02 .main-image {
	width:400px;
	padding:0 60px 20px 0;
	float: right;
}



.smph {display:none;}

/*カラーバリエーション*/

#main-in .color_box{
		margin-left:60px;
}
	
#main-in .color_box div {
		float:left;
		width:180px;
		margin:0 30px 0 0;
		height:350px;/*高さを入れないとie7で崩れる*/
		position:relative;
}
#main-in .color_box div .new {
	position : absolute;
	top: 6px;
	left: 6px
}

		
#main-in .color_box div ul {
}
			
#main-in .color_box div ul li {
		margin:3px 0 0 0;
		
					
}
				
#main-in .color_box div ul li.places {
		color:#654b3d;
		font-weight:bold;
		padding:5px 0 5px 0;
}
					
#main-in .color_box div ul li.name {
		font-weight:bold;
		font-size:110%;
		padding:2px 0 2px 0;
		color:#333333;
}
#main-in .color_box div ul li.price {
		line-height:1.4;
		font-size: 12px;
		color:#654b3d;
		padding:2px 0 2px 0;
}	
#main-in .color_box div ul li.spec {
		line-height:1.4;
		font-size: 12px;
		padding:2px 0 2px 0;
		color:#654b3d;
			}	



@media screen and (max-width:640px){
	/*スマホ対応*/
	

.page_sns{
	width:90%;
	height:auto;
	text-align:left;
	}	
/*---- Main Visual --------------------*/

#main-in { width: 100%; margin:0 0; background-image:url(../img/paquet_howto/bg.jpg);}

#main-in .txt{
	font-size:18px;
	padding:20px 20px 0 20px;
	font-size:120%;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	line-height: 120%;
	letter-spacing:10%;
	
	}
#main-in .txt{
	display:none;
	
	}
#main-in .spic{
	 display:block;
	width: 100%;
	height:auto;
	margin-bottom:15px;
}
#main-in .howto{ 
     text-align:center;
	padding:10px 20px;
}


#main-in h1 img{  max-width: 100%; 
    height:auto;}
	
#main-in .maintitle {display:none;}
	
#main-in .pointtitle{
	display:block;
	width: 100%;
	height:auto;
}

.paquet01 {
	padding: 0 20px 15px 20px;
}
.paquet01 .main-title {
		width: 100%;
		float:none;
		padding:0;
	}
.paquet01 .main-title .pch {
			
			width:100%;
			padding:0 0 0 0;
			text-align:center;
}

.paquet01 .main-title .main-smpimage {
			display:block;
			width:100%;
			padding:0 0 0 0;
}
.paquet01 .main-title p {
			font-size:120%;
			font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
			line-height: 130%;
			letter-spacing:10%;
			padding: 0 5% 1em 5%;
}	
.paquet01 .main-title p br {
				
}
.paquet01 .main-image {
		    width:90%;
			padding:0 15px 0 0;
			text-align:center;
			
}
.paquet01 .main-image p{
　　　　　　font-size:120%;
			font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
			line-height: 130%;
			letter-spacing:10%;
			padding: 0 5% 1em 5%;
}
/*----paquet02--------------------*/
.paquet02 {
	padding: 0 20px 15px 20px;
}
.paquet02 .main-title {
		width: 100%;
		float:none;
		padding:0;
	}
.paquet02 .main-title .pch {
			
			width:100%;
			padding:0 0 0 0;
			text-align:center;
}

.paquet02 .main-title .main-smpimage {
			display:block;
			width:100%;
			padding:0 0 0 0;
}
.paquet02 .main-title p {
	　　　　font-size:120%;
			font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
			line-height: 130%;
			letter-spacing:10%;
			padding: 0 5% 1em 5%;
}	
.paquet02 .main-title p br {
				
}
.paquet02 .main-image {
		 display:none;
}
.smph {
	display:block;
	width: 100%;
	margin-bottom:15px;
}


/*----カラーバリエーション--------------------*/
#main-in .color_box { width:85%; margin:0 auto;}
#main-in .color_box div {
		float:none;
		width: auto;
		margin:0;
		height: auto;
		position:relative;
}
/*ニューマーク付けるなら#main-in .color_box div .new {
	position : absolute;
	top: 36px;
	left: 6px
}*/
#main-in .step img.color_box {
			float:left;
			margin:0 20px 0 0;
}
#main-in .color { float:left; width:50%;}

#main-in .color_box ul { padding-top:20px;float:left; width:45%; padding-left:10px;}
.box { clear:both; padding-top:30px;}
.name { width:100%;}










}