@charset "utf-8";

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="reset"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="reset"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="reset"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/* gnav **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.gnav{ background-color:#f0f0f0; padding:10px 0; }

.gnav ul li{ background-color:#fff; width:calc(100% / 4 - 9px); width:-webkit-calc(100% / 4 - 9px); text-align: center; margin-right: 12px; font-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; letter-spacing:1px; }
.gnav ul li:nth-child(4n){ margin-right:0; }
.gnav ul li:nth-child(n + 5){ margin-top:10px; }
.gnav ul li a{ display:block; text-decoration:none; padding: 7px 0; color:#303030; position:relative;   -webkit-box-sizing: border-box;
  box-sizing: border-box; width:100%; height:100%; }
.gnav ul li a:after{ content:""; display:block; position:absolute; bottom:5px; right:5px; width: 10px; height:10px; border-bottom:solid 4px #000; border-right:solid 4px #000; -webkit-box-sizing: border-box;
  box-sizing: border-box; }


.gnav ul li:nth-child(1) a:hover{ color:#3a42ce; }
.gnav ul li:nth-child(1) a:hover:after{ border-bottom:solid 4px #3a42ce; border-right:solid 4px #3a42ce; }
.gnav ul li:nth-child(2) a:hover { color:#a5ff6d; }
.gnav ul li:nth-child(2) a:hover:after{ border-bottom:solid 4px #a5ff6d; border-right:solid 4px #a5ff6d; }
.gnav ul li:nth-child(3) a:hover { color:#ff5248; }
.gnav ul li:nth-child(3) a:hover:after{ border-bottom:solid 4px #ff5248; border-right:solid 4px #ff5248; }
.gnav ul li:nth-child(4) a:hover { color:#fe1c4d; }
.gnav ul li:nth-child(4) a:hover:after{ border-bottom:solid 4px #fe1c4d; border-right:solid 4px #fe1c4d; }
.gnav ul li:nth-child(5) a:hover { color:#7e4dd6; }
.gnav ul li:nth-child(5) a:hover:after{ border-bottom:solid 4px #7e4dd6; border-right:solid 4px #7e4dd6; }
.gnav ul li:nth-child(6) a:hover { color:#00c5a9; }
.gnav ul li:nth-child(6) a:hover:after{ border-bottom:solid 4px #00c5a9; border-right:solid 4px #00c5a9; }
.gnav ul li:nth-child(7) a:hover { color:#e7f100; }
.gnav ul li:nth-child(7) a:hover:after{ border-bottom:solid 4px #e7f100; border-right:solid 4px #e7f100; }
.gnav ul li:nth-child(8) a:hover { color:#fff; background-color:#3a42ce; }
.gnav ul li:nth-child(8) a:hover:after{ border-bottom:solid 4px #fff; border-right:solid 4px #fff; }



/* title **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.title{ height:292px; color:#fff; font-size:18px; ont-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; padding-top:94px; text-align:left; }

.title h2 .rel{ position:relative; }
.title h2 .abs{ position: absolute; bottom: 27px; left: 34px; background: #e7f100; display: inline-block; padding: 0 14px; font-size: 16px; ont-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; letter-spacing: 2px; color:#353dc9; line-height:25px; }

/*///　pankuzu　//////////////////////////////////////////////////////////////////////////////////////////*/
.pankuzu{ padding:9px 0 15px ; position: relative;}
.pankuzu ul{position:absolute; right:0; bottom:-50px;}
.pankuzu li{ float:left; }
.pankuzu li a:after{content: "――";color: #fff;font-size: 110%; letter-spacing:-.2em;width:2em;margin:.5em;}
.pankuzu li:last-child a:after { content: none;}
.pankuzu li a{ display:inline-block; font-size:12px; }
.pankuzu li a:link , .pankuzu li a:visited{ color:#fff; text-decoration:none; }
.pankuzu li a:hover{ color:#e7f100;}

.web .title{ background:url("../images/web_title_bg.jpg") center top / cover no-repeat; }
.it .title{ background:url(../images/it_title_bg.jpg) center top / cover no-repeat; }
.dtp .title{ background:url("../images/dtp_title_bg.jpg") center top / cover no-repeat; }
.illust .title{ background:url(../images/illust_title_bg.jpg) center top / cover no-repeat; }
.photo .title{ background:url(../images/photo_title_bg.jpg) center top / cover no-repeat; }
.plan .title{ background:url(../images/plan_title_bg.jpg) center top / cover no-repeat; }
.work .title{ background:url(../images/work_title_bg.jpg) center top / cover no-repeat; }
.faq .title,.contact .title{ background:url(../images/faq_contact_title_bg.jpg) center top / cover no-repeat; }
.access .title{ background:url("../images/access_title_bg.jpg") center top / cover no-repeat; }
.agreement .title{ background:url("../images/agreement_title_bg.jpg") center top / cover no-repeat; }
.design .title{ background:url("../images/design_title_bg.jpg") center top / cover no-repeat; }
.news .title{ background:url("../images/news_title_bg.jpg") center top / cover no-repeat; }

/* particles.js */
#particles-js{ width:calc(100% - 54%); height:292px; position:absolute; top:0; left:0; right:0; bottom:0; display:block; }


/* sublink **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.sublink{ background:#000; padding:8px; margin:0 auto; font-size:12px; position:relative; }
.sublink:after{ content:""; position:absolute; bottom:-15px; left: calc(50% - 10px); left: -webkit-calc(50% - 9px); width:0; height:0; border-top: 10px solid #000; border-right: 9px solid transparent; border-left: 9px solid transparent; z-index:1;}
.sublink ul li{ background: url(../images/arrow_r_round_white.svg) left 3px / 12px no-repeat; padding-left: 16px; margin-right: 25px; }
.sublink ul li:last-child{ margin-right:0; }
.sublink ul li a{ color:#fff; text-decoration:none;}
.sublink ul li a.disabled{ color:#818181!important; }
.sublink ul li a:hover{ opacity:0.8; }


/* sbt **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* sbt primary */
.sbt-primary{ background-color:#fff;  width:100%; margin:0 auto; position:relative; box-shadow:0px 3px 4px rgba(0,0,0,0.2); padding:50px 0 40px; text-align:center; display:block; margin-bottom:30px; color:#000; }
.sbt-primary h3{ font-size:35px; font-family:'Noto Sans-jp-exbold','Noto Sans-en-exbold'; text-align:left; display:inline-block; line-height: 0.9em; }
.sbt-primary h3 span{ font-family: 'Roboto-Bold'; font-size:25px; padding-left: 5px; }

.web .sbt-primary:before,.it .sbt-primary:before,.dtp .sbt-primary:before,.illust .sbt-primary:before,.photo .sbt-primary:before,.work .sbt-primary:before,.plan .sbt-primary:before,.design .sbt-primary:before,.agreement .sbt-primary:before,.access .sbt-primary:before{ pointer-events: none; }

.web .sbt-primary:before{ display:block; content:""; width:1200px; height:auto; position:absolute; bottom:0; left:calc(50% - 1200px); left:-webkit-calc(50% - 598px); z-index:1; border-bottom:solid 6px #353dc9; }
.web .sbt-primary h3{ background: url(../images/web_titl_icon.svg); background-size:120px 80px; padding: 10px 0 10px 120px; }
.it .sbt-primary:before{ display:block; content:""; width:1200px; height:auto; position:absolute; bottom:0; left:calc(50% - 1200px); left:-webkit-calc(50% - 598px); z-index:1; border-bottom:solid 6px #353dc9; }
.it .sbt-primary h3{ background: url(../images/it_titl_icon.svg); background-size:92px 80px; padding: 10px 0 10px 105px; }
.dtp .sbt-primary:before{ display:block; content:""; width:1200px; height:auto; position:absolute; bottom:0; left:calc(50% - 1200px); left:-webkit-calc(50% - 598px); z-index:1; border-bottom:solid 6px #353dc9; }
.dtp .sbt-primary h3{ background: url(../images/dtp_titl_icon.svg); background-size:86px 80px; padding: 10px 0 10px 105px; }
.illust .sbt-primary:before{ display:block; content:""; width:1200px; height:auto; position:absolute; bottom:0; left:calc(50% - 1200px); left:-webkit-calc(50% - 598px); z-index:1; border-bottom:solid 6px #353dc9; }
.illust .sbt-primary h3{ background:url("../images/illust_titl_icon.svg"); background-size:80px 80px; padding: 10px 0 10px 105px; }
.photo .sbt-primary:before{ display:block; content:""; width:1200px; height:auto; position:absolute; bottom:0; left:calc(50% - 1200px); left:-webkit-calc(50% - 598px); z-index:1; border-bottom:solid 6px #353dc9; }
.photo .sbt-primary h3{ background: url("../images/photo_titl_icon.svg"); background-size:100px 80px; padding: 10px 0 10px 105px; }
.plan .sbt-primary:before{ display:block; content:""; width:1200px; height:auto; position:absolute; bottom:0; left:calc(50% - 1200px); left:-webkit-calc(50% - 598px); z-index:1; border-bottom:solid 6px #353dc9; }
.plan .sbt-primary h3{ background: url("../images/plan_titl_icon.svg"); background-size:72px 80px; padding: 10px 0 10px 85px; }
.work .sbt-primary:before{ display:block; content:""; width:1200px; height:auto; position:absolute; bottom:0; left:calc(50% - 1200px); left:-webkit-calc(50% - 598px); z-index:1; border-bottom:solid 6px #353dc9; }
.work .sbt-primary h3{ background: url("../images/work_titl_icon.svg"); background-size:101px 80px; padding: 10px 0 10px 115px;}
.news .sbt-primary:before{ display:block; content:""; width:1200px; height:auto; position:absolute; bottom:0; left:calc(50% - 1200px); left:-webkit-calc(50% - 598px); z-index:1; border-bottom:solid 6px #353dc9; }
.news .sbt-primary h3{ background: url("../images/news_titl_icon.svg"); background-size:80px 80px; padding: 10px 0 10px 105px; }
.faq .sbt-primary:before,.contact .sbt-primary:before{ display:block; content:""; width:1200px; height:auto; position:absolute; bottom:0; left:calc(50% - 1200px); left:-webkit-calc(50% - 598px); z-index:1; border-bottom:solid 6px #353dc9; }
.faq .sbt-primary h3{ background: url("../images/faq_titl_icon.svg"); background-size:81px 80px; padding: 10px 0 10px 105px; }
.contact .sbt-primary h3{ background: url("../images/contact_titl_icon.svg"); background-size:97px 80px; padding: 10px 0 10px 105px; }
.access .sbt-primary:before{ display:block; content:""; width:1200px; height:auto; position:absolute; bottom:0; left:calc(50% - 1200px); left:-webkit-calc(50% - 598px); z-index:1; border-bottom:solid 6px #353dc9; }
.access .sbt-primary h3{ background: url("../images/access_titl_icon.svg"); background-size:82px 80px; padding: 10px 0 10px 105px; }
.agreement .sbt-primary:before{ display:block; content:""; width:1200px; height:auto; position:absolute; bottom:0; left:calc(50% - 1200px); left:-webkit-calc(50% - 598px); z-index:1; border-bottom:solid 6px #353dc9; }
.agreement .sbt-primary h3{ background: url("../images/agreement_titl_icon.svg"); background-size:82px 80px; padding: 10px 0 10px 105px; }
.design .sbt-primary h3 { text-align:center; }
.design .sbt-primary:before{ display:block; content:""; width:1200px; height:auto; position:absolute; bottom:0; left:calc(50% - 1200px); left:-webkit-calc(50% - 598px); z-index:1; border-bottom:solid 6px #353dc9; }

.web .sbt-primary h3,.it .sbt-primary h3,.dtp .sbt-primary h3,.illust .sbt-primary h3,.photo .sbt-primary h3,.faq .sbt-primary h3,.contact .sbt-primary h3,.access .sbt-primary h3,.work .sbt-primary h3,.plan .sbt-primary h3,.news .sbt-primary h3,.agreement .sbt-primary h3{ background-position:center left; background-repeat:no-repeat; /*background-size:auto 80px;*/ }


/* h4 sbt */
.bar-blue{ background:#fff; padding:7px 0 5px; border-bottom:solid 6px #353dc9; margin-bottom:30px; font-size:20px; }

/* h5 sbt */
.marker-blue{ display:inline-block; background:#353dc9; color:#fff; padding:8px 10px; font-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; font-size:16px; margin-bottom:15px; }

.marker-yellow{background: linear-gradient(transparent 80%, #e5e237 0%);}

/* sbt point */
.sbt-point{ background:url("../images/icon_point.png") left top / 45px 34px no-repeat; padding:13px 60px 5px; font-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; }

/* sbt bg blue */
.cau .sbt-bg-blue{ background:url("../images/agreement_cau_icon.png")left 20px center / 33px 30px no-repeat,#353dc9; padding:20px 0 20px 60px; color:#fff; font-size:16px; font-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; margin-bottom:20px; }

/* sbt bg blue */
.privacy .sbt-bg-blue{ background:url("../images/agreement_privacy_icon.png")left 20px center / 29px 22px no-repeat,#353dc9; padding:20px 0 20px 60px; color:#fff; font-size:16px; font-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; }

/* faq */
.faq .sbt-bg-blue{ background:#353dc9; padding:20px 0 20px 20px; color:#fff; font-size:16px; font-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; }
.faq .box-txt{ background:#f0f0f0; padding:20px; }
.faq .que{ display:inline-block; background:url("../images/faq_q_icon.png") left top / 24px 23px no-repeat; padding:2px 15px 2px 35px; }
.faq .ans{ display:inline-block; background:url("../images/faq_a_icon.png") left top / 24px 23px no-repeat; padding:2px 15px 2px 35px; }


/* box **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* container */
.container{ background:#f0f0f0; }

/* contents */
.contents-bg{ background:linear-gradient(90deg,rgba(255,255,255,.0) 0%,rgba(255,255,255,.0) 45.2%,#ffffff 45.2%,#ffffff 100%); padding-bottom:30px; letter-spacing:1px; }
.contents-bg .wrap{ width:1100px; }

	
/* pic */
.pic img{box-shadow:1px 2px 10px rgb(193 194 211);margin:0 20px 20px;}
.pic-ns img{ margin:0 20px 20px; }

/* inner txt */
.inner-txt{padding:0 10px;}

/* point decoration */
.web{ background:url("../images/web_contents_bg.jpg")left 30px bottom / 632px 953px fixed no-repeat; position:relative; z-index:18; }
.it{ background:url("../images/it_contents_bg.jpg")left bottom / 845px 990px fixed no-repeat; position:relative; z-index:18; }
.dtp{ background:url("../images/dtp_contents_bg.jpg")left bottom / 889px 983px fixed no-repeat; position:relative; z-index:18; }
.illust{ background:url("../images/illust_contents_bg.jpg")left bottom / 469px 652px fixed no-repeat; position:relative; z-index:18; }
.photo{ background:url("../images/photo_contents_bg.jpg")left bottom / 788px 805px fixed no-repeat; position:relative; z-index:18; }
.work{ background:url("../images/work_contents_bg.jpg")left bottom / 440px 560px fixed no-repeat; position:relative; z-index:18; }
.plan{ background:url("../images/plan_contents_bg.jpg")left bottom / 749px 993px fixed no-repeat; position:relative; z-index:18; }.plan{ background:url("../images/plan_contents_bg.jpg")left bottom / 749px 993px fixed no-repeat; position:relative; z-index:18; }
.news{ background:url("../images/news_contents_bg.jpg")left bottom / 730px 654px fixed no-repeat; position:relative; z-index:18; }
.faq,.contact{ background:url("../images/faq_contact_contents_bg.jpg")left bottom 300px / 959px 500px fixed no-repeat; position:relative; z-index:18; }
.access{ background:url("../images/access_contents_bg.jpg")left bottom / 820px 900px fixed no-repeat; position:relative; z-index:18; }
.agreement{ background:url("../images/agreement_contents_bg.jpg")left bottom / 371px 551px fixed no-repeat; position:relative; z-index:18; }
.design{ background:url("../images/design_contents_bg.jpg")left bottom / 517px 803px fixed no-repeat; position:relative; z-index:18; }

/* point box */
.point-box{ background:url("../images/point-box_item.png") top 20px left 15px / 157px 36px no-repeat,#fff; padding:50px; border:solid 4px #353dc9; box-sizing:border-box; line-height:2rem; position:relative; }
.point-box > .flex-box-nowrap{ align-items: center; justify-content: space-between; }
.point-box:after{ content:""; display:block; position:absolute; bottom:10px; left:10px; width:19px; height:19px; border-bottom:solid 6px #353dc9; border-left:solid 6px #353dc9; }
.point-box:before{ content:""; display:block; position:absolute; top:10px; right:10px; width:19px; height:19px; border-top:solid 6px #353dc9; border-right:solid 6px #353dc9; }

.point-box p{ margin-bottom:0; }
.point-box .point-txt{ display:inline-block; }
.point-box .point-img{ display:inline-block; flex-basis: 350px; width:350px; margin-left:20px; }
.point-img2{ flex-basis: 350px; width:350px; margin-left:20px; }
.point-img1{ flex-basis: 700px; width:700px; margin-left:20px; padding-bottom: 50px;}
.point-img3{ flex-basis: 500px; width:500px; margin-left:20px; padding-bottom: 50px;}
.point-box img{ width:100%; height:auto;}
.point-box img:last-child{ margin-right:0; }

.point-box .list-box{ display:inline-block; background:#353dc9; color:#fff; padding:18px 20px 20px; margin: 20px 0; line-height:1.5rem; }
.point-box ul li{ border-bottom: dotted 1px #fff; padding-top:2px; }


/* list box */
.list-box-sbt > .sbt{ margin:0 auto; top:20px; }
.list-box{ padding:30px; margin-top:30px; background:url("../images/list-box_bg.png")repeat,rgba(255,255,255,0.4); border:solid 4px #353dc9; display:flex; align-items: center; justify-content: space-between;  }
.list-box2{ padding:30px; margin-top:30px; background:url("../images/list-box_bg.png")repeat,rgba(255,255,255,0.4); border:solid 4px #e5e237; display:flex; align-items: center; justify-content: space-between;  }
.list-box-gray{ background:#f0f0f0; border-radius:5px; padding:20px; font-size:12px; }
.list-box ul{ display:inline-block; position:relative; flex-basis:790px; }
.list-box ul.etc:after{ content:"etc."; display:inline; position:absolute; bottom:0; right:30px; font-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; color:#353dc9; font-size:1.2rem; }
.list-box ul li{ margin-bottom:5px; }
.list-box ul li:last-child{ margin-bottom:0; }

/* icon */
.icon{ display:inline-flex; flex-wrap:nowrap; justify-content:flex-end; }
.icon .item , .inner .icon{ display:inline-block; margin-right:15px; }
.icon .item:last-child ,.inner .item:last-child{ margin-right:0; }

/* plan box&img box */
.inner{ display:flex; justify-content:center; flex-wrap:nowrap; }
.inner img{ margin-right:30px; }

/* plan box */
.plan-box{ background:url("../images/list-box_bg.png")repeat,rgba(255,255,255,0.4); border:dotted 4px #353dc9; padding:30px; margin-top:30px; }
.plan-box dd .inner img:last-child{ margin-right:0; }
.plan-box .btn-m{ margin:1rem auto 0; }

/* web_plan flow */
.flow{ width:875px; display:block; margin:0 auto; }
.flow-service-box{ background:#353dc9; margin-top:20px; padding: 20px; text-align: center; color: #e7f100; font-size: 20px; font-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; letter-spacing:1px; position:relative; }
.flow-service-box:after{ content:""; position:absolute; top:-15px; left:0; background:url("../images/service_box_item.png")top left / 65px 81px no-repeat; width:65px; height:81px;  }
.flow-in{ padding:20px; }
.flow-plan img{ width:100%; }
.flow-box h5{ margin-top:-20px; font-size:20px; }
.flow-box h5 span.plan-name { background:#353dc9; display:inline-block; padding:10px 20px; font-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; color:#e7f100; }
.col2{ display:flex;}
.col2 > .flow-box{ width:calc(100% / 2); display:block; }
.col1-txt{  flex-grow:11; }
.col2-txt{ display:block; }
.flow-box p{ margin:0; }
.flow-box{ background:#fff; border:4px solid #353dc9; border-radius:5px; display:flex;  align-items: center; font-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; position:relative; margin-bottom:50px; }
.flow-box:after{ content:""; display:block; background:url("../images/web_plan_flow_col1_arrow.png") center center / 65px 36px no-repeat; width:65px; height:36px; position:absolute; bottom:-50px; left:calc(100% / 2 - 32px); }.flow-box:after{ content:""; display:block; background:url("../images/web_plan_flow_col1_arrow.png") center center / 65px 36px no-repeat; width:65px; height:36px; position:absolute; bottom:-50px; left:calc(100% / 2 - 32px); }
.col1:last-child .flow-box:after{ display:none; }

.col1-img{ flex-basis:180px; margin:0 77px 0 35px; }
.col1-img img{ width:100%; }
.col1-txt{ font-size:20px; }
.col2-txt{ border-bottom:4px dotted #353dc9; margin-bottom:20px; padding-bottom:10px; }
.col2-txt:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:10px; }
.col1-txt p > span,.col2-txt p > span{ background:#353dc9; padding:5px 8px; margin-bottom:10px; display:inline-block;  line-height:24px; color:#e7f100; }


/* img box */
.img-box{ background:url("../images/list-box_bg.png")repeat,rgba(255,255,255,0.4); border:dotted 4px #353dc9; padding:30px; margin-top:30px; }
.img-box dd .inner img:last-child{ margin-right:0; }
.img-box .btn-m{ margin:1rem auto 0; }

.img-box .inner{ flex-wrap:wrap; }
.img-box .inner .box{ display:inline-block; margin:10px; }
.img-box .inner .box p.name{ background:#fff; width: 370px; margin: 0 12px 10px 20px; padding:5px; border:solid 4px #353dc9; text-align:center; position:relative; font-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; }
.img-box .inner .box p.name:after{ content:""; position:absolute; top:-10px; left: calc(50% - 10px); left: -webkit-calc(50% - 9px); width:0; height:0; border-bottom: 10px solid #353dc9; border-right: 9px solid transparent; border-left: 9px solid transparent; z-index:1;}


/* material-site */
.material-site{ background:url("../images/photo_sale_tech.png") right bottom -60px / 650px 412px no-repeat,#f0f0f0; }

.material-site .flex-box{}
.material-site dd.link{ margin-right:10px; }
.material-site dd.link:last-child{ margin-right:0; }


/* what */
.what p img{ margin:25px 0 10px; }


/* concept */
.concept{ background:url("../images/what_concept_bg.jpg") center / cover no-repeat; padding:50px 0; margin-top: 30px; }
.concept .txt-box{ background:#fff; padding:55px; line-height:1.8em; }

.concept h4{ text-align:center; margin-bottom:20px; }
.concept h4 span{ display:block; font-size:16px; font-family:'Noto Sans-jp','Noto Sans-en'; position:relative; letter-spacing:2px; z-index:99; }
.concept h4 span:after{ background:#e7f100; position: absolute; bottom:11px; content:""; max-width:279px; width:279px; height:6px; left:calc(100% - 50% - 140px); z-index:-1;  }

.concept p{ padding-top:50px; }
.concept img.pic{ float:right; }

/* privacy */
.privacy .box-txt{ background:#fff; box-sizing:border-box; border:solid 4px #353dc9; margin-bottom:25px; padding:20px; }
.privacy dd{ margin-bottom:10px; }

/* map */
.map{ width:100%; height:500px; display:block; margin:0 auto; }

/* contact */
.contact-txtbox{ border:solid 4px #353dc9; box-sizing:border-box;  padding:40px; position:relative; margin:0 auto; text-align:left; display:block; width:100%; }
.contact-txtbox p{ margin:0; }
.contact-sbt{ display: block; text-align:center; margin-bottom: -35px; position: relative; z-index: 5;  }


/* plan */
.caution{ margin:0 50px 25px; }
	

/* illust */
.in-flax-box{ width:calc(100% / 4 -10px); height:100%; margin-right:10px; }
.in-flax-box img{ box-shadow:0 2px 5px 1px rgba(0,0,0,0.1); }
.in-flax-box a{ display: block; width: 100%; height: auto; }
.in-flax-box p{ margin-top:10px; font-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; text-align:center; }
.in-flax-box:nth-child(4),.in-flax-box:nth-child(7){ margin-right:0; }

.illust-box-bg{ background:url("../images/illust_box_bg.jpg")repeat; display: flex; display: -webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; justify-content: center;  box-shadow:0 2px 5px 1px rgba(0,0,0,0.1); padding:0 50px; }
.in-box{ box-shadow:none; width:calc(100% / 3 - 10px); margin-right:10px; text-align:center; }
.in-box p br{ display:none; }
.in-box:nth-child(3) , .in-box:nth-child(5){ margin-right:0; }
.in-box img{ width:243px; height:auto; }


/* illust pop up open */
.illust-bg{ background:url("../images/illust_box_bg.jpg")repeat; }
.illust-bg h5{ text-align:center; margin-top:20px; font-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; font-size:20px; letter-spacing:1px; }


/*work*/
.work .flex-box { justify-content:end; }
.work .flex-box .item { margin:5px; padding:15px; flex-basis:356px; background:#fff; box-sizing:border-box; border:solid 4px #f0f0f0; }
.work .item img{ width:100%; }

.work .item .item-img-web,.work .item .item-img-web-lp,.work .item .item-img-it,.work .item .item-img-dtp,.work .item .item-img-illust,.work .item .item-img-illust-s,.work .item .item-img-illust-i,.work .item .item-img-illust-c,.work .item .item-img-other{ width:100%; position:relative; }
.work .item .item-img-web:after{ content:"Web"; display:inline-block; position:absolute; bottom:-10px; left:10px; background:#353dc9; padding:2px 10px; font-family: 'Roboto-Bold'; font-size:16px; color:#fff; }
.work .item .item-img-web-lp:after{ content:"Web / LP"; display:inline-block; position:absolute; bottom:-10px; left:10px; background:#353dc9; padding:2px 10px; font-family: 'Roboto-Bold'; font-size:16px; color:#fff; }
.work .item .item-img-it:after{ content:"IT"; display:inline-block; position:absolute; bottom:-10px; left:10px; background:#b0ff7e; padding:2px 10px; font-family: 'Roboto-Bold'; font-size:16px; color:#fff; }
.work .item .item-img-dtp:after{ content:"DTP"; display:inline-block; position:absolute; bottom:-10px; left:10px; background:#ff5248; padding:2px 10px; font-family: 'Roboto-Bold'; font-size:16px; color:#fff; }
.work .item .item-img-other:after{ content:"OTHER"; display:inline-block; position:absolute; bottom:-10px; left:10px; background:#7f1dfd; padding:2px 10px; font-family: 'Roboto-Bold'; font-size:16px; color:#fff; }
.work .item .item-img-illust:after{ content:"Illust / Logo"; display:inline-block; position:absolute; bottom:-10px; left:10px; background:#fe1c4d; padding:2px 10px; font-family: 'Roboto-Bold'; font-size:16px; color:#fff; }
.work .item .item-img-illust-s:after{ content:"Illust / Stamp"; display:inline-block; position:absolute; bottom:-10px; left:10px; background:#fe1c4d; padding:2px 10px; font-family: 'Roboto-Bold'; font-size:16px; color:#fff; }
.work .item .item-img-illust-c:after{ content:"Illust / Character"; display:inline-block; position:absolute; bottom:-10px; left:10px; background:#fe1c4d; padding:2px 10px; font-family: 'Roboto-Bold'; font-size:16px; color:#fff; }
.work .item .item-img-illust-i:after{ content:"Illust / icon"; display:inline-block; position:absolute; bottom:-10px; left:10px; background:#fe1c4d; padding:2px 10px; font-family: 'Roboto-Bold'; font-size:16px; color:#fff; }
.work .item .item-body{ margin-top:15px; display:flex; }
.work .item .item-body:after{ content:""; display:block; clear:both; }
.work .item .item-body .item-txt p{ margin:0; }
.work .item .item-body .item-txt{ float:left; width:100%; font-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; font-size:16px; margin-top:5px; }
.work .item .item-body .item-txt .item-title{ font-size:12px; }
.work .item .item-body .item-icon{ float:right; width:50px; height:45px; background:url("../images/work_icon.png")center left 9px / 25px no-repeat , #000; }
.work .item a:hover .item-body .item-icon{ background:url("../images/work_icon.png")center left 9px / 25px no-repeat , #353dc9; transition: all 0.3s ease 0s; }


.pop-op .genre{ display:inline-block; padding:2px 10px; font-family: 'Roboto-Bold'; font-size:16px; color:#fff; text-align:left; margin-bottom:20px; }
.pop-op .genre.web{ background:#353dc9; }
.pop-op .genre.web:after{ content:"Web"; letter-spacing:1px;  }
.pop-op .genre.web-lp{ background:#353dc9; }
.pop-op .genre.web-lp:after{ content:"Web / LP"; letter-spacing:1px;  }
.pop-op .genre.it{ background:#b0ff7e; }
.pop-op .genre.it:after{ content:"IT"; letter-spacing:1px;  }
.pop-op .genre.dtp{ background:#ff5248; }
.pop-op .genre.dtp:after{ content:"DTP"; letter-spacing:1px;  }
.pop-op .genre.other{ background:#7f1dfd; }
.pop-op .genre.other:after{ content:"OTHER"; letter-spacing:1px;  }
.pop-op .genre.illust{ background:#fe1c4d; }
.pop-op .genre.illust:after{ content:"Illust / Logo"; letter-spacing:1px;  }
.pop-op .genre.illust-s{ background:#fe1c4d; }
.pop-op .genre.illust-s:after{ content:"Illust / Stamp"; letter-spacing:1px;  }
.pop-op .genre.illust-c{ background:#fe1c4d; }
.pop-op .genre.illust-c:after{ content:"Illust / Character"; letter-spacing:1px;  }
.pop-op .genre.illust-i{ background:#fe1c4d; }
.pop-op .genre.illust-i:after{ content:"Illust / icon"; letter-spacing:1px;  }
.pop-op{ display:none; font-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; }
.pop-op a{ outline:none; }
.pop-op > h4{ font-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; }

/* news **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.info .list{ width:100%; letter-spacing:1px; }
.info .list dl{ border-bottom:dotted 1px #b4b5b6; padding:0 20px; }
.info .list dl:not(:first-child){ margin-top:10px; }
.info .list dl dt{ color:#666; font-size:12px; }
.info .list dl dd{ background:url(../images/arrow_r_square_blue.svg) left 5px / 16px no-repeat; padding:3px 0 7px 26px; }
.info .list dl dd a{ display:block; }
.info .list dl dd a:hover{ text-decoration:none; color:#353dc9; }

/* web_shop **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.pic2.abs { top: 630px;right: 200px;}
.pic2 img{ box-shadow:0 2px 20px rgba(0,0,0,0.3); margin:0 20px 20px; }
.pic3.abs { right: 200px;}
.pic3 img{ box-shadow:0 2px 20px rgba(0,0,0,0.3); margin:0 20px 20px; }

/* form-s **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.form-s{background:none;}


/* ★★★ タブレット ★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media only screen and (max-width: 768px){
/* gnav **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.gnav { display:none; }


/* title **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.title{ height:140px; padding-top:43px; }

.title h2 img{ height: 65px; width: auto; }
.title h2 .abs { bottom: 19px; padding:0 5px; font-size: 10px; letter-spacing:1px; line-height:15px; }
.photo .title h2 .abs{ bottom: 20px; left:27px; }
	
/* particles.js */
#particles-js{ height:140px; pointer-events:none; }
	
	
/*///　pankuzu　//////////////////////////////////////////////////////////////////////////////////////////*/
.pankuzu{ padding:9px 0 15px ; position: relative;}
.pankuzu ul{position:absolute; right:0; bottom:0px;}

/* sublink **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.sublink{ padding:0 10px; margin:0; }
.sublink ul{ display:block; }
.sublink ul li{ float:left; width:calc(100% / 2 - 6px); width:-webkit-calc(100% / 2 - 6px); background-position:left 12px; margin-right:12px; }
.sublink ul li:nth-child(even){ margin-right:0; }
.sublink ul li:last-child{ border-bottom:0; }
.sublink ul li a{ display:block; width:100%; padding:10px 0; }
.sublink ul li:last-child a{ margin-right:0; }


/* sbt  **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* primary */
.sbt-primary{ padding:30px 10px 20px; }
.faq .sbt-primary,.design .sbt-primary,.news .sbt-primary,.access .sbt-primary,.contact .sbt-primary{ padding:20px 10px; }
.sbt-primary h3 { font-size:1.5em; line-height:23px; }
.sbt-primary h3 span{ font-size:16px; line-height:0.9rem; }
	
.sbt-primary{ width:100%; }
.sbt-primary:before{ height:40px; top:-30px; }

	
.design .sbt-primary h3 { padding:1rem 0 1rem 0; }
.web .sbt-primary h3,.it .sbt-primary h3,.dtp .sbt-primary h3,.illust .sbt-primary h3,.photo .sbt-primary h3,.faq .sbt-primary h3,.contact .sbt-primary h3,.access .sbt-primary h3,.work .sbt-primary h3,.work .sbt-primary h3,.plan .sbt-primary h3,.news .sbt-primary h3,.agreement .sbt-primary h3{ /*padding:1rem 0 1rem 3.5rem;*/  /*background-size:51px;*/ }
.web .sbt-primary:before,.it .sbt-primary:before,.dtp .sbt-primary:before,.illust .sbt-primary:before,.photo .sbt-primary:before,.faq .sbt-primary:before,.contact .sbt-primary:before,.access .sbt-primary:before,.work .sbt-primary:before,.plan .sbt-primary:before,.news .sbt-primary:before,.agreement .sbt-primary:before,.design .sbt-primary:before{ width:100%; left:0; }	

.web .sbt-primary h3{ background-size:75px 50px; padding: 5px 0 5px 80px; }
.it .sbt-primary h3{ background-size:58px 50px; padding: 5px 0 5px 65px; }
.dtp .sbt-primary h3{ background-size:54px 50px; padding: 5px 0 5px 65px; }
.illust .sbt-primary h3{ background-size:50px 50px; padding: 5px 0 5px 65px; }
.photo .sbt-primary h3{ background-size:63px 50px; padding: 5px 0 5px 65px; }
.plan .sbt-primary h3{ background-size:45px 50px; padding: 5px 0 5px 45px; }
.work .sbt-primary h3{ background-size:63px 50px; padding: 5px 0 5px 75px;}
.news .sbt-primary h3{ background-size:50px 50px; padding: 5px 0 5px 65px; }
.faq .sbt-primary h3{  background-size:51px 50px; padding: 5px 0 5px 65px; }
.contact .sbt-primary h3{ background-size:61px 50px; padding: 5px 0 5px 65px; }
.access .sbt-primary h3{ background-size:51px 50px; padding: 5px 0 5px 65px; }
.agreement .sbt-primary h3{ background-size:51px 50px; padding: 5px 0 5px 65px; }


/* h4 sbt */
.bar-blue{ margin-bottom:1rem; font-size:18px; }

	
/* flexbox ******
///////////////////////////////////////////////////////////////////////////////////////////////*/
.in-flax-box{ margin:0 10px; }
.in-flax-box p{ margin-top:10px; font-family:'Noto Sans-jp-bold','Noto Sans-en-bold'; }
	
	
/* box **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* content-bg */
.contents-bg { background: linear-gradient(90deg,rgba(255,255,255,.0) 0%,rgba(255,255,255,.0) 42.1%,#FFFFFF 42.1%,#ffffff 100%); }
.contents-bg .wrap{ width:100%; }

.web,.it,.dtp,.illust,.photo,.faq,.contact,.work,.plan,.news,.access,.agreement,.design{ background:none; }

	
/* pic */
.pic,.pic-ns{ float:none; text-align:center; }
.pic img,.pic-ns img{ max-width:100%; margin:0 0 10px; }

	
/* point box */
.point-box{ padding: 20px; }
.point-box > .flex-box-nowrap{ flex-wrap:wrap; justify-content:center;  }
.point-box .point-img{ margin-top:10px; margin-left:0; width:100%; }
.point-box p br{ display:none; }
.point-box span { display: inline-block; }

/* plan box */
.plan-box dd.inner img,.img-box dd.inner img{ margin-right:10px; width:100%; height:auto; }
.plan-box,.img-box{ padding:20px 10px; }


/* web_plan flow */
.flow{ width:100%; }
.flow-in{ padding:10px; }
.flow-box >.col2-txt br{ display:none; }
.flow-box > .col2-txt{ padding:0 5px 5px; }
.flow-service-box{ font-size:16px; padding-top:30px; }
.flow-service-box br{ display:none; }
.flow-service-box:after{ top:-41px; }
.flow-box h5 { margin-top:0; font-size:12px; }
.flow-box h5 br{ display:none; }
.flow-box h5 span.plan-name { display: block; padding: 10px 5px; }
.col1-img{ margin:0; max-width:100px; }
.col1-txt{ font-size:12px; margin-left:10px; }
.col1-txt p > span,.col2-txt p > span{ line-height:16px; margin-bottom:2px; padding: 2px 5px; }
.col2-txt{ font-size:8px; margin-bottom:10px; }

	
/* img box */
.img-box .inner .box,.img-box .inner .box p.name{ width:100%; }
.img-box .inner .box p.name{ margin:-10px 0 0; }
	
/* list box */
.list-box-sbt > .sbt{ margin-bottom:0; }
.list-box{ padding:20px; margin-top:20px; flex-wrap:wrap; justify-content:center;  }
.list-box2{ padding:20px; margin-top:20px; flex-wrap:wrap; justify-content:center;  }
.list-box-gray{ padding:10px; margin-top:5px; width:100%; }
.list-box ul{ float:none; }

/* icon */
.icon{ width:100%; flex-wrap:nowrap; justify-content:center; float:none; align-items:flex-start; margin-top:10px; }
.icon img , .inner img{ height:100%; }
.icon .item , .inner .item{ margin-right:10px; }
.icon .item{ max-height:136px; }


/* material-site */
.material-site{ background:url("../images/photo_sale_tech.png") right top / 58.5% no-repeat,#f0f0f0; }
.material-site dd{ text-align:left; }
.material-site dd br{ display:none; }
	
.material-site dd.link{ margin-right:0; margin-bottom:10px; }
.material-site dd.link:last-child{ margin-bottom:0; }
	
	
/* what */
.what h4{ font-size:16px; }
.what h4 br{ display:none; font-size:16px; }
.what p img{ margin:10px 0 0; }

	
/* concept */
.concept{ padding:15px; }
.concept .txt-box{ padding:25px 20px; }
	
.concept h4{ width:80%; margin: 0 auto 20px; font-size:12px; }
.concept h4 span:after{ width:250px; left: calc(100% - 50% - 126px); }

.concept p br{ display:none; }
.concept img.pic{ width:80%; margin:0 0 0 30px; float:none; }

	
/* map */
.map{ height:300px; }

	
/* contact */
.contact-txtbox{ padding: 30px 10px 10px; }
	

/* plan */
.caution{ margin:0 0 25px; }


/* illust */
.illust-box-bg{ padding:0 0 10px; }
.in-box{ width: calc(100% / 2 ); margin:0!important; }
.in-box p{ margin:0 5px 5px; }
.in-box img{ width:100%; height:auto; }

	


/* arrow bottom **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.arrow-b{ margin:15px 0; }
.arrow-b img{ width:64px; height:auto; }


/* info **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.info-list .list{ width:100%; }

}



/* ★★★ work用 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media only screen and (max-width: 750px){ /* iPhone6Plus */
/* box **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
	
/* work */
.work .flex-box .item { flex-grow:1; }
	
}

/* ★★★ スマホ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media only screen and (max-width: 414px){ /* iPhone6Plus */
/* sublink **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.sublink ul li{ float:none; width:100%; }

	
/* sbt **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.sbt-primary h3{ font-size: 1.2rem; padding: 10px 0 0 63px;}
	
/*.web .sbt-primary h3{ background: url(../images/web_titl_icon.svg) center left / 51px auto no-repeat; }*/
	

/* box **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/* green-border-box */
.green-border-box .floatR{ float:none; text-align:center; margin-bottom:15px; }


/* illust */
.in-flax-box { margin:0; }
.in-flax-box img{ width: 100%; }
.in-box p br{ display:inline; }

}