@charset "utf-8";
/* **************************************************
Name: hri_top.css
Description: CSS for Additional Top page Modules
Copyright 2024 Hitachi Research Institute.
***************************************************** */

/*--------------------------------------------------------------------------------------- 
汎用
---------------------------------------------------------------------------------------*/
:root {
  --hitachi_red: #cc0000;/*ブランドカラー：日立レッド*/
  --hitachi_red-on: #7d0008;/*Red1 40%Dark*/
  --bg_gry: #f4f4f4;/*背景の薄いグレー*/
  --ctg_journal: #fa6900;/*カテゴリーカラー：機関誌 Orange2*/
  --ctg_outlook: #00964e;/*カテゴリーカラー：経済予測 Green3*/
  --ctg_research: #fa00a5;/*カテゴリーカラー：研究レポート Pink2*/
  --ctg_column: #0064fa;/*カテゴリーカラー：対談・コラム Blue2*/
  --br_s: 5px;/*小さいコンテンツ用の角丸の大きさ*/
  --br_m: 10px;/*通常の大きさのコンテンツ用の角丸の大きさ*/
}
img {
  max-width: 100%;
  height: auto;
}
img[src$=".jpg"] {
  border-radius: var(--br_m);
}
@media (min-width: 1100px) {/*↑↑↑1100px以上↑↑↑*/
  .without_pc {/*PCだけ除外*/
    display: none;
  }
}
@media (max-width: 579px) {/*↓↓↓579px以下↓↓↓*/
  .without_sp-L {/*SPだけ除外*/
    display: none;
  }
}
@media (max-width: 359px) {/*↓↓↓359px以下↓↓↓*/
  .without_sp {/*SPだけ除外*/
    display: none;
  }
}
@media (max-width: 769px) {/*↓↓↓769px以下↓↓↓*/
  .for_pc {/*PCだけ表示*/
    display: none;
  }
}
@media (min-width: 770px) {/*↑↑↑770px以上↑↑↑*/
  .for_sp-L {/*SPだけ表示*/
    display: none;
  }
}
@media (min-width: 580px) {/*↑↑↑580px以上↑↑↑*/
  .for_sp {/*SPだけ表示*/
    display: none;
  }
}
@media (min-width: 400px) {/*↑↑↑400px以上↑↑↑*/
  .for_sp-S {/*SPだけ表示*/
    display: none;
  }
}
/*見出しおよびテキスト*/
a:link {
  text-decoration: none;
}
.mincho {
  font-family: "Shippori Mincho", serif;
}
h2 {
  background: none;
}
h3 {
  font-size: 300%;/*48px*/
  font-weight: normal;
  color: unset;
}
@media (max-width: 579px) {
  h3 {
    font-size: 225%;/*36px*/
  }
}
h3.center {
  text-align: center;
  margin-bottom: 32px;
}
section p {
  font-size: 112.5%;/*18px*/
}
/*ボックス*/
.img-box {
  max-width: 422px;
  margin: auto;
}
.flex-box {
  display: flex;
  flex-wrap: wrap;
}
.cols-2 > div {
  width: 50%;
  box-sizing: border-box;
}
.flex-box.cols-2 {
  justify-content: space-between;
}
@media (max-width: 579px) {
  .cols-2 > div {
    width: 100%;
  }
  .flex-box.cols-2 {
    flex-direction: column-reverse;
  }
  .flex-box.cols-2 .info-box {
    text-align: center;
  }
  .img-box {
    margin-bottom: 40px;
  }
}
.flex-box.cols-4 {
  justify-content: center;
  gap: 12px;
}
.cols-4 > a {
  width: 25%;
}
@media (max-width: 579px) {
  .cols-4 > a {
    width: 50%;
  }
}
/*ボタン*/
[class*="img-btn"] a,
[class*="img-btn"] span,
[class*="img-btn"] img {
  display: block;
  text-align: center;
  box-sizing: border-box;
}
.btn {
  display: inline-block;
  padding: 16px 57px 16px 40px;
  background: var(--hitachi_red);
  color: #fff;
  border-radius: var(--br_s);
  position: relative;
}
.btn:hover {
  background: var(--hitachi_red-on);
}
.btn:visited,
.btn:link {
  color: #fff;
}
.img-btn_ico a {
  justify-content: center;
  border-radius: var(--br_m);
  width: 180px;
  height: 180px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.img-btn a:hover img {
  opacity: .8;
}
@media (max-width: 579px) {
  .img-btn_ico a {
    width: 165px;
    height: auto;
  }
}
@media (max-width: 399px) {
  .img-btn_ico a {
    width: 150px;
  }
}
.img-btn_ico a span {
  width: 90%;
  position: relative;
  display: inline-block;
  line-height: 1.5;
}
.img-btn_ico span::after,
.btn::after,
.arrow-white span::after {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  /* transition: transform 0.3s ease; */
}

.img-btn_ico span::after{
  background: url(/image/jp/r1/icon/icon_link_right_hd.gif) no-repeat;
  background-size: cover;
  background-position: center 4px;
}
.btn::after {
  background: url(/image/jp/r1/icon/icon_link_right_white_hd.gif) no-repeat center;
  background-size: cover;
  top: 50%;
  transform: translateY(-50%);
}
.arrow-white span::after {
  background: url(/image/jp/r1/icon/icon_link_right_white_hd.gif) no-repeat;
  background-size: cover;
  background-position: center 3px;
}

.arrow-red::after,
.pdf-red::after,
.newwin-red::after {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
}
.arrow-red::after {
  background: url(/image/jp/r1/icon/icon_link_right_hd.gif) no-repeat;
  background-size: cover;
  background-position: center 2px;
}
.pdf-red::after {
  background: url(/image/jp/r1/icon/icon_pdf_hd.gif) no-repeat;
  background-size: cover;
  background-position: center 2px;
}
.newwin-red::after {
  background: url(/image/jp/r1/icon/icon_new_window_hd.gif) no-repeat;
  background-size: cover;
  background-position: center 2px;
}

.btn:hover::after,
.arrow-white a:hover span::after {
  transform: translateY(-50%) translateX(2px);
}
.img-btn_ico a:hover span::after {
  transform: translateX(2px);
}
.img-btn_ico img {
  max-width: 54%;
}

/*カテゴリーアイコン用装飾*/
.ctg {
  display: inline-block;
  width: 120px;
  text-align: center;
  border: 1px solid;
  border-radius: var(--br_s);
  margin-right: 24px;
  line-height: 140%;
  padding: 6px 0;
}
@media (max-width: 994px) {
  .ctg {
    margin-right: 8px;
  }
}
.ctg {
  color: #0c0c0c;
  font-size: 75%;    
}
.journal {
  color: var(--ctg_journal);
}
.outlook {
  color: var(--ctg_outlook);
}
.research {
  color: var(--ctg_research);
}
.column {
  color: var(--ctg_column);
}

/*----------------------------------------------------------------------------------汎用*/


/*--------------------------------------------------------------------------------------- 
構造
---------------------------------------------------------------------------------------*/
/*不要commonのスタイルのリセット*/
@media (max-width: 994px) {
  .JS .GridSet {
    margin-left: 0;
  }
}
section {
  padding: 64px 0;
}
section:not(#main-visual):not(#specialty):not(#close-up) .GridSet {
  padding: 0 30px;
}
.GridSet.full-width {
  padding: 0;
}
@media (max-width: 994px) {
  section:not(#main-visual):not(#new-column):not(#close-up):not(#specialty) .GridSet {
    padding: 0 30px;
  }
}
/*--------------------------------------------------------------------------------構造*/


/*--------------------------------------------------------------------------------------- 
背景
---------------------------------------------------------------------------------------*/
/*不要commonのスタイルのリセット*/
body, .JS body {
  background-color: unset;
}
/*メインビジュアル*/
#main-visual {
  background: url(/image/top/mv_pc.jpg) no-repeat;
  background-size: cover;
  background-position: calc(100% - 50%) center;
}
@media (max-width: 769px) {
  #main-visual {
    background-image: none;
    padding: 0;
    background-color: #0c0c0c;
  }
}
/*研究分野*/
#specialty {
  background: url(/image/top/bk_specialty.png) no-repeat;
  background-size: cover;
}
/*Close Up*/
#close-up {
  background: #222;
}
/*--------------------------------------------------------------------------------背景*/


/*--------------------------------------------------------------------------------------- 
メインビジュアル
---------------------------------------------------------------------------------------*/
#main-visual img {
  border-radius: unset;
  width: 100%;
}
.visual-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  min-height: 420px;
}
@media (max-width: 769px) {
  .visual-content {
    justify-content: center;
    text-align: center;
    min-height: auto;
  }
}
.copytext h2 {
  font-size: 350%;/*56px*/
  line-height: 1.5;
  text-align: right;
}
@media (max-width: 994px) {
    .copytext h2 {
      font-size: 312.5%;/*50px*/
      text-align: inherit;
    }
}
@media (max-width: 769px) {
    .copytext h2 {
      font-size: 300%;/*48px*/
      line-height: 3rem;
      width: 100%;
      margin: 0 auto 24px;
      padding: 0;
    }
}
@media (max-width: 579px) {
    .copytext h2 {
      font-size: 225%;/*36px*/
    }
}
.copytext strong {
  display: block;
  font-size: 125%;/*22px*/
  margin-bottom: 10px;
  line-height: 1.5;
  color: #0c0c0c;
}
@media (max-width: 769px) {
    .copytext strong {
        color: #fff;
        font-size: 112.5%;/*18px*/
    }
}
@media (max-width: 579px) {
    .copytext strong {
        font-size: 100%;/*16px*/
        word-wrap: break-word;
    }
}

.copytext p {
  font-size: 100%;/*16px*/
    width: 490px;
}
@media (max-width: 769px) {
    .copytext p {
      font-size: 87.5%;/*14px*/
      width: 100%;
    }
}

@media (max-width: 769px) {
  .copytext {
    color: #fff;
    padding: 32px 0;
    word-wrap: break-word;
  }
}
@media (max-width: 579px) {
  .copytext {
    padding: 32px 16px;
  }
}

/*----------------------------------------------------------------------メインビジュアル*/


/*--------------------------------------------------------------------------------------- 
新着情報
---------------------------------------------------------------------------------------*/
#new-info .GridSet {
  position: relative;
}
#new-info h3 {
  font-size: 187.5%;/*30px*/
  text-align: left;
  margin-bottom: 40px;
}
.news-meta time {
  font-weight: bold;
  min-width: 112px;
  display: inline-block;
}
#new-info dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#new-info dl a:not(.ctg) {
  display: inline-block;
  position: relative;
}
@media (max-width: 994px) {
  #new-info dl a:not(.ctg) {
    margin-left: 8px;
  }
}
#new-info dl a:not(.ctg):hover {
  text-decoration: underline;
}
#new-info dl:not(:last-child) {
  margin-bottom: 16px;
}
#new-info .btn {
  position: absolute;
  right: 30px;
  top: 0;
}
#new-info dl dt {
    width: 30%;
}
@media (max-width: 994px) {
    #new-info dl dt {
        width: 100%;
    }
}
#new-info dl dd {
    width: 70%;
}
@media (max-width: 994px) {
    #new-info dl dd {
        width: 100%;
    }
}
@media (max-width: 994px) {
  .news-meta {
    width: 100%;
    margin-bottom: 8px;
  }
}
@media (max-width: 769px) {
  #new-info .btn {
    position: relative;
    margin-top: 40px;
    right: unset;
  }
  #new-info .flex-box {
    justify-content: center;
  }
}
.news-meta {
    display: flex;
    align-items: center;
}
/*------------------------------------------------------------------------------新着情報*/


/*--------------------------------------------------------------------------------------- 
スライドコーナー
---------------------------------------------------------------------------------------*/
#new-column {
  background: var(--bg_gry);
}
/*-----------------------------------------------------------------------------Close Up*/


/*--------------------------------------------------------------------------------------- 
Close Up
---------------------------------------------------------------------------------------*/
#close-up {
  color: #fff;
}
#close-up .cols-4 > a {
  max-width: 232px;
  color: #fff;
}
@media (min-width: 770px) {
  #close-up .cols-4 > a {
    flex: 1 1 23%;
  }
}
#close-up img {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  width: 100%;
}
#close-up span {
  background: var(--hitachi_red);
  text-align: left;
  padding: 16px;
  border-radius: 0 0 10px 10px;
  font-weight: bold;
  position: relative;
  height: 84px;
}
@media (max-width: 994px) {
  #close-up span {
    padding: 16px;
  }
}
@media (max-width: 769px) {
  #close-up span {
    height: auto;
  }
}
@media (max-width: 579px) {
  #close-up span {
    font-size: 87.5%;/*14px*/
  }
}
@media (max-width: 399px) {
  #close-up span {
    padding: 16px 14px;
    height: 100px;
  }
}
#close-up .arrow-white a:hover span::after {
  transform: translateX(2px);
}
@media (max-width: 994px) {
  #close-up .flex-box.cols-4 {
    gap: 16px;
  }
  #close-up .GridSet {
    padding: 0px 16px;
  }
}
@media (min-width: 994px) {
  #close-up span {
    font-size: 100%;/*16px*/
  }
}
@media (max-width: 769px) {
  #close-up .cols-4 > a {
    width: 47%;
    max-width: 50%;
  }
}
/*-----------------------------------------------------------------------------Close Up*/


/*--------------------------------------------------------------------------------------- 
研究分野
---------------------------------------------------------------------------------------*/
#specialty .GridSet {
  max-width: 756px;
  margin: auto;
}
#specialty h3 {
  color: var(--hitachi_red);
}
#specialty .titleset p {
  text-align: center;
  margin-bottom: 24px;
}
#specialty .img-btn_ico a {
  background: var(--bg_gry);
  padding: 16px 0;
  font-weight: bold;
  color: #0c0c0c;
}
#specialty .img-btn_ico a:hover {
  background-color: #d9d9d9;
}
@media (max-width: 579px) {
  #specialty  .img-btn_ico a span {
    font-size: 87.5%;/*14px*/
  }
}
@media (max-width: 769px) {
  #specialty .img-btn_ico a {
    font-size: 100%;
    max-width: 47%;
  }
}
@media (min-width: 580px) and ( max-width: 755px) {
  #specialty .img-btn_ico:last-child::after {
      content: '';
      display: block;
      width: 180px;
      height: 180px;
  }
}
@media (min-width: 493px) and ( max-width: 579px) {
  #specialty .img-btn_ico:last-child::after {
      content: '';
      display: block;
      width: 150px;
      height: auto;
  }
}
@media (max-width: 547px) {
  section#specialty .GridSet {
      padding: 0px 10px;
  }
}
/*-------------------------------------------------------------------------------研究分野*/


/*--------------------------------------------------------------------------------------- 
会社概要
---------------------------------------------------------------------------------------*/
#about .titleset p {
  margin: 24px 0;
}
/*-------------------------------------------------------------------------------会社概要*/




/*--------------------------------------------------------------------------------------- 
見出しA
---------------------------------------------------------------------------------------*/
/*小見出し*/

/*-------------------------------------------------------------------------------見出しA*/