@charset "UTF-8";
html {
	background: #fff;
	font-size: 62.5%;
	color: #333;
}
body {
	font-family: "メイリオ", "Meiryo", "MS Pゴシック", "Hiragino kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, sans-serif;
	font-size: 1.8rem;
}
header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	z-index: 99;
}
.l-header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0 16px;
	margin: 0 auto;
	padding: 0 0 0 8px;
	max-width: 980px;
}
.l-header-inner .ls-logoarea {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 0 4px;
}
.l-header-inner .m-logo {
	width: 350px;
	height: auto;
}
.l-header-inner .m-logo img {
	width: 100%;
	height: auto;
}
.l-header-inner .m-catch {
	margin: 0;
	padding: 0 0 4px;
	font-size: clamp(1.0rem, 1.2vw, 1.2rem);
}


.c-btn {
	display: block;
	margin: 0;
	padding: 16px;
	background: #FFCC00;
	text-align: center;
	text-decoration: none;
	color: #333;
	transition: background-color .3s ease-in;
	white-space: nowrap;
}
.c-btn:hover {
	background: #FFDE5A;
}
.c-btn .c-btn-txt {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 8px;
	margin: 0 auto 4px;
}
.c-btn .c-btn-txt img {
	width: auto;
	height: 32px;
}
.c-btn .c-btn-txt p {
	margin: 0;
	line-height: 1;
	font-weight: 600;
	font-size: clamp(1.8rem, 3.2vw, 3.2rem);
}
.c-btn .c-btn-subtxt {
	margin: 0;
	line-height: 1;
	font-size: clamp(1.0rem, 1.4vw, 1.4rem);
}
.c-small{
	line-height: 1.4;
	font-size: clamp(1.0rem, 1.4vw, 1.4rem);
}

.m-mv {
	margin: 0 auto 60px;
	padding: 0;
	background: #126EB3 url(../images/mv.jpg) no-repeat right center;
}
.m-mv .ms-mv-inner {
	display: grid;
  grid-template-columns: minmax(80px, 140px) max-content;
  grid-template-rows: auto min-content auto;
  grid-auto-flow: row;
	justify-items: start;
  align-content: center;
  align-items: center;
  grid-template-areas:
    'sholder sholder'
    'logo rub'
    'logo title';
	gap: 0 16px;
	margin: 0 auto;
	padding: 120px 8px;
	max-width: 980px;
	background-size: auto 100%;
	color: #fff;
}

.m-mv .ms-mv-inner h1 {
	font-size: clamp(2.6rem, 4.0vw, 4.0rem);
	font-weight: 600;
	font-feature-settings: 'palt';
	text-shadow: 0 0 8px #222D45;
	align-self: start;
	grid-area: title;
}
.m-mv .ms-mv-inner span {
	text-shadow: 0 0 8px #222D45;
	letter-spacing: 0.05em;
	font-weight: 600;
	font-size: clamp(1.4rem, 1.8vw, 1.8rem);
	align-self: end;
	grid-area: rub;
}
.m-mv .ms-mv-inner p {
	margin-bottom: 8px;
	padding: 8px 16px;
	background: #FFCC00;
	border-radius: 2px;
	font-size: clamp(1.4rem, 1.8vw, 1.8rem);
	font-weight: 600;
	color: #333;
	grid-area: sholder;
}
.m-mv .ms-mv-inner .ms-mv-img {
	border-radius: 50%;
	grid-area: logo; 
}
.m-mv .ms-mv-inner .ms-mv-img img {
	width: 100%;
	max-width: 140px;
	height: auto;
	border-radius: 50%;
}
.l-section {
	margin: 0 auto;
	padding: 60px 8px;
	max-width: 980px;
}
.l-section a { color: #126EB3; }
.l-section h2 {
	position: relative;
	margin-bottom: 40px;
	width: 100%;
	line-height: 1.2;
	font-weight: 600;
	font-size: clamp(2.2rem, 4.0vw, 4.0rem);
	font-feature-settings: 'palt';
}
.l-section h2::before {
	position: absolute;
	bottom: -16px;
	left: 0;
	width: 100%;
	height: 8px;
	background: #FFF0B2;
	content: '';
}
.l-section h2::after {
	position: absolute;
	bottom: -16px;
	left: 0;
	width: 30%;
	height: 8px;
	background: #FFCC00;
	content: '';
}
.l-section p {
	margin-bottom: 24px;
	line-height: 1.8;
	font-size: clamp(1.6rem, 1.8vw, 1.8rem);
}
.p-graph {
	margin: 32px auto 0;
	padding: 0 8px;
	width: 90%;
}
.p-graph figcaption {
	margin: 8px 0;
	font-size: 1.2rem;
}

.p-video {
	margin: 0 auto;
	width: 90%;
	padding: 0 8px;
	aspect-ratio: 16 / 9;
}
.p-video iframe {
	width: 100%;
	height: 100%;
}

.l-flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0 32px;
}
.l-flex img {
	max-width: 40%;
}

.l-btn-area {
	margin: 24px auto;
	max-width: 600px;
}
.l-btn-area .c-btn {
	border-radius: 2px;
	color: #333;
}

.p-voice-block {
	position: relative;
	margin: 48px auto 0;
	padding: 72px 32px 40px;
	background: #F2F8FB;
}
.p-voice-block .m-voice-tag {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 16px 32px;
	background: #222D45;
	line-height: 1;
	font-weight: 600;
	font-size: 1.6rem;
	color: #fff;
}
.p-voice-block .ps-voice-header {
	margin-bottom: 32px;
	display: grid;
	grid-template-columns: auto auto; 
  grid-template-rows: auto auto; 
  gap: 16px 32px; 
  grid-template-areas: 
    'img title'
    'img txt';
	align-content: center;
	align-items: center;
}
.p-voice-block .ps-voice-header img {
	grid-area: img;
	border-radius: 50%;
}
.p-voice-block .ps-voice-header .m-voice-title {
	position: relative;
	margin: 0 0 16px;
	padding: 0;
	grid-area: title;
	align-self: end;
}
.p-voice-block .ps-voice-header .m-voice-title::after {
	position: absolute;
	left: 0;
	bottom: -16px;
	width: 300px;
	height: 5px;
	background: #126EB3;
	content: '';
}
.p-voice-block .ps-voice-header .m-voice-title h3 {
	margin: 0 0 4px;
	font-weight: 600;
	font-size: clamp(1.8rem, 2.4vw, 2.4rem);
	font-feature-settings: 'palt';
}
.p-voice-block .ps-voice-header .m-voice-title p {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 8px;
	margin: 0;
	padding: 0;
	line-height: 1.2;
}
.p-voice-block .ps-voice-header .m-voice-title p .ms-company {
	font-size: clamp(1.2rem, 1.4vw, 1.4rem);
	font-size: 1.4rem;
}
.p-voice-block .ps-voice-header .m-voice-title p .ms-name {
	font-weight: 600;
	font-size: clamp(1.4rem, 1.6vw, 1.6rem);
}
.p-voice-block .ps-voice-header p {
	margin: 0;
	line-height: 1.6;
	font-size: 1.4rem;
	grid-area: txt;
	align-self: start;
}
.p-voice-block dl dt {
	margin-top: 24px;
	margin-bottom: 8px;
	line-height: 1.4;
	font-size: 1.6rem;
	font-weight: 600;
}
.p-voice-block dl dd {
	line-height: 1.6;
	font-size: 1.4rem;
}

.l-flex03 {
	margin: 32px 0;
	display: flex;
	justify-content: space-between;
}
.l-flex03 .ls-flex-inner {
	width: 32%;
	padding: 24px 24px 32px;
	background: #FFF0B2;
}
.l-flex03 .ls-flex-inner h3 {
	margin: 0 0 16px;
	text-align: center;
	font-size: clamp(1.6rem, 2.4vw, 2.4rem);
	font-weight: 600;
}
.l-flex03 .ls-flex-inner p {
	margin: 0;
	line-height: 1.6;
	font-size: clamp(1.4rem, 1.6vw, 1.6rem);
}
.l-flex03 .ls-flex-inner.m-ex01 {
	background: #FFF0B2 url(../images/icon-shop.svg) no-repeat right 8px bottom 8px;
	background-size: 30%;
}
.l-flex03 .ls-flex-inner.m-ex02 {
	background: #FFF0B2 url(../images/icon-tent.svg) no-repeat right 8px bottom 8px;
	background-size: 30%;
}
.l-flex03 .ls-flex-inner.m-ex03 {
	background: #FFF0B2 url(../images/icon-eco.svg) no-repeat right 8px bottom 8px;
	background-size: 30%;
}

.m-flow { margin-bottom: 48px; }
.m-flow dt {
	margin: 32px 0 16px;
	padding: 16px 16px 14px;
	border: 1px solid #126EB3;
	line-height: 1;
	font-weight: 600;
	font-size: clamp(1.6rem, 2.4vw, 2.4rem);
	color: #126EB3;
}
.m-flow dd {
	padding: 0 16px;
	line-height: 1.6;
	font-size: clamp(1.4rem, 1.6vw, 1.6rem);
}

footer {
	margin: 60px 0 0;
	padding: 24px 0;
	text-align: center;
	background: #F2F8FB;
}
footer small {
	font-size: 1.2rem;
}


@media screen and (max-width: 568px) {
	.l-wrapper { padding-bottom: 40px; }
	header { position: static; }
	.l-header-inner {
		display: block;
		padding: 0;
	}
	.l-header-inner .ls-logoarea {
		justify-content: center;
		align-items: center;
	}
	.l-header-inner .m-logo {
		width: 90%;
		height: auto;
	}
	.l-header-inner .m-header-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 99;
	}

	.m-mv {
		margin: 0 auto 60px;
		padding: 0;
		background: #126EB3 url(../images/mv.jpg) no-repeat right center;
		background-size: auto 100%;
	}
	.m-mv .ms-mv-inner {
		grid-template-columns: auto;
		grid-template-rows: auto;
		grid-auto-flow: row;
		justify-items: start;
		justify-content: center;
		align-content: center;
		align-items: center;
		grid-template-areas:
			'logo'
			'sholder'
			'rub'
			'title';
		gap: 0;
		padding: 100px 16px;
	}
	.m-mv .ms-mv-inner .ms-mv-img {
		justify-self: center;
		padding-bottom: 16px;
	}
	.m-mv .ms-mv-inner .ms-mv-img img {
		max-width: 100px;
		height: auto;
	}
	.l-section { padding: 40px 8px; }

	.l-flex {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 24px 0;
		margin-bottom: 24px;
	}
	.l-flex img { 
		width: 80%;
		max-width: unset;
	}
	.p-graph {
		width: 100%;
	}
	.p-video {
		width: 100%;
	}
	.p-voice-block {
		margin-top: 24px;
		padding: 72px 16px 32px;
	}
	.p-voice-block .ps-voice-header {
    grid-template-columns: auto 1fr;
		grid-template-areas:
        'img title'
        'txt txt';
		gap: 16px;
	}
	.p-voice-block .ps-voice-header .m-voice-title::after {
		width: 100%;
	}
	.p-voice-block .ps-voice-header img {
		width: 25vw;
	}
	.p-voice-block .ps-voice-header .m-voice-title {
		align-self: center;
	}

	.l-flex03 {
		flex-wrap: wrap;
		gap: 16px 0;
	}
	.l-flex03 .ls-flex-inner {
		width: 100%;
	}
	footer {
		margin: 40px 0;
	}
}
@media screen and (max-width: 365px) {
	.m-mv .ms-mv-inner h1 br { display: none; }
}