@charset "UTF-8";
/** Common CSS Code**/

.red {
	color: #e73a4e;
}

.white {
	color: #ffffff;
}

.green {
	color: #c9eb25;
}

.bold {
	font-weight: bold;
}

.background {
	background-position: center;
	background-size: cover;
	height:100vh;
	width: 100%;
	position: fixed;
	top: 0;
	transition: opacity 0.5s ease-in-out;
}

.shadow {
	text-shadow: 2px 2px 3px #000;
}

.box_shadow {
	box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}

.top_bg {
	background-image: url("../img/top.jpg");
}

.goods_bg {
	background-image: url("../img/goods.jpg");
	opacity: 0;
}

.special_bg {
	background-image: url("../img/special.jpg");
	opacity: 0;
}

.game_bg {
	background-image: url("../img/game.jpg");
	opacity: 0;
}

.top_area {
	width: 100%;
	height: calc(100vw * 0.51);
}

.top_main {
	top: 50%;
	transform: translateY(-50%);
}

.character {
	width: 80%;
	margin: 50px auto 0 auto;
	display: flex;
}

/*.character {
	width: calc(100% - 50px);
	margin: 50px auto 0 auto;
	display: flex;
}*/

.characterSP {
	display: none!important;
}

.character img {
	width: calc(100% / 7 - 20px);
	margin: 0 10px;
	display: block;
	transform: scale(1);
}

.top_title {
	width: 80%;
	margin: 40px auto 0 auto;
	padding: 0 0 40px 0;
}

.top_title_sp {
	display: none;
}

.top_title img {
	width: 100%;
}

.copyright {
	color: #ffffff;
	left: 0;
	font-size: calc(100vw * 0.01);
	text-align: center;
}

.top_title .copyright {
	display: inline-block;
	bottom: 10px;
}

.top_cloud {
	position: absolute;
	width: 100%;
	top: 0;
	text-align: center;
}

.top_cloud img {
	top: -66px;
	width: 92%;
}

#google_map {
	width: calc(40%);
	height: 300px;
	display: inline-block;
	vertical-align: middle;
	margin: 0;
}

.inBox .adress {
	width: calc(60% - 20px);
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 20px;
}

.inBox .adress dt {
	width: 6em;
	text-align: center;
	display: inline-block;
	vertical-align: top;
	border: #e73a4e solid;
	border-width: 0 5px 0 0;
	margin: 5px 1em 5px 0;
	padding: 0 1em 0 0;
}

.inBox .adress dd {
	display: inline-block;
	vertical-align: top;
	width: calc(100% - 7em);
	margin: 5px 0;
}

section .contents_box .inBox.goods img {
	width: 100%;
}

.price {
	color: #ffffff;
	text-shadow: 
    2px 0 3px #000,
    -2px 0 3px #000,
    0 2px 3px #000,
    0 -2px 3px #000;
	text-align: center;
	margin: 10px auto 100px auto;
	font-size: 140%;
}

.price.end {
	margin: 10px auto 20px auto;
}

.price .small {
	font-size: 70%;
	bottom: 2px;
}

.price .price {
	font-size: 150%;
	bottom: -5px;
}

.goods_3 {
	text-align-last: center;
}

div.item.item_tshirts,
div.item.item_toto,
div.item.item_kinchaku {
	display: inline-block;
	text-align: center;
}

div.item.item_tshirts {
	width: 44.7%;
}

div.item.item_toto {
	width: 22.5%;
}

div.item.item_kinchaku {
	width: 32.6%;
}

div.item.item_tshirts img,
div.item.item_toto img,
div.item.item_kinchaku img {
	width: 100%;
}

div.item.item80 {
	width: 80%;
	margin: 0 auto;
}

div.item.item80 img {
	width: 100%;
}

div.item .copyright {
	font-size: calc(100vw * 0.008);
	font-weight: normal;
}

div.item.copy01 .copyright {
	bottom: 0;
}

section .contents_box .inBox.goods .center {
	font-size: calc(100vw * 0.008);
}

.special_goods {
	text-align: center;
	font-size: 250%;
	line-height: 1.3em;
	font-weight: bold;
	margin: 30px auto;
}

.special_goods .sp_price {
	font-size: 140%;
	display: inline-block;
	margin: 0 0.2em;
	bottom: -5px;
}

.special_goods .tax {
	font-size: 80%;
	bottom: 4px;
}

#notes ul,
#game ul {
	list-style: none;
	margin: 0 0 20px 1.5em;
	padding: 0;
}

#notes ul.end,
#game ul.end {
	margin: 0 0 0 1.5em;
}

#notes ul li span,
#game ul li span {
	position: absolute;
	left: -1.5em;
}

#game ul li {
	margin: 15px 0;
}

#notes ul li ul {
	list-style: circle;
	margin: 10px 0 10px 1.5em;
	padding: 0;
}

.sp_image {
	display: none;
}

.csm_mobr {
	display: none;
}

.csm_mobr_space {
	display: inline-block;
	width: 1em;
}

.game .w01 {
	text-align: center;
	font-size: 170%;
	line-height: 1.3em;
	font-weight: bold;
	margin: 30px auto;
}

.game img {
	width: 100%;
}

#game .inBox {
	width: 77%;
	display: inline-block;
	vertical-align: top;
	margin: 30px auto 0 auto;
}

.game .catch {
	border: #ffffff solid;
	border-width: 1px;
	padding: 5px;
}

.game .incatch {
	background-color: #ffffff;
	color: #000000;
	text-align: center;
	font-size: 150%;
	font-weight: bold;
	padding: 20px 0;
}

#game .roulette {
	width: calc(23% - 30px);
	vertical-align: top;
	margin: 30px 0 0 30px;
}

.game {
	color: #ffffff;
}

.game.game_prize {
	margin: 50px auto 0 auto;
}

.game .prize .title {
	margin: 0;
}

.game .prize .title h2 {
	border: #666666 solid;
	border-width: 1px 1px 0 1px;
	display: inline-block;
	margin: 0 20px 0 0;
	padding: 20px 20px 20px 40px;
	width: 300px;
	text-align: center;
	font-size: 180%;
	vertical-align: middle;
	line-height: 1em;
	font-weight: normal;
}

.game .att {
	display: inline-block;
	width: calc(100% - 330px);
	vertical-align: middle;
}

.game .itenBox {
	border: #666666 solid;
	border-width: 1px;
	margin: 0 auto 50px auto;
	padding: 50px;
}

.game .item {
	text-align: center;
	font-size: 150%;
	margin: 0 auto 20px auto;
}

.game .item div {
	text-align: center;
	font-size: 80%;
	margin: 10px auto;
}

.game .photo {
	text-align: center;
	margin: 0 auto;
}

.game .photo.itemC {
	text-align: center;
	margin: 0 auto 50px auto;
}

.game .photo img.itemC3 {
	width: 30%;
}


/* ------------------------------------------------------ */
@media only screen and (max-width : 2500px) {
/* ------------------------------------------------------ */
.top_area {
	width: 100%;
	height: calc(100vw * 0.46);
}

}

/* ------------------------------------------------------ */
@media only screen and (max-width : 1920px) {
/* ------------------------------------------------------ */
	
}

/* ------------------------------------------------------ */
@media only screen and (max-width : 1336px) {
/* ------------------------------------------------------ */

}

/* ------------------------------------------------------ */
@media only screen and (max-width : 1200px) {
/* ------------------------------------------------------ */
.game .w01 {
	font-size: calc(100vw * 0.027);
}

.game .incatch {
	font-size: calc(100vw * 0.022);
}


}

/* ------------------------------------------------------ */
@media only screen and (max-width : 1024px) {
/* ------------------------------------------------------TAB */
.sp_image {
	display: block;
}

.pc_image {
	display: none;
}	
	
.character {
	width: calc(100% - 300px);
	display: block;
	text-align: center;
	margin: 0 auto;
}

.characterPC {
	display: none!important;
}

.characterSP {
	display: block!important;
}

.character img {
	width: calc(100% / 4 - 20px);
	display: inline-block;
	margin: 10px;
}

.top_main {
	transform: translateY(-50%);
}
	
.top_area {
	height: 100vh;
}
	
.top_title {
	z-index: 10;
}

.top_title_pc {
	top: -40px;
}

.top_title_pc img {
	display: none;
}

.top_title_sp {
	display: block;
}

.top_title {
	width: calc(100% - 100px);
	margin: 0 auto;
	padding: 0 0 10px 0;
}
	
.copyright,
div.item .copyright,
section .contents_box .inBox.goods .center {
    font-size: 12px;
}

.top_title .copyright {
	display: block;
	bottom: auto;
}
	
.top_cloud {
    position: absolute;
	width: 88%;
    top: calc(100vw * 0.15);
	left: 50%;
	transform: translateX(-50%);
}

.top_cloud img {
	top: -30px;
}

section .contents_box .inBox {
    font-size: 100%;
}

#google_map {
	width: 100%;
	height: 400px;
}

.inBox .adress {
	width: 100%;
	margin: 0;
}

.inBox .adress dl {
	margin: 50px auto 0 auto;
}

.inBox .adress dt {
	width: 6em;
	text-align: center;
	display: inline-block;
	vertical-align: top;
	border: #e73a4e solid;
	border-width: 0 5px 0 0;
	margin: 5px 1em 5px 0;
	padding: 0 1em 0 0;
}

.inBox .adress dd {
	display: inline-block;
	vertical-align: top;
	width: calc(100% - 7em);
	margin: 5px 0;
}

div.item.item80 {
	width: 100%;
}

.game .w01 {
	font-size: calc(100vw * 0.025);
}
	
}

/* ------------------------------------------------------ */
@media only screen and (max-width : 920px) {
/* ------------------------------------------------------ */
.game .w01 {
}

.game .roulette {
	width: 20%;
}

.game .result ul {
	width: calc(80% - 50px);
	margin: 0 0 0 50px!important;
}

}

/* ------------------------------------------------------ */
@media only screen and (max-width : 820px) {
/* ------------------------------------------------------ */
.special_goods {
	text-align: center;
	font-size: calc(100vw * 0.05);
	line-height: 1.3em;
	font-weight: bold;
	margin: 30px auto;
}

.csm_mobr {
	display: inline;
}

div.item.item_tshirts,
div.item.item_toto,
div.item.item_kinchaku {
	width: 100%;
}

div.item.item_tshirts img {
	width: calc(44.7% * 1.8)!important;
}

div.item.item_toto img {
	width: calc(22.5% * 1.8)!important;
}

div.item.item_kinchaku img {
	width: calc(32.6% * 1.8)!important;
}

div.item.item_tshirts .price,
div.item.item_toto .price {
	margin: 20px auto 20px auto;
}

.top_cloud {
	width: 75%;
}

#game .inBox {
	width: 100%;
}

#game .roulette {
	width: 40%;
	display: block;
	margin: 30px auto 0 auto;
}

.game .incatch {
	font-size: calc(100vw * 0.028);
}

}

/* ------------------------------------------------------ */
@media only screen and (max-width : 768px) {
/* ------------------------------------------------------ */
.character img {
	width: calc(100% / 4 - 30px);
	margin: 5px;
}
	
.top_cloud {
	width: 80%;
}

.csm_mobr_space {
	display: block;
}
	
.top_title,
.character {
	width: calc(100% - 200px);
}

}

/* ------------------------------------------------------ */
@media only screen and (max-width : 600px) {
/* ------------------------------------------------------ */
.top_main {
}

.character img {
	width: calc(100% / 4 - 20px);
	display: inline-block;
	margin: 10px;
}
	
.top_cloud {
	width: 110%;
	top: 110px;
}

.top_title,
.character {
	width: calc(100% - 50px);
}

.inBox .adress dl {
	margin: 20px auto 0 auto;
}
	
.game .w01 {
    font-size: 120%;
	text-align: left;
}
	
.game .w01 br {
	display: none;
}

.game .roulette {
	width: 40%;
	display: block;
	margin: 0 auto;
}

.game .result ul {
	width: calc(100% - 1.5em);
	margin: 0 0 0 1.5em!important;
}

.game .itenBox {
    padding: 20px;
}

.game .prize .title h2 {
	width: 130px;
	font-size: 110%;
	padding: 20px 0px 20px 10px;
	margin: 0 10px 0 0;
}

.game .att {
	display: inline-block;
	width: calc(100% - 150px);
	vertical-align: middle;
	font-size: 80%;
	line-height: 1.5em;
}

.game .photo.itemC {
    margin: 0 auto 20px auto;
}

.game .item {
    font-size: 110%;
}
	
.game .item div {
	margin: 0 auto;
}

.game .incatch {
	font-size: calc(100vw * 0.05);
	line-height: 1.3em;
}

}

/* ------------------------------------------------------ */
@media only screen and (max-width : 500px) {
/* ------------------------------------------------------ */
#google_map {
	width: 100%;
	height: 200px;
}

.inBox .adress dt {
	width: 100%;
	text-align: left;
	border: #e73a4e solid;
	border-width: 0 0 0 5px;
	margin: 10px 0 0 0;
	padding: 0 0 0 1em;
}

.inBox .adress dd {
	width: 100%;
}

	#notes ul li ul {
		margin: 10px 0;
	}
	
.top_cloud {
	width: 100%;
	top: 90px;
}


}

/* ------------------------------------------------------ */
@media only screen and (max-width : 320px) {
/* ------------------------------------------------------ */ 
	
.top_cloud {
	width: 90%;
}

.top_main {
	top: calc(50% + 20px);
	transform: translateY(-50%);
	overflow: hidden;
}

}