@charset "UTF-8";
/*
Theme Name: hanakoganei
Theme URI: http://www.hanah.me/
Description: Hanakoganei Clinic
Version: 1.0
Author: GOOYA
Author URI: http://www.hanah.me/
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap');
/* reset css */
/* 20190530 SETTING */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, a, 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, main, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  text-decoration: none;
  background: transparent;
}
html,body {
  width: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-break: break-all;
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum";
  -moz-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

*, *::before, *::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  -ms-box-sizing: inherit;
  box-sizing: inherit;
  image-rendering: -webkit-optimize-contrast;
}

header, footer, section, main, article, aside, menu, nav, details, figcaption, figure {
  display: block;
}

input,select {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
  border-style: none;
}

img {
  border-style: none;
  vertical-align: bottom;
  display: block;
  max-width: 100%;
  height: auto;
}

ul,ol {
  list-style: none;
}

hr {
  display: none;
}

/* clearfix (modern) */
.cl::after {
  content: "";
  clear: both;
  display: block;
}
nav ul {
  list-style: none;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

caption,
th,
td {
  text-align: left;
  font-weight: normal;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}

blockquote,
q {
  quotes: """";
}

button {
  outline: 0;
  margin: 0;
  padding: 0;
}

body * {
  box-sizing: border-box;
  line-height: 1.5;
}

:root {
  line-sizing: normal;
}

:root {
  text-spacing: trim-start allow-end trim-adjacent ideograph-alpha ideograph-numeric;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}
/* =================================================

Default style

================================================= */

html {
  font-size: 62.5%;
}

body {
  position: relative;
  height: auto;
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-print-color-adjust: exact;
  color: #555;
}

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

main {
  position: relative;
  padding-top: 120px;
  overflow: hidden;
}

main.wh {
  background: #fff;
}

/* FIX */
body, #wrapper {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 75vh;
}

#wrapper.bgg {
  background: -moz-linear-gradient(top, #f5c3c9, #f7ebec);
  background: -webkit-linear-gradient(top, #f5c3c9, #f7ebec);
  background: linear-gradient(to bottom, #f5c3c9, #f7ebec);
}

@media all and (min-width: 901px) {
  .pcHide {
    display: none !important;
  }
}

@media all and (max-width: 901px) {
  .spHide {
    display: none !important;
  }
}

@media all and (min-width: 415px) {
  .sspShow {
    display: none !important;
  }
}

@media all and (max-width: 414px) {
  .sspHide {
    display: none !important;
  }

  .sspShow {
    display: block !important;
  }
}

/* pagetop
================================================= */
#page_top {
  position: fixed;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  bottom: 24px;
  right: 24px;
  background: #fa62a4;
  z-index: 9980;
  transition: .35s ease-in-out;
}

#page_top .pagetopObj {
  display: block;
  width: 53px;
  height: 37px;
}

#page_top:hover {
  border-radius: 12px;
  opacity: .8;
  cursor: pointer;
}

/* =================================================

HEADER

================================================= */
header {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  min-height: 120px;
  z-index: 9990;
  background: #fff;
}

.header_wrap {
  position: relative;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin: 0 auto;
  padding: 22px 40px;
  max-width: 1280px;
}

/* logo */
.header_logo_wrap {
  position: relative;
  display: block;
  padding-right: 24px;
}

.header_logo_img {
  display: block;
  width: 100%;
  max-width: 406px;
}

.header_logo_img .imgObj {
  width: 100%;
}

/* gnav
================================================= */
.gnav {
  position: relative;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-left: auto;
  min-width: 604px;
}

/* FB TEL */
.gnav_connect {
  position: relative;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  margin-left: auto;
  margin-bottom: 4px;
}

.gnav_connect .item {
  position: relative;
  display: block;
  height: 40px;
}

.gnav_connect .item:hover {
  opacity: .8;
}

.gnav_connect .item.fb {
  width: 40px;
  background: url('images/icn_hd_facebook.svg') no-repeat center 50% / contain;
}

.gnav_connect .item.tel {
  padding-left: 40px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 2.4rem;
  line-height: 40px;
  word-break: keep-all;
  color: #999;
}

.gnav_connect .item.tel::before {
  position: absolute;
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 0;
  -webkit-transform: translate(0,-50%);
  -moz-transform: translate(0,-50%);
  transform: translate(0,-50%);
  background: url('images/icn_tel_gr.svg') no-repeat center 50% / cover;
}

.gnav_connect .item.email {
  display: none;
}

/* NAV */
.gnav_list {
  position: relative;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}

.gnav_list .item {
  position: relative;
  display: inline-block;
}

.gnav_list .item .item_link {
  position: relative;
  display: inline-block;
  padding: 0 8px;
  font-size: 2rem;
  color: #707070;
}

.gnav_list .item .item_link::before {
  position: absolute;
  content: '';
  display: block;
  width: 1px;
  height: 18px;
  top: 50%;
  right: 0;
  -webkit-transform: translate(0,-50%);
  -moz-transform: translate(0,-50%);
  transform: translate(0,-50%);
  background: #707070;
}

.gnav_list .item .item_link:last-child::before {
  display: none;
}

/* =================================================

FOOTER

================================================= */
footer {
  margin-top: auto;/* FIX */
  position: relative;
  display: block;
  width: 100%;
  background: #FAFAFA;
}

.footer_wrap {
  position: relative;
  margin: 0 auto;
  padding: 80px 40px;
  max-width: 1280px;
  text-align: center;
}

.footer_logo {
  display: block;
  margin: 0 auto 40px;
  max-width: 465px;
  height: 87px;
}

.footer_logo .imgObj {
  width: 100%;
}

.copyright  {
  font-size: 1rem;
  letter-spacing: 0.08rem;
  color: #555;
}

/* =================================================

COMMON

================================================= */
.section_wrap {
  position: relative;
  margin: 0 auto;
  padding: 0 40px;
  max-width: 1280px;
}

.padding30{
	padding:20px;
}


.tel {
	font-size: 3.5rem;
	font-weight: normal;
	color: #999;
}

/*btn
================================================= */
.btn_regular {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 22px;
  max-width: 320px;
  width: 100%;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.1rem;
  text-align: center;
  border: 3px solid #fa62a4;
  border-radius: 77px;
  background: #fff;
  color: #fa62a4;
  transition: .15s ease-in-out;
}

.btn_regular::before {
  position: absolute;
  content: '';
  display: block;
  width: 8px;
  height: 14px;
  top: 50%;
  right: 30px;
  -moz-transform: translate(0,-50%);
  -webkit-transform: translate(0,-50%);
  transform: translate(0,-50%);
  background: url('images/arrow_btn_pk.svg') no-repeat center 50% / cover;
  transition: .15s ease-in-out;
}

.btn_regular:hover {
  background: #fa62a4;
  color: #fff;
}

.btn_regular:hover::before {
  right: 22px;
  background-image: url('images/arrow_btn_wh.svg');
}

/* pink */
.btn_regular.pk {
  background: #fa62a4;
  color: #fff;
}

.btn_regular.pk::before {
  background-image: url('images/arrow_btn_wh.svg');
}

.btn_regular.pk:hover {
  opacity: .8;
}

/* =================================================

MEDIA QUERY

================================================= */

/*DESIGN
================================================= */
@media screen and (max-width: 900px) {
  main {
    padding-top: 88px;
  }
  header {
    min-height: 88px;
  }

  .header_wrap {
    padding: 14px 0;
  }

  .header_logo_wrap {
    margin: 0 auto;
    padding: 0;
  }

  .header_logo_img {
    width: 319px;
    height: 60px;
  }

  /* gnav
  ================================================= */
  .gnav {
    position: fixed;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    top: 88px;
    right: -100%;
    width: 100%;
    max-width: 100%;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    z-index: 9991;
    background: #fafafa;
  }

  .gnav.open {
    right: 0;
  }

  /* FB TEL */
  .gnav_connect {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 64px 24px;
    width: 100%;
    max-width: 700px;
  }

  .gnav_connect li {
    padding: 0 0 0 4.85%;
    width: calc(100% / 2);
  }

  .gnav_connect li:first-child {
    padding: 0 4.85% 0 0;
  }

  .gnav_connect li:last-child {
    padding: 29px 0 0 0;
    width: 100%;
  }

  .gnav_connect .item {
    height: 64px;
  }

  .gnav_connect .item.fb {
    margin: 0 auto;
    width: 64px;
    background-image: url('images/icn_hd_facebook_sp.svg');
  }

  .gnav_connect .item.tel {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-left: 56px;
    font-weight: bold;
    line-height: 1;
    color: #555;
  }

  .gnav_connect .item.tel::before {
    position: absolute;
    content: '';
    display: block;
    width: 54px;
    height: 64px;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    transform: translate(0, -50%);
    background-image: url('images/icn_drawer_tel.svg');
  }

  .gnav_connect .item.tel .caption {
    display: block;
    margin-top: 4px;
    margin-bottom: -4px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: .9;
    letter-spacing: 0.02rem;
    color: #707070;
  }

  .gnav_connect .item.tel .number {
    display: block;
    word-break: keep-all;
    white-space: pre;
  }

  .gnav_connect .item.email {
    position: relative;
    display: block;
    padding: 0 20px;
    width: 100%;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 64px;
    letter-spacing: 0.06rem;
    border-radius: 64px;
    text-align: center;
    background: #fa62a4;
    color: #fff;
  }

  .gnav_connect .item.email::before {
    position: absolute;
    content: '';
    display: block;
    width: 9px;
    height: 16px;
    top: 24px;
    right: 25px;
    background: url('images/arrow_nav_contact.svg') no-repeat center 50% / cover;
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
  }

  .gnav_connect .item.email:hover::before {
    right: 20px;
  }

  /* NAV */
  .gnav_list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 24px;
    background: #fff;
  }

  .gnav_list .item {
    display: block;
    width: 100%;
  }

  .gnav_list .item .item_link {
    display: block;
    width: 100%;
    padding: 16px 0 16px 60px;
    letter-spacing: 0.06rem;
    color: #707070;
    border-bottom: 1px solid #aaa;
  }

  .gnav_list .item .item_link:last-child {
    border-bottom: 0;
  }

  .gnav_list .item .item_link:hover {
    background: #f7f7f7;
    color: #fa62a4;
  }

  .gnav_list .item .item_link::before {
    position: absolute;
    content: '';
    display: block;
    width: 60px;
    height: 60px;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    transform: translate(0, -50%);
    background: url('images/arrow_spnav.svg') no-repeat center 50% / cover;
  }

  .gnav_list .item .item_link:last-child::before {
    display: block;
  }

  /* Humberger
  ================================================= */
  .humberger,
  .humberger span {
    transition: transform .4s;
  }

  .humberger {
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 30px;
    top: 0px;
    right: 0px;
    width: 88px;
    height: 88px;
    z-index: 9999;
    background: #FA62A4;
  }

  .humberger_inner {
    position: relative;
    display: block;
    width: 38px;
    height: 15px;
  }

  .humberger_inner::after {
    position: absolute;
    content: 'MENU';
    display: block;
    bottom: -24px;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 32px;
    font-size: .8rem;
    font-weight: normal;
    text-align: center;
    letter-spacing: 0.08rem;
    color: #fff;
  }

  .humberger.active .humberger_inner::after {
    width: 36px;
    content: 'CLOSE';
  }

  .humberger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
  }

  .humberger span:nth-of-type(1) {
    top: 0;
  }

  .humberger span:nth-of-type(2) {
    top: 7px;
  }

  .humberger span:nth-of-type(3) {
    bottom: 0;
  }

  .humberger.active span {
    background-color: #fff;
  }

  .humberger.active span:nth-of-type(1) {
    -webkit-transform: translateY(20px) rotate(-45deg);
    transform: translateY(6px) rotate(-45deg);
  }

  .humberger.active span:nth-of-type(2) {
    opacity: 0;
  }

  .humberger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-20px) rotate(45deg);
    transform: translateY(-8px) rotate(45deg);
  }
}

@media screen and (max-width: 605px) {
  .gnav {
    min-width: auto;
  }
}

@media screen and (max-width: 600px) {
  .header_wrap {
    padding: 0;
  }

  .header_logo_wrap {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 88px;
  }

  .header_logo_img {
    width: 50%;
    height: auto;
  }

  .gnav_connect {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 40px 24px;
  }

  .gnav_connect li {
    padding: 0;
    width: 50%;
  }

  .gnav_connect li:first-child {
    margin-bottom: 16px;
    padding: 0;
    width: 100%;
  }

  .gnav_connect li:last-child {
    margin-top: 16px;
    padding: 0;
    width: 50%;
    min-width: 110px;
  }

  .btn_regular {
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
  }
}

@media screen and (max-width: 440px) {
  .gnav_connect {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .gnav_connect li {
    width: 100%;
  }

  .gnav_connect .item.tel {
    margin: 0 auto;
    width: 75%;
  }
}

/*iPhone
================================================= */
@media screen and (max-width: 414px) {
  body {
    font-size: 1.6rem;
  }

  #page_top {
    width: 64px;
    height: 64px;
    right: 8px;
    bottom: 8px;
  }

  #page_top .pagetopObj {
    width: 40px;
    height: 24.13px;
  }

  .header_logo_wrap {
    margin: 0;
    width: calc(100% - 88px);
  }

  .header_logo_img {
    width: 80%;
    min-width: 190px;
  }

  .gnav_list {
    padding: 8px 24px 16px;
  }

  .gnav_list .item .item_link {
    padding: 12px 0 12px 60px;
    font-size: 1.6rem;
  }

  .gnav_connect {
    padding: 16px 24px;
  }

  .footer_wrap {
    padding: 64px 40px;
  }

  .footer_logo {
    margin-bottom: 32px;
    height: auto;
  }

  .copyright {
    text-align: left;
  }

  .section_wrap {
    padding: 0 16px;
  }
}


@media screen and (max-width: 320px) {
  body {
    font-size: 1.4rem;
  }

  .btn_regular {
    font-size: 1.4rem;
  }
}

/* css Document */