@charset "UTF-8";

/**LOGOSWARE CSS*****************
suite.css
Version: 2
2016/12/22
---------------------------------------------
1.eLearning SUITE用指定（兼汎用）
-1 SUITE及びoption固有指定
---------------------------------------------
2.suiteサイト内共通指定
-1.位置指定：globalメニュー項目幅指定等
-2.お客さまの声トップ色指定
-3.背景画像指定（汎用。製品は各CSSで上書き）
-4.複数製品用特殊指定
---------------------------------------------
3.その他サイト共通クラス
-1.選ばれる理由（FLIPPER/STORM）
-2.SUITE UPLOADER BOX
-3.製品・サービストップ
**************************************/

/* =========================================================
0.色指定汎用サーバー製品用
プランごとの色指定（サーバー製品サイトのみ適用）
========================================================= */

.colorS{color:#A8C57C!important;;}
.bgS{background-color: #e4edd6!important;}

.colorM{color: #87B4AE!important;}
.bgM{background-color: #dde9e8!important;}

.colorL{color: #E9B1AB!important;}
.bgL{background-color: #fae0e0!important;}


:root {
	--product-color: #7570A3;
	--product-color2: #f3d4bc;
	--product-paleColor:#faefe6;
	--dimgray:#696969;
	--darkgray:#a9a9a9;
	--lightgray:#d3d3d3;
	--whitesmoke:#f5f5f5;
}

.darkgray{color:var(--darkgray)!important;}
.dimgray{color:var(--dimgray)!important;}
.lightgray{color: var(--lightgray)!important;}


/* =========================================================
1.eLearning SUITE用色指定★マークつきは設定必須
========================================================= */

/***************************************************************
★A：プロダクトカラー指定箇所
・重要メニューの枠色、 ボタンベースカラー等
プロダクトカラー：suite#7570A3;
***************************************************************/

/*重要メニュー枠
------------------------------------------------------------*/
#sideMenu .VIB,#sideMenu .voiceBtn a{
border-color: #7570A3;
}

/*ボタンベースの色他
------------------------------------------------------------*/
.btnBase,.bg_p_color,#page .mod-merit h3:first-letter,.mod-numH:first-letter,
.voiceEntryTitle h2 .tag02 a,.voiceList h3 .tag01 a,#subMenu ul.menu li.userMenu > a,#page h3.planTitle:first-letter, #main .voiceSingle .userInfoArea p .label{
background-color: #7570A3;
}

/*文字色プロダクトカラー適用クラス／汎用：p_color
------------------------------------------------------------*/
#headerNavi a:hover, #gMenu a:hover, #pankuzu a:hover, .catName,
.p_color, .voiceList h3 a, #voiceLead h4,/*#page h3,*/#main #page table.movieList h5,#page .sampleArea h5:first-letter,.voiceSingle .interview h5{
color:#7570A3;
}

/*複合サイトのみ：文字色をあえて#333にするもの
------------------------------------------------------------*/
#main .voiceList h3 a,#voiceLead h4{
	color:#333;
}

#sideMenu h4.tag03{
	background-color: #7570a3;
}

/***************************************************************
★B：プロダクトカラー薄め
・メニューのカレント、メニューのhover（カレントと同色でも良い？）
・bg_p_color2：背景にプロダクトカラーをを使うには濃すぎる場合に利用
***************************************************************/

/*current：薄め1*/
#subMenu ul.menu li.current_page_item > a,
#subMenu ul.menu li ul li.current_page_item > a,
#main .entryList h3 .categoryLink a:hover{
	background-color:#dddce9;
}

/*hover指定：薄め2 currentよりちょい薄め
 矢印が白なので、あまり薄すぎない方がいいかも
------------------------------------------------------------*/
#subMenu li a:hover,
#subMenu li.current_page_item ul li a:hover/*親がカレント*/{
	background-color:#efefef;
	}

/*さらに薄い色 hover色と同じでも良いかも
------------------------------------------------------------*/
.bg_p_color2,#main .table-colorLeftTH tbody>tr>th,.table-colorLeftTH thead>tr>th:first-child{
	background-color: #f2f1f9;
}

/*suiteの場合色はグレー統一でいいような*/
/*#main .table-colorLeftTH tbody>tr>th,.table-colorLeftTH thead>tr>th:first-child{
	background-color: #efefef;
}*/

/*背景にプロダクトカラーが使いづらいときはグレー*/
.bg_ef3{
	background-color:#efefef;
}

/***************************************************************
C：その他色指定（任意指定）
・重要メニューhover指定
・ボタンベースのhover指定
・テーブルhover指定
・em（赤字）
***************************************************************/

/*重要メニューhover：デフォは黄色 上書きしたい場合は指定
------------------------------------------------------------*/
/*#sideMenu div.VIB a:hover {}

/*ベースボタンhover：デフォルトは赤。libraのみ変更
------------------------------------------------------------*/
/*.btnBase:hover{}

/*テーブルhover：上書きしたい場合は指定
------------------------------------------------------------*/
/*.mod-tableBase tr:hover{}*/


/*赤字
***************************************************************/
em{
	color:#D83300;
	font-weight: normal;
}

/***************************************************************
1-1.suite/option ３階層があるので調整
***************************************************************/
#menu-option-solution li{
	border-bottom: 1px solid #ccc;
}

#sideMenu #menu-option-solution .sub-menu li{
	border-bottom:none;
}

#sideMenu #menu-option-solution.menu li ul.sub-menu {
	border-bottom: none;
}

/* =========================================================
2.サイト内共通指定
========================================================= */

/***************************************************************
A.位置指定
***************************************************************/

/*★サイトタイトルのdiscription位置指定
-----------------------------------------------------------*/
#header h1{
	left:55px;
	top:47px;
}

/****************************
 グローバルメニュー
****************************/

/*サイズ調整*/
#gMenu li.suite a{width:170px;}
#gMenu li.flipper a{width:130px;}
#gMenu li.storm a{width:120px;}
#gMenu li.option-solution a{width:135px;}
#gMenu li.assist a{width:100px;}
#gMenu li#voice a{width:90px;}

/*color*/
#gMenu li.home a:hover,
#gMenu li.suite a:hover,
#gMenu li.option-solution a:hover{ color:#7570A3;}
#gMenu li.flipper a:hover{ color:#D9752B;}
#gMenu li.storm a:hover{ color:#E7CF00;}
#gMenu li.thinq a:hover{ color:#2EA8C6;}

#gMenu li.current-page-ancestor .title,
#gMenu li.current-menu-item .title{
	font-weight:bold;
	}

#gMenu li.suite span.title,
#gMenu li.flipper span.title,
#gMenu li.storm span.title,
#gMenu li.thinq span.title{
	background-repeat:no-repeat;
	background-position:left center;
	padding-left:15px;
	font-size:1.1em;
	}

#gMenu li.flipper ul li span.title{
	font-size:0.9em !important;/*FLU*/
	}

#gMenu li.suite span.title{background-image:url(../images/icon_gmenu_suite.png);}
#gMenu li.flipper span.title{background-image:url(../images/icon_gmenu_flipper.png);}
#gMenu li.storm span.title{background-image:url(../images/icon_gmenu_storm.png);}
#gMenu li.thinq span.title{background-image:url(../images/icon_gmenu_thinq.png);}

#gMenu li.option-solution{line-height: 1.3;}

/*★トップページヘッダ画像用位置指定
------------------------------------------------------------*/

#subHeader, #solutionTop_header{
	height:370px;
	}

div#topHeader h2 img{
	margin-top:0;
}

/***************************************************************
B.お客さまの声トップの製品色指定
***************************************************************/
#main .voiceList h3 a.suite{background-color:  #7570A3;}
#main .voiceList h3 a.flipper-maker{background-color: #D9752B;}
#main .voiceList h3 a.storm-maker{background-color: #E7CF00;}
#main .voiceList h3 a.thinq-maker{background-color: #2EA8C6;}


/***************************************************************
C.ヘッダ背景画像
***************************************************************/
body{
	background-image: url(../images/baseBG_suite.png);
}

/***************************************************************
D.複数製品用特殊指定
***************************************************************/

/*声：製品トップにもどるボタン。使わないかも*/
.VIB li.toProductTop{
	font-size: 1.3em;
}

/* =========================================================
3.その他サイト固有クラス
========================================================= */

/** 1.選ばれる理由**************************************************/

/*************************
トップ
**************************/

#page #reasonImg{
	position:relative;
	width:694px;
	height:287px;
	margin-bottom:20px;
	background:url(../images/reasonImg.png) no-repeat 0 0;
}

#page #s_reasonImg{
	position:relative;
	width:694px;
	height:287px;
	margin-bottom:20px;
	background:url(../images/s_reasonImg.png) no-repeat 0 0;
}
#page #t_reasonImg{
	position:relative;
	width:694px;
	height:287px;
	margin-bottom:20px;
	background:url(../images/t_reasonImg.png) no-repeat 0 0;
}


#page #reasonImg p,
#page #s_reasonImg p,
#page #t_reasonImg p{
	position:absolute;
	top:156px;
	left:386px;
	width:256px;
	color:#46606A;
}


/*2.SUITE UPLOADER BOX***************************/

div.suBox{
	margin:0 0 30px;
	padding:15px 15px 20px;
	width:640px;
	border:1px solid #ccc;
	/* IE10 */
	background-image: -ms-linear-gradient(bottom, #FFFFFF 50%, #EDEDED 100%);

	/* Mozilla Firefox */
	background-image: -moz-linear-gradient(bottom, #FFFFFF 50%, #EDEDED 100%);

	/* Opera */
	background-image: -o-linear-gradient(bottom, #FFFFFF 50%, #EDEDED 100%);

	/* Webkit (Safari/Chrome 10) */
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, #FFFFFF), color-stop(1, #EDEDED));

	/* Webkit (Chrome 11+) */
	background-image: -webkit-linear-gradient(bottom, #FFFFFF 50%, #EDEDED 100%);

	/* Proposed W3C Markup */
	background-image: linear-gradient(bottom, #FFFFFF 50%, #EDEDED 100%);
	box-shadow:0 0 2px 2px rgba(204,204,204,0.5);
}

div.suBox div.suLeftBox{
	width:350px;
	float:left;
	margin-left:5px;
}

div#main #page div.suBox div.suLeftBox h5{
	margin-top:0;
	width:338px;
	height:71px;
	text-indent:-9999px;
	background:url(../images/suBoxTitle.png) no-repeat 0 0;
}

div#main #page div.suBox div.suLeftBox p{
	font-size:1.2em;
	margin-bottom:0;
}

div#main #page div.suBox div.suRightBox{
	float: left;
}

div#main #page div.suBox div.suRightBox p{
	margin-bottom:3px;
	color:#21779c;
	font-weight:bold;
	font-size:14px;
}

div#main #page div.suBox div.suRightBox iframe{
	border:1px solid #ccc;
}


/** 3.製品・サービストップ**************************************************/

body#suite.solutionTop {
	background-image: url(../images/baseBG_suite_top.png);
}

/*color.cssからこっちに移動*/
body#online-storage, body#option-solution{
	background-image: url(../images/baseBG_option-solution.png);
}

body#option-solution.solutionTop {
	background-image: url(../images/baseBG_option-solution_top.png);
}

/**オブション＆制作代行トップヘッダ***************************/
#solutionTop_header section.headerTitle{margin-top: 72px;}
#solutionTop_header .headerTitle h1{
	font-weight: normal;
	font-size:38px;
}

#solutionTop_header .headerTitle h2.copy_text{
	font-weight: normal;
	font-size: 14px;
	line-height: 1.8;
	width: 380px;
}

#option-solution h2.cat{
	font-size: 32px;
	padding-bottom: 20px;
	position: relative;
	font-weight: normal
}

h2.cat:before{
	content:'';
	width: 50px;
	height: 4px;
	background-color: #7084A3;
	display: block;
	position: absolute;
	bottom: -5px;

}

h2#seisaku.cat:before{
	background-color: #70A396;
}

/*お客さまリスト**********/

div.customerList{
	position:relative;
}

dl.cList{
	position:absolute;
	top:10px;
	left:145px;
	width:550px;
	font-size:1.2em;
}

dl.cList dt{
	clear:left;
	float:left;
  	margin: 0 0 0.5em;
	width:7.5em;
	font-weight:bold;
}

dl.cList dd{
	display:block;
  	margin-bottom: 0.5em;
  	margin-left: 8em;
}
/*機能的×サポート×価格欄************/

#main #page h3.concept{
	padding:0.4em 0  0.4em 2px;
	margin-bottom:24px;
	margin-top:10px;
	background:none;
	border-top:2px solid #000;
	font-size:28px;
	font-weight:normal;
}

div.bi {
	margin-top:20px;
	padding:30px 0 0 0;
	width:700px;
	height:200px;
	background:url(../images/f3m_bi_bg.png) no-repeat 100% 0px;
}

/*サポート*/

#main #page .supportSp h4 {
	margin-bottom:10px;
	padding-bottom:0;
	font-size:1.7em;
}

#main #page .supportSp h5 {
	margin:0 0 0 0;
	color:#333;
	font-size:1.3em;
}

#main #page .supportSp p{
	font-size:1.2em;
}

/*メリット3*/

.f3mMerit03{
	background:url(../images/f3mMerit3Img.png) no-repeat 0 0;
	margin-bottom:0;
}
.f3mMerit03 p{
	width:390px;
}

#main #page .exLink a{
	padding:0.25em 0.5em;
	margin-left:1em;
	background-color:#D9752B;
	color:#fff;
	font-size:0.9em;
	font-weight:normal;
	text-decoration:none;
}

#main #page .exLink a:hover{
	background-color:#f00;
}

/*css3 Button****************/

#main #page a.linkBtnCSS {
	font-size: 13px;
	font-weight:bold;
	color: #ffffff;
	padding: 7px 10px;
	background: -moz-linear-gradient(
		top,
		#a3a3a3 0%,
		#3b3b3b 50%,
		#242424 50%,
		#000000);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#a3a3a3),
		color-stop(0.50, #3b3b3b),
		color-stop(0.50, #242424),
		to(#000000));
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #000000;
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.6);	
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.6);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.6);
	text-shadow:
		0px -1px 0px rgba(000,000,000,1),
		0px 1px 0px rgba(255,255,255,0.2);
	text-decoration:none;
	background-color:#000;
}

#main #page a.linkBtnCSS:hover{
	color:#fff98c;
}


/**********************************************
比較
**********************************************/

#main table.sq_list{
	float:left;
	width:330px;
	margin-left:15px;
}


#main table.sq_list th{
	background-color:#ffc6b3;
}

#main table.doc_list li,#main table.sq_list li{
	margin-left:0;
}

/**********************************************
50冊まで無料
**********************************************/

#main #freeBox{
padding:1em;
border:1px dotted #999;
background:url(//suite.logosware.com/wp-content/uploads/50freeBG.jpg) no-repeat 98% 10px;
}
/*機能詳細
*****************************/

.functionMenu {
	background-color:#e8f3f7;
	padding:13px 5px 8px 7px;
}

#main #page .functionMenu p{
	margin:0;
	line-height:0;
}

#main #page h3{
	vertical-align:top;
}

/*h3アイコンつき*/
#main #page h3 img{
	padding:0;
	margin:-5px 5px 0 0;
}

/*かっこつきサブタイトル*/
#main #page p.kko{
	margin:0 0 0.8em;
	padding:0.25em 0 0.2em -0.5em;
	font-size:26px;
	border-bottom:1px dotted #999;
}

/*テキストボックス。状況によってはh4を入れたり出したり*/
#main #page div.rtBox{
	float:left;
	margin-right:6px;
}

#main #page div.rtBox p{
	margin-right:0;
}

#main #page div.rtBox h4{
margin-top:0;
}
/*画像*/
#main #page .fdImg{
	float:right;
	margin:0;
}


/**********************************************
FLUページのF3Mへのメニュー
**********************************************/

#subMenu ul.menu li.tof3m{
margin:0;
padding:0;
line-height:1;
border-bottom:none;
}

#subMenu ul.menu li.tof3m a{
width:200px;
height:52px;
padding:0;
border:none;
background:url(../images/f3mbtn.png) no-repeat 0 0;
text-indent:-9999px;
}

#subMenu ul.menu li.tof3m a:hover{
background:url(../images/f3mbtn_on.png) no-repeat 0 0;
}


/**********************************************
FL ST TH トップ共通
**********************************************/
/* コンテンツの説明部分 */
.solutionTop #main #page .aboutContents{
	padding: 34px 27px 20px;
	width: 626px;
/* 色指定は各製品ごと */
}

.solutionTop #main #page .aboutContents h3{
	border:none;
	margin: 7px 0 20px 0;
	padding: 0;
	background: none;
}

.solutionTop #main #page .aboutContents .sample{
	margin-top: 15px;
	width: 200px;
	float: left;
}

.solutionTop #main #page .aboutContents .con01,
.solutionTop #main #page .aboutContents .con02{
	margin-right: 13px;
}


/* サンプルを見るボタン
----------------------------*/
.solutionTop #main .aboutContents a.btnBase{
	width: 200px;
	padding-left: 0;
	background-image: none;
}

/*ボタンhover色。赤
----------------------------*/
.btnBase:hover{
	background-color: #D83300;
}

.bg_color_b {
	background-color: #999;
}


/* トップページのh3は画像見出し */
.solutionTop #main #page h3{
	border:none;
	margin: 0;
	padding: 65px 0 30px;
	background: none;
}


/* 機能詳細のカテゴライズメニュー
----------------------------*/
#main #page .func_menu{
	background: #E8F3F7;
	margin-bottom: 30px;
	padding: 16px 10px 13px;
}

#main #page .func_menu p.menuBtn{
	float:left;
	margin: 0 3px 0 0;

}

/* 機能タイトル横のオプション表示 */
#main #page h5 img.optionLabel{
	margin: 1px 0 0 10px;
}


/**********************************************
FLIPPER
**********************************************/
#flipper-maker #main #page .aboutContents{
	margin-top:40px;
	background: #F4FDF9; /* Old browsers */
	background: -moz-linear-gradient(top,  #F4FDF9 0%, #E9FBF4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4FDF9), color-stop(100%,#E9FBF4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #F4FDF9 0%,#E9FBF4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #F4FDF9 0%,#E9FBF4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #F4FDF9 0%,#E9FBF4 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #F4FDF9 0%,#E9FBF4 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F4FDF9', endColorstr='#E9FBF4',GradientType=0 ); /* IE6-9 */
}

/**********************************************
STORM
**********************************************/
#main #page .aboutContents{
	margin-top:40px;
	background: #f6fdfe; /* Old browsers */
	background: -moz-linear-gradient(top,  #f6fdfe 0%, #e5fbfd 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6fdfe), color-stop(100%,#e5fbfd)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f6fdfe 0%,#e5fbfd 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f6fdfe 0%,#e5fbfd 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f6fdfe 0%,#e5fbfd 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f6fdfe 0%,#e5fbfd 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6fdfe', endColorstr='#e5fbfd',GradientType=0 ); /* IE6-9 */
}

/**********************************************
THiNQ
**********************************************/
#thinq-maker #main #page .aboutContents{
	margin-top:40px;
	background: #FEFCFD; /* Old browsers */
	background: -moz-linear-gradient(top,  #FEFCFD 0%, #F9EAF3 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FEFCFD), color-stop(100%,#F9EAF3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #FEFCFD 0%,#F9EAF3 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #FEFCFD 0%,#F9EAF3 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #FEFCFD 0%,#F9EAF3 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #FEFCFD 0%,#F9EAF3 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FEFCFD', endColorstr='#F9EAF3',GradientType=0 ); /* IE6-9 */
}

/***************************************************************
オンラインストレージ
***************************************************************/

#main #page  .mod-merit{
	margin-bottom: 50px;
}

#main #page .mod-merit h3{
	background-color: #fff;
	background-image: none;
	border: none;
	margin-top: 50px;
	margin-bottom: 30px;
	padding: 0.8em 0;
	border-top: 2px solid #333;
	border-bottom: 1px solid #333;
	font-size: 2.4em;
	font-weight: bold;
	line-height: 1;
	color:#8b87b1;
}

#page .mod-merit h3:first-letter{
	margin-right: 0.5em;
	padding: 0.1em 8px;
	color:#fff;
	font-size: 0.9em;
}

#page .mod-merit .cap{
	font-size: 0.6em;
	font-weight: normal;
	margin-left:45px ;
}

#main #page .mod-merit h3:first-letter{
background-color: #8b87b1;
}

#main #page h3.ncs{
padding-left:0;
background-color: #fff;
background-image: none;
border: none;
color:#8b87b1;
font-size:2.8em;
}

/***************************************************************
スキン 3製品で共用？（サンプルとかぶってるので注意）
***************************************************************/
/* Skin page (tab design) by Noro
***************/
#main #page .skinPage #TabNav{
	margin-top: 15px;
}

/* tab navigation */
#main #page .skinPage #TabNav ul { list-style: none; }
#main #page .skinPage #TabNav .nav { overflow: hidden; margin: 0 ; }
#main #page .skinPage #TabNav .nav li { float: left; margin: 0 10px 0 0; }
#main #page .skinPage #TabNav .nav li.last { margin-right: 0; }

.skinPage #TabNav .nav li a{
	display: block;
	padding: 8px 15px;
/*	width: 130px; */
	height:35px;
    background-color: #CCC;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 3px 0 0;
    box-shadow: 2px 0 2px rgba(0,0,0,0.3), -2px 0 2px rgba(0,0,0,0.3);
   }

.skinPage #TabNav .nav li a:hover { background: #DDD;}
.skinPage #TabNav .nav li a.current{
	background-color: #EFEFEF;
}

/* contents *********/
#main #page .skinPage #TabNav .content{
	padding:15px;
    background: #EFEFEF;
	box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.3), 2px 2px 2px rgba(0,0,0,0.3);
    border-radius: 0 3px 3px 3px;
   }

#main #page .skinPage #TabNav .content p {
    font-size: 1.3em;
    text-align: left;
    color: #333;
}

#main #page .skinPage #TabNav .content h4{
	background:#333;
    color: #FFF;
    margin:10px 0;
    padding: 5px;
    font-size: 1.25em;
}

#main #page .skinPage #TabNav .content .skin{
	float: left;
	margin: 0 15px 20px 2px;
}
#main #page .skinPage #TabNav .content .skin p{
	margin:0;
}
#main #page .skinPage #TabNav .content .skin p.title{
	margin:0.25em 0 0.3em 0;
	font-size: 1.3em;
	line-height: 1.4;
	font-weight:bold;
}

#main #page .skinPage #TabNav .content p.s_txt{
	width:200px;
	font-size:1.1em;
	margin-bottom:0.5em;
}


/*------------------------------------------------------------
プラン提案
------------------------------------------------------------*/

.radio label, .checkbox label {
padding-right: 20px;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
}

#main .table-select2{
	margin: 20px 0 60px;
}

 #main .table-select2:last-child{
 	margin-bottom: 60px;
 }

#main .table-select2 tbody>tr>td{
	vertical-align: middle;
	width: 50%;
	}

#main .table-select2 tbody>tr>td p{
	margin-bottom: 0;
}

#main .table-select2 tbody>tr>td .radio label+p,
#main .table-select2 tbody>tr>td .checkbox label +p{
margin-left: 1.5em;
}

#plan label{
font-size:1.4rem;
font-weight: bold;
}
#answer{
	font-size:1.3rem;
	line-height: 1.6;
}

table#server label{
	font-size:1.2rem;
	font-weight:normal;
}

form#plan div#q2,div#q3-end,div.answerBox,div#reqForm{
	display: none;
}

input.viewBtn{
	padding:0.5em 1em;
	margin:2em 0;
}

#planListBtn{
	display: block;
	width: 300px;
	margin: 0 auto 20px;
	padding: 1em 2em;
	color: #fff;
	border: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: border-color 0.3s ease-out, background-color 0.3s ease-out;
	-moz-transition: border-color 0.3s ease-out, background-color 0.3s ease-out;
	transition: border-color 0.3s ease-out, background-color 0.3s ease-out;
}

input#planListBtn:hover{
	border:none;
	background-color:  #D83300;
	}


.radioBtn,.checkBtn {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0 20px 8px 0;
  padding: 12px 12px 12px;
  width: 320px;
  border-radius: 5px;
background-color: #efefef;
  vertical-align: middle;
  cursor: pointer;
}

.radioBtn:hover,.checkBtn:hover{
	background-color:  #D83300;
	color:#fff;
}

.radioBtn:before ,.checkBtn:before{
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 20px;
  display: block;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #53b300;
  content: '';
  opacity: 0;
}

.ansLink{
	margin-top: -30px;
	margin-left: 8px;
	width:94%;
	border:5px solid #f2a69d;
	padding:1rem;
	text-align:center;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}

.radioTable{
	width: 160px;
	margin: 0;
}

#server .radioTable{
	width: 146px;
	margin: 0;
}

.radioBtn input,.checkBtn input{
	margin-right: 5px;
	vertical-align: middle;
}

/*答え欄*/
.answerBox{
	border:5px solid #ddd;
	padding:1.6rem;
	margin-bottom: 1rem;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}

#answer{
	font-size: 1.3rem;
	line-height: 1.6;
	margin-bottom:2rem;
}

.answerBox input.viewBtn{
	padding:0.5em 1em;
	margin: 0;
}

/*------------------------------------------------------------
TOPの新着表示
------------------------------------------------------------*/
.update_area{
	margin-right: 20px;
	padding: 40px;
	border: 1px solid #ddd;
}

.news_area{
	float: right;
	width:85%;
}

.update_area .product_ver{
	color:#D83500;
}

#page .update_area p{
	font-size: 1.6rem;
	font-weight: bold;
}

#page .update_area .update_sbj {
	float: left;
	margin-left:0.5em;
}

#main .update_area .update_sbj li{
	list-style-type: none;
	line-height: 2;
}

#main .update_area .update_sbj i{
	margin-right: 0.5em;
}

/*------------------------------------------------------------
サンプルページ
------------------------------------------------------------*/
/* 右側のグレード分類バー（FLIPPER Uのみ料金プランが異なる） *************************/
/* 全グレード */
#main #page .allgrade_flipper{
	padding: 0;
	background: url("//suite.logosware.com/wp-content/uploads/flipper/grade_bar_bg_allgrade.png") repeat-y right top #fff !important;
}
/* バリュー以外 */
#main #page .novalue_flipper{
	background: url("//suite.logosware.com/wp-content/uploads/flipper/grade_bar_bg_novalue.png") repeat-y right top #fff !important;
}
/* オンラインストレージ専用以外（バリューは対応） */
#main #page .nostorage_flipper{
	background: url("//suite.logosware.com/wp-content/uploads/flipper/grade_bar_bg_nostorage.png") repeat-y right top #fff !important;
}
/* レギュラーとエキスパート */
#main #page .regular-expert_flipper{
	background: url("//suite.logosware.com/wp-content/uploads/flipper/grade_bar_bg_regular-expert.png") repeat-y right top #fff !important;
}
/* エキスパートのみ */
#main #page .expert_flipper{
	background: url("//suite.logosware.com/wp-content/uploads/flipper/grade_bar_bg_expert.png") repeat-y right top #fff !important;
}

/*------------------------------------------------------------
体験版誘導
------------------------------------------------------------*/
.toTrial .btnBase{padding: 15px;font-size: 1.8em;}
.toTrial .btnBase strong{color:#fff;}
.toTrial .ex-arrow2{
	background-image: url(../images/bese_arrow.svg);
	background-repeat: no-repeat;
	background-position: 95% center;}
.toTrial .ex-arrow2.size30{-webkit-background-size: 30px 30px;
background-size: 30px 30px;}

/*------------------------------------------------------------
サンプルのボタン
------------------------------------------------------------*/
#main #page .sampleArea .sampleBtnArea h6{font-size: 1.5em;margin-top: 0.5em;}
#main #page .sampleArea .btnBase.deviceBtn{text-align: center;padding: 0.8em 0.5em 0.6em;width:50px;float:left;margin-right: 5px;line-height: 1.4;}
#main #page .sampleArea .btnBase.deviceBtn a{text-decoration: none;color:#fff;}
#main #page .sampleArea .btnBase:hover{background-color: #D83300;}
p.btnBase.deviceBtn i{/*font-size: 1.6em;*/line-height: 1;margin-bottom: 0;}
p.btnBase.deviceBtn .h_f{font-size: 0.8em;display: block;}

/*------------------------------------------------------------
トップヘッダ
------------------------------------------------------------*/

section.headerTitle{
	float: left;
	margin-top: 85px;
	width:427px ;
}

section.headerTitle h2{
	margin-top: 20px;}

section.headerTxt{
	float: right;
	width: 520px;
	margin-top: 80px;
	color: #fff;
}

.headerTxt dl dt{
	float: left;
	width: 76px;
	margin-top: 5px;
	margin-right:10px;
	padding: 0.7em 0;
	text-align: center;
	background-color: #fff;
	font-size: 14px;
	font-weight: bold;}

.headerTxt dl dd h3{
	font-size: 18px;
	font-weight: bold;
	vertical-align: top;
}

.headerTxt dl dd {margin-bottom: 1.2em;}

.headerTxt dl dd p{
	font-size: 14px;
}

div.headerImg .headerTxt p.dfBtn{text-align:right;margin-top: 15px;}

#storm-maker .headerTxt dl dd{color:#333;}
#storm-maker .headerTxt dl dt{background-color: #333;color:#fff;}


/*------------------------------------------------------------
無料体験版ボタン
------------------------------------------------------------*/
#toast-container > div {
	width:70px!important;
	text-align:center;
	font-size: 20px;
	line-height: 1.1;
	-webkit-border-radius: 0px!important;
	-moz-border-radius: 0px!important;
	-ms-border-radius: 0px!important;
	-o-border-radius: 0px!important;
	border-radius: 0px!important;
	-webkit-box-shadow: 0 0 5px #999!important;
	box-shadow: 0 0 5px #999!important;
	border-radius: 5px;
}

#toast-container>.toast-info {
	background-image:none!important;
	padding: 15px 20px 25px 20px !important;
}

/*縦指定*/
.toast-message i{margin-top: 5px;}

.toast-close-button {
	font-size: 30px;
}
.toast-bottom-right {
	right: 0px!important;
	bottom: 300px!important;
	/*bottom: 90px!important;*/
}

.toast-info{background-color: #15bbcc!important;}

/*VIBのサンプルボタンを消す*/
#suite #sideMenu .VIB ul li#view_sample{display: none;}


/*------------------------------------------------------------
ラベル
------------------------------------------------------------*/
.hl-label{
	padding: 0.25em 0.6em;
	margin-left: 0.8em;
	font-size: 0.6em;
	font-weight: bold;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;
}

.bg_blueGr{background-color: #4ECDC4;}
.c-w{color:#fff;}
.c-red_d{color:#d83300;}

.lead-text{
	font-size: 14px!important;
}

/*------------------------------------------------------------
SUITEの事例メニュー 2020/06/15追加
事例メニューが2つ以上になったら下記の設定は削除する
------------------------------------------------------------*/
#subMenu #voice_widget ul.menu#menu-su_voice_custom{border-bottom: 1px solid #ccc;}

*------------------------------------------------------------
製品購入フォーム上部
------------------------------------------------------------*/
#main #before .linkbox img{padding-top: 3px;padding-right: 3px;}
#main #before .linkbox p{line-height: 1.7}
#main #before .ex-15{font-size: 15px;font-weight: bold;}
#main #before2{margin: 20px 0 50px;}
#main #before2 h3{font-size: 20px;color:#333;line-height: 1.6;margin-bottom: 20px;}

/*------------------------------------------------------------
システム製品紹介
------------------------------------------------------------*/

/*製品カラー*/
#platon .btnBase{background-color: #1A5988;}
#web-kensyu .btnBase{background-color: #2CC2D5;}
#libra .btnBase{background-color:#D62A1C;}
#spotty .btnBase{background-color:#008C00;}
#web-test .btnBase{background-color: #01AE01}

article.sys div{
	margin: 0 4px 0 0;
	border: 1px solid #707070;}

article.sys header {
	text-align: center;
	background-color: #efefef;
}

article.sys#el header{ background-color: #DBE4EF}
article.sys#lib header{background-color: #EFE4E8}
article.sys#spo header{background-color: #E2EEE9}


article.sys header img{margin-top: -28px;}
article.sys header h1 {	padding: 20px 0 10px;font-size: 20px;line-height: 1.5;}
article.sys ul{padding: 28px 28px 10px 20px;}
#main article.sys  li{font-size: 15px;margin-bottom: 1em;}
#main article.sys .toDetail{text-align: center;margin-bottom: -28px}

section.system_detail{
	margin: 100px 0;
}

section.system_detail h1{
	margin-bottom: 80px;
	font-size: 29px;
	text-align: center;
}

/*アイコン＋罫******************/
section.system_detail .line{
	text-align: center;
	margin-bottom: 60px;
}

section.system_detail .line span{
  display: inline-block;
  position: relative;
	}

.iconline .line span {
  display: inline-block;
  position: relative;
}
.iconline .line span:before,
.iconline .line span:after {
  content: "";
  border-bottom: 1px solid #333;
  width: 300px;
  margin: 0 0px;
  position: absolute;
  bottom: 28px;
}
.iconline .line span:before {right: 100%;}
.iconline .line span:after {left: 100%;}

/*紹介欄******************/

#main section.system_detail article h2{
	font-size:21px ;
	margin-bottom: 0.2em;
}
section.system_detail article .ar{
	width: 100%;
	padding: 20px 30px 20px 25px;
	box-sizing: border-box;
	background-color: #F6F5F3;
}
#main .ar li{font-size:15px;}

section.system_detail .arrow{text-align: center;margin: auto}

section.system_detail article .results{
	padding: 20px 30px;
	box-sizing: border-box;
	border: 1px solid #000;
}

#main .results h3{font-size: 20px;font-weight: bold;}
#main .results h3 .subtitle{font-size: 14px;font-weight: normal;;display: block;}
#main .results .btnBase{font-size: 15px;}

/*****************************
SUITE製品共通グレード別
*****************************/


#main #page .grade_point h3{
	font-size: 24px;
	font-weight: bold;
	color:#333;
}
#main .grade_point p.lead{
	font-size: 14px;
}

#main article.check-point h4{
	margin:2em 0 0.5em;
	font-size: 20px;
	font-weight: bold;
}

.check-point .box3{
	border:1px solid #707070;
	width: 220px;
	padding: 0;
}

.check-point .box3 div.player{
	margin-bottom: 0;
}
.check-point .box3 div.player>img{
	vertical-align:bottom;
}


.check-point .box3 h5{
	padding: 7px 20px;
	font-size: 18px;
}

.check-point .box3 ul{
	padding: 10px 25px 10px 20px;
}

#main .check-point .box3 ul li{
	font-size: 15px;
	line-height: 1.6;
}




/*------------------------------------------------------------
新製品と旧製品の違い
------------------------------------------------------------*/

#new-old-difference section{margin-bottom: 80px;}
#new-old-difference section h2{
	margin-bottom: 0.5em;
	font-size:26px;
	color:#333;
}

#three article{margin-top: 40px;}

#three {
  counter-reset: h3;
  margin: 0 auto;
  padding: 10px 0;
  font-family: sans-serif;
}

.heading {
  margin: 0 0 20px 0;
}

#three h3:before {
  content : counter(h3,decimal) ". ";
  counter-increment : h3;
}

#three .heading {
  overflow: hidden;
  position: relative;
  padding-bottom: 0px;
}

#three .heading h3{
  padding: 6px;
  	font-weight: bold;
	font-size: 21px;
	color:#333;
}

#three .heading:before {
  content: "";
  border-bottom: 3px solid #c7cfce;
  bottom: 0;
  height: 0;
  position: absolute;
  width: 100%;
  z-index: 0;
}

#three .heading:after {
  border-bottom: 3px solid #008ce7;
  bottom: 0;
  content: "";
  position: absolute;
  width: 100px;
  z-index: 1;
}

#three .btnBase{
	padding: 0.3em;
	background-color: #677977;
	font-size: 14px;
}

#main .new_table tbody tr th{font-size: 14px;}
#main .new_table tbody tr td{font-size: 13px;}
/*.new_table thead .sche{font-weight:normal;font-size: 14px;}*/
.new_table tbody tr>td:nth-of-type(n+2){text-align: center;}

#main .new_table.mod-tableBase thead tr th{text-align: center;font-size:16px;}
.new_table.mod-tableBase thead tr th:nth-of-type(1){width:44%}
.new_table.mod-tableBase thead tr th:nth-of-type(3+n){width:19%}

.new_table.mod-tableBase thead tr th:nth-of-type(2){width:18%}

/*新しいバージョン*/
#main .new_table.mod-tableBase thead tr th:nth-of-type(3),
#main .new_table.mod-tableBase tbody tr td:nth-of-type(3){
	background-color: #F9F9E1;
}

/*FAQ
-----------------------*/

#new-old-difference #faq article{margin-bottom: 4em;}
#main #new-old-difference #faq h4{
	padding: 0.7em 0.8em;
	margin-bottom: 0.8em;
	line-height: 1.6;
	background-color:#F9F9E1;
}
#main #new-old-difference #faq .answer{
		margin: 1em 0.8em;
		font-size: 14px;
}
/*#new-old-difference #faq .answer strong{font-size: 16px;}*/

/**********************************************
汎用クラス
**********************************************/
.fz-14{font-size: 14px!important;}
.c-red_d{color:#d83300;}
.bg-g6{background-color: #666;}

/*------------------------------------------------------------
製品問い合わせフオーム
------------------------------------------------------------*/

/*外枠の設定*/
.other-form-title {
  width: 690px;
  margin: 0 auto;
  padding: 10px 0;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 20px;
}

/*見出し*/
.heading {
  margin: 10px 0
}

.lines .heading {
  color: #333;
  text-align: center;
  overflow: hidden;
}
.lines .heading span {
  display: inline-block;
  position: relative;
}
.lines .heading span:before,
.lines .heading span:after {
  content: "";
  border-bottom: 1px solid #555;
  width:250px;
  margin: 0 15px;
  position: absolute;
  bottom: 13px;
}
.lines .heading span:before {
  right: 100%;
}
.lines .heading span:after {
  left: 100%;
}

section.other article{background-color:#fff; padding:0 25px 0 0}
section.other article h5.point-color{color:#665CC4;}


/*無料体験版ボタン*/

#fixed_r {
    position: fixed;
    top: 100px;
    right: 0;
    z-index: 1000;
	 font-family:"Noto Sans CJK JP", -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
}

#fixed_r .fixed_trial {
    display: block;
    width: 36px;
    max-height: 220px;
    background: #fff;
    margin-bottom: 15px;
    padding:18px 15px 30px 15px;
    border-radius: 10px 0 0 10px;
    -moz-box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 10px;
    -webkit-box-shadow: rgb(0 0 0 / 25%) 0px 0px 10px;
    box-shadow: rgb(0 0 0 / 25%) 0px 0px 10px;
    white-space: nowrap;
}

#fixed_r .fixed_trial .bnr_text {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
    color: #444;
    font-size: 1.8rem;
	font-weight: bold;
    line-height: 1.2;
    text-align: left;
    margin-left: 4px;
}

#fixed_r .fixed_trial:hover{
	text-decoration: none;
	background-color: #FCF8D9;
}

/*------------------------------------------------------------
ページ内リンクナビゲーション
------------------------------------------------------------*/
/*4列*/
.page-navi-4col .round-box{
	display: block;
	box-sizing: border-box;
	width: calc(100% - 1.2rem);
	margin: 0 auto;
	  background-color: #fff;
	 border-radius: 8px;
	text-align: center;
	text-decoration: none;
}

#main .page-navi-4col .round-box:hover{
	background-color:  #fffad7;
	box-shadow: 0 2px 3px 0px rgba(158, 158, 158, 0.2);
}

.fz-16r{
      font-size: 1.6rem!important;
}

.fw-bold{
	font-weight: 600!important;
}

/*------------------------------------------------------------
SUITE一覧
------------------------------------------------------------*/
/* #main .mod-tableBase.suite-set-list tbody>tr>td:nth-of-type(1){width:20%}
#main .mod-tableBase.suite-set-list tbody>tr>td:nth-of-type(2){width:30%}
#main .mod-tableBase.suite-set-list tbody>tr>td:nth-of-type(3),
#main .mod-tableBase.suite-set-list tbody>tr>td:nth-of-type(4){width:25%} */

#main .suite-option{
	font-size: 1.2rem;line-height: 1.3;
}

/*------------------------------------------------------------
角マルボックス
------------------------------------------------------------*/
.r-box{
	border: 1px solid #ccc;
	border-radius: 10px;
	justify-content: space-between;	
}

/*------------------------------------------------------------
製品ヘッダ内サービスボタン
------------------------------------------------------------*/

.serviceBtn{	
	margin: 5px 0 0 auto;
	text-align: right;
}

.serviceBtn a{
	display: inline-block;
	padding:10px 12px 10px 15px;
	text-decoration: none!important;
	font-weight: bold;
	font-size: 14px;
	color:#333;
	background-color: #fff;
	border: 2px solid #555;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	-ms-border-radius: 25px;
	-o-border-radius: 25px;
	border-radius: 25px;
}

.serviceBtn  a i{color:#0C9DF4;}
.serviceBtn a:hover{
	background-color: #fcffc6;
	-o-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}


/*------------------------------------------------------------
価格
------------------------------------------------------------*/

#main .price-detail{margin-top:10rem;}

#main .price-detail .price-table{
	margin-top: 5rem;
}
#main .price-detail .set-table{
	margin-top: 6rem;
}

#main .price-table .table-headline,
#main .set-table .table-headline{
	font-size: 1.8rem;
	font-weight: bold;
}

.round-frame{
	border: 1px solid var(--lightgray);
	border-radius: 5px;
}

/*------------------------------------------------------------
LW SUTIEトップ　2023-12-20
------------------------------------------------------------*/

/*共通設定
************************/
.fz-12r{font-size: 1.2rem!important;}
.fz-10r{font-size: 1rem!important;}

#main .top-sec p,
#main .about-viiiz-sec p,
#main .app-detail-sec p,
#main .about-viiiz-sec p{
	font-size: 1.4rem;
}

#main .top-sec a:hover,
#main .about-viiiz-sec a:hover,
#main .app-detail-sec a:hover,
#main .about-viiiz-sec a:hover {
	opacity: 0.7;
	transition: opacity 0.3s;
}


#main .col-text-sec{padding-right: 2rem;}
.justify-content-between{justify-content: space-between!important;}


/*トップヘッダ
************************/

#suite section.headerTitle{width: 360px;margin-left: 0px;}

section#suHeader.headerTxt{
	margin-top: 80px;
	width: 590px;
}

section#suHeader.headerTxt dt{
	margin: 10px;
	padding: 0.8em 0;
	width: 120px;
	font-size: 16px;
	color:#fff;
	background-color: #E15D4C;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;
}

section#suHeader.headerTxt dd{
	padding: 1.4rem 0.5em 1.4rem;
	background-color: rgba(255,255,255,1);
	color:#333;
	font-size: 13px;
	margin-bottom: 10px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;
	box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

section#suHeader.headerTxt dd h3{
	font-size: 15px;
	line-height: 1.2;
	margin-bottom: 2px;
}

/*トップサマリー*/
.top-summary-suite{
	border-radius: 10px;
	border: 1px solid var(--basic-lightgray, #D3D3D3);
	padding: 4rem;
}

.about-suite{
	display: flex;
	justify-content: space-between;
	margin-bottom: 5rem;
}

.top-summary-app{
	margin-top: 4rem;
	display: flex;
}

.solutionTop #main #page .app-title{
	padding: 1rem 0 0 0;
	margin-bottom: 1rem;
}

.app-title img{
	height:4rem;
}

.solutionTop #main #page .app-title>span{
	padding: 0;
	font-size: 1.2rem;
	font-weight: normal;
}

/*特典*/

#main .special-offer-sec h3>i{
	color:#C5CB8C;
	font-size: 1.2em;
}

/*ソフトをセット*/
.small-color{
	background: var(--lwsuite-color-small-bg, #F2F8FB);
mix-blend-mode: multiply;
}
.large-color{
	background: var(--lwsuite-color-large-bg, #FFF5EE);
mix-blend-mode: multiply;
}

#main .note_large-pack{
	text-align: right;
}

/*セットテーブル*/
#top_suite-set-table thead td{
	font-weight: normal;
}

#main #top_suite-set-table th{width: 33%;}
#main #top_suite-set-table.mod-tableBase>tbody>tr>td{
	padding-bottom: 1.6rem;
}

#main #top_suite-set-table th:last-child{width: 25%;}
#main #top_suite-set-table th>h4{
	font-size: 1.8rem;
}
#main #top_suite-set-table th p{
	font-size: 1.3rem;
	margin-bottom: 0.5rem;
	font-weight: normal;
}

.f_maru-point {
    display: inline-block;
    margin-right: 0.5rem;
    width:26px;
    height:26px;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    line-height:26px;
    color: #fff;
    background-color:var(--product-color);
    border-radius: 50%;
}

.note-square{
	padding: 1.2rem 2rem 0.6rem;
	border:1px solid #d83300;
}

/*------------------------------------------------------------
about viiiz
------------------------------------------------------------*/
.viiiz-summary{
	background: url(../images/suite/viiiz-summary-bg.png)	no-repeat 110% 0;
}

.viiiz-summary-text{
	width: 60%;
}

#main h3.viiiz-copy{
	font-size: 1.8rem;
	font-weight: normal;
	line-height: 1.8;
}

.col3-sample{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:2rem;
}

.col2-sample{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap:2rem;
}

/*------------------------------------------------------------
含まれるソフト
------------------------------------------------------------*/
#main .nav-title{
	text-align: left;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
	margin-top: -5.5rem;
	margin-bottom: 2rem;
}

.suite-app-nav,.tool-nav{
	padding: 4rem 4rem 3rem 4rem;
	border-radius:10px;
	background: var(--warm-bg, #FCFBEF);
}

.tool-nav{
background: var(--light-gray, #FAFAFA);
}

.btn-2col{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	column-gap:20px;
	row-gap:16px;
}

#main .app-nav-btn{
	display: inline-flex;
	align-items: center;
	padding: 2rem;
	border-radius: 10px;
	background-color:#fff;
}

#main .app-nav-btn.block{
	display: block;
}

#main a.app-nav-btn{
	text-decoration:none;
}

#main .app-nav-btn img{
	height:2.8rem ;
	}

.app-detail-sec{
	margin-top: 12rem;
}

.app-main{
	display: grid;
	grid-template-columns:9fr 5fr;	
	gap:20px;
}

/* ライン付き見出し */
.app-main-header{
	position: relative;
	border-top: 1px solid #000;
	margin-bottom: 5.5rem;
}
.app-main-header>p{
	position: absolute;
	top: -1rem;
	left: 0rem;
	padding: 0 10px 0 0;
	color: var(--spotty-accent-color);
	font-size: 1.4rem;
	display: block;
	background-color: #fff;
}

.app-main .text-col h3 img{
	height: 4.8rem;
	}

.app-main .text-col h3>span{
	display: block;
	color:var(--darkgray);
}

.app-main .sample-col{
	text-align: right;
	}

.suite-app-sec .btnBase{
	width:50%;
}

/*******************
SUITE-FAQ
*******************/
.faq-viiiz .f_maru-point {
	background-color: #00a980;
}

.faq-viiiz .answer>p{
	margin-left: 3rem;
}

/*3製品FAQリンク*/
.faq-sec .faq-fst{
	background-color:var(--whitesmoke);
	border-radius: 5px;
}

.faq-sec .faq-fst{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	column-gap: 2rem;
}

.faq-sec .faq-fst a{
	display: block;
	padding: 1rem;
	background-color: #fff;
	border-radius: 4px;
	text-align: center;
}

.faq-sec .faq-fst a>img{
	height: 3rem;
}

.faq-sec .faq-fst a:hover{
	opacity: 0.7;
	transition: opacity 0.3s;
}

/******************************
フローティングバナー
******************************/

.floating-banner {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 40px;
	bottom: 40px;
	background-color: #fff;
}

.floating-banner__close {
	position: absolute;
	z-index: 1;
	top: -10px;
	right: -10px;
	width: 30px;
	height: 30px;
	color: #000;
	font-size: 24px;
	line-height: 1;
	border: 1px solid hsl(0, 0%, 92%);
	border-radius: 50%;
	background-color: #fff;
	cursor: pointer;
}