@charset "UTF-8";
/* ******************************************************************

	--home.css--

	1. Layout setting

****************************************************************** */

body {
	background:#fff;
}

/*==================================================================
	1. Layout setting
===================================================================*/

.headerInner {
	min-height:83px !important;
}
#header .logo h1 {
	width: 718px;
}
#header .logo p {
	text-align:center;
}
.headerInner {
	min-height:83px;
}
* html .headerInner {
	height:83px;
}
#header .logo h1,
#header .logo p {
	width:718px;
	text-align:center;
}
#main {
	margin-right:1px;
}

.inbox {
	width:1040px;
	margin:0 auto;
	padding:40px 0;
}


.function-sub p,
.catchcopy p,
.function-main,
.detail p,
#premium li {
	font-size:16px;
	line-height:1.6;
}



/*---------------------------------------------
	main visual
---------------------------------------------*/

#mainslider{
	position:relative;
	background:url(/img/home/main_visual.png) no-repeat right;
	background-size:contain;
	height:470px;
}

#mainslider img {margin:10px 0 5px 40px;}

.catchtexst {
	width:380px;
	background: url(../img/home/catchstrong.png) no-repeat top left;
	font-size:32px;
	line-height:1.6;
	font-weight:bold;
	text-align:center;
	padding:10px 0 0;
}
.subcomment {
	width:380px;
	font-size:16px;
	line-height:1.4;
	text-align:center;
}
.subcomment span {
	font-size:12px;
}



/*---------------------------------------------
	button
---------------------------------------------*/
.button.signup,
.button.download,
.button.premium {
	display: inline-block;
	margin:0 auto;
	text-align: center;
	text-decoration: none;
	color:#fff;
	outline: none;
	cursor:pointer;
}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

/* 新規登録 */
.button.signup {
	padding:15px 0;
	font-size:20px;
	background-color: #fcab2c;
	margin-left:30px;
	border-radius:7px;
	box-shadow:1px 1px 2px #666;
	width:300px;
}
.button.signup:hover {
	background-color: #fdc368;
}

/* アプリをダウンロード */
.button.download {
	background:#fe8ba2;
	font-size:18px;
	padding:20px 0;
	margin:0 0 40px 80px;
	width:400px;
	border-radius:100px;
}
.button.download:hover {
	background:#fea6b8;
}

/* プレミアムプラン */
.button.premium {
	display:block;
	background:#822f2f;
	text-align:center;
	font-size:18px;
	padding:20px 0;
	margin:30px auto 0;
	border-radius:100px;
	width:450px;
}
.button.premium:hover {
	background:#ab5f5f;
}


/*---------------------------------------------
	catchcopy
---------------------------------------------*/

.catchcopy h2 {
	background:url(/img/home/catch-sp.png) no-repeat 200px center;
	padding:0 0 0 360px;
	margin:0 auto;
	font-size:45px;
	line-height:1.2;
	color:#dca75b;
	font-weight:bold;
	height:127px;
}
.catchcopy h2 img {vertical-align:middle;}
.catchcopy h2 span {
	color:#454444 !important;
	font-weight:normal;
	font-size:18px;
}
.catchcopy p {
	text-align:center;
	margin:30px auto 10px;
	width:60%;
}



/*---------------------------------------------
	アプリ機能紹介
---------------------------------------------*/

.function-main {
	background:#bbd7d0;
}
.function-main h2 {
	color:#0e5f4a;
	text-align:center;
	font-size:35px;
	line-height:1.3;
	font-weight:bold;
	margin:30px 0 20px;
}

.function-main .inbox.ai {
	background:#bbd7d0 url(/img/home/function-ai.png) no-repeat left bottom;
}
.function-main .inbox.import {
	background:#bbd7d0 url(/img/home/function-import.png) no-repeat right bottom;
}

.function-main .ai .detail {
	margin:0 50px 0 450px;
}
.function-main .import .detail {
	margin:0 450px 30px 0;
}

.function-main .detail p {
	margin-bottom:40px;
}
.function-main .itembt_m{
	width:240px;
	height:40px;
	text-align:center;
	color:#fff;
	background:#658cd1;
	border-radius:20px;
	margin:0 auto;
}
.function-main .itembt_m a{
	display:block;
	color:#fff;
	padding:8px 0 8px 0;
	border-radius:20px;
}
.function-main .itembt_m a:hover {
	background:#84a7e4;
}



/* function-sub */

.function-sub .inbox {
	padding:50px 0 30px;
}

.function-sub ul {
	display: -webkit-flex; /* Safari */
	display: flex;
	justify-content: space-between;
    -webkit-justify-content: space-between;
	margin-bottom:50px;
}

.function-sub > li {
	flex-basis: 30%;
}
.function-sub h3 {
	color:#3d7bb2;
	font-size:20px;
	text-align:center;
	margin-bottom:25px;
}
.function-sub .figure {
	text-align:center;
	margin-bottom:15px;
}

.function-sub li p {
	width:309px;
}



/*---------吹き出し----------*/

.function-main .balloon,
.balloon {
	position: relative;
	display: inline-block;
	padding: 30px 0;
	margin:10px 0 10px 100px;
	width: 350px;
	text-align: center;
	font-size:16px;
	color:#454444;
	border-radius:7px;
	z-index: 0;
}
.function-main .import .balloon {
	margin:10px 0 10px 130px;
}

.function-main .balloon {
	background:#fff;
	font-size:18px;
	line-height:1.6;
}
.balloon {
	background:#dae9f6;
	font-size:16px;
	margin:0 0 30px 0;
	width:309px;
}
.function-main .balloon:after,
.balloon:after {
	content: "";
	position: absolute;
	bottom: -10px; left: 50%;
	margin-left: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 0 10px;
}
.function-main .balloon:after {
	border-color: #fff transparent transparent transparent;
}
.balloon:after {
	border-color: #dae9f6 transparent transparent transparent;
}



/*PickUp*/
.pickup {
	position:relative;
	border-top:1px solid #5c8bc5;
	padding-top:20px;
}
.pickup .inbox {
	padding:30px 0;
}
.pickup-badge {
	position:absolute;
	left:80px;
	top:-7px;
}
.pickup p {
	background:url(/img/home/icon-search.png) no-repeat 250px center;
	padding:15px 0 15px 360px;
	font-size:20px;
	line-height:1.4;
}


/*---------------------------------------------
	アプリダウンロードボタン
---------------------------------------------*/

#app-download h2,
#app-download2 h2{
	text-align:center;
	font-size:40px;
	color:#666;
	font-weight:bold;
	border-bottom:1px dotted #ccc;
	margin:20px 0 50px;
	padding-bottom:20px;
}
#app-download p,
#app-download2 p{
	font-size:16px;
}

ul.app-button {
	display: -webkit-flex; 
	display: flex;
	justify-content: space-between;
    -webkit-justify-content: space-between;
	margin:0 auto 20px;
	width:70%;
}
.app-button > li {
	flex-basis: 48%;
	text-align:center;
}

#app-download p.detaillink,
#app-download2 p.detaillink {
	color:#0b3e6b;
	font-size:18px;
	font-weight:bold;
	background:url(../img/home/linkarrow.png) no-repeat top left;
	padding:0 0 3px;
	margin-left:700px;
}
#app-download p.detaillink a,
#app-download2 p.detaillink a {
	display:block;
	color:#0b3e6b;
	padding:7px 0 0 35px;
}
#app-download p.detaillink a:hover,
#app-download2 p.detaillink a:hover{
	background:url(../img/home/linkarrow_hover.png) no-repeat top left;
}



/*---------------------------------------------
	プレミアム
---------------------------------------------*/
#premium {
	background:#cbbe92;
}
#premium .inbox {
	padding:60px 0;
}

#premium h2,
#premium li {
	color:#fff;
}

#premium h2 {
	background:url(/img/home/premium-h2.png) no-repeat center -2px;
	text-align:center;
	font-size:28px;
	line-height:1.6;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	height:160px;
}
#premium h2 span {
	font-size:18px;
}

#premium ul {
	overflow:hidden;
	margin:0 auto;
	width:70%;
}
#premium li {
	float:left;
	width:45%;
	list-style:disc;
	margin-left:1.5em;
	font-weight:normal;
}



/*---------------------------------------------
	安心便利な特長
---------------------------------------------*/
.point3{
	background:#eef7ff;
}
.point3 .inbox{
	width:1040px;
	height:640px;
	padding:70px 0 0 0;
	margin:0 auto;
	position:relative;
}
.point3 h2{
 	font-size:48px;
	font-weight:bold;
	text-align:center;
}
.point3 ul{
	width:900px;
	margin:auto;
	padding:60px 0 0 0;
}
.point3 li{
	width:240px;
	height:400px;
	float:left;
	margin:0 90px 0 0;
}
.point3 li.function_sbox{
	margin:0;
}
.point3 li h3{
	color:#658cd1;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	line-height:1.6em;
	padding:0 0 120px 0;
}
.point3 li.automatic_sbox h3{
	background:url(../img/home/iconpc_3p.jpg) no-repeat center bottom;
}
.point3 li.security_sbox h3{
	background:url(../img/home/iconkey_3p.jpg) no-repeat center bottom;
}
.point3 li.function_sbox h3{
	background:url(../img/home/iconpig_3p.jpg) no-repeat center bottom;
}
.point3 li p{
	height:105px;
	font-size:16px;	
	line-height:1.6em;
	margin:15px 0 20px 0;
}
.point3 li p.itembt_m{
	width:240px;
	height:40px;
	text-align:center;
	color:#fff;
	background:#658cd1;
	border-radius:20px;
}
.point3 li p.itembt_m a{
	display:block;
	color:#fff;
	width:240px;
	height:32px;
	padding:8px 0 0 0;
}
.point3 p.detaillink{
	width:90px;
	height:32px;
	color:#0b3e6b;
	font-size:18px;
	font-weight:bold;
	background:url(../img/home/linkarrow.png) no-repeat top left;
	position:absolute;
	right:80px;
	bottom:55px;
}
.point3 p.detaillink a{
	display:block;
	width:90px;
	height:29px;
	color:#0b3e6b;
	padding:3px 0 0 50px;
}
.point3 p.detaillink a:hover{
	background:url(../img/home/linkarrow_hover.png) no-repeat top left;
}



/*---------------------------------------------
	お客さまの声
---------------------------------------------*/

#voice .inbox {
	overflow:hidden;
}

#voice h2 {
	font-size:48px;
	text-align:center;
	font-weight:bold;
}
.lead {
	text-align:center;
	margin:20px 0 30px;
	font-size:16px;
}

#voice .user {
	position:relative;
	float:left;
	border:1px solid #ccc;
	padding:30px;
	width:43%;
	height:200px;
}
#voice .user p {
	padding-bottom:1em;
	width:300px;
	text-align: justify;
	text-justify: inter-ideograph;
	font-size:14px;
	line-height:1.5;
}
#voice .user.man {
	border:1px solid #b1d4ed;
	background:url(/img/home/voice-user-man.png) no-repeat right bottom;
	margin:0 20px 20px 0;
}
#voice .user.woman {
	border:1px solid #f5bac9;
	background:url(/img/home/voice-user-woman.png) no-repeat right bottom;
	margin:0 0 20px 0;
}
#voice .user.wife {
	border:1px solid #fddc95;
	background:url(/img/home/voice-user-wife.png) no-repeat right bottom;
	margin:0 20px 0 0;
}
#voice .user.middle {
	border:1px solid #89654e;
	background:url(/img/home/voice-user-middle.png) no-repeat right bottom;
	margin:0;
}

#voice .user .span {
	top:5em;
	left:2em;
	transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
	position: absolute;
    content: " ";
    z-index: 100;
}
#voice .user:after {
	top: 0;
    left: 0;
    border-bottom: 3em solid transparent;
	position: absolute;
    content: " ";
    height: 0;
    width: 0;
}
#voice .user.man:after{
	border-left: 3em solid #b1d4ed;
}
#voice .user.woman:after{
	border-left: 3em solid #f5bac9;
}
#voice .user.wife:after{
	border-left: 3em solid #fddc95;
}
#voice .user.middle:after{
	border-left: 3em solid #89654e;
}



/*---------------------------------------------
	メディア掲載一覧
---------------------------------------------*/
#media {
  background: #FFFAE9;
}

#media h2 {
	font-size:48px;
	text-align:center;
	font-weight:bold;
}

#media dl {
  overflow: hidden;
  margin: 30px auto ;
  width: 80%;
  font-size: 14px;
  line-height: 1.4;
}
#media dt {
  float: left;
  clear: both;
  padding-left: 10px;
  width: 8em;
}
#media dd {
  border-bottom: 1px dotted #ccc;
  padding: 0 0 8px 0;
  margin-bottom: 6px;
}

#media dd.magazine:before,
#media dd.web:before,
#media dd.newspaper:before {
  color: #fff;
  font-size: 11px;
  text-align: center;
  padding: 0 10px;
  border-radius: 3px;
}
#media dd.magazine:before {
  content: "雑誌";
  background: #F74F51;
}
#media dd.web:before {
  content: "WEB";
  background: #98CAF9;
  padding: 0 9px;
}
#media dd.newspaper:before {
  content: "新聞";
  background: #89D54B;
}





/*---------------------------------------------
	カナコ
---------------------------------------------*/
.mandm{
	width:100%;
	background:#eef7ff;
}
.mandm h2{
	text-align:center;
	font-size:22px;
	font-weight:bold;
}
.mandm h2 span{
	font-size:38px;
}
.mandm ul{
	display:block;
	width:980px;
	background:#fff;
	padding:10px 0 0 0;
	margin:20px auto 0 auto;
}
.mandm li{
	width:489px;
	height:340px;
}
.mandm li.list_end{
	border:none;
	margin:0 auto;
}
.mandm li img{
	display:block;
	width:450px;
	height:280px;
	margin:0 auto;
}
.mandm li a:hover img{
	filter: alpha( opacity = 70 );
	opacity: 0.7;
	zoom: 1;
}
.mandm li h5{
	text-align:center;
	font-size:22px;
	margin:10px 0 10px 0;
}
.mandm .inbox{
	width:1040px;
	margin:0 auto;
}
.mandm p.detaillink{
	color:#0b3e6b;
	font-size:18px;
	font-weight:bold;
	background:url(../img/home/linkarrow.png) no-repeat top left;
	margin:350px 0 0 870px;
}
.mandm p.detaillink a{
	display:block;
	width:90px;
	height:29px;
	color:#0b3e6b;
	padding:3px 0 0 50px;
}
.mandm p.detaillink a:hover{
	background:url(../img/home/linkarrow_hover.png) no-repeat top left;
}




a{
	text-decoration:none;
	color:#333;		
}
a:hover{
	text-decoration:none;
	color:#333;
	filter: alpha( opacity = 70 );
	opacity: 0.7;
	zoom: 1;
}
/** gimmick start **/





/* ------------------------------------------------------------------
	pagetop
-------------------------------------------------------------------*/

#pagetop {
	position:fixed;
	bottom:20px;
	right:20px;
	z-index:1;
}
#pagetop a:hover {border-bottom:none !important;}


/*---------------------------------------------
	bottom用リンク
---------------------------------------------*/
.recheck {
	background:#eef7ff;
	height:130px;
}
.recheck p{
	background:#efffed;
	font-weight:bold;
	line-height:2em;
	font-size:16px;
	text-align:center;
}
.recheck ul{
	width:980px;
	position:relative;
	margin:0 auto 30px auto ;
}
.recheck li{
	width:230px;
	height:40px;
	float:left;
	margin:0 20px 0 0;
}
.recheck li.recheck_btnend{
	margin:0;
}
.recheck li span{
	font-size:16px;
	display:block;
	position:absolute;
	color:#ffffff;
}
.recheck li span.recheck_btn1{
	top:10px;
	left:50px;
}
.recheck li span.recheck_btn2{
	top:10px;
	left:300px;
}
.recheck li span.recheck_btn3{
	top:10px;
	left:550px;
}
.recheck li span.recheck_btn4{
	top:10px;
	left:790px;
}