@charset "UTF-8";
/* media query : mobile */
@media screen and (max-width:768px) {
}
/* media query : desktop */
@media screen and (min-width:769px) {
}
/* media query : tablet */
@media screen and (min-width:769px) and (max-width:1024px){
}
/*==============================================================
>>> COMMON CONTENTS 
----------------------------------------------------------------
1.0 Common
  1.1 Reset
  1.2 Layout
  1.3 Common
2.0 Header
  2.1 top
  2.2 logo
  2.3 nav
4.0 Main
  1.1 Main
  1.2 MV
  1.3 H,P,etc
4.0 Home
5.0 Page
6.0 Archive
7.0 Single
8.0 Etc
  8.1 CV
  8.2 SNS
  8.3 Breadcrumb
9.0 Footer
  9.1 nav
  9.2 terms
  9.2 copyright
==============================================================*/
/* 注意
  汎用classは単独で使わないように
  index, top, page, detail, inner
--------------------------------------------------------------*/
/*==============================================================
1.0 Common
--------------------------------------------------------------*/
/* 1.1 Reset
--------------------------------------------------------------*/
:root {
    /* font */
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Noto Sans JP', sans-serif;

    /* color */
    --black: #000;
	--white: #FFF;

    --main: #bc9c6d;
    --gray: #666;
    --dark: #1a1a1a;
    
    /* bg */
    --bg: #fdfcfb;
    --bgc: #f8f7f5;
    --fbg: #fcfbf9;

    --accent: #4a5568;
    --border-color: #e5e5e5;

    /* layout */
	--header-height: 7rem;
	--header-height-sp: 4.7rem;
	--max-mid: 65rem;
	
	/* style */
	--radius-small : 0.5rem;
	--radius-mid : 1rem;
	--radius-big : 5rem;
	--shadow-center : 0rem 0rem 2rem rgb(0 0 0 / 5%);

   
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
	font-size: 14px;
	letter-spacing: 2px;
	line-height: 2;
}
@media screen and (min-width:769px) and (max-width:1280px){
	html {
		font-size: 1.16vw;
	}
}
body {
    background-color: var(--bg);
    color: var(--dark);
    font-family: var(--font-sans);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}
a {
	color:var(--black);
	transition: var(--trans-short);
}
a:link {
	color:var(--black);
}
a:visited {
	color:var(--black);
}
a:hover {
	transition: var(--trans-short);
}
::selection {
	background: var(--main);
	color: var(--white);
}
::-moz-selection {
	background: var(--main);
	color: var(--white);
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	width: 100%;
	max-width: 100%;
	height: auto;
}
.cf:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
figure {
	margin-bottom: 0;
	line-height: 1;
}
/* 1.2 Layout
--------------------------------------------------------------*/
.container {
    width: 100%;
}
.section.bgc {
	margin-top: 0;
	margin-bottom: 0;
	background: var(--bgc);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
/* media query : mobile */
@media screen and (max-width: 768px) {
	.pc {
		display: none;
	}
	.section {
		margin-top: 4rem;
		margin-bottom: 4rem;
	}
	.section.bgc {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
    .section.banner {
        padding-top: 8rem;
		padding-bottom: 8rem;
    }
	.container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}
/* media query : desktop */
@media screen and (min-width:769px) {
	.sp {
		display: none; 
	}
	.section {
		margin-top: 7rem;
		margin-bottom: 7rem;
	}
	.section.bgc {
		padding-top: 7rem;
		padding-bottom: 7rem;
	}
    .section.banner {
        padding-top: 15rem;
		padding-bottom: 15rem;
    }
	.container {
		max-width: 91rem;
		padding-left: 2.5rem;
		padding-right: 2.5rem;
		margin-left: auto;
		margin-right: auto;
	}
	.container.max-mid {
		max-width: var(--max-mid);
	}
}
/* 1.3 Common
--------------------------------------------------------------*/
/* h1,h2,h3,h4 */
h1,h2,h3,h4 {
	font-family: var(--font-serif);
    font-weight: 400;
}
.sub-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--main);
    margin-bottom: 20px;
}
/* p */
p.desc {
	margin-bottom: 2rem;
}
p.attention {
	font-size: 80%;
	line-height: 1.5;
}
.text-center {
    text-align: center;
}
.text-white {
    color: var(--white);
}
/* img-box */
.img-box {
	display: block;
	margin: 0;
	width: 100%;
}
.img-box:before {
	display: block;
    content: "";
	padding-top: 65%;
}
.img-box img {
	position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}
/* card-box */
.card-box {
	padding: 2rem 2.5rem;
	border-radius: var(--radius-mid);
	background: var(--white);
	overflow: hidden;
}
.card-img {
	border-radius: var(--radius-mid);
	overflow: hidden;
}
/* box-shd */
.box-shd {
    box-shadow: var(--shadow-center);
}
/* block-center */
.block-center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
/* button */
.button {
	display: block;
	width: 100%;
}
.button a {
    font-weight: 400;
    display: block;
    background: var(--main);
    color: var(--white);
    padding: 0.5rem 2.5rem 0.5rem 0.5rem;
    border-radius: var(--radius-mid);
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.button a:after {
	content: "";
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    right: 1.5rem;
    top: calc(50% - 0.4rem);
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    transform: rotate(45deg);
}
/* media query : mobile */
@media screen and (max-width:768px) {
	.button {
		max-width: 100%;
	}
}
@media screen and (min-width:769px) {
	.button {
		max-width: 26rem;
	}
}
.arrow-link {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--text-dark);
    padding-bottom: 5px;
}
.arrow-link::after {
    content: " →";
}
.arrow-underline {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    border-bottom: 1px solid #ccc;
}
/* fade */
.fadeUp {
    opacity: 0;
    transform: translate(0, 8rem);
    transition: transform 1000ms, opacity 1200ms;
}
.fadeLeft {
    opacity: 0;
    transform: translate(-8rem, 0);
    transition: transform 1000ms, opacity 1200ms;
}
.fadeRight {
    opacity: 0;
    transform: translate(8rem, 0);
    transition: transform 1000ms, opacity 1200ms;
}
.fadeUp.appear {
    opacity: 1;
    transform: translate(0, 0);
}
.fadeLeft.appear {
    opacity: 1;
    transform: translate(0, 0);
}
.fadeRight.appear {
    opacity: 1;
    transform: translate(0, 0);
}
/*==============================================================
2.0 Header
--------------------------------------------------------------*/
header {
    background: white;
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
}
.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* header-logo */
.header-logo {
    width: 100%;
    display: flex;
    align-items: center;
}
.header-logo a {
    display: inline-block;
    width: 100%;
    line-height: 0;
    height: auto;
}
/* header-nav */
.header-nav {
    display: flex;
    align-items: center;
}
#menu-header,
#menu-header-jp {
    display: flex;
}

/* header-lang */
.header-lang a {
    border: 1px solid var(--border-color);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.6rem;
}
/* media query : mobile */
@media screen and (max-width:768px) {
    .header-logo {
        max-width: 15rem;
    }
    .header-nav {
        flex-direction: row-reverse;
        gap: 0.5rem;
    }
    .header-trigger {
        border: 1px solid var(--border-color);
        width: 2.6rem;
        height: 2.6rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.4rem; 
    }
     .header-trigger span {
        display: block;
        width: 1.5rem;
        height: 1px;
        background: var(--dark);
     }
    .menu-header-container,
    .menu-header-jp-container {
        display: none;
    }
    .header-lang a {
        width: 2.6rem;
    }
    /* active */
    .header-trigger.active {
        z-index: 200;
        border-color: var(--white);
    }
    .header-trigger.active span {
        visibility: hidden;
        background: var(--white);
    }
    .header-trigger.active span:first-child {
        rotate: 45deg;
        top: 18%;
        visibility: visible;
    }
    .header-trigger.active span:last-child {
        rotate: -45deg;
        top: -18%;
        visibility: visible;
    }
    .menu-header-container.active,
    .menu-header-jp-container.active {
        position: fixed;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.7);
    }
    .menu-header-container.active #menu-header,
    .menu-header-jp-container.active #menu-header-jp{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;
    }
    .menu-header-container.active a,
    .menu-header-jp-container.active a {
        color: var(--white);
        font-size: 2.4rem;
        font-family: var(--font-serif);
    }
    
}
/* media query : desktop */
@media screen and (min-width:769px) {
    .header-logo {
        max-width: 21rem;
    }
    .header-nav {
        gap: 4rem;
    }
    .header-trigger {
        display: none;
    }
    #menu-header,
    #menu-header-jp {
        gap: 2rem;
    }
    #menu-header a,
    #menu-header-jp a {
        font-size: 0.75rem;
        letter-spacing: 0.1em;
    }
    .header-lang a {
        width: 4.6rem;
    }
}
/*==============================================================
3.0 Main
--------------------------------------------------------------*/
/* 1.1 main
--------------------------------------------------------------*/
.main {
    overflow: hidden;
}
/* 1.2 MV
--------------------------------------------------------------*/
/* 1.3 Common
--------------------------------------------------------------*/


/*==============================================================
4.0 Home
--------------------------------------------------------------*/

/*==============================================================
5.0 Page
--------------------------------------------------------------*/
/* 6.0 page.css
--------------------------------------------------------------*/

/*==============================================================
6.0 Archive
--------------------------------------------------------------*/
/* 6.0 archive.css
--------------------------------------------------------------*/

/*==============================================================
7.0 Single
--------------------------------------------------------------*/
/* 7.0 single.css
--------------------------------------------------------------*/

/*==============================================================
8.0 Etc
--------------------------------------------------------------*/
/* 8.1 Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
	background: var(--white);
	color: var(--black);
	padding-top: 2rem;
	padding-bottom: 2rem;
	font-size: 0.825rem;
	line-height: 1;
    border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.breadcrumbs .container {
	max-width: 100%;
}
/* media query : mobile */
@media screen and (max-width:768px) {

}
/* media query : desktop */
@media screen and (min-width:769px) {

}
/* 8.2 CV
--------------------------------------------------------------*/

/*==============================================================
9.0 Footer
--------------------------------------------------------------*/
/* Footer */
footer {
    background-color: var(--fbg);
}
.footer-logo h2 {
    font-size: 1.5rem;
    letter-spacing: 0.2em;
}
.footer-logo small {
    margin-top: 20px;
    font-size: 0.8rem;
    color: var(--main);
}
.footer-nav a {
    font-size: 0.75rem;
    display: block;
    margin-bottom: 15px;
    letter-spacing: 0.1em;
}
.footer-contact p {
    font-size: 0.8rem;
    margin-bottom: 10px;
}
/* 9.4 copyright
--------------------------------------------------------------*/
.footer-copyright {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--border-color);
    margin-top: 4rem;
    padding-top: 2rem;
    font-size: 0.7rem;
    color: #999;
}

/* 9.2 terms
--------------------------------------------------------------*/


/* 9.3 Social
--------------------------------------------------------------*/
/* 9.5 Storking-menu
--------------------------------------------------------------*/