@charset "utf-8";

/* ワンコイン　css */
body {
  margin: 0;
  padding: 0;
  color: #333333;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* PC・スマホ共通 */
.onecoin_btn {
  text-align: center;
}
.onecoin_btn p span {
  font-size:84%;
}


.onecoin_menu {
  background:url(../images/bg_onecoin_1.jpg);
  background-size:contain;
  margin-top:15px;
}

h3.onecoin_line {
  font-family: "Zen Kaku Gothic New", sans-serif;
  text-align: center;
  position: relative;
  margin-bottom:40px;
}
h3.onecoin_line span {
  font-size:12px;
  display: block;
  color:#727171;
  margin-bottom:3px;
}
h3.onecoin_line b {
  font-weight:bold;
  font-size:24px;
}
h3.onecoin_line::before {
    position: absolute;
    border-bottom: 2px solid #8B99E0;
    top:120%;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    content: '';
}

.onecoin_reason {
  background:#D4F0F1;
}

.telareaa {
    text-align: center;
    background:#ffffff;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    -ms-border-radius: 12px;
}
.telareaa img {
    padding: 10px;
}

.onecoin_menubox_bg1,
.onecoin_menubox_bg2 {
  padding-top:2px;
  margin:0 20px 30px 20px;
  box-shadow:4px 4px 4px rgba(0, 0, 0, 0.15);
}

.menu_info .reitou {
  display:inline-block;
  font-size:90%;
  background:#80C3E5;
  padding:3px;
  margin-right:5px;
}
.menu_info .seibun {
  font-size:85%;
}
.detail p {
  float: left;
  width:66%;
}
.detail p b {
  display:inline-block;
  font-size:114%;
  margin-bottom:5px;
  font-weight:bold;
}
.detail img {
  float: right;
  width:33%;
}
.voice {
  border:1px solid #D25277;
  padding:24px 15px 14px;
  border-radius:14px;
  position: relative;
  margin-top:27px;
}
.voice b {
  background:#D25277;
  display:inline-block;
  color:#fff;
  padding:5px 12px;
  border-radius:50px;
  position: absolute;
  top:-15px;
  left:8px;
}
.menu_bottom {
  margin-top:40px;
  vertical-align: bottom;
}
.onecoin_step_box p span {
  color:#CD5277;
  font-weight:bold;
}

/* 1100px以下 */
@media screen and ( max-width:1099px ) {
  .onecoin_main img {
    width:100%;
  }
}

/* 960px以上 */
@media screen and ( min-width:960px ) {
  .onecoin_step {
    width: 960px;
    padding: 0;
    margin: 0 auto;
    padding-top:20px;
  }
  .onecoin_menu_wrap {
    width: 960px;
    padding: 0;
    margin: 0 auto;
  }
  .onecoin_reason_wrap {
    width: 960px;
    margin: 0 auto;
    padding-top:50px;
    padding-bottom:30px;
  }
}

/* PC用 */
@media screen and ( min-width:641px ) {
  .sponly {
  	display:none;
  }

  /* 追従ボタン */
  .floating-banner {
    position: fixed;
    z-index: 99999;
    bottom:36%;
    right:0;
  }
  .floating-banner img {
    width:70px;
    display:block;
    margin-bottom:-6px;
  }
  .floating-banner .telbtn {
    display: none;
  }
  .floating-banner a span {
    display: block;
  }
  .floating-banner a {
    text-align: center;
    border-left:1px solid #fff;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    color:#fff;
    padding:18px 14px;
    display:block;
    margin-bottom:10px;
    letter-spacing: 0.1em;
    border-radius:6px 0 0 6px;
    font-weight: bold;
    font-family: 'Noto Sans Japanese', '游ゴシック', YuGothic, 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', '游ゴシック', YuGothic, 'メイリオ', Meiryo, sans-serif;
    text-decoration: none;
  }
  .floating-banner .web {
    background:#CE5277;
  }
  .floating-banner .web::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(/common/img/icon_kanyu.png) no-repeat;
    background-size: contain;
    margin-bottom:6px;
  }
  .floating-banner a:hover {
    text-decoration: none;
    opacity:0.7;
  }


  #formheader {
    background-color: #FFF;
    border-bottom: 1px solid #dfdcc5;
    margin: 0;
    padding:8px;
  }
  #formheader h1 {
    margin:auto;
    padding:0;
    vertical-align: bottom;
    width:1100px;
  }

  .onecoin_btn a {
    display: inline-block;
    width:430px;
    margin-bottom:15px;
    background:#E05382;
    color:#ffffff;
    font-family: M PLUS Rounded\ 1c, Rounded Mplus\ 1c, Mplus\ 1p, sans-serif;
    padding:14px 30px;
    border-radius:50px;
    font-size:135%;
    text-decoration: none;
    letter-spacing:0.04em;
  }

  .onecoin_main {
    text-align:center;
    margin-bottom:60px;
  }

  .onecoin_menubox_1 {
    background:url(../images/bg_menubox_1_pc.png);
    background-size:cover;
    padding:14px 20px 20px 20px;
  }
  .onecoin_menubox_2 {
    background:url(../images/bg_menubox_2_pc.png);
    background-size:cover;
    padding:14px 20px 20px 20px;
  }
  .onecoin_menubox_3 {
    background:url(../images/bg_menubox_3_pc.png);
    background-size:cover;
    padding:14px 20px 20px 20px;
  }
  .onecoin_menubox_4 {
    background:url(../images/bg_menubox_4_pc.png);
    background-size:cover;
    padding:14px 20px 20px 20px;
  }

  .onecoin_menu h2 {
    text-align: center;
    margin:40px auto 20px;
  }
  .menu_tit {
    padding-left:6.5%;
    font-size:180%;
    margin:1px 0 14px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight:700;
    font-style: normal;
  }
  .menu_img {
    border-radius:22px;
    margin-bottom:10px;
    width:100%;
  }
  .onecoin_menubox_l {
    float:left;
    width:48%;
  }
  .onecoin_menubox_r {
    float:right;
    width:49%;
  }
  .menu_info p {
    display:inline-block;
  }
  .menu_info .allergy {
    font-size:82%;
    border:1px solid #333333;
    padding:3px 5px;
    display:inline-block;
    margin-bottom:4px;
  }
  .voice {
    margin-right:6px;
  }
  .menu_present {
    text-align: center;
    margin-bottom:20px;
  }

    .onecoin_step_box {
      border:1px solid #0094DD;
      border-radius:14px;
      padding:20px;
      height: 290px;
      text-align: center;
    }
    .onecoin_step_box b {
      font-size:120%;
      display:block;
      text-align: center;
      color:#0094DD;
      font-family: M PLUS Rounded\ 1c, Rounded Mplus\ 1c, Mplus\ 1p, sans-serif;
      margin-bottom:5px;
    }
    .onecoin_step ul li {
      margin-bottom:30px;
      position:relative;
      float: left;
      width:31%;
      margin-right:3.5%;
    }
    .onecoin_step ul li:before {
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-width:22px 0 22px 15px;
      border-color: transparent transparent transparent #8795DC;
      position: absolute;
      top: 0;
      left:-22px;
      bottom: 0;
      margin: auto;
    }
    .onecoin_step ul li:first-child::before {
      content: none;
    }
    .onecoin_step ul li .step_icon {
      position: absolute;
      top:-16px;
      left: 5%;
      width:23%;
    }

    .onecoin_step ul,
    .onecoin_reason ul {
      padding:0 20px 20px 20px;
    }
    .onecoin_reason ul li {
      margin-bottom:30px;
      float: left;
      width:32%;
      margin-right:2%;
      text-align:center;
    }
    .onecoin_step ul li:last-child,
    .onecoin_reason ul li:last-child {
      margin-bottom:0;
      margin-right:0;
    }
    .onecoin_reason ul li .onecoin_reason_img {
      position: relative;
    }
    .onecoin_reason ul li .onecoin_reason_img b {
      position: absolute;
      bottom:18px;
      left: 28%;
      font-size:110%;
      display: inline-block;
      color:#0094DD;
      font-family: M PLUS Rounded\ 1c, Rounded Mplus\ 1c, Mplus\ 1p, sans-serif;
    }
    .onecoin_reason ul li p b {
      color:#CD5277;
    }
    .onecoin_tel {
      background:#eef5fa;
      padding:1px 20px 70px;
      font-size:86%;
    }

    #Footer {
      width: 100%;
      background-color: #5393ce;
      color: #FFF;
      font-size:90%;
    }
    #Footer #Footer-inline {
      width: 950px;
      margin: 0 auto;
      padding: 7px 0;
      overflow: hidden;
    }
    #Footer address {
      float: left;
      font-style:normal;
    }
    #Footer p {
      float: right;
      color: #FFF;
    }

  /* お問い合わせ */
  .telareaa {
    width:760px;
    margin:0 auto;
  }

}

/* スマホ用 */
@media screen and ( max-width:640px ) {
  .pconly {
  	display:none;
  }
  .onecoin_main {
    margin-bottom:30px;
  }
  #formheader {
    background-color: #FFF;
    border-bottom: 1px solid #dfdcc5;
    margin: 0;
    padding: 0;
  }
  #formheader h1 {
    padding:10px 12px;
    text-align: center;
  }

  .onecoin_btn a {
    display: inline-block;
    margin-bottom:15px;
    background:#E05382;
    color:#ffffff;
    font-family: M PLUS Rounded\ 1c, Rounded Mplus\ 1c, Mplus\ 1p, sans-serif;
    padding:20px 30px;
    border-radius:50px;
    font-size:120%;
    text-decoration: none;
    letter-spacing:0.04em;
  }

  h1 img {
    width:100%;
    vertical-align:bottom;
  }
  .onecoin_menu h2 {
    margin:40px 0 20px;
  }
  .onecoin_menubox_bg1,
  .onecoin_menubox_bg2 {
    padding-top:2px;
    margin:0 20px 30px 20px;
    box-shadow:4px 4px 4px rgba(0, 0, 0, 0.15);
  }
  .onecoin_menubox_1 {
    background:url(../images/bg_menubox_1.png);
    background-size:cover;
    padding:14px 20px 20px 20px;
  }
  .onecoin_menubox_2 {
    background:url(../images/bg_menubox_2.png);
    background-size:cover;
    padding:14px 20px 20px 20px;
  }
  .onecoin_menubox_3 {
    background:url(../images/bg_menubox_3.png);
    background-size:cover;
    padding:14px 20px 20px 20px;
  }
  .onecoin_menubox_4 {
    background:url(../images/bg_menubox_4.png);
    background-size:cover;
    padding:14px 20px 20px 20px;
  }
  .menu_tit {
    padding-left:17%;
    font-size:138%;
    line-height: 1.1em;
    margin-bottom:15px;
    font-family: M PLUS Rounded\ 1c, Rounded Mplus\ 1c, Mplus\ 1p, sans-serif;
    font-weight: bold;
  }
  .menu_img {
    border-radius:14px;
    margin-bottom:15px;
    width:100%;
  }
  .menu_info {
    margin-bottom:15px;
  }
  .menu_info .allergy {
    font-size:82%;
    border:1px solid #333333;
    padding:3px 5px;
    display:inline-block;
    margin:7px 0 3px;
  }
  .menu_present {
    margin:5px 25px 20px;
  }

  .onecoin_step {
    margin:20px 0;
  }
  .onecoin_step_box {
    border:1px solid #0094DD;
    border-radius:14px;
    padding:20px;
  }
  .onecoin_step_box b {
    font-size:120%;
    display:block;
    text-align: center;
    color:#0094DD;
    font-family: M PLUS Rounded\ 1c, Rounded Mplus\ 1c, Mplus\ 1p, sans-serif;
    margin-bottom:5px;
  }
  .onecoin_step ul li {
    margin-bottom:30px;
    position:relative;
  }
  .onecoin_step ul li .step_icon {
    position: absolute;
    top:-16px;
    left: 5%;
    width: 20%;
  }
  .onecoin_step ul li:after {
    content: "";
    position: absolute;
    bottom:-40px;
    left:45%;
    border:20px solid transparent;
    border-top: 12px solid #8795DC;
  }
  .onecoin_step ul li:last-child::after {
    content: none;
  }

  .onecoin_step ul,
  .onecoin_reason ul {
    padding:0 20px 20px 20px;
  }
  .onecoin_reason ul li {
    margin-bottom:30px;
  }
  .onecoin_step ul li:last-child,
  .onecoin_reason ul li:last-child {
    margin-bottom:0;
  }
  .onecoin_reason ul li .onecoin_reason_img {
    position: relative;
  }
  .onecoin_reason ul li .onecoin_reason_img b {
    position: absolute;
    bottom: 24px;
    left: 28%;
    font-size:120%;
    display: inline-block;
    color:#0094DD;
    font-family: M PLUS Rounded\ 1c, Rounded Mplus\ 1c, Mplus\ 1p, sans-serif;
  }
  .onecoin_reason ul li p b {
    color:#CD5277;
  }
  .onecoin_reason h3 {
    margin-top:40px;
  }
  .onecoin_tel {
    background:#eef5fa;
    padding:20px 20px 40px;
    font-size:86%;
  }

  /*　フッター　*/
  #Footer{
    width:100%;
    background-color:#5393ce;
    color:#FFF;
    font-size:80%;
  }
  #Footer #Footer-inline{
    padding:10px;
  }
  #Footer address {
    font-style: normal;
  }

  /*　追従　*/
  .floating-banner {
    position: fixed;
    z-index: 99999;
    bottom: 0;
    width:98%;
    margin:1%;
  }
  .floating-banner a {
    text-align: center;
    padding:10px 0;
    border-radius:5px;
    font-family: 'Noto Sans Japanese', '游ゴシック', YuGothic, 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', '游ゴシック', YuGothic, 'メイリオ', Meiryo, sans-serif;
  }
  .floating-banner .telbtn {
    text-align: center;
    padding:10px 0;
    border-radius:5px;
    width:29%;
    display: inline-block;
    background:#4793B4;
    position: relative;
    font-size:90%;
  }
  .floating-banner .telbtn label.open {
    font-family: 'Noto Sans Japanese', '游ゴシック', YuGothic, 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', '游ゴシック', YuGothic, 'メイリオ', Meiryo, sans-serif;
    color:#fff;
  }
  .window p a:before,
  .floating-banner .telbtn:before {
    content: "";
    display: inline-block;
    width:14px; /* スマホで見た時の幅 */
    height:14px; /* スマホで見た時の高さ */
    background: url(/common/img/icon_tel.png) no-repeat;
    background-size: contain;
    margin-right: 3px;
  }
  .floating-banner .web {
    width:70%;
    margin-left:1%;
    display: inline-block;
    background:#E05382;
    color:#fff;
    letter-spacing: 0.1em;
    text-decoration: none !important;
  }
  .floating-banner .web:before {
    content: "";
    display: inline-block;
    width:14px; /* スマホで見た時の幅 */
    height:14px; /* スマホで見た時の高さ */
    background: url(/common/img/icon_kanyu.png) no-repeat;
    background-size: contain;
    margin-right: 3px;
    vertical-align: text-bottom;
  }

  /* 電話用ポップアップ */
  .open {
    cursor:pointer;
  }
  #pop-up {
    display: none;
  }
  .overlay {
    display: none;
  }
  #pop-up:checked + .overlay {
    display: block;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
  }
  .window {
    position: fixed;
    top: 50%;
    left: 50%;
    width:70%;
    max-width: 360px;
    padding:40px 20px;
    background-color: #fff;
    border-radius:14px;
    align-items: center;
    transform: translate(-50%, -50%);
    line-height: 1.4em;
  }
  .window h4 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 120%;
    display: inline-block;
  }
  .window p b {
    display:block;
    font-size: 140%;
    color:#29AED0;
  }
  .window p a {
    display:inline-block;
    padding:10px 40px;
    border-radius:8px;
    background: #29AED0;
    margin: 10px 0 20px;
    color:#fff;
  }
  .close {
    cursor: pointer;
    background: #ccc;
    color: #fff;
    padding: 8px 26px;
    display: inline-block;
    margin-top: 16px;
    border-radius: 50px;
  }
}


/* リセット */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.cf:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
    margin: 0px !important;
}