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

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://
 * File name: base.css
 * Summary:   ベーススタイル
 *
 * -----------------------------------
 *
 * 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
 *     =12   SNS用CSS
 *
 * ===============================================================
*/

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


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

html {
	height: 100%;
			font-size: 18px;
}

body {

		}


body {
	height: 100%;
	line-height: 1.8;
	color: #333;
	font-size: 1rem;
	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: 767px) {
		body {
			background:#b1e7ef;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 768px) {
		body {
			background:#b1e7ef url(../src/common/back.png) 0 0 repeat;
		}
	}


/** =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: 767px) {
		#sns {
			background:#FFF;
			padding:10px 5px;
			margin:0 0 20px 0;
		}
		#sns ul{
		}
	}


	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 768px) {
		#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: 767px) {
		#main article {
		}

		#main section {
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 768px) {
		#main article {
			margin: 0 60px 20px 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/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 10px 0;
}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 767px) {
		#main dl dd{
			margin:0 0 10px 0;
		}
	}


	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 768px) {
		#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:230px;
		}
	}


/** =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: 767px) {
		#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 wide layout ----- */
	@media screen and (min-width: 768px) {
		#main h2 {
			background:url(../src/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;
}


/** =12
 * ========================================
 * sns用CSS
 * ========================================

/******************************

 ソーシャルエリア全体を囲む要素
 * 他のコンテンツと距離を取りたい場合は[margin]を設定して下さい

******************************/
#main .social-area-syncer {
	padding: 20px 0 ;
	text-align: center;
}



/******************************

 [ul]要素

******************************/
/* スマホ */
#main ul.social-button-syncer {
	width: 238px ;
	margin: 24px auto ;
	padding: 0 ;
	border: none ;
	list-style-type: none ;
}

/* デスクトップ */
@media screen and ( min-width:480px ) {
	#main ul.social-button-syncer {
		width: 410px ;
	}
}


/******************************

 [li]要素

******************************/
ul.social-button-syncer li {
	float: left ;
	text-align: center ;
	height: 71px ;
	margin: 0 8px ;
	padding:0 ;
}


/******************************

 各種ボタン

******************************/
/* [Twitter] */
.sc-tw {
	width: 71px ;
}

.sc-tw svg {
	width: 30px ;
	height: 30px ;
 }

.sc-tw a {
	height: 56px ;
	margin: 0 auto ;
	padding-top: 6px ;
	display: block ;
	background: #1B95E0 ;
	font-size: 12px ;
	color: #fff ;
	font-weight: 700 ;
	text-decoration: none ;
	letter-spacing: .5px ;
	border-radius: 2px ;
}

.sc-tw a:hover {
	color: #fff ;
	background: #0c7abf ;
}

.sc-tw span:before {
	white-space: pre ;
	content: '\A' ;
}

/* [Facebook] */
.sc-fb {
	z-index: 99 ;
	width: 69px ;
}

/* [LINE] */
.sc-li {
	width: 50px ;
}

.sc-li-img {
	border: none ;
	margin: 0 auto ;
	padding:0 ;
	width: 36px ;
	height: 60px ;
}

/* デスクトップPCではLINEボタンを表示しない */
@media screen and ( min-width:480px ) {
	.sc-li {
		display: none ;
	}
}