@charset "utf-8";

/* ==========================
   Cancel Policy Page
   ========================== */

#a-billboard {
  padding: 0;
}

#a-footer {
  padding: 45px 0 0 0;
  background-image: url(_src/630/footback2.webp);
  background-repeat: no-repeat;
  background-position: right bottom;
}

/* Header / Billboard / Lines (他ページと同様) */
#bk2001 {
  background-image: url(_src/631/ususiro.png);
  background-repeat: repeat;
}

#bk2001 > div {
  margin: 0 auto;
  max-width: 100%;
}

#bk2001 > div {
  padding-left: 20px;
  padding-top: 25px;
  padding-right: 20px;
  padding-bottom: 20px;
}

#bk2002 {
  background-image: url(_src/123/thanksheader.webp);
  background-repeat: no-repeat;
  background-position: left center;
}

#bk2003,
#bk2005 {
  background-image: url(_src/593/lines.png);
  background-repeat: repeat-x;
  background-position: left bottom;
}

#bk2004 > div {
  margin: 0 auto;
  max-width: 1000px;
}

#bk2004 > div {
  padding-left: 35px;
  padding-top: 35px;
  padding-right: 0;
  padding-bottom: 30px;
}

#bk2010 > div {
  margin: 0 auto;
  max-width: 1200px;
}

#bk2010 > div {
  padding-left: 0;
  padding-top: 49px;
  padding-right: 0;
  padding-bottom: 10px;
}

/* Footer images sizing (flow と同等に揃える) */
#bk2012 > div {
  margin: 0 auto;
  max-width: 430px;
}
#bk2012 .g-column {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
#bk2012 .g-column > .column {
  float: none;
  width: auto;
  margin: 0 8px 10px;
}

#bk2013 > div {
  padding-left: 0;
  padding-top: 45px;
  padding-right: 0;
  padding-bottom: 45px;
}

/* 軽いアンカーずれ対策（固定ヘッダー想定） */
#bk2004 {
  scroll-margin-top: 90px;
}

.jm-cancel__lead {
  max-width: 46em;
  margin: 0 auto;
  line-height: 1.9;
}

/* 全体枠（お問い合わせフォームのように） */
.jm-cancel__frame {
  margin: 14px 12px 18px;
  padding: 14px 14px;
  border: 1px solid rgba(9, 138, 179, 0.38);
  border-radius: 12px;
  background: rgba(9, 138, 179, 0.1);
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .jm-cancel__frame {
    margin: 14px auto 18px;
    max-width: 760px;
    padding: 16px 18px;
  }
}

.jm-cancel__frame .jm-cancel__lead + .jm-cancel__lead {
  margin-top: 8px;
}

.jm-policy {
  max-width: 720px;
  margin: 18px auto 0;
  padding: 16px 18px;
  border: 1px solid rgba(190, 150, 40, 0.42);
  border-radius: 12px;
  background: rgba(255, 215, 120, 0.22);
}

.jm-policy__title {
  font-weight: 700;
  margin-bottom: 10px;
}

.jm-policy__list {
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.9;
}

.jm-cancel__note {
  max-width: 720px;
  margin: 14px auto 0;
  line-height: 1.9;
  color: #2a2a2a;
}

/* -dress_black でリンク等が白くなる干渉に備えて、本文の可読性を優先 */
.-dress_black #bk2004 .c-body,
.-dress_black #bk2004 .jm-policy,
.-dress_black #bk2004 .jm-policy__title,
.-dress_black #bk2004 .jm-policy__list,
.-dress_black #bk2004 .jm-cancel__note {
  color: #1a1a1a;
}

.-dress_black #bk2004 .jm-policy {
  background: rgba(255, 215, 120, 0.22);
  border-color: rgba(190, 150, 40, 0.42);
}

/* -dress_black でも枠内の薄い背景色を維持 */
.-dress_black #bk2004 .jm-cancel__frame {
  background: rgba(9, 138, 179, 0.1);
  border-color: rgba(9, 138, 179, 0.38);
}

@media (max-width: 641px) {
  .jm-policy {
    padding: 14px 14px;
  }
}

/* Image sizing (flow と同等) */
#imgsrc581_1 {
  width: 250px;
}

#imgsrc623_1 {
  width: 250px;
}

#imgsrc625_1 {
  width: 250px;
}

#imgsrc864_1 {
  width: 50px;
}

#imgsrc866_1 {
  width: 50px;
}

#imgsrc868_1 {
  width: 50px;
}
#imgsrc870_1 {
  width: 50px;
}
#imgsrc872_1 {
  width: 50px;
}

#imgsrc828_1 {
  width: 300px;
}

@media only screen and (max-width: 641px) {
  /* Header spacing (flow と同等) */
  #bk2001 > div {
    padding-left: 0;
    padding-top: 5px;
    padding-right: 0;
    padding-bottom: 0;
  }

  /* Billboard image variant (flow と同等) */
  #bk2002 {
    background-image: url(_src/123/thanksheader.webp);
    background-repeat: no-repeat;
    background-position: left top;
  }

  /* Cancel policy: SP時の左右中央揃え（余白を左右対称に） */
  #bk2004 > div {
    padding-left: 15px;
    padding-top: 25px;
    padding-right: 15px;
    padding-bottom: 25px;
  }

  /* 見出し＆本文は中央、リストは左揃えのまま中央配置 */
  #bk2004 .jm-cancel .c-title,
  #bk2004 .jm-cancel .c-small_headline,
  #bk2004 .jm-cancel .jm-cancel__lead,
  #bk2004 .jm-cancel .jm-cancel__note,
  #bk2004 .jm-policy__title {
    text-align: center;
  }

  #bk2004 .jm-policy__list {
    display: inline-block;
    text-align: left;
  }

  #a-footer {
    padding: 0;
    background-image: url(_src/699/footsp.webp);
    background-repeat: no-repeat;
    background-position: right bottom;
  }

  /* Footer2btn (flow の #bk1148 相当) */
  #bk2010.b-plain > .column,
  #bk2010.b-plain > .g-column,
  #bk2010.b-both_diff > .column,
  #bk2010.b-both_diff > .g-column,
  #bk2010.b-headlines > .column,
  #bk2010.b-headlines > .g-column,
  #bk2010.b-album > .column,
  #bk2010.b-album > .g-column,
  #bk2010.b-tab > .column,
  #bk2010.b-tab > .g-column,
  #bk2010.b-accordion > .column,
  #bk2010.b-accordion > .g-column {
    margin: 0 auto;
    max-width: 250px;
  }

  #bk2010 > div {
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
  }

  /* SNS block width (flow の #bk1172 相当) */
  #bk2012.b-plain > .column,
  #bk2012.b-plain > .g-column,
  #bk2012.b-both_diff > .column,
  #bk2012.b-both_diff > .g-column,
  #bk2012.b-headlines > .column,
  #bk2012.b-headlines > .g-column,
  #bk2012.b-album > .column,
  #bk2012.b-album > .g-column,
  #bk2012.b-tab > .column,
  #bk2012.b-tab > .g-column,
  #bk2012.b-accordion > .column,
  #bk2012.b-accordion > .g-column {
    margin: 0 auto;
    max-width: 200px;
  }

  /* Footer logo padding (flow の #bk1150 相当) */
  #bk2013 > div {
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
  }

  /* Small icons / logo on SP (flow と同等) */
  #imgsrc864_1 {
    width: 40px;
  }

  #imgsrc866_1 {
    width: 40px;
  }

  #imgsrc868_1 {
    width: 40px;
  }
  #imgsrc870_1 {
    width: 40px;
  }
  #imgsrc872_1 {
    width: 40px;
  }

  #imgsrc581_1 {
    width: 150px;
  }
}