@charset "UTF-8";
/* CSS Document */
		
html,
body {
    width: 100%;
}
#wrapper {
    box-sizing: border-box;
    width: 100%;
    padding: 50px 30px;
}

.note {
    color: #666;
    font-size: 1.2rem;
}

/*  ------------------------------
#method_top
 ------------------------------ */

#section_exercise + #section_method {
	margin-top: 80px;
}

#method_top .page_title {
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 2.4rem;
    font-weight: bold;
    text-align: center;
}
#method_top .page_sub_title {
    margin: 0 0 20px;
    font-size: 1.6rem;
    text-align: center;
}
#method_top .method_list {
	margin: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#method_top .method_list li {
	width: 280px;
	margin: 10px 10px;
    color: #333;
	font-size: 1.8rem;
	line-height: 1.0;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
#method_top .method_list li a {
    display: block;
    color: #333;
}
#method_top .method_list li .method_title a {
	position: relative;
    padding: 30px 30px;
    font-weight: bold;
}
#method_top #section_exercise .method_list li .method_title a {
    padding: 15px 30px;
    line-height: 1.2;
}
#method_top .method_list li .method_title a::before {
	position: absolute;
	content: "\f054";
	display: block;
	font-family: "Font Awesome 5 Free";
	top: 40px;
	right: 30px;
}
#method_top .method_num {
    display: block;
    margin: 0 0 5px;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
#method_top .method_list li .method_movie a {
	position: relative;
    font-weight: bold;
}
#method_top .method_list li .method_movie a::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: url("../img/icon_play.png");
    display: block;
    width: 50px;
    height: 50px;
    opacity: 0.7;
}
#method_top .method_list li .method_movie img {
    width: 100%;
	height: auto;
	max-height: 158px;
}

#method_top .note {
	width: 880px;
	margin: 10px auto 0;
	text-align: right;
}

/*  ------------------------------
.method_page
 ------------------------------ */

.method_page #wrapper {
    padding: 40px 60px;
    color: #333;
    font-size: 1.6rem;
}
.method_page header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin: 0 0 30px;
    font-size: 1.6rem;
    line-height: 1.5;
}
.method_page header .note {
	margin-top: 10px;
}
.method_page .page_title {
	margin-bottom: 10px;
    font-size: 3.2rem;
    font-weight: bold;
    line-height: 1.2;
}
.method_page .method_num {
    display: block;
    margin: 0 0 5px;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 1.6rem;
    font-weight: normal;
}
.method_page .movie_link {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: 30px;
}
.method_page .thumb_movie a {
    position: relative;
    display: block;
    width: 288px;
    height: auto;
    margin: 0 40px 0 0;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.method_page .thumb_movie a img {
    width: 100%;
    height: auto;
}
.method_page .thumb_movie a::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: url("../img/icon_play.png");
    display: block;
    width: 50px;
    height: 50px;
    opacity: 0.7;
}
.method_page .thumb_movie a:hover {
    box-shadow: none;
}
.method_page .qr_cord img {
    width: 160px;
    height: auto;
	border: 1px solid #ccc;
}

.method_page .content {
    width: 100%;
    overflow-x: scroll;
}
.method_page .method_explain {
    display: flex;
    flex-wrap: nowrap;
	gap: 60px;
}
.method_page .method_explain > li {
	min-width: 120px;
    margin-bottom: 10px;
}
.method_page .method_explain .heading {
    display: flex;
    margin: 0 0 20px;
    padding: 0 0 10px;
    font-size: 2.0rem;
    border-bottom: 1px solid #ccc;
}
.method_page .step_num {
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
.method_page .step_part {
    display: flex;
    margin-left: 1em;
}
.method_page .step_part > li {
    min-width: 200px;
}
.method_page .method_explain dd {
    min-width: 120px;
    line-height: 1.5;
}
.method_page .method_explain .step_content {
    display: flex;
	justify-content: space-between;
	gap: 40px;
}
.method_page .method_explain .step_content > li {
    width: 220px;
}
.method_page .method_explain .step_ph {
    display: flex;
    align-items: flex-end;
 	margin-bottom: 40px;
}
.method_page .method_explain .step_ph img {
    width: auto;
    max-width: 100%;
    height: auto;
}
.display_inline-block {
	display: inline-block
}

.method_page footer {

}
.method_page .btn_back a {
    display: block;
    width: 300px;
    margin: 30px auto 0;
    font-size: 1.5rem;
    line-height: 30px;
    border-radius: 15px;
    text-align: center;
	border: 1px solid #ccc;
}
.method_page .noimage {
    position: absolute;
    display: block;
    width: auto !important;
}


/* --- #method_01 --- */

#method_01 .step_1 {
    width: 120px;
}
#method_01 .step_2 {
    min-width: 760px;
}
#method_01.method_page .method_explain .step_2 .step_content li:nth-child(2) {
    min-width: 240px;
}

/* --- #method_02 --- */

#method_02 .step_1 {
    width: 120px;
}
#method_02 .step_2 {
    min-width: 740px;
}
#method_02.method_page .method_explain .step_2 .step_content li:nth-child(2) {
    min-width: 230px;
    margin-right: 30px;
}
#method_02.method_page .method_explain .step_3 .step_content li {
    min-width: 300px;
}
#method_02 .step_3 {
    min-width: 640px;
}

/* --- #method_03 --- */

#method_03 .step_1 {
    min-width: 388px;
}
#method_03 .step_2 {
    min-width: 314px;
}
#method_03 .step_2 .step_ph {
    height: 200px;
}
#method_03 .step_3 {
    min-width: 314px;
}
#method_03 .step_4 {
    min-width: 313px;
}

/* --- #method_04 --- */

#method_04 .step_1 {
    min-width: 300px;
}
#method_04 .step_2 .step_ph,
#method_04 .step_3 .step_ph,
#method_04 .step_4 .step_ph {
    height: 200px;
}
#method_04 .step_2 {
    min-width: 250px;
}
#method_04 .step_3 {
    min-width: 250px;
}
#method_04 .step_4 {
    min-width: 250px;
}

/* --- #method_05 --- */

#method_05.method_page .method_explain {
    justify-content: center;
}
#method_05 .step_1 {
    min-width: 360px;
    width: 360px;
}
#method_05 .step_2 {
    min-width: 360px;
    width: 360px;
}

/* --- #method_06 --- */

#method_06 .step_1 .step_ph,
#method_06 .step_2 .step_ph,
#method_06 .step_3 .step_ph,
#method_06 .step_4 .step_ph,
#method_06 .step_5 .step_ph {
    height: 240px;
    align-items: center;
}
#method_06 .step_1 {
    min-width: 390px;
}
#method_06 .step_2 {
    min-width: 260px;
}
#method_06 .step_3 {
    min-width: 230px;
}
#method_06 .step_4 {
    min-width: 230px;
}
#method_06 .step_5 {
    min-width: 230px;
}

/* --- #method_07 --- */

#method_07 .step_1 .step_ph,
#method_07 .step_2 .step_ph,
#method_07 .step_3 .step_ph,
#method_07 .step_4 .step_ph,
#method_07 .step_5 .step_ph {
    height: 209px;
    align-items: center;
}
#method_07 .step_1 {
    min-width: 820px;
}
#method_07.method_page .method_explain .step_1 .step_content > li {
    margin-right: 80px;
}
#method_07.method_page .step_1 .step_part > li:first-child {
    min-width: 215px;
}
#method_07.method_page .step_1 .step_part > li:nth-child(2) {
    min-width: 302px;
}
#method_07 .step_2 {
    min-width: 530px;
}
#method_07.method_page .method_explain .step_2 .step_content > li {
    width: 230px;
    margin-right: 65px;
}
#method_07.method_page .step_2 .step_part > li:first-child {
    min-width: 212px;
}
#method_07 .step_3 {
    position: relative;
    min-width: 830px;
}
#method_07.method_page .method_explain .step_3 .step_content > li {
    width: 160px;
    margin-right: 60px;
}
#method_07.method_page .method_explain .step_3 .step_content > li:nth-child(2) {
    margin-right: 80px;
}
#method_07.method_page .method_explain .step_3 .step_content > li:nth-child(3) {
    min-width: 230px;
}
#method_07 .step_3 .noimage {
    top: 145px;
    right: 0;
}
#method_07 .step_4 {
    min-width: 260px;
}
#method_07 .step_5 {
    min-width: 270px;
}

/* --- #method_08 --- */

#method_08.method_page .method_explain {
    justify-content: center;
}
#method_08 .step_1 .step_ph,
#method_08 .step_2 .step_ph,
#method_08 .step_3 .step_ph {
    height: 231px;
    align-items: flex-start;
}
#method_08 .step_1 {
    min-width: 201px;
    width: 201px;
}
#method_08 .step_2 {
    min-width: 231px;
    width: 231px;
}
#method_08 .step_3 {
    min-width: 280px;
    width: 280px;
}

/* --- #method_09 --- */

#method_09 .step_1 .step_ph,
#method_09 .step_2 .step_ph,
#method_09 .step_3 .step_ph,
#method_09 .step_4 .step_ph,
#method_09 .step_5 .step_ph {
    height: 200px;
    align-items: center;
}
#method_09 .step_1 {
    min-width: 820px;
}
#method_09.method_page .method_explain .step_1 .step_content > li {
    margin-right: 80px;
}
#method_09.method_page .step_1 .step_part > li:first-child {
    min-width: 215px;
}
#method_09.method_page .step_1 .step_part > li:nth-child(2) {
    min-width: 302px;
}
#method_09 .step_2 {
    min-width: 520px;
}
#method_09.method_page .method_explain .step_2 .step_content > li {
    margin-right: 80px;
}
#method_09.method_page .step_2 .step_part > li:first-child {
    min-width: 215px;
}
#method_09 .step_3 {
    min-width: 240px;
}
#method_09 .step_4 {
    min-width: 365px;
}
#method_09 .step_5 {
    position: relative;
    min-width: 560px;
}
#method_09 .step_5 .noimage {
    top: 170px;
    right: 0;
}

/* --- #method_10 --- */

#method_10 .step_1 {
    min-width: 820px;
}
#method_10.method_page .method_explain .step_1 .step_content > li {
    margin-right: 80px;
}
#method_10.method_page .step_1 .step_part > li:first-child {
    min-width: 215px;
}
#method_10.method_page .step_1 .step_part > li:nth-child(2) {
    min-width: 302px;
}
#method_10 .step_2 {
    min-width: 680px;
}
#method_10 .step_2 .step_ph {
    margin-left: 30px;
}
#method_10.method_page .method_explain .step_2 .step_content > li {
    min-width: 200px;
}

/* --- #method_11 --- */

#method_11 .step_1 .step_ph,
#method_11 .step_2 .step_ph,
#method_11 .step_3 .step_ph,
#method_11 .step_4 .step_ph {
    height: 217px;
    align-items: center;
}
#method_11 .step_1 {
    min-width: 820px;
}
#method_11.method_page .method_explain .step_1 .step_content > li {
    margin-right: 80px;
}
#method_11.method_page .step_1 .step_part > li:first-child {
    min-width: 215px;
}
#method_11.method_page .step_1 .step_part > li:nth-child(2) {
    min-width: 302px;
}
#method_11 .step_2 {
    min-width: 220px;
}
#method_11 .step_3 {
    min-width: 390px;
}
#method_11 .step_4 {
    min-width: 680px;
}
#method_11.method_page .method_explain .step_4 .step_content > li {
    width: 160px;
    margin-right: 80px;
}
#method_11.method_page .method_explain .step_4 .step_content > li:nth-child(3) {
    width: 200px;
}

/* --- #method_12 --- */

#method_12.method_page .method_explain {
    justify-content: center;
}
#method_12 .step_1 {
    min-width: 357px;
}
#method_12 .step_2 {
    min-width: 358px;
}

/* --- #method_13 --- */

#method_13 .step_1 .step_ph,
#method_13 .step_2 .step_ph,
#method_13 .step_3 .step_ph,
#method_13 .step_4 .step_ph {
    height: 202px;
    align-items: center;
}
#method_13 .step_1 {
    min-width: 400px;
}
#method_13 .step_1 .step_ph {
    justify-content: center;
}
#method_13 .step_2 {
    min-width: 520px;
}
#method_13.method_page .step_2 .step_part > li:first-child {
    min-width: 215px;
}
#method_13.method_page .method_explain .step_2 .step_content > li {
    margin-right: 80px;
}
#method_13 .step_3 {
    min-width: 234px;
}
#method_13 .step_4 {
    min-width: 223px;
}

/* --- #method_14 --- */

#method_14.method_page .method_explain {
    justify-content: center;
}
#method_14 .step_0 .step_ph,
#method_14 .step_1 .step_ph,
#method_14 .step_2 .step_ph {
    height: 230px;
    align-items: center;
}
#method_14 .step_0 {
    min-width: 330px;
    width: 330px;
    margin: 0 80px 10px 0;
}
#method_14 .step_0 .step_ph {
    justify-content: center;
}
#method_14 .step_1 {
    min-width: 220px;
    width: 220px;
}
#method_14 .step_1 .step_ph {
    justify-content: center;
}
#method_14 .step_2 {
    min-width: 200px;
    width: 200px;
}
#method_14 .step_2 .step_ph {
    justify-content: center;
}

/* --- #method_15 --- */

#method_15 .step_1 .step_ph,
#method_15 .step_2 .step_ph,
#method_15 .step_3 .step_ph,
#method_15 .step_4 .step_ph,
#method_15 .step_5 .step_ph,
#method_15 .step_6 .step_ph {
    height: 211px;
}
#method_15 .step_1 .step_ph {
    justify-content: center;
}
#method_15 .step_1 {
    min-width: 280px;
}
#method_15 .step_2 {
    min-width: 450px;
}
#method_15.method_page .method_explain .step_2 .step_content > li:first-child {
    width: 140px;
}
#method_15.method_page .method_explain .step_2 .step_content > li:nth-child(2) {
    width: 260px;
}
#method_15 .step_3 {
    position: relative;
    min-width: 480px;
}
#method_15 .step_3 .noimage {
    top: 160px;
    right: 0;
}
#method_15.method_page .method_explain .step_3 .step_content > li {
    width: 150px;
}
#method_15 .step_4 {
    position: relative;
    min-width: 1020px;
}
#method_15 .step_4 .noimage {
    top: 170px;
    right: 0;
}
#method_15.method_page .method_explain .step_4 .step_content > li:first-child {
    width: 180px;
    margin-right: 40px;
}
#method_15.method_page .method_explain .step_4 .step_content > li:nth-child(2) {
    width: 210px;
    margin-right: 80px;
}
#method_15.method_page .method_explain .step_4 .step_content > li:nth-child(3) {
    width: 150px;
    margin-right: 60px;
}
#method_15.method_page .method_explain .step_4 .step_content > li:nth-child(4) {
    width: 150px;
}
#method_15.method_page .step_4 .step_part > li:first-child {
    min-width: 440px;
}
#method_15 .step_5 {
    min-width: 490px;
}
#method_15 .step_6 {
    min-width: 200px;
}
#method_15 .step_6 .step_ph {
    justify-content: center;
}


/* --- #exercise_01 --- */

#exercise_01.method_page .method_explain {
}
#exercise_01 .step_1 .step_ph,
#exercise_01 .step_2 .step_ph {
    height: 230px;
	margin-bottom: 20px;
    align-items: flex-start;
}
#exercise_01 .step_1 {
    min-width: 406px;
}
#exercise_01 .step_2 {
    min-width: 558px;
}
#exercise_01.method_page .method_explain .step_2 .step_content > li {
    width: 250px;
}

/* --- #exercise_02 --- */

#exercise_02.method_page .method_explain {
}
#exercise_02 .step_1 .step_ph,
#exercise_02 .step_2 .step_ph,
#exercise_02 .step_3 .step_ph {
	margin-bottom: 20px;
    align-items: flex-start;
	justify-content: center;
}
#exercise_02 .step_1 {
    min-width: 390px;
}
#exercise_02 .step_2 {
    min-width: 390px;
}
#exercise_02 .step_3 {
    min-width: 460px;
}

/* --- #exercise_03 --- */

#exercise_03.method_page .method_explain {
}
#exercise_03 .step_1 .step_ph,
#exercise_03 .step_2 .step_ph {
	margin-bottom: 20px;
    align-items: flex-start;
	justify-content: center;
}
#exercise_03 .step_1 {
    min-width: 426px;
}
#exercise_03 .step_2 {
    min-width: 532px;
}

/* --- #exercise_04 --- */

#exercise_04.method_page .method_explain {
}
#exercise_04 .step_1 {
    min-width: 400px;
}
#exercise_04 .step_2 {
    min-width: 500px;
}
#exercise_04 .step_1 .step_ph,
#exercise_04 .step_2 .step_ph {
	margin-bottom: 20px;
    align-items: flex-start;
	justify-content: center;
}
#exercise_04.method_page .method_explain .step_2 dd {
	display: flex;
	gap: 40px;
}
#exercise_04.method_page .method_explain .step_2 dd div:first-child {
    min-width: 294px;
}
#exercise_04.method_page .method_explain .step_2 dd div:nth-child(2) {
    min-width: 141px;
}

/* --- #exercise_05 --- */

#exercise_05.method_page .method_explain {
	gap: 0;
}
#exercise_05.method_page .method_explain .heading {
	height: 50px;
}
#exercise_05.method_page .method_explain .heading img {
	width: auto;
	height: auto;
}
#exercise_05 .step_1 .step_ph,
#exercise_05 .step_2 .step_ph,
#exercise_05 .step_3 .step_ph {
    height: 239px;
	margin-bottom: 20px;
    align-items: flex-start;
}
#exercise_05 .step_1 {
    min-width: 467px;
	flex-shrink: 0;
}
#exercise_05 .step_2 {
    min-width: 273px;
	flex-shrink: 0;
}
#exercise_05 .step_3 {
    min-width: 300px;
	flex-shrink: 0;
}
#exercise_05.method_page .method_explain .step_1 dd {
    width: 367px;
	margin-right: 100px;
}
#exercise_05.method_page .method_explain .step_2 dd {
    width: 193px;
	margin-right: 100px;
}
#exercise_05.method_page .method_explain .step_3 dd {
    width: 300px;
}

/* --- #exercise_06 --- */

#exercise_06.method_page .method_explain {
	gap: 0;
}
#exercise_06.method_page .method_explain .heading {
	height: 50px;
}
#exercise_06.method_page .method_explain .heading img {
	width: auto;
	height: auto;
}
#exercise_06 .step_1 .step_ph,
#exercise_06 .step_2 .step_ph,
#exercise_06 .step_3 .step_ph {
	margin-bottom: 20px;
    align-items: flex-start;
	justify-content: center;
}
#exercise_06 .step_1 {
	min-width: 440px;
	flex-shrink: 0;
}
#exercise_06 .step_2 {
    min-width: 266px;
	flex-shrink: 0;
}
#exercise_06 .step_3 {
	min-width: 280px;
	flex-shrink: 0;
}
#exercise_06.method_page .method_explain .step_1 dd {
    width: 340px;
	margin-right: 100px;
}
#exercise_06.method_page .method_explain .step_2 dd {
    width: 200px;
	margin-right: 100px;
}
#exercise_06.method_page .method_explain .step_3 dd {
    width: 280px;
}

/* --- #exercise_07 --- */

#exercise_07.method_page .method_explain {
	gap: 0;
}
#exercise_07.method_page .method_explain .heading {
	height: 50px;
}
#exercise_07.method_page .method_explain .heading img {
	width: auto;
	height: auto;
}
#exercise_07 .step_1 .step_ph,
#exercise_07 .step_2 .step_ph,
#exercise_07 .step_3 .step_ph {
	margin-bottom: 20px;
    align-items: flex-start;
}
#exercise_07 .step_1 .step_ph {
	justify-content: center;
}
#exercise_07 .step_1 {
    min-width: 860px;
    flex-shrink: 0;	
}
#exercise_07 .step_2 {
    flex-basis: 452px;
    flex-shrink: 0;
}
#exercise_07 .step_3 {
    min-width: 250px;
    flex-shrink: 0;	
}
#exercise_07.method_page .method_explain .step_content > li {
	width: 260px;
}
#exercise_07.method_page .method_explain .step_1 dd {
    min-width: 789px;
	margin-right: 60px;
}
#exercise_07.method_page .method_explain .step_2 dd {
    min-width: 392px;
	margin-right: 60px;
}
#exercise_07.method_page .method_explain .step_2 .step_content {
    gap: 20px;
}

/* --- #exercise_08 --- */

#exercise_08.method_page .method_explain {
	gap: 0;
}
#exercise_08.method_page .method_explain .heading {
	height: 50px;
}
#exercise_08.method_page .method_explain .heading img {
	width: auto;
	height: auto;
}
#exercise_08 .step_1 .step_ph,
#exercise_08 .step_2 .step_ph,
#exercise_08 .step_3 .step_ph {
	margin-bottom: 20px;
    align-items: flex-start;
	justify-content: center;
}
#exercise_08 .step_1 {
    min-width: 505px;
    flex-shrink: 0;	
}
#exercise_08 .step_2 {
    min-width: 377px;
    flex-shrink: 0;	
}
#exercise_08 .step_3 {
    min-width: 250px;
    flex-shrink: 0;	
}
#exercise_08.method_page .method_explain .step_1 dd {
    min-width: 445px;
	margin-right: 60px;
}
#exercise_08.method_page .method_explain .step_2 dd {
    min-width: 317px;
	margin-right: 60px;
}

/* --- #exercise_09 --- */

#exercise_09.method_page .method_explain {
	gap: 0;
}
#exercise_09.method_page .method_explain .heading {
	height: 50px;
}
#exercise_09.method_page .method_explain .heading img {
	width: auto;
	height: auto;
}
#exercise_09 .step_1 .step_ph,
#exercise_09 .step_2 .step_ph,
#exercise_09 .step_3 .step_ph {
	margin-bottom: 20px;
    align-items: flex-start;
	justify-content: center;
}
#exercise_09 .step_1 {
    min-width: 530px;
    flex-shrink: 0;	
}
#exercise_09 .step_2 {
    min-width: 387px;
    flex-shrink: 0;	
}
#exercise_09 .step_3 {
    min-width: 250px;
    flex-shrink: 0;	
}
#exercise_09.method_page .method_explain .step_1 dd {
    min-width: 451px;
	margin-right: 60px;
}
#exercise_09.method_page .method_explain .step_2 dd {
    min-width: 317px;
	margin-right: 60px;
}



/*  ------------------------------
#movie_page
 ------------------------------ */

.movie_block video {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: auto;
}
.vertical_movie_block video {
    display: block;
    width: auto;
	height: 100%;
	max-height: 100vh;
    margin: auto;
}

@media screen and (max-width: 820px) {
	
    .method_page #wrapper {
        padding: 40px 20px;
    }
}