/* パンくず上の下線を非表示 */
.ptitle_t2{
	border-bottom: 0px solid #565757 !important;
	border: 0px solid #565757 !important;
}

/* ページタイトル少し下げる */
.ptitle_t2{
	padding-top: 0px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 0px !important;
}

/* パンくずの下のマージン調整 */
.pblock-kuzu{
	margin-top: 35px !important;
	margin-bottom: 35px !important;
}

/* ページタイトル位置 */
.ptitle__title {
	border: 0px solid red;
	width: 100%;
	max-width: 840px;
	height: 55px;
/*	position: absolute;*/
/*	right: 187px;*/
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 1199px) {
.ptitle__title {
	width: 100%;
	max-width: 840px;
/*    top: 40%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
}
}
@media (max-width: 768px) {
.ptitle__title {
	width: 90%;
    font-size: 1.05em;
}
}

.cl-title img{
 transform-origin: center top;
    animation: yurayura 2s  ease-out  forwards;
    animation-delay: 1s;
}
@keyframes yurayura {
  0% { transform: rotate(0); }
  25% { transform: rotate(-5deg); }
  50%{ transform: rotate(5deg);  }
  75% { transform: rotate(-5deg); }
 100%{ transform: rotate(0);}
}

/* 電車の上下*/
@keyframes shaking {
    0% {      translate: 0 0;   }
    20% {       translate: 0 1px;    }
    40% {       translate: 0 0;   }
    60% {       translate: 0 1.5px;   } 
    80% {       translate: 0 0;   }
    100% {       translate: 0 0    }
}
.train-anime{
  animation: shaking 1s linear infinite;
}

/* unit_side_imgareaの独自設定 */

.unit_side_imgarea {
    align-items: center;
}
.unit_image_grid div{
    text-align: center;
}
.unit_side_imgarea .text_wrap{
    width: 65%;
}

/* unit_image_gridの独自設定 */
@media (max-width: 768px){
.unit_image_grid.i_02.cl_top{
    grid-template-columns: 1fr;
    grid-gap: 20px;
}
.unit_image_grid.i_02.cl_top div{
    width: max(80%, 500px);
    margin: 0 auto;
}
}

  /* ページトップ 　サブステージ画像（下層サブステージ）*/
 .ptitle{
	width: 99.6vw; /* 親要素幅を超える */
	margin: 0 calc(50% - 50vw); /* 親要素幅を超える */
	height: 380px;
	background: url(/campuslife/image/cl-top-bg2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
    background-position: center center;
    position: relative;
    z-index: 0;
	overflow: hidden;
}

@media (max-width: 768px) {
 .ptitle {
	height: 200px;
}
}

/* 画像個別指定 */
 .ptitle::after {
    background: url(/campuslife/image/cl-top-bg2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
@media (max-width: 1199px) {
 .ptitle::after {
	width: 60%;
	text-align: center;
}
}

/* タイトル色指定 */
 .ptitle__title{
    color: #fff !important;
    font-weight: normal;
    font-size: clamp(26px, 0.493rem + 5.18vw, 70px);
}


/* -------ページ内　各エリアの背景 --------*/
/* 背景が親要素を超える */
.cl_pagetop_area, .cl_student01_area, .cl_student02_area, .cl_lunch_area{
	width: 99.6vw; /* 親要素幅を超える */
	margin: 0 calc(50% - 50vw); /* 親要素幅を超える */
}

/* 背景divが親要素を超えたことにより、中のpblockのサイズ指定が効かなくなったためwrapでサイズ再設定 */
.cl_pagetop_wrap, .cl_student01_wrap, .cl_student02_wrap, .cl_lunch_wrap, .l_b_link_wrap{
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
    padding: 0;
    margin: 60px auto 10px auto;
    line-height: 1.9;
    letter-spacing: 0.03em;
    font-size: 16.5px;
    max-width: 1000px;
}

}
@media (max-width: 1200px){
.l_b_link_wrap{
    margin: 60px 40px;
}
}
/* 1000px以下の時のwrap設定 */
@media (max-width: 999px){
    .cl_pagetop_wrap, .cl_student01_wrap, .cl_student02_wrap, .cl_lunch_wrap, .l_b_link_wrap {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1em;
    padding: 10px;
}
.cl_lunch_wrap{
    padding: 10px 0;
}
}
@media (max-width: 499px){
.l_b_link_wrap{
    margin: 0;
    padding:0;
}
}

/* 高専生の１日　ページトップ（紹介します）エリア */

/* ページトップ背景*/
.cl_pagetop_area{
    background: url(/campuslife/image/cl-title-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 250%;
    padding-bottom: 80px;
}
.cl-title, .subtitle{
    text-align: center;
    max-width:100%;
}
.subtitle{
    margin: 60px 0;
    padding: 0 1em;
}
@media (max-width: 768px){
    .cl-title img {
    width: min(65%, 400px);
}
.subtitle{
    margin: 30px 0;
}
.cl_pagetop_area {
    padding-bottom: 40px;
}
}

/*---- 学生の一日のスケジュールエリア ----*/
/* エリア内共通 */

/*画像wrap*/
.unit_side_imgarea.student .img_wrap img {
  width: 100%;
}
.unit_side_imgarea.student{
    display: flex;
}
.unit_side_imgarea.student .img_wrap img {
    width: auto;
    padding: 1em 0 0;
}
.img_wrap.student{
    width: 35%;
    text-align: center;
}
.cl_student01_area , .cl_student02_area{
    padding: 80px 0;
}
.cl_student01_wrap, .cl_student02_wrap{
    position: relative;
    transform: translate3d(0, 0, 0);
}
/* 自転車・電車の設定 */
.vehicle_img.bike, .vehicle_img.train {
    width:min(40%, 550px);
    position: absolute;
    height: 330px;
    right: 10px;
    top: -3%;
    z-index: 2;
}
/* ジグザグ背景 */
.vehicle_img.bike, .vehicle_img.train{
    background: url(/campuslife/image/jiguzagu.png);
    background-repeat: no-repeat;
    background-size: 55%;
    background-position: left 200px;
}
@media(max-width:768px){
.vehicle_img.bike, .vehicle_img.train {
    height: 200px;
    right: -2px;
    top: -8%;
}
.vehicle_img.bike, .vehicle_img.train{
    background-position: bottom 12% right ;
}
}
.vehicle_img img{
    width: 100%;
}
.bike_img{
    position: absolute;
    width: max(100px, 35%);
    bottom: -25%;
    left: 0;
}
.bike-fade-in{
  transform: translate(300px, -200px);
}
.bubble-orange, .bubble-green{
    position: absolute;
    width: min(75%, 400px);
    bottom: -7%;
    right: 0;
}
.train_img{
    position: absolute;
    width: max(140px, 45%);
    bottom: -25%;
    left: 10%;
}
@media(max-width:768px){
.bike_img{
    bottom: -35%;
}
.train_img{
    bottom: -34%;
    left: -13px;
}
}
@media(max-width:499px){
.bubble-orange, .bubble-green{
    width: 150px;
    bottom: 3%;
}
}

/* ○○通学ラベル */
.st_box_label{
    margin-bottom: 2em;
    width: clamp(300px, 50%, 400px);
}
.st_box_label img{
    width: 100%;
}
.st_title{
    background-color : #fff;
    width: clamp(300px , 300px + 10vw , 100% );
    border-radius: 10px;
    padding-right: 20px;
    margin-bottom: -10px; /* 下のボックスに重ねる */
}
@media (max-width: 768px){
.cl_student01_area, .cl_student02_area {
    padding: 40px 0;
}
    .st_title{
    width: 100%;
}
}

/* 個別設定 */
span.orange , span.green{
    font-weight: bold;
    font-size: 1.1em;
}
span.orange{
    color: #f79f2c;
}
span.green{
    color: #00913a;
}

/* Aさん　背景色*/
.cl_student01_area{
    background: #fef4e8 ;
}
/* Bさん　背景色*/
.cl_student02_area{
    background: #eff9ea ;
}

/* -------------------タイムラインの設定--------------*/
.cl_timeline_zone{
  line-height: 1.5em;
    background: #fff;
   /*  font-family: '游ゴシック';*/
    padding: 1.5em 0;
} 
.timeline_box{
    width: 80%;
    margin: 0 auto;
}
.tl_border{
    width: 95%;
    border-bottom: dashed 3px;
    margin: 0 auto;
}
.timeline {
  list-style: none;
  box-sizing: border-box;
    margin: 2em auto;
    position: relative;
    padding-left: 130px !important;
}
.timeline::before{
	content: "";
    width: 5px;
    height: 95%;
    margin-left: -26.5px;
    display: block;
    position: absolute;
    top: 25px;
    left: 120px;
    border-radius: 10px;
}
.timeline li {
  width: 100%;
  margin: 0 0;
  padding: 5px 0;
  position: relative;
}
.timeline span.time {
  width: 5em;
  display: inline-block;
  margin-left: -8em;
  padding: 0 0 5px;
  margin-top: 15px;
  vertical-align: top;
  position: relative;
  text-align: right;
  box-sizing: border-box;
  font-size: 1.2em;
  font-weight: bold;
}
.timeline span.time::after {
  content: "";
  position: absolute;
  right: -35px;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 10px;
}

/* タイムライン　色設定 */
  /* オレンジ */
.timeline.orange::before, .timeline.orange span.time::after {
    background: #f79f2c;
}
 .timeline.orange span.time {
    color : #f79f2c;
}
.tl_border.orange{
  /* 破線オレンジ */
    border-color: #efbf6a;
}
  /* グリーン */
.timeline.green::before, .timeline.green span.time::after{
    background: #00913a;
}
 .timeline.green span.time {
    color : #00913a;
}
.tl_border.green{
  /* 破線グリーン */
    border-color: #bdd6b8;
}

.timeline .tl_box {
  display: inline-block;
  width: 100%;
  margin-left: 30px;
  padding: 15px 10px 15px 30px;
  vertical-align: middle;
  box-sizing: border-box;
  border-radius: 6px;
}
.timeline .tl_title {
  font-size: clamp(16px , 1em + 0.8vw , 22px);
  font-weight: 700;
}
.timeline .tl_tx {
  padding: 5px 0; 
  font-size: clamp(14px , 0.9em , 16px);
  font-weight: bold;
}
@media (max-width: 768px){
    .timeline_box{
    width: 100%;
}
.timeline::before {
    margin-left: -17.5px;
    height: 96%;
}
.timeline .tl_box {
    padding: 10px 10px 10px 30px;
}
}

/* -------------------時間割 timetable--------------*/
.unit_side_imgarea.timetable{
    display: flex;
}
.unit_side_imgarea.timetable .img_wrap img {
    width: auto;
    padding: 1em 0 0;
}
.unit_side_imgarea.timetable .img_wrap:fitst-child{
    padding-bottom: 1em;
}
.img_wrap.timetable{
    width: 100%;
    text-align: center;
    margin: 40px 0;
}
@media (max-width: 999px){
.unit_side_imgarea.timetable{
padding: 0 20px;
}
}
@media (max-width: 768px){
.unit_side_imgarea.timetable .img_wrap img:fitst-child{
    width: max(60%, 380px);
}
}
.course_linkbtn_grid{
    margin: 60px auto;
}

/* -------------------ランチについて--------------*/
.cl_lunch_sideborder{
    max-width: 90vw;
    margin: 0 auto;
    box-sizing: content-box;
    border-right: 80px solid #f7384a;
    border-left: 80px solid #f7384a;
}
.lunch_top{
    margin: 0 auto;
    text-align: center;
    width: min(80%, 600px);
    margin-bottom: 60px;
    margin-top: 60px;
}
.lunch_top img{
    width: 100%;
    max-width: fit-content;
}
.lunch_title_img{
    margin-bottom: 60px;
    margin-top: 60px;
}
@media(max-width:768px){
.lunch_title_img{
    margin-top: 0px;
}
}
@media(max-width:499px){
.lunch_top{
    margin-bottom: 40px;
    margin-top: 0;
}
}
/* メニュー紹介 */
.lunch_menu_text{
    text-align: right;
    font-weight: bold;
    /* font-family: "游ゴシック", "游ゴシック体", YuGothic; */
    margin-bottom: 2.5em;
}
@media(min-width:1000px){
.lunch_menu{
    background: url(/campuslife/image/lunch-bg-right.png);
    background-repeat: no-repeat;
    background-position:top 0 right 0;
    background-size: 50%;
}
}
@media(max-width:999px){
.lunch_menu{
    background: url(/campuslife/image/lunch-bg-right-sp.png);
    background-repeat: no-repeat;
    background-position: top 110px right -50px;
        background-size: 400px;
}
}
@media(max-width:768px){
.lunch_menu_text{
    font-size: .8em;
}
.lunch_menu{
        background: url(/campuslife/image/lunch-bg-right-sp.png);
        background-repeat: no-repeat;
        background-position: right -70px top 0;
        background-size: 300px;
}
}
@media(max-width:499px){
.lunch_menu p{
    margin-bottom: 1.5em;
    font-size: .8em;
}
.snack_f_small{
        font-size: .8em;
        display: block;
        margin-top: -10px;
}
.lunch_menu{
        background: url(/campuslife/image/lunch-bg-right-sp.png);
        background-repeat: no-repeat;
        background-position: right -85px top 65px;
        background-size: 274px;
}
}

@media(max-width:399px){
.lunch_menu{
        background: url(/campuslife/image/lunch-bg-right-sp.png);
        background-repeat: no-repeat;
        background-position: right -85px top 170px;
        background-size: 274px;
}
}
/* 各メニューパートの設定 */
.lunch_menu .rice,
.lunch_menu .noodles,
.lunch_menu .snack{
    width: 55%;
    font-weight: bold;
    font-family: "游ゴシック", "游ゴシック体", YuGothic, sans-serif;;
    padding-bottom: 6em;
    margin-left: 0.5em;
    line-height: 2.8;
}
/* スナックの下は狭く */
.lunch_menu .snack{
    padding-bottom: 3em;
}
.lunch_menu .rice img,
.lunch_menu .noodles img,
.lunch_menu .snack img{
    padding-bottom: 1em;
}
@media(max-width:999px){
.lunch_menu .rice,
.lunch_menu .noodles,
.lunch_menu .snack{
    margin-left: 1.5em;
}
}
@media(max-width:768px){
.lunch_menu .rice,
.lunch_menu .noodles,
.lunch_menu .snack{
    width: 70%;
    padding-bottom: 4em;
    line-height: 2.2;
}
.lunch_menu .snack{
    padding-bottom: 1em;
}
.lunch_menu .rice img,
.lunch_menu .noodles img,
.lunch_menu .snack img{
    height: 50px;
    width: auto;
}
}
.churros_img{
  max-width:130px
}
@media(max-width:768px){
.lunch_menu .snack img.churros_img{
    height: auto;
    width: 80px;
    position: relative;
    padding: 0;
}
.l_lunch{
    display:block;
}
}
@media(max-width:499px){
.lunch_menu .snack img.churros_img{
    width: 50px;
}
}

.lunch_menu div ul li{
    display: inline-block;
    margin-right: 1.2em;
    font-size: clamp(16px, 1em + 0.25vw, 23px);
    /* text-shadow: 1px 1px 7px #fff; */
    background: rgb(255 255 255 / 0.8);
    border-radius: 17px;
    padding: 0 .5em 0 0;
}
.img_menu_btn{
    text-align: center;
    width: min(80% ,600px);
    margin: 0 auto;
}
.img_takeout{
    text-align: center;
    width: min(90%, 900px);
    margin: 0 auto;
}
.img_menu_btn img, .img_takeout img{
    width: fit-content;
    padding-bottom: 4em;
}
.img_menu_btn a[href*=".pdf"]::after {
   display:none !important;
}

/* ランチメニューサイドのボーダー設定 */
@media (max-width: 999px){
.cl_lunch_sideborder{
    border-right: 50px solid #f7384a;
    border-left: 50px solid #f7384a;
}
}
@media (max-width: 499px){
.cl_lunch_sideborder{
    border-right: 20px solid #f7384a;
    border-left: 20px solid #f7384a;
}
}

@media (max-width: 768px){
.unit_side_imgarea.timetable .img_wrap img:fitst-child{
    width: max(60%, 380px);
}
}

.course_linkbtn_grid{
    margin: 60px auto;
}

/* --------------------- ページ下部リンク群 --------------------- */
.l_b_link_area a::after{
    display: none !important;
}
.unit_image_grid.i_07{
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
  /*i_07はレスポンシブで4枚ずつに*/
@media (max-width: 768px){
.unit_image_grid.i_07 {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}

.unit_image_grid.i_07.l_b_link{
    grid-gap: 20px;
}
.l_b_link a img{
    border-radius: 10%;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.35);
    transition: .4s;
}
.l_b_link a img:hover{
    background-color: #b0e5d8 ;
    box-shadow:none;
}
.l_b_link a:hover{
    opacity: 1 !important;
}
@media(max-width:768px){
.unit_image_grid.i_07.l_b_link{
    grid-gap: 10px;
}
}