@charset "UTF-8";
/* CSS Document */
body{
	background-color:rgba(177,92,93,1.00);
    background-image:url("../img/bk_w.png");
    background-position: center top;
	background-repeat:repeat;
	line-height:200%;
	text-align:center;
	}
 img {
	 width:100%;
	 display:block;
	 }	
.br, .pc { display:none; }	
.sp {}	


/* -------------------------------------------
	 rayout
---------------------------------------------*/
.rayout {
	width:90%;
	margin : 4em auto 0;
	}

/* -------------------------------------------
	 header
---------------------------------------------*/
#top_page header {
	 background-color:#000;
	 color:#fff;
	 line-height:150%;
	 }
#top_page header div {
	padding-bottom:2em;
	margin-bottom:1.5em !important;
	}
#top_page header img {
	margin:0 auto 2em;
	}	
#top_page header div h1,
#top_page header div h2  {
	font-size:1.15em;
	line-height:1.6em;
	letter-spacing:0.1em;
	margin-bottom:0.25em;
	}
#top_page header div h2  { 
	margin-bottom:0.75em;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}
 header {

	line-height:150%;
	padding: 3em 0 0;
	margin-bottom: 0em;
	}
header div img {
	width: 90%;
    margin: 0 auto;
	}

/* -------------------------------------------
	 main
---------------------------------------------*/
main {
	color:#FFF;
	text-align:left;
	}
/* dialogue-----------------------------------*/
main .dialogue div {
	margin-bottom:4em;
	}
main .dialogue div img {
	margin-bottom:1.75em;
	}	
main .dialogue div ul {
	margin-bottom:1.5em;
	}	
main .dialogue div li {
	padding:0.5em 0;
	margin:0.5em 0;
	}
main .dialogue div li:before {
	content:"：";
	display:inline-block;
	width:1em;
	color:#888;
	}		
main .dialogue div li.ds {
	color:#fff;
	}
main .dialogue div li.ds:before {
	content:"DS";
	display:inline-block;
	width:2.15em;
	color: #728D5A;
	}	
main .dialogue div li img {
	margin:0 auto 1em;
	}	
main .dialogue div li.float_left:before,
main .dialogue div li.float_right:before {
	content:inherit;
	width:inherit;
	display:none;
	}
main .dialogue div h5 {
	color:#FFF;
	margin-top:3em;
	font-size:0.8em;
	}
/*item
---------------------------------------------*/
.rayout{
        background-color: rgba(177,92,93,1.00);
        padding:3em 0 1.5em;
    }   
.item {					
	margin:0 auto 8em;
    width: 90%;
	}
.item h4 {
	font-weight:bold;
	font-size:1.2em;
	line-height:150%;
	margin-bottom:0.5em;
    font-feature-settings: "palt" 1;
	}	
.item .photo {
	margin-bottom:1.5em
	}
.item .text .img_thumbs {
   margin-bottom: 2em;
    }
.item .text .img_thumbs li {
	width:15%;
    float:left;
	cursor:pointer;
	margin:0.5em 0.8% 0;
	}

.item .text .img_thumbs li img {
	width:100%;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity:1.0;
	}
.item .text .img_thumbs li img:hover,		
.item .text .img_thumbs li img.pager-active {
	opacity:0.7;
	}
.item .button_shop {
    width: 100%;
    background-color: #894344;
    color: rgba(177,92,93,1.00);
    padding: 0.5em 0 0.5em;
    text-align: center;
    font-weight: bold;
    font-size: 1em;
    border-radius: 3px;
    margin-top: 1.5em;
    }



/* -------------------------------------------
	 footer
---------------------------------------------*/
footer {
	color:#fff;
	padding:0 0 2.5em;
	letter-spacing:0.05em;
	background-color: rgba(177,92,93,1.00);
    margin-top: 10em;
	}
footer h6 {
	padding:2.5em 0 0;
	}
footer span {
	font-size:1.125em;
	}
/* ==================================================
   footer - store_address
================================================== */
.store_address {
    margin: 4em auto 4em;
	padding-top: 3em;
}
.store_address,
.store_address h4,
.store_address h5 {
    text-align: center;
}
.store_address a {
    color:#FFF;
}
.store_address a:hover{
    color:#B0B0B0;
}
.store_address h4 {
    font-size:1em;
}
.store_address h5 {
    font-size:1em;
    margin-bottom: .25em
}
.store_address > div {
    font-size:0.75em;
    margin-bottom: 1.5em;
    line-height: 1.75;
}
.store_address > div.excerpt {
    border-bottom: 1px solid #eee;
	width: 90%;
    font-size:0.75em;
    padding-bottom:1.5em;
    margin: 0 auto 2em;
}
footer h6.copyright {
    text-align: center;
    font-size: 0.75em;
    line-height: 3em;
    padding-bottom: 5em;
}
footer h6.copyright span {
	font-size:1.125em;
	}
/*	pagetop------------------------------------*/
footer #pagetop {
	background-color:#111;
	padding:1.5em 0;
	display:block;
	-webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
	}
footer #pagetop:hover {
	cursor:pointer;
	background-color:#222;
	}
footer #pagetop img {
	width:2em;
	margin:0 auto;
	}
footer #pagetop:hover img {
	opacity:0.5;
	}
	

/* -------------------------------------------
	 top_page
---------------------------------------------*/
body#top_page,
#top_page header,
#top_page footer {
	background-color:#4E3168;
	color:#ddd;
	}
body#top_page header div {
	padding-bottom:0;
	margin-bottom:3.5em !important;
	}
body#top_page header div h1  {
	font-size:1.3em;
	margin-bottom:0.75em;
}
body#top_page header div h2  { 
	margin-bottom:0em;
	}
body#top_page .button {
	text-align:center;
	}
body#top_page .button	a {
	font-size:0.9em;
	background-color:#666;
	width:8em;
	line-height:1em;
	margin:0 1em;
	padding:0.5em 0 0.3em;
	display:inline-block;
	}
#story ul li {
	width:100%;
	padding:0 0 5% 0;
	}
/* ==================================================
    SCROLL UP
================================================== */
.scroll-up {
    position: fixed;
    z-index:100;
	right: 1.25em; 
	top:  1.25em;
    opacity: 0;
    transition: all 0.4s ease-in-out 0s;
    }
.scroll-up a {
    width:30px;
	padding: 8px;
	line-height: 1;
	display: inline-block;
	color:#fff;
	background-color:rgba(0,0,0,0.2);
	-webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;     
    }
.scroll-up a:hover{
	background-color:rgba(0,0,0,0.5);
    }



/*--------------------------------------------
  768px
---------------------------------------------*/
@media screen and (min-width : 768px) {
.br, .pc { display:block; }	
.sp { display:none; }	
.float_left {
	float:left;
	}
.float_right {
	float:right;
	}				
main .dialogue div li.float_left {
	width:42%;
	margin-right:2em;
	}
main .dialogue div li.float_right {
	width:42%;
	margin-left:2em;
	}		
main .dialogue div li.yoko {
	width:60%;
	}	
body#top_page .rayout,
body#top_page header img {
	width:100%;
	}	
body#top_page header div h1  {
	font-size:1.5em;
	}
}

/*--------------------------------------------
  1024px
---------------------------------------------*/
@media screen and (min-width : 1024px) {
/* -------------------------------------------
	 rayout
---------------------------------------------*/
html { font-size : 100%; }
.rayout,
header img  {
	max-width:1020px;
	}
body#top_page .rayout,
body#top_page header img {
	max-width:none;
	}
header div img {
	width: 100%;
	max-width: 450px;
    margin: 0 auto;
	}
/* item
------------------------*/
    .rayout{
        background-color: rgba(177,92,93,1.00);
        padding:3em 3em 1.5em;
    }
.item {
    display: flex;
    justify-content: space-between;
    align-items:center;
    flex-wrap: wrap;
    margin-bottom: 6em;
    width: 100%;
    }
.item h4 {
	font-size:1.1em;
	margin-bottom:0.8em;
    font-feature-settings: "palt" 1;
	}
.item .button_shop {
    width: 120px;
    background-color: #894344;
    color: #FFF;
    padding: 0.15em 0 0.1em;
    text-align: center;
    font-weight: bold;
    font-size: 0.75em;
    border-radius: 3px;
    margin-top: 1.5em;
    }
.item .photo {
	width: 52%;
    align-items: center;
	}
.item .photo img {
    width: 100%;
    margin: 0 auto;
    }
.item .text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	width:43%;
    margin-top: 0em;
    font-size: 0.95em;
	}
.item .text .img_thumbs {
    flex-wrap: wrap;
    justify-content:center;
    order: 2;
	margin:1.8em 1.6% 0.5em 0;
	}
.item .text .img_thumbs li { 
    float: left;
	width:15%;
	margin:0.5em 1.6% 0 0;
	}
    .item .text .detail {
    order: 1;
    }
    .view {
    border-top: 1.5px #FFF solid;
    padding-top: 1em;
    }
#introduction .intro_text br {
	display:block;
	}
#story {
	margin-bottom:5em;
	}
#story ul li {
	width:49%;
	float:left;
	padding:0 2% 0 0;
	}
main .profile img {
	width:6em;
	margin-right: 1em;
	display: inline;
	float:left;
	}	
}