﻿
#container {
	font-size: 88%;
	font-family:"游ゴシック Bold", "游ゴシック体", "Yu Gothic Bold", "游ゴシック", "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 700;
}
.section {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 960px;
	padding: 85px 0px;
	margin: 0 auto;
}
.section > .inner {
	padding: 15px;
}
.ttl {
	text-align: center;
	margin-bottom: 65px;
	line-height: 1;
}
.ttl .sub-ttl {
	font-size: 18px;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	margin: 0;
	border-bottom: 2px solid #242424;
	position: relative;
	padding-bottom: 6px;
	margin-bottom: 30px;
	display: inline-block;
}
.ttl .sub-ttl:before, .ttl .sub-ttl:after {
	content: "";
	width: 8px;
	height: 2px;
	display: block;
	position: absolute;
}
.ttl .sub-ttl:before {
	background: #fafafa;
	bottom: -2px;
	left: 50%;
	z-index: 10;
}
.ttl .sub-ttl:after {
	background: #242424;
	transform: rotate(55deg);
	bottom: -5px;
	left: 50%;
	margin-left: 1px;
	z-index: 20;
}
.ttl .sub-ttl span {
	color: #bc0208;
}
.ttl .sub-ttl.en {
	font-style: italic;
	letter-spacing: normal;
	text-indent: 0;
}
.ttl h2 {
	display: block;
	font-size: 37px;
	text-align: center;
	margin: 0 auto;
	letter-spacing: 0.25em;
	text-indent: 0.25em;
}
.cmn-ttl {
	font-size: 34px;
	padding-bottom: 15px;
	text-align: center;
}
.separator {
	width: 100%;
}
/* item-list */


.item-list ul {
	letter-spacing: -.4em;
}
.item-list ul li {
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
}
.item-list ul li a {
	display: block;
}

#slidewrap a:hover,
.item-list ul li a:hover {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
	text-decoration: none;
}
.item-list ul li a img {
	display: block;
}
.item-list ul li a .baloon {
	display: inline-block;
}
.item-list ul li a .baloon {
	position: relative;
	background-color: #ffaf03;
	color: #fff;
	font-size: 86%;
	line-height: 1;
	margin-top: 10px;
	padding: 5px;
	text-align: center;
}
.item-list ul li a .baloon::before {
	position: absolute;
	content: "";
	border-bottom: solid 8px #ffaf03;
	border-right: solid 4px transparent;
	border-left: solid 4px transparent;
	top: -8px;
	left: 50%;
	margin-left: -4px;
}
/* slidewrap */
#slidewrap {
	padding:15px 0;
	background:#fff;
	overflow: hidden;
	position:relative;
}

#slidewrap .slick-slide {
	width:1200px;
	padding:0 5px;
	float:left;}

#slidewrap .slick-slide.sp_only {
	display:none;}

#slidewrap .slick-next,
#slidewrap .slick-prev {
	position:absolute;
	border:0;
	top:160px;
	z-index:1;
	cursor:pointer;}

#slidewrap .slick-prev {
	left:20px;
	padding: 0;
	border-top: 4px solid #666;
  	border-right: 4px solid #666;
	background: none;
	width:30px;
	height:30px;
	text-indent:-99999px;
	transform: rotate(-135deg);}

#slidewrap .slick-next {
	right:20px;
	border-top: 4px solid #666;
  	border-right: 4px solid #666;
	background: none;
	transform: rotate(45deg);
	width:30px;
	height:30px;
	text-indent:-99999px;}

#slidewrap .slick-dots,
#service .slick-dots {
	text-align: center;
	padding: 18px 0;
	line-height: 0;
}
#slidewrap .slick-dots li[id^="slick-slide"],
#service .slick-dots li[id^="slick-slide"] {
	display: inline-block;
	margin: 0 8px;
}

#slidewrap .slick-dots button,
#service .slick-dots button {
	font-size: 0;
	line-height: 0;
	display: block;
	width: 10px;
	height: 10px;
	padding: 5px;
	cursor: pointer;
	color: transparent;
	border: 0;
	outline: none;
	background: transparent;
	position: relative;
}
#slidewrap .slick-dots button:before,
#service .slick-dots button:before {
	position: absolute;
	left: 0;
	top: 0;
	background: #e4e1e1;
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
#slidewrap .slick-dots li.slick-active button:before,
#service .slick-dots li.slick-active button:before {
	background: #c00000;
}
/* information */
#information {
	background-color: #333;
	color: #fff;
	font-size: 115%;
}
#information .inner {
	position:relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 960px;
	margin: 0 auto;
	padding: 20px 0;
	font-size:14px;
}

#information .inner dl {
	display:table;
	padding:0;}

#information .inner dl dt,
#information .inner dl dd {
	display:table-cell;}

#information .inner dl dt {
    color: #ccc;
    border: 1px solid #ccc;
    text-align: center;
    font-weight: bold;
	vertical-align:middle;
    width: 150px;}

#information .inner dl dd{
	padding-left:20px;
	}

#information .inner dl dd li{
	margin-bottom:5px;}

#information .inner dl dd li span {
	padding-right:10px;
	font-size:12px;}

#information .inner dl dd li:last-child {
	margin:0;}

#information dl dd a{
	color:#fff;
	text-decoration:none;}

#information dl dd a:hover {
	text-decoration:underline;}



/* cam */
#cam .item-list ul {
	margin-left: -45px;
}
#cam .item-list ul li {
	margin-left: 46px;
	margin-top: 20px;
}

#cam .item-list ul li.sp_only{
	display:none;}

/* coupon */

#coupon {
	background:#f3f2ee;}


#coupon h2.cmn-ttl {
	background: url(../img/ttl_ribon_bg.png) left bottom repeat-x;
	line-height:60px;
	color:#fff;
	padding:0;
    text-shadow: #ff9d03 1px 2px 0;
	}

#coupon .txt-gray{
	text-align:center;
	font-size:16px;
	padding:15px 0 0;}

#coupon h3 {
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
	font-weight: normal;
	padding: 0 20px;
    line-height: 42px;
    height: 40px;
	width: 11em;
	color: #fff;
    font-size: 18px;
	background: #333;
	margin:0 auto;
}
#coupon .item-list ul {
	margin-left: -65px;
}
#coupon .item-list ul li {
	margin-left: 65px;
	margin-top: 10px;
}

#coupon .item-list ul li img {
	width:276px;
	height:auto;
}

#coupon #howto {
	background:#fff;
	padding:20px;
	margin-top:30px;
	border-radius: 10px;        /* CSS3草案 */
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 10px;   /* Firefox用 */ }

#coupon #howto h2 {
    margin: 5px 0 14px;
	padding-bottom:5px;
    color: #333;
	text-align:center;
    font-size: 22px;
    border-bottom: 1px solid #f3f2ee;}

#coupon #howto ul {
	min-height:200px;
	width:860px;
	font-size:14px;
	margin:0 auto;}

#coupon #howto ul li {
	float:left;
	width:200px;
	padding-top:210px;
	margin:0 20px 0 0;}
#coupon #howto ul li p {
		line-height:1.5em;}

#coupon #howto ul li .small {
	font-size:10px;
	color:#aaa;}

#coupon #howto ul li:last-child {
	margin:0;}

#coupon #howto ul li.no01 {
	background:url(/coupon/img/howto01.gif) no-repeat center top;}

#coupon #howto ul li.no02 {
	background:url(/coupon/img/howto02.gif) no-repeat center top;}

#coupon #howto ul li.no03 {
	background:url(/coupon/img/howto03.gif) no-repeat center top;}

#coupon #howto ul li.no04 {
	background:url(/coupon/img/howto04.gif) no-repeat center top;}


#coupon .item-list ul li a .baloon.diamond { background-color: #000000;}
#coupon .item-list ul li a .baloon.platinum { background-color: #2d7da7;}
#coupon .item-list ul li a .baloon.silver { background-color: #838383;}
#coupon .item-list ul li a .baloon.gold { background-color: #dda637;}

#coupon .item-list ul li a .baloon.diamond::before { border-bottom-color: #000000;}
#coupon .item-list ul li a .baloon.platinum::before { border-bottom-color: #2d7da7;}
#coupon .item-list ul li a .baloon.silver::before { border-bottom-color: #838383;}
#coupon .item-list ul li a .baloon.gold::before { border-bottom-color: #dda637;}







/* recommended */
#recommended .item-list ul {
	margin-left: -65px;
}
#recommended .item-list ul li {
	width: 276px;
	margin-left: 63px;
	margin-top: 10px;
	text-align: left;

}

#recommended .item-list ul li img {
	width: 274px;
    height: auto;
	border: 1px solid #ccc;
}


#recommended .item-list ul li a  {
	color: #535453;
	font-size: 115%;
}
#recommended .item-list ul li a span  {
	display: block;
}
#recommended .item-list ul li a span.ttl  {
	font-weight: bold;
	padding-top:10px;
}
/* preset */
.fs16 {font-size: 115%;}
.m-t-80 {margin-top: 80px !important;}
.txt-gray {color: #535453;}


/* site_list */
#site_list {
	background: #fafafa;
}
#site_list .menu {
	margin-bottom: 65px;
	letter-spacing: -.4em;
}
#site_list .menu li {
	width: 300px;
	height: 55px;
	display: inline-block;
	letter-spacing: normal;
	margin-right: 30px;
	margin-bottom: 30px;
}
#site_list .menu li:nth-child(3n+3) {
	margin-right: 0;
}
#site_list .menu li:nth-child(n+4) {
	margin-bottom: 0;
}

#site_list .menu li a {
	background: #fff;
	-webkit-box-sizing: border-box;
	box-sizing : border-box;
	border: 2px solid #242424;
	display: block;
	font-size: 18px;
	height: 100%;
	position: relative;
	color: #000;
}
#site_list .menu li a:hover {
	opacity: 0.5;
}
#site_list .menu li a:before {
	content: "";
    bottom: 0;
    right: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid #242424;
    position: absolute;
    z-index: 10;
}
#site_list .menu li a span, #site_list .menu li a em {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	height: 100%;
}
#site_list .menu li a span {
	width: 62px;
	position: relative;
}
#site_list .menu li a span img {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -20px;
	margin-top: -17px;
}
#site_list .menu li a em {
	width: 234px;
	text-align: center;
	line-height: 51px;
	position: relative;
}
#site_list .menu li a em:before {
	content: "";
	background: #242424;
	width: 1px;
	height: 26px;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -13px;
}
#site_list .item-list {
	background: url(../img/bg_border.gif) repeat-x bottom;
	margin-bottom: 85px;
}
#site_list .shop-box {
	text-align: center;
	background: url(../img/bg_border.gif) repeat-x top;
	padding: 40px 0;
}
#site_list .shop-box h3 {
	font-size: 19px;
	margin-bottom: 13px;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
}
#site_list .shop-box > ul {
	width: 778px;
	text-align: left;
	margin: 0 auto;
	letter-spacing: -.4em;
}
#site_list .shop-box li {
	margin-right: 30px;
	display: inline-block;
	letter-spacing: normal;
	vertical-align: bottom;
}
#site_list .shop-box li:nth-child(n+5) {
	margin-top: 30px;
}
#site_list .shop-box li:nth-child(4n) {
	margin-right: 0;
}
#site_list .shop-box li a {
	border: 2px solid #242424;
	position: relative;
	display: block;
}
#site_list .shop-box li a .login {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}
#site_list .shop-box li a .login img {
	display: block;
}
#site_list .shop-box li .icon {
	margin-bottom: 5px;
	letter-spacing: -.4em;
}
#site_list .shop-box li .icon span {
	display: inline-block;
	letter-spacing: normal;
	margin-right: 3px;
}
#site_list .view_all {
	text-align: center;
	width: 300px;
	margin: 0 auto;
}
#site_list .view_all a {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 2px solid #242424;
	display: block;
	line-height: 50px;
	font-size: 17px;
	letter-spacing: 0.25em;
	text-indent: 0.25em;
	background: #fff;
	position: relative;
	overflow: hidden;
	-webkit-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
}
#site_list .view_all a:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border-radius: 50%;
    -webkit-border-radius: 50%;
	background: #242424;
	-webkit-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
}
#site_list .view_all a:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 0;
	height: 0;
	margin-top: -4px;
	border: 4px solid transparent;
	border-left: 4px solid #fff;
	-webkit-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
}

#site_list .view_all a:hover {
	background: #242424;
	color: #fff;
	text-decoration: none;
}
#site_list .view_all a:hover:before {
	background: #fff;
	right: 15px;
}
#site_list .view_all a:hover:after {
	border-left: 4px solid #242424;
	right: 15px;
}
/* point */
#point {
	background: #fff;
}
#point .section .title {
	position: relative;
}

.note {
	position: absolute;
	left: 655px;
	top: -13px;
}


.about_pay_box {
	width: 950px;
	margin: 0 auto;
}

.payList-detail{
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	margin: 60px auto 10px;
}
.pay_point_about {
	text-align: center;
	font-weight: normal;
	margin-bottom: 0;
}
.pay_point_note {
  font-weight: normal;
  font-size: 13px;
  margin-top: 25px;
}

/* how-to */
#how-to {
	background: #fafafa;
}
#how-to .item-list {
	letter-spacing: -.4em;
}
#how-to .item-list dl{
	display: inline-block;
	width: 215px;
	margin-right: 33px;
	letter-spacing: normal;
	text-align: center;
}
#how-to .item-list dl:last-child {
	margin-right: 0;
}
#how-to .item-list dt {
	padding: 45px 0;
	position: relative;
	z-index: 10;
}
#how-to .item-list dt span {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 20;
}
#how-to .item-list dd {
	font-size: 15px;
	letter-spacing: 0.1em;
	text-indent: 0.1em;
}

/* service */
#service {
	background: #fff;
}
#service .slide_selector {
	position: relative;
}
#service .slick-slide {
	padding: 0 26px;
}
#service .slick-prev,
#service .slick-next{
	position:absolute;
	border:0;
	top:60px;
	z-index:1;
	overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
	cursor:pointer;}

#service .slick-prev {
	left:-50px;
	padding: 0;
	border-top: 4px solid #666;
  	border-right: 4px solid #666;
	background: none;
	width:30px;
	height:30px;
	transform: rotate(-135deg);}

#service .slick-next {
	right:-50px;
	padding: 0;
	border-top: 4px solid #666;
  	border-right: 4px solid #666;
	background: none;
	transform: rotate(45deg);
	width:30px;
	height:30px;}

#service .slick-list {
	position: relative;
	overflow: hidden;
}

#service .slick-list img {
	width: 150px;
	height: auto;
}


.note_area {
	width: 960px;
	margin: 0 auto -30px;
	font-size: 16px;
	font-weight: normal;
}
