/* fontsize -----------------------------------------*/ .old-works { h2 { display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; } th { display: table-cell; vertical-align: inherit; font-weight: bold; text-align: -internal-center; vertical-align: top; } td { display: table-cell; vertical-align: inherit; } td.marginless { vertical-align: top; width: 50%; } td.marginless tr th { background-color: rgb(250, 240, 230); width: 60px; border: 1px solid gray; } td.marginless tr td { display: table-cell; vertical-align: inherit; border: 1px solid gray; } table { -webkit-border-horizontal-spacing: 5px; -webkit-border-vertical-spacing: 5px; display: table; border-collapse: separate; box-sizing: border-box; text-indent: initial; border-spacing: 5px; border-color: grey; } td.marginless table { display: table; border-collapse: separate; box-sizing: border-box; text-indent: initial; border-spacing: 2px; border-color: grey; border-collapse: separate; text-indent: initial; border-spacing: 2px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; border-collapse: separate; text-indent: initial; border-spacing: 2px; border: 1px solid gray; } td.marginless tbody { border-collapse: separate; text-indent: initial; border-spacing: 2px; } .fontS { font-size: 81.3%; } .fontM { font-size: 87.5% !important; } .fontL { font-size: 100% !important; } .h1 { font-size: 0.8em; display: inline; font-weight: normal; float: left; margin: 20px 0px 15px 5px; color: #000; } #main h2 { clear: both; background: #42602e; padding: 2px 0px 2px 15px; margin-bottom: 5px; color: #fff; font-size: 14px; text-align: left; line-height: 1.4em; } #main h3 { clear: both; padding: 5px 5px 5px 15px; margin-bottom: 15px; color: #42602e; font-size: 100%; border-bottom: solid 2px #42602e; border-left: solid 7px #42602e; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; } #main h4 { clear: both; padding: 3px 5px 0px 30px; margin-bottom: 15px; color: #333; font-size: 100%; border-bottom: solid 2px #24602e; text-align: left; } /*追加*/ #main h2 { font-size: 24px; padding: 2%; } #main h3 { font-size: 18px; border: 1px solid #42602e; border-width: 1px 0; margin: 2% 0; padding: 2%; } #main h4 { border: 0 solid #42602e; border-left-width: 3px; margin: 2%; font-size: 16px; padding: 0 2%; } @media screen and (max-width:640px) { #main h2 { font-size: 21px; } #main h3 { font-size: 15px; } } /* mod_headerbox_size -----------------------------------------*/ .mod_headerbox_size { width: 190px; position: relative; overflow: hidden; margin-top: 0px; } .mod_headerbox_size ul, .mod_headerbox_size p { float: left; } .mod_headerbox_size ul li { float: left; width: 25px; height: 25px; overflow: hidden; margin-left: 3px; margin-right: 2px; } .mod_headerbox_size ul li span { display: block; cursor: pointer; } .mod_headerbox_size ul li.active span { margin-top: -25px; } .mod_headerbox_size ul li span:hover { margin-top: -25px; } #top_bg { position: relative; width: 100%; max-height: 280px; overflow: hidden; } #top_bg img { float: left; width: 100%; min-height: 290px; } #top_bg_sp { position: relative; width: 100%; max-height: 720px; } #top_bg_sp img { width: 100%; height: auto; } hr { border: 0; border-bottom: 1px dashed #ccc; background: #999; margin: 5px; } /* cssリセット */ * { font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; } * { padding: 0; margin: 0; vertical-align: top; } div, ul, li, body { display: block; margin: 0; padding: 0; } .box { float: left; } img { border-style: none; max-width: 100%; width: auto; height: auto; vertical-align: middle; } a:link { color: #2355A5; text-decoration: none; } a:visited { color: #660099; text-decoration: none; } a:hover { color: #2355A5; text-decoration: underline; } /* Google コンバージョンタグ レスポンシブ */ iframe[name='google_conversion_frame'] { height: 0 !important; width: 0 !important; line-height: 0 !important; font-size: 0 !important; margin-top: -13px; float: left; } /* GoogleMAP レスポンシブ */ .ggmap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .ggmap iframe, .ggmapr object, .ggmap embed { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 96%; height: 90%; } /* clearfix*/ .clearfix { width: 100%; } .clearfix:after { content: ""; display: block; clear: both; } /* テキストとばし */ .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; } /* アンカーリンク */ .anchor { padding-top: 75px; margin-top: -75px; } @media screen and (max-width:1024px) { .anchor { padding-top: 56px; margin-top: -56px; } } @media screen and (max-width:640px) { .anchor { padding-top: 56px; margin-top: -56px; } } /* マウスオーバー */ a:hover img { opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; } /* 表示非表示 */ .d-1024 { display: block; } .d-640 { display: block; } .d-480 { display: block; } .d-360 { display: block; } .d1024-768 { display: none; } .d1024-640 { display: none; } .d1024-480 { display: none; } .d1024-360 { display: none; } .d1024-320 { display: none; } .d640-480 { display: none; } .d640-360 { display: none; } .d640-320 { display: none; } .d480-320 { display: none; } .d360-320 { display: none; } @media screen and (max-width:1024px) { .h1 { display: none; } .d-1024 { display: none; } .d1024-768 { display: block; } .d1024-640 { display: block; } .d1024-480 { display: block; } .d1024-360 { display: block; } .d1024-320 { display: block; } } @media screen and (max-width:1024px) { .d1024-768 { display: none; } } @media screen and (max-width:640px) { .d-640 { display: none; } .d1024-768 { display: none; } .d1024-640 { display: none; } .d640-480 { display: block; } .d640-360 { display: block; } .d640-320 { display: block; } } @media screen and (max-width:480px) { .d-480 { display: none; } .d1024-480 { display: none; } .d640-480 { display: none; } .d480-320 { display: block; } } @media only screen and (max-width: 360px) { .d-360 { display: none; } .d1024-360 { display: none; } .d640-360 { display: none; } .d360-320 { display: block; } } .top_width { width: 980px; margin: 0 auto; } @media screen and (max-width:1024px) { .top_width { width: 100%; } } /* 追加メニュー */ .mean-container .mean-bar { background: transparent; float: right; width: 100%; pointer-events: none; padding-top: 34%; padding-top: calc(55px + 16%); position: fixed; z-index: 9500; } .mean-container a.meanmenu-reveal { text-indent: initial; width: 56px; height: 56px; padding: 0; pointer-events: all; } .mean-container .mean-nav ul li { pointer-events: all; } .nav_fix { overflow: hidden; height: 100%; } .mean-container .mean-nav>ul { overflow: scroll; height: 455px; height: 80vh; display: none; } .mean-container .mean-nav { background: rgba(255, 255, 255, 0.9); margin-top: 0; pointer-events: all; } .mean-container .mean-nav ul li a { color: #303030; } .mean-container .mean-nav ul li a.mean-expand, .mean-container .mean-nav ul li a.mean-expand:hover { background: rgba(182, 182, 182, 0.7); } .mean-container .mean-nav ul li a.mean-expand { background: rgba(182, 182, 182, 0.5); } /* 子メニュー - .sub-menu */ #navi .sub-menu { position: absolute; width: 195px; background: #fff; top: 60px; display: none; font-size: 81.3%; border: solid 1px #b8d201; } #navi .sub-menu a { color: #b8d201; padding: 20px 15px; display: block; } #navi .sub-menu a:hover { color: #fff; background: #a8bc1b; } /* ホバーで子メニュー表示 */ #navi .menu-item-has-children:hover ul { display: block; } /* ヘッダーここから */ #header { width: 100%; height: 158px; position: relative; } #hd_font { float: right; margin: 10px 0px 3px 0px; } #hd_font p { font-size: 12px; margin-right: 3px; } #hd_title { margin-top: 9px; padding: 0; float: left; } #hd_tel { margin-top: 18px; padding: 0; float: right; } #navi { line-height: 0; position: absolute; bottom: 14px; } #navi table { border-collapse: collapse; border: none; z-index: 1; } #hd_sp_icon { width: 128px; float: right; display: none; } #nav_sp { float: right; display: none; margin: 0px 5px 0px 0px; width: 56px; } #hd_es_sp { float: right; display: none; margin: 0px 5px 0px; max-width: 56px; } @media screen and (max-width:1024px) { #header { width: 100%; height: auto; } #navi { display: none; } #nav_sp { display: block; } #hd_tel { display: none; } #hd_font { display: none; } #hd_sp_icon { display: block; position: absolute; top: 0; right: 42px; } #hd_es_sp { display: block; } #hd_title { margin-top: 0px; padding: 7px 0 0 7px; } #hd_title img { width: auto; max-height: 48px; } } @media screen and (max-width:480px) { #hd_title img { width: auto; max-height: 46px; } #hd_title { margin-top: 0px; padding: 11px 0 0 10px; width: 100%; max-width: 80%; } } /* ヘッダーここまで */ /* サイドAここから */ #sub { width: 230px; } #sub_cnt01, #sub_cnt02, #sub_cnt03 { width: 100%; } #sub_cnt01 img, #sub_cnt02 img, #sub_cnt03 img, #sub img { margin: 0 0 10px; } #sub h2 { font-size: 16px; padding: 5px 10px; border: 1px solid #666; coloar: #666; border-bottom: 4px solid #42602e; margin-bottom: 10px; background: #fff; } @media screen and (max-width:1024px) { #sub { display: none; } } /* left contentsB [ navigation ] */ .RSbNav1 { font-size: 13px; vertical-align: baseline; list-style: none; } .RSbNav1 li { zoom: 1; vertical-align: baseline; list-style: none; } .RSbNav1 li a.CA1 { margin-bottom: 5px; display: block; padding: 0px 0; color: #3e3d3d; text-decoration: none; border-bottom: 1px solid #999; } .RSbNav1 li a.CA1 .CS1 { display: block; padding: 4px 15px 4px 15px; letter-spacing: -1px; } .RSbNav1 li a.CA1:hover { color: #ff591b; } .RSbNav1 li a.CA1:before { left: 4px; box-sizing: border-box; width: 4px; height: 4px; border: 4px solid transparent; border-left: 4px solid #7a0; } .CA1 { position: relative; } .CA1::after { position: absolute; top: 50%; left: .2em; content: ''; margin-top: -5px; border: 7px solid transparent; border-top-width: 5px; border-bottom-width: 5px; border-left-color: #42602e; transition: all .2s; } .CA1:hover::after { left: .3em; } .RSbNav2 { padding-left: 15px; } /* サイドAここまで */ /* フッターここから */ #RFtNav1 li { color: #333; display: inline-block; border-left: 1px solid #333; padding: 0px 0px 0px 12px; margin: 0px 10px 2px 0px; font-size: 93%; } #RFtNav1 a { color: #333; } #footer_cnt01 { width: 100%; overflow: hidden; } #footer_cnt01 ul { margin: 0 auto; width: 960px; list-style: none; overflow: hidden; } #footer { margin: 10px auto 0; padding-top: 1.5%; width: 940px; } #footer_cnt04 { width: 100%; text-align: center; margin: 10px 0; color: #333; } #footer_cnt04 br { display: none; } #footer_left { width: 100%; float: left; } #footer_info { width: 36%; text-align: center; } .footer_info_inner { width: 89%; float: right; border: solid 1px #000; padding: 6% 5% 15px 5%; box-sizing: border-box; background: #707070; } .footer_info_text { text-align: left; margin-bottom: 40px; font-size: 90%; padding: 6% 0 0 0; line-height: 1.3em; letter-spacing: -1px; color: #333; } #footer_area_description { margin: 5% 0 3%; color: #333; } @media screen and (max-width:1024px) { #footer_cnt01 img { width: 100%; } #footer_cnt01 ul { width: 100%; } #footer_cnt01 li { width: 50%; padding: 10px; margin: 0; box-sizing: border-box; float: left; } #footer { width: 98%; padding: 0 1%; box-sizing: border-box; } #footer_cnt04 { width: 100%; text-align: center; margin-bottom: 4%; } #footer_cnt04 ul { margin: 0 10px; } .footer_info_inner { padding: 5% 9% 15px 9%; } #RFtNav1 li { margin: 6px; } } @media only screen and (max-width: 670px) { #footer_cnt04 { margin-bottom: 9%; text-align: center; } #footer_info { width: 100%; margin-top: 5%; padding: 0 1%; box-sizing: border-box; } .footer_info_inner { width: 100%; } #footer_left { width: 100%; } #footer_area_description { display: none; } #footer_info { display: none; } } @media only screen and (max-width: 640px) { #footer_cnt04 { color: #fff; } #footer { width: 100%; } ul#RFtNav1 { padding: 5% 1%; } } @media only screen and (max-width: 480px) { #footer_cnt04 br { display: block; } #footer { width: 100%; background: #707070; overflow: hidden; } #footer_cnt04 { color: #fff; } #RFtNav1 li { border-color: #fff; } #RFtNav1 a { color: #fff; } } /* フッターここまで */ /* スライダーorキャッチここから */ /* スライダーorキャッチここまで */ /* TOPコンテンツここから */ /* TOP事例・声ここから */ /* フレームここから */ #main_top .works_box .pic_frame, .pic_frame { box-shadow: 0 0 0 4px #fff inset; margin-bottom: 3%; border: solid 4px transparent; position: relative; z-index: 0; } #main_top .works_box .pic_frame2, .pic_frame2 { box-shadow: 0 0 0 1px #b6b6b6 inset; margin-bottom: 3%; border: none; } .works_box .pic_frame, .pic_frame { box-shadow: 0 0 0 4px #fff inset; margin-bottom: 3%; border: solid 4px transparent; position: relative; z-index: 0; height: 0; padding-bottom: 73%; overflow: hidden; } .works_box .pic_frame2, .pic_frame2 { box-shadow: 0 0 0 1px #b6b6b6 inset; margin-bottom: 3%; border: none; background: #fff; } @media only screen and (max-width: 640px) { .works_box .pic_frame, .pic_frame { padding-bottom: 71%; } } .pic_frame_img { z-index: -1; position: relative; vertical-align: bottom; -webkit-transform: translate3d(0, 0, 0); border: none; /*border: 3px solid transparent;*/ box-sizing: border-box; } .entry_voice_box_pic .pic_frame { height: auto; padding-bottom: 0; } .entry_voice_box_pic { float: left; margin: 0 2% 0 0; max-width: 50%; } /* フレームここまで */ .all_listbox { width: 100%; overflow: hidden; } .all_listbox:after { content: ""; display: block; clear: both; } .works_block_top ul .works_block2 li { width: 100%; padding: 0px; } .works_block_top { float: left; margin: 0; text-align: center; width: 33.3%; } .works_block_top2 ul li { padding: 0 1%; } .works_block_top2 ul .works_block2 li { width: 100%; padding: 0px; } .works_block_top2 { float: left; margin: 0; text-align: center; width: 33.3%; } .works_block ul .works_block2 li { width: 98%; padding: 0px; } .works_block { width: 48%; float: left; margin: 1%; text-align: center; } .works_block ul { list-style: none; line-height: 1.5; } .works_box { margin: 1% auto; width: 100%; max-width: 940px; } .works_box .list_box { float: right; width: 940px; box-sizing: border-box; } .works_box .list_box2 { float: right; width: 100%; } .works_box .works_block2 p { color: #2b2a2a; } .works_box .list_box2 .works_block_top { width: 220px; margin-left: 0px; margin-right: 20px; } .works_box .works_block_top { width: 300px; margin-right: 20px; } .works_box .works_block2 .works_box_cost_period, .works_box .works_block2 .works_box_client, .works_box .works_block2 .works_box_category, .works_block2 p { font-size: 110%; color: #2b2a2a; text-align: left; } .works_block_top ul .works_block2 .works_box_client, .works_block_top2 ul .works_block2 .works_box_client, .works_box .works_block2 .works_box_category { margin: 3% 3%; width: 94%; font-weight: bold; } .works_box .works_box_category span { font-size: 110%; } .works_box .works_box_date { margin: 0 5px; } .works_box .works_box_ccomment a, .works_box .works_box_client a, .works_box .works_box_category a { color: #2b2a2a; } .works_box .works_box_client a { display: block; } .h2_works_box, .h2_voice_box { width: 100%; text-align: center; } .works_box .works_block_top2 { width: 300px; margin-right: 20px; } .dousen_top { margin: 1% 0; text-align: center; } .dousen_top_inner { width: 100%; max-width: 960px; margin: 0px auto; } .works_block2 p { padding: 0px 5px; } @media screen and (max-width:1024px) { .all_listbox { width: 100%; height: auto; margin: 0 0 0 0%; overflow: hidden; } .works_block_top { width: 33.3%; } .works_block_top img { width: 100%; } .works_block_top2 { width: 33.3%; } .works_block_top2 img { width: 100%; } .works_block_top ul li { width: 98%; margin: 0px 1%; padding: 0px; float: left; } .works_block_top ul .works_block2 li { width: 100%; padding: 0px; float: right; } .works_block_top2 ul li { width: 98%; margin: 0px 1%; padding: 0px; float: left; } .works_block_top2 ul .works_block2 li { width: 100%; padding: 0px; float: right; } .works_block2 p { padding: 0px; /*15px;*/ } .works_box .works_block_top2 { width: 33.3%; margin-left: auto; margin: 0; box-sizing: border-box; } .works_box .list_box { float: right; width: 100%; box-sizing: border-box; } .works_box { width: 96%; margin: 2% auto; } .works_box .works_block_top { width: 33.3%; margin-left: auto; margin: 0; box-sizing: border-box; } .works_box .list_box2 .works_block_top { width: 24%; margin-right: 1%; } } @media screen and (max-width:768px) { .works_block_top { width: 100%; margin: 0 0 4%; } .works_block_top2 { width: 100%; margin: 0 0 4%; } .works_block_top ul li { width: 48%; } .works_block_top2 ul li { width: 48%; } .works_dousen { display: none; } .works_block { width: 100%; float: left; margin: 1%; text-align: center; } .works_block ul { list-style: none; } .works_block ul li { width: 48%; float: left; } .works_block ul .works_block2 li { float: right; padding: 0 1%; } .works_block ul .works_block2 { width: 100%; float: right; margin: 0; text-align: center; } .works_box .works_block_top2 ul li { width: 98%; } .works_box .works_block_top ul li { width: 98%; } /*.works_box_ccomment{display:none;}*/ } @media screen and (max-width:640px) { .works_box { width: 100%; } .works_box .list_box { float: right; width: 100%; } .works_box .list_box2 .works_block_top { width: 98%; margin: 1%; } .works_box .works_block_top { width: 48%; margin: 0 1% 2%; padding: 0; } .works_dousen { margin: 0 2px 5%; } .works_box_ccomment { display: block; } .works_box .works_block_top ul li .works_block2 li, .works_box .works_block_top2 ul li .works_block2 li { width: 100%; } .works_block_top ul .works_block2 .works_box_client, .works_block_top2 ul .works_block2 .works_box_client { margin: 3% 0%; } .h2_works_box, .h2_voice_box { float: left; width: 100%; margin: 0% 0 2%; } .works_box .works_block_top2 { width: 48%; margin: 0 1% 2%; padding: 0; } .works_box .works_block2 .works_box_cost_period, .works_box .works_block2 .works_box_client, .works_box .works_block2 .works_box_category, .works_block2 p { font-size: 80%; font-size: 3vw; } } @media screen and (max-width:480px) { .works_block2 p { padding: 0px; /* 5px;*/ } .works_block ul .works_block2 { width: 100%; float: right; margin: 0; text-align: center; } .works_box .works_block_top ul li { width: 98%; } .works_box .works_block_top2 ul li { width: 98%; } } @media only screen and (max-width: 360px) { .all_listbox { width: 99%; height: auto; margin: 0 0.5%; overflow: hidden; } .works_block_top ul li { width: 98%; margin: 0 1%; } .works_block_top2 ul li { width: 98%; margin: 0 1%; } .works_block ul .works_block2 li { float: right; padding: 0 1%; } } @media only screen and (min-width: 0px) and (max-width: 320px) { .works_block ul .works_block2 { width: 50%; } } /* TOP事例・声ここまで */ /* TOPコンテンツここまで */ /* フッター導線ここから */ #sub_r { position: absolute; top: 0px; width: 150px; height: 182px; margin: 220px 0px 0px 985px; z-index: 9999; } #sub_ft table, #sub_r table, #sub_ft_sp table { border-collapse: collapse; border: none; } #sub_ft_box { width: 980px; margin: 0 auto; } #sub_ft { position: fixed; top: 100%; width: 980px; height: 86px; margin: -85px 0px 0px; z-index: 99; line-height: 0; } #sub_ft a:hover img { opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha( opacity=100 )"; } #sub_ft_sp { position: fixed; bottom: 0px; width: 100%; height: auto; margin: 0px; z-index: 99; line-height: 0; display: none !important; left: 0; } #sub_ft_sp img { width: 100%; } #sub_ft img { width: 100%; } @media screen and (max-width:1024px) { #sub_r { display: none !important; } #sub_ft { display: none !important; width: 100%; } #sub_ft_sp { display: block !important; } #sub_ft, #sub_ft_box { width: 100%; } #sub_ft { height: 10.1%; margin: -10.1% 0px 0px; } } /* フッター導線ここまで */ /* 下層コンテンツここから */ /* 下層共通部分ここから */ /* ぱんくずここから */ .top_infoarea { margin-top: 10px; overflow: hidden; } #RCrumb1 { margin-top: 5px; margin-bottom: 5px; } #RCrumb1 li { display: inline; margin-right: 6px; padding-left: 12px; } #RCrumb1 .RFirst { background: none; padding-left: 0px; } @media screen and (max-width:1024px) { #RCrumb1 { margin-left: 5px; } } /* ぱんくずここまで */ /* 3点バナーここから */ #three_banner { overflow: hidden; width: 100%; margin: 0px 0px 3%; } #three_banner ul { margin-left: 0px; padding: 0px; list-style: none outside none; width: 732px; line-height: 0; } #three_banner ul li { float: left; margin: 15px 4px 0px 0px; width: 240px; } #three_banner_970 { width: 100%; overflow: hidden; } #three_banner_970 ul { margin: 1% auto; padding: 0px; list-style: none outside none; line-height: 0; width: 984px; } #three_banner_970 ul li { float: left; margin: 1% 4px 0px 0px; width: 324px; } @media screen and (max-width:1024px) { #three_banner ul { width: 100%; } #three_banner ul li { margin: 0 0px 5px 1%; width: 32%; float: left; } #three_banner_970 ul { width: 100%; } #three_banner_970 ul li { margin: 1% 0px 0px 1%; width: 32%; } } @media only screen and (max-width: 360px) { #three_banner ul li { margin: 1% 1% 0px; width: 98%; } #three_banner_970 ul li { margin: 1% 1% 0px; width: 98%; } } /* 3点バナーここまで */ /*SNSボタン ここから*/ .Socialbtn { text-align: right; margin: 0px 0px 0px 0px; float: right; } .Socialbtn iframe, .Socialbtn a, .Socialbtn img, .Socialbtn div { vertical-align: bottom !important; } .Socialbtn .Line { position: relative; float: left; width: 82px; } .Socialbtn .Gree { position: relative; float: left; width: 60px; } .Socialbtn .HatenaBookmark { position: relative; float: left; } .Socialbtn .Evernote { position: relative; float: left; width: 51px; } .Socialbtn .GooglePlus { position: relative; float: left; width: 55px; } .Socialbtn .Tweet { position: relative; float: left; width: 85px; } /*.Socialbtn .Facebook { position:relative; top:0px; float:left; width:100px;}*/ .Socialbtn span { margin: 5px; } /*.Socialbtn .Facebook iframe{width:100px;}*/ .Socialbtn .social_line01 { display: inline; } .Socialbtn .social_line02 { display: inline; } @media screen and (max-width:640px) { .Socialbtn { float: none; } .Socialbtn .social_line01 { display: block; } .Socialbtn:after { content: ""; display: block; clear: both; } } .fb-like iframe { max-width: none; } .fb_iframe_widget_lift { right: 0; } .Socialbtn span { margin: 0; } .Socialbtn .Facebook { position: relative; float: left; width: 100px; margin: 5px !important; } .Socialbtn .Tweet, .Socialbtn .Line { margin: 5px !important; } #main .Socialbtn .Facebook { margin: 0 5px; } /*.Socialbtn .Tweet{padding-top:1px;}*/ /*SNSボタン ここまで*/ .table-style01 { margin: 5px 0; } .table-style01 th, .table-style01 td { padding: 5px; } .table-style02 { margin: 5px 0; } .table-style02 th, .table-style02 td { padding: 5px; } .table-style02 th { width: 20%; max-width: 220px; } @media screen and (max-width:640px) { .table-style01 th, .table-style01 td { display: block; } .table-style01 th { text-align: left; } .table-style02 th, .table-style02 td { display: block; } .table-style02 tr { float: left; width: 49%; } .table-style02 th { width: 100%; text-align: left; } .table-style02 th img, .table-style02 td img { width: 100%; } .table-style02 td { width: 100%; max-width: 310px; padding: 0 10px; } } /* 下層共通部分ここまで*/ /* 事例ページネーションここから */ .btn { display: inline-block; padding: 10px; border-radius: 5px; /*optional*/ color: #aaa; font-size: .875em; } .pg_list { padding: 0px; margin-bottom: 10px; } .link_page, .link_next, .current_page, .link_before, .link_first, .link_last { font: 14px/24px; margin-top: 5px; display: inline-block; padding: 0.5% 1%; margin-right: 4px; border-radius: 3px; border: solid 1px #c0c0c0; background: #e9e9e9; box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .8), 0px 1px 3px rgba(0, 0, 0, .1); font-size: .875em; font-weight: bold; text-decoration: none; color: #717171; text-shadow: 0px 1px 0px rgba(255, 255, 255, 1); } .link_page:hover, .link_next:hover, current_page:hover, link_before:hover, .link_first:hover, .link_last:hover { background: #fefefe; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0)); background: -moz-linear-gradient(0% 0% 270deg, #FEFEFE, #f0f0f0); } .current_page { margin-top: 5px; padding: 0.5% 1%; border: none; background: #616161; box-shadow: inset 0px 0px 8px rgba(0, 0, 0, .5), 0px 1px 0px rgba(255, 255, 255, .8); color: #f0f0f0; text-shadow: 0px 0px 3px rgba(0, 0, 0, .5); } .link_page, .link_next, .link_before, .link_first, .link_last { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f8f8), to(#e9e9e9)); background: -moz-linear-gradient(0% 0% 270deg, #f8f8f8, #e9e9e9); } /* 事例ページネーションここまで */ /* 下層事例・声ここから */ /* 事例下層インデックスここから */ #main_cnt02 .works_block { width: 50%; float: left; margin: 2% 0; text-align: center; box-sizing: border-box; padding: 1%; } #main_cnt02 .works_block_top { float: left; margin: 0px 0px 0px 4%; text-align: center; } #main_cnt02 .works_block_top2 { float: left; margin: 0px 0px 0px 4%; text-align: center; } @media screen and (max-width:1024px) { #main_cnt02 .works_block { width: 48%; margin: 2% 1% 2%; } } @media screen and (max-width:640px) { #main_cnt02 .works_block { width: 50%; box-sizing: border-box; margin: 2% 0 2%; } #main_cnt02 .works_block .works_block2 li { width: 100%; } } @media screen and (max-width:480px) { #main_cnt02 .works_block ul .works_block2 li { width: 100%; float: right; margin: 0px; } } @media only screen and (max-width: 320px) { #main_cnt02 .works_block .works_block2 li { width: 100%; } #main_cnt02 .works_block ul .works_block2 { width: 100%; float: right; margin: 0; text-align: center; } } /* 事例下層インデックスここまで */ #entry_textbox { width: 100%; margin: 0 auto; max-width: 980px; } #entry_textbox img { width: 100%; height: auto; vertical-align: middle; font-size: 0%; } #entry_textbox table { width: 100%; height: auto; vertical-align: middle; font-size: 0%; } #entry_textbox .table-style01 { margin: 0; } #entry_textbox .table-style01 th, #entry_textbox .table-style01 td { padding: 0px; } #jirei_entry .table-style01 img { max-width: 150px; } #main #jirei_entry .table-style01 th { width: 150px; } #jirei_entry .table-style02 img { max-width: 140px; } #jirei_entry table { width: 100%; height: auto; } #jirei_entry table img { width: 100%; height: auto; } #jirei_entry .jirei-top { width: 90%; margin: 0 auto; } .jirei-top { text-align: center; } #jirei_entry .jirei-top img { border: 1px solid #cccccc; padding: 4px; width: 100%; height: auto; max-width: 710px; margin-left: -4px; } .uc td { width: 33%; } .uc td img { width: 100% !important; height: auto !important; max-width: 230px; } .after img { width: 100% !important; height: auto !important; max-width: 350px; } .after td { box-sizing: border-box; width: 50%; padding: 0.5%; } .jirei-top { width: 100% } .jirei-top img { width: 100% !important; height: auto !important; } .ichiran { width: 98%; max-width: 350px; float: right; } .ichiran img { width: 100%; max-width: 350px; } @media screen and (max-width:1024px) { .ichiran { margin: 0px 1%; } .uc td img { max-width: 100%; } .after img { max-width: 100%; } } @media screen and (max-width:768px) { #main #jirei_entry table img { width: 98% !important; } #main #jirei_entry .table-style02 th img { width: auto !important; } #main #jirei_entry .table-style01 th img { width: auto !important; } } @media screen and (max-width:480px) { #main #jirei_entry .table-style02 th img { width: auto !important; } #main #jirei_entry .table-style01 th img { width: auto !important; } } /* 下層事例・声ここまで */ /* 下層コンテンツここまで */ /* 構造ここから */ #root { max-width: 100%; margin: 0 auto; } #wrapper { width: 100%; } #layout01 { max-width: 980px; margin: 0 auto; } #layout01_box { width: 100%; height: 158px; } #layout01_box_sp { width: 100%; height: 70px; } #layout02 { max-width: 100%; margin: 0 auto; min-height: 20px; } #layout03 { max-width: 980px; margin: 1% auto 0; width: 98%; } #layout04 { max-width: 100%; margin: 0px auto; background: #fff; padding: 0 0 110px; } .top_h2 { display: block; } .top_h2_sp { display: none; } #main { width: 730px; float: right; overflow: hidden; margin-right: 5px; } #main_cnt01 { width: 100%; margin: 0 0 0 0; } #main_cnt01 ul { margin: 0; padding: 0; list-style: none; overflow: hidden; line-height: 1.5; } #main_cnt01 li { margin: 0 5px 2px 0; padding: 0; float: left; } #main_cnt02 { width: 100%; margin: 0 0 5px 0; } #main_cnt02 ul { margin: 0; padding: 0; list-style: none; overflow: hidden; line-height: 1.5; } #main_cnt02 li { margin: 0; padding: 0px 0px 4px; float: left; text-align: center; width: 100%; } #main_cnt03 { width: 100%; } #main_cnt03 ul { margin: 0; padding: 0; list-style: none; overflow: hidden; line-height: 0; } #main_cnt03 li { margin: 0 5px 5px 0; padding: 0; float: left; } @media screen and (max-width:1024px) { #layout01_bg { top: 0; left: 0; height: 66px; border-bottom: 4px solid #f6f3ea; position: fixed; } .top_h2 { display: none; } .top_h2_sp { display: block; } } #main_top { width: 100%; } #main_top_cnt02 { width: 960px; margin: 0 auto; } #main_top_cnt03 { width: 960px; margin: 0 auto; } @media screen and (max-width:1024px) { #layout04 { padding: 0 0 10%; } #main_top_cnt02 { width: 100%; margin: 0 auto; padding: 0; } #main_top_cnt03 { width: 100%; margin: 0 auto; padding: 0px; } } @media only screen and (max-width: 670px) { #layout04 { padding: 0 0 26%; } } @media screen and (max-width:640px) { #layout04 { color: #fff; margin-top: 2%; } } @media only screen and (max-width: 360px) { #main_cnt02 li { width: 100%; margin: 0; } } @media screen and (max-width:1024px) { #main .box h2 { width: 100%; } #main { width: 100%; margin: 0 } #main_cnt01 { width: 100%; } #main_cnt01 li { width: 100%; } #main_cnt01 img { width: 100%; } #main_cnt02 { width: 100%; } #main_cnt02 img { width: 100%; } #main_cnt03 { width: 100%; } #main_cnt03 li { width: 100%; } #main_cnt03 img { width: 100%; } } /* 構造ここまで */ /* 導線共通部分ここから */ .cnt_box_inner { max-width: 960px; width: 100%; height: auto; overflow: hidden; margin: 0px auto; padding: 10px 0; } .is_1per1 div { box-sizing: border-box; width: 100%; padding: 10px; } .is_1per2 li { box-sizing: border-box; width: 50%; float: left; padding: 10px; } .is_1per3 li { box-sizing: border-box; width: 33.3%; float: left; padding: 10px; } .is_1per4 li { box-sizing: border-box; width: 25%; float: left; padding: 10px; } @media screen and (max-width: 1024px) { .cnt_box_inner { padding: 0; } } @media screen and (max-width: 640px) { .is_1per1 div { padding: 3%; } .is_1per2 li { padding: 3%; } .is_1per3 li { padding: 2%; } .is_1per4 li { width: 50%; padding: 2%; } } /*iOS 文字サイズ調整*/ body { -webkit-text-size-adjust: 100%; } /*---pg.css追加ここから---*/ .pg_table { margin-bottom: 2%; } .pg_table table { width: 100%; margin: 0 auto; table-layout: fixed; border: 1px solid #a0a0a0; } .pg_table td:first-child { width: 30%; background: #dddddd; text-align: center; border-right: 1px solid #a0a0a0; } .pg_table tr td { border-bottom: 1px solid #a0a0a0; } .pg_table td:nth-child(2) { padding: 5px; } .pg_table tr:last-child td { border-bottom: 0px; } /*---pg.css追加ここまで---*/ /* ヘッダーここから */ #hd_font { margin: 17px 0px 7px 0px; } #hd_title2 { margin: 10px 0 0 80px; padding: 0; float: left; } #hd_tel { margin-top: 0px; margin-right: -6px; z-index: 2; position: relative; } @media screen and (max-width:1024px) { #hd_title2 { display: none; } #layout01_bg { background: #f6f3ea; height: 56px; } #layout01_box_sp { height: 54px; } } @media screen and (max-width:640px) { #layout01_box_sp { padding: 0; } #header_inner { height: 56px; } .sp_hd_bottom { background-color: #fff; } .sp_hd_bottom ul { overflow: hidden; border-bottom: solid 6px #fe5e1e; } .sp_hd_bottom li { width: 20%; float: left; box-sizing: border-box; padding: 0; margin: 0; text-align: center; } } /* LP用ヘッダーここから */ #root.lp_top #layout01_bg { height: 140px; } #root.lp_top #layout01_box { height: 140px; } .lp_top #footer_cnt04, .form_root #footer_cnt04 { text-align: center; } #root.lp_top .anchor { padding-top: 0px; margin-top: 0px; } .lp_top #hd_tel { margin-top: 0px; margin-right: -6px; z-index: 2; position: relative; } @media screen and (max-width:1024px) { #root.lp_top #layout01_bg { height: 56px; border-bottom: 4px solid #f6f3ea; } #root.lp_top .anchor { padding-top: 60px; margin-top: -60px; } } @media screen and (max-width:640px) { #root.lp_top #layout01_box_sp, #root.form_root #layout01_box_sp { padding: 0; } } /* LP用ヘッダーここまで */ /* ヘッダーここまで */ /* スタッフここから */ .h2_staff_box { width: 100%; text-align: center; background-color: #b7d100; } .top_staff_img { width: 100%; max-width: 940px; margin: 20px auto 0; } .top_staff_img ul { overflow: hidden; } .top_staff_img li { width: 16.6%; float: left; box-sizing: border-box; padding: 0 0.3%; margin: 0 0 20px; text-align: center; } @media screen and (max-width:1024px) { .top_staff_img { margin: 2% auto 0; } .top_staff_img li { margin: 3% 0; } } @media screen and (max-width:640px) { .top_staff_img li { width: 33%; padding: 0 1%; } } /* スタッフここまで */ /*スライダー*/ @media screen and (min-width:1025px) { #image-bloc { height: 420px; } .bx-wrapper .bx-pager { bottom: 0px !important; width: 120px !important; } .bx-viewport { overflow: visible !important; width: 2820px !important; } .main-container { overflow: hidden; padding-bottom: 0px; position: relative; height: 420px; } .slider { list-style: none; margin: 0; padding: 0; } .slider li { width: 980px !important; margin: 0; padding: 0; } .bx-pager_btn_wrapper { width: 100%; height: 155px; position: relative; } .bx-pager_btn { width: 980px; margin: 0px auto 0; height: 115px; position: absolute; top: 11%; right: 0; left: 0; bottom: 0; } .bx-pager_btn li { float: left; padding: 0 0; margin: 0; width: 20%; text-align: center; } .bx-pager_btn a.active { width: 182px; height: 111px; padding: 63px 0px 0; } /*@-moz-document url-prefix() {.bx-pager a.active{padding: 63px 0px 0;}}*/ .bx-pager a.active img { border: solid 5px #671b01; padding: 0; margin-top: -5px; border-radius: 10px; } .bx-pager img { padding: 0px; } .wrapper-inner { position: absolute; } /*.bx-default-pager{display:none;}*/ .bx-wrapper .bx-controls-direction a { width: 50px !important; height: 50px !important; } .bx-wrapper .bx-prev { left: -25px !important; } .bx-wrapper .bx-next { right: -25px !important; } } #image-bloc .bx-wrapper .bx-controls-direction { text-align: center; height: 0px; max-width: 1024px; margin: auto; width: 100%; position: absolute; bottom: 0; top: -50px; left: 0; right: 0; } #image-bloc .bx-wrapper .bx-controls-direction a, .bx-pager-item { display: inline-block; } #image-bloc .bx-wrapper .bx-pager-item a { display: block; height: 10px; width: 10px; text-indent: -9999px; background: #B8B8B8; margin: 0px 10px; border-radius: 5px; } #image-bloc .bx-wrapper .bx-pager-item a.active { background: #D42029; border-radius: 5px; } #image-bloc .bx-wrapper .bx-controls-direction a { text-decoration: none; color: #B8B8B8; padding: 0; text-indent: initial; margin-top: 0; pointer-events: auto; } #image-bloc .bx-wrapper .bx-controls { position: absolute; bottom: 5px; z-index: 90; width: 100%; max-width: 1024px; margin: 0 auto; top: 0; left: 0; right: 0; pointer-events: none; } #image-bloc .bx-wrapper { margin: 0 auto; } @media screen and (min-width:1025px) { #image-bloc .bx-wrapper .bx-pager-item a.active { background: #d60f0a; border-radius: 5px; } #image-bloc .bx-wrapper .bx-pager-item a { background: #fff; } #image-bloc .bx-wrapper .bx-pager-item a { margin: 0px 0px 0px 10px; border-radius: 5px; } } @media screen and (max-width:1024px) { .tb-bloc { width: 15%; float: left; margin: 0 0.5%; } #image-bloc { height: auto; width: 100%; float: right; } .main-container { overflow: hidden; padding-bottom: 0px; position: relative; height: auto; } #image-bloc .bx-wrapper .bx-pager { height: auto; z-index: 91; bottom: auto; padding: 8px 0; } #image-bloc .bx-wrapper .bx-controls-direction { z-index: 92; top: 1px; bottom: auto; } #image-bloc .bx-wrapper .bx-controls { position: relative; bottom: 0px; background: #f9f9f9; height: 30px; } #image-bloc .bx-wrapper .bx-prev { position: absolute; left: 12%; background: none; } #image-bloc .bx-wrapper .bx-next { position: absolute; right: 12%; background: none; } } @media screen and (min-width:1025px) { .bx-pager.bx-default-pager { left: 43.5%; pointer-events: all; } } @media screen and (max-width:1024px) { #layout02 { width: 98%; max-width: 940px; margin: 1% auto; box-sizing: border-box; } } @media screen and (max-width:640px) { #image-bloc .bx-wrapper { max-width: 99.9% !important; } .Android #image-bloc .bx-wrapper { max-width: 100% !important; } #layout02 { width: 100%; max-width: none; padding: 2% 2% 0 2%; } #image-bloc { height: auto; } } .medal_box { position: relative; pointer-events: none; } .medal { position: absolute; right: 0; top: 0; z-index: 999; } @media screen and (max-width:1024px) { /*.medal_box{display:none;}*/ .medal { right: 0; width: 17%; top: 0; } .sld_belt_tb { background: #f9f9f9; height: 30px; width: 100%; position: absolute; bottom: 0; } } @media screen and (max-width:640px) { /*.medal_box{display:block;}*/ .sld_blet_tb { display: none; } } @media screen and (max-width:375px) { .medal { right: 0; margin-top: 0.5%; width: 28%; top: 0; } } /*スライダーここまで*/ /*コンテンツフッター*/ #layout04 { background: #F8F4EB; overflow-x: hidden; } #footer_cnt01 { background: #EEDDB2; border-top: solid 2px #FFF; position: relative; } #footer_cnt01 div { width: 96%; max-width: 960px; margin: 0 auto; } #footer_cnt04 { color: #333; } #RFtNav1 a { color: #333; } #RFtNav1 li { border-left: 1px solid #707070; } .footer_info_inner { border: none; background: #b7d100; } .footer_info_text { color: #fff; } .footer_info_text a { color: #fff; } #footer_area_description { color: #333; } @media screen and (max-width:640px) { #layout04 { color: #000; /*background: #fff;*/ } #footer { background: none; } #footer_cnt01 { display: none; } #footer_cnt04 { /* color: #fff;*/ } #RFtNav1 li { border-color: #fff; } #RFtNav1 a { color: #fff; } } /*コンテンツフッター ここまで*/ .bg_03 { background: #eedfb6; } @media screen and (max-width:640px) { .bg_01_d640 { background: none; } .bg_02_d640 { background: none; } } /* 背景ここまで */ /* 新着情報ここから */ #news_box { border: 1px solid #8e5343; border-radius: 4px; margin-top: 1%; margin-bottom: 1%; } #news_box h4 { border: none; } #news_box li { border-top: 1px dashed #661b00; border-bottom: 0; } #news_box li .news_point { color: #416032; } @media screen and (max-width:640px) { #news_box { border: none; width: 100%; } #news_box h4 { border-bottom: none; color: #707070; width: 100%; box-sizing: border-box; padding: 0; } #news_box li .news_point.d640-320 { display: inline; } } /* 新着情報ここまで */ /* はじめに・情報導線 ここから*/ @media screen and (max-width:640px) { .cnt_info01_box .is_1per2 li { padding-top: 2% !important; width: 100%; } } .cnt_info02_box .cnt_box_inner { padding-top: 0 !important; margin-top: 0 !important; } .cnt_info02_box .cnt_box_inner li { padding-top: 0 !important; margin-top: 0 !important; } @media screen and (max-width:640px) { .cnt_box_inner li { padding: 3% 3% 0 3% !important; } .cnt_box_inner li:nth-child(3n-2) { clear: both; } .cnt_info02_box .cnt_box_inner li { width: 100%; padding: 0 3% 3% 3% !important; } } .cnt_info03_box .cnt_box_inner { padding-top: 0; } .cnt_info03_box .cnt_box_inner li { padding-top: 0; } @media screen and (max-width:640px) { .cnt_info03_box .cnt_box_inner li { width: 100%; } .cnt_info03_box h2 { padding: 20px 20px 1% 20px; } } .cnt_info03_box { margin: 0; padding-top: 0.5%; } .cnt_info04_box { margin: 0; } .cnt_info04_box .cnt_box_inner { padding-top: 0; } .cnt_info04_box .cnt_box_inner li { padding-top: 0; } @media screen and (max-width:640px) { .cnt_info04_box .cnt_box_inner li { width: 100%; } } /* はじめに・情報導線 ここまで*/ /* 電話タップ導線 ここから*/ .top_tel_banner .is_1per1 div { padding-bottom: 0; text-align: center; } .top_tel_banner img { width: 100%; } /* 電話タップ導線 ここまで*/ /* 事例・声 導線ここから */ .cnt_blog_box .cnt_box_inner { padding: 2% 0 0 0; } .cnt_blog_box .cnt_box_inner li { padding: 1px 10px; } .works_ob_btn { position: absolute; top: 0; left: 0; max-width: 100%; width: auto; width: 23%; } @media screen and (max-width:1024px) { .works_ob_btn { max-width: 25%; } } @media screen and (max-width:640px) { .cnt_blog_box .cnt_box_inner li { padding: 0.1% 2%; } } .cnt_works_box01 .cnt_box_inner { padding: 10px 0 0 0; } .cnt_works_box02 .cnt_box_inner { padding: 0; } @media screen and (max-width:640px) { .cnt_works_box02 .cnt_box_inner li { padding: 2% 2% 0.2% 2%; } } .h2_works_box { margin: 2% 0 1% 0; } .h2_voice_box { margin: 4% 0 1% 0; } @media screen and (max-width:640px) { .h2_works_box, .h2_voice_box { margin-top: 4%; } .cnt_works_box button[class^="btn_"] { height: 4em; } } /*カテゴリ別事例・エリア別事例 見出し*/ .h2_works_segment_box h2 { border: none !important; } @media screen and (max-width:640px) { .h2_works_segment_box { padding: 0; margin-bottom: 10px; } /*カテゴリ別事例・エリア別事例 見出し*/ } .top_list_dousen { width: 100%; margin: 0 auto; } /*一覧導線*/ @media screen and (max-width:640px) { .top_list_dousen { width: 100%; } /*一覧導線*/ } .cnt_works_category_box .cnt_box_inner { padding-bottom: 0; } .cnt_works_category_box .cnt_box_inner:last-child { padding-bottom: 10px; } .cnt_works_box .dousen_top_inner { padding: 2px; box-sizing: border-box; margin-bottom: 2%; } .cnt_works_box .dousen_top_inner>div { border: solid 1px #7d5705; padding: 2% 2% 0 2%; } @media screen and (max-width:640px) { .cnt_works_box { width: 96%; margin: 0 auto; margin-bottom: 5%; } .cnt_works_box .dousen_top_inner>div { padding: 2% 2% 3% 2%; } .cnt_works_box .cnt_box_inner li { padding: 3% 1% 0 1% !important; } } /* 事例・声 導線ここまで */ .cnt_about_btn { top: 350px; width: 960px; } .cnt_about_btn li { width: 25%; padding: 0 10px; } p.cnt_about_name { font-weight: bold; text-align: right; } #cnt_about_box p strong { color: red; font-weight: normal; } #cnt_about_box .cnt_box_inner { font-size: 14px; line-height: 1.8em; padding: 20px 10px 10px 10px; box-sizing: border-box; } #cnt_about_box .cnt_box_inner strong { color: red; font-weight: normal; } #cnt_about_box .about_video { width: 50%; float: left; margin: 0 2% 2% 0; } /*詳しくはこちらボタン*/ #cnt_about_box .about_btn01_1 { text-align: right; margin-top: 1%; } #cnt_about_box .about_btn01:hover, #cnt_about_box .about_btn01:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f3f0e7), color-stop(1, #f3f0e7)); background: -moz-linear-gradient(top, #f3f0e7 5%, #f3f0e7 100%); background: -webkit-linear-gradient(top, #f3f0e7 5%, #f3f0e7 100%); background: -o-linear-gradient(top, #f3f0e7 5%, #f3f0e7 100%); background: -ms-linear-gradient(top, #f3f0e7 5%, #f3f0e7 100%); background: linear-gradient(to bottom, #f3f0e7 5%, #f3f0e7 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f0e7', endColorstr='#f3f0e7', GradientType=0); background-color: #f3f0e7; } #cnt_about_box .about_btn01_1>span { padding: 5px 10px; font-size: 12px; } #cnt_about_box .about_btn01, #cnt_about_box .about_btn01 { padding: 6px 15px; -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; box-shadow: inset 0px 1px 0px 0px #ffffff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f3f0e7), color-stop(1, #f3f0e7)); background: -moz-linear-gradient(top, #f3f0e7 5%, #f3f0e7 100%); background: -webkit-linear-gradient(top, #f3f0e7 5%, #f3f0e7 100%); background: -o-linear-gradient(top, #f3f0e7 5%, #f3f0e7 100%); background: -ms-linear-gradient(top, #f3f0e7 5%, #f3f0e7 100%); background: linear-gradient(to bottom, #f3f0e7 5%, #f3f0e7 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f0e7', endColorstr='#f3f0e7', GradientType=0); background-color: #f3f0e7; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #dcdcdc; display: inline-block; cursor: pointer; color: #777777; font-size: 13px; font-weight: bold; text-decoration: none; text-shadow: 0px 1px 0px #ffffff; } @media screen and (max-width:1024px) { .cnt_about_btn { top: 0px; margin-top: 30%; width: 100%; } .cnt_about_btn li { width: 25%; margin: 0; text-align: center; } #cnt_about_box .cnt_box_inner { padding: 4% 2% 2% 2%; } } @media screen and (max-width:640px) { .cnt_about_box_bg { background: none; } #cnt_about_box .cnt_about_box_bg_02 { background: #fff; } .cnt_about_btn { margin-top: 0; } .cnt_about_btn li { width: 50%; margin: 0%; padding: 1%; } .cnt_video_box .is_1per2 li { width: 100% !important; } #cnt_about_box .cnt_box_inner { font-size: 14px; } } /* 会社案内ここまで */ /* ニーズここから */ .cnt_needs_box01 h2 { width: 96%; margin: 0% auto; text-align: center; } .cnt_needs_box01 ul { overflow: hidden; } .cnt_needs_box01 li { box-sizing: border-box; width: 50%; width: -webkit-calc(100% / 2); width: calc(100% / 2); padding: 5px; float: left; text-align: center; } .cnt_needs_box02 ul { overflow: hidden; } .cnt_needs_box02 li { box-sizing: border-box; width: 50%; padding: 5px; float: left; text-align: center; } @media screen and (max-width:1024px) { .cnt_needs_box01 { margin-bottom: 2%; } .cnt_needs_box01 li { padding: 0 1% 2% 1%; } } @media screen and (max-width:640px) { .cnt_needs_box01 h2 { width: 100%; } .cnt_needs_box01 li { padding: 4% 2% 2% 2%; } } /* ニーズここまで */ /* 事例・声追加ここから */ .works_box .works_block2 .works_box_cost_period { overflow: hidden; margin: 0; } .works_box .works_block2 .works_box_cost, .works_box .works_block2 .works_box_period { margin: 5px 0px; width: 50%; float: left; } .works_box .works_block2 .works_box_cost img, .works_box .works_block2 .works_box_period img { margin: 0px 5px 0px 0px; max-width: 46%; width: auto; } @media screen and (max-width:640px) { #main_top_cnt02 .works_block_top.grid_end, #main_top_cnt03 .works_block_top2.grid_end { display: none; } .works_box .works_block2 .works_box_cost, .works_box .works_block2 .works_box_period { width: 100%; } .works_box .works_block2 .works_box_cost img, .works_box .works_block2 .works_box_period img { max-width: 24%; } } /* 事例声追加下層 */ #main_cnt02 .works_block2 .works_box_cost_period { overflow: hidden; margin: 0; } #main_cnt02 .works_block2 .works_box_cost, #main_cnt02 .works_block2 .works_box_period { margin: 5px 0px; width: 50%; float: left; text-align: left; } #main_cnt02 .works_block2 .works_box_cost img, #main_cnt02 .works_block2 .works_box_period img { margin: 0px 5px 0px 0px; max-width: 46%; width: auto; } .works_box_cost>span, .works_box_period>span { background: #ff591b; color: #fff; padding: 2% 10%; font-size: 110%; font-weight: bold; margin-right: 3%; } @media screen and (max-width:640px) { #main_cnt02 .works_block_top.grid_end, #main_cnt02 .works_block_top2.grid_end { display: none; } #main_cnt02 .works_block2 .works_box_cost, #main_cnt02 .works_block2 .works_box_period { width: 100%; } #main_cnt02 .works_block2 .works_box_cost img, #main_cnt02 .works_block2 .works_box_period img { max-width: 24%; } .works_box_cost>span, .works_box_period>span { padding: 0.5% 10%; } } /* 事例・声追加ここまで */ .sp_only { display: none; } /* 未確定 */ #main_cnt02 .ichiran_box, .ichiran_box { float: right; width: 320px; margin: 2% auto; } #main_cnt02 .ichiran_box li, .ichiran_box li { margin: 0; padding: 1%; text-align: initial; box-sizing: border-box; } #works_index_banner .ichiran_button { box-sizing: border-box; } #works_index_banner .ichiran_button_02 { box-sizing: border-box; } .ichiran_button { background-color: #fff; text-indent: 0; border: 1px dashed #42602e; display: inline-block; min-height: 25px; line-height: 25px; width: 96%; text-decoration: none; text-align: center; padding: 5px; text-decoration: none; } .ichiran_button_02 { background-color: #42602e; text-indent: 0; display: inline-block; height: 25px; line-height: 25px; width: 96%; text-decoration: none; text-align: center; padding: 5px; text-decoration: none; } .ichiran_box div { position: relative; } .ichiran_box div:last-child:after { color: #fff; } .ichiran_button:hover { color: #666; opacity: 0.6; text-decoration: none; } .ichiran_button_02:hover { color: #fff; opacity: 0.6; text-decoration: none; } .ichiran_button:active { position: relative; top: 1px; } .ichiran_button_02:active { position: relative; top: 1px; } .ichiran_button:visited, .ichiran_button:link { color: #42602e; font-weight: bold; } .ichiran_button_02:visited, .ichiran_button_02:link { color: #fff; font-weight: bold; } .flee_area table { width: 100%; height: auto; } .flee_area img { width: 100%; height: auto; max-width: 100%; } #main_cnt02 .index_box { width: 100%; margin-bottom: 5px; } #main_cnt02 .index_box li { width: 33.3%; width: -webkit-calc(100% / 3); width: calc(100% / 3); float: left; box-sizing: border-box; padding: 5px; } .index_box .ichiran_button { width: 100%; height: auto; padding: 0; } .index_box .ichiran_button_02 { width: 100%; height: auto; padding: 0; } #main_cnt02 .ichiran_box:last-child a, .ichiran_box div:last-child a { /*background: #ff591b;*/ color: #fff; } @media screen and (max-width:640px) { #main_cnt02 .ichiran_box, .ichiran_box { width: 100%; } #main_cnt02 .index_box li { /*width:98%;*/ } #main_cnt02 .index_box li:nth-child(3n-2) { clear: both; } .ichiran_button { font-size: 12px; width: 96%; } .ichiran_button_02 { font-size: 12px; width: 96%; } } @media screen and (max-width:360px) { .ichiran_button { font-size: 11px; } .ichiran_button_02 { font-size: 11px; } } /* フォーム追加変更 */ .form_root #layout01_bg { height: 150px; position: absolute; } .form_root #layout01_box { height: 150px; } .form_root #hd_font { display: none; } .form_root #hd_title { margin-top: 0; } .form_root #hd_tel { margin-top: 0; margin-right: -6px; z-index: 2; position: relative; } .form_catch { width: 100%; max-width: 970px; } .form_catch li { float: left; box-sizing: border-box; width: 50%; } .formPrivacy { border: 1px solid #CCCCCC; background: #fff none repeat scroll 0%; height: 150px; overflow: scroll; width: 86%; max-width: 980px; padding: 10px 2%; margin: 0 auto 30px; font-size: 95%; } @media screen and (max-width:1024px) { .form_root #hd_title { margin-top: 0px; } .form_root #layout01_bg, .form_root #layout01_box { height: 56px; } } @media screen and (max-width:640px) { .form_catch li { float: left; box-sizing: border-box; width: 100%; } } /* 下層施工事例ここから */ #main #jirei_entry .h2_02 { font-size: 1.077em; margin-bottom: 0; color: #000; font-weight: bold; background: #d2d2d2; background: -webkit-linear-gradient(top, #d2d2d2 0%, #d2d2d2 50%, #dcdcdc 50%, #dcdcdc 100%); background: linear-gradient(to bottom, #d2d2d2 0%, #d2d2d2 50%, #dcdcdc 50%, #dcdcdc 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d2d2d2', endColorstr='#dcdcdc', GradientType=0); } #main #jirei_entry .h2_02:before { content: none; } .works_catch { font-size: 1.538em; font-size: bold; text-align: center; padding-bottom: 1em; } .works_info { text-align: center; } .works_gaiyo { background: #f0f0f0; padding: 1%; } .works_gaiyo_l { vertical-align: top; min-width: 300px; } .works_gaiyo_r { vertical-align: top; width: 28%; padding: 2% 0 2% 2%; } /*#main #jirei_entry .h3_01{border-left:7px solid #b7d100; border-bottom: 2px solid #b7d100; font-size:1.077em; padding:5px 5px 5px 10px; margin:0 0 10px;}*/ .works_gaiyo .h3_01+p { font-weight: bold; } #main #jirei_entry .h3_02 { color: #098daf; font-size: 1.385em; padding: 10px 0; margin: 0; } .works_voice { background: #f3e9d2; padding: 1%; } #main #jirei_entry .h2_works_voice { padding: 0; margin: 0 0 1%; font-size: 100%; font-weight: normal; background: none; text-align: center; } #main #jirei_entry .h2_works_voice:before { content: none; } #jirei_entry .h2_works_voice img { width: auto; max-width: 100%; } @media screen and (max-width:640px) { .works_gaiyo { position: relative; display: block; } .works_gaiyo tr { display: inline; } .works_gaiyo_l:before { content: " "; width: 30%; float: right; padding-top: 22.5%; margin: 1%; } .works_gaiyo_r { width: 30%; position: absolute; top: 3%; right: 3%; } #main .works_gaiyo .h3_01 { width: 60%; display: inline-block; } } /* 下層施工事例ここまで */ /* 追加メニュー */ .mean-container .mean-bar { background: transparent; float: right; width: 100%; pointer-events: none; padding-top: 34%; padding-top: 60px; position: fixed; z-index: 9500; } .mean-container a.meanmenu-reveal { text-indent: initial; width: 56px; height: 56px; padding: 0; pointer-events: all; } .mean-container .mean-nav ul li { pointer-events: all; } .nav_fix { overflow: hidden; height: 100%; } .mean-container .mean-nav>ul { overflow: scroll; height: 455px; height: 80vh; display: none; } .mean-container .mean-nav { background: rgba(255, 255, 255, 0.9); margin-top: 0; pointer-events: all; } .mean-container .mean-nav ul li a { color: #303030; } .mean-container .mean-nav ul li a.mean-expand, .mean-container .mean-nav ul li a.mean-expand:hover { background: rgba(182, 182, 182, 0.7); } .mean-container .mean-nav ul li a.mean-expand { background: rgba(182, 182, 182, 0.5); } /*IE*/ .mean-container a.meanmenu-reveal>img { display: block\0; } .mean-container a.meanmenu-reveal>img { display: block\9; } /* 子メニュー - .sub-menu */ #navi .sub-menu { position: absolute; width: 195px; background: #fff; top: 60px; display: none; font-size: 81.3%; border: solid 1px #b8d201; } #navi .sub-menu a { color: #b8d201; padding: 20px 15px; display: block; } #navi .sub-menu a:hover { color: #fff; background: #a8bc1b; } /* ホバーで子メニュー表示 */ #navi .menu-item-has-children:hover ul { display: block; } /*メニュー iOS調整*/ .mean-container .mean-nav ul li.mean-last { padding-bottom: 65px; } /* フッター追加 */ .cnt_ft_box { background-color: #b7d100; color: #fff; padding: 0.5% 0; margin-bottom: 15px; } .cnt_ft_box_inner { max-width: 940px; } .cnt_ft_box, .cnt_ft_box a:link, .cnt_ft_box a:visited { color: #fff; } .ft_menu_box_inner { max-width: 940px; } .ft_menu_box_inner>ul li:nth-of-type(2n+1) { width: 20%; float: left; font-weight: bold; } .ft_menu_box_inner>ul li:nth-of-type(2n+0) { width: 80%; float: left; } #layout04 .cnt_ft_menu_box ul .ft_menu1 { width: 100%; } #layout04 .cnt_ft_menu_box ul .ft_menu1:first-child { border-top: solid 1px; padding-top: 1%; } #layout04 .cnt_ft_menu_box .ft_menu_box_inner>ul { margin-top: 6%; } @media screen and (max-width:1024px) { .ft_menu_box_inner { padding: 0 2%; box-sizing: border-box; } } @media screen and (max-width:640px) { #layout04 .cnt_ft_menu_box .ft_menu_box_inner>ul { padding: 0 2%; } } .cnt_ft_menu_box { font-size: 13px; } .ft_menu2_inner { width: 100%; float: left; } .ft_menu2_inner .ft_menu2_inner { width: 73%; float: right; margin-left: 2%; padding: 0.5% 0; } .ft_menu2_title { width: 23%; float: left; background: #e3e3e3; padding: 0.5% 1%; } #layout04 .cnt_ft_menu_box ul.ft_menu2_inner li { width: 100%; margin: 0.5% 0; } #layout04 .cnt_ft_menu_box ul.ft_menu2_inner .ft_menu2_inner li { width: auto; margin: 0 1%; padding: 0; } #layout04 .cnt_ft_menu_box ul.ft_menu2_inner2 li { width: auto; margin: 0 1%; padding: 0; font-weight: normal; } .ft_menu_box_inner hr { float: left; border-bottom: 1px dashed #D3CAC3; margin: 10px 0; width: 100%; } .ft_menu_box_inner hr:first-child { border: none; } .cnt_ft_menu_box, .cnt_ft_menu_box a:link, .cnt_ft_menu_box a:visited { color: #000; } /*声インデックス追加*/ .voice_index #main_cnt02 .works_block { width: 33.3%; margin: 3% 0 0 0; } .voice_index #main_cnt02 .works_block:nth-child(3n-2) { clear: both; } .kensu_ichiran_midashi { float: right; } #main .voice_ichiran_midashi { position: relative; margin: 1em 0; padding: 0.55em 1.5em 0.55em 1.5em; background: #fff; font-size: 2.308em; font-weight: bold; color: #666; border: solid 1px #666; } #main .voice_ichiran_midashi:before { content: ""; position: absolute; background: #b8d201; top: 15%; left: 0.75em; height: 70%; width: 5px; } .index_box li { position: relative; } .index_box li:before { content: " "; margin: 0px; position: absolute; top: 18px; width: 18px; background-size: contain; left: 18px; } @media screen and (max-width:640px) { #main .voice_ichiran_midashi { font-size: 6vw; } } /* 事例インデックス */ #main_cnt02 .index_box.works_list li { width: 50%; } #main_cnt02 .index_box.works_list li:nth-child(n + 5) { width: 33.3%; } @media screen and (max-width:640px) { #main_cnt02 .index_box.works_list li { width: 98%; } #main_cnt02 .index_box.works_list li:nth-child(n + 5) { width: 98%; } } #main_cnt02 .works_index_title { width: 23%; float: left; background: #e3e3e3; padding: 0.5% 1%; } #main_cnt02 .works_index_inner { width: 100%; float: left; } #main_cnt02 .works_index_inner .works_index_inner { width: 73%; float: right; margin-left: 2%; padding: 0.5% 0; } #main_cnt02 .works_index_inner .works_index_inner li { width: auto; margin: 0 1%; padding: 0; } #main_cnt02 ul.works_index_inner li { margin: 0.5% 0; } .works_index_inner, .works_index_inner a:link, .works_index_inner a:visited { color: #666; } #main .works_ichiran_midashi { position: relative; margin: 1em 0; padding: 0.55em 1.5em 0.55em 1.5em; background: #fff; font-size: 2.308em; font-weight: bold; color: #666; border: solid 1px #666; text-align: left; } #main .works_ichiran_midashi:before { content: ""; position: absolute; background: #b8d201; top: 15%; left: 0.75em; height: 70%; width: 5px; } @media screen and (max-width:640px) { #main .works_ichiran_midashi { font-size: 6vw; } #main_cnt02 .works_index_title { width: 100%; } #main_cnt02 .works_index_inner .works_index_inner { width: 100%; } } /* 下層声 */ .entry_voice_box_pic { float: left; margin: 0 2% 0 0; max-width: 50%; } #main .entry_voice_box h2, #main .entry_voice_box h3, #main .entry_voice_box h4 { overflow: hidden; clear: none; } @media screen and (max-width:640px) { .entry_voice_box { width: 96%; margin: 2%; } } /*汎用ボタン ここから*/ button.btn_01 { padding: 5px 2%; background: #fff; border: dashed 1px #42602e; color: #42602e; } button.btn_02 { padding: 8px 2%; background: #42602e; color: #fff; border: none; } button[class^="btn_"] { width: 100%; font-weight: bold; font-size: 16px; background-position: 94% 50%; background-repeat: no-repeat; cursor: auto; } button[class^="btn_"]:hover { opacity: 0.6; cursor: pointer; } button[class^="btn_"]:focus { outline: none; } /*ボタン 事例ページ用調整*/ #layout03 button[class^="btn_"] { font-size: 12px; background-position: 96% 50%; padding: 5px 2% 5px 1%; } @media screen and (max-width: 980px) { button[class^="btn_"] { font-size: 14px; } } @media screen and (max-width: 860px) { button[class^="btn_"] { font-size: 12px; } } @media screen and (max-width: 760px) { button[class^="btn_"] { background-image: none; text-align: center; text-indent: 0em; } } @media screen and (max-width: 480px) { button.btn_02 { font-size: 3.3vw; } } @media screen and (max-width: 400px) { button[class^="btn_"] { padding: 5px 1%; font-size: 11px; } #layout03 button[class^="btn_"] { padding: 5px 1%; font-size: 11px; } } @media screen and (max-width: 370px) { .is_1per3 button[class^="btn_"] { letter-spacing: -0.14em; padding: 5px; } #layout03 button[class^="btn_"] { padding: 5px 0.6%; } .cnt_works_category_box .is_1per3 li, #main_cnt02 .is_1per3 li { padding: 2% 0.7%; } .cnt_works_category_box .is_1per3 li:nth-child(3n-2), #main_cnt02 .is_1per3 li:nth-child(3n-2) { padding-left: 2%; } .cnt_works_category_box .is_1per3 li:nth-child(3n), #main_cnt02 .is_1per3 li:nth-child(3n) { padding-right: 2%; } .pg .is_1per3 button[class^="btn_"] { letter-spacing: 0em; } /*下層ページは元に戻す*/ } /*汎用ボタン ここまで*/ /*フッター追加 ここから*/ #footer_cnt01 h2 { text-align: center; } /*フッター追加 ここから*/ /*------------------------------------------------------------ font-size調整 ここから PC font-size:16px line-height:1.8em SP font-size:14px line-height:1.8em ------------------------------------------------------------*/ #jirei_entry p, .entry_voice_box p, #jirei_entry td, .entry_voice_box td, #jirei_entry th, .entry_voice_box th { font-size: 108%; line-height: 1.8em; } #jirei_entry td p, .entry_voice_box td p, #jirei_entry th p, .entry_voice_box th p { font-size: inherit !important; } @media screen and (max-width: 640px) { #jirei_entry p, .entry_voice_box p, #jirei_entry td, .entry_voice_box td, #jirei_entry th, .entry_voice_box th { font-size: 108%; } #jirei_entry td p, .entry_voice_box td p, #jirei_entry th p, .entry_voice_box th p { font-size: inherit !important; } } #cnt_about_box p { font-size: 108%; line-height: 1.8em; } .works_block2 p { font-size: 108%; line-height: 1.8em; } @media screen and (max-width: 640px) { #cnt_about_box p { font-size: 108%; } .works_block2 p { font-size: 108%; } } #news_box { font-size: 108%; line-height: 1.8em; } @media screen and (max-width: 640px) { #news_box { font-size: 108%; } } .pg p, .pg li, .pg td, .pg th { font-size: 108%; line-height: 1.8em; } .pg li p, .pg td p, .pg th p { font-size: inherit !important; } @media screen and (max-width: 640px) { .pg p, .pg li, .pg td, .pg th { font-size: 108%; line-height: 1.8em; } .pg li p, .pg td p, .pg th p { font-size: inherit !important; } } /*============================================================ ここから 既存サイト記事部分 ============================================================*/ #jirei_entry.desktop_layout table, .entry_voice_box.desktop_layout table { max-width: 100% !important; width: 100% !important; } #jirei_entry.desktop_layout table td, .entry_voice_box.desktop_layout table td {} .old_layout .entry_voice_box_pic { display: none; } /*共通*/ .desktop_layout img[src*="new09"] { display: none !important; } #jirei_entry.desktop_layout img[src*="regular_smile"] { width: auto !important; } #jirei_entry.desktop_layout table.pagination, .entry_voice_box.desktop_layout table.pagination { width: auto !important; } /*関連記事*/ .h3_footerlink+table td { font-size: 96%; } .relation_entries_box .works_block_top2 { width: 33.3% !important; margin: 0 !important; padding: 0.5%; box-sizing: border-box; } .relation_entries_box .works_block_top2 ul li { padding: 0; } @media screen and (max-width:768px) { .relation_entries_box .works_block_top2 ul li { width: 100%; } } @media screen and (max-width:640px) { .relation_entries_box .works_block_top2 { width: 50% !important; margin: 0 !important; } } /*施工事例*/ #jirei_entry img[src*="regular_smile"] { width: auto !important; } #main #jirei_entry.desktop_layout table img[src*="regular_smile"] { width: auto !important; } #jirei_entry img[src*="lightbulb"] { width: auto !important; } #main #jirei_entry.desktop_layout table img[src*="lightbulb"] { width: auto !important; } #jirei_entry img[src*="thumbs_up"] { width: auto !important; } #main #jirei_entry.desktop_layout table img[src*="thumbs_up"] { width: auto !important; } #jirei_entry img[src*="confused_smile"] { width: auto !important; } #main #jirei_entry.desktop_layout table img[src*="confused_smile"] { width: auto !important; } #jirei_entry img[src*="cry_smile"] { width: auto !important; } #main #jirei_entry.desktop_layout table img[src*="cry_smile"] { width: auto !important; } #jirei_entry img[src*="wink_smile"] { width: auto !important; } #main #jirei_entry.desktop_layout table img[src*="wink_smile"] { width: auto !important; } #jirei_entry img[src*="whatchutalkingabout_smile"] { width: auto !important; } #main #jirei_entry.desktop_layout table img[src*="whatchutalkingabout_smile"] { width: auto !important; } #jirei_entry img[src*="icon-003"] { width: auto !important; } #main #jirei_entry.desktop_layout table img[src*="icon-003"] { width: auto !important; } #jirei_entry.desktop_layout img { height: auto !important; } @media screen and (max-width:640px) { #jirei_entry.desktop_layout table:first-of-type td { float: left; display: block; width: 100%; } #jirei_entry.desktop_layout td[width="260"] { width: 30% !important; vertical-align: top; } } /*お客様の声 調整*/ .entry_voice_box.desktop_layout img { height: auto !important; } @media screen and (max-width:1024px) { .entry_voice_box table.interview { margin: 0; } .entry_voice_box table.interview td { width: 100% !important; padding: 0 2% 0 0 !important; } } @media screen and (max-width:640px) { .entry_voice_box .player { width: 100%; margin: 0 0 4% 0; box-sizing: border-box; } .entry_voice_box table:first-of-type { width: 100%; } .entry_voice_box table:first-of-type td:first-child { float: left; display: block; width: 33%; padding: 0; box-sizing: border-box; } .entry_voice_box table:first-of-type td:nth-child(2) { float: left; display: block; width: 67%; padding: 0 0 0 2%; box-sizing: border-box; } .entry_voice_box table:first-of-type td:nth-child(2) p { text-indent: -2em; padding-left: 2em; } } /**/ /*~ お客様の声 (アンケート) ~*/ span.voice_question, span.voice_answer { font-family: Verdana, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Osaka, 'Meiryo', 'メイリオ', 'MS Pゴシック', sans-serif; font-weight: bold; font-size: 150%; } span.voice_question { color: #669900; } span.voice_answer { color: #ff6600; } /* お客様の声 インタビュー */ /*~ ================================================== ~*/ /*~ テーブル ~*/ table.interview { width: 596px; /* セルのwidthとpaddingの計 */ margin-left: 40px; table-layout: fixed; border-collapse: collapse; text-align: justify; text-justify: auto; } /*~ テーブル セル ~*/ table.interview th, table.interview td { /* border: 1px solid silver;*/ padding: 6px; vertical-align: top; } /*~ テーブル 行見出し (出席者) ~*/ table.interview th { width: 52px; /* 13px × 4 */ text-align: left; } /*~ テーブル セル (発言) ~*/ table.interview td { width: 520px; /* 13px × 40 */ } /*~ 文字色 聞き手 ~*/ th.host, td.host { color: #000000; } /*~ 文字色 出席者1 ~*/ th.guest1, td.guest1 { color: #008080; } /*~ 文字色 出席者2 ~*/ th.guest2, td.guest2 { color: #990000; } /*~ 文字色 出席者3 ~*/ th.guest3, td.guest3 { color: #ff4500; } /*~ もくじ 現在のページ ~*/ ol.navigation a.current, ol.navigation a.current:hover { color: #000000; font-weight: bold; text-decoration: none; } /*~ table版ページネーション テーブル ~*/ table.pagination { margin-top: 1em; margin-bottom: 1em; } /*~ table版ページネーション セル ~*/ table.pagination td { font-weight: bold; } /*~ table版ページネーション アンカー ~*/ /*~ IEで編集しやすいよう IEstyle.cssで設定 ~*/ /*~ table版ページネーション 現在のページ ~*/ table.pagination a.current, table.pagination a.current:hover { color: #000000; text-decoration: none; background-color: #ffffcc; } /*~ 埋め込みプレイヤー ~*/ .player { width: 570px; /* テーブルの幅 - paddingの計 */ margin: 1em 0 1em 40px; padding: 0 13px; border: 1px solid #c0c0c0; background-color: #fffaf0; } .desktop_layout #main h4.h4_01 { padding: 0 7px 0 23px; font-size: 100%; font-weight: bold; background: left center no-repeat; color: #666666; margin: 1.4em 0 0.6em 0; border: none; } /*youtubeサイズ変更ここから*/ .embed-container { position: relative; padding-bottom: 70%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*youtubeサイズ変更ここまで*/ /*完成見学会 ここから*/ #main_cnt02 .all_listbox .works_block img[src*="regular_smile"] { width: auto; } #main_cnt02 .all_listbox .works_block img[src*="lightbulb"] { width: auto; } #main_cnt02 .all_listbox .works_block img[src*="thumbs_up"] { width: auto; } #main_cnt02 .all_listbox .works_block img[src*="confused_smile"] { width: auto; } #main_cnt02 .all_listbox .works_block img[src*="cry_smile"] { width: auto; } #main_cnt02 .all_listbox .works_block img[src*="wink_smile"] { width: auto; } #main_cnt02 .all_listbox .works_block img[src*="whatchutalkingabout_smile"] { width: auto; } .web_kengaku_wrapper.desktop_layout span.after, .web_kengaku_wrapper.desktop_layout span.ato { color: #f8f8ff; background-color: #669900; } .web_kengaku_wrapper.desktop_layout span.before, .web_kengaku_wrapper.desktop_layout span.mae { color: #993300; background-color: #dcdcdc; } .web_kengaku_wrapper.desktop_layout caption, th { text-align: left; } .web_kengaku_wrapper.desktop_layout table { margin: 0 auto 3% auto; width: 100% !important; } /*.web_kengaku_wrapper.desktop_layout h3.h3_footerlink {margin: 1.4em 0 0.6em 0;padding: 0 7px;border-left: green 5px solid;color: #000000;font-size: 107.7%;font-weight: bold;background-color: #f0fff0;}*/ .web_kengaku_wrapper.desktop_layout td { padding-bottom: 1%; } .web_kengaku_wrapper.desktop_layout td:nth-child(3n-2) { width: auto !important; } .web_kengaku_wrapper.desktop_layout td:nth-child(3n) { width: auto !important; } .web_kengaku_wrapper.desktop_layout table.related_cnt td { width: 33.3% !important; display: block; float: left; padding: 1%; box-sizing: border-box; } .web_kengaku_wrapper.desktop_layout table.related_cnt td:nth-child(3n-2) { padding-left: 0%; } .web_kengaku_wrapper.desktop_layout table.related_cnt td:nth-child(3n) { padding-right: 0%; } .web_kengaku_wrapper #main_cnt02 .works_block { width: 100%; margin: 0 0 4% 0; } .web_kengaku_wrapper #main_cnt02 li:first-child { width: 35%; } .web_kengaku_wrapper #main_cnt02 li:nth-child(2) { width: 65%; padding: 0 0 2% 2%; box-sizing: border-box; } @media screen and (max-width:640px) { .web_kengaku_wrapper #main_cnt02 li:first-child { width: 100%; } .web_kengaku_wrapper #main_cnt02 li:nth-child(2) { width: 100%; } .web_kengaku_wrapper.desktop_layout table.related_cnt td { width: 50% !important; } .web_kengaku_wrapper.desktop_layout table.related_cnt td:nth-child(3n-2) { padding-left: 1%; } .web_kengaku_wrapper.desktop_layout table.related_cnt td:nth-child(3n) { padding-right: 1%; } .web_kengaku_wrapper.desktop_layout table.related_cnt td:nth-child(2n-1) { padding-left: 0%; } .web_kengaku_wrapper.desktop_layout table.related_cnt td:nth-child(2n) { padding-right: 0%; } } .web_kengaku_wrapper dl { background: #f2e5c3; } .web_kengaku_wrapper dt { width: 15%; float: left; background: #f2e5c3; font-weight: bold; padding: 0.5em; border: solid 2px #efefef; border-bottom: none; border-right: none; clear: both; box-sizing: border-box; } .web_kengaku_wrapper dd { width: 85%; float: left; box-sizing: border-box; border: solid 2px #efefef; border-bottom: none; padding: 2%; text-align: left; background: #fff; } .web_kengaku_wrapper dd:last-of-type { border-bottom: solid 2px #efefef; } .web_kengaku_wrapper ul.kengakukai_point_list { list-style-type: disc !important; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 40px; padding: 2% 2% 2% 8% !important; } .web_kengaku_wrapper ul.kengakukai_point_list li { display: list-item; text-align: left !important; width: 100% !important; float: none !important; } .web_kengaku_wrapper .kengakukai_catch { font-weight: bold; text-align: left; padding: 2% 0; } @media screen and (max-width:640px) { .web_kengaku_wrapper dt { width: 24%; } .web_kengaku_wrapper dd { width: 76%; } } .web_kengaku_wrapper .works_dousen { width: 50% !important; padding-top: 2% !important; margin: 0 0 0 auto !important; float: none !important; } .web_kengaku_wrapper .kengakukai_comment { text-align: left; } .web_kengaku_wrapper .kengakukai_date { text-align: right; } @media screen and (max-width:768px) { .web_kengaku_wrapper .works_dousen { display: block; width: 100% !important; } } /*現場実況ライブ ここから*/ /*インデックスページ*/ p.live_date { min-height: 1em !important; } /*カテゴリ一覧ページ*/ .live_wrapper.live_group #main_cnt02 .works_block { width: 33.3%; margin: 0px 0% 4% 0px; padding: 0; box-sizing: border-box; } .live_wrapper.live_group #main_cnt02 .works_block:first-child { background: none; } .live_wrapper.live_group #main_cnt02 .works_block:last-child { /*background:none;*/ } /*.live_wrapper.live_group #main_cnt02 .works_block:nth-child(3n){background:none;}*/ .live_wrapper.live_group #main_cnt02 .works_block:nth-child(3n-2) { clear: both; } .live_wrapper .flow_pic { padding: 0 0 0 20px !important; background-repeat: no-repeat; background-position: 1.5% 50%; box-sizing: border-box; } .live_wrapper .works_block:first-child .flow_pic { background: none; } .live_wrapper .flow_detail p { padding: 0 0 0 20px; } @media screen and (max-width:640px) { .live_wrapper.live_group #main_cnt02 .works_block { width: 50%; } .live_wrapper.live_group #main_cnt02 .works_block:nth-child(3n-2) { clear: none; } .live_wrapper.live_group #main_cnt02 .works_block:nth-child(2n-1) { clear: both; } } .live_wrapper.live_group .flow_title { float: none !important; } .live_wrapper.live_group .flow_title_complete h4 { color: rgb(255, 102, 0) !important; } .live_wrapper.live_group #main h4 { border: none; padding: 5px 0 0 20px; margin: 0; font-size: 13px; } .live_wrapper .works_dousen { text-align: right !important; } .live_wrapper .pic_quantity { text-align: right !important; } /*記事*/ .live_wrapper #main #jirei_entry img[src*="material/line"] { width: auto !important; display: inline !important; } .live_wrapper table { max-width: 100% !important; } .live_wrapper .works_block2 p { font-size: 100% !important; } .live_wrapper li.to_kengakukai_dousen { padding-left: 20px !important; box-sizing: border-box; } .live_wrapper .old_layout .page_menu, .live_wrapper .desktop_layout .page_menu { display: none; } @media screen and (max-width:980px) { .live_wrapper table { width: 100% !important; } .live_wrapper table[summary^="工程メニュー"] td { width: 33.3% !important; } } /*新しい記事*/ .live_entry_ws.works_block { width: 33.3%; margin: 0px 0% 4% 0px; padding: 0; box-sizing: border-box; } .live_entry_ws.works_block:first-child { background: none; } .live_entry_ws.works_block:nth-child(3n-2) { clear: both; } .live_entry_ws .flow_pic { padding: 0 0 0 20px !important; background-repeat: no-repeat; background-position: 1.5% 50%; box-sizing: border-box; } .live_entry_ws.works_block:first-child .flow_pic { background: none; } .live_entry_ws .flow_detail p { padding: 0 0 0 20px !important; } @media screen and (max-width:768px) { .live_entry_ws.works_block ul li { width: 100%; float: none; } } @media screen and (max-width:640px) { .live_entry_ws.works_block { width: 50%; } .live_entry_ws.works_block:nth-child(3n-2) { clear: none; } .live_entry_ws.works_block:nth-child(2n-1) { clear: both; } } @media screen and (max-width:320px) { .live_entry_ws.works_block ul .works_block2 { width: 100%; } } .live_entry_ws .flow_title { float: none !important; } .live_entry_ws .flow_title_complete h4 { color: rgb(255, 102, 0) !important; } .live_entry_ws h4 { border: none !important; padding: 5px 0 0 20px !important; margin: 0 !important; font-size: 13px; } .live_entry_ws .works_dousen { text-align: right !important; } .live_entry_ws .pic_quantity { text-align: right !important; } /*現場実況ライブ ここまで*/ /*ココ暖リフォーム LP 自由記載ここから*/ .cocodan_free_box.box1 { width: 80%; margin: 0 auto; } @media screen and (max-width:640px) { .cocodan_free_box.box1 { width: 100%; } } .cocodan_free_cnt_box { border: solid 10px #4f7336; padding: 2%; box-sizing: border-box; margin-top: 2%; } .cocodan_free_cnt_box:nth-child(2n-1) { width: 49%; margin-right: 1%; float: left; clear: both; } .cocodan_free_cnt_box:nth-child(2n) { width: 49%; margin-left: 1%; float: left; } .box2 .cocodan_free_cnt_box { border: solid 15px #eedfb6; } .box2 .cocodan_free_cnt_box:nth-child(2n-1) { width: 100%; margin: 0; float: none; } .box2 .cocodan_free_cnt_box:nth-child(2n) { width: 100%; margin: 0; float: none; } .box1 .cocodan_free_cnt_box p { text-align: left; font-size: 16px; line-height: 1.8em; } @media screen and (max-width:640px) { .box1 .cocodan_free_cnt_box p { font-size: 14px; } } .cocodan_free_cnt_title h3 { float: left; width: 82%; margin: 1% 0; border: none; clear: none; padding: 0; text-align: left; } .box2 .cocodan_free_cnt_box h3 { clear: both; color: #333; font-size: 18px; text-align: left; border: 0 solid #24602e; border-left-width: 3px; padding: 0 2%; margin: 10px 0; float: none; } .box2 .cocodan_free_cnt_box p { float: left; padding: 0.5% 0 0.5% 1em !important; width: calc(100% - 100px); box-sizing: border-box; text-align: left; font-size: 18px; line-height: 1.8em; } .box2 .cocodan_free_cnt_box .cocodan_free_cnt_data h4 { margin: 0 0 2% 0 !important; width: 100px; box-sizing: border-box; font-size: 16px; line-height: 1.8em; } @media screen and (max-width:640px) { .cocodan_free_cnt_title h3 { font-size: 17px !important; } .box2 .cocodan_free_cnt_box p { font-size: 14px; width: 100%; padding: 2% !important; } .box2 .cocodan_free_cnt_box .cocodan_free_cnt_data h4 { font-size: 14px; width: 100%; margin: 0 !important; } } @media screen and (max-width:480px) { .cocodan_free_cnt_title h3 { font-size: 15px !important; } } .cocodan_free_cnt_title { border-bottom: solid 2px #000; } .cocodan_free_cnt_data h4 { background: #4f7336; color: #fff; padding: 0.5% 1em; font-size: 14px; font-weight: bold; margin: 0 3% 0 0; display: block; width: auto; text-align: center; float: left; border: none; clear: both; } @media screen and (max-width:723px) { .cocodan_free_cnt_title { padding-bottom: 2%; } } @media screen and (max-width:640px) { .cocodan_free_cnt_title h3 { width: 100%; } .cocodan_free_cnt_title .cocodan_free_cnt_period { width: auto; } .cocodan_free_cnt_data h4, .cocodan_free_cnt_price_box1 h4 { padding: 1% 0.5em; } } .cocodan_free_thumb_img { margin: 0 0 4% 0; position: relative; max-width: 100%; width: 100%; } .cocodan_free_thumb_img img { max-width: 100%; width: 100%; } .cocodan_free_cnt_data hr { border-top: solid 1px #ddd; border-bottom: none; background: none; margin-top: 1.5%; } @media screen and (max-width:640px) { .cocodan_free_cnt_data hr { margin-top: 3%; } } .cocodan_free_cnt_img01 { display: block; margin: 1% auto; width: auto; } .cocodan_free_cnt_img02 { margin: 2% auto; display: block; } @media screen and (max-width:640px) { .cocodan_free_cnt_img02 { max-width: 100%; margin: 4% auto; } } .cocodan_free_cnt_data { margin: 2% 0; font-size: 16px; } img.cocodan_free_cnt_img03 { width: auto; } @media screen and (max-width:640px) { .cocodan_free_cnt_data { font-size: 14px; } img.cocodan_free_cnt_img03 { width: 25%; margin-top: -12%; } } @media screen and (max-width:480px) { img.cocodan_free_cnt_img03 { margin-top: -8%; } } @media screen and (max-width:410px) { img.cocodan_free_cnt_img03 { margin-top: -5%; } } .cocodan_free_model { margin: 0 0 0 1em; } .cocodan_free_cnt_data_hr { padding-bottom: 2em !important; } @media screen and (max-width:640px) { .cocodan_free_cnt_data_hr { padding-bottom: 2.7em !important; } } /*ココ暖リフォーム LP 自由記載ここまで*/ /*イベントブログここから*/ .events_blog_box, #events_flame .events_box_inner dl { margin-bottom: 3%; border-bottom: 4px dotted #666; } #events_flame .index_box li { width: 50%; float: left; box-sizing: border-box; padding: 5px; } #events_flame .events_box_inner>ul>li:first-child { width: 23%; margin: 0 3% 0 0; float: left; } #events_flame .events_box_inner>ul>li:last-child { width: 74%; margin: 0; float: left; } #events_flame .all_listbox .events_blog_box h3 { margin: 2% 0; padding: 0; font-size: 16px; font-weight: normal; color: #000; border: none; } #events_flame .title_catch1 span, #events_flame .title_catch2 span { width: 23%; margin-right: 3%; padding: 0.5% 0; color: #fff; text-align: center; display: inline-block; } #events_flame .title_catch1 span { background-color: #bbb; } #events_flame .title_catch2 span { background-color: #f06449; } #events_flame .events_box_inner dl { overflow: hidden; } #events_flame .events_box_inner dl:last-child { border-bottom: none; } #events_flame .events_box_inner dt { width: 18%; margin: 0 3% 0 0; padding: 0.5% 0; color: #fff; background-color: #42602e; float: left; clear: left; } #events_flame .events_box_inner dd { width: 79%; margin: 0 0 1%; padding: 0.5% 0; text-align: left; float: left; } #events_flame .events_blog_box p.event_entry_btn a { width: 140px; padding: 0.5% 1%; margin-bottom: 3%; background-color: #f06449; color: #fff; font-size: 16px; border-radius: 4px; text-align: center; float: right; } #events_flame .events_blog_box p.event_entry_btn a:hover { opacity: 0.6; } .events_box_entry { margin: 2% 0; } .events_box_toiawase { margin: 0 0 0; float: right; } @media screen and (max-width:1024px) { .events_blog_box { width: 96%; } } @media screen and (max-width:640px) { .events_blog_box, #events_flame .events_box_inner dl { margin-bottom: 5%; } #events_flame .events_box_inner>ul>li:first-child { width: 25%; } #events_flame .events_box_inner>ul>li:last-child { width: 72%; } #events_flame .events_blog_box h3 { font-size: 14px; } #events_flame .title_catch1 span, #events_flame .title_catch2 span { width: 25%; } #events_flame .events_box_inner dt { width: 100%; margin: 0 auto; } #events_flame .events_box_inner dd { width: 96%; margin: 0 2% 2% 2%; } #events_flame .events_blog_box p.event_entry_btn { font-size: 14px; } #events_flame .index_box li { width: 98%; margin: 0 1%; } } .map { width: 49%; margin: 0 1.5% 0 0.5%; float: left; } /*IE後方互換対応*/ .map.past_ie { width: 99.5%; float: none; margin-bottom: 2%; } .map iframe { width: 100% !important; height: 300px !important; } #main .article h3 { clear: none; display: flex; } @media screen and (max-width: 640px) { /* GoogleMAP レスポンシブ*/ .map { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; width: 98%; margin: 0 auto 3%; float: none; } .map iframe { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 96% !important; height: 90% !important; } } /*記事*/ #root.event_entry #events_flame { width: 98%; margin: 0 auto; } .events_blog_box { width: 100%; max-width: 980px; margin: 0 auto; } #root.event_entry #main { width: 100%; max-width: 980px; margin: 0 auto; float: none; } #root.event_entry #events_flame .events_blog_box, #root.event_entry #events_flame .events_box_inner dl { margin-bottom: 0; border-bottom: none; } #root.event_entry .event_entry_top_data { padding: 2% 2% 0 0; box-sizing: border-box; } #root.event_entry #events_flame .no-wrap { white-space: nowrap; } #root.event_entry #events_flame ul.entry_detail_table>li.entry_detail_table_cell { width: 50%; float: left; } #root.event_entry #events_flame ul.entry_detail_table>li.entry_detail_table_cell .map { width: 100%; } #root.event_entry #events_flame .events_box_inner>ul>li:first-child { margin: 0; } button.btn_eventmap { border: 2px solid #FF4300; background: #fff; font-size: 20px; color: #FF4300; width: 100%; margin: 2% 0 0 0; } article.entry_detail { border: solid 2px #ccc; padding: 2% !important; box-sizing: border-box; margin: 0 auto 2% auto; } #root.event_entry #events_flame .events_box_inner dt { text-align: center; width: 120px; } #root.event_entry #events_flame .events_box_inner dd { width: calc(97% - 120px); } #root.event_entry .is_1per1 div { margin: 0 auto; text-align: center; height: 0; padding-bottom: 63%; position: relative; overflow: hidden; } #root.event_entry .is_1per1 div img { max-height: 98%; max-width: 98%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate(-50%, -50%); transform: translate3d(-50%, -50%, 0); box-shadow: 0 0 0 1px #333; } #root.event_entry .is_1per2 li { width: 49%; height: 0; padding-bottom: 30% !important; position: relative; margin: 0 auto; } #root.event_entry .is_1per2 li:nth-child(1) { margin-right: 1%; } #root.event_entry .is_1per2 li:nth-child(2) { margin-left: 1%; } #root.event_entry .is_1per2 li a { text-align: center; } #root.event_entry .is_1per2 li img { max-height: 96%; max-width: 96%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate(-50%, -50%); transform: translate3d(-50%, -50%, 0); box-shadow: 0 0 0 1px #333; } .event_form_top { text-align: center !important; } #root.event_entry .event_tell_tap_bnr { padding: 0 2% 2% 2%; } .mfp_element_all { max-width: 95% !important; } @media screen and (max-width: 1024px) { #root.event_entry .cnt_box_inner { margin-bottom: 2%; } #root.event_entry .event_entry_top_data { padding: 2% 0 0 0; } #root.event_entry #events_flame .article p { padding: 0 2%; } } @media screen and (max-width: 640px) { #root.event_entry #events_flame ul.entry_detail_table>li.entry_detail_table_cell { width: 100%; } #root.event_entry #events_flame ul.entry_detail_table>li.entry_detail_table_cell:nth-child(2) { display: none; } #root.event_entry #events_flame .events_box_inner dt { width: 60px; margin-top: 0; font-size: 12px; line-height: 1.8em; } #root.event_entry #events_flame .events_box_inner dd { width: calc(98% - 60px); margin: 0 0 2% 2%; } #root.event_entry .is_1per1 div { padding: 1% 1% 66.8% 1%; } .event_form_top { text-align: left !important; } } @media screen and (max-width: 480px) { #root.event_entry #events_flame .no-wrap { display: block; margin: 0 2% 0 auto; width: 8em; } } @media screen and (max-width: 330px) { #root.event_entry #events_flame .events_box_inner dd { letter-spacing: -0.04em; } } /*記事用テンプレここから*/ .event_entry_txt_l, .event_entry_txt_r { margin: 2% 0; } .event_entry_txt_l p, .event_entry_txt_r p { padding: 0 !important; overflow: hidden; clear: both; } .event_entry_txt_l img { margin: 0 0 10px 10px; float: right; } .event_entry_txt_r img { margin: 0 10px 10px 0; float: left; } .event_entry_1per2 { margin: 2% 0; overflow: hidden; clear: both; } .event_entry_1per2 div { width: 50%; padding: 0 1% 0 0; text-align: center; float: left; box-sizing: border-box; } .event_entry_1per2 div:last-child { padding: 0 0 0 1%; } .event_entry_1per2 div img { padding: 0 0 2%; } .event_entry_1per2 div p { text-align: left; } @media screen and (max-width: 1024px) { .event_entry_txt_l img, .event_entry_txt_r img { max-width: 50% !important; } .event_entry_txt_l img { margin: 0 0 1% 1%; } .event_entry_txt_r img { margin: 0 1% 1% 0; } } @media screen and (max-width: 640px) { .event_entry_1per2 div { width: 100%; padding: 0 0 2% !important; } .event_entry_1per2 div:last-child { width: 100%; padding: 0 !important; } } /*拡大アイコンここから*/ #root.event_entry p.event_zoom, #root.event_entry p.event_zoom2, #root.event_entry p.event_zoom3 { max-height: 96%; max-width: 96%; position: absolute; left: 50%; top: 50%; z-index: 2; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); -ms-transform: translate(-50%, -50%); transform: translate3d(-50%, -50%, 0); } #root.event_entry p.event_zoom:after, #root.event_entry p.event_zoom2:after, #root.event_entry p.event_zoom3:after { content: ""; position: absolute; right: 0; bottom: 0; background-size: auto 100%; width: 78px; max-width: 50%; height: 78px; max-height: 50%; } @media screen and (max-width: 640px) { #root.event_entry p.event_zoom:after, #root.event_entry p.event_zoom2:after, #root.event_entry p.event_zoom3:after { width: 39px; height: 39px; } } /*イベントブログここまで*/ /*ココリフォメニューここから*/ #lineup .lineup_cnt_box { border: solid 10px #42602e; padding: 2%; box-sizing: border-box; margin-top: 2%; background: #fff; } #lineup .lineup_cnt_title h3 { float: left; width: 82%; margin: 1% 0; border: none; clear: none; padding: 0; color: #000; } @media screen and (max-width:640px) { #lineup .lineup_cnt_title h3 { font-size: 17px; } } #lineup .lineup_cnt_title .lineup_cnt_period { float: left; width: 120px; background: #ff8a00; color: #fff; padding: 1%; font-size: 15px; text-align: center; border-radius: 5px; box-sizing: border-box; } #lineup .lineup_cnt_title { border-bottom: solid 2px #000; } #lineup .lineup_cnt_data h4 { background: #42602e; color: #fff; padding: 0.5% 1em; font-size: 14px; font-weight: bold; margin: 0 3% 0 0; display: block; width: auto; text-align: center; float: left; border: none; clear: none; } @media screen and (max-width:723px) { #lineup .lineup_cnt_title { padding-bottom: 2%; } } @media screen and (max-width:640px) { #lineup .lineup_cnt_title h3 { width: 100%; } #lineup .lineup_cnt_title .lineup_cnt_period { width: auto; } #lineup .lineup_cnt_data h4 { padding: 1% 0.5em; } } #lineup .lineup_thumb_img { float: left; margin: 0 2% 2% 0; position: relative; max-width: 50%; } #lineup .lineup_thumb_img img { max-width: 100%; } #lineup .lineup_cnt_data hr { border-top: solid 1px #ddd; border-bottom: none; background: none; margin-top: 1.5%; } @media screen and (max-width:640px) { #lineup .lineup_cnt_data hr { margin-top: 3%; } } #lineup .lineup_cnt_price_box1 h4 { margin: 1.5% 3% 3%; padding: 1em 2em; font-size: 18px; font-weight: normal; display: block; width: auto; text-align: center; border-radius: 4px; float: left; border: none; clear: none; background: #42602e; color: #fff; } @media screen and (max-width:1024px) { #lineup .lineup_cnt_price_box1 h4 { margin: 0.8em 0 3%; padding: 2% 2em; } } @media screen and (max-width:760px) { #lineup .lineup_cnt_price_box1 h4 { margin-top: 0.2%; margin-right: 60%; margin-bottom: 1%; padding: 1% 2em; font-size: 14px; } } @media screen and (max-width:400px) { #lineup .lineup_cnt_price_box1 h4 { margin: 0.8% 60% 1% 0; padding: 1% 1em; } } #lineup .lineup_cnt_img01 { display: block; margin: 1% auto; width: auto; } #lineup .lineup_cnt_price_box2 { background: #eefcd1; padding: 2%; box-sizing: border-box; } #lineup .lineup_cnt_final_price { font-size: 60px; color: #e60012; text-align: center; font-weight: bold } #lineup .lineup_cnt_final_price span { font-size: 25px } #lineup .lineup_cnt_img02 { margin: 2% auto; display: block; } @media screen and (max-width:640px) { #lineup .lineup_cnt_final_price { font-size: 25px; font-size: 9vw; } #lineup .lineup_cnt_final_price span { font-size: 14px } #lineup .lineup_cnt_img02 { max-width: 100%; margin: 4% auto; } #lineup .lineup_cnt_price_box2 { padding: 4% 2% 2% 2%; } } #lineup .lineup_cnt_price_items>div { float: left; } #lineup .lineup_cnt_option:nth-last-child(1) { width: 50%; margin-left: 30%; float: none; } #lineup .lineup_cnt_option:nth-last-child(2), #lineup .lineup_cnt_option:nth-last-child(2)~.lineup_cnt_option { width: 45%; margin-left: 5%; float: left; } #lineup .lineup_cnt_option:nth-last-child(3), #lineup .lineup_cnt_option:nth-last-child(3)~.lineup_cnt_option { width: 30.3%; margin-left: 3%; float: left; } #lineup .lineup_cnt_option:nth-last-child(4), #lineup .lineup_cnt_option:nth-last-child(4)~.lineup_cnt_option { width: 25%; margin-left: 0; float: left; } #lineup .lineup_cnt_option:nth-last-child(5), #lineup .lineup_cnt_option:nth-last-child(5)~.lineup_cnt_option { width: 20%; margin-left: 0; float: left; } #lineup .lineup_cnt_option:nth-last-child(6), #lineup .lineup_cnt_option:nth-last-child(6)~.lineup_cnt_option { width: 30.3%; margin-left: 3%; margin-bottom: 2%; float: left; } @media screen and (max-width: 640px) { #lineup .lineup_cnt_option:nth-last-child(2), #lineup .lineup_cnt_option:nth-last-child(2)~.lineup_cnt_option { width: 43%; margin: 0 -7% 0 11%; float: left; } #lineup .lineup_cnt_option:nth-last-child(3), #lineup .lineup_cnt_option:nth-last-child(3)~.lineup_cnt_option { width: 33.3%; margin: 0; float: left; } #lineup .lineup_cnt_option:nth-last-child(4), #lineup .lineup_cnt_option:nth-last-child(4)~.lineup_cnt_option { width: 50%; margin: 0 0 2%; } #lineup .lineup_cnt_option:nth-last-child(5), #lineup .lineup_cnt_option:nth-last-child(5)~.lineup_cnt_option { width: 33.3%; margin: 0 0 2%; } #lineup .lineup_cnt_option:nth-last-child(6), #lineup .lineup_cnt_option:nth-last-child(6)~.lineup_cnt_option { width: 33.3%; margin: 0 0 2%; float: left; } } #lineup .lineup_cnt_price_items { margin-left: 5%; } #lineup .lineup_cnt_price_items>div>div { background: #f06449; padding: 10%; color: #fff; border-radius: 5px; text-align: center; width: 70%; box-sizing: border-box; float: left; height: 56px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } #lineup .lineup_cnt_data { margin: 2% 0; } #lineup img.lineup_cnt_img03 { width: auto; margin-right: 3%; float: right; } @media screen and (max-width:768px) { #lineup img.lineup_cnt_img03 { margin-right: 0; } } @media screen and (max-width:640px) { #lineup .lineup_cnt_price_items { margin-left: 0; } #lineup .lineup_cnt_data { font-size: 14px; } #lineup .lineup_cnt_price_items>div { width: 33.3%; margin-bottom: 2%; } #lineup .lineup_cnt_price_items>div>div { height: 43px; font-size: 14px; line-height: 1.2em; } #lineup img.lineup_cnt_img03 { width: 23%; margin-top: -12%; margin-right: 1%; margin-left: 1%; } } @media screen and (max-width:480px) { #lineup img.lineup_cnt_img03 { margin-top: -8%; } } @media screen and (max-width:410px) { #lineup img.lineup_cnt_img03 { margin-top: -5%; } } #lineup .lineup_cnt_box .lineup_discount { position: absolute; top: 2%; left: 2%; padding: 18px 2% 6% 2%; line-height: 1.5em; color: #fff; font-weight: bold; font-size: 14px; width: 95px; height: 95px; text-align: center; box-sizing: border-box; } @media screen and (max-width:400px) { #lineup .lineup_cnt_box .lineup_discount { padding: 8.5% 2% 13% 2%; font-size: 10px; width: 50%; background-size: contain; box-sizing: border-box; } } #lineup .lineup_discount1 { margin: 1% 0; font-size: 25px; font-weight: bold; color: #fff; min-height: auto !important; line-height: 17px; } #lineup .lineup_discount2 { margin: 0; font-size: 12px; color: #fff; line-height: 13px; } @media screen and (max-width:640px) { #lineup .lineup_discount1 { margin: 2% 0; font-size: 20px; } } #lineup .lineup_model { margin: 0 0 0 1em; } #lineup .lineup_cnt_price1, #lineup .lineup_cnt_price2, #lineup .lineup_cnt_price3 { font-size: 23px; font-weight: bold; } #lineup .lineup_cnt_price2 { margin: 0 0.3em; } @media screen and (max-width:1024px) { #lineup .lineup_cnt_price1, #lineup .lineup_cnt_price2, #lineup .lineup_cnt_price3 { font-size: 22px; font-size: 2.9vw; line-height: 1.8em; } #lineup .lineup_cnt_price2 { margin: 0 0.5em; } } @media screen and (max-width:640px) { #lineup .lineup_cnt_price1, #lineup .lineup_cnt_price2, #lineup .lineup_cnt_price3 { font-size: 22px; font-size: 4.3vw; line-height: 1.5em; } } @media screen and (max-width:400px) { #lineup .lineup_cnt_price1, #lineup .lineup_cnt_price2, #lineup .lineup_cnt_price3 { font-size: 20px; font-size: 5.5vw; line-height: 2.2em; } #lineup .lineup_cnt_price2 { margin: 0 0.2em; } } #lineup .lineup_cnt_price3 { color: #e60012; } #lineup .lineup_cnt_data_hr { padding-bottom: 3em; } @media screen and (max-width:640px) { #lineup .lineup_cnt_data_hr { padding-bottom: 2.7em; } } /*ココリフォメニューお問い合わせバナー*/ .lineup_btn_toiawase { margin: 2% 0 4% 0; } /*ココリフォメニュー インデックスボタン*/ #main_cnt02 .lineup_list { padding-bottom: 3%; } #main_cnt02 .lineup_list li { width: 50%; padding: 2% 1% 0 1%; box-sizing: border-box; } #main_cnt02 .lineup_list a:nth-child(2n-1) li { padding-left: 0; } #main_cnt02 .lineup_list a:nth-child(2n) li { padding-right: 0; } @media screen and (max-width:760px) { #main_cnt02 .lineup_list li { width: 100%; padding: 2% 0.5% 0 0.5%; } #main_cnt02 .lineup_list a:nth-child(2n-1) li { padding-left: 0.5%; } #main_cnt02 .lineup_list a:nth-child(2n) li { padding-right: 0.5%; } } #lineup .lineup_list .lineup_cnt_box { padding: 0; background: #eefcd1; border: 3px solid #42602e; } .lineup_list .lineup_cnt_box { position: relative; } .lineup_list .lineup_list_info { position: absolute; } .lineup_list .lineup_list_info { width: 65%; padding: 2% 2% 0 2%; position: absolute; right: 3%; bottom: 5%; background: rgba(255, 255, 255, 0.8); z-index: 2; color: #000; } #lineup .lineup_list .lineup_thumb_img { margin: 0; max-width: 60%; height: 140px; overflow: hidden; } #lineup .lineup_list .lineup_cnt_box .lineup_discount { width: 80px; font-size: 12px; background-size: contain; padding: 13px 2% 7% 2%; } #lineup .lineup_list .lineup_discount1 { font-size: 22px; } .lineup_list_title { font-size: 18px; font-weight: bold; text-align: left; line-height: 1.2em; } .lineup_list_size { font-size: 14px; font-weight: bold; text-align: left; } .lineup_list_price { font-size: 25px; font-weight: bold; text-align: left; color: #e60012; } .lineup_list_price .lineup_list_price2 { font-size: 14px; } @media screen and (max-width:640px) { .lineup_list_title { font-size: 16px; } .lineup_list_price { font-size: 20px; } } /*ココリフォメニューインデックスページ インデックスボタン*/ .lineup_index .lineup_list { padding: 0 20px 3%; overflow: hidden; box-sizing: border-box; } .lineup_index .lineup_list li { width: 50%; padding: 2% 1% 0 1%; float: left; box-sizing: border-box; } .lineup_index .lineup_list a:nth-child(2n-1) li { padding-left: 0; clear: both; } .lineup_index .lineup_list a:nth-child(2n) li { padding-right: 0; } @media screen and (max-width:980px) { .lineup_index .lineup_list { padding: 0 2% 2%; } } @media screen and (max-width:760px) { .lineup_index .lineup_list li { width: 100%; } .lineup_index .lineup_list a:nth-child(2n-1) li { padding-left: 0.5%; } .lineup_index .lineup_list a:nth-child(2n) li { padding-right: 0.5%; } } .lineup_index .lineup_list .lineup_cnt_box { padding: 0; background: #42602e; border: 2px solid #42602e; position: relative; box-sizing: border-box; } .lineup_index .lineup_list .lineup_cnt_box:hover { opacity: 0.5; } .lineup_index .lineup_list .lineup_cnt_box:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 0 17px 17px; border-color: transparent transparent #ffffff; position: absolute; bottom: 3px; right: 3px; } .lineup_index .lineup_list .lineup_list_info { width: 75%; padding: 2%; position: absolute; right: 5%; bottom: 15%; background: rgba(255, 255, 255, 0.9); z-index: 2; color: #333333; } .lineup_index .lineup_list .lineup_thumb_img { margin: 0; max-width: 80%; height: 160px; overflow: hidden; } .lineup_index .lineup_list_title { font-size: 18px; font-weight: bold; text-align: left; line-height: 1.2em; } .lineup_index .lineup_list_title.cmp_index_ttl { font-size: 24px; } .lineup_index .lineup_list_size { font-size: 14px; font-weight: bold; text-align: left; } .lineup_index .lineup_list_price { font-size: 25px; font-weight: bold; text-align: right; color: #ff1b00; } .lineup_index .lineup_list_price .lineup_list_price2 { font-size: 14px; } @media screen and (max-width:980px) { .lineup_index .lineup_list .lineup_list_info { bottom: 12%; } .lineup_index .lineup_list .lineup_thumb_img { height: 140px; } .lineup_index .lineup_list_title.cmp_index_ttl { font-size: 18px; } } @media screen and (max-width:640px) { .lineup_index .lineup_list_title { font-size: 16px; } .lineup_index .lineup_list_title.cmp_index_ttl { font-size: 16px; } .lineup_index .lineup_list_price { font-size: 20px; } } /* 記事自由記載部分 */ .menu_entry_body { margin-top: 4%; } /* ココリフォメニューここまで */ /* 内部ブログCSSここから */ /*トップ、下層共用*/ #main .blog_belt01, .blog_main_top .blog_belt01 { margin: 10px 0px 23px 0px; padding: 10px 5px 10px 10px; position: relative; color: #ffffff; background: #42602e; } .blog_main_top .blog_belt01 { margin-bottom: 10px; } #main .blog_belt01:after, #main .blog_belt01:before, .blog_main_top .blog_belt01:after, .blog_main_top .blog_belt01:before { content: ""; position: absolute; top: 100%; height: 0; width: 0; } #main .blog_belt01:after { left: 40px; border: 10px solid transparent; border-top: 10px solid #42602e; } #main .blog_belt01:before { left: 37px; border: 13px solid transparent; border-top: 13px solid #42602e; } #main .blog_btn01, .blog_main_top .blog_btn01 { padding: 6px 15px; -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; box-shadow: inset 0px 1px 0px 0px #ffffff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f3f0e7), color-stop(1, #f3f0e7)); background: -moz-linear-gradient(top, #f3f0e7 5%, #f3f0e7 100%); background: -webkit-linear-gradient(top, #f3f0e7 5%, #f3f0e7 100%); background: -o-linear-gradient(top, #f3f0e7 5%, #f3f0e7 100%); background: -ms-linear-gradient(top, #f3f0e7 5%, #f3f0e7 100%); background: linear-gradient(to bottom, #f3f0e7 5%, #f3f0e7 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f0e7', endColorstr='#f3f0e7', GradientType=0); background-color: #f3f0e7; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #dcdcdc; display: inline-block; cursor: pointer; color: #777777; font-size: 13px; font-weight: bold; text-decoration: none; text-shadow: 0px 1px 0px #ffffff; } #main .blog_btn01:hover, .blog_main_top .blog_btn01:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f3f0e7), color-stop(1, #f3f0e7)); background: -moz-linear-gradient(top, #f3f0e7 5%, #f3f0e7 100%); background: -webkit-linear-gradient(top, #f3f0e7 5%, #f3f0e7 100%); background: -o-linear-gradient(top, #f3f0e7 5%, #f3f0e7 100%); background: -ms-linear-gradient(top, #f3f0e7 5%, #f3f0e7 100%); background: linear-gradient(to bottom, #f3f0e7 5%, #f3f0e7 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f0e7', endColorstr='#f3f0e7', GradientType=0); background-color: #f3f0e7; } #main .blog_btn01:active, .blog_main_top .blog_btn01:active { position: relative; top: 1px; } /*トップページコンテンツ用*/ .blog_main_top { width: 50%; float: right; font-size: 90%; } /*facebook併用での変更点*/ #main_top_cnt05 { width: 100%; margin: 0 auto; color: #000; } /*facebook併用での変更点*/ .blog_main_top .blog_belt01 { margin-top: 0; font-size: 160%; } #main_top_cnt05 h2 .no-wrap { margin: 0; padding: 0; white-space: nowrap; display: inline; float: left; } #main_top_cnt05 h2 span { margin: 0 0.5%; float: right; } #main_top_cnt05 li { width: 98%; margin: 1% auto; position: relative; } #main_top_cnt05 a { color: #000; text-decoration: none; } #main_top_cnt05 img { width: 100%; } #main_top_cnt05 h3 { border-bottom: 3px solid #95999c; color: #000; } .blogh2_01 { display: inline; } .blogh2_02 { display: inline; } .blog_btn01_1 { position: absolute; top: 100%; right: 0; } .blog_txtcnt { overflow: hidden; } .blog_main_top .text_overflow { margin-bottom: 35px; } .blog_main_top .blog_btn01_1>span { padding: 5px 10px; font-size: 12px; } .blog_main_top .blog_bnr { text-align: left; background: #42602e; } /*ブログ新着 上バナー画像*/ @media screen and (max-width:980px) { .blog_main_top .blog_bnr { padding: 2% 2% 0 2%; box-sizing: border-box; text-align: center; } /*ブログ新着 上バナー画像*/ } .blog_main_top section { background: #fff; } @media screen and (max-width:980px) { /*facebook併用での変更点*/ #main_top_cnt05 h2 .no-wrap { width: 100%; } } @media screen and (max-width:640px) { /*facebook併用での変更点*/ .blog_main_top { width: 100%; } } @media screen and (max-width:480px) { .blogh2_01 { display: block; } } @media only screen and (max-width: 360px) { .blog_main_top .blog_belt01 { font-size: 150%; } #main_top_cnt05 h2 .no-wrap { width: 100%; } /*facebook併用での変更点*/ #main_top_cnt05 h2 span { width: 49%; } #main_top_cnt05 img { width: 99.6%; } } /*下層ページコンテンツ用*/ #main .blog_belt01 { font-size: 120%; } .line01 { height: 0px; margin: 15px 0; padding: 0px; border-top: 1px dashed #bbb; border-bottom: 1px dashed #bbb; display: block; background: none; } .widget-list-item { margin: 5px 20px; } .widget-list-item a { color: #412f28; } .blog_topic li { width: 32.3%; margin: 1% 0.5%; float: left; text-align: center; } .blog_list_border { width: 100%; border-bottom: 1px solid #42602e; color: #000; } @media screen and (max-width:1024px) { .widget-archive-category, .widget-recent-entries, .widget-archive-monthly { width: 32.6%; float: left; margin: 0 0.3%; } } @media screen and (max-width:480px) { .widget-archive-category, .widget-recent-entries, .widget-archive-monthly { width: 100%; float: none; margin: 0; } } @media only screen and (max-width: 360px) { #main .blog_belt01 { font-size: 100%; } } /* facebook併用での追加点ここから */ #facebook_blog { width: 96%; max-width: 940px; margin: 20px auto; overflow: hidden; } #facebook_box { width: 48%; float: left; margin-right: 2%; overflow: hidden; } #blogbanner_box { width: 50%; float: left; text-align: right; } #blog_banner_title { float: right; margin-bottom: 1%; } #blog_banner_02, #blog_banner_03 { float: right; margin-bottom: 10px; } @media screen and (max-width:1024px) { #facebook_blog { margin: 2% auto; } } @media screen and (max-width:640px) { #facebook_box { width: 100%; margin: 0% 0% 2%; text-align: center; } #blogbanner_box { width: 98%; margin: 0% 1% 1%; } #blog_banner_02, #blog_banner_03 { margin-bottom: 2%; } } /* facebook併用での追加点ここまで */ /*投稿者アイコン機能ここから*/ .author_icon { float: left; width: 60px; margin: 0 0 10px 1%; } .blog_entry_data { float: left; width: 395px; margin-top: 4px; } .blog_entry_data li:nth-child(2n-1) { float: left; width: 43%; } .blog_entry_data li:nth-child(2n) { float: left; width: 57%; } .hide { display: none; } @media screen and (max-width: 480px) { .author_icon { float: left; width: 50px; margin: 1% 2% 10px 1%; } .blog_entry_data { float: left; width: 80%; margin-top: 0; } .blog_entry_data li:nth-child(2n-1), .blog_entry_data li:nth-child(2n) { float: left; width: 100%; } } .line01 { clear: both; } /*投稿者アイコン機能ここまで*/ /* 内部ブログCSSここまで */ /*区切り線 ここまで*/ /* TOP現場実況ライブ 完成見学会 ここから*/ .h2_live_box, .h2_webtour_box { width: 100%; text-align: center; } #main_top_cnt06 .dousen_top { margin: 0; } @media screen and (max-width:640px) { #main_top_cnt06 .works_block_top.grid_end, #main_top_cnt07 .works_block_top.grid_end { display: none; } } /* TOP現場実況ライブ 完成見学会 ここまで*/ /*コンバージョンタグ*/ #g_rmkt { display: none; } /* TOP SP導線*/ @media screen and (max-width:640px) { #top_sp_dousen li { width: 50%; float: left; box-sizing: border-box; padding: 2%; } } /* pg_demo */ /*基本設定ここから*/ .pg { max-width: 730px; margin: 0px auto; } /*画像共通*/ .pg img { display: block; text-align: center; } /*要素の余白*/ .fit_t { padding-top: 0 !important; } .fit_b { padding-bottom: 0 !important; } .fit_r { padding-right: 0 !important; } .fit_l { padding-left: 0 !important; } .fit_all { padding: 0 !important; } /*テキスト赤文字*/ .pg strong { color: red; font-weight: normal; } /*ボックス*/ .pg_box { width: 100%; max-width: 730px; margin: 10px auto; padding: 10px; box-sizing: border-box; } @media screen and (max-width:1024px) { .pg_box { margin: 2% auto; padding: 2%; } } /*インナー*/ .pg_inner { width: 100%; padding: 0 10px 10px; box-sizing: border-box; } .pg_inner:first-child { padding: 10px; } :not(.pg_inner)+.pg_inner { padding: 10px; } @media screen and (max-width:1024px) { .pg_inner { padding: 0 2% 2%; } .pg_inner:first-child { padding: 2%; } :not(.pg_inner)+.pg_inner { padding: 2%; } } /*インナーの子要素*/ .pg_inner>div { width: 100%; padding: 0 10px 10px; box-sizing: border-box; } .pg_inner>div:first-child { padding: 10px; } .pg_inner>:not(div)+div { padding: 10px; } @media screen and (max-width:1024px) { .pg_inner>div { padding: 0 2% 2%; } .pg_inner>div:first-child { padding: 2%; } .pg_inner>:not(div)+div { padding: 2%; } } /*テキスト*/ .pg p { width: 100%; font-size: 14px; line-height: 1.6em; padding: 0 10px 10px; text-align: left; overflow: hidden; box-sizing: border-box; } .pg p:first-child { padding: 10px; } :not(.pg p)+.pg p { padding: 10px; } .fontS .pg p { font-size: 14px; } .fontM .pg p { font-size: 15px; } .fontL .pg p { font-size: 17px; } @media screen and (max-width:1024px) { .pg p { padding: 0 2% 2%; } .pg p:first-child { padding: 2%; } :not(.pg p)+.pg p { padding: 2%; } } @media screen and (max-width:640px) { .pg p { font-size: 13px; } .fontS .pg p, .fontM .pg p, .fontL .pg p { font-size: 13px; } } /*導線上下の余白*/ .pg_btn { margin: 20px auto; } @media screen and (max-width:1024px) { .pg_btn { margin: 2% auto; } } /*シャドウ*/ .pg .sdw { box-shadow: 3px 3px 2px 0px #9d9d9d; -moz-box-shadow: 3px 3px 2px 0px #9d9d9d; -webkit-box-shadow: 3px 3px 2px 0px #9d9d9d; -ms-box-shadow: 3px 3px 2px 0px #9d9d9d; } /*吹き出し用シャドウ*/ .pg .sdw.pg_balloon:after { box-shadow: 2px 3px 2px 0px #9d9d9d; -moz-box-shadow: 2px 3px 2px 0px #9d9d9d; -webkit-box-shadow: 2px 3px 2px 0px #9d9d9d; -ms-box-shadow: 2px 3px 2px 0px #9d9d9d; } /*テキスト右側 sp画像w50%表示*/ .txt_r_1per2 p img { float: left; width: auto !important; margin: 0 10px 10px 0; } /*テキスト右側 sp画像w33%表示*/ .txt_r_1per3 p img { float: left; width: auto !important; margin: 0 10px 10px 0; } /*テキスト左側 sp画像w50%表示*/ .txt_l_1per2 p img { float: right; width: auto !important; margin: 0 0 10px 10px; } /*テキスト左側 sp画像w33%表示*/ .txt_l_1per3 p img { float: right; width: auto !important; margin: 0 0 10px 10px; } @media screen and (max-width:1024px) { .txt_r_1per2 p img, .txt_l_1per2 p img { max-width: 50% !important; } .txt_r_1per2 p img, .txt_r_1per3 p img { margin: 0 2% 2% 0; } .txt_l_1per2 p img, .txt_l_1per3 p img { margin: 0 0 2% 2%; } } @media screen and (max-width:640px) { .txt_r_1per3 p img, .txt_l_1per3 p img { max-width: 30% !important; } } /*hタグ左側*/ .htag_l h2, .htag_l h3 { text-align: left; } .htag_l p img { float: right; width: auto !important; margin: 0 0 20px 20px; } /*hタグ右側*/ .htag_r h2, .htag_r h3 { text-align: right; } .htag_r p img { float: left; width: auto !important; margin: 0 20px 20px 0; } @media screen and (max-width:1024px) { .htag_l p img { margin: 0 0 2% 2%; } .htag_r p img { margin: 0 2% 2% 0; } } .htag_l p, .htag_r p { overflow: visible; } /*導線テンプレート用、等分テンプレート用共通*/ .pg .cnt_box_inner { max-width: 730px; padding: 0 10px; box-sizing: border-box; } .pg .is_1per1 div { padding: 0 10px; } @media screen and (max-width:1024px) { .pg .cnt_box_inner, .pg .is_1per1 div { padding: 0 1%; } } /*2,3,4カラム*/ .pg .is_1per2 li, .pg .is_1per3 li, .pg .is_1per4 li { padding: 0 10px; } .pg .is_1per3 li { width: 33.33333%; width: -webkit-calc(100% / 3); } @media screen and (max-width:1024px) { .pg .is_1per2 li, .pg .is_1per3 li, .pg .is_1per4 li { padding: 0 1%; } } @media screen and (max-width:640px) { .pg .is_1per4 li { margin-bottom: 2%; } .pg .is_1per4 li:last-child, .pg .is_1per4 li:nth-last-child(2) { margin-bottom: 0; } } /*2,3カラム リキッド*/ @media screen and (max-width:640px) { .pg .is_1per2.pg_riquid li, .pg .is_1per3.pg_riquid li { width: 100%; float: none; } } /*基本設定ここまで*/ /*パターン01ここから*/ .pg_box_01 h2 img { max-width: 74% !important; display: inline; } .pg_box_01 p img { max-width: 22% !important; margin-top: -10%; } /*パターン01ここまで*/ /*パターン04ここから*/ .pg_box_04 { max-width: 730px; width: 100%; } /*パターン04ここまで*/ /*パターン02ここから*/ .pg_box_02 { border: 2px solid #f00; background-color: #fdd; } .pg_box_02 .pg_inner { border: 2px solid #fc0; background-color: #ffb; } .pg_box_02 .pg_inner div { border: 2px solid #0d0; background-color: #bfb; } .pg_box_02 p { border: 2px solid #00d; background-color: #ccf; } /*パターン02ここまで*/ /*パターン10ここから*/ .pg_box_10.pg_balloon .pg_inner, .pg_box_10.pg_balloon:before, .pg_box_10.pg_balloon:after { background-color: #f90; } .pg_balloon { padding: 0 !important; position: relative; } .pg_balloon:before, .pg_balloon:after { content: " "; position: absolute; width: 140px; height: 140px; left: 50%; bottom: -50px; margin-left: -70px; z-index: 2; -webkit-transform: rotate(-40deg) skew(11deg); -moz-transform: rotate(-40deg) skew(11deg); transform: rotate(-40deg) skew(11deg); } .pg_balloon:after { z-index: 1; } .pg_balloon .pg_inner { margin-bottom: 70px; position: relative; z-index: 3; } .pg_balloon .pg_inner>div { background-color: #fff; } @media screen and (max-width:640px) { .pg_balloon:before, .pg_balloon:after { bottom: -10px; } .pg_balloon .pg_inner { margin-bottom: 30px; } } /*パターン10ここまで*/ /*パターン12ここから*/ .pg_box_12 { background-color: #666; } .pg_box_12 .pg_inner div { background-color: #fff; } /*パターン12ここまで*/ /*パターン13ここから*/ .pg_box_13 { background-color: #666; color: #fff; } .pg_box_13 h3 img { max-width: 73% !important; margin-right: 2%; display: inline; } .pg_box_13 p img { max-width: 22% !important; margin-top: -8.5%; } /*パターン13ここまで*/ /*※※実際の使用の際は削除して下さい※※ マニュアル用装飾ここから*/ .pg div.anchor>h2 { margin-top: 4%; padding: 1% 0; color: #fff; background-color: #333; } .pg #pattern_05 li, .pg #pattern_06 li, .pg #pattern_07 li, .pg #pattern_08 li { font-size: 18px; line-height: 1.6em; text-align: left; background-color: #ddf; } .pg #pattern_05 li:first-child, .pg #pattern_06 li:first-child, .pg #pattern_07 li:first-child, .pg #pattern_08 li:first-child { background-color: #fdd; } .pg #pattern_05 li:last-child, .pg #pattern_06 li:last-child, .pg #pattern_07 li:last-child, .pg #pattern_08 li:last-child { background-color: #dfd; } @media screen and (max-width:640px) { .pg #pattern_05 li, .pg #pattern_06 li, .pg #pattern_07 li, .pg #pattern_08 li { font-size: 14px; } } /*※※実際の使用の際は削除して下さい※※ マニュアル用装飾ここまで*/ /* TOP事例導線共通部分ここから */ .pg .is_eq li { float: left; box-sizing: border-box; padding: 10px; } @media screen and (max-width: 1024px) { .pg .is_eq li { padding: 10px 2%; } } @media screen and (max-width: 640px) { .pg .is_eq li { padding: 2%; } } /* one item */ .pg .is_eq li:first-child:nth-last-child(1) { width: 100%; } /* two items */ .pg .is_eq li:first-child:nth-last-child(2), .pg .is_eq li:first-child:nth-last-child(2)~li { width: 360px; } /* three items */ .pg .is_eq li:first-child:nth-last-child(3), .pg .is_eq li:first-child:nth-last-child(3)~li { width: 240px; } /* four items */ .pg .is_eq li:first-child:nth-last-child(4), .pg .is_eq li:first-child:nth-last-child(4)~li { width: 180px; } /* five items */ .pg .is_eq li:first-child:nth-last-child(5), .pg .is_eq li:first-child:nth-last-child(5)~li { width: 144px; } /* six items */ .pg .is_eq li:first-child:nth-last-child(6), .pg .is_eq li:first-child:nth-last-child(6)~li { width: 120px; } @media screen and (max-width: 1024px) { /* one item */ .pg .is_eq li:first-child:nth-last-child(1) { width: 100%; } /* two items */ .pg .is_eq li:first-child:nth-last-child(2), .pg .is_eq li:first-child:nth-last-child(2)~li { width: 50%; } /* three items */ .pg .is_eq li:first-child:nth-last-child(3), .pg .is_eq li:first-child:nth-last-child(3)~li { width: 33.3%; } /* four items */ .pg .is_eq li:first-child:nth-last-child(4), .pg .is_eq li:first-child:nth-last-child(4)~li { width: 25%; } /* five items */ .pg .is_eq li:first-child:nth-last-child(5), .pg .is_eq li:first-child:nth-last-child(5)~li { width: 20%; } /* six items */ .pg .is_eq li:first-child:nth-last-child(6), .pg .is_eq li:first-child:nth-last-child(6)~li { width: 16.6%; } } }