@charset "utf-8";
/* nav.css */

/* -----------------------------------------------------------
	header
------------------------------------------------------------*/
.header-wrap {
    margin: 0 auto;
}
#header-menu .header-menu a {
	color: #444;
	position: relative;
	z-index: 1;
	font-weight: 600;
	white-space: nowrap;
}
.header{
	position: relative;
	width: 100%;
	z-index: 100;
}
.lowerPage .header{
	position: relative;
	background-color: #fff;
	padding-bottom: clamp(15px,-19.6987951807px + .0451807229 * 100vw,30px);
	border-bottom: 1px solid #f5f6f6;
	margin-bottom: 50px;
}
.header-wrap{
	margin: 0 auto;
}
.header-wrap li {
	line-height: 1;
	margin:0;
}
#top-logo a {
	display: block;
}
/* reset */
header#header ul {
	width:auto;
	gap:0;
}
header#header ul li {
	margin:0;
}


@media screen and (min-width: 769px) {
	#toggle,
	#tagline-sp {
        display: none;
    }
	#header, .header-wrap{
        height: 82px;
    }
	.header-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.6em 1% 0.6em 1%;
		background-color: #fff;
		/* box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); */
	}
	#top-logo {
		width:18%;
		max-width:233px;
		margin:0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 3;
		padding-top:0.6rem;
	}
    #top-logo img {
		vertical-align: middle;
        max-width:233px;
		width:100%;
	}
	#header-menu {
		max-width: 1200px;
		margin: 0 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

    #header-contact {
        width:auto;
        max-width:420px;
		padding-left: 1rem;
		position: relative;
    }
	header#header ul.header-contact {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		align-content: center;
		line-height: 1;
		gap:0 4%;
	}
	.header-tel {
		width:50%;
		text-align: right;
	}
	.header-tel img {
		display: block;
		margin: 0 0 0 auto;
	}
	.header-tel-txt {
		font-size: 1.2rem;
		display: inline-block;
		font-feature-settings: "palt";
		margin-top:7px;
		color: #666;
		white-space: nowrap;
	}
	#header-contact .header-mail a {
        border-radius: 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
		background:url(../img/home/ar-fo.svg)no-repeat 10% center;
		background-size: 1.2em;
		background-color: #F38F2C;
        max-width:auto;
		max-width:204px;
		height:3.6em;
        color:#fff;
		padding:0 1em 0 2.8em;
		line-height: 1.2;
		font-feature-settings: "palt";
		letter-spacing: 1px;
		font-size: 1.5rem;
		font-weight: bold;
		white-space: nowrap;
    }
    .header-mail a i {
        margin-right:0.5em;
    }
	.header-mail a i img {
		margin-top:-0.1em;
		vertical-align: middle;
		width:1.1em;
	}
    #header-mail a {
        height:60px;
    }
	.header-gNav {
		display: flex;
		justify-content: center;
		height: 58px;
		align-items: center;
		align-content: center;
		line-height: 1;
	}
	.header-gNav a {
		letter-spacing: 1px;
		padding:1em 0.7em;
		font-size: 1.6rem;
	}
	#header {
        background: #fff;
        position: fixed;
        top:0;
        left:0;
        width:100%;
		display: block;
		position: fixed;
		z-index: 3;
		height: auto;
      }
}

@media screen and (min-width:769px) and (max-width:1340px) {
	.header-gNav a{
		font-size:clamp(0.85em,calc(15/1440*100vw),1.5rem);
	}
	.header-gNav a {
		padding: 1em 0.5em;
	}
	#header-contact .header-mail a {
		font-size: 1.4rem;
	}
}
@media screen and (min-width:769px) and (max-width:1200px) {
	.header-tel {
		display: none;
	}
	.header-tel {
		font-size:clamp(0.8vw,calc(13/1440*100vw),1.3rem);
	}
}

/*--- end PCメニュー */

/* sp header
------------------------------------------------------------*/
@media screen and (max-width:768px) {
	#top-logo {
		line-height:1;
		margin:0;
		font-size:0;
	}
	#top-logo {
		position: fixed;
		left: 9px;
		top: 8px;
		margin: 0;
    	width:180px;
		z-index: 2;
		display: flex;
        align-items: center;
	}
	#top-logo a {
		display: block;
	}
	#top-logo-img {
		margin: 0;
	}
	#top-logo-img a {
		display: block;
	}
	#tagline-sp {
		position: fixed;
		right: 60px;
		top: 6px;
		margin: 0;
		width: 94px;
		z-index: 2;
		display: flex;
		align-items: center;
	}
}



@media screen and (max-width:768px) {
	.header{
		top:0;
		left:0;
		position: fixed;
		background: #fff;
        height: 50px;
		box-shadow: 0 0 3px rgba(0,0,0,0.15);
	}
	.header-menu{
		transition: .2s ease-in-out;
		opacity: 0; /*今だけ*/
		pointer-events: none;
		position: fixed;
		top: 0px;
		left: 0;
		padding-left: 0;
		height: 100vh;
		width:100%;
	}
	header ul {
		border-top:noen;
	}
	header ul li {
		border:none;
		font-size: 1em;
		float:none;
		width:100%;
		display: block;
	}
	header ul li a {
		color: inherit!important;
	}
	body.open .header-menu{
		opacity: 1;
		pointer-events: all;
		overflow-y: scroll;
	}
	.header-gNav {
        display: block;
        position: relative;
        top: 50px;
        left: 0;
    }
	.header-gNav a {
		position: relative;
		z-index: 1;
		background-position: 15px center;
		background-size: 7.5px auto;
		font-weight: bold;
		padding: 0 10px 0 25px;
        height: 60px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ddd;
		color: #555 !important;
        font-size: 1.05em;
        letter-spacing: 0.05em;
	}
}

@media screen and (max-width: 768px) {
#toggle {
		position: absolute;
		top:4px;
		right:5px;
		display: block;
		z-index: 100;
		cursor: pointer;
		padding: 0px;
		width: 42px;
		height: 42px;
		background: url(../img/home/spbtn-close.svg) no-repeat 0 0;
		background-size: contain;
		zoom: 1;
		text-indent: -99999px;
	}
	#toggle.active {
		background: url(../img/home/spbtn-open.svg) no-repeat 0 0;
		width: 42px;
		height: 42px;
		background-size: contain;
	}
	#header {
		background: #fff;
	}
	/* sp header-btn */
	.header-contact{
		display: none;
	}
}



/* -----------------------------------------------------------
	footer
------------------------------------------------------------*/
.footer-wrap * {
	color: #fff;
}
footer {
	padding:0;
}
.footer-wrap {
	max-width:1200px;
	width:90%;
	margin:0 auto;
	background-color: #8E8176;
}
.footer-ttl {
	font-weight: 600;
	text-align: center;
	margin-bottom:2rem;
	text-align: center;
	letter-spacing: 1px;
	line-height: 1.4;
}
.footer-ttl a {
	color: #fff!important;
}
.footer-read {
	font-size: 1.8rem;
	text-align: center;
	letter-spacing: 0.06em;
}
.f-ttl {
	font-family: 'Noto Sans JP',sans-seri;
	font-size: 1.8rem;
	margin-bottom:1rem;
}
.f-box p {
	font-size: 1.6rem;
}
.f-box a {
	color: #fff;
}
#footer-copy {
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	padding:1.5rem 0;
}
.f-copy {
	font-size: 1.2rem;
	color: #fff;
	margin:0;
}

@media screen and (min-width:768px) {
	.footer-wrap {
		padding:7rem 0;
	}
	.footer-ttl {
		font-size: clamp(1.3em,calc(33/1440*100vw),3.3rem);
	}
	.footer-top {
		margin-bottom:5rem;
	}
	.footer-main {
		display: flex;
		gap:0 3%;
	}
	.footer-main .f-box {
		width:33%;
		text-align: left;
	}
	.footer-main .f-box:first-of-type {
		width:42%;
	}
}

@media screen and (max-width:767px) {
	.footer-wrap {
		padding:4.5rem 0;
	}
	.footer-ttl {
		font-size: 6vw;
		line-height: 1.6;
	}
	.footer-read {
		text-align: left;
		border: 1px solid rgba(255, 255, 255, 0.8);
		padding: 1rem;
		font-size: 1.6rem;
	}
	.footer-top {
		margin-bottom: 3rem;
	}
	.f-box * {
		text-align: left;
	}
	.f-box {
		display: flex;
	}
	.f-box + .f-box {
		margin-top:2rem;
	}
	.f-box .f-ttl {
		font-size: 1.6rem;
		width:5em;
	}
	.f-box p {
		width:calc(100% - 5em);
	}
	.f-box .f-ttl,
	.f-box p {
		line-height: 1.4;
	}
	.footer-main {
		padding: 2rem;
		background: rgba(0, 0, 0, 0.1);
		border-radius: 0.4em;
	}
	.footer-sp {
        position: fixed;
        bottom: 0px;
        left: 0px;
        display: flex;
        justify-content: center;
		width:100%;
    }
	.footer-sp li {
		width:100%;
	}
    .footer-sp a {
        background-color: rgb(217, 217, 217);
        height: 50px;
        color: rgb(255, 255, 255);
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        line-height: 1.2;
        padding: 0 1.5em;
    }
	.footer-sp a img {
		height: 81%;
	}
	.footer-sp .f-mail a {
        background-color: #E37911
    }
	.footer-sp .f-access a {
        background-color: #D7CDB9
    }
	.footer-sp .f-tel a {
        background-color:#9B7F4D
    }
}