@charset "utf-8";
/*==========================================================================

   browser reset

==========================================================================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
header, hgroup, footer, section, article, details, menu, nav, aside, figure, figcaption {
    display: block;
}
a, a:focus {
    outline: none;
}
img, hr {
    border: none;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: collapse;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
}
strong {
    font-weight: bold;
}
svg {
    fill: currentColor;
    vertical-align: bottom;
}


/*==========================================================================

   variable set

==========================================================================*/
:root {
	/* font */
	--font-ja: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	--font-en: "Cormorant Garamond", serif;
	--font-en2: "Libre Baskerville", serif;
	--base-font-size: 14px;
	--flex-font-size-s: 18px; /* sp:18 → pc:20 */
	--flex-font-size-m: 20px; /* sp:20 → pc:24 */
	--flex-font-size-l: 22px; /* sp:22 → pc:26 */

	/* color */
    /*--theme-color: #000; */
	--text-color: #222;
	--bg-color: #faf8f4;
	--main-color: #000;
	--accent-color: #eae7de;

	/* space */
	--header-height: 57px;
    --container-width: 100%;
    --container-side-space: 20px;
	--section01-padding: 86px 0;
	
	/* animation */
	--transition-duration: .3s;
}

@media screen and (min-width: 769px) {
	:root {
		--base-font-size: 16px;
		--header-height: 87px;
		--container-width: 1020px;
	}

}


/*

文字サイズがSPとPCで変わる場所

p-access-guide-content-title 15 / p-access-guide-content-title 18
p-top-section__ttl 17 / p-top-section__ttl 20

p-top-brand__text 18

index-kv__txt　24 / index-kv__txt　36

p-page-section01-header 46 / p-page-section01-header 140
page-kv-label 48

p-top-section__label*sp en36 / p-top-section__label en58

*/

/*==========================================================================

   base set

==========================================================================*/
html {
    scroll-behavior: smooth;
}
:target {
  scroll-margin-top: var(--header-height); /* ページ内スクロール時、固定ヘッダー分をずらす */
}

body {
    position: relative;
    color: var(--text-color);
    font: 400 var(--base-font-size)/1.7 var(--font-ja);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    background: var(--bg-color);
}
a {
    color: #000;
    text-decoration: none;
    transition: color var(--transition-duration), background-color var(--transition-duration);
}
a:hover {
    color: var(--key-color);
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
* {
    box-sizing: border-box;
}


/*==========================================================================

   utility style

==========================================================================*/
.u-font-en01 {font-family: var(--font-en);}
.u-font-en02 {font-family: var(--font-en2);}

.u-align-center { text-align: center;}
.u-align-left { text-align: left;}
.u-align-right { text-align: right;}

