@charset "UTF-8";

/*Common setting*/
html {height: 100%;position: relative;}
body {height:100%;min-height: 100%;color:#696969;font:1rem ;
    font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP","メイリオ", "sans-serif";
font-weight: 500;background-color:#fff;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;margin: 0;}
ul,li,p{margin: 0;padding :0;}
h1,h2,h3,h4{font-size: 100%; margin: 0;padding :0;}
h1{font-size :3vw; font-weight :700; padding:1rem;color:#add8e6;width:100%;line-height: 3vw;margin-top:1rem;text-align: right;}
h2{font-size :1.4rem; font-weight :600; margin:3rem 0;color:#f5f5f5;line-height: 1.4rem;background-color:#4682b4; padding:1rem;}
h3{font-size :1.2rem; font-weight :600; margin-bottom: 0;background:#f0e68c;color: #fff; margin:2rem auto 1rem;width:80%;}
a{margin: 0;padding: 0;}
a{color: #4682b4 ; text-decoration:none;
transition: all 0.3s ease-in-out;
outline: none !important;}

a:hover{color :#fff; font-weight: bold;text-decoration: none;
transition: all 0.3s ease-in-out;
outline: none !important;
}

button,button:hover{
transition: all 0.3s ease-in-out;
outline: none !important;
}

ul{list-style-type: none; margin: 0 auto;}
li{font-size:1rem;line-height: 2rem;}

dt{font-size:1.2rem;padding: 1rem 0 0 0;}
dd{font-size:1rem;padding: 0 0 1 0}

p{font-size:1rem;line-height: 1.5rem; text-transform :none;text-align: justify;}

img {border-style:none;width:100%;}

img.icon {width: auto;}
*,*:before,*:after {box-sizing: border-box;}

button{margin: 1rem 0;line-height: 1.5rem;background: none;border: none;white-space: nowrap;}
a button {font-size:1.5rem;color:#ef5777;font-weight:bold;background-color:#e0ffff;border:2px #87ceeb solid;border-radius:10px;}
a button:hover{color:#fff;background-color:#00008b;border-color:#00ced1;border: 1.5px solid ;}

label{font-size: 1rem;color:#4682b4;padding: 0:;}
label:hover{font-size: 1rem;color:#8b0000;font-weight: bold;}
form label:hover{color:#3c3c3c;font-weight: normal;}
form label{color:#3c3c3c;font-weight: normal}
label.button{background-color:#fffacd; }
label.button:hover{background-color: #ffb6c1;}

/*li{display:inline-block;}*/
/*li a{display: block;}*/


/*Common class*/
.bold{font-weight: 900;}
.italic{font-style: italic}
.indent-1 {
padding-left:1em;
text-indent:-1em;}
.indent1 {text-indent:1em;}
.normal{font-weight:normal;}
.line-hight2{line-height: 2rem;}
.list-dot{list-style-type: disc; }
.small{font-size:0.5rem;line-height: 0.5rem;}
.small08{font-size:0.8rem;line-height: 0.8rem;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}
.button{color:#696969; white-space: nowrap; margin: 1.5rem 0.5rem;font-size: 2rem;border: 1px solid #ccc;border-radius: 10px;background-color:#f0f8ff;}
.button:hover{background-color: #ffd700; color: #fff;}
.button2{color:#fff; white-space: nowrap; margin: 1rem 0.5rem;padding:0.5rem;font-size: 1.5rem;line-height: 3rem;border: 1px solid #fff;border-radius: 10px;background-color:#ffd700;}
.button2:hover{background-color: #ffd700; color:#fff;}
.color-black{color: black;}
.color-red{color: red;}
.color-orange{color:#ff6633;}
.color-green{color:#32ff7e;}
.color-blue{color:blue;}
.color-yellow{color:#ffd32a;}
.color-pink{color:#ff69b4;}
.color-white{color:#fff;}
.padding0{padding: 0;}
.paddin-top2{padding-top: 2rem;}
.margin0{margin: 0;}
.nowrap{white-space: nowrap;}
.box{display:inline-block;border: 1px solid #fff;border-radius: 10px;background-color:#6495ed;padding:1rem;margin:1rem;}
.flex{display: flex;}
.flex-center{display: flex;
  flex-direction:row;
  justify-content: center; /*左右中央揃え*/
  align-items: center;     /*上下中央揃え*/
}
.flex-space-between{display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flex-space-between-column{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flex-space-around{display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.flex-wrap{flex-wrap: wrap;}
.align-items_baseline{align-items: baseline}

.width80{width:80%; margin:0 auto;}
.width70{width:70%; margin:0 auto;}
.width50{width:50%; margin:0 auto;}
.border{border :#ccc solid 1px; }
.caution-box{background-color :red;color:#fff;margin: 1rem 2rem;}:;
.line-through{text-decoration: line-through;color:red;}
.margin2rem{margin:2rem;}
.display_none{display: none;}

/*nabigation-flexbox-*/

    nav{
     width: 100%;
     height: auto;
     position: relative;
     align-items: center;
    }
    .top_nav{
     display: flex;
     justify-content: space-around;
    }

/*navigation top fix*/
.fixed {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
}

    /*トグル*/
    .drawer{
     display: flex;
     display: -webkit-flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-around;
     position: relative;
     padding: 1rem;
     width:auto;
     border :dotted 1px #ccc;
     cursor: pointer;
     transition: all  0.5s ease;
     color:#ccc;
     font-size: 1.5rem;
     background-color:#fff;
     position: absolute;
     top:0;
     right:0;
 }

    .drawer:hover{background-color:#b0c4de; color:#fff;}

    .navbar_toggle{
     z-index:9999;
     padding-left: 0.5rem;

    }

    .navbar_toggle:hover{color:#fff;}

    .navbar_toggle_icon {
     position: relative;
     display: block;

     height: 2px;
     width: 30px;
     margin-left: auto;
     background: #5c6b80;
     transition: ease .5s;
    }

    .navbar_toggle_icon:nth-child(1) {
     top: 0;
    }
    .navbar_toggle_icon:nth-child(2) {
     margin: 8px 0;

    }
    .navbar_toggle_icon:nth-child(3) {
     top: 0;
    }



          /*トグルOPEN時の動き*/
    .navbar_toggle.open .navbar_toggle_icon:nth-child(1) {
     top: 10px;
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);

    }
    .navbar_toggle.open .navbar_toggle_icon:nth-child(2) {
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     opacity: 0;
    }
    .navbar_toggle.open .navbar_toggle_icon:nth-child(3) {
     top: -10px;
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
    }


    /*メニュー*/
    .menu{
     -webkit-transform: translateX(-100%);
     transform: translateX(-100%);
     transition:ease .5s;
     z-index:1000;
     height:auto;

    }

    .menu li{
     padding: 0.2vw;
     border: 1px solid #fff;
     text-align: center;
     background-color: #b0c4de;
    }

    .menu li:nth-child(1){display: none;}

    .menu li a {display:block;width:100%;;color:#191970;font-weight: bold}
    .menu li a:hover{background-color: #4682b4; color:#fff;}

        /*メニューOPEN時の動き*/
    .menu.open {
     -webkit-transform:translateX(0);
     transform:translateX(0);
     /*overflow-y: auto;*/
     -webkit-overflow-scrolling: touch;
     padding-top: 1rem;
    }


/*ドロップダウンメニュー*/
 .firstlist {display: flex; justify-content:space-around;}
 .firstlist li{flex-grow: 1;}
 .upperlist:hover {background-color: #b0c4de;}
 .secondlist li:hover {background-color: #778899;}
 .upperlist {position: relative;}
 .secondlist {position: absolute;display:flex;}
 .secondlist li{width:15vw;font-size: 2vw;}
 .upperlist ul { opacity: 0; visibility: hidden; transition: .5s; top: 50%;}
 .upperlist:hover ul { opacity: 1; visibility: visible; top: 100%;}


    @media screen and (min-width: 750px) {
    nav{
     display: flex;
     flex-direction: row;
    border: #b0c4de solid 1px; }

    .drawer{
     display: none;
    }

    .menu{
     width: 100%;
     -webkit-transform: translateX(0);
     transform: translateX(0);

    }
    .menu ul{
     display: flex;
     display: -webkit-flex;
     flex-wrap: wrap;
     justify-content: flex-end;
     align-items: center;
    }

    .menu ul li{
     flex-grow: 1;
    }

   .menu li{
    font-size: 1vw;
    line-height: 2vw;
  }

   .menu li:nth-child(1){display: inline;}
    }


/*header*/
header{background-image:url("../images/ws2.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 30vh;
        position: relative;}

header h1 span {
font-size: 80%;font-weight: 500;}


header button.button{font-size: 2vw;}

.header-button{position: absolute;
          bottom: 0;
         right:10%;}

header>p.h{width:60%;
         position: absolute;
         bottom: 5%;
         left:5%;
         font-size :2vw; font-weight :600; color:#b0c4de;}

 @media screen and (min-width: 750px) {
    header{height:50vw;}
    button.button{font-size: 1.5vw;padding:0.5rem;}
    .ws-lecturer{display:flex !important;
                ;justify-content:space-around;
                flex-wrap: wrap;flex-direction: row; width: 100%; min-height:0;}
    .lec{width:30vw;margin: 2rem;}
    .media{width:100vw;
   }

.logo{width:10vw;}

/*#outline{width:85%;display:inline-block;}*/
/*#venue{width:85%;display:inline-block;}*/
/*#program{width:85%;display:inline-block;}*/
/*#contact{width:85%;display:inline-block;}*/
/*#regist{width:85%;display:inline-block;}*/
/*.reg-form{width:85%;display:inline-block;}*/
/*.form{width:70%;display:inline-block;}*/

#ws-venue{display:flex !important; flex-wrap: wrap;justify-content:space-around;
                flex-wrap: wrap;width:80% !important;margin: 1rem auto;text-align: center;}

#archive ul{display:flex; flex-wrap: wrap;width:80%;}
#archive ul li{background: #ccc;margin:0.5rem;padding: 0.5rem}

}

/*ws-lecturer*/
.ws-lecturer{display: block;height:auto;}
.ws-lecturer>.lec>p{width:100%;}
.lec>img{width:50%;}

#ws-venue{display: block;text-align: center;width:100%;}
#ws-venue ul{margin-top:2rem;}

/*各IDの設定*/
#workshop{margin: 1rem auto;}
#ws-program{margin: 1rem auto;}
#termsofuse{margin: 1rem auto;padding-top: 2rem;}
#sns{margin: 1rem auto;padding-top: 2rem;width:10%;
      display:flex;align-items: center;justify-content: center;}



/*iframe*/
  .media{width:40vw;height:auto;margin: 0 auto;}
  iframe{padding: 2rem;width:100%;}

/*modal*/
.modal .modal-wrap{background-image: linear-gradient(45deg, #f0f8ff 0%, #e6e6fa 60%); }
.modal .modal-overlay .modal-wrap .close{position: absolute;
    right: 2rem;
    top: 1rem;
    font-size: 40px;
    width: 30px;
    height: 30px;
    color: #000080;}
.modal-img{height:50vh;-o-object-fit: scale-down;object-fit: scale-down;width:auto;}


/*table*/
table{color:#3c3c3c;width:700px;text-align: center;margin:0 auto;padding-bottom: 2rem;
    border-collapse: collapse; border-spacing: 0;}
/*table{color:#3c3c3c;width:90%;text-align: center;margin:0 auto;padding-bottom: 2rem;
    border-collapse: collapse; border-spacing: 0;}*/

form table{width: 80%}
form tr{line-height: 2rem;}
form th{width:20%;}
form td{font-size: 1.2rem;
  /*text-indent: 1rem;*/
  /*margin :0 auto;text-align: left;border :1px dotted #ccc;*/
text-align: left;border: none;}


#outline table td br{display: none;}
#outline table th{vertical-align: baseline;
                  width:6rem;
                  text-align: justify;
                  -moz-text-align-last: justify;
                  text-align-last: justify;
                  text-justify: inter-ideograph;
                  padding-right: 2rem;}
#outline table tr{line-height: 2rem;}
#outline table{width:60%;}

#ws-program table{width:80%;}
#ws-program tr{border-bottom:1px dotted;}
#ws-program tr:hover{

    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
#ws-program th{width:30%;text-align: right;padding-right:2rem;}
/*#ws-program tr:nth-child(1){line-height: 3rem;}*/
#ws-program td:nth-child(2){width:30%;font-weight: bold;}
#ws-program td:nth-child(3){width:40%;}
#ws-program td:nth-child(4){width:40%;}
#ws-program table td br{display:none;}
#ws-program table td span{text-indent: 1rem;}


  @media screen and (max-width: 1900px) {
#outline table td br{display: inline !important;}
}

  @media screen and (max-width: 900px) {
#outline table{width:90%;}

table{width:100%;text-align: center;margin: 1rem auto;}
#ws-program table{width:80%};
#ws-program th{width:100%;text-align: left;}
#ws-program td:nth-child(2){width:100%;text-align: center;}
#ws-program td:nth-child(3){width:100%;text-align: center;}
#ws-program td:nth-child(4){width:100%;text-align: right;}

tr{display:block;width:100%;}
th{display:block;width:100%;}
td{display:block;width:100%;text-align:left;padding-left: 0;text-indent: 1rem;}

}

/*contents terms*/
#contents_terms h2{font-size: 1.5rem !important;}

/*cotact form*/

#contact{background-color: #f5f5f5;padding: 8rem 0 20rem 0;}
.contactform textarea,.contactform input{width: 100%;padding:1rem;border:1px solid #ccc;margin-bottom: 1rem;border-radius: 0;outline: none;}
button>input{background: none;border:none !important;outline: none;}

/*pagetop*/

.pagetop {
    display: none;
    position: fixed;
    bottom: 2.5rem;
    right: 2.5rem;
    z-index: 1;
}

.pagetop a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 50px;
  height: 50px;
  font-size: 0.8rem;
  border-radius: 5px;
  border: 1px solid #fff;
  box-shadow: 1px 1px 0px rgba(0,0,0,0.2);
  background-image: linear-gradient(to top left,  #b0c4de 0%,#778899 100%);
  text-align: center;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
  transition: box-shadow 250ms, -webkit-transform 250ms;
  transition: box-shadow 250ms, transform 250ms;
  transition: box-shadow 250ms, transform 250ms, -webkit-transform 250ms;
  color: #fff;  }

  .pagetop a span{
    -webkit-transform: rotateZ(-45deg);
            transform: rotateZ(-45deg);
  }

  .pagetop a:hover {
    background-image: linear-gradient(to top left,#cd5c5c 0%,#a52a2a 100%);
    text-align: center;
    color: #fff;
    font-size: 0.8rem;
    text-decoration: none;
    padding:20px 10px;
}

/*footer*/
  footer{
  /*background-image:url("../images/footer.png") ;background-repeat:no-repeat;*/
  height:20rem;position: relative;
  background-position: 50% 10%;
  background-attachment: scroll;
  background-size: cover;
  background-color: black;
  color: #fff;
  margin-top: 3rem;
  padding-top: 1rem;}

footer img{width:20%;}

 .copyright{font:500 1rem Roboto,Arial,Helvetica;margin:0; text-transform :none;color:#fff;
  display:block;
  position: absolute;
  top: 55%;
  left: 50%;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 80%;
  height: 2rem;
}
.copyright2{font:300 0.8rem Roboto,Arial,Helvetica;margin:0; text-transform :none;color:#c0c0c0;
  display:block;
  position: absolute;
  right: 5%;
  bottom: 3%;
  margin: auto;
  width: 100%;
  height: 2rem;
}



footer>p {
    color:#fff;
    position:relative;
    z-index:2;
}

.external-contents img {
    width: 40%;
}