*{
    box-sizing:border-box;
    margin: 0;
    padding: 0;
}


html{
    width: 100%;
}
@font-face {
	font-family: 'Bebas';
	src: url(assets/BEBAS.ttf);
}
body{
    font-family: "游ゴシック体", "Yu Gothic", "YuGothic", sans-serif;
    font-size: 12px;
    padding: 0;
    width: 100%;
    /* 絶対値指定 */
    letter-spacing: 1.5px;
    /* 相対値指定 */
    letter-spacing: calc(1px - .0625em);
}

.box{
    margin-top: 10vh;
    clear: both;
    display: inline-block;
    width: 100%;
}
h1{
    font-family: 'Bebas';
    color: #3E3A39;
    font-size: 64px;
    letter-spacing: 0.2em;
    text-align: center;
    line-height: 1.4em;
}
h2{
    color: #3E3A39;
    font-size: 22px;
    letter-spacing: 0.2em;
    text-align: center;
    margin-bottom: 1em;
}

h3{
    text-align: center;
    letter-spacing: 4px;
    font-size: 12px;
}
p{
    line-height: 1.8em;
    letter-spacing: 0.2em;

}
header{
    position: relative;
    height: 500px;
}

.entry{
    padding: 40px 20px;
    margin: 20px 0;
    position: relative;
    z-index: 1;
}


.entry-btn{
    position: absolute;
    top: 50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 80%;
    clear: both;
    text-align: center;
    display: inline-block;
    padding: 0.65em 2em;
    color: #fff;
    background: #F5CD5F;
    text-decoration: none;
    letter-spacing: 0.8em;
    font-weight: bold;
    font-size: 40px;
     -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.entry-btn:hover{
    color: #F5CD5F;
    background: #fff;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

img{
    width: 100%;
}
.logo img{
    min-width: 400px;
    width: 50px;
    text-align: left;
}
header .logo{
    position: absolute;
    top: 200px;
    left: 40px;
}
header .logo p{
    font-size: 33px;
    letter-spacing: 0.64em;
    font-weight: bold;
    float: right;
    color: #3E3A39;
        margin-left: 32px;
}
#top-image{
    width: 80vw;
    float: right;
    margin-top: 20px;
}

.intro{
    clear: both;
    margin: 60px auto;
    width: 100%;
    height: 50vh;
}
.intro img{
    width: 100vw;
    margin-bottom: -230px;
/*    margin-left: 32px;*/
}
.intro-message{
    background: #F8F7F5;
    padding: 20px;
    padding-top: 260px; 
    padding-bottom: 80px;
}
.intro-message p{
    font-size: 18px;
    line-height: 1.8em;
    letter-spacing: 0.14em;
    margin-left: 32px;
}
.intro-message span{
    color: #9B9B9B;
}

.about-contents{
    margin: 20px 0;   
}

.about-meetup{
    margin: 20px;
    width: 90%;
}
.about p{
    font-size: 14px;
    line-height: 1.8em;
    letter-spacing: 0.14em;
    margin-left: 32px;
}

.contents{
    background-image: url(assets/contents-image.jpg);
    min-height: 60vh;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0; 
    margin: 40px auto;
    text-align: center;
    content:"";
}

.contents h1,.contents h2, .contents h3{
    color: #fff;
}
.contents-content img{
    width: 80%;
    margin: 20px 0;
}
.contents-content{
/*    display: flex;*/
    padding: 0 auto;
}




/*GUEST*/

.guest{
    padding-bottom: 4em;
    padding-top: 0.3em;
    z-index: 1;
    width: 80%;
}
.guest h2{
    font-size: 2.4em;
    margin-top: 1em;
    color: #111;
    letter-spacing: 0.08em;
}
.guest-content{
    width: 80%;
    content: "";
    background: #F8F7F5;
    display: flex;
    margin: 40px auto;
    padding: 40px 0;
}
.guest-prof{
    width: 360px;
    padding: 0 3vw;
    margin: 20px;
/*    background: url(assets/guest-bg.png);*/
/*    background-size: cover;*/
/*    background-position: center;*/
    background: #fff;
}
.guest-prof img{
    margin: 20px;
    width: 90%;
    display: inline-block;
    text-align: center;
}
.guest-prof p{
    padding-top: 1.2em;
    font-size: 0.74vw;
    font-family:  "游ゴシック体", "Yu Gothic", "YuGothic";
    line-height: 1.4em;
    letter-spacing: 0.14em;
    margin: 0;
}
.prof-bottom{
    display: block;
    margin-bottom: 36px;
}

.guest-prof a{
    color: #bbb;
    font-size: 12px;
}

.guest-prof a:hover{
    color: #eee;
    font-size: 12px;
}

.name{
    font-size: 1.2vw;
    letter-spacing: 0.2em;
    color: #111;
}
.name-eng{
    font-size: 1.2vw;
    font-family: 'Avenir';
    font-weight: 100;
    opacity: 0.6;
    color: #bbb;
}


/*DETAIL*/
.detail{
    width: 100%;
}
.detail p{
    font-size: 18px;
    line-height: 1.4em;
}
.detail span{
    font-size: 16px;
}
.access-google-map{
    width: 100%;
    text-align: center;
}
.place-txt{
     margin: 8px;   
}

/*MESSAGE*/
.message img{
    width: 100%;
}
footer{
    background: #f9f9f9;
    text-align: center;
    width: 100%;
    margin: auto;
    margin-top: 40px; 
    font-family: "futura-pt",sans-serif;
    font-size: 2em;
    letter-spacing: 0.18em;
    padding: 20px;
}

.share{
    text-align: center;
    margin-top: 100px;
}
.share p{
    font-size: 24px;
}
.socialIcon{
    margin: 16px;
    width: 100%;
}
.socialIcon img{
    width: 26%;
    padding: 20px;
    margin-bottom:20px;
}

/*button*/
.btn{
  border-radius: 12px;
}
.btn:hover, .btn:focus{
  transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
  -webkit-animation: gelatine 0.5s 1;
          animation: gelatine 0.5s 1;
}

@-webkit-keyframes gelatine {
  from,to {
    -webkit-transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(0.9, 1.1);
  }
  50% {
    -webkit-transform: scale(1.1, 0.9);
  }
  75% {
    -webkit-transform: scale(0.95, 1.05);
  }
  from,to {
    -webkit-transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(0.9, 1.1);
  }
  50% {
    -webkit-transform: scale(1.1, 0.9);
  }
  75% {
    -webkit-transform: scale(0.95, 1.05);
  }
}
@keyframes gelatine {
  from,to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(0.9, 1.1);
    transform: scale(0.9, 1.1);
  }
  50% {
    -webkit-transform: scale(1.1, 0.9);
    transform: scale(1.1, 0.9);
  }
  75% {
    -webkit-transform: scale(0.95, 1.05);
    transform: scale(0.95, 1.05);
  }
  from,to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(0.9, 1.1);
    transform: scale(0.9, 1.1);
  }
  50% {
    -webkit-transform: scale(1.1, 0.9);
    transform: scale(1.1, 0.9);
  }
  75% {
    -webkit-transform: scale(0.95, 1.05);
    transform: scale(0.95, 1.05);
  }
}

/*レスポンシブ*/
  @media screen and (max-width: 700px) {
      .entry{
            padding: 40px 20px;
            margin: 60px 0;
            position: relative;
            z-index: 1;
        }
      .intro-message p {
            font-size: 14px;
            margin: 0;
        }
      .entry-btn{
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
            width: 40%;
            clear: both;
            text-align: center;
            display: inline-block;
            padding: 0.65em 2em;
        }

      .logo img{
            min-width: 300px;
            width: 50px;
            text-align: left;
        }
      header .logo p{
            font-size: 16px;
            letter-spacing: 0.64em;
            font-weight: bold;
            float: left;
            color: #3E3A39;
        }

        .entry-btn{
            position: absolute;
            top: 50%;
            left:50%;
            -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
            width: 80%;
            clear: both;
            text-align: center;
            display: inline-block;
            padding: 0.65em 2em;
            color: #fff;
            background: #F5CD5F;
            text-decoration: none;
            letter-spacing: 4px;
            font-weight: bold;
            font-size: 20px;
             -webkit-transition: .3s ease-in-out;
          transition: .3s ease-in-out;
        }

        .entry-btn:hover{
            color: #F5CD5F;
            background: #fff;
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .about{
            margin: 200px 0;   
        }
      .about-contents p {
            font-size: 14px;
            margin: 0;
        }
      .about-contents{
          padding: 20px;
      }
          .guest{
            margin-top: 40px;
            padding-bottom: 2em;
              width: 100%;
            }
            .guest h2{
                font-size: 2.4em;
                margin-top: 0;
                color: #111;
                letter-spacing: 0.08em;
            }
            .guest-content{
                background: #F8F7F5;
                display: block;
                content: "";
                width: 100vw;
                padding: 40px auto;
            }
            .guest-prof{
                width: 90%;
                padding: 0;
                margin: 20px;
            }
            .guest-prof img{
                width: 80vw;
            }
            .guest-prof p{
                padding: 0.6vw;
                font-size: 3.4vw;
                font-family:  "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo";
                line-height: 1.4em;
                letter-spacing: 0.14em;
                margin: 12px 20px;
            }

            .guest-prof a{
                font-size: 3.2vw;
            }

            .guest-prof a:hover{
                color: #eee;
                font-size: 12px;
            }

            .name{
                font-size: 4.2vw;
                letter-spacing: 0.2em;
                color: #111;
            }
            .name-eng{
                font-size: 4vw;
                font-family: 'Avenir';
                font-weight: 100;
                opacity: 0.6;
                color: #bbb;
            }
    }

    @media screen and (min-width: 500px) and (max-width: 999px) {
            /*　画面サイズ 500pxから999pxまで適用　*/

    }

    /*PC*/
    @media screen and (min-width:1000px) {
    /*　画面サイズ 1000px以上から適用　*/
        header .logo{
            position: absolute;
            top: 400px;
            left: 40px;
        }
        .logo img {
            min-width: 580px;
            width: 32em;
            text-align: left;
        }
        #top-image{
            width: 60vw;
            float: right;
            margin-top: 20px;
        }
        header .logo p{
            font-size: 24px;
            letter-spacing: 0.64em;
            font-weight: bold;
            float: left;
            color: #3E3A39;
        }
        
        .entry{
            padding: 40px 20px;
            margin: 120px 0;
            position: relative;
        }


        .entry-btn{
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
            width: 40%;
            clear: both;
            text-align: center;
            display: inline-block;
            padding: 0.65em 2em;
            margin-top: 160px;
            color: #fff;
            background: #F5CD5F;
            text-decoration: none;
            letter-spacing: 0.8em;
            font-weight: bold;
            font-size: 24px;
             -webkit-transition: .3s ease-in-out;
          transition: .3s ease-in-out;
            border-bottom: solid 4px #A88D43;
            border-radius: 3px;
        }
        

        .entry-btn:hover{
            -ms-transform: translateY(4px);
            -webkit-transform: translateY(4px);
            transform: translateY(4px);/*下に動く*/
            border-bottom: none;/*線を消す*/
            color: #fff;
            background: #F5CD5F;
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
        
        .intro{
            clear: both;
            margin: 320px 32px 0 32px;
            width: 100%;
            height: 50vh;
        }
        .intro img{
            width: 640px;
            margin-bottom: -230px;
            margin-left: 32px;
        }
        .intro-message p{
            font-size: 18px;
            line-height: 1.8em;
            letter-spacing: 0.14em;
            margin-left: 32px;
        }
        .contents{
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
/*            background-size: 100vh;*/
            padding: 80px 0; 
            margin: 40px auto;
            text-align: center;
            content:"";
        }

        .contents-content{
           display: flex;
            width: 930px;
            margin: 20px auto;
        }
        .contents-content img{
            width: 420px;
            margin: 20px;
            text-align: center;
        }
        .about-meetup{
            margin: 0 auto;
        }
        .about-meetup p{
            padding: 20px 0;
        }
        .meetup-slide img{
            width: 100%;
        }
        
        .about{
            margin-top: 100px;
            text-align: center;
            padding: 80px 0;
        }
        .message{
            text-align: center;
        }
    
        .message img{
            width: 50%;
        }
        
        .socialIcon{
            margin: 16px;
            width: 100%;
        }
        .socialIcon img{
            width: 80px;
            padding: 20px;
            margin-bottom:20px;
        }
        .share p{
            font-size: 18px;
        }
        .guest{
            position: relative;
            height: 100vh;
            margin: 120px 0;
            width: 100%;
        }
        .guest-01{
            width: 360px;
        }
        .guest-02{
            width: 360px;
        }
        .guest-list{
                display: flex;
           position: absolute;
            left: 50%;
            top: 70%;
            -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
        }
        .detail{
            max-width: 960px;
            text-align: center;
            display: block;
            margin: 60px auto;
        }

    }/*PC*/