/* Theme Name:Sig-Care v1.0 Description:らっくうぇぶテーマ「Sig-Care」v1.0 Author:シグニフィ Version:1.0 License:シグニフィ */ /********************************************************************************************************************************* General Setting @charset （外部スタイルシートの文字コード指定） @import （外部スタイルシートのインポート） @media （メディアタイプを指定してスタイルを適用） @supports（ブラウザがCSSの属性や値をサポートしているかどうかで処理を振り分ける） @supports(display:flexbox){ //ブラウザがdisplay:flexboxをサポートしている場合 } @supports not(display:flexbox){ //ブラウザがdisplay:flexboxをサポートしていない場合 } //他の@規則内にネスト @supports(display:flexbox){ @media(min-width:500px){ // } } *********************************************************************************************************************************/ @charset "UTF-8"; @import url("css/style_Typography.css"); @import url("css/style_GeneralSetting.css"); /*････････････････････････････････････････････････････････････ カスタムプロパティ： ※ 複数の場所で同じ「CSS値」を使い回せる。値の修正も１か所で済む。 　 プロパティ名は文字の大・小を区別するので --my-color と --My-color は別プロパティとして扱われる。 　【宣言】 :root{//HTMLでは要素がスコープとして定義される --TitleColor :#222 ; --yohaku :5px 42px ; } 　【呼び出し】 p{ color :var(--TitleColor) ; color :var(--TitleColor, red) ; //--TitleColorの定義がなければred padding :var(--yohaku) ; } ････････････････････････････････････････････････････････････*/ :root{/*要素をスコープとして定義*/ /*カスタムプロパティ【宣言】････････ 【呼び出し】････････････････････････････････････････････････････････*/ --Cyan_01:#ffdfaa; /*水色01 color:var(--Cyan_01); */ --Cyan_02:#f7f19e; /*水色02 color:var(--Cyan_02); */ /*--Cyan_03:#dc0032;*/ /*水色03 color:var(--Cyan_03); */ --Cyan_03:#dc001f; /*水色03 color:var(--Cyan_03); */ --Cyan_04:#e21b06; /*水色04 color:var(--Cyan_04); */ --Cyan_05:#901212; /*水色05 color:var(--Cyan_05); */ --Gray_00:#f6f6f6; /*灰色00 color:var(--Gray_00); */ --Gray_01:#d9d8d8; /*灰色01 color:var(--Gray_01); */ --Gray_02:#c0bebe; /*灰色02 color:var(--Gray_02); */ --Gray_03:#6a695f; /*灰色03 color:var(--Gray_03); */ --Gray_04:#3e3e3b; /*灰色04 color:var(--Gray_04); */ --Gray_05:#1d1d1a; /*灰色05 color:var(--Gray_05); */ /*--Gradation_01:linear-gradient(90deg, #95d09b, #b5e3ac, #e3edc7, #e5f08f, #d0da5a 100%);*/ --Gradation_01:var(--Cyan_03); /*グラデーション01 background:var(--Gradation_01); */ --Side_Navi:var(--Gray_04); /*サイドメニュー color:var(--Side_Navi); */ --Side_Navi_Hover:var(--Gray_03); /*サイドメニュー（マウスオーバー） color:var(--Side_Navi_Hover); */ --Category_01:#00b300; /*カテゴリー01（緑） color:var(--Category_01); */ --Category_02:#00aae6; /*カテゴリー02（水色） color:var(--Category_02); */ --Category_03:var(--Cyan_03); /*カテゴリー03（オレンジ） color:var(--Category_03); */ --Category_04:#e6449e; /*カテゴリー04（ピンク） color:var(--Category_04); */ --Category_05:#007ce6; /*カテゴリー05（青） color:var(--Category_05); */ --Category_06:#00b38d; /*カテゴリー06（青緑） color:var(--Category_06); */ --Category_07:#8d4022; /*カテゴリー07（ブラウン） color:var(--Category_07); */ --Category_08:#bb11ff; /*カテゴリー08（紫） color:var(--Category_08); */ --Category_09:#7cbb00; /*カテゴリー09（黄緑） color:var(--Category_09); */ --Filter_MainImage:rgba(29, 29, 26, 0.39); /*フィルター効果（メインイメージ） color:var(--Filter_MainImage); */ --Filter_Section:rgba(29, 29, 26, 0.39); /*フィルター効果（セクション） color:var(--Filter_Section); */ --Filter_Brightness:brightness(100%); /*メインイメージ・明るさ補正(82%) filter:var(--Filter_Brightness);*/ /*･･････････････････････････････････ ･･･････････････････････････････････････････････････････････････････*/ } /*body･･････････････････････････････････････････････････････*/ body{ color:black; background-color:white; /*background:white url(images/bg.jpg) center 0 repeat;*/ /*背景画像の位置固定*/ /*min-height:100vh; background-attachment:fixed; background-size:cover; background-position:center;*/ } body, html{ overflow-x:hidden; } /*検証用･････････････････････････････････････････････････････*/ .red{ background-color:rgba(255, 0, 0, 0.3); } .green{ background-color:rgba(0, 255, 0, 0.3); } .yellow{ background-color:rgba(255, 255, 0, 0.3); } /********************************************************************************************************************************* フレーム（基本） *********************************************************************************************************************************/ main{ z-index:0; width:100%; overflow:hidden; } #gNavi>div, #gBtnPageTop>div, main>#contents>article, main>#contents>section, footer>div{ width:100%; margin-left:auto; margin-right:auto; } /*基本･･･････････････････････････････････････････････････････*/ #contents{ position:relative; height:auto; } #contents>article, #contents>section{ position:relative; height:auto; overflow:hidden; width:100%; } #contents>article>.baseArea, #contents>section>.baseArea{ display:inline-block; width:100%; text-align:center; text-align-last:center; } #contents>article>.baseArea>*, #contents>section>.baseArea>*{ display:inline-block; width:100%; margin-top:0; text-align:center; text-align-last:center; } /*div（第一階層）････････････････････････････････････････････*/ #contents>article>.baseArea>div:not(#wpContents), #contents>section>.baseArea>div:not(#wpContents){ margin-top:114px; } /*タイトル（英語表記）･･･････････････････････････････････････*/ #contents>article>.baseArea>div:not(#wpContents)>em, #contents>section>.baseArea>div:not(#wpContents)>em{ position:relative; z-index:50; width:calc(100% - 50px); text-align:center; text-align-last:center; color:var(--Cyan_04); font-size:11px; font-weight:bold; letter-spacing:0.1em; } /*タイトル･･･････････････････････････････････････････････････*/ #contents>article>.baseArea>div:not(#wpContents)>h2, #contents>section>.baseArea>div:not(#wpContents)>h2{ position:relative; z-index:50; width:calc(100% - 50px); margin:-5px auto 2.0em 25px; text-align:center; text-align-last:center; font-family:'Noto Serif JP'; } /*サブタイトル･･･････････････････････････････････････････････*/ #contents>article>.baseArea>div:not(#wpContents)>h3, #contents>section>.baseArea>div:not(#wpContents)>h3{ position:relative; z-index:50; width:calc(100% - 50px); margin:0 auto 2.0em 25px; text-align:center; text-align-last:center; } #contents>article>.baseArea>div:not(#wpContents)>h3>span, #contents>section>.baseArea>div:not(#wpContents)>h3>span{ display:inline-block; padding:1.0em 0.4em 0 0.4em; border-top:solid 2px var(--Cyan_03); } /*サブタイトル下のテキスト･･･････････････････････････････････*/ #contents>article>.baseArea>div:not(#wpContents)>h4, #contents>section>.baseArea>div:not(#wpContents)>h4{ position:relative; z-index:50; width:calc(100% - 50px); margin:0 auto 2.0em 25px; text-align:center; text-align-last:center; } #contents>article>.baseArea>div:not(#wpContents)>h4>span, #contents>section>.baseArea>div:not(#wpContents)>h4>span{ display:inline-block; padding:1.0em 0.4em 0 0.4em; } /*テキスト･･･････････････････････････････････････････････････*/ #contents>article>.baseArea>div:not(#wpContents)>p, #contents>section>.baseArea>div:not(#wpContents)>p{ position:relative; z-index:50; width:calc(100% - 50px); margin:auto auto 2.2em 25px; line-height:2.2em; text-align:center; text-align-last:center; } #contents>article>.baseArea>div:not(#wpContents)>p>span, #contents>section>.baseArea>div:not(#wpContents)>p>span{ max-width:950px; text-align:center; text-align-last:center; } /*タイトル・サブタイトル・テキストの余白（下）を削除･････････*/ #contents>article>.baseArea>div:not(#wpContents) *.btm_delete, #contents>section>.baseArea>div:not(#wpContents) *.btm_delete{ margin-bottom:0; } /*ボタン01（遷移）･･･････････････････････････････････････････*/ #contents>article>.baseArea p.btn01, #contents>section>.baseArea p.btn01, footer>.baseArea p.btn01, footer>.baseArea p.btn01{ z-index:50; position:relative; display:inline-block; height:60px; width:100%; min-width:280px; margin-top:60px !important; text-align:center; text-align-last:center; } footer>.baseArea p.btn01, footer>.baseArea p.btn01{ width:280px; margin-top:0 !important; } #contents>article>.baseArea p.btn01>span, #contents>section>.baseArea p.btn01>span, footer>.baseArea p.btn01>span, footer>.baseArea p.btn01>span{ display:inline-block; height:60px; width:auto; min-width:280px; } #contents>article>.baseArea p.btn01>span:nth-of-type(n+2), #contents>section>.baseArea p.btn01>span:nth-of-type(n+2), footer>.baseArea p.btn01>span:nth-of-type(n+2), footer>.baseArea p.btn01>span:nth-of-type(n+2){/*2番目以降*/ margin-left:30px; } #contents>article>.baseArea p.btn01>span>a, #contents>section>.baseArea p.btn01>span>a, footer>.baseArea p.btn01>span>a, footer>.baseArea p.btn01>span>a{ display:table-cell; height:60px; width:auto; min-width:280px; color:white; font-weight:500; text-align:center; text-align-last:center; vertical-align:middle; background:var(--Gradation_01);/*左右グラデーション*/ box-sizing:border-box; } #contents>article>.baseArea p.btn01>span>a:hover, #contents>section>.baseArea p.btn01>span>a:hover, footer>.baseArea p.btn01>span>a:hover, footer>.baseArea p.btn01>span>a:hover{ opacity:1; background-color:var(--Cyan_04); } /*ボタン02（遷移）･･･････････････････････････････････････････*/ #contents>article>.baseArea p.btn02, #contents>section>.baseArea p.btn02, footer>.baseArea p.btn02, footer>.baseArea p.btn02{ display:inline-block; height:60px; width:100%; min-width:280px; margin-top:60px !important; text-align:left; text-align-last:left; } footer>.baseArea p.btn02, footer>.baseArea p.btn02{ width:280px; margin-top:0 !important; } #contents>article>.baseArea p.btn02>span, #contents>section>.baseArea p.btn02>span, footer>.baseArea p.btn02>span, footer>.baseArea p.btn02>span{ display:inline-block; height:60px; width:auto; min-width:280px; } #contents>article>.baseArea p.btn02>span>a, #contents>section>.baseArea p.btn02>span>a, footer>.baseArea p.btn02>span>a, footer>.baseArea p.btn02>span>a{ display:table-cell; height:60px; width:auto; min-width:280px; color:var(--Cyan_03); text-align:center; text-align-last:center; vertical-align:middle; border:solid 1px var(--Cyan_03); box-sizing:border-box; } #contents>article>.baseArea p.btn02>span>a:hover, #contents>section>.baseArea p.btn02>span>a:hover, footer>.baseArea p.btn02>span>a:hover, footer>.baseArea p.btn02>span>a:hover{ opacity:1; background-color:var(--Cyan_04); } /********************************************************************************************************************************* ヘッダー（グローバルナビ） *********************************************************************************************************************************/ #gNavi{ z-index:960; position:fixed; top:0; height:84px; width:100%; pointer-events:none;/*ヘッダー背景は#gShieldクリック時に反応*/ /*border-bottom:solid 1px var(--Gray_03);*/ box-sizing:border-box; } #gNavi>div{ height:84px; } /*カーソル反応範囲･････････････*/ #gNavi>div a, #gNavi>div p, .gNaviIcon{ pointer-events:auto; cursor:pointer; } #gNavi>div a:hover, .gNaviIcon:hover{ opacity:1.0; } /*･････････････････････････････*/ #gNavi>div>h1{/*ロゴ*/ float:left; margin:17px auto auto 25px; } #gNavi>div>h1 img{ height:50px; width:auto; } .gNaviIcon{/*アイコン ||| */ display:none; height:50px; width:50px; margin:17px 25px auto auto; float:right; } #gNaviIconMenu{/*ハンバーガーメニュー ||| */ display:none; position:absolute; /*topは、gNavi.phpのjsで設定*/ left:0; width:100%; padding-bottom:20%; background-color:var(--Cyan_04); } #gNaviIconMenu>li{ border-bottom:solid 1px white; box-sizing:border-box; float:left;/*Mobile横向き対策*/ overflow:hidden;/*Mobile横向き対策*/ background-color:var(--Gray_04); } #gNaviIconMenu>li>a{ width:100%; display:block; text-align:center; text-align-last:center; } #gNaviIconMenu>li>a>span{ /*heightとwidthは、gNavi.phpのjsで設定*/ display:table-cell; color:white; text-align:center; text-align-last:center; vertical-align:middle; } #gNaviMenu{/*ナビメニュー･････････････*/ width:auto; max-width:950px; margin:33px 25px auto auto; float:right; } #gNaviMenu>li{/*ナビメニュー・ボタン*/ position:relative; display:inline-block; float:left; } #gNaviMenu>li:nth-of-type(n+2){/*2番目以降*/ margin-left:35px; } #gNaviMenu>li>a{ color:white; font-size:15px; } /*通常リスト、グリッドエリア（横4列）、スライドエリア（横4列）*/ #gNaviMenu>li>div{ display:inline-block; position:fixed; top:84px; left:0; pointer-events:auto;/*必須*/ } /*通常リスト････*/ #gNaviMenu>li>div.gNaviMenu_list{ display:none; position:absolute; top:51px; } #gNaviMenu>li>div.gNaviMenu_list>ul{ display:inline-block; height:auto; width:calc(10.0em + 50px); max-width:calc(10.0em + 50px); background-color:var(--Cyan_04); } #gNaviMenu>li>div.gNaviMenu_list>ul>li{ display:inline-block; } #gNaviMenu>li>div.gNaviMenu_list>ul>li>a{ display:inline-block; width:10.0em; max-width:10.0em; padding:12px 25px; color:white; white-space:nowrap; background-color:var(--Cyan_04); } #gNaviMenu>li>div.gNaviMenu_list>ul>li>a:hover{ background-color:var(--Cyan_03); } /*グリッドエリア（横4列）*/ #gNaviMenu>li>div.gNaviMenu_gridY4{ display:none; width:100%; padding-bottom:13px; background-color:var(--Cyan_04); } #gNaviMenu>li>div.gNaviMenu_gridY4>div{ position:relative; display:inline-block; width:1000px; margin:21px auto 0 calc((100% - 1000px)/2); overflow-y:hidden; } #gNaviMenu>li>div.gNaviMenu_gridY4>div>h4{/*タイトル*/ width:100%; text-align:center; text-align-last:center; color:white; float:left; } #gNaviMenu>li>div.gNaviMenu_gridY4>div>a{/*診察一覧*/ position:absolute; top:auto; left:auto; right:0; bottom:0; margin:auto; padding:0 1.0em; color:white; float:left; } #gNaviMenu>li>div.gNaviMenu_gridY4>ul{/*グリッドエリア*/ display:inline-block; width:1000px; margin:21px auto 0 calc((100% - 1000px)/2); overflow-y:hidden; } #gNaviMenu>li>div.gNaviMenu_gridY4>ul>li{ display:inline-block; height:100px; width:240px; margin-left:13px; float:left; } #gNaviMenu>li>div.gNaviMenu_gridY4>ul>li:nth-of-type(4n+1){/*4の倍数+1番目(1,5,9…)*/ margin-left:0; } #gNaviMenu>li>div.gNaviMenu_gridY4>ul>li:nth-of-type(n+5){/*5番目以降*/ margin-top:13px; } #gNaviMenu>li>div.gNaviMenu_gridY4>ul>li>a{ display:inline-block; height:100px; width:240px; } #gNaviMenu>li>div.gNaviMenu_gridY4>ul>li>a:hover p{ color:var(--Cyan_03); } #gNaviMenu>li>div.gNaviMenu_gridY4>ul>li>a>div{ display:inline-block; height:100px; width:100px; float:left; overflow:hidden; } #gNaviMenu>li>div.gNaviMenu_gridY4>ul>li>a>div>img{ display:inline-block; height:100px; width:100px; object-fit:contain; object-position:center center; background-color:#82c5dc; } #gNaviMenu>li>div.gNaviMenu_gridY4>ul>li>a:hover div>img{ transform:scale(1.2);/*拡大・縮小*/ transition:0.4s ease-out;/*秒*/ transform-origin:center center;/*軸*/ } #gNaviMenu>li>div.gNaviMenu_gridY4>ul>li>a>p{ display:inline-block; float:right; } #gNaviMenu>li>div.gNaviMenu_gridY4>ul>li>a>p>span{ display:table-cell; height:100px; width:140px; text-align:center; text-align-last:center; vertical-align:middle; background-color:white; } /*スライドエリア（横4列）*/ #gNaviMenu>li>div.gNaviMenu_slideY4{ display:none; height:346px; width:100%; text-align:center; text-align-last:center; background-color:var(--Cyan_04); } #gNaviMenu>li>div.gNaviMenu_slideY4>p{/*前ボタン、次ボタン*/ display:inline-block; height:270px; width:30px; margin-top:63px; margin-right:4px; margin-left:0; pointer-events:auto; } #gNaviMenu>li>div.gNaviMenu_slideY4>p.reflectX{/*次ボタン*/ margin-right:0; margin-left:4px; } #gNaviMenu>li>div.gNaviMenu_slideY4>p>img{ margin-top:120px; } #gNaviMenu>li>div.gNaviMenu_slideY4>div{/*スライドエリア、ブログ一覧*/ display:inline-block; width:932px; margin-top:25px; } #gNaviMenu>li>div.gNaviMenu_slideY4>div>p{/*ブログ一覧 ＞*/ display:inline-block; width:auto; float:right; } #gNaviMenu>li>div.gNaviMenu_slideY4>div>p>a{ display:inline-block; padding:0 1.0em; color:white; } #gNaviMenu>li>div.gNaviMenu_slideY4>div>div{/*スライドエリア*/ display:inline-block; height:270px; width:932px; margin-top:10px; overflow:hidden; float:left; } #gSlideY4_object{/*スライド・オブジェクト*/ display:inline-block; height:270px; width:1864px; } #gSlideY4_object>li{ display:inline-block; height:270px; width:233px; float:left; } #gSlideY4_object>li>a{ position:relative; display:inline-block; height:270px; width:233px; overflow:hidden; } #gSlideY4_object>li>a:hover p{ color:var(--Cyan_03); } #gSlideY4_object>li>a>span{ z-index:300; position:absolute; top:0; left:0; right:auto; bottom:auto; color:white; padding:0 0.7em; background-color:var(--Category_01); } #gSlideY4_object>li:nth-of-type(4n+2)>a>span{/*4の倍数+1番目(2,6,10…)*/ background-color:var(--Category_02); } #gSlideY4_object>li:nth-of-type(4n+3)>a>span{/*4の倍数+1番目(3,7,11…)*/ background-color:var(--Category_03); } #gSlideY4_object>li:nth-of-type(4n+4)>a>span{/*4の倍数+1番目(4,8,12…)*/ background-color:var(--Category_04); } #gSlideY4_object>li>a>img{ position:absolute; top:0; left:0; right:auto; bottom:auto; display:inline-block; height:135px; width:233px; object-fit:cover; object-position:center center; border-right:solid 1px var(--Gray_02); box-sizing:border-box; float:left; } #gSlideY4_object>li>a:hover img{ transform:scale(1.2);/*拡大・縮小*/ transition:0.4s ease-out;/*秒*/ transform-origin:center center;/*軸*/ } #gSlideY4_object>li>a>p{ position:absolute; top:auto; left:0; right:auto; bottom:0; display:inline-block; height:135px; width:233px; padding:15px; letter-spacing:0; line-height:1.5em; border-top:solid 1px var(--Gray_02); border-right:solid 1px var(--Gray_02); box-sizing:border-box; background-color:white; float:left; } #gSlideY4_object>li:last-of-type>a>img, #gSlideY4_object>li:last-of-type>a>p{ border-right:none; } /*ヘッダーの背景色･･････････････*/ #gNavi_bg{ z-index:940; position:fixed; top:0; left:0; right:0; bottom:auto; margin:auto; height:84px; width:100%;/*中央部のみ背景表示（両端は非表示）させたい場合は「1200px」など*/ /*background-color:white;*/ background-color:rgba(255, 255, 255, 0); } /*ヘッダーカバー（サブメニュー開いた時の本体保護層）･･････････････*/ #gNavi_cover{ display:none; z-index:930; position:fixed; top:0; left:0; right:0; bottom:auto; margin:auto; height:100vh; width:100%;/*中央部のみ背景表示（両端は非表示）させたい場合は「1200px」など*/ } /*ページトップへボタン･･･････････････････････････････････････*/ #gBtnPageTop{ z-index:910; position:fixed; right:0; bottom:0;/*btnPageTop()使用時は、bottom値はbtnPageTop()関数内で設定*/ height:auto; width:100%; pointer-events:none; } #gBtnPageTop>div{ } #gBtnPageTop>div p{ float:right; margin-right:0; } #gBtnPageTop>div p a{ pointer-events:auto; height:60px; width:60px; } /********************************************************************************************************************************* フッター *********************************************************************************************************************************/ footer{ z-index:900; width:100%; margin-top:114px; } footer>.baseArea{ display:inline-block; width:100%; } /*バナーエリア･･･････････････････････････････････････････････*/ footer>.baseArea>div.bannerY4{ display:inline-block; height:150px; width:100%; } footer>.baseArea>div.bannerY4>div{ display:inline-block; height:100%; width:100%; } footer>.baseArea>div.bannerY4>div>ul{/*バナーエリア*/ display:inline-block; height:100%; width:100%; border-bottom:solid 1px var(--Gray_01); } footer>.baseArea>div.bannerY4>div>ul>li{ display:inline-block; height:100%; width:25%; border-right:solid 1px var(--Gray_01); box-sizing:border-box; float:left; } footer>.baseArea>div.bannerY4>div>ul>li>a{ position:relative; display:inline-block; height:100%; width:100%; overflow:hidden; } footer>.baseArea>div.bannerY4>div>ul>li>a:hover{ opacity:1; } footer>.baseArea>div.bannerY4>div>ul>li>a:hover img.bg_img{ transform:scale(1.25);/*拡大・縮小*/ transition:0.4s ease-out;/*秒*/ transform-origin:center center;/*軸*/ filter:brightness(100%) saturate(100%);/*明るさ、彩度*/ } footer>.baseArea>div.bannerY4>div>ul>li>a>p{ z-index:20; position:absolute; top:calc(50% - 1.0em); left:auto; right:auto; bottom:auto; width:100%; margin:auto; } footer>.baseArea>div.bannerY4>div>ul>li>a>p>span{/*テキスト*/ position:absolute; left:0; right:auto; width:100%; color:white; text-align:center; text-align-last:center; /*background:linear-gradient(90deg, rgba(62,62,59,0) 20%, rgba(62,62,59,0) 40%, rgba(62,62,59,0) 60%, rgba(62,62,59,0) 80%);*/ background:linear-gradient(90deg, rgba(106,105,95,0) 20%, rgba(106,105,95,0) 40%, rgba(106,105,95,0) 60%, rgba(106,105,95,0) 80%); } footer>.baseArea>div.bannerY4>div>ul>li>a:hover p>span{/*テキスト*/ transition:0.4s ease-out;/*秒*/ /*background:linear-gradient(90deg, rgba(62,62,59,0) 20%, rgba(62,62,59,1) 40%, rgba(62,62,59,1) 60%, rgba(62,62,59,0) 80%);*/ background:linear-gradient(90deg, rgba(106,105,95,0) 20%, rgba(106,105,95,1) 40%, rgba(106,105,95,1) 60%, rgba(106,105,95,0) 80%); } footer>.baseArea>div.bannerY4>div>ul>li>a>img:not(.corner){ z-index:10; position:absolute; display:inline-block; height:150px; width:100%; object-fit:cover; object-position:center center; /*a:hoverからの戻りアニメ*/ transform:scale(1.0);/*拡大・縮小*/ transition:0.4s ease-out;/*秒*/ filter:brightness(57%) saturate(76%);/*明るさ、彩度*/ } footer>.baseArea>div.bannerY4>div>ul>li>a img.corner{/*コーナー画像*/ z-index:15; position:absolute; top:0; left:0; right:auto; bottom:auto; height:14px; width:14px; opacity:0.7; } /*営業スケジュール･･･････････････････････････････････････････*/ footer>.baseArea>div.scheduleArea{ position:relative; z-index:10; display:inline-block; width:100%; padding:20px 0 80px 0; text-align:center; text-align-last:center; overflow:hidden; } footer>.baseArea>div.scheduleArea>h3{/*診療科目*/ position:relative; z-index:50; display:inline-block; width:calc(100% - 50px); margin-left:25px; color:white; text-align:center; text-align-last:center; } footer>.baseArea>div.scheduleArea>p{/*一般歯科・予防歯科・口腔･･･*/ position:relative; z-index:50; display:inline-block; width:calc(100% - 50px); margin-left:25px; color:white; text-align:center; text-align-last:center; } footer>.baseArea>div.scheduleArea>div{/*診療予約はこちら、電話予約はこちら、スケジュール*/ position:relative; z-index:50; display:inline-block; width:1000px; margin-top:60px; } footer>.baseArea>div.scheduleArea>div>ul{/*診療予約はこちら、電話予約はこちら*/ display:inline-block; width:488px; } footer>.baseArea>div.scheduleArea>div>ul>li.li01,/*診療予約はこちら*/ footer>.baseArea>div.scheduleArea>div>ul>li.li02{/*電話予約はこちら*/ display:inline-block; width:100%; padding:9px 0; float:left; background-color:white; } footer>.baseArea>div.scheduleArea>div>ul>li.li02{/*2つ目「電話予約はこちら」*/ margin-top:14px; } footer>.baseArea>div.scheduleArea>div>ul>li.li01>span, footer>.baseArea>div.scheduleArea>div>ul>li.li02>span{ display:inline-block; max-width:200px; margin:16px auto auto 28px; float:left; } footer>.baseArea>div.scheduleArea>div>ul>li.li01>p{/*ボタン「WEB予約」*/ margin:0 10px auto auto; float:right; } footer>.baseArea>div.scheduleArea>div>ul>li.li02>div{/*TEL、テキスト*/ display:inline-block; height:60px; width:280px; margin-right:10px; float:right; } footer>.baseArea>div.scheduleArea>div>ul>li.li02>div>a{/*TEL*/ display:inline-block; width:100%; margin-top:1px; } footer>.baseArea>div.scheduleArea>div>ul>li.li02>div>a>img{/*TELマーク（画像）*/ display:inline-block; margin-top:4px; } footer>.baseArea>div.scheduleArea>div>ul>li.li02>div>a>span{/*06-1234-5678*/ margin-top:1px; font-size:28px; letter-spacing:0; line-height:1.0em; } footer>.baseArea>div.scheduleArea>div>ul>li.li02>div>p{/*テキスト*/ display:inline-block; width:100%; margin-top:7px; } footer>.baseArea>div.scheduleArea>div>table{/*スケジュール*/ display:inline-block; width:488px; color:var(--Gray_04); float:right; box-sizing:border-box; border:solid 2px var(--Gray_05); } footer>.baseArea>div.scheduleArea>div>table *{ color:white; font-weight:normal; } footer>.baseArea>div.scheduleArea>div>table>tbody{ display:inline-block; width:100%; background:var(--Gray_03);/*左右グラデーション*/ } footer>.baseArea>div.scheduleArea>div>table>tbody>tr{/*1行*/ height:55px; } footer>.baseArea>div.scheduleArea>div>table>tbody>tr>th{ display:table-cell; text-align:center; text-align-last:center; vertical-align:middle; width:120px; } footer>.baseArea>div.scheduleArea>div>table>tbody>tr>td{ display:table-cell; text-align:center; text-align-last:center; vertical-align:middle; width:51px; color:var(--Gray_04); background-color:white; } footer>.baseArea>div.scheduleArea>div>table>tbody>tr:first-of-type>td{ color:white; background:none; } footer>.baseArea>div.scheduleArea>div>table>tbody>tr>td.holiday{/*施設の休み*/ background-color:var(--Gray_01); } /*背景画像にかけるフィルター*/ footer>.baseArea>div.scheduleArea>span.bg{ position:absolute; z-index:20; width:100%; height:100%; top:0; left:0; background:white url(images/mainImage02d.jpg) center center /cover no-repeat; filter:brightness(89%) contrast(89%);/*明るさ、コントラスト*/ } /*アドレス･･･････････････････････････････････････････････････*/ footer>.baseArea>address{ display:inline-block; width:100%; padding:60px 0; text-align:center; text-align-last:center; background-color:white; /*background-color:var(--Cyan_03);*/ } footer>.baseArea>address>a{/*ロゴ*/ display:inline-block; } footer>.baseArea>address>a>img{ display:inline-block; height:85px; width:auto; } footer>.baseArea>address>p{/*テキスト*/ display:inline-block; width:calc(100% - 50px); margin:24px auto 0 25px; color:var(--Gray_05); text-align:center; text-align-last:center; } footer>.baseArea>address>div{/*SNS*/ display:inline-block; width:calc(100% - 50px); margin:27px auto 0 25px; } footer>.baseArea>address>div>ul{/*リスト*/ display:flex; /*フレキシブル・コンテナ*/ flex-direction:row; /*水平方向*/ justify-content:space-between; /*子要素を均等間隔で並べる*/ width:110px; margin-left:calc((100% - 110px)/2); } footer>.baseArea>address>div>ul>li{ display:inline-block; float:left; } footer>.baseArea>address>div>ul>li>a{ display:inline-block; float:left; } footer>.baseArea>address>div>ul>li>a>img{/*アイコン画像*/ display:inline-block; height:15px; width:16px; object-fit:contain; object-position:center center; } /*ナビゲーション･････････････････････････････････････････････*/ footer>.baseArea>nav{ display:inline-block; height:1.0em; width:100%; padding:23px 0; background-color:#901212; background-color:var(--Cyan_05); } footer>.baseArea>nav>ul{/*リスト*/ display:flex; /*フレキシブル・コンテナ*/ flex-direction:row; /*水平方向*/ justify-content:space-between; /*子要素を均等間隔で並べる*/ height:1.0em; width:800px; margin-left:calc((100% - 800px)/2); } footer>.baseArea>nav>ul>li{ display:inline-block; } footer>.baseArea>nav>ul>li>a{ display:inline-block; line-height:1.0em; color:white; } /*コピーライト･･･････････････････････････････････････････････*/ footer>.baseArea>p.copyright{ display:inline-block; width:100%; color:white; font-size:12px; text-align:center; text-align-last:center; padding:19px 0; background-color:var(--Gray_05); } /********************************************************************************************************************************* メインイメージ・エリア *********************************************************************************************************************************/ #mi_area{ z-index:10; display:inline-block; position:relative; height:100vh; min-height:500px; max-height:850px; width:100%; margin:auto; overflow:hidden; /*border-bottom:solid 1px var(--Gray_03); box-sizing:border-box;*/ } /*キャッチコピー（メインイメージ・エリア）･･･････････････････*/ #mi_area .catchCopy{/*キャッチコピー*/ z-index:100; display:inline-block; position:absolute; top:0; left:0; right:auto; bottom:auto; height:100%; width:100%; text-align:center; text-align-last:center; } top #mi_area .catchCopy>p{/*テキスト*/ z-index:100; display:inline-block; height:100%; } #mi_area .catchCopy>p>span.tategaki{/*「タテ書き」の場合････*/ display:inline-block; height:100%; color:white; font-size:32px; text-align:center; text-align-last:center; } #mi_area .catchCopy>p>span.yokogaki{/*「ヨコ書き」の場合････*/ z-index:120; position:absolute; top:auto; left:calc((100% - 980px)/2); right:auto; bottom:10%; margin:auto; height:200px; width:980px; } #mi_area .catchCopy>p>span.yokogaki>span{/*キャッチコピー*/ display:table-cell; height:200px; width:980px; padding:10px 80px 19px 80px; box-sizing:border-box; /*color:white;*/ color:aliceblue; /*font-size:26px;*/ font-size:31px; font-weight:bold; vertical-align:middle; text-align:center; text-align-last:center; } #mi_area .catchCopy>p>span.yokogaki>span>span.slideShow_sentence{/*キャッチコピーの補足文*/ display:inline-block; height:auto; width:100%; margin-top:10px; /*color:white;*/ color:aliceblue; /*font-size:16px;*/ font-size:17px; font-weight:normal; } #mi_area .catchCopy>p>span.yokogaki_bg1{/*キャッチコピー／「ヨコ書き」の背景1（テキストのぼかし背景）*/ z-index:110; position:absolute; top:auto; left:0; right:auto; bottom:0; margin:0; height:100%; width:100%; background-color:var(--Filter_MainImage); } #mi_area .catchCopy_bg{/*キャッチコピーの背景*/ z-index:90; display:inline-block; position:absolute; top:0; left:0; right:auto; bottom:auto; height:100%; width:100%; text-align:center; text-align-last:center; } /*キャッチコピー（下層ページ／コンテンツ内で使用）･･･････････*/ .mi_area .catchCopy{/*キャッチコピー*/ z-index:100; display:inline-block; position:relative; top:0; left:0; right:auto; bottom:auto; height:400px; width:1000px; margin:0 auto 0 calc((100% - 1000px)/2); text-align:center; text-align-last:center; background-color:rgba(0, 0, 0, 0); } .mi_area .catchCopy>p{/*テキスト*/ z-index:100; position:relative; display:inline-block; height:400px; width:100%; max-width:1000px; text-align:center; text-align-last:center; background-color:rgba(0, 0, 0, 0);/*追加「フィルター効果」*/ } .mi_area .catchCopy>p>span{ display:inline-block; height:100%; color:white; font-size:27px; text-align:center; text-align-last:center; } .mi_area .catchCopy>p>span.yokogaki{ display:table-cell; height:400px; width:100%; min-width:1000px; vertical-align:middle; } .mi_area .catchCopy>img.backImg{/*画像BOX*/ z-index:50; display:inline-block; position:absolute; top:0; left:0; right:auto; bottom:auto; height:400px;/*100%*/ width:100%; max-width:1000px; object-fit:cover; object-position:center center; /*filter:brightness(82%); //追加「明るさ効果（オリジナル画像は100%）」*/ } /*ボトム・ナビゲーション･････････････････････････････････････*/ #mi_bottomMenu{ z-index:800; display:inline-block; height:auto; width:1000px; max-width:1000px; position:absolute; top:auto; left:0; right:0; bottom:-250px; margin:auto; } #mi_bottomMenu>li{ display:inline-block; height:auto; width:33.33333333333333%; float:left; transform-origin:left top;/*基準点*/ animation:mi_bottomMenu_mouseOut 0.31s ease-out forwards; } #mi_bottomMenu>li:hover div{ opacity:1; animation:mi_bottomMenu_mouseHover 0.31s ease-out forwards; } #mi_bottomMenu>li>*{ vertical-align:top; } /*mi_bottomMenu アニメーション･････････････････････*/ @keyframes mi_bottomMenu_mouseHover{ from{/*デフォルト*/ margin-top:0; } to{ margin-top:-250px; } } @keyframes mi_bottomMenu_mouseOut{ from{ margin-top:-250px; } to{/*デフォルト*/ margin-top:0; } } /*･････････････････････････････････････････････････*/ #mi_bottomMenu>li>div{/*カード*/ display:inline-block; } #mi_bottomMenu>li>div>a:first-of-type{/*（01）サブタイトル*/ display:inline-block; width:100%; padding:13px 0 11px 0; background-color:var(--Cyan_02); pointer-events:none; } #mi_bottomMenu>li:nth-of-type(2)>a>string{/*（02）サブタイトル*/ background-color:var(--Cyan_03); } #mi_bottomMenu>li:nth-of-type(3)>a>string{/*（03）サブタイトル*/ background-color:var(--Cyan_04); } #mi_bottomMenu>li>div>a:first-of-type>em{/*（01）*/ height:36px; width:36px; margin-left:18px; font-size:13px; float:left; } #mi_bottomMenu>li>div>a:first-of-type>em>span{ display:table-cell; height:35px; width:35px; color:white; text-align:center; text-align-last:center; vertical-align:middle; border:solid 1px white; box-sizing:border-box; border-radius:50%; } #mi_bottomMenu>li>div>a:first-of-type>p{/*サブタイトル*/ height:1.88em; max-height:1.88em; overflow-y:hidden; width:calc(100% - 67px); max-width:calc(100% - 67px); margin:1px auto auto 12px; color:white; font-size:17px; font-weight:bold; float:left; } #mi_bottomMenu>li>div>p{/*本文*/ height:140px; max-height:140px; overflow-y:hidden; width:calc(100% - 90px); padding:25px 45px; background-color:white; } #mi_bottomMenu>li>div>a:last-of-type{/*詳しくはこちら*/ height:1.88em; max-height:1.88em; overflow-y:hidden; display:inline-block; width:calc(100% - 90px); padding:15px 45px 13px 45px; font-size:15px; background-color:var(--Gray_01); } #mi_bottomMenu>li>div>a:hover{ opacity:1; background-color:var(--Gray_02); } /*スライドショー･････････････････････････････････････････････*/ #slideShow{ z-index:700; position:relative; top:0; left:0; height:100%; min-height:500px; width:100vw; overflow:hidden; } #slideShow>li{/*カード*/ position:absolute; height:100%; width:100%; } #slideShow>li>div{ position:relative; height:100%; width:100%; } #slideShow>li>div .backImg{/*メイン画像*/ position:absolute; } #slideShow>li>div .backImg>span{ display:block; height:100vh; max-height:850px; width:100vw; background-color:white; background-position:center center; background-size:cover; background-repeat:no-repeat; filter:var(--Filter_Brightness);/*明るさ効果（オリジナル画像は100%）*/ /*background:black url(images/mainImage01.jpg) center center /cover no-repeat;*/ } #slideShow>li>div .backImg>span>img{/*画像（下層ページ・メインイメージで使用）*/ display:inline-block; height:400px; width:100vw; object-fit:cover; object-position:center center;/*上に合わせる場合は「center top」*/ } /*li 個別設定*/ #slideShow_img01{ z-index:80; } #slideShow_img02{ z-index:70; } #slideShow_img03{ z-index:60; } #slideShow_img04{ z-index:50; } #slideShow_img05{ z-index:40; } #slideShow_img06{ z-index:30; } #slideShow_img07{ z-index:20; } #slideShow_img08{ z-index:10; } /*サイド・ナビゲーション･････････････････････････････････････*/ #sideNavi{ z-index:900; display:inline-block; height:240px; width:220px; position:fixed; top:calc((100vh - 240px) /2);/*サイド・ナビゲーション高さ /2*/ left:auto; right:-168px; bottom:auto; background-color:var(--Gray_05); transform-origin:left top;/*基準点*/ animation:sideNavi_mouseOut 0.25s ease-out forwards; } #sideNavi:hover{ transform-origin:left top;/*基準点*/ animation:sideNavi_mouseHover 0.25s ease-out forwards; } /*sideNavi アニメーション･･････････････････････････*/ @keyframes sideNavi_mouseHover{ from{/*デフォルト*/ right:-168px; } to{ right:0; } } @keyframes sideNavi_mouseOut{ from{ right:0; } to{/*デフォルト*/ right:-168px; } } /*･････････････････････････････････････････････････*/ #sideNavi>li{/*カード*/ display:inline-block; height:auto; width:auto; background-color:var(--Gray_05); } #sideNavi>li a:hover{ opacity:1; background-color:var(--Gray_04); } #sideNavi>li>a{ display:inline-block; height:auto; width:220px; padding:18px 0; } #sideNavi>li>a>img, #sideNavi>li>a>p{/*アイコン、テキスト*/ display:inline-block; float:left; } #sideNavi>li>a>img{/*アイコン*/ height:22px; width:22px; margin:6px auto auto 15px; } #sideNavi>li>a>p{/*テキスト*/ height:auto; width:130px; margin-left:25px; color:white; font-size:16px; } /*電光掲示板････････････････････････････････････････････････････････*/ #contents>section#keijiban{ text-align:center; text-align-last:center; padding:9px 0 15px 0; background-color:#f5f5f5; } #contents>section#keijiban>.baseArea{/*baseArea*/ display:inline-block; height:28px; width:1000px; max-width:1000px; overflow:hidden; } #keijiban>div>table{/*表示範囲*/ display:inline-block; height:28px; max-height:28px; width:calc(100% - 170px); max-width:calc(100% - 170px); float:left; overflow:hidden; } #keijiban>div>table>tbody{ display:inline-block; } #keijiban>div>table>tbody>tr{ display:inline-block; } #keijiban>div>table>tbody>tr>*{ display:inline-block; font-size:15px; } #keijiban>div>table>tbody>tr>th{/*2025.01.01*/ height:24px; width:105px; margin-top:3px; padding-left:15px; font-weight:normal; color:#00a8cc; float:left; } #keijiban>div>table>tbody>tr>td{/*テキスト*/ height:24px; width:710px; margin-top:3px; font-weight:bold; float:left; overflow-y:hidden; } #keijiban>div>a{/*お知らせ一覧 ＞*/ display:inline-block; height:24px; max-height:28px; width:160px; max-width:160px; padding-top:4px; padding-bottom:4px; font-size:14px; text-align:center; text-align-last:center; float:right; } /*パンくずリスト･････････････････････････････････････････････*/ #breadcrumbs{ display:inline-block; height:auto; width:100%; padding:14px 0; background-color:rgba(255, 255, 255, 0.9); } #breadcrumbs *{ display:inline-block; font-size:13px; line-height:1.0em; } #breadcrumbs>li{ float:left; } #breadcrumbs>li:first-of-type{ margin-left:25px; } #breadcrumbs>li:nth-of-type(n+2){/*2番目以降*/ margin-left:12px; } #breadcrumbs>li.ico_bc_arrow{/* ＞ */ height:10px; width:10px; margin-top:3px; background:url(images/ico_bc_arrow.png) center center /contain no-repeat; } #breadcrumbs>li:nth-of-type(n+2)>a{ color:var(--Cyan_03); border-bottom:solid 1px var(--Cyan_03); } #breadcrumbs>li:last-of-type>a{/*最後*/ color:inherit; border:none; pointer-events:none; } #breadcrumbs>li>a>span{ margin-top:0; } #breadcrumbs>li>a>img{ height:14px; width:14px; object-fit:cover; object-position:center center;/*上に合わせる場合は「center top」*/ } /********************************************************************************************************************************* ページネーション *********************************************************************************************************************************/ .pagenation{ margin:0 auto; } .pagenation:after,.pagenation ul:after{ clear:both; content:"."; display:block; height:0; visibility:hidden; } .pagenation ul{ margin:0; } .pagenation li{ float:left; list-style:none outside none; margin-left:3px;/*アイコン間の余白*/ } .pagenation li:first-child{ margin-left:0; } .pagenation li.active, .pagenation li a{/*アクティブ＆他ページのアイコン（共通）*/ color:#fff; font-size:1.8rem; font-weight:bold; padding:1.3rem 1.6rem; letter-spacing:0; line-height:1.0em; } .pagenation li.active{/*アクティブ・アイコン*/ background-color:var(--Cyan_02); cursor:not-allowed; } .pagenation li a{/*他ページ・アイコン*/ display:block; background:none repeat scroll 0 0 #ccc; text-decoration:none; text-shadow:0 -1px 0 rgba(0,0,0,0.2); background-color:#c6c6c6;/*非アクティブ*/ } .pagenation li a:hover{/*他ページ・アイコン（マウスオーバー時）*/ background-color:var(--Cyan_02); opacity:0.8; transition-duration:500ms; transition-property:all; transition-timing-function:ease; } .pagenation li a img{/* ＞など画像の左右余白に差が出た時の対処例 */ /* display:block; height:12px; width:12px; padding:0 0.9rem 0.9rem 0.9rem; */ } /********************************************************************************************************************************* JavaScript版 ドロップダウン・メニュー *********************************************************************************************************************************/ .js_pullDownBox, .js_pullDownBox>p,/*タイトル*/ .js_pullDownBox>div,/*リストBOX*/ .js_pullDownBox>div>a{/*リスト*/ display:block; min-height:3.0rem; width:300px; line-height:1.7em; text-align:left; text-align-last:left; pointer-events:auto; /*box-sizing:border-box;*/ /*フルレスポンシブ時、枠線が削れたり補足なるので× */ cursor:pointer; } .js_pullDownBox{ z-index:100; position:relative; margin-left:-1px; } .js_pullDownBox>p{/*タイトル*/ display:table-cell; padding:0.25em 0.6em; vertical-align:middle; white-space:nowrap;/*改行禁止*/ border:solid 1px #999; background:white url(images/ico_pullDown.png) right center no-repeat; } .js_pullDownBox>div{/*リストBOX*/ display:none; position:absolute; width:298px; border-left:solid 1px #999; border-right:solid 1px #999; border-bottom:solid 1px #999; overflow-x:hidden; background-color:#ffa; } .js_pullDownBox>div>a{/*リスト*/ width:298px; margin:0 1px;/*枠線の分*/ padding:0.25em 0.6em; white-space:nowrap;/*改行禁止*/ } .js_pullDownBox>div>a:hover{ opacity:1; background-color:#dd6; } /****************************************************************** pc・tablet・mobileの切り替え ******************************************************************/ .pc{ display:block; } .tablet{ display:none; } .mobile{ display:none !important; } /********************************************************************************************************************************* メディアクエリ（ ～1000px以下 ） *********************************************************************************************************************************/ @media(max-width:1000px){ /************************************************************************************** フレーム（基本） **************************************************************************************/ #contents>article>.baseArea>div:not(#wpContents)>p>span, #contents>section>.baseArea>div:not(#wpContents)>p>span{ max-width:100%; } footer>.baseArea>div.scheduleArea>div{/*「診療予約はこちら、電話予約はこちら」「スケジュール」*/ width:488px; } footer>.baseArea>div.scheduleArea>div>table{/*スケジュール*/ margin-top:14px; } /*ナビゲーション･････････････････････････････････････････････*/ footer>.baseArea>nav{ height:auto; padding:23px 0 10px 0; } footer>.baseArea>nav>ul{/*リスト*/ display:inline-block; height:auto; width:100%; margin-left:0; text-align:center; text-align-last:center; } footer>.baseArea>nav>ul>li>a{ padding:0 2.0em; } /*電光掲示板････････････････････････････････････････････････････････*/ #contents>section#keijiban>.baseArea{/*baseArea*/ width:100%; max-width:100%; } #keijiban>div>table>tbody>tr>td{/*テキスト*/ width:calc(100% - 120px); } #keijiban>div>a{/*お知らせ一覧 ＞*/ white-space:nowrap;/*改行禁止*/ } /*パンくずリスト･････････････････････････････････････････････*/ #breadcrumbs{ border-bottom:solid 1px var(--Gray_02); } /************************************************************************************** ヘッダー（グローバルナビ） **************************************************************************************/ .gNaviIcon{/*アイコン ||| */ display:block; } #gNaviMenu{/*ナビメニュー*/ display:none; } /*ボトム・ナビゲーション･････････････････････････････････････*/ #mi_bottomMenu{ width:100%; max-width:100%; } #mi_bottomMenu>li>div>p{/*本文*/ min-height:140px; width:calc(100% - 50px); padding:25px; letter-spacing:0; } #mi_bottomMenu>li>div>a{/*（01）サブタイトル～詳しくはこちら*/ width:calc(100% - 50px); padding:15px 25px 13px 25px; letter-spacing:0; } /*キャッチコピー（メインイメージ・エリア）･･･････････････････*/ #mi_area .catchCopy>p>span.yokogaki{/*「ヨコ書き」の場合････*/ left:calc((100% - 860px)/2); width:860px; } #mi_area .catchCopy>p>span.yokogaki>span{/*「ヨコ書き」のテキスト*/ width:860px; } /*キャッチコピー（下層ページ／コンテンツ内で使用）･･･････････*/ .mi_area .catchCopy>p>span.yokogaki{/*「ヨコ書き」の場合････*/ left:calc((100% - 860px)/2); width:860px; } .mi_area .catchCopy>p>span.yokogaki>span{/*「ヨコ書き」のテキスト*/ width:860px; } } /********************************************************************************************************************************* メディアクエリ（ ～860px以下 ） *********************************************************************************************************************************/ @media(max-width:860px){ /************************************************************************************** ヘッダー（グローバルナビ） **************************************************************************************/ /*ボトム・ナビゲーション･････････････････････････････････････*/ #mi_bottomMenu>li>div>a:first-of-type>p{/*サブタイトル*/ height:3.0em; max-height:3.0em; margin:0 auto auto 12px; letter-spacing:0; line-height:1.5em; } #mi_bottomMenu>li>div>p{/*本文*/ min-height:140px; width:calc(100% - 40px); padding:15px 20px 35px 20px; font-size:14px; } #mi_bottomMenu>li>div>a{/*（01）サブタイトル～詳しくはこちら*/ height:calc(1.88em + 20px); max-height:calc(1.88em + 20px); width:calc(100% - 40px); padding:7px 20px 1px 20px; line-height:1.5em; } /*キャッチコピー（メインイメージ・エリア）･･･････････････････*/ #mi_area .catchCopy>p>span.yokogaki{/*「ヨコ書き」の場合････*/ left:calc((100% - 650px)/2); width:650px; } #mi_area .catchCopy>p>span.yokogaki>span{/*「ヨコ書き」のテキスト*/ width:650px; } /*キャッチコピー（下層ページ／コンテンツ内で使用）･･･････････*/ .mi_area .catchCopy>p>span.yokogaki{/*「ヨコ書き」の場合････*/ left:calc((100% - 650px)/2); width:650px; } .mi_area .catchCopy>p>span.yokogaki>span{/*「ヨコ書き」のテキスト*/ width:650px; } /************************************************************** pc・mobileの切り替え **************************************************************/ .pc{ display:block; } .tablet{ display:block; } .mobile{ display:none !important; } } /********************************************************************************************************************************* メディアクエリ（ ～500px以下 ） *********************************************************************************************************************************/ @media(max-width:500px){ /************************************************************************************** フレーム（基本） **************************************************************************************/ /*div（第一階層）････････････････････････････････････････････*/ #contents>article>.baseArea>div:not(#wpContents), #contents>section>.baseArea>div:not(#wpContents){ margin-top:60px; } /*タイトル（英語表記）･･･････････････････････････････････････*/ #contents>article>.baseArea>div:not(#wpContents)>em, #contents>section>.baseArea>div:not(#wpContents)>em{ width:100%; margin-left:0; font-size:19px; } #contents>article>.baseArea>div:not(#wpContents)>h2, #contents>section>.baseArea>div:not(#wpContents)>h2{ font-size:30px; margin:-5px auto 0 auto; width:100%; } #contents>article>.baseArea>div:not(#wpContents)>h3, #contents>section>.baseArea>div:not(#wpContents)>h3{ margin:40px auto 54px auto; } #contents>article>.baseArea>div:not(#wpContents)>h3>span, #contents>section>.baseArea>div:not(#wpContents)>h3>span{ font-size:22px; } /*テキスト･･･････････････････････････････････････････････････*/ #contents>article>.baseArea>div:not(#wpContents)>p, #contents>section>.baseArea>div:not(#wpContents)>p{ margin:40px auto 54px auto; font-size:22px; line-height:1.88em; text-align:justify; text-align-last:left; } #contents>article>.baseArea>div:not(#wpContents)>p>span, #contents>section>.baseArea>div:not(#wpContents)>p>span{ max-width:100%; display:block; } /*ボタン01（遷移）･･･････････････････････････････････････････*/ #contents>article>.baseArea p.btn01, #contents>section>.baseArea p.btn01, footer>.baseArea p.btn01, footer>.baseArea p.btn01{ height:auto; min-width:100%; text-align:center !important; text-align-last:center !important; } #contents>article>.baseArea p.btn01>span, #contents>section>.baseArea p.btn01>span, footer>.baseArea p.btn01>span, footer>.baseArea p.btn01>span{ display:inline-block !important; } #contents>article>.baseArea p.btn01>span:nth-of-type(n+2), #contents>section>.baseArea p.btn01>span:nth-of-type(n+2), footer>.baseArea p.btn01>span:nth-of-type(n+2), footer>.baseArea p.btn01>span:nth-of-type(n+2){/*2番目以降*/ margin-top:36px; margin-left:auto; } /*シールド･･････････････････････ iOSでメニュー（fixed要素）表示時にスクロールすると、ツールバーが消える一瞬背景が見えるバグ対策（症状の軽減）*/ #gShield{ position:absolute; background-color:#004d9c; } /************************************************************************************** フッター **************************************************************************************/ footer{ margin-top:50px; } /*バナーエリア･･･････････････････････････････････････････････*/ footer>.baseArea>div.bannerY4{ height:600px; } footer>.baseArea>div.bannerY4>div>ul>li{ height:150px; width:100%; } footer>.baseArea>div.bannerY4>div>ul>li>a:hover img.bg_img{ transform:scale(1.0);/*拡大・縮小*/ transition:0;/*秒*/ filter:brightness(57%) saturate(76%);/*明るさ、彩度*/ } footer>.baseArea>div.bannerY4>div>ul>li>a>p{ top:auto; left:auto; height:150px; width:100%; } footer>.baseArea>div.bannerY4>div>ul>li>a>p>span{/*テキスト*/ position:relative; display:table-cell; height:150px; width:500px; vertical-align:middle; font-size:20px; font-weight:bold; text-align:center; text-align-last:center; } footer>.baseArea>div.bannerY4>div>ul>li>a:hover p>span{/*テキスト*/ background:none; } footer>.baseArea>div.bannerY4>div>ul>li>a img.corner{/*コーナー画像*/ opacity:0; } /*営業スケジュール･･･････････････････････････････････････････*/ footer>.baseArea>div.scheduleArea>h3{/*診療科目*/ width:100%; margin-left:0; font-size:20px; } footer>.baseArea>div.scheduleArea>p{/*一般歯科・予防歯科・口腔･･･*/ width:450px; margin-left:25px; font-size:17px; float:left; } footer>.baseArea>div.scheduleArea>div{/*診療予約はこちら、電話予約はこちら、スケジュール*/ width:450px; } footer>.baseArea>div.scheduleArea>div>ul{/*診療予約はこちら、電話予約はこちら*/ width:100%; } footer>.baseArea>div.scheduleArea>div>ul>li.li01,/*診療予約はこちら*/ footer>.baseArea>div.scheduleArea>div>ul>li.li02{/*電話予約はこちら*/ padding:25px 0; } footer>.baseArea>div.scheduleArea>div>ul>li.li02{/*2つ目「電話予約はこちら」*/ margin-top:25px; } footer>.baseArea>div.scheduleArea>div>ul>li.li01>span, footer>.baseArea>div.scheduleArea>div>ul>li.li02>span{ width:450px; max-width:450px; margin:0 auto 0 0; font-size:20px; text-align:center; text-align-last:center; float:left; } footer>.baseArea>div.scheduleArea>div>ul>li.li01>p{/*ボタン「WEB予約」*/ margin:12px auto 0 0 !important; float:left; } footer>.baseArea>div.scheduleArea>div>ul>li.li02>div{/*TEL、テキスト*/ height:auto; width:100%; margin:12px auto 0 0 !important; } footer>.baseArea>div.scheduleArea>div>ul>li.li02>div>a{/*TEL*/ font-size:40px; text-align:center; text-align-last:center; } footer>.baseArea>div.scheduleArea>div>ul>li.li02>div>a>img{/*TELマーク（画像）*/ height:auto; width:48px; margin-top:-2px; } footer>.baseArea>div.scheduleArea>div>ul>li.li02>div>a>span{/*03-1234-5678*/ margin-top:10px; margin-left:-15px; font-size:40px; font-weight:bold; } footer>.baseArea>div.scheduleArea>div>ul>li.li02>div>p{/*テキスト*/ width:100%; margin-top:0; text-align:center; text-align-last:center; font-size:17px; } footer>.baseArea>div.scheduleArea>div>table{/*スケジュール*/ width:100%; margin-top:25px; } footer>.baseArea>div.scheduleArea>div>table>tbody>tr>th{ width:106px; font-size:17px; } footer>.baseArea>div.scheduleArea>div>table>tbody>tr>td{ width:53px; font-size:17px; } /*アドレス･･･････････････････････････････････････････････････*/ footer>.baseArea>address>a>img{ height:130px; width:auto; } footer>.baseArea>address>p{/*テキスト*/ text-align:left; text-align-last:left; font-size:17px; float:left; } footer>.baseArea>address>div{/*SNS*/ float:left; } footer>.baseArea>address>div>ul{/*リスト*/ width:220px; margin-left:calc((100% - 220px)/2); } footer>.baseArea>address>div>ul>li>a>img{/*アイコン画像*/ height:30px; width:32px; } /*ナビゲーション･････････････････････････････････････････････*/ footer>.baseArea>nav{ height:auto; width:500px; padding:0 !important; } footer>.baseArea>nav>ul{/*リスト*/ display:inline-block; height:auto; width:100%; margin-left:0; text-align:center; text-align-last:center; } footer>.baseArea>nav>ul>li{ height:auto; width:100%; border-top:solid 1px var(--Gray_03); } footer>.baseArea>nav>ul>li>a{ height:auto; width:100%; padding:1.1em 0 !important; font-size:20px; text-align:center; text-align-last:center; background-color:var(--Cyan_05); } /*コピーライト･･･････････････････････････････････････････････*/ footer>.baseArea>p.copyright{ font-size:20px; } /************************************************************************************** メインイメージ・エリア **************************************************************************************/ /*キャッチコピー（メインイメージ・エリア）･･･････････････････*/ #mi_area{ height:66.66666666666666vh; min-height:66.66666666666666vh; max-height:66.66666666666666vh; overflow:hidden; } #mi_area .catchCopy{/*キャッチコピー*/ height:66.66666666666666vh; /*height:calc(66.66666666666666vh + 105px); //ボトム・ナビゲーション（#mi_bottomMenu）を非表示にした場合*/ } #mi_area .catchCopy>p>span.tategaki{ height:66.66666666666666vh; margin-top:75px; } #mi_area .catchCopy>p>span.yokogaki{/*「ヨコ書き」の場合････*/ top:auto; left:0; right:0; bottom:50px; height:auto; width:450px; } #mi_area .catchCopy>p>span.yokogaki>span{/*キャッチコピー*/ height:auto; width:100%; padding:0; font-size:40px; text-align:left; text-align-last:left; } #mi_area .catchCopy>p>span.yokogaki>span>span.slideShow_sentence{/*キャッチコピーの補足文*/ font-size:23px; } /*キャッチコピー（下層ページ／コンテンツ内で使用）･･･････････*/ .mi_area .catchCopy{/*キャッチコピー*/ height:250px; width:450px; margin-left:0; } .mi_area .catchCopy>p{/*テキスト*/ height:250px; } .mi_area .catchCopy>p>span{ font-size:20px; } .mi_area .catchCopy>p>span.yokogaki{ height:250px; margin-left:calc((100% - 450px) / 2); width:450px; } .mi_area .catchCopy>img.backImg{/*画像BOX*/ height:250px;/*100%*/ margin-left:calc((100% - 450px) / 2); width:450px; } .mi_area .catchCopy>p>span.yokogaki{ width:100%; min-width:450px; } /*サイド・ナビゲーション･････････････････････････････････････*/ #sideNavi{ display:none; } /*ボトム・ナビゲーション･････････････････････････････････････*/ #mi_bottomMenu{ bottom:0; } #mi_bottomMenu>li{ height:60px; max-height:60px; width:100%; overflow-y:hidden; animation:none; } #mi_bottomMenu>li:nth-of-type(n+2){/*2番目以降*/ border-top:solid 1px #fff; box-sizing:border-box; } #mi_bottomMenu>li:hover div{ animation:none; } #mi_bottomMenu>li>div>a:first-of-type{/*（01）サブタイトル*/ padding:13px 0 11px 0; pointer-events:auto; } #mi_bottomMenu>li>div>a:first-of-type:hover{ background-color:var(--Cyan_02); } #mi_bottomMenu>li>div>a:first-of-type>em{/*（01）*/ font-size:14px; } #mi_bottomMenu>li>div>a:first-of-type>p{/*サブタイトル*/ width:410px; height:30px; margin:5px 0px 0px 7px; font-size:17px; background:url(images/btn_gNaviMenu_slide_next2.png) right top no-repeat; } #mi_bottomMenu>li>div>a:last-of-type{/*詳しくはこちら*/ pointer-events:none; } #mi_bottomMenu>li>div>a:first-of-type>em>span{ height:30px; width:30px; } /*ハンバーガーメニュー ||| ･･････････････････････････････････*/ #gNaviIconMenu{ height:120vh; } #gNaviIconMenu>li>a>span{ font-size:17px; } /*パンくずリスト･････････････････････････････････････････････*/ #breadcrumbs *{ font-size:17px; } /************************************************************** pc・mobileの切り替え **************************************************************/ /*マウスオーバー････････････････*/ a:hover, .pointer:hover{ opacity:1.0; } /*pc・tablet・mobileの切り替え････*/ .pc{ display:none !important; } .tablet{ display:none !important; } .mobile{ display:block !important; } .mobile_none{/*「table td」など、mobileのみ非表示にする場合*/ display:none !important; } }