@charset "UTF-8";

/*---------------------------
  
  1.キービジュアル
  2.製品一覧
  3.製品紹介

---------------------------*/


/* ================================================================
 * 
 * キービジュアル
 * 
 * ================================================================ */

.kv{
    background-color: var(--color-bg-alt);
}

.kv__content{
    background:url(./../images/biz/kv-bg.webp) no-repeat left top;
    background-size: cover;
    padding-bottom: 4.5rem;
}

/******************Media Queries******************/
/* --- 960px: Standard Desktop --- */
@media (min-width: 960px) {
    .kv{
        margin-bottom: 0;
        padding-bottom: 0;
    }    
}

/* ----------------------------------------------------------------  
   title (kv__content-group) 
------------------------------------------------------------------- */ 
.kv__content-group{
    display: flex;
    flex-direction: column;
    max-width: 1450px;
    margin: 0 5%;
    padding: 4.9rem 0 3.2rem 0;
}

    .kv__heading{
        font-size: 3.6rem;
        line-height: 4.8rem;
        font-weight: var(--font-weight-light);
        color: var(--color-kv__heading);
        margin-bottom: 1.0rem;
    }

    .kv__heading span{
        background-image: linear-gradient(89deg, 
            rgba(19, 77, 165, 1) 0%, 
            rgba(34, 174, 209, 1) 50%, 
            rgba(14, 165, 99, 1) 100%
        );

        -webkit-background-clip: text; /* Chrome, Safari */
        background-clip: text;
        color: transparent; 
        -webkit-text-fill-color: transparent; /* Chrome, Safari */
    }

    .kv__text{
        text-align: left;
        font-size: 1.6rem;
        line-height: 2.4rem;
    }

/******************Media Queries******************/
/* --- 768px: Tablet Landscape & PC Base --- */
@media (min-width: 768px) {
    .kv__content-group{
        max-width: 1450px;
        margin: 0 3%;
        padding: 9.8rem 0 6.4rem 0;
    }
    
    .kv__heading{
        font-size: 7.2rem;
        line-height: 108px;
    }
    
    .kv__text{
        font-size: 2.4rem;
        line-height: 3.6rem;
    }
}

/* --- 1920px: Full HD Wide / Layout Expansion --- */
@media (min-width: 1920px) {
    .kv__content-group{
        max-width: 1780px;
        margin: 0 auto;
    }
    
    .kv__heading{
        font-size: 8.9rem;
        line-height: 13.35rem;
    }
    
    .kv__text{
        font-size: 4.0rem;
        line-height: 6.0rem;
    }
}

/* --- 1920px: 4K Display (200% Scaling) / High-Density Layout --- */
@media (min-width: 1920px) and (resolution: 2dppx) {
    .kv__content-group{
        max-width: 1650px;
    }
    
    .kv__heading{
        font-size: 8.2rem;
        line-height: 110px;
    }
    
    .kv__text{
        font-size: 3.0rem;
    }
}

/* ----------------------------------------------------------------  
   YouTube (kv-movie) 
------------------------------------------------------------------- */ 
.kv-movie{
    text-align: center;
    width: 94%;
    margin: 0 auto;
}

.kv-movie .js-modal-btn{
    border: none;
    border-radius: 24px;
}

.kv-movie .js-modal-btn:hover{
    cursor:pointer;
}

.kv-movie img{
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}

.kv-movie img:hover{
     filter: grayscale(0);
}

.kv-movie iframe {
  border: none;
}

/* モーダルのコンテンツを調整 */
@media (orientation: landscape) {
  .modal-video-inner {
    padding:0;
  }
}

/* ================================================================
 * 
 * 製品一覧
 * 
 * ================================================================ */

.product-list__card:not(:last-of-type) {
    margin-bottom: 4rem;
}
 
.product-list__card-img{
    margin-bottom: 2.4rem;
}

.product-list__card-title{
    margin-bottom: .9rem;
    text-align: center;
    font-size: 2.6rem;
    font-weight: var(--font-weight-medium);
}

.product-list__card-description{
    font-size: 1.8rem;
    line-height: 3.6rem;
    margin-bottom: 2.4rem;
    flex: 1;
}

/******************Media Queries******************/
/* --- 960px: Standard Desktop --- */
@media (min-width: 960px) {
    .product-list{
        display: flex;
        flex-wrap: wrap;
    }

    .product-list__card{
        width: 47%;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .product-list__card:first-of-type{
        margin-right: 6%;
    }
    
}

/* --- 1280px: Desktop Standard / Max Content Width --- */
@media (min-width: 1280px) {

    .product-list__card{
        width: 30%;
    }
    
    .product-list__card:first-of-type{
        margin-right: 5%;
    }

    .product-list__card:not(:last-of-type) {
        margin-right: 5%;
        margin-bottom: 0;
    }
    .product-list__card-title{
        margin-bottom: 1.8rem;
        text-align: center;   
    }

    .product-list__card-description{
        margin-bottom: 4.8rem;
    }
}


/*ボタン*/
.product-list__card-btn {
    font-size: 1.6rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 1.6rem;
    padding: 1.6rem 0;
    margin: 0 auto;
    text-align: center;

    border-radius: 100px;
    text-decoration: none;

    box-shadow: 0 5px 5px 0 rgba(0, 43, 71, 0.1);
    border: 2px solid var(--color-bg-alt);
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*基幹システム*/
.product-list__card-btn--biz {
    color: var(--color-text-main);
    border:2px solid var(--color-accent-biz)!important;
}
/*BTMシステム*/
.product-list__card-btn--btm {
    color: var(--color-text-main);
    border:2px solid var(--color-accent-btm)!important;
}
/*OBTシステム*/
.product-list__card-btn--obt {
    color: var(--color-text-main);
    border:2px solid var(--color-accent-obt)!important;
}


/******************Media Queries******************/
/* --- 960px: Standard Desktop --- */
@media (min-width: 960px) {
   .product-list__card-btn {
        width: 320px;
        margin-bottom: 0;
    }
}

.product-list__card-btn{
    position: relative;
}

.product-list__card-btn:hover{
    opacity: .8;
}

.product-list__card-btn::after {
    content: "";
    background:var(--color-accent-biz) url(./../images/icon-arrow-right.svg) no-repeat center center;
    background-size: 10px 13px;
    border-radius: 100px;
    display: inline-block;
    width: 30px;
    height: 30px;
    
    position: absolute;
    top: 50%;
    right: 14px;

    /* 既存の上下中央移動に rotate(90deg) を追加 */
    transform: translateY(-50%) rotate(90deg);
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
}

/*基幹システム*/
.product-list__card-btn--biz::after {
    background:var(--color-accent-biz) url(./../images/icon-arrow-right.svg) no-repeat center center;
}
/*BTMシステム*/
.product-list__card-btn--btm::after {
    background:var(--color-accent-btm) url(./../images/icon-arrow-right.svg) no-repeat center center;
}
/*OBTシステム*/
.product-list__card-btn--obt::after {
    background:var(--color-accent-obt) url(./../images/icon-arrow-right.svg) no-repeat center center;
}

/*製品　イメージ図*/
.product-flow {
    background-color: var(--color-bg-base);
    padding: 6.4rem 5% 6.4rem 5%;
}

.product-flow-header__title {
    font-weight: var(--font-weight-light);
    font-size: 3.4rem;
    margin-bottom: 2.4rem;
}


/******************Media Queries******************/
/* --- 768px: Tablet Landscape & PC Base --- */
@media (min-width: 768px) {
    .product-flow {
        background-size: auto;
    }
    .product-flow-header__title {
        font-size: 6rem;
        margin-bottom: 4.8rem;
    }
}
/* --- 960px: Standard Desktop --- */
@media (min-width: 960px) {
    .product-flow {
        padding: 12.8rem 3.3%;
    }
}

/* ================================================================
 * 
 * 製品紹介
 * 
 * ================================================================ */

.product-flow__content{
    max-width: 1920px;
    margin: 0 auto;
}

.product-flow__definition-text:not(:last-of-type){
    margin-bottom: 2.0rem;
}

/******************Media Queries******************/
/* --- 960px: Standard Desktop --- */
@media (min-width: 960px) {
    .product-flow__container{
        max-width: 1600px;
        margin: 0 auto;
    }
}
/* --- 1280px: Desktop Standard / Max Content Width --- */
@media (max-width: 1279px) {
    .product-flow__card-img{
        margin-bottom: 2.4rem;
        background: var(--color-bg-alt);
        padding: 1.0rem;
        border-radius: 6px;

    }
}

/*単体導入可能*/
.singleunit{
    display: block;
	
    border:1px solid var(--color-border);
    background:var(--color-bg-alt);
    padding: 0 .8rem;
    margin-right: .5rem;
    margin-bottom: .5rem;
    border-radius: 3px;
    font-size: 1.2rem;
    width:10.0rem;
    text-align: center;
}

/******************Media Queries******************/
/* --- 1280px: Desktop Standard / Max Content Width --- */
@media (min-width: 1280px) {
    .product-flow__definition-list{
        display: flex;
    } 
    
    .product-flow__definition-text{
        width:30%;
        margin-top: -70px;
        font-size: 1.8rem;
        line-height: 3.6rem;
    }

    .product-flow__definition-text:not(:last-of-type){
        margin-right: 5%;
        margin-bottom: 0;
    }
}

/* ----------------------------------------------------------------  
   製品別 
------------------------------------------------------------------- */

/*BTMシステム*/
#btm{
    background-color: var(--color-bg-base);
}
/*OBTシステム*/
#obt .product-details__container {
    padding-bottom: 0;
}

/******************Media Queries******************/
/* --- 768px: Tablet Landscape & PC Base --- */
@media (min-width: 768px) {
    /* 製品紹介文 */
    .product-description{
        margin-bottom: 4.8rem;
    }  
}



/* ----------------------------------------------------------------  
   ナビゲーション 
------------------------------------------------------------------- */
/*Bizシステム*/
#biz .product-details__slide-indicator{
    border:1px solid var(--color-accent-biz);
}

/* ★ 選択時（アクティブ時）のスタイル ★ */
#biz .swiper-pagination-bullet-active {
  background:var(--color-accent-biz);
}

/*BTMシステム*/
#btm .product-details__slide-indicator{
    border:1px solid var(--color-accent-btm);
}

/* ★ 選択時（アクティブ時）のスタイル ★ */
#btm .swiper-pagination-bullet-active {
    background:var(--color-accent-btm);
}

/*OBTシステム*/
#obt .product-details__slide-indicator{
    border:1px solid var(--color-accent-obt);
}

/* ★ 選択時（アクティブ時）のスタイル ★ */
#obt .swiper-pagination-bullet-active {
  background:var(--color-accent-obt);
}

/* ----------------------------------------------------------------  
   バナー
------------------------------------------------------------------- */

.product-details__bnr{
    text-align: center;
}

.product-details__bnr-obt,
.product-details__bnr-btm{
    text-decoration: none;
}

.product-details__bnr-obt:hover,
.product-details__bnr-btm:hover{
    opacity: .8;
}

.product-details__bnr-list{
    background:var(--color-accent-obt);
    color: var(--color-bg-alt);
    padding: 3.0rem 2.0rem;
    border-radius: 12px;
    text-align: left;
    box-shadow: rgba(0, 0, 0, 0.1) 0 10px 20px 0;
    
    position: relative;
}

    .product-details__bnr-list::after{
        content:"";
        display: inline-block;
        background:var(--color-accent-obt) url(./../images/icon-arrow-right.svg) no-repeat center center;
        background-size: 30px 36px;

        width: 46px;
        height: 46px;
        padding: 10px;
        transform: rotate(-45deg);
        border:1px solid #fff;
        border-radius: 100px;
        
        position: absolute;
        right: 20px;
        top: 20px
    }


/*btm*/
.product-details__bnr-btm .product-details__bnr-list{
    background:var(--color-accent-btm);
}

	.product-details__bnr-btm .product-details__bnr-list::after{
        background:var(--color-accent-btm) url(./../images/icon-arrow-right.svg) no-repeat center center;
        transform: none;
	}

/*タイトル*/
.product-details__bnr-title{
    font-size: 2.8rem;
    margin-bottom: 1.2rem;
    font-weight: var(--font-weight-semibold);
}

/*テキスト*/
.product-details__bnr-text{
    line-height: 2.4rem;
}

/******************Media Queries******************/
/* --- 1280px: Desktop Standard / Max Content Width --- */
@media (min-width: 1280px) {
    .product-details__bnr{
        margin: 0 auto;
    }    
	.product-details__bnr-obt,
	.product-details__bnr-btm{
		display: inline-block;
	}
    
    .product-details__bnr-list{
        width: 1000px;
        padding: 6.0rem 4.0rem;
		margin: 0 auto;
    }
    
    .product-details__bnr-list::after{
        
        width: 66px;
        height: 66px;
        padding: 10px;
        transform: rotate(-45deg);
        border:1px solid #fff;
        border-radius: 100px;
        
        position: absolute;
        right: 20px;
        top: 20px
    }

    /*タイトル*/
    .product-details__bnr-title{
        font-size: 6.0rem;
    	margin-bottom: 2.4rem;
    }
    
}




/*新機能のご紹介*/
/* 後ろに .features-bnr が続く場合の .product-info を指定 */
.product-info:has(.features-bnr) {
    padding-top: 4.0rem;
  }

.features-bnr{
	max-width: 600px;
	margin: 0 auto 4.0rem auto;
}
.features-bnr:hover{
	opacity: .8;
}

.features{
	max-width: 1600px;
	margin: 0 auto 4.0rem 0;
	background: #e0f4f7;
	
	border-radius: 6px;
}

/******************Media Queries******************/
/* --- 768px: Tablet Landscape & PC Base --- */
@media (min-width: 768px) {
    .features{
        margin: 0 0 4.0rem 0;
    }
}

/* --- 1280px: Desktop Standard / Max Content Width --- */
@media (min-width: 1920px) {
    .features{
        margin: 0 0 8.0rem 0;
    }
}

.features .features__title{
	color:var(--color-accent-obt);
	padding: 4.0rem 2.4rem .6rem 2.4rem;
	font-size: 3.0rem;
	font-weight: var(--font-weight-medium);
	text-align: center;
}

/******************Media Queries******************/
/* --- 768px: Tablet Landscape & PC Base --- */
@media (min-width: 768px) {
	.features .features__title{
		font-size: 4.0rem;
	}
}

.features__inner{
	padding: 0 1.2rem 1.2rem 1.2rem;
}
/******************Media Queries******************/
/* --- 768px: Tablet Landscape & PC Base --- */
@media (min-width: 768px) {
	.features__inner{
		padding: 0 4.0rem 4.0rem 4.0rem;
	}
}

.features__info{
	margin-bottom: 2.4rem;
	text-align: center;
}

.features__block{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.2rem;
}
/******************Media Queries******************/
/* --- 768px: Tablet Landscape & PC Base --- */
@media (min-width: 768px) {
    .features__block{
		flex-wrap: nowrap;
		gap: 2.4rem;
    }
}

.features__group{
	background:var(--color-bg-alt);
	border-radius: 6px;
	padding: 2.4rem;
	
}

/******************Media Queries******************/
/* --- 768px: Tablet Landscape & PC Base --- */
@media (min-width: 768px) {
	.features__group{
		width:50%;
	}
}

.features__subtitle{
	font-size: 2.0rem;
	margin-bottom: .6rem;
    font-weight: var(--font-weight-semibold);
	text-align: center;
}
/******************Media Queries******************/
/* --- 768px: Tablet Landscape & PC Base --- */
@media (min-width: 768px) {
	.features__subtitle{
		font-size: 2.4rem;
	}
}

.features__img{
	border:1px solid var(--color-border);
	margin-bottom: 1.6rem;
	border-radius: 3px;
	padding: 2.4rem;
}

/******************Media Queries******************/
/* --- 768px: Tablet Landscape & PC Base --- */
@media (min-width: 768px) {
    /*テキスト*/
    .features__text{
        font-size: 1.8rem;
        line-height: 3.6rem;
    }
}