@charset "utf-8";
/* CSS Document SecretDoor_HP */

/* 共通設定 */
h2:before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	background-image: url("../images/h2_icon.gif");
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
	margin: 0 8px 5px 0;
}
h2:after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	background-image: url("../images/h2_icon.gif");
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
	margin: 0 0 5px 4px;
}
#brand,
#onlinestore,
#collection,
footer {
	background-color: #EFDDE4;
}
#brand,
#onlinestore {
	padding: 30px 0 40px 0;
}
#news_latest,
#item,
#sns {
	padding: 60px 0 60px 0;
	background-image: url("../images/partition_lace01.gif"),url("../images/partition_lace02.gif");
	background-repeat: repeat-x;
	background-position: center top,center bottom;
	background-size: 50px auto;
	background-color: #FFF;
}
#news_article,
#collection article,
#contact article,
#faq article,
#copyright-boi article,
#privacypolicy-userpolicy article {
	padding: 20px 0 60px 0;
}
#contact section,
#faq section,
#privacypolicy section,
#userpolicy section,
#copyright section,
#boi section {
	width: 90%;
	margin: 0 auto;
	text-align: left;
}
#news_latest section,
#news_article,
#brand section,
#item section,
#onlinestore section,
#collection_list {
	width: 90%;
	margin: 0 auto;
	text-align: center;
}
#privacypolicy section p,
#userpolicy section p,
#copyright section p,
#boi section p {
	margin-bottom: 8%;
}
#news_latest h2,
#news_article h2,
#brand h2,
#brand h3,
#item h2,
#onlinestore h2,
#sns h2,
footer h2,
#footer_nav li p,
#collection h2,
#contact h2,
#faq article h2 {
	font-family: zen-old-mincho, sans-serif;
	font-weight: 400;
	font-style: normal;
}
#news_latest h3,
#onlinestore h3,
#contact h3,
#confirmation h2,
#userpolicy h2,
#userpolicy h3,
#privacypolicy h2,
#privacypolicy h3,
#copyright h2,
#boi h2 {
	font-family: 'ヒラギノ丸ゴ ProN', 'Hiragino Maru Gothic ProN', sans-serif;
}
.newslist:after {
	background: radial-gradient(circle farthest-side, #727171, #727171 40%, transparent 40%, transparent);
    background-size: 10px;
    content: '';
    display: inline-block;
    height: 10px;
    width: 100%;
}
#collection_list li:after {
	background: radial-gradient(circle farthest-side, #FFF, #FFF 40%, transparent 40%, transparent);
    background-size: 10px;
    content: '';
    display: inline-block;
    height: 10px;
    width: 100%;
}
#news p a,
#contact p a,
#faq article a,
.storename a,
.element_wrap_checkbox a,
.textunderline {
	text-decoration: underline;
	font-weight: bold;
}
.viewmore a {
	display: block;
	background-image: url("../images/more.gif");
	background-repeat: no-repeat;
	background-size: 150px 38px;
	width: 150px;
	height: 38px;
	color: transparent;
	margin: 0 auto;
}
.scroll_TOP a,
.newslist_TOP,
.collection_TOP {
	display: block;
	padding-top: 90px;
	margin-top: -90px;
}
.visibility {
	visibility: hidden;
}


/* TOPページ読み込み */
.loading {
	width: 100vw;
	height: 100vh;
	transition: all 1s;
	background-color: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	opacity: 1;
	visibility: visible;
}
.loading.is-active {
	opacity: 0;
	visibility: hidden;
}
.loading-animation {
	width: 100vw;
	height: 100vh;
	transition: all 1s;
	background-color: #EFDDE4;
	background-image: url("../images/TOP_lace01.gif"), url("../images/TOP_lace02.gif");
	background-repeat: repeat-x;
	background-position: center top,center bottom;
	background-size: 50px auto;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	animation: zoomUp 10s ease-in-out 0s normal both;
}
.loading-animation img {
	width: 18%;
	height: auto;	
}
@keyframes zoomUp {
	0% {
		transform: scale(1);
	}
	20% {
		transform: scale(1);
	}
	100% {
		transform: scale(50); /*拡大率*/
	}
}
.loading-animation.is-active {
	opacity: 1;
	visibility: visible;
}


/* header */
header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 90px;
	z-index: 9997;
	background-image: url("../images/secretdoor_top_background.gif");
	background-size: 70px auto;
}
#logo img {
	width: 250px;
	height: auto;
	margin: 20px 0 0 0;
}
nav {
	font-size: 18px;
	line-height: 2.5em;
}
nav ul {
	text-align: center;
	display: block;
}
nav ul li {
	margin: 15px auto;
}
#btn_Onlinestore {
	position: fixed;
	top: 6px;
	right: 20px;
}
#btn_Onlinestore a {
	display: block;
	color: transparent;
	background-image: url("../images/onlinestore.gif");
	background-repeat: no-repeat;
	background-size: 115px;
	width: 115px;
	height: 79px;
}
#btn_Onlinestore a:hover {
	background-image: url("../images/onlinestore_hover.gif");
}


/* スライドギャラリー */
#FadeGallery {
	width: 100%;
	height: auto;
	overflow: hidden;
}
#fade {
	width: 100%;
	padding-top: 20px;
	margin-bottom: 65%;
}
#fade li {
	width: 100%;
	height: auto;
	position: absolute;
}
#fade li img {
	width: 90%;
	height: auto;
}


/* NEWS */
#news_latest {
	margin: 0 auto;
	width: 100%;
}
.newslist {
  text-align: left;
}
#newslist_TOP {
	padding: 20px 0 0 0;
}
#newslist_TOP ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 65%;
	margin: auto;
}
#newslist_TOP ul li {
	margin: 0 0 5% 0;
	width: 27%;
	height: auto;
	display: inline-block;
	vertical-align: top;
}
#newslist_TOP figure {
	margin-bottom: 1em;
} 
/*#newslist_TOP ul:after {
	content:'';
	width: 27%;
}*/
.newstext {
	text-align: left;
}
.newstext a {
	color: #000000;
	text-decoration: none;
}
.newstext a:hover {
	color: #727171;
}
#newslist_TOP ul li img,
.newslist img {
	width: 100%;
	height: auto;
}
#newslist_TOP time,
.newslist time {
	font-weight: bold;
}
.newslist img {
	width: 400px;
	height: auto;
}
#news_archive select {
	width: 90%;
}
.newslist h5 {
	margin-bottom: 1rem;
	font-weight: bold;
}
.newslist dd {
	margin-bottom: 2rem;
}


/* BRAND */
#brand figure{
	width: 100%;
	margin: 0 auto;
	background-image: url("../images/brand_background.gif");
	background-repeat: no-repeat;
	background-size: 95%;
	background-position: center;
}
#brand img {
	width: 93%;
	margin: 20px;
}
#brand h3 {
	font-weight: bold;
	margin: 0.8em 0;
}


/* ITEM */
#item .instagram_SecretDoor_top ul,
#item .instagram_SecretDoor_sub ul {
	width: 80%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#item .instagram_SecretDoor_top ul li {
	position: relative;
	width: 46%;
	height: auto;
	margin: 0 auto;
	margin-bottom: 2%;
	overflow: hidden;
	padding-top: 46%;
}
#item .instagram_SecretDoor_sub ul li {
	position: relative;
	width: 30%;
	height: auto;
	margin: 0 auto;
	margin-bottom: 2%;
	overflow: hidden;
	padding-top: 30%;
}
#item .instagram_SecretDoor_sub ul li:nth-child(-n+2) {
	display: none;
}
#item .instagram_SecretDoor_top ul li img,
#item .instagram_SecretDoor_sub ul li img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ONLINE STORE */
#onlinestore ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: auto;
}
#onlinestore ul:after {
	content: '';
	width: 30%;
}
#onlinestore ul li {
	margin: 0 0 2% 0;
	width: 30%;
	height: auto;
	display: inline-block;
	vertical-align: top;
}
#onlinestore ul li .storename {
	line-height: 1.5em;
}
#onlinestore figure {
	margin-bottom: 10px;
}
#onlinestore figure img {
	width: 100%;
	height: auto;
}
#onlinestore #storelist{
	background-image: url("../images/partition_ribbon.gif");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 80% auto;
	padding-bottom: 30px;
}
#onlinestore #business_person h3 {
	margin-top: 20px;
}
#onlinestore #business_person ul li {
	margin-bottom: 0;
}
.storename {
	text-align: left;
}


/* footer */
#sns #footer_sns {
	position: relative;
}
#sns #footer_sns:after {
	content: '';
	display: inline-block;
	width: 120px;
	height: 83px;
	background-image: url("../images/followme.gif");
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
	position: absolute;
	top: -60px;
}
#sns #footer_sns li {
	margin: 0 1% 0 0;
	width: 270px;
	height: auto;
	display: inline-block;
}
#sns #footer_sns li:last-child{
	margin-right: 0;
}
#sns #footer_sns figure {
	margin-bottom: 0;
}
#sns #footer_sns figure img {
	width: 100%;
	height: auto;
}
footer {
	padding: 30px 0 60px 0;
}
#footer_nav li {
	margin: 0 30px 0 0;
	width: 60px;
	height: auto;
	display: inline-block;
	vertical-align: top;
}
#footer_nav li:last-child{
	margin-right: 0;
}
#footer_nav li figure{
	margin-bottom: 5px;
}
#footer_nav li img {
	width: 100%;
}
#footer_nav li p {
	font-weight: bold;
	line-height: 1.5em;
}
#footer_otherbrand {
	background-image: url("../images/partition_ribbon.gif"),url("../images/partition_ribbon.gif");
	background-repeat: no-repeat;
	background-position: center top,center bottom;
	background-size: 80% auto;
	padding: 5% 0 5% 0;
}
#footer_otherbrand li {
    margin: 0 30px 0 0;
	width: 250px;
    height: auto;
    display: inline-block;
}
#footer_otherbrand li:last-child {
    margin-right: 0;
}
#footer_otherbrand figure img {
	width: 100%
}
#attention {
	padding: 30px 0 30px 0;
}
#attention ul li {
	margin-bottom: 1em;
	font-weight: bold;
}
#PageTop {
	position: fixed;
	bottom: 5px;
	right: 10px;
}
#PageTop a {
	display: block;
	color: transparent;
	background-image: url(../images/pagetop.gif);
	background-repeat: no-repeat;
	background-size: 80px;
	width: 80px;
	height: 42px;
}


/* COLLECTION */
#collection_list figure {
	margin: 2rem auto;
}
#collection_list img {
	width: 70%;
}


/* CONTACT */
.mandatory {
	color: #CC0003;
 	font-weight: bold;
}
.element_wrap label {
  font-weight: bold;
}
.element_wrap input,
.element_wrap select,
.element_wrap textarea {
  width: 100%;
  margin-bottom: 40px;
}
.element_wrap_checkbox {
	margin-bottom: 40px;
}
.submit-reset{
  text-align: center;
}
.submit-reset input {
  background-color: #727171;
  color: #FFF;
  font-size: 14px;
  font-weight: bold;
  border: none;
  width: 120px;
  height: 40px;
  margin: 0 10px 0 10px;
}
.submit-reset input:hover {
	color: #706f6f;
	background-color: #C8CAC9;
}
#confirmation_form form {
	text-align: left;
}
#confirmation_form form label {
	font-weight: bold;
}
.confirmation_element_wrap p,
.confirmation_file_element_wrap p,
.confirmation_checkbox_element_wrap p {
	background-color: #D9D9D9;
	padding: 10px;
	margin-bottom: 40px;
}
.confirmation_file_element_wrap p {
	text-align: center;
}
.confirmation_file_element_wrap img {
	width: 50%;
}
.confirmation_text {
	text-align: center;
}
.error_list {
	padding: 10px 30px;
	color: #CC0003;
	border: 1px solid #CC0003;
	border-radius: 5px;
}




/* FAQ */
#faq section dl {
	text-align: left;
	border-bottom: 2px solid #54565A;
	line-height: 1.8em;
}
#faq section dl:last-child {
	border-bottom: none;
	margin-bottom: 0;
}
#faq section dl dt:before {
	content: '';
	display: inline-block;
	width: 30px;
	height: 30px;
	background-image: url("../images/faq_question.gif");
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
	margin: 0 8px 0 0;
}
#faq section dl dd {
	margin-top: 10px;
}
#faq section dl dd .answertitle:first-child:before,
#faq section dl dd .answertitle_normal:before {
	content: '';
	display: inline-block;
	width: 30px;
	height: 30px;
	background-image: url("../images/faq_answer.gif");
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
	margin: 0 8px 0 0;
}
#faq section dl dd .answertitle:first-child {
	margin-left: 0;
}
#faq section dl dd .answertitle {
	margin: 0 0 5px 38px;
	font-weight: bold;
}
#faq section dl dd .answer,
#faq section dl dd .answer_newline {
	margin: 0 0 30px 38px;
}


/* BOI・COPYRIGHT・ATTENTION */
#copyright,
#privacypolicy {
	background-image: url("../images/partition_ribbon.gif");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 80% auto;
}
#boi,
#userpolicy {
	padding-top: 5%;
}
#privacypolicy h3,
#userpolicy h3 {
	font-weight: bold;
	margin-bottom: 1em;
}



/*PC用*/
@media only screen and (min-width:750px) {
	
}


/*スマートフォン用*/
@media only screen and (max-width:749px) {
	/* 共通事項_SP */
	#news_latest section,
	#brand section,
	#item section,
	#onlinestore section,
	#contact section,
	#confirmation section,
	#faq section,
	#privacypolicy section,
	#userpolicy section,
	#copyright section,
	#boi section {
		width: 93%;
	}
	
	
	/* TOPページ読み込み_SP */
	.loading-animation img {
		width: 40%;
	}
	
	
	/* header_SP */
	#logo img {
		width: 180px;
		margin: 25px 0 0 0;
	}
	#btn_Onlinestore {
		top: 15px;
		right: 10px;
	}
	#btn_Onlinestore a {
		width: 85px;
		height: 58px;
		background-size: 85px;
	}
	
	
	
	/* NEWS_SP */
	#news_latest section ul {
		width: 100%;
	}
	#newslist_TOP ul {
		width: 100%;
	}
	#newslist_TOP ul li {
		width: 40%;
	}
	/*#newslist_TOP ul:after {
		width: 40%;
	}*/
	.newslist figure {
		text-align: center;
	}
	.newslist img {
	width: 330px;
}
	
	
	/* BRAND */
	#brand figure{
		background-size: 93%;
	}
	#brand img {
		width: 90%;
		margin: 10px;
	}

	
  	/* ITEM_SP */
  	#item .instagram_SecretDoor_top ul,
	#item .instagram_SecretDoor_sub ul{
		width: 100%;
  	}
	
	
	/* ONLINE STORE_SP */
	#onlinestore ul {
		width: 100%;
	}
	#onlinestore ul:after {
		width: 48%;
	}
	#onlinestore ul li {
		width: 48%;
		margin-right: 2%;
	}
	#onlinestore ul li:nth-child(2n){
		margin-right: 0;
	}
	#onlinestore figure {
		margin-bottom: 0.5em
	}
	#onlinestore #storetext {
		text-align: left;
	}
	#onlinestore .storename {
		text-align: left;
	}
	#onlinestore #storelist{
		background-size: 100% auto;
	}
	
	
	/* footer_SP */
	#sns #footer_sns {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#sns #footer_sns:before {
		content: '';
		display: inline-block;
		width: 120px;
		height: 83px;
		background-image: url("../images/followme.gif");
		background-repeat: no-repeat;
		background-size: contain;
		margin: 0 0 10px 0;
	}
	#sns #footer_sns:after {
		content: none;
	}
	#sns #footer_sns li {
		margin: 0 0 2% 0;
		width: 230px;
		display: block;
	}
	#footer_nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 300px;
		margin: auto;
	}
	#footer_nav li {
		margin: 0 15px 0 0;
	}
	#footer_nav li:nth-child(4),
	#footer_nav li:nth-child(7) {
		margin-right: 0;
	}
	#footer_otherbrand {
  		background-size: 100% auto;
		margin: 0 3% 0 3%;
  		padding: 5% 0 5% 0;
	}
	#footer_otherbrand li {
		margin-right: 0;
	}
	
	
	/* COLLECTION_SP */
	#collection section figure img {
		width: 90%;
	}
	
	
	/* CONTACT_SP */
	#confirmation #confirmation_formWrap,
	#confirmation #confirmation_submit{
		width: 100%;
	}
	#confirmation table.formTable{
		width: 95%;
	}
	
	
	/* BOI・COPYRIGHT・ATTENTION_SP */
	#copyright,
	#privacypolicy {
  		background-size: 90% auto;
	}

}