@charset "utf-8";

/* 基本CSS
------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
	border : 0px none;font-family:inherit;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;list-style:none;text-align:justify;
}
:focus{
	outline:0;
}

blockquote::before, blockquote::after,q::before, q::after{
	content:"";
}
blockquote, q{
	quotes:"" "";
}

figure{
	margin:0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
	display:block;
}


body{
	color : #333333;
font-size : 11pt;
font-family:verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height : 1.67;
text-align : left;
background-image : none;
padding-top : 40px;
padding-bottom : 10px;
margin-left : auto;
margin-right : auto;/* モバイル表示時の左に余白 *//* モバイル表示時の右に余白 */
}

/*画像を横100%に（通常）
------------------------------------------------------------*/

img{
  width:100%;
  height:auto;
}

/*画像を横50%に
------------------------------------------------------------*/

.img_half{
  display: flex;
  justify-content: center;
}

.img_half img{
  width:50%;
  height : inherit;
  position : relative;
}

/*画像を一番上に表示
------------------------------------------------------------*/

.img_top{
    position: relative;
  width : 100%;
  height : 100%;
}

.img_top img{
  width : 100%;
  height : inherit;
}

/*画像を一番下に表示
------------------------------------------------------------*/

.img_bottom{
    position: relative;
  width : 100%;
  height : 100%;
}

.img_bottom img{
  width : 100%;
  height : inherit;
}

/*画像を中央に表示
------------------------------------------------------------*/

.img_center{
  position: relative;
  height: 100%; 
}

.img_center img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* リンク設定
------------------------------------------------------------*/
a{
	text-decoration:none;


  color : #666666;
}
a:hover{
	color : #cc0000;
}
a:active, a:focus{
	outline:0;
}

a img{
     border:none;
     verticle-align:top;
     -webkit-transition: 0.3s ease-in-out;
     -moz-transition: 0.3s ease-in-out;
     -o-transition: 0.3s ease-in-out;
     transition: 0.3s ease-in-out;
}

a:hover img {
     opacity: 0.7;     /* 透過レベル */
     filter: alpha(opacity=80);
}

/* アップした動画の設定
------------------------------------------------------------*/
video{
  width: 100%;
  max-width: 900px; /* 最大でも900px以下に */
}


/* ＰＣ用
------------------------------------------------------------*/
@media all and (min-width: 960px) {

/*テキストを下揃えに
------------------------------------------------------------*/
text_bottm{
	display: flex;
vertical-align: bottom;
}

/*画像を横50%に
------------------------------------------------------------*/

.img_half{
  display: flex;
  justify-content: center;
}

.img_half img{
  width:50%;
  height : inherit;
  position : relative;
}

/*画像を一番上に表示
------------------------------------------------------------*/

.img_top{
    position: relative;
  width : 100%;
  height : 100%;
}

.img_top img{
    position: absolute;
    top: 0;
  width : 100%;
  height : auto;
}

/*画像を一番下に表示
------------------------------------------------------------*/

.img_bottom{
    position: relative;
  width : 100%;
  height : 100%;
}

.img_bottom img{
    position: absolute;
    bottom: 0;
  width : 100%;
  height : auto;
}

/*画像を中央に表示
------------------------------------------------------------*/

.img_center{
  position: relative;
  height: 100%; 
}

.img_center img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

}