﻿@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

* {
--Size: 1px;
--mainColor: #880000;
--subColor: #BB8800;
--bgColor: #F2F1F0;
--textColor: #332C22;
--fontIcon: "Material Symbols Rounded";
--fontSetting: "FILL" 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
@media screen and (max-width: 824px) {
  * {  --Size: 0.8px  }
}

/*******************************************************

　全体

*******************************************************/
* {
  font-family: -apple-system, BlinkMacSystemFont, "游ゴシック Medium", YuGothicM, "游ゴシック体", "メイリオ", Meiryo, YuGothic, sans-serif;
  font-style: normal;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga'; 
}
html {
  font-size: var(--Size);
  color: var(--textColor);
}
body {
  margin: 0;
  padding: 0;
  font-size: 18rem;
  line-height: 160%;
	overflow-x: hidden;
  min-width: 355px;
}
.container {
  max-width: 1220px;
  min-width: 355px;
  width: 100% !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin: auto;
}

/*******************************************************

　ヘッダ

*******************************************************/
#header {
  position: fixed;
  width: 100%;
  padding: 5rem 0;
  top: 0;
  z-index: 9999;
  font-size: 16rem;
  transition: 0.5s;
}
#header.fixed {
  background: rgb(255,255,255,1);
}
@media screen and (max-width: 824px) {
  #header.fixed {
  background: rgb(255,255,255,0.6);
  transition: 0.5s;
    height: 65px;
  }
}

/*-------------------------------------
  ロゴ
-------------------------------------*/
#header .logo {
  position: absolute;
  top: -20px;
  transration: 5s;
}
#header .logo img.sp {
  display: none;
}
#header.fixed .logo {
  top: 0px;
  width: 160px;
}
#header.fixed .logo img.pc {
  display: none;
}
#header.fixed .logo img.sp {
  display: block;
}
@media screen and (max-width: 824px) {
  #header .logo {
    top: 5px !important;
    width: 200px !important;
  }
  #header .logo img.pc {
    display: none;
  }
  #header .logo img.sp {
    display: block;
  }
}

/*-------------------------------------
  グローバルナビ
-------------------------------------*/
.globalNavi, .globalNavi ul {
  display: flex;
  align-items: center;
	justify-content: flex-end;
}
.globalNavi>li>a {
  color: #000;
  padding: 10rem 20rem;
  margin-left: 1px;
  background: #FFF;
}
.globalNavi>li:hover>a, .globalNavi>li.contact>a {
  color: #FFF;
  background: var(--mainColor);
  text-decoration: none;
}
.globalNavi>li.contact:hover>a {
  background: var(--subColor);
}
.globalNavi.active {
  right: 0;
}

.spNavi {
  display: none;
  position: absolute;
  right: 0px;
  top: 20px;
}
.spNavi:before {
  content: "menu";
  font-family: var(--fontIcon);
  font-variation-settings: var(--fontSetting);
  font-size: 50rem;
  background: var(--mainColor);
  padding: 0 5rem;
  cursor: pointer;
  color: #FFF;
}
.spNavi.active:before {
  content: "close";
}


@media screen and (max-width: 824px) {
  .globalNavi {
    display: block;
    max-width: 80%;
    width: 400rem;
    z-index: 1000;
    position: fixed;
    right: -101%;
    top: 69rem;
    background: var(--mainColor);
    height: 100vh;
    transition: 0.5s;
  }
  .globalNavi li {
    border-bottom: 1rem solid rgb(255,255,255,0.2);
  }
  .globalNavi li a {
    background: none !important;
    color: #FFF !important;
	  display: block;
  }
  .spNavi {
    display: block;
  }
	.globalNavi>li:before, .globalNavi>li:after {
    display: none;
	}
}

/*******************************************************

　フッタ

*******************************************************/
#footer {
  background: var(--textColor);
  padding: 40rem 0 20rem 0;
  text-align: center;
  font-size: 16rem;
}
#footer * {
  color: #FFF;
  text-decoration: none;
}
#footer .address span {
  display: inline-block;
}
#footer .copyright {
  color: #FFF;
}
@media screen and (max-width: 824px) {
  #footer .container {
    flex-wrap: wrap;
  }
}

/*-------------------------------------
　バナーエリア
--------------------------------------*/
.bnrList {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
  margin: 0 auto 30rem auto;
}
.bnrList li {
	width: 24%;
  padding: 5rem;
  text-align: center;
}

@media screen and (max-width: 824px) {
  .bnrList li {
    width: 48%;
    padding: 5rem;
    text-align: center;
  }
}

/*-------------------------------------
　スクロールトップ
--------------------------------------*/
#scrolltop {
  position: fixed;
  right: 10rem;
  bottom: 5rem;
	z-index: 10000;
}
#scrolltop i {
  font-size: 40rem;
  line-height: 100%;
  color: #FFF;
  background: #000;
  padding: 5rem;
  border-radius: 100%;
  opacity: 0.4;
  transition: none;
  cursor: pointer;
}
#scrolltop i:hover {
  opacity: 0.6;
  transition: 0.5s;
}
@media screen and (max-width: 824px) {
  #scrolltop i, #scrolltop {
    display: none;
  }
}

/*******************************************************

　コンテンツ

*******************************************************/
#contents * {
  font-family: "Yuji Syuku", serif;
  font-weight: 400;
  font-style: normal;
}
#contents>.container {
  display: flex;
  justify-content: space-between;
}
