@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700&display=swap');

html,body{
  font-family: "Roboto Serif", "Noto Serif JP", serif;
    /* font-family: 'Montserrat',"M PLUS 1p", "Hiragino Sans" , "ヒラギノ角ゴ ProN", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "游ゴシック Medium", YuGothic, YuGothicM, sans-serif; */
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #021835;
  background: #fff;
	line-height: 1.8;
	letter-spacing: 0.03em;
}
header,footer,div,section,article,nav,a,p,span,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,img,dl,dt,dd,form,input,textarea{ box-sizing: border-box; }
::selection { background: #f5f5f580; }
::-moz-selection { background: #f5f5f580; }
a,a img{
  color: #161614;
  transition: 0.3s;
  text-decoration: none;
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer */
  -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}
a:hover,a:hover img{ opacity: 0.7;cursor: pointer; }
img{
	max-width: 100%;
	display: block;
}
.clear{ clear: both; }
.overflow{ overflow: hidden; }

.gray{ color: #767676; }


body.column {
	background: #eaf1f4;
}

nav{
  width: 100%;
  height: 8rem;
  background: #ffffff;
  transition: 0.7s;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
h1.logo,
#nav-content .nav-head{
  display: block;
  width: 20rem;
  margin-left: 3rem;
  display: flex;
  align-items: center;
}
h1.logo a{
  display: block;
}
nav ul.nav{
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  margin-right: 1rem;
}
nav ul.nav li{
  margin-right: 3rem;
  font-size:1.4rem;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 2.5rem;
  text-align: right;
  color: #000;
}
nav ul.nav li img{
  height: 2.5rem;
}


/* nav付加クラス　*/
nav.transform{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  animation: nav-anime 0.3s;
}
nav.transform + .blank{ height: 8rem; }

@keyframes nav-anime {
  from {
    transform: translateY(-8rem);
    opacity: 1;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


.home-header{
  background: url(../images/home/fv-pc.jpg) center center no-repeat;
  background-size: cover;
  color: #fff;
}
.home-header .content{
  position: relative;
  height: 60rem;
}
.home-header .box-1{
  display: inline-block;
  position: absolute;
  left: 5rem;
  top: 15.6rem;
}
.home-header .txt-1{
  font-weight:700;
  font-size: 2.8rem;
  margin-bottom: 0em;
}
.home-header .txt-2{
  font-weight:700;
  font-size: 2.8rem;
  margin-bottom: 0;
}
.home-header img{
  width:54rem;
}

.common-header{
  background: url(../images/common/common-header-pc.jpg) center center no-repeat;
  background-size: cover;
  color: #fff;
  height: 50rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.common-header h2{
  font-size: 6rem;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.02em;
  color: #1e316b;
}
.common-header h2 span{
  display: block;
  font-size: 2.8rem;
  letter-spacing: 0.02em;
  text-align: center;
  color: #1e316b;
}

.heading-1{
  font-size: 6rem;
  font-weight: 400;
  color: #111;
  text-align: center;
}
.heading-1-btm{
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  color: #111;
  margin: 0.5rem 0 4rem;
}


a.view-btn{
  display: block;
  color: #B79668;
  width: 22rem;
  line-height: 5.2rem;
  border-bottom: 1px solid;
  font-weight: 700;
  padding-left: 2.4rem;
  position: relative;
}
a.view-btn svg{
  display: block;
  width: 1rem;
  height: 100%;
  position: absolute;
  right: 2.5rem;
  top: 0;
  transition: 0.3s;
}
a.view-btn:hover svg{
  right: 1.8rem;
}


.common-sec{
  padding: 10rem 0 12rem;
}

.contact-sec{
  padding: 10rem 0 9rem;
  background: url(../images/common/contact-bg-pc.jpg) center center no-repeat;
  background-size: cover;
}
.contact-sec .content{
  max-width: 110rem;
}
.contact-sec .left-box{
	padding-top: 1.8rem;
	display: inline-block;
	width: 40%;
	margin-right: 9%;
	vertical-align: top;
}

.contact-sec .right-box{
	display: inline-block;
	width: 50%;
	vertical-align: top;
}
.contact-sec .right-box a{
	width: 100%;
	margin-bottom: 2rem;
	display: block;
}
.contact-sec-2{
  padding: 10rem 0 9rem;
  background: url(../images/common/contact-bg-pc.jpg) center center no-repeat;
  background-size: cover;
}
.contact-sec-2 .left-box{
	padding-top: 1.8rem;
	display: inline-block;
	width: 40%;
	margin-right: 9%;
	vertical-align: top;
}

.contact-sec-2 .right-box{
	display: inline-block;
	width: 50%;
	vertical-align: top;
}
.contact-sec-2 .right-box .message{
	width: 80%;
	margin-bottom: 3.2rem;
}
.contact-sec-2 .right-box .submessage{
	width: 63%;
	margin-bottom: 2rem;
}
.contact-sec-2 .right-box a{
	width: 100%;
	margin-bottom: 2rem;
	display: block;
}


footer{
  background: url(../images/common/footer-bg-pc.jpg) center center no-repeat;
  background-size: cover;
  text-align: center;
  color: white;
  padding: 8rem 0 8rem;
}

footer .left-box{
	display: inline-block;
	width: 37%;
	margin-right: 12%;
	vertical-align: top;
}
footer .left-box img.title{
	width: 66%;
}
footer .left-box .tel{
	margin-top: 2rem;
	width: 66%;
}
footer .left-box .address{
	margin-top: 2rem;
	font-weight: normal;
	font-size: 1.4rem;
	line-height: 2.8rem;
	letter-spacing: 0.0rem;
	text-align: left;
}
footer .left-box .btn-box{
	margin-top: 2rem;
	display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
footer .left-box .btn-box a{
	width: calc(50% - 1rem);
}

footer .right-box{
	display: inline-block;
	width: 50%;
	vertical-align: top;
}

footer .right-box iframe {
	max-width: 100%;
    aspect-ratio: 600 / 341;
    max-height: 29vw;
}




/* ヘッダー動き */
.fade-1,.fade-2,.fade-3,.fade-4{
  opacity: 0;
  transition: 1s;
}
.fade-1{
  transform: translateX(-3rem);
  transition-delay: 0.5s;
}
.fade-2{
  transform: translateX(-3rem);
  transition-delay: 1s;
}

.fade-1.load,.fade-2.load,.fade-3.load,.fade-4.load{
  opacity: 1;
  transform: translate(0);
}


/* スクロールしてふわっと表示 */
.fadeinbottom,
.fadeinbottom-count *,
.fadeinright-count * {
  opacity: 0;
  transition: 1s;
}
.fadeinbottom,
.fadeinbottom-count * { transform: translateY(3rem); }
.fadeinright-count * { transform: translateX(3rem); }

.fadeinbottom.scrollin,
.fadeinbottom-count.scrollin *,
.fadeinright-count.scrollin * {
  opacity: 1;
  transform: translate(0);
}
.fadeinbottom-count.scrollin :nth-child(2) { transition-delay: 0.2s; }

.fadeinright-count.scrollin :nth-child(2) { transition-delay: 0.2s; }
.fadeinright-count.scrollin :nth-child(3) { transition-delay: 0.4s; }
.fadeinright-count.scrollin :nth-child(4) { transition-delay: 0.6s; }
.fadeinright-count.scrollin :nth-child(5) { transition-delay: 0.8s; }
.fadeinright-count.scrollin :nth-child(6) { transition-delay: 1s; }
.fadeinright-count.scrollin :nth-child(7) { transition-delay: 1.2s; }
.fadeinright-count.scrollin :nth-child(8) { transition-delay: 1.4s; }
.fadeinright-count.scrollin :nth-child(9) { transition-delay: 1.6s; }
.fadeinright-count.scrollin :nth-child(10) { transition-delay: 1.8s; }

@media (min-width: 769px){
.count2-pc.scrollin { transition-delay: 0.2s; }
}


/* ロード画面 */
#loading{ display: none; }
.home #loading {
  width: 100%;
  height: 100%;
  transition: all 1s;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;

  display: flex;
  justify-content: center;
  align-items: center;
}
#loading img{
  width: 25.6rem;
}
.loaded {
  opacity: 0;
  visibility: hidden;
}


/* 下層ロード画面 */
body.page{
  opacity: 0;
  transition: 1s;
}
body.page.is-slide{
  opacity: 1;
}


/* ページトップ */
#pagetop {
  display: none;
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  z-index: 997;
}
#pagetop a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  background: #999;
}
#pagetop a img {
  width: 1.2rem;
}




/*　PC
------------------------------------------------------------------------------------------------*/
@media (min-width: 769px){
.sp{ display: none !important; }

html{ font-size: 10px; }
body{ font-size: 1.6em; }

.content{
  width: 100%;
	max-width: 1300px;
  padding: 0 50px;
	margin: 0 auto;
}




/*　タブレット
------------------------------------------------------------------------------------------------*/
@media (max-width: 1100px){

html{ font-size: 0.9vw; }

.content{
  padding: 0 4.54%;
}




}/*　タブレットここまで */
}/*　PCここまで */




/*　スマホ
------------------------------------------------------------------------------------------------*/
@media (max-width: 768px){
.pc{ display: none !important; }

html{ font-size: 2.6vw; }
body{ font-size: 1.4em; }
.content{
  width: 100%;
  padding: 0 6%;
}
.content.sp-max{ padding: 0; }

.home-header{
  background: none;
  /* background: url(../images/home/fv-sp.jpg) center center no-repeat;
  background-size: cover; */
}
.home-header .content{
  
}
.home-header .box-1{
  left: 0%;
  top: 35%;
}
.home-header .txt-1{
  font-size: 1.6rem;
  margin-bottom: 0em;
  text-align: center;
}
.home-header .txt-2{
  font-size: 1.6rem;
  text-align: center;
}
.home-header img{
  width:82%;
  margin:0 auto;
}

.common-header{
  background: url(../images/common/common-header-sp.jpg) center center no-repeat;
  background-size: cover;
  height: 18rem;
}
.common-header h2{
  font-size: 3.2rem;
  font-weight: bold;
}
.common-header h2 span{
  font-size: 1.3rem;
}
.common-header h2 span a{
  color: #145283;
}

.heading-1{
  font-size: 3.4rem;
}
.heading-1-btm{
  font-size: 1.2rem;
  margin: 0 0 3rem;
}


a.view-btn{
  width: 16rem;
  line-height: 4.6rem;
  margin: 0 auto;
}


.common-sec{
  padding: 4rem 0 8rem;
}

.contact-sec{
  padding: 5rem 0 4.4rem;
  background: url(../images/common/contact-bg-sp.jpg) center center no-repeat;
  background-size: cover;
}
.contact-sec .content{
  max-width: 110rem;
}
.contact-sec .left-box{
	padding-top: 0rem;
	display: block;
	width: 100%;
	margin-right: 0%;
	margin-bottom: 4rem;
}

.contact-sec .right-box{
	display: block;
	width: 100%;
}
.contact-sec .right-box a{
	width: 100%;
	margin-bottom: 2rem;
	display: block;
}
.contact-sec-2{
  padding: 6rem 0 5rem;
  background: url(../images/common/contact-bg-sp.jpg) center center no-repeat;
  background-size: cover;
}
.contact-sec-2 .left-box{
	padding-top: 0rem;
	display: block;
	width: 100%;
	margin-right: 0%;
	margin-bottom: 3rem;
}
.contact-sec-2 .left-box img{
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3rem;
	display: block;
}
.contact-sec-2 .left-box img.message{
	width: 70%;
}

.contact-sec-2 .right-box{
	display: block;
	width: 100%;
}
.contact-sec-2 .right-box .submessage{
	width: 100%;
	margin-bottom: 3rem;
}
.contact-sec-2 .right-box a{
	width: 100%;
	margin-bottom: 2rem;
	display: block;
}




footer{
  background: url(../images/common/footer-bg-sp.jpg) center center no-repeat;
  background-size: cover;
  padding: 5rem 0 5rem;
}

footer .left-box{
	display: block;
	width: 100%;
	margin-right: 0;
}
footer .left-box img.title{
	width: 75%;
}
footer .left-box .tel{
	margin-top: 3rem;
	width: 90%;
}
footer .left-box .address{
	margin-top: 3rem;
	font-weight: normal;
	font-size: 1.4rem;
	line-height: 2.2rem;
	letter-spacing: 0.0rem;
	text-align: left;
}
footer .left-box .btn-box{
	margin-top: 3rem;
	display: block;
}
footer .left-box .btn-box a{
	width: 100%;
	margin-bottom: 1.5rem;
	display: block;
}

footer .right-box{
	margin-top: 4rem;
	display: block;
	width: 100%;
}

footer .right-box iframe {
	max-width: 100%;
    aspect-ratio: 333 / 341;
    max-height: 103vw;
}

#loading img{
  width: 21.7rem;
}


/* ページトップ */
#pagetop {
  bottom: 9rem;
  right: 3vw;
}




}/*　スマホここまで */