@charset "UTF-8";

/**LOGOSWARE CSS*****************
flipper-maker.css
Version: 1
2016/06/24
FLIPPER3ヘッダ用記述追加

1.サイト毎の色指定 ★指定必須
 ※menuのhoverはサイトで共通
2.位置指定★指定必須

FLIPPER: #E08F54; 間違い？
***************************************************************/

/*各製品ごとの色指定*/

:root {
	--product-color: #D9752B;
	--product-color2: #f3d4bc;
	--product-paleColor:#faefe6;
}

/* =========================================================
1.サイト毎の色指定
・重要メニューの枠色、ボタンのベース色はキーカラー設定に。
 同じ色をp_color、bg_p_colorにも指定しておいて使いまわす
========================================================= */

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

/*重要メニュー枠
------------------------------------------------------------*/
#sideMenu .VIB,.red, #sideMenu .voiceBtn a{
/* border-color: #E08F54; */
	border-color: var(--product-color);
}

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

/*文字色プロダクトカラー適用クラス／汎用：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:var(--product-color);
}

/***************************************************************
★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,
.entryList h3 .categoryLink a:hover{
	background-color:var(--product-color2);
}

/*bg_p_color2：薄め3（必要なければhover色と同じ色を指定）
------------------------------------------------------------*/
.bg_p_color2,#main .table-colorLeftTH tbody>tr>th,.table-colorLeftTH thead>tr>th:first-child{
	background-color: var(--product-paleColor);
}

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

.solutionTop {
	background-image: url(../images/baseBG_flipper_top.png);
}


/*FLIPPER3用*/
#flipper3-maker.solutionTop{
	background-image: url(../images/baseBG_flipper-maker_top.png);
}

#flipper3-maker #subHeader,#flipper3-maker #solutionTop_header{
	height:290px;
	}


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

section.headerTitle{
  display: flex;
  flex-direction: column;
	width: 400px;
}

section#xeHeader.headerTxt{
	width: 510px;
	color:#333;
}

section.headerTitle>h1{
	display: flex;
	align-items: center;
	column-gap: 12px;
	margin-top: 1.6rem;
}

.headerTitle>h1 .flipper-subtitle{
	font-size: 16px;
	line-height: 1.4;
	font-weight: 600;
}

.headerTitle>h1 .flipper-subtitle>span{
	font-size: 22px;
}

section.headerTitle>h1 img{
	height: 52px;
}
.headerTitle .order-1 {order: 1;}
.headerTitle .order-2 {order: 2;}
.headerTitle .order-3 {order: 3;}

#solutionTop_header .headerTitle h2.copy_text{
	font-size:3rem;
	font-weight: normal;
	line-height:1.35;
	color:#fff;	
}

.header-cta-btn a{
	display: flex;
	margin-top: 24px;
	width: 300px;
	padding: 24px 20px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 16px;
	background: linear-gradient(180deg, #2BD9CC 0%, #27CCC0 47.5%, #23BEB3 100%);
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
	font-size: 21px;
	font-weight: bold;
	transition: all .3s;
	box-shadow: inset;
}

.header-cta-btn a{
	color: #fff;
}

.header-cta-btn a:hover{
	text-decoration: none;
	filter: brightness(1.05);
}

.serviceBtn a {
	border:none;
}


section#xeHeader.headerTxt dt{
	margin: 10px;
	padding: 0.5em 0;
	width: 100px;
	font-size: 16px;
	color:#fff;
	/* background-color: #2AD993; */
	background-color: var(--product-color);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;
}

section#xeHeader.headerTxt dd{
	padding: 10px 0.5em;
	background-color: #fff;
	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;
}

#xeHeader.headerTxt dd h3,
#xeHeader.headerTxt dt p{
	font-size: 16px;
	line-height: 1;
	margin-bottom: 2px;
}


.serviceBtn  a i{color:#2AD993;}


/***************************************************************
その他製品固有
***************************************************************/

/*------------------------------------------------------------
num_sectionの画像指定
------------------------------------------------------------*/

#main .num_section h4.num:first-letter{
	background:url(../images/flipper/dropcap_maru_l.png) 0 0 no-repeat;
}

#main .child_section .num_section h4.num:first-letter{
	background:url(../images/flipper/dropcap_maru_m.png) 0 0 no-repeat;
}

#main #page .simple_num_section h4:first-letter{
background:url(../images/flipper/dropcap_maru.png) 0 0 no-repeat;
}



/*flipper3Top/fUtop**********************************************************/

.f3mTop,.fuTop {
	width:700px;
	margin-bottom:15px;
	background:url(../images/f3mTopBG.jpg) no-repeat 0 0;
}

.f3mTop{
	height:400px;
	background:url(../images/f3mTopBG.jpg) no-repeat 0 0;
}

.f3mTop p#f3mConcept{
	width:697px;
	height:32px;
	margin-bottom:20px;
	background:url(../images/f3mConcept.png) no-repeat ;
	text-indent:-9999px;
}


.f3mTop .textBox{
	width:396px;
	margin-left:314px;
}

/*FU*/

.fuTop{
	height:430px;
	background:url(../images/fuTopBG.jpg) no-repeat 0 0;
}

.fuTop p#fuConcept{
	width:697px;
	height:32px;
	margin-bottom:0;
	background:url(../images/f3mConcept.png) no-repeat ;
	text-indent:-9999px;
}

.fuTop .textBox{
	width:360px;
	margin-left:0;
	margin-top:40px;
}

#main #page .f3mTop .textBox p{
	font-size:12.5px;
}

/***************************************************************
 * FLIPPER SDK
***************************************************************/

#main #page div#sdkTopBox{
	width:693px;
	height:322px;
	background:url(../images/sdkTopBG.png) no-repeat 0 0;
}

#main #page div#sdkTopBox h3{
	padding:20px 0 0 15px;
	background:none;
	border:none;
	}

#main #page div#sdkTopBox p{
	width:350px;
	margin-left:20px;
	font-size:1.4em;
	background:none;
	border:none;
	}

#main #page p.dropCap{
	margin:20px 10px 20px 0;
}

#main #page p.dropCap:first-letter{
	font-size: 3em;
	line-height: 1;
	float: left;
	margin: 0 .2em 0 0;
	padding: .1em 0;
}

/*巻き込みリボン***************************/

#main #page div.sdkSampleBox{
	width:653px;
	padding:5px 20px 10px;
	margin:20px 0;
	background-color:#f0f8fd;
}

#main #page div.sdkSampleBox div.ribbonBase{
	clear:both;
	margin: 0px auto 0 -20px;
	width:693px;
	height:40px;
	position:relative;
	z-index:90;
}

div.rectangle{
	float:left;
	position:relative;
	left:-10px;
	top:11px;
	float:left;
	height:30px;
	width:222px;
	background: -moz-linear-gradient(left, #111, #666); /* Firefox用 */
	background: -webkit-gradient(linear, left center, right center, from(#111), to(#666)); /* Safari,Google Chrome用 */
	-pie-background:linear-gradient(#111,#666);
	background-color:#111;
	z-index: 100; /* the stack order: foreground */
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  	-khtml-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.4);

}

div.triangle_l{
	clear:left;
	border-color:transparent #000 transparent transparent;
	border-style:solid;
	border-width:10px;
	height:0;
	width:0;
	position:relative;
	left:-20px;
	top:0px;
	z-index:-1;
	margin:0;
}

#main #page div.sdkSampleBox div.rectangle h3{
	margin:5px 0 0 30px;
	padding:0;
	font-size:18px;
	color:#fff;
	font-weight:normal;
	background:none;
	border:none;
}

#main #page div.sdkSampleBox div.sdkRightBox{
	float:left;
	width:286px;

}

#main #page div.sdkSampleBox div.sdkRightBox h4{
	width:286px;
	padding:0;
	background:none;
	font-size:24px;
}

#main #page div.sdkSampleBox div.sdkRightBox p.grayBox{
	width:266px;
	padding:10px;
	background-color:#efefef;
}

#main #page div.sdkSampleBox p.sampleImg{
	float:right;
	margin:-25px 0 0 0;

}

/*ライセンス表*/

#main #page table#sdkLisence{
	margin:20px 10px;
	border-right:none;
}

#main #page table#sdkLisence td{
	padding:10px 8px;
	border-left:none;
}

#main #page table#sdkLisence td img{
	margin-top:5px;
	}

#main #page table#sdkLisence td.bgc01{
	background-color:#EEF1EA;
	font-size:1.4em;
	white-space:nowrap;
}

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

#main #page div.hikakuQ_list{background-image:url(../images/hikaku_qa_bg_flipper.gif);}

/* FLIPPER */
#main #page div.hikakuP #p1{background: url(../images/hikaku_point_bg01_flipper.png) no-repeat 0 0;}
#main #page div.hikakuP #p2{background: url(../images/hikaku_point_bg02_flipper.png) no-repeat 0 0;}
#main #page div.hikakuP #p3{background: url(../images/hikaku_point_bg03_flipper.png) no-repeat 0 0;}
#main #page div.hikakuP #p4{background: url(../images/hikaku_point_bg04_flipper.png) no-repeat 0 0;}
#main #page div.hikakuP #p5{background: url(../images/hikaku_point_bg05_flipper.png) no-repeat 0 0;}
#main #page div.hikakuP #p6{background: url(../images/hikaku_point_bg06_flipper.png) no-repeat 0 0;}
#main #page div.hikakuP #p7{background: url(../images/hikaku_point_bg07_flipper.png) no-repeat 0 0;}
#main #page div.hikakuP #p8{background: url(../images/hikaku_point_bg08_flipper.png) no-repeat 0 0;}



/***************************************************************
サンプルタブ画像指定
***************************************************************/

.navArea .nav-one a{
	width: 237px;
	background-image: url(//suite.logosware.com/wp-content/uploads/classify_01.jpg);
}

.navArea .nav-two a{
	width: 228px;
	background-image:url(//suite.logosware.com/wp-content/uploads/classify_02.jpg);
}

.navArea .nav-three a{
	width: 232px;
	background-image:url(//suite.logosware.com/wp-content/uploads/classify_03.jpg);
}

.navArea #TabNav .nav li.nav-one a:hover{
	background-image: url(//suite.logosware.com/wp-content/uploads/classify_01_on.jpg);
}

.navArea #TabNav .nav li.nav-two a:hover{
	background-image: url(//suite.logosware.com/wp-content/uploads/classify_02_on.jpg);
}

.navArea #TabNav .nav li.nav-three a:hover{
	background-image: url(//suite.logosware.com/wp-content/uploads/classify_03_on.jpg);
}

.navArea #TabNav .nav li.nav-one a.current{
	background-image: url(//suite.logosware.com/wp-content/uploads/classify_01_on.jpg);
}

.navArea #TabNav .nav li.nav-two a.current{
	background-image: url(//suite.logosware.com/wp-content/uploads/classify_02_on.jpg);
}

.navArea #TabNav .nav li.nav-three a.current{
	background-image: url(//suite.logosware.com/wp-content/uploads/classify_03_on.jpg);
}


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

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

#main .tips{
	position: relative;
	border:5px solid #FFF;
	margin: 50px auto 30px auto;
	padding:25px;
	background-color: #D4E8F7;
	box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 4px 2px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 4px 2px;
	-moz-box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 4px 2px;

}


#main .tips .tape{
	width: 210px;
	height: 44px;
	display: block;
	position: absolute;
	top: -25px;
	left: 220px;
	background: url(../images/img_tape.png) no-repeat;
	z-index: 100;
}

#main #page .tips h3{
	color: #333;
	text-align: center;
	margin:0 0 1em 0;
	padding: 0 0 20px 0;
	line-height: 1.4;
	background: url(../images/img_border_white.png) no-repeat bottom;

}

#main #page .tips h4{
	font-size: 1.6em;


}

#main #page .tips a.morebtn{
	display: block;
	background-color: #2A8CD9;
	padding:5px 15px;
	color: #FFF;
	font-size: 1.2em;
	text-decoration: none;
}

#main #page .tips a.morebtn:hover{
	background-color: #4098DC;
}

/*矢印（右・線）*/
#main #page .tips a.morebtn .arrow-right {
  display: block;
  width: 10px;
  height: 15px;
  position: relative;
  float: right;
  padding-top: 13px;
}

#main #page .tips a.morebtn .arrow-right:before,
#main #page .tips a.morebtn .arrow-right:after {
  content: "";
  display: block;
  width: 12px;
  height: 3px;
  background: #FFF;
  position: absolute;
}

#main #page .tips a.morebtn .arrow-right:before {
  -webkit-transform: translate(0, -3px) rotate(45deg);
  -moz-transform: translate(0, -3px) rotate(45deg);
  -ms-transform: translate(0, -3px) rotate(45deg);
  transform: translate(0, -3px) rotate(45deg);
}

#main #page .tips a.morebtn .arrow-right:after {
  -webkit-transform: translate(0, 3px) rotate(-45deg);
  -moz-transform: translate(0, 3px) rotate(-45deg);
  -ms-transform: translate(0, 3px) rotate(-45deg);
  transform: translate(0, 3px) rotate(-45deg);
}


#main #page .anshin{
	background: url(//suite.logosware.com/wp-content/uploads/flipper/top_anshin_header.png) no-repeat 0 0;
	padding: 160px 180px 0 0;
	margin:60px 0 30px 0;
}


/***************************************************************
価格
***************************************************************/
#page h3.planTitle .shubetsu {
    border-color: #E08F54;
}

/***************************************************************
プレイヤーデザイン（タブ無し３カラム）
***************************************************************/
#main #page .mod-itemBox3.skinlist{
	margin-bottom: 30px;
}
#main #page .mod-itemBox3.skinlist p{
	margin:0;
}
#main #page .mod-itemBox3.skinlist p.title{
	margin:0.25em 0 0.3em 0;
	font-size: 1.4em;
	line-height: 1.4;
	font-weight:bold;
}
#main #page .mod-itemBox3.skinlist p.s_txt{
	width:200px;
	font-size:1.2em;
	margin-bottom:0.5em;
}


/***************************************************************
旧製品のトップヘッダー
***************************************************************/
section.headerTxt.previous p{
	margin: 0 0 0.75em 0;
	font-size:1.6rem;
}
section.headerTxt.previous p a,
section.headerTxt.previous p a:hover{
	color:#FFF;
}

/***************************************************************
サブスク配信バナー
***************************************************************/
#sideMenu ul.menu li.side-banner>a{
	padding: 0;
	margin: 3rem 0 2rem;
	border: none;
	background:url(../images/subscription-banner.png) 0 0;
	width: 210px;
	height: 250px;
	text-indent: -9999px;
}

#sideMenu ul.menu li.side-banner>a:hover{
 	transform: scale(0.98);
	box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
	transition-duration: .5s;
}

/***************************************************************
サンプルページ修正　2023-09-11
***************************************************************/


#main .sample-2col{
	display: flex;
	justify-content:space-between;
	margin-top: 2.4rem;
}

#main .sample-2col-obj{
	display: inline-block;
	text-align: center;
}

/* 左右いっぱいに伸びた横線 */
#main .market-title {
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
}
#main .market-title::after {
  background-color:#ccc;
  content: "";
  flex-grow: 1; /* 横幅いっぱい */
  height: 1px; /* 横線の高さ */
}

#main .market-title::after {
  margin-left: 15px; /* 文字との余白 */
}