/*
Theme Name: Kazune Iwasaki
*/
body{
  background: White;
  font-family: 'Noto Serif JP', serif;
  margin: 0;
  padding: 0;
}
/* ヘッダー */
header{
  filter:alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.9;
  z-index:500;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* ヘッダーロゴ */
.header__inner{
  max-width: 1152px;
  width: 90%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.header__logo{
  flex: none;
  width: auto;
  height: 60px;
}
.header__navgroup{
  margin-left: auto;
  display: flex;
  flex: none;
}
.header__navgroup > * + *{
  margin-left: 60px;
}
@media screen and (max-width: 460px){
.header__navgroup {display:none}
}
.header__navitem{
  font-size: 16px;
  color: black;
  padding: 0.1em 0.3em;
  background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, #8b0000 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: .3s;
}
a{
	color:black;
	text-decoration: none;
}
.header__navitem:hover {
  background-position: -100% 0;
  color: #fff !important;
}
/* ボタン全体 */
.flowbtn10 {
  display:inline-block;	
  font-size:30px;
  text-decoration:none;
  transition:.5s;
  color:#444;	
}
/* インスタ・pocket・ラインだけ少し大きく */
.flowbtn10 .fa-instagram,.flowbtn10 .fa-get-pocket,.flowbtn10 .fa-get-pocket,.flowbtn10 .fa-line{
  font-size:32px;
}
/* Twitterマウスホバー時 */
.flowbtn10 .fa-twitter:hover{
  color:#55acee;
}
/* Instagramマウスホバー時 */
.flowbtn10 .fa-instagram:hover{
  color:#c6529a;
}
/* Facebookマウスホバー時 */
.flowbtn10 .fa-facebook-f:hover{
  color:#3b5998;
}
/* YouTubeマウスホバー時 */
.flowbtn10 .fa-youtube:hover{
  color:#fc0d1c;
}
/* メールアイコンマウスホバー時 */
.flowbtn10 .fa-envelope:hover{
  color:#8b0000;		
}
/* ulタグの内側余白を０にする */
ul.snsbtniti{
  padding:0!important;
}
ul.snsbtnhum{
  padding:0!important;
}
/* アイコン全体の位置 */
.snsbtniti{
  display:flex;
  flex-flow:row wrap;
  justify-content:space-between;	
}
.snsbtnhum{
  display:flex;
  flex-flow:row wrap;
  justify-content:space-between;
  position: absolute;
  bottom: 50px;
  left: 10%;
}
@media screen and (max-width: 460px){
.snsbtniti{
	display:none
	}
}
/* アイコン同士の余白 */
.snsbtniti li{
  flex:0 0 10%;
  text-align:center!important;
}
.snsbtnhum li{
  flex:0 0 20%;
  text-align:center!important;
}
ul.snsbtniti{
  padding:0 !important;
  list-style-type:none!important;
}
ul.snsbtnhum{
  padding:0 !important;
  list-style-type:none!important;
}
ul.snsbtniti{
  padding:0!important;
  width:260px;
  margin:0 auto;
}
ul.snsbtnhum{
  padding:0!important;
  width:260px;
  margin:0 auto;
}
#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーの形をCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒箇所*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*メニューの中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 90%;
  max-width: 330px;/*最大幅（お好みで調整を）*/
  height: 100%;
  background: #fff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}
.header__contentitem {
  font-size: 30px;
  position: relative;
  top: 30px;
}
/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.header-logo-menu{
  display: flex;
  display: -moz-flex;
  display: -o-flex;
  display: -webkit-flex;
  display: -ms-flex;
  flex-direction: row;
  -moz-flex-direction: row;
  -o-flex-direction: row;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
}

/*ロゴやサイトタイトルをセンタリング*/
@media screen and (min-width:767px) {
  #nav-drawer {
    display:none;
	margin:auto;
   }
 }
.page1image{
  width: 100vw;
}
h2 {
  font-size: 5rem;
  text-align: center;
}
h4 {
  font-size: 1.2rem;
  text-align: center;
  -webkit-text-size-adjust: none;
}
.column {
  height: 100vh;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
}
h3 {
  font-size: 3rem;
  text-decoration: overline;
  text-decoration-color: #8b0000
}
p {
  font-size: 1.2rem;
  }
 @media screen and (max-width:767px) {
p {
  font-size: 0.85rem;
  margin: 0;
   }
 }
.cat1 {
  background: white;
  background-size: cover;
  color: black;
  box-sizing:border-box;
  padding: 4%;
}
.cat2 {
  background: url("https://kazuneiwasaki.com/blog/wp-content/uploads/2021/06/Profile-1-scaled.jpg") no-repeat top center;
  background-size: cover;
  color: rgba(0,0,0,.7);
  max-width: 100%;
  box-sizing:border-box;
  padding: 4%;
}
.cat3 {
  background: url("https://kazuneiwasaki.com/blog/wp-content/uploads/2021/06/works.jpg") no-repeat top center;
  background-size: cover;
  color: rgba(255,255,255,.7);
  max-width: 100%;
  background-position: right 5% bottom 45%;
  box-sizing:border-box;
  padding: 4%;
}
.cat4 {
  background: white;
  background-size: cover;
  color: black;
  box-sizing:border-box;
  padding: 4%;
}
.cat5 {
  background: white;
  background-size: cover;
  color: black;
  box-sizing:border-box;
  padding: 4%;
}
.cat6 {
  background: url("https://kazuneiwasaki.com/blog/wp-content/uploads/2021/06/santoor-1-scaled.jpg") no-repeat top center;
  background-size: cover;
  color: rgba(255,255,255,.7);
  background-position: 5% 75%;
  max-width: 100%;
  box-sizing:border-box;
  padding: 4%;
}
@media all and (min-width: 500px) {
  .wrapper {
    display: flex;
  }
}
footer {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: #faf0e6;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#page_top{
  width: 60px;
  height: 60px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.6;
}
#page_top a{
  width: 60px;
  height: 60px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f139';
  font-size: 50px;
  color: #808080;
}
#npcatch{
margin:0px;
}

#npcatch li{
font-size:15px;
overflow:hidden;
clear:both;
margin:0px 0px 5px;
vertical-align:top;
}

#npcatch img{
/*サムネイルのスタイル*/
float:left;
padding:0px;
box-shadow:0px 0px 7px #bbb;
}

#npcatch .title{
/*記事タイトルのスタイル*/
width:170px;
float:right;
padding:0px;
}