@charset "UTF-8";
/* ----------------------------------------------------------------
TOP
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
FV
---------------------------------------------------------------- */
#fv {
    position: relative;
    width: 100%;
    padding: 230px 30px 30px;
}
#fv .inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    min-height: 658px;
    height: 40.7vw;
}
/* --- 新規：フェードスライドショーの定義 --- */
#fv .inner .fv-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    opacity: 0; /* 最初は非表示 */
    transition: opacity .7s ease; /* フレーム描画後のフェードイン用 */
}

/* 発火時に表示 */
#fv.is-fv-start .inner .fv-slider {
    opacity: 1;
    transition-delay: 1.8s; /* 既存の背景フェードイン時間に合わせる */
}

.fv-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fvFadeSlideshow 32s infinite; /* 4秒×4枚=16s */
}

/* 各スライドの画像とディレイ（8秒ずつずらす） */
.fv-slide:nth-child(1) {
    background-image: url("../img/fv_img01_2.jpg");
    animation-delay: 0s;
}
.fv-slide:nth-child(2) {
    background-image: url("../img/fv_img02_2.jpg");
	background-position: top center;
    animation-delay: 8s;
}
.fv-slide:nth-child(3) {
    background-image: url("../img/fv_img03_2.jpg");
    animation-delay: 16s;
}
.fv-slide:nth-child(4) {
    background-image: url("../img/fv_img04_02.jpg");
    animation-delay: 24s;
}

/* フェードアニメーションのキーフレーム */
@keyframes fvFadeSlideshow {
    0% { opacity: 0; transform: scale(1.0); }
    10% { opacity: 1; }
    25% { opacity: 1; }
    35% { opacity: 0; transform: scale(1.05); } /* 緩やかにズームアウトする効果 */
    100% { opacity: 0; }
}
#fv .inner .tl {
    position: absolute;
    font-size: clamp(2rem, -0.214rem + 4.68vw, 3rem);
    font-weight: 600;
    right: 20px;
    top: -2.3em;
}
#fv .inner .fv_anime_area {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    height: 100%;
    width: clamp(31.25rem, 25.457rem + 26.48vw, 40vw);
    padding: 0 0 50px 50px;
}
@media screen and (max-width: 767px) {
  /*Spのみ*/
#fv {
    padding: 200px 5vw 5vw;
	        height: 100svh;
}
#fv .inner {
    min-height: auto;
    height: 100%;
}
#fv .inner .tl {
    font-size: 1.7em;
    right: 2%;
    top: -3.8em;
}
#fv .inner .fv_anime_area {
    height: 100%;
    width: 300px;
    padding: 0 0 3% 3%;
}
.fv-slide:nth-child(1) {
    background-image: url("../img/fv_img01_sp.jpg");
    animation-delay: 0s;
}
.fv-slide:nth-child(2) {
    background-image: url("../img/fv_img02_sp.jpg");
    animation-delay: 8s;
}
.fv-slide:nth-child(3) {
    background-image: url("../img/fv_img03_sp.jpg");
    animation-delay: 16s;
}
.fv-slide:nth-child(4) {
    background-image: url("../img/fv_img04_sp_02.jpg");
    animation-delay: 24s;
}
}
/* ===============================
   FV SVG : stroke → fill
=============================== */
#fv .fv_anime_area .fv-txt-svg{
  width: 100%;
  height: auto;
  display: block;
	    overflow: inherit;
	shape-rendering: geometricPrecision;
}

#fv .fv_anime_area .fv-txt-svg path,
#fv .fv_anime_area .fv-txt-svg line,
#fv .fv_anime_area .fv-txt-svg polyline,
#fv .fv_anime_area .fv-txt-svg polygon,
#fv .fv_anime_area .fv-txt-svg rect,
#fv .fv_anime_area .fv-txt-svg circle,
#fv .fv_anime_area .fv-txt-svg ellipse{
  stroke: #000;
  stroke-width: 1;
  fill: #fff;
  fill-opacity: 0;
  stroke-dasharray: var(--pathLen, 1);
  stroke-dashoffset: var(--pathLen, 1);
}

#fv .fv_anime_area .fv-txt-svg.is-animate path,
#fv .fv_anime_area .fv-txt-svg.is-animate line,
#fv .fv_anime_area .fv-txt-svg.is-animate polyline,
#fv .fv_anime_area .fv-txt-svg.is-animate polygon,
#fv .fv_anime_area .fv-txt-svg.is-animate rect,
#fv .fv_anime_area .fv-txt-svg.is-animate circle,
#fv .fv_anime_area .fv-txt-svg.is-animate ellipse{
  animation:
    fvStroke 1.5s ease forwards,
    fvFill   .6s ease forwards 1.8s;
}

@keyframes fvStroke{
  to { stroke-dashoffset: 0; }
}

@keyframes fvFill{
  from { fill-opacity: 0; }
  to   { fill-opacity: 1; }
}

/* =======================================
   FV frame + bg fade + tl fade (layout keep)
======================================= */

#fv .inner:before{
  opacity: 0;
  transition: opacity .7s ease;
  z-index: 0;
}

#fv .inner .tl,
#fv .inner .fv_anime_area{
  z-index: 2;
}
#fv .inner .tl{
  opacity: 0;
}

/* フレーム線（spanはレイアウトに影響させない） */
#fv .inner .fv-frame{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3; /* 背景より上、文字より上でOK（消えるので） */
}

/* 右上起点：top + right（線幅1px） */
#fv .inner .fv-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(#000, #000) top right / 0% 1px no-repeat,
    linear-gradient(#000, #000) top right / 1px 0% no-repeat;
  opacity: 1;
}

/* 左下起点：bottom + left（線幅1px） */
#fv .inner .fv-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(#000, #000) bottom left / 0% 1px no-repeat,
    linear-gradient(#000, #000) bottom left / 1px 0% no-repeat;
  opacity: 1;
}

/* 発火クラス */
#fv.is-fv-start .inner .fv-frame::before{ animation: fvFrameTR 1.0s ease forwards; }
#fv.is-fv-start .inner .fv-frame::after { animation: fvFrameBL 1.0s ease forwards; }

/* 四角形を描き終わった後に背景フェードイン */
#fv.is-fv-start .inner:before{
  opacity: 1;
  transition-delay: 1.8s;
}

/* 背景フェードインと同時に線を消す */
#fv.is-fv-start .inner .fv-frame{
  animation: fvFrameOut .6s ease forwards;
  animation-delay: 1.8s;
}

/* その後 .tl をフェードイン（位置はそのまま） */
#fv.is-fv-start .inner .tl{
  animation: fvTlIn .6s ease forwards;
  animation-delay: 2.5s;
}

/* keyframes */
@keyframes fvFrameTR{
  0%  { background-size: 0% 1px, 1px 0%; }
  60% { background-size: 100% 1px, 1px 0%; }
  100%{ background-size: 100% 1px, 1px 100%; }
}
@keyframes fvFrameBL{
  0%  { background-size: 0% 1px, 1px 0%; }
  60% { background-size: 100% 1px, 1px 0%; }
  100%{ background-size: 100% 1px, 1px 100%; }
}
@keyframes fvFrameOut{ to{ opacity:0; } }
@keyframes fvTlIn{ to{ opacity:1; } }

/* fv_txt.svg が img のままでも位置が崩れないように保険 */
#fv .fv_anime_area img,
#fv .fv_anime_area svg{
  display: block;
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------------------------------
news
---------------------------------------------------------------- */
#news{
	padding: 100px 0;
}
#news > .inner{
	width: 90%;
	    max-width: 1150px;
    margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#news .box_l{
	width: 200px;
	margin-right: 100px;
}
#news .box_l .tl_area .sub{
	margin-bottom: 15px;
}
#news .box_l .tl_area h3{
	font-size: 2em;
	font-weight: 600;
	margin-bottom: 50px;
}
#news .box_r{
	    width: calc(100% - 300px);

}
#news .box_r .news_list > ul{
	border-bottom: solid 1px #000;
	padding-bottom: 20px;
}
#news .box_r .news_list > ul > li{
	border-top: solid 1px #000;
	padding-top: 23px;
	margin-top: 23px;
	font-size: 0.9em;
	font-weight: 600;
	display: flex;
}
#news .box_r .news_list ul li .data_area {
    display: flex;
    width: 195px;
    gap: 10px;
    align-items: center;
    margin-right: 60px;
}
#news .box_r .news_list ul li .data_area .day{
	    width: 6em;
    margin-right: 10px;
}
#news .box_r .news_list ul li .data_area .tag {
    width: 90px;
    text-align: center;
    transition: 0.4s;
    font-size: 0.8em;
    font-weight: 400;
    padding: 5px 15px;
    color: #fff;
}
#news .box_r .news_list ul li .data_area .tag:hover{
opacity: 0.6;
	text-decoration: none;
}
.cate{
	
}
.cate a {
    padding: 3px 7px;
    font-size: 0.7em;
    font-weight: 400;
    color: #fff;
    display: block;
    margin-bottom: 3px;
    text-align: center;
	    transition: 0.4s;
}
.cate .info_cate01{
	background: #00a99d;
}
.cate .info_cate02{
	background: #29abe2;
}
.cate .info_cate03{
	background: #ff7bac;
}
#news .box_r .news_list ul li .news_tl {
    width: calc(100% - 275px);
}
#news .box_r .news_list ul li .news_tl a{
	display: block;
	position: relative;
	transition: 0.4s;
}
@media screen and (min-width: 768px) {
#news .box_r .news_list ul li .news_tl a:hover{
	opacity: 0.4;
	text-decoration: none;
}
	.cate a:hover{
		text-decoration: none;
		opacity: 0.7;
	}
}
@media screen and (max-width: 767px) {
	
	#news {
    padding: 50px 0;
}
	#news > .inner {
    margin: 0 auto 20px;
    display: block;
}
	#news .box_l {
    width: 100%;
    margin-right: 0;
    text-align: center;
}
	#news .box_l .tl_area .sub {
    margin-bottom: 5px;
}
	#news .box_l .tl_area h3 {
    font-size: 1.7em;
    font-weight: 600;
    margin-bottom: 0;
}
	#news .box_l .btn{
		display: none;
	}
#news .box_r {
    width: 100%;
}
#news .box_r .news_list > ul {
    margin-bottom: 40px;
}
#news .box_r .news_list > ul > li {
    display: block;
}
#news .box_r .news_list ul li .data_area {
    width: 100%;
    justify-content: flex-start;
    margin-right: 0;
    margin-bottom: 15px;
}
.cate {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
	#news .box_r .news_list ul li .news_tl {
    width: 100%;
}
	#news .btn{
		width: 70%;
		margin: 0 auto;
	}
}
@media screen and (max-width: 767px) {
.no_post {
    padding: 20px 5% 30px;
    font-size: 1em;
	text-align: center;
}
	#news .btn .link{
		    margin: 0 auto;
	}
}
/* ----------------------------------------------------------------
service
---------------------------------------------------------------- */
#service {
    width: 100%;
    padding-top: 100px;
    position: relative;
}
#service > .inner {
    position: relative;
    padding: 150px 0 200px;
}
#service .bg_slideshow{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("../img/service_bg02.jpg") center top no-repeat;
	background-size: cover;
	top: 0;
	left: 0;
}
#service > .inner .content{
	position: relative;
	max-width: 950px;
	width: 90%;
	margin: 0 auto;
	color: #fff;
}
#service  .h2_tl_area {
    top: 0px;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 90%;
    max-width: 450px;
}
#service  .h2_tl_area .sub{
	color: #000;
}
#service  .h2_tl_area svg {
       height: 65px;
}
#service .txt_area {
    display: flex;
    justify-content: space-between;
}
#service .txt_area .box_l{
	width: calc(100% - 250px);
	margin-top: 250px;
}
#service .txt_area .box_l .txt01 {
    font-size: 1.2em;
    letter-spacing: 0.07em;
    line-height: 2.4;
    margin-bottom: 100px;
}
#service .txt_area .box_l .txt01 .txt{
	margin-bottom: 45px;
}
#service .txt_area .box_l .txt02 {
    font-size: 2.7em;
    letter-spacing: 0.07em;
    line-height: 1.7;
    font-weight: 600;
}
#service .txt_area .box_r{
	width: 220px;
	margin-left: 30px;
}
#service .txt_area .box_r .sticky{
	position: sticky;
    top: 150px;
}
#service .txt_area .box_r .v_w {
    writing-mode: vertical-rl;
    font-size: 2em;
    letter-spacing: 0.09em;
    font-weight: 600;
    white-space: nowrap;
    line-height: 2;
}
@media screen and (max-width: 767px) {
#service {
    padding-top: 70px;
}
	#service .h2_tl_area .tl_svg{
		margin: 0 auto;
	}
	#service  .h2_tl_area svg {
    height: 35px;
}
#service > .inner {
    padding: 50px 0 100px;
}
#service .txt_area .box_l {
    width: 70%;
    margin-top: 50px;
}
#service .txt_area .box_r {
    width: 27%;
    margin-left: 3%;
}
	
#service .txt_area .box_l .txt01 {
    font-size: 0.9em;
    margin-bottom: 50px;
}
#service .txt_area .box_l .txt01 .txt {
    margin-bottom: 25px;
}
#service .txt_area .box_l .txt02 {
    font-size: 1.4em;
    letter-spacing: 0.07em;
    line-height: 1.7;
}
#service .txt_area .box_r .sticky {
    top: 70px;
}
#service .txt_area .box_r .v_w {
    font-size: 1.2em;
	        letter-spacing: 0.3em;
    line-height: 1.5;
}
}
/* ===============================
   service 背景 縦ループ
=============================== */

#service .bg_slideshow{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  background: url("../img/service_bg02.jpg") center top repeat-y;
  background-size: cover;

  animation: serviceBgScroll 25s linear infinite;
}

@keyframes serviceBgScroll{
  0%   { background-position: center 0; }
  100% { background-position: center -1000px; }
}


/* ----------------------------------------------------------------
strengths
---------------------------------------------------------------- */
#strengths{
	background: #f2f2f2;
	padding: 120px 0 120px;
}
#strengths > .inner{
	max-width: 1200px;
	margin: 0 auto;
	width: 90%;
}
#strengths .tl_mini {
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 50px;
}
#strengths .st_box_area > .box{
	margin-bottom: 100px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 80px;
}
#strengths .st_box_area > .box.mb0
{
	margin-bottom: 0;
}
#strengths .st_box_area > .box .txt_box{
	width: 430px;	
}
#strengths .st_box_area > .box .img_box{
	width: calc(100% - 510px);	
	    min-width: 300px;
}
#strengths .st_box_area > .box:nth-child(even) .txt_box{
	order: 2;
}
#strengths .st_box_area > .box:nth-child(even) .img_box{
	order: 1;
}
#strengths .st_box_area > .box .img_box img{
	width: 100%;
	border: solid 1px #000;
}
#strengths .st_box_area > .box .txt_box .st_num{
	    margin-bottom: 50px;
}
#strengths .st_box_area > .box .txt_box .st_tl {
    font-size: 1.9em;
	font-weight: 600;
    margin-bottom: 50px;
}
#strengths .st_box_area > .box .st_txt{
	    line-height: 1.8;
}
@media screen and (max-width: 767px) {
	
#strengths {
    padding: 40px 0 40px;
}
#strengths .tl_mini {
    margin-bottom: 20px;
}
#strengths .st_box_area > .box .txt_box .st_num {
    margin-bottom: 10px;
	font-size: 0.9em;
}
#strengths .st_box_area > .box .txt_box .st_tl {
    margin-bottom: 20px;
    font-size: 1.3em;
}
#strengths .st_box_area > .box {
    display: block;
	    margin-bottom: 50px;
}
#strengths .st_box_area > .box .txt_box {
    width: 100%;
	margin-bottom: 20px;
}
#strengths .st_box_area > .box .img_box {
    width: 100%;
	        max-width: 500px;
	margin:  0 auto;
}
}
/* ----------------------------------------------------------------
product
---------------------------------------------------------------- */
#product{
	padding: 100px 0;
	text-align: center;
}
#product .btn a{
	margin: 0 auto;
	    max-width: 200px;
}
#product .h2_tl_area,
#product .dounny,
#product .btn{
	margin: 0 auto;
	width: 90%;
}
#product .h2_tl_area svg{
	    height: 65px;
}
.slid_area{
	margin: 50px 0;
}
#product .dounny{
	margin-top: 50px;
}
@media screen and (max-width: 767px) {
#product {
    padding: 50px 0;
}
#product .h2_tl_area svg {
    height: 35px;
}
	.slid_area{
	margin: 30px 0;
}
#product .dounny{
	margin-top: 30px;
}
}
/* ----------------------------------------------------------------
slider
---------------------------------------------------------------- */
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 20s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: 230px;
}
.scroll-infinity__item>img {
  width: 100%;
}
@media screen and (max-width: 767px) {
.scroll-infinity__item {
  width: 150px;
}
}
/* ----------------------------------------------------------------
bnr_area
---------------------------------------------------------------- */
#bnr_area .bnr{
	padding: 50px 0;
}
#bnr_area .bnr.b_aboutus{
	background: #f2f2f2;
}
#bnr_area .bnr > .inner > a {
    max-width: 1200px;
    width: 90%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    color: #fff;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    padding: 100px 7vw;
    height: 440px;
}
#bnr_area .bnr > .inner > a:hover{
	text-decoration: none;
}
#bnr_area .bnr > .inner > a:before, #bnr_area .bnr > .inner > a:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}
#bnr_area .bnr > .inner > a:after {
    background: #00000057;
    z-index: 1;
}
#bnr_area .bnr.b_aboutus > .inner > a:before{
    background: url("../img/bnr_aboutus02.jpg") center center no-repeat;
    background-size: cover;
    transition: all .3s ease-out;
    z-index: 0;
}
#bnr_area .bnr.b_recruit > .inner > a:before{
    background: url("../img/bnr_recruit02.jpg") center center no-repeat;
    background-size: cover;
    transition: all .3s ease-out;
    z-index: 0;
}
@media screen and (min-width: 768px) {
#bnr_area .bnr > .inner > a:hover:before {
    transform: scale(1.1);
}
}
#bnr_area .bnr > .inner > a > div {
    position: relative;
    z-index: 2;
}
#bnr_area .bnr .box_l .tl {
    font-size: clamp(3.125rem, 1.25rem + 4vw, 5rem);
    letter-spacing: 0.1em;
    line-height: 1.2;
}
#bnr_area .bnr .box_l .sub{
	    font-weight: 600;
}
#bnr_area .bnr .box_r p.txt{
	font-size: clamp(1.25rem, 0.5rem + 1.6vw, 2rem);
	font-weight: 550;
}
#bnr_area .bnr .box_r .btn{
	margin-top: 60px;
}
#bnr_area .bnr .box_r .btn .link{
	    max-width: 205px;
}
#bnr_area .bnr .box_r .btn .link::before{
	    background: #fff;
}
#bnr_area .bnr .box_r .btn .link .btn_arrow {
        background: #fff;
}
#bnr_area .bnr .box_r .btn .link svg {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 11px;
    height: 70%;
    display: block;
    color: #000;
    will-change: transform;
}
@media screen and (max-width: 767px) {
	#bnr_area .bnr {
    padding: 30px 0;
}
	#bnr_area .bnr > .inner > a {
    width: 90%;
    padding: 30px 20px;
    height: auto;
	display: block;
}
	#bnr_area .bnr .box_l .tl {
    font-size: 2.3em;
		margin-bottom: 10px;
}
#bnr_area .bnr .box_r p.txt {
    font-size: 1.3em;
    margin: 20px 0;
}
#bnr_area .bnr .box_r .btn {
    margin-top: 30px;
}
}