@charset "utf-8";
.training h3{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	border-bottom : 2px solid #992200;
	color : #992200;
	font-size : 25px;
	font-weight : 500;
	padding-bottom : 15px;
	margin-bottom : 20px;
}
.information{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 50px;
}
.information p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : justify;
	font-size : 20px;
	margin-bottom : 30px;
}
.information p:last-child{
	margin-bottom : 0;
}
.information p span{
	color : #992200;
	font-weight : 600;
}
.information .view-more{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : right;
}
.information .view-more a{
	display : inline-block;
	width : auto;
	height : auto;
	font-size : 20px;
	font-weight : 500;
	padding : 20px 50px;
}
.information .view-more a:hover{

}
.information .view-more a::after{
	right : 28px;
}
.information .view-more a:hover::after{

}
.training-container{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.training-container h4{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	color : #992200;
	font-size : 30px;
	font-weight : 600;
	margin-bottom : 50px;
}
.training-container h4 span{
	color : var(--font-color);
	font-size : 25px;
	font-weight : 500;
}


.training-container > ul{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 50px;
}
.training-container > ul > li{
	position : relative;
	display : list-item;
	width : 100%;
	height : auto;
	text-align : justify;
	color : #992200;
	font-size : 18px;
	margin-bottom : 20px;
	padding-left : 1.5em;
}
.training-container > ul > li:last-child{
	margin-bottom : 0;
}
.training-container > ul > li::before{
	content : "◼︎";
	position : absolute;
	display : block;
	line-height : 1;
	color : #992200;
	font-size : 30px;
	left : 0;
}
.training-container > ul > li > ul{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-top : 10px;
}
.training-container > ul > li > ul > li{
	position : relative;
	display : list-item;
	width : 100%;
	height : auto;
	text-align : justify;
	color : var(--font-color);
	font-size : 18px;
	margin-bottom : 10px;
	padding-left : 1em;
}
.training-container > ul > li > ul > li:last-child{
	margin-bottom : 0;
}
.training-container > ul > li > ul > li::before{
	content : "・";
	position : absolute;
	display : block;
	color : var(--font-color);
	left : 0;
}
.training-container ul p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : justify;
	color : var(--font-color);
	font-size : 18px;
}
.training-container ul span{
	color : #992200;
	font-weight : 600;
}

@counter-style maru-num{
	system: fixed;
	symbols: ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩;
	suffix: " ";
	fallback : decimal;
}
.training ol{
	list-style : none;
	counter-reset : my-counter;
	padding-left : 0;
	margin-top : 50px;
}
.training ol li{
	position : relative;
	text-align : justify;
	font-size : 25px;
	padding-left : 1em;
	margin-bottom : 20px;
}
.training ol li:last-child{
	margin-bottom : 0;
}
.training ol li::before{
	content : counter(my-counter, maru-num);
	counter-increment : my-counter;
	position : absolute;
	left : 0;
	color : var(--font-color);
	font-weight : bold;
}
/** flex **/
.training-container .flex{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
	margin-bottom : 100px;
}
.training-container .flex .box{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 80px;
}
.training-container .flex .box:last-of-type{
	margin-bottom : 0;
}
.training-container .flex .box:nth-of-type(1),
.training-container .flex .box:nth-of-type(2){
	position : relative;
	display : block;
	width : 48%;
	height : auto;
}
.training-container .flex .box .inner{
	position : relative;
	display : grid;
	grid-template-columns : repeat(2, 300px) 1fr;
	width : 100%;
	height : auto;
	gap : 30px;
}
.training-container .flex .box:nth-of-type(1) .inner,
.training-container .flex .box:nth-of-type(2) .inner{
	position : relative;
	display : grid;
	grid-template-columns : 300px 1fr;
	width : 100%;
	height : auto;
}
.training-container .flex .box .inner .image-box{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	aspect-ratio : 1;
}
.training-container .flex .box .inner .image-box.sp-box{
	display : none;
}
.training-container .flex .box .inner .image-box figure{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	aspect-ratio : 1;
}
.training-container .flex .box .inner .image-box figure img{
	position : relative;
	display : block;
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center center;
	border-radius : 15px;
	border : 2px solid #4199B5;
}
.training-container .flex .box h5{
	position : relative;
	display : flex;
	justify-content : center;
	align-items : center;
	width : 100%;
	height : auto;
	border-radius : 10px;
	background-color : #FDFBBD;
	line-height : 1;
	font-size : 25px;
	padding : 15px 10px;
	margin-bottom : 30px;
}
.training-container .flex .box h5 span{
	border-radius : 25px;
	background-color : #992200;
	color : #FFF;
	font-size : 16px;
	font-weight : normal;
	margin-left : 20px;
	padding : 5px 20px;
}
.training-container .flex .box h5 span.block{
background-color: transparent;
	color : var(--font-color);
	font-size : 25px;
	font-weight : bold;
	margin : 0 5px;
	padding : 0;
}
.training-container .flex .box .inner p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	color : #992200;
	font-size : 18px;
	padding-left : 1.5em;
	margin-bottom : 10px;
}
.training-container .flex .box .inner p::before{
	content : "◼︎";
	position : absolute;
	display : block;
	line-height : 1;
	color : #992200;
	font-size : 30px;
	left : 0;
}
.training-container .flex .box .inner ul{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding-left : 1em;
}
.training-container .flex .box .inner ul li{
	position : relative;
	display : list-item;
	width : 100%;
	height : auto;
	text-align : justify;
	color : var(--font-color);
	font-size : 18px;
	margin-bottom : 10px;
	padding-left : 1em;
}
.training-container .flex .box .inner ul li:last-child{
	margin-bottom : 0;
}
.training-container .flex .box .inner ul li::before{
	content : "・";
	position : absolute;
	display : block;
	color : var(--font-color);
	left : 0;
}
/* # =================================================================
#### 横スクロール
# ================================================================= */
.scroll-wrapper{
	position : relative;
	width : 100%;
	overflow : hidden;
}
.scroll-image{
	width : 100%;
	-webkit-overflow-scrolling : touch;
}
.scroll-image figure{
	margin : 0;
	padding : 0;
	width : 100%;
}
.scroll-image img{
	width : 100%;
	height : auto;
	vertical-align : bottom;
	pointer-events : none;
	user-select : none;
	-webkit-user-drag : none;
}
.scroll-wrapper::after,
.scroll-hint-img {
	display : none;
}





/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1500px
# ================================================================= */
@media screen and (max-width: 1500px){
.training-container .flex .box:nth-of-type(1),
.training-container .flex .box:nth-of-type(2){
	width : 100%;
}
}/*** 1500px ***/
/* # =================================================================
#### 1400px
# ================================================================= */
@media screen and (max-width: 1400px){
.training h3{
	font-size : 22px;
}
.information p{
	font-size : 18px;
}
.information .view-more a{
	font-size : 18px;
	padding : 15px 40px;
}
.information .view-more a::after{
	width : 10px;
	right : 20px;
}
.training-container h4{
	font-size : 24px;
	margin-bottom : 30px;
}
.training-container h4 span{
	font-size : 20px;
}
.training-container > ul > li > ul > li{
	font-size : 16px;
}
.training-container .flex .box h5{
	font-size : 22px;
}
.training ol li{
	font-size : 18px;
}







}/*** 1400px ***/
/* # =================================================================
#### 1240px
# ================================================================= */
@media screen and (max-width: 1240px){

}/*** 1240px ***/

/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){
.information .view-more{
	text-align : center;
}
.information .view-more a{
	font-size : 16px;
	padding : 20px 30px;
}
.information .view-more a::after{
	right: 12px;
}




/*****  *****/
.training-container .flex .box{
	margin-bottom : 50px;
}
.training-container .flex .box h5{
	display : block;
	text-align : center;
}
.training-container .flex .box h5 span{
	display : block;
	width : fit-content;
	margin : 10px auto 0;
}
.training-container .flex .box h5 span.block{
	display : block;
	margin : 10px auto;
}


/***** flex .box:nth-of-type(3) *****/
.training-container .flex .box:nth-of-type(3){

}
.training-container .flex .box:nth-of-type(3) .inner{
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	gap : 0;
}
.training-container .flex .box:nth-of-type(3) .inner .image-box{
	display : none;
}
.training-container .flex .box:nth-of-type(3) .inner .image-box.sp-box{
	display : block;
	width : 250px;
}
.training-container .flex .box:nth-of-type(3) .inner .image-box.sp-box figure{
	
}
.training-container .flex .box:nth-of-type(3) .inner .image-box.sp-box figure img{
	border : none;
}
.training-container .flex .box:nth-of-type(3) .inner .inner-box:last-of-type{
	width : calc(100% - 280px);
	padding-top : 50px;
}
/***** flex .box:nth-of-type(4) *****/
.training-container .flex .box:nth-of-type(4) .inner{
	display : flex;
	flex-wrap : wrap;
	justify-content : center;
	gap : 20px;
}
.training-container .flex .box:nth-of-type(4) .inner-box:nth-child(3){
	display : none;
}

.training-container .flex .box:nth-of-type(4) .inner-box:nth-child(1),
.training-container .flex .box:nth-of-type(4) .inner-box:nth-child(2){
	width : 250px
}


/***** flex .box:nth-of-type(5) *****/
.training-container .flex .box:nth-of-type(5) .inner{
	display : flex;
	flex-wrap : wrap;
	justify-content : flex-strat;
	gap : 0;
}
.training-container .flex .box:nth-of-type(5) .inner-box:nth-child(1),
.training-container .flex .box:nth-of-type(5) .inner-box:nth-child(2){
	width : 140px;
	margin-right : 15px;
}
.training-container .flex .box:nth-of-type(5) .inner-box:nth-child(3){
	width : calc(100% - 310px);
	padding-top : 30px;
}


}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){
.training h3{
	font-size : 22px;
	padding-bottom : 10px;
	margin-bottom : 15px;
}
.information p{
	font-size : 16px;
}
.training-container > ul > li > ul{
	margin-left : -1.5em;
}









.training-container .flex .box h5{
	font-size : 22px;
}
.training-container .flex .box .inner{
	gap : 20px;
}
/***** flex .box:nth-of-type(1) *****/
.training-container .flex .box:nth-of-type(1)
.inner, .training-container .flex .box:nth-of-type(2) .inner{
	grid-template-columns : 45% 1fr;
}
/***** flex .box:nth-of-type(3) *****/
.training-container .flex .box:nth-of-type(3) .inner .image-box.sp-box{
	width : 45%;
}
.training-container .flex .box:nth-of-type(3) .inner .inner-box:last-of-type {
	width : calc(100% - 45%);
	padding-top : 30px;
	padding-left : 20px;
}
/***** flex .box:nth-of-type(4) *****/
.training-container .flex .box:nth-of-type(4) .inner-box:nth-child(1),
.training-container .flex .box:nth-of-type(4) .inner-box:nth-child(2){
	width : 45%;
}
/***** flex .box:nth-of-type(5) *****/
.training-container .flex .box:nth-of-type(5) .inner-box:nth-child(1),
.training-container .flex .box:nth-of-type(5) .inner-box:nth-child(2){
	width : 23%;
	margin-right : 10px;
}
.training-container .flex .box:nth-of-type(5) .inner-box:nth-child(3){
	width : calc(100% - 46% - 20px);
	padding-top : 5px;
}

/*****  *****/
.training-container h4{
	font-size : 24px;
	text-align : center;
}
.training-container h4 span{
	display : block;
	font-size : 20px;
}
.training ol li{
	font-size : 18px;
}





/* # =================================================================
#### 横スクロール
# ================================================================= */
.scroll-wrapper::after{
	display : block;
	content : "";
	position : absolute;
	top : 0;
	right : 0;
	width : 30px;
	height : 100%;
	background : linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
	pointer-events : none;
	z-index : 2;
}

.scroll-image{
	overflow-x : auto;
	cursor : grab;
	-webkit-overflow-scrolling : touch;
}

.scroll-image.is-grabbing{
	cursor : grabbing;
}

.scroll-image figure{
	/* 600px以下になっても中身は600pxを維持（ガチガチ） */
	width : 1000px;
	padding-right : 50px;
}

.scroll-hint-img {
	display : block;
}
.scroll-hint-img{
	position : absolute;
	top : 50%;
	left : 50%;
	transform : translate(-50%, -50%);
	z-index : 3;
	pointer-events : none;
	user-select : none;
	-webkit-user-drag : none;
	transition : opacity 0.5s, visibility 0.5s;
	width : 80px;
}

.scroll-hint-img img{
	width : 100%;
	height : auto;
	opacity : 0.8;
}
}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){

}/*** 480px ***/
/* # =================================================================
#### 320px
# ================================================================= */
@media screen and (max-width: 320px){

}/*** 320px ***/