@charset "UTF-8";

/* @import url(reset.css); */
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo,
    メイリオ, YuGothic, "游ゴシック", sans-serif, Arial;
	-webkit-font-smoothing:antialiased;
}
body {font:14px/1.231 "ヒラギノ角ゴ Pro W3";}

#contents{overflow:hidden;}
.header-wrap{background:#000;padding:10px;color:#ebebeb;}
.header-area{background-color:#555;border-radius:8px; -webkit-border-radius:8px;padding:10px;margin-bottom:-10px;color:#c9c9c9;}
.header-area p {font-size:0.9em;}
.header-area img{margin-right:5px;}
#wrap{background:#000;padding:10px;color:#ebebeb;}
.comment-area{background-color:#555;border-radius:8px; -webkit-border-radius:8px;padding:10px;color:#c9c9c9;}
.comment-area p {font-size:0.9em;}
/* .comment-area p:last-child{margin-bottom:0;} */

.high-light {font-weight:bold;color:#fff;}



/*元*/
#top{background:#000;padding:10px;color:#ebebeb;}
.header-section {margin-bottom:-10px;}
.header-section a{color:#FFF;}
.top-img img{margin-right:5px;}
/*
article -->コンテンツ(サイトまとまり)
article section(= aside)
※サイト内aside消す※
*/
article section h2{
	background-color: #555;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	padding: 10px;
	color: #c9c9c9;
}
/*---------------------
	コンテンツタイトル
--------------------*/
article .title .h2{
	background-image: -moz-linear-gradient(top, #4f494a, #1c1c1c);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#4f494a), to(#1c1c1c));
	background-image: -o-linear-gradient(top, #4f494a, #1c1c1c);
	background-image: linear-gradient(to top, #4f494a, #1c1c1c);

	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 15px;

	padding:1% 10px;
	margin:3% 5px 0px;
	border:solid 1px #A6959C;
	border-top:solid 1px #ccc;
	color:#ccc;
}
article section h3 {font-size:0.9em;}
article section p {font-size:0.9em;}
/* article section p:last-child{margin-bottom:0;} */
h1 {font-size:95%;}
h1 a{color:#fff;}
h1 img{margin-right:5px;}

h2 {
	background: url(../images/point.gif) left top no-repeat;
	padding-left: 25px;
	font-size: 121%;
	/* font-size: 130%; */
	/* text-shadow: 1px 1px 2px #ffaaaa; */
	/* color: #ff4000; */
	color: #ff4500;
	margin-bottom: 10px;
}

.title h2 {
	background-image: none;
	padding-left: 25px;
	font-size: 121%;
	color: #ffff00;
	margin-bottom: 10px;
}

h3 {
	background: url(../images/ico_m.jpg) left top no-repeat;
	padding-left: 15px;
	color: #ff4500;
	margin-bottom: 0.2em;
	min-height: 25px;
	font-size: 121%;
}

/*aside 広告系*/
aside {
	background-color: #555;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	padding: 10px;
	color: #c9c9c9;
}
aside p {font-size:0.9em;}
/* aside p:last-child{margin-bottom:0;} */

.addition {background-color:#dcdcdc;border-radius:8px; -webkit-border-radius:8px;padding:10px;color:#000;/*color:#E9ECEB;*/font-size:80%;}


a {color:#ffff00;text-decoration:none;}
img {border-radius:5px;box-shadow:5px 10px 20px rgba(0,0,0,0.25);}
p {margin-bottom:0.5em;}

hr {display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;/*border-bottom:1px solid #FF3F6E;*/}

.breadcrumbs {
/* width: 980px; */
width: auto;
/* margin: 10px auto 0; */
margin: 5px auto 3px;
}
.breadcrumbs ul {
display: table;
/* font-size: 13px; */
font-size:90%;
list-style:none;
}
.breadcrumbs ul li {
/* margin: 0 10px 0 0; */
margin: 0 3px 0 0;
/* font-size: 13px; */
font-size:90%;
float: left;
}
.breadcrumbs ul li:first-child::before {
padding: 0 3px 0 0;
content: "\f015";
font-family: FontAwesome;
/* font-size: 14px; */
font-size:95%;
}
.breadcrumbs ul li::before {
/* padding: 0 10px 0 0; */
padding: 0 3px 0 0;
content: "\f105";
font-family: FontAwesome;
/* font-size: 14px; */
font-size:95%;
}

.breadcrumb {font-size:75%;color:#fff;margin:5px;}
.breadcrumb a{color:#ffff00;}



nav {
	border-radius: 8px;
	-webkit-border-radius: 8px;
	background-color: #FF3F6E;
	background: -webkit-gradient(linear, left top, left bottom, from(#c71585), to(#FF3F6E));
	width: 300px;
  /* font-size: 107%; */
}
nav ul {
  list-style:none;
}
nav li {
  list-style:none;
	text-align: center;
	float: left;
	font-weight: bold;
	border-left: 1px solid #fff;
	text-shadow: -1px -1px 0 rgba(150, 150, 150, 0.3);
}
nav li a {
	display: block;
	width: 99px;
	padding: 8px 0;
}
nav li:first-child {
	border: none;
}
nav a {
	/* color: #fff; */
}
section, nav {
	margin-bottom: 1em;
}

button{
	width:30%;
	font-size:1em;
  margin-right:2px;
	/* margin-right:5px; */
	display:block;
	color:#E9ECEB;
	padding:0.5em;
	/* padding:10px 25px; */
	background:#9FAFAA;
	border-radius:20px;
	border:none;
	display:inline-block;
	cursor:pointer;
}
#buttons button:last-child{margin-right:0;}
button:focus{outline:none;}
button:hover{background:#717171;}

/*
#list{
	margin-right:-20px;
	padding-top:50px;
} */
/*
#list li{
	margin-right:20px;
	margin-bottom:25px;
	width:150px;
	height:150px;
	list-style-type:none;
	float:left;
} */
/*
#list li.red{background:#D2334C;}
#list li.blue{background:#404669;}
#list li.yellow{background:#F7D139;}
#list li.gray{background:#CCC;} */


.data-link {text-align:right;margin-top:1em;}

.data-note {font-size:80%;}

.category-wrap {margin: 18px 0 0;padding:10px 0 5px;}

.category_icon {
	background-color:#F2385A;
	color:#FFF;
	font-weight:bold;
	padding:3px 5px;
  margin-right:1px;
	border-radius:8px;
	white-space: nowrap;
	text-decoration:none;
}
.site_icon {
	background-color:#7abbeb;
	color:#FFF;
	font-weight:bold;
	padding:3px 5px;
	border-radius:8px;
	white-space: nowrap;
	text-decoration:none;
}
.btn_ios {
	/* background-color:#7abbeb; */
	background-color:#157BEC;
	color:#FFF;
	font-weight:bold;
	padding:2px 5px;
	border-radius:8px;
	white-space: nowrap;
}
.btn_and {
	/* background-color:#b7ee35; */
	/* background-color:#30BC2E; */
	background-color:#33cc33;
	color:#FFF;
	font-weight:bold;
	padding:2px 5px;
	border-radius:8px;
	white-space: nowrap;
	text-decoration:none;
}
.btn_pc {
	/* background-color:#979797; */
	background-color:#7abbeb;
	color:#FFF;
	font-weight:bold;
	padding:2px 5px;
	border-radius:8px;
	white-space: nowrap;
	text-decoration:none;
}
.button_link {
	/* background-color:#7abbeb; */
	background-color:#F2385A;
	color:#FFF;
	font-weight:bold;
	padding:2px 5px;
	border-radius:5px;
	white-space: nowrap;
	text-decoration:none;
	box-shadow:3px 2px #999;width:80%;font-size:1.2em;text-align:center;line-height:1;transition:.3s;
}
/* button */
.link-btn {text-align:center;margin:1em;color:#FFF;}
.link-btn a{color:#FFF;}
.link-btn .btn-a{display:inline-block;width:auto;padding:12px 15px;border:1px solid #F2385A;border-radius:5px;background:#F2385A;box-shadow:1px 2px #999;color:#FFF;font-size:1.2em;font-weight:bold;text-align:center;line-height:1;transition:.3s;background-image:-moz-linear-gradient(top, #F2385A 0%, #d93250 40%, #ef1635 52%, #d93250);background-image:-webkit-gradient(linear,left top,left bottom, from(#F2385A), color-stop(0.49,#ef1635), color-stop(0.52,#d93250), to(#d93250));}
.link-btn .btn-a:hover{border:1px solid #d93250;background:#F2385A;}

/* 公式サイトボタン */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  /* line-height: 1.5; */
  line-height: 1;
  position: relative;
  display: inline-block;
  /* padding: 1rem 4rem; */
  padding: 1rem 3rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  /* border-radius: 0.5rem; */
  border-radius: 0.7rem;
}
.official-btn-wrap {
  text-align:center;
  margin: 30px 0;
}
a.btn-c {
  /* font-size: 2.2rem; */
  font-size: 1.6rem;
  position: relative;
  /* padding: 0.25rem 2rem 1.5rem 3.5rem; */
  color: #fff;
  background: #e94919;
  box-shadow: 0 5px 0 #d44114;
  -webkit-box-shadow: 0 5px 0 #d44114;
  /* box-shadow:1px 2px #999;
  -webkit-box-shadow:1px 2px #999;
  background-image:-moz-linear-gradient(top, #F2385A 0%, #d93250 40%, #ef1635 52%, #d93250);background-image:-webkit-gradient(linear,left top,left bottom, from(#F2385A), color-stop(0.49,#ef1635), color-stop(0.52,#d93250), to(#d93250)); */
}
a.btn-c span {
  font-size: 1.5rem;
  position: absolute;
  top: -1.25rem;
  left: calc(50% - 150px);
  display: block;
  width: 300px;
  padding: 0.2rem 0;
  color: #d44114;
  border: 2px solid #d44114;
  border-radius: 100vh;
  background: #fff;
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
a.btn-c span:before,
a.btn-c span:after {
  position: absolute;
  left: calc(50% - 10px);
  content: "";
}
a.btn-c span:before {
  color: #fff;
  bottom: -10px;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #d44114 transparent transparent transparent;
}
a.btn-c span:after {
  bottom: -7px;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}
a.btn-c i {
  /* margin-right: 1rem; */
}
a.btn-c:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  color: #fff;
  background: #eb5b30;
  -webkit-box-shadow: 0 2px 0 #d44114;
  box-shadow: 0 2px 0 #d44114;
}


/*coupon-button*/
.coupon-btn-wrap {
  /* margin: 20px; */
  margin: 10px;
}
a.btn-coupon {
  line-height: 1.2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 250px;
  /* height: 120px; */
  height: 100px;
  margin: 0 auto;
  padding: 0;
}
a.btn-coupon .left {
  width: 80%;
  /* padding-top: 20px; */
  padding-top: 5px;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  border: 2px solid #e94919;
  border-right: 0;
  background: #fff;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
a.btn-coupon .left span {
  /* font-size: 1rem; */
  font-size: 1.2rem;
}
a.btn-coupon .left span.txt1 {
  /* font-size: 1.5rem; */
  font-size: 1rem;
  color: #e94919;
}
a.btn-coupon .left em {
  /* font-size: 3.5rem; */
  font-size: 1.6rem;
  font-style: normal;
  display: block;
  color: #e94919;
}
a.btn-coupon .right {
  position: relative;
  width: 20%;
  height: 100%;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  color: #fff;
  border-left: 2px dotted #fff;
  background: #e94919;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
a.btn-coupon .right span {
  /* font-size: 2rem; */
  font-size: 1.8rem;
  line-height: 1;
  position: absolute;
  top: -0.8rem;
  left: calc(50% - 0.8rem);
  display: inline-block;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
}
a.btn-coupon:hover .left {
  -webkit-transform: rotateX(-20deg);
  transform: rotateX(-20deg);
}
a.btn-coupon:hover .right {
  -webkit-transform: rotateX(-20deg) rotateY(75deg);
  transform: rotateX(-20deg) rotateY(75deg);
}

/************************************
** スライダー
************************************/
.slide-wrap{
   display:-webkit-box;
   display:-ms-flexbox;
   display: flex;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
   /* overflow-scrolling: touch; */
   scroll-snap-type: x mandatory;
   padding:0 0 1em;
   margin:0 0 1em 0;
   /* margin:0 0 2em 0; */
   scroll-behavior: smooth;
}
.slide-wrap .slide-content{
   flex: 0 0 80%;
   /* flex: 0 0 90%; */
   margin: 0 10px;
   height:100%;
   max-width:300px;
}
.slide-wrap .slide-content p{
  text-align:center;
}
@media screen and (max-width: 480px){
   .slide-wrap{
      display: flex;
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
      /* overflow-scrolling: touch; */
      scroll-snap-type: x mandatory;
      padding:0 0 1em;
      scroll-behavior: smooth;
   }
   .slide-wrap .slide-content {
      height:100%;
      flex: 0 0 78%;
      /* flex: 0 0 88%; */
      margin: 0px 5px;
      scroll-snap-align:center;
   }
}

footer {
	/* border-top: 1px solid #ebebeb; */
	padding-top: 10px;
  background: #000;
  color: #ebebeb;
}
footer p{clear:both;padding:0;font-size:0.9em;}
/* footer p:last-child{margin:0;} */
footer a{color: #ffff00;text-decoration:none;}
/* footer img {vertical-align: top;} */
#footer {background-color:#FF3F6E;padding:10px;color:#fff;}
#footer a{color: #fff;}

#btnTop {
	border-radius: 5px;
	background-color: #cbcccf;
	background: -webkit-gradient(linear, left top, left bottom, from(#cbcccf), to(#acaeb0));
	width: 7em;
	font-size: 85%;
	text-align: center;
	float: right;
	margin-right: 10px;
}
#btnTop a {
	text-shadow: 1px 1px 0 #ddd;
	display: block;
	padding: 5px 0;
	color: #444;
	text-decoration: none;
}
/* ページ上部へ */
.totop{display:none;position:fixed;bottom:100px;right:20px;width:50px;height:30px;background-color:#fff;border-radius:3px;border:1px solid #777;box-shadow:5px 10px 20px rgba(0,0,0,0.25);}
.totop-a{display:block;color:#777;height:100%;font-size:13px;border-radius:3px;text-align:center;padding:7px 0;}
/* clearfix */
.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}