@charset "UTF-8";
html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 62.5%;
}
body {
    width: 100%;
    height: 100%;
    color: #404040;
    font-family: 'Noto Sans JP', sans-serif;
    position: relative;
    line-height: 2.0rem;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #404040;
}
a:hover {
  text-decoration: underline;
  color: #404040;
}

/****** header ******/
header {
  width: 100%;
  height: 450px;
  background-image: url(../img/main_pic_pc.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}
header .header-inner-pc {
  width: 1000px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  font-size: 4.8rem;
  line-height: 6.8rem;
  display: flex;
  align-items: center;
}
header .header-inner-pc h1 {
  text-shadow: 1px 1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, -1px -1px #ffffff;
}
header .header-inner-pc h1 span {
  color: #ff89c0;
}

/****** comment ******/
.comment-area {
  width: 100%;
  padding: 50px 0 70px 0;
  box-sizing: border-box;
}
.comment-area .comment-inner {
  width: 1000px;
  padding: 30px;
  box-sizing: border-box;
  border: 1px solid #ff89c0;
  margin: 0 auto;
  border-radius: 10px;
  font-size: 1.6rem;
  line-height: 2.6rem;
}
.comment-area .comment-inner a {
  font-weight: bold;
  color: #ff89c0;
  text-decoration: underline;
}
.comment-area .comment-inner a:hover {
  font-weight: bold;
  color: #ff89c0;
  text-decoration: none;
}

/****** lead ttl ******/
.lead-ttl {
  text-align:center;
  color:#404040;
  font-weight:bold;
  font-size:3.6rem;
  line-height:4.6rem;
  position:relative;
  margin:0;
  padding-bottom:38px;
  width: 94%;
  margin-left: auto;
  margin-right: auto;
}
.lead-ttl::after {
  content:"";
  display:block;
  width:15px;
  height:15px;
  margin:30px auto 0;
  background:#fd89c0;
  border-radius:50%;
  box-shadow: -28px 0 0 #fd89c0, 28px 0 0 #fd89c0;
}
.lead-ttl span {
  color:#fd89c0;
}

/****** about ******/
.about-area {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  display: flex;
  padding-bottom: 100px;
}
.about-area .about-txt-pos {
  width: 550px;
  padding-right: 50px;
  box-sizing: border-box;
}
.about-area .about-txt-pos .about-txt-list {
  box-sizing: border-box;
  list-style: none;
  padding-bottom: 40px;
}
.about-area .about-txt-pos .about-txt-list li {
  position: relative;
  box-sizing: border-box;
  padding-left: 25px;
  font-size: 1.8rem;
  line-height: 2.8rem;
  margin-bottom: 20px;
}
.about-area .about-txt-pos .about-txt-list li::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  left: 0;
  width: 15px;
  height: 15px;
  background: url("../img/icon_patient.png") no-repeat center;
  background-size: contain;
}
.about-area .about-txt-pos .about-txt-list li:last-child {
  margin-bottom: 0;
}
.about-area .about-txt-pos .about-txt-lead {
  font-size: 2.2rem;
  line-height: 3.2rem;
}
.about-area .about-txt-pos .about-txt-lead span {
  color: #fd89c0;
}
.about-area .about-pic-pos {
  width: 450px;
  box-sizing: border-box;
}

/****** support ******/
.support-area {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-bottom: 100px;
}
.support-area .support-inner {
  box-sizing: border-box;
  padding-bottom: 30px;
  display: flex;
  flex-direction: row-reverse;
}
.support-area .support-txt-pos {
  width: 550px;
  padding-left: 50px;
  box-sizing: border-box;
  font-size: 1.6rem;
  line-height: 2.6rem;
}
.support-area .support-pic-pos {
  width: 450px;
  box-sizing: border-box;
}
.support-area .support-li-txt {
  font-size: 1.6rem;
  line-height: 2.6rem;
  padding-bottom: 10px;
}
.support-area .support-li-txt a {
  color: #fd89c0;
  text-decoration: underline;
}
.support-area .support-li-txt a:hover {
  color: #fd89c0;
  text-decoration: none;
}
.support-area .support-ca-txt {
  font-size: 1.2rem;
  line-height: 2.2rem;
}

/****** information ******/
.info-area {
  width: 1000px;
  padding-bottom: 100px;
  box-sizing: border-box;
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-left: auto;
  margin-right: auto;
}
.info-area .info-inner {
  width: 100%;
  box-sizing: border-box;
  padding: 30px;
  border-radius: 20px;
  border: 1px solid #cccccc;
}
.info-area .info-inner a {
  color: #fd89c0;
  text-decoration: underline;
}
.info-area .info-inner a:hover {
  color: #fd89c0;
  text-decoration: none;
}
.info-area .info-inner .info-ttl {
  font-size: 1.8rem;
  line-height: 2.8rem;
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 1px solid #fd89c0;
  margin-bottom: 20px;
  color: #fd89c0;
}
.info-area .info-inner .info-list {
  list-style: none;
  box-sizing: border-box;
}
.info-area .info-inner .info-list li {
  font-size: 1.4rem;
  line-height: 2.4rem;
}
.info-area .info-inner .info-list li span {
  color: #fd89c0;
}

/****** flow ******/
.flow-area {
  width: 1000px;
  padding-bottom: 100px;
  box-sizing: border-box;
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-left: auto;
  margin-right: auto;
}
.flow-area .flow-list {
  box-sizing: border-box;
  display: flex;
  list-style: none;
}
.flow-area .flow-list li {
  box-sizing: border-box;
  width: calc((100% - 60px) / 4);
  border-radius: 10px;
  border: 1px solid #cccccc;
  padding: 15px;
  font-size: 1.6rem;
  line-height: 2.6rem;
}
.flow-area .flow-list li:not(:last-child) {
  margin-right: 20px;
}
.flow-area .flow-list li .flow-ttl {
  font-size: 1.8rem;
  line-height: 2.8rem;
  font-weight: bold;
  color: #fd89c0;
  padding-bottom: 10px;
}

/****** contact ******/
.contact-area {
  width: 1000px;
  padding-bottom: 100px;
  box-sizing: border-box;
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-left: auto;
  margin-right: auto;
}
.contact-area .contact-inner {
  width: 1000px;
  box-sizing: border-box;
  border: 3px solid #fd89c0;
  border-radius: 10px;
  background: #fff5fa;
  padding: 30px;
}
.contact-area .contact-inner .contact-ttl {
  font-size: 2.4rem;
  line-height: 3.4rem;
  text-align: center;
  padding-bottom: 30px;
}
.contact-area .contact-inner .contact-card {
  width: 450px;
  padding: 15px 30px;
  background: #fd89c0;
  color: #ffffff;
  text-decoration: none;
  border-radius: 10px;
  box-sizing: border-box;
  transition: opacity .2s ease;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.contact-area .contact-inner .contact-card:hover {
  opacity: 0.8;
  color: #ffffff;
  text-decoration: none;
}
.contact-area .contact-inner .contact-cont {
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.contact-area .contact-inner .contact-cont .contact-txt-pos {
  flex: 1;
  box-sizing: border-box;
  padding-right: 20px;
}
.contact-area .contact-inner .contact-cont .contact-txt-pos .contact-form-ttl {
  font-size: 3.0rem;
  line-height: 4.0rem;
  padding-bottom: 10px;
}
.contact-area .contact-inner .contact-cont .contact-txt-pos .contact-form-txt {
  font-size: 1.4rem;
  line-height: 2.4rem;
}
.contact-area .contact-inner .contact-cont .contact-txt-pos .contact-arrow-pos {
  flex-shrink: 0;
  width: 49px;
  margin-left: auto;
  text-align: right;
}
.contact-area .contact-inner .contact-ca-txt {
  padding-top: 20px;
  text-align: center;
  font-size: 1.4rem;
  line-height: 2.4rem;
}

/****** inquiry ******/
.inquiry-area {
  width: 100%;
  padding-bottom: 100px;
  box-sizing: border-box;
}
.inquiry-area .inquiry-inner {
  width: 1000px;
  padding: 30px;
  box-sizing: border-box;
  border: 1px solid #cccccc;
  margin: 0 auto;
  border-radius: 10px;
  font-size: 1.6rem;
  line-height: 2.6rem;
}
.inquiry-area .inquiry-inner a {
  color: #ff89c0;
  text-decoration: underline;
}
.inquiry-area .inquiry-inner a:hover {
  color: #ff89c0;
  text-decoration: none;
}
.inquiry-area .inquiry-inner .inquiry-ttl {
  font-size: 1.8rem;
  line-height: 2.8rem;
  padding-bottom: 10px;
}

/****** footer ******/
footer {
  width: 100%;
  border-top: 1px solid #fd89c0;
  text-align: center;
  font-size: 1.2rem;
  line-height: 2.2rem;
  padding: 20px;
  box-sizing: border-box;
}

/******************************************************
smartphone
******************************************************/
@media screen and (max-width: 768px) {
/****** header ******/
header {
  width: 100%;
  height: 400px;
  background-image: url(../img/main_pic_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
}
header .header-inner-pc {
  width: 94%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  font-size: 3.8rem;
  line-height: 4.8rem;
  display: block;
  padding-top: 20px;
}
/****** comment ******/
.comment-area {
  width: 100%;
  padding: 50px 0 50px 0;
  box-sizing: border-box;
}
.comment-area .comment-inner {
  width: 94%;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #ff89c0;
  margin: 0 auto;
  border-radius: 10px;
  font-size: 1.6rem;
  line-height: 2.6rem;
}
/****** lead ttl ******/
.lead-ttl {
  text-align:center;
  color:#404040;
  font-weight:bold;
  font-size:3.0rem;
  line-height:4.0rem;
  position:relative;
  margin:0;
  padding-bottom:48px;
}
.lead-ttl::after {
  content:"";
  display:block;
  width:15px;
  height:15px;
  margin:30px auto 0;
  background:#fd89c0;
  border-radius:50%;
  box-shadow: -28px 0 0 #fd89c0, 28px 0 0 #fd89c0;
}
.lead-ttl span {
  color:#fd89c0;
}
/****** about ******/
.about-area {
  width: 94%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  display: block;
  padding-bottom: 50px;
}
.about-area .about-txt-pos {
  width: 100%;
  padding-right: 0;
  padding-bottom: 30px;
  box-sizing: border-box;
}
.about-area .about-txt-pos .about-txt-list {
  box-sizing: border-box;
  list-style: none;
  padding-bottom: 30px;
}
.about-area .about-txt-pos .about-txt-list li {
  position: relative;
  box-sizing: border-box;
  padding-left: 25px;
  font-size: 1.8rem;
  line-height: 2.8rem;
  margin-bottom: 10px;
}
.about-area .about-txt-pos .about-txt-list li::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  left: 0;
  width: 15px;
  height: 15px;
  background: url("../img/icon_patient.png") no-repeat center;
  background-size: contain;
}
.about-area .about-txt-pos .about-txt-lead {
  font-size: 2.0rem;
  line-height: 3.0rem;
}
.about-area .about-pic-pos {
  width: 100%;
  box-sizing: border-box;
}
.about-area .about-pic-pos img {
  width: 100%;
  height: auto;
}
/****** support ******/
.support-area {
  width: 94%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-bottom: 50px;
}
.support-area .support-inner {
  box-sizing: border-box;
  padding-bottom: 30px;
  display: block;
}
.support-area .support-txt-pos {
  width: 100%;
  padding-left: 0;
  box-sizing: border-box;
  font-size: 1.6rem;
  line-height: 2.6rem;
  padding-bottom: 30px;
}
.support-area .support-pic-pos {
  width: 100%;
  box-sizing: border-box;
}
.support-area .support-pic-pos img {
  width: 100%;
  height: auto;
}
.support-area .support-li-txt {
  font-size: 1.6rem;
  line-height: 2.6rem;
  padding-bottom: 10px;
}
/****** information ******/
.info-area {
  width: 94%;
  padding-bottom: 50px;
  box-sizing: border-box;
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-left: auto;
  margin-right: auto;
}
.info-area .info-inner {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid #cccccc;
}
/****** flow ******/
.flow-area {
  width: 94%;
  padding-bottom: 50px;
  box-sizing: border-box;
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-left: auto;
  margin-right: auto;
}
.flow-area .flow-list {
  box-sizing: border-box;
  display: block;
  list-style: none;
}
.flow-area .flow-list li {
  box-sizing: border-box;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #cccccc;
  padding: 15px;
  font-size: 1.6rem;
  line-height: 2.6rem;
}
.flow-area .flow-list li:not(:last-child) {
  margin-right: 0;
  margin-bottom: 30px;
}
/****** contact ******/
.contact-area {
  width: 94%;
  padding-bottom: 50px;
  box-sizing: border-box;
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-left: auto;
  margin-right: auto;
}
.contact-area .contact-inner {
  width: 100%;
  box-sizing: border-box;
  border: 3px solid #fd89c0;
  border-radius: 10px;
  background: #fff5fa;
  padding: 20px;
}
.contact-area .contact-inner .contact-ttl {
  font-size: 2.0rem;
  line-height: 3.0rem;
  text-align: center;
  padding-bottom: 30px;
}
.contact-area .contact-inner .contact-card {
  width: 100%;
  padding: 15px;
  background: #fd89c0;
  color: #ffffff;
  text-decoration: none;
  border-radius: 10px;
  box-sizing: border-box;
  transition: opacity .2s ease;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.contact-area .contact-inner .contact-card:hover {
  opacity: 0.8;
  color: #ffffff;
  text-decoration: none;
}
.contact-area .contact-inner .contact-cont {
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.contact-area .contact-inner .contact-cont .contact-txt-pos {
  flex: 1;
  box-sizing: border-box;
  padding-right: 10px;
}
.contact-area .contact-inner .contact-cont .contact-txt-pos .contact-form-ttl {
  font-size: 2.6rem;
  line-height: 3.6rem;
  padding-bottom: 10px;
}
.contact-area .contact-inner .contact-cont .contact-txt-pos .contact-form-txt {
  font-size: 1.2rem;
  line-height: 2.2rem;
}
.contact-area .contact-inner .contact-cont .contact-txt-pos .contact-arrow-pos {
  flex-shrink: 0;
  width: 49px;
  margin-left: auto;
  text-align: right;
}
.contact-area .contact-inner .contact-ca-txt {
  padding-top: 20px;
  text-align: center;
  font-size: 1.4rem;
  line-height: 2.4rem;
}
/****** inquiry ******/
.inquiry-area {
  width: 94%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 50px;
  box-sizing: border-box;
}
.inquiry-area .inquiry-inner {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #cccccc;
  margin: 0 auto;
  border-radius: 10px;
  font-size: 1.6rem;
  line-height: 2.6rem;
}
.inquiry-area .inquiry-inner a {
  color: #ff89c0;
  text-decoration: underline;
}
.inquiry-area .inquiry-inner a:hover {
  color: #ff89c0;
  text-decoration: none;
}

}


/****** common style ******/
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mb60 { margin-bottom: 60px; }
.mb70 { margin-bottom: 70px; }
.mb80 { margin-bottom: 80px; }
.mb90 { margin-bottom: 90px; }
.mb100 { margin-bottom: 100px; }