@charset "utf-8";

/* CSS property order convention: */
/* Layout */
/* Box Model */
/* Background & Border */
/* Typography */
/* Visual Effects */
/* Misc */

/* ########################################
配置確認用
######################################## */

/* *, ::before, ::after {
  border: 1px red dashed;
} */

/* ########################################
色 変数
######################################## */

:root {
  --textcolor: #545350;
  --basecolor: #ffffff;
  --maincolor: #3681B6;
  --accentcolor: #545350;
  --accent2color: #f3c404;
}

/* ########################################
基本スタイル
######################################## */

html {
  font-size: 100%;
}

body {
  /* Box Model */
  max-width: 1920px;
  margin: 0 auto;
  /* Background & Border */
  background-color: var(--basecolor);
  /* Typography  */
  font-size: 16px;
  line-height: 1.5;
}

a {
  color: var(--maincolor);
}

img {
  max-width: 100%;
}

ul, ol {
  list-style-position: inside;
  list-style-type: square;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 20px;
}


/* ########################################
フォント
######################################## */

@font-face {
  font-family: "caveat";
  src: url("/font/caveat.ttf") format('truetype');
  font-display: swap;
}

@font-face {
  font-family: "playfair";
  src: url("/font/playfair.ttf") format('truetype');
  font-display: swap;
}

@font-face {
  font-family: "shipporimincho";
  src: url("/font/shipporimicho.ttf") format('truetype');
  font-display: swap;
}

@font-face {
  font-family: "SawarabiGothic";
  src: url("/font/SawarabiGothic.ttf") format('truetype');
  font-display: swap;
}

@font-face {
  font-family: "ZenkakuGothicNew-Light";
  src: url("/font/ZenkakuGothicNew-Light.ttf") format('truetype');
  font-display: swap;
}

@font-face {
  font-family: "ZenkakuGothicNew-Bold";
  src: url("/font/ZenkakuGothicNew-Bold.ttf") format('truetype');
  font-display: swap;
}

@font-face {
  font-family: "ZenkakuGothicNew-Black";
  src: url("/font/ZenkakuGothicNew-Black.ttf") format('truetype');
  font-display: swap;
}

@font-face {
  font-family: "ZenkakuGothicNew-Medium";
  src: url("/font/ZenkakuGothicNew-Medium.ttf") format('truetype');
  font-display: swap;
}

@font-face {
  font-family: "ZenkakuGothicNew-Regular";
  src: url("/font/ZenkakuGothicNew-Regular.ttf") format('truetype');
  font-display: swap;
}

.caveat {
  font-family: "caveat";
}

.playfair {
  font-family: "playfair";
}

.ZenkakuGothicNew-Light {
  font-family: "ZenkakuGothicNew-Light";
}

.ZenkakuGothicNew-Bold {
  font-family: "ZenkakuGothicNew-Bold";
}

.ZenkakuGothicNew-Black {
  font-family: "ZenkakuGothicNew-Black";
}

.ZenkakuGothicNew-Medium {
  font-family: "ZenkakuGothicNew-Medium";
}

.ZenkakuGothicNew-Regular {
  font-family: "ZenkakuGothicNew-Regular";
}

/* ########################################
レスポンシブデザイン
######################################## */

@media (max-width: 1280px) {

}