@charset "UTF-8";

/* html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark*/
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,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:bottom;
    background:transparent;
}
body {line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;} 
nav,ul,ol {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}
a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;} 
/* change colours to suit your needs */
ins {background-color:#ff9;color:#000;text-decoration:none;}
/* change colours to suit your needs */
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;} 
/* change border colour to suit your needs */
hr {display:block;height:1px;border:0;   border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input, select {vertical-align:middle;}
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;/* iPhoneでの文字サイズ自動修正 を使わない*/
}

/*--------ベース---------*/
body {
    color: #0f0e14;
	font-family: YuGothic, "Custom Yu Gothic", "Yu Gothic","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    line-height: 1.7;
    font-size: 18px;
    background: #fff;
}
@font-face {
  font-family: "Custom Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 300;
}
@font-face {
  font-family: "Custom Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 500;
}
@font-face {
  font-family: "Custom Yu Gothic";
  src: local("Yu Gothic");
  font-weight: bold;
}
@media all and (-ms-high-contrast:none) {
	body {
		font-family: "メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	}
}
.pc_view {display: block;}
.sp_view {display: none;}
.cx_smartphoneview .sp_view {display: block;}
.cx_smartphoneview .pc_view {display: none;}
a:link {
    color: #000;
    text-decoration: underline;
}
a:visited {
    color: #000;
    text-decoration: underline;
}
a:hover {
    color: #000;
    text-decoration: none;
}
a:active {
    color: #000;
    text-decoration: none;
}
a img {
	-webkit-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}
 a img:hover {
	opacity: 0.7;
}
.top10 {padding: 10px 0 0;}
.top20 {padding: 16px 0 0;}
.top30 {padding: 26px 0 0;}

.small {font-size: 88%; font-weight: normal; vertical-align: baseline;text-indent: -1em; padding-left: 1em;}
.cx_smartphoneview .small {font-size: 100%;}
.clear {
    clear: both;
}
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.cx_smartphoneview p {
	font-size: 140%;
}


/*top*/
#fp-wrap {
	background-image:url(../img/top_bg_ph.jpg), url(../img/top_bg_repeat.png);
	background-repeat: no-repeat, repeat-x;
	background-position: center 0, center 0;
	background-color: #fff;
	border-bottom: 1px solid #ababab;
}
.cx_smartphoneview #fp-wrap {
	background:url(../img/top_ph_sp.jpg) no-repeat center 0;
	background-size: 100%;
	background-color: #fff;
}
h1 {
	text-align: center;
	padding: 30px 0;
	margin: 0 0 40px;
}
.cx_smartphoneview h1 {
	width: 78%;
	height: auto;
	margin: 0 auto 30px auto;
	padding: 25px 0;
}
.cx_smartphoneview h1 img {
	max-width: 100%;
	height: auto;
}
article {
	margin: 0 20px;
}


/*contents*/
.contents {
	margin: 0 0 80px;
}
.contents section {
	margin: 56px 0 0;
}
h2 {
	font-size: 166%;
	color: #fff;
	line-height: 1;
	background: #273539;
	padding: 10px 10px 10px 14px;
	font-weight: normal;
	margin: 0 0 18px;
}
.cx_smartphoneview h2 {
	font-size: 159%;
	line-height: 1.2;
	padding: 10px 5px 10px 10px;
}
.ph {
	margin: 16px 0 0;
}
.left, .right {
	float: left;
	width: 475px;
	height: 250px;
}
.right {
	float: right;
}
.cx_smartphoneview .left, .cx_smartphoneview .right {
	width: 49%;
	height: auto;
}
.cx_smartphoneview .left img, .cx_smartphoneview .right img {
	max-width: 100%;
	height: auto;
}
h3 {
	font-size: 144%;
	font-weight: normal;
	background: url(../img/icon_circle.png) no-repeat left 50%;
	padding: 0 0 0 28px;
	border-bottom: 1px solid #989898;
	margin: 0 0 18px;
}
h3 span {
	font-size: 84%;
	vertical-align: baseline;
}
.cx_smartphoneview h3 {
	font-size: 155%;
	line-height: 1.4;
	padding: 0 0 5px 28px;
	background-position: left 0.3em;
}


/*お届けする情報*/
.list li {
	font-size: 122%;
}
.cx_smartphoneview .list li {
	font-size: 145%;
}
.list li span {
	font-size: 80%;
	font-weight: bold;
	color: #fff;
	background: #3d474a;
	border-radius: 5px;
	vertical-align: middle;
	line-height: 1;
	padding: 3px 8px 2px;
	margin: 0 6px 0 0;	
}


/*ご利用方法*/
.case {
	margin: 16px 0;
}
.case dl {
	float: left;
	width: 475px;
	margin: 0 10px 0 0;
	box-sizing: border-box;
	background: #f1f1f1;
	padding: 20px;
	min-height: 216px;
}
.cx_smartphoneview .case dl {
	float: none;
	width: 100%;
	margin: 16px 0 0;
	min-height: 190px;
}
.case dl:last-child {
	margin: 0;
}
.cx_smartphoneview .case dl:last-child {
	margin: 16px 0 0;
}
.case dl dt {
	font-size: 111%;
	color: #1f4d63;
	line-height: 1.4;
	border-bottom: 2px dotted #6694a0;
	padding: 0 0 12px;
	margin: 0 0 14px;
}
.cx_smartphoneview .case dl dt {
	font-size: 145%;
}
.cx_smartphoneview .case dl dd {
	font-size: 135%;
}



/*利用例*/
.contents section.first {
	margin: 16px 0 0;
}
.talk .user {
	margin:20px 0;
}
.cx_smartphoneview .talk .user, .cx_smartphoneview .talk .alexa {
	width: 80%;
	line-height: 1.5;
}
.talk .alexa {
	float: right;
}

.talk .user:before, .talk .alexa:after {
	display: table-cell;
	content: "";
	width: 58px;
	height: 70px;
	background: url(../img/icon_user.png) no-repeat center 50%;
	background-size: 100%;
}
 .talk .alexa:after {
	background: url(../img/icon_alexa.png) no-repeat center 50%;
	background-size: 100%; 
}
.talk .user p {
	position: relative;
	left: 20px;
	display: table-cell;
	min-width: 345px;
	padding: 20px 24px;
	border-radius: 10px;
	background: #f1f1f1;
}
.talk .alexa p {
	position: relative;
	right: 20px;
	display: table-cell;
	min-width: 345px;
	padding: 20px 24px;
	border-radius: 10px;
	background: #e4f9ff;
}
.cx_smartphoneview .talk .user p, .cx_smartphoneview .talk .alexa p {
	padding: 20px 22px;
}
.talk .user p:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -26px;
 	margin-top: -10px;
	border: 12px solid transparent;
	border-right: 14px solid #f1f1f1;
}
.talk .alexa p:before {
	content: "";
	position: absolute;
	top: 50%;
	right: -26px;
 	margin-top: -10px;
	border: 12px solid transparent;
	border-left: 14px solid #e4f9ff;
}


/*ご利用にあたって*/
.center {
	margin: 16px 0 0;
}
.cx_smartphoneview .center img {
	max-width: 100%;
	height: auto;
}
.copy {
	font-size: 70%;
	color: #565656;
	text-align: center;
	margin: -40px 0 40px;
}
.cx_smartphoneview .copy {
	font-size: 90%;
}