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

:root{
    --wh-color:#FFFFFF;
    --font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}


*{
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
color: #222222;
}

body{
    font-size:16px;
    margin: 0;
    padding: 0;
}

.html {
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.html::-webkit-scrollbar {  
   display: none; 
}

ul, ol, dl{
    list-style: none;
    margin: 0;
    padding:0;
}

a{
    text-decoration: none;
    display: block
}

a:hover{
 opacity: 0.7;
}


#container{
    background: #f3f3f3;
}

.header-area{
    background: url("../images/img_backgraound.png") center center no-repeat;
    background-size: cover;
    width: 100%;
    height:auto;
    }

.title-area{
    display: flex;
    justify-content: center;
    max-width: 1100px;
    width: 100%;
    margin: auto;
}

.header-left-wrap{
    width: 50%;
    text-align: center;
}


.header-left-wrap .sub-title{
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
}

.header-left-wrap .sub-title span{
    font-size: 1.25rem;
    font-weight: bold;
}

.header-left-wrap h1{
    font-size: 3.5rem;
}


.header-left-wrap img{
    width: 100%;
    margin: auto;
    min-height: 180px;
}

.header-right-wrap{
    width: 50%;
    position: relative;
    
}
.header-right-wrap img{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
}





/*logo-wrap////////////////////////////////*/
.logo-wrap{
    position:absolute;
    top: 5%;
    left: 0%;
    color:#fff;
    text-shadow: 0 0 15px #666;
    width: 60%;
    letter-spacing: -0.8px;
}

.logo-wrap img{
    width:86% ;
    line-height: 0;
    margin-bottom: 2rem;
}

.sp-wrap{
    position:absolute;
    top: 5%;
    right: 0%;
    width: 40%;
}

    .sp-wrap img { width: 100%;}

    .logo-left{width: 40%; margin: 1rem;}

        .logo-left img{width: 40%; margin: 0; padding: 0;}


.read-text{
    font-size: 1.5rem;
    padding:0 1rem 1rem;
    line-height: 1.2;
}

.day-info{
    font-size: 2.5rem;
    padding:0 1rem 0.5rem;

}

.anchor-nav{
    background: #ded7cd;
    padding: 1rem;
    width: 100%;
    margin:  auto ;
}

.anchor-nav-whidth{
    max-width: 1100px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0 .5rem;
    margin: 0 auto;
}

.day-theme{
    display: flex;
    justify-content:flex-start;
    border:1px solid #222;
    width: 33.3333%;
}

    .day-theme dt{
        display: flex;
        align-items: center;
        font-weight: bold;
        background: #efdfcb;
        padding: .5rem;
        width: 25%;
        text-align: center;
}

    .day-theme dt.day2-color{
        background: #f2e7e8;
}

    .day-theme dt.day3-color{
        background: #b6c0c7;
}

    .day-theme dt a{
        color: #222;
      display: block;
}
    .day-theme dd{
        padding: .5rem;
        background: #FFF;
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }
    
    .day-theme dd a{
      color: #222;
      font-weight: bold;
      width: 90%;
      display: block;
    }
    
    .day-theme dd .arrow-triangle{
        font-size:0.5rem;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #ccc;
        text-align: right;
        width: 10%;
    }
    

 

/*nav-wrap///////////////////////////*/
    

.day-anchor{

    width: 100%;
    color: var(--wh-color);
    margin: 0 auto;
    overflow: hidden;
}

.headnav-wrap{
    display: flex;
    justify-content: flex-end;
}
.day-anchor .prof-nav{
    display: flex;
    justify-content: flex-end;
    font-weight: 700;
}

.day-anchor .prof-nav li{
    display: flex;
    align-items: center;
    height: 80px;
    margin-right: 1.5rem;

   }   
   
.day-anchor .prof-nav li a{
    color:#76674c;
    text-decoration: none;
}
.sp-nav-wrap{
    display: none;
}

.btn-wrap .entry-btn.head-entry{
    width: 50%;
    margin: 0 auto 1rem;
}

.btn-wrap .entry-btn.head-entry a{
    font-size:1rem;
    text-align: center;
}

.btn-wrap .entry-btn.head-entry.nav-entry{
    width: 100%;
    margin: 0;
}

.btn-wrap .entry-btn.head-entry.nav-entry a{
    color: var(--wh-color);
}
/*main-area///////////////////////////*/

.logo-left img {
    width: 100%;
    height: 100%;
    }

/*Speacer-area///////////////////////////*/


.speaker-area{
    background:var(--white-color);
    width: 100%;
    padding: 1rem 0;
    margin-top: -50px;
}
    
.infinite-slider{
    display: flex;
    justify-content: center;
}
    .infinite-slider li{
        width: 22%;
        margin-left: .5rem;
    }
     .infinite-slider li p{
        padding: .5rem 1rem 0 1rem;
    }
     .infinite-slider li p span{
         display: block;
         font-size: 1rem;
         border-left: 5px solid #CCC;
         padding-left: .5rem;
         font-weight: bold;
    }

    .infinite-slider img  {
        width:100%;
        height:auto;
    }
    
.infinite-slider .swiper-wrapper {
  transition-timing-function: linear;
}




/*read-area///////////////////////////*/


.read-area{
    width: 100%;
    margin:0 auto;
    display: flex;
    justify-content: flex-start;
    padding: 6rem 0;
    background: rgb(71,68,42);
    background: linear-gradient(159deg, rgba(71,68,42,0.3) 0%, rgba(255,239,150,0.3) 63%, rgba(140,131,99,0.3) 100%), url("../images/img-backread.png") ;
    background-position: top;
}

.read-area h2{
    font-size:5rem;
    font-family: var(--font-family);
    font-style: italic;
    width: 45%;
    padding: 0 3rem;
    display: flex;
    align-items: center;
    color: #a18d68;
}

.read-area p{
    font-weight: 500;
    width: 50%;
    padding: 0 3rem 0 0;
}
/*program-area///////////////////////////*/

.program-area{
    background: rgb(255,255,255);
    background: linear-gradient(159deg, rgba(230 244 251 / 30%) 0%, rgba(255 255 255 / 0%) 43%, rgba(255 255 255 / 30%) 100%), url("../images/img-backgraound_prg.jpeg") center center;
    padding-bottom: 2rem;
    background-size:cover; 
    }

.program-area h2{
    font-size:4rem;
    text-align: center;
    font-family: var(--font-family);
    font-style: italic;
    padding: 3rem 3rem 6rem;
    color: #b6c0c7;
}

.program-conts{
    width: min(100%, 1000px);
    margin: 0 auto;
   
}

.program-anchor{
    display: flex;
    justify-content: flex-start;

}

    .program-anchor li{
        text-align: center;
        width: min(25%, 600px);
        margin: 0;
}

 .program-anchor li a{
    font-family: var(--font-family);
    font-size: 1.5rem;
    padding: 0.5rem;
    font-weight: bold;
    text-decoration: none;
}

 .program-anchor .border-day1-btn .day1-inner{
    background:rgb(239 223 203);
    border-radius: 20px 20px 0px 0px;
}

.program-anchor .border-day2-btn .day2-inner{
    background: rgb(242 231 232);
    border-radius: 20px 20px 0px 0px;
}

 .program-anchor .border-day3-btn .day3-inner{
    background: rgb(182 192 199);
    border-radius: 20px 20px 0px 0px;
}

.program-wrap{
   background: rgb(239,223,203);
background: linear-gradient(159deg, rgba(239,223,203,0.9528186274509804) 0%, rgba(255,250,223,0.76234243697479) 63%, rgba(142,129,84,0.5270483193277311) 100%);
    margin:0 auto;
    padding: 2rem 1rem;
    border-radius: 0px 0px 20px 20px;
}

    .program-wrap.day2-bg{
background: rgb(242,231,232);
background: linear-gradient(159deg, rgba(242,231,232,1) 0%, rgba(236,210,213,1) 63%, rgba(209,192,193,1) 100%);
}
    .program-wrap.day3-bg{
background: rgb(182,192,199);
background: linear-gradient(176deg, rgba(182,192,199,1) 0%, rgba(217,232,242,1) 63%, rgba(164,178,187,1) 100%);    }


    .program-wrap h3{
        font-family: var(--font-family);
        border-bottom:1px solid  var(--wh-color);
        font-size: 2rem;
        text-align: center;
        width: 50%;
        margin: auto;
    }
    
    .day-title{
        font-size: 2rem;
        font-family: var(--font-family);
        text-align: center;
        padding-left: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .day-read{ 
        padding:1rem 0 3rem 0; 
        }

.program-card{
    background: #ffffff;
    border-radius: 20px;
}
    
    .program-card .sperker-label{
        background: rgb(242 231 232);
        border-radius: 20px 0px 0px 0px;
        font-weight: bold;
        padding:0.5rem;
        margin: 1rem 0 0;
        text-align: center;
        width: 20%;
    }
 
     .program-card .sperker-label.long{
        width: 30%;
    }
 
     .day2-bg .sperker-label{
        background: rgb(182 192 199);
     }
 
     .day3-bg .sperker-label{
        background: rgb(239 223 203);
     }
 
     .program-card .program-right{
        display: flex;
        justify-content: space-between;
        padding: 1rem;
    }
 
     .program-time{
        font-size:1.25rem;
        font-family: var(--font-family);
        padding-left: 0.5rem;
        margin:0 1rem 0.5rem 0;
        width: 15%;
        border-right: 1px solid #ccc;
}

    .program-card .program-right ul{
        width: 100%;
    }

    .program-card .program-right ul li{
        margin-bottom: 0.5rem;
    }


.program-card .program-right ul li.mb3rem{
        margin-bottom: 3rem;
    }
        .program-card .program-right ul li strong{
            font-size: 1.125rem;
            font-weight: 700;
            display: contents;
        }
        
        .program-title{
            font-family: var(--font-family);
            font-weight: 700;
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            line-height: 1.4;
        }
        
            #day2 .program-title{}
            #day3 .program-title{}

    .sperker-name{
            margin-right: 1rem;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px dotted #CCC;
        }
        
        .sperker-name .sperker-inner{
            width: 80%;
            display: flex;
            align-items: center;
        }
    
        .program-card .program-right .img-only img{
            width: 100%;
            margin: 0 auto;
        }
    
        .program-card .program-right img {
            width: 100%;
            height: auto;
        }
    .program-card .program-right .img-discussion{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 20%;
    }
    
    .program-card .program-right .img-discussion .panel{
        width: 80%;
        margin: 0 auto 0.5rem;
    }
        .btn-prof{margin-top: 0.5rem;}
        .btn-prof a{
            background: #000;
            padding: 0.125rem;
            border-radius: 50px;
            font-size: 0.825rem;
            color: var(--wh-color);
            text-align: center;
            text-decoration: none;
            width: 100%;
            margin: auto;
        }

        .btn-prof a:hover{
            opacity: 0.5;
        }
 
     .program-card .program-right .img-only a{
         width: 70%;
    }

 
 
 /*tab-area///////////////////////////*/
 
.area {
	display: none;
	opacity: 0;
}

.area.is-active {
    display: block;
    animation-name: displayAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}  
  
  
  
/*outline-area///////////////////////////*/

.outline-area{
    background: rgb(243 243 243);
    padding-bottom: 3rem;
}
    
.outline-area h2{
    font-size:4rem;
    text-align: center;
    font-family: var(--font-family);
    font-style: italic;
    padding: 3rem 3rem 3rem;
    color: #edd0d3;
}


.outline-list{
    max-width: 1000px;
    width: 100%;
    margin: auto;
    color: var(--wh-color);
    text-align: center;
}

.outline-list dt{
    font-weight: bold;
    border-bottom: 1px dotted #fff;
    margin:0.3rem auto;
    width: 90%;
    padding: 0.5rem;
    color: #b49396;
}

.outline-list dd{
    width: 90%;
    border-bottom: 1px dotted #fff;
    margin:0.3rem auto;
    padding: 0.5rem;
}
.outline-list dd a{
    color: #222222;
}

.outline-list dd span{
    font-size: 0.825px;
}

/*header-area-sticky//////////////////////////////////*/

.header-area-sticky{
    position: sticky;
    position: -webkit-sticky;
    top:0;
    opacity: 0;
    transition: opacity 1s;
    z-index: 99999;
}

.header-area-sticky .day-anchor{
    background: #e0cdaa;
}

.header-area-sticky{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

    .header-area-sticky .prof-nav{
        display: flex;
        justify-content: flex-end;
        font-weight: 700;
        align-items: center;
    }

    .header-area-sticky .logo-left {
        padding: 0;
        margin: 0;
    }

    .header-area-sticky .logo-left img{
        width: 60%;
    }

    .header-area-sticky .prof-nav li{
        height: 80px;
        margin-right: 1.5rem;
        color: white;
    }    




/*footer-area///////////////////////////////////*/


.footer-area{
    position: sticky;
    position: -webkit-sticky;
    bottom:0;
    opacity: 0;
    transition: opacity 1s;
    z-index: 99999;
    background: rgba(182, 192, 199, 0.5);
    padding: 2rem 0;
}

.footer-area .day-anchor{
    background: #e0cdaa;
}

.footer-wrap{
    display: flex;
    justify-content: space-between;
    margin:0 auto;
    max-width: 1680px;
    width: 96%;
}

    .footer-wrap .prof-nav{
        display: flex;
        justify-content: flex-end;
        font-weight: 700;
        align-items: center;
    }

    .footer-wrap .logo-left {
        padding: 0;
        margin: 0;
    }

    .footer-wrap .logo-left img{
        width: 35%;
    }

    .footer-wrap .prof-nav li{
        height: 80px;
        margin-right: 1.5rem;
        color: white;
    }    

.btn-wrap .btn-conts li{
    margin: 0.5rem auto;
    text-align: center;
    width: 100%;
    max-width: 800px;
}

        .btn-wrap .entry-btn a{
                background:#cd0101;
                padding: 0.75rem;
                border-radius: 5px;
                color: #FFFFFF;
                font-size: 1.25rem;
                font-weight: bold;
            }

    .btn-conts .inquiries-btn{
        width: 300px;
        margin-top: 0.25rem;
        background: rgb(0,5,8);
        background: linear-gradient(159deg, rgba(255,255,255,1) 0%, rgba(198,198,198,1) 100%);
        padding: 0.25rem;
        border-radius: 50px;
    }

        .btn-wrap .inquiries-btn a{
              background: rgb(0,5,8);
              background: linear-gradient(159deg, rgba(198,198,198,0.98) 0%, rgba(255,255,255,0.98)  100%);
              padding: 0.5rem;
              border-radius: 50px;
              font-size: 1rem;
              font-weight: bold;
              color: #000;
       }


.btn-wrap .close{
  background: #999;
  border-radius: 50px;
  padding: 0.5rem;
  font-size: 0.825rem;
}   
.btn-wrap .close.mainbtn{
    text-align: center;
    color: white;
    margin: 10px auto;
    width: 80%;
    padding: 1rem;
}

/* fadein */

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}


.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}


/*Loading//////////////////////////*/


#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	text-align:center;
	color:#fff;
}

#splash_text {
	position: absolute;
	top: 50%;
	left: 50%;
    z-index: 999;
	transform: translate(-50%, -50%);
	color: #fff;
	width: 100%;
}

#splash_text svg{
    height: 2px;
}

.loader_cover {
    width: 100%;
    height: 50%;
    background-color: #e0cdaa;
    transition: all .2s cubic-bezier(.04, .435, .315, .9);
    transform: scaleY(1);
}
.loader_cover-up {
    transform-origin: center top;
}


.loader_cover-down {
    position: absolute;
    bottom: 0;
    transform-origin: center bottom;
}
.coveranime {
    transform: scaleY(0);
}

.sp-only{
    display:none;
}

.program-card .sperker-label.glay-label{
    background:rgb(232 232 232);
}

/* 前へ次への矢印カスタマイズ */
.swiper-button-prev::after,
.swiper-button-next::after {
  bottom: 0;
  content: "";
  height: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 0;
}
/* 前への矢印カスタマイズ */
.swiper-button-prev::after {
    left:10px;
	width: 40px;
	height: 40px;
	border-top: 2px solid #ffec04;
	border-right: 2px solid #ffec04;
	-webkit-transform: rotate(226deg);
	transform: rotate(226deg);
}
/* 次への矢印カスタマイズ */
.swiper-button-next::after {
    right:10px;
	width: 40px;
	height: 40px;
	border-top: 2px solid #ffec04;
	border-right: 2px solid #ffec04;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.swiper-button-next, .swiper-button-prev {
    top: 30%;
    background: rgba(255,255,255,0.3);
    padding: 3px;
	width: 50px;
	height: 80px;

}