@charset "UTF-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}

html{
overflow-y:scroll;
height:100%;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
-webkit-text-size-adjust: 100%;
}

body {
color:#333;
text-align: center;
font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Arial,Helvetica,sans-serif;
font-size:88%;
line-height:135%;
}

div article{
text-align:center;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

input, textarea{
margin: 0;
padding: 0;
}

ol, ul{
list-style:none;
}

table{
border-collapse: collapse; 
border-spacing:0;
height: auto;
max-width: 100%;
width: auto;
}

th,td{
height: auto;
max-width: 100%;
width: auto;
}

caption, th{
text-align: left;
}

a:focus {
outline:none;
}

.clearfix:after {
content: "."; 
display: block;
clear: both;
height: 0;
visibility: hidden;
}

.clearfix {
min-height: 1px;
}

* html .clearfix {
height: 1px;
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}

.sp_br:before {
content: "\A" ;
white-space: pre ;
}

img {
height: auto;
max-width: 100%;
vertical-align: bottom;
width: auto;
}

h3 {
margin-bottom: 5px;
padding:10px 0;
color:#FFF;
background-color: #c2da69;
font-size:190%;
line-height: 1;
font-weight: bold;
	font-family: 'Elsie', cursive;
}

h4 {
margin-bottom: 15px;
color:#7E9B13;
font-size: 100%;
line-height: 1;
letter-spacing:0.1em;
font-weight:normal;
}
h5 {
margin-bottom: 3px;
font-size:105%;
line-height: 1;
font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
font-weight: bold;
}

.pc {
display:none;
}

#main {
width:100%;
	top:55px;
	margin-bottom: 50px;
}


#greeting {
width:90%;
margin:0 auto;
padding-top: 30px;
}

#greeting p.copy {
font-size:130%;
margin-bottom:10px;
margin-bottom:25px;
	line-height: 140%;
	color:#553F48;
}

#greeting div.text {
line-height: 160%;
font-size:90%;
}


#about {
width:100%;
margin:0 auto;
padding: 20px 0;
}

#about p {
margin-top: 35px;
}
#about p span {
font-size: 90%;
}
#about #box1,#about #box2,#about #box3{
font-size:90%;
margin-bottom:15px;
}
#about #box1 .text{
margin:10px auto;
width: 90%;
}

#about #box1 .text .large{
font-size:115%;
margin:10px 0;
	color:#553F48;
}

#about #box1 .sign{
	margin: 15px auto 0 auto;
	line-height: 140%;
}

#about #box1 .sign .small{
	font-size: 85%;
}

#about #box1 .sign .large{
	font-size: 100%;
color:#333;
}

#about #box1 img,#about #box2 img,#about #box3 img{
margin-bottom:10px;
}

#about #box1,#about #box2{
border-bottom:#e6bbc9 1px dotted;
padding-bottom:12px;
}

#about #box2 table{
margin:0 auto;
border-spacing: 5px;
border-collapse: separate;
}

#about #box2 table th{
font-size:90%;
font-weight:bold;
text-align:right;
padding:5px;
border-right:#eb6d82 2px solid;
}
#about #box2 table td{
font-size:90%;
text-align:left;
padding:5px;
}
#about #box3 #gmap{
width:80%;
margin:0 auto;
}

#services {
width:100%;
margin:0 auto;
padding-top: 30px;
}
#services  ul {
overflow: hidden;
padding: 0;
text-align:center;
	width:90%;
	margin: 0 auto;
}

#services li {
width: 100%;
margin-bottom:15px;
}
#services li {
min-height: 1px;
}
#services li:after {
content: "."; 
display: block;
clear: both;
height: 0;
visibility: hidden;
}

* html #services li {
height: 1px;
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}

#services .service{
font-size: 100%;
color:#eb6d82;
letter-spacing:0.1em;
font-weight:bold;
text-align:left;
}
#services .thumbnail{
width:22%;
height:22%;
float:left;
}

#services .thumbnail img{
border-radius: 50%;
}

#services li div{
float:right;
width:75%;
}


#services .detail {
font-size:90%;
text-align:justify;
}

#products {
width:100%;
margin:0 auto;
padding-top: 30px;
text-align:center;
}

#products ul {
margin:0 auto;
	width: 90%;
}
#products ul li {
margin-bottom:10px;
}
#products .thumbnail{
width:22%;
height:22%;
float:left;
}

#products .thumbnail img{
margin-bottom:8px;
border-radius: 10%;
}

#products li div.sp_product{
float:right;
width:75%;
}

#products .product_name{
color:#eb6d82;
font-weight:bold;
text-align:left;
}

#products .detail{
font-size:90%;
text-align:justify;
}

#products .detail .large{
	font-size: 115%;
	font-weight:bolder;
font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";}

#contact {
width:100%;
margin:0 auto;
padding-top: 30px;
}
#contact section {
}

#contact table{
margin:0 auto 15px auto;
width:90%;
border-top:#666666 1px dotted;
border-left:#666666 1px dotted;
border-right:#666666 1px dotted;
}

#contact table th{
text-align:center;
width:25%;
}

#contact table td{
text-align:left;
width:75%
}


#contact table th,#contact table td{
padding:10px 7px;
border-bottom:#666666 1px dotted;
font-size:86%;
vertical-align:middle;
}


#contact table td .answer{
background:#EDEDED none repeat scroll 0 0;
border:#CCC 1px solid;
padding: 5px 0;
height: auto;
max-width: 100%;
width:90%;
}

#contact table td .answer01{
width:90%;
}

#contact table td .answer02{
width:40%;
}

#contact table td .answer03{
width:25%;
}

#contact .submit {
　　-webkit-appearance: none;
width: 100%;
margin:0px;
}
#contact .submit input{
background-color: #eb6d82;
font-weight:bold;
color:#fff;
border:0;
padding:10px;
}
#contact .submit input:hover{
background-color: #ccc;
color:#eb6d82;
}

#privacy {
width:90%;
margin:0 auto;
padding: 30px 0;
}

#privacy div {
font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
text-align:justify;
}


#footer {
padding: 20px;
background-color: #666;
text-align: center;
font-size: 	96%;
color: #fff;
margin-top:20px;
}

#footer .banner {
	margin-top:10px;
}

#footer .banner img.left {
	width:48%;
	text-align:left;

}

#footer .banner img.right {
	width:48%;
	text-align:right;
}




.paradeiser {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 30px;
background: rgba(255, 255, 255, 0.95);
-webkit-transition: top 0.4s ease;
transition: top 0.4s ease;
-webkit-backdrop-filter: blur(10px) saturate(100%);
backdrop-filter: blur(10px) saturate(100%);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding:5px;
}
.paradeiser.headroom--pinned {
top: 0;
}
.paradeiser.headroom--unpinned {
top: -40px;
}
.paradeiser a, .paradeiser .paradeiser_dropdown {
position: relative;
z-index: 5;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin: 0;
padding: 0;
color: #9b9b9b;
text-align: center;
text-decoration: none;
font-weight: 400;
font-size: 10px;
font-family: -apple-system, -apple-system-body, "Roboto", "Helvetica Neue", "Segoe UI", "Arial", sans-serif;
cursor: pointer;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 5;
-webkit-flex-grow: 5;
-ms-flex-positive: 5;
flex-grow: 5;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}

.paradeiser a.active, .paradeiser a:hover, .paradeiser .paradeiser_dropdown.active, .paradeiser .paradeiser_dropdown:hover {
}
.paradeiser span {
font-size: 13px;
}.paradeiser span.large {
font-size: 20px;
}

.paradeiser span.paradeiser_dropdown {
margin-right: 10px;
text-align:right;
}
.paradeiser span.paradeiser_dropdown a {
}
.paradeiser .paradeiser_logo {
max-height:30px;
/*height:100%;*/
}

.paradeiser_container{
width:100%;
}

.left{
float:left;
}
.right{
float:right;
}
.paradeiser ul {
position: fixed;
top: 40px;
bottom: 0;
left: 0;
z-index: 998;
visibility: hidden;
margin: 0;
padding: 0;
width: 100%;
height: auto;
text-align: center;
opacity: 0;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
pointer-events: none;
}
.paradeiser ul:target, .paradeiser ul.open {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
pointer-events: auto;
}
.paradeiser ul li {
display: inline-block;
width: 100%;
background: #666;
text-align: center;
}
.paradeiser ul li a {
display: inline-block;
padding: 10px 0;
width: 100%;
color: #fff;
font-size: 110%;
}
.paradeiser ul li a:hover, .paradeiser ul li span:hover {
background: #c2da69;
color: #fff;
}
.paradeiser ul li:last-child {
height: 100%;
background: transparent;
}
.paradeiser ul li:last-child a {
display: block;
height: 100%;
backdrop-filter: blur(10px) saturate(100%);
}

.catalog{
    margin: 20px auto 0 auto;
}

.catalog a{
    color: #fff;
    background-color:  #D63538;
    padding:6px 10px;
    text-decoration: none;
}

.catalog a:hover{
    color: #fff;
    background-color:  #A60306;
}