@charset "UTF-8";
/*!
	Onelight customize css
 */
 
 
:root {
  --bs-font-sans-serif: system-ui, -apple-system, "Noto Sans JP", "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
	color: #42332d;
	letter-spacing: 0.08em;
	line-height: 1.7em;
  background-image: url(../img/kv_pc.png);
  background-size: auto;
  background-position: top center;
  background-repeat: no-repeat;
}
main {
  background-image: url(../img/sv_bg_logo_mark.png);
  background-repeat: no-repeat;
  background-position: left -80px top 230px;
  background-size: auto;
}
header {
}
.navbar {
	padding: 30px 0;
}
.navbar-brand, .nav-link {
	color: #42332d;
	font-weight: 500;
}
.navbar-toggler, .navbar-toggler:focus {
  border: none;
}
.service h2, .recruit h2 {
	position:relative;
	z-index:0;
  padding:30px;
}
.service02 {
  background-image: url(../img/sv_illust01.png);
  background-repeat: no-repeat;
  background-position: left 30px top;
  background-size: auto;
}
.access h2, .contact h2 {
	position:relative;
	z-index:0;
	padding-top: 130px;
}
.service h2:after, .recruit h2:after {
	position:absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index:-1;
	color: #fceacf;
	letter-spacing: 0.08em;
	font-size: 120px;
  font-family: "Yanone Kaffeesatz", sans-serif;
  font-weight: 600;
}
.service h2:after {
	content: "SERVICE";
}
.recruit h2:after {
	content: "RECRUIT";
}
.access h2:before, .contact h2:before {
	position:absolute;
  top: 0;
  z-index:-1;
	letter-spacing: 0.08em;
	font-size: 120px;
  font-family: "Yanone Kaffeesatz", sans-serif;
  font-weight: 600;
}
.access h2:before {
  left: 0;
	content: "ACCESS";
	color: #fceacf;
}
.contact h2 {
	text-align: right;
}
.contact h2:before {
	right: 0;
	content: "CONTACT";
	color: #F3CA6B;
	text-align: right;
}
.pagetop {
    transition: none !important;
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #f3af3d;
    border: solid 2px #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.pagetop_arrow {
    height: 10px;
    width: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(20%) rotate(-45deg);
}


.text-bg-wt {
  background-color: white;
}
.ff-ol-logo {
  font-family: "Yanone Kaffeesatz", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.fsize-120 {
	font-size: 120px;
}
.fw-500 {
	font-weight: 500;
}
.fw-600 {
	font-weight: 600;
}
.fw-700 {
	font-weight: 700;
}
.fw-800 {
	font-weight: 800;
}
.my-6 {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}
.my-7 {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important;
}
.my-8 {
  margin-top: 6rem !important;
  margin-bottom: 6rem !important;
}
.mt-6 {
  margin-top: 4rem !important;
}
.mt-7 {
  margin-top: 5rem !important;
}
.mt-8 {
  margin-top: 6rem !important;
}
.mb-6 {
  margin-bottom: 4rem !important;
}
.mb-7 {
  margin-bottom: 5rem !important;
}
.mb-8 {
  margin-bottom: 6rem !important;
}
.py-6 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
.py-7 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.py-8 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.relative {
	position: relative;
}
.abslute-bottom {
	position: absolute;
	bottom: 0;
}
.line-top {
	border-top: solid 2px #B6AFAC;
}

.ol-yellow {
	color: #eeb018;
}
.bg-color-yellow {
	background-color: #f1c046;
}
.bg-color-gray {
	background-color: #f9f9f8;
}


.nav-contact-btn {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	background-color: #eeb018;
	padding: 20px 48px;
	border-radius: 30px;
  vertical-align: text-top;
}
.ol-yellow-btn {
	display: block;
  width: 300px;
  height: 78px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	background-color: #eeb018;
	padding: 25px 0;
	border-radius: 39px;
	text-align: center;
}
.shadow-flame {
	max-width: 500px;
	border-radius: 30px;
	background-color: #fff;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.12);
	padding: 32px;
}
.access {
	background-color: #fefbf3;
}
.access .container {
  position: relative;
}
.acillust {
  position: absolute;
  right: 0;
  top: -160px;
}
.access .table th {
	width:100%;
  display:block;
  border-bottom: none;
  padding-bottom: 0;
}
.access .table td {
	width:100%;
  display:block;
	border-bottom: dashed 1px #e4e1da;
  padding-top: 0;
	margin-bottom: 10px;
}
.access .map iframe {
  width: 100%;
	border: solid 8px #f8dd9b;
	border-radius: 30px;
	background-color: #fff;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.12);
}
.recruit {
  position: relative;
}
.recillust_l {
  position: absolute;
  left: 20px;
  top: 0;
}
.recillust_r {
  position: absolute;
  right: 20px;
  top: 0;
}
.recruit ul {
  width: fit-content;
  margin: auto;
}
.recruit .recruit-job {
	background-color: #f9f9f8;
	border-radius: 10px;
	padding: 48px 100px;
	justify-content: center;
}
.recruit .recruit-job .job {
	color: #eeb018;
	font-weight: 500;
	text-align: center;
	border: solid 2px #eeb018;
	border-radius: 10px;
	padding: 12px;
	background-color: #fff;
}
.recruit .arrow {
  margin: auto;
  display: block;
}

.contact .wrap {
	color: #fff;
	background-color: #f4bd44;
	border-radius: 20px;
  background-image: url(../img/con_logo_mark.png);
  background-repeat: no-repeat;
  background-position: left -0 top 0;
  background-size: auto;
}
.contact .container .row {
  margin-top: -40px;
}
.contact .h5 {
  line-height: 1.7em;
}
.contact a {
	display: block;
	width: 100%;
	height: 126px;
	color: #fff;
	font-weight: 700;
  line-height: 0.7em;
	text-decoration: none;
	background-color: #f2af3d;
	border: solid 4px #fff;
	border-radius: 65px;
}
.contact a i {
	font-size: 1.6rem;
	margin-right: 10px;
}
.contact .tel {
	font-size: 2rem;
	padding: 34px 40px 24px;
}
.contact .mail {
	font-size: 1.4rem;
	padding: 45px 40px;
}
.contact .ig {
	height: 268px;
	font-size: 1.4rem;
	padding: 32px 40px;
}
.contact a .annotation {
	font-size: 0.8rem;
}
.f_logo {
  margin: auto;
  display: block;
}
.f_navi a {
  color: #42332d;
  text-decoration: none;
}
.copyright {
  font-size: 0.8rem;
  border-top: solid 1px #e4e1da;
}

/* media query */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
}
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .service .detail {
    padding-left: 0;
  }
  .service02 .overview {
    padding-right: 0;
    padding-left: 4rem;
  }
  .recillust_sp {
    display: none;
  }
}
/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  body {
  }
}
/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
  main {
    background-position: left calc(((100vw - 1400px) / 2) - 20px) top 230px;
  }
  .service02 {
    background-position: left calc((100vw - 1400px) / 2) top;
  }
}

@media (max-width: 1399.98px) {

}
@media (max-width: 1199.98px) {
  .recillust_l {
    left: -6rem;
  }
  .recillust_r {
    right: -6rem;
  }
}
@media (max-width: 991.98px) {
  body {
    background-image: url(../img/kv_pc.png);
    background-size: contain;
    background-position: top right -100px;
  }
  .container-md, .container-sm, .container {
    max-width: 540px;
  }
  .abslute-bottom {
    position: relative;
  }
  .navbar-collapse {
    
  }
  .navbar-collapse ul {
    padding: 20px 60px;
    text-align: center;
  }
  .navbar-collapse ul li {
    border-bottom: dashed 1px #eeb118;
  }
  .navbar-collapse ul li:last-child {
    border: none;
  }
  .nav-contact-btn {
    display: block;
    margin-top: 20px;
  }
  main {
    background-position: left -6vw top 20vh;
    background-size: 240px;
  }
  main .title {
    margin-top: 8vh !important;
    margin-bottom: 8vh !important;
    padding: 0;
  }
  .title .ff-ol-logo {
    font-size: 100px;
  }
  .service .container {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
  }
  .service .shadow-flame {
    margin-left: 0!important;
    margin-right: 0!important;
  }
  .service02 {
    background-position: top;
    background-size: 350px;
  }
  .service02 .container {
    padding-top: 8rem!important;
  }
  .service02 .ol-yellow {
    letter-spacing: 0.03rem;
  }
  .access {
    padding-bottom: 1rem !important;
  }
  .access h2 {
    padding-top: 120px; 
  }
  .acillust {
    width: 260px;
    height: auto;
  }
  .recruit h2 {
    margin-bottom: 2rem !important;
  }
  .recillust_l, .recillust_r {
    display: none;
  }
  .recillust_sp {
    width: 100%;
    height: auto;
    max-width: 460px;
    margin-bottom: 2rem!important;
  }
  .recruit ul {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .recruit .container {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
  }
  .recruit .recruit-job {
    padding: 1rem;
  }
  .contact {
    padding-bottom: 0!important;
  }
  .contact .wrap {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .contact h2 {
    padding-top: 100px; 
  }
  .contact h2:before {
    right: -20px;
    font-size: 100px;
  }
  .contact .container .row {
    margin-top: 0;
  }
  .contact .tel {
    font-size: 1.4rem;
    padding: 24px 20px 24px;
  }
  .contact .mail {
    font-size: 1rem;
    padding: 40px 0;
  }
  .contact .ig {
    font-size: 1rem;
    padding: 32px 0;
  }
  .contact a {
    height: auto;
  }
  .contact a i {
    margin-right: 5px;
  }
  .f_ig {
    margin-top: 20px;
  }
}
@media (max-width: 767.98px) {
  body {
    background-image: url(../img/kv_sp.png);
    background-size: 100vw;
    background-position: top right;
  }
  main {
    background-position: left -10vh top 10vh;
    background-size: 28vh;
  }
  .service {
    padding-top: 40vh!important;
  }
  .recillust_sp {
    width: 100%;
    height: auto;
    margin-bottom: 2rem!important;
  }
}
@media (max-width: 575.98px) {

}