@charset "utf-8";
/* CSS Document */
/*共通*/
#topBtn {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 15px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: transparent;
  color: white;
  cursor: pointer;
  padding: 0px 0px 0px 0px;
  border-radius: 4px;
  width: 30px; /*imgの大きさ*/
  height: auto;
}
#topBtn:hover {
  /*		background-color: #F5FBFE;
*/ opacity: 0.8
}
.scrolltop{
	color:red;
}
/*共通/end*/

.headerImg {
    width: 80%;
    max-width: 900px;
    min-width: 769px;
    margin: 0 auto 100px;
}
.headerImg img {
    max-width: 100%;
    min-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
}
.info {
    width: 80%;
    max-width: 900px;
    min-width: 769px;
    margin: 0 auto 80px;
    display: flex;
    justify-content: space-between;
}
.shopInfo {
    width: 47%;
    padding: 0 0 ;
}
.info h1 {
    font-size: 1.3em;
    font-weight: 600;
    line-height: 2;
    text-align: center;
    letter-spacing: 0.2em;
}
.info .tel {
    font-size: 1.3em;
    line-height: 2.5;
    font-family: 'Sawarabi Gothic', sans-serif;
}
.info p {
    text-align: center;
    line-height: 2.5;
    letter-spacing: 0.1em;
}
.info .blogURL {
    text-decoration: none;
    color: #0C0C0C;
}
.info .blogURL:hover {
    text-decoration: underline;
    opacity: .7;
}
.info .gmap {
    width: 40%;
    height: 500px;
}
.txtSyle1 {
    width: 30em;
    text-indent: -1em;
    padding-left: 2em;
    line-height: 2;
    margin: 0 auto 100px;
}
.yoyakuBT{
	color:#377CA3;
	font-weight: bold;
}
.yoyakuBT:hover{
	opacity: .5;
}
.blogBT-top {
    color: #0C0C0C;
    font-size: 0.9em;
    text-decoration: none;
    border: 1px solid gray;
    border-radius: 0.3em;
    padding: 0.5em 0.5em 0.5em;
	margin: 10px auto 0;
	display: table;
}
.blogBT-top:hover {
    background: #C7C7C7;
    color: white;
    border: 1px solid #E3E3E3;
	text-decoration: none;
}
footer {

}

/*other page*/
.wrap {
    width: 80%;
    max-width: 900px;
    min-width: 769px;
    margin: 0 auto 80px;
}
.wrap h1 {
    font-size: 1.3em;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.2em;
    margin: 30px auto 80px;
}
.wrap img {
    display: block;
    margin: 0 auto 50px;
}
.pageImg1 {
    width: 100%;
    height: auto;
    margin-bottom: 100px;
}
.pageImg1 img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center left;
}
.pageImg2 {
    width: 50%;
    height: auto;
    margin: 0 auto 100px;
}
.pageImg2 img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    margin: 0 auto 10px;
}
.pageImg2 figcaption{
	font-size: 0.9em;
	line-height: 1.6;
	margin-left: 1em;
}
.pageImg3 {
    width: 70%;
    height: auto;
    margin: 0 auto 100px;
}
.pageImg3 img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.priceBox {
	width: 750px;
    margin: 0 auto 50px;
}
.giftTtl {
    font-size: 1.1em;
    margin-bottom: 20px;
}
.giftTxt{
    margin: 0 0 50px 2.2em;
	line-height: 2;
}
.giftTxt img{
	max-width: 400px;
	width: 100%;
	height: auto;
	margin: 60px auto;
	display: block;
}
.price{
	display: flex;
	justify-content: space-between;
	padding-right: 50px;
}
.priceBox ul {
    width: 340px;
    margin: 0 auto;
}
.priceBox li {
    line-height: 2.5;
    letter-spacing: 0.2em;
}
.priceBox li span {
    margin-left: 50px;
    letter-spacing: 0.1em;
}
.priceBox .come{
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 10px 0 0 1rem;
}
.price .price-img{
	width: 400px;
	height: auto;
	margin: auto 0 auto 30px;
}
.txtSyle2 {
    width: 750px;
    line-height: 2;
    letter-spacing: 0.1em;
    margin: 0 auto 50px;
}
.txtSyle3 {
    width: 600px;
    line-height: 2;
    letter-spacing: 0.1em;
    margin: 0 auto 100px;
}
.txtSyle4 {
    width: 520px;
    line-height: 2.5;
    letter-spacing: 0.1em;
    margin: 0 auto 100px;
}
.txtSyle4 span {
    font-size: 0.9em;
}
.txtSyle5 {
    width: 530px;
    line-height: 2;
    letter-spacing: 0.1em;
    margin: 0 auto 2em;
}

.txtSyle6 {
	width: 530px;
	line-height: 2;
	letter-spacing: 0.1em;
	margin: 0 auto 3em;
	padding-left: 3.5em;
	background-image: url(../img/note.png);
	background-repeat: no-repeat;
	background-position: left 10px;
	background-size: 40px auto;
}
.blogBT {
    color: #0C0C0C;
    font-size: 0.9em;
    text-decoration: none;
    border: 1px solid gray;
    border-radius: 0.3em;
    padding: 0.5em 0.5em 0.5em;
	margin: 0 auto 100px;
	display: table;
}
.blogBT:hover {
    background: #C7C7C7;
    color: white;
    border: 1px solid #E3E3E3;
}
.kome{
    width: 600px;
    line-height: 2;
    letter-spacing: 0.1em;
    margin: 0 auto 1em;
	text-indent: -1em;
	padding-left:1em;
}

@media screen and (max-width:768px) {
    .headerImg {
        width: 90%;
        max-width: auto;
        min-width: auto;
        margin: 0 auto 80px;
    }
    .info {
        width: 90%;
        max-width: auto;
        min-width: auto;
        margin: 0 auto 20px;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
    }
    .shopInfo {
        width: 100%;
        padding: 1.5em 0;
    }
    .info h1 {
        font-size: 1.3em;
        font-weight: 600;
        line-height: 2;
        text-align: center;
        letter-spacing: 0.2em;
    }
    .info .tel {
        font-size: 1.3em;
        line-height: 2.5;
        font-family: 'Sawarabi Gothic', sans-serif;
    }
    .info p {
        text-align: center;
        line-height: 2.5;
        letter-spacing: 0.1em;
    }
    .info .gmap {
        width: 80%;
        height: 400px;
        margin: 50px auto;
    }
    /*other page*/
    .wrap {
        width: 90%;
        max-width: auto;
        min-width: auto;
        margin: 0 auto 80px;
    }
    .pageImg1 {
        width: 100%;
        height: auto;
        margin-bottom: 100px;
    }
    .pageImg1 img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        object-position: center center;
    }
    .pageImg2 {
        width: 60%;
        margin: 0 auto 100px;
    }
    .pageImg2 img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    .pageImg3 {
        width: 70%;
        height: auto;
        margin: 0 auto 100px;
    }
    .pageImg3 img {
        width: 100%;
        height: 280px;
        object-fit: cover;
    }
.priceBox {
	width: 85%;
    margin: 0 auto 50px;
}
.price{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding-right: 0;
}
    .txtSyle2 {
        width: 80%;
        line-height: 2;
        letter-spacing: 0.1em;
        margin: 0 auto 50px;
    }
    .txtSyle3 {
        width: 90%;
        line-height: 2;
        letter-spacing: 0.1em;
        margin: 0 auto 100px;
    }
	.price .price-img{
	width: 400px;
	height: auto;
	margin: 40px 0 auto 30px;
}
.kome{
    width: 90%;
    line-height: 2;
    letter-spacing: 0.1em;
    margin: 0 auto 1em;
	text-indent: -1em;
	padding-left:1em;
}
}
@media screen and (max-width:480px) {
    .headerImg {
        width: 90%;
        max-width: 90%;
        min-width: 90%;
        margin: 0px auto 60px;
    }
    .headerImg img {
        max-width: 100%;
        min-width: 100%;
        height: 70px;
        object-fit: cover;
        object-position: center center;
    }
    .info {
        width: 98%;
        max-width: auto;
        min-width: auto;
        margin: 0 auto 20px;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-self: center;
    }
    .shopInfo {
        width: 100%;
        margin: 0 auto 0;
        padding: 1.5em 0;
    }
    .info h1 {
        font-size: 1.3em;
        font-weight: 600;
        line-height: 2;
        text-align: center;
        letter-spacing: 0.2em;
    }
    .info .tel {
        font-size: 1.3em;
        line-height: 2.5;
        font-family: 'Sawarabi Gothic', sans-serif;
    }
    .info p {
        text-align: center;
        line-height: 2.2;
        letter-spacing: 0.1em;
    }
    .shopInfo p span {
        display: block;
        line-height: 2;
		margin-bottom: -2.2em;
    }
    .info .gmap {
        width: 100%;
        height: 300px;
        margin: 40px auto 30px;
    }
    .txtSyle1 {
        width: 90%;
        text-indent: -1em;
        padding-left: 1em;
        line-height: 1.8;
        margin: 0 auto 60px;
    }
    /*other page*/
    .wrap {
        width: 90%;
        max-width: auto;
        min-width: auto;
        margin: 0 auto 80px;
    }
    .wrap h1 {
        font-size: 1.25em;
        font-weight: 600;
        text-align: center;
        letter-spacing: 0.2em;
        margin-bottom: 80px;
    }
    .wrap img {
        display: block;
        width: 85%;
        height: auto;
        margin: 0 auto 50px;
    }
    .pageImg1 {
        width: 100%;
        height: auto;
        margin-bottom: 80px;
    }
    .pageImg1 img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        object-position: center center;
    }
    .pageImg2 {
        width: 80%;
        margin: 0 auto 80px;
    }
    .pageImg2 img {
        width: 100%;
        height: 150px;
        object-fit: cover;
    	margin: 0 auto 10px;
    }
	.pageImg2 figcaption{
		font-size: 0.9em;
		line-height: 1.5;
	}
    .pageImg3 {
        width: 90%;
        height: auto;
        margin: 0 auto 100px;
    }
    .pageImg3 img {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }
    .priceBox {
        width: 100%;
        margin: 0 auto 40px;
        padding-left: 0em;
    }
.price{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding-right: 0;
}
.price .price-img{
	width: 92%;
	height: auto;
	margin: 40px 0 60px 30px;
}
.giftTxt{
    margin: 0 0 20px 2.2em;
	line-height: 2;
}
.giftTxt img{
	max-width: 400px;
	width: 100%;
	height: auto;
	margin: 60px auto;
	display: block;
}
    .priceBox ul {
        width: auto;
        margin: 0 auto;
    }
    .priceBox li span {
        margin-left: 2em;
        letter-spacing: 0.1em;
    }
.priceBox .come{
	font-size: 0.85rem;
	line-height: 1.5;
	margin: 10px 0 30px 0rem;
}
    .price img {
        display: block;
        width: auto;
        height: 220px;;
        margin: 0 auto 50px;
    }
    .txtSyle2 {
        width: 100%;
        line-height: 2;
        letter-spacing: 0.1em;
        margin: 0 auto 50px;
    }
    .txtSyle3 {
        width: 95%;
        line-height: 2;
        letter-spacing: 0.1em;
        margin: 0 auto 50px;
    }
    .txtSyle4 {
        width: 100%;
        line-height: 1.5;
        letter-spacing: 0.1em;
        margin: 0 auto 100px;
    }
    .txtSyle4 span {
        font-size: 0.75em;
        line-height: 1.5;
        letter-spacing: 0em;
        display: block;
    }
    .txtSyle5 {
        width: 100%;
        line-height: 2;
        letter-spacing: 0.1em;
        margin: 0 auto 2em;
    }
.txtSyle6 {
	width: 100%;
	line-height: 2;
	letter-spacing: 0.1em;
	margin: 0 auto 3em;
	padding-left: 3.5em;
	background-image: url(../img/note.png);
	background-repeat: no-repeat;
	background-position: left 12px;
	background-size: 40px auto;
}
.kome{
    width: 95%;
    line-height: 2;
    letter-spacing: 0.1em;
    margin: 0 auto 1em;
	text-indent: -1em;
	padding-left:1em;
}
}