@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */

  /* カテゴリータイトル（2行にする時） */
.category-title-br span{
	line-height: 1.25em;
}

 /* メインビジュアル */
#mv{
	margin-top:5rem;
}

/* ↓↓↓ コラム：フクロウの「翼」が生み出す、やさしい運転音 ↓↓↓ */
:root {
	--nature-color: #3f7a3c;
	/* --nature-color: #336733; */
}
.column-area{
	background-color:#f5f5f5;
	padding:3rem;
	margin-top:8rem;
}
.column-area-title{
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--nature-color);
	text-align: center;
	padding-bottom: 1em;
	padding-top: 6px;
	letter-spacing: 0.1em;
	position: relative;
}
.column-area-title::before{
	position: absolute;
	content: '';
	background-image: url("images/icon-column.svg");
  	display: block;
  	background-size: contain;
	background-repeat: no-repeat;
	width: 150px;/*画像の幅*/
  	height: 65px;/*画像の高さ*/
	top:-65px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
.column-area-inner{
	background-color:#fff;
	padding:3.5rem;
	/* padding:3rem; */
	position: relative;
}
.column-area-inner::after{
	border-left:32px solid #ededed;
	border-bottom:32px solid #f7f5f2;
	content: '';
	display: block;
	position: absolute;
	bottom: 0px;
	right: 0px;
}
.column-area-inner .text.note {
  	background-image: linear-gradient(180deg, #d9d9d9 1px, transparent 1px);
  	background-size: 100% 2em; /* 行の高さ */
  	line-height: 2em;
  	padding-bottom: 1px; /* 最終行の下にも罫線を引く */
	position: relative;
}
.column-area-inner .text.note::before{
	/* 一番上の罫線を削除 */
	content: "";
	position: absolute;
	border-top: 2px solid #fff; /* 1pxだとスマホ時に見えていたので修正 */
	width: 100%;
}
.column-area-inner .text.note strong{
	font-weight: 600;
	color: var(--nature-color);
}
/* ↑↑↑ コラム：フクロウの「翼」が生み出す、やさしい運転音 ↑↑↑ */


 /* 注釈（ボックス付き） */
.sub-section .border-box {
	padding: 0.5em 0.75em;
	font-size: 1.4rem;
	border: solid 1px var(--light-gray);
}

 /* 外部サイトへ移動するリンク */
#sub10 a.link-other-window{
	/* スマホ時に2行になるため修正 */
	/* （inlineにするとmargin-topがつかなくなるので親の要素につける） */
	display: inline;
	/* display: inline-block; */
	color:var(--cyan);
    inline-size: fit-content;
    font-weight: 400;
    padding-right: 1.2em;
    background: url(./images/icon-window-cyan.svg) no-repeat right 0 top .4em / auto .8em;
}


/* ====================================
	ホバーが有効な環境のみ
===================================== */
@media (hover:hover) and (pointer: fine) {}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media screen and (width < 768px) {
	.column-area{
		padding: 5%;
		padding-top:3rem;
	}
	.column-area-inner{
		padding:8%;
		padding-bottom:50px;
	}
	.column-area-title{
		font-size: 1.8rem;
	}
	.column-area-inner .flex-container {
		row-gap: 0;
	}

}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print,
screen and (width >=768px) {
	#mv{
		margin-top:10rem;
	}
	.column-area-inner .text-container{
		margin-top:-0.25em;
	}

}

/* ====================================
	タブレット専用スタイル（768px～1080px）
===================================== */
@media screen and (768px <=width < 1080px) {}