@charset "UTF-8";
/* 共通部分
--------------------------- */
html, body{
height:100%;
margin:0;
}
html{
    font-size:100%;
}
body{
    font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDP Gothic",sans-serif;
    line-height:1.7;
    color:#443322;
    /* グーグル地図のある画面で文字でかすぎ防止 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

h1,h2{
   font-family:"游明朝",serif;
}
a{
    text-decoration:none;
 }
 img{
    max-width:100%;
 }
 /*レイアウト*/
 .align-center {
    text-align: center;
}
 .logo{
   width:40px;
}
 .page-header{
   padding-top:0.5rem;
   padding-bottom:1rem
}
.font-english {
   font-family: 'Times-New-Roman',serif;
   font-weight: normal;
}
.page-title{
   max-width:720px;
   margin:2rem auto 0;
   padding:0 1rem;
   font-size:1.8rem;
   text-align:center;
}
.heading-large{
   font-size:2.5rem;
   text-align:center;
   margin-bottom:0.2rem;
}
.heading-medium{
   font-size:2rem;
   text-align:center;
   margin-bottom:0.2rem;
}
/*ボタン*/
.btn{
   display:inline-block;
   font-size:1.5rem;
   background-color:#0bd;
   color:#fff;
   border-radius:8px;
   padding:0.75rem 1.5rem;
}
.btn:hover{
   background-color:#0090aa;
}

/*ヘッダーカバー*/
.cover-home{
   background-image:url(../images/建設現場の朝日とクレーン.jpg);
}
.cover{
   background-size: cover;
   background-position:center bottom;
   height: 500px;}

/*ご参考情報で背景を短くする*/
.side-info-page .cover{
   height:320px;
}
/*contactページ専用*/
.contact-page .cover{
   height:220px;
}
/*contactページ専用終了*/
 
.side-info-page main{
   margin-top:0.7rem;
}
.main-nav {
   display: flex;
   justify-content: center;
   gap: 1rem;
   font-size: 1rem;
   list-style: none;
 }
 .main-nav a {
   color:#443322;
   /*日本語メニュー2行化を防ぐ*/
   white-space:nowrap;
 }
 .main-nav a:hover {
   color:#00bbdd;
 }
 .logoandofficename{
   display:flex;
   align-items:flex-start;
   margin-left:1rem;
}
.container-wrapper{
   max-width:960px;
   margin:0 auto;
   padding:0 1rem;
}
.greeting p{
   padding:0 1rem;
}
.characters{
   margin-bottom:2rem;
}
.characters ul{
   padding:0 2rem;
}
.characters h2{
   font-size:1.3rem;
   margin-left:1rem;
}
 /*10ストーリー*/
 .container{
   max-width:1100px;
   margin:0 auto;
   display:grid;
   grid-template-columns:1fr;
   gap:2rem;
 }
 .story-item{
   display:flex;
   gap:1rem;
   margin-bottom:1rem;
   align-items:flex-start;
   padding:0 1.5rem;
 }
 /*サムネイル*/
 .story-item img{
   width:30%;
   max-width:120px;
   aspect-ratio:2/3;
   object-fit:cover;
   border-radius:6px;
 }
 /*文章ブロック*/
 .story-text{
   flex:1;
 }
 /*導入分*/
 .story-text p{
   font-size:0.95rem;
   line-height:1.6;
   margin:0 0 0.5rem;
 }
 /*...本文を読むボタン*/
 .story-more{
   display:inline-block;
   font-size:0.85rem;
   color:#555;
   text-decoration:none;
   border-bottom:1px solid #aaa;
   padding-bottom:2px;
 }
 /*story1---------*/
 .characters-each-story{
   max-width:900px;
   padding:0 1rem;
   font-size:0.9rem;
   color:#555;
   margin:1rem auto;
 }
 .each-story-item{
   max-width: 960px;
  background:#fafafa;
  padding:1.5rem;
  border-radius:12px;
  line-height:1.9;
 }
 .each-story-item p{
   font-size:0.95rem;
   line-height:1.6;
   margin:0 0 0.8rem;
 }
 .story-image{
   float:left;
   width:40%;
   max-width:260px;
   aspect-ratio:2/3;
   margin:0 1rem 0.5rem 0;
 }
 .story-nav {
  margin: 40px 0 20px;
  display: flex;
  justify-content: space-between;
  font-size: 0.95em;
}

.story-nav a {
  text-decoration: none;
  color: #555;
}

.story-container{
   max-width:900px;
   margin:0 auto;
   padding:1rem;
}
.profitlosstable{
   margin:0 auto;
}
.profitlosstable td{
   text-align:right
}

/* 棒グラフ */
.chart-scroll {
  overflow-x: auto;
  padding-bottom: 8px;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-width: 1400px;
  height: 360px;
  padding: 24px 16px 16px;
  box-sizing: border-box;
  background: #f7f7f7;
  border-radius: 12px;
}

.bar-chart {
  position: relative;
}

.bar-chart::before {
  content: "";
  position: absolute;
  left: calc((631 - 420) / (1180 - 420) * 100%);
  top: 0;
  bottom: 0;
  width: 2px;
  background: #d9534f;
  opacity: 0.6;
}

.bar-item {
  width: 24px;
  height:100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bar {
  width: 100%;
  height: 100%;
  background: #4a6fa5;
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
  transform: scaleY(0);
  animation: grow 1s ease-out forwards;
}

@keyframes grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(var(--scale,0)); }
}

.bar-item span {
  margin-top: 6px;
  font-size: 0.65rem;
}
/*グーグルマップ用*/
.location-map iframe{
    width: 100%;
    max-width: 100%;
    height: 300px;
}
.location .heading-large{
    margin-top: 1rem;
    margin-bottom:0rem;
}
/*お問い合わせ*/
.email{
   max-width:916px;
   background-color:#faf6f0;
   border-radius:48px;
   padding:1.5rem 2.5rem 2.5rem;
   margin:0 auto 2rem;
}
.email p{
   margin:1rem 0 2rem;
}
/* 報酬テーブル上の注記 */
.fee-note {
  text-align: center;
  font-size: 0.7rem;
  color: #555;
  margin: 0 0 0.5rem; /* tableとの距離 */
}

/* Feesページの料金表ブロック */
.location-info{
  max-width: 960px;
  margin: 2rem auto;
  padding: 1.5rem;
  background:#faf6f0;   /* emailと揃える */
  border-radius:16px;
}
/* Feesの料金表だけ文字サイズ調整 */
.location-info table{
  font-size:0.9rem;
}
.location-info td{
  line-height:1.5;
}
/* Fees table の見出し行 */
.location-info th{
  background:#e6dfd6;
  font-weight:normal;
}
/* Feesページ：背景と料金表の隙間を詰める */
.contact-page .location{
  margin-top: -1.5rem;
}
/* Fees table 専用 */
.fee-table{
  width:100%;
  border-collapse: collapse;
  background:#fff;
}

/* 枠線 */
.fee-table th,
.fee-table td{
  border:1px solid #c9c2bc;
  padding:0.75rem;
  vertical-align: top;
}
/*fee金額欄中央そろえ*/
.info .fee{
   text-align:center;
}
/* 特別に目立たせたいサービス行 */
.highlight-service{
    background-color:#f4f0e8; /* 見出しより少し薄め */
}

/*storyのページに↑ボタンをつける*/
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 8px 10px;
  border-radius: 50%;
  text-decoration: none;
  font-size: 18px;
  z-index: 9999; /* ← これだけ追加 */
}


 /*フッター-------------------------*/

 .page-footer{
   background-image:url(../images/footer-s.webp);
   background-size:cover;
   background-position:center;
   padding-top:1rem;
 }

 /*最後に入れ込んだ*/
.footer-description {
  display: block;
  font-size: 0.7rem;
  line-height: 1.6;
  margin: 0 auto 1rem;
  max-width: 680px;
  text-align: center;
  color: #555;
}

.info{
   width:100%;
   max-width:544px;
   margin:auto;
   padding:0 1.5rem;
   border-spacing:0;
}
.info th,
.info td{
   border-bottom: 1px solid #c9c2bc;
}
.info th{
   text-align:left;
   font-weight:normal;
   padding:1rem;
}
.info td{
   padding:0.5rem 0;
}
.copyright{
   background-color:#432;
   text-align:center;
   padding:2rem 0;
   margin-top:3rem;
   color:#fff;
}
/*フッターリンク*/
.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  text-align: center;
}

.footer-links li {
  display: inline-block;
  margin: 0 0.5rem;
}

.footer-links a {
  font-size: 0.7rem;
  color: #333;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

/*デスクトップ版*/
@media screen and (min-width:800px){
   .container{
      grid-template-columns:repeat(2,1fr)
   }
   .story-item{
      background:#fff;
      padding:1.2rem;
      border-radius:12px;
      box-shadow:0 8px 24px rgba(0,0,0,0.08)
   }
   .story-item img {
      width: 40%;
      max-width: 180px;
      aspect-ratio: 2/3;
  }
}
/* ===== 共通（スマホファースト） ===== */
.story-item{
  display: block;          /* ← flex をやめる */
  padding: 0 1.5rem;
  margin-bottom: 1rem;
}

.story-item img{
  float: left;
  width: 30%;
  max-width: 120px;
  margin: 0 12px 8px 0;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
}

.story-text{
  font-size: 0.95rem;
  line-height: 1.6;
}

/* float解除用（念のため） */
.story-item::after{
  content:"";
  display:block;
  clear:both;
}

/* ===== PCだけ横並び ===== */
@media screen and (min-width:800px){
  .story-item{
    display:flex;
    gap:1rem;
    align-items:flex-start;
    background:#fff;
    padding:1.2rem;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
  }

  .story-item img{
    float:none;
    width:40%;
    max-width:180px;
    margin:0;
  }
}