@charset "UTF-8";
/* CSS Document */

/**********************************************************
* CSS表記
**********************************************************/
:root {
  --black: #333333;
  --main-color: #9f9122;
  --back-color: #f1efde;
  --font-ja: yu-mincho-pr6n, sans-serif;
  --font-en: p22-mackinac-pro, serif;

  --clamp-10-7rem: clamp(7rem,13vw,10rem);
  --clamp-20-10rem: clamp(10rem,26vw,20rem);
  --contents-width: min(100% - 6rem,720px);
}

html {font-size: 62.5%;}
body {
  color: var(--black); font-family: var(--font-ja);
  font-size: 1.6rem; line-height: 2;
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
  font-feature-settings: "palt";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--back-color);
}
main{overflow: clip;}
img {pointer-events: none;}
@media (width < 768px) {body {font-size: 1.4rem;}}

/******　PC、スマホ・タブレット オンリー仕様　******/
@media (width < 768px) {.pc_only {display: none;}}
@media not all and (width < 768px) {.sp_only {display: none;}}

/**********************************************************
* Site Frame
**********************************************************/
.frame__container{
position: relative;
}
header{
  position: fixed; inset: 0 auto 0 0; z-index: 10;
}
.main__contents{
  position: absolute; inset: 0 0 auto auto; z-index: 5;
  width: calc(100% - min(28vw,280px)) !important;
}
@media (width < 768px) {
  header{
    inset: 0 0 0 auto;
  }
  .main__contents {
    position: relative;
    width: 100% !important;
  }
}
/**********************************************************
* Side Menu
**********************************************************/
.sideMenu__contents{
  display: flex; flex-direction: column; 
  justify-content: space-between; align-items: start;
  width: min(28vw,280px); height: 100vh;
  background-color: #ffffff;
  padding: min(2.8vw,40px);
  overflow-y: scroll;
}
.sideMenu__main{
	display: flex; flex-direction: column; 
  gap: clamp(4rem,5vw,6rem);
}
.sideMenu__main h1 img{
  width: 100%;
}
.sideMenu__mainLink,
.sideMenu__subLink{
	display: flex; flex-direction: column; 
  align-items: start;
	line-height: 1;
}
.sideMenu__mainLink{
	gap: clamp(2.5rem,3.5vw,3.5rem);
}
.sideMenu__subLink{
	gap: clamp(1.5rem,2vw,2.5rem);
	font-size: 1.3rem;
}
.sideMenu__mainLink li a{
	display: inline;
	position: relative;
}
.sideMenu__mainLink li a::before{
	content: "";
	position: absolute; inset: auto auto -8px 0;
	display: inline-block;
	width: 10px; height: 1px;
	background-color: var(--black);
	transform-origin: center left;
	transition: all 0.3s ease-in-out;
}
.sideMenu__subLink li a{
	transition: all 0.3s ease-in-out;
}
.sideMenu__btn{
	display: grid; place-items: center;
	flex-shrink: 0;
	width: 100%; height: 3em;
	line-height: 1;
	border: solid 1px var(--black);
	margin-top: 6rem;
	transition: all 0.3s ease-in-out;
}
.hdr__hamburger{
  display: none;
}
@media (hover){
  .sideMenu__mainLink li a:hover:before{
    width: 100%;
  }
  .sideMenu__subLink li a:hover{
    color: var(--main-color);
  }
	.sideMenu__btn:hover{
		color: #ffffff;
		background-color: var(--black);
	}
}
@media (hover) and (width < 768px){
  .sideMenu__mainLink li:hover a {
    background-color: #f4f4f4;
  }
}
@media (width < 768px) {
  .scrollBlock{overflow: hidden;}
  .sideMenu__contents{
    align-items: center;
    width: 100vw;
    padding: 3.5rem 0 2rem;
    transform-origin: center right;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
  }
  .sideMenu__contents.active{
    visibility: visible;
    opacity: 1;
  }
  .sideMenu__main{
    width: 100%;
  }
  .sideMenu__main h1 img {
    width: 200px;
    margin: 0 auto;
  }
  .sideMenu__mainLink,
  .sideMenu__subLink{
    line-height: 1;
  }
  .sideMenu__mainLink{
    gap: 0;
    font-size: 2rem;
  }
  .sideMenu__subLink{
    flex-direction: row;
    justify-content: center;
    gap: 4rem;
  }
  .sideMenu__mainLink li{
    width: 100%;
    border-bottom: solid 1px var(--black);
  }
  .sideMenu__mainLink li:first-child{
    border-top: solid 1px var(--black);
  }
  .sideMenu__mainLink li a{
    display: block;
    text-align: center;
    padding: 2rem;
  }
  .sideMenu__mainLink li a::before{
    display: none;
  }
  .sideMenu__btn{
    width: min(100% - 40px,400px);
    font-size: 1.6rem;
    margin-top: 3.5rem;
  }
  .sideMenu__mainLink li:active a {
    background-color: #f4f4f4;
  }
  .sideMenu__subLink li a:active {
    color: var(--main-color);
  }
  .sideMenu__btn:active {
    color: #ffffff;
    background-color: var(--black);
  }
  .hdr__hamburger {
    position: absolute; inset: 10px 10px auto auto;
    display: block;
    width: 6rem; height: 6rem;
    border-radius: 50%;
    background-color: #ffffff;
  }
  .hdr__hamburger span{
    position: absolute; left: 50%;
    display: inline-block;
    width: 16px; height: 1px;
    background-color: var(--black);
    transform: translateX(-50%);
    transition: all 0.2s;
  }
  .hdr__hamburger span:nth-child(1){
    top: 20.5px;
  }
  .hdr__hamburger span:nth-child(2){
    top: 28.5px;
  }
  .hdr__hamburger span:nth-child(3){
    top: 28.5px;
  }
  .hdr__hamburger span:nth-child(4){
    top: 36.5px;
  }
  .hdr__hamburger.active span:nth-child(1){
    opacity: 0;
  }
  .hdr__hamburger.active span:nth-child(2){
    transform: translateX(-50%) rotate(-45deg);
  }
  .hdr__hamburger.active span:nth-child(3){
    transform: translateX(-50%) rotate(45deg);
  }
  .hdr__hamburger.active span:nth-child(4){
    opacity: 0;
  }
}
/**********************************************************
* footer
**********************************************************/
.footer{
  color: #ffffff;
  background-color: var(--main-color);
  padding: clamp(2.5rem,6.5vw,5rem) clamp(2.5rem,6.5vw,5rem) 2rem;
}
.footer__logo{
  width: clamp(20rem,36.5vw,28rem);
  margin-bottom: 4rem;
}
.footer__address__list{
  display: flex;
  flex-direction: column;
  gap: 3rem;
  font-size: 1.4rem;
  text-align: left;
  margin-bottom: 7rem;
}
.footer__address__items{
  word-break: keep-all;
}
.footer p{
  display: inline-block;
  width: 100%;
  font-size: 1.1rem;
  line-height: 1;
  text-align: right;
}