:root{
  --blue:#005ea8;
  --navy:#17395c;
  --light:#f5f7fa;
  --border:#e5e7eb;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Yu Gothic","Meiryo",sans-serif;
  background:var(--light);
  color:#333;
  line-height:1.8;
}

.hero{
background:
linear-gradient(
to bottom,
rgba(0, 94, 168, 0.15) 0%,
rgba(0, 94, 168, 0.50) 50%,
rgba(0, 94, 168, 0.15) 100%
),
url("202601.png") center/cover no-repeat;
color:#fff;
padding:100px 20px;
}

.hero-inner{
max-width:1100px;
margin:auto;
transform: translateY(-40px);
}
	
.hero-sub{
letter-spacing:.1em;
font-size:1.8rem;
}

.hero h1{
  margin-top:10px;
  font-size:clamp(2.8rem,6vw,5rem);
  text-align:left;
}

.hero p{
  margin-top:15px;
  font-size:1.2rem;
  text-align:left;
}

.sp-only{
  display:none;
}

.container{
  max-width:1100px;
  margin:auto;
  padding:20px 20px 80px;
}

.info{
  background:#fff;
  border-radius:20px;
  padding:35px;
  margin-top:-100px;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

.info-item strong{
  display:block;
  color:var(--navy);
}

.event-date{
font-size:1.2rem;
font-weight:bold;
}


.section{
  background:#fff;
  border-radius:20px;
  padding:30px;
  margin-top:30px;
  box-shadow:0 5px 20px rgba(0,0,0,.04);
}

.section-title{
  color:var(--navy);
  font-size:1.2rem;
  margin-bottom:20px;
}

.tabs{
  display:flex;
  gap:8px;
  background:#eef2f7;
  border-radius:14px;
  padding:5px;
  margin-bottom:35px;
}

.tab-btn{
  flex:1;
  border:none;
  background:transparent;
  padding:14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}

.tab-btn.active{
  background:#fff;
  color:var(--blue);
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.tab-content{
  display:none;
}

.tab-content.active{
  display:block;
}


#entry,
#cpd,
#access{
  scroll-margin-top:100px;
}

.cpd-description{
  margin-bottom:25px;
  color:#555;
}

.cpd-grid{
 display:flex;
 gap:20px;
 justify-content:center;
 flex-wrap:nowrap;
 margin-top:20px;
}

.cpd-item{
 width:180px;
 background:#fff;
 border:1px solid var(--border);
 border-radius:16px;
 text-align:center;
 overflow:hidden;
 flex-shrink:0;
}

.cpd-item::before{
  content:"";
  display:block;
  height:4px;
  background:linear-gradient(
    90deg,
    var(--navy),
    var(--blue)
  );
}

.cpd-name{
  padding:20px 15px 15px;
  font-size:1rem;
  font-weight:bold;
  color:var(--navy);
}

.cpd-value{
  border-top:2px dotted #b9c8d8;
  margin:0 15px;
  padding:15px 0;
  font-size:2rem;
  font-weight:bold;
  color:var(--blue);
  line-height:1;
}

.cpd-value span{
  font-size:0.45em;
}

.cpd-target{
  font-size:1.5rem;
}

.cpd-notice{
  background:#f7f9fc;
  border:1px solid #d9e4f1;
  border-radius:12px;
  padding:20px 15px;
}

.cpd-notice h4{
  color:var(--navy);
  margin-bottom:10px;
}

.cpd-notice ul{
  padding-left:20px;
}



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

  .cpd-grid{
    flex-direction:column;
    align-items:center;
    grid-template-columns:1fr;
   }

  .cpd-item{
  width:100%;
  max-width:220px;
  }

  .cpd-name{
   font-size:1rem;
   }

  .cpd-value{
  font-size:2rem;
  }

  .cpd-target{
   font-size:1.5rem;
  }
}



.ceremony-card{
padding-top:5px !important;
padding-bottom:5px !important;
}

.card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:25px;
  margin-bottom:20px;
  overflow: hidden;
}

.card h3:not(.program-title){
  color:var(--navy);
  margin-bottom:10px;
}

.button{
  display:inline-block;
  background:var(--blue);
  color:#fff;
  text-decoration:none;
  padding:14px 28px;
  margin-top:15px;
  border-radius:999px;
  font-weight:bold;
}

.sub-tabs{
  display:flex;
  gap:30px;
  border-bottom:1px solid var(--border);
  margin-bottom:25px;
}

.sub-btn{
  background:none;
  border:none;
  cursor:pointer;
  padding-bottom:10px;
  font-weight:700;
  color:#666;
}

.sub-btn.active{
  color:var(--navy);
  border-bottom:2px solid var(--blue);
}

.program-table{
width:100%;
border-collapse:collapse;
table-layout:fixed; 
}

.program-table td{
border:none;
vertical-align:top;
padding:16px 10px;
border-bottom:1px solid var(--border);
line-height:1.6;
}

.program-table tr:last-child td {
border-bottom: none;
}

.panel-session .program-table td{
border-bottom:none;
}



@media  screen and (max-width:768px),
   tr,
   td{
   display:block;
   width: 100%;
   }
}



.time{
white-space:nowrap;
color:var(--navy);
font-weight: bold;
}
 
.title{
text-align:left;
line-height:1.4;
}

.presenter{
text-align:right;
line-height:1.4;
}

.presenter-company {
display: inline-block;
max-width: 100%;
text-align: left;
font-size: 0.85rem;
color: #666;
margin-bottom: 2px;
}
	
.presenter-name {
display: block;
font-weight: bold;
color: #333;
text-align:right;
}
	

.lecture-title{
font-weight: bold;
color: #333;
}
 
.material{
text-align:center;
vertical-align: middle; 
}
	
.material-button {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: var(--blue); 
color: #FFF;
border-bottom: solid 3px var(--navy); 
border-radius: 4px;
font-size: 0.9rem;
font-weight: bold;
white-space: nowrap;
transition: all 0.1s ease;
}
	
.material-button:active {
transform: translateY(3px); 
border-bottom: none;
margin-bottom: 3px;
}
	
.program-title{
position: relative;
background: #005ea8;
color:#fff;
font-size: 1.2rem;
font-weight: bold;
padding: 15px 25px;
margin: -25px -25px 10px -25px; 
}

.contact-box{
  background:#f8f8ff;
  padding:20px;
  border-radius:10px;
}

.footer{
  background:var(--navy);
  color:#fff;
  text-align:left;
  padding:20px;
  margin-top:10px;
}

.main-event-title {
color: var(--navy);
font-size: 1.3rem;
font-weight: bold;
border-left: 6px solid var(--blue);
padding-left: 15px;
margin-top: 10px;
margin-bottom: 25px;
line-height: 1.3;
}


.presenter-company{
display:block;
width:100%;
text-align:left;
overflow-wrap:anywhere;
}

.access-layout{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:30px;
}

.access-text{
flex:1;
}

.access-image{
width:350px;
flex-shrink:0;
margin-top:-60px;
}

.access-image img{
width:100%;
height:auto;
display:block;
border-radius:10px;
}




@media screen and (max-width:768px){
   .access-layout{
   flex-direction:column;
   }

   .access-image{
   width:100%;
   margin-top:0;
   }
}	



@media screen and (max-width:768px){
   .info{ grid-template-columns:1fr; }
   .tabs{ flex-direction:column; }
   .section{ padding:25px; }
   .sp-only{ display:block; }
	
   /* プログラム表をカード型のように見せる */
   .program-table, 
   .program-table tbody {
   display: block;
   width: 100%;
   }
	
   .program-table tr {
   display: grid;
   grid-template-columns: 1fr auto; /* 登壇者とボタンを左右に配置 */
   gap: 8px 10px;
   padding: 15px 10px;
   border-bottom: 1px solid var(--border);
   }
	
   .program-table tr:last-child {
   border-bottom: none;
   }
	
    .program-table td {
   display: block;
   width: auto;
   padding:0;
   border-bottom: none;
   }
   	
   .time {
   grid-column: 1 / -1; /* 時間は横幅いっぱい */
   }
	
   .title {
   grid-column: 1 / -1; /* タイトルも横幅いっぱい */
  margin-bottom: 5px;
   }
	
   .presenter {
   grid-column: 1 / 2; /* 登壇者は左下 */
   align-self: end;
   }

   .material {
   grid-column: 2 / 3; /* ボタンは右下 */
   align-self: end;
   text-align: right;
   }
}