body { /**background-image:url(../img/background.jpg);**/ background-size:contain; font-family:serif; font-style:normal; font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; -moz-font-feature-settings: "palt"; letter-spacing: 0.075em; font-display:block; font-size:14px; font-weight:500; color: #000000; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size:16px; }
h1,h2,h3,h4,h5,h6,p { font-family:bodoni-urw, serif; margin:0; color:#000000; line-height:1.7;text-align:center;}
p {font-size:21px;}
h2 {font-size:1.5rem; line-height:1.5; margin:24px auto; color:#000000; padding: 10px; font-weight:400; width:fit-content;}
h3 {font-size:32px; font-weight: 400; text-align:center; line-height:2; }
ol, ul { list-style: none; padding: 0;}
a, a:hover {text-decoration: none;}
video {outline:none;}
strong {font-weight:500;}
.sustain strong {font-size:21px;}
.drawer-menu-item strong {font-weight:700;}
small {font-size:80%;}
img.cover, video.cover {object-fit: cover; width: 100%; height: 100%;}
#loader img {position: absolute;top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 180px;}
.campaign-link {position:fixed; top: 50%; right: 16px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); width: 24px; z-index:100;}
.main-visual {position:fixed; background-image:url("../img/TOP.jpg"); background-size:cover; background-position : 50% 50%; height:100vh; width:100vw; text-align:center;}
.main-visual .tnf-logo {position:fixed; width: 160px; left: 40px; top: 40px;}
.main-visual .main-logo {max-width: 400px; width: 20%;   position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%);}
.main-visual h2.main-logo {top: 50%; width: 100%; max-width:initial; width:auto; color:#ffffff; font-weight: 400;}
.sustain .content-wrap h2 {border-bottom: 1px solid #000000; padding: 0!important; margin-bottom:8px!important;}
.scroll {position:fixed; bottom: 40px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); width:160px}
section.content-wrap {width: 100vw; margin-top:100vh;  position:absolute; z-index:10; background:#ffffff;}
.first-content {font-size:23px; text-align:center; line-height:1.7;}
.first-content img {max-width:80%}
.people01 {background-image: url(../img/eri_pc_top.jpg); height:33.333vw !important;}
.people02 {background-image: url(../img/hijiri_pc_top.jpg); height:33.333vw !important;}
.people03 {background-image: url(../img/haru_pc_top.jpg); height:33.333vw !important;}
.peolpe.sustainable {background-image: url(../img/Sustanability_pc_top.jpg); height:60vw;}
.bg-yellow {background:#ffffff; padding: 120px 24px;}
.bg-yellow p {font-weight:400; line-height:2; font-size:18px;}
.people {height:33.333vw !important;}
.peolpe p {font-size:24px; line-height:1.35; color:#ffffff; font-weight:400;}
.column a {display:block}
img.title-holder {height:180px; margin:0 auto 80px; display: block;}
img.title-holder.single-line {height:80px;}
*+.uk-grid-margin-small, .uk-grid+.uk-grid-row-small, .uk-grid+.uk-grid-small, .uk-grid-row-small>.uk-grid-margin, .uk-grid-small>.uk-grid-margin {margin-top:0px;}

.smellwell {max-width: 200px; margin: 0 auto 24px; display: block;}
.footer-rights {font-size: 12px; padding: 8px 0; color:#000000; font-weight:400;}
.products {color:#54abc3; display: block; margin: 120px auto 0; width: fit-content; background: #ffffff; padding: 16px 40px; font-family: sans-serif; font-weight: 700;}

header {position:fixed; background: #ffffff; width: 100vw; height: 100px; z-index: 100;}
header .tnf-logo {position:absolute; left:24px; top:24px; width:100px;}
header .main-logo {position:absolute; top: 12px; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); height:76px;}
header .hamburger-menu {position:absolute; right:24px; top:24px;}
.articles .main-visual {position:fixed; background-size:cover; background-position : 50% 50%; height:100vh; width:100vw; text-align:center;}
.articles.article01 .main-visual {background-image:url("../img/ABE_7371_1.jpg"); }
.articles.article02 .main-visual {background-image:url("../img/124911285_358130511941893_7501281251487832991_n.jpg"); }
.articles.article03 .main-visual {background-image:url("../img/D4S_9028.jpg"); }
.articles.sustain .main-visual  {background-image:url("../img/Sustanability.jpg"); }
.articles section.content-wrap {padding:40px 0 0; box-sizing: border-box;}
.articles section.content-wrap p, table {text-align:left; font-size: 16px; margin-bottom:24px; padding:0 16px;}
.articles section.content-wrap .footer-rights {font-size: 12px; text-align: center; margin-bottom: 24px;}
.articles section.content-wrap h2 {margin:48px 0 24px; padding: 0; text-align: left; padding:0 16px; width: 100%; box-sizing: border-box;}
.tech {padding:0 24px}
.articles section.content-wrap .articles section.content-wrap h3 {font-size: 2rem; font-weight:700; padding:0 24px;}
.articles section.content-wrap a {padding:0 24px;}
.articles section.content-wrap img {margin:24px 0; width:100%;}
.articles section.content-wrap .slick-list img {margin:0;}
.articles section.content-wrap .slick-dots {margin-bottom:24px;}
.slick-prev, .slick-next {z-index:100;}
.articles section.content-wrap .next-article {background: #000000; color: #ffffff; padding: 8px; width: 100%; display: block; box-sizing: border-box; text-align: center; margin-top: 64px;}
*+.uk-hr, *+hr {border-top: 1px solid #000000; margin: 48px auto; max-width: 800px;}
.slick-prev { left: calc(50% - 400px);}
.slick-next { right: calc(50% - 400px);}
.slick-next::before {
    content: url(../img/arrow_next.svg);
}
.slick-prev::before {
    content: url(../img/arrow_prev.svg);
}
.sp {display:none;}
.pc {display:initial;}

.slick-dots li, .slick-dots li button, .slick-dots li button:before {width:24px; height:24px; }
.article01 .slick-dots li:first-child button:before {content:''; background: url("../img/eri001.png"); display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat;}
.article01 .slick-dots li:nth-child(2) button:before {content:''; background: url("../img/eri002.png"); display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat;}
.article01 .slick-dots li:nth-child(3) button:before {content:''; background: url("../img/eri003.png"); display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat;}
.article01 .slick-dots li:nth-child(4) button:before {content:''; background: url("../img/eri004.png"); display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat;}
.article02 .slick-dots li:first-child button:before {content:''; background: url("../img/hijiri01.png"); display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat;}
.article02 .slick-dots li:nth-child(2) button:before {content:''; background: url("../img/hijiri02.png"); display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat;}
.article02 .slick-dots li:nth-child(3) button:before {content:''; background: url("../img/hijiri03.png"); display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat;}
.article02 .slick-dots li:nth-child(4) button:before {content:''; background: url("../img/hijiri04.png"); display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat;}
.article03 .slick-dots li:first-child button:before {content:''; background: url("../img/haru01.png"); display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat;}
.article03 .slick-dots li:nth-child(2) button:before {content:''; background: url("../img/haru02.png"); display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat;}
.article03 .slick-dots li:nth-child(3) button:before {content:''; background: url("../img/haru03.png"); display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat;}
.peolpe.sustainable {background-image: url(../img/Sustanability_sp_top.jpg); background-size: cover; }
.articles section.content-wrap .price {margin-bottom:24px;}
.articles section.content-wrap .tech {max-width:800px; margin:0 auto;}
.articles section.content-wrap .tech img {height: 56px; width: auto; margin-bottom: 0;}
.articles section.content-wrap .tech img:last-child {height: 32px; margin-left: 16px;}
.articles section.content-wrap .next-article {width: fit-content; margin: 40px auto 80px; min-width: 400px; padding: 8px 24px;}
.articles section.content-wrap p {max-width: 800px; margin: 24px auto 24px; font-weight:400;}
.articles section.content-wrap  table {max-width:500px; margin:0 auto;}
.articles section.content-wrap p span {font-weight:500;font-size: 20px; line-height: 1;}
.articles section.content-wrap p span.ja {font-weight:600; font-size: 16px; line-height: 1;}
.articles.article01 .name span {font-size:21px;}
.slick-slider, .slick-slide img {margin-top:0;}

@media screen and (max-width: 799px) {
.main-visual .tnf-logo { width: 100px; left: 24px; top: 30px;}
.main-visual .main-logo {width: 45%;}
.slick-prev { left: 24px;}
.slick-next { right: 24px;}
.articles.sustain .content-wrap h2 {margin:0 16px; width: calc(100% - 32px);}
.articles section.content-wrap table td p {margin:0;}
}


@media screen and (max-width: 832px) {
*+.uk-hr, *+hr {margin: 48px 16px;}
.drawer-hamburger { width: 30px;}
}

@media screen and (max-width: 639px) {
.pc {display:none;}
.sp {display:initial;}
.people01 {background-image: url(../img/eri_sp_top.jpg);}
.people02 {background-image: url(../img/hijiri_sp_top.jpg);}
.people03 {background-image: url(../img/haru_sp_top.jpg);}
.main-visual {height: 100vh;}
.main-visual h2.main-logo {top: 35vh; width: 100%;}
header .tnf-logo {left: 16px; top: 35px; width: 70px;}
.bg-yellow p {font-size:4vw;}
.scroll {bottom: 2vh; width: 25%;}
.peolpe {height: 44.44vw!important;}
*+.uk-grid-margin-small, .uk-grid+.uk-grid-row-small, .uk-grid+.uk-grid-small, .uk-grid-row-small>.uk-grid-margin, .uk-grid-small>.uk-grid-margin {margin-top:0;}
section.content-wrap {margin-top: 100vh;}
.content-wrap .scroll {top:-60px; width: 100px;}
.first-content img {max-width:100%}
img.title-holder {height: 100px;}
.smellwell {max-width: 140px;}
img.title-holder.single-line {height: 40px;}
.articles.article01 .main-visual, .articles.article02 .main-visual,.articles.article03 .main-visual, .articles.sustain .main-visual {top:100px; height:35vh;}
.articles.article01 section.content-wrap,.articles.article02 section.content-wrap, .articles.article03 section.content-wrap, .articles.sustain section.content-wrap {margin-top:calc(35vh + 100px);}
.articles.article01 .name, .articles.article02 .name {font-size: 18px; margin: 0;}
.articles.sustain .main-visual .main-logo {top:16vh;}
h3 {font-size:24px; font-weight:500;}
p {font-size: 4.5vw;}
#loader img {width: 120px;}
.campaign-link {right:8px;}
.main-visual .top_visual {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80vw;}
.articles section.content-wrap .next-article {min-width: 350px; margin-top: 40px;}
.articles section.content-wrap .tech img:last-child {height: 26px;}
.articles section.content-wrap  table {max-width:400px;}
}
.header {width: 100%; height: 200px; background-color: #ccc;}
p {  text-align: center;}

@media screen and (min-width: 640px) {
.articles section.content-wrap h2, table {max-width: 800px; margin: 24px auto; padding:0;}
.articles section.content-wrap {padding-left:0; padding-right:0;}
.slick-list {max-width: 800px; margin: 0 auto;}
}

.drawer-hamburger {padding: 38px 24px 50px;}
.drawer-nav {background: rgba(255,255,219,1); padding: 100px 0;}
.drawer--right.drawer-open .drawer-nav {width: 100%;}
.drawer--right.drawer-open .drawer-hamburger {right:0;}
.drawer-menu-item {text-align: left; margin: 0 auto; display: block; width: 200px;}