@charset "UTF-8";
/* style.css（共通css） */


body {
  font-family: "Noto Serif JP", serif;
  font-feature-settings: 'palt' 1;
  /* letter-spacing: 0.05em; */
  color: #212121;
  background-color: #fff;
}

html {
  scroll-behavior: smooth; /* スムーススクロール */
}

@media screen and (min-width: 320px) {
  /* スマホ用レイアウト 320px以上の範囲に収めるデザインはこの中に記述 */

  /*==============================================================
    　　共通（スマホ）
  ==============================================================*/
  #top {
    scroll-margin-top: 80px;
  }

  .tb-nav,
  .tb-br {
    display: none;
  }

  .sp-none,
  .pc-only {
    display: none;
  }

  /*==============================================================
    　　アニメーション
  ==============================================================*/
  /* ==================== ロード時（トップ）================== */
  /* 最初は非表示で下にずらす */
  .fade-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s ease-out forwards;
  }

  /* アニメーション本体 */
  @keyframes fadeUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* 遅延アニメーション用 */
  .delay-1 {
    animation-delay: 0.3s;
  }
  .delay-2 {
    animation-delay: 0.4s;
  }

  /* ==================== フェードアップ（ページ内）================== */
  /* アニメーション前の状態 */
  .effect {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
  }

  /* 表示されたらこのクラスが付く */
  .effect.show {
    opacity: 1;
    transform: translateY(0);
  }

  /* 遅延用クラス */
  .delay-1 {
    transition-delay: 0.3s;
  }
  .delay-2 {
    transition-delay: 0.6s;
  }
  .delay-3 {
    transition-delay: 0.9s;
  }

  /* ==================== 別ページ_リンク画像 ================== */
  /* 初期状態：拡大しておく */
  .zoom-img {
    transform: scale(1.1);
    transition: transform 1s ease-in-out, opacity 1s ease;
    opacity: 0;
  }

  /* 表示されたら通常サイズに */
  .zoom-img.show {
    transform: scale(1);
    opacity: 1;
  }

  /* ==================== フェード右から（ページ内）================== */
  /* 初期状態：右にずらし、透明に */
  .fade-right {
    opacity: 0;
    transform: translateX(50px); /* 右にずらす */
    transition: all 1s ease-out;
  }

  /* 表示されたら：位置戻し＋透明→表示 */
  .fade-right.show {
    opacity: 1;
    transform: translateX(0);
  }
  /* 遅延用クラス */
  .fade-right.delay-1 {
    transition-delay: 0.7s;
  }

  /*==============================================================
    　　LINE
  ==============================================================*/
  .line-box {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    color: #fff;
    font-weight: bold;
    z-index: 5;

    opacity: 0;
    transition: all 0.5s ease;
  }

  /* 表示状態（スマホ） */
  .line-box.show {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .line-box a {
    background-color: #06c755;
    display: flex;
    height: 51px;
    align-items: center;
    justify-content: center;
    border-radius: 13px 13px 0 0;
    padding: 2px 24px 2px;
    white-space: nowrap;
  }

  .line-box img {
    width: 48px;
    height: 48px;
  }

  .line-box p {
    margin: 0 24px 2px 24px;
    font-size: 17px;
    letter-spacing: 0.15em;
  }

  /*==============================================================
    　　ヘッダー
  ==============================================================*/
  .header {
    position: fixed;
    width: 100%;
    height: 80px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px 0;
    top: 0;
    z-index: 20;
  }

  .header.active {
    background-color: #EEEDED;
  }

  .logo-box {
    display: flex;
    align-items: center;
  }

  .logo-box.active {
    display: none;
  }

  .logo-box img {
    height: 30px;
    margin-bottom: 0.8px;
  }

  .btn{
    position: fixed;
    width: 22px;
    height: 16px;
    right: 26px;
    margin-bottom: 0.8px;
  }

  .btn i{
    position: absolute;
    right: 0;
    height: 1px;
    width: 22px;
    background-color: #949495;
    transition: 0.5s;
  }

  .btn i:nth-of-type(1){
    top: 0;
  }

  .btn i:nth-of-type(2){
    top: 8px;
  }

  .btn i:nth-of-type(3){
    top: 16px;
  }

  .btn.active i:nth-of-type(1){
    transform: translateY(8px) rotate(45deg);
    background-color: #949495;
    width: 25px;
    margin-right: 2.5px;
  }

  .btn.active i:nth-of-type(2){
    opacity: 0;
  }

  .btn.active i:nth-of-type(3){
    transform: translateY(-8px) rotate(-45deg);
    background-color: #949495;
    width: 25px;
    margin-right: 2.5px;
  }

  /* メニューのデザイン*/
  .container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    background: #EEEDED;
    transition: .5s;
    opacity: 0;
    overflow: hidden;
    overflow-y: scroll;
    pointer-events: none;
  }

  .container.active{
    opacity: 1;
    pointer-events: auto;
  }

  .page-link.top {
    padding: 140px 0 0 50px;
  }
  .page-link {
    padding: 0 0 0 50px;
  }

  .nav_item {
    letter-spacing: 0.2em;
    font-weight: 600;
    margin-bottom: 27px;
    font-size: 20px;
  }

  .sns-box {
    display: flex;
    font-weight: 600;
    letter-spacing: 0.16em;
    align-items: center;
    font-size: 9.5px;
    gap: 12.5px;
    margin-bottom: 75px;
  }

  .sns-icon {
    width: 29px;
    height: 29px;
  }

  .sns-icon.line {
    width: 28.5px;
    height: 28.5px;
    margin-bottom: 0.3px;
  }

  .sns-icon.tiktok {
    width: 28px;
    height: 28px;
  }

  .sns-box p {
    margin-right: 10px;
    font-weight: bold;

    margin-right: 8px;
  }
  .copy-box p.copy {
    font-size: 8px;
  }

  .con-bottom {
    margin-top: 65px;
    padding-left: 50px;
  }


  /*==============================================================
    　　IMG
  ==============================================================*/
  .sec-img {
    background-image: url(../img/end-bg.webp);
    height: 160px;
    background-size: cover;
    background-position: 50% 50%;
    text-align: center;
  }

  /* .sec-line p {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #fff;
    text-shadow: #bebebe 0 0 2px;
  }

  .sec-line p span {
    margin-left: 18px;
  }

  .line-box {
    width: 257px;
    height: 42px;
    background-color: #06c755;
    margin: 18px auto;
    border-radius: 10px;
  } */

  .sec-img .sec-bg {
    height: 100%;
    align-content: center;
  }


  /*==============================================================
    　　パンくずリスト
  ==============================================================*/
  /* パンくず全体 */
  .breadcrumbs {
    font-size: 15px;
    margin: 18px 0px 30px 25px;
    padding: 0;
    /* position: absolute; */
    top: 14px;
    left: 0;
    font-weight: 550;
    /* font-family: "Goudy Bookletter 1911"; */
    letter-spacing: 0.1em;
  }

  /* リストのベース */
  .breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* スマホで折り返し */
    /* gap: 3px; */
    padding: 0;
    margin: 0;
  }

  /* 各要素 */
  .breadcrumbs li {
    display: flex;
    align-items: center;
    color: #868686;
  }

  /* 区切り（>）を疑似要素で挿入 */
  .breadcrumbs li + li::before {
    /* content: "›"; */
    content: "";
    width: 7px;
    height: 7px;
    border: 0;
    border-top: solid 1.5px #333333;
    border-right: solid 1.5px #333333;
    transform: rotate(45deg);
    margin: 3px 14px 0 10px;
    color: #999;
    font-size: 20px;
    /* margin-bottom: 4px; */
  }

  /* リンク */
  .breadcrumbs a {
    text-decoration: none;
    /* color: #289A49; */
    transition: color 0.2s;
    /* border-bottom: solid 1px #212121; */
    /* padding-bottom: 2px; */
    color: #212121;
  }

  /*==============================================================
    　　フッター
  ==============================================================*/
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 27px 23px;
  }

  .copy {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.08em;
  }

  .copy span {
    letter-spacing: 0.15em;
  }

  .to-top-box {
    width: 25px;
    height: 25px;
  }

  .to-top-box a {
    width: 25px;
    height: 25px;
    margin: 0 auto;
  }

  .footer-copy {
    display: flex;
    justify-content: right;
    align-items: center;
  }

}

@media screen and (min-width: 640px) {
  /* タブレット用レイアウト 640px以上の範囲に収めるデザインはこの中に記述 */
   #top {
    scroll-margin-top: 180px;
  }
  /*==============================================================
    　　共通（タブレット）
  ==============================================================*/
  .sp_nav,
  .sp-br {
    display: none;
  }

  .tb-nav,
  .tb-br {
    display: block;
  }

  .list {
    display: inline;
    display: flex;
  }

  .tb-nav .nav-list {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, auto);
    grid-template-rows: auto;
    gap:28px;
    list-style: none;
    align-items: center;
  }

  .tb-nav .nav-list .nav_item {
    margin: 0;
  }

  .sp-none {
    display: block;
  }

   /*==============================================================
    　　TB_LINE
  ==============================================================*/

  .line-box {
    top: 58%;
    left: auto;
    right: 0;
    transform: translate(100%, -58%);
    width: 68px;
    height: 330.5px;
  }

  .line-box.show {
    transform: translate(0, -58%);
  }

  .line-box a {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 68px;
    height: auto;
    justify-items: center;
    border-radius: 13px 0 0 13px;
    padding: 15px 0 16px;
    padding-left: 4px;
  }

  .line-box img {
    width: 60px;
    height: 60px;
  }

  .line-box p {
    margin: 0;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-feature-settings: initial;
    margin: 0 auto;

    font-size: 19px;
    letter-spacing: 0.3em;

    padding: 8px 0;
  }

  .line-box p span {
    letter-spacing: 0.2em;
    margin-bottom: 4px;
    font-size: 20px;
  }

  /*==============================================================
    　　TB_ヘッダー
  ==============================================================*/
  .header {
    height: 180px;
    padding: 0 60px 8px;
  }

  .header .nav_item {
    font-size: 14px;
    letter-spacing: 0.17em;
  }

  .logo-box img {
    height: 40px;
  }

  /*==============================================================
    　　TB_IMG
  ==============================================================*/
  .sec-img {
    margin: 0;
    /* height: 325px; */
    height: 250px;
  }

  .sec-img .sec-bg {
    height: 100%;
    align-content: center;
    padding: 0 90px;
  }

  /* .sec-line p {
    font-size: 15px;
    letter-spacing: 0.07em;
  }

  .sec-line p span {
    margin-left: 30px;
  }

  .line-box {
    width: 100%;
    height: 79px;
    margin: 38px auto;
    border-radius: 16px;
  } */

  /*==============================================================
    　　TB_パンくずリスト
  ==============================================================*/
  /* パンくず全体 */
  .breadcrumbs {
    font-size: 16px;
    margin: 35px 0px 30px 60px;
  }

  /* 区切り（>）を疑似要素で挿入 */
  .breadcrumbs li + li::before {
    margin: 3px 18px 0 13px;
  }

  /*==============================================================
    　　TB_フッター
  ==============================================================*/
  .footer {
    height: 180px;
    margin: 0 45px 0 60px;
  }

  .footer-item {
    display: flex;
    align-items: center;
  }

  .footer .footer-img {
    margin-right: 90px;
    margin-top: 5px;
    width: 68px;
  }

  .footer-text-box {
    justify-content: left;
  }

  .footer-text {
    font-size: 15px;
    font-family: "Goudy Bookletter 1911", serif;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.4;
    margin-bottom: 25px;
  }

  .to-top-box {
    width: 42px;
    height: 42px;
    margin-top: 65px;
  }

  .copy {
    font-size: 10px;
    letter-spacing: 0.15em;
  }

}

@media screen and (min-width: 1024px) {
  /* パソコン用レイアウト 1024px以上の範囲に収めるデザインはこの中に記述 */

  .pc-only {
    display: block;
  }

  /*==============================================================
    　　共通（パソコン）
  ==============================================================*/
  .tb-nav .nav-list {
    grid-template-columns: repeat(6, auto);
  }

  /*==============================================================
    　　PC_ヘッダー
  ==============================================================*/
  .header .nav_item {
    transition: opacity 0.3s;
  }

  .header .nav_item:hover {
    opacity: 0.6;
  }

  .logo-box img {
    height: 48px;
  }


  /* インスタアイコン */
  .header .nav_item .sns-icon {
    width: 20px;
    height: 20px;
    margin-left: 3px;
    margin-top: 2px;
  }

  /*==============================================================
    　　PC_IMG
  ==============================================================*/

  .sec-img {
    height: 320px;
  }

  .sec-img .sec-bg {
    padding: 0 180px;
  }

  /* .line-box {
    margin: 43px auto;
    border-radius: 16px;
    max-width: 1142px;
  } */

  /*==============================================================
    　　PC_フッター
  ==============================================================*/

  .footer {
    height: 230px;
    margin: 20px 96px;
  }

  .footer-item {
    display: flex;
    align-items: center;
  }

  .footer .footer-img {
    margin-top: 4px;
    margin-right: 160px;
    width: 90px;
  }

  .footer-text-box {
    justify-content: left;
  }

  .footer-text {
    font-size: 15px;
    font-family: "Goudy Bookletter 1911", serif;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.4;
    margin-bottom: 48px;
  }

  .to-top-box {
    width: 42px;
    height: 42px;
    margin-top: 90px;
  }

  .to-top-box img {
    transition: opacity 0.3s;
  }

  .to-top-box img:hover {
    opacity: 0.6;
  }

  .copy {
    font-size: 10px;
    letter-spacing: 0.15em;
  }
}

@media screen and (min-width: 1400px) {
  /* パソコン用レイアウト 1400px以上の範囲に収めるデザインはこの中に記述 */
  /*==============================================================
    　　ホバーアニメーション
  ==============================================================*/
  /* ==================== LINE ================== */
  .line-box a {
    transition: opacity 0.3s;
  }

  .line-box a:hover {
    opacity: 0.6;
  }

  /* ==================== パンくずリスト ================== */
  .breadcrumbs a {
    transition: opacity 0.3s;
  }

  .breadcrumbs a:hover {
    opacity: 0.6;
  }


}