@charset "utf-8";

/* ===================================================================
CSS information

 file name    casestudy.css
 lastmodified :08/09/12
 style info   .casestudyページ用CSS
=================================================================== */


/*  導入企業TOP
----------------------------------------------------------- */


#contents {
  background: none;
}
#zac.casestudy #aside h4 span {
color: #254692;
font-size: 134%;
}
ul#topic_path li a {
    background: none;
    margin-right: 0;
    padding-right: 5px;
}
.casestudy p strong a{
	background:url(../casestudy/img/share/ico-mini.gif) left no-repeat;
	text-decoration:none;
	padding-left:20px;
}

.casestudy p strong a:hover{
	text-decoration:underline;
}

.casestudy h4 a{
	text-decoration:none;
}

.casestudy h4 a:hover{
	text-decoration:underline;
}


.section .category_list ol{
	margin: 0 0 15px 0;
	list-style-type: none;
}
.section .category_list ol li{
	padding: 0 0 0 25px;
	background:url(../erp/img/share/ico-dot01.gif) 10px center no-repeat;
}

.section h3.title_top{
	border-top:1px solid #dde3ea;
	background:#f2f5f9;
	border-bottom:1px solid #dde3ea;
	padding:7px 10px;
	color:#3b444f;
	margin-bottom:15px;
}

.section .list_index{
	width:700px;
	zoom:1;
	color:#3b444f;
}

.section .list_index .ico-category{
	width:120px;
	text-align:center;
	background:url(../casestudy/img/share/bg-category_bottom.gif) bottom no-repeat #0092d7;
	padding-bottom:3px;
	color:#fff;
	font-size:80%;
	float:left;
}

.section .list_index .ico-category_top{
	background:url(../casestudy/img/share/bg-category_top.gif) top no-repeat;
	padding-top:3px;
}

.section .list_index .company_name{
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
	padding:8px 0;
	margin-bottom:15px;
	zoom:1;
}

.section .company_name:after {
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

.section .list_index h4{
	float:right;
	width:560px;
}


.section .list_index .imgL{
	float:left;
	width:120px;
}

.section .list_index .txtR{
	float:right;
	width:560px;
}

.section .list_index:after {
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

.section ul.total_list2{
	zoom:1;
	width:702px;
	padding-left:20px;
}

.section ul.total_list2 li{
	display:inline;
}



/*  導入までの流れ
----------------------------------------------------------- */

h2{
	/* color:#3b444f; */
}

p.intro{
	width:475px;
	float:left;
	margin-bottom:25px;
	font-size:117%;
}

p.intro strong{
	color:#0092d7;
	font-size:125%;
}

p.imgR{
	width:190px;
	float:right;
	margin:0 0 10px 10px;
}

.section{
	clear:both;
	width:702px;
}

.section div.agenda{
	background:url(../casestudy/img/share/bg-agenda_bottom.gif) bottom no-repeat;
	width:700px;
	margin-bottom:15px;
}

.section div.agenda h3{
	width:700px;
	margin:0;
	background:url(../casestudy/img/share/bg-agenda.gif) top no-repeat;
	padding:6px 0 10px 0px;
	font-size:117%;
}

.section div.agenda h3 strong{
	padding-left:15px;
}

.section div.agendaHeadline{
	margin-bottom:15px;
	color:#FFFFFF;
}

.section div.agendaHeadline h3{
	width:700px;
	margin:0;
	background:url(../casestudy/img/share/bg-agenda_headline.gif) top no-repeat;
	padding:6px 0 10px 0px;
	font-size:117%;
}

.section div.agendaHeadline h3 strong{
	padding-left:15px;
}

.section p{
	margin-bottom:20px;
}

.section dl.dialog{
}

.section dl.dialog dt{
	margin-bottom:15px;
	font-size: 16px;
}

.section dl.dialog dd {
	margin-bottom:20px;
	font-size: 16px;
}

.section dl.dialog dd.none {
	margin-bottom:12px;
}

.section dl.dialog dd.imgL {
	border:#e6e4df solid 3px;
}

.section dl.dialog dd.imgR {
	width:auto;
	float:right;
	margin:0 0 10px 20px;
	border:#e6e4df solid 3px;
}

.section dl.dialog dd.annotation {
	font-size:84%;
	color:#0092d7;
}

.section dl.dialog dd.annotation.none {
	margin-bottom:5px;
}

.section dl.dialog dd.annotationG {
	font-size:84%;
}

.section dl.dialog dd.annotationG.none {
	margin-bottom:5px;
}

ul#sb_list,
ul.sb_list {
margin-left:390px;
}

ul#sb_list li,
ul.sb_list li {
	float: left;
	padding-left: 9px;
	height: 23px;
	vertical-align: middle;
}

.before_after {
  margin-left:50px;
}
dd.before_after {
  margin:0 100px;
}
dd.before_after img {
  margin-left:-50px;
}

iframe.twitter-share-button {
	width: 90px !important;
}

/*会社概要*/
.section dl.outline {
	clear:both;
	display:inline-block;
	margin-bottom:5px;
	padding-bottom:5px;
	border-bottom:1px dotted #c2c4c7;
	font-size:117%;
}

.section dl.outline.none {
	border-bottom:none;
}

.section dl.outline dt {
	width:130px;
	float:left;
}

.section dl.outline dd {
	margin-left:5px;
	width:550px;
	float:left;
}

.section dl.outline dd.textL {
	margin-left:5px;
	width:365px;
	float:left;
}

.section dl.outline dd.imgR {
	width:auto;
	float:right;
	margin:0 0 10px 20px;
	border:#e6e4df solid 3px;
}

/*関連するページ*/
.section .related_page {
	font-size: 117%;
}
/*  導入企業一覧


/*  導入企業一覧
----------------------------------------------------------- */

p.total_intro {
	color:#000;
	margin-bottom:10px;
}

.section ul.total_list {
	zoom:1;
	width:702px;
	height:190px;
	border-bottom:1px dotted #dddddd;
	margin-bottom:10px;
}

.section ul.total_list_last {
	border-bottom:none;
}

.section ul.total_list li {
	float:left;
	width:201px;
	text-align:center;
	padding-right:48px;
	padding-bottom:20px;
}

.section ul.total_list li.last {
	padding-right:0px;
}

.section ul.total_list li img {
	padding-bottom:5px;
}

.section ul.total_list li span a {
	font-size:85%;
	text-decoration:none;
}

.section ul.total_list li span {
	display:block;
	padding-bottom:5px;
}

/*  case20
----------------------------------------------------------- */

.img_graph {
	margin:10px 0 20px 77px;
}


/*  case30
----------------------------------------------------------- */
.outline dd .interviewer_wrapper {
	width: 550px;
	overflow: hidden;
}

.outline dd .interviewer_wrapper .company_name {
	width: 19em;
	float: left;
}

/*  case31
----------------------------------------------------------- */
.section .txt_center {
	padding-bottom: 20px;
}

/* ie7 */
*+html .outline dd .interviewer_wrapper .company_name {
	width: 21em;
}

.outline dd .interviewer_wrapper .interviewer_name{
	float: left;
}

/*ページナビ*/

div.page_nav{
	padding:10px 0;
	width:702px;
	margin-bottom:40px;
	position:relative;
	zoom:1;
}

div.page_nav div{
	position:absolute;
	top:10px;
	left:290px;
	zoom:1;
}

div.page_nav div img{
	padding-right:7px;
}

div.page_nav div a{
	text-decoration:none;
}




/*資料請求ほか*/

.casestudy #article #main div.contact_area{
	zoom:1;
	padding:10px 10px 0 10px;
	background:url(../img/index/bg-contact_area.jpg) no-repeat;
	width:700px;
}

.casestudy #article #main div.contact_area  ul li{
	float:left;
	padding-right:10px;
}

.casestudy #article #main div.contact_area  ul li.last{
	padding-right:0;
}

.casestudy #article #main div.contact_area ul:after {
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

.casestudy #article #main div.contact_area p{
	clear:both;
	padding:0 0 20px 37px;
	margin-top:21px;
	width:537px;
}

/* ===================================================================
 lastmodified :13/12/16
=================================================================== */

/* ページ上部のロゴ */
#logo-group {
	margin-bottom: 40px;
}

/* タイトル */
.casestudy #article #main h2 {
	margin-bottom: 5px;
}

/* タイトル背景 */
.casestudy #article #main h3,
.casestudy #article #main .casestudy_archive_title {
	background: url(../casestudy/img/index/bg-titlebar.gif) no-repeat 0 0;
	color: #fff;
	margin-bottom: 20px;
	padding: 5px 10px 10px 15px;
	font-size: 125%;
}

/* ページ内リンク */
.casestudy #casestudyInnerLink {
	margin-bottom: 45px;
	position: relative;
}
.casestudy #casestudyInnerLink #issue-specific {
	position: absolute;
	right: 5px;
	top: -30px;
	padding: 1px 2px 4px 3px;
	background: url(../casestudy/img/index/bg-issue-specific.gif) no-repeat 0 50%;
	font-weight: bold;
}
.casestudy #casestudyInnerLink #issue-specific a {
	display: block;
	width: 108px;
	height: 22px;
	padding: 1px 0 0 12px;
	text-decoration: none;
}
.casestudy #casestudyInnerLink #issue-specific a:hover {
	text-decoration: underline;
}
.casestudy #casestudyInnerLink ul {
	zoom: 1;
	margin-left: -6px;
	margin-right: -11px;
}
.casestudy #casestudyInnerLink ul:after {
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}
.casestudy #casestudyInnerLink li {
	background: url(../casestudy/img/index/btn-inner-link.png) no-repeat 0 0;
	float: left;
	width: 218px;
	padding: 5px 4px 0 6px;
	height: 54px;
	margin-right: 11px;
	font-size: 108%;
	font-weight: bold;
}
.casestudy #casestudyInnerLink li:nth-child(3n) {
  margin-right: 0;
}
.casestudy #casestudyInnerLink li a {
	display: block;
	height: 36px;
	padding: 12px 20px 0 20px;
	text-decoration: none;
}
.casestudy #casestudyInnerLink li a:hover {
	text-decoration: underline;
}
.casestudy #casestudyInnerLink li a.multi-line {
	height: 40px;
	padding-top: 8px;
	line-height: 1.25;
}


/* 各業種ブロックの指定 */
.casestudy #main .group {
	width: 700px;
}

/* お客様 大 */
.casestudy .imageUnit {
	border-bottom: 1px dotted #ddd;
	margin-bottom: 25px;
	padding-bottom: 25px;
	zoom: 1;
}
.casestudy .imageUnit:after {
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}
.casestudy .imageUnit .img {
	float: left;
	width: 203px;
	text-align: center;
}
.casestudy .imageUnit .textArea {
	margin-left: 225px;
}
.casestudy .imageUnit .textArea .text a {
	color :#df8126;
	font-size: 160%;
	font-weight: bold;
  text-decoration: none;
  border-bottom: 1px solid #df8126;
}
.casestudy .imageUnit .textArea .company-name {
	padding-bottom: 3px;
}


/* お客様 小 */
.casestudy .listUnit {
	margin-bottom: 45px;
}
.casestudy .listUnit ul {
	zoom: 1;
	margin-bottom: 25px;
	margin-right: -16px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
.casestudy .listUnit ul:after {
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}
.casestudy .listUnit li {
	float: left;
	width: 163px;
	text-align: center;
	margin-right: 16px;
	font-size: 85%;
	min-height: 130px;
}
.casestudy .listUnit .img {
	margin-bottom: 5px;
}
.casestudy .listUnit .img img {
	width: 150px;
}

.casestudy .imageUnit .textArea2 {
margin-left: 0px;
}
.casestudy .imageUnit .textArea2 .text a {
	color :#df8126;
	font-size: 160%;
	font-weight: bold;
  text-decoration: none;
  border-bottom: 1px solid #df8126;
}
.casestudy .imageUnit .textArea2 .company-name {
	padding-bottom: 3px;
}

p.intro2 {
	width:702px;
	float:none;
	margin-bottom:25px;
	font-size:117%;
}

p.intro2 strong{
	color:#0092d7;
	font-size:125%;
}


/* ===================================================================
 lastmodified :15/7/8
=================================================================== */

#article.article_index{
	width:100%;
}

#article .inner{
	width:962px;
	margin:0 auto;
}

#main {
  clear: both;
}

#logo-group {
  border-bottom: 1px solid #cde1ec;
  padding-bottom: 30px;
}

#logo-group h2 {
  float: left;
}

#logo-group .logo-group_count {
  float: right;
  background: url(../casestudy/img/index/bg-pagetop_text.gif) left top no-repeat;
  padding-left: 40px;
}

#logo-group ul {
  clear: both;
}
#logo-group ul:after {
  content:".";display:block;visibility:hidden;height:0.1px;font-size:0.1em;line-height:0;clear:both;
}

#logo-group ul li {
  float: left;
  display: table;
}

#logo-group ul.logo-group_first li {
  margin: 46px 0 0 70px;
  height: 63px;
  line-height: 63px;
  layout-grid-line: 63px;
}

#logo-group ul.logo-group_second li {
  margin: 36px 0 0 100px;
  height: 61px;
  line-height: 61px;
  layout-grid-line: 61px;
}

#logo-group ul.logo-group_third li{
	margin-left: 78px;
}

#logo-group ul li.first {
  margin-left: 0;
}

#logo-group ul li a {
  width: 100%;
  display: table-cell;
  text-align: center;
  vertical-align : middle;
  zoom : 1;
}

#logo-group ul.logo-group_first li a {
  height: 63px;
  layout-grid-line: 63px;
}

#logo-group ul.logo-group_second li a {
  height: 61px;
  layout-grid-line: 61px;
}

*:first-child+html #logo-group ul li a{/* IE 7 */
  display: inline;
}

#logo-group ul li a img {
  vertical-align : middle;
}

#logo-group ul.logo-group_first li a img {
  line-height: 63px;
  layout-grid-line: 63px;
}

#logo-group ul.logo-group_second li a img {
  line-height: 61px;
  layout-grid-line: 61px;
}

#logo-group ul li:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  -moz-opacity: 0.6;
  opacity: 0.6;
  zoom: 1.0;
}

.section ul.mt_middle_list {
	margin-left:50px;

}

.section ul.mt_middle_list li {
	margin-left:20px;

}

.casestudy div.local_nav ul li span:before {
  display: none;
}

/* ===================================================================
 200612 詳細ページCTA追加
=================================================================== */
.conversion_block {
  margin: 60px 0;
  border: 2px solid #fccf00;
}

.conversion_block_inner {
  max-width: 546px;
  margin: 0 auto;
  padding: 45px 15px 44px;
}

.casestudy #article #main .conversion_block_title {
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  background: none;
  padding: 0;
}

.conversion_block_text {
  margin-bottom: 30px;
  font-size: 14px;
  color: #333333;
  line-height: 1.8;
}

#article .section .conversion_block_anchor {
  max-width: 420px;
  margin: 0 auto;
  display: block;
  justify-content: center;
  align-items: center;
  background-color: #fccf00;
  border-radius: 35px;
  color: #000000;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);
  font-size: 18px;
  text-align: center;
}

#article .section .conversion_block_anchor small{
	display: block;
	padding-top: 4px;
}

.section .conversion_block_anchor::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-color: #000000;
  border-style: solid;
  border-width: 0;
  transform: rotate(45deg);
  border-top-width: 2px;
  border-right-width: 2px;
  margin-top: -7px;
  right: 18px;
  transition: 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);
}

#article .conversion_block_anchor:hover {
  background-color: #0054ff;
  color: #fff;
  transition: 0.6s;
}

.section .conversion_block_anchor:hover::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-color: #fff;
  border-style: solid;
  border-width: 0;
  transform: rotate(45deg);
  border-top-width: 2px;
  border-right-width: 2px;
  margin-top: -7px;
}


/* ===================================================================
業種別一覧ページ メイン画像
=================================================================== */
.hero_casestudy {
border-bottom: 1px solid #dddddd;
margin-bottom: 40px;
color: #333333;
}
.hero_casestudy_inner {
width: 962px;
height: 270px;
margin:0 auto;
display: flex;
flex-direction: column;
justify-content: center;
background: url(/zac/casestudy/img/share/bg-casestudy_archive.png) no-repeat center center;
background-size: 100% auto;
}
.hero_casestudy_title {
font-size: 285%;
font-weight: normal;
}
.hero_casestudy_description {
margin-top: 32px;
margin-bottom: 0;
font-size: 130%;
}
#article h1.hero_casestudy_title {
margin-bottom: 0;
}

/* ===================================================================
202012
h1改善
=================================================================== */
#article.each_article h1{
  font-size: 24px;
  color: #134999;
}


/* ===================================================================
20210927
全体リニューアル
=================================================================== */
.sp_appear {
  display: none;
}

.casestudy_container {
  margin-top: -90px;
  padding-top: 90px;
}

.casestudy_inner {
  box-sizing: border-box;
  max-width: 1010px;
  margin: 0 auto;
  padding: 0 15px;
}

.casestudy #topic_path {
  width: 100%;
}

.casestudy_lead {
  height: 270px;
  background: url(../casestudy/img/index/bg-lead@2x.png) no-repeat center center /cover;
}

.casestudy_lead .casestudy_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.casestudy_lead_text {
  margin-bottom: 0;
  font-size: 20px;
  letter-spacing: 0.05em;
  color: #ffffff;
  text-align: left;
}
@media screen and (max-width: 1000px) {
  .casestudy_lead_text {
    font-size: 16px;
    line-height: calc(24 / 16);
  }
}

.casestudy_lead_main {
  display: inline-flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 48px;
}
@media screen and (max-width: 1000px) {
  .casestudy_lead_main {
    font-size: 36px;
    line-height: calc(46 / 36);
  }
}

#article h1.casestudy_title {
  display: inline;
  margin-bottom: 0;
  font-weight: normal;
}

.casestudy_lead_main .-yellow {
  font-weight: bold;
  color: #fccf00;
}

.casestudy_lead_dl {
  flex-shrink: 0;
  width: 335px;
}
@media screen and (max-width: 1000px) {
  .casestudy_lead_dl {
    width: 300px;
  }
}

.casestudy_lead_dl_anchor {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  border-radius: 999px;
  background-color: #fccf00;
  font-size: 16px;
  text-decoration: none;
  position: relative;
  transition: 0.3s ease-in;
}

.casestudy_lead_dl_anchor::after {
  display: block;
  width: 8px;
  height: 16px;
  background: url(../other/img/zeisei-2/ico-arow_right_blue.png) no-repeat center center /contain;
  content: '';
  position: absolute;
  top: calc(50% - 8px);
  right: 20px;
}

.casestudy_lead_dl_anchor:hover {
  background-color: #ffffff;
  text-decoration: none;
}

.casestudy .section {
  width: 100%;
}

.section-img {
  overflow: hidden;
  margin-top: 60px;
  margin-bottom: 60px;
}

.slide-img {
  display: flex;
}

.slide-img .slide-list {
  flex: 0 0 2900px;
  display: flex;
  flex-wrap: wrap;
}
.slide-img .slide-list li {
  /* flex: 0 0 117px; */
  display: flex;
  align-items: center;
  height: 80px;
  margin-bottom: 20px;
  margin-right: 20px;
  justify-content: center;
}
.slide-img .slide-list li:nth-child(22),
.slide-img .slide-list li:nth-child(23),
.slide-img .slide-list li:nth-child(24),
.slide-img .slide-list li:nth-child(25),
.slide-img .slide-list li:nth-child(26),
.slide-img .slide-list li:nth-child(27),
.slide-img .slide-list li:nth-child(28),
.slide-img .slide-list li:nth-child(29),
.slide-img .slide-list li:nth-child(30),
.slide-img .slide-list li:nth-child(31),
.slide-img .slide-list li:nth-child(32),
.slide-img .slide-list li:nth-child(33),
.slide-img .slide-list li:nth-child(34),
.slide-img .slide-list li:nth-child(35),
.slide-img .slide-list li:nth-child(36),
.slide-img .slide-list li:nth-child(37),
.slide-img .slide-list li:nth-child(38),
.slide-img .slide-list li:nth-child(39),
.slide-img .slide-list li:nth-child(40),
.slide-img .slide-list li:nth-child(41),
.slide-img .slide-list li:nth-child(42) {
  transform:translateX(-69px);
}
.slide-img .slide-list li img {
  width: auto;
  max-height: 100%;
}

@keyframes left {
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-800px, 0, 0);
  }
}

.casestudy_tab_list {
  display: flex;
  justify-content: space-between;
  max-width: 818px;
}

.casestudy_tab_item {
  width: calc((100% - 18px) / 4);
}

.casestudy_tab_btn {
  display: block;
  width: 100%;
  height: 50px;
  border: none;
  background-color: #00349d;
  font-size: 20px;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.casestudy_tab_btn:hover {
  background-color: #0054ff;
}

.casestudy_tab_btn.-active {
  background-color: #f3f5fa;
  color: #00349d;
  cursor: default;
}

.casestudy_tab_block {
  display: none;
  padding: 40px;
  background-color: #f3f5fa;
}

.casestudy_tab_block.-active {
  display: block;
}

.casestudy_filter_list {
  display: flex;
  flex-wrap: wrap;
}

.casestudy_filter_item {
  width: calc((100% - 12px) / 3);
  box-sizing: border-box;
  margin-bottom: 6px;
}

.casestudy_filter_item:not(:nth-child(3n)) {
  margin-right: 6px;
}

.casestudy_filter_input {
  display: none;
}

.casestudy_filter_label {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ffffff;
  background-color: #ffffff;
  font-size: 16px;
  color: #000000;
  cursor: pointer;
}

.casestudy_filter_label::selection {
  display: none;
}

.casestudy_filter_label:hover {
  border: 1px solid #d3def1;
}

.casestudy_filter_label::before {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 2px;
  box-sizing: border-box;
  border: 1px solid #cccccc;
  content: '';
}

.casestudy_filter_label.-radio::before {
  border-radius: 50%;
}

.casestudy_filter_input:checked + .casestudy_filter_label::before {
  border: none;
  background: #00349d url(../casestudy/img/index/ico-check_s.svg) no-repeat center center;
}

.casestudy_filter_search {
  width: 300px;
  margin: 35px auto 0;
}

.casestudy_filter_search_button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  border-radius: 999px;
  border: none;
  background-color: #fccf00;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.casestudy_filter_search_button:hover {
  background-color: #0054ff;
  color: #ffffff;
}

.casestudy_result {
  margin-top: 80px;
}

.casestudy_result_list {
  display: flex;
  flex-wrap: wrap;
}

.casestudy_result_item {
  width: calc((100% - 50px) / 3);
}

.casestudy_result_item-enter-active,
.casestudy_result_item-leave-active,
.casestudy_result_item-move {
  transition: opacity 0.25s, transform 0.5s;
}

.casestudy_result_item-leave-active {
  position: absolute;
}

.casestudy_result_item-enter {
  opacity: 0;
  transform: translateY(30px);
}

.casestudy_result_item-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

.casestudy_result_item:not(:nth-child(3n)) {
  margin-right: 25px;
}

.casestudy_result_item:not(:nth-child(-n + 3)) {
  margin-top: 25px;
}

.casestudy_result_item_anchor {
  display: block;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  background-color: #ffffff;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.casestudy_result_item_anchor:hover {
  text-decoration: none;
  opacity: 0.7;
}

.casestudy_result_item_thumb_image {
  width: 100%;
  height: auto;
}

.casestudy_result_item_logo {
  padding-bottom: calc((176 / 310) * 100%);
  position: relative;
  overflow: hidden;
}

.casestudy_result_item_logo_image {
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.casestudy_result_item_noimage {
  padding-bottom: calc((176 / 310) * 100%);
  position: relative;
  background-color: #f2f2f2;
}

.casestudy_result_item_noimage_text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #a3a3a3;
  position: absolute;
  top: 0;
  left: 0;
}

.casestudy_result_item_inner {
  padding: 24px;
}

.casestudy_result_item_status {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.casestudy_result_item_status_item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 26px;
  margin: 0 5px 5px 0;
  padding: 0 10px;
  border-radius: 4px;
  background-color: #000000;
  font-size: 12px;
  color: #ffffff;
}

.casestudy_result_item_status_item.-new {
  background-color: #eb1760;
}

.casestudy_result_item_status_item.-pickup {
  background-color: #5dd1a2;
}

.casestudy_result_item_status_item.-interview {
  background-color: #00aad9;
}

.casestudy_result_item_desc {
  margin: 0 0 10px;
  font-size: 16px;
  color: #000000;
  line-height: calc(25 / 16);
}

.casestudy_result_item_title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #000000;
}

.casestudy_result_item_tag {
  display: flex;
  flex-wrap: wrap;
  margin: 24px 0 -5px;
}

.casestudy_result_item_tag_item {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 26px;
  margin: 0 5px 5px 0;
  padding: 0 9px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid #00349d;
  color: #00349d;
}

.casestudy_result_more {
  margin: 80px auto 0;
  max-width: 300px;
}

.casestudy_result_more_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background-color: #00349d;
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.casestudy_result_more_button:hover {
  background-color: #0054ff;
}

.casestudy_result_nothing {
  display: none;
  align-items: center;
  justify-content: center;
  height: 200px;
}

.casestudy_result_nothing.-active {
  display: flex;
}

.casestudy_result_nothing_text {
  font-size: 18px;
  font-weight: 700;
  color: #000000;
}

.casestudy_popular {
  display: none;
  margin-top: 80px;
  padding: 70px 0 80px;
  background-color: #f3f5fa;
}

.casestudy_popular.-active {
  display: block;
}

.casestudy_popular_title {
  margin-bottom: 40px;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .05em;
  text-align: center;
}

.conversion_block {
  /* max-width: 700px; */
  margin: 60px auto;
}

.conversion_block_title {
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: #000000;
}

.conversion_block_anchor {
  max-width: 420px;
  margin: 0 auto;
  height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fccf00;
  border-radius: 35px;
  font-weight: 500;
  position: relative;
  transition: 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);
  font-size: 18px;
  text-align: center;
}

.conversion_block_anchor:link {
  color: #000000;
  text-decoration: none;
}

.conversion_block_anchor::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-color: #000000;
  border-style: solid;
  border-width: 0;
  transform: rotate(45deg);
  border-top-width: 2px;
  border-right-width: 2px;
  margin-top: -7px;
  right: 18px;
  transition: 0.3s cubic-bezier(0.13, 0.78, 0.38, 0.98);
}

.conversion_block_anchor:hover::before {
  border-color: #ffffff;
}


#article.casestudy_detail_article {
  width: 100%;
  max-width: 980px;
  padding: 0 15px;
  box-sizing: border-box;
}

.casestudy_detail_header {
  margin-bottom: 40px;
}

#article .casestudy_detail_title {
  margin-bottom: 0;
  font-size: 34px;
  font-weight: 500;
  color: #000000;
  line-height: calc(45 / 34);
}

.casestudy_detail_tag {
  margin-top: 15px;
}

.casestudy_detail_tag_item {
  display: inline-flex;
  align-items: center;
  height: 26px;
  margin-bottom: 5px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #00349d;
  font-size: 12px;
  color: #00349d;
}

.casestudy_detail_tag_item:not(:only-child) {
  margin-right: 3px;
}

#article #main.casestudy_detail_main {
  width: 100%;
  float: none;
  color: #000000;
}

#article #main.casestudy_detail_main img {
  max-width: 100%;
  height: auto;
}

.casestudy_detail_intro {
  display: flex;
  margin-bottom: 15px;
}

.casestudy_detail_intro.-no_copy {
  justify-content: center;
}

#article #main .casestudy_detail_intro_title {
  padding-left: 0;
  background: none;
  font-size: 30px;
  font-weight: 500;
  line-height: calc(45 / 30);
  color: #00349d;
}

.casestudy_detail_intro_desc {
  margin-top: 40px;
  font-size: 16px;
  color: #000000;
  line-height: calc(28 / 16);
  text-align: left;
}

.casestudy_detail_intro_logo {
  width: 100%;
  max-width: 300px;
  flex-shrink: 0;
  margin-left: 30px;
}

.casestudy_detail_intro.-no_copy .casestudy_detail_intro_logo {
  margin-left: 0;
}

.casestudy_detail_intro_logo_image {
  max-width: 100%;
  height: auto;
}

.casestudy #article #main h3 {
  width: 100%;
  padding: 0 0 0 15px;
  box-sizing: border-box;
  background: none;
  font-size: 26px;
  font-weight: 400;
  color: #00349d;
  position: relative;
}

.casestudy #article #main h3::before {
  display: block;
  width: 3px;
  height: 65%;
  background-color: #00349d;
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.casestudy div.agendaHeadline h3 strong {
  padding-left: 0;
  font-weight: 400;
}

.casestudy div.agenda {
  width: 100%;
  background: none;
}

.casestudy #article #main .agenda h3 {
  padding: 0 0 8px 0;
  font-size: 20px;
}

.casestudy #article #main .agenda h3::before {
  width: 100%;
  height: 3px;
  top: auto;
  bottom: 0;
}

.casestudy #article #main .agenda h3 strong {
  padding-left: 0;
  font-weight: 700;
}

.casestudy_detail_article h4 {
  font-size: 22px;
  font-weight: 700;
  line-height: calc(28 / 22);
  color: #000000;
}

.casestudy dl.outline {
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d8d8d8;
}

.casestudy dl.outline dt {
  width: 178px;
  color: #00349d;
}

.casestudy dl.outline dd {
  width: calc((100% - 5px) - 178px);
}

.casestudy_detail_point {
  margin: 60px 0;
  counter-reset: pointCount;
}

.casestudy #article #main h3.casestudy_detail_point_title {
  margin-bottom: 30px;
  padding: 0;
  font-size: 36px;
  font-weight: 700;
  text-align: center;
}

.casestudy #article #main h3.casestudy_detail_point_title::before {
  display: none;
}

.casestudy_detail_point_zac_logo {
  margin: 0 15px;
}

.casestudy_detail_point_block {
  padding: 25px 40px 25px 130px;
  border-radius: 8px;
  background-color: #00349d;
  color: #ffffff;
  counter-increment: pointCount;
}

.casestudy_detail_point_block:not(:first-child) {
  margin-top: 10px;
}

.casestudy_detail_article .casestudy_detail_point_block_title {
  margin-bottom: 12px;
  font-size: 32px;
  font-weight: 500;
  color: #ffffff;
  position: relative;
}

.casestudy_detail_article .casestudy_detail_point_block_title::before {
  display: flex;
  align-items: center;
  width: 112px;
  height: 38px;
  padding-left: 15px;
  box-sizing: border-box;
  border-radius: 0 999px 999px 0;
  background-color: #ffffff;
  font-size: 22px;
  color: #00349d;
  content: 'Point.' counter(pointCount);
  position: absolute;
  left: -130px;
}

.casestudy_detail_article .casestudy_detail_point_block_title .-yellow {
  color: #fccf00;
}

.casestudy_detail_point_block_text {
  margin: 0;
  font-size: 18px;
  line-height: calc(32 / 18);
  text-align: left;
}

.dialog_name {
  color: #00349d;
}

[v-cloak] {
  display: none;
}

.casestudy em{
	color: inherit;
  font-weight: inherit;
}
.casestudy .text_emphasis{
	box-shadow: inset 0 -7px 0 0 #fde780;
}

.casestudy .text_underline{
	box-shadow: inset 0 -7px 0 0 #cbcbcb;
}

@media screen and (max-width: 767px) {
  .sp_appear {
    display: block;
  }

  .casestudy {
    padding-top: 50px;
  }

  .casestudy_container {
    margin-top: -60px;
    padding-top: 60px;
  }

  .casestudy_inner {
    width: 100%;
  }

  .casestudy #topic_path {
    margin-bottom: 20px;
  }

  .casestudy_lead {
    height: auto;
    padding: 30px 0;
    background: url(../casestudy/img/index/bg-lead_sp@2x.png) no-repeat center center /cover;
  }

  .casestudy_lead .casestudy_inner {
    display: block;
  }

  .casestudy_lead_content,
  .casestudy_lead_text {
    text-align: center;
  }

  .casestudy_lead_main {
    margin-bottom: 15px;
  }

  #article h1.casestudy_title {
    display: block;
    width: 100%;
  }

  .casestudy_lead_dl {
    width: 100%;
    max-width: 300px;
    margin: 24px auto 0;
  }

  .section-img {
    margin-top: 30px;
    margin-bottom: 40px;
  }

  .slide-img-sp {
    display: flex;
  }
  .slide-img-sp .slide-list-sp {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 1800px;
  }
  .slide-img-sp .slide-list-sp li {
    flex: 0 0 103px;
    display: flex;
    align-items: center;
    height: 70px;
    margin-bottom: 20px;
    margin-right: 20px;
    justify-content: center;
  }
  .slide-img-sp .slide-list-sp li:nth-child(15),
  .slide-img-sp .slide-list-sp li:nth-child(16),
  .slide-img-sp .slide-list-sp li:nth-child(17),
  .slide-img-sp .slide-list-sp li:nth-child(18),
  .slide-img-sp .slide-list-sp li:nth-child(19),
  .slide-img-sp .slide-list-sp li:nth-child(20),
  .slide-img-sp .slide-list-sp li:nth-child(21),
  .slide-img-sp .slide-list-sp li:nth-child(22),
  .slide-img-sp .slide-list-sp li:nth-child(23),
  .slide-img-sp .slide-list-sp li:nth-child(24),
  .slide-img-sp .slide-list-sp li:nth-child(25),
  .slide-img-sp .slide-list-sp li:nth-child(26),
  .slide-img-sp .slide-list-sp li:nth-child(27),
  .slide-img-sp .slide-list-sp li:nth-child(28) {
    transform:translateX(-62px);
  }
  .slide-img-sp .slide-list-sp li img {
    height: 70px;
  }

  .casestudy_tab {
    width: calc(100% + 30px);
    margin: 0 -15px;
  }

  .casestudy_tab_item {
    width: calc((100% - 3px) / 4);
  }

  .casestudy_tab_btn {
    height: 44px;
    font-size: 16px;
  }

  .casestudy_tab_block {
    padding: 15px 15px 30px;
  }

  .casestudy_filter_item {
    width: calc((100% - 5px) / 2);
    margin-bottom: 5px;
  }

  .casestudy_filter_item:not(:nth-child(3n)) {
    margin-right: 0;
  }

  .casestudy_filter_item:not(:nth-child(2n)) {
    margin-right: 5px;
  }

  .casestudy_filter_label {
    font-size: 14px;
    line-height: calc(18 / 14);
  }

  .casestudy_filter_label:hover {
    border-color: #ffffff;
  }

  .casestudy_filter_label::before {
    margin-right: 6px;
  }

  .casestudy_filter_search {
    width: 100%;
    max-width: 300px;
    margin-top: 25px;
  }

  .casestudy_result {
    margin-top: 30px;
  }

  .casestudy_result_list {
    display: block;
  }

  .casestudy_result_item {
    width: 100%;
  }

  .casestudy_result_item:not(:nth-child(3n)) {
    margin-right: 0;
  }

  .casestudy_result_item:not(:nth-child(-n + 3)) {
    margin-top: 0;
  }

  .casestudy_result_item:not(:first-child) {
    margin-top: 15px;
  }

  .casestudy_result_nothing {
    height: 100px;
  }

  .casestudy_result_nothing_text {
    font-size: 14px;
  }

  .casestudy_popular {
    margin-top: 60px;
    padding: 40px 0 50px;
  }

  .casestudy_popular_title {
    margin-bottom: 35px;
    font-size: 26px;
    letter-spacing: inherit;
  }

  .conversion_block_anchor {
    height: 60px;
    font-size: 16px;
  }

  .conversion_block_anchor::before {
    width: 10px;
    height: 10px;
  }

  #article .casestudy_detail_title {
    margin-bottom: 15px;
    font-size: 28px;
    line-height: calc(42 / 28);
  }

  .casestudy_detail_intro {
    flex-direction: column;
    align-items: center;
  }

  .casestudy_detail_intro_main {
    order: 1;
  }

  #article #main .casestudy_detail_intro_title {
    font-size: 24px;
    line-height: calc(36 / 24);
  }

  .casestudy_detail_intro_desc {
    margin-top: 30px;
  }

  .casestudy_detail_intro_logo {
    margin: 0 0 20px 0;
    order: 0;
  }

  .casestudy #article #main h3 {
    font-size: 20px;
    line-height: calc(27 / 20);
  }

  .casestudy #article #main h3::before {
    height: 85%;
  }

  .casestudy .mt-image-right,
  .casestudy .mt-image-left {
    width: 100%;
    height: auto;
    margin: 10px 0 30px !important;
    float: none !important;
  }

  .casestudy_detail_point {
    margin: 40px 0;
  }

  .casestudy #article #main h3.casestudy_detail_point_title {
    margin-bottom: 20px;
    font-size: 20px;
    line-height: calc(38 / 20);
  }

  .casestudy_detail_point_zac_logo {
    width: 43px;
    height: auto;
    margin: 0 10px;
    vertical-align: middle;
  }

  .casestudy_detail_point_block {
    padding: 20px 15px 25px 96px;
  }

  .casestudy_detail_article .casestudy_detail_point_block_title {
    font-size: 24px;
  }

  .casestudy_detail_article .casestudy_detail_point_block_title::before {
    width: 84px;
    height: 29px;
    padding-left: 10px;
    font-size: 17px;
    left: -96px;
  }

  .casestudy_detail_point_block_text {
    width: calc(100% + 81px);
    margin-left: -81px;
    font-size: 16px;
    line-height: calc(28 / 16);
  }

  .section dl.outline dt,
  .casestudy dl.outline dd {
    width: 100%;
    float: none;
  }

  .casestudy dl.outline dd {
    margin-left: 0;
  }
}