/******************************************************************
Site Name:mitunaga
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.

Helpful articles on Sass file organization:
http://thesassway.com/advanced/modular-css-naming-conventions

******************************************************************/


strong,
.strong {
    font-weight: bold;
}

small,
.small {
    font-size: 75%;
}

.slick-slide img {
    display: block;
    width: 100%;
    height: auto;
}

/* ==========================================================================
  Lists
========================================================================== */

/*
 * Addresses margins set differently in IE6/7.
 */

dl,
menu,
ol,
ul {
    margin: 0em 0;
}

dd {
    margin: 0;
}

/*
 * Addresses paddings set differently in IE6/7.
 */

menu {
    padding: 0 0 0 40px;
}

ol,
ul {
    padding: 0;
    list-style-type: none;
}

/*
 * Corrects list images handled incorrectly in IE7.
 */

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

* {
    box-sizing: border-box;
}

.image-replacement,
.ir {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.clearfix,
.cf,
.comment-respond {
    zoom: 1;
}

.clearfix:before,
.clearfix:after,
.cf:before,
.comment-respond:before,
.cf:after,
.comment-respond:after {
    content: "";
    display: table;
}

.clearfix:after,
.cf:after,
.comment-respond:after {
    clear: both;
}

.pc_only {
    display: none;
}



.mb_only {
    display: block;
}

.res img {
    max-width: 100%;
}

.res_mini img {
    max-width: 100%;
}

.res80 img {
    max-width: 80%;
}

.res65 img {
    max-width: 65%;
}

.res_mini img {
    max-width: 100%;
}

/*********************

BASE (MOBILE) SIZE
This are the mobile styles. It's what people see on their phones. If
you set a great foundation, you won't need to add too many styles in
the other stylesheets. Remember, keep it light: Speed is Important.
*********************/

/******************************************************************
Site Name:
Author:

Stylesheet: Base Mobile Stylesheet

Be light and don't over style since everything here will be
loaded by mobile devices. You want to keep it as minimal as
possible. This is called at the top of the main stylsheet
and will be used across all viewports.

******************************************************************/

/*********************
GENERAL STYLES
*********************/

body {
    font-family: 'Noto Sans JP',"游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial,serif;
    font-size: 16px;
    line-height: 1.8em;
    color: #222222;
    letter-spacing: 0.10em;
    -webkit-font-smoothing: antialiased;
    margin: 0;padding: 0;
}


/*********************
LAYOUT & GRID STYLES
*********************/

.wrap {
    width: 96%;
    margin: 0 auto;
}

.newwrap {
    width: 96%;
    margin: 0 auto;
}

.wrap_small {
    width: 96%;
    margin: 0 auto;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.bgwhite {
    background: #fff;
}

.mb15 {
    margin-bottom: 15px!important;
}

.mb30 {
    margin-bottom: 30px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb50 {
    margin-bottom: 50px;
}

.mb60 {
    margin-bottom: 60px;
}

.mb70 {
    margin-bottom: 70px;
}
.mb80 {
    margin-bottom: 80px;
}
.mb100 {
    margin-bottom: 100px;
}
.mt50 {
    margin-top: 50px;
}

.mt60 {
    margin-top: 60px;
}

.mt70 {
    margin-top: 70px;
}

.mt100 {
    margin-top: 100px;
}

.p0{padding-left: 0;padding-right: 0;}
@media only screen and (min-width: 769px) {

    .wrap {
        max-width: 1100px;
    }

    .pc_only {
        display: block!important;
    }

    .mb_only {
        display: none!important;
    }
}

@media screen and (max-width:768px) {

    .wrap {
        width: 88%;
        margin: 0 auto;
    }
}
/*********************
LINK STYLES
*********************/

a,
a:visited {
    color: #333333;
    text-decoration: none;
    -webkit-transition: all .2s;
    transition: all .2s;
    /* on hover */
    /* on click */
    /* mobile tap color */
}

a:hover,
a:focus,
a:visited:hover,
a:visited:focus {
    color: #666666;
    text-decoration: none;
}

a:hover img,
a:focus img {
    opacity: .8;
    -webkit-transition: all .2s;
    transition: all .2s;
}

a:link,
a:visited:link {
    /*
    this highlights links on iPhones/iPads.
    so it basically works like the :hover selector
    for mobile devices.
    */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}

.center {
    text-align: center;
}

.breadcrumbs a {
    color: #666;
}

.breadcrumbs a:hover {
    color: #999;
    text-decoration: underline;
}
p,li,dt,dl {
    line-height:1.6;
}
p {
    margin:0 0 1em 0;
}
li {
    list-style-type:none;
}
/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
    text-rendering: optimizelegibility;
    font-weight: 600;
    margin: 0 0 1em 0;

    /*
  if you're going to use webfonts, be sure to check your weights
  http://css-tricks.com/watch-your-font-weight/
  */
    /* removing text decoration from all headline links */
}

h1 a,
.h1 a,
h2 a,
.h2 a,
h3 a,
.h3 a,
h4 a,
.h4 a,
h5 a,
.h5 a {
    text-decoration: none;
}

h1,
.h1 {
    font-size: 2.5em;
    line-height: 1.333em;
}

h2,
.h2 {
    font-size: 1.75em;
    line-height: 1.4em;
    margin-bottom: 0.375em;
}

h3,
.h3 {
    font-size: 1.125em;
}

h4,
.h4 {
    font-size: 1.1em;
}

h5,
.h5 {
    font-size: 0.846em;
    line-height: 2.09em;
    text-transform: uppercase;
    letter-spacing: 2px;
}

i {
    margin-right: 5px;
}

.a-left {
    text-align: left;
    padding: 0 20px;
}
.center {
    text-align: center !important;
}

.left {
    text-align: left !important;
}

.right {
    text-align: right !important;
}

/*********************
button STYLES
*********************/
.org_btn a{
display: inline-block;
background: url(images/svg/arrow.svg) no-repeat #ffde00;
background-size: 15px 15px;
background-position: 20px 17px;
/* padding-left: 35px; */
text-align: left;
color: #5b4d48;
padding: 10px 35px 10px 70px;
    margin-bottom: 30px;

}

.submitbtn{
    display: inline-block;
    background: url(images/svg/arrow.svg) no-repeat #ffffff;
    background-size: 15px 15px;
    background-position: 20px 18px;
    /* padding-left: 35px; */
    text-align: center;
    color: #111111;
    font-weight: 500;
    padding: 15px 35px 15px 70px;
    margin-bottom: 15px;
    border: 1px solid #999999;
    width: 100%;
    transition: 0.4s;
}
.submitbtn:hover{
opacity: 0.9;
    background-position: 25px 18px;

}


.contact_btn{
    display: table;
    text-align: center;
    color: #111111;
    font-weight: 500;
    margin: 0 auto 15px;
    transition: 0.4s;
}
.contact_btn:hover{
    opacity: 0.8;
    background-position: 25px 18px;

}

.contact_btn
input:matches( [type="button"], [type="submit"], [type="reset"])
{
    border: none;
    background: none;
    color: #222222;
    padding: 15px 65px 15px 70px;
    background: url(images/svg/arrow.svg) no-repeat #ffdb00;
    background-size: 15px 15px;
    background-position: 20px 20px;
    border: 1px solid #999999;

}

.btnwdh{width: 50%;margin: 0 auto;}
.house_btn{width: 100%;
text-align: center;}
.house_btn a{
    width: 100%;
    flex: 1 1 auto;
    margin: 0px;
    border: 1px solid #cccccc;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    overflow:hidden;
    transition: .3s;
    display: inline-block;
    background: url(images/svg/arrow.svg) no-repeat;
    background-size: 15px 15px;
    background-position: 20px 20px;
    /* padding-left: 35px; */
    color: #333333;
    padding: 15px 35px 15px 70px;
    font-weight: 600;
}
.house_btn a:after {
    position: absolute;
    transition: .3s;
    content: '';
    width: 0;
    left: 50%;
    bottom: 0;
    height: 55px;
    background: #a6d3f4;
    left: 0;
    z-index: -5;

}

.house_btn a:hover:after {
    width: 100%;
    left: 0;
}



@media only screen and (max-width: 768px) {

    .org_btn a{
        width: 100%;
        text-align: center;
    }
.btnwdh {
        width: 100%;
        margin: 0 auto;
    }
}
/*********************
HEADER STYLES
*********************/

#header {}



#logo {
    margin: 20px 0 0px;
    float: left;
    line-height: 0em;
    width: 48%;
}
#logo img{
    width: 270px;
    height: auto;
}
#logo span {font-weight: 400;
    font-size: 25%;
    line-height: 1em;
    margin-bottom: 6px;
    display: block;
    color: #333333;
    letter-spacing: 0;
    line-height: 1.4em;
}

#logo a {

}


.breadcrumbs {
    margin: 10px auto 30px;
}

.header_back{
    background: #0073c6;
    margin-top: 8px;
}
.header_back nav ul{
    border-left: 1px solid #55abe9;
}
.header_back nav li{
    flex-basis: 16.666%;
    border-right: 1px solid #55abe9;
}
.header_back nav ul#menu-global {
    display: flex;
    justify-content: center;
}
.header_back a{ color: #ffffff;
    text-align: center;
    display: block;
    font-size: 95%;
    padding: 15px 0;
    transition: 0.4s;
}
.header_back a:hover{ color: #eeeeee;
    background: #55abe9;
}
.currentone a{
    color: #eeeeee;
    background: #55abe9;


}
.header_left{
    float: right;
    width: 52%;
    margin-top: 3px;

}
.hl_head{display: flex;
    justify-content: flex-end;
    margin-bottom: 0px;
margin-top: 10px;}
.hl_head li{
    margin-right: 3%;
    font-size: 85%;
}
.hl_head li:last-child{
margin-right: 0;}
h2.headphone{
    display: flex;
    margin: 0;
    padding: 0;
}
h2.headphone p{
    font-size: 40%;
    line-height: 1.2em;
    letter-spacing: 0;
    background: #f47900;
    color: #ffffff;
    padding: 5px;
    margin-right: 15px;
    margin-bottom: 3px;
    position: relative;
    display: inline-block;

}
h2.headphone p:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border: 5px solid transparent;
    border-left: 5px solid #f47900;
}
.topmail {
    margin: 0 auto;
    text-align: center;
    background: #f47900;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    text-align: center;
    color: #ffffff;
    line-height: 1em;
    font-size: 135%;

}
.topmail p {
    transform: translateY(10px);
    margin: 0 auto;
    line-height: 1.2em;
    font-size: 50%;
    font-weight: 600;
}
.topmail i{
    margin: 0 auto;
    display: block;
    font-size: 290%;
}
.hl_head li a:hover .topmail{background: #359ae3;}

.hl_btm{

    /* width: 40%; */
    float: right;
    width: 100%;
    font-size: 12px;
    text-align: right;
}





@media only screen and (max-width: 1030px) {
    #logo {width: 42%;}
    .header_left {
        float: right;
        width: 56%;
    }
    #logo span {

        line-height: 1.4em;
        margin-bottom: 15px;
    }
    .hl_head {

        margin-bottom: 5px;
        margin-top: 5px;
    }



}
@media only screen and (max-width: 768px) {
    #header {
        width: 100%;
        height: 60px;
        background: #ffffff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9000;
    }
    #logo img {
        width: 175px;
        height: auto;
    }
    #logo{
    margin: 15px 0 3px;
    }
}


/*********************
NAVIGATION STYLES
*********************/

#navid{
    position:relative;
    font-weight: 700;
    z-index: 1;

}
#slide-line {
    background:#0073c6;
    height:5px;
    position:absolute;
    bottom: 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}


#menu-global-1{
    display: flex;
    justify-content: space-around;
    margin: 0px auto ;
}


#menu-global-1 li {
    position: relative;
}




#navid  ul li .sub-menu {
    transition: all .2s ease-in;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    width: ;
    text-align: center;
    position: absolute;
    background-color: #ffffff;
    top: 54px;
    margin-left: 0px;
    border: none;

}
#navid  ul li .sub-menu li{border: none;}
#navid   ul  li:hover .sub-menu {
    max-height: 9999px;
    opacity: 1;
}
/*
#navid  ul li .menu .menu_inner{
    color: #ffffff;
    display: block;
}
*/

#navid  ul li .sub-menu li{
    margin: 0;

}
#navid  ul li .sub-menu li a{
    padding: 13px 20px;
    display: block;
    color: #0073c6;
    text-align: left;
    min-width: 182px;
    box-sizing: border-box;
}
#navid  ul li .sub-menu li a:hover{
    background: #0073c6;
    color: #ffffff;

}





.drawer-menu {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #0151ca;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: perspective(500px) rotateY(-90deg);
    transform: perspective(500px) rotateY(-90deg);
    opacity: 0;
}

/* チェックボックスを非表示 */
.check {
    display: none;
}


/* チェックボックスオンの時 */
.check:checked ~ .drawer-menu {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1;
}

/* メニューボタン(label) */
.menu-btn {
    position: fixed;
    display: block;
    top: 10px;
    right: 10px;
    display: block;
    width: 40px;
    height: 40px;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
    z-index: 3;
    border: 1px solid #999999;
    color: #999999;
}

.bar {
    position: absolute;
    top: 10px;
    left: 6px;
    display: block;
    width: 28px;
    height: 1px;
    background: #999999;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;

}

.bar.middle {
    top: 18px;
    opacity: 1;
}

.bar.bottom {
    top: 26px;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
}

.menu-btn:hover .bar {
    background: #999;
}

/* コンテンツの閉じる。普段は非表示(label)*/


/* チェックボックスオンの時 */
.check:checked ~ .drawer-menu {
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1;
    z-index: 2;
}
.check:checked ~ .menu-btn .bar{
    left: 10px;
}
.check:checked ~ .menu-btn .bar.top {
    width: 28px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.check:checked ~ .menu-btn .bar.middle {
    opacity: 0;
}

.check:checked ~ .menu-btn .bar.bottom {
    width: 28px;
    top: 29px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}



.mbdrw {
    padding: 20px;
}

.mbdrw_home {
    margin-top: 80px;
    margin-bottom: 30px;
    display: block;
}


.drawer-menu ul {background-color: #0151ca !important;}
.drawer-menu ul li{
border-bottom: 1px solid #eee;
}
.drawer-menu  ul li a {
    text-align: center;
    padding: 1em 0;
    display: block;
    color: #fff;
}


.drawer-menu  ul li a:hover {
    color: #666666;
}

.drawer-menu .mbdrw dl dt {
    border-bottom: 1px solid #999999;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

.drawer-menu .mbdrw dl {
    margin-bottom: 20px;
}

.drawer-menu .mbdrw dl dd a {
    font-size: 80%;
    line-height: 1.8em;
    margin: 0;
    padding: 5px;
    display: block;
}

@media only screen and (max-width: 1030px) {

}
@media only screen and (max-width: 768px) {



}


/* end .nav */


/*********************
SLICK
*********************/

.slick {
    overflow: hidden;
}

.slick ul {}

.slick li {
    float: left;
    outline: none;
}

.slick li img {
    width: 100%;
}

.slick h2.undertitle {
    display: table;
    background: #ffffff;
    letter-spacing: .3em;
    text-align: center;
    margin: 0 auto;
    padding: 5px 20px;
    border-bottom: 5px solid #0073c6;
}
.slick-dotted.slick-slider {
    margin-bottom: 0!important;

}
#arrows{position: absolute;
    top: 50%;

    width: 100%;}
#arrows .slick-next{z-index: 100000;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 0;}
#arrows .slick-prev{z-index: 100000;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;}
.slick-next:before, .slick-prev:before {
    font-size: 40px!important;
    color: #dddddd!important;
}

/*********************
POSTS & CONTENT STYLES
*********************/

/*タイトル*/

h2.ttitle,h2.title {
    line-height: 1.6em;
    font-weight: 600;
    overflow: hidden;
    text-align: center;
    color: #333;
    letter-spacing: .2em;
    font-size: 180%;
    margin-bottom: 40px;


}
h2.title {
    font-size: 150%;
    text-align: left;
    margin-bottom: 30px;
    padding: .25em 0 .5em .75em;
    border-left: 6px solid #0073c6;
    border-bottom: 1px solid #ccc;
}
h2.ttitle img{width: 120px;
    display: block;
    margin: 0 auto 10px;
}

@media only screen and (max-width: 767px) {
    h2.ttitle img{width: 100px;
    }

}


h2.ttitle i,h2.title i{color: #0073c6;
}

h2.l_title {
    line-height: 1.3em;
    font-weight: 600;
    overflow: hidden;
    text-align: left;
    color: #333;
    letter-spacing: .2em;
    font-size: 135%;
    margin-bottom: 40px;
    border-top: 3px solid #0073c6;
    padding: 15px 20px;
    -webkit-box-shadow: 0px 5px 6px #eeeeee;
}
h2.titleunder {
    font-weight: 500;
    overflow: hidden;
    text-align: center;
    color: #333;
    letter-spacing: .3em;
    font-size: 180%;
    margin-bottom: 50px;
    margin-top: 160px;
    font-family: "tiku", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    margin-bottom: 0;
}

h2.titleunder span {
    margin-top: 10px;
    font-family: "Noto Sans JP", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 50%;
    display: inline-block;
    border-top: 2px solid #fc6334;
    letter-spacing: .4em;
    font-weight: 400;
    font-style: italic;

}




@media only
    screen and (max-width: 768px) {
        h2.title {
            font-size: 140%;
            text-align: left;
            margin-bottom: 30px;
            padding: .1em 0 .2em .5em;
            border-left: 6px solid #0073c6;
            border-bottom: 1px solid #ccc;
        }
        h2.ttitle {

            font-size: 140%;
        }
}

/*ボタン*/

p.btn2 {
    margin: 20px auto 40px;
    text-align: center;
}

a.topbtn {
    display: block;
    margin-top: 20px;
    font-size: 110%;
    font-weight: 600;
    background: #0073c6;
    color: #ffffff;
    text-align: center;
    line-height: 55px;
    width: 70%;
    padding: 0px;
    border-radius: 5px;
    cursor: pointer;
    margin: 20px 0 0 auto;
    transition: 0.2s;
}

a.topbtn:hover {
    background: #dddddd;
    color: #0073c6;
}



.topbtn2 {
    display: block;
    margin-top: 20px;
    font-size: 110%;
    font-weight: 600;
    background: #0073c6;
    color: #ffffff;
    text-align: center;
    line-height: 55px;
    width: 40%;
    padding: 0px;
    border-radius: 5px;
    cursor: pointer;
    margin: 40px auto 0 ;
    transition: 0.2s;
}

.topbtn2:hover {
    background: #dddddd;
    color: #0073c6;
}
@media only
    screen and (max-width: 768px) {
        a.topbtn {

            width: 100%;
        }
}

input[type="submit"]{background: none;border: none;color: #ffffff;}

/*コンテンツ*/

#main,
#under,
#sidebar{
    margin-top: 0px;
}
.container {
    width: 960px;
}
#sidebar li{list-style: none;}

/*
#main h4 {
font-size: 130%;
margin-top: 0;

}
*/


#mainimg {
    width: 100%;
    position: relative;
    margin-bottom: 0px;
    z-index: -1;

    /*
    background: url(../img/mainimg.jpg);
    background-size: cover;
    background-position: center top;
    position: relative;
    */
    /*height: 350px;*/
}

#underimg {
    position: relative;
    background: #f7f4e6;
    margin-top: 0;
    z-index: -1;
}

.mainimg_text_inner div {
    background: rgba(255, 255, 255, 0.8);
    padding: 1em 1.8em;
    width: 50%;
    margin-left: 70px;
    font-weight: 600;
}

.mainimg_text_inner div span {
    color: #ff3101;
}

.mainimg_text {
    position: relative;
    z-index: 1;
}

.mainimg_text_inner {
    position: absolute;
    top: 0%;
    right: 0;
    /* transform: translateY(-50%) translateX(-50%); */
    z-index: 3;
    height: 100%;
    height: calc(100% - 0px);
}

.mainimg_text_inner h2 {}


.mainimg_text_inner h2.top {
    margin: 0;
    height: 100%;
}

.mainimg_text_inner h2.top img {
    height: 100%;
    width: auto;
}

.mainimg_text_inner div {
    background: rgba(255, 255, 255, 0.85);
    padding: 1em 1.8em;
    width: 82%;
    margin-left: 30px;
    font-weight: 600;
    margin: 20px auto 0;
}

.mainimg_text_inner div span {
    color: #ff3101;
}



p.scroll {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -25px;
}

p.scroll a:hover {
    opacity: .7;
}

.topcont {}


.whac {
    padding: 100px 0px 100px;
}
.wow {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: 0.2s;
    animation-delay: 0.2s;
}


@media only
screen and (max-width: 1030px) {


}

@media only
screen and (max-width: 768px) {

    .mainimg_text_inner {
        position: absolute;
        /* 位置指定 */
        top: 0;
        /* 親要素の半分下にずらす */
        right: 0;
        /* 親要素の半分右にずらす */
        transform: translateY(0%) translateX(0%);
        z-index: 0;
        width: 100%;

    }

    #mainimg {
        width: 100%;
        margin-top: 60px;

    }
    .mainimg_text_inner h2.top
    {
        position: relative;
    }
    .mainimg_text_inner h2.top img {
        width: 55%;
        margin-right: 0;
        height: auto;
        right: 0;
        position: absolute;height: calc(100% - 0px);
    }

    .blue_btn a {
        letter-spacing: 0;
        font-size: 100%;
    }
    #underimg {

        margin-top: 0px;
    }

}



/*ブロック*/

.u_block {
    margin-bottom: 40px;
}

.twobox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}

.twobox li {
    flex-basis: 48%;
}

.threebox {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    text-align: center;
}

.threebox li {
    flex-basis: 33.333%;
    margin-bottom: 0px;
}


.trt_box {position: relative;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    text-align: center;
}

.trt_box li {
    flex-basis: 31.3%;
    margin-right: 3%;

}
.trt_box li:nth-child(3n) {margin-right: 0;
}

.tdt_box {position: relative;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    text-align: center;
}

.tdt_box li {
    flex-basis: 33.3%;
    margin-right: 0;

}
.tdt_box li:nth-child(3n) {margin-right: 0;
}

.thirty_box{
    display: flex;
    justify-content: space-between;
}

.thirty_box li:nth-child(1) {
    flex-basis: 30%;
    text-align: center;
    margin-bottom: 30px;
}
.thirty_box li:nth-child(2) {
    flex-basis: 65%;
    margin-bottom: 30px;

}




@media only
screen and (max-width: 768px) {

    .twobox,
    .threebox {
        display: block;
    }

    .twobox li,
    .threebox li {
        margin-bottom: 20px;
    }
    .thirty_box{
        display: block;
    }

    .tdt_box {
        display: block;
    }
    .trt_box {justify-content: space-between;
    display: block;}
    .trt_box li {
        flex-basis: 49%;
        margin-right: 0;


    }

}



/*新着情報＊＊＊＊＊＊＊＊＊＊＊＊*/
/*

#news{margin-bottom: 80px;}

 .newsclm {margin-bottom: 40px;

}

.newsclm dl {
    display: flex;
    width: 100%;
    text-align: left;
    margin-bottom: 15px;
    padding-bottom: 0px;
    justify-content: space-between;
}


.newsclm dt {padding: 0 10px;
    flex-basis: 25%;
    border-bottom: 1px dotted #999999;
    padding-bottom: 5px;
}

.newsclm dd {padding: 0 10px;
    flex-basis:  75%;
    border-bottom: 1px dotted #999999;
    padding-bottom: 5px;
    padding-bottom: 5px;

}
.newsclm a {
    color: #333;
}

.newsclm a dd {
    color: #333;
}

.newsclm a:hover,
.newsclm a dd:hover {
    color: #888;
}
.topbtn{
text-align: center;
margin: 0 auto;
border: 1px solid #0073c6;position: relative;
   }
.topbtn a{display: block;

    font-size: 18px;
    padding: 10px 10px 10px 35px;
    text-align: center;

    font-weight: 600;
    position: relative;
        transition: .4s;

    border-right: solid 2.7em #0073c6;
    color: #053781;
}

.topbtn a:hover{
    background: #ceeaf4;
}

.topbtn a:before{
    content: "";
    position: absolute;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #0073c6;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0px;
    height: 0px;
    margin: auto;

}
.topbtn a:hover:after {transform: translate(5px,-50%);}
.topbtn a:after{
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    position: absolute;
    padding: 0em;
    color: white;
    font-weight: normal;
    right: -1.6em;
    font-size: 22px;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
transition: .4s;}

    .w60{width: 60%;}
    .w50{width: 50%;}
@media only
screen and (max-width: 1030px) {

}


@media only
screen and (max-width: 768px) {
    .w60{width: 100%;}
    .w50{width: 100%;}
    .newsclm dl {display: block;}
    .newsclm dt {
        padding: 0 10px;
        flex-basis: 25%;
        border-bottom: 0;
        padding-bottom: 0;
        text-align: center;
        background: #eeeeee;
        padding: 10px;
        margin-bottom: 15px;
    }
    .newsclm dd {

        border-bottom: 0;
        padding-bottom: 0;
    }
    .topbtn{    background: #0073c6;
    }
    .topbtn a:nth-child(1):before{
        display: none;

    }
    .topbtn a{color: #ffffff;
    align-items: center;
    padding: 10px;}
}
*/

/*イントロ＊＊＊＊＊＊＊＊＊＊＊＊*/

#intro{padding: 60px 0 40px;background: #f0f8fe;}
#intro .attention{background: #ffffff;padding: 15px 20px;margin-bottom: 30px;
text-align: left;}


@media only
    screen and (max-width: 1030px) {

}


@media only
    screen and (max-width: 768px) {

}
/*サービス＊＊＊＊＊＊＊＊＊＊＊＊*/

#service{background: #f2f3f2;
padding: 40px 0;}





.ts_box li{overflow: hidden;
position: relative;
margin-bottom: 30px;}

.ts_box li h2{
    width: 55%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    padding: 12px 0px;
    border-bottom: 4px solid #0073c6;
    text-align: center;
    font-weight: 700;
    background: rgba(255,255,255,0.9);
    font-size: 160%;

}
.ts_box li a:hover h2{
    z-index: 1;
}
.ts_box li a:hover img{
    transform:  scale(1.1);
    transition-duration: 0.3s;
    z-index: -1;
}



.autoslick{margin-bottom: 30px;}
.autoslick p{background: #ffffff;text-align: center;padding: 10px 20px;box-sizing: border-box;}
.autoslick .slick-slide{
    margin:  0px 10px;
}

.autoslick .slick-prev:before,  .autoplay .slick-next:before {
    display: none;

}
.autoslick .slick-prev,  .autoslick .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: calc(50% - 0px);
    display: block;
    width: 50px;
    height: 50px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;

}
.autoslick .slick-list {
    width: 94%;
    margin: 0 auto;
}
.autoslick .slick-next {
    right: -25px;
    background: url(images/autonext.png) no-repeat;

}
.autoslick .slick-prev {
    left: -25px;
    background: url(images/autoback.png) no-repeat;
}
.slick-next, .slick-prev {
    z-index: 1;}

.slide_inner{
    max-height: 135px;
    overflow: hidden;
}
@media only
    screen and (max-width: 1030px) {

}


@media only
    screen and (max-width: 768px) {
        .ts_box li h2{
            width: 68%;
            font-size: 155%;
            top: 48%;
            padding: 7px 2px;

        }
        .ts_box li {

            margin-bottom: 0px;
        }
        h2.stitle {width: 95%;
        }
        #service{background: #f2f3f2;
            padding: 40px 0 0;}

        .autoslick .slick-slide {
            margin: 0px 5px;
            transform: translateX(50%);
        }
        .autoslick .slick-list {
            width: 120%;
            margin: 0 auto;
            transform: translateX(-6%);
        }
        .autoslick .slick-next {
            right: -15px;
            background: url(images/autonext.png) no-repeat;

        }
        .autoslick .slick-prev {
            left: -15px;
            background: url(images/autoback.png) no-repeat;
        }

}


/*おすすめ物件＊＊＊＊＊＊＊＊＊＊＊＊*/

#recommend{
    padding: 40px 0 0;

}
#recommend p {margin-top: 0;}
h3.titling{
    font-weight: 600;
    margin-bottom: 10px;
}
h4.price{font-weight: 600;
    color: #f82055;
font-size: 140%;
    margin: 0px 0 10px;}

@media only
    screen and (max-width: 1030px) {

}


@media only
    screen and (max-width: 768px) {


}

/*こだわり＊＊＊＊＊＊＊＊＊＊＊＊*/
#kodawari{
    padding: 80px 0 60px;
    background: #ffffff url(images/kodawari_bg.jpg) no-repeat;
    background-size: cover;
}
#kodawari .attention{padding: 10px 20px;
font-size: 16px;line-height: 2em;
background: rgba(255,255,255,0.8);
margin-bottom: 50px;}
 .house_btn{background: rgba(255,255,255,0.8);
}
.house_btn a{ margin-bottom: 0;
}
@media only
    screen and (max-width: 1030px) {

}


@media only
    screen and (max-width: 768px) {


}

/*リンクス＊＊＊＊＊＊＊＊＊＊＊＊*/
#links{
padding: 40px 0;
    background: #f0f8fe url(images/u_orange_bg.jpg);
}

#links ul{
    flex-wrap: wrap;
    display: flex;
    display: -ms-flex;
    width: 100%;
    justify-content: space-between;
    padding-bottom: 0px;
}

#links ul li{

    background: #0073c6;
    box-sizing: border-box;
    width: 33%;
    text-align: center;
    margin-bottom: 5px;
    height: 220px;
    position: relative;
}

#links ul li a {
    display: block;
    transition: 0.3s;
}

#links ul li img {
    width: 75px;
    min-height: 70px;
    /* position: absolute; */
    /* top: 24%; */
    /* left: 32%; */
    margin-top: 50px;
    transition: 0.2s;
    margin-bottom: 30px;
}

#links ul li a:hover img {
 transform: scale(1.1);}
#links ul li p {
    background: #ffffff;
    display: table;
    text-align: center;
    margin: 0 auto;
    padding: 5px 10px;
    width: 85%;
    position: relative;
    /* bottom: 10%; */
    /* left: 7.5%; */
    transition: 0.2s;
    font-weight: 600;
}
#links ul li a:hover p {
    background: #eaedf2;
    opacity: .9;
}
#links p::before {
    border-color: transparent transparent #0058ca;
    border-style: solid;
    border-width: 0 0 11px 11px;
    bottom: 0px;
    content: '';
    height: 0;
    position: absolute;
    right: 0px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    width: 0;
}

#tn_search{ text-align: center;}

@media only
    screen and (max-width: 1030px) {

}


@media only
    screen and (max-width: 768px) {
        #links ul{
display: block;        }
        #links ul li {
            width: 100%;
            height: 175px;
            flex-basis: 49%;
        }
        #links ul li img {width: 70px;
            min-height: 70px;
            margin-top: 25px;
            margin-bottom: 15px;}
        #links ul li p{
        padding: 8px 4px;
            font-size: 110%;
            font-weight: 600;
        }
        #links img {
            position: relative;
            text-align: center;
            top: auto;
            left: auto;
            padding-top: 0px;
            margin-bottom: 10px;
        }

        #links p {
            background: #ffffff;
            display: table;
            text-align: center;
            margin: 0 auto;
            padding: 5px 30px;
            width: 85%;
            position: relative;
            bottom: auto;
            left: auto;
            transition: 0.2s;
        }

        #links ul li a:hover img {
        }

        #links p span {
            font-size: 100%;
            line-height: 1.6em;
        }
}


/*リンクバナー＊＊＊＊＊＊＊＊＊＊＊＊*/
#banner{
    padding: 40px 0 20px;
}
#banner li a{
    margin: 0;padding: 0;display: block;
}
#banner li a img{margin: 0;padding: 0;display: block;}
#banner li {border: 1px solid #bbbbbb;margin-bottom: 20px;}

@media only
    screen and (max-width: 1030px) {

}


@media only
    screen and (max-width: 768px) {

}
/*お問い合わせバナー＊＊＊＊＊＊＊＊＊＊＊＊*/

#t_contact {
    background: #f0f8fe;
    margin: 0 auto;
    background-size: cover;
    padding: 0;
    position: relative;

}

.tc_banner_inner {
position: relative;
padding: 60px 0;}
.tc_banner_inner a{
    width: 100%;
    bottom: 50px;
    left: 0;

    transition: .4s;
    border-right: solid 2.7em #10489c;
    display: block;
    position: relative;
}
.tc_banner_inner a p{font-size: 80%;
line-height: 1.4em;
margin-bottom: 5px;}
.tc_banner_inner a h3{
    color: #10489c;
    margin-bottom: 0;
}
.tc_banner_inner a h4{
    margin-bottom: 5px;
}
.tc_banner_inner ul{display: flex;background: #10489c;
    align-items: center;}
.tc_banner_inner ul li:first-child{background: #10489c;

}
.tc_banner_inner ul li{flex-basis: 12%;  background: #10489c;}

.tc_banner_inner ul li:nth-child(2){flex-basis: 88%;background: #ffffff;
padding: 20px;}

.tc_banner_inner a:after {
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    position: absolute;
    padding: 0em;
    color: white;
    font-weight: normal;
    right: -1.3em;
    font-size: 22px;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: .4s;
}
.tc_banner_inner a:hover:after  {transform: translate(5px,-50%);}

.tc_banner_inner a:hover h3{text-decoration: underline;}

@media only
    screen and (max-width: 1030px) {

}


@media only
    screen and (max-width: 768px) {
        #t_contact {
            background: none;height: auto;
        }.tc_banner_inner {
            height: auto;
        }
        .tc_banner_inner a {border-right: none;
            bottom: auto;
            position: relative;
        }
        .tc_banner_inner ul{display: block;text-align: center;
        }
        .tc_banner_inner a:after{display: none;}
        .tc_banner_inner a p {
            font-size: 100%;
        }
        .tc_banner_inner ul li:nth-child(2) {
            text-align: left;
        }
        .tc_banner_inner .f_mb{
            color: #ffffff;
            padding: 20px;box-sizing: border-box;
            font-weight: 600;
        }
}




/*
---------------------------
---------------------------
---------------------------
---------------------------
*******
*********
*********
下層追加分------
---------------------------
---------------------------
---------------------------
---------------------------
---------------------------
*/



/*下層***********************
*************************/

.h_title {
    text-align: center;
    /* padding: 85px 0 105px; */
    color: #333;
    margin-top: 0px;
    background: url(images/t_back.png) no-repeat center left;
}

.h_news {
    background: url(images/h_news.jpg) no-repeat center center;
    background-size: cover;
}

@media only
    screen and (max-width: 768px) {
}

/*新着***********************
*************************/

.sub_m,
.sub_h {
    border-left: 4px solid #0073c6;
    padding-left: 15px;
}

.sub_m {
    margin-bottom: 30px;
}

a .sub_m,
a .sub_h,
.sub_m a,
.sub_h a {
    color: #333;
}

a .sub_m:hover,
a:hover .sub_h,
.sub_m a:hover,
.sub_h a:hover {
    color: #999;
}

a:hover .sub_h {}

.newsarign {
    padding: 15px 0;
}

.newsarign:hover {
    background: #faf8f0;
    transition: all .3s ease-out;
}

a .newsarign p {
    color: #666;
    padding-left: 15px;
}

.info-box h2{
    font-size: 150%;
    color: #333333;
}
@media only
    screen and (max-width: 1030px) {

}


@media only
    screen and (max-width: 768px) {

        .sub_h,.sub_m{
            display: block;


        }

        .noimage{
            width: 70%!important;
        }
        .sub_h div:last-child a{margin-left: 0;}
        .sub_m div:last-child{
            padding-left: 0px;
        }
}



/******************************************************************
下層ページ
******************************************************************/




div.postimg{
    overflow: hidden;
    height: 200px;
    width: 100%;
    object-fit: cover;
    position: relative;
    margin-bottom: 15px;
}
div.postimg img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 200px;
    width: 100%;
    object-fit: cover;
}
.postimg img:hover {
    transform: translate(-50%, -50%) scale(1.1);
    transition-duration: 0.3s;
}
ul.lease li {text-align: left;}
ul.lease li span{margin-right: 10px;}
ul.lease li h2{font-size: 100%; color: #053781;
    margin-bottom: 15px;}
ul.lease li .house_small{display: flex;border-bottom: 1px dashed #cccccc;margin-bottom: 5px;
    padding-bottom: 5px;}
ul.lease li .house_small li{font-size: 80%; flex-basis: 50%;}
ul.lease li h3{font-size: 100%;
    border-bottom: 1px dashed #cccccc;margin-bottom: 5px;
    padding-bottom: 5px;}
ul.lease li h3 span{font-size: 80%; font-weight: 500;}
ul.lease li .house_small  li span{background: #0071dc; color: #ffffff;padding: 2px;border-radius: 3px;font-size: 85%;text-align: center;}

ul.lease li h3 span{background: #0071dc;
    color: #ffffff;
    padding: 2px 3px;
    border-radius: 3px;
    font-size: 65%;
    text-align: center;}

ul.lease li h4 span{font-weight: 500; background: #0071dc; color: #ffffff;padding: 2px;border-radius: 3px;font-size: 60%;text-align: center;}
ul.lease li h4{
    color: #f82055;
}
ul.lease li i{margin: 0 auto;
    width: 1em;}

.house_detail ul{display: flex;justify-content: flex-start;
    align-items: baseline;}
.house_detail ul li{margin-right: 1%;margin-bottom: 5px;}
.house_detail ul li h4{
    color: #f82055;
    font-size: 160%;
    font-weight: 700;
    margin-bottom: 0;
}
.house_detail ul li p{
    line-height: 1em;
    margin-bottom: 0px;
    font-size: 80%;
}




.property_view_table{
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dbdbdb;
    border-collapse: collapse;
    font-size: 80%;
    margin-bottom: 30px;
}
.property_view_table .property_view_table-title {
    background-color: #eeeeee;
    width: 135px;
    text-align: center;
    padding: 10px;
    border-right: 1px solid #dbdbdb;
    border-top: 1px solid #dbdbdb;
    border-collapse: collapse;
    vertical-align: middle;
}
.property_view_table .property_view_table-body {
    width: 245px;
    padding: 10px;
    box-sizing: border-box;
    border-top: 1px solid #dbdbdb;
    border-collapse: collapse;
}
.property_view_table .property_view_table-read {
    line-height: 1.4;
}
.property_view_table h4{font-size: 140%;margin-bottom: 0;}
.backing{border-top: 1px dashed #cccccc;
padding-top: 10px; margin-top: 30px;}
.lease_comment{
    background: #f0f8fe;
    padding: 20px;
    font-size: 80%;
    /* padding-bottom: 20px; */
    margin-bottom: 30px;
    /* padding-top: 20px; */
}
.lease_comment span{
    display: table;
    /* float: left; */
    background: #ffffff;
    padding: 5px 15px;
    margin: 0 0px 10px 0;
    color: #0073c6;
    font-weight: 600;
    font-size: 120%;
    margin-top: 0;
}

.lease_comment i{margin-right: 10px;color: #0073c6;
font-size: 24px;}


.yellowback{
    text-align: center;
    background: #ffdb00;
    padding: 20px;
}
.blueback{
    background: #f0f8fe;
    padding: 20px;
}
.glayback{display: table;
    margin: 0 auto;
    }
.clshead{
    text-align: center;
    margin-bottom: 40px;
}
.glayback h3{margin: 0;padding: 10px 25px;
    border: 1px solid #0073c6;
}
.glayback h4{
    background: #fee9e9;
    padding: 20px 40px;
}
.tel_btn{
    display: table;
    margin: 0;
    font-weight: 400;
    font-size: 150%;
    padding: 10px 10px;
    line-height: 1em;
    color: #2d2d2d;
    background: #ffffff;
    border: 1px solid #999999;
    width: 100%;
}
.tel_btn i{
    font-size: 70%;
    display: inline-block;
    margin-right: 10px!important;}

.tel_btn2{
    display: table;
    margin: 0 auto;
    text-align: center;
    font-weight: 400;
    font-size: 150%;
    padding: 10px 10px;
    line-height: 1em;
    color: #2d2d2d;
    background: #ffffff;
    border: 1px solid #999999;

}
.tel_btn2 i{
    font-size: 70%;
    display: inline-block;
    margin-right: 10px!important;}


.color-red{
    width: 100%;
    padding: 3px;
    text-align: center;
    background: #fef0f0;
    display: block;
    font-size: 80%;

}
.color-blue{display: block;
    font-size: 80%;
    width: 100%;
    padding: 3px;
    text-align: center;
    background: #f6fbfe;

}
@media only
    screen and (max-width: 1030px) {

}


@media only
    screen and (max-width: 768px) {
}
/******************************************************************
会社概要
******************************************************************/



.pri_right dl {
    display: flex;
    display: -ms-flex;

    width: 100%;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pri_right dl dt {
    flex-basis: 25%;
    -ms-flex-basis: 25%;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-left: 10px;
}

.pri_right dl dd {
    margin-left: 10px;
    flex-basis: 70%;
    -ms-flex-basis: 70%;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}
.a_kajo li {
    margin-bottom: 30px;
    position: relative;
    padding-left: 30px;
    font-size: 120%;
}
.a_kajo li  a{
    color: #0059cc;
}
.a_kajo li:before {
    content: "\f0c1";
    font-family: "Font Awesome 5 Free";
    font-size: 18px;
    left: 0;
    position: absolute;
    top: 0;
    color: #0059cc;
    font-weight: 900;
}
.a_kajo li p {
    font-size: 75%;
    margin-left: 15px;
    margin-top: 15px;
}
@media only
    screen and (max-width: 1030px) {

}


@media only
    screen and (max-width: 768px) {
        .pri_right dl {
            display: block;
        }

        .pri_right dl dt {
            text-align: center;
            flex-basis: 25%;
            -ms-flex-basis: 25%;
            border-bottom: none;
            padding-bottom: 10px;
            background: #eee;
            padding-top: 10px;
            margin-bottom: 10px;
        }

        .pri_right dl dd {
            border: none;
        }


}

/*田舎暮らし＊＊＊＊＊＊＊＊＊＊＊＊*/
.threebtn{}
.threebtn ul{display: flex; justify-content: space-between;}
.threebtn ul li{ margin-bottom: 30px; flex-basis: 30%;

    text-align: center;


}
.threebtn ul li a{
    color: #ffffff;
    background: #0073c6;
    display: block;
    padding: 15px 20px;transition: 0.4s;

}
.threebtn ul li a i{
margin-right: 10px;transition: 0.4s;}
.threebtn ul li a:hover{
    background: #55abe9;
}
.threebtn ul li a:hover i{
    transform: translate(0,2px);
}
@media only
    screen and (max-width: 1030px) {

}


@media only
    screen and (max-width: 768px) {
        .threebtn ul{display: block;}
}

/******************************************************************
PAGE NAVI STYLES
******************************************************************/

.pagination,
.wp-prev-next {
    margin: 1.5em 0;
}

.pagination {
    text-align: center;
}

.pagination ul {
    display: inline-block;
    background-color: white;
    white-space: nowrap;
    padding: 0;
    clear: both;
    border-radius: 3px;
}

.pagination li {
    padding: 0;
    margin: 0;
    float: left;
    display: inline;
    overflow: hidden;
    border-right: 1px solid #eaedf2;
}

.pagination a,
.pagination span {
    margin: 0;
    text-decoration: none;
    padding: 0;
    line-height: 1em;
    font-size: 1em;
    font-weight: normal;
    padding: 0.75em;
    min-width: 1em;
    display: block;
    color: #2980b9;
}

.pagination a:hover,
.pagination a:focus,
.pagination span:hover,
.pagination span:focus {
    background-color: #2980b9;
    color: white;
}

.pagination .current {
    cursor: default;
    color: #5c6b80;
}

.pagination .current:hover,
.pagination .current:focus {
    background-color: white;
    color: #5c6b80;
}

/* end .bones_page_navi */

/* fallback previous & next links */

.wp-prev-next .prev-link {
    float: left;
}

.wp-prev-next .next-link {
    float: right;
}

.wp-pagenavi {
    padding-top: 0px;
    clear: both;
    text-align: center;
    margin-bottom: 60px;
}
span.pages{
    display: none!important;
}
.wp-pagenavi a,
.wp-pagenavi span {
    color: #333;
    margin: 0 2px;
    white-space: nowrap;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    text-align: center;
    text-decoration: none;
    border: 0px!important;
    font-size: 120%;
    padding: 3px 12px!important;
}
.wp-pagenavi a:hover{color: #777777;}
.wp-pagenavi span.current {
    color: #fff;
    background-color: #0071dc;
}

/* end .wp-prev-next */

/******************************************************************
mailform******************************************************************/

/* ーーーーーーメールフォームーーーーーーー*/
.mailform{width: 100%;}
.mailform tr {
    background-color: ;
    display: flex;
    align-items: center;
}



.mailform tr th {
    flex-basis: 35%;
    padding: 20px;
    vertical-align: middle;
    text-align: left;
    padding-left: 50px;
    min-width: 300px;
}

.mailform tr td {
    width: 65%;
    padding: 20px;
    vertical-align: middle;
}

.mailform tr td label {
    margin-right: 20px;
    display: inline-block
}

.mailform tr td label.siding {
    display: flex;
    display: -ms-flex;

}

.mailform tr td label.siding input {
    vertical-align: middle;
    margin-right: 5px;
    height: 30px
}

.siding p {
    display: inline-flex;
    display: -ms-inline-flex;

    vertical-align: middle;
    margin-right: 5px;
}

.mailform tr td ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.mailform tr td ul li {
   flex-basis: 45%;
    margin-bottom: 5px;
}
.addbox{
    background: #e2ecf9;
}

/*各入力フォームスタイリング*/
.mailform input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    border: 1px #a1a1c2 solid;
    padding: 0.5em;
    border-radius: 5px;
    margin-bottom: 0;
    width: 100%;
    font-size: 120%;
    background: #fff;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Chrome, Safari */
}

.select-wrap {
    position: relative;
}

.select-wrap:before {
    display: none;
    content: "\f358";
    font-family: "Font Awesome 5 Free";
    line-height: 43px;
    color: #a1a1c2;
    pointer-events: none;
}

.select-wrap svg {
    z-index: 1;
    position: absolute;
    right: 12px;
    top: 10px;
    font-size: 110%;
    color: #999;
}

select {
    outline: none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    background: none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #a1a1c2;
    color: #828c9a;
    width: 100%;
    border-radius: 3px;
}

select option {
    background-color: #fff;
    color: #333;
}

select::-ms-expand {
    display: none;
}

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #828c9a;
}

.mailform select {
    font-size: 110%;
}

/*入力欄にフォーカスしたら変化*/
.mailform input[type="text"]:focus,
textarea:focus {
    background: #f5f5fd;
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
}

.btnctr {
    text-align: center;
    margin-bottom: 50px;
}

.mailform tr th span {
    display: inline-block;
    background: #0073c6;
    font-size: 80%;
    padding: 0px 15px;
    color: #ffffff;
    margin-left: 15px;
    border-radius: 15px;
}

.readonly{
    border: none!important;
}

@media only
screen and (max-width: 1030px) {
    .siding p {
        margin-right: 15px;
    }

}

@media only
screen and (max-width: 1030px) {

    .mailform input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        min-width: 100%;
        font-size: 120%;
    }
}

@media only
screen and (max-width: 900px) {


    .mailform tr th {
        width: 100%;
        background-color: #f7f7f7;
        padding: 20px;
        vertical-align: middle;
        display: block;
        text-align: center;
    }

    .mailform tr td {
        background-color: #fff;
        width: 100%;
        padding: 20px;
        display: block;
        vertical-align: middle;
    }

    .mailform tr td input {
        width: 100%;
        width: 15px;

    }
}

@media only
screen and (max-width: 768px) {
    .privacy_btn a {
        padding: 5px 20px;
        display: block;
        font-size: 90%;
        width: 95%;
    }
    .mailform tr {display: block;
    }

    .mailform input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        border: 1px #a1a1c2 solid;
        padding: 0.5em;
        border-radius: 5px;
        margin-bottom: 0;
        min-width: 100%;
        font-size: 120%;
        background: #fff;
    }

    .mailform tr td ul li {
        width: 100%;
    }

    .mailform tr td ul {
        display: block;
    }

    .siding p {
        text-align: center;
        display: inline;
    }
}



/*********************
FOOTER STYLES
*********************/

.footer {
    text-align: center;

    background:#f6f6f6;
    color: #333333;
    padding: 0px
}

.footer_inner{
    z-index: 3;
    display:flex;
    display:-ms-flex;

    justify-content: space-between;
    padding: 40px 0;
}
.footer_inner div{
}
.flogo{width: 60%;}
.footer_left{
    flex-basis: 40%;
    -ms-flex-basis: 40%;
    text-align: left;
    color: #333333;
}
.footer_left h2{
    font-size: 120%;
    font-weight: 600;
}
.footer_left p{
    line-height: 1.8em;
    margin: 0;
    font-size: 85%;
}
.footer_left .tel{
    font-weight: 600;
    font-size: 110%;
}
.footer_left .tel a{color: #ffffff;
}
.footer_right{
    flex-basis: 58%;
    -ms-flex-basis: 58%;}
.footer_right ul {

}
.footer_right ul.menu{
    display: flex;
    display:-ms-flex;

    flex-wrap: wrap;
}
.footer_right ul li{color: #000000;}

.footer_right ul li a{ background: #ffffff;color: #333333;
    padding: 8px 26px; margin-right: 10px;
    display: block;margin-bottom: 10px;
    -ms-box-shadow: 0 2px 3px #cccccc;
    -o-box-shadow: 0 2px 3px #cccccc;
    box-shadow:  0 2px 3px #cccccc;
    position: relative;
    transition: 0.2s;
    font-weight: 600;
}
.footer_right ul li a:hover{
    opacity: .8;
}

.footer_right ul li a::before{
    border-color: transparent transparent #0071dc;
    border-style: solid;
    border-width: 0 0 11px 11px;
    bottom: 0px;
    content: '';
    height: 0;
    position: absolute;
    right: 0px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    width: 0;
}





.copyright {
    background: #ffffff;
    text-align: center;
    color: #666666;
    font-size: 90%;
    padding: 5px 0;
    margin: 0;
}



@media only screen and (max-width: 768px) {
    .footer_inner{
        z-index: 3;
        display:block;
    }
    .footer {
        text-align: center;
        color: #333333;
        padding: 0px
    }
    .footer_left{
        text-align: center;
        padding-bottom: 10px;
        background: #f6f6f6;
    }

    .footer_left h2 {
        margin-bottom: 20px;
    }
    .footer_left p{
        text-align: left;}
    .footer_left p.tel{
        text-align: center;
    }
    .footer_left p.tel a{color: #333333; text-decoration: underline; }
    .footer_inner{padding: 40px 0 0;}
    .footer_right{
        padding: 30px 0;
        margin-bottom: 0;
        background: none;

    }
    .footer_right ul li {
        color: #000000;
        width: 100%;
    }
    .footer_right ul li a{
        padding: 15px;
    }


}



/* end .nav */

/*********************
SIDEBARS & ASIDES
*********************/

.sidebar {
    margin-top: 0em;
}

.widgettitle {
    font-weight: 500;
    position: relative;
    font-size: 140%;
    padding-bottom: 10px;
    padding-left: 40px;
    margin-bottom: 0;
}

.widgettitle:before {
    content: "\f111";
    font-family: "Font Awesome 5 Free";
    left: 10px;
    position: absolute;
    top: 1px;
    color: #0073c6;
    font-weight: 500;
    font-weight: 900;
    font-size: 100%;
}

.widget {
    padding: 0 10px;
    margin: 0 0 2.2em;
}

.widget ul li {
    position: relative;
    border-bottom: 1px dashed #ccc;
    /* deep nesting */
}

.widget ul li a {
    display: block;
    padding: 14px 15px 14px 30px;
    color: #333333;
    line-height: 1.8em;
}

.widget ul li a:before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-size: 16px;
    left: 10px;
    position: absolute;
    top: 13px;
    color: #535353;
    font-weight: 900;
}

.widget ul li a:hover {
    background: #f0f6fa;
    transition: all .3s ease-out;
}

.widget ul li ul {
    margin-top: 0.75em;
    padding-left: 1em;
}







/*********************
下層
*********************/
.undercont{
    display: flex;
    justify-content: space-between;
}
.undercont section{
    flex: 1 0 ;
}

#maincont{flex-basis: 68%;
    margin-right: 10%;
    z-index: 0;
}
#sidebar{flex-basis: 22%;}

#sidebar .widget ul.sideclm li {
    position: relative;
    border-bottom:none;
}


.sideclm{display: block;
    align-items: center;
}
.sideclm li{flex: 0 0 48%;}
.sideclm li:first-child{margin-bottom: 5px;}
.sideclm li img{width: 100%;height: auto;}
.sideclm li p{text-align: left;}
.banner_entries ul li{margin-bottom: 15px;}
.banner_entries ul li a img{border: 1px solid #cccccc;}



.three_entries ul{
    margin-bottom: 20px;
}
.three_entries ul li{
    background: #0073c6;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
    height: 220px;
    position: relative;

}

.three_entries ul li a{
    display: block;
    transition: 0.3s;
}
.three_entries ul li a img{
    width: 75px;
    min-height: 70px;
    /* position: absolute; */
    /* top: 24%; */
    /* left: 32%; */
    margin-top: 50px;
    transition: 0.2s;
    margin-bottom: 30px;
}
.three_entries ul li:nth-child(3) a img{

}
.three_entries ul li:nth-child(3) p{
    font-size: 80%;
}

.three_entriesul li a:hover img {
    transform: scale(1.1);}
.three_entries ul li p {
    background: #ffffff;
    display: table;
    text-align: center;
    margin: 0 auto;
    padding: 5px 10px;
    width: 85%;
    position: relative;
    /* bottom: 10%; */
    /* left: 7.5%; */
    transition: 0.2s;
    font-weight: 600;
}
.three_entries ul li a:hover p {
    background: #eaedf2;
    opacity: .9;
}
.three_entries p::before {
    border-color: transparent transparent #0058ca;
    border-style: solid;
    border-width: 0 0 11px 11px;
    bottom: 0px;
    content: '';
    height: 0;
    position: absolute;
    right: 0px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    width: 0;
}


/*feature*/

h2.s_title {
    position: relative;
    padding: 0 .6em .1em;
    margin-bottom: 30px;
    /* text-align: center; */
    display: table;
    text-align: center;
    margin: 0px auto 40px;
    font-size: 200%;
}
h2.s_title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: '';
    width: 100%;
    height: 10px;
    background-color: #afd1fd;
}


.feabox img{margin-bottom: 0;}
.feabox h3{background: #0058ca;
color: #ffffff;
padding: 15px;text-align: center;
    margin-top: -8px;
    margin-bottom: 0;
    font-size: 140%;
}
.fea_inner{
    padding: 15px 20px;
    background: #eeeeee;
}
.fea_inner h4{}
.fea_inner p{margin-bottom: 0;}

.clms{display: flex;justify-content: space-between;}
.invert{flex-direction: row-reverse;}
h3.o_title{
    position: relative;
    display: block;
    padding-left: 40px;
    text-align: left;
    background-size: 35px 35px;
    line-height: 35px;
    font-size: 130%;
    /* transition: all 300ms 0s ease; */
    margin-bottom: 10px;
    /* margin-top: 50px; */
}
h3.o_title:before {
    position: absolute;
    top: 0%;
    left: 0%;
    /* margin-left: -10px; */
    content: '\f111';
    color: #0058ca;
    font-size: 26px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;

}


.clms li{flex: 1 0 50%;}
.clms li:first-child{flex-basis: 30%;
    margin-right: 3%;
}
.invert li:first-child{margin-right: 0;}
.invert li:last-child{margin-right: 3%;}
@media only
    screen and (max-width: 768px) {
        .undercont{
            display: block;margin-top: 40px;
        }
        #maincont{
            margin-right: 0%;
        }
        .clms{display: block;
        }
        .clms li:first-child{flex-basis: 30%;
            margin-right: 0;
        }
        .invert li:last-child{margin-right: 0;}
        .clms li img{margin-bottom: 15px;}
        .widget {
            padding: 0 0px;
            margin: 0 0 2.2em;
        }
        h2.s_title {

            font-size: 150%;
            padding: 0 0em .1em;
        }


}

/*********************
施工事例
*********************/

.seko{display: flex;flex-wrap: wrap;

justify-content: flex-start;align-items: flex-start;}
.seko li{flex-basis: 30%;margin-right: 3%;}
.seko li p{text-align: center;}
.sekobox img{width: 100%;
    height: auto;}
@media only
    screen and (max-width: 768px) {
        .seko{display: block;}
        .seko li{flex-basis: 30%;margin-right: 0%;}
        .sekobox img{width: 100%;
            height: auto;}
}

/*********************
会社案内
*********************/
p.intro{
    line-height: 1.8em;
}
.aboutline{

}
.aboutline dl{display: flex;justify-content: space-between;}
.aboutline dl dt{border-bottom: 1px solid #666666;
flex-basis: 30%;text-align: left;
padding: 20px;
font-weight: 600;}
.aboutline dl dd{border-bottom: 1px dashed #666666;
    flex-basis: 70%;padding: 20px;}


.two_entries ul{
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}
.two_entries ul li{
    flex-basis: 48%;
    background: #0073c6;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 15px;
    height: 220px;
    position: relative;

}

.two_entries ul li a{
    display: block;
    transition: 0.3s;
}
.two_entries ul li a img{
    width: 75px;
    min-height: 70px;
    /* position: absolute; */
    /* top: 24%; */
    /* left: 32%; */
    margin-top: 50px;
    transition: 0.2s;
    margin-bottom: 30px;
}
.two_entries ul li:nth-child(3) a img{

}
.two_entries ul li:nth-child(3) p{
    font-size: 80%;
}

.two_entries li a:hover img {
    transform: scale(1.1);}
.two_entries ul li p {
    background: #ffffff;
    display: table;
    text-align: center;
    margin: 0 auto;
    padding: 5px 10px;
    width: 85%;
    position: relative;
    /* bottom: 10%; */
    /* left: 7.5%; */
    transition: 0.2s;
    font-weight: 600;
}
.two_entries ul li a:hover p {
    background: #eaedf2;
    opacity: .9;
}
.two_entries p::before {
    border-color: transparent transparent #0058ca;
    border-style: solid;
    border-width: 0 0 11px 11px;
    bottom: 0px;
    content: '';
    height: 0;
    position: absolute;
    right: 0px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    width: 0;
}


.pribox{background: #e2ecf9;
padding: 30px 50px;}
.sekobox h2{
    font-size: 26px;
    text-align: left;
    font-weight: 600;
    border-left: 5px solid #0058ca;
    line-height: 60px;
    padding-left: 30px;
    margin-bottom: 40px;
    letter-spacing: 0.05em;
}

.sekobox h3 {
    margin-left: 8px;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.sekobox h3::before {
    position: relative;
    top: -2px;
    left: -8px;
    display: inline-block;
    width: 15px;
    height: 15px;
    content: '';
    border-radius: 100%;
    background: #0058ca;
}
.sekobox__thumb,
.single-hero,
.single-maincont .wp-block-image:not(.is-resized),
.sidebar__thumb {
    display: block;
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding-top: 58%;
}
.sekobox__thumb img,
.single-hero img,
.single-maincont .wp-block-image:not(.is-resized) img,
.sidebar__thumb img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.rec_entries img {
    width: 100%;
}
@media only
    screen and (max-width: 768px) {
        .aboutline dl{display: block;}
        .aboutline dl dt{border-bottom: none;
           text-align: center;
            padding: 20px;
            font-weight: 600;background: #eeeeee;}
        .aboutline dl dd{border-bottom: none;
        }
        .two_entries ul {display: block;
        }
        .sekobox h2{
            font-size: 22px;
            text-align: left;
            font-weight: 600;
            border-left: 4px solid #0058ca;
            line-height: 30px;
            padding-left: 30px;
            margin-bottom: 25px;
            letter-spacing: 0.05em;
        }

        .sekobox h3 {
            margin-left: 8px;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .sekobox h3::before {
            width: 13px;
            height: 13px;
            top: 0;

        }

}