@charset "UTF-8";
/*
*	Title: SCSK サービス詳細用
*	URI: 
*	Last Modified: 
*	Description: メインカラム（サービス詳細内容）
*/
.index-column {
  display: block;
  width: 100%;
  height: 90px;
}

.index-column a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.index-column a .index-column-title-text {
  display: inline-block;
  width: 770px;
}

.index-column a .index-column-title-text .index-column-title {
  padding: 2px 20px;
  border-radius: 5px;
  display: inline-block;
}

.index-column a .index-column-title-text .index-column-text {
  color: #000;
  font-size: 16px;
  font-weight: bold;
  display: block;
  margin-top: 1em;
}

.index-column a .index-column-img {
  width: 200px;
  display: inline-block;
  position: absolute;
  top: 0;
}

/*body {color: #666;}*/
#citrine .geodict_logo {
  margin: 0 1.5em 1em auto;
}

/* 解析結果ページのその他の画像表示部分で使用 */
#citrine .ar_other .flex-item {
  flex-basis: 33%; /* 子要素の横幅 */
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 2em;
  text-align: center;
}

/* shibori-komi */
#citrine .article-list {
  margin-top: 2em;
  margin-bottom: 2em;
}

#citrine .article-list-item {
  display: inline-block;
  background-color: beige;
  margin-right: 2em;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
}

#citrine div.tag {
  margin-top: 0.5em;
}

#citrine span.article-tag {
  padding: 10px 12px;
  background: #999999;
  color: #ffffff;
  display: table-cell;
  border-radius: 15px;
  text-align: center;
  vertical-align: middle;
  font-size: 80% !important;
}

#citrine span.article-tag > *:not(:last-child) {
  margin-right: 5px;
}

#select-tag-wrapper span.search-tag, #select-tag-wrapper span.tag-clear {
  line-height: 1.5;
  text-decoration: none !important;
  display: inline-block;
  padding: 2px 4px 0 4px;
  margin-right: 5px;
  background-color: rgba(0, 102, 255, 0.05);
  color: #297bab;
  cursor: pointer;
  font-size: 115% !important;
}

#select-tag-wrapper span.search-tag.is-active, #select-tag-wrapper span.tag-clear.is-active {
  color: white;
  background-color: rgb(17, 66, 142);
}

article.article-list-item.is-active {
  animation: zoom-in 0.5s ease-in-out;
}

@keyframes zoom-in {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  75% {
    opacity: 0.3;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
#citrine .is-hide {
  display: none;
}

#select-tag-clear {
  text-align: right;
  margin-top: 1em;
}

#select-tag-clear span.tag-clear {
  font-size: 1.2em;
}

span.tag-clear::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900 !important;
  content: "\f069";
  margin-right: 3px;
}

span.search-tag::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900 !important;
  content: "\f02e";
  margin-right: 10px;
  font-size: 120% !important;
}

body.backnumber-page #select-tag h3 {
  font-size: 1em;
  margin-bottom: 1em;
}

#category div {
  margin-bottom: 0.2em;
}

.flx {
  display: flex;
  flex-wrap: wrap;
}

.flx-r-reverce {
  flex-direction: row-reverse;
}

.flx-ai--end {
  align-items: flex-end;
}

.flx-ai--center {
  align-items: center;
}

.flx-as--end {
  align-self: flex-end;
}

#citrine .ttl-List-flx {
  position: relative;
}

#citrine .ttl-List-flx-1 {
  position: relative;
}

#citrine .ttl-List-flx-2 {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  position: relative;
}

#citrine .ttl-List-flx li {
  cursor: pointer;
  padding-top: 0.8em;
  padding-bottom: 0.2em;
}

#citrine .ttl-List-flx li a {
  color: #000;
  font-size: 18px;
  font-weight: bold;
}

#citrine .column-thum {
  height: 90px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.v-align--middle {
  vertical-align: middle;
}

.v-align--bottom {
  vertical-align: bottom;
}

.index-column a:hover {
  opacity: 0.7;
}

.bd-radius--5 {
  border-radius: 5px !important;
}

.bg-blue-column {
  background: #0070C0;
  padding: 2px 20px;
  border-radius: 5px;
  display: inline-block;
  color: #FFF;
  font-weight: bold;
}

.top-img {
  position: relative;
}

.top-img .img-text {
  color: #FFF;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 40%;
  left: 50px;
  transform: translateY(-50%);
  line-height: 120%;
}

.top-img .img-text .colored {
  color: #F08300;
  font-style: oblique;
}

/*スマホ表示の調整  動画紹介ページ 動画枠サイズ、右マージン */
@media screen and (max-width: 767px) and (min-width: 1px) {
  #citrine .article-list-item {
    width: 100%;
    margin-right: 0 !important;
  }
}
/*スマホ表示の調整  2行表示 */
@media screen and (max-width: 767px) and (min-width: 1px) {
  #citrine .ar_other .flex-item {
    flex-basis: 50%; /* 子要素の横幅 */
  }
}
/*スマホ表示の調整  1行表示 */
@media screen and (max-width: 570px) {
  #citrine .ar_other .flex-item {
    flex-basis: 100%; /* 子要素の横幅 */
  }
}
/* 仮想構造物ページの画像表示部分で使用 */
#citrine #virtual_structure .flex-item {
  flex-basis: 25%; /* 子要素の横幅 */
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 2em;
  text-align: center;
}

/*スマホ表示の調整  3行表示 */
@media screen and (max-width: 767px) and (min-width: 1px) {
  #citrine #virtual_structure .flex-item {
    flex-basis: 33%; /* 子要素の横幅 */
  }
}
/*スマホ表示の調整  2行表示 */
@media screen and (max-width: 570px) {
  #citrine #virtual_structure .flex-item {
    flex-basis: 50%; /* 子要素の横幅 */
  }
}
/*解析結果ページの動画の下のキャプション表示の一部で使用*/
/* スマホ表示時の調整 */
@media screen and (max-width: 767px) and (min-width: 1px) {
  #citrine #analysis_result .caption1 {
    width: 70% !important;
  }
}
@media screen and (max-width: 580px) {
  #citrine #analysis_result .caption1 div {
    float: none !important;
    width: 100% !important;
  }
}
/* タブ */
.tab1 {
  display: flex;
  flex-direction: row;
  text-align: center;
  background-color: #fff !important;
  margin: 0 !important;
}

.tab1__item {
  flex: 1;
  flex-basis: 120px;
}

.tab1__link {
  display: block;
  text-decoration: none;
  color: #fff;
  background-color: #0a2986;
  cursor: pointer;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding: 0.5em 0;
  margin-right: 1px;
}

.tab1__link.on {
  background-color: #007aff;
}

.tab1-body__item {
  margin: 30px 15px;
  display: none;
  text-align: center;
}

.tab1-body__item.on {
  display: block;
}

#embed-vimeo5 {
  height: 360px;
  width: 640px;
}

@media screen and (min-width: 1px) and (max-width: 767px) {
  #embed-vimeo5 {
    height: auto;
    width: 100%;
  }
}
.bg-darkgray {
  background: #404040;
}

ul.link-list-dot.list-dot-white > li:before {
  color: #FFF;
}

.height-110 {
  height: 110px;
}

@media screen and (min-width: 1px) and (max-width: 767px) {
  .height-110 {
    height: auto;
  }
  .index-column {
    width: 100%;
    height: 200px;
    display: block;
  }
  .index-column a {
    width: 100%;
    display: block;
  }
  .index-column a .index-column-title-text {
    width: 100%;
    display: block;
    position: relative;
    top: 0;
  }
  .index-column a .index-column-title-text .index-column-text {
    width: 100%;
    display: block;
    position: relative;
    top: 90px;
  }
  .index-column a .index-column-img {
    width: 100%;
    height: 90px;
    display: block;
    position: absolute;
    top: 30px;
    left: 0;
  }
  .index-column a .index-column-img img {
    width: 100%;
    height: 90px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .sp-flx-c-reverce {
    flex-direction: column-reverse;
  }
  .top-img .img-text {
    font-size: 18px;
    left: 20px;
    text-shadow: 0px 0px 10px rgb(0, 0, 0);
  }
  .top-img .img-text .colored {
    text-shadow: none;
  }
}
.youtube {
  aspect-ratio: 16/9;
  width: 560px;
  height: 315px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) and (min-width: 1px) {
  .youtube {
    height: auto;
    width: 100%;
    aspect-ratio: 16/9;
    margin: 0 auto;
  }
}
/*	2024/06/03
----------------------------------------------------------*/
.seminar20240724-banner {
  width: 100%;
  position: relative;
}

.sem-ban-absolute {
  position: absolute;
  top: 0;
  left: 0;
}

.col-sem {
  color: #385723;
}

.height50 {
  height: 50px;
}

.sem-ban-bg-white {
  background: #e7efe1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 50px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-top: 17px;
  font-size: 20px;
  font-weight: bold;
}

.h-ttl05 {
  text-indent: 0;
  padding-left: 0;
}

a.flex-btn-link.font11:after {
  top: 55%;
}

.txt-shadow {
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
}

.mT12 {
  margin-top: 12px !important;
}

@media screen and (max-width: 767px) and (min-width: 1px) {
  .sem-ban-absolute {
    top: 5px;
    left: 0;
  }
  .font20 {
    font-size: 18px !important;
    letter-spacing: -0.08em;
  }
  .font18 {
    font-size: 16px !important;
    letter-spacing: -0.02em !important;
  }
  .sem-ban-bg-white {
    padding-right: 20px;
    margin-left: 20px;
    font-size: 18px !important;
    margin-top: 20px;
  }
  .sp-lh150 {
    line-height: 150% !important;
  }
}
/*
2024/10/22
***********************************************/
.flx-ai-center {
  align-items: center;
}

@media screen and (max-width: 767px) and (min-width: 1px) {
  .sp-mL1em {
    margin-left: 1em !important;
  }
}
/*---  2025/5/22 製品資料ダウンロード************/
ul.dl_material li span.download-img {
  display: table-cell;
  vertical-align: middle;
  width: 140px;
  padding: 10px 40px;
}

ul.dl_material li span.download-img img {
  width: 60px !important;
}

ul.dl_material li span.download-text {
  display: table-cell;
  vertical-align: middle;
  height: 100px;
  width: calc(100% - 140px);
  font-weight: bold;
  font-size: 120% !important;
}

.flx-ai--end {
  align-items: flex-end;
}

/*---  製品資料ダウンロード  ---------------------------------*/
/* レスポンシブ対応 */
ul.dl_material li span.download-img {
  width: 100px;
  padding: 10px 20px;
}

ul.dl_material li span.download-text {
  width: calc(100% - 100px);
}

@media screen and (min-width: 1px) and (max-width: 767px) and (max-width: 768px) {
  #citrine ul.dl_material li span.download-img img {
    width: 50px !important;
  }
}

/* citrineダウンロードリンクボックス */
#citrine .d-linkbox {
  width: 100%;
  border-top: 5px solid #1a2792;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background: #fff;
  font-weight: bold;
  position: relative;
  margin-bottom: 20px;
}

#citrine .d-linkbox:hover {
  background: #1a2792;
  color: #fff;
}

#citrine .d-linkbox:hover .d-linkbox-text:after {
  color: #fff;
}

#citrine .d-linkbox:hover img {
  opacity: 0.7;
}

#citrine .d-linkbox .d-linkbox-text {
  padding: 10px;
  margin: 0;
}

#citrine .d-linkbox .d-linkbox-text:after {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: 900 !important;
  color: #666;
  position: absolute;
  top: 8px;
  right: 0;
  width: 20px;
  height: 20px;
}

#citrine .d-linkbox img {
  width: 100%;
  height: 165px;
  -o-object-fit: cover;
     object-fit: cover;
}

#citrine .d-linkbox a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -100000px;
}

@media screen and (max-width: 768px) {
  #citrine .d-linkbox {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}
.article_serialization_item::before {
  content: "▶";
  margin-right: 5px;
  color: #333;
}

.article_serialization_item a {
  color: #000;
  text-decoration: none;
}

a.bb-bluegray {
  background-color: #106287 !important;
  border: 1px solid #106287 !important;
  padding: 0.5em;
}
a.bb-bluegray:hover {
  color: #106287 !important;
  background-color: #FFFFFF !important;
}

.d-ml--auto {
  margin-left: auto;
}

.d-bd-radius--0 {
  border-radius: 0px !important;
}

.d-bd-top-left-radius--0 {
  border-top-left-radius: 0px !important;
}

.d-bd-top-right-radius--0 {
  border-top-right-radius: 0px !important;
}

.d-bd-bottom-left-radius--0 {
  border-bottom-left-radius: 0px !important;
}

.d-bd-bottom-right-radius--0 {
  border-bottom-right-radius: 0px !important;
}

.d-bd-radius--5 {
  border-radius: 5px !important;
}

.d-bd-top-left-radius--5 {
  border-top-left-radius: 5px !important;
}

.d-bd-top-right-radius--5 {
  border-top-right-radius: 5px !important;
}

.d-bd-bottom-left-radius--5 {
  border-bottom-left-radius: 5px !important;
}

.d-bd-bottom-right-radius--5 {
  border-bottom-right-radius: 5px !important;
}

.d-bd-radius--10 {
  border-radius: 10px !important;
}

.d-bd-top-left-radius--10 {
  border-top-left-radius: 10px !important;
}

.d-bd-top-right-radius--10 {
  border-top-right-radius: 10px !important;
}

.d-bd-bottom-left-radius--10 {
  border-bottom-left-radius: 10px !important;
}

.d-bd-bottom-right-radius--10 {
  border-bottom-right-radius: 10px !important;
}

.d-bd-radius--15 {
  border-radius: 15px !important;
}

.d-bd-top-left-radius--15 {
  border-top-left-radius: 15px !important;
}

.d-bd-top-right-radius--15 {
  border-top-right-radius: 15px !important;
}

.d-bd-bottom-left-radius--15 {
  border-bottom-left-radius: 15px !important;
}

.d-bd-bottom-right-radius--15 {
  border-bottom-right-radius: 15px !important;
}

.d-bd-radius--20 {
  border-radius: 20px !important;
}

.d-bd-top-left-radius--20 {
  border-top-left-radius: 20px !important;
}

.d-bd-top-right-radius--20 {
  border-top-right-radius: 20px !important;
}

.d-bd-bottom-left-radius--20 {
  border-bottom-left-radius: 20px !important;
}

.d-bd-bottom-right-radius--20 {
  border-bottom-right-radius: 20px !important;
}

.d-bd-radius--25 {
  border-radius: 25px !important;
}

.d-bd-top-left-radius--25 {
  border-top-left-radius: 25px !important;
}

.d-bd-top-right-radius--25 {
  border-top-right-radius: 25px !important;
}

.d-bd-bottom-left-radius--25 {
  border-bottom-left-radius: 25px !important;
}

.d-bd-bottom-right-radius--25 {
  border-bottom-right-radius: 25px !important;
}

.d-bd-radius--30 {
  border-radius: 30px !important;
}

.d-bd-top-left-radius--30 {
  border-top-left-radius: 30px !important;
}

.d-bd-top-right-radius--30 {
  border-top-right-radius: 30px !important;
}

.d-bd-bottom-left-radius--30 {
  border-bottom-left-radius: 30px !important;
}

.d-bd-bottom-right-radius--30 {
  border-bottom-right-radius: 30px !important;
}

.d-bd-radius--35 {
  border-radius: 35px !important;
}

.d-bd-top-left-radius--35 {
  border-top-left-radius: 35px !important;
}

.d-bd-top-right-radius--35 {
  border-top-right-radius: 35px !important;
}

.d-bd-bottom-left-radius--35 {
  border-bottom-left-radius: 35px !important;
}

.d-bd-bottom-right-radius--35 {
  border-bottom-right-radius: 35px !important;
}

.d-bd-radius--40 {
  border-radius: 40px !important;
}

.d-bd-top-left-radius--40 {
  border-top-left-radius: 40px !important;
}

.d-bd-top-right-radius--40 {
  border-top-right-radius: 40px !important;
}

.d-bd-bottom-left-radius--40 {
  border-bottom-left-radius: 40px !important;
}

.d-bd-bottom-right-radius--40 {
  border-bottom-right-radius: 40px !important;
}

.d-bd-radius--45 {
  border-radius: 45px !important;
}

.d-bd-top-left-radius--45 {
  border-top-left-radius: 45px !important;
}

.d-bd-top-right-radius--45 {
  border-top-right-radius: 45px !important;
}

.d-bd-bottom-left-radius--45 {
  border-bottom-left-radius: 45px !important;
}

.d-bd-bottom-right-radius--45 {
  border-bottom-right-radius: 45px !important;
}

.d-bd-radius--50 {
  border-radius: 50px !important;
}

.d-bd-top-left-radius--50 {
  border-top-left-radius: 50px !important;
}

.d-bd-top-right-radius--50 {
  border-top-right-radius: 50px !important;
}

.d-bd-bottom-left-radius--50 {
  border-bottom-left-radius: 50px !important;
}

.d-bd-bottom-right-radius--50 {
  border-bottom-right-radius: 50px !important;
}

/* ==========================================================================//
//
//　SP版
//
// ========================================================================== */
@media screen and (max-width: 768px) and (min-width: 1px) {
  .d-sp-bd-radius--0 {
    border-radius: 0px !important;
  }
  .d-sp-bd-top-left-radius--0 {
    border-top-left-radius: 0px !important;
  }
  .d-sp-bd-top-right-radius--0 {
    border-top-right-radius: 0px !important;
  }
  .d-sp-bd-bottom-left-radius--0 {
    border-bottom-left-radius: 0px !important;
  }
  .d-sp-bd-bottom-right-radius--0 {
    border-bottom-right-radius: 0px !important;
  }
  .d-sp-bd-radius--5 {
    border-radius: 5px !important;
  }
  .d-sp-bd-top-left-radius--5 {
    border-top-left-radius: 5px !important;
  }
  .d-sp-bd-top-right-radius--5 {
    border-top-right-radius: 5px !important;
  }
  .d-sp-bd-bottom-left-radius--5 {
    border-bottom-left-radius: 5px !important;
  }
  .d-sp-bd-bottom-right-radius--5 {
    border-bottom-right-radius: 5px !important;
  }
  .d-sp-bd-radius--10 {
    border-radius: 10px !important;
  }
  .d-sp-bd-top-left-radius--10 {
    border-top-left-radius: 10px !important;
  }
  .d-sp-bd-top-right-radius--10 {
    border-top-right-radius: 10px !important;
  }
  .d-sp-bd-bottom-left-radius--10 {
    border-bottom-left-radius: 10px !important;
  }
  .d-sp-bd-bottom-right-radius--10 {
    border-bottom-right-radius: 10px !important;
  }
  .d-sp-bd-radius--15 {
    border-radius: 15px !important;
  }
  .d-sp-bd-top-left-radius--15 {
    border-top-left-radius: 15px !important;
  }
  .d-sp-bd-top-right-radius--15 {
    border-top-right-radius: 15px !important;
  }
  .d-sp-bd-bottom-left-radius--15 {
    border-bottom-left-radius: 15px !important;
  }
  .d-sp-bd-bottom-right-radius--15 {
    border-bottom-right-radius: 15px !important;
  }
  .d-sp-bd-radius--20 {
    border-radius: 20px !important;
  }
  .d-sp-bd-top-left-radius--20 {
    border-top-left-radius: 20px !important;
  }
  .d-sp-bd-top-right-radius--20 {
    border-top-right-radius: 20px !important;
  }
  .d-sp-bd-bottom-left-radius--20 {
    border-bottom-left-radius: 20px !important;
  }
  .d-sp-bd-bottom-right-radius--20 {
    border-bottom-right-radius: 20px !important;
  }
  .d-sp-bd-radius--25 {
    border-radius: 25px !important;
  }
  .d-sp-bd-top-left-radius--25 {
    border-top-left-radius: 25px !important;
  }
  .d-sp-bd-top-right-radius--25 {
    border-top-right-radius: 25px !important;
  }
  .d-sp-bd-bottom-left-radius--25 {
    border-bottom-left-radius: 25px !important;
  }
  .d-sp-bd-bottom-right-radius--25 {
    border-bottom-right-radius: 25px !important;
  }
  .d-sp-bd-radius--30 {
    border-radius: 30px !important;
  }
  .d-sp-bd-top-left-radius--30 {
    border-top-left-radius: 30px !important;
  }
  .d-sp-bd-top-right-radius--30 {
    border-top-right-radius: 30px !important;
  }
  .d-sp-bd-bottom-left-radius--30 {
    border-bottom-left-radius: 30px !important;
  }
  .d-sp-bd-bottom-right-radius--30 {
    border-bottom-right-radius: 30px !important;
  }
  .d-sp-bd-radius--35 {
    border-radius: 35px !important;
  }
  .d-sp-bd-top-left-radius--35 {
    border-top-left-radius: 35px !important;
  }
  .d-sp-bd-top-right-radius--35 {
    border-top-right-radius: 35px !important;
  }
  .d-sp-bd-bottom-left-radius--35 {
    border-bottom-left-radius: 35px !important;
  }
  .d-sp-bd-bottom-right-radius--35 {
    border-bottom-right-radius: 35px !important;
  }
  .d-sp-bd-radius--40 {
    border-radius: 40px !important;
  }
  .d-sp-bd-top-left-radius--40 {
    border-top-left-radius: 40px !important;
  }
  .d-sp-bd-top-right-radius--40 {
    border-top-right-radius: 40px !important;
  }
  .d-sp-bd-bottom-left-radius--40 {
    border-bottom-left-radius: 40px !important;
  }
  .d-sp-bd-bottom-right-radius--40 {
    border-bottom-right-radius: 40px !important;
  }
  .d-sp-bd-radius--45 {
    border-radius: 45px !important;
  }
  .d-sp-bd-top-left-radius--45 {
    border-top-left-radius: 45px !important;
  }
  .d-sp-bd-top-right-radius--45 {
    border-top-right-radius: 45px !important;
  }
  .d-sp-bd-bottom-left-radius--45 {
    border-bottom-left-radius: 45px !important;
  }
  .d-sp-bd-bottom-right-radius--45 {
    border-bottom-right-radius: 45px !important;
  }
  .d-sp-bd-radius--50 {
    border-radius: 50px !important;
  }
  .d-sp-bd-top-left-radius--50 {
    border-top-left-radius: 50px !important;
  }
  .d-sp-bd-top-right-radius--50 {
    border-top-right-radius: 50px !important;
  }
  .d-sp-bd-bottom-left-radius--50 {
    border-bottom-left-radius: 50px !important;
  }
  .d-sp-bd-bottom-right-radius--50 {
    border-bottom-right-radius: 50px !important;
  }
}/*# sourceMappingURL=detail.css.map */

/* FAQページ   リスト ━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
#citrine ul.faq > li:nth-child(2n){
    margin-bottom:2em;
}
#citrine ul.faq > li{
    padding:0.5em 0.5em 0.5em 5em;
    border-bottom:1px solid #ccc;
}

#citrine ul.faq li span.mark-Q, #citrine ul.faq li span.mark-A {
    display:table-cell;
    vertical-align: top;
    font-size:190%;
    font-weight: bold;
}
#citrine ul.faq li span.mark-Q {
    color:#007aff!important; /* blue系 */
}

#citrine ul.faq li span.mark-A {
    color:#dc143c!important; /* red系 */
}

#citrine ul.faq li span.text{
    display:table-cell;
    vertical-align: middle;
    padding-top:0.7em;
    font-size:100%;
}
/* FAQの質問行（li）にカーソルを合わせたとき指アイコンにする */
.acMenu dt li {
  cursor: pointer;
}
.case-box {
  border: 2px solid #333;
  padding: 20px;
  margin-bottom: 30px;
  background-color: #fff;
}
.feature-nav {
  margin-bottom: 2em;
  padding: 15px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.feature-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.feature-nav-list li {
  margin: 0;
}

.feature-nav-list a {
  color: #0066cc;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 3px;
  transition: background-color 0.3s;
}

.feature-nav-list a:hover {
  background-color: #e6f3ff;
  text-decoration: underline;
}

.solution-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
  max-width:980px;   /* 最大幅980px */
  width: 100%;
  margin: 2em auto;
}
.solution-card {
  width: 310px;       /* 3枚×310px=930px＋ギャップ2×25px=50px＝980pxで収まる */
  background: #f5fafd;
  border-radius: 8px;
  padding: 20px 16px 18px 16px;
  position: relative;
  border: 1px solid #e2f0fa;
  box-shadow: 0 1px 4px rgba(0,80,130,0.10);
}
.solution-badge {
  position: absolute;
  left: 16px;
  top: 10px;
  background: #2196f3;
  color: #fff;
  font-size: 1em;
  font-weight: bold;
  padding: 3px 16px 3px 8px;
  border-radius: 6px 16px 16px 0;
  z-index: 2;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 4px rgba(0,80,130,0.08);
}
.solution-card-title {
  color: #1565c0;
  font-weight: bold;
  font-size: 1.08em;
  margin-left: 0;
  margin-top: 34px;
  margin-bottom: 8px;
}
.solution-card-body {
  color: #222;
  font-size: 1em;
  line-height: 1.7;
}

.case-section {
  margin-bottom: 3em;
}

/* グレー枠（枠単位） */
.case-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f7f7f7;
  padding: 20px 20px 60px; /* 下にボタン分の余白を確保 */
  margin-bottom: 2em;
  position: relative;
}

/* カード */
.case-card {
  width: 180px;
  background: #fff;
  border-radius: 4px;
  padding: 5px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.case-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 10px;
}

.case-category {
  font-weight: bold;
  color: #005fab;
  margin-bottom: 6px;
}

.case-desc {
  font-size: 0.9em;
  color: #333;
  min-height: 48px;
  margin-bottom: 1em;
}

/* ボタン：枠の下端（枠内）に固定配置 */
.case-btn-group {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 12px;
}

.btn-download {
  background: #0078c8;
  color: #fff;
  padding: 6px 16px;
  border-radius: 3px;
  text-decoration: none;
  font-size: 0.9em;
}
.btn-download:hover {
  background: #005fab;
}

.btn-detail {
  color: #005fab;
  text-decoration: underline;
  font-size: 0.9em;
}
.btn-detail:hover {
  color: #003d7a;
}
/* ==== 2025/11 修正: カード間隔を狭めて1段に収める ==== */
.case-group {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 8px;
  max-width: 980px;
  margin: 0 auto 2em auto;
}

.case-card {
  width: 160px;
}
/* ▼ 親コンテナ：2つのグレー枠を横並びにする ▼ */
.case-container {
  display: flex;
  justify-content: center;  /* 中央寄せ */
  gap: 24px;                /* 枠と枠の間隔 */
  flex-wrap: nowrap;        /* 折り返さない */
  max-width: 1200px;
  margin: 0 auto 2em auto;  /* 中央配置 */
}

/* ▼ 個々のグレー枠の設定（再掲） ▼ */
.case-group {
  flex: 1;                  /* 横幅を均等に */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;                 /* カード間隔を狭く */
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f7f7f7;
  padding: 20px 20px 60px;
  position: relative;
}

/* 下部の2ボタン（枠内） */
.case-btn-group {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* カードの幅微調整 */
.case-card {
  width: 160px;
  background: #fff;
  border-radius: 4px;
  padding: 5px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
/* 各グレー枠（前半・後半） */
.case-group {
  display: flex;
  flex-direction: row; /* ← 縦並びを横並びに変更 */
  flex-wrap: nowrap;   /* 折り返しを防止（必要に応じて wrapに変更可） */
  justify-content: space-around; /* 均等配置 */
  align-items: flex-start;
  gap: 10px; /* カード同士の間隔を狭める */
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f7f7f7;
  padding: 20px 20px 60px;
  position: relative;
  max-width: 1200px;
}

/* カードの基本設定（幅狭め推奨） */
.case-card {
  width: 160px; /* 横並びで収まるよう調整 */
  background: #fff;
  border-radius: 4px;
  padding: 5px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* ボタン枠の設定（各枠の下端に中央寄せ） */
.case-btn-group {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 12px;
}
/* 横の軸を揃えるための親コンテナ設定 */
.case-container {
  display: flex;
  flex-direction: column; /* 上枠・下枠を縦に積む */
  align-items: center; /* ← 横軸中心揃えにする */
  gap: 25px; /* 2枠の間隔 */
  width: 100%;
}

/* 各グレー枠の設定（中央寄せ＆固定幅） */
.case-group {
  display: flex;
  flex-direction: row;
  justify-content: center; /* カード群を中央揃え */
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f7f7f7;
  padding: 20px 20px 60px;
  position: relative;
  width: 900px; /* ← 両枠の幅を揃える（お好みで調整可能） */
  margin: 0 auto;
}

/* カードの設定 */
.case-card {
  width: 160px;
}

/* ボタンは枠下で中央配置 */
.case-btn-group {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* ==== 2025/11 事例枠 横一列配置修正 ==== */

/* 親コンテナ：グレー枠を横並びにする */
.case-container {
  display: flex;
  justify-content: center;   /* 中央配置 */
  align-items: flex-start;   /* 上下の位置合わせ */
  gap: 24px;                 /* 枠間の間隔 */
  flex-wrap: nowrap;         /* 折り返し禁止 → 1段で並ぶ */
  width: 100%;
}

/* 各グレー枠 */
.case-group {
  flex: 1;                   /* 均等幅で広がる */
  display: flex;
  flex-direction: row;       /* 枠の中でカードを横並び */
  justify-content: center;   /* カードを中央寄せ */
  align-items: flex-start;
  gap: 10px;                 /* カード間隔を狭める */
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f7f7f7;
  padding: 20px 20px 60px;
  position: relative;
  max-width: 460px;          /* ← 左右枠の幅 */
}

/* カード設定 */
.case-card {
  width: 160px;
  background: #fff;
  border-radius: 4px;
  padding: 5px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* ボタン枠の設定（枠内下端） */
.case-btn-group {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;  /* ← 縦並びにする */
  align-items: center;     /* ← 中央揃え */
  gap: 6px;                /* ボタン間の余白 */
}
/* ==== 2025/11/XX 調整版：事例枠2段 → 横一列に揃える ==== */

/* 親コンテナ：2つのグレー枠を横並びにする */
.case-container {
  display: flex;
  justify-content: center;     /* 中央に配置 */
  align-items: flex-start;     /* 枠の上端で揃える */
  gap: 12px;                   /* 枠間の間隔を狭くする */
  flex-wrap: nowrap !important;/* 折り返し禁止 */
  max-width: 980px;            /* ページ全体の幅に合わせる */
  margin: 0 auto 2em auto;     /* 中央寄せ＋下の余白 */
}

/* 各グレー枠（左枠・右枠） */
.case-group {
  flex: 1 1 0;                 /* 均等幅で自動調整 */
  max-width: 480px;            /* ← ページ幅内に収まるように調整（左右で960px＋gap12px） */
  display: flex;
  flex-direction: row;         /* 枠内のカードを横並び */
  justify-content: center;     /* カード群を中央に配置 */
  align-items: flex-start;
  gap: 8px;                    /* カード同士の間隔をさらに狭く */
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f7f7f7;
  padding: 20px 16px 60px 16px;/* 横padding少し削減して幅調整 */
  position: relative;
}

/* カードデザイン */
.case-card {
  width: 155px;                /* ← 160からさらに縮めると確実に収まる */
  background: #fff;
  border-radius: 4px;
  padding: 5px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* 枠内下部の2ボタン（共通） */
.case-btn-group {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 10px;
}

.btn-download {
  display: inline-block;
  background: #0078c8;
  color: #fff;
  padding: 6px 16px;
  border-radius: 3px;
  text-decoration: none;
  font-size: 0.9em;
}
.btn-download:hover {
  background: #005fab;
}

.btn-detail {
  display: inline-block;
  text-decoration: underline;
  color: #005fab;
  font-size: 0.9em;
}
.btn-detail:hover {
  color: #003d7a;
}

/* スマホ対応：横並びを自動折り返し */
@media (max-width: 768px) {
  .case-container {
    flex-wrap: wrap !important; /* 画面が狭い場合は縦配置へ */
    justify-content: center;
    gap: 20px;
  }

  .case-group {
    flex-wrap: wrap;  /* 各枠内もカードを折り返す */
    max-width: 100%;
  }

  .case-card {
    width: 45%; /* 小画面では2列表示 */
  }
}
.case-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}
/* ==== 重なり解消の調整 ==== */

/* グレー枠（全体） */
.case-group {
  position: relative;
  padding: 20px 16px 90px 16px; /* ← 下方向を広げる（60px → 90px） */
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f7f7f7;
  box-sizing: border-box;
}

/* ボタン配置（下に余裕） */
.case-btn-group {
  position: absolute;
  bottom: 25px;                /* ← 上から少し下げる（15px → 25px） */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;      /* 縦配置 */
  align-items: center;
  gap: 8px;                    /* ボタン間の隙間を少し広げる */
}
/* ==== カード内の画像高さを一定にして横軸をそろえる ==== */

/* 各カード */
.case-card {
  width: 155px;
  height: 300px;               /* ← 全カードの高さを統一（お好みで調整可） */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  box-sizing: border-box;
}

/* 画像の高さを一定にする */
.case-img {
  width: 100%;
  height: 190px;
  object-fit: contain;  /* ← 縦横比を維持したまま収める */
  background-color: #fff; /* 背景色を付けて枠が自然に見える */
}

/* テキスト部分のレイアウト */
.case-category {
  font-weight: bold;
  color: #005fab;
  margin-bottom: 6px;
}

.case-desc {
  font-size: 0.9em;
  color: #333;
  min-height: 48px;
  line-height: 1.5;
}
/* ==== 受賞歴エリアのバランス調整（右テキスト強調） ==== */
.award-wrapper {
  display: flex;
  justify-content: center;      /* 全体を中央寄せ */
  align-items: flex-start;
  gap: 40px;                    /* 画像とテキスト間の距離をやや広く */
  flex-wrap: wrap;
}

.award-img-block {
  flex: 0 0 220px;              /* 左の画像幅やや固定 */
  text-align: center;
}

.award-img {
  width: 200px;
  height: auto;
}

.award-caption {
  margin-top: 8px;
  font-weight: bold;
  color: #333;
  font-size: 1em;
}

/* 右のテキストブロック */
.award-text-block {
  flex: 1 1 500px;              /* テキスト領域を広めに */
  max-width: 560px;             /* 右側の余白をほどよく残す */
}

.award-title {
  font-size: 1.3em;             /* タイトルを大きめに */
  font-weight: bold;
  margin-bottom: 0.7em;
  color: #000;
  line-height: 1.6;
}

.award-desc {
  font-size: 1.05em;            /* 本文を少し大きく */
  color: #222;
  line-height: 1.8;             /* 行間を広げて読みやすく */
  letter-spacing: 0.01em;       /* わずかに文字間隔調整 */
}

/* スマホ対応（縦並び時の余白調整） */
@media (max-width: 768px) {
  .award-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }
  .award-text-block {
    max-width: 100%;
  }
  .award-title {
    font-size: 1.2em;
  }
  .award-desc {
    font-size: 1em;
  }
}

/* スマートフォン対応 */
@media (max-width: 768px) {
  .feature-nav-list {
    flex-direction: column;
    gap: 10px;
  }
  
  .feature-nav-list li {
    width: 100%;
  }
  
  .feature-nav-list a {
    display: block;
    text-align: center;
  }
}