@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */
/* カラー */
.btn-movie a,
.color-purple {
	color: #6445AA;
}

.color-dark-purple,
ul.list-page-navi a,
.mv-title {
	color: #3E3789;
}

ul.list-dictionary li,
ul.list-dictionary2 li {
	background-color: #F2EDFC
}

/* マーカー */
em.marker {
	display: inline;
	background: linear-gradient(transparent 60%, #F0EFFD 60%);
	padding: 0 0.1em;
}

/* メインセクション */
.main-title {
	font-weight: 900;
}

/* サブセクション */
.sub-header {
	padding: 0 0 0 .8em;
	border-left: solid 5px #6445AA;
}

.sub-title {
	font-weight: 900;
}

.sub-sub-title {
	padding: 0 0 0 .6em;
	border-left: solid 5px #6445AA;
}

.point-icon {
	display: inline-block;
	margin-right: 1em;
	padding: .5em 1em;
	font-weight: 900;
	background-color: #926AED;
	color: #fff;
	border-radius: 6px;
	box-shadow: 3px 3px 0px #E5E5E5;
}

.step-icon {
	display: inline-block;
	margin-right: 1em;
	padding: .3em .5em;
	font-weight: bold;
	color: #926AED;
	border: solid 2px #926AED;
	border-radius: 6px;
}

/* コラム */
.column-container {
	border: solid 6px #F2EDFC;
}

.column-sub-title {
	padding: .2em .4em .2em .8em;
	color: #926AED;
	font-weight: 900;
	background-color: #F0EFFD;
	border-left: solid 5px #926AED;
}

/* 動画を見るボタン */
.btn-movie a {
	display: block;
	padding: .7em;
	text-align: center;
	border: solid 2px #6445AA;
	border-radius: 5px;
	text-decoration: none;
}

/* 個別スタイル */
#main02 .flex-container.step {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* ====================================
	1023px以下専用スタイル
===================================== */
@media only screen and (max-width: 1023px) {

	.mts {
		margin-top: 2rem;
	}

	.sp-mts {
		margin-top: 2rem;
	}

	/* メインビジュアル */
	#mainVisual {
		background-image: url(images/main-visual_sp.jpg);
	}

	/* メインセクション */
	.main-section {
		padding-top: 8rem;
	}

	.main-title {
		max-width: 768px;
		margin: 0 auto 5rem;
		padding: .7em;
		font-size: 2rem;
		text-align: center;
	}

	/* サブセクション */
	.sub-header {
		margin-bottom: 4rem;
	}

	.sub-catch {
		font-size: 1.3rem;
	}

	.sub-title {
		padding: .4em 0 0;
		font-size: 2.2rem;
	}

	.sub-sub-title {
		margin-bottom: 1rem;
		font-size: 1.6rem;
		line-height: 1.4;
	}

	.point-title {
		padding-left: 60px;
		margin-bottom: 2rem;
		position: relative;
	}

	.point-icon {
		font-size: 1rem;
		position: absolute;
		top: 0;
		left: 0;
	}

	.point-ttl {
		font-size: 1.6rem;
	}

	.text-container {
		font-size: 1.4rem;
		line-height: 1.6;
	}

	.figure-normal figcaption {
		font-size: 1.4rem;
	}

	/* フレックスコンテナ */
	.flex-item3 {
		justify-content: space-between;
	}

	.flex-item3 .flex-item {
		width: 47%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.flex-item3 .ttl {
		margin-bottom: .5em;
	}

	.flex-item3 .text {
		min-height: 3em;
		font-size: 1.2rem;
	}

	/* コラム */
	.column-container {
		padding: 3rem 5%;
	}

	.column-title {
		margin-bottom: 3rem;
		font-size: 1.8rem;
		line-height: 1.6;
		text-align: center;
	}

	.column-sub-title {
		margin-top: 4rem;
		font-size: 1.6rem;
	}

	.column-sub-text {
		font-size: 1.4rem;
	}

	.column-text {
		font-size: 1.4rem;
	}

	.btn-column-movie {
		max-width: 240px;
		margin-top: 2rem;
	}

	.step-title {
		margin-bottom: .5em;
		padding-left: 56px;
		line-height: 1.5;
		position: relative;
	}

	.step-icon {
		font-size: 1rem;
		position: absolute;
		top: 0;
		left: 0;
	}

	.step-ttl {
		font-size: 1.4rem;
	}

	/* プロフィール */
	.profile-container {
		display: flex;
		justify-content: space-between;
		margin-bottom: 3rem;
	}

	.profile-img {
		width: 100px;
		padding-right: 2rem;
	}

	.profile-text-container {
		flex: 1;
	}

	.profile-name {
		margin-bottom: 2rem;
	}

	.profile-kana {
		margin-left: 1em;
		font-size: 1.2rem;
	}

	.profile-text {
		min-height: 72px;
		font-size: 1.2rem;
	}

	/* 辞書画像リスト */
	ul.list-dictionary {
		width: 160px;
	}

	ul.list-dictionary li {
		padding: 6%;
	}

	.dictionary-icon {
		margin-bottom: 1rem;
	}

	.dictionary-text {
		min-height: 3em;
		font-size: 1rem;
		line-height: 1.5;
		text-align: center;
	}

	ul.list-dictionary2 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	ul.list-dictionary2 li {
		width: 48%;
		padding: 3%;
		margin-top: 4%;
	}

	ul.list-dictionary2 li:nth-child(-n+2) {
		margin-top: 0;
	}

	/* 動画を見るボタン */
	.btn-movie {
		width: 200px;
	}

	.btn-movie a {
		font-size: 1.6rem;
	}

	/* 個別スタイル */
	.mark {
		width: 100px;
	}

	#column01 .flex-item:first-child {
		margin-bottom: 4rem;
	}

	#sub03 {
		margin-top: 4rem;
	}

	#column03 .img-container {
		margin-top: 2rem;
	}

	#column03 .flex-item:first-child {
		margin-bottom: 3rem;
	}

}

/* ====================================
	568px以上1023px以下専用スタイル
===================================== */
@media only screen and (min-width: 568px) and (max-width: 1023px) {
	.figure-normal {
		width: 50%;
	}

	/* コラム */
	.column-title {
		text-align: center;
	}

	/* フレックスコンテナ */
	.flex-container-col3 {
		justify-content: space-between;
	}

	.flex-col1 {
		width: 100%;
		margin-bottom: 3rem;
	}

	.flex-col1 .img-container {
		width: 60%;
	}

	.flex-col2 {
		width: 60%;
	}

	.flex-col3 {
		width: 32%;
	}

	/* 辞書画像リスト */
	ul.list-dictionary {
		width: 230px;
	}

	/* 個別スタイル */
	#column02 .flex-container {
		justify-content: space-between;
	}

	#column02 .flex-text {
		width: 58%;
	}

	#column02 .flex-img {
		width: 38%;
	}



	#main02 .flex-icon {
		width: 200px;
	}

}


/* ====================================
	567px以下専用スタイル
===================================== */
@media only screen and (max-width: 567px) {
	.sps-none {
		display: none;
	}

	/* フレックスコンテナ */
	.flex-col2 {
		margin-top: 3rem;
	}

	.flex-col3 {
		width: 60%;
		margin: 3rem auto 0;
	}

	.img-container {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	.btn-column-movie {
		margin-left: auto;
		margin-right: auto;
	}

	.pos-relative {
		position: relative;
	}

	#main02 .flex-icon {
		width: 140px;
		/* position: absolute;
		bottom: 40px;
		left: 160px; */
	}

}

/* ====================================
	1024px以上印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) {
	.figure-normal {
		width: 50%;
	}

	/* メインビジュアル */
	#mainVisual {
		background-image: url(images/main-visual.jpg);
	}

	/* メインセクション */
	.main-section {
		padding: 12rem 0 4rem;
	}

	.main-title {
		max-width: 1200px;
		margin: 0 auto 6rem;
		padding: .7em;
		font-size: 2.4rem;
		text-align: center;
	}

	/* サブセクション */
	.sub-header {
		margin-bottom: 5rem;
	}

	.sub-title {
		padding: .2em 0 0;
		font-size: 2.8rem;
	}

	.sub-catch {
		font-size: 1.8rem;
	}

	.sub-sub-title {
		margin-bottom: 2rem;
		font-size: 2rem;
		line-height: 1.4;
	}

	.point-title {
		margin-bottom: 3rem;
	}

	.point-ttl {
		font-size: 2.4rem;
	}

	.point-icon {
		border-radius: 10px;
	}

	.text-container {
		line-height: 1.8;
	}

	/* フレックスコンテナ */
	.flex-item3 {
		justify-content: space-between;
	}

	.flex-item3 .flex-item {
		width: 31%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.flex-item3 .ttl {
		margin-bottom: .5em;
	}

	.flex-item3 .text {
		font-size: 1.4rem;
	}

	.flex-col1 {
		width: 37.5%;
	}

	.flex-col2 {
		margin-left: 2.5%;
		width: 37.5%;
	}

	.flex-col3 {
		margin-left: 2.5%;
		width: 20%;
	}

	/* コラム */
	.column-container {
		padding: 4rem 8rem 6rem;
		border: solid 6px #F2EDFC;
	}

	.column-title {
		margin-bottom: 1em;
		font-size: 2.4rem;
		text-align: center;
	}

	.column-sub-title {
		margin-top: 7rem;
		font-size: 2.2rem;
	}

	.column-sub-text {
		text-align: center;
	}

	.column-text {
		font-size: 1.4rem;
	}

	.btn-column-movie {
		width: 300px;
		margin-top: 2rem;
	}

	.step-title {
		margin-bottom: 1em;
	}

	.step-icon {
		font-size: 1.6rem;
		line-height: 1.4;
		border-radius: 10px;
	}

	/* プロフィール */
	.profile-container {
		display: flex;
		justify-content: space-between;
		margin-bottom: 3rem;
	}

	.profile-img {
		flex: 1;
	}

	.profile-text-container {
		width: 340px;
		padding-left: 30px;
	}

	.profile-name {
		margin-bottom: 3rem;
	}

	.profile-kana {
		margin-left: 1em;
		font-size: 1.2rem;
	}

	.profile-text {
		min-height: 72px;
		font-size: 1.2rem;
	}

	/* 辞書画像リスト */
	ul.list-dictionary2,
	ul.list-dictionary {
		display: flex;
	}

	ul.list-dictionary2 li,
	ul.list-dictionary li {
		width: 220px;
		margin-left: 10px;
		padding: 2rem 2rem;
	}

	ul.list-dictionary2 li:first-child,
	ul.list-dictionary li:first-child {
		margin-left: 0;
	}

	.dictionary-icon {
		margin-bottom: 2rem;
	}

	.dictionary-text {
		min-height: 3em;
		font-size: 1.2rem;
		line-height: 1.5;
		text-align: center;
	}

	/* 動画を見るボタン */
	.btn-movie {
		width: 300px;
	}

	.btn-movie a {
		font-size: 2rem;
	}

	/* 個別スタイル */
	.mark {
		width: 100px;
	}

	#column01 .flex-item {
		width: 46%;
	}

	#sub03 {
		margin-top: 4rem;
	}

	#column02 .flex-container {
		justify-content: space-between;
	}

	#column02 .flex-text {
		width: 55%;
	}

	#column02 .flex-img {
		width: 38%;
	}

	#column02 .column-text {
		font-size: 1.6rem;
	}


	#main02 .flex-icon {
		width: 240px;
	}

	#column03 {
		padding: 6rem 8rem 8rem;
	}

	#column03 .flex-item {
		width: 46%;
	}

	#column04 ul.list-dictionary2 {
		width: 910px;
	}

}

/* ====================================
	1024px以上1199px以下専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) and (max-width: 1199px) {

	/* コラム */
	.column-container {
		padding: 4rem 5%;
	}

	/* 辞書画像リスト */
	ul.list-dictionary li {
		width: 18.5vw;
	}

	ul.list-dictionary li {
		margin-left: 1vw;
	}

	ul.list-dictionary li:first-child {
		margin-left: 0;
	}

	#column04 ul.list-dictionary2 {
		max-width: 77vw;
	}

}