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

	マークカード（はじめての方へ）

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


.grid .img figcaption { padding-bottom: 4px; }


/* --- マークカードの種類の画像幅 --- */
.grid.card_type_unit .img {
	width: 480px;
	vertical-align: top;
}

.grid.card_type_unit .img img { vertical-align: top; }

.grid > .txt {
    padding-left: 0;
	padding-right: 30px;
}

/* --- ○のカード --- */
.grid .txt h4 {
	font-weight: bold;
	font-size: 1.6rem;
}

.grid .txt h4 span.cc {
	padding: 5px 6px;
	font-size: 2.8rem;
	font-weight: normal;
	margin-right: 0.1em;
}

.gr { color: #fff; background-color: #588300; }
.bl { color: #fff; background-color: #4d75a6; }
.rd { color: #fff; background-color: #d3345c; }

.grid .txt h4 span.cc.light {
	padding: 4px 5px;
	font-size: 2.6rem;
	
	color: #00830f;
	border: solid 2px #00830f;
}

.grid .txt h4 span.cc.quick {
	padding: 4px 5px;
	font-size: 2.6rem;
	color: #353093;
	border: solid 2px #353093;
}

.grid .txt h4 span.cc.quick.gi {
	color: #8C7400;
	border: solid 2px #8C7400;
}

.grid .txt h4 span.opt { font-size: 1.2rem; }

.card_type_unit {
    padding-bottom: 30px;
    border-bottom: 1px dotted #ccc;
}

.card_type_unit figcaption {
	font-weight: bold;
}

#card_type_blue figcaption { color: #4372ac; }
#card_type_red figcaption { color: #D1133C; }


/* --- 購入可能な馬券 --- */
.available_list {
	position: relative;
	padding: 20px;
	padding-top: 24px;
	border: solid 1px #ccc;
}

/*.available_list ul {
	display: table;
	margin-bottom: 1px;
}

.available_list ul > li {
	display: table-cell;
	padding: 4px 16px;
	vertical-align: middle;
	border-right: solid 1px #fff;
	color: #fff;
	background-color: #00830f;
}
*/

.available_list ul {
	/*display: block;*/
	font-size: 0;
}

.available_list ul > li {
	display: inline-block;
	font-size: 1.3rem;
	padding: 4px 16px;
	vertical-align: middle;
	border-right: solid 1px #fff;
	border-bottom: solid 1px #fff;
	color: #fff;
	background-color: #00830f;
}

/*.available_list ul > li.off { background-color: #aaa;}*/

.available_list h5 {
	position: absolute;
	height: 24px;
	top: -14px;
	display: inline-block;
    color: #555;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.5;
    padding: 4px 8px;
	background: rgba(253,200,0,0.8);
	background-color: #fff;
	/*border-radius: 2px;*/
	text-align: center;
}


/* ----- マークカードの記入時の注意 ----- */
.block_header h3 strong i {
	color: #c02;
	font-size: 2rem;
	margin: 0 0.2em;
	line-height: 1;
}


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

#mark_card_caution .grid div {

}

.grid .caution_unit { 
	padding: 20px;
	padding-bottom: 0;
}

.caution_unit figure {
	padding: 0;
	margin: 0;
}

.caution_unit figcaption {
	position: relative;
	font-size: 1.6rem;
    color: #333;
	color: #fff;
	color: #c02;
	padding: 8px;
	background-color: #e0f3e2;
	background-color: #268300;
	background-color: #c02;
	background-color: #fff;
	text-align: center;
	margin-bottom: 13px;
	border: 2px solid #c02;
}

.caution_unit figcaption:after,
.caution_unit figcaption:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border: solid transparent;
}

.caution_unit figcaption:after {
	top: 100%;
    left: 50%;
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #FFFFFF;
	border-width:10px;
	margin-left: -10px;
}

.caution_unit figcaption:before {
	border-color: rgba(204, 204, 204, 0);
	border-top-color: #c02;
	border-width: 13px;
	margin-left: -13px;
}

.caution_unit figure p.img {
	padding: 5px;
	text-align: center;
	border: solid 1px #ccc;
	border-bottom: none;
}

.caution_unit figure img { vertical-align: top; }

.caution_unit > p { 
	padding: 15px;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border-top: 1px dotted #ccc;
}


/* ----- 3連単 ケーススタディ ----- */
#case_study .syutsuba {
	padding: 20px;
	text-align: center;
	border: solid 1px #ccc;
	border-bottom: 1px dotted #ccc;
	/*border-bottom: none;*/
}

/* --- 買い方 --- */
ul.howto_list {
	background-color: #eaeaea;
    padding: 10px;
}

ul.howto_list > li {
	/*background-color: #fff;*/
    /*padding: 20px;*/
	/*border-radius: 4px;*/
	margin-bottom: 10px;
}

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

ul.howto_list li .btn_block { box-shadow: 0 1px 4px 0 rgba(0,0,0,0.1); }

ul.howto_list li .btn_block > a {
	display: block;
	color: #333;
	text-decoration: none;
}

ul.howto_list li .title {
	font-size: 1.4rem;
	padding: 25px;
	vertical-align: middle;
	background-color: #fff;
	border-radius: 4px 0 0 4px;
}

.howto_unit.on .title { border-radius: 4px 0 0 0; }

ul.howto_list li .btn_block > a:hover .title { background-color: #f5f5f5; }

.title > .inner { display: table; }

.title > .inner {
	position: relative;
    display: table;
    width: auto;
	width: 100%;
}

.title > .inner > span.balloon {
    left: 100%;
    top: 50%;
	margin-left: 25px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(42, 168, 61, 0);
    border-left-color: #2aa83d;
    border-color: rgba(238,238,238, 0);
    border-left-color: #fff;
    border-width: 12px;
    margin-top: -12px;
}

ul.howto_list li .btn_block > a:hover span.balloon { border-left-color: #f5f5f5; }

.title > .inner > span {
    display: table-cell;
    vertical-align: middle;
}

.title .inner > span.icon {
    padding-right: 0.5em;
    color: #188542;
}

.title .inner > span.icon .fa-chevron-circle-up { display: none; }
.howto_unit.on span.icon .fa-chevron-circle-right { display: none; }
.howto_unit.on span.icon .fa-chevron-circle-up { display: block; }

ul.howto_list li .title strong {
	color: #555;
	font-weight: bold;
	font-size: 1.6rem;
}

ul.howto_list li .title strong.num {
	font-size: 1.8rem;
	color: #191ed6;
}

ul.howto_list li .title .txt span {
	font-size: 1.2rem;
	margin-left: 1em;
}

ul.howto_list li .title i {
	font-size: 1.8rem;
	/*margin-right: 0.6em;*/
    color: #188542;
}

ul.howto_list li .label {
	width: 200px;
	text-align: center;
	padding: 20px 30px;
	padding-top: 15px;
	background-color: #f3f3f3;
	background-color: #fff8e1;
	border-radius: 0 4px 4px 0;
}

.howto_unit.on .label { border-radius: 0 4px 0 0; }

ul.howto_list li .label p.opt {
	/*position: absolute;
	top: 10px;
	left: -94px;*/
	color: #666;
	text-align: left;
	font-size: 1.1rem;
	padding-bottom: 4px;
}

ul.howto_list li .label p.label_card {
	font-size: 2rem;
	padding: 10px;
	text-align: center;
}

.howto_unit.on .content {
    display: block;
    opacity: 1;
    animation: obj_fade_in 0.5s ease-in-out;
}

ul.howto_list li .content { 
	display: none;
	padding: 20px;
	background-color: #fff8e1;
	border-radius: 0 0 4px 4px;
}

ul.howto_list li .content > p strong { font-size: 1.8rem; }

ul.howto_list li .content p strong.txt_gr { color: #527900; }
ul.howto_list li .content p strong.txt_bl { color: #3c6ca8; }
ul.howto_list li .content p strong.txt_red { color: #d1133c; }

ul.howto_list li .content .mark_type { width: 482px; }
ul.howto_list li .content .result { padding-left: 20px; }

ul.mark_list { 
	padding: 15px;
	border: 3px solid #ccc;
	background-color: #fff;
}

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

ul.mark_list li {
	float: left;
	padding: 5px;
	text-align: center;
}

ul.mark_list.div2 li { width: 50%; }
ul.mark_list.div3 li { width: 33.33%; text-align: left; }
ul.mark_list.div4 li { width: 25%; text-align: left; }

.collapse-close-btn {
	text-align: center;
	padding-top: 15px;
    /*border-top: 1px solid #e3e3e3;*/
}

/* --- このとき「マルチ」をマークすると…ブロック --- */
.multi_block p img { vertical-align: top; }



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

	979px以下

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

@media screen and ( max-width : 979px ) {
		
	/* --- マークカードの種類の画像幅 --- */
	.grid.card_type_unit .img { width: 400px; }
	/* --- 購入可能な馬券 --- */
	.available_list ul > li { padding: 4px 12px; }
    
}


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

	864px以下

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

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

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

	ul.nav.pills > li {
		display: inline-block;
		width: 33.33%;
	}
	
	/* --- マークカードの種類 --- */
/*	.grid.card_type_unit > .txt { padding-left: 15px; }*/
	
	/* --- 購入可能な馬券 --- */
	.available_list ul > li { padding: 4px 8px; }
	
	ul.howto_list li .content .grid,
	ul.howto_list li .content .grid div { display: block; }
	ul.howto_list li .content .mark_type { width: auto; }
	ul.howto_list li .content .mark_type p.img,
	.multi_block p.img { text-align: center; }
	
	ul.howto_list li .content .result {
		padding-top: 15px;
		padding-left: 0;
	}
	
	ul.mark_list.div2 li { width: 25%; }
	ul.mark_list.div4 li { width: 16.66%; }
}


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

	767px以下

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

@media screen and ( max-width : 767px ) {
	
	ul.nav.pills > li { width: 50%; }
	
	/* --- マークカードの種類 --- */
    .grid.card_type_unit {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

	.grid.card_type_unit > div {
		display: table-cell;
		vertical-align: top;
	}

	/* --- マークカードの種類の画像幅 --- */
	.grid.card_type_unit .img { width: 320px; }
	.grid.card_type_unit > div.txt { padding-top: 0; }
	

	.howto_unit a .grid div { display: table-cell; }
	
	
}


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

	667px以下

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

@media screen and ( max-width : 667px ) {
	
	/* --- マークカードの種類 --- */
    
    .grid.card_type_unit,
	.grid.card_type_unit > div { display: block; }
	
	.grid.card_type_unit > div.img {
		width: auto;
		text-align: center;
	}
	
	.grid.card_type_unit > div.txt {
        padding-bottom: 15px;
        padding-right: 0;
    }
	
	
	/* --- 購入可能な馬券 --- */
	.available_list ul > li { padding: 4px 16px; }
	
	
	
	
}


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

	639px以下

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

@media screen and ( max-width : 639px ) {
	
	.howto_unit a .grid,
	.howto_unit a .grid div { display: block; }
	
	ul.howto_list li .title {
		padding: 20px;
		border-radius: 4px 4px 0 0;
	}
	
	ul.howto_list li .label {
		width: auto;
		padding: 20px;
		
		border-radius: 0 0 4px 4px;
	}
	
	ul.howto_list li .label p.label_card {
		font-size: 1.6rem;
		padding: 10px;
	}
	
	ul.howto_list li .content { padding-top: 0; }
		
	.title > .inner > span.balloon { display: none; }
	
	ul.mark_list.div4 li { width: 25%; }
}


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

	480px以下

------------------------------------------------------------ */
@media screen and (max-width: 480px) {
	
	ul.howto_list li .content > p strong { font-size: 1.6rem; }
	
	
 
}


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

	479px以下

------------------------------------------------------------ */
@media screen and (max-width: 479px) {
	
	.available_list ul > li { padding: 4px 10px; }
	
	ul.mark_list.div4 li { width: 33.33%; }
 
}


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

	425px以下

------------------------------------------------------------ */
@media screen and (max-width: 425px) {
	
	/*.available_list ul:nth-child(2) {
		display: block;
		font-size: 0;
	}
	
	.available_list ul:nth-child(2) > li {
		display: inline-block;
   		width: 20%;
		text-align: center;
    	font-size: 1.3rem;
		border-bottom: solid 1px #fff;
	}*/
	
	ul.mark_list { padding: 10px; }
	
	ul.mark_list.div2 li,
	ul.mark_list.div3 li,
	ul.mark_list.div4 li { width: 50%; }
 
}



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

	359px以下

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

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

	ul.howto_list li .title strong { font-size: 1.4rem; }

	ul.howto_list li .title strong.num { font-size: 1.6rem; }

}



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

	320px以下

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

@media screen and ( max-width : 320px ) {
	
    ul.nav.pills > li { width: 100%; }
	
	.available_list ul:nth-child(2) > li { width: 25%; }
    
}