/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
汎用
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
body {min-width: 100%; min-height: 100vh;}
main {position: relative;}
main:before {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; z-index: -1;}

/*clearfix*/
.cf:after {content: ""; display: block; clear: both; visibility: hidden;}

.flex {display: flex;}

/*明朝*/
.serif {font-family: 'Noto Serif JP',"Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; color: #050d26; font-weight: 400;}

/*--------------------------------------------------------------------------
部品
--------------------------------------------------------------------------*/
/*汎用ヘッダー*/
.g-h1 {line-height: 1.5; letter-spacing: 2px; text-align: center;}
.g-h1 span {display: block; font-size: .8rem;}
.g-h2 {color: #8191ff; line-height: 1.5;}

/*MORE*/
.more {position: relative; display: block; width: calc(100% - 5px); color: #fff; font-size: 1.15rem; font-weight: 700; text-align: center; margin: 30px auto; background: #8191ff; border: 1px solid #8191ff; box-shadow: 5px 5px 0 0 rgba(0,0,0, .2); z-index: 2;}
.more:hover {color: #8191ff; background: #fff; opacity: 1;}

/*固定背景*/
.fix-img {position: relative;}
.fix-img:before {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-attachment: fixed; background-repeat: no-repeat; z-index: -1;}

/*TOP画像*/
.head-img {width: 100%;}
.head-img img {width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; font-family: "object-fit: cover; object-position: 50% 50%;";}

/*ブロック*/
.regene .txt {position: relative; background: #8191ff;}
.regene .txt * {color: #fff;}
.regene .txt p {margin-bottom: 1rem;}
.regene .txt p:last-child {margin-bottom: 0;}
.regene .txt h2 {line-height: 1.5; margin-bottom: 12px;}
.regene .img img {width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; font-family: "object-fit: cover; object-position: 50% 50%;";}

/*--------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/
header {position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 9000;}
header .container {justify-content: space-between; align-items: center;}

#overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .5); visibility: hidden; opacity: 0; transition: 1s ease; z-index: -1;}
.open #overlay {visibility: visible; z-index: 9000; opacity: 1;}

/*--------------------------------------------------------------------------
フッター
--------------------------------------------------------------------------*/
footer .back-img {width: 100%; background: #000;}
footer .back-img img {width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; font-family: "object-fit: cover; object-position: 50% 50%;";}

footer .top {position: relative; background: #fdf9f5;}
footer .top .logo {position: absolute; top: -67px; left: 50%; transform: translateX(-50%); width: 154px;}
footer .top .logo:hover {opacity: 1;}
footer .top .logo #hex {width: 154px;}
footer .top .logo:hover {filter: drop-shadow(0 0 8px rgba(0,0,0, .25));}
footer .top .logo #hex .st0 {fill: #fff;}
footer .top .logo #hex .st1 {fill: #fdf9f5;}
footer .top .logo img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 106px;}
footer .top h2 {text-align: center;}
footer .top .address {font-size: .95rem;}
footer .top .contact .number dl {align-items: baseline; margin-bottom: 12px;}
footer .top .contact .number dt {font-size: 1.5rem; line-height: 1; width: 44px; margin-right: 12px;}
footer .top .contact .number dt img {width: 44px;}
footer .top .contact .number dd a,
footer .top .contact .number dd p {display: inline-block; font-size: 2.2rem; line-height: 1;}
footer .top .contact .number dd span {display: block; font-size: .85rem; line-height: 1.5;}
footer .top .contact .form {justify-content: center; background: #050d26; padding: 24px 54px; border: 2px solid #050d26;}
footer .top .contact .form img {width: 42px; margin-right: 14px; opacity: 1;}
footer .top .contact .form span {color: #fff; font-size: 1.1rem;}
footer .top .contact .form:hover {background: #fff; opacity: 1;}
footer .top .contact .form:hover span {color: #050d26;}

footer .bottom {background: #050d26;}
footer .bottom * {color: #fff; font-size: .8rem; line-height: 1;}
footer .bottom a:after {background: #fff;}
footer .bottom .container {justify-content: space-between; padding: 18px 0;}

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

/*--------------------------------------------------------------------------
TOPページ
--------------------------------------------------------------------------*/
#front .head .txt {flex-direction: column; justify-content: center; align-items: center; width: 100%;}

#front .what section .txt p {margin-bottom: 1rem;}
#front .what section .img .img-mask img {width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; font-family: "object-fit: cover; object-position: 50% 50%;";}

/*--------------------------------------------------------------------------
幹細胞上清液
--------------------------------------------------------------------------*/
#natant .flow {background: #fff; box-sizing: border-box;}

#natant .flow li {margin-bottom: 100px;}
#natant .flow li:last-of-type {margin-bottom: 0;}
#natant .flow li:nth-child(1) .img img {width: 202px;}
#natant .flow li:nth-child(2) .img img {width: 202px;}
#natant .flow li:nth-child(3) .img img {width: 312px;}
#natant .flow li:nth-child(4) .img picture:nth-child(1) img {width: 263px; margin-bottom: 30px;}
#natant .flow li:nth-child(4) .img picture:nth-child(2) img {width: 208px;}

/*--------------------------------------------------------------------------
製品情報
--------------------------------------------------------------------------*/
#product .regene .img img {object-position: 50% 0%; font-family: "object-fit: cover; object-position: 50% 0%;";}

#product .regena p {margin-bottom: 1rem;}

#product .factor {background: #fdf9f5;}
#product .factor h2 {color: #4d4d4d; line-height: 1.5; text-align: center;}
#product .factor .compon {justify-content: center;}
#product .factor .compon li {border-radius: 50%;}
#product .factor .compon li:nth-child(1) {background: #ff91ba;}
#product .factor .compon li:nth-child(2) {background: #e884db;}
#product .factor .compon li:nth-child(3) {background: #b984e8;}
#product .factor .compon li:nth-child(4) {background: #ad91ff;}
#product .factor .compon li h3 {display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%;}
#product .factor .compon li h3 span {color: #fff; text-align: center; line-height: 1.5;}

#product .factor .effect {flex-wrap: wrap;}
#product .factor .effect > li {box-sizing: border-box; border: 1px solid;}
#product .factor .effect > li:nth-child(1) {border-color: #ff91ba;}
#product .factor .effect > li:nth-child(2) {border-color: #e884db;}
#product .factor .effect > li:nth-child(3) {border-color: #b984e8;}
#product .factor .effect > li:nth-child(4) {border-color: #ad91ff;}
#product .factor .effect h3 {font-weight: 700; line-height: 1.2; margin-bottom: 8px;}
#product .factor .effect li:nth-child(1) h3 {color: #ff91ba;}
#product .factor .effect li:nth-child(2) h3 {color: #e884db;}
#product .factor .effect li:nth-child(3) h3 {color: #b984e8;}
#product .factor .effect li:nth-child(4) h3 {color: #ad91ff;}
#product .factor .effect li > ul {padding-left: 1.25rem;}
#product .factor .effect li > ul > li {list-style-type: disc;}

#product .contact {background: #fff;}
#product .contact h2 {position: relative; margin: 0;}
#product .contact h2:before,
#product .contact h2:after {content: ""; position: absolute; height: 1px; background: #8191ff;}
#product .contact h2:before {transform: translateX(-50%) rotate(30deg);}
#product .contact h2:after {transform: translateX(-50%) rotate(-30deg);}

/*--------------------------------------------------------------------------
FAQ
--------------------------------------------------------------------------*/
#faq .faq-list section h2 {font-weight: 700;}

#faq .faq-list dl {border: 1px solid #8191ff;}
#faq .faq-list dl:last-child {margin-bottom: 0;}
#faq .faq-list dl dt,
#faq .faq-list dl dd {position: relative;}
#faq .faq-list dl dt:before,
#faq .faq-list dl dd:before {position: relative; display: inline-block; font-weight: 700; line-height: 1;}
#faq .faq-list dl dt {color: #fff; line-height: 1.75; background: #8191ff; cursor: pointer;}
#faq .faq-list dl dd {display: none; line-height: 2;}
#faq .faq-list dl dt:after {content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-color: #fff transparent transparent transparent; transition: .3s ease;}
#faq .faq-list dl dt.open:after {transform: rotateX(180deg);}
#faq .faq-list dl dt:before {content: "Q."; color: #fff;}
#faq .faq-list dl dd:before {content: "A."; color: #8191ff;}

/*--------------------------------------------------------------------------
会社概要
--------------------------------------------------------------------------*/
#company .about p {text-align: center;}

#company .info table tr {border-bottom: 1px solid #666;}
#company .info table tr:last-child {border-bottom: none;}
#company .info table tr th,
#company .info table tr td {line-height: 1.5; overflow-wrap: break-word;}
#company .info table tr th {text-align: left;}

#company .map {position: relative; overflow: hidden;}
#company .map iframe,
#company .map object,
#company .map embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}