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

/*================================================
 *  オーバーライド
 ================================================*/
.caseOuter h3 {
	margin: 20px auto 10px;
	padding: 0 20px;
	font-size: 1.6em;
	line-height: 2.125;
	font-weight: 700;
	color: #fff;
	background: #6C7584;
	border: none;
}

@media screen and (max-width: 640px) {
	.caseOuter h3 { margin: 5vw auto 3vw; padding: 2vw 3vw; width: 90vw; font-size: 4vw; line-height: 1.3;
	}
}

/*================================================
 *  アンカーリンク
 ================================================*/
.anchor2{ margin: 10px auto 0; width: 100%; height: 40px; display: flex; border-left: 2px solid #989898; }
.anchor2 a{ padding-top: 5px; width: 100%; text-align: center; font-size: 1.2em; font-weight: 700;  border-right: 2px solid #989898; background:url("../img/arrowDG.svg") no-repeat center bottom; background-size: 12px 9px;}
.anchor2 a:hover{ background-color:#f3f3f3;}
#interview,#casestudy,#pickup{ padding-top: 62px;}

@media screen and (max-width: 640px) {
	.anchor2{ margin: 5vw auto 0; width: 90vw; height: auto; flex-wrap: wrap; border:none; }
	.anchor2 a{ margin-bottom: 3vw; padding-top: 0; width: 33.3%; height: 8vw; font-size: 3.5vw; border-right: 1px solid #989898; background-size: 2.25vw 1.68vw;}
	.anchor2 a:first-child,.anchor a:nth-child(5){ border-left: 1px solid #989898; }
	#interview,#casestudy,#pickup{ padding-top: 11.8vw;}
}

/*================================================
 *  ギャラリー一覧
 ================================================*/
.galleryList{ margin: 20px 0 60px; padding: 0; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.galleryDetail{ position: relative; padding: 16px; width: 368px; border:1px solid #666; background: #ECEFF5; }
.galleryDetailImg{ overflow: hidden; width: 332px; height: 176px; border:1px solid #808080; background:#fff; }
.galleryDetailImg img{ width: 336px !important; height: 176px !important; object-fit: contain;}
.galleryDetailCaption{ color: #000; margin: 3px auto 0; width: 100%; text-align: center; font-size: 1.2em;}
.galleryDetailTxt{ color: #000; margin: 0 auto ; padding: 0 0 48px 0; width: 336px; display: flex; flex-direction: column; }
.galleryDetailTxt p{ margin: 0 auto; width: 328px; font-size: 1.2em; line-height: 1.8; line-break: strict; word-wrap: break-word; overflow-wrap: break-word;}
.galleryDetailName{ margin: 0; padding: 5px 15px 0; width: 100%; font-size: 1.2em; font-weight: 700; line-height: 1.3; }
.galleryDetailTitle{ 
	color: #000; margin: 0 auto 5px; padding: 0 15px; width: 336px; height: 110px;  font-size: 1.6em; line-height: 1.5; font-weight: 700; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; border-bottom: 1px solid #666;
}
.galleryDetailBtn{ 
	position: absolute; bottom:16px; left:0; width: 100%; height: 48px; 
	display: flex; justify-content: center; align-items: center;
}
.galleryInner{ display: flex; }
p.galleryDott{ margin-bottom: 5px; text-indent:-1em; padding-left:1em; line-height: 1.5; line-break: strict; word-wrap: break-word; overflow-wrap: break-word; }
p.galleryDott:before{ content: "●"; }
.galleryHeading3 { margin: 20px 0 5px; padding: 0 0 0 10px; width: 100%; font-size: 1.8em; line-height: 1.5; font-weight: 700; border-left: 5px solid #6C7585; border-bottom: none; }
.galleryHeading3_2 { margin: 20px auto 10px; padding-left: 20px; font-size: 1.6em; line-height: 2.125; font-weight: 700; color: #fff; background: #6C7584; }

@media screen and (min-width: 640px) {
	.galleryList .galleryDetail:nth-child(n+4) { margin-top: 30px; }
}

@media screen and (max-width: 640px) {
	.galleryList{ margin: 5vw auto 10vw; width: 90vw; flex-direction: column; align-items:flex-start; }
	.galleryDetail{ margin: 0 0 5vw 0 ; padding: 4vw; width: 90vw;}
	.galleryDetailImg{ width: 81vw; height: 43vw; }
	.galleryDetailImg img{ width: 82vw !important; height: 43vw !important; }
	.galleryDetailCaption{ margin: 1vw auto 0; font-size: 3.2vw;}
	.galleryDetailTxt{ padding: 0 0 2vw 0; width: 80vw; }
	.galleryDetailTxt p{ width: 76vw; font-size: 3.5vw; }
	.galleryDetailName{ padding: 0 2vw; width: 100%; font-size: 3.2vw;}
	.galleryDetailTitle{ margin: 0 auto 2vw; padding: 1.5vw 2vw ; width: 80vw; height: auto; font-size: 4vw; }
	.galleryDetailBtn{ position: static; width: 100%; height: 10vw; }
	.galleryHeading3{ margin: 5vw auto 1.5vw; padding: 0 0 0 2vw; width: 90vw; font-size: 4.2vw; line-height: 1.3; border-left: 1.5vw solid #6C7585;}
	.galleryHeading3_2 { margin: 5vw auto 3vw; padding: 2vw 3vw; width: 90vw; font-size: 4vw; line-height: 1.3;}
}

/*================================================
 *  インタビュー
 ================================================*/
/*-- 概要 --*/
.interviewHead{ 
	margin: 30px auto; padding: 32px 37px; width: 1190px; background:#ECEFF5; border:1px solid #666;
	display: flex; flex-wrap: wrap; justify-content: space-between;
}
.interviewHead p{ color:#000;}
.interviewHeadL{ width: 630px;}
.interviewHeadR{ width: 400px; }
.interviewHeadSub{ margin: 0 0 10px; padding-left: 10px; font-size: 1.8em; line-height: 1.5; font-weight:700; color:#0F325B; border-left: 4px solid #0F325B; }
.interviewHeadL p{ font-size: 1.4em; line-height: 1.65;}
.interviewHeadlist{ margin-top: 20px; font-size: 1.4em; font-weight: 700; line-height: 1.8;}
.interviewHeadlist p{ font-size: 1em;}
.interviewHeadlist p:before{ content: "■"; color: #0F328B; margin-right: 5px; }
.interviewHeadImg1{ display: none; }
.interviewHeadImg2{ display: flex; flex-wrap: wrap; }
.interviewHeadImg4{ overflow: hidden; width: 400px; height: 177px;}
.interviewHeadImg4 img{margin-top: -10px !important; width: 400px; height: auto;}
.interviewHeadImg2 p{ margin-top: 5px; width: 33.3%; text-align: center; font-size: 1.4em; font-weight: 700;}

@media screen and (max-width: 640px) {
	.interviewHead{ margin: 5vw auto; padding: 5vw 3vw; width: 90vw; }
	.interviewHeadL{ width: 84vw;}
	.interviewHeadR{ display: none; }
	.interviewHeadSub{ margin: 0 0 3vw; padding-left: 3vw; font-size: 4.2vw; border-left: 1vw solid #0F325B; }
	
	.interviewHeadImg1{ margin-bottom: 3vw; display: flex; flex-wrap: wrap; }
	.interviewHeadImg3{ overflow: hidden; width: 84vw; height: 25vw;}
	.interviewHeadImg3 img{ margin-top: -4vw !important; width: 100% !important; height: auto;}
	.interviewHeadImg1 p{ margin-top: 3vw; width: 33.3%; text-align: center; font-size: 4.25vw; font-weight: 700; line-height: 1;}

	.interviewHeadL p{ font-size: 3.75vw;}

	.interviewHeadlist{ margin-top: 3vw; font-size: 3.7vw; }
}

/*-- 本編 --*/
.interviewOuter,.caseOuter{ margin: 30px auto 0; }
.interview{ position: relative; margin-bottom: 70px; padding-left: 234px; width: 100%; }

.interviewSub{
	margin: 0 0 25px; padding: 7px 0 7px 56px; font-size: 1.6em; line-height: 1.3; font-weight: 700; color:#fff; background: #6C7584;
}

.interviewPerson{ position: absolute; left: 0; top:0; width: 234px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.interviewPhoto{ overflow: hidden; width: 146px; height: 146px; border-radius: 50%;}
.interviewPerson p{ margin: 10px auto 0; text-align: center; font-size: 1.3em; line-height: 1.5; }

.interviewQ{ position: relative; margin: 30px 0 15px 0; padding: 0 0 0 60px; font-size: 1.4em; line-height: 1.8; font-weight: 700; }
.interviewQ::before{
	content: ''; position: absolute; left:0; top:12px; width: 52px; height: 1px; background:#0F325B;
}

.interviewA{ margin: 0 0 15px;padding-right: 62px; display: flex; justify-content: space-between; }
.interviewName{ width: 54px; font-size: 1.4em; font-weight: 700; color:#0F325B; }
.interviewA p{ width: 836px; font-size: 1.4em; line-height: 1.8; }
.interviewNameSP{ display: none; }

.interviewImgBox{ margin: 0 auto 30px 60px; padding: 20px 30px; width: 836px; border:1px solid #666; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: stretch; }
.interviewCaption{ padding-bottom: 10px; width: 100%; text-align: center; font-size: 1.2em; font-weight: 700; line-height: 1.5;}
.movie{ position: relative; overflow: hidden; margin: 10px auto; padding-bottom: 56.25%; height: 0; width: 100%; }
.movie iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.detail{ margin: 20px auto 0 auto; width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start;}

@media screen and (min-width: 641px) {
.w100{ width: 100%; }
.w90{ margin: 0; width: 90%; }
.w70{ margin: 0; width: 70%; }
.w56{ width: 56%; }
.w50{ width: 50%; }
.w44{ width: 44%; }
.w40{ width: 40%; }
.w36{ width: 36%; }
.w20{ width: 20%; }
}
.caseImgBox{ margin: 30px auto 40px; padding: 20px;border:1px solid #666; display: flex; flex-wrap: wrap; justify-content: center; }
.caseImgBox2{ padding: 20px 20px 0px 20px; display: flex; flex-wrap: wrap; justify-content: center; }
.caseCaption{ padding: 3px 0 5px !important; width: 100%; text-align: center; font-size: 1.2em; font-weight: 700; line-height: 1.5;}
.caseCaption2{ padding: 3px 0 5px !important; width: 100%; text-align: center; font-size: 1.0em; line-height: 1.5;}

.caseSub{
	margin: 50px auto 10px; padding-left: 20px; font-size: 1.6em; line-height: 2.125; font-weight: 700; color:#fff; background: #6C7584;
}
.caseSub2{ margin: 40px 0 10px; padding: 0 0 0 10px; font-size: 1.8em; font-weight: 700; border-left: 5px solid #6c7585;}
.caseOuter p{ padding-right: 62px; font-size: 1.4em; line-height: 1.8;}

.BQ{ font-size: 1.15em; font-weight: 700;}

.introImgOuter{ overflow:hidden; padding: 0; }

.introImgBox:last-child{ margin-right: 0;}
.introImgBox p{ padding: 10px 0; width: 100%; text-align: center;}
.introImg img{ width: 368px; height: 220px; object-fit: cover; max-width: 100%;max-height: 100%;}
ul.intro{ margin: 0 auto 40px 0; font-size: 1.4em;}
.inlineLogo{ margin: 0 10px; width: 45px; vertical-align: middle; }
@media screen and (min-width: 641px) {
	.introImgOuter{ margin: 30px auto 10px; width: 1190px; display: inline-block; }
	.introImgBox{ float:left; margin-right: 40px; width: 370px; height: auto; border: 1px solid #666; }
	.introImg{ width: 368px; height: 220px; overflow: hidden;}
	.caseImgBox{ width: 420px;  text-align: center;}
	.caseDialogue{ margin: 0 0 15px; width: 1190px; display: flex; justify-content: space-between; }
	.caseName{ background: #fff; width: 78px; font-size: 1.4em; font-weight: 700; color:#0F325B; }
	.caseNameSP{ display: none; }
	.caseDialogue p{ width: 1150px;}
	.BQ{line-height: 29px;}
	.caseNameBQ{line-height: 29px;}
	.detail{ width:580px;}
	.detailBox{ display: flex; align-items: center; flex-direction: column;}

}
@media screen and (max-width: 640px) {
	.interviewOuter{width: 90vw; }
	.interview{ margin-bottom: 15vw; padding-left: 0; }
	.interviewSub{ margin: 0 0 5vw; padding: 2vw; font-size: 3.9vw; line-break: strict; word-wrap: break-word; overflow-wrap: break-word;}
 	.interviewPerson{ position: static; margin: 5vw auto; width: 60vw; display: flex; flex-direction:row; justify-content: space-between; align-items: center;}
	.interviewPhoto{ overflow: hidden; width: 30vw; height: 30vw; border-radius: 50%;}
	.interviewPerson p{ margin: 0 ; width: 28vw; text-align: center; font-size: 4.8vw; font-weight: 700; line-height: 1; }

	.interviewQ{ position: relative; margin: 5vw 0 3vw 0; padding: 0 0 0 7vw; font-size: 4vw; line-height: 1.6; }
	.interviewQ::before{ top:2.5vw; width: 5vw; }
	
	.interviewA{ margin: 0 0 5vw; padding-right: 0; display: flex; justify-content: flex-start; }
	.interviewName{ display: none; }
	.interviewA p{ width: 100%; font-size: 4vw; line-height: 1.8; }
	.interviewNameSP{ display: inline-block;margin-right: 4vw; color: #0F325B; font-weight: 700;}

	.interviewImgBox{ margin: 0 auto 6vw; padding: 3vw 5vw; width: 90vw; align-items: center; }
	.interviewCaption{ padding-bottom: 3vw; font-size: 3.2vw;}
	.interviewImgBox img{ margin-bottom: 5vw;}
	.w90,.w56,.w44,.w40,.w36{ width: 100%; }
	.w20{ width: 46%; }
	.caseDialogue{ width: 100%;margin-top: 1em; }
	.caseName{background: #fff; font-size: 3.75vw; font-weight: 700; color:#0F325B; }
	.caseNameSP{ display: none; }
	.caseDialogue p{ width: auto;}
	.caseSub{ margin: 10vw auto 3vw; padding-left: 2vw; font-size: 4.5vw;}
	.caseSub2{ margin: 5vw 0 3vw; padding: 0 0 0 3vw; font-size:4vw; border-left: 2vw solid #6c7585;}
	.interviewOuter, .caseOuter{ margin: 0 5vw; width: 90vw; }
	.caseOuter p{ padding-right:0; font-size: 3.75vw; }
	
	.introImgOuter{ margin-top: 2vw; }
	.introImgBox{ border: 1px solid #666; margin-bottom: 3vw;}
	ul.intro{ margin: 0 auto 40px 0; font-size: 3.75vw;}
}

/*-- ページナビ --*/
.interviewLink,.caseLink{ display: flex; justify-content: space-between; align-items: center;}
.interviewLink{ margin: 30px 0 0 60px ; width: 836px;}
.caseLink{ margin: 30px 0 0 ; padding-right: 62px; width: 100%; display: flex; justify-content: space-between; align-items: center;}
.caseLink a{ background-color: #FFF;}

.interviewPrev,.interviewNext,.casePrev,.caseNext{ position: relative; font-size: 1.4em; line-height: 1;}
.interviewPrev,.casePrev{ margin-right: auto; padding-left: 20px; }
.interviewNext,.caseNext{ margin-left: auto; padding-right: 20px; }

.interviewPrev::before,.casePrev::before{
	content: ''; position: absolute; left:0; top:0; width:0; height:0;
	border-style:solid; border-width: 7px 12.1px 7px 0; border-color: transparent #6C7584 transparent transparent;
}
.interviewNext::after,.caseNext::after{
	content: ''; position: absolute; right:0; top:0; width:0; height:0;
	border-style:solid; border-width: 7px 0 7px 12.1px; border-color: transparent transparent transparent #6C7584;
}

@media screen and (max-width: 640px) {
	.caseLink{ margin: 10vw auto ; padding-right: 0; width: 90vw; }
	.interviewPrev,.interviewNext,.casePrev,.caseNext{ font-size: 3.75vw;}
	.interviewPrev,.casePrev{ padding-left: 5vw; }
	.interviewNext,.caseNext{ padding-right: 5vw; }
}




/*守分追記*/
 .interview{             display: flex;             justify-content: space-between;             align-items: flex-start;             padding-left: 0;         }         .interview_inner{             width: calc(100% - 234px);         }         .interviewPerson{             display: none;         }         .interviewPerson.sticky{             display: flex;         }         .sticky{                          position: sticky;             top: 62px;             left: 0;         }         @media(max-width:640px){                          .interviewPerson{                 display: flex;             }             .interviewPerson.sticky{                 display: none;             }             .interview{                 display: block;             }             .interview_inner{                 width: 100%;             }         }

#tmpl_main img.inlineLogo {
  display: inline;
  margin: inherit;
  margin-left: 10px;
  margin-right: 10px;
}