@charset "UTF-8";
/*reset css*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
/**/

@font-face {
    font-family: "YuGothic M";
    src: local(Yu Gothic Medium)
}

html {
    font-family: "游ゴシック体", YuGothic, "YuGothic M", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #252525;
}
header,main,.content_column{
    width: 1100px;
    margin-right: auto;
    margin-left: auto;
    display: block;
}
h1 {
    font-size: 2.6rem
}

h1,
h2,
h3,
h4 {
    line-height: 2.1em
}
h4{
    font-size: 1.6rem;
}
h5,p{
    font-size: 1.5rem;
}
a img:hover {
    opacity: .8;
    -webkit-transition: .5s;
    transition: .5s
}

dd {
    margin: 0
}
header{
    margin-top: 14px;
}
main{
    background-color: #E7E7E7;
    border:solid 1px #979797;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
    font-size: 1.4rem;
    line-height: 1.5em;
    clear: both;
    overflow: hidden;
}
.pc_none{
    display: none;
}
.title_w8{
    font-family:"ヒラギノ角ゴ W8 JIS2004";
    color: #575757;
}
.header_textarea{
    padding-top: 26px;
    float: right;
    position: relative;
        width: 83%;
}
.header_organizer{
    font-size: 2rem;
    color: #575757;
    font-weight: bold;
}
.header_date{
    font-size: 4.0rem;
    color: #EE5D5D;
    text-align: right;
    margin-top: -40px;
    padding-right: 116px
}
.header_day{
    font-size: 4.8rem;
}
.header_title{
    font-size: 4.3rem;
    line-height: 1.2em;
}
.header_place{
    color: #EE5D5D;
    font-size: 2.2rem;
    text-align: right;
    line-height: 1.7em;
    padding-right: 57px;
}
.header_pr{
    background-color: #F73030;
    color: white;
    text-align: center;
    font-size: 3.2rem;
    border-radius: 100%;
    width: 136px;
    height: 136px;
    padding-top: 34px;
    position: absolute;
    right: -10px;
    top: -10px;
    z-index: 1;
    box-sizing: border-box;
    -webkit-transform: rotate(11deg);
       -moz-transform: rotate(11deg);
        -ms-transform: rotate(11deg);
         -o-transform: rotate(11deg);
            transform: rotate(11deg);
}
.navi_main{
    display: flex;
    list-style: none;
    justify-content: space-around;
}
.navi_main_item{
    color: #575757;
    font-weight: bold;
    font-size: 1.8rem;
    text-decoration: none;
    line-height: 6.5rem;
    padding-bottom: 8px;
}
.navi_main_item:hover,.navi_main_item.active{
    border-bottom: solid 3px #575757;
    padding-bottom: 5px;
    -webkit-transition: .5s;
    transition: .5s
}
.vision_logo{
    margin-top: 30px;
}
.icatch_area{
    position: relative;
}
.icatch_copy{
    position: absolute;
    right: 10px;
    top: -10px;
    z-index: 999;
}
.content_section{
    width: 87%;
    display: block;
    margin: 5rem auto 6.2rem;
}
.top_section{
    text-align: center;
}
#vision{
    position: relative;
}
#vision:after{
    position: absolute;
    background: url('img/logo@2x.png') no-repeat center;

}
.main_title{
    font-size: 3.5rem;
    text-align: center;
    position: relative;
}
.main_title:after{
    content: " ";
    display: block;
    width: 100%;
    border-bottom: solid 1px #979797;
    position: absolute;
    top:1.7em;
}
.main_title .en{
    color: white;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
    display: block;
    font-size: 2.7rem;
    line-height: 1rem;
    margin-bottom: 50px;
}
.event_define_list{
    line-height: 2.7rem;
    margin: 10px;
    text-align: left;
}
.event_lists .label,.forum_lists .label{
    float: left;
    width: 20%;
    margin-left: 8px;
    margin-right: 20px;
    text-indent: 15px;
}
.event_list_item{
    background-color: white;
    padding-top: 21px;
    width: 450px;
    height:  580px;
    box-shadow: 0px 2px 4px 0px rgba(0 ,0,0, 0.5);
    border-radius:3px;
    position: relative;
    font-size: 1.6rem;

}
.event_list_item:not(.not_required):not(.itsover):hover{
    -webkit-transform: rotate(2deg);
       -moz-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
         -o-transform: rotate(2deg);
            transform: rotate(2deg);
}
.event_list_item:hover:after{
    content: "申し込む>>";
    position: absolute;
   background-color: #F73030;
    color: white;
    text-align: center;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    padding-top: 38px;
    position: absolute;
    right: -10px;
    top: -10px;
    z-index: 1;
    box-sizing: border-box;
}

.event_image{
    border-radius: 4px
}
.event_lists {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.event_lists a,.forum_lists a,.forum_lists{
    text-decoration: none;
    color: #575757;
    font-weight: bold;
}
.event_list_item,.forum_list_item {
    margin-top: 40px;
}
.event_list_item .label,.forum_list_item .label{
    width: 80px;
    height: 30px;
}
.event_notice{
    margin-top: 10px;
    display: block;
}
.event_capacity{
    margin-top: 20px;
}
.label,label{
    color: white;
    font-weight: bold;
    border-radius: 4px;
}
.label{
    letter-spacing: 11px;
}
.event_description{
    padding: 10px 20px;
    text-align: left;
}

.event_list_title{
    color: white;
    font-weight: bold;
    position: absolute;
    bottom: 0;
    height: 60px;
    width: 100%;
    font-size: 1.8rem;
    line-height: 5.5rem;
}
.forum_lists{
    text-align: left;
    box-sizing: border-box;
}
.forum_list_item{
    font-size: 1.7rem;
    line-height: 1.7em;
    box-shadow: 0px 2px 4px 0px rgba(0 ,0,0, 0.5);
    box-sizing: border-box;
}
.forum_list_title{
    border-radius: 4px;
    padding-left: 5px;
    color: white;
    margin-left: 5px;
}
.forum_item_content{
    width:60%;
    float: left;
}
.forum_define_list{
    margin: 10px 0;
}
.forum_speaker{
    margin-top: 20px;
    margin-left: 10px;
    font-size: 1.6rem;
}
.forum_description{
    clear: both;
    margin: 10px 10px;
    padding-top: 10px;
    font-size: 1.5rem;
}
.forum_title{
    font-size: 1.7rem;
    margin-top: 10px;
}
.fb_fix h3{
    font-size: 1.3rem;
}

.fb_fix h3 a{
    color: white;
    font-weight: bold;
    text-decoration: none;
}
.fb_fix{
    position: fixed!important;
    right: 0px;
    bottom: 0px;
    background-color: #3B5998;
    border-top:solid 10px #3B5998;
    border-right:solid 5px #3B5998;
    border-left:solid 5px #3B5998;
    border-top-right-radius:  10px;
    border-top-left-radius:  10px;
    z-index: 9999;
}
.fb_close{
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    border:solid 1px white;
    padding: 2px;
    width: 15px;
    border-radius: 5px;
    position: absolute;
    right: 0;
    top:0;
    cursor: pointer;
}

.color1,.event1,.forum1{
    background-color: #EDB53E
}
.color2,.event2{
    background-color: #DD5EB8
}
.color3,.event3,.label_title,.forum2{
    background-color: #7DB93B
}
.color4,.event4,.forum3{
    background-color: #3B79B9
}
.color5,.event5,label ,.forum4{
    background-color: #3BB9AE
}

#application .label{
    display: inline-block;
    padding: 0 15px;
    letter-spacing: 0;
}
.forum_list_item{
    width: 100%;
    border-radius: 10px;
    border:solid 1px;
    background-color:  white;
    padding: 10px;
    position: relative;
}
.forum_list_item.application_required:hover,.buzz-out{
    -webkit-animation-name: buzz-out;
    animation-name: buzz-out;
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

}
@-webkit-keyframes buzz-out {
    10% {
        -webkit-transform: translateX(3px) rotate(1deg);
        transform: translateX(3px) rotate(1deg)
    }
    20% {
        -webkit-transform: translateX(-3px) rotate(-1deg);
        transform: translateX(-3px) rotate(-1deg)
    }
    30% {
        -webkit-transform: translateX(3px) rotate(1deg);
        transform: translateX(3px) rotate(1deg)
    }
    40% {
        -webkit-transform: translateX(-3px) rotate(-1deg);
        transform: translateX(-3px) rotate(-1deg)
    }
    50% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg)
    }
    60% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg)
    }
    70% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg)
    }
    80% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg)
    }
    90% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0)
    }
    100% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0)
    }
}

@keyframes buzz-out {
    10% {
        -webkit-transform: translateX(3px) rotate(1deg);
        transform: translateX(3px) rotate(1deg)
    }
    20% {
        -webkit-transform: translateX(-3px) rotate(-1deg);
        transform: translateX(-3px) rotate(-1deg)
    }
    30% {
        -webkit-transform: translateX(3px) rotate(1deg);
        transform: translateX(3px) rotate(1deg)
    }
    40% {
        -webkit-transform: translateX(-3px) rotate(-1deg);
        transform: translateX(-3px) rotate(-1deg)
    }
    50% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg)
    }
    60% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg)
    }
    70% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg)
    }
    80% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg)
    }
    90% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0)
    }
    100% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0)
    }
}
.forum_image{
    float: right;
    overflow: hidden;
    margin-top: -15px;
}
.forum_list_item.application_required:hover:after{
    content: "申し込む>>";
    background-color: #F73030;
}
.event_list_item.not_required:hover:after,.forum_list_item.not_required:hover:after{
    content: '申し込み不要！';
    background-color: #305FF7;
}
.event_list_item.itsover:hover:after{
    content: '申し込み終了';
    background-color: #305FF7;
}
.itsover button.application_required{
    display: none;
}
.forum_list_item:hover:after{
    position: absolute;
    background-color: #F73030;
    color: white;
    text-align: center;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    padding-top: 34px;
    position: absolute;
    right: -10px;
    top: -10px;
    z-index: 1;
    box-sizing: border-box;
}
.gmap{
    margin-top: 50px;
}
label{
    padding: 5px 15px;
    display: block;
    width: 80px;
    text-align: center;
}
#application label{
    margin-right: 20px;
}
#application .label_title{
    display: block;
    width: 120px;
    margin-top: 30px;
}
#application .label_title.color5{
    width: 220px;
}
input[type="radio"],input[type="checkbox"]{
    float: left;
    margin-right: 5px;
}
input[type="text"],input[type="email"],textarea{
    background-color: #D8D8D8;
    border-radius: 4px;
    height: 25px;
    border: solid 1px #979797;
    margin:0px 10px ;
    box-shadow: 0px 1px 1px 0px rgba(0 ,0, 0 ,0.5) inset;

}
.event_confirm{
    text-align: left;
}
.personal_data{
    border-collapse:separate;
    border-spacing: 5px 40px;
    text-align: left;
}
.info{
    text-indent: 22px
}
.area{
    margin-top: 50px;
}
.area{
    text-align: left;
}
input[name="address"],input[name="mail"]{
    width: 100%;
}
input[name="tel"],
input[name="lom_name"]{
    width: 80%;
}
input[name="lom_name"]{
    margin-top: -50px;
}
input[name="adult"],input[name="child"]{
    width: 12%;
}
input[name="age"]{
    width: 25%;
}
form .button,input[type="submit"]{
    width: 140px;
    height: 60px;
    border: none;
    font-size: 1.5rem;
    margin-top: 30px;
    margin-left: 300px;
    cursor: pointer;
}
form .button:hover,input[type="submit"]:hover{
    background-color: #EDB53E
}
textarea{
    width: 100%;
    height: 100px;
}
.personal_data{
    font-weight: bold;
    font-size: 1.6rem;
}
.personal_data td{
    vertical-align: top;
}
.event_select{
    margin-top: 10px;
    border:solid 2px ;
    border-radius: 10px;
    padding: 10px;
    width: 20%;
    text-align: left;
}
.event_select_area{
    display: flex;
    justify-content: space-between;
}
.event_select1{
    border-color:#DD5EB8;
}
.event_select2{
    border-color: #7DB93B;
}
.event_select3{
    border-color: #3B79B9;
}
.event_select4{
    border-color: #3BB9AE
}
.event_location{
    margin-bottom: 15px;
}

.inquiry_address{
    margin-top: 50px;
    list-style: none;
    font-size: 1.8rem;
    line-height: 2em;
}
.form_select_area{
    margin-top: 10px;
    text-align: left;
}
footer{
    background-color:#3B79B9;
    color: white;
    height: 300px;
}
.footerinfo{
    padding-top: 70px;
    list-style: none;
    line-height: 2em;
    font-weight: bold;
    font-size: 1.5rem;
}
address{
    font-style: normal;
    font-size: 2rem;
}
.fixed{
      position: fixed;
      top: 0px;
      z-index: 9999;
      background-color: white;
      opacity: 0.8;
      display: block;
      width:100%;
    -webkit-transition: .5s;
    transition: .5s
}
.fixed .navi_main_item{
    float: left;
    margin-left: 35px;
    margin-right: 35px;
    height: 50px;
}
.capacity_over{
    text-decoration: line-through;
}
.capacity_over:before{
/*    content: "\0025A1";*/
    content: "";
    margin-right: 5px;
    text-decoration:none;
    float: left;
}
.capacity_over:after{
    content: "（受付終了）";
    display: inline-block;
    text-decoration:none;
}
@media screen and (max-width:1024px) {
    header,main,.content_column{
        width: 100%;
    }
    .header_pr{
        right: 0px;
        top: 0px;
    }
    .fixed .navi_main_item{
        margin:0 30px;
    }
}
@media screen and (max-width:768px) {
    .fb_fix{display: none;}
    .logo{
        width: 75px;
        height: auto;
    }
    .header_textarea{
        padding-top: 20px;
        width: 90%;
    }
    .header_pr{
        z-index: -1;
        width: 90px;
        height: 90px;
        font-size: 2rem;
        padding-top: 29px;
    }
    .event_lists{
        display: block;
    }
    .event_list_item{
        width: 100%;
    }
    .forum_define_list{
        width: 60%;
        margin-right: 0px;
    }
    .forum_image{
        margin-top: -150px;
    }
    .fixed .navi_main_item{
        margin: 0 9px;
    }
    .pc_none{
        display: block;
    }
    .button.pc_none{
        width: 180px;
        height: 43px;
        margin: 15px auto 10px;
        line-height: 1.5rem;
        padding-right: 10px;
        box-sizing: border-box;
        border-radius: 17px;
        font-weight: bold;
        text-align: center;
        color: #fff;
        position: relative;
    }
    .button.application_required{
        background-color: #F73030;
    }
    .button.not_required{
        background-color: #305FF7;
    }
    .event_list_item{
        height: auto;
    }
    .event_list_title{
        position: static;
    }
}

@media (max-width: 667px) {
.logo{
    float: left;
}
.header_textarea {
    width: 86%;
}

.header_organizer{
    font-size: 1.2rem;
}
.header_organizer:nth-child(2){
    padding-bottom: 10px;
}
.header_date{
    font-size: 3.2rem;
}
.header_day{
    font-size: 3.6rem;
}
.header_title {
    font-size: 3.2rem
}
.navi_main_item{
    font-size: 1.5rem;
}
.icatch_copy{
    width: 122px;
}
.vision_logo{
    width: 45%;
}
.event_lists .label, .forum_lists .label{
    margin-right: 10px;
}
.forum_item_content{
    width: 100%;
    float: none;
}
.forum_image{
    float: none;
    margin-top: 0px;
    display: block;
    margin: auto;
}
}
@media (max-width: 568px){
.fixed .navi_main_item {
    margin: 0 8px;
}

.header_title {
    font-size: 2.8rem;
}
.header_date{
    padding-right: 80px;
}
.header_place{
    font-size: 1.8rem;
}
.header_textarea {
    padding-top: 23px;
}
.navi_main_item {
    font-size: 1.3rem;
}
table { margin: 0 -10px;table-layout: fixed; }
.personal_data{
    width: 100%;
}
.event_select_area{
    flex-wrap: wrap;
}
.event_select{
    width: 40%;
}
input[name="lastname"],input[name="firstname"],
input[name="furiganalast"],input[name="furiganafirst"],
{
    width: 100%;
}
.form_label{
    width: 22%;
}
tr.sp_center{
    text-align: center;
}
tr.sp_center input[type="radio"]{
    float: none;
}
}
@media (max-width: 480px){
    .header_textarea {
        width: 84%;
    }
    .navi_main_item{
        display: block;
        float: left;
        height: 50px;
        font-size: 1.2rem;
    }
    .fixed .navi_main_item {
        margin: 0 4px;
    }
    .icatch_area{
        clear: both;
    }
    .icatch_copy {
        width: 84px;
    }
    .header_title {
        font-size: 2rem;
    }
    .header_date{
        font-size: 2rem;
    }
    .header_day {
        font-size: 3.0rem;
    }
    .header_place{
        font-size: 1.5rem;
    }
    .logo {
        width: 70px;
    }

    form label{
        width: 100%;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 1.5rem;
    }
    input[name="lastname"],input[name="firstname"],
    input[name="furiganalast"],input[name="furiganafirst"]{
        width: 90%;
    }

    form .button, input[type="submit"]{
        margin-left: 0px;
    }
}
@media (max-width: 425px){
    .navi_main{
        display: block;
    }
    .navi_main_item{
        display: block;
        float: left;
        margin: 0 8px;
        height: 50px;
        font-size: 1.2rem;
    }
    .event_image{
        width: 90%;
    }

    .header_textarea {
        width: 80%;
    }
    .icatch_area{
        clear: both;
    }

    .icatch_copy {
        width: 84px;
    }
    .header_title {
        font-size: 2rem;
    }
    .header_date{
        font-size: 2rem;
    }
    .header_place{
        font-size: 1.5rem;
    }
}

@media (max-width: 425px){
    .navi_main_item,.fixed .navi_main_item{
        margin: 0 14px;
        height: 42px;
    }
    .logo{
        width: 15%;
        padding-left: 10px;
        box-sizing: border-box;
    }
    .header_textarea{
        padding-top: 0px;
    }
    .header_pr{
        display: none;
    }
    .header_date {
        padding-right: 0;
    }
    .forum_define_list{
        width: 100%;
    }
    #application label{
        margin: 0px;
    }

}
@media (max-width: 375px){
    .navi_main_item, .fixed .navi_main_item {
        margin: 0px 7px;
    }
    .header_title {
        font-size: 1.8rem;
    }
    .header_organizer{
        font-size: 1rem;
    }
    .header_place {
        font-size: 1.2rem;
    }
    p,.forum_description{
        font-size: 1.3rem;
    }
    .forum_title{
        font-size: 1.6rem;
    }
    .event_define_list,.forum_define_list,.forum_speaker{
        font-size: 1.5rem;
    }
    .forum_list_title{
        font-size: 1.6rem;
    }
    .header_day {
        font-size: 3.1rem;
    }
}
@media (max-width: 360px){
    .navi_main_item, .fixed .navi_main_item {
        margin: 0px 6px;
    }
    .header_day {
      font-size: 2.4rem;
    }
    .header_date {
        margin-top: -34px;
    }

@media (max-width: 320px){
    .navi_main_item, .fixed .navi_main_item {
        margin: 0px 12px;
    }
    .header_textarea {
        width: 83%;
    }
    .header_title {
        font-size: 1.6rem;
    }
    .header_organizer {
        font-size: 0.8rem;
    }
    .header_place{
        padding-right: 0px;
        font-size: 1.2rem;
    }
    .header_date {
        font-size: 1.6rem;
        margin-top: -38px;
        padding-top: 10px;
    }
    .header_day {
      font-size: 2.2rem;
    }
    .sp_br{
        display: block;
    }
    .event_select {
        width: 100%;
    }
    .icatch_copy {
        width: 70px;
    }
    .content_section {
        margin: 3rem auto 6.2rem;
    }
    .forum_image{
        width: 90%;
    }
}