/* CSS Document */
html {font-size: 62.5%;} /* 10px; */
body {font-size: 1.6rem;} /* 16px */


.wp{ width:  760px; margin: 0 auto;  }/* pc only */
.inner{ padding: 0 14px; }

p, li{ line-height: 1.8; }
p{ margin-bottom: 1.5em;}

header{ padding: 20px 10px; }
header::after {
	content: "";
	display: table;
	clear: both;
}

.logo{ float: left; height: 26px;  }
.header_box{ float: right;  }
.header_box::after {
	content: "";
	display: table;
	clear: both;
}
.bn_official{ display: inline-block; vertical-align: top; background: #9c9b9b; color: #FFF; border-radius: 6px; text-align: center; font-size: 1.3rem; height: 32px; padding: 9px 10px 0; margin-right: 10px; box-sizing: border-box; }
.bn_official:hover{}
.bn_cart{display: inline-block; margin-right: 10px;}
.bn_cart img{ width: auto; height: 32px; vertical-align: top;  }
.bn_search{display: inline-block;}
.bn_search img{width: auto; height: 28px; vertical-align: top;  }

/* tab */
.swiper-container {margin: 0 auto 0px;}

.tab-menu { height: auto; }

.swiper-slide {display: block; width: 14.28%; }
.swiper-slide a{display: block; margin: 6px 0 0; padding: 10px; text-align: center; color: #FFF; text-decoration: none; border-radius: 6px 6px 0 0; border-bottom: 1px solid #FFF;  }

.swiper-slide a.swiper-slide-thumb-active { margin: 1px 0 0 0; padding: 13px 10px; border-bottom: 0px; }/*padding: 14px 10px!important; margin-top: -8px; */
        
.swiper-slide-active{ }

/* key */
.key{ margin-bottom: 45px;}
.key img{width: 100%;}

.key_col{margin-bottom: 45px;}
.key_col img{width: 100%;}

.line_red{ border-top: 3px solid #f15258; }
.line_yellow{ border-top: 3px solid #f6c503; }
.line_lgreen{border-top: 3px solid #68c775; }
.line_lblue{ border-top: 3px solid #3dc1f3; }
.line_blue{border-top: 3px solid #1d47a6; }



/* greeting */
.greeting_col{position: relative; }
.greeting_col::after {
	content: "";
	display: table;
	clear: both;
}
.greeting_img{ position: absolute; right: 10px; top: -20px; width: auto; height: 235px; }

.greeting_box{ background:#f8e8e9; padding: 1.5em; width: calc( 100% - 180px ); min-height: 240px; box-sizing: border-box; margin-left: 10px;   }
.greeting_ttl{ font-weight: 700; margin-bottom: 0.5em; font-size: 120%; }
.greeting_txt{ margin-right: 1.5em; }


.bn_shop{ display: inline-block; 
    border: 1px solid #1c532d;
    color: #333; 
    text-decoration:  none; 
    text-align: center; 
    padding: 1em 0;  
    background: #f2f2f2; 
    width:400px; 
    font-weight: bold; 
  /*cursor: pointer;*/
  position: relative;
  transition: all 0.3s ease 0s;
    margin-bottom: 2em;
}

.bn_shop_icon{ height:1.75em ;
 -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  left: 100px;
  top: 50%;
  margin: 0;
  box-shadow: none;
  transition: all 0.3s ease 0s;
}

.bn_shop:hover{ background: #333; color: #f2f2f2;  }
.bn_shop:hover .bn_shop_icon{ fill: #f2f2f2; }


h1 {font-size: 3.6rem; /* 36px*/}
h2 {font-size: 2.0rem; /* 24px*/}

.h2_base{ background: #f15258; color: #FFF; text-align: center; margin-bottom: 0.5em;padding: 0.5em; line-height: 1.0; font-size: 2.0rem;  }
.h3_base{ background: #ade3b4; border-bottom: 2px solid #68c775; margin-bottom: 0.5em;padding: 0.5em; line-height: 1.0; font-size: 1.5rem;  }


/* news */
.news_box {
    display: grid;
   grid-template-rows: 1.7em 1fr;
   grid-template-columns: 1fr 115px;
    border-bottom: 1px solid #cecece;
    padding: 0em 4px 1em;
    margin:  0 0 1em;
}

.news_date{
    grid-row: 1 / 2;
    grid-column: 1 / 2;
   /* background: #8f8;*/
    font-size: 1.3rem;
    vertical-align: middle;
    padding-top: 0.5em;
}
.news_txt {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    /*background: #88f;*/
    font-size: 1.7rem;
    font-weight: 700;
    vertical-align: middle;
    padding-right: 1em;
    box-sizing: border-box;
    line-height: 1.4;
}

.news_txt a:hover{ text-decoration: underline; }
       
.news_pic {
    grid-row: 1 / 3;
    grid-column: 2 / 3;
   /* background: #f88;*/
    text-align: right;
}
.news_pic img{  width: 115px; height: 90px;}

.btn_list{ display: inline-block; padding: 0.7em 2em; border: 1px solid #333; color: #333; text-align: center; border-radius: 6px; text-decoration: none; font-size: 1.2rem; transition: all 0.3s ease 0s; }
.btn_list:hover{ background: #333; color: #FFF; }


/* 動画 */

/*.video_col{ margin-bottom: 1.5em; display: grid; }
.video_col li{ display: table-cell; border-bottom:  1px solid #cecece; padding: 1em 4px; }
.video_col li img{ vertical-align: middle; width: 160px; height: auto; margin-right: 2em; }

.video_thumb{ float: left; }*/

.video_box {
 display: table;
    width: 100%;
    box-sizing: border-box;
     border-bottom:  1px solid #cecece;
    padding: 15px 4px;
}
.video_ttl {
 display: table-cell;
 vertical-align: middle;
    padding: 0 15px;
}

      
.video_pic {display: table-cell; width: 180px;}
.video_pic img{ width: 100%;  }

.video_box a:hover .video_ttl{ text-decoration: underline; }

/* link */
.top_banner li{ width: 48%; float:left; padding:  0 1%; margin-bottom: 0.5em; font-size: 90%!important; }
.top_banner li img{ width: 100%;}


/*-----------------------------------------------------------------------------------------
　 item
---------------------------------------------------------------------------------------------*/

.item_box {
 display: table;
    width: 100%;
    box-sizing: border-box;
    border-bottom:  1px solid #cecece;
    padding: 0em 4px 1em;
    margin:  0 0 1em;
}
.item_ttl {
 display: table-cell;
 vertical-align: middle;
 padding: 0 15px;
}
      
.item_pic {display: table-cell; width: 180px;}
.item_pic img{ width: 100%;  }

.item_box a:hover{ background: #fefbeb; }
.item_box a:hover .item_ttl{ text-decoration: underline; }





/*-----------------------------------------------------------------------------------------
　 FOOTER
---------------------------------------------------------------------------------------------*/
footer{ clear: both; background: #dedada;  }
footer::after {
	content: "";
	display: table;
	clear: both;
}

/*.copy{ padding: 1.2em 0; margin-bottom: 0; text-align: center; font-size: 1.2rem; color: #212121; }
*/