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

/*--------------------------------------------------------------------------------------- 
汎用
---------------------------------------------------------------------------------------*/
:root {
  --hitachi_red: #cd2835;/*ブランドカラー：日立レッド*/
  --hitachi_red-on: #AF232E;
  --bg_gry: #f2f5f7;/*背景の薄いグレー*/
  --ctg_journal: #e3771f;/*カテゴリーカラー：機関誌*/
  --ctg_outlook: #3eb31e;/*カテゴリーカラー：経済予測*/
  --ctg_research: #e31f80;/*カテゴリーカラー：研究レポート*/
  --ctg_column: #1e5db3;/*カテゴリーカラー：対談・コラム*/
  --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*/
}

.mincho ruby rt {
    font-size: 12px;
}

/*ボックス*/
.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: 150px;
    height: auto;
  }
}
.img-btn_ico a span {
  width: 100%;
  position: relative;
  display: inline-block;
}
.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 2px;
}
.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 2px;
}

.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: 145px;
  text-align: center;
  border: 1px solid;
  border-radius: var(--br_s);
  margin-right: 24px;
  line-height: 140%;
  padding: 6px 0;
  font-size: 87%;
}
@media (max-width: 994px) {
    .ctg {
        margin-right: 8px;
    }
}
@media (max-width: 579px) {
    .ctg {
        width: 135px;
    }
}
@media (max-width: 399px) {
    .ctg {
        width: 135px;
    }
}
.ctg {
  color: #333;
}
.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;
  }
}
@media (max-width: 399px) {
  section:not(#main-visual):not(#new-column):not(#close-up):not(#specialty) .GridSet {
    padding: 0 15px;
  }
}
/*--------------------------------------------------------------------------------構造*/


/*--------------------------------------------------------------------------------------- 
背景
---------------------------------------------------------------------------------------*/
/*不要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: #333;
  }
}
/*研究分野*/
#specialty {
  background: url(/image/top/bk_specialty.png) no-repeat;
  background-size: cover;
}
/*Close Up*/
#close-up {
  background: #333;
}
/*--------------------------------------------------------------------------------背景*/


/*--------------------------------------------------------------------------------------- 
メインビジュアル
---------------------------------------------------------------------------------------*/
#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: 425%;/*68px*/
  line-height: 1.5;
}
.copytext strong {
  display: block;
  font-size: 137.5%;/*22px*/
  margin-bottom: 10px;
  line-height: 1.5;
  color: #333;
}
@media (max-width: 769px) {
    .copytext strong {
        font-size: 112.5%;/*18px*/
    }
}
.copytext p {
  font-size: 100%;/*16px*/
}
@media (max-width: 769px) {
  .copytext {
    color: #fff;
    padding: 32px 0;
  }
  .copytext strong {
    color: #fff;
  }
  .copytext h2 {
    font-size: 300%;/*48px*/
    line-height: 3rem;
    width: 100%;
    margin: 0 auto 24px;
    padding: 0;
  }
  .copytext p {
    font-size: 87.5%;/*14px*/
  }
}

span.ruby {
    font-size: 90%;
}

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


/*--------------------------------------------------------------------------------------- 
新着情報
---------------------------------------------------------------------------------------*/
#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: 0;
        display: inline;
    }
}

#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: 35%;
}
@media (max-width: 994px) {
    #new-info dl dt {
        width: 100%;
    }
}
#new-info dl dd {
    width: 65%;
}
@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 0 16px 16px;
  border-radius: 0 0 10px 10px;
  font-weight: bold;
  position: relative;
}
@media (max-width: 579px) {
  #close-up span {
    font-size: 87.5%;/*14px*/
  }
}
#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: 770px) {
  #close-up span {
    font-size: 112.5%;/*18px*/
  }
}
@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-top: 16px;
  font-weight: bold;
  color: #333;
}
#specialty .img-btn_ico a:hover {
  background-color: #ebeff1;
}
@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*/