/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   
body{
/* 	font-family:'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif; _font-family: none!important; */
	font-family:'メイリオ', Meiryo, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
	font-size: 14px;
	line-height:1.6em;
	color: #333;
	text-align: center;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  width: 100%;
}

em{
  font-style: normal;
  display: inline-block;
}


ul, li{list-style: none;padding: 0;margin: 0;}


img[src$=".svg"] {height: 100%;}

a[href^="tel"] { cursor: default; }

/*general classes*/
.ofh{overflow: hidden;}
.ac{text-align: center;}
.red{color: #E60012;}
.blue{color: #3b64ce;}
.bold{font-weight: bold;}
.tac{text-align: center;}
.tar{text-align: right;}
a{text-decoration: none; color: inherit; cursor: pointer;}
a:hover{text-decoration: none;}
#bread, .m0{margin: 0;}
#bread a{text-decoration: underline;}
#bread a:hover{text-decoration: none;}
img{max-width: 100%;}
.fll{float: left;}
.flr{float: right;}
.clear{clear: both;}
.btover:hover{opacity: .7;
/*   animation: large_move 0.2s linear both; */
}
.larger{font-size: 1.16em;}
.largest{font-size: 1.33em;}
.smaller{font-size: 0.92em;}
.smallest{font-size: 0.83em;}
.vat {vertical-align:top;}
.nm1, .nm1 p{
  text-indent: -1em;
  padding-left: 1em;
}
.nm3, .nm3 p{
  text-indent: -2.5em;
  padding-left: 2.5em;
}
.nm1 p, .nm3 p{
  margin: 0;
}

.mt{ margin-top: 3em; }
.mb{ margin-bottom: 3em; }
.mtb{ margin-top: 3em; margin-bottom: 3em; }
.mt0{ margin-top: 0!important; }
.mb0{ margin-bottom: 0!important; }

.textlink{
  text-decoration: underline;
}

.textlink:hover{
  color: #e23d00;
}


.bn_wk{border: 1px solid #666; }

.rotate{transform: rotate(90deg);}


	/***PC pr SP ONLY at SP***/
/* スマホ */
@media screen and (max-width: 599px) {
	.pc{display: none;}
	.spb{display: block;}
	.spi{display: inline;}
	.fll_pc{float: none;}
	.flr_pc{float: none;}
	.mr10_pc{margin-right: 0;}
	.mr20_pc{margin-right: 0;}
	.ml10_pc{margin-left: 0;}
	.ml20_pc{margin-left: 0;}
	.pt_pc{padding-top: 0;}
	.mb10_sp{margin-bottom: 10px;}
	.mb20_sp{margin-bottom: 20px;}
	.w90_sp{width: 90%;}
	.w80_sp{width: 80%;}
	.per50_pc{width: 100%;}
}
	
	/***PC SP ONLY***/
/* PC */
@media screen and (min-width: 600px) {
.spb,
.spi{display: none;}
.fll_pc{float: left;}
.flr_pc{float: right;}
.mr10_pc{margin-right: 10px;}
.mr20_pc{margin-right: 20px;}
.ml10_pc{margin-left: 10px;}
.ml20_pc{margin-left: 20px;}
.pt_pc{padding-top: 25px;}
.per50_pc{width: 50%;}
}

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
 
.cf:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

/* ==========================================================================
   COMMON 2018
   ========================================================================== */

* { box-sizing: border-box; }

#wrapper{
  width: 100%;
  overflow: hidden;
}

._inner{
  text-align: left;
  margin: auto;
  padding: 10px;
  position: relative;
}

h3.st1{
  margin-bottom: 20px;
}

h3.st1:after{
  margin-top: 5px;
  display: block;
  content: "";
  height: 3px;
  width: 100%;
  background: #E60012;
  background: linear-gradient(to right, #E60012 0%,#E60012 2em,#7B7B7B 2em);
}

h3.st1 i {
  font-style: normal;
  color: #fff;
  background-color:#7B7B7B;
  padding: 0;
  margin: 0;
  margin-right: .5em;
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
}

.flex{
  display: flex;
}

.fwrap{
  flex-wrap: wrap;
}

.flex2box, .flex3box, .flex4box{
  justify-content: space-between;
}

.flex_bottom{
  align-items: flex-end;
}

.flex2box > *{
  flex: 1 0 calc((100% - 20px) / 2);
  width: 100%;
  max-width: calc((100% - 20px) / 2);
}

.flex3box > *{
  flex: 1 0 calc((100% - 40px) / 3);
  width: 100%;
  max-width: calc((100% - 40px) / 3);
}

.flex4box > *{
  flex: 1 0 calc((100% - 40px) / 4);
  width: 100%;
  max-width: calc((100% - 40px) / 4);
}

/* スマホ */
@media screen and (max-width: 599px) {
    .flex.sp_noflex{
      display: block;
    }
    
    .flex2box.sp_noflex > *,
    .flex3box.sp_noflex > *,
    .flex4box.sp_noflex > *{
      flex: none;
      max-width: 100%;
    }
}

/* タブレット以上 */
@media screen and (min-width: 600px) {  
    ._inner{
      padding-right: 20px;
      padding-left: 20px;
    }
    
    h3.st1{
      font-size: 20px;
    }
}

/* PC用 */
@media screen and (min-width: 1024px) {
    ._inner{      
      max-width: 1000px;
      padding-right: 30px;
      padding-left: 30px;
    }
    
    
}

section{
  position: relative;
}

.s_dark{
  color: #fff;
  background: #E60012;
  font-weight: bold;
}

.s_pale{
  background: #FFF9E0;
}

.ic_next{
  width: 35px;
  height: 35px;
  color: #E60012;
  fill: currentColor;
}

.bt_kuwashiku{
  display: block;
  margin: 2em 0;
}

.bt_kuwashiku svg{
/*   width: calc((201 / 355) * 100%); */
  max-width: calc(201 * 1.2px);
  max-height: 35px;
  fill: currentColor;  
}

.s_dark .ic_next{
  color: inherit;
}

section a svg{
  color: #E60012;
}

/* PC */
@media screen and (min-width: 960px) {
  #bt_totop a:hover,
  section a svg:hover,
  .s_dark a svg:hover{
  /*   color: #ffc800; */
    animation: large_move 0.2s linear both;
  }
  
  /*
   header .logo a:hover{
          animation: def_move 0.2s linear both;
      }
  */

}



.s_dark h2{
  color: #fff;
}



/* ==========================================================================
   SP button
   ========================================================================== */

#jsi-spnav-trigger{
  position: absolute;
  top:10px;
  right: 10px;
  }

.button--close {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 0;
  outline: 0;
}

/*PCのみ*/
@media screen and (min-width: 960px) {
  .button--close {
   display: none;
   }
}

.icon--menu {
  cursor: pointer;
  position: relative;
  width: 36px;
height: 42px; }

.icon--menu > i {
  display: inline-block;
  width: 32px;
  height: 4px;
  background-color: #3a0000;
  border-radius: 1px;
  position: absolute;
  top: -10px;
  right: 0;
  bottom: 0;
  left: 0;
margin: auto; }
.icon--menu > i::before,
.icon--menu > i::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 4px;
  background-color: #3a0000;
  border-radius: 1px;
  position: absolute;
  transition: all 300ms ease-in-out; 
}
.icon--menu > i::before {
  top: -9px;
left: 0;}
.icon--menu > i::after {
  bottom: -9px;
left: 0;}
.is-menu-active .icon--menu > i {
background-color: transparent; }
.is-menu-active .icon--menu > i::before {
  transform: rotate(-45deg);
top: 0; }
.is-menu-active .icon--menu > i::after {
  transform: rotate(45deg);
bottom: 0; }

.icon--menu > div{
  display: inline-block;
  font-size: 8px;
  position: absolute;
  width: 32px;
  top: 33px;
  left: 0;
  right: 0;
  margin: auto;
}



/* ==========================================================================
   header
   ========================================================================== */

header {
/*   overflow: hidden; */
/*   background: #FFF9E0; */
  background: #FFF;
  border-bottom: 3px solid #E60012;
  position: fixed;
  width: 100%;
  z-index: 10000;
}

header ._inner{
    padding: 5px 10px 0;
    position: relative;
  }

#header_titles{
  float: left;
  width: 50%;
  text-align: left;
}

header .lead{ margin-bottom: 0; display: none;}

header .logo{
  margin-bottom: 0;
}

header .logo a{
  color: #E60012;
  fill: currentColor;
  display: inline-block;
  line-height: 1;
}




header .logo svg{
  width: 200px;
  height: 30px;
  fill: currentColor;
}

.gnav li a:hover{
  text-decoration: none;
}

aside .gnav_pc{display: none;}




/*スマホ・タブレットのみ*/
@media screen and (max-width: 959px) {
  .gnav{
    display: none;
    position: absolute;
    background: #fff;
    z-index: 10000;
    width: 100%;
    margin: 0;
    padding: 20px;
    top: 0;
    left: 0;
    border-bottom: 3px solid #E60012;
  }
  
  aside .gnav{
    text-align: left;
    border-top: 3px solid #E60012;
    border-bottom: 0;
    display: block;
    position: static;
  }
  
  .gnav li a{
    font-size: 20px;
    display: block;
    padding: 15px 10px 12px;
    margin-bottom: 5px;
    background: #7B7B7B;
    color: #fff;
  }
  
  .gnav li.active a{
    background: #E60012 /* url(../img/bk_star.svg) left center no-repeat */;
/*     background-size: 100% 100%; */
  }
  
  .gnav li:last-child a{
    margin-bottom: 0;
  }
  
  .gnav_pc{display: none;}
  
}


/*PCのみ*/
@media screen and (min-width: 960px) {
  
    header .logo a:hover{
      color: #ffc800;
      animation: def_move 0.2s linear both;
    }
    
    #header_titles{
      width: 40%;
      text-align: left;
    }
    
    header .logo{ margin-top: 2px; }
    
    header .logo svg{
      width: 250px;
    }
        
    header .lead{ display: block;}
    
    .gnav{display: none;}
    
    .gnav_pc{
      float: right;
      width: 60%;
      text-align: right;
    }
    
    .gnav_pc ul{
      display: flex;
      justify-content: flex-end;
      margin-top: 0;
    }
    
    .gnav_pc li{
        flex: 1 0 20%;
        border-left: 1px solid #999;
        text-align: center;
        padding: 10px 0;
    }
    
    .gnav_pc li.active{
        background: url(../img/bk_star.svg);
        background-size: 100% 100%;
    }
    
    .gnav_pc li:last-child{
        border-right: 1px solid #999;
    }
    
    .gnav_pc li a{
        flex: 1 0 20%;
        display: block;
        color: #E60012;
    }
    
    .gnav_pc li a:hover{
        color: #ffc800;
        animation: large_move 0.2s linear both;
    }
    
    @keyframes large_move {
      0% {  transform: scale(1, 1); color: #E60012;}
      100% {  transform: scale(1.2, 1.2); color: #ffc800;}
    }
    
    @keyframes large_move2 {
      0% {  transform: scale(1, 1) rotate(90deg); color: #E60012;}
      100% {  transform: scale(1.2, 1.2) rotate(90deg); color: #ffc800;}
    }
    
    @keyframes def_move {
      0% {  transform: scale(1, 1); color: #E60012;}
      100% {  transform: scale(1, 1); color: #ffc800;}
    }
    
  
    .gnav_pc li svg{
        width: 100px;
        height: 60px;
        fill: currentColor;
    }
    
}

/* ==========================================================================
   shop
   ========================================================================== */

#s_shop ul{
  display: block;
  text-align: left;
/*   overflow: hidden; */
}

#s_shop li{
  float: left;
  display: block;
  width: 33.3%;
  height: 25vw;
  max-height: 160px;
}

#s_shop li a{
  display: block;
  width: 97%;
  height: 100%;
  position: relative;
}

#s_shop li a img{
  position: absolute;
 bottom: 0; 
}

/* タブレット以上用 */
@media screen and (min-width: 600px) {
  #s_shop li{
    width: 20%;
  }
}

/* ==========================================================================
   osusume
   ========================================================================== */

#s_osusume h2{
  width: calc((183 / 355) * 100%);
  max-width: calc(183 * 2px);
}

#s_osusume figure,
#s_osusume h3{
  color: #6A151C;
  text-align: center;
}

#s_osusume figure img{
  border: 2px solid #6A151C;
  border-radius: 50%;
}

/* ==========================================================================
   footer
   ========================================================================== */

footer{
	width: 100%;
/*   background: #FFF9E0; */
	border-top: 1px solid #999;
  padding-bottom: 40px;
}

footer ._inner > div {
  display: flex; 
  justify-content: space-between;
  align-items: center;
}

footer ._inner > div > * {
  flex: 0 0 40%;
  text-align: center;
}

footer #logo_cb img {max-width: 70%;}
footer #slogan img {max-width: 90%;}



/*タブレット・PC*/
@media screen and (min-width: 600px) {
  footer #logo_cb img {width: 180px;}
  footer #slogan img {width: 200px;}
}

footer address{
  text-align: center;
  font-style: normal;
  margin: auto;
}

#bt_totop {
    position: fixed;
    bottom: 10px;
    right: -5px;
    z-index: 1000;
}

#bt_totop a {
    padding: 32% 0;
    width: 70px;
    height: 70px;
    text-align: center;
    display: block;
    border-radius: 50%;
    border: 3px solid #fff;
    color: white;
    text-decoration: none;
    font-weight: normal;
    font-family: arial narrow;
    -webkit-font-smoothing: subpixel-antialiased;
    background: #E60012;
}



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



/* ==========================================================================
   table使いたいので追加202012月
   ========================================================================== */

table.basic {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  color: #666;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.5;
      margin: 10px 0px 40px 0px;  }
  table td {
    border: 1px solid #cccccc;
    padding: 12px 16px;
    background-color: #ffffff;
    vertical-align: middle; }
  table th {
    border: 1px solid #cccccc;
    padding: 12px 16px;
    background-color: #eeeeee;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle; }

@media screen and (max-width: 768px) {
  table.basic {
    font-size: 12px; }
    table th, table td {
    text-align: center;
      padding: 12px 10px; 
      display: block; 
    width: 100%; } }