@charset "utf-8";

.pc {
	display: block;
}

.sp {
	display: none;
}

.web_wrap {
	width: 950px;
	margin: 0 auto;
	text-align: center;
}

/*--------------------------------
ヘッダ
--------------------------------*/
#top_title {
	background: url("https://www.kojitusanso.jp/common/img/page/outdoorMobility/top_bg.png") no-repeat top;
	padding: 160px 0 200px;
}

#top_title h1 {
	width: 728px;
	margin: 0 auto;
	text-align: center;
}

/*NEWS*/

.info-box {
	margin-top: 2em;
	position: relative;
	border: 1px solid #e5e5e5;
	background: #fff;
	padding: 16px 20px;
	width: 100%;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

/* NEWラベル */
.info-box .label-new {
	position: absolute;
	top: -10px;
	left: 16px;
	background: #6bb245;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	padding: 4px 10px;
	line-height: 1;
}

/* ▼三角 */
.info-box .label-new::after {
	content: "";
	position: absolute;
	left: 10px;
	bottom: -6px;
	border-width: 6px 6px 0 6px;
	border-style: solid;
	border-color: #6bb245 transparent transparent transparent;
}


/* 日付 */
.info-box .date {
	font-size: 14px;
	color: #000;
	margin: 10px 0 0px
}


/* タイトル */
.info-box .title {
	font-size: 16px;
	font-weight: bold;
	margin: 0;
	line-height: 1.2;
}


/* 補足 */
.info-box .place {
	font-size: 14px;
	font-weight: normal;
}


/* ---------
sec01
----------*/

/* セクション全体 */
#sec01 {
	background: #eaf6d8;
	padding: 60px 0;
	margin: 60px 0;
}

.barrier-free {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 60px 80px;
}

.barrier-free h2 {
	width: 496px;
}

.barrier-free h3 {
	font-size: 2.3em;
	color: var(--main-color);
	margin: 10px 0 30px;
}

.barrier-free h3 em {
	font-style: normal;
	font-weight: bold;
}

.barrier-free .c-intro {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	position: relative;
	z-index: 2;
}

.barrier-free .intro-txt {
	width: 55%;
	font-size: 15px;
	line-height: 1.9;
	color: #333;
}

/* 右寄せテキスト */
.barrier-free #intro-txt02 {
	margin-left: auto;
}

/* 右上 画像 */
#sec01 .barrier-free::after {
	content: "";
	position: absolute;
	top: 20px;
	right: 80px;
	width: 300px;
	height: 500px;
	background: url("https://www.kojitusanso.jp/common/img/page/outdoorMobility/sec01_img01.png") no-repeat center / contain;
	z-index: 1;
}

/* 左下 画像 */
#sec01 .barrier-free::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 40px;
	width: 400px;
	height: 395px;
	background: url("https://www.kojitusanso.jp/common/img/page/outdoorMobility/sec01_img02.png") no-repeat center / contain;
	z-index: 1;
}

/* ---------
sec02
----------*/

#sec02 {
	background: #fff;
	padding: 80px 0;
}

#sec02 .about-e-trike {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
}

/* =========================
上部：タイトル＋画像
========================= */
.about_tit_wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.about_tit {
	width: 30%;
}

.about_tit h2 {
	margin-bottom: 20px;
}

.about_tit h2 img {
	max-width: 100%;
	height: auto;
}

.img-btn img {
	max-width: 100%;
}

.about_phot {
	width: 70%;
	text-align: right;
}

.about_phot img {
	max-width: 100%;
	height: auto;
}

/* =========================
特徴見出し
========================= */
.green_tit {
	margin: 60px 0 10px;
	text-align: center;
	color: #2a8a3a;
	font-size: 30px;
	font-weight: 900;
}

/* =========================
特徴3カラム
========================= */
.e-trike-point {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 40px;
}

.e-trike-point li {
	width: 33.333%;
	text-align: center;
}

.e-trike-point img {
	max-width: 100%;
	height: auto;
}

/* =========================
仕様
========================= */
.spec {
	font-size: 13px;
	line-height: 1.7;
	color: #333;
}

.spec span {
	font-weight: bold;
	margin-right: 6px;
	border: 1px solid #000;
	padding: 0.1em 0.5em;
}

/* youtube */
.yt_wrap {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/* margin-top: 70px; */
}

.yt_wrap .yt_video {
	width: 47%;
	margin-bottom: 40px;
	aspect-ratio: 16 / 9;
}

.yt_wrap .yt_video iframe {
	width: 100%;
	height: 100%;
}


/* ラッパー：2カラム */
.spec-detail-wrap {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 48px;
	row-gap: 24px;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

/* カラム用の器 */
.spec-detail {
	display: grid;
	gap: 0;
}

/* 各アイテム（画像 + テキストの2列） */
.spec-detail dl {
	display: grid;
	grid-template-columns: 180px 1fr;
	column-gap: 24px;
	row-gap: 8px;
	align-items: start;
	padding: 20px 0;
	margin: 0;
}

.spec-detail dl:last-child {
	border-bottom: none;
}

.spec-detail dt {
	margin: 0;
	grid-row: 1 / span 2;
	width: 180px;
}

.spec-detail dt img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #ccc;
}


/* タイトル（緑・太字） */
.spec-detail .spec-tit {
	margin: 0;
	font-weight: 700;
	color: var(--main-color);
	font-size: 22px;
	line-height: 1.45;
}

/* 本文 */
.spec-detail .spec-txt {
	margin: 0;
	color: var(--font-color);
	font-size: 16px;
	line-height: 1.9;
}

/* ===== フォールバック（古いブラウザのaspect-ratio対策） ===== */
@supports not (aspect-ratio: 1 / 1) {
	.spec-detail dt {
		position: relative;
		height: 0;
		padding-top: 100%;
		width: 180px;
	}

	.spec-detail dt img {
		position: absolute;
		inset: 0;
	}
}


/* =========================
SHOP 
========================= */

#shop .shop_tit_wrap {
	width: 100%;
	background: url("https://www.kojitusanso.jp/common/img/page/outdoorMobility/shop_tit_bg.jpg") no-repeat center top;
	background-size: cover;
	padding: 60px 20px 40px;
	margin-bottom: 40px;
}

#shop .shop_tit {
	width: 1080px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 30px;
	justify-content: space-around;
}

#shop .shop_tit h2,
#shop .shop_tit h3 {
	margin: 0;
}

#shop .shop_tit h2 img {
	max-width: 100%;
}

#shop .shop_tit h3 {
	margin-top: 20px;
}

#shop .shop_tit h3 img {
	max-width: 100%;
}

#shop .shop_intro p {
	text-align: center;
	font-size: 1em;
	line-height: 1.8;
	margin-bottom: 40px;
}

#shop .shop_intro span {
	font-size: 0.8em;
}

#shop .shop_list {
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 100px 100px;
	width: 80%;
}

#shop .shop_list dl {
	text-align: center;
}

#shop .shop_list dt {
	font-size: 1.2em;
	font-weight: 900;
	margin-bottom: 12px;
	color: var(--main-color);
}

#shop .shop_list .phot img {
	width: 100%;
	height: auto;
	display: block;
}


/* ボタン */
#shop .shop_btn {
	margin-top: 12px;
}

#shop .shop_btn img {
	max-width: 268px;
}

/* =========================
event 
========================= */

#event {
	background: #f5f7e2;
}

#event .event_tit_wrap {
	width: 100%;
	background: url("https://www.kojitusanso.jp/common/img/page/outdoorMobility/event_tit_bg.jpg") no-repeat center top;
	background-size: cover;
	padding: 60px 20px 40px;
	margin-bottom: 40px;
}

#event .event_tit {
	width: 1080px;
	margin: 0 auto;
	display: flex;
	align-items: center;
}

#event .event_tit h2 {
	margin: 0;
}

#event .event_tit h2 img {
	max-width: 100%;
}

/* expo_event*/

.expo_event {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	padding: 40px;
	box-sizing: border-box;
}

.expo_txt {
	flex: 1 1 55%;
}

.expo_txt .date {
	font-size: 14px;
	color: #333;
	margin-bottom: 10px;
}

.expo_txt .event_item_title {
	font-size: 22px;
	font-weight: bold;
	color: #1a7f3c;
	/* 緑系タイトル */
	margin-bottom: 20px;
	line-height: 1.4;
}

.expo_txt p {
	font-size: 15px;
	line-height: 1.8;
	color: #333;
}

.expo_phot {
	flex: 1 1 45%;
	text-align: center;
}

.expo_phot img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* other event*/

h3.event_tit_other {
	width: 278px;
	margin-top: 3em;
	margin-bottom: 1em;
}

.boxes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	clear: both;
	padding-bottom: 20px;
}

ul.boxes li {
	width: 31%;
	background: #fff;
	margin: 0 1% 20px 1%;
	box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.3);
}

ul.boxes li a {
	padding: 0 0 20px;
	display: block;
	z-index: 999;
}

ul.boxes li .cs {
	background-color: rgba(0, 0, 0, 0.5);
	padding: 0 0 20px;
	display: block;
	z-index: 999;
}

ul.boxes li .cs:hover {
	color: #065D42;
	cursor: default;
}

.boxes li p.ico_support,
.boxes li p.ico_joy,
.boxes li p.ico_safety,
.boxes li p.ico_intimate {
	background: #065D42;
	color: #fff;
	padding: 3px 0;
	margin: 5px 0 15px 15px;
	width: 130px;
	font-size: 12px;
	text-align: center;
	float: left;
}

.boxes li .date {
	color: #666;
	margin: 5px 15px;
	float: right;
}

.boxes li .tit {
	margin: 0 0 15px 15px;
	font-size: 16px;
	letter-spacing: 1px;
	font-weight: bold;
	clear: both;
}

.boxes li .btn {
	margin: 20px 15px 0;
	padding: 5px 0;
	text-align: center;
	border: 1px solid #065D42;
}

.boxes li a:hover {
	text-decoration: none;
	opacity: 0.9;
	filter: alpha(opacity=90);
	/* ie lt 8 */
	-ms-filter: "alpha(opacity=90)";
	/* ie 8 */
	-moz-opacity: 0.9;
	/* FF lt 1.5, Netscape */
	-khtml-opacity: 0.9;
	/* Safari 1.x */
	zoom: 1;
}

.is-animated {
	animation: .6s zoom-in;
}

@keyframes zoom-in {
	0% {
		transform: scale(.1);
	}

	100% {
		transform: none;
	}
}