/*-------------------------------------
//詳細ページ
--------------------------------------*/

/* グリッドレイアウト */
.about__product{
  grid-area: product;
  overflow-y: auto;
}

.about__product-details{
  grid-area: details;
  overflow-y: auto;
  padding: 20px;
  background-color: var(--color-white-bg);
  border-radius: var(--border-radius-10);
  margin: 10px;
  filter: drop-shadow(2px 4px 20px rgba(0, 0, 0, 0.08));
}

@media (max-width: 767px){

.about__product{
  overflow-y: visible;
}

.about__product-details{
  overflow-y: visible;
}
}


/*-------------------------------------
//制作物画像
--------------------------------------*/


/* PCサイズの場合、普通表示 / タブレット・スマホサイズになった場合、横スクロール表示*/
.about__product-figure--sp-scroll{
  display: block;
}

/* 制作物画像 */
.about__product-figure--sp-img{
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 10px auto;
  border-radius: var(--border-radius-10);
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.08));
}

/* 縦型の制作物画像の場合 */
.about__product-figure--sp-vertical-img{
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 10px auto;
  border-radius: var(--border-radius-10);
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.08));
}



@media (max-width: 767px){

/* PCサイズの場合、普通表示 / タブレット・スマホサイズになった場合、横スクロール表示*/
.about__product-figure--sp-scroll{
  display: flex;
  overflow-x: auto;
}

/* 制作物画像 */
.about__product-figure--sp-img{
  max-width: calc(100% - 50px);
  margin-left: 10px;
}

/* 縦型の制作物画像の場合 */
.about__product-figure--sp-vertical-img{
  max-width: calc(100% - 50px);
  margin-left: 10px;
}
}


/*-------------------------------------
//制作物説明
--------------------------------------*/

/* 項目ごとの幅 */
.about__product-mb{
  margin-bottom: 20px;
}


/* 制作物のタイトル */
.about__product-title{
  font-size: 1.2rem;
  letter-spacing: var(--letter-spacing-S);
  line-height: var(--line-height-S);
}

/* 項目ごとの名前 */
.about__product-list-name{
  font-size: .7rem;
  color: var(--color-whitegray-text);
}

/* ツールアイコン */
.about__product-tours{
  margin-top: 10px;
  gap:10px;
}
/* HTML・CSS・JSアイコンの場合 */
.about__product-tours-icon--lang img{
  width: 15px;
  height: auto;
}
/* adobeツールアイコンの場合 */
.about__product-tours-icon--adobe img{
  width: 18px;
  height: auto;
}


/* タイトル */
.about__product-design-title {
font-size: .9rem;
margin-bottom: 10px;
letter-spacing: var(--letter-spacing-XS);
}

/* プロセスごとの余白調整 */
.about__product-design-list {
gap: 10px;
letter-spacing: var(--letter-spacing-S);
margin-top: 5px;
}

/* 共通ブロック */
.about__product-design {
border-radius: var( --border-radius-5);
color: #fff;
padding: 15px 10px 5px 5px;
}

/* ラベル */
.about__product-label {
font-size: .8rem;
margin-bottom:8px;
}

/* 説明文 */
.about__product-description-list{
  list-style-position: inside;
  padding-left: 20px;
  margin: 0;
}

.about__product-description-dic {
letter-spacing: var(--letter-spacing-XS);
margin: 0;
line-height: var(--line-height-XL);
font-size: .75rem;
list-style: disc;
margin: 10px auto;
}


@media (max-width: 767px){

/* 制作物のタイトル */
.about__product-title{
  font-size: 1rem;
}

/* タイトル */
.about__product-design-title {
  font-size: .8rem;
 }

/* 共通ブロック */
.about__product-design {
  padding: 15px 10px 5px 5px;
}
.about__product-design:last-of-type {
  margin-bottom: 100px;
}

/* ラベル */
.about__product-label {
  margin-bottom:0px;
}

/* 説明文 */
.about__product-description-dic {
  margin: 13px auto;
  font-size: .8rem;
}
}


/*-------------------------------------
//カラーバリエーション
--------------------------------------*/
/* 背景色 */

/* 課題カラー */
.about__product-bg--phase-1 {
    background-color: var(--color-gray-bg);
  }
  
  .about__product-bg--phase-2 {
    background-color: var(--color-gray-bg);
  }
  
  .about__product-bg--phase-3 {
    background-color: var(--color-gray-bg);
  }
  
  .about__product-bg--phase-4 {
    background-color: var(--color-gray-bg);
  }
  
  .about__product-bg--result {
    background-color: var(--color-gray-bg);
  }
  

/* フォントカラー */

/* 課題カラー */
.about__product-text--phase-1 {
    color: #8D8D8D;
}

.about__product-text--phase-2 {
    color: #00ACCB;
}

.about__product-text--phase-3 {
    color: #0085CC;
}

.about__product-text--phase-4 {
    color: #0060c0;
}

.about__product-text--result {
    color: #FF7600;
}


/*-------------------------------------
//矢印
--------------------------------------*/
  .about__product-design-arrow {
    width: 0;
    height: 0;
    margin: 0 auto;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #c6c6c6;
  }


/*-------------------------------------
//プロフィール
--------------------------------------*/

.about__product-figure--profile{
  max-width: 500px;
  width: 100%;
  padding: 20px;
  margin: 0 auto 100px;
  }