@charset "UTF-8";

.home {background:#f8f8f8;}
#home_mv {position:relative;height:850px;padding-bottom:100px;background:#fff;}
#home_mv::before {
	position:absolute;
	top:0;
	left:0;
	content:'';
	display:block;
	width:calc(100vw - 152px);
	height:700px;
	background:url(../img/home/mv_back.webp) center center no-repeat;
	background-size:cover;
}
.home_mv_inner {
	position:relative;
	padding:405px 40px 0 40px
}
.home_mv_area {
	position:absolute;
	top:35px;
	right:30px;
}
.h_m_a-Inner {position:relative;}
.h_m_a-Inner::before {
	position:absolute;
	top:0;
	left:50%;
	margin-left:-46px;
	content:'';
	width:92px;
	height:102px;
	background:url(../img/home/mv_area.svg) center top no-repeat;
	background-size:contain;
}
.h_m_a-Text {
	font-size:26px;
	font-weight:700;
	writing-mode: vertical-rl;
	letter-spacing: 3px;
	padding-top:110px;
}
.h_m_a-Text span {display:none;}
.home_mv_kind {display:flex;}
.home_mv_kind li {
	position:relative;
	color:#fff;
	font-size:41px;
	font-weight:900;
	margin-right:8px;
	padding:1px 25px;
	background:#1670cb;
}
.home_mv_kind li::before {
	z-index:2;
	position:absolute;
	top:50%;
	margin-top:-13px;
	left:calc(100% - 12px);
	content:"&";
	color:#1670cb;
	font-size:23px;
	font-family:"Roboto", "Noto Sans JP", "メイリオ", "Meiryo", sans-serif;
	background:#fff;
	text-align:center;
	line-height:27px;
	width:27px;
	height:27px;
	border:1px solid #1670cb;
	border-radius:50%;
}
.home_mv_kind li:nth-child(3)::before {display:none;}
.home_mv_title {position:relative;}
.home_mv_title h2 span {
	display:inline-block;
	font-size:47px;
	font-weight:900;
	background:#fff;
	margin-top:7px;
	padding:10px 20px;
}
.home_mv_title h2 span b {
	color:#1670cb;
	font-weight:900;
	letter-spacing: .05em;
}
.h_m_t-Sub {
	position:absolute;
	display:inline-block;
	top:8px;
	left: 500px;
	padding:6px 12px;
	background:#1670cb;
	border-radius:5px;
}
.h_m_t-Sub span {
	position:relatve;
	color:#fff;
	font-size:17px;
	font-weight:700;
}
.h_m_t-Sub span::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -16px;
	margin-top: -8px;
	border: 8px solid transparent;
	border-right: 8px solid #1670cb;
}
.home_mv_point {
	display:flex;
	margin-top:8px;
}
.home_mv_point li {
	text-align:center;
	min-width:280px;
	margin-right:20px;
	padding:16px 0 20px 0;
	border: solid 3px #1670cb;
	background:#fff;
}
.h_m_p_Sub {
	display:inline-block;
	color:#fff;
	font-weight:700;
	font-size:12px;
	padding:0 20px;
	background:#1670cb;
	border-radius:20px;
}
.h_m_p_Main {
	font-size:15px;
	font-weight:700;
	margin-top:5px;
}
.h_m_p_Main b {
	position:relative;
	color:#1670cb;
	font-size: 27px;
	font-weight:700;
}
.h_m_p_Main b::before {
	position:absolute;
	bottom:-5px;
	left:0;
	display:block;
	content:'';
	width:100%;
	height:5px;
	background:#ffb300;
}
.h_m_p_Main b span {
	color:#1670cb;
	font-weight:700;
	line-height:1;
	font-size:42px;
}
.home_midashi {
	display:flex;
	align-items: center;
	padding:0 40px;
}
.home_midashi_Sub {
	color:#1670cb;
	font-size:100px;
	letter-spacing: 5px;
	margin-right:25px;
	font-family:"Roboto", "Noto Sans JP", "メイリオ", "Meiryo", sans-serif;
}
.home_midashi h2 {
	font-size:35px;
	line-height:1.4;
	font-weight:700;
	letter-spacing: 2px;
}
.home_midashi h2 b {
	color:#1670cb;
	font-weight:700;
}
.home_midashi h2 b span {
	color:#1670cb;
	font-family:"Roboto", "Noto Sans JP", "メイリオ", "Meiryo", sans-serif;
	font-size:55px;
	line-height:1;
}

/*== ABOUT ==*/
#home_about {
	padding:0 0 100px 0;
	background:#fff;
}
.home_about_inner {
	width:1026px;
	margin:0 auto;
}
.home_about_box {
	position:relative;
	display:block;
	margin-top:20px;
	padding:20px 0;
}
.home_about_box::before {
	position:absolute;
	top:0;
	left:50%;
	content:'';
	display:block;
	width:50vw;
	height:100%;
}
.home_about_box-1::before {
	background:url(../img/home/about_img2.webp) center top no-repeat;
	background-size:cover;
}
.home_about_box-2::before {
	background:url(../img/home/about_img3.webp) center top no-repeat;
	background-size:cover;
}
.home_about_box-3::before {
	background:url(../img/home/about_img4.webp) center top no-repeat;
	background-size:cover;
}
.home_about_box-4::before {
	background:url(../img/home/about_img1.webp) center top no-repeat;
	background-size:cover;
}
.home_about_box h3 {
	color:#1670cb;
	font-weight:700;
	font-size:25px;
	width:455px;
	margin-top:20px;
}
.home_about_text {
	line-height:2;
	width:455px;
	margin-top:25px;
}
.home_about_no {
	position:relative;
	display:inline-block;
	font-family:"Roboto", "Noto Sans JP", "メイリオ", "Meiryo", sans-serif;
	font-size:35px;
}
.home_about_no::before {
	position:absolute;
	right:-25px;
	bottom:15px;
	content:'';
	display:block;
	width:40px;
	height:2px;
	background:#222;
	transform:rotate(-45deg); 
}


/*== STAFF ==*/
#home_staff {
	padding:100px 0;
	background:#f8f8f8;
}
.home_staff_inner {
	margin-top:40px;
	padding:0 30px;
}
#home_staff ul {
	display:flex;
	width:1026px;
	margin:0 auto;
}
#home_staff ul li {
	width:322px;
	margin-right:30px;
}
#home_staff ul li h3 {
	color:#1670cb;
	font-size:25px;
	font-weight:700;
	margin-top:17px;
}
#home_staff ul li p {
	line-height:2;
	margin-top:10px;
}
#home_staff ul li:nth-child(3) {
	margin-right:0;
}


/*== case ==*/
#home_case {
	padding:100px 0;
	background:#fff;
}
.home_case_inner {
	margin-top:40px;
	padding:0 30px;
}
#home_case ul {
	display:flex;
	width:1026px;
	margin:0 auto;
}
#home_case ul li {
	width:234px;
	margin-right:30px;
}
#home_case ul li p {
	font-size:20px;
	font-weight:700;
	line-height:1.6;
	margin-top:10px;
}
#home_case ul li p b {
	color:#1670cb;
	font-weight:700;
}
#home_case ul li:nth-child(4) {
	margin-right:0;
}


/*== WORKS ==*/
#home_works {
	padding: 100px 0;
	background:#126fba;
}
#home_works .home_midashi_Sub,
#home_works h2 {color:#fff;}
#home_works ul {display: flex;flex-wrap: wrap;width:1026px;margin:50px auto 0 auto;}
#home_works ul li {list-style-type: none;width: 322px;margin:0 30px 0 0;}
#home_works ul li:nth-child(3n) {margin-right: 0;}
#home_works ul li h3 {
	color:#fff;
	font-weight:700;
	font-size: 20px;
	margin: 20px 0 10px 0;
}
#home_works ul li a {
	display: block;
	text-decoration: none;
}
#home_works ul li dl {display: flex;}
#home_works ul li dl dt,
#home_works ul li dl dd {color: #fff;}
#home_works ul li dl dt {text-align:center;width:60px;padding:6px 10px;border-bottom:1px solid #fff;}
#home_works ul li dl dd {width:calc(100% - 60px);padding:6px 10px;border-bottom: 1px solid #2f8ae6;}
#home_works ul li dl dd a {color: #fff;text-decoration: none;}
#home_works dl.works_price {
    border:none;
    align-items: center;
}
#home_works ul li dl.works_price dt {
	color:#1770cb;
    margin-right:20px;
    padding:1px 10px;
    background:#fff;
}
#home_works ul li dl.works_price dd {color:#f7ff00;font-size:30px;font-weight:700;padding:0;border:none;}
#home_works ul li dl.works_price dd span {color:#f7ff00;font-size:20px;font-weight:700;}
.home_btn {
	width:240px;
	margin:65px auto 0 auto;
}
.home_btn a {
    position:relative;
    display:block;
    background:#fff;
    color:#1670cb;
    font-size:15px;
    line-height:50px;
    text-align:center;
    text-decoration:none;
    width:100%;
    height:50px;
    border:1px solid #227cd6;
    border-radius:30px;
    box-sizing:border-box;
}
.home_btn a::before {
    position:absolute;
    display:block;
    content:'';
    top:50%;
    margin-top:-11px;
    right:20px;
    content:'';
    width:22px;
    height:22px;
    background:#2f8ae6;
    border-radius:11px;
}
.home_btn a::after {
    position:absolute;
    top:50%;
    margin-top:-3px;
    right:30px;
    content:'';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
}

/*== FLOW ==*/
#home_flow {
	padding: 70px 0 100px 0;
	background:#fff;
}
.home_flow_inner {
	padding:0 30px;
}
#home_flow ol {
	position:relative;
	display:flex;
	justify-content: space-between;
	width:1026px;
	margin:20px auto 0 auto;
}
#home_flow ol::before {
	position:absolute;
	top:50%;
	margin-top:-50px;
	left:0;
	content:'';
	display:block;
	width:100%;
	height:100px;
	background:#ffb300;
}
#home_flow ol li {
	position:relative;
	display: flex;
	flex-direction: column; /* ←縦積み */
	align-items: stretch;   /* ←帯を横いっぱいに伸ばす */
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;       /* 角丸を帯にも効かせる */
	background: #fff;
	width:95px;
}
#home_flow .flow_no {
	display: block;
	font-family:"Roboto", "Noto Sans JP", "メイリオ", "Meiryo", sans-serif;
	font-size:20px;
	color:#fff;
	font-weight:700;
	text-align:center;
	width:100%;
	padding:10px 0;
	background:#222;
}
.flow_tag {
	color:#fff;
	display: block;
	text-align:center;
	width:100%;
	padding:10px 0;
}
.flow_tag_1 {background:#50a831;}
.flow_tag_2 {background:#1670cb;}
.flow_text {
	font-size:20px;
	flex: 1;
	display: flex;
	align-items: center;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	white-space: nowrap;
	letter-spacing: 4px;
	padding:25px 0 55px 0;
}


/*== TRUST ==*/
#home_trust {
	padding:100px 0;
	background:#f8f8f8;
}
.home_trust_inner {
	display:flex;
	justify-content: space-between;
	width:1086px;
	margin:50px auto 0 auto;
	padding:0 30px;
}
.home_trust_img {
	position:relative;
	width:480px;
}
.home_trust_img::before {
	position:absolute;
	content:'';
	display:block;
	top:80px;
	left:-20px;
	width:480px;
	height:510px;
	background:#fff;
}
.home_trust_img img,
.trust_name {position:relative;}
.trust_name {margin-top:15px;}
.home_trust_text {
	width:513px;
}
.home_trust_text h3 {
	color:#1670cb;
	font-weight:700;
	font-size:25px;
}
.home_trust_text p {
	line-height: 2;
	margin:20px 0 50px 0;
}

@media (hover: hover) and (pointer: fine) {
	.home_btn a {transition: background-color .8s ease;}
    .home_btn a:hover {
        color:#fff;
        border: 1px solid #fff;
        background:#227cd6;
    }
    .works_list a .img_box {overflow:hidden;}
    .works_list a:hover .Item-Box-ImgBox-Img {
        transform: scale(1.3);
    }
}

/*-- SP --*/
@media screen and (max-width: 640px) {
	#home_mv {
		height:auto;
		padding-bottom:12.33vw;
	}
	#home_mv::before {
		width:calc(100vw - 15vw);
		height:43vh;
	}
	.home_mv_inner {
		position:relative;
		padding:25vh 2vw 0 2vw;
	}
	.home_mv_area {
		top:0;
		right:2vw;
	}
	.h_m_a-Inner {position:relative;}
	.h_m_a-Inner::before {
		right:0;
		left:auto;
		margin-left:0;
		width:12vw;
		height:13vw;
	}
	.h_m_a-Text {
		font-size:4vw;
		letter-spacing: 1px;
		padding:15vw 3vw 0 0;
	}
	.h_m_a-Text span {display:inline-block;}
	.h_m_a-Text br {display:none;}
	.home_mv_kind li {
		font-size:5.33vw;
		margin-right:3vw;
		padding:1vw 4vw;
	}
	.home_mv_kind li::before {
		margin-top:-3vw;
		left:calc(100% - 2vw);
		font-size:4vw;
		line-height:6vw;
		width:6vw;
		height:6vw;
	}
	.home_mv_title h2 span {
		font-size:7.33vw;
		margin-top:1vw;
		padding:1vw 4vw;
	}
	.h_m_t-Sub {
		position:relative;
		top:auto;
		left: auto;
		margin:3vw 0 0 0;
		padding:2vw 4vw;
		background:#1670cb;
		border-radius:0;
	}
	.h_m_t-Sub br {display:none;}
	.h_m_t-Sub span {font-size:4vw;}
	.h_m_t-Sub span::before {
		margin-top: auto;
		top: -5vw;
		left: 50%;
		margin-left: -3vw;
		border: 3vw solid transparent;
		border-bottom: 3vw solid #1670cb;
	}
	.home_mv_point {
		margin-top:4vw;
	}
	.home_mv_point li {
		text-align:center;
		min-width:auto;
		width:calc((100% - 4vw) /3);
		margin-right:2vw;
		padding:0 0 3vw 0;
		border: solid 1px #1670cb;
		background:#fff;
	}
	.h_m_p_Sub {
		display:block;
		font-size:3vw;
		line-height:10vw;
		padding:0 1vw;
		height:10vw;
		border-radius:0;
	}
	.home_mv_point li:nth-child(2) .h_m_p_Sub {
		letter-spacing: -.05em;
		line-height:1.3;
		padding:1vw 1vw;
	}
	.h_m_p_Main {
		font-size:3.47vw;
		margin-top:1vw;
	}
	.h_m_p_Main b {
		font-size: 4.66vw;
	}
	.h_m_p_Main b::before {
		bottom:0;
		height:5px;
	}
	.h_m_p_Main b span {
		font-size:7.33vw;
	}
	.home_midashi {
		display:block;
		padding:0 4vw;
	}
	.home_midashi_Sub {
		font-size:9.33vw;
		letter-spacing: .05em;
		margin-right:0;
	}
	.home_midashi h2 {
		font-size:5.33vw;
		letter-spacing: .05em;
	}
	.home_midashi h2 b span {font-size:9.33vw;}


	/*== ABOUT ==*/
	#home_about {padding:0 0 16.33vw 0;}
	.home_about_inner {width:92vw;}
	.home_about_box {
		margin-top:12.33vw;
		padding:50vw 0 0 0;
	}
	.home_about_box::before {
		top:0;
		left:0;
		width:100%;
		height:46vw;
	}
	.home_about_box h3 {
		font-size:4.66vw;
		width:100%;
		margin-top:4vw;
	}
	.home_about_text {
		width:100%;
		margin-top:4vw;
	}
	.home_about_no {
		font-size:6.33vw;
	}
	.home_about_no::before {
		right:-4vw;
		bottom:2vw;
		width:6vw;
		height:1px;
	}


	/*== STAFF ==*/
	#home_staff {
		padding:16.33vw 0;
		background:#f8f8f8;
	}
	.home_staff_inner {
		margin-top:4vw;
		padding:0 4vw;
	}
	#home_staff ul {
		display:block;
		width:92vw;
		margin:3vw auto 0 auto;
	}
	#home_staff ul li {
		width:92vw;
		margin:9.33vw 0 0 0;
	}
	#home_staff ul li h3 {
		font-size:4.66vw;
		margin-top:4vw;
	}
	#home_staff ul li p {margin-top:2vw;}


	/*== case ==*/
	#home_case {
		padding:16.33vw 0;
	}
	.home_case_inner {
		margin-top:8.33vw;
		padding:0 4vw;
	}
	#home_case ul {
		display:block;
		width:92vw;
	}
	#home_case ul li {
		display:flex;
		align-items: center;
		width:92vw;
		margin:4vw 0 0 0;
	}
	#home_case ul li img {
		width:30vw;
		margin-right:4vw;
	}
	#home_case ul li p {
		font-size:4vw;
		margin-top:3vw;
	}


	/*== WORKS ==*/
	#home_works {padding: 16.33vw 0;}
	#home_works ul {
		display: block;
		width:92vw;
		margin:5vw auto 0 auto;
	}
	#home_works ul li {
		width: 92vw;margin:12.33vw 0 0 0;}
	#home_works ul li h3 {
		font-size: 4vw;
		margin: 4vw 0;
	}
	#home_works ul li dl dt {
		width:20vw;
		padding:2vw 3vw;
	}
	#home_works ul li dl dd {
		width:calc(100% - 20vw);
		padding:2vw 3vw;
	}
	#home_works ul li dl.works_price dt {
		margin-right:2vw;
	    padding:.5vw 2vw;
	    background:#fff;
	}
	#home_works ul li dl.works_price dd {font-size:5.33vw;}
	#home_works ul li dl.works_price dd span {font-size:4vw;}
	.home_btn {
		width:60vw;
		margin:7.33vw auto 0 auto;
	}
	.home_btn a {
	    font-size:3.74vw;
	    line-height:1.6;
	    width:100%;
	    height:auto;
	    padding:3vw 4vw;
	}
	.home_btn a::before {
	    margin-top:-3vw;
	    right:2vw;
	    width:6vw;
	    height:6vw;
	    border-radius:50%;
	}
	.home_btn a::after {right:4.5vw;}

	/*== FLOW ==*/
	#home_flow {
		padding: 16.33vw 0;
	}
	.home_flow_inner {
		padding:0 4vw;
	}
	#home_flow ol {
		display:block;
		width:92vw;
		margin:5vw auto 0 auto;
	}
	#home_flow ol::before {
		top:0;
		margin-top:0;
		left:50%;
		margin-left:-5vw;
		width:10vw;
		height:100%;
	}
	#home_flow ol li {
		position:relative;
		display: flex;
		flex-direction: row;
		border-radius: 3px;
		width:100%;
		margin-top:4vw;
	}
	#home_flow .flow_no {
		font-size:4vw;
		width:10vw;
		padding:4vw 0;
	}
	.flow_tag {
		color:#fff;
		display: block;
		text-align:center;
		width:20vw;
		padding:4vw 0;
	}
	.flow_text {
		font-size:4vw;
		flex: 1;
		display: flex;
		align-items: center;
		writing-mode: horizontal-tb;
		text-orientation: mixed;
		white-space: normal;
		letter-spacing: .05em;
		padding:4vw;
	}


	/*== TRUST ==*/
	#home_trust {padding:16.33vw 0;}
	.home_trust_inner {
		display:block;
		width:100vw;
		margin:5vw auto 0 auto;
		padding:0 4vw;
	}
	.home_trust_img {
		width:80vw;
		margin:0 auto 9.33vw auto;
	}
	.home_trust_img::before {
		top:4vw;
		left:-4vw;
		width:80vw;
		height:94vw;
	}
	.trust_name {margin-top:3vw;}
	.home_trust_text {width:100%;}
	.home_trust_text h3 {font-size:4.66vw;}
	.home_trust_text p {margin:4vw 0 7.33vw 0;}
	.home_trust_text p.home_btn {margin:7.33vw auto 0 auto;}
}