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

 /* ===== Reset / Base ===== */
/*    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }*/

/*
    body {
      font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
      background: #f5f5f5;
      color: #333;
      padding: 60px 0;
    }
*/

    /* ===== Section wrapper ===== */
/*
    .section {
      max-width: 104%;
      margin: 0;
      padding: 0;
		position: relative;
		z-index: 10;
    }
*/



    /* ===== Swiper outer ===== */
    /* コンテンツ幅からはみ出たスライドを薄くするためのラッパー */
    .swiper-outer {
      position: relative;
    }

    /*
      左右のフェードマスク
      コンテンツ幅の端 = .swiper-outer の左右端
      ここにグラデーションオーバーレイを重ねる
    */
/*
    .swiper-outer::before,
    .swiper-outer::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 80px;        フェード幅 
      z-index: 10;
      pointer-events: none;
    }
    .swiper-outer::before {
      left: 0;
      background: linear-gradient(to right, #f5f5f5 0%, transparent 100%);
    }
    .swiper-outer::after {
      right: 0;
      background: linear-gradient(to left, #f5f5f5 0%, transparent 100%);
    }
*/

    /* ===== Swiper コンテナ ===== */
    .swiper {
      overflow: visible; /* はみ出し許可 */
      width: 100%;
		position: relative;
		left: calc( -6.668% - 20px );
		
    }
	 .swiper.m01 {
      overflow: visible; /* はみ出し許可 */
      width: 100%;
		position: relative;
		left: 0;
		
    }

    /* ===== スライドカード ===== */
    .swiper-slide {
      width: 340px;        /* 固定幅 */
		width: 53.334%;
		height: auto;
		
		
		
/*      transition: opacity 0.4s ease;*/
    }

    /*
      コンテンツ幅外（完全に外れたスライド）を薄くする。
      Swiper が付与する .swiper-slide-visible でアクティブ範囲を判定。
      watchSlidesProgress: true + slidesPerView: auto で動作。
    */
/*
    .swiper-slide:not(.swiper-slide-visible) {
      opacity: 0.3;
    }
*/

    .card {
      display: block;
      text-decoration: none;
      
		background: #fff;
/*		background: rgba(230,140,248,1.00);*/
		
/*      border-radius: 8px;*/
      overflow: hidden;
/*
      box-shadow: 0 2px 12px rgba(0,0,0,.08);
      transition: box-shadow 0.3s ease, transform 0.3s ease;
*/
    }
    .card:hover {
/*      box-shadow: 0 8px 28px rgba(0,0,0,.15);*/
			transform: translateY(-3px);
			transition-duration: .5s;
		
    }

/*
    .card__img {
      width: 100%;
      aspect-ratio: 8 / 5;
      object-fit: cover;
      display: block;
    }

    .card__body {
      padding: 16px 20px 20px;
    }

    .card__date {
      font-size: .75rem;
      color: #888;
      margin-bottom: 8px;
    }

    .card__title {
      font-size: .95rem;
      font-weight: bold;
      line-height: 1.55;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
*/

    /* ===== ナビゲーションボタン ===== */
    /* コンテンツ幅からはみ出す = .swiper-outer の外側に配置 */
    .swiper-button-prev,
    .swiper-button-next {
      position: absolute;
      top: calc( 100% - 10px );
      transform: translateY(-50%);
      z-index: 20;
      width: 30px;
      height: 30px;
/*
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 2px 8px rgba(0,0,0,.18);
*/
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, opacity 0.2s;
    }
/*
    .swiper-button-prev:hover,
    .swiper-button-next:hover {
      background: #f0f0f0;
    }
*/
/*
    .swiper-button-prev { left: -22px; }
    .swiper-button-next { right: -22px; }
*/
	 .swiper-button-prev { left: 20px; }
    .swiper-button-next { right: 20px; }

    /* Swiper デフォルトの矢印アイコンをリセット */
/*
    .swiper-button-prev::after,
    .swiper-button-next::after {
      font-size: 14px;
      font-weight: bold;
      color: #333;
    }
*/

    /* disabled */
    .swiper-button-disabled {
      opacity: 0.35;
      pointer-events: none;
    }
	 
	 
	 
	 
/* デフォルト矢印を非表示 */
.swiper-button-prev::after,
.swiper-button-next::after {
display: none;
}

/* SVG画像を背景で指定 */
.swiper-button-prev {
background-image: url('https://cpug.jp/cpu2026/wp-content/themes/cpu0507/common/img/top/slider_btn_l.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 30px 30px;
}

.swiper-button-next {
background-image: url('https://cpug.jp/cpu2026/wp-content/themes/cpu0507/common/img/top/slider_btn_r.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 30px 30px;
}


/* SVG画像を背景で指定 */
.swiper3-prev {
background-image: url('https://cpug.jp/cpu2026/wp-content/themes/cpu0512/common/img/top/slider_btn_l2.svg');
background-repeat: no-repeat;
background-position: top center;
background-size: 30px 30px;
}

.swiper3-next {
background-image: url('https://cpug.jp/cpu2026/wp-content/themes/cpu0512/common/img/top/slider_btn_r2.svg');
background-repeat: no-repeat;
background-position: top center;
background-size: 30px 30px;
}


/* SVG画像を背景で指定 */
.swiper3-prev2 {
background-image: url('https://cpug.jp/cpu2026/wp-content/themes/cpu0514/common/img/top/slider_btn_l3.svg');
background-repeat: no-repeat;
background-position: top center;
background-size: 60px 60px;
}

.swiper3-next2 {
background-image: url('https://cpug.jp/cpu2026/wp-content/themes/cpu0514/common/img/top/slider_btn_r3.svg');
background-repeat: no-repeat;
background-position: top center;
background-size: 60px 60px;
}




    /* ===== Responsive ===== */
	 /*
    @media (max-width: 768px) {
      .section { padding: 0 20px; }
      .swiper-slide { width: 280px; }
      .swiper-button-prev { left: -16px; }
      .swiper-button-next { right: -16px; }
      .swiper-outer::before,
      .swiper-outer::after { width: 40px; }
    }
	 */





.slider_ph1{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;

	border: 1px solid #000;
	/*		border-collapse: collapse;*/
	box-sizing: border-box;
}

.slider_ph1.m01{
	overflow: hidden;
}
.ph_pa1{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
}
/* タイトルフォーマット */
.tf1 {
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;

	font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.slider_title1{
	color:#000;
	font-weight: 600;
	font-size: 20px;
	line-height:101%;
	font-feature-settings: "palt";/*（自動カーニング）*/
	letter-spacing: 0.04em;
	text-align: left;
	padding: 16px 0 15px;
}
.slider_txt1 p{
	color:#000;
	font-weight: 600;
	font-size: 14px;
	line-height:101%;
	font-feature-settings: "palt";/*（自動カーニング）*/
	letter-spacing: 0.04em;
	text-align: left;
	margin: 0;
	margin-bottom: 10px;
	margin-bottom: 15px;
}
.slider_txt1 p:nth-child(1) {
	font-size: 15px;
}
@media screen and (max-width: 600px) {
.page_title1 {
	font-size: 6.8vw;
	line-height:101%;
}
}










/* =============================
   ▼ スライダー 3
   「被さって出てくる」 creative effect
============================= */
.overlay-slider-wrap {
  clear: both;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  position: relative;
  
  overflow: hidden; /* ← はみ出しを隠す */
  background: #111;
  background: #595857;
/*  background: rgba(218,143,255,1.00);*/
}
.overlay-slider_bottom{
	clear: both;
	width: 100%;
	height: 30px;
	height: 60px;
	margin: 0;
	padding: 0;
	
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	
	background: #595857;
}
/*
.overlay-slider_bottom.m01{
	background: rgba(116,194,108,1.00);
}
.overlay-slider_bottom.m02{
	background:rgba(220,211,112,1.00);
}
*/
.overlay-swiper {
  width: 100%;
  position: absolute!important;
  top: 0;
  left: 0;
}
.overlay-swiper .swiper-slide {
  width: 100%;
/*  height: 520px;*/
  height: auto;
  position: relative;

}
.overlay-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* スライドの上に載るテキスト */
.overlay-slide-caption {
  position: absolute;
  bottom: 40px;
  left: 40px;
  z-index: 5;
  color: #fff;
}
.overlay-slide-caption .cat {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 8px;
}
.overlay-slide-caption .ttl {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.03em;
}
/* 暗いグラデーション */
/*
.overlay-swiper .swiper-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
  z-index: 2;
}
*/
/* ナビボタン（スライダー3専用） */
.overlay-nav_bg{
	clear: both;
	width: 100%;
	height: 60px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: -60px;
	left: 0;
	
	z-index: 999!important;
	pointer-events: none;
	
/*	background: rgba(156,198,241,1.00);*/
}
.overlay-nav{
	clear: both;
	width: calc( 100% - 40px );
	width: 100%;
	height: 30px;
	height: 60px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	
	
/*	background: rgba(156,198,241,1.00);*/
}
.swiper3-prev,
.swiper3-next {
	width: 30px;
	height: 30px;
	cursor: pointer;
	
	pointer-events:auto;
}
.swiper3-prev2,
.swiper3-next2 {
	width: 60px;
	height: 60px;
	cursor: pointer;
	
	pointer-events:auto;
}
.creative_arrow_txt2.m01 {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.creative_arrow_txt2.m01.is-visible {
  opacity: 1;
}

/*
.overlay-nav_bg .creative_arrow_txt2{
	pointer-events:none;
}
.overlay-nav_bg .creative_arrow_txt2 a{
	pointer-events:auto;
}
*/

/*
.overlay-nav-prev:hover,
.overlay-nav-next:hover {
  background: rgba(255,255,255,0.3);
}
.overlay-nav-prev { left: 20px; }
.overlay-nav-next { right: 20px; }
.overlay-nav-prev::before,
.overlay-nav-next::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.overlay-nav-prev::before { transform: rotate(-135deg) translateX(-2px); }
.overlay-nav-next::before { transform: rotate(45deg) translateX(-2px); }
.overlay-nav-prev.swiper-button-disabled,
.overlay-nav-next.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ページネーション（スライダー3） */
/*
.overlay-swiper .swiper-pagination {
  bottom: 16px;
}
.overlay-swiper .swiper-pagination-bullet {
  background: rgba(255,255,255,0.5);
  opacity: 1;
}
.overlay-swiper .swiper-pagination-bullet-active {
  background: #fff;
}
*/

/* =============================
   ラベル
============================= 
.demo-label {
  display: inline-block;
  background: #222;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  margin-bottom: 12px;
}
*/