/* 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{/*要素をスコープとして定義*/ /*カスタムプロパティ【宣言】････････ 【呼び出し】････････････････････････････････････････････････････････*/ --Gray_00:#f6f6f6; /*灰色00 color:var(--Gray_00); */ --Gray_01:#e2e2e2; /*灰色01 color:var(--Gray_01); */ --Gray_02:#b0b2b2; /*灰色02 color:var(--Gray_02); */ --Gray_03:#333; /*灰色03 color:var(--Gray_03); */ --Gray_04:#f4f4f4; /*灰色04 color:var(--Gray_04); */ --Gray_05:#1a1d1d; /*灰色05 color:var(--Gray_05); */ --Gray_06:#898989; /*灰色06 color:var(--Gray_05); */ --Cyan_01:#cbe6c7; /*水色01 color:var(--Cyan_01); */ --Cyan_02:#6ba0b8; /*水色02 color:var(--Cyan_02); */ --Cyan_03:#176ab4; /*水色03 color:var(--Cyan_03); */ --Cyan_04:#0c9bb9; /*水色04 color:var(--Cyan_04); */ --Cyan_05:#1a6170; /*水色05 color:var(--Cyan_05); */ --Green_01:#1c7349; /*緑色01 --Side_Navi:var(--Gray_04); /*サイドメニュー color:var(--Side_Navi); */ --Side_Navi_Hover:var(--Gray_03); /*サイドメニュー（マウスオーバー） color:var(--Side_Navi_Hover); */ --Category_01:#00c100; /*カテゴリー01（緑） color:var(--Category_01); */ --Category_02:#ca5d00; /*カテゴリー02（茶色） color:var(--Category_02); */ --Category_03:#0000cb; /*カテゴリー03（青） color:var(--Category_03); */ --Category_04:#ca0000; /*カテゴリー04（赤） color:var(--Category_04); */ --Category_05:#bfc000; /*カテゴリー05（黄色） color:var(--Category_05); */ --Category_06:#00c1bf; /*カテゴリー06（水色） color:var(--Category_06); */ --Category_07:#cb00c1; /*カテゴリー07（紫） color:var(--Category_07); */ --Category_08:#007000; /*カテゴリー08（緑２） color:var(--Category_08); */ --Category_09:#703300; /*カテゴリー09（茶色２） color:var(--Category_09); */ --Category_10:#000070; /*カテゴリー10（青２） color:var(--Category_10); */ --Category_11:#700000; /*カテゴリー11（赤２） color:var(--Category_11); */ --Category_12:#6f7000; /*カテゴリー12（黄色２） color:var(--Category_12); */ --Category_13:#00706f; /*カテゴリー13（水色２） color:var(--Category_13); */ --Category_14:#70006b; /*カテゴリー14（紫２） color:var(--Category_14); */ --Category_15:#095109; /*カテゴリー15（緑３） color:var(--Category_15); */ --Category_16:#512909; /*カテゴリー16（茶色３） color:var(--Category_16); */ --Category_17:#090951; /*カテゴリー17（青３） color:var(--Category_17); */ --Category_18:#510909; /*カテゴリー18（赤３） color:var(--Category_18); */ --Category_19:#505109; /*カテゴリー19（黄色３） color:var(--Category_19); */ --Category_20:#095150; /*カテゴリー20（水色３） color:var(--Category_20); */ /*--Gradation_01:linear-gradient(90deg, #95d09b, #b5e3ac, #e3edc7, #e5f08f, #d0da5a 100%);*/ /*グラデーション01 color:var(Gradation_01); */ --txShadow_01:0 0 5px rgba(0,0,0,1.0); /*テキストにぼかし影01 text-shadow:var(--txShadow_01); */ --txShadow_02:0 0 7px rgba(0,0,0,1.0); /*テキストにぼかし影02 text-shadow:var(--txShadow_02); */ --txShadow_03:0 0 9px rgba(0,0,0,1.0); /*テキストにぼかし影03 text-shadow:var(--txShadow_03); */ --txShadow_04:0 0 11px rgba(0,0,0,1.0); /*テキストにぼかし影04 text-shadow:var(--txShadow_04); */ --txShadow_05:0 0 13px rgba(0,0,0,1.0); /*テキストにぼかし影05 text-shadow:var(--txShadow_05); */ --txShadow_06:0 0 15px rgba(0,0,0,1.0); /*テキストにぼかし影06 text-shadow:var(--txShadow_06); */ --imgFilter_01:brightness(91.66666666666666%) contrast(96.66666666666666%); /*画像フィルター01 filter:var(--imgFilter_01); */ --imgFilter_02:brightness(83.33333333333333%) contrast(93.33333333333333%); /*画像フィルター02 filter:var(--imgFilter_02); */ --imgFilter_03:brightness(75%) contrast(90%); /*画像フィルター03 filter:var(--imgFilter_03); */ --imgFilter_04:brightness(66.66666666666666%) contrast(86.66666666666666%); /*画像フィルター04 filter:var(--imgFilter_04); */ --imgFilter_05:brightness(58.33333333333333%) contrast(83.33333333333333%); /*画像フィルター05 filter:var(--imgFilter_05); */ --imgFilter_06:brightness(50%) contrast(80%); /*画像フィルター06 filter:var(--imgFilter_06); */ --imgFilter_07:brightness(41.66666666666666%) contrast(76.66666666666666%); /*画像フィルター07 filter:var(--imgFilter_07); */ --imgFilter_08:brightness(33.33333333333333%) contrast(73.33333333333333%); /*画像フィルター08 filter:var(--imgFilter_08); */ --imgFilter_09:brightness(25%) contrast(70%); /*画像フィルター09 filter:var(--imgFilter_09); */ --imgFilter_10:brightness(16.66666666666666%) contrast(76.66666666666666%); /*画像フィルター10 filter:var(--imgFilter_10); */ /*･･････････････････････････････････ ･･･････････････････････････････････････････････････････････････････*/ } /*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); } /********************************************************************************************************************************* 汎用アニメーション *********************************************************************************************************************************/ /*････････････････････････････････････････････････････････････････････････････････････ 【 マウスオーバー・アニメーション（画像ズーム）】 a>img{ object-fit:cover; object-position:center; transform-origin:center; animation:img_zoomOut 0.25s ease-out forwards; } a:hover >img{ animation:img_zoomIn 0.25s ease-out forwards; } } ････････････････････････････････････････････････････････････････････････････････････*/ @keyframes img_zoomIn{/*マウスオーバー・アニメーション１*/ from{/*デフォルト*/ transform:scale(1.0); } to{ transform:scale(1.12); } } @keyframes img_zoomOut{ from{/*デフォルト*/ transform:scale(1.12); } to{ transform:scale(1.0); } } @keyframes img_zoomIn2{/*マウスオーバー・アニメーション２*/ from{/*デフォルト*/ transform:scale(1.0); } to{ transform:scale(1.2); } } @keyframes img_zoomOut2{ from{/*デフォルト*/ transform:scale(1.2); } to{ transform:scale(1.0); } } /*････････････････････････････････････････････････････････････････････････････････････ 【 画像のズームイン・アニメーション 】 　・jQueryで開始時間（待ち時間）を設定してクラスを付与する（.img_zoomANM02 など） 　・透明から変化させる場合は、対象オブジェクトをCSS初期設定で「opacity:0」にしておく .mainVisual{ opacity:0; } ････････････････････････････････････････････････････････････････････････････････････*/ .img_zoomANM01{ animation:img_zoomANM01 7.0s linear forwards;/*forwards = 完了後は停止*/ } @keyframes img_zoomANM01{ 0%{/*デフォルト*/ transform:scale(1.0); opacity:0; } 7%{ opacity:1; } 93%{ opacity:1; } 100%{ transform:scale(1.1); opacity:0; } } .img_zoomANM02{ animation:img_zoomANM02 7.0s ease forwards;/*forwards = 完了後は停止*/ } @keyframes img_zoomANM02{ 0%{/*デフォルト*/ transform:scale(1.0); opacity:0; } 7%{ opacity:1; } 100%{ transform:scale(1.1); opacity:1; } } /*････････････････････････････････････････････････････････････････････････････････････ 【 スクロールした時、オブジェクトが画面内に入ったら下からフワッと浮き上がらせる 】 　・対象オブジェクトには「class="fadeUp_obj"」を付与しておく 　

********

････････････････････････････････････････････････････････････････････････････････････*/ .fadeUp_obj{ opacity:0; transform:translateY(20px); } .fadeUp_obj.is-show{ animation:fadeUp_obj 1.6s linear forwards; } @keyframes fadeUp_obj{ 0%{/*デフォルト*/ opacity:0; transform:translateY(20px); } 75%{ opacity:0; transform:translateY(20px); } 100%{ opacity:1; transform:translateY(0); } } /*････････････････････････････････････････････････････････････････････････････････････ 【 メインビジュアルのキャッチコピーなどをフワッと浮き上がらせて表示 】 　・jQueryで開始時間（待ち時間）を設定してクラスを付与する（.is-active-40 など） 　・透明から変化させる場合は、対象オブジェクトをCSS初期設定で「opacity:0」にしておく .subTitle, .catchCopy{ opacity:0; } ････････････････････････････････････････････････････････････････････････････････････*/ .is-active-40{ animation:fade-up-40 0.6s ease-out forwards; } .is-active-30{ animation:fade-up-30 0.55s ease-out forwards; } @keyframes fade-up-40{ from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } } @keyframes fade-up-30{ from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } } /*････････････････････････････････････････････････････････････････････････････････････ 【 マウスオーバー時に、左から背景オブジェクトをスライドインさせる 】 ････････････････････････････････････････････････････････････････････････････････････*/ .mainVisual>a{/*トリガー*/ } .mainVisual>a::before{/*背景オブジェクト*/ z-index:-1; /*テキストの裏側に配置*/ content:""; position:absolute; top:0; left:-100%; /*最初は左側に完全に隠しておく*/ width:100%; height:680px; background-color:green; clip-path:polygon(0% 0%, 50% 0, calc(50% - 340px) 100%, 0% 100%);/*台形にカット*/ transition:left 0.3s ease; /*アニメーション設定*/ } .mainVisual>a:hover::before{ left:0; /*背景を初期位置（左端 0）に戻す*/ } /********************************************************************************************************************************* フレーム（基本） *********************************************************************************************************************************/ 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; padding-top:100px; /*sectionに背景色を付ける場合*/ padding-bottom:100px; /*sectionに背景色を付ける場合*/ text-align:center; text-align-last:center; } #contents>article>.baseArea, #contents>section>.baseArea{ display:inline-block; width:100%; max-width:1200px; 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){ } /*タイトル（英語表記）･･･････････････････････････････････････*/ #contents>article>.baseArea>div:not(#wpContents)>em, #contents>section>.baseArea>div:not(#wpContents)>em, #contents>article>.baseArea>div:not(#wpContents)>h2, #contents>section>.baseArea>div:not(#wpContents)>h2, #contents>article>.baseArea>div:not(#wpContents)>h3, #contents>section>.baseArea>div:not(#wpContents)>h3, #contents>article>.baseArea>div:not(#wpContents)>h4, #contents>section>.baseArea>div:not(#wpContents)>h4, #contents>article>.baseArea>div:not(#wpContents)>p, #contents>section>.baseArea>div:not(#wpContents)>p{ position:relative; z-index:50; width:100%; max-width:1100px; text-align:center; text-align-last:center; } /*タイトル（英語表記）･･･････････････････････････････････････*/ #contents>article>.baseArea>div:not(#wpContents)>em, #contents>section>.baseArea>div:not(#wpContents)>em{ color:var(--Cyan_04); font-size:73%; /*11px*/ font-weight:bold; letter-spacing:0.1em; } /*タイトル･･･････････････････････････････････････････････････*/ #contents>article>.baseArea>div:not(#wpContents)>h2, #contents>section>.baseArea>div:not(#wpContents)>h2{ color:black !important; } #contents>article>.baseArea>div:not(#wpContents)>h2 + ul, #contents>section>.baseArea>div:not(#wpContents)>h2 + ul, #contents>article>.baseArea>div:not(#wpContents)>h2 + ol, #contents>section>.baseArea>div:not(#wpContents)>h2 + ol, #contents>article>.baseArea>div:not(#wpContents)>h2 + table, #contents>section>.baseArea>div:not(#wpContents)>h2 + table{ margin-top:50px; } #contents>article>.baseArea>div:not(#wpContents)>h2.btm_bl, #contents>section>.baseArea>div:not(#wpContents)>h2.btm_bl{ padding-bottom:0.4em; background:url(images/ico/h2_btmLine_bl.png) center bottom no-repeat; } #contents>article>.baseArea>div:not(#wpContents)>h2.btm_bk, #contents>section>.baseArea>div:not(#wpContents)>h2.btm_bk{ padding-bottom:0.4em; background:url(images/ico/h2_btmLine_bk.png) center bottom no-repeat; } #contents>article>.baseArea>div:not(#wpContents)>h2.btm_w, #contents>section>.baseArea>div:not(#wpContents)>h2.btm_w{ padding-bottom:0.4em; background:url(images/ico/h2_btmLine_w.png) center bottom no-repeat; } /*直後に

要素がある

の場合*/ #contents>article>.baseArea>div:not(#wpContents)>h2:has(+ p), #contents>section>.baseArea>div:not(#wpContents)>h2:has(+ p){ margin:-5px auto 0 0; } /*サブタイトル･･･････････････････････････････････････････････*/ #contents>article>.baseArea>div:not(#wpContents)>h3, #contents>section>.baseArea>div:not(#wpContents)>h3{ z-index:50; width:100%; max-width:1100px; text-align:left; text-align-last:left; background:url(images/ico/h3_line.png) left center no-repeat; } #contents>article>.baseArea>div:not(#wpContents)>h3>span, #contents>section>.baseArea>div:not(#wpContents)>h3>span{ display:inline-block; padding-left:80px; } /*サブタイトル下のテキスト･･･････････････････････････････････*/ #contents>article>.baseArea>div:not(#wpContents)>h4, #contents>section>.baseArea>div:not(#wpContents)>h4{ margin:0 auto 2.0em auto; 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{ 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)>h2 + p, #contents>section>.baseArea>div:not(#wpContents)>h2 + p{ margin:1.7em auto 2.6em auto; } /*タイトル・サブタイトル・テキストの余白（下）を削除･････････*/ #contents>article>.baseArea>div:not(#wpContents) *.btm_delete, #contents>section>.baseArea>div:not(#wpContents) *.btm_delete{ margin-bottom:0; } /*caption01（※ 会社説明会動画では…）･･･････････････････････*/ .caption01{ display:inline-block; } .caption01>a{ display:inline-block; width:auto !important; padding:16px 38px; background-color:#ffeadf; border:solid 1px #deb98a; box-sizing:border-box; } .caption01>a>img{/*サムネイル画像*/ display:inline-block; height:80px; width:auto; margin-right:1.0em; } .caption01>a>span{/*テキスト*/ display:inline-block; white-space:nowrap;/*改行禁止*/ } /*ボタン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:52px; width:100%; min-width:324px; margin-top:77px !important; text-align:center; text-align-last:center; } footer>.baseArea p.btn01, footer>.baseArea p.btn01{ width:324px; 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:52px; width:auto; min-width:324px; } #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:52px; width:auto; min-width:324px; color:white; font-weight:500; text-align:center; text-align-last:center; vertical-align:middle; background-color:#1d683f; 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(--Gray_06); } /********************************************************************************************************************************* ヘッダー（グローバルナビ） *********************************************************************************************************************************/ #gNavi{ z-index:960; position:fixed; top:0; height:84px; width:1200px; pointer-events:none;/*ヘッダー背景は#gShieldクリック時に反応*/ box-sizing:border-box; padding: 0 50px; right: 0; left: 0; margin: 0 auto; } #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; } body:has(#gNavi>div a:hover) #gNavi_bg{ background-color: white!important; filter:none!important; } body:has(#gNavi>div a:hover) #gNavi>div a { color:var(--Green_01)!important; } body:has(#gNavi>div a:hover):not(:has(.bg-white)) a img.no-hover { display: none; } body:has(#gNavi>div a:hover):not(:has(.bg-white)) a img.hover { display: block; } body:has(#gNavi>div a:hover) #gNaviMenu .is-active { border-bottom: solid 4px var(--Green_01); } /*･････････････････････････････*/ #gNavi>div>h1{/*ロゴ*/ float:left; margin:25px auto auto 0; } #gNavi>div>h1 img{ height:28px; width:auto; } #gNavi>div a:hover img.no-hover{ display: none; } #gNavi>div a img.hover{ display: none; } #gNavi>div a:hover img.hover{ display: block; } .gNaviIcon{/*アイコン ||| */ display:none; height:50px; width:50px; margin:17px 15px auto auto; float:right; } #gNaviIconMenu{/*ハンバーガーメニュー ||| */ display:none; position:absolute; /*topは「ic/JSobj_gNavi.php」で制御*/ left:0; width:100%; padding-bottom:20%; background-color:var(--Gray_03); } #gNaviIconMenu>li{ border-bottom:solid 1px white; box-sizing:border-box; float:left;/*Mobile横向き対策*/ overflow:hidden;/*Mobile横向き対策*/ background-color:var(--Gray_06); } #gNaviIconMenu>li>a{ width:100%; display:block; text-align:center; text-align-last:center; } #gNaviIconMenu>li>a>span{ /*heightとwidthは「ic/JSobj_gNavi.php」で制御*/ display:table-cell; color:white; text-align:center; text-align-last:center; vertical-align:middle; } #gNaviMenu{/*ナビメニュー･････････････*/ width:auto; max-width:950px; margin:25px 0 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; padding: 5px 0; } #gNaviMenu>li>a:hover{ /* border-bottom:solid 5px var(--Green_01); */ } #gNaviMenu>li>a:hover::after { content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--Green_01); } #gNaviMenu .is-active { border-bottom: solid 4px white; pointer-events: none; } body:has(.bg-white) #gNaviMenu .is-active { border-bottom: solid 4px var(--Green_01); } #gNaviMenu>li.btn_goContact{/*「お問い合わせ」ボタン*/ background-color:var(--Cyan_03); } #gNaviMenu>li.btn_goContact>a{ color:white; } /*通常リスト、グリッドエリア（横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:1200px; margin:21px auto 0 calc((100% - 1200px)/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:1200px; margin:21px auto 0 calc((100% - 1200px)/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; } /*「c1、c2、カードリスト、一覧リスト、タブBOX」ボタン（※コンテンツページの表示）････････*/ #gNavi_dumBtn{ position:absolute; top:8px; right:14px; } #gNavi_dumBtn>li{ display:inline-block; max-height:1em; margin-right:-5px; padding:1px 5px 0 5px; overflow:hidden; border:solid 1px rgba(255, 255, 255, 0.5); background-color:rgba(255, 255, 255, 0.15); } #gNavi_dumBtn>li>a>span{ color:rgba(255, 255, 255, 0.75) !important; font-size:13px; } /*ヘッダーの背景色･･････････････*/ #gNavi_bg{ z-index:940; position:fixed; top:0; left:0; right:0; bottom:auto; margin:auto; height:84px; width:100%;/*中央部のみ背景表示（両端は非表示）させたい場合は「1200px」など*/ background-color:rgba(255, 255, 255, 0);/*「JSobj_gNavi.php」で制御*/ } /*ヘッダーカバー（サブメニュー開いた時の本体保護層）･･････････････*/ #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:84px; width:84px; } /********************************************************************************************************************************* フッター *********************************************************************************************************************************/ /*･････････････････････････････････････････････････････････････ #footer-A02 ･････････････････････････････････････････････････････････････*/ #footer-A02{ z-index:900; margin-top:90px; padding-top:78px; background-color:#898989; text-align:center; text-align-last:center; } #footer-A02>.baseArea{ max-width:1100px; } #footer-A02>*{ /*暫定処理*/ width: 1100px!important; padding: 0 50px; } #footer-A02 *{ display:inline-block; width:100%; color:white !important; } /*ナビゲーション･････････････････････････････････････････････*/ #footer-A02>.baseArea>nav{ } #footer-A02>.baseArea>nav>ul{ display:flex; /*フレキシブル・コンテナ*/ flex-direction:row; /*水平方向*/ justify-content:space-between; /*子要素を均等間隔で並べる*/ } #footer-A02>.baseArea>nav>ul>li{ width:120px; } #footer-A02>.baseArea>nav>ul>li:nth-of-type(3){/*3番目*/ width:160px; } #footer-A02>.baseArea>nav>ul>li:nth-of-type(5){/*5番目*/ width:130px; } #footer-A02>.baseArea>nav>ul>li>ul{ } #footer-A02>.baseArea>nav>ul>li>ul>h5{ padding-bottom:23px; } #footer-A02>.baseArea>nav>ul>li>ul>h5>a{ font-size:14px; white-space:nowrap;/*改行禁止*/ } #footer-A02>.baseArea>nav>ul>li>ul>li{ } #footer-A02>.baseArea>nav>ul>li>ul>li>a{ padding:0.45em 0; font-size:13px; white-space:nowrap;/*改行禁止*/ } #footer-A02>.baseArea>nav>ul>li>ul:not(.standard)>li>a::before{ content:"－ ";/*文字の追加*/ } /*ロゴ･･･････････････････････････････････････････････････････*/ #footer-A02>em{ width:100%; margin-top:103px; text-align:center; text-align-last:center; } #footer-A02>em>a{ width:196px; } #footer-A02>em>a>img{ height:59px; width:196px; } /*コピーライト･･･････････････････････････････････････････････*/ #footer-A02>p.copyright{ width:100%; margin-top:50px; padding-bottom:54px; font-size:12px; text-align:center; text-align-last:center; } /********************************************************************************************************************************* コンテンツ *********************************************************************************************************************************/ /*矢印（＞）･･･････････････････････････････････････････････････････*/ a:not(.no-link) .arrow_l{ width:auto !important; padding-left:32px; background:url(images/ico/ico_topPickup_arrow.png) left center no-repeat; } .arrow_r{ width:auto !important; padding-right:32px; background:url(images/ico/ico_topPickup_arrow.png) right center no-repeat; } /*矢印2（＞）･･････････････････････････････････････････････････････*/ .arrow_w_l{ width:auto !important; padding-left:32px; background:url(images/ico/ico_topPickup_arrow_w.png) left center no-repeat; } .arrow_w_r{ width:auto !important; padding-right:32px; background:url(images/ico/ico_topPickup_arrow_w.png) right center no-repeat; } /*下層ページ／メインビジュアル ･･････････････････････････････*/ #main_visual{ position:relative; height:484px; width:100vw; overflow:hidden; background-color:#dadada; } #main_visual>div{/*タイトル*/ z-index:400; position:absolute; top:0; left:0; height:100%; width:100%; } #main_visual>div>p{ display:flex;/*子要素を中央配置*/ place-items:center; height:100%; width:1200px; margin: 0 auto; } #main_visual>div>p>span{/*キャッチコピー*/ display:inline-block; width:1100px; max-width:1100px; /* width:1060px; max-width:1060px; margin-left:calc((100% - 1060px)/2); */ /* padding-top:42px; */ margin: 0 auto; padding:42px 50px 0; color:white; text-align:left; text-align-last:left; } #main_visual>div>p>span>span.category{/*カテゴリー*/ display:inline-block; width:100%; font-size:16px; } #main_visual>div>p>span>span.catchcopy{/*キャッチコピー*/ display:inline-block; width:100%; margin-top:20px; font-size:50px; font-weight:bold; line-height:1.5em; } #main_visual>div>p>span>span.category,/*カテゴリー*/ #main_visual>div>p>span>span.catchcopy{/*キャッチコピー*/ opacity:0; } .is-active-40{ animation:fade-up-40 0.6s ease-out forwards; } .is-active-30{ animation:fade-up-30 0.55s ease-out forwards; } #main_visual>.bk_filter{/*ぼかし影*/ z-index:300; position:absolute; display:inline-block; top:auto; left:calc(((100% - 1200px)/2) + 70px); right:auto; bottom:185px; margin:auto; height:50px; width:500px; background-color:black; filter:blur(120px) opacity(100%);/*ぼかし効果*/ mix-blend-mode:multiply;/*乗算*/ } #main_visual>img{/*背景画像*/ z-index:200; position:absolute; top:0; left:0; height:100%; width:100%; object-fit:cover; object-position:center center; } /*キャッチコピー（下層ページ／コンテンツ・ビジュアル）････*/ .mi_area .catchCopy{/*キャッチコピー*/ z-index:100; display:inline-block; position:relative; top:0; left:0; right:auto; bottom:auto; height:484px; width:1200px; margin:0 auto 0 calc((100% - 1200px)/2); text-align:center; text-align-last:center; } .mi_area .catchCopy>p{/*テキスト*/ z-index:100; position:relative; display:inline-block; height:484px; width:100%; max-width:1200px; text-align:center; text-align-last:center; background:var(--Filter_contentImageBK); } .mi_area .catchCopy>p>span{ display:table-cell; height:484px; width:100%; min-width:1200px; color:white; font-size:27px; text-align:center; text-align-last:center; vertical-align:middle; } .mi_area .catchCopy>p>span.yokogaki{/*横書き*/ } .mi_area .catchCopy>img.backImg{/*画像BOX*/ z-index:50; display:inline-block; position:absolute; top:0; left:0; right:auto; bottom:auto; height:484px; width:100%; max-width:1200px; object-fit:cover; object-position:center center; } /*バナーエリア･････････････････････････････････････････････････････*/ #bannerArea{ padding-bottom: 0!important; } .bannerArea01{ display:inline-block; width:1100px; max-width:1100px; /*margin-left:calc((100% - 1100px)/2);*/ padding-top:145px; border-top:solid 1px var(--Gray_03); } .bannerArea01 *{ display:inline-block; width:100%; color:white; } .bannerArea01>li{ height:450px; width:540px; float:left; } .bannerArea01>li:last-of-type{ float:right; } .bannerArea01>li *{ display:inline-block; width:100%; } .bannerArea01>li>a{ height:450px; width:540px; min-height:338px; min-width:406px; padding:90px 65px 52px 65px; box-sizing:border-box; font-size:35px; background:url(images/banner/share01.jpg) center top no-repeat; } .bannerArea01>li:nth-of-type(2)>a{/*上から2番目*/ float:right; background:url(images/banner/share02.jpg) center top no-repeat; } .bannerArea01>li>a>h4{ font-size:35px; } .bannerArea01>li>a>p{ margin-top:20px; font-size:20px; } .bannerArea01>li>a>div{ margin-top:45px; border:solid 1px white; box-sizing:border-box; text-align:center; text-align-last:center; } .bannerArea01>li>a>div>span{ width:auto; padding:21px 0; font-size:20px; } /********************************************************************************************************************************* ページネーション *********************************************************************************************************************************/ .pagenation{ margin-top:70px !important; } .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:10px;/*アイコン間の余白*/ border:solid 1px #1d683f; box-sizing:border-box; } .pagenation li:first-child{ margin-left:0; } .pagenation li.active, .pagenation li a{/*アクティブ＆他ページのアイコン（共通）*/ color:white; font-size:1.8rem; padding:1.3rem 1.6rem; letter-spacing:0; line-height:1.0em; background-color:white; } .pagenation li.active{/*アクティブ・アイコン*/ background-color:#1d683f; cursor:not-allowed; } .pagenation li a{/*他ページ・アイコン*/ display:block; color:black; background-color:white;/*非アクティブ*/ } .pagenation li a:hover{/*他ページ・アイコン（マウスオーバー時）*/ color:white; background-color:#1d683f; 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; } .pc_inline{ display:inline!important; } .tablet{ display:none; } .mobile{ display:none !important; } /********************************************************************************************************************************* メディアクエリ（ ～1200px以下 ） *********************************************************************************************************************************/ @media(max-width:1200px){ /************************************************************************************** フレーム（基本） **************************************************************************************/ /*･････････････････････････････････････････････････････････････ footer-A02 ･････････････････････････････････････････････････････････････*/ /* footer>.baseArea{ width:95%; } footer>.baseArea>nav>ul.nav{リスト width:100%; } */ /*･････････････････････････････････････････････････････････････ footer-B01 ･････････････････････････････････････････････････････････････*/ /* #contents>article>.baseArea>div:not(#wpContents)>p>span, #contents>section>.baseArea>div:not(#wpContents)>p>span{ max-width:100%; } #footer-B01>.baseArea>div.scheduleArea>div{「診療予約はこちら、電話予約はこちら」「スケジュール」 width:488px; } #footer-B01>.baseArea>div.scheduleArea>div>table{スケジュール margin-top:14px; } */ /*ナビゲーション･････････････････････････････････････････････*/ /* #footer-B01>.baseArea>nav{ height:auto; padding:23px 0 10px 0; } #footer-B01>.baseArea>nav>ul{リスト display:inline-block; height:auto; width:100%; margin-left:0; text-align:center; text-align-last:center; } #footer-B01>.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; } */ } /********************************************************************************************************************************* メディアクエリ（ ～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:28px; line-height:1.7em; margin:10px auto 0 auto; width:450px; } #contents>article>.baseArea>div:not(#wpContents)>h3, #contents>section>.baseArea>div:not(#wpContents)>h3{ background:none; } #contents>article>.baseArea>div:not(#wpContents)>h3>span, #contents>section>.baseArea>div:not(#wpContents)>h3>span{ padding:1.0em 0 0 0; font-size:28px; line-height:1.5em; letter-spacing:0; } /*テキスト･･･････････････････････････････････････････････････*/ #contents>article>.baseArea>div:not(#wpContents)>p, #contents>section>.baseArea>div:not(#wpContents)>p{ margin:40px auto 54px auto; font-size:19px; line-height:1.5em; 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; text-align:justify; text-align-last:left; } #contents>article>.baseArea>div:not(#wpContents)>p br, #contents>section>.baseArea>div:not(#wpContents)>p br{ display:none; } /*caption01（※ 会社説明会動画では…）･･･････････････････････*/ .caption01{ margin-top:0 !important; } .caption01>a{ padding:24px; width:450px !important; } .caption01>a>img{/*サムネイル画像*/ height:auto; width:100%; margin-right:0; } .caption01>a>span{/*テキスト*/ margin-top:13px; white-space:normal;/*改行有効（初期値）*/ word-break:break-word;/*単語がコンテンツボックスからはみ出す場合は、改行を挿入する*/ } /*電光掲示板････････････････････････････････････････････････････････*/ #contents>section#keijiban{ padding:10px 0 10px 0; background:var(--Gray_01); } #contents>section#keijiban>.baseArea{/*baseArea*/ height:34px; } #keijiban>div>table{/*表示範囲*/ display:none !important; } #keijiban>div>a{/*お知らせ一覧 ＞*/ height:34px; max-height:34px; width:100%; max-width:100%; font-size:18px; font-weight:bold; } /*ボタン01（遷移）･･･････････････････････････････････････････*/ #contents>article>.baseArea p.btn01, #contents>section>.baseArea p.btn01, #footer-B01>.baseArea p.btn01, #footer-B01>.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-B01>.baseArea p.btn01>span, #footer-B01>.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-B01>.baseArea p.btn01>span:nth-of-type(n+2), #footer-B01>.baseArea p.btn01>span:nth-of-type(n+2){/*2番目以降*/ margin-top:36px; margin-left:auto; } #contents>article>.baseArea p.btn01>span>a, #contents>section>.baseArea p.btn01>span>a, #footer-B01>.baseArea p.btn01>span>a, #footer-B01>.baseArea p.btn01>span>a{ font-size:19px; } /*シールド･･････････････････････ iOSでメニュー（fixed要素）表示時にスクロールすると、ツールバーが消える一瞬背景が見えるバグ対策（症状の軽減）*/ #gShield{ position:absolute; background-color:#004d9c; } /************************************************************************************** ヘッダー（グローバルナビ） **************************************************************************************/ #gNavi{ width: 100%; padding: 0; } #gNavi>div>h1{/*ロゴ*/ margin:25px auto auto 25px; } .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; } /************************************************************************************** フッター **************************************************************************************/ /*･････････････････････････････････････････････････････････････ footer-A02 ･････････････････････････････････････････････････････････････*/ footer{ margin-top:0; } #footer-A02>* { width: calc(100% - 50px) !important; padding:0; margin: 0 auto; } /*アドレス･･･････････････････････････････････････････････････*/ footer>.baseArea>address{ display:inline-block; } footer>.baseArea>address>div>p{/*テキスト*/ line-height:1.75em; } /*ナビゲーション･････････････････････････････････････････････*/ footer>.baseArea>nav{ display:inline-block; height:auto; margin-top:50px; } footer>.baseArea>nav>ul{ height:auto; } #footer-A02>.baseArea>nav>ul{ flex-direction: column; gap: 100px; } footer>.baseArea>nav>ul.nav{/*リスト*/ display:inline-block; height:auto; } footer>.baseArea>nav>ul.nav>li{ width:100%; border:solid 1px gray; box-sizing:border-box; } #footer-A02>.baseArea>nav>ul>li>ul>li:not(:first-child){ margin-top:20px; } footer>.baseArea>nav>ul.nav>li>a{ width:100%; padding:40px 0 !important; text-align:center; text-align-last:center; } footer>.baseArea>nav>ul.sns{/*SNS*/ width:100%; margin-top:50px; float:left; display:flex; place-items:center; } footer>.baseArea>nav>ul.sns>li{ margin:0 auto; } footer>.baseArea>nav>ul.sns>li>a>img{ height:48px; width:48px; } /*コピーライト･･･････････････････････････････････････････････*/ footer>p.copyright{ margin-top:50px; } /*･････････････････････････････････････････････････････････････ footer-B01 ･････････････････････････････････････････････････････････････*/ /* #footer-B01{ margin-top:50px; } */ /*バナーエリア･･･････････････････････････････････････････････*/ /* #footer-B01>.baseArea>div.bannerY4{ height:600px; } #footer-B01>.baseArea>div.bannerY4>div>ul>li{ height:150px; width:100%; } #footer-B01>.baseArea>div.bannerY4>div>ul>li:nth-of-type(n+2){2番目以降 border-top:solid 1px lightgray; } #footer-B01>.baseArea>div.bannerY4>div>ul>li>a:hover img.bg_img{背景画像 transform:scale(1.0);拡大・縮小 transition:0;秒 filter:brightness(57%) saturate(76%);明るさ、彩度 } #footer-B01>.baseArea>div.bannerY4>div>ul>li>a>p{テキストエリア } #footer-B01>.baseArea>div.bannerY4>div>ul>li>a>p>span{テキスト font-weight:bold; } #footer-B01>.baseArea>div.bannerY4>div>ul>li>a:hover p>span{テキストの背景 background:none; } #footer-B01>.baseArea>div.bannerY4>div>ul>li>a img.corner{コーナー画像 opacity:0; } */ /*営業スケジュール･･･････････････････････････････････････････*/ /* #footer-B01>.baseArea>div.scheduleArea>h3{診療科目 width:100%; margin-left:0; font-size:20px; } #footer-B01>.baseArea>div.scheduleArea>p{一般歯科・予防歯科・口腔･･･ width:450px; margin-left:25px; font-size:17px; float:left; } #footer-B01>.baseArea>div.scheduleArea>div{診療予約はこちら、電話予約はこちら、スケジュール width:450px; } #footer-B01>.baseArea>div.scheduleArea>div>ul{診療予約はこちら、電話予約はこちら width:100%; } #footer-B01>.baseArea>div.scheduleArea>div>ul>li.li01,診療予約はこちら #footer-B01>.baseArea>div.scheduleArea>div>ul>li.li02{電話予約はこちら padding:25px 0; } #footer-B01>.baseArea>div.scheduleArea>div>ul>li.li02{2つ目「電話予約はこちら」 margin-top:25px; } #footer-B01>.baseArea>div.scheduleArea>div>ul>li.li01>span, #footer-B01>.baseArea>div.scheduleArea>div>ul>li.li02>span{ width:450px; max-width:450px; margin:0 auto 0 0; font-size:22px; text-align:center; text-align-last:center; float:left; } #footer-B01>.baseArea>div.scheduleArea>div>ul>li.li01>p{ボタン「WEB予約」 margin:12px auto 0 0 !important; float:left; } #footer-B01>.baseArea>div.scheduleArea>div>ul>li.li02>div{TEL、テキスト height:auto; width:100%; margin:12px auto 0 0 !important; } #footer-B01>.baseArea>div.scheduleArea>div>ul>li.li02>div>a{TEL font-size:40px; text-align:center; text-align-last:center; } #footer-B01>.baseArea>div.scheduleArea>div>ul>li.li02>div>a>img{電話アイコン height:auto; width:50px; margin-top:0; } #footer-B01>.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-B01>.baseArea>div.scheduleArea>div>ul>li.li02>div>p{テキスト width:100%; margin-top:0; text-align:center; text-align-last:center; } #footer-B01>.baseArea>div.scheduleArea>div>table{スケジュール width:100%; margin-top:25px; } #footer-B01>.baseArea>div.scheduleArea>div>table>tbody>tr>th{ width:106px; font-size:22px; } #footer-B01>.baseArea>div.scheduleArea>div>table>tbody>tr>td{ width:53px; font-size:22px; } */ /*アドレス･･･････････････････････････････････････････････････*/ /* #footer-B01>.baseArea>address>a>img{ height:130px; width:auto; } #footer-B01>.baseArea>address>p{テキスト text-align:left; text-align-last:left; font-size:21px; float:left; } #footer-B01>.baseArea>address>div{SNS float:left; } #footer-B01>.baseArea>address>div>ul{リスト width:220px; margin-left:calc((100% - 220px)/2); } #footer-B01>.baseArea>address>div>ul>li>a>img{アイコン画像 height:30px; width:32px; } */ /*ナビゲーション･････････････････････････････････････････････*/ /* #footer-B01>.baseArea>nav{ height:auto; width:500px; padding:0 !important; } #footer-B01>.baseArea>nav>ul{リスト display:inline-block; height:auto; width:100%; margin-left:0; text-align:center; text-align-last:center; } #footer-B01>.baseArea>nav>ul>li{ height:auto; width:100%; border-top:solid 2px var(--Gray_03); } #footer-B01>.baseArea>nav>ul>li:first-of-type{ border:none; } #footer-B01>.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-B01>.baseArea>p.copyright{ font-size:20px; } */ /************************************************************************************** コンテンツ **************************************************************************************/ /*下層ページ／メインビジュアル ･･････････････････････････････*/ #main_visual{ position:relative; height:680px; width:100vw; overflow:hidden; } #main_visual>div{/*タイトル*/ z-index:400; position:absolute; top:0; left:0; height:100%; width:100%; max-width: 1200px; } #main_visual>div>p{ display:flex;/*子要素を中央配置*/ place-items:center; height:100%; width:calc(100% - 50px); } #main_visual>div>p>span{/*テキスト*/ display:inline-block; width:100%; padding: 42px 0 0; color:white; font-size:31px; font-weight:bold; text-align:center; text-align-last:center; } #main_visual>.bk_filter{/*ぼかし影*/ z-index:300; position:absolute; display:inline-block; top:auto; left:0; right:0; bottom:185px; margin:auto; height:250px; width:500px; background-color:black; filter:blur(200px) opacity(100%);/*ぼかし効果*/ mix-blend-mode:multiply;/*乗算*/ } #main_visual>img{/*背景画像*/ z-index:200; position:absolute; top:0; left:0; height:100%; width:100%; object-position: calc(50% - 170px) center; } /*キャッチコピー（下層ページ／コンテンツ内で使用）･･･････････*/ .mi_area .catchCopy{/*キャッチコピー*/ height:250px; width:450px; margin-left:0; } .mi_area .catchCopy>p{/*テキスト*/ height:250px; } .mi_area .catchCopy>p>span{ height:250px; min-width:450px; margin-left:0 !important; font-size:28px; } .mi_area .catchCopy>img.backImg{/*画像BOX*/ height:250px; width:450px; margin-left:0; } /*バナーエリア･････････････････････････････････････････････････････*/ #bannerArea{ width: calc(100% - 50px)!important; margin: 0 auto; } .bannerArea01>li{ height: auto; width: auto; } .bannerArea01>li+li{ margin-top:25px; } .bannerArea01>li>a{ height: auto; width: 100%; padding: 90px 25px 52px; } /*サイド・ナビゲーション･････････････････････････････････････*/ #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:25px; } /*パンくずリスト･････････････････････････････････････････････*/ #breadcrumbs{ display:inline-block; height:auto; width:100%; padding:14px 0; background-color:white; border-bottom:solid 1px var(--Gray_00); } #breadcrumbs *{ display:inline-block; font-size:17px; 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」*/ } /************************************************************** pc・mobileの切り替え **************************************************************/ /*マウスオーバー････････････････*/ a:hover, .pointer:hover{ opacity:1.0; } /*pc・tablet・mobileの切り替え････*/ .pc{ display:none !important; } .pc_inline{ display:none !important; } .tablet{ display:none !important; } .mobile{ display:block !important; } .mobile_none{/*「table td」など、mobileのみ非表示にする場合*/ display:none !important; } }