@charset "UTF-8" ;

/* ボディ */
body
{
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	margin: 0 ;		/* スペース */
	padding: 0 ;		/* 余白 */
	font-size: 15px ;	/* 文字サイズ */
	line-height: 1.618 ;	/* 行の高さ */
}

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	/* ボディ */
	body
	{
		font-size: 13px ;	/* 文字サイズ */
	}
}

/* ヘッダー */
.header
{
	border-top: 1em solid #05326d ;		/* 枠線 */
	text-align: left ;			/* テキスト、画像の左寄せ */
	padding: 0 ;		　　　　	/* 上下の余白 */
	margin-bottom: 2em ;			/* 他のブロックとのスペース */
	background: #0e51a7 ;			/* 背景色(確認用) */
}

/* ロゴ画像を囲むh1 */
.logo-wrapper
{
	margin: 0 ;
	padding: 0 ;
	line-height: 1 ;
}

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	/* ロゴ画像 */
	.logo
	{
		width: 200px ;
	}
}

/* フッター */
.footer
{
	border-top: 3px solid #888 ;		/* 枠線 */
	text-align: center ;			/* テキスト、画像の真ん中寄せ */
	margin-top: 2em ;			/* 他のブロックとのスペース */
	padding: 1em 0 ;			/* 上下の余白 */
	background: #e8e8e8 ;
}

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.wrapper
{
	width: 1000px ;
	margin: 0 auto ;		/* 左右に[auto]を指定することで、真ん中に寄る */
	padding: 0 ;			/* 上下左右の余白を0にしておく */
}

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	.wrapper
	{
		width: auto ;
		padding: 0 10px ;
	}
}

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.main
{
	width: 618px ;
	padding: 20px ;					/* 上下左右に20pxの余白 */
	border: 1px solid rgba(0,0,0,.1) ;		/* 枠線 */
}

.side
{
	width: 320px ;
}

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	.main
	{
		width: auto ;
		padding: 0 ;		/* 余白 */
		border: none ;		/* 枠線 */
	}

	.side
	{
		width: auto ;
	}

	.footer
	{
	    min-height:400px;
	}	
}

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.main
{
	float: left ;		/* 左に寄せる */
}

.side
{
	float: right ;		/* 右に寄せる */
}

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	.main , .side
	{
		float: none ;
	}
}

.wrapper
{
	overflow: hidden ;
}

/* 見出し */
h1 {
	padding: 0;
}

h2 {
    border-style: hidden;
    background: #2d4d95;
    color: #ffffff;
    font-weight: bold;
    line-height: 30px;
    margin: 10px 0 20px 0;
    padding: 5px 20px 0 20px;
}

h3 {
    border-style: hidden;
    background: #00A67C;
    color: #ffffff;
    margin-bottom: 10px;
    padding: 5px 20px;
}

h4 {
	margin-top:auto;
    font-weight:normal;
    border-style: hidden;
    font-size:x-large;
    color: #000000;
    padding: 5px 20px 0 20px;
    border-bottom:solid #2d4d95;
}

h5 {
    font-weight:normal;
    border-style: hidden;
    background: #fff8b6;
    color: #000000;
    padding: 0 20px;
    border-bottom:solid 1px #debf32;
}

h6 {
    border-style: hidden;
    background: #dddddd;
    color: #444444;
    border-radius: 3px;
    margin: 10px 0;
    padding: 0 20px;
}

/* リンク */
a,
a:link {
	color: #0e51a7;
	font-weight:bold;
	text-decoration:none;
}

a:visited {
	color: #333333;
	font-weight:bold;
	text-decoration:none;
}

a:hover,
a:active {
	color: #fe9d00;
}

a:focus {
	outline: none;
}

/* テキスト */
.text1 {
    margin: 1em;
    list-style-type:none;
}

.indent1 {
    margin: 1em;
    padding-left: 1em;
    text-indent: -1em;
    list-style-type:none;
}

/* マーカー */
.marker1{
    background:linear-gradient(transparent 75%, #9eceff 75%);
    font-weight:bold;
}

/* 動画サイズ調整 */
.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

/* トップへ戻る　*/
#page-top {
    display:block;
    font-weight:bold;
    padding:.7em;
    text-align:center;
    background:#fff;
    color:#666;
    transition:.3s;
}

#page-top:hover {
    background:#666;
    color:#fff;
}

/* 枠 */

.box1 {
	display:inline-block;
    padding: 0 1em;
    background:#fff8b6;
    border:solid 2px #debf32;
    border-radius:5px;
}/* 黄色の囲み */

.box2 {
    margin:6px 0 30px 0;
    background:#ffffff;
    border:solid 2px #2d4d95;
}/* 青の囲み */

.box3 {
    margin:-62px 0 0 30px;
    padding:4px 0 4px 70px;
    font-size:large;
    background:#96eaff;
    border:solid 2px #2d4d95;
    border-radius:5px;
}/* 水色の囲み */

/* 枠内見出し */

.index1 {
    background:#debf32;
    padding:5px 20px;
    font-size:1.2em;
}/* 黄色の見出し */

.index2 {
    background:#2d4d95;
    color:#ffffff;
    padding:5px 20px;
    font-size:1.2em;
}/* 青の見出し */

/* 見出しデザイン */
.ribbon {
    display:inline-block;
    position:relative;
    padding:15px 20px;
    font-size:18px;
    color:#ffffff;
    background:#2d4d95;
}

.ribbon:before {
    position:absolute;
    content:'';
    top:100%;
    left:0;
    border:none;
    border-bottom:solid 15px transparent;
    border-right:solid 20px rgb(149,158,155);
}

/* Button---------------------------- */
button.button1 {
    width:auto;
    height:30px;
    border-radius:3px;
    font-size:1em;
    margin:1px 0;
    padding:5px 10px;
    background-color:#2d4d95;
    color:#fff;
    text-align:left;
    border-style:none;
}

button.button1:hover {
    background-color:#6997d3;
    color:#fff;
}