@charset "utf-8";
/* top css */

/* loader
-------------------------------------------*/

#Loader {
background: white;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}

#Loader #progress {
background: #479C29;
width: 0;
height: 3px;
position: fixed;
top: 0;
left: 0;
display: block;
}

/* trans
-------------------------------------------*/

#Loader {
transition: all 1s ease;
}

/* anima
-------------------------------------------*/
.load-complete #Loader {
opacity: 0;
}

/* top_mv
---------------------------------------------*/

.top_mv {
width: 100%;
height: 100vh;
margin-top: -100px;
}
.top_mv_inline {
width: 100%;
height: 100%;
min-height: 680px;
position: absolute;
top: 0;
left: 0;
}
.top_mv_text_box {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
z-index: 9;
color: #fff;
text-align: center;
width: 100%;
}
.main_logo {
max-width: 750px;
height: auto;
margin: 0 auto;
margin-bottom: 45px;
}

@media all and (max-width : 1260px ){
.main_logo {
max-width: 650px;
}
}

@media all and (max-width : 1024px ){
.main_logo {
max-width: 550px;
}
}

.main_logo img {
width: 100%;
}
.top_mv_title {
font-family: "cabin-sketch-bold", sans-serif;
font-weight: 700;
line-height: 100%;
font-size: 6.0rem;
letter-spacing: 0;
display: block;
}

@media all and (max-width : 1024px ){
.top_mv_title {
font-size: 5.5rem;
}
}

.top_mv_slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.top_mv_slide_item {
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.top_mv_slide_item::after {
content: '';
background: url("../img/top/bg_bullet.png") left top repeat;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.top_mv_slide_item .item_image {
background-position: center center;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
}
.top_mv_slide_item .item_image--standby {
	transform: scale(1.1);
}
.top_mv_slide_item .item_image--animate {
	animation: mv_slide 6000ms linear;
}

@keyframes mv_slide {
	0% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}
.top_mv_slide_item .item_image img {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	visibility: hidden;
}
.top_mv_slide_item .item_image--pc {
display: block;
}
.top_mv_slide_item .item_image--sp {
display: none;
}
.top_mv_slide_thumb {
background-color: #fff;
width: 100px;
height: 4px;
position: absolute;
bottom: 50px;
right: 110px;
z-index: 99;
overflow: hidden;
border-radius: 4px;
}
.top_mv_slide_thumb span {
background-color: #479C29;
width: 0;
height: 4px;
display: block;
border-radius: 4px;
}
.top_mv_scroll {
padding-bottom: 40px;
position: absolute;
bottom: 0;
left: 48%;
z-index: 99;
font-family: "montserrat", sans-serif;
font-weight: 600;
font-size: 1.2rem;
color: #fff;
transform: translateX(-50%);
animation: anim-to-mv-scroll 2.5s ease infinite;
}

@media only screen and (max-width: 767px) {
	.top_mv_scroll {
		left: 5.3%;
		text-indent: -9999px;
	}
}

@keyframes anim-to-mv-scroll {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateY(15px);
		opacity: .8;
	}
	80% {
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.top_mv_scroll::before {
background-color: #fff;
width: 1px;
height: 35px;
position: absolute;
bottom: 0;
left: 50%;
content: '';
}
.top_mv_navwrap {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}



/* セクションタイトル
-------------------------------------------------- */

.sec_en_title {
font-family: "futura-pt", sans-serif;
font-weight: 600;
font-style: italic;
font-size: 1.4rem;
letter-spacing: 0.05em;
line-height: 100%;
padding-left: 45px;
background-image: url("../img/common/sub_bullet.svg");
background-repeat: no-repeat;
background-position: left center;
margin-bottom: 10px;
}
.sec_main_title {
font-family: "cabin-sketch-bold", sans-serif;
font-weight: 700;
font-size: 6.0rem;
letter-spacing: 0;
line-height: 100%;
margin-left: 40px;
}
.sec_jp_title {
font-family: "dnp-shuei-mgothic-std", sans-serif;
font-weight: 600;
font-size: 1.4rem;
line-height: 100%;
letter-spacing: 0.2em;
margin-left: 45px;
}
.sec_title_wrap {
margin-bottom: 30px;
}


/* sec_philosophy
-------------------------------------------------- */

.content {
margin-top: 0;
}
.sec_philosophy {
position: relative;
padding: 150px 0 120px;
}

@media all and (max-width : 820px ){
.sec_philosophy {
padding: 100px 0 90px;
}
}

#canvas-basic {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
.section_copy {
font-family: "dnp-shuei-mgothic-std", sans-serif;
font-weight: 600;
font-size: 2.4rem;
letter-spacing: 0.2em;
margin-bottom: 30px;
}
.section_txt {
font-size: 1.5rem;
line-height: 200%;
margin-bottom: 30px;
}
.sec_philosophy .section_txt  {
line-height: 240%;
margin-bottom: 50px;
}
.box_right {
width: 59.1%;
padding-top: 20px;
}
.philosophy_box_wrap {
display: flex;
justify-content: space-between;
}

@media all and (max-width : 1100px ){
.philosophy_box_wrap {
display: flex;
flex-direction: column;
}
.box_right {
width: 95%;
padding-top: 20px;
margin-left: 40px;
}
}


/* sec_service
-------------------------------------------------- */

.sec_service {
padding: 80px 0 120px;
}
.sec_service .section_copy,
.sec_service .section_txt {
margin-left: 40px;
}

.service_box {
width: calc(50% - 60px / 2);
margin-right: 60px;
}
.service_box:nth-child(2) {
margin-right: 0px;
}
.service_box_wrap {
display: flex;
padding-top: 30px;
}
.service_imgbox {
position: relative;
margin-bottom: 30px;
overflow: hidden;
background: #000;
}
.service_imgbox img {
width: 100%;
transition-duration: 0.7s;	
}
.service_imgbox img:hover {
transform: scale(1.05);	
transition-duration: 0.7s;	
opacity: 0.8;
}
.service_imgbox .num {
font-family: "cabin-sketch-regular", sans-serif;
font-weight: 400;
font-size: 8.0rem;
letter-spacing: -.02em;
line-height: 100%;
position: absolute;
bottom: -15px;
right: 5px;
color: transparent;
-webkit-text-stroke: 1px #fff;
z-index: 2
}
.service_imgbox .num::before {
content: '#';
color: transparent;
-webkit-text-stroke: 1px #fff;
font-size: 5.0rem;
font-weight: 400;
display: inline-block;
}
.service_txt_box dt {
font-family: "dnp-shuei-mgothic-std", sans-serif;
font-weight: 600;
font-size: 2.2rem;
letter-spacing: 0.2em;
line-height: 100%;
margin-bottom: 20px;
}
.service_txt_box dd {
font-size: 1.4rem;
line-height: 200%;
margin-bottom: 40px;
}
.service_box a {
display: block;
position: relative;
border-bottom: solid 1px #ddd;
}
.service_box a:before {
content: "";
width: 30px;
height: 1px;
background: #8BB220;
position: absolute;
bottom: -1.5px;
left: 0;
transition: .3s;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.service_box a:hover:before {
width: 100%;
}


/* sec_company
-------------------------------------------------- */

.sec_company {
padding-bottom: 40px;
}
.section_copy span {
font-size: 3.6rem;
letter-spacing: 0.05em;
padding: 0px 5px;
}
.sec_company .section_copy,
.sec_company .section_txt {
margin-left: 40px;
}
.company_box_wrap {
display: flex;
padding-top: 30px;
}
.company_box {
width: calc(50% - 40px / 2);
margin-right: 40px;
}
.company_box:nth-child(2) {
margin-right: 0px;
}
.company_imgbox {
position: relative;
overflow: hidden;
background: #000;
}
.company_imgbox img {
width: 100%;
transition-duration: 0.7s;	
}
.company_imgbox img:hover {
transform: scale(1.05);	
transition-duration: 0.7s;	
opacity: 0.8;
}
.graphic {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.graphic.cp_ttile {
width: 59.6%;
}
.graphic.re_ttile {
width: 60.6%;
}
.graphic img {
width: 100%;
}
.graphic img:hover {
transform: scale(1.0);
opacity: 1;
}

@media all and (max-width : 1260px ){
.section_inner,
.sec_service,
.sec_company {
padding-left: 20px;
padding-right: 20px;
}
}
@media all and (max-width : 1024px ){
.sec_company {
padding-bottom: 0;
}
}





/*スマートフォン*/

@media all and (max-width : 767px ){

.top_mv {
height: auto;
}
.top_mv_inline {
min-height: 480px;
}
.top_mv_text_box {
position: absolute;
top:40%;
-webkit-text-size-adjust: 100%;
}
.main_logo {
max-width: 240px;
margin: 0 auto;
margin-bottom: 20px;
}
.top_mv_title {
font-size: 2.9rem;
}
.top_mv_slide_item .item_image--pc {
display: none;
}
.top_mv_slide_item .item_image--sp {
display: block;
}
.top_mv_slide_thumb {
bottom: 25px;
right: 25px;
}
.top_mv_navwrap {
height: 100%;
min-height: 480px;
}


/* セクションタイトル
-------------------------------------------------- */

.sec_en_title {
font-size: 1.2rem;
padding-left: 45px;
margin-bottom: 8px;
}
.sec_main_title {
font-size: 3.0rem;
margin-left: 40px;
margin-bottom: 3px;
}
.sec_jp_title {
font-size: 1.1rem;
letter-spacing: 0.1em;
margin-left: 0px;
display: none;
}
.sec_title_wrap {
margin-bottom: 30px;
}


/* sec_philosophy
-------------------------------------------------- */

.content {
margin-top: 0;
}
.sec_philosophy {
padding: 100px 0 70px;
}
.section_copy {
font-size: 1.4rem;
letter-spacing: 0.1em;
margin-bottom: 20px;
}
.section_txt {
font-size: 1.2rem;
line-height: 200%;
margin-bottom: 30px;
}
.sec_philosophy .section_txt {
font-size: 1.2rem;
line-height: 200%;
margin-bottom: 30px;
}
.box_right {
width: 100%;
padding-top: 0px;
margin-left: 0px;
}
.sec_philosophy .link_btn_s {  
padding: 9px 50px 7px 50px;
}


/* sec_service
-------------------------------------------------- */

.sec_service {
padding: 40px 20px 20px;
}
.sec_service .section_copy,
.sec_service .section_txt {
margin-left: 0px;
}
.service_box {
width: 100%;
margin-right: 0px;
margin-bottom: 40px;
}
.service_box_wrap {
display: flex;
flex-direction: column;
padding-top: 0px;
}
.service_imgbox {
margin-bottom: 20px;
}
.service_imgbox .num {
font-size: 6.0rem;
position: absolute;
bottom: -10px;
right: 5px;
}
.service_imgbox .num::before {
font-size: 3.4rem;
}
.service_txt_box dt {
font-size: 1.6rem;
letter-spacing: 0.1em;
margin-bottom: 10px;
}
.service_txt_box dd {
font-size: 1.2rem;
line-height: 180%;
margin-bottom: 30px;
}


/* sec_company
-------------------------------------------------- */

.sec_company {
padding-bottom: 0px;
}
.section_copy span {
font-size: 1.6rem;
letter-spacing: 0.05em;
padding: 0px 5px;
}
.sec_company .section_copy,
.sec_company .section_txt {
margin-left: 0px;
}
.company_box_wrap {
display: flex;
flex-direction: column;
padding-top: 0px;
}
.company_box {
width: 100%;
margin-right: 0px;
}
.company_imgbox {
margin-bottom: 30px;
}
.graphic.cp_ttile {
width: 70%;
}
.graphic.re_ttile {
width: 60%;
}

}