@charset "UTF-8";
/* 
Theme Name: White Blank Book
Author: Vincent Pen Roca
Description: White Blank Book のホームページ用Wordpressテーマ
Version: 1.0.0
License: GNU General Public License v2 or later
License URI:http//www.gnu.org/licenses/gpl-2.0.html

/* ▼ 共通CSSリセット開始 */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,
dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: none;
font-style: normal;
text-align: left;
zoom: 1;
text-decoration:none;
}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
display: block;
}
table {
border-collapse: collapse;
font-family: inherit;
}
h1,h2,h3,h4,h5 {
font-size: 100%;
font-weight: normal;
line-height: 1;
}
input,textarea,select {
font-family: inherit;
font-size: 16px;
}
input[type="button"],input[type="text"],input[type="submit"] {
-webkit-appearance: none;
border-radius: 0;
}
textarea {
resize: none;
-webkit-appearance: none;
border-radius: 0;
}
th,td {
border-collapse: collapse;
}
table th,table td {
white-space: nowrap;
}
ul,ol {
list-style-type: none;
}
img {
vertical-align: text-bottom;
vertical-align: -webkit-baseline-middle;
max-width: 100%;
height: auto;
width /***/:auto;
}
/* ▲ 共通CSSリセット終了 */

/* ▼ヘッダー共通css 開始
------------------------------------------------------------------------------------*/
body{
color:#333;
}
header{
width:100%;
height:100px;
background:rgba(255,255,255,0.8);
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
margin: 0 auto;
display:flex;
justify-content: space-between;
box-shadow: 0 5px 5px #AAA;/*画面スクロールして変わるようにする*/
z-index: 1000;
}
h1{
width:55%;
height:90%;
background:url(assets/images/wbb-logo.svg)no-repeat center center /contain;
position:relative;
top:6%;
left:5vw;
white-space: nowrap;/*h1の文字を隠す方法*/
text-indent: 100%;
overflow: hidden;
}
#rock{/*inputは見えない。文章構造上表示されるので隠す*/
display:none;
}
/*ナビゲーション
------------------------------------------------*/
.g-nav{
width:50%;
position: absolute;
top:0px;
right:20px;
font-family: 'Rock Salt', cursive;
}
.g-nav ul{/*liの幅の調整*/
display:flex;
justify-content: space-between;
}
.g-nav li{
margin-top:40px;
line-height:30px;
}
.g-nav a{
display: block;
font-size: 1vw;
text-align: center;
color:#333;
}
.g-nav li.current>a{
background:linear-gradient(transparent 50%, rgba(255, 0, 0, 0.7) 50%);
/*この記述は他の方法あれば。変更考えている。*/
}
.g-nav a:hover{
background:linear-gradient(transparent 70%, rgba(255, 0, 0, 0.7) 20%);
}

/* 【news】【contact】【live】のcss
------------------------------------------------ */
.page-main{
width: 100%;
padding-bottom: 50px;
background:url(assets/images/bg-main.png)no-repeat 10% 60px /cover;
}
.page-container{
max-width: 960px;
margin: 0 auto;
}
.page-wrapper{
width:60vw;
margin: 0 auto;
padding-top:17%;
}
.page-h2{
font-size:3.5vw;
margin-bottom:4%;
font-family: 'Permanent Marker', cursive;
letter-spacing: 0.3em;
}
/*▼footer
----------------------------------------*/
footer{
width:100%;
background-color:rgba(255,255,255);
margin: 0 auto;
}
footer>p {
text-align: center;
padding:5px 0  10px;
}
ul.sns {
width:100%;
display: flex;
justify-content: center;
}
.sns a {
display:block;
font-size:44px;
margin:0 10px;
color:#333;
}
footer li a:hover {
color: rgba(255, 0, 0, 0.7);
}
/* ▼page-404 css
-----------------------------------------------------------------------------*/

.error-page{
height:100vh;
}
.page-404{
font-size:2.2vh;
line-height:2.2;
padding:50px;
}
.page-404a >a{
font-size:2vh;
color:blue;
padding:20px;
}
.page-404a >a:hover{
color:red;
}
/* ▼news-single css
-----------------------------------------------------------------------------*/
.news-single{
max-width:700px;
height:100vh;
padding:10px;
}
/* ▼live-single css
-----------------------------------------------------------------------------*/
.live-single-page{
display:flex;
}

.live-single-content{
width:60%;
padding:10px;
}

.single-live-widget{
width:40%;
padding:20px;
}


/*トップページに戻る
-------------------------------------*/
#to-top{
width:5vw;
height:5vw;
position:fixed;
right:4vw;
bottom:5.1vw;
display:none;
z-index:110;
}
#to-top.scroll{
display:block;
}

/*1024px以下
------------------------------------------------------------------------*/
@media (max-width:1024px){
header{
height:80px;
justify-content:flex-start;
padding-left: 10px;
}
h1{
width:100%;
height:100%;
background:url(assets/images/wbb-symbol01.svg)no-repeat center center /contain;
position:relative;
top:4%;
left:0;
white-space: nowrap;/*h1の文字を隠す*/
text-indent: 100%;
overflow: hidden;
}
.page-h2{
font-size:4vw;
margin-bottom:50px;
padding-left:0;
text-align: center;
}
.page-main{
background:url(assets/images/bg-news-contact.png)no-repeat 15% top/cover;
height:auto;
padding-bottom: 0;
}
.page-wrapper{
text-align: center;
padding:120px 10px 50px;
}
}

/*767px以下
-----------------------------------------------------------------*/
@media (max-width:767px){
.g-nav{
position:fixed;
top:10%;
right:0;
width:90%;
height:100vh;
transform: translate(100% , 0);
transition:0.3s;
}
#g-nav-outer{
position:fixed;
top:80px;
left:0;
width:100%;
height:100vh;
background:url(assets/images/bg-g-nav-outer.jpg)no-repeat -15% top/cover rgba(255,255,255,0.6);
transform: translate(100%, 0);
transition:0.3s;
}
#rock:checked~.g-nav{
transform: translate(0,0);
}
.g-nav>ul{
display: block;
margin-top:10%;
}
.g-nav li{
text-align: center;
padding:30px;
margin: 0;
}
.g-nav a{
font-size:20px;
display: inline-block;
letter-spacing: 0.2em;
}
#btn{
width:44px;
height:44px;
margin-right:20px;
position:absolute;
top:18%;
right:0;
}
#btn>span{
display:block;
width:30px;
height:2px;
background-color:#333;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin: auto;
transition:0.2s;
}
#btn>span::before{
content:"";
display:block;
width:30px;
height:2px;
background-color:#333;
position:absolute;
top:-16px;
left:0;
right:0;
bottom:0;
margin:auto;
transition:0.3s;
}
#btn>span::after{
content:"";
display:block;
width:30px;
height:2px;
background-color:#333;
position:absolute;
top:0px;
left:0;
right:0;
bottom:-16px;
margin:auto;
transition:0.3s;
}
#rock:checked+label span{
background-color:transparent;
}
#rock:checked+label span::before{
top:0;
transform: rotate(45deg);
}
#rock:checked+label span::after{
bottom:0;
transform: rotate(-45deg);
}
#rock:checked ~#g-nav-outer{
transform: translate(0,0);
transition:0.3s;
}
.page-main{
height:auto;
}
.page-container{
width:100%;
  height:auto;
}
.page-wrapper{
width:auto;
height:auto;
}
}

/*500px以下
----------------------------*/
@media (max-width:500px){
header{
height:60px;
}
#g-nav-outer{
top:60px;
}
.g-nav li{
padding:15px;
margin: 0;
}
.g-nav a{
font-size:12px;
display: inline-block;
}
h1 {
width:200px;
}
footer{
width:100%;
position: relative;
}
.sns a {
font-size:32px;
margin-right:10px;
}
.icon a{
font-size:8vw;
margin-right:10px;
}
#to-top{
width:10vw;
height:10vw;
}
.page-h2{
font-size:30px;
margin-bottom:10px;
}
.page-wrapper{
text-align: center;
padding-top:80px;
width:95vw;
}
.live-single-page{
display: block;
}

.live-single-content{
width:100%;
padding:0px;
}

.single-live-widget{
display:none;
width:0%;
padding:0px;
}


}

html.no-scroll{
position:fixed;
width:100%;
height:100%;/*jsで記述*/
}