@charset "UTF-8";

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
初期設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
:root {
	--fontBase: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	--fontRoboto: "Roboto", sans-serif;

	--textPrimary: #222222;
	--textSecondary: #ffffff;
	--textTertiary: #dee1e3;
	--textFourth: #ff5252;

	--bgPrimary: #ffffff;
	--bgSecondary: #222222;
	--bgTertiary: #dee1e3;

	--buttonPrimary: #0b529e;
	--buttonSecondary: #222222;

	--borderPrimary: #222222;
	--borderSecondary: #dee1e3;
	--borderTertiary: #ffffff;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	font-family: var(--fontBase);
	color: var(--textPrimary);
	background-color: var(--bgPrimary);
}

a {
	display: inline-block;
	text-decoration: none;
	color: inherit;
}

li,
ol {
	list-style: none;
}

img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	shape-margin: 0.75rem;
}

button {
	touch-action: manipulation;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

button,
input,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	text-transform: none;
	border-radius: 0;
}

.br_visible-sp {
	display: none;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
main
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
.main.--privacy {
	padding-top: 75px;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Button
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
.--button-common {
	width: 100%;
	padding-block: 16px;
	text-align: center;
	color: var(--textSecondary);
	font-size: 18px;
	font-weight: bold;
	border-radius: 25px;
	line-height: 1;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Title
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
.title__primary {
	font-weight: bold;
}

.title__primary .is-en {
	font-family: var(--fontRoboto);
	letter-spacing: 1.5px;
	color: var(--textTertiary);
	font-size: clamp(1.125rem, 0.896rem + 1.15vw, 1.875rem);
}

.title__primary .is-ja {
	letter-spacing: 2px;
	font-size: clamp(1.375rem, 1.031rem + 1.72vw, 2.5rem);
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
header
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 75px;
	background: transparent;
	z-index: 999;
}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: inherit;
	padding-inline: 25px;
}

.header__logo a {
	width: 76px;
}

.header__button {
	max-width: 250px;
	width: 100%;
}

.header__button--link {
	background: var(--buttonPrimary);
	transition: all 0.3s ease;
}

.header__button--link:hover,
.header__button--link:focus {
	background: var(--bgSecondary);
}

.header__button--link span {
	position: relative;
	padding-left: 4px;
	transition: all 0.3s ease;
}

.header__button--link:hover span,
.header__button--link:focus span {
	padding-left: 0;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
fv
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
.fv {
	position: relative;
	height: 768px;
}

.fv__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(18.125rem, 12.962rem + 25.81vw, 35rem);
}

.fv__bg {
	height: inherit;
}

.fv__bg img {
	height: inherit;
	object-fit: cover;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
fv
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
.about {
	padding-block: 123px;
	background-image: url(../img/index/about/about_bg.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	color: var(--textSecondary);
}

.about__inner {
	padding-inline: 20px;
}

.about__head--heading2 {
	font-family: var(--fontRoboto);
	font-weight: bold;
	letter-spacing: 2.5px;
	font-size: clamp(2.125rem, 1.819rem + 1.53vw, 3.125rem);
}

.about__head--heading3 {
	font-family: var(--fontRoboto);
	font-weight: bold;
	letter-spacing: 5px;
	font-size: clamp(3.125rem, 2.169rem + 4.78vw, 6.25rem);
}

.about__head--heading3 small {
	margin-left: 8px;
	display: inline-block;
	font-family: var(--fontBase);
	letter-spacing: -2px;
	font-size: clamp(1.5rem, 1.003rem + 2.49vw, 3.125rem);
}

.about__content {
	margin-top: 60px;
}

.about__texts {
	display: flex;
	flex-direction: column;
	gap: 40px;
	font-weight: bold;
}

.about__texts p {
	line-height: 2.33;
	letter-spacing: 1.5px;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
value
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
.value {
	margin-top: 150px;
}

.value__inner {}

.value__head {
	max-width: calc(1066px + 20px * 2);
	padding-inline: 20px;
	width: 100%;
	margin-inline: auto;
}

.value__content {
	margin-top: 100px;
}

.value__boxes {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.value__box {
	padding-block: 50px;
	background: var(--bgTertiary);
}

.value__box:nth-of-type(even) .value__box--inner {
	flex-direction: row-reverse;
}

.value__box--inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1166px;
	max-width: calc(1066px + 20px * 2);
	padding-inline: 20px;
	width: 100%;
	margin-inline: auto;
}

.value__box--body {
	max-width: calc((511 / 1166) * 100%);
	width: 100%;
	font-weight: bold;
}

.value__box--body--heading3 {
	display: inline-block;
	padding-bottom: 2px;
	font-size: 35px;
	font-family: var(--fontRoboto);
	letter-spacing: 1px;
	border-bottom: 2px solid var(--borderPrimary);
	line-height: 1;
}

.value__box--body--text {
	margin-top: 48px;
	line-height: 2.33;
}

.value__box--body--text span {
	color: var(--textFourth);
}

.value__box--image {
	max-width: calc((600 / 1166) * 100%);
	width: 100%;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
method
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
.method {
	margin-top: 70px;
}

.method__inner {
	max-width: calc(1164px + 20px * 2);
	width: 100%;
	margin-inline: auto;
	padding-inline: 20px;
}

.method__box {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.method__box--body {
	max-width: calc((674 / 1164) * 100%);
	width: 100%;
}

.method__box--body--texts {
	margin-top: 46px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.method__box--body--texts p {
	line-height: 2.33;
	letter-spacing: 1.2px;
}

.method__box--image {
	max-width: calc((373 / 1164) * 100%);
	width: 100%;
}

.method__logo-items {
	margin-top: 150px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: 704px;
	width: 100%;
	margin-inline: auto;
	gap: 150px;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
profile
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
.profile {
	margin-top: 170px;
}

.profile__inner {
	max-width: calc(1164px + 20px * 2);
	width: 100%;
	margin-inline: auto;
	padding-inline: 20px;
}

.profile__table {
	max-width: 1066px;
	margin-top: 50px;
	margin-inline: auto;
}

.profile__table--row div {
	padding-block: 25px;
	display: flex;
	align-items: center;
	font-size: 18px;
	font-weight: bold;
	border-top: 1px solid var(--borderSecondary);
	border-bottom: 1px solid var(--borderSecondary);
}

.profile__table--row dt {
	width: clamp(18.75rem, 9.894rem + 18.43vw, 25.625rem);
}

.profile__table--row dd {
	width: calc(100% - clamp(18.75rem, 9.894rem + 18.43vw, 25.625rem));
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
footer
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
.footer {
	margin-top: 150px;
	padding-block: 122px;
	background: var(--bgSecondary);
	color: var(--textSecondary);
}

.footer__inner {
	max-width: calc(1164px + 20px * 2);
	width: 100%;
	margin-inline: auto;
	padding-inline: 20px;
	display: flex;
	align-items: center;
	gap: 270px;
	gap: 40px;
	gap: clamp(2.5rem, -16.017rem + 38.53vw, 16.875rem);
}

.footer__logo {
	max-width: calc((368 / 1164) * 100%);
	width: 100%;
}

.footer__content {
	max-width: 100%;
	width: 100%;
}

.footer__buttons {
	max-width: 260px;
	margin-left: auto;
}

.footer__button {
	width: 100%;
}

.footer__button--link {
	border: 1px solid var(--borderTertiary);
	transition: all 0.3s ease;
}

.footer__button--link:hover,
.footer__button--link:focus {
	opacity: 0.8;
	background: var(--bgPrimary);
	color: var(--textPrimary);
}

.footer__button--link span {
	position: relative;
	padding-left: 4px;
	transition: all 0.3s ease;
}

.footer__button--link:hover span,
.footer__button--link:focus span {
	padding-left: 0;
}

.footer__button--link .is-beginner::before {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -10px;
	width: 18px;
	height: 26px;
	background-image: url(../img/_common/icon/icon_beginner.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.footer__button--link:hover .is-beginner::before,
.footer__button--link:focus .is-beginner::before {
	display: none;
}

.footer__nav {
	margin-top: 30px;
}

.footer__nav--items {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 40px;
	gap: clamp(1.625rem, 0.498rem + 2.35vw, 2.5rem);
}

.footer__nav--item {}

.footer__nav--item a {
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s ease;
}

.footer__nav--item a:hover,
.footer__nav--item a:focus {
	opacity: 0.8;
}

.copy-right {
	text-align: right;
	margin-top: 32px;
	font-size: 10px;
	font-weight: bold;
	font-family: var(--fontRoboto);
	letter-spacing: 1px;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
privacy, terms
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
.privacy,
.terms {
	margin-top: 120px;
}

.privacy__inner,
.terms__inner {
	max-width: calc(1106px + 20px * 2);
	width: 100%;
	margin-inline: auto;
	padding-inline: 20px;
}

.privacy__items,
.terms__items {
	margin-top: 50px;
	display: flex;
	flex-direction: column;
	gap: 60px;

}

.privacy__item--heading3,
.terms__item--heading3 {
	font-size: 26px;
	font-weight: bold;
}

.privacy__item--text,
.terms__item--text {
	margin-top: 24px;
	line-height: 2.2;
}

.privacy__item--lists,
.terms__item--lists {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 30px;
	padding-left: 1em;
}

.privacy__item--list,
.terms__item--list {
	line-height: 2.2;
	list-style: disc;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
media max 960px
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
@media (max-width: 960px) {

	.value__box--inner {
		flex-direction: column-reverse;
		gap: 40px;
	}

	.value__box:nth-of-type(even) .value__box--inner {
		flex-direction: column-reverse;
	}

	.value__box--image {
		max-width: 100%;
	}

	.value__box--body {
		max-width: 100%;
	}
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
media max 768px
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
@media (max-width: 768px) {

	.method__box {
		flex-direction: column;
		gap: 40px;
	}

	.method__box--body {
		max-width: 100%;
	}

	.method__box--image {
		max-width: 400px;
	}

	.method__logo-items {
		gap: 40px;
	}

	.footer {
		padding-top: 80px;
		padding-bottom: 40px;
	}

	.footer__inner {
		flex-direction: column;
	}

	.footer__buttons {
		margin-inline: auto;
	}

	.footer__nav {
		margin-top: 52px;
	}

	.footer__nav--items {
		justify-content: center;
	}

	.copy-right {
		text-align: center;
	}

}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
media max 599px
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
@media (max-width: 599px) {

	/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
		main
	＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
	.main.--privacy {
		padding-top: 60px;
	}

	/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
		br
	＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
	.br_visible-sp {
		display: block;
	}

	/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
		Button
	＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */

	.--button-common {
		font-size: 14px;
	}



	/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
		header
	＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */

	.header {
		height: 60px;
	}

	.header__button {
		max-width: 190px;
	}

	.header__inner {
		padding-inline: 20px;
	}

	.header__button--link span {
		padding-left: 14px;
	}

	.header__button--link span::before {
		left: -8px;
		width: 12px;
		height: 20px;
	}

	/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
		fv
	＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
	.fv {
		height: 540px;
	}

	/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
		about
	＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */

	.about {
		padding-block: 68px;
	}

	.about__content {
		margin-top: 40px;
	}

	.about__texts {
		gap: 32px;
	}

	.about__texts p {
		font-size: 14px;
	}

	/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
		value
	＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
	.value {
		margin-top: 80px;
	}

	.value__content {
		margin-top: 60px;
	}

	.value__boxes {
		gap: 35px;
	}

	.value__box {
		padding-block: 30px;
	}

	.value__box--inner {
		gap: 30px;
	}

	.value__box--body--heading3 {
		display: block;
		font-size: 20px;
		letter-spacing: 1px;
	}

	.value__box--body--text {
		margin-top: 16px;
		font-size: 14px;
		line-height: 2;
	}

	/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
		method
	＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
	.method {
		margin-top: 60px;
	}

	.method__box {
		gap: 30px;
	}

	.method__box--body--texts {
		margin-top: 32px;
		gap: 20px;
	}

	.method__box--body--texts p {
		font-size: 14px;
		line-height: 2;
	}

	.method__logo-items {
		margin-top: 26px;
		grid-template-columns: repeat(2, 1fr);
		gap: 34px;
	}

	.method__logo-item {
		max-width: 158px;
		justify-self: center;
	}

	.method__logo-item.--1column {
		grid-column: span 2 / span 2;
		justify-self: center;
		max-width: 158px;
	}

	/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
		profile
	＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
	.profile {
		margin-top: 120px;
	}

	.profile__table {
		margin-top: 40px;
	}

	.profile__table--row div {
		padding-block: 20px;
		flex-direction: column;
		font-size: 16px;
	}

	.profile__table--row dt {
		width: 100%;
	}

	.profile__table--row dd {
		margin-top: 12px;
		width: 100%;
	}

	/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
		footer
	＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
	.footer {
		margin-top: 80px;
		padding-top: 64px;
		padding-bottom: 26px;
	}

	.footer__buttons {
		flex-direction: column;
	}

	.footer__button {
		max-width: 220px;
		margin-inline: auto;
	}

	.footer__nav--items {
		margin-top: 60px;
		flex-direction: column;
		align-items: baseline;
		gap: 20px;
	}

	.copy-right {
		margin-top: 80px;
	}

	/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
		privacy
	＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝  */
	.privacy,
	.terms {
		margin-top: 60px;
	}

	.privacy__items,
	.terms__items {
		margin-top: 30px;
		gap: 40px;
	}

	.privacy__item--heading3,
	.terms__item--heading3 {
		font-size: 20px;
	}

	.privacy__item--text,
	.terms__item--text {
		font-size: 14px;
		line-height: 2;
	}

	.privacy__item--lists,
	.terms__item--lists {
		margin-top: 26px;
		gap: 14px;
	}

	.privacy__item--list,
	.terms__item--list {
		font-size: 14px;
		line-height: 2;
	}
}