@charset "utf-8";

@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;
}  .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;
} 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;
}
.now {
background-color: #8e9291;
}
.topList {
margin: 0 auto;
max-width: 120rem;
background-color: #FFF;
justify-content: flex-start;
flex-wrap: nowrap;
}
.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;
font-weight: normal;
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/door/wp-content/themes/tdkj/shared/image/brand.png) no-repeat left center / 2.6rem;
background-image: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/door/wp-content/themes/tdkj/shared/image/brand_on.png);
color: #fff;
}
@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/door/wp-content/themes/tdkj/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%;
}
.topList li a {
padding: 0 0.1rem;
width: auto;
font-size: 1rem;
}
.topList li.li02 a {
letter-spacing: -.1px;
}
.topList .li01 a span {
padding: 1rem 0 1rem 2.7rem;
background-size: 2.2rem;
}
} #gHeader {
padding: 0 0 36px;
position: relative;
width: 100%;
top: 0;
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 {
width: 353px;
box-sizing: border-box;
position: absolute;
top: 10px;
left: 15px;
}
#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: 31px;
}
#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/door/wp-content/themes/tdkj/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: 60px;
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;
}
.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/door/wp-content/themes/tdkj/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/door/wp-content/themes/tdkj/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/door/wp-content/themes/tdkj/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/door/wp-content/themes/tdkj/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; z-index: 1000;
top: 0;
left: 0;
right: 0;
height: 60px;
width: 100%;
transform: translateX(0px);
background-color: #fff;
transition: .3s;
padding-bottom: 0;
}
body.fixed #gHeader {
background-color: #fff;
}
#gHeader h2 {
padding: 0;
width: 220px;
top: 5px;
left: 5px;
}
#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: 28px;
}
#gNavi > li {
font-weight: bold;
line-height: 1;
text-align: center;
position: relative;
}
#gNavi > li:not(:first-child) {
border-left: 1px solid #7D8281;
}
#gNavi > li span {
color: #7D8281;
display: block;
font-weight: bold;
}
#gNavi > li > a {
padding: 2px 15px;
display: block;
}
#gNavi > li .subNavi {
width: 12em;
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: left;
display: none;
background: #F5F2ED;
z-index: 1000;
}
#gNavi > li:nth-child(2) .subNavi {
width: 10em;
}
#gNavi > li:nth-child(3) .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: 49.8%;
}
.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;
}
} .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: 220px;
}
#main .comLink a {
padding: 15px 0;
color: #111;
font-size: 1.4rem;
font-weight: bold;
text-align: center;
display: block;
border-radius: 0;
transition: .3s;
border: 1px solid #111;
position: relative;
background-color: #fff;
}
#main .comLink a:after {
content: "";
width: 40px;
height: 15px;
background: url(https://mljycox3fmns.i.optimole.com/w:auto/h:auto/q:mauto/f:best/https://tdkj.jp/door/wp-content/themes/tdkj/shared/image/arrow02.png);
background-size: cover;
position: absolute;
top: 20px;
left: -20px;
transition: .3s;
}
#main .comLink a:hover:after {
left: -10px;
}
@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;
}
}