@charset "utf-8";

/*---------------------------------------------------
PC用rayout
---------------------------------------------------*/
/*----- メインビュー --------*/
#contents header {
background: #f5f2ed; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f5f2ed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f5f2ed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f5f2ed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f5f2ed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f5f2ed 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#f5f2ed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f2ed',GradientType=0 ); /* IE6-9 */
border-top:1px solid #efebe3;
border-bottom:1px solid #bcbcbc;
}
#contents header > div {
background: url(../images/bg_001.png) no-repeat;
background-position: center 220px;
padding: 0 121px;
}
#contents header div .header_a {
float: left;
width: 46%;
padding-left:4%;
}
#contents header div .header_a h2{
margin: 20px 0 0;
}
#contents header div .header_a h2 img {
width: 100%;
max-width: 540px;
}
#contents header div .header_a p{
font-size: 16px;
margin: 10px 0 30px;
letter-spacing: -0.05em;
line-height: 1.6;
background: rgba(255,255,255,0.9);
padding: 10px;
border-radius: 10px;
border: 1px solid #e0e0e0;
}
#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;
background-color:#fff;
border-radius:6px;
}
#contents header div .header_a ul .li02 {
background:url(../../img/btn_gp_mo.png) 0 0 no-repeat;
background-size: 200px 59px;
background-color:#fff;
border-radius:6px;
}
#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;
float: right;
width: 27%;
margin-right: 80px;
}
#contents header div .header_b p img{
width: 100%;
}
#contents header div .header_b p img{
width: 100%;
}
/*----- コンテンツ説明 --------*/
#contents .pt02 {
background: #448aca;
color:#fff;
}
#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: #448aca;
margin-top:0;
color:#fff;
}

/*---------------------------------------------------
SP用rayout
---------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 950px) {
#contents header {
	overflow:hidden;
}
#contents header > div {
    padding: 0 2%;
    width: 96%;
	background-size: contain;
}
#contents header div .header_a {
    width: 46%;
    padding: 0 2%;
}
#contents header div .header_a p{
	margin:15px 0;
}
#contents header div .header_a p span.pc{
	display:none;
}
#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 {
}


#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 0 20px;
}
#contents .pt02 > div > div {
	padding-right:20px;
	padding-bottom: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: 100px;
}
/*----- メインビュー --------*/
#contents header > div {
background: url(../images/bg_001_sp.png) no-repeat;
background-position:center bottom 0;
padding: 20px 0 0;
background-size: contain;
}
#contents header div .header_a {
width: 100%;
padding-left:0;
float:none;
text-align:center;
}
#contents header div .header_a ul {
padding:4% 15%;
}
#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: 450px;
}
#contents .pt02 > div {
margin: 0;
background-position: center bottom;
background-size: 80%;
min-height: 510px;
}
#contents .pt03 > div {
background-position: center bottom;
background-size: 80%;
min-height: 500px;
}
#contents .pt01 div img,
#contents .pt02 div img,
#contents .pt03 div img {
display:inline-block;
margin-bottom:10px;
}
#contents .static-downloadBtn div ul {
    display: -webkit-inline-box;
}
#contents .static-sns ul {
    margin-top: 20px;
}
/*----- page top btn --------*/
.page-top a {background: #448aca;}
}
@media screen and (max-width: 640px) {
/*----- メインビュー --------*/
#contents header div .header_a ul {padding:0 8% 4%;}
/*----- コンテンツ説明 --------*/
#contents .pt01 div {min-height: 390px;}
#contents .pt02 div {min-height: 420px;}
#contents .pt03 div {min-height: 410px;}
#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:4% 2%;}
/*----- コンテンツ説明 --------*/
#contents .pt01 div {min-height: 360px;}
#contents .pt02 div {min-height: 350px;}
#contents .pt03 div {min-height: 350px;}
}
@media screen and (max-width: 490px) {
/*----- コンテンツ説明 --------*/
#contents .pt01 div {min-height: 330px;}
#contents .pt02 div {min-height: 340px;}
#contents .pt03 div {min-height: 300px;}
}
@media screen and (max-width: 414px) {
/*----- コンテンツ説明 --------*/
#contents .pt01 div {min-height: 320px;}
#contents .pt02 div {min-height: 330px;}
#contents .pt03 div {min-height: 300px;}
}
@media screen and (max-width: 320px) {
/*----- コンテンツ説明 --------*/
#contents .pt01 div {min-height: 320px;}
#contents .pt02 div {min-height: 300px;}
#contents .pt03 div {min-height: 300px;}
}