@charset "utf-8";
html { scroll-behavior: smooth;}

/*============================================================================
	PC非表示
==============================================================================*/
.hiddenPc{
visibility: hidden;
display: none;
width: 0px;
height: 0px;
}

.br-pc { display:block; }
.br-sp { display:none; }

/* 見出し1 */
.indexTitleWrap{
width: 100%;
margin: 0% 0% 3% 0%;
text-align: center;
}

.indexTitleA {
position: relative;
line-height: 1.4;
margin: 0px auto;
padding:0.25em 3em;
display: inline-block;
top:0;
}

.indexTitleA:before, .indexTitleA:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.indexTitleA:before {
  border-left: solid 1px #BEBEBE;
  border-top: solid 1px #BEBEBE;
  border-bottom: solid 1px #BEBEBE;
  left: 0;
}
.indexTitleA:after {
  content: '';
  border-top: solid 1px #BEBEBE;
  border-right: solid 1px #BEBEBE;
  border-bottom: solid 1px #BEBEBE;
  right: 0;
}

.TitleIDecorationA{
width: 100%;
margin: 0% auto 20px auto;
font-size: 36px;
color: #1E2F49;
text-align: center;
vertical-align: middle;
font-family: 'Noto Serif JP', serif;
font-weight:500;
}

.TitleIDecorationAcap{
display: block;
width: 100%;
margin: 10px auto 0% auto;
font-size: 20px;
color: #16948D;
text-align: center;
}

.indexTitleB {
width: 100%;
margin: 0px;
padding: 0px 0px 5px 15px;
border-left: solid 10px #16948D;
font-size: 2.25em;/*36px; 9.6vw;*/
line-height: 1.4em;
font-family: 'Noto Serif JP', serif;
font-weight: 500;
}

.indexTitleC{
width: 100%;
margin: 0% auto;
text-align: center;
}


.indexTitleC h3{
position: relative;
line-height: 1.8;
display: inline-block;
top:0;
height: 60px;
margin: 40px auto;
padding: 0% 2%;
color: #163069;
font-size: 24px;/*1.5em; 6.4vw;*/
line-height: 60px;
font-family: 'Noto Serif JP', serif;
font-weight:500;
text-align: center;
}

.indexTitleC h3:before,.indexTitleC h3:after{
position: absolute;
top: 0;
content:'';
width: 5px;
height: 60px;
display: inline-block;
}

.indexTitleC h3:before{
border-left: solid 5px #163069;
left: 0;
}

.indexTitleC h3:after{
content: '';
border-left: solid 5px #163069;
right: 0;
}


/*============================================================================
	bg
==============================================================================*/

.GrLeftWrap,.GrTopWrap{
width: 100%;
padding: 0% 2%;
}

.GrLeftWrap{
background: rgb(233,241,247);
background: -moz-linear-gradient(90deg, rgba(233,241,247,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(233,241,247,1) 0%, rgba(255,255,255,1) 100%);
background: linear-gradient(90deg, rgba(233,241,247,1) 0%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e9f1f7",endColorstr="#ffffff",GradientType=1);
}

.GrTopWrap{
background: rgb(233,241,247);
background: -moz-linear-gradient(180deg, rgba(233,241,247,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(233,241,247,1) 0%, rgba(255,255,255,1) 100%);
background: linear-gradient(180deg, rgba(233,241,247,1) 0%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e9f1f7",endColorstr="#ffffff",GradientType=1);
}
 

/*============================================================================
CTA
==============================================================================*/

.CTAWrap{
width: 100%;
max-width: 1200px;
margin:0% auto;
padding: 30px 40px;
background:  #2ACBC2;
background-size: contain;
}

.CTATitle{
width: 100%;
padding: 0%;
color: #FFF;
text-align: center;
}

.CTATitle p{
margin: 0%;
padding: 0%;
font-size: 1.5em;/*24px;6.4vw;*/
line-height: 1.2em;
text-align: center;
color: #FFF;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
}

.CTATitle p span{
font-size: 12px;
text-align: center;
color:#FFF;
}

.CTABtn{
width: 100%;
max-width: 540px;
margin: 20px auto;
padding: 0%;
text-align: center;
}

.Btn{
display: block;
width: 100%;
margin:0% auto 0% auto;
padding: 2% 5% 1% 5%;
text-align: center;
color: #117491 !important;
font-size: 1.875em;/*30px;8vw;*/
line-height: 1em;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
background: #F4ED3B;
border-radius: 4px;
border-bottom: 6px solid #5f5d08;
}

.Btn:hover{
text-decoration: none;
color: #118398 !important;
background: #FFD2C4;
}

.Btn i{
display: inline-table;
font-size:  0.8125em;
line-height: 2.5em;
margin: -5px 6px 0 0;
padding: 0% 1% 0% 0.5%;
vertical-align: middle;
}

/*============================================================================
	header#globalHeader（ヘッダ）
==============================================================================*/
#headOuter{
position: fixed;
top:0px;
width: 100%;
height: 100px;
background: rgba(255,255,255,0.8);
z-index: 1030;
font-family: 'Noto Sans JP', sans-serif;
margin: 0% auto;
padding: 0%;
}
header#globalHeader {
width: 100%;
max-width: 1200px;
height: 100px;
margin: 0px auto;
padding: 0% 10px;
}

h2#logo{
width:150px;
margin: 1% 0% 0% 0%;
float: left;
font-size:14px;/*14px;3.733vw;*/
}

h2#logo a{
display:block;
width:150px;
height:40px;
margin: 3px 0px 0px 0px;
background: url(../img/2x/logo.webp?=v2) no-repeat;
background-size:150px 40px;
text-decoration:none;
text-indent:-1000px;
font-size:8px;
overflow:hidden;
}

h2#logo a:hover { text-decoration:none;}

header#globalHeader nav {
float: right;
margin: 0px 0px 0px auto;
}

header#globalHeader nav ul {
width: 100%;
margin: 0px 10px 0px auto;
padding: 38px 0px 0px 0px;
text-align: right;
}

header#globalHeader nav ul li {
list-style: none;
float: left;
margin: 0px 10px 0px 0px;
}

header#globalHeader nav ul li a:hover{
text-decoration: none;
color: #95CFCB;
}

div.fbBox{
float: right;
width: 15%;
max-width: 180px;
margin: 2.5% 0% 0% 0%;
padding: 0% 0% 0% 0%;
}

div.fbBox a{
display: block;
width: 100%;
height: 40px;
padding: 1% 2%;
background: #F4ED3B;
font-weight: bold;
color: #16948D;
line-height: 34px;
text-align: center;
}

div.fbBox a i{
margin: 0px 10px 0px 0px;
}

div.fbBox a:hover{
text-decoration: none;
background: #FFD2C4;
color: #118398;
}

/*============================================================================
FV
==============================================================================*/

#headBg {
width: 100%;
margin: 0% auto;
padding: 100px 0px 0px 0px;
}

.FvWrap{
width: 100%;
margin: 0% auto;
padding: 30px 0px 0px 0px;
background: url(../img/2x/bg_fv.webp?=v1) no-repeat;
background-size: cover;
}

.FvBox{
width: 100%;
max-width: 1200px;
margin: 0% auto;
padding: 0%;
}

.txtWrapB{
width: 50%;
max-width: 600px;
text-align: center;
margin: 0% auto;
padding: 0%;
box-sizing: border-box;
}

.txtWrapB img{
width: 100%;
}

.txtWrapA{
width: 50%;
max-width: 600px;
text-align: center;
margin: 0% auto;
padding: 8% 0% 0% 0%;
box-sizing: border-box;
}

.txtWrapA h2{
margin: 0% auto 3% auto;
padding: 0%;
font-size: 3.375em;/*54px 14.4vw*/
line-height: 1.65em;
font-family: 'Noto Serif JP', serif;
font-weight: 300;
}

.txtWrapA h2 .BText{font-size: 88px;font-weight: 500;letter-spacing: 5px;margin: 0%;}
.txtWrapA h2 .GText{margin: 0% 0% 0% 6%;}
.txtWrapA h2 .GTextC{color: #16948D; font-weight: 500;}
h1.FvTextA{
width: 70%;
margin:0% auto 5% auto;
padding:2% 3%;
background-color: #0D62A5;
color: #fff;
font-size: 1.125em;/*18px;*/
text-align: center;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 500;
border-radius: 20px 0px 20px 0px;
}

h1.FvTextA span{
font-size: 2.5em;/*40px;*/
font-weight: 700;
}

h2.FvTextB{
margin:0% 2% 0% 0%;
font-size: 48px;/*6.4vw;*/
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
text-align: center;
letter-spacing: 3px;
}

/*============================================================================
取引実績
==============================================================================*/
.ClientsWrap{
width: 100%;
margin-inline: auto;
padding: 150px 0% 5% 0%;
}

/* スライダー ロゴ用 */
.swiperbox {
position: relative;
width: 100%;
}

.swiper2{
width: 100%;
height: 128px;
margin: -3% auto 0% auto;
}


.swiper-wrapper2 {
/* wrapperのサイズを調整 */
transition-timing-function: linear;
}

.swiper-slide2 {
/* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
color: #ffffff;
width: 100%;
text-align: center;
}

.wrapper .swiper-container .swiper-wrapper { transition-timing-function: linear !important;}


/*============================================================================
 Raboは創業以来
==============================================================================*/
.LeadWrap{
width: 100%;
max-width: 1200px;
margin-inline: auto;
padding: 5% 0% 0% 0%;
}

.LeadWrap h2{
width: 100%;
margin-inline: auto;
padding: 0% 0% 0% 0%;
text-align: center;
font-size: 1.875em;/*30px; 8vw;*/
line-height:  1.875em;/*30px; 8vw;*/
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
color: #3F414F;
}

.LeadWrap h2 span{
color: #16948D;
font-family: 'Noto Serif JP', serif;
font-weight: 500;
}

.LeadBox{margin: -10px auto 0px auto;list-style: none;font-family: 'Noto Sans JP', sans-serif;}
.LeadBox li{text-align:center;}
.LeadBox li:nth-child(2){margin: 80px 0px 0px 0px;}
.LeadBox li:nth-child(3){margin: 80px 0px 0px 0px;}
.LeadBox li dl dt{margin: 0px 0px 10px 0px;}
.LeadBox li dl dt img{width: 243px;}


/*============================================================================
Raboがお客様に選ばれてきた理由
==============================================================================*/

.ReasonWrap{
width: 100%;
max-width: 1200px;
margin: 0% auto;
padding:150px 0%;
}

.ReasonBox{margin: 70px 0px 0px 0px;}

.ReasonLBox{
float: left;
width: 50%;
padding: 0% 1%;
}

.ReasonRBox{
float: right;
width: 50%;
padding: 0% 1%;
}

.ReasonBox h3{
margin: 0px 0px 30px 0px;
padding: 0px 0px 0px 15px;
border-left: solid 10px #16948D;
font-size: 1.5em;/*24px; 6.4vw;*/
font-family: 'Noto Serif JP', serif;
font-weight: 500;
}

.ReasonBox p{
width: 88%;
font-family: 'Noto Sans JP', sans-serif;
line-height: 2.2em;
}


/*============================================================================
他社ASO代理店様・システム会社様との料金比較
==============================================================================*/

.ComparisionWrap{
width: 100%;
max-width: 1200px;
margin: 0% auto 10% auto;
padding: 10% 0%;
}

.ComparisionLead{
width: 100%;
margin: 5% auto 2% auto;
text-align: center;
font-family: 'Noto Sans JP', sans-serif;
}

.ComparisonBox{
width: 19%;
text-align: center;
}

.ComparisonBox ul li{
height: 70px;
list-style: none;
margin: 0% auto 15px auto; 
padding: 15px 10px;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Noto Sans JP', sans-serif;
}

.ComparisonTitBox{
background: #16948D;
border-radius: 10px 0px 0px 10px;
color:#fff;
}

.RaboComBox li,.OtherComBox li{
background: #fff;
box-shadow: 1px 1px #ACD8E6;
}

.RaboComBox li:first-child{
background: #F4ED3B;
border-radius: 10px 10px 0px 0px;
box-shadow: none;
}

.OtherComBox li:first-child{
background: #1E2F49;
color: #fff;
border-radius: 10px 10px 0px 0px;
box-shadow: none;
}

.OtherComBox li span,.RaboComBox li span {font-size: 30px;font-weight: bold;}

.RaboComBox li:last-child {color: #E56A00;}
.RaboComPrice{margin: 0px 0px 10px 0px;}


/*============================================================================
「自然流入が増えなければ無料」キャンペーン詳細
==============================================================================*/
.CampaignWrap{
width: 100%;
max-width: 1200px;
margin: 5% auto 7% auto;
padding: 50px 0px 0px 0px;
}

.CampaignLBox{
width: 50%;
padding: 20px 20px 20px 0px;
}

.CampaignLBox p{
margin: 5% 0% 0% 0%;
line-height: 2em;
font-family: 'Noto Sans JP', sans-serif;
}

.CampaignRBox{
width: 50%;
padding: 0px;
}

.CampaignRBox img{
width: 100%;
margin: 10px auto 0px auto;
}

.CampaignExBox{
width: 100%;
max-width: 1200px;
margin: 0% auto;
padding: 100px 0px 0px 0px;
text-align: center;
}

.CampaignExBox h3{
font-size: 1.875em;/*30px; 8vw;*/
font-family: 'Noto Serif JP', serif;
font-weight: 400;
margin: 0% auto;
padding: 0%;
}

.CampaignExBox p{
margin: 3% auto;
padding: 0%;
font-family: 'Noto Sans JP', sans-serif;
}


/*============================================================================
ASO対策はRaboに「丸投げ」していただくことをお奨めします
==============================================================================*/
.RecommendationWrap{
width: 100%;
max-width: 1200px;
margin: 0% auto 10% auto;
padding: 50px 0px 0px 0px;
}

.RecommendationLWrap{width: 65%;}
.RecommendationLWrap p{
width: 95%;
margin: 3% 0% 5% 0%;
line-height: 2.2em;
font-family: 'Noto Sans JP', sans-serif;
}

.RecommendationRWrap{width: 35%;}


.RecommendationBox{
width:48%;
max-width: 580px;
height: 360px;
margin: 0px auto 30px auto;
padding: 30px;
background: url(../img/2x/bg_recommendation.webp) no-repeat #fff;
background-size: contain;
border: solid 2px #95CFCB;
border-radius: 5px;
}

.RecommendationBox h4{
width: 100%;
height: 65px;
margin: 0% auto 5% auto;
padding: 0px 0px 0px 10px;
border-left: solid 10px #0D62A5;
font-size: 1.25em;/*20px; 5.333vw;*/
line-height: 1.5em;
color: #1E2F49;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
display: flex;
align-items: center;
}

.RecommendationLBox{width: 60%;}
.RecommendationRBox{width: 40%;}

.RecommendationLBox p{
width: 95%;
padding: 0px 0px 0px 10px;
font-family: 'Noto Sans JP', sans-serif;
line-height: 1.85em;
}

.MonthryLBox{
width: 60%;
margin: 0% auto 7% auto;
padding: 0px 0px;
}

.MonthryRBox{width: 40%;}

.MonthryLBox p{
width: 100%;
padding: 0px;
font-family: 'Noto Sans JP', sans-serif;
line-height: 1.85em;
}

.MonthryRBox table {width: 90%;font-family: 'Noto Sans JP', sans-serif;margin: 0% 0% 0% 50px;}
.MonthryRBox table tr th{background: #95CFCB; color: #fff;}
.MonthryRBox table tr td{background: #EAF6F5;font-size: 24px;}
.MonthryRBox table tr td span{display: inline-block;font-size:16px;}
.MonthryRBox table tr td .ScapA{vertical-align:bottom;margin:0px 0px 0px 0px;}
.MonthryRBox table tr td .ScapB{vertical-align:top;margin:3px 0px 0px 0px;}
.MonthryRBox table tr td i{font-size: 16px;margin:10px 5px 0px 5px;vertical-align:top;}
.MonthryRBox table tr th,.MonthryRBox table tr td{padding: 15px 20px;border-bottom:solid 5px #fff;}


/*============================================================================
ダウンロード数改善実績
==============================================================================*/
.AchievementWrap{
width: 100%;
max-width: 1200px;
margin: 10% auto 5% auto;
padding: 100px 0px 20px 0px;
}

.AchievementLead{
margin: 5% auto;
padding: 0% 3%;
text-align: center;

}

.AchievementBox{
width: 50%;
max-width: 580px;
min-height: 346px;
margin: 0% auto 2% auto;
padding: 25px;
background: #E9F1F7;
border-radius: 10px;
}

.AchievementWrap h4{
font-size: 1.25em;/*20px; 5.333vw;*/
color: #0D62A5;
margin: 0px 0px 15px 0px;
font-family: 'Noto Sans JP', sans-serif;
}

.AchievementWrap h4 i{
display: inline-block;
width: 65px;
height: 65px;
margin: 0px 10px 0px 0px;
border-radius: 10px;
vertical-align:middle;
}

.AchievementWrap table {width: 100%;font-family: 'Noto Sans JP', sans-serif;}
.AchievementWrap table tr th{background: #95CFCB; color: #fff;}
.AchievementWrap table tr td{background: #fff;font-size: 16px; min-width: 150px;}
.AchievementWrap table tr td span{display: inline-block;font-size:16px;}
.AchievementWrap table tr td .ScapA{vertical-align:bottom;margin:0px 0px 0px 0px;}
.AchievementWrap table tr td .ScapB{vertical-align:top;margin:3px 0px 0px 0px;}
.AchievementWrap table tr td i{font-size: 16px;margin:4px 5px 0px 5px;vertical-align:top;}
.AchievementWrap table tr th,.AchievementWrap table tr td{padding: 8px 12px;border-bottom:solid 5px #E9F1F7;}

.DIimgBox{
width: 100%;
margin: 22px 0px 0px auto;
text-align: right;
}

.DIimgBox img{margin: 0px 0px 0px auto;}

.IcoHome{
background: url(../img/ico_app_home.webp) no-repeat #0D62A5;
background-size: contain;
}

.IcoGame{
background: url(../img/ico_app_game.webp) no-repeat #0D62A5;
background-size: contain;
}

.IcoLive{
background: url(../img/ico_app_live.webp) no-repeat #0D62A5;
background-size: contain;
}

.IcoDispatch{
background: url(../img/ico_app_dispatch.webp) no-repeat #0D62A5;
background-size: contain;
}

.SlideBox{
width: 1200px;
margin: 50px auto 0px auto;
}

.swiper-wrapperA {
/* wrapperのサイズを調整 */
width: 1200px;
margin: 0px auto;
padding:0px ;
}

.swiper-slideA {
/* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
width: 100%;
max-width: 320px;
margin: 0px 10px;
height: 100%;
padding:20px;
background: #E9F1F7;
border-radius: 5px;
}

/*
.swiper-pagination-bullet {
  width: 12px !important;
  height: 12px !important;
  margin: 0 0 0 10px !important;
  background: #fff;
}

.swiper-pagination-bullet:first-child {
  margin: 0 !important;
}
*/

/*============================================================================
昨今ASO対策の重要性は高まるばかりです
==============================================================================*/

.ImportanceWrap{
width: 100%;
max-width: 1200px;
margin: 0px auto;
padding: 150px 0% 0% 0%;
}

.ImportanceLBox{
width: 50%;
padding: 80px 20px 20px 0px;
}

.ImportanceLBox img{
margin: 50px 20px 20px auto;
}

.ImportanceRBox{
width: 50%;
padding: 80px 40px;
}

.ImportanceRBox p{
line-height: 2em;
font-family: 'Noto Sans JP', sans-serif;
}

/*============================================================================
よくある質問
==============================================================================*/

.FaqWrap{
width: 100%;
max-width: 1200px;
margin: 0px auto;
padding: 150px 0% 0% 0%;
}

.qa-list{
width: 100%;
max-width: 1200px;
margin:0% auto;
padding: 5% 0% 0% 0%;
font-family: 'Noto Sans JP', sans-serif;
}

.qa-list dl {
margin: 0px;
padding: 30px 0px 30px 50px;
border-bottom: 1px solid #ccc;
}

.qa-list dl:first-child { border-top: 1px solid #ccc;}

.qa-list dl dt {
margin: 0px;
font-weight: bold;
color: #5497D5;
}

.qa-list dl dt i,.qa-list dl dd i{margin: 0px 10px 0px 0px;}
.qa-list dl dt,.qa-list dl dd{padding-left:1em;text-indent:-1em;}


.qa-list dl dd {
margin: 20px 0px 0px 0px;
line-height: 32px;
}

/*============================================================================
お問いあわせ
==============================================================================*/

.ContactWrap{
width: 100%;
max-width: 900px;
margin: 0px auto;
padding: 150px 0% 10% 0%;
}




/*============================================================================
footer#globalFooter
==============================================================================*/

/* page-top */
#pageTop {
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 100;
}
#pageTop a {
	display: block;
	background: url(../img/gotop.webp);
	background-size: 68px 68px;
	width: 68px;
	height: 68px;
	text-indent: -9999px;
}
#pageTop a:hover {
	background: url(../img/gotop.webp);
	background-size: 68px 68px;
}

footer {
	width: 100%;
	clear: both;
	margin: 0 ;
background: #FFFFFF; /* Old browsers */

	}
#footOuter {
	clear: both;
	width: 100%;
	padding:36px 0px 36px 0px;
	margin: 0 auto;
	}

.footMiddle{
	width: 1200px;
	margin: 0 auto;
	padding-top: 40px;
}

/* footRight */
#footRight {
	margin: 0 20px 0 40px;
	width: 280px;
	float: right;
	font-size: 14px;
	color: #999;
	line-height: 180%;
}
#footRight a{
	color: #999;
}

/* footLeft */
#footLeft {
	margin: 0 auto;
	width: 860px;
	float: left;
}
.footList{
	width: 150px;
	float: left;
	vertical-align: top;
	margin: 0 0px 0 84px;
	text-align: left;
	padding-left: 16px;
	border-left: 1px solid #999;
}
.footList li.footMenu{
	list-style: none;
	padding: 5px 0 5px 0;
}
/*
.footList li.footMenu:first-child{
	font-weight: bold;
	font-size: 16px;
	color: #FFF;
}
*/
.footList li.footMenu a{
	font-size: 100%;
	color: #999;
}
.footList li.footMenu a:hover{
	color: #999;
	text-decoration: underline;
}

/* footCenter */
#footLogoBox {
clear: both;
width: 100%;
max-width: 1200px;
margin: auto;
}

#footLogoBox a.footlogo{
display: block;
text-indent: -9999px;
margin: 0px auto 36px auto;
width: 150px;
height: 40px;
background: url(../img/2x/logo.webp?=v1) no-repeat;
background-size: 150px 40px;
}

#footBtm{
	width: 100%;
	background: #FFF;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 100%;
	text-align: center;
	color: #333333;
}