@charset "utf-8";
@import url("reset.css");
@import url("https://use.fontawesome.com/releases/v5.15.4/css/all.css");

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

/* body ----------*/
body {
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size:1.6rem;
  line-height:1.6;
  color:#231815;
}

/*body.nav-open { overflow:hidden; }*/

section { margin-top:15rem; }
section:first-child { margin-top:0; }
section:last-child { margin-bottom:15rem; }
@media screen and (max-width:600px){
  section { margin-top:8rem; }
  section:last-child { margin-bottom:10rem; }
}

/* 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%; }
}
main { overflow:hidden; }

/* 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); }
@media screen and (min-width:820px) {
	a[href^="tel:"] { pointer-events: none; }
}

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

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

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


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

/* font ----------*/
.font_mincho { font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
.font_goth { font-family:"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

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

/* 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; }
.tc { text-align:center; }

/* 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 { text-align:center; }
h2 img { max-height:9rem; }
h3 { font-size:2.2rem; font-weight: bold; margin-bottom:2rem; }
h3 span { display:block; color:#9d7540; font-size:1.2rem; }
h4 {}

@media screen and (max-width:900px){
  h2 img { max-height:6rem; }
}
@media screen and (max-width:600px){
  h2 img { max-height:5rem; }
}

/* 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; }
.br1000 {}
@media screen and (max-width:1000px){
  .br1000 { display:none; }
}
@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; z-index:9999; width:100%; top:0; left:0; }
#header header { background:#fff; }
#header header h1 { max-width:8rem; width:100%; }
#header header .menu { display:flex; border-bottom:solid 2px #bcbec0; }
#header header .menu h1 { padding:1rem; }
#header header .menu ul { display:flex; align-items:center; margin-left:auto; }
#header header .menu ul li { flex-grow:1; margin-right:4rem; }
#header header .menu ul li:last-child { background:#C29858; margin-right:0; height:100%; }
#header header .menu ul li:last-child a {
  color:#fff;
  display:flex;
  width:7rem;
  height:100%;
  justify-content:center;
  align-items:center;
  font-size:3rem;
}
#header header .menu ul li:last-child a img { max-width:50%; width:100%; }
#header .mail-link {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#c29858;
  display:none;
  z-index:100;
}
#header .mail-link a {
  display:flex;
  justify-content:center;
  align-items:center;
  padding:1rem 0;
  text-align:center;
}
#header .mail-link a p { color:#fff; margin-left:1rem; }
#header .mail-link a img { max-width:25px; }

/* sp-menu */
#header .sp-cont { display:none; }
nav { display:none; }
#sp-menu { display:none; position:relative; right:0; top:0; width:4.5rem; height:4.5rem; cursor:pointer; text-align:center; }
#sp-menu div { position: relative; display: block; width: inherit; height: inherit; }
#sp-menu div:after, #sp-menu span:before, #sp-menu span:after { 
  position: absolute;
  left:50%;
  content: "";
  display: block;
  width:80%;
  height:3px;
  background-color:#242424;
  transform:translateX(-50%);
  transition: all 0.3s ease-out;
}
#sp-menu div:after { top:0%; }
#sp-menu span:before { top:25%; }
#sp-menu span:after { top:50%; }
#sp-menu p { position:absolute; bottom:0; left:50%; transform:translateX(-50%); font-size:1.2rem; line-height:1; color:#242424; }
#sp-menu.open div:after { top:calc(25% - 1.5px); -webkit-transform:translateX(-50%) rotate(135deg); transform:translateX(-50%) rotate(135deg); }
#sp-menu.open span:before { opacity: 0; }
#sp-menu.open span:after { top: calc(25% - 1.5px); -webkit-transform:translateX(-50%) rotate(-135deg); transform:translateX(-50%) rotate(-135deg); }

#nav {
  position:fixed;
  top:6.5rem;
  left:0;
  background:rgba(239,239,239,.9);
/*  background:rgba(194,152,88,.2);*/
  width:100%;
  transform:translateX(100%);
  transition:all .6s ease-in-out;
  z-index:9999;
  display:block;
}
#nav.active { opacity:1; transform:translateX(0%); }
#nav ul { display:flex; flex-wrap:wrap; margin:1rem; }
#nav ul li { width:50%; text-align:center;  }
#nav ul li a { display:block; font-size:1.8rem; background:#fff; padding:1.5rem 0; color:#c29858; }
#nav ul li:nth-of-type(n+3) { border-top:solid 1px #c29858; }
#nav ul li:nth-child(1),#nav ul li:nth-child(3) { border-right:solid 1px #c29858; }
#nav ul li:last-child { width:100%; }
#nav ul li:last-child a { background:#c29858; }
#nav ul li:last-child a img { max-width:4rem; }

@media screen and (max-width:600px){
  #header header {  }
  #header header .menu { align-items:center; height:6.5rem; padding:0 2rem; }
  #header header .menu ul { display:none; }
  #header header .menu h1 { padding:0; }
  #header .sp-cont { 
    height:6rem;
    display:flex;
    align-items:center;
    padding:0 2rem;
    justify-content:space-between;
    background:rgb(255,255,255,.65);
    transition:all .4s ease-out;
  }
  .nav-open #header .sp-cont { background:rgb(255,255,255,.9); }
  #header .sp-cont h1 { width:40%; }
  #header .mail-link { display:block; }
  
  #sp-menu { display:block; margin-left:auto; }
}


/* -----------------------------------
footer
----------------------------------- */
footer { }
footer ul { display:flex; align-items:center; margin-left:calc(50% - 50vw); }
footer ul li.img { max-width:96rem; width:100%; }
footer ul li.tx { padding:0 8rem; max-width:60rem; width:100%; }
footer ul li.tx .logo { max-width:21rem; width:100%; margin:0 auto 5rem; }
footer ul li.tx .menu { display:flex; }
footer ul li.tx .menu div { flex-grow:1; }
footer ul li.tx .mail { background:#c29858; text-align:center; max-width:21rem; width:100%; margin:3rem auto 15%;}
footer ul li.tx .mail a { display:block; padding:1rem 0; }
footer ul li.tx .mail img { max-width:3.5rem; }
footer ul li.tx copyright { font-size:1.2rem; text-align:center; display:block; }

@media screen and (max-width:900px){
  footer ul { display:block; margin:5rem calc(50% - 50vw) 3rem; }
  footer ul li.tx { margin:2rem auto 0; }
}
@media screen and (max-width:600px){
  footer ul { margin-bottom:7rem; }
  footer ul li.tx { padding:0 2rem; }
  footer ul li.tx .logo { max-width:15rem; margin:0 auto 3rem; }
  footer ul li.tx .menu div { text-align:center; }
  footer ul li.tx .mail { margin:3rem auto 5rem; }
}

/*============================================================
animation parts
============================================================*/
.scroll-area { position:absolute; left:50%; transform:translateX(-50%); bottom:10%;  }
.scroll { display: inline-block; padding-top:10rem; position:relative; }
.scroll::before {
  animation:scroll 3.5s infinite;
  border:solid #9d7540;
  border-width: 0 0 1px 1px;
  content: "";
  display: inline-block;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: rotate(-45deg);
  width:4rem;
  height:4rem;
}
.scroll span { color:#9d7540; }
@keyframes scroll {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  80% {
    transform: rotate(-45deg) translate(-30px, 30px);
  }
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}