@charset "utf-8";

/*---------------------------------------------------
PC用rayout
---------------------------------------------------*/
/*----- メインビュー --------*/
#contents header {
background: url(../images/bg_001.png) center 0 repeat-x;
background-size:cover;
}
#contents header div .header_a {
float: left;
width: 46%;
padding-left:2%;
}
#contents header div .header_a h2{
margin: 37px 0 0;
}
#contents header div .header_a h2 img {
width: 100%;
max-width: 540px;
}
#contents header div .header_a p{
font-size: 16px;
margin: 30px 0;
letter-spacing: -0.05em;
line-height:1.6;
background: #fff;
border-radius: 5px;
padding: 10px;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
#contents header div .header_a ul {
display:-webkit-box;/*--- Androidブラウザ用 ---*/
display:-ms-flexbox;/*--- IE10 ---*/
display: -webkit-flex;/*--- safari（PC）用 ---*/
display:flex;
-webkit-box-pack:justify;/*--- Androidブラウザ用 ---*/
-ms-flex-pack:justify;/*--- IE10 ---*/
-webkit-justify-content:space-around;/*--- safari（PC）用 ---*/
justify-content:space-around;
}
#contents header div .header_a ul li img {
width:200px;
}
#contents header div .header_a ul .li01 {
background: url(../../img/btn_ap_mo.png) 0 0 no-repeat;
background-size: 200px 59px;
}
#contents header div .header_a ul .li02 {
background:url(../../img/btn_gp_mo.png) 0 0 no-repeat;
background-size: 200px 59px;
}
#contents header div .header_a ul li a {
display: inline-block;
}
#contents header div .header_a ul li a:hover img {
visibility: hidden;
}
#contents header div .header_b {
padding-top: 37px;
padding-bottom: 30px;float:right;
width: 26%;
margin-right: 120px;
}
#contents header div .header_b p img{
width: 100%;
}
#contents header div .header_b p img{
width: 100%;
}
/*----- コンテンツ説明 --------*/
#contents .pt02 {
background: #f2f2f2;
}
#contents .pt01 > div,
#contents .pt02 > div,
#contents .pt03 > div {
min-height: 310px;
padding-top: 50px;
}
#contents .pt01 > div {
background:url(../images/img_002.png) no-repeat;
background-position: right bottom;
}
#contents .pt02 > div {
background:url(../images/img_003.png) no-repeat;
background-position:20px bottom;
}
#contents .pt03 > div{
background:url(../images/img_004.png) no-repeat;
background-position: right bottom;
}
#contents .pt01 > div > div,
#contents .pt02 > div > div,
#contents .pt03 > div > div {
width: 45%;
padding: 0 0 0 20px;
}
#contents .pt02 > div > div {
float: right;
}
#contents .pt01 div img,
#contents .pt02 div img,
#contents .pt03 div img {
margin-bottom: 20px;
}
#contents .pt01 > div > div h3,
#contents .pt02 > div > div h3,
#contents .pt03 > div > div h3 {
font-size:36px;
font-weight:normal;
}
#contents .pt01 > div > div p,
#contents .pt02 > div > div p,
#contents .pt03 > div > div p {
font-size: 16px;
line-height:1.6;
}
/*----- アプリ一覧(このページ用背景設定) --------*/
#contents .static-appliIndex {
background: #f2f2f2;
margin-top:0;
}
/*----- DLボタン(このページ用背景設定) --------*/
#contents .static-downloadBtn {
background:#e0e0e0;
}
/*---------------------------------------------------
SP用rayout
---------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 950px) {
#contents header {
	overflow:hidden;
}
#contents header > div {
    padding: 0 2%;
    width: 96%;
}
#contents header div .header_a {
    width: 48%;
    padding: 0 2% 0 4%;
}
#contents header div .header_a p{
	margin:15px 0;
}
#contents header div .header_a p span.pc{
	display:none !important;
}
#contents header div .header_a ul li img {
	width:150px;
}
#contents header div .header_a ul .li01,
#contents header div .header_a ul .li02 {
	background-size: 150px 44px;
}
#contents header div .header_b {
width: 24%;
margin-right: 100px;
}

#contents .pt01 > div,
#contents .pt02 > div,
#contents .pt03 > div {
	min-height: 270px;
	padding-top: 3%;
}
#contents .pt01 > div,
#contents .pt03 > div {
	background-position: 95% bottom;
    background-size: 50%;
}
#contents .pt02 > div {
    background-size: 50%;
}
#contents .pt01 > div > div,
#contents .pt02 > div > div,
#contents .pt03 > div > div {
    width: 40%;
    padding: 3% 0 20px 20px;
}
#contents .pt02 > div > div {
	padding-right:20px;
	margin:0;
}
#contents .pt01 > div > div h3,
#contents .pt02 > div > div h3,
#contents .pt03 > div > div h3 {
	font-size:30px;
}
#contents .pt02 > div > div .pc {
	display:none;
}
#contents .pt01 > div img,
#contents .pt02 > div img,
#contents .pt03 > div img {
    margin-bottom: 20px;
    width: 100%;
}
}
@media screen and (max-width: 767px) {
html.frozen-1 #contents {
padding-bottom: 120px;
}
/*----- メインビュー --------*/
#contents header div .header_a {
width: 100%;
padding-left:0;
float:none;
text-align:center;
}
#contents header div .header_a ul {
padding:0 15% 4%;
}
#contents header div .header_a ul li {
width: 45%;
margin: 0 auto;
}
#contents header div .header_a ul .li01 {
background-size:contain;
background-position:0 0;
}
#contents header div .header_a ul .li02 {
background-size:contain;
background-position:0 0;
}
#contents header div .header_a ul li img {
width:100%;
}
#contents header div .header_a h2{
margin: 0;
}
/*----- コンテンツ説明 --------*/
#contents .pt01,
#contents .pt03 {
margin:0 5%;
}
#contents .pt02 {
padding:0 5%;
}
#contents .pt01 h3,
#contents .pt02 h3,
#contents .pt03 h3 {
margin-left:0;
text-align:left;
}
#contents .pt01 h3 img,
#contents .pt02 h3 img,
#contents .pt03 h3 img {
width: 80%;
}
#contents .pt01 > div > div,
#contents .pt02 > div > div,
#contents .pt03 > div > div {
width: 100%;
padding: 0;
}
#contents .pt01 > div,
#contents .pt02 > div,
#contents .pt03 > div {
padding-top: 5%;
}
#contents .pt01 > div {
background-position: center bottom;
background-size: 80%;
min-height: 530px;
}
#contents .pt02 > div {
margin: 0;
background-position: center bottom;
background-size: 80%;
min-height: 500px;
}
#contents .pt03 > div {
background-position: center bottom;
background-size: 80%;
min-height: 560px;
}
#contents .pt01 div img,
#contents .pt02 div img,
#contents .pt03 div img {
display:inline-block;
margin-bottom:10px;
}

/*----- page top btn --------*/
.page-top a {background: #E0E0E0;}
}
@media screen and (max-width: 640px) {
/*----- メインビュー --------*/
#contents header div .header_a ul {padding:0 8% 4%;}
/*----- コンテンツ説明 --------*/
#contents .pt01 div {min-height: 430px;}
#contents .pt02 div {min-height: 420px;}
#contents .pt03 div {min-height: 430px;}
#contents .pt01 > div > div h3,
#contents .pt02 > div > div h3,
#contents .pt03 > div > div h3 {font-size:24px;}
#contents .pt01 > div > div p,
#contents .pt02 > div > div p,
#contents .pt03 > div > div p {font-size:14px;}
}
@media screen and (max-width: 568px) {
/*----- メインビュー --------*/
#contents header div .header_a ul {padding:0 2% 4%;}
/*----- コンテンツ説明 --------*/
#contents .pt01 div {min-height: 440px;}
#contents .pt02 div {min-height: 390px;}
#contents .pt03 div {min-height: 420px;}
}
@media screen and (max-width: 490px) {
/*----- コンテンツ説明 --------*/
#contents .pt01 div {min-height: 400px;}
#contents .pt02 div {min-height: 390px;}
#contents .pt03 div {min-height: 410px;}
}
@media screen and (max-width: 414px) {
/*----- コンテンツ説明 --------*/
#contents .pt01 div {min-height: 400px;}
#contents .pt02 div {min-height: 390px;}
#contents .pt03 div {min-height: 410px;}
}
@media screen and (max-width: 320px) {
/*----- コンテンツ説明 --------*/
#contents .pt01 div {min-height: 370px;}
#contents .pt02 div {min-height: 370px;}
#contents .pt03 div {min-height: 420px;}
}