@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Antique&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sail&display=swap');

/* Reset box-model and set borders */
body {
margin: 0;
}
p, table, blockquote, address, pre, iframe, form, figure, dl, h1, h2, h3, h4, h5, h6, hr {
margin: 0;
}
*:focus {
outline: none!important;
}
button:focus {
outline: 0!important;
}
h1,h2, h3, h4, h5, h6 {
font-weight:normal;
}
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration:none;
color:#2c79b9;
transition: .3s;
}
hr{
opacity:1;
}
.scroll-top{
animation: topin 3s forwards;
}
@keyframes topin {
0% {opacity: 0}
100% {opacity: 1}
}
.scroll{
opacity: 0;
visibility: hidden;
transform: translatey(100px);
transition: all 1s;
}
.js-fade{
opacity: 1;
visibility: visible;
transform: translatex(0px);
}
.open-animation{
animation: fadein 1s forwards;
}
@keyframes fadein {
0% {opacity: 0.3}
100% {opacity: 1}
}

/*base*/
body{
background:#f8f4e6;
color:#473729;
font-family: 'Noto Sans JP', sans-serif;
-webkit-font-smoothing: antialiased;
font-weight: 400;
font-size:14px;
}
.container {
max-width: 500px;
}
.bg-navy{
background:#19374f;
}
.bg-beige{
background:#eeece2;
}
.text-navy{
color:#25435f;
}
.text-beige{
color:#a37f41;
}
.text-red{
color:#b64a5a;
}
.text-j{
font-family: 'Zen Antique', serif;
}
.text-c{
font-family: 'Sail', cursive;
}
.title-m{
font-size:15px
}
.title-l{
font-size:18px
}
.title-xl{
font-size:20px;
}
.size-s{
font-size:12px;
}
.size-m{
font-size:13px;
}
.space-s{
letter-spacing:-1px;
}
.space-xs{
letter-spacing:-3px;
}
.lh-l{
line-height:2;
}
.lh-m{
line-height:1.8;
}
.weight-500{
font-weight:500;
}
.text-justify{
text-align: justify;
}
@media (min-width:768px){
body{
font-size:15px;
}
.container {
max-width: 1060px;
}
.title-m{
font-size:18px
}
.title-xl{
font-size:27px;
}
.title-l{
font-size:19px
}
.lh-l{
line-height:2.2;
}
}

/*btn*/
.btn{
display:block;
padding:7px 0px;
border-radius:3px;
}
.btn-beige{
background:#d8a331;
max-width:250px;
font-size:14px;
}
.btn-beige:hover{
background:#b58202;
}
.btn-white{
background:#fff;
max-width:170px;
font-size:12px;
color:#99733c;
}
.btn-white:hover{
color:#25435f;
}
@media (min-width:768px){
.btn{
padding:10px 0px;
}
}

/*header*/
header{
border-top:solid 5px #492913;
}
header ul li small{
font-size:12px;
display:block;
font-weight:500;
}
header ul li a{
font-size:12px;
position: relative;
z-index:1;
display:block;
}
header ul li a.active:before{
content: '';
position: absolute;
display:block;
bottom: 17px;
left: 0;
width:100%;
height: 2px;
background:#d8a331;
}
header ul li a:after{
content: '';
position: absolute;
display:block;
bottom: 17px;
left: 0;
width:100%;
height: 2px;
background:#d8a331;
transition: all .3s;
transform: scale(0, 1);/*X方向0、Y方向1*/
transform-origin: left top;/*左上基点*/
}
header ul li a.active:after{
display:none;
font-size:30px;
}
header ul li a:hover:after{
transform: scale(1, 1);/*X方向にスケール拡大*/
}
.logo{
width:150px;
}
.top-image{
background:url(img/top_img.jpg) center center;
background-size:cover;
}
.top-copy{
width:280px;
}
@media (min-width:768px){
.logo{
width:197px;
}
a .logo:hover{
opacity:0.8;
}
header ul li a{
font-size:15px;
}
header ul li small{
font-size:10px;
padding-top:3px;
}
header ul li a.active:before{
background:#d8a331;
}
header ul li a:after{
bottom: 17px;
}
.top-copy{
width:457px;
}
}

/*top*/
#top-shop .bg-white{
border:1px solid #fff;
box-shadow:0px 0px 8px rgba(180,168,147,0.7);
}
.shop-icon img{
width:34px;
}
.shop-icon{
right:5px;
top:-3px;
}
.shop-title{
height:56px;
}

#top-shop a img {
  transition: .3s ease-in-out;
}
#top-shop a:hover img {
  filter: sepia(50%);
}

@media (min-width:992px){
.shop-icon{
right:13px;
top:auto;
bottom:10px;
}
.shop-icon img{
width:41px;
}
}
@media (min-width:768px){
.shop-icon img{
width:41px;
}
#top-about{
background:url(img/about.jpg) no-repeat right;
background-size:contain;
}
#top-about p{
text-shadow:0px 0px 3px #fff,0px 0px 3px #fff,0px 0px 3px #fff;
}
}

/*page*/
.page-top{
line-height:1;
}

/*shop*/
#shop.container{
max-width:89%;
}
.shop-web{
max-width:750px;
margin:0 auto;
}
#shop p i{
color:#c1a780;
}
#shop img.shop-icon{
width:68px;
}
#shop-in img.shop-icon{
width:75px;
}
#shop-in p{
line-height:1.7;
}
#shop-in table th{
font-weight:500;
color:#25435f;
text-align:center;
width:120px;
}
#shop-in table th,#shop-in table td{
padding:16px 16px;
}
#shop-in table tr:nth-child(odd){
background:#f2ebda;
}
.bg-sm-white{
background:#fff;
}
.border-top,.border-bottom{
border-color:#d7cab5!important;
}

.outer {
display:block;
border: 3px solid #d7cab5;
position:relative;
}
.inner{
border: 1px solid #d7cab5;
margin:3px;
}

.outer:before, .outer:after,
.inner:before, .inner:after {
  content:'';
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff;
  border:3px solid #d7cab5;
}

.outer:before{
  top: -43px;
  left: -43px;
  clip: rect(40px, auto, auto, 40px);
}

.outer:after{
  top: -43px;
  right: -43px;
  clip: rect(40px, 30px, auto, auto);
}

.inner:before {
  bottom: -43px;
  left: -43px;
  clip: rect(auto, auto, 30px, 40px);
}

.inner:after {
  bottom: -43px;
  right: -43px;
  clip: rect(auto, 30px,30px, auto);
}
@media (min-width:992px){
.bg-sm-white{
background:none;
}
}
@media (min-width:768px){
.outer:before{
  top: -38px;
  left: -38px;
  clip: rect(35px, auto, auto, 35px);
}

.outer:after{
  top: -38px;
  right: -38px;
  clip: rect(35px, 35px, auto, auto);
}

.inner:before {
  bottom: -38px;
  left: -38px;
  clip: rect(auto, auto, 35px, 35px);
}

.inner:after {
  bottom: -38px;
  right: -38px;
  clip: rect(auto, 35px, 35px, auto);
}
#shop.container{
max-width:940px;
}
#shop-in img.shop-icon{
width:85px;
}
}
@media (max-width:576.98px){
.shop-web-img{
max-width:300px;
}
}
@media (max-width:767.98px){
#shop-in table th{
text-align:left;
}
#shop-in table th,#shop-in table td{
display:block;
width:100%;
}
#shop-in table th{
padding:12px 12px 8px;
}
#shop-in table td{
padding:0px 12px 14px;
}
}
/*company*/
#company table{
max-width:860px;
margin:0 auto;
}
#company table tr{
border-bottom:1px solid #d7cab5;
}
#company table tr:last-child{
border-bottom:0px solid #d7cab5;
}
#company table th{
background:#ece5d0;
font-weight:500;
width:30%;
text-align:center;
color:#25435f;
}
#company table th,#company table td{
padding:20px 30px;
}
@media (max-width:767.98px){
#company table th,#company table td{
display:block;
width:100%;
}
#company table th{
padding:10px 10px;
}
#company table td{
padding:15px 10px;
}
}

/*footer-shop*/
#footer-shop ul li{
width:100%;
padding:6px 0;
}
#footer-shop ul li a{
border-bottom:1px dotted #25435f;
display:block;
margin-right:0px;
padding-bottom:4px;
position:relative;
}

#footer-shop ul li a:after {
font-family: bootstrap-icons;
content: "\F231";
position:absolute;
display:block;
right:0;
top:0;
color:#25435f;
}
#footer-shop ul li a:hover{
color:#c9974f;
}
#footer-shop ul li a:hover:after {
color:#2c79b9;
}
@media (min-width:768px){
#footer-shop ul li{
width:33%;
padding:10px 0;
}
#footer-shop ul li a{
margin-right:20px;
padding-bottom:6px;
}
}

/*footer*/
footer{
font-size:14px;
}
footer a:hover{
color:#ccc!important;
}
h1{
color:#cbcbcb;
bottom:45px;
line-height:1.5;
}
footer hr{
border-top:1px solid #052738;
border-bottom:1px solid #224166;
}
.copy{
color:#cbcbcb;
}

@media (min-width:768px){
h1{
color:#cbcbcb;
bottom:50px;
line-height:1.5;
}
}