html{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:14px;font-weight:400;line-height:1.75;-webkit-text-size-adjust:100%;background:#fff;color:#000000;-webkit-font-smoothing: antialiased;}
body{margin:0}
h1 {font-size:1rem;}
a {transition: all .3s; color:#000000;}
a:hover {opacity:0.7; color:#000000; text-decoration:none;}
.small {font-size:80%;}

.headerColor-default {fill:#ffffff;}
.uk-sticky {padding-left: 40px !important; padding-top: 40px !important;}

header p {background: rgba(255, 255, 255, 0.65);}
.links {position:fixed; bottom:0; right:0;}
.fix-menu { position: fixed; bottom: 10px; right:10px; height: auto; z-index: 999; width: 100%; width:100px; text-align:center;}
.fix-menu table tbody tr td p {font-size: 12px; text-align: left; margin: 0 0 8px 0; font-weight: 900; line-height: 1.25;}
.fix-menu table tbody tr td p span {font-weight:400;}
.fix-menu table tbody tr td a img {border-radius: 50%; width:100%; padding: 8px;}
#loader-bg { width: 100vw; height: 100vh; background: #ffffff; z-index: 100; position: absolute; top: 0;}
#loader img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 180px;}
header { height: 90vh; position: relative; background-image: url(../img/us_top_pc.jpg); background-size: cover; background-position-x: center; background-position-y: bottom; margin-top: -20px;}
header h1 a { height: 40px; width: 87px; position: fixed; z-index: 1; top: 40px; left: 40px;}
header .tnf_logo { height: 40px; width: 87px; position: fixed; z-index: 10; top: 40px; left: 40px;}
header h2 {color: #000000; font-weight: 600; height:40px; max-width: 400px; width: calc(100% - 80px); position:absolute; left:40px; top: 116px; margin:0; font-size: 21px; line-height: 1.5;}
header h2 img { margin-bottom: 18px;}
header h2 span:last-child { font-size:12px; line-height:4;font-weight: 600;}
header p { font-size: 14px; line-height: 1.85; color:#000000; max-width: 500px; width: calc(100% - 80px); padding:16px 24px; bottom: 20px; right: 40px; position: absolute;}

.flow-navi__wrapper {display:none;}
.flow-navi {position: fixed;top: 40px; left: 40px;z-index: 3;}

section {padding:120px 20px 0; text-align:center; max-width: 1000px; margin: 0 auto;}
h3 {font-size:20px; font-weight: 600; line-height:1.5; letter-spacing: .05em; margin-bottom: 48px;}
h3 span {font-size:40px; line-height: 1; font-weight: 500;}
p {text-align:left; line-height: 1.75;}
.sustainability table tr td {font-size:12px; line-height:18px;}
.sustainability table tr td:first-child {width:16%; padding-right:20px;}
.sustainability table tr td:last-child {width:84%; padding-left:20px; border-left: 1px solid #000000;}
.sustainability table tr td img {width: 200px;}
.sustainability table tr td p {margin:0;}
.sustainability table tr td div.v-align-middle { display: inline-block; vertical-align: middle;}
img.sustainability{max-width: 100%; width: 100%;margin-top:24px; margin-bottom: 24px!important;}

.sustainability .steps {padding:0;}
.sustainability .steps p {color:#000000; font-size:24px; text-align:center; margin-bottom: 0;}
.sustainability .steps p span {color:#000000; font-size:18px;}
.sustainability .detail_text p {font-size:14px; color:#000000; padding:0px 8px!important; text-align:left; padding: 0;}
.sustainability .steps img {padding-right: 24px;}
.mid-width {width: 680px; margin-right:auto!important; margin-left:auto!important;}
.mid-width.center {text-align:center}
.uk-light .uk-slidenav {margin-left: 0; margin-right: 0;}
polyline {stroke-width:1.4;}

.sustainability .gray_wrap {margin-top:80px; background: #efefef; border-radius: 16px; padding: 40px 16px;}

.details .uk-grid {margin-bottom:132px!important;}
.details .uk-grid:last-child {margin:0!important;}
.details .uk-grid .uk-grid {margin-bottom:0!important;}
.details .left {padding-right:20px!important;}
.details .right {padding-left:20px!important;}
.details .large_item.left {padding-right:20px!important; position: relative;}
.details .large_item.right {padding-left:20px!important; position: relative;}
.details .large_item.left p.number {font-size: 84px; line-height: 1; font-weight: 200; position: absolute; top: -40px; left: -32px;}
.details .large_item.right p.number {font-size: 84px; line-height: 1; font-weight: 200; position: absolute; top: -40px; right: -32px;}
.details .uk-light .uk-slidenav {color:rgba(0, 0, 0, 0.5); }
h4 {font-size:32px; font-weight: 400; line-height:1; text-align:left;}
h4 span {font-size:16px;}
h5 {font-size: 24px; text-align:left;font-weight: 500;}

a.online {float: left; color:#ffffff; background: #000000; padding: 8px 16px;}
a.online:hover {color:#ffffff; text-decoration:none;}

.scene .text_links {text-align: left; margin-top: 4px; text-transform: uppercase;}
.scene .text_links a {background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%); background-position: 0 0; background-size: 200% auto; text-decoration: underline; transition: .3s;}
.scene .text_links a:hover { background-position: -100% 0; color: #fff;}

.price {font-size:110%;}

.uk-modal-body {padding:0;}
.uk-close {color:#000000;}
.uk-close svg { height: 30px; width: 30px;}
/**.uk-slideshow { text-align: left;}**/
.uk-slidenav svg {width:30px;}

footer {margin-top:120px;}
footer p {font-size:10px; text-align: center;}

.sp { display:none!important;}
.pc { display:initial!important;}


@media screen and (max-width: 639px) {
.sp { display:initial!important;}
.pc { display:none!important;}

header {  background-image: url(../img/us_top_sp.jpg); }
header p {color:#000000;}
header h1 a {top: 20px; left: 20px;}
header h2 { width: calc(100% - 40px); left:20px; top: 96px;}
h3 {text-align: left; margin-bottom: 24px;}
header p { width: calc(100% - 40px); right: 20px; margin-bottom: 0;}
h4 { margin-top: 24px;}
.mid-width {width:100%;}
.mid-width.center {text-align:left;}
.flow-navi {top: 20px; left: 20px;}

.uk-sticky {padding-left: 20px !important; padding-top: 20px !important;}

.head_word {width:100%; padding:0 20px 0; -moz-box-sizing: border-box; box-sizing: border-box;}
.head_word p {font-size: 16px; margin:0;}

section {padding-top:80px;}

.sustainability table tr td {width:100%; display:block;}
.sustainability table tr td:first-child {width: 84px; margin: 16px 0 0; padding: 0;}
.sustainability table tr td:last-child {width: 100%; padding:4px 0 0; border:none;}
.sustainability .steps p span {font-size: 18px; color:#000000; margin-left:16px;}
.sustainability .steps .uk-flex-middle {margin-bottom:40px!important;}
.sustainability .steps:last-child .uk-flex-middle {margin-bottom:0px!important;}
.sustainability .gray_wrap {padding-bottom: 0;}

.details .large_item.left, .details .large_item.right, .details .right, .details .left {padding:0!important;}
.details .large_item.left p.number {left:-16px;}
.details .large_item.right p.number {right: -16px;}
.details .large_item.left img {margin-bottom:24px;}
.product:first-child {margin-bottom: 80px!important;}

.sustainability .steps p.detail_text {font-size:14px; color:#000000; text-align:left; padding: 0; float: left;}
.sustainability .steps p {font-size: 20px; text-align: left; margin-bottom: 8px;}

.details .order-d:nth-child(1) { -webkit-box-ordinal-group: 2; -webkit-order: 2; -ms-flex-order: 2; order: 2;}
.details .order-d:nth-child(2) { -webkit-box-ordinal-group: 1; -webkit-order: 1; -ms-flex-order: 1; order: 1;}


.square_items {height: calc(100vw - 40px)!important; min-height:calc(100vw - 40px)!important;}

.fix-menu {width:100%; bottom:0; right:0; background:#ffffff;}
.fix-menu table tbody tr td {padding:0; margin:0;vertical-align:middle;　-moz-box-sizing: border-box; box-sizing: border-box;}
.fix-menu table tbody tr td:nth-child(odd) {width:16%;}
.fix-menu table tbody tr td:nth-child(even) {width:34%;}
.fix-menu table tbody tr td:nth-child(3) {border-left:1px solid #ababab;}
.fix-menu table tbody tr td a {width: 100%; height: 100%; display: block;}
.fix-menu table tbody tr td p {margin:0;}

footer {margin: 80px 0 100px;}

}

@media screen and (min-width: 640px) {
.fix-menu table {width:100%;}
.fix-menu table tbody tr td {display: block; width: 100%;text-decoration:none; color:#000000;}
.fix-menu table tbody tr td a {}
.fix-menu table tbody tr td p {font-size:10px; text-align:center;}

.top_0 {top: 0!important;}
.scene .text_links {text-align:center;}
.scene .uk-slideshow ul li img {width:100%!important; left: 50%; transform: none; top: initial; bottom: 0; left: 0;}
}