/*
Theme Name: HARU
Description:
Author:
Version: 1.0
*/
.header-inner {
    z-index: 1;
}

.header-inner .right {
    float: right;
    width: 60%;
}

.header-inner .right li {
    float: left;
    margin-right: 3%;
}

.header-inner li.line {
    border: 0;
    padding: 0;
    margin-right: 0;
}

.header-inner li.tel {
    margin-top: 5px;
}

/*=== Common ===*/

.yellow {
    color: #FFFF00;
}

.yellow_line {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(70%, #fef631)) repeat scroll 0 -5px;
    background: linear-gradient(transparent 70%, #fef631 70%) repeat scroll 0 -5px;
    line-height: 1.5;
}

.pb40 {
	padding-bottom: 40px !important;
}

.pc-only {
    display: block;
}

.sp-only {
    display: none;
}

  .mb0 { margin-bottom: 0; }

/*-------------------------------------------
スマートフォン
-------------------------------------------*/
@media screen and (max-width: 640px) {
  .mb30 { margin-bottom: 15px !important; }
  .mb55 { margin-bottom: 27px !important; }
  .mb60 { margin-bottom: 30px !important; }
  .container02 p {
    margin-bottom: 20px;
  }
  .yellow-bg {
      padding: 30px 0 30px;
  }
.pc-only {
    display: none;
}
.sp-only {
    display: block;
}	
	
}

/*=== ヘッダー ===*/

@media screen and (max-width: 640px) {
  .header-inner{
    height: initial;
    height: auto;
    padding: 10px 0;	  
  }

.header-inner .left .visible-phone {
    width: 90%;
    margin: 0 10px 5px;	
}	
	
.header-inner .right {
    float: none;
    width: 100%;
}
	
.header-inner .right li:first-child {
    width: 50%;
}
	
.header-inner .right li {
    float: left; 
    width: 21%;
    margin-left: 2%;
}

.header-inner li.tel {
    margin-top: 0;
}
	
.header-inner li.mail {
    width: 21%;
    margin-left: 2%;
    margin-right: 0;
}
	
.header-inner .right li:last-child {
    float: left;
}

}

/*=== TOPページ ===*/

/* メインビジュアル */
#mainvisual {
    background-color: transparent;
    padding: 20px 0 10px;
}

/* 患者様の声 */
.voice-container {
  background-color: #98c8e7;
}
.voice-container .voice-inner .left p {
    margin-top: 10px;
    font-size: 22px;
	font-weight: bold;
}

/* 続きを読む */
.readmore-button {
    background-color: #015c98;
    color: white;
    border-radius: 18px;
    padding: 0.5em;
    display: block;
    font-weight: bold;
    font-size: 1.25em;
    margin: 0 auto;
    width: 10em;
    text-align: center;
    margin-bottom: 30px;
}
.readmore-button.show {
    background-image: linear-gradient( 180deg, rgba(255,255,255,0.5), white );
}

/* レスポンスデバイス */
.response-device {
    background-color: #13477b;
}
.response-device .first-press-limited {
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.response-device.first-press-limited img {
    width: 100%;
}

.response-device.first-press-limited .larger {
    font-size: 130%;
}

.response-device .pc-mail {
    position: relative;
    top: -130px;
    left: -140px;
}

.response-device .pc-mail a {
    transition: all 0.3s ease-in-out;
}

.response-device .pc-mail a:hover {
    -webkit-filter: brightness(130%);
    filter: brightness(130%);
}


.response-device2 {
    background-color: #98c8e7;
}
.response-device2 .first-press-limited {
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.response-device2 .first-press-limited img {
    width: 100%;
}

.response-device2 .first-press-limited .larger {
    font-size: 130%;
}

.response-device2 .pc-mail {
    position: relative;
    top: -60px;
    left: -115px;
}

.response-device2 .pc-mail a {
    transition: all 0.3s ease-in-out;
}

.response-device2 .pc-mail a:hover {
    -webkit-filter: brightness(130%);
    filter: brightness(130%);
}

/* LINE */
.response-device .line {
    padding: 32px 40px;
    margin-top:-80px;
}

/* ============================================== */
/* LINE
/* ============================================== */
.line {
    padding-bottom: 40px;
    background: white;
}

.line .container {
    background-image: url(../haru/images/common/ico-line.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 129px;
    width: 930px;
    padding-top: 0;
    padding-bottom: 0;
}

.line h3 {
    padding-left: 150px;
    height: 148px;
    padding-top: 25px;
    border-bottom: 2px solid;
    margin-bottom: 25px;
}

.line h4 {
    line-height: 1.3;
    margin-bottom: 0.3em;
}

.line h4::before {
    content: attr(data-num);
    background-color: #00b900;
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.3em;
    font-size: 80%;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    line-height: 1.5;
}

.line .addfriend {
    color: #45b035;
    font-size: 22px;
    background: url(images/common/line-friend.png) no-repeat;
    background-size: contain;
    height: 174px;
    width: 311px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.line .addfriend::before {
    display: none;
}

.line .content p {
    font-size: 80%;
    margin: 0;
}

.line .special {
    padding: 1em 0;
    padding-left: 4em;
    position: relative;
    top: -150px;
    left: 320px;
}

.line .special dt {
    margin-bottom: 0;
    display: inline-block;
    clear: both;
    float: left;
    position: absolute;
    left: 0;
}

.line .special dd {
    margin-bottom: 0;
}

.line .content {
    position: relative;
    background: url(images/common/qr.png) no-repeat left top;
    overflow: hidden;
    background-size: 166px;
    padding-left: 214px;
    padding-bottom:10px;
}

.line .content ul {
    display: flex;
    margin: 0;
}

.line .content li {
}

.line .content li+li {
    margin-left: 40px;
}

.line .account {
    border: 1px solid;
    padding: 0.1em 1.5em;
    margin-top: 10px;
    display: inline-block;
}

.line .fb {
    position: relative;
    top: -120px;
    left: 320px;
    display: none;
}

@media screen and (max-width: 640px) {
	.response-device .line {
	    width: 100%;
	    padding: 15px;
	    margin-top:0px;
	}

	/* ============================================== */
	/* LINE
	/* ============================================== */
	.line {
	    padding-bottom: 20px;
	}

	.line .container {
	    background-size: 20%;
	    background-position: top left;
	    width: auto;
	    padding: 0;
	}

	.line h3 {
	    padding-left: 23%;
	    letter-spacing: 0;
	    line-height: 1.3;
	    font-size: 4vw;
	    padding-top: 0;
	    height: auto;
	    height: initial;
	    padding-bottom: 1em;
	}

	.line h4 {
	}

	.line .content {
	    background: none;
	    padding-left: 0;
	}

	.line .content ul {
	    display: block;
	}

	.line .content li {
	    margin-bottom: 1em;
	}

	.line .content li+li {
	    margin-left: 0;
	}

	.line .content p {
	    padding-bottom: 10px;
	}

	.line .content p:last-of-type {
	    padding-right: 0;
	}

	.line .account {
	    padding: 0.1em 0.5em;
	}

	.line .addfriend {
	    margin: 0 auto;
	    display: block;
	    padding-top: 40px;
	    width: 280px;
	}

	.line .special {
	    position: static;
	}

	.line .fb {
	    position: static;
	}
	
	.line .line-btn {	
    width: 65%;
    max-width: 240px;	
	}	
}

/* 推薦文 */
.profile-container h3 {
    display: inline-block;
    border-left: 8px solid #ccc;
    padding: 0.2em 0.5em;
    line-height: 1.3em;
}

.profile-container img {
    float: left;
    width: 228px;
    margin-right: 40px;
}

.profile-container p {
    font-size: 90%;
    line-height: 2.2em;
}

/* 患者様の声２ */
.voice-container.col2 {
    background-color: transparent;
}

.voice-container.col2 .voice-block {
    padding: 0;
}

.voice-container.col2 .voice-inner {
    width: 100%;
}

.voice-container.col2 .right {
    width: 100%;
    float: none;
    padding: 1em;
}

.voice-container.col2 .rebutton {
    width: 100%;
    margin-bottom:0;
}

#voice2 .container02 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

#voice2 .voice-block {
    width: 48%;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

#voice2 h2 {
    font-size: 55px;
}

#voice2 h3 {
    background-color: #286cbd;
    color: #fff;
    text-align: center;
    padding: 1em;
}

#voice2 .desc {
    padding: 1em;
}

#voice2 .desc p {
    margin: 0;
}

#voice2 .desc small {
    font-size: 64%;
    color: #999;
}

/* お悩み */
#trouble .check-container ul li:first-child {
    list-style-type:none;
    background: none;
}
#trouble .check-container li img {
    max-width: 340px;
    margin-bottom: 0;
}

/* 院長プロフィール */
#profile .desc img {
    max-width: 100%;
    display: block;
    margin-bottom: 10px;
}

#profile .desc h3 {
    display: inline-block;
    border-left: 6px solid #ccc;
    padding: 0em 0.5em;
    line-height: 1.3em;
    font-weight: bold;
    margin-top: 10px;
}

#profile .desc .alignright {
    width: 246px;
    margin-left: 29px;
}

#profile .desc .alignleft {
    width: 725px;
    margin-right: 0;
}

#profile .desc p {
    margin-bottom: 20px;
}

/* 選ばれる理由 */
#reason .reason-image {
    max-width: 250px;
}
#reason h3 {
    position: relative;
}

#reason h3::after {
    content: '';
    border-top: 2em solid #2676af;
    border-left: 2em solid transparent;
    border-right: 2em solid transparent;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

/* 施術の流れ */
#flow {
    padding-top: 120px;
}

#flow .message-container {
    background: rgb(238,238,238) url(/wp/wp-content/themes/haru/images/common/clock.png) no-repeat;
    background-position: 55px center;
    padding: 25px;
    padding-left: 170px;
}

#flow .flow-image {
    max-width: 280px;
    /* border: 1px solid #ccc; */
    margin-bottom: 60px;
}

/* 料金 */
#price .message-container .ttl {
    position: absolute;
    top: 50%;
    left: 46px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-weight: bold;
}

#price .message-container {
    background: rgb(238,238,238) url(/wp/wp-content/themes/haru/images/common/money.png) no-repeat;
    background-position: 55px center;
    padding: 25px;
    padding-left: 170px;
}

#price .message-container2 {
	background: rgb(255,255,255) ;
    position: relative;
    padding: 25px;
    margin-bottom: 20px;
}

.message-container ul {
    margin-bottom: 0;
}

#price .red-container .ttl {
    color: #fff;
    background-color: #DC0000;
    display: inline-block;
    padding:0.3em 1.5em 0.2em;
    border-radius: 10px;
    margin-bottom: 20px;
}

#price .larger {
    font-size: 130%;
}

#price .yellow-bg {
    position: relative;
}

#price .yellow-bg::after {
    content: '';
    border-top: 2em solid #ffca00;
    border-left: 2em solid transparent;
    border-right: 2em solid transparent;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

/* アクセス */
#access ul.desc {
    list-style-type: disc;
}
.access-map ul li img {
    max-width: 100%;
}
#access small {
    font-size: 80%;
    color: #999;
}

/*-------------------------------------------
スマートフォン
-------------------------------------------*/
@media screen and (max-width: 640px) {
	/* メインビジュアル */
	#mainvisual {
		padding: 0;
	}
	/* 患者様の声 */
	.voice-container .voice-block {
		padding: 45px 10px 0;
	}
	.voice-container h2 {
		background-color: #0070b6;
		color: #fff;
		padding: 10px;
		margin: 0 -10px 20px;
	}
	/* 続きを読む */
	.rebutton{
		margin-bottom: 0px;
	}
	/* 推薦の声 */
	.profile-container img {
		width: 75%;
    margin: 0 auto !important;
    float: none;
	}
	.profile-container h3 {
	  width: 100%;
    margin-top: 10px;
		font-size: 14px;
		border-left: 4px solid #ccc;
		font-weight: bold;
	}
	.profile-container p {
		line-height: 1.8;
		margin-bottom: 1em;
	}
	/* 患者様の声２ */
	#voice2 .container02 {
	    display: block;
	    padding: 0;
	}
	
	#voice2 .voice-block {
	    width: 100%;
	    border: none;
	}
	#voice2 .voice-inner {
	      padding: 0 10px;
	}
	#voice2 h2 {
	    padding: 10px;
	    font-size: 24px;
      background-color: transparent;
      color: #0070b6;
	}
	
	#voice2 h3 {
	    background-color: #0070b6;
	    color: #fff;
	    padding: 10px;
	    margin: 0 -10px 20px;
	    font-size: 18px;
	    line-height: 1.3;
	    font-weight: bold;
	}
	.voice-container.col2 .right {
	    padding: 0;
	}
	#voice2 .desc {
	    padding: 10px 0;
	    line-height: 1.3;
	}
	
	#voice2 .desc p {
	    font-size: 22px;
	    margin-top: 10px;
	}
	
	#voice2 .desc small {
	    font-size: 16px;
	}
	
	/* お悩み */
	#trouble h2+p {
	    line-height: 1.5;
	}
	#trouble .check-container {
		margin-bottom: 0;
	}
	#trouble .check-container ul {
	    position: relative;
	}
	
	#trouble .check-container ul li {
	    background-size: 20px;
	    padding-left: 30px;
	}
	
	#trouble .check-container ul li:first-child {
	    position: absolute;
	    top: 0;
	    right: 0;
	    width: 40%;
	    padding: 0;
	    margin: 0;
	}
	
	#trouble .check-container ul li:nth-child(2),#trouble .check-container ul li:nth-child(3),#trouble .check-container ul li:nth-child(4) {
	    width: 60%;
	}
	
	#trouble .check-container li img {
	    width: 100%;
	    margin: 0;
	}
	
	/* 院長プロフィール */
	#profile .container02 {
	    padding: 0 10px;
	}
	
	#profile .desc .alignright {
	    width: 50%;
	    float: right;
	    margin-left: 10px;
	    position: relative;
	}
	
	#profile .desc img.prof {
	    width: 45%;
	}
	#profile .desc h3 {
		border-left-width: 4px;
	}

	#profile .plate_box {
	    position: absolute;
	    top: 0;
	    right: 0;
	    width: 48%;
	}
	
	#profile .desc .alignleft {
	    width: 50%;
	    float: left;
	}
	
	/* 選ばれる理由 */
	#reason .container02 {
	    padding: 0 10px;
	}
  #reason h3 {
      padding-left: 10px;
      padding-right: 10px;
  }
 
  #reason h3 .l11 {
      line-height: inherit;
  }
  
  /* 施術料金 */
  #price h2 {
    padding: 0 10px;
    font-size: 24px;
    line-height: 1.45;
  }
  #price .f33 {
    line-height: inherit;
  }
  #price .message-container {
	  background: rgb(238,238,238) url(/wp/wp-content/themes/haru/images/common/money.png) no-repeat 100px;
      background-size: 65px;
      background-position: 20px center;
      padding: 5px;
      padding-left: 100px;
}
	
  #price .message-container2 {
	  margin-top: 30px;
      margin-bottom: 30px;
      padding: 4% 4%;
  }
 
  #price .message-container .ttl {
      position: static;
      -webkit-transform: translateY(0);
      transform: translateY(0);
  }

  #flow .message-container {
      background: rgb(238,238,238) url(/wp/wp-content/themes/haru/images/common/clock.png) no-repeat 100px;
      background-size: 65px;
      background-position: 20px center;
      padding: 5px;
      padding-left: 100px;
}

  /* 当院へお越しいただく前に */
  #confirm .check-container ul {
      border: 1px solid #BBBBBB;
      padding: 15px;
  }
 
  #confirm .check-container ul li {
      background-position: left center;
      padding: .6em 0 .6em 3em;
      margin-bottom: 0;
  }
  
  /* アクセス */
  #access .message-container {
      padding: 10px 10px;
  }
 
  .access-container .access-ttl01, .access-container .access-ttl02, .access-container .access-ttl03 {
      font-size: 26px;
      padding-left: 46px;
  }
 
  #access .access {
      margin: 20px auto;
  }
 
  /* FAQ */
  #faq .container02 {
      padding: 0 10px;
  }
  /* よくあるご質問 */
  #question .question_box{border:solid 1px #cdcdcd; border-radius:15px; padding:15px;}
  #question .question_box .ttl{font-size:18px;}
  #question .question_box .ttl::before{
    content: '';
    display: inline-block;
    background-image:url(../images/home/q.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    width: 31px;
    height: 31px;
  }


  /* 3つの道 */
  #yourway .container02 {
    padding: 0 10px;
  }

  /* レスポンスデバイス */
  .response-device .container02 {
    padding: 0 10px;
  }
  .response-device .first-press-limited {
    margin-bottom: 0;
  }

}
@media screen and (max-width: 500px) {
    #trouble .check-container ul li:nth-child(4) {
        width:100%;
    }
}

@media screen and (max-width: 320px) {
    #trouble .check-container ul li:nth-child(3) {
        width:100%;
    }
}



/*=== 症状別ページ ===*/
.single-symptom main {
    background: transparent;
    padding-top: 0;
}

.single-symptom main .blog-content {
    width: 100%;
    padding: 0;
}

.single-symptom .blog-container {
    width: 100%;
    float: none;
}

.single-symptom .media-block {
    padding: 0;
    border: none;
}

.single-symptom .inner {
    margin: 0 auto;
}

.single-symptom .inner.fix {
    width: 1000px;
}

.single-symptom h2 {
    width: auto;
    margin: 0 auto 15px;
}

.single-symptom .voice-inner .left p:first-child {
    margin-top: 0;
}

/*=== フッター ===*/
.right li#custom_html-2 {
    list-style: none;
    clear: both;
}
p.footer-bnr, p.footer-bnr2 {
    float: left;
    padding: 0 5px;    
}    


/* 2017.10.24 iphoneで動画フレームが白くなる問題の対処 */
/* YouTubeのレスポンシブを解除する */
.voice-block .left iframe[src*=youtube] {
    width: 100%;
    height: 200px;
}

@media screen and (max-width: 640px) {
    .single-symptom h2 {
        width: 100%;
    }

    .single-symptom .inner.fix {
        width: 100%;
    }
}

/*=== フッター ===*/

/* フッターFacebook */
@media screen and (max-width: 640px) {
    .fb_iframe_widget {
        overflow: hidden;
        width: 100%;
    }        
    p.footer-bnr, p.footer-bnr2 {
        width: 50%;
    }
}

/* 取材 */
.syuzai-container {
  background-color: #f0ffff;
}

/* 特典 */
#special h3 {
    line-height: 1.3;
}

#special .sp-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.sp-container .sp-box {
    border: 7px solid #ba0001;
    padding: 25px;
    background: rgb(255,255,203);
    width: 470px;
    position: relative;
}

.sp-box .sp-img {
    width: 400px;
    position: absolute;
    bottom: 25px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}