@charset "utf-8";

/* ======================================
2021/2/18 added by tsuji
======================================== */

/* --------------- WP 基本テーブル 内容 --------------- */

.table-bordered th {
	background-color: #3472B7;
	color:#fff;
}
.table-bordered th, .table-bordered td {
	border: 1px solid #E0EFFF;
}

/* --------------- 鍼・きゅう治療 --------------- */

.box01 {
	color:#3472B7;
    padding: 30px 10px;
    margin: 2em 0;
    background: #f0f7ff;
	border-radius: 10px;
	border: #3472b7 solid 1px;
}

/* --------------- はっとり整骨院とは --------------- */

.box02 {
    position: relative;
    padding: 25px 10px;
    margin: 15px 0 10px;
    background: #e6f4ff;
    color: #5c98d4;
    font-weight: bold;
	border-radius: 10px;
}
.box02:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #e6f4ff;
    width: 0;
    height: 0;
}

.box03 {
    position: relative;
    margin: 25px 0 10px;
    padding: 25px 20px 10px 20px;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box03 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}

.btn01,a.btn01 {
  color: #fff;
  background-color: #3472B7;
  padding:15px 35px;
  text-decoration: none;
  border-radius: 25px;
}
.btn01:hover,a.btn01:hover{
  color: #3472B7;
  background: #fff;
  border: solid 2px #3472B7;
  text-decoration: none;
  font-weight:bold;
}

.box04 {
    position: relative;
    padding:0.25em 1em;
	margin:30px 100px 35px;
	font-size:20px;
}
.box04:before,.box04:after{ 
    content:'';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;

}
.box04:before{
    border-left: solid 2px #3472B7;
    border-top: solid 2px #3472B7;
    top:0;
    left: 0;
}
.box04:after{
    border-right: solid 2px #3472B7;
    border-bottom: solid 2px #3472B7;
    bottom:0;
    right: 0;
}

.h-backpattern{
	padding: 40px 0px 50px;
	background: #F9F9F9;
	border: solid 2px #E5E5E5;
	margin:10px 0 ;
}


/* --------------- お客様の声--------------- */

.v-backpattern{
	padding: 10px 20px 20px;
	background: #E0EFFF;
	border: solid 2px #3472B7;
	margin:10px 0 ;
}

/* --------------- 料金・施術の流れ--------------- */

.s-backpattern{
	padding: 10px 20px 20px 30px;
	border: solid 2px #3472B7;
	margin:10px 0 ;
	background:#eaf4ff;
}

/* --------------- よくあるご質問--------------- */

.acd-check{
    display: none;
}
.acd-label{
    background: #3472B7;
    color: #fff;
    display: block;
    margin-bottom: 1px;
    padding: 10px;
}
.acd-content{
    border: 1px solid #333;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
}
.acd-check:checked + .acd-label + .acd-content{
    height: 100%;
    opacity: 1;
    padding: 10px 20px 15px 20px;
    visibility: visible;
}

/* --------------- お悩み別メニュー--------------- */

.cp_tab *, .cp_tab *:before, .cp_tab *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_tab {
	margin: 1em auto;
}
.cp_tab > input[type='radio'] {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	background: none;
	-webkit-appearance: none;
	        appearance: none;
	display: none;
}
.cp_tab .cp_tabpanel {
	display: none;
}
.cp_tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child,
.cp_tab > input:nth-child(3):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(2),
.cp_tab > input:nth-child(5):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(3),
.cp_tab > input:nth-child(7):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(4),
.cp_tab > input:nth-child(9):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(5),
.cp_tab > input:nth-child(11):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(6),
.cp_tab > input:nth-child(13):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(7),
.cp_tab > input:nth-child(15):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(8){
	display: block;
}
.cp_tab > label {
	position: relative;
	display: inline-block;
	padding: 15px 50px;
	cursor: pointer;
	border: 1px solid transparent;
	border-bottom: 0;
	background:#3472B7;
	color:#fff;
	border-radius: 6px 6px 0 0;
}
.cp_tab > label:hover,
.cp_tab > input:focus + label {
	background:#fff;
	color:#3472B7;
	font-weight:bold;
}
.cp_tab > input:checked + label {
	margin-bottom: -1px;
	border-color: #cccccc;
	border-bottom: 1px solid #ffffff;/*背景色と同じ*/
	border-radius: 6px 6px 0 0;
}
.cp_tab .cp_tabpanel {
	padding: 0.5em 1em;
	border-top: 1px solid #cccccc;
}
@media (max-width: 480px) {
	.cp_tab {
		width: 100%;
		font-size: 0.8em;
	}
	.cp_tab label {
		padding: 0.5em;
	}
}