@charset "utf-8";
@import url("reset.css");
@import url("https://use.fontawesome.com/releases/v5.15.4/css/all.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap');


/*============================================================
common
============================================================*/

/* body ----------*/
body {
  font-family:'Noto Sans Japanese',yugothic,yu gothic,'游ゴシック',hiragino kaku gothic pron,meiryo,sans-serif;
  font-size:var(--fs-ms);
  line-height:1.6;
  font-weight:500;
  color:#333;
}

body.nav-open { overflow:hidden; }

/* html remを使用する場合----------*/
html { font-size:62.5%; }
@media screen and (max-width:720px) {
	html { font-size:56.3%; }
}
@media screen and (max-width:560px) {
	html { font-size:50%; }
}

/* a ----------*/
a { text-decoration:none; transition:all 0.3s ease-out; }
a:link, a:visited { transition:all 0.3s ease-out; }
a:hover, a:active { opacity:0.6; }
a.no-link { pointer-events:none; position:relative; }
a.no-link:after { content:""; display:block; position:absolute; width:100%; height:100%; top:0; background:rgba(255,255,255,.8); }
nav a.no-link { color:rgba(0,0,0,.4); }
nav a.no-link:after { background:rgba(229,237,238,.3); }
footer a.no-link:after { background:rgba(239,239,239,.8); }
@media screen and (min-width:820px) {
	a[href^="tel:"] { pointer-events: none; }
}

/* ul ----------*/
ul { list-style:none; }

/* img ----------*/
img { width:100%; max-width:100%; height:auto; display:block; }

/* small ----------*/
small { display: inline-block; font-size:80%; font-weight:normal; vertical-align:baseline; opacity:0.7; }

/* table ----------*/
table { border-collapse: collapse; border-spacing: 0; }
.table { width:100%; border:solid 1px #DDD; }
.table tr {}
.table th { padding:1rem; background-color:#f6f6f6; vertical-align:middle; }
.table td { padding:1rem; vertical-align:middle; }

/* text-align ----------*/
.tc { text-align:center; }
.tr { text-align:right; }
.tl { text-align:left; }

/*============================================================
common parts
============================================================*/
.inner { max-width:132rem; width:100%; margin:0 auto; padding:0 2rem; }

/* font */
.hidden-tx { display:none; }
.mono { font-family: "Noto Sans Mono CJK JP", monospace; }
.serif { font-family: "Noto Serif CJK JP", serif; }

/* scroll area */
.scroll { overflow:auto; white-space:nowrap; }
.scroll::-webkit-scrollbar{ height:5px; }
.scroll::-webkit-scrollbar-track{ background:#969696; }
.scroll::-webkit-scrollbar-thumb { background:#242424; }

/* fade animation ----------*/
.fade { opacity:0; transition:all 1s ease-out; }
.fade-left { transform:translateX(-100%); }
.fade-right { transform:translateX(100%); }
.fade-up { transform:translateY(100px); }
.fade-down { transform:translateY(-100px); }
.fade.active {
  transform:translate(0,0)!important;
  opacity:1!important;
}

/* title -----*/
h1 {}
h2 {}
h3 {}
h4 {}

/* responsive -----*/
.pc-only { display:block!important; }
.pc { display:block!important; }
.mid-only { display:none!important; }
.mid { display:none; }
.sp-only { display:none!important; }
.min-only { display:none!important; }
@media screen and (max-width:768px){
  .pc-only { display:none!important; }
  .mid-only { display:block!important; }
  .mid { display:block!important; }
}
@media screen and (max-width:600px){
  .pc , .pc-only , .mid-only { display:none!important; }
  .sp-only { display:block!important; }
}
@media screen and (max-width:375px){
  .min-only { display:block!important; }
}

/*============================================================
contents parts
============================================================*/

/* header ----------*/
header { position:fixed; top:24px; left:24px; z-index:9999; }
header img { max-width:77px; width:100%; }

@media screen and (max-width:600px){
  header { top:12px; left:12px; }
}