@charset "utf-8";

/*============================================
全般的なスタイル
============================================*/
* {
	margin:0; 
    padding:0; 		/*全要素のマージン・パディングをリセット*/
}


html{
    overscroll-behavior: none;
}


/*
a:link{
    color: black;   
}

a:visited{
    color: black;
}
*/

a:hover{
    color: green;
}



body {
/*    margin-top: 80px;*/
/*    text-align: center;*/
    font-size:100%;
    line-height:2;
/*    background-color: #fffaed;*/
        background-image: url("./image/rokkohole.jpg");
        background-size: auto 150%;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center;
        font-family: sans-serif;
}


.menu{
    width: 100%;
    position: fixed;
    top: 0;
    background-color: #fffaed;
/*    background-color: black;*/
    border-bottom: 3px solid #c05000;
/*    border-top: 3px solid #c05000;*/
    z-index: 5;
}

ul#logo{
    display: inline-block;
    vertical-align: middle;
/*    padding: 1.5% 0px 1% 0px;*/
    float: left;
    background-color: #fffaed;
    background-color: rgba(0,0,0,0);
    width: 20%;
    height: 100%;
}

ul#logo2{
    display: inline-block;
    vertical-align: middle;
/*    padding: 1.5% 0px 1% 0px;*/
    float: left;
/*    background-color: #fffaed;*/
    background-color: rgba(0,0,0,0);
    width: 0%;
    height: 100%;
}

ul#logo li{
    display: inline-block;
    vertical-align: middle;
    height: 80px;
}

ul#logo2 li{
    display: inline-block;
    vertical-align: middle;
    height: 80px;
}

ul#logo li> img {
    height: 100%;
    width: 100%;
    object-fit: contain
}

ul#logo2 li> img {
    height: 100%;
    width: 100%;
    object-fit: contain
}


ul#navilist{
    overflow: hidden;
/*    display: inline-block;*/
    vertical-align: middle;
/*    float: left;*/
/*    width: 80%;*/
    font-size: 0;
    background-color: #fffaed;
    background-color: rgba(0,0,0,0);
    height: 74px;
}

#navilist li {
    overflow: auto;
    padding: 5px 0px 0px 0px;
    font-size: 16px;
    text-align: center;
    background-color: #fffaed;
/*    background-color:  rgba(0,0,0,0);*/
/*    color: black;*/
/*    color: aliceblue;*/
/*    list-style-type:none;		リストマーカー無しにする*/
    display: inline-block;
    width: 25%;
    height: 50%;
}

#navilist li a{
    text-decoration: none;/*リンク部分を下線無しにする*/
}

#navilist li a:link{
    text-decoration: none;
    color: black;
/*    color: aliceblue;*/
}

#navilist li a:visited{
    text-decoration: none;
    color: black;
/*    color: aliceblue;*/
}

#navilist li a:hover{
    color:green; 	/*リンクにマウスが乗ったら背景色を変更する*/
}

/*
ul#phonenavilist{
    height: 0;
}
ul#phonenavilist li{
    height: 0;
}
*/

.pmenu{
    height: 0
}

ul#plogo li{
    height: 0px;
}

ul#plogo li> img {
    height: 0%;
}

ul#pnavilist li{
    height: 0;
}


/*
div.title{
    margin-top: -300000px;
    border-top: 300003px solid #fffaed;
    border-bottom: 3px solid #c05000;
    background-image: url("./image/IMG_8358%202.jpg");
    background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    height: 700px
}
*/

div#titlename{
    color: #fffaed;
    padding: 150px 5px 0 5px;
    font-size: 15pt;
}

@media screen and ( max-width:900px )
{    
    body:before{
        content:"";
        display:block;
        position:fixed;
        top:0;
        left:0;
        z-index:-1;
        width:100%;
        height:100vh;
        background:url(./image/rokkohole.jpg) center no-repeat;
        background-size:cover;
    }

    
    .menu{
        height: 0;
    }
    
    ul#navilist{
        height: 0
    }
    
    ul#logo li{
        height: 0
    }
    ul#logo2 li{
        height: 0
    }

.pmenu{
    height: auto;
    width: 100%;
    position: fixed;
    top: 0;
    background-color: #fffaed;
    border-bottom: 1px solid #c05000;
    border-right: 1px solid #c05000;
/*    border-right: 3px solid #c05000;*/
    z-index: 5;
}
    

ul#plogo{
    border-bottom: 1px solid #c05000;
    display: block;
    vertical-align: middle;
/*    padding: 1.5% 0px 1% 0px;*/
/*    float: right;*/
    background-color: #fffaed;
/*    background-color: aqua;*/
    width: 100%;
    height: 100%;
    
}

ul#plogo li{
/*    display: inline-block;*/
    vertical-align: middle;
    height: 40px;
}

ul#plogo li> img {
    height: 100%;
    width: 100%;
    object-fit: contain
}

ul#pnavilist{
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
/*    float: left;*/
/*    width: 80%;*/
    width: 100%;
    font-size: 0;
    background-color: #fffaed;
    background-color: aqua;
    height: auto;
}

ul#pnavilist li {
    overflow: auto;
    padding: 0px 0px 0px 0px;
    font-size: 16px;
    text-align: center;
    background-color: #fffaed;
    color: black;
    border-bottom: 1px solid #c05000;;
/*    list-style-type:none;		リストマーカー無しにする*/
    display: inline-block;
    width: 100%;
    height: 50%;
}

ul#pnavilist li a{
    text-decoration: none;/*リンク部分を下線無しにする*/
}

ul#pnavilist li a:link{
    text-decoration: none;
    color: black;
}

ul#pnavilist li a:visited{
    text-decoration: none;
    color: black;
}

ul#pnavilist li a:hover{
    color:green; 	/*リンクにマウスが乗ったら背景色を変更する*/
}
    

div#titlename{
    padding: 80px 5px 0 5px;
}
}


/*
.is-down  {
    color: black;
    background-color: #fffaed;
    border-bottom: 1px solid #c05000;
    border-top: 1px solid #c05000;
    -webkit-transition: all .4s ease 0s,background .6s ease .2s;
    transition: all .4s ease 0s,background .6s ease .2s;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  height: 100px;
}
*/
/*

.is-top  {
    color: aliceblue;
  background-color: black;
  -webkit-transition: all .4s ease 0s,background .6s ease .2s;
  transition: all .4s ease 0s,background .6s ease .2s;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  height: 100px;
}
*/

.is-down-color {
    color: black;
}

.is-top-color  {
    color: aliceblue;
}




div#timezone{
    color: white;
    height: auto;
    vertical-align: middle;
    padding: 4px 9px 4px 9px;
    background-color: #1d5f96; 
    border-bottom: 1px solid #bfc3ae;
    border-top: 1px solid #bfc3ae;
/*    background-color: aqua*/
}

div#time{
    display: block;
    height: auto;
}

div#mainbody{
    text-align: center;・
/*    margin: ;*/
}




/*折りたたみメニュ*/
.acd-check{
    display: none;
}

.acd-label{
/*    background: #333;*/
    display: block;
/*    margin-bottom: 1px;*/
/*    padding: 10px;/*/
}


.acd-content{
/*
    height: 0;
    opacity: 0;
    transition: .5s;
    visibility: hidden;
*/
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease-out -.5s;
}

.acd-check:checked + .acd-label + .acd-content{
/*
    height: 40px;
    opacity: 1;
    
    visibility: visible;
*/
    max-height: 9999px;
    transition: max-height 0.5s ease-in;
}




.pandp{
    display: none;
}

.pandp:checked + .acd-label + .acd-content{
/*
    height: 400px;
    opacity: 1;
    padding: 10px;
    visibility: visible;
*/
    max-height: 9999px;
    transition: max-height 1s ease-in;
}





h3{
    background-color: #fffaed;
    font-size: 20pt;
/*    padding: 5px 0px 5px 0px;*/
    color: #1d5f96;
}

/*
a.page{
    padding: 0 0 0 40px;
    background-image: url(image/20-logo-out.jpg) no-repeat center left;
}
*/


h3#registration::before{
    content:'\f150';
	font-family:'Font Awesome 5 Free'
/*	font-weight:900;*/
}

h3#pandp::before{
    content:'\f150';
	font-family:'Font Awesome 5 Free'
/*	font-weight:900;*/
}

h3#access::before{
    content:'\f150';
	font-family:'Font Awesome 5 Free'
/*	font-weight:900;*/
}

h3#participant::before{
    content:'\f150';
	font-family:'Font Awesome 5 Free'
/*	font-weight:900;*/
}


h2{
    font-size: 15pt;
}

div.main{
    padding: 4px 4px 4px 4px;
    background-color: #fffaed;
    overflow:hidden; 
}

div.sub{
    padding: 4px 9px 4px 9px;
    background-color: whitesmoke;
    overflow:hidden;
    text-align: left
}

div.link{
    border-top: 3px solid #1d5f96;
    padding: 4px 9px 4px 9px;
    background-color: whitesmoke;
    overflow:hidden;
    text-align: left
}

ul#program{
    text-align: center;
    display: inline-block;
    overflow: auto;
    width: 100%;
}
ul#program li{
    background-color: ghostwhite;
    list-style-type: none;
/*    width: 25%;*/
    float: left;
}





.ly_accordion {
  border: 1px solid #000;
  border-bottom: 0;
}
 
.ly_accordion .bl_inner {
  padding: 0 1em;
  border-bottom: 1px solid #000;
}
 
.ly_accordion .el_heading {
  display: block;
  margin: 0;
  padding: .5em;
  color: #000;
  border-bottom: 1px solid #000;
  background: #d5d5d5;
}
 
.ly_accordion .bl_content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 1s ease-out 0s;
}
 
.ly_accordion .el_checkbox {
  display: none;
}
 
.ly_accordion .el_checkbox:checked + .bl_content {
  max-height: 9999px;
  transition: max-height 1s ease-in;
}

input.access{
    display: none;
}

label.accesslabel{
    display: block;
}

div.accesscontent{
/*
    height: 0;
    opacity: 0;
    transition: .5s;
    visibility: hidden;
*/
/*    opacity: 0;*/
/*    visibility: hidden;*/
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out 0s;
}

input.access:checked + .accesslabel + .accesscontent{
/*
    height: 1600px;
    opacity: 1;
    visibility: visible;
*/
/*    opacity: 1;*/
/*    visibility: visible;*/
    max-height: 9999px;
    transition: max-height 1s ease-in;
}





h3#access{
    background-color:#fffaed;
}

h3.location{
    background-color: transparent;
    text-shadow: 2px 1px 0 #000;
    font-size: 16pt;
    border-top: 3px solid #e05e00;
    padding: 0px 9px 0px 9px;
    color: azure;
}
p.location{
    text-shadow: 2px 1px 0 #000;
    color: azure;
    padding: 70px 0px 70px 0px; 
    text-align: center;
    font-size: 30pt;
    border-bottom: 3px solid #e05e00;
}

div.venue{
    text-align: left;
    background-color: #fffaed;
    overflow: auto;
}


li.venue::before {
  position: relative;
  top: -2px;
  left: -10px;
 
  display: inline-block;
 
  width: 10px;
  height: 10px;
 
  content: '';
 
  border-radius: 100%;
  background: #1d5f96;
}

li.venue{
    list-style-type:none;
    padding-left: 30px;
    font-size: 15pt;
}


div.invspeaker{
    background-color: #fffaed;
}

div.invspeaker h2{
    font-size: 13pt;
    background-color: #fffaed;
}


ul.kobeuniv{
    overflow: auto;
    text-align: center;
}

ul.kobeuniv li{
    list-style-type: none;
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
    background-color: #fffaed;
    float: left
}

ul.centennial{
    overflow: auto;
    text-align: center;
}

ul.centennial li{
    list-style-type: none;
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
    float: left;
}

ul.centennial li#google{
    width: 48%;
    float: left;
    position: relative;

    padding-bottom: 36%;これが縦横比

    height: 0;

    overflow: hidden;
    }

ul.centennial li iframe {

position: absolute;

top: 0;

left: 0;

width: 100% !important;

height: 100% !important;

}

ul.access li{
    list-style-type: none;
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
    float: left;
    }

ul.access li#google{
    width: 48%;
    float: left;
    position: relative;

    padding-bottom: 35%; // これが縦横比

    height: 0;

    overflow: hidden;
    }

ul.access li iframe {

position: absolute;

top: 0;

left: 0;

width: 100% !important;

height: 100% !important;

}

ul.participantlist{
    position: relative;
    width: 96%;
    margin-left: 2%;
    height: 500px;
    margin-bottom: 20px;
}

ul.participantlist #google{}

ul.participantlist iframe {
width: 100% !important;
border-right: 2px solid gray;
border-bottom: 2px solid gray;
height: 100% !important;
}



div.regist{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 120%;
    overflow:auto;
    margin-left: auto;
    margin-right: auto;
    -webkit-overflow-scrolling:touch;
}

/*
div.regist #google{
    width: 100%;
}
*/

div.regist iframe{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}


div.registiframe {
width:100%;
height:100%;
border:none;
}



@media screen and ( max-width:705px )
{
ul.kobeuniv{
    overflow: auto;
    text-align: center;
}

ul.kobeuniv li{
    list-style-type: none;
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
    background-color: #fffaed;
/*    float: left*/
}

ul.centennial{
    overflow: auto;
    text-align: center;
}

ul.centennial li{
    list-style-type: none;
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
/*    float: left;*/
}

ul.centennial li#google{
    width: 96%;
    float: left;
    position: relative;

    padding-bottom: 76%;これが縦横比

    height: 0;

    overflow: hidden;
    }

ul.centennial li iframe {

position: absolute;

top: 0;

left: 0;

width: 100% !important;

height: 100% !important;

}

ul.access li{
    list-style-type: none;
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
/*    float: left;*/
    }

ul.access li#google{
    width: 96%;
/*    float: left;*/
    position: relative;

    padding-bottom: 75%; // これが縦横比

    height: 0;

    overflow: hidden;
    }

ul.access li iframe {

position: absolute;

top: 0;

left: 0;

width: 100% !important;

height: 100% !important;

}
    
div.regist{
padding-top: 150%;        
}
    
}


h3.date{
    font-size: 11pt;
    color: #fffaed;
    margin: 0;
    padding: 0;
}

p.date{
    color: #fffaed;
    font-size: 9pt;
    margin: 0;
    padding: 0;
}

h2#prejgrg a{
    text-decoration: none;
    color: black;
}

h2#prejgrg a:hover{
    color: dimgray;
}



div.dates{
    display: inline-block;
    width: 800px;
    text-align: left;
}

div.dates2{
    display: none;
    width: 100%;
}


td.dateright{
/*        padding-left: 3%;*/
/*    padding-right: 30%;*/
    text-align: left;
}

td.dateright::before{
    content: ": "
}

td.dateleft{
    padding-left: 2%;
    color: azure;
    text-align: left;
}

td.dateleft::after{
    content: " ";
}

@media screen and ( max-width:700px ){
    div.dates{
        display: none;
    }
    div.dates2{
        display: inline-block;
    }
    td.dateright{
        padding-left: 40px;
    }
    
}




.cohost{
    width: 300px;
}

ul#sponsor li{
    padding-left: 10px;
    text-align: left;
    list-style-type: ;
}

ul#sponsor li::before {
  position: relative;
  top: -2px;
  left: -10px;
 
  display: inline-block;
 
  width: 10px;
  height: 10px;
 
  content: '';
 
/*  border-radius: 100%;*/
  background: #1d5f96;
}

ul.sponsor{
    vertical-align: middle;
    background-color: whitesmoke;
    width: 30%;
    float: left;
}

@media screen and ( max-width:500px )
{
    div.dates{
    width: 100%;
    }

    
    ul.sponsor{
        text-align: center;
        float: center;
        width:250px;
    }
}

ul#sponsor{
    list-style-type: circle;
}

/*
div#open{
    background-color: #fffaed;
}
*/



footer{
    border-top: 3px solid #1d5f96;
    padding: 3px 10px 3px 3px;
    background-color: white;
    text-align: right;
}