@charset "utf-8";
/* responsive-special_day.css
   page-wedding-special_day.php用
  一日の流れ専用 レスポンシブ補完CSS
   - ブレイクポイント: 1024px
*/

/* PC設定 */
/* SPECAL DAY 一日の流れ
-------------------------------------------------- */
#special_day{
	background:url(/hanamizuki/wedding-img/special_day/bg.gif) no-repeat center 56px;
}
#special_day article{
	width:1000px;
	overflow:inherit;
}
#special_day section p{
	position:absolute;
	padding:20px 28px;
	border:1px dotted #9da5a5;
	right:57px;bottom:97px;
}
#flow{
	position:relative;
	height:3273px;
  & li[id^="fllow"] {
    background-size: 100% auto;
    & .bg_bottom {
      background-size: 100% auto;
    }
    & dl {
      background-size: 100% auto;
    }
  }
}

#flow ul{
	width:1000px;height:3273px;
	margin:0 auto;
	left:-96px;
	position:relative;
}
#flow ul li{
	position:absolute;
}
#flow ul li dt{
	margin-bottom:10px;
}
#flow ul li dd{
	line-height:1.8;
}
#fllow01{
  background: url(/hanamizuki/wedding-img/special_day/bg01-01.png) no-repeat left top;
	width: 408px;
  height:489px;
	left:100px;top:52px;
  padding-top: min(248px, calc(248 / 408 * 100%));
}
#fllow01 .bg_bottom {
  background:url(/hanamizuki/wedding-img/special_day/bg01-03.png) no-repeat left bottom;
  padding-bottom:min(130px, calc(130 / 408 * 100%));
}
#fllow01 dl{
  background:url(/hanamizuki/wedding-img/special_day/bg01-02.png) repeat-y left top;
  padding: 0 0 0 34px;
  & dd {
    width: 230px;
  }
}
#fllow02{
	background:url(/hanamizuki/wedding-img/special_day/bg02_head.png) no-repeat left top;
	width:353px;height:508px;
	left:749px;top:176px;
	padding-top:328px;
}
#fllow02 .bg_bottom{
	background:url(/hanamizuki/wedding-img/special_day/bg02_bottom.png) no-repeat left bottom;
	padding-bottom:min(22px, calc(22 / 353 * 100%));
}
#fllow02 dl{
	background:url(/hanamizuki/wedding-img/special_day/bg02_inner.png) repeat-y left top;
	padding:22px 0 10px 28px;
}
#fllow02 dd{
	width:240px;
}
#fllow03{
	background:url(/hanamizuki/wedding-img/special_day/bg03-01.png) no-repeat left top;
	width:486px;height:544px;
	left:44px;top:541px;
  padding-top: min(434px ,calc(434 / 486 * 100%));
}
#fllow03 dl{
	padding:0 0 10px 90px;
  background:url(/hanamizuki/wedding-img/special_day/bg03-02.png) repeat-y left top;
  & dd {
  	width:368px;
  }
}
#fllow03 .bg_bottom {
  background:url(/hanamizuki/wedding-img/special_day/bg03-03.png) no-repeat left bottom;
  padding-bottom:min(22px, calc(22 / 486 * 100%));
}

#fllow04{
	background:url(/hanamizuki/wedding-img/special_day/bg04_head.png) no-repeat left top;
	width:300px;/*height:399px;*/
	left:798px;top:769px;
	padding-top: min(219px, calc(219 / 300 * 100%));
}
#fllow04 .bg_bottom{
	background:url(/hanamizuki/wedding-img/special_day/bg04_bottom.png) no-repeat left bottom;
	padding-bottom:min(22px, calc(22 / 300 * 100%));
}
#fllow04 dl{
	background:url(/hanamizuki/wedding-img/special_day/bg04_inner.png) repeat-y left top;
	padding:22px 0 10px 30px;
}
#fllow04 dd{
	width:230px;
}
#fllow05{
	background:url(/hanamizuki/wedding-img/special_day/bg05_head.png) no-repeat left top;
	width:334px;/*height:479px;*/
	left:170px;top:1162px;
	padding-top:min(299px, calc(299 / 334 * 100%));
}
#fllow05 .bg_bottom{
	background:url(/hanamizuki/wedding-img/special_day/bg05_bottom.png) no-repeat left bottom;
	padding-bottom:min(22px, calc(22 / 334 * 100%));
}
#fllow05 dl{
	background:url(/hanamizuki/wedding-img/special_day/bg05_inner.png) repeat-y left top;
	padding:22px 0 10px 30px;
}
#fllow05 dd{
	width:230px;
}
#fllow06{
	background:url(/hanamizuki/wedding-img/special_day/bg06_head.png) no-repeat left top;
	width:411px;/*height:576px;*/
	left:684px;top:1233px;
	padding-top:min(300px, calc(300 / 411 * 100%));
}
#fllow06 .bg_bottom{
	background:url(/hanamizuki/wedding-img/special_day/bg06_bottom.png) no-repeat left bottom;
	padding-bottom:min(140px, calc(140 / 411 * 100%));
}
#fllow06 dl{
	background:url(/hanamizuki/wedding-img/special_day/bg06_inner.png) repeat-y left top;
	padding:22px 0 0 85px;
}
#fllow06 dd{
	width:230px;
}
#fllow07{
	background:url(/hanamizuki/wedding-img/special_day/bg07-01.png) no-repeat left top;
	width:427px;height:484px;
	left:100px;top:1700px;
  padding-top: min(348px ,calc(348 / 427 * 100%))
}
#fllow07 dl{
	padding:0 0 15px 34px;
  background:url(/hanamizuki/wedding-img/special_day/bg07-02.png) repeat-y left top;
	& dd {
    width:296px;
  }
}
#fllow07 .bg_bottom {
  background:url(/hanamizuki/wedding-img/special_day/bg07-03.png) no-repeat left bottom;
  padding-bottom:min(22px, calc(22 / 427 * 100%));
}
#fllow08{
	background:url(/hanamizuki/wedding-img/special_day/bg08_head.png) no-repeat left top;
	width:373px;/*height:436px;*/
	left:725px;top:1907px;
  padding-top:min(255px, calc(255 / 373 * 100%));
}
#fllow08 .bg_bottom{
	background:url(/hanamizuki/wedding-img/special_day/bg08_bottom.png) no-repeat left bottom;
  padding-bottom:min(22px, calc(22 / 373 * 100%));

}
#fllow08 dl{
	background:url(/hanamizuki/wedding-img/special_day/bg08_inner.png) repeat-y left top;
	padding:22px 0 10px 108px;
}
#fllow08 dd{
	width:230px;
}
#fllow09{
	background:url(/hanamizuki/wedding-img/special_day/bg09_head.png) no-repeat left top;
	width:348px;/*height:292px;*/
	left:100px;top:2273px;
  padding-top:min(140px, calc(140 / 348 * 100%));
}
#fllow09 .bg_bottom{
	background:url(/hanamizuki/wedding-img/special_day/bg09_bottom.png) no-repeat left bottom;
	padding-bottom:min(22px, calc(22 / 348 * 100%));
}
#fllow09 dl{
	background:url(/hanamizuki/wedding-img/special_day/bg09_inner.png) repeat-y left top;
	padding:0 0 10px 28px;
}
#fllow09 dd{
	width:240px;
}
#fllow10{
	background:url(/hanamizuki/wedding-img/special_day/bg10_head.png) no-repeat left top;
	width:368px;/*height:511px;*/
	left:667px;top:2422px;
  padding-top:min(219px, calc(219 / 368 * 100%));
}
#fllow10 .bg_bottom{
	background:url(/hanamizuki/wedding-img/special_day/bg10_bottom.png) no-repeat left bottom;
  padding-bottom:min(154px, calc(154 / 368 * 100%));
}
#fllow10 dl{
	background:url(/hanamizuki/wedding-img/special_day/bg10_inner.png) repeat-y left top;
	padding:22px 0 10px 28px;
}
#fllow10 dd{
	width:240px;
}
#fllow11{
	background:url(/hanamizuki/wedding-img/special_day/bg11_head.png) no-repeat left top;
	width:415px;/*height:529px;*/
	left:100px;top:2652px;
  padding-top:min(364px, calc(364 / 415 * 100%));
}
#fllow11 .bg_bottom{
	background:url(/hanamizuki/wedding-img/special_day/bg11_bottom.png) no-repeat left bottom;
	padding-bottom:min(22px, calc(22 / 415 * 100%));
}
#fllow11 dl{
	background:url(/hanamizuki/wedding-img/special_day/bg11_inner.png) repeat-y left top;
	padding:22px 0 10px 30px;
}
#fllow11 dd{
	width:300px;
}
#time01{
	left:503px;top:54px;
}
#time02{
	left:557px;top:446px;
}
#time03{
	left:557px;top:765px;
}
#time04{
	left:557px;top:932px;
}
#time05{
	left:557px;top:1477px;
}
#time06{
	left:557px;top:1938px;
}
#time07{
	left:503px;top:2997px;
}

@media (width <= 1023px) {

  /* SPECIAL DAY */
  #special_day {
    background:none;

    /* 画像をコンテナ幅に収める（PCでは拡大しない） */
    img {
      max-width: 100%;
      height: auto;
    }

    /* article コンテナ: 1000px → 100% */
    & article {
      width: 100%;
      overflow: hidden;
      box-sizing: border-box;
      padding: 0 10px;
    }

    /* #flow 下部の注記テキスト: 絶対配置を解除、文字幅で中央揃え */
    & section p {
      position: static;
      right: auto;
      bottom: auto;
      width: fit-content;
      margin: 0 auto 60px;
      padding: 15px;
      font-size: 13px;
      text-align: left;
    }
  }

  /* #flow: 絶対配置タイムライン → 通常フロー縦積み */
  #flow {
    height: auto;
    position: relative;

    &::before {
      /* 背景画像をつける */
      content: "";
      position: absolute;
      top: 26px;
      bottom: 140px;
      right: 0;
      left: 0;
      display: block;
      background:url(/hanamizuki/wedding-img/special_day/bg_sp.gif) repeat-y center top;
    }
    & ul {
      width: 100%;
      max-width: 486px;
      height: auto;
      left: 0;
      container-type: inline-size;

      /* 全 li: 絶対配置を解除 */
      & li {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        max-width: 100% !important;
        box-sizing: border-box;
        display: block;
      }

      /* 時刻バッジ: 中央揃えで表示 */
      & li[id^="time"] {
        background-image: none;
        text-align: center;
        padding: 15px 0;
        text-indent: -5px; // ずれ調整
      }

      /*
       * フロー本文アイテム:
       */
      & li[id^="fllow"] {
        margin: 0 auto 30px;
        height: auto;

        & .bg_bottom {
        }

        & dl {
          position: relative;
        }

        & dt {
        }

        & dd {
          font-size: 13px;
        }
      }
    }
  }

  /*
   * 各アイテム
   */
  #fllow01 {
    height: auto;
    & dl {
      padding-right: calc(120 / 408 * 100cqw);
      padding-left: 5cqw;
      max-width: 408px;
      box-sizing: border-box;
      & dd {
        width: 100%;
      }
    }
  }
  #fllow02 {
    padding-top:min(328px, calc(328 / 353 * 100%)) !important;
    & dl {
      padding-left: 5cqw;
      padding-right: max(5cqw, calc(75 / 353 * 100%));
      & dd {
        width: auto;
      }
    }
  }
  #fllow03 {
    & dl {
      padding-left: calc(90 / 486 * 100cqw);
      padding-right: 5cqw;
      & dd {
        width: auto;
      }
    }
  }
  #fllow04 {
    & dl {
      padding-inline: 5cqw;
    }
    & dd {
      width: auto;
    }
  }
  #fllow05 {
    & dl {
      padding-right: calc(45 / 334 * 100cqw);
      padding-left: 5cqw;
    }
    & dd {
      width: auto;
    }
  }
  #fllow06 {
    & dl {
      padding-left: min(85px, calc(85 / 411 * 100cqw));
      padding-right: min(85px, calc(85 / 411 * 100cqw));
    }
    & dd {
      width: auto;
    }
  }
  #fllow07 {
    & dl {
      padding-left: min(34px, calc(34 / 427 * 100cqw));
      padding-right: min(91px, calc(91 / 427 * 100cqw));
      & dd {
        width: auto;
      }
    }
  }
  #fllow08 {
    & dl {
      padding-left: min(108px, calc(108 / 373 * 100cqw));
      padding-right: min(34px, calc(34 / 373 * 100cqw));
      & dd {
        width: auto;
      }
    }
  }
  #fllow09 {
    & dl {
      padding-left: min(28px, calc(28 / 348 * 100cqw));
      padding-right: min(76px, calc(76 / 348 * 100cqw));
      & dd {
        width: auto;
      }
    }
  }
  #fllow10 {
    & dl {
      padding-left: min(28px, calc(28 / 368 * 100cqw));
      padding-right: min(96px, calc(96 / 368 * 100cqw));
      & dd {
        width: auto;
      }
    }
  }
  #fllow11 {
    & dl {
      padding-left: min(30px, calc(30 / 415 * 100cqw));
      padding-right: min(73px, calc(73 / 368 * 100cqw));
      & dd {
        width: auto;
      }
    }
  }
}