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

#g-nav li a.a_arrow_ore::after {
    width: 8px;
    height: 8px;
}

#g-nav li a.a_arrow::after {
    width: 6px;
    height: 6px;
}

.main_content{
	background-color: #F8F8F8;
}

#company .wrap{
	padding: 100px 0 130px 0;
}

#company h2{
	text-align: center;
}

h1{
	background: url("../images/company.jpg") no-repeat;
	background-size: cover; 
	text-align: center;
	padding: 40px 0;
	letter-spacing: 0.15em;
}

h2{
	margin-bottom: 50px;
}

h3{
	margin-bottom: 50px;
	text-align: center;
}

h4{
	background:linear-gradient(transparent 50%, #ebf8fd 0%);
	display: inline-block;
	margin: 50px 0 10px;
}


.fadeIn{
animation-name:fadeInAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity:0;
	 animation-timing-function: ease-in;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeInTrigger{
    opacity: 0;
}


/* 会社概要
-------------------------*/
.about{
	line-height: 1.75;
}
.about table{
	width: 100%;
    border-spacing: 0;
}
.about table tr:first-child td{
	border-top: solid 1px #C5C5C5;
}
.about table tr td{
	padding: 20px 0;
    border-bottom: solid 1px #C5C5C5;
}
.about table tr > td:nth-of-type(1){
	vertical-align: top;
    width: 18%;
    padding-right: 7.5%;
}
.about table tr.access td dl{
	padding-left: .5em;
	margin-top: 0;
}
.about table tr.access td dl dd{
	margin-left: 0;
}
.about table tr.access td .access_transfer{
	margin-top: 25px;
}
.about table tr.access td .access_transfer dl{
	display: flex;
    flex-wrap: wrap;
    width: 100%;
	margin-top: 8px;
}
.about table tr.access td .access_transfer dl dt{
	width: 30%;
}
.about table tr.access td .access_transfer dl dd{
	width: 70%;
}
.about table tr.access td{
	border-bottom: none;
	padding-bottom: 0;
}
#map {
	width: 89.4%;
    height: 325px;
	margin: 0 0 0 9em;
}

.about table tr.map td{
		padding-right: 0;
	}

.google-maps {
	position: relative;
  overflow-y: hidden;
  width: 100%;
  padding-top: 50%;
	margin-top: 30px;
}

.google-maps iframe {
  position: absolute;
  top: -150px;
  left: 0;
  width: 100%;
  height: calc(100% + (180px * 2));
}

@media screen and (max-width: 768px){
	.about{
		font-size: .875rem;
		line-height: 1.4;
	}
	.about table tr td:first-child{
		width: 7em;
	}
	.about table tr.access td .access_transfer{
		margin-top: 20px;
	}
	.about table tr.access td .access_transfer > p{
		font-size: .875rem;
	}
	.about table tr.access td .access_transfer dl{
		display: block;
		margin-top: 10px;
	}
	.about table tr.access td .access_transfer dl dt{
		width: 100%;
	}
	.about table tr.access td .access_transfer dl dd{
		width: 100%;
	}
	.about table tr.access td .access_transfer dl dt:nth-of-type(2){
		margin-top: 20px;
	}
	.about table tr.map td{
		padding-right: 0;
		text-align: right;
	}
	
	#map {
		width: 100%;
		height: 325px;
		margin: 0;
	}
	
	.google-maps {
	position: relative;
  overflow-y: hidden;
  width: 100%;
	max-width: 650px;
  padding-top: 100%;
	margin-top: 20px;
}

.google-maps iframe {
  position: absolute;
  top: -150px;
  left: 0;
  width: 100%;
  height: calc(100% + (180px * 2));
}
	

}
/* 沿革
-------------------------*/
.history ul{
	padding-left: 0;
}
.history .history_list h3{
	position: relative;
	text-align: left;
	font-size: 1.15rem;
	margin-bottom: 0;
	letter-spacing: -0.01em;
}
.history .history_list h3::before {
    left: 95px;
    height: 1px;
}
.history .history_list h3::before {
    position: absolute;
	top: 53%;
    left: 4.5em;
    width: 90%;
    height: 1px;
    content: "";
    transform: translateY(-50%);
    background-color: #C5C5C5;
}
.history .history_list li > div{
	margin: 10px 0 5px 12%;
}
.history .history_list dl{
	display: flex;
    flex-wrap: wrap;
    width: 100%;
	margin: 0;
}
.history .history_list dl dt{
	width: 5%;
    margin: 0 3% 0 0;
    text-align: right;
}
.history .history_list dl dd{
	width: 92%;
	margin-left: 0;
}
.history .history_list dl dt:not(:first-of-type){
	margin: 24px 3% 0 0;
}
.history .history_list dl dd:not(:first-of-type){
	margin: 24px 0 0 0;
}
.history .history_list li:last-child h3::after{
	position: absolute;
    left: 4.5em;
    width: 90%;
    height: 0.01vw;
    content: "";
    transform: translateY(-50%);
    background-color: #C5C5C5;
	bottom: -115px;
}
*::before,
*::after {
  box-sizing: border-box;
}
@media screen and (max-width: 768px){
	.history{
		font-size: .875rem;
		line-height: 1.4;
	}
	*::before,*::after {
  		box-sizing: border-box;
	}
	.history .history_list h3{
		font-size: initial;
	}
	.history .history_list li > div {
		margin: 28px 0 39px 0.5em;
	}
	.history .history_list dl dt{
		width: 11%;
	}
	.history .history_list dl dd{
		width: 83%;
	}
	.history .history_list h3::before{
		/*width: 77.25%;
		height: 0.02vw;*/
		width: calc(100% - 80px);
    height: 1px;
	}
	.history .history_list dl dt{
		margin: 0 6% 0 0;
	}
	.history .history_list dl dt:not(:first-of-type) {
		margin: 24px 6% 0 0;
	}
	.history .history_list li:last-child h3::after{
		display: none;
	}
	.history .history_list li:last-child{
		border-bottom: 1px solid #c5c5c5;
	}
}

/* 社長メッセージ
-------------------------*/
.message{
	display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
}
.message > p {
    width: 58.8%;
	line-height: 1.75;
}
.message .imgBox {
    width: 36%;
	text-align: right;
}
.message .imgBox > p{
	text-align: right;
	margin: 20px 0 0;
}

.message .imgBox img{
	max-width: 260px;
}

.message .imgBox div:nth-of-type(2){
	width: 60%;
    margin: 10px 0 0 40%;
}
@media screen and (max-width: 768px) {
	.message{
	display: block;
	}
	.message > p {
		width: 100%;
	}
	.message .imgBox {
		width: 100%;
	    max-width: 300px;
        margin: 30px auto 0;
		text-align: center;
	}
	.message .imgBox img{
	max-width: 260px;
}
}

/* 会社概要
-------------------------*/

.jigyou h3{
	margin: 80px 0 0;
}
.jigyou h4{
	font-size: 20px !important;
	margin-bottom: 30px;
}

.jigyou .resolution_tit{
	text-align: center;
}
.jigyou .resolution_box{
		display: flex;
		justify-content: center;
	}
.jigyou .resolution_item_l{
	text-align: center;
	margin-right: 100px;
}
.jigyou .resolution_item_l img,.jigyou .resolution_item_r img{
	max-width: 240px;
	padding-bottom: 10px;
}

.jigyou .resolution_item_l p,.jigyou .resolution_item_r p{
	font-size: 15px;
	font-weight: bold;
}

.jigyou .resolution_item_r{
	text-align: center;
}

.jigyou .figure_img{
	padding: 50px 0;
}

.jigyou .figure_img img{
	max-width: 800px;
}

.detail_area{
	margin-top: 80px;
}

.jigyou .detail_box{
	display: flex;
	justify-content: space-between;
	margin-top: 130px;
}

.jigyou .detail_box:first-child{
	margin-top: 100px;
}

.jigyou .detail_tit{
	font-size: 22px;
	font-weight: bold;
	color: #1991c6;
	padding-bottom: 10px;
}

.jigyou .detail_pl{
	margin-right: 50px;
	max-width: 440px;
	padding-top: 30px;
}

.jigyou .detail_pr{
	margin-left: 50px;
	max-width: 440px;
	padding-top: 30px;
}

.jigyou .detail_p{
	font-weight: 600;
	line-height: 1.8;
}

.jigyou .detail_p{
	font-weight: 600;
	line-height: 1.8;
}

.jigyou .detail_imgl,.jigyou .detail_imgr{
	max-width: 350px;
	position: relative;
}

.jigyou .icon_box{
	position: absolute;
	left: 50%;
top: 50%;
transform: translate(-50%,-50%);
    text-align: center;
}

.jigyou p.icon_name{
	color: #1991c6;
	font-weight: bold;
	font-size: 30px;
	line-height: 1.2;
}

.jigyou .white_ring_img{
	max-width: 350px;
}

.jigyou .original-box-shadow-white,.jigyou .media_guide_btn{
	margin-top: 30px;
	    float: left;
	max-width: 240px;
}

.jigyou .solution_img{
	max-width: 87px;
	padding-bottom: 5px;
}

.jigyou .creative_img{
	max-width: 99px;
	padding-bottom: 5px;
}

.jigyou .in-storemedia_img{
	max-width: 100px;
	padding-bottom: 5px;
}

.fadeIn-shadow{
animation-name:fadeIn-shadowAnime;
animation-duration:0.6s;
animation-fill-mode:forwards;
opacity: 0;
  animation-timing-function: ease-out;
	animation-delay: 0.3s;
}

@keyframes fadeIn-shadowAnime{
  from {
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(255,255,255,0)) drop-shadow(0 0 0 rgba(156, 217, 233, 0));
  }

  to {
    opacity: 1;
     filter: drop-shadow(-2px -2px 3px rgba(255,255,255,1)) drop-shadow(5px 5px 5px rgba(156, 217, 233, 0.4));
  }
}

.fadeIn-shadowTrigger{
  opacity: 0;
}



@media screen and (max-width: 768px) {
	.jigyou h3 {
    margin: 40px 0 0;
}
	.jigyou h4 {
    font-size: 16px !important;
    margin-bottom: 20px;
}
	.jigyou .resolution_item_l {
    text-align: center;
    margin-right: 15px;
}
	
	.jigyou .resolution_item_l p, .jigyou .resolution_item_r p {
    font-size: 11px;
    font-weight: bold;
}
	.jigyou .figure_img {
    padding: 30px 0;
}
	
	.detail_area {
    margin-top: 40px;
}
	.jigyou .detail_box {
    display: flex;
    justify-content: center;
		flex-wrap: wrap;
    margin-top: 60px;
}
	.jigyou .detail_imgl,.jigyou .detail_imgr{
	order: 1;
}
	.jigyou .detail_pl{
	margin-right: 0;
		margin-top: 20px;
		order: 2;
		padding-top: 0;
}

.jigyou .detail_pr{
	margin-left: 0;
	margin-top: 20px;
	order: 2;
	padding-top: 0;
}
	
	.jigyou .original-box-shadow-white,.jigyou .media_guide_btn{
	    float: none;
	max-width: 210px;
		font-size: 14px;
}
	
	.jigyou .solution_img{
	max-width: 70px;
	padding-bottom: 3px;
}

.jigyou .creative_img{
	max-width: 90px;
	padding-bottom: 3px;
}

.jigyou .in-storemedia_img{
	max-width: 90px;
	padding-bottom: 3px;
}

	.jigyou p.icon_name {
    font-size: 20px;
}
	
	.jigyou .white_ring_img {
    max-width: 250px;
}

}


/* 各事業所一覧
-------------------------*/
.office ul{
	padding-left: 0;
}
.office .office_list h3{
	position: relative;
	text-align: left;
	font-size: 1.15rem;
	margin-bottom: 0;
	letter-spacing: -0.01em;
}
.office .office_list h3::before {
    left: 95px;
    height: 1px;
}
.office .office_list h3::before {
    position: absolute;
	top: 53%;
    left: 4.5em;
    width: 90%;
    height: 0.01vw;
    content: "";
    transform: translateY(-50%);
    background-color: #C5C5C5;
}
.office .office_list li > div{
	margin: 10px 0 5px 12%;
}
.office .office_list dl{
	display: flex;
    flex-wrap: wrap;
    width: 100%;
	margin: 0;
	justify-content: space-between;
}
.office .office_list dl dt{
	width: 14%;
	margin: 0 7.2% 0 0;
    text-align: left;
}
.office .office_list li.kanto dl:nth-child(n + 2),.office .office_list li.kinki dl:nth-child(n + 2),.office .office_list li.kyushu dl:nth-child(n + 2) {
	margin-top: 30px;
}
.office .office_list dl dd {
    width: 78%;
    margin-left: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
.office .office_list dl dt:not(:first-of-type){
	margin: 24px 3% 0 0;
}
.office .office dl dd:not(:first-of-type){
	margin: 24px 0 0 0;
}
.office .office li:last-child h3::after{
	position: absolute;
    left: 4.5em;
    width: 90%;
    height: 0.01vw;
    content: "";
    transform: translateY(-50%);
    background-color: #C5C5C5;
	bottom: -52px;
}
.office .office_list dl .office_list_dtl div:nth-of-type(1) > p{
	line-height: 1.75;
}
.office .office_list dl .office_list_dtl div:nth-of-type(2){
	width: 34%;
    margin: 0;
}
.office .office_list li:last-child h3::after{
	position: absolute;
    left: 4.5em;
    width: 90%;
    height: 0.01vw;
    content: "";
    transform: translateY(-50%);
    background-color: #C5C5C5;
	bottom: -275px;
}
@media screen and (max-width: 768px){
	.office{
		font-size: .875rem;
		line-height: 1.4;
	}
	*::before,*::after {
  		box-sizing: border-box;
	}
	.office .office_list h3{
		font-size: initial;
	}
	.office .office_list li > div {
		margin: 27px 0 27px 0.5em;
	}
	.office .office_list dl dt{
		width: 15%;
		margin: 0px 10.5% 0 0;
		font-size: .875rem;
	}
	.office .office_list dl dd{
		width: 74%;
		display: block;
	}
	.office .office_list h3::before{
		width: calc(100% - 80px);
		height: 1px;
	}
	.office .office_list dl dt:not(:first-of-type) {
		margin: 24px 6% 0 0;
	}
	.office .office_list li:last-child h3::after{
		display: none;
	}
	.office .office_list li:last-child{
		border-bottom: 1px solid #c5c5c5;
	}
	.office .office_list dl .office_list_dtl div:nth-of-type(1) > p {
		line-height: 1.4;
		font-size: .875rem;
	}
	.office .office_list dl .office_list_dtl div:nth-of-type(2) {
		width: 89.5%;
    	margin-top: 20px;
	}
}
/* プライバシーマーク認証取得
-------------------------*/
.pmark{
	line-height: 1.75;
}
.pmark .pmark_lead{
	display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}
.pmark .pmark_lead div img{
	display: block;
}
.pmark .pmark_lead div{
	width: 15.3%;
    margin-right: 3.85%;
}
.pmark .pmark_lead p{
    line-height: 1.75;
}
.pmark table {
    width: 100%;
    border-spacing: 0;
	margin-top: 30px;
}
.pmark table tr:first-child td{
	border-top: solid 1px #C5C5C5;
}
.pmark table tr td{
	padding: 20px 0;
    border-bottom: solid 1px #C5C5C5;
}
.pmark table tr > td:nth-of-type(1){
	width: 19%;
}
@media screen and (max-width: 768px){
	.pmark{
		line-height: 1.4;
	}
	.pmark .pmark_lead{
		display: block;
	}
	.pmark .pmark_lead div {
		width: 28%;
		margin: auto;
	}
	.pmark .pmark_lead p{
		margin-top: 20px;
		line-height: 1.5;
	}
	.pmark table{
		margin-top: 40px;
		font-size: .875rem;
	}
	.pmark table tr > td:nth-of-type(1) {
		width: 37%;
    	padding-right: 7%;
	}
	.pmark table tr td{
		vertical-align: top;
	}
	
}
/*====================================================
タブ
====================================================*/
.tab{
  display: flex;
	justify-content: center;
  flex-wrap: nowrap;
	font-size: 12px;
	font-weight: bold;
	padding: 0;
	margin: 0 auto 80px;
}
.tab li a{
	margin: 0 20px;
}
.tab li a:hover{
	color: #1991c6;
}

.tab li.active a{
  color: #1991c6;
	    border-bottom: solid 1px #1991c6;
}

.tab li:not(:first-child)::before {
  content: "｜";
	color: #C8C8C8;
}

.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 5px 5px 10px -1px rgba(0, 0, 0, .16);
	padding: 100px 140px;
	margin: 0 auto;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
	 animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
	opacity:0;
}

@keyframes displayAnime{
	from {
		opacity: 0;
		transform: translateY(80px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}



@media screen and (max-width: 768px) {
	
	#company .wrap{
	padding: 60px 0 130px 0;
}
	
h1{
	background: url("../images/company.jpg") no-repeat;
	background-size: cover; 
	text-align: center;
	padding: 20px 0;
}

h2{
	margin-bottom: 30px;
	font-size: 20px;
}

h3{
	margin-bottom: 30px;
	text-align: center;
}

h4{
	background:linear-gradient(transparent 50%, #ebf8fd 0%);
	display: inline-block;
	margin: 30px 0 10px;
}
	
/*====================================================
タブ
====================================================*/
.tab{
  display: flex;
	justify-content: center;
  flex-wrap: wrap;
	font-size: 12px;
	font-weight: bold;
	padding: 0;
	margin: 0 auto 20px;
}
	
	.tab li{
	margin-bottom: 20px;
}
	
	
	.tab li a{
	margin: 0 5px 10px;
}
	
	.area {
	padding: 40px 25px;
		margin: 0 auto;
}
	
	}
.pc{
	display: block ! important;
}
.sp{
	display: none!important;
}
@media screen and (max-width: 768px){
	.sp{
		display: block ! important;
	}
	.pc{
		display: none!important;
	}
}