/* ==========================================
   基本設定
   ========================================== */


.contact-area{
   padding: 40px 32px;
   background-color: #ebf4fe;
   margin: 3rem auto;
}

.contact-area h2{
   width: 100%;
   max-width: max-content;
   margin:0 auto 32px;
   text-align: left;
   font-size: 1.1em;

}

.contact-lead{
   width: 100%;
   max-width: max-content;
   margin:0 auto 32px;
   text-align: left;
}

/*------------　ソリューションページ　------------*/

.solution-block{
    margin-bottom: 40px;
    padding-left: 8px;
    padding-right: 8px;
}

.solution-block p{
    line-height: 1.625em;
    text-indent: 1em;
    margin-bottom: 1em;
}

.solution-link{
    margin-top: 16px;
    margin-bottom: 16px;
}

/*------------　システムインテグレーションページ　------------*/

.page-solution-integration figure img{
    margin: 0 auto 64px;
}
.page-solution-integration  .service-description {
    margin-bottom: 48px;
}

.page-solution-integration  .service-description p{
    margin-bottom: 16px;
}

/*------------　デジタルソリューションページ　------------*/

.content > main > p {
   margin-bottom: 40px;
}

.page-solution-digital section{
    margin-bottom: 40px;
}
.page-solution-digital section p{
    line-height: 1.625em;
    margin-bottom: 32px;
}

.page-solution-digital section ol {
  list-style-type: decimal;
  list-style-position: inside;
  margin-top: 16px;
   margin-left: 1rem;
}

.page-solution-digital section ul{
   margin-left: 1rem;
}

.page-solution-digital section li{
    text-align: left;
    margin-bottom: 1rem;
}

.page-solution-digital section ol li figure {
    margin-top: 32px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 8px; /* 画像同士の隙間を適度につける */
}

/* 画像が画面幅に合わせて自動縮小するように追記 */
.page-solution-digital section ol li figure img {
    height: auto;
    flex-shrink: 1; /* 画面が狭くなったら縮小を許可 */
    min-width: 0;   /* flexアイテムの縮小阻害を防ぐ */
}

.page-solution-digital section table.comparison-table{
    width: 100%;
    max-width: max-content;
    margin-top: 16px;
}

.page-solution-digital section table.comparison-table th,.page-solution-digital table.comparison-table td{
    border: none;
    vertical-align: top;
}

.page-solution-digital section ul{
   margin-left: 1rem;
}

.page-solution-digital section table.case-study-table{
   margin: 16px 1rem 32px;
   width: auto;
}

.case-study-figure{
   margin: 0 1rem;
}

.case-study-figure div{
   display: flex;
   justify-content: left;
   margin-bottom: 32px;
   gap: 0 32px;
}

.indicator-figure01{
   margin: 16px 0 32px;
   padding: 0 16px;
}

.indicator-figure01 img{
   width: 100%;
   margin: 0 auto;
}

.indicator-figure02{
   padding: 0 16px;
   display: flex;
   justify-content: left;
   flex-wrap: wrap;
}

.indicator-figure02 div{
   width: 45%;
   padding: 8px;
   margin-bottom: 16px;

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
}

.indicator-figure02 div img{
   margin-bottom: 16px;
}


section.clipon ul{
    list-style-type: decimal;
    list-style-position: inside;
}

section.clipon figure{
   margin-top: 64px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
}

.page-solution-digital section.cap10 p,.page-solution-digital section.systemlocation p{
   text-indent: 0;
}

.page-solution-digital section.cap10 li,.page-solution-digital section.systemlocation li{
   background-image: url(../img/icon_1o_01.png);
   background-position: 0 8px;
   background-repeat: no-repeat;
   padding-left: 1.25rem;
}

.page-solution-digital section.cap10 figure{
   margin-top: 32px;
   display: flex;
   flex-wrap: wrap;
   gap: 0 16px;
}

.page-solution-digital section.cap10 figcaption{
   width: 100%;
}
.page-solution-digital section.cap10 figure img{
   margin-bottom: 16px;
}

.page-solution-digital section.cap10 p.note,.page-solution-digital section.systemlocation p.note{
   padding-left: 0;
   margin-top: 32px;
}

.page-solution-digital .trademark-notice p {
   text-indent: 0;
   border: 1px solid #555;
   padding: 16px;
   margin-bottom: 64px;
}

/*------------　音声ソリューション ページ　------------*/

.page-solution-voice section li{
   margin-left: 1rem;
}

.solution-voice-challenges{
   margin-bottom: 40px;
   max-width: max-content;
}

.solution-voice-challenges img{
   margin: 16px auto;   
}

.solution-voice-features{
   padding: 16px;
   margin-bottom: 24px;
}

.solution-voice-features img{
   width: 100%;  
   margin: 0 auto 32px;
}

.solution-voice-usescene{
   margin-bottom: 64px;   
}

.solution-voice-usescene h3{
   margin-bottom: 16px;
}

.solution-voice-usescene ul{
   margin-bottom: 16px;
}

.solution-voice-usescene p{
   margin: 24px auto;
   text-indent: 0;
   font-weight: bold;
   color: #4ec2db;
   border: 2px solid #4ec2db;
   padding: 16px;
}

.solution-voice-usescene img{
   margin: 16px 0;
}

.solution-voice-overview{
   margin-bottom: 64px;
}

/*------------　@Hyway ページ　------------*/

.page-solution-hyway section{
   margin-bottom: 40px;
}

.page-solution-hyway h3{
   margin-bottom: 0.5rem;
}

.page-solution-hyway main ul,.page-solution-hyway main ol{
   margin: 0 1rem 16px;
}

.page-solution-hyway img{
   margin-bottom: 16px;
   width: 100%;
}

.page-solution-hyway figcaption strong{
   color: #ff0000;
}

.page-solution-hyway p{
   margin-bottom: 16px;
}

.page-solution-hyway table{
   margin: 32px auto 16px;
}

.solution-hyway-catchcopy{
   margin-bottom: 64px;
}

.solution-hyway-catchcopy p{
   padding-left: 1rem;
   padding-right: 1rem;
   font-weight: bold;
   line-height: 2rem;
}

.page-solution-hyway .badge-cost{
   color: #ff0000;
}

.solution-hyway-content{
   width: max-content;
}

.solution-hyway-section img{
   margin: 0 auto 16px;
}

.solution-hyway-section p{
   color: #ff0000;
   font-weight: bold;
}

/* ==========================================
   タブレットサイズ以上 (1024px ~)
   ========================================== */

@media (min-width: 1024px) {

}

/* ==========================================
   モバイルサイズ以上 / Desktop Small (768px ~)
   ========================================== */

@media (min-width: 768px) {

}

/* ==========================================
   タブレットサイズ以下 (1024px ~)
   ========================================== */

@media (max-width: 1023px) {

   section.clipon figure{
      display: block;
   }
   
   section.clipon figure img{
      margin: 0 auto 60px;
   }

   .page-solution-digital section table.case-study-table{
      margin: 16px 0 32px;
   }

   .solution-voice-usescene img{
      margin: 16px auto;
   }

}

/* ==========================================
   モバイルサイズ以下 (767px ~)
   ========================================== */

@media (max-width: 767px) {

   	/*------------　デジタルソリューションページ　------------*/

	.page-solution-digital h1{
		font-size: 12px;
	}

   .comparison-table img{
      width: 100%;
   }

	.case-study-table,
	.case-study-table tbody,
	.case-study-table tr,
	.case-study-table th,
	.case-study-table td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}

   .case-study-table tr:not(:first-child) th {
      border-top: none;
   }

   .case-study-table th{
      border-bottom: none;
      background-color: #1E90FF;
      color: #fff;
   }

   .case-study-figure div{
      flex-wrap: wrap;
   }

   .case-study-figure div img{
      margin-bottom: 16px;
   }

   .indicator-figure02 div{
      width: 100%;
   }

   /*------------　@Hyway ページ　------------*/

   .solution-hyway-catchcopy p {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
   }

   .solution-hyway-content {
      max-width: max-content;
      width: 100%;
   }

   .page-solution-hyway main ul, .page-solution-hyway main ol {
      margin: 0;
   }

   .solution-hyway-section p {
      line-height: 1.5rem;
   }

}