@charset "utf-8"; /* ---------------------- */
/* Custom CSS */
/* ---------------------- */
/* --- 1. Tab Background Color Classes (Defined directly in CSS) --- */
.bg-dev{  background-color: #c8d68a;}
.bg-analysis{  background-color: #d64e40;}
.bg-move{  background-color: #286c97;}
.bg-rule{  background-color: #7cbad7;}
.bg-support{  background-color: #ed7c8e;}
/* --- 2. Tab Text Color Adjustment --- */
.text-white{  color: white;}
.text-dark{  color: #1f2937;}
/* メインの濃い灰色 */
/* 全体を囲むコンテナ */
.tab-container{  display: flex;width: 80%;max-width: 800px;border-radius: 0.75rem;margin: 2em auto;}
/* 文字を縦書きにし、垂直方向の中央に揃えるための設定 */
.vertical-text{  writing-mode: vertical-rl;text-orientation: upright;line-height: 1.2;padding: 0 0.75rem;height: 100%;display: flex;align-items: center;justify-content: center;font-size: 14px;font-weight: 700;}
/* 索引 (タブ) リスト */
.tab-list{  list-style: none;padding: 0;margin: 0;display: flex;flex-direction: column;border-top-left-radius: 0.75rem;border-bottom-left-radius: 0.75rem;margin-top: 3%;z-index: 100;}
/* 縦タブ（索引）のスタイル */
.tab-item{  cursor: pointer;transition: all 0.2s ease-in-out;position: relative;z-index: 10;border-radius: 1rem 0 0 1rem;/* Rounded on the left side */ height: 120px;}
.tab-item:first-child{ z-index: 110}
.tab-item:nth-child(2){ z-index: 109}
.tab-item:nth-child(3){ z-index: 108}
.tab-item:nth-child(4){ z-index: 107}
.tab-item:nth-child(5){ z-index: 106}
.tab-item img{  position: absolute;right: -8%;bottom: -7%;width: 25px;z-index: 99;}
/* タブのホバー時のスタイル */
.tab-item:hover{  opacity: 0.9;}
/* アクティブ（選択中）のタブのスタイル */
.tab-item.active{  border-right: none;}
/* コンテンツエリア（白地の部分）のスタイル */
.tab-content-area{  flex-grow: 1;background-color: var(--dynamic-color, #c8d68a);padding: 15px;min-height: 550px;border-radius: 1rem;z-index: 99;transition: background-color 0.3s ease-in-out;}
/* 各コンテンツパネル */
.content-panel{  display: none;/* Initially hidden */ animation: fadeIn 0.4s ease-out;text-align: center;padding: 2em;background: #fff;border-radius: 1em;min-height: 590px}
/* アクティブ（表示中）のコンテンツパネル */
.content-panel.active{  display: block;/* Active panel is visible */}
@keyframes fadeIn{  from{  opacity: 0;transform: translateY(10px);}
to{  opacity: 1;transform: translateY(0);}
}
/* Content Headings & Text Styling */
.posiCwrap h2.content-heading{  font-size: 20px;font-weight: 800;margin-bottom: 1rem;color: #fff;padding: 5px 10px;display: inline-block;}
/* Specific Color Overrides for Headings (using hex codes directly) */
.text-color-dev{  background: #c8d68a;}
.text-color-analysis{  background: #d64e40;}
.text-color-move{  background: #286c97;}
.text-color-rule{  background: #7cbad7;}
.text-color-support{  background: #ed7c8e;}
.rounded-full{  border-radius: 9999px;}
.shadow-md{  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);}
.posiFlexC{  display: flex;justify-content: center;align-items: center;margin: 1em 0}
.posBtn{  border: 1px solid;padding: 0.5em 2em;border-radius: 2em;font-weight: bold;background: #fff;position: relative;z-index: 99;width: fit-content;margin: 0 auto;}
.posiD01-1{ width: 40%}
.posiD02-1{ width: 25%;}
.posiModal .slide{ padding-bottom: 3em;}
.posiModal .slide h4{  font-size: 20px;text-align: center;margin-bottom: 0.5em}
.posiModal .slide p{  line-height: 1.5em;font-size: 15px}
.posiModal .slide img{  margin: 0 auto;padding: 10px}
#modal-01.posiModal .slide:first-child img{  width: 45%}
#modal-01.posiModal .slide:nth-child(2) img{  width: 70%}
#modal-02.posiModal .slide:first-child img{  width: 35%}
#content2 .posiFlexC{ margin-top: 5%}
.tab-content-area p{ font-size: 20px}
.tab-content-area p.text-lg{  margin-bottom: 1em}
.posiD03-1{  border-radius : 30px;padding: 5% 20%;display: flex;justify-content: space-between;flex-wrap: wrap;}
.tab-content-area p.posiD03-1p{  margin-bottom: -14px;background: #fff;width: fit-content;padding: 0 5px;}
.posiD03-1 div{  width: 50%;margin-bottom: 2em}
.posiD03-1 div h5{  font-size: 12px}
.posiD03-1 div img{ width: 70%}
#modal-03.posiModal .slide img{  width: 45%}
#modal-03.posiModal .slide:nth-child(5) img{  width: 75%}
#modal-03.posiModal .slide:nth-child(6) img{  width: 55%}
.posiD03-2{ position: relative;display: flex;justify-content: space-between;padding: 3em 0 5em}
.posiD03-2 div{  width: 24%;position: relative;z-index: 10}
.posiD03-2 div h5{  font-size: 14px;margin-bottom: 2em}
.posiD03-2 div:first-child h5{  margin-top: 5em}
.pd03img1{  position: absolute;width: 49%;top: 7%;left: 8%;}
.pd03img2{  position: absolute;width: 31%;bottom: 0%;right: 7%;}
.posiD04-1, .posiD04-2{  position: relative;display: flex;justify-content: space-between}
.posiD04-1{  flex-direction: column;width: 30%;margin-left: 40%;text-align: center;padding-top: 7%}
.posiD04-1 div{  width: 30%}
.posiD04-2{  margin-top: 10em}
.posiD04-2 div{  width: 45%;margin-left: 18%}
.posiD04-1 h5 , .posiD04-2 div h5{  font-size: 20px;margin-bottom: 1em}
.pd04img1{  position: absolute;width: 95%;top: 10%;right: 99%;}
.pd04img2{  position: absolute;width: 29%;bottom: -131%;left: 56%;}
.pd04img3{  width: 30%;bottom: 125%;right: 7%;position: absolute;}
#modal-04.posiModal .slide img{  width: 45%}
#modal-04.posiModal .slide:nth-child(2) img{  width: 25%}
#modal-05.posiModal .slide:first-child img{  width: 40%}
#modal-05.posiModal .slide:nth-child(2) img{  width: 50%;padding-top: 11%;}
.pctalc{ text-align: center}
@media (max-width: 958px){  .posiCwrap{  width: 100%;}
.tab-container{  flex-direction: column-reverse;width: 100%}
.tab-content-area{ border-radius: 0;min-height: 300px}
.tab-list{  margin-top: 0;flex-direction: row;display: flex !important}
.tab-item{  width: 20%;border-radius: 0 0 0.5rem 0.5rem;height: auto;padding: 0.4em 0;}
.tab-list.sp .tab-item{ border-radius: 0.5rem 0.5rem 0 0;}
.vertical-text{  font-size: 10px;writing-mode: unset;text-orientation: unset;padding: 0}
.tab-item:hover{  opacity: 1;transform: none;}
.posiCwrap h2.content-heading{  font-size: 14px;margin-bottom: 0.7em;}
.posiFlexC div p{  font-size: 12px;margin-bottom: 0.7em;}
.posBtn{ font-size: 10px;padding: 0.3em 1.2em}
.posiFlexC img{  width: 35%}
.flxclmsp{ display: flex;flex-direction: column;align-items: flex-start;}
.flxclmsprev{ display: flex;flex-direction: column-reverse;width: 100%}
.flrowsprev{ display: flex;flex-direction: row-reverse;flex-wrap: wrap;}
.flxclmsp .posiD01-1{  width: 100%;text-align: left}
.flxclmsp img{  width: 100%}
.posiModal .slide p{ font-size: 12px}
.posiD02-1{  width: 100%;margin-top: 2em}
.tab-content-area p.text-lg{  line-height: 1.2em;}
.posiD01-1{  width: 40%;}
.posiD02-1 + img{  width: 50%}
.posiD03-1{  flex-wrap: wrap;padding: 14% 2% 0%;}
.posiD03-1 div{  width: 49%;margin-bottom: 1em}
.posiD03-1 div h5{  font-size: 10px;}
.posiD03-1 div img{  width: 55%;}
.posiD03-2{ flex-direction: column;width: 100%}
.posiD03-2 div{  width: 100%;}
.posiD03-2 div:first-child{  width: 40%}
.posiD03-2 div:nth-child(2){ text-align: right}
.posiD03-2 div h5{  margin-bottom: 1em;}
.posiD03-2 div:nth-child(2) h5{  padding: 2em 1em 0 0}
.posiD03-2{  padding: 1em 0 4em}
.pd03img1{  position: absolute;width: 66%;top: 10%;left: unset;right: 9%;}
.pd03img2{  position: absolute;width: 47%;bottom: 4%;right: 41%;}
.pd04img2{  position: absolute;width: 83%;bottom: 22%;left: 18%;max-width: 170px}
.pd04img3{  width: 81%;bottom: 5%;right: -90%;position: absolute;}
.pd04img1{  position: absolute;width: 32%;top: unset;right: 0;bottom: 94%;max-width: 136px;left: 0;margin: auto}
.posiD04-1{  width: 35%;text-align: center;align-items: center;margin-left: 0;justify-content: flex-start;margin-top: 6em;}
.posiD04-1 h5{  margin-bottom: 1em;position: relative;z-index: 99;}
.posiD01-1{  width: 40%;}
.tab-item img{  position: absolute;right: 2%;bottom: -13%;width: 15px;z-index: 99;}
.content-panel{  min-height: inherit}
.tab-content-area p{  font-size: 14px;}
#content4 > div{  display: flex;flex-direction: row-reverse;justify-content: space-between;}
.posiD04-2{  margin-top: 0;width: 50%;flex-direction: column;}
.posiD04-2 div{  width: 100%;}
.posiD04-2 div:last-child{  margin-top: 13em}
.posiD04-1 div h5 , .posiD04-2 div h5{  margin-bottom: 1em}
.pctalc{ text-align: unset}
    .posiD04-1 h5, .posiD04-2 div h5 { font-size: 12px}
}