﻿  @charset "utf-8";
/* CSS Document */

html {font-size: 62.5%;}

body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-text-size-adjust:none;
	font-size:1.4rem;
	line-height:1.5em;
	color:#333;
	text-align:center;
	min-width:320px;
	margin:0 auto;
}

html,body,div,
ul,ol,li,dl,dt,dd,
form,fieldset,input,textarea,
h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,
th,td,img {
    margin: 0;
    padding: 0;
}

p {
	margin-bottom:1em;
}

table{
	border-collapse:collapse;
	border-spacing:0;
	empty-cells:show;
}

aside{
	background:#eee;
	border-radius:5px;
	padding:15px 20px;
	margin-bottom:20px;
	display:inline-block;
}

aside p:last-child{
	margin-bottom:0;
}

address{
	background:#ecf9e8;
	padding:15px;
	margin-bottom:20px;
	color:#01876c;
	font-size:16px;
	line-height:1.5em;
	font-style:normal;
	text-align:center;
}

hr{
	border:1px solid #ccc;
	margin-bottom:30px;
}

img{
	max-width:100%;
	height:auto;
	width:auto\9; /* ie8 */
}

.pc{display:none;}

/* リンク */

a img,:link img,:visited img {
    border: none;
}

a{
	color:#01419a;
	text-decoration:underline;
}

a:hover{
	color:#01419a;
	text-decoration:underline;
}

/* 見出し */

h2{
	text-align:center;
	margin-bottom:30px;
}

main h3{
	background:url(../images/common/h3_bg.png) left bottom repeat-x;
	font-size:2.2rem;
	line-height:1.2em;
	color:#01876c;
	padding-bottom:6px;
	margin-bottom:15px;
}

main h4{
	background:url(../images/common/h4_bg.png) left top repeat-y;
	font-size:1.8rem;
	line-height:1.5em;
	color:#333;
	padding-left:15px;
	margin-bottom:10px;
}


main h5{
	font-size:2rem;
	line-height:20px;
	color:#333;
	min-height:20px;
	margin-bottom:10px;
}

main h6{
	font-size:2rem;
	line-height:1.5em;
	margin-bottom:5px;
	color:#01419a;
}

main h7{
	font-size:2.2rem;
	line-height:1.2em;
	color:#01876c;
	padding-bottom:6px;
	margin-bottom:15px;
}


/* 画像枠 */

img.waku{
	padding:3px;
	background:#FFFFFF;
	border:1px solid #CCCCCC;
}

.imgR{
	float:right;
	margin-left:15px;
}

.imgL{
	float:left;
	margin-right:15px;
}

@media screen and (max-width:414px){
	
.imgR{
	float:none;
	margin-left:0px;
	text-align:center;
}

.imgL{
	float:none;
	margin-right:0px;
	text-align:center;
}

}

/* ページトップへ */

.backtop {
	position:fixed;
	bottom:10px;
	right:10px;
}
.backtop a {
	width: 45px;
	height:45px;
	display: block;
	background:#00a785 url(../images/common/backtop.png) no-repeat;
	/*text-indent:-9999px;*/
	text-transform: uppercase;
	text-decoration: none;
	text-align:center;
	color: #fff;
	line-height:45px;
	border:1px solid #fff;
	opacity:0.5;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
.backtop a:hover {
	color: #fff;
	opacity:1;
}

/* 詳しくはこちら */

.detailbtn{
	width:100%;
	text-align:center;
}

.detailbtn a{
	margin:0 auto;
	display:inline-block;
	padding:5px 10px;
	background:#fff;
	border:1px solid #00a785;
	color:#00a785;
	text-decoration:none;
}

.detailbtn a:hover{
	color:#fff;
	background:#89d7c7;
	border:1px solid #89d7c7;
}



/*================================================
　レイアウト設定
================================================*/

#container{
	width:100%;
	text-align:center;
	position:relative;
}

#container-inner{
	width:100%;
	line-height:100%;
	margin:0 auto;
	text-align:left;
}


/*================================================
　ヘッダー
================================================*/

header{
	width:100%;
	text-align:center;
	background:url(../images/common/header_bg.png) repeat-x;
}

header #header-inner{
	width: 96%;
	margin: 0 auto;
	position: relative;
	text-align: left;
}

header .marquee{
width:100%;
padding:0.2em 0;
overflow:hidden;
color:#333;
background-color:#f5f5f5;
margin-bottom:10px;
position:relative;
}

header .marquee p:after {
	content:"";
	white-space:nowrap;
	padding-right:50px;
}

header .marquee p {
	margin:0;
	padding-left:100%;
	display:inline-block;
	white-space:nowrap;
	font-size:14px;
	font-weight:normal;
	-webkit-animation-name:marquee;
	-webkit-animation-timing-function:linear;
	-webkit-animation-duration:20s;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-name:marquee;
	-moz-animation-timing-function:linear;
	-moz-animation-duration:20s;
	-moz-animation-iteration-count:infinite;
	-ms-animation-name:marquee;
	-ms-animation-timing-function:linear;
	-ms-animation-duration:20s;
	-ms-animation-iteration-count:infinite;
	-o-animation-name:marquee;
	-o-animation-timing-function:linear;
	-o-animation-duration:20s;
	-o-animation-iteration-count:infinite;
	animation-name:marquee;
	animation-timing-function:linear;
	animation-duration:20s;
	animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
  from   { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
  from   { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}

header #header-inner #header-logo{
	width:96%;
	margin:0 auto;
	text-align:center;
}

header #header-inner #header-content{
	width:96%;
	margin:0 auto;
	text-align:center;
}

header #header-inner #header-content p{
	font-size:10px;
	line-height:1.4em;
	margin-bottom:2px;
	color:#333;
}


/*================================================
　グローバルメニュー　#gnavi
================================================*/

#gnavi{
	background: url(../images/common/header_logo.png) 10px 10px no-repeat;
	background-size:231px 40px;
	margin-bottom:0;
	width:100%;
	z-index:201;
}

#gnavi .switch {
	width: 100%;
	cursor: pointer;
	font-size: 2rem;
	line-height: 2em;
	color: #fff;
	background: #00a785;
	text-align: center;
}

#gnavi ul.nav {
	display: none;
}

#gnavi ul.nav li a{
	display:block;
	border-bottom:1px solid #fff;
	background:#00a785;
	padding:10px;
	font-size:1.6rem;
	line-height:1.5em;
	color:#fff;
	font:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	text-decoration: none;
	text-align:left;
}

/*================================================
　コンテンツ
================================================*/

/* #content */

#content{
	clear:both;
	text-align:center;
	width:100%;
	margin-top:0;
	margin-bottom:0;
}

#content-inner {
	width:96%;
	text-align:center;
	margin:0 auto;
	margin-bottom:0;
}


/*================================================
　フッター
================================================*/

footer{
	width:100%;
	text-align:center;
	background:#00a785;
}

footer #footer-inner{
	width:100%;
	text-align:center;
}


/* フッターナビ　#footer-navi */

footer #footer-inner #footer-navi{
	width:96%;
	margin:0 auto;
	text-align:center;
	padding:20px 0 0;
}

footer #footer-inner #footer-navi ul{
	list-style:none;
	margin:0;
	margin-bottom:10px;
}

footer #footer-inner #footer-navi ul li a{
	display:block;
	border-bottom:1px solid #fff;
	background:#00a785;
	padding:10px;
	font-size:1.6rem;
	line-height:1.5em;
	color:#fff;
	font:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	text-decoration: none;
	text-align:left;
}

/*　コピーライト */

#footer-copyright{
	width:100%;
	text-align:center;
	font-size:8px;
	line-height:2em;
	color:#333;
	background:#00a785;
	padding:10px 0;
}


/* テキスト設定 ----------------------------------------------------------------- */

/* テキストサイズ */

.bold {font-weight:bold !important;}

.em {
	font-size:18px;
	line-height:1.2em;
	font-weight:bold;
}

.font-size10{font-size:10px !important;}
.font-size12{font-size:12px !important;}
.font-size14{font-size:14px !important;}
.font-size16{font-size:16px !important;}
.font-size18{font-size:18px !important;}
.font-size20{font-size:20px !important;}

.font-size100{font-size:100% !important;}
.font-size110{font-size:110% !important;}
.font-size120{font-size:120% !important;}
.font-size100{font-size:130% !important;}
.font-size140{font-size:140% !important;}
.font-size100{font-size:150% !important;}
.font-size160{font-size:160% !important;}
.font-size100{font-size:170% !important;}
.font-size180{font-size:180% !important;}
.font-size100{font-size:190% !important;}
.font-size200{font-size:200% !important;}

/* テキスト配色設定 */

.color-white{color:#FFFFFF !important;}

.color-red1{color:#FF0000 !important;}
.color-red2{color:#e54d42 !important;}

.color-pink1{color:#ff7979 !important;}

.color-blue1{color:#4fb1df  !important;}

.color-green1{color:#bad47d !important;}
.color-green2{color:#093 !important;}

.color-perple1{color:#b5bedc !important;}

.color-orange1{color:#f57840 !important;}

.color-yellow1{color:#edd375 !important;}
.color-yellow2{color:#d7bf7f !important;}

/* テキスト配置 */

.alignC{text-align:center !important;}
.alignL{text-align:left !important;}
.alignR{text-align:right !important;}

.floatL{float:left !important;}
.floatR{float:right !important;}


/* その他 ----------------------------------------------------------------- */

.no-border{border:none;}

.content{
	margin-bottom:30px;
}

/* border */

.border-gray1{border:1px solid #CCCCCC !important;}
.border-gray2{border:1px solid #333333 !important;}
.border-gray3{border:1px solid #666666 !important;}
.border-gray4{border:1px solid #999999 !important;}

/* 背景色 */

.bg-white{ background:#FFFFFF;}
.bg-pink{background:#ef9191 !important;}
.bg-orange{background:#ff7800 !important;}
.bg-green2{background:#7fb38c !important;}

/* padding */

.p0{padding:0 !important;}
.p5{padding:5px !important;}
.p10{padding:10px !important;}
.p15{padding:15px !important;}
.p20{padding:20px !important;}
.p30{padding:30px !important;}

.pt0{padding-top:0 !important;}
.pt5{padding-top:5px !important;}
.pt10{padding-top:10px !important;}
.pt20{padding-top:20px !important;}
.pt30{padding-top:30px !important;}

.pb0{padding-bottom:0 !important;}
.pb10{padding-bottom:10px !important;}
.pb20{padding-bottom:20px !important;}

.pr0{padding-right:0 !important;}
.pr10{padding-right:10px !important;}
.pr20{padding-right:20px !important;}

.pl0{padding-left:0px !important;}
.pl10{padding-left:10px !important;}
.pl20{padding-left:20px !important;}
.pl30{padding-left:30px !important;}
.pl40{padding-left:40px !important;}
.pl50{padding-left:50px !important;}

/* margin */

.m0{margin:0 !important;}
.m5{margin:5px !important;}
.m10{margin:10px !important;}
.m20{margin:20px !important;}
.m30{margin:30px !important;}

.mt0{margin-top:0 !important;}
.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt20{margin-top:20px !important;}

.mb0{margin-bottom:0 !important;}
.mb5{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}
.mb30{margin-bottom:30px !important;}
.mb40{margin-bottom:40px !important;}
.mb50{margin-bottom:50px !important;}

.ml0{margin-left:0 !important;}
.ml5{margin-left:5px !important;}
.ml10{margin-left:10px !important;}
.ml15{margin-left:15px !important;}
.ml20{margin-left:20px !important;}

.mr0{margin-right:0 !important;}
.mr5{margin-right:5px !important;}
.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}


/* 画像横のテキストを上下中央ぞろえにするCSS */

div.img-valignC p {
    display: table-cell;
    vertical-align: middle;
    margin: 0;
}   
    
/*for IE6 */  
* html .img-valignC p {
    display: inline;
    zoom: 1;
}

/*for IE7 */
*:first-child+html .img-valignC p {   
    display: inline;
    zoom: 1;
}


/* inline-block */

div.valign {
	padding-right:10px;
	vertical-align:middle;
	display:-moz-inline-box;
	display:inline-block;
	/display:inline;
	/zoom: 1;
}

div.valign > div{
	display:block;
}


/* CSSハック ----------------------------------------------------------------- */

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   height: 0px;
   visibility: hidden;
}

/* IE7とMac版IE5用 */
.clearfix { display: inline-block; }

/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix {display:block;}
/* end MacIE5 */
