/*general*/

@font-face {
  font-family: heisei_maru;
  src: url("/view/event/fonts/Heisei_Maru_Gothic_Std_W4.otf") format("opentype");
}

@font-face {
  font-family: heisei_maru_bold;
  src: url("/view/event/fonts/Heisei_Maru_Gothic_Std_W8.otf") format("opentype");
}

html, body {
  overflow-x: hidden;
}
body {
  position: relative
}


.whiteGrayBG{
    position: relative;
    background-color: #FFF;
    z-index: 0;
    padding-bottom:20px;
}

.whiteGrayBG::before{
  content:"";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  /*ここで三角形のサイズを決める。
  必ず幅100vwにして、ブラウザサイズいっぱいにしてください。*/
  z-index: -1;
  border-width: 0 0 180px 600px ;
  border-color: transparent transparent #F5F5F5 transparent;
}

.grayWhiteBG{
    position: relative;
    background-color: #F5F5F5;
    z-index: 0;
    padding-bottom:20px;
}

.grayWhiteBG::before{
  content:"";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  /*ここで三角形のサイズを決める。
  必ず幅100vwにして、ブラウザサイズいっぱいにしてください。*/
  z-index: -1;
  border-width: 0 0 180px 600px ;
  border-color: transparent transparent #FFF transparent;
}



.blueButton{
    height:45px;
    padding-right:20px;
    padding-left:20px;
    color:white;
    font-size:20px;
    font-family:heisei_maru;
    border:0px solid white;
    width:auto;
    border-radius: 22.5px;
    background: #136AA8;
    cursor:pointer;
}

.blueButton:focus {
    outline-width: 0;
    outline: none !important;
}
.blueButton:active{
    opacity: 0.8;
}

@media (max-width:600px){
    .whiteGrayBG{
        
    }
    .whiteGrayBG::before{
        border-width: 0 0 30vw 100vw ;
    }
    
    .grayWhiteBG{
        
    }
    .grayWhiteBG::before{
        border-width: 0 0 30vw 100vw ;
    }
    
    .blueButton{
        padding:1vw;
    }
    
    .blueButton{
        height:10vw;
        font-size:3.5vw;
        padding-right:3.5vw;
        padding-left:3.5vw;
        border-radius:5vw;
    }
}


/*padding related*/

.paddingTop10{
    padding-top:10px;
}

.paddingTop20{
    padding-top:20px;
}

.paddingTop30{
    padding-top:30px;
}

.paddingBottom10{
    padding-bottom:10px;
}

.paddingBottom20{
    padding-bottom:20px;
}

.paddingBottom30{
    padding-bottom:30px;
}

@media (max-width:600px){
    .paddingTop10{
        padding-top:2vw;
    }

    .paddingTop20{
        padding-top:4vw;
    }

    .paddingTop30{
        padding-top:6vw;
    }

    .paddingBottom10{
        padding-bottom:2vw;
    }

    .paddingBottom20{
        padding-bottom:4vw;
    }

    .paddingBottom30{
        padding-bottom:6vw;
    }
}




/*group related components*/

.groupTitle{
    background-image:url("/view/event/img/group_bg.svg");
    background-color: #F5F5F5;
    padding-top:20px;
    padding-bottom:30px;
    background-size: 750px;
    background-position-x:-75px;
    background-position-y:-100px; 
}

.groupImage img{
    width:350px;
}


@media (max-width:600px){
    .groupTitle{
        background-size: 140vw;
        background-position-x:-20vw;
        background-position-y:-20vw; 
    }
    
    .groupImage img{
        width:55vw;
    }
}

/*event details*/


.eventImage img{
    width:100%;
    max-height:600px;
}

.titleText{
    color: #136AA8;
    font-size: 28px;
    font-family: heisei_maru_bold;
}

.subText{
    color: #136AA8;
    font-size: 20px;
    font-family: heisei_maru;
}

.dateText{
    color: #136AA8;
    font-size: 15px;
    font-family: heisei_maru;
}



hr.blueBar{
    width:45%;
    border: 2px solid #136AA8;
    border-radius: 2px;
    margin-top:20px;
    margin-bottom:20px;
    margin-left: auto;
    margin-right: auto;
}

.eventDetail{
    position: relative;
    background-color: #F5F5F5;
    z-index: 0;
    padding-bottom:20px;
}

.eventDetail::before{
  content:"";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  /*ここで三角形のサイズを決める。
  必ず幅100vwにして、ブラウザサイズいっぱいにしてください。*/
  z-index: -1;
  border-width: 0 0 180px 600px ;
  border-color: transparent transparent #fff transparent;
}

.eventImage{
    padding-bottom:62px;
    background:#F5F5F5;
    position:relative;
}
.eventImage .kazari{
    position:absolute;
    width:19%;
    bottom: 0;
    left: 0;
}


@media (max-width:600px){
    .titleText{
        font-size: 4.6vw;
    }
    
    .subText{
        font-size: 3.5vw;
    }
    
    .dateText{
        font-size: 3.0vw;
    }

    .eventDeital{
        
    }
    .eventDeital::before{
        border-width: 0 0 30vw 100vw ;
    }
    .eventImage{
        padding-bottom:10.4vw;
        position:relative;
    }
    .eventImage .kazari{
        position:absolute;
        width:19%;
        bottom: 0;
        left: 0;
    }
}

/* Event Steps */


.stepFrame {
    height: 40px;      /* equals max image height */
    width: 599px;
    white-space: nowrap;
    
    /*text-align: center;*/ 
    margin: 50px 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.stepNum {
    display: inline-block;
    vertical-align: middle;
    max-height: 40px;
    width:18.99%;
    float:left;
}

.numberIcon{
    /*padding:2%;*/
    height:50px;
    width:auto;
    bottom: 5px;
    /*line-height: 40px;*/
}

.stepText {
    /*background: #3A6F9A;*/
    display: inline-block;
    vertical-align: middle;
    max-height: 40px;
    width:78.99%;
    color: black;
    font-size: 22px;
    font-family: heisei_maru;
    white-space:normal;
}

.singleLineHeight{
    line-height:45px;
}


@media (max-width:600px){
    .stepFrame {
        height: 6vw;
        width: 100vw;
        white-space: nowrap;

        margin: 15vw 0;
    }
        
    .stepNum {
        display: inline-block;
        vertical-align: middle;
        max-height: 6vw;
    }
    
    .numberIcon{
        height:10vw;
        width:auto;
    }
    
    .stepText {
        max-height: 6vw;
        font-size: 4vw;
    }
    
    .singleLineHeight{
        line-height:6.4vw;
    }
}

/*button related*/

.buttonContainer{
    position:relative;
    display: inline-block;
    height:45px;
    padding-right:20px;
    padding-left:20px;
    color:white;
    font-family:heisei_maru;
    border:0px solid white;
    width: 50%;
    border-radius: 22.5px;
    background: #136AA8;
    cursor:pointer;
}

.buttonContainer:active{
    opacity: 0.8;
}

.buttonIcon{
    padding:10px;
    vertical-align: middle;
}

.buttonIcon img{
    height:25px;
    width:auto;
}

.buttonText{
    border:none;
    width: 80%;
    height:44px;
    line-height:44px;
    font-size:20px;
    font-family:heisei_maru;
    margin:auto;
}

.loginLinkBlue{
    position:relative;
    display: inline-block;
    height:45px;
    width: 40%;
    font-family:heisei_maru;
    cursor:pointer;
    color:#007AFF;
}

.loginLinkBlue:active{
    opacity: 0.8;
}

.loginText{
    border-bottom: 2px solid #007AFF;
    height:35px;
    margin-left:0px;
    width: auto;
}

@media (max-width:600px){
    .buttonContainer{
        height:12vw;
        border-radius: 6vw;
        padding-right:2vw;
        padding-left:2vw;
        width: 55%;
    }

    .buttonIcon{
        padding:2.9vw;
    }

    .buttonIcon img{
        height:6vw;
    }

    .buttonText{
        height:12vw;
        line-height:12vw;
        font-size:3.5vw;
    }
    
    .loginLinkBlue{
        height:12vw;
        width: 42%;
    }
    .loginText{
        border-bottom: 2px solid #007AFF;
        height:9vw;
        line-height:12vw;
        font-size:3.5vw;
        margin-left:2.5vw;
    }
}


/*code input*/
.inputContainer{
    position:relative;
    width: 85%;
    margin-left:7.49%;
    height:60px;
    display: inline-block;
    border-radius: 30px;
    box-sizing: border-box;
    background:white;
    box-shadow:
        0 0 2.2px rgba(0, 0, 0, 0.034),
        0 0 5.3px rgba(0, 0, 0, 0.048),
        0 0 10px rgba(0, 0, 0, 0.06)
    ;
}

.keyIcon{
    padding:8px;
    vertical-align: middle;
}

.keyIcon img{
    height:45px;
    width:auto;
}

.textInput{
    border:none;
    width: 90%;
    height:59px;
    line-height:59px;
    font-size:20px;
    font-family:heisei_maru;
}

.textInput:focus {
    outline-width: 0;
}

.sendButton{
    padding:8px;
    vertical-align: middle;
    float:right;
}

.sendButton button{
    height:45px;
    padding-right:20px;
    padding-left:20px;
    color:white;
    font-size:20px;
    font-family:heisei_maru;
    border:0px solid white;
    width:auto;
    border-radius: 30px;
    background: #136AA8;
    cursor:pointer;
}

.sendButton button:focus {
    outline-width: 0;
    outline: none !important;
}
.sendButton button:active{
    opacity: 0.8;
}

@media (max-width:600px){
    .inputContainer{
        height:12vw;
        border-radius: 6vw;
    }

    .keyIcon{
        padding:1vw;
    }

    .keyIcon img{
        height:10vw;
    }

    .textInput{
        height:11.9vw;
        line-height:11.9vw;
        font-size:3.5vw;
    }
    
    .sendButton{
        padding:1vw;
    }
    
    .sendButton button{
        height:10vw;
        font-size:3.5vw;
        padding-right:3.5vw;
        padding-left:3.5vw;
        border-radius:5vw;
    }
}

/* result page */



.resultBG{
    background-image:url("/view/event/img/top_bg.png");
    background-repeat: no-repeat;
    background-size: 100%;
}


.resultTitleContainer{
    position:relative;
    padding-bottom:25px;
}

.resultDecoration img{
    position:absolute;
    top:40px;
    width:91.9%;
    left:4%;
}

.resultTitle{
    padding-top:120px;
    color:white;
    font-family:heisei_maru_bold;
    font-size:35px;
}

hr.whiteBar{
    width:30%;
    border: 2px solid white;
    border-radius: 2px;
    margin-top:20px;
    margin-bottom:20px;
    margin-left: auto;
    margin-right: auto;
}
.resultImage img{
    width:70%;
    border-radius: 0px 50px;
    cursor:pointer;
    box-shadow:
        0 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0 6.7px 5.3px rgba(0, 0, 0, 0.048),
        0 12.5px 10px rgba(0, 0, 0, 0.06),
        0 22.3px 17.9px rgba(0, 0, 0, 0.072)
}

.toVoiSnapPage{
    margin-bottom:20px;
}

.resultInfo{
    background-color:#F5F5F5;
}

.codeText{
    color:#747474;
    font-family:heisei_maru;
    font-size:20px;
}

.resultButton{
    width:60%;
}



.resultInfo{
    background-image:url("/view/event/img/bg_dots.svg");
    background-repeat: no-repeat;
    padding-top:20px;
    padding-bottom:60px;
    background-size: 750px;
    background-position-x:-120px;
    background-position-y:100%; 
}

@media (max-width:600px){
    .resultTitleContainer{
        padding-bottom:4.2vw;
    }

    .resultDecoration img{
        top:7.5vw;
    }

    .resultTitle{
        padding-top:20vw;
        font-size:5.8vw;
    }

    hr.whiteBar{
        width:30%;
        border: 1px solid white;
        border-radius: 1px;
        margin-top:3.3vw;
        margin-bottom:3.2vw;
        margin-left: auto;
        margin-right: auto;
    }
    
    .resultImage img{
        width:80%;
        border-radius: 0px 10vw;
    }
    
    .codeText{
        font-size:4vw;
    }
    
    .resultInfo{
        background-size: 140vw;
        background-position-x:-30vw;
    }
        
}