/* 美花月　共通 */ /** * * 初期化 * */ .disp640{display:none !important;} .hide640{display:block !important;} .clear{ clear: both; } .clearfix:before, .clearfix:after { content: ""; clear: both; display: block; } .floatLeft{ float: left; } .floatRight{ float: right; } .alignLeft{ text-align:left !important;} .alignRight{ text-align:right !important;} .alignCenter{ text-align:center !important;} .marginAutoCenter{ margin-left:auto;margin-right:auto;} .mb0, .marginBottomNone { margin-bottom: 0px !important;} .mb80 { margin-bottom: 80px !important;} .mb70 { margin-bottom: 70px !important;} .mb60 { margin-bottom: 60px !important;} .mb50 { margin-bottom: 50px !important;} .mb30 { margin-bottom: 30px !important;} .mb20 { margin-bottom: 20px !important;} .mb15 { margin-bottom: 15px !important;} .mb10 { margin-bottom: 10px !important;} .mb5 { margin-bottom: 5px !important;} .mt30 { margin-top: 30px !important;} .mt3 { margin-top: 3px !important;} .borderNone{ border: none !important; } .pb60 { padding-bottom: 70px !important;} .pb60 { padding-bottom: 60px !important;} .pb50 { padding-bottom: 50px !important;} .pb30 { padding-bottom: 30px !important;} .pb20 { padding-bottom: 20px !important;} .pb10 { padding-bottom: 10px !important;} .pt0 { padding-top: 0px !important;} .MaskBlack{ background-color: rgba(0,0,0,0.3); /* z-index: 10;*/ } .MaskGray{ background-color: rgba(0,0,0,0.05); /* z-index: 10;*/ } .MaskBlue{ background-color: rgba(1,104,183,0.15); /* #0168b7 */ /* z-index: 10;*/ } .posRelative{ position: relative; } .absCenter{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* margin-left: auto; margin-right: auto; left: 0px; right: 0px; */ display: inline-block; text-align: center; } /*--------------------------------------------------------------------*/ /* Drawerメニュー */ /* 子要素半透明回避のため　###ChildNoHalfTransparent */ #common_nav_block, #box-g-nav { width: 100%; max-width: 1000px; } .drawer-container { max-width: 1000px; width: 100%; margin-left: 0px; margin-right: 0px; } .drawer-navbar{ border-bottom: none; height: auto; background-color: transparent; /* 子要素半透明回避のため　###ChildNoHalfTransparent */ } .drawer-navbar .drawer-navbar-header { border-bottom: none; height: auto; background-color: #000; /* ヘッダー背景黒透過　###HeaderBackBlackTransparent これはスマホのヘッダー */ background-color: transparent; /* 子要素半透明回避のため　###ChildNoHalfTransparent */ } .drawer { /* ヘッダー背景黒透過　###HeaderBackBlackTransparent */ /* ここを半透明にすると子要素に継承され解除することはできない */ /* filter:alpha(opacity=50); -moz-opacity:0.50; -khtml-opacity:0.50; opacity:0.50; */ /* background-color: rgba(0, 0, 0, 0.5); /* */ } .drawer-navbar .drawer-nav { background-color: #000; /* ヘッダー背景黒透過　###HeaderBackBlackTransparent */ background-color: transparent; /* 子要素半透明回避のため　###ChildNoHalfTransparent */ margin-left: auto; z-index: 101; /* drawer-navbar-header=102 drawer-overlay=100 */ } .drawer-navbar .drawer-menu > li { } .drawer-navbar .drawer-menu > li:hover { } .drawer-navbar .drawer-menu a { font-size: 15px; } .drawer-navbar .drawer-menu a:hover { text-decoration: none; } .drawer-navbar .drawer-menu-item { /* line-height: 60px; /* ↑.drawer-navbar .drawer-menu li{padding-top} と加算して80px ###PC-Header-Height 同じにすること */ /* line-height: 57px; /* ↑.drawer-navbar .drawer-menu li{padding-top} と加算して80px ###PC-Header-Height 同じにすること */ /* 57px 下のborder-bottom:3px と合計で60px　box-sizing:border-box なので高さに含まれるはずだが？？？ */ /* border-bottom: 4px solid transparent; /* 本来なら3pxにするべきだが、上位要素のborder-bottomにオーバーラップさせ、下層ドロップダウンの位置をぴったりにするため */ line-height: 1.0em; color: #000; padding-left: 0px; padding-right: 0px; } .drawer-navbar .drawer-menu-item.current-menu-item, .drawer-navbar .drawer-menu-item:hover { /* border-bottom: 4px solid #ccc; /* */ } .drawer-navbar .drawer-menu-item .drawer-caret{ display: none; } .drawer--navbarTopGutter { } .drawer-navbar .drawer-dropdown-menu{ border: none; width: 100%; /* ヘッダーを黒透過にしたので、ここは透過を解除 できない */ filter:alpha(opacity=100); -moz-opacity:1.00; -khtml-opacity:1.00; opacity:1.00; } /* メニュー下の矢印 */ .drawer-menu .drawer-dropdown.open, .drawer-menu .drawer-dropdown:hover{ background-image: url("../../../../asset/img/link_arrow.gif"); background-repeat: no-repeat; background-position: center 20px; } /* 下層メニューのアクション */ /* PCの時はhoverで表示　clickでの動作を無効化して非表示 */ .drawer-menu .drawer-dropdown.open > .drawer-dropdown-menu{ /* display: none; /* ###ClickOpenRecoverForSakai */ } .drawer-menu .drawer-dropdown:hover > .drawer-dropdown-menu{ /* display: block; /* ###ClickOpenRecoverForSakai */ } .drawer-dropdown-menu li{ /* border-bottom: 1px solid #fff; height: 40px; line-height: 40px; */ width: auto; float: none !important; display: block; padding: 0px !important; } .drawer-dropdown-menu li:last-child{ border-bottom: none !important; } .drawer-dropdown-menu a{ color: #fff; } .drawer-dropdown-menu-item { line-height: 40px; } .drawer-dropdown-menu-item:hover { color: #fff; } /* 下層要素の詳細 */ .drawer-navbar #logo{ padding: 0px; text-align: left; display: none; } .drawer-navbar #logo a{ color: #fff; } /* PCでは「トップページ」非表示 */ .drawer-navbar .drawer-menu > li:first-child{ display: none; /* */ } /* 子メニューがある場合は、親メニューはドロップダウンをオープン用のボタンであったが、 */ /* 親メニューは親メニューのリンクと子メニューオープン用のボタンをいっしょに設置する */ /* ###TogetherParentMenuAndOpenButton */ /* リンク項目 */ .drawer-navbar .drawer-dropdown a.Link{ /* display: block; /* ###ClickOpenRecoverForSakai */ } /* オープンボタン */ .drawer-navbar .drawer-dropdown a.Open{ /* display: none; /* ###ClickOpenRecoverForSakai */ } /*--------------------------------------------------------------------*/ /*
内のロゴ・グロナビ・フリーダイヤル・メールバナー */ /* #headerの動作に関してはstyle_pc/style_spに記述 */ header{ } #header{ } body.home #header{ } /*--------------------------------------------------------------------*/ /* メガメニュー */ /* 画像とメニュー項目が左右float */ /* つまみ細工 */ .mdd_wrap .mdd_inner .nav_megamenu_img{ width: 36%; margin: 0px; padding-right: 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mdd_wrap .mdd_inner .nav_megamenu_img{ text-align: right; } .mdd_wrap .mdd_inner .nav_megamenu{ width: 64%; } /* るるべ */ .mdd_wrap .mdd_inner .nav_megamenu_img_releve{ width: 51%; margin: 0px; padding-right: 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mdd_wrap .mdd_inner .nav_megamenu_img_releve{ text-align: right; } .mdd_wrap .mdd_inner .nav_megamenu_releve{ width: 49%; } .mdd_wrap .mdd_inner .nav_megamenu, .mdd_wrap .mdd_inner .nav_megamenu_releve{ height: auto; } .mdd_wrap .mdd_inner .nav_megamenu_list, .mdd_wrap .mdd_inner .nav_megamenu_list_releve{ width: 100%; height: auto; } /*--------------------------------------------------------------------*/ /* トップページスライダー bx Slider */ #contents_slider{ width: 100%; height: auto; } #contents_slider img{ width: 100%; } .bx-wrapper .bx-next { /* 下から固定値に設置 */ top: auto !important; bottom: 70px; /* 水平中央寄せ */ left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 90 !important; /* drawer-nav=100 よりも小 */ } /*--------------------------------------------------------------------*/ /* ghostボタン */ .btnGhost{ text-align: center; height: auto; padding: 1px; } .btnGhost a{ font-size: 18px; font-family: "Yu Gothic"; padding: 15px; width: 100%; max-width: 240px; color: #000 !important; border: 1px solid #ccc; text-decoration: none !important; display: inline-block; /* 上位要素の
の高さを、この要素の高さ文確保するため */ -webkit-transition:.3s ease-in-out; -moz-transition:.3s ease-in-out; -o-transition:.3s ease-in-out; transition:.3s ease-in-out; } .btnGhost a:hover{ /* background-color: rgba(255,255,255,0.5);*/ background-color: rgba(240,240,240,0.5); background-color: rgba(51,51,51,0.5); /* フォアグランドは透過しない */ filter:alpha(opacity=100); -moz-opacity:1.00; -khtml-opacity:1.00; opacity:1.00; } /*--------------------------------------------------------------------*/ /* リンクボタン */ .btnLink{ text-align: center; margin: 20px auto; } .btnLink a{ background-image: url("/WordPress/wp-content/themes/8atance2019/images/common/tryangle-white.png"); background-repeat: no-repeat; background-position: 15px center; max-width: 480px; width: 100%; height: 60px; line-height: 60px; text-decoration: none !important; display: inline-block; /* 上位要素の
の高さを、この要素の高さ文確保するため */ font-size: 24px; font-family: "Yu Gothic"; color: #fff !important; /* -webkit-transition:.3s ease-in-out; -moz-transition:.3s ease-in-out; -o-transition:.3s ease-in-out; transition:.3s ease-in-out; */ border-radius: 5px; /* CSS3草案 */ -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ } .btnLink a.tryangleWhite{ background-image: url("/WordPress/wp-content/themes/8atance2019/images/common/tryangle-white.png"); } .btnLink a.green{ background-color: #7cc44b; } .btnLink a.orange{ background-color: #f69022; } .btnLink a.red{ background-color: #f00420; } .btnLink a.gray{ background-color: #a7a7a7; } .btnLink a.white{ background-color: #fff; color: #000 !important; background-image: url("/WordPress/wp-content/themes/8atance2019/images/common/tryangle-black.png"); border: 1px solid #ccc; } .btnLink a.yellow{ background-color: #fff100; color: #000 !important; background-image: url("/WordPress/wp-content/themes/8atance2019/images/common/tryangle-black.png"); } .btnLink a.small{ background-position: 15px center; font-size: 20px; width: 240px; height: 50px; line-height: 50px; background-image: url("/WordPress/wp-content/themes/8atance2019/images/common/tryangle-white-small.png"); } .btnLink a.white.small, .btnLink a.yellow.small{ background-image: url("/WordPress/wp-content/themes/8atance2019/images/common/tryangle-black-small.png"); } /*--------------------------------------------------------------------*/ /* Wipe Over Effect ボタン */ /* もっといい方式 */ header .btnWipe{ padding-top: 20px; float: left; } header .btnWipe .more_button{ font-size: 14px; border: none; width: 180px; height: 40px; line-height: 40px; background-color: #2e98e4; /* 水色 */ color: #fff !important; text-align: center; float: left; } header .btnWipe .more_button:first-child{ margin-right: 20px; } /* スライドするボタンの色 */ header .more_button::before, header .more_button::after { background-color:#8ec7fc; /* 薄い水色 */ } /* スライドするボタンの色 */ #CTA .more_button::before, #CTA .more_button::after { background-color:#ccc; /* 薄い水色 */ } /* 以下はアニメーション設定 */ .more_button { display: block; position: relative; z-index: 2; outline: none; /* background-color:#FFF; */ overflow: hidden; } .more_button::before, .more_button::after { position: absolute; z-index: -1; display: block; content: ''; } .more_button, .more_button::before, .more_button::after { box-sizing: border-box; transition: all 0.5s; } .more_button:hover { color: #FFF; } .more_button::after { top: 0; left: -100%; width: 100%; height: 100%; } .more_button:hover::after { left: 0; } .more_button i,.r_buttons i { position: absolute; top: 37%; right: 10px; } /*--------------------------------------------------------------------*/ /* ライブラリ */ /* アスペクト比が異なる（大きさも異なる）画像を、大きさ同じにトリミングしながらレスポンシブ動作 */ /* トップページ　先生方の声に利用 */ .wrapFlex{ display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap : wrap; /*for IE10*/ -webkit-flex-wrap : wrap; /*for old webkit browser*/ flex-wrap : wrap; } .flexEquality{ justify-content: space-between; /*最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置*/ } .wrapFlexCenter{ display: -ms-flexbox; display: -webkit-flex; display: flex; /* 上下左右中央寄せ */ justify-content: center; align-items: center; } .wrapFlexCenterLeft{ display: -ms-flexbox; display: -webkit-flex; display: flex; /* 上下中央寄せ　左寄せ */ /* justify-content: left; /* */ align-items: center; } /* 左右入れ替え */ .flexRevers{ flex-direction: row-reverse; } /* 上下左右中央寄せの内部サイズ制限 */ .boxFloatCenter{ max-width: 640px; width: 90%; } /* 4列で1pxボーダーで区切り */ .boxCover{ width: 25%; position: relative; border-right: 1px solid #fff; border-bottom: 1px solid #fff; } /* 4列で巣超すスペース開ける */ .boxCoverSpace{ width: 23.6%; /* 260/1100 */ margin-right: 1.86%; /* 20/1100 */ margin-bottom: 30px; position: relative; } .boxCoverSpace:nth-child(4n){ margin-right: 0px; } /* サイドバー有の場合は3列 */ .hasSidebar .boxCoverSpace{ width: 32%; /* 240/750 */ margin-right: 2%; /* 15/750 */ } .hasSidebar .boxCoverSpace:nth-child(4n){ margin-right: 2%; } .hasSidebar .boxCoverSpace:nth-child(3n){ margin-right: 0px; } .boxCoverThree{ width: 31%; margin-right: 3.5%; margin-bottom: 40px; position: relative; height: 100%; /* 上の.boxCoverはなぜかheight:100%;が無くても正常動作する */ } .boxCoverThree:nth-child(3n){ margin-right: 0px; } /* アスペクト比4:5の箱を作る */ /* 外殻はpadding-topを使用して高さを確保 */ .outer125{ position: relative; width: 100%; /* height: 100%; /* これがあると高さが余計に確保される */ padding: 125% 0 0; } .outer100{ position: relative; width: 100%; /* height: 100%; /* これがあると高さが余計に確保される */ padding: 100% 0 0; } /* 内側は外殻に沿って形成 */ .outer125 .inner, .outer100 .inner{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* さらにinnerを継承 */ .outer125 .inner a, .outer100 .inner a{ display: block; height: 100%; } /* 親のと同じサイズにしてアスペクト比そのままにcover */ .outer125 .inner img, .outer100 .inner img{ width: 100%; height: 100%; object-fit: cover; /* cover */ } .boxClip{ width: 100%; /* padding-left: 20px; /* 左端スペース */ overflow: hidden; } .boxClipInner{ width: 900px; } .boxClipInner .ug-carousel-wrapper{ left: 0px !important; /* カルーセルのレスポンシブで中央ぞろえのためにこのセレクタが制御される。これを左端に固定 */ } /* オーバーラップ */ .overWrap{ position: absolute; background-color: rgba(0,0,0,0.5); bottom: 0px; padding: 10px 30px; color: #fff; width: 100%; } /* オーバーラップの三角形 */ /* .overWrap:before{ content: ""; position: absolute; left: 50%; top: -38px; margin-left: -15px; border: 13px solid transparent; border-bottom: 25px solid rgba(0,0,0,0.5); } */ /* 右矢印をcontentで指定 */ .overWrap.arrow:after{ position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 10px; margin-left: 0px; font-size: 40px; font-weight: lighter; font-weight: 100; content: ">"; /* > */ font-family: 'Major Mono Display', monospace; } /* 通常のタイトルなど */ .normalWrap{ padding-top: 20px; } .overWrap .title, .normalWrap .title{ font-weight: bold; margin-bottom: 5px; } .overWrap .subtitle, .normalWrap .subtitle{ font-size: 13px; } /* 高さ可変のコンテンツに追従して、背景画像をcoverで配置 */ .imgCover .boxContent{ padding: 50px 0px; background-color: rgba(0,0,0,0.5); height: 100%; } .imgCover img{ position: absolute; object-fit: cover; width: 100%; height: 100%; z-index: -1; } .imgCover{ color: #fff; } /*--------------------------------------------------------------------*/ /* 基本レイアウト */ /* .hasSidebar は index.php で追加 */ .hasSidebar .wrap_main{ /* float: left; width: 72.72%; /* 800/1100 */ /* width: 68.2%; /* 750/1100 */ flex: 1; margin-right: 100px; /* 左寄せ */ } .hasSidebar #sidebar{ /* float: right; width: 22.72%; /* 250/1100 */ width: 250px; } /*--------------------------------------------------------------------*/ /* 固定ページコンテンツ標準レイアウト */ /* 下層のh2.sectionTitleのアンダーラインを文字幅に合わせるためにdisplay:inline　→　左右中央寄せにするためのラッパー */ .widthAll{ width: 100%; /* min-width: 1600px; /* */ margin-left: auto; margin-right: auto; } img.all, .widthAll img{ max-width: none; /* 制限なし */ width: 100%; } .widthFull{ max-width: 1600px; margin-left: auto; margin-right: auto; } .widthLimit{ /* max-width: 1100px; /* 有効幅 */ max-width: 1240px; /* 下のpaddingの分を増やす */ margin: 0px auto; padding-left: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ padding-right: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ } /* キャンセル */ .widthLimit1000{ max-width: 1040px; margin: 0px auto; padding-left: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ padding-right: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ } .widthNarrow{ width: 800px; max-width: 1140px; /* 下のpaddingの分を増やす */ margin-left: auto; margin-right: auto; padding-left: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ padding-right: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ } /*--------------------------------------------------------------------*/ /* オリジナルcssのオーバーラップ */ /* サイト基本構造 */ .oneColFixCtrHdr #container { width: 100%; max-width: 1000px; /* 背景画像の表示仕様 */ /* 最上部中央を基準にして伸縮無し */ /* background-size: cover; /* */ background-position: center top; } /* 体験レッスン */ .oneColFixCtrHdr #container.lesson_base{ background-position: 20% top; } /* オーダーメイド */ .oneColFixCtrHdr #container.order_base{ background-position: 65% top; } #sns_block{ width: auto; } .oneColFixCtrHdr #mainContent { /* padding-top: 170px; /* */ /* PC時はサイドが全幅1000px　スマホではサイドに20pxのスペースを確保するため */ width: 100%; max-width: 1000px; padding-left: 0px; padding-right: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } /* メインコンテンツ部が背景白でサイドにスペースを取りたい場合 */ .oneColFixCtrHdr .instructor_base #mainContent, .oneColFixCtrHdr .releve_base #mainContent, .oneColFixCtrHdr .onlineshop_base #mainContent, .oneColFixCtrHdr .lesson_base #mainContent, .oneColFixCtrHdr .tsumami_base #mainContent, .oneColFixCtrHdr .index_base #mainContent{ /* PC時はサイドが全幅1000px　スマホではサイドに20pxのスペースを確保するため */ max-width: 1040px; padding-left: 20px; /* */ padding-right: 20px; /* */ } .drawer-navbar .drawer-nav { width: 100%; max-width: 1000px; height: 100px; } #g-nav{ width: 90%; max-width: 900px; padding-left: 5%; padding-right: 5%; } .mdd_wrap .mdd_inner{ width: 100%; max-width: 1000px; } .mdd_wrap .mdd_inner .nav_megamenu .nav_megamenu_ttl{ } div[id^="pankuzu"] { width: 86% !important; max-width: 860px !important; padding-left: 7% !important; padding-right: 7% !important; } .sitemap_catch, #sitemap_contents{ width: 100%; max-width: 1000px; } /* フッター */ #bottom_block { width: 100%; max-width: 1000px; } .oneColFixCtrHdr #footer{ width: 80%; max-width: 800px; padding-left: 10%; padding-right: 10%; } .footer_copyright{ width: 100%; max-width: 800px; } /*--------------------*/ /* トップページ */ .oneColFixCtrHdr .index_base{ background-image: none; } /* スライダー高さを変えずに幅狭めたい　cover */ #main_img, #slideshow { width: 100%; max-width: 1000px; height: auto; height: 430px; } #main_img { z-index: -1; /* 【重要】ヘッダーが背面に行く */ } #slideshow img{ /* width: 1000px; max-width: none; */ max-width: 100%; height: 430px; /* 肝 */ object-fit: cover; } .ind-ttl, .ind_nav, .releve-ttl{ width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; } .ind-ttl table, .releve-ttl table{ width: 100%; } .ind-ttl table td:first-child, .releve-ttl table td:first-child{ width: 45.6%; } .ind-ttl table td:last-child, .releve-ttl table td:last-child{ width: 54.4%; } .ind_nav .ind_nav1{ width: 30%; max-width: 200px; float: none; margin-right: 0px; } .ind_nav .releve_nav_left, .ind_nav .releve_nav_right{ width: 48%; max-width: 200px; float: none; } .ind_nav img{ width: 100%; height: auto; } /* ■共通 */ /* */ /* */ /* 講師紹介 */ .instructor_catch, /* お問い合わせフォーム */ .form_catch, /* オンラインショップ */ #onlineshop_contents, .shop_name, .shop_url, /* ギャラリー */ .gallery_catch, #gallery_contents, .gallery_instagram, .gallery_instagram table, /* オーダーメイド */ .order_sub_catch, /* スクール */ .school_catch, /* レッスン */ .btn_contact2, .lesson_body3, .btn_contact, .lesson_sub_catch, .lesson_catch, /* つまみ細工とは */ .tsumami_body2, .tsumami_sub_catch, .tsumami_body, .tsumami_catch2, .tsumami_catch{ width: 100%; max-width: 1000px; height: auto; } /* ■個別 */ /* レッスン */ .lesson_body{ width: 63.5%; margin-left: 36.5%; height: auto; padding-top: 145px; } .lesson_sub_catch{ padding-top: 25px; } .lesson_body2{ width: 81.5%; margin-left: 18.5%; height: auto; } .img_float_lesson{ /* width: 16.6%; /* */ margin-left: 76%; } /* スクール */ .basic_btn, #elementary_free_course, #basic_course{ width: 75%; max-width: 750px; padding-left: 12.5%; padding-right: 12.5%; background-position: center top; } .school_ttl{ width: 100%; max-width: 330px; } .school_inner{ width: 100%; } .school_box{ width: 85.3%; /* 640/750 */ padding-left: 7.3%; /* 55/750 */ padding-right: 7.3%; /* 55/750 */ } #local-nav{ width: 100%; max-width: 450px; padding-left: 0px; padding-right: 0px; margin-left: auto; margin-right: auto; } .local-nav_b a img{ vertical-align: bottom; } .basic_box, .basic_box table, .basic_btn table{ width: 100%; margin-left: auto; margin-right: auto; } .basic_left{ width: 62.6%; /* 470/750 */ } .basic_box .boxFlex{ /* ５列 */ width: 19%; max-width: 120px; padding-right: 1%; } .basic_box .boxFlex img{ width: 100%; height: auto; } .basic_btn table img{ width: 100%; max-width: 300px; height: auto; } /* オーダーメイド */ .order_catch{ width: 72%; max-width: 720px; padding-left: 28%; } #order_contents{ width: 75%; max-width: 750px; padding-left: 12.5%; padding-right: 12.5%; background-position: center top; } /* ギャラリー */ #gallery_contents .g_item_2-2, #gallery_contents .g_item_1-2, #gallery_contents img.g_img{ height: auto; } #gallery_contents img.g_img[width="250"]{ width: 25%; } #gallery_contents img.g_img[width="500"]{ width: 50%; } #gallery_contents .g_item_2-2{ width: 50%; } #gallery_contents .g_item_1-2{ width: 25%; } #gallery_contents .g_item_2-2 img.g_img[width="250"]{ width: 50%; } #gallery_contents .g_item_1-2 img.g_img[width="250"]{ width: 100%; } /* 講師紹介 */ .instructor_block{ width: 83%; max-width: 830px; margin-left: 17%; } .instructor_copy{ width: 65%; /* 540/830 */ max-width: 540px; /* margin-left: 9.6%; /* 80/830 */ margin-left: 0px; /* float:左右にしてスペースで調整 */ float: right; } /* 認定講師 */ #local-nav_rs{ width: 90%; margin-left: auto; margin-right: auto; } #local-nav_rs .local-nav_b{ width: 33%; } #instructor, #ballet, #kimono{ width: 75%; max-width: 750px; padding-left: 12.5%; padding-right: 12.5%; background-position: center top; } .releve_inner, .releve_ttl, .releve_box, .releve_box_b, .releve_box table, .releve_box_b table{ width: 100%; height: auto; } .releve_ttl .tex_g_16_w{ } .releve_box, .releve_box_b{ width: 85.3%; /* 640/750 */ padding-left: 7.3%; /* 55/750 */ padding-right: 7.3%; /* 55/750 */ } /* フリーレッスン */ #local-nav_rf{ width: 60%; margin-left: auto; margin-right: auto; } #local-nav_rf .local-nav_b{ width: 50%; } #free_releve, #free_ballet, .releve_note{ width: 75%; max-width: 750px; padding-left: 12.5%; padding-right: 12.5%; background-position: center top; } /* お問い合わせフォーム */ #form_contents{ width: 71%; max-width: 710px; padding-left: 14.5%; padding-right: 14.5%; } #form_contents #box-otoiawase{ width: 100%; } #form_contents #box-otoiawase table, #form_contents #box-otoiawase .w548, #form_contents #box-otoiawase .w398{ width: 100%; } #form_contents #box-otoiawase table input, #form_contents #box-otoiawase .contents{ /* 右端の縦罫線が出ない */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } #form_contents #box-otoiawase table td:first-child{ min-width: 120px; } #form_contents #box-otoiawase .form_otoiawase, #form_contents #box-otoiawase .contents{ width: 100%; } /* サイトマップ */ .box-sitemap-contents{ width: 90%; max-width: 400px; padding-left: 5%; padding-right: 5%; margin-left: auto; margin-right: auto; } /* プライバシー */ .box-privacy-contents{ width: 70%; max-width: 700px; margin-left: 15%; margin-right: 15%; } /*--------------------------------------------------------------------*/ /* トップページ各セクション */ /* トップページのヘッダーは上から降りてくるアクション */ body.home header{ /* position: fixed; /* トップページだけはスライダーの上にかぶせるため　そうでないとPADRONEのようにするしかない */ /* height: 0px; /* なぜかこの部分も左端で動くので、高さを０にして誤魔化す */ } body.home .drawer-navbar--fixed { /* position: absolute; /* トップページだけはスライダーの上にかぶせるため　そうでないとPADRONEのようにするしかない */ /* top: -80px; /* */ /* animation-delay: 1s; /* この時間だけ最終形が表示されてしまうのでヤメ */ /* animation-duration: 2s; /* */ /* animation-name: slidein; /* */ } @keyframes slidein { from { /* transform: translateY(-80px); /* GPU */ } to { /* transform: translateY(0px); /* GPU */ } } .RelativeBase{ position: relative; } /*--------------------------------------------------------------------*/ /* 下層ページのページトップ index.phpで設定 */ #PageTopTitile{ margin-bottom: 25px; } #PageTopTitile .absCenter{ padding-top: 50px; } .titlePage{ font-size: 26px !important; border: none; font-weight: bold !important; font-family: "Yu Mincho", "YuMincho", "游明朝体", "游明朝", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; margin-bottom: 5px !important; line-height: 1.0em !important; color: #333 !important; } .titleMain{ font-size: 20px !important; margin-bottom: 0px !important; border: none; } /* サブタイトル */ .titleSub{ background-color: transparent !important; font-size: 18px !important; font-weight: bold !important; color: #b4b4b4 !important; text-align: center; } /*--------------------------------------------------------------------*/ /* 固定ページ */ /* 設備情報　モーダル */ .DisplayNone{ display: none; } .modal-content{ width: 100%; max-width: 1200px; position: relative; display: block; height: auto; overflow: auto; overflow-x: hidden; /* 横スクロールバーを消す */ /* top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); */ top: 20%; } .fancybox-slide::before { /* 上端に位置がずれる */ height: auto; } .fancybox-button{ background-repeat: no-repeat; background-size: 11px 19px; } .fancybox-button--arrow_left{ background-image: url("../../../../asset/img/sliderArrowLeft.png"); background-position: 30% center; } .fancybox-button--arrow_right{ background-image: url("../../../../asset/img/sliderArrowRight.png"); background-position: 70% center; } .modal-block, .modal-ttl, .modal-item{ width: 100%; max-width: 800px; } .modal-block{ margin: 0px auto; text-align: left; } .modal-left, .modal-img{ width: 50%; } .modal-ttl_left{ width: 80%; /* たまたまこれでうまくいく */ } .modal-btn{ width: 32px; float: right; } .modal-img{ } /*--------------------------------------------------------------------*/ /* フッター */ #footer{ width: 100%; height: auto; padding: 45px 0px 100px; background-image: none !important; /* */ } #footer .footerInner{ max-width: 1140px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; } #footer .footerInner .footer_address table{ width: 100%; } #footer .footerInner .footer_address table, #footer .footerInner .footer_address table tr, #footer .footerInner .footer_address table th, #footer .footerInner .footer_address table td{ border: none !important; } #footer .footerInner .footer_address table th, #footer .footerInner .footer_address table td{ padding: 0px; line-height: 1em; } #footer .footerInner .footer_address table th.large, #footer .footerInner .footer_address table td.large{ padding-bottom: 10px; } #footer .footerInner .footer_menu{ margin-left: auto; /* 右寄せ */ } #footer .footerInner .footer_menu li{ margin-left: 25px; } #footer .footerInner .footer_menu li:first-child{ margin-left: 0px; } #footer .footerInner .footer_menu li a:hover{ text-decoration: underline !important; } /*--------------------------------------------------------------------*/ .pageTop{ position: fixed; right: 10px; bottom: 10px; float: right; display: none; } .pageTop a, .pageTop a:hover { width: 42px; height: 42px; } .sideFixedContact{ position: fixed; right: 0px; top: 130px; display: none; } body.home .sideFixedContact{ display: block; } @media screen and (max-width: 1600px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 960px) { /* メガメニューるるべ */ .mdd_wrap .mdd_inner .nav_megamenu_img_releve{ width: 36%; } .mdd_wrap .mdd_inner .nav_megamenu_releve{ width: 64%; } } @media screen and (max-width: 900px) { .drawer-navbar .drawer-menu a { font-size: 13px; } body.history #common_ttl_bar #common_ttl_jp{ font-size: 15px; } } @media screen and (max-width: 830px) { #g-nav ul li { padding-left: 20px; } /* フリーレッスン */ #local-nav_rf{ width: 90%; } } @media screen and (max-width: 767px) {/* ■■■ 【ブレークポイント】 ■■■ */ /* スマホメニュー */ .drawer-container { padding-top: 0px; padding-left: 0px; padding-right: 0px; } .drawer-navbar { height: 71px; /* ###SP-menu-item-height 70 */ line-height: 70px; /* ###SP-menu-item-height 70 */ } #common_nav_block, #box-g-nav { height: 70px; /* ###SP-menu-item-height ###ChildNoHalfTransparent */ } /* ヘッダー部 */ .drawer-navbar .drawer-navbar-header { height: 70px; /* ###SP-menu-item-height 70 */ line-height: 70px; /* ###SP-menu-item-height 70 */ } .drawer-navbar #logo { display: block; } #logo .LogoBanner{ width: 190px; /* 70%に縮小 */ } /* メニュー部 */ .drawer-navbar .drawer-nav { float: none; height: auto; /* ###PC-Header-Height 同じにすること */ line-height: auto; /* ###PC-Header-Height 同じにすること */ padding-top: 0px; } .drawer-navbar #g-nav{ padding: 0px; padding-top: 70px; width: 100%; background-color: #7e7e7e; /* 薄いグレー */ background-color: #000; /* 薄いグレー */ opacity:0.8; } .drawer-navbar .drawer-menu > li { margin-right: 0px; /* 隣の項目との位置関係 */ padding-bottom: 0px; /* メニュー下の矢印表示領域 */ } #g-nav ul li{ /* ↑と同じ */ padding: 0px; } /* ハンバーガーの外形 */ .drawer-hamburger { position: absolute; /* これしないとスライドインしない */ padding-top: 30px; padding-top: 25px; /* ###SP-menu-item-height 70 これに関連して上のスペースを詰める */ padding-right: 20px; padding-bottom: 38px; padding-bottom: 33px; /* ###SP-menu-item-height 70 これに関連して下のスペースを詰める */ padding-left: 20px; /* background-color: #eeefef; /* 薄いグレー */ /* width: 40px; /* 80-20x2 */ width: 30px; /* 幅狭く###SmallHumberger */ } .drawer-hamburger:hover { /* background-color: #eeefef; /* 薄いグレー */ } /* ハンバーガー「三」の色と形状 */ .drawer-hamburger-icon, .drawer-hamburger-icon::before, .drawer-hamburger-icon::after { width: 100%; height: 2px; background-color: #fff; /* 三の色 */ } .drawer-hamburger-icon::before { top: -12px; top: -10px; /* ###SmallHumberger */ } .drawer-hamburger-icon::after { top: 12px; top: 10px; /* ###SmallHumberger */ } /* スマホでは「トップページ」項目を表示する */ .drawer-navbar .drawer-menu > li:first-child{ display: block; } .drawer-navbar .drawer-menu{ border-top: 1px solid #ccc; /* padding-bottom: 0px; /* これがないとスクロール量が減る */ } .drawer-navbar .drawer-menu li { padding-top: 0px; /* ↓.drawer-navbar .drawer-menu-item{line-height} と加算して80px ###PC-Header-Height 同じにすること */ border-bottom: 1px solid #ccc; margin-left: 0px; /* 隣の項目との位置関係 */ float: none !important; } #g-nav{ height: auto; } #g-nav ul.drawer-menu { padding-bottom: 400px; } .drawer-navbar .drawer-menu li.drawer-dropdown { line-height: 46px; /* ###SP-menu-item-height padding 12+12 で70 */ } /* メニュー下の矢印 */ .drawer-menu .drawer-dropdown.open, .drawer-menu .drawer-dropdown:hover{ background-image: none; } .drawer-navbar .drawer-menu-item { /* line-height: 60px; /* ↑.drawer-navbar .drawer-menu li{padding-top} と加算して80px ###PC-Header-Height 同じにすること */ padding-left: 0.75rem; padding-right: 0.75rem; text-align: left; } .drawer-navbar .drawer-menu-item { line-height: 60px; /* ↑.drawer-navbar .drawer-menu li{padding-top} と加算して80px ###PC-Header-Height 同じにすること */ line-height: 46px; /* ###SP-menu-item-height padding 12+12 で70 */ border-bottom: none; } .drawer-navbar .drawer-menu-item.current-menu-item, .drawer-navbar .drawer-menu-item:hover { border-bottom: none; } /* PCでは半透明 スマホでは透明無し */ .drawer-dropdown-menu{ filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0; } /* メガメニューはabsoluteヤメ */ .drawer-navbar .mdd_wrap{ position: relative; top: 0px; } .drawer-menu .drawer-dropdown > .drawer-dropdown-menu li{ /* height: 80px; */ line-height: 80px; line-height: 70px; /* ###SP-menu-item-height 70 */ } .drawer-menu .drawer-dropdown > .drawer-dropdown-menu li a{ padding-right: .75rem; padding-left: 1.5rem; height: 70px; line-height: 70px !important; /* ###SP-menu-item-height 70 */ display: block; } .drawer-dropdown-menu-item { line-height: 80px; line-height: 70px; /* ###SP-menu-item-height 70 */ } /* 右端のアイコン */ /* 下層メニュー */ .drawer-menu .drawer-dropdown > .drawer-dropdown-menu li a, /* 子メニュー */ .drawer-dropdown-menu-item, .drawer-menu-item{ position: relative; } /* 右矢印 */ .drawer-menu .drawer-dropdown > .drawer-dropdown-menu li a:after, /* 子メニュー */ .drawer-dropdown-menu-item:after, .drawer-menu-item:after{ position: absolute; top: 10px; right: 25px; margin-left: 0px; font-size: 30px; font-weight: lighter; font-weight: 100; content: ">"; /* > */ font-family: 'Major Mono Display', monospace; } .drawer-menu .drawer-dropdown > .drawer-dropdown-menu li a:after, /* 子メニュー */ .drawer-dropdown-menu-item:after{ top: 0px; } /* 通常のdrawerの場合 */ /* アイコン無し */ .drawer-menu-item.Link:after{ content: none; /* + */ } /* プラス */ .drawer-menu-item.Open:after{ font-size: 45px; content: "+"; /* + */ } /* マイナス */ .drawer-dropdown.open .drawer-menu-item.Open:after{ content: "-"; /* - */ } /* サカイの場合 */ /* プラス */ .drawer-dropdown .drawer-menu-item:after{ font-size: 45px; right: 20px; content: "+"; /* + */ } /* マイナス */ .drawer-dropdown.open .drawer-menu-item:after{ content: "-"; /* - */ } /* メガメニュー */ /* 位置 */ .drawer-navbar .mdd_wrap{ /* top: 0px; left: 0px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); */ /* ###MegaMenuXForcedadjustment */ /* -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); */ } .drawer-navbar .mdd_wrap .mdd_inner{ } .drawer-navbar .mdd_wrap .mdd_inner .nav_megamenu_img, .drawer-navbar .mdd_wrap .mdd_inner .nav_megamenu_img_releve, .drawer-navbar .mdd_wrap .mdd_inner .nav_megamenu_list_releve p{ display: none; /* 非表示 */ } /* つまみ細工 */ /* るるべ */ .mdd_wrap .mdd_inner .nav_megamenu, .mdd_wrap .mdd_inner .nav_megamenu_releve{ width: 100%; float: none; display: block; } #sns_block{ float: none; padding-top: 30px; padding-bottom: 30px; margin-left: auto; margin-right: auto; text-align: center; } /* PC用のオーバーレイは非表示　移行はdrawerのオーバーレイが機能する */ .PC-Overlay{ display: none !important; } /* 共通 */ .oneColFixCtrHdr #mainContent{ padding-top: 70px; padding-bottom: 30px; } /* 基本レイアウト */ .hasSidebar .wrap_main, .hasSidebar #sidebar{ float: none; width: 100%; /* 800/1100 */ } .hasSidebar .wrap_main{ margin-right: 0px; } /* 標準 */ .widthAll img{ max-width: 100%; /* 制限なし */ width: 100%; } .widthNarrow{ width: 100%; } .boxLeft, .boxRight, .boxThirdCollapse, .boxThird{ float: none; width: 100% !important; } .boxLeft, .boxThird{ margin-bottom: 50px; } .Collapse .boxLeft{ margin-bottom: 0px; } /* テキスト部背景色がある場合　画像部の↓マージンなし */ .textBackColor .boxLeft{ margin-bottom: 0px !important; } /* テキスト部背景色がある場合　テキスト部上下スペース */ .textBackColor .box_gray{ padding: 90px 0px; } .boxThird{ margin-right: 0px; } .boxThird:last-child{ margin-bottom: 0px; } .widthLimit .noSpace{ width: 100%; margin-bottom: 0px !important; } .Sepa .boxLeft{ padding-right: 0px; border-right: none; } .Sepa .boxThird{ padding-right: 0px; border-right: none; margin-right: 0px; } /* 経歴用 */ .Career{ padding-left: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ padding-right: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ } .itemCareer .boxLeft{ margin-bottom: 20px; } /* 紹介用 */ .Introduce{ padding-left: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ padding-right: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ } /* 左右二段組継続 */ .itemIntroduce .boxLeft{ float: left; width: 18.75% !important; /* 150/800 */ margin-bottom: 0px; } .itemIntroduce .boxRight{ float: right; width: 75% !important; /* 600/800 */ } /* Q&A */ .QandA{ padding-left: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ padding-right: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ } /* 左右二段組継続 */ .itemQandA .boxLeft{ float: left; width: 10% !important; margin-bottom: 0px; } .itemQandA .boxRight{ float: right; width: 90% !important; } .itemCareer .boxRight, .itemCareer .boxLeft, .Padding .Image, .Padding .Text, .widthLimit .TitleText, .widthLimit .Title, .widthLimit .ImageRound, .widthLimit .Image, .widthLimit .Text{ width: 100%; } /* ライブラリ */ .boxCover{ width: 50%; } /* 2列 */ .boxCoverSpace{ width: 48.5%; margin-right: 3%; /* */ } .boxCoverSpace:nth-child(2n){ margin-right: 0px; } /* サイドバー有の場合は3列 */ .hasSidebar .boxCoverSpace{ width: 48.5%; margin-right: 3%; } .hasSidebar .boxCoverSpace:nth-child(3n){ margin-right: 3%; } .hasSidebar .boxCoverSpace:nth-child(2n){ margin-right: 0px; } /* ページタイトル青背景 */ /* 改行を許すためline-height:1.2em paddingで上下調整 */ #common_ttl_bar{ } #common_ttl_bar #common_ttl_eng, #common_ttl_bar #common_ttl_jp{ height: auto; line-height: 1.2em; display: block; text-align: center; padding: 10px 0px; font-size: 20px; } #common_ttl_bar #common_ttl_eng{ border-right: none; border-bottom: 1px solid #fff; } /* ページ個別 */ /* レッスン */ .lesson_body2, .lesson_body{ width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; } .img_float_lesson{ /* width: 16.6%; /* */ margin: 20px auto 40px; } .btn_contact{ margin-top: 0px; } /* スクール */ .basic_btn, #elementary_free_course, #basic_course{ width: 90%; padding-left: 5%; padding-right: 5%; } .school_box{ width: 90%; padding-left: 5%; padding-right: 5%; } .basic_left{ width: 77%; /* 470/750 */ } /* オーダーメイド */ #order_contents{ width: 90%; padding-left: 5%; padding-right: 5%; } /* 認定講師　ローカルnavi */ #box-local-nav_rs{ height: 180px; } #local-nav_rs .local-nav_b{ width: 100%; display: block; margin-bottom: 10px; } #local-nav_rs .local-nav_b:last-child{ margin-bottom: 0px; } #instructor, #ballet, #kimono, #free_releve, #free_ballet, .releve_note{ width: 90%; padding-left: 5%; padding-right: 5%; } .releve_ttl .tex_g_16_w{ display: block; } /* 講師紹介 */ .instructor_block{ width: 100%; margin-left: auto; margin-right: auto; } /* お問い合わせフォーム */ #form_contents{ width: 90%; max-width: 710px; padding-left: 5%; padding-right: 5%; } /* ページネーション */ body.single .postPagenation{ padding: 15px 30px; } body.single .postPagenation .prev, body.single .postPagenation .next{ width: 100%; } body.single .postPagenation .next{ border: none; background-position: 0px center; } body.single .postPagenation .next a{ text-align: left; } body.single .postPagenation hr{ display: block; width: 100%; margin-top: 15px; margin-bottom: 15px; } /* フッター */ #bottom_block .address, #bottom_block .bottom_nav{ float: none; width: 280px; margin-left: auto; margin-right: auto; } #bottom_block .bottom_nav{ margin-top: 20px; } #bottom_block .bottom_nav li{ padding-left: 20px; } #bottom_block .bottom_nav li:first-child{ padding-left: 0px; } } @media screen and (max-width: 640px) { .disp640{display:block !important;} .hide640{display:none !important;} table.free-items th, table.free-items td{ padding: 7px 20px; } /* スクール */ .basic_left{ width: 100%; } .basic_left table td{ display: block; width: 100%; } .basic_box table td.summary{ width: 95%; padding-left:5%; } .basic_box table td.pb10_640{ padding-bottom: 20px; } .basic_box .boxFlex{ /* ２列 */ width: 45%; padding-right: 0px; } /* 認定講師　フリーレッスン　赤枠 */ .releve_box table td, .releve_box_b table td{ width: 100%; display: block; padding-bottom: 20px; } .releve_box table td img, .releve_box_b table td img{ display: block; margin-left: auto; margin-right: auto; float: none; } /* 講師紹介 */ .instructor_image, .instructor_copy{ width: 100%; display: block; } .instructor_image{ margin-bottom: 30px; text-align: center; } /* スマホでスクロールバーを出す */ .scroll-wrap{ width: 100%; /* padding: 5%; */ overflow-x: auto; margin-bottom: 50px; /* 下の要素との距離 */ } .scroll-wrap::-webkit-scrollbar { height: 10px; } .scroll-wrap::-webkit-scrollbar-thumb{ background: #999; border-radius: 5px; } .scroll-wrap::-webkit-scrollbar-track-piece { background: #efefef; } /* 矢印の構造は難しいので、せいぜい縦に整列するのが関の山 */ /* 640以上は画像でやるか？ */ /* 長さ */ .m-form-status div{ width: 100% !important; } /* 右矢印を非表示 */ .m-form-status div > div::after { display: none !important; } } @media screen and (max-width: 580px) { /* QandA */ .itemQandA .boxRight{ width: 85% !important; margin-left: auto; /* 右寄せ　float:rightと同等 */ } /* 事業内容 */ /* 幅を画像と一致させて中央寄せ */ .busi_cont_left_btn{ width: 116px; margin-left: auto; margin-right: auto; } .busi_cont_left_btn a{ display: inline-block; margin-bottom: 10px; } .busi_cont_left_btn a img{ margin-right: 0px; } /* オーダーメイド */ .order_sub_catch{ letter-spacing: -1px; } } @media screen and (max-width: 480px) { /* 参考 */ #history_contents table.history_copy th, #history_contents table.history_copy td{ display: block; width: 100%; text-align: left; } #history_contents table.history_copy td:first-child{ padding-bottom: 0px; } #history_contents table.history_copy td:last-child{ padding-left: 10px; padding-bottom: 10px; } /* トップページ */ .releve-ttl{ margin-top: 20px; } .ind-ttl table td, .releve-ttl table td{ width: 100% !important; display: block; } .ind-ttl table td:first-child, .releve-ttl table td:first-child{ text-align: center; padding-bottom: 20px; } /* ２列 */ .ind_nav .ind_nav1{ width: 48%; margin-bottom: 30px; } /* ローカルnavi */ #local-nav .local-nav_b, #local-nav_rs .local-nav_b, #local-nav_rf .local-nav_b{ width: 100%; display: block; margin-bottom: 10px; } #local-nav .local-nav_b:last-child, #local-nav_rs .local-nav_b:last-child, #local-nav_rf .local-nav_b:last-child{ margin-bottom: 0px; } /* つまみ細工とは */ .tsumami_body{ padding-top: 30px; } /* 体験レッスン */ .lesson_catch, .btn_contact2, .lesson_body3, .lesson_body2, .lesson_body{ padding-top: 30px; } .btn_contact img, .btn_contact2 img{ max-width: 100%; } .btn_contact2{ margin-top: 0px; } /* スクール */ .school_catch{ padding-top: 30px; } #box-local-nav{ margin-top: 0px; } .school_ttl{ margin-left: auto; margin-right: auto; } .oneColFixCtrHdr .school_base #mainContent{ padding-bottom: 0px; } /* オーダーメイド */ .order_catch{ padding-top: 30px; } /* ギャラリー */ .gallery_catch{ padding-top: 30px; padding-bottom: 30px; } #gallery_contents img.g_img[width="250"]{ width: 50%; } #gallery_contents img.g_img[width="500"]{ width: 100%; } #gallery_contents .g_item_2-2{ width: 100%; } #gallery_contents .g_item_1-2{ width: 50%; } #gallery_contents .g_item_2-2 img.g_img[width="250"]{ width: 50%; } #gallery_contents .g_item_1-2 img.g_img[width="250"]{ width: 100%; } /* オンラインショッピング */ #onlineshop_contents{ margin-top: 420px; } /* 認定講師 */ #box-local-nav_rs{ margin-top: 0px; } .releve_inner{ margin-top: 110px; } /* フリーレッスン */ #box-local-nav_rf{ margin-top: 0px; } /* お問い合わせフォーム */ #form_contents #box-otoiawase table td{ width: 100%; display: block; } /* プライバシー */ .box-privacy-contents { width: 90%; margin-left: 5%; margin-right: 5%; } } @media screen and (max-width: 420px) { .order_base { background-image: url(./img/back_img_ordermade_sp.jpg); } #instructor { background-image: url(./img/rs_back_img01_sp.jpg); } } @media screen and (max-width: 400px) { /* 子階層のテキストが矢印に重なる　改行はドロップダウンアニメーションの関係で許容されない */ .drawer-navbar .mdd_wrap .mdd_inner .nav_megamenu_list_technology a, .drawer-navbar .mdd_wrap .mdd_inner .nav_megamenu_list a, .drawer-navbar .mdd_wrap .mdd_inner .nav_megamenu_list_bussiness a { font-size: 11px; /* padding-left: 0.75em; /* */ } /* 矢印の位置 */ .drawer-menu .drawer-dropdown > .drawer-dropdown-menu li a:after{ /* 子メニュー */ right: 5px; } /* ローカルナビ */ .local-nav_b a{ font-size: 16px !important; letter-spacing: 0px !important; } /* オーダーメイド */ .order_catch{ width: 90%; padding-left: 10%; } /* オーダーメイド */ .order_sub_catch{ letter-spacing: -2px; font-size: 17px; } /* ギャラリー　インスタ */ .gallery_instagram table td{ display: block; width: 100%; text-align: center; padding-bottom: 10px; } .boxClipInner{ width: 100%; } footer section#CTA .btnGhost a{ text-align: left; font-size: 20px; } }