/* Theme Name: TandT Theme URI: Author: Author URI: Description: Version: 1.0 License: License URI: Tags: Text Domain: */ @charset "UTF-8"; /*-------------------------------------------------- ************************************************** リセット ************************************************** --------------------------------------------------*/ /* 内で html5reset.css を読み込んでます */ /*-------------------------------------------------- ************************************************** デフォルト ************************************************** --------------------------------------------------*/ /* 内で default.css を読み込んでます */ /*-------------------------------------------------- ************************************************** 基本 ************************************************** --------------------------------------------------*/ body { margin:0px; padding:0px; background:none repeat scroll 0% 0%; background-attachment:scroll; font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 游ゴシック体, 'Yu Gothic', YuGothic, メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; line-height: 1.6; letter-spacing: 0.8px; font-size: 14px; font-weight: 400; color:#333; } .contents_inner{ width:98%; margin-left:auto; margin-right:auto; } h2.common { font-size: 24px; font-family: 'Lato', sans-serif; border-bottom: 1px solid #aaa; display: block; width: 250px; text-align: center; margin: 0 auto; padding-bottom: 8px; color: #4c95c4; } /*-------------------------------------------------- ************************************************** テキスト・フォント ************************************************** --------------------------------------------------*/ em { color: #e58c93; font-weight: normal; font-style: normal; } .red { color:#cc0000;} .blue { color:#0000ff;} .green { color:#008000;} .black { color:#000; } .white { color:#fff; } /*-------------------------------------------------- ************************************************** リンク系（アンカー） ************************************************** --------------------------------------------------*/ a { color: #24318F; text-decoration: none; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } a:hover { color: #24318F; text-decoration: none; } a svg{ display: block; width: 200px; height: 42px; margin: 0 auto; transition: 0.5s; } a svg:hover { -ms-filter: "alpha( opacity=80 )"; filter: alpha( opacity=80 ); opacity: 0.8; transition: 0.5s; } /* -- CSSで画像を整形していたら -- */ a.opa:hover { -ms-filter: "alpha( opacity=80 )"; filter: alpha( opacity=80 ); opacity: 0.8; transition: 0.5s; } /* ボタン系 01 */ .btn_arrow_01{ display:block; width:90%; height:50px; margin-right:auto; margin-left:auto; padding:12px 0 12px 15px; background:#009fc8 url("imgs/other/arrow_01.png") no-repeat 10px center; border:#fff 3px solid; border-radius:4px; font-size:13px; text-align:center; -webkit-box-shadow:7px 6px 10px -7px #000000; box-shadow:7px 6px 10px -7px #000000; color:#fff; } .btn_arrow_01:hover{ text-decoration:none; background-color:#007290; color:#fff; } /*-------------------------------------------------- ************************************************** ヘッダー ************************************************** --------------------------------------------------*/ #top_header { position: absolute; top: 0; width: 100%; z-index: 9999; } #header_content { padding: 0 2%; background: rgba(0,0,0,0.7); } #logo { padding: 5px 0; } #logo img { width: auto; height: 30px; display: block; } .h_spmenu_btn { position: absolute; display: block; right: 3%; top: 13px; width: 30px; height: 28px; border-top: 13px solid transparent; border-bottom:13px solid transparent; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s; } .h_spmenu_btn .center_line{ display: block; height: 2px; background: #fff; opacity: 1; transition:all 0.3s; } .h_spmenu_btn:before { content:''; position:absolute; width: 30px; height: 2px; background:#FFF; top: -13px; right:0; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s; } .h_spmenu_btn:after { content:''; position:absolute; width: 30px; height:2px; background:#FFF; bottom: -13px; right:0; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s; } .h_spmenu_btn.active { } .h_spmenu_btn.active .center_line{ opacity: 0; } .h_spmenu_btn.active:before { -moz-transform:rotate(-135deg); -webkit-transform:rotate(-135deg); transform:rotate(-135deg); top:0; right:0; } .h_spmenu_btn.active:after { -moz-transform:rotate(135deg); -webkit-transform:rotate(135deg); transform:rotate(135deg); bottom:0; right:0; } /*-------------------------------------------------- ************************************************** グローバルナビゲーション ************************************************** --------------------------------------------------*/ #gnavi_sp { display: none; width: 100%; position: absolute; z-index: 9999; top: 65px; } #gnavi_sp li { width: 100%; border-top: 1px solid rgba(255,255,255,0.6); } #gnavi_sp li a { color: #fff; padding: 10px 2%; display: block; background: rgba(40,120,200,0.7); position: relative; } #gnavi_sp > li:first-child { border-top: none; } #gnavi_sp li a:after { display: block; content: ""; position: absolute; top: 50%; right: 4%; width: 6px; height: 6px; margin: -4px 0 0 0; border-top: solid 1px #FFF; border-right: solid 1px #FFF; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #gnavi_sp li.menu_links { color: #fff; padding: 10px 2%; display: block; background: rgba(40,120,200,0.7); position: relative; } #gnavi_sp .sub_menu li{ border-top: 1px dashed rgba(255,255,255,0.4); } #gnavi_sp li.menu_links span { background-image: url("imgs/common/sp_menu_open.png"); background-position: 100% 50%; background-repeat: no-repeat; background-size: 18px 18px; display: block; } #gnavi_sp li.menu_links span.select { background-image: url("imgs/common/sp_menu_close.png"); } .sub_menu { display: none; } #gnavi_sp ul ul li a:before { content: "-"; margin-right: 5px; } /*-------------------------------------------------- ************************************************** パンくず ************************************************** --------------------------------------------------*/ #breadcrumb { margin-top: 10px; padding: 8px 0; font-size: 12px; white-space: nowrap; overflow: auto; border-bottom: 1px solid #efefef; } /*-------------------------------------------------- ************************************************** メインコンテンツ ************************************************** --------------------------------------------------*/ /* -- 下層共通 h1 -- */ .page_catch { box-shadow: 1px 3px 6px rgba(51,51,51,0.3); } .page_catch h1 { text-align: center; font-size: 24px; font-family: "Lato"; padding-top: 70px; text-shadow: 0 1px rgba(255,255,255,1); } /* -- .page_catch h1 span { display: block; font-size: 14px; font-weight: normal; } -- */ /* -- 下層共通 h1 フィールドタイプ -- */ .page_catch_area{ padding-top: 70px; box-shadow: 1px 3px 6px rgba(51,51,51,0.3); } .page_catch_area p { padding: 0 10px 10px; font-size: 13px; width: 98%; margin: 0 auto; background: rgba(255,255,255,0.6); text-align: center; } h1.sub_title { text-align: center; font-size: 18px; font-family: "Lato"; color: #4c95c4; } h1.sub_title span { display: block; font-size: 14px; font-weight: normal; color: #333333; } h2.sub_title { font-size: 16px; font-family: "Lato"; padding-bottom: 15px; margin-top: 20px; background: url(imgs/common/border_bg.gif); background-size: 50px 1px; background-repeat: no-repeat; background-position: center bottom; color: #24318F; text-align: center; } h2.sub_title span { display: block; font-size: 14px; font-weight: normal; } h1 span, h2 span, h3 span { font-family: "ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro",游ゴシック体,"Yu Gothic",YuGothic,メイリオ,Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; } /*-------------------------------------------------- ************************************************** サブコンテンツ ************************************************** --------------------------------------------------*/ /* -- なし -- */ /*-------------------------------------------------- ************************************************** フッター ************************************************** --------------------------------------------------*/ /* -- Recruit -- */ #recruit { background: #ebebeb; } #recruit .recruit_box { width: 100%; height: 300px; background: url(imgs/common/contact_bg_sp.jpg) center center / cover no-repeat; } .recruit_box .recruit_content { width: calc(100% - 20px); margin: 50px auto 0 auto; } .recruit_box .recruit_content p:nth-child(2){ font-size: 13px; line-height: 20px; padding: 10px 15px; background: rgba(255,255,255,0.6); } .recruit_content .title { display: block; width: 140px; font-size: 24px; font-family: 'Lato', sans-serif; margin: 0 auto; padding-bottom: 10px; border-bottom: 1px solid #aaa; line-height: 1.2em; color: #4c95c4; } #recruit .link_btn a { border: 1px solid #999; color: #fff; width: 260px; display: block; text-align: center; padding: 12px 0; position: relative; margin: 0 auto; overflow: hidden; background: rgba(172, 6, 6, 0.85); } #recruit .link_btn a:after { display: block; content: ""; position: absolute; top: 52%; right: 12px; width: 6px; height: 6px; margin: -4px 0 0 0; border-top: solid 1px #fff; border-right: solid 1px #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #company_info { background: #333333; padding: 20px 0; color: #FFF; } #company_info a { color: #FFF; } .f_logo { width: 40%; margin: 0 auto; } .f_logo a img { width: 100%; display: block; } .f_address, .f_Tel, .f_mail { margin-top: 10px; display: table; width: 100%; } .f_address .icon, .f_Tel .icon, .f_mail .icon { display: table-cell; width: 12%; text-align: center; } .f_address img, .f_Tel svg, .f_mail svg { vertical-align: middle; padding-top: 6px; padding-left: 6px; display: block; margin: 0 auto; } .f_address p, .f_Tel p, .f_mail p { display: table-cell; padding-left: 4%; vertical-align: middle; width: 88%; } .f_mail p a { border-bottom: 1px solid; padding-bottom: 1px; } footer { padding: 30px 0 0 0; background: #888888; } footer a { color: #FFF; letter-spacing: 0.2em; } #footer_inner { width: 100%; } #footer_inner ul { vertical-align: top; width: 100%; margin: 0 auto; letter-spacing: -0.4em; } #footer_inner ul:first-child { margin-top: 10px; } #footer_inner ul li { display: inline-block; width: calc(50% - 1px); height: 50px; margin-bottom: 1px; line-height: 50px; letter-spacing: normal; background: rgba(255,255,255,0.1); overflow: hidden; box-sizing: border-box; } #footer_inner ul li:nth-child(2n + 1) { margin-right: 2px; } #footer_inner ul li a { position: relative; display: block; width: 100%; height: 100%; padding-left: 10px; font-size: 13px; letter-spacing: 0; } #footer_icon { text-align: center; width: 50%; margin: 30px auto 0; } #footer_icon div { display: inline-block; } #footer_icon div img { width: 80%; display: block; } #copyright { width: 100%; padding: 20px 0; color: #fff; letter-spacing: 0.1em; font-size: 85%; } .spmenu_btn { position: relative; display: block; margin: 0 auto; width:30px; height:22px; background:#FFF; border-top:10px solid #000; border-bottom:10px solid #000; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s; } .spmenu_btn:before { content:''; position:absolute; width:30px; height:2px; background:#FFF; top:-9px; right:0; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s; } .spmenu_btn:after { content:''; position:absolute; width:30px; height:2px; background:#FFF; bottom:-9px; right:0; -moz-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s; } .spmenu_btn.active { background:#000; } .spmenu_btn.active:before { -moz-transform:rotate(-135deg); -webkit-transform:rotate(-135deg); transform:rotate(-135deg); top:0; right:0; } .spmenu_btn.active:after { -moz-transform:rotate(135deg); -webkit-transform:rotate(135deg); transform:rotate(135deg); bottom:0; right:0; } .spmenu { } #footer_inner .f_title { color: #FFF; font-family: "LATO"; border-bottom: 1px solid; padding-bottom: 3px; margin: 15px 0; } /*-------------------------------------------------- ************************************************** その他 (PageUpボタン 追従系 jsに関わるcssなど。) ************************************************** --------------------------------------------------*/ #pageup { bottom: 25px; position: fixed; right: 25px; } #pageup img { width: 60px; height: auto; display: block; } #pageup a svg { width: 45px; }