@charset "UTF-8";


html, body{
	margin: 0;
	padding: 0;
	margin-left:auto;
	margin-right:auto; 
	font-family: "Noto Sans JP","ヒラギノ角ゴ Pro W3","Yu Gothic Medium","游ゴシック Medium",YuGothic,游ゴシック体,メイリオ,sans-serif;
    font-size: var(--base);
	color: #222222;
    line-height: 1.65;
	letter-spacing: .1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: 'palt';
    font-feature-settings: 'palt';
	z-index: -9999;
    box-sizing: border-box;
    text-align: left;
}

body p{
    line-height: 2.0;
}

body a:hover{
    text-decoration: none !important;
}

body img{
    width: 100%;
    height: auto;
}

#container{
    width: 100%;
    overflow: hidden;
    position: relative;
}


/*-----------------------------------------------------
font
-------------------------------------------------------*/

/*Montserrat*/
@font-face {
   font-family: 'montserrat';
   src: url('../../fonts/Montserrat-Bold.ttf') format("truetype");
   font-weight: bold;
   font-style: normal;
   font-display: swap;    
}

/*notosansjp*/
@font-face {
   font-family: 'notosansjp';
   src: url('../../fonts/NotoSansJP-Bold.woff2') format("woff2"),
	    url('../../fonts/NotoSansJP-Bold.woff') format("woff");
   font-weight: bold;
   font-style: normal;
   font-display: swap;    
}
/*-----------------------------------------------------
root
-------------------------------------------------------*/

:root {
    
/*font-size*/    
font-size: 62.5% !important;
--base: 1.7rem;
--s10: 1.0rem;
--s12: 1.2rem;
--s13: 1.3rem;
--s14: 1.4rem;    
--s15: 1.5rem; 
--s16: 1.6rem;    
--s17: 1.7rem;    
--s18: 1.8rem;
--s22: 2.2rem; 
--s24: 2.4rem;    
--s26: 2.6rem;     
--s32: 3.2rem;
--s36: 3.6rem;
--s42: 4.2rem;
--s46: 4.6rem;
	
--s64en: 6.4rem;
--s16en: 1.6rem;    
--s10en: 1.0rem;
--s12en: 1.2rem;
--s14en: 1.4rem; 
--s26en: 2.6rem;
--s32en: 3.2rem;    
    
--imgh: 34vw;    
    
/*line-height*/    
--lh12: 1.2;
--lh14: 1.4;
--lh15: 1.5;
--lh16: 1.6;
--lh18: 1.8;
--lh20: 2.0;


/*color*/
--blue1: #007eb2;
--blue2: #004d8e;
--whi: #ffffff;
--gra1: #7D7D7D;
--gra2: #E6E6E6;
--gra3: #F8F8F8;
}


/*-----------------------------------------------------
global
-------------------------------------------------------*/
.g-font1 {
    font-family: 'montserrat', sans-serif !important;
}

.g_font2 {
    font-family: 'notosansjp', sans-serif !important;
}


.g-w1100{
    width: 1100px !important;
    margin: 0 auto;
}

.g-w940{
    width: 940px !important;
    margin: 0 auto;
}

.g-w800{
    width: 800px !important;
    margin: 0 auto;
}

.g-btn{
    width: 200px;
    position: relative;
    overflow: hidden;
    transition: ease .2s;
    background: var(--whi);
    border: 1px solid var(--gra2);
    border-radius: 40px;
}

.g-btn a{
    display: inline-block;
    padding: 20px 0px;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 10;
}

.g-btn:hover a{
  color: #ffffff;
}

.g-btn:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--nav);
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}

.g-btn:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}


.g-btn{}

.g-shadow{
    box-shadow: 2px 2px 6px rgb(0 0 0 / 8%) !important;
}

.g-only-pc{
    display: block;
}

.g-only-sp{
    display: none !important;
}

.g-hidden{
    overflow: hidden;
}


/*-----------------------------------------------------
animation
-------------------------------------------------------*/
@keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
}

/*-----------------------------------------------------
inview
-------------------------------------------------------*/
/*mv*/
.animation.js-fadeIn {
  opacity: 0;
  transition: opacity .6s;
}
.animation.is-inview.js-fadeIn {
  opacity: 1;
}

.animation.js-fadeDown {
  opacity: 0;
  transform: translateY(-76px);
  transition: opacity .6s, transform .6s;
}
.animation.is-inview.js-fadeDown {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .2s;
}

.animation.js-fadeUp {
  opacity: 0;
  transform: translateY(76px);
  transition: opacity .6s, transform .6s;
}
.animation.is-inview.js-fadeUp {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .6s;
}


.animation.js-fadeUp1 {
  opacity: 0;
  transform: translateY(76px);
  transition: opacity .6s, transform .6s;
}
.animation.is-inview.js-fadeUp1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .2s;
}

.animation.js-fadeUp2 {
  opacity: 0;
  transform: translateY(76px);
  transition: opacity .6s, transform .6s;
}
.animation.is-inview.js-fadeUp2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .6s;
}

.animation.js-fadeSlide-r {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .6s, transform .6s;
}
.animation.is-inview.js-fadeSlide-r {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .2s;
}

.animation.js-fadeSlide-l {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .6s, transform .6s;
}
.animation.is-inview.js-fadeSlide-l {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .2s;
}



/*-----------------------------------------------------
drawer
-------------------------------------------------------*/
.drawer-btn{
  width: 76px;
  height: 76px;
  background: var(--red);
  position: relative;
}

.drawer-btn:hover{
    cursor: pointer;
}

.drawer-btn--wrap{
    width: 27px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    
}

.drawer-btn--wrap span{
  position: absolute;
  display: inline-block;
  transition: all .4s;
  height: 3px;
  background: #ffffff;
}

.drawer-btn--wrap span:nth-of-type(1) {
  width: 100%;
  top:0px; 
}

.drawer-btn--wrap span:nth-of-type(2) {
  width: 100%;
  top:8px;
}

.drawer-btn--wrap span:nth-of-type(3) {
  width: 60%;
  top:16px;
}

.drawer-btn.active span:nth-of-type(1) {
  top: 3px;
  left: 0px;
  transform: translateY(6px) rotate(-135deg);
  width: 100%;
}

.drawer-btn.active span:nth-of-type(2) {
  opacity: 0;
}

.drawer-btn.active span:nth-of-type(3){
  top: 15px;
  left: 0px;
  transform: translateY(-6px) rotate(135deg);
  width: 100%;
}



/*-----------------------------------------------------
header
-------------------------------------------------------*/
.header-cont{
    height: 110px;
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    padding-left: 30px;
    z-index: 90;
}

.header-logo{
    width: 200px;
    height: auto;
    margin-right: auto;
}

.header-logo a{
    width: 100%;
    height: auto;
}

.header-logo img{
    width: 100%;
    height: auto;
}

.header-menu ul{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    margin-right: 30px;
}

.header-menu a{
    height: auto;
    margin-right: 20px;
}



/*-----------------------------------------------------
fv
-------------------------------------------------------*/
.mv {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh; 
    overflow: hidden;
    padding: 0 8%;
}

.mv_content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.mv_content h2 {
    font-size: clamp(2.5rem, calc(1rem + 3.5vw), 6rem);
    line-height: var(--lh14);
    margin-bottom: 30px;
}

.mv_content p {
    font-size: var(--size14);
    line-height: 2;
}

.mv_bg {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 1;
}

.mv_bg img {
    height: 100%;
    width: auto;
    display: block;
}


/*-----------------------------------------------------
service
-------------------------------------------------------*/
.service{
	padding: 120px 0 220px;
}

.service-title{
	text-align: center;
	margin: 0 0 60px;
}

.service-title h2{
    font-size: var(--s36);
}


.service-row{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
	-webkit-box-align: end;
	-webkit-align-items: flex-end;
	-ms-flex-align: end;
	align-items: flex-end;
}

.service-cont{
    width: 60%;
    padding-right: 60px;
}

.service-img{
    position: relative;
    width: 40%;
    z-index: 0;
}

.service-img img{
    width: 100%;
    height: auto;
	border-radius: 16px;
}

.service-row+.service-row{
    margin-top: 100px;
}

.service-cont--tx {
}

.service-cont--t span{
    display: block;
    color: var(--red);
    font-size: var(--s18);
    font-weight: bold;
    margin-bottom: 14px;
	position: relative;
	padding: 0 0 0 50px;
}

.service-cont--t span::after{
	position: absolute;
	content: '';
	width: 30px;
	height: 2px;
	background: var(--red);
	top: 50%;
	left: 0;
	transform: translateY(-50%); 
}

.service-cont--t h2{
    display: block;
    font-size: var(--s26);
    font-weight: bold;
	margin-bottom: 26px;
}

.service-cont--cat{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px 14px;
    margin-bottom: 46px;
}

/*反転　ここから*/
.service-row:nth-child(2n){
    -webkit-flex-direction: row-reverse;
    -moz-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    -o-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.service-row:nth-child(2n) .service-cont{
    width: 60%;
    padding-right: 0px;
    padding-left: 60px;
}

.service-row:nth-child(2n) .service-cont--tx {
    padding-right: 0px;
}

.service-row:nth-child(2n) .service-cont--t h2{
    padding-right: 0px;
}

.service-row:nth-child(2n) .service-cont--t span{
}

.service-row:nth-child(2n) .service-cont--cat{
}

.service-row:nth-child(2n) .g-icon{
    position: absolute;
    right: auto;
    left: 0px;
    top: -20px;
    border-radius: 40px 40px 0px 40px;
    text-align: center;    
}


.service-row:nth-child(2n) .g-btn{
    margin-left: 60px;
}
/*反転　ここまで*/

.service-cont--bn ul{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
	padding: 16px 0 0 0;
	gap: 0 16px;
}

.service-cont--bn ul li{
	width: 120px;
}

.service-cont--bn ul li img{
	border: 1px solid #ccc;
	border-radius: 6px;	
}


/*-----------------------------------------------------
cta
-------------------------------------------------------*/
#cta{
	position: relative;
}

#cta::after{
    content: "";
    display: block;
    width: 100%;
    height: 50%;
	top: 50%;
    position: absolute;
    background: var(--gra3);
    z-index: -10;
}

.cta-row{
    padding: 70px 60px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
	border-radius: 16px;
	background: var(--red);
	text-align: left;
	line-height: 1.0;
}

.cta-t{
	width: 35%;
	color: var(--whi);
}

.cta-t span.s1{
	font-size: var(--s32);
	display: block;
	margin-bottom: 6px;
}

.cta-t span.s2{
	display: block;
	font-weight: bold;

}

.cta-tel{
	width: 40%;
	color: var(--whi);
}

.cta-tel a{
	display: inline-block;
	margin-bottom: 10px;
}

.cta-tel a img{
	width: 300px;
}

.cta-tel span{
	display: block;
	font-size: var(--s13);
}

.cta-mail{
	width: 25%;
}

.cta-mail a{
	display: inline-block;
	background: var(--whi);
	padding: 16px 66px;
	font-weight: bold;
	border-radius: 30px;
}


/*-----------------------------------------------------
drawer
-------------------------------------------------------*/
.drawer{
    display: none;
    width: 100vw;
    height: 100vh;
    background: var(--whi);
    position: fixed;
    z-index: 80;
    top: 0px;
    left: 0px;
}

.drawer-nav{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.drawer-nav .wrap{
}

.drawer-nav--main{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    gap: 0px 100px;
    padding-bottom: 60px;
    border-bottom: 1px solid var(--gra2);
    margin-bottom: 60px;
}

.drawer-nav--sub ul{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    gap: 0px 60px;
}

.drawer-nav ul{
    font-size: var(--s14);
}

.drawer-nav ul li.drawer-nav--t{
    color: var(--nav);
    font-size: var(--s18);
    font-weight: bold;
    margin-bottom: 28px;
}

.drawer-nav ul li.drawer-nav--t a{
    color: var(--nav);
}

.drawer-nav ul li.drawer-nav--link a{
    color: var(--gra1);
    margin-bottom: 16px;
    position: relative;
    padding-left: 24px;
}

.drawer-nav ul li.drawer-nav--link:last-child a{
    margin-bottom: 0px;
}

.drawer-nav ul li.drawer-nav--link a::before{
    content: "─";
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
}

.drawer-nav ul li.drawer-nav--link a.off{
    padding-left: 0px;
}

.drawer-nav ul li.drawer-nav--link a.off::before{
    content: none;
}

.drawer-nav--wrap ul:last-child{
    margin-top: 36px;
}



/*-----------------------------------------------------
footer
-------------------------------------------------------*/

#footer{
	position: relative;
}



#footer .wrap{
	padding: 120px 0 60px;
	margin-bottom: 60px;
	background: var(--gra3);
}


.footer-nav ul{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;	
}

.footer-nav ul li a{
    padding-left: 16px;
    font-size: var(--s16);
}


.footer-cp{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
    margin-bottom: 60px;
}

.footer-cp--logo{
    width: 260px;
    height: auto;
}

.footer-cp--logo a{
    width: 100%;
    height: auto;
}

.footer-cp--logo img{
    width: 100%;
    height: auto;
}

.footer-cp--tx{
    width: 100%;
    text-align: center;
    font-size: var(--s10en);
    padding-top: 50px;
    margin-top: 50px;
    border-top: 1px solid var(--gra2);
}