@charset "utf-8";
/*
* ベースカラーの設定 *
ヒアリングシートのベースカラーはここに設定してください
*/
:root {
--color01: #ff6c0e;
--color02: #069f2b;
--color03: #e45356;
--color04: #3a82bd;
--color05: #fcac00;
}
/*
Theme Name: portals_responsive
Author: portals
*/
/*==================================
* reset
* html5doctor.com Reset Stylesheet
* v1.6.1
* Last Updated: 2010-09-17
* Author: Richard Clark - http://richclarkdesign.com
* Twitter: @rich_clark
==================================*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
img {
vertical-align: top;
line-height: 0;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input, select {
vertical-align: middle;
}
address {
font-style: normal;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/*==================================
base
==================================*/
.clear {
clear: both;
}
.right {
text-align: right;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.img_left,
.img_right {
margin: 0 auto 16px;
}
.img_center {
display: block;
margin: 0 auto 16px;
}
.only_pc {
display: none;
}
img {
display: block;
margin: 0 auto;
width: auto;
max-width: 100%;
height: auto;
}
a:link {
color: #83a139;
}
a:visited {
color: #fcafa7;
}
a:hover {
color: #baea83;
}
a:active {
color: #baea83;
}
body {
overflow-x: hidden;
background: #fff;
color: #3a2b22;
font-size: 15px;
line-height: 1.5;
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif;
font-weight: 500;
}
@media screen and (min-width: 480px) {
.img_left,
.img_right {
	width: 40%;
}
.img_left {
	float: left;
	margin: 0 16px 16px 0;
}
.img_right {
	float: right;
	margin: 0 0 16px 16px;
}
}
@media screen and (min-width: 680px) {
.img_left,
.img_right {
	width: 40%;
}
.img_left {
	margin: 0 24px 24px 0;
}
.img_right {
	margin: 0 0 24px 24px;
}
.only_sp {
	display: none!important;
}
.only_pc {
	display: block;
}
a:hover img,
a:active img {
	-webkit-opacity: 0.7;
	opacity: 0.7;
}
body {
	width: 100%;
	font-size: 18px;
	line-height: 1.6;
}
}
@media screen and (min-width: 1364px) {
body {
	min-width: 1364px;
}
}
/*==================================
layout
==================================*/
#contents {
margin:24px auto;
width: 98%;
max-width: 1090px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.inner {
margin: 0 calc(50% - 50vw);
padding: 2em calc(50vw - 48%);
}
.inner_box {
margin: 0 calc(50% - 50vw);
padding: 0em calc(50vw - 48%) 2em;
}
.conts {
margin: 16px 12px;
}
.conts:after {
visibility: hidden;
display: block;
font-size: 0;
content: "";
clear: both;
height: 0;
}
.conts .conts_inner {
overflow: hidden;
}
.conts p:not([class]) {
margin-bottom: 8px;
}
.bnr {
margin: clamp(16px,5vw,56px) auto;
}
.ttl {
margin: clamp(20px,4.5vw,56px) auto;
}
/*色のみ変更すればチェックの色を変更可能*/
.bg01 {
background-color: #f1f7e3;
background-image: 
	linear-gradient(rgba(0, 0, 0, 0.09) 1px, transparent 0),
linear-gradient(90deg, rgba(0, 0, 0, 0.09) 1px, transparent 0);
background-size: 10px 10px;
}
/*iframeレスポンシブ*/
.contact_gmap, .youtube {
margin-top: 1em;
position: relative;
width: 100%;
padding-top: 56.25%;
}
.contact_gmap iframe,
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
@media screen and (min-width: 680px) {
.inner {
	padding: 5em calc(50vw - 48%);
}
.conts {
	margin: 24px;
}
.bnr {
	margin: clamp(16px,10vw,56px) auto;
}
.ttl {
	margin: clamp(20px,9vw,56px) auto;
}
}
@media screen and (min-width: 960px) {
#contents {
	margin: 40px auto;
}
}
.no_toppadding {
padding-top: 0;
}
.no_topmargin {
margin-top: 0;
}
.no_bottommargin {
margin-bottom: 0;
}
/*==================================
Header
==================================*/
#header {
position: relative;
z-index: 999999;
border-top: solid 12px #9dc834;
border-bottom: solid 2px #9dc834;
background: #fff;
}
.h_inner {
overflow: hidden;
margin: 0 auto;
padding: 8px 0 0;
width: 90%;
max-width: 400px;
box-sizing: border-box;
}
.h1 {
margin: 0 auto .2em;
font-weight: normal;
font-size: 13px;
box-sizing: border-box;
text-align: left;
}
.h_logo {
margin: 8px auto;
width: 96%;
}
@media screen and (min-width: 680px) {
#header {
	border-top: none;
	border-bottom: none;
	display: block;
	padding: 12px 0 0;
}
#header > * {
	width: auto;
}
.h1 {
	font-weight: bold;
	font-size: clamp(15px,3vw,23px);
}
.h_inner {
	width: 95%;
	max-width: 1364px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 0 8px 16px;
}
.h_logo_wrap {
	width: 50%;
}
.h_logo img {
	margin: 0;
}
.h_contact {
	margin: 0 0 8px 2em;
	width:45%;
	max-width: 400px;
}
.h_contact a {
	position: relative;
	display: block;
	padding: .2em;
	background: var(--color01);
	border: solid 3px var(--color01);
	color: #fff;
	font-size: clamp(20px,2.4vw,24px);
	font-weight: bold;
	letter-spacing: .1em;
	text-align: center;
	text-decoration: none;
box-shadow: 2.828px 2.828px 0px 0px rgba(197, 207, 215, 1);
	box-sizing: border-box;
	border-radius: 100px;
	transition: color .3s ease;
}
.h_contact a span {
	position: relative;
}
.h_contact a::before {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	background: #fff;
	transform: scaleX(0);
transform-origin: right;
	transition: all .3s ease;
	transition-property: transform;
	border-radius: 100px;
}
.h_contact a:hover {
	color: var(--color01);
}
.h_contact a:hover::before {
	transform: scaleX(1);
	transform-origin: left;
}
}
/*==================================
Navigation
==================================*/
nav {
width: 100%;
background: #fff;
-webkit-box-shadow: 0 5px 7px -2px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 7px -2px rgba(0, 0, 0, 0.2);
}
.gnav_sp {
width: 100%;
display: flex;
justify-content: space-around;
margin: 0 auto;
}
.gnav_sp li {
padding: 4px;
}
.gnav_sp li a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
color: #402a13;
font-weight: bold;
font-size: clamp(13px,2vw,18px);
text-align: center;
text-decoration: none;
}
.gnav_sp li a::before {
content: '';
display: block;
width: min(10vw,54px);
height: min(10vw,54px);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.gnav_sp li.gnav_sp_contact a::before {
background-image: url(image/mail_btn_icon.png);
}
.gnav_sp li.gnav_sp_price a::before {
background-image: url(image/price_btn_icon.png);
}
.gnav_sp li.gnav_sp_site a::before {
background-image: url(image/home_btn_icon.png);
}
.gnav_sp li.gnav_sp_access a::before {
background-image: url(image/access_btn_icon.png);
}
.fixed {
position: fixed;
top: 0;
z-index: 999999;
}
.fixed .gnav_sp {
border-bottom: solid 2px #9dc834;
}
/*ページ内リンク対策 グローバルナビの飛び先をセレクタに追加してください*/
#price, #contact, #reason, #differ, #method {
margin-top: -128px;
padding-top: 128px;
}
@media screen and (min-width: 480px) {
#header .fixed {
	width: 100%;
	top: 0;
	left: 0;
}
}
@media screen and (min-width: 680px) {
ul.gnav_pc {
	display: flex;
	margin: 0 auto;
	max-width: 1240px;
}
ul.gnav_pc li {
	flex-grow: 1;
	box-sizing: border-box;
}
ul.gnav_pc li a {
	display: block;
	padding: .5em 0;
	color: inherit;
	font-size: clamp(16px,2.5vw,22px);
	text-decoration: none;
	text-align: center;
}
ul.gnav_pc li {
	position: relative;
}
ul.gnav_pc li::before,.gnav_pc li:last-child::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	transform: translatey(-50%);
	width: 0;
	padding-top: 2em;/*区切り線の長さ*/
	border-left: solid 1px #3a2b22;/*区切り線の色*/
	box-sizing: border-box;
}
ul.gnav_pc li::before {
	left: 0;
}
ul.gnav_pc li:last-child::after {
	right: 0;
}
}
/*==================================
mainimg
==================================*/
.main_img {
position: relative;
display: block;
margin: 0 auto 1em;
width: 100%;
background: #fff7f5;
box-shadow: 0px 7px 10px 0px rgba(49, 43, 43, 0.15);
}
.main_img_icons ul {
display: flex;
justify-content: center;
}
.main_img_icons ul li {
display: flex;
flex-direction: column;
justify-content: center;
margin: .4em .4em 1em;
padding: .5em 0;
width: 30%;
background: rgba(120, 172, 6, 0.8);
border: solid 1px #fff;
box-shadow: 0 0 0 .3em rgba(120, 172, 6, 0.8);
text-align: center;
color: #fff;
border-radius: .2em;
font-size: clamp(13px,5vw,38px);
font-weight: bold;
line-height: 1.4;
}
.main_img_icons li::before {
content: '';
display: block;
margin: 0 auto 0.2em;
width: min(6vw,46px);
height: min(6vw,46px);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.main_img_icons li:first-child::before {
background-image: url(image/main_ico01.png);
}
.main_img_icons li:nth-child(2)::before {
background-image: url(image/main_ico02.png);
}
.main_img_icons li:last-child::before {
background-image: url(image/main_ico03.png);
}
@media screen and (min-width: 680px) {
.main_img_icons {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,-10%);
	margin: 0 auto;
	width: 98%;
	max-width: 1360px;
}
.main_img_icons ul {
	justify-content: flex-start;
}
.main_img_icons ul li {
	margin: .4em;
	padding: 0;
	width: 6em;
	height: 6em;
	border-radius: 50%;
	font-size: clamp(13px,2.1vw,28px);
}
.main_img_icons li::before {
	width: min(3vw,46px);
	height: min(3vw,46px);
}
}
/*==================================
heading
==================================*/
.heading01 {
position: relative;
margin: 0 calc(50% - 50vw) clamp(24px, 10vw, 100px);
padding: .5em calc(50vw - 49%);
background: var(--color01);
text-align: center;
font-size: clamp(18px, 4.3vw, 48px);
color: #fff;
}
.heading01::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-top: clamp(10px, 3vw, 35px) solid var(--color01);
border-left: clamp(17px, 5vw, 60px) solid transparent;
border-right: clamp(17px, 5vw, 60px) solid transparent;
}
/*6つの症状の見出し用　文字サイズ・色*/
.shoujou .heading01 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: .3em calc(50vw - 49%) .5em;
background: #9dc834;
line-height: 1.1;
font-size: clamp(17px, 4.3vw, 48px);
letter-spacing: -.05em;
}
.shoujou .heading01::before {
position: relative;
bottom: 0;
content: '';
display: block;
margin: -2em 0 -.9em;
width: 5.5em;
height: 5em;
background: url(image/heading_nayami_pic.png) no-repeat center bottom;
background-size: contain;
}
.shoujou .heading01::after {
border-top: clamp(10px, 3vw, 35px) solid #9dc834;
}
@-moz-document url-prefix() {
.shoujou .heading01 {
	line-height: 1.4;
}
}
.shoujou .heading01 .em01 {
display: contents;
font-size: 130%;
}
/*選ばれる理由の見出し用　文字サイズ・色*/
.reason .heading01 {
display: flex;
justify-content: center;
align-items: center;
padding: .3em calc(50vw - 49%) .5em;
background: #f6850e;
line-height: 1.1;
font-size: clamp(17px, 4vw, 46px);
letter-spacing: -.05em;
}
@-moz-document url-prefix() {
.reason .heading01 {
	line-height: 1.4;
}
}
.reason .heading01::after {
border-top: clamp(10px, 3vw, 35px) solid #f6850e;
}
.reason .heading01::before {
content: '';
display: block;
margin: -2em -.5em -.9em 0;
width: 5.5em;
height: 5em;
background: url(image/heading_reason_pic.png) no-repeat center bottom;
background-size: contain;
}
.reason .heading01 .em01 {
display: contents;
font-size: 130%;
}
@media screen and (min-width: 480px) {
.heading01 > br:not(.nostyle) {
	display: none;
}
}
@media screen and (min-width: 680px) {
.reason .heading01 br:not(.nostyle) {
	display: none;
}
.reason .heading01::before {
	margin: -2em -.5em -.5em 0;
}
}
/*マッサージとの違いの見出し用　文字サイズ・色*/
.differ .heading01 {
display: flex;
justify-content: center;
align-items: center;
padding: .3em calc(50vw - 49%) .5em;
line-height: 1.1;
font-size: clamp(17px, 4vw, 44px);
letter-spacing: -.03em;
}
.differ .heading01::before {
content: '';
display: block;
margin: -2em -1em -.5em 0;
width: 5.5em;
height: 5em;
background: url(image/heading_differ_pic.png) no-repeat center bottom;
background-size: contain;
}
@media screen and (min-width: 680px) {
.differ .heading01 br {
	display: none;
}
.differ .heading01::before {
	margin: -2em -1em -.5em 0;
}
}
/*施術方法の見出し用　文字サイズ・色*/
.method .heading01 {
background: #f6850e;
}
.method .heading01::after {
border-top: clamp(10px, 3vw, 35px) solid #f6850e;
}
/*喜びの声用　文字サイズ・色*/
.voice .heading01 {
background: #9dc834;
}
.voice .heading01::after {
border-top: clamp(10px, 3vw, 35px) solid #9dc834;
}
/*h3用　文字サイズ・色*/
.heading02 {
position: relative;
margin: 2em auto;
padding: .5em .5em 1em;
text-align: center;
font-size: clamp(16px,4vw,47px);
}
@media screen and (min-width: 680px) {
.method .heading02 br {
	display: none;
}
}
.heading02::after {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: block;
content: '';
width: 3em;
height: 5px;
background-size: 4px 4px;
background-image: linear-gradient(-45deg, #ec6941 25%, transparent 25%, transparent 50%, #ec6941 50%, #ec6941 75%, transparent 75%, transparent);
}
/*問い合わせh4*/
.heading03 {
margin: 0 auto .5em;
padding-left: .4em;
font-size: clamp(18px,3vw,38px);
border-left: solid .4em #ff893e;
}

/*==================================
6つの症状
==================================*/
.shoujou_list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.shoujou_list li {
margin: 8px 0;
padding: .8em;
width: 48%;
border: solid 3px #9dc834;
border-radius: 10px;
background-color: #fff;
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
box-sizing: border-box;
font-size: clamp(11px,2.4vw,22px);
font-weight: bold;
color: #9dc834;
text-align: center;
line-height: 1.4;
box-sizing: border-box;
text-shadow: 
		2px  2px 1px #ffffff,
	-2px  2px 1px #ffffff,
	2px -2px 1px #ffffff,
	-2px -2px 1px #ffffff,
	2px  0px 1px #ffffff,
	0px  2px 1px #ffffff,
	-2px  0px 1px #ffffff,
	0px -2px 1px #ffffff;  
}
.shoujou_list li > * {
margin: 0 0 0 auto;
}
.shoujou_list li > p:first-child {
font-size: 150%;
color: #0b0b0a;
max-width: 8em;
}
.shoujou_list li > p:last-child {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 4.2em;
max-width: 10em;
}
/*慢性腰痛*/
.shoujou_list li:first-child {
background-image: url(image/shoujou_pic01.jpg);
}
/*ぎっくり腰*/
.shoujou_list li:nth-child(2) {
background-image: url(image/shoujou_pic02.jpg);
}
/*ヘルニア*/
.shoujou_list li:nth-child(3) {
background-image: url(image/shoujou_pic03.jpg);
}
/*坐骨神経痛*/
.shoujou_list li:nth-child(4) {
background-image: url(image/shoujou_pic04.jpg);
}
/*脊柱管狭窄症*/
.shoujou_list li:nth-child(5) {
background-image: url(image/shoujou_pic05.jpg);
}
/*産後の腰痛
産前の腰痛に変更するときは画像をshoujou_pic07.jpgに変更する*/
.shoujou_list li:last-child {
background-image: url(image/shoujou_pic06.jpg);
}
@media screen and (min-width: 480px) {
.shoujou_list li {
	padding: .8em .8em .8em 5em;
	border: solid 4px #9dc834;
}
.shoujou_list li > p:first-child {
	max-width: none;
}
.shoujou_list li > p:last-child {
	max-width: none;
}
}
@media screen and (min-width: 680px) {
.shoujou_list li {
	padding: .8em .8em .8em 7em;
	border: solid 5px #9dc834;
	font-size: clamp(15px,2vw,22px);
	background-size: contain;
}
.shoujou_list li > p:first-child {
	font-size: 200%;
}
}
.shoujou_txt01 {
margin: 1em auto;
text-align: center;
font-weight: bold;
font-size: clamp(15px,4vw,22px);
}
.shoujou_txt01 .em01 {
font-size: 120%;
}
@media screen and (min-width: 480px) {
.shoujou_txt01 br {
	display: none;
}
}
@media screen and (min-width: 680px) {
.shoujou_txt01 {
	font-size: clamp(22px,3.8vw,46px);
}
}

/*==================================
選ばれる理由
==================================*/
.reason_list {
counter-reset: reason_list;
}
.reason_list li {
padding: clamp(12px,4vw,48px) 0;
border-bottom: dotted 4px #b5b5b5;
}
.reason_list h3 {
position: relative;
margin: 0 auto .5em;
font-size: clamp(18px,3vw,43px);
}
.reason_list h3::before,
.reason_list h3::after {
position: absolute;
top: 50%;
color: #ff5325;
font-weight: bold;
}
.reason_list h3::before {
transform: translateY(-40%);
content: '理由';
font-size: 54.54%;
}
.reason_list h3::after {
transform: translateY(-50%);
left: 1em;
counter-increment: reason_list;
content: '0'counter(reason_list);
font-size: 140%;
}
.reason_h3_inner {
position: relative;
display: block;
padding: 0 0 0 3.8em;
line-height: 1.2;
}
.reason_h3_inner::before {
position: absolute;
top: 50%;
left: 3.3em;
transform: translateY(-50%);
content: '';
display: block;
width: .15em;
height: 1.5em;
background: #312b2b;
border-radius: 2.5px;
}
.reason_inner {
overflow: hidden;
}
@media screen and (min-width: 1240px) {
.reason_conts {
	overflow: hidden;
}
}

/*==================================
マッサージとの違い
==================================*/
.scroll-box table {
max-width:initial;
}
.scroll-box {
overflow-x: auto;
margin-bottom:10px;
}
.scroll-box::-webkit-scrollbar {
height: 5px;
}
.scroll-box::-webkit-scrollbar-track {
border-radius: 5px;
-webkit-border-radius: 5px; 
-moz-border-radius: 5px;
background: #f3f3f3;
}
.scroll-box::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: #ccc;
}
.differ_table {
table-layout: fixed;
width: 100%;
min-width: 640px;
}
.differ_table tbody > tr > * {
padding: .5em;
border: solid 6px #fff;
vertical-align: middle;
text-align: center;
font-size: clamp(14px,2.5vw,18px);
}
.differ_table tbody > tr > th {
font-size: clamp(15px,3vw,28px);
line-height: 1.3;
}
.differ_table tbody > tr > td {
padding: 1em .5em;
}
.differ_table tbody > tr:first-child > * {
border-radius: 20px 20px 0 0;
}
.differ_table tbody > tr > :first-child {
background: #f4f4f4;
width: 8em;
}
.differ_table tbody > tr > :nth-child(2) {
background: #e6e6e6;
}
.differ_table tbody > tr > :last-child {
background: #ffe3cf;
}
.differ_table tbody > tr > td br{
display: none;
}
span.differ_table_hb {
display: block;
font-size: 75.57%;
}
.differ_table tbody > tr > :nth-child(2) .em01 {
color: #085292;
font-weight: bold;
}
.differ_table tbody > tr > :last-child .em01 {
color: #a61232;
font-weight: bold;
}
.tri::before, .cir::before, .dcir::before {
display: block;
font-size: 350%;
line-height: 1;
}
.tri::before {
color: #085292;
content: '△';
font-weight: bold;
}
.cir::before {
content: '〇';
color: #a61232;
}
.dcir::before {
content: '◎';
color: #a61232;
font-weight: bold;
}
.differ_table_notes {
font-size: 13px;
text-align: right;
}
@media screen and (min-width: 480px) {
.differ_table {
	min-width: auto;
}
.differ_table_notes {
	display: none;
}
	.differ_table tbody > tr > td br{
display: block;
}
}
@media screen and (min-width: 1240px) {
.differ_table tbody > tr > * br{
	display: inline;
}
}

/*==================================
施術方法
==================================*/
.method {
background: #fffde1;
}
.inside_pic {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.inside_pic li {
padding-bottom: .5em;
}
.inside_pic > * {
width: 100%;
}
.inside_pic figcaption {
text-align: center;
}

/*==================================
3つのメリット
==================================*/
.merit {
background: #fffde1;
}
.merit_box {
margin: 0 auto;
padding: clamp(24px,5vw,80px) clamp(12px,4vw,40px);
width: 98%;
background: #fff;
box-sizing: border-box;
}
.merit_box h2 {
margin-top: 0;
}
.merit_list {
counter-reset: merit_list;
}
.merit_list li {
position: relative;
padding: clamp(12px,4vw,48px) .8em;
}
.merit_list li::after {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: block;
content: '';
width: 100%;
height: 4px;
background-size: 4px 4px;
background-image: linear-gradient(-45deg, #ec6941 25%, transparent 25%, transparent 50%, #ec6941 50%, #ec6941 75%, transparent 75%, transparent);
}
.merit_list h3 {
padding: 0 0 0 3.2em;
position: relative;
font-size: clamp(20px,4vw,42px);
color: #ff5325;
}
.merit_list h3::before,
.merit_list h3::after {
position: absolute;
display: block;
top: 50%;
transform: translateY(-50%);
}
.merit_list h3::after {
left: .45em;
content: 'merit';
color: #312b2b;
font-size: 63.82%;
}
.merit_list h3::before {
left: 1.8em;
counter-increment: merit_list;
content: '0'counter(merit_list);
width: 1.5em;
height: 1.5em;
background: #fbc80d;
text-align: center;
line-height: 1.4;
color: #fff;
font-size: 89.36%;
border-radius: 50%;
}
.merit_inner {
margin: 1em auto 0;
overflow: hidden;
}
@media screen and (min-width: 480px) {
.merit_list h3 > br {
display: none;
}
.inside_pic {
flex-direction: row;
}
.inside_pic > * {
width: 32%;
}
}
@media screen and (min-width: 1240px) {
.merit_box {
	margin: 0 -80px;
	padding: 72px 80px;
	box-sizing: content-box;
}
.merit_conts {
	overflow: hidden;
}
}

/*==================================
喜びの声
==================================*/
.voice_wrapper {
position: relative;
z-index: 10;
}
.voice {
position: relative;
z-index: -2;
background: #e1eec2;
}
.voice_list li {
margin: 16px auto;
position: relative;
padding: 3%;
background-color: #fff;
box-sizing: border-box;
}
.voice_list li::before {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 4px;
left: 4px;
background-size: 4px 4px;
background-image: linear-gradient(-45deg, #9dc834 25%, transparent 25%, transparent 50%, #9dc834 50%, #9dc834 75%, transparent 75%, transparent);
}
.voice_ttl {
margin: .8em auto;
font-size: clamp(18px,2.5vw,22px);
font-weight: bold;
line-height: 1.3;
color: #ec6941;
}
.voice_txt {
margin: 1.5em auto 0;
z-index: 1;
position: relative;
font-size: 13px;
}
.voice_txt::before {
z-index: -1;
position: absolute;
top: -.3em;
left: -.1em;
font-family: "Font Awesome 5 Free";
font-weight: 900;
display: inline-block;
content: '\f10d';
font-size: clamp(24px,5vw,70px);
color: #ffd9ce;
line-height: 1;
}
.menseki {
margin: 1em auto 0;
font-size: 13px;
text-align: right;
color: #f66b12;
}
@media screen and (min-width: 480px) {
.voice_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.voice_list li {
	width: 48%;
}
}
@media screen and (min-width: 680px) {
.voice_list li {
	width: 32%;
}
}

/*==================================
施術の流れ
==================================*/
.flow_wrapper {
position: relative;
z-index: 10;
}
.flow {
position: relative;
z-index: -2;
background: #fff6e7;
}
.flow_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
counter-reset: flow_list;
flex-direction: column;
}
.flow_list li {
position: relative;
margin: 1.5em auto;
width: 100%;
}
.flow_list li > :first-child {
position: absolute;
z-index: 100;
top: 0;
left: 50%;
transform: translate(-50%,-50%);
padding: .1em 0;
width: 95%;
max-width: 250px;
background: #ff761d;
color: #fff;
font-size: clamp(20px,3vw,23px);
font-weight: bold;
text-align: center;
border-radius: 100px;
}
.flow_list li > :first-child::before {
counter-increment: flow_list;
content: counter(flow_list)'.';
}
.flow_list li figure {
position: relative;
}
.flow_list li figure::before {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 4px;
left: 4px;
background-size: 4px 4px;
background-image: linear-gradient(-45deg, #ec6941 25%, transparent 25%, transparent 50%, #ec6941 50%, #ec6941 75%, transparent 75%, transparent);
}
.flow_list li > :last-child {
padding: .5em;
font-size: 15px;
}
@media screen and (min-width: 480px) {
.flow_list li > :first-child {
	width: 90%;
}
.flow_list {
flex-direction: Row ;
}
.flow_list li {
width: 48%;
}
}
@media screen and (min-width: 680px) {
.flow_list li {
	width: 32%;
}
}

/*==================================
院長挨拶・保有資格
==================================*/
/*必要に応じて画像横幅指定*/
.greet .img_left {
width: 60%;
max-width: 314px;
}
.greet_txt {
margin-top: 1em;
}
.greet_txt_main {
font-size: clamp(18px,3.5vw,35px);
font-weight: bold;
line-height: 1.2;
}
.greet_txt_main + p {
margin-top: 1em;
}
@media screen and (min-width: 480px) {
.greet .img_left {
	width: 40%;
}
}
@media screen and (min-width: 680px) {
.greet_txt {
	margin-top: 0;
}
}
@media screen and (min-width: 1240px) {
.greet_txt {
	overflow: hidden;
}
}
.cert_pic {
display: flex;
justify-content: space-around;
align-items: center;
}

/*==================================
推薦の声
==================================*/
.recommend {
background: #fff6e7;
}
.recommend h2 {
margin-top: 0;
}
.recommend_box {
margin-top: 2em;
padding: 2em .8em;
border-top: solid 5px #9a7826;
border-bottom: solid 5px #9a7826;
background: #fff;
}
/*必要に応じて画像横幅指定*/
.recommend_box .img_left {
width: 60%;
max-width: 314px;
}
.recommend_txt {
margin-top: 1em;
}
.recommend_txt_main {
display: flex;
justify-content: center;
align-items: center;
padding: .8em .5em;
border-top: solid 3px #9a7826;
border-bottom: solid 3px #9a7826;
font-size: clamp(18px,3.5vw,35px);
font-weight: bold;
line-height: 1.2;
color: #9e7c28;
}
.recommend_txt_main + p {
margin-top: 1em;
}
.recommend_txt_main::before {
content: '';
display: block;
width: 5em;
height: 2em;
background: url(image/recommend_mark.png) no-repeat center center;
background-size: contain;
}
@media screen and (min-width: 480px) {
.recommend .img_left {
	width: 40%;
}
}
@media screen and (min-width: 680px) {
.recommend_txt {
	margin-top: 0;
}
}
@media screen and (min-width: 1240px) {
.recommend_txt {
	overflow: hidden;
}
}

/*==================================
メディア掲載
==================================*/
.media h2 {
margin-top: 0;
}
.media_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.media_list li {
position: relative;
margin: 1.5em auto;
width: 48%;
}
.media_list li > :last-child {
margin-top: 1em;
color: #3b1c00;
font-size: 16px;
}
@media screen and (min-width: 680px) {
.media_list li {
	width: 32%;
}
}

/*==================================
地域貢献活動
==================================*/
.contrib {
background: #fffde1;
}
.contrib h2 {
margin-top: 0;
padding-bottom: 1em;
line-height: 1.3;
}
.contrib_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contrib_list li {
position: relative;
margin: 1.5em auto;
width: 48%;
max-width: 360px;
}
.contrib_list li > :last-child {
padding: 0 .5em;
color: #3b1c00;
font-size: 16px;
}
@media screen and (min-width: 680px) {
.contrib_list li {
	width: 32%;
}
}

/*==================================
お問合せ
==================================*/
/*共通*/
/*お問合せボタン共通スタイル*/
.contact_tel, .contact_line, .contact_net {
color: inherit;
text-decoration: none;
border-radius: 10px;
box-sizing: border-box;
}
.contact_tel a,  .contact_line a, .contact_net a {
color: inherit;
text-decoration: none;
text-align: center;
font-weight: bold;
}
/*横並びにしたときに高さをそろえるためliに色や線を設定*/
.contact_tel {
border: solid 1px #413028;
background: #fff;
box-shadow: 0 5px 0 #413028;
}
.contact_line {
color: #fff;
background: #3cab00;
box-shadow: 0 5px 0 #2c7d00;
}
.contact_net {
color: #fff;
background: var(--color01);
box-shadow: 0 5px 0 #cc5000;
}
.contact_tel a::before, .contact_line a::before, .contact_net a::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
display: inline-block;
}
.contact_tel a::before {
content: '\f095';
margin-right: 4px;
width: 2em;
height: 2em;
line-height: 2em;
font-size: 80%;
color: #fff;
background: var(--color01);
border-radius: 50%;
}
.contact_line a::before {
margin-right: .5em;
padding-top: .1em;
content: '\f075';
transform: scale(-1,1);
}
@media screen and (min-width: 680px) {
.contact_tel:hover, .contact_line:hover, .contact_net:hover {
	opacity: 0.7;
}
}

/*オファーバナーの下のボタン*/
.offer_contact_bt {
margin: 1.5em auto;
}
.offer_contact_bt li {
margin: 12px auto;
}
.offer_contact_bt .contact_tel, .offer_contact_bt .contact_line, .offer_contact_bt .contact_net {
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px;
font-size: 24px;
}
.offer_contact_bt .contact_tel a, .offer_contact_bt .contact_line a, .offer_contact_bt .contact_net a {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
}
@media screen and (min-width: 480px) {
.offer_contact_bt {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.offer_contact_bt li {
	margin: 8px .5%;
	width: 32%;
	min-width: 190px;
}
}
@media screen and (min-width: 480px) {
.offer_contact_bt .contact_tel {
	font-size: clamp(19px,2.6vw,35px);
}
.offer_contact_bt .contact_line {
	font-size: clamp(22px,3.2vw,42px);
}
.offer_contact_bt .contact_net {
	font-size: clamp(22px,3.2vw,42px);
}
}

/*ボタン*/
.contact_bt {
margin: 1em auto 0;
max-width: 500px;
width: 98%;
}
.contact_bt li {
position: relative;
display: block;
margin: 8px auto;
text-decoration: none;
text-align: center;
}
.contact_bt li a::before {
position: absolute;
left: .5em;
top: 50%;
transform: translateY(-50%);
display: block;
text-align: center;
font-size: clamp(32px,10vw,52px);
}
/*電話ボタン*/
.contact_bt .contact_tel {
padding: .3em .1em .3em 1.7em;
font-size: clamp(32px,10vw,52px);
line-height: 1;
}
.contact_bt .contact_tel a::before {
left: .3em;
font-size: clamp(18px,8vw,36px);
}
.contact_bt .contact_tel a span {
display: block;
font-size: 52%;
}
/*LINEボタン*/
.contact_bt .contact_line {
padding: .2em .1em .2em 1.5em;
font-size: clamp(32px,8vw,39px);
line-height: 1;
}
.contact_bt .contact_line a::before {
transform: translateY(-50%) scale(-1,1);
}
/*Web予約ボタン*/
.contact_bt .contact_net {
padding: .2em .1em .2em 1.5em;
font-size: clamp(32px,8vw,39px);
line-height: 1;
}
@media screen and (min-width: 680px) {
.contact_bt li a::before {
	font-size: clamp(18px,5vw,52px);
}
/*電話ボタン*/
.contact_bt .contact_tel {
	font-size: clamp(18px,5vw,52px);
}
.contact_bt .contact_tel a::before {
	font-size: 70%;
}
/*LINEボタン*/
.contact_bt .contact_line {
	font-size: clamp(18px,4vw,39px);
}
/*Web予約ボタン*/
.contact_bt .contact_net {
	font-size: clamp(18px,4vw,39px);
}
}
@media screen and (min-width: 1240px) {
.contact_bt li.contact_tel a::before {
	left: .5em;
}
.contact_bt li:not(.contact_bt_d):not(.contact_tel) a::before {
	left: .8em;
}
}
/*予約ボタン横並び*/
.contact_bt {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contact_bt_s {
width: 100%;
}
.contact_bt_d {
width: 49%;
}
.contact_bt li.contact_bt_d a::before {
left: .3em;
width: 1.2em;
height: .95em;
font-size: clamp(28px,8vw,40px);
}
/*LINEボタン*/
.contact_bt li.contact_bt_d.contact_line {
font-size: clamp(22px,7vw,38px);
}
/*Web予約ボタン*/
.contact_bt li.contact_bt_d.contact_net {
font-size: clamp(22px,7vw,38px);
}
@media screen and (min-width: 680px) {
.contact_bt li.contact_bt_d a::before {
	font-size: clamp(28px,4vw,40px);
}
/*LINEボタン*/
.contact_bt li.contact_bt_d.contact_line {
	font-size: clamp(22px,3.5vw,36px);
}
/*Web予約ボタン*/
.contact_bt li.contact_bt_d.contact_net {
	font-size: clamp(22px,3.5vw,36px);
}
}

/*1院用*/
.contact_single_add {
margin: 1em auto;
}
@media screen and (min-width: 480px) {
.contact_single_add br {
	display: none;
}
}
@media screen and (min-width: 680px) {
.contact_single {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.contact_single > * {
	width: 48%;
}
.contact_single .contact_bt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
}
.contact_single ul.contact_bt li:first-child a {
	margin-top: 0;
}
.contact_single_add {
	margin: 2em auto;
	font-size: 20px;
	line-height: 1.4;
}
}
/*複数院用*/
.contact_multiple > li {
margin-top: 1.5em;
}
.contact_uketsuke_txt {
margin-top: 1em;
font-weight: bold;
font-size: clamp(15px,2vw,20px);
line-height: 1.2;
}
.contact_uketsuke_txt > p:first-child {
margin: 0 auto .5em;
padding: 0 1.5em .1em;
display: inline-block;
background: #362e2b;;
color: #fff;
}
.contact_multiple .contact_add {
margin-top: .5em;
padding-top: .5em;
border-top: dotted 1px #7c6754;
font-size: clamp(15px,2vw,20px);
line-height: 1.2;
}
@media screen and (min-width: 680px) {
.contact_multiple > li {
	margin-top: 2.5em;
}
.contact_multiple {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.contact_multiple > * {
	width: 48%;
	max-width: 554px;
}
.contact_multiple .contact_add {
	margin-top: 1em;
	padding-top: 1em;
}
}
@media screen and (min-width: 1240px) {
.contact_multiple {
	margin: 0 -80px;
}
.contact_multiple .contact_bt li a {
	max-width: 554px;
}
.contact_uketsuke_txt {
	margin-top: 1em;
}
}

/* 受付時間の表 */
table.contact_uketsuke {
margin: 2em auto;
width: 98%;
border-collapse: separate;
border-spacing: 0;
border-radius: 10px;
border: solid 2px #ff9326;
overflow: hidden;
box-sizing: border-box;
font-family: YuGothic, "Yu Gothic",-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue,  "Segoe UI", Verdana, Meiryo, sans-serif;
font-weight: 500;
}
.contact_uketsuke th,
.contact_uketsuke td {
padding: 12px 8px;
text-align: center;
vertical-align: middle;
font-size: clamp(13px,2.5vw,39px);
}
.contact_uketsuke td {
color: var(--color01);
}
.contact_uketsuke th:not(:first-child),
.contact_uketsuke td:not(:first-child) {
border-left: solid 2px #ff9326;
}
.contact_uketsuke tr:not(:first-child) th,
.contact_uketsuke tr:not(:first-child) td {
border-top: solid 2px #ff9326;
}
.contact_uketsuke tr:first-child > th {
background: #ff9326;
}
.contact_uketsuke tr > :first-child {
width: 7em;
}
/*==================================
Footer
==================================*/
.copyright {
border-top: solid 5px #ff5325;
background: #fff;
color: inherit;
text-align: center;
/* margin: 10% 0 20%; 下に固定ボタンを設置するときはコメントアウト解除してください。*/
}
.copyright small {
font-size: 1rem;
font-size: 10px;
}
@media screen and (min-width: 680px) {
.copyright {
	padding: 8px 0;
	margin: 0;
}
.copyright small {
	font-size: 14px;
}
.copyright a {
	color: inherit;
}
.copyright a:hover,
.copyright a:active {
	color: #baea83;
}
}