@charset "utf-8";


/*:::::::: desktop :::::::*/


/****** fade script ******/

.fade-in {
	opacity: 0;
	transition-duration: 500ms;
	transition-property: opacity, transform;
  }
  
  .fade-in-up {
	transform: translate(0, 50px);
  }
  
  .fade-in-down {
	transform: translate(0, -50px);
  }
  
  .fade-in-left {
	transform: translate(-50px, 0);
  }
  
  .fade-in-right {
	transform: translate(50px, 0);
  }
  
  .scroll-in {
	opacity: 1;
	transform: translate(0, 0);
  }
  

/****** /fade script end ******/

/* common */

:root {
    --color-low: #6355A1;
	--color-eco: #00B0EC;
	--color-com: #00AC6F;
	--color-letters: #EB007F;
	--color-policy: #00ABAB;
	--color-white: #fff;
	--main_font_color: #000;
	--font_xl: 2.0rem;
	--font_ll: 1.5rem;	
	--font_l: 1.125rem;
	--font_m: 1.0rem;
	--font_s: 0.875rem;
	--font_ss: 0.750rem;
    }

.red {
	color:#FF0B00;
}

.other_area > * {
  color:var(--main_font_color) ;
  line-height: 1.7;
  font-family: YakuHanJP, 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}

.other_area p {
  color:var(--main_font_color) !important;
  line-height: 1.7 !important;
  font-family: YakuHanJP, 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}

.other_area p a {
  color:#3369e7;
  border-bottom: 1px solid #3369e7;
}

.other_area p a:hover {
  color:#3369e7;
  border-bottom: 0;
  opacity: 0.8;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.other_head_area,
.other_cont {
	width:100%;
}

.other_inner {
	width: min(90%, 1200px);
	margin:0 auto 90px;
}

.other_head_area {
	height:calc(100vh - 100px);
	background: url(/common_d/connect/future/other/img/2025/hero.jpg) no-repeat center/cover;	
	position: relative;
}

.tit_wrap {
	position: absolute;
	bottom:40%;
	margin-bottom:0;
	padding-bottom: 0;	
}

.other_head_area .tit_wrap .other_head_cate {
	margin:0 0 1rem 1rem;
}
.other_head_area .tit_wrap .other_head_cate span {
	font-size:var(--font_m);
	color:var(--color-white);
	background-color: #D8262D;
	padding:2px 6px;
}

.other_head_area ul {
	margin-bottom:0;
	padding-bottom: 0;
}

.other_head_area li {
	margin:0;
	line-height:48px;
}

.other_head_area li span {
	background-color: var(--color-white);
	font-weight:bold;
	font-size: 48px;
	/*border-radius: 0 10px 0 0;*/
	padding-left:0.2em;
}




.other_inner .lead {
	text-align: center;
	margin-bottom:60px;
}

.other_inner h2 {
	text-align: center;
	margin-bottom:30px;
}

.other_inner h2 span {
	color: #0033A1;
	font-weight: bold;
	font-size:var(--font_xl);
	margin-bottom:60px;
	padding:0 .4em .2em;
    border-bottom: 3px dotted #0033A1;
}


.other_manabi_wrap {
	width: 100%;
	margin:30px auto 0;
	display: flex;
	justify-content: space-between;
	padding:30px;
	background-color: #f3f4f7;
	border-radius: 20px;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .2);
}

.other_manabi_wrap .col01,
.other_manabi_wrap .col02,
.other_manabi_wrap .col03 {
	width:30%;
}

.fac_low,
.fac_eco,
.fac_com,
.fac_letters,
.fac_policy {
	color: var(--color-white);
	font-weight: bold;
	font-size: var(--font_l);
	border-radius: 10px;
	text-align: center;
	padding: 10px 0;
}

.fac_low {
	background-color: var(--color-low);
}

.fac_eco {
	background-color: var(--color-eco);
}

.fac_com {
	background-color: var(--color-com);
}

.fac_letters {
	background-color: var(--color-letters);
}

.fac_policy {
	background-color: var(--color-policy);
}

.other_manabi_wrap .col01 li:last-child,
.other_manabi_wrap .col02 li:last-child,
.other_manabi_wrap .col03 li:last-child {
	font-size: var(--font_s);
}

.other_manabi_wrap .col01 li:nth-child(2),
.other_manabi_wrap .col02 li:nth-child(2),
.other_manabi_wrap .col03 li:nth-child(2) {
	font-weight: bold;
	text-align: center;
	font-size: var(--font_ll);
	margin:10px auto;
}

.class_tit {
	font-weight: bold;
	text-align: center;
	margin:10px auto 0.5em;
}



/* 右肩上がり */

.section01{ 
	padding-bottom: calc(10vw + 10px);  
    position: relative;
    overflow: hidden;
    /* background-color:#fff; */
	padding-top: 60px;
	background-image: linear-gradient(to top, #e7f0f8 0%, white 100%);
}

.section01::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 10vw solid #f5f5f5;  /* 三角をグレーにする */ 
  border-left: 100vw solid transparent;
}

.section02{ 
  padding-bottom: calc(10vw + 10px);  
    position: relative;
    overflow: hidden;
    background-color:#f5f5f5;}

.section02::before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 10vw solid #fff;  /* 三角を白にする */ 
  border-left: 100vw solid transparent;
}


.section01 {
    background-color: #fff;
}



.tit_acc {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--main_font_color);
	font-size: var(--font_ll);
	font-weight:bold;
}

.tit_acc::before,
.tit_acc::after {
    width: 3px;
    height: 40px;
    background-color: var(--main_font_color);
    content: '';
}

.tit_acc::before {
    transform: rotate(-35deg);
    margin-right: 30px;
}

.tit_acc::after {
    transform: rotate(35deg);
    margin-left: 30px;
}

.course_wrap {
	margin:90px auto;
	display: flex;
	justify-content: space-between;
	width:80%;
	max-width: 1000px;
}

.course_col01,
.course_col02 {
	width:48%;
}

.course_col01 h3,
.course_col02 h3 {
	font-weight: bold;
	font-size: var(--font_l);
	margin-bottom:1em;
}

.tit_sub {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--main_font_color);
	font-weight: bold;
	margin-bottom: 0.5em;
}
.tit_sub::before,
.tit_sub::after {
    width: 3px;
    height: 18px;
    background-color: var(--main_font_color);
    content: '';
}

.tit_sub::before {
    transform: rotate(-35deg);
    margin-right: 15px;
}

.tit_sub::after {
    transform: rotate(35deg);
    margin-left: 15px;
}

.first_year,
.third_year {
	margin:0;
	padding: 0;
	display: flex;
	align-items: center;
}

.first_year dt,
.third_year dt {
	width: 70px;
}

.first_year dd,
.third_year dd {
	margin:0 0 0 1rem;
}

.first_year dt img,
.third_year dt img {
	width:100%;
}

.course_col01 .kougi {
	width: 100%;
	padding:0;
	margin:0 auto;
	display: flex;
	justify-content: space-between;
}

.course_col01 .kougi li {
	width:30%;
	padding:3px 0;
	text-align: center;
	border: 1px solid #0033A1;
	color:#0033A1;
	background-color: var(--color-white);
} 

.gakumon {
	margin-bottom:60px;
}

.course_col02 img {
	width: min(100%, 350px);
	display: block;
	margin:auto;
}

.kouryu {
	text-align: center;
}
.kouryu img {
	width: min(100%, 800px);
}

.voice_wrap {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top:60px;
}

.voice_col01, 
.voice_col02 {
	width:47%;
}

.voice_col02 img {
	border-radius: 10px;
	width:100%;
}

.voice_tit {
	margin-bottom: 0.5em;
}
.voice_tit span {
	color: var(--color-white);
	font-weight: bold;
	font-size: var(--font_s);
	padding:2px 6px;
	background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.voice_col01 h4 {
	font-size: var(--font_s);
	font-weight: bold;
	padding-bottom:5px;
	border-bottom: 1px solid #5851DB;
	margin-bottom: 0.5em;
}

.voice_col01 h5 {
	font-size: var(--font_l);
	font-weight: bold;
	margin-bottom: 0.5em;
}

.voice_col01 h5 span {
	color:#5851DB;
}

.voice_col01 .prof {
	margin-top:1em;
	font-size: var(--font_s);
}


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media (min-width: 1024px) and (max-width: 1279px) {

.other_head_area {
    height: 50vh;
}	

.other_manabi_wrap {
    width: 90%;
}	

.section02 {
    padding-top: 60px;
}

.course_wrap {
    margin: 60px auto;
    width: 100%;
}


/* end */
}



/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
tab ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media (min-width: 768px) and (max-width: 1023px) {

.other_head_area {
    height: 50vh;
}

.other_head_area li {
    line-height: 30px;
}

.other_head_area li span {
    font-size: 28px;
}

.other_inner .lead {
    text-align: left;
}

.other_inner .lead br {
	display: none;
}

.section02 {
	padding-top:60px;
}

.course_wrap {
    width: 100%;
}

.course_col01 {
    width: 55%;
}

.course_col02 {
    width: 40%;
}

.course_col01 li {
    width: 32%;
}

.voice_wrap {
    display: block;
}

.voice_col01, .voice_col02 {
    width: 100%;
}

.voice_col01 {
	margin-bottom: 45px;
}

.voice_col02 img {
	width: 70%;
	margin:auto;
	display: block;
}


/* tab end */
}



/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
mobile ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media (max-width: 767px) {

.other_head_area {
    height: calc(100vh - 60px);
}	

.other_head_area li span {
		font-size: 1.5rem;
		padding: 0 0.2em;
}

.other_head_area li {
    line-height: 30px;
}

.other_head_area .tit_wrap .other_head_cate {
    margin: 0 0 1rem 0.5em;
}

.other_head_area .tit_wrap .other_head_cate span {
    font-size: var(--font_s);
}

.section01 {
    padding-top: 45px;
}

.other_inner {
    width: min(90%, 1200px);
    margin: 0 auto 60px;
}

.other_inner .lead {
    text-align: left;
    margin-bottom: 30px;
}

.other_inner h2 {
    margin-bottom: 20px;
}

.other_inner h2 span {
    font-size: var(--font_l);
    margin-bottom: 30px;
}

.tit_acc {
    font-size: var(--font_m);
}

.tit_acc::before {
    margin-right: 15px;
}

.tit_acc::after {
    margin-left: 15px;
}

.tit_acc::before, 
.tit_acc::after {
    height: 20px;
}

.other_manabi_wrap {
    width: 98%;
    display: block;
}

.other_manabi_wrap .col01, .other_manabi_wrap .col02, .other_manabi_wrap .col03 {
    width: 100%;
}

.other_manabi_wrap .col01, 
.other_manabi_wrap .col02 {
    margin-bottom:45px;
}

.fac_low, .fac_eco, .fac_com, .fac_letters, .fac_policy {
    font-size: var(--font_m);
    padding: 6px 0;
}

.other_manabi_wrap .col01 li:nth-child(2), .other_manabi_wrap .col02 li:nth-child(2), .other_manabi_wrap .col03 li:nth-child(2) {
    margin: 0px auto;
}

.other_manabi_wrap .col01 li:last-child, .other_manabi_wrap .col02 li:last-child, .other_manabi_wrap .col03 li:last-child {
    font-size: 14px;
}

.section02 {
    padding-top: 45px;
}

.course_wrap {
    margin: 45px auto;
    display: block;
    width: 100%;
}

.course_col01, .course_col02 {
    width: 100%;
}

.course_col01 h3, 
.course_col02 h3 {
    font-size: var(--font_m);
    margin-bottom: 0;
}

.tit_sub {
    margin-bottom: 0.8em;
}

.course_col01 li {
    width: 32%;
}

.course_col01 {
	margin-bottom:45px;
}

.course_col02 img {
    width: min(80%, 350px);
}

.voice_wrap {
    display: block;
}

.voice_col01, .voice_col02 {
    width: 100%;
}

.voice_col01 {
    margin-bottom: 45px;
}

.voice_col01 h5 {
    font-size: var(--font_m);
}

.first_year, 
.third_year {
    align-items: center;
	margin-bottom: 1rem;
}

.first_year dd span, 
.third_year dd span {
	display: block;
}

/* mobile end */
}


