@charset "utf-8";

/*-------------------
base.css
-------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0; padding: 0; border: 0; outline: 0;}
img { margin: 0; padding: 0; border: 0; line-height:0; font-size:0; vertical-align:top;}
html { width:100%; height: 100%; overflow-x:hidden;}
ul, li { list-style: none;}
p, th, td, dd { font-style:normal; font-weight:0; word-break: break-all;}
dd { word-break: break-all;}
a { margin: 0; padding: 0; border: 0;}
table { border-collapse: collapse; border-spacing: 0;}
 
/*layout style*/
body { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background-color:#ffffff;}
.pc{ display: block; }
.sp{ display: none; }

/*-------------------
HEADER
-------------------*/
.sopraStartHeader{overflow: hidden;}
.sopraStartHeader h1{float: left; width: 200px; margin: 15px 0 15px 0;}
.sopraStartHeader ul{float: right; margin: 0 40px 5px 0;}
.sopraStartHeader ul li{}
.sopraStartHeader ul li a{}
.sopraStartHeader ul li a img{}





/*-------------------
共通
-------------------*/

h4{
	/*background-color: #feb6a2;*/
}

h4 img{
	width: 1000px;
	margin: 0 auto;
}

/*-------------------
CONTENTS
-------------------*/

#wrap { 
	width:100%; 
	text-align:center; 
	overflow:hidden; 
}


.main { 
	background: url(../img/main_bk.jpg) no-repeat center, linear-gradient(90deg, #fff1ed 50%, #e7d9d5 50%);
}

.main img{ 
	width: 1000px;
	margin: 0 auto;
}

/*.contents { background: url(../img/contents_bk.jpg) no-repeat center;}*/

div.intro{
	background: #fceae5;
	padding:60px 0 60px 0;
}
div.intro .contents{
	width: 1000px;
	margin: 0 auto;
}

div.intro .contents img{ width: 100%;}

div.intro .contents dt{
	width: 1000px;
}
div.intro .contents dd{
}

.whatis{
	background: #FFFFFF;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 80px;
}

.whatis img{ 
	width: 1000px;
	margin: auto;
}

.whatis dt{
	width: 1000px;
	margin: 0 auto 55px auto;
	padding: 68px 0 0 0;
	position: relative;
}
.whatis dt::before{
	content: '';
	display: inline-block;
	position: absolute;	top:-60px; right:180px;
	width:151px;
	height:127px;
	background-image: url(../img/whatis_baloon.png);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;
}

.whatis dd{
	margin: 0 0 50px 0;
}


/* FAQ */

.faq_sec p.ttl{
	width: 1000px;
	margin: 0 auto 55px auto;
	padding: 68px 0 0 0;
	position: relative;
}
.faq_sec p.ttl::before{
	content: '';
	display: inline-block;
	position: absolute;	top:-60px; right:180px;
	width:151px;
	height:127px;
	background-image: url(../img/faq_baloon.png);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;
}

.accordionbox{
	width: 1000px;
	background:#fff;
	margin: 10px auto 40px;
	padding: 1px;
}
.accordionlist dt{
    display:block;
    background: #fff;
    padding: 20px 0 -1px 5px;

}
.accordionlist dt:first-child{
    border-top: none !important;
}
.accordionlist dt .title{
	width: 100%;
    padding-left: 10px;
	    padding-top: 25px;
	float: left;
		color: #313131; 
	border-top: 1px solid #313131;
}
.accordionlist dd{
	width: 980px;
    display:none;
	background: #fff;
	padding:15px 0 10px 20px;
  border-top: dashed 1px #313131;
	color: #313131;
	font-size: 13px;
	letter-spacing: 0.6px;
	line-height: 22px;
}
.accordion_icon,
.accordion_icon span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.accordion_icon {
	position: relative;
	width: 30px;
	height: 30px;
	float: right;
	margin-right: 5px;
	padding-bottom: 10px;
	top: -15px;
}
.accordion_icon span {
	position: absolute;
    left: 6px;
    width: 50%;
	height: 2px;
    background-color: #313131;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1) {
    top: 5px;
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
    top: 5px;
	transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}
/*＋、－切り替え*/
.accordion_icon.active span:nth-of-type(1) {
	display:none;
}
.accordion_icon.active span:nth-of-type(2) {
	top: 5px;
	transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}




.entry{
	width: 100%;
	background: url(../img/entry_bg.jpg) no-repeat top center;
	background-size: cover;
}

.entry p{
	margin: 0 auto;
	width: 1000px;
}

.entry .btn{
	width: 516px;
	margin: 0 auto;
}
.entry .btn:nth-of-type(1){
	margin-bottom: 19px;
}
.entry .btn a{
	display: inline-block;
}
.entry .btn a:hover{
	opacity: 0.8;
}
.entry .btn img{ width: 100%;}






/* ------------------------------------------------------------------------------------
　　　▼ 店舗マップ
---------------------------------------------------------------------------------------*/


#shop{
	
    width: 100%;
    background-color: #fff;
    overflow: hidden;
}

#shop .inr{
	width: 1000px;
    margin: 60px auto;
    padding-left: 20px;
    background: url(../img/cnt01_11.png)no-repeat top center;
    overflow: hidden;
}

#address{
	float: left;
    padding: 0 0 0 10px;
    width: 404px;
}

#address ul{
	padding: 5px 0 15px 0px;
	overflow:hidden;
}

.addleft{
	text-align: left;
	width: 240px;
	color: #666;
	font-size: 12px;
    text-align: left;
	line-height: 1.6;
}

.addleft p{
	padding: 5px 0 0 0;
}

.addleft p span{
	font-size: 10px;
}

.addleft p img{
	padding-bottom: 10px;
}

.addcenter{
	width: 128px;
	margin-top: 6px;
}

.addright{
	padding: 30px 0 0 10px;
	width: 23px;
}

#shop ul{
	padding: 22px 0 8px 0px;
	width: 415px;
	overflow:hidden;
}
/*
#shop ul:nth-of-type(4){
	padding: 30px 0 8px 0px;
}
#shop ul:nth-of-type(5){
	padding: 30px 0 8px 0px;
}
*/
#shop ul li{
	float: left;
}

#map{
	width: 586px;
	float: left;
    padding-bottom: 20px;
}

.kohoku_caution{
	text-align: right;
	padding: 20px 0;
}






@media screen and (max-width : 768px){

.pc{ display: none; }
.sp{ display: block; }

/*-------------------
共通
-------------------*/

.sopraStartHeader{overflow: hidden;}
.sopraStartHeader h1{float: left; width: 45vw; margin: 5vw 0 4vw 0;}
.sopraStartHeader ul{float: right; margin: 0 4vw 2vw 0;}
.sopraStartHeader ul li{}
.sopraStartHeader ul li a{}
.sopraStartHeader ul li a img{width: 18vw;}

/*-------------------
CONTENTS
-------------------*/

#wrap {
	/*background:none;*/
	}

#wrap .sp {
	width:100%;
}

.main img{ width: 100%;}

div.intro{
	padding:4vw 0 15vw 0;
}
div.intro .contents{
	width: 90%;
}
div.intro .contents img{ width: 100%;}

div.intro .contents dt{
	width: 100%;
}
	
.whatis{
	background: #FFFFFF;
	width: 100%;
	margin: 0 auto;
}

.whatis img{ 
	width: 80%;
}

.whatis dt{
	width: 100%;
	margin: 5vw 0 8vw 0;
	padding: 6vw 0 0 0;
}

.whatis dd{
	width: 90%;
	margin: auto;
	margin-bottom: 4%;
}	

.whatis dt::before{
	content: '';
	display: inline-block;
	position: absolute;	top:-15vw; right:8vw;
	width:26vw;
	height:22vw;
	background-image: url(../img/whatis_baloon.png);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;
}

.whatis dd{
	margin: 0 auto 5vw auto;
}

.faq_sec p.ttl{
	width: 100%;
	margin: 5vw 0 8vw 0;
	padding: 6vw 0 0 0;
}
.faq_sec p.ttl::before{
	content: '';
	display: inline-block;
	position: absolute;	top:-15vw; right:8vw;
	width:26vw;
	height:22vw;
	background-image: url(../img/faq_baloon.png);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;
}


.entry{
	width: 100%;
	background: url(../img/entry_bg_sp.jpg)no-repeat top center;
	background-size: cover;
}
	
.entry p{
	width: 80%;
}

.entry .btn{
	width: 80%;
}
.entry .btn:nth-of-type(1){
	margin-bottom: 2vw;
}


#shop{
	background: #feb6a2;
}
#shop .inr{
	background: none;
	margin: 0 auto;
	padding-left: 0px;
	width: 100%;
}

#shop ul{
	padding: 0px;
}

#shop ul li{
	float: none;
	border-bottom: 1px solid #d9dede;
}

#shop ul li img{
	width: 100%;
}

}