@charset "utf-8";

body {
	background: #fff;
	font-family: 'Small Fonts','Helvetica','ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN','Yu Gothic UI','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}

.inner {
	width: 100%;
	max-width: 640px;
}

#spcl-head {
	position: relative;
	width: 100%;
	height: calc(100vw / 640 * 33);
	background: #F00;
}

#spcl-nishijin {
	position: absolute;
	width: 16.5625%;
	top: calc(100vw / 640 * 5);
	left: 12.34375%;
}

#content {
	width: 100%;
	height: auto;
}

#content.lazyloaded {
	background: url(../images/spcl_bg.jpg) no-repeat top center;
	background-size: 100% auto;
}

#spcl-top-img {
	position: relative;
	width: 93.4375%;
	height: calc(100vw / 640 * 704);
	left: 6.5625%;
}

#spcl-top-img.lazyloaded {
	background: url(../images/spcl_top_img.png) no-repeat top center;
	background-size: cover;
}

#spcl-top-end {
	position: absolute;
	width: 36.875%;
	height: calc(100vw / 640 * 253);
	top: calc(100vw / 640 * 196);
	left: 9.375%;
}

#spcl-top-end.lazyloaded {
	background: url(../images/spcl_cp_end_01b.png) no-repeat top center;
	background-size: cover;
}

#free-dl {
	position: relative;
	margin-top: calc(100vw / 640 * -233);
}

#dl-cont-01 {
	position: relative;
	width: 81.40625%;
	height: calc(100vw / 640 * 101);
	margin: 0 auto;
}

#dl-cont-01.lazyloaded {
	background: url(../images/spcl_dl_cont_01.png) no-repeat top center;
	background-size: cover;
}

#dl-slct {
	position: relative;
	margin-top: calc(100vw / 640 * 16);
}

#dl-slct img {
	width: 18.59375%;
	cursor: pointer;
	margin: 0 0.3125%;
}

#tab-dl-01-on,#tab-dl-02-on,#tab-dl-03-on,#tab-dl-04,#dl-01,#dl-02,#dl-03 {
	display: none;
}

.dl-button {
	position: relative;
	display: block;
	width: 100%;
	height: 24px;
	background: #ff8787;
	border: 1px solid #FFF;
	border-radius: 7px;
	box-shadow: 2px 2px 3px #999;
	margin: 0 auto calc(100vw / 640 * 15);
}

.dl-button:hover {
	left: 2px;
	top: 2px;
	box-shadow: initial;
}

.dl-button a {
	display: block;
	width: 100%;
	height: 100%;
}

.dl-button a:hover {
	opacity: initial;
}

.dl-button span {
	display: inline-block;
	position: absolute;
	color: #FFF;
	font-size: 12px;
}

.dl-icon {
	width: 19px;
	height: 16px;
	background: url(../images/spcl_icon_dl.png) no-repeat top center;
	background-size: cover;
	top: 3px;
	left: 5px;
}

.ext {
	left: 28px;
	bottom: 3px;
}

.flsz {
	right: 3px;
	bottom: 4px;
}

.caution {
	position: relative;
	width: 80%;
	max-width: 408px;
	height: auto;
	border: 2px solid #666;
	background: #FFF;
	margin: 0 auto calc(100vw / 640 * 40);
	text-align: left;
	padding: 12px 20px;
	color: #666;
}

.caution h4 {
	font-size: 18px;
	margin-bottom: 10px;
}

.caution p {
	font-size: 14px;
}

#dl-01 {
	position: relative;
}

#dl-01-title,
#dl-04-title {
	position: relative;
	width: 78.75%;
	height: calc(100vw / 640 * 79);
	top: calc(100vw / 640 * 10);
	left: 10.46875%;
}

#dl-01-title.lazyloaded,
#dl-04-title.lazyloaded {
	background: url(../images/spcl_dl_title_01.png) no-repeat top center;
	background-size: cover;
}

#dl-01-cont-01,
#dl-04-cont-01 {
	position: relative;
	width: 50.46875%;
	height: calc(100vw / 640 * 55);
	top: calc(100vw / 640 * 7);
	left: 24.53125%;
}

#dl-01-cont-01.lazyloaded,
#dl-04-cont-01.lazyloaded {
	background: url(../images/spcl_dl_01_cont_01.png) no-repeat top center;
	background-size: cover;
}

#dl-02 {
	position: relative;
}

#dl-02-title {
	position: relative;
	width: 78.75%;
	height: calc(100vw / 640 * 79);
	top: calc(100vw / 640 * 10);
	left: 10.46875%;
}

#dl-02-title.lazyloaded {
	background: url(../images/spcl_dl_title_02.png) no-repeat top center;
	background-size: cover;
}

#dl-02-cont-01 {
	position: relative;
	width: 50.46875%;
	height: calc(100vw / 640 * 55);
	top: calc(100vw / 640 * 7);
	left: 24.53125%;
}

#dl-02-cont-01.lazyloaded {
	background: url(../images/spcl_dl_02_cont_01.png) no-repeat top center;
	background-size: cover;
}

#dl-03 {
	position: relative;
}

#dl-03-title {
	position: relative;
	width: 78.75%;
	height: calc(100vw / 640 * 79);
	top: calc(100vw / 640 * 10);
	left: 10.46875%;
}

#dl-03-title.lazyloaded {
	background: url(../images/spcl_dl_title_03.png) no-repeat top center;
	background-size: cover;
}

#dl-03-cont-01 {
	position: relative;
	width: 50.46875%;
	height: calc(100vw / 640 * 55);
	top: calc(100vw / 640 * 7);
	left: 24.53125%;
}

#dl-03-cont-01.lazyloaded {
	background: url(../images/spcl_dl_03_cont_01.png) no-repeat top center;
	background-size: cover;
}

#dl-04 {
	position: relative;
}

.sp-wp-list {
	position: relative;
	width: 78.75%;
	height: auto;
	margin: calc(100vw / 640 * 22) auto 0;
	font-size: 0;
}

.sp-wp-list li {
	display: inline-block;
	width: 50%;
	margin-bottom: calc(100vw / 640 * 37);
}

.sp-wp-list .thumb {
	width: 85.3174603175%;
	height: auto;
	margin: 0 auto calc(100vw / 640 * 14);
	box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
}

.sp-wp-list .dl-button {
	display: block;
	width: 85.3174603175%;
}

.pc-wp-list {
	position: relative;
	width: 78.75%;
	height: auto;
	margin: calc(100vw / 640 * 22) auto 0;
	font-size: 0;
}

.pc-wp-list li {
	margin-bottom: calc(100vw / 640 * 50);
}

.pc-wp-list .thumb {
	width: 92.6587301587%;
	height: auto;
	margin: 0 auto calc(100vw / 640 * 14);
	box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
}

.pc-wp-list .dl-button {
	display: block;
	width: 92.6587301587%;
}

hr {
	width: 100%;
	height: 1px;
	color: #808080;
}

#cp {
	position: relative;
	margin-top: 0;
	padding-bottom: calc(100vw / 640 * 91);
}

#cp-cont-01 {
	position: relative;
	width: 81.40625%;
	height: calc(100vw / 640 * 101);
	margin: 0 auto;
}

#cp-cont-01.lazyloaded {
	background: url(../images/spcl_cp_cont_01.png) no-repeat top center;
	background-size: cover;
}

#cp-cont-02 {
	position: relative;
	width: 75.78125%;
	margin: 0 auto;
	z-index: 1;
}

#cp-cont-02 a:hover {
	opacity: initial;
}

#cp-cont-03 {
	position: relative;
	width: 78.28125%;
	height:calc(100vw / 640 * 246);
	margin-top: calc(100vw / 640 * -17);
	left: 12.1875%;
}

#cp-cont-03.lazyloaded {
	background: url(../images/spcl_cp_cont_03.png) no-repeat top center;
	background-size: cover;
}

#cp-cont-04 {
	position: relative;
	width: 81.40625%;
	height:calc(100vw / 640 * 240);
	margin: calc(100vw / 640 * -20) auto 0;
}

#cp-cont-04.lazyloaded {
	background: url(../images/spcl_cp_cont_04.png) no-repeat top center;
	background-size: cover;
}

#cp-cont-04-end {
	position: absolute;
	width: 53.28125%;
	height: calc(100vw / 640 * 101);
	top: calc(100vw / 640 * 442);
	left: 9.375%;
}

#cp-cont-04-end.lazyloaded {
	background: url(../images/spcl_cp_end_02.png) no-repeat top center;
	background-size: cover;
}

#cp-cont-05 {
	position: relative;
	width: 77.96875%;
	height: calc(100vw / 640 * 403);
	margin-top: calc(100vw / 640 * 10);
	left: 10.15625%;
}

#cp-cont-05.lazyloaded {
	background: url(../images/spcl_cp_cont_05.png) no-repeat top center;
	background-size: cover;
}

#cp-cont-06 {
	position: relative;
	width: 81.40625%;
	height: calc(100vw / 640 * 326);
	margin: calc(100vw / 640 * -4) auto 0;
}

#cp-cont-06.lazyloaded {
	background: url(../images/spcl_cp_cont_06.png) no-repeat top center;
	background-size: cover;
}

#cp-text-area {
	position: absolute;
	width: 82.1497120921%;
	height: calc(100vw / 640 * 152);
	background: #FFF;
	top: calc(100vw / 640 * 128);
	left: 4.990403071%;
	padding: calc(100vw / 640 * 10) 3.8387715931%;
	text-align: left;
	color: #000;
	font-size: 14px;
	font-weight: 400;
	overflow-x: hidden;
	overflow-y: scroll;
}

#cp-text-area span {
	font-weight: 600;
}

#cp-text-area ul,
#cp-text-area li {
	list-style: disc outside;
	margin-left: 1em;
}

#cp-text-area a {
	display: inline;
	color: #000;
}

#spcl-footer {
	position: relative;
	width: 100%;
	height: calc(100vw / 640 * 80);
	background: #F00;
}

#spcl-footer-caution {
	position: absolute;
	width: 79.21875%;
	height: calc(100vw / 640 * 55);
	top: calc(100vw / 640 * 12);
	left: 10.3125%;
}

#spcl-footer-caution.lazyloaded {
	background: url(../images/spcl_footer_caution.png) no-repeat top center;
	background-size: cover;
}

#back {
	position: fixed;
	width: 150px;
	height: auto;
	bottom: 30px;
	left: 10px;
	opacity: 0.7;
	z-index: 199;
}

#back:hover {
	opacity: 1;
}

#back a:hover {
	opacity: initial;
}


/* ----------------------------------------------------------------
common(tablet)
----------------------------------------------------------------- */

@media screen and (min-width: 641px) {

#spcl-head {
	height: 33px;
}

#spcl-nishijin {
	width: 106px;
	top: 5px;
	left: 79px;
}

#content.lazyloaded {
	background: url(../images/spcl_bg.jpg) no-repeat top center;
	background-size: 640px 12000px;
}

#spcl-top-img {
	width: 598px;
	height: 704px;
	left: 42px;
}

#spcl-top-end {
	width: 236px;
	height: 253px;
	top: 196px;
	left: 60px;
}

#free-dl {
	margin-top: -233px;
}

#dl-cont-01 {
	width: 521px;
	height: 101px;
}

#dl-slct {
	margin-top: 16px;
}

#dl-slct img {
	width: 119px;
	margin: 0 2px;
}

.dl-button {
	margin: 0 auto 15px;
}

.caution {
	margin: 0 auto 40px;
}

.caution h4 {
	font-size: 18px;
	margin-bottom: 10px;
}

.caution p {
	font-size: 14px;
}

#dl-01-title,
#dl-04-title {
	width: 504px;
	height: 79px;
	top: 10px;
	left: 67px;
}

#dl-01-cont-01,
#dl-04-cont-01 {
	width: 323px;
	height: 55px;
	top: 7px;
	left: 157px;
}

#dl-02-title {
	width: 504px;
	height: 79px;
	top: 10px;
	left: 67px;
}

#dl-02-cont-01 {
	width: 323px;
	height: 55px;
	top: 7px;
	left: 157px;
}

#dl-03-title {
	width: 504px;
	height: 79px;
	top: 10px;
	left: 67px;
}

#dl-03-cont-01 {
	width: 323px;
	height: 55px;
	top: 7px;
	left: 157px;
}
.sp-wp-list {
	width: 504px;
	margin: 22px auto 0;
}

.sp-wp-list li {
	margin-bottom: 37px;
}

.sp-wp-list .thumb {
	width: 215px;
	margin: 0 auto 14px;
}

.sp-wp-list .dl-button {
	width: 215px;
}

.pc-wp-list {
	width: 504px;
	margin: 22px auto 0;
}

.pc-wp-list li {
	margin-bottom: 50px;
}

.pc-wp-list .thumb {
	width: 467px;
	margin: 0 auto 14px;
}

.pc-wp-list .dl-button {
	width: 467px;
}

#cp {
	padding-bottom: 91px;
}

#cp-cont-01 {
	width: 521px;
	height: 101px;
}

#cp-cont-02 {
	width: 485px;
}

#cp-cont-03 {
	width: 501px;
	height: 246px;
	margin-top: -17px;
	left: 78px;
}

#cp-cont-04 {
	width: 521px;
	height: 240px;
	margin: -20px auto 0;
}

#cp-cont-04-end {
	width: 341px;
	height: 101px;
	top: 442px;
	left: 60px;
}

#cp-cont-05 {
	width: 499px;
	height: 403px;
	margin-top: 10px;
	left: 65px;
}

#cp-cont-06 {
	width: 521px;
	height: 326px;
	margin: -4px auto 0;
}

#cp-text-area {
	width: 428px;
	height: 152px;
	top: 128px;
	left: 26px;
	padding: 10px 20px;
}

#spcl-footer {
	height: 80px;
}

#spcl-footer-caution {
	width: 507px;
	height: 55px;
	top: 12px;
	left: 66px;
}

}


/* ----------------------------------------------------------------
common(tablet)
----------------------------------------------------------------- */

@media screen and (min-width: 769px) {



}


/* ----------------------------------------------------------------
normal-PC
----------------------------------------------------------------- */

@media screen and (min-width: 1281px) {

#back {
	width: 214px;
	bottom: 30px;
	left: 50%;
	margin-left: -630px;
}

}


/* ----------------------------------------------------------------
wide-PC
----------------------------------------------------------------- */

@media screen and (min-width: 1921px) {



}