@charset "utf-8";
main {
    position: relative;
    min-height: 100vh;
    background: url(../images/bg_ten_meanings.jpg) no-repeat;
    background-size: 100%;
    background-position: center top 400px;
}

.content_area {
    max-width: 1920px;
    padding: 0 0 100px;
}
.grad_line_h3 {
    margin: 0 0 33px;
}

.grad_line_h3::before {
    content: attr(data-label-en);
    position: absolute;
    bottom: 52px;
    left: 0;
    font-family: 'Caveat', cursive;
    font-size: 2.4rem;
    font-weight: 400;
    color: #FA6060;
    line-height: 1;
    letter-spacing: 0;
}


.benefits_catch {
    padding-top: 100px;
    margin-bottom: 100px;
}

.benefits_catch_txt {
    text-align: center;
}

.benefits_catch_txt p {
    font-size: 2.0rem;
}

@media screen and (max-width: 1024px) {

    .benefits_catch {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

}

@media (max-width: 768px) {
	main {
        background-position: right top 400px;
        background-size: 300%;
    }
	
	.grad_line_h3::before {
	    top: -1.2em;
	    font-size: 2.0rem;
	}

	.benefits_catch {
        padding-top: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin: 40px 0;
    }

    .benefits_catch_txt p {
        font-size: 1.4rem;
    }

}


/* ===== コネクシオカレッジ =================== */

#college.college {
    padding: 80px 0;
}

.college__head {
    margin-bottom: 30px;
}

.college__label-en {
    margin: 0 0 4px;
    font-family: "Caveat", "Segoe Script", system-ui;
    font-size: 1.8rem;
    color: #ff7043;
}

.college__title {
    margin: 0;
    font-size: 3.0rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: #0084DD;
}

/* 写真＋説明文 */
.college__intro {
    display: flex;
    gap: 40px;
	align-items: center;
    margin-bottom: 80px;
}

.college__photo {
    flex: 0 0 48%;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
}

.college__photo img {
    display: block;
    width: 100%;
    height: auto;
}

.college__text {
    flex: 1 1 auto;
    font-size: 1.6rem;
    line-height: 1.9;
}

/* キャッチコピー */
.college__message {
    margin: 40px 0 20px;
    text-align: center;
    font-size: 2.6rem;
    font-weight: 500;
}

.college__message p {
    margin-bottom: 20px;
}


.college__em {
    color: #0084DD;
    font-weight: 700;
}

/* 教育ボックス */
.college__education {
    text-align: center;
}

.college-edu {
    max-width: 940px;
    margin: 0 auto;
    background: #f5fbff;
}

.college-edu__head {
    padding: 10px;
    font-size: 1.8rem;
    font-weight: 700;
    color: #006FBC;
    background: #E7F6FC;
}

.college-edu__body {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
	background: #006FBC;
    padding: 20px 17px;
    gap: 16px;
}

.college-edu__item {
	display: flex;
    align-items: center;     
    justify-content: center;  
    flex-direction: column;
    padding: 16px 8px;
    font-size: 2.0rem;
    line-height: 1.5;
    background: #ffffff;
    text-align: center;       
}
.college-edu__item:first-child {
    border-left: none;
}

.college-edu__item span {
    font-size: 1.6rem;
}

/* ＋ と 理念ボックス */
.college__plus {
    margin: 10px 0 12px;
    font-size: 3.6rem;
    font-weight: 700;
	line-height: 1;
    color: #929292;
}

.college-vision {
    max-width: 940px;
    margin: 0 auto;
    padding: 11px;
    border: 2px solid #006FBC;
    font-size: 1.9rem;
    color: #006FBC;
}

/* =========================================
   キャリア形成フォローのための研修と制度
========================================= */

#career-support.career-support {
    padding: 80px 0;
}

.career-support__head {
    margin-bottom: 24px;
}

.career-support__label-en {
    margin: 0 0 6px;
    font-family: 'Caveat', cursive;
    font-size: 1.8rem;
    color: #ff7043; /* オレンジ系 */
}

.career-support__title {
    margin: 0;
    font-size: 3.0rem;
    font-weight: 700;
    line-height: 1.5;
    color: #006FBC;
}

.career-support__lead {
    margin-bottom: 32px;
    font-size: 1.6rem;
}

.career-support__lead-title {
    margin-bottom: 32px;
    font-size: 2.0rem;
    font-weight: 500;
	color: #006FBC;
}

.career-support__lead-num {
    font-size: 3.6rem;
    font-weight: 700;
    color: #FA6060; 
    margin-right: .1em;
}

.career-support__program {
    max-width: 100%;
    margin: 0 auto;
}

.career-program__inner {
    position: relative;
    display: flex;
    overflow: hidden;
	background: linear-gradient(273deg, rgba(255, 0, 140, 0.60) -34.31%, rgba(255, 220, 146, 0.60) 98.41%);
}

.career-program__col {
    position: relative;
    z-index: 2;
    padding: 26px 40px 30px;
    color: #333;
    line-height: 1.9;
    font-size: 1.6rem;
}

.career-program__col--left {
    text-align: left;
}

.career-program__col--right {
    text-align: left;
}

.career-program__title {
    margin: 0 0 10px;
    font-size: 1.6rem;
    font-weight: 700;
    color: #333;
	text-align: center;
}

.career-program__text {
    margin: 0;
	line-height: 1.4;
}




/* ============================
   入社時研修（新卒社員向け）
============================ */

.training-newcomer {
    padding: 80px 0;
}

.training-newcomer__head {
    margin-bottom: 20px;
}

.training-newcomer__label-en {
    font-family: "Caveat", cursive;
    font-size: 1.8rem;
    color: #ff7043;
    margin: 0 0 4px;
}

.training-newcomer__title {
    font-size: 3.0rem;
    color: #0084DD;
    margin: 0;
    font-weight: 700;
    border-bottom: 3px solid #0084DD;
    display: inline-block;
    padding-bottom: 6px;
}

.training-newcomer__lead {
    font-size: 1.5rem;
    line-height: 1.9;
    margin: 24px 0 40px;
}

/* --- カード3つ横並び --- */

.training-newcomer__cards {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

/* --- カード本体 --- */

.training-card {
    flex: 1 1 calc(33.333% - 20px);
    background: #ffffff;
    border-radius: 24px;
    padding: 30px 26px 40px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    text-align: center;
}

.training-card__title {
	min-height: 3em;
    font-size: 2rem;
	line-height: 1.2;
    color: #ff5c5c;
    margin: 0;
    font-weight: 700;
}

.training-card__sub {
    font-size: 1.6rem;
}

.training-card__icon {
	display: flex;
    justify-content: center;
    margin-bottom: 30px;
    height: 75px;
}

.training-card__icon img {
    width: 80px;
    height: auto;
}

.training-card__text {
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: left;
	margin: 0;
}

.training-card__text span {
    font-size: 1.4rem;
}

/* --- SP レイアウト --- */
@media (max-width: 768px) {

    .training-newcomer {
        padding: 60px 0;
    }

    .training-card {
        flex: 1 1 100%;
    }

    .training-card__title {
        font-size: 1.8rem;
    }
}

.online-study {
	padding: 50px 0 0;
}

.mentor-system {
	padding: 50px 0 0;
}

.arrow-bar{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr; 
  min-height: 180px;                      
  align-items: stretch;
}

/* 左：右側が尖った形（> 方向） */
.arrow-bar__left{
  clip-path: polygon(0 0, /* 左上 */ 93% 0, /* 右上（尖り手前） */ 100% 50%, /* 右 وسط（尖り） */ 93% 100%, /* 右下（尖り手前） */ 0 100%, /* 左下 */ 0 50% /* 左 وسط */);
  background: linear-gradient(273deg, rgba(245, 181, 187, 1) -34.31%, rgba(255, 220, 146, 0.60) 100%);
}

/* 右：右端が尖った形（> 方向） */
.arrow-bar__right {
    clip-path: polygon(0 0, 93% 0, 100% 50%, 93% 100%, 0 100%, 6% 50%);
    background: linear-gradient(273deg, rgba(255, 0, 140, 0.60) -34.31%, rgba(245, 188, 188, 1) 100%);
}

/* 白い帯（背景） */
.arrow-bar__center::before{
  content:"";
  position:absolute;
  inset: 0;
  background:#fff;
  clip-path: polygon(
    20% 0,   /* 左上 */
    60% 0,   /* 右上 */
    80% 50%, /* 右 وسط */
    60% 100%,/* 右下 */
    20% 100%,/* 左下 */
    40% 50%  /* 左 وسط：へこみ */
  );
}

/* ===== SP：1列（縦）＆下向き矢印 ===== */
@media (max-width: 768px){


}

/* SP レイアウト */
@media (max-width: 768px) {

    #career-support.career-support {
        padding: 50px 0;
    }

    .career-support__title {
        font-size: 2.4rem;
    }

    .career-support__lead-title p {
        font-size: 1.8rem;
    }

    .career-program__inner {
        flex-direction: column;
        border-radius: 26px;
    }

    .career-program__inner::before {
        display: none; /* スマホは斜線を消してシンプルに */
    }

    .career-program__col {
        width: 100%;
		height: 240px;
    }
	
	.career-program__col--left {
        padding: 20px 18px 70px;
    }
	
	.career-program__col--right {
        padding: 55px 18px 80px;
    }
	

  .arrow-bar{
    grid-template-columns: 1fr;      
    grid-template-rows: 1fr 1fr;
    height: auto;                   
  }

  /* 縦に積むので左右は上下に */
  .arrow-bar__left{
    /* 下向き矢印（下が尖る） */
    clip-path: polygon(
      0 0,
      100% 0,
      100% 85%,
      50% 100%,
      0 85%
    );
  }

  .arrow-bar__right{
clip-path: polygon(
  0 0,        /* 左上 */
  0 0,      /* へこみ手前 */
  50% 15%,    /* へこみ底（ここを調整） */
  100% 0,      /* へこみ後 */
  100% 0,     /* 右上 */
  100% 85%,   /* 右下手前 */
  50% 100%,   /* 下の尖り */
  0 85%       /* 左下手前 */
);
  }	
	
}


/* ===== SP レイアウト ===== */
@media (max-width: 768px) {

    #college.college {
        padding: 50px 0;
    }

    .college__title {
        font-size: 2.4rem;
        letter-spacing: .12em;
    }

    .college__intro {
        flex-direction: column;
        gap: 20px;
		margin-bottom: 40px;
    }

    .college__photo {
        flex-basis: auto;
    }

    .college__message {
        font-size: 1.8rem;
    }

    .college-edu__body {
        grid-template-columns: repeat(2, 1fr);
    }

    .college-edu__item {
		min-height: 140px;
		font-size: 1.8rem;
    }
	
	.college-edu__item span {
		font-size: 1.4rem;
	}
	
	.college-vision {
		font-size: 1.6rem;
	}
	
}


/* =========================
   Benefits page
========================= */

/* 1ブロック（画像＋本文） */
.benefits-row{
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 64px;
  align-items: center;
  margin: 0 0 80px;
}

/* 右に画像を置くパターン */
.benefits-row--img-right{
  grid-template-columns: 1fr 400px;
}

.benefits-row__media{
  margin: 0;
}

.benefits-row__media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
  object-fit: cover;
}

/* テキスト側 */
.benefits-row__body{
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: 8px;
}

/* 見出し＋本文（ライン付き） */
.benefits-item__title{
  margin: 0 0 10px;
  font-size: 2.0rem;
  font-weight: 500;
  color: #0084DD;
  border-bottom: 3px solid #BAE2FE;
}

.benefits-item__text{
  font-size: 1.45rem;
  line-height: 1.9;
  color: #333;
}

.benefits-item__text p{
  margin: 0 0 10px;
}
.benefits-item__text p:last-child{
  margin-bottom: 0;
}


/* =========================
   Responsive
========================= */
@media (max-width: 1024px){
  .benefits-row{
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .benefits-row--img-right{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px){
	.benefits_catch {
		padding-top: 60px!important;
	}
	
  .benefits-row{
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 56px;
  }

  /* SPは画像→本文の順に統一（必要なら） */
  .benefits-row--img-right .benefits-row__media{
    order: -1;
  }

  .benefits-row__body{
    gap: 18px;
    padding-top: 0;
  }

  .benefits-item__title{
    font-size: 1.7rem;
  }
}