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

/* 共通設定 */
#news_latest,
#brand,
#item,
#onlinestore,
#sns,
footer {
	position: relative;
	background-color: #DBDBDB;
	width: 100%;
}
#news_latest h2,
#brand h2,
#item h2,
#onlinestore h2,
#sns h2,
footer h2{
	font-weight: 600;
	position: absolute;
	top: -48px;
	left: 0;
	color: #FFF;
	background-color: #000;
	padding: 10px 30px 10px 30px;
	letter-spacing: 4px;
}
#news_latest section,
#newslist,
#brand section,
#item section,
#onlinestore section,
#collection_list {
	margin: 0 auto;
	padding: 30px 0 40px 0;
	width: 90%;
}
#sns section {
	margin: 0 auto 120px auto;
	padding: 30px 0 40px 0;
	width: 90%;
}
footer section {
	margin: 0 auto;
	padding: 30px 0 40px 0;
	width: 90%;
}
#confirmation_form,
#completion,
#contact_form,
#faqlist,
#privacypolicy section,
#userpolicy section,
#copyright section,
#boi section {
	width: 90%;
	margin: 0 auto;
	text-align: left;
}
#news_article h2,
#collection article h2,
#contact article h2,
#faq article h2,
#privacypolicy h2,
#userpolicy h2,
#copyright h2,
#boi h2 {
	font-weight: 600;
    margin: 0 auto 40px auto;
    padding-left: 5%;
    text-align: left;
    line-height: 5px;
    background-color: #C3C3C3;
}
.h2 {
	background-color: #FFF;
	padding: 5px 3% 40px 3%;
	letter-spacing: 0.1em;
}
.h2sab {
	margin-left: 3%;
	font-size: 14px;
}
.newslist:after
/* #collection_list li:after */ {
	background: radial-gradient(circle farthest-side, #C3C3C3, #C3C3C3 40%, transparent 40%, transparent);
    background-size: 10px;
    content: '';
    display: inline-block;
    height: 10px;
    width: 100%;
}
#privacypolicy section p,
#userpolicy section p,
#copyright section p,
#boi section p{
	margin-bottom: 8%;
}
#contact p a,
#faq article a,
.storename a,
.newslist a,
.element_wrap_checkbox a,
.textunderline {
	text-decoration: underline;
	font-weight: bold;
}
.viewmore {
	margin-top: 20px;
}
.viewmore a {
	color: #FFF;
	border: solid 3px #888888;
	background-color: #CBCBCB;
	font-size: 1.5em;
	letter-spacing: 4px;
	text-decoration: none;
	padding: 0px 20px 0px 20px;
}
.viewmore a:hover {
	background-color: #B0B0B0;
}
.scroll_TOP a,
.newslist_TOP,
.collection_TOP {
	display: block;
	padding-top: 60px;
	margin-top: -60px;
}
#news_TOP,
#brand_TOP,
#item_TOP,
#onlinestore_TOP,
#sns_TOP {
	display: block;
	height: 120px;
}
#copyright_TOP,
#boi_TOP,
#privacypolicy_TOP,
#userpolicy_TOP {
	display: block;
	padding-top: 60px;
	margin-top: -60px;
}
.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: #FFF;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
}
.loading-animation img {
	width: 30%;
	height: auto;	
}
.loading-animation.is-active {
	opacity: 1;
	visibility: visible;
}


/* header */
#header {
	z-index: 8999;
}
#logo {
	position:fixed;
	top: 0;
	width: 100%;
	height: 60px;
	background-color: #FFF;
	z-index: 8998;
	opacity: 0.8;
}
#logo img {
	width: 200px;
	height: auto;
	margin: 10px 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;
    bottom: 20px;
    right: 20px;
	z-index: 8997;
}
#btn_Onlinestore a {
    display: block;
	color: transparent;
	background-image: url("../images/onlinestore_icon.gif");
	background-repeat: no-repeat;
	background-size: 70px;
	width: 70px;
	height: 70px;
}
#btn_Onlinestore a:hover {
	background-image: url("../images/onlinestore_icon_on.gif")
}


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


/* NEWS */
#news_latest {
	margin: 0 auto;
	width: 100%;
}
.newslist {
  text-align: left;
}
.attention_icon:before {
	content: '';
	display: inline-block;
	width: 30px;
	height: 30px;
	background-image: url("../images/attention.gif");
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
	margin: 0 8px 0 0;
}
#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;
	border: 2px solid #999999;
}
#newslist_TOP ul li img:hover {
	border: 2px solid #FFF;
}
#newslist_TOP time,
.newslist time {
	font-weight: bold;
}
.newslist img {
	width: 400px;
	height: auto;
	border: 2px solid #999999;
}
#news_archive select {
	width: 90%;
}
.newslist h5 {
	font-size: 1rem;
	margin-bottom: 1rem;
}
.newslist dd {
	margin-bottom: 2rem;
}



/* BRAND */
#brand h3 {
	font-size: 15px;
	font-weight: bold;
}
#brand figure img {
	width: 100%;
}
#brand p {
	text-align: center;
}


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


/* ONLINE STORE */
#onlinestore #storetext {
	text-align: center;
}
#onlinestore ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 0 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;
}
.storename {
	text-align: left;
	line-height: 1.5em;
}
#onlinestore figure {
	margin-bottom: 10px;
}
#onlinestore figure img {
	width: 100%;
	height: auto;
}
#onlinestore #storelist{
	border-bottom: 3px solid #727171;
	padding-bottom: 30px;
}
#onlinestore #business_person h3 {
	margin-top: 20px;
}
#onlinestore #business_person ul li {
	margin-bottom: 0;
}


/* footer */
#sns #followme img {
	width: 150px;
	height: auto;
}
#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_nav li {
	margin: 0 30px 0 0;
	display: inline-block;
}
#footer_nav li:last-child{
	margin-right: 0;
}
#footer_nav li a {
	font-size: 18px;
	font-weight: bold;
}
#footer_otherbrand {
	border-top: solid 3px #888888;
	border-bottom: solid 3px #888888;
	padding: 0 0 18px 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 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 48%;
	margin: auto;
}
#attention ul li {
	margin: 0 0 2% 0;
	width: 280px;
	height: auto;
	display: inline-block;
}
#attention figure img {
	width: 100%;
}
#PageTop {
	position: fixed;
	bottom:100px;
	right: 27px;
}
#PageTop a {
	display: block;
	color: transparent;
	background-image: url(../images/pagetop.gif);
	background-repeat: no-repeat;
	background-size: 60px;
	width: 60px;
	height: 60px;
}
#PageTop a:hover {
	background-image: url(../images/pagetop_on.gif);	
}	


/* COLLECTION */
#collection_list figure {
	margin: 0rem 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 */
#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,
	#collection_list,
	#confirmation_form,
	#completion,
	#contact_form,
	#faqlist,
	#privacypolicy section,
	#userpolicy section,
	#copyright section,
	#boi section {
		width: 93%;
	}
	#news_latest h2,
	#brand h2,
	#item h2,
	#onlinestore h2,
	#sns h2,
	footer h2{
		top: -38px;
		font-size: 1.3em;
	}
	
	
	/* TOPページ読み込み_SP */
	.loading-animation img {
		width: 60%;
	}
	
	
	/* header_SP */
	#btn_Onlinestore {
		bottom: 5px;
		right: 5px;
	}
	
	
	/* NEWS_SP */
	#newslist_TOP ul {
		width: 100%;
	}
	#newslist_TOP ul li {
		width: 30%;
	}
	.newslist figure {
		text-align: center;
	}
	.newslist img {
	width: 330px;
	}

	
	/* BRAND_SP */
	#brand .brandtext p {
		text-align: left;
	}
	
	
	/* ITEM_SP */
	#item .instagram_ALTROSE ul {
		width: 100%;
	}

	
	/* ONLINE STORE_SP */
	#onlinestore ul li {
		width: 48%;
		margin: 0 auto;
	}
	#onlinestore figure {
		margin-bottom: 0.5em
	}
	#onlinestore #storetext {
		text-align: left;
	}

	
	/* footer_SP */
	#sns #footer_sns {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#sns #footer_sns li {
		margin: 0 0 2% 0;
		width: 230px;
		display: block;
	}
	#footer_nav {
		text-align: left;
		margin-bottom: 40px;
	}
	#footer_nav li {
		margin: 0 auto;
		display: block;
	}
	#footer_nav li a {
		padding: 10px 0 10px 10px;
		display: block;
		border-top: solid 1px #888888;
	}
	#footer_nav li a:hover {
		background-color: #E5E5E5;
	}
	#footer_nav li:last-child {
		border-bottom: solid 1px #888888;
	}
	#footer_otherbrand li {
		margin-right: 0;
	}
	#attention ul {
		width: 85%;
	}
	#PageTop {
		bottom: 85px;
		right: 10px;
	}

	
	/* COLLECTION_SP */
	#collection section figure img {
		width: 90%;
	}
	
	
	/* CONTACT_SP */
	#confirmation #confirmation_formWrap,
	#confirmation #confirmation_submit{
		width: 100%;
	}
	#confirmation table.formTable{
		width: 95%;
	}
	
}