@charset "utf-8";
/*
/////////////////////////////////////////////////////////////////////////////////////////////////////

	SP

-----------------------------------------------------------------------------------------------------
*/
@media screen and (max-width: 768px) {
	/* 痛み */
	.pain {
		padding: 0;
	}
	.pain .box {
		padding: 1rem;
		border-right: 6px solid #cecece;
		border-bottom: 6px solid #cecece;
		border-left: 6px solid #cecece;
		margin-top: -8px;
	}
	.pain .box .sp {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.pain .box .sp a {
		width: 49%;
		margin-bottom: 1rem;
	}
	.pain .box .sp img {
		width: 100%;
		height: auto;
	}
	/* スポーツ */
	.sports {
		padding: 0;
	}
	.sports .box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 1rem 2rem;
		margin-top: -10px;
		border-right: 10px solid #cecece;
		border-bottom: 10px solid #cecece;
		border-left: 10px solid #cecece;
	}
	.sports .box > div {
		width: 48%;
		margin-top: 1.5rem;
		padding: 1rem;
		border: 5px solid #ffe236;
		position: relative;
	}
	.sports .box > div a {
		display: flex;
		flex-direction: column;
	}
	.sports .box > div img {
		width: 100%;
		height: auto;
		margin-top: 1rem;
	}
	.sports h4 {
		font-size: 2rem;
		color: #764530;
		font-family: "M PLUS Rounded 1c";
		font-weight: 700;
		line-height: 1.2;
	}
	.sports h4 i {
		color: #f49600;
		margin-left: 0.5rem;
	}
	.sports .box > div:last-child {
		width: 100%;
		height: 70px;
		margin: 2rem auto 0;
		padding: 0;
		border: none;
		background: #f49600;
    border-radius: 10px;
		text-align: center;
		vertical-align: middle;
	}
	.sports .box > div:last-child h4 {
		color: #fff;
		vertical-align: middle;
		font-size: 2.5rem;
	}
	.sports .box > div:last-child h4 i {
		color: #fff;
		margin-left: 0.5rem;
	}
	.sports .box > div:last-child a {
		padding: 2rem 1rem;
		display: block;
		width: 100%;
		height: 100%;
		text-align: center;
	}
	/*.pain .box > div {
		margin-top: 2rem;
		padding: 1.5rem 2rem;
		height: 180px;
		border: 5px solid #ffe236;
	}
	.pain .neck {
		background: url("../images/top/bg_pain_neck.gif") no-repeat right bottom;
	}
	.pain .shoulder {
		background: url("../images/top/bg_pain_shoulder.gif") no-repeat right bottom;
	}
	.pain .waist {
		background: url("../images/top/bg_pain_waist.gif") no-repeat right bottom;
	}
	.pain .sports {
		background: url("../images/top/bg_pain_sports.gif") no-repeat right bottom;
	}
	.pain .knee {
		background: url("../images/top/bg_pain_knee.gif") no-repeat right bottom;
	}
	.pain .accident {
		background: url("../images/top/bg_pain_accident.gif") no-repeat right bottom;
	}
	.pain h3 {
		margin-bottom: -8px;
	}
	.pain h4 {
		font-size: 2.3rem;
		color: #764530;
		line-height: 1.2;
		margin-bottom: 1rem;
		text-shadow: 1px 1px #fff, -1px 1px #fff, -1px -1px #fff, 1px -1px #fff, 1px 0px #fff, 0px 1px #fff, -1px 0px #fff, 0px -1px #fff;
	}
	.pain ul {
		list-style-type: square;
		padding-left: 2rem;
		line-height: 1.4;
		text-shadow: 1px 1px #fff, -1px 1px #fff, -1px -1px #fff, 1px -1px #fff, 1px 0px #fff, 0px 1px #fff, -1px 0px #fff, 0px -1px #fff;
	}*/
	/* 相談 */
	.first {
		border: 5px solid #ffe236;
		padding: 2rem;
	}
	/* 推薦します */
	.recommend {
		border: 7px solid #cecece;
		padding: 2rem;
	}
	/* catch */
	#catch {
		background: url("../images/catch01_pc.jpg") no-repeat center;
		background-size: cover;
		height: 150px;
		display: flex;
    justify-content: center;
    align-items: center;
	}
	#catch h2 {
		text-align: center;
		font-size: 2.2rem;
		color: #fff;
		text-shadow: black 0 0 5px;
	}	
	/* 選ばれる理由・安心 */
	.reason > div {
		border: 7px solid #ffe236;
		padding: 2rem;
		background-size: 16px 16px;
		background-position: 50% 50%;
		background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 16px), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, #fff 1px, #fff 16px);
		margin-bottom: 3rem;
	}
	.anshin > div {
		border: 7px solid #BCD38A;
		padding: 2rem;
		background-size: 16px 16px;
		background-position: 50% 50%;
		background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 16px), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, #fff 1px, #fff 16px);
		margin-top: 2.5rem;
	}
	.reason > div p, .anshin > div p {
		margin-bottom: 1rem;
	}
	.reason h4 {
		font-size: 2rem;
		font-weight: 700;
		color: #f56705;
		margin-bottom: 1rem;
	}
	.anshin h4 {
		font-size: 2rem;
		font-family: "M PLUS Rounded 1c";
		font-weight: 700;
		color: #73a10b;
		margin-bottom: 1rem;
	}
	.reason h4 img, .anshin h4 img {
		width: 5rem;
		margin-right: 1rem;
		vertical-align: sub;
	}
	/* 院長の思い */
	.thought {
		border: 7px solid #ffe236;
		padding: 2rem;
	}
	/* 施術室 */
	.room {
		background: url("../images/top/bg_wood.jpg") repeat;
	}
	.inner {
		padding: 2rem 2rem 2rem;
	}
	/* 流れ */
	.flow > div {
		border-right: 10px solid #73a10b;
		border-bottom: 10px solid #73a10b;
		border-left: 10px solid #73a10b;
		padding: 2rem;
		margin-top: -8px;
	}
	.flow > div dl {
		margin-top: 2rem;
	}
	.flow > div dt img {
		width: 100%;
		height: auto;
	}
	.flow > div dd h4 {
		font-weight: bold;
		text-align: center;
		border-bottom: 1px solid #333;
		padding-bottom: 0.5rem;
		margin-bottom: 1rem;
	}
	/* 推薦の声 */
	.recommendBox > section {
		border: 7px solid #ffe236;
		padding: 1.5rem 2rem 2rem;
		background-size: 16px 16px;
		background-position: 50% 50%;
		background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 16px), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, #fff 1px, #fff 16px);
		margin-bottom: 5rem;
	}
	.recommendBox > section h4 {
		border-bottom: 2px solid #333;
		padding-bottom: 0.5rem;
		margin-bottom: 2rem;
		font-size: 2.2rem;
		text-align: center;
	}
	.recommendBox > section h4 img {
		width: 7%;
		margin-right: 1.5rem;
		vertical-align: bottom;
	}
	.recommendBox > section div {
		display: flex;
		flex-direction: column-reverse;
	}
	.recommendBox div img {
		width: 60%;
		height: auto;
		margin: 0 auto;
	}
	.recommendBox div p {
		margin-top: 2rem;
	}
	/* お客様の声 */
	/* お客様の声 */
	.voice > div {
		padding: 2rem;
		background: #ECECEC;
		margin-bottom: 5rem;
	}
	.voice img {
		width: 100%;
		height: auto;
	}
	.voice span {
		display: block;
		text-align: right;
		margin: 1rem 0;
	}
	.voice dl {
		margin: 1rem 0 3rem;
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 2rem;
	}
	.voice dt {
		border-bottom: 1px dotted #333;
		padding-bottom: 0.5rem;
		margin-bottom: 0.5rem;
		font-weight: bold;
	}
	.voice dd {
		margin-bottom: 3rem;
	}
	.voice dd:last-child {
		margin-bottom: 0;
	}
	.balloon {
		position: relative;
		background-color: #fff;
		border: #f49600 solid 2px;
		padding: 10px;
		text-align: center;
		color: #f56705;
		width: 100%;
		margin-bottom: 2.5rem;
		border-radius: 15px;
	}
	.balloon::before {
		content: '';
     position: absolute;
     display: block;
     z-index: 1;
     border-style: solid;
     border-color: #FFF transparent;
     border-width: 15px 15px 0 0;
     bottom: -10px;
     left: 50%;
     margin-left: -12px;
	}
	.balloon::after {
		content: '';
     position: absolute;
     display: block;
     z-index: 0;
     border-style: solid;
     border-color: #f49600 transparent;
     border-width: 15px 15px 0 0;
     bottom: -15px;
     left: 50%;
     margin-left: -14px;
	}
	.balloon p {
		margin: 0;
		padding: 0;
	}
	/* アクセス */
	.view {
	}
	.view dl {
		text-align: center;
		margin-top: 5rem;
	}
	.view dt {
		font-size: 2rem;
		font-weight: bold;
		margin-bottom: 1rem;
		color: #73a10b;
		border-bottom: 1px solid #73a10b;
	}
	.view img {
		width: 100%;
		height: auto;
	}
	.view span {
		font-size: 2.7rem;
		margin-right: 0.5rem;
		vertical-align: middle;
	}
	/* お知らせ */
	#newsBox > article {
		border: 1px solid #B3B3B3;
		padding: 2rem;
		margin: 5rem 0 0;
	}
	#newsBox h3 {
		border-bottom: 1px dotted #f49600;
		padding-bottom: 0.5rem;
		margin-bottom: 1rem;
		font-size: 1.8rem;
		color: #f56705;
	}
	#newsBox time {
		font-size: 1.4rem;
		display: block;
		text-align: right;
		line-height: 0;
	}
	#newsBox p {
		margin-bottom: 2rem;
	}
	#newsBox time::before {
		font-family: 'ForkAwesome';
		content: "\f017";
		padding-right: 0.5rem;
		font-size: 2.2rem;
		vertical-align: middle;
		color: #f56705;
	}
}
/*
/////////////////////////////////////////////////////////////////////////////////////////////////////

	PC

-----------------------------------------------------------------------------------------------------
*/
@media screen and (min-width: 769px) {
	main {
		width: 780px;
	}
	/* 痛み */
	.pain {
		padding: 0;
	}
	.pain .box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 1rem 2rem 3rem;
		border-right: 10px solid #cecece;
		border-bottom: 10px solid #cecece;
		border-left: 10px solid #cecece;
	}
	.pain .box > div {
		width: 350px;
		height: 190px;
		margin-top: 1.5rem;
		padding: 1.5rem 2rem;
		border: 5px solid #ffe236;
		position: relative;
	}
	.pain .box .sp {
		display: none;
	}
	.pain .neck {
		background: url("../images/top/bg_pain_neck.gif") no-repeat right bottom;
	}
	.pain .shoulder {
		background: url("../images/top/bg_pain_shoulder.gif") no-repeat right bottom;
	}
	.pain .waist {
		background: url("../images/top/bg_pain_waist.gif") no-repeat right bottom;
	}
	.pain .sports {
		background: url("../images/top/bg_pain_sports.gif") no-repeat right bottom;
	}
	.pain .knee {
		background: url("../images/top/bg_pain_knee.gif") no-repeat right bottom;
	}
	.pain .accident {
		background: url("../images/top/bg_pain_accident.gif") no-repeat right bottom;
	}
	.pain h3 {
		margin-bottom: -10px;
	}
	.pain h4 {
		font-size: 2.3rem;
		color: #764530;
		font-family: "M PLUS Rounded 1c";
		font-weight: 700;
		line-height: 1.2;
		margin-bottom: 1rem;
	}
	.pain h4 i {
		color: #f49600;
		margin-left: 0.5rem;
	}
	.pain .box a {
		color: #764530;
		position:absolute;
		display: block;
		width: 100%;
		height: 100%;
	}
	.pain ul {
		list-style-type: square;
		padding-left: 2rem;
		line-height: 1.4;
	}
	/* スポーツ */
	.sports {
		padding: 0;
	}
	.sports .box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 1rem 2rem 3rem;
		margin-top: -10px;
		border-right: 10px solid #cecece;
		border-bottom: 10px solid #cecece;
		border-left: 10px solid #cecece;
	}
	.sports .box > div {
		width: 350px;
		margin-top: 1.5rem;
		padding: 1rem;
		border: 5px solid #ffe236;
		position: relative;
	}
	.sports .box > div:last-child {
		width: 280px;
		height: 100px;
		margin: 8rem auto 0;
		padding: 0;
		border: none;
		background: #f49600;
    border-radius: 10px;
		text-align: center;
		vertical-align: middle;
	}
	.sports .box > div:last-child h4 {
		color: #fff;
		vertical-align: middle;
	}
	.sports .box > div:last-child h4 i {
		color: #fff;
		margin-left: 0.5rem;
	}
	.sports .box > div:last-child a {
		padding: 3.5rem 1rem;
		display: block;
		width: 100%;
		height: 100%;
		text-align: center;
	}
	.sports .box > div a {
		display: flex;
		flex-direction: column;
	}
	.sports .box > div img {
		width: 100%;
		height: auto;
		margin-top: 1rem;
	}
	.sports h4 {
		font-size: 2.3rem;
		color: #764530;
		font-family: "M PLUS Rounded 1c";
		font-weight: 700;
		line-height: 1.2;
	}
	.sports h4 i {
		color: #f49600;
		margin-left: 0.5rem;
	}
	/* 相談 */
	.first {
		background: url("../images/top/bg_first.jpg") no-repeat;
		background-size: cover;
		height: 305px;
		padding: 5.5rem 3rem 0;
	}
	.first p {
		width: 55%;
	}
	/* 推薦します */
	.recommend {
		background: url("../images/top/bg_recommend.jpg") no-repeat;
		background-size: cover;
		height: 295px;
		padding: 11rem 3rem 0;
	}
	.recommend p {
		width: 50%;
	}
	/* catch */
	#catch {
		background: url("../images/catch01_pc.jpg") no-repeat center;
		background-size: cover;
		height: 200px;
		display: flex;
    justify-content: center;
    align-items: center;
	}
	#catch h2 {
		text-align: center;
		font-size: 2.5rem;
		letter-spacing: 4px;
		color: #fff;
		text-shadow: black 0 0 5px;
	}	
	/* 選ばれる理由・4つの安心 */
	.reason > div {
		border: 10px solid #ffe236;
		padding: 2rem;
		background-size: 16px 16px;
		background-position: 50% 50%;
		background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 16px), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, #fff 1px, #fff 16px);
		margin-top: 2.5rem;
	}
	.anshin > div {
		border: 10px solid #BCD38A;
		padding: 2rem;
		background-size: 16px 16px;
		background-position: 50% 50%;
		background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 16px), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, #fff 1px, #fff 16px);
		margin-top: 2.5rem;
	}
	.reason > div div, .anshin > div div {
		display: flex;
		justify-content: space-between;
	}
	.reason > div p, .anshin > div p {
		width: 55%;
	}
	.reason > div div img, .anshin > div div img {
		width: 40%;
		height: 100%;
	}
	.reason h4 {
		font-size: 2.6rem;
		font-family: "M PLUS Rounded 1c";
		font-weight: 700;
		color: #f56705;
		margin-bottom: 1rem;
	}
	.anshin h4 {
		font-size: 2.6rem;
		font-family: "M PLUS Rounded 1c";
		font-weight: 700;
		color: #73a10b;
		margin-bottom: 1rem;
	}
	.reason h4 img, .anshin h4 img {
		margin-right: 1rem;
		vertical-align: sub;
	}
	/* 院長の思い */
	.thought {
		background: url("../images/top/bg_thought.jpg") no-repeat;
		background-size: cover;
		height: 329px;
		padding: 9rem 3rem 0;
	}
	.thought p {
		width: 58%;
	}
	/* 施術室 */
	.room {
		background: url("../images/top/bg_wood.jpg") repeat center top;
	}
	.inner {
		padding: 2rem 4rem 3rem;
	}
	/* 流れ */
	.flow > div {
		border-right: 10px solid #73a10b;
		border-bottom: 10px solid #73a10b;
		border-left: 10px solid #73a10b;
		padding: 2rem;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: -10px;
	}
	.flow > div dl {
		width: 31%;
	}
	.flow > div dl:nth-child(-n+3) {
		margin-bottom: 2rem;
	}
	.flow > div dt img {
		width: 100%;
		height: auto;
	}
	.flow > div dd h4 {
		font-weight: bold;
		text-align: center;
		border-bottom: 1px solid #333;
		padding-bottom: 0.5rem;
		margin-bottom: 1rem;
	}
	.flow > div dd p {
		font-size: 1.4rem;
		line-height: 1.4;
	}
	/* 推薦の声 */
	.recommendBox > section {
		border: 10px solid #ffe236;
		padding: 1.5rem 3rem 3rem;
		background-size: 16px 16px;
		background-position: 50% 50%;
		background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 16px), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, #fff 1px, #fff 16px);
		margin-bottom: 5rem;
	}
	.recommendBox > section div {
		display: flex;
		justify-content: space-between;
		
	}
	.recommendBox > section div img {
		width: 35%;
		margin-left: 8%;
	}
	.recommendBox > section h4 {
		border-bottom: 2px solid #333;
		padding-bottom: 0.5rem;
		margin-bottom: 2rem;
		font-size: 2.5rem;
	}
	.recommendBox h4 img {
		width: 5%;
		margin-right: 1.5rem;
		vertical-align: bottom;
	}
	/* お客様の声 */
	.voice > div {
		padding: 2.5rem;
		background: #ECECEC;
		margin-bottom: 5rem;
	}
	.voice img {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
	.voice span {
		display: block;
		text-align: right;
		margin: 1rem 0;
	}
	.voice dl {
		margin: 1rem 0 3rem;
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 2rem;
	}
	.voice dt {
		border-bottom: 1px dotted #333;
		padding-bottom: 0.5rem;
		margin-bottom: 0.5rem;
		font-weight: bold;
	}
	.voice dd {
		margin-bottom: 3rem;
	}
	.voice dd:last-child {
		margin-bottom: 0;
	}
	.balloon {
		position: relative;
		background-color: #fff;
		border: #f49600 solid 2px;
		padding: 10px;
		text-align: center;
		color: #f56705;
		width: 100%;
		margin-bottom: 2.5rem;
		font-size: 2rem;
		border-radius: 15px;
	}
	.balloon::before {
		content: '';
     position: absolute;
     display: block;
     z-index: 1;
     border-style: solid;
     border-color: #FFF transparent;
     border-width: 15px 15px 0 0;
     bottom: -10px;
     left: 50%;
     margin-left: -12px;
	}
	.balloon::after {
		content: '';
     position: absolute;
     display: block;
     z-index: 0;
     border-style: solid;
     border-color: #f49600 transparent;
     border-width: 15px 15px 0 0;
     bottom: -15px;
     left: 50%;
     margin-left: -14px;
	}
	.balloon p {
		margin: 0;
		padding: 0;
	}
	/* アクセス */
	.view {
		display: flex;
		justify-content: space-between;
		margin-top: 3rem;
	}
	.view dl {
		width: 32%;
		text-align: center;
	}
	.view dt {
		font-size: 1.8rem;
		font-weight: bold;
		margin-bottom: 1rem;
		color: #73a10b;
		border-bottom: 1px solid #73a10b;
	}
	.view img {
		width: 100%;
		height: auto;
	}
	.view span {
		font-size: 2.7rem;
		margin-right: 0.5rem;
		vertical-align: middle;
	}
	/* お知らせ */
	#newsBox > article {
		border: 1px solid #B3B3B3;
		padding: 3rem;
		margin: 5rem 0 0;
	}
	#newsBox h3 {
		border-bottom: 1px dotted #f49600;
		padding-bottom: 0.5rem;
		margin-bottom: 1rem;
		font-size: 1.8rem;
		color: #f56705;
	}
	#newsBox time {
		font-size: 1.4rem;
		display: block;
		text-align: right;
		line-height: 0;
	}
	#newsBox p {
		margin-bottom: 2rem;
	}
	#newsBox time::before {
		font-family: 'ForkAwesome';
		content: "\f017";
		padding-right: 0.5rem;
		font-size: 2.2rem;
		vertical-align: middle;
		color: #f56705;
	}
}