/*
Theme Name: waiwai-bust-portal
Author: 株式会社ゆいまーる
Description: わいわい整骨院バストアップポータルサイト用CSS
Version: 1
*/

@import "https://use.fontawesome.com/releases/v5.13.0/css/all.css";

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
h2{
    background: #ee7489;
    color: #fff;
	border-radius: 5px;
}

.h1_bg{
    background: #ee7489;
    color: #fff;
}
/*==============================================
続きを見る
==============================================*/
.cp_box1 *,
.cp_box1 *:before,
.cp_box1 *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.cp_box1 {
    position: relative;
  margin-bottom:32px;
}

.cp_box1 label {
    position: absolute;
    z-index: 1;
    bottom: -10px;
    width: 100%;
    height: 200px;
    cursor: pointer;
    text-align: center;
    background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
  animation: fluffy1 2s ease infinite;
}

@media (max-width: 480px) {
.cp_box1 label {
    bottom: 0px;
}
}


@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-1px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-1px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

.cp_box1 input:checked+label {
    background: inherit;
}

.cp_box1 label:after {
    line-height: 2.5rem;
    position: absolute;
    z-index: 2;
    bottom: 10px;
    left: 50%;
    width: 50%;
  padding: 10px;
    font-family: FontAwesome;
  content: '\f13a''続きを見る';
    transform: translate(-50%, 0);
    letter-spacing: 0.05em;
    color: #ffffff;
    border-radius: 5px;
  background: linear-gradient(to bottom, #f48b68 0%,#f36233 75%,#ff602c 100%);
    border: 5px solid #ff602c;
  font-weight: bold;
  font-size: 1.5em;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}

@media (max-width: 763px) {
  .cp_box1 label:after {
    width: 70%;
    line-height: 1rem;
    font-size: 1em;
  }
}


.cp_box1 input {
    display: none;
}

.cp_box1 input:checked+label {
}

.cp_box1 input:checked+label:after {
    font-family: FontAwesome;
    content: '\f139''閉じる';
}

.cp_box1 input:checked~.cp_container {
    height: auto;
    padding-bottom: 50px;
    transition: all 0.5s;
}


.cp_box1 .cp_container {
    overflow: hidden;
  height: 560px;
    transition: all 0.5s;
}


@media (max-width: 480px) {
    .cp_box1 .cp_container {
        overflow: hidden;
    height:500px;
        transition: all 0.5s;
    }
    .cp_box1 {
    position: relative;
		margin-bottom:8px;
}
}

/*全体縮小*/
.cp_box2 *,
.cp_box2 *:before,
.cp_box2 *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.cp_box2 {
    position: relative;
  margin-bottom:32px;
}

.cp_box2 label {
    position: absolute;
    z-index: 1;
    bottom: -10px;
    width: 100%;
    height: 100px;
    cursor: pointer;
    text-align: center;
    background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
  animation: fluffy1 2s ease infinite;
}

@media (max-width: 480px) {
.cp_box2 label {
    bottom:-10px;
}
}


@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-1px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-1px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

.cp_box2 input:checked+label {
    background: inherit;
}

.cp_box2 label:after {
    line-height: 2.5rem;
    position: absolute;
    z-index: 2;
    bottom: 10px;
    left: 50%;
    width: 50%;
  padding: 10px;
    font-family: FontAwesome;
  content: '\f13a''続きを見る';
    transform: translate(-50%, 0);
    letter-spacing: 0.05em;
    color: #ffffff;
    border-radius: 5px;
  background: linear-gradient(to bottom, #f48b68 0%,#f36233 75%,#ff602c 100%);
    border: 5px solid #ff602c;
  font-weight: bold;
  font-size: 1.5em;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}

@media (max-width: 763px) {
  .cp_box2 label:after {
    width: 70%;
    line-height: 1rem;
    font-size: 1em;
  }
}


.cp_box2 input {
    display: none;
}

.cp_box2 input:checked+label {
}

.cp_box2 input:checked+label:after {
    font-family: FontAwesome;
    content: '\f139''閉じる';
}

.cp_box2 input:checked~.cp_container2 {
    height: auto;
    padding-bottom: 50px;
    transition: all 0.5s;
}


.cp_box2 .cp_container2 {
    overflow: hidden;
  height:1630px;
    transition: all 0.5s;
}


@media (max-width: 480px) {
    .cp_box2 .cp_container2 {
        overflow: hidden;
    height:1160px;
        transition: all 0.5s;
    }
    .cp_box2 {
    position: relative;
        margin-bottom:32px;
}
}



/*==============================================
お客様の声
==============================================*/

.voice_bg{
  background: #fff;
  box-shadow: 2px 4px 12px rgba(0,0,0,.08);
  border-radius: 20px;
}

.voice_text{
  font-size: 14px;
  line-height:1.5;
}

@media (max-width: 768px) {
.voice_text{
  font-size: 12px;
  line-height:1.5;
}
}


/*==============================================
ピンク背景
==============================================*/

.bg-pink {
	background-image: url(https://waiwai-bust.waiwai-karada-lob.com/wp-content/uploads/bg_pink_01-1.jpg);
    padding: 8px 0 8px;
	border: solid 1px #f7c0b0;
	box-shadow: 0px 0px 10px rgba(245, 159, 135, 0.4);
	border-radius: 10px;
}


/*==============================================
CVボタン
==============================================*/
.line_btn {
    background: #00c43e !important;
    color: #fff !important;
    border-radius: 100vh !important;
    max-width:680px !important;
		min-width:300px;
    width: 100% !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;	
	box-shadow: 0 5px 0 #00912e;
}

.tel_btn {
    background: #1976d2 !important;
    color: #fff !important;
    border-radius: 100vh !important;
    max-width: 680px !important;
	min-width:300px;
		width: 100% !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
	box-shadow: 0 5px 0 #145ca4;
}



/*==============================================
比較表
==============================================*/
.hikaku table{
  width: 100%;
  border-collapse: collapse;
}

.hikaku table tr{
  border: solid 2px #7f7f7f;
}

.hikaku table tr:last-child{
  border-bottom: none;
}

.hikaku table th{
  position: relative;
  text-align: left;
  width: 3%;
    background-color: #faeef1;
    color: #ee7489;
  text-align: center;
  padding: 10px 0;
  border: 2px solid #7f7f7f;
	line-height: 1.2;
}

.hikaku table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #ee7489;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.hikaku table td{
  text-align: left;
	width: 13%;
  text-align: center;
  background-color:#F5F5F5;
  padding: 10px 10px;
	line-height:1.6;
}

.hikaku table td:nth-child(2){
  border: 2px solid #7f7f7f;
}

.hikaku table td:nth-child(3){
  border: 2px solid #7f7f7f;
}

.hikaku table td:nth-child(4){
  font-weight:bold;
  background-color: #ffedf3;
	  border: 2px solid #7f7f7f;
}

.hikaku .non{
  background:#fff
}

.hikaku .col1{
    background-color: #eeeeee;
    color: #7f7f7f;
}

.hikaku .col2{
    background-color:#e5acb9;
  color:#fff;
}

.hikaku .col2_m{
    background-color: #2693ff;
  color:#fff;
}


.hikaku table thead tr th:after{
  border-left:none;
  border-top:none;
  border-bottom:;
}
@media (max-width:736px) {
.hikaku {
    width: 100%;
	}
}


/*==============================================
推薦者の声
==============================================*/

.name{
font-size: 32px;
    font-weight: 700;
    border-bottom: solid 4px #e5acb9;
}
@media (max-width:736px) {
.name{
	font-size:24px;
}
	.name-sub{
	font-size:16px;
}
	}

.coment_box {
    background: #fff;
    border: solid 2px #faeef1;
    border-radius: 5px;
}
@media (max-width:736px) {
.coment_box {
font-size:15px;
}
}


/*==============================================
よくある質問
==============================================*/
.line_l,
.line_r{
    margin: 30px 0;
    padding: 0 20px;
    display:flex;
    justify-content: flex-start;
    align-items: flex-start; /*縦位置を上揃え*/
}

.line_r{
    justify-content:flex-end;
}

.faceicon img{
    width:70px; /*任意のサイズ*/
    min-width:70px;
    height: auto;
}

.line_r .faceicon{
    margin-left:25px;
}

.line_l .faceicon{
    margin-right:25px;
}

.line_r .faceicon{
    order:2 !important;
}
.says {
    max-width:400px; /*最大幅は任意*/
    /*min-height: 100px;*/
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding: 17px 13px 15px 18px;
    border-radius: 12px;
    background: #fff;/*色は任意*/
    box-sizing:border-box;
    margin:0 !important;
    line-height:1.5;
}

.says_q {
    color:#ee7489;
    background: #fff;
}

.says_a {
    background: #fff;
        color:#7f7f7f;
}

@media (max-width: 768px) {
    .says {
        font-size: 14px;
    }
}

.says p{
    margin:8px 0 0 !important; 
}

.says p:first-child{
    margin-top:0 !important;
}

.says:after {
    content: "";
    position: absolute;
    border: 10px solid transparent;
}

.line_l .says:after {
    left: -26px;
    border-right: 22px solid #fff;
}

.line_r .says:after {
    right: -26px;
    border-left: 22px solid #fff;
}

.hr_01 {
    width: 90%;
}

.inner_qa {
    margin: 0 auto;
    width: 100%;
    max-width: 1050px;
    position: relative;
}

.h2_line {
    text-align: center;
    margin: 0 auto;
    padding: 10px;
    background-color: #212b44;
    color: #fff;
}

.bg_line {
    background-color:#faeef1;
    padding:30px 0 30px 0;
    margin: 30px auto;
    max-width: 768px;
    border-radius:10px;
}