@charset "utf-8";

/* =====================================================================
     レスポンシブに対応させます。めっちゃ簡単。死ぬほど簡単。byカワナベ
====================================================================== */



/* =====================================================================
     基本設定（全体サイズ、色、リンクなど）
====================================================================== */
html,body {
	margin:0; 
	padding:0; 
	font-size:13px; 
	webkit-text-size-adjust: none; 
	width:100%; 
	height:100%;
	background: url(../img/bg.jpg) repeat center top #fff;

}

/*　以下の一行はグローバルメニュー2を使わない場合は消してもよい　*/
html {
	overflow-x: hidden; 
	overflow-y: scroll;
}

/*　全体の横幅・中央揃え　背景の配置*/
div.index_main {
}

/*　リンクの配色　*/
a{
	text-decoration:none; 
	color:#0066FF; 
	-webkit-tap-highlight-color:rgba(255,153,102,1);
}

a:link {
    color:#0066FF;
    font-style:normal;
    text-decoration:underline;
}

a:visited {
    color:#0066FF;
    text-decoration:underline;
}

a:hover {
    color:#0033FF;
    font-style:normal;
    text-decoration:underline;
	-ms-filter: "alpha(opacity=75)";
	filter: alpha(opacity=75);
	opacity: 0.75;
}

a:active {text-decoration:none;}

a:focus { outline:none;}

/*	clearfix  */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */


/*　要素の存在を無くす　*/
.disnon {display:none;}

/*　要素を隠す（見えなくする）　*/
.hidden {visibility: hidden;}


/* =====================================================================
     文字色を変更する時はここです。
====================================================================== */
html{
	color:#444;
}

header {
	color: #FFFFFF;
}

footer {
	color: #fff;
	background-color:#555;
}

.content{
	background:rgba(255,255,255,0.5);
}


@media screen and (min-width:580px) { 

/* =====================================================================
     ヘッダー
====================================================================== */
header {
	width:100%; 
	background: url(../img/bar_top.jpg) repeat-x;
	text-align: center;
	height:24px;
}

/* =====================================================================
     フッター
====================================================================== */
footer {
	width: 100%;
	text-align: center;
	position: fixed;
	bottom:0px;
	padding:10px;
}

article {
	width: 100%;
}


.content{
	margin:0 auto;
	text-align:center;
	background:rgba(255,255,255,0.5);
	box-shadow:0px 0px 5px rgba(0,0,0,0.3);
	width:100%;
	max-width:960px;
	height:100vh;
}

.logo{
	margin:150px auto 0;
	width:100%;
	max-width:800px;
}

.select{
	margin:100px auto 0;
}

.select ul{
	margin:0 auto;
	width:550px;
}


.select ul li:first-child{
	float:left;
}

.select ul li:last-child{
	float:right;
}

.select ul li img{
	margin:0px auto;
}

}


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

/* =====================================================================
     ヘッダー
====================================================================== */
header {
	width:100%; 
	background: url(../img/bar_top.jpg) repeat-x;
	color: #FFFFFF;
	text-align: center;
	height:24px;
}

/* =====================================================================
     フッター
====================================================================== */
footer {
	width: 100%;
	color: #fff;
	text-align: center;
	padding:7px;
}
footer img{
	width: 100%;
	max-width:380px;
}

article {
	width: 100%;
}


.content{
	margin:0 auto;
	text-align:center;
	background:rgba(255,255,255,0.5);
	width:100%;
	max-width:960px;
}

.logo{
	width:100%;
	max-width:800px;
}

.smart{
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
height: 0;
background: url(../img/girl_image.jpg) 0 0 no-repeat;
padding-top: 156.25%;
background-size:contain;
}

.select{
	margin:0 auto;
}

.select ul{
	margin:0 auto;
}


.select ul li:first-child{
}

.select ul li:last-child{
}

.select ul li img{
	margin:0px auto;
}

}