@charset "utf-8";

.table-caution {
   margin: 1em !important;
}

.table-nomark-indent {
   text-indent: -2em;
   padding: 0 0 0 1em !important;
}

.ml-05 {
   margin-left: 5%;
}

.common-indent {
   margin-left: 2em !important;
}

.common-table-typeC th {
   color: #000;
   font-weight: bold;
   background-color: #eee;
}



/* ---------------- リンクボタン -------------*/
.common-top-title-area p.common-link-btn a {
   color: #fff;
   margin: 0 10px 20px;
   padding: 10px 20px 6px 20px;
   border: 1px solid rgb(var(--image-color));
   text-align: center;
   border-radius: 6px;
   display: inline-block;
   background-color: rgb(var(--image-color));
   text-decoration: none;

}

.common-top-title-area p.common-link-btn a:hover {
   background-color: #fafafa;
   color: rgb(var(--image-color));
   transition: 0.3s ease-in-out;
}

/* ---------------- トップ タイトル New リボン -------------*/

.common-top-title-area h1 {
   position: relative;
}

.common-top-title-ribbon-wrap {
   position: absolute;
   top: 0;
   right: 0;
   width: 300px;
   height: 120px;
   overflow: hidden;
}

.common-top-title-ribbon {
   display: inline-block;
   position: absolute;
   padding: 4px 0 2px;
   left: 70px;
   top: 26px;
   width: 340px;
   text-align: center;
   font-size: 32px;
   line-height: 1.4em;
   background: rgb(255, 84, 84);
   color: #fff;
   letter-spacing: 0.05em;
   -webkit-transform: rotate(30deg);
   transform: rotate(30deg);
   font-weight: 700;
}

/* ---------------- トップ キャッチ用テキスト -------------*/

p.ptl-top-catchtext1 {
   font-weight: 700;
   font-size: 24px;
   margin-top: 50px;
   color: #178783;
}

p.ptl-top-catchtext2 {
   font-weight: 700;
   font-size: 17px;
}

/* ---------------- ウェビナー動画 -------------*/
aside .common-extra-block-lightgray {
   max-width: 800px;
   margin: 40px auto 60px;
   border-radius: 6px;
   padding-top: 10px;
}

aside .common-extra-block-lightgray h3 {
   font-size: 18px;
   font-weight: 700;
}

aside .common-extra-block-lightgray .movie-link {
   margin-top: 0;
}

aside .common-extra-block-lightgray .webinar-flex {
   padding: 10px 20px;
}

/* ---------------- PR動画 -------------*/
.common-movie-wrap {
   width: 80%;
   margin: 0 auto;
   padding: 0;
}

.common-movie {
   margin-top: 10px;
}

.common-movie iframe {
   width: 100%;
   height: 100%;
   left: 0;
}

/* ---------------- カードレイアウト -------------*/

.common-card-flat-wrap {
   width: 100%;
   display: flex;
   justify-content: space-around;
   margin: 20px 0 40px;
   padding-bottom: 20px;
}

.common-card-flat {
   margin: 1rem;
   overflow: hidden;
   border: 1px solid #666;
   width: 400px;
   background-color: #fafafa;
}

.common-card-flat-option-slim .common-card-flat {
   margin: 1rem auto;
   overflow: hidden;
   border: 1px solid #666;

}

div.common-card-flat-header {
   display: flex;
   flex-wrap: wrap;
   position: relative;
   justify-content: center;
   align-items: flex-end;
   height: 140px;
   width: 100%;
   word-wrap: break-word;
   box-sizing: border-box;
   z-index: 0;
   overflow: hidden;
}

.common-card-flat-option-slim .common-card-flat div.common-card-flat-header {

   height: 220px;
}

.common-card-flat-header img {
   margin: 0;
   object-fit: cover;
   height: 100%;
   width: 100%;
   /* transition: all .3s ease-out; */
}

.common-card-flat-header p {
   font-size: 20px;
   font-weight: bold;
   padding: 0.6rem 1rem;
   text-decoration: none;
   color: white;
   background-color: rgba(0, 0, 04, 0.6);
   margin: 0;
   width: 100%;
   text-align: center;
   position: absolute;
}

/* .common-card-flat-header:hover img {
	opacity: .8;
	transform: scale(1.1);
	transition: all .3s ease-out;
} */

.common-card-flat-body {
   padding: 1rem;
   font-size: .8rem;
   margin-top: 0;
   margin-bottom: 1.5rem;
}

.common-card-flat-body p {
   margin: 0;
   margin-bottom: 10px;
   padding: 0;
}

.common-card-flat-body ul {
   margin: 0;
   padding: 0;
   width: auto;
   box-sizing: border-box;
   padding: 0.5em 0.5em 0.5em 2em;
}

.common-card-body-flat ul li {
   margin: 0;
   padding: 0;
   margin-right: 1em;
}

/* 画像無しの場合にcommon-card-headerに追加するクラス */
.common-card-flat .no-image {
   height: 100px;
}

.common-card-flat .no-image p {
   height: 100%;
}

.common-extra-block-movie {
   border: #ccc 1px solid;
   background-color: #fafafa;
   margin: 20px 30px;
}

.common-extra-block-movie .webinar-flex {
   margin-top: 0;
}

.common-extra-block-movie h3 {
   text-align: left;
   font-size: 18px;
   font-weight: 700;
   margin: 10px 0;
}

.common-dl-tableType-A {
   background-color: #ffe;
   padding: 20px;
   margin: 30px auto 80px;
   width: 90%;
   border-radius: 15px;
}


.common-dl-tableType-A dl {
   display: flex;
   flex-flow: row wrap;
   margin: 50px auto 10px;
}

.common-dl-tableType-A dt {
   font-weight: 700;
   font-size: 17px !important;
   line-height: 1.4em !important;
   width: 35%;
   border-bottom: 1px solid #666;
   padding: 1.4em 10px;
   padding-right: 1.8em;
   padding-left: 56px;
   background-image: url(./ptl_img/pr-iamge-list.png);
   background-size: 50px;
   background-repeat: no-repeat;
   text-align: left !important;

}

.common-dl-tableType-A dd {
   width: 65%;
   border-bottom: 1px solid #666;
   padding: 1.4em 10px;
   text-align: left !important;
}



.common-dl-tableType-A ul {
   margin: 0;
   margin-left: 0.5em;
   padding: 0;
}

.common-dl-tableType-A ul li {
   margin: 10px;
   margin-top: 0;
   margin-bottom: 0.2em;
   padding: 0;
}

.common-dl-tableType-A dd:last-child,
.common-dl-tableType-A dt:nth-last-child(2) {
   border-bottom: 0;
}

.ptl-pr-other {
   margin-top: 0;
   margin-bottom: 40px;

}

.ptl-pr-other>div {
   /* width:400px !important; */
   padding-left: 10px;
   padding-right: 10px;

}

.ptl-pr-other-title {
   font-size: 18px !important;
   font-weight: 700;
   border-bottom: 0;
}

.ptl-pr-other-img {
   width: auto;
   padding-left: 50px !important;
   padding-right: 50px !important;

}

.webinar-pr-area {
   max-width: 800px;
   margin: 20px auto;
   padding: 6px;
   border: 1px solid #eee;
   border-radius: 6px;
   background-color: #fafafa;
}

.webinar-pr-header {}

.webinar-pr-header p.title {
   border-bottom: 1px solid #666;
   width: auto;
   font-weight: bold;
   font-size: 18px;
   color: #555;
   padding: 10px;
   padding-left: 60px;
   position: relative;

}

.webinar-pr-header p.title::before {
   content: '';
   position: absolute;
   top: 50%;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: 0px 4px;
   background-size: 40px;
   padding-left: 50px;
   left: 8px;
   transform: translateY(-60%);
   width: 1.5em;
   height: 2.0em;
   background-image: url(/img/common_img/common-icon-webinar.png);
}

.webinar-pr-flex-wrap {
   display: flex;
   margin-top: 10px;
}

.webinar-pr-flex-movie {
   width: 37%;
   padding: 10px;
}

.webinar-pr-flex-movie img {
   margin: 0;
   width: 100%;
}

.webinar-pr-flex-movie p {
   font-size: 17px;
   line-height: 1.4em;
   font-weight: 700;
}

.webinar-pr-flex-text {
   width: 63%;
}

.webinar-pr-flex-text p {
   margin: 10px;
}

.zoom-btn {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 20px auto 20px;
   padding: .6em 2em;
   width: fit-content;
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   background-color: #328BCB;
   border: 1px solid #328BCB;
   border-radius: 5vh;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   text-decoration: none;
}

.zoom-btn:hover {
   background-color: #fafafa;
   color: #328BCB;
   transition: 0.3s ease-in-out;
}

.common-funcicon-ribbon-wrap {
   position: absolute;
   top: 0;
   right: 0;
   width: 110px;
   height: 91px;
   overflow: hidden;
}

.common-funcicon-ribbon {
   display: inline-block;
   position: absolute;
   padding: 4px 0 2px;
   left: -30px;
   top: 16px;
   width: 240px;
   text-align: center;
   font-size: 15px;
   line-height: 16px;
   background: rgba(255, 0, 0, 0.7);
   color: #fff;
   letter-spacing: 0.05em;
   -webkit-transform: rotate(40deg);
   transform: rotate(40deg);
   font-weight: 700;
}

/* BookBook 5列 調整用 */
ul.common-relatedItem-wrap {
   gap: 0;
}

ul.common-relatedItem-wrap li {
   width: 20%;
   padding-left: 10px;
   padding-right: 10px;
}


@media screen and (max-width:640px) {


   .common-top-title-ribbon-wrap {
      position: absolute;
      top: 0;
      right: 0;
      width: 200px;
      height: 90px;
      overflow: hidden;
   }

   .common-top-title-ribbon {
      display: inline-block;
      position: absolute;
      padding: 4px 0 2px;
      left: 70px;
      top: 10px;
      width: 200px;
      text-align: center;
      font-size: 18px;
      line-height: 1.2em;
      /* background: rgba(255,0,0,0.8); */
      color: #fff;
      letter-spacing: 0.05em;
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
      font-weight: 700;
   }

   p.ptl-top-catchtext1 {
      font-weight: 700;
      font-size: 19px;
      margin-top: 30px;
      padding: 10px;
   }

   p.ptl-top-catchtext2 {
      font-weight: 400;
   }

   aside .common-extra-block-lightgray {
      margin: 40px 10px 60px;
   }
   aside .common-extra-block-lightgray .webinar-flex {
      padding: 0 10px;
   }
   aside .common-extra-block-lightgray .webinar-flex-text {
      padding-bottom: 0;
   }

   .common-card-flat-wrap {
      flex-wrap: wrap;
   }

   .common-card-flat {
      width: auto;
      margin-left: 30px;
      margin-right: 30px;
   }

   .common-dl-tableType-A {
      background-color: #ffe;
      padding: 10px;
      margin: 30px 10px 80px;
      width: auto;
      /* border-radius: 1.0rem; */
   }

   .common-dl-tableType-A dl {
      display: flex;
      flex-flow: wrap;

   }

   .common-dl-tableType-A dt {
      font-weight: 700;
      font-size: 17px !important;
      line-height: 1.4em !important;
      width: 100%;
      border-bottom: 0;
      padding: 1.4em 10px 10px;
      padding-right: 10px;
      padding-left: 56px;
      background-image: url(./ptl_img/pr-iamge-list.png);
      background-size: 50px;
      background-repeat: no-repeat;
      text-align: left !important;

   }

   .common-dl-tableType-A dd {
      width: 100%;
      border-bottom: 1px solid #666;
      padding: 1.4em 10px 10px;
      text-align: left !important;
   }

   .ptl-pr-other>div {
      width: auto !important;
      margin-left: 10px;
      margin-right: 10px;

   }

   .webinar-pr-area {
      max-width: 800px;
      margin: 20px 10px;
      padding: 6px;
      border: 1px solid #eee;
      border-radius: 6px;
      background-color: #fafafa;
   }

   .webinar-pr-flex-wrap {
      display: flex;
      flex-direction: column;
   }

   .webinar-pr-flex-movie {
      width: 100%;
      padding: 10px;
   }

   .webinar-pr-flex-text {
      width: 100%;
   }

   /* BookBook 5列 調整用 */

   ul.common-relatedItem-wrap {
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      justify-content: space-around;

   }

   ul.common-relatedItem-wrap li {
      width: 45%;
      margin: 0;
      padding: 0;
   }


}