@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
pre, textarea {
overflow: auto
} *[data-lazy-src] {
opacity: 0;
}
*.rocket-lazyload {
opacity: 0;
}
*.lazyloaded{
opacity: 1;
transition: all 0.4s;
transition-delay: 0.5s
}
*[data-was-processed=true] {
opacity: 1;
transition: all 0.4s;
transition-delay: 0.5s
}
.mask, .portfolio-feed .portfolio {
visibility: hidden; -webkit-transition-duration: 0s !important;
transition-duration: 0s !important;
} .comments-title a:hover,
.entry-title a:hover,
.menu a:hover,
.nav-toggle .btn-toggle:hover,
.page-book a.button,
.page-event a.button,
.site-logo a:hover,
.widget_pages a:hover,
a, ins, mark {
text-decoration: none
}
.commentlist,
.menu,
.page-book .about ul,
.page-book .sample ul,
.page-event article li {
list-style-type: none
} .page-event .site-main header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 60vh;
background: url(//seaside-station.com/wpbin/wp-content/uploads/event_bg.jpg) bottom no-repeat #175E8F;
background-size: cover
}
.page-event .site-main h1 {
padding-bottom: 40px;
text-align: center;
color: #FFF
}
.page-event .site-main h1 span {
display: block;
margin-bottom: 40px;
line-height: 140%;
font-size: 2.5rem;
font-weight: 500
}
.page-event .site-main h1 img {
display: block;
width: auto;
height: 35vh;
margin: 0 auto
}
.page-event article {
z-index: 0;
padding: 20px
}
.page-event article h2:first-child {
margin: 80px 0 40px;
line-height: 140%;
font-size: 2.5rem;
color: #2E9DEE
}
.page-event .summary .summary_images > div img {
display: block
}
.page-event a.button {
display: block;
position: relative;
top: 0;
margin: 40px 0 20px;
border: 1px solid #2E9DEE;
border-radius: 50px;
background-color: #FFF;
padding: 20px 10px;
text-align: center;
color: #2E9DEE;
font-size: 120%;
font-weight: 700;
box-shadow: 0 3px 15px -5px rgba(0, 0, 0, .56);
-webkit-transition: all .2s ease;
transition: all .2s ease
}
.page-event a.button:hover {
position: relative;
top: 3px;
background-color: #2E9DEE;
color: #FFF;
box-shadow: none;
-webkit-transition: all .2s ease;
transition: all .2s ease
}
.page-event .center {
text-align: center
}
.page-event article dl dt {
margin: 0 0 1rem
}
.page-event article dl dd + dt {
margin-top: 3rem
}
.page-event article dl dd, .page-event article dl.rowline dd, .page-event article dl.rowline dt {
margin: 0
}
.page-event article li:before {
content: '';
width: 6px;
height: 6px;
display: inline-block;
border-radius: 100%;
background-color: #2E9DEE;
position: relative;
left: -15px;
top: -3px
}
.page-event article p {
margin: 1em 0
}
@media only screen and (max-width:567px) {
.page-event .site-main header {
height: 70vh
}
.page-event .site-main h1 span {
font-size: 7vw
}
.page-event .site-main h1 img {
width: 80vw;
height: auto
}
.page-event article h2:first-child {
margin: 80px 0 40px
}
.page-event .summary .summary_images > div img {
width: 90%;
margin: 40px auto
}
.page-event dl.rowline dd + dt {
margin: 3rem 0 0
}
}
@media only screen and (min-width:769px), screen and (min-width:568px) and (max-width:768px) {
.page-event article {
max-width: 800px;
margin: auto
}
.page-event .site-main h1 span br {
display: none
}
.page-event .about > dl, .page-event .summary > .summary_images {
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.page-event .summary .summary_images {
margin: 40px 0 60px
}
.page-event .summary .summary_images > div {
display: flex;
justify-content: center;
align-items: center;
width: 50%
}
.page-event .summary .summary_images > div img {
display: block;
width: 90%
}
.page-event .about dt {
width: 6em;
margin-right: 2em
}
.page-event .about dd {
width: calc(100% - 8em)
}
}  @media only screen and (max-width:768px) {
body {
background-color: transparent;
}
}
.page-book .site-main {
background-color: transparent;
padding-bottom: 0;
}
.page-book .site-main header {
position: relative;
width: 100%;
background-color: #fff;
z-index: -2
}
.page-book .site-main header:before {
content: "";
display: block
}
.page-book .site-main h1 {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
background-color: #fff;
background-size: cover;
color: #2B2E33;
font-family: YuMincho, serif;
font-weight: 500
}
.page-book .site-main h1:before {
position: absolute;
left: 0;
top: 0;
content: "";
width: 100%;
background: url(//seaside-station.com/wpbin/wp-content/uploads/book_border.svg) bottom center no-repeat #FFF
}
.page-book .tagline {
position: relative;
z-index: -1;
width: 100%;
height: 80vh;
line-height: 160%;
text-align: left;
vertical-align: middle;
color: #FFF;
font-size: 9vw
}
.page-book .tagline:after, .page-book .tagline:before {
position: absolute;
left: 0;
width: 100%;
height: 100%;
content: ""
}
.page-book .tagline:before {
top: 0;
background: url(//seaside-station.com/wpbin/wp-content/uploads/book_bg_top.svg) top center no-repeat;
z-index: 1;
}
.iphone .tagline {
background-attachment: scroll!important
}
.page-book .tagline:after {
bottom: 0;
background: url(//seaside-station.com/wpbin/wp-content/uploads/book_bg_bottom.svg) bottom center no-repeat
}
.page-book .tagline span:before {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
background: url(//seaside-station.com/wpbin/wp-content/uploads/book_main.jpg) right no-repeat#8461A0;
background-size: cover;
}
.page-book .tagline span {
position: fixed;
width: inherit;
height: auto;
display: block;
right: 0;
text-align: center
}
.page-book article {
background-color: #FFF;
z-index: 0;
padding: 80px 20px 40px 20px;
}
.page-book article h2 {
font-size: 2.5rem
}
.page-book .about h2 {
margin: 40px 0 15px
}
.page-book .about ul {
margin: 30px 0 0;
padding: 0
}
.page-book .about p {
margin: 0
}
.page-book .cover {
text-align: center;
margin: 0 auto 50px 0
}
.page-book a.button {
display: block;
position: relative;
top: 0;
margin: 40px 0 20px;
border: 1px solid #2B2E33;
border-radius: 50px;
background-color: #FFF;
padding: 20px 10px;
text-align: center;
color: #2B2E33;
font-size: 120%;
font-weight: 700;
box-shadow: 0 3px 15px -5px rgba(0, 0, 0, .56);
-webkit-transition: all .2s ease;
transition: all .2s ease
}
.page-book a.button:hover {
position: relative;
top: 3px;
background-color: #E8EAED;
color: #2B2E33;
box-shadow: none;
-webkit-transition: all .2s ease;
transition: all .2s ease
}
.page-book .border {
position: relative;
margin: 20px 0 60px;
padding-top: 20px
}
.page-book .border:before {
content: "";
position: absolute;
top: 0;
left: -20px;
width: calc(100% + 40px);
height: 20px;
background: url(//seaside-station.com/wpbin/wp-content/uploads/book_border.svg) top center no-repeat
}
.page-book .border h2 {
padding: 40px 0 35px;
text-align: center;
font-size: 3rem
}
.page-book .border h2 + p {
margin-top: -35px
}
.page-book .border h2 + dl {
margin-top: -20px
}
.page-book .border section section {
margin-bottom: 60px
}
.page-book .border h3 {
margin: 30px 0 20px;
font-size: 2rem;
text-align: center
}
.page-book .concept p.tagline-small {
text-align: center;
font-weight: 700
}
.page-book .sample ul {
padding: 0
}
.page-book .sample li {
display: block;
margin: 0 auto 30px 0
}
.page-book .cover img, .page-book .sample img {
display: inline-block;
box-shadow: 0 3px 15px -5px rgba(0, 0, 0, .56)
}
.page-book .center {
text-align: center
}
.page-book .border dd {
margin: 0
}
.page-book .stations p.center {
margin-bottom: 3em
}
.page-book .detail dl {
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
width: 22em;
margin: auto
}
.page-book .detail dt {
width: 7em
}
.page-book .detail dd {
width: 15em
}
.page-book .faq dt {
margin: 2em 0 5px
}
.page-book .faq dd {
margin-bottom: 1em
}
@media only screen and (max-width:567px) {
.page-book .site-main h1, .page-book .site-main header:before {
height: calc(100vh - (66px + 50px) - 30px)
}
.page-book .site-main h1 {
margin-top: 0;
vertical-align: middle;
line-height: 180%;
font-size: 11vw;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl
}
.page-book .site-main h1:before {
height: 55px;
background-size: 300%
}
.page-book .site-main h1 span {
position: absolute;
top: calc(50% + .5em);
left: 50%;
height: 100%;
display: inline;
text-align: center;
letter-spacing: .5rem;
transform: translate(-50%, -50%)
}
.page-book .tagline {
height: 95vh;
margin: 0
}
.page-book .tagline:after, .page-book .tagline:before {
background-size: 300%
}
.page-book .tagline span {
top: 11vh;
width: calc(100%);
font-size: 10vw;
text-indent: 1em
}
.page-book .border:before {
background-size: 300%;
left: -20px;
width: calc(100% + 40px);
height: 20px
}
.page-book .concept p.tagline-small {
padding: 20px 0;
line-height: 160%;
text-indent: 1em;
font-size: 3rem
}
.page-book .concept p.tagline-small b {
font-weight: 500
}
.page-book .faq dt, .page-book .stations dt {
margin: 2em 0 5px
}
.page-book .faq dd, .page-book .stations dd {
margin-bottom: 1em
}
.page-book .about {
margin: 15vw auto 50px;
text-align: center
}
.page-book .sample ul {
margin: 50px 0
}
}
@media only screen and (max-width:359px) {
.page-book .concept p.tagline-small {
text-indent: .5em
}
}
@media only screen and (min-width:769px), screen and (min-width:568px) and (max-width:768px) {
.page-book .site-main header:before {
height: 60vh;
background-color: #FFF;
}
.page-book .site-main h1 {
height: 60vh;
text-align: center;
line-height: 60vh;
font-size: 5vw;
text-indent: 1em;
margin-top: 20px
}
.page-book .site-main h1:before {
background-position: top;
background-size: 120%;
height: 20px;
margin-top: 10px
}
.page-book .concept p.tagline-small br, .page-book .site-main h1 br, .page-book .tagline br {
display: none
}
.page-book .tagline {
height: 80vh;
margin: 20px 0 0 0;
}
.page-book .tagline:after, .page-book .tagline:before {
background-size: 120%
}
.page-book .tagline span {
top: 8vh;
font-size: 5.5vw
}
.page-book .border h2 {
font-size: 4rem
}
.page-book .border:before {
height: 20px;
background-size: 120%
}
.page-book article > div {
max-width: 800px;
margin: auto
}
.page-book .about {
margin: 0 auto 100px
}
.page-book .about .cover {
width: 250px;
margin: 0 70px 0 0
}
.page-book .about .cover img {
width: 250px
}
.page-book .about section {
width: 18em
}
.page-book .about h2 {
line-height: 4.5rem;
font-size: 4rem
}
.page-book .about li, .page-book .about p {
line-height: 3rem;
font-size: 1.8rem
}
.page-book .about, .page-book .detail > section, .page-book .feature > section, .page-book .sample > ul, .page-book .stations > dl {
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.page-book .feature section, .page-book .sample ul, .page-book .stations dl {
align-items: flex-start;
justify-content: space-between
}
.page-book .about {
align-items: center;
justify-content: center
}
.page-book .concept p.tagline-small {
padding: 20px 0 40px;
font-size: 2.2rem
}
.page-book .feature {
margin-bottom: 0
}
.page-book .feature section section {
margin-bottom: 40px
}
.page-book .feature section section, .page-book .sample li {
width: 47%
}
.page-book .sample {
text-align: center
}
.page-book .sample ul {
margin: 50px 0 20px
}
.page-book .stations dt {
width: 12em;
margin-right: 2em
}
.page-book .stations dd {
width: calc(100% - 14em);
padding-bottom: 1.5rem
}
.page-book .detail section {
align-items: flex-start;
justify-content: center
}
}
@media only screen and (min-width:769px) {
.page-book .site-main header:before {
height: 30vh
}
.page-book .site-main h1 {
height: 30vh;
line-height: 30vh;
font-size: 2.5vw
}
.page-book .site-main h1:before {
margin-top: 20px
}
.page-book .tagline {
height: 65vh
}
.page-book .tagline span {
width: calc(100% - 280px);
top: 8vh;
font-size: 3.5vw
}
.page-book .border:before {
left: calc(((100vw - 280px - 800px)/ -2) - 20px);
width: calc(100vw - 280px)
}
.page-book .detail .cover {
margin: 0 80px 0 0
}
.page-book .detail dl {
width: 23em
}
.page-book .detail dt {
width: 8em
}
.page-book .detail dd {
width: 15em
}
}
@media only screen and (min-width:769px) and (max-width:1079px) {
.page-book .border:before {
right: 0;
width: inherit;
height: 20px;
background-size: 120%
}
}  .page-about-this-site dl.author dt {
margin-bottom: 1em
}
.page-about-this-site dl.author dd {
margin: 0 0 1em
}  * {
-moz-box-sizing: border-box;
box-sizing: border-box
}
html {
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
body {
line-height: 1;
-ms-word-wrap: break-word;
word-wrap: break-word
}
a img, hr {
border: 0
}
.clear, table, textarea {
width: 100%
}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block
}
a:focus {
overflow: hidden;
outline: 0
}
a:active, a:hover {
outline: 0
}
blockquote, cite, dfn, em, i {
font-style: italic
}
blockquote, q {
quotes: none
}
blockquote:after, blockquote:before, q:after, q:before {
content: '';
content: none
}  body {
line-height: 1;
-ms-word-wrap: break-word;
word-wrap: break-word
}
body::after {
content: "";
display: block;
width: 100%;
height: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: -9999;
background-color: #FFF;
}
@media only screen and (max-width:768px) {
body {
background-color: #E8EAED;
}
}
.h1, .h2, .h3, .h4, .h5, .h6, body, button, h1, h2, h3, h4, h5, h6, input, select, textarea {
font-family: "Open Sans", "Yu Gothic", YuGothic, "游ゴシック体", "メイリオ";
font-weight: 500;
}
a:hover, .zilla-bio-widget a.social-link:hover, .menu a:hover, .widget_pages a:hover, .site-main .wp-caption a:hover {
background-color: #3371CC;
color: #E8EAED;
}
.site-main a:hover {
color: #FFF;
}
a img {
vertical-align: bottom
}
body, button, input, select, textarea {
color: #2B2E33;
font-weight: 500;
font-size: 16px;
font-size: 1.6rem
}
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
clear: both;
font-weight: 700;
margin-bottom: 3rem
}
.h1, h1 {
font-size: 40px;
font-size: 4rem;
margin-bottom: .5rem
}
.h2, h2 {
font-size: 26px;
font-size: 2.6rem
}
.h3, h3 {
font-size: 21px;
font-size: 2.1rem
}
.h4, h4 {
font-size: 18px;
font-size: 1.8rem
}
.h5, h5 {
font-size: 16px;
font-size: 1.6rem
}
.h6, h6 {
font-size: 14px;
font-size: 1.4rem
}
hr {
background-color: #C4C7CC;
height: 1px;
margin-bottom: 1.5em
}
p {
margin-bottom: 1em
}
ol, ul {
margin: 0 0 1.5em 1.1em
}
ul {
list-style: disc
}
ol {
list-style: decimal
}
.menu ul, .zilla-gallery {
list-style: none
}
dl, ol, p, ul {
line-height: 1.7em
}
li > ol, li > ul {
margin-bottom: 0;
margin-left: 1.5em
}
address, table {
margin: 0 0 1.5em
}
b, dt, strong {
font-weight: 700
}
dd {
margin: 0 1.5em 1.5em
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #C4C7CC
}
table .even {
background: #E8EAED
}
th {
font-weight: 700
}
tr {
border-bottom: 1px solid #C4C7CC
}
td, th {
padding: 5px;
text-align: center
}
.profile-image img, .site-content img, .widget img {
height: auto;
max-width: 100%
}
button, input, select, textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline
}
button, input {
line-height: normal
}
.form-style, button, html input[type=submit], input[type=submit], input[type=reset], input[type=text], input[type=url], input[type=email], input[type=password], input[type=search], textarea {
color: #000;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo;
font-weight: 500;
font-size: 12px;
font-size: 1.2rem;
line-height: 24px;
}
button, html input[type=submit], input[type=submit], input[type=reset] {
background: #ebebeb;
border: none;
cursor: pointer;
-webkit-appearance: button;
padding: 13px 41px;
-webkit-transition: all .3s ease;
transition: all .3s ease
}
button:hover, html input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
background: #dedede
}
button:active, button:focus, html input[type=button]:active, html input[type=button]:focus, input[type=submit]:active, input[type=submit]:focus, input[type=reset]:active, input[type=reset]:focus {
background: #dedede;
border-color: #D2D6DB
}
input[type=checkbox], input[type=radio] {
padding: 0
}
input[type=search] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
box-sizing: content-box
}
input[type=seach]::-webkit-search-decoration {
-webkit-appearance: none
}
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0
}
input[type=text], input[type=url], input[type=email], input[type=password], input[type=search], textarea {
background: #ebebeb;
border: none;
padding: 13px 20px;
text-transform: none
}
input[type=text]::-webkit-input-placeholder, input[type=url]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=search]::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #C4C7CC
}
input[type=text]:-moz-placeholder, input[type=url]:-moz-placeholder, input[type=email]:-moz-placeholder, input[type=password]:-moz-placeholder, input[type=search]:-moz-placeholder, textarea:-moz-placeholder {
color: #C4C7CC
}
input[type=text]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=search]::-moz-placeholder, textarea::-moz-placeholder {
color: #C4C7CC
}
input[type=text]:-ms-input-placeholder, input[type=url]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=search]:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #C4C7CC
}
input[type=text]:focus, input[type=url]:focus, input[type=email]:focus, input[type=password]:focus, input[type=search]:focus, textarea:focus {
border-color: #D2D6DB
}
textarea {
vertical-align: top
}
a {
color: #5C6C70;
-webkit-transition: all .5s ease;
transition: all .5s ease
}
a:active, a:focus, a:hover {
-webkit-transition: all .1s ease;
transition: all .1s ease
}
.alignleft {
display: inline;
float: left;
margin-right: 1.5em
}
.alignright {
display: inline;
float: right;
margin-left: 1.5em
}
.aligncenter, .clear {
display: block;
clear: both
}
.aligncenter {
margin-left: auto;
margin-right: auto
}
.clear {
font-size: 0;
height: 0;
line-height: 0
}
.author-bio:after, .author-bio:before, .clear:after, .clear:before, .comment-content:after, .comment-content:before, .comment-navigation:after, .comment-navigation:before, .entry-content:after, .entry-content:before, .page-navigation:after, .page-navigation:before, .single-page-navigation:after, .single-page-navigation:before, .site-content:after, .site-content:before, .site-footer:after, .site-footer:before, .site-header:after, .site-header:before, .site-navigation:after, .site-navigation:before {
content: ' ';
display: table
}
.author-bio:after, .clear:after, .comment-content:after, .comment-navigation:after, .entry-content:after, .page-navigation:after, .single-page-navigation:after, .site-content:after, .site-footer:after, .site-header:after, .site-navigation:after {
clear: both
}
.clearfix:after, .comment-navigation:after, .page-navigation:after, .single-post-navigation:after, .widget:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
.clearfix, .comment-navigation, .page-navigation, .single-post-navigation, .widget {
display: block
}
.hidden, .none, .site.nav-show .nav-toggle .btn-toggle i:nth-child(2) {
display: none
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0
}
.js body {
opacity: 0;
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease
}
.js body.animate-in {
opacity: 1
} .site {
height: 100%;
position: relative
}
.site.nav-show .nav-toggle .btn-toggle .icon-nav-toggle {
padding-top: 9px
}
.site.nav-show .nav-toggle .btn-toggle i:first-child {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.site.nav-show .nav-toggle .btn-toggle i:last-child {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
margin-top: -9px
}
.site.nav-show .nav-toggle .btn-toggle span {
opacity: 0
} @media only screen and (max-width:768px) {
.site-wrapper {
position: relative;
overflow: hidden;
width: 100%
}
.site {
width: 100%;
-webkit-transform: translate3d(0);
transform: translate3d(0);
-webkit-transition: all .3s ease;
transition: all .3s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.site.nav-show {
-webkit-transform: translate3d(-280px, 0, 0);
transform: translate3d(-280px, 0, 0)
}
} @media only screen and (min-width:769px) {
.site.nav-show .site-navigation {
right: 0;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1
}
.site-content {
margin-left: 280px
}
}
.site-secondary {
background: #fafafa
}
.site-header {
width: 280px;
background: #E8EAED;
padding: 40px;
height: 100%
} @media only screen and (max-width:768px) {
.site-header {
position: absolute;
z-index: 9000;
top: 0;
right: -280px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
}
.sidebar-footer {
overflow: hidden
}
.site-logo {
color: #fff;
font-size: 28px;
font-size: 2.8rem;
font-weight: 700;
line-height: 1.2;
}
.site-logo a {
display: block;
overflow: hidden;
background-repeat: no-repeat;
background-size: contain;
text-indent: 100%;
white-space: nowrap;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
.site-logo a:hover {
background-color: transparent;
filter: brightness(140%);
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
@media only screen and (min-width:769px) {
.site-header {
position: absolute;
left: 0;
z-index: 1000;
padding-top: 0
}
.sidebar-footer {
width: 220px
}
.site-logo {
padding: 32px 0 40px 0;
-webkit-transition: all .3s ease;
transition: all .3s ease
}
.site-logo a {
height: 197px;
background-image: url(//seaside-station.com/wpbin/wp-content/uploads/logo_vertical.svg);
background-position: top;
}
.site-tagline {
padding-top: 14px;
padding-right: 28px;
display: block
}
.sidebar-info {
padding-top: 40px
}
.nav-toggle {
display: none
}
}
.nav-toggle {
height: 66px
}
.nav-toggle a.btn-toggle {
color: #fff;
display: inline-block;
-webkit-transition: all .3s ease;
transition: all .3s ease;
outline: 0
}
.nav-toggle a.btn-toggle:hover {
background-color: transparent;
}
@media only screen and (max-width:768px) {
.nav-toggle {
background: #E8EAED;
margin-left: -1px;
padding-left: 1px;
text-align: right
}
.nav-toggle .site-logo {
float: left;
width: 200px;
height: 48px;
margin-top: 9px;
margin-left: 15px
}
.site-logo a {
width: auto;
max-height: 55px;
background-image: url(//seaside-station.com/wpbin/wp-content/uploads/logo_horizontal.svg);
background-position: left top;
}
.nav-toggle .btn-toggle {
margin: 20px 15px
}
}
.nav-toggle .btn-toggle .icon-nav-toggle {
float: right;
width: 30px;
margin-left: 10px;
height: 30px
}
.nav-toggle .btn-toggle i {
display: block;
height: 4px;
width: 26px;
margin-bottom: 6px;
background-color: #5C6C70;
border-radius: 5px;
-webkit-transition: all .3s ease;
transition: all .3s ease
}
#s, .mask {
width: 100%
}
.nav-toggle .btn-toggle span {
display: none;
}
.site-navigation {
clear: both;
color: #fff;
}
@media only screen and (min-width:769px) {
.site-navigation {
overflow: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: -webkit-transform .3s ease, right .3s ease, opacity .3s ease;
transition: transform .3s ease, right .3s ease, opacity .3s ease
}
.site-navigation.no-animate, .site-navigation.no-animate + .site-logo {
-webkit-transition-duration: 0;
transition-duration: 0
}
}
.site-navigation .widget-title {
margin-bottom: 1.5rem;
padding: 0;
font-size: 1.4rem;
font-weight: 500;
color: #2B2E33;
}
.menu {
margin: 0 0 4rem;
padding: 0;
font-weight: 500;
font-size: 13px;
font-size: 1.3rem;
line-height: 2.4rem
}
.menu a, .widget_pages a {
color: #5C6C70;
-webkit-transition: all .5s ease;
transition: all .5s ease;
display: block
}
.menu a:hover, .widget_pages a:hover {
-webkit-transition: all .1s ease;
transition: all .1s ease
}
.mask {
position: fixed;
z-index: 8000;
height: 100%;
left: 0;
top: 66px;
background-color: #000;
opacity: 0
}  .archive-title {
color: #b5b5b5
}
.comments-title, .comments-title a, .entry-title, .entry-title a, .page-title {
color: #2B2E33
}
.page-title {
margin: 0;
background-color: #fff;
padding: 40px 10px;
font-weight: 700;
font-size: 3.5rem;
text-align: center
}
@media only screen and (max-width:768px) {
.page-title {
font-size: 3rem
}
}
.meta-style, .portfolio-entry-meta, .portfolio-entry-meta .portfolio-project-url, .type-post .entry-footer .entry-categories, .type-post .entry-footer .entry-tags, .type-post .entry-meta {
line-height: 140%;
color: #b2b2b2;
font-size: 14px;
font-size: 1.4rem;
font-weight: 500
}
.type-page .entry-thumbnail {
margin-bottom: 4rem
}
.type-post {
padding-bottom: 3.6rem
}
.type-post .entry-meta {
margin-bottom: .4rem
}
.type-post .entry-meta a {
color: #b2b2b2
}
.type-post .entry-meta .comments-title {
display: block;
margin: .8rem 0
}
@media only screen and (min-width:769px) {
.type-post .entry-meta .comments-title {
float: right;
display: inline-block;
margin: 0
}
}
.type-post .entry-summary p {
margin-bottom: 0
}
.type-post .entry-title {
position: relative;
padding-right: 50px
}
.type-post .entry-title .spinner {
position: absolute;
top: 0;
right: 0
}
.type-post .entry-thumbnail {
position: relative;
margin-bottom: 4rem
}
.type-post .entry-thumbnail .overlay {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
text-align: center;
-webkit-transition: all 1s ease;
transition: all 1s ease;
background: rgba(0, 0, 0, .3)
}
.type-post .entry-thumbnail .overlay:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.35em;
}
.type-post .entry-thumbnail blockquote, .type-post .entry-thumbnail h2 {
border: none;
margin: 0;
padding: 0 10.71429%;
color: #fff;
font-weight: 700;
font-size: 30px;
font-size: 3rem;
line-height: 3.8rem;
font-style: normal;
display: inline-block;
vertical-align: middle
}
@media only screen and (max-width:768px) {
.type-post .entry-thumbnail blockquote, .type-post .entry-thumbnail h2 {
font-size: 18px;
font-size: 1.8rem;
line-height: 2.2rem
}
}
.type-post .entry-thumbnail blockquote cite, .type-post .entry-thumbnail h2 cite {
display: block;
font-weight: 500;
font-size: 17px;
font-size: 1.7rem;
color: #C4C7CC;
font-style: normal;
margin-top: 1rem
}
@media only screen and (max-width:768px) {
.type-post .entry-thumbnail blockquote cite, .type-post .entry-thumbnail h2 cite {
font-size: 14px;
font-size: 1.4rem
}
}
.type-post .zilla-gallery {
margin: 0
}
.type-post .zilla-gallery .wp-caption, .type-post .zilla-gallery .zilla-slider-nav {
left: 20px;
bottom: 20px
}
.type-post .zilla-slider-nav {
right: 20px;
bottom: 20px
}
.type-post .entry-footer .fa {
font-size: 16px;
font-size: 1.6rem;
width: 1.8rem;
vertical-align: middle
}
.type-post .entry-footer .fa-tag {
font-size: 18px;
font-size: 1.8rem
}
.type-post .entry-footer .entry-categories, .type-post .entry-footer .entry-tags {
margin-bottom: .6rem
}
.type-post .entry-footer .entry-categories a, .type-post .entry-footer .entry-tags a {
color: #b2b2b2
}
.type-post .comments-title.h3 {
margin-top: 1rem;
display: block
}
.single .fluid-width-video-wrapper, .wp-video, .zilla-gallery-container {
margin-bottom: 5rem
}
.wp-video {
max-width: 100%!important;
height: auto!important
}
.mejs-overlay, .mejs-poster {
width: 100%!important;
height: 100%!important
}
.mejs-container.mejs-video {
width: 100%!important;
height: auto!important;
padding-top: 56.3%
}
.archive .type-post, .blog .type-post {
margin-bottom: 4rem;
border-bottom: 1px solid #e7e7e7
}
.archive .type-post .entry-content p:last-of-type, .blog .type-post .entry-content p:last-of-type {
margin-bottom: 0
}
.author-bio {
padding: 20px;
background: #fbfbfb;
border: 1px solid #efefef
}
.author-bio .avatar {
float: left;
margin: 0 20px 0 0;
width: 40px
}
.author-description, .author-title {
margin-left: 6rem
}
.author-title {
font-weight: 700
}
.post-audio {
margin-bottom: 4rem
}
.post-audio img {
display: block
}
.comment-content img.wp-smiley, .entry-content img.wp-smiley {
border: 0;
margin-bottom: 0;
margin-top: 0;
padding: 0
}
.gallery-caption, .wp-caption {
margin: 1em 1em 1.5em
}
.wp-caption img[class*=wp-image-] {
display: block;
margin: 1.2% auto 0;
max-width: 98%
}
.wp-caption .wp-caption-text {
margin: .625em 0
}
.site-main a {
color: #3371CC;
}
.site-main .gallery {
margin-bottom: 1.5em
}
.site-main .gallery a img {
border: none;
height: auto
}
.site-main .gallery dd {
margin: .625em 0;
padding: 0 .625em
}
embed, iframe, object {
max-width: 100%;
margin-bottom: 1.5em
}
@-webkit-keyframes animate-stripes {
0% {
background-position: 0 0
}
100% {
background-position: 60px 0
}
}
.page-template-template-portfolio-php .site, .tax-portfolio-type .site {
max-width: none
}
.page-template-template-portfolio-php .site-content, .tax-portfolio-type .site-content {
padding: 0
}
.page-template-template-portfolio-php .site-main, .tax-portfolio-type .site-main {
overflow-x: hidden
}
.page-template-template-portfolio-php .site-main > .page, .tax-portfolio-type .site-main > .page {
padding: 40px
}
.portfolio-feed {
overflow: hidden;
margin-right: -1px
}
@media only screen and (min-width:300px) {
.portfolio-feed .portfolio {
width: 50%
}
}
@media only screen and (min-width:667px) {
.portfolio-feed .portfolio {
width: 33.33333%
}
}
@media only screen and (min-width:1333px) {
.portfolio-feed .portfolio {
width: 25%
}
}
@media only screen and (min-width:1691px) {
.portfolio-feed .portfolio {
width: 20%
}
}
.portfolio-feed .portfolio .entry-thumbnail {
display: block;
text-align: center;
overflow: hidden
}
.portfolio-feed .portfolio .entry-thumbnail > a {
display: block;
position: relative
}
.portfolio-feed .portfolio .entry-thumbnail > a:before {
content: '';
display: block;
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, .55);
opacity: 0;
-webkit-transition: opacity .8s ease;
transition: opacity .8s ease; 
}
.portfolio-feed .portfolio .entry-thumbnail > a img {
display: block
}
.portfolio-feed .portfolio .entry-thumbnail:hover > a:before {
opacity: 1;
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease
}
.portfolio-feed .portfolio .entry-thumbnail:hover .entry-title {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
.portfolio-feed .portfolio .entry-title {
position: absolute;
z-index: 2;
width: 100%;
bottom: 0;
margin: 0;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .6)));
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
background: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
padding: 3rem 2rem 1.5rem;
line-height: 1.2em;
color: #f5f5f5;
font-weight: 500;
font-size: 20px;
font-size: 2rem;
text-transform: none;
text-align: left;
text-shadow: 0 0 10px rgba(0, 0, 0, .6);
opacity: 1
}
.no-touch .portfolio-feed .portfolio > a:hover .entry-title {
display: block
}
.isotope-item {
z-index: 2
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1
}
.portfolio.hide .toggle-content {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0)
}
.portfolio-text {
background: #fff
}
@media only screen and (min-width:769px) {
.portfolio-text {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 40px 0 0 320px;
z-index: 999
}
}
@media only screen and (min-width:769px) {
.toggle-clone {
display: block;
visibility: hidden
}
}
.toggle-content {
display: block;
width: 18px;
height: 18px;
position: relative;
-webkit-transition: all .3s ease;
transition: all .3s ease;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg)
}
@media only screen and (max-width:768px) {
.toggle-content {
display: none
}
}
.portfolio-media-feature {
background-color: #101214;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 40vw;
min-height: 300px
}
.portfolio-media-feature img {
display: none
}
.zilla-gallery img, .zilla-gallery.slideshow img {
display: block
}
.zilla-gallery-container {
position: relative;
box-sizing: content-box;
max-width: 800px;
margin: auto;
padding: 0 40px
}
.zilla-gallery {
margin: 0
}
.zilla-gallery li {
width: 100%
}
.zilla-gallery .wp-caption {
margin: 0;
background: #E8EAED;
padding: 9px 21px 10px;
font-style: normal
}
.top-image-book, .top-image-event {
background-repeat: no-repeat;
background-position: right;
background-size: cover
}
.zilla-gallery.slideshow li {
min-height: 140px
}
.zilla-gallery.stacked li {
margin-bottom: 6rem;
position: relative
}
@media only screen and (max-width:768px) {
.zilla-gallery .wp-caption {
padding-left: 14px;
padding-right: 14px
}
.zilla-slider-nav a {
position: absolute;
z-index: 1001;
top: 50%;
margin-top: -22px
}
.zilla-slider-nav a.zilla-slide-next {
right: -20px
}
.zilla-slider-nav a.zilla-slide-prev {
left: -20px
}
}
.zilla-slider-nav a {
width: 45px;
height: 45px;
display: inline-block;
background-color: #fff;
color: #000;
text-align: center;
line-height: 45px;
font-size: 22px
}
.zilla-slider-nav a:hover {
background-color: #f6f6f7
}
.zilla-slider-nav .zilla-slide-next {
margin-left: 5px
}
.single-portfolio .site {
max-width: none
}
.single-portfolio .portfolio {
-webkit-transition: all .5s cubic-bezier(0, 1, .5, 1);
transition: all .5s cubic-bezier(0, 1, .5, 1)
}
.single-portfolio .portfolio.full img {
max-width: none;
width: 100%
}
.single-portfolio .entry-header {
padding: 4rem 0 3rem
}
.single-portfolio .entry-header > div {
box-sizing: content-box;
max-width: 800px;
margin: auto;
padding: 0 20px;
}
.single-portfolio .entry-header-name p {
margin: 0;
font-size: 2rem;
font-family: "Yu Mincho", YuMincho, "游明朝体", "Hiragino Mincho ProN", "HGS明朝B", HGSMinchoB, serif;
color: #5C6C70
}
.single-portfolio .entry-header-location a {
text-decoration: none;
}
.single-portfolio .entry-header-location a i {
font-style: normal;
}
.single-portfolio ul.entry-header-meta {
margin: 0;
list-style-type: none;
color: #5C6C70
}
@media only screen and (min-width:769px) {
.zilla-slider-nav {
right: 40px;
bottom: 42px;
position: absolute;
z-index: 1001
}
.single-portfolio .entry-header-name {
float: left
}
.single-portfolio .entry-header-name p {
padding-left: 2px
}
.single-portfolio ul.entry-header-meta {
float: right;
text-align: right
}
.single-portfolio .entry-header-location a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.single-portfolio .entry-header-location a i:first-child {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
.single-portfolio .entry-header-location a i:last-child {
-webkit-box-ordinal-group: 0;
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
padding-right: 5px;
}
}
@media only screen and (max-width:768px) {
.single-portfolio .entry-header-name {
text-align: center;
margin-bottom: 1.5em
}
.single-portfolio .entry-header-meta {
text-align: center;
margin-bottom: 1em
}
.single-portfolio ul.entry-header-meta li {
display: inline-block;
}
.single-portfolio .entry-header-line:after {
content: " / "
}
.single-portfolio .entry-header-location a i:last-child {
padding-left: 5px;
}
}
.top-image-event:before {
content: ""
}
.single-portfolio .fixed-content-wrap {
margin-bottom: 8rem;
background-color: #101214;
padding: 3rem 40px 3.2rem;
}
.single-portfolio .fixed-content-wrap p {
color: #E8EAED
}
.single-portfolio .fixed-content-wrap p a {
color: #70a0db;
}
.single-portfolio .fixed-content-wrap p a:hover {
background-color: #70a0db;
color: #E8EAED;
}
.single-portfolio .fixed-content-wrap > div {
max-width: 800px;
margin: 0 auto;
padding: 0
}
.notice {
position: relative;
box-sizing: content-box;
max-width: 800px;
margin: 0 auto 80px auto;
padding: 0 40px;
}
.notice > div {
margin: 0;
background: #E8EAED;
padding: 20px 21px;
font-style: normal;
line-height: 1.7em;
}
.notice h3 {
position: relative;
margin-bottom: 30px;
text-align: center;
font-size: 2rem;
}
.notice h3::after {
content: '';
display: block;
position: absolute;
width: 60px;
height: 3px;
left: 50%;
bottom: -10px;
transform: translate(-50%);
background-color: #999;
}
@media only screen and (max-width:768px) {
.single-portfolio .fixed-content-wrap, .zilla-gallery-container, .notice {
padding-left: 20px;
padding-right: 20px
}
.single-portfolio .entry-title {
text-align: center;
font-size: 3.5rem;
white-space: nowrap;
}
}
.single-portfolio .toggle-content {
position: absolute;
top: -62px;
right: 40px
}
a.gototop {
overflow: hidden;
position: fixed;
right: 10px;
bottom: 20px;
width: 50px;
height: 50px;
background-color: #D2D6DB;
border-radius: 50px;
white-space: nowrap;
z-index: 9999;
opacity: 0.8;
transition: all 0.5s ease;
}
a.gototop.gototop-off {
opacity: 0;
transition: all 0.2s ease;
}
a.gototop i {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 40px;
font-size: 24px;
color: #FFF;
}
a.gototop:hover {
background-color: #3371CC;
-webkit-transition: all .1s ease;
transition: all .1s ease;
}
a.gototop:hover:before {
border: 3px solid #C4C7CC;
}
@media only screen and (min-width:769px) {
.site-footer {
margin-left: 280px
}
}
.copyright, .credit {
color: #5C6C70;
font-size: 11px;
font-size: 1.1rem;
font-weight: 500;
line-height: 1.5rem;
margin: 0
}
.copyright a, .credit a {
color: #5C6C70
}
.archive-lists h4 {
font-size: 14px;
font-size: 1.4rem;
font-weight: 500;
line-height: 2.4rem;
margin-bottom: .8rem
}
.archive-lists ul {
list-style-type: none;
margin: 0 0 2.8rem;
padding: 0
}
.archive-lists .children {
margin-bottom: 0
}
.full-width {
width: auto
}
.contactform {
margin-left: 0
}
.contactform li {
list-style-type: none
}
.contactform li input[type=text] {
width: 100%;
margin-bottom: 10px
}
.contactform li textarea {
width: 100%;
max-width: 100%;
height: 300px;
margin-bottom: 10px;
resize: none
}
.contactform li button {
float: right
}
label.error {
color: red
}  .top-image-full {
position: relative;
background-color: #FFFFFF;
background-position: bottom;
background-size: cover;
font-size: 140%;
}
.top-image-full:before {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(33, 75, 143, 1) 0%, rgba(33, 75, 143, 0.7) 22.92%, rgba(0, 0, 0, 0) 68.23%);
content: ""
}
.top-image-full .top-text a:after {
content: " \276F"
}
.top-image-full .top-text {
display: block;
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
color: #FFF
}
.top-image-full .top-text h2 {
display: none;
}
.top-image-full .top-text p {
margin: 7vh 0 0;
padding-left: 0.6em;
line-height: 140%;
font-size: 140%
}
.top-image-full .top-text ul {
margin: 0;
list-style-type: none;
}
.top-image-full .top-text a {
color: #FFFFFF;
}
.top-image-full .top-text a:hover {
background-color: #FFFFFF;
color: #0B8CAE;
}
.top-image-full .top-text a.button {
position: relative;
top: 0;
display: block;
width: 12em;
margin: 7vh auto 2.5vh auto;
border: 1px solid #FFF;
border-radius: 50px;
background-color: transparent;
padding: 10px 10px;
text-align: center;
color: #FFF;
font-size: min(80%, 3rem);
font-weight: 700;
text-decoration: none;
text-shadow: 0 0 0 rgba(0, 0, 0, .6);
-webkit-transition: all .2s ease;
transition: all .2s ease
}
.top-image-full .top-text a.button:hover {
position: relative;
top: 3px;
background-color: #FFF;
box-shadow: none;
color: #0B8CAE;
-webkit-transition: all .2s ease;
transition: all .2s ease
}
@media only screen and (max-width:768px) {
.top-image-full {
height: calc(100vh - 66px);
min-height: 20em;
font-size: 4.5vw;
background-size: 180%;
background-position: bottom 10% center;
}
.top-image-full .top-text {
padding: 5vw 0 10vw;
font-size: 100%;
}
.top-image-full .top-text a {
font-size: 90%;
}
.top-image-full .top-text a.button {
font-size: 100%;
}
}
@media only screen and (min-width:769px) {
.top-image-full {
height: 100vh;
font-size: min(2.5vw, 250%);
background-position: bottom 13% center;
}
.top-image-full .top-text {
padding: 1vw 0 6vw;
font-size: 100%;
}
.top-image-full .top-text li + li {
line-height: 100%;
}
.top-image-full .top-text a {
font-size: min(70%, 2rem);
}
.top-image-full .top-text a.button {
font-size: auto;
}
}
.index-title-full {
position: relative;
margin: 0!important;
background-color: #FFF;
padding: 60px 0;
line-height: 160%;
text-align: center;
font-weight: 500;
color: #2B2E33
}
@media only screen and (max-width:768px) {
.page h2.index-title-full {
padding: 30px 0 20px 0;
}
}
@media only screen and (min-width:769px) {
.page h2.index-title-full {
padding: 40px 0 20px 0;
}
}
.page .index-title-book {
position: relative;
margin: 0;
background-color: #FFF;
padding: 60px 0;
text-align: center;
color: #2B2E33
} @media only screen and (max-width:768px) {
.page .index-title-full h2 {
font-size: 100%
}
}
@media only screen and (min-width:769px) {
.page .index-title-full h2 {
font-size: 80%
}
}  .top-image {
position: relative;
background-color: #101214;
background-repeat: no-repeat;
background-size: cover
}
p.top-text {
position: absolute;
text-shadow: 0 0 10px rgba(0, 0, 0, .6)
}
p.top-text {
display: block;
width: 100%;
left: 0;
top: 0;
background: -moz-linear-gradient(top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
background: -o-linear-gradient(top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
background: linear-gradient(top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
line-height: 1.4em;
text-align: center;
color: #FFF;
opacity: 1
}
@media only screen and (max-width:768px) {
.top-image {
height: 60vw;
background-position: top center
}
p.top-text {
padding: 5vw 0 10vw;
font-size: 4vw
}
}
@media only screen and (min-width:769px) {
.top-image {
height: 40vw;
background-position: center
}
p.top-text {
padding: 3vw 0 6vw;
font-size: 2vw
}
}
p.top-link {
position: absolute;
z-index: 2;
width: 100%;
bottom: 0;
margin: 0;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .6)));
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
background: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
padding: 3rem 2rem 1.5rem;
line-height: 1.2em;
color: #f5f5f5;
font-size: min(90%, 1.6rem);
text-transform: none;
text-align: right;
text-shadow: 0 0 10px rgba(0, 0, 0, .6);
opacity: 1
}
p.top-link a {
text-shadow: none;
text-decoration: none;
color: #FFF;
-webkit-transition: all .5s ease;
transition: all .5s ease
}
p.top-link a:after {
content: " \276F"
}
p.top-link a:hover {
background-color: #FFF;
color: #333;
-webkit-transition: all .1s ease;
transition: all .1s ease
}  .error404 {
background-color: #000
}
.error404 .site-main {
height: 100vh;
background-image: url(//seaside-station.com/wpbin/wp-content/uploads/kita-funaoka_16.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
text-shadow: 0 0 10px rgba(0, 0, 0, .6);
color: #FFF
}
.error404 .page-title {
background-color: transparent;
padding: 50px 0 10px;
font-size: 3rem;
color: #FFF
}
.error404 .subtitle {
margin: 0 0 30px;
text-align: center
}
.error404 a.gotohome {
position: relative;
top: 0;
display: block;
width: 10em;
margin: 40px auto;
border: 1px solid #FFF;
border-radius: 50px;
background-color: transparent;
padding: 20px 10px;
line-height: 100%;
text-align: center;
color: #FFF;
font-size: 100%;
font-weight: 700;
text-decoration: none;
text-shadow: 0 0 0 rgba(0, 0, 0, .6);
-webkit-transition: all .2s ease;
transition: all .2s ease
}
.error404 a.gotohome:hover {
position: relative;
top: 3px;
background-color: #FFF;
box-shadow: none;
color: #2F5A77;
-webkit-transition: all .2s ease;
transition: all .2s ease
}
@media only screen and (max-width:768px) {
.error404 .site-main {
height: calc(100vh - 66px)
}
}
@media only screen and (min-width:769px) {
.error404 .site-main {
height: 100vh
}
.error404 .page-title {
font-size: 3vw
}
.error404 .subtitle {
margin-bottom: 50px
}
.error404 .site-main p {
line-height: 2.5vw;
font-size: 1.5vw
}
.error404 .explanation {
text-align: center
}
.error404 a.gotohome {
width: 20vw;
margin: 50px auto
}
.error404 .break:before {
content: "\A";
white-space: pre
}
}  .site-main {
background-color: #FFF;
padding-bottom: 40px;
}
.page-template-default .site-main { margin: auto;
}
.page h1.entry-title {
margin: 0;
padding: 7rem 0 1rem 0;
text-align: center;
font-size: 3.5rem
}
@media only screen and (max-width:768px) {
.page h1.entry-title {
font-size: 3rem
}
}
.page .normal-content {
max-width: 800px;
margin: auto;
}
.page .entry-content { }
.page h2 {
margin-top: 6rem;
line-height: 1.5em;
font-size: 2.5rem;
font-weight: bold;
}
.page h3 {
margin-top: 4rem;
line-height: 1.5em;
font-size: 2rem;
}
.page .entry-content li {
position: relative;
margin-bottom: 1.5rem;
list-style-type: none
}
.page .entry-content ul.short li {
margin-bottom: 0.5rem;
list-style-type: none
}
.page .entry-content li::after {
display: block;
content: '';
position: absolute;
top: .5em;
left: -1.2em;
width: 6px;
height: 6px;
border-right: 2px solid #5C6066;
border-bottom: 2px solid #5C6066;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.widget_calendar table, .widget_search #s {
width: 100%
}
.widget {
margin: 0 0 1.5em
}
.sidebar-widgets.credit .widget {
margin: 0
}
.widget-title {
font-size: 12px;
font-size: 1.2rem;
padding-bottom: 1rem
}
.widget > ol, .widget > ul {
list-style-type: none;
margin: 0
}
.widget select {
max-width: 100%
}
.portfolio-types, .widget_pages ul {
border-top: 1px solid #C4C7CC
}
.page_item, .portfolio-filter {
border-bottom: 1px solid #C4C7CC;
font-size: 1.6rem
}
.page_item a, .portfolio-filter a {
display: block;
padding: 5px 10px;
color: #5C6C70
}
.widget.zilla_recentwork_widget {
margin-bottom: 20px
}
.widget_search fieldset, .widget_search form {
margin: 0
}
.widget_calendar caption {
margin-bottom: 5px
}
.zilla_ad_widget {
padding-right: 0
}
.ads-125 img {
margin: 0 10px 10px 0
}
.zilla-tweet-widget ul {
margin: 0 0 10px;
list-style-type: none
}
.zilla-tweet-widget li {
border-bottom: 1px solid #efefef;
padding: 8px 0
}
.zilla-tweet-widget .twitter-time-stamp {
display: block;
font-size: .875em
}
.zilla_flickr_widget {
padding-right: 0
}
.zilla_flickr_widget > div {
margin-right: -20px;
padding-right: 10px
}
.flickr_badge_image {
float: left;
margin: 0 5px 5px 0
}
.flickr_badge_image img {
background: #fff;
padding: 3px;
border: 1px solid #D2D6DB
}
.flickr_badge_image img:hover {
border: 1px solid #C4C7CC
}
.zilla_video {
margin-bottom: 10px
}
.zilla-ad300-widget {
padding: 0
}
.zilla-ad300-widget .widget-title {
display: none
}
.ads-300 {
width: 300px;
height: 250px;
overflow: hidden
}
.zilla-tab-widget .zilla_tabs {
background: #f4f4f4;
padding: 3px
}
.zilla-tab-widget #tab-items {
list-style-type: none;
padding: 0;
margin: 0;
height: 40px
}
.zilla-tab-widget #tab-items li {
float: left;
margin: 0 2px 0 0;
line-height: 40px;
padding: 0;
background: 0 0
}
.zilla-tab-widget #tab-items li a {
font-size: 11px;
color: #5C6C70;
padding: 0 10px;
display: block;
border-left: 1px solid #f4f4f4;
border-top: 1px solid #f4f4f4;
border-right: 1px solid #f4f4f4
}
.zilla-tab-widget #tab-items li a:hover, .zilla-tab-widget #tab-items li.ui-state-active a, .zilla-tab-widget #tab-items li.ui-tabs-selected a {
background: #fff;
text-decoration: none;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #e8e8e8;
border-right: 1px solid #e8e8e8
}
.zilla-tab-widget .tabs-inner {
border: 1px solid #e8e8e8;
padding: 15px;
background: #fff
}
.zilla-tab-widget .ui-tabs-hide {
display: none
}
.zilla-tab-widget .tab ul {
list-style-type: none;
margin: 0
}
.zilla-tab-widget .tab ul li {
border-bottom: 1px solid #efefef;
padding: 10px 0
}
.zilla-tab-widget .tab-thumb img {
padding: 2px;
background: #f8f8f8;
border: 1px solid #D2D6DB;
float: left;
margin: 0 8px 0 0
}
.zilla-tab-widget .entry-title, .zilla-tab-widget .entry-title a {
font-size: 12px;
line-height: 20px;
text-transform: none;
padding: 0
}
.zilla-tab-widget .entry-meta, .zilla-tab-widget .entry-meta a {
color: #5C6C70;
font-size: 10px
}
.zilla-tab-widget .entry-meta a:hover {
text-decoration: none;
color: #2B2E33
}
.tab-comments .avatar {
padding: 2px;
background: #fff;
border: 1px solid #D2D6DB;
float: left;
margin: 0 8px 0 0
}
.tab-comments h3, .tab-comments h3 a {
font-size: 12px;
line-height: 20px;
font-weight: 500;
font-style: italic;
color: #5C6066;
text-transform: none
}
.tab-tags a {
color: #5C6066;
background: #fafafa;
padding: 3px 6px;
display: block;
float: left;
margin: 0 2px 2px 0
}
.tab-tags a:hover {
background: #f2f2f2;
text-decoration: none
}
.zilla-bio-widget {
margin: 0 0 40px;
text-align: center;
}
.zilla-bio-widget .profile-image {
width: 65px;
height: 65px;
margin: 3em 0 1.2em;
overflow: hidden
}
.zilla-bio-widget .profile-image img {
border-radius: 50px
}
.zilla-bio-widget a.social-link {
display: inline-block;
width: 50px;
height: 50px;
margin: 0 5px 3px;
background-color: #C4C7CC;
border-radius: 50px;
line-height: 50px;
text-align: center;
vertical-align: top;
color: #E8EAED;
font-size: 24px;
-webkit-transition: background-color .5s ease;
transition: background-color .5s ease
}
.zilla-bio-widget a.social-link:hover {
-webkit-transition: background-color .1s ease;
transition: background-color .1s ease
}
.zilla-bio-widget .zilla-bio {
line-height: 1.4em;
font-size: .9em
}
#sidebar-footer .widget-title {
padding: 0;
text-transform: none;
margin-bottom: .6em;
color: #fefefe;
font-size: 13px;
font-size: 1.3rem;
-webkit-font-smoothing: antialiased
}
#sidebar-footer .widget {
color: #b5b5b5;
font-size: 12px;
font-size: 1.2rem;
font-weight: 500
}
#sidebar-footer .widget a:hover {
opacity: .7
}
@-webkit-keyframes stretchdelay {
0%, 100%, 40% {
-webkit-transform: scaleY(.4)
}
20% {
-webkit-transform: scaleY(1)
}
}
@keyframes stretchdelay {
0%, 100%, 40% {
transform: scaleY(.4);
-webkit-transform: scaleY(.4)
}
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1)
}
}
.indent-half {
padding-left: 0.6em !important;
}  .wpgb-card a:hover {
background: none;
} .wpgb-facet-6 {
margin: 0 0 30px 0;
text-align: center;
}