/*
カスタム CSS 機能へようこそ。

使い方については、https://wp.me/PEmnE-Bt をご覧ください。
*/
/*

theme Name: jonouer_theme1
Author: Yoshi
Description: original theme
version： 1.0.0

*/
:root {
  --gray: rgba(119, 119, 119, 1);
	--standardgray: rgba(128, 128, 128, 1);
	--ff_h: 'HGS明朝E', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'ヒラギノ明朝 ProN', 'ヒラギノ明朝 Pro', serif;
	--ff_p: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ ゴシック', '游ゴシック', sans-serif;
	--ff_l: 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'ヒラギノ明朝 ProN', 'ヒラギノ明朝 Pro', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", 'Baskervville', 'Jomolhari', "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	--headerH: 160px;
}

@media (max-width: 849px) {
	:root {
        --headerH: 46px;
	}
}

*{
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--ff_p);
	font-size: 12px;
	line-height: 1.7;
	color: var(--gray);
}

/*見出しを全て太字で表示するように指定*/
h1, h2, h3, h4, h5, h6 {
	color: var(--gray) !important;
  font-family: var(--ff_h);
	font-weight: 400;
	margin: 0;
}

ul {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
	color: var(--gray);
}

p {
	margin: 0;
	font-family: var(--ff_p);
}

/*画像の最大幅を画面のサイズの最大幅に設定*/
img {
	max-width: 100%;
	height: auto;
}

.fa, .fas{
	display: inline;
}

@keyframes fadeIn {
	100% {
		opacity: 1;
	}
}








/*******************
*
* 共通
*
*******************/

body, input, textarea, button, .button, .faux-button, .wp-block-button__link, .wp-block-file__button, .has-drop-cap:not(:focus)::first-letter, .has-drop-cap:not(:focus)::first-letter, .entry-content .wp-block-archives, .entry-content .wp-block-categories, .entry-content .wp-block-cover-image, .entry-content .wp-block-latest-comments, .entry-content .wp-block-latest-posts, .entry-content .wp-block-pullquote, .entry-content .wp-block-quote.is-large, .entry-content .wp-block-quote.is-style-large, .entry-content .wp-block-archives *, .entry-content .wp-block-categories *, .entry-content .wp-block-latest-posts *, .entry-content .wp-block-latest-comments *, .entry-content p, .entry-content ol, .entry-content ul, .entry-content dl, .entry-content dt, .entry-content cite, .entry-content figcaption, .entry-content .wp-caption-text, .comment-content p, .comment-content ol, .comment-content ul, .comment-content dl, .comment-content dt, .comment-content cite, .comment-content figcaption, .comment-content .wp-caption-text, .widget_text p, .widget_text ol, .widget_text ul, .widget_text dl, .widget_text dt, .widget-content .rssSummary, .widget-content cite, .widget-content figcaption, .widget-content .wp-caption-text{
	font-family: var(--ff_p);
}

#site-header, .menu-modal, #post-6 .section-inner, #site-footer, #actionbar, .sharedaddy, .post-meta-edit-link-wrapper{
	display: none !important;
}

/** ギャラリーブロック拡大時 **/
.jp-carousel-info{
	display: none;
}
.jp-carousel-overlay{
	background: #fff !important;
}
.jp-carousel-next-button span, .jp-carousel-previous-button span{
	opacity: 0.6 !important;
}
.jp-carousel-next-button:hover span, .jp-carousel-previous-button:hover span{
	opacity: 0.9 !important;
}
.jp-carousel-close-hint span{
	background: rgba(0,0,0,0) !important;
}
.jp-carousel-close-hint:hover span{
	color: #666 !important;
}







/*******************
*
* ヘッダー
*
*******************/

#header_inner{
    width: 100%;
    height: var(--headerH);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

#header_logo{
	display: inline-block;
	width: 100%;
	margin-bottom: 20px;
	font-family: var(--ff_l);
	font-size: 35px;
	letter-spacing: 2px;
	font-weight: normal;
	color: var(--standardgray);
	text-align: center;
  opacity: 0;
  animation: fadeIn 1.0s 0s ease-in both;
}



/* ハンバーガーボタン */
#nav_toggle{
	display: none;
}
#nav_toggle {
    position: relative;
    width: 1.75rem;
    height: 1.5rem;
    float: left;
    z-index: 2;
}
#nav_toggle i {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--gray);
    position: absolute;
    transition: all .5s;
}
#nav_toggle i:nth-child(1) {
    top: 0;
}
#nav_toggle i:nth-child(2) {
    top: 0;
    bottom: 0;
    margin: auto;
}
#nav_toggle i:nth-child(3) {
    bottom: 0;
}

#nav_toggle.show i:nth-child(1) {
    transform: translateY(11px) rotate(-45deg);
}
#nav_toggle.show i:nth-child(2) {
    opacity: 0;
}
#nav_toggle.show i:nth-child(3) {
    transform: translateY(-12px) rotate(45deg);
}



/*** ヘッダーメニュー ***/
#header_menu{
    float: right;
    margin: 0px 10%;
    font-family: var(--ff_h);
    font-size: 14px;
    font-weight: 400;
	transition: all .5s;
}
#header_menu li{
    display: inline-block;
    margin: 18px;
    opacity: 0;
    transform: translateX(-100px);
}
#header_menu li:first-child{
    margin: 0 28px;
    font-size: 20px;
    font-weight: 600;
    opacity: 0;
    transform: translateX(0);
    animation: fadeIn .5s 1.0s ease-in both;
	transition: all .5s;
}
#header_menu li:nth-child(2){
    animation: headerMenu 1.0s 1.5s both;
}
#header_menu li:nth-child(3){
    animation: headerMenu 1.0s 1.6s both;
}
#header_menu li:nth-child(4){
    animation: headerMenu 1.0s 1.7s both;
}
#header_menu li:nth-child(5){
    animation: headerMenu 1.0s 1.8s both;
}
#header_menu li:nth-child(6){
    animation: headerMenu 1.0s 1.9s both;
}
@keyframes headerMenu{
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

.menu_invalid{
	color: #ccc;
	pointer-events: none;
}


/*** トップページのみ ***/
.header_top #header_menu{
	margin: 40px 10%;
}
.header_top #header_logo{
	display: none;
}
.header_top #header_menu li:first-child{
    animation: fadeIn .5s 2.0s ease-in both;
}
.header_top #header_menu li:nth-child(2){
    animation: headerMenu 1.0s 2.5s both;
}
.header_top #header_menu li:nth-child(3){
    animation: headerMenu 1.0s 2.6s both;
}
.header_top #header_menu li:nth-child(4){
    animation: headerMenu 1.0s 2.7s both;
}
.header_top #header_menu li:nth-child(5){
    animation: headerMenu 1.0s 2.8s both;
}
.header_top #header_menu li:nth-child(6){
    animation: headerMenu 1.0s 2.9s both;
}


/*** スクロール時 ***/
.header_onScroll{
	/*height: 64px !important;*/
	background: #fff;
}/*
.header_onScroll #header_logo{
	width: 100px;
  margin-left: 64px;
}*/







/************************
*
* トップページ
*
***********************/
.container_top {
	width: 100vw;
	height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
	background: #eee;
}

#bgImg {
	width: 110%;
	height: 110%;
	margin: -5%;
	margin-left: 0%; /*ここの数値を-5%から増やすと背景画像が右に移動します。*/
	background: #eee;
	overflow: hidden;
}

#bgImg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation: fadeInBg 1.5s ease-in both;
}
@keyframes fadeInBg {
	100% {
		opacity: .5;
	}
}

#topLogo {
	width: 100%;
	position: absolute;
	bottom: 0;
	margin: 40px 0;
	font-family: var(--ff_l);
	font-size: 70px;
	letter-spacing: 4px;
	font-weight: normal;
	color: var(--standardgray);
	text-align: center;
	opacity: 0;
	animation: fadeIn .5s 1.5s ease-in both;
}







/****************
 * 
 * 個別ページ
 * 
 ****************/

#site-content{
	max-width: 1000px;
	margin: var(--headerH) auto;
	padding: 0 2%;
}

.entry-header{
	text-align: left;
}

.entry-header .entry-title{
	font-size: 26px;
}

.entry-content{
	margin-top: 80px;
}




/*** コレクション ***/

.col_group .wp-block-group__inner-container{
	display: block;
}

.col_group .wp-block-gallery{
	display: block;
	width: 30%;
	position: relative;
	float: left;
	margin: 0 8% 0 40px;
}
.col_group .wp-block-gallery .blocks-gallery-item{
	margin: 0;
}
.blocks-gallery-item_hide{
	display: none !important;
}
.col_prev, .col_next{
	position: absolute;
  top: calc(50% - 10px);
	width: 10px;
  height: 20px;
	font-family: sans-serif;
	z-index: 1;
}
.col_prev{
    left: -18px;
}
.col_next{
    left: calc(100% + 10px);
}
.img_brightness img{
	filter: brightness(109%);
}
.img_brightness1 ul li:first-child img{
	filter: brightness(112%);
}
.img_brightness3 ul li:nth-child(3) img{
	filter: brightness(112%);
}
.col_group h2{
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 16px;
}
.col_titleL{
	padding-top: 40px;
}
.col_titleS{
	padding-top: 60px;
}
.col_title_sub{
	font-family: sans-serif;
	font-size: 10px;
	font-weight: 400;
}
.col_group p{
	margin-bottom: 22px;
	line-height: 22px;
}




/*** ギャラリー ***/

.gal_imgs{
	
}
.gal_imgs li{
  display: block !important;
	width: calc(94% / 3) !important;
  flex-grow: unset !important;
  margin: 1% !important;
}





/*** コンタクト ***/

.con_col1, .con_form{
	width: 48%;
	margin: 0 1%;
}
.con_col1{
	float: left;
}
.con_form{
	float: right;
}

.wpcf7-form{
  /*max-width: 600px;*/
  margin: 0 auto;
}
.form-wrap{
	width: 48%;
	float: left;
	margin: 0 1% 30px 1%;
}
.form-wrap-m{
	width: 98%;
	float: left;
	margin: 0 1% 30px 1%;
}
.wpcf7-form input, .wpcf7-form select{
  width: 96%;
	padding: .5em 0 .5em .5em;
	border: 1px solid #eee;
	line-height: 1.5em;
	color: var(--gray);
}
.wpcf7-form select{
  width: 100%;
	padding: .6em;
}
.wpcf7-form .form_message{
  width: 96%;
	padding: .5em;
	border-color: #eee;
}
input:focus {
  outline: 1px solid #666 !important;
}
textarea:focus {
  border: 1px solid #666 !important;
  outline: 1px solid #666 !important;
}
.wpcf7-form .wpcf7-submit{
	width: 200px !important;
  display: block;
  margin: 0 auto 100px auto;
  color: var(--gray) !important;
  background-color: #eee !important;
}
.con_img{
	width: 100%;
	margin: 30px 0;
}
.con_img img{
	width: 100%;
	margin: 0;
}
.con_text{
	line-height: 40px;
}








/*******************
* 
* フッター
* 
******************/

.con_copyright{
	float: left;
	margin-top: 150px;
}









/*******************
*
* 共通2
*
*******************/

.hide{
	display: none !important;
}
.show{
	display: block !important;
}
.hide_pc{
	display: none;
}
.hide_sp{
	display: block;
}








/*------レスポンシブ------*/


@media (max-width: 1000px) {
	/*** ヘッダー ***/
	#header_menu{
		margin: 0px 2%;
	}
	
	/*** トップページ ***/
	#bgImg{
		width: 120%;
		height: auto !important;
		position: absolute !important;
		margin: -5%;
	}
	#topLogo{
    margin: 0;
    font-size: 40px;
	}
	
	/*** コレクション ***/
  .col_titleL{
	  padding-top: 0;
  }
  .col_titleS{
	  padding-top: 0;
  }
}

/*スマホ～タブレット用*/
@media (max-width: 849px) {
	#site-content{
		padding-top: 40px;
	}
	/*** ヘッダー ***/
	#header_logo{
		margin-bottom: 0;
		font-size: 27px;
	}
  #nav_toggle{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
		border: 12px solid rgba(255,255,255,0);
  }
	#header_menu{
		display: none;
    width: 100%;
		margin: 0;
    background: #fff;
	}
	.header_top #header_menu{
		margin: var(--headerH) 0 0;
    background: rgba(0,0,0,0);
	}
	#header_menu li{
    width: 15%;
    margin: 0;
    text-align: center;
	}
	#header_menu li:first-child{
    width: 17%;
    margin: 0;
    animation: fadeIn .5s 0s ease-in both;
	}
  #header_menu li:nth-child(2){
    animation: headerMenu 1.0s .5s both;
  }
  #header_menu li:nth-child(3){
    animation: headerMenu 1.0s .6s both;
  }
  #header_menu li:nth-child(4){
    animation: headerMenu 1.0s .7s both;
  }
  #header_menu li:nth-child(5){
    animation: headerMenu 1.0s .8s both;
  }
  #header_menu li:nth-child(6){
    animation: headerMenu 1.0s .9s both;
  }
  .header_top #header_menu li:first-child{
    animation: fadeIn .5s 0s ease-in both;
  }
  .header_top #header_menu li:nth-child(2){
    animation: headerMenu 1.0s .5s both;
  }
  .header_top #header_menu li:nth-child(3){
    animation: headerMenu 1.0s .6s both;
  }
  .header_top #header_menu li:nth-child(4){
    animation: headerMenu 1.0s .7s both;
  }
  .header_top #header_menu li:nth-child(5){
    animation: headerMenu 1.0s .8s both;
  }
  .header_top #header_menu li:nth-child(6){
    animation: headerMenu 1.0s .9s both;
  }
	/*** コレクション ***/
	.col_group .wp-block-gallery{
    width: 60%;
    float: none;
    margin: 0 8% 0 20%;
	}
	.col_group h2{
		margin-top: 30px;
		padding-left: 20%;
	}
	.col_group p{
		padding-left: 20%;
	}
	
  /*** コンタクト ***/
  .con_col1, .con_form{
	  width: 98%;
	  float: none;
  }
	.wpcf7-form .wpcf7-submit{
		margin: 0 auto;
	}
}

/*スマホ用*/
@media (max-width: 767px) {
	h1, h2, h3, h4, h5, h6 {
    font-family: 'HGS明朝E', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'ヒラギノ明朝 ProN', 'ヒラギノ明朝 Pro', 'Lora', serif;
		font-weight: 400;
  }
}

@media (max-width: 570px) {
	/*** コレクション ***/
	.col_group h2{
		padding: 0 8%;
	}
	.col_group p{
		padding: 0 8%;
	}
}

@media (max-width: 500px) {
	/*** ヘッダー ***/
	#header_menu{
		font-size: 12px;
	}
	#header_menu  li:first-child{
		font-size: 16px;
	}
	
	/*** コレクション ***/
	.col_group p{
		font-size: 11px;
	}
	
	/*** 共通 ***/
	.hide_pc{
		display: block;
	}
	.hide_sp{
		display: none;
	}
}

/*タブレット用*/
@media (min-width: 850px) {
	
}