/* ==============================================================================

hallux-valgus css

============================================================================= */

/*------------------------------------------------------------------------------

 リセット / petit からもってきた。

------------------------------------------------------------------------------*/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p,
blockquote, table, th, td, figure {
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal; }

ol, ul {
  list-style: none; }

fieldset, img {
  border: 0 none; }

object, embed, img {
  vertical-align: top; }

img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

@media (max-width: 768px) {
	html {
		width: 100%;
	}
	div.wrapper_ {
		margin: 80px auto 0;
		padding: 0;
	}
	.sp_none {
		display: none;
	}
}
@media (min-width: 769px) {
	html {
		width: auto;
		min-width: 1200px;
	}
  .pc_none {
    display: none; } 

}
.visually-hidden {
	display: none;
}
/*------------------------------------------------------------------------------

 page

------------------------------------------------------------------------------*/

.hallux-valgus {
	width: 100%;
	margin: 0 auto;
	color: var(--color-hv-text);
	font-size: .875rem;
	font-family: var(--font-mincho);
	line-height: 2;

	--color-hv-text: #231815;
	--font-gothic: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	--font-mincho: 'Noto Serif JP', '游明朝', YuMincho, 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
}

.hv-section {
	clear: both;
	overflow: hidden;
}
.hv-section__inner {
	max-width: 1430px;
	margin: 0 auto;
}
.hv-section a:hover img {
	opacity: .5;
}
@media only screen and (min-width: 768px) {
	.hv-section__inner {
		padding: 60px 15px;
	}

}


/* メインビジュアル : mv
------------------------------------------------------------- */

.hv-mv {
	position: relative;
	background-color: var(--color-hv-text);
	color: #FFF;
}
.hv-mv__image {
	position: sticky;
	top: 0;
	z-index: 11;
}
.hv-mv__layer {
	position: sticky;
	top: 0;
	width: 100%;
	aspect-ratio: 12 / 25;
	background: var(--color-hv-text);
	z-index: 12;
}
.hv-mv__text {
	will-change: transform;
	backface-visibility: hidden;
	z-index: 13;
}
.hv-mv__text .catch_sub {
	font-size: min(1.25rem,5vw);
}

@media only screen and (max-width: 767px) {
	.hv-mv__text {
		position: sticky;
		top: calc(32vw + 40px);
		width: 100%;
		transition: 0.4s;
	}
	.hv-mv__text .hv-mv__inner {
		position: absolute;
		width: 75%;
		left: 12%;
		margin-top: -32vw;
		text-align: center;
	}
	.hv-mv__text.is-end {
		position: absolute;
		top: auto;
		bottom: 152vw;
		transition: 0.4s;
	}
	.hv-mv__text .catch_main {
		margin-bottom: 2em;
	}
	.hv-mv__text .catch_main img {
		width: 100%;
	}
	.hv-mv__text .catch_sub {
		margin-bottom: 2em;
	}
}
@media only screen and (min-width: 768px) {
	.hv-mv__text {
		position: fixed;
		top: calc(150px);
		right: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		aspect-ratio: 12 / 7;
	}
	.hv-mv__text.is-end {
		position: absolute;
		top: auto;
		bottom: 0;
	}
	.hv-mv__text .hv-mv__inner {
		width: 36%;
		padding-right: 10%;
		box-sizing: border-box;
		text-align: center;
	}
	.hv-mv__text .catch_main {
		margin-bottom: 10%;
		text-align: left;
	}
	.hv-mv__text .text_box {
		display: inline-block;
		text-align: left;
	}
	.hv-mv__text .catch_sub {
		margin-bottom: 1em;
		margin-right: -4em;
		white-space: nowrap;
		line-height: 1.6;
	}
	.hv-mv__layer {
		aspect-ratio: 12 / 7;
	}
}

/* animation */

.hv-mv__image {
	animation: mv-img 1.5s both;
}
.hv-mv__text .catch_main {
	animation: mv-text 1.5s both 400ms;
}
.hv-mv__text .catch_sub {
	animation: mv-text 1.5s both 800ms;
}
.hv-mv__text .text {
	animation: mv-text 1.5s both 1200ms;
}

@keyframes mv-img {
	0% {
		opacity: 0;
		filter: blur(6px);
	}
	100% {
		opacity: 1;
		filter: blur(0);
	}
}
@keyframes mv-text {
	0% {
		opacity: 0;
		transform : translate(0, 80px);
	}
	100% {
		opacity: 1;
		transform : translate(0, 0);
	}
}
@keyframes mv-mv__layer {
	0% {
		opacity: 1;
		transform : translate(0, 150vh);
	}
	100% {
		opacity: 1;
		transform : translate(0, 0);
	}
}


/* 特徴 : feature
------------------------------------------------------------- */

.hv-feature {
	overflow: hidden;
}
.hv-feature__images {
	position: relative;
}

.hv-feature__catch {
	font-size: min(3.125rem,8.5vw);
	font-weight: normal;
}

.hv-feature__content {
	max-width: 1000px;
	margin: 0 auto;
	padding: 15px 15px 0;
}
.hv-feature__sozai {
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1.4;
}
.hv-feature__sozai .img_box {
	width: 35%;
}
.hv-feature__sozai .text_box {
	flex: 1;
	font-size: min(.875rem,3vw);
}

@media only screen and (max-width: 767px) {
	.hv-feature__images .hv-feature__catch {
		position: absolute;
		top: calc(50% - 2em);
		right: 0;
		text-align: right;
		line-height: 1;
	}
}
@media only screen and (min-width: 768px) {
	.hv-feature__images {
		display: flex;
		gap: 5px;
	}
	.hv-feature__content {
		display: flex;
		align-items: center;
		gap: 40px;
		padding-top: 50px;
	}
	.hv-feature__content .hv-feature__catch {
		flex: 5;
		line-height: 1.4;
	}
	.hv-feature__sozai {
		flex: 6;
		gap: 40px;
		line-height: 2;
	}
	.hv-feature__sozai .img_box {
		width: 36%;
	}
}


/* インソール : hv-insoles
------------------------------------------------------------- */

.hv-marinecore__text {
	font-size: min(2rem,5vw);
	line-height: 1.4;
}

@media only screen and (max-width: 767px) {
	.hv-marinecore {
		display: flex;
		padding: 40px 20px;
	}
	.hv-marinecore__text {
		flex: 1;
	}
	.hv-marinecore__fig {
		width: 150px;
		max-width: 35%;
	}
}
@media only screen and (min-width: 768px) {
	.hv-insoles__content {
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		gap: 5%;
	}
	.hv-marinecore {
		width: 28em;
		margin-right: 5%;
		text-align: center;
	}
	.hv-marinecore__text {
		display: flex;
		margin-bottom: .5em;
		text-align: left;
	}
	.hv-marinecore__fig .btn_box {
		margin-top: 1em;
	}
	.hv-insoles_image {
		flex: 1;
	}
}

/* topbnr
----------------------------------------------------------- */

.hv-itemlists {
	max-width: 1000px;
	margin: 0 auto;
}
.hv-itemlists a {
	color: var(--color-hv-text);
	text-align: center;
	text-decoration: none;
	line-height: 1.4;
}
.hv-itemlists a::after {
	display: block;
	content: '\8CFC\5165';
	width: 5em;
	margin: 1em auto 0;
	padding: .25em;
	border-radius: 50vh;
	border: 1px solid var(--color-hv-text);
	font-size: 85%;
}
.hv-itemlists a:hover::after {
	background-color: var(--color-hv-text);
	color: #FFF;
}
.hv-itemlists a img {
	display: block;
	margin: 0 auto;
}
.hv-itemlists__name {
	margin-top: 1em;
	margin-bottom: .5em;
}
.hv-itemlists__prices .price_sub {
	font-size: 96%;
}

@media only screen and (max-width: 767px) {
	.hv-itemlists {
		overflow-x: hidden;
		padding: 20px 0;
	}
}
@media only screen and (min-width: 768px) {
	.hv-itemlists .splide.is-initialized:not(.is-active) .splide__track {
		overflow: visible;
		padding-bottom: 4%;
	}
	.hv-itemlists .splide.is-initialized:not(.is-active) .splide__list {
		display: flex;
		flex-wrap: wrap;
		gap: 30px;
	}
	.hv-itemlists .splide.is-initialized:not(.is-active) .splide__slide {
		width: calc((100% - 60px) / 3);
	}
}


/* 原因 : cause
------------------------------------------------------------- */

.hv-cause__main {
	position: relative;
}
.hv-cause__text {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	line-height: 1.4;
}
.hv-cause__text-inner {
	padding-left: 20px;
}
.hv-cause__text .text_catch01 {
	margin-bottom: .5em;
	font-size: min(3.125rem,6.6vw);
	font-weight: normal;
}
.hv-cause__text .text_min {
	font-size: min(1rem,2.5vw);
	font-family: var(--font-gothic);
	font-weight: 600;
}
.hv-cause__text .text_catch02 {
	font-size: min(3.125rem,6vw);
}
.hv-cause__text .logo {
	text-align: center;
}
.hv-cause__text .logo img {
	width: 90px;
	max-width: 35%;
}
.hv-cause__desc {
	font-size: min(1rem,3.5vw);
}
.hv-cause__list li {
	display: flex;
	align-items: center;
}
.hv-cause__list .fig_box {
	width: 200px;
	max-width: 50%;
}
.hv-cause__list .text_box {
	flex: 1;
	line-height: 1.6;
	text-align: center;
}

.hv-cause .btn_box {
	margin: 40px auto;
}

@media only screen and (max-width: 767px) {
	.hv-cause__image {
		position: relative;
		overflow: hidden;
		aspect-ratio: 7 / 5;
	}
	.hv-cause__image img {
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 65% center;
		top: 0;
		left: 0;
	}
	.hv-cause__content {
		padding: 20px 15px;
	}
	.hv-cause__desc {
		margin-bottom: 30px;
		margin-right: -1em;
	}
	.hv-cause__list li {
		margin-bottom: 30px;
	}
}
@media only screen and (min-width: 768px) {
	.hv-cause__text-inner {
		padding-left: 18%;
	}
	.hv-cause__content {
		display: flex;
		flex-direction: row-reverse;
		gap: 3%;
		padding: 40px 0 20px;
	}
	.hv-cause__desc {
		width: 28em;
	}
	.hv-cause__list {
		flex: 1;
		display: flex;
		gap: 20px
	}
	.hv-cause__list li {
		width: calc((100% - 20px) / 2);
	}
}


/*  : 
------------------------------------------------------------- */

@media only screen and (max-width: 767px) {}
@media only screen and (min-width: 768px) {}


/* animation parts
------------------------------------------------------------- */

/* fadein */
.fadein {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 800ms;
}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

.fadein.fadein--down {
	opacity : 0;
	transform : translate(0, -50px);
	transition : all 800ms;
}
.fadein.fadein--down.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

.fadein.fadein--left {
	opacity : 0;
	transform : translate(-50px, 0);
	transition : all 800ms;
}
.fadein.fadein--left.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

.fadein.fadein--right {
	opacity : 0;
	transform : translate(50px, 0);
	transition : all 800ms;
}
.fadein.fadein--right.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}


/* ボタンボックス
-----------------------------------------------------------*/

.btn_box {
	clear: both;
	text-align: center;
}

.btn_box a ,
.btn_box label {
	display: inline-block;
	min-width: 180px;
	max-width: 100%;
	padding: .5em 1em;
	border-radius: 50vh;
	background: var(--color-hv-text);
	color: #FFF;
	font-size: .875rem;
	font-family: var(--font-gothic);
	text-align: center;
	text-decoration: none;
	font-weight: 600;
}
.btn_box a:hover ,
.btn_box label:hover {
	opacity: .65;
}
.bottom40 {
	margin-bottom: 40px;
}

/* common
------------------------------------------------------------- */

.color--wh {
	color: #FFF;
}
.color--base {
	color: var(--color-hv-text);
}

.ruby-wrap {
	padding-top: 1em;
}
ruby[data-ruby] rt {
	display: none;
}
ruby[data-ruby] {
	position: relative;
	display: inline-block;
}
ruby[data-ruby]::after {
	content: attr(data-ruby);
	position: absolute;
	transform: translate(-50%, -1.2em);
	display: block;
	left: 50%;
	top: 0;
	white-space: nowrap;
	font-size: 75%;
	letter-spacing: 0;
}

@media only screen and (max-width: 767px) {
	.sp_hide {
		display: none;
	}
	.sp_center {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
}
@media only screen and (min-width: 768px) {
	.pc_hide {
		display: none;
	}
	.pc_center {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
}