@charset "UTF-8";

/* --------------------------------------------------
 normalize
--------------------------------------------------- */
button,hr,input{overflow:visible;padding:0;}progress,sub,sup{vertical-align:baseline;}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0;}html{line-height:1;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{margin:.67em 0;font-size:2em;}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-size:1em;font-family:monospace,monospace;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-size:100%;font-family:inherit;line-height:1;}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none;}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{display:table;max-width:100%;color:inherit;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px-webkit-appearance:textfield;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;}summary{display:list-item}[hidden],template{display:none}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;font-weight:normal;}ul{margin:0;padding:0;}ul li{margin:0;padding:0;list-style:none;}ol{margin:0;padding:0;}ol li{margin:0;padding:0;list-style:none;}
main,figure,figcaption,time,address,dl,dt,dd{display: block;margin:0;padding:0;}h1,h2,h3,h4,h5{margin:0;font-size:100%;}p{margin:0; padding:0;}address{font-style: normal;}*,*:after,*:before{outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-ms-overflow-style: none;}h1,h2,h3,h4{font-weight:normal;}mark{background: none;}html{box-sizing:border-box;}*,*:before,*:after{box-sizing:border-box;}

/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ width: 100%; font-size: 62.5%;}
body{
    width: 100%;
    background: #fff;
    color: #000;
    letter-spacing: .1rem;
    font-size: 1.4rem;
    font-family: acumin-pro, ryo-gothic-plusn, sans-serif;
    /*font-family: 'Lato', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'BIZ UDPGothic', Meiryo, sans-serif;*/
    line-height: 1;

    -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; vertical-align: bottom;}
.alignright img{ display: block; margin: 0 0 0 auto;}
.alignleft img{ display: block; margin: 0 auto 0 0;}
.aligncenter img{ display: block; margin: 0 auto;}
.center{ text-align: center;}
strong{ font-weight: bold;}

a{ color: #000; text-decoration: none; transition: all .2s ease;}
a:hover{ color: #9fa0a0; text-decoration: none;}
a:hover img{ opacity: .85;}
.sp{ display: none;}

@media screen and (max-width: 1024px){
    body{ letter-spacing: .075rem; font-size: 1.2rem;}
    .pc{ display: none;}
    .sp{ display: block;}
}

#wrap{ position: relative; overflow: hidden;}

@media screen and (max-width: 1024px){
}

/*.head-bn{ overflow: hidden; height: 85px;}*/
.banner{ height: 85px; text-align: center;}
.banner a{ display: flex; width: 100%; height: 100%; justify-content: center; align-items: center;}
.banner img{ width: auto; height: 100%;}
.popup{ position: fixed; right: 50px; bottom: 50px; z-index: 9999; visibility: hidden; width: 300px; height: 300px; opacity: 0; transition: all .2s ease;}
.popup.is-show{ visibility: visible; opacity: 1;}
.popup-inner{ position: absolute; top: 50%; left: 50%; z-index: 2; width: 100%; transform: translate(-50%,-50%);}
.popup-inner a{ display: block; background: #000;}
.popup-inner img{ width: 100%;}
.close-btn{ position: absolute; top: 0; right: 0; z-index: 10; width: 25px; height: 25px; background: #000; color: #fff; cursor: pointer;}
.fbnr .close-btn{ top: -25px;}
.close-btn:before,
.close-btn:after{ position: absolute; top: 50%; right: 3px; width: 18px; height: 1px; background: #fff; content: ""; transform: translate(0,-50%) rotate(45deg);}
.close-btn:after{ transform: translate(0,-50%) rotate(-45deg);}
.fbnr{ position: fixed; bottom: 0; left: 0; z-index: 9999; visibility: hidden; width: 100%; height: 100px; text-align: center; opacity: 0; transition: all .2s ease;}
.fbnr.is-show{ visibility: visible; opacity: 1;}
.fbnr a{ display: flex; width: 100%; height: 100%; justify-content: center; align-items: center;}
.fbnr img{ width: auto; height: 100%;}

@media screen and (max-width: 1024px){
    /*.head-bn-sp{ overflow: hidden; height: 17.333vw;}*/
    .banner{ height: 17.333vw;}
    .banner a{ display: block;}
    .banner img{ width: 100%; height: auto;}
    .popup{ right: 0; bottom: 0; width: 50%; height: auto;}
    .popup-inner{ top: auto; bottom: 0; left: 0; padding: 0 20px 20px 0; transform: none;}
    .close-btn{ right: 20px; width: 30px; height: 30px;}
    .fbnr .close-btn{ top: -30px; right: 0;}
    .close-btn:before,
    .close-btn:after{ right: 5px;}
    .fbnr{ height: 14.66666667vw;}
    .fbnr a{ display: block;}
}

.ani { opacity: 0; transform: translateY(30px);}
.fadein1 { animation: fadein1 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;}

@keyframes fadein1 {
    0% { opacity: 0; transform: translateY(30px);}
    80% { opacity: 1;}
    100% { opacity: 1; transform: translateY(0);}
}
/*
.fadein1 {
    animation-name: fadein1;
    animation-duration: 1s;

    animation-fill-mode: forwards;
}
@keyframes fadein1 {
    0% { opacity: 0; transform: translateY(8px);}
    100% { opacity: 1; transform: translateY(0);}
}
*/

.ani2 { opacity: 0; animation: 2s fadein2 1s forwards;}
@keyframes fadein2 {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

/* */
/*body.open_popup { overflow: hidden;}*/
.bg_onetime_popup { position: fixed; top: 0px; left: 0px; z-index: 9999; visibility: hidden; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: 0.5s;}
body.open_popup .bg_onetime_popup{ visibility: visible; opacity: 1;}
.onetime_popup { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}
.onetime_popup img{ max-width: none; width: auto; height: 60vh;}
.onetime_popup_close{ position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; cursor: pointer;}
.onetime_popup_close::before,
.onetime_popup_close::after{ position: absolute; top: 50%; left: 50%; width: 100%; height: 2px; background: #fff; content: "";transform: translateX(-50%) translateY(-50%);}
.onetime_popup_close::before { transform: translateX(-50%) translateY(-50%) rotate(45deg);}
.onetime_popup_close::after{ transform: translateX(-50%) translateY(-50%) rotate(-45deg);}
.onetime_popup_content { position: relative;}

@media screen and (max-width: 1024px){
    .onetime_popup img{ max-width: none; width: 75vw; height: auto;}
}


/* --------------------------------------------------
 header
--------------------------------------------------- */
.header{ position: relative; z-index: 999; width: 100%; transition: all .2s ease;}
.header .inner1{ position: relative; display: flex; min-height: 75px; justify-content: center; align-items: center;}
.header .inner1 h1{ position: absolute; top: 0; left: 60px; display: flex; height: 75px; align-items: center;}
.header .inner1 h1 a{ display: inline-block;}
.header .inner1 h1 img{ width: auto; height: 52px; vertical-align: middle;}
.header nav > ul{ display: flex; letter-spacing: .05em; font-size: 1.6rem; align-items: center; justify-content: center;}
.header nav > ul > li{ padding: 0 15px;}
.header nav > ul > li > a{ position: relative; display: block; color: #000; line-height: 75px; cursor: pointer;}
.header nav > ul > li > a:before,
.header nav > ul > li > a:after{ position: absolute; bottom: 22px; display: inline-block; width: 0; height: 1px; background: #000; content: ""; transition: all .25s ease;}
.header nav > ul > li > a:before{ left: 50%;}
.header nav > ul > li > a:after{ right: 50%;}
.header nav > ul > li:hover > a:before,
.header nav > ul > li:hover > a:after{ width: 50%;}
.header .cnav{ position: relative; color: #000; line-height: 75px; cursor: pointer;}
.header .cnav:before,
.header .cnav:after{ position: absolute; bottom: 22px; display: inline-block; width: 0; height: 1px; background: #000; content: ""; transition: all .25s ease;}
.header .nav-pro .cnav{ line-height: 1;}
.header .nav-pro .cnav:before,
.header .nav-pro .cnav:after{ bottom: -9px;}
.header .cnav:before{ left: 50%;}
.header .cnav:after{ right: 50%;}
.header li:hover > .cnav:before,
.header li:hover > .cnav:after{ width: 50%;}

.header .cnav .txt1{ display: flex; visibility: visible; opacity: 1; transition: all .1s ease;}
.header .cnav .txt2{ display: none; visibility: hidden; font-size: 1.3rem; opacity: 0; transition: all 1.s ease;}
.header li:hover > .cnav .txt1{ display: none; visibility: hidden; opacity: 0; transition: all .1s ease;}
.header li:hover > .cnav .txt2{ display: flex; visibility: visible; opacity: 1; transition: all .1s ease;}

.header aside{ position: absolute; top: 0; right: 60px;}
.header aside > ul{ display: flex; height: 75px; font-size: 1.6rem; align-items: center;}
.header aside > ul > li{ padding: 0 0 0 30px; border-right: 1px solid #efefef;}
.header aside > ul > li.nav-pro{ position: initial;}
.header aside > ul > li:first-child{ padding: 0; border-left: 1px solid #efefef;}
.header aside > ul > li > a{ display: flex; align-items: center;}
.header aside > ul > li > a .txt1{ display: flex; visibility: visible; opacity: 1; transition: all .1s ease;}
.header aside > ul > li > a .txt2{ display: none; visibility: hidden; font-size: 1.3rem; opacity: 0; transition: all 1.s ease;}
.header aside > ul > li > a:hover .txt1{ display: none; visibility: hidden; opacity: 0; transition: all .1s ease;}
.header aside > ul > li > a:hover .txt2{ display: flex; visibility: visible; opacity: 1; transition: all .1s ease;}
.header aside i{ display: inline-block; margin: 0 .3em 0 0; width: 15px; vertical-align: middle;}
.header aside i img{ vertical-align: middle;}
.header .switch{ display: none;}
.header.stuck{ position: fixed; top: 0; left: 0; background: #fff;}

@media screen and (max-width: 1880px){
    .header .inner1 h1 img{ height: 45px;}
    .header nav > ul{ font-size: 1.4rem;}
    .header aside > ul{ font-size: 1.4rem;}
    .header aside i{ width: 10px;}
}

@media screen and (max-width: 1690px){
    .header .inner1{ padding: 0 40px 0 0; justify-content: flex-end;}
    .header .inner1 h1{ left: 40px;}
    .header .inner1 h1 img{ height: 45px;}
    .header aside{ position: relative; top: auto; right: auto; padding: 0 0 0 40px;}
}

@media screen and (max-width: 1440px){
    .header .inner1{ padding: 0 30px 0 0;}
    .header .inner1 h1{ left: 30px;}
    .header .inner1 h1 img{ height: 45px;}
    .header nav > ul > li{ padding: 0 15px;}
    .header aside{ padding: 0 0 0 30px;}
    .header aside > ul > li{ padding: 0 0 0 30px;}
    .header aside > ul > li:first-child{ padding: 0;}
}

@media screen and (max-width: 1360px){
    .header .inner1{ padding: 0 30px 0 0;}
    .header .inner1 h1{ left: 30px;}
    .header .inner1 h1 img{ height: 40px;}
    .header nav > ul > li{ padding: 0 10px;}
    .header aside{ padding: 0 0 0 20px;}
    .header aside > ul > li{ padding: 0 0 0 20px;}
    .header aside > ul > li:first-child{ padding: 0;}
}

@media screen and (max-width: 1280px){
    .header .inner1{ padding: 0 20px 0 0;}
    .header .inner1 h1{ left: 20px;}
    .header .inner1 h1 img{ height: 35px;}
    .header nav > ul > li{ padding: 0 10px;}
    .header aside{ padding: 0 0 0 20px;}
    .header aside > ul > li{ padding: 0 0 0 20px;}
    .header aside > ul > li:first-child{ padding: 0;}
}

@media screen and (max-width: 1200px){
    .header .inner1{ padding: 0 20px 0 0;}
    .header .inner1 h1{ left: 20px;}
    .header .inner1 h1 img{ height: 30px;}
    .header nav > ul{ font-size: 1.2rem;}
    .header nav > ul > li{ padding: 0 15px;}
    .header aside{ padding: 0 0 0 30px;}
    .header aside > ul{ font-size: 1.2rem;}
    .header aside > ul > li{ padding: 0 0 0 30px;}
    .header aside > ul > li:first-child{ padding: 0;}
    .header aside i{ width: 10px;}
}

@media screen and (max-width: 1150px){
    .header .inner1{ padding: 0 20px 0 0;}
    .header .inner1 h1{ left: 20px;}
    .header .inner1 h1 img{ height: 30px;}
    .header nav > ul{ font-size: 1.2rem;}
    .header nav > ul > li{ padding: 0 10px;}
    .header aside{ padding: 0 0 0 20px;}
    .header aside > ul{ font-size: 1.2rem;}
    .header aside > ul > li{ padding: 0 0 0 20px;}
    .header aside > ul > li:first-child{ padding: 0;}
    .header aside i{ width: 10px;}
}

@media screen and (max-width: 1024px){
    .header .inner1{ padding: 0 20px; min-height: 65px; justify-content: space-between;}
    .header .inner1 h1{ position: relative; top: auto; left: auto; height: 65px;}
    .header .inner1 h1 img{ height: 30px;}
    .header nav{ display: none;}
    .header aside{ padding: 0 40px 0 0;}
    .header aside > ul{ height: 65px;}
    .header aside > ul > li{ padding: 0; height: auto; border-right: none;}
    .header aside > ul > li:first-child{ display: none;}
    .header aside > ul > li:last-child{ display: none;}
    .header .switch{ position: absolute; top: 0; right: 0; z-index: 99; display: block;}
}

.subnavi1,
.subnavi2,
.subnavi1 a,
.subnavi2 a{ color: #646464;}
.subnavi1 a:hover,
.subnavi2 a:hover{ color: #000;}

.subnavi1{ position: absolute; top: 74px; left: 0; z-index: 100; visibility: hidden; width: 100%; border-top: 1px solid #efefef; border-bottom: 1px solid #efefef; background: #fff; font-size: 1.5rem;line-height: 1.5; opacity: 0; transition: all .2s ease; }
.nav-pro .subnavi1{ right: 0; left: auto; width: 100vw;}
li:hover > a + .subnavi1,
li > a:hover + .subnavi1{ z-index: 102; visibility: visible; opacity: 1;}
.subnavi1s.active{ z-index: 101; visibility: visible; opacity: 1;}
.subnavi1 > ul{ display: flex; height: 50px; justify-content: center; align-items: center;}
.subnavi1 > ul > li{ padding: 0 20px;}
.nav-member .subnavi1 > ul > li{ position: relative;}
.subnavi1 > ul > li > a{ display: flex; height: 50px; text-align: center; align-items: center;}
.subnavi1 > ul > li > a small{ display: block; font-size: 1rem;}
.subnavi1 > ul > li > a i{ display: inline-block; margin: 0 0 0 6px; height: 12px; vertical-align: middle; line-height: 1;}
.subnavi1 > ul > li > a i img{ width: auto; height: 100%; vertical-align: baseline;}
.subnavi1 > ul > li > .cnav2{ display: flex; height: 50px; text-align: center; cursor: pointer; align-items: center;}
.subnavi1 > ul > li > .cnav2 small{ display: block; font-size: 1rem;}
.subnavi1 > ul > li > .cnav2 i{ display: inline-block; margin: 0 0 0 6px; height: 12px; vertical-align: middle; line-height: 1;}
.subnavi1 > ul > li > .cnav2 i img{ width: auto; height: 100%; vertical-align: baseline;}
.subnavi2 ul > li > a i{ display: inline-block; margin: 0 0 0 6px; height: 12px; vertical-align: middle; line-height: 1;}
.subnavi2 ul > li > a i img{ width: auto; height: 100%; vertical-align: baseline;}

@media screen and (max-width: 1830px){
    .subnavi1{ font-size: 1.3rem;}
}

@media screen and (max-width: 1230px){
    .subnavi1{ font-size: 1.1rem;}
}

.dnav1 i{ display: inline-block; margin: 0 0 0 6px; height: 12px; vertical-align: middle; line-height: 1;}
.dnav1 i img{ width: auto; height: 100%; vertical-align: baseline;}
.dnav2{ display: flex; height: 50px; cursor: pointer; justify-content: center; align-items: center;}
.dnav3{ position: absolute; top: 50px; left: 50%; z-index: 102; visibility: hidden; border: 1px solid #efefef; border-top: none; opacity: 0; transform: translate(-50%,0);}
.dnav1:hover .dnav3,
.dnav1:active .dnav3{ visibility: visible; opacity: 1;}
.dnav3 ul > li{ border-top: 1px solid #efefef;}
.dnav3 a{ display: block; padding: 10px 20px; background: #fff; text-align: center; white-space: nowrap; cursor: pointer;}

.subnavi2{ position: absolute; top: 49px; left: 0; z-index: 102; visibility: hidden; padding: 10px 0; width: 100%; border-top: 1px solid #efefef; border-bottom: 1px solid #efefef; background: #fff; opacity: 0; transition: all .2s ease;}
.subnavi1 > ul > li:hover > a + .subnavi2,
.subnavi1 > ul > li > a:hover + .subnavi2{ z-index: 103; visibility: visible; opacity: 1;}
.subnavi2s.active{ z-index: 103; visibility: visible; opacity: 1;}

.subnavi2 .inner-s1{ margin: 0 auto; padding: 10px 0; width: 1100px;}
.subnavi2 .inner-s1 ul{ display: flex; font-size: 1.2rem; flex-wrap: wrap;}
.subnavi2 .inner-s1 ul > li{ padding: 0; width: calc(100% / 6);}
.subnavi2 .inner-s1 ul > li > a{ position: relative; display: block; padding: 10px 0 10px 12px;}
.subnavi2 .inner-s1 ul > li > a:after{ position: absolute; top: 15px; left: 0; border-width: 4px 0 4px 6px; border-style: solid; border-color: transparent transparent transparent #4c4948; content: "";}

.subnavi2 .inner-s2{ display: flex; margin: 0 auto; padding: 10px 0; width: 1100px; flex-wrap: wrap; justify-content: center;}
.subnavi2 .inner-s2 > div{ width: 25%;}
.subnavi2 .inner-s2 > div.wide{ width: 50%;}
.subnavi2 .inner-s2 > div.wide2{ width: 75%;}
.subnavi2 .inner-s2 ul{ font-size: 1.2rem;}
.subnavi2 .inner-s2 ul > li{ padding: 10px 0 0;}
.subnavi2 .inner-s2 ul > li > a{ position: relative; display: block; padding: 0 0 0 12px;}
.subnavi2 .inner-s2 ul > li > a:after{ position: absolute; top: 5px; left: 0; border-width: 4px 0 4px 6px; border-style: solid; border-color: transparent transparent transparent #4c4948; content: "";}
.subnavi2 .inner-s2 ul.flex{ display: flex; flex-wrap: wrap;}
.subnavi2 .inner-s2 ul.flex > li{ width: 50%;}
.subnavi2 .inner-s2 ul.flex2 > li{ width: 25%;}
.subnavi2 .inner-s2 ul + .ttl{ padding: 40px 0 0;}

.subnavi1 .search{ position: relative;}
.searchbtn{ display: flex; height: 50px; cursor: pointer; align-items: center;}
.searchbtn i{display: inline-block;  margin: 0 0 0 .3em; width: 12px;}
.searchbtn i img{ vertical-align: baseline;}
.searchbox{ position: absolute; top: 50px; left: 50%; z-index: 99; visibility: hidden; padding: 15px 20px; border: 1px solid #efefef; background: #fff; vertical-align: middle; line-height: 1.5; opacity: 0; transition: all .2s ease; transform: translate(-50%,0);}
.searchbox.active{ z-index: 104; visibility: visible; opacity: 1;}
.searchbox form{ display: flex;}
.searchbox input[type="text"]{ padding: 0 9px; width: 215px; height: 30px; border: none; border: 1px solid #646464; background: none; vertical-align: middle;}
.searchbox input::placeholder{ color: #DCDCDC;}
.searchbox button{ width: 30px; height: 30px; border: none; border: 1px solid #646464; background: none; background: #646464; vertical-align: middle;}
.searchbox button img{ width: 15px; vertical-align: middle;}
.searchbox .link{ margin: 5px 0 0; text-align: right; font-size: 1rem;}
.searchbox .link a{ text-decoration: underline;}
.searchbox .link a:hover{ text-decoration: none;}

@media screen and (max-width: 1024px){
    .searchbox{ top: 0; right: 0; left: auto; visibility: visible; padding: 0; border: none; opacity: 1;}
}

/* --------------------------------------------------
 main
--------------------------------------------------- */
main{ padding: 50px 0 120px;}
main.nav0{ padding: 0 0 120px;}
.top main{ padding: 0 0 120px;}

@media screen and (max-width: 1024px){
    main{ padding: 0 0 60px;}
    .top main{ padding: 0 0 60px;}
}

.anchor{ position: relative; z-index: -1;}
.anchor:before{ display: block; margin-top: -125px; width: 100%; height: 125px; content: ""; vertical-align: top;}

@media screen and (max-width: 1024px){
    .anchor:before{ margin-top: -65px; height: 65px;}
}

section{ position: relative; margin: 0 auto; padding: 60px 0; width: 1100px;}
.bg + section{ padding: 120px 0 60px;}
section:after{ display: block; clear: both; content: "";}
.bg{ margin: 60px 0 0; padding: 120px 0; width: 100%; background: #efefef;}
.bg > .inner{ margin: 0 auto; width: 1100px;}
.wintersale2024{ margin: 75px 0 0;}
.wintersale2024 a{ position: relative; display: block;}
.wintersale2024 video{ max-width: none; width: 100%;}
.wintersale2024 .more{ margin: 80px 0 0;}
.wintersale2024 + .bg{ margin: 150px 0 0;}
.move{ position: relative; margin: 0 auto; padding: 60px 0; width: 1100px;}
.move:after{ display: block; clear: both; content: "";}
.none{ padding: 120px 0; text-align: center;}

@media screen and (max-width: 1024px){
    section{ padding: 30px 15px; width: 100%;}
    .bg + section{ padding: 30px 15px;}
    section.center{ text-align: left;}
    .bg{ margin: 30px 0 0; padding: 30px 0;}
    .bg > .inner{ padding: 0 15px; width: 100%;}
    .wintersale2024{ margin: 30px 0 0;}
    .wintersale2024 .more{ margin: 20px 0 0;}
    .wintersale2024 + .bg{ margin: 50px 0 0;}
    .move{ padding: 0 0 30px; width: 100%;}
    .none{ padding: 30px 0;}
}

article{ position: relative; margin: 0 auto; padding: 60px 0 0; width: 1100px;}
article header{ position: relative;}
article header nav{ position: absolute; right: 0; bottom: 0;}
article header nav ul{ display: flex; font-size: 1.2rem;}
article header nav .sns{ font-size: 1.4rem;}
article header nav ul > li{ padding: 0 0 0 20px;}
article header nav a{ display: inline-block;}
article header nav a i{ display: inline-block; margin: 0 15px 0 0; height: 21px;}
article header nav a i img{ width: auto; height: 100%; vertical-align: middle;}
article header.none{ margin: -60px 0 0; padding: 0;}
article header.none h1,
article header.none h2{ overflow: hidden; margin: 0; padding: 0; height: 0; text-indent: 100%; white-space: nowrap;}
article header.none .ttl + .ttl-s{ padding: 0;}

@media screen and (max-width: 1024px){
    article{ padding: 30px 0 0; width: 100%;}
    article header{ padding: 0 15px;}
    article header nav{ position: relative; right: auto; bottom: auto; padding: 15px 0 0;}
    article header nav ul{ font-size: 1rem;}
    article header nav ul > li{ padding: 0 10px 0 0;}
    article header nav a i{ margin: 0 10px 0 0; height: 16px;}
    article header.none{ margin: -30px 0 0;}
}

.news header nav{ position: relative; right: auto; bottom: auto; margin: 60px 0 0; padding: 0 0 15px; border-top: 1px solid #efefef; border-bottom: 1px solid #efefef;}
.news header nav ul{ font-size: 1.3rem; line-height: 2; flex-wrap: wrap;}
.news header nav ul > li{ padding: 15px 15px 0;}
.news header nav ul > li.current-cat a{ border-bottom: 1px solid;}

@media screen and (max-width: 1024px){
    .news header nav{ margin: 30px 0 0; padding: 7px 14px 14px;}
    .news header nav ul{ font-size: 1.2rem; line-height: 1.5;}
    .news header nav ul > li{ padding: 7px 0 0; width: 50%; white-space: nowrap;}
    .news header nav ul > li:first-child{ width: 100%;}
}

.news header .select-wrap{ position: relative; z-index: 1; margin: 60px 0 0; width: 33%; height: 50px; border: 1px solid #DCDCDC; background: #fff;}
.news header .select-wrap:after { position: absolute; top: 50%; right: 1em; z-index: -1; width: 8px; height: 8px; border-right: 2px solid #000; border-bottom: 2px solid #000; content: ''; transform: translate(0,-50%) rotate(45deg);}
.news header .select-wrap select{ padding: 0 1em; width: 100%; height: 100%; border: none; background: none; cursor: pointer; appearance: none;}

@media screen and (max-width: 1024px){
    .news header .select-wrap{ margin: 30px 0 0; width: 100%; height: 40px;}
    .news header .select-wrap:after { width: 6px; height: 6px;}
}


.content a{ text-decoration: underline;}
.content a:hover{ text-decoration: none;}
.content .move a{ text-decoration: none;}

.ttl{ font-size: 1.2rem;}
.ttl i{ display: inline-block; margin: 0 20px 0 0; width: 24px;}
.ttl i img{ vertical-align: baseline;}
.ttl span{ display: inline-block; margin: 0 40px 0 0; font-weight: 400; font-size: 3rem;}
.ttl-s{ font-size: 2.4rem;}
.ttl-s.center{ text-align: center;}
article header .ttl + .ttl-s{ padding: 60px 0 0;}
.ttl-s small{ display: block; font-size: 1.4rem;}
.ttl-s2{ margin: 60px 0 0; font-size: 2rem;}
.ttl-s3{ margin: 60px 0 0; padding: 0 0 0 20px; border-left: 1px solid; font-size: 1.8rem;}
.ttl-event{ margin: 60px 0 0; padding: 0 0 20px; border-bottom: 1px solid #efefef; font-size: 2rem;}

@media screen and (max-width: 1024px){
    .ttl{ font-size: 1rem; line-height: 1.8;}
    .ttl i{ margin: 0 10px 0 0; width: 15px;}
    .ttl span{ margin: 0 15px 0 0; font-size: 2rem; line-height: 1.4;}
    .ttl span.block{ display: block; margin: 0; padding: 0 0 5px;}
    .ttl-s{ font-size: 2rem; line-height: 1.8;}
    article header .ttl + .ttl-s{ padding: 30px 0 0;}
    .ttl-s small{ font-size: 1rem;}
    .ttl-s2{ margin: 30px 0 0; font-size: 1.4rem;}
    .ttl-s3{ margin: 30px 0 0; padding: 0 0 0 10px; font-size: 1.2rem;}
    .ttl-event{ margin: 30px 0 0; padding: 0 0 10px; font-size: 1.4rem;}
}

.head-logo h1{ height: 70px;}
.head-logo h1 img{ height: 100%;}
.head-logo h2{ font-size: 1.2rem;}
.head-logo h2 span{ display: inline-block; margin: 0 40px 0 0; font-weight: 300; font-size: 3rem;}

@media screen and (max-width: 1024px){
    .head-logo h1{ height: 40px;}
    .head-logo h2{ font-size: 1rem;}
    .head-logo h2 span{ margin: 0 15px 0 0; font-size: 2rem;}
}

.ttl2{ line-height: 1.5;}
.ttl2 span{ display: block; margin: 0; padding: 0 0 15px; line-height: 1;}

@media screen and (max-width: 1024px){
    .ttl2 span{ display: inline-block; margin: 0 15px 0 0; padding: 0;}
}

.ttl3{ text-align: center; font-weight: 300; font-size: 4rem;}
.ttl3 span{ display: inline-block; height: 50px;}
.ttl3 span img{ width: auto; height: 100%;}

@media screen and (max-width: 1024px){
    .ttl3{ font-size: 2rem;}
    .ttl3 span{ height: 25px;}
}

.ttl-center{ text-align: center; font-size: 3rem; line-height: 1.5;}
.ttl-center span{ display: block; font-size: 1.4rem;}

@media screen and (max-width: 1024px){
    .ttl-center{ font-size: 2rem;}
    .ttl-center span{ font-size: 1rem;}
}

.row2{ display: flex; margin: -60px -10px 0; padding: 60px 0 0; flex-wrap: wrap;}
.row2 > li{ padding: 60px 10px 0; width: 50%;}
.row2.bnr{ margin: -20px -10px 0;}
.row2.bnr > li{ padding: 20px 10px 0;}
.row2s{ margin: -40px -20px 0; padding: 40px 0 0; flex-wrap: wrap;}
.row2s > li{ padding: 40px 20px 0;}
.row2s2{ margin: -120px -10px 0; padding: 60px 0 0; flex-wrap: wrap;}
.row2s2 > li{ padding: 120px 10px 0;}
.row2 a{ position: relative; display: block; text-decoration: none; transition: all 1s ease;}
.row2 img{ width: 100%;}
.row2 .logo img{ width: 80%;}
.row2.bnr h3{ position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; color: #fff; font-size: 2rem; justify-content: center; align-items: center;}
.row2 figcaption{ margin: 20px 0 0; font-weight: 300; font-size: 3rem; line-height: 1;}
.row2 .cat{ margin: 20px 0 0;}
.row2 p{ margin: 20px 0 0;}
.row2 .line2{ margin: -20px 0 0;}
.row2 .line2 img{ width: 12px}
.row2 .ttl{ text-align: left; font-size: 2.4rem; line-height: 1.5;}
.row2 .exp{ margin: 30px 0 0; text-align: left; font-size: 1.4rem; line-height: 1.7;}
.row2 .ext{ margin: 30px 0 0; text-align: left; font-size: 1.6rem;}
.row2 .ext a{ display: inline; text-decoration: underline;}
.row2 .ext a:hover{ text-decoration: none;}
.row2 .ext i{ display: inline-block; padding: 0 0 0 .5em;}
.row2 .ext i img{ width: 12px;}

@media screen and (max-width: 1024px){
    .row2{ margin: -30px -7px 0; padding: 30px 0 0;}
    .row2 > li{ padding: 30px 7px 0;}
    .row2.pick{ margin: -15px -7px 0; padding: 30px 0 0;}
    .row2.pick > li{ padding: 15px 7px 0; width: 100%;}
    .row2.bnr{ margin: -15px -7px 0;}
    .row2.bnr > li{ padding: 15px 7px 0; width: 100%;}
    .row2.bnr a{ overflow: hidden;}
    .row2.bnr a:after{ display: block; padding-top: 30vw; content: "";}
    .row2.bnr a img{ position: absolute; top: 50%; left: 0; width: 100%; transform: translate(0,-50%);}
    .row2s{ display: block; margin: 0; padding: 0;}
    .row2s > li{ padding: 30px 0 0; width: 100%;}
    .row2s2{ display: block; margin: -75px 0 0; padding: 30px 15px 0;}
    .row2s2 > li{ padding: 75px 0 0; width: 100%;}
    .row2.bnr h3{ font-size: 1.2rem;}
    .row2 figcaption{ margin: 10px 0 0; font-size: 1.4rem;}
    .row2 .cat{ margin: 10px 0 0;}
    .row2 p{ margin: 10px 0 0;}
    .row2 .line2{ margin: -10px 0 0;}
    .row2 .ttl{ font-size: 1.8rem;}
    .row2 .exp{ margin: 20px 0 0; font-size: 1.05rem;}
    .row2 .ext{ margin: 20px 0 0; font-size: 1.2rem;}
    .row2 .ext i img{ width: 9px;}
}

.row3{ display: flex; margin: 0 -10px; flex-wrap: wrap;}
aside .row3{ margin: -60px -10px 0; padding: 0 0 60px;}
.row3 > li{ padding: 60px 10px 0; width: calc(100% / 3);}
.fnav .row3 > li{ padding: 20px 10px 0;}
.row3 a{ position: relative; display: block; text-decoration: none;}
.row3 img{ width: 100%;}
.row3 .detail{ display: flex; margin: 10px 0 0; align-items: center; justify-content: space-between;}
.row3 .detail h2{ line-height: 1.5;}
.row3 .period{ padding: 0 0 0 10px;}
.row3 .period-inner{ padding: 10px 0; width: 100px; border-right: 1px solid #efefef; border-left: 1px solid #efefef; text-align: center; font-size: 2.1rem; line-height: 1;}
.row3 .fin .period-inner{ font-size: 1.8rem;}
.row3 .period span{ display: block; transform: rotate(90deg);}
.row3 small{ font-size: 1.2rem;}
.row3 .line1{ font-size: 1rem;}
.row3 .line2{ margin: -20px 0 0;}
.row3 .line1 +  .line2{ margin: 10px 0 0;}
.row3 .line2 img{ width: 12px}
.row3 .cat{ margin: 20px 0 0;}
.row3 .logo{ display: flex; margin: 0; height: 168px; text-align: center; font-weight: 300; font-size: 4.5rem; align-items: center; justify-content: center;}
.row3 h3{ margin: 20px 0 0;}
.row3 p{ margin: 10px 0 0; font-size: 1.2rem;}
.row3 figure{ position: relative;}
.row3 figcaption{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; padding: 0 20px; width: 100%; height: 100%; background: rgba(0,0,0,.6); color: #fff; white-space: nowrap; line-height: 1.5; opacity: 0; transition: all .2s ease; align-items: center; justify-content: center;}
.row3 a:hover figcaption{ opacity: 1;}

.list-media figure{ overflow: hidden; padding-top: 67.555%;}
.list-media figure img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

@media screen and (max-width: 1024px){
    .row3{ margin: 0 -7px;}
    aside .row3{ margin: -30px -7px 0; padding: 0 0 30px;}
    .row3 > li{ padding: 30px 7px 0; width: 50%;}
    .fnav .row3 > li{ padding: 15px 7px 0;}
    .row3 > li > a{ position: relative; height: 100%;}
    .row3 > li > a.feature{ padding: 0 0 30px;}
    .row3 .detail{ display: block;}
    .row3 .period{ position: relative; padding: 0; line-height: 1.4;}
    .row3 .period-inner{ padding: 0; width: 100%; border: none; text-align: right; font-size: 1.6rem;}
    .row3 .fin .period-inner{ font-size: 1.2rem;}
    .row3 .period span{ display: inline; padding: 0 5px; transform: rotate(0);}
    .row3 small{ font-size: 1rem;}
    .row3 .line1{ padding: 0 0 10px; font-size: 1rem;}
    .row3 .line2{ margin: -10px 0 0;}
    .row3 .line1 +  .line2{ margin: 5px 0 0;}
    .row3 .cat{ margin: 10px 0 0;}
    .row3 .logo{ height: 75px; font-size: 2.4rem;}
    .row3 h3{ margin: 10px 0 0;}
    .row3 p{ margin: 10px 0 0; font-size: 1.2rem;}
    .row3 figure{ position: relative;}
    .row3 figcaption{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; padding: 0 20px; width: 100%; height: 100%; background: rgba(0,0,0,.6); color: #fff; line-height: 1.5; opacity: 0; transition: all .2s ease; align-items: center; justify-content: center;}
    .row3 a:hover figcaption{ opacity: 1;}
    
    .list-media{ display: block; margin: 0;}
    .list-media > li{ padding: 30px 0 0; width: 100%;}
    
    .company .row3{ display: block; margin: -15px 0 0; padding: 15px 0 0;}
    .company .row3 > li{ display: flex; padding: 15px 0 0; width: 100%; align-items: center;}
    .company .row3 figure{ padding: 0 7px 0 0; width: 50%;}
    .company .row3 .detail2{ padding: 0 0 0 7px; width: 50%;}
    .company .row3 h3{ margin: 0;}
    .company .row3 p{ margin: 5px 0 0; font-size: 1rem;}
    .company .row3 .read2{ margin: 5px 0 0;}
}

.row4{ display: flex; margin: 0 -10px; flex-wrap: wrap;}
.row4 > li{ padding: 40px 10px 0; width: 25%;}
.row4 a{ position: relative; display: block; text-decoration: none; line-height: 1.5;}
.row4 img{ width: 100%;}
.row4 h2{ color: #4c4948; font-size: 2rem;}
.row4 figure + h2{ margin: 20px 0 0; font-size: 1.4rem;}
.row4 .cat{ margin: 20px 0 0;}
.row4 h3{ margin: 20px 0 0;}
.row4.lighting h3{ margin: 30px 0 0;}
.row4 h3 i{ display: inline-block; margin: 0 0 0 5px; width: 12px;}
.row4 h3 i img{ vertical-align: baseline;}
.row4 h3 span{ display: block; margin: 10px 0 0; font-size: 1rem;}
.row4 .place{ margin: 20px 0 0; color: #4c4948; font-size: 1.2rem;}
.row4 .period{ color: #4c4948; font-size: 1rem;}
.row4 figure + .period{ margin: 20px 0 0;}
.row4 .price{ color: #4c4948; font-size: 1.6rem;}
.row4 .price small{ font-size: 1rem;}
.row4 .logo{ display: flex; margin: 0; height: 130px; text-align: center; font-weight: 300; font-size: 2.6rem; align-items: center; justify-content: center;}
.row4 .logo2{ display: flex; height: 40px; letter-spacing: .1rem; font-weight: 300; align-items: center;}
.row4 .logo2 img{ width: auto; height: 100%;}
.row4 .line1{ font-size: 1rem;}
.row4 .line2{ margin: 20px 0 0;}
.row4 .line2 img{ width: 12px}
.row4 figure{ position: relative;}
.row4 figcaption{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; padding: 0 20px; width: 100%; height: 100%; background: rgba(0,0,0,.6); color: #fff; font-size: 1.4rem; opacity: 0; transition: all .2s ease; align-items: center; justify-content: center;}
.row4 figcaption h3{ margin: 0;}
.row4 a:hover figcaption{ opacity: 1;}
.row4 figure > ul{ display: flex; margin: -10px -5px 0; flex-wrap: wrap;}
.row4 figure > ul > li{ padding: 10px 5px 0; width: 50%;}
.row4 figure > ul > li:first-child{ width: 100%;}

.list-catalog > li{ position: relative; padding: 40px 10px 30px; text-align: center;}
.list-catalog figure{ height: 260px;}
.list-catalog img{ width: 100%; height: 100%; object-fit: contain;}
.list-catalog h2{ margin: 10px 0 0;}
.list-catalog .jp{ margin: 10px 0 0; color: #4c4948;}
.list-catalog p{ margin: 10px 0 0; font-size: 1.2rem;}
/*.list-catalog .view{ position: absolute; bottom: 0; left: 0; padding: 0 10px; width: 100%;}
.list-catalog .view2{ bottom: -30px;}*/
.list-catalog .view{ margin: 1em 0 0;}
.list-catalog .view a{ color: #4c4948; text-decoration: underline;}
.list-catalog .view a:hover{ text-decoration: none;}
.list-catalog .view i{ display: inline-block; margin: 0 6px 0 0; height: 12px;}
.list-catalog .view i img{ width: auto; height: 100%; vertical-align: middle;}

@media screen and (max-width: 1024px){
    .row4{ margin: 0 -7px;}
    .row4 li{ padding: 30px 7px 0; width: 50%;}
    .row4.center li{ width: calc(100% / 3);}
    .row4 h2{ font-size: 2rem;}
    .row4 figure + h2{ margin: 10px 0 0; font-size: 1.2rem;}
    .row4 .cat{ margin: 10px 0 0;}
    .row4 h3{ margin: 10px 0 0; font-size: 1.2rem;}
    .row4 h3 i{ display: inline-block; margin: 0 0 0 5px; width: 12px;}
    .row4 h3 i img{ vertical-align: baseline;}
    .row4 h3 span{ display: block; margin: 10px 0 0; font-size: 1rem;}
    .row4 .place{ margin: 10px 0 0; font-size: 1rem;}
    .row4 .period{ font-size: 1rem;}
    .row4 .price{ font-size: 1.4rem;}
    .row4 .price span{ font-size: 1.2rem;}
    .row4 figure + .period{ margin: 10px 0 0;}
    .row4 .logo{ height: 60px; font-size: 1.8rem;}
    .row4 .logo2{ display: flex; height: 40px; letter-spacing: .1rem; font-weight: 300; align-items: center;}
    .row4 .logo2 img{ width: auto; height: 100%;}
    .row4 .line1{ font-size: 1rem;}
    .row4 .line2{ margin: 20px 0 0;}
    .row4 .line2 img{ width: 12px}
    .row4 figure{ position: relative;}
    .row4 figcaption{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; padding: 0 20px; width: 100%; height: 100%; background: rgba(0,0,0,.6); color: #fff; font-size: 1.4rem; opacity: 0; transition: all .2s ease; align-items: center; justify-content: center;}
    .row4 figcaption h3{ margin: 0;}
    .row4 a:hover figcaption{ opacity: 1;}
    .row4 figure > ul{ display: flex; margin: -10px -5px 0; flex-wrap: wrap;}
    .row4 figure > ul > li{ padding: 10px 5px 0; width: 50%;}
    .row4 figure > ul > li:first-child{ width: 100%;}
    
    .company .row4 li{ position: relative; padding: 30px 7px; width: calc(100% / 3);}
    .company .row4 li .read2{ position: absolute; bottom: 0; left: 7px;}
    
    .list-catalog > li{ padding: 30px 7px 30px;}
    .list-catalog figure{ height: 130px;}
    .list-catalog p{ font-size: 1rem;}
    /*.list-catalog .view{ padding: 0 7px;}*/
}

.cat{ display: flex; color: #4c4948; text-transform: uppercase; font-size: 1rem;}
.cat span{ margin: 0 0 0 15px; padding: 0 0 0 15px; border-left: 1px solid;}
.cat + h3{ margin: 10px 0 0; line-height: 1.8;}

@media screen and (max-width: 1024px){
    .cat{ font-size: .8rem;}
    .cat span{ margin: 0 0 0 7px; padding: 0 0 0 7px;}
    .cat + h3{ margin: 10px 0 0; line-height: 1.5;}
}

.more{ margin: 60px 0 0; text-align: center;}
.more a{ display: inline-block; padding: 25px 50px; min-width: 320px; border: 1px solid; text-align: center; text-decoration: none; line-height: 1;}
.more a:hover{ color: #9fa0a0;}
.more i{ display: inline-block; margin: 0 6px 0 0; height: 15px;}
.more i img{ width: auto; height: 100%; vertical-align: middle;}
.list-more{ display: flex; padding: 60px 0 0; justify-content: center;}
section + .list-more{ padding: 0;}
.list-more > li{ padding: 0 10px;}
.list-more a{ display: inline-block; padding: 25px; min-width: 260px; border: 1px solid; text-align: center; text-decoration: none; line-height: 1.2;}
.list-more a:hover{ color: #9fa0a0;}
.list-more i{ display: inline-block; margin: 0 6px 0 0; height: 15px;}
.list-more i img{ width: auto; height: 100%; vertical-align: baseline;}

@media screen and (max-width: 1024px){
    .more{ margin: 45px 0 0;}
    .more + .more{ margin: 15px 0 0;}
    .slider-pickup-wrap + .more,
    .slider-pickup-wrap2 + .more,
    .slider-column-wrap + .more{ margin: 75px 0 0;}
    .slider-pickup-wrap2 + .more{ margin: 45px 0 0;}
    .more a{ padding: 15px; min-width: 50%;}
    .list-more{ display: block; margin: -15px 0 0; padding: 45px 0 0;}
    .list-more > li{ padding: 15px 0 0; width: 100%; text-align: center;}
    .list-more a{ padding: 15px; min-width: 75%;}
}

.more2{ margin: 120px 0 0; text-align: center;}
.more2 a{ display: block; height: 80px; border: 1px solid; text-decoration: none; text-decoration: none; line-height: 80px;}
.more2 a:hover{ color: #9fa0a0;}

@media screen and (max-width: 1024px){
    .more2{ margin: 60px 0 0;}
    .more2 a{ padding: 15px 0; height: auto; line-height: normal;}
}

.more3{ margin: 60px 0 0; text-align: center;}
.more3 a{ display: block; height: 80px; border: 1px solid; text-decoration: none; text-decoration: none; line-height: 80px;}
.more3 a:hover{ color: #9fa0a0;}

@media screen and (max-width: 1024px){
    .more3{ margin: 30px 0 0;}
    .more3 a{ padding: 15px; height: auto; line-height: normal;}
}

.more4{ margin: 40px 0 0; text-align: center;}

@media screen and (max-width: 1024px){
    .more4{ margin: 15px 0 0;}
}

/* top/brand index - hero */
.slider-hero .slick-slide{ padding: 0 0.15625vw; height: 35.67708333vw;}
.slider-hero .slick-slide img{ width: auto; height: 100%;}

@media screen and (max-width: 1024px){
    .slider-hero .slick-slide{ padding: 0 7px; height: 225px;}
    .top .slider-hero .slick-slide{ padding: 0; width: 100vw; height: auto;}
    .top .slider-hero .slick-slide img{ width: 100%; height: auto;}
}

/* top - pickup */
.slider-pickup a{ display: block;}
.slider-pickup .cat{ margin: 20px 0 0;}

.slider-pickup-wrap2{ margin: 0 calc(50% - 50vw); padding: 60px 0 0; width: 100vw;}
.slider-pickup-wrap2 .slider-pickup .slick-slide{ padding: 0 10px;}
.slider-pickup-wrap2 .slider-pickup .slick-slide img{ width: auto; height: 364px;}
.slider-pickup-wrap2 .slider-pickup .slick-slide h3{ width: 540px;}

.slider-pickup-wrap{ margin: 0 -10px; padding: 60px 0 0;}
.slider-pickup-wrap .slider-pickup .slick-slide{ padding: 0 10px; width: 50%;}

@media screen and (max-width: 1024px){
    .slider-pickup .cat{ margin: 10px 0 0;}

    .slider-pickup-wrap2{ padding: 30px 0 0;}
    .slider-pickup-wrap2 .slider-pickup .slick-slide{ padding: 0 7px;}
    .slider-pickup-wrap2 .slider-pickup .slick-slide img{ width: auto; height: 130px;}
    .slider-pickup-wrap2 .slider-pickup .slick-slide h3{ width: 190px;}
    .slider-pickup-wrap2 .slick-dots{ bottom: 0;}
    .slider-pickup-wrap2 .slick-prev,
    .slider-pickup-wrap2 .slick-next{ bottom: -12px;}

    .slider-pickup-wrap{ margin: 0 -7px; padding: 15px 0 0;}
    .slider-pickup-wrap .slider-pickup .slick-slide{ padding: 0 7px;}
}

/* top - column */
.slider-column a{ display: block;}
.slider-column .cat{ margin: 20px 0 0;}
.slider-column-wrap{ margin: 0 -10px; padding: 40px 0 0;}
.slider-column .slick-slide{ padding: 0 10px;}
.slider-column .slick-slide img{ width: auto; height: 245px;}

@media screen and (max-width: 1024px){
    .slider-column .cat{ margin: 10px 0 0;}
    .slider-column-wrap{ margin: 0 -15px; padding: 30px 0 0;}
    .slider-column .slick-slide{ padding: 0 7px; width: 54.4vw;}
    .slider-column .slick-slide img{ width: 100%; height: auto;}
}

@media screen and (max-width: 1024px){
    .slide-youtube-wrap{ margin: 0 -15px; padding: 30px 0 0;}
    .slide-youtube .slick-slide{ padding: 0 7px; width: 54.4vw;}
}

/* product index - catalog */
.slider-catalog .slick-slide{ padding: 0 15px; width: 230px;}
.slider-catalog .slick-slide figure{ position: relative; width: 100%; height: 247px;}
.slider-catalog .slick-slide figure img{ position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%,-50%); object-fit: cover;}
.slider-catalog .view{ margin: 1em 0 0; text-align: center; font-size: 1.2rem;}
.slider-catalog .view a{ text-decoration: underline;}
.slider-catalog .view a:hover{ text-decoration: none;}

@media screen and (max-width: 1024px){
    .slider-catalog .slick-slide{ padding: 0 1.866666667vw; width: 43.73333333vw;}
    .slider-catalog .slick-slide figure{ height: 49.33333333vw;}
}

/* product index - column */
.slider-column2 .slick-slide{ padding: 0 10px; height: 240px;}
.slider-column2 .slick-slide img{ width: auto; height: 100%;}

@media screen and (max-width: 1024px){
    .slider-column2 .slick-slide{ padding: 0 7px; height: 120px;}
}

/* product detail - photo gallery */
.slider-gallery-wrap{ padding: 50px 0 0;}
.slider-gallery .slick-slide{ position: relative; padding: 0 10px; height: 500px;}
.slider-gallery .slick-slide img{ position: relative; display: block; width: auto; height: 100%;}
.slider-gallery .slick-slide:after{ position: absolute; bottom: 0; left: 10px; width: 20px; height: 20px; background: url("/img/ico_zoom.svg") no-repeat 0 0 / contain; content: "";}

@media screen and (max-width: 1024px){
    .slider-gallery-wrap{ margin: 0 -15px; padding: 30px 0 0;}
    .slider-gallery .slick-slide{ padding: 0 7px; height: 150px;}
    .slider-gallery .slick-slide:after{ left: 7px; width: 15px; height: 15px;}
}

/* shop detail - photo gallery */
.slider-gallery2-wrap{ padding: 50px 0 0;}
.slider-gallery2 .slick-slide{ padding: 0 10px; height: 500px;}
.slider-gallery2 .slick-slide img{ width: auto; height: 100%;}
.slider-gallery2 .slick-slide video{ width: auto; height: 100%;}

@media screen and (max-width: 1024px){
    .slider-gallery2-wrap{ position: relative; z-index: 99; padding: 30px 0 0;}
    .slider-gallery2 .slick-slide{ padding: 0 5px; height: 50vw;}
}

/* shop detail - photo gallery */
.slider-gallery3-wrap{ padding: 50px 0 0;}
.slider-gallery3 .slick-slide{ padding: 0 10px; height: 500px;}
.slider-gallery3 .slick-slide img{ width: auto; height: 100%;}
.slider-gallery3 .slick-slide video{ width: auto; height: 100%;}

@media screen and (max-width: 1024px){
    .slider-gallery3-wrap{ position: relative; z-index: 99; padding: 30px 0 0;}
    .slider-gallery3 .slick-slide{ padding: 0 5px; height: 50vw;}
}

/* product detail - photo gallery */
.slider-gallery4-wrap{ padding: 100px 0 0;}
.slider-gallery4{ position: relative; z-index: 99;}
.slider-gallery4 .slick-slide{ position: relative; padding: 0 20px 0 0; height: 500px;}
.slider-gallery4 .slick-slide img{ position: relative; display: block; width: auto; height: 100%;}
.slider-gallery4 .slick-slide video{ width: auto; height: 100%;}

@media screen and (max-width: 1024px){
    .slider-gallery4-wrap{ padding: 45px 0 0;}
    .slider-gallery4 .slick-slide{ padding: 0 14px 0 0; height: 55vw;}
}

/* shop detail - photo gallery */
.slider-gallery5 .slick-slide{ padding: 0 10px; height: 500px;}
.slider-gallery5 .slick-slide img{ width: auto; height: 100%;}
.slider-gallery5 .slick-slide video{ width: auto; height: 100%;}

@media screen and (max-width: 1024px){
    .slider-gallery5 .slick-slide{ padding: 0 5px; height: 50vw;}
}

/* shop detail - photo gallery */
.slider-gallery6 .slick-slide{ padding: 0 10px; height: 500px;}
.slider-gallery6 .slick-slide img{ width: auto; height: 100%;}
.slider-gallery6 .slick-slide video{ width: auto; height: 100%;}

@media screen and (max-width: 1024px){
    .slider-gallery6 .slick-slide{ padding: 0 5px; height: 50vw;}
}

/* shop detail - photo gallery */
.slider-gallery7 .slick-slide{ padding: 0 10px; height: 500px;}
.slider-gallery7 .slick-slide img{ width: auto; height: 100%;}
.slider-gallery7 .slick-slide video{ width: auto; height: 100%;}

@media screen and (max-width: 1024px){
    .slider-gallery7 .slick-slide{ padding: 0 5px; height: 50vw;}
}

/* shop detail - photo gallery */
.slider-gallery8 .slick-slide{ padding: 0 10px; height: 500px;}
.slider-gallery8 .slick-slide img{ width: auto; height: 100%;}
.slider-gallery8 .slick-slide video{ width: auto; height: 100%;}

@media screen and (max-width: 1024px){
    .slider-gallery8 .slick-slide{ padding: 0 5px; height: 50vw;}
}

/* shop detail - photo gallery */
.slider-gallery9 .slick-slide{ padding: 0 10px; height: 500px;}
.slider-gallery9 .slick-slide img{ width: auto; height: 100%;}
.slider-gallery9 .slick-slide video{ width: auto; height: 100%;}

@media screen and (max-width: 1024px){
    .slider-gallery9 .slick-slide{ padding: 0 5px; height: 50vw;}
}

/* shop detail - photo gallery */
.slider-gallery10 .slick-slide{ padding: 0 10px; height: 500px;}
.slider-gallery10 .slick-slide img{ width: auto; height: 100%;}
.slider-gallery10 .slick-slide video{ width: auto; height: 100%;}

@media screen and (max-width: 1024px){
    .slider-gallery10 .slick-slide{ padding: 0 5px; height: 50vw;}
}

/* shop detail - photo gallery */
.slider-gallery11 .slick-slide{ padding: 0 10px; height: 500px;}
.slider-gallery11 .slick-slide img{ width: auto; height: 100%;}
.slider-gallery11 .slick-slide video{ width: auto; height: 100%;}

@media screen and (max-width: 1024px){
    .slider-gallery11 .slick-slide{ padding: 0 5px; height: 50vw;}
}

/* shop detail - photo gallery */
.slider-gallery12 .slick-slide{ padding: 0 10px; height: 500px;}
.slider-gallery12 .slick-slide img{ width: auto; height: 100%;}
.slider-gallery12 .slick-slide video{ width: auto; height: 100%;}

@media screen and (max-width: 1024px){
    .slider-gallery12 .slick-slide{ padding: 0 5px; height: 50vw;}
}

.notfound{ margin: 60px 0 0; line-height: 1.75;}
@media screen and (max-width: 1024px){
    .notfound{ margin: 15px 0 0;}
}

/* top
--------------------------------------------------- */
.ttl-wrap{ display: flex; align-items: flex-end;}
.ttl-wrap p{ margin: 0 !important; padding: 0 0 0 40px; font-size: 1.2rem; line-height: 1.8;}

@media screen and (max-width: 1024px){
    .ttl-wrap{ display: block;}
    .ttl-wrap .ttl + p{ margin: 0; padding: 10px 0 0; font-size: 1rem; line-height: 1.8;}
}

.list-news{ display: flex; margin: 85px 0 0; letter-spacing: .1rem; justify-content: center;}
.list-news li{ padding: 0 30px;}
.list-news a{ display: flex; justify-content: flex-start; align-items: center;}
.list-news time{ padding: 0 30px 0 0; font-size: 1rem;}
.list-news p{ text-decoration: underline; line-height: 1.4;}
.list-news a:hover p{ text-decoration: none;}

@media screen and (max-width: 1024px){
    .list-news{ display: block; margin: -15px 0 0; padding: 60px 15px 0; line-height: 1.5;}
    .news-wrap .list-news{ margin: 0; padding: 15px 15px 30px;}
    .list-news li{ padding: 15px 0 0;}
    .list-news a{ align-items: flex-start;}
    .list-news time{ padding: 0 10px 0 0;}
}

.pickup-set{ display: flex; flex-direction: row-reverse; align-items: center;}
.pickup-img{ width: calc(50% + 230px);}
.pickup-img img{ width: 100%;}
.pickup-detail{ width: 320px;}
.pickup-detail img{ width: 100%;}
.pickup-detail p{ margin: 20px 0 0; width: 264px; font-size: 1.2rem; line-height: 1.8;}
.pickup-detail .cat{ margin: 60px 0 0;}

@media screen and (max-width: 1024px){
    .pickup-set{ display: block;}
    .pickup-img{ display: none;}
    .pickup-detail{ width: 100%;}
    .pickup-detail .ttl + p{ margin: 10px 0 0; width: 100%; font-size: 1.2rem; line-height: 1.5;}
    .pickup-detail .ttl + p br{ display: none;}
    .pickup-detail figure{ margin: 30px 0 0;}
    .pickup-detail .cat{ margin: 10px 0 0;}
}

.product-wrap{ position: relative; display: flex; margin: -20px -10px 0; padding: 60px 0 0; flex-wrap: wrap;}
.product-wrap img{ width: 100%;}
.product-wrap > div{ padding: 20px 10px 0; width: calc(100% / 3);}
.product-wrap > div:nth-child(4){ position: absolute; top: 316px; right: 0;}
.product-wrap > div:nth-child(n+5){ position: relative; width: 25%;}
.product-wrap a{ position: relative; display: block; color: #fff;}
.product-wrap > div:nth-child(n+5) a{ overflow: hidden;}
.product-wrap > div:nth-child(n+5) a:after{ display: block; padding-top: 100%; content: "";}
.product-wrap > div:nth-child(n+5) a > img{ position: absolute; top: 50%; left: 50%; display: block; max-width: none; width: 100%; height: 100%; transform: translate(-50%,-50%); object-fit: cover;}
.product-wrap .detail{ position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;}
.product-wrap h3{ text-align: center;}
.product-wrap h3 span{ display: block; padding: 0 0 20px; font-weight: 300; font-size: 2.6rem;}
.product-wrap h3 i{ display: inline-block; margin: 0 0 0 6px; width: 14px;}

@media screen and (max-width: 1024px){
    .product-wrap{ margin: -15px -7px 0; padding: 30px 0 0;}
    .product-wrap > div{ padding: 15px 7px 0; width: 50%;}
    .product-wrap > div:nth-child(3){ width: 100%;}
    .product-wrap > div:nth-child(4){ position: relative; top: auto; right: auto; width: 100%;}
    .product-wrap > div:nth-child(3) a,
    .product-wrap > div:nth-child(4) a{ overflow: hidden;}
    .product-wrap > div:nth-child(3) a:after,
    .product-wrap > div:nth-child(4) a:after{ display: block; padding-top: 30vw; content: "";}
    .product-wrap > div:nth-child(3) img,
    .product-wrap > div:nth-child(4) img{ position: absolute; top: 50%; left: 0; width: 100%; transform: translate(0,-50%);}
    .product-wrap > div:nth-child(n+5){ width: 50%;}
    .product-wrap > div:nth-child(n+5) a{ overflow: visible;}
    .product-wrap > div:nth-child(n+5) a:after{ content: none;}
    .product-wrap > div:nth-child(n+5) a > img{ position: relative; top: auto; left: auto; width: 100%; height: auto; transform: none; object-fit: contain;}
    .product-wrap h3 span{ padding: 0 0 10px; font-size: 1.8rem;}
    .product-wrap h3 i{ display: inline-block; margin: 0 0 0 6px; width: 14px;}
}

.sec-news{ display: flex; align-items: center;}
.sec-news .ttl2{ width: 280px;}
.sec-news .tab-wrap{ width: calc(100% - 280px);}

@media screen and (max-width: 1024px){
    .sec-news{ display: block;}
    .sec-news .ttl2{ width: 100%;}
    .sec-news .tab-wrap{ margin: 30px 0 0; width: 100%;}
}

.list-tab{ display: flex; margin: 0 -10px; color: #9fa0a0; font-weight: 300; font-size: 2rem;}
.list-tab > li{ padding: 0 10px; width: calc(100% / 3);}
.list-tab > .select{ color: #000;}
.list-tab span{ display: block; padding: 0 0 20px; border-bottom: 1px solid; text-align: center; cursor: pointer;}

@media screen and (max-width: 1024px){
    .list-tab{ margin: 0 -7px; font-size: 1.2rem;}
    .list-tab > li{ padding: 0 7px;}
    .list-tab span{ padding: 0 0 15px;}
}

.tab-content{ display: none;}
.tab-content.select{ display: block;}
.list-info > li{ padding: 40px 0; border-bottom: 1px solid #f1f1f1;}
.cont2 .list-info > li:first-child{ padding: 0 0 40px;}
.list-info .cat{ line-height: 1;}
.list-info h3{ line-height: 1.5;}
.list-info a{ text-decoration: none;}

@media screen and (max-width: 1024px){
    .list-info > li{ padding: 15px 0;}
    .cont2 .list-info > li:first-child{ padding: 0 0 15px;}
}

.wrap-vsm{ margin: 40px 0 0;}
.page .wrap-vsm{ margin: 0;}
.wrap-vsm .ttle_instagram{ display: none;}
.wrap-vsm .ttle_instagram{ display: none;}
.wrap-vsm .vsm-btn-more-wrap{ display: none;}
.wrap-vsm .ecbn-selection-footer2{ display: none;}
.wrap-vsm .vsm-tile .ecbn-selection-page-wrapper li.ecbn-selection-item,
.wrap-vsm .vsm-tile-goods .ecbn-selection-page-wrapper li.ecbn-selection-item{ padding: 15px;}
.wrap-vsm .ecbn-selection-image-loading-more{ display: none;}

@media screen and (max-width: 1024px){
    .wrap-vsm{ margin: 30px -15px 0;}
    .wrap-vsm .vsm-slider, .wrap-vsm .vsm-goods{ overflow: visible;}
    .wrap-vsm .vsm-tile .ecbn-selection-page-wrapper li.ecbn-selection-item,
    .wrap-vsm .vsm-tile-goods .ecbn-selection-page-wrapper li.ecbn-selection-item{ padding: 2.5px;}
}

/* news
--------------------------------------------------- */
@media screen and (max-width: 1024px){
    .news .content{ padding: 0 15px;}
}

/* shop
--------------------------------------------------- */
.list-shop{ display: flex; margin: -20px -20px 0; padding: 60px 0 0; flex-wrap: wrap;}
.list-shop > li{ display: flex; padding: 20px 20px 0; width: 50%; align-items: center;}
.list-shop figure{ width: 50%;}
.list-shop .detail{ padding: 0 0 0 20px; width: 50%; line-height: 1.8;}
.list-shop h3{ font-size: 1.6rem; line-height: 1.4;}
.list-shop h3 span{ display: inline-block; font-size: 1.2rem;}
.list-shop p{ padding: 5px 0 0; font-size: 1.2rem;}
.list-shop dl{ display: flex; padding: 5px 0 0; flex-wrap: wrap;}
.list-shop dt{ padding: 0 15px 0 0; width: 25%; font-size: 1rem;}
.list-shop dd{ width: 75%; font-size: 1.2rem;}
.list-shop a{ text-decoration: underline;}
.list-shop a:hover{ text-decoration: none;}

@media screen and (max-width: 1024px){
    .list-shop{ display: block; margin: -15px 0 0; padding: 30px 0 0;}
    .list-shop > li{ padding: 30px 0 0; width: 100%; align-items: flex-start;}
    .list-shop figure{ width: 25%;}
    .list-shop .detail{ padding: 0 0 0 15px; width: 75%; line-height: 1.8;}
    .list-shop h3{ font-size: 1.2rem;}
    .list-shop h3 span{ font-size: 1rem;}
    .list-shop p{ padding: 0; font-size: 1rem;}
    .list-shop p br{ display: none;}
    .list-shop dl{ display: flex; padding: 0; letter-spacing: normal; align-items: center;}
    .list-shop dt{ padding: 0 5px 0 0; width: 20%; font-size: 1rem;}
    .list-shop dd{ width: 80%; font-size: 1rem;}
}

.toggle-shop{ border-top: 1px solid #f0f1f1; font-size: 1.4rem;}
.toggle-shop > dt{ position: relative; padding: 15px; border-bottom: 1px solid #f0f1f1; cursor: pointer;}
.toggle-shop > dt:after{ position: absolute; top: 50%; right: 15px; width: 27px; height: 11px; background: url("/img/ico_arrow2.svg") no-repeat center / contain; content: ""; font-weight: 300; font-size: 3rem; transition: all .1s ease; transform: translate(0,-50%);}
.toggle-shop > dt.active:after{ transform: translate(0,-50%) rotate(90deg);}
.toggle-shop > dd{ display: none; padding: 30px 15px; border-bottom: 1px solid #f0f1f1;}
.list-shop + .ttl3{ margin: 60px 0 0;}

.flex-shop{ position: relative; z-index: 2; display: flex; margin: -30px auto 0; padding: 120px 0 60px; line-height: 1.8; flex-wrap: wrap;}
.flex-shop .cont1{ padding: 0 130px 0 0; width: 680px;}
.flex-shop .cont2{ width: calc(100% - 680px);}
.flex-shop a{ text-decoration: underline;}
.flex-shop a:hover{ text-decoration: none;}
.flex-shop h2{ padding: 30px 0 0; font-size: 1rem;}
.flex-shop p{ margin: 5px 0 0; font-size: 1.6rem;}
.flex-shop p small{ font-size: 1.4rem;}
.flex-shop .parking{ display: inline;}
.flex-shop .parking + .parking:before{ content: "、";}
.flex-shop figure{ margin: 10px 0 0;}
.flex-shop iframe{ width: 100%; height: 255px;}

@media screen and (max-width: 1024px){
    .flex-shop{ display: block; margin: 0; padding: 60px 15px 30px;}
    .flex-shop .cont1{ padding: 0; width: 100%;}
    .flex-shop .cont2{ width: 100%;}
    .flex-shop .more{ width: 100%;}
    .flex-shop .more a{ display: block; padding: 15px; min-width: 0; text-align: center;}
    .flex-shop h2{ padding: 15px 0 0; font-size: 1rem;}
    .flex-shop p{ margin: 5px 0 0; font-size: 1.2rem;}
    .flex-shop p small{ font-size: 1rem;}
    .flex-shop figure{ margin: 5px 0 0;}
    .flex-shop iframe{ height: 255px;}
}

.shop-contact.anchor{ position: relative; z-index: auto;}
.shop-contact.anchor:before{ position: relative; z-index: 1; display: block; margin-top: -185px; width: 100%; height: 185px; content: ""; vertical-align: top;}

@media screen and (max-width: 1024px){
    .shop-contact.anchor:before{ margin-top: -65px; height: 65px;}
}
.shop-contact .more{ margin: 0;}
.shop-contact .more + .more{ padding: 15px 0 0;}
.shop-contact .more a{ padding: 20px; min-width: 450px; text-decoration: none;}

@media screen and (max-width: 1024px){
    .shop-contact{ padding: 0 15px;}
    .shop-contact .more a{ display: block; padding: 15px; min-width: 0; text-align: center;}
}

.shop-feed ul{ display: flex; margin: -40px -10px 0; padding: 60px 0 0; flex-wrap: wrap;}
.shop-feed ul > li{ padding: 40px 10px 0 !important; width: 25%; line-height: 1.8;}
.shop-feed .rss_image{ width: 100% !important; height: auto !important;}
.shop-feed .rss_image > a{ display: block; width: 100% !important;}
.shop-feed .rss_image .fetched{ position: relative; display: block; background-size: cover;}
.shop-feed .rss_image .fetched:after{ display: block; padding-top: 65.384%; content: "";}
.shop-feed .title{ display: block; margin: 15px 0 0;}
.shop-feed .rss_content{ display: block; margin: 10px 0 0;}
.shop-feed .rss_content small{ display: block; color: #4c4948; font-size: 1rem;}
.shop-feed a{ text-decoration: none;}
.shop-feed .feedzy-rss .rss_item .rss_image{ float: none;}

@media screen and (max-width: 1024px){
    .shop-feed ul{ margin: -30px -7px 0; padding: 30px 0 0;}
    .shop-feed ul > li{ padding: 30px 7px 0 !important; width: 50%;}
    .shop-feed .title{ margin: 10px 0 0;}
    .shop-feed .rss_content{ margin: 5px 0 0;}
}

.memberonly{ margin: 60px 0 0; text-align: center; line-height: 1.8;}
.memberonly h3{ font-size: 2.4rem;}
.memberonly p{ margin: 10px 0 0;}
.memberonly .more{ margin: 40px 0 0;}
.memberonly .more a{ font-size: 1.6rem; line-height: 1;}
.memberonly .more i{ margin: 0 15px 0 0; height: 24px;}
.memberonly .more i img{ vertical-align: middle;}

@media screen and (max-width: 1024px){
    .memberonly{ margin: 30px 0 0;}
    .memberonly h3{ font-size: 1.6rem;}
    .memberonly p{ margin: 10px;}
    .memberonly .more a{ font-size: 1.4rem;}
    .memberonly .more i{ margin: 0 10px 0 0; height: 20px;}
}

/* product index
--------------------------------------------------- */
.hero{ margin: 60px -550px 0;}
.top .hero{ margin: 0;}
h3 + .hero{ margin: 40px -550px 0;}

@media screen and (max-width: 1024px){
    .hero{ margin: 30px 0 0; padding: 0 0 30px;}
    section .hero{ margin: 30px -15px 0;}
    .top .hero{ margin: 0; padding: 0;}
    h3 + .hero{ margin: 15px 0 0;}
}

.pager{ margin: 120px 0 0; text-align: center;}
.pager span,
.pager a{ display: inline; margin: 0 10px; color: #4c4948; text-decoration: none;}
.pager span{ border-bottom: 1px solid;}
.pager .previouspostslink{ margin: 0 90px 0 0;}
.pager .nextpostslink{ margin: 0 0 0 90px;}

@media screen and (max-width: 1024px){
    .pager{ margin: 60px 0 0; font-size: 1.2rem;}
    .pager .previouspostslink{ margin: 0 20px 0 0;}
    .pager .nextpostslink{ margin: 0 0 0 20px;}
}

/* product category
--------------------------------------------------- */
.float{ float: right; width: 360px;}
.float-block{ padding: 0 400px 0 0;}
.float-block h2{ font-size: 1.2rem;}
.float-block h2 span{ display: block; font-size: 4.2rem;}
.float-block h2 span img{ width: auto; height: 120px;}
.float-block .detail{ margin: 40px 0 0; line-height: 1.8;}

@media screen and (max-width: 1024px){
    .float{ float: none; width: 100%;}
    .float-block{ padding: 0;}
    .float-block h2{ margin: 15px 0 0; font-size: 1rem;}
    .float-block h2 span{ padding: 0 0 10px; font-size: 3rem;}
    .float-block h2 span img{ height: 90px;}
    .float-block .detail{ margin: 15px 0 0;}
}

/* brand index
--------------------------------------------------- */
.ttl-wrap2{ display: flex; flex-wrap: wrap; align-items: center;}
.ttl-wrap2 .logo{ display: flex; width: 250px; flex-wrap: wrap; align-items: center;}
.ttl-wrap2 .logo span{ display: block; width: 100%; letter-spacing: .1rem; font-weight: 500; font-size: 2.4rem;}
.ttl-wrap2 .logo .kana{ padding: 0 0 10px; font-size: 1.2rem;}
.ttl-wrap2 .logo .jp{ margin: 10px 0 0; font-size: 1.2rem;}
.ttl-wrap2 .logo img{ max-width: none; width: 100%; vertical-align: middle;}
.ttl-wrap2 .lead{ width: calc(100% - 250px); font-size: 2.4rem; line-height: 1.8;}
.ttl-wrap2 .lead span{ display: block; font-size: 1.2rem;}
.ttl-wrap2 .design{ margin: 20px 0 0; color: #595757;}

@media screen and (max-width: 1024px){
    .ttl-wrap2 .logo{ width: 38%; flex-wrap: wrap; align-items: center;}
    .ttl-wrap2 .logo span{ font-size: 1.2rem;}
    .ttl-wrap2 .logo .kana{ padding: 0 0 5px; font-size: 1rem;}
    .ttl-wrap2 .logo .jp{ font-size: 1rem;}
    .ttl-wrap2 .lead{ width: 62%; font-size: 1.2rem; line-height: 1.5;}
    .ttl-wrap2 .lead span{ font-size: 1rem;}
    .ttl-wrap2 .design{ margin: 15px 0 0;}
}

.about{ margin: 60px 0 0; line-height: 2;}

@media screen and (max-width: 1024px){
    .about{ margin: 30px 0 0; line-height: 1.8;}
}

.list-bn{ display: flex; margin: -20px -10px 0; flex-wrap: wrap;}
.list-bn{ padding: 40px 0 0;}
.list-bn1 + .list-bn2{ padding: 20px 0 0;}
.list-bn > li{ padding: 20px 10px 0; width: 50%;}
.list-bn1 > li{ width: 100%;}
.list-bn a{ display: block;}

@media screen and (max-width: 1024px){
    .list-bn{ margin: -15px -7px 0;}
    .list-bn{ padding: 30px 0 0;}
    .list-bn1 + .list-bn2{ padding: 15px 0 0;}
    .list-bn > li{ padding: 15px 7px 0;}
}

/* bottom */
.more-wrap{ display: flex; overflow: hidden; margin: 0 -10px; justify-content: center;}
.more-wrap > .more{ margin: 0; padding: 60px 10px 0;}
.more-wrap + .more{ margin: 20px 0 0;}

@media screen and (max-width: 1024px){
    .more-wrap{ display: block; margin: 0;}
    .more-wrap > .more{ margin: 0; padding: 45px 0 0;}
    .more-wrap .more + .more{ margin: 0; padding: 15px 0 0;}
}

.list-product figure{ position: relative;}
.list-product figure:before{ display: block; padding-top: 100%; content: "";}
.list-product figure img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 100%; object-fit: cover;}

.list-product.lighting figure:before{ content: none;}
.list-product.lighting figure img{ position: relative; top: auto; right: auto; bottom: auto; height: auto;}

@media screen and (max-width: 1024px){
    .content > .list-product{ margin: 0; padding: 0 7px;}
}

.list-price{ display: flex; margin: -70px -10px 0; flex-wrap: wrap;}
.list-price > li{ padding: 160px 10px 0; width: 25%; text-align: center;}
.list-price figure{ position: relative;}
.list-price figcaption{ position: absolute; top: 0; left: 0; font-size: 1.2rem;}
.list-price .box{ padding: 60px 30px 0; min-height: 310px; border: 1px solid; text-align: left;}
.list-price .box h3{ letter-spacing: .2rem; font-weight: 600; font-size: 1.8rem;}
.list-price .box p{ margin: 15px 0 0; font-size: 1rem; line-height: 1.7;}
.list-price .dl{ display: inline-block; margin: 35px 0 0; text-align: center;}
.list-price .dl a{ display: flex; padding: 15px; border: 1px solid; text-decoration: none; letter-spacing: normal; font-size: 1rem; line-height: 1; align-items: center; justify-content: center;}
.list-price .dl span{ font-size: 1.8rem;}
.list-price .dl i{ display: inline-block; margin: 0 6px 0 12px; width: 15px;}
.list-price .dl i img{ vertical-align: middle;}
.list-price .dl + p{ margin: 10px 0 0; padding: 0 0 0 25px; text-align: left; font-size: 1.1rem;}

@media screen and (max-width: 1024px){
    .list-price{ margin: 0; padding: 0 7px;}
    .list-price > li{ padding: 60px 7px 0; width: 50%;}
    .list-price figcaption{ top: -10px; font-size: 1rem;}
    .list-price .box{ padding: 30px 15px 0; min-height: 280px;}
    .list-price .box h3{ font-size: 1.4rem;}
    .list-price .dl{ display: block; margin: 15px 0 0;}
    .list-price .dl a{ display: block; padding: 10px 0;}
    .list-price .dl small{ display: block; padding: 0 0 5px;}
    .list-price .dl span{ font-size: 1.6rem;}
    .list-price .dl i{ display: inline-block; margin: 0 5px 0 0; width: 10px;}
    .list-price .dl i img{ vertical-align: bottom;}
    .list-price .dl + p{ padding: 0; font-size: 1rem;}
}

/* sofa, dining table
--------------------------------------------------- */
.brand2 .ttl{ display: flex; flex-wrap: wrap; align-items: center;}
.brand2 .ttl .logo{ display: flex; width: 250px; flex-wrap: wrap; align-items: center;}
.brand2 .ttl.logo img{ max-width: none; width: 100%; vertical-align: middle;}
.brand2 .ttl .lead{ width: calc(100% - 250px); font-size: 2.4rem; line-height: 1.8;}

@media screen and (max-width: 1024px){
    .brand2 .ttl .logo{ width: 38%; flex-wrap: wrap; align-items: center;}
    .brand2 .ttl .lead{ width: 62%; font-size: 1.2rem; line-height: 1.5;}
}

.brand2 .about{ display: flex; flex-direction: row-reverse; margin: 45px 0 0; align-items: center; justify-content: space-between;}
.brand2 .about figure{ width: 685px;}
.brand2 .about .detail{ width: 365px; line-height: 2;}

@media screen and (max-width: 1024px){
    .brand2 .about{ flex-direction: column; margin: 30px 0 0;}
    .brand2 .about figure{ width: 100%;}
    .brand2 .about .detail{ padding: 15px 0 0; width: 100%;}
}

.brand2 .list-more{ margin: 30px 0 0;}

@media screen and (max-width: 1024px){
    .brand2 .list-more{ margin: 0;}
}

.brand2 .list-product figure{ position: relative;}
.brand2 .list-product figure:before{ display: block; padding-top: 100%; content: "";}
.brand2 .list-product figure img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 100%; object-fit: cover;}

@media screen and (max-width: 1024px){
    .brand2 .list-product{ margin: 0; padding: 0 7px;}
}

/* product single
--------------------------------------------------- */
.product-set{ display: flex; flex-direction: row-reverse;}
.product-set figure{ width: calc(100% - 380px);}
.product-set .product-detail{ padding: 0 30px 0 0; width: 380px;}

@media screen and (max-width: 1024px){
    .product-set{ display: block; margin: -30px 0 0;}
    .product-set figure{ width: 100%;}
    .product-set .product-detail{ padding: 30px 15px 0; width: 100%;}
}

.product-single h1{ font-size: 1.2rem;}
.product-single h1 span{ display: block; padding: 0 0 20px 0; font-weight: 300; font-size: 3rem; line-height: 1.3;}

@media screen and (max-width: 1024px){
    .product-single h1{ font-size: 1rem;}
    .product-single h1 span{ padding: 0 0 10px 0; font-size: 2rem; line-height: 1.5;}
}

.spec{ display: flex; padding: 40px 0 0; width: 380px; letter-spacing: normal; font-weight: 300; line-height: 1; flex-wrap: wrap; align-items: center;}
.spec dt{ padding: 20px 0 0; width: 85px; letter-spacing: .1rem; font-size: 1rem;}
.spec dd{ padding: 20px 0 0; width: calc(100% - 85px); font-size: 1.6rem;}
.spec dd i{ display: inline-block; margin: 0 6px 0 0; width: 15px;}
.spec dd .size{ display: flex; line-height: 1.2;}
.spec dd .size .set4 + .set4:before{ padding: 0 .5rem; content: "x";}
.spec dd .size .set4:last-child{ padding: 0 .5rem 0 0;}
.spec dd .price{ font-size: 2rem;}
.spec dd .price small{ font-size: 1.2rem;}
.spec dd.dl{ font-size: 2rem;}
.spec dd.dl a{ display: inline-block; border-bottom: 1px solid;}
.spec dd.dl a:hover{ border-color: #fff;}

@media screen and (max-width: 1024px){
    .spec{ padding: 30px 0 0; width: 100%;}
    .spec dt{ padding: 15px 0 0; width: 25%;}
    .spec dd{ padding: 15px 0 0; width: 75%; font-size: 1.4rem;}
    .spec dd .price{ font-size: 1.6rem;}
    .spec dd .price small{ font-size: 1rem;}
    .spec dd.dl{ font-size: 1.6rem;}
}

.set{ display: inline-block; padding: 10px 0 0; vertical-align: middle; line-height: 1.8;}
.set small{ display: inline-block; padding: 0 5px 0 0; vertical-align: text-bottom; font-size: 1rem;}
.set + .set{ margin: 0 0 0 10px;}
.set-wrap{ display: flex; margin: 0 0 0 -40px; flex-wrap: wrap;}
.set-wrap .set{ margin: 0; padding: 0 0 0 40px;}

@media screen and (max-width: 1024px){
    .set{ display: block; line-height: 1.5;}
    .set + .set{ margin: 0;}
    .set-wrap{ display: block; margin: 0; padding: 0;}
    .set-wrap .set{ padding: 0;}
}

.set2{ line-height: 1.8;}
.set2 small{ font-size: 1rem;}

@media screen and (max-width: 1024px){
}

.set3{ display: inline;}
.set3 + .set3:before{ content: "、";}

.list-app{ display: flex; margin: -15px -7px 0; flex-wrap: wrap;}
.list-app > li{ padding: 15px 7px 0; width: 50%;}
.list-app > li.ec{ padding: 0 7px; width: 100%;}
.list-app a{ display: block; height: 50px; border: 1px solid; text-align: center; text-decoration: none; letter-spacing: normal; font-size: 1.1rem; line-height: 50px;}
.list-app a:hover{ color: #9fa0a0;}
.list-app > li.ec a{ background: #666; color: #fff; font-size: 1.4rem;}
.list-app i{ display: inline-block; margin: 0 3px 0 0; width: 13px;}
.list-app > li.ec i{ margin: 0 5px 0 0; width: 15px;}
.list-app i img{ vertical-align: middle;}
.wrap-app{ padding: 75px 0 0;}
.wrap-app .list-app{ justify-content: center;}
.wrap-app .list-app > li{ padding: 0 7px; width: 25%;}
.wrap-app .list-app > li.ec{ width: auto;}
.wrap-app .list-app a{ padding: 0 15px;}
.product-set .list-app{ padding: 60px 0 0;}

@media screen and (max-width: 1024px){
    .wrap-app{ padding: 45px 0 0;}
    .wrap-app .list-app > li{ padding: 15px 7px 0; width: 100%;}
    .wrap-app .list-app > li:first-child{ width: 100%;}
    .wrap-app .list-app > li.fabric{ width: 100%;}
    .wrap-app .list-app > li.ec{ width: 100%;}
}

.product-single .detail{ margin: 60px 0 0; line-height: 1.8;}
.product-single .wrap-detail{ display: flex; margin: 20px 0 0; width: 100%; flex-wrap: wrap;}
.product-single .detail1{ width: calc(100% - 360px);}
.product-single .detail2{ width: 360px;}
.product-single .detail3{ margin: 40px 0 0; padding: 0 20px 0 0; width: 50%;}
.product-single .detail4{ margin: 40px 0 0; width: 50%;}
.product-single .detail3 + .detail4{ padding: 0 0 0 20px;}
.product-single .detail2 + .detail4{ margin: 0;}
.product-single .wrap-detail small{ font-size: 1rem;}
.product-single table{ width: 100%; line-height: 1.8;}
.product-single th{ padding: 40px 20px 0 0; width: 80px; vertical-align: middle; text-align: left; white-space: nowrap; font-size: 1rem;}
.product-single td{ padding: 40px 0 0; vertical-align: middle; font-size: 1.6rem;}
.product-single .detail2 td{ font-size: 2rem;}
.product-single table .note{ padding: 40px 40px 0 0; font-size: 1.4rem;}
.product-single .icon{ display: flex; margin: -20px -10px 0; padding: 40px 0 0; justify-content: flex-start; flex-wrap: wrap;}
.product-single .icon > li{ padding: 20px 10px 0;}
.product-single .icon > li div{ padding: 20px; border: 1px solid; text-align: center; font-size: 1.6rem;}
.product-single h3{ margin: 60px 0 0; font-size: 1.2rem;}
.product-single h4{ margin: 40px 0 0;}
.product-single .cat a{ display: inline-table; border-bottom: 1px solid; text-decoration: none; line-height: 1;}
.product-single .cat a:hover{ border-color: #fff;}
.product-single .list-app a{ text-decoration: none;}

@media screen and (max-width: 1024px){
    .product-single .detail{ margin: 30px 0 0; padding: 0 15px;}
    .product-single .wrap-detail{ display: block; margin: 30px 0 0; padding: 0 15px;}
    .product-single .detail1{ width: 100%;}
    .product-single .detail2{ width: 100%;}
    .product-single .detail3{ margin: 30px 0 0; padding: 0; width: 100%;}
    .product-single .detail4{ margin: 30px 0 0; padding: 0; width: 100%;}
    .product-single .detail3 + .detail4{ padding: 0;}
    .product-single .detail2 + .detail4{ margin: 30px 0 0;}
    .product-single th{ padding: 15px 0 0; width: 20%; vertical-align: middle;}
    .product-single td{ padding: 15px 0 0; vertical-align: top; font-size: 1.2rem;}
    .product-single .detail2 td{ font-size: 1.2rem;}
    .product-single table .note{ padding: 15px 0 0; font-size: 1rem;}
    .product-single .icon{ margin: -15px -7px 0; padding: 30px 0 0;}
    .product-single .icon > li{ padding: 15px 7px 0;}
    .product-single .icon > li div{ padding: 15px; font-size: 1.2rem;}
    .product-single h3{ margin: 30px 0 0; font-size: 1rem;}
    .product-single h4{ margin: 30px 0 0; font-size: 1rem;}
}

.logo-wrap{ display: flex; align-items: center; justify-content: flex-start;}
.logo-wrap .logo{ text-align: left; letter-spacing: .1rem; font-weight: 300; font-size: 2.4rem;}
.logo-wrap .logo a{ display: flex; flex-direction: column; line-height: 1.2;}
.logo-wrap .logo img{ width: auto; height: 120px;}
.logo-wrap .logo span{ font-size: 1rem;}

@media screen and (max-width: 1024px){
    .logo-wrap .logo{ font-size: 2rem;}
    .logo-wrap .logo img{ height: 60px;}
}

.list-txc{ display: flex; margin: 0 -10px; flex-wrap: wrap;}
.list-txc > li{ padding: 20px 10px 0; width: 10%;}
.list-txc a{ position: relative; display: block; text-decoration: none;}
.list-txc a:after{ position: absolute; bottom: 0; left: 0; width: 20px; height: 20px; background: url("/img/ico_zoom.svg") no-repeat 0 0 / contain; content: "";}
.list-txc h4{ margin: 10px 0 0; text-align: center; font-size: 1.2rem;}

@media screen and (max-width: 1024px){
    .list-txc{ margin: 0 -7px;}
    .list-txc > li{ padding: 15px 7px 0; width: 20%;}
    .list-txc a:after{ width: 12px; height: 12px;}
    .list-txc h4{ margin: 10px 0 0; font-size: 1rem;}
}

/* column
--------------------------------------------------- */
.column .content{ padding: 60px 0;}
.column .entry{ padding: 60px 0;}
.column .entry:after{ display: table; clear: both; content: "";}

@media screen and (max-width: 1024px){
    .column .content{ padding: 30px 0;}
    .column .entry{ padding: 30px 0;}
}

/* page
--------------------------------------------------- */
.page .content{ line-height: 1.8;}
.page .visual{ padding: 60px 0 0;}
.page .visual img{ max-width: 100%; width: auto;}
.page .lead{ font-size: 2.4rem;}
.page section p strong{ color: #b60005; font-size: 2rem;}
.page section p a{ text-decoration: underline;}
.page section p a:hover{ text-decoration: none;}
.page .float-s{ float: right; margin: 20px 0 0; width: 18%;}
.page .float-s + p{ margin: 40px 0 0; padding: 0 25% 0 0;}
.page .float-s + p + p{ margin: 20px 0 0; padding: 0 25% 0 0;}

@media screen and (max-width: 1024px){
    .page .visual{ padding: 30px 15px 0;}
    .page .lead{ font-size: 1.4rem;}
    .page section p strong{ font-size: 1.4rem;}
    .page section p + p{ margin: 10px 0 0;}
    .page .float-s{ float: none; margin: 15px 0 0; width: 100%;}
    .page .float-s img{ max-width: 100%; width: auto;}
    .page .float-s + p{ margin: 30px 0 0; padding: 0;}
    .page .float-s + p + p{ margin: 15px 0 0; padding: 0;}
}

.page .lead2{ margin: 20px 0 0; font-size: 1.8rem;}
.page .lead2 + p{ margin: 20px 0 0; font-size: 1.2rem;}
.page .notice{ display: flex; margin: 60px auto 0; width: 710px; justify-content: space-between;}
.page .notice figure{ width: 300px;}
.page .notice .detail{ width: 360px; text-align: left;}
.page .notice h3{ border-bottom: 1px solid; letter-spacing: .2rem; font-weight: 500; font-family: futura-pt, Futura, 'Century Gothic'; line-height: 1.5;}
.page .notice h3 span{ font-size: 3.6rem;}
.page .notice time{ margin: 5px 0 0; letter-spacing: .2rem; font-weight: 500; font-size: 2rem; font-family: futura-pt, Futura, 'Century Gothic';}
.page .notice h4{ margin: 10px 0 0; font-size: 1.8rem;}
.page .notice p{ margin: 10px 0 0; font-size: 1.2rem; line-height: 1.5;}
.page .notice + .logo{ margin: 60px 0 0;}
.page .notice + .logo img{ width: 110px;}
.page .list-live{ display: flex; margin: 20px auto 0; width: 940px; flex-wrap: wrap;}
.page .list-live > li{ padding: 8px 4px 0; width: 25%;}

@media screen and (max-width: 1024px){
    .page .lead2{ margin: 15px 0 0; text-align: center;}
    .page .lead2 + p{ margin: 15px 0 0; text-align: center;}
    .page .notice{ display: block; margin: 30px 0 0; width: 100%;}
    .page .notice figure{ width: 100%;}
    .page .notice figure img{ width: 100%;}
    .page .notice .detail{ margin: 15px 0 0; width: 100%; text-align: left;}
    .page .notice h3 span{ font-size: 3rem;}
    .page .notice time{ font-size: 1.6rem;}
    .page .notice h4{ font-size: 1.5rem;}
    .page .notice + .logo{ margin: 30px 0 0; text-align: center;}
    .page .notice + .logo img{ width: 25%;}
    .page .list-live{ margin: 15px 0 0; width: 100%;}
    .page .list-live > li{ padding: 8px 4px 0; width: 50%;}
}

.flex{ display: flex;}
.flex-center{ align-items: center;}
.flex .cont1{ padding: 0 40px 0 0; width: 280px;}
.flex .cont2{ width: calc(100% - 280px);}
.flex .cont1 h2{ font-size: 2.4rem;}
.flex .cont1 .ttl2{ font-size: 1.2rem;}
.flex .cont1 .ttl2 span{ padding: 0 0 20px;}
.flex .cont1 h3{ margin: 0; color: #000; line-height: 1;}
.flex .cont1 p{ margin: 20px 0 0; font-size: 1.2rem;}

@media screen and (max-width: 1024px){
    .flex{ display: block;}
    .flex .cont1{ padding: 0; width: 100%;}
    .flex .cont2{ padding: 30px 0 0; width: 100%;}
    .flex .cont1 h2{ font-size: 2rem;}
    .flex .cont1 h2 br{ display: none;}
    .flex .cont1 p{ margin: 10px 0 0;}
    .flex .cont1 .ttl2 + p{ margin: 0;}
    .flex .cont1 .ttl2 + p br{ display: none;}
}

.list-cont{ display: flex; margin: -40px -10px 0; flex-wrap: wrap;}
.list-cont + .list-cont{ padding: 40px 0 0;}
.list-cont > li{ padding: 40px 10px 0; width: calc(100% / 3);}
.list-cont > li:first-child{ width: 100%;}
.list-cont figure{ width: 100%;}
.list-cont h3{ margin: 20px 0 0;}
.list-cont p{ margin: 10px 0 0; font-size: 1.2rem;}
.list-cont .read{ margin: 10px 0 0;}
.list-cont .read a{ position: relative; padding: 0 0 0 15px; color: #4c4948;}
.list-cont .read a:after{ position: absolute; top: 50%; left: 0; border-width: 5px 0 5px 6px; border-style: solid; border-color: transparent transparent transparent #4c4948; content: ""; transform: translate(0,-50%);}

@media screen and (max-width: 1024px){
    .list-cont{ margin: -30px -7px 0;}
    .list-cont + .list-cont{ padding: 30px 0 0;}
    .list-cont > li{ padding: 30px 7px 0; width: 50%;}
    .list-cont > li:first-child{ width: 100%;}
    .list-cont h3{ margin: 15px 0 0; font-size: 1.4rem;}
}

.list-cont2{ display: flex; margin: 0 -10px; flex-wrap: wrap;}
.list-cont2 > li{ padding: 0 10px; width: 50%;}
.list-cont2 p{ margin: 10px 0 0; font-size: 1.2rem;}

@media screen and (max-width: 1024px){
    .list-cont2{ display: block; margin: 0;}
    .list-cont2 > li{ padding: 30px 0 0; width: 100%;}
}

.page .box{ border: 1px solid;}
.page .box a{ display: flex; width: 100%; height: 75px; text-decoration: none; line-height: 1; justify-content: center; align-items: center; flex-wrap: wrap; align-content: center;}
.page .box a:hover{ color: #9fa0a0;}
.page .box-mailmagazine a{ height: 125px;}
.page .box-mailmagazine a:hover{ color: #9fa0a0;}
.page .box small{ display: block; padding: 15px 0 0; width: 100%; text-align: center; font-size: 1.2rem;}
.page .box i{ display: inline-block; margin: 0 10px 0 0; height: 15px;}
.page .box i img{ width: auto; height: 100%; vertical-align: bottom;}
.page .box i.dl{ height: 60px;}

@media screen and (max-width: 1024px){
    .page .box a{ padding: 15px 5px; height: auto; font-size: 1.2rem;}
    .page .box-mailmagazine a{ height: auto;}
    .page .box small{ padding: 10px 0 0; font-size: 1rem; line-height: 1.5;}
    .page .box i{ margin: 0 5px 0 0; height: 13px;}
    .page .box i.dl{ height: 60px;}
}

.page .box2{ margin: 40px 0 0;}
.page .box2 a{ display: inline-block; padding: 30px; border: 1px solid; text-decoration: none; line-height: 1;}
.page .box2 a:hover{ color: #9fa0a0;}
.page .box2 span{ padding: 0 30px 0 0; font-weight: 300; font-size: 3rem;}

@media screen and (max-width: 1024px){
    .page .box2{ margin: 15px 0 0;}
    .page .box2 a{ display: block; padding: 15px; text-align: center; line-height: 1.5;}
    .page .box2 span{ display: block; padding: 0; text-align: center; font-size: 1.8rem;}
}

@media screen and (max-width: 1024px){
    .company .ttl + .main{ margin: 30px -15px 0;}
}

.block-float{ display: flex; margin: 40px 0 0; flex-wrap: wrap;}
.flex .cont2 .block-float{ margin: 0;}
.block-float figure{ padding: 0 50px 0 0; width: 50%;}
.block-float .detail{ width: 50%;}
.block-float h3{ font-size: 2.4rem;}
.block-float .small{ font-size: 1.2rem;}
.block-float p strong{ display: block; padding: 0 0 10px; color: #000; font-size: 1.4rem;}
.block-float .more{ text-align: left;}

@media screen and (max-width: 1024px){
    .block-float{ margin: 30px 0 0; align-items: flex-start;}
    .block-float figure{ padding: 0 15px 10px 0;}
    .block-float h3{ font-size: 1.4rem;}
    .block-float .small{ font-size: 1rem;}
    .block-float p strong{ font-size: 1.2rem;}
    .block-float .more{ margin: 15px 0 0;}
    
    .company .block-float{ display: block;}
    .company .block-float:after{ display: table; clear: both; content: "";}
    .company .block-float figure{ float: left; padding: 0 15px 15px 0;}
}

.block-float2 figure{ width: 40%; text-align: center;}
.block-float2 figure img{ width: 85%;}
.block-float2 .detail{ width: 60%;}
.block-float2 p{ font-size: 1.2rem;}

@media screen and (max-width: 1024px){
    .block-float2 figure{ width: 50%;}
    .block-float2 figure img{ width: 85%;}
    .block-float2 .detail{ width: 50%;}
    .block-float2 p{ font-size: 1.2rem;}
}

.block-mission{ display: flex; flex-direction: column; margin: 50px 0 0; padding: 60px; background: url("/img/company/companytop_main.jpg") no-repeat center / cover; font-weight: 500; justify-content: space-between;}
.block-mission dl{ color: #fff;}
.block-mission dt{ display: inline-block; border-bottom: 2px solid; font-size: 1.6rem;}
.block-mission dd{ padding: 10px 0 0; font-size: 2rem;}
.block-mission dl + dl{ padding: 100px 0 0;}
.block-mission dl + dl dd{ font-size: 1.4rem;}

@media screen and (max-width: 1024px){
    .block-mission{ margin: 30px -15px 0; padding: 40px 20px 80px; height: calc(100vh - 65px); background: url("/img/company/companytop_mainsp.jpg") no-repeat center / cover; justify-content: flex-start;}
    .block-mission dt{ font-size: 1.4rem;}
    .block-mission dd{ padding: 10px 0 0; font-size: 1.4rem;}
    .block-mission dl + dl{ padding: 30px 0 0;}
    .block-mission dl + dl dd{ font-size: 1rem;}
}

.block-message{ margin: 40px 0 0;}
.block-message:after{ display: table; clear: both; content: "";}
.block-message figure{ float: left; padding: 0 50px 0 0; width: 50%;}
.block-message h3{ font-size: 2.4rem;}
.block-message p{ margin: 40px 0 0;}

@media screen and (max-width: 1024px){
    .block-message{ margin: 30px 0 0;}
    .block-message figure{ padding: 0 15px 0 0; width: 52%;}
    .block-message h3{ font-size: 1.4rem;}
    .block-message p{ margin: 10px 0 0;}
}

.read{ margin: 10px 0 0;}
.read a{ position: relative; padding: 0 0 0 15px; color: #4c4948; text-decoration: underline;}
.read a:after{ position: absolute; top: 50%; left: 0; border-width: 5px 0 5px 6px; border-style: solid; border-color: transparent transparent transparent #4c4948; content: ""; transform: translate(0,-50%);}
.read a:hover{ text-decoration: none;}

.list-point{ display: flex; margin: -40px -60px 0; padding: 40px 0 0; flex-wrap: wrap;}
.list-point > li{ padding: 40px 60px 0; width: 50%; counter-increment: point;}
.list-point h3{ color: #b60005; font-size: 1.6rem;}
.list-point h3:before{ padding: 0 20px 0 0; color: #000; content: counter(point, decimal-leading-zero); font-weight: 300; font-size: 2.4rem;}
.list-point p{ margin: 10px 0 0;}

@media screen and (max-width: 1024px){
    .list-point{ display: block; margin: 0; padding: 0;}
    .list-point > li{ padding: 30px 0 0; width: 100%;}
    .list-point h3{ font-size: 1.4rem;}
    .list-point h3:before{ padding: 0 10px 0 0; font-size: 1.6rem;}
}

.list-step{ display: flex; margin: -40px -60px 0; padding: 40px 0 0; flex-wrap: wrap;}
.list-step > li{ padding: 40px 60px 0; width: 50%; counter-increment: point;}
.list-step h3{ color: #b60005; font-size: 1.6rem;}
.list-step > li h3:before{ padding: 0 20px 0 0; color: #000; content: "STEP" counter(point); font-weight: 300; font-size: 2.4rem;}
.list-step p{ margin: 10px 0 0;}

@media screen and (max-width: 1024px){
    .list-step{ display: block; margin: 0; padding: 0;}
    .list-step > li{ padding: 30px 0 0; width: 100%;}
    .list-step h3{ font-size: 1.4rem;}
    .list-step > li h3:before{ padding: 0 10px 0 0; font-size: 1.6rem;}
}

.wrap-qa{ display: flex; margin: -40px -20px 0; padding: 40px 0 0; flex-wrap: wrap;}
.wrap-qa dl{ padding: 40px 20px 0; width: 50%; font-size: 1.6rem;}
.wrap-qa dt{ position: relative; padding: 0 0 0 50px;}
.wrap-qa dd{ position: relative; margin: 20px 0 0; padding: 0 0 0 50px; color: #b60005;}
.wrap-qa dt:before{ position: absolute; top: -.4rem; left: 0; content: "Q."; font-weight: 300; font-size: 2.4rem; line-height: normal;}
.wrap-qa dd:before{ position: absolute; top: -.4rem; left: 0; content: "A."; font-weight: 300; font-size: 2.4rem; line-height: normal;}

@media screen and (max-width: 1024px){
    .wrap-qa{ display: block; margin: 0; padding: 0;}
    .wrap-qa dl{ padding: 30px 0 0; width: 100%; font-size: 1.4rem;}
    .wrap-qa dt{ padding: 0 0 0 30px;}
    .wrap-qa dd{ margin: 10px 0 0; padding: 0 0 0 30px;}
    .wrap-qa dt:before{ top: .2rem; font-size: 1.6rem;}
    .wrap-qa dd:before{ top: .2rem; font-size: 1.6rem;}
}

.list-table{ margin: -10px 0 0; padding: 40px 0 0; line-height: 1.5;}
.list-table > li{ position: relative; display: flex; padding: 10px 0; justify-content: space-between;}
.list-table > li:before{ position: absolute; top: 20px; left: 0; z-index: -1; width: 100%; height: 1px; background: #f1f1f1; content: "";}
.list-table span{ display: inline-block; padding: 0 20px 0 0; background: #fff;}
.list-table span + span{ padding: 0 0 0 20px;}

@media screen and (max-width: 1024px){
    .list-table{ margin: -5px 0 0; padding: 30px 0 0; font-size: 1rem;}
    .list-table > li{ padding: 5px 0;}
    .list-table > li:before{ top: 15px;}
    .list-table span{ padding: 0 10px 0 0;}
    .list-table span + span{ padding: 0 0 0 10px;}
}
 
.type1{ margin: 40px 0 0; width: 100%; border: 1px solid #f1f1f1; line-height: 1.5;}
.type1 th{ padding: 20px; border: 1px solid #f1f1f1; text-align: left;}
.type1 thead th{ font-size: 1.2rem;}
.type1 td{ padding: 20px; border: 1px solid #f1f1f1; text-align: left;}

@media screen and (max-width: 1024px){
    .type1{ margin: 15px 0 0;}
    .type1 th{ padding: 7px;}
    .type1 thead th{ font-size: 1rem;}
    .type1 td{ padding: 7px;}
}

.page .note{ padding: 40px 0; border: 1px solid; text-align: center;}
.page .note strong{ display: inline-block; padding: 0 .5rem; color: #b60005; font-size: 2.4rem;}

@media screen and (max-width: 1024px){
    .page .note{ padding: 15px;}
    .page .note strong{ font-size: 1.6rem;}
}

.list-imp{ margin: -5px 0 0; padding: 20px 0 0;}
.list-imp > li{ padding: 5px 0 0; padding-left: 1em; text-indent: -1em;}

@media screen and (max-width: 1024px){
    .list-imp{ padding: 15px 0 0;}
}

.list-contact{ display: flex; margin: -80px -20px 0; flex-wrap: wrap;}
.list-contact > li{ padding: 80px 20px 0; width: 50%;}
.list-contact h2 + p{ margin: 20px 0 0;}
.list-contact p{ min-height: 80px;}
.list-contact .box a{ padding: 20px 0;}

@media screen and (max-width: 1024px){
    .list-contact{ display: block; margin: -30px 0 0;}
    .list-contact > li{ padding: 30px 0 0; width: 100%;}
    .list-contact h2 + p{ margin: 20px 0 0;}
    .list-contact p{ min-height: 0;}
    .list-contact .box{ margin: 15px 0 0;}
    .list-contact .box a{ padding: 20px 0;}
}

.toggle{ margin: 20px 0 0; border-top: 1px solid #f0f1f1; font-size: 1.6rem;}
.toggle dt{ position: relative; padding: 15px 0 15px 50px; border-bottom: 1px solid #f0f1f1; cursor: pointer;}
.toggle dt:before{ position: absolute; top: 5px; left: 0; content: "Q."; font-weight: 300; font-size: 2.4rem;}
.toggle dt:after{ position: absolute; top: 50%; right: 0; width: 27px; height: 11px; background: url("/img/ico_arrow2.svg") no-repeat center / contain; content: ""; font-weight: 300; font-size: 3rem; transition: all .1s ease; transform: translate(0,-50%);}
.toggle dt.active:after{ transform: translate(0,-50%) rotate(90deg);}
.toggle dd{ display: none; padding: 15px 0 15px 50px; border-bottom: 1px solid #f0f1f1; font-size: 1.4rem;}

@media screen and (max-width: 1024px){
    .toggle{ margin: 15px 0 0; font-size: 1.2rem;}
    .toggle dt{ padding: 15px 45px 15px 30px;}
    .toggle dt:before{ top: 8px; font-size: 1.8rem;}
    .toggle dd{ padding: 15px 0 15px 30px; font-size: 1.2rem;}
}

.info-block{ border-top: 1px solid #f0f1f1; line-height: 1.8;}
.content > .info-block:first-of-type{ border: none;}
.info-block .entry{ padding: 40px 0 0;}
.info-block .entry h2{ margin: 40px 0 0; font-weight: 600; font-size: 2rem;}
.info-block .entry h3{ margin: 40px 0 0; font-weight: 600; font-size: 1.6rem;}
.info-block .entry h4{ margin: 40px 0 0; font-weight: 600;}
.info-block .entry > p:first-child{ margin: 0;}
.info-block .entry p + p{ margin: 20px 0 0;}

.info-block .entry2{ padding: 40px 0 0;}
.info-block .entry2 h3{ font-weight: bold; font-size: 1.8rem;}
.info-block .entry2 figure{ margin: 20px 0 0;}
.info-block .entry2 figure img{max-width: 100%; width: auto; height: auto;}
.info-block .entry2 p{ margin: 20px 0 0;}
.info-block .box{ margin: 40px 0 0; padding: 20px; border: 1px solid; text-align: center;}
.info-block .box h4{ font-weight: bold; font-size: 1.6rem;}
.info-block .box h4 + p{ margin: 20px 0 0;}

@media screen and (max-width: 1024px){
    .info-block .entry{ padding: 30px 0 0;}
    .info-block .entry h2{ margin: 30px 0 0; font-size: 1.4rem;}
    .info-block .entry h3{ margin: 30px 0 0; font-size: 1.2rem;}
    .info-block .entry h4{ margin: 15px 0 0; font-size: 1.2rem;}
    .info-block .entry p + p{ margin: 10px 0 0;}
    .info-block .entry2{ padding: 30px 0 0;}
    .info-block .entry2 h3{ font-size: 1.4rem;}
    .info-block .entry2 figure{ margin: 10px 0 0;}
    .info-block .entry2 p{ margin: 10px 0 0;}
    .info-block .box{ margin: 30px 0 0; padding: 15px;}
    .info-block .box h4{ font-size: 1.3rem;}
    .info-block .box h4 + p{ margin: 10px 0 0;}
}

.flex .main{ width: 540px;}
.flex .main figure img{ width: 100%;}
.flex .main .thumbs{ display: flex; margin: 0 -5px;}
.flex .main .thumbs > li{ padding: 20px 5px 0; width: calc(20%);}
.flex .main .thumbs a{ position: relative; display: block; padding-top: 100%; width: 100%;}
.flex .main .thumbs a img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.flex .entry{ padding: 0 0 0 50px; width: calc(100% - 540px); line-height: 1.8;}
.flex .entry .block1{ font-size: 1.6rem;}
.flex .entry .block2{ padding: 40px 0 0;}
.flex .entry p + p{ margin: 20px 0 0;}
.flex .entry h3{ font-size: 2rem;}
.flex .entry h3 + p{ margin: 40px 0 0;}
.flex .entry .box{ margin: 40px 0 0;}

@media screen and (max-width: 1024px){
    .flex .main{ width: 100%;}
    .flex .main .thumbs{ margin: 0 -5px;}
    .flex .main .thumbs > li{ padding: 10px 5px 0;}
    .flex .entry{ margin: 30px 0 0; padding: 0; width: 100%;}
    .flex .entry .block1{ font-size: 1.4rem;}
    .flex .entry .block2{ padding: 15px 0 0;}
    .flex .entry p + p{ margin: 10px 0 0;}
    .flex .entry h3{ font-size: 1.4rem;}
    .flex .entry h3 + p{ margin: 30px 0 0;}
}

.body{ margin: 40px 0 0;}
.block-media{ margin: 60px 0 0;}
.block-media .exp h3{ margin: 40px 0 0; font-size: 2rem;}
.block-media .exp h4{ margin: 40px 0 0; font-size: 1.6rem;}
.block-media .exp p{ margin: 20px 0 0;}
.block-media .exp h3 + p{ margin: 10px 0 0;}
.block-media .exp h4 + p{ margin: 10px 0 0;}
.note-media{ margin: 40px 0 0;}
.block-media img{ width: 100%;}
.block-media .video{ position: relative; overflow: hidden; padding-top: 56.25%;}
.block-media iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media screen and (max-width: 1024px){
    .body{ margin: 15px 0 0;}
    .block-media{ margin: 30px 0 0;}
    .slider-gallery2-wrap + .block-media{ margin: 75px 0 0;}
    .block-media .exp h3{ margin: 30px 0 0; font-size: 1.4rem;}
    .block-media .exp h4{ margin: 15px 0 0; font-size: 1.2rem;}
    .block-media .exp p{ margin: 10px 0 0;}
    .note-media{ margin: 30px 0 0;}
}

.wrap-price{ display: flex; margin: -120px -10px 0; padding: 120px 0 0; flex-wrap: wrap;}
.wrap-price .cont{ padding: 120px 10px 0; width: 50%;}
.wrap-price .cont:last-child{ padding: 150px 10px 0;}
.wrap-price h3{ position: relative; padding: 0 0 50px; border-bottom: 1px solid #f0f1f1; text-align: center; cursor: pointer;}
.wrap-price h3:after{ position: absolute; bottom: -10px; left: 50%; border-width: 10px 10px 0 10px; border-style: solid; border-color: #f0f1f1 transparent transparent transparent; content: ""; transform: translate(-50%,0);}
.wrap-price h3 span{ display: block; padding: 0 0 30px; font-weight: 300; font-size: 3rem;}
.wrap-price .acd{ display: none;}
.wrap-price .acd.active{ display: block;}
.wrap-price h4{ padding: 40px 0 0;}
.wrap-price h4 + .list-table{ padding: 20px 0 0;}
.wrap-price .box{ margin: 20px 0 0;}

@media screen and (max-width: 1024px){
    .wrap-price{ display: block; margin: 0; padding: 0;}
    .wrap-price .cont{ padding: 30px 0 0; width: 100%;}
    .wrap-price .cont:last-child{ padding: 30px 0 0;}
    .wrap-price h3{ padding: 0 0 30px;}
    .wrap-price h3 span{ padding: 0; font-size: 2rem;}
    .wrap-price h4{ padding: 30px 0 0;}
    .wrap-price h4 + .list-table{ padding: 15px 0 0;}
    .wrap-price .box{ margin: 15px 0 0;}
}

.page .name{ margin: 60px 0 0;}
.page .name img{ width: auto;}

@media screen and (max-width: 1024px){
    .page .name{ margin: 30px 0 0;}
}

.dl-table{ display: flex; margin: -20px 0 0; flex-wrap: wrap;}
.dl-table dt{ padding: 20px 0; width: 20%; border-bottom: 1px solid #f0f1f1;}
.dl-table dd{ padding: 20px 0; width: 80%; border-bottom: 1px solid #f0f1f1;}

@media screen and (max-width: 1024px){
    .dl-table{ margin: -15px 0 0;}
    .dl-table dt{ padding: 15px 0; width: 30%;}
    .dl-table dd{ padding: 15px 0; width: 70%;}
}

.list-link{ margin: -10px 0 0; padding: 40px 0 0;}
.list-link > li{ padding: 10px 0 0;}
.list-link > li a{ position: relative; padding: 0 0 0 14px;}
.list-link > li a:after{ position: absolute; top: 50%; left: 0; border-width: 4px 0 4px 6px; border-style: solid; border-color: transparent transparent transparent #4c4948; content: ""; transform: translate(0,-50%);}
.list-link > li i{ display: inline-block; margin: 0 0 0 10px; height: 12px;}
.list-link > li i img{ width: auto; height: 100%; vertical-align: baseline;}

@media screen and (max-width: 1024px){
    .list-link{ padding: 30px 0 0;}
    .list-link > li i{ height: 10px;}
    .list-link > li i img{ height: 100%;}
}

@media screen and (max-width: 1024px){
    .page .content nav{ padding: 0 15px;}
    .page .content nav .row3{ display: block; margin: 0;}
    .page .content nav .row3 > li{ padding: 15px 0 0; width: 100%;}
    .page .content nav .row2{ margin: -15px -7px 0; padding: 0;}
    .page .content nav .row2 > li{ padding: 15px 7px 0;}
}

.movie{ position: relative; padding-top: 56.25%; width: 100%;}
.movie iframe{ position: absolute; top: 0; right: 0; width: 100%; height: 100%}
p + .movie{ margin: 40px 0 0;}

@media screen and (max-width: 1024px){
    p + .movie{ margin: 15px 0 0;}
}

/* variation
--------------------------------------------------- */
.variation h2{ margin: 60px 0 0; font-size: 2.4rem;}
.variation h3{ margin: 45px 0 0;}

@media screen and (max-width: 1024px){
    .variation{ padding: 0 15px;}
    .variation h2{ margin: 30px 0 0; font-size: 1.8rem;}
    .variation h3{ margin: 15px 0 0;}
}

/* layout
--------------------------------------------------- */
.ttl + .flex-center{ margin: 60px 0 0;}
.ttl + .lead{ margin: 40px 0 0;}
.ttl + figure.main{ margin: 40px 0 0;}
.ttl + p{ margin: 40px 0 0;}
.ttl + .list-cont2,
.ttl + p + .list-cont2{ margin: 40px 0 0;}
.ttl-s + p{ margin: 40px 0 0;}
.ttl-s + .list-cont2{ padding: 40px 0 0;}
.ttl-s + .note{ margin: 40px 0 0;}
.ttl-s2 + h4{ margin: 10px 0 0;}
.ttl-s2 + p{ margin: 20px 0 0;}
.ttl-s2 + .list-table{ padding: 20px 0 0;}
.ttl-center + .lead{ margin: 20px 0 0;}
figure.main + .lead{ margin: 100px 0 0;}
figure.main + p{ margin: 40px 0 0;}
figure.main + .flex{ margin: 100px 0 0;}
.list-imp + .note{ margin: 60px 0 0;}
.list-imp + .list-cont2{ margin: 60px 0 0;}
.list-table + p{ margin: 20px 0 0;}
.block-float + .list-cont2{ margin: 60px 0 0;}
.page figure.main img{ width: 100%;}
.page table + .note{ margin: 60px 0 0;}
.page .note + p{ margin: 20px 0 0;}
.page .bn{ margin: 40px 0 0;}
.more + .list-cont2{ margin: 60px 0 0;}
.flex-center + figure{ margin: 60px 0 0;}
.ttl-s2 + p + figure{ margin: 60px 0 0;}
.lead + p{ margin: 60px 0 0;}

@media screen and (max-width: 1024px){
    .ttl + .flex-center{ margin: 30px 0 0;}
    .ttl + .lead{ margin: 30px 0 0;}
    .ttl + figure.main{ margin: 30px 0 0;}
    .ttl + p{ margin: 15px 0 0;}
    .ttl + .list-cont2,
    .ttl + p + .list-cont2{ margin: 0;}
    .ttl-s + p{ margin: 15px 0 0;}
    .ttl-s + .list-cont2{ padding: 30px 0 0;}
    .ttl-s + .note{ margin: 15px 0 0;}
    .ttl-s2 + h4{ margin: 10px 0 0;}
    .ttl-s2 + p{ margin: 10px 0 0;}
    .ttl-s2 + .list-table{ padding: 15px 0 0;}
    .ttl-center + .lead{ margin: 10px 0 0; text-align: center;}
    figure.main + .lead{ margin: 30px 0 0;}
    figure.main + p{ margin: 30px 0 0;}
    figure.main + .flex{ margin: 100px 0 0;}
    .list-imp + .note{ margin: 30px 0 0;}
    .list-imp + .list-cont2{ margin: 30px 0 0;}
    .list-table + p{ margin: 10px 0 0;}
    .block-float + .list-cont2{display: flex; margin: 0 -7px;}
    .block-float + .list-cont2 > li{ padding: 30px 7px 0; width: 50%;}
    .page table + .note{ margin: 30px 0 0;}
    .page .note + p{ margin: 10px 0 0;}
    .page .bn{ margin: 30px 0 0;}
    .more + .list-cont2{ margin: 0; padding: 0 15px;}
    .flex-center + figure{ margin: 30px 0 0;}
    .ttl-s2 + p + figure{ margin: 30px 0 0;}
    .lead + p{ margin: 30px 0 0;}
    .ttl-center + .lead + p{ margin: 30px 0 0;}
}

/* brand page
--------------------------------------------------- */
.brand-page{ padding: 60px 0; width: 100%; line-height: 1.8;}
.brand-page.eilersen,
.brand-page.porada,
.brand-page.five,
.brand-page.natadora{ font-family: 'Noto Serif JP', serif;}

.fix{ position: fixed; top: 50%; left: 0; z-index: 98; width: 100vh; transform: translate(-50%,0);}
.fix .inner{ display: flex; padding: 0 0 120px; transform: rotate(90deg); align-items: flex-end; justify-content: center;}
.brand-page.eilersen .fix .inner{ margin: -55px 0 0;}
.brand-page.porada .fix .inner{ margin: -55px 0 0;}
.brand-page.tecta .fix .inner{ margin: -55px 0 0;}
.brand-page.eilersen .fix .logo img{ height: 50px;}
.brand-page.porada .fix .logo img{ height: 30px;}
.brand-page.tecta .fix .logo img{ height: 22px;}
.brand-page.five .fix .logo img{ height: 22px;}
.brand-page.natadora .fix .logo img{ height: 24px;}
.fix p{ padding: 0 0 0 30px; font-size: 1rem;}

@media screen and (max-width: 1024px){
    .brand-page{ padding: 30px 0;}
    .fix{ display: none;}
}

/*
.brand-page .shopnews{ margin: 0 0 0 auto; padding: 0 0 70px; width: calc(50% + 160px + 445px - 60px);}
.brand-page .shopnews figure{ position: relative; overflow: hidden;}
.brand-page .shopnews figcaption{ position: absolute; top: 0; left: 0; width: 100%;}
.brand-page .shopnews dl{ width: 1100px;}
.brand-page .shopnews dt{ margin: 25px 0 0; letter-spacing: .22em; font-size: 2.8rem; line-height: 1.28;}
.brand-page .shopnews dd{ margin: 15px 0 0; text-align: justify; letter-spacing: .22em; font-size: 1.8rem; line-height: 1.88;}

@media screen and (max-width: 1024px){
    .brand-page .shopnews{ margin: 0; padding: 0 40px 40px; width: 100%;}
    .brand-page .shopnews figure{ margin: 0 -40px;}
    .brand-page .shopnews figure + div{ padding: 20px 0 0;}
    .brand-page .shopnews dl{ padding: 20px 0 0; width: 100%;}
    .brand-page .shopnews dt{ margin: 0; text-align: justify; font-size: 1.4rem;}
    .brand-page .shopnews dd{ letter-spacing: normal; font-size: .9rem;}
}
*/

.brand-page .shopnews{ margin: -60px 0 0;}
.brand-page .shopnews img{ max-width: none; width: 100%;}
.brand-page .shopnews p{ margin: 50px 0 0; padding: 0 4.814vw; letter-spacing: .1em; font-weight: 700; font-size: 1.8rem; line-height: 1.88;}

@media screen and (max-width: 1024px){
    .brand-page .shopnews{ margin: -30px 0 0;}
    .brand-page .shopnews p{ margin: 30px 0 0; padding: 0 8vw; font-size: 1.4rem;}
}

.brand-page .shopnews + section{ padding: 120px 0 90px;}

@media screen and (max-width: 1024px){
    .brand-page .shopnews + section{ padding: 60px 0 60px;}
    .brand-page .shopnews + section h2{ padding: 0 15px;}
    .brand-page .shopnews + section h3{ padding: 0 15px;}
}

.act-ltor { opacity: 0; transform: translateX(30px); animation: 2s fadeltor 1s forwards;}
@keyframes fadeltor {
    0% { opacity: 0; transform: translateX(30px);}
    100% { opacity: 1; transform: translateX(0);}
}

.brand-page header{ display: flex; flex-direction: row-reverse; padding: 0 0 60px; align-items: center;}
.brand-page header figure{ width: calc(50% + 160px)}
.brand-page header .detail{ z-index: 2; margin: 0 -60px 0 0; width: 445px;}
.brand-page header h1.el img{ height: 146px;}
.brand-page header h1.porada img{ height: 91px;}
.brand-page header h1.tecta img{ height: 97px;}
.brand-page header h1.five img{ height: 81px;}
.brand-page header h1.natadora img{ height: 44px;}
.brand-page header .lead{ font-weight: 700; font-size: 3rem;}
.brand-page header .el + .lead{ margin: 75px 0 0;}
.brand-page header .porada + .lead{ margin: 90px 0 0;}
.brand-page header .tecta + .lead{ margin: 150px 0 0;}
.brand-page header .five + .lead{ margin: 50px 0 0; white-space: nowrap; letter-spacing: normal;}
.brand-page header .natadora + .lead{ margin: 115px 0 0;}
.brand-page header p{ font-weight: 300;}
.brand-page header .lead + p{ margin: 90px 0 0;}
.brand-page header .five + .lead + p{ margin: 50px 0 0;}
.brand-page header .natadora + .lead + p{ margin: 75px 0 0;}
.brand-page header p + p{ margin: 65px 0 0;}
.brand-page header p i{ display: inline-block; margin: 0 0 0 10px; height: 12px;}
.brand-page header p i img{ width: auto; height: 100%; vertical-align: baseline;}

@media screen and (max-width: 1024px){
    .brand-page header{ position: relative; flex-direction: column; padding: 0 0 30px;}
    .brand-page header figure{ width: 100%; text-align: right;}
    .brand-page header figure img{ width: 82%;}
    .brand-page header .detail{ margin: 0; padding: 0 15px; width: 100%;}
    .brand-page header h1{ position: absolute; top: 15%; left: 15px;}
    .brand-page header h1.five{ top: 5%;}
    .brand-page header h1.natadora{ top: 6.5%;}
    .brand-page header h1.el img{ height: 65px;}
    .brand-page header h1.porada img{ height: 35px;}
    .brand-page header h1.tecta img{ height: 25px;}
    .brand-page header h1.five img{ height: 30px;}
    .brand-page header h1.natadora img{ height: 22px;}
    .brand-page header .lead{ margin: 0; font-size: 1.8rem;}
    .brand-page header .el + .lead{ margin: -45px 0 0;}
    .brand-page header .porada + .lead{ margin: 15px 0 0;}
    .brand-page header .tecta + .lead{ margin: 45px 0 0;}
    .brand-page header .five + .lead{ margin: 30px 0 0; white-space: normal;}
    .brand-page header .natadora + .lead{ margin: 30px 0 0;}
    .brand-page header .lead + p{ margin: 30px 0 0;}
    .brand-page header .five + .lead + p{ margin: 30px 0 0;}
    .brand-page header .natadora + .lead + p{ margin: 30px 0 0;}
    .brand-page header p + p{ margin: 15px 0 0;}
    .brand-page header p i{ display: inline-block; margin: 0 0 0 10px; height: 12px;}
}

.brand-page h2{ letter-spacing: .2rem; font-weight: 700; font-size: 4.2rem; line-height: 1.2;}
.brand-page.eilersen h2,
.brand-page.porada h2,
.brand-page.five h2,
.brand-page.natadora h2{ font-family: 'EB Garamond', serif;}
.brand-page h3{ margin: 75px 0 0; font-weight: 700; font-size: 2.4rem;}
.brand-page.natadora h3{ margin: 115px 0 0; text-align: center;}
.brand-page.eilersen h3 span{ display: block;}
.brand-page p{ font-weight: 300;}
.brand-page p a{ text-decoration: underline;}
.brand-page h2 + p{ margin: 75px 0 0;}
.brand-page.eilersen .ld{ margin: 30px 0 0; font-weight: 700; font-size: 2.4rem;}
.brand-page h3 + p{ margin: 30px 0 0;}
.brand-page p + p{ margin: 30px 0 0;}
.brand-page.natadora h3 + p{ text-align: center;}
.brand-page .hero + p{ margin: 60px 0 0;}

@media screen and (max-width: 1024px){
    .brand-page h2{ font-size: 2.1rem;}
    .brand-page h3{ margin: 45px 0 0; font-size: 1.6rem;}
    .brand-page.natadora h3{ margin: 60px 0 0;}
    .brand-page h2 + p{ margin: 30px 0 0;}
    .brand-page.eilersen .ld{ margin: 15px 0 0; font-size: 1.6rem;}
    .brand-page h3 + p{ margin: 15px 0 0;}
    .brand-page p + p{ margin: 15px 0 0;}
    .brand-page.natadora h3 + p{ text-align: left;}
    .brand-page .hero + p{ margin: 45px 0 0;}
}

.brand-page .row2{ margin: -80px -40px 0; padding: 75px 0 0;}
.brand-page .row2 > li{ padding: 80px 40px 0;}
.brand-page .row2 h4{ text-align: center; font-size: 2.8rem;}
.brand-page.eilersen .row2 h4{ font-family: 'EB Garamond', serif;}
.brand-page.eilersen .row2 h4 span{ display: block; font-size: 2rem;}
.brand-page .row2 h4 + figure{ margin: 30px 0 0;}
.brand-page .row2 p{ margin: 15px 0 0; font-size: 1.2rem;}
.brand-page .wide{ width: 100%;}
.brand-page .wide .inner{ margin: 0 auto; width: 1100px;}
.brand-page .wide .inner + figure{ margin: 50px 0 0;}
.brand-page .wide figure + .inner{ margin: 65px auto 0;}
.brand-page .wide .inner + .flex-wide{ margin: 65px 0 0;}

@media screen and (max-width: 1024px){
    .brand-page .row2{ margin: -60px -7px 0; padding: 45px 0 0;}
    .brand-page .row2 > li{ padding: 60px 7px 0;}
    .brand-page .row2 h4{ font-size: 1.4rem;}
    .brand-page.eilersen .row2 h4 span{ font-size: 1.2rem;}
    .brand-page .row2 h4 + figure{ margin: 15px 0 0;}
    .brand-page .row2 p{ margin: 10px 0 0; font-size: 1rem;}
    .brand-page .wide{ padding: 30px 0;}
    .brand-page .wide .inner{ padding: 0 15px; width: 100%;}
    .brand-page .wide .inner + figure{ margin: 30px 0 0;}
    .brand-page .wide figure + .inner{ margin: 30px 0 0;}
    .brand-page .wide .inner + .flex-wide{ margin: 30px 0 0;}
}

.list-cover{ display: flex; margin: 0 -30px; padding: 40px 0 0;}
.list-cover > li{ padding: 0 30px; width: 50%;}
.list-cover figure{ display: flex; flex-direction: column;}
.list-cover > li:first-child figure{ align-items: flex-end;}
.list-cover figcaption{ padding: 20px 0 0; width: 520px; font-weight: 300;}
.list-cover h3{ margin: 45px 0 0; font-size: 2.8rem;}
.list-cover p{ margin: 45px 0 0;}

@media screen and (max-width: 1024px){
    .list-cover-wrap{ padding: 0 15px;}
    .list-cover{ display: block; margin: 0; padding: 0;}
    .list-cover > li{ padding: 30px 0 0; width: 100%;}
    .list-cover figure{ display: block;}
    .list-cover figcaption{ padding: 0; width: 100%;}
    .list-cover h3{ margin: 15px 0 0; font-size: 1.6rem;}
    .list-cover p{ margin: 15px 0 0;}
}

.brand-page .block{ display: flex; margin: 75px 0 0; align-items: center;}
.brand-page .block figure{ width: 720px;}
.brand-page .block .detail{ padding: 0 0 0 40px; width: calc(100% - 720px);}

@media screen and (max-width: 1024px){
    .brand-page .block{ display: block; margin: 30px 0 0;}
    .brand-page .block figure{ width: 100%;}
    .brand-page .block .detail{ margin: 15px 0 0; padding: 0; width: 100%;}
    .brand-page .block .detail h3{ margin: 30px 0 0;}
}

.brand-page.five .block{ display: flex; margin: 150px 0 0; align-items: flex-start; justify-content: space-between;}
.brand-page.five .block figure{ width: 540px;}
.brand-page.five .block .detail{ padding: 0; width: 520px;}
.brand-page.five .block h4{ font-size: 2rem; font-family: 'EB Garamond', serif;}
.brand-page.five .block h5{ font-weight: 300; font-size: 1.6rem;}
.brand-page.five .block p{ font-weight: 300; font-size: 1.2rem;}
.brand-page.five .block p + h4{ margin: 30px 0 0;}

@media screen and (max-width: 1024px){
    .brand-page.five .block{ display: block; margin: 60px 0 0;}
    .brand-page.five .block figure{ width: 100%;}
    .brand-page.five .block .detail{ margin: 30px 0 0; padding: 0; width: 100%;}
    .brand-page.five .block h4{ font-size: 1.6rem;}
    .brand-page.five .block h5{ margin: 5px 0 0; font-size: 1.4rem;}
    .brand-page.five .block p{ margin: 10px 0 0; font-size: 1rem;}
    .brand-page.five .block p + h4{ margin: 30px 0 0;}
}

.list-cnt{ display: flex; margin: -90px -20px 0; padding: 110px 0 0; flex-wrap: wrap;}
.list-cnt > li{ padding: 90px 20px 0; width: 50%; counter-increment: point;}
.list-cnt h4{ letter-spacing: normal; font-weight: 600; font-size: 2.4rem; line-height: 1;}
.list-cnt h4 span{ display: inline-block; margin: 0 0 0 15px; padding: 0 0 0 15px; border-left: 1px solid; font-family: 'EB Garamond', serif;}
.list-cnt > li h4:before{ padding: 0 15px 0 0; content: counter(point) "."; font-size: 2.5rem; font-family: 'EB Garamond', serif;}
.list-cnt2 > li h4:before{ content: none;}
.list-cnt figure + h4{ margin: 30px 0 0;}
.list-cnt p{ margin: 30px 0 0;}

@media screen and (max-width: 1024px){
    .list-cnt{ display: block; margin: -30px 0 0; padding: 30px 0 0;}
    .list-cnt > li{ padding: 30px 0 0; width: 100%;}
    .list-cnt2{ display: flex; margin: -30px -7px 0; padding: 30px 0 0;}
    .list-cnt2 > li{ padding: 30px 7px 0; width: 50%;}
    .list-cnt h4{ font-size: 1.4rem;}
    .list-cnt h4 span{ margin: 0 0 0 15px; padding: 0 0 0 15px;}
    .list-cnt > li h4:before{ padding: 0 10px 0 0; font-size: 1.6rem;}
    .list-cnt figure + h4{ margin: 15px 0 0;}
    .list-cnt p{ margin: 15px 0 0;}
}

.brand-page .history{ display: flex; margin: 75px 0 0; flex-wrap: wrap;}
.brand-page .history dt{ position: relative; display: flex; width: 72px; align-items: center;}
.brand-page .history dt:after{ position: absolute; top: 50%; right: 0; width: 10px; height: 1px; background: #4c4948; content: "";}
.brand-page .history dd{ display: flex; padding: 0 0 0 20px; width: calc(100% - 72px); border-left: 1px solid #4c4948; font-size: 1.2rem; align-items: center;}
.brand-page .history dd p{ padding: 0 40px 0 0; width: calc(100% - 520px);}
.brand-page .history dd figure{ width: 520px;}
.brand-page .history dt.line{ display: block;}
.brand-page .history dt.line:after{ top: 12px;}
.brand-page .history dt.line + dd{ padding: 50px 0 50px 20px;}
.brand-page .history + div{ margin: 10px 0 0; padding: 0 0 60px;}

@media screen and (max-width: 1024px){
    .brand-page .history{ margin: 30px 0 0; align-items: flex-start;}
    .brand-page .history dt{ width: 15%;}
    .brand-page .history dd{ padding: 0 0 0 15px; width: 85%; flex-wrap: wrap;}
    .brand-page .history dd p{ padding: 0; width: 100%;}
    .brand-page .history dd figure{ padding: 15px 0 0; width: 100%;}
    .brand-page .history dt.line + dd{ padding: 30px 0 30px 15px;}
    .brand-page .history + div{ padding: 0 0 30px;}
}

.brand-page .bg{ background: #76767a; color: #fff;}
.brand-page h3 + figure{ margin: 75px 0 0;}
.brand-page.natadora h2 + figure{ margin: 75px 0 0;}

@media screen and (max-width: 1024px){
    .brand-page h3 + figure{ margin: 30px 0 0;}
    .brand-page.natadora h2 + figure{ margin: 30px 0 0;}
}

.list-voice{ display: flex; margin: 0 -25px; letter-spacing: normal; font-weight: 600; flex-wrap: wrap; align-items: center;}
.list-voice > li{ position: relative; margin: 75px 0 0; padding: 0 25px 0 100px; width: 50%; counter-increment: point; font-size: 2.8rem; line-height: 1.4;}
.list-voice > li small{ display: inline-block; font-weight: 400; font-size: 1.4rem; line-height: 1.8;}
.list-voice > li:before{ position: absolute; top: 50%; left: 25px; content: counter(point) "."; font-size: 4rem; font-family: 'EB Garamond', serif; transform: translate(0,-50%);}
.list-voice-wrap{ display: none;}
.list-voice2{ counter-reset: point 10;}
.sp .list-voice2{ counter-reset: point 3;}
.list-voice2 > li:before{ content: counter(point) ".";}

@media screen and (max-width: 1024px){
    .list-voice{ display: block; margin: 0;}
    .list-voice > li{ margin: 30px 0 0; padding: 0 0 0 10%; width: 100%; font-size: 1.6rem; line-height: 1.5;}
    .list-voice > li small{ font-size: 1rem; line-height: 1.8;}
    .list-voice > li:before{ left: 0; font-size: 2rem;}
}

.brand-page.eilersen .cap{ margin: 90px 0 0; padding: 60px; border: 1px solid;}
.brand-page.eilersen .cap2{ border: none; background: #e5e1e1;}
.brand-page.eilersen .cap h3{ margin: 0;}
.brand-page.eilersen .cap2 h3{ text-align: center;}
.brand-page.eilersen .cap2 p{ text-align: center;}
.brand-page.eilersen .cap ul{ display: flex; margin: 15px 0 0; padding: 0 30px; text-align: center; flex-wrap: wrap;}
.brand-page.eilersen .cap ul > li{ padding: 30px 15px 0; width: calc(100% / 6);}
.brand-page.eilersen .cap figcaption{ padding: 9px 0 0;}

@media screen and (max-width: 1024px){
    .brand-page.eilersen .cap{ margin: 45px 0 0; padding: 30px;}
    .brand-page.eilersen .cap2 p{ text-align: left;}
    .brand-page.eilersen .cap ul{ margin: 15px -7px 0; padding: 0;}
    .brand-page.eilersen .cap ul > li{ padding: 15px 7px 0; width: calc(100% / 3);}
}

.brand-page .view{ margin: 60px 0 0; text-align: center; cursor: pointer;}
.brand-page .view span{ display: inline-block; padding: 25px 75px; min-width: 260px; border: 1px solid; line-height: 1;}
.brand-page .view.active{ display: none;}
.brand-page .more{ text-align: center;}
.brand-page.natadora .more{ margin: 40px 0 0;}

@media screen and (max-width: 1024px){
    .brand-page .view{ margin: 30px 0 0;}
    .brand-page .view span{ padding: 15px 45px; min-width: 0;}
    .brand-page .more a{ text-align: center;}
    .brand-page.natadora .more{ margin: 15px 0 0; text-align: center;}
}

.flex-left{ display: flex; margin: 75px 0 0; justify-content: flex-start;}
.flex-left img{ width: calc(50% + 550px);}

@media screen and (max-width: 1024px){
    .flex-left{ display: block; margin: 30px 0 0;}
    .flex-left img{ width: 100%;}
}

.flex-wide{ display: flex; align-items: center;}
.flex-wide figure{ width: calc(50% + 150px);}
.flex-wide .detail{ padding: 0 0 0 45px; width: 340px;}
.flex-wide .detail h2{ line-height: 1.5;}
.flex-wide .detail h2 span{ display: block; font-size: 1.8rem;}
.flex-wide .detail .shoulder{ font-style: italic; font-size: 1.8rem;}
.brand-page.porada .flex-wide .detail .shoulder{ font-family: 'EB Garamond', serif;}
.flex-wide .detail p{ margin: 60px 0 0; font-weight: 300; font-size: 1.2rem;}

@media screen and (max-width: 1024px){
    .flex-wide figure{ width: 60%;}
    .flex-wide .detail{ padding: 0 0 0 15px; width: 40%;}
    .flex-wide .detail h2 span{ font-size: 1.4rem;}
    .flex-wide .detail .shoulder{ font-size: 1.2em;}
    .flex-wide + p{ margin: 30px 0 0; padding: 0 15px;}
}

.brand-page .history2 dt{ padding: 7px 0;}
.brand-page .history2 dd{ padding: 7px 0 7px 20px;}
.brand-page .history2 dt:first-child + dd{ padding: 45px 0 7px 20px;}
.brand-page .history2 dd:last-child{ padding: 7px 0 45px 20px;}
.brand-page .history2 dd p{ width: calc(100% - 150px);}
.brand-page .history2 dd figure{ width: 150px;}
.brand-page .history2 dd:last-child figure{ padding: 0 0 0 25px;}

@media screen and (max-width: 1024px){
    .brand-page .history2 dt{ padding: 15px 0;}
    .brand-page .history2 dd{ padding: 15px 0 15px 15px;}
    .brand-page .history2 dt:first-child + dd{ padding: 30px 0 15px 15px;}
    .brand-page .history2 dd:last-child{ padding: 15px 0 30px 15px;}
    .brand-page .history2 dd p{ width: 100%;}
    .brand-page .history2 dd figure{ margin: 7px 0 0; width: 100%;}
    .brand-page .history2 dd:last-child figure{ padding: 0;}
}

.brand-page .prof{ display: flex; margin: 0 -35px; justify-content: space-between;}
.brand-page .prof > div{ padding: 0 35px; width: 50%;}
.brand-page .prof .logo.bauhaus img{ height: 31px;}
.brand-page .prof .logo.tecta img{ height: 45px;}
.brand-page .prof .logo + p{ margin: 45px 0 0;}
.brand-page .prof figure{ margin: 45px 0 0;}
.brand-page .prof h3{ margin: 0; font-weight: 300; font-size: 2.8rem;}
.brand-page .history3{ margin: 45px 0 0;}
.brand-page .history3 dd{ padding: 10px 0 10px 20px;}
.brand-page .history3 dt:first-child + dd{ padding: 0 0 10px 20px;}
.brand-page .history3 dd p{ width: 100%;}

@media screen and (max-width: 1024px){
    .brand-page .prof{ display: block; margin: 0;}
    .brand-page .prof > div{ padding: 0; width: 100%;}
    .brand-page .prof .logo.bauhaus img{ height: 15px;}
    .brand-page .prof .logo.tecta img{ height: 20px;}
    .brand-page .prof .logo + p{ margin: 30px 0 0;}
    .brand-page .prof figure{ margin: 15px 0 0;}
    .brand-page .prof h3{ margin: 30px 0 0; font-size: 1.6rem;}
    .brand-page .history3{ margin: 15px 0 0;}
    .brand-page .history3 dt{ padding: 15px 0;}
    .brand-page .history3 dd{ padding: 15px 0 15px 15px;}
    .brand-page .history3 dt:first-child + dd{ padding: 15px 0 15px 15px;}
}

.brand-page .block2{ display: flex; margin: 100px 0 0; align-items: center;}
.brand-page .block2 figure{ width: 260px;}
.brand-page .block2 .detail{ padding: 0 0 0 40px; width: calc(100% - 260px);}
.brand-page .block2 h3{ margin: 0; font-size: 2.8rem;}
.brand-page .block2 .jp{ font-size: 1.2rem;}
.brand-page .block2 p{ margin: 30px 0 0;}

@media screen and (max-width: 1024px){
    .brand-page .block2{ display: flex; margin: 45px 0 0; align-items: center;}
    .brand-page .block2 figure{ width: 25%;}
    .brand-page .block2 .detail{ padding: 0 0 0 15px; width: 75%;}
    .brand-page .block2 h3{ font-size: 1.6rem;}
    .brand-page .block2 .jp{ font-size: 1rem;}
    .brand-page .block2 + p{ margin: 30px 0 0;}
}

.brand-page .list-product h4{ margin: 30px 0 0; font-size: 2rem;}
.brand-page .list-product .logo2{ margin: 10px 0 0; height: 37px;}
.brand-page .list-product p{ margin: 30px 0 0; font-size: 1.2rem;}
.brand-page .list-product p + .price{ margin: 30px 0 0;}

@media screen and (max-width: 1024px){
    .brand-page .list-product h4{ margin: 10px 0 0; font-size: 1.4rem;}
    .brand-page .list-product .logo2{ margin: 10px 0 0; height: 20px;}
    .brand-page .list-product p{ margin: 10px 0 0; font-size: 1rem;}
    .brand-page .list-product p + .price{ margin: 10px 0 0;}
}

.brand-page .wrap-cnt > .cnt{ margin: 130px 0 0; counter-increment: point;}
.brand-page .wrap-cnt > .cnt h4:before{ padding: 0 20px 0 0; content: counter(point, decimal-leading-zero) "."; font-size: 3.6rem; font-family: 'EB Garamond', serif;}
.brand-page .wrap-cnt h4{ font-weight: 600; font-size: 2.4rem;}
.brand-page .wrap-cnt p{ margin: 30px 0 0;}
.brand-page .wrap-cnt figure{ display: flex; margin: 60px 0 0; justify-content: space-between;}
.brand-page .wrap-cnt figure.sp{ display: none;}
.brand-page .wrap-cnt figure > div{ width: 820px;}
.brand-page .wrap-cnt figure figcaption a{ display: flex; flex-direction: column; width: 260px;}

@media screen and (max-width: 1024px){
    .brand-page .wrap-cnt > .cnt{ margin: 30px 0 0;}
    .brand-page .wrap-cnt > .cnt h4:before{ padding: 0 10px 0 0; font-size: 2rem;}
    .brand-page .wrap-cnt h4{ font-size: 1.6rem;}
    .brand-page .wrap-cnt p{ margin: 15px 0 0;}
    .brand-page .wrap-cnt figure{ display: block; margin: 15px 0 0;}
    .brand-page .wrap-cnt figure.sp{ display: block;}
    .brand-page .wrap-cnt figure > div{ display: none;}
    .brand-page .wrap-cnt figure figcaption a{ display: flex; flex-direction: row; width: 100%;}
    .brand-page .wrap-cnt figure figcaption a > div{ width: 50%;}
}

.brand-page .note{ margin: 40px 0 0; padding: 20px 0; border: 1px solid; text-align: center;}
.brand-page .note strong{ font-size: 2rem;}

@media screen and (max-width: 1024px){
    .brand-page .note{ margin: 30px 0 0; padding: 15px;}
    .brand-page .note strong{ font-size: 1.6rem;}
}

.brand-page .rokko{ margin: 0 calc(50% - 50vw); padding: 60px calc(50vw - 50%); width: 100vw; background: #dcdbda; text-align: center;}
.brand-page .rokko h2{ font-weight: 400; font-size: 5rem; line-height: .9;}
.brand-page .rokko time{ font-size: 4.5rem;}
.brand-page .rokko time small{ margin: 30px 0 0; font-size: 2.7rem;}
.brand-page .rokko p{ margin: 30px auto 0; width: 620px; text-align: left; font-size: 2.2rem;}
.brand-page .rokko figure{ margin: 60px 0 0; text-align: center;}
.brand-page .rokko figure img{ height: 500px;}

@media screen and (max-width: 1024px){
    .brand-page .rokko{ margin: 0; padding: 30px 15px;}
    .brand-page .rokko h2{ font-size: 2.5rem;}
    .brand-page .rokko time{ font-size: 2.25rem;}
    .brand-page .rokko time small{ margin: 15px 0 0; font-size: 1.35rem;}
    .brand-page .rokko p{ margin: 15px 0 0; width: 100%; font-size: 1.1rem;}
    .brand-page .rokko figure{ margin: 15px 0 0;}
    .brand-page .rokko figure img{ width: 100%; height: auto;}
}

.brand-page .video{ position: relative; overflow: hidden; padding-top: 56.25%;}
.brand-page .video iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.brand-page.eilersen .list-more a{ vertical-align: middle;}
.brand-page.eilersen .list-more i{ position: relative; display: inline-block; margin: 0 0 0 1em; width: 30px; height: 30px; border: 1px solid; border-radius: 100%; vertical-align: middle;}
.brand-page.eilersen .list-more i:after{ position: absolute; top: 50%; left: 50%; content: "↓"; font-style: normal; transform: translate(-50%,-50%);}

@media screen and (max-width: 1024px){
    .brand-page.eilersen .list-more i{ display: none;}
}

/* privacy
--------------------------------------------------- */
.privacy .content h2{ margin: 60px 0 0;}
.privacy .content section > h2:first-child{ margin: 0;}
.privacy .content h3{ margin: 40px 0 0; font-size: 1.8rem;}
.privacy .content h4{ margin: 20px 0 0; font-size: 1.8rem;}
.privacy .content p{ margin: 10px 0 0;}
.privacy .content p.last{ margin: 60px 0 0;}
.privacy .content .list{ margin: 10px 0 0 1.2em;}
.privacy .content li .list li{ text-indent: 0;}
.privacy .content .list > li{ list-style: disc; text-align: justify;}
.privacy .content .list-num{ margin: 10px 0 0;}
.privacy .content .list-num > li{ padding-left: 3.2em; text-align: justify; text-indent: -3.2em;}
.privacy .content .list-num > li + li{ margin: 10px 0 0;}

@media screen and (max-width: 1024px){
    .privacy .content h2{ margin: 45px 0 0;}
    .privacy .content section > h2:first-child{ margin: 0;}
    .privacy .content h3{ margin: 30px 0 0; font-size: 1.4rem;}
    .privacy .content h4{ margin: 15px 0 0; font-size: 1.4rem;}
    .privacy .content p{ margin: 10px 0 0;}
    .privacy .content p.last{ margin: 45px 0 0;}
    .privacy .content .list{ margin: 10px 0 0 2rem;}
    .privacy .content .list > li + li{ margin: 10px 0 0;}
}

/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ background: #efefef;}
.footer .inner{ position: relative; display: flex; margin: 0 auto; padding: 65px 0; width: 1100px; align-items: center;}
.footer h1{ width: 280px;}
.footer h1 a{ display: inline-block; height: 51px;}
.footer h1 a img{ height: 100%;}
.footer nav{ position: relative; display: flex; width: calc(100% - 280px);}
.footer nav > div{ padding: 0 0 30px; width: 25%;}
.footer nav a{ color: #4c4948; letter-spacing: normal;}
.footer nav a:hover{ color: #000;}
.footer nav > div > ul{ font-size: 1.2rem;}
.footer nav > div > ul > li{ margin: 20px 0 0;}
.footer nav > div > ul + h2{ margin: 50px 0 0;}
.footer nav > div > ul i{ display: inline-block; margin: 0 0 0 6px; height: 12px; vertical-align: bottom; line-height: 1;}
.footer nav > div > ul i img{ width: auto; height: 100%; vertical-align: bottom;}
.footer nav > .other{ display: none;}
.footer .other{ padding: 50px 0 0;}
.footer .other > ul{ font-size: 1rem;}
.footer .other > ul > li{ position: relative; padding: 0 0 0 10px;}
.footer .other > ul > li:before{ position: absolute; top: 50%; left: 0; border-width: 4px 0 4px 5px; border-style: solid; border-color: transparent transparent transparent #4c4948; content: ""; transform: translate(0,-50%);}
.footer .other > ul > li + li{ margin: 10px 0 0;}
.footer .other aside{ margin: 35px 0 0;}
.footer .other aside > ul{ display: flex;}
.footer .other aside > ul > li + li{ padding: 0 0 0 10px;}
.footer .other a{ display: block;}
.footer .other i{ display: block;}
.footer .other img{ width: auto; height: 20px;}
.footer small{ display: flex; padding: 30px 0; width: 100%; background: #4c4948; color: #fff; font-weight: 300; font-size: 1.3rem; justify-content: center;}

@media screen and (max-width: 1024px){
    .footer .inner{ padding: 45px 0; width: 100%;}
    .footer h1{ width: 50%; text-align: center;}
    .footer h1 a{ height: 35px;}
    .footer nav{ display: block; width: 50%;}
    .footer nav > div{ display: none; width: 100%;}
    .footer nav > div > ul{ font-size: 1rem;}
    .footer nav > div > ul > li{ margin: 10px 0 0;}
    .footer nav > .other{ display: block; padding: 0;}
    .footer .other aside{ margin: 30px 0 0;}
    .footer small{ font-size: 1rem;}
}

.footer2{ margin: 0 auto; width: 1100px;}

@media screen and (max-width: 1024px){
    .footer2{ width: 100%;}
}

.footer2 nav{ position: relative; display: flex; margin: 0 calc(50% - 50vw); padding: 80px calc(50vw - 50%); background: #EFEFEF; flex-wrap: wrap;}
.footer2 nav.sp{ display: none;}
.footer2 nav > div{ padding: 0 0 30px 30px; width: calc(100% / 7);}
.footer2 nav > div:first-child,
.footer2 nav > div:nth-child(8){ padding: 0 0 30px;}
.footer2 nav h2{ padding: 0 0 15px; border-bottom: 1px solid; letter-spacing: .05em; font-weight: 500; font-size: 1.3rem; font-family: acumin-pro, sans-serif;}
.footer2 nav ul{ margin: 5px 0 0; font-weight: 500; font-size: 1rem; font-family: ryo-gothic-plusn, sans-serif;}
.footer2 nav ul > li{ padding: 15px 0 0; white-space: nowrap; letter-spacing: normal;}
.footer2 nav i{ display: inline-block; margin: 0 0 0 1em; width: 9px;}
.footer2 nav .other{ position: absolute; right: calc(50% - 550px); bottom: 110px; display: flex; justify-content: flex-end;}
.footer2 nav .other > li{ padding: 0 0 0 30px; font-weight: 500; font-size: 1rem; font-family: ryo-gothic-plusn, sans-serif;}
.footer2 nav .other > li a{ display: block;}
.footer2 nav .other > li a:before{ padding: 0 .5em 0 0; content: "▶︎"}

@media screen and (max-width: 1024px){
    .footer2 nav.sp{display: block; margin: 0; padding: 15px 0; }
    .footer2 nav.pc{ display: none;}
    .footer2 nav .other{ position: relative; right: auto; bottom: auto; display: flex; justify-content: center;}
    .footer2 nav .other > li{ padding: 0 4vw;}
}

.footer2 aside{ display: flex; margin: 0 calc(50% - 50vw); padding: 30px calc(50vw - 50%); background: #DCDCDC; justify-content: center; align-items: center;}
.footer2 aside dl{ display: flex; padding: 0 50px; justify-content: center; align-items: center;}
.footer2 aside dt{ white-space: nowrap; font-weight: 500; font-size: 1.5rem; font-family: acumin-pro, sans-serif;}
.footer2 aside dd ul{ display: flex; justify-content: flex-start; align-items: center;}
.footer2 aside dd ul > li{ padding: 0 0 0 20px;}
.footer2 aside dd ul i{ font-size: 4rem;}
.footer2 aside dd ul i img{ width: auto; height: 40px;}
.footer2 aside dd ul > li > img{ width: auto; height: 60px;}
.footer2 aside dd ul > li > a > img{ width: auto; height: 45px;}

@media screen and (max-width: 1024px){
    .footer2 aside{flex-direction: column;  margin: 0; padding: 0 0 30px; align-items: center; justify-content: center;}
    .footer2 aside dl{ display: block; padding: 30px 0 0; text-align: center;}
    .footer2 aside dt{ font-size: 1.2em;}
    .footer2 aside dd{ padding: 15px 0 0;}
    .footer2 aside dd ul{ justify-content: center;}
    .footer2 aside dd ul > li{ padding: 0 2.133vw;}
    .footer2 aside dd ul i{ font-size: 3rem;}
    .footer2 aside dd ul i img{ height: 30.5px;}
    .footer2 aside dd ul > li.lg{ display: none;}
    .footer2 aside dd ul > li > a > img{ height: 8vw;}
}

.footer2 small{ display: flex; margin: 0 calc(50% - 50vw); height: 64px; background: #4C4948; color: #EFEFEF; letter-spacing: .05em; font-size: 1.2rem; font-family: acumin-pro, sans-serif; justify-content: center; align-items: center;}
.footer2 small.fbnr2{ padding: 25px 0 0; height: 164px; align-items: flex-start;}

@media screen and (max-width: 1024px){
    .footer2 small{ margin: 0; height: 60px;}
    .footer2 small.fbnr2{ padding: 6.4vw 0 0; height: 30.666vw;}
}