@charset "UTF-8";
body {
  background-color: #FFFFFF;
  background-size: auto auto;
  background-repeat: no-repeat;
  background-position: center top; /* （横位置）（縦位置） */
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: subpixel-antialiased; /* Safari Transitionちらつき問題解消のため（とりまデフォルトにした） */
}
body p {}
/* アドレスの斜体文字をノーマルに（例えば、addressの文字列をケスと全体設定になる） */
address {
  font-style: normal;
}
#header {
  width: 1024px;
  height: auto; /* この数値の下部に、#fotter がフロートされている */
  margin: 0 auto;
  overflow: hidden;
}
#copyright {
  width: 1024px;
  text-align: right;
  margin: auto auto -12px; /* 上 左右 下*/
  padding-right: 0px; /* アンサー画像の右空白ぶん */
  font-size: 14px;
  color: #8489A4; /* 文字色（アカデミックブルー50％） */
  font-family: nimbus-sans, sans-serif;
  font-weight: 400;
  font-style: normal;
  position: relative; /* z-indexを適応させるために必要なもの */
  z-index: 9999; /* 要素の重なりを一番上にする */
}
#copyright .italics {
  font-family: nimbus-sans, sans-serif;
  font-weight: 400;
  font-style: italic; /* その他の要素は親のが継承されるぽい */
}
#copyright-in {
  display: inline; /* SNSを改段させないため */
  /* インライン要素とは、span要素・a要素・strong要素などのように、文中に記述しても特に改行されない要素のことです */
}
#copyright .twitter-share-button {
  vertical-align: top; /* 要素を上揃え */
}
#copyright .fb-like {
  vertical-align: top; /* 要素を上揃え */
}
#title_direct {
  width: 1024px;
  height: auto;
  margin: 10px auto 0 auto; /* ボディーに対してセンターに */
  padding: 0;
  background-color: #293255; /* アカデミックブルー */
  margin-bottom: 60px;
}
#title_direct img {
  width: 405px;
  margin: 150px auto 88px 112px;
}
/* このラッパーは「ポスター枠」と「したじき枠」をまとめるだけのもの */
/* このラッパーは「ポスター枠」と「したじき枠」をまとめるだけのもの */
#wrapper {
  width: 1024px;
  height: auto;
  margin: 0 auto 0 auto; /* ボディーに対してセンターに */
  padding: 0;
}
/* ポスター枠のコンテナ */
/* ポスター枠のコンテナ */
#poster_oowaku {
  width: 868px; /* ラッパーより内側だから一回り狭い */
  height: 945px; /* （1590/2+150） */
  margin: 0 auto 100px auto; /* ラッパーに対してセンターに */
  padding: 0;
}
#poster_visual {
  float: left;
  width: 518px;
  margin: 0;
  padding: 0;
}
/* ↓これないと、なんか影響してる？ */
#poster_visual figure {
  margin: 0;
  padding: 0;
}
#poster_visual figure img {
  display: block; /* マージンセンター適用とセットです */
  margin: -24px auto 0px -40px; /* オーダーポスター画像は一回り大きく作っているから */
  width: 106%; /* 親に対しての100%理論で縮小配置分、、拡大 */
}
#poster_visual figcaption {
  font-family: ryo-gothic-plusn, sans-serif;
  font-weight: 300; /* ライト */
  font-style: normal;
  font-feature-settings: "palt"; /* 文字ヅメ設定 */
  letter-spacing: 0.03em; /* トラッキング設定（emがオススメ） */
  line-height: 2.5; /* 行間（単位なしがいいぽい） */
  color: #293255; /* アカデミックブルー */
  text-align: left;
  margin: -10px auto 20px 35px;
}
#poster_visual p {
  font-family: ryo-gothic-plusn, sans-serif;
  font-weight: 300; /* ライト */
  font-style: normal;
  font-feature-settings: "palt"; /* 文字ヅメ設定 */
  letter-spacing: 0.03em; /* トラッキング設定（emがオススメ） */
  line-height: 2.5; /* 行間（単位なしがいいぽい） */
  color: #293255; /* アカデミックブルー */
  text-align: left;
  margin: -10px auto 0 31px;
}
#poster_visual p a {
  text-decoration: none; /* リンクの下線をケス */
  color: blue; /* デフォルトのブルー */
}
#poster_visual p a:hover {
  color: steelblue;
  transition: all 0.2s ease 0s; /* カーソルのったときにふわっと */
}
#poster_visual p a:active {
  color: #8589A4;
} /* 押しているとき　アカデミックブルー半調 */
#poster_visual p a.no-color-change {
  color: blue;
} /* デフォルトのブルー */
#poster_nav {
  float: left;
  width: 350px;
  margin: 0;
  padding: 0;
}
#poster_nav img {
  display: block; /* マージンセンター適用とセットです */
  margin: 0 auto 0 auto;
  width: 100%;
  padding: 0;
}
/* したじき枠のコンテナ */
/* したじき枠のコンテナ */
#shitajiki_oowaku {
  width: 868px; /* ラッパーより内側だから一回り狭い */
  height: 1020px; /* 目分量 */
  margin: 0 auto 0 auto; /* ラッパーに対してセンターに */
  padding: 0;
}
#shitajiki_nav {
  float: left;
  width: 350px;
  margin: 0;
  padding: 0;
}
#shitajiki_nav img {
  display: block; /* マージンセンター適用とセットです */
  margin: 0 auto 0 auto;
  width: 100%;
  padding: 0;
}
#shitajiki_visual {
  float: left;
  width: 518px;
  margin: 0;
  padding: 0;
}
/* ↓これないと、なんか影響してる？ */
#shitajiki_visual figure {
  margin: 0;
  padding: 0;
}
#shitajiki_visual figure img {
  display: block; /* マージンセンター適用とセットです */
  margin: 0px auto 0px auto;
  width: 100%;
}
/* 製品版の文字のみ */
/* 製品版の文字のみ */
#book_waku {
  font-family: ryo-gothic-plusn, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-feature-settings: "palt"; /* 文字ヅメ設定 */
  letter-spacing: 0.03em; /* トラッキング設定（emがオススメ） */
  line-height: 0; /* 行間（単位なしがいいぽい） */
  color: #293255; /* アカデミックブルー */
  margin: -2% 0 8% 0; /* このマージンで上下に隙間つくっている */
}
#book_waku h4 {
  color: #e61717; /* レッドぽい色 */
}
#book_waku span {
  font-weight: 300;
}
#book_waku h3 {
  line-height: 2; /* 行間（単位なしがいいぽい） */
}
/* 注文ボタン */
/* 注文ボタン */
#pochitto_order {
  width: 1024px; /* ←これ、1024（ボディーのサイズにあわせないと、ブラウザの幅狭めたときの起点ずれるよ） */
  height: 300px;
  margin: 0 auto 0 auto; /* 大枠対してセンターに */
  padding: 0;
}
#mailbutton {
  background: url(images/button_order_go_1.png) no-repeat; /* ロールオーバー時のチラつき防止 */
  width: 358px;
  height: 98px; /* マウスの選択範囲になる　　注意*/
  display: block; /* マージンセンター適用とセットです */
  margin: 0 auto 0 auto; /* 大枠対してセンターに */
  background-size: 100%; /* これないと消える？*/
  background-position: center top; /* X座標　Y座標　　　background-size: 00% に影響する; */
}
#mailbutton:hover {
  background-image: url(images/button_order_go_2.png);
  transition: all 0.5s ease-out 0s; /* カーソルのったときにふわっと */
}
#mailbutton:active {
  background-image: url(images/button_order_go_3.png);
  transition: all 0s ease-out 0s; /* カーソルのったときにふわっと */
}
#fotter {
  text-align: center;
}
#fotter_logo {
  width: 1024px; /* ←これ、1024（ボディーのサイズにあわせないと、ブラウザの幅狭めたときの起点ずれるよ） */
  height: 100px;
  margin: 0 auto 50px;
  text-align: center;
}
#fotter_logo .logo_w {
  display: block; /* inlineだと幅と高さが指定できないから */
  margin-left: auto;
  margin-right: auto;
  width: 180px; /* cssで大きさをしていしないとレスポンシブで困ることに */
}

@media screen and (max-width: 1023px) {
  body {
    background-color: #FFFFFF;
    background-size: auto auto;
    background-repeat: no-repeat;
    background-position: center top; /* （横位置）（縦位置） */
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: subpixel-antialiased; /* Safari Transitionちらつき問題解消のため（とりまデフォルトにした） */
  }
  /* アドレスの斜体文字をノーマルに（例えば、addressの文字列をケスと全体設定になる） */
  address {
    font-style: normal;
  }
  #header {
    width: 768px;
    height: auto; /* この数値の下部に、#fotter がフロートされている */
    margin: 0 auto;
    overflow: hidden;
  }
  #copyright {
    width: 768px;
    text-align: right;
    margin: auto auto -12px; /* 上 左右 下*/
    padding-right: 12px; /*　iPad768ファーストのため残した*/
    font-size: 14px;
    color: #8489A4; /* 文字色（アカデミックブルー50％） */
    font-family: nimbus-sans, sans-serif;
    font-weight: 400;
    font-style: normal;
    position: relative; /* z-indexを適応させるために必要なもの */
    z-index: 9999; /* 要素の重なりを一番上にする */
  }
  #copyright .italics {
    font-family: nimbus-sans, sans-serif;
    font-weight: 400;
    font-style: italic; /* その他の要素は親のが継承されるぽい */
  }
  #copyright-in {
    display: inline; /* SNSを改段させないため */
    /* インライン要素とは、span要素・a要素・strong要素などのように、文中に記述しても特に改行されない要素のことです */
  }
  #copyright .twitter-share-button {
    vertical-align: top; /* 要素を上揃え */
  }
  #copyright .fb-like {
    vertical-align: top; /* 要素を上揃え */
  }
  #title_direct {
    width: 768px;
    height: auto;
    margin: 10px auto 0 auto; /* ボディーに対してセンターに */
    padding: 0;
    margin-bottom: 40px;
  }
  #title_direct img {
    width: 345px;
    margin: 100px auto 88px 60px;
  }
  /* このラッパーは「ポスター枠」と「したじき枠」をまとめるだけのもの */
  /* このラッパーは「ポスター枠」と「したじき枠」をまとめるだけのもの */
  #wrapper {
    width: 768px;
    height: auto;
    margin: 0 auto 0 auto; /* ボディーに対してセンターに */
    padding: 0;
  }
  /* ポスター枠のコンテナ */
  /* ポスター枠のコンテナ */
  #poster_oowaku {
    width: 90%; /* ラッパーより内側だから一回り狭い */
    height: 700px;
    margin: 0 auto 100px auto; /* ラッパーに対してセンターに */
    padding: 0;
  }
  #poster_visual {
    float: left;
    width: 60%;
    margin: 0;
    padding: 0;
  }
  /* ↓これないと、なんか影響してる？ */
  #poster_visual figure {
    margin: 0;
    padding: 0;
  }
  #poster_visual figure img {
    display: block; /* マージンセンター適用とセットです */
    margin: -24px auto 0px -40px; /* オーダーポスター画像は一回り大きく作っているから */
    width: 106%; /* 親に対しての100%理論で縮小配置分、、拡大 */
  }
  #poster_visual figcaption {
    font-family: ryo-gothic-plusn, sans-serif;
    font-weight: 300; /* ライト */
    font-style: normal;
    font-feature-settings: "palt"; /* 文字ヅメ設定 */
    letter-spacing: 0.03em; /* トラッキング設定（emがオススメ） */
    line-height: 2.5; /* 行間（単位なしがいいぽい） */
    color: #293255; /* アカデミックブルー */
    text-align: left;
    margin: -10px auto 20px 20px;
  }
  #poster_visual p {
    font-family: ryo-gothic-plusn, sans-serif;
    font-weight: 300; /* ライト */
    font-style: normal;
    font-feature-settings: "palt"; /* 文字ヅメ設定 */
    letter-spacing: 0.03em; /* トラッキング設定（emがオススメ） */
    line-height: 2.5; /* 行間（単位なしがいいぽい） */
    color: #293255; /* アカデミックブルー */
    text-align: left;
    margin: -10px auto 0 16px;
  }
  #poster_visual p a {
    text-decoration: none; /* リンクの下線をケス */
    color: blue; /* デフォルトのブルー */
  }
  #poster_visual p a:hover {
    color: steelblue;
    transition: all 0.2s ease 0s; /* カーソルのったときにふわっと */
  }
  #poster_visual p a:active {
    color: #8589A4;
  } /* 押しているとき　アカデミックブルー半調 */
  #poster_visual p a.no-color-change {
    color: blue;
  } /* デフォルトのブルー */
  #poster_nav {
    float: left;
    width: 40%;
    margin: 0;
    padding: 0;
  }
  #poster_nav img {
    display: block; /* マージンセンター適用とセットです */
    margin: 0 auto 0 auto;
    width: 100%;
    padding: 0;
  }
  /* したじき枠のコンテナ */
  /* したじき枠のコンテナ */
  #shitajiki_oowaku {
    width: 90%; /* ラッパーより内側だから一回り狭い */
    height: 780px; /* 目分量 */
    margin: 0 auto 0 auto; /* ラッパーに対してセンターに */
    padding: 0;
  }
  #shitajiki_nav {
    float: left;
    width: 40%;
    margin: 0;
    padding: 0;
  }
  #shitajiki_nav img {
    display: block; /* マージンセンター適用とセットです */
    margin: 0 auto 0 auto;
    width: 100%;
    padding: 0;
  }
  #shitajiki_visual {
    float: left;
    width: 60%;
    margin: 0;
    padding: 0;
  }
  /* ↓これないと、なんか影響してる？ */
  #shitajiki_visual figure {
    margin: 0;
    padding: 0;
  }
  #shitajiki_visual figure img {
    display: block; /* マージンセンター適用とセットです */
    margin: 0px auto 0px auto;
    width: 100%;
  }
  /* 注文ボタン */
  /* 注文ボタン */
  #pochitto_order {
    width: 768px; /* ←これ、1024（ボディーのサイズにあわせないと、ブラウザの幅狭めたときの起点ずれるよ） */
    height: 200px;
    margin: 0 auto 0 auto; /* 大枠対してセンターに */
    padding: 0;
  }
  #mailbutton {
    background: url(images/button_order_go_1.png) no-repeat; /* ロールオーバー時のチラつき防止 */
    width: 45%;
    height: 94px; /* マウスの選択範囲になる　　注意*/
    display: block; /* マージンセンター適用とセットです */
    margin: 0 auto 0 auto; /* 大枠対してセンターに */
    background-size: 100%; /* これないと消える？*/
    background-position: center top; /* X座標　Y座標　　　background-size: 00% に影響する; */
  }
  #mailbutton:hover {
    background-image: url(images/button_order_go_1.png);
    transition: none; /* カーソルのったときにふわっと */
  }
  #mailbutton:active {
    background-image: url(images/button_order_go_1.png);
    transition: none; /* カーソルのったときにふわっと */
  }
  #fotter {
    text-align: center;
  }
  #fotter_logo {
    width: 768px; /* ←これ、1024（ボディーのサイズにあわせないと、ブラウザの幅狭めたときの起点ずれるよ） */
    height: 100px;
    margin: 0 auto 50px;
    text-align: center;
  }
  #fotter_logo .logo_w {
    display: block; /* inlineだと幅と高さが指定できないから */
    margin-left: auto;
    margin-right: auto;
    width: 130px; /* cssで大きさをしていしないとレスポンシブで困ることに */
  }
}

@media screen and (max-width: 767px) {
  body {
    background-color: #FFFFFF;
    background-size: auto auto;
    background-repeat: no-repeat;
    background-position: center top; /* （横位置）（縦位置） */
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: subpixel-antialiased; /* Safari Transitionちらつき問題解消のため（とりまデフォルトにした） */
  }
  /* アドレスの斜体文字をノーマルに（例えば、addressの文字列をケスと全体設定になる） */
  address {
    font-style: normal;
  }
  #header {
    width: 512px;
    height: auto; /* この数値の下部に、#fotter がフロートされている */
    margin: 0 auto;
    overflow: hidden;
  }
  #copyright {
    width: 512px;
    text-align: right;
    margin: auto auto -12px; /* 上 左右 下*/
    padding-right: 12px; /* アンサー画像の右空白ぶん */
    font-size: 14px;
    color: #8489A4; /* 文字色（アカデミックブルー50％） */
    font-family: nimbus-sans, sans-serif;
    font-weight: 400;
    font-style: normal;
    position: relative; /* z-indexを適応させるために必要なもの */
    z-index: 9999; /* 要素の重なりを一番上にする */
  }
  #copyright .italics {
    font-family: nimbus-sans, sans-serif;
    font-weight: 400;
    font-style: italic; /* その他の要素は親のが継承されるぽい */
  }
  #copyright-in {
    display: inline; /* SNSを改段させないため */
    /* インライン要素とは、span要素・a要素・strong要素などのように、文中に記述しても特に改行されない要素のことです */
  }
  #copyright .twitter-share-button {
    vertical-align: top; /* 要素を上揃え */
  }
  #copyright .fb-like {
    vertical-align: top; /* 要素を上揃え */
  }
  #title_direct {
    width: 512px;
    height: auto;
    margin: 10px auto 0 auto; /* ボディーに対してセンターに */
    padding: 0;
    margin-bottom: 0px;
  }
  #title_direct img {
    width: 345px;
    margin: 70px auto 30px 80px;
  }
  /* このラッパーは「ポスター枠」と「したじき枠」をまとめるだけのもの */
  /* このラッパーは「ポスター枠」と「したじき枠」をまとめるだけのもの */
  #wrapper {
    width: 512px;
    height: auto;
    margin: 0 auto 0 auto; /* ボディーに対してセンターに */
    padding: 0;
  }
  /* ポスター枠のコンテナ */
  /* ポスター枠のコンテナ */
  #poster_oowaku {
    position: relative; /* #poster_visual の中央そろえで必要 */
    width: 100%; /* ラッパーより内側だから一回り狭い */
    height: 1530px;
    margin: 0 auto 100px auto; /* ラッパーに対してセンターに */
    padding: 0;
  }
  #poster_visual {
    position: absolute; /* 大枠の position: relative; とのアウト-インの家計 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; /* absoluteとセットです */
    width: 480px;
    padding: 0;
  }
  /* ↓これないと、なんか影響してる？ */
  #poster_visual figure {
    margin: 0;
    padding: 0;
  }
  #poster_visual figure img {
    display: block; /* マージンセンター適用とセットです */
    margin: 0 auto 0 auto;
    width: 100%; /* 親に対しての100%理論で縮小配置分、、拡大 */
  }
  #poster_visual figcaption {
    font-size: 100%;
    font-family: ryo-gothic-plusn, sans-serif;
    font-weight: 300; /* ライト */
    font-style: normal;
    font-feature-settings: "palt"; /* 文字ヅメ設定 */
    letter-spacing: 0.03em; /* トラッキング設定（emがオススメ） */
    line-height: 2.5; /* 行間（単位なしがいいぽい） */
    color: #293255; /* アカデミックブルー */
    text-align: left;
    margin: -12px auto -5px 65px; /*下の文字Pを詰めるのはこれぽい　 */
  }
  #poster_visual p {
    display: inline-block;
    font-size: 100%;
    font-family: ryo-gothic-plusn, sans-serif;
    font-weight: 300; /* ライト */
    font-style: normal;
    font-feature-settings: "palt"; /* 文字ヅメ設定 */
    letter-spacing: 0.03em; /* トラッキング設定（emがオススメ） */
    line-height: 0; /* 行間（単位なしがいいぽい） */
    color: #293255; /* アカデミックブルー */
    text-align: left;
    margin: 0 auto 0 61px; /*上に詰めるには line-height でと 上のfigcaptionの下マージンを詰める　 */
  }
  #poster_visual p a {
    text-decoration: none; /* リンクの下線をケス */
    color: blue; /* デフォルトのブルー */
  }
  #poster_visual p a:hover {
    color: steelblue;
    transition: all 0.2s ease 0s; /* カーソルのったときにふわっと */
  }
  #poster_visual p a:active {
    color: #8589A4;
  } /* 押しているとき　アカデミックブルー半調 */
  #poster_visual p a.no-color-change {
    color: blue;
  } /* デフォルトのブルー */
  #poster_nav {
    position: absolute; /* 大枠の position: relative; とのアウト-インの家計 */
    top: 550px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; /* absoluteとセットです */
    width: 370px;
    padding: 0;
  }
  #poster_nav img {
    display: block; /* マージンセンター適用とセットです */
    margin: 0 auto 0 auto;
    width: 100%;
    padding: 0;
  }
  /* したじき枠のコンテナ */
  /* したじき枠のコンテナ */
  #shitajiki_oowaku {
    position: relative; /* #poster_visual の中央そろえで必要 */
    width: 100%; /* ラッパーより内側だから一回り狭い */
    height: 1600px; /* 目分量 */
    margin: 0 auto 0 auto; /* ラッパーに対してセンターに */
    padding: 0;
  }
  #shitajiki_visual {
    position: absolute; /* 大枠の position: relative; とのアウト-インの家計 */
    top: 0px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; /* absoluteとセットです */
    width: 364px;
    padding: 0;
  }
  /* ↓これないと、なんか影響してる？ */
  #shitajiki_visual figure {
    margin: 0;
    padding: 0;
  }
  #shitajiki_visual figure img {
    display: block; /* マージンセンター適用とセットです */
    margin: 0px auto 0px auto;
    width: 100%;
  }
  #shitajiki_nav {
    position: absolute; /* 大枠の position: relative; とのアウト-インの家計 */
    top: 585px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; /* absoluteとセットです */
    width: 370px;
    padding: 0;
  }
  #shitajiki_nav img {
    display: block; /* マージンセンター適用とセットです */
    margin: 0 auto 0 auto;
    width: 100%;
    padding: 0;
  }
  /* 製品版の文字のみ */
  /* 製品版の文字のみ */
  #book_waku {
    font-size: 90%;
  }
  #book_waku h3 {
    line-height: 1.4; /* 行間（単位なしがいいぽい） */
  }
  /* 注文ボタン */
  /* 注文ボタン */
  #pochitto_order {
    width: 512px; /* ←これ、1024（ボディーのサイズにあわせないと、ブラウザの幅狭めたときの起点ずれるよ） */
    height: 200px;
    margin: 0 auto 0 auto; /* 大枠対してセンターに */
    padding: 0;
  }
  #mailbutton {
    background: url(images/button_order_go_1.png) no-repeat; /* ロールオーバー時のチラつき防止 */
    width: 60%;
    height: 84px; /* マウスの選択範囲になる　　注意*/
    display: block; /* マージンセンター適用とセットです */
    margin: 0 auto 0 auto; /* 大枠対してセンターに */
    background-size: 100%; /* これないと消える？*/
    background-position: center top; /* X座標　Y座標　　　background-size: 00% に影響する; */
  }
  #mailbutton:hover {
    background-image: url(images/button_order_go_1.png);
    transition: none; /* カーソルのったときにふわっと */
  }
  #mailbutton:active {
    background-image: url(images/button_order_go_1.png);
    transition: none; /* カーソルのったときにふわっと */
  }
  #fotter {
    text-align: center;
  }
  #fotter_logo {
    width: 512px; /* ←これ、1024（ボディーのサイズにあわせないと、ブラウザの幅狭めたときの起点ずれるよ） */
    height: 100px;
    margin: 0 auto 50px;
    text-align: center;
  }
  #fotter_logo .logo_w {
    display: block; /* inlineだと幅と高さが指定できないから */
    margin-left: auto;
    margin-right: auto;
    width: 130px; /* cssで大きさをしていしないとレスポンシブで困ることに */
  }
}

@media screen and (max-width: 511px) {
  body {
    background-color: #FFFFFF;
    background-size: auto auto;
    background-repeat: no-repeat;
    background-position: center top; /* （横位置）（縦位置） */
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: subpixel-antialiased; /* Safari Transitionちらつき問題解消のため（とりまデフォルトにした） */
  }
  /* アドレスの斜体文字をノーマルに（例えば、addressの文字列をケスと全体設定になる） */
  address {
    font-style: normal;
  }
  #header {
    width: 414px;
    height: auto; /* この数値の下部に、#fotter がフロートされている */
    margin: 0 auto;
    overflow: hidden;
  }
  #copyright {
    width: auto; /* auto とtext-align の組み合わせ */
    font-size: 13.4px;
    color: #8489A4; /* 文字色（アカデミックブルー50％） */
    font-family: nimbus-sans, sans-serif;
    font-weight: 300; /* 細くした */
    font-style: normal;
    text-align: center; /* margin: 25px -15px 0px 0px;   だと ←iPhone 8/7/6s/6 Plusファースト設定 */
    margin-top: 25px;
    margin-bottom: -3px;
  }
  #copyright small {
    margin-right: -15px;
  }
  #copyright .italics {
    font-family: nimbus-sans, sans-serif;
    font-weight: 300; /* 細くした */
    font-style: italic; /* その他の要素は親のが継承されるぽい */
  }
  #copyright-in {
    display: block; /* SNSを改段させるため */
    /* ブロックレベル要素とは、div要素・p要素・blockquote要素などのように、前後で改行され、1行の横幅全域を占有するような要素のこと */
    margin: -40px 0px 0px 20px; /* iPhoneは「コピーライト」と「sns」を逆にした */
    /* 上記、クロームで右があくから、右に寄せている */
    /* 上記、やっぱりやめたけど、記述だけ残しておいた */
  }
  /* Macの Safari だけに適用されるスタイルを指定したい場合 */
  _::-webkit-full-page-media, _:future, :root #copyright-in {
    margin-right: 0px;
  }
  /* 上記、右に寄せたぶん、サファリは戻した */
  /* 上記、やっぱりやめたけど、記述だけ残しておいた */
  #copyright .twitter-share-button {
    vertical-align: top; /* 要素を上揃え */
  }
  #copyright .fb-like {
    vertical-align: top; /* 要素を上揃え */
  }
  #title_direct {
    width: 414px;
    height: auto;
    margin: 16px auto 0 auto; /* ボディーに対してセンターに */
    padding: 0;
  }
  #title_direct img {
    width: 300px;
    margin: 50px auto 10px 52px;
  }
  /* このラッパーは「ポスター枠」と「したじき枠」をまとめるだけのもの */
  /* このラッパーは「ポスター枠」と「したじき枠」をまとめるだけのもの */
  #wrapper {
    width: 414px;
    height: auto;
    margin: 0 auto 0 auto; /* ボディーに対してセンターに */
    padding: 0;
  }
  /* ポスター枠のコンテナ */
  /* ポスター枠のコンテナ */
  #poster_oowaku {
    position: relative; /* #poster_visual の中央そろえで必要 */
    width: 100%; /* ラッパーより内側だから一回り狭い */
    height: 1230px;
    margin: 0 auto 100px auto; /* ラッパーに対してセンターに */
    padding: 0;
  }
  #poster_visual {
    position: absolute; /* 大枠の position: relative; とのアウト-インの家計 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; /* absoluteとセットです */
    width: 350px;
    padding: 0;
  }
  /* ↓これないと、なんか影響してる？ */
  #poster_visual figure {
    margin: 0;
    padding: 0;
  }
  #poster_visual figure img {
    display: block; /* マージンセンター適用とセットです */
    margin: 0 auto 0 auto;
    width: 100%; /* 親に対しての100%理論で縮小配置分、、拡大 */
  }
  #poster_visual figcaption {
    font-size: 90%;
    font-family: ryo-gothic-plusn, sans-serif;
    font-weight: 300; /* ライト */
    font-style: normal;
    font-feature-settings: "palt"; /* 文字ヅメ設定 */
    letter-spacing: 0.03em; /* トラッキング設定（emがオススメ） */
    line-height: 2.5; /* 行間（単位なしがいいぽい） */
    color: #293255; /* アカデミックブルー */
    text-align: left;
    margin: -12px auto -5px 20px; /*下の文字Pを詰めるのはこれぽい　 */
  }
  #poster_visual p {
    display: inline-block;
    font-size: 90%;
    font-family: ryo-gothic-plusn, sans-serif;
    font-weight: 300; /* ライト */
    font-style: normal;
    font-feature-settings: "palt"; /* 文字ヅメ設定 */
    letter-spacing: 0.03em; /* トラッキング設定（emがオススメ） */
    line-height: 0; /* 行間（単位なしがいいぽい） */
    color: #293255; /* アカデミックブルー */
    text-align: left;
    margin: 0 auto 0 18px; /*上に詰めるには line-height でと 上のfigcaptionの下マージンを詰める　 */
  }
  #poster_visual p a {
    text-decoration: none; /* リンクの下線をケス */
    color: blue; /* デフォルトのブルー */
  }
  #poster_visual p a:hover {
    color: steelblue;
    transition: all 0.2s ease 0s; /* カーソルのったときにふわっと */
  }
  #poster_visual p a:active {
    color: #8589A4;
  } /* 押しているとき　アカデミックブルー半調 */
  #poster_visual p a.no-color-change {
    color: blue;
  } /* デフォルトのブルー */
  #poster_nav {
    position: absolute; /* 大枠の position: relative; とのアウト-インの家計 */
    top: 410px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; /* absoluteとセットです */
    width: 330px;
    padding: 0;
    background-color: white;
  }
  #poster_nav img {
    display: block; /* マージンセンター適用とセットです */
    margin: 0 auto 0 auto;
    width: 100%;
    padding: 0;
  }
  /* したじき枠のコンテナ */
  /* したじき枠のコンテナ */
  #shitajiki_oowaku {
    position: relative; /* #poster_visual の中央そろえで必要 */
    width: 100%; /* ラッパーより内側だから一回り狭い */
    height: 1390px; /* 目分量 */
    margin: 0 auto 0 auto; /* ラッパーに対してセンターに */
    padding: 0;
  }
  #shitajiki_visual {
    position: absolute; /* 大枠の position: relative; とのアウト-インの家計 */
    top: 0px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; /* absoluteとセットです */
    width: 322px;
    padding: 0;
  }
  /* ↓これないと、なんか影響してる？ */
  #shitajiki_visual figure {
    margin: 0;
    padding: 0;
  }
  #shitajiki_visual figure img {
    display: block; /* マージンセンター適用とセットです */
    margin: 0px auto 0px auto;
    width: 100%;
  }
  #shitajiki_nav {
    position: absolute; /* 大枠の position: relative; とのアウト-インの家計 */
    top: 516px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; /* absoluteとセットです */
    width: 330px;
    padding: 0;
  }
  #shitajiki_nav img {
    display: block; /* マージンセンター適用とセットです */
    margin: 0 auto 0 auto;
    width: 100%;
    padding: 0;
  }
  /* 製品版の文字のみ */
  /* 製品版の文字のみ */
  #book_waku {
    font-size: 80%;
  }
  #book_waku h3 {
    line-height: 1.4; /* 行間（単位なしがいいぽい） */
  }
  /* 注文ボタン */
  /* 注文ボタン */
  #pochitto_order {
    width: 414px; /* ←これ、1024（ボディーのサイズにあわせないと、ブラウザの幅狭めたときの起点ずれるよ） */
    height: 165px;
    margin: 0 auto 0 auto; /* 大枠対してセンターに */
    padding: 0;
  }
  #mailbutton {
    background: url(images/button_order_go_1.png) no-repeat; /* ロールオーバー時のチラつき防止 */
    width: 74%;
    height: 84px; /* マウスの選択範囲になる　　注意*/
    display: block; /* マージンセンター適用とセットです */
    margin: 0 auto 0 auto; /* 大枠対してセンターに */
    background-size: 100%; /* これないと消える？*/
    background-position: center top; /* X座標　Y座標　　　background-size: 00% に影響する; */
  }
  #mailbutton:hover {
    background-image: url(images/button_order_go_1.png);
    transition: none; /* カーソルのったときにふわっと */
  }
  #mailbutton:active {
    background-image: url(images/button_order_go_1.png);
    transition: none; /* カーソルのったときにふわっと */
  }
  #fotter {
    text-align: center;
  }
  #fotter_logo {
    width: 414px; /* ←これ、1024（ボディーのサイズにあわせないと、ブラウザの幅狭めたときの起点ずれるよ） */
    height: 100px;
    margin: 0 auto 20px;
    text-align: center;
  }
  #fotter_logo .logo_w {
    display: block; /* inlineだと幅と高さが指定できないから */
    margin-left: auto;
    margin-right: auto;
    width: 120px; /* cssで大きさをしていしないとレスポンシブで困ることに */
  }
}

@media screen and (max-width: 413px) {
  body {
    background-color: #FFFFFF;
    background-size: auto auto;
    background-repeat: no-repeat;
    background-position: center top; /* （横位置）（縦位置） */
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: subpixel-antialiased; /* Safari Transitionちらつき問題解消のため（とりまデフォルトにした） */
  }
  /* アドレスの斜体文字をノーマルに（例えば、addressの文字列をケスと全体設定になる） */
  address {
    font-style: normal;
  }
  #header {
    width: 320px;
    height: auto; /* この数値の下部に、#fotter がフロートされている */
    margin: 0 auto;
    overflow: hidden;
  }
  #copyright {
    width: auto; /* auto とtext-align の組み合わせ */
    font-size: 13.4px;
    color: #8489A4; /* 文字色（アカデミックブルー50％） */
    font-family: nimbus-sans, sans-serif;
    font-weight: 300; /* 細くした */
    font-style: normal;
    text-align: center; /* margin: 25px 0px 0px 0px;   だと ←iPhone 8/7/6 [w375px]ファースト設定 */
    margin-top: 25px;
    margin-bottom: -2px;
  }
  #copyright small {
    margin-right: -17px;
  }
  #copyright .italics {
    font-family: nimbus-sans, sans-serif;
    font-weight: 300; /* 細くした */
    font-style: italic; /* その他の要素は親のが継承されるぽい */
  }
  #copyright-in {
    display: block; /* SNSを改段させるため */
    /* ブロックレベル要素とは、div要素・p要素・blockquote要素などのように、前後で改行され、1行の横幅全域を占有するような要素のこと */
    margin: -40px 0px 0px 22px; /* iPhoneは「コピーライト」と「sns」を逆にした */
    /* 上記、クロームで右があくから、右に寄せている */
    /* 上記、やっぱりやめたけど、記述だけ残しておいた */
  }
  /* Macの Safari だけに適用されるスタイルを指定したい場合 */
  _::-webkit-full-page-media, _:future, :root #copyright-in {
    margin-right: 0px;
  }
  /* 上記、右に寄せたぶん、サファリは戻した */
  /* 上記、やっぱりやめたけど、記述だけ残しておいた */
  #copyright .twitter-share-button {
    vertical-align: top; /* 要素を上揃え */
  }
  #copyright .fb-like {
    vertical-align: top; /* 要素を上揃え */
  }
  #title_direct {
    width: 320px;
    height: auto;
    margin: 14px auto 0 auto; /* ボディーに対してセンターに */
    padding: 0;
  }
  #title_direct img {
    width: 270px;
    margin: 50px auto 10px 18px;
  }
  /* このラッパーは「ポスター枠」と「したじき枠」をまとめるだけのもの */
  /* このラッパーは「ポスター枠」と「したじき枠」をまとめるだけのもの */
  #wrapper {
    width: 320px;
    height: auto;
    margin: 0 auto 0 auto; /* ボディーに対してセンターに */
    padding: 0;
  }
  /* ポスター枠のコンテナ */
  /* ポスター枠のコンテナ */
  #poster_oowaku {
    position: relative; /* #poster_visual の中央そろえで必要 */
    width: 100%; /* ラッパーより内側だから一回り狭い */
    height: 990px;
    margin: 0 auto 100px auto; /* ラッパーに対してセンターに */
    padding: 0;
  }
  #poster_visual {
    position: absolute; /* 大枠の position: relative; とのアウト-インの家計 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; /* absoluteとセットです */
    width: 280px;
    padding: 0;
  }
  /* ↓これないと、なんか影響してる？ */
  #poster_visual figure {
    margin: 0;
    padding: 0;
  }
  #poster_visual figure img {
    display: block; /* マージンセンター適用とセットです */
    margin: 0 auto 0 auto;
    width: 100%; /* 親に対しての100%理論で縮小配置分、、拡大 */
  }
  #poster_visual figcaption {
    font-size: 75%;
    font-family: ryo-gothic-plusn, sans-serif;
    font-weight: 300; /* ライト */
    font-style: normal;
    font-feature-settings: "palt"; /* 文字ヅメ設定 */
    letter-spacing: 0.03em; /* トラッキング設定（emがオススメ） */
    line-height: 2.5; /* 行間（単位なしがいいぽい） */
    color: #293255; /* アカデミックブルー */
    text-align: left;
    margin: -5px auto -3px 14px; /*下の文字Pを詰めるのはこれぽい　 */
  }
  #poster_visual p {
    display: inline-block;
    font-size: 91%;
    font-family: ryo-gothic-plusn, sans-serif;
    font-weight: 300; /* ライト */
    font-style: normal;
    font-feature-settings: "palt"; /* 文字ヅメ設定 */
    letter-spacing: 0.03em; /* トラッキング設定（emがオススメ） */
    line-height: 0; /* 行間（単位なしがいいぽい） */
    color: #293255; /* アカデミックブルー */
    text-align: left;
    margin: 0 auto 0 11px; /*上に詰めるには line-height でと 上のfigcaptionの下マージンを詰める　 */
  }
  #poster_visual p a {
    text-decoration: none; /* リンクの下線をケス */
    color: blue; /* デフォルトのブルー */
  }
  #poster_visual p a:hover {
    color: steelblue;
    transition: all 0.2s ease 0s; /* カーソルのったときにふわっと */
  }
  #poster_visual p a:active {
    color: #8589A4;
  } /* 押しているとき　アカデミックブルー半調 */
  #poster_visual p a.no-color-change {
    color: blue;
  } /* デフォルトのブルー */
  #poster_nav {
    position: absolute; /* 大枠の position: relative; とのアウト-インの家計 */
    top: 340px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; /* absoluteとセットです */
    width: 270px;
    padding: 0;
    background-color: white;
  }
  #poster_nav img {
    display: block; /* マージンセンター適用とセットです */
    margin: 0 auto 0 auto;
    width: 100%;
    padding: 0;
  }
  /* したじき枠のコンテナ */
  /* したじき枠のコンテナ */
  #shitajiki_oowaku {
    position: relative; /* #poster_visual の中央そろえで必要 */
    width: 100%; /* ラッパーより内側だから一回り狭い */
    height: 1140px; /* 目分量 */
    margin: 0 auto 0 auto; /* ラッパーに対してセンターに */
    padding: 0;
  }
  #shitajiki_visual {
    position: absolute; /* 大枠の position: relative; とのアウト-インの家計 */
    top: 0px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; /* absoluteとセットです */
    width: 266px;
    padding: 0;
  }
  /* ↓これないと、なんか影響してる？ */
  #shitajiki_visual figure {
    margin: 0;
    padding: 0;
  }
  #shitajiki_visual figure img {
    display: block; /* マージンセンター適用とセットです */
    margin: 0px auto 0px auto;
    width: 100%;
  }
  #shitajiki_nav {
    position: absolute; /* 大枠の position: relative; とのアウト-インの家計 */
    top: 424px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto; /* absoluteとセットです */
    width: 270px;
    padding: 0;
  }
  #shitajiki_nav img {
    display: block; /* マージンセンター適用とセットです */
    margin: 0 auto 0 auto;
    width: 100%;
    padding: 0;
  }
  /* 注文ボタン */
  /* 注文ボタン */
  #pochitto_order {
    width: 320px; /* ←これ、1024（ボディーのサイズにあわせないと、ブラウザの幅狭めたときの起点ずれるよ） */
    height: 140px;
    margin: 0 auto 0 auto; /* 大枠対してセンターに */
    padding: 0;
  }
  #mailbutton {
    background: url(images/button_order_go_1.png) no-repeat; /* ロールオーバー時のチラつき防止 */
    width: 80%;
    height: 70px; /* マウスの選択範囲になる　　注意*/
    display: block; /* マージンセンター適用とセットです */
    margin: 0 auto 0 auto; /* 大枠対してセンターに */
    background-size: 100%; /* これないと消える？*/
    background-position: center top; /* X座標　Y座標　　　background-size: 00% に影響する; */
  }
  #mailbutton:hover {
    background-image: url(images/button_order_go_1.png);
    transition: none; /* カーソルのったときにふわっと */
  }
  #mailbutton:active {
    background-image: url(images/button_order_go_1.png);
    transition: none; /* カーソルのったときにふわっと */
  }
  #fotter {
    text-align: center;
  }
  #fotter_logo {
    width: 320px; /* ←これ、1024（ボディーのサイズにあわせないと、ブラウザの幅狭めたときの起点ずれるよ） */
    height: 100px;
    margin: 0 auto 20px;
    text-align: center;
  }
  #fotter_logo .logo_w {
    display: block; /* inlineだと幅と高さが指定できないから */
    margin-left: auto;
    margin-right: auto;
    width: 120px; /* cssで大きさをしていしないとレスポンシブで困ることに */
  }
}