@charset "UTF-8";
#modalWrapper {
  /*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
  /*------------------------------------------------------------
	書式設定
------------------------------------------------------------*/
  /* テキストの位置 */
  /* フォントの太さ */
  /*------------------------------------------------------------
	微調整用クラス（※多用しないこと）
------------------------------------------------------------*/
  /*------------------------------------------------------------
	clearfix（float解除）
------------------------------------------------------------*/
  /*------------------------------------------------------------
	トラッキングタグの余計なスペースを削除
------------------------------------------------------------*/
  /*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
  /*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/
  /*------------------------------------------------------------
	グローバルナビ
------------------------------------------------------------*/
  /*------------------------------------------------------------
	パンクズリスト
------------------------------------------------------------*/
  /*------------------------------------------------------------
	コンテンツ
------------------------------------------------------------*/
  /*------------------------------------------------------------
	サイドバー
------------------------------------------------------------*/
  /*------------------------------------------------------------
	フッター
------------------------------------------------------------*/
  display: none;
  width: 100%;
  height: 100%;
  font-size: 10px;
  position: fixed;
  top: 0;
  left: 0;
}

#modalWrapper html, #modalWrapper body, #modalWrapper div, #modalWrapper span, #modalWrapper object, #modalWrapper iframe,
#modalWrapper h1, #modalWrapper h2, #modalWrapper h3, #modalWrapper h4, #modalWrapper h5, #modalWrapper h6, #modalWrapper p, #modalWrapper blockquote, #modalWrapper pre,
#modalWrapper abbr, #modalWrapper address, #modalWrapper cite, #modalWrapper code,
#modalWrapper del, #modalWrapper dfn, #modalWrapper em, #modalWrapper img, #modalWrapper ins, #modalWrapper kbd, #modalWrapper q, #modalWrapper samp,
#modalWrapper small, #modalWrapper strong, #modalWrapper sub, #modalWrapper sup, #modalWrapper var,
#modalWrapper b, #modalWrapper i,
#modalWrapper dl, #modalWrapper dt, #modalWrapper dd, #modalWrapper ol, #modalWrapper ul, #modalWrapper li,
#modalWrapper fieldset, #modalWrapper form, #modalWrapper label, #modalWrapper legend,
#modalWrapper table, #modalWrapper caption, #modalWrapper tbody, #modalWrapper tfoot, #modalWrapper thead, #modalWrapper tr, #modalWrapper th, #modalWrapper td,
#modalWrapper article, #modalWrapper aside, #modalWrapper dialog, #modalWrapper figure, #modalWrapper footer, #modalWrapper header, #modalWrapper button,
#modalWrapper hgroup, #modalWrapper menu, #modalWrapper nav, #modalWrapper section,
#modalWrapper time, #modalWrapper mark, #modalWrapper audio, #modalWrapper video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 1em;
}

#modalWrapper html {
  font-size: 62.5%;
}

#modalWrapper body, #modalWrapper table,
#modalWrapper input, #modalWrapper textarea, #modalWrapper select, #modalWrapper option, #modalWrapper button,
#modalWrapper h1, #modalWrapper h2, #modalWrapper h3, #modalWrapper h4, #modalWrapper h5, #modalWrapper h6 {
  font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  line-height: 1.1;
}

#modalWrapper h1, #modalWrapper h2, #modalWrapper h3, #modalWrapper h4, #modalWrapper h5, #modalWrapper h6 {
  font-weight: bold;
}

#modalWrapper table,
#modalWrapper input, #modalWrapper textarea, #modalWrapper select, #modalWrapper option {
  line-height: 1.1;
}

#modalWrapper ol, #modalWrapper ul {
  list-style: none;
}

#modalWrapper blockquote, #modalWrapper q {
  quotes: none;
}

#modalWrapper :focus {
  outline: 0;
}

#modalWrapper ins {
  text-decoration: none;
}

#modalWrapper del {
  text-decoration: line-through;
}

#modalWrapper img {
  vertical-align: top;
}

#modalWrapper .taLeft {
  text-align: left !important;
}

#modalWrapper .taCenter {
  text-align: center !important;
}

#modalWrapper .taRight {
  text-align: right !important;
}

#modalWrapper .vTop {
  vertical-align: top !important;
}

#modalWrapper .vMiddle {
  vertical-align: middle !important;
}

#modalWrapper .fwNormal {
  font-weight: normal !important;
}

#modalWrapper .fwBold {
  font-weight: bold !important;
}

#modalWrapper .mt0 {
  margin-top: 0 !important;
}

#modalWrapper .mb0 {
  margin-bottom: 0 !important;
}

#modalWrapper .clearfix {
  *zoom: 1;
}

#modalWrapper .clearfix:after {
  display: block;
  clear: both;
  content: "";
}

#modalWrapper .trackTags {
  display: none;
}

#modalWrapper body {
  min-width: 800px;
  /* ウインドウ幅で横スクロール時に背景が切れるバグ対策でコンテンツと同じ幅を指定 */
  line-height: 1.5;
  text-align: center;
}

#modalWrapper #container {
  margin: 0 auto;
  width: 800px;
  background-color: #fff;
  text-align: left;
}

#modalWrapper #main {
  margin-bottom: 10px;
  font-size: 1.4rem;
}

#modalWrapper #main:after {
  display: block;
  clear: both;
  content: "";
}

#modalWrapper #header {
  margin-bottom: 10px;
  padding: 5px 10px 10px;
  background-color: #efefef;
  position: relative;
}

#modalWrapper #header h1 {
  margin: 0 150px 5px 0;
  font-size: 1.1rem;
  font-weight: normal;
}

#modalWrapper #header .logo {
  width: 200px;
  height: 50px;
  background-color: #ccc;
  float: left;
}

#modalWrapper #header .banner {
  width: 250px;
  height: 50px;
  background-color: #ccc;
  float: right;
}

#modalWrapper #header .otherNavi {
  position: absolute;
  top: 5px;
  right: 10px;
}

#modalWrapper #header .otherNavi li {
  display: inline;
}

#modalWrapper #header .otherNavi li.contact {
  margin-right: 2px;
  padding-right: 5px;
  border-right: 1px solid #666;
}

#modalWrapper #gNavi {
  margin-bottom: 10px;
}

#modalWrapper #gNavi li {
  width: 160px;
  background-color: #efefef;
  float: left;
}

#modalWrapper #gNavi li a {
  padding: 10px 0;
  display: block;
  text-decoration: none;
  text-align: center;
}

#modalWrapper #pagePath {
  margin-bottom: 10px;
}

#modalWrapper #pagePath li {
  margin-right: 2px;
  display: inline;
}

#modalWrapper #pagePath li a {
  margin-right: 5px;
}

#modalWrapper #conts {
  width: 580px;
  float: left;
}

#modalWrapper #sideBar {
  padding: 50px 0;
  width: 200px;
  background-color: #efefef;
  float: right;
}

#modalWrapper #footer {
  padding: 10px 10px 5px;
  background-color: #efefef;
}

#modalWrapper #footer .subNavi {
  font-size: 1.2rem;
  text-align: center;
}

#modalWrapper #footer .subNavi li {
  margin-right: 2px;
  padding-right: 5px;
  border-right: 1px solid #666;
  display: inline;
}

#modalWrapper #footer .subNavi .lastChild {
  margin: 0;
  padding: 0;
  border-right: none;
}

#modalWrapper #footer .copyright {
  display: block;
  font-size: 1.1rem;
  text-align: right;
  font-style: normal;
}

#modalWrapper #modalCover {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  position: fixed;
  top: 0;
  left: 0;
}

#modalWrapper #modal {
  width: 900px;
  height: 636px;
  background: #FFF;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#modalWrapper #modal #modalHeader {
  border-bottom: 20px solid #4B4233;
}

#modalWrapper #modal #modalHeader img {
  width: 900px;
  height: auto;
  border-bottom: 2px solid #4B4233;
  margin-bottom: 1px;
}

#modalWrapper #modal #modalConts {
  height: 462px;
  position: relative;
  overflow: hidden;
}

#modalWrapper #modal #modalConts .modalPanel {
  width: 100%;
  height: 100%;
  color: #4B4233;
  font-size: 14px;
  line-height: 1.75;
  background: #FFF;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

#modalWrapper #modal #modalConts .modalPanel .imgArea {
  position: relative;
  z-index: 0;
}

#modalWrapper #modal #modalConts .modalPanel .imgArea .char {
  position: absolute;
  top: 0;
  left: 0;
}

#modalWrapper #modal #modalConts .modalPanel .txtArea {
  text-align: left;
  position: relative;
  z-index: 1;
}

#modalWrapper #modal #modalConts .modalPanel#modalTop {
  z-index: 1;
}

#modalWrapper #modal #modalConts .modalPanel#modalTop.out {
  left: -50px;
  opacity: 0;
  z-index: 0;
}

#modalWrapper #modal #modalConts .modalPanel#modalTop .imgArea .char {
  width: 492px;
  height: auto;
  left: auto;
  right: 0;
}

#modalWrapper #modal #modalConts .modalPanel#modalTop .imgArea .baloon {
  width: 225px;
  height: auto;
  position: absolute;
  top: 30px;
  right: 300px;
}

#modalWrapper #modal #modalConts .modalPanel#modalTop .txtArea {
  padding-top: 90px;
  padding-left: 50px;
}

#modalWrapper #modal #modalConts .modalPanel#modalTop .txtArea .ttl {
  margin-bottom: 25px;
}

#modalWrapper #modal #modalConts .modalPanel#modalTop .txtArea p {
  margin-bottom: 50px;
}

#modalWrapper #modal #modalConts .modalPanel#modalTop .txtArea .btnStart {
  display: inline-block;
  width: 380px;
  height: 105px;
  border: 2px solid #ad9664;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#modalWrapper #modal #modalConts .modalPanel#modalTop .txtArea .btnStart .txt {
  width: 180px;
  height: auto;
  position: absolute;
  top: 0;
  left: 30px;
  bottom: 0;
  margin: auto 0;
}

#modalWrapper #modal #modalConts .modalPanel#modalTop .txtArea .btnStart .arrow {
  width: 60px;
  height: 60px;
  background: #ad9664;
  border-radius: 100%;
  position: absolute;
  top: 0;
  right: -10px;
  bottom: 0;
  margin: auto 0;
}

#modalWrapper #modal #modalConts .modalPanel#modalTop .txtArea .btnStart .arrow img {
  width: 40px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#modalWrapper #modal #modalConts .modalPanel#modalTop .txtArea .btnStart:hover {
  opacity: 0.7;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain {
  left: 50px;
  opacity: 0;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain.in {
  left: 0;
  opacity: 1;
  z-index: 1;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain.out {
  left: -50px;
  opacity: 0;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain #backBtn {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  width: 95px;
  height: 30px;
  color: #FFF;
  font-size: 13px;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  border: 1px solid #AD9664;
  border-radius: 3px;
  position: absolute;
  top: 30px;
  left: 30px;
  opacity: 0;
  cursor: pointer;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain #backBtn:before {
  content: "";
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  background: #AD9664;
  border: 1px solid #fff;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: -1;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain #backBtn:hover:before {
  opacity: 0.7;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain #backBtn.active {
  opacity: 1;
  z-index: 10;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .imgArea .char {
  width: auto;
  height: 462px;
  opacity: 0;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .imgArea .char.current {
  opacity: 1;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .txtArea {
  width: 450px;
  height: 462px;
  margin-left: 450px;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .txtArea .queBox {
  width: 450px;
  height: 462px;
  position: absolute;
  top: 0;
  left: 25px;
  opacity: 0;
  z-index: 0;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .txtArea .queBox .question {
  display: table;
  width: 355px;
  color: #878787;
  font-size: 27px;
  line-height: 35px;
  text-align: left;
  position: absolute;
  left: 50px;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .txtArea .queBox .question dt, #modalWrapper #modal #modalConts .modalPanel#modalMain .txtArea .queBox .question dd {
  display: table-cell;
  vertical-align: top;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .txtArea .queBox .question dt {
  width: 40px;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .txtArea .queBox .question dd {
  padding-left: 10px;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .txtArea .queBox .answer {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 340px;
  height: 80px;
  background: #FFF;
  border: 1px solid #AD9664;
  border-radius: 10px;
  position: absolute;
  left: 55px;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .txtArea .queBox .answer .inner {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  color: #FFF;
  font-size: 26px;
  line-height: 80px;
  text-align: center;
  background: #AD9664;
  border: 1px solid #fff;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .txtArea .queBox .answer .inner:after {
  content: "";
  width: 30px;
  height: 30px;
  background: no-repeat 0 0 #FFF;
  -webkit-background-size: contain;
  background-size: contain;
  border-radius: 8px 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .txtArea .queBox .answer .inner:hover {
  opacity: 0.7;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .txtArea .queBox .answer.ans_a {
  top: 135px;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .txtArea .queBox .answer.ans_a .inner:after {
  background-image: url(img/ans_a.png);
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .txtArea .queBox .answer.ans_b {
  top: 230px;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .txtArea .queBox .answer.ans_b .inner:after {
  background-image: url(img/ans_b.png);
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .txtArea .queBox.current {
  left: 0px;
  opacity: 1;
  z-index: 1;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .txtArea .queBox.selected {
  left: -25px;
  opacity: 0;
  z-index: 0;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .flow {
  position: absolute;
  left: 495px;
  bottom: 20px;
  z-index: 2;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .flow ul:before {
  content: "";
  width: 350px;
  height: 1px;
  background: #F4EBD6;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .flow ul:after {
  content: "";
  display: block;
  clear: both;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .flow ul li {
  float: left;
  position: relative;
  z-index: 1;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .flow ul li:after {
  content: "";
  display: block;
  width: 25px;
  height: 25px;
  background: #F4EBD6;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 0;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .flow ul li img {
  width: 35px;
  height: auto;
  position: relative;
  z-index: 1;
  opacity: 0;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .flow ul li + li {
  margin-left: 46px;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .flow ul li.current:after {
  width: 35px;
  height: 35px;
  background: #AD9664;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain .flow ul li.current img {
  opacity: 1;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain #innerCover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

#modalWrapper #modal #modalConts .modalPanel#modalMain #innerCover.active {
  z-index: 10;
}

#modalWrapper #modal #modalConts .modalPanel#modalResult {
  top: -25px;
  opacity: 0;
}

#modalWrapper #modal #modalConts .modalPanel#modalResult.in {
  top: 0;
  opacity: 1;
  z-index: 10;
}

#modalWrapper #modal #modalConts .modalPanel#modalResult .imgArea {
  width: 450px;
  position: absolute;
  margin-left: 50px;
}

#modalWrapper #modal #modalConts .modalPanel#modalResult .imgArea img {
  width: 450px;
  height: auto;
}

#modalWrapper #modal #modalConts .modalPanel#modalResult .txtArea {
  width: 375px;
  color: #878787;
  margin-top: 60px;
  margin-left: 525px;
}

#modalWrapper #modal #modalConts .modalPanel#modalResult .txtArea .ttl {
  font-size: 27px;
  line-height: 1.4;
}

#modalWrapper #modal #modalConts .modalPanel#modalResult .txtArea .name {
  font-size: 12px;
  line-height: 1.5;
  margin-top: 20px;
}

#modalWrapper #modal #modalConts .modalPanel#modalResult .txtArea .price {
  font-size: 13px;
  line-height: 1;
  margin-top: 20px;
}

#modalWrapper #modal #modalConts .modalPanel#modalResult .txtArea .link {
  margin-top: 30px;
}

#modalWrapper #modal #modalConts .modalPanel#modalResult .txtArea .link a {
  display: block;
  width: 230px;
  height: 45px;
  color: #FFF;
  font-size: 13px;
  line-height: 45px;
  text-align: center;
  text-decoration: none;
  background: #AD9664;
  border-radius: 3px;
  margin: 0;
  position: relative;
}

#modalWrapper #modal #modalConts .modalPanel#modalResult .txtArea .link a:after {
  content: "";
  display: block;
  width: 222px;
  height: 37px;
  border: 1px solid #fff;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#modalWrapper #modal #modalConts .modalPanel#modalResult .txtArea .link a:hover {
  opacity: 0.7;
}

#modalWrapper #modal #modalConts .modalPanel#modalResult .txtArea .retry {
  margin-top: 15px;
}

#modalWrapper #modal #modalConts .modalPanel#modalResult .txtArea .retry span {
  display: block;
  width: 230px;
  height: 45px;
  color: #FFF;
  font-size: 13px;
  line-height: 45px;
  text-align: center;
  text-decoration: none;
  background: #AD9664;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}

#modalWrapper #modal #modalConts .modalPanel#modalResult .txtArea .retry span:after {
  content: "";
  display: block;
  width: 222px;
  height: 37px;
  border: 1px solid #fff;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#modalWrapper #modal #modalConts .modalPanel#modalResult .txtArea .retry span:hover {
  opacity: 0.7;
}

#modalWrapper #modal #modalFooter {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 60px;
  background: #FDFAF1;
  padding-top: 15px;
  border-top: 1px solid #e2e0da;
}

#modalWrapper #modal #modalFooter .copyright {
  color: #4B4233;
  font-size: 12px;
  line-height: 1;
  text-align: center;
}