@charset "UTF-8";

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

1:COMMON
2:HEADER
3:MAIN
4:CONTENTS
5:FLOATING BANNER
6:FOOTER
------------------------------------------------------*/

/*------------------------------------------------------
1: COMMON
------------------------------------------------------*/
html {
background:#fff;
height:100%;
}
body {
font-family: "Sawarabi Mincho",serif;
background: #fff;
width:100%;
overflow: hidden;
margin: 0;
font-size: 18px;
line-height: 2.4em;
font-weight: normal;
color:#000;
}
a:hover,
a:hover img {
opacity: 0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha(opacity=80)";
transition-property: opacity;
transition-duration: 0.4s;
transition-timing-function: ease;
transition-delay: 0s;
}
@media only screen and (max-width:1080px){
body {
font-size: 16px;}
}
@media only screen and (max-width:480px){
body {
font-size: 14px;}
}

.gothic {
font-family: "Sawarabi Gothic",sans-serif; 
}
.cnt {
text-align: center;
}

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

@media only screen and (max-width: 480px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

.wrapper {
width: 1000px;
margin:0 auto;
padding: 100px 0;
}
@media only screen and (max-width:1080px){
.wrapper {
width: initial;
padding: 80px 40px;
margin:0 auto; }	
}
@media only screen and (max-width:480px){
.wrapper {
padding: 40px 20px;}  
}

.article {
line-height: 2.4em;
font-weight: normal;
}
@media only screen and (max-width:1080px){
.article {
line-height: 2.2em;}
}

.article02 {
line-height: 1.8em;
font-weight: normal;
font-size: 14px;
}
@media screen and (max-width: 480px){
.article02 {
font-size: 12px;}
}

img {
width: 100%;
height: auto;
}
/*------------------------------------------------------
2: HEADER
------------------------------------------------------*/
#header {
position: fixed;
z-index:20;
width: 100%;
background: #fee8ee;
text-align: center;
opacity: 0.9;
}

.logo {
margin:5px 0 32px 0;
display: inline-block;
}
@media screen and (max-width: 1080px){
.logo {
margin:10px 0 32px 0!important;}
}
@media screen and (max-width: 480px){
.logo {
margin:5px 0 22px 0!important;}
}

.logo img {
display:inline-block;
width: 198px;
height: auto;
}
@media screen and (max-width: 1080px){
.logo img {
width: 95%;}
}
@media screen and (max-width: 480px){
.logo img {
width: 75%;}
}
/*------------------------------------------------------
3:MAIN
------------------------------------------------------*/
#contents {
padding-top: 80px;
position: static;
}
@media screen and (max-width: 640px){
#contents {
padding-top: 80px;}
}
@media screen and (max-width: 480px){
#contents {
padding-top: 60px;}
}
.main img {
width: 100%;
height: auto;
display: inline-block;
}

/*------------------------------------------------------
4:CONTENTS
------------------------------------------------------*/
.bg_style_a {
background: #e2fcfb;
}
.bg_style_b {
background: #fffded;
}
.bg_style_c {
background: #fdeee8;
}
.bg_style_d {
background: #fff5f6;
}

.ttl {
text-align: center;
font-weight: normal;
font-size: 32px;
position: relative;
margin-bottom: 80px;
}
@media screen and (max-width: 1080px){
.ttl {
font-size: 24px;
line-height: 1.2em;}
}
@media screen and (max-width: 480px){
.ttl {
font-size: 20px;
line-height: 1.1em;
margin-bottom: 0;}
}

.ttl span {
display: block;
font-size: 12px;
margin-bottom: 10px;
letter-spacing: 3px;
}
@media screen and (max-width: 1080px){
.ttl span {
font-size: 10px;}
}
@media screen and (max-width: 480px){
.ttl span {
font-size: 9px;
margin-bottom: 60px;}
}

.ttl :after {
content:"";
width:41px;
height:21px;
background: url(../images/icon_comb@2x.png) bottom center no-repeat;
background-size:41px 21px;
background-position:0px 0px;
position:absolute;
bottom:-30px;
left:50%;
margin-left:-10px;
}
@media screen and (max-width: 480px){
.ttl :after {
content:"";
width:31px;
height:16px;
background-size:31px 16px;
bottom:-24px;}  
}

.columnL {
float: left;
width: 56%;
}
@media screen and (max-width: 480px){
.columnL {
width: 100%;
clear: both;
margin-bottom: 20px;}
}

.columnR {
float: right;
width: 40%;
}
@media screen and (max-width: 480px){
.columnR {
width: 100%;
clear: both;}
}
.proce_list_box {
box-sizing: border-box;
width: 100%;
border-bottom:1px solid #000; 
}
.price_list {
box-sizing: border-box;
border-top:1px solid #000;
font-size: 16px;
}
@media screen and (max-width: 1080px){
.price_list {
font-size: 14px;}
}

.price_list th {
box-sizing: border-box;
display: inline-block;
padding: 8px 0;
width: 78%;
vertical-align: middle;
line-height: 1.8em;
font-weight: normal;
}
@media screen and (max-width: 480px){
.price_list th {
width: 55%;}
}
.price_list td {
box-sizing: border-box;
display: inline-block;
padding: 8px 0;
width: 22%;
text-align: right;
vertical-align:middle;
}
@media screen and (max-width: 480px){
.price_list td {
width: 45%;}
}
.ggmap {
position: relative;
padding-bottom: 45%;
height: 0;
overflow: hidden;
}
@media screen and (max-width: 1080px){
.ggmap {
margin-bottom: 30px;}
}

@media screen and (max-width: 1080px){
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;}
}
iframe{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
.ttl_s {
font-size: 14px;
font-weight: normal;
}
@media screen and (max-width: 480px){
.ttl_s {
font-size: 12px;}
}

.shop_detail {
text-align: left;
font-size: 14px;
}
@media screen and (max-width: 480px){
.shop_detail {
font-size: 12px;}
}

.detail_list_A  {
margin-bottom: 20px;
}
@media screen and (max-width: 480px){
.detail_list_A  {
margin-bottom: 15px; }
}

.detail_list_B {
margin-bottom: 10px;
}
@media screen and (max-width: 480px){
.detail_list_B {
margin-bottom: 5px;}
}

.btn_area {
text-align: center;
font-size: 32px;
letter-spacing: 3px;
margin-top: 40px;
}
@media screen and (max-width: 1080px){
.btn_area {
font-size: 24px;}
}
@media screen and (max-width: 480px){
.btn_area {
font-size: 16px;}
}

.btn {
display: inline-block;
}
.btn a {
position: relative;
padding: 20px 50px 20px 90px;
background: #ec5c78;
color: #FFF;
text-decoration: none;
border-radius:5px;
display: block;
}
@media screen and (max-width: 1080px){
.btn a {
padding: 12px 30px 12px 70px;}
}

.btn a:after {
content:"";
width:27px;
height:27px;
background: url(../images/icon_phone@2x.png) top left no-repeat;
background-size:27px 27px;
background-position:0px 0px;
position:absolute;
top:50%;
left:50px;
margin-top:-11px;
}
@media screen and (max-width: 1080px){
.btn a:after {
width:20px;
height:20px;
background-size:20px 20px;
left:40px;}
}

/*------------------------------------------------------
5:FLOATING BANNER
------------------------------------------------------*/
/* フローティングバナーのラップ要素 */
#fixed_right_banner
{
/* 右端の上から20pxの位置に固定表示 */
position: fixed;
top: 119px;
right: 0;
z-index: 100;
}

/* 画像の共通設定 */
#fixed_right_banner > *
{
}

/* 2個目以降の画像の上部に余白を作る */
#fixed_right_banner > * ~ * { margin-top: 10px; }

/* リンク要素 */
#fixed_right_banner > a
{
/* ブロック要素に変更 */
display: block;

/* 透過変更をスムーズにする(任意) */
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
}

/* マウスオーバー時の表現 */
#fixed_right_banner > a:hover
{
/* 20%透過させる */
opacity: .8;
}

#fixed_right_banner img {
width: 54px;
height: 178px;
}
@media screen and (max-width: 480px){
#fixed_right_banner {
display: none;}
}
/*------------------------------------------------------
6:FOOTER
------------------------------------------------------*/
#footer {
padding:25px 0 25px 0;
background: #e5e5e5;
}
@media screen and (max-width: 480px) {
#footer {
padding:10px}
}
#copyright {
font-size: 9px;
text-align: center;
}