@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

body	{
	font-size: 15px;
	font-family:  "Noto Sans JP", sans-serif;
	font-weight: 400;
	color: #595955;
	background-color: #F2F0E7;
	margin: 0;}

h1	{font-size: 25px;
	font-weight: 600;
	margin-top: 0px;
	margin-bottom: 0px;}

h2	{font-size: 16px;
	font-weight: 600;
	margin-top: 0px;}

p	{line-height: 2.2}

.indent-1 {
	text-indent: -1em;
	padding-left: 1em;}

a	{color: #b77d3c}
b	{font-weight: 600}

a:hover	{opacity: 0.5;}

a img	{border: none;}


/*ヘッダー*/
header	{
	background-color: #F2F0E7;
	border-bottom: solid 1px #aaaaaa;
	box-shadow: 0 1px 3px #aaaaaa;}
header img	{
	margin: auto;
  display: block;
	height: 80px;
	margin-bottom: 0px}


/*ナビメニュー*/
header nav{text-align: center;
height:55px;}
header nav ul	{
	margin:0px;
	padding-left: 16px;}
header nav li	{
	display: inline-block;
	border-right: solid 1px #595955;
	margin-top: 15px;
	padding-left: 15px;
	padding-right: 15px;}
header nav li:first-child	{border-left: solid 1px #595955;}
header nav img{height:25px;}


/*grid hover*/
.alpha a:hover img 	{opacity: 0.7;
  			filter: alpha(opacity=70);
 			-ms-filter: "alpha(opacity=70)";
			}

/*youtube*/
.mov {text-align: center;
	 position: relative;
	 padding-top: 5%;
     padding-bottom: 50%; /*5+45, 45=80*9/16*/
	 width: 100%;
     overflow: hidden;
}

.mov iframe {
     position: absolute;
     top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
     width: 80%; /*動画基準幅*/
     height: 81.8%; /*45/(5x2+45)*/
	}

/*index*/
#index article{
	width: 800px;
	height: 720px;
	padding: 0px;
}
#index .news {
	padding-top: 20px;}


/*about*/
#about article{
	width: 800px;
	height: 500px;
	padding: 0px;}
#about article h2{margin-bottom: 30px;}
#about section		{width: 500px;
			margin-left: auto;
			margin-right: auto;}
#about header		{margin-bottom: 20px;}
#about box {
  display:flex;
  flex-direction: row;
  margin-bottom: 40px;}
#about text {
	padding-top:30px;
	padding-left:40px;}
#about h3 {
  font-size: 21px;
  margin: 0;}
#about pict {
  width: 25%;
  margin-left: 3%;
  margin-top: 30px;}
#about pict img {
  width: 100%;
  height:auto;
	margin: auto;}
#about  p1	{line-height: 2}


/*works*/
#works article	{
	width: 480px;
	text-align: center;}
.works_pict {
		width: 100%;}


/*each works*/
#EW article{
	width: 760px;
	padding: 0px;}
#EW article h2{margin-bottom: 30px;}
#EW section		{width: 500px;
			margin-left: auto;
			margin-right: auto;}
#EW header		{margin-bottom: 20px;}
#EW .titleArea {
    display: table;
    width: 100%;}
#EW article h1 {
    display: table-cell;
    text-align: left;}
#EW article .navi {
    display: table-cell;
    text-align: right;
}
#EW article .lang{
    padding-left: 10px;
	padding-right: 10px;}
#EW box{
  display:flex;
  flex-direction: column;
  margin-bottom: 40px;}
#EW picture {
  width:100%;
	margin-top: 30px;
	text-align: center;}
#EW picture img {
  width: 80%;
  height:auto;
text-align: center;}
#EW p	{line-height: 1.5}

/*shop*/
#shop article{
	width: 520px;
	display:flex;
	align-items: center;
	justify-content: center;
	margin-top: 100px;}
#shop article b{
	font-size: 18px;
	font-weight: 400;
    margin-bottom: 5px;}
#shop article img{
	width: 120px;
	margin-left: 15px;}


/*コンタクト*/
#contact article{
	width: 520px;
	text-align: center;
	margin-top: 20px;
	font-size: 16px;}
#contact box {
  display:flex;
  text-align: left;
  flex-direction: column;
  margin-bottom: 40px;}

input[type="name"]{
    padding: 10px;
    width: 65%;
    color:#999;
    border:1px solid #999;
  }
input[type="email"]{
    padding: 10px;
    width: 65%;
    color:#999;
    border:1px solid #999;
  }
textarea{
    padding: 10px;
	width: 490px;
    height: 200px;
    color:#999;
    font-size: 14px;
    border:1px solid #999;
  }
button{
    background: #4d4d4dff;
    color: white;
    font-size:16px;
    font-weight:bold;
    padding: 5px 20px;
    border-width: 1px;
	border-radius:5px;
	box-shadow: 1px 1px 2px gray;
  }
  



/*記事*/
article	{
	margin-left: auto;
	margin-right: auto;
	padding-top: 30px;
	padding-bottom: 30px;
	overflow: hidden;
	animation: fadeIn 2s ease 0s 1 normal;
    	-webkit-animation: fadeIn 2s ease 0s 1 normal;}


/*フッター*/
footer	{
	font-size: 10px;
	text-align: center;
	clear: both;
	padding-bottom: 10px;}
.content {min-height: calc(100vh - 85px);}
.social-list {
  	display:flex;
  	justify-content:center;
  	list-style: none;
  	align-items: center;
  	padding-left: 0px;}
.social-list li {
	display: block;
	height: 40px;
	margin:0 30px;}
.social-list-x img {height: 25px; padding-top:5px;}
.social-list-instagram img{height: 35px;}






/*アニメーション*/

@keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    12% {opacity:1}
    17% {opacity:0}
 }

@-webkit-keyframes show {
    0% {opacity:0}
    4% {opacity:1}
    8% {opacity:1}
    16% {opacity:0}
}

/*フェード*/
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/*アニメーション*/
@keyframes show {
    0% {opacity:0}
    10% {opacity:1}
    30% {opacity:1}
    40% {opacity:0}
 }
@-webkit-keyframes show {
    0% {opacity:0}
    10% {opacity:1}
    30% {opacity:1}
    40% {opacity:0}
}

.main_imgBox {
	width:100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    position: relative; }


.main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
    aspect-ratio: 3 / 2;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 24s 0s infinite;
    animation: anime 24s 0s infinite; }

 .main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

    .main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s; }

    .main_img:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; }

	  @keyframes anime {
  0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    33% {
        opacity: 0;
    }
    100% { opacity: 0 }
}




/*-----タブレット向けの記述-----*/
@media screen and (max-width: 960px) {
	/*ウィンドウ幅が0～479pxの場合にCSSを適用*/

	/*ヘッダー*/
	header img	{height: 60px;}

	/*ナビメニュー*/
	
	header nav{height:45px;}
	header nav ul	{padding-left: 10px;}
	header nav li	{
		padding-left: 0px;
		padding-right: 0px;
	  margin-top: 12.5px;}
	header nav img{height:20px;}

	/*index*/
	#index article{
		padding: 0px;
		width:480px;
		height:850px;}

	/*about*/
	#about box {flex-direction: column;}
	#about article {
		padding: 0px;
		width:480px;
		height:850px;}
	#about header {margin-bottom: 10px;}
	#about pict {
	  width: 240px;
		margin-left:0;}
	#about  text {
		padding-left: 0;}
	#about h1	{font-size: 20px;}
	#about h2	{font-size: 15px;}
	#about p   {font-size: 10px;}

	/*works*/
	#works article	{width: 400px;}

	/*each works*/
	#EW article	{width: 75vw;}

	/*shop*/
	#shop article	{width: 300px;}

	/*コンタクト*/
	#contact article	{width: 420px;}
	textarea			{width: 390px;} 

}






/*-----スマホ向けの記述-----*/
@media screen and (max-width: 480px) {
	/*ウィンドウ幅が0～479pxの場合にCSSを適用*/

	/*ヘッダー*/
	header img	{height: 50px;}

	/*ナビメニュー*/
	header nav{height:31px;}
	header nav ul	{padding-left: 10px;}
	header nav li	{
		padding-left: 0px;
		padding-right: 0px;
	  margin-top: 8.5px;}
	header nav img{height:14px;}

	/*index*/
	#index article {
		padding: 0px;
		width:100vw;
		height:75vh;}
	#index .news {
		padding-top: 20px;
		padding-left: 20px;}

	/*about*/
	#about article {
		padding: 0px;
		width:100vw;
		height:80%;}
	#about header {margin-bottom: 10px;}

	#about box {flex-direction: column;}
	#about pict {
	  width: 70%;
		margin-top: 10px;
		margin-left: 15vw;
		text-align: center;}
    #about  pict img {
	  width: 100%;
	  height:auto;}
	#about  text {
		width: 70vw;
		padding-top:10px;
		padding-left: 15vw;
	  padding-right: 20px;}
	#about h1	{font-size: 20px;}
	#about h2	{font-size: 15px;}
	#about p   {font-size: 10px;}

	/*works*/
	#works article	{width: 80vw;}

	/*each works*/
	#EW article	{width: 85vw;}
	#EW pict img {width: 100%;}
	.mov {
		margin-top:20px;
		margin-bottom:20px;
		padding-bottom: 61.25%;/*5+56.25, 56.25=100*9/16*/
		width: 100%;
	}
	.mov iframe {
		width: 100%;
		height: 84.9%;/*56.25/66.25*/
	}

	/*shop*/
	#shop article	{width: 300px;}

	/*コンタクト*/
	#contact article	{width: 80vw;}
	textarea			{width: 92%;} 

	.main_imgBox {
	width:100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative; }


	.main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 24s 0s infinite;
    animation: anime 24s 0s infinite; }

}