@charset "UTF-8";
/*
Theme Name:ROKO THEME3
Author:Bitpirates
Description:白水ロコ様オリジナルテーマ
version:3.0 トップ画像画面一杯他
*/

/* works画像表示調整 */
/* トップnews画像・ファイル表示調整 */

/* ページ全体の設定 */
body{
  margin: 0;
  font-family: sans-serif;
}

/* ヘッダー・ブロック */
header{
  background-color: #EDEDD0;
}

/* スマホ用トップページ画像 */
img.sp{
  max-width: 100%;
  height: auto;
}


/* ナビゲーションメニュー */
nav{
}
ul{
  list-style-type:none ;
  margin: 0;
  padding: 0;
}

/* ハンバーガーメニューを右上に */
.openbtn{
  position: fixed;
  display: block;
  top: 10px;
  right: 10px;
}


.siteName{
  color: #fff;
  font-size: 33px;
  height: 70px;
  /* font-family: 'Rammetto One', cursive; */
  font-family: 'Caveat', cursive;
  display: flex;
  justify-content: center; /*左右中央揃え*/
  align-items: center;     /*上下中央揃え*/
}
.categoryName{
  color: #fff;
  font-size: 32px;
  font-weight: normal;
  background-color: #5AB102;
  margin: 0;
  height: 70px;
  font-family: 'Alegreya Sans', sans-serif;
  letter-spacing: 0.4em;
  display: flex;
  justify-content: center; /*左右中央揃え*/
  align-items: center;     /*上下中央揃え*/
}

.content{
  font-family: 'Noto Sans JP', sans-serif;
}

figure{
  margin: 0;
}

/* コンテンツ・ブロック */
div.content{
  background-color: #EDEDD0;
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 40px;
}

/* 作品写真 */
div.works ul{
  display: flex;
  flex-wrap: wrap;
}
div.works li:not(:last-child){
  margin-right: 7px;
}

/* 記事 */
article{
  padding: 20px;
}

article li{
  margin-bottom: 10px;
  border-bottom: dotted 1px #999;
  padding-bottom: 3px;
}

h2{
  font-size: 30px;
}
.container h2{
  letter-spacing: 0.5em;
}

h3.statement {
  font-family: 'Alegreya Sans', sans-serif;
  letter-spacing: 0.4em;
  font-size: 23px;
}

i{
  margin-right: 10px;
  color: burlywood;
}

dd{
  line-height: 2;
}

/* ブログ投稿 */
/* 投稿画像の縦横比調整 */
.blogPost img{
  width: auto;
  height: auto;
}

.blogPost h1,.blogPost h2{
  letter-spacing: 0.4em;
  font-size: 25px;
}

.blogPost p{
  letter-spacing: 0.2em;
}

a.noUnderLine{
  text-decoration: none;
}

/* モーダルウィンドウ */
#g-nav li a{
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 30px;
  font-weight: normal;
  text-transform: lowercase;
}

/* サブメニュー */
aside{
  padding: 35px;
  margin-top: 40px;
  text-align: center;
background-color: wheat;
}

aside h2{
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 32px;
  color: #d87514;
font-weight: normal;
text-align: center;
letter-spacing: 0.2em;
}

aside p.roko{
  display: block;
letter-spacing: 1.5em;
}
aside p.artstatement{
  display: block;
letter-spacing: 0.3em;
}

aside li{
  text-align: left;
}

/* 言語切替 */
.language {
  margin-top: 25px;
}
.language p {
  background-color: #EDEDD0;
  display: inline;
  padding: 10px;
  margin-top: 25px;
  border-radius: 5px;
  letter-spacing: 0.2em;
  font-size: 14px;
}
.language a {
  text-decoration: none;
}
.language p:hover{
  background-color:burlywood;
}

/* SNSボタン */
i:hover{
  color: darkred;
}

/* ページトップボタン */
/* ページトップスクロール */
#pageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 77%;
}
#pageTop a {
	background:#d87514;
	text-decoration: none;
	color: #fff;
	width: 100px;
	padding: 30px 0;
	text-align: center;
	display: block;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#pageTop a:hover {
	text-decoration: none;
	background-color:rgb(113, 122, 122);
}

/* ニュース記事 */
/* 画像とファイルのフレキシブル表示 */
div.news-files{
  display: flex;
}
div.item{
  flex: 1;
}

/* フッター・ブロック */
footer{
  background-color: #EDEDD0;
  padding: 25px 15px;
  font-family: 'Caveat', cursive;
  font-size: 20px;
  text-align: center;
}

/* シェアボタン */
div.share{
  background-color: #EDEDD0;
  padding-top: 10px;
}
ul.shareButton{
  display: flex;
  justify-content: center;
}
ul.shareButton li:not(:last-child){
  margin-right: 10px;
}

/* お問合せフォーム */
form{
  margin-top: 50px;
}

form dd{
  margin-left: 0;
}
input{
  padding: 6px;
  border:1px #d87514;
}
form dt{
  margin-top: 14px;
  margin-bottom: 5px;
  letter-spacing: 0.6em;
}
textarea{
  padding: 5px;
  border:1px #d87514;
  width:95%;
}
button {
  padding: 10px;
  border: 1px #999;
  border-radius: 5px;
  letter-spacing: 0.6em;
}
button:hover{
  background-color: #d87514;
  color:#fff;
}





/* === PC版 === */
@media(min-width:600px){


/* PC版container */
.container{
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* biography記事トップ */
.container.biography {
  padding-top: 30px;
}

  /* PC版記事 */
article{
  padding-top: 25px;
  padding-left: 60px;
  padding-right: 60px;
}

}
/* === PC版の設定ここまで === */

/* === PC版（大） === */
@media (min-width:1024px){
/* PC版（大）：コンテナ */
.container{
}
/* トップ・画面一杯に画像 */
div.content.home{
  background-image: url('https://manga-daisuki.xyz/wp-content/uploads/2014/01/2014-nouson-butai-artproject-scaled.jpg');
  background-size: cover;
  background-position: center 70%;
}
div.home .container{
  min-width: 735px;
  min-height: 550px;
}
img.sp{
  display: none;
}

/* トップ・インフォメーション記事 */
div.news li{
  text-align: left;
  font-size: 14px;
  padding-bottom: 3px;
  border-bottom: dotted 1px #999;
  margin-top: 15px;
  margin-bottom: 7px;
}

/* 記事 */
article{
  padding-top: 0;
}

/* PC版（大）contentブロック内のcontainer */
.content{
  display: flex;
  justify-content: center;
}

.container{
  margin-left: initial;
  margin-right: initial;
}

/* サブメニューのpadding-top */
aside{
  padding-top: 0;
  margin-top: 0;
  width:300px;
  box-sizing: border-box;
}

}