/* ------------------------------------------------------------

	UMAポート（はじめての方へ）

------------------------------------------------------------ */

#umaca_card .grid .img {
	width: 360px;
	padding-left: 0;
}

ul.nav.pills {
	display: block;
	font-size: 0;
}

ul.nav.pills > li {
	display: inline-block;
	width: 50%;
	font-size: 1.3rem;
}

#about .grid { table-layout: fixed; }

#about .grid .img {
	padding: 10px;
}

#about .grid .img img {
	border: 1px solid #ccc;
    border-radius: 8px;
}

#service .grid .txt {
	padding-left: 0;
}

#service .grid .img {
	width: 200px;
	padding: 0 30px;
}

ul.step_list:after {
    content: '';
    display: block;
    clear: both;
}

ul.step_list {
	
}

li.step_unit {
	float: left;
	width: 50%;
	padding: 10px;
}

ul.step_list.col3 li.step_unit {
	width: 33.33%;
}

li.step_unit.seat {  width: 100%; }

li.step_unit:last-child { margin-bottom: 0; }

li.step_unit .panel { margin: 0; }

li.step_unit h4 {
    /*max-width: 550px;
    margin: 0 auto;*/
    /*margin-top: 30px;*/
    background-color: #f7f7f7;
	/*font-size: 1.4rem;*/
	font-weight: bold;
    
	display: table;
	width: 100%;
}

.step_unit h4 span {
	display: table-cell;
}

.step_unit h4 span.icon_num {
	color: #0b838a;
	width: 1em;
}

.step_unit h4 span.txt {
	padding-left: 0.3em;
}


.panel h4.sub_header {
	padding: 10px;
	
	background-color: #f7f7f7;
    color: #333;
	border: 1px solid #ccc;
}

.panel .content { padding: 0; }

.panel .content p.img {
	padding: 20px 0;
	text-align: center;
}

.panel .content p.img a {
    display: block;
    position: relative;
}


.panel .content p.img a .icon {
    width: 60px;
	height: 40px;
	background: url(/kouza/umaca/img/icon_movie-arrow.png) no-repeat;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
    transition: all 0.4s ease-in-out;
}

.panel .content p.img img { max-height: 300px; } 

.seat .panel .content p.img {
	display: table;
	table-layout: fixed;
	width: 100%;
	padding: 20px;
}

.seat .panel .content p.img span {
	display: table-cell;
	padding: 5px;
}

.seat .panel .content p.img span img { vertical-align: top; }

.panel .content .note_list { padding: 10px; }

.panel .content .caution {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.panel .content .caution p { text-align: left; }


.block_header h3 span {
	background-color: #ba0000;
	background-color: #0b838a;
	background-color: #138847;
    color: #fff;
    font-size: 1.2rem;
    padding: 4px 8px;
    border-radius: 3px;
    /*margin-right: 0.5em;*/
	margin-left: 0.8em;
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.1);
}

.panel {
	position: relative;
	margin: 0 20px;
	margin-top: 40px;
}

.panel:first-child { margin-top: 0; }

.panel .arrow {
	font-size: 4rem;
    color: #ccc;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    bottom: -30px;
    line-height: 1;
    z-index: 50;
}

.panel .arrow { display: none; }

ul.howto_list:after {
    content: '';
    display: block;
    clear: both;
}

ul.step_list {
	
}

li.howto_unit {
	float: left;
	width: 50%;
	padding: 10px;
	vertical-align: top;
}

ul.caution_list > li {
	padding: 10px;
	background-color: #fff;
	border: 1px dashed #ddd;
	margin-bottom: 10px;
	
	display: table;
	width: 100%;
}

ul.caution_list li:last-child { margin-bottom: 0; }

ul.caution_list > li > div {
    display: table-cell;
    vertical-align: top;
	text-align: left;
}

ul.caution_list > li > div.cap {
	width: 24px;
	white-space: nowrap;
	vertical-align: top;
}

ul.caution_list li div.cap span {
	display: inline-block;
	width: 100%;
	text-align: center;
	font-weight: bold;
	font-size: 1.1rem;
	color: #fff;
	background-color: #0b838a;
	padding: 1px;
}

ul.caution_list li div.txt {
	line-height: 1.7;
	padding-left: 0.6em;
}

ul.caution_list li div.txt strong.underline {
	text-decoration: underline;
}

ul.caution_list > li div.txt p.img {
	text-align: center;
}


ul.caution_list li ul li {
	display: table;
	width: 100%;
	margin-bottom: 5px;
	border: 1px dashed #ddd;
	/*font-size: 1.2rem;*/
	height: 40px;
}

ul.caution_list li ul li > div {
	display: table-cell;
	padding: 0 10px;
	vertical-align: middle;
	/*color: #555;*/
	
}

ul.caution_list li ul li > .item {
	background-color: #0b838a;
	width: 50px;
	
	color: #fff;
	text-align: center;
}

ul.caution_list li ul li > .config {
	background-color: #f7f7f7;
	background-color: #eee;
	position: relative;
}

ul.caution_list li ul li > .config .icon {
	position: absolute;
	left: 100%;
    top: 50%;
    background-color: #fff;
    padding: 4px;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    text-align: center;
    box-shadow: 0 1px 4px 1px rgba(0,0,0,0.2);
	margin-left: -13px;
	margin-top: -13px;
}

ul.caution_list li ul li > div > span i {
	margin: 0 1em;
	color: #000;
}

ul.caution_list li ul li > .config .icon i {
	color: #0b838a;
	font-size: 1.8rem;
	line-height: 1;
}

.icon i.fa-chevron-circle-down { display: none; }

ul.caution_list li ul li > .result {
	padding-left: 30px;
	width: 340px;
}

ul.caution_list li ul li > .result br { display: none; }

ul.link_list li a {
	
}


.card_case {
    text-align: center;
}


/*マイクーポン*/
#mycoupon ul.link_list.sp,
#mycoupon ul.link_list.pc { display: none; }

#mycoupon ul.link_list.sp.on,
#mycoupon ul.link_list.pc.on { display: block; }


.use_movie {
    padding: 10px;
}


/* ------------------------------------------------------------

	959px以下

------------------------------------------------------------ */

@media screen and ( max-width : 959px ) {
	
	
	/* ---- 入金・出金について（例1・例2） ---- */
	
	ul.caution_list li ul li {
		height: 54px;
	}
	
	ul.caution_list li ul li > .config span {
		border-width: 27px;
		/*margin-top: -20px;*/
	}
	
	ul.caution_list li ul li > .result {
		width: 220px;
	}

	ul.caution_list li ul li > .result br { display: block; }
    
}


/* ------------------------------------------------------------

	767px以下

------------------------------------------------------------ */

@media screen and ( max-width : 767px ) {

	.grid .img {
		width: 100%;
		text-align: center;
		padding: 0;
	}
	
	#umaca_card .grid .img {
		width: 100%;
		text-align: center;
	}
	
	ul.nav.pills {display: block; }
	ul.nav.pills > li {
		display: block;
		width: 100%;
	}
	
	li.step_unit,
	li.howto_unit {
		float: none;
		width: 100%;
	}
	
	

}


/* ------------------------------------------------------------

	639px以下

------------------------------------------------------------ */

@media screen and ( max-width : 639px ) {
	
	
	.seat .panel .content p.img {
		display: block;
	}

	.seat .panel .content p.img span {
		display: block;
	}
	
	.panel .arrow { display: block; }

	ul.caution_list li ul li div {
		display: block;
		width: 100%;
		
		padding: 10px;
		text-align: center;
	}
	
	ul.caution_list li ul li .item,
	ul.caution_list li ul li .result {
		width: 100%;
	}
	
	ul.caution_list li ul li .config,
	ul.caution_list li ul li .result {
		padding: 20px;
	}
	
	ul.caution_list li ul li > .result br { display: none; }
	
	ul.caution_list li ul li > .config .icon {
		position: absolute;
		left: 50%;
		top: 100%;
		background-color: #fff;
		padding: 4px;
		border-radius: 50%;
		width: 26px;
		height: 26px;
		text-align: center;
		box-shadow: 0 1px 4px 1px rgba(0,0,0,0.2);
		/*margin-left: -13px;*/
		margin-top: -13px;
	}
	
	.icon i.fa-chevron-circle-right { display: none; }
	.icon i.fa-chevron-circle-down { display: block; }
}


/* ------------------------------------------------------------

	480px以下

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


/* ------------------------------------------------------------

	479px以下

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


/* ------------------------------------------------------------

	425px以下

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



/* ------------------------------------------------------------

	359px以下

------------------------------------------------------------ */

@media screen and ( max-width : 359px ) {
	
    
    
}



/* ------------------------------------------------------------

	320px以下

------------------------------------------------------------ */

@media screen and ( max-width : 320px ) {
	
    
    
}