@charset "utf-8";

/*=================================================
	file name: page_style.css
	creation: 2017.Feb
	updated: 2017.2.22
===================================================*/

html{
  scroll-behavior: smooth;
}


.clear {
	clear: both;
}
.campaign .img-responsive {
	width: auto !important;
	margin: 0 auto;
}
.to_page-top {
	right: 15px;
}
.section-title {
	background-color: #0098BE;
	border-radius: 5px;
	padding: .2em 0 .12em;
	color: #fff;
	font-size: 24px!important;
}
@media screen and (max-width: 767px) {
	.go-feature {
		width: 100%;
	}
}
.how-to-entry .go-feature {
	margin-bottom: 3em;
}
.go-feature a {
	background-size: 10px;
	background-position: right 8px center;
}

.go-feature a:hover,
.box-price .go-shop a:hover {
	background-image: url(/jp/lib/images/arrow_right-white.png);
	opacity: 0.4;
}

/* .campaign .section-inner
----------------------------------------------*/
.campaign section {
	margin-bottom: 30px;
}
.campaign section.camp-header-block {
	margin-bottom: 0;
}
.campaign .section-inner {
	position: relative;
	max-width: 860px;
	margin: 0 auto;
	padding: 0 30px 60px 30px;
}
@media screen and (max-width: 767px) {
	.campaign .section-inner {
		padding-right: 8px;
		padding-left: 8px;
	}
}
.campaign .camp-header-block .section-inner {
	max-width: 960px;
	padding: 60px 8px 20px;
	position: relative;
}
@media screen and (min-width: 991px) {
	.campaign .camp-header-block .section-inner {
		padding-top: 15px;
	}
}
.campaign-period .section-inner {
	padding-top: 0;
	padding-bottom: 0;
}
.campaign-page-nav .section-inner {
	padding-bottom: 0;
}

/* .campaign footer
----------------------------------------------*/
.campaign footer {
	border-top: none;
	background-color: transparent;
}
.campaign footer .sit9-information {
	padding-right: 0;
}

.campaign #contents {
	padding: 50px 0 0;
}


/* .camp-header-block
----------------------------------------------*/
.camp-header-block {
	background-color: #FBE6EF;
}
.camp-header-block h1 {
	margin: 0;
}
.camp-header-block .img-responsive {
	margin: 0 auto;

}
.single-page .section-inner .column {
	/*background-color: #efefef;*/
	background-color: #FCE3F1;
	border: 5px dotted #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin: 15px;
	padding: 15px 30px;
}
.single-page .section-inner .column .go-feature {
	margin-top: 0.5em;
	margin-bottom: 16px;
}

.campaign-period {
	background-color: #000;
}
.campaign-period.bg-white {
	background-color: #fff;
	margin-top: 20px;
}
.campaign-period dl {
	background-color: #fff;
	border: solid 3px #0098BE;
	border-radius: 5px;
	margin: .6em auto;
}
@media screen and (min-width: 768px) {
	.campaign-period dl {
		width: 49%;
		display: inline-block;
	}
	.campaign-period dl:first-child {
		margin-right: 1%;
	}
}
.campaign-period dt {
	background-color: #0098BE;
	padding: 3px 0;
	font-weight: normal;
	font-size: 16px;
	color: #fff;
	text-align: center;
}
.campaign-period dd {
	padding: 3px 0;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}
@media screen and (min-width: 991px) {
	.campaign-period dd {
		font-size: 26px;
	}
}
.campaign-period dd span {
	font-size: .7em;
}
.campaign-period dd small {
	display: block;
	font-size: 18px;
	font-weight: normal;
}
@media screen and (max-width: 767px) {
	.campaign-period dd {
		font-size: 24px;
	}
}

/* .how-to-entry
----------------------------------------------*/
ul, ol {
	margin: 0 0 2em -1em;
}
li ul {
	margin-top: .5em;
}
li ul li {
	margin-bottom: .1em!important;
}
.how-to-entry li,
.notes li {
	line-height: 1.4;
	margin-bottom: .6em;
}
.how-to-entry strong {
	display: block;
	margin-bottom: .2em;
	color: #000;
}
.notes li .note-text {
	margin: .5em 0 1.2em;
}

.privacy {
	background-color: #efefef;
	padding: 30px;
}
@media screen and (max-width: 767px) {
	.privacy {
		padding: 15px 10px;
	}
}
.privacy h2 {
	margin: 0;
	font-size: 21px;
	font-weight: bold;
}


.block-promotion .block-promotion-box {
	border-color: #0098BE;
	background-color: #d5e8ed;
	padding: 16px 24px;
	color: #000;
}

.go-jms {
	margin-top: 60px;
}
.go-jms a {
	border-radius: 8px;
	box-shadow: 0 0 8px #999;
	padding: 10px 0;
	text-align: center;
	display: block;
	color: #000;
	font-size: 18px;
	font-weight: bold;
}
.go-jms a:hover {
	opacity: .6;
}
.go-jms img {
	max-width: 180px;
	margin-right: 20px;
	vertical-align: middle;
}
@media screen and (max-width: 767px) {
	.go-jms {
		margin-top: 30px;
	}
	.go-jms img {
		width: 60%;
		display: block;
		margin: 0 auto 6px;
	}
}

@media screen and (min-width: 768px){
.product-list .go-feature .jms-logo {
    width: 70px;
}
}
@media screen and (max-width: 767px){
.product-list .go-feature .jms-logo {
    width: 90px;
}
}

@media screen and (min-width: 768px){
.buybutton .go-feature .jms-logo {
    width: 70px;
}
}
@media screen and (max-width: 767px){
.buybutton .go-feature .jms-logo {
    width: 90px;
}
}

ul.price-list {
	margin: 0;
	padding: 0;
}
.price-list li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}
.price-list img {
	margin: 0 auto;
	width: auto;
}
.winners {
	font-size: 16px;
	color: #000;
}
.winners span {
	display: block;
}
.winners .award {
	margin-top: .6em;
	color: #e73278;
	font-size: 21px;
	font-weight: bold;
}

@media screen and (max-width: 767px) {
	.number {
		right: 30px;
		bottom: 60px;
	}
}
.product-series{
	margin-bottom: 0;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5;
}

.lineup{
	margin-bottom: 0;
}

.lineup li{
margin-bottom: .3em;
    font-size: 14px;
    line-height: 1.3;
}

.product.row {
    margin-bottom: 3em;
}

@media screen and (max-width: 767px){
.product .img-responsive {
    max-width: 120px;
    margin-bottom: 10px;
}
}

@media screen and (min-width: 767px){
.present-list{
	padding:0 10%;
}
}
.present-list li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}

.caption{
	font-size: 14px;
}

header{
	background: rgba(100, 100, 100, 0.8);
	position: fixed;
	width: 100%;
	padding: 13px 0 3px;
	z-index: 100;
		display: table; 
}

.page-top-name{
	color: #FFF;
	margin-left: 88px;
	font-size: 120%;
}

@media screen and (max-width: 991px){
	.page-top-name{
		margin-left: 6em;
	}
}

.contents-bg {
	background: #FFC;	
}

.day-off {
	color: #999;
}

.finished {
	color: #999;
	font-weight: bold;	
	font-size: 12px;
}

.buylist {
	border: 1px solid #AAA;	
	border-radius: 10px;
	box-sizing: border-box;
	padding: 15px 0;
	margin-bottom: 30px;
	background: #EFEFEF;
}

h4 {
	text-align: center;
	background: #666;
	padding: 10px 0;
	font-weight: bold;
	color: #FFF;
}

.buylist p {
	text-align: center;
	font-size: 16px;	
}


.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

/* mainimage-block */

.mainimage-link {
	max-width: 940px;
	margin: 0 auto;
}

.mainimage02 {
	float:left;
	width: 50%;
}

.mainimage02 img{
	width: 100%;
}

.mainimage03 {
	float:left;
	width: 50%;
}

.mainimage03 img{
	width: 100%;
}

.font-small{
	font-size: 0.9em !important;
	line-height: 1.2em !important;
}



/* .present
----------------------------------------------*/

.present{
	margin: 30px auto;
}

.textsample {
	width: 700px;
	margin: 10px auto 30px;
	display: block;
	box-sizing: border-box;
	padding: 10px;
	background: #AA1C43;
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	border-radius: 20px;
}

.textsample:hover {
	opacity: 0.7;
	color: #FFF;
}

.present table {
	width: 800px;
}

.present table,td,th {
	border-collapse: collapse;
    border:1px solid #666;
}

.present table tr th,
.present table tr td {
	box-sizing: border-box;
	padding: 20px 20px 0;
}

.present th {
	background:#DBE2E9;
	width: 170px;
}

.present td {
	font-size: 14px;
}

.present td a{
	display: block;
	margin: 0 0 20px 20px;
}
