
/* ------------------------------------------------------------------ */
/* General and Common Styles
/* ------------------------------------------------------------------ */

html,body {
    max-width: 100%;
    height: 100%;
    overflow-x: hidden;
    background: #F2F2FA url(img/grey.png); /*#F8F8FF*/
}


/* ------------------------------------------------------------------ */
/* Header Styles
/* ------------------------------------------------------------------ */

header {
   height: 50px;
   width: 100%;
   position: fixed;
   /*left: 0;*/
   top: 0;
   z-index: 990;
}

header .logo {
    margin-left: 10px;
    margin-right: 20px;
    margin-top: 17px;
    /*float: left;*/
    width: auto;
    z-index: 991;
    position: relative;
}
header .logo a {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    max-width: 160px;
}

header .logo a img {
    width: 640px;
}


/* header pr_phrase */
header .pr-phrase {
   margin-top: 1px;
   width: auto;
   position: relative;
   font-size: 20px;
   text-align: center;
   z-index: 992;
}

header .pr-phrase-sp {
   margin-top: -4px;
   width:100%;
   position: relative;
   text-align: center;
   font-size: 17px;
   z-index: 992;
}

#close-button {
    /* color: #777;
    font-size: 26px;
    font-weight: bold;
    position: fixed;
    top: 0px;
    right: 15px;
    z-index: 2000; */
    color: #777;
    font-size: 40px;
    font-weight: bold;
    /* position: fixed; */
    float: right;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    z-index: 5000;
    margin-right: 14px;
    padding-top: 20px;
}

#close-button-sp {
    color: #777;
    font-size: 26px;
    font-weight: bold;
    position: fixed;
    top: 10px;
    right: 0px;
    width: 35px;
    padding-left:5px;
    z-index: 5001;
}

/* ------------------------------------------------------------------ */
/* CalPush Section
/* ------------------------------------------------------------------ */

#calpush {
   padding-top: 60px;
   padding-bottom: 30px;
   /*background: #E6E6E6 url(img/grey.png);*/
   background: #F2F2FA url(img/grey.png);
   overflow: hidden;
}

#calpush .row { max-width: 1040px; }

/* calpush Text */
.calpush-text {
    color: #373B3E;
    width: 100%;
    text-align: center;
    margin: 10px auto 10px auto;
}
.calpush-text h1 {
    font: 30px/1.5em 'montserrat-regular', sans-serif;
    color: #666;
    margin-bottom: 16px;
    text-shadow: 0px 1px 4px rgba(0, 0, 0, .2);
}
.calpush-text h2 {
    font: 28px/1.5em 'montserrat-regular', sans-serif;
    color: #666;
    padding: 10px 0;
    margin-bottom: 10px;
    text-shadow: 0px 1px 4px rgba(0, 0, 0, .2);
}
.calpush-text h3 {
    font: 25px/1.4em 'montserrat-regular', sans-serif;
    color: #666;
    padding-bottom: 5px;
    margin-bottom: 5px;
    text-shadow: 0px 1px 4px rgba(0, 0, 0, .2);
}
.calpush-text h4 {
    font: 21px/1.1em 'montserrat-regular', sans-serif;
    color: #666;
    padding: 0;
    margin-bottom: 10px;
    text-shadow: 0px 1px 4px rgba(0, 0, 0, .2);
}
.calpush-text h5 {
    font: 19px/1.0em 'montserrat-regular', sans-serif;
    color: #666;
    padding-bottom: 5px;
    margin-bottom: 10px;
    text-shadow: 0px 1px 4px rgba(0, 0, 0, .2);
}
.calpush-text h1 span,
.calpush-text a { color: #11ABB0; }
.calpush-text p {
    font: 16px/30px 'opensans-regular', sans-serif;
    padding: 0;
    margin: 12px 8% 0;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}

/* calpush Image */
.calpush-image {
   width: 100%;
   margin: 0 auto;
}
.calpush-image img {
   vertical-align: bottom;
   display: block;
}

#calpush .buttons {
   text-align: center;
   margin: -9px 0px 10px 0px;
}
#calpush .buttons .button {
    /*font: 17px/22px 'montserrat-bold', sans-serif;*/
    font: 16px/16px 'montserrat-bold', sans-serif;
    background: #11ABB0;
    color: #fff;
    display: inline-block;
    text-decoration: none;
    letter-spacing: 2px;
    padding: 10px 12px;
    margin-bottom: 15px;
}

#calpush .buttons .calpush-google-btn {
   background: #0066cc; /*#3175EB;*/
   margin-top: 10px;
   margin-right: 10px;
   width:100%;
   border-radius: 5px;
   z-index: 20000;
}
#calpush .buttons .calpush-google-btn:hover { background: #5A90EF; }

#calpush .buttons .calpush-ical-btn {
   background: #0066cc; /*#3175EB;*/
   border-radius: 3px;
}
#calpush .buttons .calpush-ical-btn:hover { background: #5A90EF; }

#calpush-close {
    font: 18px/22px 'montserrat-bold', sans-serif;
    letter-spacing: 2px;
    border-radius: 3px;
}

.calpush-info {
    margin-top:20px;
    margin-bottom:10px;
    border: solid 3px #EEEEEE;
    padding: 1px 0 3px 0;
}

.calpush-event-title {
    margin-top:-5px;
    text-align: center;
}
/*.img-responsive {
    height: 300px;
}*/


/* ------------------------------------------------------------------ */
/* SNS button
/* ------------------------------------------------------------------ */

@media screen and (max-width: 499px){
    #sns-button {
        text-align: center;
        padding-bottom: 15px;
        margin-top: 20px;
    }
}

@media screen and (min-width: 500px){
    #sns-button {
        text-align: center;
        padding-bottom: 20px;
        margin-top: 20px;
    }
}

.share-btn {
    width: 45px;
    height: 45px;
}

.share-url{
    padding: 0px 6px;
}

/* ------------------------------------------------------------------ */
/* CalPush Banner Section
/* ------------------------------------------------------------------ */
#calpush-banner {
   background: #D3D3D3;
   padding-top: 40px;
   padding-bottom: 35px;
   background-image:url(img/grey.png);
   background-position:center bottom;
   background-repeat:repeat;
   background-size:contain;
}

#calpush-support-info {
   /*background: #3d3d3d;*/
   color: #333;
   padding-top: 0px;
   padding-bottom: 20px;
   /*background-image:url(img/congruent_outline.png);*/
   background-position:center bottom;
   background-repeat:repeat;
   background-size:contain;
   margin-top: -15px;
   text-align: center;
}
/* #calpush-support-info a {color: #333;} */
#calpush-support-info a:visited { color: #0059B2; }
#calpush-support-info a:hover, footer a:focus { color: #0059B2; }

#calpush-support-info li {
    display: inline-block;
    font-size: 11px;
    margin-right: 5px;
    text-decoration: underline;
}

#main-slider {
    margin-top: -5px;
}

/* ------------------------------------------------------------------ */
/* Footer
/* ------------------------------------------------------------------ */

footer {
   padding-top: 20px;
   margin-bottom: 30px;
   color: #3c4753;
   font-size: 16px;
   line-height: 22px;
   position: relative;
   text-align: center;
}

footer a, footer a:visited { color: #0A6567; }
footer a:hover, footer a:focus { color: #00b2b2; }


/* copyright */
footer .google-cal .copyright {
   margin-top: 40px;
   padding: 10px 18px;
   clear: both;
   font-size: 0.5em;
}

.google-cal {
   font-size: 85%;
}

.copyright-pc {
   margin-top: 5px;
   margin-bottom: 10px;
   clear: both;
   font-size: 0.6em;
   /*font-size: 80%;*/
   text-decoration: none !important;
}

.copyright-sp {
   margin-top: 5px;
   margin-bottom: 10px;
   clear: both;
   font-size: 0.7em;
   /*font-size: 60%;*/
   text-decoration: none !important;
}

/* ------------------------------------------------------------------ */
/* reloader
 ------------------------------------------------------------------ */

#preloader  {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: #fff;
   height: 100%;
}
#status  {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 64px;
   height: 64px;
   margin: -32px 0 0 -32px;
   padding: 0;
}

/* Basic  ------------------------------------------------------- */

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html { font-size: 62.5%; }

body {
    font-weight: normal;
    font-size: 15px;
    line-height: 25px;
    color: #838C95;

   -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;

   overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
   color: #666;
   font-family: 'montserrat-bold', sans-serif;
   text-shadow: 0px 1px 4px rgba(0, 0, 0, .2);
   font-weight: normal;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 30px; line-height: 38px; margin-bottom: 16px; letter-spacing: 1px; }
h2 { font-size: 26px; line-height: 32px; margin-bottom: 16px; }
h3 { font-size: 24px; line-height: 30px; margin-bottom: 12px; }
h4 { font-size: 22px; line-height: 30px; margin-bottom: 6px; }
h5 { font-size: 17px; line-height: 28px; }
h6 { font-size: 16px; line-height: 26px; }
.subheader { }

em { font: 18px/30px 'opensans-bold', sans-serif; }
strong, b { font: 16px/30px 'opensans-bold', sans-serif; }
small { font-size: 11px; line-height: inherit; }


/*  Links  ------------------------------------------------------- */

a, a:visited {
   text-decoration: none;
   outline: 0;
   color: #11ABB0;

   -webkit-transition: color .3s ease-in-out;
   -moz-transition: color .3s ease-in-out;
   -o-transition: color .3s ease-in-out;
   transition: color .3s ease-in-out;
}
p a, p a:visited { line-height: inherit; }

/* Media   --------------------------------------------------------- */

img,
iframe,
embed,
object {
   max-width: 100%;
   height: auto;
}
img.pull-right { margin: 12px 0px 0px 18px; }
img.pull-left { margin: 12px 18px 0px 0px; }

/* Buttons  --------------------------------------------------------- */
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}


/* default
--------------------------------------------------------------- */
.row {
   width: 96%;
   max-width: 1008px;
   margin: 0 auto;
}
/* fixed width for IE8 */
.ie .row { width: 1000px ; }

.narrow .row { max-width: 980px; }

.row .row { width: auto; max-width: none; margin: 0 -18px; }

/* row clearing */
.row:before,
.row:after {
    content: " ";
    display: table;
}
.row:after {
    clear: both;
}

.column, .columns {
   position: relative;
   margin-top: 15px;
   padding: 0 18px;
   min-height: 1px;
   float: left;
}
.column.centered, .columns.centered  {
    float: none;
    margin: 0 auto;
}

/* column widths */
.row .one         { width: 8.33333%; }
.row .two         { width: 16.66667%; }
.row .three       { width: 25%; }
.row .four        { width: 33.33333%; }
.row .five        { width: 41.66667%; }
.row .six         { width: 50%; }
.row .seven       { width: 58.33333%; }
.row .eight       { width: 66.66667%; }
.row .nine        { width: 75%; }
.row .ten         { width: 83.33333%; }
.row .eleven      { width: 91.66667%; }
.row .twelve      { width: 100%; }

/* Offsets */
.row .offset-1    { margin-left: 8.33333%; }
.row .offset-2    { margin-left: 16.66667%; }
.row .offset-3    { margin-left: 25%; }
.row .offset-4    { margin-left: 33.33333%; }
.row .offset-5    { margin-left: 41.66667%; }
.row .offset-6    { margin-left: 50%; }
.row .offset-7    { margin-left: 58.33333%; }
.row .offset-8    { margin-left: 66.66667%; }
.row .offset-9    { margin-left: 75%; }
.row .offset-10   { margin-left: 83.33333%; }
.row .offset-11   { margin-left: 91.66667%; }

/* Go To Top Button */
#go-top {
   position: relative;
   top: -30px;
   left: 50%;
   margin-left: -30px;
   text-align: center;

}
#go-top a {
   text-decoration: none;
   border: 0 none;
   display: block;
   width: 60px;
   height: 60px;
   background: #525252;

   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;

   color: #fff;
   font-size: 21px;
   line-height: 60px;
   border-radius: 100%;
}
#go-top a:hover { background: #0F9095; }

#go-top a img {
    margin-bottom: -2px;
}
/*
#ln-menu-guide {
    top: -10px;
    right:29px;
    width:65px;
    position:fixed;
    z-index:10000
}

#tw-menu-guide {
    top: -10px;
    right:-7px;
    width:65px;
    position:fixed;
    z-index:10001
}

#fb-menu-guide {
    top: -10px;
    right:-8px;
    height:65px;
    position:fixed;
    z-index:10002;
}*/

#ln-menu-guide {
    top: 15px;
    right:30px;
    width:auto;
    font-size: 13px;
    text-align: center;
    padding-right: 5px;
    position:fixed;
    z-index:10000;
    border-radius: 3px;
    color:#fff;
    background-color: #1919ff;
    /*background: #f88139;
    background: -moz-linear-gradient(top, #f88139 0%, #f95400 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f88139), color-stop(100%,#f95400));
    background: -webkit-linear-gradient(top, #f88139 0%,#f95400 100%);
    background: -o-linear-gradient(top, #f88139 0%,#f95400 100%);
    background: -ms-linear-gradient(top, #f88139 0%,#f95400 100%);
    background: linear-gradient(to bottom, #f88139 0%,#f95400 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f88139', endColorstr='#f95400',GradientType=0 );
    */
}

#tw-menu-guide {
    top: 15px;
    right:20px;
    width:auto;
    text-align: right;
    background-color: #1919ff;
    color:#fff;
    position:fixed;
    z-index:10001
}

#fb-menu-guide {
    top: 15px;
    right:5px;
    width:auto;
    text-align: right;
    position:fixed;
    z-index:10002;
    color:#fff;
    background-color: #1919ff;
    /*background: #f88139;
    background: -moz-linear-gradient(top, #f88139 0%, #f95400 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f88139), color-stop(100%,#f95400));
    background: -webkit-linear-gradient(top, #f88139 0%,#f95400 100%);
    background: -o-linear-gradient(top, #f88139 0%,#f95400 100%);
    background: -ms-linear-gradient(top, #f88139 0%,#f95400 100%);
    background: linear-gradient(to bottom, #f88139 0%,#f95400 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f88139', endColorstr='#f95400',GradientType=0 );*/
}
/*
#ln-menu-arrow {
    top: -12px;
    right:55px;
    width:16px;
    position:fixed;
    z-index:9996
}

#tw-menu-arrow {
    top: -12px;
    right:30px;
    width:16px;
    position:fixed;
    z-index:9997
}

#fb-menu-arrow {
    top: -12px;
    right:15px;
    width:16px;
    position:fixed;
    z-index:9998
}
*/

#ln-menu-arrow {
    top: -13px;
    right:43px;
    width:70%;
    position:fixed;
    z-index:9996
}

#tw-menu-arrow {
    top: -13px;
    right:4px;
    width:70%;
    position:fixed;
    z-index:9997
}

#fb-menu-arrow {
    top: -13px;
    right:2px;
    width:70%;
    position:fixed;
    z-index:9998
}

.open_safari_note {
    margin-top: -15px;
    color:blue;
    text-align: center;
    font-size: 13px;
    width: 100%;
}

@-webkit-keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-moz-keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-o-keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media only screen and (max-width: 41.250em) { /* 660 */

	#container	{ width: 100%; }

}

/* screenwidth less than or equal 480px - mobile wide
--------------------------------------------------------------- */
@media only screen and (min-width: 480px) {

    header {
        height: 55px;
    }

    header .logo a {
        width: 125px;
    }

    header .pr-phrase {
        font-size: 22px;
    }

    #close-button {
        top: 10px;
        right: 30px;
    }

    .row { width: auto; }

    .calpush-info {
        margin-top:30px;
    }

    #calpush .buttons {
        text-align: center;
        margin: 10px 0px 10px 0;
    }

    #calpush .buttons .button {
        font: 18px/22px 'montserrat-bold', sans-serif;
        letter-spacing: 2px;
    }

    #calpush .buttons .calpush-google-btn {
        padding: 7px 9px;
        width: 80%;
    }

    #calpush .buttons .calpush-ical-btn {
        padding: 7px 9px;
    }

    .calpush-text {
        margin: 10px auto 20px auto;
    }

    #go-top a img {
        margin-bottom:-4px;
    }

    footer {
        padding-top: 50px;
        margin-bottom: 60px;
    }

}



/* screenwidth less than 768px - mobile/smaller tablets
--------------------------------------------------------------- */
@media only screen and (min-width: 767px) {

    header {
        height: 58px;
    }

    header .logo a {
        width: 160px;
    }

    header .pr-phrase {
        font-size: 24px;
        line-height: 32px;
    }

    /* Offsets */
    .row .offset-1    { margin-left: 0%; }
    .row .offset-2    { margin-left: 0%; }
    .row .offset-3    { margin-left: 0%; }
    .row .offset-4    { margin-left: 0%; }
    .row .offset-5    { margin-left: 0%; }
    .row .offset-6    { margin-left: 0%; }
    .row .offset-7    { margin-left: 0%; }
    .row .offset-8    { margin-left: 0%; }
    .row .offset-9    { margin-left: 0%; }
    .row .offset-10   { margin-left: 0%; }
    .row .offset-11   { margin-left: 0%; }

    #calpush .buttons .button {
        font: 20px/30px 'montserrat-bold', sans-serif;
    }

    #calpush .buttons .calpush-google-btn {
        width:60%;
    }

    footer {
        padding-top: 40px;
        margin-bottom: 50px;
    }

}

/* smaller screens
--------------------------------------------------------------- */
@media only screen and (min-width: 900px) {

    header {
        height: 60px;
    }

    header .logo a {
        width: 160px;
    }

    footer {
        padding-top: 40px;
        margin-bottom: 50px;
    }

}


/* larger screens
--------------------------------------------------------------- */
@media screen and (min-width: 1200px) {

    header .logo a {
        width: 160px;
    }

   .wide .row { max-width: 1180px; }

   #calpush .buttons .calpush-google-btn {
        width:55%;
    }

}

#main-area {
  max-width: 1200px;
  margin: 0 auto;
}

#webpush-area {
  padding-bottom: 10px;
}

.webpush-permission {
  max-width: 1200px;
  margin: 10px auto 0 auto;
  /* background: #01b0f0; */
  background: #80d7f7;
  text-align: center;
  padding: 5px;
}
