@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    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
 *
 * ===============================================================
*/

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

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

html {
	height: 100%;
	font-size: 62.5%; /*基準10px=1em*/
}

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

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

		body {
			font-size: 12px;
			font-size: 1.2rem;
		}
	}

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

		body {
		}
	}

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

		body {
		}
	}



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

article {
	clear: both;
	background:#FFF;
	margin: 0 0 20px 0;
	border:solid 2px #c7000a;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    padding:10px;
}

section {
	clear: both;
	margin: 0 5px 20px 5px;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		article {
		}
		section {
			margin: 0 0 10px 0;
		}
	}

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

		section {
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		article {
			margin: 0 0 30px 0;
			border:solid 3px #c7000a;
			padding:20px;
		}

		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
 * ========================================
 */

strong {
	font-weight: bold;
	color:#cd1400;
}

b {
	color:#cd1400;
}

.text_l{
	font-size:125%;
}

.text_s{
	font-size:90%;
}


.text_s{
	font-size:90%;
}

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

a, a:link, a:visited, a:hover, a:active {
	text-decoration: underline;
	outline: none;
}
a {
	color: #01b2bc;
}
a:visited {
	color: #800080;
}
a:hover {
	color: #ff555e;
}
a:active {
	color: #ff555e;
}


/** =6
 * ========================================
 * list styles
 * ========================================
 */

ul li {
	list-style-type: none;
}
ol li {
	list-style-type: decimal;
}
#contents article p,
#contents article ol,
#contents article ul,
#contents article dl{
	margin:0 0 10px 0;
}
#contents article ol{
	padding-left:2em;
}
#contents article ol li {
	list-style-type: decimal;
	margin:0 0 10px 0;
}

#contents article dl{
	clear:both;
	padding:0 0 10px 0;
	border-bottom:dotted 1px #CCC;
	
}
#contents article dl dt{
	background:#1856a6;
	padding:3px 5px;
	color:#FFF;
	margin:0 0 5px 0;
}
#contents article dl dd{
	padding:3px 0;
}

#contents article dl ul,
#contents article dl ol{
	margin:0;
}


	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#contents article ul li{
			background:url(/src/otodama/14/pc/common/icon_li.png) 0 5px no-repeat;
			background-size:7px 7px;
			padding-left:10px;
			margin:0 5px 5px 5px;
		}
		#contents article dl dt{
			padding:2px 5px;
			background:#1856a6 url(/src/otodama/14/pc/common/icon_dt.png) 6px 50% no-repeat;
			background-size:2px 8px;
			text-indent:8px;
		}
		#contents article dl dd{
			padding:0;
			margin:0 5px 5px 5px;
		}
		#contents article dl.size_s dt{
			width:115px;
			float:left;
		}
		#contents article dl.size_s dd{
			padding:3px 0 3px 135px;
			margin:0 0 5px 0;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#contents article ul li{
			background:url(/src/otodama/14/pc/common/icon_li.png) 0 4px no-repeat;
			padding-left:15px;
			margin:0 0 5px 0;
		}
		#contents article dl dt{
			width:150px;
			float:left;
		}
		#contents article dl dd{
			padding-left:170px;
		}
		#contents article dl.size_l dt{
			width:230px;
			float:left;
			background:#1856a6 url(/src/otodama/14/pc/common/icon_dt.png) 6px 50% no-repeat;
			text-indent:12px;
		}
		#contents article dl.size_l dd{
			padding-left:250px;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#contents article ul li{
			background:url(/src/otodama/14/pc/common/icon_li.png) 0 4px no-repeat;
			padding-left:15px;
			margin:0 0 5px 0;
		}
		#contents article dl dt{
			width:150px;
			float:left;
			background:#1856a6 url(/src/otodama/14/pc/common/icon_dt.png) 6px 50% no-repeat;
			text-indent:12px;
		}
		#contents article dl dd{
			padding-left:170px;
		}
		#contents article dl dd ul{
		}
		#contents article dl.size_l dt{
			width:230px;
			float:left;
		}
		#contents article dl.size_l dd{
			padding-left:250px;
		}
	}


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

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

#contents h1,
#contents h2,
#contents h3,
#contents h4,
#contents h5,
#contents h6{
	margin:0 0 10px 0;
}

#contents h3{
	border-bottom:solid 2px #1856a6;
}
#contents h3 div{
	margin-bottom:1px;
	padding-bottom:5px;
	border-bottom:solid 1px #1856a6;
}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#contents h2{
			max-width:360px;
		}

		#contents h4{
			border-bottom:dotted 2px #c7000a;
			border-left:solid 3px #c7000a;
			padding-left:6px;
			color:#c7000a;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#contents h2{
			float:left;
			max-width:360px;
		}
		#contents h3 img{
			max-width:360px;
		}
		#contents h4{
			border-bottom:dotted 2px #c7000a;
			border-left:solid 3px #c7000a;
			padding-left:6px;
			color:#c7000a;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#contents h2{
			float:left;
		}
		#contents h3{
			margin:0 0 20px 0;
		}
		#contents h4{
			border-bottom:dotted 2px #c7000a;
			border-left:solid 3px #c7000a;
			padding-left:10px;
			color:#c7000a;
			font-size:120%;
		}
	}


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

table {
	border-collapse: collapse;
}

th {
	font-weight: bold;
}



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

hr {
	clear: both;
}

.gmap {
	position: relative;
	padding-bottom: 50%; // これが縦横比
	height: 0;
	overflow: hidden;
}
.gmap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		.gmap {
			padding-bottom: 75%; // これが縦横比
		}
	}

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

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


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