@charset "utf-8";

  :root {
    --white : #fff;
    --main  : #222;
    --accent: #F9B707;
    --brown : #C7AD84;
    --bg01  : #f4f4f4;
    --bg02  : #F5F2E8;
    --err   : #ac2c2c;

    --font-v: "Bebas Neue", "Noto Sans JP" , sans-serif, "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", sans-serif;

    --fz12: calc(12 / 16 * 1rem);
    --fz14: calc(14 / 16 * 1rem);
    --fz18: calc(18 / 16 * 1rem);
    --fz20: calc(20 / 16 * 1rem);
    --fz24: calc(24 / 16 * 1rem);
    --fz30: calc(30 / 16 * 1rem);
    --fz37: calc(37 / 16 * 1rem);
    --fz44: calc(44 / 16 * 1rem);

    --bd  : 1px solid; /* デフォルトの枠線 */
    --max-w : 1280px;  /* 最大幅 */
  }

/* --------------------------------
html 全体共通
----------------------------------- */
html {
  color: var(--main);
  font-family: var(--font-v)
}

body {
    height: 100svh;
    overflow-x: hidden;
    letter-spacing: .05rem;
    line-height: 1.5rem;
    background: url('../img/bg.png') center / 100px;
    background-attachment: fixed;
    scrollbar-width: none;
    opacity: 0;
}

a {
  color: var(--main);
  display: block;
  position: relative;
  text-decoration: none;
  transition: .3s ease;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Noto Sans JP" , sans-serif, "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", sans-serif;
}

ul li {
  list-style: none;
}

/* スクロールバー */
::-webkit-scrollbar,
::-webkit-scrollbar-thumb {
  display: none;
}

/* ------------------------------------
#h1_top ／ h1
------------------------------------*/
#h1_top {
  position: relative;
}

h1 {
  /* 文字 > 小 */
  font-size: var(--fz18);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  /* 文字 > 大 */
  & span {
    font-family: var(--font-v);
    font-size: var(--fz44);
    font-weight: normal;
    letter-spacing: .25rem;
  }
  /* 先頭のみ色変更 */
  & .first-letter {
    color: var(--accent);
  }
}

/* ------------------------------------
div #h1_bee h1 ／ 点線・ハチ
------------------------------------*/
#h1_bee { 
  margin-bottom: 3rem;
  position: relative;
  margin-right: -5rem;
  overflow: hidden;
  /* 背景 白地 */
  &::before { 
    content: "";
    background: var(--white);
    width: 100%;
    height: 100%;
    position: absolute;
    animation: line-move 4s ease-in-out forwards;
  }
}

/* 点線 アニメーション */
@keyframes line-move {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

#h1_bee #path {
  fill: none;
  stroke: var(--main);
  stroke-dasharray: 0 0 10 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ハチ */
#h1_bee .bee {
  position: absolute;
  top: 0;
  right: 90%;
  width: 60px;
  height: 70px;
  offset-rotate: auto;
  opacity: 0;
  animation: b-move 4s ease-in-out forwards;
  offset-path: path('M650.18,94.49c-27.64,23.86-65.11,35.61-104.63,20.7-36.06-13.61-41.57-46.94-25.24-78.42,16.33-31.48,54.92-50.44,54.52-23.13s-25.9,91.92-128.96,98.2c-52.88,3.22-168.61-18.4-220.21-26.55C52.52,57.96.5,105.85.5,105.85');
  z-index: 1;
}

@keyframes b-move {
  to  { offset-distance: 100%; }
  0%, 50% { transform: rotate(-140deg); opacity: 0; }
  60% { opacity: 1; }
  80% { transform: rotate(-130deg); opacity: 1; }
  90% { transform: rotate(-130deg); opacity: 0;}
}

/* ハチ画像 */
#about        .bee { background: url("../img/nav01.svg") no-repeat; }
#structure    .bee { background: url("../img/nav02.svg") no-repeat; }
#merit        .bee { background: url("../img/nav03.svg") no-repeat; }
#interview    .bee { background: url("../img/nav04.svg") no-repeat; }
#faq          .bee { background: url("../img/nav05.svg") no-repeat; }
#contact_form .bee { background: url("../img/nav06.svg") no-repeat; }

/* h2 */
h2 {
  border-bottom: 1px solid;
  display: inline-block;
  font-size: var(--fz18);
  padding: 0 0 1rem 5rem;
  margin: 0 0 3rem -5rem;
}

/* h3 */
h3 {
  font-size: var(--fz14);
  line-height: 1.7rem;
  & span {
    color: var(--brown);
    display: block;
    font-family: var(--font-v);
    font-size: var(--fz30);
    font-weight: normal;
    letter-spacing: .12rem;
  }
}

/* h4 */
h4 span {
  font-family: var(--font-v);
  font-size: var(--fz44);
  font-weight: normal;
  display: block;
  letter-spacing: .3rem;
  padding-bottom: .5rem;
  /* 先頭のみ色変更 */
  &::first-letter {
      color: var(--accent);
  }
}

/* --------------------------------
  #split ／ 画面2分割(topページ以外)
----------------------------------- */
#split {
  display: flex;
  max-width: var(--max-w);
  margin: auto;
  width: 100%;
  /* 左 > ナビ */
  & header {
    height: calc(100svh - 40px);
    margin: 0 auto auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
  }
  /* 右 > メイン */
  & #content {
    background: var(--white);
    border-left: var(--bd);
    border-right: var(--bd);
    box-shadow: 0 10px 20px #ddd;
    max-width: 750px;
    overflow-X: hidden;
    padding: 5rem 5rem 3rem;
    width: 100%;
  }
}

/* --------------------------------
#read リード文
----------------------------------- */
#read p {
  line-height: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

/* --------------------------------
#content_box お問い合わせ
----------------------------------- */
#content_box .contact {
  border-radius: 2rem;
  margin-top: 5em;
  overflow: hidden;
  position: relative;
  text-align: center;
  /* リンクを全体に */
  & img {
    position: absolute;
    top: 8%;
    right: 8%;
  }
  /* リンクを全体に */
  & a {
    display: block;
    height: 100%;
    width: 100%;
    padding: 3rem 2rem;
    position: relative;
    z-index: 10;
  }
  & p {
    margin-top: 1.5rem;
    z-index: 10;
  }
  /* 背景画像 */
  &::before{    
    clip-path: inset(0);
    border-radius: 2rem;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    bottom: 0;
    max-width: calc(750px - 10rem);
    width: 100%;
    background: url(../img/PA1486_01_w.jpg) center bottom / 100% no-repeat;
    transition: 0.3s;
  }
  /* 枠線 */
  &::after{
    border-radius: 2rem;
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    bottom: 0;
    position: absolute;
    border: 1.5px solid var(--bg01);
    transition:  .3s;
  }
  /* hover */
  &:hover {
    box-shadow: 1rem 1rem 1rem var(--bg01);
    /* 背景画像 > 拡大 */
    &::before {
      background-size: 110%;
    }
    /* 枠線 */
    &::after{
      border-color: var(--main);
    }
  }
}

/* --------------------------------
#content_box IP
----------------------------------- */
#content_box .ip {
  border-top: 1px dotted;
  margin-top: 5rem;
  padding-top: 1rem;

  & p {
    display: inline;
    font-size: 13px;
    margin: 0;
    white-space: pre-wrap;
    word-break: keep-all;
    line-height: 1.1rem;
  }
}

/* --------------------------------
footer #footer ／ フッター
----------------------------------- */
footer {
  display: flex;
  max-width: var(--max-w);
  margin: auto;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  &::before {
    content: "";
    display: block;
    width: 100vw;
    height: 100%;
    background: var(--main);
    margin: 0 calc(50% - 50vw);
    position: absolute;
    bottom: 0;
    z-index: -1;
  }
  & p {
    flex: 1;
    color: var(--white);
    font-size: var(--fz12);
    text-align: center;
    padding: .5rem 0;
  }
  & span {
    padding: 0 5rem;
    max-width: 750px;
    width: 100%;
  }
}

/* ==================================================
mobile（タブレット）
===================================================== */
@media screen and (max-width: 1100px){
  /* --------------------------------
  #split ／ 画面2分割(topページ以外)
  ----------------------------------- */
  #split{
    display: block;
    /* 左 > ナビ */
    & header {
      height: auto !important;
    }
    /* 右 > メイン */
    & #content {
      flex: auto;
      height: 100%;
      margin: auto;
    }
  }

  /* --------------------------------
  footer #footer ／ フッター
  ----------------------------------- */
  footer {
    display: block;
    position: relative;
    z-index: 1;
    & span {
      padding: 0;
    }
  }
}

/* ==================================================
　mobile（スマホ）
===================================================== */
@media screen and (max-width: 750px){
  /* ------------------------------------
  全体共通
  ------------------------------------*/
  body {
    background: none;
  }
  /* --------------------------------
  #split ／ 画面2分割(topページ以外)
  ----------------------------------- */
  #split{
    /* 右 > メイン */
    & #content {
      border: none;
      padding: 5rem 1.5rem 2rem;
    }
  }

  /* ---------------------------
  　section #read ／ リード文
  ------------------------------ */
  #read p {
    text-align: justify;
    & br {
    display: none;
    }
  }

  /* --------------------------------
  #content_box お問い合わせ
  ----------------------------------- */
  #content_box .content {
    /* 背景画像 */
    &::before{    
      max-width: calc(750px - 3rem);
    }
  }

}
/* ==================================================
　mobile（スマホ）
===================================================== */
@media screen and (max-width: 500px){
  /* ------------------------------------
  #h1_top ／ h1
  ------------------------------------*/
  h1 {
    font-size: var(--fz14);
    & span {
      font-size: var(--fz37);
      letter-spacing: .2rem;
    }
  }
  /* ------------------------------------
  div #h1_bee h1 ／ 点線・ハチ
  ------------------------------------*/
  #h1_bee { 
    margin-right: -1.5rem;
    padding-top: 2rem;
  }

  #h1_bee #path {
    stroke-width: .4%;
    stroke-dasharray: 0 0 10 6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  /* ハチ */
  #h1_bee .bee {
    top: -.5rem;
    width: 50px;
    height: 70px;
  }

  /* --------------------------------
  　section #split ／ TOP以外の画面2分割
  ----------------------------------- */
  #content {
    padding: 5rem 1.5rem;
  }

  /* ---------------------------
  　section #read ／ リード文
  ------------------------------ */
  #read p {
    line-height: 1.7rem;
  }

}