/* 基本 */

body {
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
  background-color: #f7f8f8;
  font-weight: 500;
  font-size: 16px;
  line-height: 2.1;
}

/* 段落間の表示：p 要素の下マージンを追加（キャプションは除外） */
p:not(.caption) {
  margin: 0 0 1.2em;
}

/* ネイティブ スムーススクロール */
/* html {
  scroll-behavior: smooth;
} */

.innerbox{
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.topimg{
  width: 100%;
  max-width: 1000px;
  height: auto;
  vertical-align: bottom;
}

/* タイトル */
#title {
  margin: inherit;
} 

#title .headerimage{
  margin: auto;
  text-align: center;
    padding-bottom: 10px;

}

#title .lead{
  padding: 18px 0 0;
  max-width: 900px;
  margin: 0 auto;
  display: block;
}

#title .lead-left{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: contents; /* 子要素を親(.lead)の直接子として扱い、float の回り込みを可能にする */
}

/* 右カラム（デスクトップは回り込み） */
#title .lead-right{
  background-color: #eae5da;
  float: right;
  width: 340px;
  margin-left: 55px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  padding: 25px 30px;
  border-radius: 20px;
  box-sizing: border-box;
}

#title .lead-right .lead-position{
  text-align: left;
  font-weight: 400;
  font-size: 14px;
  margin-top: 8px;
	margin-bottom: 1em;
}

#title .lead-right .lead-profile{
  text-align: left;
  font-weight: 500;
  font-size: 14px;
  margin: 0px;
}

#title .lead-right .lead-name{
  font-weight: 700;
  font-size: 27px;
  color: #ee7623;
  margin-top: 0;
  margin-bottom: 5px;
}

#title .lead-right .lead-name span.name-en{
  font-family: "Bodoni 72", "Bodoni MT", "Bodoni", serif;
  color: #000000;
  font-weight: 700;
  font-size: 13px;
}

/* 小画面では1カラムに戻す（かつ .lead-right を h1 の上に移動） */
@media screen and (max-width: 680px) {
  .innerbox{
    display: flex;
    flex-direction: column;
  }

  #title .lead{
    display: contents;
    gap: 0;
  }

  #title .lead-left{
    display: block; 
    margin-right: 0;
  }

  #title .lead-right{
    float: none;
    width: 100%;
    order: -1;
    margin: 12px auto 0px;
  }

  #title .lead-right img{
    width: 280px;
    height: auto;
    object-fit: cover;
  }
}

/* 本文 */

#main{
  margin: inherit;
}

h1{
  color: #000000;
  font-weight: 700;
  font-size: 25px;
  line-height: 2.0;
  margin: 20px 0 20px;
}

h1.two-line{
  line-height: initial;
}

/* ローマ数字「Ⅱ」専用フォント */
.roman-two{
  font-family: "MS Gothic", "ＭＳ ゴシック", serif, "Noto Sans JP", "Yu Gothic", sans-serif;
  font-weight: 700;
  display: inline-block;
  line-height: inherit;
}

.img{
  text-align: center;
  width: 100%;
  max-width: 640px;
  margin: 30px auto;
  box-sizing: border-box;
}

.img>img{
  width: 100%;
  height: auto;
}

.img>p.caption{
  text-align: left;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 22px;
}

.img span.orange{
  color: #ee7623;
  font-weight: 700;
}

.detail-link{
  width: 100%;
  max-width: 640px;
  margin: 40px auto;
  box-sizing: border-box;
  text-align: center;
  border: none;  
}
.company-link{
  width: 100%;
  max-width: 280px;
  margin: 10px auto;
  box-sizing: border-box;
  border: none;  
}

.ribbon{
  margin-top: 70px;
  border: 2px solid #ee7623;
}

  
/* 注釈（脚注）スタイル */
.notes{
  color: #004b9d;
  font-size: 12px;
  line-height: 1.6;
  margin: 50px auto;
  padding: 0;
  box-sizing: border-box;
}
.notes p.list{
  margin: 0;
  margin-left: 2em;
  text-indent: -2em;
}
.notes .note-main{
  margin: 0;
  margin-left: 1em;
  text-indent: -1em;
  color: #004b9d;
}


/* フッター */

footer{
  margin-top: 20px;
  text-align: center;
  padding: 0 0 15px 0;
}

footer .logo{
  display: block;
  width: 200px;
  height: auto;
  margin: auto; /* 元の中央寄せを復元 */
}

/* ロゴのアンカー領域を画像サイズに限定して中央寄せ */
.footer-logo-link{
  display: inline-block;
  padding: 0;
  margin: auto; 
  line-height: 0;
}
/* ロゴ画像自体はアンカーの幅に合わせて余白を持たせない */
.footer-logo-link .logo{
  margin: 0;
  display: block;
}
footer p{
  text-align: center;
  font-weight: 700;
  line-height: 2.0;
  margin: 0;
}

footer p.inquiry{
  font-size: 18px;
  margin: 0;
}
footer p.company{
  font-size: 25px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

footer .website{
  font-size: 13px;
  line-height: 0;
  padding-bottom: 1em;
}

footer a,
footer a:link,
footer a:visited,
footer a:hover,
footer a:active{
  text-decoration: none;
  color: inherit;
}

footer a:focus,
footer a:focus-visible{
  text-decoration: underline;
  text-decoration-color: #fff;
}

footer a:hover{
  text-decoration: underline;
  text-decoration-color: #fff;
}

/* ロゴにフォーカスしたときに website のリンクに下線を表示 */
/* ロゴにフォーカスまたはホバーしたときに website のリンクに下線を表示 */
footer > .footer-logo-link:focus ~ .website a,
footer > .footer-logo-link:focus-visible ~ .website a,
footer > .footer-logo-link:hover ~ .website a {
  text-decoration: underline;
  text-decoration-color: #fff;
}

/* ページトップボタン用の設定 */

.scroll-top{
  position: fixed;
  right: 36px;
  bottom: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: transparent;
  color: inherit;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  z-index: 9999;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
  padding: 0;
}
.scroll-top.show{
  opacity: 1;
  transform: translateY(0);
}
.scroll-top img{
  display: block;
  width: 36px;
  height: 36px;
}

/* スマホ対応等 */

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

  .innerbox{
    max-width: 95%;
  }
	
  #title .lead-left p{
	font-size: 16px;
	line-height: 2.0;
  }

  #title .lead-right .leadphoto-name{
	font-size: 20px;
  }

}

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

  div.detail-link,.detail-link img{
      max-width: 100%!important;
      width: 100%!important;
      margin: 10px auto;
    }
  .notes {
    margin: 10px auto;
  }
}

@media screen and (max-width: 548px) {
  body, #title .lead-left p {
    font-size: 16px;
    font-weight: 400;
    line-height: 2.0;
  }
  .innerbox{
    max-width: 90%;
  }
  #title .lead-right{
    padding: 15px 20px;
  }
  #title .lead-right .lead-name{
    font-size: 24px;
  }
  #title .lead-right .lead-position, #title .lead-right .lead-profile{
    font-size: 13px;
  }
  #main{
    margin: auto;
  }
  h1{
    font-size: 22px;
    line-height: 1.6;
    margin: 30px 0 12px;
  }
  .notes{
    font-size: 12px;
    line-height: 1.6;
  }
  .img{
    padding: 0 5%;
    margin: 15px auto;
  }
  .scroll-top img{
    width: 24px;
    height: 24px;
  }
  footer p.company {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
  }
}