﻿@charset "utf-8";



/*	File Name   : default.css

	Description : デフォルトのスタイルのリセット及び基本設定

*/





/* Universal reset

----------------------------------------------------------- */





* {	margin: 0;

	padding: 0;

	font-style: normal;

}



html {	overflow-y: scroll;

}



table {	border-collapse: collapse;

	border-spacing: 0;

	empty-cells: show;

	font-size: 100%;

}







body {

font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}



.clear{

clear:both;

}



/*印刷範囲の指定*/



@media print{



.page_footer{

display:none;



}

}







/*PCでスマホ用コンテンツを表示しない*/



.pc{	display:inline;

}



.tb{

	display:none;

}





.sp{

	display:none;

}





/*タブレット(1200）*/ 

@media only screen and (max-width:1200px){



.pc{

	display:none;

	}



.tb{

	display:inline;

}



}







/*スマホ(480）*/ 

/*スマホでSPを表示させPCコンテンツを表示しない*/

@media only screen and (max-width:480px){



.pc{

	display:none;

	}



.sp{

	display:inline;

}

}



/* 個別ページ 本文共通基本レイアウト



----------------------------------------------------------- */



.contents{

display:block;

float:left;

padding-top:40px;

margin-left:20px;

border-left:solid 1px #2D579A;

}



/*スマホ(480）*/ 

@media only screen and (max-width:480px){



.contents{

padding-top:20px;

margin-left:0px;

border-left:none;

}





}/*スマホ(480）ここまで*/ 









/* ページ内　トップ見出し（青ライン）　*/

.contents h1{

border-left:solid 15px #2D579A;

color:#444;

font-size:35px;

font-weight:bold;

width:800px;

margin-left:30px;

padding-left:15px;

padding-bottom:3px;

}



/*タブレット(1200）*/ 

@media only screen and (max-width:1200px){



.contents h1{

width:90%;

}





}/*タブレット(1200）ここまで*/ 



/*スマホ(480）*/ 

@media only screen and (max-width:480px){



.contents h1{

border-left:solid 5px #2D579A;

color:#444;

font-size:20px;

font-weight:bold;

width:80%;

margin-left:10px;

padding-left:15px;

padding-bottom:3px;

}





}/*スマホ(480）ここまで*/ 



.h1_bar{

border-bottom:solid 7px #2D579A;

margin-left:30px;

}



/* ページ内　右側テキストエリアの指定 */

.contents_txt{

width:800px;

margin-left:30px;

margin-top:20px;

color:#444;

}



/*タブレット(1200）*/ 

@media only screen and (max-width:1200px){



.contents_txt{

width:90%;

}



}/*タブレット(1200）ここまで*/ 





/*スマホ(480）*/ 

@media only screen and (max-width:480px){



.contents_txt{

width:100%;

margin-left:10px;

margin-top:5px;

color:#444;

}



}/*スマホ(480）ここまで*/ 





/* ページ内　小見出し　（ボールド，色つき） */

.contents h2{

color:#CD6F10;

margin-left:15px;

margin-top:50px;

margin-bottom:10px;

}



/*スマホ(480）*/ 

@media only screen and (max-width:480px){



.contents h2{

margin-top:20px;

}



}/*スマホ(480）ここまで*/ 





/* ページ内　自由に使える枠　（青線，横幅いっぱい） */

.waku{

border:solid 1px #2D579A;

padding-top:10px;

padding-bottom: 10px;

padding-left: 10px;

padding-right: 10px;

}



/* ページ内　自由に使える枠に付けたい場合のタイトル　（青バック） */

.waku_title{

background-color:#2D579A;

color:#fff;

height: 40px;

line-height: 40px;

padding-left: 7px;

font-weight:bold;

}





/* ページ内　自由に使える枠に付けたい場合のタイトル　（グレー（444）バック） */

.waku_title_gray{

background-color:#444;

color:#fff;

height: 40px;

line-height: 40px;

padding-left: 7px;

font-weight:bold;

}



.waku span{

font-weight:bold;

}



/* ページ内　自由に使える枠　（グレー，横幅いっぱい） */

.waku_g100{

border: solid 1px #aaa;

width840px;

padding-left: 10px;

padding-right: 10px;

padding-top: 10px;

padding-bottom: 10px;

margin-top: 20px;

}





/* ページ内　自由に使える枠　（グレー，横幅半分） */

.waku_small{

border: solid 1px #aaa;

width:420px;

padding-left: 10px;

padding-right: 10px;

padding-top: 10px;

padding-bottom: 10px;

margin-top: 20px;

}



/* ページ内　一部文字装飾　（グレー，ボールド） */

span.bold_g{

font-weight: bold;

color: #444;

line-height:40px;

}



/* ページ内　一部文字装飾　（ブルー，ボールド） */

span.bold_b{

font-weight: bold;

color: #2D579A;

line-height:40px;

}



/* ページ内　カラーボタン　*/



.color_button_wrap{

width:100%;

text-align:center;

}



.color_button{

display: inline-block;

line-height:50px;

padding-left:15px;

padding-right:15px;

font-size:20px;

background-color:#2D579a;

color:#fff;

font-weight:bold;

border:solid 3px #2D579a;

}



.color_button a{

display: block;

color:#fff;

text-decoration:none;

padding-left:15px;

margin-left:-15px;

padding-right:15px;

margin-right:-15px;

}





.color_button a:hover{

display: block;

width:100%;

background-color:#fff;

color:#2D579a;



}





/*リストの三角

----------------------------------------------------------- */



/*　リストの頭に三角を付ける　(青#2D579A）　*/



.arrow{

  position: relative;

  display: inline-block;

  padding: 0 0 0 16px;

  color: #444;

  vertical-align: middle;

  text-decoration: none;

 margin-right:7px;



}



.arrow::before{

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  margin: auto;

  content: "";

  vertical-align: middle;

  box-sizing: border-box;

  width: 15px;

  height: 15px;

  border: 1px solid #2D579A;



}



.arrow::after{

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  margin: auto;

  content: "";

  vertical-align: middle;

  left: 5px;

  box-sizing: border-box;

  width: 5px;

  height: 5px;

  border: 5px solid transparent;

  border-left: 5px solid #2D579A;



}



/*　リストの頭に三角を付ける　(リンク無し　グレー#444）　*/



.arrow_nolink{

  position: relative;

  display: inline-block;

  padding: 0 0 0 16px;

  color: #444;

  vertical-align: middle;

  text-decoration: none;

 margin-right:7px;



}



.arrow_nolink::before{

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  margin: auto;

  content: "";

  vertical-align: middle;

  box-sizing: border-box;

  width: 15px;

  height: 15px;

  border: 1px solid #444;



}



.arrow_nolink::after{

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  margin: auto;

  content: "";

  vertical-align: middle;

  left: 5px;

  box-sizing: border-box;

  width: 5px;

  height: 5px;

  border: 5px solid transparent;

  border-left: 5px solid #444;



}













/*フッター　共通 (page_footer.html)

----------------------------------------------------------- */

.page_footer{

display:inline;

}





.footer_area{

background-color:#444;

color:#fff;

}



.footer_contents{

margin-top:20px;

padding-top:20px;

padding-bottom:30px;

width:1200px;

margin:0 auto;

text-align:center;

}



.footer_contents ul{

width:750px;

margin:0 auto;

}



.footer_contents li{

display:inline;

float:left;

list-style: none;

width:150px;

}



.footer_contents li a{

text-decoration:none;

color:#fff;

}



.footer_credit{

margin-top:30px;

font-size:12px;

}



/*タブレット(1200）*/ 

@media only screen and (max-width:1200px){



.footer_contents{

width:500px;

}



.footer_contents ul{

width:150px;

}



.footer_contents li{

width:150px;

line-height:40px;

}



}/*タブレット(1200）ここまで*/ 



/*スマホ(480）*/ 

@media only screen and (max-width:480px){



.footer_contents{

width:100%;

}



.footer_contents ul{

width:150px;

}



.footer_contents li{

width:150px;

line-height:40px;

}



}/*スマホ(480）ここまで*/ 







