@charset "UTF-8";
/*-----------------------------------

	mainvisual_block

-----------------------------------*/
#mainvisual_block {
	width: 100vw;
	height: 490px;
	position: relative;
	z-index: -10;
    display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
}
#mainvisual_block .overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background-color: rgba(21, 79, 110, .4);
}
#mainvisual_block .title {
	
	/* position: absolute; */
	/* top: 50%; */
	/* left: 50%; */
	/* transform: translate(-50%, -50%); */
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	z-index: 2;
	text-align: start;
	font-weight: 700;
	color: var(--tClr2);
}
#mainvisual_block .mv_txt .subtitle {
	font-family: "Josefin Sans", sans-serif;
	font-size: 3.2rem;
	font-weight: 700;
	text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
#mainvisual_block .title h2 {
	font-size: 74px;
	line-height: 1.4;
	text-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}
#mainvisual_block .scroll_box {
	height: 106px;
	width: 22px;
	position:absolute;
	bottom:-360px;
	right:25px;
	animation: arrowmove 1s ease-in-out infinite;
	z-index: 2;
}
@keyframes arrowmove {
	0%{bottom:-360px;}
	50%{bottom:-370px;}
	100%{bottom:-360px;}
}
#mainvisual_block .scroll_box::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 6px;
    width: 1px;
    height: 20px;
    background: #374565;
    transform: skewX(31deg);
}
#mainvisual_block .scroll_box::after {
	content:"";
	position: absolute;
	top: 0;
	right:0;
	width:1px;
	height: 106px;
    background: #374565;
}
#mainvisual_block .scroll_txt {
	position: absolute;
	left: 0;
	top: 10px;
	color: var(--tClr1);
	font: 700 11px/1 var(--fEN);
	letter-spacing: 0.01em;
    writing-mode: vertical-rl;
}
@media screen and (max-width: 1000px) {
	#mainvisual_block .mv_txt .copy {
		font-size: 5.8rem;
	}
}
@media screen and (max-width: 840px) {
	#mainvisual_block .mv_txt .copy {
		font-size: 4.6rem;
	}
	#mainvisual_block .mv_txt p {
		width: 90%;
	}
}
@media screen and (max-width: 640px) {
	#mainvisual_block {
		/*height: calc(100vh - 60px);*/
		height: 300px;
	}
	#mainvisual_block .mv_txt .copy {
		font-size: 3.2rem;
		line-height: 1.4;
	}
	#mainvisual_block .mv_txt p {
		font-size: 1.4rem;
	}
	
	#mainvisual_block .title h2{
		font-size: 30px;
	}
	#mainvisual_block .mv_txt .subtitle{
		font-size: 2rem;
	}
	#mainvisual_block .scroll_box{
		right: 8px;
	}
	#mainvisual_block .scroll_box::before {
        right: 3px;
        height: 10px;
    }
	@keyframes arrowmove {
	    0%{bottom:-10px;}
	    50%{bottom:-20px;}
	    100%{bottom:-10px;}
    }
}
/*-----------------------------------

	base

-----------------------------------*/
#contents{
	width: 100%;
	position: relative;
}

/*title*/
.line_ttl_h3{
	font-size: 3.8rem;
	font-weight: 700;
	padding: 5px 0 30px;
	position: relative;
}
.line_ttl_h3::before,
.line_ttl_h3::after{
	content: "";
	height: 1px;
	position: absolute;
	top: 0;
	left: 0;
	margin: auto;
}
.line_ttl_h3::before{
	right: 0;
	background: var(--mClr3);
	width: 100%;
}
.line_ttl_h3::after{
	background: var(--mClr2);
	width: 56px;
	z-index: 2;
}
.line_ttl_h3 span{
	font-size: 2.4rem;
	padding-left: 19px;
}

.title_box{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
	margin-bottom: 69.5px;
}
.title_box h3{
	font-size: 38px;
	line-height: 2;
	/*margin-bottom: 7.5px;*/
}
.title_box p{
	font-family: "Josefin Sans", sans-serif;
	font-size: 18px;
	font-weight: 700;
	margin-top: 14.5px;
	line-height: 1.4;
}
.line{
	width: 56.5px;
	height: 1px;
	margin: 0 auto;
	background-color: #1E90FE;
}

@media screen and (max-width: 840px){
	.title_box h3{
		font-size: 30px;
	}
	.title_box{
		margin-bottom: 30px;
	}
}
@media screen and (max-width: 640px){
	.line_ttl_h3{
		font-size: 2.5rem;
		padding: 5px 0 10px;
	}
	.line_ttl_h3 span{
		font-size: 1.4rem;
    	padding-left: 8px;
	}
	
	.title_box h3{
		font-size: 20px;
	}
}

/*-----------------------------------

	fixed_menu

-----------------------------------*/
.lower {
    position: fixed;
    top: 259px;
}


/*-----------------------------------

	breadcrumb

-----------------------------------*/
.container{
	padding: 25px 0; 
}
.breadcrumb-nav {
	display: flex;
	justify-content: flex-end;  
}
.breadcrumb-nav .contents_inner{
	overflow: hidden;
}
.breadcrumb {
	justify-content: flex-end;
	flex-wrap: nowrap;
	overflow-x: auto;
} 
.breadcrumb a{
	color: #1E90FE;  
	text-decoration: underline;
	text-decoration-color: #1E90FE; 
}

.breadcrumb li {
	display: flex;
	align-items: center;
	word-break: keep-all;
}
.breadcrumb li + li::before {
	display: block;
	content: "";
	width: 7px;
	height: 6.13px;
	background: url(../img/works/blue_arrow.svg) no-repeat, center center/ contain;
	margin-right: 8.5px;
	margin-left: 8.5px;
}

@media screen and (max-width: 640px){
	.container {
    	padding: 10px 0;
	}
}
@media screen and (max-width: 500px){
	.breadcrumb{
		justify-content: flex-start;
	}
}

/*-----------------------------------

	contents

-----------------------------------*/
.w_box{
	border: 2px solid var(--mClr3);
	background: var(--bgClr1);
	border-radius: 5px;
}

/*service_contact_box*/
.service_contact_box{
	background: var(--bgClr2);
	padding: 78px 0 86px;
}
.service_contact_box .title_box{
	margin-bottom: 40px;
}
.service_contact_box .txt{
	font-weight: 700;
	text-align: center;
}

.more{
	display: block;
    width: 244px;
    text-align: center;
    background: var(--mClr1) url(../img/common/icon_arrow01_wh.svg) no-repeat calc(100% - 20px) center / 12px;
    color: var(--tClr2)!important;
    padding: 14px 0;
    border-radius: calc(1px / 0);
    border: 2px solid #FFF;
	margin: 43px auto 0;
}

.service_contact_box .more{
	pointer-events: none;
	opacity: 0.5;
}

@media screen and (max-width: 840px){
	
}
@media screen and (max-width: 640px){
	.service_contact_box{
		padding: 40px 0;
	}
	.service_contact_box .title_box{
		margin-bottom: 25px;
	}
	
	.more{
		margin: 25px auto 0;
	}
}

/*-----------------------------------

	intro_block

-----------------------------------*/

#intro_block {
    text-align: center;
    padding: 64px 0px;
}

#intro_block p {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.7;
    position: relative;
	padding: 36px 0px;
}

#intro_block p:before,
#intro_block p:after {
    position: absolute;
    content: "";
    width: 56px;
    height: 1px;
    display: block;
    background-color: #1E90FE;
    left: 0;
	right: 0;
	margin: auto;
}

#intro_block p:before {
    top: 0;
}

#intro_block p:after {
    bottom: 0;
}

@media screen and (max-width: 840px) {
}
@media screen and (max-width: 640px) {
	#intro_block{
		padding: 50px 0;
	}
	#intro_block p{
		font-size: 1.7rem;
		padding: 25px 0px;
	}
}