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

/*ページ上部のメニュー部分（現在のページを濃く変更）*/
.company-page-nav li:nth-child(1) {background: #120e6a;}
.company-page-nav li:nth-child(1) p {color: #fff;}
.company_main {
  max-width: 990px;
  width: 100%;
}
.subpage_title {
  max-width: 990px;
  height: 115px;
  display: flex;
  align-items: center;
  padding-left: 5%;
  font-size: 30px;
  color: #fff;
  border: 10px solid #fff;
  background: url("../../common/img/h2_bg_img.png")no-repeat;
  background-size: cover;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.company_contents {
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}
.pankuzu {
  height: 18px;
}

/* 共通 */
.sec_title {
    font-size: 24px;
    font-weight: bold;
    color: #6384c0;
    position: relative;
}
.sec_title::after{
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #5d84c0 0%,#5d84c0 20%, #e1e8f3 20%, #e1e8f3 100%);
}
.mt_40 {
  margin-top: 40px;
}
figure {
  margin: 0;
  text-align: center;
}

/* 事業内容 */
.con_outer {
  background: #FFF;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.content {
  max-width: 1024px;
  width: 90%;
  margin: 0 auto;
}
.center {text-align: center;}
.center.dtp {line-height: 3;}
.cont_text {
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	line-height: 1.8;
}
.service_box {
	max-width: 854px;
	width: 100%;
	margin: 0 auto;
	padding: 60px 0 0;
	box-sizing: border-box;
	line-height: 1.8;
}
.service_box p {
	font-size: 14px;
}
.service_box--title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 15px;
	border-bottom: 1px solid #000;
	width: 100%;
	&.hp {color: #D63A38;border-bottom: 1px solid #D63A38;}
	&.digi {color: #6787C1;border-bottom: 1px solid #6787C1;}
	&.dtp {color: #00A1A4;margin-bottom: 0;border-bottom: 1px solid #00A1A4;}
}
.service_seizogyo--left:has(.service_box--title.dtp) {
	align-items: flex-start;
	gap: 10px;
}
/* .expo {
	margin: 60px 0;
}
.img_flex {
	margin-top: 20px;
	display: flex;
	justify-content: center;
}
.nikkan_btn {
	display: flex;
	justify-content: center;
	font-size: 20px;
	font-weight: bold;
	margin: 20px auto 0;
} */
/* EXPO */
.top_pu--item {
  max-width: calc(50% - 10px);
  width: 100%;
  padding: 30px;
	box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  background: #fff;
  position: relative;
  figure {
    text-align: center;
    margin-bottom: 15px;
  }
  @media screen and (max-width: 767px){
    max-width: 100%;
    padding: 20px;
  }
}
.top_pu--item.expo {
  max-width: 100%;
  flex-direction: row;
  @media print, screen and (min-width: 768px){
    background: url(../img/expo_bg.webp) no-repeat center center;
    background-size: cover;
  }
  @media screen and (max-width: 767px){
    background: url(../img/expo_bg_sp.webp) no-repeat center center;
    background-size: cover;
    justify-content: center;
		flex-wrap: wrap;
  }
}
.top_expo--title {
  width: 200px;
  height: 200px;
	padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #0d2453;
  color: #fff;
  font-weight: bold;
  font-size: 30px;
  line-height: 1.2;
	position: relative;
	left: 25px;
	z-index: 1;
  span {
    font-size: 58px;
  }
  mark {
    width: 148px;
    padding: 0.35em 0.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0d2453;
    background: #D4C68C;
    font-size: 16px;
    margin-top: 10px;
  }
  @media screen and (max-width: 767px){
    width: 250px;
    height: auto;
    padding: 5px 0 10px;
    font-size: 16px;
    display: block;
    text-align: center;
		left: auto;
    span {
      font-size: 24px;
    }
    mark {
      font-size: 14px;
    }
  }
}
.top_expo--figure {
  width: auto;
  position: relative;
	right: 25px;
	@media screen and (max-width: 767px){
    right: auto;
  }
}
.top_expo--icon {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d60b0a;
  font-size: 14px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  position: absolute;
  right: -40px;
  bottom: 20px;
  transform: translateY(25%);
	&:link {
		color: #FFF;
		text-decoration: none;
	}
	&:visited {
		color: #FFF;
	}
	&:hover {
		text-decoration: underline;
		text-underline-offset: 4px;
	}
  @media screen and (max-width: 767px){
    width: 100px;
    height: 100px;
    font-size: 11px;
		right: -15px;
  }
}
.expo_more_btn {
	background: #0d2453;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 5%;
	box-sizing: border-box;
	font-size: 20px;
	margin-bottom: 50px;
	&::after {
		content: "";
		width: 8px;
		height: 8px;
		display: inline-block;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		transform: rotate(45deg);
	}
	&:link {
		color: #FFF;
		text-decoration: none;
	}
	&:visited {
		color: #FFF;
	}
	&:hover {
		text-decoration: underline;
		text-underline-offset: 4px;
	}
	@media screen and (max-width: 767px){
    font-size: 16px;
  }
}

.service_seizogyo--left:has(.service_box--title.normal) {
	align-items: flex-start;
	gap: 10px;
}
.service_seizogyo--flex:has(.service_box--title.normal) {
	align-items: flex-start;
	@media screen and (max-width: 767px){
    justify-content: center;
  }
}
.website_list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px;
	margin: 35px auto 60px;
	& a {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 15px;
		& span {
			font-size: 14px;
		}
	}
}
.center_flex {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 15px;
	& span {
		font-size: 14px;
	}
}
.service_works {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 4px;
	&::before {
		content: "";
		display: inline-block;
		width: 65px;
		height: 1px;
	}
	&::after {
		content: "";
		display: inline-block;
		width: 65px;
		height: 1px;
	}
}
.service_works.hp::before, .service_works.hp::after {background: #D63A38;}
.service_works.digi::before, .service_works.digi::after {background: #6787C1;}
.service_works.dtp::before, .service_works.dtp::after {background: #00A1A4;}
.service_works--list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	margin: 20px auto;
}
.service_seizogyo {
	padding: 30px 5%;
	background: #F6EBEB;
	margin: 50px auto 0;
}
.service_seizogyo--flex {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 auto 20px;
	& div {
		flex: 1;
	}
	a span {
		font-size: 14px;
	}
}
.service_seizogyo--left {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px;
}
.service_seizogyo--title {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
.bkfff {
	background: #fff;
	padding: 25px 5%;
}
.service_seizogyo--flex.bkfff {margin: 0 auto;}

@media screen and (max-width: 767px) { 
   .service_works--list {gap: 15px;}
	.website_list li, .service_works--list li {width: calc(50% - 7.5px);gap: 10px;font-size: 14px;}
	.service_seizogyo--flex {
		flex-wrap: wrap;
		justify-content: center;
		& div {flex: none;width: 100%;}
	}
	figure.dtp {width: 50%;}
}

@media print{
  body {
    width: 1280px;
    zoom:68%;
    position: relative;
    size: A4 portrait;
  }
}