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

/* -----------------------------------------------------------
	header
------------------------------------------------------------*/
#header {
	border-top: 5px solid #D40012;
}
#header-top {
	background-color: #fff;
}
#header-menu {
  background-color: #434343;
}
.header-menu a {
	color: #fff;
	position: relative;
	z-index: 1;
	font-weight: bold;
	white-space: nowrap;
}
.tagline {
	margin:0;
}

@media screen and (min-width: 751px) {
	#toggle {
        display: none;
    }
	#header, .header-wrap{
        /* height: ; */
    }
	#header-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		line-height: 1;
		padding:14px 30px 14px 40px;
		padding:0.7vw 2% 1vw;
	}
	.header-menu {
		max-width:1200px;
		margin:0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		line-height: 1;
	}
	#top-logo {
		width:55%;
        margin:0;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 3;
	}
	#top-logo a {
		display: block;
	}
	#top-logo-img {
		width:282px;
		max-width:40%;
		margin:0;
	}
    #top-logo img {
		vertical-align: middle;
        max-width:282px;
		width:100%;
	}
	.tagline {
		/* max-width:60%;
		width:calc(100% - 282px); */
		color: #666;
		font-size: clamp(0.75vw,calc(14/1440*100vw),0.9em);
		padding-left:1.5em;
		line-height: 1.5;
		font-weight: normal;
	}
    #header-contact {
        width:45%;
		position: relative;
		margin:0 0 0 auto;
    }
	.header-contact {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		align-content: center;
		line-height: 1;
		margin: 0 0 0 auto;
		text-align: right;
		gap:0 2%;
	}
	.header-contact li {
		text-align: right;
	}
	.header-contact li img {
		max-height: 70px;
	}
	li.header-mail img,
	li.header-reserve img,
	li.header-line img {
		height: calc(70 / 1440 * 100vw);
	}
	.header-mail img,
	.header-reserve img,
	.header-line img {
		box-shadow: 3px 3px 0 0 rgba(0,0,0,0.85);
		border-radius: 0.8em;
	}
	.header-tel {
		max-width:254px;
		width:38%;
	}
	/* .header-mail,
	.header-reserve {
		width:15%;
		width:11%;
	}
	.header-line {
		width:20%;
		width:15%;
	} */
	.header-menu a {
		/* height: 80px; */
		padding: 0 1.2em;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.header-menu a:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		margin: auto;
		width: 0.57em;
		height: 0.57em;
		background-color: #D40012;
		border-radius: 10em;
	}

	#header.scrolled {
        background: #fff;
        position: fixed;
        top:0;
        left:0;
        width:100%;
        z-index: 4;
      }
      /* animation */
      .scrolled#header {
          display: block;
          position: fixed;
          top: 0;
          left: 0;
          margin: auto;
          z-index: 3;
          width: 100%;
          height: auto;
      }
	  .scrolled #header-top {
		display: none;
	  }
      .scrolled#header{
          animation: scrolledAnime .5s forwards;
        }
        @keyframes scrolledAnime {
          0% {
            opacity: 0;
            transform: translateY(-100px);
          }
          to {
            opacity: 1;
            transform: translateY(0)
          }
        }
}


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

/* sp header
------------------------------------------------------------*/
@media screen and (max-width:750px) {
	#top-logo {
		line-height:1;
		margin:0;
		font-size:0;
	}
	#top-logo {
		position: fixed;
		left: 9px;
		top: 8px;
		margin: 0;
    	width: 85%;
		z-index: 2;
		display: flex;
        align-items: center;
	}
	#top-logo a {
		display: block;
	}
	#top-logo-img {
		margin: 0;
		width:150px;
	}
	.tagline {
		width:calc(100% - 150px);
		font-size: 2.2vw;
		opacity: 0.6;
		margin: 0;
		padding-left: 2em;
		line-height: 1.4;
	}
}

.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-mainBox{
	max-width: 1206px;
	margin: 0 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right:1.5%;
}
.header-menu{
	width: 100%;
	max-width:1100px;
	margin:0 auto;
}


@media screen and (max-width:750px) {
	.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;
		background-color: #434343;
		height: 100vh;
	}
	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: 47px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ddd;
	}
}

@media screen and (min-width: 751px) {
	.header-gNav {
		display: flex;
		justify-content: center;
		height: 58px;
		align-items: center;
		align-content: center;
		line-height: 1;
		gap:0 3%;
	}
	.header-gNav a {
		letter-spacing: 1px;
		padding:1em;
	}
  .scrolled.header {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		margin: auto;
		z-index: 1;
		width: 100%;
		height: auto;
  }
  .scrolled.header{
    animation: scrolledAnime .5s forwards;
  }
  @keyframes scrolledAnime {
    0% {
      opacity: 0;
      transform: translateY(-100px);
    }
    to {
      opacity: 1;
      transform: translateY(0)
    }
  }

}


@media screen and (max-width: 750px) {
#toggle {
		position: absolute;
		top:13px;
		right:15px;
		display: block;
		z-index: 100;
		cursor: pointer;
		padding: 0px;
		width: 26px;
		height: 22px;
		background: url(../img/common/spbtn-open.svg) no-repeat 0 0;
		background-size: contain;
		zoom: 1;
		text-indent: -99999px;
	}
	#toggle.active {
		background: url(../img/common/spbtn-close.svg) no-repeat 0 0;
		width: 24px;
		height: 24px;
		background-size: contain;
	}
	.scrolled.header #header  {
		background: #fff;
		opacity: 1;
	}
	.scrolled.header {
	opacity: 1;
	}
	.open .scrolled #toggle {
		background: url(../img/common/spbtn-close.svg) no-repeat 0 0;
		width: calc(54/750*100vw);
		height: calc(50/750*100vw);
		background-size: contain;
	}

	/* sp header-btn */
	.header-contact{
		display: none;
	}
	#header-contact {
		position: relative;
	}
	.open .header-contact {
		opacity: 1;
		position: absolute;
		top: 27em;
		display: flex;
		width: 80%;
		margin: 0 auto;
		gap: 0 5%;
		justify-content: center;
		left: 0;
		right: 0;
		z-index: 1;
	}
	.header-mail img, .header-reserve img, .header-line img {
		box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.85);
		border-radius: 0.8em;
	}
}



/* -----------------------------------------------------------
	footer
------------------------------------------------------------*/
#footer {
	width:100%;
}
.footer-top {
	background-color: #F8F8F8;
}

.footer-access-inner {
	max-width:500px;
}
.footer-shop img {
	object-fit: cover;
	width:auto;
	height: 100%;
}
.footer-access p {
	line-height: 1.4;
}
.fa01 {
  font-size:105%;
  margin-bottom:0.5em;
}
.fa02 {
  display: flex;
  gap:0 4%;
}
.fa02 p {
	font-size: 100%;
}
.fa03 {
  display: flex;
	gap: 0 0.6em;
	align-items: center;
}
.footer-access-main {
	padding-left:0.5em;
}
.footer-access-sub {
  display: flex;
  align-items: center;
  font-weight: 500;
  line-height: 1;
}
.footer-access-sub .en {
  color: #154F9F;
  font-size: 2.2em;
  margin-right:0.3em;
}
.footer-access-ttl {
  border-bottom:1px solid #ccc;
  margin:0 0 0.6em;
  padding-bottom: 0.2em;
}

.fa-tel {
	width:55%;
	max-width:280px;
}
.fa-company {
	width:40%;
	max-width:160px;
}
/* footer-wrap */
.footer-wrap {
	display: flex;
	max-width:1600px;
	margin: 0 auto;
	width:95%;
	padding:5em 0 0;
}
.footer-company {
	width:28%;
	text-align: left;
}
.footer-menu {
	width:70%;
	padding-left:4%;
}
.footer-company-txt {
	font-size: 0.9em;
	margin-bottom:0;
	line-height: 1.4;
}
.footer-logo {
	margin-bottom:1.5em
}
.footer-logo img {
	width:342px;
}
.footer-menu {
	display: flex;
	justify-content: space-between;
}
.footer-menu a {
    color: #555;
	letter-spacing: 0.05em;
    position: relative;
    padding-right:1.5em;
}
/* .f-menu * {
	font-size: 0.92em;
} */
.f-menu p {
	margin:0;
}
.f-menu li {
	margin-bottom:0.9em;
}
.f-menu a {
	font-size: 0.9em;
}

/* footer-sns */
.footer-sns {
	padding:0 1em 3em;
	text-align: center;
}
.footer-sns ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 1em;
}
.footer-sns li {
	max-width:39px;
	width:2.5em;
}

/* footer-copyright */
.footer-copyright {
    font-size: 1.3rem;
    margin:0;
	background-color: #D40012;
	width:100%;
	width:100%;
	height: 46px;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	line-height: 1;
}
.footer-copyright p {
    color: #fff;
	margin:0;
	font-size: 0.9em;
	letter-spacing: 0.06em;
}


/* pc footer
------------------------------------------------------------*/
@media screen and (min-width: 751px) {
	.footer-shop,
	.footer-access {
		width:50%;
	}
	.footer-menu {
        padding-top:1em;
		padding-bottom:3em;
    }
	.footer-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		line-height: 1;
	}
	.footer-access {
	padding:3.5em 4%;
	}
	.footer-access-ttl {
	font-size: clamp(2vw,calc(32/1200*100vw),2.2em);
	}
	.footer-access-sub {
	font-size: clamp(1.1vw,calc(25/1200*100vw),1.5em);
	}
	.footer-contact {
		position: fixed;
		right:0;
		bottom:10%;
		height: auto;
		z-index: 1;
	}
	.footer-contact li {
		width:5em;
		height:auto;
		text-align: right;
		margin:10px 0 0 auto;
	}
	.footer-contact li:nth-child(3) {
		width:7em;
	}
	.footer-contact li img {
		height: auto;
	}
	.footer-bottom {
		display: none!important;
	}
}


/* sp footer
------------------------------------------------------------*/
@media screen and (max-width:750px) {
	#footer {
		padding-bottom:3em;
		border-bottom:2px solid #fff;
	}
	.footer-menu {
		display: none;
	}
	.footer-copyright {
		font-size: 0.9em;
	}
	.footer-access {
		padding:1em 4%;
	}
	.footer-wrap {
		display: none;
	}
	.footer-sns {
		padding:1.5em 0 1em;
	}
	.footer-sns li {
		width:2em;
	}
	.footer-copyright {
		height: 32px;
	}
	.footer-contact {
		display: none!important;
	}
	.footer-bottom {
		position: fixed;
		bottom:0;
		left:0;
		width:100%;
		display: flex;
		align-items: center;
		align-content: center;
		line-height: 1;
		z-index: 1;
        gap: 0 6px;
        padding: 3px;
	}
	.footer-bottom li{
		width:33.3333333%;
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		line-height: 1;
		height: 3em;
		box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.85);
        border-radius: 0.5em;
	}
	.footer-bottom li * {
		color: #fff;
		font-weight: bold;
		font-size: 0.95em;
	}
	.footer-bottom li.f-mail {
		background-color: #154F9F;
	}
	.footer-bottom li.f-mail img {
		width:17px;
	}
	.footer-bottom li.f-reserve img {
		width:17px;
	}
	.footer-bottom li.f-reserve {
		background-color: #D40012;
	}
	.footer-bottom li.f-line {
		background-color: #2EBF45;
	}
	.footer-copyright {
		background-color: #444;
	}
	.footer-bottom li img {
		vertical-align: middle;
		margin-right:8px;
	}
}