/* CSS Document */

@charset "UTF-8";

/*==========================================================================
　共通CSS
============================================================================*/

html {

}

body {
  font-family: "Noto Sans JP", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", Verdana, Arial, sans-serif;
  margin: 0;
  padding: 0;
	line-height: 1.8rem;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.1rem;
}

@media (max-width: 1000px) {
body.active  #mainimg,
body.active  #inner,
body.active  #common_contact_area,
body.active  #footer_bannerlink,
body.active  #footer,
body.active  #top_works {
	display: none;
}
}

h4 {
	margin-bottom: 1rem;
}

@media (max-width: 700px) {
	h2 {
		font-size: 1.4rem !important;
	}
	h3 {
		font-size: 1.2rem;
	}
}

#outer {
  width: 100%;
  margin: 0 auto 0;
}

@media (max-width: 1600px) {
	#outer {
		padding: 0 1rem
	}
}


#inner {
  max-width: 1600px;
  margin: 0 auto 5rem;
  /* display: flex; */
  flex-direction: column;
}

article {
	margin-bottom: 0rem;
}

ul,
ol,
dl,
dt,
dd,
div,
ol,
ul,
li {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

a:link {
  text-decoration: none;
	color:#333;
}

a:hover {
  text-decoration: underline;
	opacity: 0.8;
}

a:visited {
  text-decoration: none;
  color: #333;
}


.marker_lime {
background: linear-gradient(transparent 80%, #c4de8a 0%);
}
.marker_lime2 {
background: linear-gradient(transparent 0%, #e2f1c0 0%);
}

img {
	image-rendering: -webkit-optimize-contrast;
}

/*==========================================================================
　共通部分
============================================================================*/

/* ���鴻���潟�激��茵�ず */
@media (min-width: 1000px) {
.pc-header-none { display: none !important; }
}
@media (max-width: 1000px) {
.sp-header-none { display: none !important; }
}

.news_text {
	width: 100%;
	text-align: center;
	margin-top: 2rem;
}
.news_text ul {
	display: inline-block;
	font-weight: bold;
	background-color: #90c31f;
	padding: 1rem 2rem;
}
.news_text ul a {
	color: #fff;
}

.news_bn {
	max-width:720px ;
	margin: 4rem auto 0;
}
.news_bn img {
	width: 100%;
}

/*--------header-----------*/

/* =================================
 ��������
================================= */
header {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 100;
    transform: translateY(0px);
    transition: all 600ms 0s ease;
}

header.smaller {
    transform: translateY(-39px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

@media (max-width: 1000px) {
header.smaller {
    transform: translateY(0px);
}
}

header .header-subnav {
    opacity: 1;
    transition: opacity 600ms 0s ease;
}

header.smaller .header-subnav {
    opacity: 0;
}

header .wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0 0;
		border-top: #90c31f 8px solid;
}


header .wrapper .header-subnav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

header .wrapper .header-subnav .head-ttl-text {
    margin: 0 auto 0 0;
    font-size: 1.0rem;
    font-weight: normal;
}

header .wrapper .header-cv-btn {
		width: 11rem;
		text-align: right;
}

header .wrapper .header-cv-btn2 {
	width: 8rem;
	text-align: right;
}

@media (max-width: 1000px) {
	header .wrapper .header-cv-btn {
			flex-grow: 2;
			margin-right: 1rem;
	}
}

@media (max-width: 600px) {
	header .wrapper .header-cv-btn {
			width: 15rem;
	}
}

header .wrapper .header-cv-btn a {
    display: inline-block;
    margin: 0 0 0 0;
    padding: 0.5rem 2rem;
    font-size: 1rem;
    font-weight: bold;
    color: #fff !important;
    text-decoration: none;
    background: #333;
}

header .wrapper .header-cv-btn2 a {
    display: inline-block;
    margin: 0 0 0 0;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff !important;
    text-decoration: none;
    background: #333;
}

@media (max-width: 1000px) {
	header .wrapper .header-cv-btn a {
	    padding: 0.3rem 1rem;
	    font-size: 0.9rem;
	}
}

@media (max-width: 600px) {
	header .wrapper .header-cv-btn a {
	    padding: 0.3rem 1rem;
	    font-size: 0.8rem;
	}
}

@media (max-width: 1000px) {
	header .wrapper .header-cv-btn2 a {
	    padding: 0.3rem 0.6rem;
	    font-size: 0.7rem;
	}
}

@media (max-width: 600px) {
	header .wrapper .header-cv-btn2 a {
	    padding: 0.3rem 0.61rem;
	    font-size: 0.6rem;
	}
}

header .wrapper .header-cv-btn a:hover {
	opacity: 0.8;
	text-decoration: underline;
}

header .wrapper .header-cv-btn2 a:hover {
	opacity: 0.8;
	text-decoration: underline;
}

header .wrapper .area-nav {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    transition: padding 300ms 0s ease;
		max-width:1600px;
		margin: 0 auto;
}

@media (max-width: 1600px) {
	header .wrapper .area-nav {
	    padding: 0.3rem 0;
	}
}

header.smaller .wrapper .area-nav {
    padding: 0 0;
}

header .wrapper .area-nav .header-logo {
	display: flex;
	justify-content: space-between;
	align-items:center;
  width: 22rem;
}
header .wrapper .area-nav .header-logo img {
  width:10rem;
}

header .wrapper .area-nav .header-logo .tagline {
	font-size: 0.8rem;
}

@media (max-width: 1600px) {
	header .wrapper .area-nav .header-logo {
	  width: 18rem;
	}
	header .wrapper .area-nav .header-logo img {
	  width: 8rem;
	}

	header .wrapper .area-nav .header-logo .tagline {
		font-size: 0.7rem;
	}
}

@media (max-width: 600px) {
	header .wrapper .area-nav .header-logo {
	  width: 15rem;
	}
	header .wrapper .area-nav .header-logo img {
	  width: 6rem;
	}

	header .wrapper .area-nav .header-logo .tagline {
		font-size: 0.7rem;
	}
	header .wrapper .area-nav .header-logo .tagline {
		display: none;
	}
}


header .wrapper .area-nav .header-nav  {
    display: flex;
		align-items:center;
		justify-content: flex-end;
		flex-grow: 2;
		padding-right: 1rem;
}

@media (max-width: 1000px) {
	header .wrapper .area-nav .header-nav {
	    display: none;
	    opacity: 0;
	    position: absolute;
	    top: 3rem;
	    width: 100vw;
	    height: auto;
	    text-align: left;
			background-color: #fff;
			padding-bottom: 100px!important;

	}
	header .wrapper .area-nav .header-nav.active {
	    display: block;
	    opacity: 1;
	    transition: all 300ms 0s ease;
	}

}

header .wrapper .area-nav .header-nav li {
	padding: 0 1rem 0;
    list-style: none;
}

@media (max-width: 1600px) {
header .wrapper .area-nav .header-nav li {
	padding: 0 0.5rem 0;
}
}

@media (max-width: 1000px) {
header .wrapper .area-nav .header-nav li {
	padding: 0;
  border-top: 1px solid #dedede;
}
header .wrapper .area-nav .header-nav li:last-child {
  padding: 0;
}
}

header .wrapper .area-nav .header-nav li a {
    font-size: 1.0rem;
    font-weight: bold;
    color: #333;
    text-decoration: none;
		padding: 0.5rem 0 !important;
}

header .wrapper .area-nav .header-nav li.detail_page a {
    font-weight: normal;
		padding: 0.5rem 0.5rem !important;
}
header .wrapper .area-nav .header-nav li.detail_page a::before {
    content: "- ";
}

@media (max-width: 1600px) {
header .wrapper .area-nav .header-nav li a {
    font-size: 0.9rem;
}
}

@media (max-width: 1000px) {
header .wrapper .area-nav .header-nav li a {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 1.0rem;
}

header .wrapper .area-nav .header-nav li a.on {
    color: #fff;
    background: #333;
}
}

header .wrapper .area-nav .header-nav li a:after {
    content: '';
    display: block;
    margin: 2px 0 0;
    height: 1px;
    background: #333;
    opacity: 0;
    transition: all 300ms 0s ease;
}

@media (max-width: 1000px) {
header .wrapper .area-nav .header-nav li a:after {
    content: none;
}
}

header .wrapper .area-nav .header-nav li a.on:after,
header .wrapper .area-nav .header-nav li a:hover:after {
    opacity: 1;
}

/* �鴻�≪�若��������������菴遵�� */
header .smaller-gnav {
    display: none;
}

header.smaller .smaller-gnav {
    display: block;
}


header.smaller .wrapper .area-nav .header-nav li {
    margin: 0 0 0 23px;
}

header.smaller .wrapper .area-nav .header-nav li a {
    font-size: 1.3rem;
}

@media (max-width: 1000px) {
header.smaller .smaller-gnav {
    display: none;
}


header.smaller .wrapper .area-nav .header-nav li {
    margin: 0;
}

header.smaller .wrapper .area-nav .header-nav li a {
    font-size: 1.6rem;
}
}


/* SP�＜���ャ��
---------------------------------------------------------- */
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
	cursor: pointer;
}
.menu-trigger {
  position: relative;
  margin: 0 0 0 0;
  min-width: 34px;
  height: 24px;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 11px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(11px) rotate(-45deg);
  transform: translateY(11px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-11px) rotate(45deg);
  transform: translateY(-11px) rotate(45deg);
}

.menu-tel {
  margin: 0 24px 0 auto;
  width: 40px;
}

.menu-tel-box {
    display: none;
}

.menu-tel-box.active {
    display: block;
    position: absolute;
    top: 58px;
    width: 100%;
    height: 100vh;
    padding: 4% 40px;
    background: #fff;
    overflow: scroll;
}

.menu-tel-box .box-tel {
    text-align: center;
}

.menu-tel-box .box-tel .tel-number {
    font-size: 3.2rem;
    font-weight: bold;
}

.menu-tel-box .btn-standard {
    margin: 20px 0 0;
}

/*メインイメージ*/

#mainimg {
  max-width: 1920px;
  margin: 0 auto 0;
	background:center center no-repeat url("/img/top_main_image.jpg");
	background-size:cover;
	background-attachment: fixed;
	background-color: #fff;
	padding: 8rem 1rem;
}

#mainimg .inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 1rem 0;
}

#mainimg h1 {
	font-size: 1.8rem;
	line-height: 3.0rem;
}

@media (max-width: 700px) {
	#mainimg {
		background:top center no-repeat url("/img/top_main_image.jpg");
		background-size: auto;
		background-attachment: local;
	}

	#mainimg h1 {
		font-size: 1rem;
		line-height: 2rem;
	}
}



#mainimg .mainimg_linkbtn a {
	display: inline-block;
	padding: 1rem 1.5rem;
	background-color: #333;
	color: #fff;
	text-decoration: none;
	font-size: 0.9rem;
}

#mainimg .mainimg_linkbtn a:hover {
	text-decoration: underline;
	opacity: 0.8;
}


/*==========================================================================
　footer お問い合わせ
============================================================================*/

#common_contact_area {
	max-width: 1000px;
  background-color: #eee;
  margin: 0 auto 5rem;
  padding: 2rem 1rem;
}

#common_contact_area h2 {
  text-align: center;
  margin: 0 auto 1rem;
  font-size: 1.6rem;
  font-weight: bold;
}

#common_contact_area ul.inner{
  width: 100%;
  margin: 0 auto 0;
  padding: 0px;
  display: flex;
	justify-content: space-between;
  border-top: 1px solid #999;
  padding: 2rem 0 0 0;
}

@media (max-width: 1000px) {
	#common_contact_area ul.inner{
		flex-direction: column;
	}
}

#common_contact_area li.list01 {
	margin: 0 auto;
	padding: 0 1rem;
	width: 50%;
	text-align: center;
}

@media (max-width: 1000px) {
	#common_contact_area li.list01 {
		width: 100%;
		margin-bottom: 3rem;
		padding: 0 0;
	}
}

#common_contact_area li.list01 p {
	font-size: 1rem;
}


#common_contact_area li.list01 .security_action {
  width: 100%;
}

#common_contact_area li.list01 .security_action img {
  width: 70%;
}

@media (max-width: 1000px) {
	#common_contact_area li.list01 .security_action img {
	  width: 80%;
	}
}

#common_contact_area h3 {
  font-weight: bold;
  font-size: 1.2rem;
  margin: 0 0 1rem 0;
}

@media (max-width: 1000px) {
	#common_contact_area h3 {
	  font-size: 1.4rem;
	}
}

#common_contact_area li.list02 {
  margin: 0 auto;
	padding: 0 1rem;
	text-align: center;
}

@media (max-width: 1000px) {
	#common_contact_area li.list02 {
		padding: 0 0rem;
	}
}

#common_contact_area li.list02 ul {
  display: flex;
  flex-direction: column;
	padding: 0 1rem;
}

@media (max-width: 1000px) {
	#common_contact_area li.list02 ul {
		padding: 0 0;
	}
}

#common_contact_area li.list02 ul li {
	width: 100%;
	margin: 0 auto;
}

#common_contact_area li.list02 a {
	display: block;
	padding: 1rem 0 1rem 0.5rem;
	background-color: #333;
	font-weight: bold;
	margin: 0 0 0.5rem 0;
	color: #fff;
	outline: none;
	position: relative;
  z-index: 2;
  overflow: hidden;
}

#common_contact_area li.list02 a::before,
#common_contact_area li.list02 a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '›';
	left: 0.5rem;
}

#common_contact_area li.list02 a,
#common_contact_area li.list02 a::before,
#common_contact_area li.list02 a::after {
  -webkit-transition: all .3s;
  transition: all .3s;
}

#common_contact_area li.list02 a:hover {
  color: #333;
	opacity: 1.0;
	background-color: #fff;
	text-decoration: none;
}

#common_contact_area li.list02 a::after {
  left: -100%;
	top: 0;
  width: 100%;
  height: 100%;
	padding: 1rem 0 1rem 0rem;
}

#common_contact_area li.list02 a:hover::after {
  left: 0;
	top:0;
  background-color: #fff;
	padding: 1rem 100% 1rem 0.8rem;
}





#common_contact_area .tel_num a {
	display: block;
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 2rem;
	margin-bottom: 0.5rem;
}

@media (max-width: 1000px) {
	#common_contact_area .tel_num a {
	  font-size: 2.6rem;
	}
}

@media (max-width: 700px) {
	#common_contact_area .list01 .tel_num a {
	  font-size: 2.0rem;
	}
	#common_contact_area h2 {
	  font-size: 1.2rem!important;
	}

	#common_contact_area h3 {
	  font-size: 1.2rem;
	}
}

#footer_bannerlink {
	width: 100%;
	margin: 5rem auto 0;
	background-color: #eee;
	padding: 3rem 1rem;
}

#footer_bannerlink ul {
	max-width: 1600px;
	margin: 0 auto 0;
  display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 2rem;
}

#footer_bannerlink ul ul {
  display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
}

@media (max-width: 700px) {
	#footer_bannerlink ul {
		flex-direction: column;
	}
}

#footer_bannerlink li {
	width: calc( 100% / 3);
}

@media (max-width: 700px) {
	#footer_bannerlink li {
		width: 100%;
	}
}


#footer_bannerlink img {
	width: 100%;
}

#footer_bannerlink li {
	width: 100%;
}



#footer {
	max-width: 1600px;
	margin: 1rem auto 0;
  padding: 1rem 0 3rem;
}
#footer ul.block01 {
	width: 100%;
  display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
#footer ul.block01 li {
	font-size: 0.8rem;
	font-weight: bold;

}

#footer .entry01 {
	width: 100%;
  display: flex;
	flex-wrap: wrap;
	border-top: #CCC 1px solid;
	margin: 1rem auto;
	padding-top: 1rem;
}

#footer ul.block02 {
	width: 70%;
  display: flex;
	flex-direction: row;
}

#footer ul.block02 li {
	font-size: 0.7rem;
	text-align: left;
	display:inline-block;
	padding-right: 2rem;
}
#footer ul.block02 li a {
	text-decoration: none !important;
}

#footer ul.block01 li a::before {
	content: "›";
	padding:0 0.3rem 0.1rem 0;
}

#footer ul.block01 li a:hover {
	text-decoration: none!important;
}

#footer #copyright {
	font-size: 0.6rem;
	width: 30%;
	text-align: right;
	line-height: 0;
}

@media (max-width: 700px) {

	#footer ul.block01 {
		width: 100%;
	  display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		flex-direction: column;
	}
	#footer ul.block01 li {
		font-size: 0.8rem;
		font-weight: bold;
		text-align: center;
		width: 100%;
		padding-top: 1rem;
	}

	#footer .entry01 {
		width: 100%;
	  display: flex;
		flex-wrap: wrap;
		border-top: #CCC 1px solid;
		margin: 2rem auto;
		padding-top: 1rem;
	}


	#footer ul.block02 {
		width: 100%;
	  display: flex;
		flex-direction: column;
	}

	#footer ul.block02 li {
		font-size: 0.7rem;
		text-align: center;
		display:inline-block;
		padding-right: 0rem;
		width: 100%;
	}
	#footer #copyright {
		font-size: 0.6rem;
		width: 100%;
		text-align: center;
	}
}


/*以下、個別CSS*/


/*==========================================================================
　トップページ
============================================================================*/

#toppage .top_block  {
	margin-bottom: 0 0 10rem 0;
	padding: 3rem 0 ;
}

#toppage .top_block h2 {
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
}

#toppage .top_block h2 span {
	display: block;
	font-size: 1rem;
}

#toppage .top_block p.top_read {
	text-align: center;
	margin-bottom: 3rem;
}

@media (max-width: 700px) {
	#toppage .top_block p.top_read {
		text-align:justify;
		text-justify: inter-ideograph;
		margin-bottom: 2rem;
	}
}



/*サービス*/

#top_service {
	max-width: 1600px;
	margin: 0 auto;
}

#top_service ul {
	display: flex;
	flex-wrap: wrap;
  flex-direction: row;
	justify-content: space-between;
}

#top_service ul li {
	width: 30%;
	padding-bottom: 2rem;
}

@media (max-width: 1000px) {
	#top_service ul li {
		width: 48%;
	}
}

	@media (max-width: 700px) {
		#top_service ul li {
			width: 100%;
		}
	}

#top_service ul li img {
	width: 100%;
}

#top_service dl dt {
	font-size: 0.8rem;
	font-weight: bold;
	line-height: 0;
	padding-top: 1rem;
}

#top_service  dl p {
	font-size: 0.9rem;
	font-weight: bold;
}

/*制作の流れ*/

#top_flow {
	width: 100%;
	background-color: #eee;
}

#top_flow .inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 1rem;
}

#top_flow .flow_chart {
	display: flex;
	justify-content: space-between;
}

	@media (max-width: 1000px) {
		#top_flow .flow_chart {
			flex-direction: row;
			flex-wrap: wrap;
		}
	}

#top_flow .flow_chart .flow_img {
	max-width: 30%;
}

	@media (max-width: 1000px) {
		#top_flow .flow_chart .flow_img {
			max-width: 60%;
			margin: 0 auto;
		}
	}

#top_flow .flow_chart .flow_img img {
	width: 100%;
}

#top_flow .flow_chart ul {
	max-width: 65%;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
}

	@media (max-width: 1000px) {
		#top_flow .flow_chart ul {
			max-width: 100%;
		}
	}

#top_flow .flow_chart ul li {
	max-width: 45%;
}

	@media (max-width: 700px) {
		#top_flow .flow_chart ul li {
			max-width: 100%;
		}
	}

#top_flow .flow_chart dl {
	margin-bottom: 3rem;
}

#top_flow .flow_chart dl dt {
	font-size: 0.8rem;
	font-weight: bold;
	line-height: 0;
	padding-top: 1rem;
}

#top_flow .flow_chart  dl p {
	font-size: 0.9rem;
	font-weight: bold;
	line-height: 1.3rem;
}


/*制作実績*/
#top_works {
	max-width: 1600px;
	margin: 0 auto;
	margin-bottom: 0 0 10rem 0;
	padding: 3rem 0 ;
}

#top_works h2 {
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
}

#top_works h2 span {
	display: block;
	font-size: 1rem;
}

#top_works p.top_read {
	text-align: center;
	margin-bottom: 3rem;
}

@media (max-width: 700px) {
	#top_works p.top_read {
		text-align:justify;
		text-justify: inter-ideograph;
		margin-bottom: 2rem;
	}
}



#top_works ul {
	display: flex;
	flex-wrap: wrap;
  flex-direction: row;
	justify-content: space-between;
}

#top_works ul li {
	max-width: 30%;
	padding-bottom: 2rem;
}

@media (max-width: 1000px) {
 #top_works ul li {
 	max-width: 48%;
 }
}

@media (max-width: 700px) {
 #top_works ul li {
 	max-width: 100%;
 }
}

#top_works ul li a {
	text-decoration: none;
}

#top_works ul li a:hover {
	opacity: 0.8;
	text-decoration: underline;
}

#top_works a.top_works_workslink {
	display: block;
	text-align: center;
	border: 2px solid #000;
	padding: 1rem;
	text-decoration: none;
	font-weight: bold;
	margin: 3rem auto;
	max-width: 24em;
}

#top_works a.top_works_workslink:hover {
	opacity: 0.8;
	text-decoration: underline;
}

#top_works ul li h3 {
	font-size: 0.9rem;
}

#top_works ul li h3 span {
	display: inline-block;
	padding: 0 0.5rem;
	background-color: #000;
	color: #fff;
	font-weight: bold;
	font-size: 0.7rem;
	line-height: 1.4rem;
}

#top_works ul li img {
	width: 100%;
}


/*主な取引先*/

#top_client {
	width: 100%;
	background-color: #fff;
	margin-bottom: 5rem;
}

#top_client .inner {
	max-width: 1600px;
	margin: 0 auto;
}

#top_client .client ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap:3rem;
}

#top_client .client ul h3 {
	text-align: center;
	font-size: 0.8rem;
}

#top_client .client li {
	max-width: 20%;
	min-width: 20%;
	padding: 0 2rem 0;
	display: flex;
	align-items: center;
}

#top_client .client .caption {
	text-align: right;
	font-size: 0.8rem;
}

@media (max-width: 1000px) {
	#top_client .client li {
		max-width: 30%;
		min-width: 30%;
	}
}

@media (max-width: 700px) {
	#top_client .client li {
		max-width: 50%;
		min-width: 50%;
	}
}

#top_client .client li img {
	width: 100%;
}

/*==========================================================================
　サービス
============================================================================*/

#service.top .top_block h2 {
	font-size: 1.3rem!important;
	font-weight: bold;
	text-align: left;
}

#about.top .top_block h2 {
	font-size: 1.3rem!important;
	font-weight: bold;
	text-align: left;
}


#page_title {
	background-color: #eee;
	padding: 2rem 0;
}

#page_title .inner {
	margin: 0 auto;
	max-width: 1600px;
}

@media (max-width: 1600px) {
	#page_title .inner {
		padding: 0 0 0 1rem;
	}
}

#page_title .inner h1 {
	font-size: 1.4rem;
}

#page_title .inner h1 span {
	display: inline-block;
	font-size: 0.9rem;
	padding-left: 1rem;
	vertical-align: middle;
	color: #777;
}

#topicPath {
	padding: 1rem 0;
	min-width: 1600px;
	margin: 0 auto;
}

#topicPath li {
	display: inline-block;
}

@media (max-width: 1600px) {
	#topicPath {
		min-width: 100%;
	}
}

@media (max-width: 700px) {
	#topicPath {
		display: none;
	}
}


#content {
	display: flex;
	flex-wrap: nowrap; /* ← 改行させない（2カラム固定） */
	justify-content: space-between;
	padding: 0 0 3rem;
	max-width: 1600px;
	margin: 0 auto;
	gap: 2rem; /* カラム間の余白を追加 */
}

@media (max-width: 1000px) {
	#content {
	min-width: 100%;
}
}

#service #product_menu {
	margin: 3rem 0 0;
}

#service #product_menu h3 {
	font-size: 1.2rem!important;
	border-bottom: 1px solid #999;
	padding: 0 0 0.3rem;
	margin: 0 0 2rem;
}

#service #product_menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#service #product_menu li {
	width: 29%;
}

#service #product_menu li img {
	width: 100%
}

#service #product_menu li h4 {
	margin: 0.3rem 0 1.5rem;
}

#service #strength {
	margin: 3rem 0 1rem;
	padding: 1rem 2rem;
	background-color: #eaf2d9;
}
#service #strength h3 {
	color: #90c31f;
	border-bottom: #90c31f 1px solid;
	padding: 0 0 1rem 0;
}
#service #strength h4 {
	font-size: 1.2rem;

}

#service #faq_menu {
	margin: 3rem 0 1rem;
}

#service #faq_menu h3 {
  font-size: 1.2rem!important;
  background-color: #eee;
	padding: 0.5rem 0 0.5rem 1rem;
	margin: 0 0 1rem;
}
#service #faq_menu ul {
	margin: 2rem 0 0;
}
#service #faq_menu ul li{
	margin: 0 0 3rem;
}

#service #faq_menu ul li .fontB {
  font-weight: bold;
}

#service #faq_menu li h4 {
  margin: 0;
  padding: 0 0 1rem 1.7rem;
  line-height: 1.4;
  border-bottom: 1px solid #eee;
  text-indent: -1.7rem;
}
#service #faq_menu li h4::before {
  font-family: "Font Awesome 5 Free";
  content: '\f059';
  font-weight: 900;
  padding-right: 0.5rem;
  color: #90c31f;
  font-size: 1.2rem;
}

#service #faq_menu li p {
  /* display: block;
  height: 0;
  opacity: 0;
  visibility: hidden; */
}

#service.top #content .column01 {
	width: 100%;
}


#service.event_display #content {
	width: 100%;

}



#content .column01 {
	width: 100%;
}

@media (max-width: 1000px) {
	#content .column01 {
		width: 100%;
	}
}

#service #content .column01 h2 {
	font-size: 1.8rem;
	font-weight: bold;
  margin-bottom: 3rem;
}

#service #content .column01 .top_read {
	font-size: 1.6rem;
	line-height: 2.4rem;
}

#service #content .column01 .main_img img {
	width: 100%;
	margin-bottom: 1rem;
}

#service #content .column01 h3 {
	font-size: 1.4rem;
}

#content .column02 {
	width: 30%;
}

@media (max-width: 1000px) {
	#content .column02 {
		display: none;
	}
}

#content .column02 #contents_link li  {
	margin: 0 0 0.5rem 0;
}

#content .column02 #contents_link a  {
	display: block;
	padding: 0.5rem 0 0.5rem 1.5rem;
	background-color: #eee;
	font-weight: bold;
}

.button {
  display: inline-block;
  text-decoration: none;
  outline: none;
	position: relative;
  z-index: 2;
  overflow: hidden;

}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '›';
	left: 0.5rem;
}

.button,
.button::before,
.button::after {
  -webkit-transition: all .2s;
  transition: all .2s;
}

.button:hover {
  color: #fff;
	opacity: 1.0;
	background-color: #333;
	text-decoration: none;
}

.button::after {
  left: -100%;
  width: 100%;
  height: 100%;
	top:0;
}

.button:hover::after {
  left: 0;
  background-color: #333;
	padding: 0.5rem 0 0.5rem 0.7rem;
}

/*==========================================================================
　会社情報
============================================================================*/




#about.profile #profile_area {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}

#about.profile #profile_area dt {
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1rem;
	background-color: #666;
	color: #fff;
	padding: 0.5rem
}

#about.profile #profile_area dd {
	padding: 0 0 1rem;
}


#about.profile #profile_area dl.entry01 {
	width: 48%;
}

#about.profile #profile_area dl.entry02 {
	width: 48%;
}

@media (max-width: 700px) {
	#about.profile #profile_area dl.entry01 {
		width: 100%;
	}

	#about.profile #profile_area dl.entry02 {
		width: 100%;
	}
}

#about.message .president_img {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	margin: -1rem 0 0;
}

#about.message .president_img .list01 {
	width: 20%;
}

#about.message .president_img .list02 {
	width: 75%;
}

#about.message .president_img img {
	width: 100%;
}

@media (max-width: 700px) {
	#about.message .president_img {
		flex-direction: column-reverse;
	}
	#about.message .president_img .list01 {
		width: 50%;
		margin: 0 auto;
	}
	#about.message .president_img .list02 {
		width: 100%;
	}
}

#about.access #google_map {
	width: 100%;
}

#about.access #google_map iframe.g_map {
	width: 100%;
	height: 20rem;
}

/*お問い合わせ*/

#about.contact h3.tel_contact {
	margin: 0 0 0;
	padding: 1rem 0 0;
	line-height: 0;
}

#about.contact .tel_read {
	line-height: 2.4rem;
}

#about.contact .tel_read span {
	display: block;
}

#about.contact .tel_read span.tel_num {
	font-size: 2.4rem;
	font-weight: bold;
}


#about.contact .tel_read span.tel_time {
	font-weight: bold;
}

#about.contact #mailform_contact_area li {
	text-align: center;
}

#about.contact #mailform_contact_area li a {
	display: block;
	background-color: #eee;
	padding: 2rem 2rem;
	margin: 0 0 2rem ;
}

#about.contact #mailform_contact_area li a:hover {
	text-decoration: none;
}

#about.contact #mailform_contact_area li a h4 {
	font-size: 1.4rem;
	font-weight: bold;
	margin: 0;
	padding: 0;
	text-align: left;
}

#about.contact #mailform_contact_area li a p {
	text-align: left;
}

#about.contact #mailform_contact_area li a .contact_button {
	display: inline-block;
	padding: 1rem 2rem;
	color: #fff;
	background-color: #333;
	font-weight: bold;
	text-align: center;
}

#about .column01 h3 {
	padding-top: 1rem;
	font-size: 1.4rem;
}

/*==========================================================================
　制作実績
============================================================================*/

/*　詳細ページ01　*/

#works.result {

}

#works.result #content {
	padding-top: 2rem;
	width:100%;
}

#works.result #content .column01 {
	padding: 0 0 0 0;
}

#works.result #result_photo {
  display: grid;
  grid-template-columns: 1fr; /* 初期状態：1列 */
  gap: 1.5rem; /* 各アイテムの余白 */
  width: 100%;
}

/* 画面幅768px以上のときに2列に */
@media screen and (min-width: 768px) {
  #works.result #result_photo {
    grid-template-columns: repeat(3, 1fr);
  }
}

#works.result #result_photo li {
  list-style: none;
}

#works.result #result_photo img {
  width: 100%;
  border: 1px solid #eee;
  border-radius: 0.3rem;
  display: block;
}

#works.result #content .column01 h2 {
	font-size: 1.4rem;
	line-height: 2.0rem;
	font-weight: bold;
	margin-top: 3rem;
	background: linear-gradient(transparent 80%, #c4de8a 0%);
	display: inline-block;
}

#works.result #content .column01 p {
	margin: 0;
}

#works.result #content .column01 .single_date {
	font-size: 0.9rem;
	line-height: 1.6rem;
	font-weight: bold;
	padding: 0;
	margin: 0 auto 2rem;
}

#works.result #content .column01 .single_date dt,
#works.result #content .column01 .single_date dd {
	display: inline-block;
	color: #999;
}

#works.result #content .column01 .single_date dd::before {
	content: ": "
}

#works.result #content .column02 {
	border-top: 5px solid #999;
	margin: 0 0 0 0;
}

@media (max-width: 1000px) {
	#works.result #content .column02 {
		display: block;
		width: 100%;
		margin: 1rem 0 0 0;
	}
}

#works.result #content .column02 h3 {
	font-size: 1.2rem;
	font-weight: bold;
}

#works.result #content .column02 h3 span {
	padding-left: 1rem;
	font-size: 0.8rem;
	font-weight: bold;
}

#works.result #content .column02 #category_list {
	display: flex;
	flex-direction: column;
	width: 100%;
}

@media (max-width: 1000px) {
	#works.result #content .column02 #category_list {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#works.result #content .column02 #category_list li {
		width: 33%;
	}
}

@media (max-width: 700px) {
	#works.result #content .column02 {
		margin: 1rem 0 0 0;
	}
	#works.result #content .column02 #category_list li {
		width: 100%;
	}
}

#works.result #content .column02 #category_list a {
	display: block;
	padding: 0.3rem 0;
	font-size: 1rem;
}

#works.result #content .column02 #category_list a::before {
	content: "› "
}


#works.result .video{
width:100%;
padding-bottom: 56.25%;
height:0px;
position: relative;
}

#works.result .video iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/* #works_overview */

#works.details #works_overview {
  padding: 0 0 0 0;
}

#works.details #works_overview h2 {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2.4rem;
  padding: 0 0 2rem 0;
}

#works.details #works_overview_mainimg img {
  width: 100%;
}

#works.details #works_overview_read_area {
  display: flex;
  padding: 2rem 0 5rem 0;
}

#works.details #works_overview_read_area p {
  width: 100%;
  padding:0 0 0 1.5rem;
  text-align: justify;
  line-height: 1.8rem;
}

#works.details #credit_area {
  border: 3px solid #8CC601;
  padding: 1rem;
  line-height: 1.6rem;
  font-size: 0.8rem;
  width: 100%;
}

#works.details #credit_area li i {
  padding-left: 0.5rem;
}

#works.details #credit_area li b {
color:#8CC601;
font-weight: bold;
}

#works.details #credit_area li span {
font-weight: bold;
font-size: 0.8rem;
}

#works.details .article {
  padding: 0 0 1rem 0;
}

#works.details .article h3 {
  font-size: 1.2rem;
  font-weight: bold;
  background-color: #8CC601;
  padding: 1rem 0 1rem 5rem;
  color: #fff;
}

#works.details h3.problem {
  background-image: url(/works/img/works_detail_article_icon01.svg);
  background-repeat: no-repeat;
  background-size:3rem 3rem;
  background-position: left 1rem center;
}

#works.details h3.approach {
  background-image: url(/works/img/works_detail_article_icon02.svg);
  background-repeat: no-repeat;
  background-size:3rem 3rem;
  background-position: left 1rem center;
}

#works.details h3.result {
  background-image: url(/works/img/works_detail_article_icon03.svg);
  background-repeat: no-repeat;
  background-size:3rem 3rem;
  background-position: left 1rem center;
}

#works.details .article h3 span {
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
  display: block;
  line-height: 1.4rem;
}

#works.details .article dl {
  display: block;
}

#works.details .article dt {
  font-size: 1.6rem;
  font-weight: bold;
  padding: 0 0 1rem 0;
  line-height: 2.2rem;
  text-align: justify;
}

#works.details .article dd {
  display: flex;
	flex-wrap: wrap;
}

#works.details .article .item.right {
  padding-left: 1rem;
}

#works.details .article .item {
  width: 50%;
  padding-bottom: 2rem;
}

@media (max-width: 700px) {
	#works.details .article .item {
	  width: 100%;
	}
}

#works.details .article .item .item_caption {
  text-align: center;
  font-weight: bold;
  padding: 1rem 0;
}

#works.details .article .item .item_caption i {
  padding: 0 0 0 0.5rem;
}

#works.details .article p {
  width: 50%;
  text-align: justify;
  padding-bottom: 2rem;
  line-height: 1.8rem;
}

@media (max-width: 700px) {
	#works.details .article p {
	  width: 100%;
	}
}

#works.details .article p.full {
  width: 100%;
  text-align: justify;
  padding-bottom: 2rem;
}

#works.details .article .item img {
  width: 100%;
}

#works.details img.border_gray {
  border: 1px solid #999 ;
  box-sizing: border-box;
}

#works.details #result_list {
  display: flex;
	flex-wrap: wrap;
  justify-content: flex-start;
}

#works.details #result_list li {
  border: 3px solid #8CC601;
  padding: 0.5rem 1.5rem;
  text-align: center;
  font-weight: bold;
  border-radius: 3rem;
  margin-right: 1rem;
}

@media (max-width: 700px) {
	#works.details #result_list li {
	  width: 100%;
		margin: 0 0 0.5rem 0;
	}
}

@media (max-width: 700px) {
	#works.details #works_overview_read_area {
		flex-direction: column;
	  padding: 2rem 0 0 0;
	}

	#works.details #credit_area {
		width: 100%;
	}
	#works.details #works_overview_read_area p {
	  padding:0 0 0 0;
	}
}

/* 親ラッパー：最大1600px＋中央寄せ */
#works.top #works_link {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 2rem; /* 横の余白 */
  row-gap: 3rem;     /* 縦の余白（ここを広く） */
  max-width: 1600px;
  margin: 3rem auto 0;
  padding: 0 1rem; /* スマホ時の左右余白 */
}

/* 子アイテム：柔軟に可変＋最小幅指定 */
#works.top #works_link li {
  flex: 1 1 calc((100% - 0rem) / 4); /* 最大5列の幅感 */
  min-width: 250px; /* 最小2列を保証 */
  max-width: 100%;  /* はみ出し防止 */
  margin: 0;
  aspect-ratio: 4 / 3; /* 任意：画像比率キープ */
}

#works.top #works_link li:hover {
	opacity: 1.0;
}

@media (max-width: 1000px) {
	#works.top #works_link li {
		width: 30%;
	}
}


/* モバイル：狭い画面での調整 */
@media (max-width: 600px) {
  #works.top #works_link li {
    min-width: 100%; /* 1列表示（縦並び） */
  }
}

#works.top #works_link li img {
	width: 100%;
	height: 20vh;
  object-fit: cover; /* この一行を追加するだけ！ */
	object-position: top center;
	border: #eee 1px solid;
}

#works.top #works_link .meta {
	line-height: 1.2rem;
	margin: 0.5rem 0 0 0;
}

#works.top #works_link .meta p {
	padding: 0;
	margin: 0;
	font-size: 0.8rem;
}

#works.top #works_link .meta p.category span {
font-weight: bold;
display: inline-block;
color: #fff;
background-color: #333;
padding: 0.1rem 0.5rem;
margin: 0rem 0.2rem 0.5rem 0;
border-radius: 0.5rem;
}

#works.top #works_link .meta p.cat-web span {
background-color: #00747a;
}

#works.top #works_link .meta p.title {
	font-size: 1rem;
	font-weight: bold;
}

#works.top #works_link .meta p.tag {
	font-size: 0.8rem;

}


.sort_contents ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.sort_contents ul li {
  width: calc(100% / 8);
  margin: 0 0 0;
	opacity: 1;
	transition-duration: 1s;
}

.sort_contents {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto 3rem;
}

.sort_contents label {
  margin: 1rem 0 0;
	padding: 0.5rem 0;
  font-size: 1rem;
	font-weight: bold;

	display: block;
	width: calc(100%/7);
	text-align: center;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 5.7rem;
	background-color: #fff;
	z-index: 1;
}

@media (max-width: 1600px) {
	.sort_contents label {
		top: 4.1rem;
	}
}

@media (max-width: 700px) {
	.sort_contents label {
		top: 3.3rem;
		font-size: 1rem;
		padding: 0.3rem 0;
	}
}

.sort_contents input[name="sort"] {
  display: none;
}

.sort_contents label:hover,
.sort_contents input[name="sort"]:checked + label {
  color: #333;
  border-bottom: 3px solid #333;
	box-sizing: border-box;
}
.sort_contents input[name="sort"]:checked + label {
  cursor: default;
}




#sort-graphics:checked ~ ul [data-color*="graphics"],
#sort-web:checked ~ ul [data-color*="web"],
#sort-movie:checked ~ ul [data-color*="movie"] ,
#sort-promotion:checked ~ ul [data-color*="promotion"] ,
#sort-event:checked ~ ul [data-color*="event"],
#sort-branding:checked ~ ul [data-color*="branding"]  {
  order: -1;
}

#sort-graphics:checked ~ ul li:not([data-color*="graphics"]),
#sort-web:checked ~ ul li:not([data-color*="web"]),
#sort-movie:checked ~ ul li:not([data-color*="movie"]),
#sort-promotion:checked ~ ul li:not([data-color*="promotion"]),
#sort-event:checked ~ ul li:not([data-color*="event"]),
#sort-branding:checked ~ ul li:not([data-color*="branding"]) {
	opacity: 0.2;
}


/*==========================================================================
　採用情報
============================================================================*/

#recruit.requirements {

}

#recruit.requirements .main_img {
	margin-bottom: 3rem;
}

#recruit.requirements .main_img img {
	width: 100%;
	max-height: 20rem;
	object-fit: cover;
}

#recruit.requirements h3 {
	border-bottom: 3px solid #eee;
	padding-bottom: 0.5rem;
}

.entry_botton {
	width: 100%;
	text-align: center;
	padding-top: 2rem;
}

.entry_botton a {
	width: 70%;
	display: inline-block;
	padding: 2rem 2rem;
	text-align: center;
	background-color: #90c31f;
	border: 3px solid #90c31f;
	color: #fff;
	font-weight: bold;
	font-size: 1.2rem;
}

@media (max-width: 700px) {
	.entry_botton a {
		width: 90%;
	}
}

/*==========================================================================
　サイトマップ
============================================================================*/

#sitemap.top #content {
	width: 100%;

}

/*==========================================================================
　Privacy policy
============================================================================*/

#privacy .privacy_copy dt {
  font-weight: bold;
  font-size: 1.2rem;
  padding: 2rem 0 0.5rem 0;
  border-bottom: 1px solid #999;
}

#privacy .privacy_copy .enactment {
  padding: 3rem 0 0 0;
  text-align: right;
}

#privacy .privacy_copy a {
  text-decoration: underline;
}

#privacy .privacy_copy a:hover {
  text-decoration: none;
}


/* ==========================================
   SEO最適化後の制作実績詳細ページ Hタグ調整
   ========================================== */

/* ページ固有タイトル（旧h2） */
#works.result .works_title_main {
  font-size: 1.6rem;
  line-height: 2.0rem;
  font-weight: bold;
  margin: 0 0 2rem;
  display: block;
}

/* 各セクションタイトル（旧h2） */
#works.result .works_section_title {
  font-size: 1.6rem;
  line-height: 2.0rem;
  font-weight: bold;
  margin-top: 3rem;
  margin-bottom: 1rem;
  display: block;
}

/* スマホサイズ時の調整 */
@media (max-width: 700px) {
  #works.result .works_title_main,
  #works.result .works_section_title {
    font-size: 1.4rem !important;
    line-height: 1.8rem;
  }
}

/* ページ上部「制作実績 Works」装飾（見出し風デザイン維持） */
#page_title .page_label {
  font-size: 1.4rem;
  font-weight: bold;
  display: block;
}

#page_title .page_label span {
  display: inline-block;
  font-size: 0.9rem;
  padding-left: 1rem;
  vertical-align: middle;
  color: #777;
}