@charset "UTF-8";

/*▼PC-----------------------*/

main {
	width: 1000px;
}
h1 {
	margin: 0 0 var(--size20px) 0;
}

.contentWrap .contentDsd .imgArea{
	margin-top: var(--size80px);
	margin-bottom: var(--size80px);
}
.contentWrap .imgArea .caption{
	font-size: var(--size14px);
	margin-top: var(--size5px);
	text-align: center;
	margin-bottom: 0;
	font-weight: 400;
}

/*---メインビジュアル---*/
#mainWrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin:0 auto var(--size100px);
}
#mainWrap .mainImg {
	width:100%;
	position: relative;
	background: #FFF;
	border-radius: var(--size20px) var(--size20px) 0 0;
	overflow: hidden;
}
/* 記事日付 */
.contentDay{
	width: auto;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 0 0 var(--size20px) 0;
	padding: var(--size20px);
	color: var(--mainBlack);
	background: #FFF;
	line-height: 1;
	font-weight: 400;
	}
.contentDay p {
	font-size: clamp(var(--size16px), 6vw, var(--size33px));
	padding: 0;
	margin: 0;
}
.contentDay span {
	display: block;
	font-size: var(--size10px);
	margin-bottom: var(--size5px);
}
#mainWrap .mainDetail {
	width:100%;
	position: relative;
	background: #FFF;
	border-radius:0 0 var(--size20px) var(--size20px);
	padding:var(--size20px);
}
#mainWrap .mainDetail p {
	margin:0 0 var(--size10px) 0;
	font-weight: 500;
}
#mainWrap h2 {
	width: auto;
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	border-radius:0 var(--size50px) var(--size50px) 0;
	padding: var(--size20px) var(--size40px) var(--size20px) var(--size20px);
	font-size: var(--size35px);
	font-weight: 700;
	color:#FFF;
	background: rgb(0,78,162);
	background: linear-gradient(90deg, rgba(0,78,162,1) 0%, rgba(41,171,226,1) 100%);
	line-height: 1.4;
}
#mainWrap .tagListWrap .tagList {
	display: flex;
	justify-content: flex-end;
}


#introduction.contentDsd{
	margin: 0 auto var(--size80px);
}

#introduction.contentDsd p{
	margin-bottom: var(--size30px);
}

#introduction.contentDsd .caption{
	font-size: var(--size14px);
}

#introduction.contentDsd .imgArea{
	margin-top: var(--size80px);
}

#introduction .explanation{
	width: 100%;
	display: flex;
	background-color: #FFF;
	border-radius: var(--size20px);
	flex-direction: column;
	margin: var(--size15px) auto 0;
	padding: var(--size30px);
}

#introduction .explanation p {
	margin-bottom: var(--size10px);
}

#introduction .explanation p:last-child {
	margin-bottom: 0;
}

#introduction .explanation .interviewee{
	font-size: var(--size20px);
	font-weight: 700;
}

/*---目次---*/
.tableWrap{
	display: flex;
	width: fit-content;
	border: solid 1px var(--mainBlack);
	border-radius: var(--size20px);
	flex-direction: column;
	align-items: center;
	margin:0 auto var(--size80px);
	padding: var(--size50px);
}
.tableWrap h3{
	font-size: var(--size27px);
	margin: 0 auto var(--size20px);
}
.tableWrap a {
	display: inline;
	background: linear-gradient(90deg, var(--mainBlue) 100%, var(--mainBlue) 0);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 var(--size2px);
	transition: background-size .5s ease;
}
.tableWrap a:hover {
	background-size: 100% var(--size2px);
	color: var(--mainBlue);
}

.tableWrap ul{
	line-height: 1.6;
}
.tableWrap li{
	margin: 0 0 var(--size30px) 0;
}
.tableWrap li:last-child {
	margin: 0 0 0 0;
}
/*---記事---*/
.contentWrap {
	display: flex;
	flex-direction: column;
}
.contentDsd {
	width: 100%;
	margin:0 auto var(--size60px);
	padding:0;
}
.contentDsd._last{
	margin-bottom: 0;
}
.contentWrap h3{
	width: 100%;
	font-size: var(--size27px);
	color:var(--mainBlue);
	border-bottom: solid var(--size3px) var(--mainBlue);
	margin: 0 0 var(--size30px) 0;
	font-weight: 700;
	line-height: 1.4;
	padding: 0 0 var(--size5px) 0;
}
.contentWrap h3:before{
	content:'';
	margin-right: var(--size10px);
	display: inline-block;
	width: var(--size34px);
	background-image: url(/mirai-pulse/lib/img/common/icon_detail_h3.svg);
	background-repeat: no-repeat;
	background-size: 100%;
	aspect-ratio: 1 / 0.6;
	background-position: center;
}
.contentWrap .ques {
	font-weight: 700;
	margin: 0 0 var(--size30px) 0;
}
.contentWrap .ans {
	margin: 0 0 var(--size30px) 0;
	line-height: 1.8;
	font-weight: 400;
}
.contentDsd p{
	margin-bottom: var(--size30px);
	font-weight: 400;
	line-height: 1.8;
}
.contentWrap .ans p:last-child{
	margin-bottom: 0;
}
.contentWrap .ansList,
.contentWrap .beforeAnsList{
	margin-bottom: var(--size15px);
}
.contentDsd p.caption{
	margin-bottom: var(--size20px);
}
.contentWrap figcaption {
	font-size: var(--size14px);
	text-align: center;
	margin-top: var(--size5px);
	font-weight: 400;
}
.contentWrap figcaption.figTextRight {
	text-align: right;
}
.contentWrap .contentGap {
	margin: 0 0 var(--size80px) 0;
}
.contentWrap .contentLastGap {
	margin: 0;
	padding:0;
}
.contentWrap .contentLastGap .caption{
	font-size: var(--size14px);
	margin-top: var(--size5px);
	text-align: center;
	font-weight: 400;
}
.contentWrap .column {
	display: flex;
	flex-direction: column;
}

.contentWrap .row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.contentWrap picture {
	margin:0 0 0 0;
}
.contentWrap .row picture {
	width:calc((100% - var(--size10px)) / 2);
}

.contentWrap .rowSpColumn {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.contentWrap .rowSpColumn div {
	width:calc((100% - var(--size20px)) / 2);
}

.contentWrap .whiteBg {
	width: 100%;
	display: flex;
	background-color: #FFF;
	border-radius: var(--size20px);
	flex-direction: column;
	margin: var(--size15px) auto 0;
	padding: var(--size25px);
	font-size: var(--size20px);
	font-weight: 700;
	text-align: left;
}

.contentWrap h4 {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	font-size: var(--size32px);
	margin-bottom: var(--size40px);
}
.contentWrap h4 span {
	font-size: var(--size18px);
}


/*---参考---*/
.reference{
	margin: 0 auto;
}
.reference h3{
	margin-bottom: var(--size10px);
}
.reference li{
	font-size: var(--size16px);
}
.reference li:not(:last-child) cite{
	margin-bottom: var(--size10px);
}
.reference cite{
	display: inline-block;
}
.reference a:hover {
	color: var(--mainBlue);
}


.backBtn a{
	font-size: var(--size18px);
    text-align: center;
    color: var(--mainBlue);
    border: solid 1px var(--mainBlue);
    border-radius: 100vmax;
    font-weight: 700;
    padding: var(--size10px) var(--size40px);
    white-space: nowrap;
    display: block;
    background-color: #FFF;
    margin: var(--size80px) auto 0;
	width: fit-content;
}
.backBtn a:hover{
	color: #fff;
    border: solid 1px #fff;
	background-color: var(--mainBlue);
}

/* Connect with us */
.connectSection {
	margin-top: 3.75rem;
}
.connectSection {
	margin-top: 3.75rem;
}
.connectSection h4 {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	font-size: var(--size32px);
	margin-bottom: var(--size40px);
}
.connectSection h4 span {
	font-size: var(--size18px);
}
.connectSection picture {
	margin:0 0 0 0;
}
.connectSection .row picture {
	width:calc((100% - var(--size10px)) / 2);
}

.connectSection .rowSpColumn {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.connectSection .rowSpColumn div {
	width:calc((100% - var(--size20px)) / 2);
}

/* sns 追加 */
.relative {
	position: relative;
}
.relative ul {
	display: flex;
	position: absolute;
	top: 20px;
	right: 0;
	justify-content: space-between;
	width: fit-content;
	gap: 10px;
	width: 250px;
	padding: 0 10px;
}
.relative ul li a img {
	width: 105px;
}
.relative ul li:first-child a img {
	width: 80px;
}
.relative ul li:last-child a img {
	width: 28px;
}

/*▼legend -----------------------*/
#legend {
	background: #E5E1D7;
}
#legend header {
	background: none;
	margin-bottom: 0;
}
#legend header h1 {
	background: var(--mainBlack);
	margin: 0 auto;
	width: unset;
	max-width: unset;
	line-height: unset;
	padding: 0;
}
#legend header h1 a {
	padding: var(--size15px);
	margin: 0 auto;
	width: 70%;
	max-width: 453px;
	line-height: 1;
}
#legend header .mainLogoWrap {
	border-bottom: 1px solid var(--mainBlack);
	margin-bottom: 40px;
}
#legend header .mainLogoWrap .mainLogArea {
	display: flex;
	justify-content: center;
	padding: 25px 0;
	border-bottom: 6px solid;
	margin-bottom: 8px;
}
#legend #mainWrap .mainImg {
	background: #E5E1D7;
	border-radius: 0;
}
#legend .contentWrap .contentDsd p span.blueText {
	color: var(--mainBlue);
	font-weight: 700;
}
#legend .contentWrap h3 {
	color: var(--mainBlack);
	border-top: solid var(--size1px) var(--mainBlack);
	border-bottom: solid var(--size1px) var(--mainBlack);
	padding: var(--size20px) 0;
}
#legend .contentWrap h3:before {
	content: none;
}
#legend .contentWrap .imgArea {
	margin-top: var(--size50px);
	margin-bottom: var(--size50px);
}
#legend .contentWrap .imgArea.mtHigh {
	margin-top: 75px;
}
#legend .contentWrap .imgArea.mbHigh {
	margin-bottom: 220px;
}
#legend .contentWrap .imgArea figure {
	position: relative;
}
#legend .contentWrap .imgArea figure.imgRight {
	display: flex;
	justify-content: end;
}
#legend .contentWrap .imgArea figure picture img {
	width: fit-content;
}
#legend .contentWrap .imgArea figure figcaption {
	border-radius: 0;
	background: rgba(255, 255, 255, 0.8);
	width: fit-content;
	font-weight: normal;
	font-size: var(--size16px);
	position: absolute;
	margin: 0;
}
#legend .contentWrap .imgArea figure figcaption.leftCenter {
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
}
#legend .contentWrap .imgArea figure figcaption.rightUnder {
	right: 0;
	bottom: 30px;
}
#legend .contentWrap .imgArea figure figcaption.rightUpper {
	right: 0;
	top: -30px;
}
#legend .contentWrap .imgArea figure figcaption.leftUnder {
	left: 0;
	bottom: -54%;
	max-width: 570px;
}
#legend .contentWrap .imgArea figure figcaption.centerUnder {
	bottom: -44px;
	left: 50%;
	padding: var(--size25px) var(--size10px);
	transform: translate(-50%, 0px);
	width: max-content;
}
#legend .contentWrap .doubleQuotationArea {
	background: #FFF;
	padding: 30px 70px 20px;
}
#legend .contentWrap .doubleQuotationArea p {
	margin: 0 auto;
	font-weight: 700;
	font-size: var(--size18px);
	line-height: 2.2;
	position: relative;
	display: flex;
	justify-content: center;
}
#legend .contentWrap .doubleQuotationArea p::before {
	content: url(/lib/mirai-pulse/img/detail/roger/ico_quoat_start.png);
	position: absolute;
	top: 10px;
	left: 15px;
}
#legend .contentWrap .doubleQuotationArea p::after {
	content: url(/lib/mirai-pulse/img/detail/roger/ico_quoat_end.png);
	position: absolute;
	right: 15px;
	bottom: 0;
}
#legend .messageWrap {
	position: relative;
	color: #FFF;
	padding-bottom: 132px;
}
#legend .messageWrap .messageArea {
	background: var(--mainBlue);
	padding: 18px 34px 34px;
}
#legend .messageWrap .messageArea h3 {
	color: #FFF;
	border: none;
	padding: 0;
	line-height: 2;
	font-size: var(--size35px);
}
#legend .messageWrap .messageArea h3::after {
	content: '';
	display: inline-block;
	width: 100%;
	max-width: 932px;
	background-image: url(/lib/mirai-pulse/img/detail/roger/bg_pulse.png);
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	height: 46px;
	position: absolute;
	top: 108px;
	left: 50%;
	transform: translate(-50%, 0px);
}


#legend .messageWrap .messageArea p {
	font-size: var(--size20px);
	line-height: 2;
	margin-bottom: 0;
}
#legend .messageWrap .messageArea p::after {
	content: url(/lib/mirai-pulse/img/detail/roger/bg_message.png);
	position: absolute;
	bottom: 0px;
	right: 0;
}

/*▼TB-----------------------*/
@media (max-width: 999px) and (min-width: 768px){
	main {
		padding-left: var(--size20px);
		padding-right: var(--size20px);
	}
	.contentDay {
		border-radius: 0 0 var(--size15px) 0;
		padding: var(--size15px);
	}
	#legend main .spNone.tabNone {
		display: none!important;
	}
	#legend main {
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}
	#legend .contentWrap .imgArea figure picture img.tabW100 {
		width: 100%;
	}
	#legend .contentWrap .imgArea figure figcaption.centerUnder {
		max-width: 100%;
	}
	#legend .contentWrap .doubleQuotationArea p::before {
		content: url(/lib/mirai-pulse/img/detail/roger/ico_quoat_start_sp.png);
		position: absolute;
		top: 10px;
		left: -40px;
	}
	#legend .contentWrap .doubleQuotationArea p::after {
		content: url(/lib/mirai-pulse/img/detail/roger/ico_quoat_end_sp.png);
		position: absolute;
		right: -40px;
		bottom: 0;
	}
	#legend .messageWrap .messageArea h3::after {
		top: 116px;
	}
}

/*▼SP-----------------------*/
@media (max-width: 767px) {
	main {
		width:100%;
		}
	h1 {
		margin: 0 0 0 0;
	}
	.contentWrap .contentDsd .imgArea{
		margin-top: var(--size50px);
		margin-bottom: var(--size50px);
	}
	.contentWrap .imgArea .caption{
		font-size: var(--size12px);
		margin-top: var(--size5px);
		text-align: center;
		margin-bottom: 0;
	}

	/*---メインビジュアル---*/
	#mainWrap {
		margin-bottom: 10vh;
	}
	#mainWrap .mainDetail {
		border-radius: unset;
	}
	#mainWrap .mainDetail p {
		margin: 0 0 var(--size20px) 0;
	}
	#mainWrap .mainImg {
		border-radius: unset;
	}
	#mainWrap h2 {
		font-size: clamp(var(--size16px), 5vw, var(--size20px));
		padding: clamp(var(--size16px), 5vw, var(--size20px));
		border-radius: 0 var(--size25px) var(--size25px) 0;
	}
	#introduction .caption{
		font-size: var(--size12px);
	}

	/* 記事日付 */
	.contentDay{
		font-size: var(--size30px);
		padding: var(--size10px);
	}

	#introduction {
		margin-bottom: 10vh;
	}
	#introduction h3 {
        font-size: var(--size18px);
    }
	#introduction.contentDsd .imgArea {
        margin-top: 10vh;
    }
	#introduction .explanation .interviewee {
		font-size: var(--size18px);
	}

	.contentWrap .whiteBg {
		font-size: var(--size14px);
	}


	/*---目次---*/
	.tableWrap{
		padding: var(--size30px);
		width: 90%;
		margin-bottom: 10vh;
	}
	.tableWrap h3 {
		font-size: var(--size18px);
	}
	.tableWrap li{
		margin:0 0 var(--size20px) 0;
	}
	/*---記事---*/
	.contentWrap h3 {
		font-size: var(--size18px);
		border-bottom: solid var(--size2px) var(--mainBlue);
	}
	.contentWrap figcaption {
		font-size: var(--size12px);
		margin: var(--size5px) 0 0 0;
	}
	.contentDsd {
		width: 90%;
	}
	.contentWrap h3:before{
		width: var(--size25px);
		margin-right: var(--size5px);
	}
	.contentWrap .row picture {
		width:calc((100% - var(--size5px)) / 2);
	}
	.contentWrap .contentGap {
		margin: 0 0 var(--size50px) 0;
	}
	.backBtn a{
		font-size: var(--size14px);
        padding: var(--size5px) var(--size20px);
	}

	.contentWrap .contentLastGap .caption{
		font-size: var(--size12px);
	}

	.contentWrap .rowSpColumn {
		flex-direction: column;
		gap: var(--size40px) 0;
	}
	.contentWrap .rowSpColumn div {
		width: 100%;
	}

	.contentWrap h4 {
		font-size: var(--size24px);
		margin-bottom: var(--size30px);
	}
	.contentWrap h4 span {
		font-size: var(--size14px);
	}

	/*---参考---*/
	.reference{
		width: 90%;
	}
	.reference li{
		font-size: var(--size14px);
	}

/* Connect with us */
	.connectSection {
		width: 90%;
		margin:  var(--size60px) auto 0;
	}
	.connectSection h4 {
		font-size: var(--size24px);
		margin-bottom: var(--size30px);
		display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
	}
	.connectSection h4 span {
		font-size: var(--size14px);
	}
	.connectSection .rowSpColumn {
		flex-direction: column;
		gap: var(--size40px) 0;
    display: flex;
    justify-content: space-between;
	}
	.connectSection .rowSpColumn div {
		width: 100%;
	}
	
	/*▼legend -----------------------*/
	#legend header .mainLogoWrap {
		margin-bottom: 0;
	}
	#legend header .mainLogoWrap .mainLogArea {
		padding: 0;
	}
	#legend .contentWrap h3 {
		font-size: var(--size14px);
		padding: var(--size14px) 0;
	}
	#legend .contentDsd{
		margin: 0 auto var(--size10px);
	}
	#legend .contentWrap picture img {
		width: 100%!important;
	}
	#legend .contentWrap .imgArea {
		margin-top: var(--size20px);
		margin-bottom: 0!important;
	}
	
	#legend .contentWrap .imgArea figure {
		display: block !important;
	}
	#legend .contentWrap .imgArea figure figcaption {
		position: relative;
		display: block !important;
		font-size: var(--size10px);
		padding: var(--size15px) var(--size10px)!important;
		width: 96% !important;
		margin-inline: auto;
		top: unset!important;
		bottom: unset!important;
		left: unset!important;
		right: unset!important;
		transform: translate(0, -20px)!important;
	}
	#legend .contentWrap .imgArea figure figcaption.leftUnder {
		transform: translate(0, 0)!important;
		max-width: unset;
	}
	#legend .contentWrap .imgArea.mbHigh,
	#legend .contentWrap .imgArea.spMbHigh {
		margin-bottom: var(--size50px)!important;
	}
	#legend .contentWrap .imgArea.mtHigh {
		margin-top: 0;
	}
	#legend .contentWrap .imgArea figure figcaption.rightUnder {
		left: 0!important;
		transform: translate(0, -50%)!important;
		width: fit-content!important;
		margin: unset!important;
	}
	#legend .contentWrap .imgArea figure figcaption.spRight {
		position: absolute!important;
		right: 0!important;
		transform: translate(0, -50%)!important;
		width: fit-content!important;
		margin: unset!important;
	}
	#legend .contentWrap .doubleQuotationArea {
		padding: 14px 50px;
	}
	#legend .contentWrap .doubleQuotationArea p {
		font-size: 13px;
		line-height: 2.2;
	}
	#legend .contentWrap .doubleQuotationArea p::before {
		content: url(/lib/mirai-pulse/img/detail/roger/ico_quoat_start_sp.png);
		position: absolute;
		top: 10px;
		left: -40px;
	}
	#legend .contentWrap .doubleQuotationArea p::after {
		content: url(/lib/mirai-pulse/img/detail/roger/ico_quoat_end_sp.png);
		position: absolute;
		right: -40px;
		bottom: 0;
	}
	#legend .messageWrap {
		width: 100%;
		padding-bottom: 62px;
		margin-top: 40px;
	}
	#legend .messageWrap .messageArea {
		padding: 45px 15px;
	}
	#legend .messageWrap .messageArea h3 {
		font-size: var(--size22px);
		margin: 0 0 var(--size20px) 0;
	}
	#legend .messageWrap .messageArea h3::after {
		content: '';
		display: inline-block;
		width: 95%;
		background-image: url(/lib/mirai-pulse/img/detail/roger/bg_pulse_sp.png);
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align: middle;
		height: 46px;
		position: absolute;
		top: 92px;
		left: 50%;
		transform: translate(-50%, 0px);
	}
	#legend .messageWrap .messageArea p {
		font-size: var(--size12px);
	}
	#legend .messageWrap .messageArea p::after {
		content: url(/lib/mirai-pulse/img/detail/roger/bg_message_sp.png);
	}
}