@charset "UTF-8";
/* sp(320px) */

/* からだラボ整骨院が取り上げられたメディア紹介 */
#media {
	padding-block: 0px 40px;
}
#media .hl_top span.s {
	display: block;
	font-size: 75%;
}
#media .box {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	column-gap: 0;
	row-gap: 2em;
	padding: 1.5em 1.4em;
}
#media #box_book2 {
	background-color: #fdfcd7;
}
#media #box_radio {
	border: 3px solid #fdfcd7;
}
#media .box .ttl {
	font-size: 17px;
	font-weight: bold;
	line-height: 1.4;
	color: #353535;

	display: grid;
	align-items: auto;
	justify-items: center;
}
#media .box .ttl span {
	position: relative;
}
#media .box .ttl span::after {
	content: '';
	border-block-start: 5px solid #4eaaf1;
	width: 2.2em;
	position: absolute;
	inset: auto auto -.3em -.1em;
}
#media #box_radio .ttl span::after {
	content: '';
	border-block-start: 5px solid #4eaaf1;
	width: 3.1em;
	position: absolute;
	inset: auto auto -.3em -.1em;
}

#media #box_book2 .intro {
	text-align: center;
}
#media #box_book2 .intro ul {
	inline-size: 100%;
}
#media #box_book2 .intro ul li {
	display: inline-block;
	inline-size: 29%;
}
#media #box_book2 .intro ul li:nth-child(-n+3) {
	margin-block-end: 1em;
}

#media #box_radio .intro ul {
	display: grid;
	grid-template-columns: 39% 57%;
	grid-template-rows: auto;
	column-gap: 2%;
	row-gap: 0;
	inline-size: 100%;
	margin-inline: auto;
}

/* 初めての方のご予約の流れ */
#reserve {
	padding-block: 40px 0;
}
#reserve .msg_top {
	margin-block-start: 1.6em;
	text-align: center;
}
#reserve .msg_top br {
	display: inline-block;
}
#reserve a.ban {
	display: block;
	max-inline-size: 930px;
	margin-inline: auto;
	margin-block-start: 1em;
}

#reserve .bal {
	display: grid;
	align-items: center;
	grid-template-rows: auto;
	column-gap: 16px;
	row-gap: 0;
	max-inline-size: 780px;
	margin-inline: auto;
}
#reserve .bal .txt {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.4;
	color: #2c2a2a;
	border-radius: .4em;
	padding: 1.2em 1.2em;
	position: relative;
}
#reserve .bal .txt br {
	display: inline-block;
}
#reserve #bal1 {
	grid-template-columns: 70px auto;
	margin-block-start: 2.5em;
}
#reserve #bal2 {
	grid-template-columns: auto 70px;
	margin-block-start: 1.0em;
}
#reserve #bal1 .txt {
	border: 2px solid #f4f4f4;
}
#reserve #bal2 .txt {
	border: 2px solid #fee1e7;
}
#reserve #bal1 .txt::before,
#reserve #bal1 .txt::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	border-style: solid;
	translate: -100% -50%;
}
#reserve #bal1 .txt::before {
	border-width: 10px 12px 10px 0;
	border-color: transparent #f4f4f4 transparent transparent;
}
#reserve #bal1 .txt::after {
	border-width: 7.4px 8.9px 7.4px 0;
	border-color: transparent #fff transparent transparent;
}
#reserve #bal2 .txt::before,
#reserve #bal2 .txt::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	border-style: solid;
	translate: 100% -50%;
}
#reserve #bal2 .txt::before {
	border-width: 10px 0 10px 12px;
	 border-color: transparent transparent transparent #fee1e7;
}
#reserve #bal2 .txt::after {
	border-width: 7.4px 0 7.4px 8.9px;
 	border-color: transparent transparent transparent #fff;
}

#reserve #bal1 .txt span {
	color: #4eaaf1;
}
#reserve #bal2 .txt span {
	color: #ff0036;
}
/* 質問事項 */
#reserve .ques {
	background-color: #fef4f6;
	padding: .8em 1.8em;
	max-inline-size: 780px;
	margin-inline: auto;
}
#reserve .ques li {
	display: grid;
	grid-template-columns: 12px auto;
	grid-template-rows: auto;
	column-gap: .6em;
	row-gap: 0;
	padding: .6em 0 ;
	border-block-end: 1px dotted #555454;
}
#reserve .ques li .icn img {
	position: relative;
	inset-block-start: .3em;
}
#reserve .ques li .txt .tl {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.4;
	color: #363a3a;
}
#reserve .ques p {
	margin-block-start: 1em;
}
#reserve .note {
	max-inline-size: 780px;
	margin-inline: auto;
}








@media handheld, print, screen and (min-width: 375px) {
/* iphone6 */


/* end of media query(iphone6) */	
}



@media handheld, print, screen and (min-width: 414px) {
/*  iPhone6 Plus */

/* end of media query(iPhone6 Plus) */	
}



@media handheld, print, screen and (min-width: 480px) {
/* tablet */

/* からだラボ整骨院が取り上げられたメディア紹介 */
#media .box .ttl {
	font-size: 22px;
}
#media #box_book2 .intro ul {
	width: 100%;
	margin-inline: auto;
}
#media #box_book2 .intro ul li {
	display: inline-block;
	inline-size: 19%;
}
#media #box_book2 .intro ul li:nth-child(-n+3) {
	margin-block-end: 0;
}

/* 初めての方のご予約の流れ */
#reserve .msg_top {
	margin-block-start: 1.6em;
	text-align: center;
}
#reserve .msg_top br {
	display: none;
}

#reserve .bal .txt {
	font-size: 18px;
}
#reserve .bal .txt br {
	display: none;
}
#reserve #bal1 {
	grid-template-columns: 80px auto;
}
#reserve #bal2 {
	grid-template-columns: auto 80px;
}

/* 質問事項 */
#reserve {
	padding-block: 50px 0;
}
#reserve .ques {
	padding: 1em 2.8em;
}
#reserve .ques li {
	grid-template-columns: 18px auto;
	column-gap: .6em;
	padding: .6em 0 ;
}
#reserve .ques li .icn img {
	inset-block-start: .4em;
}
#reserve .ques li .txt .tl {
	font-size: 15px;
}
#reserve .ques p {
	margin-block-start: 1.5em;
}

/* 質問事項 */
#reserve .ques li {
	grid-template-columns: 15px auto;
	column-gap: .5em;
}
#reserve .ques li .icn img {
	inset-block-start: .3em;
}
#reserve .ques li .txt .tl {
	font-size: 15px;
}


	@media (-webkit-min-device-pixel-ratio: 2){
		

	/* end of media query(retina) */	
	}

/* end of media query(tablet) */	
}



@media handheld, print, screen and (min-width: 620px) {
/* iPad */

/* からだラボ整骨院が取り上げられたメディア紹介 */
#media .box .ttl {
	font-size: 24px;
}

/* 初めての方のご予約の流れ */
#reserve {
	padding-block: 60px 0;
}
#reserve .bal {
	column-gap: 24px;
}
#reserve .bal .txt {
	font-size: 20px;
	padding: 1.2em 1.2em;
}
#reserve .bal .txt br {
	display: none;
}
#reserve #bal1 {
	grid-template-columns: 101px auto;
	margin-block-start: 2em;
}
#reserve #bal2 {
	grid-template-columns: auto 101px;
	margin-block-start: 1.2em;
}
#reserve #bal1 .txt {
	border: 3px solid #f4f4f4;
}
#reserve #bal2 .txt {
	border: 3px solid #fee1e7;
}
#reserve #bal1 .txt::before {
	border-width: 13px 18px 13px 0;
}
#reserve #bal1 .txt::after {
	border-width: 9.3px 12.9px 9.3px 0;
}
#reserve #bal2 .txt::before {
	border-width: 13px 0 13px 18px;
}
#reserve #bal2 .txt::after {
	border-width: 9.3px 0 9.3px 12.9px;
}

/* 質問事項 */
#reserve .ques {
	padding: 1em 2.8em;
}
#reserve .ques li {
	grid-template-columns: 16px auto;
	column-gap: .6em;
	padding: .6em 0 ;
}
#reserve .ques li .icn img {
	inset-block-start: .3em;
}
#reserve .ques li .txt .tl {
	font-size: 16px;
}
#reserve .ques p {
	margin-block-start: 1.5em;
}

/* end of media query(iPad) */	
}



@media handheld, print, screen and (min-width: 900px) {
/* pc */

/* からだラボ整骨院が取り上げられたメディア紹介 */
#media {
	padding-block: 0px 80px;
}
#media .box {
	grid-template-columns: 17% 83%;
	column-gap: 0;
	row-gap: 0;
	padding: 3.5em 2.8em;
}
#media #box_radio {
	padding: 1.0em 2.8em;
}
#media .box .ttl {
	font-size: 28px;
	align-items: center;
	justify-items: left;
}

/* 初めての方のご予約の流れ */
#reserve {
	padding-block: 80px 0;
}
#reserve .bal .txt {
	font-size: 22px;
}
#reserve #bal1 {
	margin-block-start: 4em;
}
#reserve #bal2 {
	margin-block-start: 1.8em;
}

/* 質問事項 */
#reserve .ques li {
	grid-template-columns: 18px auto;
	column-gap: .6em;
}
#reserve .ques li .icn img {
	inset-block-start: .4em;
}
#reserve .ques li .txt .tl {
	font-size: 18px;
}




/* end of media query(pc) */
}