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


/* 基本CSS */
@media screen and (min-width:783px) {
.sp{
	display: none
}
}
@media screen and (max-width:782px) {
.pc{
	display: none
}
}

@media screen and (min-width:1801px) {
.contents{
	max-width: 1200px; width: 100%; margin: 0px auto
}
.contents_02{
	max-width: 970px; width: 100%; margin: 0px auto
}
.bg_padding{
	padding: 100px 0
}
}
@media screen and (max-width:1800px) {
.contents{
	max-width: 1200px; width: 68%; margin: 0px auto
}
.contents_02{
	max-width: 970px; width: 68%; margin: 0px auto
}
.bg_padding{
	padding: 5.5% 0
}
}
@media screen and (max-width:782px) {
.contents{
	width: 90%;
}
.contents_02{
	width: 90%;
}
.bg_padding{
	padding: 12% 0 10%
}
}


/* フォントCSS */
body {
	margin: 0;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
body p, body span, body dl, h1, h2, h3, h4, h5, h6{
    transform: rotate(0.03deg);
    -moz-transform: rotate(0.03deg);
    -ms-transform: rotate(0.03deg);
    -o-transform: rotate(0.03deg);
    -webkit-transform: rotate(0.03deg);
}
/* 
body {
	font-family:'Barlow Semi Condensed', 'Noto Sans JP', sans-serif !important;
	color: #504346 !important
}
.weight100 {font-weight:100 !important}
.weight200 {font-weight:200 !important}
.weight300 {font-weight:300 !important}
.weight400 {font-weight:400 !important}
.weight500 {font-weight:500 !important}
.weight600 {font-weight:600 !important}
.weight700 {font-weight:700 !important}
.weight900 {font-weight:900 !important}
.en{font-size: 120%; letter-spacing: 1px}
*/
h1,h2,h3,h4{
	margin: 0
	}

p{
	font-weight:400 !important; margin: 0
}
h1{
	font-weight:bold !important; letter-spacing:4px;
	}
h2 {
	font-weight:bold !important; 
	}
h3 {
	font-weight:bold !important; letter-spacing:2px
}
h4 {
	letter-spacing:2px
}
table tr td{
	font-weight:400 !important; letter-spacing:2px
}
table {
	border-collapse:collapse;
	width: 100%
}

@media screen and (min-width:1801px) {
p{
	font-size: 17px; line-height: 32px;
}
h1{
	font-size: 50px; line-height: 98px;
	}
h2 {
	font-size: 35px; line-height: 60px;
	}
h3 {
	font-size: 24px; line-height:38px;
}
h4 {
	font-size: 20px; line-height:38px;
}
table tr td{
	font-size: 17px; line-height: 32px;
}

}

@media screen and (max-width:1800px) {
p{
	font-size: .95vw; line-height: 180%;
}
h1{
	font-size: 2.8vw; line-height: 180%;
	}
h2 {
	font-size: 1.9vw; line-height: 180%;
	}
h3 {
	font-size: 1.2vw; line-height: 160%;
}
h4 {
	font-size: 1.1vw; line-height: 160%;
}
table tr td{
	font-size: .95vw; line-height: 180%;
}
.luxbar-item a {
	font-size: 12px;
padding: 18px 14px 18px 14px !important;
}
}

@media screen and (max-width:782px) {
p{
	font-size: 13px !important; line-height: 24px !important;
}
p span{
	font-size: 13px !important; line-height: 24px !important;
}
h1{
	font-size: 22px !important; line-height: 32px !important;
}
h2 {
	font-size: 20px !important; line-height: 32px !important;
}
h3 {
	font-size: 17px !important; line-height: 28px !important;
}
h4 {
	font-size: 14px !important; line-height: 25px !important;
}
table tr td{
	font-size: 13px !important; line-height: 24px !important;
}
table tr td{
	display: block;
	width: 100% !important
}
.luxbar-item a {
	font-size: 15px !important;
	padding: 18px 0 18px 24px !important;
}
}

.center {
	text-align: center
}
.right{
	text-align: right
}
.left{
	text-align: left
}
.wt{
	color: #fff
}
.bb{
	text-decoration:underline
}


/* column_CSS */

.box {
	display: flex;flex-wrap: wrap
}

.box .column4{
	width: 22%;
	margin-right: 3%;
	margin-bottom: 3%
}
.box .column4:nth-child(4n){
	margin-right: 0
}

.box .column3{
	width: 31%;
	margin-right: 3%;
	margin-bottom: 3%
}
.box .column3:nth-child(3n){
	margin-right: 0
}
.box .column2{
	width: 48%;
	margin-right: 3%;
	margin-bottom: 3%
}
.box .column2:nth-child(2n){
	margin-right: 0
}


/* column(SP)_CSS */
@media screen and (max-width:782px) {
.box .column4{
	width: 100%;
	margin-right: 0;
	margin-bottom: 5%
}
.box .column4:nth-child(4n){
	margin-right: 0
}
.box .column3{
	width: 100%;
	margin-right: 0;
	margin-bottom: 5%
}
.box .column3:nth-child(3n){
	margin-right: 0
}
.box .column2{
	width: 100%;
	margin-right: 0;
	margin-bottom: 5%
}
.box .column2:nth-child(2n){
	margin-right: 0
}
}


/* ボタンリンク_CSS */
.btn_link {
	position: relative;
	transition: all 0.3s ease-in-out;
	filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.3));
}
.btn_link:hover{
	opacity: 0.7
}
.btn_link a{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	right:0
}
.btn_link p{
	color: #fff;
	font-weight: 200;
	padding: 2% 0 2% 6%
}

@media screen and (max-width:1920px) {
.btn_link {

}
}

@media screen and (max-width:782px) {
.btn_link {
	width: 100% !important;
}
.btn_link p{
	padding: 3% 0 3% 5% !important;
}
}


/* header_CSS */
header{
	padding: 20px 5% 15px 5%;
	position: fixed;
	width: 90%;
	background: #fff;
	top:0;
	z-index: 99
}
header .logo{
	float: left;
	width: 200px
}
header .join{
	background: #000;
	width: 150px;
	color:#fff;
	padding: 10px 0;
	text-align: center;
	float: right;
	border-radius: 50px;
	position: relative
}
header .join a{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0
}
@media screen and (max-width:782px) {
header{
	padding: 15px 5% 15px 5%;
}
header .logo{
	float: left;
	width: 200px;
	padding-top: 10px
}
header .logo img{
	width: 80%
}
}


/* MV_CSS */
#MV{
	padding: 10% 0 15%;
	margin-top: 80px;
	background: url("img/MV_bg.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
	position: relative;
}
#MV .MV_txt{
	width: 58%
}
#MV h1 span{
	background: linear-gradient(90deg, #f18f31, #d97868 30%, #549dd6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
#MV h1 {
	font-size:3.3vw;
	line-height: 140%
}
#MV h3 {
	font-size:1.5vw;
	line-height: 140%;
	margin-top: 2%
}
#MV .logo{
	width: 30%;
	margin-bottom: 2%
}


@media screen and (max-width:782px) {
#MV{
	padding: 15% 0 45%;
	background: url("img/MV_bg_sp.png");
	background-size: cover;
	background-position: center bottom;
}
#MV .MV_txt{
	width: 90%
}
#MV h1 {
	font-size:6.5vw !important;
	line-height: 140% !important;
}
#MV h3 {
	font-size:3vw !important;
	line-height: 150% !important;
	margin-top: 2%
}

}


/* 案件例 */
#sec01{
	background:linear-gradient(#ebecf1 60%, #fff 60%);
}
#sec01 h1{
	margin-bottom: 50px
}
#sec01 .column3 .ex{
	filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.3));
	background: #fff;
	border-radius: 10px;
}
#sec01 .column3 .ex .txt{
	width: 90%;
	padding: 25px 0;
	margin: 0 auto
}
#sec01 .column3 .ex .txt h3{
	margin-bottom: 10px

}


/* 選ばれる理由 */
#sec02_01{
	padding: 10% 0;
	background: url("img/bg_01.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right;
	position: relative;
}
#sec02_01 .txt{
	width: 45% !important
}
#sec02_01 .blanc{
	width: 50% !important
}

@media screen and (max-width:782px) {
#sec02_01{
	padding: 15% 0 45%;
	background: url("img/bg_01.png");
	background-size: cover;
	background-position: center bottom;
}
#sec02_01 .txt{
	width: 100% !important
}
}

#sec02_02{
	padding: 10% 0;
	background: url("img/bg_02.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right;
	position: relative;
}
#sec02_02 .txt{
	width: 45% !important
}
#sec02_02 .blanc{
	width: 50% !important
}
@media screen and (max-width:782px) {
#sec02_02{
	padding: 15% 0 45%;
	background: url("img/bg_02.png");
	background-size: cover;
	background-position: center bottom;
}
#sec02_02 .txt{
	width: 100% !important;
	text-align: right
}
}

#sec02_03{
	padding: 10% 0;
	background: url("img/bg_03.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right;
	position: relative;
}
#sec02_03 .txt{
	width: 45% !important
}
#sec02_03 .blanc{
	width: 50% !important
}

@media screen and (max-width:782px) {
#sec02_03{
	padding: 15% 0 45%;
	background: url("img/bg_03.png");
	background-size: cover;
	background-position: center bottom;
}
#sec02_03 .txt{
	width: 100% !important
}
}

#sec02_04{
	padding: 10% 0;
	background: url("img/bg_04.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right;
	position: relative;
}
#sec02_04 .txt{
	width: 45% !important
}
#sec02_04 .blanc{
	width: 50% !important
}
@media screen and (max-width:782px) {
#sec02_04{
	padding: 15% 0 45%;
	background: url("img/bg_04.png");
	background-size: cover;
	background-position: center bottom;
}
#sec02_04 .txt{
	width: 100% !important;
	text-align: right
}
}


/* サービスの流れ_CSS */
#sec03{
	padding: 15% 0;
	background: url("img/bg_05.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;

	position: relative;
}
#sec03 h1{
	margin-bottom: 50px;
	color: #fff
}


/* DX領域で〇〇年の実績_CSS */
#sec04 {
	overflow: hidden;
	padding: 15% 0
}
#sec04 .column2:nth-child(1){
	position: relative;
	z-index: 1;
	width: 50%
}
#sec04 .column2:nth-child(2){
	position: relative;
	width: 45%
}
#sec04 .column2 img{
	width: 130%;
	position: absolute;
	right: 0;
	top:-80%
}
#sec04 .column2:nth-child(2) p{
	width: 130%;
	position: absolute;
	right: 0;
	top:200%;
	font-size: 12px !important;
	color:#707070
}
#sec04 h1{
	margin-bottom: 30px;
}

@media screen and (max-width:782px) {
#sec04 .column2:nth-child(1){
	width: 100%
}
#sec04 .column2:nth-child(2){
	width: 100%
}
#sec04 .column2 img{
	width: 100%;
	position: relative;
	right: 0;
	top:0
}
#sec04 .column2:nth-child(2) p{
	width: 100%;
	position: relative;
	right: 0;
	top:0;
	font-size: 12px !important
}
}


/* 情シスDX副業アカデミー開校_CSS */
#sec05{
	background: rgb(241,144,50);
background: linear-gradient(90deg, rgba(241,144,50,1) 0%, rgba(218,121,105,1) 42%, rgba(85,157,214,1) 100%);
}

#sec05 p{
	font-weight:bold
}
#sec05 img{
	margin-top:-12%
}
#sec05 h2{
	margin: 30px 0 10px;
}
#sec05 .box{
	background:#fff;
	border-radius:10px;
	padding:10px 0
}
#sec05 .column1{
	width: 100%;
	padding:10px 0;
	border-bottom:1px dashed #000
}
#sec05 .column1:nth-child(3){
	border-bottom:0px dashed #000
}
#sec05 .column1 table{
	width: 90%;
	margin:0 auto;
}
#sec05 .column1 table tr td{
	width: 90%;
	margin:0 auto;
}
#sec05 .column1 .sec{
	width:30%;
	text-align:center;
}
#sec05 .column1 .sec h3{
	background:#000;
	color: #fff;
	padding:5px 0;
	border-radius:50px;
	width:90%
}

@media screen and (max-width:782px) {
#sec05 p{
	max-width: 100%;
	width: 100%;
	padding:5% 0 3%
}
#sec05 .column1{
	padding:20px 0;
}
#sec05 .column1 table tr td{
	width: 100%;
	margin:0 auto;
}
#sec05 img{
	margin-top:-20%
}
#sec05 .column1 .sec h3{
	width:100%;
	margin-bottom:10px
}
#sec05_2 .column1 .sec{
	width: 100%
}
}


/* FAQ */

#faq{
	background: #ebecf1
}
#faq h1{
	margin-bottom: 50px
}
.faq_Q {
	padding:0;
	margin-bottom: 10px;
	background: #fff;
	border-radius: 10px
}
.toggle {
    display: none;
    }
.Label {
    display: block;
	padding: 3% 0 3% 3%;
}
.Label:hover {
	background: #f9f7f9;
	border-radius: 10px
}

.Label img{
    position: absolute;
	left: -10px
}
.Label p{
   margin: 0;
	font-weight: bold !important;
}

.Label::before{	
    content:"";
    width: 30px;
    height: 30px;
    position: absolute;
    top:calc( 30% - 3px );
    right: 25px;
	background: url("img/plus.png");
	background-size: 100% 100%;
    transition: all 0.3s;
}
.Label,
.content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s
}
.content {
    height: 0;
    margin-bottom:10px;
    overflow: hidden;
    width: 85%;
    margin:0 auto;
    padding: 0 1em 0 4em;
}
.content img{
	max-width: 230px;
	width: 35%;
	margin-top: 10px
}
.content p{
	margin: 0;
	width: 90%
}
.content .name{
	border-bottom: 1px solid #c08586;
	padding-bottom: 10px;
	margin-bottom: 10px
}

.toggle:checked + .Label + .content {
    height: auto;
    transition: all .3s;
    padding: 1em 0 1em 2em;
    width: 100%;
}
.toggle:checked + .Label::before {
    transform: rotate(-180deg) !important;
	background: url("img/minus.png");
	background-size: 100%;
	background-repeat: no-repeat;
    transition: all 0.3s;
}

@media screen and (max-width:1480px) {
.faq_Q {
	padding:0;
}
.Label {
	padding: 3% 0 3% 3%;
}
.Label img{
	left: 0;
	width: 5.5%
}
.Label::before{	
    width: 20px;
    height: 20px;
    top:calc( 35% - 3px );
    right:3%;
}
.content {
    margin-bottom:5%;
    width: 85%;
    margin:0 auto;
    padding: 0 1em 0 2em;
}
.toggle:checked + .Label + .content {
    padding: 1em 0 1em 1em;
}

.content p{
	margin: 0;
	width: 90%
}
}

@media screen and (max-width:919px) {
.Label {
	padding: 3% 0 3% 3%;
}
.content p{
    padding-left:0;
	margin: 0;
	font-size: 1.3vw;
	line-height: 200%
}
.content {
    height: 0;
    margin-bottom:10px;
    overflow: hidden;
    width: 90%;
    margin:0 auto;
    padding: 0 1em 0 2em;
}

.Label::before{	
    width: 15px;
    height: 15px;
    right:3%;
}
.toggle:checked + .Label + .content {
    height: auto;
    transition: all .3s;
    padding: 1em 1em 1em 1em;
    width: 100%;
}
}



/* form(PC) */
#form {
	background-size: 100%;
	background-repeat: repeat;
	background-position: center;
	overflow: hidden
}
#form h2 {
	margin-bottom: 20px
}
#form .txt {
	margin-bottom: 60px
}
#form span {
	color: #ef5a24
}

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

}
/* form(SP) */
@media screen and (max-width:782px) {

}


#form .ttl_line{
	border-bottom: 1px solid #56cad6
}
#form table tr th{
	display: block;
	text-align: left
}
#form table tr td{
	padding: 10px 0;
	display: block !important
}
#form table tr td:nth-child(1){
	width: 100%;
}
#form table tr td:nth-child(2){
	width: 100%;
}
#form input[type="text"] {
    width: 100%;
	padding: 15px 10px;
	border:1px solid #b0b0b0;
	background: #efefef;
	border-radius: 3px;
	margin-bottom: 20px
}
#form input[type="submit" i] {
    background-color: #76aeca;
    border-width: 0px;
	color: #fff;
	padding: 15px 0;
	width: 230px;
	border-radius: 50px
}
#form input[type="reset" i] {
    border-width: 0px;
	padding: 15px 0;
	width: 230px;
	border-radius: 50px
}
#form textarea {
    width: 100%;
	padding: 10px
}

/* sec05(SP) */
@media screen and (max-width:782px) {
#form table tr th{
	display: block;
	width: 100% !important
}
#form table tr td:nth-child(1){
	width: 100%;
}
#form table tr td:nth-child(2){
	width: 100%;
}
#form input[type="text"] {
    width: 92%;
	padding: 10px;
}
#form textarea {
    width: 92%;
	padding: 10px
}
}




/* footer(PC) */
#footer{
	background-size:cover;
	background-repeat: no-repeat;
	text-align: center;
	background: #040000
}
#footer img{
	max-width: 200px;
	width: 30%
}
#footer h4{
	margin: 50px 0 20px
}
#footer table{
	width: 700px;
	margin:50px auto 0;
}
#footer table tr td{
	font-size: 14px;
	text-align: center
}
#footer table tr td a{
	color: #fff;
	text-decoration: none;
	
}

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

}

/* footer(SP) */
@media screen and (max-width:782px) {
#footer table{
	width: 95%;
	margin:50px auto 0;
}
#footer img{
	max-width: 150px;
}
#footer h4{
	margin: 40px 0 20px
}

}


/* copy(PC) */
#copy{
	background: #040000;
	padding: 10px 0;
	letter-spacing: 2px;
	margin: 0
}
#copy p{
	color: #b3b3b3
}
/* copy(SP) */
@media screen and (max-width:782px) {

#copy p{
	font-size: 10px !important;
}
}



/* thanks */
#thanks .contents{
	margin: 10% auto
}
#thanks h2{
	margin-bottom: 30px
}
#thanks h4{
	margin-top: 30px
}
/* copy(SP) */
@media screen and (max-width:782px) {
#thanks .contents{
	margin: 90px auto
}
}