@charset "utf-8";
/* CSS Document */

/* --------------------

リセット

-------------------- */
*{margin:0;padding:0;}
*,*:before,*:after{box-sizing:border-box;}
a{text-decoration:none;color:#111;}
li{list-style-type:none;}
.cf:before,.cf:after{content:"";display:table;}.cf:after{clear:both;}.cf{zoom:1;}

body,button,input,select,textarea,h1,h2,h3,h4,h5,h6{
font-family:'ヒラギノ角ゴ W3 JIS2004', 'Hiragino Kaku Gothic W3 JIS2004', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 游ゴシック体, 'Yu Gothic', YuGothic, メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
color:#111;
font-size:16px;
line-height:1.4;
word-break:break-all;
}

/* ------------------------------

基本

------------------------------ */
.red{color: #FF0000;font-weight:bold;}
.pink{color:#FF9999;font-weight:bold;}
.yellow{color:#e2ff21;font-weight:bold;}
.bold{font-weight:bold;}
.mark{background:linear-gradient(transparent 60%, #ffff66 60%);font-weight:bold;}
.center{text-align:center;}
.under_link{
	text-decoration:underline;
	color: #0B60ED;
    font-weight: bold;
}
.small_text{font-size:12px;}

/*PC・タブレット*/
@media (min-width:768px){
a img:hover{opacity:0.7;}
.sp_only{display:none !important;}
.container{
	width:80%;
	max-width:1000px;
	margin:0 auto;
	padding:100px 0;
}
/*#header .container{padding:50px 0 20px 0;}*/
.under_link:hover{text-decoration:none;}
}

/*スマホ*/
@media screen and (max-width:767px){
.pc_only{display:none !important;}
.container{padding:50px 20px;}
}

/* ------------------------------

見出し

------------------------------ */
.h1,.h2,.h3{line-height:1.2;}

.h1{/*position:absolute; */color:#fff;}
.h1 span{font-weight:normal;margin-left:5px;}

.h2{
	margin-bottom:30px;
	text-align:center;
}

.h2e{
	font-size: 14px;
	font-weight:bold;
    margin-top: 10px;
	color:#00a3d9;
}

/*見出しの上のひと言*/
.catch{
	display:inline-block;
	margin-bottom:20px;
	padding:10px 20px;
	background-color:#000;
	color:#fff;
	border-radius:100px;
	font-weight:bold;
	
}

.ribbon{
    display: inline-block;
    position: relative;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
	margin-bottom: 20px;
    padding: 0 30px;
    background:#FF9999;
    color: #FFF;
	font-weight:bold;
    box-sizing: border-box;
}

.ribbon:before,
.ribbon:after{
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
}

.ribbon:before{
    top: 0;
    left: 0;
    border-width: 20px 0px 20px 15px;
    border-color: transparent transparent transparent #fff;
    border-style: solid;
}

.ribbon:after{
    top: 0;
    right: 0;
    border-width: 20px 15px 20px 0px;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
}

/*チェックマークの見出し*/
.h_check{
	position:relative;
	margin-bottom:15px;
	padding-left:35px;
	font-size:20px !important;
	font-weight: bold;
	line-height:1;
	background: url(../images/check.png) left center / auto 20px no-repeat;
}

/*PC・タブレット*/
@media (min-width:768px){
.h1{
	/*left:60px;*/
	font-size:24px;
}
.h2{font-size:40px;}
.h2 .big{font-size:70px;color:#00a3d9;}
.h3{font-size:30px;}
}

/*スマホ*/
@media screen and (max-width:767px){
.h1{
	top:20px;
	left:20px;
	font-size:20px;
}
.h2{font-size:30px;}
.h3{font-size:24px;}
}

/* ------------------------------

ヘッダー

------------------------------ */
.header_navarea{
	position:relative;
	width: 100%;
	/*height:60px;*/
	padding:20px 30px;
	background:linear-gradient(-45deg,rgba(72,111,208,.8),rgba(0,200,222,.8));
}

.header_navarea .h1{
/*
	position:absolute;
	top:50%;
	margin-top:-15px;
*/
}

.header_navarea .h1 a{color:#fff;}

.pc_menu{
	position:absolute;
	top:50%;
	right:30px;
	margin-top:-15px;
}

.pc_menu li{
	position:relative;
	display:inline-block;
	padding:5px;
	margin-left:1em;
	font-size:14px !important;
	font-weight:bold;
	color:#fff;
}

.pc_menu li:before{
    content: '／';
    position: absolute;
	left:-1em;
}

.pc_menu li:first-child:before{
	display:none;
}

.pc_menu li a{color:#fff;}
.pc_menu li:hover a{opacity:0.7;}

@media screen and (max-width:920px){
.pc_menu{
	position: static;
	margin: 10px 0 0 0;
}
}

/* --------------------

プレミアムへのリンク

-------------------- */
.to_premium{
	background:#111;
}

.to_premium a{
	padding:20px;
	display:block;
	color:#fff;
	font-size:24px;
	text-align:center;
}

.to_premium_under{
	text-decoration:underline;
	font-weight:bold;
}

@media (min-width:768px){
	.to_premium a:hover{opacity:0.7;}
	
	.to_premium a > span{
		display:inline-block;
		position:relative;
		padding-left:1em;
	}
	
	.to_premium a > span:before{
		display: block;
		content: '';
		position: absolute;
		top:0.5em;
		left:0;
		width:8px;
		height:8px;
		border-right:2px solid #fff;
		border-bottom:2px solid #fff;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	
	.to_premium_under{margin-left:0.5em;}
	.to_premium_under:hover{text-decoration:none;}
}

@media screen and (max-width:920px){
	.to_premium a{
		font-size: 18px;
	}
}

/* --------------------

フッター

-------------------- */
#footer{
	border-top:1px solid #ccc;
	font-size:12px;
	text-align: justify;
	text-justify: inter-ideograph;
}

#footer .container{
	padding:50px 0;
}

#footer ul li{margin-bottom:10px;}

#footer ul li:first-child p{
	display:inline-block;
	padding:5px 10px;
	border-radius:100px;
	border:1px solid #999;
}

#footer ul li:nth-child(2){
	font-size:20px;
	font-weight:bold;
}

#footer a{text-decoration:underline;}

.footer_tablecell img{
	max-width:100%;
	margin-bottom:10px;
}

/*ページトップに戻るボタン*/
#fixed {
    position:fixed;
    bottom:10px;
    right:10px;
}

#fixed a{
	display:block;
	text-align:center;
	line-height: 1;
    margin-top:10px;
}

/*PC・タブレット*/
@media (min-width:768px){
#footer a:hover{text-decoration:none;}

.footer_tablecell{
	display:table;
	width:100%;
	table-layout:fixed;
	border-collapse: separate;
	border-spacing:0;
}

.footer_tablecell ul,
.footer_tablecell div{
	display:table-cell;
}

.footer_tablecell ul{
	vertical-align:top;
}

.footer_tablecell div{
	vertical-align:bottom;
	text-align:right;
	padding-left:20px;
}

.footer_tablecell img{width:320px;}

}

/*スマホ*/
@media screen and (max-width:767px){
#footer .container{padding: 50px 20px;}
.footer_tablecell img{margin-top:20px;}
}

/* ------------------------------

テーブルセル

------------------------------ */
/*PC・タブレット*/
@media (min-width:768px){
ul.tablecell{
	display:table;
	width:100%;
	table-layout:fixed;
	border-collapse:collapse;
	border-collapse: separate;
	border-spacing:20px 0;
}

ul.tablecell > li{
	display:table-cell;
	vertical-align:middle;
}
}

/*スマホ*/
@media screen and (max-width:767px){
ul.tablecell > li{margin-bottom:20px;}
ul.tablecell > li:last-child{margin-bottom:0;}
}

/* ------------------------------

ボタン

------------------------------ */
.btn{
	position:relative;
	padding:15px 20px 15px 50px;
	background-color:#000;
	border:1px solid #000;
	border-radius:3px;
	color:#fff;
	font-size:20px;
	text-align:center;
	line-height:1;
}

/*矢印*/
.btn:before{
	display: block;
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -4px;
    left: 20px;
    width: 8px;
    height:8px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/*PC・タブレット*/
@media (min-width:768px){
.btn{
	display:inline-block;
	transition: all 0.3s;
}

.btn:hover{
	background:rgba(255,255,255,0);
	border:1px solid #fff;
	color:#fff;
}

.btn:hover:before{
	border-right: 1px solid #111;
    border-bottom: 1px solid #111;
}
}

/*スマホ*/
@media screen and (max-width:767px){
.btn{display:block;}
}

/*----------

btn1～2（黒いボタン・灰色のボタン）

----------*/
.btn1{
	background-color:#000;
	border:1px solid #000;
}

.btn2{
	background-color:#ccc;
	border:1px solid #ccc;
}

/*PC・タブレット*/
@media (min-width:768px){
.btn1:hover,
.btn2:hover{
	background-color:#fff;
	border:1px solid #000;
	color:#000 !important;
}
}

/*スマホ*/
@media screen and (max-width:767px){
.btn1,
.btn2{
	display:block;
	width:100%;
}
}

/*----------

btn3（青いボタン）

----------*/
.btn3{
	margin-top:20px;
	background: #00CCCC !important;
	border:0 !important;
	box-shadow: 0 6px #009B9B;
	top: 0;
	transition: .2s box-shadow,.2s top,.4s background;
	font-weight:bold;
}

.btn3:hover {
	box-shadow: 0 5px #009B9B;
	top: 1px;
}

.btn3:hover:before{
	border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.btn3:active {
	background-color: #00CCCC;
	box-shadow: 0 0 #009B9B;
	top: 6px;
}

/*資料請求*/
.to_contact{
	margin-top:80px;
	text-align:center;
}

.to_contact p{
	font-weight:bold;
	font-size:16px !important;
}

.to_contact .btn1{margin-top:20px;}

/*----------

go_trial_btn（トライアル申込ページへ進むボタン）

----------*/
.go_trial_btn{margin-top:50px !important;}

/*PC・タブレット*/
@media (min-width:768px){
.go_trial_btn{
	width:60%;
	padding:20px 10px !important;
	font-size:30px;
}
}

/* ------------------------------

ハンバーガーボタン

------------------------------ */
.menu{margin-top:60px;}
.menu li a{
	display:block;
	padding:10px;
}

/*先頭に「>」が付くリスト*/
ul.arrow li a{
	position: relative;
	padding-left:40px;
}

ul.arrow li a:before{
	display: block;
	content: '';
	position: absolute;
	top:50%;
	margin-top:-4px;
	left:20px;
	width: 6px;
	height: 6px;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* ------------------------------

フェードイン

------------------------------ */
/*▼スクロールでフェードイン（js使用）*/
/* 画面外にいる状態 */
.fadein{
	opacity:0.1;
	transform:translate(0, 50px);
	transition:all 1000ms;
}

/* 画面内に入った状態 */
.fadein.scrollin {
	opacity:1;
	transform:translate(0, 0);
}

/*▼右から出てくる*/
@keyframes slidein{
	from{right:-100px;}
	to{right:0;}
}

/*PC・タブレット*/
@media (min-width:768px){
/*▼メイン画像内のフェードイン*/
/*
.item {opacity: 0;}
.item1{animation: example 0.5s ease 0.5s 1 forwards;}
.item2{animation: example 0.5s ease 1s 1 forwards;}
.item3{animation: example 0.5s ease 1.5s 1 forwards;}
.item4{animation: example 0.5s ease 2s 1 forwards;}
.item5{animation: example 0.5s ease 2.5s 1 forwards;}
.item6{animation: example 0.5s ease 3s 1 forwards;}
@keyframes example{100%{opacity: 1;}}
*/
}

/* ------------------------------

プランごと申込フォームへのボタン

------------------------------ */
.offer_table{
	margin-top:40px;
	text-align:center;
}

.offer_table li{
	border:1px solid #ddd;
	border-radius:3px;
}

.offer_table_title{
	font-size:16px;
	padding:10px;
	color:#fff;
	font-weight:bold;
	border-radius: 3px 3px 0 0;
}

.offer_table li:first-child .offer_table_title{background-color:#00c6db;}
.offer_table li:last-child .offer_table_title{background-color:#3974cf;}

.offer_table div{
	padding:30px 20px;
}

.offer_table div p{
	margin-bottom:20px;
	font-size:16px;
}

/* --------------------

コピペ用

-------------------- */
/*PC・タブレット*/
@media (min-width:768px){
}

/*スマホ*/
@media screen and (max-width:767px){
}

.form_btn .btn2 + div {
	position: absolute;
	top: 0;
	width: 100%;
}

.form_btn {
	position: relative;
}