@charset "UTF-8";
@import url(//use.fontawesome.com/releases/v5.0.11/css/all.css);

/* Common */
* {-webkit-text-size-adjust: 100%; box-sizing: border-box;}
html {margin: 0;padding: 0;height: 100%;font-size: 62.5%; box-sizing: border-box;}
body {position: relative;font-family: 'Noto Sans JP', sans-serif;font-size: 1.6rem;line-height: 1.0em;letter-spacing: 0em;color: #1d1d1d;background: #fff;margin: 0;padding: 0;overflow-x: hidden;overflow-y: scroll;word-wrap: break-word;height: 100%;}
h1,h2,h3,h4,h5,h6,p,a,ul,li,ol,dl,dt,dd,table,tr,th,td,span,strong {line-height: 1.2em;letter-spacing: 0em;font-weight: 400;font-feature-settings : "palt";margin: 0;padding: 0;}
li {list-style-type: none;list-style-position: outside;}
table {border-collapse: collapse;}
img {vertical-align: bottom;max-width: 100%;height: auto;}
a {text-decoration: none;-webkit-transition: 0.5s;-moz-transition: 0.5s;-o-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5s;}
a:hover {text-decoration: none;color: #fff;}
a img {border: none;-webkit-transition: 0.5s;-moz-transition: 0.5s;-o-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5s;}
a:hover img {opacity: 0.6;_filter: alpha(opacity=60);}
a:focus {outline:none;}
button {background-color: transparent;border: none;cursor: pointer;outline: none;padding: 0;appearance: none;}
input,textarea,select {font-family: 'Noto Sans JP', sans-serif;outline: none;margin: 0;padding: 0;border: none;}



/* Clearfix */
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-table;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clear {clear: both;}



/* Parts */
.pcnone {display: none;}
.tbnone {display: block;}
.spnone {display: block;}
.pctbnone {display: none;}
.tbspnone {display: block;}
.pcspnone {display: none;}
.wrapper {width: 100%; min-height: 100vh; background-color: #fff; position: relative; box-sizing: border-box; padding-top: 70px; }
.inbox-l {width: 1200px; display: block; margin: 0 auto;}
.inbox-n {width: 1000px; display: block; margin: 0 auto;}
.inbox-s {width: 900px; display: block; margin: 0 auto;}
h1 {font-size: 2.2rem; font-weight: bold; color: ;}
h2 {font-size: 2.2rem; font-weight: bold; color: ;}
h3 {font-size: 1.6rem; font-weight: bold; color: ;}
p {line-height: 2rem;}
p.small {font-size: 1.4rem; line-height: 1.6rem;}
.cl-black{color:;}
.cl-gray{color:;}
.cl-red{color:;}

@media only screen and (max-width: 1040px) {
  .inbox-l {width: 100%;}
}
@media only screen and (max-width: 768px) {
  .wrapper {padding-top: 48px;}
  .pcnone {display: block;}
  .tbnone {display: none;}
  .spnone {display: block;}
  .pctbnone {display: none;}
  .tbspnone {display: none;}
  .pcspnone {display: block;}
  .inbox-n {width: 90%;}
  .inbox-s {width: 90%;}
}
@media only screen and (max-width: 720px) {
  .pcnone {display: block;}
  .tbnone {display: block;}
  .spnone {display: none;}
  .pctbnone {display: block;}
  .tbspnone {display: none;}
  .pcspnone {display: none;}
}



/*header_20220207*/
.modal_menu {display: none;}
.nav {width: 100%; height: 70px; background-color: #fff;box-sizing: border-box;padding: 25px 50px;transition: all .5s ease;position: fixed;top: 0;left: 0;z-index: 20;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;align-items: center;-webkit-align-items: center; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);}
.nav a {color: #000;display: block;font-size: 1.4rem;}
.nav a:visited {color: #000;}
.nav a:hover {color: #02A8CC;}
.nav li a::after {position: absolute;left: 0;content: '';width: 100%;height: 3px;background: #02A8CC;bottom: -25px;transform: scale(0, 1);transform-origin: right top;transition: transform 0.3s;}
.nav a:hover::after {transform: scale(1, 1);}
.nav li a.activeone { color: #02A8CC;}
.nav li a.activeone::before {position: absolute;left: 0;content: '';width: 100%;height: 3px;background: #02A8CC;bottom: -25px;}
.nav h1.logo {width: 120px; position: absolute; top:15px; left:50px;}
.nav ul.menu {
font-size: 1.4rem;margin-left: auto;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;align-items: center;
-webkit-align-items: center;}
.nav ul.menu li {margin-left: 30px;position: relative;}

@media only screen and (max-width: 768px) {
  .nav {padding: 0 15px;height: 50px;z-index: 40;justify-content: space-between;-webkit-justify-content: space-between;}
  .nav.roll {padding: 0 4%;}
  .nav h1.logo {width: 55px;z-index: 40; position: relative; top: 0; left: 0;}
  .nav ul.menu,.nav .btn {display: none;}
  .menu-trigger,.menu-trigger span {display: inline-block;transition: all .4s;box-sizing: border-box;}
  .menu-trigger {position: relative;width: 28px;height: 21px;z-index: 40;}
  .menu-trigger span {position: absolute;left: 0;width: 100%;height: 3px;background-color: #000;}
  .menu-trigger span:nth-of-type(1) {top: 0;}
  .menu-trigger span:nth-of-type(2) {top: 9px;}
  .menu-trigger span:nth-of-type(3) {bottom: 0;}
  .menu-trigger.active span:nth-of-type(1) {-webkit-transform: translateY(9px) rotate(-315deg);transform: translateY(9px) rotate(-315deg);}
  .menu-trigger.active span:nth-of-type(2) {opacity: 0;}
  .menu-trigger.active span:nth-of-type(3) {-webkit-transform: translateY(-9px) rotate(315deg);transform: translateY(-9px) rotate(315deg);}
  .modal_menu {opacity: 0;display: block;width: 100%;height: 100%;background: #333333;box-sizing: border-box;padding: 0 20px;position: fixed;top: 0;right: 0;bottom: 0;left: 200%;z-index: 30;overflow-y: scroll;transition: all .9s ease;}
  .modal_menu.letsgo {opacity: 1;left: 0;}
  .modal_menu ul {margin-top: 90px;font-size: 1.6rem;text-align: center;}
  .modal_menu ul a {color: #fff;font-weight: 500;}
  .modal_menu ul li + li {margin-top: 40px;}
  .nav a::after {height: 0;}
  .nav li a.activeone::before {height: 0;}
}



/*　footer　*/
.footer { width: 100%; position: absolute; bottom:0; color: #fff; background: #3c3c3c; padding: 20px 0; margin: 0; }
.f-in { width: 100%; }
.fcopy { font-size: 1.2rem; text-align: right; padding-right: 30px; letter-spacing: 1px;}
@media only screen and (max-width: 768px) {
  .fcopy {text-align: center; padding-right: 0;}
}



/*top page_20220207*/
.top-main {width: 100%; height: calc( 100vh - 130px ); /*height: 600px;*/ background: url('../images/top_bg.webp') 100% 100%/cover no-repeat; position: relative;}
.top-main .inbox-n {padding: 160px 0 0; }
.top-main .inbox-n img {display: block; width: 400px; margin: 0 auto 40px;}
.top-main .inbox-n p {font-size: 1.8rem; font-weight: bold; text-align: center; text-shadow: 4px 4px 4px #8d8d8d; color: #ffffff; }
.top-main .inbox-n p.under { font-size: 2.4rem; margin-top: 10px;}

.top-main .infowrap {position: absolute; bottom: 80px; right: 80px;}
.infowrap { width: 700px; padding: 30px 50px; background: rgba(255, 255, 255, 0.8); position: relative;}
.infowrap img.telimg { width: 25px; display: inline; margin: 5px 7px 2px 0; vertical-align: text-bottom; }
.infowrap p { margin-bottom: 5px;}
.infowrap p.telno { font-size: 2.4rem; font-weight: bold; color:#02A8CC; }
.infowrap span { font-size: 1.4rem;}
.infowrap a {width: 185px; padding: 10px 30px; position: absolute; background: #02A8CC; border-radius: 5px; right: 30px; top: 52px; color:#fff; }
.infowrap a img {margin: 0 7px 0 0; vertical-align: middle;}

@media only screen and (max-width: 768px) {
  .top-main {height: calc( 100vh - 108px );}
  .top-main .inbox-n img {width: 150px;}
  .top-main .inbox-n p {font-size: 1.6rem;}
  .top-main .inbox-n p.under { font-size: 2rem;}
  .top-main .infowrap {bottom: 80px; right: 0; left: 0; margin: auto;}
  .infowrap { width: 90%; max-width: 600px; padding: 30px 40px;}
  .infowrap p.telno { font-size: 2.2rem; }
  .infowrap span { font-size: 1.3rem; padding-left: 10px;}
}
@media only screen and (max-width: 600px) {
  .infowrap { padding: 30px 40px 90px;}
  .infowrap p { text-align: center;}
  .infowrap a {width: 185px; padding: 10px 30px; right: 0; left: 0; margin: auto; top: auto; bottom: 30px;  }


}


/*　low page common　*/
.low-head { width: 100%; background: url('../images/top_bg.webp') 0 0/cover no-repeat;}
.low-head .inbox-n { padding: 60px 0 60px; }
.low-head .inbox-n h2 { text-align: left; }
.low-head .inbox-n p { text-align: left; font-size: 1.4rem; color: #4c8996; margin-top: 5px;}
.low-wrap { width: 100%; box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1); padding: 0; display: block;}


/*　low page business　*/
.bz-list .inbox-n {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 70px; }
.bz-list .inbox-n .sv-block {width: 100%; height: 250px; display: block; margin-bottom: 80px; }
.bz-list .inbox-n .sv-block .inner-txt {width: fit-content; min-width: 300px; display: block;  padding: 30px; background: rgba(255, 255, 255, 0.7);}
.bz-list .inbox-n .sv-block .inner-txt p {text-align: center; font-size: 2rem; }
.bz-list .inbox-n .typeA {background: url('../images/sv-advertisement.webp') 0 50%/cover no-repeat;}
.bz-list .inbox-n .typeB {background: url('../images/sv-media_management.webp') 0 50%/cover no-repeat;}
.bz-list .inbox-n .typeC {background: url('../images/sv-sns_operation.webp') 0 50%/cover no-repeat;}
.bz-list .inbox-n .typeD {background: url('../images/sv-web_production.webp') 0 50%/cover no-repeat;}
@media only screen and (max-width: 768px) {
  .bz-list .inbox-n {padding: 70px 0; }
}

.prt-block {display: flex; justify-content: space-around; margin-bottom: 120px;}
.prt-block img {width: 30%; }
.prt-block .txt-box {width: 40%;}
.detail-list dl { display: block; margin: 20px 0 20px;}
.detail-list dl:nth-child(1) { margin-top: 20px;}
.detail-list dl dt { margin-bottom: 10px; font-weight: bold;}
.detail-list dl dd { margin-left: 10px;}
.detail-list dl dd img { width: 30px; display: inline-block; margin: 0 10px 0 30px; vertical-align: middle;}
.detail-list dl dd img:nth-child(1) {margin-left: 0;}
.pt2 img {order: 2;}
@media only screen and (max-width: 450px) {
  .prt-block {display: block; margin-bottom: 120px;}
  .prt-block img {width: 100%; margin-bottom: 30px;}
  .prt-block .txt-box {width: 100%;}
}








/* low page media */
.mg-media .inbox-n { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 100px 120px;}
.mg-media .inbox-n .imgbox { width: 350px; }
.mg-media .inbox-n .imgbox img { margin-bottom: 25px; filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.25));}
.mg-media .inbox-n .imgbox .smn {width: 350px; object-fit: cover; height: 200px; object-position: top;}
.mg-media .inbox-n .imgbox p {display: inline-block; font-size: 18px; }
.mg-media .inbox-n .imgbox a { display: inline-block; font-size: 1.2rem; padding: 5px 10px; margin-left: 20px; color:#fff; background: #333333; border-radius: 5px;}
.mg-media .inbox-n .imgbox a img { width: 13px; margin-bottom: 0; margin-left: 7px; vertical-align: -10%;}
@media only screen and (max-width: 768px) {
  .mg-media .inbox-n { display: block; padding: 80px 0 10px; }
  .mg-media .inbox-n .imgbox { width: 350px; margin: 0 auto 70px; display: block; }
}
@media only screen and (max-width: 768px) {
  .mg-media .inbox-n .imgbox { width: 100%; }
  .mg-media .inbox-n .imgbox .smn {width: 100%; height: 400px;}
}
@media only screen and (max-width: 450px) {
  .mg-media .inbox-n .imgbox .smn {width: 100%; height: 250px;}
}


/* low page recruit */
.recruit-wrap .inbox-s { padding: 80px 0; }
.recruit-wrap .inbox-s p { text-align: center; }


/* low page company */
.company-wrap { display: block; padding-top: 70px;}
.company-wrap .inbox-n table {width: 750px; border-collapse:  collapse; display: block; margin: 0 auto; }
.company-wrap .inbox-n th,.company-wrap .inbox-n td {border-top: 1px solid #E2EDEF; border-bottom: 1px solid #E2EDEF;}
.company-wrap .inbox-n th { width: 250px; padding: 30px; text-align: left;}
.company-wrap .inbox-n td { width: 500px; }
@media only screen and (max-width: 768px) {
  .company-wrap .inbox-n table {width: 600px; }
  .company-wrap .inbox-n th { width: 180px; }
  .company-wrap .inbox-n td { width: 420px; }
}
@media only screen and (max-width: 720px) {
  .company-wrap .inbox-n table {width: 100%; }
  .company-wrap .inbox-n th { font-size: 1.4rem; width: 35%; line-height: 2.4rem;}
  .company-wrap .inbox-n td { font-size: 1.4rem; width: 65%; line-height: 2.4rem;}
}


.prodacts {display: block; color: #ffffff; background: #3c3c3c; padding: 20px 60px; margin: 0 auto 150px;}