/* CSS Document */

/* ウェブフォント使用する際は下記を書き換える
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
 */

html { height:100%; }
body { height:100%; margin:0; font-size: 16px; line-height: 180%; color:#202020; word-break:break-all; background: url("../common_img/bg.jpg") repeat; }
@media screen and (min-width: 0px) and (max-width: 768px)  {
body { height:100%; margin:0; font-size: 12px; line-height: 180%; color:#202020; word-break:break-all; background: url("../common_img/bg.jpg") repeat; }
}
body, textarea { font-family: 'Noto Serif JP', serif; font-weight: 500; }
/*body, textarea { font-family :YuMincho, Yu Mincho, '游明朝', serif; font-weight: 500; }*/
/*ゴシックの場合 body, textarea { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight: 500; }*/

/* 高さ自動調整 */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}


/* 回り込み解除 */
.cl_l { clear: left; }
.cl_r { clear: right; }
.cl_both { clear:both; }


/* hタグなどの指定 */
h1 { display:block; font-style:normal; font-size:10pt; font-weight:normal; margin:0px; text-align:center; }
h1 img { width:464px; height:auto; padding:0 0 15px; }
@media screen and (min-width: 0px) and (max-width: 568px)  {
h1 { display:block; font-style:normal; font-size:10pt; font-weight:normal; margin:0 0 0 10px; text-align:left; }
h1 img { width:auto; height:35px; padding: 10px 0 5px 0; }
}
@media screen and (min-width: 569px) and (max-width: 768px)  {
h1 { display:block; font-style:normal; font-size:10pt; font-weight:normal; margin:0px; text-align:center; }
h1 img { width:auto; height:35px; padding: 10px 0; }
}
h2 { font-style:normal; font-size:10pt; font-weight:normal; margin:0px; }
h3 { font-style:normal; font-size:10pt; font-weight:normal; margin:0px; }
h4 { font-style:normal; font-size:10pt; font-weight:normal; margin:0px; }
h5 { font-style:normal; font-size:10pt; font-weight:normal; margin:0px; }


/* ul,li,pタグの指定 */
ul,li {
	list-style:none;
	margin:0;
	padding:0;
}

p { margin:0; }


/* フォントの指定 */
.bold { font-weight:bold; }
.textblue { color:#1792cf; }
.textblue_b { color:#1792cf; font-weight:bold; }
.textgreen { color:#62ad48; }
.textgreen_b { color:#62ad48; font-weight:bold; }
.textorange { color:#ff9960; }
.textorange_b { color:#ff9960; font-weight:bold; }
.textred { color:#e90000; }
.textred_b { color:#e90000; font-weight:bold; }
.textpink { color:#ee97b6; }
.textpink_b { color:#ee97b6; font-weight:bold; }
.textpurple { color:#CC0199; }
.textpurple_b { color:#CC0199; font-weight:bold; }
.textbrown { color: #7a3d23; }
.textbrown_b { color: #7a3d23; font-weight:bold; }

.size6 { font-size:8px; }
.size8 { font-size:10px; }
.size10 { font-size:12px; }
.size12 { font-size:14px; }
.size14 { font-size:16px; }
/* //フォントの指定 */


/* ウェブフォントの指定 */
.noto-serif-jp { font-family: 'Noto Serif JP', serif; }
.mplusrounded { font-family: 'M PLUS Rounded 1c', sans-serif; }
.kosugimaru { font-family: 'Kosugi Maru', sans-serif; }
/* //ウェブフォントの指定 */


/* 罫線など */
.dashed_line { border-bottom: 1px dotted #343434; margin:10px 0px 10px 0px; }
.solid_line_orenge { border-bottom: 1px solid #EA5532; margin:10px 0px 15px 0px; }
.solid_line_blue { border-bottom: 1px solid #32BCF8; margin:10px 0px 15px 0px; }
.solid_line_green { border-bottom: 1px solid #45B035; margin:10px 0px 15px 0px; }
.solid_line_gray01 { border-bottom: 1px solid #B2B2B2; margin:14px 0px 14px 0px; }
.solid_line_purple { border-bottom: 1px solid #BE0089; margin:10px 0px 0px 0px; }
.solid_line_purple01 { border-bottom: 1px solid #BE0089; margin:14px 0px 14px 0px; }

.underline { border-bottom: 2px solid #adadad; margin:10px 0px 10px 0px; }


/* 画像のリンク */
a img { border-style:none; }


/* 画像の余白対策 */
img {
   vertical-align:bottom
}


/* 画像サイズ */
img { width:100%; height:auto; }


/* ieに適用 */
img {
    width: inherit\9;
    max-width: 100%\9;
    height: auto\9;
}

/* hrの設定 */
hr.style-one {    border: 0;    height: 1px;    background: #999;    background-image: -webkit-linear-gradient(left, #ccc, #999, #ccc);    background-image:    -moz-linear-gradient(left, #ccc, #999, #ccc);    background-image:     -ms-linear-gradient(left, #ccc, #999, #ccc);    background-image:      -o-linear-gradient(left, #ccc, #999, #ccc);}


/* ページ全体のテキストリンク */
a:link { color:#202020; text-decoration:underline; }
a:visited { color:#202020; text-decoration:underline; transition: 1.0s ; }
a:active { color:#ff9960; text-decoration:underline; transition: 1.0s ; }
a:hover { color:#ff9960; text-decoration:underline; transition: 1.0s ; }
@media screen and (min-width: 0px) and (max-width: 768px)  {
a:link { color:#202020; text-decoration:underline; }
a:visited { color:#202020; text-decoration:underline; }
a:active { color:#ff9960; text-decoration:underline; }
a:hover { color:#ff9960; text-decoration:underline; }
}


/* ローディング */
#loading {
 width: 100%;
 height: 100%;
 margin: 0;
 background: #fff;/*グルグルの背景を白に*/
 opacity: 1.0;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 9999; /*とりあえず一番前面に出るように*/
}
#loading img {
 position:absolute;
 top:50%;
 left:52%;
 width:80px;
 height:80px;
 margin-top:-80px;/*グルグルを真ん中にするために、画像の高さ分マイナスで*/
 margin-left:-80px;/*グルグルを真ん中にするために、画像の幅分マイナスで*/
}
@media screen and (min-width: 0px) and (max-width: 768px)  {
#loading {
 width: 100%;
 height: 100%;
 margin: 0;
 background: #fff;/*グルグルの背景を白に*/
 opacity: 1.0;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 9999; /*とりあえず一番前面に出るように*/
}
#loading img {
 position:absolute;
 top:50%;
 left:55%;
 width:40px;
 height:40px;
 margin-top:-40px;/*グルグルを真ん中にするために、画像の高さ分マイナスで*/
 margin-left:-40px;/*グルグルを真ん中にするために、画像の幅分マイナスで*/
}
}
/* //ローディング */


/* ヘッドメニュー */
#headbox { width:100%; display:none; position:relative; background: url("../common_img/bg.jpg") repeat; top: 0; z-index: 2000; }

#header {
    display: block;
    width: 974px;
	padding:0;
	margin:0 auto;
  }
@media screen and (min-width: 0px) and (max-width: 768px)  {
#headbox { width:100%; height:50px; display:block; position: fixed; background: url("../common_img/bg.jpg") repeat; top: 0; z-index: 2000; }

#header {
    display: block;
    width: 100%;
	height:50px;
	padding:0;
	margin:0 auto;
  }
}
/* //ヘッドメニュー */


/* 下層ヘッダー */
#k-headwrap01 { width: 1000px; margin: 0 auto; display: table; padding: 10px 0; }
.k-headinner01 { display: table-cell; vertical-align: middle; }
.k-headinner01:nth-child(1) {text-align: left; }
.k-headinner01:nth-child(2) {text-align: right; }
.k-headinner01:nth-child(1) img { width: 314px; }
.k-headinner01:nth-child(2) img { width: 310px; }
@media screen and (min-width: 0px) and (max-width: 768px)  {
#k-headwrap01 { width: 1000px; margin: 0 auto; display: none; padding: 20px 0; }
}
/* //下層ヘッダー */


/* PCナビゲーション */
#pcnavibox {
	width: 100%;
	position: absolute;
	top: 198px;
	z-index: 8000;
}
ul#navi {
	display:block;
	padding:10px 0;
	background: url("../common_img/navi/navibg.jpg") repeat;
	text-align:center;
	font-size:18px;
	font-weight:300;
	letter-spacing: 0.15em;
	color: #FFFFFF;
	}
ul#navi li { display:inline-block; position: relative; padding: 0 15px; vertical-align: middle; }
/*ul#navi li a img { width: auto; height: 17px; }
ul#navi li:after { content: "|"; padding: 0 5px 0 15px; }
ul#navi li:last-child:after { content: ""; padding: 0; }*/

ul#navi a:link {
	color:#FFFFFF;
	text-decoration:none;
	-moz-text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.8);
	-webkit-text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.8);
	-ms-text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.8);
	text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.8);
}
ul#navi a:visited { color:#FFFFFF; text-decoration:none; }
ul#navi a:active { color:#FFFFFF; text-decoration:none; opacity: 0.6; }
ul#navi a:hover { color:#FFFFFF; text-decoration:none; opacity: 0.6; text-shadow:0px 0px 9px #FFFFFF; }

a.arrow:after { content: url(../common_img/navi/arrow.png); display: block; transition:1.0s; opacity: 0; position: absolute; bottom: -18px; left: 0; right: 30%; }
a.arrow:hover:after { content: url(../common_img/navi/arrow.png); display: block; transition:1.0s; opacity: 1; position: absolute; bottom: -18px; left: 0; right: 30%; }


.flip > li{
  perspective: 400px;
}
.flip li ul{
	position: absolute;
	visibility: hidden;
	opacity: 0;
	transform: rotateX(-90deg);
	transform-origin: 50% 0;
	transition: .8s;
	padding: 10px 0;
	background:rgba(116,167,201,1.0);
}
.navilist01 {
	top: 60px;
	left: 0;
}
.navilist02 {
	top: 60px;
	left: -38px;
}
.navilist03 {
	top: 60px;
	left: -26px;
}
.navilist04 {
	top: 60px;
	left: 10px;
}
.flip li:hover ul{
	visibility: visible;
	transform: rotateX(0);
	opacity: 1;
}
.flip ul li{
	width: 150px;
	padding: 15px 0;
	text-align: left;
	display: block !important;
	border: none;
	font-size: 16px;
}
.flip ul li.wide01{
	width: 200px;
	padding: 15px 0;
	text-align: center;
	display: block !important;
	border: none;
}
.flip ul li a { display: block; }
.flip ul li a img { width: auto; height: 16px !important; }
@media screen and (min-width: 0px) and (max-width: 768px)  {
ul#navi { display:none; }
}
/* //PCナビゲーション */


/* コンテンツバナー */
ul.contentsbannerbox01 { display:block; text-align:center; background: rgba(48,119,136,0.30); padding:30px 0 20px; margin:0 0 1px; }
ul.contentsbannerbox01 li { width:220px; display:inline-block; padding:0 58px; vertical-align:top; }
.contentsbannerinner { display:block; }
.contentsbannertitle { padding-bottom:15px; }
.contentsbannertitle p { display:block; font-size:30px; }
.contentsbannertitle p:first-child { width:38%; font-size:14px; padding:0 0 6px; margin:0 auto 9px; border-bottom:2px solid #307788; }
.contentsbannerimg { width:201px; height:auto; margin:0 auto; padding-bottom:20px; }
.contentsbannerdetail { display:block; }
.contentsbannerdetail p { display:block; font-size:12px; line-height:160%; letter-spacing:-0.04em; }
.contentsbannerdetail p:first-child { font-size:22px; padding:0 0 15px; }

.contentsbannerinner a { display:block; }
.contentsbannerinner a:link { color:#307788; text-decoration:none; }
.contentsbannerinner a:visited { color:#307788; text-decoration:none; }
.contentsbannerinner a:active { color:#307788; text-decoration:none; }
.contentsbannerinner a:hover { color:#307788; text-decoration:none; }
@media screen and (min-width: 0px) and (max-width: 768px)  {
ul.contentsbannerbox01 { display:block; text-align:center; background: rgba(48,119,136,0.30); padding:20px 0; margin:0 0 1px; }
ul.contentsbannerbox01 li { width:30%; display:inline-block; padding:0 1%; vertical-align:top; }
.contentsbannerinner { display:block; }
.contentsbannertitle { padding-bottom:15px; }
.contentsbannertitle p { display:block; font-size:14px; }
.contentsbannertitle p:first-child { width:80%; font-size:14px; padding:0 0 6px; margin:0 auto 9px; border-bottom:2px solid #307788; }
.contentsbannerimg { width:98%; height:auto; margin:0 auto; padding-bottom:20px; }
.contentsbannerdetail { display:block; }
.contentsbannerdetail p { display:block; font-size:12px; line-height:160%; letter-spacing:-0.04em; }
.contentsbannerdetail p:first-child { font-size:14px; padding:0; }

.contentsbannerinner a { display:block; }
.contentsbannerinner a:link { color:#307788; text-decoration:none; }
.contentsbannerinner a:visited { color:#307788; text-decoration:none; }
.contentsbannerinner a:active { color:#307788; text-decoration:none; }
.contentsbannerinner a:hover { color:#307788; text-decoration:none; }
/*ul.contentsbannerbox01 { display:block; text-align:center; background:#68cc77; padding:0; margin:0; }
ul.contentsbannerbox01 li { width:100%; display:block; padding:10px 0; vertical-align:top; border-bottom:1px solid #307788; }
.contentsbannerinner { width:100%; display:table; }
.contentsbannertitle { display:block; padding-bottom:5px; vertical-align:top; }
.contentsbannertitle p { width:30%; display:block; font-size:12px; }
.contentsbannertitle p:first-child { width:30%; font-size:10px; padding:0 0 6px; margin:0 0 6px; border-bottom:2px solid #307788; }
.contentsbannerimg { width:30%; height:auto; margin:0 auto; display:table-cell; padding:0 2%; vertical-align:top; }
.contentsbannerdetail { width:auto; display:table-cell; padding:0 2%; text-align:left; vertical-align:top; }
.contentsbannerdetail p { display:block; font-size:10px; line-height:160%; letter-spacing:-0.04em; }
.contentsbannerdetail p:first-child { font-size:12px; padding:0 0 5px; }

.contentsbannerinner a { display:block; }
.contentsbannerinner a:link { color:#307788; text-decoration:none; }
.contentsbannerinner a:visited { color:#307788; text-decoration:none; }
.contentsbannerinner a:active { color:#307788; text-decoration:none; }
.contentsbannerinner a:hover { color:#307788; text-decoration:none; }*/
}
/* //コンテンツバナー */


/* 文字頭揃え */
.indent01-01 { text-indent: -1em; padding: 0 0 0 1em; }
.indent01-02 { text-indent: -1.8em; padding: 0 0 0 1.8em; }
.indent01-03 { text-indent: -0.8em; padding: 0 0 0 0.8em; }
.indent01-04 { text-indent: -1.3em; padding: 0 0 0 1.3em; }
.indent01-05 { text-indent: -1.5em; padding: 0 0 0 1.5em; }
.indent02-01 { text-indent: -2em; padding: 0 0 0 2em; }
@media screen and (min-width: 0px) and (max-width: 768px)  {
.indent01-01 { text-indent: -1em; padding: 0 0 0 1em; }
.indent01-02 { text-indent: -1.8em; padding: 0 0 0 1.8em; }
.indent01-05 { text-indent: -1em; padding: 0 0 0 1em; }
.indent02-01 { text-indent: -2em; padding: 0 0 0 2em; }
}
/* //文字頭揃え */


/* pタグ前空白 */
.one { }
.one:before { content: ""; padding: 0 0 0 1em; }


/* 強制改行（PCのみ） */
.br::before {
	content: "\A" ;
	white-space: pre ;
}
@media screen and (min-width: 0px) and (max-width: 768px)  {
.br::before {
	content: "" ;
	white-space: normal;
}
}
/* //強制改行（PCのみ） */


/* スマホ非表示 */
@media screen and (min-width: 0px) and (max-width: 768px)  {
.spnone { display: none !important; }
}
/* //スマホ非表示 */


/* アンカー設定 */
#link01,
#link02,
#link03,
#link04,
#link05,
#link06,
#link07{ margin: -255px 0 0; padding: 255px 0 0; }
@media screen and (min-width: 0px) and (max-width: 768px)  {
#link01,
#link02,
#link03,
#link04,
#link05,
#link06,
#link07{ margin: -55px 0 0; padding: 55px 0 0; }
}
/* //アンカー設定 */


/* ページトップ */
#pagetopwrap { display: block; width:100%; margin:0 auto; position: relative; }
#pagetop { right: 10px; bottom: 10px; position: fixed; z-index: 9002; }
#pagetop img { width:106px; height:auto; }
@media screen and (min-width: 0px) and (max-width: 320px)  {
#pagetopwrap { display: block; width:96%; margin:0 auto; position: relative; }
#pagetop { right: 5px; bottom: 5px; position: fixed; z-index: 9002; }
#pagetop img { width:50px; height:auto; }
}
@media screen and (min-width: 321px) and (max-width: 768px)  {
#pagetopwrap { display: block; width:96%; margin:0 auto; position: relative; }
#pagetop { right: 5px; bottom: 5px; position: fixed; z-index: 9002; }
#pagetop img { width:50px; height:auto; }
}
/* //ページトップ */