@charset "UTF-8";

/* ----------見出し---------- */
.midashi1{
  font-size: 15px;
  font-weight: bold;
  color: #333333;
  display: inline-block;
  text-align: left;
  line-height: 1.2;
}
.midashi2{
  font-size: 23px;
  font-weight: bold;
  color: #333333;
  padding: 15px;
  margin: 0px 0px 30px 0px;
  display: block;
  text-align: center;
  line-height: 1.4;
  background-color: #eaf4ff;
  border-radius: 20px;
  clear: both;
}
.midashi3{
  font-size: 23px;
  color: #333333;
  font-weight: bold;
  padding: 15px;
  margin: 0px 0px 30px 0px;
  display: block;
  text-align: center;
  line-height: 1.4;
  clear: both;
  border-radius: 20px;
}
.midashi4{
  font-size: 22px;
  color: #000000;
  font-weight: bold;
  padding: 0px;
  margin: 0px;
  display: inline-block;
  text-align: left;
  line-height: 1.4;
  clear: both;
}
.midashi5{
  font-size: 18px;
  font-weight: bold;
  color: #660000;
  text-align: left;
  display: inline-block;
}
.top-midashi{
  font-size: 55px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  line-height: 1.4;
}
@media screen and (max-width:768px){
.midashi2{
	font-size:23px;text-align:left;
}
.midashi3{
	font-size:20px;text-align:left;
}
.midashi4{
	font-size:20px;text-align:left;
}
.midashi5{
	text-align:left;
}
.top-midashi{
	font-size:32px;
}
}
/* ----------全体のスタイル---------- */
*{
  margin: 0px;
  padding: 0px;
}
#header{
  width: 100%;
  background-repeat: repeat;
  background-image: url(header-back.jpg);
  background-attachment: scroll;
  box-sizing: border-box;
}
.header-hako{
  width: 100%;
  max-width: 1180px;
  padding: 10px 10px 5px 10px;
  margin: 0px auto;
  box-sizing: border-box;
}
.header-table{
  width: 100%;
  display: table;
  table-layout: fixed;
  box-sizing: border-box;
}
.header-table div.cell-1{
  width: 50%;
  max-width: 100%;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  box-sizing: border-box;
}
.header-table div.cell-2{
  width: 50%;
  max-width: 100%;
  display: table-cell;
  text-align: right;
  vertical-align: middle;
  box-sizing: border-box;
}
@media screen and (max-width:1180px){
.header-hako{
	padding: 70px 10px 10px 10px;
}
.header-table{
	display: block;
}
.header-table div.cell-1{
	display:block;width:100%;text-align:center;
}
.header-table div.cell-2{
	display:none;
}
}
body{
  width: 100%;
  max-width: 100%;
  font-size: 17px;
  line-height: 1.8;
  font-family: Lato, "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  overflow-wrap: break-word;
  background-repeat: repeat;
  background-attachment:scroll;
  background-image:url(body-back.jpg);
  box-sizing: border-box;
  z-index: 0;
}
@media screen and (max-width:768px){
body{
	font-size: 100%;
}
}
#container{
  width: 100%;
}
#inner{
  background-repeat: repeat;
  background-attachment: scroll;
  background-image:url(inner-back.jpg);
  box-sizing: border-box;
}
#wrapper{
  width: 1180px;
  max-width: 100%;
  min-height: calc(100vh - 150px);
  padding-top: 30px;
  margin: 0px auto;
  box-sizing: border-box;
}
#main{
  width: 80%;
  padding: 0px;
  margin: 0px;
  display: block;
  float: left;
  vertical-align: top;
  box-sizing: border-box;
}
#aside{
  width: 18%;
  margin: 0px 0px 0px 2%;
  display: block;
  float: right;
  box-sizing: border-box;
}
#aside dl{
  margin-bottom: 15px;
}
#aside dl dt{
  padding: 5px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background-color: #660000;
  background-image: url(aside-back.jpg);
}
#aside dl dd a{
  text-decoration: none;
}
#aside dl dd p{
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  padding: 15px 10px;
  color: #333;
  line-height: 1.6;
  text-align: left;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-color: #333333;
  background-color: #fff;
  box-sizing: border-box;
}
#aside dl dd p a{
  color: #333333;
  display: block;
  text-decoration: none;
}
#aside dl dd p a:hover{
  color: #ffcc00;
}
#footer{
  text-align: center;
  padding-bottom: 15px;
  color:#550000;
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: 100% 100%;
  background-image:url(footer-back.jpg);
  box-sizing: border-box;
  clear: both;
}
.footer-copy{
  color:#ffffff;
  font-weight: bold;
  text-align: center;
  padding: 5px 10px;
  margin-bottom: 15px;
  background-color: #550000;
  background-image:url(copyright.jpg);
}
#footer p{
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  padding: 0px;
  margin: 5px 10px;
}
#footer p a{
  text-decoration:none;
  color:#550000;
}
#footer p a:hover{
  color:#990000;
}
@media screen and (max-width:768px){
#footer p{margin:5px 10px;}
}
/* ----------PCメニュー---------- */
#pc-nav{
  width: 100%;
  max-width: 100%;
  height: auto;
  text-align: center;
  margin: 0px auto;
  display: block;
  background-image: url(menu.jpg);
  background-repeat: repeat;
  background-position: top center;
  box-sizing: border-box;
}
@media screen and (max-width:1180px){
#pc-nav{
	display:none;
}
}
.dropmenu{
  width: 100%;
  max-width: 1180px;
  margin: 0px auto;
  box-sizing: border-box;
}
.dropmenu::before, .dropmenu::after{
  content: "";
  display: table;
}
.dropmenu::after{
  clear: both;
}
.dropmenu li{
  line-height: 1.4;
  display: inline-block;
  background-image: url(menu.jpg);
  position: relative;
/* 背景を指定しないとIEで子要素をhoverできない */
  vertical-align: bottom;
/* 余白防止用 */
  border-width: 0px 0px 0px 1px;
  border-style: solid;
  border-color: #660000;
}
.dropmenu li:last-of-type{
  border-right-width: 1px;
}
.dropmenu li a{
  display: block;
  color: #333333;
  text-decoration: none;
}
.dropmenu li a:hover{
  color: #ffcc00;
}
.dropmenu li p{
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 20px 64px;
  box-sizing: border-box;
}
/* ドロップ(PC用メニュー-アニメーション部分) */
.dropmenu li ul{
  position: absolute;
  /* ここを消すとメニューに合わせて下の要素が動く */
  z-index: 9;
  visibility: hidden;
  opacity: 0;
  transition: 0s;
}
.dropmenu li:hover ul{
  visibility: visible;
  opacity: 1;
}
.dropmenu li ul li{
  width: 100%;
  border-width: 1px 1px 0px 1px;
  border-style: solid;
  border-color:#660000;
  visibility: hidden;
  opacity: 0;
  transition: .3s;
  background-image: url(menu.jpg);
  box-sizing: border-box;
}
.dropmenu li ul li:last-of-type{
  border-width: 1px;
}
.dropmenu li:hover ul li{
  visibility: visible;
  opacity: 1;
}
.dropmenu li ul li p{
  padding: 20px;
}
/* ----------上部メニュー---------- */
#top-nav{
  width: 100%;
  max-width: 100%;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  transition: all 0.5s;
  transform: translateY(0px);
  z-index: 9998;
}
@media screen and (max-width:1180px){
#top-nav{
	display:block;
}
}
#top-nav.hide-top-nav{
  transition: all 0.5s;
  transform: translateY(-70px);
}
#top-nav a:hover img {
  opacity: 1;
}
#top-nav-left,#top-nav-right{
  width: 50%;
  height: 50px;
  text-align: center;
  position: fixed;
  top: 0px;
  padding: 12px 0px;
  display: block;
  cursor: pointer;
  background-color: #660000;
  box-shadow: 3px 3px 3px #666;
  box-sizing: border-box;
}
#top-nav-left{
  left: 0px;
  border-right: solid 1px #000;
}
#top-nav-right{
  right: 0px;
}
#top-nav-left{
  border-right: solid 1px #000;
}
a #top-nav-left,a #top-nav-right{
  text-decoration: none;
}
.top-nav-menu-button-left,.top-nav-menu-button-right{
  max-width: 100%;
  height: 25px;
}
/* ----------スライドメニュー---------- */
#slide-nav{
  width: 400px;
  max-width: 80%;
  height: 100%;
  padding: 60px 15px 15px 15px;
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  transition: all 0.5s;
  transform: translate(400px);
  overflow-y: scroll;
  z-index: 9999;
  background-color: #ffffff;
  background-image: url(slide-nav-back.jpg);
  border-left: 1px solid #330000;
  box-sizing: border-box;
}
.slide-btn-open{
  cursor: pointer;
}
.slide-btn-close{
  width: auto;
  max-width: 100%;
  height: 40px;
  display: none;
  position: fixed;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
#slide-nav.open{
  transition: 0.5s;
  transform: translate(0);
}
#slide-nav li{
  border-bottom: 1px solid #330000;
}
#slide-nav li p{
  padding: 25px 5px;
  line-height: 1.4;
  margin-left:1em;
  text-indent:-1em;
}
#slide-nav li p::before{
  color: #ffcc00;
  content:"■";
  padding-right: 3px;
}
#slide-nav a{
  font-weight: bold;
  color: #333333;
  text-decoration: none;
}
#slide-nav a:hover{
  color: #ffcc00;
}
.slide-nav-back{
  width: 100%;
  height: 100%;
  display: none;
  transition: 0.5s;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  background-color: #eeeeee;
  -moz-opacity: 0.6;
  opacity: 0.6;
}
@media screen and (max-width:1180px){
#slide-nav{
	display:block;
}
.slide-btn-close{
	display:block;
}
.slide-nav-back{
	display:block;
}
}
/* ----------入れ物のスタイル---------- */
#top-gazou{
  width: 100%;
  max-width: 100%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url(top-gazou-back.jpg);
  overflow: hidden;
  box-sizing: border-box;
}
#top-gazou2{
  width: 100%;
  max-width: 100%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url(top-gazou-back2.jpg);
  overflow: hidden;
  box-sizing: border-box;
}
.top-gazou-hako{
  max-width: 1180px;
  padding: 80px 15px;
  margin: 0px auto;
  text-align: center;
  box-sizing: border-box;
}
@media screen and (max-width:768px){
.top-gazou-hako{
	padding:30px 15px;
}
}
.hako-big{
  width: 100%;
  max-width: 100%;
  padding: 0px;
  overflow: hidden;
  box-sizing: border-box;
}
.hako{
  width: 100%;
  max-width: 1180px;
  margin: 0px auto 25px auto;
  text-align: left;
  overflow: hidden;
  background-color:#ffffff;
  border-radius: 20px;
  box-sizing: border-box;
}
.li-25,
.li-33,
.li-50,
.li-100{
  max-width: 100%;
  display: inline-block;
  padding: 25px;
  line-height: 1.5;
  text-align: center;
  vertical-align: top;
  box-sizing: border-box;
}
.li-25{
  width: 25%;
}
.li-33{
  width: 33.33333%;
}
.li-50{
  width: 50%;
}
.li-100{
  text-align: left;
  width: 100%;
}
.li-100.no-bottom{
  padding-bottom: 0px;
}
.li-100.no-top{
  padding-top: 0px;
}
.midashi2.no-bottom,
.midashi3.no-bottom,
.midashi4.no-bottom{
  margin-bottom: 0px;
}
@media screen and (max-width:768px){
.li-25,.li-33,.li-50,.li-100{
	width:100%;padding:25px 15px;text-align:left;
}
}
.dtable{
  width: 100%;
  max-width: 100%;
  display: table;
  margin: 0px auto;
  padding: 0px;
  table-layout: fixed;
  border-width: 0px 2px 2px 2px;
  border-style: solid;
  border-color: #ffcccc;
  box-sizing: border-box;
}
.dtable:first-of-type{
  border-top-width: 2px;
}
.dtable .cell-1{
  display: table-cell;
  width: 25%;
  max-width: 100%;
  font-weight: bold;
  padding: 15px;
  text-align: center;
  vertical-align: middle;
  background-color: #fff4f4;
  box-sizing: border-box;
}
.dtable .cell-2{
  display: table-cell;
  width: auto;
  max-width: 100%;
  padding: 15px;
  text-align: left;
  vertical-align: top;
  background-color: #ffffff;
  box-sizing: border-box;
}
@media screen and (max-width:768px){
.dtable{
	display:block;
}
.dtable div.cell-1{
	display:block;width:100%;
}
.dtable div.cell-2{
	display:block;width:100%;
}
.dtable.no-divide{
	display:table;
}
.dtable.no-divide div.cell-1{
	display:table-cell;width: 25%;
}
.dtable.no-divide div.cell-2{
	display: table-cell;width: auto;
}
}
.t-design2 .dtable{
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-color: #cccccc;
}
.t-design2 .dtable:first-of-type{
  border-top-width: 1px;
}
.t-design2 .dtable .cell-1{
  width:40%;
  font-weight: normal;
  text-align: left;
  background-color: #ffffff;
}
.t-design2 .dtable .cell-2,
.t-design2 .dtable .cell-2 p{
  text-align: right;
}
@media screen and (max-width:768px){
  .t-design2 .dtable{
	display:table;
}
  .t-design2 .dtable div.cell-1{
	display:table-cell;width:40%;
}
  .t-design2 .dtable div.cell-2{
	display:table-cell;width:60%;
}
}
.dtable-s{
  width: 100%;
  max-width: 100%;
  display: table;
  border-collapse: separate;
  border-spacing: 10px 5px;
  /*数字は「左右、上下」*/
  margin: 0px auto;
  padding: 0px;
  table-layout: fixed;
  box-sizing: border-box;
}
.dtable-s .cell-25,
.dtable-s .cell-33,
.dtable-s .cell-50,
.dtable-s .cell-100{
  display: table-cell;
  max-width: 100%;
  padding: 15px;
  vertical-align: top;
  border-width: 0px;
  box-sizing: border-box;
}
.dtable-s .cell-25{
  width: 25%;
}
.dtable-s .cell-33{
  width: 33.333%;
}
.dtable-s .cell-50{
  width: 50%;
}
@media screen and (max-width:768px){
.dtable-s{
	display: block;
}
.dtable-s .cell-25,
.dtable-s .cell-33,
.dtable-s .cell-50,
.dtable-s .cell-100{
	display:block;width:100%;
}
}
/* ----------その他---------- */

/* スライドショー */
.slideshow{
  width: 100%;
  max-width: 1180px;
  /* 指定しないと矢印消える */
  margin: 0px auto;
}
/* タブ */
.tab-table{
  width: 100%;
  display: table;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 10px 0px;
  /*数字は「左右、上下」*/
  box-sizing: border-box;
}
.tab-table .tab-cell{
  width: 50%;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  display: table-cell;
  padding: 15px;
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 1px 1px #ff3333;
  top: -3px;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  border-radius: 5px;
  box-shadow: 0px 3px 3px 0px #ff3333;
  background-color: #ff7777;
  box-sizing: border-box;
}
.tab-cell.tab-active{
  top: 0px;
  box-shadow: none;
  background-color: #ff5555;
}
.tab-content{
  width: 100%;
  max-width: 100%;
  padding: 25px;
  clear: both;
  display: none;
  border: 2px solid #ff3333;
  box-sizing: border-box;
}
.tab-active{
  display: block;
}
@media screen and (max-width:768px){
.tab-cell{
	font-size:18px;padding:10px;
}
.tab-content{
	padding:15px;
}
}
/* トグル */
.toggle-1{
  cursor: pointer;
  text-decoration: underline;
}
.toggle-1:hover{
  color:#ffaaaa;
}
.toggle-1::after{
  content: '＋';
}
.toggle-1.active::after{
  content: '－';
}
.toggle-2{
  display: none;
}
.toggle-1.simple::after{
  content: none;
}
.toggle-1.simple.active::after{
  content: none;
}
/* 表示・非表示 */
.pc-none{
  display: none;
}
.pc-tablet-none{
  display: none;
}
@media screen and (max-width:1180px){
.pc-none{
	display:block;
}
.pc-tablet-none{
	display: none;
}
.tablet-none{
	display:none !important;
}
}
@media screen and (max-width:768px){
.pc-tablet-none{
	display: block;
}
.suma-none{
	display:none !important;
}
}
/* image */
img{
  max-width: 100%;
  height: auto;
  width /***/:auto;
  margin: 0px auto;
  border-width: 0px;
  display: block;
  vertical-align: bottom;
/* 余白防止用 */
}
/* iframe */
iframe{
  max-width: 100%;
  height: auto;
  display: block;
}
@media screen and (max-width:768px){
img,iframe{
	float:none !important;margin-left:auto !important;margin-right:auto !important;
}
}
/* リンク */
a:hover img {
  opacity: 0.8;
}
a:link,a:visited{
  color:#55acee;
  text-decoration: underline;
}
a:hover{
  color:#4892cb;
}
/* 透過性 */
.h-opacity{
  background-color: transparent;
}
.h-opacity:hover{
  opacity: 0.8;
}
/* 丸み */
.kado-maru{
  border-radius: 20px;
}
/* 寄せる */
.yoseru-right{
  float: right;
  margin: 0px 0px 15px 20px;
}
.yoseru-left{
  float: left;
  margin: 0px 20px 15px 0px;
}
@media screen and (max-width:768px){
.yoseru-right,.yoseru-left{
	float:none;margin:0px 0px 25px 0px;
}
}
/* ページトップボタン(or<p>出前を注文</p>ボタン) */
#page-top{
  position: fixed;
  bottom: 5px;
  right: 5px;
  font-size: 15px;
  font-weight: bold;
}
#page-top a{
  width: 100px;
  padding: 5px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  display: block;
  border-radius: 5px;
  background-color: #660000;
}
#page-top a:hover{
  text-decoration: none;
  background-color: #ffcc00;
}
/* RSS */
#feed{
  width: 100%;
  max-width: 100%;
  color: #000;
  box-sizing: border-box;
}
#feed li{
  padding-bottom: 5px;
  text-align: left;
  line-height: 1.5;
}
#feed li a{
  color: #666666;
}
/* instagram */
#instagram{
  width: 100%;
  max-width: 100%;
  text-align: left;
  color: #000;
  padding: 15px;
  box-sizing: border-box;
}
#instagram li{
  width: 25%;
  /* 25% or 20% */
  max-width: 100%;
  display: inline-block;
  padding: 5px;
  text-align: center;
  vertical-align: top;
  box-sizing: border-box;
}
#instagram .instagram-image{
  width: 100%;
  box-sizing: border-box;
}
#instagram .instagram-data p{
  width: 100%;
  padding: 5px 0px;
  text-align: center;
  box-sizing: border-box;
}
@media screen and (max-width:768px){
#instagram li{
	width:50%;
}
}
/* twitter */
.twitter-hako{
  width: 100%;
  max-width: 100%;
  height: 400px;
  margin: 0px auto;
  overflow-y: scroll;
  box-sizing: border-box;
}
.twitter-timeline{
  width: 100%;
  max-width: 100%;
  max-height: 3000px;
  box-sizing: border-box;
}
/* facebook */
.facebook-hako{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.facebook-hako iframe{
  max-width: 100%;
  height: 400px !important;
  box-sizing: border-box;
}
/* htmlタグ */
p{
  padding: 0px;
  text-align: left;
}
h1,h2,h3,h4,h5,h6{
  margin: 0px;
  padding: 0px;
}
b,strong{
  font-weight: bold;
}
hr{
  width: 100%;
  height: 10px;
  margin: 10px auto;
  padding: 0px;
  clear: both;
  border-width: 0px 0px 1px 0px;
  border-style: dotted;
  border-color: #cccccc;
}
ol,ul,li{
  margin: 0px;
  padding: 0px;
  list-style: none;
}
table{
  width: 100%;
  max-width: 100%;
  line-height : 150%;
  margin: 0px auto 0px auto;
  border-collapse: collapse;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
}
table th{
  font-weight: normal;
  padding: 10px;
  text-align: left;
  background-color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
}
table td{
  font-weight: normal;
  padding: 10px;
  text-align : center;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
}
table.table-price{
  width: 100%;
  max-width: 100%;
  line-height : 150%;
  margin: 0px auto 0px auto;
  border-collapse: collapse;
  border-width: 1px 0px;
  border-style: solid;
  border-color: #ccc;
}
table.table-price th{
  font-weight: normal;
  padding: 10px;
  text-align: left;
  background-color: #fff;
  border-width: 1px 0px;
  border-style: solid;
  border-color: #ccc;
}
table.table-price td{
  font-weight: normal;
  padding: 10px;
  text-align : right;
  border-width: 1px 0px;
  border-style: solid;
  border-color: #ccc;
}
/* li */
.li-text{
  margin-bottom: 15px;
  line-height: 1.6;
  text-align: left;
}
.li-text-i{
  margin-bottom: 15px;
  margin-left:1em;
  text-indent:-1em;
  line-height: 1.6;
  text-align: left;
}
.li-text:last-of-type,
.li-text-i:last-of-type{
  margin-bottom: 0px;
}
.li-text p,.li-text-i p{
  display: inline;
}
/* input text-area */
input{
  max-width:100%;
  padding: 2px;
  white-space: pre-line;
  word-break: break-all;
  box-sizing: border-box;
}
textarea{
  width: 500px;
  max-width: 100%;
  height: 300px;
  padding: 3px;
  border: 1px solid #cccccc;
  box-sizing: border-box;
}
.submit{
  padding: 10px 50px;
  border: solid 1px #aaaaaa;
  background-color: #f4f4f4;
}
.submit:hover{
  color: #ffaaaa;
  border-color: #ffcccc;
  background-color: #fffafa;
}
@media screen and (max-width:768px){
textarea{
	display:block;
}
}
/* チェックボックス */
.checkbox-li-25{
  width: 25%;
}
.checkbox-li-33{
  width: 33.333%;
}
.checkbox-li-50{
  width: 50%;
}
.checkbox-li-100{
  width: 100%;
}
.checkbox-li-25,.checkbox-li-33,.checkbox-li-50,.checkbox-li-100{
  max-width: 100%;
  display: inline-block;
  padding: 10px 10px 10px 0px;
  vertical-align: top;
  box-sizing: border-box;
}
@media screen and (max-width:768px){
  .checkbox-li-25,.checkbox-li-33,.checkbox-li-50,.checkbox-li-100{width:100%;}
}
ul.big-checkbox,
ol.big-checkbox{
  margin-left: 0em;
}
.big-checkbox label{/* ラベル*/
  padding-left: 25px;/* ラベルの位置 */
  font-size: 18px;
  line-height: 22px;
  display: inline-block;
  cursor: pointer;
  position: relative;
}
.big-checkbox label:before{/* ボックス */
  content: '';
  width: 18px;/* ボックスの横幅 */
  height: 18px;/* ボックスの縦幅 */
  display: inline-block;
  position: absolute;
  left: 0;
  background-color: #ffffff;
  border: solid 1px #333333;
}
.big-checkbox input[type=checkbox],.big-checkbox input[type=radio]{/* 元のチェックボックス非表示 */
  display: none;
}
.big-checkbox input[type=checkbox]:checked + label:before,.big-checkbox input[type=radio]:checked + label:before{/* チェックした時 */
  content: '\2713';/* チェックの文字content CSS */
  font-size: 18px;/* チェックのサイズ */
  color: #ffffff;/* チェックの色 */
  background-color: #ff5555;/* チェックした時の色 */
}
/* ふわりと表示 */
.fade-in-trigger-up,
.fade-in-trigger-down,
.fade-in-trigger-right,
.fade-in-trigger-left{
  opacity: 0;
}
.fade-up,.fade-down,.fade-right,.fade-left{
  animation-duration:2.0s;
  animation-fill-mode:forwards;
  opacity:0;
}
.fade-up{
  animation-name:fadeUpAnime;
}
@keyframes fadeUpAnime{
  from { opacity: 0;transform: translateY(50px); }
  to { opacity: 1;transform: translateX(0); }
}
.fade-down{
  animation-name:fadeDownAnime;
}
@keyframes fadeDownAnime{
  from { opacity: 0;transform: translateY(-50px); }
  to { opacity: 1;transform: translateX(0); }
}
.fade-right{
  animation-name:fadeRightAnime;
}
@keyframes fadeRightAnime{
  from { opacity: 0;transform: translateX(-50px); }
  to { opacity: 1;transform: translateX(0); }
}
.fade-left{
  animation-name:fadeLeftAnime;
}
@keyframes fadeLeftAnime{
  from { opacity: 0;transform: translateX(50px); }
  to { opacity: 1;transform: translateX(0); }
}