@charset "UTF-8";

/* ========================================================= */
/* PC (デフォルトのスタイル - メディアクエリなし) */
/* 801px以上の画面に適用（これ以下のmax-widthメディアクエリで上書きされる） */
/* ========================================================= */
#pagePolicy {
  /* PC向けのデフォルトスタイル */
}
.mb30 {
  margin-bottom: 30px;
}
.mb50 {
  margin-bottom: 50px;
}


/* PC向けでは、headlineの背景画像はデフォルトのbg_headline.jpg */
#pagePolicy #headline {
  background-image: url(../img/policy/bg_headline.jpg);
}

/* PCでのRetina対応 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi),
       screen and (min-resolution: 2dppx) {
  #pagePolicy #headline {
    background-image: url(../img/policy/bg_headline@2x.jpg); /* 高解像度ディスプレイ用画像 */
  }
}

section .contents {
  max-width: 1020px;
	width: 97.5%;
	padding: 0 20px 0;
	margin: 50px auto 0;
  box-sizing: border-box;
}
section .contents h2 span {
  display: block;
  margin-bottom: 2em;
  border-top: 1px solid #000;
  font-size: 13px;
}
section .contents h3 {
  margin-bottom: 1em;
}
ul ul {
  margin-bottom: 1em;
}
section .contents ul {
  padding-left: 1em;
  margin-top: 1em;
}
section .contents ul li {
  padding-left: 1.5em;
  text-indent: -1.5em;
}


/* ========================================================= */
/* iPad (max-width: 800px) */
/* 800px以下の画面に適用。PCスタイルを上書き。 */
/* ========================================================= */
@media screen and (max-width: 800px) { /* 801pxより小さいので800px */
  /* iPad向けのスタイルをここに記述 */
  /* 必要に応じてPCのスタイルを上書き */
}

/* ========================================================= */
/* Tablet (max-width: 620px) */
/* 620px以下の画面に適用。iPadスタイルを上書き。 */
/* ========================================================= */
@media screen and (max-width: 620px) { /* 621pxより小さいので620px */
  /* Tablet向けのスタイルをここに記述 */
  /* 元のコードでTabletのメディアクエリにあったheadlineの画像は、
     PCのデフォルト画像と同じだったので、ここでは特に記述していません。
     もし、PCとは異なる画像にしたい場合はここに記述します。 */

  /* TabletでのRetina対応 */
  @media screen and (-webkit-min-device-pixel-ratio: 2),
         screen and (min-resolution: 192dpi),
         screen and (min-resolution: 2dppx) {
    /* TabletのRetina画像がPCと同じであれば、PCのメディアクエリで対応される */
    /* 異なる画像が必要な場合はここに記述 */
    /* #pagePolicy #headline { background-image: url(../img/policy/bg_headline_tablet@2x.jpg); } */
  }
}

/* ========================================================= */
/* iPhone6 Plus (max-width: 412px) */
/* 412px以下の画面に適用。Tabletスタイルを上書き。 */
/* ========================================================= */
@media screen and (max-width: 412px) { /* 413pxより小さいので412px */
  /* iPhone6 Plus 向けのスタイルをここに記述 */
}

/* ========================================================= */
/* iPhone6 (max-width: 373px) */
/* 373px以下の画面に適用。iPhone6 Plusスタイルを上書き。 */
/* ========================================================= */
@media screen and (max-width: 373px) { /* 374pxより小さいので373px */
  /* iPhone6 向けのスタイルをここに記述 */
}

/* ========================================================= */
/* SP (max-width: 319px または 320px) */
/* 最も小さい画面に適用。上記の全てのスタイルを上書き。 */
/* ========================================================= */
/* SP (320px) の基準をどこに置くかによりますが、ここでは319px以下とします */
@media screen and (max-width: 319px) { /* または max-width: 320px を含めるかによって調整 */
  #pagePolicy #headline {
    background-image: url(../img/policy/bg_headline_sp.jpg); /* SP専用の画像 */
  }

  #pagePolicy #profile dd ul,
  #pagePolicy #profile dd li {
    clear: none;
  }
  #pagePolicy #profile dd li {
    padding-left: 1.2em;
    position: relative;
  }

  #pagePolicy #profile dd li:before {
    content: '・';
    position: absolute;
    left: 0;
    top: 0.0em;
  }

  #pagePolicy #greeting .msg figure {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  #pagePolicy #greeting .msg .ph {
    margin-bottom: 30px;
  }
  #pagePolicy #greeting .msg .txt {
    padding: 0 3%;
  }
  #pagePolicy #greeting .msg .txt .sig {
    text-align: right;
    font-size: 16px;
  }
  #pagePolicy #greeting .msg .txt .sig span {
    font-size: 24px;
  }
}