@charset "UTF-8";
*, *:before, *:after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-scroll-behavior: smooth;
}

body {
	line-height: 1.5;
	animation: fadeIn 1.5s ease 0s 1 normal;
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
  	letter-spacing: .01em;
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	color: #333;
}

@keyframes fadeIn {
 	0% {opacity: 0}
	100% {opacity: 1}
}

img {
	width: 100%;
	vertical-align: bottom;
}

figure {
	margin: 0;
}

.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.inline_blc {
	display: inline-block;
}

.txt_break {
	word-break: keep-all;
}

body p,
body li {
	font-size: max(16px, .8vw);
	line-height: 1.7;
}

.grid {
	display: grid;
}

.grid_ctr {
	display: grid;
	place-items: center;
}

/*ハンバーガーメニュー*/

#nav_input,
#nav_barger {
	display: none;
}

#nav_barger {
	padding: 3vw;
}/*ハンバーガーメニューの位置を確定させる為に上下のパディングはvwで設定*/

#nav_open {
	display: block;
	padding: 12px;
	width: 50px;
	aspect-ratio: 1 / 1;
	cursor: pointer;
}

#nav_open span,
#nav_content ul li #close span {
	display: block;
	height: 2px;
	background: #333;
	border-radius: 2px;
	margin-bottom: 10px;
	transition: .5s;
}

#nav_content ul li #close span {
	width: 38px;
}

#nav_content #close {
	display: inline-block;
	transition: all .1s ease-in-out;
	cursor: pointer;
}

#nav_open span:nth-of-type(3),
#nav_content ul li #close span:nth-of-type(2) {
	margin-bottom: 0;
}

#nav_input:checked~#nav_open span:nth-of-type(1),
#nav_content ul li #close span:nth-of-type(1) {
	transform: translateY(12px) rotate(45deg);
}

#nav_input:checked~#nav_open span:nth-of-type(2) {
	opacity: 0;
}

#nav_input:checked~#nav_open span:nth-of-type(3) {
	transform: translateY(-12px) rotate(-45deg);
}

#nav_content ul li #close span:nth-of-type(2) {
	transform: rotate(-45deg);
}

#nav_content ul li label:hover {
	opacity: .5;
}

#nav_content {
	display: grid;
	place-items: center;
	width: 100%;
	background: #fff;
	text-align: center;
	position: fixed;
	top: calc(50px + 6vw);
	transform: translateX(calc(-100% - 3vw));
	transition: all .7s;
	z-index: 100;
	height: calc(100vh - 50px - 6vw);
}

#nav_content ul li {
	text-align: center;
	position: relative;
}

#nav_content ul li:not(:first-child) {
	margin-top: 10vw;
}

#nav_content ul li a {
	display: inline-block;
	color: #333;
	transition: opacity .2s ease-in-out;
}

#nav_content ul li:nth-of-type(-n+4) a span {
	position: relative;
}

#nav_content ul li a:hover {
	opacity: .6;
}

#nav_input:checked~#nav_content {
	transform: translateX(-3vw);
}

/*ハンバーガーメニューここまで*/

#top header {
	margin-bottom: 12%;
}

header nav {
	padding: 3% 5%;
}

header nav > ul {
	width: fit-content;
	margin-left: auto;
}

header nav > ul li:not(:last-child) {
	margin-right: 5vw;
}

header nav > ul li a {
	display: inline-block;
	color: #333;
	font-size: max(16px, 1.75vw);
	letter-spacing: .08em;
	position: relative;
}

header nav > ul li a span {
	position: relative;
}

header nav > ul li a::before {
	content: "";
	background: url(../img/fvcolor.png) no-repeat center / cover;
	width: 100%;
	height: 15px;
	opacity: .6;
	transform: scale(0, 1);
	position: absolute;
	bottom: 0;
	left: 0;
	transition: transform .6s ease-in-out;
}

header nav > ul li a:hover::before {
	transform: scale(1, 1);
}

.title_wrap {
	padding: 2% 0;
}

.header_txt h1 {
	width: 100%;
	font-size: clamp(30px, 5vw, 52px);
	font-family: "Kiwi Maru", serif;
	font-weight: 200;
	font-style: normal;
	justify-content: center;
	align-items: center;
	text-align: center;
	line-height: 1.5;
	letter-spacing: .2em;
}

.header_txt h1 img {
	width: 20%;
}

.header_txt h1 .small_font {
	font-size: 60%;
}

footer {
	padding: 5%;
	text-align: center;
	border-top: 1px solid #9acd32;
}

/*--------トップ--------*/

.header_image {
	padding: 10% 0 50%;
	background: url(../img/header_image_m.jpg) no-repeat center / cover;
}

.txt_slider {
	position: relative;
	width: 100%;
	min-height: 30px;
}

.txt_slider li {
	font-size: clamp(30px, 5vw, 52px);
	font-family: "Kiwi Maru", serif;
	color: #333;
	text-align: center;
	line-height: 1.5;
	white-space: nowrap;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	animation: fv 16s linear infinite;
}

.txt_slider li:nth-of-type(1) {
	animation-delay: -2s;
}

.txt_slider li:nth-of-type(2) {
	animation-delay: 2s;
}

.txt_slider li:nth-of-type(3) {
	animation-delay: 6s;
}

.txt_slider li:nth-of-type(4) {
	animation-delay: 10s;
}

@keyframes fv {
	0% {
		opacity: 0;
	}

	4.125% {
		opacity: 1;
	}

	25% {
		opacity: 1;
	}

	29.125% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

body main {
	width: 80%;
	margin: 0 auto;
}

.top_title {
	padding: 0 5%;
	margin-bottom: 10%;
}

.top_title h2 {
	font-size: clamp(24px, 4vw, 48px);
	font-weight: 600;
	text-align: center;
	margin-bottom: 5%;
}

.top_title p {
	font-size: clamp(16px, 1.5vw, 24px);
}

.pshuedo_wrap {
	position: relative;
}

.pshuedo_wrap::before {
	content: "";
	background: url(../img/obgreen.png) no-repeat center / cover;
	display: block;
	width: 25%;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: -1;
}

.bar_title {
	display: block;
	text-align: center;
	position: relative;
	margin-bottom: 12%;
}

.bar_title::before {
	content: "";
	width: 100%;
	height: 3px;
	background: #006400;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: -1;
}

.bar_title h2 {
	display: inline-block;
	color: #006400;
	background: #fff;
	padding: 0 1.5rem;
	font-size: clamp(24px, 3.5vw, 36px);
	font-weight: 600;
	letter-spacing: .08em;
}

.pshuedo_icon {
	position: relative;
	font-size: clamp(20px, 2.5vw, 32px);
	font-weight: 600;
	line-height: 1.5;
	padding-left: 35px;
	margin-bottom: 10%;
}

.pshuedo_icon::before {
	content: "";
	display: block;
	width: 30px;
	aspect-ratio: 1 / 1;
	background: url(../img/obgreenmini.png) no-repeat center / contain;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.top_summary_content h3 .inline_blc {
	font-weight: 600;
}

.summary_container {
	grid-template-columns: repeat(2, auto);
	grid-template-rows: repeat(2, auto);
	row-gap: 7rem;
	margin-bottom: 18%;
}

.summary_container .border_paper:nth-of-type(1) {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

.summary_container figure:nth-of-type(1) {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	margin: 180px 0 0 -25%;
}

.summary_container .border_paper:nth-of-type(2) {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}

.summary_container figure:nth-of-type(2) {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	margin: 150px 0 0 -25%;
}

.border_paper {
	padding: 5% 3%;
	background: #fff;
	border: 5px solid #9acd32;
}

.summary_container .border_paper {
	height: fit-content;
}

.border_paper p {
	letter-spacing: .08em;
}

.summary_container .border_paper {
	width: 130%;
	position: relative;
	z-index: 10;
}

.summary_container figure {
	width: 120%;
	justify-self: end;
}

.border_paper,
figure img {
	border-radius: 3px;
}

.button {
	text-align: center;
	margin-bottom: 17%;
}

.button a {
	display: inline-block;
	padding: 5%;
	color: #fff;
	background: #9acd32;
	font-size: clamp(20px, 3.5vw, 32px);
	border-radius: 20px;
	border: 2px solid #9acd32;
	position: relative;
	transition: all .2s ease-in-out;
}

.button a:hover {
	color: #9acd32;
	background: #fff;
}

.office_wrap {
	margin-bottom: 20%;
}

.office_wrap .pshuedo_icon {
	margin-bottom: 5%;
}

.office_wrap > p {
	font-size: clamp(16px, 1.5vw, 24px);
	margin-bottom: 5%;
}

.card_wrap .card {
	width: 47.5%;
}

.card h4 {
	font-size: clamp(16px, 1.5vw, 24px);
	margin-bottom: 5%;
}

.upper_content .card:nth-of-type(-n+2) {
	margin-bottom: 7.5%;
}

.upper_content {
	margin-bottom: 14%;
}

#top main > .pshuedo_wrap {
	margin-bottom: 20%;
}

#top main > .pshuedo_wrap h2 {
	text-align: center;
	font-size: clamp(24px, 4vw, 48px);
	font-weight: 600;
	line-height: 1.5;
}

/*--------サービス利用までの流れ--------*/

header:not(#top header) {
	margin-bottom: 10%;
}

#flow main {
	margin: 0 auto 10%;
}

#flow .bar_title {
	margin-bottom: 16%;
}

.flow_content {
	width: 60%;
	margin: 0 auto;
}

.flow_content li {
	padding: 5%;
	border: 5px solid #9acd32;
	border-radius: 20px;
	position: relative;
	z-index: 1;
}

.flow_content li:not(:last-child) {
	margin-bottom: 12rem;
}

.flow_content li:not(:last-child)::before {
	content: "";
	display: block;
	width: 10%;
	aspect-ratio: 213 / 129;
	background: url(../img/chevron.svg) no-repeat center / cover;
	position: absolute;
	left: 50%;
	bottom: -7.75rem;
	transform: translateX(-50%);
}

.flow_content li h4 {
	color: #006400;
	font-weight: 200;
	font-size: clamp(20px, 2.5vw, 32px);
	margin-bottom: ;
	position: absolute;
	top: -20%;
	left: -5%;
}

.flow_content li span {
	margin-left: 5%;
	font-size: 175%;
	font-weight: 400;
}

.flow_content li h4::before {
	display: block;
	content: "";
	background: url(../img/obgreemstep.png) no-repeat center / cover;
	width: 150%;
	aspect-ratio: 161 / 164;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

.flow_content li h3 {
	font-size: clamp(20px, 2vw, 32px);
	font-weight: 600;
	text-align: center;
	padding-bottom: 5%;
	border-bottom: 1px solid #9acd32;
	margin-bottom: 5%;
}

.flow_content li p {
	font-size: clamp(16px, 1.5vw, 24px);
}

.flow_content li small {
	font-size: 16px;
}

aside {
	width: 80%;
	margin: 0 auto 5%;
	grid-template-columns: 60% 40%;
	align-items: center;
	column-gap: 5%;
}

aside small {
	grid-column: 1 / 2;
	font-size: clamp(16px, 1.5vw, 24px);
	line-height: 2.5;
	padding-left: 1em;
	text-indent: -1em;
}

aside figure {
	grid-column: 2 / 3;
}

/*--------芦別市委託相談支援事業--------*/

.main_content {
	margin-bottom: 16%;
}

.main_content .grid {
	grid-template-columns: repeat(2, auto);
	grid-template-rows: repeat(2, auto);
}

.main_content .grid .border_paper {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	width: 120%;
	padding: 10%;
	position: relative;
	z-index: 10;
}

.main_content .grid .border_paper p {
	margin-bottom: 5%;
}

.main_content .grid .border_paper small {
	display: block;
	line-height: 1.5;
	font-size: 16px;
	padding-left: 1em;
	text-indent: -1em;
}

.main_content figure {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	width: 120%;
	margin: -85px 0 0 -20%;
}

.dl_content {
	margin-bottom: 10%;
}

.dl_content .grid {
	grid-template-columns: 20% 80%;
	align-items: center;
}

.dl_content .grid:not(:last-child) {
	margin-bottom: 5%;
}

.dl_content .grid dt {
	grid-column: 1 / 2;
	/*justify-self: center;*/
}

.dl_content .grid dd {
	grid-column: 2 / 3;
}

.dl_content .grid dt,
.dl_content .grid dd {
	font-size: clamp(16px, 1.5vw, 24px);
	line-height: 1.5;
	align-self: start;
}

/*--------事業所情報--------*/

.map_content {
	margin-bottom: 10%;
}

.map_content .grid {
	grid-template-columns: repeat(2, 1fr);
	column-gap: 5%;
}

.map_content .grid > div {
	grid-column: 1 / 2;
	margin-left: 25%;
}

.map_content .grid div h3 {
	font-size: clamp(20px, 2vw, 28px);
	padding-left: 30px;
}

.map_content .grid div .pshuedo_icon::before {
	width: 25px;
}

.map_content .grid div p {
	margin-bottom: 3%;
}

.map_content .grid div dl {
	margin-bottom: 10%;
}

.map_content .grid div dl .flex {
	justify-content: flex-start;
	margin-bottom: 2%;
}

.map_content .grid div dl .flex dt {
	width: 46px;
}

.map_content .grid div dd a {
	color: #333;
	position: relative;
	transition: all .2s ease-in-out;
}

.map_content .grid div dd a::before {
	content: "\f095";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: clamp(16px, 2vw, 20px);
	color: transparent;
	position: absolute;
	top: 50%;
	right: -30%;
	transform: translateY(-50%);
	transition: color .3s ease-in-out;
}

.map_content .grid div dd a:hover {
	color: #006400;
	font-weight: 600;
}

.map_content .grid div dd a:hover::before {
	color: #006400;
}


.map_content .grid iframe {
	grid-column: 2 / 3;
	width: 100%;
	box-shadow: 10px 10px 0 rgba(0, 0, 0, .5);
}

.upper_map_cont {
	margin-bottom: 16%;
}

.bottom_content {
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	margin-bottom: 10%;
}

.bottom_content div {
	grid-column: 1 / 2;
}

.bottom_content div h3 {
	font-size: clamp(20px, 2vw, 28px);
}

.bottom_content div h3 .inline_blc {
	font-weight: 600;
}

.bottom_content div p:nth-of-type(1) {
	font-size: clamp(16px, 2vw, 32px);
	letter-spacing: .08em;
	font-weight: 600;
	margin-bottom: 7%;
}

.bottom_content .sp_bubble {
	text-align: center;
	padding: 5%;
	background: #9acd32;
	border-radius: 20px;
	font-size: clamp(24px, 3vw, 40px);
	position: relative;
}

.bottom_content .sp_bubble::before {
	content: "";
	display: block;
	width: 5%;
	height: 25%;
	background: #9acd32;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	position: absolute;
	top: 50%;
	right: -4.5%;
	transform: translateY(-50%);
}

.bottom_content figure {
	grid-column: 2 / 3;
	padding: 15.5%;
}

/*□■□■□■□■ jQuary関係 □■□■□■□■*/

.fade_in,
.fade_horizontal {
	opacity: 0;
	transition: all 1s;
}

.fade_in {
	transform: translate(0, 120px);
}

.fade_horizontal {
	transform: translate(120px, 0);
}

.fade_in.active,
.fade_horizontal.active_horizon {
	opacity: 1;
	transform: translate(0, 0);
}

/*□■□■□■□■ breakpoint 1100px□■□■□■□■*/

@media screen and (max-width: 1100px) {

	body main,
	aside {
		width: 90%;
	}

	.summary_container .border_paper {
		width: 140%;
	}

	.summary_container figure:nth-of-type(1) {
		margin: 220px 0 0 -25%;
	}

	.summary_container figure:nth-of-type(2) {
		margin: 180px 0 0 -25%;
	}

	.main_content figure {
		margin: -55px 0 0 -20%;
	}

	.dl_content .grid {
		grid-template-columns: 22% 78%;
	}

	.map_content .grid > div {
		margin-left: 15%;
	}

	.map_content .grid div dl .flex {
		margin-bottom: 3%;
	}

}

/*□■□■□■□■ breakpoint 880px□■□■□■□■*/

@media screen and (max-width: 880px) {

	.summary_container figure:nth-of-type(1) {
		margin: 270px 0 0 -25%;
	}

	.summary_container figure:nth-of-type(2) {
		margin: 200px 0 0 -25%;
	}

	.flow_content li:not(:last-child) {
		margin-bottom: 10rem;
	}

	.flow_content li:not(:last-child)::before {
		bottom: -6.25rem;
	}

}

/*□■□■□■□■ breakpoint 768px□■□■□■□■*/

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

	header nav {
		display: none;
	}

	#nav_barger {
		display: block;
	}

	#nav_open {
		margin-left: auto;
	}

	.summary_container {
		row-gap: 8vw;
		padding-bottom: calc(5% - 2vw);
	}

	.summary_container .border_paper,
	.summary_container figure {
		width: 100%;
	}

	.summary_container .border_paper:nth-of-type(1) {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}

	.summary_container figure:nth-of-type(1) {
		grid-column: 1 / 3;
		grid-row: 2 / 3;
		margin: 0;
	}

	.summary_container .border_paper:nth-of-type(2) {
		grid-column: 1 / 3;
		grid-row: 3 / 4;
	}

	.summary_container figure:nth-of-type(2) {
		grid-column: 1 / 3;
		grid-row: 4 / 5;
		margin: 0;
	}

	.upper_content .card:nth-of-type(-n+3),
	.downner_content .card:nth-of-type(1) {
		margin-bottom: 12.5%;
	}

	.card_wrap .card {
		width: 100%;
	}

	.flow_content {
		width: 85%;
	}

	.flow_content li:not(:last-child) {
		margin-bottom: 8rem;
	}

	.flow_content li:not(:last-child)::before {
		bottom: -5rem;
	}

	#flow .bar_title {
		margin-bottom: 20%;
	}

	#flow aside {
		grid-template-columns: 60% 35%;
	}

	#flow aside small {
		line-height: 1.5;
	}

	.main_content {
		margin-bottom: 6%;
	}

	.main_content .grid .border_paper,
	.main_content figure {
		width: 100%;
	}

	.main_content .grid .border_paper {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}

	.main_content figure {
		grid-column: 1 / 3;
		grid-row: 2 / 3;
		margin: 0;
		padding: 12.5%;
	}

	.map_content {
		margin-bottom: 32%;
	}

	.map_content .grid {
		grid-template-rows: repeat(2, auto);
		column-gap: normal;
		row-gap: 3rem;
	}

	.map_content .grid > div {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}

	.map_content .grid > div {
		margin-left: 5%;
	}

	.map_content .grid iframe {
		grid-column: 1 / 3;
		grid-row: 2 / 3;
		width: 70%;
		justify-self: center;
	}

	.upper_map_cont {
		margin-bottom: 24%;
	}

	.bottom_content {
		grid-template-rows: repeat(2, auto);
	}

	.bottom_content div {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}

	.bottom_content div .pshuedo_icon {
		margin-bottom: 6%;
	}

	.bottom_content .sp_bubble::before {
		width: 8%;
		height: 30%;
		clip-path: polygon(0 0, 100% 0 , 100% 100%);
		top: initial;
		bottom: -29%;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.bottom_content figure {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
	}
}

/*□■□■□■□■ breakpoint 480px□■□■□■□■*/

@media screen and (max-width: 480px) {

	.header_txt h1,
	.txt_slider li {
		font-size: clamp(22px, 5vw, 52px);
	}

	.pshuedo_wrap::before {
		width: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.top_summary_content {
		margin-bottom: 18%;
	}

	.button a {
		font-size: clamp(18px, 3.5vw, 32px);
	}

	.button a span {
		font-weight: 600;
	}

	#flow .bar_title h2,
	#office .bar_title h2 {
		font-size: clamp(22px, 3.5vw, 36px);
		padding: 0 .5rem;
	}

	.flow_content {
		width: 90%;
	}

	.flow_content li h4::before {
		width: 130%;
	}

	.flow_content li:not(:last-child)::before {
		width: 13%;
	}

	.dl_content .grid {
		grid-template-columns: 24% 76%;
	}

	.map_content .grid iframe {
		width: 100%;
	}

	.upper_map_cont {
		margin-bottom: 34%;
	}

	.bottom_content div p:nth-of-type(1) {
		letter-spacing: .08em;
		font-weight: 600;
		text-align: center;
		margin-bottom: 12%;
	}

	/*□■□■□■□■ breakpoint 375px(320pxまでを想定して)□■□■□■□■*/

@media screen and (max-width: 375px) {

	body main,
	aside {
		width: 95%;
	}

	.header_txt h1 {
		font-size: 19px;
	}

	.txt_slider li {
		font-size: 18px;
	}

	.top_title h2,
	#flow .bar_title h2,
	#office .bar_title h2 {
		font-size: 20px;
	}

	.button a {
		font-size: 16px;
	}

	.bottom_content .sp_bubble {
		font-size: 22px;
	}

	#flow .bar_title {
		margin-bottom: 30%;
	}

	.flow_content li:nth-of-type(3),
	.flow_content li:nth-of-type(5),
	.flow_content li:nth-of-type(6) {
		padding: 10% 5% 5%;
	}

	.flow_content li:nth-of-type(4) {
		padding: 15% 5% 5%;
	}

	.dl_content .grid {
		grid-template-columns: 24% 73%;
		column-gap: 3%;
	}
}

/*注意事項
・ヘッダータイトルはウェブフォント(グーグルフォントかな)
・フォントは最小でも16px*/

/*#flowのsection ul liのボーダーの色は#9acd32*/

/*参考に
OGTのSNSサムネ画像はサイズ1200×630で要素を834×465(一番狭いgoogle、一番高さの低いthreads用に)の中に入れる。jpeg、pngで*/