/*===============================
MARK: root 
=================================*/
:root {
  --fz10: 0.625rem;
  --fz12: 0.75rem;
  --fz13: 0.8125rem;
  --fz14: 0.875rem;
  --fz15: 0.9375rem;
  --fz16: 1rem;
  --fz17: 1.0625rem;
  --fz18: 1.125rem;
  --fz20: 1.25rem;
  --fz22: 1.375rem;
  --fz24: 1.5rem;
  --fz26: 1.625rem;
  --fz28: 1.75rem;
  --fz30: 1.875rem;
  --fz32: 2rem;
  --fz34: 2.125rem;
  --fz36: 2.25rem;
  --fz38: 2.375rem;
  --fz40: 2.5rem;
  --fz46: 2.875rem;
  --fz50: 3.125rem;
}
/*===============================
MARK: common
=================================*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: 30px;
  font-size: inherit;
}
.l-free-main {
  position: relative;
  overflow-x: hidden;
  font-family: 'Zen Kaku Gothic New', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  color: #697581;
  padding-top: 0;
}
.l-free-main a { transition: 0.3s;}
.l-free-main a:hover { opacity: 0.8;}
.l-free-main img { width: 100%;}

.f-en,
.f-en * {
  font-family: 'Outfit', sans-serif;
}
.fade-in     { opacity: 0; transform: translateY(20px); transition: all 0.6s ease-out;}
.fade-in.active { opacity: 1; transform: translateY(0);}
h3.f-en      { letter-spacing: 0.07em;}
h4 span.f-en { letter-spacing: 0.07em;}

@media screen and (min-width: 768px) {
	.for-sp { display: none;}
}
@media screen and (max-width: 767px) {
	.for-pc { display: none;}
}

/* ----------------------------------
 00:レイアウト
---------------------------------- */
.l-free-main > .forcms_block:not(.p-lensComSearchStore):last-of-type { padding-bottom: 0 !important;}

/* 見出し */
.head-frame { margin: 0 0 60px; text-align: center;}
.head-frame h2 { padding: 0; margin: 0 0 15px; border: none; font-size: var(--fz36); font-weight: 700; text-align: center; color: #333;}
.head-frame .sub { font-size: var(--fz18); font-weight: 500; text-align: center; display: flex; justify-content: center; align-items: center;}
.head-frame .sub span { font-size: var(--fz18); font-weight: 500; text-align: center; position: relative;}
.head-frame .sub span::before,
.head-frame .sub span::after  { content: ''; width: 60px; display: block; position: absolute; top: calc(50% - 0.5px);}
.head-frame .sub span::before { left: -76px;}
.head-frame .sub span::after  { right: -76px;}

@media screen and (max-width: 767px) {
	.head-frame h2 { font-size: var(--fz30); line-height: 1.4;}
}

/* ----------------------------------
 01:メインビジュアル
---------------------------------- */
.main-visual { width: 100%; position: relative;}
.mv-img { width: 100%; height: 100%; position: relative;}
.mv-img img { display: block;}

/* ----------------------------------
 02:メッセージ
---------------------------------- */
.sec-message { padding: 120px 50px; text-align: center; background: #FFF;}
.sec-message h2 { max-width: 498px; padding: 0; margin: 0 auto 45px; border: none; text-align: center;}
.sec-message h2 img { width: 100%; vertical-align: top;}
.sec-message .text { font-size: var(--fz18); text-align: center; line-height: 2.0; color: #333;}

@media screen and (max-width: 767px) {
	.sec-message h2 { max-width: 70%; margin: 0 auto 40px;}
	.sec-message { padding: 50px 0 60px;}
}

/* ----------------------------------
 03:選ばれる3つのポイント
---------------------------------- */
.sec-3point { padding: 120px 0 0; background: #FFE8E8;}
.sec-3point .head-frame { width: 100%; max-width: 1680px; margin: 0 auto 82px;}
.sec-3point .head-frame .sub span { color: #F5AEA8;}
.sec-3point .head-frame .sub span::before,
.sec-3point .head-frame .sub span::after  { border-top: #F5AEA8 1px solid;}
.sec-3point .contents-frame {
	width: 100%;
	padding: 0 50px 120px;
	margin: 0 auto;
	background-image: url("../img/point_bg.png");
	background-repeat: repeat;
	background-position: center;
	-webkit-background-size: 1200px auto;
	background-size: 1200px auto;
}
.sec-3point .point-box { max-width: 1680px; padding: 80px 130px; margin: 0 auto; border-radius: 8px; background: #FFF; position: relative;}
.sec-3point .point-box + .point-box { margin-top: 122px;}
.sec-3point .point-box .point {
  width: 142px;
  height: 46px;
	border-radius: 46px;
  font-size: var(--fz24);
  font-weight: 500;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #E54436;
  position: absolute;
  left: calc(50% - 71px);
  top: -23px;
}
.sec-3point .point-box .point .num { padding: 0 0 3px; font-size: var(--fz24); font-weight: 500; color: #FFF;}
.sec-3point .point-box h3.ttl { padding: 0; margin: 0 0 15px; font-size: var(--fz28); font-weight: 700; text-align: center; color: #333;}
.sec-3point .point-box .ttl-sub { padding: 0; margin: 0 0 60px; font-size: var(--fz18); font-weight: 500; text-align: center; color: #666;}
.sec-3point .point-box .list { margin: 0 auto; display: flex; justify-content: center; column-gap: 40px;}
.sec-3point #point01 .list > li { width: calc((100% - 40px * 3)/4);}
.sec-3point #point01 .list > li .image { margin: 0 20px 20px; text-align: center;}
.sec-3point #point01 .list > li .name  { margin: 0 0 15px; font-size: var(--fz20); font-weight: 700; text-align: center; color: #333;}
.sec-3point #point01 .list > li .text  { font-size: var(--fz16); font-weight: 500; text-align: center; color: #666;}
.sec-3point #point02 .ttl-sub { margin: 0 0 85px;}
.sec-3point #point02 .list > li { width: calc((100% - 40px * 2)/3); position: relative;}
.sec-3point #point02 .list > li .pop { text-align: center; position: absolute; top: -25px; left: 0; right: 0;}
.sec-3point #point02 .list > li .pop span {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  border-radius: 50px;
	font-size: var(--fz20);
	font-weight: 700;
	text-align: center;
	color: #333;
	display: flex;
	justify-content: center;
	align-items: center;
  background: #F2F0C5;
  position: relative;
}
.sec-3point .point-box .list > li .pop span::after {
	content: '';
	border-style: solid;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  border-top: 16px solid #F2F0C5;
  border-bottom: 0;
	position: absolute;
	bottom: -16px;
  left: calc(50% - 25px);
}
.sec-3point #point02 .list > li .image { margin: 0 0 15px; text-align: center;}
.sec-3point #point02 .list > li .text { padding: 16px 18px; border: #C2C2C2 1px solid; border-radius: 6px; font-size: var(--fz16); font-weight: 500; text-align: center; color: #666;}
.sec-3point #point02 .after { margin: 40px auto 0; font-size: var(--fz18); font-weight: 500; text-align: center; color: #333;}
.sec-3point #point03 h3.ttl { margin: 0 0 60px;}
.sec-3point #point03 .list { max-width: 1104px;}
.sec-3point #point03 .list > li { width: calc((100% - 40px)/2);}
.sec-3point #point03 .list > li .image { margin: 0 0 20px; border-radius: 8px; text-align: center; overflow: hidden;}
.sec-3point #point03 .list > li:nth-child(2) .image { border: #C2C2C2 1px solid;}
.sec-3point #point03 .list > li .image img { vertical-align: top;}
.sec-3point #point03 .list > li .name  { margin: 0 0 15px; font-size: var(--fz20); font-weight: 700; text-align: center; color: #333;}
.sec-3point #point03 .list > li .text  { font-size: var(--fz16); font-weight: 500; text-align: center; color: #666;}

@media screen and (max-width: 1200px) {
	.sec-3point #point02 .list > li .pop span { font-size: var(--fz18);}
}
@media screen and (max-width: 1100px) {
	.sec-3point .point-box { padding: 80px 30px;}
	.sec-3point #point01 .list { flex-wrap: wrap; gap: 40px;}
	.sec-3point #point01 .list > li { width: calc(50% - 20px);}
	.sec-3point #point01 .list > li .image { width: 80%; margin: 0 auto 15px;}
	.sec-3point #point02 .list { max-width: 450px; margin: 0 auto; display: block;}
	.sec-3point #point02 .list > li { width: 100%;}
	.sec-3point #point02 .list > li + li { margin-top: 60px;}
	.sec-3point #point02 .list > li .pop span { width: 280px;}
}
@media screen and (max-width: 767px) {
	.sec-3point { padding: 60px 0 0;}
	.sec-3point .head-frame { margin: 0 auto 50px;}
	.sec-3point .contents-frame { padding: 0 20px 60px;}
	.sec-3point .point-box { padding: 50px 15px;}
	.sec-3point .point-box + .point-box { margin-top: 60px;}
	.sec-3point .point-box h3.ttl { font-size: var(--fz26);}
	.sec-3point .point-box .ttl-sub { margin: 0 0 30px; font-size: var(--fz15);}
	.sec-3point .point-box .list { display: block;}
	.sec-3point #point01 .list > li { width: 100%;}
	.sec-3point #point01 .list > li .name { letter-spacing: 0;}
	.sec-3point #point01 .list > li + li { margin-top: 30px;}
	.sec-3point #point01 .list > li .text { font-size: var(--fz14);}
	.sec-3point #point02 .ttl-sub { margin: 0 0 55px;}
	.sec-3point #point02 .list > li .image { margin: 0 auto;}
	.sec-3point #point02 .list > li .text { padding: 10px 15px; font-size: var(--fz14);}
	.sec-3point #point02 .after { margin: 30px auto 0; font-size: var(--fz14);}
	.sec-3point #point03 .list > li { width: 100%;}
	.sec-3point #point03 .list > li + li { margin-top: 30px;}
	.sec-3point #point03 h3.ttl { margin: 0 0 30px;}
	.sec-3point #point03 .list > li:nth-child(1) .name { letter-spacing: -1px;}
	.sec-3point #point03 .list > li .text  { font-size: var(--fz14);}
}

/* ----------------------------------
 04:商品ラインナップ
---------------------------------- */
.sec-lineup { padding: 120px 50px; background: #FFF;}
.sec-lineup .head-frame .sub span { color: #D8D8D8;}
.sec-lineup .head-frame .sub span::before,
.sec-lineup .head-frame .sub span::after  { border-top: #D8D8D8 1px solid;}

.sec-lineup .contents-frame { max-width: 1420px; margin: 0 auto; display: flex; justify-content: space-between; column-gap: 36px;}
.sec-lineup .contents-frame .gallery { width: 47%;}
.sec-lineup .contents-frame .gallery .main { margin: 0 0 30px; text-align: center;}
.sec-lineup .contents-frame .gallery .main .image  { margin: 0 0 15px; text-align: center;}
.sec-lineup .contents-frame .gallery .main .series { font-size: var(--fz24); font-weight: 700; text-align: center; color: #333;}
.sec-lineup .contents-frame .gallery .thumbnail    { display: flex; flex-wrap: wrap; gap: 10px;}
.sec-lineup .contents-frame .gallery .thumbnail li {
  width: calc((100% - 10px * 3)/4);
  height: 90px;
  padding: 8px 0 20px;
  border: #E1E1E1 1px solid;
	border-radius: 2px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.sec-lineup .contents-frame .gallery .thumbnail li .image  { height: 62px; display: flex; justify-content: center; align-items: center;}
.sec-lineup .contents-frame .gallery .thumbnail li .name   { font-size: var(--fz14); font-weight: 700; text-align: center; color: #666; position: absolute; left: 0; bottom: 5px; right: 0;}
.sec-lineup .contents-frame .gallery .thumbnail li .series { display: none !important;}
.sec-lineup .contents-frame .gallery .thumbnail li.active::after {
	content: '';
	border: #F5D864 2px solid;
	border-radius: 2px;
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	z-index: 1;
}
.sec-lineup .contents-frame .desc { 
	width: calc(53% - 36px);
	padding: 54px 0 0 44px;
	background-color: transparent;
	background-image: url("../img/kids.png");
	background-repeat: no-repeat;
	background-position: top left;
	-webkit-background-size: 223px auto;
	background-size: 223px auto;
}
.sec-lineup .contents-frame .desc h3.ttl { padding: 0; margin: 0 0 30px; font-size: var(--fz24); font-weight: 700; color: #333;}
.sec-lineup .contents-frame .desc .text { padding: 0; margin: 0 0 20px; font-size: var(--fz16); font-weight: 500; color: #666;}
.sec-lineup .contents-frame .desc .size { padding: 0; margin: 0 0 30px; font-size: var(--fz16); font-weight: 500; color: #666;}
.sec-lineup .contents-frame .desc .price-box { padding: 0; margin: 0 0 30px; display: flex; justify-content: flex-end; align-items: center;}
.sec-lineup .contents-frame .desc .price-box .price { font-size: var(--fz34); font-weight: 700; color: #333;}
.sec-lineup .contents-frame .desc .price-box .price .yen { margin: 0 0 0 5px; font-size: var(--fz20); font-weight: 500; color: #333;}
.sec-lineup .contents-frame .desc .price-box .price .tax { font-size: var(--fz20); font-weight: 500; color: #333;}
.sec-lineup .contents-frame .desc .button-box { display: flex; justify-content: center; align-items: center;}
.sec-lineup .contents-frame .desc .button-box a { 
	width: 310px;
	height: 64px;
	border: #21AB3D 1px solid;
	border-radius: 64px;
	font-size: var(--fz20);
	font-weight: 700;
	color: #21AB3D;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #FFF;
	transition: 0.3s;
}
.sec-lineup .contents-frame .desc .button-box a:hover { color: #FFF; background: #21AB3D;}

@media screen and (max-width: 767px) {
	.sec-lineup { padding: 60px 0; background: #FFF;}
	.sec-lineup .contents-frame { display: block;}
	.sec-lineup .contents-frame .gallery { width: 100%; padding: 0 20px; margin: 0 auto 30px;}
	.sec-lineup .contents-frame .gallery .thumbnail { padding: 0 0 10px; margin: 0 -20px 0 0; overflow-x: scroll;}
	.sec-lineup .contents-frame .gallery .thumbnail { flex-wrap: nowrap;}
	.sec-lineup .contents-frame .gallery .thumbnail > li { width: 160px; min-width: 160px; height: 90px;}
	.sec-lineup .contents-frame .desc { width: 100%; padding: 54px 20px 0;}
	.sec-lineup .contents-frame .desc .text { font-size: var(--fz14);}
	.sec-lineup .contents-frame .desc .size { font-size: var(--fz14);}
	.sec-lineup .contents-frame .desc .price-box .price { font-size: var(--fz28);}
	.sec-lineup .contents-frame .desc .price-box .price .yen { font-size: var(--fz18);}
	.sec-lineup .contents-frame .desc .price-box .price .tax { font-size: var(--fz18);}
	.sec-lineup .contents-frame .desc .button-box a { width: 85%; margin: 0 auto;}
}

/* ----------------------------------
 05:U-18安心保証
---------------------------------- */
.sec-u18 { background: #FEF7E2;}
.sec-u18 .container { padding: 120px 50px;}
.sec-u18 .head-frame .sub span { color: #EED46C;}
.sec-u18 .head-frame .sub span::before,
.sec-u18 .head-frame .sub span::after  { border-top: #EED46C 1px solid;}
.sec-u18 section { max-width: 1240px; margin: 0 auto;}
.sec-u18 #warranty_nav { padding: 0 0 80px; margin: 0 auto 100px; border-bottom: #707070 1px dashed;}
.sec-u18 #warranty_nav .navi { display: flex; justify-content: space-between; column-gap: 40px;}
.sec-u18 #warranty_nav .navi > li { width: calc((100% - 40px * 2)/3); border-radius: 8px; background: #FFF; text-align: center;}
.sec-u18 #warranty_nav .navi > li a { padding: 20px 10px; border-radius: 8px; background: #FFF; text-align: center; display: block;}
.sec-u18 #warranty_nav .navi > li .name  { margin: 0 0 8px; font-size: var(--fz24); font-weight: 700; text-align: center;}
.sec-u18 #warranty_nav .navi > li .image { width: 190px; height: 90px; margin: 0 auto 13px;}
.sec-u18 #warranty_nav .navi > li .text  { font-size: var(--fz16); font-weight: 500; text-align: center;}
.sec-u18 #warranty_nav .navi > li.warranty01-nav { border: #E54436 1px solid; color: #E54436;}
.sec-u18 #warranty_nav .navi > li.warranty02-nav { border: #21AB3D 1px solid; color: #21AB3D;}
.sec-u18 #warranty_nav .navi > li.warranty03-nav { border: #EC6C00 1px solid; color: #EC6C00;}
.sec-u18 #warranty_nav .navi > li.warranty01-nav p { color: #E54436;}
.sec-u18 #warranty_nav .navi > li.warranty02-nav p { color: #21AB3D;}
.sec-u18 #warranty_nav .navi > li.warranty03-nav p { color: #EC6C00;}

.sec-u18 .warranty-box { padding: 60px 6.3%; margin: 0 auto; border-radius: 8px; background: #FFF; position: relative;}
.sec-u18 .warranty-box .point {
  width: 260px;
  height: 46px;
	border-radius: 46px;
	font-size: var(--fz24);
	font-weight: bold;
	text-align: center;
	color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: calc(50% - 130px);
  top: -23px;
}
.sec-u18 .warranty-box .point .num { font-size: var(--fz28); font-weight: bold; color: #FFF;}
.sec-u18 .warranty-box + .warranty-box { margin-top: 123px;}
.sec-u18 .warranty-line + .warranty-line { padding-top: 30px; margin-top: 30px; border-top: #707070 1px dashed;}
.sec-u18 .warranty-line.check { display: flex; justify-content: space-between; align-items: center;}
.sec-u18 .warranty-line.check .date { width: 140px; min-width: 140px; height: 140px; border-radius: 140px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.sec-u18 .warranty-line.check .date .line1 { font-size: var(--fz16); font-weight: 700; text-align: center;}
.sec-u18 .warranty-line.check .date .line1::after {
	content: '';
	width: 16px;
	height: 16px;
	margin: 0 auto;
	display: block;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: auto 16px;
	background-size: auto 16px;
	position: relative;
	bottom: -4px;
}
.sec-u18 .warranty-line.check .date .line2 { font-size: var(--fz24); font-weight: 700; text-align: center; line-height: 1.0;}
.sec-u18 .warranty-line.check .date .line2 .num { margin: 0 3px 0 0; font-size: var(--fz50); font-weight: 700;}
.sec-u18 .warranty-line.check .date.month3 .line2 { letter-spacing: -3px;}
.sec-u18 .warranty-line.check .desc { width: calc(100% - 174px);}
.sec-u18 .warranty-line.check .name { font-size: var(--fz24); font-weight: 500;}
.sec-u18 .warranty-line.check .name strong { margin: 0 10px; font-size: var(--fz50); font-weight: 700;}
.sec-u18 .warranty-line.check .text { margin: 20px 0 0; font-size: var(--fz16); font-weight: 500; color: #333;}
.sec-u18 .warranty-box .kome { display: flex; flex-direction: column; align-items: flex-end; position: relative; top: -15px;}
.sec-u18 .warranty-box .kome li { padding: 0 0 0 1em; font-size: var(--fz13); font-weight: 500; text-indent: -1em;}
.sec-u18 .warranty-box .info li.ttl { font-size: var(--fz16); font-weight: 500; color: #666;}
.sec-u18 .warranty-box .info li:not(.ttl) { padding: 0 0 0 1em; text-indent: -1em; list-style: disc inside; font-size: var(--fz16); font-weight: 500; color: #666;}

.sec-u18 #warranty01 .point { background: #E54436;}
.sec-u18 #warranty02 .point { background: #21AB3D;}
.sec-u18 #warranty03 .point { background: #EC6C00;}
.sec-u18 #warranty01 .date { border: #E54436 1px solid; color: #E54436;}
.sec-u18 #warranty02 .date { border: #21AB3D 1px solid; color: #21AB3D;}
.sec-u18 #warranty03 .date { border: #EC6C00 1px solid; color: #EC6C00;}
.sec-u18 #warranty01 .date p,
.sec-u18 #warranty01 .date span,
.sec-u18 #warranty01 .name,
.sec-u18 #warranty01 .name strong { color: #E54436;}
.sec-u18 #warranty02 .line p,
.sec-u18 #warranty02 .date span,
.sec-u18 #warranty02 .name,
.sec-u18 #warranty02 .name strong { color: #21AB3D;}
.sec-u18 #warranty03 .line p,
.sec-u18 #warranty03 .line span,
.sec-u18 #warranty03 .name,
.sec-u18 #warranty03 .name strong { color: #EC6C00;}
.sec-u18 #warranty01 .date .line1::after { background-image: url("../img/arrow01.png");}
.sec-u18 #warranty02 .date .line1::after { background-image: url("../img/arrow02.png");}
.sec-u18 #warranty03 .date .line1::after { background-image: url("../img/arrow03.png");}

.sec-u18 #warranty_notice { padding: 40px 6.3%; margin: 100px auto 120px; border: #707070 1px solid; border-radius: 8px;}
.sec-u18 #warranty_notice h3.ttl { padding: 0; margin: 0 0 30px; font-size: var(--fz28); font-weight: bold; text-align: center; color: #333;}
.sec-u18 #warranty_notice ul.list li { padding: 0 0 0 1em; text-indent: -1em; list-style: disc inside; font-size: var(--fz16); font-weight: normal; text-align: justify; color: #333;}
.sec-u18 #warranty_notice ul.list li + li { margin-top: 5px;}

@media screen and (max-width: 767px) {
	.sec-u18 .head-frame { margin: 0 0 40px;}
	.sec-u18 .container { padding: 60px 20px;}
	.sec-u18 #warranty_nav { padding: 0 0 40px; margin: 0 auto 60px;}
	.sec-u18 #warranty_nav .navi { display: block;}
	.sec-u18 #warranty_nav .navi > li { width: 100%;}
	.sec-u18 #warranty_nav .navi > li + li { margin-top: 10px;}
	.sec-u18 #warranty_nav .navi > li .text  { font-size: var(--fz14);}
	.sec-u18 .warranty-box + .warranty-box { margin-top: 60px;}
	.sec-u18 .warranty-line + .warranty-line { padding-top: 20px; margin-top: 20px;}
	.sec-u18 .warranty-line.check { flex-wrap: wrap;}
	.sec-u18 .warranty-line.check .desc { width: calc(100% - 150px);}
	.sec-u18 .warranty-line.check .name { font-size: var(--fz22);}
	.sec-u18 .warranty-line.check .name strong { margin: 0 5px 0 0; font-size: var(--fz46);}
	.sec-u18 .warranty-line.check .text.for-sp { width: 100%; margin: 15px 0 0; font-size: var(--fz14); font-weight: 500; color: #333;}
	.sec-u18 .warranty-box .kome { margin: 0 0 15px; display: block; position: relative; top: 0;}
	.sec-u18 .warranty-box .kome li { font-size: var(--fz14);}
	.sec-u18 .warranty-box .info li.ttl { font-size: var(--fz14);}
	.sec-u18 .warranty-box .info li:not(.ttl) { font-size: var(--fz14);}
	.sec-u18 .warranty-box .point { height: 40px; border-radius: 40px; font-size: var(--fz20); top: -20px;}
	.sec-u18 .warranty-box .point .num { font-size: var(--fz24);}
	.sec-u18 #warranty_notice { padding: 30px 6.3%; margin: 40px auto 60px;}
	.sec-u18 #warranty_notice h3.ttl { margin: 0 0 20px; font-size: var(--fz24);}
	.sec-u18 #warranty_notice ul.list li { font-size: var(--fz14);}
}

/* ----------------------------------
 ラインナップへのページ内リンク
---------------------------------- */
.fixed-navi-lineup { position: fixed; left: 40px; bottom: 40px; z-index: 100;}
.fixed-navi-lineup a {
  width: 225px;
  height: 70px;
  padding: 0 0 0 20px;
  border-radius: 8px;
	font-size: var(--fz20);
	font-weight: 700;
	color: #FFF;
  display: flex;
  align-items: center;
  background: #21AB3D;
  box-shadow: 0 6px 6px rgb(0, 0, 0, 0.16);
	position: relative;
	z-index: 100;
	transition: 0.3s;
}
.fixed-navi-lineup a::before,
.fixed-navi-lineup a::after {
  content: '';
  width: 12px;
  height: 12px;
  display: block;
  position: absolute;
  border-right: #FFF 1px solid;
  border-top: #FFF 1px solid;
  transform: rotate(135deg);
  right: 20px;
  top: calc(50% - 12px);
	transition: 0.3s;
}
.fixed-navi-lineup a::after { top: calc(50% - 4px);}
.fixed-navi-lineup a:hover::before { top: calc(50% - 9px);}
.fixed-navi-lineup a:hover::after { top: calc(50% - 1px);}

@media screen and (max-width: 767px) {
	.fixed-navi-lineup { position: fixed; left: calc(100vw - 170px); top: calc(100vh - 54px); bottom: unset;}
	.fixed-navi-lineup a { width: 160px; height: 44px; font-size: var(--fz14);}
	.fixed-navi-lineup a::before,
	.fixed-navi-lineup a::after { width: 8px; height: 8px; right: 10px; top: calc(50% - 9px);}
	.fixed-navi-lineup a::after { top: calc(50% - 3px);}
	.fixed-navi-lineup a:hover::before { top: calc(50% - 7px);}
	.fixed-navi-lineup a:hover::after { top: calc(50% - 1px);}
}