/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
汎用
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
body {scrollbar-face-color: #8191ff; scrollbar-track-color: #fff; scrollbar-arrow-color: #8191ff; scrollbar-shadow-color: #fff;}

/*スクロールバー*/
::-webkit-scrollbar {width: 12px; height: 12px;}
::-webkit-scrollbar-thumb {background: #8191ff; border: 2px solid #fff; border-radius: 36px;}
::-webkit-scrollbar-track-piece {background: #fff;}

main:before {background-image: url(../img/common/bg.jpg);}

/*pc限定*/
.sp {display: none!important;}

/*コンティナ*/
.container {width: 90vw; max-width: 1440px; margin: 0 auto;}

/*--------------------------------------------------------------------------
部品
--------------------------------------------------------------------------*/
/*汎用ヘッダー*/
.g-h1 {font-size: 3.125rem; margin: 36px 0;}
.g-h2 {font-size: 1.7rem; margin-bottom: 10px;}

/*アンダーライン*/
a.u-l:after {position: absolute; content: ''; display: block; bottom: 0; left: auto; right: 0; width: 0; height: 1px; background: #333; transition: .3s ease;}
a.u-l:hover {opacity: 1;}
a.u-l:hover:after {left: 0; right: auto; width: 100%; transition: .3s ease;}

/*MORE*/
.more {width: 440px; padding: 10px 0;}

/*TOP画像*/
.head-img {height: 430px;}

/*ABOUT*/
.about {width: 650px; margin: 70px auto;}

/*ブロック*/
.regene {position: relative; height: 640px;}
.regene .txt,
.regene .img {position: absolute; width: calc(50% + 36px);}
.regene .txt {top: 0; left: 0; z-index: 2;}
.regene .txt .inner {position: relative; max-width: 500px; margin-left: auto; padding: 32px 56px;}
.regene .txt h2 {font-size: 2rem;}
.regene .img {height: 500px; top: 140px; right: 0; z-index: 1;}

/*--------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/
header {padding: 24px 0;}

header .logo {width: 97px;}

header .g-navi ul li {line-height: 1; border-left: 1px solid #666; padding: 0 22px;}
header .g-navi ul li:first-child {border-left: none;}
header .g-navi ul li a {color: #666;}

header #humberger {display: none;}

/*--------------------------------------------------------------------------
フッター
--------------------------------------------------------------------------*/
footer .back-img {height: 250px;}

footer .top {padding: 80px 0 60px;}
footer .top h2 {font-size: 2.25rem; line-height: 1; margin: 36px 0;}
footer .top .address {text-align: center;}
footer .top .contact {justify-content: center; align-items: center; margin-top: 36px;}
footer .top .contact .number {margin-right: 80px;}

@media screen and (min-width: 1920px) {
	footer .back-img img {width: auto; margin: 0 auto;}
}

/*サイド固定*/
.fix-nav {position: fixed; top: 160px; right: 0; z-index: 10;}
.fix-nav a {flex-direction: column; align-items: center; justify-content: center; width: 42px; height: 190px; background: #050d26; margin-bottom: 20px;}
.fix-nav a img {width: auto; max-width: 18px; height: auto; max-height: 24px; margin-bottom: 12px;}
.fix-nav a span {color: #fff; font-size: .95rem; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
テンプレ＆固定ページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
TOPページ
--------------------------------------------------------------------------*/
#front .head {width: 100%; height: 100vh;}
#front .head:before {background-image: url(../img/front/top-img.jpg); background-size: cover;}
#front .head .txt {height: calc(100vh - 50px);}
#front .head .txt h1 {font-size: 2.75rem; line-height: 1; margin: 0 0 42px;}
#front .head .txt p {max-width: 700px;}
#front .head .headline-news {height: 50px; background: #fff;}
#front .head .headline-news h2 {position: relative; width: 25%; background: #050d26;}
#front .head .headline-news h2 img {position: absolute; top: 14px; right: 40px; width: 66px;}
#front .head .headline-news .entry {position: relative; align-items: center; width: 75%; padding: 0 32px; background: #f6f6f6; box-sizing: border-box;}
#front .head .headline-news .entry time {margin-right: 24px;}
#front .head .headline-news a.entry:before {content: ""; position: absolute; top: 12px; right: 32px; width: 19px; height: 28px; background: url(../img/front/news-arrow.svg) 0 0/19px 28px; transition: .5s ease;}
#front .head .headline-news a.entry:hover {background: #e0e0e0; opacity: 1;}

#front .what h2 {font-size: 2rem; margin: 0; padding: 100px 0;}
#front .what section {justify-content: space-between;}
#front .what section .txt {display: flex; justify-content: center; align-items: center;}
#front .what section .txt .inner {width: 472px;}
#front .what section .img .img-mask {height: 33vw; min-height: 478px; max-height: 649px; overflow: hidden;}
#front .what .sec01 .txt {width: 54%;}
#front .what .sec01 .img {width: 46%; transform: skewX(-13deg); transform-origin: bottom left;}
#front .what .sec01 .img .img-mask img {transform: skewX(13deg); transform-origin: bottom left;}
#front .what .sec02 .txt {width: 46%;}
#front .what .sec02 .img {width: 54%;}
#front .what .sec02 .img .img01 {transform: skewX(-13deg); transform-origin: top right;}
#front .what .sec02 .img .img01 .img-mask img {transform: skewX(13deg); transform-origin: top right;}
#front .what .sec02 .img .img02 {transform: skewX(13deg); transform-origin: bottom left;}
#front .what .sec02 .img .img02 .img-mask img {transform: skewX(-13deg); transform-origin: bottom left;}
#front .what .sec03 .txt {width: 54%;}
#front .what .sec03 .img {width: 46%;}
#front .what .sec03 .img {transform: skewX(13deg); transform-origin: top right;}
#front .what .sec03 .img .img-mask img {transform: skewX(-13deg); transform-origin: top right;}

/*--------------------------------------------------------------------------
幹細胞上清液
--------------------------------------------------------------------------*/
#natant {padding-bottom: 100px;}

#natant .flow {margin: 100px auto 0; padding: 64px;}
#natant .flow li {justify-content: space-between;}
#natant .flow li .txt {position: relative; width: 100%;}
#natant .flow li .txt:after {content: ""; display: block; position: absolute; bottom: -57px; left: 50%; width: 42px; height: 42px; border: 1px solid #8191ff; border-top: none; border-left: none; transform: translateX(-50%) rotate(45deg);}
#natant .flow li:last-of-type .txt:after {display: none;}
#natant .flow li .txt p {font-size: 1.075rem;}
#natant .flow li .img {min-width: 312px; margin-left: 40px;}
#natant .flow .more {margin: 90px auto 30px;}

/*--------------------------------------------------------------------------
製品情報
--------------------------------------------------------------------------*/
#product .regena h2 {margin: 70px 0;}
#product .regena h3 {font-size: 1.875rem; font-weight: 700;}
#product .regena .inner {margin-bottom: 80px;}

#product .factor {padding: 70px 0 60px;}
#product .factor h2 {font-size: 1.875rem; margin-bottom: 25px;}
#product .factor .compon {margin-bottom: 50px;}
#product .factor .compon li {width: 242px; height: 242px; margin: 0 5px;}
#product .factor .compon li h3 span.big {font-size: 2.325rem;}
#product .factor .compon li h3 span.small {font-size: 1.175rem;}
#product .factor .effect {flex-wrap: wrap;}
#product .factor .effect > li {width: calc((100% - 24px) / 2); margin-bottom: 42px; padding: 18px;}
#product .factor .effect > li:nth-child(even) {margin-left: 24px;}
#product .factor .effect h3 {font-size: 1.875rem;}

#product .contact {padding: 150px 0 200px;}
#product .contact h2 {font-size: 2.5rem;}
#product .contact h2:before,
#product .contact h2:after {bottom: -60px; width: 96px;}
#product .contact h2:before {left: calc(50% - 41px);}
#product .contact h2:after {left: calc(50% + 41px);}

/*--------------------------------------------------------------------------
FAQ
--------------------------------------------------------------------------*/
#faq {padding: 124px 0 100px;}

#faq .faq-list section {margin-bottom: 64px;}
#faq .faq-list dl {margin-bottom: 16px;}
#faq .faq-list dl dt:before,
#faq .faq-list dl dd:before {font-size: 24px; margin-right: 12px;}
#faq .faq-list dl dt {font-size: 20px; text-indent: -20px; padding: 16px 64px 16px 66px;}
#faq .faq-list dl dd {padding: 18px 30px 18px 67px; text-indent: -19px;}
#faq .faq-list dl dt:after {top: calc(50% - 8px); right: 28px; border-width: 12px 8px 0 8px;}
#faq .faq-list dl dd:before {top: 2px;}

/*--------------------------------------------------------------------------
会社概要
--------------------------------------------------------------------------*/
#company {padding-bottom: 180px;}

#company .info {width: 650px; margin: 0 auto;}
#company .info table {width: 100%; table-layout: fixed;}
#company .info table tr th,
#company .info table tr td {padding: 14px 32px;}
#company .info table tr th {width: 70px;}

#company .map {height: 560px; margin: 160px auto 0;}

/*--------------------------------------------------------------------------
お知らせ一覧
--------------------------------------------------------------------------*/
#archive {}

/*--------------------------------------------------------------------------
お知らせ
--------------------------------------------------------------------------*/
#single {background: #fff;}