@charset "utf-8"; /* レイアウト */ @media only screen and (max-width:1199px){ #header { height:56px; width:100%; min-width:0; position:relative; left:0px; top:0px; z-index:100; margin:0; } #header_inner { height:auto; width:100%; height:56px; margin:0 auto; position:relative; } .mobile .mobile_header_fix #header { position:fixed; } .home #header { position:relative; background:#262e31; } } @media only screen and (max-width:767px) { #header_inner { width:100%; } } @media only screen and (max-width:991px){ #left_col { width:auto; float:none; padding:0 0 40px 0; } #side_col { width:auto; float:none; padding:0 0 10px 0; } } @media only screen and (max-width:767px){ #main_contents { width:auto; margin:0 auto; padding:0; } .mobile_header_fix #main_contents { padding-top:56px; } .home.mobile_header_fix #main_contents { padding-top:0px; } #main_col { width:auto; margin:20px auto 20px; padding:0 20px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } } @media only screen and (max-width:767px){ .page-template-page-noside #main_col, .page-template-page-noside-notitle #main_col, .error404 #main_col { width:auto; float:none; margin:0 auto; } .page #main_col { margin-top:15px; padding-top:15px; } } /* ---------------------------------------------------------------------- トップページ ---------------------------------------------------------------------- */ @media only screen and (max-width:1199px){ .mobile_header_fix.home #top { padding-top:56px; } } @media only screen and (max-width:767px){ .home #top { min-width:0; margin:0 0 50px 0; } } /* スライダー */ @media only screen and (max-width:767px){ #header_slider { height:90vh; min-width:0; } #header_slider .item { height:90vh; } #header_slider .item img { display:none; } } /* スライダーのキャッチコピー */ @media only screen and (max-width:767px){ #header_slider .caption, #header_video .caption, #header_youtube .caption { width:100%; padding:0 50px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } #header_slider .caption .title, #header_video .caption .title, #header_youtube .caption .title { font-size:24px !important; } #header_video .caption .desc, #header_youtube .caption .desc { font-size:16px !important; } #header_slider .slick-dots { bottom:100px; } #header_slider.no_slider_nav .slick-dots { bottom:20px; } } @media screen and (max-width:600px) { #header_slider .caption { padding:0 20px; } #header_slider_nav .slick-current, #header_slider_nav .item:hover { background:#fff; } } /* スライダーナビゲーションリンク */ @media only screen and (max-width:991px){ #header_slider_nav .item { padding:10px 20px; } #header_slider_nav .catch { font-size:14px; line-height:2; } } /* 動画 */ @media only screen and (max-width: 767px) { #header_slider_nav { position:static; } #header_video { min-width:0; } } /* Youtube 動画 */ @media only screen and (max-width: 767px) { #header_youtube { min-width:0; } } /* 3点ボックスコンテンツ */ @media only screen and (max-width:991px){ #index_3box_list { display:block; width:100%; } #index_3box_list .box { width:100%; } } @media only screen and (max-width:767px){ #index_3box { width:auto; margin:0 auto; } #index_3box_header { padding:0 20px;} #index_3box_header .headline { font-size:26px !important; } #index_3box_header .desc { text-align:left; font-size:14px!important; } #index_3box_list .box { position:relative; padding:40px; } #index_3box_list .icon { margin:0 auto 31px; } #index_3box_list .catch { text-align:left; margin-bottom:22px; } #index_3box_list .desc { height:auto; overflow:none; margin:0 0 31px 0; } } @media screen and (max-width:550px) { #index_3box { width:100%; margin:0 auto; } #index_3box_list .box { margin:0 auto; position:relative; padding:40px 20px; } #index_3box_list .icon { float:none; width:128px; height:128px; border-radius:128px; position:relative; } #index_3box_list .icon span:before { top:46px; left:144px; } #index_3box_list .catch { text-align:center; } #index_3box_list .link { position:relative; right:0; left:0; bottom:0px; text-align:center; } } /* 3点ボックスコンテンツの下の画像 */ @media only screen and (max-width:767px){ #index_center_image { margin:0 0 25px 0; } } /* 4点ボックスコンテンツ */ @media only screen and (max-width:767px){ #index_4box_list { flex-direction:column; } #index_4box { width:auto; margin:0 auto 50px; padding:0 20px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } #index_4box_list .box { width:auto; margin:0 0 -1px 0; } #index_4box_list .box.num1, #index_4box_list .box.num3 { border-right:1px solid #ddd; } #index_4box_list .box.num3 { margin-bottom:-1px; } #index_4box_list .box.num4 { margin-bottom:1px; } #index_4box_list .box.num3 .image { float:left; margin:0 35px 0 0; } #index_4box_list .box.num2 .image, #index_4box_list .box.num4 .image { float:right; margin:0 0 0 35px; } } @media screen and (max-width:550px) { #index_4box_list .box { height:auto; float:none; } #index_4box_list .box.num1, #index_4box .box.num3 { border-right:1px solid #ddd; } #index_4box_list .box a.link { padding:30px 20px; } #index_4box_list .box .image { float:none; margin:0 auto 35px; } #index_4box_list .box.num2 .image, #index_4box_list .box.num3 .image, #index_4box_list .box.num4 .image { float:none; margin:0 auto 35px; } #index_4box_list .box .catch { text-align:center; } #index_4box_list .box .desc { height:auto; overflow:none; } } /* 一覧の見出し */ @media only screen and (max-width:767px){ .index_list_header { width:auto; margin:0 auto 40px; padding:0 20px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } .index_list_header .headline { float:none; text-align:center; font-size:26px !important; } .index_archive_link { display:none; } .mobile_archive_link .index_archive_link { display:inline-block; float:none; } .mobile_archive_link { text-align:center; margin:0 0 40px; } } /* お知らせ一覧 */ @media only screen and (max-width:767px){ #index_news_list { width:auto; margin:0 auto 50px; padding:0 20px; } #index_news_list .mobile_archive_link { margin-top:20px;} .news_list li { padding:0 18px; } .news_list .date { display:inline-block; float:none; margin:17px 10px 0 0; line-height:30px; } .news_list .category { display:inline-block; float:none; margin:17px 20px 0 0; line-height:30px; } .news_list .title { float:none; clear:both; display:block; line-height:1.6; width:auto; } .news_list .title a { display:block; padding:0; } .use_animation #index_news_list .mobile_archive_link .index_archive_link { opacity:0; } .use_animation #index_news_list.animated .mobile_archive_link .index_archive_link { -webkit-animation: opacityAnimation 1.0s ease forwards 1.0s; animation: opacityAnimation 1.0s ease forwards 1.0s; } } /* ブログ一覧 */ @media only screen and (max-width:991px) { .blog_list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .blog_list .box { margin-right: 0; width: calc((100% - 20px) / 2); } } @media only screen and (max-width:767px){ #index_blog_list { margin:0 auto 20px; width:calc(100% - 40px); } #index_blog_list .blog_list { display:block; } .blog_list .box { float:none; display:inline-block; vertical-align:top; height:auto; margin:0 0 20px 0; width:100%; } .blog_list .box .date { margin-left:10px; font-size:10px; } .blog_list .box:nth-child(3n) { margin-right:20px; } .blog_list .box:nth-child(2n) { margin-right:0px; } .blog_list .box .image { height:auto; } .blog_list .box .title a { height:auto; overflow:none; } .use_animation #index_blog_list .mobile_archive_link .index_archive_link { opacity:0; } .use_animation #index_blog_list.animated .mobile_archive_link .index_archive_link { -webkit-animation: opacityAnimation 1.0s ease forwards 1.0s; animation: opacityAnimation 1.0s ease forwards 1.0s; } } @media screen and (max-width:550px) { .blog_list { margin:0; } .blog_list .box { float:none; display:block; width:100%; height:auto; margin:0 0 20px 0; } .blog_list .box:nth-child(3n) { margin-right:0px; } .blog_list .box:nth-child(2n) { margin-right:0px; } } /* 料金システム表/機能比較表 */ @media only screen and (max-width:767px){ #index_price_function { width:initial; width: auto; margin:0 0 40px 0; padding:0 20px; } .index_price_function + .index_price_function { margin-top:20px; } } /* フリースペース */ @media only screen and (max-width:1149px){ .index_free_content { width:initial; width: auto; margin:0 0 40px 0 !important; padding:0 20px; } } /* ---------------------------------------------------------------------- 大きな画像 トップページの中央画像、フッター画像、アーカイブページ上部など ---------------------------------------------------------------------- */ @media only screen and (max-width:767px){ .wide_image { /*height:400px;*/ width:100%; min-width:0; position:relative; } .wide_image .caption { width:auto; padding:20px; } .wide_image .caption .title { font-size:24px!important; } .wide_image .caption .desc { text-align:left; } .wide_image .caption .desc { font-size:14px!important;} } /* ---------------------------------------------------------------------- 制作実績一覧 ---------------------------------------------------------------------- */ @media only screen and (max-width:767px){ #index_work_list { width:calc(100% - 40px); margin:0 20px; } #index_work_list #work_list_wrap { padding:0; margin-bottom:0; } #work_list_wrap { box-sizing:border-box; padding:0 20px; width:100%; } .work_list { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .work_list .box { width:100%; margin:0 0 20px 0; } .work_list .box .date { margin-bottom:0; } .use_animation #index_work_list .mobile_archive_link .index_archive_link { opacity:0; } .use_animation #index_work_list.animated .mobile_archive_link .index_archive_link { -webkit-animation: opacityAnimation 1.0s ease forwards 1.0s; animation: opacityAnimation 1.0s ease forwards 1.0s; } } @media screen and (max-width:600px) { .work_list .box { float:none; width:100%; height:auto; margin:0 0 20px 0; padding-bottom:20px; } .work_list .box:nth-child(3n) { margin-right:0px; } .work_list .box:nth-child(2n) { margin-right:0px; } .work_list .box .title { height:auto; line-height:1.8; } .work_list .box .title a { padding:15px 20px; } .work_list .box .image { margin:75px auto 20px; } .work_list .box .catch { margin-left:20px; margin-right:20px; } .work_list .box .date { margin-left:20px; margin-right:20px; font-size:10px; } } /* カテゴリ―ボタン */ @media only screen and (max-width:767px){ #work_category_list { width:auto; margin:0 20px 40px; } #work_category_list li { float:left; width:50%; height:80px; margin:0 -1px -1px 0; } } @media screen and (max-width:550px) { #work_category_list li { float:none; width:100%; margin:0 0 -1px 0; } } /* ---------------------------------------------------------------------- 製作実績ページ ---------------------------------------------------------------------- */ /* 見出し */ @media only screen and (max-width:767px){ #work_header { min-width:0; height:auto; } #work_header_inner { width:auto; margin:0 auto; padding:15px 20px; } #work_header .category { margin:0 0 10px 0; float:none; } #work_header .title { margin:0; float:none; height:auto; line-height:1.8; } } /* 詳細ページ 下部 */ @media only screen and (max-width:767px){ #work_footer_data { padding:20px 20px 0; margin:0 0 40px 0; } #work_footer_data .image { position:relative; top:0; left:0px; margin:0 auto 30px; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } #work_footer_data .data { margin:0; } #work_footer_data .title { text-align:center; } #work_footer_data .link { text-align:center; } } /* ボタン */ @media only screen and (max-width:767px){ #work_footer_data .link_button { margin:0 0 20px 0; text-align:center; } } /* 詳細ページ ナビゲーション */ @media only screen and (max-width:767px){ #work_navigation a { padding:0 45px; } #work_navigation a.prev { margin:0 4px 10px; } #work_navigation a.next { margin:0 4px; } } /* ---------------------------------------------------------------------- アーカイブページ ---------------------------------------------------------------------- */ @media only screen and (max-width:767px){ #page_header { margin:0 0 30px 0; } #page_header .headline { font-size:24px !important; line-height:1.4; } } /* ページング */ @media only screen and (max-width:767px){ .page_navi { margin:0 0 30px 0; } } /* ---------------------------------------------------------------------- お知らせ ---------------------------------------------------------------------- */ @media only screen and (max-width:767px){ #archive_news_list .news_list { margin:0 0 50px 0; } #single_news { background:#f7f7f7; padding:20px 20px 0px; margin:0 0 30px 0; } #single_news_list { margin:30px 0 30px 0; } } /* ---------------------------------------------------------------------- ヘッダー ---------------------------------------------------------------------- */ /* PCのスタイルをリセット iPadの回転対策 */ @media only screen and (max-width:1199px){ .pc #header_logo #logo_text, .pc #header_logo #logo_image { width:auto; } } /* メニューボタン */ @media only screen and (max-width:1199px){ a.menu_button { position:absolute; right:0px; z-index:9; display:inline-block; font-size:11px; color:#333; width:56px; height:56px; line-height:56px; text-decoration:none; text-align:center; } a.menu_button span { text-indent:100%; white-space:nowrap; overflow:hidden; display:block; } a.menu_button:before { font-family:'design_plus'; color:#fff; display:block; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; font-size:18px; width:24px; height:24px; line-height:24px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a.menu_button:before { content:'\f0c9'; } a.menu_button:hover, a.menu_button.active { background:#333; } a.menu_button:hover:before, a.menu_button.active:before { color:#fff; } } /* グローバルメニュー */ @media only screen and (max-width:1199px){ #global_menu { display:none; clear:both; width:100%; margin:0; top:56px; position:absolute; z-index:9; box-shadow: 1px 2px 1.5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 2px 1.5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1px 2px 1.5px rgba(0, 0, 0, 0.1); } #global_menu ul { margin:0; } #global_menu ul ul { display:none; } #global_menu a { position:relative; display:block; margin:0; padding:0px 15px; height:50px; line-height:50px; overflow:hidden; text-decoration:none; color:#fff; background:#333; font-size:13px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } #global_menu a:hover { color:#fff; } #global_menu ul ul a { padding-left:28px; background:#222; } #global_menu ul ul ul a { padding-left:42px; background:#111; } #global_menu ul ul ul ul a { padding-left:55px; background:#000; } #global_menu li.menu-item-has-children { position:relative; } #global_menu .child_menu_button { display:block; position:absolute; text-align:center; width:60px; height:49px; right:0px; top:1px; z-index:9; cursor:pointer; } #global_menu .child_menu_button .icon:before { content:'+'; font-size:13px; color:#aaa; text-align:center; display:block; width:20px; height:20px; line-height:20px; border:1px solid #555; border-radius:100%; position:absolute; left:20px; top:15px; } #global_menu .child_menu_button.active .icon:before, #global_menu .child_menu_button:hover .icon:before { color:#fff; border-color:#fff; } #global_menu li.menu-item-has-children.open > .child_menu_button .icon:before { content:'-'; } #global_menu li.menu-item-has-children.open > ul { display:block; } } /* ロゴ */ @media only screen and (max-width:1199px){ #logo_text { margin:0 0 0 15px; z-index:10; float:left; text-align:left; width:-webkit-calc(100% - 90px); width:-moz-calc(100% - 90px); width:calc(100% - 90px); overflow:hidden; } #logo_text h1 { font-weight:normal; height:56px; line-height:56px; } #logo_text a { text-decoration:none; display:block; -webkit-transition-property:none; -moz-transition-property:none; -o-transition-property:none; transition-property:none; } #logo_text a:hover { text-decoration:underline; } #logo_image { position:absolute; top:50%; left:calc(100% * 65 / 1280); -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); } #logo_image img.pc_logo_image { display:none; } #logo_image img.mobile_logo_image { display:block; } #logo_text_fixed, #logo_image_fixed { display:none; } } /* パンくずリンク */ @media only screen and (max-width:767px){ #bread_crumb { margin:0 0 30px 0; height:auto; line-height:1.6; min-width:0px; padding:15px 20px; } #bread_crumb ul { width:auto; margin:0 auto; } #bread_crumb li.home a:before { top:5px; left:0px; } #bread_crumb li:after { top:2px; } } /* ---------------------------------------------------------------------- 記事ページ ---------------------------------------------------------------------- */ /* 記事タイトル */ @media only screen and (max-width:767px){ #post_meta_top {margin-top:0;} #post_meta_top .date { line-height:30px; margin: 0 10px; font-size:10px; } #post_title { font-size:24px !important; line-height:1.4; margin:0 0 20px; } #post_image { margin-bottom:15px; } } /* 記事本文*/ @media only screen and (max-width:767px){ .post_content { margin:0; } } /* SNSボタン */ @media only screen and (max-width:767px){ #single_share_top { margin:-5px 0 10px; } #single_share_top #share_top1 { padding-top:0; } } /* メタ情報 */ @media only screen and (max-width:767px){ #post_meta_bottom { margin:0 0 20px 0; background:#fff; padding:0; } #post_meta_bottom li { display:block; margin:0 0 10px 0; border:none; font-size:12px; line-height:1.6; } #post_meta_bottom li:last-child { border:none; margin:0; } #post_meta_bottom li.post_category:before { top:0px; left:0px; } #post_meta_bottom li.post_tag:before { top:2px; left:0px; } #post_meta_bottom li.post_author:before { top:0px; left:0px; } #post_meta_bottom li.post_comment:before { top:0px; left:0px; } } /* 次の記事、前の記事 */ @media only screen and (max-width:767px){ #previous_next_post { margin:0 0 30px 0; } #previous_next_post .prev_post, #previous_next_post .next_post { width:50%; } #previous_next_post .prev_post { margin-bottom:-1px; } #previous_next_post a { height:auto; text-align:center; height:50px; line-height:50px; } #previous_next_post .prev_post a::before { line-height:50px; height:50px; } #previous_next_post .next_post a::before { line-height:50px; height:50px; } #previous_next_post a span { height:auto; } #previous_next_post span.nav { display:block; } #previous_next_post span.title { display:none; } #previous_next_post .prev_post span.nav { margin-left:-35px; } #previous_next_post .next_post span.nav { margin-right:-35px; } } /* 広告 */ @media only screen and (max-width:991px) { #single_banner_area { margin:0 0 15px 0; text-align:center; } #single_banner_area .single_banner_left { float:none; padding:0 0 15px 0; margin:0 auto; } #single_banner_area .single_banner_right { float:none; padding:0 0 15px 0; margin:0 auto; } #single_banner_area img { max-width:100%; height:auto; display:inline; } } /* 広告2 */ @media only screen and (max-width:991px) { #single_banner_area_bottom { margin: -20px 0 0; text-align:center; } #single_banner_area_bottom .single_banner_left { float:none; padding:0 0 15px 0; margin:0 auto; } #single_banner_area_bottom .single_banner_right { float:none; padding:0; margin:0 auto; } #single_banner_area_bottom img { max-width:100%; height:auto; display:inline; } } /* 広告(ショートコードver) */ @media only screen and (max-width:991px) { #single_banner_area2 { margin:0 0 15px 0; text-align:center; } #single_banner_area2 .single_banner_left { float:none; padding:0 0 15px 0; margin:0 auto; } #single_banner_area2 .single_banner_right { float:none; padding:0 0 5px 0; margin:0 auto; } #single_banner_area2 img { max-width:100%; height:auto; display:inline; } } /* 関連記事 */ @media only screen and (max-width:767px){ #related_post .headline { height:45px; line-height:45px; margin-bottom:15px; } #related_post { overflow:hidden; } #related_post ol { margin-right:-15px; } #related_post li, #related_post li:nth-child(4n) { width:33.33333%; width:-webkit-calc(100% / 3 - 15px); width:-moz-calc(100% / 3 - 15px); width:calc(100% / 3 - 15px); margin:0 15px 15px 0; } #related_post li:nth-child(3n) { margin-right:0; } #related_post li .image { margin:0 0 15px 0; display:block; width:100%; height:auto; } #related_post li .image img { /* スマホではhoverが効かないためアニメーションは無効にして、height:auto;が有効になるように以下を設定する */ width:100% !important; height:auto !important; -webkit-transform:none !important; -webkit-transition-property:none !important; -webkit-transition:0 !important; -moz-transform:none !important; -moz-transition-property:none !important; -moz-transition:0 !important; -ms-transform:none !important; -ms-transition-property:none !important; -ms-transition:0 !important; -o-transform:none !important; -o-transition-property:none !important; -o-transition:0 !important; transform:none !important; transition-property:none !important; transition:0 !important; } } @media screen and (max-width:550px) { #related_post ol { margin-right:-15px; } #related_post li, #related_post li:nth-child(4n) { width:50%; width:-webkit-calc(50% - 15px); width:-moz-calc(50% - 15px); width:calc(50% - 15px); margin:0 15px 15px 0; } #related_post li:nth-child(3n) { margin-right:15px; } } /* ---------------------------------------------------------------------- コメント ---------------------------------------------------------------------- */ @media only screen and (max-width:767px){ #comment_headline { margin:0 0 15px 0; } #comment_area, #trackback_area { margin:15px 0px 0; } } /* コメント・トラックバックのタブ */ @media only screen and (max-width:767px){ #comment_header { position:relative; margin:0 0 15px; } #comment_header ul { margin:0; } #comment_header ul li.comment_switch_active a:after, #comment_header #comment_closed p:after { display:none; } } @media screen and (max-width:500px) { #comment_header ul li { float:none; text-align:center; margin:0; width:100%; } } /* コメントの基本部分 */ @media only screen and (max-width:767px){ .comment { padding:10px 10px 0; } } /* コメントの情報部分 */ @media only screen and (max-width:767px){ .comment-meta-left { float:left; width:100%; } } /* フォーム部分 */ @media only screen and (max-width:767px){ .comment_form_wrapper { border:1px solid #ccc; margin:0 0 25px; padding:15px; background:#fff; } } /* ---------------------------------------------------------------------- フッター ---------------------------------------------------------------------- */ /* フッター上部 */ @media only screen and (max-width:767px){ #footer_top { min-width:0; } #footer_top_inner { width:auto; padding:35px 0 10px; } } /* widget */ @media only screen and (max-width:991px){ #footer_widget { margin:50px 20px; width:auto; font-size:0; text-align:left; } } /* メニュー */ @media only screen and (max-width:991px){ #footer_menu { margin:0 0 0 20px; width:auto; font-size:0; text-align:left; } #footer_menu ul, #footer_menu ul:last-child { display:block; vertical-align:top; float:left; width:50%; text-align:left; margin:0 20px 40px 0; width:-webkit-calc(50% - 20px); width:-moz-calc(50% - 20px); width:calc(50% - 20px); } } /* 住所 */ @media only screen and (max-width:767px){ #footer_address { margin:0 20px; text-align:center; border-top:1px dotted #ccc; padding-top:40px; } #footer_address .info { font-size:12px; } #footer_address li { display:block; margin:0; } } /* フッター下部 */ @media only screen and (max-width:767px){ #footer_bottom { width:auto; min-width:0; height:auto; background:none !important; } #footer_bottom_inner { width:auto; height:auto; } #footer_bottom a { } } /* SNSボタン */ @media only screen and (max-width:767px){ #footer_social_link { position:relative; left:0px; right:0; margin:auto; top:0px; background:#000; text-align:center; padding:0 0 40px 0; } #footer_social_link li { float:none; display:inline-block; margin:0 2px; } } /* ページ上部へ戻るボタン */ @media only screen and (max-width:767px){ #return_top { position:fixed; right:0px; bottom:0px; z-index:999; -webkit-transform: translate3d(0,120%,0); transform: translate3d(0,120%,0); -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } #return_top.active { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } #return_top a { position:relative; display:block; height:60px; width:60px; text-decoration:none; border-radius:0; } #return_top span { text-indent:100%; white-space:nowrap; overflow:hidden; display:block; } #return_top a:before { font-family:'design_plus'; color:#fff; font-size:18px; display:block; position:absolute; width:23px; height:23px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #return_top a:before { content:'\e911'; top:22px; left:21px; } } /* フッターナビ */ /* @media only screen and (max-width:767px){ .dp-footer-bar { display:table; } } */ /* 固定フッターが有効時、モバイルデバイス調整用 */ /* @media only screen and (max-width:767px){ body.mobile_device { padding-bottom:65px; } body.mobile_device #return_top.active { -webkit-transform: translate3d(0,-65px,0); transform: translate3d(0,-65px,0); } } */ /* ---------------------------------------------------------------------- サイドコンテンツ ---------------------------------------------------------------------- */ /* 基本設定 */ @media only screen and (max-width:767px){ .side_headline { text-align:center; } .side_widget { margin:0 0 25px 0; font-size:12px; position:relative; } .side_widget:last-child, .side_widget:only-child { margin:0; } } /* search */ @media only screen and (max-width:767px){ .widget_search #search-box, .widget_search #s, .side_widget.google_search #s { width:75%; height:40px; margin:0 0 5px 0; } .widget_search #search-btn input, .widget_search #searchsubmit, .side_widget.google_search #searchsubmit { width:25%; } } /* プロジェクト */ @media only screen and (max-width:767px){ .work_list_widget li, .footer_widget .work_list_widget li { margin:0 5px 5px 0 !important; width:auto; height:auto; width:-webkit-calc(100% / 3 - 5px); width:-moz-calc(100% / 3 - 5px); width:calc(100% / 3 - 5px); } .work_list_widget .image { width:100% !important; height:auto !important; } .work_list_widget .image img { /* スマホではhoverが効かないためアニメーションは無効にして、height:auto;が有効になるように以下を設定する */ width:100% !important; height:auto !important; -webkit-transform:none !important; -webkit-transition-property:none !important; -webkit-transition:0 !important; -moz-transform:none !important; -moz-transition-property:none !important; -moz-transition:0 !important; -ms-transform:none !important; -ms-transition-property:none !important; -ms-transition:0 !important; -o-transform:none !important; -o-transition-property:none !important; -o-transition:0 !important; transform:none !important; transition-property:none !important; transition:0 !important; } }