/************************************************/
/*						*/
/*	【Common】				*/
/*						*/
/************************************************/

/*------【Common】------------------------------*/

html {
	overflow-y		: scroll;
	height			: 100%;
	font-size		: 1.0em;
}

body {
	display			: grid;
	grid-gap		: 0px 0px;
	grid-template-columns	: 100%;
	grid-template-rows	: auto 1fr auto auto;
	min-height		: 100%;
	background		: var(--base);
	font-family		: "Noto Sans JP",system-ui,sans-serif;
	line-height		: 1.9;
	letter-spacing		: .04em
}

header {
	grid-column		: 1 / 2;
	grid-row		: 1 / 2;
}

main {
	grid-column		: 1 / 2;
	grid-row		: 2 / 3;
}

aside {
	grid-column		: 1 / 2;
	grid-row		: 3 / 4;
}

footer {
	grid-column		: 1 / 2;
	grid-row		: 4 / 5;
}

a {
	color			: inherit;
	text-decoration		: none;
}

img {
	max-width		: 100%;
	display			: block;
}

/*------【To Top】------------------------------*/

.page-top {
	position		: fixed;
	right			: 0;
	bottom			: 0;
	z-index			: 9999;
	opacity			: 0.8;
}

.page-top a.icon {
	display			: block;
	position		: relative;
	width			: 50px;
	height			: 50px;
	color			: #ffffff;
	background-color	: #333333;
}

.page-top a.icon:before {
	content			: '\f106';
	display			: block;
	position		: absolute;
	top			: -20px;
	bottom			: 0;
	left			: 0;
	right			: 0;
	width			: 15px;
	height			: 15px;
	font-family		: "Font Awesome 5 Free";
	font-weight		: 900;
	font-size		: 20px;
	margin			: auto;
}

.page-top a:hover {
	opacity			: 1;
}

/*++++++++++++++++++++++++++++++++++++++++++++++*/
/* @media screen 576px				*/
/*++++++++++++++++++++++++++++++++++++++++++++++*/

@media screen and (min-width: 576px) {


}/***** END 576px *****/

/*++++++++++++++++++++++++++++++++++++++++++++++*/
/* @media screen 768px				*/
/*++++++++++++++++++++++++++++++++++++++++++++++*/

/*------【To Top】------------------------------*/

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

.page-top a:hover {
	opacity			: 0.5;
}

/*------【TEL Link】----------------------------*/

a[href^="tel:"] {
	pointer-events		: none;
}

}/***** END 768px *****/

/************************************************/
/*						*/
/*	【Header】				*/
/*						*/
/************************************************/

/*------【Setting】-----------------------------*/

header {
	position		: fixed;
	width			: 100%;
	height			: 100px;
	background-color	: #000000;
	z-index			: 300;
	margin			: 0;
	padding			: 0;
}

header .header {
	display			: flex;
	align-items		: center;
	height			: 100%;
	margin			: 0;
	padding			: 0;
}

/*------【Top Logo】----------------------------*/

header .header .header-logo {
	margin			: 0;
	padding			: 0;
}

header .header .header-logo .logo {
	width			: 240px;
	margin			: 0 0 0 20px;
	padding			: 0;
}

header .header .header-logo .logo img {
	width			: 100%;
	height			: auto;
}

/*------【Hamburger Menu】----------------------*/

header .header .hbg-box {
	position		: absolute;
	top			: 35px;
	right			: 30px;
}

header .header .hbg-box .hbg-menu {
	position		: relative;
	cursor			: pointer;
	width			: 26px;
}

header .header .hbg-box .hbg-menu:after {
	content			: "MENU";
	position		: absolute;
	display			: block;
	top			: 20px;
	left			: -3px;
	text-align		: center;
	font-family		: serif;
	font-size		: 10px;
	color			: #6bb5cb;
}

header .header .hbg-box .hbg-menu.active:after {
	content			: "CLOSE";
}

header .header .hbg-box .hbg-menu span {
	position		: absolute;
	display			: inline-block;
	left			: 0;
	width			: 100%;
	height			: 2px;
	transition		: all 0.4s;
	box-sizing		: border-box;
	margin			: 0 auto 0 auto;
}
 
header .header .hbg-box .hbg-menu span:nth-child(1) {
	top			: 0;
	background-color	: #6bcbba;
}
 
header .header .hbg-box .hbg-menu span:nth-child(2) {
	top			: 8px;
	background-color	: #6bcacb;
}
 
header .header .hbg-box .hbg-menu span:nth-child(3) {
	top			: 16px;
	background-color	: #6bbacb;
}

header .header .hbg-box .hbg-menu span:nth-of-type(1) {
	animation		: menu-bar01 0.75s forwards;
}

@keyframes menu-bar01 {
  0% {
	transform		: translateY(8px) rotate(45deg);
  }
  50% {
	transform		: translateY(8px) rotate(0);
  }
  100% {
	transform		: translateY(0) rotate(0);
  }
}

header .header .hbg-box .hbg-menu span:nth-of-type(2) {
	transition		: all 0.25s 0.25s;
	opacity			: 1;
}

header .header .hbg-box .hbg-menu span:nth-of-type(3) {
	animation		: menu-bar03 0.75s forwards;
}

@keyframes menu-bar03 {
  0% {
	transform		: translateY(-8px) rotate(-45deg);
  }
  50% {
	transform		: translateY(-8px) rotate(0);
  }
  100% {
	transform		: translateY(0) rotate(0);
  }
}

header .header .hbg-box .hbg-menu.active span:nth-of-type(1) {
	animation		: active-menu-bar01 0.75s forwards;
}

@keyframes active-menu-bar01 {
  0% {
	transform		: translateY(0) rotate(0);
  }
  50% {
	transform		: translateY(8px) rotate(0);
  }
  100% {
	transform		: translateY(8px) rotate(45deg);
  }
}

header .header .hbg-box .hbg-menu.active span:nth-of-type(2) {
	opacity			: 0;
}

header .header .hbg-box .hbg-menu.active span:nth-of-type(3) {
	animation		: active-menu-bar03 0.75s forwards;
}

@keyframes active-menu-bar03 {
  0% {
	transform		: translateY(0) rotate(0);
  }
  50% {
	transform		: translateY(-8px) rotate(0);
  }
  100% {
	transform		: translateY(-8px) rotate(-45deg);
  }
}

/*------【Top Menu】----------------------------*/

header .header-nav .header-menu-nav {
	position		: fixed;
	width			: 100%;
	left			: -100%;
	text-align		: center;
	background-color	: #eef7f9;
	transition		: left 0.5s ease;
}

header .header-nav .header-menu-nav.open {
	left			: 0;
}

header .header-nav .header-menu-nav ul li a {
	display			: block;
	font-weight		: bolder;
	text-decoration		: none;
	color			: #477684;
	border-width		: 0 0 1px 0;
	border-style		: dotted;
	border-color		: #cccccc;
	margin			: 0;
	padding			: 2em;
}

/*++++++++++++++++++++++++++++++++++++++++++++++*/
/* @media screen 576px				*/
/*++++++++++++++++++++++++++++++++++++++++++++++*/

@media screen and (min-width: 576px) {


}/***** END 576px *****/

/*++++++++++++++++++++++++++++++++++++++++++++++*/
/* @media screenl 768px				*/
/*++++++++++++++++++++++++++++++++++++++++++++++*/

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


}/***** END 768px *****/

/*++++++++++++++++++++++++++++++++++++++++++++++*/
/* @media screen 992px				*/
/*++++++++++++++++++++++++++++++++++++++++++++++*/

@media screen and ( min-width : 992px ) {

/*------【Setting】-----------------------------*/

header {
	display			: grid;
	align-items		: center;
	grid-gap		: 0;
	grid-template-columns	: 240px 1fr;
	align-items		: center;
	transition		: 0.5s;
}

header .header {
	grid-column		: 1 / 2;
	grid-row		: 1 / 2;
}

header .header-nav {
	grid-column		: 2 / 3;
	grid-row		: 1 / 2;
}

header .header .hbg-box {
	display			: none;
}

/*------【Top Menu】----------------------------*/

/***** 初期化 *****/

header .header-nav .header-menu-nav {
	position		: static;
	left			: auto;
	text-align		: center;
	background-color	: transparent;
	transition		: none;
	transform		: none;
	margin			: 0 auto 0 auto;
	padding			: 0;
}

header .header-nav .header-menu-nav.open {
	left			: auto;
}

header .header-nav .header-menu-nav ul li a {
	display			: initial;
	font-weight		: normal;
	color			: #ffffff;
	border-width		: 0;
	border-style		: none;
	border-color		: transparent;
	margin			: 0;
	padding			: 0;
}

/***** ここまで *****/

header .header-nav {
	font-size		: 1.0em;
	margin			: 0 20px 0 0;
	padding			: 0;
}

header .header-nav .header-menu-nav {
	display			: flex;
	justify-content		: flex-end;
	margin			: 0;
	padding			: 0;
}

header .header-nav .header-menu-nav .nav {
	display			: flex;
	position		: relative;
	list-style-type		: none;
	margin			: 0;
	padding			: 0;
}

header .header-nav .header-menu-nav .nav:before,
header .header-nav .header-menu-nav .nav:after {
	content			: "";
}

header .header-nav .header-menu-nav .nav li {
	position		: relative;
	line-height		: 36px;
	text-align		: center;
	margin			: 0;
	padding			: 0;
}

header .header-nav .header-menu-nav .nav li a {
	display			: block;
	text-decoration		: none;
	transition		: 0.4s;
	margin			: 0;
	padding			: 0 10px 0 10px;
}

header .header-nav .header-menu-nav .nav li a:hover {
	color			: #ffffff;
}

header .header-nav .header-menu-nav .nav li a:before {
	content			: "";
	position		: absolute;
	left			: 5%;
	bottom			: 3px;
	width			: 90%;
	height			: 2px;
	background-color	: #dcdcdc;
	transform		: scale(0, 1);
	transition		: 0.4s;
}

header .header-nav .header-menu-nav .nav li a:hover:before {
	transform		: scale(1);
}

header .header-nav .header-menu-nav .current-menu-item:before,
header .header-nav .header-menu-nav .current-menu-parent:before {
	content			: "";
	position		: absolute;
	left			: 5%;
	bottom			: 3px;
	width			: 90%;
	height			: 2px;
	background-color	: #dcdcdc;
}

header .header-nav .header-menu-nav ul li.menu-item-has-children > a::after {
	content			: '';
	display			: inline-block;
	width			: 6px;
	height			: 6px;
	border-width		: 0 1px 1px 0;
	border-style		: solid;
	border-color		: #ffffff;
	transform		: rotate(45deg);
	margin			: 0 0 0 5px;
}

}/***** END 992px *****/

/*++++++++++++++++++++++++++++++++++++++++++++++*/
/* @media screen 1200px				*/
/*++++++++++++++++++++++++++++++++++++++++++++++*/

@media screen and ( min-width : 1200px ) {

/*------【Top Menu】----------------------------*/

header .header-nav .header-menu-nav .nav li a {
	display			: block;
	text-decoration		: none;
	margin			: 0;
	padding			: 0 15px 0 15px;
}

}/***** END 1200px *****/

/************************************************/
/*						*/
/*	【Home Contents】			*/
/*						*/
/************************************************/

:root {
  --black:#0b0b0d;
  --ink:#18191d;
  --muted:#6f737a;
  --line:#e6e1d8;
  --base:#f7f3ec;
  --white:#fff;
  --gold:#c99a36;
  --gold2:#e5c36d;
  --brown:#7b4e47;
  --shadow:0 26px 70px rgba(0,0,0,.16);
}

.hero {
  min-height:100vh;
  position:relative;
  display:grid;
  align-items:center;
  padding:130px clamp(22px,6vw,92px) 80px;
  overflow:hidden;
  color:var(--white);
  background:var(--black)
}

.hero-bg {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(6,6,8,.78),rgba(6,6,8,.46),rgba(6,6,8,.18)),url("../images/building-01.jpg") center/cover no-repeat;
  transform:scale(1.02)
}

.hero:after {
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:35%;
  background:linear-gradient(0deg,var(--black),transparent)
}

.hero-content {
  position:relative;
  z-index:2;
  max-width:760px
}

.eyebrow {
  margin:0 0 18px;
  color:var(--gold);
  font-family:"Cormorant Garamond",serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.22em;
  text-transform:uppercase
}

.hero h1,
.section-heading h2,
.message h2,
.service h2,
.contact h2 {
  font-family:"Noto Serif JP",serif;
  line-height:1.28;
  letter-spacing:.05em
}

.message h2,
.service h2,
.contact h2 {
  font-size:clamp(20px,2vw,24px);
  margin-bottom:20px;
}

.hero h1 {
  margin:0;
  font-size:clamp(42px,7vw,86px);
  font-weight:700
}

.lead {
  max-width:650px;
  margin:28px 0 0;
  font-size:clamp(16px,2vw,20px)
}

.hero-actions {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:38px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:170px;
  padding:13px 24px;
  border:1px solid rgba(255,255,255,.55);
  font-weight:700;
  font-size:14px;
  transition:.25s
}

.button-primary {
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  border-color:transparent;
  color:#151515
}

.button:hover {
  transform:translateY(-2px)
}

.hero-card {
  position:absolute;
  z-index:3;
  right:clamp(20px,5vw,70px);
  bottom:48px;
  width:min(330px,calc(100% - 40px));
  padding:24px 28px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(14px)
}

.hero-card span {
  font-family:"Cormorant Garamond",serif;
  color:var(--gold2);
  font-size:28px;
  font-weight:700;
  letter-spacing:.12em
}

.hero-card p {
  margin:8px 0 0;
  font-size:13px
}

.section {
  padding:clamp(76px,9vw,130px) clamp(22px,6vw,92px)
}

.section-heading {
  max-width:860px
}

.section-heading.center {
  text-align:center;
  margin:0 auto 46px
}

.section-heading h2 {
  margin:0;
  font-size:clamp(29px,4vw,48px)
}

.section-heading p:not(.eyebrow) {
  color:var(--muted);
  margin-top:18px
}

.intro {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:56px;
  align-items:start
}

.intro-text {
  font-size:18px;
  margin:0;
  margin-top:45px;
  color:#333
}

.dark-section {
  background:var(--black);
  color:var(--white)
}

.message {
  display:grid;
  grid-template-columns:minmax(280px,430px) 1fr;
  gap:clamp(36px,7vw,88px);
  align-items:center
}

.message-image {
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.15);
  overflow:hidden
}

.message-image img {
  width:100%;
  height:560px;
  object-fit:cover
}

.message-body {
  max-width:720px
}

.message-body p {
  color:#d9d9d9
}

.signature {
  margin-top:32px!important;
  color:var(--gold2)!important;
  font-weight:700
}

.works-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  grid-auto-rows:360px;
  gap:24px
}

.work-card {
  position:relative;
  overflow:hidden;
  background:#111;
  color:#fff;
  box-shadow:var(--shadow)
}

.work-card.large {
  grid-row:span 2
}

.work-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.86;
  transition:.5s
}

.work-card:hover img {
  transform:scale(1.04);
  opacity:.72
}

.work-card div {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:30px;
  background:linear-gradient(0deg,rgba(0,0,0,.82),transparent)
}

.work-card span {
  color:var(--gold2);
  font-size:13px;
  font-weight:700
}

.work-card h3 {
  font-family:"Noto Serif JP",serif;
  font-size:26px;
  margin:8px 0 2px
}

.work-card p {
  margin:0
}

.service {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:52px;
  align-items:center;
  background:#fff
}

.service-copy p:not(.eyebrow) {
  color:var(--muted)
}

.service-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px
}

.service-list span {
  padding:20px 16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#fbf8f1);
  font-weight:700;
  text-align:center
}

.process-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}

.process figure {
  margin:0;
  position:relative;
  overflow:hidden;
  background:#111
}

.process img {
  width:100%;
  height:550px;
  object-fit:cover;
  opacity:.86;
  transition:.5s
}

.process img:hover {
  transform:scale(1.04);
  opacity:.72
}

.process figcaption {
  position:absolute;
  left:24px;
  bottom:18px;
  color:#fff;
  font-weight:700
}

.company {
  background:#fdfbf7
}

.company-table {
  max-width:980px;
  margin:0 auto;
  border-top:1px solid var(--line)
}

.company-table div {
  display:grid;
  grid-template-columns:190px 1fr;
  border-bottom:1px solid var(--line);
  padding:22px 0
}

.company-table dt {
  font-weight:700;
  color:var(--gold)
}

.company-table dd {
  margin:0
}

.contact {
  background:linear-gradient(135deg,#111 0%,#241b18 100%);
  color:#fff;
  text-align:center
}

.contact-inner {
  max-width:880px;
  margin:auto;
  padding:60px 24px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05)
}

.contact-logo {
  width:170px;
  margin:0 auto 20px auto;
  padding:0
}

.contact-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:36px
}

.contact-cards a {
  display:block;
  padding:24px;
  background:#fff;
  color:#111;
  font-size:clamp(22px,3vw,34px);
  font-weight:700;
  letter-spacing:.05em
}

.contact-cards span {
  display:block;
  color:var(--gold);
  font-family:"Cormorant Garamond",serif;
  font-size:14px;
  letter-spacing:.2em
}

@media (max-width:900px) {
  .site-header {height:72px}
  .brand-logo {width:92px}
  .global-nav {display:none}
  .hero {padding-top:110px}
  .hero-card {
    position:relative;
    right:auto;
    bottom:auto;
    margin-top:42px
  }
  .intro,
  .message,
  .service {grid-template-columns:1fr}
  .works-grid {
    grid-template-columns:1fr;
    grid-auto-rows:330px
  }
  .work-card.large {grid-row:auto}
  .service-list {grid-template-columns:1fr 1fr}
  .process-grid,
  .contact-cards {grid-template-columns:1fr}
  .company-table div {
    grid-template-columns:1fr;
    gap:6px
  }
  .message-image img,
  .process img {height:380px}


.intro-text {
  margin-top:0;
}

}

@media (max-width:520px) {
  .hero h1 {font-size:38px}
  .section {padding:68px 20px}
  .service-list {grid-template-columns:1fr}
  .work-card h3 {font-size:22px}
  .contact-inner {padding:38px 18px}
  .contact-cards a {font-size:24px}
  .hero-actions .button {width:100%}
}


/************************************************/
/*						*/
/*	【Footer】				*/
/*						*/
/************************************************/

/*------【Footer Setting】----------------------*/

footer {
	width			: 100%;
	text-align		: center;
	color			: #dcdcdc;
	background-color	: #000000;
	margin			: 0;
	padding			: 0;
}

/*------【Footer SNS】--------------------------*/

footer .footer-sns-area {
	display			: flex;
	justify-content		: center;
	align-items		: center;
	margin			: 30px 0 0 0;
	padding			: 0;
}

footer .footer-sns-area .footer-sns-img,
footer .footer-sns-area .footer-sns-icon {
	width			: 70px;
	text-align		: center;
	margin			: 0;
	padding			: 0;
}

footer .footer-sns-area .footer-sns-icon a {
	color			: #dcdcdc;
	transition		: 0.25s;
}

footer .footer-sns-area .footer-sns-icon a:hover {
	text-decoration		: none;
	opacity			: 0.5;
}

footer .footer-sns-area .footer-sns-img img {
	width			: 42%;
	height			: auto;
}


/*------【Footer Logo】-------------------------*/

footer .footer-logo {
width: 250px;
	font-size		: 1.2em;
	margin			: 30px auto 0 auto;
	padding			: 0;
}

footer .footer-logo a {
	color			: #dcdcdc;
	transition		: 0.25s;
}

footer .footer-logo a:hover {
	color			: #9acd32;
}

footer .footer-logo img {
	width			: 100%x;
	height			: auto;
}

/*------【Footer Address】----------------------*/

footer .footer-address {
	text-align		: center;
	margin			: 20px 0 0 0;
	padding			: 0;
}

/*------【Footer Contact】----------------------*/

footer .footer-contact {
	border-width		: 1px 1px 1px 1px;
	border-style		: solid;
	border-color		: #d7a98c;
	margin			: 30px 10px 0 10px;
	padding			: 20px 0 20px 0;
}

footer .footer-contact .footer-contact-txt {
	margin			: 0 0 20px 0;
}

footer .footer-contact .footer-contact-tel {
	font-size		: 2.0em;
}

footer .footer-contact .footer-contact-tel a {
	color			: #d7a98c;
}

/*------【Copyright】---------------------------*/

footer .copyright {
	padding			: 30px 0 10px 0;
}

/*++++++++++++++++++++++++++++++++++++++++++++++*/
/* @media screen 576px				*/
/*++++++++++++++++++++++++++++++++++++++++++++++*/

@media screen and (min-width: 576px) {

/*------【Footer Logo】-------------------------*/

footer .footer-logo {
	font-size		: 1.5em;
}

footer .footer-contact {
	width			: 500px;
	margin			: 30px auto 0 auto;
}

}/***** END 576px *****/

/*++++++++++++++++++++++++++++++++++++++++++++++*/
/* @media screen 992px				*/
/*++++++++++++++++++++++++++++++++++++++++++++++*/

@media screen and (min-width: 992px) {

/*------【Footer Menu】-------------------------*/

footer .footer-nav ul {
	display			: flex;
	justify-content		: center;
	margin			: 30px 0 0 0;
	padding			: 0;
}

footer .footer-nav ul li {
	padding			: 0 15px 0 15px;
}

/*------【Copyright】---------------------------*/

footer .copyright {
	padding			: 30px 0 20px 0;
}

}/***** END 992px *****/