@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
body {
	color:#fff;
}
.fadeIn {
  transition: 1s;
  opacity: 0;
}

.fadeIn.animated {
  opacity: 1;
}

/* ヘッダー　*/
header a {
	color: inherit;
	text-decoration: none;
}
header a:hover {
	opacity: 0.8;
	background-color: #fff;
	color: #000;
	font-weight: bold;
	padding: 10px 30px;
}
header {
	position: absolute;
	top:0;
	right: 0;
	width: 100%;
}
nav {
	width: 400px;
}
nav ul {
	text-align: center;
	justify-content: center;
	list-style: none;
}
nav li {
	margin-top: 10px;
	font-size: 2rem;
}

/* ハンバーガーメニュー */
#nav-toggle {
	position: fixed;
	top: 50px;
	right: 50px;
	cursor: pointer;
	background: #fff;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	opacity: 0.9;
}
#nav-toggle > div {
	width: 30px;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-\ transform: translateY(-50%) translateX(-50%);
}
#nav-toggle > div > span.toggle {
	width: 100%;
	height: 3px;
	left: 0;
	display: block;
	background: #615656;
	position: absolute;
	transition: top .5s ease, -webkit-transform .3s ease-in-out;
	transition: transform .3s ease-in-out, top .5s ease;
	transition: transform .3s ease-in-out, top .5s ease, -webkit-transform .3s ease-in-out;
}
header.deteal_header #nav-toggle > div > span.toggle {
	width: 100%;
	height: 1px;
	left: 0;
	display: block;
	background: #615656;
	position: absolute;
	transition: top .5s ease, -webkit-transform .3s ease-in-out;
	transition: transform .3s ease-in-out, top .5s ease;
	transition: transform .3s ease-in-out, top .5s ease, -webkit-transform .3s ease-in-out;
}
#nav-toggle span.toggle:nth-child(1) {
	top: 0;
}
#nav-toggle span.toggle:nth-child(2) {
}
#nav-toggle span.toggle:nth-child(3) {
	top: 10px;
}
.open #nav-toggle span.toggle {
	background: #615656;
}
.open #nav-toggle span.toggle:nth-child(1) {
	top: 5px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.open #nav-toggle span.toggle:nth-child(2) {
	top: 10px;
	width: 0;
	left: 50%;
}
.open #nav-toggle span.toggle:nth-child(3) {
	top: 5px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
/* z-index */
#nav-toggle {
	z-index: 1000;
}
#container {
	z-index: 900;
}
#gloval-nav {
	background-color: rgba(0, 0, 0,0.85);
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 990;
	text-align: center;
	display: flex;
	visibility: hidden;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 29px;
	opacity: 0;
	transition: opacity .3s ease, visibility .3s ease;
}
#gloval-nav a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 20px 0;
	transition: color .3s ease;
	font-size: .55em;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	letter-spacing: .5em;
}
#gloval-nav a:hover {
	color: #666;
}
#gloval-nav ul {
	list-style: none;
	padding: 0;
}
#gloval-nav ul li {
	opacity: 0;
	-webkit-transform: translateX(200px);
	transform: translateX(200px);
	transition: opacity .2s ease, -webkit-transform .3s ease;
	transition: transform .3s ease, opacity .2s ease;
	transition: transform .3s ease, opacity .2s ease, -webkit-transform .3s ease;
}
#gloval-nav ul li:nth-child(2) {
	transition-delay: .05s;
}
#gloval-nav ul li:nth-child(3) {
	transition-delay: .15s;
}
#gloval-nav ul li:nth-child(4) {
	transition-delay: .25s;
}
/* open */
.open {
	overflow: hidden;
}
.open #gloval-nav {
	visibility: visible;
	opacity: 1;
}
.open #gloval-nav li {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
	transition: opacity .9s ease, -webkit-transform 1s ease;
	transition: transform 1s ease, opacity .9s ease;
	transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
}
@media screen and (max-width: 767px) {
#nav-toggle {
	right: 20px;
	top: 20px;
}
#gloval-nav a {
	padding: 10px 0;
	font-size: .5em;
}
}

/* メインビジュアル　*/
.main_visual {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	min-height: 700px;
	background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("../images/main_visual_fix.jpg");
	background-position: center;
	background-size: cover;
	text-align: center;
}
.main_visual img {
	width: 15%;
	vertical-align: bottom;
}
.b_name {
	flex: 1;
	align-items: center;
	justify-content: center;
	width: 80%;
	font-size: 25px;
}

/* セクション：ブランド説明(made in japan)　*/
h1 {
	margin-top: 50px;
	font-size: 30px;
	color: #615656;
	text-align: center;
	text-shadow: 1px 1px 10px ;
}
.concept {
	color: #2b2b2b;
	width: 85%;
	margin: 20px auto;
	font-size: 1rem;
	font-weight: 500;
	text-shadow: 1px 1px 10px ;
	line-height: 2;
}
.made_in_japan {
	margin-top: 50px;
	background-color: #615656;
	background-position: center;
	box-shadow: 1px 1px 10px #A4A2A2;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.made_in_japan .text {
	padding: 20px;
}
.text {
	text-shadow: 1px 1px 10px #A4A2A2;
	line-height: 2;
}
.made_in_japan h2{
	margin-top: 40px;
	margin-bottom: 40px;
	padding: 5px;
	font-size: 25px;
	background-image: linear-gradient(rgba(225,225,225,0.4),rgba(225,225,225,0.2));
	text-align: center;
}
.made_in_japan p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 1rem;
	text-align: center;
}
.made_in_japan .photo {
	min-height: 400px;
	max-width: 100%;
	background-image: url("../images/mishin_fix.jpg");
	background-position: center;
	background-size: cover;
	box-shadow: 1px 1px 10px #A4A2A2;
	margin: 0 auto;
}


/* セクション：ブランド説明(natural vintage)　*/
.natural {
	margin-top: 10px;
	background-color: #615656;
	background-position: center;
	box-shadow: 1px 1px 10px #A4A2A2;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.natural .text {
	padding: 20px;
}
.natural h2{
	margin-top: 0px;
	margin-bottom: 20px;
	padding: 5px;
	font-size: 25px;
	background-image: linear-gradient(rgba(225,225,225,0.4),rgba(225,225,225,0.2));
	text-align: center;
}
.natural p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 1rem;
	text-align: center;
}
.natural .photo {
	min-height: 400px;
	max-width: 100%;
	background-image: url("../images/fu_do_fix.jpg");
	background-position: center;
	background-size: cover;
	box-shadow: 1px 1px 10px #A4A2A2;
	margin: 0 auto;
}


/* セクション：news */
.news h2 {
	margin-top: 100px;
	font-size: 25px;
	color: #615656;
	text-align: center;
}
.news p {
	color: #615656;
	border-bottom: solid 1px #615656; 
	max-width: 93%;
	font-size: 1rem;
	margin: 20px auto;
}
.news span {
	font-weight: bold;
	color: #fff;
	background-color: #615656;
	border-radius: 50%;
	padding-top: 2px;
	padding-left: 12px;
	padding-bottom: 2px;
	padding-right: 12px;
}
.news_p {
	margin-left: auto;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 100px;
	max-width: 90%;
	line-height: 2;
}
.readyfor img {
	max-width: 80%;
}
button {
	height: 10vh;
	width: 50vw;
	margin: 50px auto 100px;
	background-color: #615656;
	border: 1px solid #615656;
	color: #fff;
	display: block;
	font-weight: bold;
	font-size: 1rem;
}
.button a:hover {
	opacity: 0.5;
}

.wrap {
	text-align: center;
	margin-bottom: 10px;
}
.facebook {
	max-width: 95% !important;
}

/* セクション：ショップ　*/
.web_shop img {
	display: flex;
	width: 100%;
	height: 100vh;
}
.web_shop {
	flex: 1;
	align-items: center;
	justify-content: center;
	width: 100vw;
	min-height: 300px;
	background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url("../images/online_shop_fix.jpg");
	background-position: center;
	background-size: cover;
	text-align: center;
	margin-top: 70px;
}
.web_shop h3 {
	font-size: 2.2rem;
	padding-top: 90px;
	margin-bottom: 10px;
}
.web_shop a {
	background-color: #fff;
	opacity: 0.6;
	padding: 5px 20px;
	color: #615656;
	font-size: 1.4rem;
	text-decoration: none;
	text-shadow:  1px 1px 10px #A4A2A2;
}
.web_shop a:hover {
	background-color: rgba(0,0,0,0.6);
	color: #fff;
}
.readyfor img {
	display: block;
	width: 400px;
	margin: 0 auto;
}
.readyfor a:hover {
	opacity: 0.7;
}
/* フッター　*/
footer {
    background-color:#615656;
    color: #fff;
}
 .foot1_fa {
	display: flex;
	text-align: center;
	 justify-content: center;

	font-size: 30px;
	margin: 0px auto;
	 padding: 20px ;
}
.foot1_fa i {
	color: #fff;
	margin-left: 0;
	margin-right: 15px;
	padding-left: 0;
	padding-right: 10px;
}
.foot1_fa a:hover {
	opacity: 0.6;
}
.foot2 {
	width: 70%;
	margin: 0 auto;
}
.foot2 a {
    color: inherit;
    font-size: 12px;
    text-decoration: none;
    display: block;
    padding: 8px;
}
.foot2 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.foot2 li {
	line-height: 2.4;
}
footer p {
    margin: 0;
    font-size: 80%;
}
footer h3 {
    border-bottom: solid 1px #fff;
    font-size: 90%;
	color: #FFEDA5;
    margin-bottom: 0;
}
.foot3 {
	text-align: center;
    font-size: 80%;
	border-top:  solid 1px #fff;
	padding: 5px 0;
}
.logo {
    font-family: 'Fredericka the Great', cursive;
}
.foot2 a:hover {
    background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2));
}

/*about:PrivacyPolicy*/
.kojin_visual {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 400px;
	background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("../images/kojin_fix.jpg");
	background-position: center;
	background-size: cover;
	text-align: center;
}
.kojin_visual img {
	width: 15%;
	vertical-align: bottom;
}

#yakusoku {
	margin-bottom: 50px;
	max-width: 900px;
	margin: 0 auto;
	padding-bottom: 50px;	

}
.privacy {
	border-bottom: solid 3px;
	max-width: 95%;
	margin: 0 auto;
	padding-top: 30px;
	padding-bottom: 10px;
}
.kojin {
	color: #615656;
	text-align: center;
	font-size: 1.3rem;
	margin-top: 30px;
}
.kh3 {
	font-size: 1rem;
	font-weight: 100;
	max-width: 90%;
	margin: 0 auto;
	margin-top: 30px;
	width: 700px;
}
.kh4 {
	font-size: 1.2rem;
	margin-top: 40px;
}
.kp {
	font-size: 1rem;
	max-width: 70%;
	margin: 0 auto;
	margin-top: 10px;
}

/* contact:フォーム */
.contact_visual {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 400px;
	background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("../images/contact.jpg");
	background-position: center;
	background-size: cover;
	text-align: center;
}
.contact_visual img {
	width: 15%;
	vertical-align: bottom;
}

.chu-i-h2 {
	color: #615656;
	width: 85%;
	margin: 20px auto;
	font-size: 1rem;
	font-weight: bold;
}
.chu-i {
	color: #615656;
	width: 85%;
	margin: 20px auto;
	text-align: start;
	
}
input {
	display: block;
	width: 90%;
	height: 40px;
	padding-left: 5px;
	font-size: 0.9rem;
}
textarea {
	display: block;
	width: 90%;
	height: 250px;
	padding-left: 5px;
	padding-top: 10px;
	font-size: 1.0rem;
	font-weight: 300;
}
label {
	margin: 0 auto;
}
.soushin {
	display: block;
}

/* WEBdesign:WEB紹介ページ */
.web_visual {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 400px;
	background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("../images/main_WEBdesign.jpg");
	background-position: center;
	background-size: cover;
	text-align: center;
}
.web_visual img {
	width: 10%;
	vertical-align: bottom;
}
.thanks_1 {
	font-size: 1.2rem;
	margin-bottom: 30px;
}
.thanks_p {
	color:#615656;
	font-size: 0.9rem;
	max-width: 90%;
	margin: 0 auto;
	text-align: center;
	line-height: 30px;
}

/* thanks:サンクスページ */
.thanks_visual {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 360px;
	background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("../images/thanks.jpg");
	background-position: center;
	background-size: cover;
	text-align: center;
}
.thanks_visual img {
	width: 10%;
	vertical-align: bottom;
}
.thanks_1 {
	font-size: 1.2rem;
	margin-bottom: 30px;
}
.thanks_p {
	color:#615656;
	font-size: 0.9rem;
	max-width: 90%;
	margin: 0 auto;
	text-align: center;
	line-height: 30px;
}
.insta_btn3 {/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 14px;/*角丸に*/
  position: relative;
  display: block;
  height: 120px;/*高さ*/
  width: 120px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  padding-top: 12px;/*上側との余白*/
  box-sizing: border-box;
  font-size: 19px;/*文字のサイズ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.insta_btn3:before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}
.Instagram {
	width: 120px;
	margin: 0 auto;
	padding-top: 40px;
}
.insta_btn3 div {
  position: relative;
}

.insta_btn3 .fa-instagram {
    font-size: 70px;/*アイコンサイズ*/
    position: relative;
    display:block;
    transition: .5s
}

.insta_btn3 .fa-instagram:hover {/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}
.modoru {
	display: block;
	text-align: center;
	font-size: 1.2rem;
	margin-top: 20px;
}
.modoru a {
	text-decoration: none;
	color: #615656;
}
.modoru a:hover {
	background-color: #615656;
	color: #fff;
	padding-left: 20px;
	padding-right: 20px;
	opacity: 0.8;
}

/* メディアクエリ　*/
@media (min-width:768px){
	.concept {
		width: 600px;
		padding-top: 30px;
		padding-bottom: 50px;
	}
	.web_shop {
		height: 420px;
		padding-top: 140px;
	}
	br.nobr {
		display:contents;
	}
	.news p {
		width: 700px;
	}
	.facebook {
		text-align: center;
	}
    .foot2 {
        display: flex;
    }
    .foot2 div {
        flex: 1;
    }
	 footer .container {
		display: flex;
		flex-wrap: wrap;
		max-width: 100%;
		padding: 20px 20px;
	}
	.foot1 {
		flex: 0 0 22%;
	}
	.foot2 {
		flex: 0 0 78%;
	}
	.foot3 {
		flex: 0 0 100%;
		margin-top: 30px;
		margin-bottom: 0;
	}
	.foot2 div:not(:first-child){
		margin-left: 10px;
	}
	.chu-i-h2 {
		width: 600px;
	}
	.chu-i {
		margin-top: 40px;
	}
	form {
		width: 700px;
		margin: 50px auto;
	}
	input {
		width: 400px;
	}
	txstarea {
		height: 500px;
	}
	.soushin {
		margin-left: 70px;
	}
	.kojin_visual,.contact_visual {
		height: 700px;
	}
}

/* メディアクエリ　*/
@media (min-width:768px) {
	.b_name {
		font-size: 35px;
	}
	.made_in_japan .container {
		display: flex;
		flex-direction: row-reverse;
	}
	.made_in_japan .text {
		flex: 1;
		margin-top: 40px;
	}
	.made_in_japan .photo {
		flex: 1;
		margin-top:-40px;
		margin-bottom: 40px;
		margin-left: -40px;
	}
	.natural .b_name {
		font-size: 35px;
	}
	.natural .container {
		display: flex;
		margin-top: 100px;
	}
	.natural .text {
		flex: 1;
	}
	.natural .photo {
		flex: 1;
		margin-top:-40px;
		margin-bottom: 40px;
		margin-right: -40px;
	}


	/* CSSアニメーションの指定 */
.made_in_japan .text{
  animation: SlideIn 5s both;
}
.made_in_japan .photo{
  animation: SlideIn 3s both;
}
}
/* CSSアニメーションの設定 */


@keyframes SlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

	/* CSSアニメーションの指定 */
@media (min-width:768px) {
.natural .text{
  animation: SlideIn 6s both;
}
.natural .photo{
  animation: SlideIn 8s both;
}
}
/* CSSアニメーションの設定 */
@keyframes SlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

	/* CSSアニメーションの指定 */
@media (min-width:768px) {
.news_p {
  animation: SlideIn 10s both;
}
.wrap {
  animation: SlideIn 12s both;
	margin-bottom: 100px;
}
}
/* CSSアニメーションの設定 */
@keyframes SlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
	
/* パソコン・スマホ共通のCSS */
#PageTopBtn {
    position: fixed; /*ボタンの配置場所を固定*/
    bottom: 40px; /*下からのボタンの配置場所を指定*/
    right: 10px; /*右からのボタンの配置場所を指定*/
	opacity: 0.8;
}
#PageTopBtn a {
    display: block; /*配置の調整*/
    text-decoration: none; /*文字の下線を消す*/
    color: #fff; /*文字の色*/
    background: #615656; /*ボタンの背景色*/
    text-align: center; /*文字を中央に配置*/
    border-radius: 5%; /*ボタンの角を少し丸くする*/
    outline: none; /*クリックしたときの黒い枠を消す*/
}
#PageTopBtn a:hover {
    text-decoration: none; 
    background: #A4A2A2; /*マウスオーバー時の背景色*/
}

/* パソコンで表示する場合のCSS */
@media (min-width: 768px) {
#PageTopBtn {
    font-size: 13px; /*文字のサイズ*/
}
#PageTopBtn a {
    width: 100px; /*ボタンの幅*/
    height: 15px; /*ボタンの高さ*/
    padding: 25px 0; /*文字の配置場所の調整*/
}
}

/* スマホで表示する場合のCSS */
@media (max-width: 767px) {
#PageTopBtn {
    font-size: 10px;
}
#PageTopBtn a {
    width: 70px;
    height: 10px;
    padding: 17px 0;
	
}
}

/*//////フェードイン下から/////////*/
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
  &.fadein-left{
      transform: translate(-30px,0);
  }
  &.fadein-right{
      transform: translate(30px,0);
  }
  &.fadein-up{
      transform: translate(0,-30px);
  }
  &.fadein-bottom{
      transform: translate(0,30px);
  }
  &.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}