/***************************************************
 ポータルサイト - 静的ページ（利用規約/プライバシーポリシー/ヘルプ等）用CSS

 ※portal/common.cssとともに使用すること
 ***************************************************/

 /***************************************************
 大枠（スクロール領域となる）　※複数存在不可
  ***************************************************/
main div.const-area{
  background-color: #E0E0E0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 54px 0px 0px 0px;

  display: -webkit-flex;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  /* justify-content: center; */ /* flex-start center space-around */
  align-content: center;/* flex-start flex-end center */
  align-items: center;/* flex-start  flex-end center  safe center  unsafe center*/

  overflow-x: hidden;
  overflow-y: auto;
}

/***************************************************
トップビジュアル帯　（背景画像ありの帯）
 ***************************************************/
.const-area div.top-visual-box{
  background-size: cover;/*cover *//*contain */
  background-color: #E0E0E0;
  background-position: center;
  background-repeat: no-repeat;

  width: 100%;
  height: 420px;
  min-height: 180px;
  padding: 100px 0px 80px 0px;
}
.top-visual-box.business{/* 法人向けページ用 */
  background-image: url('/image/doc/business_top_visual.jpg');
}
.top-visual-box.help{/* ヘルプページ用 */
  background-image: url('/image/doc/help_top_visual.jpg');
}
.top-visual-box.contact{/* 連絡先ページ用 */
  background-image: url('/image/doc/contact_top_visual.jpg');
}
.top-visual-box .visual-text{
  text-align: center;
  font-size: 48px;
  color: white;
  margin: 12px 32px 12px 32px;
}
.top-visual-box .visual-sub-text{
  text-align: center;
  font-size: 28px;
  color: white;
  margin: 4px 32px 4px 32px;
}

/***************************************************
タイトル的なテキストのみBOX（枠・背景なし）
 ***************************************************/
.const-area .title-box{
  display: -webkit-flex;
  display: flex;
  flex-wrap: nowrap;

  padding: 24px 24px 12px 24px;
}
.title-box .title-text{
  font-size: 22px;
  color: #000000;
}

/***************************************************
シンプルなBOX（枠あり・白背景・箇条書き調整あり）※主に規約・ガイド類で使用
 ***************************************************/
.const-area .content-box{
  background-color: white;
  border: 0px solid #E0E0E0;
  border-radius: 0px;
  padding: 32px 32px 32px 32px;
  margin: 12px 32px 12px 32px;
  /* min-width: 480px; /* 要調整 */
  max-width: 960px; /* 要調整 */
}
.content-box.const{
  min-width: 700px; /* 要調整 */
  max-width: 700px; /* 要調整 */
}
.content-box.const-big{
  min-width: 960px; /* 要調整 */
  max-width: 960px; /* 要調整 */
}
.content-box.no-frame{
  background-color: #E0E0E0;
}

.content-box .content-title{
  font-size: 24px;
  color: #2196F3;
  margin: 12px 0px 12px 0px;

  /* アンカー対応 20240411ozeki */
  padding-top: 54px;
  margin-top:-54px;
}
.content-box .content-text{
  font-size: 18px;
  color: #000000;
  padding: 8px 0px 8px 0px;
}
.content-text.small{
  font-size: 14px;
}
.content-text.red{
  color: red;
}
.content-box .content-ico{
  width: 48px;
  height: 48px;
  object-fit: cover;
}
.content-box .content-img{
  max-width: 780px;
}
.content-box img{
  object-fit: contain;
}
.content-box ol{
  list-style-type: decimal;
}
.content-box ul{
  list-style-type: none;
  padding: 0px 0px 0px 18px;
}
.content-box li{
  margin: 16px 0px 16px 0px;
}


/***************************************************
PLACEタイプ毎の説明用ヘッダーBOX
 ***************************************************/
.const-area .placetype-header-box{
  background-color: white;
  border: 0px solid #E0E0E0;
  border-radius: 0px;
  padding: 32px 32px 32px 32px;
  margin: 12px 32px 12px 32px;
  /* min-width: 480px; /* 要調整 */
  width: 960px; /* 要調整 */
}
.placetype-header-box .title{
  font-size: 36px;
  color: #555555;
  text-align: center;
  margin: 12px 0px 12px 0px;
}
.placetype-header-box .sub-title{
  font-size: 18px;
  color: #808080;
  text-align: center;
  margin: 4px 0px 4px 0px;
}
.spec-list{
  width: 100%;

  padding: 0px 0px 0px 0px;

  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;/* flex-start center space-around*/
  align-content: flex-start;/* flex-start flex-end center */
  align-items: flex-start;/* flex-start  flex-end center  safe center  unsafe center*/
}
.spec-list.left{
  justify-content: flex-start;/* flex-start center space-around*/
  align-content: flex-start;/* flex-start flex-end center */
  align-items: flex-start;/* flex-start  flex-end center  safe center  unsafe center*/
}
.spec-list .spec-item{
  flex: 0 1 auto;/* 要調整 */
  /* max-width: 320px; /* 要調整 */
  /* min-width: 120px; /*  要調整 */
  height: auto;
  box-shadow: 0 4px 15px rgba(0,0,0,.2);
  border: 0px solid #000000;
  border-radius: 16px;
  background-color: #2196F3;
  margin: 8px 8px 8px 8px;
  animation: fadeIn 2s ease 0s 1 normal;

  font-size: 14px;
  color: white;
  text-align: center;

  padding: 8px 16px 8px 16px;
}
.spec-item.small{
  font-size: 12px;
  margin: 4px 4px 4px 4px;
  padding: 4px 8px 4px 8px;
}
.spec-item.capa{
  background-color: #FF6F6F;
}
.spec-item.common{
  background-color: #2196F3;
}
.spec-item.spesial{
  background-color: #0000cd;
}
.spec-item.labo{
  background-color: #2e8b57;
}
.spec-item.next{
  background-color: #E0E0E0;
}


/***************************************************
Flex ラッパー（コンテンツＢＯＸをフレキシブル配置にするラッパー）
 ***************************************************/
.const-area .flex-box-wrapper{
  width: 100%;

  padding: 0px 32px 0px 32px;
  margin: 12px 32px 12px 32px;

  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;/* flex-start center space-around*/
  align-content: flex-start;/* flex-start flex-end center */
  align-items: flex-start;/* flex-start  flex-end center  safe center  unsafe center*/
  /* padding: 16px 0px 60px 0px; */ /* はみ出して横スクロールでてしまう・・ */
}
.flex-box-wrapper .content-box{
  flex: 1 1 780px;/* 要調整 */
  max-width: 780px; /* 要調整 */
  min-width: 780px; /* 要調整 */
  height: auto;
  box-shadow: 0 4px 15px rgba(0,0,0,.2);
  border: 0px solid #000000;
  border-radius: 12px;
  background-color: white;
  margin: 8px 8px 8px 8px;
  animation: fadeIn 2s ease 0s 1 normal;

  padding: 32px 32px 32px 32px;
}
.flex-box-wrapper .content-box .content-text{
  font-size: 18px;
  color: #000000;
  padding: 8px 0px 8px 0px;
}

.content-box.media{
  flex: 1 1 280px;/* 要調整 */
  max-width: 280px; /* 要調整 */
  min-width: 280px; /* 要調整 */
  max-height: 80px; /* 要調整 */
  min-height: 80px;

  background-size: cover;/*cover *//*contain */
  background-position: center;
  background-repeat: no-repeat;
}
.content-box.media .content-text{
  font-size: 24px;
  color: white;
  text-align: center;
  padding: 8px 0px 8px 0px;
}
.media.culture{
  background-image: url('https://doc.place-ex.com/image/portal/case_culture.jpg');
}
.media.presentation{
  background-image: url('https://doc.place-ex.com/image/portal/case_presentation.jpg');
}
.media.entertainment{
  background-image: url('https://doc.place-ex.com/image/portal/case_entertainment.jpg');
}
.media.classroom{
  background-image: url('https://doc.place-ex.com/image/portal/case_classroom.jpg');
}
.media.matching{
  background-image: url('https://doc.place-ex.com/image/portal/case_matching.jpg');
}
.media.exercise{
  background-image: url('https://doc.place-ex.com/image/portal/case_exercise.jpg');
}

.media.help-content{
  background-image: url('https://doc.place-ex.com/image/portal/help_top_visual.jpg');
}

.flex-box-wrapper a{
  text-decoration: none;
}

/***************************************************
PLACEタイプのカードリスト
 ***************************************************/
.flex-box-wrapper .content-box.media-card{
  flex: 1 1 780px;/* 要調整 */
  max-width: 780px; /* 要調整 */
  min-width: 780px; /* 要調整 */
  height: auto;
  box-shadow: 0 4px 15px rgba(0,0,0,.2);
  border: 0px solid #000000;
  border-radius: 12px;
  background-color: white;
  margin: 8px 8px 8px 8px;
  animation: fadeIn 2s ease 0s 1 normal;

  padding: 12px 12px 12px 12px;

  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;/* flex-start center space-around*/
  align-content: flex-start;/* flex-start flex-end center */
  align-items: flex-start;/* flex-start  flex-end center  safe center  unsafe center*/

  cursor: pointer;
}
.content-box.media-card:hover {
  /* background-color: #F0F0F0; */
  border: 2px solid #2196F3;
}
.media-card .media-card-img{
  width: 240px;
}
.media-card .media-card-content{
  flex: 0 0 480px;

  padding: 0px 12px 0px 12px;
}
.media-card-content .title{
  font-size: 36px;
  color: #555555;
  text-align: left;
  margin: 4px 0px 12px 0px;
}
.media-card-content .sub-title{
  font-size: 12px;
  color: #808080;
  text-align: left;
  margin: 4px 0px 4px 0px;
}


/***************************************************
リンクボタン　※大枠内の任意の場所で利用
 ***************************************************/
.const-area div.link-button{
  width: 200px;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: white;
  background-color: #2196F3;
  border: 0px solid #2196F3;
  cursor: pointer;
  border-radius: 20px;
  text-align: center;
  padding: 4px 8px 4px 8px;
}
.link-button.center{
  margin: 36px auto 12px auto;
}
.link-button.right{
  margin: 36px 0px 12px auto;
}
.link-button a{
  text-decoration: none;
  color: white;
}


/***************************************************
 ボトムエリア
 ***************************************************/
.const-area div.bottom-panel{
  /*
  background-image: url('../../image/portal/top_visual_bg.png');
  background-position: center;
  background-repeat: repeat;
   */
  background-color: #E0E0E0;/* #E0E0E0; */
  animation: fadeIn 2s ease 0s 1 normal;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;

  justify-content: center;/* center space-around */
  align-items: center;

  padding: 24px 0px 24px 0px;
}
.bottom-panel .item-text{
  text-align: center;
  font-size: 16px;
  color: #393f43;

  padding: 4px 48px 4px 48px;
}
.bottom-panel .item-img{
  width: auto;
  height: 48px;
  margin: 0px 0px 0px 0px;
}
.bottom-panel a{
  text-decoration: none;
  color: #393f43;
}

/***************************************************
  レスポンシブ対応  //20231225ozeki
 ***************************************************/
 @media screen and (max-width: 1023px) {
 	/* 幅が1024px未満 745px以上（タブレット用） */

  .const-area div.top-visual-box{
    height: auto;
    min-height: initial;
    padding: 80px 0px 80px 0px;
  }

  .content-box.const{
    min-width: 640px;
    max-width: 640px;
  }
  .content-box.const-big{
    min-width: 640px;
    max-width: initial;
    width: 80%;
  }

  .content-box .content-img{
    max-width: 680px;
  }

 }
 @media screen and (max-width: 743px) {
 	/* 幅が744px未満（スマホ用） */

  .const-area div.top-visual-box{
    height: auto;
    min-height: initial;
    padding: 48px 0px 48px 0px;
  }

  .content-box.const{
    min-width: 300px;
    max-width: initial;
    width: 80%;
  }
  .content-box.const-big{
    min-width: 300px;
    max-width: initial;
    width: 80%;
  }

  .content-box .content-img{
    max-width: 400px;
  }

 }
 @media screen and (max-width: 400px) {
   /* 幅400px未満（極狭スマホ用） */
   .content-box .content-img{
     max-width: 320px;
   }

 }