@charset "UTF-8";

/*--------------------------------
common
--------------------------------*/
* {
	margin: 0;
	padding: 0
}
*:focus {
	outline: none!important;
}
h1, h2, h3, p {
	margin: 0;
}
body {
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, Verdana, sans-serif;
	background: #fff;
}
sup, sub {
	font-size: .75em;
}
a {
	opacity: 1;
}
a:hover {
	opacity: .8;
	transition: .4s;
}
.mr30p{margin-right:30%!important;position:relative;}
.ml30p{margin-left:30%!important;position:relative;}
.mr30p span{position:absolute;bottom:0;right:-55%;}
.ml30p span{position:absolute;bottom:0;left:-55%;}
/*--------------------------------
header
--------------------------------*/
header {
	background: url("../img/bg-hero01.jpg") repeat;
	background-position: center center;
	background-size: auto;
}
header .ttlbox {
	position: relative;
}
header .ttlbox a.btn {
	position: absolute;
	bottom: 3%;
	left: 0;
	right:0;
	width: 27.7%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
header .ttlbox a img{width:100%;}
header .ttlbox a.btn2 {
	position: absolute;
	bottom: 28%;
	left: 0;
	right:0;
	width: 25.5%;
	height: auto;
	margin-left: 27.5%;
	margin-right: 48%;
	max-width:299px;
}
/*- navi ----------*/
nav {
	font-size: 14px;
	font-weight: bold;
	background: #fff;
	border-bottom: 3px solid #E6E6E6;
}
nav.navbar {
	padding: 10px 0;
}
nav .navbar-brand img {
	width: auto;
	max-height: 40px;
}
nav .nav-link {
	color: #000!important;
}
nav .nav-link:hover,
nav .nav-link.active {
	position: relative;
	color: #0071e8!important;
}
nav .nav-link:hover:after,
nav .nav-link.active:after {
	position: absolute;
	content: "";
	bottom: -14px;
	left: 0;
	width: 100%;
	height: 3px;
	border-bottom: 3px solid #0071e8;
}
.navbar-toggler {
	border: none;
	padding: 0;
}
.navbar-toggler:focus {
	box-shadow: none;
}
.navbar-toggler .navbar-toggler-icon.open {
	background-image: url("../img/img-nav01.png");
	width: 34px;
	height: 40px;
}
.navbar-toggler .navbar-toggler-icon.close {
	background-image: url("../img/img-nav02.png");
	width: 34px;
	height: 40px;
}
/*- head ----------*/
#head h1 img {
	max-width: 100%;
	width: 100%;
}

/*--------------------------------
main
--------------------------------*/
.sp {
	display: none;
}
main section {
	padding: 90px 0 115px 0;
}
h2 img.pc {
	max-width: 100%;
	width: auto;
	max-height: 114px;
	height: 100%;
	margin-bottom: 50px;
}
h2 img.sp {
	max-width: 100%;
	width: auto;
	margin-bottom: 50px;
}
.ttl-img img {
	max-width: 283px;
	width: 100%;
}
.btn-img img {
	max-width: 318px;
	width: 100%;
	margin: 26px 0 22px 0;
}
/*- fadeUp ----------*/
.fadein {
	opacity: 0;
	transform: translate3d(0, 30px, 0);
}
.fadein.active {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: 1s;
}
/*- banner ----------*/
#banner {
	padding: 32px 0 52px 0;
	background:#e5f1fd;
}
#banner img {
	max-width: 1010px;
	width: 100%;
}
#banner .ttlbox{
	margin-bottom:30px;
}
/*- digital ----------*/
#digital {
	background: rgb(0,169,195);
	background: url('../img/bg01.jpg')no-repeat top center/100% 100%;
}
#digital .col-6 {
	display: flex;
}
#digital .box {
	background-color: #fff;
	padding: 16px;
}
#digital .box img {
	width: 100%;
	margin-bottom: 30px;
}
/*- use ----------*/
#use {
	background: rgb(0,169,195);
	background: #e5f1fd;
}
#use .box {}
#use .box img {
	width: 100%;
}
#use .txt-img img.pc {
	max-width: 508px;
	width: 100%;
}
#use .txt-img img.sp {
	max-width: 644px;
	width: 100%;
}
/*- application ----------*/
#application {
	background: url("../img/bg02.jpg") no-repeat top center/100% 100%;
}
#application .box img.pc {
	max-width: 900px;
	width: 100%;
}
#application .box img.sp {
	width: 100%;
}
/*- coupon ----------*/
#coupon {
	background: url("../img/bg-gift03.jpg")repeat-x bottom left/auto;
	background-color: #FFFDED;
	padding-bottom: 220px;
}
#coupon .box img.pc {
	max-width: 938px;
	width: 100%;
}
#coupon .box img.sp {
	max-width: 700px;
	width: 100%;
}
#coupon .box-sub{
	position:absolute;
	bottom:74%;
	left:52%;
	right:30%;
	width:18%;
	max-width:356px;
}
/*- cardnumber ----------*/
#cardnumber {
	background: url("../img/bg03.jpg") no-repeat top center/100% 100%;
	overflow: hidden;
}
#cardnumber .txt {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 18px;
}
#cardnumber .small {
	font-size: 15px;
	margin-bottom: 60px;
}
.fumetsu {
	font-size: 10px;
}
/* slide-box */
#cardnumber .slide-box {
	position: relative;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}
/* slide */
#cardnumber .slide-box p{margin-left:15%;}

/*- card ----------*/
#card{
	background:#e5f1fd;
}
#card h3 {
	font-size: 18px;
	font-weight: bold;
	border-bottom: 1px solid #000;
	padding-bottom: 12px;
	margin-bottom: 12px;
}
#card .col-md-6 .logo img {
	width: 72px;
	padding: 0 10px;
}
#card .col-md-6 .service img {
	width: 100%;
	padding: 0 10px;
}
#card .box {
	border: 1px solid #000;
	background:#FFF;
}
#card .box .ttl {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid #000;
	padding: 8px 30px;
}
#card .box .txt {
	font-size: 14px;
	padding: 20px 30px;
}
/*- faq ----------*/
#faq{
	background:url('../img/bg04.jpg')no-repeat top center/100%;
}
#faq h2 {
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 14px;
}
#faq .modal_dl {
	font-size: 18px;
	border: 1px solid #000;
	margin-bottom: 0;
}
#faq .modal_dl dt {
	position: relative;
	font-weight: normal;
	background-color: #fff;
	padding: 12px 60px 12px 70px;
}
#faq .modal_dl dt:not(:last-of-type) {
	border-bottom: 1px solid #000;
}
#faq .modal_dl dt:hover {
	cursor: pointer;
}
#faq .modal_dl dt:before {
	position: absolute;
	content: "";
	top: 50%;
	left: 40px;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	background: url("../img/ico-faq01.png") no-repeat;
	background-size: auto;
	width: 24px;
	height: 30px;
}
#faq .modal_dl dt:after {
	content: "";
	position: absolute;
	right: 15px;
	top: calc(50% - 10.5px);
	width: 25px;
	height: 25px;
	background: url("../img/ico-plus.png") no-repeat center center;
	background-size: 100%;
}
#faq .modal_dl dt.active:after {
	background: url("../img/ico-minus.png") no-repeat center center;
	background-size: 100%;
	border: 1px solid #fff;
}
#faq .modal_dl dd {
	position: relative;
	line-height: 1.5;
	padding: 12px 70px;
	background-color: #FFFDED;
	margin-bottom: 0;
}
#faq .modal_dl dd:not(:last-of-type) {
	border-bottom: 1px solid #000;
}
#faq .modal_dl dd:last-child {
	border-top: 1px solid #000;
}
#faq .modal_dl dd:before {
	position: absolute;
	content: "";
	top: 50%;
	left: 40px;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	background: url("../img/ico-faq02.png") no-repeat;
	background-size: auto;
	width: 24px;
	height: 30px;
}

/* MODAL */
.modaal-wrapper{background:#e5f1fd;}
.modaal-content-container{border:2px solid #000;}
.modal-box{
	border-left:6px solid #f2f2f2;
	padding:15px;
	margin-bottom:20px;
}
.first{width:25%;font-weight:bold;}
.second{width:75%;}
.modal-box table{margin-top:1rem;}
.modal-box table th{
	background:#0071e8;
	color:#FFF;
	padding:.75rem 1rem;
	border:1px solid #808080;
}
.modal-box table td{
	padding:.5rem 1rem;
	border:1px solid #808080;
}

/*--------------------------------
media
--------------------------------*/
@media (min-width: 992px) {
	header .container,
	footer .container {max-width: 1224px;}
	main .container {max-width: 1024px;}
	nav #navbar.navbar-collapse {display: block!important;}
}
@media screen and (min-width: 769px) {
	#design .slide {
		width: 637px;
		height: 549px;
		background-size: 637px 549px;
	}
	#design .slide .item img {
		width: 390px;
		bottom: 60px;
	}
}
@media all and (min-width: 769px) and (-ms-high-contrast: none) {
	#design .slide .item img {
		bottom: 280px;
	}
}
@media (max-width: 991px) {
	header .ttlbox a img {bottom:12%;}
	nav .navbar-collapse {padding: 10px 0;}
	nav .nav-item {margin: 5px 0;}
	nav .nav-link:hover:after,
	nav .nav-link.active:after {bottom: 0;}
	.mr30p span {right: -65%;z-index:5;max-width:40%;}
	.ml30p span {left: -65%;z-index:5;max-width:40%;}
	.mr30p span img,.ml30p span img{width:100%;}
	main{overflow-x:hidden;}
	#digital,#use,#application,#design {background-size:auto 100%;}
	/*- use ----------*/
	#use .box {}
}
@media (max-width: 767px) {
	body {font-size: .9em;}
	.pc {display: none!important;}
	.sp {display: inline-block!important;}
	h1 {font-size: 28px;}
	h2 {font-size: 18px;}
	.mr30p,.ml30p{width:60%;}
	.mr30p span {bottom:40%;right: -80%;max-width:70%;}
	.ml30p span {bottom:40%;left: -80%;max-width:70%;}
	/*- header ----------*/
	header .ttlbox a.btn {bottom: 4%;width:90%;margin-left: 5%;margin-right: 5%;}
	header .ttlbox a.btn2 {bottom: 38%;width: 45%;margin-left: 7%;margin-right: 5%;}
	#head .row .col-12{padding:0!important;}
	#head .btn{}
	/*- use ----------*/
	#use .box {margin: 0 10%;}
	/*- coupon ----------*/
	#coupon {
		background:url('../img/bg-gift03_sp.jpg')no-repeat bottom center/100%;
		background-color: #FFFDED;
		padding-bottom: 40%;
	}
	#coupon .box-sub{bottom:37%;left:6%;right:54%;width:40%;}
	/*- design ----------*/
	#cardnumber .slide {width: 100%;}
	#cardnumber .slide-box p{margin-left:0;}
	/* MODAL */
	.modaal-container{width: 95%;}
	.modal-box{border-left:none;margin-bottom:0;}
	.first{width:100%;font-weight:bold;border-left:6px solid #f2f2f2;padding:5px 10px;margin-bottom:10px;}
	.second{width:100%;}
	.modal-box table,.modal-box table tbody,
	.modal-box table tr{width:100%;}
	.modal-box table th,
	.modal-box table td{width:100%;display:inline-block;text-align:center;}
}
@media (max-width: 567px) {
	.mr30p {margin-right: 40%!important;width: 50%;}
	.ml30p {margin-left: 40%!important;width: 50%;}
	.mr30p span {bottom:30%;right: -100%;max-width:95%;}
	.ml30p span {bottom:30%;left: -100%;max-width:95%;}
}

/*--------------------------------
script
--------------------------------*/
.sa {opacity: 0; transition: all .5s ease;}
.sa.show {opacity: 1; transform: none;}
.sa--lr {transform: translate(-100px, 0);}
.sa--rl {transform: translate(100px, 0);}
.sa--up {transform: translate(0, 100px);}
.sa--down {transform: translate(0, -100px);}
.sa--scaleUp {transform: scale(.5);}
.sa--scaleDown {transform: scale(1.5);}
.sa--rotateL {transform: rotate(180deg);}
.sa--rotateR {transform: rotate(-180deg);}