body::before{
	background-image: url("../img/top/bg_dot.png");
	background-size: contain;
	background-repeat: repeat;
	content: "";
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
}

section{
	padding-top: 15rem;
	padding-bottom: 15rem;
}

section > .outer,
section > .inner{
	position: relative;
	z-index: 2;
}


.shape::after,
.shape_invert::after{
	background-image: url("../img/common/img_shape_03.webp");
	background-size: contain;
	content: "";
	height: 54.4rem;
	position: absolute;
	top: -14%;
	left: 0;
	width: 81rem;
}

.shape_invert::after{
	left: auto;
	right: 0;
	transform: scaleX(-1);
}

#top h3{
	font-size: clamp(2rem,5.21vw,4rem);
	margin-bottom: clamp(1.4rem,4.56vw,3.5rem);
	text-align: center;
}

/*----- ↓ under 767px ↓ -----*/
@media screen and (max-width: 767.98px){
	section{
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
	
	.shape::after,
	.shape_invert::after{
		height: 34.62vw;
		top: -4%;
		width: 51.28vw;
	}
}

/*================================

mainvisual

================================*/
#mainvisual{
	align-items: center;
	background-color: #fff;
	display: flex;
	flex-flow: column;
	flex-wrap: wrap;
    justify-content: center;
	height: 100vh;
	position: relative;
}

#mainvisual::before{
	background-image: url("../img/common/img_shape_01.webp");
	background-size: contain;
	content: "";
	height: 27.28vw;
	position: absolute;
	top: 0;
	left: 0;
	width: 23.33vw;
	z-index: 1;
}

#mainvisual:after{
	background-image: url("../img/common/img_shape_02.webp");
	background-size: contain;
	content: "";
	height: 39.38vw;
	position: absolute;
	right: 0;
	bottom: -14.06vw;
	width: 30.68vw;
	z-index: 1;
}


#mainvisual .mv_img{
	aspect-ratio: 16 / 9;
	margin-left: auto;
	margin-right: auto;
	max-width: 177.78vh; 
	position: relative;
	width: 100%;
}

#mainvisual .mv_img .img_box img{
	margin-left: auto;
	margin-right: auto;
}

#mainvisual .mv_img .fukidashi{
	max-width: 8.54%;
	opacity: 0;
	position: absolute;
	visibility: hidden;
	width: 100%;
	z-index: 3;
}

#mainvisual .mv_img .fukidashi.f_01{/* 自転車 */
	top: 19%;
	left: 24.5%;
}
#mainvisual .mv_img .fukidashi.f_02{/* スクーター */
	top: 59%;
	left: 50.5%;
}
#mainvisual .mv_img .fukidashi.f_03{/* 車 */
	top: 24%;
	left: 68.5%;
}
#mainvisual .mv_img .fukidashi.f_04{/* スマートフォン */
	top: 47%;
	left: 33.5%;
}


#mainvisual .mv_img .room{
	opacity: 0;
	position: absolute;
	visibility: hidden;
	z-index: 3;
}

#mainvisual .mv_img .room.r_01{/* 台所 */
	max-width: 18.13%;
	top: 2%;
	left: 39%;
}
#mainvisual .mv_img .room.r_02{/* 洗面所 */
	max-width: 22.29%;
	top: 38%;
	left: 7%;
}
#mainvisual .mv_img .room.r_03{/* 浴室 */
	max-width: 22.66%;
	top: 37.5%;
	left: 70.5%;
}

#mainvisual .mv_text{
	position: absolute;
	left: 50%;
	bottom: 10%;
	transform: translateX(-50%);
	z-index: 2;
}

#mainvisual .mv_text p{
	line-height: 1.6em;
}

#mainvisual .mv_text .ja{
	font-size:clamp(2.5rem,2.08vw,4rem);
	font-weight: 900;
}

#mainvisual .mv_text .en{
	font-size: clamp(1.6rem,1.3vw,2.5rem);
	font-weight: 700;
	line-height: 1em;
}

#mainvisual .mv_text .ja .color,
#mainvisual .mv_text .en{
	color: var(--c-main);
}


/*----- ↑ over 1921px ↑ -----*/
@media screen and (min-width: 1921px){
	#mainvisual .mv_img{
		max-width: 1920px;
	}
}

/*----- ↓ under 767px ↓ -----*/
@media screen and (max-width: 767.98px){
	#mainvisual{
		height: auto;
		padding-top: 110px;
		padding-bottom: 5rem;
	}
	
	#mainvisual::before{
		max-height: 240px;
		max-width: 212px;
		height: 61.54vw;
		width: 54.66vw;
	}
	
	#mainvisual::after{
		max-height: 227px;
		max-width: 176px;
		height: 58.21vw;
		width: 45.13vw;
	}
	
	#mainvisual .mv_img{
		margin-bottom: 12%;
	}
	
	#mainvisual .mv_img .fukidashi{
		max-width: 20.51vw;
	}
	#mainvisual .mv_img .fukidashi.f_01{
		top: 7%;
    	left: 14.5%;
	}
	#mainvisual .mv_img .fukidashi.f_02 {
		top: 63%;
		left: 44.5%;
	}
	#mainvisual .mv_img .fukidashi.f_03 {
		top: 27%;
		left: 79.5%;
	}
	#mainvisual .mv_img .fukidashi.f_04 {
		top: 45%;
		left: 12.5%;
	}
	
	#mainvisual .mv_img .room.r_01{/* 洗面所 */
		max-width: 52.82vw;
		top: -7%;
        left: 27%;
	}
	#mainvisual .mv_img .room.r_02{/* 台所 */
		max-width: 42.31vw;
		top: 67%;
    	left: -3%;
	}
	#mainvisual .mv_img .room.r_03{/* 浴室 */
		max-width: 43.08vw;
		top: 68%;
        left: 57%;
	}
	
	#mainvisual .mv_text {
		position: static;
		transform: none;
	}
	
	#mainvisual .mv_text .ja{
		font-size:clamp(2.5rem,5.22vw,4rem);
	}

	#mainvisual .mv_text .en{
		font-size: clamp(1.6rem,3.26vw,2.5rem);
	}
}


/*================================

Message -- メッセージ

================================*/
#message{
	background-color: var(--c-sub_02);
}

#message .img_box{
	width: 51.5%;
}

#message .img_box img{
	border-radius: 20px;
}

#message .text_box{
	width: 45%;
}

#message .text_box h3{
	margin-bottom: 20px;
	text-align: left;
}

#message .text_box h3 span{
	background-color: #fff;
	display: inline-block;
	font-size: clamp(2.7rem,6.51vw,5rem);
	margin-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

#message .text_box p{
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 1em;
}

/*----- ↓ under 767px ↓ -----*/
@media screen and (max-width: 767.98px){
	#message .img_box,
	#message .text_box{
		width: 100%;
	}
	
	#message .text_box{
		margin-top: 3.5rem;
	}
	
	#message .text_box h3 span{
		margin-bottom: 5px;
	}
	
	#message .text_box p{
		font-size: 1.6rem;
		font-weight: 500;
	}
}


/*================================

About us -- ハヤシを見る

================================*/
#about-us{
	background-color: #fff;
}

#about-us .slide_aboutUs img{
	border-radius: 20px;
	height:auto;
	width: 43vw;
}

#about-us .slide_aboutUs .slick-track {
    display: flex !important;
    align-items: center;
}

#about-us .slide_aboutUs .slick-slide,
#about-us .slide_aboutUs .slick-cloned{
	transform: scale(0.8) translateZ(0);
	transition: transform 0.5s ease;
}

#about-us .slide_aboutUs .slick-slide.slick-center,
#about-us .slide_aboutUs .slick-cloned.slick-center{
	opacity: 1;
	transform: scale(1);
}


#about-us .slide_aboutUs .slick-arrow{
	background-color: #ddd;
	border-radius: 50%;
	cursor: pointer;
	height: 5.21vw;
	position: absolute;
	top: 35%;
	transition: 0.2s;
	width: 5.21vw;
	z-index: 2;
}
#about-us .slide_aboutUs .slick-arrow::before{
	border-top: solid 2px #000000;
	border-right: solid 2px #000000;
	content: '';
	height: 1.04vw;
	position: absolute;
	width: 1.04vw;
}

#about-us .slide_aboutUs .slick-arrow.slick-prev{
	left: 23.5vw;
}
#about-us .slide_aboutUs .slick-arrow.slick-prev::before{
	transform: rotate(-135deg);
	left: 44%;
	top: 38%;
	
}

#about-us .slide_aboutUs .slick-arrow.slick-next{
	right: 23.5vw;
}
#about-us .slide_aboutUs .slick-arrow.slick-next::before{
	transform: rotate(45deg);
	right: 45%;
	top: 40%;
}

#about-us .slide_aboutUs .slick-arrow:active{
	margin-top: 5px;
}

#about-us .text_box{
	margin-top: 8rem;
	margin-bottom: 12rem;
	position: relative;
	text-align: center;
}

#about-us .text_box::before,
#about-us .text_box::after{
	background-size: contain;
	content: "";
	height: 21.88vw;
	position: absolute;
	top: calc(50% - 8rem);
	transform: translateY(-50%);
	width: 20.83vw;
}

#about-us .text_box::before{
	background-image: url("../img/top/bg_about-us_l.webp");
	left: 0;
}
#about-us .text_box::after{
	background-image: url("../img/top/bg_about-us_r.webp");
	right: 0;
}

#about-us .text_box .inner p{
	font-size: clamp(1px,1.33vw,2rem);
	font-weight: 700;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
	max-width: 940px;
	position: relative;
	width: 100%;
	z-index: 1;
}

#about-us .text_box .inner .link_btn{
	margin-top: 5rem;
}

#about-us .text_box .inner .link_btn a{
	margin-top: 10px;
	margin-left: 2rem;
	margin-right: 2rem;
}


#about-us .news_box hgroup{
	text-align: left;
	width: 25%;
}

#about-us .news_box hgroup p{
	font-size: clamp(5rem,9.11vw,7rem);
}

#about-us .news_box hgroup h3{
	color: var(--c-main);
	font-size: clamp(2rem,3.26vw,2.5rem);
	text-align: left;
}

#about-us .news_box ul{
	width: 73%;
}

#about-us .news_box ul li{
	border-top: 1px solid #aaa;
	display: flex;
	justify-content: space-between;
	padding: 2.2rem 0;
}

#about-us .news_box ul li:last-child{
	border-bottom: 1px solid #aaa;
}

#about-us .news_box ul li span{
	color: var(--c-main);
	font-size: 1.8rem;
	font-weight: 700;
	flex-shrink: 0;
	width: 100px;
}

#about-us .news_box ul li a{
	width: calc(100% - 15rem);
}

#about-us .news_box ul li a:hover{
	color: var(--c-accent);
	text-decoration: underline;
}

/*----- ↓ under 767px ↓ -----*/
@media screen and (max-width: 767.98px){
	#about-us .slide_aboutUs img{
		width: 80vw;
	}
	
	#about-us .slide_aboutUs .slick-slide,
	#about-us .slide_aboutUs .slick-cloned{
		transform: scale(0.9) translateZ(0);
	}
	
	#about-us .slide_aboutUs .slick-arrow{
		height: 40px;
		width: 40px;
	}
	
	#about-us .slide_aboutUs .slick-arrow.slick-prev{
		left: 5.5vw;
	}
	#about-us .slide_aboutUs .slick-arrow.slick-next{
		right: 5.5vw;
	}
	
	#about-us .slide_aboutUs .slick-arrow::before{
		height: 8px;
		width: 8px;
	}
	
	#about-us .text_box{
		margin-bottom: 5rem;
	}
	
	#about-us .text_box::before,
	#about-us .text_box::after{
		background-position: center;
		display: block;
		position: static;
		transform: none;
		width: 100%;
	}
	
	#about-us .text_box::before{
		background-image: url(../img/top/bg_about-us_l-sp.webp);
		height: 16.92vw;
		margin-bottom: 30px;
	}
	#about-us .text_box::after{
		background-image: url(../img/top/bg_about-us_r-sp.webp);
		height: 13.85vw;
		margin-top: 30px;
	}
	
	#about-us .text_box .inner p{
		font-size: 1.6rem;
		font-weight: 700;
		text-align: left;
		width: 100%;
	}
	
	#about-us .text_box .inner .link_btn{
		margin-top: 0;
	}
	
	#about-us .text_box .inner .link_btn a{
		margin-left: 0;
		margin-right: 0;
	}
	
	#about-us .news_box hgroup{
		width: 100%;
	}
	
	#about-us .news_box hgroup h3{
		margin-bottom: 0;
	}
	
	#about-us .news_box ul,
	#about-us .news_box ul li span,
	#about-us .news_box ul li a{
		font-size: 1.6rem;
		width: 100%;
	}
	
	#about-us .news_box ul li{
		display: block;
		padding: 10px 0;
	}
}


/*================================

Index -- 目次

================================*/
#index{
	background-color: var(--c-sub_01);
}

#index .flex_box{
	gap: 20px;
	justify-content: center;
}

#index .flex_box a{
	background-color: #fff;
	border-radius: 20px;
	display: block;
	padding: clamp(2.2rem,5.21vw,4rem) 10px;
	width: calc(25% - 20px);
}

#index .flex_box a:first-child,
#index .flex_box a:nth-child(2),
#index .flex_box a:nth-child(3){
	width: calc(33.3% - 20px);
}

#index .flex_box a[target="_blank"]{
	font-size: clamp(1.4rem,3.26vw,2.5rem);
	font-weight: 700;
	text-align: center;
	width: calc(50% - 20px);
}

#index .flex_box a:hover{
	background-color: var(--c-main);
}
#index .flex_box a[target="_blank"]:hover{
	background-color: var(--c-accent);
	color: #fff;
}

#index .flex_box a::before,
#index .flex_box a[target="_blank"]::before{
	background-color: var(--c-main);
	border-radius: 50%;
	content: "";
	height: 45px;
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 45px;
}
#index .flex_box a:hover::before{
	background-color: #fff;
}

#index .flex_box a::after{
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	content: '';
	height: 10px;
	position: absolute;
	right: 28px;
	bottom: 26px;
	transform: rotate(45deg);
	width: 10px;
}
#index .flex_box a:hover::after{
	border-color: var(--c-main);
}


#index .flex_box a[target="_blank"]::before{
	background-color: var(--c-accent);
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}
#index .flex_box a[target="_blank"]:hover::before{
	background-color: #fff;
}

#index .flex_box a[target="_blank"]::after{
	background-image: url("../img/common/icon_target.svg");
	background-size: contain;
	border: none;
	content: "";
	height: 16px;
	position: absolute;
	top: 50%;
	right: 24px;
	bottom: auto;
	transform: translateY(-50%);
	width: 16px;
}

#index .flex_box a[target="_blank"]:hover::after{
	-webkit-mask-image: url("../img/common/icon_target.svg");
  	-webkit-mask-size: contain;
	background-color: var(--c-accent);
	background-image: none;
	mask-image: url("../img/common/icon_target.svg");
  	mask-size: contain;
}

#index .flex_box a hgroup{
	margin-bottom: 30px;
	transition: 0.2s;
}

#index .flex_box a:hover hgroup{
	color: #fff;
}

#index .flex_box a hgroup p{
	font-size: clamp(2rem,5.5vw,5rem);
}

#index .flex_box a hgroup h3{
	font-size: clamp(1.4rem,2.6vw,2rem);
}


#index .flex_box a .icon{
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	height: clamp(5rem,13.02vw,10rem);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	transition: 0.2s;
	width: clamp(6rem,15.63vw,12rem);
}

#index .flex_box a.icon_message .icon{/*-- メッセ―ジ --*/
	background-image: url("../img/top/icon_message.png");
}


#index .flex_box a.icon_about-us .icon{/*-- ハヤシを知る --*/
	background-image: url("../img/top/icon_about-us.png");
}
#index .flex_box a.icon_about-us:hover .icon{/*-- hover:ハヤシを知る --*/
	background-image: url("../img/top/icon_about-us_h.png");
}

#index .flex_box a.icon_discovery .icon{/*-- こんなところにハヤシ --*/
	background-image: url("../img/top/icon_discovery.png");
}
#index .flex_box a.icon_discovery:hover .icon{/*-- hover:こんなところにハヤシ --*/
	background-image: url("../img/top/icon_discovery_h.png");
}

#index .flex_box a.icon_people .icon{/*-- ハヤシのひとたち --*/
	background-image: url("../img/top/icon_people.png");
}
#index .flex_box a.icon_people:hover .icon{/*-- hover:ハヤシのひとたち --*/
	background-image: url("../img/top/icon_people_h.png");
}

#index .flex_box a.icon_data .icon{/*-- 2分で分かるハヤシ --*/
	background-image: url("../img/top/icon_data.png");
}
#index .flex_box a.icon_data:hover .icon{/*-- hover:2分で分かるハヤシ --*/
	background-image: url("../img/top/icon_data_h.png");
}

#index .flex_box a.icon_q-a .icon{/*-- Q&A --*/
	background-image: url("../img/top/icon_q-a.png");
}
#index .flex_box a.icon_q-a:hover .icon{/*-- hover:Q&A --*/
	background-image: url("../img/top/icon_q-a_h.png");
}

#index .flex_box a.icon_entry .icon{/*-- エントリー --*/
	background-image: url("../img/top/icon_entry.png");
}
#index .flex_box a.icon_entry:hover .icon{/*-- hover:エントリー --*/
	background-image: url("../img/top/icon_entry_h.png");
}

/*----- ↓ under 767px ↓ -----*/
@media screen and (max-width: 767.98px){
	#index .flex_box{
		gap: 1rem;
	}
	
	#index .flex_box a,
	#index .flex_box a:first-child,
	#index .flex_box a:nth-child(2),
	#index .flex_box a:nth-child(3),
	#index .flex_box a[target="_blank"]{
		width: calc(50% - 1rem);
	}
	
	#index .flex_box a::before,
	#index .flex_box a[target="_blank"]::before{
		height: 22px;
		width: 22px;
	}
	
	#index .flex_box a[target="_blank"]{
		text-align: left;
	}
	
	#index .flex_box a[target="_blank"]::before{
		height: 20px;
		right: 5.5px;
		width: 20px;
	}
	
	#index .flex_box a[target="_blank"]::after{
		height: 10px;
		right: 10px;
		width: 10px;
	}
	
	#index .flex_box a::after{
		height: 5px;
		right: 19px;
    	bottom: 18px;
		width: 5px;
	}
	
	#index .flex_box a hgroup h3{
		line-height: normal;
	}
	
	#index .flex_box a.icon_entry{
		align-items: center;
		display: flex;
		width: 100%;
	}
	
	#index .flex_box a.icon_entry hgroup{
		align-items: center;
		display: flex;
		flex-shrink: 0;
	}
	
	#index .flex_box a.icon_entry hgroup h3{
		margin-left: 1.1rem;
	}
	
	#index .flex_box a.icon_entry hgroup,
	#index .flex_box a.icon_entry hgroup h3,
	#index .flex_box a.icon_entry .icon{
		margin-bottom: 0;
	}
}


/*================================

Discovery -- こんなところにハヤシ

================================*/
#discovery{
	background-color: var(--c-sub_02);
}

#discovery .discovery_intro{
	background-image: url("../img/top/discovery_img.webp");
	border-radius: 20px;
	padding-top: 9rem;
	padding-bottom: 9rem;
}

#discovery .discovery_intro .circle{
	align-items: center;
	background-color: rgba(255,255,255,0.9);
	border: 5px solid var(--c-main);
	border-radius: 50%;
	display: flex;
	flex-flow: column;
	justify-content: center;
	height: 42rem;
	margin-left: auto;
	margin-right: auto;
	padding: 5rem;
	width: 42rem;
}

#discovery .discovery_intro .circle:hover{
	background-color: rgba(255,255,255,0.6);
}


#discovery .discovery_intro .circle h3{
	color: var(--c-main);
	font-size: 3.2rem;line-height: 1.8em;
	margin-bottom: 20px;
	text-align: center;
}

#discovery .discovery_intro .circle .link{
	color: var(--c-main);
	font-size: 1.8rem;
	margin-top: 20px;
	position: relative;
	text-align: center;
}

#discovery .discovery_intro .circle:hover .link{
	text-decoration: underline;
}

#discovery .discovery_intro .circle .link::before{
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	content: '';
	height: 1rem;
	margin-left: -1.3rem;
	position: absolute;
	left: 50%;
	bottom: 1.2rem;
	transform: rotate(45deg) translateY(-50%);
	width: 1rem;
}

#discovery .discovery_intro .circle .link::after{
	aspect-ratio: 1/ 1;
	background-color: var(--c-main);
	border-radius: 50%;
	content: "";
	display: block;
	min-height: 4.5rem;
	margin-left: auto;
	margin-right: auto;
	max-width: 4.5rem;
}

#discovery #service-city{
	gap: 2rem;
	margin-top: 10rem;
}

#discovery #service-home{
	gap: 2rem;
	margin-top: 2%;
	margin-bottom: 5rem;
}

#discovery .service_card{
	border-radius: 20px;
	text-align: center;
	width: calc(25% - 2rem);
}

#discovery .service_card .card_content{
	background-color: #fff;
	padding: 3rem 15px 2.5rem;
}

#discovery .service_card .icon img{
	margin-left: auto;
	margin-right: auto;
	transition: 0.4s;
}

#discovery .service_card .card_content:hover img{
	transform: scale(1.15);
}

#discovery .service_card .service_name{
	font-size: clamp(1.6rem,2.99vw,2.3rem);
	margin-top: clamp(1.8rem,3.26vw,25px);
	font-weight: 700;
}

/*----- ↓ under 767px ↓ -----*/
@media screen and (max-width: 767.98px){
	#discovery .discovery_intro{
		aspect-ratio: 1/ 1;
		background-repeat: no-repeat;
		background-size: cover;
		margin-bottom: 5rem;
		padding: 15px;
	}
	
	#discovery .discovery_intro .circle{
		aspect-ratio: 1/ 1;
		height: auto;
		padding: 2.3rem;
		width: auto;
	}
	
	#discovery .discovery_intro .circle h3{
		font-size: 4.62vw;
		margin-bottom: 3.85vw;
		line-height: 1.5em;
	}
	
	#discovery .discovery_intro .circle{
		font-size: 3.85vw;
	}
	
	#discovery .discovery_intro .circle .link{
		font-size: 4.62vw;
		margin-top: 2.56vw;
	}
	
	#discovery .discovery_intro .circle .link::before{
		height: 2.05vw;
		margin-left: -2.82vw;
		bottom: 2.56vw;
		width: 2.05vw;
	}
	
	#discovery .discovery_intro .circle .link::after{
		min-height: 8.97vw;
		max-width: 8.97vw;
	}
	
	#discovery .sp{
		margin-top: 4rem;
	}
	
	#discovery .sp img{
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10px;
	}
	
	#discovery #service-city,
	#discovery #service-home{
		margin-top: 0;
		gap: 0;
	}
	
	#discovery #service-home{
		margin-bottom: 0;
	}
	
	#discovery .service_card{
		margin-bottom: 4%;
		width: 48%;
	}
	
	#discovery .service_card .card_content{
		padding: 2rem 10px;
	}
	
	#discovery .service_card .icon img{
		height: 95px;
		width: 95px;
	}
	
	#discovery .service_card .service_name{
		margin-top: 10px;
	}
}

/*================================

People -- ハヤシのひとたち

================================*/
#people h3{
	font-size: 4rem;
	text-align: center;
}

#people .flow{
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-left: auto;
	margin-right: 0;
	position: relative;
}
#people .flow:nth-child(2n){
	flex-flow: row-reverse;
}

#people .flow::before{
	content: "";
	display: block;
	pointer-events: none;
	width: 29.5%;
}

#people .flow:not(:last-child)::after{
	border: 6rem solid transparent;
	border-top: 4.5rem solid var(--c-main);
	content: "";
	position: absolute;
	top: 97%;
	left: 50%;
	transform: translateX(-50%);
}

#people .flow .icon_box{
	align-items: center;
	border-radius: 20px;
	display: flex;
	flex-flow: column;
	justify-content: center;
	padding: 3.1rem 15px;
	width: 23.5%;
}

#people .flow .icon_box .icon{
	align-items: center;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	height: 18rem;
	width: 18rem;
}

#people .flow .icon_box h4{
	color: #fff;
	font-size: 3rem;letter-spacing: 0.05em;
	margin-top: 15px;
}

#people .flow .link_box{
	outline: 4px solid transparent;
	border-radius: 20px;
	text-align: center;
	position: relative;
	width: 29.5%;
}

#people .flow .link_box::before{
	border-radius: 50%;
	content: "";
	height: 50px;
	position: absolute;
	left: 50%;
	bottom: -25px;
	transform: translateX(-50%);
	width: 50px;
}

#people .flow .link_box::after{
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	content: '';
	height: 14px;
	margin-left: -6px;
	position: absolute;
	left: 50%;
	bottom: -14px;
	transform: rotate(45deg) translateX(-50%);
	width: 14px;
}


#people .flow .link_box .img_box{
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	overflow: hidden;
}

#people .flow .link_box .img_box img{
	height: 100%;
	object-fit: cover;
	transition: 0.4s;
	width: 100%;
}
#people .flow .link_box:hover .img_box img{
	transform: scale(1.15);
}

#people .flow .link_box .department{
	background-color: #fff;
	border-radius: 10px;
	font-size: 2.3rem;
	font-weight: 700;
	margin: 3rem 3rem 20px;
}

#people .flow .link_box .year{
	font-size: 1.8rem;
	padding-bottom: 5.5rem;
}


#people .flow#flow_01 .icon_box,
#people .flow#flow_01 .link_box::before{
	background-color: #FF5C5C;
}
#people .flow#flow_01 .link_box{
	background-color: #FFCFCF;
}
#people .flow#flow_01 .link_box:hover{
	outline-color: #FF5C5C;
}

#people .flow#flow_02 .icon_box,
#people .flow#flow_02 .link_box::before{
	background-color: #FF9233;
}
#people .flow#flow_02 .link_box{
	background-color: #FFDFC2;
}
#people .flow#flow_02 .link_box:hover{
	outline-color: #FF9233;
}


#people .flow#flow_03 .icon_box,
#people .flow#flow_03 .link_box::before{
	background-color: #9BD75F;
}
#people .flow#flow_03 .link_box{
	background-color: #E1F3CF;
}
#people .flow#flow_03 .link_box:hover{
	outline-color: #9BD75F;
}

#people .flow#flow_04 .icon_box,
#people .flow#flow_04 .link_box::before{
	background-color: #6EB1FF;
}
#people .flow#flow_04 .link_box{
	background-color: #D4E8FF;
}
#people .flow#flow_04 .link_box:hover{
	outline-color: #6EB1FF;
}

#people .flow#flow_05 .icon_box,
#people .flow#flow_05 .link_box::before{
	background-color: #B983FF;
}
#people .flow#flow_05 .link_box{
	background-color: #EADAFF;
}
#people .flow#flow_05 .link_box:hover{
	outline-color: #B983FF;
}

/*----- ↓ under 767px ↓ -----*/
@media screen and (max-width: 767.98px){
	#people h3{
		font-size: clamp(1.6rem,3.91vw,3rem);
        display: inline-block;
		margin-bottom: 0;
        position: relative;
        left: 10%;
		text-align: left;
	}
	
	#people .flow{
		margin-bottom: 4rem;
	}
	#people .flow::before{
		display: none;
	}
	
	#people .flow:not(:last-child)::after{
		border: 2.5rem solid transparent;
    	border-top: 2rem solid var(--c-main);
		left: 20%;
		
	}
	
	#people .flow:nth-child(2n){
		flex-flow: row;
	}
	
	#people .flow .icon_box{
		padding: 18px 15px;
		width: 40%;
	}
	
	#people .flow .icon_box h4{
		font-size: 1.6rem;
	}
	
	#people .flow .icon_box .icon{
		height: 84px;
		width: 84px;
	}
	
	#people .flow .icon_box .icon img{
		max-width: 62%;
	}
	
	#people .flow .link_box{
		width: 50%;
	}
	
	#people .flow .link_box::before{
		height: 25px;
		bottom: -10px;
		width: 25px;
	}
	#people .flow .link_box::after{
		height: 6px;
    	margin-left: -3px;
    	bottom: -5px;
    	width: 6px;
	}
	
	#people .flow .link_box .img_box{
		height: 165px;
	}
	
	#people .flow .link_box .department{
		border-radius: 20px 0 10px 0;
		font-size: 14px;
		line-height: normal;
		margin: 0;
		padding: 5px 10px;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#people .flow .link_box .year{
		font-size: 14px;
		padding: 16px 5px 32px;
	}
	

}

/*================================

Data -- 2分で分かるハヤシ

================================*/
#data{
	background-color: var(--c-sub_01);
}

#data #date-work{
	margin-bottom: 10rem;
}

#data .service_card{
	border-radius: 20px;
	cursor: pointer;
	margin-bottom: 1%;
	position: relative;
	width: 24%;
}
#data #date-work .service_card:nth-child(2){
	width: 75%;
}

#data .service_card .flip-card-inner{
	height: 100%;
}

#data .service_card .card_content,
#data .service_card .back{
	background-color: #fff;
	backface-visibility: hidden;
	height: 100%;
	padding: 2.5rem 2.5rem 1.5rem;
	text-align: center;
	transition: 0.6s;
}

#data .service_card .card_content{
	display: flex;
    flex-flow: column;
	position: relative;
	z-index: 2;
}

#data .service_card .back{
	background-color: var(--c-main);
	color: #fff;
	display: flex;
	flex-flow: column;
	transform: rotateY(180deg);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}


#data .service_card .card_content h4,
#data .service_card .back h4{
	font-size: 2.3rem;
	margin-bottom: 20px;
	width: 100%;
}

#data .service_card .card_content .icon img{
	margin-left: auto;
	margin-right: auto;
	max-height: 120px;
	max-width: 120px;
}

#data .service_card .card_content .data{
	font-size: 2.3rem;
	font-weight: 700;
	line-height: normal;
	margin-top: 23px;
}

#data .service_card .card_content .data .number{
	color: var(--c-main);
	display: inline-block;
	font-size: clamp(4rem,9.11vw,7rem);
	line-height: 1em;
	margin-left: 5px;
	margin-right: 5px;
	vertical-align: sub;
}

#data #date-work .service_card:nth-child(2) .card_content,
#data #date-work .service_card:nth-child(2) .card_content .company_logo{
	align-items: center;
	display: flex;
	flex-flow: wrap;
	justify-content: space-evenly;
}

#data #date-work .service_card:nth-child(2) .card_content .data_wrap{
	width: 27%;
}
#data #date-work .service_card:nth-child(2) .card_content .company_logo{
	gap: 1rem;
	justify-content: center;
	width: 71.5%;
}

#data #date-work .service_card:nth-child(2) .card_content .company_logo img{
	width: 100%;
}

#data #date-work .service_card:nth-child(2) .card_content .company_logo div{
	width: calc(16.6% - 1rem);
}
#data #date-work .service_card:nth-child(2) .card_content .company_logo div.quarter{
	width: calc(25% - 1rem);
}

#data .service_card .card_content .more,
#data .service_card .back .revert{
	font-size: 14px;
	font-weight: 700;
	margin-top: auto;
	text-align: right;
	padding-top: 15px;
	padding-right: 1.9em;
	position: relative;
	width: 100%;
}

#data .service_card .card_content .more::before,
#data .service_card .back .revert::before{
	background-color: var(--c-accent);
	border-radius: 50%;
	content: "";
	height: 1.5em;
	position: absolute;
	top: calc(0.3em + 15px);
	right: 0;
	width: 1.5em;
}

#data .service_card .card_content .more::after,
#data .service_card .back .revert::after{
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	content: '';
	height: 5px;
	position: absolute;
	top: calc(0.8em + 15px);
    right: 0.6em;
	transform: rotate(45deg);
	width: 5px;
}

#data .service_card .back .revert::before{
	background-color: #fff;
}
#data .service_card .back .revert::after{
	border-top: solid 2px var(--c-main);
	border-right: solid 2px var(--c-main);
}

#data .service_card .back h5{
	border-bottom: 2px solid var(--c-sub_02);
	font-size: 2rem;
	margin-bottom: 15px;
	padding-bottom: 10px;
}

#data .service_card .back p{
	font-size: 1.4rem;
	text-align: left;
}


/*----- ↑ over 768px ↑ -----*/
@media screen and (min-width: 768px){
	#data .service_card:hover .card_content{
		transform: rotateY(180deg);
	}

	#data .service_card:hover .back{
		transform: rotateY(0);
		z-index: 3;
	}
}

/*----- ↓ under 767px ↓ -----*/
@media screen and (max-width: 767.98px){
	#data #date-work{
		margin-bottom: 4rem;
	}
	
	#data h3{
		font-size: 2rem;
	}
	
	#data .service_card{
		margin-bottom: 4%;
	}
	
	#data .service_card,
	#data #date-work .service_card:nth-child(1),
	#data #date-work .service_card:nth-child(2),
	#data #date-work .service_card:nth-child(2) .card_content .data_wrap,
	#data #date-work .service_card:nth-child(2) .card_content .company_logo{
		width: 100%;
	}
	
	#data #date-work .service_card:nth-child(2) .card_content .company_logo{
		gap: 0.5rem;
		margin-top: 20px;
	}
	
	#data #date-work .service_card:nth-child(2) .card_content .company_logo div{
		width: calc(16.6% - 0.5rem);
	}
	#data #date-work .service_card:nth-child(2) .card_content .company_logo div.quarter{
		width: calc(25% - 0.5rem);
	}
	
	#data .service_card .card_content{
		padding-left: 10px;
		padding-right: 10px;
	}
	
	#data .service_card .card_content h4,
	#data .service_card .back h4{
		font-size: 1.9rem;
	}
	
	#data .service_card .card_content .data{
		font-size: 1.8rem;
		margin-top: 10px;
	}
	
	#data .service_card.is-flipped .card_content{
		transform: rotateY(180deg);
	}

	#data .service_card.is-flipped .back{
		transform: rotateY(0);
		z-index: 3;
	}
	
	#data .service_card .back h5{
		font-size: 1.8rem;
	}
	
}

/*================================

Q&A -- よくある質問

================================*/
#q-a{
	background-color: #fff;
}

#q-a .faq_box:not(:first-of-type)  h3{
	margin-top: 10rem;
}

#q-a dl{
	border-top: 1px solid #aaa;
	padding-top: 3rem;
	padding-bottom: 3rem;
	position: relative;
}

#q-a .faq_box dl:last-child{
	border-bottom: 1px solid #aaa;
}

#q-a dl::before,
#q-a dl::after{
	background-color: #fff;
	content: '';
	display: inline-block;
	height: 3rem;
	pointer-events: none;
	position: absolute;
	top: 2em;
	right: 4.25rem;
	width: 3px;
	transition: 0.3s;
	z-index: 2;
}
#q-a dl::after{
 	transform: rotate(90deg);
}
#q-a dl.open::before{
	opacity: 0;
	transform: rotate(90deg);
}


#q-a dl dt{
	cursor: pointer;
	font-size: 2.3rem;
	font-weight: 700;
	line-height: 2em;
	position: relative;
	padding-left: 50px;
	padding-right: 6.5rem;
}

#q-a dl dt::before{
	color: var(--c-accent);
	content: "Q";
	font-family: var(--en);
	font-size: 4rem;
	font-weight: 700;
	line-height: 0;
	position: absolute;
	top: 2rem;
	left: 0;
}

#q-a dl dt:after{
	background-color: var(--c-main);
	border-radius: 10px;
	content: "";
	height: 6rem;
	position: absolute;
	top: -0.8rem;
	right: 1.5rem;
	width: 6rem;
}

#q-a dl dd{
	display: none;
	font-size: 1.8rem;
	line-height: 2em;
	padding-top: 14px;
	padding-left: 50px;
	padding-right: 6.5rem;
}

#q-a dl dd h4{
	color: var(--c-main);
	font-size: 2rem;
	margin-top: 10px;
}

#q-a dl dd ul li{
	font-size: 1.8rem;
	padding-left: 1.2em;
}

#q-a dl dd ul li::before{
	background-color: var(--c-main);
	border-radius: 50%;
	content: "";
	height: 0.7em;
	position: absolute;
	top: 0.75em;
	left: 0;
	width: 0.7em;
}

/*----- ↓ under 767px ↓ -----*/
@media screen and (max-width: 767.98px){
	#q-a dl{
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	
	#q-a dl::before, 
	#q-a dl::after{
		height: 1em;
		top: 2.7rem;
		right: 2.85rem;
		width: 2px;
	}
	
	#q-a dl dt,
	#q-a dl dd{
		font-size: 1.6rem;
		padding-left: 3.5rem;
	}
	
	#q-a dl dt::before{
		font-size: 3rem;
		top: 1.5rem;
	}
	
	#q-a dl dt:after{
		border-radius: 5px;
		height: 3rem;
		top: 0;
		width: 3rem;
	}
	
	#q-a dl dd{
		padding-right: 0;
	}
	
	#q-a dl dd h4{
		font-size: 1.8rem;
	}
	
	#q-a dl dd ul li{
		font-size: 1.6rem;
	}
}