@charset "UTF-8";

/*** reset ***/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,input,textarea,button,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;}
body{line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
ul,ol{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
input,select{vertical-align:middle}
img {vertical-align:top}

/*** base ***/
body {font: 14px/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif,'Alegreya SC', serif; color: #363536; line-height:1.5em; background:url(../img/common/body_bg.png);}
.font10 { font-size:77%; }
.font11 { font-size:85%; }
.font12 { font-size:93%; }
.font13 { font-size:100%; }
.font14 { font-size:108%; }
.font15 { font-size:116%; }
.font16 { font-size:123.1%; }
.font17 { font-size:131%; }
.font18 { font-size:138.5%; }
.font19 { font-size:146.5%; }
.font20 { font-size:153.9%; }
.font21 { font-size:161.6%; }
.font22 { font-size:167%; }
.font23 { font-size:174%; }
.font24 { font-size:182%; }
.font25 { font-size:192.3%; }
.font26 { font-size:197%; }
.font30 { font-size:227.3%; }

.center { text-align: center; }
.right { text-align: right; }
.bold { font-weight: bold;}
.clear-left { clear:left }
.clear-right { clear:right }

.cf:before,.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}

.hbg_main {
	background:url(../img/pc/head_bg.png) repeat-x;
}

header {
	margin-bottom:70px;	
}
header .headinner {
	width:960px;
	margin:0 auto;
	height:235px;
	position: relative;
}
header .headinner .h1logo {
	position:absolute;
	top:60px;
	left:0;
}
header .headinner .h1logo img{
	width:120px; height:auto;
}
header .headinner .appttl {
	position:absolute;
	font-size:32px;
	line-height:1.1em;
	top:85px;
	left:150px;
}
#main-section {
	padding: 0;
}
#main-section .content {	
	overflow: hidden;
}
#main-section .content .concept {
	overflow:hidden;
	padding-right:480px;
	width:480px;
	margin:0 auto;
	position:relative;
}
#main-section .content .concept .h2ttl {
	float:left;
	margin-bottom:30px;
	font-size:28px;
	line-height:36px;
	font-weight:normal;
	width:360px;
}
#main-section .content .concept .qrimg {
	float:right;
	margin-bottom:30px;
	border:solid 1px #E4E4E4;
}
#main-section .content .concept .qrimg img{
	width:107px; height:auto;
}
#main-section .content .concept .concepttxt {
	margin-bottom:150px;
	min-height:230px;
}
#main-section .content .concept .spimg {
	position:absolute;
	right:0;
	bottom:0px;
	z-index:1;
}
#main-section .content .concept .spinimg {
	position:absolute;
	bottom:281px;
	right:91px;
	z-index:2;
}
#main-section .content .concept .spinimg img{
	width:230px; height:auto;
}
#main-section .content .concept .iconlist ul {
	overflow:hidden;
	position:absolute;
	left:0;
	bottom:70px;
	z-index:3;
}
#main-section .content .concept .iconlist ul li {
	float:left;
	margin-right:10px;
}
#main-section .content .concept .iconlist ul li a ,#main-section .content .concept .iconlist2 ul li a {
	-webkit-backface-visibility: hidden; /* 追加 */
  backface-visibility: hidden; /* 追加 */
  -webkit-transition: 0.2s ease-in;
   transition: 0.2s ease-in;
	opacity:1;
	filter: alpha(opacity=100);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=100)";  /* ie 8 */
	-moz-opacity:1;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 1;              /* Safari 1.x */
	display: inline-block;
	zoom:1.0;
	text-decoration: none;
}
#main-section .content .concept .iconlist ul li a:hover , #main-section .content .concept .iconlist2 ul li a:hover {
	opacity:0.7;
	filter: alpha(opacity=70);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=70)";  /* ie 8 */
	-moz-opacity:0.7;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.7;              /* Safari 1.x */	
	zoom:1.0;
	text-decoration: none;
}
 #main-section .content .concept .sparea , #main-section .content .concept .iconlist2 {
	display:none
}

@media screen and (max-width: 768px){
header {
	margin-bottom:60px;	
}
header .headinner {
	width:708px;
	padding:0 30px;
	height:228px;
}

header .headinner .appttl {
	position:absolute;
	font-size:32px;
	top:85px;
	left:150px;
}

#main-section .content .concept {
	padding-right:315px;
	padding-left:30px;
	width:423px;
}
#main-section .content .concept .h2ttl {
	font-size:22px;
	line-height:34px;
	width:310px;
	margin-bottom:20px;
}
#main-section .content .concept .qrimg {
	margin-bottom:20px;
	width:98px; height:98px;
}
#main-section .content .concept .qrimg img{ 
	width:100%; height:auto;
}
#main-section .content .concept .concepttxt {
	padding-right:60px;
	margin-bottom:180px;
	min-height: 195px;
}
#main-section .content .concept .spimg {
	position:absolute;
	left:226px;
	bottom:0;
}
#main-section .content .concept .spinimg {
	position:absolute;
	bottom:241px;
	left:497px;
	
}

#main-section .content .concept .iconlist ul {
	overflow:hidden;
	position:absolute;
	left:30px;
	bottom:60px;
}
#main-section .content .concept .iconlist ul li {
	float:left;
	margin-right:10px;
}

#main-section .content .concept .sparea , #main-section .content .concept .iconlist2 {
	display:none
}
}
	
@media screen and (max-width:640px){
.hbg_main {
	background: none;
}
header {
text-align:center !important;
margin-bottom:30px;
width:auto;
background:#fff;
border-bottom:1px solid #e9e9e9;
	}
header .headinner {
	width:auto;
	height:150px;
	padding:25px 0 0 0;
	
}
header .headinner .h1logo {
	position: static;
	text-align:center;
	margin-bottom:14px;
	width:100%;
}
header .headinner .h1logo img{
	display: inline; width:66px; height:auto;
}
header .headinner .appttl {
	position: static;
	font-size:22px;
	width:auto;
	
}
header .headinner .spimg , header .headinner .iconlist , #main-section .content .concept .qrimg {
	display:none;
}

#main-section .content {	
	width:auto;
	height:auto
}
#main-section .content .concept {
	padding:0px;
	width:auto;
}
#main-section .content .concept .h2ttl {
	width:290px;
	text-align:center;
	font-size:20px;
	line-height:28px;
	float:none;
	padding-bottom:20px;
	margin:0 auto
}
#main-section .content .concept .concepttxt {
	width:290px;
	min-height:0;
	margin:0 auto;
	padding:0px;
}
#main-section .content .concept .iconlist {
	display:none;
}
#main-section .content .concept .iconlist2 {
	padding:0;
	width:290px;
	margin:0 auto;
	padding-top:25px;
	padding-bottom:40px
}
#main-section .content .concept .iconlist2 {
	display:block;
}
#main-section .content .concept .iconlist2 ul {
	overflow:hidden;
	padding-left:10px;
}
#main-section .content .concept .iconlist2 ul li {
	float:left;
	margin-right:12px;
}
#main-section .content .concept .sparea {
	display:block;
	position:relative;
	width:320px;
	margin:0 auto
}
#main-section .content .concept .sparea .spinimg {
	position:absolute;
	top:42px;
	left:87px;
}
#main-section .content .concept .spinimg img{
	width:130px; height:auto;
}
}

#point-section {
	padding:50px 0 70px 0;
	border-top:1px solid #e9e9e9;
	background:#fff;
}
#point-section .pointcon {
	width:960px;
	margin:0 auto;
}
#point-section .pointcon ul {
	overflow:hidden;
	margin-right:-30px;
}
#point-section .pointcon ul li {
	float:left;
	margin-right:30px;
	width:299px;
	text-align:center;
}
#point-section .pointcon ul li .midashi {
	margin:25px 0 10px 0;
	font-size:24px;
}

@media screen and (max-width: 768px){
#point-section {
	padding:35px 0 45px 0;
	border-top:1px solid #e9e9e9;
}
#point-section .pointcon {
	width:708px;
	margin:0 auto;
	padding:0 30px;
}
#point-section .pointcon ul {
	overflow:hidden;
	margin-right:-20px;
}
#point-section .pointcon ul li {
	width:222px;
	float:left;
	margin-right:20px;
}
#point-section .pointcon ul li .midashi {
	margin:20px 0 10px 0;
}

}

@media screen and (max-width:640px){
#point-section {
	padding:23px 0;
	border-top:1px solid #e9e9e9;
}
#point-section .pointcon {
	width:320px;
	margin:0 auto;
	padding:0;
}
#point-section .pointcon ul {
	margin:0
}
#point-section .pointcon ul li {
	margin-right:0px;
	margin-bottom:20px;
	float:none;
	width:300px;
	padding:0 10px;
}
#point-section .pointcon ul li .midashi {
	margin:25px 0 15px 0;
}
}

footer {
	background: #f0f0f0;
	height:54px
}
#footerinner {
	width:960px;
	margin:0 auto;
	overflow:hidden;
}
#footerinner p {
	color: #363536;
	float:left;
	padding-top:17px;
}
#footerinner p a:link{ color:#363536; text-decoration:none;}
#footerinner p a:visited{ color:#363536; text-decoration:none;}
#footerinner p a:hover{ color:#363536; text-decoration: underline;}
#footerinner .flogo {
	float:right;
	height:54px;
}
.gotopbtn {
	display:none;
}
#footerinner .flogo a {
	-webkit-backface-visibility: hidden; /* 追加 */
  backface-visibility: hidden; /* 追加 */
  -webkit-transition: 0.2s ease-in;
   transition: 0.2s ease-in;
	opacity:1;
	filter: alpha(opacity=100);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=100)";  /* ie 8 */
	-moz-opacity:1;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 1;              /* Safari 1.x */
	display: inline-block;
	zoom:1.0;
	text-decoration: none;
}
#footerinner .flogo a:hover {
	opacity:0.7;
	filter: alpha(opacity=70);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=70)";  /* ie 8 */
	-moz-opacity:0.7;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.7;              /* Safari 1.x */	
	zoom:1.0;
	text-decoration: none;
}
@media screen and (max-width: 768px){
footer {
	height:54px;
	padding:5px 0;
}
#footerinner {
	width:708px;
	margin:0 auto;
	overflow:hidden;
	padding:0 30px;
}
.gotopbtn {
	display:none;
}
}
@media screen and (max-width: 640px){
footer {
	background: #f0f0f0;
	height: auto;
	text-align:center;
	padding-top:20px;
	position:relative
}
.gotopbtn {
	display: inherit;
	text-align:center;
	position:absolute;
	top:-18px;
	text-align:center;
	width:100%;
}
#footerinner {
	width:320px;
	margin:0 auto;
	padding: 0;
}
#footerinner p {
	float:none;
	margin:15px 0 5px 0;
	padding:0
}
#footerinner .flogo {
	float:none;
	}

}

/* ▼表示領域が769px以上の場合 */
@media screen and (min-width: 769px) {
	img.spimage { display: none; }  /* spを非表示 */
	img.tbimage { display: none; }  /* tbを非表示 */
	img.pcimage { display: block; } /* pcを表示 */
	
	img.innerimg01 { display: block; }  /* 非表示 */
	img.innerimg02 { display: none; } /* 表示 */
}
/* ▼表示領域が768px未満の場合 */
@media screen and (max-width: 768px) {
	img.spimage { display: none; }  /* spを非表示 */
	img.tbimage { display: block; } /* tbを表示 */
	img.pcimage { display: none; }  /* pcを非表示 */
	
	img.innerimg01 { display: block; }  /* 非表示 */
	img.innerimg02 { display: none; } /* 表示 */
}
/* ▼表示領域が640px未満の場合 */
@media screen and (max-width: 640px) {
	img.spimage { display: inline; } /* spを表示 */
	img.tbimage { display: none; }  /* tbを非表示 */
	img.pcimage { display: none; }  /* pcを非表示 */
	
	img.innerimg01 { display: none; } /* 表示 */
	img.innerimg02 { display: block; }  /* 非表示 */
}