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


/* ----------------------------------------------------------------------------------------

  MaLion 課題から探すページ
	
------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------
  一覧
------------------------------------------------------------------------------------------- */
.sec-inner h2.can-do { font-size: 4.0rem; font-weight: 700; text-align: center; line-height: 1.25; letter-spacing: 1px;}
.filter-wrap a:hover { background: #e6f3fe;}
.filter-wrap a:hover .card-item h2 { text-decoration: underline;}
.card figure { height: auto; border-bottom: none; margin: 30px 30px 0; text-align: center; overflow:hidden;}
.card figure img { width: auto; max-width: 100%; height: auto; transition:1s all;}
.card figure img:hover { transform:scale(1.2,1.2); transition:1s all;}
.card-item { background-color:transparent;}
.card-item h2 { color: #c9302c; font-size: 2.0rem;}
.in-more-detail:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105"; margin-right: 0; margin-left: 20px; display: inline-block;}
.in-more-detail:hover:after { transition: .5s; margin-left: 25px; text-decoration: none!important;}

@media screen and (max-width: 768px) {
	.sec-inner h2.can-do { font-size: 2.8rem;}
  .card-item h2 { color: #c9302c; font-size: 1.6rem;}
  .card figure img { max-height: 150px;}
}

@media screen and (max-width: 480px) {
  .card figure {margin: 20px 20px 0;}
  .card figure img { max-height: 100px;}
  .card-item { padding: 20px;}
}


/* ----------------------------------------------------------------------------------------
  タイトル
------------------------------------------------------------------------------------------- */
.issue-header {
  display: flex;
  justify-content: space-between;
}

.issue-header .issue-txt {
  width: min(100%, 62rem);
	text-align: left;
}

.issue-header .issue-img {
  width: min(100%, 50rem);
  text-align: center;
}

.issue-header .issue-img img {
  width: 100%;
  height: auto;
}

.issue-header .issue-txt h1 {
	font-size: 4.8rem;
	font-weight: 700;
	text-align: left;
  margin-bottom: 20px;
}

.issue-header .issue-txt mark {
  color: #9e9eae;
	font-size: 2.4rem;
	font-weight: 700;
	display: block;
  margin-bottom: 0;
}

.issue-header .issue-txt p {
	font-size: 1.6rem;
	text-align: left;
  margin-bottom: 40px;
}

.issue-header .issue-txt p span {
  color: #c9302c;
  font-weight: 700;
}


@media screen and (max-width: 768px) {
  .issue-header { width: 100%; padding: 40px 8px; flex-direction: column;}
  .issue-header .issue-img { width: 100%;}
  .issue-header .issue-txt { width: 100%; margin-bottom: 40px;}
  .issue-header .issue-txt mark { font-size: 1.8rem; text-align: center;}
  .issue-header .issue-txt h1 { font-size: 3.6rem; text-align: center;}
  .issue-header .issue-txt p { font-size: 1.4rem; text-align: center; margin-bottom: 20px}
  .issue-header .issue-txt ul.actions {text-align: center;}
}


/* ----------------------------------------------------------------------------------------
  コンテンツ
------------------------------------------------------------------------------------------- */
/*共通*/
.contents {
	padding: 80px 0;
	margin: 0 auto;
}

.problem h2,
.resolve h2 {
	font-size: 4.0rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.25;
	letter-spacing: 1px;
}

.problem h2 span,
.resolve h2 span {
  color: #c9302c;
}

.problem h2+p,
.resolve h2+p {
	font-size: 2.0rem;
	text-align: left;
  max-width: 900px;
	margin: auto;
}


/*課題*/
.problem {
  background: #edeff0;
}

.problem h2 {
}

.problem ul.type {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.problem ul.type li {
	width: 30%;
	padding: 80px 40px;
	background: #fff;
	text-align: center;
}

.problem ul.type li:nth-child(2n) {
	margin: 0 2.5%;
}

.problem ul.type li figure {
	text-align: center;
	margin-bottom: 20px;
}

.problem ul.type li figure img {
	height: 100px;
  width: auto;
}

.problem ul.type li h3 {
	color: #0aa6e6;
	font-size: 2.0rem;
	text-align: center;
	margin-bottom: 10px;
}

.problem ul.type li h3 + p {
	font-size: 1.4rem;
	text-align: left;
}

.problem div.arrow {
	display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-bottom: 4px solid #c5c5c5;
  border-right: 4px solid #c5c5c5;
  transform: rotate(45deg);
}

.problem div.solve {
	color: #28b6a9;
  font-size: 4rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  letter-spacing: 1px;
  text-shadow: 0px 2px 2px rgba(255,255,255,1.0);
	background: url("/malion/issue/images/check-white.svg") center center / contain no-repeat;
	display: flex;
  justify-content: center;
  align-items: center;
	min-height: 200px;
}


/*解決*/
.resolve {
	background: #fff;
}

.resolve .ability {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #e5e5e5;
  padding: 40px;
}

.resolve .ability:nth-child(even) {
    flex-direction: row-reverse;
}

.resolve .ability .ability-img {
  width: 50%;
  text-align: center;
  display: block;
}

.resolve .ability .ability-txt {
  width: 40%;
	padding-left: 60px;
	background: url("/malion/issue/images/check-red.svg") left top / 50px no-repeat;
	text-align: left;
}

.resolve .ability .ability-txt h3 {
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 10px;
}

.resolve .ability .ability-txt mark {
	color: #bbb;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 4px;
	text-align: left;
}

.resolve .ability .ability-txt p {
	font-size: 1.6rem;
	text-align: left;
	line-height: 1.5;
}


@media screen and (max-width: 768px) {
	.contents { width: 100%; padding: 40px 8px;}
	.problem h2, .resolve h2 { font-size: 2.8rem;}
	.problem p,	.resolve p { font-size: 1.4rem;}
  .problem ul.type li { width: 47.5%; padding: 60px 30px;}
  .problem ul.type li:nth-child(2n) {	margin: 0 0 0 2.5%;}
  .problem ul.type li:nth-child(n+3) { margin-top: 2.5%;}
  .problem ul.type li figure img { height: 80px;}
	.problem div.solve {	font-size: 2.8rem; min-height: 150px;}
	.resolve .ability .ability-txt h3 { font-size: 2.0rem;}
	.resolve .ability .ability-txt mark {	font-size: 1.0rem;}
	.resolve .ability .ability-txt p {	font-size: 1.2rem;}
}

@media screen and (max-width: 480px) {
	.problem { padding: 0;}
  .problem ul.type li { width: 100%; padding: 40px 20px; margin: 2.5%!important;}
	.problem div.solve { min-height: 100px;}
  .resolve .ability, .resolve .ability:nth-child(even) { width: 100%; padding: 40px 8px; flex-direction: column;}
  .resolve .ability .ability-img { width: 100%;}
  .resolve .ability .ability-txt { width: 100%; margin-bottom: 40px;}
  .resolve .ability .ability-txt { padding-left: 50px; background: url("/malion/issue/images/check.svg") left top / 40px no-repeat;}
}


/* ----------------------------------------------------------------------------------------
  CTA
------------------------------------------------------------------------------------------- */
aside.cta-whitepaper .contents mark span {
  font-size: 1.6rem;
}

aside.cta-whitepaper .contents .whitepaper-item .whitepaper-item-txt dd em {
  display: block;
  font-size: 1.4rem;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 10px;
  padding-left: 1em;
}