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

.fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1700ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}


.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: bold;
}



/*変数指定*/
:root {
  --main-color: #000071;/*紺*/
	--mainbk-color: #F3F4F7;/*薄グレー*/
	--subbk-color: #DDE4E3;/*薄水色*/
	
	--font-base: "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
	
	--font-m: "リュウミン B-KL", "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	
	--font-lato: "Lato", sans-serif;
}

.b_lightgray {background:  var(--mainbk-color);}


h2{
	font-size: 3rem;
	line-height: 1.7em;
	margin-bottom: 5%;
}
h2 span {color: var(--main-color);}

h2.page_t,
#page_document h2 {
	line-height: 1em;
	margin-bottom: 0;
	text-align: center;
	font-weight: bold;
	color: var(--main-color);
	padding: 10% 0 20%;
	letter-spacing: 0.05em;
	font-family: var(--font-lato);
}
#page_document h2 {padding: 5% 0 7%;}
#page_dx h2.page_t {font-size: 2.3rem;}
h2.page_t span,
#page_document h2 span {font-size: 0.5em;}
#page_dx h2.page_t p span {
	font-size: 0.45em;
	font-weight: normal;
	line-height: 0.3rem;
	color: #333;
}
#page_recruit h2.page_t span {color: #FFF;}

h2.page_t p {
	background: #FFF;
	padding: 3% 0 1%;
	width: 50%;
	margin: 0 auto;
}
#page_dx h2.page_t p {padding: 3% 0;}

h2.page_t {background: url(img/company/t2.jpg) no-repeat center bottom /cover;}
#page_remote h2.page_t {background: url(img/remote/t.jpg) no-repeat center bottom /cover;}
#page_dx h2.page_t {background: url(img/dx/t.jpg) no-repeat center bottom /cover;}

#page_product h2 {
	text-align: center;
	font-weight: bold;
	color: var(--main-color);
	padding: 0;
	font-size: 2.7em;
}

h2.recruit_yoko {
	font-size: 4rem;
	background: url(img/recruit/t2_2.jpg) no-repeat center center/cover;
	padding: 10% 0;
	letter-spacing: 0.05em;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	line-height: 1em;
}
h2.recruit_yoko span {
	font-size: 0.5em;
	color: #FFF;
}
#page_office h2,
#page_dx_support h2 {
	font-size: 4rem;
	background: url(img/office/t.jpg) no-repeat center center/100%;
	padding: 10% 0 7%;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	font-size: 2em;
	line-height: 1.5em;
	text-shadow: 0 0 5px rgba(0,0,0,1),0 0 5px rgba(0,0,0,1),0 0 5px rgba(0,0,0,1),0 0 5pxrgba(0,0,0,1),0 0 5px rgba(0,0,0,1),0 0 5px rgba(0,0,0,1);
	margin-bottom: 0;
}
#page_dx_support h2 {
	background: url(img/dx_support/t.jpg) no-repeat center center/100%;
}


#info_page_t h2 {
	text-align: center;
	margin-top: 13%;
	margin-bottom: 0;
}
#page_contact h2.page_t {margin-bottom: -7%;}


h3{
	font-size: 2.6rem;
	line-height: 1.5em;
	font-weight: bold;
	color: var(--main-color);
	font-family: var(--font-lato);
}
#page_company h3 {
	font-size: 2.2rem;
	line-height: 0.8em;
	text-align: center;
	letter-spacing: 0.05em;
	margin-bottom: 3%;
}
#philosophy h3 {color: #FFF;}
#page_recruit h3,
#remote_rei h3 {
	text-align: center;
	color: #333;
}
#page_recruit_yoko h3{
	text-align: center;
	margin-bottom: 2%;
	font-feature-settings: 1.8em;
	font-family: var(--font-m);
}
#page_remote h3 {
	text-align: center;
	color: #333;
	margin-bottom: 2%;
	font-size: 2.2rem;
	line-height: 1.5em;
}
#page_product h3,
#yasashisa h3,
#document_1stop h3,
#maintenance h3 {
	font-size: 2em;
	font-family: var(--font-m);
	color: #333;
	margin-bottom: 3%;
	text-align: center;
}
#canva h3 {
	font-size: 1.7em !important;
	font-family: var(--font-m);
	color: #333 !important;
	margin-bottom: 4%;
	text-align: center;
}
#design h3,
#koritsuka h3,
#risk h3,
#branding h3,
#lineup h3,
#produce h3,
#page_dx_support h3 {
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	margin-bottom: 1%;
	color: #FF0100;
}
#remote_point h3 {
	margin-top: -5%;
	font-size: 3em;
}
#remote_point h3 span {font-size: 2em;}

#page_dx h3,
#document_sodan h3,
#page_contact h3 {
	text-align: center;
	font-size: 2em;
	line-height: 1.6em;
	margin-bottom: 3%;
}
#page_contact h3 {margin: 2% auto 0;}

h3 span {
	font-size: 0.6em;
	color: #333;
	margin-left: 3%;
	font-weight: normal;
}
#page_company h3 span {
	font-size: 0.4em;
	margin-left: 0;
}
#philosophy h3 span {color: #333;}


h4 {
	font-size: 1.2rem;
	line-height: 2em;
	text-align: center;
	font-weight: 500;
}
#concept h4,
#principle h4 {color: var(--main-color);}
#principle h4,
#recruit_company h4,
#page_document h4 {font-weight: bold;}
#recruit_company h4 {font-size: 1.5em;}
#page_recruit_yoko h4 {
	font-weight: bold;
	margin-bottom: 2%;
}
#remote_menu h4 {
	text-align: left;
	font-weight: bold;
	width: 25%;
	float: left;
	margin-bottom: 1%;
}
#yasashisa h4,
#lineup h4 {
	font-size: 1.5em;
	font-family: var(--font-m);
	margin-bottom: 1%;
	text-align: center;
}
#design h4,
#koritsuka h4,
#risk h4,
#branding h4,
#lineup h4,
#produce h4,
#page_dx_support h4 {
	font-weight: bold;
	margin-bottom: 1%;
}
#page_product h4{margin-bottom: 5%;}

#page_dx h4 {
	font-weight: bold;
	text-align: left;
	margin-bottom: 1%;
}
#page_product h5 {
	text-align: center;
	font-weight: bold;
	font-size: 1.8em;
	margin-bottom: 2%;
}
#yasashisa h5,
#design h5,
#branding h5 {
	font-family: var(--font-m);
	text-align: center;
	font-weight: bold;
	font-size: 1.6em;
	line-height: 1em;
	margin-bottom: 2%;
}
#branding h5 {text-align: left;}
#yasashisa h5 span {font-size: 0.6em;}
#page_product h6 {
	font-size: 1.6em;
	font-family: var(--font-m);
	color: var(--main-color);
}


/* header */
#keyword {
	width: 90%;
	margin: 0 auto 1%;
	text-align: center;
	font-size: 10px;
	line-height: 1.3em;
}


/* footer */
#copy {
	font-size: 10px;
	line-height: 1.2em;
	text-align: center;
    padding: 5px;
	letter-spacing: 0.1em;
	background: #000071;
	color: #FFF;
}
#copy a {
	color: #FFF;
	display: inline;
}
.grecaptcha-badge { visibility: hidden; }
/*////// footer b_2columnここから//////*/
#footer {
	margin: 0;
	line-height: 2em;
	padding: 3% 0 0;
	text-align: left;
}
#footer_wrap {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto 3%;
}
#footer_wrap .left {
	width: 33%;
	text-align: center;
}
#footer_wrap .left img {
	margin: 40% auto 0; 
}
.fot_menu  {
	float: right;
	width: 60%;
}
.f1,.f2,.f3 {
	width: 30%;
	float: left;
	margin-left: 3%;
}
.fot_menu li {
	font-size: 0.9em;
	margin-bottom: 2%;
}
.fot_menu p {
	font-size: 1.1em;font-weight: bold;
	border-bottom: 1px solid #333;
	padding-bottom: 5px;
	margin-bottom: 5px;
}
.f1 p::first-letter {color: #003BAC;}
.f2 p::first-letter {color: #B40000;}
.f3 p::first-letter {color: #25BAF2;}
/*////// footer b_2columnここまで//////*/

.banner2 {
	width: 80%;
	max-width: 960px;
	margin: 3% auto;
}
.banner2 li {
	width: 48%;
	margin: 0 2% 3% 0;
	float: left;
}
.banner2 li:nth-child(2n) {margin: 0 0 3% 0;}

#fot_contact {
	background: url(img/footer/ill1.svg) no-repeat 10% 15%, url(img/footer/ill2.svg) no-repeat 85% 15%/15% 50% #A0BAC8;
	text-align: center;
}
#fot_contact h3 {
	color: #FFF;
	font-weight: bold;
	margin-bottom: 1%;
}
#fot_contact h4 {font-size: 1.3em;}

/*table*/
table {
    margin: 0 auto 2%;
    text-align: left;
}
td,th {
	padding: 10px;
	vertical-align: top;
}
table.kougo tr:nth-child(odd) th,
table.kougo tr:nth-child(odd) td {background: #E5E5E5;}

table.kougo tr th,
table.kougo tr td {border-top: 1px solid #333;}

table.kougo tr:last-child>* {border-bottom: 1px solid #333;}

table.yoko,
table.menu {border-collapse: collapse;}
table.yoko tr th,
table.yoko tr td,
table.menu tr th,
table.menu tr td {border: 1px solid #333;}
table.yoko tr th {background: #E8E8E8;}



/*TOP*/
.slider1 {
	width: 50%;
	float: right;
	top: 0;
}
.slider1 .swiper-wrapper .swiper-slide a:hover img {	
    opacity: 1 !important;
    filter: alpha(opacity=100);
    -moz-opacity:  1 !important;
}
.slider1 {
	margin-bottom: -15%;
	z-index: -1000 !important;
	position:inherit;
}

/*C BEST*/
@keyframes appear {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.5);
    filter: blur(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
.particle-text {
	margin: 10% auto 0;
	z-index: 0;
	position: relative;
	width: 75%;
}
.particle-text span {
  display: inline-block;
  animation: appear 1s forwards;
  opacity: 0; /* 初期状態は非表示 */
	width: 24.5%; 
	animation-delay: 0.2s;
	margin: 0;
}

/* 一文字ずつタイミングをずらす */
#top_hero .left .particle-text img {
	width: 100%;
	margin-left: 0;
}
.particle-text span:nth-of-type(1) {
	width: 50%;
	margin: 0 auto 2%;
}
.particle-text span:nth-of-type(2) { animation-delay: 0.6s; }
.particle-text span:nth-of-type(3) { animation-delay: 1.0s; }
.particle-text span:nth-of-type(4) { animation-delay: 1.4s; }
.particle-text span:nth-of-type(5) { animation-delay: 1.8s; }


#top_hero .left {
	width: 48%;
}
#top_hero .left h2 {
	font-size: 2.1em;
	font-weight: bold;
	margin: -65% 0 5% 10%;
	z-index: 10;
	position: relative;
}
#top_hero .left h2 span {
	font-weight: normal;
	color: #25BAF2;
}
#top_hero .left img {
	width: 30%;
	margin-left: 5%;
}
#top_service {
	z-index: 100 !important;
	position: relative;
}
.service_banner {
	font-size: 1.6em;
	font-weight: bold;
	margin-bottom: 2%;
}
.service_banner span {font-size: 0.6em;}
.service_banner p {
	font-size: 0.6em;
	font-weight: normal;
	margin-top: 2%;
}
.service_banner li {
	float: left;
	width: 31%;
	margin: 1% 1% 0;
	background: #FFF;
	border-bottom: 3px solid var(--main-color);
	box-shadow:0 0 10px #B1B1B2;
}
.hover-card {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;	
}
.hover-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.hover-card a,
.hover-card a:hover,
.hover-card a:hover img {
	opacity: 1 !important;
    filter: alpha(opacity=100);
    -moz-opacity:  1 !important;
}

.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0);
  }
  50% {
    transform:translate(0, -7px);
  }
  100% {
    transform:translate(0, 0);
  }
}

.service_banner li a {
	display: block;
	padding: 10%;
}

.service_banner2 li {
	width: 80%;
	margin: 3% auto;
}

#top_office {
	background: #dfe6e5 url(img/top/office_b.jpg) no-repeat top center /100%;
}
#top_office h3 {
	color:#FFF;
	text-align: center;
	margin-bottom: 2%;
	font-size: 3em;
	margin-left:3%;
}
#page_service h3 {
	text-align: center;
	margin-bottom: 3%;
	font-size: 3em;
}
.impact_img1 {
	margin: -10% 0 0 -8%;
	width:30%;
	float: left;
}
.impact_img2 {
	margin: 10% -10% -40% 0;
	width:30%;
	float: right;
}
.b_white_kousai {
	max-width: 900px;
	margin: 0 auto;
	background: #FFF;
	padding: 5%;
	border-radius:10px;
	box-shadow: 0 0 10px #B1B1B2;
}
#page_service .b_white_kousai {max-width: 850px;}
.b_white {
	max-width: 960px;
	margin: 0 auto;
	background: #FFF;
	padding: 3% 5%;
	border-radius:10px;
}
#impact_wrap {
	float: right;
	width:80%;
	font-size:1.2em;
}
#page_service #impact_wrap {
	float: none;
	width:100%;
}
.border_b {
	border-top: 1px solid #333;
	margin: 2% 0;
}
#impact_wrap h4 {
	font-size:1.8em;
	font-weight: bold;
	margin-bottom: 3%;
}
#impact_wrap .left {
	width: 45%;
	font-weight:bold;
	font-size:1.6em;
}
#impact_wrap .right {
	width: 40%;
	background:  var(--main-color);
	font-weight:bold;
	font-size: 1.1em;
	line-height: 1.8em;
	margin-right:14%;
}
#impact_wrap .right a {
	color: #FFF;
	text-align:center;
}
#impact_wrap2 li {
	margin-bottom: 5%;
	width: 50%;
	float: left;
}
#impact_wrap2 li:last-child {
	margin-bottom: 0;
	width: 100%;
	float: none;
}
#impact_wrap2 p {
	font-weight:bold;
	font-size: 1.2em;
}

/*////// t_お知らせ（contents post e）ここから//////*/
#top_info {
	padding: 5% 0;
	background:  var(--mainbk-color);
}
#top_info .left {width: 18%;}
#top_info h2 {
	font-size: 2em;
	line-height:1.2em;
	font-weight: bold;
}
#top_info h2 span {
	font-size: 0.6em;
	font-weight: normal;
}
#top_info .left a {
	border: 1px solid #CCC;
	padding: 2%;
	border-radius:20px;
	text-align: center;
	width: 90%;
	background: url(img/i_right.svg) no-repeat 95% center /7%;
}
.post_e {
	float: right;
	width:75%;
}

.post_e li {
	margin-bottom: 4%;
	padding: 0 0 4%;
	border-bottom: 1px solid #D8D9D9;
}

.info_day {
	float: left;
	width: 15%;
}
.info_txt {
	float: left;
	width: 75%;
}
.info,
.i_new,
.seminar,
.jusho {
	float: left;
    font-size: 0.7rem;
    line-height: 1;
    content: 'お知らせ';
    color: #fff;
    padding: 0.2rem 0;
    background: #0098D1;
    margin: 1% 0.4rem 0 0;
    vertical-align: middle;
	width: 20%;
	text-align: center;
}
#news_wrap .info,
#news_wrap .i_new,
#news_wrap .seminar,
#news_wrap .jusho {width: 13%;}

.i_new {background: #C03;}
.seminar {
	background: #333;
    content: 'セミナー';
}
.jusho {
	background: #132685;
    content: '受賞･資格取得';
}

#top_recruit {
	background: url(img/top/recruit_b.jpg) no-repeat center center /cover;
	padding: 5% 0;
}
#top_recruit .wrap {max-width: 600px;}
#top_recruit h2 {
	color: #25baf2;
	font-weight: bold;
	font-size: 3.2em;
	border-right: 1px solid #FFF;
	padding-right:3%;
	margin-right: 3%;
	float: left;
	width: 40%;
	text-align: right;
}
#top_recruit p {
	color: #FFF;
	font-size:1.5em;
	line-height:1.6em;
	float: right;
	width: 53%;
	font-weight: bold;
}
#top_recruit a {
	text-align: center;
	font-size:1.5em;
	line-height:3em;
	border: 1px solid #FFF;
	border-radius:40px;
	max-width: 400px;
	margin: 1% auto 0;
	font-weight: bold;
	background: url(img/i_right.svg) no-repeat 95% center /4%,rgba(255,255,255,0.7);
}



/*会社概要*/
#page_menu {
	width: 90%;
	margin: -1% auto 3%;
	display: flex;
  justify-content: center;
  gap: 4%; /* li 要素同士の間隔 */
}
#page_menu li {
	float: left;
	background: url(img/u_line.svg) no-repeat center bottom /40px;
	padding-bottom: 0.5%;
}
#concept {
    width: 100%;
    margin: 0;
    padding: 3% 0 15%;
    position: relative;
    top: 3%;
    overflow: hidden;
}
#concept::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--subbk-color);
    transform: skewY(-7deg) translateY(-90px);
    z-index: -1;
}
#concept .wrap {
	max-width: 800px;
	padding: 0;
}
#network {margin-top: -5%;}
#network img {
	float: left;
	width: 45%;;
}
#network ul {
	float: right;
	width: 50%;
	text-align: left;
}
#network li {
	border: 2px solid #7CC6DD;
	border-radius: 10px;
	margin-bottom: 3%;
}
#network li:nth-child(2) {border: 2px solid #A3D2D4;}
#network li:nth-child(3) {border: 2px solid #6FA6DD;}
#network li h4 {
	font-size: 1.3em;
	color: #FFF;
	background: #7CC6DD;
	padding: 1%;
	text-align: left;
	border-radius: 5px 5px 0 0;
}
#network li:nth-child(2) h4 {background: #A3D2D4;}
#network li:nth-child(3) h4 {background: #6FA6DD;}
#network li p {padding: 2%;}

#philosophy {background: url(img/company/rinen.jpg) no-repeat center bottom/cover;}
#philosophy p {
	text-align: center;
	font-size: 1.2em;
	line-height: 2em;
	margin-bottom: 10%;
}
#purpose img {
	float: left;
	width: 46%;;
}
#purpose ul {
	float: right;
	width: 52%;
	margin-top: 2%;
}
#purpose h5 {
	font-weight: bold;
	font-size: 1.2em;
	background:linear-gradient(transparent 80%, #FFDE00 80%);
}
#purpose li:nth-child(2) h5 {background:linear-gradient(transparent 80%, #CF84C6 80%);}
#purpose li:nth-child(3) h5 {background:linear-gradient(transparent 80%, #6DC9E3 80%);}
#purpose li:nth-child(4) h5 {background:linear-gradient(transparent 80%, #FFAF00 80%);}
#purpose li:nth-child(5) h5 {background:linear-gradient(transparent 80%, #FF8BCD 80%);}

#purpose h5 span {font-size: 0.8em;}

#purpose li {margin-bottom: 3%;}

#principle {
	margin: 0 auto;
	border-radius: 20px;
	box-shadow: 0 0 10px rgba(0,0,0,0.2),0 0 10px rgba(0,0,0,0.2);
	text-align: center;
	max-width: 700px;
}
#principle .wrap {padding: 2% 0;}
#principle h3 {
	border-bottom: 1px solid var(--main-color);
	margin-bottom: 2%;
	padding-bottom: 2%;
}
#principle li {margin-bottom: 5%;}

#security,
#dx_message,
#dx_promotion,
#dx_achievement {
    padding:0;
    position: relative;
    top: 0;
}
#security{margin: 5% 0;}
#security::before,
#dx_message::before,
#dx_promotion::before,
#dx_achievement::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--subbk-color);
    transform: skewY(-7deg);
    z-index: -1;
}
#security ul {
	max-width: 700px;
	margin: 3% auto;
}
#security li {margin-bottom: 5%;}

#security h5 {
	font-size: 1.2em;
	color: var(--main-color);
	font-weight: bold;
}
#access .wrap {margin: 3% auto 0;}



/*recruit*/
#recruit_message {
	background: url(img/recruit/message_b.svg)no-repeat top right/70%;
	padding: 5% 0;
}
#recruit_message .wrap {
	text-align: left;
	max-width: 850px;
	margin: -2% auto 0;
	font-size: 1.2em;
	line-height: 2.2em;
}
#recruit_message .wrap img {
	width: 65%;
	max-width: 300px;
	margin-top: 5%;
	float: right;
}

#recruit_company {background: url(img/recruit/company_b.jpg)no-repeat top right/cover;}
#recruit_company li {
	width: 30%;
	margin: 3% 1.5%;
	border-radius: 20px;
	background: repeating-linear-gradient(#00005D,#0097E2);
	border: 1px solid #FFF;
	padding: 1% 3%;
	float: left;
	box-shadow: 0 0 10px rgba(0,0,0,0.2),0 0 10px rgba(0,0,0,0.2);
}
#recruit_company li a {color: #FFF;}
#recruit_company .click {
	width: 70%;
	margin: 7% auto 3%;
}
#recruit_works {background: url(img/recruit/job_b.svg)no-repeat top right/30%;}
#recruit_works li {margin-top: 7%;}
#recruit_works h5 {
	font-size: 2em;
	font-weight: bold;
	color: var(--main-color);
	margin-bottom: 2%;
	padding-bottom: 2%;
	border-bottom: 1px solid var(--main-color);
	text-align: center;
}
#recruit_works .img {
	width: 35%;
	float: left;
}
#recruit_works li:nth-child(even) .img {float: right;}
#recruit_works .txt {
	width: 63%;
	float: right;
}
#recruit_works li:nth-child(even) .txt {float: left;}
#recruit_works .click {
	width: 50%;
	max-width: 250px;
	margin: 5% auto 0;
}
#recruit_human {
	background: url(img/recruit/human_b.jpg)no-repeat top left/cover;
	padding-left: 35%;
	text-align: center;
}
#recruit_human li {
	background: #FFF;
	border-radius: 30px;
	padding: 2%;
	font-size: 1.5em;
	margin-top: 3%;
}
#page_recruit #purpose {background: url(img/recruit/mokuteki_b.svg)no-repeat right 10% /90%;}

#recruit_tsuyomi li {
	max-width: 800px;
	margin: 3% auto 0;
	border-radius: 20px;
	box-shadow: 0 0 10px rgba(0,0,0,0.2),0 0 10px rgba(0,0,0,0.2);
	padding: 2%;
}
#recruit_tsuyomi h4,
.recruit_kyuka h4 {
	font-size: 1.5em;
	color: var(--main-color);
	font-weight: bold;
	border-bottom: 1px solid var(--main-color);
	margin-bottom: 1%;
	padding-bottom: 1%;
}
.recruit_kyuka h4 {font-size: 1.8em;}
#recruit_welfare {background: url(img/recruit/fukuri_b.svg)no-repeat left 5% /90%;}
#recruit_welfare li {
	max-width: 800px;
	margin: 3% auto 0;
}
#recruit_welfare li .left {width: 40%;}
#recruit_welfare li .right {width: 59%;}
#recruit_welfare h5 {
	font-size: 1.5em;
	font-weight: bold;
	background: url(img/recruit/fukuri_1.svg) no-repeat left top /1.8em;
	padding: 0 0 1em 2em;;
}
#recruit_welfare li:nth-child(2) h5 {background: url(img/recruit/fukuri_2.svg) no-repeat left top /1.8em;}
#recruit_welfare li:nth-child(3) h5 {background: url(img/recruit/fukuri_3.svg) no-repeat left top /1.8em;}

.recruit_kyuka {text-align: center;}
.recruit_kyuka li {
	width: 30%;
	float: left;
	margin: 3% 1.5% 0;
	padding: 5% 0;
	background: #E7E7E7;
	border-radius: 10px;
}
.recruit_kyuka li img {
	width: 60%;
	margin: 0 auto 5%;
}
.recruit_kyuka h5 {
	font-size: 1.2em;
	font-weight: bold;
	color: var(--main-color);
}
.recruit_kyuka p {
	display: inline-block;
    text-align: left;
	margin-top: 2%;
}
#recruit_office {background: url(img/recruit/office_b.svg)no-repeat right 1.5% /95%;}


/*募集要項*/
.r_txt {text-align: center;}
.r_txt p {
	display: inline-block;
    text-align: left;
	margin-bottom: 3%;
}
.contact_page_txt {
	text-align: center;
	margin-bottom: 5%;
}

/*リモートサポート*/
#remote_kaiketsu {
	background: url(img/remote/img1.jpg)no-repeat 5% center / 13% ,url(img/remote/img2.jpg)no-repeat 95% center / 13%;
}
#remote_point img {
	width: 80%;
	margin: 0 auto 3%;
}
#remote_img {background: #92DBC6;}
.rei {
	width: 45%;
	float: left;
	margin: 3% 2.5%;
}
.rei h4 {
	text-align: center;
	color: #FFF;
	background:  #333;
	padding: 0.5% 10%;
	display: inline-block;
	margin: 0 auto 5%;
	border-radius: 20px;
}
.rei ul {
	border: 3px solid #333;
	border-radius: 10px;
	padding: 10% 4% 2%;
	margin-top: -10%;
}
.rei li {
	border-bottom: 1px solid #333;
	margin-bottom: 2%;
	padding-bottom: 2%;
}
#remote_menu_b {
	background: #F1EDDC;
	 border-radius: 50% 50% 0 0;
	padding-top: 20%;
}
#remote_menu {background: #F1EDDC;}
#remote_menu .wrap {padding-top: 0;}
#remote_menu h3 {margin-top: -10%;} 

.chui {
	text-align: right;
	font-size: 0.9em;
	width: 70%;
	float: right;
	margin-top: 2%;
}
table.menu {
	background: #FFF;
}
table.menu span {
	font-size: 0.8em;
	line-height: 1em;
}
.menu_price {
	font-size: 1.3em;
	font-weight: bold;
	text-align: right;
}
.gray {
	background: #E8E8E8;
	text-align: center;
}
.yellow {
	background: #DCDB00;
	text-align: center;
}
.green {
	background: #92DBC6;
	text-align: center;
}
.end_message {
	font-size: 1.5em;
	line-height: 1.7em;
	font-weight: bold;
	color: #C03;
	width: 90%;
	max-width: 960px;
	margin: 5% auto;
	text-align: center;
}
.remote_btn {
	background: #000071; 
	text-align: center;
	font-size: 1.3em;
	line-height: 3em;
	border-radius: 30px;
	max-width: 500px;
	margin: 3% auto 0;
	font-weight: bold;
}
.remote_btn a {color: #FFF;}

/*ビジネスプリンター・複合機*/
#page_product ul {
	max-width: 800px;
	margin: 0 auto 10%;
}
#page_product li {
	border-bottom: 1px solid #333;
	margin-bottom: 2%;
	padding-bottom: 2%;
}
#page_product .left {width: 78%;}
#page_product .right {width: 20%;}
#page_product .right a {
	background: var(--main-color);
	color: #FFF;
	padding: 0.5% 0;
	text-align: center;
	border-radius: 20px;
}

/*オフィス提案*/
.wrap_inner {
	max-width: 700px;
	margin: 0 auto;
}
#page_dx_support .wrap_inner {
	max-width: 800px;
	margin: 0 auto;
}
#yasashisa li {
	width: 30%;
	margin: 3% 1.5%;
	background: var(--subbk-color);
	padding: 2%;
	border-radius: 10px;
	text-align: center;
	float: left;
}
#yasashisa li img {
	max-width: 120px;
	margin: 0 auto 4%;
}
#design,
#risk,
#lineup,
#document_1stop,
#maintenance {background: var(--subbk-color);}
#design .wrap_inner {margin-bottom: 5%;}
#design .wrap_inner .left {
	width: 53%;
	background: url(img/office/ya.svg) no-repeat right 45% /11%;
}

#design .wrap .wrap_inner .left img,
#design .wrap .wrap_inner .left p {width: 88%;}
#design .wrap .wrap_inner .left {width: 53%;}
#design .wrap .wrap_inner .right {width: 46%;}
#design .wrap .wrap_inner .left img,
#design .wrap .wrap_inner .right img,
#risk li img {margin-bottom: 1%;}

#design .img,
#branding .img {
	width: 50%;
	float: left;
}
#design .txt,
#branding .txt {
	width: 48%;
	float: right;
	text-align: left;
}
#koritsuka .wrap_inner {
	text-align: left;
	margin-top: 1%;
}
#risk li {
	width: 46%;
	margin: 0 2%;
	float: left;
	text-align: left;
}
#lineup li {
	width: 30%;
	margin: 1.5%;
	float: left;
	background: #FFF;
	border-radius: 10px;
	padding: 2%;
}
#lineup li img,
#maintenance li img {
	width: 45%;
	margin: 0 auto 2%;
}


/*DXへの取り組みについて*/
#page_dx .wrap {
	max-width: 800px;
	margin: 0 auto;
}
#page_dx li {margin-bottom: 5%;}
#dx_message .name {
	margin-top: 3%;
	text-align: right;
}
#dx_message .name span {font-size: 1.5em;}
#page_dx img {
	width: 90%;
	max-width: 550px;
	margin: 0 auto 3%;
}
#dx_security .left {width: 70%;}
#dx_security .right {
	width: 20%;
	margin-bottom: 3%;
}
#dx_security .right img {max-width: 100%;}


/*DX伴走支援*/
#hub {text-align: left;}
#hub li {
	width: 47%;
	float: left;
	margin: 0 1.5% 3%;
}
#hub h5 {
	font-size: 1.4em;
	font-weight: bold;
	color: #FFF;
	background: #2C5471;
	padding: 1% 2%;
	display: inline;
}
#hub h6 {
	font-size: 1.1em;
	font-weight: bold;
	margin: -1% 0 1%;
	padding-top: 3%;
	border-top: 3px solid #2C5471;
}
#hub img {margin: 3% auto;}
#essential h5 {
	font-size: 1.4em;
	font-family: var(--font-m);
	margin: 1% auto;
	text-align: center;
}
.approach {
	max-width: 470px;
	margin: 3% auto;
}
#essential .left,
#essential .right {width: 48%;}
#essential .left p,
#essential .right p {
	background: #EDCAC4;
	font-weight: bold;
	margin-bottom: 1%;
	padding: 1% 2%;
}
#essential .right p {background: #C2D2DC;}
.productivity {margin-top: 5%;}
.productivity img {
	max-width: 750px;
	margin: 3% auto;
}
.productivity li {
	width: 27%;
	margin: 1% 1% 3%;
	background: var(--subbk-color);
	padding: 2%;
	border-radius: 10px;
	float: left;
}
.productivity li p {
	text-align: center;
	font-family: var(--font-m);
	margin-bottom: 1%;
	padding-bottom: 1%;
	border-bottom: 1px solid #333;
	font-size: 1.1em;
	font-weight: bold;
}
#dx_ai .left {width: 25%;}
#dx_ai .right {width: 73%;}
#gui_list {
	background: url(img/dx_support/gai_b.jpg) no-repeat center bottom/cover;
	padding: 3% 0;
}
#gui_list li {
	width: 44%;
	float: left;
	background: #FFF;
	margin: 1%;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.2),0 0 10px rgba(0,0,0,0.2);
	padding: 2%;
}
#gui_list h5 {
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
	margin-bottom: 1%;
	padding-bottom: 1%;
	border-bottom: 1px solid #333;
}
#gui_list .left {
	width: 35%;
	margin-top: 3%;
}
#gui_list .right {width: 60%;}
#gui .wrap {padding: 1% 0 3%;}

#canva ul {
	margin: 5% 0;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-content: flex-start;
	align-content: flex-start;
}
#canva li {
	width: 20%;
	float: left;
	text-align: center;
	margin: 0 2.5%;
	display: block;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
#canva li img {
	width: 70%;
	margin: 0 auto 3%;
}

/*ドキュメント*/
#document_1stop ul {
	max-width: 850px;
	margin: 0 auto;
}
#document_1stop li {margin-bottom: 3%;}
#document_1stop li img {
	float: left;
	width: 40%;
}
#document_1stop li .right {
	width: 57%;
	text-align: left;
}
#document_1stop li h4 {
	text-align: left;
	line-height: 2em;
}
#document_1stop li h4 span {
	background: var(--main-color);
	color: #FFF;
	padding: 1.5% 3%;
	border-radius: 20px;
}
#document_sodan {text-align: center;}
#document_sodan ul {margin: 3% 0;}
#document_sodan li {
	font-size: 1.3em;
	width: 45%;
	margin: 1% 2%;
	background: var(--subbk-color);
	padding: 1% 0;
	border-radius: 20px;
	float: left;
}

#maintenance li {
	width: 28%;
	float: left;
	margin: 3% 2.5% 0;
}
#maintenance h5 {
	font-weight: bold;
	font-size: 1.2em;
	margin-bottom: 2%;
}


/*===============================================
SP
===============================================*/
@media screen and (max-width: 640px){
h2 {font-size: 2rem;}
#info_page_t h2 {margin-top: 20%;}

h2.page_t {font-size: 1.7rem;}
#page_product h2 {font-size: 1.6rem;}
h2.page_t span {font-size: 0.5em;}
h2.page_t p {width: 80%;}
	
h2.recruit_yoko {
	font-size: 2rem;
	background: url(img/recruit/t2_2_sp.jpg) no-repeat center center/cover;
}
#page_dx h2.page_t {font-size: 1.3rem;}
#page_dx h2.page_t p span {
	font-size: 0.6em;
	line-height: 0.5rem;
}
#page_dx h2.page_t p {padding: 3% 0;}

h2.page_t {background: url(img/company/t2.jpg) no-repeat center bottom /cover;}
#page_remote h2.page_t {background: url(img/remote/t.jpg) no-repeat center bottom /cover;}
#page_dx h2.page_t {background: url(img/dx/t.jpg) no-repeat center bottom /cover;}
	
#page_dx_support h2 {
	background: url(img/dx_support/t_sp.jpg) no-repeat center center/100%;
	font-size: 1.5em;
}
#page_office h2 {
	background: url(img/office/t_sp.jpg) no-repeat center center/100%;
	font-size: 1.5em;
}
	
h3 {font-size: 1.7rem;}
#page_service h3 {font-size: 2.2rem;}
h3 span {
	font-size: 0.8em;
	margin-left: 3%;
}		
#page_company h3,
#page_remote h3,
#remote_point h3,
#maintenance h3 {
	font-size: 1.5rem;
	line-height: 1.4em;
}
#page_company h3 span {
	font-size: 0.7em;
	line-height: 0.5em;
}

#remote_kaiketsu h3,
#page_product h3,
#page_dx h3,
#page_dx_support h3,
#document_1stop h3,
#document_sodan h3,
#page_contact h3,
#page_office h3,
#design h3,
#koritsuka h3,
#risk h3,
#branding h3,
#lineup h3,
#produce h3,
#page_dx_support h3 {
	font-size: 1.3em;
	line-height: 1.5em;
}
h4 {
	font-size: 1rem;
	line-height: 1.5em;
	font-weight: bold;
}
#page_recruit_yoko h4 {text-align: left;}
	
#page_product h5,
#page_office h5 {font-size: 1.1em;}
#page_product h6 {
	font-size: 1em;
	font-weight: bold;
}

#copy {padding-bottom: 10%;}
/*////// footer b_2columnここから//////*/
.fot_menu {display: none;}
#footer {
	margin: 0;
	line-height: 2em;
	padding: 3% 0 0;
	text-align: center;
}
#footer_wrap .left {
	width: 100%;
	float: none;
}
#footer_wrap .left img {
	width: 80%;
	margin: 7% auto; 
}
/*////// footer b_2columnここまで//////*/

.banner2 li,
.banner2 li:nth-child(2n) {
	width: 100%;
	margin: 0 auto 5%;
	float: none;
}

#fot_contact {
	background: url(img/footer/ill1.svg) no-repeat left top, url(img/footer/ill2.svg) no-repeat right bottom / 3% 5% #A0BAC8;
	padding: 7% 0;
	text-align: center;
	margin-top: -10%;
}
#fot_contact h3 {
	margin-bottom: 1%;
}
#fot_contact h4 {font-size: 1.3em;}
	
/* 下menu */
div#footerArea {
	/*top: 0;*/
	margin: auto auto 0 auto;
	width: 100%;
	position: fixed !important;
	/*position: absolute;*/
	bottom: 0;
	z-index: 999;
}
div#footerArea ul li {
	width: calc(98.7%/3);
	border-right: 1px solid #FFF;
	border-top: 1px solid #FFF;
	float: left;
	text-align: center;
}
div#footerArea ul li:last-child {border-right: none;}

	
	
/*table*/
table.yoko th,
table.yoko td,
table.kougo th,
table.kougo td {
	width: 100%;
    display: block;
}
	
table.yoko tr th{border-bottom: none;}
table.yoko tr td{border-top: none;}
	
table.kougo {width: 100%;}
table.kougo tr th {
	border-bottom: none;
	padding-bottom: 0;
}
table.kougo tr td {
	border-top: none;
	padding-top: 0;
}
table.kougo tr:last-child th {border-bottom: none;}

table.menu{min-width: 640px;}
table.menu .yellow {width: 42%;}
table.menu .green {width: 18%;}
.table_scroll_txt {margin-bottom: 1%;}
.table_scrol {overflow-x: auto;}	
	

/*TOP*/
.slider1 {
	width: 100%;
	float: none;
	top: 0;
}
.slider1 .swiper-wrapper .swiper-slide a:hover img {	
    opacity: 1 !important;
    filter: alpha(opacity=100);
    -moz-opacity:  1 !important;
}
.slider1 {
	margin-bottom: -13%;
}
	
/*C BEST*/
.particle-text {
	margin: 10% auto 0;
	width: 80%;
}
.particle-text span {
	width: 24%; 
	animation-delay: 0.2s;
	margin: 0;
}

/* 一文字ずつタイミングをずらす */
#top_hero .left .particle-text img {
	width: 100%;
	margin-left: 0;
}
.particle-text span:nth-of-type(1) {
	width: 50%;
	margin: 0 auto 2%;
}
/* 一文字ずつタイミングをずらす */
.particle-text span:nth-of-type(1) {font-size: 15em;}
.particle-text span:nth-of-type(2) { animation-delay: 1.6s; }
.particle-text span:nth-of-type(3) { animation-delay: 2.0s; }
.particle-text span:nth-of-type(4) { animation-delay: 2.4s; }
.particle-text span:nth-of-type(5) { animation-delay: 2.8s; }
	

#top_hero {padding-bottom: 7%;}
#top_hero .left {
	width: 100%;
	float: none;
	margin: 0 auto;
}
#top_hero .left h2 {
	font-size: 1.5em;
	font-weight: bold;
	margin: -60% 0 0 5%;
}
#top_hero .left img {
	width: 30%;
	margin: -5% 0 -10% 0;
	float: right;
}
.service_banner {
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 2%;
}
.service_banner span {font-size: 0.6em;}
.service_banner p {
	font-size: 0.6em;
	margin-top: 2%;
}
.service_banner li {
	float: none;
	width: 100%;
	margin: 2% auto;
}
.service_banner li a {
	display: block;
	padding: 7% 3%;
}

.service_banner2 li {
	width: 100%;
	margin-bottom: 2%;
}

#top_office {
	background: #dfe6e5 url(img/top/office_b.jpg) no-repeat top center /100%;
	padding: 7% 0;
}
#top_office h3 {
	margin-bottom: 2%;
	font-size: 1.5em;
	line-height: 1.5em;
	margin-left:3%;
}
.impact_img1 {
	margin: -5% 0 0 -8%;
	width:40%;
}
.impact_img2 {
	margin: -10% -10% -40% 0;
	width:50%;
}
.b_white_kousai,
#page_service .b_white_kousai {
	max-width: 100%;
	padding: 5%;
}
.b_white,
#page_service .b_white {
	max-width: 90%;
	margin: 0 auto;
	padding: 3% 5%;
}
#impact_wrap,
#page_service #impact_wrap,
#page_service #impact_wrap h4,
#page_service #impact_wrap .margin_b3p {
	float: none;
	width:100%;
	font-size:1em;
}
#impact_wrap2 {
	float: none;
	width: 100%;
}
.border_b {
	margin: 4% 0;
}
#impact_wrap h4 {
	float: right;
	width: 70%;
	font-size:1.3em;
	font-weight: bold;
	margin-bottom: 3%;
}
#impact_wrap .margin_b3p {
	float: right;
	width: 70%;
}
#impact_wrap .left {
	font-weight:bold;
	font-size:1.2em;
	width: 52%;
}
#impact_wrap .right {
	font-weight:bold;
	font-size: 1em;
	line-height: 1.7em;
	margin-right: 0;
}
#impact_wrap2 li {
	margin-bottom: 5%;
	width: 100%;
	float: none;
}
#impact_wrap2 li:last-child {margin-bottom: 0;}
#impact_wrap2 p {
	font-weight:bold;
	font-size: 1em;
}

/*////// t_お知らせ（contents post e）ここから//////*/
#top_info {
	padding: 7% 0;
	background:  var(--mainbk-color);
}
#top_info .left {
	width: 100%;
	float: none;
}
#top_info h2 {
	font-size: 1.6em;
	line-height:1.2em;
	font-weight: bold;
	margin-bottom: 2%;
}
#top_info h2 span {
	font-size: 0.7em;
	margin-left: 2%;
}
#top_info .left a {
	padding: 1.5%;
	width: 60%;
	margin-bottom: 5%;
	background: url(img/i_right.svg) no-repeat 95% center /5%;
}
.post_e {
	float: none;
	width:100%;
	margin: 3% auto 0;
}

.post_e li {
	margin-bottom: 5%;
	padding: 0 0 5%;
	border-bottom: 1px solid #D8D9D9;
	font-size: 0.9em;;
}

.info_day {
	width: 30%;
}
.info_txt {
	float: none;
	width: 100%;
}
.info,
.i_new,
.seminar,
.jusho {width: 30% !important;}

#top_recruit {
	background: url(img/top/recruit_b.jpg) no-repeat center center /cover;
	padding: 7% 0;
}
#top_recruit .wrap {max-width: 100%;}
#top_recruit h2 {
	font-weight: bold;
	font-size: 2.5em;
	border-bottom: 1px solid #FFF;
	border-right: none;
	padding: 0 0 3% 0;
	margin: 0 0 3% 0;
	float: none;
	width: 100%;
	text-align: center;
}
#top_recruit p {
	font-size:1.2em;
	line-height:1.6em;
	float: none;
	width: 100%;
	text-align: center;
}
#top_recruit a {
	font-size:1.4em;
	line-height:3em;
	border-radius:40px;
	max-width: 80%;
	margin: 3% auto 0;
	font-weight: bold;
}
#top_recruit a.w100 {max-width: 100%;}
	
	
/*会社概要*/
#page_menu {display: none;}
#concept {padding: 3% 0 30%;}
#concept .wrap {max-width: 90%;}
#network {margin-top: -15%;}
#network img,
#purpose img {
	float: none;
	width: 80%;
	margin: 0 auto 3%;
}
#network ul,
#purpose ul {
	float: none;
	width: 100%;
	margin-bottom: 3%;
}
#network li {margin-bottom: 7%;}
#network li h4 {text-align: center;}

#philosophy {background: url(img/company/rinen_sp.jpg) no-repeat center bottom;}
#philosophy p {
	font-size: 1em;
	line-height: 2em;
	margin-bottom: 40%;
	text-align: left;
}
#purpose h4 {text-align: left;}
#purpose h5 {font-size: 1.2em;}
#purpose h5 span {font-size: 0.6em;}

#principle {
	max-width: 90%;
	margin: 0 auto;
}
#principle li {margin-bottom: 5%;}
#security h4 {
	text-align: left;
	margin-bottom: 5%;
}
	
/*recruit*/
#recruit_message {background: url(img/recruit/message_b.svg)no-repeat top right/80%;}
#recruit_message .wrap {
	text-align: left;
	font-size: 1em;
	line-height: 2em;
}

#recruit_company {background: url(img/recruit/company_b2_sp.jpg)no-repeat top right/cover;}
#recruit_company li {
	width: 80%;
	margin: 3% auto;
	padding: 2% 4%;
	float: none;
}
#recruit_company .click {
	width: 50%;
	margin: 7% auto 3%;
}
#recruit_works {background: url(img/recruit/job_b.svg)no-repeat top right/60%;}
#recruit_works li {margin-top: 10%;}
#recruit_works h5 {
	font-size: 1.5em;
	margin-bottom: 3%;
	padding-bottom: 3%;
}
#recruit_works .img {
	width: 70%;
	float: none;
	margin: 3% auto 5%;
}
#recruit_works li:nth-child(even) .img,
#recruit_works li:nth-child(even) .txt {float: none;}
#recruit_works .txt {
	width: 100%;
	float: none;
}
#recruit_works .click {
	width: 50%;
	max-width: 250px;
	margin: 5% auto 0;
}
#recruit_human {
	background: url(img/recruit/human_b_sp.jpg)no-repeat top left/cover;
	padding-left: 10%;
	text-align: center;
}
#recruit_human li {
	background: #FFF;
	border-radius: 30px;
	padding: 2%;
	font-size: 0.9em;
	margin-top: 3%;
}
#page_recruit #purpose {background: url(img/recruit/mokuteki_b.svg)no-repeat right 3% /100%;}

#recruit_tsuyomi li {
	max-width: 100%;
	margin: 5% auto 0;
	border-radius: 10px;
	padding: 4%;
}
#recruit_tsuyomi h4,
.recruit_kyuka h4 {
	font-size: 1.2em;
	margin-bottom: 2%;
	padding-bottom: 2%;
}
.recruit_kyuka h4 {font-size: 1.5em;}
#recruit_welfare {background: url(img/recruit/fukuri_b.svg)no-repeat left 5% /100%;}
#recruit_welfare li {
	max-width: 100%;
	margin: 5% auto 0;
}
#recruit_welfare li .left {
	width: 70%;
	margin: 3% auto;
	float: none;
}
#recruit_welfare li .right {
	width: 100%;
	margin: 3% auto;
	float: none;
}
#recruit_welfare h5 {
	font-size: 1.3em;
	background: url(img/recruit/fukuri_1.svg) no-repeat left top /1.6em;
	padding: 0 0 1em 2em;;
}
#recruit_welfare li:nth-child(2) h5 {background: url(img/recruit/fukuri_2.svg) no-repeat left top /1.6em;}
#recruit_welfare li:nth-child(3) h5 {background: url(img/recruit/fukuri_3.svg) no-repeat left top /1.6em;}

.recruit_kyuka li {
	width: 47%;
	margin: 3% 1.5% 0;
	padding: 5% 0;
}
.recruit_kyuka li img {
	width: 60%;
	margin: 0 auto 5%;
}
.recruit_kyuka h5 {font-size: 0.9em;}
.recruit_kyuka p {
	display: inline-block;
    text-align: left;
	margin-top: 2%;
}
#recruit_office {background: url(img/recruit/office_b.svg)no-repeat right 1.5% /100%;}
#recruit_office h4 {text-align: left;}

.contact_page_txt {text-align: left !important;}
	
/*リモートサポート*/
#remote_kaiketsu {
	background: url(img/remote/img1.jpg)no-repeat -5% top/ 23% ,url(img/remote/img2.jpg)no-repeat 105% top / 23%;
}
#remote_kaiketsu h2 {margin-bottom: 0;}

#remote_img h3 {
	margin-bottom: 3%;
	padding: 5% 0;
}
.rei {
	width: 100%;
	float: none;
	margin: 5% auto 0;
}
.rei h4 {
	padding: 0.5% 10%;
	margin: 0 auto 5%;
	font-size: 1.2em;
}
.chui {
	text-align: left;
	width: 100%;
	float: none;
	margin-top: 2%;
}
#remote_menu h4 {
	width: 100%;
	float: none;
}
.end_message {
	font-size: 1em;
	line-height: 1.5em;
	margin: 5% auto 7%;
}
.remote_btn {
	font-size: 1.1em;
	line-height: 1.5em;
	border-radius: 30px;
	max-width: 90%;
	margin: 7% auto 0;
	padding: 3% 0;
}
	
	
/*ビジネスプリンター・複合機*/
#page_product ul {
	max-width: 100%;
	margin: 0 auto 10%;
}
#page_product .left {
	width: 100%;
	float: none;
}
#page_product .right {width: 35%;}
	
	
/*オフィス提案*/
.wrap_inner,
#page_dx_support .wrap_inner {max-width: 100%;}
#dx_ai .wrap_inner {max-width: 90%;}
	
#yasashisa li{
	width: 80%;
	margin: 3% auto;
	padding: 2%;
	float: none;
}
.productivity li {
	width: 90%;
	margin: 3% auto;
	padding: 2%;
	float: none;
}
#yasashisa li img {
	max-width: 50%;
	margin: 0 auto 4%;
}
#design .wrap_inner .left {
	width: 100% !important;
	float: none;
	background: url(img/office/ya_sp.svg) no-repeat bottom center /6%;
	padding-bottom: 10%;
}

#design .wrap .wrap_inner .left img,
#design .wrap .wrap_inner .left p,
#design .wrap .wrap_inner .right {
	width: 80%;
	float: none;
	margin: 2% auto;
}
#design .wrap .wrap_inner .left img {margin-left: 10%;}
#design .wrap .wrap_inner .left img,
#design .wrap .wrap_inner .right img,
#risk li img {margin-bottom: 1%;}

#design .img,
#branding .img {
	width: 80%;
	float: none;
	margin: 0 auto 3%;
}
#design .txt,
#branding .txt {
	width: 100%;
	float: none;
}
#risk li {
	width: 100%;
	margin: 0 auto 2%;
	float: none;
}
#lineup li {
	width: 80%;
	margin: 2.5% auto;
	float: none;
}
#lineup li img {
	width: 45%;
	margin: 0 auto 2%;
}
#produce h4{
	margin-bottom: 10%;
	text-align: left !important;
}
#lineup h4 {font-size: 1.3em;}
#yasashisa h5,
#branding h5 {font-size: 1.2em;}

/*DXへの取り組みについて*/
#page_dx .wrap {max-width: 100%;}
#page_dx li {margin-bottom: 7%;}
#dx_message .name span {font-size: 1.3em;}
#page_dx img {
	max-width: 80%;
	margin: 0 auto 5%;
}
#dx_security .left {width: 100%;}
#dx_security .right {
	width: 40%;
	margin: 3% auto;
	float: none;
}
	
/*DX伴走支援*/
#hub li {
	width: 100%;
	float: none;
	margin: 0 auto 5%;
}
#hub h5,
#hub h6 {font-size: 1.1em;}
#hub img {margin: 5% auto;}
#essential h5 {font-size: 1.3em;}
.approach {
	max-width: 80%;
	margin: 3% auto;
}
#essential .left,
#essential .right {
	width: 100%;
	float: none;
	margin-bottom: 2%;
}
#essential .left p,
#essential .right p {
	margin-bottom: 1%;
	padding: 1% 2%;
}
.productivity {margin-top: 7%;}
.productivity img {
	max-width: 80%;
	margin: 3% auto;
}
.productivity li p {
	font-size: 1.1em;
}
#dx_ai .left {
	width: 35%;
	float: none;
	margin: 7% auto 3%;
}
#dx_ai .right {
	width: 100%;
	float: none;
	margin: 0 auto 3%;
}
#gui_list {
	background: url(img/dx_support/gai_b_sp.jpg) no-repeat center bottom/cover;
	padding: 5% 0;
}
#gui_list li {
	width: 90%;
	float: none;
	margin: 2% auto 5%;
	padding: 4%;
}
#gui_list h5 {font-size: 1.1em;}
#gui_list .left {
	width: 50%;
	margin: 0 auto 3%;
	float: none;
}
#gui_list .right {
	width: 100%;
	margin: 0 auto 3%;
	float: none;
}
#gui .wrap {padding: 1% 0 3%;}

#canva li {
	width: 45%;
	font-size: 0.9em;
	line-height: 1.6em;
}
#canva li img {
	width: 70%;
	margin: 0 auto 3%;
}
#canva h3 {
	font-size: 1.2em !important;
	line-height: 1.6em;
}
	
/*ドキュメント*/
#page_document h4 {text-align: left;}
#document_1stop li {margin-bottom: 5%;}
#document_1stop li img {
	width: 70%;
	margin: 0 auto 3%;
	float: none;
}
#document_1stop li .right {
	width: 100%;
	margin: 0;
	float: none;
}
#document_sodan li {
	width: 90%;
	float: none;
	margin: 0 auto 5%;
	padding: 3% 0;
	font-size: 1.1em;
}
#document_sodan h4 {
	text-align: center;
	margin-bottom: 7%;
}	
#maintenance li {
	width: 80%;
	float: none;
	margin: 3% auto;
}
	
	
	
}

/*===============================================
画面の横幅が641px以上769px以下　タブレット
===============================================*/
@media only screen and (min-width:641px) and (max-width:810px){
	
h2.page_t {font-size: 1.9rem;}
#page_dx h2.page_t {font-size: 1.5rem;}
#info_page_t h2 {margin-top: 15%;}
	
#page_company h3 {
	font-size: 1.7rem;
	line-height: 1.4em;
}
#page_company h3 span {
	font-size: 0.7em;
	line-height: 0.5em;
}
	
#footer_wrap .left {width: 30%;}
#footer_wrap .left img {margin: 10% auto 0;}
.fot_menu  {width: 65%;}
.fot_menu li {font-size: 0.8em;}
	
/*TOP*/
#top_hero .left h2 {
	font-size: 1.5em;
	margin: -65% 0 5% 10%;
}
.service_banner {font-size: 1.2em;}
#top_office h3 {
	font-size: 2.3em;
	margin-left:5%;
}
.impact_img1 {
	margin: -10% 0 0 -3%;
	width:25%;
}
#impact_wrap {font-size:1em;}
#impact_wrap2 li {
	width: 100%;
	float: none;
}
#impact_wrap2 p {font-size: 1.1em;}

#top_info .left a {
	padding: 2% 1%;
	width: 100%;
	background: url(img/i_right.svg) no-repeat 95% center /6%;
}
.info_day {width: 20%;}
.info_txt {width: 70%;}
	

/*会社概要*/
#page_menu {
	width: 100%;
  gap: 3%; /* li 要素同士の間隔 */
}
#page_dx #page_menu {gap: 2%;}
	
/*table*/
table.kougo tr th {min-width: 100px;}
.table_scroll_txt {display: none;}
	
/*リモートサポート*/
#remote_kaiketsu {
	background: url(img/remote/img1.jpg)no-repeat left center / 13% ,url(img/remote/img2.jpg)no-repeat right center / 13%;
}
.rei {
	width: 47%;
	margin: 3% 1.5%;
}	
.yellow {width: 40%;}
.green {width: 15%;}
	
/*ビジネスプリンター・複合機*/
#page_product li {
	display: flex;/*下揃え*/
    align-items: flex-end;/*下揃え*/
}
	
/*オフィスサポート*/
#lineup li {
	font-size: 0.9em;
	line-height: 1.6em;
	padding: 1%;
}
	
/*DXへの取り組みについて*/
#page_dx h3 {font-size: 1.4rem;}
	
/*DX伴走支援*/
#dx_ai .wrap_inner {max-width: 90%;}
#hub ul,
.productivity ul,
#gui_list ul {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-content: flex-start;
	align-content: flex-start;
}
#gui_list ul {margin-top: 5%;}
#hub li,
.productivity li,
#gui_list li {
	display: block;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
#gui_list li .left {
	width: 50%;
	float: none;
	margin: 1% auto 3%;
}
#gui_list li .right {
	width: 100%;
	float: none;
	margin: 0 auto;
}
#canva li {
	font-size: 0.8em;
	line-height: 1.6em;
}
	
/*recruit*/
#recruit_human {padding-left: 25%;}
	
	
    
}

/*===============================================
PC
===============================================*/
@media screen and (min-width: 811px){
	

#page_dx #page_menu {margin: -1% auto -3%;}
	
table.kougo,
table.yoko {
	max-width: 800px;
	margin: 0 auto;
}
table.kougo th,
table.yoko th {width: 15%;}	
	
/*リモートサポート*/
.table_scroll_txt {display: none;}	
.yellow {width: 30%;}
.green {width: 13%;}
	
/*ビジネスプリンター・複合機*/
#page_product li {
	display: flex;/*下揃え*/
    align-items: flex-end;/*下揃え*/
}
	
/*DX伴走支援*/
#hub ul,
.productivity ul,
#gui_list ul {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-content: flex-start;
	align-content: flex-start;
}
#hub li,
.productivity li,
#gui_list li {
	display: block;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
	


}