@charset "utf-8";

/* ****************************************************************************

　目次

-------------------------------------------------------------------------------

　00. file import　　！！！インポートファイルは一番初めに記述のこと！！！
　01. 基本
  

******************************************************************************* */
/*
12px    0.75rem
14px    0.875rem
16px    1rem
18px    1.125rem
20px    1.25rem
22px    1.375rem
24px    1.5rem
26px    1.625rem
28px    1.75rem
30px    1.875rem
32px    2rem
*/

/* ==

　00. file import

=============================================================================== */
/* Noto Sans JP */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&subset=japanese");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

/* ==

　01. 基本

=============================================================================== */
body {
	font-family: 'Noto Sans JP', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", Arial, Helvetica, sans-serif;
}
.container{
	min-width:980px;
	font-size:1rem;
	overflow: hidden;
}
.topicPath{background:#5E5E5E;}
.topicPath ul {
	display: flex;
	align-items: center;
	max-width: 1240px;
	height: 50px;
	margin: 0 auto;
	padding: 0 10px;
}
.topicPath ul li,
.topicPath ul li a {
	font-size:0.75rem;
	color:#fff;
}
.topicPath ul li+li::before {
	content: "　＞　";
	font-size:0.5rem;
}


/* container */
.l-container{
max-width:1260px;
width:100%;
margin:0 auto;
padding:0 10px;
box-sizing: border-box;
}

/* main visual */
.casestudy-mainVisual{
background:#000;
color:#fff;
padding:40px 0 50px;
}
.casestudy-mainVisual__category{
font-size:0.8125rem;
letter-spacing:.12em;
margin-bottom:14px;
}
.casestudy-mainVisual__category__ico{
background:#555;
color:#fff;
border-radius: 4px;
padding:3px 10px;
line-height: 1;
font-size:0.875rem;
}
.casestudy-mainVisual__title{
font-size:2.125rem;
line-height:1.5;
font-weight:700;
margin-bottom:10px;
}
.casestudy-mainVisual__txt{
margin-bottom:10px;
}
.casestudy-mainVisual__location{
position: relative;
opacity:.8;
margin-bottom:40px;
padding-bottom:40px;
}
.casestudy-mainVisual__location::after{
content:"";
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:200vw;
height:1px;
background:#7f7f7f;
}
.casestudy-mainVisual__image:last-child{
	overflow: hidden;
	margin-top:20px;
}

.casestudy-mainVisual__image img{
width:100%;
display:block;
}

.casestudy-mainVisual__layout{
display:flex;
align-items:flex-start;
gap:40px;
}
.casestudy-mainVisual__photo{
flex:0 0 340px;
}
.casestudy-mainVisual__photo img{
max-width:100%;
width:auto;
height:auto;
display:block;
margin:0 auto;
}
.casestudy-mainVisual__info{
flex:1;
}
.casestudy-mainVisual__sectionLabel{
font-size: 0.9375rem;
font-weight: 700;
color: #fff;
margin-bottom: 5px;
font-family: "Inter", sans-serif;
}
.casestudy-mainVisual__spec-tit{
	font-weight: 600;
	font-size:1.125rem;
}
.casestudy-mainVisual__spec ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
	line-height:1.4;
}
.casestudy-mainVisual__spec li {
  display: inline-flex;
	padding-right:15px;
	font-size:1rem;
}
.casestudy-mainVisual__spec .label {
  font-weight: 600;
}
.casestudy-mainVisual__lead{
font-size:2rem;
margin-bottom:24px;
line-height:1.4;
}
.casestudy-mainVisual__detail p{
margin-bottom:6px;
}





/* section */
.casestudy-section{
margin-top:60px;
padding:20px 0 0;
border-top:1px solid #D9D9D9;
}
.casestudy-overview{
margin-top:40px;
}
.casestudy-approach-first{
	margin-top:0;
}

.casestudy-sectionLabel{
font-size:0.9375rem;
font-weight: 700;
color:#000;
margin-bottom:18px;
font-family: "Inter", sans-serif;
}
.casestudy__heading--lg{
font-size:2rem;
line-height:1.6;
font-weight:700;
margin-bottom:22px;
}
.casestudy__heading{
font-size:1.5rem;
line-height:1.6;
font-weight:700;
margin-bottom:20px;
}





/* overview */
.casestudy-overview__spec ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.casestudy-overview__spec li {
  display: inline-flex;
	padding-right:15px;
}
.casestudy-overview__spec .label {
  font-weight: 600;
}
.casestudy-layout{
display:flex;
gap:60px;
flex-wrap: wrap;
}
.casestudy-layout__media{
flex:1;
}
.casestudy-layout__body{
flex:0 0 49%;
}

/* gallery */
.casestudy-approach__gallery{
display:grid;
gap:12px;
margin-top:20px;
grid-template-columns:1fr;
}
.casestudy-approach__gallery p span{
display:block;
font-size:0.75rem;
margin-top:5px;
}
.casestudy-approach__gallery img{
max-width:100%;
display:block;
}
.casestudy-approach__gallery--grid{
grid-template-columns:1fr 1fr;
}

/* text */
.casestudy-text,
.casestudy-numlist,
.casestudy-img{
margin-top:20px;
}
.casestudy-text:first-child{
margin-top:45px;
}
.casestudy-layout__body-v2 .casestudy-text:first-child{
margin-top:10px;
}
.casestudy-img{
	text-align: center;
}
.casestudy-img img{
	max-width:100%;
	height:auto;
}
.casestudy-numlist {
  list-style: none;
  counter-reset: num;
}

.casestudy-numlist li {
  counter-increment: num;
	text-indent: -1.45em;
	padding-left:1.45em;
}

.casestudy-numlist li::before {
  content: "(" counter(num) ") ";
}



/* client */
.casestudy-clientVoice__profile{
display:flex;
align-items:center;
gap:15px;
margin-top:20px;
}
.casestudy-clientVoice__img img{
width:100px;
height:100px;
border-radius:50%;
border:1px solid #efefef;
}
.casestudy-clientVoice__position{
color:#000;
}
.casestudy-clientVoice__position span{
display: block;
font-size:0.875rem;
}


/* ケーススタディ・事例 */

/* list */
.casestudy-cardList{
display:flex;
gap:40px;
list-style:none;
padding:10px 0 0 0;
margin:0;
}

/* card */
.casestudy-card{
width:31.13%;
background:#fff;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}
.casestudy-card__link{
display:block;
color:inherit;
text-decoration:none;
}
.casestudy-card__image img{
width:100%;
display:block;
}
.casestudy-card__content{
padding:22px 24px 28px;
position:relative;
}

/* meta */
.casestudy-card__meta{
display:flex;
gap:10px;
align-items:center;
margin-bottom:14px;
}
.casestudy-card__category{
position: relative;
font-size:0.8125rem;
color:#777;
margin-right:10px;
}
.casestudy-card__category:after{
position: absolute;
content: " ";
top:0;
right:-10px;
height:100%;
width:1px;
background:#ccc;
}
.casestudy-card__tag{
font-size:0.8125rem;
background:#555;
color:#fff;
border-radius: 4px;
padding: 4px 10px;
line-height:1;
}

/* name */
.casestudy-card__name{
position: relative;
padding-right:20px;
font-size:1rem;
}

/* arrow */
.casestudy-card__arrow{
position:absolute;
top:50%;
right:-10px;
transform:translateY(-50%);
display:inline-block;
width:15px;
height:1px;
background:#e60012;
}
.casestudy-card__arrow::before{
content:"";
position:absolute;
right:0;
top:0;
width:5px;
height:1px;
background:#e60012;
transform:rotate(45deg);
transform-origin:right center;
}
.casestudy-card__arrow::after{
content:"";
position:absolute;
right:0;
top:0;
width:5px;
height:1px;
background:#e60012;
transform:rotate(-45deg);
transform-origin:right center;
}


/* 課題・計画のポイント */
.casestudy-challenge .casestudy-sectionLabel,
.casestudy-points .casestudy-sectionLabel{
	margin-bottom:0;
}

.media-list {
margin-top:30px;
}
.media-block {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 30px;
}

.media-block__label {
  width: 100px;
  background: #000;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
}

.media-block__content {
  flex: 1;
}

.media-block__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 10px;
}

.media-block__text {
  font-size: 1rem;
  margin: 0;
  line-height: 1.7;
}
.media-block__text-mt {
  margin-top:10px;
}

/* ギャラリー */
.casestudy-gallery{
  max-width:968px;
  margin:40px auto 0;
}
.casestudy-gallery-mb .casestudy-gallery__items{
	margin-bottom:45px;
}
.casestudy-gallery__tit{
	font-weight: 600;
	font-size:1.125rem;
	margin-bottom:10px;
}
.casestudy-gallery__text{
  font-size:1rem;
  line-height:1.8;
  margin:40px 0 20px;
}
.casestudy-gallery__items{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
}
.casestudy-gallery__items--col1{ grid-template-columns:repeat(1,1fr);}
.casestudy-gallery__items--col3{ grid-template-columns:repeat(3,1fr);}
.casestudy-gallery figcaption{
  font-size:0.875rem;
  margin-top:15px;
}

.casestudy-gallery__items + figcaption{
  margin-bottom:45px;
}
.casestudy-gallery__item img{
	max-width:100%;
	height:auto;
}


/* ご満足いただいた点 */
.casestudy-reason {
}
.casestudy-reason .l-container{
  background: #428cb0;
  color: #fff;
  padding: 40px 50px;
	box-sizing: border-box;
}
.casestudy-reason-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #88b6cd;
}
.casestudy-reason-list li {
  position: relative;
  padding-left: 1em;
  line-height: 1.8;
	font-size:1rem;
	margin-top:10px;
}
.casestudy-reason-list li::before {
  position: absolute;
  content: "・";
  left: 0;
}


/* ページネーション */
.casestudy-next{
  background:#000;
  color:#fff;
  text-align:center;
	margin-top:60px;
  padding:40px 10px;
}
.casestudy-next + .casestudy-section.casestudy-more{
  margin-top:20px;
}
.casestudy-next__label{
  font-size:0.875rem;
  margin-bottom:16px;
}
.casestudy-next__text{
  font-size:1.125rem;
  font-weight:600;
  line-height:1.8;
  margin-bottom:20px;
}
.casestudy-next__text:first-child{
  margin-bottom:0;
}
.casestudy-next__pager{
  display:flex;
  justify-content:center;
  gap:20px;
}
.pager{
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  overflow:hidden;
	transition: all .3s ease;
}
.pager:hover{
  background:#fff;
  color:#000;
}
.pager:focus{
  outline: none;
}
.pager:focus-visible{
  outline:none;
}
.pager.is-current{
  background:#fff;
  color:#000;
}