@charset "utf-8"; /* ▼ まず始めに 1. カラー変更以下の初期色をサイトに合わせて変更しよう！ローカルサイト全体を「#xxx」＆「xx,xx,xx」で「検索・置換」してOK！（#付で検索必須！） #333 （51,51,51）　　　⇒ 基本的な文字色 #1a1a1a（26,26,26）　　⇒ 見出しの色 #ccc（204,204,204）　　⇒ ボーダー色 #f2f2f2（242,242,242） ⇒ ボーダー色より薄い背景に使用する色 #f00（255,0,0）　　　　⇒ メインカラー 2. 角丸の値角丸の値を3pxで統一しているので、もっと丸くしたい場合はこのCSS内で「radius」で「検索」し、好きな値に変更しよう。 3. グリッドの余白 .container = 960pxの余白20pxで作ってあるので、 .container = 972pxの余白30pxに変更する場合は、 Templates.dwtののclassを .grid-960 ⇒ .grid-972 に変更しよう。 */ /*----------------------------------------*---------------------------------------- composition ----------------------------------------*----------------------------------------*/ html { font-size: 10px; } body { color: #333; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", "sans-serif"; font-size: 1.5rem; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; } /*----------------------------------------*---------------------------------------- header ----------------------------------------*----------------------------------------*/ #header .container { position: relative; text-align:left; } @media all and (max-width: 767px) { #header { padding-bottom: 0px;} #header .container { padding-top: 10px; } } @media screen and (min-width: 768px) { #header { height: 70px; display: table; width: 100%; } } /*---------------------------------------- logo ----------------------------------------*/ #header .logo { background: url(../img/logo.png) no-repeat left center; background-size: auto; } @media all and (max-width: 767px) { #header .logo { top: 0px; left: 0px; background-size: contain; height: 40px; margin-bottom: 0px; } } @media screen and (min-width: 768px) { #header .logo { display: table-cell; table-layout: fixed; width: 405px; height: 70px; } #header .logo a { width: 405px; height: 70px; } } /*---------------------------------------- description ----------------------------------------*/ @media all and (max-width: 767px) { #header .description { display: none; } } @media screen and (min-width: 768px) { #header .description { font-size: 1.2rem; } #header .description--inline { line-height: 60px; } } /*---------------------------------------- toggleBtn ----------------------------------------*/ @media all and (max-width: 767px) { #header .toggleBtn { position: absolute; display: table; color: #fff; background: #cc0000; } #header .toggleBtn span { display: table-cell; vertical-align: middle; text-align: center; font-size: 1rem; } #header .toggleBtn i { display: block; } #header .toggleBtn--open i:before { content: "\f0c9"; } #header .toggleBtn--opened i:before { content: "\f00d"; } /* small */ #header .toggleBtn--small { top: 0px; right: 0px; width: 40px; height: 40px; } #header .toggleBtn--small i:before { font-size: 1.7rem; } } @media screen and (min-width: 768px) { #header .toggleBtn { display: none; } } /*----------------------------------------*---------------------------------------- globalNav スタイルが複雑なのでPCとスマホを完全に分けています。 #globalNav = 通常のグローバルナビ #globalNavSticky = 固定表示を使用する場合の固定表示されたグローバルナビ .globalNav = #globalNav,#globalNavSticky共通のスタイル ----------------------------------------*----------------------------------------*/ /*---------------------------------------- SP ----------------------------------------*/ @media all and (max-width: 767px) { #globalNav .container { padding: 0; } #globalNav a { padding: 10px; position: relative; display: block; } #globalNav a:before { position: absolute; top: 50%; right: 10px; margin-top: -.5em; font-family: "FontAwesome"; line-height: 1; content: "\f105"; } #globalNav .menu--active > a { text-decoration: underline; } #globalNav .dropdown:not(.dropdown-pc) > a:before { content: "\f107"; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 20px; } /* menu--primary */ #globalNav .menu--primary + .menu--primary { border-top: 1px solid #1a1a1a; } #globalNav .menu--primary > a { color: #fff; background: #333; } #globalNav .menu--primary.dropdown:not(.dropdown-pc) > a:before { background: #1a1a1a; } /* col */ #globalNav .menu--col6-sp:nth-child(2) { border-top: none; } #globalNav .menu--col6-sp:nth-child(2n), #globalNav .menu--col6-sp + .menu--col6-sp, #globalNav .menu--col4-sp + .menu--col4-sp, #globalNav .menu--col3-sp + .menu--col3-sp, #globalNav .menu--col8-sp + .menu--col4-sp, #globalNav .menu--col9-sp + .menu--col3-sp { border-left: 1px solid #1a1a1a; } } /*---------------------------------------- PC ----------------------------------------*/ @media screen and (min-width: 768px) { .globalNav { color: #262626; line-height: 1; } .globalNav li { display: inline-block; vertical-align: bottom; } .globalNav li + li { padding-left: 0px; } .globalNav a { text-decoration: none; transition: all .2s linear; font-family: 'Noto Sans Japanese', sans-serif; } .globalNav .menu--primary a { background: url(../img/globalNav.png) no-repeat; } .globalNav .menu--primary > a:hover, .globalNav .menu--primary.menu--active > a { border-bottom: solid 5px #f85550; } /* a */ .globalNav .menu--primary > a { height: 32px; } .globalNav .menu--ourwork > a { background-position: 0 0; width: 121px; } .globalNav .menu--person > a { background-position: -121px 0; width: 112px; } .globalNav .menu--suji > a { background-position: -233px 0; width: 169px;} .globalNav .menu--works > a { background-position: -402px 0; width: 98px;} .globalNav .menu--voice > a { background-position: -500px 0; width: 98px;} .globalNav .menu--access > a { background-position: -598px 0; width: 87px; } #globalNav .menu--primary > a:hover { margin-bottom: 0; } /*---------------------------------------- entry navi ----------------------------------------*/ .subNav .menu--entry a{ background: url(../../img/btn-entry.png) no-repeat 100% 0; width: 120px; height: 120px; position: absolute; right: 20px; top: 10px; z-index: 99; } } /*----------------------------------------*---------------------------------------- toggleNav ----------------------------------------*----------------------------------------*/ @media all and (max-width: 767px) { #toggleNav{ position: relative; z-index: 9999; background-color: #fff;} #toggleNav .toggleNav_contents { display: none; } #toggleNav .toggleNav_block { position: relative; z-index: 9999; padding: 10px; background: #fff; } #toggleNav .toggleNav_block + .toggleNav_block { border-top: 1px solid #ccc; } #toggleNav .menu { text-align: left; } } @media screen and (min-width: 768px) { #toggleNav { display: table-cell; text-align: right; padding: 36px 180px 0 0; margin:0 0 0 auto; vertical-align: bottom; } } /*---------------------------------------- toggleNav_btn ----------------------------------------*/ @media all and (max-width: 767px) { #toggleNav .toggleNav_btn { background: #cc0000; color: #fff; position: relative; padding: 10px; } #toggleNav .toggleNav_btn:before, #toggleNav .toggleNav_btn:after { font-family: "FontAwesome"; line-height: 1; } #toggleNav .toggleNav_btn--open:before { margin-right: 1em; content: "\f0c9"; } #toggleNav .toggleNav_btn--close:after { content: "\f00d"; margin-left: 1em; } #toggleNav .toggleNav_btn--opened:before { content: "\f00d"; margin-right: 1em; } #toggleNav .toggleNav_btn--close{ text-align: center; } } @media screen and (min-width: 768px) { #toggleNav .toggleNav_btn { display: none; } } /*---------------------------------------- subNav ----------------------------------------*/ @media all and (max-width: 767px) { #toggleNav .subNav a { display: block; text-decoration: none; background: #fff; position: relative; padding: 13px 15px 10px 15px; color: #333; font-size: 1.4rem; border: 2px solid #cc0000; width: 90%; margin:20px auto 0 auto; } #toggleNav .subNav a:before { position: absolute; top: 50%; right: 15px; margin-top: -.5em; font-family: "FontAwesome"; line-height: 1; content: "\f105"; color: #cc0000; } #toggleNav .subNav .menu--active a { text-decoration: underline; } /* col */ #toggleNav .subNav .menu--col6-sp:nth-child(2) { border-top: none; } #toggleNav .subNav .menu--col6-sp:nth-child(2n), #toggleNav .subNav .menu--col6-sp + .menu--col6-sp, #toggleNav .subNav .menu--col4-sp + .menu--col4-sp, #toggleNav .subNav .menu--col3-sp + .menu--col3-sp, #toggleNav .subNav .menu--col8-sp + .menu--col4-sp, #toggleNav .subNav .menu--col9-sp + .menu--col3-sp { border-left: 1px solid #ccc; } } #toggleNav .sp_tel_toggle{ text-align: center; margin: 10px 0} #toggleNav .sp_help{ text-align: center;} /*----------------------------------------*---------------------------------------- footerNav ----------------------------------------*----------------------------------------*/ @media screen and (max-width: 767px) { #footerNav { font-size: 1.3rem; text-align: left; } #footerNav .menu { border-top: 1px solid #1a1a1a; } #footerNav .menu:first-child { border-top: none; } #footerNav .menu--col6-sp:nth-child(even) { border-left: 1px solid #1a1a1a; } #footerNav a { color: #fff; background: #333; text-decoration: none; display: block; padding: 10px; position: relative; } #footerNav a:before { position: absolute; top: 50%; right: 10px; margin-top: -.5em; font-family: "FontAwesome"; line-height: 1; content: "\f105"; } #footerNav .menu--active a { text-decoration: underline; } } #footerNav .menu--corporate a:before{ font-family: "FontAwesome"; line-height: 1; content: "\f08e"; } @media print, screen and (min-width: 768px) { #footerNav { font-size: 1.4rem; padding: 18px 0; display: inline; } #footerNav ul { letter-spacing: -.4em; } #footerNav li:before{ font-family: "FontAwesome"; content: "\f105"; margin: 0 10px; } #footerNav li:first-child:before{ margin:0 10px 0 0; } #footerNav li { display: inline; letter-spacing: normal; } #footerNav a { color: #ccc; text-decoration: none; font-feature-settings : palt; font-size: 1.0rem; margin-right: 1em; } #footerNav a:hover, #footerNav .menu--active a { text-decoration: underline; } /* corporate link */ #footerNav .menu--corporate a:after { font-family: "FontAwesome"; line-height: 1; content: "\f08e"; padding:0 0 0 5px; } } /*----------------------------------------*---------------------------------------- footer ----------------------------------------*----------------------------------------*/ #footer { background: #000; color: #fff; text-align: left; border-bottom: 1px #000000 solid; } @media all and (max-width: 767px) { #footer { padding: 20px 0 20px 1px; } #footer .container { text-align: center; } } @media screen and (min-width: 768px) { #footer { padding: 40px 0 20px; font-family: "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", "sans-serif";} } #footer .txt_company{ color: #ccc; font-feature-settings : palt; font-size: 1.0rem; font-weight: 900; } @media all and (max-width: 767px) { #footer .txt_company{ margin-top: 25px; } } @media screen and (min-width: 768px) { #footer .txt_company{ margin-top: 70px; } } /*----------------------------------------* footer_info ----------------------------------------*/ #footer .logo { margin-bottom: 10px; } #footer .logo a { color: #cccccc; font-size: 1.2rem; text-decoration: none; font-feature-settings : "palt"; font-weight: 900; } @media screen and (max-width: 767px) { #footer .logo a { width: 280px; height: 22px; } } @media print, screen and (min-width: 768px) { #footer .logo a { } } /*----------------------------------------* address ----------------------------------------*/ @media screen and (max-width: 767px) { #footer address { border-bottom: 1px solid rgba(255,255,255,.5); margin-bottom: 10px !important; } #footer .add { border-bottom: 1px solid rgba(255,255,255,.5); } #footer .add, #footer .contact { padding-top: 10px; padding-bottom: 10px; } } @media print, screen and (min-width: 768px) { #footer address { margin-bottom: 10px;} } /*----------------------------------------* contact ----------------------------------------*/ #footer .tel { line-height: 1; font-weight: 600; } @media screen and (max-width: 767px) { #footer .tel{ background: url(../img/tel_footer_sp.png) no-repeat 50% 0; background-size: contain; height: 20px; margin:0 auto; } #footer .fax{ margin: 5px auto 5px auto; background: url(../img/fax_footer_sp.png) no-repeat 50% 100%; background-size: contain; width: 160px; } #footer .time{ color: #ccc; font-size: 1.1rem; font-weight: 400; font-feature-settings : "palt"; margin: 7px 0; } } @media print, screen and (min-width: 768px) { #footer .tel{ background: url(../img/tel_footer.png) no-repeat 100% 0; display: block; height: 20px; } #footer .contact { margin-bottom: 10px; text-align: right; } #footer .fax{ margin: 0 0 5px 0; background: url(../img/fax_footer.png) no-repeat 100% 100%; height: 20px; } #footer .time{ color: #ccc; font-size: 1.1rem; font-weight: 400; font-feature-settings : "palt"; margin: 7px 0; } } /*----------------------------------------* mail ----------------------------------------*/ @media screen and (max-width: 767px) { #footer .mail{ background: url(../img/btn_mail_footer_sp.png) no-repeat 0 0; background-size: contain; width: 200px; height: 34px; margin:0 auto; } } @media print, screen and (min-width: 768px) { #footer .mail{ background: url(../img/btn_mail_footer.png) no-repeat 0 0; width: 200px; height: 34px; float: right; } #footer .mail:after{ clear: both; } #footer .mail a{ display: block; width: 200px; height: 34px; } #footer .mail:hover{ opacity: .7; } } /*----------------------------------------*---------------------------------------- copyright ----------------------------------------*----------------------------------------*/ .copyright { clear: both; padding:40px 0 0 40px; height: 20px; color: #ccc; font-family: Arial, Helvetica, "sans-serif"; line-height: 20px; font-size: 1.2rem; text-align: right; } @media screen and (max-width: 767px) { .copyright { clear: both; padding:20px 0 85px 0; height: 20px; color: #ccc; font-family: Arial, Helvetica, "sans-serif"; line-height: 20px; font-size: 1.2rem; text-align: center; } } /*----------------------------------------*---------------------------------------- shortcut ----------------------------------------*----------------------------------------*/ #shortcut { font-size: 1.3rem; } #shortcut a { color: #333; text-decoration: none; transition: all .2s linear; position: relative; } #shortcut a:before { font-family: "FontAwesome"; content: "\f107"; } @media all and (max-width: 767px) { #shortcut { text-align: left; margin-bottom: 20px; } #shortcut li + li { border-top: 1px solid #ccc; } #shortcut a { display: block; padding: 10px 15px; background: #f2f2f2; } #shortcut a:before { position: absolute; top: 50%; right: 10px; margin-top: -.5em; line-height: 1; } #shortcut + #contents { margin-top: 20px; } } @media screen and (min-width: 768px) { #shortcut { padding-top: 60px; margin-bottom: 40px; } #shortcut ul { letter-spacing: -.4em; } #shortcut li { display: inline; position: relative; letter-spacing: normal; } #shortcut li + li { margin-left: 20px; } #shortcut a:before { margin-right: 10px; } #shortcut a:hover { color: #f00; } #shortcut + #contents { margin-top: 60px; } } /*----------------------------------------*---------------------------------------- btn fedein (SP) ----------------------------------------*----------------------------------------*/ #btn_fadein { position: fixed; } @media screen and (max-width: 767px) { #btn_fadein { display: none; height: 80px; bottom: 0; width: 100%; } #btn_fadein .row{ margin-bottom: 0;} #btn_fadein .col{ padding-left: 0; padding-right: 0; margin: 0; padding-top: 0; } #btn_fadein a{ display: block; text-align: center; text-decoration: none;} #btn_fadein .btn{ background: #333; padding: 10px 0; margin:0 auto; } #btn_fadein .btn span{ display: block; border-radius: 50%; height: 60px; width: 60px; padding-top: 10px; margin:0 auto;} #btn_fadein i{ display: block; text-align: center; padding-bottom: 5px;} #btn_fadein .mail_ic_foot span{ background: #cc0000; } #btn_fadein .tel_ic_foot span{ background: #ffd200; color: #444;} #btn_fadein .pagetop_ic_foot span{ border:1px solid #666; } #btn_fadein .btn:hover{ background: #555; } } @media print, screen and (min-width: 768px) { #btn_fadein { display: none; } } /*----------------------------------------*---------------------------------------- pageTop ----------------------------------------*----------------------------------------*/ @media print, screen and (min-width: 768px) { #btn_fadein i{ display: block; text-align: center; padding-top: 35px; padding-bottom: 5px; margin-bottom: 0;} #btn_fadein a.pagetop_ic_foot { position: fixed; text-decoration: none; color: #fff; background: rgba(0,0,0,.8); } #btn_fadein .btn{ text-align: center; bottom: 20px; right: 20px; width: 100px; height: 100px; border-radius: 50%; line-height: 1; font-size: 1.3rem; padding: 0; min-width: 100px; } } /* aタグのところ */ .telline{ text-decoration: none;}