@charset "utf-8"; 

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
カスタム投稿　幅固定
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.single-works #main_area {
	width: 1000px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
hover★PCのみアニメーション
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*---contact ボタンhover用---*/
#home_contact p.btn_wrap a:before {
    content: '';
    width: 0;
    height: 100%;
    background: #0467ba;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transition: all 0.5s ease;
    box-shadow: 0 0 0 2px #fff inset;
}

#home_contact p.btn_wrap a:hover:after {
    background: url(https://takacorporation.com/wordpress/wp-content/themes/cyber-child/images/svg/contact_mail02.svg) no-repeat;
}

#home_contact p.btn_wrap a:hover {
    color: #fff;
    border-color: #fff;
    opacity: 1;
    transition: all 0.5s ease;
}

#home_contact p.btn_wrap a:hover:before {
    width: 100%;
    height: 100%;
    left: 0;
    transition: all 0.5s ease;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
キーフレームアニメーション「ゆらゆら」
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes yurayura {
    0% {
        transform: translateY(-3px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ヘッダー(インフォメーション)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#header_frame {
    border-top: 10px solid #0467ba;
    position: relative;
}

#header_frame div.pc_base_width {
    position: relative;
}

#header_frame .logo {
    display: none;
    width: 214px;
    position: absolute;
    top: 35px;
    left: -70px;
}

#header_frame > .inner {
    padding: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ヘッダー　＞　右上
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#header_right_section div.textwidget {
    display: flex;
    align-items: center;
}

#header_right_section p.lead {
    font-size: 14px;
    font-weight: bold;
}

#header_right_section p.lead:before {
    content: '';
    width: 2px;
    height: 22px;
    display: inline-block;
    background-color: #0467ba;
    vertical-align: middle;
    transform: rotate(-35deg);
    margin-right: 15px;
}

#header_right_section p.lead:after {
    content: '';
    width: 2px;
    height: 22px;
    display: inline-block;
    background-color: #0467ba;
    vertical-align: middle;
    transform: rotate(35deg);
    margin: 0 20px 0 7px;
}

#header_right_section p.tel {
    font-size: 30px;
    font-weight: bold;
    font-family: 'Lato', sans-serif;
}

#header_right_section p.tel:before {
    content: "\e900";
    font-family: "icomoon";
    font-size: 26px;
    color: #efba19;
    font-weight: normal;
    margin-right: 5px;
}

#header_right_section p.link {
    min-width: 235px;
    min-height: 55px;
    margin-left: 30px;
}

#header_right_section p.link a {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0467ba;
    border: 2px solid #0467ba;
    color: #fff;
    font-size: 16px;
    margin-top: -2px;
    padding: 15px;
    position: relative;
    z-index: 0;
}

/*---ボタンhover用---*/
#header_right_section p.link a:before {
    content: '';
    width: 0%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transition: all 0.4s ease;
}

#header_right_section p.link a:hover {
    color: #0467ba;
    border-color: #0467ba;
    transition: all 0.3s ease;
    text-decoration: none;
}

#header_right_section p.link a:hover:before {
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
    left: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
グローバルナビ（下段／c親のスタイル）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#header_fixed_zone.fix_exe {
    border-bottom: 1px solid #dbe8f0;
}

#header_fixed_zone.fix_exe #h_navi_main .logo {
    display: flex;
    align-items: flex-end;
    width: 150px;
    margin-bottom: 21px;
}

#header_fixed_zone.fix_exe .inner > ul {
    width: calc(100% - 180px);
    margin: 0 -15px 0 15px;
}

/* logoの高さをナビ文字に合わせるため、padding足した */
#h_navi_main {
    background-color: #fff;
    padding-top: 3px;
}

#h_navi_main .inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#h_navi_main .inner > ul {
    width: calc(100% - 220px);
}

#h_navi_main ul:not(.sub-menu) > li {
    z-index: 2;
}

/* ドロップダウンする子ナビを母体から離した際の架け橋 */
#h_navi_main ul:not(.sub-menu) > li:hover:not(:first-child):before {
    content: '';
    width: 130%;
    height: 50px;
    position: absolute;
    left: calc(50% - 65%);
    bottom: -50px;
    /* background:red; */
}

#h_navi_main ul:not(.sub-menu) > li > a {
    color: #000;
    padding: 10px 10px 17px;
    width: 100%;
    flex-direction: column;
    font-weight: bold;
    justify-content: flex-end;
}

#h_navi_main ul:not(.sub-menu) > li[class*='current'] > a {
    color: #000;
    background: transparent;
}

#h_navi_main ul:not(.sub-menu) > li > a:hover {
    background: transparent;
    color: #0467ba;
}

/*----ナビアイコン----*/
#h_navi_main .icon-home1:before {
    display: none;
}

#h_navi_main ul > li.home {
    display: none;
}

#h_navi_main ul:not(.sub-menu) > li > a:before {
    display: flex;
    justify-content: center;
    align-items: center;
    content: "";
    width: 35px;
    height: 35px;
    margin: 0 auto 10px;
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 100% auto;
}

#h_navi_main ul > li.concept > a:before {
    background-image: url(https://takacorporation.com/wordpress/wp-content/themes/cyber-child/images/svg/nav_house.svg);
    background-size: 31px 29px;
}

#h_navi_main ul > li.renovation > a:before {
    background-image: url(https://takacorporation.com/wordpress/wp-content/themes/cyber-child/images/svg/nav_roller.svg);
    background-size: 31px 32px;
}

#h_navi_main ul > li.safe > a:before {
    background-image: url(https://takacorporation.com/wordpress/wp-content/themes/cyber-child/images/svg/nav_heart.svg);
    background-size: 30px 27px;
}

#h_navi_main ul > li.works-link > a:before {
    background-image: url(https://takacorporation.com/wordpress/wp-content/themes/cyber-child/images/svg/nav_hammer.svg);
    background-size: 26px 31px;
}

#h_navi_main ul > li.blog > a:before {
    background-image: url(https://takacorporation.com/wordpress/wp-content/themes/cyber-child/images/svg/nav_blog.svg);
    background-size: 27px 32px;
}

#h_navi_main ul > li.company > a:before {
    background-image: url(https://takacorporation.com/wordpress/wp-content/themes/cyber-child/images/svg/company.svg);
    background-size: 31px 27px;
}

#h_navi_main ul > li.contact > a:before {
    background-image: url(https://takacorporation.com/wordpress/wp-content/themes/cyber-child/images/svg/nav_mail.svg);
    background-size: 34px 27px;
}

#h_navi_main ul > li > a:hover:before {
    animation: yurayura .3s -1s ease-in-out infinite alternate;
}

/*---ナビhover---*/
#h_navi_main ul:not(.sub-menu) > li > a:hover, #h_navi_main ul:not(.sub-menu) > li[class*="current"] > a {
    color: #0467ba;
}

#h_navi_main ul:not(.sub-menu) > li.current_page_item > a:after, #h_navi_main ul:not(.sub-menu) > li.current_page_parent > a:after {
    bottom: 15px;
    opacity: 1;
}

#h_navi_main ul:not(.sub-menu) >*:not(.current_page_item) > a:after, #h_navi_main ul:not(.sub-menu) >*:not(.current_page_parent) > a:after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 70%;
    height: 1px;
    background: #0467ba;
    opacity: 1;
    -webkit-transition: all .8s cubic-bezier(.19,1,.22,1);
    transition: all .8s cubic-bezier(.19,1,.22,1);
    -webkit-transition-timing-function: cubic-bezier(.19,1,.22,1);
    transition-timing-function: cubic-bezier(.19,1,.22,1);
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    opacity: 0;
}

#h_navi_main ul:not(.sub-menu) > li:not(.current_page_item) > a:hover:after, #h_navi_main ul:not(.sub-menu) > li:not(.current_page_parent) > a:hover:after {
    opacity: 1;
    -webkit-transform: translateY(0);
}

#h_navi_main ul > li[class*='current'] > a:after, #h_navi_main ul > li:hover > a:after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 70%;
    height: 1px;
    background: #0467ba;
    opacity: 1;
    -webkit-transition: all .8s cubic-bezier(.19,1,.22,1);
    transition: all .8s cubic-bezier(.19,1,.22,1);
    -webkit-transition-timing-function: cubic-bezier(.19,1,.22,1);
    transition-timing-function: cubic-bezier(.19,1,.22,1);
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    opacity: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
グローバルナビ（下段）子ナビ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#h_navi_main ul > li {
    position: relative;
}

#h_navi_main ul.sub-menu {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -112px;
    margin-top: 7px;
    background-color: rgba(4, 103, 186,.9)!important;
    min-width: 225px;
    width: auto;
    text-align: center;
    padding: 10px 0;
}

#h_navi_main ul li:hover ul.sub-menu {
    display: block;
}

/* ドロップダウンする子ナビを母体から離した際の架け橋 */
#h_navi_main ul:not(.sub-menu) > li:hover:not(:first-child):before {
    content: '';
    width: 100%;
    height: 50px;
    position: absolute;
    left: 0;
    bottom: -50px;
    /* background:red; */
}

#h_navi_main ul.sub-menu:before {
    content: "";
    position: absolute;
    left: 50%;
    top: -20px;
    margin-left: -10px;
    border-width: 10px;
    border-color: transparent;
    border-style: solid;
    border-bottom-color: rgba(4, 103, 186,.9);
    z-index: 10;
}

#h_navi_main ul.sub-menu > li {
    min-width: 225px;
    width: auto;
}

#h_navi_main ul.sub-menu > li:not(:first-child):before {
    content: "";
    width: 90%;
    height: 1px;
    background: rgba(255, 255, 255, .3);
    display: block;
    position: absolute;
    top: 0;
    margin-top: 0px;
    left: 5%;
}

#h_navi_main ul.sub-menu > li > a {
    display: block;
    width: 100%;
    color: #fff;
    padding: 20px 30px;
    font-size: 14px;
    font-weight: normal;
}

#h_navi_main ul.sub-menu > li > a:hover {
    background: rgba(5, 85, 153, 0.9);
    text-decoration: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

ディスプレイ右サイドの固定エリア
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#side_fixed_zone dl.f_wrap {
    display: flex;
    position: fixed;
    top: calc(50% - 171px);
    right: 0;
    z-index: 999;
    transition: right .5s;
    flex-wrap: nowrap;
}

#side_fixed_zone dl.close {
    right: -250px;
}

#side_fixed_zone dl.f_wrap dt {
    cursor: pointer;
}

#side_fixed_zone dl.f_wrap dt p {
    width: 57px;
    height: 237px;
    background: url(https://takacorporation.com/wordpress/wp-content/themes/cyber-child/images/widget_dt.jpg) no-repeat #efba19;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

#side_fixed_zone dl.f_wrap dt:before {
    content: '';
    width: 72px;
    height: 69px;
    background: url(https://takacorporation.com/wordpress/wp-content/themes/cyber-child/images/hammer.png) no-repeat;
    display: block;
    position: absolute;
    top: -60px;
    left: -21px;
    z-index: -1;
}

#side_fixed_zone dl.f_wrap dd {
    max-width: 250px;
    background: #fff;
    border: 2px solid #efba19;
    border-right: none;
    padding: 35px 25px;
}

div#side_fixed_zone p.toggle {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

div#side_fixed_zone p.toggle:after {
    content: '';
    display: inline-block;
    transform: rotate(45deg);
    content: "\e92d";
    font-family: "icomoon";
    font-size: 24px;
    line-height: 1;
    color: #efba19;
    position: absolute;
    right: 0;
    top: 0;
    width: 25px;
    height: 25px;
}

#side_fixed_zone dl.f_wrap dd:before {
    content: '';
    background: url(https://takacorporation.com/wordpress/wp-content/themes/cyber-child/images/fukidashi.jpg) no-repeat;
    width: 206px;
    height: 94px;
    display: block;
}

#side_fixed_zone dl.f_wrap dd p.tel:before {
    content: "\e900";
    font-family: "icomoon";
    font-size: 18px;
    color: #efba19;
    font-weight: normal;
}

#side_fixed_zone dl.f_wrap dd p.tel {
    font-size: 22px;
    font-weight: bold;
    font-family: 'Lato', sans-serif;
    margin: 5px 0 10px;
}

#side_fixed_zone dl.f_wrap dd p.open {
    font-size: 14px;
    margin-bottom: 25px;
    line-height: 1.8;
}

#side_fixed_zone dl.f_wrap dd a.btn01 {
    min-width: 205px;
    min-height: 53px;
    padding: 15px;
}

#side_fixed_zone dl.f_wrap dd a.btn01:after {
    display: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フッター(ナビ)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div#f_navi_wrap {
    background: #d2e8fa;
    padding: 25px 0 25px;
}

div#f_navi_wrap ul.sub-menu {
    list-style-type: none;
}

div#f_navi_wrap ul.sub-menu a {
    position: relative;
}

div#f_navi_wrap ul.sub-menu a:before {
    content: '';
    width: 5px;
    height: 5px;
    display: inline-block;
    background: #0467ba;
    border-radius: 50%;
    vertical-align: middle;
    position: absolute;
    top: calc(50% - 2.5px);
    left: -17px;
}

div#f_navi_wrap ul.sub-menu li {
    margin-top: 0;
}

div#f_navi_wrap ul.sub-menu li:first-child {
    margin-top: 0;
}

div#f_navi_wrap a {
    color: #0467ba;
}

div#f_navi_wrap ul:not(.sub-menu) > li:not(.home) > a:before {
    background: #0467ba;
}

div#f_navi_wrap .pc_base_width2 {
    padding: 0 30px;
}

div#f_navi_other > * {
    padding: 0 30px;
    border-top: 0;
    margin-top: 10px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フッター　＞　インフォメーションエリア
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div#footer_info {
    padding: 30px 10px 6px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フッター　＞　コピーライトのエリア
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div#copy_area, div#copy_area a {
    padding: 0 0 15px;
    color: #000;
}