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

.colx2 {
    width: 100%;
}

.colx3 {
    width: 100%;
}

.contents {
    padding: 0 50px;
	margin-bottom: 20px;
}
/*———————————–———————————–
　　ヘッダー構成
　　.navi_bar(w100%)
———————————–———————————–*/

.header,.header_container{
    height: 60px;
}

.header h1{
	display: table-cell;
	vertical-align: middle;
}
.navi_bar{
	padding:0 20px;
	position: fixed;
	top: 0;
	right: 0px;
	width: 100%;
	height: 60px;
	background-color: #fff;
	z-index: 20;
	display:inherit;
	max-width:inherit;
}

.navi_bar img{ width:100%; max-width:120px;}
.navigation li:nth-child(1){
	display: inherit;
}

/*———————————–———————————–
　　ナビスタイル
———————————–———————————–*/
.nav {
	color:fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 18;
	width: 100%;
	background-color: rgba(0, 0, 0, .9);
	opacity: 0;
	display: none;
	transition: opacity .3s;
}

.nav ul {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	-webkit-overflow-scrolling:touch;
	display:inherit;
	font-size: 0;
	padding:0 ;
}
.nav li:nth-child(1){margin-top: 60px;}/* ヘッダーの高さ分 */
.nav li {
	list-style: none;
	text-align: center;
	color: #fff;
	height:90px;
	display:flex;
	width: 100%;
	text-align: center;
}
.nav li a{
	color: #fff;
	width:100%;
}

.navigation li:hover a:after{
	bottom:0px;}

.navigation li a:hover:after{
	position: inherit;
}

/*———————————–———————————–
　　ハンバーガーボタン
———————————–———————————–*/
.toggle {
	top: 20px;
	right: 20px;
	width: 30px;/* ハンバーガー幅 */
	height: 22px;/* ハンバーガー高さ */
	border: none;
	z-index: 20;
	display: block;
	position: absolute;
}

.toggle span {
	position: absolute;
	width: 100%;/* 親要素（.toggle）に対して100%幅 */
	height: 2px;/* 線幅 */
	background-color: #999999;/* 線色 */
	border-radius: 4px;/* 線角丸 */
}
.toggle span{transition: all .2s;}/*速さ*/
.toggle span:nth-of-type(1) {	top: 0;}
.toggle span:nth-of-type(2) {	top: 10px;}
.toggle span:nth-of-type(3) {	bottom: 0px;}


/*———————————–———————————–
　　×ボタン（JSでクラス切り替え）
———————————–———————————–*/
.close{ position: absolute;}
.toggle.close span{transition: all .2s;}/*速さ*/
.toggle.close span:nth-of-type(1) {
	-webkit-transform: translateY(20px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
}
.toggle.close span:nth-of-type(2) {opacity: 0;}
.toggle.close span:nth-of-type(3) {
	-webkit-transform: translateY(-20px) rotate(45deg);
	transform: translateY(-10px) rotate(45deg);
}

/*———————————–———————————–
　　JSでクラス切り替え
———————————–———————————–*/

.open {
	opacity: 1;
	display: inherit;
	height: 100%;
}
.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
}

/*———————————–———————————–
　　コンテンツ編集
———————————–———————————–*/

.col_w1 {
    width: 50%;
}

.col {
    vertical-align: middle;
}
.row{ width:100%;}

.top_flow_icon .fs1{ position:inherit;}
.top_flow_icon span{ position:inherit}

#top_flow{}
#top_flow_row .top_flow_icon { width:10%; position:relative;}
#top_flow_row li:nth-child(2).col{width:auto; margin-left: 20px;}
#top_flow_row li:nth-child(3).col{width:100%; padding-bottom:30px;}


#top_service ul li {
    width: 100%;
	display:block;
}
#top_service ul li:nth-child(3n-1){
	margin:0;
}

#top_plan img {
    width: 100%;
    max-width: 92px;
}

#top_service .contents{
	padding: 0px;
	padding-bottom: 0px;
	margin-bottom: 20px;
	max-width: 380px;
	margin: auto;
	display: table;
	padding-bottom: 40px;
}

/*———————————–———————————–
　　サービス
———————————–———————————–*/
#system_div_link .wrapper_box_m{ padding:0;}


/*———————————–———————————–
　　プラン
———————————–———————————–*/

#plan_head{
	max-width: 500px;
padding: 20px;
}


#plan_select img{
width: 100px;
}

#plan_select > ol{
	padding-bottom:0;
}


#plan_head h1 img{
	width:100%;
}

.cash_back li:first-child {
    display: table;
	width:100%;
}
.cash_back h4{
	padding:0;
	position:inherit;
	text-align:center;
	width:inherit;
	right:inherit;
}
.cash_back h4 img{
	display:none;
}

/*3本柱*/


.plan_vision img {
    width: 100%;
    max-width: 186.5px;
}


#plan_about {
    background-position: right -400px top;
	background-repeat:no-repeat;
}

/*オプション*/

.plan_op_icon .fs1{ position:inherit;}
.plan_op_icon span{ position:inherit}

#plan_op{}
#plan_op_row .plan_op_icon { width:10%; position:relative; margin-right: 10px;}
#plan_op_row li:nth-child(2).col{width:auto; margin-left: 20px;}
#plan_op_row li:nth-child(3).col{width:100%; padding-bottom:30px;}

#plan_op_row{
	padding: 0 20px;
}


/*———————————–———————————–
　　新着情報
———————————–———————————–*/

.news_time {
    width: 100%;
}
.news_topic {
    width: 100%;
}

/*———————————–———————————–
　　下層　共通
———————————–———————————–*/

.eye_catch .mdl_cell {
    text-align: center;
    font-size: 18px;
    font-weight: 100;
    padding-top: 20px;
    padding-bottom: 20px;
}
/*———————————–———————————–
　　Flow　制作の流れ
———————————–———————————–*/
#flow li div.list_h{ font-size:16px;}
#flow ol li.list_num::before { font-size:24px; line-height:28px;}

/*———————————–———————————–
　　フッター
———————————–———————————–*/


.ft_logo,.ft_com{ position:inherit; text-align:center;padding-top: 20px;}
.ft_menu{ position: inherit; margin:auto}
.ft_policy{ position: inherit;margin:auto;padding-top: 30px;}
.ft_policy li{ text-align:center;}
.ft_info_btn { display:none;}
.ft_logo img{ max-width:216px;}

.btn_ft_info{ display:none;}
.copy{ text-align:center; bottom:50px;}
#pageTop_pc{width: 100%; height:50px; margin-bottom:0; border-radius:0; right:0;}
.footer_contents {
    height: 330px;
}
/*———————————–———————————–
　　お問い合わせ
———————————–———————————–*/
.form_box_w{ width:100%; display:block;}
table.formTable td, table.formTable th{ display:block; width:100%;padding: 0;}
table.formTable th{ padding-top:10px;}
#form_check table.formTable th{
	display: block;
	padding:5px;
	width: 100%;
}
#form_check table.formTable th{border-right:0;}
#form_check table.formTable td{ padding:5px;}