@charset "utf-8";
.fadeInUpTrigger{
    opacity: 0;
}
.fadeInDownTrigger{
    opacity: 0;
}
.fadeIn {
    animation-name: fadeUpAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity: 0;
}
.fadeDown {
    animation-name: fadeUpAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body{
    background-color: #212121;
}
.wrapper-mobile{
    display:none;
}
.wrapper-pc{
    display: block;
    /* max-width:1257px; */
    margin-left: auto;
    margin-right: auto;
    padding-left: auto;
    padding-right: auto;
}
div.header{
    margin: 0;
    background-color: #212121;
    height:120px;
    width: 100%;
    display: flex;
    position: fixed;
    top:0px;
    z-index:10;
    justify-content: space-between;
}
div.header-index{
    background-color:rgba(22,22,22,0.4);
    margin: 0;
    height:120px;
    width: 100%;
    display: flex;
    position: fixed;
    top:0px;
    z-index:10;
    justify-content: space-between;
}
/* div.header{
    background-color: #212121;
    height:50px;
     width:1257px;
    z-index:10;
    position: fixed;
    top:0px;
} */
.logo-img{
    /* position: relative; */
    width:auto;
    height:100px;
    margin: 10px 0 10px 10px;
}    
div.menue{
    /* position: absolute; */
    margin-top:50px;
    margin-right: 150px;
    /* left:500px; */
    width:600px;
    display: flex;
    justify-content: space-around;
}
a.menue{
    /* font-family: 'Oxygen', sans-serif; */
    font-family: 'Poiret One', cursive;
    font-size:19pt;
    /* font-weight: bolder; */
    text-decoration: none;
    
}

a.menue-state{
    /* font-family: 'Oxygen', sans-serif; */
    font-family: 'Poiret One', cursive;
    font-size:19pt;
    /* font-weight: bolder; */
    text-decoration:cadetblue;
}

a.menue:hover{
    color:#8d8978;
}
div.sns{
    /* position: absolute; */
    margin: 40px 50px 0 0;
    right: 5px;
    width:100px;
    display: flex;
    justify-content: space-around;
}
a.sns{
    text-decoration: none;
    font-size:10pt;
}
a:link{
    color:#fff;
}
a.menue-state:visited{
    color:#64a9cb;
}
a.menue-state:hover{
    color:#99b85f;
}
a:visited{
    color:#fff;
}
.sns-icon{
    width:35px;
    height: 35px;
    margin:8px 15px;
}
.zehitomo-icon{
    width:50px;
    height: 50px;
}
.sns-icon-line{
    width:28px;
    height:28px;
}
.banner{
    position:relative;
    z-index: 8;
}
.banner-img{
    width:1257px;
    height:482px;
}




/* section{
    max-width:100%;
    max-height: 70%;
    position:relative;
} */
section.wrapper-pc{
    padding:0 0 40px 0;
}
    
p.section-title-1{
    color:#fff;
    font-family: 'Poiret One', cursive;
    font-size:48pt;
    text-align: center;
    margin: 50px;
    padding-top: 70px;
}

/*******************
   about
*******************/
div.state-container{
    display:flex;
    justify-content:center ;
}
div.shopkeeper{
    width:15%;
    padding-right:20px;
    text-align:right;
}
div.about-state{
    width:35%;
    text-align: left;
}
img.shopkeeper{
    width: 100%;
    height:auto;
}
div.shop-info{
    display: inline-block;
    text-align: left;
}
table{
    border-collapse:collapse;
}
.info,.link-list{
    font-family:Meiryo;
    font-size:10pt;
    font-weight:400;
    border:solid 0.5px #fff;
    padding:5px 5px 5px 5px
}
/* table.link-list{
    margin-left:30px;
    margin-right:30px;
} */
a.tel{
    color:#fff;    
    font-style:italic;
}

.c1{
    width:100px;
    text-align: center;
    color:#fff;
}
.c2{
    width:300px;
    text-align: left;
    color:#fff;
}

/*******************
   service
*******************/
div.services-state{
    display: inline-block;
    text-align: left;
    padding: 20px 0 20px 0;
}

/*******************
   contact
*******************/
div.wrapper-pc{
    display:flex;
    justify-content:center ;
}
label.contact{
    color:#fff;
    font-family: 'september-n', sans-serif;
    font-size: 14pt;
}
input.contact{
    color:#000;
    background-color: #fff;
    margin:5px 0 0 10px;
    font-family: 'september-n', sans-serif;
    font-size: 14pt;
}
textarea.contact{
    color:#000;
    background-color: #fff;
    margin:5px 0 0 10px;
    font-family: 'september-n', sans-serif;
    font-size: 14pt;
}
input.soushin{
    color:#fff;
    background-color: #f75600;
    padding: 14px;
    font-family: 'september-n', sans-serif;
    font-size: 14pt;
    font-weight: bold;
    border-radius: 100vh;
}
p.soushin{
    text-align: center;
}
body.confirm{
    background-color:#fff;
}
p.confirm-label{
    color:#000;
    font-family: 'september-n', sans-serif;
    font-size: 16pt;
}
.confirm{
    font-family: 'september-n', sans-serif;
    font-size: 14pt;
}
dl.confirm{
    margin:10px;
}
dd.confirm{
    margin: 0 0 10px 30px;
}
input.confirm{
    margin:20px;
    padding: 5px 10px 5px 10px;
    color: #fff;
    background-color:#6e6e6e;
    border-radius: 10vh;
}



div.link-list-d{
    display:inline-block;
    text-align: center;
    width:100%;
}
div.gallery-img{
    margin-left:50px;
}

a.gallery{
    text-decoration: none;
}
.sum-image{
    margin:30px 20px 30px 20px;
    width:400px;
}
.sum-image-v{
    margin:30px 80px 30px 80px;
    width:280px;
}

img.campaign{
    width:200px;
    height:200px;
}

img.campaign2{
    width:200px;
    height:250px;
}

div.campaign{
    padding-left:20px;
}

.title1,.title2,.title3,.title4{
    text-align: center;
    color:#fff;
    background-color:rgb(108, 108, 108);
    border-color:#fff
}
.col1{
    width:100px;
    text-align: center;
    color:#fff;
}
.col2{
    width:100px;
    text-align: center;
    color:#fff;
}
.col3{
    width:180px;
    text-align: center;
    color:#fff;
}
.col4{
    width:400px;
    text-align: left;
    color:#fff;
}


h1.state{
    color:#fff;
    font-family: 'Poiret One', cursive;
    font-size:23pt;
}
h2.service{
    color:#fff;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size:18pt;
}
h2.oomidashi{
    color:#fff;
    font-family: 'september-n', sans-serif;
    font-style: normal;
    font-size:13pt;
    font-weight:100;
}
h2{
    color:#cbc9c9;
    font-family: 'september-n', sans-serif;
    font-style: normal;
    font-size:13pt;
    font-weight:100;
}
h2.midashi{
    color:#cbc9c9;
    font-family: 'september-n', sans-serif;
    font-style: normal;
    font-size:12pt;
    font-weight:100;
    margin-top:5px;
    margin-left:10px;
}
h2.price{
    color:#cbc9c9;
    font-family: 'september-n', sans-serif;
    font-style: normal;
    font-size:12pt;
    font-weight:100;
    margin-top:5px;
    margin-left:20px;
    margin-bottom:0px;
}
h2.price-red{
    color:red;
    font-family: 'Zen Maru Gothic', sans-serif;
    /* font-family:Meiryo; */
    font-size:12pt;
    font-weight:400;
    margin-top:0px;
    margin-left:20px;
}


h3{
    color:#fff;
    font-family:Meiryo;
    font-size:9pt;
    font-weight:400;
}

.footer-A{ /* for index */
    background-color:rgba(22,22,22,0.4);
    display: inline-block;
    position: fixed;
    width:100%;
    bottom:0%;
    padding:10px 0 15px 0;
    /* border-top: solid 0.5px #fff; */
    text-align: center;
}
.footer-B{
    background-color: #212121;
    display: inline-block;
    position: fixed;
    width:100%;
    bottom:0%;
    padding:10px 0 15px 0;
    border-top: solid 0.5px #fff;
    text-align: center;
}

p.footer{
    padding:5px 0 5px 0;
    /* z-index: 10; */
    font-size:13pt;
}    
div.usage{
    position: relative;
    top:70px;
}
p.usage-title{
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 14pt;
    margin-left:20px;
}
div.flow-mobile{
    overflow: scroll;
    margin-right: 10px;
}
    

.tab-item {
    width: 100px;
    height: 40px;
    line-height: 40px;
    background-color: lightgray;
    text-align: center;
    display: block;
    float: left;
    flex-wrap: nowrap;
    color: #858484;
    text-align: center;
    transition: all 0.2s;
    font-weight: bold;  
    border-top:solid 0.5px #767676;
    border-left:solid 0.5px #767676;
    border-right:solid 0.5px #767676;
  }
  
  /* inputボタンは目には見えないところで働いてもらう */
  input[name="tab-item"] {
    display: none;
  }
  
  /* タブで切り替えたいコンテンツの部分。ここはお好みで */
  .tab-content {
    display: none;
    padding: 30px 0 0 30px;
    overflow: hidden;
    clear: both;
    /* text-align: center; */
    border-top:solid 1px #222222;
  }
  
  /* 選択されているタブのコンテンツを表示させる */
  #a:checked ~ #a-content,
  #b:checked ~ #b-content,
  #c:checked ~ #c-content {
    display: block;
  }
  
  /* 選択されていることがわかるように、選択されているタブはスタイルを変える */
  .tab-container input:checked + .tab-item {
    /* background-color: #57ccbc; */
    background-color: #fff;
    color: #858484;
    border-top:solid 1px #222222;
    border-left:solid 1px #222222;
    border-right:solid 1px #222222;
    box-shadow:0 0 10px #8d8978;
  }

  .to-top{
    bottom:30px;
    position:-webkit-sticky;
    position:sticky;
    width:50px;
    height: 100px;
    /* line-height: 100px; */
    text-align: center;
    vertical-align: middle;
    background-color: #fff;
    box-shadow:0 0 10px #8d8978;
    border:solid 1px #464545;
    color:#858484;
    font-weight: 800;
}

/*==================================================
スライダーのためのcss
===================================*/
#slider-l {
    width: 100%;
    height: 100vh;
    /* margin-left:5%; */
}

/*======================================
お知らせ蘭
======================================*/
div.news-box{
/*    position:absolute;
    top:170px;
    left:50%;
    right:50%;*/
    position: absolute;
    top:170px;
    width:100%;
    margin: 0;
    padding: 0;
    z-index: 99;
    text-align: center;
}
div.oshirase{
    margin: 0 auto;
    width:600px;
    font-family: 'september-n', sans-serif;
    font-style: normal;
    font-weight: 100;
    font-size:19pt;
    text-align: center;
    background-color: rgba(230, 230, 230, 0.6);
}
.news-list{
    list-style: none outside;
    margin: 0 auto;
    width: 600px;
    background-color: rgba(230, 230, 230, 0.6);
}
  .news-list .item .item-link{
    display: flex;
    flex-wrap: wrap;
    flex-wrap: nowrap;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #CCC;
    padding: 20px 20px;
  }
  .news-list .item:first-child .item-link{
    border-top: 1px solid #CCC;
  }
  .news-list .item .date{
    margin: 0;
    min-width: 100px;
    font-size: 16px;
    color: #333;
    padding: 0 0 0 0;
  }
  .news-list .item .category{
    margin: 0;
    min-width: 140px;
    padding: 0 20 0 0;
  }
  .news-list .item .category span{
    color: #FFF;
    text-align: center;
    display: inline-block;
    padding: 5px 20px;
    font-size: 12px;
    line-height: 1;
    min-width:120px;
  }

  .news-list .item .category .red{
    background:red;
  }
  .news-list .item .category .orange{
    background: #f59236;
  }
  .news-list .item .category .gray{
    background: #333;
  }

  .news-list .item{
    margin: 0;
    width: 100%;
  }
  .news-info{
    margin-left: 10px;
    font-family: 'september-n', sans-serif;
    font-style: normal;
    font-weight: 100;
    font-size:14px;
    color:#000;
    text-align: left;
  }
  .news-list .item .item-link:hover .news-info{
    color: rgb(102, 164, 234);
  }
  
  @media screen and (max-width: 600px){
  .news-list .item .item-link{
    flex-wrap: wrap;
  }
  .news-list .item .date{
    min-width: 100px;
  }
  .news-list .item .title{
    margin-top: 10px;
  }
  }
  
  /* 装飾 
   
  *{
    box-sizing: border-box;
  }
  */
  .item-link{
    text-decoration: none;
  }