/* ----------------------------------
フォント
---------------------------------- */

/* 
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1&display=swap');

Material Icons
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');

@font-face {
font-family: "crimson";
src: url("font/CrimsonText-Regular.woff2") format('woff2'),
url("CrimsonText-Regular.woff") format('woff');
}

@font-face {
font-family: "script";
src: url("font/HelloParisScript.woff2") format('woff2'),
url("font/HelloParisScript.woff") format('woff');
}

font-family: "Shippori Mincho B1", serif;
font-weight: 400;
font-style: normal;

font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
*/

@font-face {
font-family: "notera";
src: url("font/Notera2-Light.woff2") format('woff2'),
url("font/Notera2-Light.woff") format('woff');
}

@font-face {
font-family: "brittany";
src: url("font/BrittanySignature.woff2") format('woff2'),
url("font/BrittanySignature.woff") format('woff');
}

@font-face {
font-family: "mincho";
src: url("font/ShipporiMincho.woff2") format('woff2'),
url("font/ShipporiMincho.woff") format('woff');
}

/*
@font-face {
font-family: "mincho";
src: url("font/Hannari.woff2") format('woff2'),
url("font/Hannari.woff") format('woff');
}

@font-face {
font-family: "mincho";
src: local("Times New Roman"),
local("Yu Mincho"),
local("Hiragino Mincho ProN"),
local("Hiragino Mincho Pro");
}
*/

@font-face {
font-family: "number";
src: local("Times New Roman"),
local("Yu Mincho"),
local("Hiragino Mincho ProN"),
local("Hiragino Mincho Pro");
}


/* ----------------------------------
フォントサイズ
---------------------------------- */
/* 基準：1200px 1rem = 10px  */
html {
box-sizing: border-box;
font-size:clamp(8px, calc(var(--vw) / 140), 10px);
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
scroll-behavior:smooth;
}

@media (max-width:1000px){
html {
font-size: calc(var(--vw) / 107.0);
}
}

@media (max-width:900px){
html {
font-size: calc(var(--vw) / 91.4);
}
}

@media (max-width:800px){
html {
font-size: calc(var(--vw) / 81.7);
}
}

@media (max-width:700px){
html {
font-size: calc(var(--vw) / 71.7);
}
}

@media (max-width:600px){
html {
font-size: calc(var(--vw) / 61.7);
}
}

@media (max-width:500px){
html {
font-size: calc(var(--vw) / 47.1);
}
}

@media (max-width:450px){
html {
font-size: calc(var(--vw) / 44.7);
}
}

@media (max-width:400px){
html {
font-size: calc(var(--vw) / 41.7);
}
}

/* ----------------------------------
変数
---------------------------------- */
:root{
--color-text1:#2F343A; /* ブラックグレイ  */

/* グレー */
--color-gray1:#343230; /* charcoal */
--color-gray2:#565350; /* dark gray - charcoal  */
--color-gray2:#59616A; /* dark gray - blue  */
--color-gray3:#747A80; /* medium gray */
--color-gray4:#A0A5AA; /* soft gray */
--color-gray5:#D9DCDE; /* light gray */
--color-gray6:#F1F2F3; /* pale gray */
--color-gray7:#FAFAFA; /* off white */

/* ピンク */
--color-pink1:#B98C82; /* ローズ・ピンク  */
--color-pink2:#E6D7CF;
--color-pink3:#faf4f2;
--color-pink4:#B98287; /* ダスティ・ピンク */

/* グレージュ */
--color-greige1:#A3938C;
--color-greige2:#D8CFCA;
--color-greige3:#F4F0ED;

/* ゴールド */
--color-gold1:#B39F62;
--color-gold2:#D6CBA3;
--color-gold3:#F7F3E6;

/* セージ */
--color-sage1:#7F8B7B;
--color-sage2:#CDD3C9;
--color-sage3:#F0F2EE;

/* ネイビー */
--color-navy1:#566170;
--color-navy2:#B9BEC6;
--color-navy3:#EFF1F3;

/* レッド */
--color-red1: #9f3f43;
--color-red2: #B85D60;
--color-red3: #E6C4C6;

/* ライン */
--color-line1:#dfe3e8; /* 薄グレー */
--color-line2:#d5d9db; /* 中グレー */
--color-line3:rgba(110, 122, 133,.65); /* 中グレー */
--color-line4:rgba(110, 122, 133,.95); /* 濃グレー */

/* 横幅 */
--width-max1:1200px;
--width-max2:800px;
--width-max3:500px;

/* 背景 */
--bg1:#FFF; 
--bg2:#f6f9f9 url('/2026-image/texture/bg4.png') repeat;
--bg3:#ecefef url('/2026-image/texture/bg9.png') repeat;
}


/* ----------------------------------
背景
---------------------------------- */
.bg1{
background:var(--bg1);
}
.bg2{
background:var(--bg2);
}
.bg3{
background:var(--bg3);
}
.bg4{
background:var(--color-gray1);
}


/* ----------------------------------
基本設定
---------------------------------- */
body {
font-family: sans-serif;
font-optical-sizing: auto;
font-size:1.6rem;
line-height: 1.9;
color:var(--color-text1);
padding:0;
margin:0;
box-sizing: border-box;
}

a{
color:#1A1A1A;
cursor: pointer;
text-decoration: none;
}

h1,h2,h3,h4,h5,h6,a,p,ul,ol,li,input,select,button{
font-weight:normal;
box-sizing: border-box;
line-height:1;
padding:0;
margin:0;
}

dl,dt,dd,th,td,textarea{
box-sizing: border-box;
}

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

/* Safariで挙動する
*, *::before, *::after {
font-size:inherit;
line-height:inherit;
box-sizing: inherit;
}
*/

ul, ol{
padding:0;
margin:0;
list-style-type:none;
list-style-position:outside;
}

img{
width:100%;
height:auto:
}

table, td, th{
border-spacing:0px;
border-collapse:collapse;
border:0px;
padding:0px;
}

.sp-only{
display:none;
}

@media (max-width:500px){
.sp-only{
display:block;
}
}

@media (max-width:500px){
.pc-only{
display:none;
}
}

/* -------------------------------
ハンバーガーメニュー対策
---------------------------------- */
body{
overflow-x:hidden;
}

@supports (overflow: clip){
body{
overflow-x:clip;
}
}

body.menu-open{
overflow:hidden;
height:100vh;
}


/* ----------------------------------
now loading
---------------------------------- */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 9999;
background-color: #FFF;
display: grid;
place-items: center;
opacity: 1;
visibility: visible;
transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* ローディング本体 */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 10000;
margin: auto;
width: 88px;
height: 88px;
border-radius: 50%;

/* 円＋切り欠き */
border: 2px solid rgba(0,0,0,0.15);
border-top-color: #000;
border-right-color: #000;

animation: loader-spin 1.1s linear infinite;
transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* ロード完了で消す */
body.siteReady::before,
body.siteReady::after {
opacity: 0;
visibility: hidden;
}

/* 回転アニメーション */
@keyframes loader-spin {
to {
transform: rotate(360deg);
}
}