@charset "utf-8";

/* 変数 -----------------------------------------------------------------------------------------*/
:root {
	--family-go: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, Osaka sans-serif;

	--wrapper: 90%;
	--wrapper-max: 1240px;
	--wrapper-max-hero: 1280px;

	--gheader-h: 65px;
	--header-h: 65px;
	--global-t: calc(var(--gheader-h) + var(--header-h));

	--color-main: #c02;
	--color-black: #333;
	--color-white: #fff;
	--color-gray: #757575;
	--color-gray-d: #69747a;
	--color-link: #66a;
	--color-global-hover: #ededed;
	--color-button-hover: #9b1a35;
	--color-button-hover-w: #fde8e5;

	--color-border: #e0e0e0;

	--color-bg-0: #fffaec;
	--color-bg-1: #fff;
	--color-bg-2: #f5f5f5;
	--color-bg-3: #eee;
	--color-bg-4: #f5f5f5;
	--color-bg-5: #fff;
	--color-bg-6: #eee;
	--color-bg-7: #f5f5f5;
	--color-bg-8: #fff;

	--color-spot-1: #f2726e;
	--color-spot-2: #49926a;
	--color-spot-3: #4b5aa8;
	--color-spot-4: #f8972a;
	--color-spot-5: #eb6100;

	--weight-m: 400;
	--weight-b: 600;

	--font-h2: 2.45rem;/*2.0rem;/*3.5rem;*/
	--font-h3: 1.9rem;/*2.0rem;*/
	--font-comment: 1.7rem;/*1.9rem;/*2.0rem;*/
	--font-read: 1.9rem;/*1.7rem;/*2.4rem;*/
	--font-midashi: 2.24rem;/*2.56rem;/*3.2rem;*/
	--font-midashi-l: 2.8rem;/*3.2rem;/*4.0rem;*/
	--font-question: 1.96rem;/*2.24rem;/*2.8rem;*/
	--font-num: 3.36rem;/*4.8rem;*/
	--font-button: 1.8rem;

	--font-l: 1.8rem;
	--font-m: 1.6rem;
	--font-s: 1.4rem;
	--font-xs: 1.2rem;
	--font-xxs: 1.1rem;

	--line-l: 1.75;
	--line-m: 1.5;
	--line-s: 1.3;

	--padding-h: 21px;

	--margin-5: 5px;
	--margin-15: 15px;
	--margin-10: 10px;
	--margin-20: 20px;
	--margin-30: 30px;
	--margin-40: 40px;
	--margin-50: 50px;
	--margin-60: 60px;
	--margin-120: 120px;

	--button-width: 354px;
	--button-width-s: 255px;
	--button-width-header: 214px;
}
/*-----------------------------------------------------------------------------------------------*/


/*html, body { height: 100%; }*/
html { font-size: 62.5%; }
body {
	background-color: var(--color-white);
	color: var(--color-black);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "palt";
	line-height: 1;
	overflow-x: hidden;
	min-width: 320px;
}
img {
	height: auto;
	/*width: 100%;*/
	max-width: 100%;
}
a:link, a:visited, .hover {
	color: var(--color-black);
	transition: 0.2s ease-out;
	transition-property: background-color, border-color, color;
	text-decoration: none;
}
a:focus { outline: none; }
@media(hover: hover) {
	a:hover, .hover:hover {
		color: var(--color-link);
		text-decoration: underline;
	}
}
@media(hover: none) {
	a:active {
		color: var(--color-link);
		text-decoration: underline;
	}
}

a[href*="tel:"] { text-decoration: underline; }

strong { font-weight: var(--weight-b); }

th,
dt { font-weight: var(--weight-m); }

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.indent {
	padding-left: 1em;
	text-indent: -1em;
}

.fc::first-letter { font-feature-settings: "palt"; }



/* フォント -------------------------------------------------------------------------------------*/
body {
	font-family: var(--family-go);
	font-weight: var(--weight-m);
}

body {
	opacity: 0;
	/*transition: opacity 0.2s ease-out;*/
}
.wf-active body,
.wfno-load body { opacity: 1; }
/*-----------------------------------------------------------------------------------------------*/


/* wrapper --------------------------------------------------------------------------------------*/
.wrapper {
	margin: 0 auto;
	width: var(--wrapper);
	max-width: var(--wrapper-max);
}
.main #hero .wrapper { max-width: var(--wrapper-max-hero); }
.footer .wrapper { width: 100%; }
/*-----------------------------------------------------------------------------------------------*/


/* ボタン ---------------------------------------------------------------------------------------*/
.button a {
	background-color: var(--color-main);
	border: var(--color-main) solid 2px;
	border-radius: 35px;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
	color: var(--color-white);
	display: block;
	font-size: var(--font-button);
	font-weight: var(--weight-b);
	line-height: 1;
	margin: 0 auto;
	padding: 23px 0 25px;
	text-align: center;
	width: 90%;
	max-width: var(--button-width);
}
.button.w a {
	background-color: var(--color-white);
	color: var(--color-main);
	padding: 18px 0 20px;
	max-width: var(--button-width-s);
}

.button a:hover {
	border-color: var(--color-button-hover);
	background-color: var(--color-button-hover);
	text-decoration: none;
}
.button.w a:hover {
	border-color: var(--color-main);
	background-color: var(--color-button-hover-w);
}
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* ヘッダー -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.gheader {
	background-color: var(--color-white);
	border-bottom: var(--color-main) solid 1px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: var(--gheader-h);
	padding: 0 var(--padding-h);
	z-index: 100;
}
.gheader .logo { width: 113px; }
.gheader .logowb { width: 180px; }

.header {
	background-color: var(--color-white);
	border-bottom: var(--color-border) solid 1px;
	display: flex;
	align-items: center;
	height: var(--header-h);
	padding: 0 var(--padding-h);
	position: sticky;
	top: 0;
	z-index: 101;
}
.header h1 { width: 120px;/*152px;*/ }
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* ナビ -----------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/* ＝ -------------------------------------------------------------------------------------------*/
.nav {
	cursor: pointer;
	height: var(--header-h);
	margin-top: calc(var(--header-h) * -1);
	margin-left: auto;
	position: sticky;
	top: 0;
	width: var(--header-h);
	z-index: 103;
}

.nav span,
.nav span::before,
.nav span::after {
	background-color: var(--color-black);
	content: "";
	height: 2px;
	position: absolute;
	left: 0;
	transition: background-color 0.2s ease-out;
	width: 100%;
}
.nav span {
	top: calc((var(--header-h) / 2) - 1px);
	left: 20px;
	width: calc(var(--header-h) - 40px);
}
.nav span::before { top: -6px; }
.nav span::after { bottom: -6px; }

.nav.actived span { background-color: transparent; }
.nav.actived span::before { top: 0; transform: rotate(45deg); }
.nav.actived span::after { bottom: 0; transform: rotate(-45deg); }

/*.nav:hover span,
.nav:hover span::before,
.nav:hover span::after { background-color: var(--bg-button-hover); }*/

/* × */
@keyframes nav {
	0% { background-color: var(--color-black); }
	100% { background-color: transparent; }
}
.nav.active span {  animation: nav 0.2s linear forwards; }
.nav.reverse span { animation: nav 0.2s linear reverse both; }
@keyframes navt {
	0% { top: -6px; transform: rotate(0deg); }
	50% { top: 0; transform: rotate(0deg); }
	100% { top: 0; transform: rotate(45deg); }
}
.nav.active span::before { animation: navt 0.2s linear forwards; }
.nav.reverse span::before { animation: navt 0.2s linear reverse both; }
@keyframes navb {
	0% { bottom: -6px; transform: rotate(0deg); }
	50% { bottom: 0; transform: rotate(0deg); }
	100% { bottom: 0; transform: rotate(-45deg); }
}
.nav.active span::after { animation: navb 0.2s linear forwards; }
.nav.reverse span::after { animation: navb 0.2s linear reverse both; }
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* グローバル -----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.global {
	background-color: rgba(0, 0, 0, 0.2);
	height: calc(100% - var(--global-t));
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: var(--global-t);
	left: 0;
	transition: opacity 0.2s ease-out;
	width: 100%;
	z-index: 102;
}


/* メニュー -------------------------------------------------------------------------------------*/
.global > div {
	background-color: var(--color-white);
	border-radius: 3px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
	display: flex;
	flex-direction: column;
	margin: var(--margin-5) auto;
	opacity: 0;
	pointer-events: none;
	position: relative;
	transition: opacity 0.2s ease-out 0.1s;
	width: 97%;
}
.global > div::before {
	border: 10px solid transparent;
	border-bottom-color: var(--color-white);
	content: "";
	height: 0;
	position: absolute;
	right: 15px;
	bottom: 100%;
	width: 0;
}

.global .menu li { position: relative; }
.global .menu li::before {
	background-image: url("../images/menu_arrow.svg");
	background-size: 15px auto;
	content: "";
	height: 15px;
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
}

.global .menu a {
	border-bottom: var(--color-border) solid 1px;
	color: var(--color-black);
	display: block;
	font-size: var(--font-m);
	font-weight: var(--weight-b);
	padding: 15px var(--padding-h) 16px 43px;
	pointer-events: none;
	position: relative;
	text-decoration: none;
}

/* ボタン */
.global .button { padding: var(--margin-20) 0; }
.global .button a {
	font-size: var(--font-s);
	padding: 13px 0 14px;
	pointer-events: none;
	width: var(--button-width-header);
}

/* active */
.global.active,
.global.active > div,
.global.active a {
	opacity: 1;
	pointer-events: auto;
}
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* メイン ---------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.main {
	line-break: strict; /* 禁則処理を厳格に適用 */
	overflow-wrap: anywhere; /* 収まらない場合に折り返す */
	word-break: normal; /* 単語の分割はデフォルトに依存 */
}
.main br.pc,
.main br.tb { display: none; }

.main .container { padding: var(--margin-120) 0; }
.main .container#hero {
	background-color: var(--color-bg-0);
	padding: var(--margin-60) 0;
}
.main .container#question { background-color: var(--color-bg-1); }
.main .container#about { background-color: var(--color-bg-2); }
.main .container#todo { background-color: var(--color-bg-3); }
.main .container#evidence { background-color: var(--color-bg-4); }
.main .container#movie { background-color: var(--color-bg-5); }
.main .container#result { background-color: var(--color-bg-6); }
.main .container#faq { background-color: var(--color-bg-7); }
.main .container#contact { background-color: var(--color-bg-8); }

.main .contents {
	background-color: var(--color-white);
	border: var(--color-border) solid 1px;
	border-radius: 10px;
	margin-top: var(--margin-40);
	padding: var(--margin-30) var(--margin-20);
}

.main .elements {
	display: flex;
	flex-direction: column;
	gap: var(--margin-30);
	margin-top: var(--margin-30);
}
.main .elements > li,
.main .column {
	border: var(--color-border) solid 1px;
	border-radius: 10px;
	padding: var(--margin-20);
}

.main .group { margin-top: var(--margin-60); }
.main .group .elements { margin-top: var(--margin-20); }


/* テキスト -------------------------------------------------------------------------------------*/
.main .comment {
	font-size: var(--font-m);
	line-height: var(--line-l);
	margin-top: var(--margin-10);
	text-align: justify;
}

.main h2 {
	color: var(--color-main);
	font-size: var(--font-h2);
	font-weight: var(--weight-b);
	line-height: var(--line-s);
	text-align: center;
}
.main h2 + .comment {
	color: var(--color-gray);
	font-size: var(--font-comment);
	font-weight: var(--weight-b);
	line-height: var(--line-s);
	text-align: center;
}

.main h3,
.main h4 {
	font-size: var(--font-h3);
	font-weight: var(--weight-b);
	line-height: var(--line-s);
}
.main h3 { color: var(--color-main); }

.main .read {
	font-size: var(--font-read);
	font-weight: var(--weight-b);
	line-height: var(--line-m);
	text-align: justify;
}
.main .notes {
	font-size: var(--font-xs);
	font-weight: var(--weight-m);
	line-height: var(--line-m);
	text-align: justify;
	margin-top: var(--margin-10);
}

.main .title {
	font-size: var(--font-h3);
	font-weight: var(--weight-b);
	line-height: var(--line-m);
	text-align: center;
}


/* 地域活性化ご担当のみなさまへ -----------------------------------------------------------------*/
.main #hero .wrap {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-60);
	margin-top: var(--margin-40);
}

/* 吹き出し */
.main #hero .fukidashi {
	display: inline-block;
	position: relative;
	padding-left: 75px;
}
.main #hero .fukidashi::before {
	background-image: url("../images/character.svg");
	background-size: 59px auot;
	content: "";
	height: 90px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 59px;
}
.main #hero .fukidashi p {
	background-color: var(--color-gray);
	border-radius: 5px;
	color: var(--color-white);
	font-size: var(--font-read);
	line-height: var(--line-s);
	padding: 10px 1em 11px;
	position: relative;
	text-align: justify;
}
.main #hero .fukidashi p::before {
	border: 10px solid transparent;
	border-right-color: var(--color-gray);
	content: "";
	height: 0;
	position: absolute;
	top: 50%;
	right: 100%;
	transform: translateY(-50%);
	width: 0;
}

/* テキスト */
.main #hero .midashi {
	font-size: var(--font-midashi);
	font-weight: var(--weight-b);
	line-height: var(--line-m);
	text-align: justify;
}
.main #hero .midashi .l { font-size: var(--font-midashi-l); }
.main #hero .midashi .l span { position: relative; }
.main #hero .midashi .l span::after {
	background-color: var(--color-main);
	content: "";
	height: 6px;
	opacity: 0.5;
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
}

.main #hero .read {
	font-weight: var(--weight-m);
	margin-top: var(--margin-10);
}

/* ボタン */
.main #hero .buttons {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-15);
	margin-top: var(--margin-30);
}

/* 画像 */
.main #hero .images {
	display: grid;
	gap: var(--margin-10);
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto auto;
	margin: 0 auto;
	position: relative;
	max-width: 572px;
}
.main #hero .images .top {
	grid-column: 1 / -1;
	position: relative;
}
.main #hero .images .img {
	display: block;
	border-radius: 10px;
	overflow: hidden;
}
.main #hero .images .patch {
	position: absolute;
	right: 10px;
	bottom: -20px;
	width: 23%;
	max-width: 135px;
	min-width: 108px;
}

.main #hero .images .notes {
	position: absolute;
	top: 100%;
	right: 0;
}


/* こんなお悩みありませんか？ -------------------------------------------------------------------*/
.main #question .read {
	font-size: var(--font-question);
	position: relative;
}
.main #question .read::before {
	background-image: url("../images/question_image.svg");
	background-size: 178px auto;
	content: "";
	height: 84px;
	position: absolute;
	top: -90px;
	right: 0;
	width: 178px;
}

.main #question .elements { row-gap: var(--margin-10); }
.main #question li { padding: 20px var(--margin-15) 22px; }
.main #question li p {
	font-size: var(--font-l);
	font-weight: var(--weight-b);
	line-height: var(--line-m);
	padding-left: 50px;
	position: relative;
}
.main #question li p::before {
	background-image: url("../images/question_check.svg");
	background-size: 40px auto;
	content: "";
	height: 40px;
	position: absolute;
	top: -5px;
	left: 0;
	width: 40px;
}

.main #question .arrow {
	margin: var(--margin-30) auto;
	width: 136px;
}

.main #question .answer {
	background-color: var(--color-main);
	border-radius: 10px;
	color: var(--color-white);
	font-size: var(--font-question);
	font-weight: var(--weight-b);
	line-height: var(--line-s);
	margin: 0 auto;
	padding: 39px 1em 40px;
	text-align: center;
	max-width: 920px;
}
.main #question .answer span {
	display: inline-block;
	padding-right: 75px;
	position: relative;
	text-align: justify;
}
.main #question .answer span::after {
	background-image: url("../images/character.svg");
	background-size: 59px auto;
	content: "";
	height: 90px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 59px;
}


/* Co-good！（コグー）とは？ --------------------------------------------------------------------*/
.main #about .wrap {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-10);
}
.main #about .elements > li {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: var(--margin-20);
}
.main #about .no { width: 87px; }

.main #about .image { text-align: right; }


/* Co-good！（コグー）が実現すること ------------------------------------------------------------*/
.main #todo .elements {
	overflow-x: auto;
	width: 100%;
}
.main #todo .elements .image { min-width: 912px; }


/* エビデンス -----------------------------------------------------------------------------------*/
.main #evidence .title {
	background-color: var(--color-gray-d);
	color: var(--color-white);
	font-size: var(--font-m);
	padding: 13px 0 15px;
}
.main #evidence .image { margin-top: var(--margin-10); }
.main #evidence .elements + .notes {
	margin-top: var(--margin-20);
	text-align: left;
}
.main #evidence .column {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-20);
	margin-top: var(--margin-30);
}
.main #evidence .column h3 { color: var(--color-black); }
.main #evidence .column .banner {
	margin: 0 auto;
	width: 173px;
}


/* コグー紹介ムービー ---------------------------------------------------------------------------*/
.main #movie h2 { color: var(--color-black); }
.main #movie .contents {
	aspect-ratio: 16 / 9;
	padding: 0;
	overflow: hidden;
}
.main #movie .contents iframe {
	height: 100%;
	object-fit: cover;
	width: 100%;
}


/* 導入実績 -------------------------------------------------------------------------------------*/
.main #result .read {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-10);
	margin-top: var(--margin-20);
}
.main #result .read p,
.main #result .read div,
.main #result .read span {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--margin-5);
}
.main #result .read .num {
	font-size: var(--font-num);
	font-weight: var(--weight-m);
}
.main #result .read .l { line-height: var(--line-s); }
.main #result .read .s { font-size: var(--font-m); }

.main #result .c1 .read,
.main #result .c2 .read {
	background-image: url("../images/character.svg");
	background-repeat: no-repeat;
	background-size: 59px auto;
	padding-left: 80px;
}

.main #result .c2 .read div { column-gap: 1em; }
.main #result .c2 .read div > span { align-items: baseline; }

/* 導入実績 */
.main #result .c1 .read {
	position: relative;
	min-height: 90px;
}
.main #result .c1 .read p {
	position: relative;
	z-index: 1;
}
.main #result .c1 .read::before {
	background-image: url("../images/result_image_01.svg");
	background-size: 218px auto;
	content: "";
	height: 146px;
	position: absolute;
	top: -60px;
	right: 0;
	width: 218px;
}

.main #result .lists {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-5);
	margin-top: var(--margin-20);
}
.main #result .lists li {
	font-size: var(--font-m);
	line-height: var(--line-m);
	padding-left: 1em;
	text-indent: -1em;
}

.main #result .c1 .title {
	background-position: right top;
	background-repeat: no-repeat;
	color: var(--color-main);
	font-size: var(--font-l);
	text-align: left;
}
.main #result .c1 .title.i1 {
	background-image: url("../images/result_image_01-1.svg");
	background-size: 75px auto;
}
.main #result .c1 .title.i2 {
	background-image: url("../images/result_image_01-2.svg");
	background-size: 67px auto;
}
.main #result .c1 .title.i3 {
	background-image: url("../images/result_image_01-3.svg");
	background-size: 78px auto;
}

/* 参加者の評価 */
.main #result .c2 .comment { margin-top: 0; }

.main #result .tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--margin-10);
}
.main #result .tags li {
	border-radius: 12px;
	color: var(--color-white);
	font-size: var(--font-xs);
	font-weight: var(--weight-b);
	padding: 5px 1em 6px;
}
.main #result .tags li.tag1 { background-color: var(--color-spot-1); }
.main #result .tags li.tag2 { background-color: var(--color-spot-2); }
.main #result .tags li.tag3 { background-color: var(--color-spot-3); }
.main #result .tags li.tag4 { background-color: var(--color-spot-4); }

.main #result .data {
	background-repeat: no-repeat;
	background-size: 86px auto;
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-10);
	margin-top: var(--margin-20);
	padding-left: 120px;
}
.main #result .data.i1 {
	background-image: url("../images/result_image_02-1.svg");
	min-height: 69px;
}
.main #result .data.i2 {
	background-image: url("../images/result_image_02-2.svg");
	min-height: 76px;
}
.main #result .data.i3 {
	background-image: url("../images/result_image_02-3.svg");
	min-height: 70px;
}
.main #result .data.i4 {
	background-image: url("../images/result_image_02-4.svg");
	min-height: 75px;
}
.main #result .data.i5 {
	background-image: url("../images/result_image_02-5.svg");
	min-height: 76px;
}
.main #result .data.i6 {
	background-image: url("../images/result_image_02-6.svg");
	min-height: 69px;
}

.main #result .profile {
	display: flex;
	flex-wrap: wrap;
	gap: var(--margin-5) var(--margin-20);
	font-size: var(--font-m);
}
.main #result .profile span { font-weight: var(--weight-b); }

/* 導入メリット */
.main #result .c3 .elements > li { padding: 0; }

.main #result .c3 .elements .title {
	border-radius: 10px 10px 0 0;
	color: var(--color-white);
	font-size: var(--font-l);
	line-height: 1;
	padding: 17px 0 19px;
}
.main #result .c3 .elements .title.t1 { background-color: var(--color-spot-5); }
.main #result .c3 .elements .title.t2 { background-color: var(--color-spot-4); }
.main #result .c3 .elements .title.t3 { background-color: var(--color-spot-3); }

.main #result .c3 .elements ul {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-60);
	padding: var(--margin-20);
}
.main #result .c3 .elements ul li { position: relative; }
.main #result .c3 .elements ul li:not(:last-child)::after {
	background-color: #9e9e9e;
	content: "";
	height: 1px;
	position: absolute;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
}

.main #result .midashi {
	font-size: var(--font-l);
	font-weight: var(--weight-b);
	line-height: var(--line-s);
}


/* よくある質問 ---------------------------------------------------------------------------------*/
.main #faq .contents { padding: var(--margin-20); }
.main #faq .contents:not(:first-of-type) { margin-top: var(--margin-15); }

.main #faq dt {
	background-image: url("../images/faq_q.svg");
	background-repeat: no-repeat;
	background-size: 32px auto;
	min-height: 32px;
	font-size: var(--font-h3);
	font-weight: var(--weight-b);
	line-height: var(--line-s);
	padding-top: 3px;
	padding-left: 45px;
}
.main #faq dd {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-15);
}
.main #faq .notes {
	font-size: var(--font-m);
	margin-top: 0;
}


/* まずはお気軽にご相談ください -----------------------------------------------------------------*/
.main #contact .contents {
	border: none;
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-50);
	padding: 0;
}

.main #contact .image { text-align: center; }

.main #contact ul {
	display: flex;
	justify-content: center;
}
.main #contact li { font-size: var(--font-m); }
.main #contact li:not(:last-child)::after { content: "｜"; }
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* フッター -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.footer {
	background-color: var(--color-main);
	color: var(--color-white);
	padding: 10px var(--padding-h);
}
.footer .wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: var(--margin-5);
}

.footer .logowb { width: 210px;/*168px;/*140px;*/ }
.footer .copyright { font-size: var(--font-xxs); }
/*-----------------------------------------------------------------------------------------------*/





@media(min-width: 576px) {
}



@media(min-width: 768px) {
	/* ボタン ---------------------------------------------------------------------------------------*/
	.button a { width: var(--button-width); }
	.button.w a {
		padding: 23px 0 25px;
		width: var(--button-width-s);
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* ヘッダー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.gheader {
		flex-direction: row;
		justify-content: space-between;
	}
	.gheader .logo {
		width: 170px;/*20%;*/
		/*max-width: 170px;*/
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* メイン ---------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.main br.pc { display: inline; }
	.main .contents { padding: var(--margin-40) var(--margin-50); }
	.main .elements {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--margin-30);
	}
	.main .elements > li { width: calc((100% - var(--margin-30)) / 2); }

	/* 地域活性化ご担当のみなさまへ -----------------------------------------------------------------*/
	.main #hero .wrap { margin-top: var(--margin-60); }
	/* ボタン */
	.main #hero .buttons {
		flex-direction: row;
		justify-content: center;
		column-gap: var(--margin-15);
		width: 100%;
	}

	/* こんなお悩みありませんか？ -------------------------------------------------------------------*/
	.main #question .read {
		display: inline-block;
		padding-right: 250px;
	}
	.main #question .read::before {
		background-size: 223px auto;
		height: 106px;
		top: auto;
		bottom: 0;
		width: 223px;
	}
	.main #question .answer { width: 90%; }

	/* Co-good！（コグー）とは？ --------------------------------------------------------------------*/
	.main #about .elements > li:last-child { width: 100%; }

	/* 導入実績 -------------------------------------------------------------------------------------*/
	/* 導入実績 */
	.main #result .c1 .read::before {
		top: auto;
		bottom: 0;
	}
	.main #result .c1 .elements > li:last-child { width: 100%; }
	.main #result .c1 .elements > li br.tb { display: inline; }
	/* 参加者の評価 */
	/* 導入メリット */
	.main #result .c3 .elements > li:last-child { width: 100%; }

	/* よくある質問 ---------------------------------------------------------------------------------*/
	.main #faq dd { padding-left: 45px; }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* フッター -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.footer .wrapper {
		flex-direction: row;
		justify-content: space-between;
	}
	.footer .logowb { width: 145px; }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 992px) {
	/* 変数 -----------------------------------------------------------------------------------------*/
	:root {
		--gheader-h: 82px;
		--font-h2: 2.8rem;/*3.5rem;*/
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* ナビ -----------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* ＝ -------------------------------------------------------------------------------------------*/
	.nav { display: none; }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* グローバル -----------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.global {
		background-color: transparent;
		margin-top: calc(var(--header-h) * -1);
		opacity: 1;
		position: sticky;
		top: 0;
	}
	/* メニュー -------------------------------------------------------------------------------------*/
	.global > div {
		background-color: transparent;
		box-shadow: none;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		height: var(--header-h);
		margin: 0;
		opacity: 1;
		padding-right: var(--padding-h);
		width: 100%;
	}
	.global > div::before { content: none; }
	.global .menu {
		display: flex;
		justify-content: center;
		/*padding-right: var(--padding-h);*/
		pointer-events: none;
		position: absolute;
		left: 0;
		width: 100%;
	}
	.global .menu li::before { content: none; }
	.global .menu a {
		border-bottom: none;
		font-size: var(--font-s);
		font-weight: var(--weight-m);
		padding: 15px 1em 16px;
		pointer-events: auto;
		transition: background-color 0.2s ease-out;
	}
	.global .menu li:not(:last-child) a::after {
		background-color: var(--color-border);
		content: "";
		height: 20px;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		width: 1px;
	}
	/* ボタン */
	.global .button { padding: 0; }
	.global .button a {
		padding-right: 1em;
		padding-left: 1em;
		pointer-events: auto;
		width: auto;
	}

	.global .menu a:hover { background-color: var(--color-global-hover); }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* メイン ---------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* 地域活性化ご担当のみなさまへ -----------------------------------------------------------------*/
	.main #hero .wrap {
		flex-direction: row;
		align-items: flex-start;
		column-gap: var(--margin-60);
	}
	/* テキスト */
	.main #hero .text { flex: 1; }
	.main #hero .text br.pc { display: none; }
	/* ボタン */
	.main #hero .buttons { flex-direction: column; }
	.main #hero .button a { width: auto; }
	.main #hero .button.w a { width: 80%; }
	/* 画像 */
	.main #hero .images { width: 50%; }
	/* Co-good！（コグー）とは？ --------------------------------------------------------------------*/
	.main #about .wrap {
		flex-direction: row-reverse;
		align-items: flex-end;
		justify-content: space-between;
		column-gap: var(--margin-30);
	}
	.main #about .wrap .image { flex: 1; }
	.main #about .elements > li { width: calc((100% - (var(--margin-30) * 2)) / 3) !important; }
	/* エビデンス -----------------------------------------------------------------------------------*/
	.main #evidence .title { font-size: var(--font-l); }
	.main #evidence .column {
		flex-direction: row;
		column-gap: var(--margin-20);
	}
	.main #evidence .column .text { flex: 1; }
	/* 導入実績 -------------------------------------------------------------------------------------*/
	.main #result .contents { padding: var(--margin-60) var(--margin-50); }
	/* 導入実績 */
	.main #result .c1 .read {
		display: inline-block;
		padding-right: 218px;
	}
	.main #result .c1 .elements > li { width: calc((100% - (var(--margin-30) * 2)) / 3) !important; }
	/* 導入メリット */
	.main #result .c3 .elements > li { width: calc((100% - (var(--margin-30) * 2)) / 3) !important; }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1200px) {
	/* 変数 -----------------------------------------------------------------------------------------*/
	:root {
		--header-h: 82px;
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* グローバル -----------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* メニュー -------------------------------------------------------------------------------------*/
	.global .menu a { font-size: var(--font-m); }
	/* ボタン */
	.global .button a { width: var(--button-width-header); }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* メイン ---------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* 導入実績 -------------------------------------------------------------------------------------*/
	/* 導入実績 */
	.main #result .c1 .elements > li br.tb { display: none; }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1400px) {
	/* 変数 -----------------------------------------------------------------------------------------*/
	:root {
		--font-h2: 3.5rem;
		--font-h3: 2.0rem;
		--font-comment: 2.0rem;
		--font-read: 2.4rem;
		--font-midashi: 3.2rem;
		--font-midashi-l: 4.0rem;
		--font-question: 2.8rem;
		--font-num: 4.8rem;
		--margin-120: 150px;
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* グローバル -----------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* メニュー -------------------------------------------------------------------------------------*/
	.global .menu { column-gap: var(--margin-10); }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* メイン ---------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.main .elements > li,
	.main .column { padding: var(--margin-40) var(--margin-30); }
	/* 地域活性化ご担当のみなさまへ -----------------------------------------------------------------*/
	/* テキスト */
	.main #hero .text br.pc { display: inline; }
	.main #hero .read { margin-top: var(--margin-20); }
	/* ボタン */
	.main #hero .buttons {
		flex-direction: row;
		justify-content: space-between;
		margin-top: var(--margin-40);
	}
	.main #hero .button a { width: var(--button-width); }
	.main #hero .button.w a { width: var(--button-width-s); }
	/* エビデンス -----------------------------------------------------------------------------------*/
	.main #evidence .elements > li { padding: var(--margin-20) var(--margin-30); }
	/* コグー紹介ムービー ---------------------------------------------------------------------------*/
	.main #movie h2 { font-size: var(--font-read); }
	/* 導入実績 -------------------------------------------------------------------------------------*/
	.main #result .read { margin-top: var(--margin-40); }
	/* 導入実績 */
	.main #result .c1 .read { padding-right: 273px; }
	.main #result .c1 .read::before {
		background-size: 273px auto;
		height: 183px;
		width: 273px;
	}
	.main #result .lists li { font-size: var(--font-l); }
	/* まずはお気軽にご相談ください -----------------------------------------------------------------*/
	.main #contact .button a {
		border-radius: 42px;
		font-size: var(--font-read);
		padding: 26px 0 29px;
		width: 400px;
		max-width: none;
	}
	.main #contact .image img { width: 420px; }
	.main #contact ul { column-gap: var(--margin-20); }
	.main #contact li:not(:last-child)::after { padding-left: var(--margin-20); }
	/*-----------------------------------------------------------------------------------------------*/
}