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

@media screen and (max-width:990px){

header{
	width: 100%;
	height:80px!important;
}

h2{
	font-size: 18px;
}
	
h3{
	font-size: 18px;
}

.pc{
	display: none;
}

.sp{
	display: block;
}
	
.mb30{
	margin-bottom: 20px!important;
}
	
.mb80{
	margin-bottom: 60px!important;
}
	
.wrapper,.wrapper_960{
	width: 94%;
	margin-right: 3%;
	margin-left: 3%;
	max-width: 1200px;
}

#gnav{
	display: none;
}

#head_logo{
	margin-top: 10px;
	margin-left: 0;
	width: 210px;
}

#head_logo img{
	width: 90%;
}

p,td,th{
	font-size: 15px;
	line-height: 1.8;
	color: #333;
}
	
.sp_br{
	display: inline-block;
}
	

	
/*---------------------トップ画像 SP-------------------------------*/

.main{
	width: 100%;
	height: auto;
	margin-top: 80px;
	margin-bottom: 70px;
}

.main a{
	position:static;
	width:100%;
}

.main img{
	position: static;
}

.top_img{
	position: static;
	width: 100%;
	pointer-events: none;
}

.top_img img{
	width: 100%;
}

.c-video{
	position:static;
	width:100%;
}





/*----------------トップページ導入部分 SP------------------*/

.top_intro_left{
	width: 100%;
	margin-bottom: 30px;
}

.top_intro_left h2{
	font-size: 21px;
	margin-bottom: 15px;
}

.top_intro_right{
	width: 100%;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}
	
.top_intro_right img{
	width: 100%;
}




/*---------------------トップページ活用部分------------------*/


#top_use{
	margin-bottom: 40px;
}

#top_use h2{
	font-size: 21px;
	text-align: center;
	margin-bottom: 20px;
	display: inline-block;
}

#top_use h2::before{
	left: -20px;
	top: -25px;
	width: 80px;
	height: 100px;
}

.top_use_box{
	width: 48%;
	margin-bottom: 20px;
}

.top_use_upper{
	background-color: #ffeeee;
	padding: 15px;
	margin-bottom: 15px;
	position: relative;
}

.top_use_upper::after{
	content: "";
	background-image: url("../images/top_use_under_arrow.svg");
	background-repeat: no-repeat;
	width: 58px;
	height: 14px;
	position: absolute;
	bottom: -14px;
	left: calc(50% - 29px);
}

.top_use_upper .flex_bet_pc img{
	width: 60px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.top_use_box h3{
	font-size: 18px;
	margin-bottom: 15px;
}





/*---------------------トップページサンプル動画部分 SP-----------------*/

.light_red_bg{
	padding-top: 60px;
	padding-bottom: 60px;
}

.general_h2{
	margin-bottom: 25px;
}

.general_h2 span{
	font-family: "Belanosima", sans-serif;
	font-weight: 400;
	font-size: 30px;
	color: #dd0000;
	display: inline-block;
	margin-bottom: 10px;
}

.red_btn,.orange_btn{
	width: 70%;
	border-radius: 5px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}

.red_btn a,.orange_btn a{
	padding: 15px;
}

.video {
	display: none;
}
	
.player{
	width: 100%;
}




/*---------------------ループテンプレート部分 SP---------------------*/

.d-demo__wrap {
	display: flex;
	overflow: hidden;
	margin-top: 25px;
	margin-bottom: 40px;
}

.d-demo__item{
	width: 240px;
	height: 130px;
}

.d-demo__item img{
	width: 100%;
}




/*---------------------SHO-VIEの独自サービス SP-------------------*/

.red_bg{
	padding-top: 60px;
	padding-bottom: 60px;
	margin-bottom: 60px;
}

#original_h2{
	font-size: 21px;
	margin-bottom: 20px;
}

.original_box{
	background-color: #fff;
	width: 48%;
	border-radius: 10px;
	margin-bottom: 20px;
}
	
.original_box img{
	width: 100%;
}

.original_box h3{
	font-size: 18px;
	margin-bottom: 10px;
}

.original_under{
	padding: 15px;
}




/*---------------------トップページニュース部分 SP-------------------*/

.news_table{
	max-width: 750px;
	width: 100%;
	margin-left: auto!important;
	margin-right: auto!important;
	margin-bottom: 50px;
}

.news_table td{
	padding-right: 20px;
	padding-bottom: 5px;
	line-height: 1.5;
	font-size: 15px;
	vertical-align: middle;
}

.red_box{
	background-color: #ddd;
	width: 100px;
	height: 40px;
	padding: 5px;
	display: table-cell;
	vertical-align: middle;
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	border-radius: 5px;
}

.white_btn{
	width: 60%;
	border-radius: 5px;
	margin-bottom: 20px;
}

.white_btn a{
	padding: 15px;
}





/*---------------------LONVIEコーナー SO----------------------*/

#lonvie_bg{
	padding-bottom: 60px;
	padding-top: 60px;
}

#lonvie_top{
	display: block;
	width: 100%;
	margin-bottom: 30px;
}

#lonvie_top img{
	margin-left: 0px;
	margin-top: 0px;
	width: 50%;
}

#lonvie_top h2{
	font-size: 21px;
	margin-left: 0px;
}

#lonvie_top h2 span{
	font-size: 60px;
}

.lonvie_3box{
	width: 32%;
	padding: 15px;
}

#lonvie_linkage{
	padding: 15px 20px;
	margin-bottom: 30px;
}

#lonvie_linkage p{
	font-size: 18px;
	margin-bottom: 20px;
}

#lonvie_linkage img{
	width: 100%;
	max-width: 480px;
}

.lonvie_btn{
	width: 60%;
	margin-bottom: 15px;
}

.lonvie_btn a{
	padding: 15px;
}




/*---------------------フッター----------------------*/

footer{
	text-align: center;
}	
	
#footer_wrap{
	display: block;
	justify-content: space-between;
	margin-left: 3%;
	margin-right: 3%;
	border-bottom: solid 1px #fff;
	align-items: center;
	padding-bottom: 20px;
	margin-bottom: 20px;
}

#foot_left{
	width: 210px;
	margin-left: auto;
	margin-right: auto;
}

#foot_right{
	margin-top: 10px;
	display: block;
}

#foot_right a {
	position: relative;
	display: block;
	text-decoration: none;
	padding: 0px 0 10px 0;
	font-size: 14px;
}

#foot_right {
	list-style: none;
	overflow: hidden;
	padding-top: 5px;
	display: block;
}
 
#foot_right li {
	font-size: 15px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	text-align: center;
}

#foot_right li:first-child {
  margin-left: 0px;
}

#foot_right .dl_btn{
	margin-top: 10px!important;
}

#foot_right .dl_btn a{
	color: #d00!important;
}

#foot_right .contact_btn{
	margin-top: 10px!important;
}

#foot_right .contact_btn a{
	color: #d00!important;
}

#foot_under{
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

#foot_under li{
	margin-left: 20px;
}

#foot_under li:first-child{
	margin-left: 0px;
}

footer p{
	text-align: center;
	color: #fff;
	margin-left: auto;
	margin-right: auto;
}
	
.dl_btn{
	display: block;
	padding: 10px;
	margin-top: 10px!important;
	height: auto;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

.contact_btn{
	display: block;
	padding: 10px;
	margin-top: 10px!important;
	height: auto;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}
	
.dl_btn a,.contact_btn a{
		text-align: center;
}




/*🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲活用シーンページ　SP🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

#scene .lower_main h1{
	top: 35%;
}

#scene .lower_main p{
	top: 65%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
	left: 50%;
	font-size: 16px;
	font-weight: 500;
	width: 80%;
}

#scene_top_band{
	padding: 10px;
	margin-bottom: 50px;
}

#scene_top_band h2{
	font-size: 21px;
}


.scene_case_block{
	width: 100%;
	margin-bottom: 20px;
}

.scene_case_block h3{
	font-size: 16px;
	padding: 5px 20px;
	margin-bottom: 10px;
}

.case_btn{
	width: 100%;
}

.case_btn a{
	padding: 15px;
	padding-right: 30px;
}


.case_btn a::after{
	width: 20px;
	height: 10px;
	position: absolute;
	top: calc(50% - 5px);
	right: 15px;
}

.scene_solution {
	padding: 10px;
	padding-bottom: 20px;
}

.scene_solution h2{
	font-size: 21px;
	margin-bottom: 20px;
}

.scene_ttl{
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 40px;
}

.scene_ttl span{
	padding: 5px 20px;
	margin-right: 15px;
}

.scene_solution_block{
	width: 100%;
}

.scene_solution_block h3{
	padding: 10px 20px;
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: 600
}

.scene_solution_block h4{
	font-size: 16px;
}

.scene_solution_block p{
	font-size: 14px;
	margin-bottom: 30px;
}

.scene_solution_block img{
	width: 100%;
	max-width: 480px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.scene_flow_bg{
	font-size: 21px;
	padding: 30px;
	margin-bottom: 60px;
}

.scene_flow_bg::after{
	width: 60px;
	height: 15px;
	bottom: -13px;
	left: calc(50% - 30px);
}

#scene_flow_img{
	margin-bottom: 30px;
	margin-top: 40px;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}	
	
	
	
	
	

/*🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲サービス・料金　SP🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/

	
.lower_main{
	margin-top: 70px;
	overflow: hidden;
	position: relative;
	width: 100%;
	margin-bottom: 50px;
	text-align: center;
}

.lower_main img {
	text-align: center;
	width: 100%;
	height: 240px;
	object-fit: cover;
}

.lower_main h1{
	position: absolute;
	font-size: 21px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
	filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
}

#service_sec h2{
	font-size: 30px;
	margin-bottom: 15px;
}

#service_sec h2 span{
	font-size: 48px;
}

.service_block{
	padding: 20px;
	width: 100%;
	position: relative;
	z-index: 1;
}

.service_right{
	margin: 0 0 0 auto;
}

#service_sec h3{
	font-size: 21px;
	margin-bottom: 10px;
	padding-bottom: 8px;
}

#service_sec h3 span{
	font-size: 150%;
	display: block;
	margin-right: 0px;
}

.service_img,.service_img_2{
	display: none;
}

.service_main_p{
	font-size: 30px;
	margin-bottom: 10px;
}

.service_main_p span{
	font-size: 21px;
}
	
.service_block table{
	margin-bottom: 20px;
}

.service_block th{
	font-size: 16px;
	padding-bottom: 10px;
}

.service_block td{
	font-size: 16px;
	padding-bottom: 10px;
}

.service_block td img{
	width: 48px;
}

.white_bg{
	padding-top: 50px;
	padding-bottom: 50px;
}

.anchor_btn{
	width: 80%;
	margin-bottom: 20px;
}

.anchor_btn a{
	display: block;
	padding: 5px;
	color: #dd0000;
}

.flow_block{
	padding: 20px;
	margin-bottom: 20px;
}

.flow_number{
	font-size: 36px;
	margin-right: 20px;
}

.flow_box h3{
	font-size: 20px;
	margin-bottom: 8px;
}
	
.flow_icn{
	width: 100px;
	margin-left: auto;
	margin-right: auto;
}
	
	
	
	
/*🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲サンプル動画 SP🔲🔲🔲🔲🔲🔲🔲🔲🔲🔲*/


/*フィルター*/
.search_wrap {
	margin-top: 30px;
	padding: 20px;
	margin-bottom: 30px;
	display: flex;
}

.search_box{
	display: block;
	margin-right: 20px;
}

.search_box:first-child{
	margin-bottom: 25px;
}

.search_box dt{
	font-size: 16px;
	width: 100%;
	display: block;
}

.search_box dd{
	margin-left: 10px;
	margin-right: 10px;
	width: 100%;
}


/*リスト*/
.search-list li {
    box-sizing: border-box;
    width: 48%;
    padding: 15px;
	margin-right: 2%;
	margin-bottom: 2%;
}

.search-list li:nth-child(3n){
	margin-right: 0%;
}
    
.search-list span {
	visibility: hidden; 
}

.search-list img{
	width: 100%;
}




/*動画部分*/
.sample_wrap {
	display: flex;
	flex-wrap: wrap;
	position: relative;
}

.sample_wrap li{
	width: 48%;
	margin-bottom: 30px!important;
	margin-right: 4%!important;
}

.sample_wrap li:nth-of-type(3n){
	margin-right: 4%!important;
}
	
.sample_wrap li:nth-of-type(2n){
	margin-right: 0%!important;
}
	
@media screen and (max-width:480px){
	.sample_wrap li{
		width: 100%;
		margin-bottom: 30px!important;
		margin-right: 0%!important;
	}

	.sample_wrap li:nth-of-type(3n){
		margin-right: 0%!important;
	}
}

.sample_wrap li img{
	width: 100%;
	height: auto;
}

.sample_wrap li p{
	line-height: 1.5em;
	font-size: 13px;
	text-align: center;
	color: #555;
	width: 100%;
	padding: 10px;
	background-color: #fff;
 }

.sample_wrap li p span{
	visibility: visible;
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-bottom: 5px;
}



/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼よくある質問SP▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
	
.cp_qa .cp_actab label td {
	padding: 15px;
	padding-right: 30px;
}

.a_icn {
	color: #fff;
	text-align: center;
	width: 60px;
	padding-top: 15px;
	padding-bottom: 15px;
	display: inline-block;
	margin-right: 15px;
}
	
/* 答え */
.cp_qa .cp_actab .cp_actab-content {
	padding: 0 0 0 15px;
}

/* --質問の＋アイコン */
.cp_qa .cp_actab label::after {
	font-size: 1.5em;
	line-height: 2em;
	top: calc(50% - 1em);
	right: -10px;
	width: 1.5em;
	height: 1.5em;
}
	
/* ▼タブ機能の掲載領域の装飾(※必須ではありません) */
.tabbox { 
	margin-left: auto;
	margin-right: auto;
	padding: 0.5em;
	width: 100%;
}

/* ▼タブ機能を制御するラジオボタン(非表示にする) */
.tabbox input {
	display: none;
}

/* ▼タブ(共通装飾＋非選択状態の装飾) */
.tab {
	display: block;
}

/* ▼タブの中身(共通装飾＋非選択状態の装飾) */
.tabcontent {
	padding: 0.3em;
}

.q_icn {
	width: 60px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-right: 0px;
}
	
	
	


/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼お問い合わせ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/


#form_wrap {
	padding: 20px;
}

.formTable{
	margin-top: 10px;
	margin-bottom: 30px;
}


.formTable td,.formTable th{
	display: block;
	padding:5px;
	width: 100%;
	
}
	
.formTable td{
	padding-bottom: 20px;
}

.formTable input,.formTable select{
	height: 40px;
	font-size: 16px;
	padding-left: 10px;
}

.formTable textarea{
	border-width: 1px;
	font-size: 16px;
	padding-left: 15px;
}

#submit_btn{
	width: 80%;
	padding: 15px;
	margin-bottom: 20px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
}

#reset_btn{
	width: 80%;
	padding:15px;
	margin-bottom: 20px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
}

#submit_btn:hover,#reset_btn:hover{
	opacity: 0.9;
}

.ppcy {
	margin-bottom: 30px;
	margin-top: 30px;
}

.ppcy h2 {
	font-size: 21px;
	margin-bottom: 10px;
	text-align: center;
}

.ppcy .txtBoxWrap {
	height: 250px;
	overflow: auto;
	padding: 15px;
}


	
	
	

/*---------------------GMO-------------------------------*/
	
.l-heading-cont {
	font-size: 24px;
}
	
.top_p-txt{
	text-align: left!important;
}

.c-nap h2 {
	font-size: 21px;
}	
	


	

	
/*-------------------ハンバーガーSP-----------------------*/

.hamburger-menu{
	display: block;
}
		
.menu-content {
    width: 70%;
    height: 100%;
    position: fixed;
    top: 0;
    right: -100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 9000;
    background-color: rgba(200, 0, 0, 0.85);
    transition: all 0.5s;/*アニメーション設定*/
}

#menu-btn-check:checked ~ .menu-content {
    right: 0;/*メニューを画面内へ*/
}

.menu-content ul {
    padding: 20px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 14px;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 20px 15px 20px 0;
    position: relative;
	font-weight: bold;
}
	
.muttume{
    padding: 10px 15px 5px 0!important;
}
	
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 24px;
}

.menu-content img{
	width: 50%;
	margin-bottom: 20px;
}
	
.menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 9200;
    background-color: #d00;
	border: solid 1px #fff;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
	
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
	
#menu-btn-check {
    display: none;
}

	



}