@charset "UTF-8";

:root {
	--font-zen: "Zen Kaku Gothic New", sans-serif;
	--font-sof: "Sofia Sans", sans-serif;

	--fs-ss: 0.875rem;
	--fs-small: 0.9375rem; /* 15px */
  --fs-base: 1rem;       /* 16px */

	/* --color-main: #815f32; */
	--color-base: #f0efee;
	--color-text: #000;
}

body {
	background-color: var(--color-base);
  color: var(--color-text);
	font-family: var(--font-sof);
  font-optical-sizing: auto;
	font-feature-settings: "palt";
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-small);
  margin: 0;
}
img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
.dis-sp{
	display: none;
}


@media only screen and (max-width: 768px) {
	.dis-sp{
		display: block;
	}
	.dis-pc{
		display: none;
	}
}


/* header */
.header {
	margin-top: 7vw;
	display: flex;
	flex-direction: row-reverse;
}
.fv-txt {
	width: 21.328vw;
	flex-shrink: 0;
	font-size: min(var(--fs-small), 1.17vw);
	text-align: center;
	letter-spacing: 0.04em;
}
.fv-txt h1 {
	width: 9.453vw;
	margin: 0 auto 6.25vw;
}
.fv-img {
	width: calc(100vw - 21.328vw);
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;

	opacity: 0;
  animation: fadeIn 1.2s ease-in forwards;
}
.fv-img picture {
  width: 50%; 
  height: auto;
  min-width: 0; 
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media only screen and (max-width: 768px) {
	.header {
		margin-top: 9.3333vw;
	}
	.fv-txt {
		width: 30.4vw;
		font-size: var(--fs-ss);
	}
	.fv-txt h1 {
		width: 14.9333vw;
		margin: 0 auto 9.6vw;
	}
	.text-ss {
		writing-mode: vertical-rl;
		text-align: left;
		margin-left: auto;
		margin-right: auto;
	}
	.fv-img {
		width: calc(100vw - 30.4vw);
		flex-direction: column;
		align-items: inherit;
	}
	.fv-img picture {
		width: 100%; 
	}
	.fv-img picture img {
		width: 100%;
	}
}


.link-sticky {
	padding-top: 2.5vw;
	padding-bottom: 2.5vw;
	margin-left: 3.9vw;
	background-image: url(../images/icon_arrow.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 11px;
	padding-left: 21px;
	position: relative; 
  z-index: 1000;
}
.link-sticky.is-fixed {
  position: fixed;
  bottom: 0;
  left: 3.9vw;
  margin: 0;
}
.link-sticky a,
.link-txt a {
	font-size: var(--fs-small);
	letter-spacing: 0.04em;
	position: relative;
	display: inline-block;
}
.link-txt a {
	letter-spacing: 0.03em;
}
.link-txt a:hover {
	opacity: 0.6;
}
.link-sticky a::after,
.link-txt a::after {
	display: block;
	content: "";
	height: 1px;
	background-color: black;
	transform: scaleY(0.5);
	transform-origin: 0 0;
	margin-top: 3px;
}

@media only screen and (max-width: 768px) {
	.link-sticky {
		padding-top: 5.3333vw;
		padding-bottom: 5.3333vw;
		margin-left: 5.3333vw;
	}
	.link-sticky.is-fixed {
		left: 5.3333vw;
	}
	.link-sticky a,
	.link-txt a {
		font-size: var(--fs-ss);
	}
}

.lead-area {
	display: flex;
	margin-top: 13.28125vw;
	margin-bottom: 13.75vw;
}
.lead-img {
	flex-grow: 1;
	text-align: right;
}
.lead-img img {
	width: min(21.3vw, 213px);
	margin-right: 12.65625vw;
}
.lead-p {
	width: 50%;
	flex-shrink: 0;
	margin-top: 5.859vw;
}
.lead-p p {
	font-family: var(--font-zen);
	font-size: min(1.77778vw, var(--fs-base));
	font-weight: 300;
	letter-spacing: 0.1em;
	line-height: 1.875;
	margin-bottom: 1.875em;
}

@media only screen and (max-width: 768px) {
	.lead-area {
		flex-direction: column;
		margin-top: 24vw;
		margin-bottom: 8vw;
	}
	.lead-img {
		flex-grow: inherit;
	}
	.lead-img img {
		width: 52.266667vw;
		margin-right: 19.733333vw;
	}
	.lead-p {
		width: 71vw;
		flex-shrink: inherit;
		margin-top: 11.466667vw;
		margin-left: auto;
		margin-right: auto;
	}
	.lead-p p {
		font-size: 3.733333vw;
		letter-spacing: 0.1rem;
		text-align:justify;
		line-height: 1.928;
		margin-bottom: 1.928em;
	}
}

.item-sec {
	margin-bottom: 19.53vw;
}
.item-sec .item-main-img {
	width: 62.65625vw;
	margin-bottom: 3.125vw;
}
.item-sec .item-sub-img {
	display: flex;
	gap: 0.9375vw;
	position: relative;
}
.item-sec .item-sub-img .item-img-2,
.item-sec .item-sub-img .item-img-3 {
	width: 25.546vw;
}
.item-sec .link-txt {
	margin-top: 1.71875vw;
}

.item-sec.daypack {
	width: 81.4vw;
	margin-left: auto;
}
.item-sec.daypack .item-main-img {
	margin-left: auto;
}

.item-sec.tote2way {
	width: 62.65625vw;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 19.14vw;
}
.item-sec.tote2way .item-sub-img .item-img-3 {
	position: absolute;
	top: 19.14vw;
	transform: translateX(calc(100% + 0.9375vw));
}
.item-sec.tote2way .link-txt {
	position: absolute;
}

.item-sec.shoulder .item-bottom {
	margin-left: 29.218vw;
}

.item-sec.multi .item-main-img,
.item-sec.multi .item-bottom {
	margin-left: auto;
	margin-right: auto;
}
.item-sec.multi .item-bottom {
	width: 52.34375vw;
}
.item-sec.multi .item-sub-img {
	flex-direction: row-reverse;
}
.item-sec.multi .item-sub-img .item-img-3 {
	padding-top: 19.14vw;
}

.item-sec.totes {
	width: 62.65625vw;
	margin-left: auto;
}

.item-sec.carry {
	width: 62.65625vw;
	margin-left: auto;
	margin-right: auto;
}
.item-sec.shoulder .link-txt a,
.item-sec.carry .link-txt a,
.item-sec.pouchm .link-txt a {
	margin-bottom: 0.78125vw;
}

.item-sec.pouch {
	width: 71.25vw;
	margin-left: auto;
	margin-right: auto;
}
.item-sec.pouch .item-sub-img .item-img-2 {
	width: 38.9vw;
}
.item-sec.pouch .item-sub-img .item-img-3 {
	width: 31.25vw;
	align-self: flex-end;
}

.item-sec.pouchm {
	margin-bottom: 17.96875vw;
}
.item-sec.pouchm .item-main-img {
	width: 48.4375vw;
	margin-left: auto;
	margin-right: auto;
}
.item-sec.pouchm .item-bottom {
	width: 31.25vw;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width: 768px) {
	.item-sec {
		margin-bottom: 24.533333vw;
	}
	.item-sec .item-main-img {
		width: 100%;
		margin-bottom: 8.533333vw;
	}
	.item-sec .item-sub-img {
		flex-direction: column;
		gap: 2vw;
	}
	.item-sec .item-sub-img .item-img-2,
	.item-sec .item-sub-img .item-img-3 {
		width: 66.666667vw;
	}
	.item-sec .item-main-img img,
	.item-sec .item-sub-img img {
		width: 100%;
	}
	.item-sec .link-txt {
		margin-top: 3.04vw;
		width: 66.666667vw
	}

	.item-sec.daypack,
	.item-sec.tote2way,
	.item-sec.totes,
	.item-sec.carry,
	.item-sec.pouch {
		width: 100%;
	}
	.item-sec.daypack .item-sub-img {
		align-items: flex-end;
		justify-content: flex-end;
	}
	.item-sec.daypack .link-txt {
		margin-left: auto;
	}

	.item-sec.tote2way {
		padding-bottom: inherit;
	}
	.item-sec.tote2way .item-sub-img .item-img-3 {
		position: inherit;
		top: inherit;
		transform: inherit;
		margin-left: auto;
		margin-right: auto;
	}
	.item-sec.tote2way .link-txt {
		position: inherit;
		margin-left: auto;
		margin-right: auto;
		text-align: right;
	}

	.item-sec.shoulder .item-bottom {
		margin-left: inherit;
	}
	.item-sec.shoulder .item-sub-img .item-img-2,
	.item-sec.shoulder .item-sub-img .item-img-3,
	.item-sec.shoulder .link-txt {
		margin-left: auto;
		margin-right: auto;
	}

	.item-sec.multi .item-bottom {
		width: inherit;
	}
	.item-sec.multi .item-sub-img {
		flex-direction: column;
	}
	.item-sec.multi .item-sub-img .item-img-3 {
		padding-top: inherit;
	}
	.item-sec.multi .link-txt {
		text-align: right;
	}

	.item-sec.totes .item-sub-img .item-img-2 {
		align-self: flex-end;
	}
	.item-sec.totes .item-sub-img .item-img-3 {
		align-self: center;
	}
	.item-sec.totes .link-txt {
		margin-left: auto;
		margin-right: auto;
	}

	.item-sec.carry .item-sub-img .item-img-3,
	.item-sec.carry .link-txt {
		margin-left: auto;
		margin-right: auto;
	}

	.item-sec.pouch .item-sub-img .item-img-2 {
		width: 100%;
	}
	.item-sec.pouch .item-sub-img .item-img-3 {
		width: 66.666667vw;
		align-self: flex-end;
	}
	.item-sec.pouch .link-txt {
		margin-left: auto;
	}

	.item-sec.pouchm {
		margin-bottom: 24.533333vw;
	}
	.item-sec.pouchm .item-main-img {
		width: 100%;
	}
	.item-sec.pouchm .item-bottom {
		width: 66.666667vw;
	}
	.item-sec.pouchm .item-bottom img {
		width: 100%;
	}
}

/* footer */
.footer {
	width: 71.25vw;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 12.5vw;
}
.footer::before {
	display: block;
	content: "";
	height: 1px;
	background-color: black;
	transform: scaleY(0.5);
	transform-origin: 0 0;
	margin-bottom: 7.8125vw;
}
.credit li {
	font-family: var(--font-sof);
	font-size: var(--fs-ss);
	text-align: center;
	letter-spacing: 0.05em;
	line-height: 2.5;
}

@media only screen and (max-width: 768px) {
	.footer {
		width: 66.666667vw;
		padding-bottom: 26.6666vw;
	}
	.footer::before {
		margin-bottom: 23vw;
	}
	.credit li {
		font-size: 0.8125rem;
		line-height: 2.0769;
	}
}



.fadeIn {
	opacity: 0;
	transform: translateY(30px);
  will-change: transform;
}
.credit a:hover{
	opacity: .6;
}
.credit a span{
	position: relative;
	display: inline-block;
}
.credit a span::after{
	display: block;
  content: "";
  height: 1px;
  background-color: black;
  transform: scaleY(0.5);
  transform-origin: 0 0;
  margin-top: -5px;
}
/*.credit a{
	position: relative;
}
.credit a::after{
	
}*/