@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0;}

body{text-align: center;
	background-image:url(../images/bg.jpg);
	background-position: center top;
	background-size: auto;
                                background-repeat: no-repeat;
	background-color: #ffffff;
	color: #f6ebb2;
	background-attachment: scroll;
	font-size: 90%; line-height: 180%;
                                font-family: "Sawarabi Mincho", 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;}

.background-hack {z-index: -2;
	background-image:url(../images/bg.jpg);
	background-position: center top;
	background-size: 100%;
                                background-repeat: no-repeat;
	background-color: #ffffff;
	position: scroll;
	top: 0; left: 0; right: 0; bottom: 0;}

a:link {color: #7521a3; text-decoration: none;}
a:visited {color: #7521a3; text-decoration: none;}
a:hover {color: #7521a3; text-decoration: none;
	-webkit-transition: 0.2s;
	transition: 0.2s;}

/*top*/
.top-container {width: 1080px;}

.top-logo {padding: 10px 0px 0px 0px;
                                text-align: center;}

.main-copy {padding: 0px 0px 0px 0px;
                                text-align: center;}

.main-txt {padding: 20px 0px 20px 0px;
                                text-align: center;
                                font-size: 140%; line-height: 180%;}

.main-kv {padding: 0px 0px 0px 0px;
                                text-align: center;}

.infomation {padding: 40px 0px 60px 0px;
	background: rgba(21,0,81,0.5);
                                text-align: center;}

.order {padding: 40px 0px 60px 0px;
	background: rgba(21,0,81,0.7);
                                text-align: center;}

.meter {margin: 0 auto;
                                padding: 50px 0px 0px 0px;
                                width: 879px;}

.meter4 {padding: 0px 0px 0px 0px;
                                float: left;}


.tokuten {margin: 0 auto;
                                padding: 0px 0px 0px 0px;
                                width: 800px;}

.tokuten1 {width: 160px; text-align: left;
                                font-size: 160%; line-height: 160%;
                                float: left;}
.kettei {padding: 10px 0px 0px 10px;}

.tokuten2 {width: 640px; text-align: left;
                                font-size: 110%; line-height: 160%;
                                float: left;}

.txtMM {padding: 5px 0px 10px 0px;
	color: #ffffff;
                                font-size: 130%; line-height: 160%;}

.news {margin: 8px 0px 0px 0px;
                                padding: 8px 18px 9px 18px;
                                border: 1px solid #ffffff;
	color: #ffffff;
                                font-size: 105%; line-height: 160%;}

.news-mark {padding: 2px 10px 2px 10px;
	color: #78318d;
                                text-decoration: bold;
	background: #f6ebb2;
                                font-size: 90%; line-height: 160%;}

.end-mark {margin: 0 auto;
                                margin-top: 10px;
                                width: 320px; text-align: center;
                                padding: 2px 10px 2px 10px;
                                text-decoration: bold;
	background: #1b296c;
                                font-size: 85%; line-height: 160%;}

.line {margin: 30px 0px 30px 0px;
                                width: 100%; height: 1px; text-align: left;
	background-color: #a4959c;}

.cv-btn {
	padding: 20px 0px 40px 0px;
	width: 100%; height: auto;}


.title {padding: 0px 0px 40px 0px;
                                text-align: center;}

.txtL {padding: 0px 0px 0px 0px;
                                font-size: 160%; line-height: 160%;}

.txtM {padding: 0px 0px 0px 0px;
                                font-size: 130%; line-height: 180%;}

.txtS {margin-top: 10px; font-size: 85%; line-height: 160%;}

/*sns*/
.sns-container {width: 1080px;}

.sns-box {padding: 60px 0px 0px 0px;
	width: 306px;}

.sns-btn {padding: 0px 28px 0px 28px;
	float: left;}


/*footer*/
.footer-box {padding: 50px 0px 0px 0px;
	width: 517px;}
.footer-banner {padding: 0px 10px 30px 10px;
	float: left;}

.footer-txt {font-size: 75%; line-height: 160%; color: #303030;}
.footer-txt a:link {color: #542d66; text-decoration: none;}
.footer-txt a:visited {color: #542d66; text-decoration: none;}
.footer-txt a:hover {color: #8b36b9; text-decoration: none;
	-webkit-transition: 0.2s;
	transition: 0.2s;}

/*pagetop*/
#page-top {margin: 0px; padding: 0px;
	position: fixed;
	bottom: 110px;
	right: 50px;}

#page-top a {margin: 0px; padding: 0px;
	width: 110px;
	height: 110px;
	display: block;}

/*fadein*/
.fadein {opacity : 0;
	transform : translate(0, 50px);
	transition : all 500ms;}

.fadein.scrollin {opacity : 1;
	transform : translate(0, 0);}

/*delay*/
.delay1{animation: delay 1s ease 200ms 1 normal;
	animation-fill-mode: backwards;}
.delay2{animation: delay 1s ease 400ms 1 normal;
	animation-fill-mode: backwards;}
.delay3{animation: delay 1s ease 600ms 1 normal;
	animation-fill-mode: backwards;}
.delay4{animation: delay 1s ease 800ms 1 normal;
	animation-fill-mode: backwards;}
.delay5{animation: delay 1s ease 1000ms 1 normal;
	animation-fill-mode: backwards;}
.delay6{animation: delay 1s ease 1200ms 1 normal;
	animation-fill-mode: backwards;}
.delay7{animation: delay 1s ease 1400ms 1 normal;
	animation-fill-mode: backwards;}
.delay8{animation: delay 1s ease 1600ms 1 normal;
	animation-fill-mode: backwards;}

@keyframes delay {0% {opacity:0;}
	100% {opacity:1;}}

.clear{clear:both;}

/*●751px以上
======================================*/
@media only screen and (min-width: 751px) {
.sponly{display: none;}

/**/}

/*●750px以下（SP）
======================================*/
@media only screen and (max-width: 750px) {
.pconly {display: none;}

/*top*/
.top-container {width: 100%;}

.top-logo {margin: 2% 5% 0% 5%;
                                width: 90%;}
.top-logo img {width: 100%; height :auto;}

.main-copy {margin: 0% 5% 0% 5%;
                                width: 90%;}
.main-copy img {width: 100%; height :auto;}

.main-txt {padding: 4% 5% 3% 5%;
                                width: 90%;
                                text-align: center;
                                font-size: 130%; line-height: 180%;}

.main-kv {margin: 0% 0% 0% 0%;
                                width: 100%;}
.main-kv img {width: 100%; height :auto;}

.infomation {margin: 12% 5% 0% 5%;
                                padding: 12% 5% 12% 5%;
                                width: 80%;}

.order {margin: 12% 5% 0% 5%;
                                padding: 12% 5% 12% 5%;
                                width: 80%;}

.meter {margin: 0 auto;
                                padding: 8% 5% 0% 5%;
                                width: 90%;}

.meter4 {padding: 0% 0% 0% 0%;
                                float: none;}
.meter4 img {width: 100%; height :auto;}

.tokuten {margin: 0 auto;
                                padding: 0% 0% 0% 0%;
                                width: 100%;}

.tokuten1 {width: 100%;
                                font-size: 160%; line-height: 160%;
                                float: none;}

.kettei {padding: 0px 0px 10px 10px;}

.tokuten2 {width: 100%;
                                font-size: 110%; line-height: 160%;
                                float: none;}

.txtMM {padding: 5px 0px 16px 0px;
                                font-size: 130%; line-height: 160%;}

.news {margin: 2% 0px 0px 0px;
                                padding: 2% 3% 2% 3%;
                                border: 1px solid #ffffff;
	color: #ffffff;
                                }

.end-mark {margin-top: 4%;
                                width: 60%; text-align: center;
                                padding: 1% 3% 1% 3%;
                                font-size: 95%;}

.cv-btn {padding: 0% 0% 5% 0%;
	width: 100%; height: auto;}
	.cv-btn img{width: 100%; height: auto;}



.title {padding: 0% 5% 12% 5%;
                                text-align: center;}

.txtL {font-size: 150%; line-height: 160%;}

.txtM {font-size: 120%; line-height: 180%;}

/*sns*/
.sns-container {margin: 0 auto;
                                padding: 10% 0% 10% 0%;
	width: 100%;}

.sns-box {margin: 0 auto; padding: 0px;
	width: 258px;}
.sns-btn {padding: 15px 20px 0px 20px;
	float: left;}



/*footer*/
.footer-box {margin: auto 0;
                                padding: 10% 5% 8% 5%;
	width: 90%;}
.footer-banner {padding: 0 10 6% 0;
	float: none;}
.footer-txt {font-size: 75%; line-height: 150%;}

/*pagetop*/
#page-top {bottom: 100%;
	right: 0px;}

#page-top a {width: 100%;
	height: 100%;}

#page-top img {width: 80%; height :auto;}

/**/}



/*●480px以下（SP）
======================================*/
@media only screen and (max-width: 480px) {

#page-top {right: -5%;}
#page-top img {width: 50%; height :auto;}


/**/}

/*●321px以下（SP）
======================================*/
@media only screen and (max-width: 321px) {
body{font-size: 80%;}


/**/}