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

タブレット端末＜1024px以下＞

--------------------------------------------------------------- */
@media screen and (max-width:1024px) {
/* ---------------------------------------
共通
--------------------------------------- */
section {
margin: 14px auto;
}
/* ---------------------------------------
トップイメージ
--------------------------------------- */
#head-top {
position: relative;
background-size: contain;
padding-top: 50%;
}
#head-top .wrapper {
width: 100%;
min-width: auto;
min-height: auto;
position: absolute;
top: 0;
}
#head-top .wrapper .copyArea {
padding-left: 40px;
padding-top: 42px;
}
#head-top .wrapper .copyArea p {
font-size: 1.7vw;
}
#head-top .wrapper .copyArea p span.line04 {
line-height: 2.4rem;
}
/* トップイメージ内- 住所＆TEL表示
-------------------------------------- */
.box_wrapper {
max-width: 96%;
}
.addBox span.add {
margin: 0 auto;
display: inline-block;
}
.addBox span.open_time {
display: inline-block;
}
/* ---------------------------------------
ナビ
--------------------------------------- */
#top-head .inner {
width: 100%;
margin: 0;
display: block;
}
/* ロゴ
-------------------------------------- */
#top-head .inner h1 {
display: none;
}
#top-head {
position: relative;
margin-top: 0;
height: 56px;
top: 0
}
/* メニュー
-------------------------------------- */
#top-head.fixed #main-nav li.sp_only, #main-nav li.sp_only {
display: block;
}
nav {
width: 100%;
}
#top-head {
position: relative;
margin-top: 0;
height: 56px;
}
#top-head .inner {
width: 100%;
margin: 0;
display: block;
}
#top-head.fixed .telBlock {
display: none;
}
.stellarnav.mobile li.has-sub a span:after {
content: '';
margin-left: 0;
}
/*ホバーエフェクト設定*/
nav ul li a:before, nav ul li a:after {
position: absolute;
top: 2.8em;
content: "";
display: inline-block;
width: 0;
height: 2px;
background: none;
transition: inherit;
}
/*モバイル用TELマーク*/
/**.callme {
display: inline-block;
position: absolute;
top: 11%;
left: 1%;
}
.callme i {
display: inline-block;
font-size: 46px;
color: #f8b82d;
}**/
.callme p {
color: #f8b82d;
display: inline-block;
padding-left: 4px;
}
/* 第二階層ヘッダーメニュー　スライド固定時
-------------------------------------- */
#page_2nd #top-head.fixed .stellarnav.mobile .menu-toggle {
padding-top: 16px;
}
/*第二階層の場合*/
#page_2nd #top-head.fixed .inner {
margin: 0 auto;
}
/* --------------------------
コンテンツ
-------------------------- */
.contents {
width: 100%;
min-width: 100%;
}
/*ワンカラム用*/
.contents_wrapper {
width: 96%;
}
.sec_wrapper {
width: 96%;
padding: 80px 0 20px;
}
/* --------------------------
共通
-------------------------- */
.linkmore {
text-align: left;
padding-left: 2em;
text-indent: -1.6em;
line-height: 1rem;
}
h2.pt002 {
font-size: 138%;
line-height: 1.8rem;
}
h2.pt002::before {
width: 28px;
height: 28px;
}
h3.pt001 {
line-height: 1.8rem;
}
/* 新大阪整体院 院長あいさつ
-------------------------------------- */
.introBlock img {
width: auto;
float: none;
margin: 20px auto;
}
/* 施術・予約の流れ
-------------------------------------- */
.yoyakuBlock .wrapper, .sejutsuBlock .wrapper {
height: auto;
margin-bottom: 40px;
}
.nagareBlock img {
width: 90%;
border-width: 4px;
}
/* 施術料金
-------------------------------------- */
.fee_Block {
width: 80%;
margin: 10px auto;
padding: 22px 0;
flex-direction: column;
}
.fee_Block .l_block, .fee_Block .r_block {
width: 94%;
margin: 0 auto;
}
.fee_Block .l_block table {
margin: 0 auto;
}
.fee_Block .r_block p {
padding: 20px 10px;
}
/* 当院は最後まで諦めません
-------------------------------------- */
#nevergiveupArea img {
width: auto;
}
/* 当院で特に多い症例
-------------------------------------- */
ul.shojoList li img {
width: 140px;
}
/* ---------------------------------------
フッター
--------------------------------------- */
footer #container {
width: 98%;
min-width: auto;
}
footer .wrapper {
width: 98%;
}
footer .infoBlock {
padding-top: 10px;
border-bottom: #fff 1px dotted;
padding-bottom: 20px;
}
footer .infoBlock img {
width: auto;
}
#footer_bottom {
width: 98%;
}
.f_menu {
font-size: 75%;
}
/* 施術表
-------------------------------------- */
.sejutsu_hyo.large {
flex-direction: column;
}
.hyo_tit {
padding: 0;
margin: 0 auto;
width: 98%;
}
.hyo_tit p br.pc_only {
display: none;
}
.hyo_tit p {
top: inherit !important;
transform: none !important;
padding: 10px 0;
}
.sejutsu_hyo table {
width: 98%;
margin: 10px auto 0;
}
/* コピーライト
-------------------------------------- */
#footer_bottom {
min-width: 100%;
}
#footer_bottom_inner {
width: 100%;
}
#copyright {
font-size: 74%;
clear: both;
}
#copyright p {
padding: 0 10px 16px 0;
}
/* -------------------------------------------------

第二階層

------------------------------------------------- */
/* ---------------------------------------
共通設定
--------------------------------------- */
#page_2nd #top-head .inner {
margin: 0 auto;
}
#page_2nd #top-head.fixed .inner {
display: block;
}
#page_2nd .contents_inner {
width: 98%;
}
#main_cont {
width: calc(100% - 280px);
}
#page_2nd #header-info .infoArea {
width: 98%;
}
#header-info .infoArea .telArea {
padding-right: 0;
}
/* パンくず
-------------------------------------- */
#breadcrumb {
width: 96%;
}
h3.pt002 {
font-size: 113%;
}
/* ---------------------------------------
ヘッダーインフォエリア＜セカンドページ用＞
--------------------------------------- */
#header-info .infoArea {
-webkit-justify-content: center;
justify-content: center;
width: 100%;
z-index: 9999;
}
/* ---------------------------------------
第二階層ヘッダータイトル
--------------------------------------- */
#page_2nd .head_titArea h2 {
width: 100%;
font-size: 138%;
line-height: 1.6rem;
}
/* ---------------------------------------
お知らせ・ブログ一覧エリア
--------------------------------------- */
#infoArea #wrapper {
width: 96%;
}
/* ---------------------------------------
施術の特徴
--------------------------------------- */
.kaizen_reasonBlock img {
width: auto;
}
/* ---------------------------------------
料金
--------------------------------------- */
.yoyaku_line img {
width: auto;
}
/* ---------------------------------------
来院者の声
--------------------------------------- */
#page_2nd #voiceArea img {
width: auto;
}
/* ---------------------------------------
プロフィール
--------------------------------------- */
.leadBlock img {
width: 240px;
}
#page_2nd .profBlock img {
width: auto;
}
/* ---------------------------------------
腰痛
--------------------------------------- */
.reasonArea.yotsu h3.pt002 {
padding-left: inherit;
text-indent: inherit;
}
/* ---------------------------------------
サイドバー
--------------------------------------- */
/* 追従エリア非表示
-------------------------------------- */
#sidebar .infoArea_follow {
display: none !important;
}
/* ---------------------------------------
ブログ
--------------------------------------- */
span.catch img {
width: auto;
}
/* ---------------------------------------
サイトマップ
--------------------------------------- */
.wsp-pages-list, .wsp-shojo-types-list, .wsp-voices-list, .wsp-newss-list {
padding: 0 12px;
}
}
@media screen and (max-width:941px) {
/* トップイメージ内- 住所＆TEL表示
-------------------------------------- */
.box_wrapper {
margin: -60px auto 0;
}
.addBox {
padding: 12px 17px;
height: auto;
}
.telBox {
padding: 12px 20px;
height: auto;
}
.telBox span.txt {
font-size: 88%;
}
.telBox span.tel_num {
font-size: 163%;
}
}
/* ---------------------------------------------------------------

タブレット端末＜768px以下＞

--------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
/* ---------------------------------------
共通設定
--------------------------------------- */
br.sp768 {
display: block;
}
/* ---------------------------------------
トップイメージ
--------------------------------------- */
/* トップイメージ内のメインコピー
-------------------------------------- */
#head-top .wrapper .copyArea {
display: none;
}
/* トップイメージ内のコピー　スマホ用（スマホのみイメージ下に表示）
-------------------------------------- */
#top_copyArea {
display: block;
text-align: center;
margin: 30px auto 0;
}
#top_copyArea h2 {
line-height: 2.0rem;
letter-spacing: 1px;
margin-bottom: 10px;
font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
#top_copyArea h2 span.large {
font-size: 187.5%;
color: #d26000;
font-weight: bold;
}
#top_copyArea p.middle {
line-height: 1.6rem;
margin-bottom: 20px;
}
#top_copyArea p.last {
line-height: 1.6rem;
margin-bottom: 20px;
color: #d26000;
font-weight: bold;
font-size: 94%;
}
.leadcopy p {
font-size: 125%;
line-height: 2.2rem;
}
/* トップイメージ内- 住所＆TEL表示
-------------------------------------- */
.box_wrapper {
flex-direction: column;
margin: -20px auto 0;
}
.box_wrapper .telBox {
display: none;
}
.box_wrapper .addBox {
margin-right: 0;
}
.box_inner {
position: relative;
top: 0;
-moz-transform: inherit;
-webkit-transform: inherit;
-ms-transform: translateY(-55%);
transform: inherit;
}
/* 施術・予約の流れ
-------------------------------------- */
.nagareBlock {
flex-direction: column;
}
.nagareBlock img {
border-width: 8px;
}
.yoyakuBlock, .sejutsuBlock {
width: 96%;
}
.yoyakuBlock ul li, .sejutsuBlock ul li {
height: auto;
min-height: auto;
}
/* 施術料金
-------------------------------------- */
.fee_Block {
width: 98%;
}
/* 当院で特に多い症例
-------------------------------------- */
ul.shojoList li {
width: 34%;
}
ul.shojoList li img {
width: 100%;
padding: 0;
}
/* ---------------------------------------
お知らせ・ブログ一覧エリア
--------------------------------------- */
#infoArea #wrapper {
width: 100%;
flex-direction: column;
}
.newsList, .blogList {
width: 94%;
margin: 40px auto;
}
.newsList h4.tit {
position: relative;
}
.newsList ul {
margin-right: 0;
margin-left: 0;
}
.newsList ul li, .blogList ul li {
line-height: 1.4rem;
}
.newsList ul li span.date, .blogList ul li span.date {
display: block;
}
.blogList h4.tit {
position: relative;
}
.blogList ul {
margin-right: 0;
margin-left: 0;
}
/* ---------------------------------------
フッター
--------------------------------------- */
footer .wrapper {
flex-direction: column;
}
.infoBlock .info_wrapper {
background: none !important;
}
footer .infoBlock, footer .mapBlock {
width: 100%;
}
#footer_bottom_inner {
display: block;
padding: 46px 0 16px 0;
}
.f_menu {
width: 98%;
}
.f_menu ul li a {
margin-right: 0;
}
/* 施術表
-------------------------------------- */
.sejutsu_hyo.large .hyo_tit {
padding: 0;
}
.sejutsu_hyo.large .hyo_tit p {
position: inherit;
top: inherit;
transform: none;
}
/* コピーライト
-------------------------------------- */
#copyright p {
text-align: center;
padding: 30px 0 0 0;
}
/* -------------------------------------------------

第二階層

------------------------------------------------- */
/* ---------------------------------------
共通設定
--------------------------------------- */
#page_2nd .contents_inner {
flex-direction: column;
width: 96%;
}
#main_cont, #sidebar {
width: 100%;
}
/* ---------------------------------------
症状別メニュー
--------------------------------------- */
.shojoArea .shojoBlock {
width: 48%;
}
/* ---------------------------------------
サイドバー
--------------------------------------- */
#sidebar .infoArea img, #sidebar .infoArea img.side_hyo {
width: 80%;
}
}
/* ---------------------------------------------------------------

スマホ＜640px以下＞

--------------------------------------------------------------- */
@media only screen and (max-width: 640px) {
/* ---------------------------------------
共通設定
--------------------------------------- */
br.sp640 {
display: block;
}
img.pc {
display: none;
}
img.sp {
display: block;
}
h2.pt001 {
line-height: 2.0rem;
}
h2.pt002 {
font-size: 125%;
line-height: 1.6rem;
padding: 22px 0 16px 0;
}
/* プラグインのマップ表示設定
-------------------------------------- */
.sidemap .su-responsive-media-yes {
padding-bottom: 56.25% !important;
}
/* ---------------------------------------
パンくず
--------------------------------------- */
#breadcrumb {
margin: 0 auto 30px;
background: #F7FBFC;
padding: 28px 0;
width: 100%;
}
#breadcrumb ul {
margin-left: 10px;
}
/* ---------------------------------------
ヘッダーインフォエリア
--------------------------------------- */
#header-info .infoArea .telArea img.ekiten {
display: none;
}
/* ---------------------------------------
トップコピー　スマホ用（スマホのみ表示）
--------------------------------------- */
#top_copyArea h2 {
font-size: 100%;
line-height: 2.2rem;
letter-spacing: 1px;
}
/* 理由エリア
-------------------------------------- */
.kokorogakeBlock .wrapper {
flex-direction: column;
padding: 45px 30px 20px;
}
.kokorogakeBlock .imgBlock {
margin: 0 auto 20px;
}
.kokorogakeBlock .wrapper .txtArea {
margin-left: 0;
}
/* 喜びの声
-------------------------------------- */
.voiceBlock {
flex-direction: column-reverse;
}
#voiceArea .imgblock {
margin: 20px auto;
}
h3.voice {
font-size: 125%;
margin-bottom: 10px;
}
/* メディア掲載
-------------------------------------- */
.media_wrapper {
flex-direction: column;
}
#jissekiArea .imgBlock {
margin: 0 auto;
}
#jissekiArea .imgBlock img {
width: auto;
}
/* 当院で施術を受けられた方はこんな結果を手に入れています
-------------------------------------- */
#getArea ul.check_list {
font-size: 100%;
}
/* 流れエリア
-------------------------------------- */
.nagareBlock ul li p.shosai {
font-size: 75%;
}
.yoyakuBlock ul li p.koumoku::before {
width: 8px;
height: 15px;
margin-right: 8px;
}
.sejutsuBlock ul li p.koumoku::before {
width: 8px;
height: 15px;
margin-right: 8px;
}
/* 施術料金
-------------------------------------- */
.fee_Block .l_block table td {
display: block;
text-align: center;
margin: 10px auto;
}
/* 当院で特に多い症例
-------------------------------------- */
p.page_last_copy {
font-size: 125%;
line-height: 1.6rem;
}
/* 当院は最後まで諦めません
-------------------------------------- */
#nevergiveupArea img {
float: none;
margin: 0 auto 20px;
}
/* -------------------------------------------------

第二階層

------------------------------------------------- */
/* ---------------------------------------
共通設定
--------------------------------------- */
#page_2nd #header-info .infoArea {
display: block;
}
#header-info .infoArea .telArea {
text-align: center;
}
#page_2nd #header-info .logoBlock {
display: none;
}
#header-info .infoArea .telArea p.tel {
font-size: 138%;
}
/* ---------------------------------------
料金ページ
--------------------------------------- */
/* 予約の取り方
-------------------------------------- */
.howto_yoyaku .yoyaku_wrapper {
flex-direction: column;
}
.howto_yoyaku .yoyaku_wrapper p.setsumei img {
float: none;
margin: 0 auto 20px;
width: 180px;
}
/* 院内の様子
-------------------------------------- */
.appearBlock ul {
flex-direction: column;
}
.appearBlock ul li {
width: 100%;
padding: 0 0 10px;
}
/* ---------------------------------------
プロフィール
--------------------------------------- */
.leadBlock img {
width: 240px;
float: none;
margin: 0 auto 20px;
}
#page_2nd .profBlock img {
float: none;
margin: 0 auto 20px;
}
/* ---------------------------------------
初めての方へ
--------------------------------------- */
.fit img, .nonfit img {
display: none;
}
/* ---------------------------------------
施術の特徴
--------------------------------------- */
.kaizen_reasonBlock img {
float: none;
margin: 0 auto 20px;
}
/* ---------------------------------------
アクセス
--------------------------------------- */
.access_infoBlock ul li span.koumoku {
display: block;
width: 100%;
margin-bottom: 12px;
}
/* ---------------------------------------
子連れ整体
--------------------------------------- */
img.yubi {
display: none;
}
.anshinBlock .setsumeiBlock p.shosai {
font-size: 88%;
line-height: 1.4rem;
}
/* ---------------------------------------
サイドバー
--------------------------------------- */
#sidebar .infoArea img, #sidebar .infoArea img.side_hyo, #shojo_menu img {
width: 100%;
}
/* ---------------------------------------
ブログ
--------------------------------------- */
/* カテゴリー名
-------------------------------------- */
ul.post_meta li.cat_name a {
font-size: 75%;
padding: 5px 6px;
}
/* アイキャッチ画像
-------------------------------------- */
span.catch img {
width: 100%;
float: none;
margin: 0 auto 20px;
}
.blog_txt p {
line-height: 1.4rem;
font-size: 88%;
}
}
/* ---------------------------------------------------------------

スマホ＜490px以下＞

--------------------------------------------------------------- */
@media only screen and (max-width: 490px) {
/* ---------------------------------------
共通設定
--------------------------------------- */
img {
width: 100%;
height: auto;
max-width: 100%;
}
img.alignleft, img.alignright {
float: none;
margin: 0 auto 20px;
}
br.sp490 {
display: block;
}
h2.pt001 {
font-size: 125%;
line-height: 2.0rem;
}
.txtBlock p {
line-height: 1.8rem;
}
ul.check_list, ul.check_list_uline {
font-size: 100%;
padding-left: 26px;
}
/* ---------------------------------------
トップコピー　スマホ用（スマホのみ表示）
--------------------------------------- */
#top_copyArea p.middle {
line-height: 1.4rem;
font-size: 75%;
}
/* なかなか治らない慢性症状で悩んでいませんか？
-------------------------------------- */
.leadcopy p {
font-size: 113%;
line-height: 2.0rem;
}
/* 喜びの声
-------------------------------------- */
.voice_wrapper {
padding: 30px 20px;
}
h3.voice {
font-size: 100%;
line-height: 1.4rem;
margin-bottom: 10px;
}
p.name {
font-size: 88%;
line-height: 1.2rem;
}
.voiceBlock .txtBlock p {
font-size: 88%;
line-height: 1.6rem;
}
/* 施術・予約の流れ
-------------------------------------- */
.nagareBlock img {
border-width: 4px;
}
/* 当院で特に多い症例
-------------------------------------- */
ul.shojoList li {
width: 40%;
}
/* ---------------------------------------
フッター
--------------------------------------- */
footer .infoBlock .f_catch {
font-size: 138%;
}
footer .infoBlock p.tel {
font-size: 225%;
padding: 16px 0;
}
footer .infoBlock p.tel_copy {
font-size: 100%;
}
/* -------------------------------------------------

第二階層

------------------------------------------------- */
/* ---------------------------------------
共通設定
--------------------------------------- */
h2.pt002 {
font-size: 113%;
padding: 22px 0 16px 8px;
}
/* ---------------------------------------
初めての方へ
--------------------------------------- */
.last_greeting img {
float: none;
margin: 0 auto 20px;
}
.exBlock .titBlock p {
padding: 16px 18px;
}
/* ---------------------------------------
症状別メニュー
--------------------------------------- */
.shojoArea .shojoBlock {
width: 98%;
}
/* ---------------------------------------
料金ページ
--------------------------------------- */
.feeBlock .tit p {
font-size: 150%;
}
/* ---------------------------------------
プロフィール
--------------------------------------- */
#page_2nd .profBlock img {
width: 100%;
}
/* ---------------------------------------
アクセス
--------------------------------------- */
.access_infoBlock ul li {
font-size: 88%;
}
/* ---------------------------------------
子連れ整体
--------------------------------------- */
.anshinBlock {
flex-direction: column;
margin: 20px auto 60px;
}
.anshinBlock .imgBlock {
text-align: center;
margin: 0 auto 20px;
}
.anshinBlock .imgBlock img {
width: auto;
}
.anshinBlock .setsumeiBlock p.koumoku_tit {
font-size: 100%;
border-bottom: #002 1px dotted;
}
/* ---------------------------------------
サイトマップ
--------------------------------------- */
.sitemapArea {
flex-direction: column;
}
.sitemapBlock {
width: 100%;
}
.wsp-pages-list li, .wsp-shojo-types-list li, .wsp-voices-list li, .wsp-newss-list li {
padding: 6px 0;
}
/* ---------------------------------------
営業案内
--------------------------------------- */
.renrakuBlock {
padding: 20px 14px;
margin: 0 auto 40px;
}
.renrakuBlock p span {
font-size: 88%;
line-height: 1.4rem;
}
/* ---------------------------------------
よくある質問
--------------------------------------- */
.faqBlock_2nd p.que {
font-size: 113%;
}
/* ---------------------------------------
ブログ
--------------------------------------- */
h3.pt003 {
font-size: 113%;
padding-bottom: 12px;
padding-left: 1.3em;
text-indent: -1.2em;
}
/* ---------------------------------------
慢性腰痛
--------------------------------------- */
.faq_wrapper {
padding: 26px 20px;
}
.privacyArea h3.pt003 {
padding-left: inherit;
text-indent: inherit;
}
}
/* ---------------------------------------------------------------

スマホ＜375px以下（*主にiPhone6向け）＞

--------------------------------------------------------------- */
@media only screen and (max-width: 375px) {}
/* ---------------------------------------------------------------

スマホ＜320px以下＞

--------------------------------------------------------------- */
@media only screen and (max-width: 320px) {
/* ---------------------------------------
トップコピー　スマホ用（スマホのみ表示）
--------------------------------------- */
#top_copyArea h2 {
font-size: 100%;
line-height: 1.5rem;
letter-spacing: 2px;
}
}