@charsette "utf-8";


/* 基本設定： フォントサイズ */
/*@media (max-width: 599px) {
	:root {
		font-size: 12px;
	}
}

@media (min-width: 600px) and (max-width: 799px) {
	:root {
		font-size: 16px;
	}
}

@media (min-width: 800px) {
	:root {
		font-size: 18px;
	}
}*/

body {
	font-size: 12px;
	color: #333333;
	line-height: 2.33;
	letter-spacing: 0.05em;
}



/* 基本設定： ページ全体 */
body {
	font-family: 'EB Garamond',"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝","YuMincho","HGS明朝E","ＭＳ Ｐ明朝",serif;
}

/* フッター最下部コピーライト位置調整用 */
body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}


/*----------------------------ロゴアニメーション-------------------------------*/

video {
	width: 100%;
	outline: none;
    border: none;
}

.topanimebox {
  /*border: 2px solid #1b0303;
  box-sizing: border-box;*/
  width: 100%;
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;

}

.logoanime {
  max-width: 630px;
}

@media (max-width: 931px) {/*931px*/
	/* 小さい画面用の設定 */
	.logoanime {
  width: 70%;
	}
	.topanimebox{
		height: 85vh;
	}
}

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

header {
	position: fixed;
	z-index: 100;
}

header .container {
	padding: 20px;
}

/* ヘッダーA: サイト名 */

.headA {
	width: 80px;
}

.headA img{
	width: 100%;
}

@media (max-width: 1024px) {
	/* 小さい画面用の設定 */
header {
		position: relative;
	}	

.headA {
	margin: 0 auto;
	padding-top: 20px;
}
	
header .container {
	padding: 0;
}
	
}



/* ヘッダーB： ナビゲーションメニュー */
.headB {
	margin-top:20px;
	padding-left: 25px;
	font-size:14px;
}

.headB ul {
	list-style: none;
}

.headB a {
	color: inherit;
	font-size: 14px;
	text-decoration: none;
	transition: 0.7s;
}

.headB a:hover {
	color: #c8c8c8;
}

.headB .insta {
	padding-top:30px;
	padding-bottom:30px; 
}

.headB .nowhere {
	color:  #c8c8c8;
}

.headB .worksmenu {
	display: none;
	padding-left: 20px;
}

/*works下層ファイルではメニュー表示*/
.menuopen .headB .worksmenu {
	display: block !important;
}

.headB .worksbtn {
	cursor: pointer;
}

@media (max-width: 1024px) {
	/* 小さい画面用の設定 */
	.headB {
		display: none;
		position: absolute;
		top:0;
		width: 100%;
		background:rgba(255,255,255,0.9);
		text-align: center;
		padding-left:0; 
		z-index: 100;
		margin-top: 0;
		padding-top: 100px;
		color: #000000;
	}
	
	.headB .worksmenu {
	padding-left: 0;
	background:rgba(204,204,204,0.5);
}
	
}


/*-大きい画面用-*/
@media (min-width: 1025px) {

	.hamburger-menu {
		display: none;
	}

	.headB {
		display: block !important;
	}
}


:root {
  --hamburger-menu-size: 45px; /* メニューの大きさ */ 
  --hamburger-menu-padding: 10px;  
  --hamburger-menu-border-px: 1px; /* 線の太さ */
  --hamburger-menu-border-color: #000000; /* 線の色 */
  --hamburger-menu-transition: 0.3s; /* アニメーション秒数 */
}

@media (max-width: 1024px) {
	/* 小さい画面用の設定 */
.hamburger-menu {
  cursor: pointer;
  position: absolute;
  top:10px;
  left:10px;
  width: 45px;
  height: 45px;
  z-index: 1000;
}


.hamburger-menu-line {
  position: absolute;
  transition: var(--hamburger-menu-transition);
  width: calc(100% - var(--hamburger-menu-padding) * 1);
  height: var(--hamburger-menu-border-px);
  background-color: var(--hamburger-menu-border-color);
}


.line-top {
  top: var(--hamburger-menu-padding);
  left: var(--hamburger-menu-padding);
}

.line-middle {
  top: calc(50% - var(--hamburger-menu-border-px)/2);
  left: var(--hamburger-menu-padding);
}

.line-bottom {
  bottom: var(--hamburger-menu-padding);
  left: var(--hamburger-menu-padding);
}


.hamburger-menu-active > .line-top {
  top: calc(50% - var(--hamburger-menu-border-px)/2);
  transform: rotate(45deg);
}

.hamburger-menu-active > .line-middle {
  width: 0;
  height: 0;
  left: var(--hamburger-menu-padding);
}

.hamburger-menu-active > .line-bottom {
  top: calc(50% - var(--hamburger-menu-border-px)/2);
  transform: rotate(-45deg);
}
}



/*----------------------------conAwrap-------------------------------*/
.conAwrap {
	flex: 1;
}
.conAwrap h1{
	margin: 115px 0 40px 160px;
	font-size: 17px;
	font-weight: normal;
}

.conAwrap .conAin {
	width: 100%;
	max-width: 500PX;
	margin: 0 auto;
}

.conAwrap .conAin p {
	margin: 30px 0;
}

.conAwrap .charch {
	height: 400px;
	background-image: url("../../images/church.gif");
	background-position: right bottom;
	background-size: 180px auto;
	background-repeat: no-repeat;
}

.conAwrap h2 {
	font-size: 14px;
	margin-top: 80px;
}

.conAwrap h2.textc {
	text-align: center;
	font-weight: normal;
}

@media (max-width: 768px) {
	
	.conAwrap {
		padding: 20px;
	}
	.conAwrap h1{
		margin-left: 0;
		margin-top: 20px;
	}
	
	/*.conAwrap .conAin {
	width:100%;
	}*/
	
}

@media (max-width: 599px) {
	.conAwrap .charch {
	height: 600px;
	background-image: url("../../images/church.gif");
	background-position: right bottom;
	background-size: 180px auto;
	background-repeat: no-repeat;
	}
}

@media (min-width: 1400px) {
	.conAwrap h1{
		margin-left: 260px;
		}
}

/*----------------------------conAwrap追記about-------------------------------*/
.aboutls {
	letter-spacing: 0.1em;
}

.conAwrap h2.t17 {
	font-size: 17px;
	letter-spacing: 0.1em;
}

.conAwrap h2.t17 span{
	font-size: 11px;
	letter-spacing: 0.1em;
	display: inline-block;
	margin-left: 10px;
}

/*----------------------------conAwrap追記contact-------------------------------*/

.conAwrap .contactwrap {
	width: 100%;
	max-width: 350PX;
	margin: 0 auto;
}

.contact {
	display: flex;
	align-items: center;
}

.contact h3 {
	font-weight: normal;
	margin-right: 7px;
}

.contact a {
	text-decoration: none;
	color: #000000;
}


/*----------------------------conAwrap追記stokist-------------------------------*/
.shop-list {
	width: 100%;
	max-width: 350PX;
	margin: 80px auto;
}

.conAwrap .conAin .shop-list p {
	margin: 10px 0;
}

.conAwrap .conAin .shop-list h2 {
	margin-top: 0;
}

.shop-list p {
	line-height: 1.5;
}

.shop-list .shopaddress {
	padding-left: 15px;
	border-left: 2px solid #000000;
}


/*----------------------------works------------------------------*/
/*-----2020youtube----*/
.youtube {
  position:relative;
  width: 100%;
  /*max-width: 1200px;*/
  margin: 0 auto;
}

.youtube::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


/*-----写真エリア大枠共通設定----*/
.workswrap {
	width: 80%;
	max-width: 1200px;
	margin: 0 auto 100px;
	flex: 1;
}

.workswrap h1 {
	font-size: 17px;
	font-weight: normal;
	margin: 30px 0 15px;
}

.workswrap .nomovie {
	margin-top: 115px;
}

@media (max-width: 768px) {
	/*タブレット以下*/
	.workswrap .nomovie{
		margin-top: 20px;
	}
}

/*-----写真並び共通設定----*/


.workswrap .photowrap {
	display: flex;
	flex-wrap: wrap;
}

.workswrap .photowrap article {
	width: 33.33%;
	margin: 0;
	padding: 0;
}

.workswrap .photowrap article img{
	width: 100%;
	display: block;
	margin: 0 auto;
	padding: 0;
}


@media (max-width: 767px) {
	
	.workswrap .photowrap article {
		width: 50%;
	}
	
	.workswrap {
		width: 100%;
		margin-bottom: 30px;
	}
	
	.workswrap h1 {
	margin-left: 10px;
	}
}


/*works2020詳細ページ*/

.itemwrap {
	position: relative;
}

.itemname {
	position: fixed;
	bottom: 30px;
	left: 30px;
}

.itemname h1 {
	font-size: 14px;
	font-weight: normal;
	margin-bottom: 30px;
}

.itemname a {
	display: block;
	/*border-bottom: 0.5px solid #666666;*/
	padding: 0;
	/*text-decoration: none;*/
	color: inherit;
}

.itemname p {
	font-size: 14px;
	line-height: 1.5;
}

.itemphoto {
	display: block;
	height: 100vh;
	margin: 0 auto;
	top: 0;
	left:0;
}

.close {
	display: block;
	position: absolute;
	top: 10px;
	right: 30px;
	text-decoration: none;
	color: inherit;
}

@media (max-width: 1024px) {
	/* 小さい画面用の設定 */
	.itemname {
		position: static;
		margin: 30px 0 20px 20px;
	}
	.itemphoto {
		width: 100%;
		height: auto;
	}
}


/*-----remake詳細ページ----

.itembigwrap{
	width: 75%;
	max-width: 1200px;
	margin: 0 auto 100px;
	display: flex;
}

.citem {
		flex: 1;
}

.itembigwrap img {
		width: 100%;
		max-width:485px;
}

.itembigwrap .itemdetails h1 {
	margin-top: 50px;
	font-weight: normal;
}

.itembigwrap .price {
	margin-bottom: 30px;
}


@media (max-width: 767px) {
	.itembigwrap {
		display: block;
		width: 100%;
		margin-bottom: 30px;
		padding: 20px;
		box-sizing: border-box;
	}
	
	.itembigwrap img {
		width:100%;
	}
	
}

@media (min-width: 768px) {
	.itemdetails {
		margin-left: 50px;
	}
	.itembigwrap {
		margin-top: 115px;
	}
}
*/

/*----------------------------フッター-------------------------------*/
/*コピーライト*/
footer {
	display: flex;
	justify-content: flex-start;
}

.footC {
	padding: 0 0 15px 35px;
	font-size:12px;
	font-family: 'EB Garamond',"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝","YuMincho","HGS明朝E","ＭＳ Ｐ明朝",serif;
}

@media (max-width: 768px) {
	
.footC {
	padding: 0 0 15px 20px;
	}
	
}


/*==========================================
 ページトップへボタンのスタイル
===========================================*/
a#pagetopBtn {
	display:inline-block;
	position: fixed;
	bottom: 45px;
	left: 30px;
	/*text-align:center;
	background-color:#2B5566;
	background-color: var(--dark-main-color);
	border-radius:5px;*/
}

a#pagetopBtn img {
	width: 8px;
}

@media (max-width: 768px) {
	/* 小さい画面用の設定 */
a#pagetopBtn {
	bottom: 15px;
	left: auto;
	right: 10px;
}
	
}