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

Name: newsletter.css
Description: CSS for inclusivesociety News Letter Article Modules
Copyright 2025 The Hitachi Global Foundation.

***************************************************** */

body {
	 -webkit-print-color-adjust: exact;
}

#Contents {
    padding-bottom: 0;
	background-color: #f4f4f4;
}

.NewsLetterArticle {
	background-color: #fff !important;
}

/* ----------------------------------------------------
   Branding
------------------------------------------------------- */

.BrandingNewsLetter {
	background-image: url("/newsletter/images/newslatter_bk.png");
	background-repeat: no-repeat;
	background-position: 0% 100%;
	background-size: cover;
	background-color: #fff;
}
@media screen and (max-width: 1304px) {
	.BrandingNewsLetter {
		background-position: 50% 50%;
	}
}
@media screen and (max-width: 994px) {
	.BrandingNewsLetter {
		background-image: url("/newsletter/images/newslatter_bk_994.png");
		background-position: 0% 100%;
	}
}
/* ----- 記事ページのブランディング色指定 ----- */
.NewsLetterArticle .BrandingNewsLetter {
	background-color: #f4f4f4;
}

/* ----------------------------------------------------
   PageTitleArea
------------------------------------------------------- */

h1.MiddleBrandingTitle {
	color: #222;
    font-size: 375%;
    font-weight: bold;
    line-height: 1.2;
    text-shadow: none;
    margin: 0;
}
@media screen and (max-width: 579px) {
	h1.MiddleBrandingTitle {
		font-size: 287.5%;
	}
}
@media screen and (max-width: 399px) {
	h1.MiddleBrandingTitle {
		font-size: 230%;
	}
}

/* -- UnderArticle -- */
@media screen and (max-width: 579px) {
	.NewsLetterArticle h1.MiddleBrandingTitle {
		text-align: left;
	}
}
@media screen and (max-width: 399px) {
	.NewsLetterArticle h1.MiddleBrandingTitle {
		font-size: 287.5%;
	}
}


.MiddleBrandingArea::after {
	background-color: transparent;
}

.MiddleCatchArea {
	position: relative;
}
@media screen and (max-width: 1304px) {
	.MiddleCatchArea {
		padding: 0 30px 30px;
	}
	.MiddleBrandingInner {
		align-items: center;
	}
}
@media screen and (max-width: 579px) {
	.MiddleCatchArea {
		padding: 0 15px 45px;
	}
}
@media screen and (max-width: 399px) {
	.MiddleCatchArea {
		padding: 0 15px;
	}
}

/* -- UnderArticle -- */
@media screen and (max-width: 579px) {
	.NewsLetterArticle .MiddleCatchArea {
		padding: 0 15px 80px;
	}
}


/* ----------------------------------------------------
   ContentsArea
------------------------------------------------------- */

.ContentsArea {
	position: relative;
	padding: 90px 60px 30px;
}
@media screen and (max-width: 994px) {
	.ContentsArea {
		padding: 90px 30px 30px;
	}
}
@media screen and (max-width: 579px) {
	.ContentsArea {
		padding: 30px 15px 0;
	}
}

.SectionArea {
	box-sizing: border-box;
	margin: 60px 0;
}
@media screen and (max-width: 994px) {
	.SectionArea {
		margin: 30px 0;
	}
}
/* ----------------------------------------------------
   RegistrationArea
------------------------------------------------------- */

.RegistrationArea {
	box-sizing: border-box;
	background-color: #4d4d4d;
	padding:  60px 0;
}

.RegistrationContents {
	width: 1275px;
	margin: 0 auto;
}
@media screen and (max-width: 1304px) {
	.RegistrationContents {
		width: 100%;
	}
}

.ContactArea {
	margin: 0 auto;
}

/* ----------------------------------------------------
   Box
------------------------------------------------------- */
/* ----- リード文 ----- */
.ReadTextBox {
	background-color: #fff;
    box-sizing: border-box;
    border-radius: 15px;
    padding: 30px;
    position: absolute;
    top: -70px;
    width: 1155px;
    margin: 0 auto;	
}
@media screen and (max-width: 1304px) {
	.ReadTextBox {
		width: calc(100% - 120px);
		left: 60px;
	}
}
@media screen and (max-width: 994px) {
	.ReadTextBox {
		width: calc(100% - 60px);
		left: 30px;
		padding: 30px;
	}
}
@media screen and (max-width: 579px) {
	.ReadTextBox {
		width: 100%;
		position: initial;
		padding: 30px;
	}
}

/* ----- 記事ページのリード文背景指定 ----- */
.NewsLetterArticle .ReadTextBox {
	background-color: #f4f4f4;
}

.ReadTextBox p.ReadText {
	color: #222;
	font-weight: bold;
	font-size: 100%;
}
@media screen and (max-width: 994px) {
	.ReadTextBox p.ReadText {
		font-weight: normal;
		font-size: 97%;
	}
}

.ReadTextBox p.ReadTextNormal {
	color: #222;
	font-weight: normal;
	font-size: 100%;
}
@media screen and (max-width: 994px) {
	.ReadTextBox p.ReadTextNormal {
		font-size: 97%;
	}
}

/* ----- 記事3カラムBox ----- */
.LatestBox,
.ArchiveBox {
	box-sizing: border-box;
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
	padding: 0 15px 0 15px;
    width: 100%;
}
@media screen and (max-width: 994px) {
	.LatestBox,
	.ArchiveBox {
		padding: 0 0 0 15px;
	}
}
@media screen and (max-width: 579px) {
	.LatestBox,
	.ArchiveBox {
		padding: 0;
	}
}

a.LinkBoxItem3_1 {
	text-decoration: none;
	box-sizing: border-box;
    border-radius: 15px;
	background-color: #fff;
    color: #333;
    margin: 0 15px 30px 15px;
    width: calc(33.3% - 30px);
	position: relative;
}
@media screen and (max-width: 994px) {
	a.LinkBoxItem3_1 {
		margin: 0 15px 15px 0;
    	width: calc(50% - 15px);
	}
}
@media screen and (max-width: 579px) {
	a.LinkBoxItem3_1 {
		margin: 0 0 15px 0;
    	width: 100%;
	}
}
/* ----- a.LinkBoxItem3_1 hover ----- */
a.LinkBoxItem3_1:hover .MoreBtn {
	background-color: #737373;
	opacity: 1.0;
}
a.LinkBoxItem3_1:hover .MoreBtn p span::after {
	background-position: 100% 50%;
}

/* -- New -- */
.NewItem {
	box-sizing: border-box;
    border-radius: 50%;
    background-color: #cc0000;
    color: #fff;
    font-size: 98%;
    position: absolute;
    top: -27px;
    left: 20px;
    z-index: 999;
    width: 54px;
    height: 54px;
    text-align: center;
    padding: 15px 0 0;
}
@media screen and (max-width: 994px) {
	.NewItem {
		top: -15px;
	}
}

/* ----- サムネイル&テキストのSet ----- */
.ImgTextContainer {
	box-sizing: border-box;
	display: flex;
    flex-direction: column-reverse;
}

.TextContainer {
	box-sizing: border-box;
	padding: 30px;
}
@media screen and (max-width: 994px) {
	.TextContainer {
		padding: 15px;
	}
}
@media screen and (max-width: 579px) {
	.TextContainer {
		padding: 30px;
	}
}

.LatestBox .TextContainer {
	padding: 15px 30px 30px;
}

.ImgContainer img {
	width: 100%;
	height: auto;
	border-radius: 15px 15px 0 0;
	position: relative;
	z-index: 1;
}

.TextContainer h3 {
	color: #222;
	font-size: 187.5%;
	font-weight: normal;
	display: inline-block;
}

.TextContainer h4 {
	color: #222;
	font-size: 100%;
	font-weight: bold;
	margin: 10px 0 0;
}
@media screen and (max-width: 994px) {
	.TextContainer h4 {
		font-size: 90%;
		margin: 8px 0 0;
	}
}

.LeleaseData {
	font-size: 87%;
	display: inline-block;
	box-sizing: border-box;
	padding: 0 0 0 10px;
}

ul.ContentsList {
	box-sizing: border-box;
	padding: 5px 0 0 15px;
	font-size: 87%;
}
ul.ContentsList li {
    list-style-type: disc;
}

/* ----- h3,h4などのコンテンツBoxとして使用 ----- */
.SectionContents {
	box-sizing: border-box;
	padding: 30px;
}
@media screen and (max-width: 579px) {
	.SectionContents {
		padding: 15px;
	}
}
/* ----- リンク用の枠囲みBox ----- */
.LinkBox {
	box-sizing: border-box;
	padding: 30px 30px 30px 60px;
	margin: 30px 0;
	position: relative;
}
@media screen and (max-width: 579px) {
	.LinkBox {
		padding: 15px 15px 15px 45px;
		font-size: 87%;
	}
}
.LinkBox::after {
	content: "";
    background-image: url("/newsletter/images/ico_arrow.png");
    background-size: contain;
    width: 17px;
    height: 28px;
    position: absolute;
    top: 40%;
    left: 30px;
    background-repeat: no-repeat;
}
@media screen and (max-width: 579px) {
	.LinkBox::after {
    	left: 15px;
	}
}

.LinkBoxItem a {
	text-decoration: none;
	overflow-wrap: break-word;
	color: #c02;
}
.LinkBoxItem a:hover {
	text-decoration: underline;
}

/* ----- LinkBoxColumnSet ----- */
.LinkBoxColumnSet {
	box-sizing: border-box;
	display: flex;
    flex-wrap: wrap;
	align-items: center;
    justify-content: flex-start;
    width: 100%;
	padding: 0;
	margin: 0;
}
.LinkBoxColumn1 {
	box-sizing: border-box;
    margin: 0 15px 15px;
    width: calc(90% - 30px);
}
@media screen and (max-width: 994px) {
	.LinkBoxColumn1 {
		width: calc(80% - 30px);
	}
}
@media screen and (max-width: 579px) {
	.LinkBoxColumn1 {
		width: 100%;
		margin: 0 0 15px;
	}
}
.LinkBoxColumn2 {
	box-sizing: border-box;
    margin: 0 15px 15px;
    width: calc(10% - 30px);
}
@media screen and (max-width: 994px) {
	.LinkBoxColumn2 {
		width: calc(20% - 30px);
	}
}
@media screen and (max-width: 579px) {
	.LinkBoxColumn2 {
		width: 100%;
		margin: 0;
	}
}

/* ----- 3カラムBox ----- */
.Column3Box {
	box-sizing: border-box;
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
	padding: 0;
	margin: 30px 0;
}
.Column3Item {
	box-sizing: border-box;
    border-radius: 5px;
    color: #333;
    margin: 0 15px 15px;
    width: calc(33.3% - 30px);
}
@media screen and (max-width: 579px) {
	.Column3Item {
		margin: 0 0 15px;
    	width: 100%;
	}
}
.Column3Item img {
	border-radius: 5px;
}

/* ----- 2カラムBox ----- */
.Column2Box {
	box-sizing: border-box;
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
	padding: 0;
	margin: 30px 0;
}
.Column2Item {
	box-sizing: border-box;
    border-radius: 5px;
    color: #333;
    margin: 0 15px 15px;
    width: calc(50% - 30px);
}
@media screen and (max-width: 579px) {
	.Column2Item {
		margin: 0 0 15px;
    	width: 100%;
	}
}
.Column2Item img {
	border-radius: 5px;
}

/* ----- 1:3カラム ----- */
.Column3Box {
	box-sizing: border-box;
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
	padding: 0;
	margin: 30px 0;
}
.Column3_1Item {
	box-sizing: border-box;
    border-radius: 5px;
    color: #333;
    margin: 0 15px 15px;
    width: calc(33.3% - 30px);
}
@media screen and (max-width: 579px) {
	.Column3_1Item {
		margin: 0 0 15px;
    	width: 100%;
	}
}
.Column3_2Item {
	box-sizing: border-box;
    border-radius: 5px;
    color: #333;
    margin: 0 15px 15px;
    width: calc(66.6% - 30px);
}
@media screen and (max-width: 579px) {
	.Column3_2Item {
		margin: 0 0 15px;
    	width: 100%;
	}
}

.Column3_1Item img,
.Column3_2Item img {
	border-radius: 5px;
}

/* ----- フッター登録ボタン用2カラム ----- */
.RegistrationContents .Column2Box {
	box-sizing: border-box;
	display: flex;
	align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
	padding: 0 15px;
	margin: 30px 0;
}
@media screen and (max-width: 579px) {
	.RegistrationContents .Column2Box {
		margin: 0;
	}
}
.RegistrationContents .Column2Item {
	box-sizing: border-box;
	padding: 0 30px;
    border-radius: inherit;
    color: #333;
    margin: 0;
    width: 50%;
}
@media screen and (max-width: 579px) {
	.RegistrationContents .Column2Item {
		width: 100%;
		padding: 0 30px 15px;
		
	}
}

.RegistrationContents .Line {
	border-right: 1px solid #f4f4f4;
}
@media screen and (max-width: 579px) {
	.RegistrationContents .Line {
		border-right: none;
		border-bottom: 1px solid #f4f4f4;
		margin: 0 0 30px;
	}
}

/* ----- グレー背景PicUP用のスタイル　タグあり ----- */
.PicUpContentsBox {
	box-sizing: border-box;
	padding: 90px 30px 30px;
	background-color: #f4f4f4;
	position: relative;
	margin: 30px 0;
}
@media screen and (max-width: 579px) {
	.PicUpContentsBox {
		padding: 90px 15px 15px;
	}
}
.PicUpContentsTitle {
	box-sizing: border-box;
	color: #fff;
	padding: 15px 30px;
	border-radius: 0 45px 45px 0;
	position: absolute;
	top: 0;
	left: 0;
}
@media screen and (max-width: 579px) {
	.PicUpContentsTitle {
		padding: 15px;
	}
}
/* ----- タグなしの場合にクラス追加 ----- */
.NoItem {
	padding: 30px;
}

/* ----- グレー背景PicUp用のスタイル　Box ----- */
/* ----- 3カラムBox ----- */
.PicUpContentsBox .Column3Box {
	box-sizing: border-box;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
	padding: 0;
	margin: 30px 0;
}
.PicUpContentsBox .Column3Item {
	box-sizing: border-box;
    border-radius: 5px;
    color: #333;
    margin: 0 15px 15px;
	background-color: #f4f4f4;
    width: calc(33.3% - 30px);
}
@media screen and (max-width: 579px) {
	.PicUpContentsBox .Column3Item {
		margin: 0 0 15px;
		width: 100%;
	}
}

/* ----- 2カラムBox ----- */
.PicUpContentsBox .Column2Box {
	box-sizing: border-box;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
	padding: 0;
	margin: 30px 0;
}
.PicUpContentsBox .Column2Item {
	box-sizing: border-box;
    border-radius: 5px;
    color: #333;
    margin: 0 15px 15px;
    width: calc(50% - 30px);
}
@media screen and (max-width: 579px) {
	.PicUpContentsBox .Column2Item {
		margin: 0 0 15px;
		width: 100%;
	}
}
/* ----- 1:3カラム ----- */
.PicUpContentsBox .Column3Box {
	box-sizing: border-box;
	display: flex;
    flex-wrap: wrap;
	align-items: center;
    justify-content: space-between;
    width: 100%;
	padding: 0;
	margin: 0;
}
.PicUpContentsBox .Column3_1Item {
	box-sizing: border-box;
    border-radius: 5px;
    color: #333;
    margin: 0 15px 15px;
	background-color: #f4f4f4;
    width: calc(33.3% - 30px);
}
@media screen and (max-width: 579px) {
	.PicUpContentsBox .Column3_1Item {
		margin: 0 0 15px;
		width: 100%;
	}
}
.PicUpContentsBox .Column3_2Item {
	box-sizing: border-box;
    border-radius: 5px;
    color: #333;
    margin: 0 15px 15px;
	background-color: #f4f4f4;
    width: calc(66.6% - 30px);
}
@media screen and (max-width: 579px) {
	.PicUpContentsBox .Column3_2Item {
		margin: 0 0 15px;
		width: 100%;
	}
}
/* ----- 透明Box ----- */
.FrameTransparent {
	box-sizing: border-box;
	margin: 0 0 20px;
}

/* ----- 下線（白）Box ----- */
.FrameUnderLine {
	box-sizing: border-box;
	border-bottom: 2px dashed #fff;
	margin: 0 0 20px;
}
@media screen and (max-width: 579px) {
	.FrameUnderLine {
		padding: 0 0 15px;
	}
}

/* ----- グレー背景の中野透明Box/下線Box　2:1カラム ----- */
.FrameTransparent .Column3Box,
.FrameUnderLine .Column3Box {
	box-sizing: border-box;
	display: flex;
    flex-wrap: wrap;
	align-items: center;
    justify-content: flex-start;
    width: 100%;
	padding: 0;
	margin: 0;
}

.FrameTransparent .Column3_1Item,
.FrameUnderLine .Column3_1Item {
	box-sizing: border-box;
    border-radius: 5px;
    color: #333;
    margin: 0 15px;
    width: calc(33.3% - 30px);
}
@media screen and (max-width: 579px) {
	.FrameTransparent .Column3_1Item,
	.FrameUnderLine .Column3_1Item {
		width: 100%;
	}
}

.FrameTransparent .Column3_2Item,
.FrameUnderLine .Column3_2Item {
	box-sizing: border-box;
    border-radius: 5px;
    color: #333;
    margin: 0 15px;
    width: calc(66.6% - 30px);
}
@media screen and (max-width: 579px) {
	.FrameTransparent .Column3_2Item,
	.FrameUnderLine .Column3_2Item {
		width: 100%;
	}
}

/* ----------------------------------------------------
   Text/Title
------------------------------------------------------- */

/* ----- 大見出し非表示 ----- */
.HiddenTitle {
	color: transparent;
	text-align: center;
	box-sizing: border-box;
	padding: 30px 0 0;
}
@media screen and (max-width: 994px) {
	.HiddenTitle {
		padding: 0;
	}
}

/* ----- 大見出し ----- */
.SectionHeading {
	color: #222;
	font-size: 325%;
	font-weight: bold;
	text-align: center;
	box-sizing: border-box;
	padding: 90px 0 60px;
}
@media screen and (max-width: 579px) {
	.SectionHeading {
		padding: 60px 15px 30px;
		font-size: 250%;
	}
}

/* ----- 記事大見出し（h2相当） ----- */
.NewsLetterArticle .SectionHeading {
	color: #fff;
	font-size: 200%;
	box-sizing: border-box;
	padding: 20px 30px;
	text-align: left;
	background-image: none;
	margin: 0 0 30px;
	position: relative;
}
@media screen and (max-width: 579px) {
	.NewsLetterArticle .SectionHeading {
		font-size: 125%;
		padding: 20px 15px;
	}
}

.SectionArea .DecoStyle01::after {
	content: "";
    background-color: #004596;
    width: 35px;
    height: 30px;
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
    position: absolute;
    left: 30px;
    bottom: -20px;
}
.SectionArea .DecoStyle02::after {
	content: "";
    background-color: #fa6900;
    width: 35px;
    height: 30px;
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
    position: absolute;
    left: 30px;
    bottom: -20px;
}
.SectionArea .DecoStyle03::after {
	content: "";
    background-color: #00964e;
    width: 35px;
    height: 30px;
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
    position: absolute;
    left: 30px;
    bottom: -20px;
}

/* ----- 記事中見出し（h3相当） ----- */
.SectionTitleh3 {
	box-sizing: border-box;
	border-radius: 15px 15px 0 0;
	font-size: 125%;
	padding: 15px 27px;
	color: #222;
	display: inline-block;
	margin: 0;
}
@media screen and (max-width: 579px) {
	.SectionTitleh3 {
		border-radius: 0;
		font-size: 100%;
		padding: 15px;
		display: block;
	}
}

/* ----- 記事小見出し（h4相当） ----- */
.SectionTitleh4 {
	box-sizing: border-box;
	font-size: 125%;
	padding: 0 0 30px;
	color: #222;
	font-weight: bold;
	margin: 0;
}
@media screen and (max-width: 579px) {
	.SectionTitleh4 {
		font-size: 100%;
		padding: 0 0 15px;
	}
}
/* ----- インデント&余白なし ----- */
.TextIndentStyle1 {
	font-size: 100%;
	text-indent: 1rem;
	margin: 0;
}
@media screen and (max-width: 579px) {
	.TextIndentStyle1 {
		font-size: 95%;
	}
}
/* ----- インデント&余白あり ----- */
.TextIndentStyle2 {
	font-size: 100%;
	text-indent: 1rem;
	margin: 0 0 15px;
}
@media screen and (max-width: 579px) {
	.TextIndentStyle2 {
		font-size: 95%;
	}
}

/* ----- <strong>を使用しない強調 ----- */
.TextBold {
	font-weight: bold;
}

/* ----- 小文字（14px相当） ----- */
.TextSmall {
	font-size: 87%;
	margin: 0;
}

/* ----- 大文字（20px相当） ----- */
.TextLage {
	font-size: 125%;
	margin: 0 0 15px;
}

/* ----- PicUpContentsの中のテキスト指定 ----- */
.FrameTitle {
	box-sizing: border-box;
	border: 1px solid #222;
	background-color: #fff;
	font-size: 100%;
	font-weight: bold;
	padding: 3px 8px 2px 8px;
	display: inline-block;
	margin: 0 0 15px;
}
@media screen and (max-width: 579px) {
	.FrameTitle {
		padding: 3px 8px;
	}
}

.PicUpContentsBox .TextStyle1 {
	font-size: 97%;
}


/* ----------------------------------------------------
   Btn
------------------------------------------------------- */

/* ----- メルマガ登録用 Top ----- */
.RegistrationBtn {
	background-color: #222;
	border-radius: 45px;
	display: inline-block;
	text-align: center;
	position: absolute;
	box-shadow: 10px 10px 10px rgba(164, 163, 163, 0.6);
	top: 5%;
	right: 0%;
}
@media screen and (max-width: 1304px) {
	.RegistrationBtn {
		right: 30px;
		top: -30%;
	}
	/*記事ページのBtn*/
	.NewsLetterArticle .RegistrationBtn {
		right: 30px;
		top: 0%;
	}
}
@media screen and (max-width: 769px) {
	.RegistrationBtn {
		top: 78%;
	}
	/*記事ページのBtn*/
	.NewsLetterArticle .RegistrationBtn {
		top: 72%;
	}
}
@media screen and (max-width: 579px) {
	.RegistrationBtn {
		top: 100%;
		right: 15px;
	}
	/*記事ページのBtn*/
	.NewsLetterArticle .RegistrationBtn {
		top: 72%;
		right: 15px;
	}
}
@media screen and (max-width: 399px) {
	.RegistrationBtn {
		top: 160%;
	}
}

.RegistrationBtn a {
	background-color: #222;
	box-sizing: border-box;
	border-radius: 45px;
	padding: 15px 60px 11px;
	text-decoration: none;
	color: #f4f4f4;
	font-weight: bold;
	font-size: 96%;
	display: block;
	transition: all 0.3s ease;
}
@media screen and (max-width: 769px) {
	.RegistrationBtn a {
		font-weight: normal;
		font-size: 87%;
		padding: 10px 30px 8px;
	}
}

/* -- hover -- */
.RegistrationBtn a:hover {
	background-color: #000;
}

/* ----- フッターのボタン用 ----- */
.RegistrationArea .RegistrationBtn {
	background-color: #cc0000;
	box-sizing: border-box;
	border-radius: 45px;
	display: inline-block;
	text-align: center;
	position: static;
	box-shadow: none;
}
@media screen and (max-width: 994px) {
	.RegistrationArea .RegistrationBtn {
		width: 100%;
	}
}
.RegistrationArea .RegistrationBtn a {
	background-color: #cc0000;
	box-sizing: border-box;
	border-radius: 45px;
	padding: 15px 120px 11px;
	text-decoration: none;
	color: #fff;
	font-weight: normal;
	font-size: 100%;
	transition: all 0.3s ease;
}
@media screen and (max-width: 994px) {
	.RegistrationArea .RegistrationBtn a {
		padding: 15px 0 11px;
	}
}

/* -- hover -- */
.RegistrationArea .RegistrationBtn a:hover {
	background-color: #b20101;
}

/* ----- フッター登録ボタン横テキスト ----- */
.RegistrationText {
	font-size: 100%;
	line-height: 2.0;
	margin: 0;
	color: #fff;
}
@media screen and (max-width: 994px) {
	.RegistrationText {
		line-height: 1.8;
	}
}

/* ----- MoreBtn PageLink ----- */
.MoreBtnContainer {
	text-align: right;
	margin: 15px 0 0;
}

.ImgContainer .MoreBtnContainer {
	text-align: right;
	margin: -20px 15px 0;
	position: relative;
	z-index: 2;
}

.MoreBtn {
	background-color: #4d4d4d;
	box-sizing: border-box;
	border-radius: 45px;
	padding: 8px 8px 8px 20px;
	display: inline-block;
	text-align: center;
}

.MoreBtn p {
	color: #fff;
	font-size: 87%;
}

.MoreBtn p span::after {
	background: url(../../../image/jp/r1/icon/icon_link_right_white_hd.gif) no-repeat 0% 50%;
    background-size: 20px;
    box-sizing: border-box;
    content: "";
    display: inline-block;
    height: 20px;
    margin-left: 5px;
    vertical-align: middle;
    width: 22px;
}

.PdfLink p span::after {
	background: url(../../../image/jp/r1/icon/icon_pdf_white_hd.png) no-repeat 0% 50%;
    background-size: 20px;
    box-sizing: border-box;
    content: "";
    display: inline-block;
    height: 20px;
    margin-left: 5px;
    vertical-align: middle;
    width: 22px;
}

/* ----- さらに表示するボタン ----- */
button.MoreDisplay {
	box-sizing: border-box;
	background-color: #fff;
    border: none;
    cursor: pointer;
	color: #4d4d4d;
	font-size: 100%;
	font-weight: bold;
    outline: none;
    padding: 30px 0;
    width: calc(100% - 60px);
    margin: 30px 30px 90px;
	position: relative;
  	display: flex;
  	justify-content: center;
  	align-items: center;
	transition: all 0.3s ease;
}
@media screen and (max-width: 994px) {
	button.MoreDisplay {
		width: calc(100% - 30px);
		margin: 30px 15px 90px;
	}
}
@media screen and (max-width: 579px) {
	button.MoreDisplay {
		padding: 30px;
		justify-content: flex-start;
		width: 100%;
		margin: 30px 0 60px;
	}
}

button.MoreDisplay::after {
	content: '＋';
    display: inline-block;
    position: absolute;
    width: 54px;
    height: 54px;
    line-height: 54px;
    font-size: 1.5rem;
    border: 2px solid;
    border-radius: 100px;
    right: 27px;
}

/* -- hover --*/
button.MoreDisplay:hover {
	background-color: #d9d9d9;
	color: #222;
}

/* --------------------------------------------------------------------------------------------------------
 
   第三階層（記事ページ固有の指定）

----------------------------------------------------------------------------------------------------------- */
/* ----- h1背景の装飾 ----- */
.BkTitle01 {
	box-sizing: border-box;
	padding: 5px 15px;
	font-size: 50%;
	font-weight: normal;
	background-color: #fff;
	display: inline-block;
	margin: 0 0 5px;
}
.BkTitle02 {
	box-sizing: border-box;
	padding: 5px 15px;
	font-size: 80%;
	background-color: #fff;
	display: inline-block;
}
.BkTitle03 {
	box-sizing: border-box;
	padding: 5px 15px;
	font-size: 40%;
	font-weight: normal;
	background-color: #fff;
	display: inline-block;
}

/* ----- ページ内リンク ----- */
ul.AnchorLink {
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
	margin: 60px 15px 0 0;
}
@media screen and (max-width: 579px) {
	ul.AnchorLink {
		margin: 30px 15px 0 0;
	}
}

ul.AnchorLink li {
	box-sizing: border-box;
	border: 3px solid #222;
    border-radius: 25px;
	background-color: #fff;
	padding: 8px 30px 6px 30px;
    color: #333;
	font-size: 100%;
	margin: 0 15px 30px 15px;
    width: calc(33.3% - 30px);
	place-content: center;
}
@media screen and (max-width: 994px) {
	ul.AnchorLink li {
		font-size: 87%;
		padding: 8px 30px;
		margin: 0 7.5px 30px 7.5px;
    	width: calc(33.3% - 15px);
	}
}
@media screen and (max-width: 579px) {
	ul.AnchorLink li {
		font-size: 87%;
		padding: 8px 30px;
		margin: 0 7.5px 15px 7.5px;
    	width: calc(100% - 15px);
	}
}


ul.AnchorLink li a {
	display: block;
	text-decoration: none;
}

/*-- PDFダウンロードボタン --*/
.DownloadPdfWrapper {
	text-align: right;
	box-sizing: border-box;
	margin-top: 15px;
}
.DownloadPdfWrapper a {
	background-color: #cc0000;
	text-decoration: none;
	color: #fff;
	font-size: 90%;
	box-sizing: border-box;
	display: inline-block;
	padding: 10px 30px;
	border-radius: 5px;
	transition: all 0.3s ease;
}
.DownloadPdfWrapper a span::after {
	background: url(../../../image/jp/r1/icon/icon_pdf_white_hd.png) no-repeat 0% 50%;
    background-size: 20px;
    box-sizing: border-box;
    content: "";
    display: inline-block;
    height: 20px;
    margin-left: 5px;
    vertical-align: middle;
    width: 22px;
}

/* -- hover -- */
.DownloadPdfWrapper a:hover {
	background-color: #b20101;
}
.DownloadPdfWrapper a span:hover::after {
	background-position: 100% 50%;;
}


/* ----------------------------------------------------
 Color
------------------------------------------------------- */

/* ----- 背景色　----- */
.BkStyle01 {
	background-color: #004596 !important;
}
.BkStyle02 {
	background-color: #fa6900 !important;
}
.BkStyle03 {
	background-color: #00964e !important;
}

/* ----- 文字色　----- */
.ColorStyle01 {
	color: #004596 !important;
}
.ColorStyle02 {
	color: #fa6900 !important;
}
.ColorStyle03 {
	color: #00964e !important;
}

/* ----- Link ----- */
.ColorStyle01 a {
	color: #004596 !important;
}
.ColorStyle02 a {
	color: #fa6900 !important;
}
.ColorStyle03 a {
	color: #00964e !important;
}

/* ----- 線色　----- */
.BorderStyle00 {
	border: 1px solid #4d4d4d !important;
}
.BorderStyle01 {
	border: 1px solid #004596 !important;
}
.BorderStyle02 {
	border: 1px solid #fa6900 !important;
}
.BorderStyle03 {
	border: 1px solid #00964e !important;
}

/* ----- 枠色 ----- */
.FrameStyle01 {
	border-top: 3px solid #004596;
	border-left: 3px solid #004596;
	border-right: 3px solid #004596;
}
.FrameStyle01Item {
	border-top: 3px solid #004596;
}
@media screen and (max-width: 579px) {
	.FrameStyle01 {
		border-top: 3px double #004596;
		border-left: 3px double #004596;
		border-right: 3px double #004596;
	}
	.FrameStyle01Item {
		border-top: 3px double #004596;
	}
}

.FrameStyle02 {
	border-top: 3px solid #fa6900;
	border-left: 3px solid #fa6900;
	border-right: 3px solid #fa6900;
}
.FrameStyle02Item {
	border-top: 3px solid #fa6900;
}
@media screen and (max-width: 579px) {
	.FrameStyle02 {
		border-top: 3px double #fa6900;
		border-left: 3px double #fa6900;
		border-right: 3px double #fa6900;
	}
	.FrameStyle02Item {
		border-top: 3px double #fa6900;
	}
}

.FrameStyle03 {
	border-top: 3px solid #00964e;
	border-left: 3px solid #00964e;
	border-right: 3px solid #00964e;
}
.FrameStyle03Item {
	border-top: 3px solid #00964e;
}
@media screen and (max-width: 579px) {
	.FrameStyle03 {
		border-top: 3px double #00964e;
		border-left: 3px double #00964e;
		border-right: 3px double #00964e;
	}
	.FrameStyle03Item {
		border-top: 3px double #00964e;
	}
}

/* ----- AnchorLink　----- */
.AnchorLink .BorderStyle01 {
	border: 3px solid #004596 !important;
	position: relative;
	transition: all 0.3s ease;
}
.AnchorLink .BorderStyle02 {
	border: 3px solid #fa6900 !important;
	position: relative;
	transition: all 0.3s ease;
}
.AnchorLink .BorderStyle03 {
	border: 3px solid #00964e !important;
	position: relative;
	transition: all 0.3s ease;
}

.AnchorLink .BorderStyle01::after {
	content: "";
    background-color: #004596;
    width: 15px;
    height: 13px;
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
    position: absolute;
    right: 21px;
    top: 38%	
}
.AnchorLink .BorderStyle02::after {
	content: "";
    background-color: #fa6900;
    width: 15px;
    height: 13px;
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
    position: absolute;
    right: 21px;
    top: 38%	
}
.AnchorLink .BorderStyle03::after {
	content: "";
    background-color: #00964e;
    width: 15px;
    height: 13px;
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
    position: absolute;
    right: 21px;
    top: 38%	
}

/* -- hover -- */
.AnchorLink .BorderStyle01:hover::after {
	top: 42%
}
.AnchorLink .BorderStyle02:hover::after {
	top: 42%
}
.AnchorLink .BorderStyle03:hover::after {
	top: 42%
}

/* ----------------------------------------------------
 js
------------------------------------------------------- */
/* ----- さらに表示するボタンの初期設定 ----- */
.ArchiveBox a.is-hidden {
	display: none;
}

@media screen and (max-width: 579px) {
	.AdjustMt579 {
		margin-top: 30px;
	}
}