@import url('https://fonts.googleapis.com/css?family=BioRhyme+Expanded');



html{
    scroll-behavior: smooth; 
}



body {
    
    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック','YuGothic','Yu Gothic','メイリオ', 'Meiryo','ＭＳ Ｐゴシック','MS PGothic';
    background-color : rgb(237, 235, 235);
    margin: 0;
    padding: 0;
}

/*ヘッダー*/

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
   
    background-color: white; 
    padding: 0px 30px;

    box-shadow: 0 4px 10px white(0, 0, 0, 0.5); 
    border-bottom: none; 

    position: fixed;      
    top: 0;              
    left: 0;             
    width: 100%;          
    z-index: 1000;        
    box-sizing: border-box;

    display: flex; 
    justify-content: space-between; 
    align-items: center;

}
    
.logo {
    height: 70px;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
}

.signup-button {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
}
.signup-button:hover {
    background-color: #f0f0f0;
}





/*見出し*/


.daimei{
    position: relative; 
    text-align:center;
    letter-spacing: 0.08em;

    font-size:23px;
    text-shadow: 0.5px 1px 7px rgb(210, 210, 210);

    width: 100%; 
    height: 100vh; 
    
    
}

.daimei::before,
.daimei::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: bgSwitch 10s infinite;
}

.daimei::before {
    background-image: url('/challengelab/events/2025/pic_6_2.jpg');
    animation-delay: 0s;
    filter: blur(3px);
    background-size: cover
}

.daimei::after {
    background-image: url('/challengelab/events/2025/pic_6_1.jpg');
    animation-delay: 5s;
    filter: blur(3px);
    background-size: cover

}


.daimei h1, 
.daimei h4,
.daimei br {
    position: relative;
    z-index: 1;
}

@keyframes bgSwitch {
    0%   { opacity: 0; }
    10%  { opacity: 0.5; }
    40%  { opacity: 0.5; }
    50%  { opacity: 0.5; }
    60%  { opacity: 0.2;}
    80%  { opacity: 0;}
    100% { opacity: 0; }
}



/*開催概要*/

h2 {
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  top:0;
}

h2:before, h2:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
h2:before {
  border-left: solid 1px black;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  left: 0;
}
h2:after {
  content: '';
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  right: 0;
}

.gagaiyou{
  text-align: center;
  font-size: 20px;
  box-shadow: 0 0 40px 30px whitesmoke;
  background-color: whitesmoke;
  backdrop-filter: blur(5px);
  max-width: 800px;
  margin: 40px auto;
  scroll-margin-top: 100px;
}


.gaiyou{
    text-align: left;
    font-size: 20px;
    box-shadow: 0 0 40px 20px whitesmoke;
    background-color: whitesmoke;
    backdrop-filter: blur(5px);
    max-width: 800px;
    margin: 40px auto;
    letter-spacing: 0.01em;
    padding-right: 40px;
    padding-left: 40px;
  
}

/*発表プロジェクト*/

.pj{
    text-align: center;
    font-size: 20px;
    box-shadow: 0 0 40px 20px whitesmoke;
    background-color: whitesmoke;
    backdrop-filter: blur(5px);
    max-width: 800px;
    margin: 40px auto;
    scroll-margin-top: 100px;
}

.pj p{
  
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    padding-right: 40px;
    padding-left: 40px;
}


h5 {
  position: relative;
  padding-left: 25px;
  width: fit-content;
  margin: 0 auto;
  font-size: 28px;
}

h5:before {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 15px transparent;
  border-bottom: solid 15px rgb(119, 195, 223);
  
}
h5:after {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 10px;
  width: 100%;
  border-bottom: solid 3px rgb(119, 195, 223);
}


/*タイムテーブル*/

.jikan{
    text-align: center;
    font-size: 20px;
    box-shadow: 0 0 40px 20px whitesmoke;
    background-color: whitesmoke;
    backdrop-filter: blur(5px);
    max-width: 800px;
    margin: 40px auto;
    scroll-margin-top: 100px;

    
}

.jikan ul {
    text-align: center;
    font-size: 20px;
    box-shadow: 0 0 40px 20px whitesmoke;
    background-color: whitesmoke;
    backdrop-filter: blur(5px);
    max-width: 800px;
    margin: 40px auto;
    padding-left: 0;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    scroll-margin-top: 100px; 
}

table{
  width: 80%;
  border-spacing: 0;
  margin: 0 auto;
	text-align: center;

}

table th{
  border-bottom: solid 2px lightpink;
  padding: 8px 0;
  
}

table td{
  border-bottom: solid 2px #ddd;
  text-align: left;
  padding: 14px 0 14px 20%;
}

/*三亚赌场,香港赌场*/

.osirase{
    text-align: center;
    font-size: 20px;
    box-shadow: 0 0 40px 20px whitesmoke;
    background-color: whitesmoke;
    backdrop-filter: blur(5px);
    max-width: 800px;
    margin: 40px auto;
    scroll-margin-top: 100px;
}

.otoiawase{
   text-align: center;
    font-size: 20px;
    box-shadow: 0 0 40px 20px whitesmoke;
    background-color: whitesmoke;
    backdrop-filter: blur(5px);
    max-width: 800px;
    margin: 40px auto;
    scroll-margin-top: 100px;

}

footer{
    border-top:solid 1px rgb(192, 183, 183);
}


/*タイトル横線*/
h1 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
}

h1:before, h1:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
  text-shadow: 0.5px 1px 7px silver;
}

h1:before {
  left:0;
}
h1:after {
  right: 0;
}


/*ヘッダー*/
.header-container {
  display: flex; 
  align-items: center;
  justify-content: space-between; 
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;

}

/* 横並び */
.main-nav ul {
  display: flex;
  list-style: none; 
  margin: 0;
  padding: 0;
}

.main-nav li {
  margin: 0 15px; 
}

.main-nav a {
  text-decoration: none; 
  color: #333;
  font-weight: bold;
}

/*レスポンシブ対応*/

/*大きいパソコン*/
@media screen and (max-width: 1980px) {
	h1{
    font-size: 70px;
  }

  .daimei{
    line-height: 2.4;
  }
}

/*ノートpc*/
@media screen and (max-width: 1280px) {
	h1{
    font-size: 45px;
  }

  .daimei{
    line-height: 1.3;
  }
}

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

  .main-nav{
    white-space: nowrap;
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
  }

  .daimei{
    font-size: 21px;
  }

  
}

/*スマホ*/
@media screen and (max-width: 540px) {

  .main-nav{
    font-size: 11px;
    white-space: nowrap;
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
  }

  .daimei{
  line-height: 2.3;
  }

  img{
    transform: scale(0.5);
    transform-origin: left;
  }

  h1{
    font-size: 25px;
  }

  h1 span{
    display:inline-block;
  }

  h4{
    font-size: 14px;
  }

	p{
    font-size: 15px;
  }

  h2{
    font-size: 18px;
  }

  footer{
    font-size: 12px;
  }
  
  
}