@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+JP&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap");
.biosign-ns { font-family: 'Noto Sans JP', sans-serif; font-size: 16px; }
.biosign-ns .fadeIn { transition-duration: 1.0s; }
.biosign-ns .upIn { transition-duration: 1.0s; transform: translateY(8px); }
.biosign-ns .upIn.inView { transform: translateY(0); }
.biosign-ns sup { font-size: 9px; vertical-align: super; top: 0; }
.biosign-ns h3 sup { top: -0.5em; }

.container { width: 1240px; max-width: 92%; margin-left: auto; margin-right: auto; }

.ff-a1m { font-family: "Shippori Mincho","A1 Mincho",serif; }

.ff-a1mb { font-family: "Shippori Mincho","A1 Mincho M JIS2004 AP",serif; }

.ff-zen { font-family: "Zen Kurenaido", sans-serif; }

.fs10 { font-size: 10px; }

.ns-kv { background: #000 url("../images/kv-pc.jpg") no-repeat center; background-size: 1920px; position: relative; overflow: hidden; }
.ns-kv.fadeIn { transition-duration: 2.5s; }
.ns-kv figure { opacity: 0; width: 1920px; margin: 0 auto; }
.ns-kv h1 { position: absolute; left: 16%; top: 50%; transform: translate(0, -25%); }
.ns-kv h1.fadeIn { transition-delay: 1.0s; transition-duration: 2.5s; }
.ns-kv h1.inView { transform: translate(0, -74%); }

.ns-content { padding: 54px 0 84px 0; /*
background-image: url("../images/bg-lights.jpg"), linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(26,63,106,1) 53%, rgba(0,0,0,1) 100%);
background-position: center top, 0 0;
background-repeat: no-repeat, no-repeat;
background-size: 1920px, cover;
//background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(26,63,106,1) 53%, rgba(0,0,0,1) 100%);
*/ background: #1a3f6b url("../images/bg-lights.jpg") no-repeat center top; background-size: 1920px; }
.ns-content h2 { font-family: "Shippori Mincho","A1 Mincho M JIS2004 AP",serif; font-size: clamp(24px, 6vw, 40px); font-weight: 600; font-feature-settings: "palt"; letter-spacing: -0.015em; color: #181f50; margin-bottom: 32px; }
.ns-content h3 { font-family: "Shippori Mincho","A1 Mincho M JIS2004 AP",serif; font-size: clamp(16px, 10vw, 28px); line-height: 1.8; }
.ns-content p { line-height: 1.75; }

.ns-lead { background: #fff url("../images/bg-lead.jpg") no-repeat center bottom; background-size: 1920px; padding: 320px 0 240px; text-align: center; }
.ns-lead h2 { color: #fff; }
.ns-lead p { font-size: clamp(14px, 2vw, 21px); line-height: 2.2; margin-bottom: 1.2em; }
.ns-lead p.inView { transition-duration: 1.2s; }

.ns-prd { padding-top: 200px; display: flex; justify-content: center; align-items: center; }
.ns-prd figure { flex: 0 0 320px; position: relative; }
.ns-prd figure img { position: absolute; left: 50%; top: 25%; transform: translate(-50%, -55%); width: 30%; max-width: none; z-index: 1; }

.ns-prd-txt { text-align: left; position: relative; z-index: 2; }
.ns-prd-txt h3 { font-family: "Shippori Mincho","A1 Mincho M JIS2004 AP",serif; font-size: clamp(14px, 6vw, 20px); letter-spacing: -0.075em; margin: 0; padding: 0; border-bottom: 0; }
.ns-prd-txt h3 i { display: inline-block; width: 8px; }
.ns-prd-txt span { margin: 0.5em 0 0.5em 5em; width: 5px; height: 20px; display: inline-block; position: relative; }
.ns-prd-txt span::after { content: ""; border-left: 1px solid #fff; position: absolute; height: 0; transition-duration: 1.0s; }
.ns-prd-txt.inView span::after { height: 100%; }
.ns-prd-txt h4 { color: #d6c5ff; font-size: 1.4em; margin: 0 0 0.5em; }
.ns-prd-txt h5 { padding-bottom: 20px; }
.ns-prd-txt .prd-btn { padding: 0; margin: 0 0 0.5em; line-height: 1; letter-spacing: 0.05em; }
.ns-prd-txt .prd-btn a { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; background: url("../images/btn-pre.svg") no-repeat 0 0; min-width: 150px; min-height: 45px; padding: 3px 12px 7px; text-align: center; font-size: 16px; font-family: "Shippori Mincho","A1 Mincho M JIS2004 AP",serif; line-height: 1.1; }
.ns-prd-txt .prd-btn-pre a { background-image: url("../images/btn-pre.svg"); color: #000; }
.ns-prd-txt .prd-btn-post a { background-image: url("../images/btn-off.svg"); color: #000; }
.ns-prd-txt .prd-btn-post a:hover { background-image: url("../images/btn-on.svg"); }

.ns-possible .container { width: 814px; }
.ns-possible h2 { margin-bottom: 0; font-size: clamp(24px, 10vw, 36px); }
.ns-possible figure { text-align: center; padding-bottom: 24px; }
.ns-possible figure figcaption { transform: translateY(-1em); font-size: clamp(18px, 8vw, 26px); }
.ns-possible h3 { border-bottom: 0; position: relative; margin-bottom: 24px; }
.ns-possible h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; border-bottom: 1px solid #fff; transition-duration: 2.4s; }
.ns-possible h3.inView::after { width: 100%; }
.ns-possible .ns-flex { display: flex; justify-content: space-between; }
.ns-possible .ns-text { flex: 0 0 56%; text-align: justify; }
.ns-possible .ns-img { flex: 0 0 40%; text-align: right; }
.ns-possible .ns-img span { display: block; padding-top: 16px; }

.ns-uruoi { text-align: center; }
.ns-uruoi h2 { margin-bottom: 24px; }
.ns-uruoi h3 { color: #181f50; border-bottom: 0; text-align: center; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: clamp(16px, 7.2vw, 21px); padding-bottom: 100px; }
.ns-uruoi figure { position: relative; display: inline-block; }
.ns-uruoi figure figcaption { padding-top: 8px; font-size: 1.2em; }
.ns-uruoi figure::after { content: ""; display: block; position: absolute; left: 0; top: 0; transform: translate(-74%, -28%); width: 80%; height: 80%; background: url("../images/im-original.png") no-repeat 0 0; background-size: contain; }
.ns-uruoi p { padding: 40px 0; }
.ns-uruoi p a { display: inline-flex; justify-content: center; color: #fff; text-decoration: none; }
.ns-uruoi em { padding: 2px 0; margin: 0 10px 0 0; transition-duration: 0.7s; border-bottom: 1px solid #6b95b7; }
.ns-uruoi b { background: #6b95b7; color: #222; display: flex; align-items: center; font-weight: 500; padding: 2px 4px; line-height: 1; transition-duration: 0.8s; }
.ns-uruoi a:hover b { background: #fff; }

.ns-mechanism h3 { color: #181f50; border-bottom: 0; text-align: center; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: clamp(16px, 7.2vw, 21px); padding-bottom: 100px; }
.ns-mechanism .ns-flex { display: flex; justify-content: space-between; width: 914px; margin: 0 auto 64px; max-width: 100%; text-align: center; }
.ns-mechanism .ns-col-3 { flex: 0 0 43%; }
.ns-mechanism .ns-col-3 ul { background: url("../images/k-3.svg") no-repeat 0 0; }
.ns-mechanism .ns-col-4 { flex: 0 0 51%; }
.ns-mechanism .ns-col-4 ul { background: url("../images/k-4.svg") no-repeat 0 0; }
.ns-mechanism h4 { font-size: clamp(18px, 8vw, 24px); text-align: center; margin-bottom: 10px; font-feature-settings: "palt"; letter-spacing: 0.05em; }
.ns-mechanism ul { padding: 24px 8px; background-size: contain; display: flex; justify-content: space-between; }
.ns-mechanism span { display: block; height: 20px; line-height: 0; }
.ns-mechanism span img { height: 14px; margin: 0 auto auto; }
.ns-mechanism .i-Ori img { height: 20px; }
.ns-mechanism i img { width: 80px; margin: 4px auto; }
.ns-mechanism em { display: block; font-size: 12px; padding-top: 8px; padding-left: 0.5em; }
.ns-mechanism em .fs10 { display: block; padding-top: 5px; letter-spacing: -0.05em; }
.ns-mechanism .ns-notes { letter-spacing: -0.05em; }

.ns-fin { background: #1a3f6b url("../images/bg-fin.png") no-repeat center 33%; background-size: 1920px; }
.ns-fin h2 { color: #fff; }
.ns-fin h3 { text-align: center; font-family: 'Noto Sans JP', sans-serif; font-size: clamp(16px, 7.2vw, 21px); font-weight: 300; border-bottom: 0; }

.ns-fin-night { position: relative; padding: 150px 0; width: 790px; max-width: 100%; margin: 0 auto; }
.ns-fin-night p { position: absolute; opacity: 0; transition-delay: 0.3s; }
.ns-fin-night p strong { color: #d6c5ff; display: block; font-weight: 500; font-size: 1.4em; padding-bottom: 8px; }
.ns-fin-night p span { display: block; font-weight: 300; font-size: 0.9em; }
.ns-fin-night.inView p { opacity: 1; }
.ns-fin-night p.ns-p1 { top: 24%; transition-duration: 1.6s; }
.ns-fin-night p.ns-p2 { text-align: right; bottom: 16%; right: 0; transition-duration: 1.6s; }

.ns-fin-face { width: 506px; margin: auto; position: relative; }
.ns-fin-face figure { padding: 116px 0; width: 284px; margin: auto; }
.ns-fin-face .fin-kira { position: absolute; }
.ns-fin-face .fin-kira dl { position: relative; }
.ns-fin-face .fin-kira dt { position: absolute; }
.ns-fin-face .fin-kira-1 { right: 0; top: 0; }
.ns-fin-face .fin-kira-2 { left: 0; bottom: 0; }

/*************************************************** Generated by SVG Artista on 2/21/2024, 7:43:34 PM MIT license (https://opensource.org/licenses/MIT) W. https://svgartista.net *************************************************/
.fin-kira-1 dt { width: 140%; height: 123%; left: -42%; top: -6%; display: flex; justify-content: center; align-items: flex-end; opacity: 0; }
.fin-kira-1 .svg-elem-1 { stroke-dashoffset: 669px; stroke-dasharray: 669px; -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s; transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s; }

.fin-kira-1.inView .svg-elem-1 { stroke-dashoffset: 1338px; transition-delay: 0.9s; }
.fin-kira-1.inView dt { transition-delay: 1.2s; transform: rotate(-50deg); opacity: 0; animation: kira01 1.1s 2.1s linear forwards, kirakira 3s 3.2s infinite; }
.fin-kira-1.inView dt img { animation: hosi 0.4s 1.1s linear forwards; }

@keyframes kira01 { 0% { opacity: 0; transform: rotate(-210deg); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: rotate(-210deg); } }
@keyframes hosi { 0% { transform: rotate(0); }
  100% { transform: rotate(-135deg); } }
.fin-kira-2 dt { width: 233%; height: 156%; left: -10%; top: -52%; display: flex; justify-content: center; align-items: flex-end; opacity: 0; }
.fin-kira-2 .svg-elem-2 { stroke-dashoffset: 433.3731689453125px; stroke-dasharray: 433.3731689453125px; -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s; transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s; }

.fin-kira-2.inView .svg-elem-2 { stroke-dashoffset: 866px; transition-delay: 0.8s; }
.fin-kira-2.inView dt { transition-delay: 0.8s; transform: rotate(110deg); opacity: 0; animation: kira02 1.1s 1.8s linear forwards, kirakira 3s 2.4s infinite; }

@keyframes kira02 { 0% { opacity: 0; transform: rotate(-3deg); }
  50% { opacity: 1; }
  100% { opacity: 1; transform: rotate(-3deg); } }
@keyframes kirakira { 0% { opacity: 1; }
  10% { opacity: 0; }
  11% { opacity: 1; }
  12% { opacity: 0; }
  13% { opacity: 1; }
  100% { opacity: 1; } }
@keyframes kira1 { 0% { transform: rotate(50deg) translateX(480px); }
  10% { transform: rotate(40deg) translateX(440px); }
  15% { transform: rotate(35deg) translateX(400px); }
  25% { transform: rotate(20deg) translateX(320px); }
  40% { transform: rotate(16deg) translateX(300px); }
  55% { transform: rotate(8deg) translateX(240px); }
  70% { transform: rotate(0deg) translateX(180px); }
  80% { transform: rotate(-2deg) translateX(140px); }
  90% { transform: rotate(-7deg) translateX(120px); }
  100% { transform: rotate(0deg) translateX(0); } }
@keyframes kira2 { 0% { transform: rotate(50deg) translateX(480px); }
  40% { transform: rotate(30deg) translateX(400px); }
  50% { transform: rotate(16deg) translateX(300px); }
  80% { transform: rotate(-2deg) translateX(200px); }
  95% { transform: rotate(-18deg) translateX(80px); }
  100% { transform: rotate(0deg) translateX(0); } }
.ns-how { background: #1a3f6b; padding-top: 0; padding-bottom: 100px; }
.ns-how h2 { color: #fff; }
.ns-how h3 { text-align: center; border-bottom: 0; font-family: 'Noto Sans JP', sans-serif; font-size: clamp(16px, 7.2vw, 21px); font-weight: 300; }
.ns-how ul { display: flex; justify-content: center; padding: 80px 0 100px; }
.ns-how li { text-align: center; padding: 0 24px; position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; }
.ns-how li i { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; z-index: 3; }
.ns-how li i img { height: 122px; }
.ns-how li em { display: block; position: relative; z-index: 3; padding: 16px 0 0; font-size: 14px; }
.ns-how li.how-prd { position: relative; z-index: 1; }
.ns-how li.how-prd::after { content: ""; position: absolute; width: 240%; height: 240%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url("../images/bg-how.png") no-repeat center; background-size: 350px; z-index: 1; }
.ns-how li.how-prd i img { height: auto; }
.ns-how li.arw { z-index: 4; justify-content: center; }
.ns-how li.arw::after { content: ""; display: inline-block; transform: translateY(-50%); width: 24px; height: 24px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(-45deg); }
.ns-how .fs10 { line-height: 2; }

@media only screen and (min-width: 1920px) { .biosign-ns-wrap { position: relative; width: 1920px; margin: 0 auto; }
  .biosign-ns-wrap::before, .biosign-ns-wrap::after { content: ""; position: absolute; left: -1px; top: 0; height: 100%; width: 168px; background: url("../images/bg-l.png") repeat-y 0 0; background-size: contain; }
  .biosign-ns-wrap::after { left: auto; right: -1px; background-image: url("../images/bg-r.png"); background-position: right top; } }
@media only screen and (max-width: 768px) { .biosign-ns-wrap { background-color: #fff; }
  .ns-kv { background: url("../images/kv-sp.jpg") no-repeat center top; background-size: 100vw; }
  .ns-kv h1 { left: 50%; top: 98%; transform: translate(-50%, -80%); width: 400px; max-width: 70%; }
  .ns-kv h1.inView { transform: translate(-50%, -110%); }
  .ns-kv h1 img { width: 100%; }
  .ns-kv figure { height: auto; width: auto; }
  .ns-content h2 { padding: 0; }
  .ns-lead { background: linear-gradient(180deg, white 0%, #97b9de 5%, rgba(151, 185, 222, 0) 15%, rgba(255, 255, 255, 0) 100%), url("../images/bg-lead-sp.jpg"); background-repeat: no-repeat, no-repeat; background-position: 0 0, center center; background-size: 100vw, 100vw; }
  .ns-lead p { font-size: clamp(15px, 4.4vw, 21px); }
  .ns-prd { display: block; }
  .ns-prd figure { max-width: 320px; margin: auto; }
  .ns-prd-txt { text-align: center; padding-top: 100px; }
  .ns-prd-txt h3 { text-align: center; }
  .ns-prd-txt h3 small { display: block; }
  .ns-prd-txt h4 { text-align: center; }
  .ns-prd-txt span { margin: 0.5em auto; width: 1px; }
  .ns-prd-txt h5 { text-align: center; }
  .ns-possible h3 { margin-top: 40px; }
  .ns-possible .ns-flex { display: block; }
  .ns-possible .ns-text { padding: 0 0 40px; }
  .ns-possible .ns-img img { margin: auto; width: 480px; max-width: 92%; }
  .ns-mechanism { background-size: 540vw; }
  .ns-mechanism .ns-flex { display: block; }
  .ns-mechanism h4 { position: relative; text-align: left; }
  .ns-mechanism h4::after { content: ""; border-bottom: 1px solid #fff; position: absolute; width: 0; left: 0; bottom: -4px; transition-duration: 1.0s; }
  .ns-mechanism h4.inView::after { width: 100%; }
  .ns-mechanism ul { justify-content: center; flex-wrap: wrap; }
  .ns-mechanism ul li { flex: 0 0 30%; }
  .ns-mechanism .ns-col-3 { padding-bottom: 80px; }
  .ns-mechanism .ns-col-3 ul { background: none; }
  .ns-mechanism .ns-col-4 ul { background: none; }
  .ns-mechanism .ns-col-4 ul li { flex: 0 0 40%; }
  .ns-fin-night p.ns-p1 { left: 8%; top: 20%; }
  .ns-fin-night p.ns-p2 { right: 10%; bottom: 8%; }
  .ns-how h2 { text-align: left; }
  .ns-how h3 { text-align: left; }
  .ns-how ul { flex-direction: column; padding-top: 0; padding-bottom: 40px; }
  .ns-how li { padding: 16px 16px 8px; }
  .ns-how li.arw { padding: 8px; }
  .ns-how li.arw::after { margin: auto; transform: rotate(45deg); width: 16px; height: 16px; }
  .ns-how li.how-prd { padding-top: 40px; z-index: 1; }
  .ns-how li.how-prd::after { background-size: 400px; width: 320%; height: 320%; top: 60%; }
  .ns-how .fs10 { position: relative; z-index: 5; }
  .ns-link { background: #f2f2f2; padding: 16px 8px; }
  .ns-link h3 { text-align: center; text-decoration: underline; border-bottom: 0; color: #777; font-size: 16px; }
  .ns-link h3 em { font-weight: 400; display: inline-block; border-bottom: 1px solid #777; }
  .ns-link .link-prd { background: #fff; padding: 8px; color: #222; margin-bottom: 24px; font-weight: 500; }
  .ns-link .link-prd figure { text-align: center; max-width: 17vw; margin: auto; }
  .ns-link .link-prd h4 { font-weight: 500; margin-top: 8px; margin-bottom: 10px; font-size: clamp(16px, 4vw, 21px); }
  .ns-link .link-prd h5 { line-height: 1.7; padding: 0 0 20px 0; font-weight: 400; }
  .ns-link .link-prd p { padding-bottom: 10px; }
  .ns-link .link-prd p em { display: inline-flex; align-items: center; padding: 4px 4px 5px; border: 1px solid #222; font-size: 0.85em; line-height: 1; }
  .ns-link .link-prd p small { display: block; padding: 5px 0; }
  .ns-link .link-prd p.txtC { text-align: center; padding-bottom: 1em; }
  .ns-link .link-prd p.txtR { text-align: right; }
  .ns-link .link-prd .link-btn { display: inline-block; background: #c2c2c2; color: #fff; border-radius: 6px; padding: 8px 24px 8px 24px; text-decoration: none; position: relative; }
  .ns-link .link-prd .link-btn::after { content: ""; display: inline-block; vertical-align: middle; width: 10px; height: 10px; border: 1px solid #fff; transform: rotate(45deg); border-bottom: 0; border-left: 0; }
  .ns-link .link-prd-wrap { border: 1px solid #d1d1d1; padding: 16px; } }
.ssp { display: none; }

@media only screen and (max-width: 540px) { .tb { display: none; }
  .ssp { display: block; }
  .ns-kv { padding-bottom: 25vw; background-color: #d1dded; background-image: url("../images/kv-sp.jpg"), linear-gradient(180deg, #fff 0%, #fff 92%, #d1dded 100%); background-repeat: no-repeat, no-repeat; background-position: center top, 0 0; background-size: 100vw, 100vw; overflow: visible; z-index: 5; }
  .ns-content { padding-top: 40px; padding-bottom: 54px; }
  .ns-lead { background-color: #fff; background-image: linear-gradient(180deg, #d1dded 0%, #d1dded 2%, #97b9de 7%, rgba(151, 185, 222, 0) 15%, rgba(255, 255, 255, 0) 100%), url("../images/bg-lead-sp.jpg"); background-position: 0 0, center 80%; padding: 50vw 0 28vw; position: relative; }
  .ns-lead h2 { font-size: 7.0vw; letter-spacing: -0.05em; }
  .ns-lead p { line-height: 1.8; }
  .ns-prd { padding-top: 36vw; }
  .ns-prd figure img { width: 108%; }
  .ns-prd-txt { padding-top: 16vw; }
  .ns-prd-txt h4 { font-size: 4.6vw; }
  .ns-prd-txt .prd-btn a { font-size: clamp(13px, 5.4vw, 18px); letter-spacing: 0; }
  .ns-possible figure { max-width: 80%; margin: auto; padding-bottom: 0; }
  .ns-uruoi { background-size: 450vw; }
  .ns-uruoi h3 { padding-bottom: 56px; }
  .ns-uruoi figure::after { width: 60%; height: 60%; transform: translate(-76%, -20%); }
  .ns-uruoi p a { font-size: 3.7vw; }
  .ns-possible h2 { font-size: clamp(18px, 5.6vw, 40px); letter-spacing: -0.05em; margin-left: -0.5em; white-space: nowrap; }
  .ns-how h2, .ns-fin h2, .ns-uruoi h2, .ns-mechanism h2 { font-size: clamp(18px, 5.6vw, 40px); letter-spacing: -0.05em; }
  .ns-content h3, .ns-possible figure figcaption { font-size: 5.5vw; }
  .ns-possible h3, .ns-prd h3 { font-size: 5.0vw; }
  .ns-how h3, .ns-fin h3, .ns-mechanism h3, .ns-uruoi h3 { font-size: 3.7vw; letter-spacing: -0.01em; }
  .ns-mechanism h3 { padding-bottom: 64px; }
  .ns-mechanism h4 { font-size: 4.6vw; }
  .ns-mechanism em { font-size: 11px; }
  .ns-mechanism .ns-col-3 { padding-bottom: 40px; }
  .ns-mechanism ul li { flex: 0 0 auto; padding: 0 2px; }
  .ns-fin { background-size: 320vw; background-position: center 90%; }
  .ns-fin-face { width: 110%; left: -5%; }
  .ns-fin-face figure { padding: 16vw 0; }
  .ns-fin-night p { line-height: 1.4; }
  .ns-fin-night p.ns-p1 { left: 4%; top: 6%; }
  .ns-fin-night p.ns-p2 { right: 4%; bottom: 6%; }
  .ns-fin-face .fin-kira svg { max-width: 50vw; height: auto; }
  .ns-fin-face .fin-kira-1 { right: -8vw; top: -16vw; }
  .fin-kira-1 dt { width: 40px; height: 40px; left: -40px; top: -2%; }
  .ns-fin-face .fin-kira-2 { left: -6vw; bottom: -4vw; }
  .fin-kira-2 dt { width: 40px; height: 40px; left: 102%; top: 96%; }
  /*************************************************** Generated by SVG Artista on 2/26/2024, 4:06:29 PM MIT license (https://opensource.org/licenses/MIT) W. https://svgartista.net *************************************************/
  .fin-kira-1 .svg-elem-1s { stroke-dashoffset: 945.350830078125px; stroke-dasharray: 945.350830078125px; -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s; transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s; }
  .fin-kira-1.inView .svg-elem-1s { stroke-dashoffset: 1890.70166015625px; }
  .fin-kira-2 .svg-elem-2s { stroke-dashoffset: 966.5772705078125px; stroke-dasharray: 966.5772705078125px; -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s; transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s; }
  .fin-kira-2.inView .svg-elem-2s { stroke-dashoffset: 1933.154541015625px; }
  .ns-how h2 { margin-bottom: 16px; }
  .ns-how li i img { height: 80px; } }
@media only screen and (max-width: 1000px) { .sticky-nav ul { margin-left: 0; }
  .sticky-nav .nav-company a { width: 10vw; height: 2.5vw; } }
@media only screen and (max-width: 888px) { .sticky-nav .nav-logo { width: 14vw; margin-right: 0 !important; }
  .navigation .nav-logo a { width: 90%; }
  .navigation li, .sticky-nav .nav-company { padding-left: 8px; } }
@media only screen and (max-width: 440px) { .ns-prd-txt h5 { white-space: nowrap; font-size: 15.5px; }
  .ns-fin-night p.ns-p1 { top: 9%; }
  .ns-fin-face .fin-kira-1 { right: -8vw; top: -16vw; }
  .ns-fin-face .fin-kira-2 { left: -8vw; bottom: -10vw; }
  .fin-kira-1 dt { width: 24px; height: 24px; left: -24px; }
  .fin-kira-2 dt { width: 24px; height: 24px; }
  .ns-fin-face figure { padding: 12vw 0 16vw; }
  .ns-fin-face figure img { max-width: 90%; display: block; margin: auto; }
  .ns-fin h3, .ns-mechanism h3, .ns-uruoi h3 { font-size: 16px; letter-spacing: -0.05em; white-space: nowrap; }
  .ns-how h3 { font-size: 16px; }
  .nosp { display: none; } }
@media only screen and (max-width: 400px) { .ns-fin-face .fin-kira-1 { right: -10vw; }
  .ns-fin-face .fin-kira-2 { left: -10vw; bottom: -4vw; } }
@media only screen and (max-width: 340px) { .ns-fin-face .fin-kira-1 { right: -12vw; }
  .ns-fin-face .fin-kira-2 { left: -11vw; bottom: -3vw; } }


/* EC shop Link Area */

.link_StyleShop {
  font-family: 'Noto Serif', 'Noto Serif JP', serif;    
  font-weight: 700;
  width: 940px;
  max-width: 100%;
  margin: 60px auto 60px;
  padding: 8px 0px 15px;
  border-radius: 3px;
  font-size: 13px;
  font-size: 0.8125rem;
  background-color: #ffffff;
  color: #666;

}

.link_StyleShop p {
    padding: 0;
    margin: 0;
}
.link_StyleShop .lss_title {
    margin-bottom: 40px;
    text-align: center;
}

.link_StyleShop .ttl {
	 font-family: 'Noto Serif', serif;  
	font-size: 18px;

/*  	font-size: 1.125rem;*/
	font-weight: bold;
	text-align: center;
    position: relative;
    display: inline-block;
    padding: 0 380px;
	color: #000;

}

.link_StyleShop .ttl:before, 
.link_StyleShop .ttl:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 365px;
  height: 1px;
  background-color: #ccc;
}



.link_StyleShop .ttl:before {
  left:0;
}

.link_StyleShop .ttl:after {
  right: 0;
}

.link_StyleShop .link_cont {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	width: 900px;
	margin: 0 auto;

}

.link_StyleShop .shop_area,
.link_StyleShop .style_area {
	position: relative;
	width: 415px;
	box-shadow: 0 0 3px 0 rgb(4 0 0 / 35%);
}

.link_StyleShop .shop_area img,
.link_StyleShop .style_area img {
	width: 100%;
}

.link_StyleShop .shop_area p {
	position: absolute;
	top: 29px;
	left: 220px;
	letter-spacing: 0.3em;
	line-height: 1.4;
}

.link_StyleShop .style_area p {
	position: absolute;
	top: 29px;
	right: 20px;
	line-height: 1.4;
  font-weight: 700!important;
}

.link_StyleShop .shop_area p .line2,
.link_StyleShop .style_area p .line2 {
  font-size: 16px;
/*  font-size: 1rem;*/
  letter-spacing: normal;
  display: inline-block;	
}

.link_StyleShop .style_area p .line2 {
	margin-left : 3em;
}
.link_StyleShop .lss_arrow img {
	width: 22px;
    vertical-align:middle;
}

.link_StyleShop a:hover .lss_arrow {
	margin-left: 0.4em; 
	transition-duration: .3s;
}


.link_StyleShop a {
  font-family: 'Noto Serif JP', serif;
  display: inline-block;
  font-size: 19px;
/*  font-size: 1.1875rem;*/
  font-weight: 700!important;
  line-height: 0.5;
  vertical-align: middle;
  color: #106708;
  text-decoration: none; }


.link_StyleShop a:link {
  color: #106708; }

.link_StyleShop a:visited {
  color: #106708; }

.link_StyleShop a:hover {
  color: #68a062;
}

.link_StyleShop a:hover img {
  opacity: 0.7;
  transition-duration: .3s;	
}


.link_StyleShop a:visited:hover {
  color: #68a062;
}

.link_StyleShop a:active {
  color: #106708;	
}



@media screen and (min-width: 768px) and (max-width: 930px) {
  .link_StyleShop {
    width: 100%;
    margin: 0 auto 34px;  
    } 

  .link_StyleShop .lss_title {
    margin-bottom: 33px;
}

  .link_StyleShop .ttl {
	font-size: 17px;
  	font-size: 1.0625rem;  
    padding: 0 298px;
}

  .link_StyleShop .ttl:before, 
  .link_StyleShop .ttl:after {
    width: 280px;
}	

  .link_StyleShop .link_cont {
	width: 718px;
}		

.link_StyleShop .shop_area,
.link_StyleShop .style_area {
	width: 330px;
}

.link_StyleShop .shop_area p {
    top: 21px;
    left: 162px;
	line-height: 1.4;
}

.link_StyleShop .style_area p {
	top: 21px;
	right: 12px;
	line-height: 1.4;
}    

.link_StyleShop .shop_area p .line2,
.link_StyleShop .style_area p .line2 {
  font-size: 14px;
  font-size: 0.875rem;
}

.link_StyleShop a {
  display: inline-block;
  font-size: 17px;
  font-size: 1.0625rem;
}

	

}

@media only screen and (max-width: 767px) {
  .link_StyleShop {
    width: 100%;
    background-color: #fff;
    margin: 0 auto;
    padding: 30px 0 58px;
    } 


  .link_StyleShop .lss_title {
    margin-bottom: 27px;
    }

  .link_StyleShop .ttl {
	font-size: 3.8vw;  
    padding: 0 110px;
    }

  .link_StyleShop .ttl:before, 
  .link_StyleShop .ttl:after {
    width: 94px;
    }

  .link_StyleShop .link_cont {
	flex-direction: column-reverse;
	width: 90%;
	margin: 0 auto;
    }

  .link_StyleShop .shop_area,
  .link_StyleShop .style_area {
	width: 90%;
	margin: 0 auto;
    }

  .link_StyleShop .style_area {
	margin-bottom: 25px;	
	}

  /*.link_StyleShop .shop_area {
	margin-bottom: 25px;
    }*/

  .link_StyleShop .shop_area p,
  .link_StyleShop .style_area p {
	position: absolute;
	top: 26%;
    left: 53%;
    right: 0;
	line-height: 1.4;  
    }

.link_StyleShop .shop_area p .line2,
.link_StyleShop .style_area p .line2 {
	font-size: 3.2vw;
    }	

  .link_StyleShop .style_area p .line2 {
	margin-left : 5em;
    }

  .link_StyleShop .lss_arrow img {
	width: 17px;
    }
  .link_StyleShop a {
	font-size: 3.8vw;
    }

}    

@media only screen and (max-width: 329px) {    
  .link_StyleShop .ttl {
    padding: 0 80px;
    }
	.link_StyleShop .ttl {
	font-size: 4.2vw;  
    }
  .link_StyleShop .ttl:before, 
  .link_StyleShop .ttl:after {
    width: 64px;
    }
  .link_StyleShop .shop_area p,
  .link_StyleShop .style_area p {
	top: 23%; 
    left: 49%;
    }
  .link_StyleShop .shop_area p .line2,
  .link_StyleShop .style_area p .line2 {
	font-size: 3.4vw;
    }

  .link_StyleShop a {
	font-size: 4.2vw;
    }	
}




/* =================================================
	footer
=================================================*/
.footer-upper .sitemap .col_logo {
  margin-bottom: 20px; }
.footer-upper .sitemap nav .col1 {
  width: 25%;
  line-height: 1.4; }
.footer-upper .sitemap nav .col2 {
  width: 75%; }
.footer-upper .sitemap a {
    font-size: 13px;
  color: #333;
  text-decoration: none; }
  .footer-upper .sitemap a:link {
    color: #333; }
  .footer-upper .sitemap a:visited {
    color: #333; }
  .footer-upper .sitemap a:hover {
    color: #A5A5A5; }
  .footer-upper .sitemap a:visited:hover {
    color: #999; }
  .footer-upper .sitemap a:active {
    color: #999; }
.footer-upper .about-makeup img {
    width: 18px;
    vertical-align: -3px;
    margin-right: 4px;
}
@media only screen and (max-width: 767px) {
  .footer-upper .sitemap nav .col1, .footer-upper .sitemap nav .col2, .footer-upper .sitemap nav .col3, .footer-upper .sitemap nav .col4 {
    width: 100%; } }

/*サイトマップ*/



.footer-upper .sitemap .inner {
  width: 960px;
  max-width: 100%;
  margin: 0 auto;
  zoom: 1; }
  .footer-upper .sitemap .inner:before, .footer-upper .sitemap .inner:after {
    content: " ";
    display: table; }
  .footer-upper .sitemap .inner:after {
    clear: both; }
.footer-upper .sitemap .col_logo {
  float: left;
  display: inline;
  width: 25%; }
.footer-upper .sitemap nav {
  width: 75%;
  float: left;
  display: inline;
  margin-top: 0 !important; }
  .footer-upper .sitemap nav .columns {
    zoom: 1; }
    .footer-upper .sitemap nav .columns:before, .footer-upper .sitemap nav .columns:after {
      content: " ";
      display: table; }
    .footer-upper .sitemap nav .columns:after {
      clear: both; }
  .footer-upper .sitemap nav .col1, .footer-upper .sitemap nav .col2, .footer-upper .sitemap nav .col3, .footer-upper .sitemap nav .col4 {
    float: left;
    display: inline; }
.footer-upper .sitemap dt, .footer-upper .sitemap li {
  font-weight: bold;
  margin-bottom: 20px; }
.footer-upper .sitemap dd {
  font-size: 1.2rem;
  margin-bottom: 8px; }
.footer-upper .sitemap a {
  color: #333;
  text-decoration: none; }
  .footer-upper .sitemap a:link {
    color: #333; }
  .footer-upper .sitemap a:visited {
    color: #333; }
  .footer-upper .sitemap a:hover {
    color: #666; }
  .footer-upper .sitemap a:visited:hover {
    color: #666; }
  .footer-upper .sitemap a:active {
    color: #666; }
.footer-upper .sitemap .new {
  margin-left: 0.5em;
  color: #c41876; }
.footer-upper .sitemap .about-makeup {
  display: block; }
@media only screen and (max-width: 767px) {
  .footer-upper .sitemap .inner {
    width: 100%; }
  .footer-upper .sitemap .col_logo {
    display: none; }
  .footer-upper .sitemap nav {
    width: 100%;
    display: block; }
    .footer-upper .sitemap nav .col1, .footer-upper .sitemap nav .col2, .footer-upper .sitemap nav .col3, .footer-upper .sitemap nav .col4 {
      width: 100%; }
  .footer-upper .sitemap dt, .footer-upper .sitemap li {
    margin-bottom: 0px;
    padding: 12px 10px;
    border-bottom: 1px solid #bbb;
    background: url("../images/common/ic_arrow_next.png") no-repeat 96% center; }
  .footer-upper .sitemap dd {
    margin-bottom: 0px;
    padding: 10px 10px 10px 20px;
    border-bottom: 1px solid #bbb;
    background: url("../images/common/ic_arrow_next2.png") no-repeat 96% center #ccc; }
  .footer-upper .sitemap .bd_btm {
    border-bottom: none; }
  .footer-upper .sitemap a {
    display: block;
    width: 100%; }
  .footer-upper .sitemap .about-makeup {
    display: none; } }
/*# sourceMappingURL=ns.css.map */