@charset "utf-8";
.pc{display:none !important;}

a[href^="tel"]{color:inherit;text-decoration:none;}

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
	background:transparent;
	list-style-type:none;
	font-size: medium;
	color: #1e1e1e;
	font-family:'Noto Sans JP',"源ノ角ゴシック","ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 游ゴシック体, "Yu Gothic", YuGothic, "Open Sans", "Helvetica Neue", "sans-serif", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.6;
	outline:none;
	letter-spacing:0.1em;
}

p{font-size:90%;}

.conclogo{
	width:60%;
	margin:0 auto;
}

.carbonixexp{
	margin:0 auto;
}

.headerlogo{
	width:40%;
	margin:20px 5px;
}

.headerlogo img{
	width:100%;
}

.hamburger{
	right:15px;
	top:15px;
	width:40px;
	height:33px;
}

.ham_line{
	width:100%;
}

.ham_line-1{
	top:0;
}

.ham_line-2{
	top:14px;
}

.ham_line-3{
	top:auto;
	bottom:2px;
}

header {
    background: rgba(255,255,255,0.8);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
}

.topbox h1{
	padding:0;
	margin-top:110px;
}

.wrap{
	width:95%;
	margin:0 auto;
	padding:0;
}

.top_1{
	position:relative;
	margin:0 auto 30px;
}

.top_1 h1{
	font-size:165%;
}

.top_1 h1 span{
	font-size:55%;
}

.top_1 h1 span.second_text{
	margin-top:33vh;
}

.topimg{
	position:absolute;
	top:100px;
	width:70%;
	max-width:300px;
	margin:0 auto;
	left:0;
	right:0;
	z-index:-1;
}

.top_2{
	margin:0 auto 50px;
}

.top_2 p{
	font-size:95%;
	line-height:1.8;
	margin:0 auto 30px;
}

.button{
	width:70%;
	padding:10px 0;
	font-size:80%;
	margin:0 auto;
}

.corp {
	margin:0 auto 40px;
    padding:0;
}

.sl1 {
    margin-bottom: 10px;
}

.corp__item {
    width: calc(100vw / 4);
}

.issue {
	padding: 100px 0 10px;
}

.boxtitle h2 {
    font-size: 150%;
}

.boxtitle::before {
    top: -55px;
    width: 95%;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.issuelist {
    margin: 100px auto 20px;
}

.issuegroup{
	width:94%;
	height:auto;
	padding:40px 5%;
	margin:0 auto 30px;
}

.issuegroup:after {
    top: -6px;
    left: -7px;
}

.issue p{
	font-size:130%;
}

.issue::after{
	height:60px;
}

.service {
    padding-top: 130px;
}

.carbonix{
	margin:0 auto;
	padding:0;
}

.carbonixlogo{
	margin:0 auto 30px;
}

.blueline{
	margin:0 auto;
}

.carbonixexp p {
    margin: 270px auto 80px;
    font-size: 100%;
    line-height: 1.8em;
}

.carboniximg{
	left:0;
	right:0;
	margin:auto;
	top:225px;
	width:60%;
	text-align:center;
}

.srvsubti {
    margin: 100px auto;
}

.servicegroup {
    margin:50px auto;
    padding:0;
}

.servicedesc{
	margin:0 auto;
}

.servicedesc h2{
	font-size:130%;
	letter-spacing:0.05em;
}

.nt1::after, .nt2::after, .nt3::after, .nt4::after, .nt5::after, .nt6::after {
    width:30%;
height: 50%;
    top: -20%;
}

.cg2 {
    margin: 10px auto;
}

.servicedesc p{
	font-size:100%;
	margin:0 auto 20px;
}

.serviceimg{
	padding:0;
	margin:0 auto 75px;
}

.nt2::after,.nt4::after,.nt6::after {
    left:auto;
	right:0;
}

.servicecontents {
    padding: 0;
}

.contact {
    width: 100%;
    background-color: #e3eded;
    padding-top: 100px;
    filter: drop-shadow(0 10px 8px #c1c1c1);
    position: relative;
    z-index: 2;
	overflow:hidden;
}

.contactbox p {
    font-size: 110%;
    margin: 100px auto 50px;
}

.btnlist{
	margin:0 auto 40px;
	padding:0;
}

.btngroup {
    width: 80%;
    float: none;
    text-align: center;
	margin:0 auto 30px;
}

.btngroup p{
	font-size:110%;
}

.ctcbtn{
	margin:0 auto;
	width:100%;
	font-size:100%;
	height:auto;
	padding:15px 0;
}

.interviewtitle {
    margin-top: 130px;
}

.interviewtitle::after {
    top: 70px;
}

.interviewcontent {
    margin-top: 100px;
}


.interviewgroup {
    padding: 20px 10px;
    margin: 0 5px 30px;
    border-radius: 0.8rem;
    box-sizing: border-box;
    width: 70vw;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
}

.intsubtitle {
    font-size: 100%;
    font-weight: bold;
	padding:0;
	margin:0 auto 20px;
}

.extrabutton {
	font-size:100%;
    padding: 7px 0;
    margin:0 auto 10px;
    transition: .2s;
}


.extrabutton::after {
    width: 15px;
    height: 15px;
    top: 12px;
    right:12px;
	left:auto;
}

.interviewgroup::before {
    position: absolute;
    content: "";
    width: 25%;
    height: 25%;
    background: url(../img/number1.png) no-repeat center;
    background-size: contain;
    top: 0;
    left: auto;
	right:0;
    opacity: 0.2;
}

.int2::before {background: url(../img/number2.png) no-repeat center;    background-size: contain;}
.int3::before {background: url(../img/number3.png) no-repeat center;    background-size: contain;}
.int4::before {background: url(../img/number4.png) no-repeat center;    background-size: contain;}

#js-slide__nav {
    text-align: center;
	position:relative;
}

.slick-dots {
    justify-content: center;
}
#js-slide__nav__inner {
    width: 80%;
    height: 1px;
}

.slick-prev{
	left:0;
	right:auto;
}

.slick-next{
	right:0;
	left:auto;
}

.slick-prev:before,.slick-next:before{
	display:none;
}

.slick-dotted.slick-slider{
	margin:0 auto;
}

.conctitle {
    font-size: 160%;
	margin:100px auto 50px;
}

.concgroup,.concgroup::after {
    width: 90vw;
    height: 90vw;
}

.conclusionbox {
    background: url(../img/img_01.jpg) no-repeat center;
    background-size: cover;
    position: relative;
    padding: 0 0 150px;
    overflow: hidden;
}

.conclusionbox::after,.conclusionbox::before{
	height:250px;
}

.conclusion{
	background: linear-gradient(to right, rgba(244, 233, 231, 1), rgba(242, 246, 246, 1));
	padding:0;
}

.concdesc {
    text-align: center;
    padding:0 0 200px;
}

.concdesc h2{
	margin:0 auto 20px;
	width:95%;
	font-size:130%;
}

.concdesc p {
    font-size: 100%;
    line-height: 2em;
    width: 95%;
    margin:0 auto;
}

.concdesc::after{
	left:0;
	height:100%;
}


footer{
	background:#132d3a;
}

.footgroup{
	display:block;
}

.footlogo{
	width:80%;
	margin:0 auto;
}

.footlogo a{
	display:block;
}

.footlogo a img{
	width:100%;
}

.footlist{
	border-top:1px solid #7c898c;
	border-bottom:1px solid #7c898c;
}

address {
    color: #99a6a9;
    font-weight: bold;
    padding: 12px 0 20px;
    text-align: center;
}

.totoppage {
    position: absolute;
    right: 0;
    top: -30px;
}

.footlist li{
	width:50%;
	text-align:center;
	margin:0 auto 30px;
}

.footlist li a{
	font-size:100%;
}

.spwrap{
	padding:0 10%;
}

.spnav ul li {
    margin-bottom:30px;
    position: relative;
    border-bottom: 1px solid #7c898c;
    transition: .2s;
}

.spnav ul li a{
	font-size:110%;
	padding:10px 0;
}

.spnavbtn{
	font-size:110%;
	padding:10px 0;
}


/* contact */
#contact_page .head_section img{
	width:95%;
	margin:40px auto;
}

#contact_page .content_section h{
	font-weight: 500;
	font-size: 18px;
	font-feature-settings: 'palt' on;
	margin-bottom:24px;
	display:block;
}

#contact_page .content_section p{
	font-weight: 500;
	font-size: 14px;
	color: #BE3628;
}

#contact_page  .form_section{
	width:90%;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}

#contact_page .form_section dt{
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	margin-bottom:16px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

#contact_page .form_section dt span{
	color:#BE3628;
	display:inline-block;
	margin:0 4px;
}

#contact_page .form_section dd{
	margin-bottom:56px;
	display:flex;
}

#contact_page .form_section dd select{
	background:#171A1C;
	font-weight: 400;
	font-size: 14px;
	color: #FFFFFF;
	width:100%;
	padding:14px 20px;
	letter-spacing: 0.1em;
}

#contact_page .form_section dd select option{
	padding:14px 20px;
}

#contact_page .form_section dl:nth-child(2) input:first-child{
	margin-right:8px;
}
#contact_page .form_section dd input{
	font-family: 'Noto Sans JP';
	font-style: normal;
	background:#fff;
	font-weight: 400;
	font-size: 16px;
	line-height: 42px;
	letter-spacing: 0.1em;
	box-sizing:border-box;
	font-feature-settings: 'palt' on;
	padding:6px 16px 10px;
	border:none;
	border-bottom: 2px solid rgba(0, 0, 0, 0.08);
	width:95%;
	margin: auto;
}

#contact_page .form_section dd input::placeholder{
	color:#949494;
}

#contact_page .form_section dd textarea{
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 42px;
	letter-spacing: 0.1em;
	font-feature-settings: 'palt' on;
	padding:6px 16px 10px;
	border:none;
	height:200px;
	border-bottom: 2px solid rgba(0, 0, 0, 0.08);
	width:95%;
	margin:0 auto;
	margin-bottom:24px;
	background:#fff;
}

#contact_page .form_section .checkarea{
	text-align:center;
	margin-bottom:80px;
}

#contact_page .form_section .checkarea label{
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 32px;
	letter-spacing: 0.1em;
}

#contact_page .form_section .checkarea label *{
	font-size:90%;
}

#contact_page .form_section .checkarea label img{
	width:auto;
	display:inline-block;
	margin:0 8px 0 6px;
}

#contact_page .form_section .checkarea label a{
	border-bottom:1px dotted #949494;
}

#contact_page .form_section .checkarea label span{
	color:#BE3628;
}

#contact_page .form_section .sbmt_btn{
	border:none;
	position:relative;
	margin-bottom:160px;
}

#contact_page .form_section .sbmt_btn input{
	border:none;
	background: #898989;
}


#contact_page .form_section .sbmt_btn:after{
    content: "";
    background: URL("../img/news_arrow_w.png") no-repeat;
    background-size: cover;
    position: absolute;
    width: 22px;
    height: 17px;
    right: 16px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.contact_confirm .content_section .inner{
	width:100%;
	text-align:center;
}

.contact_confirm .content_section .inner h2{
	margin-bottom:16px;
}

.contact_confirm .content_section .inner h4{
    margin: 24px auto 80px;
}

.contact_confirm .content_section .inner img{
	margin:0 auto;
}
#contact_page .contact_confirm .content_section .inner p{
	font-weight: 500;
	font-size: 15px;
	font-feature-settings: 'palt' on;
	color: #171A1C;
}

#contact_page .contact_confirm .content_section .thank_you p{
	text-align:left;
	margin-bottom:80px;
}

#contact_page .contact_confirm .form_section dt{
	border-bottom: 1px solid rgba(0,0,0,0.08);
	padding:16px 0;
}

#contact_page .contact_confirm .form_section .sbmt_btn{
	width:100%;
	margin-bottom:35px;
}

#contact_page .contact_confirm .form_section .sbmt_btn .more{
	background:#BE3628;
}

#contact_page .form_section #form_back .sbmt_btn .more{
	background: #171A1C;
}

#contact_page .form_section #form_back .sbmt_btn{
	margin-bottom:80px;
}

#contact_page .form_section #form_back .sbmt_btn:after{
	display:none;
}

#contact_page{
    padding: 30vw 0 50px;
}

#contact_page h1{
	font-size:120%;
}

#contact_page .content_section{
	width:95%;
	margin:10px auto;
}

#contact_page .content_section h{
	font-size:100%;
}

#contact_page .form_section dd input#user_surname{margin-right:1%;}

.media li{
	margin:0 auto 20px;
}

.media label{
	margin:0 10px;
	display:inline-block;
}

.more {
    background: #171A1C;
    display: block;
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    padding: 14px 0;
    text-align: center;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    position: relative;
}

.form_section dl.check_where{
	margin-bottom:50px;
}


.carboniximg img{
	max-width:300px;
	width:80%;
	display:block;
	margin:20px auto;
}

.inttitle img{
	width:80%;
	margin:10px 0 20px;
}

.development_interview{
	width:100%;
	margin:100px auto 30px;
}

.development_interview h2{
	font-size: 90%;
    color: #948810;
    margin: 0 auto 20px;
    position: relative;
	text-align:center;
}

.development_interview a{
	display:block;
	width:90%;
	margin:0 auto;
}

.development_interview a:hover{
	opacity:0.8;
}

.development_interview a img{
	display:block;
	width:100%;
}

.development_interview a h2 img{
	margin:0 auto 20px;
	width:90%;
}