@charset "UTF-8";
/* CSS Document */


/* 

　common.css
　　　HTMLの造りに関わらず、共通して使用するスタイルを掲載する。
　　　クリアフィックスや、ぶら下げインデント、ドロップシャドウなど。
　　　以前は「format.css」の中に入れていた。

---------------------------------------------------------------------

　目次
　　　○クリアフィックス
　　　●スペース調整用
　　　○テキスト非表示
　　　●ぶら下げインデント
　　　○フォント
　　　●角丸
　　　○ドロップシャドウ
　　　●マウスオーバー：画像　透過処理
　　　○マウスオーバー：ドロップシャドウ表示／非表示切替
　　　●吹き出し

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


/* 
　
　クリアフィックス

　　IEではフロートの処理が正しく行われず、子ボックスが親ボックスの背景に内包される。
　　また、正しくフロートの処理が行われる他のモダンブラウザでは、
　　背景が途中で途切れて表示される場合がある。

　　もし、クリアできる要素が親ボックス内に存在しない場合は、
　　IE7以前ではafter疑似要素とcontentプロパティに対応していないことを利用し、
　　次のような「clearfix」という設定をclassセレクタで用意して、
　　適時呼び出すことで回避できる。　

------------------------------------------------------------*/
.clearfix:after {
content: ''; /* 指定した要素の後ろに（実体のない）オブジェクトを表示 */
display: block; /* それをブロックレベル要素に */
clear: both; /* clearプロパティでfloatを解除 */
height:0; /* 高さを0に */
}
/* IE6、IE7に対応 */
.clearfix { 
/zoom: 1;
overflow:auto;
} /* IE */


/* 

　スペース調整用

　　width や height はHTML直書きで調整
　　 
------------------------------------------------------------*/
.spacer_changable {
	margin:0;
	padding:0;
	line-height:100%;
	font-size:0px;
}


/* 

　テキスト非表示
　　 
------------------------------------------------------------*/
.text_hid {
	text-indent: -9999px;
	text-decoration: none;
}


/* 

　ぶら下げインデント

　　以下の2点を利用したもの。
　　・margin......先頭行を含めた全ての行に有効。
　　・text-indent......行頭にのみ有効。
　　 
------------------------------------------------------------*/
.burasage {
	margin-left: 1.0em;
	text-indent: -1.0em;
}


/* 

　フォント

　　 
------------------------------------------------------------*/
/* 明朝系フォントファミリー */
.minchou {	font-family:'ヒラギノ明朝 Pro W6', 'Hiragino Mincho Pro', 'HGS明朝E', 'ＭＳ Ｐ明朝', serif; }
/* ゴシック系フォントファミリー */
.gothic {	font-family:'メイリオ', Meiryo,  'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }
/* Google Fonts01 Roboto（利用するにはheaderへの記述必須） */
.google_fonts01 { font-family: 'Roboto', sans-serif; }
/* Google Fonts02 Lato（利用するにはheaderへの記述必須） */
.google_fonts02 { font-family: 'Lato', sans-serif; }


/* 

　角丸

　　 
------------------------------------------------------------*/
.kakumaru {
	border-radius: 4px;        /* CSS3草案 */  
 -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
 -moz-border-radius: 4px;   /* Firefox用 */
}

/* 

　ドロップシャドウ

　　 
------------------------------------------------------------*/
.dropshadow {
	box-shadow: 3px 3px 3px rgba(128,128,128,0.4);
	-moz-box-shadow: 3px 3px 3px rgba(128,128,128,0.4);
	-webkit-box-shadow: 3px 3px 3px rgba(128,128,128,0.4);
}
.dropshadow_wrapper {
	box-shadow: 3px 3px 3px 3px rgba(128,128,128,0.4);
	-moz-box-shadow: 3px 3px 3px 3px rgba(128,128,128,0.4);
	-webkit-box-shadow: 3px 3px 3px 3px rgba(128,128,128,0.4);
}

/* 

　マウスオーバー：画像　透過処理

　　 
------------------------------------------------------------*/
.mouse_over:hover {
	opacity:0.7;
	filter: alpha(opacity=70);　/*IE5～7適用*/
	-ms-filter: "alpha( opacity=70 )";　/*IE8適用*/
}

/* 

　マウスオーバー：ドロップシャドウ表示／非表示切替
　　　ボタンを押すアクションを立体的に見せたいときに使用。
　　 
------------------------------------------------------------*/
.dropshadow_mouse_over { /* マウスを乗せていないときはドロップシャドウが付く */
 box-shadow: 3px 3px 3px #DBDCDC;
	-moz-box-shadow: 3px 3px 3px #DBDCDC;
 -webkit-box-shadow: 3px 3px 3px #DBDCDC;
}
.dropshadow_mouse_over:hover { /* マウスを乗せるとドロップシャドウが非表示になる */
 box-shadow: 0px 0px 0px #DBDCDC;
	-moz-box-shadow: 0px 0px 0px #DBDCDC;
 -webkit-box-shadow: 0px 0px 0px #DBDCDC;
}



/* 

　吹き出し
　　 
------------------------------------------------------------*/
.arrow_box {
	width:180px;
	position: relative;
	background: #ffffff;
	border: 3px solid #5C9988;
	margin:20px 0 0 0;
}
.arrow_box:after, .arrow_box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.arrow_box:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
	border-width: 20px;
	margin-left: -20px;
}
.arrow_box:before {
	border-color: rgba(92, 153, 136, 0);
	border-bottom-color: #5C9988;
	border-width: 24px;
	margin-left: -24px;
}




/* 

　フレックスボックスコンテナ
　　 
------------------------------------------------------------*/
.flexbox_container {
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
}