@charset "utf-8";
@charset "utf-8";
.beer-slider {
display: inline-block;
position: relative;
overflow: hidden; }
.beer-slider *, .beer-slider:before, .beer-slider:after,
.beer-slider *:before,
.beer-slider *:after {
box-sizing: border-box; }
.beer-slider img, .beer-slider svg {
vertical-align: bottom; }
.beer-slider > * {
height: 100%; }
.beer-slider > img {
max-width: 100%;
height: auto; }
.beer-reveal {
position: absolute;
left: 0;
top: 0;
right: 50%;
overflow: hidden;
z-index: 1;
opacity: 0;
transition: opacity 0.35s; }
.beer-reveal > :first-child {
width: 200%;
max-width: none;
height: 100%; }
.beer-reveal > img:first-child {
height: auto; }
.beer-range {
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
height: 100%;
margin: 0;
left: -1px;
width: calc(100% + 2px);
cursor: pointer;
-webkit-appearance: slider-horizontal !important;
-moz-appearance: none;
opacity: 0;
-ms-touch-action: auto;
touch-action: auto; }
.beer-range::slider-thumb {
-webkit-appearance: none;
height: 300vh; }
.beer-range::-moz-range-thumb {
-webkit-appearance: none;
height: 300vh; }
.beer-range::-ms-tooltip {
display: none; }
.beer-handle {
position: absolute;
z-index: 2;
pointer-events: none;
opacity: 0;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
color: #000;
background: rgba(255, 255, 255, 0.5);
width: 66px;
height: 66px;
border-radius: 50%;
box-shadow: 0 0 6px rgba(0, 0, 0, 0);
transition: background 0.3s, box-shadow 0.3s, opacity 0.5s 0.25s; }
.beer-handle:before, .beer-handle:after {
content: '';
position: absolute;
width: 10px;
height: 10px;
top: 50%;
border-top: solid 2px;
border-left: solid 2px;
transform-origin: 0 0; }
.beer-handle:before {
left: 10px;
transform: rotate(-45deg); }
.beer-handle:after {
right: 0;
transform: rotate(135deg); }
.beer-range:focus ~ .beer-handle {
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); }
.beer-slider[data-beer-label]:after,
.beer-reveal[data-beer-label]:after {
content: attr(data-beer-label);
position: absolute;
top: 1.5rem;
line-height: 1;
padding: 0.5rem;
border-radius: 0.125rem;
background: rgba(255, 255, 255, 0.75); }
.beer-slider[data-beer-label]:after {
right: 1.5rem; }
.beer-reveal[data-beer-label]:after {
left: 1.5rem; }
.beer-slider[data-beer-label=""]:after,
.beer-reveal[data-beer-label=""]:after {
content: none; }
.beer-ready .beer-reveal, .beer-ready .beer-handle {
opacity: 1; }

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;500;700;900&display=swap"); html, body, div, span, applet, object, iframe, h2, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
background: transparent;
border: 0;
outline: 0;
font-size: 1em;
}
html {
font-size: 62.5%;
}
body, table, input, textarea, select, option {
font-family:"游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
.en {
font-family: 'Lato', sans-serif;
font-weight: 400;
}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
img {
vertical-align: top;
max-width: 100%;
}
a,
a:link {
color: #333;
text-decoration: none;
-webkit-transition: all .3s;
transition: all .3s;
}
a:visited {
color: #333;
}
a:hover {
color: #333;
opacity: 0.7;
}
a:active {
color: #333;
}
a.nolink {
pointer-events: none;
} body {
min-width: 1220px;
color: #333;
font-size: 1.5rem;
font-weight: 500;
line-height: 1.6;
text-size-adjust: none;
-webkit-text-size-adjust: none;
background-color: #F5F2ED;
}
#container {
position: relative;
text-align: left;
}
h1{
position: absolute;
bottom: 0px;
left: 0;
right: 0;
width: 100%;
font-size: 1.2rem;
font-weight: normal;
text-align: center;
z-index: 1;
}
#main {
margin-bottom: 68px;
}
a[href^="tel:"] {
cursor: default;
pointer-events: none;
}
@media all and (min-width: 768px) {
.sp {
display: none !important;
}
}
@media all and (max-width: 767px) {
body {
min-width: inherit;
font-size: 1.2rem;
}
body.fixed {
position: fixed;
width: 100%;
height: 100%;
}
a:hover,
a:hover img {
opacity: 1 !important;
}
.pc {
display: none !important;
}
a[href^="tel:"] {
cursor: pointer;
pointer-events: auto;
}
#container {
padding-top: 0px;
}
#main {
margin-bottom: 0;
}
} .topNavi {
background-color: #fff;
font-family: "Noto Sans JP", sans-serif;
}
.topList {
margin: 0 auto;
max-width: 120rem;
background-color: #FFF;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
}
.topList li {
border-right: 0.1rem solid #ddd;
}
.topList li:first-child {
border-left: 0.1rem solid #ddd;
}
.topList li a {
padding: 0.1rem 1rem 0;
width: 14.97rem;
min-height: 4rem;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
.topList .li01 a span {
padding: 1rem 0 1rem 3.5rem;
background: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/brand.png) no-repeat left center / 2.6rem;
}
@media all and (min-width: 897px) {
.topList li:hover {
background-color: #8e9291;
}
.topList li a:hover {
color: #fff;
}
.topList .li01 a:hover span {
background-image: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/brand_on.png);
}
}
@media all and (max-width: 896px) {
.topNavi {
position: relative;
z-index: 15;
}
.topList li:first-child {
width: 25.9%;
}
.topList li:first-child {
border-left: 0;
border-right-color: #8e9291;
}
.topList li:not(:first-child) {
width: 24.7%;
border-right: 0;
}
.topList li.li02 {
border-right: 0.1rem solid #8e9291;
}
.topList li a {
padding: 0 0.1rem;
width: auto;
font-size: 1rem;
}
.topList .li01 a span {
padding: 1rem 0 1rem 2.7rem;
background-size: 2.2rem;
}
} .now {
background-color: #8e9291;
}
.now a {
color: #FFF;
} #gHeader {
margin: 0 auto 20px;
position: absolute;
width: 100%;
top: 40px;
left: 0;
z-index: 9999;
}
#gHeader .header-inner {
background-color: #F5F2ED;
overflow: hidden;
}
#gHeader .header-inner .header-top {
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
}
#gHeader h2 {
padding: 15px 0 0 0;
float: left;
width: 353px;
box-sizing: border-box;
}
#gHeader h2 a:hover {
opacity: 1;
}
#gHeader h2 img {
width: 270px;
}
#gHeader .hBox {
float: right;
width: 470px;
}
#gHeader .hBox .hTxt {
margin: 6px 0;
float: left;
font-size: 1.1rem;
font-weight: bold;
width: 245px;
}
#gHeader .hBox .hTxt p {
margin-left: 0;
}
#gHeader .hBox .hTxt .tel {
padding-left: 31px;
margin: 0 0 1px;
font-weight: 700;
font-size: 2.3rem;
line-height: 1;
background: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/tel_img01.png) no-repeat left 2px top 7px;
background-size: 22px 23px;
}
#gHeader .hBox .hTxt .tel span {
font-size: 3.2rem;
}
#gHeader .hBox .hLink {
float: right;
width: 225px;
display: flex;
margin-top: 6px;
}
#gHeader .hBox .hLink li {
width: 50%;
}
#gHeader .hBox .hLink li a {
padding: 10px 5px;
position: relative;
display: block;
height: 100%;
font-weight: 700;
color: #fff;
font-size: 1.2rem;
line-height: 1.25;
text-align: center;
box-sizing: border-box;
background: #A6A29E;
}
#gHeader .hBox .hLink li:last-of-type a {
background-color: #8E9291;
}
#gHeader .hBox .hLink li:not(:nth-child(2n)) a:before {
position: absolute;
background: #fff;
top: 5px;
bottom: 5px;
right: 0;
width: 1px;
content: "";
}
#gHeader .hBox .hLink li a span {
margin-top: 8px;
display: block;
}
#gHeader .hBox .hLink li a img {
width: 24px;
}
.menu {
float: right;
width: 71px;
}
.menu .over {
display: none;
}
.menu.on .over {
display: block;
}
.menu.on .out {
display: none;
}
@media all and (min-width: 768px) {
.menuBox {
display: none !important;
}
}
.menuBox {
position: fixed;
top: 100px;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
color: #fff;
background: rgba(62,62,62,0.6);
overflow-y: auto;
display: none;
z-index: 10000;
transition: .3s;
}
body.fixed .menuBox ,
.menuBox.scroll {
top: 60px;
}
.menuBox .bg {
margin-top: 0px;
padding: 2px 15px 13px;
background: #fff;
}
.menuBox a {
color: #111;
font-size: 1.5rem;
font-weight: bold;
}
.menuBox .menuUl > li {
border-bottom: 1px dashed #f0f0f0;
}
.menuBox .menuUl > li > a {
padding: 10px 18px 9px;
display: block;
}
.menuBox .menuUl > li.btn > a {
border: 1px solid #8E9291;
padding: .5em;
display: block;
text-align: center;
}
.menuBox .menuUl > li.btn > a span {
font-size: 1.2rem;
display: block;
}
.menuBox .menuUl > li > .subNavi {
padding: 4px 30px 13px;
display: none;
}
.menuBox .menuUl > li > .subNavi li:not(:last-child) {
margin-bottom: 11px;
}
.menuBox .menuUl > li > .subNavi li a {
display: block;
padding-left: 10px;
font-size: 1.4rem;
position: relative;
vertical-align: top;
font-weight: 500;
}
.menuBox .menuUl > li > .subNavi li a span {
font-size: .9em;
padding-left: .5em;
}
.menuBox .menuUl > li > .subNavi li a:before {
width: 4px;
height: 1px;
position: absolute;
left: 0;
top: 50%;
background: #FFF;
content: "";
}
.menuBox .menuUl .liStyle > a {
background: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/icon12.png) no-repeat right 14px center;
background-size: 14px 14px;
pointer-events: inherit;
}
.menuBox .menuUl .liStyle > a.on {
background: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/icon13.png) no-repeat right 14px center;
background-size: 14px 14px;
}
.menuBox .whiteUl {
margin: 16px 8px 1px;
display: flex;
justify-content: space-between;
}
.menuBox .whiteUl li {
width: 49.3%;
}
.menuBox .whiteUl li a {
padding: 11px 2px 11px;
position: relative;
display: flex;
color: #fff;
align-items: center;
justify-content: center; font-weight: 700;
font-size: 1.2rem;
line-height: 1.25;
text-align: center;
box-sizing: border-box;
background: #8E9291;
border-radius: 3px;
}
.menuBox .whiteUl li a span {
display: block;
}
.menuBox .whiteUl li img {
width: 24px;
}
.menuBox .whiteUl li a .txt {
padding-left: 18px;
}
.menuBox .txtLink {
margin-bottom: 8px;
text-align: right;
font-size: 1.3rem;
font-weight: bold;
}
.menuBox .txtLink a {
padding-left: 5px;
display: inline-block;
background: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/icon11.png) no-repeat left center;
background-size: 4px 5px;
}
.menuBox .hTxt {
font-size: 1.1rem;
font-weight: bold;
text-align: center;
color: #111;
}
.menuBox .hTxt .txt {
font-size: 1.3rem;
}
.menuBox .hTxt .tel a {
display: inline-block;
padding: 0 31px;
color: #111;
font-weight: 700;
font-size: 2.3rem;
line-height: 1;
background: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/tel_img02.png) no-repeat left 2px top 7px;
background-size: 22px 23px;
}
.menuBox .hTxt .tel span {
font-size: 3.2rem;
}
@media all and (max-width: 767px) {
#gHeader {
margin: 0;
position: fixed;
z-index: 1000;
top: 40px;
left: 0;
right: 0;
height: 60px;
width: 100%;
transform: translateX(0px);
background-color: #8E9291;
transition: .3s;
}
body.fixed #gHeader ,
#gHeader.scroll {
top: 0px;
}
body.fixed #gHeader {
background-color: #fff;
}
#gHeader h2 {
padding: 8px 0 0 13px;
width: 243px;
}
#gHeader h2 img.sp {
display: none;
}
#gHeader h2 img {
width: 100%;
}
#gHeader .hBox {
display: none;
}
#gHeader .header-inner .header-top {
width: 100%;
}
} #gNavi {
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
clear: both;
padding-top: 20px;
}
#gNavi > li {
font-weight: bold;
line-height: 1;
text-align: center;
position: relative;
}
#gNavi > li:not(:first-child) {
border-left: 1px solid rgba(255,255,255,0.8);
}
#gNavi > li span {
color: #fff;
display: block;
font-weight: bold;
}
#gNavi > li > a {
padding: 2px 20px;
display: block;
}
#gNavi > li .subNavi {
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: left;
display: none;
background: #F5F2ED;
z-index: 1000;
}
#gNavi > li:nth-child(3) .subNavi {
width: 10em;
}
#gNavi > li:nth-child(5) .subNavi {
width: 12em;
}
#gNavi > li:nth-child(8) .subNavi {
width: 11em;
}
#gNavi > li .subNavi li {
border-bottom: 1px solid #111;
}
#gNavi > li .subNavi li span {
display: inline;
padding-left: 1em;
color: #333;
}
#gNavi > li .subNavi li a {
display: block;
padding: 13px;
}
@media all and (max-width: 767px) {
#gNavi {
display: none;
}
} #gFooter {
padding-top: 56px;
position: relative;
overflow: hidden;
background: #8E9291;
}
#gFooter .fLogo {
margin: 0 auto 26px;
width: 270px;
}
#gFooter .fLogo a {
opacity: 1;
}
#gFooter .add {
margin-bottom: 49px;
color: #FFF;
font-size: 1.4rem;
line-height: 23px;
text-align: center;
}
#gFooter .add a {
color: #fff;
}
#gFooter .fBox {
margin: 0 auto;
width: 1200px;
}
#gFooter .fNaviBox {
padding: 31px 0 25px;
border-top: 1px solid #FFF;
}
#gFooter .fNavi {
margin-right: 45px;
}
#gFooter .fNavi li {
line-height: 23px;
}
#gFooter .fNavi li a {
color: #FFF;
font-size: 1.3rem;
font-weight: bold;
}
#gFooter .fNavi li.btn {
border: 1px solid #fff;
padding: 0.5em 1em;
margin-top: 1em;
text-align: center;
}
#gFooter .fNavi li.btn a {
font-size: 1.6rem;
}
#gFooter .fNavi li.btn a span{
font-size: 1.2rem;
display: block;
}
#gFooter .fNavi .subNavi {
margin-left: 4px;
}
#gFooter .fNavi .subNavi li a {
padding-left: 10px;
display: inline-block;
position: relative;
vertical-align: top;
font-weight: 500;
}
#gFooter .fNavi .subNavi li a span{
font-size: .9em;
padding-left: .5em;
}
#gFooter .fNavi .subNavi li a:before {
width: 4px;
height: 1px;
position: absolute;
left: 0;
top: 50%;
background: #FFF;
content: "";
}
#gFooter .copyright {
padding: 18px 15px 40px;
font-size: 1.2rem;
text-align: center;
background: #FFF;
font-family: 'Lato', sans-serif;
}
#gFooter .pageTop {
width: 55px;
height: 55px;
position: fixed;
right: 0;
bottom: 0;
z-index: 1000;
}
@media all and (max-width: 767px) {
#gFooter {
padding: 26px 22px 70px;
}
#gFooter .fLogo {
margin: 0 auto 19px;
width: 91%;
max-width: 216px;
}
#gFooter .add {
margin-bottom: 30px;
}
#gFooter .fBox {
width: auto;
}
#gFooter .fNaviBox {
padding: 15px 5px 0 10px;
display: none;
}
#gFooter .fNavi {
margin-right: 0;
width: 60%;
max-width: 260px;
}
#gFooter .fNavi:nth-child(2n) {
width: 40%;
max-width: 200px;
}
#gFooter .fNavi li a {
padding-right: 10px;
display: block;
font-size: 1.25rem;
}
#gFooter .fNavi:nth-child(2n) li a {
padding-right: 0;
}
#gFooter .copyright {
width: calc(100% - 36px);
padding: 3px 15px 41px;
position: absolute;
left: 0;
bottom: 0;
display: flex;
align-items: center;
font-size: 1.1rem;
line-height: 14px;
text-align: left;
box-sizing: border-box;
}
#gFooter .pageTop {
width: 36px;
height: 36px;
bottom: 36px;
}
.fix-menu {
position: fixed;
left: 0;
bottom: 0;
display: flex;
z-index: 10000;
width: 100%;
justify-content: space-between;
background-color: #fff;
}
.fix-menu li {
width: 33.1%;
}
.fix-menu li a {
display: block;
background-color: #8E9291;
text-align: center;
color: #fff;
line-height: 36px;
height: 36px;
box-sizing: border-box;
}		
.fix-menu li img {
width: 20px;
padding-right: 6px;
vertical-align: -6px;
}
}  .taLeft { text-align: left !important; }
.taCenter { text-align: center !important; }
.taRight { text-align: right !important; } .fwNormal { font-weight: normal !important; }
.fwBold { font-weight: bold !important; } * html .clearfix {
zoom: 1;
}
*+html .clearfix {
zoom: 1;
}
.clearfix:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
} .flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.flex.left {
justify-content: flex-start;
}
.flex.center {
justify-content: center;
}
.flex.right {
justify-content: right;
} .content {
margin: 0 auto;
padding: 0 20px;
max-width: 1160px;
}
@media all and (max-width: 767px) {
} #main .headLine01 {
font-size: 2.4rem;
text-align: center;
}
#main .headLine01 span {
margin-top: 7px;
display: block;
}
#main .headLine01 span img {
width: 141px;
}
@media all and (max-width: 767px) {
#main .headLine01 span {
margin-top: 0;
}
} #main .comLink.wid {
margin: 0 auto;
width: 387px;
}
#main .comLink a {
padding: 15px 65px;
color: #fff;
font-size: 1.4rem;
font-weight: bold;
text-align: center;
display: block;
background: #7D8281 url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/arrow01.png) no-repeat right 25px center;
background-size: 39px auto;
border-radius: 3px;
transition: .3s;
}
#main .comLink a:hover {
background: #333 url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/arrow01.png) no-repeat right 15px center;
background-size: 39px auto;
}
@media all and (max-width: 767px) {
#main .comLink {
margin: 0 auto;
max-width: 400px;
}
#main .comLink.wid {
width: auto;
}
#main .comLink a {
padding-top: 14px;
}
}
@media all and (max-width: 374px) {
#main .comLink a {
padding-left: 40px;
padding-right: 40px;
background-position: right 10px center;
}
}
@media all and (-ms-high-contrast:none){
#gHeader .hBox .hTxt {
margin-top: 22px;
}
#gHeader .hBox .hTxt .tel {
margin: -3px 0 3px;
}
#main .comLink a {
padding: 18px 65px 12px;
}
#gFooter .fNavi .subNavi li a::before {
margin-top: -3px;
}
} .fadeCom{
opacity: 0;
-webkit-transition: 700ms ease;
-o-transition: 700ms ease;
transition: 700ms ease;
-webkit-transform: translate3d(0, 30px, 0) scale(0.9825, 0.9825);
-ms-transform: translate3d(0, 30px, 0) scale(0.9825, 0.9825);
transform: translate3d(0, 30px, 0) scale(0.9825, 0.9825);
-webkit-transition-property: opacity tranfrom;
-o-transition-property: opacity tranfrom;
transition-property: opacity tranfrom;
}
.fadeCom__On{
-webkit-transform:translate3d(0, 0, 0) scale(1,1);
-ms-transform:translate3d(0, 0, 0) scale(1,1);
transform:translate3d(0, 0, 0) scale(1,1);
opacity: 1;
} .slideCom {
position: relative;
}
.slideCom::before,
.slideCom::after {
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
left: auto;
display: block;
position: absolute;
background-color: #fff;
-webkit-transition: 410ms cubic-bezier(.63,.02,.15,1) width;
-o-transition: 410ms cubic-bezier(.63,.02,.15,1) width;
transition: 410ms cubic-bezier(.63,.02,.15,1) width;
content: '';
z-index: 10;
}
.slideCom::after {
background-color: rgba(255, 255, 255, .2);
transition-delay: 350ms;
}
.slideCom_top::before {
-webkit-transition-delay: 650ms;
-o-transition-delay: 650ms;
transition-delay: 650ms;
}
.slideCom_top::after{
-webkit-transition-delay: 1200ms;
-o-transition-delay: 1200ms;
transition-delay: 1200ms;
}
.slideCom__On::before,
.slideCom__On::after{
width: 0%
}
@media screen and ( min-width: 769px ){
.timing_D__01,
.timing_D__01::before,
.timing_D__01::after {
transition-delay: 150ms;
}
.timing_D__02,
.timing_D__02::before,
.timing_D__02::after {
transition-delay: 300ms;
}
.timing_D__03,
.timing_D__03::after,
.timing_D__03::before {
transition-delay: 450ms;
}
.timing_D__04,
.timing_D__04::after,
.timing_D__04::before {
transition-delay: 600ms;
}
.timing_D__05,
.timing_D__05::after,
.timing_D__05::before {
transition-delay: 600ms;
}
}.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
} .slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 2px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 30px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}
 #splash {
position: fixed;
width: 100%;
height: 100%;
background: #fff;
z-index: 9999999;
text-align:center;
color:#fff;
display: none;
}
#splash-logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation:
chikachika 0.1s ease 0.7s infinite,
chikachika2 0.1s ease 1.2s forwards;
}
.overlay {
display: none;
width: 100%;
height: 100%;
position: fixed;
z-index: 9999998;
top: 0;
left: 0;
background-color: #fff;
}
.overlay .logo {
display: block;
text-align: center;
margin: 30vh 0 30px;
line-height: 1.6;
}
.overlay .logo img {
display: block;
margin: 0 auto 50px;
width: 270px;
}
.overlay .btn_area {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 50vh;
transform: translateY(-50%);
}
.overlay .btn_area .btn ,
.overlay .btn_area2 .btn {
transition: .5s;
display: block;
margin: 0 10px;
}
.overlay .btn_area .btn:hover ,
.overlay .btn_area2 .btn:hover {
}
.overlay .btn_area button ,
.overlay .btn_area .btn a {
background-color: #fff;
border: 1px solid #000;
cursor: pointer;
color: #000;
padding: 1em;
font-size: 18px;
font-family: 'Kosugi Maru', "游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
width: 100%;
border-radius: 6px;
display: block;
text-align: center;
transition: .3s;
box-sizing: border-box;
margin-bottom: 1em;
line-height: 1.8;
}
.overlay .btn_area button span ,
.overlay .btn_area .btn a span {
display: block;
font-size: 12px;
} .overlay .btn_area .btn button:hover ,
.overlay .btn_area2 .btn a:hover {
opacity: .7;
}
.overlay .btn_area .btn ,
.overlay .btn_area2 .btn {
width: 300px;
}
#gHeader .header-inner {
display: none;
}
#mask .st0{
fill:none;
stroke:#fff;
stroke-width:35; stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
stroke-dasharray: 1500; stroke-dashoffset:1500; }
#gNavi {
padding-top: 100px;
}
.mainImg {
margin: 0 auto 0px;
position: relative;
width: 100%;
min-height: 550px;
height: calc(100vh - 35px);
display: flex;
padding-top: 35px;
}
.mainImg .h-txt {
position: absolute;
right: 5px;
top: 5px;
}
.mainImg .h-txt span {
font-weight: bold;
}
.mainImg ul {
position: absolute;
left: 1%;
bottom: 270px;
width: 18%;
}
.mainImg ul li:last-of-type {
margin-top: 1px;
}
.mainImg ul li a {
display: flex;
flex-wrap: wrap;
align-items: center;
background: #7D8281 url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/arrow01.png) no-repeat right 5px bottom 5px;
padding: 14px;
color: #fff;
background-size: 40px;
}
.mainImg ul li a img {
width: 44px;
margin: 0 10px;
}
.mainImg ul li a .ttl {
margin-right: 10px;
}
.mainImg ul li a .small {
font-size: 12px;
margin-top: 8px;
}
.mainImg .svg-area {
position: absolute;
top: 56%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 100;
}
.mainImg .svg-area p {
color: #fff;
text-align: center;
font-size: 2.2rem;
transition-delay: 8s;
} .mainImg .slick-slider ,
.mainImg .slick-slider .slick-list ,
.mainImg .slick-slider .slick-track ,
.mainImg .slick-slider .slick-slide > div ,
.mainImg .foo {
width: 100%;
height: 100%;
background-size: cover;
background-position: left top;
}
.mainImg .foo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.mainImg .slick-slider {
width: 100%;
}
.mainImg h2 {
width: 20%;
position: absolute;
top: 50px;
z-index: 10;
}
.mainImg h2 img {
width: 220px;
display: block;
margin: 0 auto;
}
.mainImg .foo.bg01 {
background-image: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/image/main_img_slider10.png)
}
.mainImg .foo.bg02 {
background-image: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/image/main_img_slider11.png)
}
.mainImg .foo.bg03 {
background-image: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/image/main_img_slider09.png)
}
.mainImg .foo.bg04 {
background-image: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/image/main_img_slider06.png)
}
.mainImg .main_text01 {
position: absolute;
right: 30px;
bottom: 30px;
width: 300px;
height: auto;
z-index: 1;
}
.mainImg .textBox {
position: absolute;
top: 58px;
right: 35px;
width: 450px;
}
.mainImg .textBox h2 {
margin-bottom: 41px;
}
.mainImg .textBox p {
padding-left: 140px;
font-weight: bold;
font-size: 1.4rem;
text-align: center;
}
.mainImg .textBox p span {
margin-right: 3px;
display: inline-block;
color: #fff;
width: 94px;
background: #111;
}
.slick-next,
.slick-prev {
position: absolute;
bottom: 0;
width: 97px;
height: 85px;
cursor: pointer;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #DFAC5C;
z-index: 1;
overflow: hidden;
text-indent: -9999px;
transition: .3s;
}
.slick-prev {
left: 0;
background: #DFAC5C url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/icon03.png) no-repeat center center;
background-size: 11px auto;
}
.slick-next {
left: 97px;
background: #DFAC5C url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/icon04.png) no-repeat center center;
background-size: 11px auto;
border-left: 1px solid #fff;
}
.slick-next:hover,
.slick-prev:hover {
opacity: 0.7;
}
.mainImg .scroll {
font-size: 1.6rem;
font-weight: 700;
position: absolute;
bottom: 100px;
right: 0;
letter-spacing: 1.5px;
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
transform-origin: right bottom;
-webkit-transform-origin: right bottom;
animation: scroll-anime 3s linear infinite;
transform-origin: 50% 50%;
margin: 1rem 0 !important;
}
@keyframes scroll-anime {
0% { transform: translateY(0) rotate(270deg)}
33.33333% { transform: translateY(-10px) rotate(270deg)}
66.66667% { transform: translateY(0) rotate(270deg)}
100% { transform: translateY(0) rotate(270deg)}
}
.mainImg .scroll a {
padding-right: 130px;
position: relative;
display: block;
color: #fff;
}
.mainImg .scroll a:before {
position: absolute;
right: 0;
top: 50%;
width: 118px;
height: 1px;
background: #fff;
content: "";
}
#main .inner {
max-width: 1164px;
margin: 0 auto;
}
#main .headLine01 {
font-size: 1.4rem;
}
#main .headLine01 .en {
font-size: 2.8rem;
}
#main .concept {
padding: 6rem 0;
margin-bottom: 6rem;
text-align: center;
background-color: #fff;
font-size: 1.6rem;
}
#main .concept .text {
line-height: 1.875;
} #main .sec01 {
margin-bottom: 0px;
padding: 0px 0 73px;
}
#main .sec01 .headLine01 {
text-align: center;
margin-bottom: 40px; }
#main .sec01 .headLine01 span img {
width: 84px;
}
#main .sec01 .headLine01 span {
margin-top: 0;
}
#main .sec01 .subBox {
margin: 0 auto;
width: 1164px; margin-bottom: 1em;
}
#main .sec01 .subBox ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#main .sec01 ul li {
width: 23%;
margin: 0 0 10px 0;
}
#main .sec01 ul li:nth-child(3n) {
margin: 0 0 20px 0;
}
#main .sec01 ul li .photo {
float: left;
width: 100%;
height: 150px;
position: relative;
margin-bottom: 1em;
overflow: hidden;
}
#main .sec01 ul li .photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
#main .sec01 ul li .textBox {
padding: 3px 0;
}
#main .sec01 ul li .textBox p {
font-size: 1.4rem;
line-height: 1.857;
}
#main .sec01 ul li .textBox .txt {
margin-left: 5px;
}
#main .sec01 ul li .textBox .ttl {
margin-bottom: 2px;
font-weight: bold;
font-size: 1.6rem;
}
#main .sec01 ul li .textBox .time {
line-height: 1.5;
margin-right: 1em;
}
#main .sec01 ul li .textBox .time span {
padding: 0 10px;
display: inline-block;
color: #fff;
font-size: 1.1rem;
font-family: 'Lato', sans-serif;
font-weight: 700;
background: #7D8281;
vertical-align: 1px;
margin-left: 6px;
}
#main .sec01 ul li .textBox .more {
margin-top: 4px;
text-align: right;
}
#main .sec01 ul li .textBox .more a {
padding-right: 65px;
display: inline-block;
text-transform: uppercase;
font-size: 1.3rem;
font-family: 'Lato', sans-serif;
font-weight: 700;
background: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/icon08.png) no-repeat right 5px center;
background-size: 39px auto;
transition: .3s;
}
#main .sec01 ul li .textBox .more a:hover {
background: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/icon08.png) no-repeat right center;
background-size: 39px auto;
}
#main .banner-eco {
text-align: center;
margin-bottom: 70px;
}
#main .banner-eco img {
display: block;
margin: 0 auto 8px;
}
.sec02 {
margin-bottom: 85px;
background: #8E9291;
border: 1px solid #8E9291;
}
.sec02 ul {
display: flex;
flex-wrap: wrap;
}
.sec02 ul li {
padding: 20px 10px;
color: #fff;
font-weight: bold;
line-height: 1.6;
width: 50%;
text-align: center;
box-sizing: border-box;
}
.sec02 ul li .ttl {
margin-bottom: 10px;
font-size: 2.6rem;
line-height: 1.16;
display: table;
width: 100%;
}
.sec02 ul li .ttl span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.sec02 ul li .img {
margin-bottom: 15px;
}
.sec02 ul li .img img {
width: 60px;
}
.sec02 ul li:not(:nth-child(4n)) {
border-right: 1px solid #fff;
}
.sec02 ul li .link {
margin: 24px auto 0;
width: 138px;
}
.sec02 ul li .link a {
padding: 8px 17px;
display: block;
color: #fff;
font-size: 1.3rem;
font-family: 'Lato', sans-serif;
font-weight: 700;
text-transform: uppercase;
text-align: left;
border: 1px solid #fff;
background: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/arrow01.png) no-repeat right 16px center;
background-size: 39px auto;
transition: .3s;
}
.sec02 ul li .link a:hover {
background: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/arrow01.png) no-repeat right 6px center;
background-size: 39px auto;
}
#main .sec03 {
margin-bottom: 48px;
}
#main .sec03 .headLine01 {
margin-bottom: 40px;
}
#main .sec03 .sp-slide-area {
margin-bottom: 30px;
}
@media all and (max-width: 767px) {
#main .sec03 .sp-slide-area {
margin-bottom: 60px;
}
}
#main .sec03 .work-area {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#main .sec03 .voice-area{
margin-bottom: 30px;
}
#main .sec03 .work-area .item {
width: 49%;
padding: 15px;
background-color: #fff;
box-sizing: border-box;
margin-bottom: 20px;
}
#main .sec03 .work-area .item .photo {
margin-bottom: 10px;
}
#main .sec03 .work-area .item .photo img {
width: 100%;
height: 280px;
object-fit: cover;
object-position: center;
}
#main .sec03 .work-area .item .ttl {
font-size: 1.6rem;
}
#main .sec03 .work-area .item .ttl span {
font-size: 1.2rem;
color: #aaa;
text-align: right;
display: block;
}
#main .sec03 .sliderBox {
margin-bottom: 66px;
}
#main .sec03 .sliderBox:last-child {
margin-bottom: 0;
padding-top: 50px;
}
#main .sec03 .sliderBox .slick-slide {
padding: 26px 0;
font-size: 0;
overflow: hidden;
}
#main .sec03 .sliderBox .photo {
float: left;
width: 59.15%;
box-shadow: 0 0 11px rgba(0,0,0,0.24);
position: relative;
z-index: 1;
height: 520px;
overflow: hidden;
}
#main .sec03 .sliderBox .photo img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
max-width: none;
height: auto;
}
#main .sec03 .sliderBox .textBox {
margin-top: 107px;
float: right;
width: 40.85%;
}
#main .sec03 .sliderBox .textBox .whiteBox {
padding: 104px 86px 50px 200px;
margin-left: -141px;
width: 616px;
position: relative;
background: #fff;
box-sizing: border-box;
font-size: 1.4rem;
min-height: 520px;
}
#main .sec03 .sliderBox .textBox .whiteBox .img {
position: absolute;
width: 406px;
right: -23px;
top: -104px;
}
#main .sec03 .sliderBox .textBox .whiteBox h3 {
margin-bottom: 17px;
font-size: 2.4rem;
text-align: left;
}
#main .sec03 .sliderBox .textBox .whiteBox p {
margin-bottom: 28px;
line-height: 1.86;
}
#main .sec03 .sliderBox .textBox .whiteBox .tag {
margin-bottom: 4px;
}
#main .sec03 .sliderBox .textBox .whiteBox .tag span {
display: inline-block;
min-width: 59px;
font-family: 'Lato', sans-serif;
font-weight: 700;
color: #fff;
text-align: center;
text-transform: uppercase;
font-size: 1.1rem;
background: #111;
line-height: 1.45;
}
#main .sec03 .sliderBox .textBox .whiteBox .ttl {
margin-bottom: 3px;
font-size: 1.8rem;
line-height: 1.5;
font-weight: bold;
}
#main .sec03 .sliderBox .textBox .whiteBox .comLink {
margin-top: 37px;
}
#main .sec03 .sliderBox .slick-next,
#main .sec03 .sliderBox .slick-prev {
bottom: auto;
top: 461px;
}
body.mac #main .sec03 .sliderBox .slick-next,
body.mac #main .sec03 .sliderBox .slick-prev {
top: calc((59.15vw - 138px) * 0.71);
}
@media (min-width: 768px) and (max-width: 1220px) {
#main .sec03 .sliderBox .slick-next,
#main .sec03 .sliderBox .slick-prev {
top: 453px;
}
}
#main .sec03 .sliderBox.right .photo {
float: right;
}
#main .sec03 .sliderBox.right .textBox {
float: left;
}
#main .sec03 .sliderBox.right .textBox .whiteBox {
padding: 94px 165px 50px 96px;
margin: 0 -110px 0 0;
width: 613px;
float: right;
}
#main .sec03 .sliderBox.right .slick-next {
right: 0;
left: auto;
}
#main .sec03 .sliderBox.right .slick-prev {
right: 97px;
left: auto;
}
#main .sec03 .sliderBox.right .textBox .whiteBox .img {
width: 436px;
left: 5px;
top: -133px;	
}
#main .sec03 .architectBox {
background-color: #fff;
padding: 80px 0 40px;
}
#main .sec03 .architectBox .architect-area {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1164px;
margin: 30px auto 0;
}
#main .sec03 .architectBox .headLine01 span img {
width: 80px;
}
#main .sec03 .architectBox .architect-area .detail {
width: 18%;
margin: 0 3% 2em;
}
#main .sec03 .architectBox .architect-area .title {
font-size: 1.2em;
margin-top: 10px;
font-weight: bold;
}
#main .sec03 .architectBox .architect-area .title span {
display: block;
font-size: 12px;
font-weight: normal;
border-top: 1px solid #111;
padding-top: 8px;
}
#main .sec04 {
margin: 0 auto 96px;
width: 1144px;
}
#main .sec04 .headLine01 {
margin-bottom: 57px;
}
#main .sec04 .headLine01 span {
margin-top: 2px;
}
#main .sec04 .headLine01 span img {
width: 46px;
}
#main .sec04 ul {
margin: -20px 0 38px;
display: flex;
flex-wrap: wrap;
}
#main .sec04 ul li {
margin: 20px 2.675% 0 0;
width: 31.55%;
}
#main .sec04 ul li a {
display: block;
}
#main .sec04 ul li:nth-child(3n) {
margin-right: 0;
}
#main .sec04 ul li .photo {
margin-bottom: 6px;
position: relative;
}
#main .sec04 ul li .photo span {
padding: 6px 25px;
position: absolute;
top: 0;
left: 0;
display: inline-block;
text-align: center;
color: #fff;
font-size: 1.4rem;
font-family: 'Lato', sans-serif;
font-weight: 700;
background: #111;
}
#main .sec04 ul li .colorTxt {
margin: 0 2px 2px;
font-size: 1.1rem;
font-family: 'Lato', sans-serif;
font-weight: 700;
color: #111;
text-transform: uppercase;
}
#main .sec04 ul li .ttl {
margin-bottom: -2px;
font-weight: bold;
font-size: 1.6rem;
}
#main .sec04 ul li .priceTxt {
margin-bottom: 1px;
font-size: 1.4rem;
font-weight: bold;
}
#main .sec04 ul li .tag {
padding-left: 18px;
font-size: 1.1rem;
font-weight: bold;
background: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/icon07.png) no-repeat left top 4px;
}
#main .campaign {
padding: 50px 0 73px;
background: #fff;
}
#main .campaign .inner {
background-color: #f0f0f0;
padding: 40px;
box-sizing: border-box;
max-width: 600px;
}
#main .campaign .inner .campaign-area {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-bottom: 15px;
}
#main .campaign .inner .campaign-area .title {
font-size: 1.6rem;
font-weight: bold;
width: 100%;
text-align: center;
}
#main .campaign .inner .campaign-area .title02 {
font-size: 2rem;
font-weight: bold; }
#main .campaign .inner .campaign-area .title02 span {
font-size: 1.2em;
color: #c00;
}
#main .campaign .inner .results {
padding: 10px;
background-color: #fff;
text-align: center;
}
#main .sec05 {
margin-bottom: 47px;
padding: 50px 0 73px;
background: #fff;
}
#main .sec05 .inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#main .sec05 .inner .blog ,
#main .sec05 .inner .insta {
width: 49%;
}
#main .sec05 .headLine01 {
margin-bottom: 24px;
}
#main .sec05 .headLine01 span img {
width: 84px;
}
#main .sec05 .headLine01 span {
margin-top: 0;
}
#main .sec05 ul {
margin: 0 auto;
}
#main .sec05 ul li {
margin: 0 0 17px 0;
overflow: hidden;
}
#main .sec05 ul li .photo {
float: left;
width: 128px;
height: 128px;
position: relative;
overflow: hidden;
}
#main .sec05 ul li .photo img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: auto;
max-width: none;
height: 128px;
}
#main .sec05 ul li .textBox {
padding: 3px 0 0 145px;
}
#main .sec05 ul li .textBox p {
font-size: 1.4rem;
line-height: 1.857;
}
#main .sec05 ul li .textBox .txt {
margin-left: 5px;
}
#main .sec05 ul li .textBox .ttl {
margin-bottom: 2px;
font-weight: bold;
font-size: 1.6rem;
}
#main .sec05 ul li .textBox .time {
margin-bottom: 2px;
line-height: 1.5;
}
#main .sec05 ul li .textBox .time span {
padding: 0 10px;
display: inline-block;
color: #fff;
font-size: 1.1rem;
font-family: 'Lato', sans-serif;
font-weight: 700;
background: #8E9291;
}
#main .sec05 ul li .textBox .more {
margin-top: 4px;
text-align: right;
}
#main .sec05 ul li .textBox .more a {
padding-right: 65px;
display: inline-block;
text-transform: uppercase;
font-size: 1.3rem;
font-family: 'Lato', sans-serif;
font-weight: 700;
background: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/icon08.png) no-repeat right 5px center;
background-size: 39px auto;
transition: .3s;
}
#main .sec05 ul li .textBox .more a:hover {
background: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/icon08.png) no-repeat right center;
background-size: 39px auto;
}
#main .sec06 {
margin-bottom: 87px;
overflow: hidden;
}
#main .sec06 .headLine01 {
margin-bottom: 29px;
}
#main .sec06 .headLine01 span img {
width: 112px;
}
#main .sec06 .headLine01 span {
margin-top: -2px;
}
#main .sec06 ul {
margin-bottom: 41px;
width: 100%;
min-width: 1830px;
font-size: 0;
text-align: center;
}
#main .sec06 ul li {
display: inline-block;
padding: 0 2px 0 3px;
width: 300px;
}
#main .sec06 .comLink img {
width: 9px;
vertical-align: middle;
}
#main .sec07 {
margin-bottom: 0px;
padding-top: 60px;
background-color: #fff;
}
#main .sec07 .headLine01 {
margin-bottom: 40px;
}
#main .sec07 .headLine01 span img {
width: 150px;
}
#main .sec07 .headLine01 span {
margin-top: -8px;
}
#main .sec07 .whiteBox {
padding: 1px 0 60px;
background: #fff;
}
#main .sec07 .photo {
margin: -156px auto 26px;
width: 1105px;
position: relative;
box-shadow: 0 0 6px rgba(0,0,0,0.31);
}
#main .sec07 .photo span {
width: 530px;
position: absolute;
top: -12px;
right: -56px;
}
#main .sec07 h4 {
margin-bottom: 33px;
font-size: 3.4rem;
font-weight: bold;
text-align: center;
}
#main .sec07 h4 span {
display: inline;
border-bottom: 1px solid #333;
}
#main .sec07 ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 1000px;
margin: 0 auto;
}
#main .sec07 ul li {
padding: 0 10px;
margin-bottom: 15px;
width: 33.3333%;
box-sizing: border-box;
}
#main .sec07 ul li a {
display: flex;
font-size: 1.6rem;
font-weight: bold;
align-items: center;
}
#main .sec07 ul li span {
display: block;
}
#main .sec07 ul li img {
width: 94px;
}
#main .sec07 ul li .txt {
padding-left: 18px;
background: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/icon10.png) no-repeat left 7px center;
background-size: 6px auto;
}
#main .banner-area {
background-color: #fff;
padding: 0 0 80px;
}
#main .banner-area ul {
display: flex;
justify-content: center;
}
#main .banner-area ul li {
width: 250px;
margin: 0 20px;
}
#main .soccer {
background: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/image/fukuyama_bg.png) no-repeat ;
background-size: cover;
background-position: center;
padding: 60px 0;
}
#main .soccer .text {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
#main .soccer .text img {
max-width: 400px;
margin-right: 20px;
}
#main .soccer .text p {
color: #fff;
font-size: 2rem;
font-weight: bold;
}
#main .sec08 .photo {
margin: 98px 0 0 -12vw;
float: right;
width: 55.71%;
position: relative;
z-index: 1;
box-shadow: 0 0 6px rgba(0,0,0,0.28);
}
#main .sec08 .textBox {
padding: 85px 0 77px;
float: left;
width: 53.29%;
color: #fff;
background: #8E9291;
overflow: hidden;
}
#main .sec08 .textBox .subBox {
padding-right: 216px;
width: 387px;
float: right;
}
#main .sec08 .textBox .subBox h3 {
padding-bottom: 10px;
margin-bottom: 23px;
font-size: 2.4rem;
font-weight: bold;
position: relative;
}
#main .sec08 .textBox .subBox h3 span {
width: 90px;
display: block;
position: absolute;
top: -35px;
left: -45px;
}
#main .sec08 .textBox .subBox h3:before {
position: absolute;
left: 2px;
bottom: 0;
background: #fff;
width: 28px;
height: 2px;
content: "";
}
#main .sec08 .textBox .subBox p {
line-height: 1.73;
text-align: justify;
text-justify: inter-ideograph;
}
#main .sec08 .textBox .subBox .ttl {
margin-bottom: 7px;
font-weight: bold;
font-size: 2.2rem;
}
#main .sec08 .textBox .subBox .tel {
margin: 19px 4px 23px;
font-size: 1.3rem;
font-weight: bold;
}
#main .sec08 .textBox .subBox .tel a {
display: inline-block;
padding-left: 34px;
color: #fff;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 2.7rem;
line-height: 1;
background: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/shared/image/tel_img03.png) no-repeat left 2px top 8px;
background-size: 25px 25px;
}
#main .sec08 .textBox .subBox .tel a span {
font-size: 3.7rem;
}
#main .sec08 .textBox .subBox .tel .txt {
margin-left: 12px;
vertical-align: 2px;
}
#main .sec08 .textBox .subBox ul li:not(:last-child) {
margin-bottom: 10px;
}
@media all and (max-width: 767px) {
#gHeader .header-inner {
display: block;
}
.mainImg {
margin: 0;
width: auto;
height: 94vw;
min-height: inherit;
padding-top: 90px;
padding-bottom: 0;
}
.mainImg .h-txt {
transform: rotateZ(-270deg);
left: 10px;
top: 75px;
font-size: 10px;
transform-origin: left bottom;
}
.mainImg .svg-area p {
font-size: 1.6rem;
} .mainImg #mask {
width: 250px;
height: auto;
}
.mainImg h2 {
display: none;
}
.mainImg .slick-slider {
width: 90%;
margin-left: 10%;
}
.mainImg ul {
position: absolute;
left: inherit;
right: 0;
bottom: 0;
width: 90%;
}
#main .banner-eco img {
width: 240px;
}
.mainImg ul li a {
padding: 8px;
background-size: 22px;
justify-content: flex-start;
}
.mainImg ul li a .small {
font-size: 1rem;
}
.mainImg .foo.bg01 {
background-image: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/image/sp_main_img_slider08.jpg)
}
.mainImg .foo.bg02 {
background-image: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/image/sp_main_img_slider09.jpg)
}
.mainImg .foo.bg03 {
background-image: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/image/sp_main_img_slider04.jpg)
}
.mainImg .foo.bg04 {
background-image: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/house/image/sp_main_img_slider06.jpg)
}
.mainImg .main_text01 {
position: absolute;
right: 10px;
bottom: 130px;
width: 200px;
height: auto;
}
.mainImg .textBox {
padding: 35px 5px 0 0;
top: 0;
right: 0;
width: 46%;
}
.mainImg .textBox h2 {
margin-bottom: 11px;
max-width: 166px;
text-align: right;
}
.mainImg .textBox h2 img {
width: 100%;
max-width: 166px;
}
.mainImg .textBox p {
padding-left: 0;
font-size: 0.8rem;
}
.mainImg .textBox p span {
margin-right: 3px;
width: 60px;
}
.slick-next,
.slick-prev {
width: 49px;
height: 42px;
}
.slick-next {
left: 49px;
}
.mainImg .scroll {
display: none;
}
#main .inner {
padding: 0 20px;
}
#main .concept {
font-size: 1.4rem;
}
#main .sec01 .subBox ,
#main .sec01 .headLine01 ,
#main .sec01 .subBox ul {
width: 100%;
}
.sec02 {
margin-bottom: 9px;
border: none;
}
.sec02 ul {
display: block;
}
.sec02 ul li {
padding: 20px 10px;
line-height: 1.57;
font-size: 1.4rem;
font-weight: 500;
display: flex;
width: auto;
align-items: center;
justify-content: space-between;
}
.sec02 ul li .txtBox {
width: 68%;
text-align: left;
}
.sec02 ul li .ttl {
margin-bottom: 8px;
font-size: 2.4rem;
font-weight: 700;
line-height: 1.04;
text-align: left;
display: block;
}
.sec02 ul li .ttl span {
display: inline-block;
text-align: left;
}
.sec02 ul li .img {
margin-bottom: 0;
width: 26%;
text-align: center;
}
.sec02 ul li .img img {
width: 100%;
max-width: 101px;
}
.sec02 ul li:not(:nth-child(3n)) {
border-right: none;
}
.sec02 ul li:not(:last-child) {
border-bottom: 1px solid #fff;
}
.sec02 ul li .link {
margin: 10px 0 0;
width: 138px;
}
#main .sec03 {
margin-top: 30px;
margin-bottom: 23px;
}
#main .sec03 .headLine01 {
margin-bottom: 20px;
}
#main .sec03 .work-area .item {
margin-bottom: 0;
}
#main .sec03 .work-area .item .photo img {
height: 60vw;
}
#main .sec03 .voice-area .item {
padding: 6px;
margin-bottom: 10px;
}
#main .sec03 .voice-area .item .ttl {
font-size: 1.4rem;
}
#main .sec03 .voice-area .item .photo img {
height: 120px;
}
#main .sec03 .sliderBox {
margin-bottom: 8px;
}
#main .sec03 .sliderBox:last-child {
margin-bottom: 0;
padding-top: 20px;
}
#main .sec03 .sliderBox .foo {
padding-top: 14px;
position: relative;
}
#main .sec03 .sliderBox .headLine01 {
padding: 0 23px 9px;
text-align: left;
}
#main .sec03 .sliderBox .slick-slide {
padding: 0;
}
#main .sec03 .sliderBox .photo {
float: none !important;
width: auto;
box-shadow: none;
height: 266px;
}
#main .sec03 .sliderBox .photo img {
height: 266px;
}
#main .sec03 .sliderBox .textBox {
margin-top: 0;
float: none !important;
width: auto;
}
#main .sec03 .sliderBox .textBox .whiteBox {
padding: 20px 23px 34px;
margin: 0 !important;
width: auto !important;
position: static;
min-height: inherit;
}
#main .sec03 .sliderBox .textBox .whiteBox .img {
width: 190px;
right: -3px;
top: 0;
z-index: 1;
}
#main .sec03 .sliderBox .textBox .whiteBox h3 {
display: none;
}
#main .sec03 .sliderBox .textBox .whiteBox p {
margin-bottom: 10px;
line-height: 1.93;
}
#main .sec03 .sliderBox .textBox .whiteBox .ttl {
margin-bottom: 2px;
}
#main .sec03 .sliderBox .textBox .whiteBox .comLink {
margin-top: 18px;
}
#main .sec03 .sliderBox .slick-next,
#main .sec03 .sliderBox .slick-prev {
top: calc(100vw * 0.71 - 8px);
}
#main .sec03 .sliderBox.right .textBox .whiteBox {
padding: 20px 23px 34px;
}
#main .sec03 .sliderBox.right .slick-next {
left: 49px !important;
right: auto !important;
}
#main .sec03 .sliderBox.right .slick-prev {
right: auto !important;
left: 0 !important;
}
.slick-next:hover,
.slick-prev:hover {
opacity: 1;
}
#main .sec03 .sliderBox.right .textBox .whiteBox .img {
width: 176px;
left: auto;
right: 19px;
top: 17px;	
}
#main .sec03 .architectBox .architect-area {
width: 100%;
}
#main .sec03 .architectBox .architect-area .detail {
width: 35%;
margin: 0 5% 2em;
}
#main .sec03 .architectBox {
padding: 30px 0 10px;
}
#main .sec03 .architectBox .architect-area {
margin-top: 10px;
}
#main .sec04 {
margin: 0 23px 60px;
width: auto;
}
#main .sec04 .headLine01 {
margin-bottom: 13px;
}
#main .sec04 ul {
margin: 0 0 30px;
display: block;
}
#main .sec04 ul li {
margin: 0;
width: auto;
}
#main .sec04 ul li:not(:last-child) {
margin-bottom: 28px;
}
#main .sec04 ul li .photo {
margin-bottom: 8px;
}
#main .sec04 ul li .colorTxt {
margin: 0 5px 3px;
}
#main .sec04 ul li .ttl {
margin: 0 5px -2px;
}
#main .sec04 ul li .priceTxt {
margin: 0 5px 1px;
}
#main .sec04 ul li .tag {
margin: 0 7px;
}
#main .sec01, 
#main .sec05{
margin-bottom: 40px;
padding: 30px 23px 29px;
}
#main .sec01 .headLine01,
#main .sec05 .headLine01 {
margin-bottom: 22px;
}
#main .sec01 .headLine01 span,
#main .sec05 .headLine01 span {
margin-top: -2px;
}
#main .sec01 ul,
#main .sec05 ul {
margin-bottom: 10px;
width: auto;
display: block;
}
#main .sec01 ul li,
#main .sec05 ul li {
margin: 0;
width: auto;
overflow: hidden;
}
#main .sec01 ul li {
width: 100% !important;
}
#main .sec01 ul li:nth-child(2n),
#main .sec05 ul li:nth-child(2n) {
width: auto;
}
#main .sec01 ul li:not(:last-child),
#main .sec05 ul li:not(:last-child) {
margin-bottom: 10px;
}
#main .sec05 ul li .photo {
width: 100%;
height: 120px;
margin-bottom: 8px;
}
#main .sec05 ul li .photo img {
object-fit: cover;
object-position: center;
min-width: 100%;
min-height: 100%;
}
#main .sec01 ul li .photo {
float: left;
width: 80px;
height: 80px;
position: relative;
padding-top: 2px;
margin-right: 8px;
}
#main .sec01 ul li .photo img {
}
#main .sec01 ul li .textBox,
#main .sec05 ul li .textBox {
padding: 0;
}
#main .sec05 ul li .textBox {
padding-left: 0;
}
#main .sec01 ul li .textBox p,
#main .sec05 ul li .textBox p {
font-size: 1.3rem;
line-height: 1.385;
}
#main .sec01 ul li .textBox .ttl,
#main .sec05 ul li .textBox .ttl {
margin-bottom: 4px;
font-size: 1.4rem;
line-height: 1.5;
}
#main .sec01 ul li .textBox .time,
#main .sec05 ul li .textBox .time {
margin-bottom: 6px;
line-height: 1.5;
display: block;
}
#main .sec01 ul li .textBox .time {
display: inline-block;
}
#main .sec01 ul li .textBox .more,
#main .sec05 ul li .textBox .more {
margin-top: 8px;
}
#main .sec01 ul li .textBox .txt,
#main .sec05 ul li .textBox .txt {
margin-left: 0;
}
#main .sec05 .inner {
padding: 0;
}
#main .sec05 ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#main .sec05 ul li ,
#main .sec05 ul li:nth-child(2n) {
width: 49%;
margin-bottom: 15px;
}
#main .sec05 .inner .blog ,
#main .sec05 .inner .insta {
width: 100%;
}
#main .sec05 .inner .blog {
margin-bottom: 60px;
}
#main .campaign {
padding: 40px 20px;
}
#main .campaign .inner {
padding: 20px;
}
#main .campaign .inner .campaign-area .title02 {
margin: 0 0 0.5em;
font-size: 1.8rem;
line-height: 1.4;
}
#main .sec06 {
margin-bottom: 32px;
}
#main .sec06 .headLine01 {
margin-bottom: 29px;
}
#main .sec06 .headLine01 span {
margin-top: -9px;
}
#main .sec06 ul {
margin-bottom: 29px;
width: 100%;
min-width: inherit;
display: flex;
flex-wrap: wrap;
}
#main .sec06 ul li {
padding: 0 0 2px;
margin-right: 0.4%;
display: block;
width: 49.8%;
}
#main .sec06 ul li:nth-child(2n) {
margin-right: 0;
}
#main .sec06 .comLink {
padding: 0 23px;
}
#main .sec06 .comLink a {
padding: 12px 65px;
font-size: 1.2rem;
}
#main .sec06 .comLink img {
width: 8px;
}
#main .sec07 {
margin-bottom: 0;
}
#main .sec07 .whiteBox {
padding: 1px 23px 2px;
}
#main .sec07 .photo {
margin: -58px auto 9px;
width: auto;
}
#main .sec07 .photo span {
width: 181px;
top: -2px;
right: -21px;
}
#main .sec07 h4 {
margin: 0 0 20px 8px;
font-size: 2.4rem;
text-align: left;
line-height: 1.5;
}
#main .sec07 ul {
margin: 0 -6px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
#main .sec07 ul li {
padding: 0 0 20px;
width: 50%;
}
#main .sec07 ul li a {
font-size: 1.4rem;
}
#main .sec07 ul li img {
width: 72px;
}
#main .sec07 ul li .txt {
box-sizing: border-box;
width: calc(50vw - 93px);
}
#main .soccer {
padding: 60px 16px;
}
#main .soccer .text img {
max-width: 250px;
margin-right: 0px;
margin-bottom: 20px;
}
#main .soccer .text p {
font-size: 1.8rem;
font-weight: bold;
text-align: center;
}
#main .sec08 .photo {
margin: 0;
float: none;
width: auto;
box-shadow: none;
}
#main .sec08 .textBox {
padding: 50px 23px 36px;
float: none;
width: auto;
}
#main .sec08 .textBox .subBox {
padding-right: 0;
width: auto;
float: none;
}
#main .sec08 .textBox .subBox h3 {
padding-bottom: 8px;
margin-bottom: 25px;
}
#main .sec08 .textBox .subBox h3 span {
top: -29px;
left: 151px;
}
#main .sec08 .textBox .subBox p {
font-size: 1.5rem;
}
#main .sec08 .textBox .subBox .ttl {
margin-bottom: 18px;
line-height: 1.41;
}
#main .sec08 .textBox .subBox .tel {
margin: 13px 4px 15px;
}
#main .sec08 .textBox .subBox .tel .txt {
margin: -5px 0 0 33px;
display: block;
}
}
@media all and (-ms-high-contrast:none){
.mainImg .textBox p span {
line-height: 1.2;
padding: 5px 0 1px;
}
#main .sec04 ul li .tag {
margin-top: -2px;
padding-top: 2px;
}
}
.more-btn{
display: block;
width: 380px;
font-weight: bold;
text-align: center;
border: 1px solid #333;
padding: 8px 0.5em;
margin: 0 auto 60px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.more-btn:hover{
color: #FFF;
background-color: #333;
}