/*
Theme Name: 2020 Mid
Author: Author
Author URI: URI
Version: 1.0
*/

/* ===========================================================
   # BASE
=========================================================== */
* {
    border: none;
    box-sizing: border-box;
    font: inherit;
    outline: none;
    vertical-align: bottom;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    }

html       {font-size: 10px;}
html, body {width: 100%; height: 100%;}
body       {
    background: #f5eedf;
    color: #402814;
    font: 400 1.6rem/1 YakuHanJPs,'Noto Sans JP',sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }


strong {font-weight: 500}
img    {max-width: 100%; height: auto}
ol,ul  {list-style:none}
table  {border-collapse: collapse;}


/* CLASS */
.align_c {text-align: center}
.align_l {text-align: left}
.align_r {text-align: right}

.auto   {margin: auto}
.clear  {clear: both}
.hidden {overflow: hidden}
.serif  {
    font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
    font-family: 'Noto Serif JP', serif;
    }

.posRe {position: relative}
.posAb {position: absolute}

.trans300 {transition: all 300ms 0s ease}

.boxradiusAll {border-radius: 10px;}
.boxradiusTop {border-top-left-radius: 5px; border-top-right-radius: 5px;}
.boxShadow    {box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4);}
.txtShadow    {text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);}

.flex {
    display: flex;
    flex-wrap: wrap;
    }
.flex > li:before {
    display: none;
    }

.disNon,
.noSP, .onPC {display: none}


/* = @media width 768px -->
----------------------------------------------------------- */
@media (min-width: 768px) {

.alignleft  {float: left}
.alignright {float: right}

.onSP      {display: none!important}
.noSP      {display: block}
strong.noSP,
span.noSP  {display: inline}
.noSP.flex {display: flex}

}


/* = @media width 1024px -->
----------------------------------------------------------- */
@media (min-width: 1024px) {

.onPC       {display: block}
.flex.onPC  {display: flex}
strong.onPC {display: inline}
.noPC       {display: none!important}

}


/* ===========================================================
   # HREF
=========================================================== */
a {
    color: #402814;
    outline: none;
    text-decoration: none;
    }
a:hover {}

.head a:hover,
.entryBody a {color: #a97c57;}

.newsList a,
.entryBody a {text-decoration: underline;}

/* BOX */
a.btnBn {
    background: #fff url(./img/arrow_bn.png) calc(100% - 2rem) 50%/9px no-repeat;
    border: 2px solid #d7c0ad;
    border-radius: 3rem;
    color: #aa7c57;
    display: inline-block;
    line-height: 4.5rem;
    padding: 0 4.5rem 0 3rem;
    min-width: 15rem;
    transition: all 300ms 0s ease
    }
a.btnBn:hover {
    background-color: #735034;
    background-image: url(./img/arrow_wh.png);
    border-color: #735034;
    color: #f5eedf;
    }

/* IMG
a:hover img {
    filter: alpha(opacity=90);
    -moz-opacity:0.9;
    opacity:0.9;
    } */


/* ===========================================================
   # LAYOUT
=========================================================== */
.wrap {}
.inner {
	width: 101rem;
	max-width: 100%;
}


/* = HEAD
----------------------------------------------------------- */
.head {
    background: #fff;
    justify-content: space-between;
    z-index: 9999;
    }
.headIn {
    justify-content: space-between;
    font-weight: 500;
    padding: 0 1rem;
    }
.headLogo {
    align-items: center;
    }
.headLogo img {
    width: auto;
    height: 3.6rem;
    }
.logo {
    padding: 1rem 1rem 1rem 0;
    }


/* = CONTENT
----------------------------------------------------------- */
.main {}


/* = SIDE
----------------------------------------------------------- */
.side {}


/* = FOOT
----------------------------------------------------------- */
.foot {
    background: url(./img/foot_bg.jpg) 50% 50%/cover no-repeat;
    }
.footIn {
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 1.4rem;
    padding: 3rem 0;
    }
.footIn p {
    line-height: 1.5;
    padding-bottom: 1rem;
    }
.footLogo img {
    max-width: 21.4%;
    }
.footName img {
    max-width: 64%;
    }
.footTel {
    font-size: 1.31em;
    }
.footTel a{
    color: #fff;
    }
.copy {
    font-size: 1.1rem;
    }

.gotoTop {
    background: #a97c57 url(./img/arrow_top.png) 50% 6px/28px no-repeat;
    color: #fff;
    font-size: .84rem;
    font-weight: 700;
    padding: 24px 0 0;
    width: 40px;
    height: 40px;
    position: fixed;
    right: 0;
    bottom: 0;
    transition: all 300ms 0s ease;
    z-index: 999;
    }
.gotoTop:hover {
    background-color: #c40f2d;
    }


/* = @media width 768px -->
----------------------------------------------------------- */
@media (min-width: 768px) {

.inner {max-width: calc(100% - 4rem);}

/* HEAD */
.headLogo img {height: 5.6rem;}
.logo         {padding: 2rem 2rem 2rem 0;}
.headTel      {
    font-size: 3.5rem;
    padding: 1.6rem 0 1rem;
    }
.headNav li {
    font-size: 1.4rem;
    padding-left: 1em;
    }
.headIn i {
    color: #aa7c57;
    /*vertical-align: 0;*/
    }
.headTel i {font-size: .9em;}

/* FOOT */
.footIn {
    font-size: 1.6rem;
    padding: 6rem 0;
    }
.footIn p {padding-bottom: 1.5rem;}
.footName {padding-top: 6rem;}

}


/* = @media width 1024px -->
----------------------------------------------------------- */
@media (min-width: 1024px) {

/* HEAD */
.headLogo img {height: 6rem;}
.logo         {padding-right: 3rem;}
.headNav li   {padding-left: 2em;}

/* FOOT */
.foot {margin-top: 1rem;}

}


/* ===========================================================
   # NAVI
=========================================================== */
body.open {position: fixed}


/* = MENU BTN
----------------------------------------------------------- */
.btnMenu {
    cursor: pointer;
    width: 3.8rem;
    height: 2.6rem;
    right: 1rem;
    top: 0;
    bottom: 0;
    }
.btnMenu span {
    background: #000;
    width: 100%;
    height: 2px;
    left: 0;
    transition: all 300ms 0s ease;
    }
.btnMenu, .btnMenu1 span {
    display: block;
    }
.btnMenu01       {top: 0;}
.btnMenu02       {top: 12px;}
.btnMenu03       {bottom: 0;}
.open .btnMenu01 {transform: translateY(1.2rem) rotate(45deg);}
.open .btnMenu02 {opacity: 0;}
.open .btnMenu03 {transform: translateY(-1.2rem) rotate(-45deg);}


/* = NAVI
----------------------------------------------------------- */
.spNav {
    background: #fff;
    display: none;
    padding-top: 6rem;
    width: 100%;
    height: 100%;
    overflow: auto;
    position: fixed;
    top: 0;
    z-index: 999;
    -webkit-overflow-scrolling: touch;
    }

.gNav ul {
    border-top: 2px solid #ddd;
    justify-content: space-between;
    }
.gNav li {
    width: 50%;
    height: 6.5rem;
    }
.gNav li.w100    {width: 100%;}
.gNav li.borderR {border-right: 1px solid rgba(169,124,87,0.3);}

.gNav li a {
    border-bottom: 1px solid rgba(169,124,87,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.4;
    padding: 1.8rem 1rem;
    width: 100%;
    height: 100%;
    }


/* = FOOT NAVI
----------------------------------------------------------- */
.footNav ul {
    justify-content: center;
    width: 74rem;
    }
.footNav li {
    border-left: 1px solid #472f1c;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    padding: 0 .5em;
    }
.footNav li:first-child,
.footNav li.menu-item-427 {
    border: none;
    }
.footNav li.onSP {
    display: block !important;
    }
.footNav li.noFoot,
.footNav li.menu-item-has-children {
    display: none !important;
    }
.footNav a:hover {
    text-decoration: underline;
    }


/* = @media width 768px -->
----------------------------------------------------------- */
@media (min-width: 768px) {

body.open {position: static}

/* NAVI */
.spNav {
    background: rgba(0,0,0,0.6);
    border-top: 5px solid #aa7c57;
    display: block !important;
    overflow: visible;
    padding: 0;
    height: auto;
    position: absolute;
    }
.gNav ul {
    border: none;
    flex-direction: row;
    }
.gNav li {
    border: none !important;
    width: auto !important;
    height: auto;
    }
.gNav li a {
    border: none;
    color: #fff;
    font-size: 1.3rem;
    line-height: 6.5rem;
    margin-right: 1px;
    padding: 0 .5rem;
    }
.gNav li a:hover,
.gNav li.current-menu-item a, .gNav li.current-menu-parent a,
.gNav li.current-category-ancestor a, .gNav li.current-page-ancestor a {
    background: #a97c57;
    }

/* CHILD */
.gNav li.menu-item-has-children     {position: relative;}
.gNav li.menu-item-has-children > a {pointer-events: none;}
.gNav ul.sub-menu {
    width: 100%;
    position: absolute;
    left: 0;
    top: 6.5rem;
    }
ul.sub-menu li {
    height: 0;
    overflow: hidden;
    transition: .3s;
    }
li.menu-item-has-children:hover > ul.sub-menu > li {
    height: 5rem;
    /*overflow: visible;*/
    }
ul.sub-menu li a {
    background: rgba(0,0,0,.6) !important;
    border-top: 1px solid rgba(255,255,255,.2);
    line-height: 5rem;
    }
.gNav li.menu-item-has-children:hover > a,
ul.sub-menu li a:hover {
    background: #a97c57 !important;
    }

}


/* = @media width 1024px -->
----------------------------------------------------------- */
@media (min-width: 1024px) {

/* NAVI */
.gNav ul   {justify-content: center;}
.gNav li a {
    font-size: 1.5rem;
    padding: 0 1.4rem;
    }

}


/* ===========================================================
   # HOME
=========================================================== */
.homeCont {
    padding: 5rem 2rem;
    }
.homeCont h2 {
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 3rem;
    }
.homeCont p {
    font-size: 1.46rem;
    line-height: 2;
    }


/* = MV
----------------------------------------------------------- */
.homeMv_img {
    width: 100%;
    }


/* = PROPERTY
----------------------------------------------------------- */
.homeProperty {
    background: #fff;
    margin-top: 5rem;
    }
.homeProperty:before {
    border-style: solid;
    border-width: 0 49.5vw 5rem 49.5vw;
    border-color: transparent transparent #fff transparent;
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: -5rem;
    }

/* LIST */
.homeProperty_list {
    justify-content: space-around;
    line-height: 1.5;
    }
.homeProperty_item {
    margin-bottom: 1rem;
    width: 100%;
    }
.homeProperty_link {
    border-bottom: 5px solid #d7c0ad;
    align-items: flex-end;
    padding: 1rem 0;
    }
.homeProperty_link:hover {
    border-color: #c40f2d;
    }
.homeProperty_link.sold {
    pointer-events: none;
    }

.homeProperty_thumb {
    width: 46.8%;
    }
.homeProperty_body {
    padding-left: 1rem;
    width: 53.2%;
    }
.homeProperty_ttl {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 1rem;
    }
.homeProperty_price {
    font-size: 1.5em;
    font-weight: 400;
    vertical-align: 0;
    }

/* SOLD */
.icoSold {
    background: #c40f2f;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-weight: 500;
    line-height: 1;
    margin: 5px 0;
    padding: 1px 1em 2px;
    vertical-align: 0;
    }


/* = NEWS
----------------------------------------------------------- */
.newsList {
    margin-bottom: 3rem;
    }
.newsList_item {
    border-bottom: 1px solid #d7c0ad;
    line-height: 1.3;
    padding: 1.5rem 0;
    }
.newsList_date {
    display: block;
    padding-bottom: .5rem;
    }


/* = BN
----------------------------------------------------------- */
.homeBn {
    background: #fff;
    justify-content: center;
    padding: 2rem 1rem;
    }
.homeBn img {
    width: auto;
    height: 4rem;
    }


/* = @media width 768px -->
----------------------------------------------------------- */
@media (min-width: 768px) {

.homeCont {padding: 5rem 0;}
.homeCont p {font-size: 1.6rem;}

/* PROPERTY */
.homeProperty        {margin-top: 10rem;}
.homeProperty:before {
    border-bottom-width: 10rem;
    top: -10rem;
    }

/* PROPERTY LIST */
.homeProperty_item {
    padding: 0 1rem;
    width: 50%;
    max-width: 48rem;
    }
.homeProperty_link {padding: 1.5rem 0;}
.homeProperty_body {padding-left: 2rem;}

/* NEWS */
.newsList      {margin-bottom: 5rem;}
.newsList_item {padding: 2.7rem;}
.newsList_date {
    display: inline-block;
    padding: 0 18% 0 0;
    }

}


/* = @media width 1024px -->
----------------------------------------------------------- */
@media (min-width: 1024px) {

.homeCont    {padding: 12rem 0;}
.homeCont h2 {
    font-size: 3rem;
    line-height: 1.6;
    }
.homeCont p {
    line-height: 2.2;
    padding: 0 2rem;
    }

}