@charset "UTF-8";

/* 当日までの流れ (procedure.php, common/procedure.php) 専用。
   common_general.css の上に読み込む。
   pickup 系ページは同名の .flow を pickup.css 側に持っているので無関係。 */

/* --- 旧 page-guide.css より ---
   裸の img はヘッダー・フッターのアイコン画像にも効いている（意図どおり。見た目を保つため裸のまま）。 */

img {
  pointer-events: none;
  width: 100%;
}

main li {
  list-style: none;
}

/* 前後ナビ（.linkwrap） */

.linkwrap a {
  position: relative;
  font-weight: 500;
}

.linkwrap a:hover {
  opacity: 0.5;
  cursor: pointer;
}

.linkwrapBack::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid var(--themeocean);
  border-left: 0;
  left: -14px;
  top: 55.5%;
  transform: translateY(-50%);
}

.linkwrapNext::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--themeocean);
  border-right: 0;
  right: -14px;
  top: 55.5%;
  transform: translateY(-50%);
}

.linkwrap {
  display: flex;
  margin-top: 3%;
}

.linkwrap div {
  width: 100%;
}

/* .detail1Button 本体は common_general.css。ここは矢印だけ */

.ButtonBackArrow:hover .checkBack::before {
  border-right: 7px solid var(--white);
}

.checkBack::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid var(--themeocean);
  border-left: 0;
  left: calc(50% - 65px);
  top: 50%;
  transform: translateY(-50%);
}

.ButtonNextArrow:hover .checkNext::after {
  border-left: 7px solid var(--white);
}

.checkNext::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--themeocean);
  border-right: 0;
  right: calc(50% - 65px);
  top: 50%;
  transform: translateY(-50%);
}

/* ページ見出し画像（.pageTitle h1 は common_general.css） */

.pageTitle {
  position: relative;
  text-align: center;
}

.pageTitle img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}


/* CHECK の吹き出し */

.checkpoint {
  position: absolute;
  width: fit-content;
  margin: 0 auto;
  padding: 4px 8px;
  box-shadow: 3px 3px 0 0 var(--black);
  background: var(--themeocean);
  color: var(--themewhite);
  font-size: 13px;
  top: -3%;
  left: -2%;
  z-index: 20;
}

.checkpoint:before {
  content: '';
  position: absolute;
  top: 100%;
  margin-left: 39px;
  border-color: transparent;
  border-top-color: var(--black);
  border-right-color: var(--black);
  border-style: solid;
  border-width: 5.3px;
}

.checkpoint:after {
  content: '';
  position: absolute;
  top: 91%;
  margin-left: -12px;
  border-color: transparent;
  border-top-color: var(--themeocean);
  border-right-color: var(--themeocean);
  border-style: solid;
  border-width: 5.5px;
}

.checkpoint span {
  font-size: 14px;
}

/* PC 版 */

@media screen and (min-width: 1024px) {
  .pageTitle img {
    height: 174px;
  }

  .checkpoint {
    padding: 6px 10px;
    box-shadow: 3px 3px 0 0 var(--black);
    font-size: 15px;
    top: -6%;
    left: -2%;
  }

  .checkpoint:before {
    margin-left: 46px;
  }
}

/* --- ここからページ固有 --- */

/*ページ内リンクcss　終了*/

/*フローチャートcss*/

/* common_main.css から移設。procedure 系2ページ専用。 */

.icon {
  color: var(--black);
}


.flow-group {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.flow li {
  list-style-type: none;
  margin-top: 30px;
}

.flow dd {
  margin-left: 0;
  background-color: #f2f2f2;
  padding: 10px 10px 10px 12px !important;
}

.flow {
  position: relative;
  padding: 0;
  margin-top: 30px;
}

.flow::before {
  content: "";
  width: 15px;
  height: 97.6%;
  background: #f2f2f2;
  margin-left: -8px;
  display: block;
  position: absolute;
  top: 35px;
  left: 76px;
}

.flow>li {
  position: relative;
}

.flow>li .icon {
  font-size: 11px;
  border: solid 2px var(--themeocean);
  padding: 5px 0px;
  display: flex;
  justify-content: center;
  position: absolute;
  box-sizing: border-box;
  top: 5px;
  left: 0;
  z-index: 100;
  width: 60px;
  text-align: center;
  font-weight: 600;
  line-height: 16px;
}

.flow>li .icon.special::after {
  top: 50%;
  margin-top: 0;
}

.flow>li .iconquattro {
  top: 5px;
  display: block;
}

.flow>li .icon::after {
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent var(--themeocean);
  position: absolute;
  top: 8px;
  left: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.flow>li dl {
  padding-top: 5px;
  padding-left: 96px;
  position: relative;
}

.flow>li dl::before,
.flow>li dl::after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
}

.flow>li dl::before {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: var(--themeocean);
  border-radius: 50%;
  left: 72px;
}

.flow>li dl::after {
  width: 20px;
  border-bottom: 1px dashed var(--themeocean);
  position: absolute;
  left: 76px;
}

.flow>li dl dt {
  font-size: 1.2em;
  font-weight: 500;
  padding: 1px 0 1px 7px;
  margin-bottom: 1vh;
  color: var(--black);
  border-left: 5px solid var(--themeocean);
  position: relative;
}

.ready::after {
  top: 27.5px !important;
  width: 30px !important;
  border-bottom: 1px dashed var(--themeocean) !important;
  position: absolute !important;
  left: 76px !important;
}

.ready::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 24.5px !important;
  margin-top: 0 !important;
}

/* ▼▼▼ カッコの外（ファイルの一番最後）にこれを追記 ▼▼▼ */

.flow>li.seven dl:not(:first-of-type)::before,
.flow>li.seven dl:not(:first-of-type)::after {
  content: none !important;
  display: none !important;
}

.flow>li.seven dl dt {
  justify-content: space-between;
  border-left: none;
  margin-left: -0.05em;
  font-size: 15px;
  font-weight: 700;
  padding-right: 10px;
  font-size: 15px;
  font-weight: 700;
  padding-right: 10px;
  border-left: 1.5px solid var(--themeocean);
  border-bottom: 2px solid var(--themeocean);
  margin-bottom: 6px;
}

/* ========================================= */

/* ▼▼▼ 矢羽（やばね）型アイコンのCSS ▼▼▼ */

/* ========================================= */

/* 横並びを綺麗にするための設定 */

.flow>li.seven dt.nav-open {
  display: flex;
  align-items: flex-end;
}

.yabane-1,
.yabane-2 {
  display: inline-flex;
  text-decoration-thickness: 1px;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  color: var(--themeocean);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  margin-right: 10px;
  flex-shrink: 0;
}

.shrink {
  font-size: 10px;
}

.bold {
  font-weight: 600;
}

/* ========================================= */

/* ▼▼▼ 見出しごと囲む背景ボックスのCSS ▼▼▼ */

/* ========================================= */

.flow-content-box {
  background-color: #f2f2f2;
  /* 全体を囲む薄いグレー */
  /* border-radius: 4px; ←もし箱の角を少し丸くしたい場合はコメントを外してください */
  padding: 15px 10px 15px 10px;
}

/* ボックスの中の見出し（dt）の微調整 */

.flow-content-box dt {
  margin-bottom: 10px;
  /* 見出しと説明文の間の隙間 */

  /* border-left: none; ←もし矢羽の左にある「青い縦線」を消してスッキリさせたい場合はコメントを外してください */
}

/* 元々 dd に付いていたグレー背景を濃くする（二重防止） */

.flow-content-box dd {
  background-color: #dfdfdf !important;
  padding: 10px 10px 10px 14px !important;
}

/* --- PC版 --- */

@media screen and (min-width: 1024px) {
  .shrink {
    font-size: 12px;
  }

  .flow {
    position: relative;
    padding: 0;
    margin-top: 0px;
  }

  .flow>li .icon {
    font-size: 12px;
    border: solid 2px var(--themeocean);
    position: absolute;
    box-sizing: border-box;
    top: 0px;
    left: 0;
    z-index: 100;
    width: 77px;
    text-align: center;
    font-weight: 800;
    line-height: 17px;
  }

  .flow>li .special {
    top: 7px;
  }

  .flow>li dl {
    padding-top: 5px;
    padding-left: 120px;
    position: relative;
    top: -5px;
  }

  .flow>li dl {
    padding-left: 118px;
  }

  .flow>li dl::after {
    width: 31px;
    border-bottom: 1px dashed var(--themeocean);
    position: absolute;
    left: 90px;
    /*校正を受けて変えた*/
  }

  .flow>li dl::before {
    width: 7px;
    height: 7px;
    margin-top: -3px;
    background: var(--themeocean);
    border-radius: 50%;
    left: 90px;
    /*校正を受けて変えた*/
  }

  .flow::before {
    content: "";
    width: 15px;
    height: 97.6%;
    background: #f2f2f2;
    margin-left: 6px;
    /*校正を受けて変えた*/
    display: block;
    position: absolute;
    top: 29px;
    left: 80px;
  }

  .ready::before {
    top: 32.5px !important;
  }

  .ready::after {
    top: 35.5px !important;
    width: 32px !important;
    border-bottom: 1px dashed var(--themeocean) !important;
    position: absolute !important;
    left: 97px !important;
  }

  .kazari {
    width: 60px;
    margin: 10px 20px 10px 10px;
  }
}