@charset "UTF-8";

/* ==========================================================================
   全体レイアウト（画面100%は白色ベース）
   ========================================================================== */
.p-one-day {
  background-color: #ffffff;
  padding-top: 10px;        /* 見出しボックスが上にはみ出るための余白 */
  padding-bottom: 80px;
  width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   上部はみ出し見出しボックス（横幅800px、1pxの青枠線、センター揃え）
   ========================================================================== */
.p-one-day__head-box {
  max-width: 800px;
  width: calc(100% - 32px);  /* スマホ等で画面両端に最低16pxずつの猶予を持たせる */
  margin-right: auto;
  margin-left: auto;
  background-color: #ffffff;
  border: 1px solid #007bc3; /* デザインに合わせた青い枠線 */
  padding: 40px 20px;        /* 上下の高さを保つ内側余白 */
  text-align: center;
  position: relative;
  z-index: 10;               /* グレー背景の上に確実に重ねる */
  box-sizing: border-box;
  
  /* 【重要】ボックスの高さのぴったり半分（約60px）だけ下にずらして重ねる */
  margin-bottom: -61px;      
}

.p-one-day__head-text {
  font-size: 20px;
  font-weight: bold;
  color: #007bc3;            
  margin: 0;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   グレーのコンテンツ背景（横幅1100px）
   ========================================================================== */
.p-one-day__inner {
  max-width: 1100px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  background-color: #ebf4f9; /* 1100pxの内側を淡いグレーブルーに */
  padding: 110px 20px 80px 20px; /* 見出しボックスが被るため、上部paddingを広く設定 */
  
  /* 【重要修正】flex-direction: column を指定することで、
     子要素（タイムラインと下のテキストボックス）を強制的に縦並び・中央揃えにします */
  display: flex;
  flex-direction: column;
  align-items: center; 
  box-sizing: border-box;
}
/* スケジュールコンテナ（横幅600px） */
.p-one-day__schedule {
  width: 100%;
  max-width: 600px;
  position: relative;        /* 縦線の基準点 */
}
/* スケジュールコンテナ（横幅600px） */
.p-one-day__text {
  width: 100%;
  max-width: 800px;          /* 横幅をスケジュールの最大幅(600px)と一致させる */
  padding: 30px;
  margin-top: 50px;          /* スケジュール（退社ラベル）との間の隙間 */
  margin-bottom: 0;          /* 内側の折り返しを無効化 */
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  box-sizing: border-box;
  line-height:1.4;
}

.p-one-day_comment{
  margin:10px 0;
}

/* ==========================================================================
   タイムライン装飾（縦の青線）
   ========================================================================== */
/* 全体を縦につなぐ中心の細い青い線 */
.p-one-day__schedule::before {
  content: "";
  position: absolute;
  top: 30px;                 /* 隙間を拡張したためスタート位置を再調整 */
  bottom: 30px;              /* 隙間を拡張したためストップ位置を再調整 */
  left: 90px;                /* 時間列の右端（幅90px）のジャストな位置に固定 */
  width: 2px;
  background-color: #007bc3;
  z-index: 1;
}

/* ==========================================================================
   【右ズレ完全解決】出社・退社のテキストラベル（マージンで真ん中へ引き戻す）
   ========================================================================== */
.p-one-day__status-node {
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
  
  /* 縦線がある「左から90px」の位置に要素の左端を合わせる */
  left: 90px;
  
  /* 【重要修正】transformを完全に廃止し、横幅を120pxに固定 */
  display: block;
  width: 120px; 
  /* 横幅120pxのちょうど半分（60px）だけ左に強制的に引き戻します（これで右ズレが解消します） */
  margin-left: -60px;
  
  box-sizing: border-box;
  padding-top: 10px;
  padding-bottom: 10px;
}

.p-one-day__status-node.-bottom {
  margin-top: 40px; 
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.p-one-day__status-label {
  font-size: 18px;
  font-weight: bold;
  color: #007bc3;
  background-color: #ebf4f9; /* 縦線を隠すためにグレー背景と同色を敷く */
  /* 左右のpaddingを0にして、文字を枠の真ん中に配置 */
  padding: 8px 0;         
  display: block;
  text-align: center;
  white-space: nowrap;
  border:1px solid #007bc3;
  width: 100%;
}

/* ==========================================================================
   各スケジュール項目（横並びレイアウト）
   ========================================================================== */
.p-one-day__item {
  display: flex;
  margin-bottom: 48px;
  position: relative;
  z-index: 2;                /* 縦線より前に出す */
}
.p-one-day__item:last-of-type {
  margin-bottom: 0;
}

/* 左側：時間列（幅を90pxで完全固定し、縦線とピッタリ合わせる） */
.p-one-day__time-col {
  width: 90px;               /* 縦線の位置（left: 90px）と同値 */
  flex-shrink: 0;
  text-align: right;
  padding-right: 20px;       /* 線と文字の間の適切な余白 */
  box-sizing: border-box;
  position: relative;
}

/* 時間テキスト */
.p-one-day__time {
  font-size: 30px;
  font-weight: bold;
  color: #007bc3;
  line-height: 1;
  display: inline-block;
}

/* 【位置固定】時間列の右端（＝縦線の真上）に中央を合わせた丸ドット */
.p-one-day__time-col::after {
  content: "";
  position: absolute;
  right: -5px;               /* 幅90pxの右端にドットの中央を合わせる */
  top: 6px;                  /* フォントの高さの中心付近に合わせる */
  width: 10px;
  height: 10px;
  background-color: #007bc3;
  border-radius: 50%;
  z-index: 3;
}

/* 右側：コンテンツ内容列 */
.p-one-day__content-col {
  flex-grow: 1;
  padding-left: 30px;        /* 線からコンテンツまでの見やすい余白 */
  box-sizing: border-box;
}

/* 各項目の見出し */
.p-one-day__item-title {
  font-size: 20px;
  font-weight: bold;
  color: #333333;
  line-height: 1.5;
  margin-top: 2px;
  margin-bottom: 16px;
}
.p-one-day__sub-title {
  font-size: 13px;
  font-weight: normal;
  color: #666666;
  display: block;
  margin-top: 4px;
}

/* 画像まわり */
.p-one-day__image {
  width: 80%;
}
.p-one-day__image img {
  width: 100%;
  height: auto;
  display: block;
}
.p-one-day__image1 {
  width: 65%;
  margin:10px 0 0 15%;
}
/* 複数写真が並ぶ場合の隙間調整 */
.p-one-day__image-group .p-one-day__image {
  margin-bottom: 12px;
}
.p-one-day__image-group .p-one-day__image:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   📱 完全レスポンシブ対応（スマホサイズ：767px以下）
   ========================================================================== */
@media screen and (max-width: 767px) {
  .p-one-day__schedule {
    margin-left: 30px;
    width: calc(100% - 30px); /* マージンを増やした分、横幅がはみ出ないように調整 */
  }
  .p-one-day {
    padding-top: 10px;
    padding-bottom: 40px;
  }

  /* 見出しの文字サイズ調整とネガティブマージンの縮小 */
  .p-one-day__head-box {
    width:75%;
    margin:0 auto;
    padding: 24px 12px;
    margin-bottom: -43px;    
  }
  .p-one-day__head-text {
    font-size: 15px;
  }

  .p-one-day__inner {
   width:90%;
   margin:0 auto;
    padding: 75px 12px 40px 12px; 
  }

  /* スマホ時は縦線の位置を左端から「20px」の位置にシフト */
  .p-one-day__schedule::before {
    left: 20px;
    top: 20px;
    bottom: 20px;
  }
  
  	.p-one-day__status-label {
	  font-size: 18px;
	  font-weight: bold;
	  color: #007bc3;
	  background-color: #ebf4f9; /* 縦線を隠すためにグレー背景と同色を敷く */
	  padding: 8px 10px;         /* 文字自体の上下左右の微細な座布団余白 */
	  display: block;
	  text-align: center;
	  white-space: nowrap;
	  border:1px solid #007bc3;
	}

  /* スマホ時：出社・退社ラベルの中心をスマホ用の縦線（20px）に吸着 */
   .p-one-day__status-node {
    left: 20px;
    
    /* 前回の修正をそのまま維持：横幅を固定してマージンで中央揃え */
    display: block;
    width: 100px;
    margin-left: -50px;
    
    margin-bottom: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .p-one-day__status-node.-bottom {
    margin-top: 34px;
    margin-bottom: 0;
  }
  
  /* スマホ時のボタン内文字の中央揃えを保証 */
  .p-one-day__status-label {
    padding: 8px 0;
    width: 100%;
  }
  /* アイテムを横並びから『縦並び』へ切り替える */
  .p-one-day__item {
    flex-direction: column;
    margin-bottom: 32px;
    padding-left: 45px;      /* 左に寄せた縦線と被らないように右にズラす */
  }

  /* 時間列の固定幅を解除 */
  .p-one-day__time-col {
    width: auto;
    text-align: left;
    padding-right: 0;
    margin-bottom: 8px;
  }

  /* スマホ時の青い丸ドットの位置を左端の縦線（20pxの位置）に合わせる */
  .p-one-day__time-col::after {
    left: -30px;             
    right: auto;
    top: 6px;
  }

  .p-one-day__content-col {
    padding-left: 0;
  }
  
  .p-one-day__item-title {
    font-size: 15px;
    margin-bottom: 10px;
  }
  /* スマホ時のテキストエリア幅を100%に調整 */
  .p-one-day__text {
    width: 100%;
    max-width: 100%;
    margin-top: 30px;
    padding: 20px 15px;
  }
}