@charset "UTF-8";

/*
  contents

 - reset（編集しない）
 - base（font-familyなどの変更。fontは1.6rem＝16px）
 - link（テキストリンク関連）
 - button（ボタン関連）
 - typography（見出し・注釈・本文など共通）
 - main（各セクションごとのスタイル）
 - footer（コピーライトなどフッター関連）
 - utility（clearfix・mb10など）
 */
/* -----------------------------------------
  reset（編集しない）
----------------------------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  max-height: 99999px;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
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;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* -----------------------------------------
  base（font-familyなどの変更。fontは1.6rem＝16px）
----------------------------------------- */
/* rem用 */
html {
  font-size: 62.5%;
}

body {
  font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "メイリオ", Meiryo, "Meiryo UI", Avenir, "Open Sans", Helvetica, "Helvetica Neue", Arial, Verdana, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 1.6rem;
}

/* 解析タグの隙間対策 */
body>img {
  display: none;
}

/* 画像の隙間対策 */
#wrapper img {
  display: block;
  vertical-align: bottom;
  max-width: 100%;
}

/* -----------------------------------------
  link（テキストリンク関連）
----------------------------------------- */
#wrapper a {
  display: inline-block;
  -webkit-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
  text-decoration: none;
}

#wrapper a:hover {
  opacity: 0.7;
}

#wrapper .rel-box {
  position: relative;
}

/* -----------------------------------------
  button（ボタン関連）
----------------------------------------- */
#wrapper .btn_offer {
  position: absolute;
  width: 90.8%;
  bottom: 14%;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);

}

#wrapper .fv_offer .btn_offer {
  bottom: 23%;
}

#wrapper .way .btn_offer {
  bottom: 9%;
}

#wrapper .bottom_offer .btn_offer {
  bottom: 26%;
}


#wrapper .btn_small_offer {
  position: absolute;
  width: 44.9333%;
  bottom: 2%;
  right: 1.5%;
}

#wrapper .offer_date {
  position: absolute;
  top: 3%;
  text-align: center;
  font-size: 4rem;
  font-weight: 700;
  width: 100%;
  color: #ee1b6a;
}

#wrapper .offer_limit {
  position: absolute;
  font-family: 'Noto Serif JP', serif;
  position: absolute;
  bottom: 24%;
  left: 11%;
  font-size: 4.5rem;
  color: #fff600;
}

#wrapper .offer_limit span {
  font-size: 7rem;
}

.green-btn {
  position: absolute;
  bottom: 4%;
}



/* -----------------------------------------
  main（各セクションごとのスタイル）
----------------------------------------- */
/* サイトの最大幅 */
#wrapper {
  max-width: 750px;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
  /* padding-bottom: 160px; */
}


#wrapper .program {
  position: relative;
  z-index: 1;
}

#wrapper .approach {
  position: relative;
  z-index: 2;
  margin-top: -15%;
}

/* accordion */

#wrapper .faq {
  background-image: url('../img/bg_faq.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 13.0667%;
}

#wrapper dl.accordion {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;

  margin-bottom: 0.6667%;
}

#wrapper dl.accordion:last-child {
  margin-bottom: 0;
}

#wrapper dl.accordion dt {
  position: relative;
  cursor: pointer;
}

#wrapper dl.accordion dt:after {
  content: "";
  background-image: url('../img/icon_open.png');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  width: 4.4%;
  padding-top: 4.4%;
  right: 8%;
  top: 34%;
  transition: all .25s ease;
}

#wrapper dl.accordion dt.selected:after {
  background-image: url('../img/icon_close.png');
}

#wrapper dl.accordion dd {
  display: none;
}

/* banner */

#fixed_banner{
  max-width: 750px;
  margin: 0 auto;
  position: fixed;
  z-index: 3;
  bottom: 0;
}

#fixed_banner ul{
  position: absolute;
  width: 100%;
  left: 0;
  top: 34%;

}
#fixed_banner ul li{
  width: 32.6667%; 
    width: 60%;
    margin: auto;
}
#fixed_banner ul li:first-child{
  /* margin-left: 1%; 電話ボタンも入れるなら1％ */
}

#fixed_banner .banner_btn_line{

}


/* googlemap */


#wrapper .access {
  background-color: #fdf9f9;
}

#wrapper .access .map_wrap {
  position: relative;
  max-width: 670px;
  width: 89.3333%;
  padding-top: 52.6667%;
  margin: 0 auto;
  border: 6px solid #FFF;
}

#wrapper .access iframe {
  position: absolute;

  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

/* footer */
#wrapper footer{
  background-color: #372116;
  text-align: center;
  padding: 10% 0 40%;
}

#wrapper footer .policy a {
  font-size: 2rem;
  color: #FFF;
  border-bottom: 1px solid #FFF;
}

/* -----------------------------------------
  utility（clearfix・mb10など）
----------------------------------------- */
/* clearfix */
#wrapper .clearfix {
  width: 100%;
}

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

/* 位置 */
#wrapper .txtC {
  text-align: center !important;
}

#wrapper .txtR {
  text-align: right !important;
}

#wrapper .txtL {
  text-align: left !important;
}

/* positionでのレイアウトの外枠に使用 */
#wrapper .p-box {
  position: relative;
}

@media (max-width:750px) {
  html {
    font-size: calc(1000vw / 750);
  }
}


/*アクセスへのボタン追加*/
.access_btn {
  margin: -40px 0 30px 0;
  text-align: center;
}

.access_btn a {
  /* width:30%; */
  width: 24%;
  padding: 0 2px;
}

@media (max-width:750px) {
  .access_btn {
    margin: -5.3vw 0 4vw 0;
  }
}

/*--------------
　院内写真カルーセル
--------------*/
.clinic_photo {
  width: 100%;
  background-color: #faeff0;
  padding: 30px 0;
}

.clinic_photo img {
  width: 100%;
}

/*--------------
　フォーム　form.cssに移行
--------------
form {
  padding: 5% 0;
}

#form {
  background-color: #F8F5EF;
}

#form table {
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
}

#form table tr {
  display: inline-flex;
  flex-direction: column;
  width: 100%;
}

#form table tr td {
  display: inline-flex;
  padding: 15px;
  font-size: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  align-items: baseline;
}

#form table tr th {
  padding: 15px 15px;
  width: 100%;
  vertical-align: top;
  font-size: 18px;
  text-align: left;
}

#form table th .hissu {
  font-size: 16px;
  background: #ff1562;
  padding: 5px 15px;
  border-radius: 5px;
  float: right;
  color: #FFFFFF;
}

#form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../img/arrow_select.png) center right 10px no-repeat #eeeeee;
  background-size: 12px;
  border: none;
  border-radius: 0px;
  padding: 15px 35px 15px 15px;
  font-family: "Hiragino Kaku Gothic Pro", "メイリオ", "ヒラギノ角ゴ Pro W3", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16px;
  width: 100%;
}

#form input[type="text"],
#form input[type="mail"],
#form input[type="tel"],
#form textarea {
  background: #eeeeee;
  padding: 15px;
  border: none;
  width: 100%;
  font-size: 16px;
}
#form input[type="text"]#hope_date,
#form input[type="text"]#hope_date2,
#form input[type="text"]#hope_date-ueno,
#form input[type="text"]#hope_date-ueno2 {
  width: 50%;
}
#form select#hope_time {
  width: 40%;
  margin-left: 10px;
}

input,
select {
  vertical-align: middle;
}

#form .btn {
  text-align: center;
  margin: 50px 0;
}

#form .mr05,#form .mr5 {
  width: 24%;
  margin-left: 8px;
  margin-bottom: 10px;
}

input.btn1 {
  width: 400px;
  border: none;
  border-radius: 5px;
  background: url(../images/arrow01.png) no-repeat right 20px center #ff3c64;
  background-size: 12px;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 26px;
  font-weight: bold;
  padding: 20px 0;
  display: inline-block;
  box-shadow: 0 5px 0 #c62042;
}

p.error {
  color: #ff3c64;
}

@media (max-width:750px) {

  #form table tr th,
  #form table tr td {
    display: block;
  }

  input.btn1 {
    width: 200px;
  }
}

.notes {
  width: 100%;
  text-align: right;
  font-size: 0.8em;
  color: #ff3c64;
}

.btn_entry a {
  display: block;
  width: 200px;
  margin: 20px auto;
  border: none;
  border-radius: 5px;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 26px;
  font-weight: bold;
  padding: 20px 0;
  background-color: #ccc;
  box-shadow: 0 5px 0 #999;
}
*/

/* webtv */

.webtv {
  position: relative;
  width:100%; /* 横幅は100%にしておく(ここを変えたい場合は実装コード2の方法を確認してください) */
  height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
  padding-top: 56.25%; /* 高さを指定(16:9) */
}

.webtv img{
  margin-top: -56.25%; 
}

.webtv iframe {
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 6%;
  height: 100%;
}
.thankyou-footer {
  margin-top: 40%;
}

.dammy_map {
  position: relative;
}

.dammy_map_title {
position: absolute;
top: 0;
left: 6%;
width: 190px;
overflow: hidden;
}

.dammy_map_title img{
max-width: 140% !important;
}

.pink_text {
  text-align: center;
  font-size: 2em;
  padding: 14px;
  background-color: #fcf3f5;
  color: #e91e63;
}

/* キラキラボタン */

.reflection{
  display:inline-block;
  position:relative;
  overflow:hidden;
  }
   
  .reflection:after {
  content:"";
  height:100%;
  width:30px;
  position:absolute;
  top:-180px;
  left:0;
  background-color: #fff;
  opacity:0;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflection 2s ease-in-out infinite;
  }
   
  @keyframes reflection {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
  }