/*////////////////////////////////////////////////////////////////////////
reset
////////////////////////////////////////////////////////////////////////*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	vertical-align: top;
}

body{overflow-y: scroll; }

html,body {
	font-size-adjust:100%;
	-webkit-font-size-adjust: 100%;
}

body,h1,h2,h3,h4,h5,h6,p,img,
hr,li,ul,dl,dt,dd
{
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
}

img{border:0px;pointer-events: none;}

ruby {
        display: inline-table;
        border-collapse: collapse;
        margin: 0;
        padding: 0;
        border: none;
        white-space: nowrap;
        text-indent: 0;
        vertical-align: bottom;
        text-decoration: inherit;
        text-align: center;
        }
ruby>rt {
    display: table-header-group;
    height: 25%;
    margin: 0;
    padding: 0 0.125em;
    border: none;
    font: inherit;
    line-height: 1.1em;
	text-align: center;
	font-size: 50%;
	position: relative;
	transform: translateY(0.5em);
    }

button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}

#loading{
	width:100vw;
	height:100%;
	position:fixed;
	z-index:9999;
	display: flex;
    justify-content: center;
    align-items: center;
	text-align:center;
	background-color: #fff;
}

#backTop{
	z-index: 99;
	position: fixed;
	bottom:3em;
	right:-2.3em;
	border-left: solid 1px #333;
	border-right: solid 1px #333;
	text-align: center;
	background-color: #fff;
	line-height:1em;
	cursor: pointer;
	color: #333;
	padding: 0.5em 1.5em;
	font-size: 120%;
	font-weight: bold;
	border-radius: 5px;
	transform: rotate(90deg);
}

#backTop:hover{
	background-color: #ef3e8e;
	color: #fff;
}



/*////////////////////////////////////////////////////////////////////////
基本カラー
////////////////////////////////////////////////////////////////////////*/
:root{
--ikebukuro:#c11920;
--yokohama:#1d3994;
--shibuya:#fcc80f;
--shinjyuku:#9fa0a0;
--osaka:#f36a00;
--nagoya:#6b4095;
--other:#30555d;
	
--pink:#ef3e8e;
--black:#131313;
--white:#fff;
	
--gold:#b48939;

--white10: rgba(255,255,255,0.1);
--white30: rgba(255,255,255,0.3);
--white50: rgba(255,255,255,0.5);
--white70: rgba(255,255,255,0.7);
}


/*////////////////////////////////////////////////////////////////////////*/

a {color: #071d2d;}
a:hover {color: #1b91ff;}
.txtCutNone{display:none;}

.pink{color: var(--pink);}
.gold{color: var(--gold);}

.indent{
	padding-left: 1em;
	text-align: left;
}

.indent li{
	text-indent: -1em;
	line-height: 1.2em;
	margin-bottom: 0.4em;
}

.storeLink{
	background-color: #ccc;
	padding:1.5em 1em;
	margin: 2em auto;
}

.storeLink .storeBtn{
	margin: auto;
	width: 100%;
	max-width: 500px;
}

.storeLink .storeBtn a{
	display: inline-block;
	width: 32%;
}

.storeLink .storeBtn a:first-of-type{
	width: 26.5%;
}

.storeLink .storeBtn img{
	margin-bottom: 5px;
	display: block;
	width: 100%;
	vertical-align: bottom;
}

footer {
	text-align: center;
	border-top: 1px #333 solid;
	padding-top:2em;
}

/*////////////////////////////////////////////////////////////////////////*/
html{
	touch-action: manipulation;
}

body{
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px;
	color:#333;
	background-image: url("../img/bg.jpg");
	overflow-wrap: anywhere; 
}

#wrapper {
	margin:auto;
	width: 100%;
	max-width: 1000px;
	background-color: var(--white70);
	border: solid 1px #333;
	padding: 2em;
}

.main {
	text-align: center;
}

h2{
	font-size: 200%;
	text-align: left;
	border-bottom: 8px solid;
	border-image: linear-gradient(to right, #b48939 0%, #fcec83 50%, #b48939) 1;
}

h3{
	font-size: 130%;
	text-align: right;
}

form{
	margin: 2em auto 5em;
}

/*////////////////////////////////////////////////////////////////////////
トップページ
////////////////////////////////////////////////////////////////////////*/
#index #topTxt{
	margin-bottom: 2em;
}

#topTxt .logo{
	width: 60%;
	margin:0 auto 3em;
}

#topTxt .logo img{
	width: 100%;
}

#index #topTxt .catch{
	font-size: 180%;
	color:var(--gold);
	font-weight: bold;
	margin-bottom: 1em;
}

#index #topTxt .txt{
	font-weight: bold;
}

#index #topTxt .txt span{
	font-size: 130%;
	vertical-align: baseline;
}

#index .limit{
	font-size: 120%;
	font-weight: bold;
}

#index .end{
	background-color:#ccc;
	color: #666;
	border: solid 1px #666;
	padding: 10px 20px;
	font-weight: bold;
	border-radius: calc(1px/0);
	margin: 1em auto;
}



/*
.formInput {
	padding:5px 10px 5px 10px;
	background-color:#35838d;
	border-radius: 5px;
	color:#fff;
	font-weight:bold;
	border:#fff solid 2px;
	cursor: pointer;
}

.formInput:hover {
	background-color: #333;
}
*/

#index #input{
	margin-top: 2em;
}

/* フォームボタン（投票済みの場合） */
#IPerror{
	background-color:#ccc;
	color: #666;
	border: solid 1px #666;
	display: inline-block;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: default;
	max-width: 20em;
	font-size: 100%;
}

.button{
	display: block;
	margin: 0.5em auto;
	width: 80%;
	max-width: 300px;
	padding:0.5em;
	border-radius: 10px;
	font-size: 120%;
	font-weight: bold;
	background-color: #fff;
	cursor: pointer;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

/*---------------------------------------------------------
カード一覧
---------------------------------------------------------*/
#index .charaMds{
	cursor: pointer;
	background-color: #ccc;
	margin: 0.5em auto 0;
	text-align: left;
}

#index .charaMds img{
	width: 80%;
	max-width: 700px;
}

#index .charaMds.c1,
#index .charaMds.c2,
#index .charaMds.c3{
	background-color: var(--ikebukuro);
}

#index .charaMds.c4,
#index .charaMds.c5,
#index .charaMds.c6{
	background-color: var(--yokohama);
}

#index .charaMds.c7,
#index .charaMds.c8,
#index .charaMds.c9{
	background-color: var(--shibuya);
}

#index .charaMds.c10,
#index .charaMds.c11,
#index .charaMds.c12{
	background-color: var(--shinjyuku);
}

#index .charaMds.c13,
#index .charaMds.c14,
#index .charaMds.c15{
	background-color: var(--osaka);
}

#index .charaMds.c16,
#index .charaMds.c17,
#index .charaMds.c18{
	background-color: var(--nagoya);
}

#index .set{
	display: none;
	padding:1em 0;
}

#index #objAll .obj {
	width:19%;
	margin: 0.5%;
	display:inline-block;
	padding: 1em 0;
	font-size: 90%;
	cursor: pointer;
	text-align:center;
	border:solid 1px #5c272a;
	background-color: var(--white);
	position: relative;
}

#index #objAll .obj img{
	width:100%;
	max-width: 100px;
	display: block;
	margin:0 auto 0.5em;
	border: solid 1px #aaa;
}

#index .charaMds.selected{
	background-image: url("../img/select.png");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 15%;
}

/*
#index #objAll .obj.selected {
	background-color: var(--gold);
}
*/

#index #objAll .obj.selected::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(239,62,142,0.8);
	z-index: 2;
}

#index #objAll .obj.selected::after {
	content: "CHECKED";
	position: absolute;
	width: 100%;
	top: 50%;
	font-size: 150%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-weight: bold;
	z-index: 3;
	pointer-events: none;
}


/*---------------------------------------------------------
選択用モーダル
---------------------------------------------------------*/
.modal{
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.6);
	z-index: 1000;
	overflow-y: scroll;
	width: 100vw;
}

.modal-inner{
	background: #fff;
	width: 80%;
	max-width: 800px;
	height: auto;
	padding:0 0.5em 3em;
	margin: 5vh auto;
	position: relative;
}

.modal-inner img{
	width: 90%;
	margin-bottom: 0.5em;
	display: inline-block;
	vertical-align: middle;
	border: solid 1px #aaa;
}

.modal-prev,
.modal-next{
	width: 5%;
	display: inline-block;
	color: #333;
	vertical-align: middle;
	font-size: 200%;
	transform: scale(1, 2);
	font-weight: bold;
}

.modal-count {
	text-align: center;
	font-size: 14px;
	color: #666;
	margin-bottom: 8px;
}

.modal-text{
	font-size: 150%;
	font-weight: bold;
	color: var(--pink);
	margin-bottom: 1em;
}

.modal-closeTop{
	width: 100%;
	display: block;
	height: 1em;
	text-align: right;
	font-size: 500%;
	margin-bottom: 0em;
	color: #aaa;
	border: none !important;
}

.modal-select,
.formInput{
	border: double 6px var(--pink);
	color: var(--pink);
}

.formInput:hover,
.modal-select:hover,
.modal-select.is-selected {
	background: var(--pink);
	color: #fff;
}

.modal-close,
.risetBtn{
	border: double 6px #333;
	color: #333;
}

.cardSelect{
	background-color: var(--pink);
	color: var(--white);
}



.modal-slider{
  overflow: hidden;
  width: 90%;
  margin: 0 auto 1em;
}

.modal-slider .slider-track{
  display: flex;
  width: 100.1%;
  transition: transform 0.3s ease;
}

.modal-slider .slide{
  flex: 0 0 100%;
  min-width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.modal-slider img{
  width: 100%;
  margin-bottom: 0.5em;
}

.modal-text{
  font-size: 150%;
  font-weight: bold;
  color: var(--pink);
}


/*---------------------------------------------------------
リセット用モーダル
---------------------------------------------------------*/
#resetConfirmModal .modal-buttons {
	display: block;
	font-size: 80%;
}

#resetConfirmModal .modal-text{
	font-size: 120%;
}

#resetConfirmModal .modal-inner{
	background: #fff;
	width: 80%;
	max-width: 800px;
	height: auto;
	padding:3em 0.5em;
	margin: 5vh auto;
	position: relative;
}

#resetConfirmModal .reset-yes {
	background: #e74c3c;
	color: #fff;
	border: none;
}

#resetConfirmModal .reset-no {
	background: #ccc;
	border: none;
}


/*---------------------------------------------------------
確認画面用モーダル
---------------------------------------------------------*/
.slider{
	width: 100%;
	max-width: 90%;
	margin: 0 auto;
	display: block;
}

.slide-inner{
	width: calc(100% - 4px);
	margin: 0 auto;
	border: 1px solid #aaa;
	box-sizing: content-box;
	margin-bottom: 0.5em;
}

.slide img{
	width: 100%;
	display: block;
}

.slick-slide{
	box-sizing: border-box;
}

.slick-track{
	transform: translateZ(0);
	will-change: transform;
}



.sliderArea{
	position: relative;
}

.thumb-track {
	display: block;
	margin: 1em auto 2em;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	padding: 1em 0;
}

.thumb {
	display: inline-block;
	width: 10%;
	margin: 0.5%;
	cursor: pointer;
	border:2px solid #333;
}

.thumb img{
	width: 100%;
}

.thumb.is-disabled {
	cursor: default;
	border: 2px solid #999;
}

.thumb.active {
	border: 2px solid var(--pink);
}

.slide-prev,
.slide-next{
	position: absolute;
	width: 5%;
	display: inline-block;
	color: #333;
	font-size: 200%;
	transform: scale(1, 2);
	font-weight: bold;
	text-align: center !important;
	padding: 0;
	top: 36%;
	background-color: inherit;
}

.slide-prev{
	left: 0;
}

.slide-next{
	right: 0;
}


.formInput:disabled {
	opacity: 0.5;
	pointer-events: none;
}
	
/*---------------------------------------------------------
---------------------------------------------------------*/

#complete a{
	text-decoration: none;
}

.compTxt{
	font-size: 150%;
	font-weight: bold;
	color: var(--pink);
	margin: 2em auto;
}

#complete .borderBox{
	margin-top: 1em;
	
}

#complete dd{
	width:32%;
	margin: 0.5%;
	display:inline-block;
	padding: 1em;
	font-size: 90%;
	text-align:center;
	border:solid 1px #5c272a;
	background-color: var(--white);
	position: relative;
}

#complete dd img{
	width:100%;
	display: block;
	margin:0 auto 0.5em;
}


#close .catch{
	font-size: 180%;
	color:var(--gold);
	font-weight: bold;
	margin-bottom: 1em;
}

#close .limit{
	font-size: 120%;
	font-weight: bold;
}






/*######################################################################
メディアクエリ
######################################################################*/
/**********************************************************************/
@media screen and (max-width: 768px) {
	
.txtCutNone{display:block;}
body{
	font-size: 14px;
	background-size: 38%;
}
#wrapper {padding: 1em; font-size: 90%;}

	
#topTxt .logo{
	width: 60%;
	margin:2em auto;
}
	
h2{
	font-size: 130%;
	margin-top: 2em;
}

h3{
	font-size: 100%;
	margin-bottom: 1.5em;
}
	
	
#index #objAll .obj {
	padding: 0 0 0.5em;
}
	
#index #topTxt .catch{
	font-size: 130%;
}
	
	
#index #objAll .obj {
	width:24%;
	font-size: 75%;
}
	
#index #objAll .obj.selected::after {
	font-size: 120%;
}

	
#index #topTxt .txt span{
	font-size: 110%;
}

#index .limit{
	font-size: 110%;
}
	
/*---------------------------------------------------------
選択用モーダル
---------------------------------------------------------*/
.modal-inner{
	width: 100%;
}

.modal-prev,
.modal-next{
	font-size: 130%;
	margin-top: -1em;
}

.modal-text{
	font-size: 120%;
}

.modal-count {
	font-size: 100%;
}
	
.modal-inner img{
	width: 88%;
}

.modal-prev,
.modal-next{
	width: 6%;
}
	
	
.modal-closeTop{
	line-height: 1em;
	text-box: trim-both cap alphabetic;
}

	
/*---------------------------------------------------------
確認画面用モーダル
---------------------------------------------------------*/
.slide-prev,
.slide-next{
	font-size: 130%;
	top: 34%;
}
	

.formInput:disabled {
	opacity: 0.5;
	pointer-events: none;
}

.thumb {
	width: 15.5%;
}
	
	
#resetConfirmModal .modal-inner{
	width: 100%;
}

#resetConfirmModal .modal-buttons button{
	padding: 1em;
}
	
	
#close .catch{
	font-size: 130%;
}

#close .limit{
	font-size: 110%;
	font-weight: bold;
}

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


	
}