@charset "utf-8";
 @import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');
.newstop_b .webgene-blog .webgene-item a .date {
    margin-right: 10px;
}

.pagetitle_f2{
     border-bottom: 1px solid #010000;
}
.underline {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}
.underline::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 20px;
    height: 1px;
    background: #010000;
}
.title_label {
  display: inline-block;

  padding: 10px 22px;
  background: #4a403a;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.14em;
  text-align: center;
    margin: auto;
}
.pagetitle {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 320px;
  max-height: 640px;
  aspect-ratio: 2.25 / 1;
  display: flex;
  align-items: center;
  padding: clamp(30px, 6vw, 80px);
  overflow: hidden;
  color: #333;
}
.pagetitle::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(77, 63, 54, 0.4);
  z-index: 0;
  pointer-events: none;
}
body.gjs-dashed .pagetitle::after {
  display: none;
}
.pagetitle .titlebox1 {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  top: 60px;
}
.pagetitle .titlebox1 p, .pagetitle .titlebox1 .en {
  color: #fff;
}
.pagetitle .titlebox1 .en, .pagetitle .titlebox1 p {
  opacity: 0;
}
body.gjs-dashed .pagetitle .titlebox1 .title, body.gjs-dashed .pagetitle .titlebox1 p {
  opacity: 1;
}

.pagetitle .titlebox1 .en {
  animation-name: pagetitle1;
  animation-duration: 1.8s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0.4s;
}
@keyframes pagetitle1 {
  0% {
    opacity: 0;
    -ms-filter: blur(6px);
    filter: blur(6px);
    letter-spacing: -0.2rem;
  }
  100% {
    opacity: 1;
    -ms-filter: blur(0px);
    filter: blur(0px);
    letter-spacing: 0.15em;
  }
}


 .footer_wrap .txtbox .color2 {
   color: rgba(255, 255, 255, 0.7)
 }
 /* ---------- footer ---------- */
 .footer_wrap {
   background: #2F2B28;
   color: rgba(255, 255, 255, .86);
 }
 .footer_wrap .footer_inner {
   max-width: 1280px;
   margin: 0 auto;
 }
 /* ---------- common ---------- */
 .footer_wrap .txtbox p {
   margin: 0;
   line-height: 1.9;
   letter-spacing: .06em;
   color: #fff;
 }
 .footer_wrap .default_txt2 span {
   color: rgba(255, 255, 255, .86);
 }
 .footer_wrap .footer_upper a p {
   color: #fff;
 }
 .footer_wrap .footer_upper .default_txt2, .footer_wrap .footer_upper .default_txt3 {
   color: rgba(255, 255, 255, .70);
   white-space: nowrap;
 }
 .footer_wrap .footer_hline {
   height: 1px;
   width: 100%;
   background: rgba(255, 255, 255, .08);
   margin: 64px 0;
 }
 /* ---------- upper ---------- */
 .footer_wrap .footer_upper {
   gap: 64px;
   align-items: center;
   justify-content: space-between;
 }
 /* left */
 .footer_wrap .footer_linkrow {
   flex-wrap: nowrap;
   justify-content: flex-start;
   gap: 18px;
   margin-top: 14px;
   width: 100%;
   padding-bottom: 30px;
 }
 /* center line */
 .footer_wrap .footer_vline {
   width: 1px;
   height: 220px;
   background: #2F2B28;
 }
 /* right */
 .footer_wrap .footer_upper_right {
   display: grid;
   gap: 26px;
   max-width: 400px;
 }
 .footer_wrap .footer_item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   padding: 10px 0;
   text-decoration: none;
   color: inherit;
 }
 .footer_wrap .footer_upper_right .footer_item {
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   padding-bottom: 16px;
   margin-bottom: 16px;
 }
 .footer_wrap .footer_item_row {
   display: flex;
   align-items: baseline;
   gap: 12px;
 }
 /* icon */
 .footer_wrap .icon {
   width: 44px;
   height: 44px;
   border: 1px solid #fff;
   border-radius: 999px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: transform 0.25s ease;
 }
 .footer_wrap a:hover .icon {
   transform: translateX(6px);
 }
 .footer_wrap .icon img {
   width: 8px;
   height: auto;
   display: block;
   transform: translateX(1px);
 }
 /* hover */
 .footer_wrap .footer_linkrow:hover, .footer_wrap .footer_item:hover {
   opacity: 0.75;
 }
 /* ---------- lower ---------- */
 .footer_wrap .footer_lower {
   flex-wrap: nowrap;
   align-items: start;
   justify-content: space-between;
 }
 .footer_wrap .footer_brand .imgbox img {
   display: block;
 }
 .footer_wrap .footer_brand {
   width: 180px;
 }
 .footer_wrap .footer_sns {
   display: flex;
   gap: 14px;
   margin-top: 30px;
 }
 .footer_wrap .footer_sns .imgbox {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .footer_wrap .footer_sns .imgbox img {
   width: 100%;
   height: auto;
   display: block;
 }
 /* nav */
 .footer_wrap .footer_nav {
   gap: 36px;
 }
 .footer_nav {}
 .footer_nav .rightbox {
   display: flex;
   gap: 30px;
   align-items: flex-start;
     flex-wrap: nowrap;
 }
 .footer_nav .ul {
   display: flex;
   flex-direction: column;
   gap: 28px;
 }
 .footer_nav .li {
   position: relative;
   padding-left: 22px;
 }
 .footer_nav .li::before {
   content: "-";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   color: #fff;
   font-size: 20px;
   line-height: 1;
 }
 .footer_nav .li a {
   color: #fff;
   text-decoration: none;
   display: inline-block;
   font-size: 17px;
   letter-spacing: 0.12em;
   line-height: 1.2;
 }
 .footer_nav .li a p {
   margin: 0;
   font-family: "Cormorant", "Noto Sans JP", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   color: #fff;
 }
 /* ---------- copy ---------- */
 .footer_wrap .footer_copy {
   margin-top: 44px;
   display: flex;
   justify-content: flex-end;
   color: rgba(255, 255, 255, .55);
 }
 /* ---------- responsive ---------- */
 @media (max-width: 1080px) {
   .footer_wrap .footer_upper {
     justify-content: center;
   }
   .footer_wrap .footer_lower {
     grid-template-columns: 1fr;
     gap: 44px;
   }
   .footer_wrap .footer_nav_item .txtbox .default_txt3 {
     font-size: 16px;
     white-space: nowrap;
   }
 }
 @media (max-width: 768px) {
   .footer_wrap .footer_lower {
     flex-direction: column;
     align-items: center;
   }
 }
 @media (max-width: 576px) {
   .footer_nav .rightbox {
     display: flex;
     gap: 20px;
     align-items: flex-start;
     flex-direction: column;
   }
   .footer_nav .ul {
     gap: 20px;
   }
 }
 .nav_grid4 {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: clamp(8px, 1.6vw, 14px);
 }
 .nav_grid4 .nav_card {
   position: relative;
   display: block;
   overflow: hidden;
   text-decoration: none;
   /* ✅ サイズ比率 */
   aspect-ratio: 323 / 430;
   /* ✅ 文字色を白 */
   color: #fff;
 }
 .nav_grid4 .nav_card .imgbox {
   position: absolute;
   inset: 0;
 }
 .nav_grid4 .nav_card .imgbox img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transform: scale(1);
   transition: transform .6s ease;
 }
 /* 暗めの被せ */

 .nav_grid4 .nav_card::after {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.35);
   transition: background .35s ease;
 }

.section06 .nav_grid4 .nav_card::after {display:none;}
 /* ✅ テキストを中央 */
 .nav_grid4 .nav_card .txtbox {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   align-items: center; /* flex-column 用 */
   text-align: center;
   gap: 8px;
   width: 100%;
 }
 /* p/h3の余白消し */
 .nav_grid4 .nav_card .txtbox p, .nav_grid4 .nav_card .txtbox h3 {
   margin: 0;
   color: #fff;
 }
 /* 右下の丸アイコン */
 .nav_grid4 .nav_card .icon {
   position: absolute;
   right: clamp(18px, 2.4vw, 30px);
   bottom: clamp(18px, 2.4vw, 30px);
   z-index: 2;
   width: 40px;
   height: 40px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.55);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform .25s ease, background .25s ease, border-color .25s ease;
 }
 .nav_grid4 .nav_card .icon img {
   width: 12px;
   height: auto;
   display: block;
   filter: brightness(0) invert(1);
 }
 /* hover */
 .nav_grid4 .nav_card:hover .imgbox img {
   transform: scale(1.06);
 }
 .nav_grid4 .nav_card:hover::after {
   background: rgba(0, 0, 0, 0.45);
 }
 .nav_grid4 .nav_card:hover .icon {
   transform: translateX(6px);
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 255, 255, 0.85);
 }
 /* レスポンシブ */
 @media (max-width: 1080px) {
   .nav_grid4 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 @media (max-width: 576px) {
     .nav_grid4 .nav_card .txtbox p{
  font-size: 20px;
 }
     }

 
 .boxwrap1 {
   gap: clamp(20px, 6vw, 90px);
   flex-wrap: nowrap;
   width: 100%;
   max-width: 1280px;
   margin: auto;
 }
 .boxwrap1 .rightbox {
   flex: 0 0 50%;
   gap: 10px;
 }
 .boxwrap1 .imgbox img {}
 .boxwrap1 .leftbox {
   flex: 1;
 }
 .boxwrap1 .morebox {
   justify-content: flex-start;
 }
 .boxwrap1 .more {
     justify-content: flex-start;
     }

 .boxwrap1 .txtbox .box {
   margin-bottom: 30px;
 }
 @media (max-width: 768px) {
   .boxwrap1 {
     flex-direction: column;
       gap:20px;
       max-width: 500px;
   }
     .boxwrap1 h2{
         text-align: center;
     }
 .boxwrap1 .more {
     justify-content: center;
     }
   .boxwrap1 .rightbox, .boxwrap1 .leftbox {
     flex: 0 0 100%;
     width: 100%;
   }
 }

.boxwrap2 {
  gap: clamp(20px, 6vw, 90px);
  flex-wrap: nowrap;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.boxwrap2 .rightbox {
  flex: 0 0 30%;
 min-width: 280px;
}

.boxwrap2 .imgbox_frame,
.boxwrap2 .imgbox {
  width: 100%;
}

.boxwrap2 .imgbox img {
  width: 100%;
  height: auto;
  display: block;
}

.boxwrap2 .leftbox {
  flex: 1;
}

.concept .boxwrap2:nth-child(odd) {
  padding-right: clamp(80px, 8vw, 150px);
}

.concept .boxwrap2:nth-child(even) {
  padding-left: clamp(80px, 8vw, 150px);
}
.concept .boxwrap2:last-child {
  margin-bottom: 0;
}

@media (max-width: 1080px) {
  .boxwrap2 {
    flex-direction: column;
    gap: 20px;
  width: 100%;
      max-width: 700px;}

    

  .boxwrap2 .rightbox,
  .boxwrap2 .leftbox {
    flex: 0 0 100%;
    width: 100%;
  }

  .concept .boxwrap2:nth-child(even) {
    transform: none;
  }

}
@media (max-width: 576px) {
.concept .boxwrap2:nth-child(odd) {
padding-right: 0px;
}

.concept .boxwrap2:nth-child(even) {
padding-left: 0px;
}
}
.boxwrap3 {
  display: flex;
  align-items: flex-start;
  gap: clamp(80px, 6vw, 100px);
  background: #dfe7e2;
  padding: clamp(30px, 5vw, 60px);
}

.boxwrap3 .leftbox {
}

.boxwrap3 .leftbox .txtbox {
  width: 100%;
}
.boxwrap3 .leftbox .txtbox .logo{
  max-width: 230px;
}

.boxwrap3 .leftbox .txtbox p {
  color: #2f2a27;
}

.boxwrap3 .rightbox {

}

.boxwrap3 .calendar_wrap {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.boxwrap3 .imgbox {
  width: 100%;
  max-width: 310px;
  background: #fff;
}

.boxwrap3 .imgbox img {
  width: 100%;
  height: auto;
  display: block;
}

.boxwrap3 .info_block .entitle4 {
  color: #2f2a27;
}

@media (max-width: 576px) {
 
    .boxwrap3 .calendar_wrap{
        flex-direction: column;
    }
    
}

 @media (max-width: 768px) {
   .txt-center {
     text-align: left;
   }
 }
 .titleboxwrap {
   justify-content: space-between;
   max-width: 1280px;
   margin-right: auto;
   margin-left: auto;
 }
 .titleboxwrap .txtbox {
   position: relative;
   padding-left: clamp(20px, 3vw, 40px);
   max-width: 700px;
 }
 /* 縦線 */
 .titleboxwrap .txtbox::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 2px;
   height: 100%;
   background: #cfcfcf;
 }
 .imgbox_frame {
   position: relative;
   display: inline-block;
   overflow: visible;
 }
 .imgbox_frame .imgbox {
   position: relative;
   display: block;
 }
 .imgbox_frame .imgbox img {
   display: block;
   width: 100%;
   height: auto;
 }
 /* 左上の三角 */
 .imgbox_frame::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 56px;
   height: 56px;
   background: linear-gradient(135deg, #F4F4F4 0 50%, transparent 50% 100%);
   z-index: 2;
   pointer-events: none;
 }
 /* 左上の斜め線 */
 .imgbox_frame::after {
   content: "";
   position: absolute;
   top: 68px;
   left: -12px;
   width: 110px;
   height: 1px;
   background: #444;
   transform: rotate(-45deg);
   transform-origin: left center;
   z-index: 3;
   pointer-events: none;
 }
 /* 右下の三角 */
 .imgbox_frame .imgbox::before {
   content: "";
   position: absolute;
   right: 0;
   bottom: 0;
   width: 56px;
   height: 56px;
   background: linear-gradient(315deg, #F4F4F4 0 50%, transparent 50% 100%);
   z-index: 2;
   pointer-events: none;
 }
 /* 右下の斜め線 */
 .imgbox_frame .imgbox::after {
   content: "";
   position: absolute;
   right: -12px;
   bottom: 68px;
   width: 110px;
   height: 1px;
   background: #444;
   transform: rotate(-45deg);
   transform-origin: right center;
   z-index: 3;
   pointer-events: none;
 }
 .voice_list{
  gap: clamp(24px, 5vw, 80px);
   align-items: stretch;
   justify-content: flex-start;
 }
 .voice_item {
  width: calc((100% - (clamp(24px, 5vw, 80px) * 2)) / 3);
   box-sizing: border-box;
margin-top: 0;
     margin-bottom: auto;
 }
 .voice_item .imgbox {
   margin-bottom: 14px;
   line-height: 0;
 }
 .voice_item .imgbox img {
   width: 100%;
   display: block;
 }
 .voice_item .txtbox h3 {
   margin: 0 0 10px;
   text-align: center;
 }
 .voice_item .txtbox .lineheight22 {
   margin: 0 0 12px;
   color: #555;
 }
 .voice_item .txtbox .voice_info {
   margin: 0;
   color: #666;
 }
 @media (max-width: 1080px) {
     .voice_list {
 justify-content: center;
}
   .voice_item {
     width: calc((100% - 20px) / 2);
     max-width: 330px;
      
   }
 }
 @media (max-width: 768px) {
   .voice_item {
     width: 100%;
   }
 }
 .bracket_title {
   display: inline-block;
   position: relative;
   padding: 0 1.4em;
   font-size: 18px;
   line-height: 1.6;
   letter-spacing: 0.12em;
   color: #111;
 }
 .bracket_title::before, .bracket_title::after {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   font-size: 1.1em;
   line-height: 1;
   color: #666;
 }
 .bracket_title::before {
   content: "[";
   left: 0;
 }
 .bracket_title::after {
   content: "]";
   right: 0;
 }
 .bordertop {
   border-top: 1px solid #010000;
 }
 .borderbottom {
   border-bottom: 1px solid #010000;
 }
 .more a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: clamp(220px, 30vw, 300px);
   padding: 20px 20px;
   border: 1px solid #4C4844;
   text-decoration: none;
   transition: .3s ease;
   font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   color: #4C4844;
   font-weight: 400;
 }
 .more a p {
   margin: 0;
   font-size: 16px;
   letter-spacing: 0.15em;
   color: #4C4844;
   white-space: nowrap;
   font-weight: 400;
 }
 .more.more2 a {
   background: #994E2F;
   border: none;
 }
 .more.more2 p {
   color: #fff;
 }
 .more.more3 a {
   border: 1px solid #fff;
 }
 .more.more3 p {
   color: #fff;
 }
 .snsbox {
   gap: 20px 30px;
 }
 .snsbox a i {
   font-size: 30px;
   color: #fff;
   transition: .3s;
 }
 .snsbox a .fa-line {
   font-size: 35px;
 }
 .snsbox a:hover {
   opacity: .7;
 }
.header_n {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: clamp(10px, 1.8vw, 18px) clamp(20px, 2vw, 30px);
  justify-content: space-between;
  z-index: 99;
  flex-wrap: nowrap;
  isolation: isolate;
}

.header_n::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

 .header_n.main-bg::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
     
   background: rgba(0,0,0,0.3);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
 }
 .header_n.no-bg::before {
   content: "";
   background: transparent;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
   box-shadow: none;
 }
 .header_n .logo {
   width: clamp(140px, 8vw, 180px);
 }


.header_n .logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.9));
}
 .header_n .head_nav {
   justify-content: space-between;
   flex-wrap: nowrap;
 }
 .header_n .head_nav .head_menu .ul .li a p, .header_n .morebox p {
   font-family: "Cormorant", "Noto Sans JP", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   font-size: clamp(14px, 1.6vw, 16px);
   font-weight: 400;
   letter-spacing: 0.1rem;
 }
 .header_n .head_nav .more a {
   padding-top: 13px;
 }
 .header_n .menu-bt {
   width: 52px;
   height: 52px;
   background: #3c352f;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   position: relative;
   box-sizing: border-box;
 }
 .header_n .menu-bt p {
   font-family: "Cormorant", "Noto Sans JP", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   font-size: 15px;
   color: #fff;
   line-height: 1;
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   transition: ease 0.3s;
   pointer-events: none;
 }
 .header_n .menu-bt p.close_txt {
   opacity: 0;
 }
 .header_n .menu-bt .active p.open_txt {
   opacity: 0;
 }
 .header_n .menu-bt .active p.close_txt {
   opacity: 1;
 }
 .header_n .menu-bt .line {
   position: relative;
   width: 24px;
   height: 18px;
 }
 .header_n .menu-bt .line div {
   position: absolute;
   width: 100%;
   height: 2px;
   left: 0;
   background-color: #fff;
   transition: ease 0.3s;
 }
 .header_n .menu-bt .line div:nth-of-type(1) {
   top: 0;
 }
 .header_n .menu-bt .line div:nth-of-type(2) {
   top: 50%;
   transform: translateY(-50%);
 }
 .header_n .menu-bt .line div:nth-of-type(3) {
   bottom: 0;
 }
 .header_n .menu-bt.active .line div:nth-of-type(1) {
   width: 90%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(45deg);
 }
 .header_n .menu-bt.active .line div:nth-of-type(2) {
   top: 50%;
   transform: translateY(-50%) translateX(50%);
   opacity: 0;
 }
 .header_n .menu-bt.active .line div:nth-of-type(3) {
   width: 90%;
   bottom: 50%;
   left: 50%;
   transform: translate(-50%, 50%) rotate(-45deg);
 }
.moreb {
     max-width: 300px;
 }
 .moreb a {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   height: 50px;
   padding: 0 24px;
   border: 1px solid #b9afa8;
   background:#FFFFFF;
   text-decoration: none;
   box-sizing: border-box;
 }
.moreb .icon {
   width: 18px;
   height: 18px;
   flex: 0 0 18px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .moreb .icon img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
 }

 .header_n .moreb a {
    padding: 0 15px;
}
 .header_n .moreb p {
   white-space: nowrap;
}

 .header_n .head_nav .head_menu {
   display: block;
 }
 .header_n .head_nav .head_menu .ul {
   gap: clamp(0px, 1.5vw, 30px);
   flex-wrap: nowrap;
 }
 /* ナビリンク */
 .header_n .head_nav .head_menu .ul .li a {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 55px;
   text-decoration: none;
   flex-wrap: nowrap;
 }
.header_n .head_nav .head_menu .ul .li a p.en {
  letter-spacing: 0.18em;
  line-height: 1;
  white-space: nowrap;
  transition: .3s;
  color: #fff;
  font-size: clamp(14px, 2.0vw, 18px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
 .header_n .head_nav .head_menu .ul .li a:hover p.en {
   transform: translateY(-3px);
   opacity: .85;
 }

.header_n .head_nav .head_menu .ul .li a::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #fff;
  transform: translateX(-50%);
  transition: .3s;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
}
 .header_n .head_nav .head_menu .ul .li a:hover::after {
   width: 70%;
 }
 .morebox {
   gap: clamp(20px, 4vw, 40px);
 }
 .header_n .leftbox {
   flex-wrap: nowrap;
   gap: clamp(0px, 2.5vw, 40px);
 }
 .header_n .rightbox {
   flex-wrap: nowrap;
   gap: clamp(10px, 2.5vw, 20px);
 }
 .header_n .menu-bt p {
   color: #333;
 }
 .header_n .morebox .more a {
   border: 1px solid #333;
 }
 .header_n .morebox .more:last-child a {
   background: #333;
   border-color: #333;
 }
 .header_n .morebox .more:last-child p {
   color: #fff;
 }
 .menu-wrap {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(82,82,82,0.7);
   z-index: 98;
 }
 .menu-wrap > div {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   padding: 100px 20px 50px;
 }
 .menu-wrap .menuwarap_box {
   gap: 60px;
   width: 90%;
   max-width: 1000px;
 }
 .menu-wrap .ul {
   justify-content: center;
   align-items: stretch;
   gap: 30px 10px;
 }
 .menu-wrap .ul .li {
   width: calc(100% / 3 - 20px / 3);
 }
 .menu-wrap .ul .li a {
   position: relative;
   display: block;
   padding: 10px 30px;
   background-color: rgba(0, 0, 0, 0.45);
 }
 .menu-wrap .ul .li a::after {
   content: "";
   position: absolute;
   top: 50%;
   right: 20px;
   transform: translateY(-50%);
   transition: ease 0.3s;
   width: 8px;
   height: 10px;
   background-image: url("https://smt-10030044.smooooth.jp/system_panel/uploads/images/arrow1.svg");
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 100% auto;
   z-index: 2;
 }
 .menu-wrap .ul .li a:hover::after {
   transform: translateY(-50%) translateX(3px);
 }
 .menu-wrap .ul .li p {
   font-family: "Cormorant", "Noto Sans JP", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   color: #fff;
   text-align: center;
 }
 .menu-wrap .ul .li p.en {
   font-size: clamp(16px, 2.0vw, 20px);
 }
 .menu-wrap .ul .li p.jp {
   font-size: clamp(14px, 1.2vw, 18px);
   font-family: "Zen Old Mincho", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
 }
 .menu-wrap .morebox {
   gap: 20px 30px;
 }
 .menu-wrap .morebox .more a {
   border: 1px solid #fff;
 }
 .menu-wrap .morebox .more a p {
   color: #fff;
    font-family: "Zen Old Mincho", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
 }
 .menu-wrap .morebox a {
   width: 280px;
 }
 @media screen and (max-width: 1080px) {
   .header_n .head_nav .head_menu {
     display: none !important;
   }
 }
 @media screen and (max-width: 768px) {
   .header_n .rightbox .morebox {
     display: none !important;
   }
   .menu-wrap .ul .li {
     width: calc(100% / 2 - 10px / 2);
   }
   .menu-wrap .ul {
     gap: 20px 10px;
   }
   .header_n .more2 {
     display: none;
   }
   .header_n .menu-bt {
     padding: 10px;
   }
 }
 @media screen and (max-width: 576px) {
   .header_n .moreb {
     display: none;
   }
   .header_n .logo {
     padding-bottom: 0px;
   }

   .header_n .head_nav .more {
     display: none;
   }
   .menu-wrap > div {
     padding: 80px 20px 30px;
   }
   .menu-wrap .menuwarap_box {
     gap: 30px;
     width: 100%;
     padding: 0px;
   }
   .menu-wrap .ul .li a {
     padding: 6px 10px;
     padding-left: 15px;
   }
   .menu-wrap .ul .li a::after {
     right: 10px;
     width: 6px;
     height: 8px;
   }
   .menu-wrap .ul .li p {
     text-align: left;
   }
   .menu-wrap .morebox {
     gap: 10px 20px;
   }
   .menu-wrap .morebox a {
     width: 240px;
   }
 }
 .lineheight22 {
   line-height: 2.2;
   letter-spacing: 0.08em;
   font-weight: 400;
 }
 .txtwhite {
   color: #fff;
 }
 .color1 {
   color: #957C5B;
 }
 .color2 {
   color: rgba(51, 51, 51, 0.70);
 }
 .color3 {
   color: ;
 }
 .bg1 {
   background: #908985;
 }
 .bg2 {
   background: #EBEBEB;
 }
 .bg3 {
   background: #D7E2DE;
 }
 .mincho {
   font-family: "Zen Old Mincho", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
 }
 .fontco {
   font-family: "Cormorant", "Noto Sans JP", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
 }
 .entitle0 {
   font-family: "Cormorant", "Noto Sans JP", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
   font-size: clamp(40px, 4vw, 72px);
   letter-spacing: 0.15em;
 }
 .entitle1 {
   font-family: "Cormorant", "Noto Sans JP", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
   font-size: clamp(35px, 3vw, 46px);
   letter-spacing: 0.1em;
 }
 .entitle2 {
   font-family: "Cormorant", "Noto Sans JP", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
   font-size: clamp(24px, 3vw, 28px);
   letter-spacing: 0.1em;
 }
 .entitle3 {
   font-family: "Cormorant", "Noto Sans JP", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
   font-size: clamp(18px, 3vw, 22px);
   letter-spacing: 0.08em;
 }
 .entitle4 {
   font-family: "Cormorant", "Noto Sans JP", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   font-size: clamp(16px, 3vw, 18px);
   letter-spacing: 0.05em;
 }
.letter-0{letter-spacing: 0;}
.letter-1{letter-spacing: 1px;}
.letter-2{letter-spacing: 2px;}
.letter-3{letter-spacing: 3px;}
.letter-4{letter-spacing: 4px;}
.letter-5{letter-spacing: 5px;}
.letter-6{letter-spacing: 6px;}
.letter-7{letter-spacing: 7px;}
.letter-8{letter-spacing: 8px;}
.letter-9{letter-spacing: 9px;}
.letter-10{letter-spacing: 10px;}

 .default_title1 {
   font-size: clamp(30px, 3.2vw, 44px);
 }
 .default_title2 {
   font-size: clamp(25px, 3.0vw, 32px);
 }
 .default_title3 {
   font-size: clamp(22px, 2.8vw, 28px);
 }
 .default_title4 {
   font-size: clamp(20px, 1.8vw, 22px);
 }
 .default_txt1 {
   font-size: clamp(12px, 1.2vw, 14px);
 }
 .default_txt2 {
   font-size: clamp(15px, 1.4vw, 18px);
 }
 .default_txt3 {
   font-size: clamp(12px, 1.2vw, 14px);
 }
 .mg_b_1 {
   margin-bottom: 150px;
 }
 .mg_b_2 {
   margin-bottom: 100px;
 }
 .mg_b_3 {
   margin-bottom: 80px;
 }
 .mg_b_4 {
   margin-bottom: 50px;
 }
 .mg_b_5 {
   margin-bottom: 30px;
 }
 @media screen and (max-width: 1080px) {
   .mg_b_1 {
     margin-bottom: 100px;
   }
   .mg_b_2 {
     margin-bottom: 80px;
   }
   .mg_b_3 {
     margin-bottom: 60px;
   }
   .mg_b_4 {
     margin-bottom: 40px;
   }
   .mg_b_5 {
     margin-bottom: 30px;
   }
 }
 @media screen and (max-width: 576px) {
   .mg_b_1 {
     margin-bottom: 80px;
   }
   .mg_b_2 {
     margin-bottom: 60px;
   }
   .mg_b_3 {
     margin-bottom: 50px;
   }
   .mg_b_4 {
     margin-bottom: 30px;
   }
   .mg_b_5 {
     margin-bottom: 20px;
   }
 }
 .mg_t_1 {
   margin-top: 150px;
 }
 .mg_t_2 {
   margin-top: 100px;
 }
 .mg_t_3 {
   margin-top: 80px;
 }
 .mg_t_4 {
   margin-top: 50px;
 }
 .mg_t_5 {
   margin-top: 30px;
 }
 @media screen and (max-width: 1080px) {
   .mg_t_1 {
     margin-top: 100px;
   }
   .mg_t_2 {
     margin-top: 80px;
   }
   .mg_t_3 {
     margin-top: 60px;
   }
   .mg_t_4 {
     margin-top: 40px;
   }
   .mg_t_5 {
     margin-top: 30px;
   }
 }
 @media screen and (max-width: 576px) {
   .mg_t_1 {
     margin-top: 80px;
   }
   .mg_t_2 {
     margin-top: 60px;
   }
   .mg_t_3 {
     margin-top: 50px;
   }
   .mg_t_4 {
     margin-top: 30px;
   }
   .mg_t_5 {
     margin-top: 20px;
   }
 }
 .pd_wrap {
   padding: 150px 80px 0;
 }
 .pd_wrap_all {
   padding: 150px 80px 150px;
 }
 .pd_wrap_side {
   padding-left: 80px;
   padding-right: 80px;
 }
 .pd_wrap_t {
   padding-top: 150px;
 }
 .pd_wrap_b {
   padding-bottom: 150px;
 }
 .pd_wrap_tb {
   padding-top: 150px;
   padding-bottom: 150px;
 }
 @media screen and (max-width: 1280px) {
   .pd_wrap {
     padding: 150px 60px 0;
   }
   .pd_wrap_all {
     padding: 150px 60px 150px;
   }
   .pd_wrap_side {
     padding-left: 60px;
     padding-right: 60px;
   }
 }
 @media screen and (max-width: 768px) {
   .pd_wrap {
     padding: 100px 50px 0;
   }
   .pd_wrap_all {
     padding: 100px 50px 100px;
   }
   .pd_wrap_side {
     padding-left: 50px;
     padding-right: 50px;
   }
   .pd_wrap_t {
     padding-top: 100px;
   }
   .pd_wrap_b {
     padding-bottom: 100px;
   }
   .pd_wrap_tb {
     padding-top: 100px;
     padding-bottom: 100px;
   }
 }
 @media screen and (max-width: 576px) {
   .pd_wrap {
     padding: 80px 20px 0;
   }
   .pd_wrap_all {
     padding: 80px 20px 80px;
   }
   .pd_wrap_side {
     padding-left: 20px;
     padding-right: 20px;
   }
   .pd_wrap_t {
     padding-top: 80px;
   }
   .pd_wrap_b {
     padding-bottom: 80px;
   }
   .pd_wrap_tb {
     padding-top: 80px;
     padding-bottom: 80px;
   }
 }
 html {}
 body {
   font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   background-color: #F4F4F4;
   color: #010000;
 }
 body .bg_img_wrap {
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
 }
 body.on .bg_img_wrap .bg_img {
   display: none;
 }
 body .bg_img_wrap2 {
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
 }
 body.on .bg_img_wrap2 > img {
   display: none;
 }
 a {
   display: inline-block;
   transition: ease 0.3s;
 }
 a:hover {
   opacity: 0.5;
 }
 a p, a, a i {
   color: #010000;
 }
 .font-medium {
   font-weight: 500;
 }
 .font-semibold {
   font-weight: 600;
 }
 .font-black {
   font-weight: 900;
 }
 .cate_wrap > .cate {
   padding-top: 150px;
 }
 /* ---------- common ---------- */
 /* ---------- header ---------- */
 .header {}
 /* ---------- footer ---------- */
 /* ANIME */
 .sc-anime.topin.on {
   opacity: 0;
   transform: translateY(-50px);
 }
 .sc-anime.topin.on.active {
   animation-name: topin;
   animation-duration: 1.2s;
   animation-timing-function: ease;
   animation-fill-mode: forwards;
 }
 .sc-anime.bottomin.on {
   opacity: 0;
   transform: translateY(50px);
 }
 .sc-anime.bottomin.on.active {
   animation-name: bottomin;
   animation-duration: 1.2s;
   animation-timing-function: ease;
   animation-fill-mode: forwards;
 }
 .sc-anime.leftin.on {
   opacity: 0;
   transform: translateX(-50px);
 }
 .sc-anime.leftin.on.active {
   animation-name: leftin;
   animation-duration: 1.2s;
   animation-timing-function: ease;
   animation-fill-mode: forwards;
 }
 .sc-anime.rightin.on {
   opacity: 0;
   transform: translateX(50px);
 }
 .sc-anime.rightin.on.active {
   animation-name: rightin;
   animation-duration: 1.2s;
   animation-timing-function: ease;
   animation-fill-mode: forwards;
 }
 .sc-anime.fadein.on {
   opacity: 0;
 }
 .sc-anime.fadein.on.active {
   animation-name: fadein;
   animation-duration: 1.2s;
   animation-timing-function: ease;
   animation-fill-mode: forwards;
 }
 .sc-anime.blurin.on {
   opacity: 0;
   -ms-filter: blur(6px);
   filter: blur(6px);
 }
 .sc-anime.blurin.on.active {
   animation-name: blurin;
   animation-duration: 1.2s;
   animation-timing-function: ease;
   animation-fill-mode: forwards;
 }
 .sc-anime.blurin2.on {
   opacity: 0;
   transform: translateY(50px);
   -ms-filter: blur(6px);
   filter: blur(6px);
 }
 .sc-anime.blurin2.on.active {
   animation-name: blurin2;
   animation-duration: 1.2s;
   animation-timing-function: ease;
   animation-fill-mode: forwards;
 }
 @keyframes topin {
   0% {
     opacity: 0;
     transform: translateY(-50px);
   }
   100% {
     opacity: 1;
     transform: translateY(0px);
   }
 }
 @keyframes bottomin {
   0% {
     opacity: 0;
     transform: translateY(50px);
   }
   100% {
     opacity: 1;
     transform: translateY(0px);
   }
 }
 @keyframes leftin {
   0% {
     opacity: 0;
     transform: translateX(-50px);
   }
   100% {
     opacity: 1;
     transform: translateX(0px);
   }
 }
 @keyframes rightin {
   0% {
     opacity: 0;
     transform: translateX(50px);
   }
   100% {
     opacity: 1;
     transform: translateX(0px);
   }
 }
 @keyframes upin {
   0% {
     transform: translateY(100%);
   }
   100% {
     transform: translateY(0);
   }
 }
 @keyframes fadein {
   0% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
 }
 @keyframes fadeout {
   0% {
     opacity: 1;
   }
   100% {
     opacity: 0;
   }
 }
 @keyframes blurin {
   0% {
     opacity: 0;
     -ms-filter: blur(6px);
     filter: blur(6px);
   }
   100% {
     opacity: 1;
     -ms-filter: blur(0px);
     filter: blur(0px);
   }
 }
 @keyframes blurin2 {
   0% {
     opacity: 0;
     transform: translateY(50px);
     -ms-filter: blur(6px);
     filter: blur(6px);
   }
   100% {
     opacity: 1;
     transform: translateY(0px);
     -ms-filter: blur(0px);
     filter: blur(0px);
   }
 }
 /* color */
 .txt-color-normal {
   color: #000000;
 }
 .txt-white {
   color: #ffffff;
 }
 .txt-red {
   color: red;
 }
 .txt-color1 {
   color: #FFE93C
 }
 .txt-color2 {
   color: #F1F1E9
 }
 .txt-color3 {
   color: #021745
 }
 .txt-color4 {
   color: #EBF5E5
 }
 .bg-white {
   background-color: #ffffff;
 }
 .bg-black {
   background-color: black
 }
 .bg-color1 {
   background-color: #FFE93C
 }
 .bg-color2 {
   background-color: #F1F1E9
 }
 .bg-color3 {
   background-color: #021745
 }
 .bg-color4 {
   background-color: #EBF5E5
 }
 .border-color1 {
   border-color: #FFE93C
 }
 .border-color2 {
   border-color: #F1F1E9
 }
 .border-color3 {
   border-color: #021745
 }
 .border-color4 {
   border-color: #EBF5E5
 }
 .hvr-txt-color-normal:hover {
   color: #000000;
 }
 .hvr-txt-white:hover {
   color: #ffffff;
 }
 .hvr-txt-red:hover {
   color: red;
 }
 .hvr-txt-color1:hover {
   color: #FFE93C
 }
 .hvr-txt-color2:hover {
   color: #F1F1E9
 }
 .hvr-txt-color3:hover {
   color: #021745
 }
 .hvr-txt-color4:hover {
   color: #EBF5E5
 }
 .hvr-bg-white:hover {
   background-color: #ffffff;
 }
 .hvr-bg-black:hover {
   background-color: black
 }
 .hvr-bg-color1:hover {
   background-color: #FFE93C
 }
 .hvr-bg-color2:hover {
   background-color: #F1F1E9
 }
 .hvr-bg-color3:hover {
   background-color: #021745
 }
 .hvr-bg-color4:hover {
   background-color: #EBF5E5
 }
 .hvr-border-color1:hover {
   border-color: #FFE93C
 }
 .hvr-border-color2:hover {
   border-color: #F1F1E9
 }
 .hvr-border-color3:hover {
   border-color: #021745
 }
 .hvr-border-color4:hover {
   border-color: #EBF5E5
 }
 /* ---------- IEのみ ---------- */
 @media all and (-ms-high-contrast: none) {}
 /* ---------- 1280px ~ ---------- */
 @media screen and (max-width: 1280px) {
   .pd_wrap {
     padding: 150px 60px 0;
   }
   .pd_wrap_all {
     padding: 150px 60px 150px;
   }
   .pd_wrap_side {
     padding-left: 60px;
     padding-right: 60px;
   }
   /* ---------- common ---------- */
   /* ---------- header ---------- */
   /* ---------- footer ---------- */
 }
 /* ---------- 1080px ~ ---------- */
 @media screen and (max-width: 1080px) {
   /* ---------- common ---------- */
   /* ---------- header ---------- */
   /* ---------- footer ---------- */
 }
 /* ---------- 768px ~ ---------- */
 @media screen and (max-width: 768px) {
   .pd_wrap {
     padding: 100px 50px 0;
   }
   .pd_wrap_all {
     padding: 100px 50px 100px;
   }
   .pd_wrap_side {
     padding-left: 50px;
     padding-right: 50px;
   }
   .cate_wrap > .cate {
     padding-top: 100px;
   }
   /* ---------- common ---------- */
   /* ---------- header ---------- */
   /* ---------- footer ---------- */
 }
 /* ---------- スマートフォン ---------- */
 /* ---------- 576px ~ ---------- */
 @media screen and (max-width: 576px) {
   .pd_wrap {
     padding: 80px 20px 0;
   }
   .pd_wrap_all {
     padding: 80px 20px 80px;
   }
   .pd_wrap_side {
     padding-left: 20px;
     padding-right: 20px;
   }
   .cate_wrap > .cate {
     padding-top: 80px;
   }
   /* ---------- common ---------- */
   /* ---------- header ---------- */
   /* ---------- footer ---------- */
 }
 /* ---------- 350px ~ ---------- */
 @media screen and (max-width: 350px) {}