@charset "UTF-8";
/* CSS Document */


/************表示分岐****************/
#message_vi .pc{display: inline}
#message_vi .sp{display: none}
@media screen and (max-width: 1200px) {
#message_vi .pc{display: none}
#message_vi .sp{display: inline}
}



#message_vi{
	display: flex;
	align-items: center;
	width: 86vw;
	justify-content: space-between;
	position: relative;
	margin-bottom: 20px
}
@media screen and (max-width: 1920px) {
#message_vi{
	width: 100vw;
}
}
@media screen and (max-width: 1200px) {
	#message_vi{
	display: block;
	width: 100vw;
	margin-bottom: 20px
}
}

/************表示分岐****************/
.pc_sp{display: inline}
.sp_mini{display: none}
@media screen and (max-width: 330px) {
.pc_sp{display: none}
.sp_mini{display: inline}
}



#message_vi h2{
	font-size: 38px;
	line-height: 1.4em;
	margin-top: 10px;
	margin-bottom: 25px;
	text-shadow: 2px 2px 10px #fff ,
-2px 2px 10px #fff ,
2px -2px 10px #fff ,
-2px -2px 10px #fff;
}
@media screen and (max-width: 1200px) {
	#message_vi h2{
	font-size:1.7rem;
	margin-top: 5px;
	margin-bottom: 40px
}
}


#message_vi_title_area{
	text-align: left;
	position: absolute;
	z-index: 1;
	top: 28%;
	bottom: 0;
	margin: auto 0;
	left: calc(50% - 700px);
}
@media screen and (max-width: 1450px) {
	#message_vi_title_area{
		left: calc(50% - 45vw);
	}	
}

@media screen and (max-width: 1200px) {
#message_vi_title_area{
	position: relative;
	left: 0;
	margin-top: -10px;
	margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    padding-left: 1em;
    padding-right: 1em;
	}
}



#message_icon,
#person_icon{
	font-size: 18px;
	color: var(--red);
	font-weight: 500;
	padding-left:22px;
    position: relative;
    letter-spacing: -0.1em;
}
@media screen and (max-width: 1200px) {
	#message_icon,
	#person_icon{
		font-size: 0.9rem
	}
}

#message_en{
	font-family: "helvetica-neue-lt-pro", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 60px;
	color: var(--red);
	line-height: 1em;
}
@media screen and (max-width: 1200px) {
	#message_en{
		font-size: 2rem;
	}
}


#message_icon::before{
	content: '';
	background: url("../icon/message.svg") no-repeat;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 4px;
	margin: auto 0;
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background-size: contain;
}
#person_icon::before{
	content: '';
	background: url("../icon/interview.svg") no-repeat;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 4px;
	margin: auto 0;
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background-size: contain;
}



#message_name{
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6em
}
@media screen and (max-width: 1200px) {
	#message_name{
	font-size: 0.9rem;
		padding: 12px;
		width:fit-content;
		height:fit-content;
		line-height: 1.6em;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		margin: auto 0;
		background: rgba(255,255,255,.9);
		border-radius: 0 6px 6px 0	
}
}

#message_no{
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
	font-size:120px;
	color: var(--red);
	line-height: 1em;
	position: absolute;
	top: -50px;
	right: 30px;
	z-index: 1
}
@media screen and (max-width: 767px) {
	#message_no{
		font-size:4rem;
		top: -27px;
    	right: 11px;
	}
}


#message_name p{
		font-weight: 500
}
#main_bg{
	margin: 50px 0 0 auto;
	max-width: 1140px;
    max-height: 570px;
	aspect-ratio: 1140 / 570;
	object-fit: cover;
	position: relative
}
@media screen and (max-width: 1450px) {
	#main_bg{
	margin: 60px -20% 0 auto;
	max-width: 1140px;
    max-height: 570px;
	}
}
@media screen and (max-width: 1200px) {
	#main_bg{
		max-width: 100%;
        max-height: 100%;
		margin: 80px 0 0 auto;
		position: relative
}
}






#main_bg img{
		width: 100%;
		border-radius: 10px
}
@media screen and (max-width: 1920px) {
#main_bg img{
		border-radius: 10px 0px 0px 10px;
}
}
@media screen and (max-width: 1200px) {
	#main_bg img{
		border-radius: 0;
		width: 100%;
        object-fit: cover;
	}
}

.mt0{margin-top: 25px !important}

@media screen and (max-width: 767px) {
	#main_bg img{
		width: 100%;
        height: 130%;
        object-fit: cover;
	}
	.mt0{margin-top: 80px !important}
}

.pankuzu_mv{
	position: absolute; bottom: 0; left: 0; margin-bottom: 0
}
.mb30{margin-bottom: 30px}

/*******メッセージページではsectionのmarginを変更*******/
.message_txt section{
	margin: 10px 0 100px 0
}
@media screen and (max-width: 1200px) {
.message_txt section{
	margin: 10px 0 60px 0
}	
}

.message_txt .bold{
		font-weight: 600
}

.message_txt h3{
	font-size: 28px;
	margin-bottom: 25px

}
@media screen and (max-width: 1200px) {
	.message_txt h3{
	font-size: 1.5rem;
	line-height: 1.5em;
	margin-bottom: 15px
}
}

.indent1 {
	text-indent: -0.5em;
}

.m_left5{
	margin-left: -.5em
}
.ls{
	letter-spacing: -0.3em
}
.message_txt h4{
	font-size: 18px;
	font-weight: 600;
	position: relative;
	padding-left: 45px;
	margin-bottom: 10px;
	margin-top: 20px;
}
@media screen and (max-width: 1024px) {
.message_txt h4{
	font-size: 1rem;
	line-height: 1.6em
}
}



.message_txt h4:before{
	content: '';
	background: url("../img/message/border.svg") no-repeat;
	width: 36px;
	height: 1px;
	display: inline-block;
	position: absolute;
	left: 0;
	top: 13px;
}
.message_txt p{
	text-align: justify;
	line-height: 1.8em;
	margin-bottom: 12px
}
.cut_img{
	display: flex;
	align-items: center;
	column-gap: 15px
}
.radius{
	border-radius: 10px
}
@media screen and (max-width: 767px) {
	.cut_img{
		margin: 0 auto;
		column-gap: 10px
	}
	.cut_img img{
		width: 90px
	}
	.tr{
		margin-right: 0px;
		font-size: 1rem
	}
	.radius{
	width: 100%;
	margin-bottom: 10px
	}
	.logo_img img{
		width: 95%
	}
}

.club_name{
		font-weight: 600;
	display: block
}
.cut_img_box{
	display: flex;
	column-gap: 30px;
	margin: 20px 0
}



@media screen and (max-width: 767px) {
	.cut_img_box{
	flex-direction:column;
	column-gap: 10px;
	margin: 20px 0
	}
}


.right_box{
	display: flex;
	justify-content: flex-end;
	width: 100%
}
.message_img img{
	width: 100%;
	border-radius: 10px;
	aspect-ratio: 1 / 1;
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
.message_img img{
	width: 50%;
	margin: 0 auto !important;
	display: block
	}
}


.right_box .message_img{
	flex: 1;
	margin-right: 45px;
	margin-left: -160px
}
.message_contents{
	flex: 1.6;
}

@media screen and (max-width: 1024px) {
	.right_box{
		justify-content:flex-start;
		flex-direction: column;
		width: 100%
	}
	.right_box .message_img{
		flex: 1;
		margin-right: 0px;
		margin-left: 0px;
		margin-bottom: 12px
	}
	.message_contents{
		flex: 1;
	}
}

.left_box{
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.left_box .message_img{
	flex: 1;
	margin-left: 45px;
	margin-right: -160px;
	order: 2
}
.left_box .message_contents{
	flex: 1.5;
	order: 1
}

@media screen and (max-width: 1024px) {
	.left_box{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		}
	.left_box .message_img{
		flex: 1;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 12px;
		order: 1;
		width: 100%
		}
	.left_box .message_contents{
		flex: 1;
		order: 2
}
}

.align_center .message_txt .left_box,
.align_center .message_txt .right_box{
	align-items: center
}


#balloon_message{
	display: flex;
	column-gap: 40px
}
@media screen and (max-width: 767px) {
	#balloon_message{
		flex-direction: column
	}
}

#balloon_message h5 {
	color: #F27575;
	font-size: 26px;
	font-weight: 600;
	position: relative;
	margin-bottom: 15px;
	display: table
}
#balloon_message h5 span{
	position: relative;
}

@media screen and (max-width:767px) {
#balloon_message h5 {
	text-align: center;
	font-size: 1.5rem;
	margin: 0 auto 15px auto
	/*padding-left: 1em;*/
	}

#balloon_message h5 span{
	position: relative;
	padding-left: 1em;
	}
}

#balloon_message h5 span:before{
	content: '';
	background: url("../img/message/fukidashi_icon.svg") no-repeat;
	width: 0.9em;
	height: 0.9em;
	display: inline-block;
	background-size: cover;
	margin-right: 4px
}
@media screen and (max-width: 1024px) {
	#balloon_message h5:before{
		left: 1.2rem;
	}
}

.balloon{
	background: #fff;
	filter: drop-shadow( 3px 3px 15px rgba(0, 0, 0, .15));
	padding:40px 40px 	30px 40px;
	border-radius: 10px;
	position: relative;
	width: 100%
}
@media screen and (max-width: 1024px) {
	.balloon{
		padding:30px 20px;
}
}


.balloon::before {
  background-color: #fff;
  content: "";
  height: 30px;
  position: absolute;
  width: 30px;
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
	.circle_img{
		width: 210px;
	}
	.circle_img img{
		width: 100%;
	}
}
	
@media screen and (max-width: 767px) {
	.balloon::before {
		display: none
	}
	.circle_img{
	text-align: center;
}
	.circle_img img{
	width: 150px;
		display: block;
		margin: 0 auto 15px auto
}
}

.balloon-left::before {
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  left: -20px;
  top:110px;
}
@media screen and (max-width: 1023px) and (min-width: 768px) {
	.balloon-left::before {
  top:60px;
}
}


.float_right{
	float: right;
	margin:9px 0 0 18px
}
@media screen and (max-width: 1024px) {
.float_right{
	float: none;
	display: block;
	width: 50%;
	margin:20px auto
}	
}
@media screen and (max-width: 767px) {
.float_right{
	float: none;
	display: block;
	width: 100%;
	margin:20px 0
}	
}

.clear{ clear: both}




#message_en_footer{
	font-family: "helvetica-neue-lt-pro", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 60px;
	color: var(--red);
	line-height: 1em;
	margin:0 0 -10px 20px
}
@media screen and (max-width: 1024px) {
	#message_en_footer{
		font-size: 3rem;
		margin:0 0 -8px 15px
	}
}


.job{
	border: 1px var(--border) solid;
    border-radius: 30px;
    display: table;
    padding: 4px 20px 5px 20px;
    line-height: 1.3em;
	text-align: center;
	margin-bottom: 9px
}

.two_job{
	display: flex;
    column-gap: 5px;
}

.person_margin{
	margin-top: 120px !important
}

.question{
	font-size: 17px;
	font-weight: 600;
	line-height: 1.6em !important
}
@media screen and (max-width: 1024px) {
	.question{
	font-size:1rem;
}
}

.pink{
	color: #F27575;
	font-weight: 600
}

#schedule{
	background: var(--beige);
	max-width: 800px;
	margin: 0 auto;
	padding: 60px 90px
}
#sche_title{
	text-align: center;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 5px;
}
#sche_title:before{
	content: '';
	background: url("../img/person/title_time.svg") no-repeat;
	display: inline-block;
	width: .9em;
	height: .9em;
	 background-size: contain;
}

.ribbon1 {
  display:table;
  position: relative;
  height: 38px;/*リボンの高さ*/
  line-height: 38px;/*リボンの高さ*/
  text-align: center;
  padding: 0 30px;/*横の大きさ*/
  background: #E48352;/*塗りつぶし色*/
  color: #FFF;/*文字色*/
  box-sizing: border-box;
	font-size: 22px;
	margin: 0 auto

}

.ribbon1:before, .ribbon1:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon1:before {
  top: 0;
  left: 0;
  border-width: 18px 0px 25px 15px;
  border-color: transparent transparent transparent var(--beige);
  border-style: solid;
}

.ribbon1:after {
  top: 0;
  right: 0;
  border-width: 18px 15px 25px 0px;
  border-color: transparent var(--beige) transparent transparent;
  border-style: solid;
}

.sche{
	font-size: 18px;
	line-height: 1.8em;
	margin: 35px 0 0 0 ;
	position: relative
}
#kirinuki{
	position: absolute;
	right: 70px;
    top: -116px;
}
.sche dt,
.sche dd{
	border-top: 2px #ACACAC dotted
}
.sche dt:last-of-type,
.sche dd:last-of-type{
	border-bottom: 2px #ACACAC dotted
}
.sche dt{
	color: #E48352;
	width: 15%
}
.sche dd{
	width: 85%
}
.am9{ display: flex; align-items:center;width: 65px;}
.am9:before{
	content: '';
	background: url("../img/person/watch/9.svg") no-repeat;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin:3px 0 0 0;
	background-size: cover;
}
.cyu{ font-size:14px}

.sonota{
		font-size: 24px;
		text-align: center;
		margin: 80px 0 0px 0
}

.ceo_box{
	display: flex;
	justify-content: center;
	column-gap: 30px;
	margin: 20px 0
}
@media screen and (max-width: 767px) {
	.ceo_box{
	justify-content: center;
		flex-direction: column;
	column-gap: 30px;
	margin: 20px 0
}
}

.illust_bg{
	background: var(--beige);
	border-radius: 10px;
	padding: 20px 50px;
	display: table;
	margin: 20px auto;
	width: auto;
	max-width: 940px;
	width: 100%
}
@media screen and (max-width: 767px) {
	.illust_bg{
		padding: 30px;
		max-width:420px;
		width: 100%
}
	
}

.illust_bg img{
	width: 100%
}

@media screen and (max-width: 767px) {
	.illust_bg img{
	max-width: 500px;
	width: 100%
	}	
}