/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
汎用
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
body {padding-top: 56px;}
main:before {background-image: url(../img/common/bg_sp.jpg);}

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

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

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

/*MORE*/
.more {max-width: 440px; padding: 8px 0;}

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

/*ABOUT*/
.about {margin: 0 5vw;}

/*ブロック*/
.regene {margin: 35px 0;}
.regene .txt,
.regene .img {width: 100%;}
.regene .txt .inner {padding: 28px 5vw;}
.regene .txt h2 {font-size: 1.6rem;}
.regene .img {height: 250px;}

/*--------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/
header {padding: 18px 0;}
header .logo {width: 86px;}

header .g-navi {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #998675; visibility: hidden; opacity: 0; z-index: -1; transform: scale(1.1); transform-origin: center; transition: .5s ease;}
header .g-navi ul {width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center;}
header .g-navi ul li {margin-bottom: 15px;}
header .g-navi ul li a {color: #fff; font-size: 1.1rem;}
.open header .g-navi {visibility: visible; opacity: 1; z-index: 9001; transform: scale(1);}

header #humberger {position: fixed; top: 8px; right: 5vw; width: 36px; height: 36px; border: 2px solid #998675; border-radius: 50%; z-index: 9002; transition: .5s ease;}
header #humberger:hover {cursor: pointer;}
header #humberger div {position: absolute; width: 14px; height: 2px; left: 11px; background: #998675; transition: .5s ease;}
header #humberger div:nth-child(1) {top: 11px;}
header #humberger div:nth-child(2) {top: 16px; transition: opacity .3s ease;}
header #humberger div:nth-child(3) {top: 21px;}
.open header #humberger {border-color: #fff;}
.open header #humberger div {background: #fff;}
.open header #humberger div:nth-child(1) {top: 17px; transform: rotate(45deg);}
.open header #humberger div:nth-child(2) {opacity: 0;}
.open header #humberger div:nth-child(3) {top: 17px; transform: rotate(-45deg);}

header #toggle-back {width: 160px; height: 110px;}

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

footer .top {padding: 75px 5vw 35px; text-align: center;}
footer .top h2 {font-size: 1.9rem; line-height: 1.25; margin: 32px 0;}
footer .top .address {display: inline-block; text-align: left;}
footer .top .contact {display: block; margin-top: 32px;}
footer .top .contact .number {margin-bottom: 20px; text-align: center;}
footer .top .contact .number dl {display: inline-flex;}

footer .bottom .container {justify-content: center;}

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

/*--------------------------------------------------------------------------
TOPページ
--------------------------------------------------------------------------*/
#front .head {top: -56px; margin-bottom: -56px; padding-top: 68vw;}
#front .head:before {height: 68vw; background-image: url(../img/front/top-img_sp.jpg); background-size: auto 68vw; background-position: top;}
#front .head .txt {background: #fff; padding-bottom: 40px;}
#front .head .txt h1 {font-size: 1.9rem; line-height: 1.5; text-align: center; margin: 48px 0 36px;}
#front .head .txt p {font-size: .9rem; margin: 0 5vw;}
#front .head .headline-news {display: block; background: #fff; border-bottom: 1px solid #050d26;}
#front .head .headline-news h2 {display: block; width: 88px; background: #050d26; padding: 16px 24px; box-sizing: border-box;}
#front .head .headline-news h2 img {width: 40px;}
#front .head .headline-news .entry {display: block; padding: 12px 24px;}
#front .head .headline-news .entry * {display: block; line-height: 1.75;}

#front .what h2 {margin: 0; padding: 50px 0;}
#front .what section {flex-direction: column-reverse;}
#front .what section .txt {margin: 25px 5vw 20px;}
#front .what section .txt .inner {}
#front .what .sec02 {flex-direction: column;}

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

#natant .flow {margin: 50px auto 0; padding: 16px;}
#natant .flow li {position: relative; display: block;}
#natant .flow li:after {content: ""; display: block; position: absolute; bottom: -60px; left: 50%; width: 32px; height: 32px; border: 1px solid #8191ff; border-top: none; border-left: none; transform: translateX(-50%) rotate(45deg);}
#natant .flow li:last-of-type:after {display: none;}
#natant .flow li .img {margin-top: 32px;}
#natant .flow li .img img {margin: 0 auto 20px;}
#natant .flow .more {margin: 40px auto 30px;}

/*--------------------------------------------------------------------------
製品情報
--------------------------------------------------------------------------*/
#product .regena .inner {margin-bottom: 40px;}

#product .factor {padding: 35px 0 30px;}
#product .factor h2 {font-size: 1.65rem; margin-bottom: 15px;}
#product .factor .compon {flex-wrap: wrap; margin-bottom: 25px;}
#product .factor .compon li {width: 44vw; height: 44vw; margin: 1vw 0;}
#product .factor .compon li:nth-child(even) {margin-left: 2vw;}
#product .factor .compon li h3 span.big {font-size: 1.85rem;}
#product .factor .compon li h3 span.small {font-size: .8rem;}
#product .factor .effect > li {width: 100%; margin-bottom: 15px; padding: 15px;}
#product .factor .effect h3 {font-size: 1.5rem;}

#product .contact {padding: 50px 0 100px;}
#product .contact h2 {font-size: 1.65rem;}
#product .contact h2:before,
#product .contact h2:after {bottom: -52px; width: 72px;}
#product .contact h2:before {left: calc(50% - 31px);}
#product .contact h2:after {left: calc(50% + 31px);}

/*--------------------------------------------------------------------------
FAQ
--------------------------------------------------------------------------*/
#faq {padding: 30px 0 10px;}

#faq .faq-list section {margin-bottom: 48px;}
#faq .faq-list dl {margin-bottom: 12px;}
#faq .faq-list dl dt:before,
#faq .faq-list dl dd:before {font-size: 18px; margin-right: 9px;}
#faq .faq-list dl dt {font-size: 16px; text-indent: -15px; padding: 12px 40px 12px 44px;}
#faq .faq-list dl dd {padding: 14px 14px 14px 42px; text-indent: -14px;}
#faq .faq-list dl dt:after {top: calc(50% - 6px); right: 16px; border-width: 10px 6px 0 6px;}
#faq .faq-list dl dd:before {top: 0;}

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

#company .info {margin: 40px auto;}
#company .info table tr,
#company .info table th,
#company .info table td {display: block;}
#company .info table tr {padding: 12px 8px;}
#company .info table th {margin-bottom: 4px;}

#company .map {height: 480px; margin: 40px auto 0;}