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

/* 共通設定 */
#FadeGallery,
#brand_TOP,
#onlinestore_TOP,
#sns_TOP {
	border-bottom: 3px solid #064A79;
}
#news_latest,
#brand,
#onlinestore {
	padding: 20px 0 40px 0;
}
#sns {
	padding: 20px 0 70px 0;
}
#news,
#collection,
#contact,
#faq,
#copyright-boi,
#privacypolicy-userpolicy {
	padding-top: 90px;
}
#newslist_TOP,
#brand section,
#onlinestore section,
#footer_nav,
#footer_otherbrand,
#attention,
#news_article,
#collection_list,
#faq section,
#contact section,
#confirmation section,
#privacypolicy section,
#userpolicy section,
#copyright section,
#boi section {
	margin: 0 auto;
	width: 90%;
}
#contact section,
#faqlist,
#privacypolicy section,
#userpolicy section,
#copyright section,
#boi section {
	text-align: left;
}
#privacypolicy section p,
#copyright section p {
	margin-bottom: 40px;
}
#news_latest h2,
#brand h2,
#onlinestore h2,
#sns h2,
footer h2,
#collection h2,
#contact h2,
#news h2,
#faq h2,
#privacypolicy h2,
#userpolicy h2,
#copyright h2,
#boi h2 {
	width: 100%;
}
#news_latest h2 img,
#brand h2 img,
#onlinestore h2 img,
#sns h2 img,
footer h2 img,
#collection h2 img,
#news h2 img,
#contact h2 img,
#faq h2 img,
#privacypolicy h2 img,
#userpolicy h2 img,
#copyright h2 img,
#boi h2 img {
	width: auto;
	height: 30px;
}
#brand h3 {
	font-family: europa, sans-serif;
	font-weight: 400;
	font-style: normal;
}
#news h3,
#collection h3,
#contact h3,
#faq h3 {
	font-size: 1.5rem;
	letter-spacing: 4px;
}
#news h3:after,
.newslist:after,
#storelist:after,
#collection_list li:after, 
#contact_attention:after,
#faq section dl:before,
#privacypolicy section:after,
#copyright section:after {
	background: radial-gradient(circle farthest-side, #064A79, #064A79 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/viewmore.gif");
	background-repeat: no-repeat;
	background-size: 150px 26px;
	width: 150px;
	height: 26px;
	color: transparent;
	margin: 0 auto;
}
.viewmore a:hover {
	opacity: 0.8;
}
#news_TOP,
#brand_TOP,
#onlinestore_TOP,
#sns_TOP {
	display: block;
	height: 70px;
}
.newslist_TOP,
.collection_TOP,
#copyright_TOP,
#boi_TOP,
#privacypolicy_TOP,
#userpolicy_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: #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: 70px;
	background-color: #F2EBE5;
	border-bottom: 3px solid #064A79;
	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;
	top: 0;
	right: 20px;
	z-index: 9998;
}
#btn_Onlinestore a {
	display: block;
	color: transparent;
	background-image: url("../images/onlinestore_icon.gif");
	background-repeat: no-repeat;
	background-size: 58px 69px;
	width: 58px;
	height: 69px;
}
#btn_Onlinestore a:hover {
	background-image: url("../images/onlinestore_icon_on.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: 95%;
	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: 90%;
	margin: auto;
}
#newslist_TOP ul li {
	margin: 0 0 5% 0;
	width: 26%;
	height: auto;
	display: inline-block;
	vertical-align: top;
	position: relative;
	background-color: #FFF;
	padding: 15px 15px 0 15px;
}
#newslist_TOP ul li:before {
	content: '';
	display: inline-block;
	width: 35px;
	height: 35px;
	background-image: url("../images/news_imageclip.gif");
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	margin: auto;
}
#newslist_TOP figure {
	margin-bottom: 1em;
} 
#newslist_TOP ul:after {
	content:'';
	width: 26%;
}
.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;
  border: 2px solid #813C00;
}
.newslist h5 {
	margin-bottom: 1rem;
	font-weight: bold;
}
.newslist dd {
	margin-bottom: 2rem;
}



/* BRAND */
.brandimage img {
	width: 100%;
}
.brandtext h3 {
	font-size: 20px;
}
.brandtext p {
	text-align: left;
	line-height: 2.5em;
}



/* ONLINE STORE */
#onlinestore ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: auto;
}
#onlinestore ul:after {
	content: '';
	width: 30%;
}
#storelist ul li,
#business_person ul li {
	margin: 0 0 2% 0;
	width: 30%;
	height: auto;
	display: inline-block;
	vertical-align: top;
}
#storelist ul li .storename,
#business_person ul li .storename {
	line-height: 1.5em;
}
#storelist figure,
#business_person fugure {
	margin-bottom: 10px;
}
#storelist figure img,
#business_person figure img {
	width: 100%;
	height: auto;
}
#business_person h3 {
	margin-top: 20px;
	font-weight: bold;
}
.storename {
	text-align: left;
}



/* footer */
#footer_sns {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: auto;
	width: 60%;
}
#footer_sns li {
	width: 60px;
	height: auto;
	display: inline-block;
	vertical-align: top;
}
#footer_sns figure img {
	width: 100%;
	height: auto;
}
footer {
	padding: 40px 0 70px 0;
	background-color: #CEB49E;
	color: #54565A;
}
footer a {
	color: #54565A;
}
footer a:hover {
	color: #383A3E;
}
#footer_nav,
#footer_otherbrand {
	padding: 30px 0 40px 0;
	border-bottom: 3px solid #813C00;
}
.footer_nav_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: auto;
}
#footer_nav_list_first {
	width: 90%
}
#footer_nav_list_second {
	width: 68%
}
.footer_nav_list li {
	height: auto;
	display: inline-block;
}
#footer_nav_list_first li {
	width: 23%;
}
#footer_nav_list_second li {
	width: 29%;
}
.footer_nav_list li figure {
	margin-bottom: 20px;
}
.footer_nav_list li img {
	width: 100%;
}
#footer_otherbrand_list {
	margin: 0 auto;
	width: 80%;
}
#footer_otherbrand_list li {
	margin: 0 30px 0 0;
	width: 250px;
	height: auto;
	display: inline-block;
}
#footer_otherbrand_list li:last-child {
	margin-right: 0;
}
#footer_otherbrand_list li img {
	width: 100%
}
#attention {
	padding: 30px 0 30px 0;
}
#attention ul li {
	margin-bottom: 1em;
	font-weight: bold;
}
#PageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
#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: 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: #813C00;
  color: #FFF;
  font-size: 14px;
  font-weight: bold;
  border: none;
  width: 120px;
  height: 40px;
  margin: 0 10px 0 10px;
}
.submit-reset input:hover {
	color: #813C00;
	background-color: #CEB49E;
}
#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: #CEB49E;
	color: #4E2400;
	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;
	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 */



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



/*スマートフォン用*/
@media only screen and (max-width:749px) {
	/* 共通事項_SP */
	#newslist_TOP,
	#news section,
	#brand section,
	#onlinestore section,
	#footer_nav,
	#footer_otherbrand,
	#attention,
	#news_article,
	#collection_list,
	#contact section,
	#confirmation section,
	#faq section,
	#privacypolicy section,
	#userpolicy section,
	#copyright section,
	#boi section {
		width: 95%;
	}
	
	
	
	/* TOPページ読み込み_SP */
	.loading-animation img {
		width: 60%;
	}
	
	
	
	/* header_SP */
	#btn_Onlinestore {
		right: 10px;
	}
	
	
	/* スライドギャラリー_SP */
	#fade {
		margin-bottom: 67%;
	}
	
	
	
	/* NEWS_SP */
	#news section {
		margin: 0 auto;
	}
	#newslist_TOP ul {
		width: 100%;
	}
	#newslist_TOP ul li {
		margin: 0 0 8% 0;
		width: 40%;
		padding: 10px 10px 0 10px;
	}
	#newslist_TOP ul li:before {
		width: 30px;
		height: 30px;
		top: -15px;
	}
	#newslist_TOP ul:after {
		width: 40%;
		padding: 10px 10px 0 10px;
	}
	.newslist figure {
		text-align: center;
	}
	.newslist img {
		width: 330px;
	}
	
	
	
	/* BRAND_SP */
	#brand figure{
		background-size: 93%;
	}
	#brand img {
		width: 90%;
		margin: 10px;
	}
	
	
	
	/* 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 */
	footer {
		padding-top: 20px;
	}
	.footer_nav_list {
		display: block;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
	#footer_nav_list_first {
		width: 95%
	}
	#footer_nav_list_second {
		width: 95%
	}
	.footer_nav_list li {
		display: block;
		margin: 0 auto;
	}
	#footer_nav_list_first li {
		width: 40%
	}
	#footer_nav_list_second li {
		width: 40%
	}
	#footer_otherbrand_list {
		width: 95%;
	}
	#footer_otherbrand_list li {
		margin-right: 0;
		width: 270px;
	}
	
	
	
	/* COLLECTION_SP */
	#collection_list img {
		width: 90%;
	}
	
	
	
	/* CONTACT_SP */
	#confirmation #confirmation_formWrap,
	#confirmation #confirmation_submit{
		width: 100%;
	}
	#confirmation table.formTable{
		width: 95%;
	}
	
	
	
	/* BOI・COPYRIGHT・ATTENTION_SP */

	
}