@charset "utf-8";
/* ===================================================================
  実践事例
=================================================================== */
@import 'caseblock.css?220106'; /* Cloud導入事例の各ブロック用 */

/* 基本タグの再定義
------------------------------------------------------------------- */

* + p {
	margin: 0 0 1em 0;
}

.text-center{text-align: center !important;}
.text-left{text-align: left !important;}
.text-strong{font-weight: 500;}

/* ===================================================================
  margin
=================================================================== */
.margin-top {
	margin-top: 5% !important;}

.margin-bottom {
	margin-bottom: 5% !important;}

.margin-top-sm,
.margin-top-xs{
	margin-top: 3% !important;}

.margin-bottom-sm,
.margin-bottom-xs{
	margin-bottom: 3% !important;}

.margin-top-lg,
.margin-top-xl{
	margin-top: 8% !important;}

.margin-bottom-lg,
.margin-bottom-xl{
	margin-bottom: 8% !important;}

.margin-right-xxs,
.margin-left-xxs{
	margin-right: 1.5% !important;}


@media screen and (min-width: 48em) {
	.margin-top,
	.margin-bottom {
		margin-top: 3em !important;}

	.margin-top-xs,
	.margin-bottom-xs {
		margin-top: 1em !important;}

	.margin-top-sm,
	.margin-bottom-sm {
		margin-top: 2em !important;}

	.margin-top-lg,
	.margin-bottom-lg {
		margin-top: 4em !important;}

	.margin-top-xl,
	.margin-bottom-xl {
		margin-top: 5em !important;}

	.margin-right-xxs,
	.margin-left-xxs{
		margin-right: .5em !important;}
}


/* ===================================================================
  width
=================================================================== */

.width-max730{
	max-width: 730px;
}
.width-max640{
	max-width: 640px;
}
.width-max500{
	max-width: 500px;
}
.width-max400{
	max-width: 400px;
}


/* ===================================================================
  float
=================================================================== */

.contents__block + .contents__block--floatbox {
	overflow: hidden;
	margin: 2em 0 0 ;
}
.floatbox {
	overflow: hidden;
}

/* contents
------------------------------------------------------------------- */
.display-pc {
	display: none;
}
.contents--report{
	margin-top: -10vw;
}

@media only screen and (min-width: 768px) {

	.display-sp {
		display: none;
	}
	.display-pc {
		display: block;
	}
	.contents--report{
		margin-top: -5rem;
	}
}

/*  copy
------------------------------------------------------------------- */
.contents__copy{
	font-weight: 600;
	font-family: "游明朝体", "Yu Mincho", YuMincho;
	padding: 1.5em 0;
	text-align: left;
	font-size: 1.5em;
	color: #0985c8;}


@media screen and (min-width: 48em) {
	.contents__copy{
		text-align: center;
		font-size: 2em;}
}

/* title
------------------------------------------------------------------- */
.l-title--case{
	background: url("../img/ttl_bg_case.jpg?2106") center / cover
}
.l-title--case::after {
	content: "";
	background: url("../img/badge.png");
	background-size: contain;
	width: 18vw;
	height: 18vw;
	display: block;
	position: absolute;
	top: auto;
	right: 5%;
	bottom: -50px;
	z-index: 1;
}
@media only screen and (min-width: 768px) {
	.l-title--case{
		background: url("../img/ttl_bg_case.jpg?2106") right center / cover;
	}
	.l-title--case::after {
		width: 138px;
		height: 138px;
		right: 5%;
	}
}
@media only screen and (min-width: 1024px) {
	.l-title--case::after {
		right: calc(50% - 500px);
	}
}

/*  detail-item
------------------------------------------------------------------- */


/* ===================================================================
  記事詳細ページ
=================================================================== */
/* ===================================================================
  layout
=================================================================== */
.layout-center {
	text-align: center !important;}

.layout-left {
	text-align: left !important;}

.layout-right {
	text-align: right !important;}

.float-left,
.float-right,
.float-left-w250,
.float-right-w250,
.float-left-w400,
.float-right-w400{
	margin-bottom: 1em !important}

@media screen and (min-width: 48em) {
	.float-left{
		float: left !important;
		margin-right: 2em !important;}

	.float-right{
		float: right !important;
		margin-left: 2em !important;}

	.float-left-w250{
		float: left !important;
		margin-right: 2em !important;
		max-width: 250px;}

	.float-right-w250{
		float: right !important;
		margin-left: 2em !important;
		max-width: 250px;}


	.float-left-w250{
		float: left !important;
		margin-right: 2em !important;
		max-width: 400px;}

	.float-right-w400{
		float: right !important;
		margin-left: 2em !important;
		max-width: 400px;}
}

/* ===================================================================
  figure
=================================================================== */

main .contents--report img {
	margin: 0 auto;
}

figure {
	clear: both;
	display: table;
}

figure img{
	display: block;
	width: 100%;
}

figcaption {
	display: table-caption;
}

.fig-caption {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	color:#1B5E92;
	margin: 0.5em 0;
	text-indent: -1.4em;
	padding-left: 1.4em;
	text-align: left;
}

.fig-diagram,
.fig-table {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	margin: 0.5em 0;
	text-align: left;
}

.diagram-icon {
	display: inline-block;
	background-color: #0075c2;
	color:#fff;
	font-weight: normal;
	border-radius: 3px;
	padding: 1px 5px;
	line-height: 1.4;
}

.fig-caption--top,
.fig-diagram--top{
	caption-side: top;
}

.fig-caption--bottom,
.fig-diagram--bottom{
	caption-side: bottom;
}

.table-icon {
	display: inline-block;
	background-color: #FFF;
	color:#0075c2;
	border: 1px solid #0075c2;
	font-weight: normal;
	border-radius: 3px;
	padding: 1px 5px;
	line-height: 1.4;
}


/* ===================================================================
  heading
=================================================================== */
.contents--report .heading {
	display: block;
	font-size: .938rem;
	font-weight: 500;
	color: #4bacd5;
	border-radius: 3px;
	padding: 0;
	margin-bottom: .5em;
	color: #e8652b;
}

.contents--report .page-title{
	font-size: 1.5rem;
	margin: .5rem 0;
}
@media screen and (min-width: 48em) {
	.contents--report .heading {
		font-size: 1.125rem;
	}
	.contents--report .page-title{
		font-size: 2rem;
	}
}

/* ===================================================================
  プロフィール
=================================================================== */
.l-profile {
	padding: 5%;
	border-radius: 8px;
	background: #f5f5f5;
	margin: 0;
}
.contents__block + .l-profile,
.l-profile + .contents__block {
	margin: 8% 0 0 0;
}
main .contents--report img.profile__img {
	display: table;
	max-width: 100%;
	height: auto;
	margin: 0 auto 1.25em auto;
}
.profile__name {
	font-size: 1.125rem;
	font-weight: 500;
	margin: 0 0 .2em 0;
}
.profile__name__sm {
	display: inline-block;
	font-size: 1rem;
	margin-left: .2em;
}
.profile__subname {
	font-size: 1em;
	line-height: 1.6;
	margin: 0;
}
.profile__detail {
	font-size: 1em;
	line-height: 1.6;
	margin: 1em 0 0 0;
	padding-top: 1em;
	border-top: 1px solid #d6dee6;
}
@media screen and (min-width: 35.5em) {
	.l-profile {
		padding: 2em;
		display: flex;
		align-items: center;
	}
	main .contents--report img.profile__img {
		display: inline-block;
		margin: 0 1.25em 0 0;
	}
	.profile__name {
		font-size: 1.375rem;
	}
}
@media screen and (min-width: 48em) {
	.contents__block + .l-profile,
	.l-profile + .contents__block {
		margin: 3em 0 0 0;
	}
}


/* ===================================================================
  list
=================================================================== */
ul > li:first-child{margin-top: 0;}

.list-none,
.list-inline,
.list-normal,
.list-note,
.list-note-number,
.list-annotation{
	margin: 1em 0;
	padding: 0;
	list-style: none;}

.list-none--sm,
.list-sm,
.list-normal--sm,
.list-note--sm,
.list-note-number--sm,
.list-annotation--sm{
	font-size: 0.9em;}

.list-none{
	margin: 0;}

.list-normal li,
.list-note li,
.list-note-number li,
.list-annotation li{
	margin: 0 0 .4em 0;}

.list-none.pure-g li{
	margin: 0;}

.list-normal.pure-g li,
.list-note.pure-g li,
.list-note-number.pure-g li,
.list-annotation.pure-g li{
	margin: 0 0 .4em 0;}

.list-margin-bottom li {
	margin-bottom: 1.6em;}

/* ・-- ・-- ・-- */
.list-inline li {
	display: inline-block;
	margin: 0 1em 0 0;}

.list-inline li:before {
	content: '・';
	color: #444;}

/* ・-- */
.list-normal li {
	padding-left: 1em;
	text-indent: -1em;}

.list-normal li:before {
	content: '・';
	color: #444;}

/* ※-- */
.list-note li {
	margin-left: 1.4em;
	text-indent: -1.4em;}

.list-note li:before {
	display: inline-block;
	width: 1.4em;
	content: '※';
	text-indent: 0;}

/* 1.---- 2.---- 3.--- */
.list-note-number li {
	margin-left: 2em;
	counter-increment: calc-ex9;
	text-indent: -2em;}

.list-note-number li:before {
	display: inline-block;
	width: 2em;
	content: counter(calc-ex9)'.';
	text-indent: 0;}

/* ※1.---- ※2.---- ※3.--- */
.list-annotation {
	margin-left: 2em;}

.list-annotation > li {
	margin-left: 1.2em;
	list-style-type: none;
	counter-increment: annotation;
	text-indent: -3em;}

.list-annotation > li:before {
	display: inline-block;
	width: 3em;
	content: '\203B'counter(annotation);
	text-indent: 0;}

/* (1)---- (2)---- (3)--- */
.list-note-parentheses{
	margin-left: 2em;}
.list-note-parentheses li {
	list-style-type:none;
	counter-increment: cnt;}
.list-note-parentheses li:before {
	display:inline-block;
	content:"(" counter(cnt) ") ";
	margin-left:-3em;
	width: 3em}

/*  文字装飾
------------------------------------------------------------------- */
.accent{
	border-bottom:1px solid #54483d;
}

/*  取材日
------------------------------------------------------------------- */
.report_day {
	font-size: 90%;
	border-top: 1px solid #CCC;
	margin-top: 50px;
	padding: 5px 0;
	text-align: right;
}

/* ===================================================================
  そのほかの事例
=================================================================== */
.l-case-studies {
	padding-block: 15vw;
	background-color: #f5f5f5;
}

@media screen and (min-width: 48em) {
	.l-case-studies {
	padding-block: 6em;
	}
}

.case-studies {
	max-width: 62.5rem;
	margin: 0 auto;
	padding: 0 5vw;
	box-sizing: border-box;
}

.case-studies__title {
	position: relative;
	margin: 0 0 40px 0;
	padding-left: 1em;
	font-size: 24px;
	text-align: left;
}

.case-studies__title:before {
	position: absolute;
	content: "";
	top: 0;
	right: auto;
	bottom: 0;
	left: 0;
	width: 12px;
	height: 8px;
	margin: auto;
	transform: rotate(-45deg);
	border-bottom: 2px solid #F8692A;
	border-left: 2px solid #F8692A;
}

@media screen and (min-width: 48em) {
	.case-studies__title {
	font-size: 26px;
	}
}

.case-studies__list {
	margin: 0;
	padding: 0;
}

.case-studies__list .post {
	list-style: none;
	margin: 0;
}

.case-studies__list .post a {
	display: flex;
	gap: 5vw;
}

.case-studies__list .post + .post {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid #ddd;
}

@media screen and (min-width: 48em) {
	.case-studies__list .post a {
	gap: 32px;
	}
}

.case-studies__list .post__thumb {
	width: 30vw;
	flex-shrink: 0;
	border-radius: 6px;
	overflow: hidden;
	height: fit-content;
	aspect-ratio: 4 / 3;
}

@media screen and (min-width: 48em) {
	.case-studies__list .post__thumb {
	width: 200px;
	border-radius: 10px;
	}
}

.case-studies__list .post__thumb > img {
	width: 100%;
	height: auto;
	margin: 0;
	vertical-align: bottom;
}

.case-studies__list .post__detail {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.case-studies__list .post__detail__title {
	font-size: 16px;
	margin-bottom: 1em;
}

@media screen and (min-width: 48em) {
	.case-studies__list .post__detail__title {
	font-size: 20px;
	}
}

.case-studies__list .post__detail__name {
	margin: auto 0 0 0;
	background-color: #fff;
	font-size: 14px;
}

.case-studies__list .label {
	color: #54483d;
}

.case-studies__list .catLabel,
.case-studies__list .catLabel-type {
	background-color: #e8652b;
}

.case-studies__list .catLabel--elementary,
.case-studies__list .catLabel-type--elementary {
	background-color: #e8652b;
}

.case-studies__list .catLabel--middle,
.case-studies__list .catLabel-type--middle {
	background-color: #ec9126;
}

.case-studies__list .catLabel--high,
.case-studies__list .catLabel-type--high {
	background-color: #e8cc2b;
}

/*  実践レポート
------------------------------------------------------------------- */
/* ===================================================================
  contents
=================================================================== */
.contents--report{
	max-width: 62.5rem;
	padding: 0 5vw;
	box-sizing: border-box;
}

@media screen and (min-width: 48em) {
	.contents--report{
		padding: 0 90px;
	}
}


/* .contents--report .img-center {
	width: 100%;
} */

.contents__block--frame {
	border: 1px solid #d6dee6;
	border-radius: 8px;
}

.contents__frame__inner {
	padding: 5%;
}

@media screen and (min-width: 48em) {
	.contents__frame__inner {
		padding: 2em;
	}
	.contents__frame__inner > p{
		margin-top: 0 !important;
	}
}

/* ===================================================================
  headding
=================================================================== */
.contents__header{
	line-height: 1.35;
	margin: 5% 0 1em 0;
	position: relative;}

.contents__header + .contents__header{
	margin-top: 3%;}

.contents__header .label{
	font-size: .938rem;
	margin-bottom: 1em;
}

.contents__header--Lv2 {
	padding-left: .8em;
	position: relative;
}

.contents__header--Lv2__sub{
	font-size: .938rem;
	font-weight: 400;
	display: block;
}

.contents__header--Lv2::before {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 2px;
	background: #4bacd5;
	margin: auto auto auto 0;
}

.contents__header--Lv3 {
	padding-bottom: .5em;
	border-bottom: 1px solid #d6dee6;
}

.contents__header--Lv3::after {
	position: absolute;
	content: "";
	border-bottom: 1px solid #4bacd5;
	bottom: -1px;
	left: 0;
	width: 20%;
	max-width: 5em;
}

.contents__header--Lv3__sub{
	font-size: .875rem;
	font-weight: 400;
	display: block;
}

.contents__header--Lv3__frame {
	padding: 5%;
	margin: 0;
	background: #eef6fa;
	border-radius: 8px 8px 0 0;
}

.contents__header--Lv4,
.contents__header--Lv4__frame {
	color: #0985c8;
	line-height: 1.6;
}

.contents__header--Lv4__frame {
	margin: 0 0 1em 0;
}


.headerLabel--blue{
	display: inline-block;
	border:1px solid #4bacd5;
	color: #4bacd5;
	font-size: 70%;
	padding: .1em 2em;
	border-radius: 5px;
	margin-bottom: .5em;
	font-style: normal;
}

@media screen and (min-width: 48em) {
	.contents__header{
		margin: 2em 0 1em 0;
	}

	.contents__header .label{
		font-size: 1rem;
	}

	.contents__header + .contents__header{
		margin-top: 1em;
	}

	.contents__header--Lv1{ /* 35px */
		font-size: 2.1875rem;
		font-weight: 600;
		margin-top: 1em;
	}

	.contents__header--mincho{
		font-size: 2rem;
	}

	.contents__header--Lv2{ /* 26px */
		font-size: 1.625rem;
		font-weight: 600;
		padding-left: .8em;
	}

	.contents__header--Lv2::before {
		position: absolute;
		content: "";
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		height: 100%;
		width: 4px;
		background: #4bacd5;
		margin: auto auto auto 0;
	}

	.contents__header--Lv2__sub{
		font-size: 1.25rem;
		margin-bottom: .2em;
	}

	.contents__header--Lv3{ /* 24px */
		font-size: 1.5rem;
		font-weight: 600;
		padding-bottom: .5em;
		border-bottom: 1px solid #d6dee6;
	}

	.contents__header--Lv3::after {
		position: absolute;
		content: "";
		border-bottom: 1px solid #4bacd5;
		bottom: -1px;
		left: 0;
		width: 20%;
		max-width: 5em;
	}

	.contents__header--Lv3__frame {
		padding: 1em 1.4em;
		margin-bottom:0 ;
		border-bottom: none;
	}

	.contents__header--Lv3__sub{
		font-size: 1rem;
	}

	.contents__header--Lv4,
	.contents__header--Lv4__frame{ /* 20px */
		font-size: 1.25rem;
		color: #0985c8;
		margin: 0 0 .6em;
	}

	.contents__header--Lv5{ /* 18px */
		font-size: 1.1rem;
		margin-bottom: .6em;
	}

}

/*  label
------------------------------------------------------------------- */
.label {
	font-size: .75rem;
	font-weight: 500;
	margin: 0;
	line-height: 1.2;
	display: flex;
	align-items:  flex-start;
	flex-direction: column;
}
.contents--report .label {
	color: #999;
}

@media screen and (min-width: 48em) {
	.label {
		font-size: 1em;
		align-items: center;
		flex-direction: row;
	}
}

/*  catLabel
------------------------------------------------------------------- */
.catLabel,
.catLabel-type {
	font-size: .75rem;
	color: #FFF;
	padding: .5em .8em .4em .8em;
	margin-bottom: .4em;
	margin-right: 1em;
	border-radius: 3px;
	line-height: 1.2;
	font-weight: 300;
	display: inline-block;
	min-width: 3em;
}
.contents--report .catLabel,
.contents--report .catLabel-type {
	background-color: #e8652b;
}
.contents--report .catLabel--elementary,
.contents--report .catLabel-type--elementary {
	background-color: #e8652b;
}
.contents--report .catLabel--middle,
.contents--report .catLabel-type--middle {
	background-color: #ec9126;
}
.contents--report .catLabel--high,
.contents--report .catLabel-type--high {
	background-color: #e8cc2b;
}

@media screen and (min-width: 48em) {
	.catLabel,
	.catLabel-type {
		margin-bottom: 0;
	}
}

/*  material
------------------------------------------------------------------- */
.numberIcon {
	padding-left: 1.5em;
	display: inline-block;
	width: 20px;
	height: 20px;
	padding: 5px 4px;
	margin: 3px 5px 5px 0;
	background-color: #91c02c;
	color: #FFF;
	line-height: .7em;
	font-size: .9rem;
	border-radius: 10px;
	text-align: center;
}
.numberIcon--lg {
	width: 35px;
	height: 35px;
	padding: 0;
	margin: 0 5px 0 0;
	line-height: 1.3em;
	font-size: 1.5rem;
	border-radius: 20px;
}
.box__inner {
	padding: 10px;
	margin: 10px 0;
	line-height: 1.5em;
	border: 1px solid #4BACD5;
	display: block;
}
.contents__block--floatbox {
	overflow: hidden;
}




/* ===================================================================
 table
=================================================================== */
.contents__table {
	width: 100%;
	margin: 2em 0;
	border-collapse: collapse;
	background-color: #fff;}

.contents__table--sm{
	font-size: .9em;}

.contents__table th,
.contents__table td {
	padding: .8em;
	border: 1px solid #d6dee6;
	vertical-align: top;}

.contents__table th {
	font-weight: 500;
	background-color: #f2efe8;
	color: #444;}

.contents__table th:last-child {
	border-right: 1px solid #d6dee6;}

.tangen {
	margin-top: .5em;
	padding-top: .5em;
	border-top: 1px dotted #DDD;
}
.tangen__title td {
	font-weight: 500;
	text-align: center;
	color: #0985c8;
	background-color: #DEF1FB;
}
.table__tangen td:first-child {
	text-align: center;
	font-weight: 500;
}
.honji th,
.honji td {
	background-color: #E0EFC3;
}
.team__icon > p {
	border-radius: 3px;
	background-color: #4BACD5;
	color:#FFF;
	text-align: center;
	padding: 2%;
	font-size: 0.75rem;
}

.table-title--vertical {
	writing-mode: vertical-lr;
	width:1.6rem;
	vertical-align: middle;
}

.table-text-right {
    text-align: right;
}

.table-text-center {
    text-align: center;
}

/* table-scroll
-------------------------------------------------------------------- */
.table-scroll {
	overflow: auto;
	display: block;}

.table-scroll th{
	min-width: 10em;
	padding: .2em 1em !important;}

.table-scroll td {
	min-width: 10em;}

.table-scroll ::-webkit-scrollbar {
	height: 5px;}

.table-scroll ::-webkit-scrollbar-track {
	background: #fff;}

.table-scroll ::-webkit-scrollbar-thumb {
	background: #f0f0f0;}

td.bt-none{border-top: none;}
td.bb-none{border-bottom: none;}

@media screen and (min-width: 48em) {
	.table-scroll {
		overflow: visible;
		display: table;}

	.table-scroll th{
		min-width: auto;
		padding: .8em 1em !important;}

	.table-scroll td {
		min-width: auto;}
}


/*  video
-------------------------------------------------------------------- */
.youtubeWrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%;}

.youtubeWrapper iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;}

#vpContent__videoContainer {
	background: #666;}

.video-noteSound {
	font-size: 1.2em;
	font-weight: 400;
	text-align: center;
	color: #f40;}


/*  イレギュラー記事（新潟小学校用）
-------------------------------------------------------------------- */
.contents__talk {
	margin: 0;
	padding: 0 0 0 50px;
	position: relative;
}
.contents__talk::after {
	content: '：';
	position: absolute;
	left: 2em;
	top: 2px;
}
.contents__talk::before {
	top: 2px;
	left: 0;
	width: 50px;
	text-align: left;
	position: absolute;
	font-size: 1em;
	color: #45B035;
}
.contents__talk--01:before {
	content: 'C1';
}
.contents__talk--02:before {
	content: 'C2';
}
.contents__talk--03:before {
	content: 'C3';
}
.contents__talk--t:before {
	content: 'T';
}
.contents__talk--c:before {
	content: 'C';
}
.contents__talk p {
	margin: 0;
}

.formIcon {
	border:1px solid #333;
	background-color: #FFF;
	display: block;
	margin-bottom: .5em;
	border-radius: 25px;
	padding: .2em .4em;
	font-weight: 500;
	margin-right: .5em;
	width: 10em;
	text-align: center;
}
.formIcon--this_scene {
	color: #D80C18;
}
.formIcon--this_func {
	color: #184391;
}
.formIcon--more_learn {
	color: #674594;
}

ruby > rt {
	letter-spacing: -.15em;
	font-weight: 500;
	font-size: 1em;
}
/* IE,Edge調整 */
@supports (-ms-ime-align: auto) {
	rt {
		position: relative;
		top: .5em;
	}
}


/* ===================================================================
  関連記事
=================================================================== */

.related-link{
	background:#f2f7fa;
	padding: 1.5em 4em 1.5em 1.5em;
	border-radius: 8px;
	display: flex;
    justify-content: center;
	position: relative;
}
@media screen and (min-width: 48em){
	.related-link{
		justify-content: flex-start;
	}
}

.related-link:not(:first-child){
	margin-top: 1em;
}

.related-link:hover{
	opacity: 0.7;
}

.related-link__text{
	text-align: center;
}
@media screen and (min-width: 48em){
	.related-link__text{
		text-align: left;
	}
}


.related-link__title{
	font-weight: 600;
	color:#54483d;
	margin:0;
	font-size: 1em;
}

.related-link__title__sm{
	font-size:0.85em;
	display: inline-block;
}

.related-link__subname {
	font-weight: 400;
    color: #666;
    background: #fff;
    padding: 0.5em 1em;
    margin: 1em 0 0;
}

.related-link:after{
	position: absolute;
    top: 45%;
    right: 2em;
    width: 12px;
    height: 12px;
    content: '';
    transform: rotate(45deg);
    border: solid;
    border-color: #4bacd5;
    border-width: 2px 2px 0 0;
    transition: 0.3s;
}

@media screen and (min-width: 48em){
	.related-link__title{
		font-size: 1.25em;
	}

}


/*  イレギュラー記事（熊本県天草市立河浦小学校,天草市立牛深東中学校用）
-------------------------------------------------------------------- */
.contents__header--Lv3_green,.contents__header--Lv3_green02{
	padding-bottom: 0.5em;
	border-bottom: 1px solid #d6dee6;
}

.contents__header--Lv3_green::after,.contents__header--Lv3_green02::after{
  position: absolute;
  content: "";
  border-bottom: 1px solid #019b5d;
  bottom: -1px;
  left: 0;
  width: 20%;
  max-width: 5em;
}

.contents__header--Lv3_green02::after{
  border-bottom: 1px solid #00ada9;
  width: 20%;
}

.contents__header--special{
	width:100%;
	padding:0.5em;
	border-radius: 4px;
	color: #fff;
  }

.contents__header--green{
	background-color: #019b5d;
}

.contents__header--green02{
	background-color: #00ada9;
}

.contents__header--sub{
	font-size:0.7em;
	margin-right:0.5em;
	display: inline-block;
	padding:0.3em 0.5em ;
	background: #fff;
	color:#019b5d;
}

.contents__header--green02 .contents__header--sub{
	color: #00ada9;
}

.contents__header--balloon{
	position: relative;
	padding-top: .8em;
	text-align: center;
	margin-top: 4rem;
}
.contents__header--balloon .balloon{
	position: absolute;
	font-size: 1rem;
	color: #00ada9;
	background-color: #fff;
	padding: .4em 1.5em;
	border-radius: 3em;
	border: 2px solid  #00ada9;
	top: -32px;
	left: calc(50% - 125px);
}
.contents__header--balloon .balloon::after{
	content: "";
	position: absolute;
	top: 34px;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top: 9px solid #fff;
}

.contents__block--arrow{
	position: relative;
}
.contents__block--arrow::before{
	position: absolute;
	content: "";
	border: 24px solid transparent;
	border-top: 14px solid #00ada9;
	left: 50%;
	bottom: -53px;
	transform: translateX(-50%);
	z-index: 2;
}
.contents__block--arrow::after{
	position: absolute;
	content: "";
	width: 25px;
	border-top: 14px solid #00ada9;
	left: 50%;
	bottom: -15px;
	transform: translateX(-50%);
}

@media screen and (min-width: 48em){
	.contents__header--Lv3_green{
		font-size: 1.5rem;
		font-weight: 600;
		padding-bottom: 0.5em;
		margin-bottom: 2em;
		border-bottom: 1px solid #d6dee6;
	}

	.contents__header--Lv3_green::after{
		position: absolute;
		content: "";
		border-bottom: 1px solid #019b5d;
		bottom: -1px;
		left: 0;
		width: 20%;
		max-width: 5em;
	}

	.contents__header--special{
		font-size: 1.625rem;
		font-weight: 600;
	}

	.contents__header--text{
		position: relative;
		top:2.5px;
	}

	.contents__header--balloon{
		margin-top: 5rem;
	}

	.contents__block--arrow::before{
		border: 40px solid transparent;
		border-top: 25px solid #00ada9;
		left: 50%;
		bottom: -95px;
		transform: translateX(-50%);
	}
	.contents__block--arrow::after{
		width: 40px;
		border-top: 20px solid #00ada9;
		left: 50%;
		bottom: -30px;
		transform: translateX(-50%);
	}
}

/*  イレギュラー記事（沖縄県西原町立西原東小学校用）
-------------------------------------------------------------------- */
.title-tenkai{
	display: block;
	color:#0985c8;
	font-weight: 500;
	background: #eaf6fd;
	border-radius: 5px;
	padding: 3px;
	text-align: center;
	margin-bottom: .5rem;
}

/*  イレギュラー記事（Cloud/学校とICTでURL切り替え）
-------------------------------------------------------------------- */
.display-cloud{
	display: block;
}

.display-ict{
	display: none;
}