@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;800&display=swap');

/*-------------------------------------------------------------------
　reset
-------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{
	border:0;
	font-family:inherit;
	font-size:100%;
	font-style:inherit;
	font-weight:inherit;
	margin:0;
	outline:0;
	padding:0;
	vertical-align:baseline;
}

div{box-sizing: border-box;}

ol, ul {list-style:none;}

table {
	border-collapse:separate;
	border-spacing:0;
}

caption, th, td {
	font-weight:normal;
	text-align:left;
}

img{
	padding:0;
	margin:0;
	vertical-align:bottom;
	backface-visibility:hidden;
}

a img {border:0;}

a{
	margin:0;
	padding:0;
	text-decoration:none;
	outline:0;
	vertical-align:baseline;
	background:transparent;
	font-size:100%;
	color:#0774B1;
}

a:hover{
	text-decoration: underline;
}

/*-------------------------------------------------------------------
　基本設定
-------------------------------------------------------------------*/
body{
	font-family: 'Kosugi Maru', "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	font-size:20px;
	line-height:1.6;
	color:#8C4600;
	background: #FFFBEC;
	-webkit-text-size-adjust:none;
}

/* ===== sp 767px ========= */
@media only screen and (max-width:767px){
body{
	font-size:17px;
	line-height:1.8;
}
}

/*-------------------------------------------------------------------
　common
-------------------------------------------------------------------*/
.br_pc{display:block;}/*--PCのみ改行--*/
.br_pct{display: block;}/*--PC&Tabletのみ改行--*/
.br_sp{display:none;}

.br480_hide{display:block;}/*--481px以上改行--*/
.br1200{display: block;}
.br1024{display: none;}
.br1024_enter{display: none;}/*--1025px以上改行なし--*/
.br480sp{display: none;}

/* ---- tablet ------------- */
@media only screen and (max-width:1200px){
.br1200{display: none;}
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
.br_pc{display:none;}
.br1024{display:block;}
.br1024_enter{display: block;}/*--1024px以下改行--*/
}

/* ---- sp 767-------------- */
@media only screen and (max-width:767px){
.br_pct{display: none;}/*--PC&Tabletのみ改行--*/
.br_sp{display:block;}
}

/* ---- sp 480-------------- */
@media only screen and (max-width:480px){
.br480_hide{display:none;}/*--480px以下改行なし--*/
.br480sp{display: block;}
.br1024{display: none;}
}

/*-------------------------------------------------------------------
　header & navi
-------------------------------------------------------------------*/
.naviArea{
	width: 100%;
	height: 100px;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 0px solid #DDD;
}

.naviArea a:hover{text-decoration: none;}

.naviArea h1{
	display: none;
}

#hd_logo{
	width: 340px;
	background: #CCC;
	margin-left: 30px;
}

#hd_logo img{
	width: 100%;
	height: auto;
}

.hdBtn a{
	width: 180px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFF;
}

.hd_recurit{background-color: #185FA3;}
.hd_recurit a:hover{background-color: #185FA3; color: #FFFF53;}
.hd_cont{background-color: #BDAB69;}
.hd_cont a:hover{background-color: #A59148; color: #FFF;}

.hd_cont span{
	display: block;
}

#g_navi{
	font-family: 'Kosugi Maru', sans-serif;
	display: flex;
	font-size: 18px;
	font-weight:bold;
	margin-right: 100px;
}

#g_navi ul{
	display: flex;
	align-items: center;
	list-style-type: none;
	margin-right: 30px;
}

#g_navi ul li{
	padding: 0 40px 0;
	display: flex;
	flex-direction: column;
	text-align: center;
}

#g_navi ul li a{
	display: block;
	color: #7F4C2C;
}

#g_navi ul li a img{
	width: 36px;
}

#g_navi ul li a span{
	display: block;
	font-size: 12px;
	text-align: center;
	margin-top: -5px;
	font-weight: normal;
}

#g_navi ul li a:hover{ color: #F8B600;}

#g_navi ul li:last-child{
	border-right: 0px solid #000;
}

/* ---- pc 1300px ---------- */
@media only screen and (max-width:1300px){
.naviBg::before{
	width: 62%;
}

#g_navi ul{margin-right: 15px;}
#g_navi ul li{padding: 0 15px 0;}

.hdBtn a{
	width: 160px;
	height: 100px;
}
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
.naviArea{
	width: 100%;
	height: 80px;
}

.naviBg::before{
	width: 68%;
}

#hd_logo{
	width: 220px;
	background: #CCC;
	margin-left: 2%;
}

#g_navi{
	font-size: 16px;
	margin-right: 60px;
}

.hdBtn a{
	width: 130px;
	height: 60px;
}
}

/* ---- sp 800px ------------- */
@media only screen and (max-width:800px){
.naviBg::before{
	width: 0%;
}

#g_navi{display: none;}
#hd_logo{margin-left: 20px;}
}

/*-------------------------------------------------------------------
　hamburger menu
-------------------------------------------------------------------*/
#nav-toggle {
	position: fixed;
	top: 16px;
	right: 30px;
	width: 65px;
	height: 65px;
	cursor: pointer;
	background: #F8B600;
	border-radius: 50%;
	z-index: 1000;
}

#nav-toggle > div {
	position: relative;
	width: 30px;
}

#nav-toggle span {
	width: 100%;
	height: 4px;
	left: 17px;
	display: block;
	background: #FFF;
	position: absolute;
	transition: transform 0.6s ease-in-out, top 0.5s ease;
}

#nav-toggle span:nth-child(1) {top: 20px;}
#nav-toggle span:nth-child(2) {top: 30px;}
#nav-toggle span:nth-child(3) {top: 40px;}

#nav-toggle:hover span:nth-child(1) {top: 20px;}
#nav-toggle:hover span:nth-child(3) {top: 40px;}

.open #nav-toggle span {background: #fff;}

.open #nav-toggle span:nth-child(1) {
	top: 30px;
	transform: rotate(45deg);
}

.open #nav-toggle span:nth-child(2) {
	top: 30px;
	width: 0;
	left: 50%;
}

.open #nav-toggle span:nth-child(3) {
	top: 30px;
	transform: rotate(-45deg);
}

/*-- sp menu -------*/
#gloval-nav {
	font-family: 'Kosugi Maru', sans-serif;
	font-size: 25px;
	font-weight: bold;
	background: #FFFBEC;
	color: #7F4C2C;
	position: fixed;
	top: 0;
	left: 0;
	right: 0px;
	bottom: 0;
	z-index: 990;
	text-align: center;
	display: flex;
	visibility: hidden;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}

#gloval-nav span{
	font-family: 'Poppins', sans-serif;
	display: block;
	font-size: 14px;
	margin-top: -8px;
}

#gloval-nav a {
	display: block;
	color: #7F4C2C;
	text-decoration: none;
	padding: 5px 0;
	transition: color 0.6s ease;
}

#gloval-nav a:hover {
	color: #F8B600;
}

#gloval-nav ul {
	list-style: none;
}

/*----- open -----*/
.open {
	overflow: hidden;
}

.open #gloval-nav {
	visibility: visible;
	opacity: 1;
}

.open #gloval-nav li {
	opacity: 1;
	transform: translateX(0);
	transition: transform 1s ease, opacity 0.9s ease;
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
#nav-toggle {
	width: 50px;
	height: 50px;
	right: 2%;
}

#nav-toggle > div {
	position: relative;
	width: 28px;
}

#nav-toggle span {left: 11px;}
#nav-toggle span:nth-child(1) {top: 14px;}
#nav-toggle span:nth-child(2) {top: 24px;}
#nav-toggle span:nth-child(3) {top: 34px;}

#nav-toggle:hover span:nth-child(1) {top: 14px;}
#nav-toggle:hover span:nth-child(3) {top: 34px;}

.open #nav-toggle span {background: #fff;}
.open #nav-toggle span:nth-child(1) {top: 24px;}
.open #nav-toggle span:nth-child(2) {top: 24px;}
.open #nav-toggle span:nth-child(3) {top: 24px;}
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
#nav-toggle {
	right: 20px;
}
}

/* ---- sp 767-------------- */
@media only screen and (max-width:767px){
#gloval-nav {
	font-size: 18px;
}

#gloval-nav span{
	font-size: 12px;
	margin-top: -8px;
}
}


/*-------------------------------------------------------------------
　footer
-------------------------------------------------------------------*/
#footer_wrap{
	width: 100%;
	margin: 80px 0;
	background: url(../images/footer_bg.jpg) no-repeat top center;
	background-size: 100%;
	box-sizing: border-box;
}

#footer_Inner{
	width: 1200px;
	margin: 0 auto;
	padding: 70px 0px;
	box-sizing: border-box;
}

#footer_Inner h3{
	font-size: 30px;
	color: #EF7F36;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
}

.footerTx{
	text-align: center;
}

.ft_cont{
	width: 100%;
	height: auto;
	margin: 50px auto 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ft_contBox{
	width: 47%;
	position: relative;
}

.ft_contBox img{
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.ft_contDet{
	width: 47%;
	display: flex;
	align-items: center;
}

.ft_cont_Logo{
	width: 100px;
	margin-right: 40px;
}

.ft_cont_Logo img{
	width: 100%;
	height: auto;
}

.ft_telBox{
	margin: 0;
}

.caption{
	width: 80%;
	position: absolute;
	top:80%;
	left:10%;
	background: rgba(255, 251, 236, 1);
	padding: 15px 5px 15px;
	box-sizing:border-box;
	text-align:center;
	border-radius: 10px;
	z-index: 950;
}

h4.contTit{
	font-size:28px;
	font-weight: bold;
}

.tel{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 40px;
	color: #EE731A;
	font-weight: bold;
}

.tel a{
	color: #EE731A;
	text-decoration: none;
}

.add{
	margin: 5px 0 0 0;
}

#copyright{
	width: 100%;
	font-size: 12px;
	margin: 20px auto 0;
	padding: 20px 0;
	text-align: center;
	background: #FFE9BC;
}

/* ---- pc 1200px ---------- */
@media only screen and (max-width:1200px){
#footer_Inner{
	width: 90%;
	margin: 0 auto;
	padding: 70px 0;
}

.ft_contDet{
	width: 47%;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ft_cont_Logo{
	width: 100px;
	margin: 0 0 10px 0;
}
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
.ft_contBox{line-height: 1.5;}

.caption{
	width: 86%;
	left:7%;
}

.ft_cont_Logo{
	width: 80px;
	margin: 0 0 10px 0;
}

h4.contTit{font-size:25px;}
.tel{font-size: 35px;}
}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
#footer_wrap{margin: 60px 0 50px;}

#footer_Inner{
	width: 85%;
	padding: 60px 0px 0px;
}

.ft_cont{
	flex-direction: column;
}

.ft_contBox{
	width: 100%;
	position: static;
	margin-bottom: 30px;
}

.ft_contBox:last-of-type{
	margin-bottom: 0px;
}

.ft_contDet{
	width: 100%;
}
	
.caption{
	width: 90%;
	position: static;
	margin: 0 auto;
	padding: 15px 5px 15px;
	text-align:center;
}
}

/* ---- sp 480 ------------- */
@media only screen and (max-width:480px){

#footer_Inner h3{
	font-size: 28px;
}

.tel{font-size: 30px;}
}


/*-------------------------------------------------------------------
　スクロールCSS
-------------------------------------------------------------------*/
.fade-in {
  opacity: 0;
  transition-duration: 1200ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}



/*-------------------------------------------------------------------
　tel link 
-------------------------------------------------------------------*/
[href^="tel"] {
    text-decoration: none;
    color: #333;
    cursor: default;
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    [href^="tel"] {
        pointer-events: auto;
    }
}