@charset "utf-8";

/*背景色 緑*/
.bg_color_gr {
    background-color: #f3fcd6;
	/*background-color: #edfbcb;*/
}

/*外枠 画像・テキスト横並び*/
.train_kusatsu_box {
	background-color: #fff;
	display: flex;
	border-radius: 10px;
	border: 1px solid #5ab333;
	margin: 25px 0 25px 0;
}

/*画像*/
.train_kusatsu_box .train_kusatsu_photo {
	width: 40%;
    margin: 15px;
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* 画像を中央表示 */
.train_kusatsu_box .train_kusatsu_photo {
　　overflow: hidden;
   position: relative;
}

.train_kusatsu_box .train_kusatsu_photo::before {
  content: "";
  display: block;
  padding-top: 58%;
}

.train_kusatsu_box .train_kusatsu_photo img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* タイトル・説明テキスト */
.train_kusatsu_box .train_kusatsu_textBox {
	margin: 10px 20px 0 20px;
    padding: 0;
}

/* タイトル */
.train_kusatsu_box .train_kusatsu_textBox .train_kusatsu_title {
  margin: 0;
  padding: 0;
  font-weight: bold;
  border-bottom: 2px solid #80cd43;
  letter-spacing: 2px;
  color: #666666;
}

.heading05 {
	position: relative;
	padding-bottom: 50px;
	font-size: 18px;
}

.heading05::before {
	content: attr(data-en);
	display: block;
	/*color: #008e3f;*/
	color: #5ab333;
	/*font-size: 25px;*/
	font-size: 2.5rem;
	text-transform: uppercase;
}

span.title_dt {
     position: relative;
     padding-left: 1em;
}
span.title_dt::after {
     position: absolute;
     top: 50%;
     left:-2px;
     transform:translateY(-50%);
     content: '';
     width: 15px;
     height:1px;
     background-color: #000;
}

.train_kusatsu_box .train_kusatsu_textBox .train_kusatsu_title span.title_gr {
	color: #008e3f;
	font-size: 25px;
}

.train_kusatsu_box .train_kusatsu_textBox .train_kusatsu_title span.title_dt {
	font-size: 18px;
}

/* 説明テキスト */
.train_kusatsu_box .train_kusatsu_textBox .train_kusatsu_text {
  margin: 20px 0 0;
  padding: 0 20px 0 0;
}

/* スーツさん動画部分 */
/*外枠 画像・テキスト横並び*/
.k_onsen_box {
	background-color: #fff;
	display: flex;
	border-radius: 10px;
	border: 1px solid #5ab333;
	margin: 25px 0 25px 0;
}

/*画像*/
.k_onsen_box .train_kusatsu_photo {
	width: 40%;
    margin: 15px;
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* 画像を中央表示 */
.k_onsen_box .train_kusatsu_photo {
　　overflow: hidden;
   position: relative;
}

.k_onsen_box .train_kusatsu_photo::before {
  content: "";
  display: block;
  padding-top: 58%;
}

.k_onsen_box .train_kusatsu_photo img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* タイトル・説明テキスト */
.k_onsen_box .k_onsen_textBox {
	margin: 10px 20px 0 20px;
    padding: 0;
}

/* タイトル */
.k_onsen_box .k_onsen_textBox .k_onsen_title {
  margin: 0;
  padding: 0;
  font-weight: bold;
  border-bottom: 2px solid #80cd43;
  letter-spacing: 2px;
  color: #666666;
}

.heading06 {
	position: relative;
	padding-bottom: 50px;
	font-size: 18px;
}

.heading06::before {
	content: attr(data-en);
	display: block;
	/*color: #008e3f;*/
	color: #5ab333;
	/*font-size: 25px;*/
	font-size: 2.5rem;
	text-transform: none;
}

span.title_dt {
     position: relative;
     padding-left: 1em;
}
span.title_dt::after {
     position: absolute;
     top: 50%;
     left:-2px;
     transform:translateY(-50%);
     content: '';
     width: 15px;
     height:1px;
     background-color: #000;
}

.k_onsen_box .k_onsen_textBox .k_onsen_title span.title_gr {
	color: #008e3f;
	font-size: 25px;
}

.k_onsen_box .k_onsen_textBox .k_onsen_title span.title_dt {
	font-size: 18px;
}

/* 説明テキスト */
.k_onsen_box .k_onsen_textBox .k_text {
  margin: 20px 0 0;
  padding: 0 20px 0 0;
}

.k_onsen_box .movie_box iframe {
	border-radius: 0 10px 10px 0;
}

/* SP */
@media screen and (max-width:767px){ 
	.train_kusatsu_box {
		display:block;
		width: 94%;
    	margin: auto;
	}
	
	/* SP 画像サイズ */
	.train_kusatsu_box .train_kusatsu_photo {
		width: 90%;
    	margin: 15px auto;
    	padding: 0;
    	overflow: hidden;
    	position: relative;
	}
	
	/* SP テキストサイズ　レイアウト */
	.train_kusatsu_box .train_kusatsu_textBox .train_kusatsu_title {
		text-align: center;
		padding-bottom: 5px;
	}
	
	.train_kusatsu_box .train_kusatsu_textBox .train_kusatsu_text {
  		margin: 15px 0 15px 0;
		padding: 0;
	}
	
	 span.title_dt::after {
     	display:none;
	}

	.heading05 {
		position: relative;
		padding-bottom: 50px;
		font-size: 1.9rem;
	}
	
	.heading05::before {
		font-size: 1.9rem;
	}
	
	span.title_dt {
    	padding:0;
	}
	
	.train_kusatsu_box .train_kusatsu_textBox .train_kusatsu_title span.title_dt {
		font-size: 1.6rem;
	}
	
	/* スーツさん動画部分 */
	/* SP 画像サイズ */
	.k_onsen_box {
		display: block;
		width: 94%;
       margin: auto;
	}
	
	.k_onsen_box .train_kusatsu_photo {
		width: 90%;
    	margin: 15px auto;
    	padding: 0;
    	overflow: hidden;
    	position: relative;
	}
	
	/* SP テキストサイズ　レイアウト */
	.k_onsen_box .k_onsen_textBox .k_onsen_title {
		text-align: center;
		padding-bottom: 5px;
	}
	
	.k_onsen_box .k_onsen_textBox .k_text {
  		margin: 15px 0 0 0;
		padding: 0;
	}
	
	 span.title_dt::after {
     	display:none;
	}

	.heading06 {
		position: relative;
		padding-bottom: 50px;
		font-size: 1.9rem;
	}
	
	.heading06::before {
		font-size: 1.8rem;
	}
	
	span.title_dt {
    	padding:0;
	}
	
	.k_onsen_box .k_onsen_textBox .k_onsen_title span.title_dt {
		font-size: 1.6rem;
	}
	
	.k_onsen_box .movie_box {
		padding: 0 15px 15px 15px;
	}
	
	.k_onsen_box .movie_box iframe {
	width:100%;
	border-radius: 0;
	max-width: 480px;
    height: auto;
    aspect-ratio: 16/9;
}
}






