@charset "utf-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://
 * File name: base.css
 * Summary:   ベーススタイル
 * Author:    CrEa., Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    html & body
 *     =2-1  sns
 *     =2    box model styles
 *     =3    float/align styles
 *     =4    text styles
 *     =5    link styles
 *     =6    list styles
 *     =7    heading styles
 *     =8    table styles
 *     =9    other selectors
 *     =10   clearfix
 *     =11   lightbox用CSS
 *
 * ===============================================================
*/

/*==-----------------------------------------------
フルードメディア
-------------------------------------------------*/
img,video {
    height: auto;
    max-width: 100%;
    vertical-align:bottom;
}


/** =1
 * ========================================
 * html & body
 * ========================================
 */

html {
	height: 100%;
}

body {
	height: 100%;
	line-height: 1.5;
	color: #333;
    font-size: 1.4rem;
	font-size: 12px;
	word-break: break-all;
	font-family:"メイリオ", Meiryo,  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		html {
		}

		body {
			background:#b1e7ef;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		html {
		}

		body {
			background:#b1e7ef url(/src/otodama/14/pc/younglion/common/back.png) 0 0 repeat;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 980px) {
		html {
		}

		body {
			background:#b1e7ef url(/src/otodama/14/pc/younglion/common/back.png) 0 0 repeat;
			font-size: 14px;
		}
	}

/** =1-2
 * ========================================
 * sns
 * ========================================
 */


#sns ul li{
	float:left;
	margin:0 3px;
	width:90px;
	height:30px;
}
#sns ul li.twitter{
	width:95px;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#sns {
			background:#FFF;
			padding:10px 5px;
			margin:0 0 20px 0;
		}
		#sns ul{
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#sns {
			margin:0 10px 30px 10px;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 980px) {
		#sns {
			float:right;
			margin:10px 50px;
		}
		#sns ul li.btn_line{
			display:none;
		}
	}


/** =2
 * ========================================
 * box model styles
 * ========================================
 */

#main article {
	clear: both;
	margin: 0 10px 20px 10px;
}

#main section {
	clear: both;
	margin: 0 0 10px 0;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#main article {
		}

		#main section {
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#main article {
		}

		#main section {
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 980px) {
		#main article {
			margin: 0 60px 30px 60px;
		}

		#main section {
		}
	}


/** =3
 * ========================================
 * float/align styles
 * ========================================
 */

.flo_left {
	float: left;
}
.flo_right {
	float: right;
}

.txt_left {
	text-align: left;
}
.txt_center {
	text-align: center;
}
.txt_right {
	text-align: right;
}



/** =4
 * ========================================
 * text styles
 * ========================================
 */

#contents strong {
	font-weight: bold;
	color:#c22558;
	font-size:120%;
}

#contents span.attention{
	font-weight: bold;
	color:#CC0000;
}

/** =5
 * ========================================
 * link styles
 * ========================================
 */

a, a:link, a:visited, a:hover, a:active {
	text-decoration: underline;
	outline: none;
}
a {
	color: #0000FF;
}
a:visited {
	color: #800080;
}
a:hover {
	color: #FF0000;
}
a:active {
	color: #FF0000;
}


/** =6
 * ========================================
 * list styles
 * ========================================
 */
ul li {
	list-style-type: none;
}
ol li {
	list-style-type: decimal;
}


#main p,#main ul,#main ol,#main dl{
	margin:0 0 20px 0;
}

#main dl dt{
	background:#008793 url(/src/otodama/14/pc/younglion/common/icon_dt.png) 10px 50% no-repeat;
	background-size:20px 20px;
	color:#FFF;
	font-weight:bold;
	padding:4px 0 4px 35px;
	margin:0 0 5px 0;
}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#main dl dd{
			margin:0 0 10px 0;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#main dl dd{
			margin:0 10px 10px 10px;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 980px) {
		#main dl{
			margin:0 0 15px 0;
			padding:0 0 15px 0;
			border-bottom:dotted 1px #999;
			clear:both;
		}
		#main dl dt{
			width:165px;
			float:left;
		}
		#main dl dd{
			padding-left:210px;
		}
	}


/** =7
 * ========================================
 * heading styles
 * ========================================
 */

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}

#main h2{
	background:url();
}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#main h2 {
			background:#c22558;
			padding:3px 0 3px 10px;
			border-bottom:solid 3px #19acb4;
			margin-bottom:10px;
		}
		#main h2 img{
			width:140px;
			height:auto;
			background:#c22558;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#main h2 {
			background:#c22558;
			padding:3px 0 3px 10px;
			border-bottom:solid 3px #19acb4;
			margin-bottom:10px;
		}
		#main h2 img{
			width:160px;
			height:auto;
			background:#c22558;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 980px) {
		#main h2 {
			background:url(/src/otodama/14/pc/younglion/common/h2_back.png) 0 50% no-repeat;
			width:860px;
			height:35px;
			margin:0 0 20px 0;
			padding:5px 0 8px 0;
			text-indent:20px;
		}
		#main h2 img{
			width:210px;
			height:auto;
		}
	}


/** =8
 * ========================================
 * table styles
 * ========================================
 */

table {
	border-collapse: collapse;
}

th {
	font-weight: bold;
}



/** =9
 * ========================================
 * other selectors
 * ========================================
 */

hr {
	clear: both;
}



/** =10
 * ========================================
 * clearfix
 * ========================================
 */

/* For modern browsers */
.clearfix:before,
.clearfix:after,
.cf:before,
.cf:after {
	content: "";
	display: table;
}

.clearfix:after,
.cf:after {
	clear: both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix,
.cf {
	zoom: 1;
}

/** =11
 * ========================================
 * lightbox用CSS
 * ========================================
#imagelightbox
{
    position: fixed;
    z-index: 9999;
}