@charset "utf-8";
/* CSS Document */
/*-----------------------------
 reset
-------------------------------*/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, 
img, small, strong, sub, sup,b, i,dl, dt, dd, ol, ul, li,
 form, label,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,hgroup, menu, nav, section,
time, mark, audio, video {
margin:0;padding:0;border:0;outline:0;font-size:100%;
vertical-align:baseline;background:transparent;line-height:1.0;
}
th{font-style:normal;font-weight:normal;}
ul li,ol li{list-style:none; }
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
body {line-height:1;position:relative;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;}
nav ul {list-style:none;}
table {	border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
article, aside, figure, footer, header,hgroup, nav, section { display:block;}
img{vertical-align:bottom; display:inline-block;margin:0 auto;max-width:100%;height:auto;}
*,*::before,*::after { -webkit-box-sizing:border-box;box-sizing:border-box;}



/*-----------------------------
 common
-------------------------------*/
html {
	scroll-behavior: smooth;
}
@media (min-width:769px) {
	html {
		font-size: 19px;
	}
}
body {
	font-feature-settings: "palt";
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	color: #221815;
	font-weight: 400;
	line-height: 2;
	text-align: left;
}

#root {
	overflow: hidden;
}

.wrap {
	margin: 0 auto;
	position: relative;
	background: #FEF8F6;
}
#top .wrap {
	background: #ffffff;
}
.wrap * {
	box-sizing: border-box;
}
.wrap .mincho {
	font-family: "Yu Mincho Medium", "游明朝 Medium", YuMincho, "游明朝体", "ヒラギノ明朝 Pro W3", "MS P明朝", serif;
	font-weight: 500;
}

.contentWrap {
	max-width: 1250px;
	margin: 0 auto;
}
.contentWrap img {
	max-width: 100%;
	height: auto;
}
.wrap a,
.wrap a::before,
.wrap a::after,
.wrap a img {
	text-decoration: none;
	-webkit-transition: all 0.3s ease-out;
		 -moz-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			 -o-transition: all 0.3s ease-out;
					transition: all 0.3s ease-out;
}
.wrap a:hover {
	text-decoration: none;
}
.wrap a:hover img {
	opacity: 0.8;
}
.wrap a.txt {
	text-decoration: underline;
	color: #000;
}
.wrap a.txt:hover {
	text-decoration: none;
}

.wrap p {
	line-height: 2;
}
.wrap p + p {
	padding-top: 1.5em;
}
.wrap em {
	font-style: normal;
	letter-spacing: 0.2em;
}
.wrap sup {
	font-size: 60%;
	vertical-align: text-top;
}
.wrap p small {
	font-size: 80%;
}
.wrap .note {
	font-size: 80%;
	text-align: left;
	margin-top: 2em;
}
.wrap .note li {
	margin-left: 1em;
	text-indent: -1em;
	line-height: 1.5;
}
.wrap .txtblue {
	color: #265e9b;
}

.flex {
	display: flex;
}
.flex.btn {
	justify-content: center;
}
.flex.btn li {
	margin: 0 2%;
}
.imgArea > div {
	display: table-cell;
	vertical-align: middle;
	margin: 0;
}

.pagetop {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 90;
}
.pagetop a {
  position: relative;
  display: block;
  border-radius: 50%;
  width: 60px;
  height: 60px;
	border: #EF888F 2px solid;
	padding-top: 50px;
	padding: 0;
	text-align: center;
	color: #ffffff;
}
.pagetop a span {
	display: none;
}

.pagetop a::after, .pagetop a::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 50%;
  width: 2px;
  height: 16px;
  background-color: #EF888F;
  -webkit-transform-origin: 0 top;
  transform-origin: 0 top;
}
.pagetop a::after {
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
}
.pagetop a::before {
  -webkit-transform: rotate(-40deg);
  transform: rotate(-40deg);
}
.pagetop a:hover {
  opacity: 0.5;
}

@media (max-width:768px) {
	html {
		font-size: calc(100vw * 30 / 700); /* 700px幅-30px相当 */
	}
	.pc{
		display:none !important;
	}
	.pagetop {
		bottom: 20px;
		right: 20px;
  }
  .pagetop a {
		width: 40px;
		height: 40px;
		padding: 0;
  }
	.pagetop a span {
		display: none;
	}
  .pagetop a::after, .pagetop a::before {
		top: 12px;
		width: 1px;
		height: 16px;
  }
	.contentWrap {
		padding: 0 4.5%;
	}
	.wrap p {
		letter-spacing: 0;
	}
	.wrap em {
		letter-spacing: 0.1em;
	}
}
@media (min-width:767px) {
	.sp{
		display:none !important;
	}
}



/*-----------------------------
Header
-------------------------------*/
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
	background: rgba(255,255,255,0.5)
}
#header .role_inner {
  margin: 0 auto;
}
#header #menu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
	padding: 20px;
  max-width: 1520px;
  height: 110px;
}
#header #menu #logo {
  position: relative;
  line-height: 1;
  z-index: 120;
	max-width: 320px;
}
#header #menu .navgroup {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: 38px;
  width: 100%;
}
#header #menu ul {
  display: flex;
	align-items: center;
  justify-content: flex-end;
  max-width: 900px;
	min-width: 300px;
  width: 100%;
	margin: 0;
}
#header #menu ul li:not(:first-child) {
	margin-left: 2em;
}
#header #menu ul li a {
	color: #000;
  font-size: 1rem;
}
#header #menu ul li.bt {
	margin-top: 10%;
}
#header #menu ul li.bt a {
  font-size: 1.3rem;
	border: #000 1px solid;
	padding: 1em 1.5em;
}
#header #menu ul li a:hover {
  opacity: 0.5;
}

#header #menu #info {
  display: block;
	padding: 8% 8%;
	font-size: 0.8em;
	line-height: 1.5;
	text-align: center;
}
#header #menu #info span {
	font-size: 80%;
}
#header #menu #info img {
	height: auto;
	width: 50vw;
	margin-bottom: 2em;
}

#header #menu_sp {
  display: none;
}

@media screen and (min-width:768px) and ( max-width:970px) {
	#header #menu ul li a {
		font-size: 17px;
	}
}
@media screen and (max-width: 768px) {
  #header .role_inner {
    position: relative;
    width: auto;
  }
  #header #menu {
    position: relative;
    display: block;
    height: 80px;
  }
  #header #menu #logo {
    width: 180px;
    height: auto;
  }
  #header #menu .navgroup {
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 50px 0 0;
    height: 0;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
    z-index: 105;
  }
	.menu_open #header #menu .navgroup {
		overflow-y: scroll;
		background: #fff;
	}
  #header #menu ul {
    display: block;
    max-width: initial;
    min-width: auto;
		padding: 0 8% 5%;
  }
  #header #menu ul li {
    margin-top: 2em;
		margin-left: 0;
    text-align: left;
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
		position: relative;
  }
	#header #menu ul li::before {
		content: "";
		display: block;
		width: 8vw;
		height: 1px;
		background: #000;
		position: absolute;
		bottom: -8px;
		left: 0;
	}
  #header #menu ul li a {
    display: block;
		font-size: 5.4vw;
  }
	#header #menu ul li.bt::before {
		content: "";
		display: none;
	}
	#header #menu ul li.bt a {
		text-align: center;
		font-size: 5.4vw;
	}
  #header #menu_sp {
    position: absolute;
    display: block;
    top: 20px;
    right: 14px;
    width: 38px;
    height: 38px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    z-index: 120;
  }
  #header #menu_sp span {
    position: absolute;
    display: block;
    left: calc(50% - 14px);
    width: 28px;
    height: 1px;
    background-color: #000;
    -webkit-transition: top 0.2s 0.5s,bottom 0.2s 0.5s,-webkit-transform 0.5s;
    transition: top 0.2s 0.5s,bottom 0.2s 0.5s,-webkit-transform 0.5s;
    transition: transform 0.5s,top 0.2s 0.5s,bottom 0.2s 0.5s;
    transition: transform 0.5s,top 0.2s 0.5s,bottom 0.2s 0.5s,-webkit-transform 0.5s;
  }
  #header #menu_sp span:first-of-type {
    top: 14px;
  }
  #header #menu_sp span:last-of-type {
    bottom: 14px;
  }
  .menu_open #header {
    border-bottom: none;
  }
  .menu_open #header #menu .navgroup ul li {
    opacity: 1;
  }
  .menu_open #header #menu .navgroup ul li:nth-of-type(1) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
  }
  .menu_open #header #menu .navgroup ul li:nth-of-type(2) {
    -webkit-transition-delay: 0.35s;
    transition-delay: 0.35s;
  }
  .menu_open #header #menu .navgroup ul li:nth-of-type(3) {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }
  .menu_open #header #menu .navgroup ul li:nth-of-type(4) {
    -webkit-transition-delay: 0.45s;
    transition-delay: 0.45s;
  }
  .menu_open #header #menu .navgroup ul li:nth-of-type(5) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
  .menu_open #header #menu .navgroup ul li:nth-of-type(6) {
    -webkit-transition-delay: 0.55s;
    transition-delay: 0.55s;
  }
  .menu_open #header #menu .navgroup #toec a {
    opacity: 1;
  }
  .menu_open #header #menu_sp span {
    -webkit-transition: top 0.2s,bottom 0.2s,-webkit-transform 0.5s 0.2s;
    transition: top 0.2s,bottom 0.2s,-webkit-transform 0.5s 0.2s;
    transition: top 0.2s,bottom 0.2s,transform 0.5s 0.2s;
    transition: top 0.2s,bottom 0.2s,transform 0.5s 0.2s,-webkit-transform 0.5s 0.2s;
  }
  .menu_open #header #menu_sp span:first-of-type {
    top: 19px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .menu_open #header #menu_sp span:last-of-type {
    bottom: 19px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
}




/*-----------------------------
Footer
-------------------------------*/
.color_bar {
	display: flex;
}
.color_bar span {
	width: 20%;
	height: 17px;
}
.color_bar span:nth-child(1) {background: #8FC31F;}
.color_bar span:nth-child(2) {background: #2EA7E0;}
.color_bar span:nth-child(3) {background: #FAC03D;}
.color_bar span:nth-child(4) {background: #BA79B1;}
.color_bar span:nth-child(5) {background: #EF888F;}
@media (max-width:768px) {
	.color_bar span {
		height: 10px;
	}
}

#footer {
	background-image: linear-gradient(90deg, rgba(141, 194, 31, 0.5), rgba(84, 194, 240, 0.5));
}
#footer .role_inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4% 6% 4%;
}
#footer .logo {
	text-align: center;
	max-width: 360px;
}
#footer #copyright {
	text-align: center;
  font-size: 0.7619rem;
	color: #000;
  letter-spacing: 0.04em;
}

@media screen and (max-width: 768px) {
	#footer .role_inner {
		display: block;
		padding: 9% 5%;
	}
	#footer .logo {
		width: 70%;
		margin: 0 auto 10%;
	}
	#footer #copyright {
		font-size: 0.7rem;
	}
}





section {
	padding: 5%;
	text-align: center;
}
section h1 {
	margin: 0 auto 2em;
	font-size: 2rem;
	letter-spacing: 0.05em;
	font-weight: 700;
	line-height: 1;
}
section h1 span {
	display: block;
	position: relative;
	padding-bottom: 1rem;
	margin-bottom: 1.4rem;
	font-family: 'Roboto', sans-serif;
	font-size: 7rem;
}
section h1 span::before {
	content: "";
	display: block;
	width: 10%;
	max-width: 80px;
	height: 2px;
	background: #000000;
	position: absolute;
	margin: auto;
	bottom: 0;
	left: 0; right: 0;
}
section h2 {
	font-size: 1.5rem;
}
section h3 {
	font-size: 1.2rem;
}

p.lead {
	font-size: 1.611rem;
	line-height: 2.2;
	margin-bottom: 2em;
}
span.line {
	border-bottom: #EB5E00 3px solid;
}
.mb20 {
	margin-bottom: 20px !important;
}
.mb50 {
	margin-bottom: 50px !important;
}
.mb100 {
	margin-bottom: 100px !important;
}

@media screen and (max-width: 768px) {
	section h1 {
		font-size: 1.2rem;
	}
	section h1 span {
		font-size: 3rem;
	}
	section h2 {
		font-size: 1.3rem;
	}
	section h3 {
		font-size: 1.1rem;
	}
	p.lead {
		font-size: 1rem;
		line-height: 2;
	}
	.mb50 {
		margin-bottom: 4% !important;
	}
	.mb50 {
		margin-bottom: 8% !important;
	}
	.mb100 {
		margin-bottom: 15% !important;
	}
}



/*-----------------------------
mv
-------------------------------*/
.mv {
	height: auto;
	background: url("../images/back_pc.svg") no-repeat;
	background-size: cover;
	margin-top: 127px;
	padding: 6% 5% 0;
}
#top .mv {
	background: url("../images/mv_top.jpg") no-repeat top 5% center;
	background-size: cover;
	padding: 2% 5% 10%;
	border-top: 60px #fff solid;
}
.mvInner {
	margin: auto;
	max-width: 1160px;
	height: 100%;
}
.mv h1 {
	width: 71%;
	max-width: 824px;
	height: auto;
	padding: 0 0 10%;
	text-align: center;
	line-height: 1;
	margin: 0 auto;
}
#top .mv h1 {
	width: 54.74%;
	max-width: 407px;
	height: auto;
	padding: 0;
	text-align: left;
	margin: -8% 0 0;
}
.mv h1 img {
	margin: 0;
}
.mv p {
	text-align: left;
	letter-spacing: 0.06em;
}

@media screen and (max-width: 768px) {
	.mv {
		background: url("../images/back_sp.svg") no-repeat;
		background-size: cover;
		margin-top: 90px;
	}
	#top .mv {
		background: url("../images/mv_top_sp.jpg") no-repeat top center;
		background-size: contain;
		border-top: none;
	}
	.mv h1 {
		width: 100%;
		padding: 24% 8%;
	}
	#top .mv h1 {
		width: 100%;
		padding: 125% 0 3%;
	}
	.mv p {
		padding: 5% 5%;
	}
}






/*-----------------------------
#ndp
-------------------------------*/
#ndp {
	background-color: #F7F9FA;
	background-image: repeating-linear-gradient(-30deg,#fff, #fff 10px,transparent 0, transparent 18px);
	/*background-image: repeating-linear-gradient(120deg, rgba(255, 255, 255, 0) 6%, 8%, rgba(247, 249, 250, 1) 8% 9%);*/
	padding: 5% 5% 8%;
}
#ndp .head p {
	font-size: 1.2rem;
	letter-spacing: 0.05em;
}
#ndp .head h2 {
	max-width: 430px;
	margin: 1em auto 2em;
}
#ndp .contentWrap {
	max-width: 870px;
}
#ndp .contentWrap ul li {
	display: flex;
	align-items: center;
	background: #F09DC1;
	padding: 1.5em 1.5em;
	margin-top: 2.3em;
	text-align: left;
	position: relative;
}
#ndp .contentWrap ul li:nth-child(1) {
	background: #C4A3CB;
	/*padding-bottom: 0.5em;*/
}
#ndp .contentWrap ul li:nth-child(1)::after {
	content: "";
	display: block;
  background: #C4A3CB;
  height: calc(tan(60deg) * 35px / 2);
  width: 40%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
	position: absolute;
	top: 105%;
	left: 0; right: 0;
	margin: auto;
}
#ndp .contentWrap ul li:nth-child(2) {
	background: #A6A9AB;
	/*padding-bottom: 0.5em;*/
}
#ndp .contentWrap ul li:nth-child(2)::after {
	content: "";
	display: block;
  background: #A6A9AB;
  height: calc(tan(60deg) * 35px / 2);
  width: 40%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
	position: absolute;
	top: 105%;
	left: 0; right: 0;
	margin: auto;
}
#ndp .contentWrap ul li .step {
	font-size: 2rem;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: 700;
	font-style: italic;
	text-align: center;
	white-space: nowrap;
	padding: 0.5em 1em 0.5em 0.5em;
}
#ndp .contentWrap ul li div:nth-child(2) {
	flex-grow: 2;
}
#ndp .contentWrap ul li h2 {
	font-size: 1.2rem;
}
#ndp .contentWrap ul li p {
	font-size: 0.8rem;
	width: 100%;
	border-top: #000 2px dotted;
	padding-top: 0.5em;
	margin: 0.5em 0 0;
}




@media screen and (max-width: 768px) {
	#ndp .contentWrap {
		width: 100%;
	}
	#ndp .head h2 {
		width: 70%;
		margin: 1em auto 2em;
	}
	#ndp .contentWrap ul li {
		display: block;
	}
	#ndp .contentWrap ul li .step {
		font-size: 2rem;
		padding: 0 0.5em 0.5em;
	}
}





/*-----------------------------
#hakken
-------------------------------*/
#top #hakken {
	padding: 5% 0;
}
#hakken .head {
	width: 870px;
	margin: auto;
}
#hakken .head h2 span {
	display: block;
	max-width: 470px;
	margin: 0 auto 10%;
}
#top #hakken .contentWrap {
	width: 870px;
	padding-top: 3em;
}
#hakken .btn.sub {
	padding: 25px 15px;
}
#hakken .btn.sub img {
	max-height: 30px;
	width: auto;
}

@media screen and (max-width: 768px) {
	#top #hakken {
		padding: 5% 0 0;
	}
	#hakken .head  {
		width: 100%;
	}
	#top #hakken .contentWrap {
		width: 100%;
		padding-top: 3em;
	}
	#hakken .head h2 {
		width: 90%;
		margin: 0 auto;
	}
	#hakken .head h2 span {
		width: 56%;
		margin: 0 auto 5%;
	}
	#hakken .contentWrap .sp figure {
		width: 60%;
		margin: auto;
	}
}





/*-----------------------------
#portrait
-------------------------------*/
#portrait {
	background: #FEF8F6;
	padding: 0 0 5%;
	scroll-margin-top: 127px;
}
#portrait .head {
	background: url("../images/back_pc.svg") no-repeat;
	background-size: cover;
	padding: 5% 5% 3%;
}
#portrait .head h2 {
	margin-bottom: 2%;
}
#portrait .head p {
	letter-spacing: 0.1em;
}
#portrait .contentWrap {
	width: 870px;
}
#portrait ul {
	padding: 5% 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#portrait ul li {
	width: 30%;
	margin-top: 3%;
	margin-right: 3%;
	text-align: center;
}
#portrait ul li figure {
	padding-right: 14%;
}
#portrait ul li a {
	color: #221815;
}
#portrait ul li div {
	font-size: 58%;
	line-height: 1.2;
	display: inline-block;
	border: #221815 1px solid;
	padding: 0 1.5em;
}
#portrait ul li div:empty {
	border: none;
	height: 12px;
}
#portrait ul li p {
	font-size: 1.1428rem;
}
#portrait ul li p span {
	display: block;
	font-size: 0.9rem;
}
#portrait ul li p.note {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 0.5238rem;
}
@media screen and (max-width: 768px) {
	#portrait {
		scroll-margin-top: 90px;
	}
	#portrait .head {
		background: url("../images/back_sp.svg") no-repeat;
		background-size: cover;
		padding: 3% 5%;
	}
	#portrait .contentWrap {
		width: 100%;
	}
	#portrait ul {
		padding: 5% 0;
		justify-content: space-between;
	}
	#portrait ul li {
		width: 49%;
		margin-top: 3%;
		margin-right: 0;
	}
	#portrait ul li p {
		font-size: 1rem;
	}
}


/*-----------------------------
casestudy
-------------------------------*/
#casestudy {
	background: #105FA8;
	& .head h2 {
		margin-bottom: 3%;
		& img {
			max-width: 550px;
		}
		@media screen and (max-width: 768px) {
			width: 80%;
			margin: 0 auto 5%;
		}
	}
	& .contentWrap {
		background: #ddd;
		border-radius: 8px;
		padding: 20px 5% 50px;
		& h2 {
			max-width: 900px;
			margin: 0 auto 30px;
		}
		& a {
			display: block;
			max-width: 700px;
			text-align: center;
			border: #105FA8 1px solid;
			color: #000;
			font-weight: 700;
			font-size: 90%;
			letter-spacing: 0.1em;
			padding: 0.8em;
			margin: 40px auto 0;
			&:hover {
				background: #9AC9F5;
			}
		}
	}
}




/*-----------------------------
feature
-------------------------------*/
#feature {
	background-color: #F5F7FB;
	background-image: repeating-linear-gradient(-45deg,#fff, #fff 60px,transparent 0, transparent 120px);
	padding: 0;
	scroll-margin-top: 127px;
}
#feature .head {
	background: #ffffff;
	padding: 8% 5%;
}
#feature h1 {
	background: url("../images/title_feature_line.svg") no-repeat bottom center;
	padding-bottom: 4%;
	margin: 0;
}
#feature .contentWrap {
	max-width: 1120px;
	text-align: left;
	padding: 0 5% 10%;
}
#feature .contentWrap .point1,
#feature .contentWrap .point2,
#feature .contentWrap .point3,
#feature .contentWrap .point4,
#feature .contentWrap .point5 {
	position: relative;
	margin-top: 15%;
}
#feature .contentWrap .point1 figure {
	width: 50%;
	position: absolute;
	top: 12%;
	left: 55%;
}
#feature .contentWrap .point2 figure {
	width: 40%;
	text-align: center;
	position: absolute;
	top: 0;
	right: 60%;
}
#feature .contentWrap .point3 figure {
	width: 50%;
	position: absolute;
	top: 0;
	left: 55%;
}
#feature .contentWrap .point4 figure {
	width: 50%;
	position: absolute;
	top: 0;
	right: 55%;
}
#feature .contentWrap .point5 figure {
	width: 50%;
	position: absolute;
	top: 0;
	left: 55%;
}
@media screen and (min-width: 1200px) {
	#feature .contentWrap .point1 figure {
		width: 60%;
		left: 65%;
	}
	#feature .contentWrap .point3 figure {
		width: 60%;
		left: 65%;
	}
	#feature .contentWrap .point4 figure {
		width: 60%;
		right: 65%;
	}
	#feature .contentWrap .point5 figure {
		width: 60%;
		left: 65%;
	}
}
@media screen and (min-width: 1460px) {
	#feature .contentWrap {
		padding: 0 0 10%;
	}
	#feature .contentWrap .point1 figure {
		width: 80%;
		left: 60%;
	}
	#feature .contentWrap .point3 figure {
		width: 80%;
		left: 60%;
	}
	#feature .contentWrap .point4 figure {
		width: 80%;
		right: 60%;
	}
	#feature .contentWrap .point5 figure {
		width: 80%;
		left: 60%;
	}
}

#feature .contentWrap .point1 figure img,
#feature .contentWrap .point3 figure img,
#feature .contentWrap .point4 figure img,
#feature .contentWrap .point5 figure img {
	width: 100%;
	max-width: none;
	height: auto;
}
#feature .contentWrap .point1 .txtbox {
	margin-right: 45%;
}
#feature .contentWrap .point2 .txtbox {
	margin-left: 50%;
}
#feature .contentWrap .point3 .txtbox {
	margin-right: 50%;
}
#feature .contentWrap .point4 .txtbox {
	margin-left: 50%;
}
#feature .contentWrap .point5 .txtbox {
	margin-right: 50%;
}
#feature .contentWrap h2 {
	font-size: 2rem;
	line-height: 1.3;
	margin-bottom: 1em;
}
#feature .contentWrap h2 small {
	font-size: 40%;
	padding-left: 2em;
}
#feature .contentWrap h2 span {
	background:linear-gradient(transparent 50%, #fff000 60%, transparent 85%);
}
#feature .contentWrap h2 img {
	max-width: 167px;
	height: auto;
}
#feature .contentWrap .point5 a {
	display: block;
	text-align: center;
	border: #105FA8 1px solid;
	background: #fff;
	color: #000;
	font-weight: 700;
	font-size: 90%;
	letter-spacing: 0.1em;
	padding: 0.3em;
}
#feature .contentWrap .point5 a:hover {
	background: #9AC9F5;
}

@media screen and (max-width: 768px) {
	#feature {
		scroll-margin-top: 90px;
	}
	#feature .contentWrap .point1 figure {
		width: 100%;
		position: static;
		margin: 8% 0 0 6%;
	}
	#feature .contentWrap .point2 figure {
		width: 50%;
		text-align: center;
		position: static;
		margin: 8% 25% 0;
	}
	#feature .contentWrap .point3 figure {
		width: 100%;
		position: static;
		margin: 8% 0 0 6%;
	}
	#feature .contentWrap .point4 figure {
		width: 100%;
		position: static;
		margin: 8% 0 0 -6%;
	}
	#feature .contentWrap .point5 figure {
		width: 100%;
		position: static;
		margin: 8% 0 0 6%;
	}
	#feature .contentWrap .point1 .txtbox,
	#feature .contentWrap .point2 .txtbox,
	#feature .contentWrap .point3 .txtbox,
	#feature .contentWrap .point4 .txtbox,
	#feature .contentWrap .point5 .txtbox {
		margin-right: 5%;
		margin-left: 5%;
	}
	#feature .contentWrap h2 {
		font-size: 1.5rem;
	}
	#feature .contentWrap h2 img {
		width: 30%;
	}
}


/*-----------------------------
#banner
-------------------------------*/
#banner {
}
#banner .contentWrap {
	max-width: 1190px;
}
#banner ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 6%;
}
#banner ul li {
	width: 49%;
}
#banner ul li a {
	display: block;
	border: #221815 3px solid;
	color: #221815;
	font-size: 1.5rem;
	text-align: center;
	padding: 2em 1em;
}
#banner ul li a:hover {
	background: #221815;
	color: #fff;
}
#banner div a {
	display: inline-block;
	margin-top: 3%;
}

@media screen and (max-width: 768px) {
	#banner ul {
		display: block;
	}
	#banner ul li {
		width: 100%;
	}
	#banner ul li a {
		font-size: 1.2rem;
	}
}


/*-----------------------------
sec01
-------------------------------*/
.sec01 {
	position: relative;
}
.sec01 figure {
	display: block;
	margin: 0 auto 2%;
	max-width: 1250px;
	text-align: center;
	padding-right: 5%;
}
.sec01 .contentWrap {
	max-width: 745px;
	text-align: left;
}
.sec01 h2 {
	max-width: 1250px;
	font-size: 1.76rem;
	text-align: center;
	line-height: 1;
	position: relative;
	margin: 0 auto 1em;
}
.sec01 h2 span {
	padding: 0 1em;
	background: #FEF8F6;
	position: relative;
	z-index: 1;
}
.sec01 h2::before {
	content: "";
	display: block;
	width: 100%;
	height: 15px;
	border-top: #000 2px solid;
	border-bottom: #000 1px solid;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.sec01 .Jobtitle {
	font-size: 1.8rem;
	letter-spacing: 0.06em;
	line-height: 1.2;
}
.sec01 .Jobtitle span {
	font-size: 1.33rem;
}
.sec01 .name {
	font-size: 2.238rem;
	letter-spacing: 0.06em;
	padding-top: 0;
}
.sec01 .name span {
	font-size: 1.8rem;
	padding-left: 0.5em;
}
.sec01 .affiliation {
	display: block;
	border-top: #7BC278 1px solid;
	padding-top: 1em;
	font-size: 1.19rem;
	letter-spacing: 0.05em;
	line-height: 1.4;
}
.sec01 .affiliation small {
	font-size: 70%;
}
.sec01 h3 {
	font-size: 2.2rem;
	letter-spacing: 0.14em;
	line-height: 1.4;
	padding: 1.4em 0;
}


@media screen and (max-width: 768px) {
	.sec01 {
	}
	.sec01 h2 {
		font-size: 1.2rem;
	}
	.sec01 h2::before {
		content: "";
		height: 10px;
	}
	.sec01 figure {
		width: 100%;
		margin-bottom: 10%;
	}
	.sec01 .contentWrap {
		width: 100%;
	}
	.sec01 .Jobtitle {
		font-size: 1.5rem;
	}
	.sec01 .Jobtitle span {
		font-size: 1.1rem;
	}
	.sec01 .name {
		font-size: 1.8rem;
	}
	.sec01 .name span {
		font-size: 1.4rem;
	}
	.sec01 .affiliation {
		font-size: 1.1rem;
	}
	.sec01 h3 {
		font-size: 1.6rem;
	}
}


/*-----------------------------
#nav
-------------------------------*/
#nav {
	padding: 0 5% 25%;
	background: url("../images/back_pc.svg") center bottom -50% no-repeat;
	background-size: contain;
}
#nav .contentWrap {
	position: relative;
	padding: 5% 0 10%;
}
#nav .contentWrap::after {
	content: "";
	display: block;
	width: 100%;
	height: 17px;
	border-top: #000 1px solid;
	border-bottom: #000 2px solid;
	position: absolute;
	bottom: 0;
}
#nav .flex {
	justify-content: space-between;
	max-width: 745px;
	margin: 0 auto;
}
#nav .flex li {
	width: 32%;
}
#nav .flex li a {
	display: block;
}
@media screen and (max-width: 768px) {
	#nav {
		padding: 10% 5% 40%;
		background: url("../images/back_sp.svg") center top 180px no-repeat;
		background-size: 100% auto;
	}
	#nav .contentWrap {
		padding: 5% 0 20%;
	}
	#nav .contentWrap::after {
		content: "";
		height: 10px;
	}
	#nav .flex li {
		width: 40%;
	}
}





/*-----------------------------
#hakken
-------------------------------*/
#hakken .sec01 {
	margin-top: 127px;
	padding: 5% 5% 0;
	background-image: repeating-linear-gradient(120deg, rgba(253, 238, 241, 1) 1px 14px, rgba(247, 249, 250, 1) 14px 20px);
}
#hakken .sec02 {
	margin-top: 127px;
	padding: 5% 5%;
	background-image: repeating-linear-gradient(120deg, rgba(253, 238, 241, 1) 1px 14px, rgba(247, 249, 250, 1) 14px 20px);
}
#hakken .sec01 .contentWrap,
#hakken .sec02 .contentWrap {
	max-width: 925px;
}
#hakken .sec01 h1 {
  margin: 0 auto 1.4em;
}
#hakken .sec01 figure {
	display: block;
	margin: 0 auto;
	max-width: 365px;
	text-align: center;
	padding: 0;
}
#hakken .wrap .note {
  margin-top: 2em;
	padding: 0;
}
#hakken .btn {
	display: block;
	width: 100%;
	padding: 15px;
	text-align: center;
	line-height: 1;
	border: #000 1px solid;
	background: #fff;
}
#hakken .btn img {
	max-height: 50px;
	width: auto;
}
#hakken .btn:hover {
	background: #eee;
}
#hakken .result .btn {
	display: block;
	width: 100%;
	padding: 15px;
	border-radius: 10px;
	box-shadow: 10px 10px 0px 0px rgba(54, 71, 86, 0.2);
}
#hakken .result .btn img {
	max-height: 25px;
	width: auto;
}

#hakken .card {
	position: relative;
	background: #fff;
	border: #000 1px solid;
	border-radius: 10px;
	box-shadow: 10px 10px 0px 0px rgba(54, 71, 86, 0.2);
	margin-bottom: 1.5em;
}
#hakken .card p {
	padding: 0 !important;
}
#hakken .card .maincontents {
	padding: 18% 8% 15%;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
#hakken .card.c01 .maincontents {
	background: url("../hakkennavi/images/back01.svg") no-repeat center center #D3EDFB;
}
#hakken .card.c02 .maincontents {
	background: url("../hakkennavi/images/back02.svg") no-repeat center center #FADCE9;
}
#hakken .card.c03 .maincontents {
	background: url("../hakkennavi/images/back03.svg") no-repeat center center #FEECD2;
}
#hakken .card.c04 .maincontents {
	background: url("../hakkennavi/images/back04.svg") no-repeat center center #D3DEF1;
}
#hakken .card.c05 .maincontents {
	background: url("../hakkennavi/images/back05.svg") no-repeat center center #E7D5E8;
}
#hakken .card.c06 .maincontents {
	background: url("../hakkennavi/images/back06.svg") no-repeat center center #D5EAD8;
}
#hakken .card.c07 .maincontents {
	background: url("../hakkennavi/images/back07.svg") no-repeat center center #ECF4D9;
}
#hakken .card.c08 .maincontents {
	background: url("../hakkennavi/images/back08.svg") no-repeat center center #D4ECEA;
}
#hakken .card.c09 .maincontents {
	background: url("../hakkennavi/images/back09.svg") no-repeat center center #D4ECF3;
}
#hakken .card.c10 .maincontents {
	background: url("../hakkennavi/images/back10.svg") no-repeat center center #FBDAC8;
}
#hakken .card.c11 .maincontents {
	background: url("../hakkennavi/images/back11.svg") no-repeat center center #FFFCDB;
}
#hakken .card.c12 .maincontents {
	background: url("../hakkennavi/images/back12.svg") no-repeat center center #F1D9E9;
}
#hakken .card.c13 .maincontents {
	background: url("../hakkennavi/images/back13.svg") no-repeat center center #FADCE2;
}

@media screen and (min-width: 769px) {
	#hakken .card.c01 .maincontents {
		background-size: 46% auto;
		background-position: bottom -100px right -40px;
	}
	#hakken .card.c02 .maincontents {
		background-size: 46% auto;
		background-position: bottom -100px right -20px;
	}
	#hakken .card.c03 .maincontents {
		background-size: 46% auto;
		background-position: bottom -100px right -20px;
	}
	#hakken .card.c04 .maincontents {
		background-size: 46% auto;
		background-position: bottom -80px right -20px;
	}
	#hakken .card.c05 .maincontents {
		background-size: 46% auto;
		background-position: bottom -100px right -20px;
	}
	#hakken .card.c06 .maincontents {
		background-size: 46% auto;
		background-position: bottom -100px right -20px;
	}
	#hakken .card.c07 .maincontents {
		background-size: 46% auto;
		background-position: bottom -100px right -20px;
	}
	#hakken .card.c08 .maincontents {
		background-size: 46% auto;
		background-position: bottom -80px right 0px;
	}
	#hakken .card.c09 .maincontents {
		background-size: 46% auto;
		background-position: bottom -100px right -40px;
	}
	#hakken .card.c10 .maincontents {
		background-size: 46% auto;
		background-position: bottom -100px right -40px;
	}
	#hakken .card.c11 .maincontents {
		background-size: 46% auto;
		background-position: bottom -100px right -20px;
	}
	#hakken .card.c12 .maincontents {
		background-size: 46% auto;
		background-position: bottom -100px right -20px;
	}
	#hakken .card.c13 .maincontents {
		background-size: 46% auto;
		background-position: bottom -100px right -20px;
	}
}


#hakken .card .maincontents ul {
	color: #364756;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: left;
}
#hakken .card .maincontents ul li {
	line-height: 1.5;
}
#hakken .card .maincontents ul li + li {
	margin-top: 1.5em;
}
#hakken .card .flex {
	border-top: #000 1px solid;
}
#hakken .card .flex li {
	width: 50%;
	text-align: center;
}
#hakken .card .flex a {
	display: block;
	padding: 0.8em;
	font-size: 1.5rem;
	color: #000;
}
#hakken .card .flex li:first-child a {
	background: #fff;
	border-bottom-left-radius: 10px;
}
#hakken .card .flex li:last-child a {
	background: #EDEEEE;
	border-bottom-right-radius: 10px;
}
#hakken .card .flex a span {
	display: inline-block;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#hakken .card .flex a:hover span {
	-webkit-transform: rotateY(360deg);
	transform: rotateY(360deg);
}


#hakken .card .bl,
#hakken .card .bl00 {
	position: absolute;
	width: 20%;
	top: 0;
}
#hakken .card .bl00 {
	width: 18%;
	top: -5%; left: -5%;
}
#hakken .card.c01 .bl {
	width: 23%;
	top: 5%; right: -2%;
}
#hakken .card.c02 .bl {
	width: 16.6%;
	top: 5%; right: -5%;
}
#hakken .card.c03 .bl {
	width: 17.7%;
	top: -5%; right: 10%;
}
#hakken .card.c04 .bl {
	width: 19.8%;
	top: -5%; left: -5%;
}
#hakken .card.c05 .bl {
	width: 17%;
	top: -5%; left: 5%;
}
#hakken .card.c06 .bl {
	width: 21.9%;
	top: 5%; left: -1%;
}
#hakken .card.c07 .bl {
	width: 18.6%;
	top: 5%; right: 23%;
}
#hakken .card.c08 .bl {
	width: 23.4%;
	top: 8%; right: 35%;
}
#hakken .card.c09 .bl {
	width: 15.6%;
	top: 8%; right: 25%;
}
#hakken .card.c10 .bl {
	width: 19%;
	top: -5%; left: -5%;
}
#hakken .card.c11 .bl {
	width: 14.3%;
	top: 5%; left: 40%;
}
#hakken .card.c12 .bl {
	width: 23.5%;
	top: 5%; left: 45%;
}
#hakken .card.c13 .bl {
	width: 16.5%;
	top: 0; left: -5%;
}

@media screen and (max-width: 768px) {
	#hakken .card.c01 .bl {
		width: 60%;
		top: -3%; right: 2%;
	}
	#hakken .card.c02 .bl {
		width: 40%;
		top: -5%; right: 1%;
	}
	#hakken .card.c03 .bl {
		width: 40%;
		top: -4%; right: -2%;
	}
	#hakken .card.c04 .bl {
		width: 50%;
		top: -4%; right: 1%; left: auto;
	}
	#hakken .card.c05 .bl {
		width: 40%;
		top: -4%; right: 1%; left: auto;
	}
	#hakken .card.c06 .bl {
		width: 55%;
		top: -2%; right: auto; left: 5%;
	}
	#hakken .card.c07 .bl {
		width: 45%;
		top: -2%; right: 2%; left: auto;
	}
	#hakken .card.c08 .bl {
		width: 60%;
		top: -2%; right: 1%; left: auto;
	}
	#hakken .card.c09 .bl {
		width: 40%;
		top: -2%; right: 5%; left: auto;
	}
	#hakken .card.c10 .bl {
		width: 40%;
		top: -2%; right: auto; left: 5%;
	}
	#hakken .card.c11 .bl {
		width: 35%;
		top: -2%; right: 5%; left: auto;
	}
	#hakken .card.c12 .bl {
		width: 50%;
		top: -2%; right: 2%; left: auto;
	}
	#hakken .card.c13 .bl {
		width: 35%;
		top: -2%; right: auto; left: 3%;
	}
}



/* 結果ページ */
#hakken .result h1 {
	background: #000;
	line-height: 1;
	padding: 15px 15%;
	border-radius: 10px;
	box-shadow: 10px 10px 0px 0px rgba(54, 71, 86, 0.2);
}
#hakken .result h2 {
	overflow: hidden;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom: #000 1px solid;
}
#hakken .result h2 div:first-child {
	text-align: center;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: 600;
	font-size: 4rem;
	color: #fff;
	-webkit-text-stroke: 1px #000;
  text-stroke: 1px #000;
	line-height: 1.3;
}
#hakken .result h2 div:last-child {
	font-size: 1.8rem;
	font-weight: bold;
	letter-spacing: 0.05em;
	text-align: center;
	padding: 0 5% 3%;
	line-height: 1.4;
}
#hakken .result h2 div:last-child span {
	font-size: 60%;
}
#hakken .result .c01 h2 {
	background: #EAF6FD;
}
#hakken .result .c01 h2 div:first-child,
#hakken .result .c01 ul.hash li {
	background: #D3EDFB;
}
#hakken .result .c02 h2 {
	background: #FDEEF5;
}
#hakken .result .c02 h2 div:first-child,
#hakken .result .c02 ul.hash li {
	background: #FADCE9;
}
#hakken .result .c03 h2 {
	background: #FFFEEE;
}
#hakken .result .c03 h2 div:first-child,
#hakken .result .c03 ul.hash li {
	background: #FFFCDB;
}
#hakken .result .c04 h2 {
	background: #E9EFF8;
}
#hakken .result .c04 h2 div:first-child,
#hakken .result .c04 ul.hash li {
	background: #D3DEF1;
}
#hakken .result .c05 h2 {
	background: #F3EAF4;
}
#hakken .result .c05 h2 div:first-child,
#hakken .result .c05 ul.hash li {
	background: #E7D5E8;
}
#hakken .result .c06 h2 {
	background: #EBF5EC;
}
#hakken .result .c06 h2 div:first-child,
#hakken .result .c06 ul.hash li {
	background: #D5EAD8;
}
#hakken .result .c07 h2 {
	background: #F6FAED;
}
#hakken .result .c07 h2 div:first-child,
#hakken .result .c07 ul.hash li {
	background: #ECF4D9;
}
#hakken .result .c08 h2 {
	background: #FBFCED;
}
#hakken .result .c08 h2 div:first-child,
#hakken .result .c08 ul.hash li {
	background: #F7F8DA;
}
#hakken .result .c09 h2 {
	background: #EAF6F5;
}
#hakken .result .c09 h2 div:first-child,
#hakken .result .c09 ul.hash li {
	background: #D4ECEA;
}
#hakken .result .c10 h2 {
	background: #EAF6FA;
}
#hakken .result .c10 h2 div:first-child,
#hakken .result .c10 ul.hash li {
	background: #D4ECF3;
}
#hakken .result .c11 h2 {
	background: #FDEDE4;
}
#hakken .result .c11 h2 div:first-child,
#hakken .result .c11 ul.hash li {
	background: #FBDAC8;
}
#hakken .result .c12 h2 {
	background: #FFF6E9;
}
#hakken .result .c12 h2 div:first-child,
#hakken .result .c12 ul.hash li {
	background: #FEECD2;
}
#hakken .result .c13 h2 {
	background: #F8EDF4;
}
#hakken .result .c13 h2 div:first-child,
#hakken .result .c13 ul.hash li {
	background: #F1D9E9;
}
#hakken .result .c14 h2 {
	background: #FDEEF1;
}
#hakken .result .c14 h2 div:first-child,
#hakken .result .c14 ul.hash li {
	background: #FADCE2;
}

#hakken .result .card .maincontents {
	background: #fff;
	padding: 5% 5% 8%;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
#hakken .result .card .maincontents p {
	text-align: left;
	color: #364756;
}
#hakken .result .card .maincontents ul.hash {
	display: block;
	margin-top: 1em;
	text-align: left;
}
#hakken .result .card .maincontents ul.hash li {
	display: inline-block;
	margin: 3px 0 0 0;
	font-size: 1rem;
	color: #000;
}

@media screen and (min-width: 769px) {
	#hakken .result h1 {
		padding: 8px 14% 12px;
		margin: 0 auto 1em;
	}
	#hakken .result h1 img {
		max-height: 32px;
	}
	#hakken .result h2 {
		display: flex;
		align-items: center;
	}
	#hakken .result h2 div:first-child {
		line-height: 190px;
		width: 15%;
	}
	#hakken .result h2 div:last-child {
		text-align: left;
		width: 85%;
		padding: 5%;
	}
	#hakken .result .card .maincontents {
		padding: 5% 10% 7%;
	}
	#hakken .result .card .maincontents ul.hash {
		display: flex;
		flex-wrap: wrap;
		margin-top: 1em;
	}
	#hakken .result .card .maincontents ul.hash li {
		margin: 0 1em 0.5em 0;
		font-size: 1.1rem;
		white-space: nowrap;
	}
}

@media screen and (max-width: 768px) {
	#hakken .sec01,
	#hakken .sec02 {
		margin-top: 90px;
	}
	#hakken .sec01 .contentWrap,
	#hakken .sec02 .contentWrap {
		width: 100%;
	}
	#hakken .sec01 figure {
		width: 100%;
		margin-bottom: 0;
	}
	
	#hakken .card .maincontents {
		padding: 30% 8% 15%;
	}
	#hakken .card .maincontents ul {
		font-size: 1.6rem;
		text-align: center;
	}
	#hakken .card .flex {
		display: block;
	}
	#hakken .card .flex li {
		width: 100%;
	}
	#hakken .card .flex li:first-child a {
		border-bottom-left-radius: 0;
	}
	#hakken .card .flex li:last-child a {
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
	}
}








/*-----------------------------
#case
-------------------------------*/
#case {}
#case .head {
	margin-top: 127px;
	background: url("../casestudy/images/bg_head.svg") top center no-repeat;
	background-size: cover;
	overflow: hidden;
	& h1 {
		text-align: left;
		margin: 0 auto 30px;
		max-width: 1000px;
		& em {
			display: inline-block;
			width: 20%;
			max-width: 420px;
			margin-bottom: 20px;
		}
	}
	& .flex {
		width: 100%;
		max-width: 1000px;
		margin: auto;
		& li:first-child {
			width: 60%;
		}
		& li:last-child {
			width: 40%;
		}
	}
	@media screen and (max-width: 768px) {
		margin-top: 90px;
		padding: 5% 2%;
		& h1 {
			& em {
				width: 40%;
				margin-bottom: 20px;
			}
		}
		& .flex {
			display: block;
			margin-bottom: -20%;
			& li:first-child {
				width: 100%;
			}
			& li:last-child {
				width: 100%;
				padding-top: 5%;
			}
		}
	}
}
#case .sec01 {
	background: #105FA8;
	& .contentWrap {
		max-width: 920px;
	}
	& .card {
		padding: 40px;
		margin-bottom: 50px;
		background: url( "../casestudy/images/bg_future.png") repeat #FAF6D8;
		border: #105FA8 2px solid;
		border-radius: 10px;
		box-shadow: 10px 10px 0px -5px #10467A;
		position: relative;
		& h2 {
			text-align: left;
			margin-bottom: 20px;
			&::before {
				display: none;
			}
			& img {
				height: 180px;
				width: auto;
			}
		}
		& .tag {
			max-width: 40%;
			margin-bottom: 20px;
			& li {
				display: inline-block;
				background: #00ABDC;
				border-radius: 3px;
				color: #fff;
				font-size: 15px;
				padding: 2px;
				margin-right: 0.5em;
				margin-bottom: 0.5em;
				white-space: nowrap;
			}
		}
		& figure {
			position: absolute;
			top: 20px; right: 0;
			width: 42%;
		}
	}
	@media screen and (max-width: 768px) {
		& .contentWrap {
			padding: 0;
		}
		& .card {
			padding: 8%;
			margin-bottom: 8%;
			& .tag {
				max-width: 100%;
				margin-bottom: 5%;
			}
			& figure {
				position: relative;
				width: 100%;
				padding: 0;
				margin: auto;
			}
		}
	}
}
#case .sec02 {
	background: #105FA8;
	padding-top: 0;
	& .contentWrap {
		max-width: 1040px;
	}
	& .power ul {
		margin-bottom: 80px;
		justify-content: space-between;
		align-items: flex-start;
		& .pt {
			width: 12%;
		}
		& .txt {
			width: 52%;
			color: #fff;
			text-align: left;
			& h3 {
				margin-bottom: 10px;
				& img {
				height: 34px;
				width: auto;
				}
			}
			& p {
				line-height: 1.6;
				& small {
					display: inline-block;
					font-size: 50%;
					line-height: 1.8;
				}
			}
		}
		& .img {
			width: 28%;
		}
	}
	@media screen and (max-width: 768px) {
		& .power ul {
			display: block;
			margin-bottom: 10%;
			& .pt {
				width: 42%;
				padding-right: 14%;
				margin: 0 auto 5%;
			}
			& .txt {
				width: 100%;
				margin-bottom: 5%;
				& h3 img {
					width: 100%;
					height: auto;
				}
			}
			& .img {
				width: 100%;
			}
		}
	}
}
#case .sec03 {
	background: #fff;
	& .contentWrap {
		max-width: 1180px;
	}
	& h3 {
		text-align: left;
		margin-bottom: 15px;
	}
	@media screen and (max-width: 768px) {
		& .contentWrap {
			padding: 0;
		}
	}
}

.depertment__inner__item {
  position: relative;
  overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.depertment__inner__item__list {
  position: relative;
  width: 280px;
	border: #000 1px solid;
}
.depertment__inner__item__list__link {
  position: relative;
  display: block;
  overflow: hidden;
	color: #000;
}
.depertment__inner__item__list__link__txt {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 128px;
  padding: 10px 0 0 10px;
  margin: 0 auto;
  text-align: left;
  -moz-transition: all 0.25s ease 0s;
  -o-transition: all 0.25s ease 0s;
  -webkit-transition: all 0.25s ease;
  -webkit-transition-delay: 0s;
  transition: all 0.25s ease 0s;
}
.depertment__inner__item__list__link__txt__s {
  font-size: 12px;
  line-height: 1.4;
}
.depertment__inner__item__list__link__txt__t {
  font-size: 15px;
  line-height: 1.25 !important;
  margin-top: 6px;
}
.depertment__inner__item__list__link__txt figure {
	width: 50%;
	padding-top: 5px;
}
.depertment__inner__item__list__link__img {
  float: right;
  width: 110px;
}
.depertment__inner__item__list__link__img img {
  width: 100%;
	height: auto;
}
.depertment__inner__item__list__link__img .pc {
  display: block;
}
.depertment__inner__item__list__link__img .sp {
  display: none;
}
.depertment__inner__item__list__link__icn {
  position: absolute;
  bottom: 0;
  right: 0;
}
.depertment__inner__item__list__link:hover
.depertment__inner__item__list__link__txt {
  color: #aaa;
}
@media screen and (max-width: 768px) {
	.depertment__inner__item {
		gap: 10px;
	}
	.depertment__inner__item__list {
		width: calc((100% - 10px * 1) / 2);
	}
	.depertment__inner__item__list__link__txt {
		padding: 3px 0 0 6px;
	}
	.depertment__inner__item__list__link__txt__s {
		font-size: 10px;
	}
	.depertment__inner__item__list__link__txt__t {
		font-size: 13px;
		margin-top: 3px;
	}
	.depertment__inner__item__list__link__txt figure {
		width: 28%;
		padding-top: 3px;
	}
	.depertment__inner__item__list__link__img {
		width: 40%;
	}
}