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

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

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

#umaport .grid .img {
	width: 200px;
	padding-left: 30px;
}

#umaport .grid .img img { max-height: 300px; }

#odds .grid .img {
	width: 300px;
	width:180px;
	padding-left: 0;
}

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

.panel .content p.img { text-align: center; }

.panel .content img { border: solid 1px #ebebeb; }

.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: 8rem;
    color: #ccc;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    bottom: -60px;
    line-height: 1;
    z-index: 50;
}


ul.breadcrumb {
	display: table;
    overflow: hidden;
    width: 100%;
	table-layout: fixed;
}

ul.breadcrumb li {
	background: #0E7AC4;
    color: #fff;
    display: table-cell;
    text-align: center;
  }


ul.breadcrumb li a {
	background: #0E7AC4;
    color: #fff;
    display: block;
	padding: 10px;
	text-decoration: none;
    position: relative;
}

ul.breadcrumb li a:before {
	border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 20px solid #fff;
    content: '';
    display: block;
    height: 0;
    margin-top: -40px;
    position: absolute;
    top: 50%;
    right: -1px;
    width: 0;
    z-index: 1;
}

ul.breadcrumb li:last-child a:before {display: none; }

ul.breadcrumb li a:after {
	border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 20px solid #0E7AC4;
    content: '';
    display: block;
    height: 0;
    margin-top: -40px;
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    z-index: 2;
  }
/*アンカーリンク*/
.nav.pills + .nav.pills{
    border-top: dashed 1px #ddd;
}

/* - オッズを印刷する など
---------------------------------------------------------------------- */
.slide_unit {

}

.slide_unit > .inner {
    display: table;
    width: 100%;
}

.slide_unit > .inner > .cell {
    display: table-cell;
    vertical-align: top;
}

.slide_unit > .inner > .cell.list {
    width: 220px;
    /*padding-right: 20px;*/
    border: 1px solid #ddd;
    border-right: none;
    
    background-color: #ebebeb;
}

.slide_unit > .inner > .cell.list > ul > li { width: 100%; }

.slide_unit > .inner > .cell.list > ul > li > a {
	display: block;
    padding: 15px 12px;
    transition: all 0.3s ease-in-out;
}

.slide_unit > .inner > .cell.list > ul > li.current > a {
    background-color: #0b838a;
}

.slide_unit > .inner > .cell.list > ul > li > a > .inner > span { vertical-align: top; }

.slide_unit > .inner > .cell.list > ul > li > a > span.num {
	font-size: 1.4rem;
    color: #188542;
	
    margin-right: 0.4em;
}

.slide_unit > .inner > .cell.list > ul > li.current > a span.num {
    color: #fff;	
}

.slide_unit > .inner > .cell.main {
    border: 1px solid #ddd;
    padding: 20px;
    /*text-align: center;*/
    vertical-align: middle;
    
    position: relative;
    
}

.slide_unit > .inner > .cell.main > ul {
    
}

.slide_unit > .inner > .cell.main > ul > li {
    display: none;
    
    position: relative;
}

.slide_unit > .inner > .cell.main > ul > li.current {
    display: block;
    
    /*animation: obj_fade_in 0.4s ease-in-out, obj_scale 0.3s cubic-bezier(.68,-.55,.265,1.55);*/
    
    animation: obj_fade_in 0.3s ease-in-out;
}

.slide_unit > .inner > .cell.main > ul > li .img {
    max-width: 550px;
    margin: 0 auto;
}

.slide_unit > .inner > .cell.main > ul > li .img img {
    vertical-align: top;
	border: solid 1px #ebebeb;
}

.slide_unit > .inner > .cell.main > ul > li h4 {
    /*max-width: 550px;
    margin: 0 auto;*/
    /*margin-top: 30px;*/
    padding: 10px;
    background-color: #f7f7f7;
	font-size: 1.4rem;
	font-weight: bold;
    
    /*max-width: 590px;
    margin: 0 auto;*/
}

.slide_unit > .inner > .cell.main > ul > li h4 span {
	color: #0b838a;
	font-size: 1.4rem;
	
    margin-right: 0.3em;
}

.slide_unit > .inner > .cell.main > ul > li .buy_unit > .caution.after_img {
	max-width: 550px;
	margin: auto;
}

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

.buy_unit ul.txt_list {
	
}

.buy_unit ul.txt_list > li {
	float: left;
	width: 50%;
	padding: 10px;
	vertical-align: top;
}

.buy_unit ul.txt_list > li:last-child { margin-bottom: 0; }

.select_unit > h5.sub_header {
	background-color: #1b521f;
	background-color: #4e7987;
    font-weight: bold;
    font-size: 1.4rem;
    
	padding: 0;
	border: 2px solid #c5cdcf;
}

.select_unit > h5.sub_header a {
	display: block;
	color: #fff;
	text-decoration: none;
	
	padding: 10px 12px;
}

.select_unit > h5.sub_header a i {
	color: #fff;
	margin-right: 0.5rem;
}

.select_unit > .select_block {
	padding: 20px;
	border: solid 1px #d0d2d2;
	/*border: dashed 1px #ccc;*/
	border-top: none;
	
	margin-bottom: 20px;
}

.select_unit > .select_block .collapse-close-btn { text-align: center; }


.slide_unit > .inner > .cell.main > ul > li .arrow {
    font-size: 5rem;
    color: #ccc;
    
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    
    bottom: -40px;
    
    line-height: 1;
    z-index: 50;
    
    display: none;
}

.nabi_block {
	position: relative;
	padding-top: 15px;
	border-top: 1px solid #ccc;
	height: 44px;
}

.slide_unit > .inner > .cell.main .navi {
    position: absolute;
}

.slide_unit > .inner > .cell.main .navi.off {
    display: none;
}

.slide_unit > .inner > .cell.main .navi.prev {
    left: 15px;
   /* top: 50%;
    transform: translateY(-50%);*/
}

.slide_unit > .inner > .cell.main .navi.next {
    right: 15px;
    /*top: 50%;
    transform: translateY(-50%);*/
}

.slide_unit > .inner > .cell.main .navi > a > span {
    /*display: block;*/
}


.slide_unit > .inner > .cell.main .navi > a > span.icon {
    font-size: 1.5rem;
    color: #188542;
	
	margin-right: 0.5rem;
}



/*----- 2018.11.10　追記 -----*/

#odds .grid.odds_ticket .img {
	width:180px;
	padding-left:30px;
}

#odds .grid.odds_ticket > .txt {
	padding-left:0;
}

.odds_ticket figure figcaption {
	font-size: 1.3rem;
	text-align: center;
	padding-top: 5px;
}

@keyframes obj_fade_in {
    from{ opacity: 0; }
    to{ opacity: 1; }
}

/*#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; }*/


/* --- PC・SP切り替え --- */
.img_sp_check span.off { display: none; }



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

	979px以下

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

@media screen and ( max-width : 979px ) {
	
	
	/* - スライド
	---------------------------------------------------------------------- */
	 .slide_unit > .inner {
        display: block;
    }
    
    .slide_unit > .inner > .cell {
        display: block;
    }
    
    .slide_unit > .inner > .cell.list {
        width: auto;
        border-right: 1px solid #ddd;
        border-bottom: none;
    }
    
    .slide_unit > .inner > .cell.list > ul.link_list {
        display: block;
    }
    
    .slide_unit > .inner > .cell.list > ul.link_list:after {
        content: ''; display: block; clear: both;
    }
    
    .slide_unit > .inner > .cell.list > ul.link_list > li {
        float: left;
        width: 33.33%;
    }
    
    .slide_unit > .inner > .cell.list > ul > li > a {
        padding: 10px;
        font-size: 1.2rem;
    }
	
	/* --- 「オッズを印刷する」＆「前日までの投票内容確認」＆「スマッピー投票」＆「スマッピー投票」のスライド内メニュー --- */
	#odds .slide_unit > .inner > .cell.list > ul.link_list > li,
	#confirm .slide_unit > .inner > .cell.list > ul.link_list > li,
	#smappy .slide_unit > .inner > .cell.list > ul.link_list > li { width: 50%; }

    
}


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

	767px以下

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

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

	#umaport .grid .img {
		width: 100%;
		text-align: center;
		padding: 0;
	}
	
	#odds .grid .img {
		width: 100%;
		text-align: center;
	}
	
	ul.nav.pills { font-size: 0; }
	
	ul.nav.pills > li {
		display: inline-block;		
		width: 50%;
	}
	
	.slide_unit > .inner > .cell.main {
        padding: 0;
        border: none;
    }
    
    
    .slide_unit > .inner > .cell.list {
        display: none;
    }
    
    .slide_unit > .inner > .cell.main .navi {
        display: none;
    }
	
    .slide_unit > .inner > .cell.main > ul > li {
        display: block;
        
        border: 1px solid #ddd;
        padding: 20px;
        
        margin-top: 20px;
        margin-top: 30px;
    }
    
    .slide_unit > .inner > .cell.main > ul > li:first-child {
        margin-top: 0;
    }
    
    .slide_unit > .inner > .cell.main > ul > li .arrow {
        display: block;
    }
	
	.buy_unit ul.txt_list {

	}

	.buy_unit ul.txt_list > li {
		display: block;
		width: 100%;
		padding: 0;
		margin-bottom: 10px;
	}
	
	.buy_unit ul.txt_list > li:last-child { margin-bottom: 0; }
	
	.nabi_block { display: none; }

	#odds .grid.odds_ticket .img {
		width: 100%;
		padding-left: 0;
		max-width: 180px;
		margin: 0 auto;
		margin-top:20px;
	}
	
	#odds .grid.odds_ticket > .txt {
		padding-top:0;
	}
}


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

	639px以下

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

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

	ul.nav.pills { display: block; }
	
	ul.nav.pills > li {
		display: block;		
		width: 100%;
	}
	
	.slide_unit > .inner > .cell.main > ul > li {
        padding: 10px;
    }
	
}


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

	480px以下

------------------------------------------------------------ */
@media screen and (max-width: 480px) {
    .block_header h3 span {
        display:inline-block;
    }
　
 
 
}


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

	479px以下

------------------------------------------------------------ */
@media screen and (max-width: 479px) {
　
 	.figure_list { display: block; }

	.figure_list figure {
		display: block;
		text-align: center;
	}
	
	.figure_list figure:first-child { padding-top: 0; }
 
}


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

	425px以下

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



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

	359px以下

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

@media screen and ( max-width : 359px ) {
	
    .slide_unit > .inner > .cell.main > ul > li .txt {
        padding: 5px 8px;
    }
    
	.select_unit > h5.sub_header { font-size: 1.2rem; }
    
}



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

	320px以下

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

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