@charset "Shift_JIS";

/***********************************
Scandinavian Craftsmen 
************************************/
.fadeIn{
animation-duration:1.5s;
animation-timing-function: ease-out;
}

.fadeUp {
animation-timing-function: ease-out;
animation-duration:.7s;}

.vintage2023 h1, .vintage2023 h2, .vintage2023 h3, .vintage2023 h4, .vintage2023 h5, .vintage2023 h6, 
.mod_menu, .designerWrap .maker, .artistList li, .eventList li {
font-family: adobe-garamond-pro, ten-mincho-text, serif; 
font-weight: normal;
font-variant-numeric: oldstyle-nums;
-webkit-font-smoothing: antialiased;
letter-spacing: 2px;
}
.vintage2023 a {text-decoration: none; color: #000;}
.vintage2023 a:hover {text-decoration: none;  color: #006934;}



.mod_title, .mod_title a {font-size: 18px; color: #006934; text-align: center; text-decoration: none; line-height: 1;}
.mod_title a:hover {color:#009B4C;}

.vintage2023 .button { margin: 20px auto;}
.vintage2023 .button:hover {border-color: #006934;}
.vintage2023 .vintage_navi {width:90%; margin: 60px auto;}
.vintage2023 .vintage_navi h6 {color: #006934; line-height: 1;}
.vintage2023 .mod_menu a {text-decoration: none;}
.vintage2023 .mod_menu a:hover { color: #006934;}
.features_content_area {width:100%;}
.features_wrapper .section {margin-bottom: 100px;}
.section h3, .section h4 {margin-bottom: 1em; text-align: center;}
.vintage2023 .bodytxt {margin: 0 auto 2em;}
.vintage2023 .bodytxt a { text-decoration: underline;}
.vintage2023 .bodytxt a:hover { text-decoration: none;}

.vintage2023 .caption {margin-top: 20px; font-size: 11px;}
.vintage2023 .notes {margin-top: 10px; color: #888;}
.bnr_fair {width:90%; margin: 30px auto 0; }

.tit_divider:before {content: '';
    display: block;
				margin:0 auto 24px;
				width:6px;
				height:1px; 
				background-color: #777;}
				
.tit_divider {}				


@media screen and (max-width: 768px) {
.section h3 {font-size: 22px; }
.section h4 {font-size: 18px;}
.vintage2023 .vintage_navi h6 {margin-bottom: 10px; font-size: 19px; }
.footer_info {margin-top: 80px;}
}


@media screen and (min-width: 769px) {
.w700 {width:100%; max-width: 700px; margin-right: auto; margin-left: auto;}
.w940 {width:100%; max-width: 940px; margin-right: auto; margin-left: auto;}
.w1020 {width:100%; max-width: 1020px; margin-right: auto; margin-left: auto;}

.vintage2023 .features_content_area { width:100%; max-width: 1180px; margin: 30px auto 0;}
				
.bnr_fair {width:330px; margin: 30px auto 0; }
.mod_title {font-size: 18px;}
.vintage2023 .vintage_navi {width:100%; max-width: 1020px; 
margin: 80px auto ; padding: 20px 25px; 
border: 1px solid #ddd;
letter-spacing: 1.4px;}

.vintage2023 .vintage_navi h6 {margin-bottom: 12px; font-size: 18px; text-align: left; }
.vintage2023 .mod_menu a {padding: 0.3em 0.3em 0 0; text-decoration: none; color: #000;}
.vintage2023 .vintage_navi ul {text-align: left;}
.vintage2023 .vintage_navi li {margin: 0 60px 0 0; font-size: 16px; line-height: 1;}
.vintage2023 .vintage_navi li:before {
    padding: 0 6px 0 0;
				font-family: FontAwesome;
    font-size: 12px;
				content: "\f105";
    color: #000;}
.vintage2023 .vintage_navi li:hover:before {
 color: #006934;
} 

.vintage2023 .section { margin-bottom:160px;}
.vintage2023 .bodytxt {width:100%; max-width:700px; }
.features_wrapper .button {width:100%; max-width: 540px; margin: 30px auto;}
.footer_info {margin-top: 100px; text-align: center;}
}



/***********************************
index
************************************/

#index .ttl_area {margin-top: 20px;}
#index .ttl_area h2 {
font-size: 28px;
color: #006934; line-height: 1.2; text-align: center;}
#index .ttl_area h2 span { display: block;
    margin-top: 5px;
    font-size: 49%;}
				
.ttl_area .bodytxt {margin-bottom: 10px}
.btn_read_more {width:80%; padding: 5px; 
margin: 20px auto ; border: 1px solid #ddd; 
text-align: center; 
}				
#index .category_scene {margin-bottom: 30px;}	
.vintage2023 .artistList li { text-align: center;}
.vintage2023 .artistList .genre {margin-top: 0.6em; 
font-style: italic; line-height: 1; letter-spacing: 1px;}
.vintage2023 .artistList .name {margin-top: 1.2em; 
letter-spacing: 1.3px; line-height: 1.3;}
.eventName {margin-top: 1em; line-height: 1.3; letter-spacing: 1.5px;}
.eventName span {display: block; font-size: 80%;}



@media screen and (max-width: 768px) {
#modern #interview {margin-top: 40px;}

.vintage2023 .artistList {justify-content: flex-start;}
.vintage2023 .artistList li {width:22%; margin: 0 4% 0 0;} 
.vintage2023 .artistList li:nth-of-type(4n) {margin-right: 0;}
.vintage2023 .artistList li:nth-of-type(n+5) {margin-top: 20px;}
.vintage2023 .artistList .name {font-size: 12px;}
.vintage2023 .artistList .genre {font-size: 10px; }
#modern .video {margin-top: 50px;}

.vintage2023 .eventList {width:100%; justify-content: center;}
.vintage2023 .eventList li {width:100%; margin-top: 30px; padding: 0 10%; }
.vintage2023 .eventList li:first-of-type {margin-top: 0;} 
}


@media screen and (min-width: 769px) {

#index_anchor {margin: 60px auto;}
#index_anchor ul {display: flex; justify-content: center;}
#index_anchor li {margin:0 30px 0; letter-spacing: 1.5px;}
#index_anchor li:before {padding: 0 8px 0 0;}

#index .ttl_area {max-width: 1020px; margin: 0 auto;}
#index .ttl_area h2 { padding: 60px 0 50px;
    font-size: 38px; letter-spacing: 2.5px;
}
#index .ttl_area h2 span { letter-spacing: 2px;}
#index .section {}
#index .section h3 {font-size: 28px; letter-spacing: 2.5px; text-align: center;}
#index #modern h4 {margin: 2.5em auto 1em; font-size: 20px;}
.vintage2023 .artistList {justify-content: center;}

.vintage2023 .artistList li {width:19%; margin: 0 3%;}
.vintage2023 .artistList li:nth-of-type(n+5) {margin-top: 30px;}
.vintage2023 .artistList .name {}
.vintage2023 .artistList .genre {}
#modern .video {margin-top: 80px;}
.vintage2023 .eventList {width:100%; justify-content: flex-start;}
.vintage2023 .eventList li {width:30%; margin-right: 5%; margin-bottom: 40px; padding:0;}
.vintage2023 .eventList li:nth-of-type(3n) {margin-right: 0;}
}






/***********************************
Scandinavian Vintage Design
************************************/

#vintage_design .ttl_area h2 { /*margin: 16px 0 36px;*/
font-size:28px ; letter-spacing: 2.0px; line-height: 1.2; text-align: center;}


#vintage_design .ttl_area .bodytxt {margin-bottom: 1.5em;}
#vintage_design .ttl_area .notes {margin: 40px 0;}

.designerWrap h3 {margin-bottom: 1.5em;
font-size: 24px; line-height: 1; text-align: center;}
.designerWrap .itemName span {display: block; margin-top: 0.2em;
font-size: 80%; font-style: italic; letter-spacing: 1px;
line-height: 1.3;}
.designerWrap .itemName .maker { margin-top: 0.6em; font-size: 70%;}
.designerWrap .profWrap {margin: 40px auto 0; }
.profWrap .profName  {margin-bottom: 0.8em; font-size: 15px; line-height: 1.2; text-align: center;}
.profWrap .profName .kana {display: block; margin-top: 0.2em; font-size: 75%;}
.profWrap .profTxt p {font-size: 12px; line-height: 1.7;}


@media screen and (max-width: 768px) {
#vintage_design .ttl_area .mod_title {margin-top: 40px;}
#vintage_design .ttl_area .description {margin-top: 20px;}
.designerWrap {width: 90%; margin: 120px auto;}
.designerWrap h3 {font-size: 22px; text-align: center;}
.designerWrap .itemName {margin: 30px auto; font-size: 20px; text-align: center;}
.designerWrap .profWrap {width:90%; }
.designerWrap .profImg {padding:0 20% 20px;}
}


@media screen and (min-width: 769px) {

#vintage_design .ttl_area {display: flex; justify-content: space-between; 
flex-direction: row-reverse;
width: 100%; max-width: 1020px;}
#vintage_design .ttl_area .visual {width:61.7%;}
#vintage_design .ttl_area .description {width:32.3%;}
#vintage_design .ttl_area .mod_title {text-align: left;}
#vintage_design .ttl_area h2 { margin: 20px 0 30px;
font-size:36px ; letter-spacing: 2.5px; line-height: 1.2; text-align: left;}

.designerWrap {width: 100%;  max-width: 1020px; margin: 120px auto;}
.designerWrap h3 {margin-bottom: 36px;
font-size: 28px;}

.designerWrap .s_img {display: flex; justify-content: space-between;}
.designerWrap .s_img .itemImg {width:58.8%;}
.designerWrap .s_img .description {width:37.2%;}
.designerWrap .itemName {margin: 0 0 1.8em; font-size: 22px; text-align: left;}

.designerWrap .designer {}
.designerWrap .age {}

.profWrap {width:100%; display: flex; justify-content: space-between;}
.profWrap .profImg {width:17.6%; margin: 0;}
.profWrap .profTxt {width:79.4%; margin: 0; font-size: 11px; line-height: 1.6;}
.profWrap .profName {text-align: left;}

}



/***********************************
Crafted Modern - Artist Interview -
************************************/
#interview .button {margin: 30px auto;}

.interview_tit {width:90%; margin: 20px auto 40px;}
#interview .mod_title {text-align: center;}
.category_tit {margin-top: 0.7em; font-size: 24px; line-height: 1.2; text-align:center;}
.category_tit span {display: block; margin: 0.3em 0 0; font-size: 80%;}
.interview_tit .artist_tit {margin:40px auto 1em; font-size: 26px; line-height: 1.3; letter-spacing: 2px; text-align:center;}
.interview_tit .artist_tit span {display: block; margin-top: 0.3em; font-size: 50%;}
.interview_tit .artist_tit .genre {margin-top: 1em; font-style: italic; letter-spacing: 0.12em;}
.interview_tit .leadtxt { margin: 0 auto 40px; text-align: left; }

#interviewWrap {width:100%; margin-bottom: 60px;}
.textWrap {width:90%; margin: 40px auto;}
.textWrap .question:nth-of-type(n+2) {margin-top: 2.4em;}
.caption {margin-top: 20px; font-size: 11px;}
.notes {margin-top: 10px; color: #888;}

.section .scene:nth-of-type(n+2) {margin-top: 10px;}
#interview .profWrap .profImg {width:50%; margin: 0 auto 20px; }
#interview .profWrap .profTxt {width:100%; margin: 0 auto;}
#interview .profName {margin-bottom: 12px; font-size: 17px; line-height: 1.2;}
#interview .profName span {display: block; margin-top: 0.2em; font-size: 65%;}

/*.profileWrap {width:90%; margin: 40px auto; padding: 30px 0;}
.profName p {font-size: 12px;}*/

#interview .profWrap {margin: 30px auto 80px; padding: 30px 0; 
border-top: 1px dotted #ddd; border-bottom: 1px dotted #ddd;}

@media screen and (min-width: 769px) {
#interview .features_content_area {width:100%; max-width:700px; margin: 0 auto;}


.interview_tit {width:100%; max-width: 700px; margin: 0 auto 60px;}
#interviewWrap {width:100%; max-width: 700px; margin: 0 auto;}
.vintage2023 .artist_tit {margin: 40px auto;
font-size: 28px; line-height: 1.3; letter-spacing: 3px;}
.interview_tit .leadtxt { width:100%; max-width: 700px; 
margin: 0 auto 40px;}
.textWrap {width:100%;  margin: 60px auto;}
.textWrap .question:nth-of-type(n+2) {margin-top: 3em;}
#interview .profWrap {width:100%; max-width: 700px; padding: 30px 0;}
#interview .profWrap .profImg {width:20.6%; margin: 0;}
#interview .profWrap .profTxt {width:76.4%; margin: 0;}

}