@charset "UTF-8";

/* 見出しの定義 */

#main #mainContents .headline{ text-align: center; }

#main #mainContents .headline::before{
    content: none;
    display:none;
}

#main #mainContents .after-description {
    padding: 0.5em 1em;
}

/* 画像の定義（２次クラス定義） */
#mainContents .imate-text-link .imageBox.contain img {
    object-fit: contain;
    font-family: 'object-fit: contain;';
}

/* SPボタン定義（２次クラス定義） */
@media only screen and (max-width: 768px){
    #mainContents .button.action01.sp-full {
        width: 100%;
    }
}

/* 背景色の定義 */
#main #mainContents .bg_gray {
    background-color: #F5F6F7;
}

#mainContents ul.check li{
    position: relative;
    padding-left: 28px;
}

#mainContents ul.check li:before {
    content: '';
    position: absolute;
    top: 3px;
    left: 0;
    width: 20px;
    height: 20px;
    background-image: url(/assets/images/ia/icon/check.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    line-height: 1;
}

.target-titleBar{
	margin-bottom: 16px;
	border-radius: 4px;
	width: 100%;
	height: 40px;
	background-color: #ef7763;
	text-align: center;
	line-height: 40px;
	color: #fff;
}

/* ここにすべて定義する */
/* ---------- FLEXBOX ----------  */
#mainContents .fl {
   display: flex;
}
#mainContents .fl-w {
   flex-wrap: wrap;
}
#mainContents .fl-aic{
    align-items: center;
}
#mainContents .fl-js{
    justify-content: flex-start;
}
#mainContents .fl-jc{
    justify-content: center;
}
#mainContents .fl-dc {
   flex-direction: column;
}
#mainContents .fl-drr {
   flex-direction: row-reverse;
}
/* ---------- MARGIN ----------  */
#mainContents .no-mt {
   margin-top: 0;
}
#mainContents .margin-l-r-1em{
    margin: 0 1em;
}
#mainContents .mlr-1em {
   margin-left: 1em;
   margin-right: 1em;
}
/* ---------- PADDING ----------  */
#mainContents .pd-1rem{
    padding: 1rem;
}
#mainContents .pd-1em{
    padding:1em;
}
#mainContents .pd-2em{
    padding:2em;
}
#mainContents .pd-2rem-1rem{
    padding: 2rem 1rem;
}
#mainContents .pd-1_5em-0-2em{
    padding:1.5em 0 2em;
}
/* ---------- BACKGROUND ----------  */
#mainContents .bg-lightgray{
    background-color:#f5f6f7;
}
#mainContents .bg-gray {
   background-color: #ebeced;
}
#mainContents .bg-darkgray {
   background-color: #7b7c7f;
}
#mainContents .bg-mint {
   background-color: #d3f2f4;
}
#mainContents .bg-darkmint {
   background-color: #24c2c9;
}
#mainContents .bg-purple {
   background-color: #f2e7f2;
}
#mainContents .bg-white {
   background-color: #fff;
}
/* ---------- BORDER ----------  */
#mainContents .border-box{
    box-sizing: border-box;
}
#mainContents .b1gray {
   border: 1px solid #cdd0d4;
}
#mainContents .btb2black {
   border-top: 2px solid #2d2d2e;
   border-bottom: 2px solid #2d2d2e;
}
#mainContents .b2mint {
   border: 2px solid #24c2c9;
}
#mainContents .br4 {
   border-radius: 4px;
}
#mainContents .bold16{
    font-size:1.6rem;
}
/* ---------- FONT ----------  */
#mainContents .f-mint {
   color: #24c2c9;
}
#mainContents .f-blue {
   color: #1889b8;
}
#mainContents .f-purple {
   color: #a14ebf;
}
#mainContents .f-pink {
   color: #c92470;
}
#mainContents .f-white {
   color: #fff;
}
#mainContents .nowrap {
   white-space: nowrap;
}
#mainContents .bold40 {
   font-size: 4rem;
}
/* ---------- WIDTH ----------  */
#mainContents .w-100 {
   width: 100%;
}
#mainContents .w-50 {
   width: 50%;
}
#mainContents .w-10em{
    width: 10em;
}
#mainContents .w-4rem{
    width: 4rem;
}
#mainContents .width-auto{
    width: auto;
}
#mainContents .maxw-480 {
   max-width: 480px;
}
#mainContents .m-width100 {
   min-width: 100% !important;
}
#mainContents .m-width200 {
   min-width: 200px;
}
/* ---------- HEIGHT ----------  */
#mainContents .mini-h-6em{
    min-height: 6em;
    height:100%;
}
#mainContents .inline-block{
    display: inline-block;
    max-width:100%;
}
#mainContents .down-mark_triangle__smallGreen{
    margin: 1em auto 0;
    border: 1em solid rgba(255,255,255,0);
    border-top: 1em solid #45bec7;
    width: 2em;
    height: 1em;
}
#mainContents .down-mark_triangle__largeGray{
    margin: 1em auto 0;
    width: 32px;
    height: 64px;
    border: 32px solid transparent;
    border-top: 32px solid #cdd0d4;
}
/* ---------- MARKER ----------  */
.mark__yellow{
    background: linear-gradient(transparent 60%, #ccff66 60%);
    box-sizing:border-box;
    padding-left:0.5ex;
    padding-right:0.5ex;
}
.mark__aiIot{
    background: linear-gradient(transparent 60%, #bdecee 60%);
    box-sizing:border-box;
    padding-left:0.5ex;
    padding-right:0.5ex;
    font-style: normal;
    font-weight: 500;
}
.mark__pink {
    background: linear-gradient(transparent 60%, #f4d3e2 60%);
    box-sizing:border-box;
    padding-left:0.5ex;
    padding-right:0.5ex;
    font-style: normal;
    font-weight: 500;
}
/* ---------- FILL-ARROW ---------- */
#mainContents .fillArrow {
   width: 40px;
   height: 34.6px;
   border-top: 34.6px solid #cdd0d4;
   border-right: 20px solid transparent;
   border-left: 20px solid transparent;
}
/* ---------- BUTTON ---------- */
#mainContents .button.pageLink {
   border-radius: 38px;
}
#mainContents .button.pageLink .pageLinkArrow {
    width: 30px;
    height: 30px;
    margin:0 0.5em;
    border-radius: 0;
    background-image: url(/assets/images/top/icon-btn-white.svg);
    background-repeat: no-repeat;
    background-position: center;
    transform: rotateZ(90deg);
}
#mainContents .col_thumbnail{
    width:100%;
    height:auto;
}
#mainContents .col_thumbnail img{
    width:100%;
    height:auto;
}
#mainContents img.image-60per{
    width:60%;
    height:auto;
}
#mainContents img.image-80per{
    width:80%;
    height:auto;
}
ul.list-mark_disc li{
    display:block;
    position:relative;
    padding-left:1.5em;
    box-sizing:border-box;
}
ul.list-mark_disc li::before{
    content:"●";
    position:absolute;
    left:0.25em;
}
#mainContents .dummy{
    visibility:hidden;
}
#mainContents a.innerBlock-link::before,
#mainContents a.innerBlock-link::after{
    display:none;
}

#moduleList tr:nth-child(even) > * {
   background-color: #fafafb;
}
#moduleList tr th,
#moduleList tr td {
   border: 1px solid #cdd0d4;
   padding: 1em;
}
#moduleList tr th {
   background-color: #d3f2f4;
   font-weight: 500;
}
#introductionFlow tr td {
   border-top: 1px solid #cdd0d4;
   border-bottom: 1px solid #cdd0d4;
   padding: 1em;
}
#introductionFlow tr td ul.circle li::before {
   background: #262626;
}
/* -------------------- MEDIA QUERY 768px --------------------  */
@media only screen and (max-width: 768px){
   /* ---------- FLEXBOX ----------  */
   #mainContents .sp-fl-w {
       flex-wrap: wrap;
   }
   #mainContents .sp-flex-justify-center {
        display: flex;
        justify-content: center;
   }
   #mainContents .sp-fl-dc {
      flex-direction: column;
   }
   /* ---------- FONT ----------  */
   #mainContents .bold40 {
      font-size: 8vmin;
   }
    .margin-top-sp-24px{
        margin-top:24px;
    }
    #mainContents .sp-clm01{
        display:block;
    }
    #mainContents .sp-clm01 .col{
        width:100%;
    }
     #mainContents .sp-padding-0{
         padding:0;
    }
    #mainContents .sp-mb-1em{ margin-bottom:1em; }
    #mainContents .sp-mb-2em{ margin-bottom:2em; }
    #mainContents .sp-mb-3em{ margin-bottom:3em; }
    #mainContents .sp-mb-4em{ margin-bottom:4em; }
    #mainContents .sp-mb-5em{ margin-bottom:5em; }
    #mainContents .sp-minw100 {
       min-width: 100%;
   }
    #mainContents .dummy{
        display:none;
    }
   #mainContents .sp-ac {
      text-align: center;
   }
   #mainContents .button.pageLink .pageLinkArrow {
       width: 2em;
       height: 2em;
   }
   #mainContents .button.pageLink {
       border-radius: 4em;
       padding: 15.5px 1em;
   }
   #mainContents [class*="clm"] .button.caselink{
      width: 100%;
   }
   #moduleList tr td p {
      min-width: 50vw;
   }
   #introductionFlow tr td:nth-child(2) {
      min-width: 400px;
   }
   /* ---------- WIDTH ----------  */
   #mainContents .sp-w-100 {
      width: 100%;
   }
   #mainContents .sp-w-50 {
      width: 50%;
   }
   #mainContents .w-4rem{
       width: 8vmin;
   }
}