@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Noto+Sans+JP:wght@300;400;500;700;900&family=Noto+Serif+JP:wght@300;400;500;700;900&family=Roboto:ital,wght@0,300;0,500;0,700;0,900;1,300;1,500;1,700&family=Shippori+Mincho:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Jost:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body{
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    color: #150301;
}
img {width: 100%;height: auto;}
.Lato {font-family:'Lato', sans-serif;}
.Noto_Sans_JP {font-family: 'Noto Sans JP', sans-serif;}
.Noto_Serif_JP {font-family: 'Noto Serif JP', serif;}
.Roboto {font-family: 'Roboto', sans-serif;}
.Shippori_Mincho {font-family: 'Shippori Mincho', serif;}
.mrs-eaves-roman-small-caps {font-family: mrs-eaves-roman-small-caps, serif;font-style: normal;font-weight: 400;}
.montserrat {font-family: "Montserrat", serif;}
.jost{font-family: "Jost", serif;}
.josefin-sans {font-family: "Josefin Sans", serif;}


/*==========================================================
fade SPは削除する
========================================================= */
.fade{
  opacity : 0;
  transition: opacity 2s;
}
 .fade.view{
  opacity: 1;
}


@media screen and (max-width: 767px) {
.fade{
  text-align: unset;
  opacity : unset;
  transition: unset;
}
 .fade.view{
  opacity: unset;
 }
}
/*==========================================================
Base-Kits
========================================================= */
.sp{display: none;}
.pc{display: block;}

@media(max-width:767px) {
	.sp{display: block;}
	.pc{display: none;}
}

/*==========================================================
  Font
========================================================= */


a {
	color: #025ABA;
	text-decoration: underline;
	font-weight: normal;
	transition:.3s;
}
a:visited {
	color: #666;
}
a:hover {
	color: #039;
	font-weight: normal;
	text-decoration: none;
	transition:.3s;
}
p{
	margin-bottom: 1em;
	}
strong {
    font-weight: 600;
}

.lato {font-family: 'Lato', sans-serif;}
.wrap {min-width: 1140px;margin: 0 auto;box-sizing: border-box;font-family: 'Noto Sans JP', sans-serif;position: relative;}
@media screen and (max-width: 767px) {
	.wrap {overflow: hidden;min-width: 100%;}
}


/* =========================================================
============================================================
============================================================
  HEADER
============================================================
============================================================
========================================================= */

header {position: absolute;width: 100%;left: 0;top:0;z-index: 101;}
header .in {max-width: 1140px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center; padding: 32px 10px 0;}
header .in .h_logo {width: 200px;}
ul.pc {max-width: 840px;margin: 0;display: flex;justify-content: flex-end;padding: 0;}
ul.pc li {display: inline-block;padding: 0 40px;}
ul.pc li a {font-size: 16px;font-weight: 700;color: #FFF;text-decoration: none;}

@media screen and (max-width: 767px) {
	header .in {max-width: 100%;margin: 0 auto;display: flex;justify-content: space-between;align-items: center; padding: 4% 3% 0;}
	header .in .h_logo {width: 30%;}
	ul.pc {display: none;}
}


/* =========================================================
============================================================
============================================================
  MV
============================================================
============================================================
========================================================= */
.mv {width: 100%;height: auto; max-height: 100vh; aspect-ratio: 1575 / 975;display: flex;justify-content: center;align-items: flex-start;z-index: 10;position: relative;overflow: hidden;}
.mv .slider {
  width: 100%;
  height: 100%;
  margin-inline: auto;
  overflow: hidden; /* 画像がはみ出ないようにする */
}
.slick-img img {	
}
@keyframes zoomUp {
  0% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1.35); /* 拡大率 */
  }
}
.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}
.mv .slider .slick-img {}
.mv .slider .slick-img img.sp {display: none;}
.mv .slider .slick-img img.pc {display: block;}
.mv .mv_logo {position: absolute;font-size: 60px;font-weight: 900;color: #FFF;left: 50%;bottom:0%;transform: translate(-50%,-0%);}
.mv_page {width: 100%;height: 300px;overflow: hidden;display: flex;justify-content: center;align-items: center;position: relative;}
.mv_page .mv_txt {position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);font-size: 30px;font-weight: 900;color: #FFF;}

@media screen and (max-width: 767px) {
	.mv {width: 100%;height: 100vh; aspect-ratio: auto;;display: flex;justify-content: center;align-items: flex-start;z-index: 10;}
	.slick-slider .slick-track, .slick-slider .slick-list {width: 100%; height: 100%;}
	.mv .slider .slick-img {width: 100%; height: 100%;overflow: hidden;}
	.mv .slider .slick-img img {width: 100%;height: auto;object-fit: cover;}
	.mv .slider .slick-img img.sp {display: block;}
	.mv .slider .slick-img img.pc {display: none;}
	.mv .mv_logo {position: absolute;width: 90%;margin: 0 auto;}
	.mv_page {width: 100%;height: 160px;overflow: hidden;display: flex;justify-content: center;align-items: center;position: relative;}
	.mv_page img {min-width: 100%;min-height: 100%;object-fit: cover;}
	.mv_page .mv_txt {position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);font-size: 6.4vw;font-weight: 700;color: #FFF;}
}



/* =========================================================
============================================================
============================================================
  footer
============================================================
============================================================
========================================================= */
footer {background-color: #1e293b;color: #FFF;}
footer .inner {max-width: 1140px;margin: 0 auto 0;display: flex;justify-content: space-between;padding: 40px 0;}
footer .inner .l_box {display: flex;justify-content: flex-start;align-items: center; width: 570px;}
footer .inner .l_box .logo {width: 82px;margin-right: 16px}
footer .inner .l_box .add_area {line-height: 1.5;font-weight: 700;font-size: 16px;letter-spacing: 0.1em;}
footer .inner .l_box .add_area .c_name {font-size: 22px;}
footer .inner .l_box .add_area .add {}
footer .inner .l_box .add_area .tel {}
footer .inner .r_box {width: 480px;}
footer .inner .r_box .f_nav {width: 100%;display: flex;justify-content: space-around;}
footer .inner .r_box .f_nav li {font-size: 16px;}
footer .inner .r_box .f_nav li a {font-weight: 700;color: #FFF;text-decoration: none;letter-spacing: 0.1em;}
footer .copy {padding: 1.0em 0;font-size: 14px;text-align: center;}

@media screen and (max-width: 767px) {
	footer .inner {max-width: 100%;margin: 0 auto 0;display: block;padding: 5% 0;}
	footer .inner .l_box {display: block; width:100%;text-align: center;}
	footer .inner .l_box .logo {width: 20%;margin: 0 auto 5%;}
	footer .inner .l_box .add_area {width: 90%;margin: 0 auto;line-height: 1.5;font-weight: 700;font-size: 3.4vw;letter-spacing: 0.1em;}
	footer .inner .l_box .add_area .c_name {font-size: 4.8vw;}
	footer .inner .r_box {display: none;}
	footer .copy {padding: 1.0em 0;font-size: 3.2vw;text-align: center;}
}

/* =========================================================
 PAGE TOP
========================================================= */
.pagetop {width: 82px;height: 82px;position: fixed;bottom: 7px;right: 95px;padding:9px;transition:all .3s;font-family: "Montserrat", serif;font-size: 0.6rem;font-weight: 700; letter-spacing: 0.1rem;z-index: 3;background-image:url("../img/btn_pagetop.png");background-repeat: no-repeat;background-size: 100% auto;background-position: center center;cursor:pointer;display: flex;justify-content: center;align-items: center;}
.pagetop a {width: 64px;height: 64px;position: fixed;display: flex;justify-content: center;align-items: center;text-align: center;;color: #000;text-decoration: none;cursor:pointer;box-sizing: border-box;padding:0;}
.pagetop a span {display: inline-block;padding-top: 0.8rem;}
.pagetop a:hover {color:  #FFF;}
.pagetop:after{content:"";position:absolute;top:1.5rem;right:43%;margin:auto;width: .8rem;height: .8rem;border-top: .2em solid #000;border-right: .2em solid #000;transform: rotate(315deg);transition:.3s;}
.pagetop:hover:after{border-top: .2rem solid #FFF;border-right: .2rem solid #FFF;}

@media screen and (max-width: 767px) {
	.pagetop { display: none !important;}
}

#pageNate {width: 100%;padding: 50px 0 104px;display: flex;justify-content: space-between;}
#pageNate .btn_next {}
#pageNate .btn_next a {text-decoration: none;padding: 0 1em 8px 0;border-bottom: solid 2px #000;}
#pageNate .btn_prwv {}
#pageNate .btn_prwv a {text-decoration: none;padding: 0 1em 8px 0;border-bottom: solid 2px #000;}
.wp-pagenavi {width: 100%;margin: 0 auto 0;display: flex;justify-content: center;align-items: center;}
.wp-pagenavi span {width: 56px;height: 56px;border-radius: 28px;display: flex;justify-content: center;align-items: center;margin: 0 5px;}
.wp-pagenavi span.current {background-color: #FFF;color: #8dc21f;font-size: 15px;font-weight: 700;}
.wp-pagenavi a {width: 56px;height: 56px;border-radius: 28px;display: flex;justify-content: center;align-items: center;text-decoration: none;margin: 0 5px;}
.wp-pagenavi a.page {background-color: #8dc21f;color: #FFF;font-size: 15px;font-weight: 700;transition: all 0.5s;}
.wp-pagenavi a.previouspostslink {background-color: #8dc21f;color: #FFF;font-size: 15px;font-weight: 700;transition: all 0.5s;}
.wp-pagenavi a.nextpostslink {background-color: #8dc21f;color: #FFF;font-size: 15px;font-weight: 700;transition: all 0.5s;}
.wp-pagenavi a.previouspostslink:hover,.wp-pagenavi a.nextpostslink:hover,
.wp-pagenavi a.page:hover {background-color: #FFF;color: #8dc21f;}

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

	#pageNate {width: 100%;padding: 6% 0 15%;display: flex;justify-content: space-between;}
	#pageNate .btn_next {}
	#pageNate .btn_next a {font-size: 3.6vw; text-decoration: none;padding: 0 1em 4px 0;border-bottom: solid 2px #000;}
	#pageNate .btn_prwv {}
	#pageNate .btn_prwv a {font-size: 3.6vw; text-decoration: none;padding: 0 1em 4px 0;border-bottom: solid 2px #000;}

}


/* =========================================================
============================================================
============================================================
	contents
============================================================
============================================================
========================================================= */

/*========= TOP CONTENT ===============*/
.about {width: 100%; display: block; position:relative;}
.about:before {content: '';position: absolute;top:0;right: 0; width:  calc(50% - 295px);height: 100%;overflow: hidden; background-image: url("../img/about_bk.jpg");background-repeat: no-repeat;background-position: top center;background-size: cover;/*background-color: rgba(255,255,255,0.5);background-blend-mode: lighten;*/}
.in {max-width: 1140px;margin: 0 auto 0;padding: 80px 10px 0;position: relative;}
.in .head {padding: 0 0 24px;border-bottom: solid 1px #505050;margin-bottom: 16px;}
.in .head .sec_t {color: #045cb4;font-family: "Noto Sans JP", Sans-serif;font-size: 60px;font-weight: 900;font-optical-sizing: auto;font-style: normal;line-height: 2.0}
.in .head .sec_ts {color: #505050;font-size: 16px;font-weight: 500;}
.in .read {color: #505050;font-size: 16px;font-weight: 700;line-height: 1.8;margin-bottom: 24px}
.in h2 {color: #505050;font-size: 22px;font-weight: 700;line-height: 1.8;margin-bottom: 16px;}
.in p {color: #505050;font-size: 16px;font-weight: 500;line-height: 1.8;margin-bottom: 32px;}
.about .in {padding: 80px 25% 40px 10px;box-sizing: border-box;}
.about .in .flex_area {display: flex;justify-content: flex-start;}
.about .in .flex_area .ph {width: 420px;margin-right: 32px;}
.about .in .flex_area .txt_area {}
.about .in .flex_area .txt_area h3 {color: #303030;font-size: 18px;font-weight: 700;line-height: 1.8;margin-bottom: 24px;}
.about .in .flex_area .txt_area p {color: #303030;font-size: 14px;font-weight: 500;line-height: 1.8;margin-bottom: 32px;}
.in .flex_area .txt_area p {color: #303030;font-size: 14px;font-weight: 500;line-height: 1.8;margin-bottom: 32px;}
.works {width: 100%; display: block; position:relative;}
#works.works:before {content: '';position: absolute;top:0;right: 0; width: calc(50% - 295px);height: 100%;overflow: hidden; background-image: url("../img/works_bk.jpg");background-repeat: no-repeat;background-position: top left;background-size: cover;/*background-color: rgba(255,255,255,0.5);background-blend-mode: lighten;*/}
.works .in {padding: 80px 25% 40px 10px;box-sizing: border-box;}
.works .in p {margin-bottom: 64px;}
.works .in p.mb0 {margin-bottom: 0px;}
#works2.works:before {content: '';position: absolute;top:0;right: 0; width: calc(50% - 295px);height: 100%;overflow: hidden; background-image: url("../img/works_bk2.jpg");background-repeat: no-repeat;background-position: bottom center;background-size: cover;/*background-color: rgba(255,255,255,0.5);background-blend-mode: lighten;*/}
#works2.works .in {padding: 80px 25% 40px 10px;box-sizing: border-box;}
.company {width: 100%; display: block; position:relative;padding: 0 0 40px;}
.company:before {content: '';position: absolute;top:0;right: 0; width: calc(50% - 295px);height: 100%;overflow: hidden;background-image: url("../img/company_bk.jpg");background-repeat: no-repeat;background-position: top center;background-size: cover;/*background-color: rgba(255,255,255,0.5);background-blend-mode: lighten;*/padding: 0 0 80px;}
.company .in {box-sizing: border-box;padding-right: 25%;}
.company .in .head {width: 100%;}
.in .map {}
.in .map iframe {width: 100%;height: 500px}
.contact_area {width: 100%;padding: 88px 0;background-image: url("../img/mv01.jpg");background-repeat: no-repeat;background-position: center center;background-size: 100% auto;background-color: rgba(51,65,85,0.50) ;background-blend-mode: darken;overflow-x: hidden;}
.contact_area .in {max-width: 1000px;height: 400px; margin: 0 auto 0;padding: 2% 2%; position: relative;}
.contact_area .in:before {content: '';max-width: 1200px;width: 110%; height: 400px;position: absolute;left: -5%;top:0px;background-color:rgba(51,65,85,0.80); }
.contact_area .in .sec_t {position: relative;font-size: 60px;font-weight: 900;line-height: 1.6;color: #FFF;text-align: center;}
.contact_area .in .read {position: relative;font-size: 16px;font-weight: 500;line-height: 2.0;color: #FFF;text-align: center;margin-bottom: 64px;}
.contact_area .in .btn {display: flex;justify-content: space-between;position: relative;}
.contact_area .in .btn a {display: flex;justify-content: center;align-items: center;line-height: 30px;transition: all 0.5s;}
.contact_area .in .btn a span {display: inline-block;margin-right: 0.5em;}
.contact_area .in .btn a span svg {width: 1em;color: #FFF;}
.contact_area .in .btn a span svg path {fill:#FFF;}
.contact_area .in .btn a.tel {width: 47.5%;box-sizing: border-box;padding: 40px;border: solid 1px #FFF;text-align: center;color: #FFF;font-size: 30px;font-weight: 700;text-decoration: none;}
.contact_area .in .btn a.mail {width: 47.5%;box-sizing: border-box;padding: 40px;border: solid 1px #FFF;text-align: center;color: #FFF;font-size: 30px;font-weight: 700;text-decoration: none;}
.contact_area .in .btn a:hover {background-color: rgba(255,255,255,0.30)}


/*========= PAGE CONTENT ===============*/
.content_wrap {padding: 80px 10px;background-image: url("../img/works_bk.jpg");background-repeat: no-repeat;background-position: top 40px center;background-size: 60% auto;background-color: rgba(255,255,255,0.5);background-blend-mode: lighten;}
.content_wrap .contact_in {max-width:600px;margin: 0 auto 0;}
.wpcf7-form p {margin-bottom: 10px;font-family: "Noto Sans JP", Sans-serif;font-size: 16px;font-weight: 500;color: #000;}
.wpcf7 input.wpcf7-form-control:not([type=submit]), .wpcf7 textarea.wpcf7-form-control {padding: 12px 16px;background-color: rgba(255, 255, 255, 0.3);}
.wpcf7 input,.wpcf7 textarea {width: 100%;}
.wpcf7-form-control-wrap {display: inline-block;width: 100%;box-sizing: border-box;margin: 8px 0 24px;}
.wpcf7-form-control.wpcf7-submit {width: 100%;height: 40px;background-color: #1e293b;color: #FFF;font-size: 16px;font-weight: 500;cursor: pointer;}

@media screen and (max-width: 767px) {
	.about {background-image: url("../img/about_bk_sp.jpg");background-repeat: no-repeat;background-position: top center;background-size: 100% auto;background-color: rgba(255,255,255,1.0);background-blend-mode: normal;padding: 80% 0 10%;}
	.about:before {content: none;}
	.in {max-width: 100%;margin: 0 auto 0;padding: 0 5% 0;}
	.in .head {padding: 0 0 3%;border-bottom: solid 1px #505050;margin-bottom: 3%;}
	.in .head .sec_t {color: #045cb4;font-family: "Noto Sans JP", Sans-serif;font-size: 10vw;font-weight: 900;font-optical-sizing: auto;font-style: normal;line-height: 2.0;text-align: center;}
	.in .head .sec_ts {color: #505050;font-size: 3.6vw;font-weight: 500;text-align: center;}
	.in .read {color: #505050;font-size: 3.6vw;font-weight: 700;line-height: 1.8;margin-bottom: 4%;text-align: center;}
	.in h2 {color: #505050;font-size: 4.2vw;font-weight: 700;line-height: 1.8;margin-bottom: 2%;text-align: center;}
	.in p {color: #505050;font-size: 3.2vw;font-weight: 500;line-height: 1.8;margin-bottom: 4%;text-align: center;}
	.about .in {padding: 10% 5% 5% 5%;box-sizing: border-box;}
	.about .in .flex_area {display: block;}
	.about .in .flex_area .ph {width: 100%;margin: 0 0% 5%;}
	.about .in .flex_area .txt_area {width: 100%;margin: 0 0% 5%;text-align: left;}
	.about .in .flex_area .txt_area h3 {color: #303030;font-size: 4.2vw;font-weight: 700;line-height: 1.8;margin-bottom: 3%;text-align: left;}
	.about .in .flex_area .txt_area p {color: #303030;font-size: 3.0vw;font-weight: 500;line-height: 1.8;margin-bottom: 4%;text-align: left;}
	.in .flex_area .txt_area p {color: #303030;font-size: 3.4vw;font-weight: 500;line-height: 1.8;margin-bottom: 4%;}
	.works {background-image: url("../img/works_bk_sp.jpg");background-repeat: no-repeat;background-position: center top;background-size: 100% auto;background-color: rgba(255,255,255,0.5);background-blend-mode:normal;padding: 70% 0 2%;}
	.works .in {padding: 10% 5% 5% 5%;}
	#works.works:before {content:none;}
	.works .in p {margin-bottom: 8%;}
	#works2.works {background-image: url("../img/works_bk2_sp.jpg");background-repeat: no-repeat;background-position: top center;background-size: 100% auto;background-color: rgba(255,255,255,0.5);background-blend-mode:normal;padding: 70% 0 10%;}
	#works2.works .in {padding: 10% 5% 5% 5%;}
	#works2.works:before {content:none;}
	.company {background-image: url("../img/company_bk_sp.jpg");background-repeat: no-repeat;background-position: top center;background-size: 100% auto;background-color: rgba(255,255,255,0.5);background-blend-mode: normal;padding: 70% 0 10%;}
	.company .in {padding: 10% 5% 5% 5%;}
	.company:before {content: none;}
	.company .in .head {width: 100%;}
	.in .map iframe {width: 100%;height: 400px}
	.contact_area {width: 100%;padding: 10% 0;background-image: url("../img/mv01.jpg");background-repeat: no-repeat;background-position: center center;background-size: auto 100%;background-color: rgba(51,65,85,0.50) ;background-blend-mode: darken;overflow-x: hidden;}
	.contact_area .in {max-width: 1000px;height: auto; margin: 0 auto 0;padding: 0 2%; position: relative;}
	.contact_area .in:before {content: '';max-width: 1200px;width: 90%; height: 110%;position: absolute;left: 5%;top:-5%;background-color:rgba(51,65,85,0.80); }
	.contact_area .in .sec_t {position: relative;font-size: 8vw;font-weight: 900;line-height: 2.0;color: #FFF;text-align: center;}
	.contact_area .in .read {position: relative;font-size: 3.6vw;line-height: 2.0;margin-bottom: 8%;}
	.contact_area .in .btn {display: block;}
	.contact_area .in .btn a {display: flex;justify-content: center;align-items: center;line-height: 30px;transition: all 0.5s;}
	.contact_area .in .btn a span {display: inline-block;margin-right: 0.5em;}
	.contact_area .in .btn a.tel {width: 80%;box-sizing: border-box;padding: 8%;font-size: 4.8vw;margin: 0 auto 5%;}
	.contact_area .in .btn a.mail {width: 80%;box-sizing: border-box;padding: 8%;font-size: 4.8vw;margin: 0 auto 0%;}
	
	.content_wrap {padding: 10% 5%;background-image: url("../img/works_bk.jpg");background-repeat: no-repeat;background-position: top 0 center;background-size: cover;}
	.content_wrap .contact_in {max-width:100%;margin: 0 auto 0;}
	.wpcf7-form p {margin-bottom: 2%;font-family: "Noto Sans JP", Sans-serif;font-size: 3.6vw;font-weight: 500;color: #000;}
	.wpcf7 input.wpcf7-form-control:not([type=submit]), .wpcf7 textarea.wpcf7-form-control {padding: 12px 16px;}
	.wpcf7 input,.wpcf7 textarea {width: 100%;}
	.wpcf7-form-control-wrap {display: inline-block;width: 100%;box-sizing: border-box;margin: 8px 0 24px;}
	.wpcf7-form-control.wpcf7-submit {width: 100%;height: 40px;background-color: #1e293b;color: #FFF;font-size: 16px;font-weight: 500;cursor: pointer;}
}







/* =========================================================
============================================================
============================================================
 Fonts
============================================================
============================================================
========================================================= */
a {
	color: #025ABA;
	text-decoration: underline;
	font-weight: normal;
	transition:.3s;
}
a:visited {
	/*color: #666;*/
}
a:hover {
	color: #039;
	font-weight: normal;
	text-decoration: none;
	transition:.3s;
}
p{
	margin-bottom: 0.5rem;
}



/* =========================================================
============================================================
============================================================
	Contact
============================================================
============================================================
========================================================= */


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



/* =========================================================
============================================================
============================================================
	404
============================================================
============================================================
========================================================= */
.p_header.notfound404 {width: 100%;min-width: 100%; height: 368px;position: relative;overflow: hidden;background-image:url("../img/pagetitle-404.jpg");background-size: cover;display: flex;justify-content: center;align-items: center;}
.error404-page {width: 100%;height:auto;margin: 0 auto 0;position: relative;padding: 176px 0 120px;}
.error404-page:before {content: '';width: 1px;height: 120px;position: absolute;background-color: #231815;left: calc(50% - 0.5px);top: 0;}
.error404-page h2 {font-family: "Montserrat", serif;font-size: 72px;font-weight: 600;color: #000;text-align: center;letter-spacing: 0.15em;margin-bottom: 96px;position: relative;}
.error404-page h2 span {}
.error404-page h2 span:after {content: '';width: 64px;height: 3px;border-radius: 2px;background-color: #D2B68E;position: absolute;left: calc(50% - 32px);bottom: -16px;}
.error404 h2 .s_tit {font-size: 16px;display: block;letter-spacing: 0.45em;}
.error404-page .site-content {max-width: 1040px;box-sizing: border-box;;margin: 0 auto 72px;background-color: inherit;padding:0;}
.error404-page .site-content h3 {text-align: center;font-size: 26px;font-weight: 700;margin: 0 auto 80px;}
.error404-page .site-content p {text-align: center;font-size: 16px;font-weight: 700;line-height: 1.6;letter-spacing: 0.02em; margin: 0 auto 80px;}

@media screen and (max-width: 767px) {
	.p_header.notfound404 {width: 100%;min-width: 100%; height: auto;aspect-ratio: 752 / 368;position: relative;overflow: hidden;background-position: center;}
	.error404-page {width: 100%;height:auto;margin: 0 auto 0;position: relative;box-sizing: border-box; padding: 22% 5% 15%;}
	.error404-page:before {content: '';width: 1px;height: 4rem;position: absolute;background-color: #231815;left: calc(50% - 0.5px);top: 0;}
	.error404-page h2 {font-family: "Montserrat", serif;font-size: 8.8vw;font-weight: 600;color: #000;text-align: center;letter-spacing: 0.1em;margin-bottom: 15%;}
	.error404 h2 .s_tit {font-size: 3vw;display: block;letter-spacing: 0.05em;}
	.error404-page .site-content {max-width: 1040px;box-sizing: border-box;;margin: 0 auto 72px;background-color: inherit;padding:0;}
	.error404-page .site-content h3 {text-align: center;font-size: 6.4vw;font-weight: 700;margin: 0 auto 10%;line-height: 1.6;}
	.error404-page .site-content p {text-align: center;font-size: 4vw;font-weight: 700;line-height: 1.6;letter-spacing: 0.02em; margin: 0 auto 10%;}
}

      
    
    

/*========= アニメーションの指定 ===============*/

/*動きのきっかけの起点となるクラス名 はじめは非表示に*/
.scale-up-tlTrigger,
.scale-up-blTrigger,
.scale-up-brTrigger,
.fadeInTrigger,
.fadeInUpTrigger,
.fadeInUpBigTrigger,
.fadeInDownTrigger,
.fadeInLeft06Trigger,
.zoomIn06Trigger,
.zoomOut06Trigger,
.fadeInUpTriggerOnce{
    opacity:0;
}

/* アニメーションの回数を決めるCSS*/

.count2{  
	animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time{  
	animation-delay: 0.5s;
}
.animate__delay-02s{  
	animation-delay: 0.2s;
}
.animate__delay-04s{  
	animation-delay: 0.4s;
}
.animate__delay-06s{  
	animation-delay: 0.6s;
}
.animate__delay-08s{  
	animation-delay: 0.8s;
}
.animate__delay-10s{  
	animation-delay: 1.0s;
}
.animate__delay-20s{ 
	animation-delay: 2.0s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time{  
	animation-duration: 4.5s;/*この数字を変化させたい時間に変更*/
}


@-webkit-keyframes zoomIn06 {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  100% {
    opacity: 1;
  }
}
@keyframes zoomIn06 {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  100% {
    opacity: 1;
  }
}
.animate__zoomIn06 {
  -webkit-animation-name: zoomIn06;
  animation-name: zoomIn06;
}

@-webkit-keyframes zoomOut06 {
  from {
    opacity: 0;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  100% {
    opacity: 1;
  }
}
@keyframes zoomOut06 {
  from {
    opacity: 0;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  100% {
    opacity: 1;
  }
}
.animate__zoomOut06 {
  -webkit-animation-name: zoomOut06;
  animation-name: zoomOut06;
}


@-webkit-keyframes fadeInUp06 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp06 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUp06 {
  -webkit-animation-name: fadeInUp06;
  animation-name: fadeInUp06;
}



.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
}

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 1s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
 
.slideIn {
  opacity: 0;
  transition: 2s;
}
.slideIn.is-show {
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
 
@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}




@-webkit-keyframes fadeInLeft06 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft06 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeft06{
  -webkit-animation-name: fadeInLeft06;
  animation-name: fadeInLeft06;
}

/**
 * ----------------------------------------
 * animation scale-up-br
 * ----------------------------------------
 */
@-webkit-keyframes scale-up-br {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.0);
            transform: scale(0.0);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
}
@keyframes scale-up-br {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.0);
            transform: scale(0.0);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
}
.animate__scale-up-br {
  -webkit-animation-name: scale-up-br;
  animation-name: scale-up-br;
}

/**
 * ----------------------------------------
 * animation scale-up-bl
 * ----------------------------------------
 */
@-webkit-keyframes scale-up-bl {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.0);
            transform: scale(0.0);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
}
@keyframes scale-up-bl {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.0);
            transform: scale(0.0);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
}
.animate__scale-up-bl {
  -webkit-animation-name: scale-up-bl;
  animation-name: scale-up-bl;
}

/**
 * ----------------------------------------
 * animation scale-up-tr
 * ----------------------------------------
 */
@-webkit-keyframes scale-up-tr {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.0);
            transform: scale(0.0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
}
@keyframes scale-up-tr {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.0);
            transform: scale(0.0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
}
.animate__scale-up-tr {
  -webkit-animation-name: scale-up-tr;
  animation-name: scale-up-tr;
}


/**
 * ----------------------------------------
 * loading animation
 * ----------------------------------------
 */

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeOut 1.5s 2.5s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.loading__logo {
  opacity: 0;
  animation: logo_fade 2.0s 0.5s forwards;
  width: 100px;
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
  }
}



















/* =========================================================
============================================================
============================================================
	EN-PAGE
============================================================
============================================================
========================================================= */
.top_concept .in .concept_box .concept_in .col_l .tit .en-h2 h2 {margin: 0 0 0px;padding: 0;text-align: left;font-size: 32px;font-family: 'Montserrat';font-weight: 700;line-height: 1.40;letter-spacing: 0.05em;}