@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap');

/* ---------------------------------------
  基本情報
-----------------------------------------*/
html {
	height: 100%;
}

html {
	font-size: 62.5%;
	overflow-y: scroll;
}

*,
*:after,
*:before {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
address,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
img,
form,
figure {
	margin: 0;
	padding: 0;
	border: none;
	line-height: 100%;
	list-style-type: none;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
	font-style: normal;
	font-weight: normal;
	text-align: left;
	color: #000000;
	letter-spacing: 0;
}

input,
select,
button,
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

select::-ms-expand {
	display: none;
}

textarea {
	resize: vertical;
}

button,
input[type="submit"] {
	cursor: pointer;
}

@media screen and (max-width: 768px) {


	.ipad body,
	.android body,
	.iphone body {
		-webkit-text-size-adjust: 100%;
	}

	.android h2,
	.android h3,
	.android ul,
	.android dl dt,
	.android dl dd,
	.android p {
		max-height: 999999px;
	}
}



/* ---------------------------------------
  base
-----------------------------------------*/
body {
	position: relative;
	word-wrap: break-word;
	min-width: 1200px;
}

main {
	display: block;
}

section {
	position: relative;
}

a {
	color: #000000;
	text-decoration: none;
	transition: .3s ease;
}

img {
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}

.en {
	font-family: 'Jost', sans-serif;
}

@media screen and (max-width: 768px) {
	body {
		min-width: inherit;
	}

	main {
		padding-top: 50px;
	}

	img {
		width: 100%;
	}
}

/* ---------------------------------------
  レスポンシブ
-----------------------------------------*/

@media screen and (min-width: 769px) {
	.sp {
		display: none !important;
	}
}

@media screen and (max-width: 768px) {
	.pc {
		display: none !important;
	}
}


/* ---------------------------------------
  汎用
-----------------------------------------*/
.wrap {
	width: 1200px;
	margin: 0 auto;
	position: relative;
}

p,
th,
td,
dt,
dd,
li,
input,
button,
textarea {
	font-size: 1.6rem;
	line-height: 2;
}


.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.center {
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.tal {
	text-align: left !important;
}

.tar {
	text-align: right !important;
}

.tac {
	text-align: center !important;
}

.link_txt {
	text-decoration: underline;
}

.bold {
	font-weight: bold;
}

.fixed {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.fade {
	transition: opacity .3s;
}

.fade:hover {
	opacity: .8;
}

@media screen and (max-width: 768px) {
	.wrap {
		width: 84%;
	}

	p,
	th,
	td,
	dt,
	dd,
	li,
	input,
	button,
	textarea {
		font-size: 3.2vw;
	}
}


/* ---------------------------------------
  scroll
-----------------------------------------*/
.fadeup {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1s, transform 1s;
}

.fadein {
	opacity: 0;
	transition: opacity 1s;
}

.scroll.is-show.fadeup,
.scroll.is-show .fadeup {
	opacity: 1;
	transform: translate(0, 0);
}

.scroll.is-show.fadein,
.scroll.is-show .fadein,
.onload.is-show.fadein,
.onload.is-show .fadein {
	opacity: 1;
}

.delay1 {
	transition-delay: .5s !important;
}

.delay2 {
	transition-delay: 1s !important;
}

.delay3 {
	transition-delay: 1.5s !important;
}

.delay4 {
	transition-delay: 2s !important;
}

.delay5 {
	transition-delay: 2.5s !important;
}

.delay6 {
	transition-delay: 3s !important;
}

.delay7 {
	transition-delay: 3.5s !important;
}

.delay8 {
	transition-delay: 4s !important;
}

/* ---------------------------------------
  parts
-----------------------------------------*/
.bg {
	background-image: url(../img/common/bg_stripe.png);
}

.bg02 {
	background-image: url(../img/common/bg_grid.png);
}

/*breadcrumb*/
.breadcrumb {
	padding-right: calc(50% - 400px);
	position: relative;
	margin: -15px 0;
	z-index: 1;
}

.breadcrumb::before {
	content: "";
	width: 100%;
	height: 14px;
	background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
	opacity: 0.02;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
}

.breadcrumb .list {
	padding-left: calc(100% - 1000px);
	background-color: #f2f2f2;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	height: 30px;
}

.breadcrumb .list li {
	color: #000;
	font-size: 1.4rem;
	line-height: 1.2;
	letter-spacing: 0.1em;
	margin-right: 2.2em;
	position: relative;
}

.breadcrumb .list li:last-child {
	margin-right: 0;
}

.breadcrumb .list li::after {
	content: "";
	width: .5em;
	height: .5em;
	display: inline-block;
	border-right: 1px solid #7f7f7f;
	border-bottom: 1px solid #7f7f7f;
	transform: rotate(-45deg);
	position: absolute;
	right: -1.1em;
	top: .35em;
}

.breadcrumb .list li:last-child::after {
	display: none;
}

.breadcrumb .list li a {
	color: #7f7f7f;
	display: inline-block;
}

/*IE*/
.ie .breadcrumb .list {
	padding-top: 6px;
}

.ie .breadcrumb .list .en {
	top: -.1em;
}

.ie .breadcrumb .list li::after {
	top: .2em;
}


/*btn*/
.btn a {
	display: block;
	position: relative;
	width: 178px;
	height: 50px;
	border: 1px solid #000;
	border-bottom: none;
}

.btn a::before {
	content: "";
	width: 80px;
	height: 1px;
	background-color: #000;
	position: absolute;
	left: 0;
	bottom: 0;
	transition: .3s ease;
}

.btn a::after {
	content: "";
	width: 6px;
	height: 6px;
	background-color: #000;
	border-radius: 50%;
	position: absolute;
	left: 80px;
	bottom: -3px;
	transition: .3s ease;
	margin-left: -3px;
}

.btn a:hover::before {
	width: 100% !important;
}

.btn a:hover::after {
	left: 100% !important;
}

.btn a > span {
	font-family: 'Jost', sans-serif;
	display: inline-block;
	font-size: 1.8rem;
	line-height: 1;
	letter-spacing: 0.05em;
	position: absolute;
	right: 8px;
	bottom: -4px;
	padding: 0 15px;
	transition: .3s ease;
}

.btn a > span .ja {
	display: inline-block;
	line-height: 1;
}

.btn a > span::before {
	content: "";
	width: .5em;
	height: .5em;
	display: inline-block;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	transform: rotate(-45deg);
	position: absolute;
	right: .15em;
	top: .2em;
}

.btn a:hover > span {
	bottom: 15px;
}


/*secttl*/
.secttl {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-size: 4.2rem;
	letter-spacing: 0.1em;
	line-height: .8;
	/*	height: 100%;*/
	position: relative;
	display: flex;
	align-items: center;
	transition: 1s ease;
	transition-delay: 1s;
}

.secttl .ttl {
	padding-bottom: 20px;
}

.secttl .border {
	display: inline-block;
	position: relative;
	width: 1px;
	height: 100px;
	background-color: #000;
	transition: 1.5s ease;
}

.secttl .border::after {
	content: "";
	width: 6px;
	height: 6px;
	background-color: #000;
	border-radius: 50%;
	position: absolute;
	left: -3px;
	bottom: 0;
	margin-top: -3px;
}


.secttl.is-show .border {
	height: 100%;
}


/*popup*/
a.popup-iframe {
	display: block;
	position: relative;
}

a.popup-iframe::before {
	content: "";
	display: inline-block;
	width: 55px;
	height: 55px;
	background: url(../img/common/movie_btn.png) no-repeat center / 100% auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

@media screen and (max-width: 768px) {
	.bg {
		background-size: 2.133vw auto;
	}

	.bg02 {
		background-size: 6.666vw auto;
	}

	/*pagettl*/
	.pagettl {
		height: 32vw;
		padding-bottom: 3vw;
	}

	/*breadcrumb*/
	.breadcrumb {
		width: 92%;
		padding-right: 0;
		margin: -3vw 0;
	}

	.breadcrumb::before {
		content: none;
	}

	.breadcrumb .list {
		padding-left: 4vw;
		height: 6vw;
	}

	.breadcrumb .list li {
		font-size: 2.8vw;
		letter-spacing: 0;
		margin-right: 1.8em;
	}

	.breadcrumb .list li::after {
		top: .3em;
		right: -1em;
	}

	/*btn*/
	.btn a {
		width: 35.6vw;
		height: 10vw;
	}

	.btn a::before {
		width: 15vw;
	}

	.btn a::after {
		width: 1.4vw;
		height: 1.4vw;
		left: 15vw;
		bottom: -.7vw;
		margin-left: -.7vw;
	}

	.btn a > span {
		font-size: 3.6vw;
		right: 2vw;
		bottom: -.5vw;
		padding: 0 3.2vw;
	}

	.btn a:hover > span {
		bottom: 3vw;
	}


	/*secttl*/
	.secttl {
		-ms-writing-mode: initial;
		writing-mode: initial;
		font-size: 6.9vw;
	}

	.secttl .ttl {
		padding-bottom: 0;
		padding-right: 6vw;
	}

	.secttl .border {
		height: 1px;
		width: 34vw;
	}

	.secttl .border::after {
		width: 1.4vw;
		height: 1.4vw;
		border-radius: .7vw;
		left: auto;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}


	.secttl.is-show .border {
		width: 100%;
		height: 1px;
	}

	/*popup*/

	a.popup-iframe::before {
		width: 9.86vw;
		height: 9.86vw;
	}
}

/* ----------------------------------------------------------------------------------------------------
*  ヘッダー
* --------------------------------------------------------------------------------------------------*/
header {
	width: 100%;
	background-color: #fff;
	height: 100px;
	z-index: 100;
}

header .wrap {
	height: 100px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 15px;
}

header .logo {
	width: 195px;
	line-height: 1;
}

header .logo a:hover {
	opacity: .7;
}

header nav {
	flex-grow: 1;
}

header nav .menu {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

header nav .menu .gnavi {
	display: flex;
}

header nav .gnavi > li > a {
	font-family: 'Jost', sans-serif;
	display: block;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	line-height: 1;
	padding: 2px 15px 0;
	position: relative;
}

header nav .gnavi > li > a:hover {
	color: #7f7f7f;
}

header nav .menu .sns {
	line-height: 1;
	display: flex;
}

header nav .menu .sns li {
	margin-left: 15px;
}

header nav .menu .sns a {
	display: block;
	width: 25px;
	height: 0;
	padding-top: 25px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: auto;
	background-image: url(../img/common/ico_facebook_bk.png);
}

header nav .menu .sns a:hover {
	background-image: url(../img/common/ico_facebook_gray.png);
}

header nav .menu .sns .sns__instagram a {
	background-image: url(../img/common/icon_instagram.svg);
}
header nav .menu .sns .sns__instagram a:hover,
.not-front header nav .menu .sns .sns__instagram a:hover {
	background-image: url(../img/common/icon_instagram_on.svg);
}
header nav .menu .sns .sns__facebook a {
	background-image: url(../img/common/icon_fb.svg);
}
header nav .menu .sns .sns__facebook a:hover,
.not-front header nav .menu .sns .sns__facebook a:hover {
	background-image: url(../img/common/icon_fb_on.svg);
}
header nav .menu .sns .sns__twitter a {
	background-image: url(../img/common/icon_tw.svg);
}
header nav .menu .sns .sns__twitter a:hover,
.not-front header nav .menu .sns .sns__twitter a:hover {
	background-image: url(../img/common/icon_tw_on.svg);
}
header nav .menu .sns .sns__youtube a {
	background-image: url(../img/common/icon_youtube.svg);
}
header nav .menu .sns .sns__youtube a:hover,
.not-front header nav .menu .sns .sns__youtube a:hover {
	background-image: url(../img/common/icon_youtube_on.svg);
}
.not-front header nav .menu .sns .sns__instagram a {
	background-image: url(../img/common/icon_instagram_bk.svg);
}
.not-front header nav .menu .sns .sns__facebook a {
	background-image: url(../img/common/icon_fb_bk.svg);
}
.not-front header nav .menu .sns .sns__twitter a {
	background-image: url(../img/common/icon_tw_bk.svg);
}
.not-front header nav .menu .sns .sns__youtube a {
	background-image: url(../img/common/icon_youtube_bk.svg);
}

@media screen and (max-width: 768px) {
	header {
		position: fixed;
		height: 50px;
	}

	header .wrap {
		width: 100%;
		height: 50px;
		padding-bottom: 0;
	}

	header .logo {
		width: 98px;
		margin-left: 4vw;
	}

	header .menu-trigger {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		width: 50px;
		height: 50px;
		z-index: 999;
		text-align: center;
	}

	header .menu-trigger span {
		display: inline-block;
		transition: all .4s;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 29px;
		height: 1px;
		background-color: #000;
	}

	header .menu-trigger span:nth-of-type(1) {
		top: 22px;
	}

	header .menu-trigger span:nth-of-type(2) {
		top: 28px;
	}


	header.navOpen .menu-trigger span:nth-of-type(1) {
		top: 24px;
		transform: rotate(-45deg);
	}

	header.navOpen .menu-trigger span:nth-of-type(2) {
		top: 24px;
		transform: rotate(45deg);
	}

	header nav {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		text-align: center;
		overflow-y: scroll;
		width: 100%;
		max-height: 100%;
		background-color: #fff;
		padding: 50px 0 0;
		-webkit-overflow-scrolling: touch;
	}

	header nav .menuwrap {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 4vw 8vw 17vw;
	}

	header nav .menuwrap .logo2 {
		width: 25%;
		margin: 4vw;
	}

	header nav .menu {
		display: block;
		width: auto;
	}

	header nav .menu .gnavi {
		display: block;
	}

	header nav .gnavi > li > a {
		font-size: 4.2vw;
		padding: 4vw 0;
	}


	header nav .menu .sns {
		margin-left: 0;
		margin-top: 4vw;
	}

	header nav .menu .sns li:first-child {
		margin-left: 0;
	}

	header nav .menu .sns a {
		width: 6.6vw;
		height: 6.6vw;
		background-size: contain;
	}

	header nav .menu .sns .sns__instagram a {
		background-image: url(../img/common/icon_instagram_bk.svg);
	}
	header nav .menu .sns .sns__facebook a {
		background-image: url(../img/common/icon_fb_bk.svg);
	}
	header nav .menu .sns .sns__twitter a {
		background-image: url(../img/common/icon_tw_bk.svg);
	}
	header nav .menu .sns .sns__youtube a {
		background-image: url(../img/common/icon_youtube_bk.svg);
	}

	/*closebtn*/
	header #menuwrap .closebtn {
		display: block;
		position: relative;
		margin-top: 13vw;
		width: 100%;
		height: 10vw;
		border: 1px solid #000;
		border-bottom: none;
	}

	header #menuwrap .closebtn::before {
		content: "";
		width: 15vw;
		height: 1px;
		background-color: #000;
		position: absolute;
		left: 0;
		bottom: 0;
		transition: .3s ease;
	}

	header #menuwrap .closebtn::after {
		content: "";
		width: 1.4vw;
		height: 1.4vw;
		background-color: #000;
		border-radius: 50%;
		position: absolute;
		left: 15vw;
		bottom: -.7vw;
		transition: .3s ease;
		margin-left: -.7vw;
	}

	header #menuwrap .closebtn span {
		font-family: 'Jost', sans-serif;
		display: inline-block;
		font-size: 3.6vw;
		line-height: 1;
		letter-spacing: 0.05em;
		position: absolute;
		right: 2vw;
		bottom: -.5vw;
		padding: 0 3.2vw;
	}

	header #menuwrap .closebtn span::before {
		content: "";
		width: .5em;
		height: .5em;
		display: inline-block;
		border-right: 1px solid #000;
		border-bottom: 1px solid #000;
		transform: rotate(-45deg);
		position: absolute;
		right: .15em;
		top: .2em;
	}

}

@media screen and (max-width: 374px) {
}

/* ---------------------------------------
  parts
-----------------------------------------*/
.pagetop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1;
	width: 16px;
}

.pagetop a {
	display: inline-block;
	position: relative;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-weight: bold;
	padding-top: 75px;
	font-size: 1.6rem;
	color: #cdb07c;
	line-height: 1;
	letter-spacing: 0.1em;
}

.pagetop a::before {
	content: "";
	width: 1px;
	height: 50px;
	background-color: #cdb07c;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 15px;
	transition: .3s ease;
}

.pagetop a::after {
	content: "";
	width: 6px;
	height: 6px;
	background-color: #cdb07c;
	border-radius: 50%;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: 15px;
	transition: .3s ease;
}

.pagetop a:hover {
	padding-top: 75px;
}

.pagetop a:hover::before {
	top: 0;
	height: 65px;
}

.pagetop a:hover::after {
	top: 0;
}



@media screen and (max-width: 768px) {
	.pagetop {
		right: 3vw;
		width: 3vw;
	}

	.pagetop a {
		padding-top: 14vw;
		font-size: 3vw;
	}

	.pagetop a::before {
		top: 2vw;
		height: 10vw;
	}

	.pagetop a::after {
		top: 2vw;
		width: 1.2vw;
		height: 1.2vw;
	}

	.pagetop a:hover {
		padding-top: 14vw;
	}

	.pagetop a:hover::before {
		top: 0;
		height: 12vw;
	}

	.pagetop a:hover::after {
		top: 0;
	}

}

/* ----------------------------------------------------------------------------------------------------
*  フッター
* --------------------------------------------------------------------------------------------------*/

footer {
	position: relative;
}

/* ---------------------------------------
  contact
-----------------------------------------*/
#contact {
	position: relative;
	height: 266px;
	background: url(../img/common/contact_bg.jpg) no-repeat center / cover
}

#contact .box {
	width: 1044px;
	height: 145px;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -30px;
	z-index: 1;
}

#contact .box a {
	width: 100%;
	height: 100%;
	padding: 0 50px;
	display: flex;
	align-items: center;
	background-color: #cdb07c;
	transition: background-color .5s cubic-bezier(.4, .8, .74, 1) 0s;
}

#contact .box a:hover {
	background-color: #000;
}

#contact .box .ttl {
	color: #fff;
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
}

#contact .box .ttl::before,
#contact .box .ttl::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: .3s ease;
}

#contact .box .ttl::before {
	width: 140px;
	height: 1px;
	background-color: #fff;
	right: 10px;
}

#contact .box a:hover .ttl::before {
	right: -6px;
}

#contact .box .ttl::after {
	width: 9px;
	height: 9px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: rotate(-45deg);
	position: absolute;
	right: 0;
	margin-top: -4px;
}

#contact .box a:hover .ttl::after {
	right: -16px;
}

#contact .box .ttl span {
	display: inline-block;
	line-height: 1;
}

#contact .box .ttl .en {
	font-size: 4.2rem;
	letter-spacing: 0.08em;
}

#contact .box .ttl .ja {
	font-size: 2rem;
	letter-spacing: 0.1em;
	margin-left: 2.4em;
}

@media screen and (max-width: 768px) {
	#contact {
		height: 53.2vw;
		background: url(../img/common/contact_bg_sp.jpg) no-repeat center / cover
	}

	#contact .box {
		width: 84%;
		height: 29vw;
		bottom: -6vw;
	}

	#contact .box a {
		padding: 0 9.86vw;
	}

	#contact .box .ttl {
		display: block;
	}

	#contact .box .ttl::before {
		width: 18.4vw;
		right: 2.13vw;
	}

	#contact .box a:hover .ttl::before {
		right: -2vw;
	}

	#contact .box .ttl::after {
		width: 1.7vw;
		height: 1.7vw;
		margin-top: -.85vw;
	}

	#contact .box a:hover .ttl::after {
		right: -4.13vw;
	}

	#contact .box .ttl span {
		display: block;
	}

	#contact .box .ttl .en {
		font-size: 6.9vw;
	}

	#contact .box .ttl .ja {
		font-size: 3.2vw;
		margin-left: 0;
		margin-top: .8em;
	}
}


/* ---------------------------------------
  office
-----------------------------------------*/
#office {
	position: relative;
	padding: 70px 0 0;
	margin-top: 58px;
}

#office .inner {
	width: calc(50% + 600px);
	margin-left: auto;
	display: flex;
	justify-content: space-between;
}

#office .cntblock {
	width: calc(100% - 230px);
	min-width: 1120px;
	display: flex;
	flex-direction: row-reverse;
}

#office .cntblock .img {
	width: calc(100% - 530px);
	height: 457px;
	position: relative;
	overflow: hidden;
	top: 100px;
}

#office .cntblock .img picture {
	position: relative;
}
#office .cntblock .img img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	max-width: inherit;
	object-fit: cover;
}

#office .cntblock .infowrap {
	width: 530px;
	padding-right: 45px;
}

#office .cntblock .infowrap .ttl {
	font-weight: bold;
	font-size: 2.4rem;
	letter-spacing: 0.1em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 70px;
}

#office .cntblock .infowrap .ttl span {
	display: inline-block;
	font-style: italic;
	font-weight: normal;
	font-size: 1.82rem;
	letter-spacing: 0.1em;
}

#office .cntblock .infowrap .office + .office {
	margin-top: 30px;
}

#office .cntblock .infowrap .office dt {
	font-size: 1.8rem;
	letter-spacing: 0.1em;
	border-bottom: 1px solid #000;
	padding-bottom: .2em;
	margin-bottom: .5em;
}

#office .cntblock .infowrap .office dd p {
	font-size: 1.6rem;
	letter-spacing: 0.05em;
	line-height: 1.75;
}

#office .cntblock .infowrap .office dd p + p {
	margin-top: .8em;
}

#office .map {
	width: 100%;
	height: 400px;
	margin-top: 100px;
	position: relative;
}

#office .map iframe {
	width: 100%;
	height: 100%;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}

@media screen and (max-width: 768px) {
	#office {
		padding: 17vw 0 0;
		margin-top: 6vw;
	}

	#office .secttl {
		width: 84%;
		margin: 0 auto 9.33vw;
	}

	#office .inner {
		width: 100%;
		display: block;
	}

	#office .cntblock {
		width: 100%;
		min-width: inherit;
		display: block;
	}

	#office .cntblock .img {
		width: 100%;
		height: 56.13vw;
		margin-bottom: 9.33vw;
		top: inherit;
	}

	#office .cntblock .img img {
		max-width: 100%;
	}

	#office .cntblock .infowrap {
		width: 84%;
		padding-right: 0;
		margin: 0 auto;
	}

	#office .cntblock .infowrap .ttl {
		font-size: 4.8vw;
		margin-bottom: 11.33vw;
	}

	#office .cntblock .infowrap .ttl span {
		font-size: 3.656vw;
	}

	#office .cntblock .infowrap .office + .office {
		margin-top: 6.33vw;
	}

	#office .cntblock .infowrap .office dt {
		font-size: 3.6vw;
	}

	#office .cntblock .infowrap .office dd p {
		font-size: 3.2vw;
		letter-spacing: 0.03em;
	}

	#office .map {
		height: 53.33vw;
		margin-top: 17.33vw;
	}

	#office .map::before,
	#office .map::after {
		content: "";
		width: 100%;
		height: 2.4vw;
		opacity: .25;
		position: absolute;
		left: 0;
		z-index: 1;
	}

	#office .map::before {
		background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 100%);
		top: 0;
	}

	#office .map::after {
		background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
		bottom: 0;
	}

}


/* ---------------------------------------
  menuwrap
-----------------------------------------*/
footer .menuwrap {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 18px 0 30px;
}

footer .logo {
	width: 174px;
	line-height: 1;
	margin-top: 6px;
}

footer .logo a:hover {
	opacity: .7;
}

footer .menu {
	display: flex;
	align-items: center;
	position: relative;
}

footer .menu .gnavi {
	display: flex;
}

footer .menu .gnavi > li > a {
	font-family: 'Jost', sans-serif;
	display: block;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	line-height: 1;
	padding: 2px 15px 0;
	position: relative;
}

footer .menu .gnavi > li > a:hover {
	color: #7f7f7f;
}

footer .menu .sns {
	line-height: 1;
	display: flex;
}

footer .menu .sns li {
	margin-left: 15px;
}

footer .menu .sns a {
	display: block;
	width: 25px;
	height: 0;
	padding-top: 25px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-image: url(../img/common/ico_facebook_black.png);
}

footer .menu .sns a:hover {
	background-image: url(../img/common/ico_facebook_gray.png);
}

footer .menu .sns .sns__instagram a {
	background-image: url(../img/common/icon_instagram_bk.svg);
}
footer .menu .sns .sns__facebook a {
	background-image: url(../img/common/icon_fb_bk.svg);
}
footer .menu .sns .sns__twitter a {
	background-image: url(../img/common/icon_tw_bk.svg);
}
footer .menu .sns .sns__youtube a {
	background-image: url(../img/common/icon_youtube_bk.svg);
}

footer .copyright {
	color: #fff;
	font-size: 1.4rem;
	text-align: center;
	letter-spacing: 0.1em;
	background-color: #000;
	line-height: 1.5;
	padding: .5em 0;
}

@media screen and (max-width: 768px) {
	footer .menuwrap {
		flex-direction: column-reverse;
		padding: 9.33vw 0;
	}

	footer .logo {
		width: 35vw;
		margin-top: 13.33vw;
	}


	footer .menu {
		display: block;
		width: 61.6vw;
		margin-left: auto;
		height: 22vw;
	}

	footer .menu .gnavi {
		flex-direction: column;
		flex-wrap: wrap;
		height: 100%;
	}

	footer .menu .gnavi > li {
		width: 45%;
	}

	footer .menu .gnavi > li + li {
		margin-top: 3vw;
	}

	footer .menu .gnavi > li:nth-child(n + 5) {
		/* margin-left: 10%; */
		margin-left: 0;
	}


	footer .menu .gnavi > li + li:nth-child(5) {
		margin-top: 0;
	}

	footer .menu .gnavi > li > a {
		font-size: 3.2vw;
		padding: 0;
	}

	footer .menu .sns {
		position: absolute;
		right: 0;
		margin: 0;
		bottom: -.5vw;
	}

	footer .menu .sns li {
		/* margin-left: 10px; */
		margin-left: 0;
		margin-right: 10px;
	}

	footer .menu .sns a {
		width: 5vw;
		height: 0;
		padding-top: 5vw;
	}

	footer .copyright {
		font-size: 2.8vw;
		padding: .6em 0;
	}

}

/* ------------------------------
    clearfix
------------------------------ */

.cf:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

.cf {
	display: inline-block;
}

/* Hides from IE Mac */
* html .cf {
	height: 1%;
}

.cf {
	display: block;
}

/* End Hack */

.bim-banner {
	display: flex;
	justify-content: center;
	gap: 24px;
}

.bim-banner .item {
	width: 510px;
}

.bim-banner .item a {
	transition: .4s ease;
}

.bim-banner .item a:hover {
	opacity: .8;
}

.bim-banner .item a img {
	
}

@media screen and (max-width: 768px) {
	.bim-banner {
		flex-direction: column;
		width: 84%;
		margin-left: auto;
		margin-right: auto;
		gap: 8vw;
		margin-bottom: 1vw;
	}
	.bim-banner .item {
		width: 100%;
	}
}