@charset "utf-8";

/* =============================================

index

================================================ */ 


/* --------------------------------------------
	INDEX
---------------------------------------------- */ 

.main { background: url(../img/index/top.png)no-repeat fixed; background-size: 100% auto; background-position: auto -150px; }
.main__title { height: 100vh; text-align: center; position: relative; }

.main__title.is-show .main__title__inner { opacity: 1; }
.main__title__inner  { position: absolute; left: 0; right: 0;   max-width: 35px; width: 3%; opacity: 0; transition: opacity 1s ease .75s; padding-top: 14vw; margin: 0 auto;}
.main__title__inner img { width: 100%;}

.main__read { height: 100vh; margin-bottom:  30em; }
.main__read__inner { font-size: 20px; font-size: 2rem; letter-spacing: 10px; line-height: 2.25; padding: 20vw 0 0; text-align: center; position: relative;}
.main__reed__Y { width: 1px; margin: 8em auto 30em; position: absolute; left: 0; right: 0; top: 34vw; }
.main__reed__Y img {height: 100%;}

.main__title__fead {display: none; position: relative; height: 100vh;}
.feadInner {  position: absolute; left: 0; right: 0;  max-width: 35px; width: 3%; padding-top: 14vw; margin: 0 auto;}
.feadInner img {width: 100%; }

@media (max-width: 1024px) {
	.main__read__inner { font-size: 1.6rem; padding: 24vw 0 0; }
}
@media (max-width: 768px) { 
	.main { background-size: 140% auto; background-position: center 12em; }
	.main__title__fead {display: block;}
	.feadInner { display: none; min-width: 25px; width: 4%; padding-top: 18em;}
	.main__read { height: 50em; margin-top: 0em; margin-bottom:  5em; }
	.main__read__inner { font-size: 20px; font-size: 2rem; padding: 5em 0 0;}	
	.main__reed__Y { top: 18em; height: 60%; }
}
@media (max-width: 599px) { 
	.feadInner {  padding-top: 12em;}
	.main__read { height: 47em; }
	.main__read__inner { padding: 0;}	
	.main__reed__Y { top: 12em;  }
}
@media (max-width: 499px) {
	.feadInner {  padding-top: 10em;}
	.main { background-size: 150% auto; background-position: center 12em; }
	.main__read__inner{ font-size: 18px; font-size: 1.8rem; padding: 3em 0 0; }
	.main__reed__Y { top: 15em;  }
}
@media (max-width: 399px) {
	.main__read__inner{ padding: 10em 0 0; }
	.main__reed__Y { top: 20em;  }
}



/* --------------------------------------------
	MESSAGE
---------------------------------------------- */ 

.message { max-width: 960px; width: 85%; margin: 20em auto 10em; padding: 10vh 0 0; display: block; content: ""; background: url(../img/index/m_back.png)no-repeat; background-position: 0 12em; background-size: 60% auto;  position: relative; }
.message__inner { position: relative; max-width: 680px; width: 100%; float: right; padding: 10em 0 8em 18%; }
.message__inner p { margin-bottom: 1.5em; font-size: 15px; font-size: 1.5rem; line-height: 2.25; font-weight: 100;}
.message__inner p br { display: block;}
.message__inner a { margin: 3em 0  ;}
.message__inner .name { margin-top: 3em; text-align: right; padding-right: 8%; }
.message__inner .h2Title { position: absolute; top: -1.5em; left: 0;}

@media (max-width: 768px) {
	.message { margin: 10em auto 3em;}
	.message__inner { max-width: 540px; padding: 10em 0 8em 18%; }
}
@media (max-width: 599px) { 
	.message { margin: 0em auto 0;}
} 
@media (max-width: 550px) { 
	.message { max-width: 960px; width: 85%; background-position: 0 10em; background-size: 80% auto;}
	.message__inner { padding: 5em 0 8em 18%; }
	.message__inner p br { display: none;}
	.message__inner .name { margin-bottom: 5em; }
}

  

/* --------------------------------------------
	WORKS
---------------------------------------------- */ 

.works { display: block; content: ""; background: url(../img/index/worksback.png)no-repeat; background-size: 100% 45em; background-position: 0 12em; width: 100%; padding: 10vh 0; margin: 0 auto 30em; position: relative; } 
.works h2 { margin: 0 auto 3em;}
.works .btn { margin: 5vw auto 0 ; }

.swiper-container { margin: 5em 0 0; overflow: hidden; }
.swiper-slide { height: auto !important; vertical-align: middle; text-align: center;}
.swiper-slide a { display: block; overflow: hidden; max-height: 260px; height: 14vw; vertical-align: middle; text-align: center; background: #384045;}
.swiper-slide img { width: 100%; height: auto; transition: .3s; }
.swiper-slide img:hover { opacity: .8; transition: .3s; }
.swiper-slide p { font-size: 12px; font-size:1.2rem; color: #fff; text-align: center; margin-top: 5em;}
.swiper-slide p::before { display: block; text-align: center;}
.swiper-slide:nth-child(5n+1) p::before { content: "CASE01";}
.swiper-slide:nth-child(5n+2) p::before { content: "CASE02";}
.swiper-slide:nth-child(5n+3) p::before { content: "CASE03";}
.swiper-slide:nth-child(5n+4) p::before { content: "CASE04";}
.swiper-slide:nth-child(5n+5) p::before { content: "CASE05";}
.swiper-slide .worksName { font-size: 16px; font-size:1.6rem; display: block; padding-top: 1em; }
.swiper-slide .worksName::before { display: block; content: ""; border-top: solid 1px #fff; width: 20px; margin: 0 auto; padding-bottom: .8em;}

.sample03 .swiper-button-prev,.sample03 .swiper-button-next { display: none; }

@media (max-width: 1024px) {
	.works { background-size: auto 36em; padding: 5vh 0;} 
	.swiper-slide a { height: 18vw; }
	.works .btn { margin: 8em auto 0 ; }
}
@media (max-width: 768px) {
	.works { background-size: 100% 45em; background-position: 0 15em; margin: 0 auto 10em; padding: 10vh 0;}
	.works .btn { margin: 13em auto 0 ; }
}
@media (max-width: 599px) {
	.works { background-size: auto 48em; background-position: 0 15em; padding: 10vh 0;}
	.swiper-slide a { height: 36vw; }
	.works .btn { margin: 10em auto 0 }
}
@media (max-width: 399px) {
	.works { background-size: auto 45em; background-position: 0 15em; padding: 10vh 0;}
	.swiper-slide a { height: 20em; }
	.works .btn { margin: 6em auto 0 ; }
}



/* --------------------------------------------
	COMPANY
---------------------------------------------- */ 

.company { margin: 0 auto 12em; max-width: 870px; width: 85%; }
.company h2 { margin: 0 auto; }
.company img { margin: -8em auto 0; }

.company__inner { display: flex; justify-content: space-between; margin: 8em auto 0;}

.company__inner .sns { max-width: 360px; width: 45%; }
.company__inner .sns .fb-page  { width: 100%; height: auto;}

.company__inner .outline { max-width: 425px; width: 50%; padding-top: 2.5em;}
.company__inner .outline img { max-width: 180px; width: 100%; }
.company__inner .outline h4 { font-size: 16px; font-size: 1.6rem; margin-top: 1.5em; margin-bottom: .5em;}
.company__inner .outline .tel img { max-width: 300px; width: 100%; }
.company__inner .outline span {display: block; margin-top: 2em; font-size: 12px; font-size: 1.2rem;}
.company__inner .outline .phone { display:block; content: ""; padding-left: 25px; font-size: 16px; font-size: 2rem; position: relative; }
.company__inner .outline .phone::before { display: block; content: ""; background: url(../img/share/phone.png)no-repeat; width: 20px; padding: .6em; background-size: contain; position: absolute; left: 0; top:.3em;}

.company__inner table { display: block; margin-top: 2em;}
.company__inner tr { padding: 1em 0; border-bottom: solid .8px;}
.company__inner tr:last-child { border-bottom: none;}
.company__inner th { width: 80px; vertical-align: middle; font-weight: 100;}
.company__inner td { padding: 1em; }
.company__inner .min span { font-size: 12px; font-size: 1.2rem; padding: 0; line-height: 1.5; margin-top: 1em;}
.company__inner .min { line-height: 0; }
.company__inner td .brrp { display: none; }

@media (max-width: 768px) {
	.company img { margin: -5em auto 0; }
	.company__inner { display: flex; flex-direction: column; justify-content: none; width: 100%; }
	.company__inner .sns { max-width: 400px; width: 100%; order: 2; display: block; margin: 0 auto;}
	.company__inner .sns .fb-page  { width: 100%; height: 10em;}
	.company__inner .outline { order: 1; display: block; max-width: 320px; width: 100%; margin: 0 auto 5em; }
	.company__inner .outline h4 { margin-bottom: 1.2em;}
}
@media (max-width: 499px) {
	.company__inner { margin: 5em auto 0;}
}
@media (max-width: 399px) {
	.company__inner .sns { max-width: 300px; }
	.company__inner .outline { max-width: 300px; }
}