@charset "utf-8";

/*=============================================================
 base Setting
=============================================================*/
:root {
	--keyColor: #ca004c;
	--color01: #FCAB22;
	--color02: #CA004C;
	--color03: #9074B7;
	--color04: #0089c6;
}

/*=============================================================
 base Layout
=============================================================*/
/* a Element
--------------------------------------------------------------*/
a {
	color: #0053d5;
	text-decoration: none;
}

a:visited {
	color: #5d3fbb;
}

a:hover {
	color: #0053d5;
	text-decoration: underline;
}

/* container
--------------------------------------------------------------*/
#container {
	display: flex;
	background: url("../img/bg.png");
	background-repeat: repeat-y;
	background-size: 100% auto;
	min-height: 100vh;
}

#header,
#pageBody {
	flex: 1;
}

body {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* pageBody
-------------------------------------------------------------*/
#pageBody {
	max-width: calc(100% - 250px);
}

/* contentsInner
-------------------------------------------------------------*/
.contentsInner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

/* splogo
-------------------------------------------------------------*/
.top .splogo {
	display: none;
}

/* section
-------------------------------------------------------------*/
section+section {
	margin-top: 50px;
}

.top section+section {
	margin-top: 0px;
}

/*=============================================================
 contents
=============================================================*/
#contents {
	font-size: 16px;
	line-height: 2;
	color: #333;
}

#contents img {
	max-width: 100%;
	width: 100%;
}

#contents p+p {
	margin-top: 1em;
}

/*=============================================================
 topicPathArea
=============================================================*/
#topicPathArea {
	color: #858585;
	padding: 47px 0 30px;
}

#topicPathArea a {
	color: #333333;
	text-decoration: underline;
}

#topicPathArea .contentsInner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* topicPath */
#topicPath {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	display: flex;
	flex-wrap: wrap;
	margin-right: auto;
}

#topicPath li {
	margin: 5px 6px 0 0;
}

#topicPath li:not(:first-child)::before {
	content: '>';
	padding-right: 5px;
}

/* link */
#topicPath+* {
	display: flex;
	flex-wrap: wrap;
	margin-left: auto;
}

#topicPath+* li {
	margin: 5px 0 0 10px;
}

/*=============================================================
 pageTtlMain
=============================================================*/
#pageTtlMain {
	width: 100%;
	margin-bottom: 40px;
}

#pageTtlMain .contentsInner {
	padding: 0;
	max-width: calc(100vw - 250px);
}

#pageTtlMain .catch {
	font-size: 22px;
	font-weight: 700;
	color: var(--keyColor);
	text-align: center;
	padding: 50px 40px;
	box-sizing: border-box;
}

.lowerPage #pageTtlMain .contentsInner,
.doorPage #pageTtlMain .contentsInner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}



/*=============================================================
 tag
=============================================================*/
.tag {
	font-size: 11px;
	margin-left: -5px;
	font-weight: 500;
}

.tag:not(.link) li {
	font-weight: 500;
	display: inline-block;
	color: var(--keyColor);
	cursor: pointer;
	padding: 8px 10px;
	box-sizing: border-box;
	border-radius: 50px;
	border: 1px solid var(--keyColor);
	background-color: #fff;
	text-align: center;
	margin: 3px;
	line-height: 1
}

.tag.alignC li {
	cursor: text !important;
}

.tag.link {
	text-align: center;
}

.tag.link li {
	display: inline-block;
	margin: 5px;
}

.tag.link li a {
	color: var(--keyColor);
	cursor: pointer;
	padding: 10px 20px;
	box-sizing: border-box;
	border-radius: 30px;
	border: 1px solid var(--keyColor);
	background-color: #fff;
	text-align: center;
	;
}

.tag.link li a:hover {
	color: #fff;
	background-color: var(--keyColor);
	text-decoration: none;
}

.tag li.is-active,
.tag li.active {
	color: #fff;
	background-color: var(--keyColor);
}

/*=============================================================
 item
=============================================================*/
.item {
	display: flex;
	flex-direction: column;
}

.item+figure {
	margin-top: 30px;
}

.item a {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.item a figure {
	overflow: hidden;
}

.item a figure img {
	transition: all .3s;
}

.item a:hover figure img {
	transform: scale(1.05);
}

.item a:hover {
	text-decoration: none;
}

.item .text-box {
	background-color: #fff;
	border: 2.5px solid #000;
	margin-top: 10px;
	border-radius: 20px;
	padding: 20px 28px 40px 20px;
	box-sizing: border-box;
	position: relative;
	transition: all .3s;
	flex-grow: 1;
}

.related-list .item .text-box {
	padding: 10px 16px 40px;
}

.lowerPage #pageTtlMain .item .text-box {
	padding: 40px;
}

a .text-box::after {
	content: '';
	background: url("../../img/icon-arw-grid.svg") no-repeat;
	background-size: 48px 13px;
	width: 48px;
	height: 13px;
	position: absolute;
	bottom: 22px;
	right: 22px;
	z-index: 5;
}

.popularArticlesItems a .text-box::after {
	content: none;
}

.item a:hover .text-box {
	border: 2.5px solid var(--keyColor);
}

.item .ttl-box {
	margin-bottom: 5px;
}

.doorPage #pageTtlMain .item .ttl-box {
	margin-bottom: 25px;
}

.item .ttl-box>* {
	font-size: 14px;
	line-height: 1.2;
	display: inline-block;
	font-weight: 600;
}

.item .tag-ttl {
	font-size: 16px;
	line-height: 1.2;
	font-family: 'Alexandria', sans-serif;
	color: #fff;
	padding: 5px 12px;
	box-sizing: border-box;
	margin-right: 10px;
}

.doorPage #pageTtlMain .item .tag-ttl {
	font-size: 26px;
	padding: 10px 18px 8px;
}

.doorPage .item .tag-ttl {}

.related-list .item .tag-ttl {
	font-size: 10px;
}

.item .ttl-box .tag-ttl.color01 {
	background-color: var(--color01);
}

.item .ttl-box .tag-ttl.color02 {
	background-color: var(--color02);
}

.item .ttl-box .tag-ttl.color03 {
	background-color: var(--color03);
}

.item .ttl-box .tag-ttl.color04 {
	background-color: var(--color04);
}

.item .ttl-box .date {
	color: #707070;
	margin-right: 10px;
}

.item .ttl-box .new {
	font-family: 'Alexandria', sans-serif;
	color: var(--keyColor);
}

.item.new figure {
	position: relative;
}

.item.new figure::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-top: 50px solid var(--keyColor);
	border-left: 50px solid transparent;
	border-right: 0 solid transparent;
	border-bottom: 0 solid transparent;
}

.slider-box .item.new figure::after {
	border-top: 100px solid var(--keyColor);
	border-left: 100px solid transparent;
}

.item.new figure::before {
	content: '';
	display: block;
	width: 28px;
	height: 28px;
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 1;
	background: url("/stories/shared/img/icon-new.svg") no-repeat;
}

.slider-box .item.new figure::before {
	width: 56px;
	height: 56px;
	top: 8px;
	right: 8px;
	background-size: 56px 56px;
}

.item .text {
	color: #000;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.doorPage.what #pageTtlMain .item .text {
	font-size: 23px;
	color: var(--color02);
}

/*.doorPage.project .item a:hover .text{color:var(--color03);}
.doorPage.people .item a:hover .text{color:var(--color01);}
.doorPage.communication .item a:hover .text{color:var(--color04);}*/

.related-list .item .text {
	font-size: 16px;
}

.lowerPage #pageTtlMain .item .text {
	font-size: 25px;
}

.item .text+.tag {
	margin-top: 10px;
}

.item a:hover .text {
	color: var(--keyColor);
}

.item .tag {
	font-size: 11px;
	font-weight: 600;
}

/*.item .tag li{
	padding:8px 10px;
	margin: 3px;
}*/
.related-list .item .tag li {
	padding: 6px 10px;
}

#pageTtlMain .item .text-box::before {
	content: '';
	background: linear-gradient(90deg, rgba(252, 171, 34, 1) 0%, rgba(240, 52, 0, 1) 25%, rgba(200, 0, 103, 1) 50%, rgba(128, 47, 146, 1) 75%, rgba(63, 148, 184, 1) 100%);
	border-radius: 20px;
	position: absolute;
	top: 10px;
	left: 10px;
	bottom: -10px;
	right: -10px;
	z-index: -1;
	transition: all .3s;
}

#pageTtlMain .item a:hover .text-box::before {
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.doorPage #pageTtlMain .item .lead {
	font-size: 16px;
	line-height: 1.6;
	padding-bottom: 40px;
	margin-bottom: 40px;
	border-bottom: 2px dotted var(--keyColor);
}

#people.doorPage #pageTtlMain .item .lead {
	border-bottom: 2px dotted var(--color01);
}

#project.doorPage #pageTtlMain .item .lead {
	border-bottom: 2px dotted var(--color03);
}

#communication.doorPage #pageTtlMain .item .lead {
	border-bottom: 2px dotted var(--color04);
}

/*=============================================================
 text
=============================================================*/
.textS {
	font-size: 87.5%;
}

/* figcaption
--------------------------------------------------------------*/
figure figcaption,
.figcaption {
	font-size: 13px;
	line-height: 1.6;
	display: block;
	padding-top: 8px;
}

figcaption.ttl {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 3px;
}

/* atn
--------------------------------------------------------------*/
.text-atn,
.text-atnNum {
	font-size: 14px;
	line-height: 1.6;
	margin-top: 25px;
}

.text-atn:not(ul):not(ol),
.text-atn li {
	text-indent: -1em;
	margin-left: 1em;
}

.text-atnNum:not(ul):not(ol),
.text-atnNum li {
	text-indent: -2em;
	margin-left: 2em;
}

/*=============================================================
 col
=============================================================*/
/* col-2 */
.col-2 {
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
}

.col-2>* {
	width: calc((100% - 50px) / 2);
}

.bgColor02 .col-2 {
	gap: 40px;
}

.bgColor02 .col-2>* {
	width: calc((100% - 40px) / 2);
}

/* col-3 */
.col-3 {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.col-3>* {
	width: calc((100% - 60px) / 3);
}

.profile-con {
	margin-top: 40px;
	margin-bottom: 40px;
}

.profile-con .col-2 {
	gap: 16px;
}

.profile-con .col-2+p {
	margin-top: 40px;
}

.profile-con .col-2>*:first-child {
	width: 200px;
}

.profile-con .col-2>*:last-child {
	width: calc(100% - 216px);
}

/*=============================================================
 related-area
=============================================================*/
/* related-area
--------------------------------------------------------------*/
.related-area {
	padding: 70px 0 40px;
	box-sizing: border-box;
}

.related-area .related-ttl {
	font-size: 25px;
	line-height: 1.2;
	color: var(--keyColor);
	text-align: center;
	margin-bottom: 30px;
}

.related-area .related-list {
	display: flex;
	column-gap: 4.215%;
	justify-content: center;
}

.related-area .related-list>* {
	width: calc((100% - 8.43%) / 3);
}

/*=============================================================
 box-white
=============================================================*/
.box-white {
	background-color: #fff;
	border-radius: 50px;
}

.box-white .about-ttl {
	font-size: 30px;
	line-height: 1.2;
	color: var(--keyColor);
	position: relative;
	padding: 50px 0 60px 70px;
}

.box-white .about-ttl::after {
	content: '';
	height: 1px;
	width: 60px;
	background-color: var(--keyColor);
	;
	position: absolute;
	top: 50%;
	left: 0;
}

/*=============================================================
 innerBox
=============================================================*/
.innerBox {
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
}

.innerBox .lead {
	font-weight: 700;
}

.innerBox .catch {
	font-size: 20px;
	font-weight: 700;
}

.box-white.about .innerBox {
	max-width: 820px;
	padding: 80px 0 100px;
	box-sizing: border-box;
}

.innerBoxM {
	max-width: 680px;
	width: 100%;
	margin: 0 auto;
}

.innerBoxS {
	max-width: 406px;
	width: 100%;
	margin: 0 auto;
}

.innerBoxSS {
	max-width: 340px;
	width: 100%;
	margin: 0 auto;
}

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

.innerBoxSS figure {
	border: 1px solid #ccc;
	margin: 40px 0 10px;
}

.innerBox406 {
	max-width: 406px;
	width: 100%;
	margin: 0 auto;
}

.box-white.about .innerBoxS {
	max-width: 370px;
}

p+.innerBoxM,
p+.innerBoxS {
	margin-top: 46px;
}

.innerBoxM+.innerBoxM {
	margin-top: 26px;
}

/*=============================================================
 link-arw
=============================================================*/
.link-arw a {
	line-height: 1.4;
	display: inline-block;
	padding: 4px 0 4px 16px;
	position: relative;
	color: #333;
}

.link-arw a::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-bottom: 2px solid #CA004C;
	border-right: 2px solid #CA004C;
	position: absolute;
	top: calc(0.7em - 1px);
	left: 0;
	transform: rotate(-45deg);
}

.link-arw a:hover {
	color: #CA004C;
}

a.inline {
	color: #CA004C;
	text-decoration: underline;
}

a.inline:hover {
	color: #333;
	text-decoration: none;
}

/*=============================================================
 sns-black
=============================================================*/
.sns-black {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 18px;
	max-width: 312px;
	margin: 0 auto;
	padding: 0 20px;
}

.sns-black dt {
	font-size: 15px;
	white-space: nowrap;
}

.sns-black dd a {
	display: block;
	transition: all .3s;
}

.sns-black dd a:hover {
	opacity: .6;
}

.sns-black img {
	width: 28px;
	height: 28px;
}

/*=============================================================
 pagination
=============================================================*/
#pagination {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px 0;
}

#pagination-num {
	order: 2;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

#pagination-num li {
	padding: 6px;
	box-sizing: border-box;
}

#pagination-num li a {
	box-sizing: content-box;
	display: block;
	color: var(--keyColor);
	background-color: #fff;
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	width: 34px;
	height: 34px;
	transition: all 0.3s;
	padding: 0.5em 0.5em;
	margin: 0;
	border: 2px solid var(--keyColor);
	border-radius: 20px;
}

#pagination .pagination-btn-prev {
	order: 1;
}

#pagination .pagination-btn-next {
	order: 3;
}

#pagination .pagination-btn-prev a,
#pagination .pagination-btn-next a {
	display: block;
	width: 40px;
	height: 40px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

#pagination .pagination-btn-prev a span,
#pagination .pagination-btn-next a span {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	color: var(--keyColor);
	line-height: 1;
	width: 1em;
	height: 1em;
}

#pagination .pagination-btn-prev a span {
	transform: translateX(25%) rotate(-135deg);
}

#pagination .pagination-btn-next a span {
	transform: translateX(-25%) rotate(45deg);
}

#pagination .pagination-btn-prev a span::after,
#pagination .pagination-btn-prev a span::before,
#pagination .pagination-btn-next a span::after,
#pagination .pagination-btn-next a span::before {
	content: '';
	position: absolute;
	background: currentColor;
	border-radius: 0.1em;
}

#pagination .pagination-btn-prev a span::before,
#pagination .pagination-btn-next a span::before {
	top: 0;
	left: 0;
	right: 0;
	height: 0.1em;
}

#pagination .pagination-btn-prev a span::after,
#pagination .pagination-btn-next a span::after {
	top: 0;
	right: 0;
	bottom: 0;
	width: 0.1em;
}

/*=============================================================
 menu-index
=============================================================*/
.menu-index {
	border-radius: 20px;
	background-color: rgba(202, 0, 76, 0.05);
	padding: 40px 64px;
	box-sizing: border-box;
}

.menu-index .menu-index-ttl {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 18px;
}

.menu-index .menu-index-list {}

.menu-index .menu-index-list a {
	line-height: 1.4;
	display: inline-block;
	padding: 4px 0 4px 16px;
	position: relative;
	color: #333;
}

.menu-index .menu-index-list a:hover {
	color: var(--keyColor);
}

.menu-index .menu-index-list li+li {
	margin-top: 10px;
}

.menu-index .menu-index-list a::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-bottom: 2px solid #CA004C;
	border-right: 2px solid #CA004C;
	position: absolute;
	top: calc(0.7em - 1px);
	left: 0;
	transform: rotate(45deg);
}

/*=============================================================
 mov-area
=============================================================*/
.mov-area {
	max-width: 100%;
	margin: 0 auto;
}

.mov-iframe {
	position: relative;
	padding-bottom: 56.25%;
	/*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
}

.mov-iframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:1023px) {

	/*=============================================================
 base Layout
=============================================================*/
	/* a Element
--------------------------------------------------------------*/
	/* container
--------------------------------------------------------------*/
	/* container
--------------------------------------------------------------*/
	#container {
		display: block;
		min-width: 320px;
	}

	/* pageBody
-------------------------------------------------------------*/
	#pageBody {
		padding-top: 70px;
		max-width: none;
	}

	/* contentsInner
-------------------------------------------------------------*/
	.contentsInner {
		padding: 0 3%;
	}

	/* splogo
-------------------------------------------------------------*/
	.top .splogo {
		display: none;
		/* display: block;
		max-width: 210px;
		margin: 23px auto; */
	}

	/* section
-------------------------------------------------------------*/
	section+section {
		margin-top: 40px;
	}

	.top section+section {
		margin-top: 30px;
	}

	/*=============================================================
 topicPathArea
=============================================================*/
	#topicPathArea {
		display: none;
	}



	/*=============================================================
 pageTtlMain
=============================================================*/
	#pageTtlMain {}

	#pageTtlMain .contentsInner {
		padding: 0;
		max-width: 100%;
	}

	.lowerPage #pageTtlMain .contentsInner {
		padding: 20px 3% 0;
	}

	#pageTtlMain .catch {
		font-size: 16px;
		line-height: 1.6;
		padding: 30px 3%;
	}

	.doorPage #pageTtlMain .contentsInner {
		padding: 0 3%;
	}

	/*=============================================================
 filter
=============================================================*/
	#filter .ttl-filter {
		font-size: 18px;
		font-weight: 700;
		margin-bottom: 15px;
	}

	/*=============================================================
 tag
=============================================================*/
	.tag:not(.link) li {
		margin: 3px 1px;
	}

	/*=============================================================
 item
=============================================================*/
	.item+figure {}

	.item a:hover figure img {
		transform: none;
	}

	.item .text-box {
		padding: 20px 20px 40px 20px;
	}

	.lowerPage #pageTtlMain .item .text-box {
		padding: 20px 20px 40px 20px;
	}

	.item .ttl-box>* {}

	.doorPage #pageTtlMain .item .ttl-box {
		text-align: center;
		margin-top: 20px;
	}

	.doorPage #pageTtlMain .item .ttl-box>*:not(:first-child) {
		display: block;
	}

	.item .tag-ttl {
		font-size: 12px;
		margin-bottom: 5px;
	}

	.doorPage .item .tag-ttl {
		/*font-size: 23px;
	padding: 10px 18px 8px;*/
		font-size: 12px;
		padding: 5px;
	}

	.item .ttl-box .date {
		font-size: 12px;
	}

	.item .ttl-box .new {
		font-size: 12px;
	}

	.item .text {
		font-size: 18px;
	}

	.doorPage .item .text {
		font-size: 20px;
		margin-top: 10px;
	}

	.lowerPage #pageTtlMain .item .text {
		font-size: 20px;
		line-height: 1.5em;
	}

	.slider-box .item.new figure::after {
		border-top: 50px solid var(--keyColor);
		border-left: 50px solid transparent;
	}

	.slider-box .item.new figure::before {
		width: 28px;
		height: 28px;
		top: 4px;
		right: 4px;
		background-size: 28px 28px;
	}

	#pageTtlMain .item .text-box::before {
		content: '';
		top: 8px;
		left: 8px;
		bottom: -8px;
		right: -8px;
	}

	.doorPage #pageTtlMain .item .lead {
		padding-bottom: 30px;
	}

	/*=============================================================
 text
=============================================================*/
	/* figcaption
--------------------------------------------------------------*/
	/* atn
--------------------------------------------------------------*/
	.text-atn,
	.text-atnNum {
		font-size: 13px;
	}

	/*=============================================================
 col
=============================================================*/
	/* col-2 */
	.col-2,
	.col-3 {
		display: block;
	}

	.col-2>*,
	.col-3>*,
	.bgColor02 .col-2>* {
		width: 100%;
	}

	.col-2>*+* {
		margin-top: 40px;
	}

	.col-3>*+* {
		margin-top: 30px;
	}

	.bgColor02 .col-2>*+* {
		margin-top: 25px;
	}

	.profile-con {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.profile-con .col-2+p {
		margin-top: 20px;
	}

	.profile-con .col-2>*:first-child {
		width: 150px;
	}

	.profile-con .col-2>*:last-child {
		width: 100%;
		margin-top: 16px;
	}

	/*=============================================================
 related-area
=============================================================*/
	/* related-area
--------------------------------------------------------------*/
	.related-area {
		padding: 60px 0 40px;
	}

	.related-area .related-ttl {
		font-size: 18px;
	}

	.related-area .related-list {
		display: block;
	}

	.related-area .related-list>* {
		width: 100%;
	}

	.related-area .related-list>*+* {
		margin-top: 20px;
	}

	/*=============================================================
 box-white
=============================================================*/
	.box-white {
		border-radius: 30px;
	}

	.box-white .about-ttl {
		font-size: 20px;
		padding: 40px 0 40px 27px;
	}

	.box-white .about-ttl::after {
		width: 17px;
		top: 50%;
		left: 0;
	}

	/*=============================================================
 innerBox
=============================================================*/
	.innerBox p {
		font-size: 15px;
	}

	.innerBox,
	.innerBoxM,
	.innerBoxS {
		max-width: inherit;
	}

	p+.innerBoxM,
	p+.innerBoxS {
		margin-top: 30px;
	}

	.innerBoxM+.innerBoxM {
		margin-top: 26px;
	}

	.box-white.about .innerBox {
		max-width: inherit;
		padding: 40px 20px 60px;
	}

	.box-white.about .innerBoxS {
		max-width: 224px;
	}

	/*=============================================================
 menu-index
=============================================================*/
	.menu-index {
		padding: 20px 25px;
	}

}