@charset "UTF-8";

/* リセット */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}
/* 2. Remove default margin */
* {
  margin: 0;
}
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}
/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}
/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* 共通 */
/* 定義 */
:root{
    --main-color: #C46F3A;
    --main-opacity: #D08C61;
    --text-color:#FFF6F6;
    --black:#041415;
    --white:#FDF6F6;
    --gray:#C7C7C7;
}

/* 基本フォントの設定 */
/* フォントサイズの相対指定 */
html{
    font-size: clamp(14px, 16px, 20px);
}
h1{
  font-size: clamp(1.5rem, 3vw, 4rem);
}
h2 {
    font-size: clamp(1.5rem,2vw,1.8rem);
}
h3 {
  font-size: clamp(1.5rem, 1.8rem, 2rem);
}
h4{
  font-size: clamp(1rem, 1.5vw, 2rem);
}
p {
  font-size: clamp(0.8rem, 1.8vw, 1.125rem);
}
dt{
    font-size: clamp(1rem, 2vw, 1.4rem);
}
dd{
  font-size: clamp(0.8rem, 1.8vw, 1.125rem);
}
a {
  font-size: clamp(.5rem, 1.5vw, 1.2rem);
  text-decoration: none;

}
li {
  font-size: clamp(.5rem, 1.5vw, 1.2rem);
  text-decoration: none;
  list-style: none;

}
small {
  font-size: clamp(0.6rem, 0.8rem, 1rem);
}
button{
    font-size: clamp(.8rem, 1vw, 2rem);
}

/* 基本フォントの設定 */
*{
    font-family: "hiragino-mincho-pron","sans-serif";
    font-weight: 300;
    font-style: normal;
    color:var(--text-color)
}

.site-header-container{
  display: flex;
  justify-content: space-between;
}

/* 詳しく見るボタン */
.detail-view{
    padding: 0.5em 1rem;
    border: 1px  #FDF6F6 solid;
    border-radius: 20%/80%;
    color: #FDF6F6;
    text-align: center;
    margin: 0 auto;
    text-decoration: none;
}

/* ヘッダーコンポーネント */
#logo{
    width: 210px;
    height: 60px;
}
.top-menu{
    display: flex;
    justify-content: space-around;
    width: auto;
}
.menu-content{
    vertical-align: middle;
    text-align: center;
    padding:1em 2rem;
    margin: 0 auto;
    color: #FDF6F6;
    list-style: none;
}

#component-header{
    display: flex;
    justify-content: space-between;
}

.menu-link{
    color: #FDF6F6;
    text-decoration: none;
}
.menu-link:hover{
    text-decoration: underline;
}

/* フッター全体 */
#bottom-menu{
  background-color: var(--white);
  width: 100vw;
  height: 30rem;
}
/* フッター(白) */
.white-back{
  width: 100vw;
  height: 10rem;
  padding: 2rem;
}
.border-line{
    width: 80vw;
    height: 6rem;
    padding: 2rem 0;
    margin: 0 auto;
    background-color: var(--white);
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #001415;
    border-bottom:1px solid #001415;
}
.btm-menu-link{
    color: #001415;
    list-style: none;
    font-size: 1rem;
}

.btm-menu-link:hover{
    text-decoration: underline;
    text-decoration: blue;
}

/* フッター黒部分 */

#black-btm{
    background-color: #001415;
    height: 10rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

}
#black-btm p{
  line-height: 1.6rem;
}

/* ロゴオン画像 */

#logo-back{
    width: 100%;
    height: 10rem;
    background:url(../img/footer-pc.png) ;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-logo{
    width: 50vw;
    height: 8rem;
    object-fit: contain;
    text-align: center;
}


/* ハンバーガー */
.site-header-navbtn {
  display: none;/* レスポンシブ対応のための初期非表示設定 */
  position: fixed;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background:none;
  border: none;
  z-index: 1;
}

.site-header-navbtn span,
.site-header-navbtn::before,
.site-header-navbtn::after {
	/* display: block; */
  width: 30px;
  height: 1px;
  background-color: #999;
  position: absolute;
  top: 50%;
  left: 5px;
  transition: .4s;
}
.site-header-navbtn::before,
.site-header-navbtn::after {
  /* before, afterにcontentを追加 */
  content: '';
}

.site-header-navbtn::before {
  transform: translateY(-8px);
}
.site-header-navbtn::after {
  transform: translateY(8px);
}

.site-header-nav ul li:not(:last-child) {
  margin-right: 2em;
  /* 最後の要素以外のマージンライトをという意味になる */
}

.site-header-navbtn span {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.site-header-logo span{
  display: none;
}

/* sp */
@media screen and (max-width: 677px) {
	.site-header-nav {
	  position: fixed;
	  width: 100%;
	  height: 100%;
	  left: 0;
	  top: 0;
	  background-color: var(--black);
    /* 幅に対する相対値（左に１画面幅分ずらした状態） */
    transform:translateX(-100%);
    transition: .4s;
    z-index: 1;
	}
  body.is-nav-open .site-header-nav {
    transform: translateX(0);
  }
  body.is-nav-open .site-header-logo{
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .site-header-container{
    margin: 2rem auto;
  }
  .site-header-logo {
    position: relative;
    display: block;
    text-align: center;
    margin: 0 auto;
    z-index: 2;
  }
  .site-header-navbtn {
    display: block;
    z-index: 2;
  }
  .site-header-nav ul {
  display: flex;
  list-style: none;
  }
  .site-header-nav ul li a {
  text-decoration: none;
  font-size: .9rem;
  color:var(--white);
  position: relative;
}
  .site-header-nav ul {
  height: 100%;
	flex-direction: column;
  justify-content: center;
  /* jcc */
	text-align: center;
}
  .site-header-nav ul li:not(:last-child) {
  margin: 0;
  margin-bottom: 1.5em;
}
.site-header-nav ul li a {
  font-size:1.5rem;
}

/* footer */
  .border-line{
  flex-direction: column;
  padding: 0;
  height: auto;
  align-items:start;
  }
  .white-back{
    height: auto;
  }
  .btm-menu{
    padding:0.5rem;
  }
  #black-btm>p{
    text-align: left;
  }

  .footer-logo{
    width: 100vw;
  }
  #logo-back{
    width: 100vw;
    height: 100vw;
    background-image: url(../img/footer-sp.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
  }
  h1{
    font-size:clamp(1.5rem, 3vw,2rem);
  }
  h2{
    font-size: clamp(1.2rem,3vw,2rem);
  }
  h3{
    font-size: clamp(1rem,2vw,1.5rem);
  }

}/* メディアクエリここまで */

/* ハンバーガーボタンのスタイル */
/* 真ん中の線 */
body.is-nav-open .site-header-navbtn span {
  transform: scaleX(0);
  /* 数字の部分は倍率を指定横方向の伸び縮み率 */
}