@charset "UTF-8";

/* ================================================================

製品ページ共通

=================================================================== */

/*全体*/
.section{
    padding: 6.4rem 5%;
}


#biz,
#obt{
    background-color: var(--color-bg-alt);
}

/******************Media Queries******************/
/* --- 960px: Standard Desktop --- */
@media (min-width: 960px) {
    /*全体*/
    .section{
        padding: 12.8rem 3.3%;
    }
    
    .product-details__container {
        /*width: 100%;
        padding-left: calc(50% - 800px);*/
    }

    /* スライダーを包む要素 */
    .product-details__inner {
        width: 100%;
        overflow: visible;
    }
    
}


/* ================================================================
   製品紹介・概要（product-info）
=================================================================== */
.product-info{
    padding: 6.4rem 5% 6.4rem 5%;
    background:var(--color-bg-alt);
}

/******************Media Queries******************/
/* --- 960px: Standard Desktop --- */
@media (min-width: 960px) {
    .product-info{
        padding: 12.8rem 3.3% 12.8rem 3.3%;
    }
    
    .product-info__container{
        max-width: 1600px;
        margin: 0 auto;
    }
}

/* --- 1920px: Full HD Wide / Layout Expansion --- */
@media (min-width: 1920px) {
    .product-info{
        padding: 12.8rem 0;
    }
}

/* ----------------------------------------------------------------  
  タイトル
------------------------------------------------------------------- */
/* 製品タイトル */
.product-title{
    font-size: 1.8rem;
    line-height: 2.7rem;
    font-weight: var(--font-weight-regular);
}

/* 製品名（ルビ） */
.product-subtitle{
    font-size: 1.4rem;
    line-height: 1.4rem;
    margin-top: .6rem;
    font-weight: var(--font-weight-semibold);
}

/* 製品名 */
.product-name{
    font-size: 4rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: 1.2rem;
}

/* 製品紹介文 */
.product-description{
    margin-bottom: 2.4rem;
}

/*Biz*/
.product-name__biz {
  color: var(--color-accent-biz);
    margin-bottom: 1.6rem;
}

/*Inbound*/
.product-name__inbound {
    color: var(--color-accent-inbound);
}

/*Agent*/
.product-name__agent {
    color: var(--color-accent-agent);
}

/*Group*/
.product-name__group {
  color: var(--color-accent-group);
    margin-bottom: 1.6rem;
}



/******************Media Queries******************/
/* --- 768px: Tablet Landscape & PC Base --- */
@media (min-width: 768px) {
    /* 製品タイトル */
    .product-title{
        font-size: 4.0rem;
		line-height: 4.8rem;
        margin-bottom: 3.2rem;
    }

    /* 製品名（ルビ） */
    .product-subtitle{
        font-size: 1.8rem;
    }

    /* 製品名 */
    .product-name{
        font-size: 6.0rem;
        margin-bottom: 4.8rem;
    }  
    
    /* 製品紹介文 */
    .product-description{
        font-size: 2.4rem;
        line-height: 4.8rem;
        margin-bottom: 0;
    }  
}

/* ----------------------------------------------------------------  
   product-details__slide
------------------------------------------------------------------- */
@media (min-width: 960px) {
    .section.product-details{
        padding: 12.8rem 3.3%;
    }
	    
    .product-details__container{
        max-width: 1600px;
        margin: 0 auto;
    }
}

.product-details__slide {
    margin-bottom: 4.8rem;
    overflow: hidden;
}
/******************Media Queries******************/
/* --- 768px: Tablet Landscape & PC Base --- */
@media (min-width: 768px) {
    .product-details__slide {
        margin-bottom: 9.6rem;
		overflow: visible;
    }
}

/* ----------------------------------------------------------------  
   ナビゲーション 
------------------------------------------------------------------- */
.product-details__slide-nav {
    margin-bottom: 3.2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.product-details__slide-indicator {
    padding: 1.2rem 0;
    margin-bottom: 0.5rem;
    background: var(--color-bg-alt);

    font-size: 1.6rem;
    border-radius: 100px;
    font-weight: var(--font-weight-medium);
    text-align: center;
    width: 18.2rem;
}

.product-details__slide-indicator:hover {
    cursor: pointer;
    opacity: 0.8;
}

.swiper-pagination-bullet-active {
    color: var(--color-bg-alt);
}

/******************Media Queries******************/
/* --- 768px: Tablet Landscape & PC Base --- */
@media (min-width: 768px) {
    .product-details__slide-nav {
        justify-content: flex-start;
    }

    .product-details__slide-indicator:not(:last-of-type) {
        margin-right: 2.4rem;
    }
}
/* --- 960px: Standard Desktop --- */
@media (max-width: 959px) {
    .product-details__slide-nav {
        display: none;
    }
}

/* ----------------------------------------------------------------  
   スライダー
------------------------------------------------------------------- */
.product-details__slide-main {
    margin: 0;
    overflow: visible;
}

/******************Media Queries******************/
/* --- 768px: Tablet Landscape & PC Base --- */
@media (min-width: 768px) {
    .product-details__slide-main {
        width: 60%;
        margin-left: 0.8%;
    }
}

/* --- 1280px: Desktop Standard / Max Content Width --- */
@media (min-width: 1280px) {
    .product-details__slide-main {
        width: 38%;
    }
}

/*画像*/
.product-details__slide-card-img {
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 10px 20px 0;
    margin-bottom: 3rem;
}

/*タイトル*/
.product-details__slide-card-title {
    font-size: 1.8rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: 1.5rem;
}

/*テキスト*/
.product-details__slide-card-description {
    font-size: 1.6rem;
}

/******************Media Queries******************/
/* --- 768px: Tablet Landscape & PC Base --- */
@media (min-width: 768px) {
    
    /*タイトル*/
    .product-details__slide-card-title {
        font-size: 2.6rem;
    }

    /*テキスト*/
    .product-details__slide-card-description {
        font-size: 1.8rem;
        line-height: 3.6rem;
    }
}

/* ----------------------------------------------------------------  
   機能一覧
------------------------------------------------------------------- */

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

.product-details__spec-list {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--color-line);
    background-color: var(--color-bg-alt);
    max-width: 1600px;
}


/*機能名*/
.product-details__spec-term {
    padding: 1.2rem;
    font-weight: var(--font-weight-medium);
    width: 100%;
    border-bottom: 1px dashed var(--color-line);
}

/*説明文*/
.product-details__spec-desc {
    padding: 1.2rem;
    width: 100%;
}

.product-details__spec-desc:not(:last-of-type){
    border-bottom: 1px solid var(--color-line);
}

/******************Media Queries******************/
/* --- 960px: Standard Desktop --- */
@media (min-width: 960px) {
    /*機能名*/
    .product-details__spec-term {
        width: 20%;
        font-size: 1.8rem;
        border-right: 1px solid var(--color-line);

        display: flex;
        align-items: center;
    }
    
    .product-details__spec-term:last-of-type {
        border-bottom: none;
    }

    /*説明文*/
    .product-details__spec-desc {
        width: 80%;
        font-size: 1.8rem;
        line-height: 3.6rem;
    }

    .product-details__spec-desc:not(:last-of-type){
        border-bottom: 1px dashed var(--color-line);
    }
}

/* ----------------------------------------------------------------  
   機能一覧　アコーディオン
------------------------------------------------------------------- */
.btn-wrapper{
    max-width: 1600px;
}

.accordion {
    position: relative;
    padding-bottom: 40px;
}
.js-accordion-text {
    overflow: hidden;
    transition: mask-image 0.5s ease, -webkit-mask-image 0.5s ease;
}

/* 隠す要素の折りたたみ時のスタイル (シャドウ適用) */
.js-accordion-text.is-hide {
    height: 42.5rem;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}

/* 展開された時のスタイル (シャドウ解除) */
.js-accordion-text.is-show {
    mask-image: none;
    -webkit-mask-image: none;
}

/* ----------------------------------------------------------------  
   続きを読む / 閉じるボタンのスタイル
------------------------------------------------------------------- */
.accordion-btnarea{
    max-width: 1600px;
}

.accordion-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    width: fit-content;
    margin: 0 auto;
    z-index: 2;
    margin-top: -20px; /* 折りたたみコンテンツに重ねる */
}

/*アイコン*/
.accordion-btn::before {
    content: "";
    background: var(--color-primary) url(./../images/icon-arrow-right.svg) no-repeat center center;
    mix-blend-mode: multiply;
    background-size: 20px 26px;
    border-radius: 100px;
    width: 80px;
    height: 80px;

    /* アイコンとテキストの間に少しスペースを開ける（任意） */
    margin-bottom: 5px;

    /* アイコン90度回転 */
    transform: rotate(90deg);
}

.accordion-btn:hover {
    cursor: pointer;
    opacity: 0.8;
}

/* 続きを読むボタンのテキスト */
.accordion-btn::after {
    content: "続きを表示する";
    font-size: 1.4rem;
}

/* 閉じるボタンに切り替わった時のテキスト */
.accordion-btn.is-show::after {
    content: "閉じる";
}

.accordion-btn.is-show::before {
    /* アイコンを上向きに90度回転 */
    transform: rotate(-90deg);
}
/* ----------------------------------------------------------------  
   展開後のボタン (.accordion-btn.is-show)
------------------------------------------------------------------- */
.accordion-btn.is-show {
    margin-top: 20px;
}

/* ----------------------------------------------------------------  
   導入の流れ（introduction-flow）
------------------------------------------------------------------- */

.introduction-flow {
    background-color: var(--color-bg-base);
    padding: 6.4rem 0 6.4rem 5%;
}
/******************Media Queries******************/
/* --- 960px: Standard Desktop --- */
@media (min-width: 960px) {
    .introduction-flow{
        padding: 12.8rem 0 12.8rem 3.3%;
    }

    .introduction-flow__container {
        display: flex;
    }

    .introduction-flow-header {
        margin-right: 10.4rem;
    }

}


/* --- 1920px: Full HD Wide / Layout Expansion --- */
@media (min-width: 1920px) {
    .introduction-flow{
        padding: 12.8rem 3.3%;
    }
}

/* ----------------------------------------------------------------  
   導入の流れ（introduction-flow）フロー
------------------------------------------------------------------- */
/******************Media Queries******************/
/* --- 960px: Standard Desktop --- */
@media (min-width: 960px) {
    .introduction-flow__content {
        flex: 1;
        min-width: 0;
    }
}

.introduction-flow__inner {
    display: flex;
    gap: 2.4%;
    
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overflow-y: hidden;
}

/******************Media Queries******************/
/* --- 1920px: Full HD Wide / Layout Expansion --- */
@media (min-width: 1920px) {
    .introduction-flow__inner {
        width: auto;
    }
}
/* --- 1920px & Retina: Wide High-Resolution Image --- */
@media (min-width: 1920px) and (-webkit-min-device-pixel-ratio: 2),
(min-width: 1920px) and (min-resolution: 192dpi),
	(min-width: 1920px) and (min-resolution: 2dppx) {
		
	.introduction-flow__inner {
		gap: 1.6%;
	}
}

.introduction-flow__list {
    width: 18.2%;
    min-width: 260px;
}

/*開発プロセス*/
.introduction-flow__list-development {
    width: 38.2%;
    min-width: 542px;
}

/*プロセス*/
.introduction-flow__list-title {
    background: var(--color-text-main);
    color: var(--color-bg-alt);
    text-align: center;
    font-size: 1.8rem;
    padding: 0.65rem 0;
    margin-bottom: 3.2rem;
    border-radius: 3px;
}

/*入れ子*/
.introduction-flow__list-nest {
    display: flex;
    gap: 4.2%;
}

.introduction-flow__list-nest .introduction-flow__detail {
    width: 47.9%;
}

/*フローコンテンツ*/
.introduction-flow__detail {
    background: var(--color-bg-alt);
    border:1px solid var(--color-border);
    border-radius: 3px;
}

/*step*/
.introduction-flow__list-step {
    color: var(--color-subtext);
    font-size: 1.4rem;
    padding: 2.4rem 1.6rem;
}

.introduction-flow__list-img img {
    width: 100%;
}

/*desc*/
.introduction-flow__list-desc {
    padding: 2.4rem 1.6rem;
    font-size: 1.6rem;
    line-height: 3.2rem;

    height: 24rem;
}

/*納期*/
.introduction-flow-text {
    font-size: 1.6rem;
	line-height: 1.4;
	margin-top: .6rem;
}