@charset "utf-8";
@charset "utf-8";
    #first-view.index {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
top: 0;
left: 0;
position: relative; } #background-movie {
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
opacity: 1;
z-index: 1;
top: 0;
left: 0;
}
#background-movie #sui-movie {
position: absolute;
transform: scale(1.03);
}
#background-movie #movie-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .0);
} @media screen and (max-width:1024px) {}
@media screen and (max-width:768px) {}
@media screen and (max-width:567px) {}  [id^="curtain-"] {
position: absolute; display: block;
z-index: 2;
transition: all .8s cubic-bezier(0.785, 0.135, 0.15, 0.86) 3.0s;
}
#curtain-top {
width: 100%;
height: 50%;
top: 0;
left: 0;
}
#curtain-bottom {
width: 100%;
height: 50%;
bottom: 0;
left: 0;
}
#curtain-left {
width: 80px;
height: 100%;
top: 0;
left: 0;
}
#curtain-right {
width: 80px;
height: 100%;
top: 0;
right: 0;
}
.complete #first-view.appear #curtain-top, .complete #first-view.appear #curtain-bottom {
height: 0;
}
.complete #first-view.appear #curtain-left, .complete #first-view.appear #curtain-right {
width: 0;
} #movie-roading-bar {
position: absolute;
right: 80px;
top: 80px;
opacity: 1;
text-align: right;
visibility: visible;
z-index: 2;
}
#movie-roading-bar img {
width: 50px;
height: auto;
}
#movie-roading-bar span {
font-size: 10px;
display: block;
}
.complete #first-view.appear #movie-roading-bar {
opacity: 0;
visibility: hidden;
transition: opacity 1.0s ease 2.0s, visibility 1.0s ease-out 2.0s;
} @media screen and (max-width:768px) {}
@media screen and (max-width:567px) {} #first-view.index .catchphrase {
padding: 0 80px;
color: #143265;
width: calc(100% - 160px);
position: relative;
z-index: 3;
}
#first-view.index .catchphrase h1 {
font-size: 4rem;
line-height: 1.2;
font-weight: 400;
letter-spacing: .5rem;
}
#first-view.index .catchphrase h1 br {
display: none;
}
#first-view.index .catchphrase h2 {
font-size: 2.0rem;
line-height: 1.2;
font-weight: normal;
letter-spacing: .3rem;
margin-top: 20px;
} .complete #first-view.index.appear h1 span.text {
transition: color .6s ease-in-out 2.5s;
color: #fff;
}
.complete #first-view.index.appear h2 span.text {
transition: color .6s ease-in-out 2.5s;
color: #fff;
}
@media screen and (max-width:768px) {
#first-view.index .catchphrase {
padding: 0 0 0 15px;
width: calc(100% - 15px);
}
} #i-whats-new {
width: 45%;
position: absolute;
margin-left: auto;
z-index: 3;
right: 10px;
bottom: -160px;
opacity: 0;
visibility: hidden;
}
#i-whats-new .whats-new-inner {
background-color: #fff;
padding: 20px 30px;
}
#i-whats-new h3 {
font-size: 1.3rem;
}
#i-whats-new a {
display: flex;
flex-wrap: wrap;
border-top: 1px solid #ededed;
padding: 12px 0;
color: #000;
transition: color .2s ease-out;
}
#i-whats-new a:nth-of-type(1) {
border-top: none;
}
#i-whats-new a:hover {
color: #143265;
}
#i-whats-new time {
width: 250px;
font-size: 1.3rem;
}
#i-whats-new h4 {
width: calc(100% - 250px);
font-size: 1.3rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: normal;
}
.complete #i-whats-new.appear {
bottom: -108px;
opacity: 1;
visibility: visible;
transition: bottom .8s cubic-bezier(.56, .08, .09, .96) 3.6s, opacity .8s cubic-bezier(.56, .08, .09, .96) 3.6s;
}
@media screen and (max-width:768px) {
#i-whats-new {
width: 100%;
right: 0;
margin-left: 0;
bottom: -108px;
opacity: 1;
visibility: visible;
}
#i-whats-new a {
display: block;
}
#i-whats-new h4 {
width: 100%;
}
} #beginning-msg {
padding-top: 15%;
}
#beginning-msg h3 {
font-size: 4.0rem;
line-height: 1;
font-weight: 400;
padding-bottom: 20px;
}
#beginning-msg p {
font-size: 2.2rem;
line-height: 1;
padding-bottom: 20px;
} #i-about h3 {
font-size: 8rem;
font-weight: 400;
line-height: .8;
z-index: 5;
position: relative;
}
#i-about h3 .line-spacing {
padding-bottom: 20px;
}
#i-about h4 {
font-size: 2.2rem;
font-weight: normal;
line-height: 1.4;
padding-bottom: 20px;
}
#i-about h3 br, #i-about h4 br {
display: none;
}
#i-about p {
font-size: 1.4rem;
line-height: 2;
padding-bottom: 20px;
} #i-about .i-about-frame {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
#i-about .i-about-frame .inner:nth-of-type(1) {
width: 40%;
}
#i-about .i-about-frame .inner:nth-of-type(2) {
width: 60%;
}
#i-about .i-about-frame .inner #portrait-swipe-images {
width: 84%;
margin-top: -40px;
margin-left: 0;
}
#i-about .i-about-frame .inner #landscape-swipe-images {
width: 76%;
margin-right: 0;
}
#i-about .i-about-frame .txt-container {
padding: 12% 10% 12% 0;
}
@media screen and (max-width:768px) {
#i-about .i-about-frame {
display: block;
}
#i-about h3 {
font-size: 4rem;
}
.scroll-drifting {
margin-bottom: 20px
}
#i-about h4 {
font-size: 2rem;
}
#i-about .i-about-frame .inner:nth-of-type(1) {
width: 80%;
}
#i-about .i-about-frame .inner:nth-of-type(2) {
width: 100%;
}
#i-about .i-about-frame .inner #portrait-swipe-images, #i-about .i-about-frame .inner #landscape-swipe-images {
width: 100%;
margin-top: -40px;
margin-left: 0;
}
#i-about .i-about-frame .txt-container {
padding: 12% 20px;
}
} #i-oroginal h3 {
font-size: 4.0rem;
font-weight: 400;
line-height: .8;
z-index: 5;
position: relative;
}
#i-oroginal .txt-container {
padding: 30px 0 30px 0;
}
#i-oroginal .txt-container h4 {
font-size: 2.2rem;
font-weight: normal;
line-height: 1.4;
padding-bottom: 10px;
}
#i-oroginal .txt-container p {
font-size: 1.4rem;
line-height: 2;
padding-bottom: 20px;
} #i-oroginal .oroginal-menu-list ul {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#i-oroginal .oroginal-menu-list li {
width: calc(25% - 15px);
margin-bottom: 40px;
}
#i-oroginal .oroginal-menu-list li:nth-of-type(1) {
margin-right: 20px;
}
#i-oroginal .oroginal-menu-list li:nth-of-type(2) {
margin-right: 20px;
}
#i-oroginal .oroginal-menu-list li:nth-of-type(3) {
margin-right: 20px;
}
#i-oroginal .oroginal-menu-list li:nth-of-type(5) {
margin-right: 20px;
}
#i-oroginal .oroginal-menu-list li:nth-of-type(6) {
margin-right: 20px;
}
#i-oroginal .oroginal-menu-list li:nth-of-type(odd) {
margin-top: 80px;
}
#i-oroginal .oroginal-menu-list a {
display: block;
}
#i-oroginal .oroginal-menu-list .guide-text {
font-size: 1.3rem;
font-weight: normal;
}
@media screen and (max-width:768px) {
#i-oroginal .oroginal-menu-list ul {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#i-oroginal .oroginal-menu-list li {
width: calc(50% - 15px);
margin-bottom: 40px;
}
#i-oroginal .oroginal-menu-list li:nth-of-type(even) {
margin-left: 5%;
margin-right: 0;
}
#i-oroginal .oroginal-menu-list li:nth-of-type(odd) {
margin: 20px 0 0;
}
} #i-oroginal .oroginal-menu-list .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .25);
transition: background-color .25s cubic-bezier(0.694, 0.048, 0.335, 1);
z-index: 1;
}
#i-oroginal .oroginal-menu-list .caption {
position: absolute;
text-align: center;
width: calc(100% - 30px);
left: 0;
bottom: 30px;
padding: 0 15px;
display: block;
color: #fff;
z-index: 1;
}
#i-oroginal .oroginal-menu-list .caption .en {
line-height: 1;
font-size: 2.8rem;
display: block;
padding-bottom: 20px;
letter-spacing: .1rem;
font-weight: 400;
}
#i-oroginal .oroginal-menu-list .caption .ja {
line-height: 1;
font-size: 1.2rem;
display: block;
}
#i-oroginal .oroginal-menu-list a {
color: #000;
}
#i-oroginal .oroginal-menu-list a .link-underline {
font-size: 1.3rem;
margin-top: 10px;
} #i-oroginal .oroginal-menu-list a:hover .overlay {
background-color: rgba(0, 0, 0, .1);
}
#i-oroginal .oroginal-menu-list a:hover {
color: #143265;
} #i-salon-introduce .introduce-frame {
display: flex;
justify-content: space-between;
}
#i-salon-introduce .introduce-frame .inner:nth-of-type(1) {
width: 55%;
margin-top: 120px;
}
#i-salon-introduce .introduce-frame .inner:nth-of-type(2) {
width: 45%;
} #i-salon-introduce .introduce-frame .inner:nth-of-type(1) #salon-swipe-images .swiper-slide p {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
font-size: 7rem;
color: rgba(0, 0, 0, 0.2);
} #i-salon-introduce .introduce-frame .txt-container {
padding: 60px 80px;
position: relative;
}
#i-salon-introduce .introduce-frame .txt-container h3 {
font-size: 6.2rem;
line-height: .8;
font-weight: 400;
padding-bottom: 20px;
}
#i-salon-introduce .introduce-frame .txt-container h4 {
font-size: 2.2rem;
font-weight: normal;
line-height: 1.4;
padding-bottom: 20px;
}
#i-salon-introduce .introduce-frame .txt-container h3 br, #i-salon-introduce .introduce-frame .txt-container h4 br {
display: none;
} #i-salon-introduce .introduce-frame .txt-container::before {
content: '';
background-color: #f8f9fa;
width: 120%;
height: 100%;
display: block;
position: absolute;
top: 60px;
right: 0;
opacity: 0;
}
#i-salon-introduce .introduce-frame .txt-container.appear::before {
top: 0;
opacity: 1;
transition: top 1.4s cubic-bezier(.56, .08, .09, .96) .4s, opacity 1.4s cubic-bezier(.56, .08, .09, .96) .4s;
} #i-salon-introduce .salon-images-pagination > span:nth-of-type(1) {
margin-left: 25px !important;
} #i-salon-introduce .beginning-msg {
width: 60%;
padding: 120px 0;
}
#i-salon-introduce .beginning-msg h5 {
font-size: 4.0rem;
font-weight: normal;
line-height: 1.4;
padding-bottom: 20px;
}
#i-salon-introduce .beginning-msg p {
font-size: 1.4rem;
line-height: 2;
} #i-salon-list {
padding-top: 0;
margin-bottom: 12%;
}
#i-salon-list .salon-frame {
background-color: #f8f9fa;
padding-bottom: 5%;
}
.page-id-8888 .salon-frame .salon:nth-of-type(3) {
margin-top: 0;
}
@media screen and (max-width:768px) {
#i-salon-introduce.adjust {
padding-top: 6%;
}
#i-salon-introduce .introduce-frame {
display: block;
}
#i-salon-introduce .introduce-frame .inner:nth-of-type(1), #i-salon-introduce .introduce-frame .inner:nth-of-type(2) {
width: 100%;
}
#i-salon-introduce .introduce-frame .inner:nth-of-type(1) #salon-swipe-images .swiper-slide p {
font-size: 5rem;
}
#i-salon-list .block-x {
padding: 0;
}
#i-salon-list .salon-frame {
display: block;
padding: 40px 20px;
}
.salon-frame .salon .hover-caption {
font-size: 4rem;
}
.salon-frame .salon {
margin-bottom: 25px;
}
.salon-frame .salon .salon-cover img {
object-position: 0 100%;
height: 350px;
object-fit: cover;
}
.salon-frame .salon.tokyo .salon-cover img {
object-position: 0 70%;
}
.salon-frame .salon.nara .salon-cover img {
object-position: 0 50%;
}
#i-salon-introduce .introduce-frame {
display: block
}
#i-salon-introduce .introduce-frame .inner {
width: 100%;
}
#i-salon-introduce .introduce-frame .txt-container {
padding: 20px 5%;
z-index: 10;
margin-right: 0;
margin-left: 20%;
margin-top: -15%; }
#i-salon-introduce .introduce-frame .txt-container h3 {
font-size: 3.8rem
}
#i-salon-introduce .introduce-frame .txt-container h4 {
line-height: 1;
padding-bottom: 0;
}
#i-salon-introduce .beginning-msg {
width: 90%;
padding: 60px 0 30px 0;
margin: 0 auto;
}
#i-salon-introduce .beginning-msg h5 {
padding-bottom: 0;
font-size: 3.8rem;
}
#i-salon-introduce .beginning-msg p {
font-size: 1.2rem;
line-height: 2;
}
}  #i-collection {
margin-bottom: 12%;
}
#i-collection::before {
content: '';
background-color: #f8f9fa;
width: calc(100% - 80px);
height: 100%;
display: block;
position: absolute;
top: 0;
left: 40px;
padding-bottom: 6%;
} #i-collection .txt-container {
text-align: center;
} #i-collection .txt-container.upper {
padding-bottom: 30px;
}
#i-collection .txt-container.upper .section-title {
padding-bottom: 10px;
}
#i-collection .txt-container.upper h3 {
font-size: 4.0rem;
font-weight: normal;
line-height: 1.4;
padding-bottom: 20px;
} #i-collection .txt-container.lower {
padding-top: 30px;
}
#i-collection .txt-container.lower p:nth-of-type(1) {
font-size: 1.4rem;
line-height: 1.6;
padding-bottom: 10px;
} #collection-loop {
position: relative;
overflow: hidden;
}
#collection-loop a {
display: block;
height: 100%;
}
#collection-loop a .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(20, 50, 100, 0);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
z-index: 1;
}
#collection-loop .collection-loop-next, #collection-loop .collection-loop-prev {
top: 50%;
right: auto;
left: auto;
bottom: auto;
margin-top: -15px;
}
@media screen and (max-width:768px) {
#collection-loop .collection-loop-next, #collection-loop .collection-loop-prev {
top: 40%;
}
}
#collection-loop .collection-loop-next {
right: 0;
}
#collection-loop .collection-loop-prev {
left: 0;
} #collection-loop a:hover .overlay {
background-color: rgba(20, 50, 100, .6);
}  #to-customers.index::before {
content: '';
background-color: #f8f9fa;
width: calc(100% - 80px);
height: 100%;
display: block;
position: absolute;
top: 0;
left: 40px;
}
.campaign {
padding-top: 5%;
}
.campaign .campaign-inner {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 60px;
}
.campaign .campaign-inner div {
width: 48%;
}
.campaign .campaign-inner div.campaign-img img {
object-fit: cover;
height: 100%;
max-height: 250px;
}
.campaign .campaign-inner h4 {
overflow-wrap: break-word;
padding-left: 20px;
}
#to-customers .campaign .campaign-inner div.campaign-text a.more-link {
display: inline-block;
margin: 10% 0 0 50%;
}
#to-customers .campaign .campaign-inner div.campaign-text a .icon {
fill: #000;
width: 9px;
height: 9px;
left: 1px;
margin-top: -5px;
}
@media screen and (max-width:768px) {
#i-collection::before {
width: 80%;
left: 10%;
}
#to-customers.index::before {
width: 80%;
height: 80%;
left: 0;
}
#to-customers .campaign {
margin-bottom: 50px;
}
#to-customers .campaign .campaign-inner {
display: block;
}
#to-customers .campaign .campaign-inner div {
width: 100%; }
#to-customers .campaign div img {
width: 100%;
height: 200px;
object-fit: cover;
}
#to-customers .txt-container.campaign {
margin-bottom: 0px;
padding-bottom: 0px;
}
#to-customers .campaign h4 {
font-size: 1.4rem;
line-height: 1.6;
text-align: center;
width: 83%;
margin: 0 auto;
}
#to-customers .campaign .campaign-inner div.campaign-text a.more-link {
margin: 10% auto 0;
text-align: center;
display: block;
width: 60%;
}
}  #i-media .media-frame {
background-color: #F7F7F7;
padding: 6% 0;
} #i-media .txt-container {
text-align: center;
}
#i-media .txt-container.upper {
padding-bottom: 30px;
}
#i-media .txt-container.lower {
padding-top: 30px;
}
#i-media .txt-container .section-title {
padding-bottom: 10px;
}
#i-media .txt-container h3 {
font-size: 2.6rem;
line-height: 1;
font-weight: normal;
padding-bottom: 20px;
}
#i-media .txt-container p:nth-of-type(1) {
font-size: 1.4rem;
line-height: 1.6;
}
#front-cover a .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
z-index: 1;
} #front-cover a:hover .overlay {
background-color: rgba(0, 0, 0, .4);
} #front-cover {
position: relative;
width: 100%;
}
#front-cover ul {
display: flex;
justify-content: space-around;
width: 100%;
align-items: flex-end;
list-style: none;
}
#front-cover ul li {
position: relative;
margin: 0 10px 0 10px;
}
#front-cover ul li a {
bottom: -60px;
left: 0;
position: relative;
display: block;
opacity: 0;
}
#front-cover ul h4 {
display: none;
}
#front-cover ul.appear li a {
transition: bottom .8s cubic-bezier(.11, .8, .3, 1.31), opacity .6s cubic-bezier(.48, .28, .35, .97);
bottom: 0;
opacity: 1;
}
#front-cover ul.appear li:nth-of-type(1) a {
transition-delay: 0.0s;
}
#front-cover ul.appear li:nth-of-type(2) a {
transition-delay: 0.15s;
}
#front-cover ul.appear li:nth-of-type(3) a {
transition-delay: 0.3s;
}
#front-cover ul.appear li:nth-of-type(4) a {
transition-delay: 0.45s;
}
#front-cover ul.appear li:nth-of-type(5) a {
transition-delay: 0.6s;
}
#front-cover ul.appear li:nth-of-type(6) a {
transition-delay: 0.75s;
}
#front-cover ul.appear li:nth-of-type(7) a {
transition-delay: 0.9s;
}
@media screen and (max-width:768px) {
#front-cover ul {
display: flex;
justify-content: space-around;
width: 100%;
align-items: flex-end;
list-style: none;
flex-wrap: wrap;
}
#front-cover ul li {
position: relative;
margin: 0 10px 10px 10px;
width: 40%;
}
} #i-salon-info h3 {
font-size: 4.0rem;
font-weight: 400;
line-height: .8;
z-index: 5;
position: relative;
}
#i-salon-info .txt-container {
padding: 30px 0 30px 0;
}
#i-salon-info .txt-container h4 {
font-size: 2.2rem;
font-weight: normal;
line-height: 1.4;
padding-bottom: 10px;
}
#i-salon-info .txt-container p {
font-size: 1.4rem;
line-height: 1.6;
padding-bottom: 20px;
}  #about .explanatory {
padding-top: 6%;
}
#about .explanatory h2 {
font-weight: normal;
font-size: 2.4rem;
line-height: 1.2;
padding-bottom: 20px;
}
#about .explanatory p {
font-size: 1.4rem;
line-height: 1.6;
padding-top: 10px;
}
#about .explanatory p:nth-of-type(1) {
padding-top: 0;
}  #sui-concept .concept-head {
position: relative;
}
#sui-concept .concept-head .head-image {
width: 70%;
margin-left: auto;
}
#sui-concept .concept-head .head-image::before {
content: '';
background-color: #f8f9fa;
width: 70%;
height: 90%;
display: block;
position: absolute;
bottom: calc(-50% - 80px);
left: 0;
z-index: -1;
}
#sui-concept .concept-head .head-text {
position: absolute;
top: 0;
left: 0;
padding-top: 6%;
width: 100%;
}
#sui-concept .concept-head h2 {
font-size: 4.2vw;
line-height: 1.1;
font-weight: 400;
}
#sui-concept .concept-head h3 {
font-size: 2.1vw;
line-height: 1;
font-weight: normal;
padding-top: 20px;
}
@media screen and (max-width:768px) {
#sui-concept .concept-head h3 {
font-size: 3vw;
}
}
#sui-concept .concept-head h2 br {
display: none;
} #sui-concept .concept-body {
text-align: center;
padding-top: 10%;
}
#sui-concept .concept-body h2 {
font-weight: normal;
font-size: 2.8rem;
line-height: 1.4;
padding-bottom: 30px;
}
#sui-concept .concept-body p {
font-size: 1.8rem;
line-height: 2.2;
padding-top: 10px;
}
#sui-concept .concept-body .end-logo {
padding-top: 30px;
}
#sui-concept .concept-body .end-logo svg {
width: 140px;
height: 60px;
position: relative;
left: -20px;
fill: #143265;
} #commitment .inner {
display: flex;
margin-top: 10%;
position: relative;
}
#commitment .commitment-image {
position: relative;
}
#commitment .commitment-explain {
position: relative;
}
#commitment .commitment-explain::before {
content: '';
background-color: #fff;
display: block;
position: absolute;
width: 100%;
height: 100%;
}
#commitment .commitment-explain h3 {
font-weight: normal;
font-size: 2.4rem;
line-height: 1.2;
padding-bottom: 20px;
}
#commitment .commitment-explain p {
font-size: 1.4rem;
line-height: 1.8;
padding-top: 10px;
} #commitment .inner:nth-of-type(1) {
flex-direction: column;
margin-top: 5%;
}
#commitment .inner:nth-of-type(1) .commitment-image {
width: 60%;
}
#commitment .inner:nth-of-type(1) .commitment-explain {
width: 60%;
margin-left: auto;
padding-left: 50px;
}
#commitment .inner:nth-of-type(1) .commitment-explain::before {
left: 0;
top: -50px;
padding: 50px 0 0 0;
} #commitment .inner:nth-of-type(2) {
flex-direction: row-reverse;
}
#commitment .inner:nth-of-type(2) .commitment-image {
width: 66%;
position: absolute;
top: 0;
right: 0;
}
#commitment .inner:nth-of-type(2) .commitment-explain {
width: 60%;
margin-top: 15%;
margin-right: auto;
}
#commitment .inner:nth-of-type(2) .commitment-explain::before {
right: -50px;
top: -50px;
padding: 50px 50px 0 0;
} #commitment .inner:nth-of-type(3) {
flex-direction: row;
}
#commitment .inner:nth-of-type(3) .commitment-image {
width: 46%; }
#commitment .inner:nth-of-type(3) .commitment-explain {
width: 60%;
margin-left: auto;
margin-top: 15%;
}
#commitment .inner:nth-of-type(3) .commitment-explain::before {
left: -50px;
top: -50px;
padding: 50px 0 0 50px;
} #total-support .interrupt-image {
padding-bottom: 6%;
}
#total-support .support-overview {
padding-top: 6%;
}
#total-support .support-overview .split-column {
padding-top: 10%;
}
#total-support .support-overview .split-column:nth-of-type(1) {
padding-top: 0;
}
#total-support .support-overview .detail p {
font-size: 1.4rem;
line-height: 1.6;
padding-top: 10px;
}
#total-support .support-overview .detail p:nth-of-type(1) {
padding-top: 0;
}
#total-support .support-overview .detail p:nth-of-type(2) {
padding-top: 20px;
}
#total-support .support-overview .induce p {
margin-top: 10px;
} #concept-closing {
position: relative;
padding-top: calc(12% + 60px);
}
#concept-closing::before {
content: '';
background-color: #f8f9fa;
width: 100%;
height: 45%;
display: block;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}
#concept-closing h3 {
font-size: 5.0rem;
font-weight: 400;
line-height: .8;
position: absolute;
top: -63px;
left: calc(15% + 10px);
}
#concept-closing h3 br {
display: none;
}
#concept-closing h3 .line-spacing {
padding-bottom: 20px;
}
#concept-closing .closing-body {
padding-bottom: 5%;
}
#concept-closing .closing-body .inner {
background-color: #fff;
margin: -5% calc(5% + 10px) 0 calc(5% + 10px);
padding: 5%;
position: relative;
}
#concept-closing .closing-body h4 {
font-size: 2.2rem;
line-height: 1.4;
font-weight: normal;
}
#concept-closing .closing-body h4 br {
display: none;
}
#concept-closing .closing-body p {
font-size: 1.4rem;
line-height: 1.6;
padding-top: 10px;
}
#concept-closing .closing-body .end-logo {
position: absolute;
bottom: -25px;
right: 20px;
}
#concept-closing .closing-body .end-logo svg {
width: 140px;
height: 60px;
fill: #143265;
}
@media screen and (max-width:767px) {
#about .page-header .block-ll {
padding: 0 10px;
}
#sui-concept .concept-head .head-image {
width: 100%;
}
#sui-concept .concept-head .scroll-drifting {
margin-bottom: 10px;
}
#sui-concept .concept-head h2 {
font-size: 3.6rem;
line-height: 1;
} #sui-concept .concept-body {
text-align: center;
padding-top: 10%;
}
#sui-concept .concept-body h2 {
font-weight: normal;
font-size: 2.2rem;
line-height: 1.4;
padding-bottom: 30px;
}
#sui-concept .concept-body p {
font-size: 1.4rem;
line-height: 2.2;
padding-top: 10px;
}
#commitment .block-ll {
padding-left: 0;
padding-right: 0;
}
#commitment .commitment-explain {
position: relative;
}
#commitment .commitment-explain::before {
content: '';
background-color: #fff;
display: block;
position: absolute;
width: 100%;
height: 100%;
}
#commitment .commitment-explain h3 {
font-weight: normal;
font-size: 2.4rem;
line-height: 1.2;
padding-bottom: 20px;
}
#commitment .commitment-explain p {
font-size: 1.4rem;
line-height: 1.8;
padding-top: 10px;
padding-right: 20px;
} #commitment .inner:nth-of-type(1) {
flex-direction: column;
margin-top: 5%;
}
#commitment .inner:nth-of-type(1) .commitment-image {
width: 100%;
}
#commitment .inner:nth-of-type(1) .commitment-explain {
width: 90%;
margin-left: auto;
padding-left: 5%;
}
#commitment .inner:nth-of-type(1) .commitment-explain::before {
left: 0;
top: -50px;
padding: 50px 0 0 0;
} #commitment .inner:nth-of-type(2) {
flex-direction: row-reverse;
}
#commitment .inner:nth-of-type(2) .commitment-image {
width: 100%;
position: absolute;
top: 0;
right: 0;
}
#commitment .inner:nth-of-type(2) .commitment-explain {
width: 100%;
margin-top: 70%;
margin-right: 0;
padding: 0 5%;
}
#commitment .inner:nth-of-type(2) .commitment-explain::before {
display: none;
} #commitment .inner:nth-of-type(3) {
display: block;
}
#commitment .inner:nth-of-type(3) .commitment-image {
width: 100%;
height: 35vh;
}
#commitment .inner:nth-of-type(3) .commitment-explain {
width: 90%;
margin-left: auto;
margin-top: 40%;
background: rgba(255, 255, 255, 0.9);
padding: 50px 5%;
}
#commitment .inner:nth-of-type(3) .commitment-explain::before {
display: none;
}
}
#about .split-column {
display: block
}
#about .split-column > .details-frame {
width: 100%;
}
#about #our-thoughts.block-ll, #about #concept-closing .block-ll {
padding-left: 0;
padding-right: 0;
}
#concept-closing h3 {
left: 10%;
}   #salon-introduce .introduce-head {
position: relative;
padding-bottom: 80px;
}
#salon-introduce .introduce-head .head-image {
width: 70%;
margin-left: auto;
}
#salon-introduce .introduce-head .head-image::before {
content: '';
background-color: #f8f9fa;
width: 70%;
height: 80%;
display: block;
position: absolute;
left: 0;
bottom: -100%;
z-index: -1;
transition: bottom 2.4s cubic-bezier(.56, .08, .09, .96) 1.2s, opacity 1.4s cubic-bezier(.56, .08, .09, .96) 1.2s;
opacity: 0;
}
#salon-introduce .introduce-head .head-image.appear::before {
bottom: calc(-40% - 0px);
opacity: 1;
}
#salon-introduce .introduce-head .head-text {
position: absolute;
top: 0;
left: 0;
padding-top: 6%;
width: 100%;
z-index: 1;
}
#salon-introduce .introduce-head h2 {
font-size: 6.2rem;
line-height: .8;
font-weight: 400;
}
#salon-introduce .introduce-head h3 {
font-size: 2.2rem;
line-height: 1.4;
font-weight: normal;
padding-top: 20px;
}
#salon-introduce .introduce-head h2 br, #salon-introduce .introduce-head h3 br {
display: none;
} #salon-introduce .salon-images-pagination {
justify-content: flex-end;
}
#salon-introduce .salon-images-pagination > span:nth-last-of-type(1) {
margin-right: 80px;
}
#salon-introduce #salon-swipe-images h2 {
font-size: 2.0rem;
color: #fff;
position: absolute;
bottom: 20px;
left: 25px;
line-height: 1;
display: block;
}  #yt-wrap.salon-index {
overflow: hidden;
width: calc(100% - 160px);
margin: 70px 80px 50px 80px;
position: relative;
height: 100vh;
opacity: 1;
transition: opacity 1s ease 1s;
}
#yt-wrap.salon-index.show {
opacity: 1;
}
#yt-background, #yt-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#yt-background {
z-index: -1;
}
#yt-overlay {
background-color: rgba(0, 0, 0, .35);
}
#yt-wrap.salon-index {
opacity: 1;
} @media screen and (max-width:1024px) {}
@media screen and (max-width:768px) {
#salon-introduce .introduce-head {
position: inherit;
}
#salon-introduce .introduce-head h2 {
font-size: 4rem;
}
#salon-introduce .introduce-head .head-image {
width: 90%;
}
#salon-introduce .introduce-head .head-image #salon-swipe-images {
width: 100%;
}
#salon-introduce .salon-images-pagination > span:nth-last-of-type(1) {
margin-right: 10px;
}
#salon-introduce .introduce-head .head-text {
position: inherit;
}
}
@media screen and (max-width:567px) {} #first-view.salon-index {
width: 100%;
height: 100vh !important;
display: flex;
justify-content: flex-end;
align-items: flex-end;
flex-direction: column;
z-index: 2;
top: 0;
left: 0;
position: absolute;
transition: opacity .6s ease-in-out 0s;
opacity: 0;
}
#first-view.salon-index.appear {
opacity: 1
}
#first-view.salon-index .salon-name {
width: 100%;
height: 100%;
position: relative;
}
#first-view.salon-index h1 {
font-size: 10rem;
line-height: 1.2;
font-weight: 400;
letter-spacing: .1rem;
text-align: center;
position: absolute;
bottom: 90px;
left: 0;
width: 100%;
}
#first-view.salon-index h2 {
font-size: 1.2rem;
line-height: 1.4;
font-weight: 400;
position: absolute;
top: 90px;
left: 100px;
}
#first-view.salon-index h1 br {
display: none;
}
#first-view.salon-index h1 span.text, #first-view.salon-index h2 span.text {
color: #143265;
}
#first-view.salon-index.appear h1 span.text {
transition: color .6s ease-in-out 2.0s;
color: #fff;
}
#first-view.salon-index.appear h2 span.text {
transition: color .6s ease-in-out 2.0s;
color: #fff;
} #first-view.salon-index .sui-logo {
fill: #143265;
width: 160px;
height: 70px;
transition: fill .6s ease 2.0s;
position: absolute;
left: 50%;
bottom: 155px;
margin: -35px 0 0 -100px;
}
#first-view.salon-index.appear .sui-logo {
fill: #fff;
} #news-ticker {
position: absolute;
bottom: 0;
right: 80px;
width: 400px;
opacity: 0;
z-index: 1;
}
.salon-index.appear #news-ticker {
opacity: 1;
transition: opacity .4s ease-in-out 2.0s;
}
#ticker {
position: relative;
display: flex;
align-items: center;
letter-spacing: normal;
height: 50px;
}
#ticker dt {
width: 120px;
line-height: 32px;
position: relative;
color: #000000;
font-size: 1.3rem;
display: none;
}
#ticker dt::before {
content: '';
width: 1px;
height: 18px;
display: inline-block;
background-color: #000000;
position: absolute;
right: 15px;
top: 50%;
margin-top: -9px;
}
#ticker dd {
width: 100%;
}
#ticker ul {
display: block;
list-style: none;
position: relative;
overflow: hidden;
width: 100%;
height: 32px;
}
#ticker ul li {
position: absolute;
top: -999em;
left: 0;
display: block;
white-space: nowrap;
font-size: 1.3rem;
}
#ticker ul li a {
line-height: 32px;
text-decoration: none;
display: inline-block;
color: #FFF;
transition: color .2s ease-out;
}
#ticker ul li a span {
color: #FFF;
}
.pc #ticker ul li a:hover {
color: #FFF;
}
#ticker ul li a.disable {
pointer-events: none;
cursor: default;
} @media screen and (max-width: 1023px) {
#news-ticker {
width: 400px;
}
#ticker dt, #ticker ul li a {
color: #ffffff;
}
#ticker dt::before {
background-color: #fff;
}
}
@media screen and (max-width:768px) {
#news-ticker {
width: 300px;
}
}
@media screen and (max-width: 567px) {
#news-ticker {
display: none;
}
} #by-salon-concept h3 {
font-size: 6rem;
font-weight: 400;
line-height: 1;
z-index: 5;
position: relative;
}
#by-salon-concept h3 > span:nth-of-type(1) {
padding-bottom: 10px;
}
#by-salon-concept h3 > span:nth-of-type(2) {
margin-top: -15px;
}
#by-salon-concept h4 {
font-size: 2.2rem;
font-weight: normal;
line-height: 1.4;
padding-bottom: 20px;
}
#by-salon-concept h3 br, #by-salon-concept h4 br {
display: none;
}
#by-salon-concept p {
font-size: 1.4rem;
line-height: 1.6;
padding-bottom: 20px;
} #by-salon-concept .salon-concept-frame {}
#by-salon-concept .salon-concept-frame .inner:nth-of-type(1) {
width: 100%;
display: flex;
justify-content: space-between;
position: relative;
}
#by-salon-concept .salon-concept-frame .inner:nth-of-type(1) .salon-image:nth-of-type(1) {
width: 35%;
position: relative;
top: -30px;
}
#by-salon-concept .salon-concept-frame .inner:nth-of-type(1) .salon-image:nth-of-type(2) {
width: 43%;
position: relative;
top: -80px;
}
#by-salon-concept .salon-concept-frame .inner:nth-of-type(2) {
width: 55%;
margin-left: auto;
margin-top: -200px;
}
#by-salon-concept .salon-concept-frame .txt-container {
padding: 0 10% 0 0;
} #salon .non-date {
text-align: center;
width: 100%;
} .menu-classification {
padding-top: 6%;
}
.menu-classification ul {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.menu-classification li {
width: calc(50% - 20px);
border-top: 1px solid #F2F2F2;
}
.menu-classification li:nth-last-of-type(-n + 2) {
border-bottom: 1px solid #F2F2F2;
}
.menu-classification a {
display: block;
padding: 20px 20px;
position: relative;
color: #000;
transition: padding .3s ease-out, color .3s ease-out;
}
.menu-classification h3 {
font-size: 2.2rem;
font-weight: 400;
line-height: 1;
}
.menu-classification p {
font-size: 1.1rem;
line-height: 1;
}
.menu-classification .icon {
width: 9px;
height: 9px;
right: 20px;
margin-top: -5px;
} .menu-classification a:hover {
padding-left: 30px;
color: #999;
}
.menu-classification a:hover .icon {
fill: #999;
} .indicate-landscape {
display: flex;
justify-content: space-between;
}
.indicate-landscape video {
width: 100%;
height: auto;
}
.indicate-landscape .movie-frame {
width: 62%;
}
.indicate-landscape .photo-frame {
width: calc(38% - 10px);
position: relative;
} .lounge-description {
padding: 40px 0 80px 0;
}
.lounge-description h4 {
font-size: 2.2rem;
font-weight: normal;
line-height: 1.4;
padding-bottom: 20px;
}
.lounge-description p {
font-size: 1.4rem;
line-height: 1.6;
padding-bottom: 20px;
} .lounge-description .salon-name {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
.lounge-description .salon-name.appear {
opacity: .06;
}
.lounge-description .salon-name p {
font-size: 10rem;
line-height: 1.2;
font-weight: 400;
letter-spacing: .1rem;
}
.lounge-description .salon-name .sui-logo {
fill: #000;
width: 160px;
height: 70px;
transition: fill .6s ease 2.0s;
position: absolute;
left: 50%;
bottom: 85px;
margin: 0 0 0 -100px;
} .outline-info {
padding-top: 6%;
}
#salon .txt-chapter p br {
display: none;
}
#salon #outline .interrupt-image img {
max-height: 350px;
object-fit: cover;
}
.another_salon {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 25px;
}
.another_salon .salon-cover {
width: 30%;
}
.another_salon .salon-cover .magnify-scope img {
width: 350px;
height: 180px;
object-fit: cover;
}
@media screen and (max-width:768px) {
.another_salon {
display: block;
}
.another_salon .salon-cover {
width: 80%;
margin: 0 auto;
}
.another_salon .salon-cover .magnify-scope img {
width: 100%;
height: 180px;
object-fit: cover;
}
}  .salon-detail-text h2 {
font-weight: 400;
font-size: 3.4rem;
line-height: 1;
padding-bottom: 30px;
}
.salon-detail-text h2 br {
display: none;
}
.salon-detail-text h3 {
font-size: 2.2rem;
font-weight: normal;
line-height: 1.4;
padding-bottom: 10px;
}
.salon-detail-text p {
font-size: 1.4rem;
line-height: 1.6;
padding-bottom: 0;
}
.salon-detail-text p:nth-of-type(n + 2) {
padding-top: 20px;
} #salon-concept .concept-upper::before {
content: '';
width: 45%;
height: 100%;
display: block;
background-color: #fff;
position: absolute;
left: 80px;
bottom: 25%;
}
@media screen and (max-width:768px) {
#salon-concept .concept-upper::before {
left: 10px;
bottom: 15%;
}
}
#salon-concept .concept-upper h2 {
font-weight: 400;
font-size: 4.2rem;
line-height: 1;
padding-bottom: 30px;
}
#salon-concept .concept-upper h2 br {
display: none;
}
#salon-concept .concept-upper h2 > span:nth-of-type(1) {
padding-bottom: 10px;
}
#salon-concept .concept-upper h2 > span:nth-of-type(2) {
margin-top: -15px;
}
#salon-concept .concept-lower h3 {
font-size: 2.2rem;
font-weight: normal;
line-height: 1.4;
padding-bottom: 10px;
}
#salon-concept .concept-lower p {
font-size: 1.4rem;
line-height: 1.6;
padding-bottom: 0;
}
#salon-concept .concept-lower p:nth-of-type(1) {
padding-top: 0;
} #salon-values .entry-list.values {
padding-top: 5%;
}
#salon-values .entry-list.values .detail {
padding-top: 20px;
}
#salon-values .entry-list.values h4 {
color: #143265;
font-size: 1.6rem;
font-weight: normal;
text-align: center;
line-height: 1.2;
padding-bottom: 20px;
}
#salon-values .entry-list.values p {
font-size: 1.4rem;
line-height: 1.6;
padding-bottom: 0;
}
#salon-values .entry-list.values p:nth-of-type(1) {
padding-top: 0;
} #landscape {
overflow: hidden;
}
#landscape .salon-detail-text.lower {
padding-top: 5%;
}
#landscape .salon-detail-text p:nth-of-type(1) {
padding-bottom: 30px;
} #landscape .salon-label {
background-color: #fff;
padding: 4% 9%;
position: absolute;
right: 0;
top: -40px;
margin-top: 3%;
text-align: center;
z-index: 1;
}
#landscape .salon-label p:nth-of-type(1) {
font-size: 2.0rem;
line-height: 1;
}
#landscape .salon-label p:nth-of-type(1) span {
border-bottom: 1px solid #000;
display: inline-block;
padding-bottom: 5px;
}
#landscape .salon-label p:nth-of-type(2) {
font-size: 1.4rem;
line-height: 1;
padding-top: 5px;
}
#landscape .salon-label.appear {
top: 0;
} #landscape-detail .movie-frame video {
width: 100%;
height: auto;
position: relative;
} #landscape-detail .photo-frame {
padding-top: 10%;
position: relative;
}
#landscape-detail .photo-frame .deploy {
display: flex;
justify-content: space-between;
}
#landscape-detail .photo-frame .deploy.one {
display: block;
}
#landscape-detail .photo-frame .deploy .frame {
width: 42%;
}
#landscape-detail .photo-frame h5 {
font-size: 1.2rem;
color: #717071;
font-weight: 400;
padding-top: 20px;
line-height: 1;
}
#landscape-detail .photo-frame p {
font-size: 1.4rem;
line-height: 1.6;
padding-top: 5px;
} #landscape-detail .photo-frame .deploy.one {
display: block;
padding: 12% 0;
}
#landscape-detail .photo-frame .deploy.one .frame {
width: auto;
padding: 0 10%;
} #landscape-detail .photo-frame .deploy.stagger-1 .frame {
width: 42%;
}
#landscape-detail .photo-frame .deploy.stagger-1 .frame:nth-of-type(2) {
margin-top: 20%;
} #landscape-detail .photo-frame .deploy.stagger-2 .frame {
width: 46%;
}
#landscape-detail .photo-frame .deploy.stagger-2 .frame:nth-of-type(2) {
margin-top: 15%;
} #landscape-detail .photo-frame .deploy.stagger-3 .frame {
width: 42%;
}
#landscape-detail .photo-frame .deploy.stagger-3 .frame:nth-of-type(1) {
margin-top: 20%;
}
#landscape-detail .photo-frame .deploy.stagger-3 .frame:nth-of-type(2) {
margin-top: 5%;
} #landscape .landscape-image::before {
content: '';
background-color: #f8f9fa;
width: 70%;
height: 120%;
display: block;
position: absolute;
right: 0;
bottom: -160%;
z-index: -1;
transition: bottom 2.4s cubic-bezier(.56, .08, .09, .96) 2.4s, opacity 1.4s cubic-bezier(.56, .08, .09, .96) 2.4s;
opacity: 0;
}
#landscape .landscape-image.appear::before {
bottom: -100%;
opacity: 1;
}
#landscape-detail .photo-frame .deploy.stagger-1::before {
content: '';
background-color: #f8f9fa;
width: 70%;
height: 150%;
display: block;
position: absolute;
left: 0;
bottom: -160%;
z-index: -1;
transition: bottom 2.4s cubic-bezier(.56, .08, .09, .96) 2.4s, opacity 1.4s cubic-bezier(.56, .08, .09, .96) 2.4s;
opacity: 0;
}
#landscape-detail .photo-frame .deploy.stagger-1.appear::before {
bottom: -110%;
opacity: 1;
}  #landscape-detail .photo-frame .salon-name {
position: relative;
width: 100%;
text-align: center;
opacity: 0;
}
#landscape-detail .photo-frame .salon-name.appear {
opacity: .04;
}
#landscape-detail .photo-frame .salon-name p {
font-size: 10rem;
line-height: 1.2;
font-weight: 400;
letter-spacing: .1rem;
}
#landscape-detail .photo-frame .salon-name .sui-logo {
fill: #000;
width: 160px;
height: 70px;
transition: fill .6s ease 2.0s;
position: absolute;
left: 50%;
bottom: 85px;
margin: 0 0 0 -100px;
}  #attention {
padding-top: 6%;
}
#attention p {
font-size: 1.4rem;
line-height: 1.6;
padding-top: 20px;
margin-bottom: 20px;
}
#attention p:nth-of-type(1) {
padding-top: 0;
}
#attention p img {
width: auto;
}
#attention ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center
}
#attention ul li {
width: 12%;
margin-right: 3%;
}
#attention ul li:nth-child(6n) {
margin-right: 0;
} .split-column.menu-detail {
padding-top: 6%;
}
.split-column.menu-detail:nth-of-type(n + 2) {
padding-top: 12%;
} .split-column.menu-detail .txt-headline h3 {
font-weight: normal;
font-size: 2.2rem;
line-height: 1;
}
.split-column.menu-detail .txt-headline p {
font-size: 1.1rem;
} .split-column.menu-detail .txt-overview p {
color: #717071;
} .split-column.menu-detail .details-frame .detail {
border-bottom: 1px solid #F2F2F2;
} .split-column.menu-detail .menu-name {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 30px 0;
cursor: pointer;
border-top: 1px solid #F2F2F2;
}
.split-column.menu-detail .menu-name h3 {
font-size: 1.6rem;
color: #000;
transition: padding .3s ease-out, color .3s ease-out;
}
.split-column.menu-detail .menu-name h3 span {
font-size: 1.1rem;
font-weight: normal;
padding-left: 10px;
}
.split-column.menu-detail .menu-name:hover h3 {
color: #999;
padding-left: 10px;
}
.split-column.menu-detail .menu-name.active:hover h3 {
color: #000;
padding-left: 0;
} .split-column.menu-detail .menu-name .required-time {
font-size: 1.1rem;
line-height: 1;
min-width: 135px;
position: relative;
padding: 0 40px 0 0;
display: flex;
align-items: center;
}
.split-column.menu-detail .menu-name .required-time svg {
width: 13px;
height: 13px;
padding-right: 5px;
} .split-column.menu-detail .view-switching {
background-color: #F2F2F2;
text-align: center;
position: absolute;
top: -24px;
right: 0;
overflow: hidden;
width: 100px;
}
.split-column.menu-detail .view-switching .switching-inner {
display: flex;
transition: left .3s ease-out;
position: relative;
left: 0;
width: 200px;
}
.split-column.menu-detail .view-btn {
font-size: 1.0rem;
cursor: pointer;
line-height: 2.4;
padding: 0px 0;
width: 100px;
display: block;
}
.split-column.menu-detail .view-switching.active .switching-inner {
left: -100%;
} .split-column.menu-detail .menu-name .i-plus {
width: 15px;
height: 15px;
position: absolute;
right: 10px;
top: 50%;
margin-top: -8px;
}
.split-column.menu-detail .menu-name .i-plus::before, .split-column.menu-detail .menu-name .i-plus::after {
content: "";
display: block;
position: absolute;
background-color: #000;
transition: 0.5s;
transform: translateZ(0);
}
.split-column.menu-detail .menu-name .i-plus::before {
width: 1px;
height: 100%;
left: 7px;
top: 0;
margin-left: 0px;
}
.split-column.menu-detail .menu-name .i-plus::after {
width: 100%;
height: 1px;
left: 0;
top: 7px;
margin-top: 0px;
}
.split-column.menu-detail .menu-name.active .i-plus::before {
transform: rotate(90deg);
} .split-column.menu-detail .detail-txt {
padding-bottom: 6%;
display: none;
}
.split-column.menu-detail .price-box {
display: flex;
text-align: center;
}
.split-column.menu-detail .person-price {
width: 100%;
margin-right: 2px;
}
.split-column.menu-detail .person-price:nth-last-of-type(1) {
margin-right: 0;
}
.split-column.menu-detail .person-price .person {
background-color: #F8F8F8;
margin-bottom: 2px;
text-align: center;
padding: 10px;
font-size: 1.1rem;
}
.split-column.menu-detail .person-price .price {
background-color: #f8f9fa;
padding: 20px 10px;
color: #143265;
font-size: 1.8rem;
} .split-column.menu-detail .detail-txt .comment.adjust-top {
padding-top: 20px;
}
.split-column.menu-detail .detail-txt .comment.adjust-bottom {
padding-bottom: 20px;
}
.split-column.menu-detail .detail-txt .comment p {
font-size: 1.3rem;
line-height: 1.6;
padding-bottom: 10px;
}
.split-column.menu-detail .detail-txt .comment p:nth-last-of-type(1) {
padding-bottom: 0;
}
.split-column.menu-detail .detail-txt .comment .small {
font-size: 1.1rem;
}
.split-column.menu-detail .detail-txt .comment .and-more {} .split-column.menu-detail .comment-under {
color: #717071;
padding-top: 20px;
}
.split-column.menu-detail .comment-under h4 {
font-size: 1.4rem;
line-height: 1.6;
padding-bottom: 10px;
}
.split-column.menu-detail .comment-under h5 {
font-size: 1.3rem;
line-height: 1.6;
}
.split-column.menu-detail .comment-under p {
font-size: 1.3rem;
line-height: 1.4;
padding-bottom: 10px;
}
.split-column.menu-detail .comment-under p:nth-last-of-type(1) {
padding-bottom: 0;
}  .staff-head-position {
padding-top: 6%;
}
.staff-head-position h3 {
font-size: 8rem;
line-height: 1;
font-weight: 400;
position: relative;
top: 12px;
color: #f8f9fa;
} #staff-list .entry-item .staff-name.en {
font-size: 2.4rem;
line-height: 1.2;
font-weight: 400;
}
#staff-list .entry-item .staff-name.ja {
font-size: 1.2rem;
line-height: 1;
transition: color .2s ease-out;
} #staff-list .staff-connect {
margin: 20px 0;
position: relative;
height: 30px;
overflow: hidden;
}
#staff-list .staff-connect ul {
position: absolute;
left: 0;
top: 0;
} #staff-list .reserve-direct-staff {
padding-top: 15px;
border-top: 1px solid #F2F2F2;
}
#staff-list .reserve-direct-staff a {
font-size: 1.3rem;
line-height: 1.5;
color: #143265;
padding-right: 3px;
display: inline-block;
}
#staff-list .reserve-direct-staff a span {
padding-left: 15px;
}
#staff-list .reserve-direct-staff a .icon {
width: 9px;
height: 9px;
left: 1px;
margin-top: -5px;
fill: #143265;
}
#staff-list .reserve-direct-staff a.link-underline.display::before {
background-color: #143265;
}
#staff-list .reserve-direct-staff a.link-underline.display::after {
background-color: #999;
}
#staff-list .reserve-direct-staff a:hover {
color: #999;
}
#staff-list .reserve-direct-staff a:hover .icon {
fill: #999;
}  #staff-individual-header .page-head-cover {
position: relative;
}
#staff-individual-header .page-head-cover .head-image {
position: relative;
overflow: hidden;
background-color: #efefef;
}
#staff-individual-header .page-head-cover .head-image img:nth-of-type(2) {
transform: translateY(-50%) translateX(-50%) scale(1.01);
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: auto;
}
#staff-individual-header .page-head-cover .staff-name {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
flex-direction: column;
top: 0;
left: 0;
color: #fff;
text-align: center;
}
#staff-individual-header .page-head-cover .staff-name p {
font-size: 1.4rem;
line-height: 1;
}
#staff-individual-header .page-head-cover .staff-name h2 {
font-size: 8.0rem;
line-height: 1;
font-weight: 400;
}
#staff-individual-header .page-head-cover .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
} #staff-photo {
padding-top: 30px;
}
#staff-photo .split {
display: flex;
justify-content: space-between;
}
#staff-photo .photo-frame {
width: calc(60% - 15px);
}
#staff-photo .action-frame {
background-color: #f8f9fa;
width: calc(40% - 15px);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
} #staff-photo .action-frame a.blind-button {
padding: 20px 20px 20px 20px;
display: inline-block;
}
#staff-photo .action-frame a.blind-button {
background-color: #143265;
}
#staff-photo .action-frame a.blind-button::before {
background-color: #fff;
}
#staff-photo .action-frame a.blind-button .text {
color: #fff;
padding: 0 0 0 26px;
font-size: 1.3rem;
line-height: 1;
transition: color .3s ease-out;
display: block;
}
#staff-photo .action-frame a.blind-button .icon {
fill: #fff;
width: 20px;
height: 20px;
left: 15px;
margin-top: -10px;
}
#staff-photo .action-frame a.blind-button:hover .text {
color: #143265;
}
#staff-photo .action-frame a.blind-button:hover .icon {
fill: #143265;
} #staff-photo .action-frame .work-position, #staff-photo .action-frame .affiliation-salon {
font-size: 1.2rem;
line-height: 1;
padding-bottom: 8px;
color: #717071;
}
#staff-photo .action-frame .specialty_style {
font-size: 1.2rem;
color: #717071;
}
#staff-photo .staff_name_box {
text-align: center;
}
#staff-photo .action-frame .social-link {
padding-top: 20px;
margin: 0 auto;
text-align: center;
width: 50%;
}
#staff-photo .action-frame .social-link a {
background-color: #fff;
}
#staff-photo .action-frame .ja-name {
font-size: 1.8rem;
line-height: 1;
padding-bottom: 5px;
}
#staff-photo .action-frame .en-name {
font-size: 2.4rem;
line-height: 1.4;
}
#staff-photo .action-frame .reserve-direct-staff {
padding-top: 20px;
} #free-area .split-column {
padding-top: 10%;
}
#free-area .headline {
font-size: 1.8rem;
line-height: 1.8;
} #free-area .entry-body {
font-size: 1.4rem;
line-height: 1.6;
}
#free-area .entry-body p {
padding-top: 20px;
}
#free-area .entry-body p:nth-of-type(1) {
padding-top: 0;
} #curriculum-vitae .fixed-cv .cv {
font-size: 1.4rem;
line-height: 1.8;
padding-bottom: 30px;
}
#curriculum-vitae .fixed-cv .cv:nth-last-of-type(1) {
padding-bottom: 0;
}
#curriculum-vitae .fixed-cv .cv h4 {
font-weight: bold;
font-size: 1.4rem;
}
#curriculum-vitae .fixed-cv .cv dl {
display: flex;
flex-wrap: wrap;
}
#curriculum-vitae .fixed-cv .cv dt {
width: calc(30% - 10px);
padding-top: 5px;
}
#curriculum-vitae .fixed-cv .cv dd {
width: calc(70% - 10px);
padding-top: 5px;
} #curriculum-vitae .add-cv .cv {
padding-top: 30px;
}
#curriculum-vitae .add-cv .cv .particular-case {
line-height: 1.8;
}
#curriculum-vitae .add-cv .cv .particular-case h5 {
font-size: 1.4rem;
color: #143265;
}
#curriculum-vitae .add-cv .cv .particular-case p {
font-size: 1.4rem;
padding-top: 5px;
} #curriculum-vitae .add-cv .more-link {
font-size: 1.3rem;
} #look-at .editor ul li {
line-height: 1.75;
}
#look-at .look-at-frame { padding-top: 80px;
}
#look-at .look-at-frame:nth-of-type(1) {
padding-top: 30px;
}
#look-at .look-at-frame .add-headline {
width: calc(26% - 25px);
}
#look-at .look-at-frame .add-content {
margin-top: 5%; } #look-at .look-at-frame .add-headline h4 {
font-weight: normal;
font-size: 1.4rem;
border-bottom: 1px solid #143265;
line-height: 1.8;
} #look-at .youtube-contents {
position: relative;
width: 100%;
padding: 56.25% 0 0 0;
margin-bottom: 10px;
}
#look-at .youtube-contents iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} #look-at .add-content {
font-size: 1.4rem;
line-height: 1.8;
}
#look-at .add-content p {
padding-top: 20px;
}
#look-at .add-content p:nth-last-of-type(1) {
padding-top: 20px;
} #look-at .add-carousel .caption-text {
font-size: 1.0rem;
line-height: 1.2;
padding: 5px 0;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#look-at .add-carousel {
position: relative;
overflow: hidden;
}
#look-at .add-carousel .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(20, 50, 100, 0);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
z-index: 1;
}
#look-at .add-carousel .carousel-control {
display: flex;
justify-content: flex-end;
}
#look-at .add-carousel .add-carousel-next, #look-at .add-carousel .add-carousel-prev {
bottom: 0;
right: auto;
left: auto;
top: auto;
margin: 15px 0 0 1px;
position: relative;
background-color: #f8f9fa;
}
#look-at .add-carousel .add-carousel-next {
right: 0;
}
#look-at .add-carousel .add-carousel-prev {
right: 0;
}
#look-at .add-carousel .add-carousel-next.swiper-button-disabled, #look-at .add-carousel .add-carousel-prev.swiper-button-disabled {
cursor: default;
}
#look-at .add-carousel .add-carousel-next.swiper-button-disabled svg, #look-at .add-carousel .add-carousel-prev.swiper-button-disabled svg {
opacity: .2;
animation: none !important;
}
#look-at .add-carousel .swiper-button.move-next:hover svg {
animation: i-slide-r 640ms 1 forwards;
}
#look-at .add-carousel .swiper-button.move-prev:hover svg {
animation: i-slide-l 640ms 1 forwards;
} #collection-work .split-column {
padding-top: 10%;
}
#collection-work .headline-frame {
position: relative;
margin-bottom: 20px;
}
#collection-work .headline-frame .headline {
font-size: 1.8rem;
line-height: 1.8;
}
#collection-work .headline-frame p {
position: absolute;
right: 0;
bottom: 0;
font-size: 1.2rem;
} #collection-loop2 {
position: relative;
overflow: hidden;
}
#collection-loop2 a {
display: block;
height: 100%;
}
#collection-loop2 a .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(20, 50, 100, 0);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
z-index: 1;
}
#collection-loop2 .collection-loop-next, #collection-loop2 .collection-loop-prev {
top: 50%;
right: auto;
left: auto;
bottom: auto;
margin-top: -15px;
}
@media screen and (max-width:768px) {
#collection-loop2 .collection-loop-next, #collection-loop2 .collection-loop-prev {
top: 40%;
}
}
#collection-loop2 .collection-loop-next {
right: 0;
}
#collection-loop2 .collection-loop-prev {
left: 0;
} #collection-loop2 a:hover .overlay {
background-color: rgba(20, 50, 100, .6);
} #journal-individual .split-column {
padding-top: 10%;
}
#journal-individual .headline-frame {
position: relative;
margin-bottom: 20px;
}
#journal-individual .headline-frame .headline {
font-size: 1.8rem;
line-height: 1.8;
}
#journal-individual .headline-frame p {
position: absolute;
right: 0;
bottom: 0;
font-size: 1.2rem;
} #reserve-individual-direct {
display: block;
text-align: center;
margin: 80px 0;
}
#reserve-individual-direct a {
padding: 8% 20%;
display: block;
}
#reserve-individual-direct .reserve, #reserve-individual-direct .ja {
line-height: 1;
color: #143265;
transition: color .6s ease-out, letter-spacing .6s ease-out;
position: relative;
}
#reserve-individual-direct .reserve {
font-size: 4rem;
font-weight: 400;
padding-bottom: 10px;
}
#reserve-individual-direct .ja {
font-size: 1.2rem;
line-height: 1;
padding: 0;
position: relative;
}
#reserve-individual-direct .ja span span {
padding-left: 22px;
}
#reserve-individual-direct .ja svg {
width: 18px;
height: 18px;
position: absolute;
top: 50%;
left: 0;
margin-top: -13px;
fill: #143265;
}
#reserve-individual-direct .staff-icon {
padding-bottom: 15px;
}
#reserve-individual-direct .staff-icon img {
width: 60px;
height: 60px;
border-radius: 50%;
} #reserve-individual-direct .link-underline {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
padding: 2px 0 10px 0;
}
#reserve-individual-direct .link-underline::before, #reserve-individual-direct .link-underline::after {
content: "";
position: absolute;
z-index: -1;
height: 1px;
transition: left .6s ease-in-out, right .6s ease-in-out, opacity .6s .2s;
}
#reserve-individual-direct .link-underline::before {
left: 0;
right: 0;
bottom: 0;
background-color: transparent;
opacity: 1;
}
#reserve-individual-direct .link-underline::after {
left: 50%;
right: 50%;
bottom: 0;
background-color: #143265;
opacity: 0;
} #reserve-individual-direct a:hover .reserve {
letter-spacing: .3rem;
}
#reserve-individual-direct a:hover .link-underline::after {
left: 0;
right: 0;
opacity: 1;
} .outline-frame.first {
padding-top: 6%;
}
.outline-frame .and-info {
padding-top: 30px;
font-size: 1.4rem;
line-height: 1.6;
}
.outline-frame .and-info h4 {}
.outline-frame .and-info p {
padding-top: 10px;
}
.outline-frame .and-info p:nth-of-type(1) {
padding-top: 5px;
} .payment {
display: flex;
flex-wrap: wrap;
align-items: center
}
.payment li {
width: 20%;
}
.payment li img {
width: auto;
max-width: 100%;
max-height: 100%;
} #connected dl.allotment dt.location-head {
width: 100%;
padding-bottom: 0;
}
#connected dl.allotment dd.location-data {
width: 100%;
border-top: none;
}
#connected .jump-googlemap {
text-align: right;
}
#connected .jump-googlemap a {
font-size: 1.1rem;
} #connected .map-wrap {
overflow: hidden;
position: relative;
}
#connected #map-omotesando {
overflow: hidden;
background-color: rgba(0, 0, 0, .03);
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}  #drink-menu .split-column.drink .details-frame .detail {
border-bottom: 1px solid #F2F2F2;
}
#drink-menu .split-column.drink .details-frame .drink-image {
padding-bottom: 30px;
} #drink-menu .split-column.drink .menu-name {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 30px 0;
cursor: pointer;
border-top: 1px solid #F2F2F2;
}
#drink-menu .split-column.drink .menu-name h3 {
color: #000;
transition: padding .3s ease-out, color .3s ease-out;
font-weight: normal;
}
#drink-menu .split-column.drink .menu-name h3 span:nth-of-type(1) {
line-height: 1;
font-size: 1.4rem;
}
#drink-menu .split-column.drink .menu-name h3 span:nth-of-type(2) {
font-size: 1.1rem;
padding-left: 10px;
}
#drink-menu .split-column.drink .menu-name:hover h3 {
color: #999;
padding-left: 10px;
}
#drink-menu .split-column.drink .menu-name.active:hover h3 {
color: #000;
padding-left: 0;
} #drink-menu .split-column.drink .menu-name .condition {
font-size: 1.4rem;
line-height: 1;
position: relative;
padding: 0 50px 0 0;
color: #939393;
text-align: right;
} #drink-menu .split-column.drink .view-switching {
background-color: #F2F2F2;
text-align: center;
position: absolute;
top: -24px;
right: 0;
overflow: hidden;
width: 100px;
}
#drink-menu .split-column.drink .view-switching .switching-inner {
display: flex;
transition: left .3s ease-out;
position: relative;
left: 0;
width: 200px;
}
#drink-menu .split-column.drink .view-btn {
font-size: 1.0rem;
cursor: pointer;
line-height: 2.4;
padding: 0px 0;
width: 100px;
display: block;
}
#drink-menu .split-column.drink .view-switching.active .switching-inner {
left: -100%;
} #drink-menu .split-column.drink .menu-name .i-plus {
width: 15px;
height: 15px;
position: absolute;
right: 10px;
top: 50%;
margin-top: -8px;
}
#drink-menu .split-column.drink .menu-name .i-plus::before, #drink-menu .split-column.drink .menu-name .i-plus::after {
content: "";
display: block;
position: absolute;
background-color: #000;
transition: 0.5s;
transform: translateZ(0);
}
#drink-menu .split-column.drink .menu-name .i-plus::before {
width: 1px;
height: 100%;
left: 7px;
top: 0;
margin-left: 0px;
}
#drink-menu .split-column.drink .menu-name .i-plus::after {
width: 100%;
height: 1px;
left: 0;
top: 7px;
margin-top: 0px;
}
#drink-menu .split-column.drink .menu-name.active .i-plus::before {
transform: rotate(90deg);
} #drink-menu .split-column.drink .detail-txt {
padding-bottom: 30px;
display: none;
}
#drink-menu .split-column.drink .detail-txt p {
font-size: 1.3rem;
line-height: 1.6;
padding-bottom: 10px;
}
#drink-menu .split-column.drink .detail-txt p:nth-last-of-type(1) {
padding-bottom: 0;
}
#drink-menu .add-irregular {
text-align: right;
font-size: 1.1rem;
padding-top: 10px;
} #head-cover-stack.collection {
position: absolute;
height: 100vh;
width: 100%;
top: 0;
left: 0;
} #refine-btn-wrap {
position: absolute;
right: 0;
top: 0;
font-size: 1.4rem;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
}
#refine-btn {
display: flex;
align-items: center;
cursor: pointer;
}
#refine-btn span {
padding-right: 5px;
transition: color .6s ease-out;
color: #143265;
}
#refine-btn svg {
width: 15px;
height: 15px;
transition: fill .6s ease-out;
fill: #143265;
} #refine-btn:hover span {
color: #143265;
}
#refine-btn:hover svg {
fill: #143265;
} #refine-btn-wrap.active {
color: #143265;
}
#refine-btn-wrap.active svg {
fill: #143265;
}
#refine-btn-wrap::before {
background-color: #143265;
height: 2px;
width: 100%;
content: "";
display: block;
position: absolute;
bottom: 0;
left: -105%;
transition: left .3s ease-out .3s;
}
#refine-btn-wrap.active::before {
left: 0;
} .page-header-lower.collection {
padding-bottom: 30px;
}
.page-header-lower.collection .cat-target ul {
list-style: none;
display: flex;
}
.page-header-lower.collection .cat-target li {
margin-right: 30px;
}
.page-header-lower.collection .cat-target li:nth-last-of-type(1) {
margin-right: 0;
}
.page-header-lower.collection .cat-target a {
font-size: 1.4rem;
color: #000;
}
.page-header-lower.collection .cat-target a.link-underline::before {
background-color: #000;
} #cat-genre {
background-color: #f8f9fa;
text-align: left;
display: none;
margin-bottom: 80px;
}
.categories .genre:nth-of-type(n + 2) {
padding-top: 40px;
}
.categories .cat-frame {
padding: 40px 0;
max-width: 1260px;
margin: 0 auto;
}
.categories .genre-head {
padding-bottom: 15px;
}
.categories .genre-head p {
line-height: 1;
}
.categories .genre-head p br {
display: none;
}
.categories .genre-head p span.en {
font-size: 1.4rem;
font-weight: 400;
color: #143265;
}
.categories .genre-head p span.ja {
font-size: 1.0rem;
font-weight: normal;
padding-left: 10px;
}
.categories .genre ul {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.categories .genre li {
width: calc((100% / 5) - 5px);
margin-bottom: 5px;
margin-right: 5px;
}
.categories .genre li.empty {
margin-bottom: 0;
}
.categories .genre a {
font-size: 1.2rem;
color: #000;
background-color: #fff;
border-radius: 20px;
padding: 8px 4px;
display: block;
text-align: center;
line-height: 1;
transition: background-color .3s ease-out, color .2s ease-out;
}
.categories .genre a:hover {
background-color: #143265;
color: #fff;
}
.single-blog-page .categories .genre li {
width: calc((100% / 5) - 5px);
margin-bottom: 5px;
margin-right: 5px;
}
@media screen and (max-width:768px) {
.single-blog-page .categories .genre li {
width: calc((100% / 2) - 5px);
}
.single-blog-page .categories .genre li:nth-child(2n) {
margin-right: 0;
}
}  #refine-close-btn {
text-align: center;
border-top: 1px solid #fff;
cursor: pointer;
padding: 10px;
transition: background-color .3s ease-out;
display: block;
color: #000;
}
#refine-close-inner {
position: relative;
display: inline-block;
}
#refine-close-btn .en {
font-size: 1.2rem;
line-height: 1;
padding-right: 18px;
}
#refine-close-btn .i-plus {
width: 13px;
height: 13px;
transition: 0.5s;
transform: translateZ(0) rotate(-225deg);
position: absolute;
right: 0;
top: 50%;
margin-top: -5px;
}
#refine-close-btn .i-plus:before, #refine-close-btn .i-plus:after {
content: "";
display: block;
position: absolute;
background-color: #000;
}
#refine-close-btn .i-plus:before {
width: 1px;
height: 100%;
left: 6px;
top: 0;
margin-left: 0px;
}
#refine-close-btn .i-plus:after {
width: 100%;
height: 1px;
left: 0;
top: 6px;
margin-top: 0px;
}
#refine-close-btn:hover {
background-color: #eff2f4;
}
#refine-close-btn:hover .i-plus {
transform: rotate(225deg);
} #cllection-list {
margin: 0 5px;
}
#cllection-list .cllection-grid {
position: relative;
}
#cllection-list .item-content {
position: relative;
padding-top: 100%;
}
#cllection-list .item-content a {
display: block;
position: absolute;
width: calc(100% - 6px);
height: calc(100% - 6px);
top: 3px;
left: 3px;
} #cllection-list .hover-caption {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
color: #fff;
opacity: 0;
transition: opacity .4s cubic-bezier(0.694, 0.048, 0.335, 1);
}
#cllection-list .hover-caption h2, #cllection-list .hover-caption p {
position: absolute;
padding: 0 10px;
width: calc(100% - 20px);
left: 0;
}
#cllection-list .hover-caption h2 {
font-size: 1.2rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1;
bottom: 15px;
}
#cllection-list .hover-caption p.collection-name {
font-size: 1.0rem;
top: 10px;
}
#cllection-list .hover-caption p.collection-num {
bottom: 40px;
}
#cllection-list .hover-caption p.collection-num span {
line-height: 1;
}
#cllection-list .hover-caption p.collection-num span:nth-of-type(1) {
font-size: 1.6rem;
padding-right: 4px;
}
#cllection-list .hover-caption p.collection-num span:nth-of-type(2) {
font-size: 4.6rem;
padding-right: 8px;
}
#cllection-list .item-content .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
}
#cllection-list .item-content a:hover .hover-caption {
opacity: 1;
}
#cllection-list .item-content a:hover .overlay {
background-color: rgba(20, 50, 100, .4);
} #cllection-list .cllection-thumb {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#cllection-list .cllection-thumb span {
transform: translateY(-50%) translateX(-50%);
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
display: block;
}
#cllection-list .cllection-thumb span img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}   .layout1 .cllection-item:nth-of-type(1) {
width: 25%;
}
.layout1 .cllection-item:nth-of-type(2) {
width: 25%;
}
.layout1 .cllection-item:nth-of-type(3) {
width: 25%;
}
.layout1 .cllection-item:nth-of-type(4) {
width: 25%;
}
.layout1 .cllection-item:nth-of-type(5) {
width: 50%;
}
.layout1 .cllection-item:nth-of-type(6) {
width: 25%;
}
.layout1 .cllection-item:nth-of-type(7) {
width: 50%;
}
.layout1 .cllection-item:nth-of-type(8) {
width: 50%;
}
.layout1 .cllection-item:nth-of-type(9) {
width: 50%;
}
.layout1 .cllection-item:nth-of-type(10) {
width: 25%;
}
.layout1 .cllection-item:nth-of-type(11) {
width: 50%;
}
.layout1 .cllection-item:nth-of-type(12) {
width: 25%;
}
.layout1 .cllection-item:nth-of-type(13) {
width: 25%;
}
.layout1 .cllection-item:nth-of-type(14) {
width: 25%;
}
.layout1 .cllection-item:nth-of-type(15) {
width: 25%;
}
.layout1 .cllection-item:nth-of-type(16) {
width: 50%;
} #cllection-list .layout1 .cllection-item:nth-of-type(1) .item-content {
padding-top: 200%;
}
#cllection-list .layout1 .cllection-item:nth-of-type(1) .cllection-thumb span {
width: 200%;
}
#cllection-list .layout1 .cllection-item:nth-of-type(1) .cllection-thumb img {
width: auto;
height: 100%;
} #cllection-list .layout1 .cllection-item:nth-of-type(5) .item-content {
padding-top: 50%;
}  #cllection-list .layout1 .cllection-item:nth-of-type(7) .item-content {
padding-top: 50%;
}  #cllection-list .layout1 .cllection-item:nth-of-type(9) .item-content {
padding-top: 50%;
}  #cllection-list .layout1 .cllection-item:nth-of-type(10) .item-content {
padding-top: 200%;
}
#cllection-list .layout1 .cllection-item:nth-of-type(10) .cllection-thumb span {
width: 200%;
}
#cllection-list .layout1 .cllection-item:nth-of-type(10) .cllection-thumb img {
width: auto;
height: 100%;
} #cllection-list .layout1 .cllection-item:nth-of-type(16) .item-content {
padding-top: 50%;
}  .layout2 .cllection-item:nth-of-type(1) {
width: 25%;
}
.layout2 .cllection-item:nth-of-type(2) {
width: 25%;
}
.layout2 .cllection-item:nth-of-type(3) {
width: 50%;
}
.layout2 .cllection-item:nth-of-type(4) {
width: 50%;
}
.layout2 .cllection-item:nth-of-type(5) {
width: 25%;
}
.layout2 .cllection-item:nth-of-type(6) {
width: 50%;
}
.layout2 .cllection-item:nth-of-type(7) {
width: 25%;
}
.layout2 .cllection-item:nth-of-type(8) {
width: 25%;
}
.layout2 .cllection-item:nth-of-type(9) {
width: 50%;
}
.layout2 .cllection-item:nth-of-type(10) {
width: 25%;
}
.layout2 .cllection-item:nth-of-type(11) {
width: 25%;
}
.layout2 .cllection-item:nth-of-type(12) {
width: 25%;
}
.layout2 .cllection-item:nth-of-type(13) {
width: 25%;
}
.layout2 .cllection-item:nth-of-type(14) {
width: 50%;
}
.layout2 .cllection-item:nth-of-type(15) {
width: 50%;
}
.layout2 .cllection-item:nth-of-type(16) {
width: 25%;
} #cllection-list .layout2 .cllection-item:nth-of-type(4) .item-content {
padding-top: 50%;
}  #cllection-list .layout2 .cllection-item:nth-of-type(6) .item-content {
padding-top: 50%;
}  #cllection-list .layout2 .cllection-item:nth-of-type(10) .item-content {
padding-top: 200%;
}
#cllection-list .layout2 .cllection-item:nth-of-type(10) .cllection-thumb span {
width: 200%;
}
#cllection-list .layout2 .cllection-item:nth-of-type(10) .cllection-thumb img {
width: auto;
height: 100%;
} #cllection-list .layout2 .cllection-item:nth-of-type(12) .item-content {
padding-top: 200%;
}
#cllection-list .layout2 .cllection-item:nth-of-type(12) .cllection-thumb span {
width: 200%;
}
#cllection-list .layout2 .cllection-item:nth-of-type(12) .cllection-thumb img {
width: auto;
height: 100%;
} #cllection-list .layout2 .cllection-item:nth-of-type(14) .item-content {
padding-top: 50%;
}  #cllection-list .layout2 .cllection-item:nth-of-type(15) .item-content {
padding-top: 50%;
}  .layout3 .cllection-item:nth-of-type(1) {
width: 25%;
}
.layout3 .cllection-item:nth-of-type(2) {
width: 50%;
}
.layout3 .cllection-item:nth-of-type(3) {
width: 25%;
}
.layout3 .cllection-item:nth-of-type(4) {
width: 25%;
}
.layout3 .cllection-item:nth-of-type(5) {
width: 50%;
}
.layout3 .cllection-item:nth-of-type(6) {
width: 25%;
}
.layout3 .cllection-item:nth-of-type(7) {
width: 25%;
}
.layout3 .cllection-item:nth-of-type(8) {
width: 25%;
}
.layout3 .cllection-item:nth-of-type(9) {
width: 25%;
}
.layout3 .cllection-item:nth-of-type(10) {
width: 50%;
}
.layout3 .cllection-item:nth-of-type(11) {
width: 50%;
}
.layout3 .cllection-item:nth-of-type(12) {
width: 25%;
}
.layout3 .cllection-item:nth-of-type(13) {
width: 25%;
}
.layout3 .cllection-item:nth-of-type(14) {
width: 25%;
}
.layout3 .cllection-item:nth-of-type(15) {
width: 50%;
}
.layout3 .cllection-item:nth-of-type(16) {
width: 25%;
} #cllection-list .layout3 .cllection-item:nth-of-type(3) .item-content {
padding-top: 200%;
}
#cllection-list .layout3 .cllection-item:nth-of-type(3) .cllection-thumb span {
width: 200%;
}
#cllection-list .layout3 .cllection-item:nth-of-type(3) .cllection-thumb img {
width: auto;
height: 100%;
} #cllection-list .layout3 .cllection-item:nth-of-type(5) .item-content {
padding-top: 50%;
}  #cllection-list .layout3 .cllection-item:nth-of-type(6) .item-content {
padding-top: 200%;
}
#cllection-list .layout3 .cllection-item:nth-of-type(6) .cllection-thumb span {
width: 200%;
}
#cllection-list .layout3 .cllection-item:nth-of-type(6) .cllection-thumb img {
width: auto;
height: 100%;
} #cllection-list .layout3 .cllection-item:nth-of-type(7) .item-content {
padding-top: 200%;
}
#cllection-list .layout3 .cllection-item:nth-of-type(7) .cllection-thumb span {
width: 200%;
}
#cllection-list .layout3 .cllection-item:nth-of-type(7) .cllection-thumb img {
width: auto;
height: 100%;
} #cllection-list .layout3 .cllection-item:nth-of-type(10) .item-content {
padding-top: 50%;
}  #cllection-list .layout3 .cllection-item:nth-of-type(15) .item-content {
padding-top: 50%;
}  .single-format-standard #collection #page-header {
padding: 0;
}
.single-hair-catalog .vegas-slide-inner {
background-position: 0 10% !important;
}  #head-cover-stack.collection [id^="curtain-"] {
position: absolute;
background-color: #fff;
display: block;
z-index: auto;
transition: all .8s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#head-cover-stack.collection .overlay {
background-color: rgba(20, 50, 100, 0);
position: absolute;
height: calc(100% - 70px);
width: 100%; left: 0;
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
} #head-cover-stack.collection #page-header {
padding: 0;
position: relative;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#head-cover-stack.collection .page-header-upper {
color: #000;
transition: color .8s ease-out;
position: relative;
padding: 0 0 5% 0;
width: 100%;
} #head-cover-stack.collection .page-header-prop {
color: #000;
transition: color .8s ease-out;
position: absolute;
left: 0;
bottom: 80px;
width: 100%;
}
#head-cover-stack.collection .prop-inner {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
#head-cover-stack.collection .props:nth-of-type(1) {
width: 50%;
text-align: left;
}
#head-cover-stack.collection .props:nth-of-type(2) {
width: 50%;
text-align: right;
}
#head-cover-stack.collection .collection-num span {
line-height: 1;
}
#head-cover-stack.collection .collection-num span:nth-of-type(1) {
font-size: 1.6rem;
padding-right: 4px;
}
#head-cover-stack.collection .collection-num span:nth-of-type(2) {
font-size: 5.6rem;
padding-right: 8px;
}
#head-cover-stack.collection .collection-name {
font-size: 1.2rem;
}
#head-cover-stack.collection .collection-produce {
font-size: 1.2rem;
} #head-cover-stack.collection.active #curtain-top, #head-cover-stack.collection.active #curtain-bottom {
height: 0;
}
#head-cover-stack.collection.active #curtain-left, #head-cover-stack.collection.active #curtain-right {
width: 0;
}
#head-cover-stack.collection.active .overlay {
background-color: rgba(20, 50, 100, .3);
}
#head-cover-stack.collection.active .page-header-upper {
color: #fff;
}
#head-cover-stack.collection.active .page-header-prop {
color: #fff;
} #explanatory-note {
padding: 8% 0;
position: relative;
}
#explanatory-note .collection-num {
position: absolute;
right: calc(15% + 10px);
bottom: -29px;
}
#explanatory-note .collection-num span {
line-height: 1;
color: #f8f9fa;
letter-spacing: normal;
}
#explanatory-note .collection-num span:nth-of-type(1) {
font-size: 3.0vw;
padding-right: 4px;
}
#explanatory-note .collection-num span:nth-of-type(2) {
font-size: 20.0vw;
padding-right: 8px;
}
#explanatory-note .detail h2 {
font-size: 1.6rem;
line-height: 1.8;
}
#explanatory-note .detail p {
font-size: 1.4rem;
line-height: 1.6;
padding-top: 15px;
} #collection-photo {
display: flex;
flex-wrap: wrap;
}
#collection-photo .photo-frame, #collection-photo .credit-frame {
width: 50%;
}
#collection #page-header .vegas-slide-inner {
background-position: top center !important
} #collection-photo .frame-inner.photo {
position: relative;
}
#collection-photo .frame-inner.photo p:nth-of-type(2) {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#collection-photo .cllection-thumb img.magnify {
max-width: 100%;
height: 600px;
object-fit: cover;
}
#collection-photo .caption {
font-size: 1.3rem;
line-height: 1.8rem;
padding: 10px;
transition: color .4s ease-out;
} #collection-photo .credit-frame {
background-color: #f8f9fa;
display: flex;
justify-content: center;
align-items: center;
}
#collection-photo .frame-inner.credit {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px 0;
} #collection-photo.rotation {
flex-direction: column;
padding: 0 80px;
}
#collection-photo.rotation .photo-frame {
width: 55%;
}
#collection-photo.rotation .credit-frame {
width: 50%;
margin-top: -8%;
}
#collection-photo.rotation .photo-frame:nth-of-type(1) {
margin-left: auto;
margin-top: 20px;
}
#collection-photo.rotation .photo-frame:nth-of-type(2) {
margin-top: -3%;
}
#collection-photo.rotation .photo-frame:nth-of-type(3) {
margin-left: auto;
margin-top: -3%;
}
#collection-photo.rotation .photo-frame:nth-of-type(1) .frame-inner.photo .cllection-thumb {
transform: rotate(3deg);
}
#collection-photo.rotation .photo-frame:nth-of-type(2) .frame-inner.photo .cllection-thumb {
transform: rotate(-3deg);
}
#collection-photo.rotation .photo-frame:nth-of-type(3) .frame-inner.photo .cllection-thumb {
transform: rotate(3deg);
}
#collection-photo.rotation .frame-inner.credit {
padding: 15% 0;
} .frame-inner.credit p.credit-head {
color: #143265;
font-size: 1.4rem;
line-height: 1;
padding-bottom: 20px;
}
.frame-inner.credit p.produce-txt {
line-height: 1.6;
font-size: 1.4rem;
font-weight: bold;
}
.frame-inner.credit p.produce-by {
font-size: 1.4rem;
line-height: 1;
}
.frame-inner.credit p.work-position, .frame-inner.credit p.specialty_style {
font-size: 1.2rem;
line-height: 1;
padding-bottom: 5px;
color: #717071;
}
.frame-inner.credit p.specialty_style {
padding-top: 5px;
}
.frame-inner.credit .en-name {
font-size: 2.8rem;
line-height: 1.4;
padding-bottom: 0;
}
.frame-inner.credit .ja-name {
font-size: 1.4rem;
line-height: 1.4;
}
.frame-inner.credit .author-icon {
padding: 20px 0;
}
.frame-inner.credit .author-icon img {
width: 120px;
height: 120px;
border-radius: 50%;
}
.frame-inner.credit .profile-direct-link {
padding: 20px 0;
} .frame-inner.credit .reserve-direct-staff {
padding-top: 20px;
}
.frame-inner.credit .reserve-direct-staff a.blind-button {
padding: 20px 20px 20px 20px;
display: inline-block;
}
.frame-inner.credit .reserve-direct-staff a.blind-button {
background-color: #143265;
}
.frame-inner.credit .reserve-direct-staff a.blind-button::before {
background-color: #fff;
}
.frame-inner.credit .reserve-direct-staff a.blind-button .text {
color: #fff;
padding: 0 0 0 26px;
font-size: 1.3rem;
line-height: 1;
transition: color .3s ease-out;
display: block;
}
.frame-inner.credit .reserve-direct-staff a.blind-button .icon {
fill: #fff;
width: 20px;
height: 20px;
left: 15px;
margin-top: -10px;
}
.frame-inner.credit .reserve-direct-staff a.blind-button:hover .text {
color: #143265;
}
.frame-inner.credit .reserve-direct-staff a.blind-button:hover .icon {
fill: #143265;
} #collection-footer .share-frame {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #F2F2F2;
padding: 30px calc(8% + 10px);
}
#collection-footer .collection-name {
width: calc(100% - 250px);
}
#collection-footer .collection-name h2 {
font-size: 1.2rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#collection-footer .share-post {
width: 220px;
display: flex;
align-items: center;
justify-content: flex-end;
}
#collection-footer .share-post p {
font-size: 1.0rem;
padding-right: 15px;
} #collection-footer .categories {
display: block;
background-color: transparent;
margin-bottom: 80px;
}
#collection-footer .categories .genre-head p span.en {
font-size: 1.2rem;
}
#collection-footer .categories .genre:nth-of-type(n + 2) {
padding-top: 20px;
}
#collection-footer .categories .cat-frame {
padding: 30px 0 0 0;
}
#collection-footer .categories .genre-head {
padding-bottom: 8px;
}
#collection-footer .categories .genre a {
background-color: #f8f9fa;
}
#collection-footer .categories .genre a:hover {
background-color: #143265;
} #collection-related {
padding: 6% 0 0;
border-bottom: 1px solid #F2F2F2;
margin-bottom: 10%;
}
#collection-related .entry-list {
justify-content: flex-start;
}
#collection-related .entry-list:nth-last-of-type(1) {
border: none;
}
#collection-related .entry-list.index .entry-item {
width: calc((100% / 4) - 30px);
margin-right: 15px;
}
#collection-related .entry-list.index .entry-item:last-child {
margin-right: 0;
} #collection-related .related-header {
text-align: center;
padding: 0 0 20px 0;
}
#collection-related .related-header h3 {
font-size: 2.0rem;
color: #143265;
line-height: 1;
padding-bottom: 5px;
}
#collection-related .related-header p {
font-size: 1.2rem;
color: #143265;
line-height: 1;
} #collection-related .related-post {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#collection-related .cllection-item {
width: calc(25% - 20px);
}
#collection-related .item-content {
position: relative;
}
#collection-related .item-content a {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#collection-related .item-content h3 {
font-size: 1.2rem;
line-height: 1.4;
color: #000;
padding-top: 15px;
} #collection-related .hover-caption {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
color: #fff;
opacity: 1;
transition: opacity .4s cubic-bezier(0.694, 0.048, 0.335, 1);
}
#collection-related .hover-caption p {
position: absolute;
}
#collection-related .hover-caption p.collection-name {
font-size: 1.0rem;
bottom: 0px;
right: 10px;
}
#collection-related .hover-caption p.collection-num {
bottom: 15px;
right: 10px;
}
#collection-related .hover-caption p.collection-num span {
line-height: 1;
}
#collection-related .hover-caption p.collection-num span:nth-of-type(1) {
font-size: 1.6rem;
padding-right: 4px;
}
#collection-related .hover-caption p.collection-num span:nth-of-type(2) {
font-size: 4.6rem;
}
#collection-related .item-content .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
}
#collection-related .item-content a:hover .hover-caption {
opacity: 1;
}
#collection-related .item-content a:hover .overlay {
background-color: rgba(20, 50, 100, .4);
} #collection-related .cllection-item-inner {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#collection-related .cllection-thumb {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#collection-related .cllection-thumb span {
transform: translateY(-50%) translateX(-50%);
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
display: block;
}
#collection-related .thumb-adjust img, #collection-related .thumb-adjust span:nth-of-type(2) img {
width: 100%;
max-height: 180px;
object-fit: cover;
object-position: top center;
}
@media screen and (max-width:768px) {
#head-cover-stack.collection .page-header-prop {
padding: 0 8%;
box-sizing: border-box;
}
.single-hair-catalog .vegas-slide-inner {
background-position: center center !important
}
#head-cover-stack.collection .prop-inner, .single-hair-catalog .explanatory-note .split-column, #collection-footer .share-frame {
display: block;
}
#head-cover-stack.collection .props:nth-of-type(1), .split-column > .headline-frame, .split-column > .details-frame, #collection-footer .collection-name {
width: 95% !important;
margin-bottom: 15px;
}
#collection-related .entry-list.index .entry-item {
width: 90%;
margin-right: auto;
}
#collection-related .entry-list.index .entry-item:last-child {
margin-right: auto;
}
#cllection-list .hover-caption {
display: none;
}
#collection-photo, #collection-photo.rotation {
display: block;
padding: 0;
}
#collection-photo .photo-frame, #collection-photo .credit-frame {
width: 90%;
margin: 0 auto;
box-sizing: border-box;
}
#collection-photo.rotation .photo-frame, #collection-photo.rotation .credit-frame {
width: 80%;
margin: 0 auto;
box-sizing: border-box;
}
#collection-photo.rotation .photo-frame:nth-of-type(1) .frame-inner.photo .cllection-thumb {
transform: rotate(10deg);
}
#collection-photo.rotation .photo-frame:nth-of-type(2) .frame-inner.photo .cllection-thumb {
transform: rotate(-8deg);
}
#collection-photo.rotation .photo-frame:nth-of-type(3) .frame-inner.photo .cllection-thumb {
transform: rotate(3deg);
}
#collection-photo .cllection-thumb img.magnify {
height: auto;
}
#collection-photo.rotation .photo-frame:nth-of-type(3) {
margin-left: 0;
}
#collection-footer .categories {
padding: 30px calc(8% + 10px)
}
} #journal-list .categories h4 {
color: #143265;
font-weight: normal;
}
#journal-list .category-page-category-list {
margin-bottom: 5%;
justify-content: space-between;
}
#journal-list .categories .category-page-category-list {
justify-content: flex-start;
}
#journal-list .categories .category-page-category-list.category-item li {
width: calc(100% / 5);
margin: 0 0 5px 0;
}
#journal-list .categories .category-page-category-list.category-item li a {
border-radius: 0;
margin-right: 8px;
padding: 8px 0;
}
#journal-list .categories .category-page-category-list.category-item li a:nth-child(5n) {
margin-right: 0;
}
#journal-list .categories li .author a {
display: flex;
align-items: center;
padding: 0;
background: none;
}
@media screen and (max-width:768px) {
.categories .genre li, #journal-list .categories .category-page-category-list.category-item li {
width: 45%;
}
}  #original-menu-header .header-upper h2 {
font-weight: 400;
font-size: 4.2rem;
line-height: 1;
padding-bottom: 30px;
}
#original-menu-header .header-upper h2 br {
display: none;
}
#original-menu-header .header-upper h2 > span:nth-of-type(1) {
padding-bottom: 10px;
}
#original-menu-header .header-upper h2 > span:nth-of-type(2) {
margin-top: -15px;
}
#original-menu-header .header-lower h3 {
font-size: 2.2rem;
font-weight: normal;
line-height: 1.4;
padding-bottom: 10px;
}
#original-menu-header .header-lower p {
font-size: 1.4rem;
line-height: 1.6;
padding-bottom: 0;
}
#original-menu-header .header-lower p:nth-of-type(1) {
padding-top: 0;
}  #original-menu-index {
position: relative;
padding-top: 60px;
}
#original-menu-index .oroginal-menu-list ul {
list-style: none;
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
justify-content: space-between;
}
#original-menu-index .oroginal-menu-list li {
width: calc(50% - 60px);
margin-bottom: 40px;
} #original-menu-index .oroginal-menu-list li:nth-of-type(even) {
margin-top: 200px;
}
#original-menu-index .oroginal-menu-list a {
display: block;
} #original-menu-index .bg {
width: 72%;
height: 14%;
background-color: #f8f9fa;
position: absolute;
opacity: 0;
z-index: -1;
}
#original-menu-index .bg.top {
right: 0;
top: -12%;
transition: top 1.4s cubic-bezier(.56, .08, .09, .96) 1.4s, opacity 1.4s cubic-bezier(.56, .08, .09, .96) 1.4s;
}
#original-menu-index .bg.left {
left: 0;
top: 15%;
transition: top 1.4s cubic-bezier(.56, .08, .09, .96) 1.4s, opacity 1.4s cubic-bezier(.56, .08, .09, .96) 1.4s;
}
#original-menu-index .bg.right {
right: 0;
bottom: 13%;
transition: bottom 1.4s cubic-bezier(.56, .08, .09, .96) 1.4s, opacity 1.4s cubic-bezier(.56, .08, .09, .96) 1.4s;
}
#original-menu-index .bg.top.appear {
top: -6%;
opacity: 1;
}
#original-menu-index .bg.left.appear {
top: 21%;
opacity: 1;
}
#original-menu-index .bg.right.appear {
bottom: 19%;
opacity: 1;
} #original-menu-index .end-logo {
position: absolute;
left: 0;
bottom: -130px;
width: 58%;
overflow: hidden;
color: #143265;
opacity: .05;
z-index: -1;
}
#original-menu-index .end-logo img { width: 100%;
height: auto;
position: relative;
left: -30px;
}
#original-menu-index .end-logo > span {
position: absolute;
bottom: 150px;
left: 280px;
font-size: 3.4rem;
} #original-menu-index .oroginal-menu-list .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
z-index: 1;
}
#original-menu-index .oroginal-menu-list .caption {
position: absolute;
text-align: center;
width: calc(100% - 30px);
left: 0;
bottom: 30px;
padding: 0 15px;
display: block;
color: #fff;
z-index: 1;
}
#original-menu-index .oroginal-menu-list .caption .en {
line-height: 1;
font-size: 4.2rem;
display: block;
padding-bottom: 20px;
letter-spacing: .1rem;
font-weight: 400;
}
#original-menu-index .oroginal-menu-list .caption .ja {
line-height: 1;
font-size: 1.8rem;
display: block;
}
#original-menu-index .oroginal-menu-list a {
color: #000;
}
#original-menu-index .oroginal-menu-list a .link-underline {
font-size: 1.3rem;
margin-top: 10px;
} #original-menu-index .oroginal-menu-list h2 {
font-size: 1.6rem;
line-height: 1.6rem;
padding-top: 20px;
transition: color .4s ease-out;
}
#original-menu-index .oroginal-menu-list p:nth-of-type(1) {
font-size: 1.3rem;
line-height: 1.8rem;
padding-top: 10px;
transition: color .4s ease-out;
}
#original-menu-index .oroginal-menu-list p.more-link {
padding-top: 0;
} #original-menu-index .oroginal-menu-list a:hover .overlay {
background-color: rgba(0, 0, 0, .4);
}
#original-menu-index .oroginal-menu-list a:hover {
color: #999;
} #original-menu-index .oroginal-menu-list .more-link {
margin-top: 15px;
} #original-menu-index .oroginal-menu-list a:hover .more-link {
color: #999;
}
#original-menu-index .oroginal-menu-list a:hover .more-link svg {
fill: #999;
}
#original-menu-index .oroginal-menu-list a:hover .link-underline.display::after {
right: 0;
opacity: 1;
transition: left .3s ease-out, right .3s ease-out;
}
@media screen and (max-width:768px) {
#original-menu-header .header-lower h3 {
width: 80%;
}
#original-menu-index .oroginal-menu-list .caption .en {
font-size: 2.2rem;
}
#original-menu-index .oroginal-menu-list .caption .ja {
font-size: 1.2rem;
}
#original-menu-index .oroginal-menu-list h2 {
font-size: 1.5rem;
}
#original-menu-index .oroginal-menu-list li {
width: calc(50% - 15px);
margin-bottom: 40px;
}
#original-menu-index .oroginal-menu-list li:nth-of-type(even) {
margin-top: 100px;
}
}  #original-menu #head-cover {
margin-right: 80px;
position: relative; min-height: 500px;
}
#head-cover-stack.original-menu {
position: absolute;
width: calc(100% - 80px);
height: calc(100% - 70px);
min-height: 500px;
top: 0;
left: 0;
} #head-cover-stack.original-menu [id^="curtain-"] {
position: absolute;
background-color: #fff;
display: block;
z-index: auto;
transition: all .8s cubic-bezier(0.785, 0.135, 0.15, 0.86);
} #head-cover-stack.original-menu #page-header {
padding: 0;
text-align: left;
height: calc(100% - 70px);
width: 100%;
}
#head-cover-stack.original-menu #page-header .overlay {
background-color: rgba(0, 0, 0, 0);
position: absolute;
height: calc(100% - 70px);
width: 100%;
top: 70;
left: 0;
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
}
#head-cover-stack.original-menu .page-header-upper {
color: #000;
transition: color .8s ease-out;
position: absolute;
bottom: 120px;
left: 80px;
padding-bottom: 0;
}
#head-cover-stack.original-menu #page-header #headline {
font-weight: 400;
font-size: 5vw;
line-height: .8;
}
#head-cover-stack.original-menu #page-header #sub-headline {
font-weight: 400;
font-size: 1.6rem;
line-height: 1.2;
padding-bottom: 10px;
}
#head-cover-stack.original-menu #page-header .menu-name {
font-size: 1.2rem;
padding-top: 10px;
} #head-cover-stack.original-menu .prop-badge {
color: #FFF;
transition: color .8s ease-out;
position: absolute; right:100px;
left:auto;
top:55%;
}
#head-cover-stack.original-menu .badge {
text-align: center;
border-bottom: 1px solid #FFF;
border-top: 1px solid #FFF;
line-height: 1.8;
}
#head-cover-stack.original-menu .badge p:nth-of-type(1) {
padding-top: 10px;
font-size: 1.0rem;
}
#head-cover-stack.original-menu .badge p:nth-of-type(2) {
padding-bottom: 10px;
font-size: 1.2rem;
} #head-cover-stack.original-menu .prop-chart {
color: #FFF;
position: absolute;
left: 80px;
top: 60px;
}
#head-cover-stack.original-menu .chart {
width: 330px;
height: 240px;
position: relative;
}
#head-cover-stack.original-menu .chart img {
position: absolute;
top: 0;
left: 0;
}
#head-cover-stack.original-menu .chart img:nth-of-type(1) {
opacity: 0;
transition: opacity .4s ease-out 2.2s;
}
#head-cover-stack.original-menu .chart img:nth-of-type(2) {
transform: scale(0.01);
transition: transform .8s ease-in-out 2.6s;
}
#head-cover-stack.original-menu .chart img:nth-of-type(3) {
transform: scale(0.01);
transition: transform .8s ease-out 3.0s;
}
#head-cover-stack.original-menu .chart img:nth-of-type(4) {
transform: scale(0.01);
transition: transform .8s ease-in-out 3.2s;
}
.complete #head-cover-stack.original-menu .chart.appear img:nth-of-type(1) {
opacity: 1;
}
.complete #head-cover-stack.original-menu .chart.appear img:nth-of-type(2) {
transform: scale(1);
}
.complete #head-cover-stack.original-menu .chart.appear img:nth-of-type(3) {
transform: scale(1);
}
.complete #head-cover-stack.original-menu .chart.appear img:nth-of-type(4) {
transform: scale(1);
} #original-menu #ctrl-directjump {
position: absolute;
z-index: 5;
top: 70px;
right: -50px;
width: 90px;
visibility: hidden;
opacity: 0;
transition: visibility .3s ease-out .2s, opacity .6s ease-out .3s;
}
#original-menu #ctrl-directjump a {
position: relative;
display: flex;
justify-content: flex-end;
text-align: right;
margin-bottom: 8px;
color: #000;
}
#original-menu #ctrl-directjump a:nth-of-type(1) {
transition: right .5s ease-out .8s;
}
#original-menu #ctrl-directjump a:nth-of-type(2) {
transition: right .5s ease-out 1.0s;
}
#original-menu #ctrl-directjump a:nth-of-type(3) {
transition: right .5s ease-out 1.2s;
}
#original-menu #ctrl-directjump a:nth-of-type(4) {
transition: right .5s ease-out 1.4s;
}
#original-menu #ctrl-directjump a:nth-of-type(5) {
transition: right .5s ease-out 1.6s;
}
#original-menu #ctrl-directjump a:before {
content: "";
position: absolute;
top: 50%;
right: 18px;
width: 20px;
height: 1px;
background-color: #000;
transition: width .6s ease-in-out, background-color .6s ease-in-out;
margin-top: -1px;
}
#original-menu #ctrl-directjump a.current:before {
width: 60px;
}
#original-menu #ctrl-directjump a span {
display: flex;
width: 23px;
height: 23px;
border: 1px solid #000;
border-radius: 50%;
justify-content: center;
align-items: center;
font-size: 1.2rem;
line-height: 1.2;
} #original-menu .reserve-direct-now {
position: absolute;
right: -40px;
bottom: 20px;
}
#original-menu .reserve-direct-now a.blind-button {
padding: 20px 50px 20px 50px;
display: block;
background-color: #143265;
}
#original-menu .reserve-direct-now a.blind-button::before {
background-color: #fff;
}
#original-menu .reserve-direct-now a > span {
position: relative;
}
#original-menu .reserve-direct-now a.blind-button .text {
color: #fff;
padding: 0 0 0 46px;
font-size: 1.6rem;
line-height: 1;
transition: color .3s ease-out;
display: block;
}
#original-menu .reserve-direct-now a.blind-button .icon {
fill: #fff;
width: 20px;
height: 20px;
left: 15px;
margin-top: -10px;
}
#original-menu .reserve-direct-now a.blind-button:hover .text {
color: #143265;
}
#original-menu .reserve-direct-now a.blind-button:hover .icon {
fill: #143265;
} #head-cover-stack .deco-text {
position: absolute;
right: -110px;
top: 160px;
transform: rotate(90deg);
font-size: 1.3rem;
opacity: 0;
transition: opacity .6s ease-out .3s;
} #head-cover-stack.original-menu.active #curtain-top, #head-cover-stack.original-menu.active #curtain-bottom {
height: 0;
}
#head-cover-stack.original-menu.active #curtain-left, #head-cover-stack.original-menu.active #curtain-right {
width: 0;
}
#head-cover-stack.original-menu.active .overlay {
background-color: rgba(0, 0, 0, .05);
}
#head-cover-stack.original-menu.active .page-header-upper {
color: #fff; top:65%;
}
#head-cover-stack.original-menu.active .page-header-prop {
color: #fff;
}
#head-cover-stack.original-menu.active #ctrl-directjump {
visibility: visible;
opacity: 1;
}
#head-cover-stack.original-menu.active .deco-text {
opacity: 1;
top: 200px;
} #original-menu .section-title .deco-line {
font-size: 1.3rem;
line-height: 1.4;
padding-bottom: 3px;
border-bottom: 2px solid #143265;
}
#original-menu .connection-line {
position: absolute;
bottom: -30px;
left: 50%;
height: 60px;
width: 1px;
background-color: #000;
}
#original-menu #lecture .lecture-frame img {
max-width: 100%;
} #original-menu #preface {
text-align: center;
padding: 10% 0 8% 0;
}
#original-menu #preface .header-upper .section-title {
font-size: 3.0rem;
line-height: 1;
color: #000;
}
#original-menu #preface .header-upper h2 {
font-weight: normal;
font-size: 1.3rem;
line-height: 1;
padding-bottom: 10px;
}
#original-menu #preface .header-lower {
padding-top: 10px;
}
#original-menu #preface .header-lower p {
font-size: 1.5rem;
line-height: 2;
padding-bottom: 0;
}
#original-menu #preface .header-lower p:nth-of-type(1) {
padding-top: 0;
} #original-menu #concept {
position: relative;
padding-top: 6%;
}
#original-menu #concept::before {
content: "";
position: absolute;
top: -8%;
right: 0;
width: 30%;
height: 105%;
background-color: #000;
transition: top 1.4s cubic-bezier(.56, .08, .09, .96), opacity 1.4s ease-in-out;
opacity: 0;
}
.complete #original-menu #concept.appear::before {
top: 3%;
opacity: .08;
}
#original-menu #concept .concept-block {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
flex-direction: row-reverse;
position: relative;
} #original-menu #concept .concept-block .image-block {
width: 43%;
position: relative;
}
#original-menu #concept .concept-block .image-frame {
padding-right: 10%;
}
#original-menu #concept .menu-name {
color: #000;
position: absolute;
right: calc(10% + 10px);
bottom: -28px;
line-height: .8;
text-align: right;
opacity: .4;
}
#original-menu #concept .menu-name br {
display: none;
}
#original-menu #concept .menu-name p:nth-of-type(1) {
font-size: 1.2rem;
}
#original-menu #concept .menu-name p:nth-of-type(2) {
font-size: 7.0rem;
}
#original-menu #concept .menu-name p:nth-of-type(3) {
font-size: 7.0rem;
} #original-menu #concept .concept-block .hexagonal {
position: absolute;
bottom: 10%;
left: 20%;
width: 35%;
}
#original-menu #concept .concept-block .text-block {
width: 47%;
padding-bottom: 15%;
}
#original-menu #concept .concept-block .text-block h3 {
font-size: 2.0rem;
font-weight: normal;
line-height: 1.6;
padding-top: 20px;
}
#original-menu #concept .concept-block .text-block p {
font-size: 1.6rem;
line-height: 1.8;
padding-top: 10px;
} #original-menu #whatis {
position: relative;
padding-top: 18%;
padding-bottom: 10%;
}
#original-menu #whatis .section-title {
margin-bottom: 30px;
}
#original-menu #whatis::before {
content: "";
position: absolute;
top: 10%;
left: 0;
width: 60%;
height: 82%;
background-color: #000;
transition: top 1.4s cubic-bezier(.56, .08, .09, .96), opacity 1.4s ease-in-out;
opacity: 0;
}
.complete #original-menu #whatis.appear::before {
top: 18%;
opacity: .08;
}
#original-menu #whatis .whatis-block {
position: relative;
} #original-menu #whatis .whatis-block .image-block {
osition: relative;
}
#original-menu #whatis .whatis-block .image-block .image-frame img {
height: 450px;
object-fit: cover;
}
#original-menu #whatis .whatis-block .caption {
position: absolute;
bottom: 60px;
left: 60px;
}
#original-menu #whatis .whatis-block .caption p:nth-of-type(1) {
font-size: 1.4rem;
line-height: 1;
}
#original-menu #whatis .whatis-block .caption p:nth-of-type(2) {
font-size: 4.0rem;
line-height: 1.2;
} #original-menu #whatis .whatis-block .text-block {
padding: 40px 10% 0 10%;
text-align: center;
}
#original-menu #whatis .whatis-block .text-block h3 {
font-size: 2.0rem;
line-height: 1.6;
padding-bottom: 10px;
}
#original-menu #whatis .whatis-block .text-block p {
font-size: 1.4rem;
line-height: 1.8;
padding-top: 10px;
}
#original-menu #whatis .deco-logo {
position: absolute;
right: 30px;
bottom: -30px;
width: 160px;
} #original-menu #lecture {
padding-top: 0;
}
#original-menu #lecture .lecture-frame {
padding-top: 8%;
}
#original-menu #lecture .lecture-head p {
font-size: 1.2rem;
line-height: 1;
padding-bottom: 10px;
}
#original-menu #lecture .lecture-head h3 {
font-size: 1.8rem;
}
#original-menu #lecture .text-block {
padding-top: 20px;
}
#original-menu #lecture .text-block p {
line-height: 1.6;
font-size: 1.4rem;
}
#original-menu #lecture .text-block p:nth-of-type(n + 2) {
padding-top: 10px;
}
#original-menu #lecture .image-block {
padding-top: 30px;
} #original-menu #experience {
position: relative;
padding-top: 18%;
padding-bottom: 10%;
}
#original-menu #experience::before {
content: "";
position: absolute;
top: 0%;
right: 0;
width: 80%;
height: 79%;
background-color: #000;
transition: top 1.4s cubic-bezier(.56, .08, .09, .96), opacity 1.4s ease-in-out;
opacity: 0;
}
.complete #original-menu #experience.appear::before {
top: 21%;
opacity: .08;
}
#original-menu #experience .experience-block {
position: relative;
} #original-menu #experience .experience-block .image-block {
width: 43%;
position: relative;
}
#original-menu #experience .experience-block .image-frame {
padding-right: 10%;
}
#original-menu #experience .menu-name {
color: #000;
position: absolute;
right: calc(10% + 10px);
top: -40px;
line-height: .8;
text-align: right;
opacity: .2;
}
#original-menu #experience .menu-name br {
display: none;
}
#original-menu #experience .menu-name p:nth-of-type(1), #original-menu #experience .menu-name p:nth-of-type(2), #original-menu #experience .menu-name p:nth-of-type(3) {
font-size: 8.6rem;
} #original-menu #experience .experience-block .hexagonal {
position: absolute;
bottom: 10%;
left: 20%;
width: 35%;
}
#original-menu #experience .experience-block .text-block {
width: 45%;
padding-top: 15%;
}
#original-menu #experience .experience-block .text-block h3 {
font-size: 2.0rem;
font-weight: normal;
line-height: 1.6;
padding-top: 20px;
}
#original-menu #experience .experience-block .text-block p {
font-size: 1.6rem;
line-height: 1.8;
padding-top: 10px;
} #original-menu #experience .before-after {
padding-top: 6%;
}
#original-menu #experience .before-after h4 {
font-size: 3.4rem;
font-weight: normal;
line-height: 1;
}
#original-menu #experience .before-after .image-photo {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 30px;
}
#original-menu #experience .before-after .photo-frame {
width: calc((100% / 3) - 15px);
}
#original-menu #experience .before-after .photo-frame a {
display: block;
position: relative;
}
#original-menu #experience .before-after .photo-frame a .overlay-scale {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .3);
opacity: 0;
transition: opacity .3s ease-out;
}
#original-menu #experience .before-after .photo-frame a .overlay-scale img {
width: 30px;
height: auto;
}
#original-menu #experience .before-after .photo-frame a:hover .overlay-scale {
opacity: 1;
}
@media screen and (max-width:768px) {
#original-menu #ctrl-directjump {
display: none;
}
#head-cover-stack.original-menu {
width: 100%;
max-height: 530px;
top:70px;
}
#original-menu #head-cover {
margin-right: 0;
max-height: 480px;
}
#head-cover-stack.original-menu.active .page-header-upper {
bottom: 130px;
left: 10px;
}
#head-cover-stack.original-menu .prop-chart {
right: auto;
left: 10px;
}
#head-cover-stack.original-menu .chart {
width: 150px;
height: auto;
}
#original-menu .reserve-direct-now {
right: 0;
}
#head-cover-stack.original-menu .prop-badge {
right: 10px;
bottom:100px;
}
.complete #original-menu #concept.appear::before {
width: 60%;
height: 90%;
}
#original-menu .vegas-slide-inner, #original-menu .vegas-animation-kenburns {
background-position: top 50% left 0 !important;
}
#original-menu.hikari-treatment .vegas-slide-inner,
#original-menu .vegas-slide-inner{ background-color: #c1c8c1 !important;}	
.sp #original-menu .vegas-slide-inner, #original-menu .vegas-animation-kenburns {
background-position: top 0 left 0 !important;
}
.sp #head-cover-stack.original-menu .deco-text,.sp #head-cover-stack.original-menu .prop-chart {
display: none;
}
#original-menu #experience .before-after {
padding-left: 12%;
padding-right: 12%;
padding-top: 8%;
padding-bottom: 8%;
}
#original-menu #experience .before-after .image-photo {
display: block;
}
#original-menu #experience .before-after .photo-frame {
width: 100%;
}
#original-menu #experience .before-after .photo-frame:nth-of-type(n+2) {
margin-top: 25px;
}
#original-menu #preface .header-lower p br {
display: none;
}
#original-menu #concept .concept-block {
flex-wrap: wrap-reverse;
}
#original-menu #concept .concept-block .text-block h3 {
padding-top: 10px;
font-size: 1.8rem;
}
#original-menu #experience .experience-block .text-block, #original-menu #concept .concept-block .image-block, #original-menu #concept .concept-block .text-block {
width: 90%;
}
#original-menu #whatis .whatis-block .text-block {
padding: 40px 0 0;
}
#original-menu #experience .menu-name p:nth-of-type(1), #original-menu #experience .menu-name p:nth-of-type(2), #original-menu #experience .menu-name p:nth-of-type(3) {
font-size: 6rem;
}
#original-menu #concept .concept-block .image-frame {
padding-right: 0;
}
#original-menu #whatis .whatis-block .caption {
left: 10px;
bottom: 30px;
}
#original-menu #concept .concept-block .hexagonal {
top: 10%;
left: 0;
width: 100%;
}
}
@media screen and (max-width:567px) {
#original-menu #experience .before-after {
padding-left: 0;
padding-right: 0;
padding-top: 10%;
padding-bottom: 10%;
}
#original-menu #experience .before-after .heading h4 {
font-size: 2.0rem;
}
} #original-menu #originality {
position: relative;
padding-top: 12%;
}
#original-menu #originality::before {
content: "";
position: absolute;
top: 0%;
right: 0;
width: 80%;
height: 90%;
background-color: #000;
transition: top 1.4s cubic-bezier(.56, .08, .09, .96), opacity 1.4s ease-in-out;
opacity: 0;
}
.complete #original-menu #originality.appear::before {
top: 10%;
opacity: .08;
}
#original-menu #originality .originality-block {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
position: relative;
} #original-menu #originality .originality-logo {
position: absolute;
right: -5%;
bottom: -45%;
width: 58%;
color: #143265;
opacity: .05;
}
#original-menu #originality .originality-logo img { width: 100%;
height: auto;
position: relative;
left: -30px;
}
#original-menu #originality .originality-logo > span {
position: absolute;
bottom: 110px;
left: 210px;
font-size: 3.4rem;
} #original-menu #originality .originality-block .image-block {
width: calc(60% - 25px);
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#original-menu #originality .originality-block .image-block p {
width: calc(50% - 25px);
}
#original-menu #originality .originality-block .image-block p:nth-of-type(1) {
padding-top: 15%;
}
#original-menu #originality .originality-block .image-block p:nth-of-type(2) {
padding-top: 0;
} #original-menu #originality .originality-block .text-block {
width: calc(40% - 25px);
padding-bottom: 15%;
}
#original-menu #originality .originality-block .text-block h3 {
font-size: 2.0rem;
font-weight: normal;
line-height: 1.6;
padding-top: 20px;
}
#original-menu #originality .originality-block .text-block p {
font-size: 1.6rem;
line-height: 1.8;
padding-top: 10px;
} #original-menu .originality-explanation {
padding-top: 10%;
padding-bottom: 10%;
}
#original-menu .originality-explanation .header-upper .section-title {
font-size: 3.4rem;
line-height: 1;
}
#original-menu .originality-explanation .header-upper h3 {
font-weight: normal;
font-size: 1.3rem;
line-height: 1;
padding-bottom: 10px;
}
#original-menu .explanation-block {
padding-top: 60px;
width: 70%;
}
#original-menu .explanation-block:nth-of-type(1) {
padding-top: 30px;
}
#original-menu .explanation-block:nth-of-type(even) {
margin-left: auto;
}
#original-menu .explanation-block h4 {
font-size: 1.6rem;
line-height: 1.6;
padding-top: 20px;
}
#original-menu .explanation-block p {
font-size: 1.4rem;
line-height: 1.8;
padding-top: 10px;
}
#original-menu .explanation-block p img {
max-height: 280px;
object-fit: cover;
object-position: center;
} #original-menu #bellwether {
position: relative;
padding-top: 6%;
}
#original-menu #bellwether .frame-inner {
text-align: center;
}
#original-menu #bellwether .frame-inner .produce-txt {
line-height: 1.6;
font-size: 1.4rem;
font-weight: bold;
}
#original-menu #bellwether .frame-inner .en-name {
font-size: 2.8rem;
line-height: 1.4;
font-weight: 400;
color: #143265;
margin-top: -20px;
}
#original-menu #bellwether .frame-inner .ja-name {
font-size: 1.4rem;
line-height: 1.4;
color: #143265;
}
#original-menu #bellwether .frame-inner .author-icon {
padding: 20px 0 0 0;
}
#original-menu #bellwether .frame-inner .author-icon img {
width: 160px;
height: 160px;
border-radius: 50%;
}
#original-menu #bellwether .frame-inner .message p {
font-size: 1.4rem;
line-height: 1.8;
padding: 0 12%;
}
#original-menu #bellwether .frame-inner .profile-direct-link {
padding: 20px 0;
} #original-menu #bellwether .frame-inner .reserve-direct-staff {
padding-top: 20px;
}
#original-menu #bellwether .frame-inner .reserve-direct-staff a.blind-button {
padding: 20px 20px 20px 20px;
display: inline-block;
}
#original-menu #bellwether .frame-inner .reserve-direct-staff a.blind-button {
background-color: #143265;
}
#original-menu #bellwether .frame-inner .reserve-direct-staff a.blind-button::before {
background-color: #f8f9fa;
}
#original-menu #bellwether .frame-inner .reserve-direct-staff a.blind-button .text {
color: #fff;
padding: 0 0 0 26px;
font-size: 1.3rem;
line-height: 1;
transition: color .3s ease-out;
display: block;
}
#original-menu #bellwether .frame-inner .reserve-direct-staff a.blind-button .icon {
fill: #fff;
width: 20px;
height: 20px;
left: 15px;
margin-top: -10px;
}
#original-menu #bellwether .frame-inner .reserve-direct-staff a.blind-button:hover .text {
color: #143265;
}
#original-menu #bellwether .frame-inner .reserve-direct-staff a.blind-button:hover .icon {
fill: #143265;
} #original-menu #faq {
position: relative;
padding-top: 10%;
} #original-menu #faq .question-frame .question-detail {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
padding-top: 40px;
}
#original-menu #faq .question-detail .each-question {
width: calc(50% - 25px);
border-bottom: 1px solid #F2F2F2;
}
#original-menu #faq .each-question {} #original-menu #faq .question {
position: relative;
padding: 30px 0;
cursor: pointer;
border-top: 1px solid #F2F2F2;
padding-right: 40px;
}
#original-menu #faq .question h3 {
font-size: 1.4rem;
font-weight: normal;
color: #000;
transition: color .3s ease-out;
display: flex;
line-height: 1.4;
}
#original-menu #faq .question h3 span:nth-of-type(1) {
font-size: 1.3rem;
font-weight: 400;
width: 40px;
transition: padding .3s ease-out;
}
#original-menu #faq .question h3 span:nth-of-type(2) {
width: calc(100% - 40px);
}
#original-menu #faq .question:hover h3 {
color: #143265;
}
#original-menu #faq .question:hover h3 span:nth-of-type(1) {
padding-left: 10px;
}
#original-menu #faq .question.active h3 {
color: #143265;
}
#original-menu #faq .question.active h3 span:nth-of-type(1) {
padding-left: 0;
} #original-menu #faq .answer-txt {
font-size: 1.4rem;
line-height: 1.4;
padding: 0 0 30px 0;
display: none;
} #original-menu #faq .question .i-plus {
width: 15px;
height: 15px;
position: absolute;
right: 5px;
top: 50%;
margin-top: -8px;
}
#original-menu #faq .question .i-plus::before, #original-menu #faq .question .i-plus::after {
content: "";
display: block;
position: absolute;
background-color: #000;
transition: all 0.5s;
transform: translateZ(0);
}
#original-menu #faq .question .i-plus::before {
width: 1px;
height: 100%;
left: 7px;
top: 0;
margin-left: 0px;
}
#original-menu #faq .question .i-plus::after {
width: 100%;
height: 1px;
left: 0;
top: 7px;
margin-top: 0px;
}
#original-menu #faq .question:hover .i-plus::before, #original-menu #faq .question:hover .i-plus::after {
background-color: #143265;
}
#original-menu #faq .question.active .i-plus::before {
transform: rotate(90deg);
background-color: #143265;
}
@media screen and (max-width:768px) {
#original-menu #faq .question-frame .question-detail {
display: block
}
#original-menu #faq .question-detail .each-question {
width: 90%;
margin: auto
}
#original-menu #originality .originality-block {
display: block;
}
#original-menu #originality .originality-block .text-block {
width: 90%;
}
#original-menu #originality .originality-block .image-block {
width: 100%;
}
#original-menu #originality .originality-block .image-block p {
width: calc(50% - 5px);
}
#original-menu #originality .originality-block .text-block {
padding-bottom: 0;
}
#original-menu .scroll-drifting {
margin-bottom: 0;
}
#original-menu #originality .originality-logo {
right: 0;
bottom: 0
}
#original-menu #originality .originality-logo > span {
bottom: 100px;
left: 0
}
#original-menu .explanation-block {
width: 90%;
}
#original-menu #bellwether .frame-inner .message p {
padding: 0;
}
#original-menu #experience .menu-name {
right: 0;
}
#original-menu #concept .menu-name {
right: 10px;
}
#original-menu #concept .menu-name p:nth-of-type(1) {
font-size: 1.6rem;
}
#original-menu #concept .menu-name p:nth-of-type(2), #original-menu #concept .menu-name p:nth-of-type(3) {
font-size: 6.2rem;
}
} #original-menu .end-band {
padding: 10% 0;
}
#original-menu .end-band .band {
position: relative;
padding: 30px 0 10px 0;
}
#original-menu .end-band .band::before {
content: "";
display: block;
position: absolute;
background-color: #000;
width: 0;
height: 100%;
top: 0;
left: 0;
transition: width 1.4s cubic-bezier(.56, .08, .09, .96), opacity .3s ease-in-out;
opacity: 0;
}
.complete #original-menu .end-band .band.appear::before {
opacity: .08;
width: calc(100% - 80px);
}
#original-menu .end-band .menu-name-ja {
margin-top: 60px;
font-size: 1.2rem;
line-height: 1.4;
}
#original-menu .end-band .menu-name-en {
font-size: 3.8rem;
line-height: .8;
} #original-menu .end-band .attention {
padding: 20px 0 0 0;
}
#original-menu .end-band .attention ul {
list-style: none;
}
#original-menu .end-band .attention ul li {
position: relative;
line-height: 1.4;
font-size: 1.2rem;
color: #666;
padding-left: 1em;
text-indent: -1em;
}
#original-menu .end-band .attention ul li:nth-of-type(n + 2) {
padding-top: 6px;
}
#original-menu a .explanation {
font-size: 1.2rem;
color: #000;
} #other-menu-lineup {} #other-menu-lineup .txt-container {
text-align: center;
padding-bottom: 30px;
}
#other-menu-lineup .txt-container .section-title {
padding-bottom: 5px;
font-size: 2.2rem;
}
#other-menu-lineup .txt-container h3 {
font-size: 1.2rem;
line-height: 1;
font-weight: normal;
padding-bottom: 20px;
color: #143265;
} #other-menu-lineup .oroginal-menu-list ul {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#other-menu-lineup .oroginal-menu-list li {
width: calc(25% - 15px);
margin-bottom: 40px;
}
#other-menu-lineup .oroginal-menu-list a {
display: block;
}
#other-menu-lineup .oroginal-menu-list .guide-text {
font-size: 1.3rem;
font-weight: normal;
display: none;
} #other-menu-lineup .oroginal-menu-list .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .4);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
z-index: 1;
}
#other-menu-lineup .oroginal-menu-list .caption {
position: absolute;
text-align: center;
width: calc(100% - 30px);
left: 0;
bottom: 30px;
padding: 0 15px;
display: block;
color: #fff;
z-index: 1;
}
#other-menu-lineup .oroginal-menu-list .caption .en {
line-height: 1;
font-size: 2.8rem;
display: block;
padding-bottom: 20px;
letter-spacing: .1rem;
font-weight: 400;
}
#other-menu-lineup .oroginal-menu-list .caption .ja {
line-height: 1;
font-size: 1.2rem;
display: block;
}
#other-menu-lineup .oroginal-menu-list a {
color: #000;
}
#other-menu-lineup .oroginal-menu-list a .link-underline {
font-size: 1.3rem;
margin-top: 10px;
} #other-menu-lineup .oroginal-menu-list a:hover .menu-cover .overlay {
background-color: rgba(0, 0, 0, .2);
}
#other-menu-lineup .oroginal-menu-list a:hover {
color: #143265;
} #other-menu-lineup .oroginal-menu-list li.end-block {
width: calc(50% - 15px);
background-color: #f8f9fa;
}
#other-menu-lineup .oroginal-menu-list li.end-block a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
}
#other-menu-lineup .oroginal-menu-list li.end-block h4 {
font-weight: normal;
font-size: 1.8rem;
line-height: 1.6;
padding: 15px 0;
}
#other-menu-lineup .oroginal-menu-list li.end-block p {
font-size: 1.4rem;
}
#other-menu-lineup .oroginal-menu-list li.end-block .blind-button {
padding: 12px 0 12px 0;
display: block;
background-color: #143265;
width: 200px;
}
#other-menu-lineup .oroginal-menu-list li.end-block .blind-button p {
position: relative;
display: inline-block;
padding-left: 20px;
}
#other-menu-lineup .oroginal-menu-list li.end-block .blind-button .text {
color: #fff;
padding: 0;
font-size: 1.6rem;
line-height: 1;
transition: color .3s ease-out;
display: block;
}
#other-menu-lineup .oroginal-menu-list li.end-block .blind-button .icon {
fill: #fff;
width: 12px;
height: 12px;
left: 0;
margin-top: -6px;
}
#other-menu-lineup .oroginal-menu-list li.end-block .blind-button::before {
background-color: #fff;
}
#other-menu-lineup .oroginal-menu-list li.end-block a:hover .blind-button::before {
height: 100%;
visibility: visible;
transform: scaleX(1);
transform-origin: left;
transition: 0.3s transform cubic-bezier(0, 0.01, 0, 1);
}
#other-menu-lineup .oroginal-menu-list li.end-block a:hover .blind-button .text {
color: #143265;
}
#other-menu-lineup .oroginal-menu-list li.end-block a:hover .blind-button .icon {
fill: #143265;
}   #original-menu.non-diamine-color #ctrl-directjump a, #original-menu.non-diamine-color .deco-text, #original-menu.non-diamine-color #preface .header-upper .section-title, #original-menu.non-diamine-color #preface .header-upper h2, #original-menu.non-diamine-color #concept .menu-name, #original-menu.non-diamine-color #whatis .whatis-block .caption, #original-menu.non-diamine-color #lecture .lecture-head h3, #original-menu.non-diamine-color #lecture .lecture-head p, #original-menu.non-diamine-color .originality-explanation .header-upper, #original-menu.non-diamine-color .originality-explanation .header-upper .section-title, #original-menu.non-diamine-color #experience .menu-name, #original-menu.non-diamine-color #faq .question.active h3, #original-menu.non-diamine-color #faq .question:hover h3, #original-menu.non-diamine-color .end-band .band {
color: #cca68d;
} #original-menu.non-diamine-color #ctrl-directjump a:before, #original-menu.non-diamine-color #ctrl-directjump a.current:before, #original-menu.non-diamine-color #concept::before, #original-menu.non-diamine-color #whatis::before, #original-menu.non-diamine-color #experience::before, #original-menu.non-diamine-color #originality::before, #original-menu.non-diamine-color #faq .question:hover .i-plus::before, #original-menu.non-diamine-color #faq .question:hover .i-plus::after, #original-menu.non-diamine-color #faq .question.active .i-plus::before, #original-menu.non-diamine-color #faq .question.active .i-plus::after, #original-menu.non-diamine-color .end-band .band::before, #original-menu.non-diamine-color .vegas-slide-inner {
background-color: #cca68d !important;
} #original-menu.non-diamine-color #ctrl-directjump a span {
border: 1px solid #cca68d;
} #original-menu.non-diamine-color .allergic {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 40px;
}
#original-menu.non-diamine-color .allergic .allergic-type {
width: calc((100% / 3) - 15px);
background-color: rgba(237, 233, 230, .4);
}
#original-menu.non-diamine-color .allergic .allergic-type .inner {
padding: 25px 25px;
}
#original-menu.non-diamine-color .allergic .allergic-type h5 {
text-align: center;
font-size: 1.4rem;
padding-bottom: 15px;
line-height: 1.2;
}
#original-menu.non-diamine-color .allergic .allergic-type p {
font-size: 1.4rem;
line-height: 1.6;
}
@media screen and (max-width:768px) {
#original-menu.non-diamine-color .allergic {
display: block;
}
#original-menu.non-diamine-color .allergic .allergic-type {
width: 100%;
}
#original-menu.non-diamine-color .allergic .allergic-type:nth-of-type(n+2) {
margin-top: 15px;
}
#original-menu.non-diamine-color .allergic .allergic-type .inner {
padding: 25px 20px;
}
#original-menu.non-diamine-color .allergic .allergic-type h5 br {
display: none;
}
#original-menu.non-diamine-color .allergic .allergic-type p {
text-align: center;
}
} #original-menu.non-diamine-color .characteristic {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 40px
}
#original-menu.non-diamine-color .characteristic .type {
width: calc((100% / 3) - 15px);
margin-bottom: 34px;
position: relative;
}
#original-menu.non-diamine-color .characteristic .type:nth-of-type(2) {
margin-right: 22px;
margin-left: 22px;
}
#original-menu.non-diamine-color .characteristic .type:nth-of-type(4) {
margin-right: 11px;
}
#original-menu.non-diamine-color .characteristic .type:nth-of-type(5) {
margin-left: 11px;
}
#original-menu.non-diamine-color .characteristic .type .frame {
border: solid 1px #000;
position: relative;
}
#original-menu.non-diamine-color .characteristic .type .frame::before, #original-menu.non-diamine-color .characteristic .type .frame::after {
position: absolute;
content: "";
display: block;
background-color: #fff;
}
#original-menu.non-diamine-color .characteristic .type .frame::before {
top: -1px;
bottom: -1px;
left: 5px;
right: 5px;
}
#original-menu.non-diamine-color .characteristic .type .frame::after {
top: 5px;
bottom: 5px;
left: -1px;
right: -1px;
}
#original-menu.non-diamine-color .characteristic .type .inner {
position: relative;
z-index: 1;
background-color: rgba(237, 233, 230, .4);
padding: 25px 25px;
}
#original-menu.non-diamine-color .characteristic .type .inner h5 {
text-align: center;
margin-top: -30px;
}
#original-menu.non-diamine-color .characteristic .type .inner h5 .head-icon {
width: 80px;
height: auto;
}
#original-menu.non-diamine-color .characteristic .type .inner p:nth-of-type(1) {
text-align: center;
padding: 5px 0;
}
#original-menu.non-diamine-color .characteristic .type .inner p:nth-of-type(1) img {
width: 70px;
height: auto;
}
#original-menu.non-diamine-color .characteristic .type .inner p:nth-of-type(2) {
font-size: 1.4rem;
line-height: 1.6;
}
@media screen and (max-width:768px) {
#original-menu.non-diamine-color .characteristic {
display: block;
}
#original-menu.non-diamine-color .characteristic .type {
width: 90%;
}
#original-menu.non-diamine-color .characteristic .type:nth-of-type(odd) {
margin-left: 10%;
}
#original-menu.non-diamine-color .characteristic .type:nth-of-type(even) {
margin-right: 10%;
margin-left: 0;
}
}
@media screen and (max-width:567px) {} #original-menu.non-diamine-color #lecture .text-block.henna-color {
padding-top: 40px;
}
#original-menu.non-diamine-color .henna-color h4 {
padding-bottom: 10px;
} #original-menu.non-diamine-color .treatment-flow-summary {
padding-top: 8%;
text-align: center;
}
#original-menu.non-diamine-color .treatment-flow-summary .heading {
color: #cca68d;
}
#original-menu.non-diamine-color .treatment-flow-summary .heading .heading-icon {
text-align: center;
padding-bottom: 10px;
}
#original-menu.non-diamine-color .treatment-flow-summary .heading .heading-icon img {
width: 80px;
}
#original-menu.non-diamine-color .treatment-flow-summary .heading h4 {
font-size: 1.2rem;
line-height: 120%;
}
#original-menu.non-diamine-color .treatment-flow-summary .heading h4 br {
display: none;
}
#original-menu.non-diamine-color .treatment-flow-summary .heading p {
font-size: 3.0rem;
padding-bottom: 10px;
}
#original-menu.non-diamine-color .treatment-flow-summary .explanation {
font-size: 1.4rem;
padding-top: 15px;
line-height: 1.6;
}
@media screen and (max-width:567px) {
#original-menu.non-diamine-color .treatment-flow-summary .heading p {
font-size: 1.2rem;
}
#original-menu.non-diamine-color .treatment-flow-summary .heading h4 br {
display: block;
}
} #original-menu.non-diamine-color .treatment-flow {
padding-top: 60px;
text-align: center;
}
#original-menu.non-diamine-color .treatment-flow .heading h4 {
font-size: 2.0rem;
line-height: 1.2;
}
#original-menu.non-diamine-color .treatment-flow .heading p {
font-size: 1.2rem;
}
#original-menu.non-diamine-color .treatment-flow .explanation {
font-size: 1.2rem;
padding-top: 15px;
line-height: 1.8;
}
@media screen and (max-width:567px) {
#original-menu.non-diamine-color .treatment-flow .heading h4 {
font-size: 1.0rem;
}
} #original-menu.non-diamine-color .flow-step {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 30px;
position: relative;
}
#original-menu.non-diamine-color .flow-step:before {
content: "";
position: absolute;
background-color: #cca68d;
height: 1px;
top: 50%;
left: 0;
width: 100%;
}
#original-menu.non-diamine-color .flow-step .step {
width: calc((100% / 3) - 15px);
background-color: #faf8f6;
position: relative;
z-index: 1;
}
#original-menu.non-diamine-color .flow-step .step .inner {
padding: 25px 25px;
}
#original-menu.non-diamine-color .flow-step .step .step-number {
color: #cca68d;
font-size: 1.3rem;
padding-bottom: 30px;
position: relative;
}
#original-menu.non-diamine-color .flow-step .step .step-number::after {
content: "";
position: absolute;
left: 50%;
bottom: 13px;
margin-left: -2px;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #cca68d;
}
#original-menu.non-diamine-color .flow-step .step .step-icon {}
#original-menu.non-diamine-color .flow-step .step .step-icon img {
width: 70px;
height: auto;
}
#original-menu.non-diamine-color .flow-step .step .explanation {
font-size: 1.4rem;
padding-top: 15px;
line-height: 1.4;
}
@media screen and (max-width:768px) {
#original-menu.non-diamine-color .flow-step {
display: block;
}
#original-menu.non-diamine-color .flow-step:before {
height: 100%;
width: 1px;
top: 0;
left: 50%;
}
#original-menu.non-diamine-color .flow-step .step {
width: 100%;
}
#original-menu.non-diamine-color .flow-step .step:nth-of-type(n+2) {
margin-top: 30px
}
#original-menu.non-diamine-color .flow-step .step .inner {
padding: 25px 20px;
}
} #original-menu.non-diamine-color .attention-note {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
text-align: left;
font-size: 1.2rem;
padding-top: 4%;
}
#original-menu.non-diamine-color .attention-note dt {
width: 160px;
color: #d70012;
padding-top: 20px;
margin: 0;
}
#original-menu.non-diamine-color .attention-note dd {
width: calc(100% - 180px);
margin: 0;
}
#original-menu.non-diamine-color .attention-note dd .note {
border-top: 1px dashed #c9caca;
padding-bottom: 20px;
padding-top: 20px;
}
#original-menu.non-diamine-color .attention-note dd .note:nth-of-type(1) {
border: none;
}
#original-menu.non-diamine-color .attention-note dd p:nth-of-type(n+2) {
padding-top: 5px;
}
#original-menu.non-diamine-color .attention-note dd p.red {
color: #d70012;
}
@media screen and (max-width:768px) {
#original-menu.non-diamine-color .attention-note {
display: block;
}
#original-menu.non-diamine-color .attention-note dt {
width: 100%;
text-align: center;
font-size: 0.9rem;
}
#original-menu.non-diamine-color .attention-note dd {
width: 100%;
}
}   #original-menu.color-cleansing #ctrl-directjump a, #original-menu.color-cleansing .deco-text, #original-menu.color-cleansing #preface .header-upper .section-title, #original-menu.color-cleansing #preface .header-upper h2, #original-menu.color-cleansing #concept .menu-name, #original-menu.color-cleansing #whatis .whatis-block .caption, #original-menu.color-cleansing #lecture .lecture-head h3, #original-menu.color-cleansing #lecture .lecture-head p, #original-menu.color-cleansing .originality-explanation .header-upper, #original-menu.color-cleansing .originality-explanation .header-upper .section-title, #original-menu.color-cleansing #experience .menu-name, #original-menu.color-cleansing #faq .question.active h3, #original-menu.color-cleansing #faq .question:hover h3, #original-menu.color-cleansing .end-band .band {
color: #76b6bc;
} #original-menu.color-cleansing #ctrl-directjump a:before, #original-menu.color-cleansing #ctrl-directjump a.current:before, #original-menu.color-cleansing #concept::before, #original-menu.color-cleansing #whatis::before, #original-menu.color-cleansing #experience::before, #original-menu.color-cleansing #originality::before, #original-menu.color-cleansing #faq .question:hover .i-plus::before, #original-menu.color-cleansing #faq .question:hover .i-plus::after, #original-menu.color-cleansing #faq .question.active .i-plus::before, #original-menu.color-cleansing #faq .question.active .i-plus::after, #original-menu.color-cleansing .end-band .band::before, #original-menu.color-cleansing .vegas-slide-inner {
background-color: #76b6bc !important;
} #original-menu.color-cleansing #ctrl-directjump a span {
border: 1px solid #76b6bc;
}
#original-menu.color-cleansing .lecture03_box {
background-color: rgba(118, 182, 188, 0.10);
}
#original-menu.color-cleansing .case_study .case_study_inner {
padding: 2% 5%;
text-align: center;
margin: 2% 0;
}
#original-menu.color-cleansing .case_study .case_study_inner h5 {
font-size: 1.6rem;
font-family: 'Lato', sans-serif;
font-weight: 400;
color: #76b6bc;
margin-bottom: 5px;
}
#original-menu.color-cleansing .case_study .case_study_inner p {
color: #76b6bc;
margin-bottom: 10px;
}
#original-menu.color-cleansing .case_study .case_study_inner .inner {
display: flex;
justify-content: space-between;
align-items: center;
}
#original-menu.color-cleansing .case_study .case_study_inner .inner .case_photo {
width: 45%;
}
#original-menu.color-cleansing .case_study .case_study_inner .inner .color_sample {
width: 52%;
}
#original-menu.color-cleansing .mechanism_inner {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
#original-menu.color-cleansing .mechanism h5 {
font-weight: normal;
margin-bottom: 5px;
}
#original-menu.color-cleansing .mechanism_box {
width: 47%;
}
#original-menu.color-cleansing .mechanism_box img {
margin-bottom: 10px;
}   #original-menu.sugami-digital-perm #ctrl-directjump a, #original-menu.sugami-digital-perm .deco-text, #original-menu.sugami-digital-perm #preface .header-upper .section-title, #original-menu.sugami-digital-perm #preface .header-upper h2, #original-menu.sugami-digital-perm #concept .menu-name, #original-menu.sugami-digital-perm #whatis .whatis-block .caption, #original-menu.sugami-digital-perm #lecture .lecture-head h3, #original-menu.sugami-digital-perm #lecture .lecture-head p, #original-menu.sugami-digital-perm .originality-explanation .header-upper, #original-menu.sugami-digital-perm .originality-explanation .header-upper .section-title, #original-menu.sugami-digital-perm #experience .menu-name, #original-menu.sugami-digital-perm #faq .question.active h3, #original-menu.sugami-digital-perm #faq .question:hover h3, #original-menu.sugami-digital-perm .end-band .band {
color: #5e63bc;
} #original-menu.sugami-digital-perm #ctrl-directjump a:before, #original-menu.sugami-digital-perm #ctrl-directjump a.current:before, #original-menu.sugami-digital-perm #concept::before, #original-menu.sugami-digital-perm #whatis::before, #original-menu.sugami-digital-perm #experience::before, #original-menu.sugami-digital-perm #originality::before, #original-menu.sugami-digital-perm #faq .question:hover .i-plus::before, #original-menu.sugami-digital-perm #faq .question:hover .i-plus::after, #original-menu.sugami-digital-perm #faq .question.active .i-plus::before, #original-menu.sugami-digital-perm #faq .question.active .i-plus::after, #original-menu.sugami-digital-perm .end-band .band::before, #original-menu.sugami-digital-perm .vegas-slide-inner {
background-color: #5e63bc !important;
} #original-menu.sugami-digital-perm #ctrl-directjump a span {
border: 1px solid #5e63bc;
}
#original-menu.sugami-digital-perm .lecture03_box {
background-color: rgba(94, 99, 188, 0.1);
padding: 5% 10%;
margin-top: 2.5%;
}
#original-menu.sugami-digital-perm .lecture-frame:nth-child(3) .lecture03_box h5 {
text-align: center;
margin-bottom: 3%;
}
#original-menu.sugami-digital-perm .lecture-frame:nth-child(3) img {
width: 80%;
margin: auto;
}
#original-menu.sugami-digital-perm .lecture-frame:nth-child(3) .lecture03_box p, #original-menu.sugami-digital-perm .lecture-frame:nth-child(4) .lecture03_box p {
text-align: center;
}
#original-menu.sugami-digital-perm .lecture-frame:nth-child(4) img {
width: 50%;
margin: auto;
}   #original-menu.sugami-straight #ctrl-directjump a, #original-menu.sugami-straight .deco-text, #original-menu.sugami-straight #preface .header-upper .section-title, #original-menu.sugami-straight #preface .header-upper h2, #original-menu.sugami-straight #concept .menu-name, #original-menu.sugami-straight #whatis .whatis-block .caption, #original-menu.sugami-straight #lecture .lecture-head h3, #original-menu.sugami-straight #lecture .lecture-head p, #original-menu.sugami-straight .originality-explanation .header-upper, #original-menu.sugami-straight .originality-explanation .header-upper .section-title, #original-menu.sugami-straight #experience .menu-name, #original-menu.sugami-straight #faq .question.active h3, #original-menu.sugami-straight #faq .question:hover h3, #original-menu.sugami-straight .end-band .band {
color: #c17c87;
} #original-menu.sugami-straight #ctrl-directjump a:before, #original-menu.sugami-straight #ctrl-directjump a.current:before, #original-menu.sugami-straight #concept::before, #original-menu.sugami-straight #whatis::before, #original-menu.sugami-straight #experience::before, #original-menu.sugami-straight #originality::before, #original-menu.sugami-straight #faq .question:hover .i-plus::before, #original-menu.sugami-straight #faq .question:hover .i-plus::after, #original-menu.sugami-straight #faq .question.active .i-plus::before, #original-menu.sugami-straight #faq .question.active .i-plus::after, #original-menu.sugami-straight .end-band .band::before, #original-menu.sugami-straight .vegas-slide-inner {
background-color: #c17c87 !important;
} #original-menu.sugami-straight #ctrl-directjump a span {
border: 1px solid #c17c87;
}
#original-menu.sugami-straight .lecture-frame:nth-child(3) .lecture03_box h5 {
text-align: center;
margin-bottom: 3%;
}
#original-menu.sugami-straight .lecture03_box {
background-color: rgba(193, 124, 188, 0.1);
padding: 5% 10%;
margin-top: 2.5%;
}   #original-menu.hikari-treatment #ctrl-directjump a, #original-menu.hikari-treatment .deco-text, #original-menu.hikari-treatment #preface .header-upper .section-title, #original-menu.hikari-treatment #preface .header-upper h2, #original-menu.hikari-treatment #concept .menu-name, #original-menu.hikari-treatment #whatis .whatis-block .caption, #original-menu.hikari-treatment #lecture .lecture-head h3, #original-menu.hikari-treatment #lecture .lecture-head p, #original-menu.hikari-treatment .originality-explanation .header-upper, #original-menu.hikari-treatment .originality-explanation .header-upper .section-title, #original-menu.hikari-treatment #experience .menu-name, #original-menu.hikari-treatment #faq .question.active h3, #original-menu.hikari-treatment #faq .question:hover h3, #original-menu.hikari-treatment .end-band .band {
color: #9AA49C;
} #original-menu.hikari-treatment #ctrl-directjump a:before, #original-menu.hikari-treatment #ctrl-directjump a.current:before, #original-menu.hikari-treatment #concept::before, #original-menu.hikari-treatment #whatis::before, #original-menu.hikari-treatment #experience::before, #original-menu.hikari-treatment #originality::before, #original-menu.hikari-treatment #faq .question:hover .i-plus::before, #original-menu.hikari-treatment #faq .question:hover .i-plus::after, #original-menu.hikari-treatment #faq .question.active .i-plus::before, #original-menu.hikari-treatment #faq .question.active .i-plus::after, #original-menu.hikari-treatment .end-band .band::before {
background-color: #9AA49C;
} #original-menu.hikari-treatment #ctrl-directjump a span {
border: 1px solid #9AA49C;
}
#original-menu.hikari-treatment .lecture03_box {
background-color: rgba(154, 164, 156, 0.1);
}
#original-menu.hikari-treatment .treatment-flow .step {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 8%;
}
#original-menu.hikari-treatment .treatment-flow .step-number {
width: 30%;
color: #9AA49C;
}
#original-menu.hikari-treatment .treatment-flow .text_box {
width: 70%;
}
#original-menu.hikari-treatment .treatment-flow .inner .flow_image img {
max-width: 100%;
} #original-menu.hikari-treatment .treatment-flow-summary {
padding-top: 8%;
text-align: center;
}
#original-menu.hikari-treatment .treatment-flow-summary .heading {
color: #9AA49C;
}
#original-menu.hikari-treatment .explanation {
font-size: 1.4rem;
padding-top: 15px;
line-height: 1.6;
}
#original-menu.hikari-treatment .note {
border-top: 1px solid rgba(154, 164, 156, 0.1);
padding-top: 15px;
color: rgba(154, 164, 156, 1);
font-size: 1.2rem;
line-height: 1.75;
}
@media screen and (max-width:567px) {
#original-menu.hikari-treatment .treatment-flow-summary .heading p {
font-size: 1.2rem;
}
#original-menu.hikari-treatment .treatment-flow-summary .heading h4 br {
display: block;
}
} #original-menu.hikari-treatment .treatment-flow {
padding-top: 60px;
}
#original-menu.hikari-treatment .treatment-flow .heading {
border-bottom: 1px solid rgba(154, 164, 156, 0.1);
padding-bottom: 10px;
margin-bottom: 15px;
text-align: center;
}
#original-menu.hikari-treatment .treatment-flow .heading h4 {
font-size: 2.0rem;
line-height: 1.2;
}
#original-menu.hikari-treatment .treatment-flow h5 {
color: #9AA49C;
margin-bottom: 3%;
}
#original-menu.hikari-treatment .treatment-flow .heading p {
font-size: 1.2rem;
}
@media screen and (max-width:567px) {
#original-menu.hikari-treatment .treatment-flow .heading h4 {
font-size: 1.0rem;
}
}
#original-menu #lecture .con_image img {
max-height: 340px;
object-fit: cover;
margin-bottom: 15px;
}   #original-menu.slight-acidity-color #ctrl-directjump a, #original-menu.slight-acidity-color .deco-text, #original-menu.slight-acidity-color #preface .header-upper .section-title, #original-menu.slight-acidity-color #preface .header-upper h2, #original-menu.slight-acidity-color #concept .menu-name, #original-menu.slight-acidity-color #whatis .whatis-block .caption, #original-menu.slight-acidity-color #lecture .lecture-head h3, #original-menu.slight-acidity-color #lecture .lecture-head p, #original-menu.slight-acidity-color .originality-explanation .header-upper, #original-menu.slight-acidity-color .originality-explanation .header-upper .section-title, #original-menu.slight-acidity-color #experience .menu-name, #original-menu.slight-acidity-color #faq .question.active h3, #original-menu.slight-acidity-color #faq .question:hover h3, #original-menu.slight-acidity-color .end-band .band {
color: #8CAAB5;
} #original-menu.slight-acidity-color #ctrl-directjump a:before, #original-menu.slight-acidity-color #ctrl-directjump a.current:before, #original-menu.slight-acidity-color #concept::before, #original-menu.slight-acidity-color #whatis::before, #original-menu.slight-acidity-color #experience::before, #original-menu.slight-acidity-color #originality::before, #original-menu.slight-acidity-color #faq .question:hover .i-plus::before, #original-menu.slight-acidity-color #faq .question:hover .i-plus::after, #original-menu.slight-acidity-color #faq .question.active .i-plus::before, #original-menu.slight-acidity-color #faq .question.active .i-plus::after, #original-menu.slight-acidity-color .end-band .band::before, #original-menu.slight-acidity-color .vegas-slide-inner {
background-color: #8CAAB5 !important;
} #original-menu.slight-acidity-color #ctrl-directjump a span {
border: 1px solid #8CAAB5;
}
#original-menu.slight-acidity-color .lecture03_box {
background-color: rgba(140, 170, 181, 0.1);
}
#original-menu.slight-acidity-color .image_flex, #original-menu.slight-acidity-color .flex_box {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
margin-bottom: 10px;
}
#original-menu #lecture .text-block p.small_text {
font-size: 1.2rem;
color: #9AA49C;
}
#original-menu.slight-acidity-color .flex_box .text_box {
width: 60%;
}
#original-menu.slight-acidity-color .flex_box .text_box p {
padding-right: 5%;
}
@media screen and (max-width:768px) {
#original-menu.hikari-treatment .treatment-flow .step {
display: block;
}
#original-menu.hikari-treatment .treatment-flow .text_box {
width: 100%;
}
#original-menu.slight-acidity-color .image_flex, #original-menu.slight-acidity-color .flex_box {
display: block;
}
#original-menu.slight-acidity-color .flex_box .text_box {
width: 100%;
}
#original-menu.sugami-straight .lecture03_box {
margin-top: 10px;
}
} #works ul {
list-style: none;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#works li {
width: calc((100% / 2) - 10px);
margin-bottom: 40px;
}
#works .magnify-scope {
height: auto;
}
#works h2 {
font-size: 1.6rem;
line-height: 1.6rem;
padding-top: 20px;
margin-bottom: 10px;
transition: color .4s ease-out;
}
#works .post-date, #works li p:nth-of-type(1) {
font-size: 1.3rem;
line-height: 1.8rem;
padding-top: 10px;
transition: color .4s ease-out;
}
@media screen and (min-width:768px) {
#works li {
width: calc((100% / 3) - 60px);
margin-bottom: 40px;
}
} #products .products-list ul {
list-style: none;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-wrap: wrap; justify-content: space-between;
}
#products .products-list li {
width: calc((100% / 3) - 20px);
margin-bottom: 40px;
}
#products .products-list li:nth-of-type(even) {
margin-top: 100px;
}
#products .products-list li img {
width: 100%;
height: 400px;
object-fit: cover;
object-position: center;
}
#products .products-list a {
display: block;
}
#products .products-list h2 {
font-size: 2rem;
line-height: 1;
font-weight: normal;
padding: 10px 0;
}
#products .products-list p {
font-size: 1.4rem;
line-height: 1.6;
padding-bottom: 10px;
}
.price {
border-top: 1px solid #F2F2F2;
border-bottom: 1px solid #F2F2F2;
padding: 10px 0;
}
@media screen and (max-width:768px) {
#products .products-list ul {
display: block;
}
#products .products-list li {
width: 100%;
margin-bottom: 40px;
}
#products .products-list li:nth-of-type(even) {
margin-top: 100px;
}
#products .products-list .caption .en {
font-size: 2.8rem;
}
#products .products-list .caption .ja {
font-size: 1.2rem;
}
} #post h2 {
font-size: 2.2rem;
line-height: 1.4;
font-weight: normal;
padding-top: 20px;
}
#post .thumbnail {
padding-bottom: 12%;
margin-bottom: 12%;
border-bottom: 1px solid #F2F2F2;
}
.single-hair-catalog #collection-photo .item-content .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.single-hair-catalog #collection-photo .item-content a:hover .overlay {
background-color: rgba(0, 0, 0, .2);
} #single-page #page-header {
padding: 12% 0 6%;
max-width: 1400px;
text-align: center;
margin: 0 auto;
}
#single-page .singl-main-image {
height: 650px;
margin-bottom: 5%;
padding-bottom: 5%;
border-bottom: 1px solid #F2F2F2
}
#single-page .singl-main-image01 {
margin-bottom: 5%;
padding-bottom: 5%;
border-bottom: 1px solid #F2F2F2
}
#single-page .singl-main-image img {
height: 100%;
object-fit: cover;
object-position: top center;
}
#single-page .content-inner, #single-page .content-inner01 {
padding-left: calc(8% + 10px);
padding-right: calc(8% + 10px);
margin-bottom: 12%;
}
#single-page .inner-header h2 {
font-size: 2.2rem;
line-height: 1;
padding-bottom: 10px;
text-align: center
}
#single-page .post-date {
color: #143265;
padding-bottom: 20px;
text-align: center;
font-size: 1.6rem;
font-weight: bold;
}
#single-page .entry-body img {
margin-bottom: 20px;
}
#single-page .entry-body {
margin-bottom: 10%;
line-height: 1.8;
}
#single-page .entry-body p {
margin-bottom: 12px;
}
#single-page #sidebar .side_box {
background: #f8f9fa;
text-align: center;
padding: 10% 5%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 2px;
}
#single-page .content-inner #sidebar .credit-head {
color: #153471;
font-size: 1.1rem;
}
#single-page .content-inner #sidebar .message {
text-align: left;
font-size: 1.4rem;
line-height: 1.4;
margin-top: 20px;
}
#single-page #collection-footer {
padding-left: calc(8% + 10px);
padding-right: calc(8% + 10px);
}
@media screen and (min-width:768px) {
#single-page .content-inner {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
padding: 0;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
#single-page .content-inner .entry-body {
width: 68%;
padding: 0 5%;
}
#single-page .content-inner #sidebar {
width: 32%;
}
#single-page .content-inner01 {
padding: 0;
}
} #contens.single_page {
margin-top: 0;
}
#contens.single_page p {
font-size: 1.4rem;
margin-bottom: 3%;
line-height: 1.6;
}
#contens.single_page .page_main_image img {
width: 100%;
height: 300px;
object-fit: cover;
object-position: center;
margin-bottom: 8%;
}
.page-id-2803 #contens.single_page .page_main_image img, .page-id-19 #contens.single_page .page_main_image img {
height: 350px;
object-position: center 70%;
}
#contens.single_page .main-conts, #contens.single_page .inner-box {
margin-bottom: 5%;
}
#contens.single_page .main-conts .title-box {
padding-left: 5%;
}
#contens.single_page .main-conts .title-box h2 {
font-size: 2.2rem;
}
#contens.single_page .main-conts .title-box h3 {
font-size: 1.4rem;
margin-bottom: 10px;
}
#contens.single_page .main-conts .main_text {
width: 90%;
margin: 0 auto;
}
#contens.single_page .main-conts .main_text .point-image img {
height: 200px;
object-fit: cover;
margin-bottom: 8%;
}
#contens.single_page .main-conts .main_text .inner-box h4 {
margin-bottom: 10px;
}
#contens.single_page .main-conts .main_text .inner-box .point-box {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#contens.single_page .main-conts .main_text .inner-box .point-box .point-inner {
border: 1px solid #f8f9fa;
text-align: center;
margin-right: 0.5%;
font-weight: bold;
padding: 3% 1%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 3% 0;
width: 30%;
}
#contens.single_page .main-conts .main_text .inner-box .point-box .point-inner p {
font-size: 1.2rem;
}
#contens.single_page .main-conts .main_text .inner-box .point-box .point-inner:last-child {
margin-right: 0;
}
#contens.single_page .main-conts .main_text .inner-box .point-box .point-inner p.get_point {
font-size: 3.4rem;
color: #c08857;
font-style: italic;
}
#contens.single_page .main-conts .main_text .inner-box .point-box span {
font-size: 2.0rem;
font-style: italic;
}
#contens.single_page .main-conts .main_text .inner-box ul.point-use li {
border-top: 1px solid #f8f9fa;
padding: 3% 0;
}
#contens.single_page .main-conts .main_text .inner-box ul.point-use li:last-child {
border-bottom: 1px solid #f8f9fa;
}
#contens.single_page .main-conts .main_text .inner-box ul.point-use li span.point-menu {
align-content: center;
display: block;
padding-bottom: 2%;
}
#contens.single_page .main-conts .main_text .inner-box ul.point-use li span.use-point {
color: #c08857;
font-style: italic;
font-size: 2.4rem;
display: block;
text-align: right;
}
#contens.single_page .main-conts .main_text .inner-box li span.small-p {
font-size: 1.4rem
}
#contens.single_page .main-conts .attention {
background: rgb(192, 136, 87, 0.05);
padding: 10% 5%;
}
#contens.single_page .main-conts .attention h4 {
font-size: 1.4rem;
color: #ff1d25;
margin-bottom: 5%
}
#contens.single_page .introductio_card img {
width: auto;
border: 1px solid #cacaca;
}
@media screen and (min-width:768px) {
#contens.single_page #page-header {
padding-bottom: 5%;
} #contens.single_page #page-header {
padding: 6% 0;
}
#contens.single_page .main-conts .title-box {
padding-left: 0;
}
.main-conts {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: flex-start;
}
.title-box {
width: 30%;
}
.main_text {
width: 70%;
}
#contens.single_page .main-conts .main_text .inner-box .point-box .point-inner {
padding: 5% 2%;
width: calc(100% / 3 - 3%);
}
#contens.single_page .main-conts .main_text .inner-box .point-box .point-inner p {
margin-bottom: 0;
font-size: 1.2rem;
}
#contens.single_page .main-conts .main_text .inner-box .point-box .point-inner p.get_point {
line-height: 1;
}
#contens.single_page .main-conts .attention {
padding: 3%;
}
#contens.single_page .main-conts .main_text .inner-box ul.point-use li {
display: flex;
flex-wrap: wrap;
}
#contens.single_page .main-conts .main_text .inner-box ul.point-use li span.point-menu {
width: 80%;
padding-bottom: 0;
}
#contens.single_page .main-conts .main_text .inner-box ul.point-use li span.use-point {
width: 20%;
color: #c08857;
}
} .post-type-archive-campaign .campaign .magnify-scope div.thumb-adjust {
width: 100%;
height: auto;
max-height: 250px;
margin: 0;
padding: 0;
background-color: #fff;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: relative;
}
.post-type-archive-campaign .campaign .magnify-scope div.thumb-adjust img {
object-position: center;
width: 100%;
max-height: 250px;
object-fit: cover;
} #single-page.post-15 .content-inner {
display: block;
}
#single-page.post-15 .content-inner h3 {
margin: 1.5% 0;
}
#single-page.post-15 .content-inner ol {
list-style: decimal;
list-style-position: inside;
}
#single-page.post-15 .content-inner ol li {
line-height: 1.5;
}
#single-page.post-15 .content-inner p.top_text {
text-align: center;
margin-top: 1.5%;
}
#single-page.post-15 .content-inner p {
margin-bottom: 1.5%;
}
#single-page.post-15 .photo_block {
display: flex;
flex-wrap: wrap;
}
#single-page.post-15 .photo_block img {
width: calc(100% / 4);
object-fit: cover;
}
@media screen and (max-width:768px) {
#single-page.post-15 .photo_block img {
width: calc(100% / 2);
height: 20vh;
}
#single-page.post-15 .content-inner p.top_text {
width: 85%;
margin: 2% auto;
}
#single-page.post-15 .content-inner h3 {
margin: 10% 0;
}
#single-page.post-15 .content-inner p {
margin-bottom: 8%;
}
} #single-page .information_post {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
@media screen and (max-width:768px) { #yt-wrap.salon-index {
width: 100%;
margin: 70px 0 0 0;
min-height: 100%;
height: 300px;
}
#yt-background, #yt-overlay {
height: inherit;
background: #000;
}
#yt-overlay {
background-color: rgba(0, 0, 0, .35);
}
#yt-background video, #background-movie #sui-movie, #yt-background img {
width: 100%;
height: 100%;
}
#first-view.salon-index {
height: 250px !important;
top: 100px;
}
#first-view.salon-index h1 {
font-size: 4.8rem; }
#first-view.salon-index .sui-logo {
bottom: 115px;
}
#first-view.salon-index h2 {
left: 10px;
top: 20px
}
#by-salon-concept h3 {
font-size: 4rem;
}
#by-salon-concept h4 {
line-height: 1;
padding-bottom: 0;
}
#by-salon-concept .salon-concept-frame .inner:nth-of-type(1) {
display: block;
}
#by-salon-concept .salon-concept-frame .inner:nth-of-type(1) .salon-image:nth-of-type(1) {
width: 100%;
top: -100px;
}
#by-salon-concept .salon-concept-frame .inner:nth-of-type(1) .salon-image:nth-of-type(2) {
width: 100%;
top: -80px;
}
#by-salon-concept .salon-concept-frame .inner:nth-of-type(2) {
width: 90%;
padding: 150px 2.5% 15px;
}
.menu-classification ul {
display: block;
}
.menu-classification li {
width: 100%;
}
.indicate-landscape {
display: block;
}
.indicate-landscape .movie-frame, .indicate-landscape .photo-frame {
width: 100%;
}
.lounge-description .salon-name p {
font-size: 4.8rem;
}
#staff .entry-overview.staff {
padding-top: 10px;
}
#we-are-here .txt-chapter .txt-container {
padding: 30px 0 0 0;
}
#we-are-here .txt-chapter .txt-container .section-title {
padding-bottom: 0;
margin-bottom: 0;
}
#we-are-here .txt-chapter {
padding-bottom: 0;
} .page-template-page-salon-menu #menu .menu-detail .scroll-drifting {
margin-bottom: 0;
} .staff-head-position h3 {
font-size: 6rem;
} #concept-closing h3 {
font-size: 4.2rem;
}
#concept-closing .closing-body .inner {
margin: -5% calc(5% + 5px) 0 calc(5% + 5px);
}
#original-menu.color-cleansing .case_study .case_study_inner p {
text-align: left;
}
#original-menu.color-cleansing .case_study .case_study_inner .inner {
display: block;
}
#original-menu.color-cleansing .case_study .case_study_inner .inner .case_photo, #original-menu.color-cleansing .case_study .case_study_inner .inner .color_sample {
width: 90%;
margin: 0 auto;
}
.mechanism {
margin-top: 15px;
}
}
#staff .categories li .author a {
display: flex;
align-items: center;
padding: 0;
background: none;
}
#staff #landscape-swipe-images {
width: 100%;
max-width: 100%;
position: absolute;
}
@media screen and (max-width:768px) {
#staff-individual-header .page-head-cover .staff-name h2 {
font-size: 4.6rem;
}
#staff-photo .split {
display: block;
}
#staff-photo .action-frame, #staff #landscape-swipe-images {
position: inherit;
}
#staff-photo .photo-frame, #staff-photo .action-frame {
width: 90%;
margin: 0 auto 15px;
}
#staff-photo .staff_name_box {
padding: 15px 0 50px;
}
#staff-photo .action-frame .work-position, #staff-photo .action-frame .affiliation-salon {
font-size: 1.2rem;
}
#staff-photo .action-frame .specialty_style span {
display: block;
text-align: center;
}
#look-at .look-at-frame {
display: block;
}
#look-at .look-at-frame .add-headline, #look-at .look-at-frame .add-content {
width: 97%;
margin-left: 3%;
}
#look-at .look-at-frame .add-headline {
margin-bottom: 5%;
}
#single-page .content-inner, #single-page .content-inner01 {
padding: 0;
}
#single-page .entry-body {
padding: 0 5%;
}
#single-page .inner-header h2 {
width: 60%;
margin: 0 auto;
line-height: 1.75;
}
#single-page #page-header {
padding-bottom: 0;
}
#single-page .singl-main-image {
height: 250px;
}
#single-page .singl-main-image img {
height: 100%;
width: 100%;
}
#single-page #collection-footer {
padding: 5%;
}
} #sui-labo .page-header-upper{
height:600px;
}
#sui-labo .page-header-upper h1#headline{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
z-index: 100;
}
#sui-labo .page-header-upper #sub-headline{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
z-index: 100;
color: #E1E1E1;
}
#sui-labo .lab_image{
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
width: 100%;
height: 600px;
object-fit: contain;
}
#sui-labo .lab_image img{
object-fit: cover;
object-position: left 0 top 50%;
height: 100%;
}
.sui_lob_cat{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
}
.lob_list{
width:45%;
padding: 0 1%;
margin-bottom: 10%;
}
.lob_list h2,
.single_cat_image{
margin-bottom: 3%;
text-align: center;
}
.single_cat_image img{
object-fit: cover;
max-height: 250px;
width: 100%;	
}
.lob_list li{
margin-bottom: 1.5%;
}
.suilabo-list #page-header{
padding: 12% 0 3% 0;
}
.suilabo-list .cat_image{
height:450px;
max-width:1460px;
margin: 0 auto 3%;
position: relative;
}
.suilabo-list .cat_image img{
height:100%;
object-fit:cover;
object-position: center center;
}
#page-header #sub-headline.child{   position: absolute;
right: 5%;
bottom: 10%;
font-weight: bold;
font-size: 150%;
}
.single_cat_title{font-size:120%;}
#lab_cate,#lab_cate_bottom {
margin-top: 3%;
background-color: #f8f9fa;
text-align: left;
}
.entry-list.sui_lab_list {
justify-content: flex-start;
}
.sui_lab_list .entry-item {
margin: 0 15px;
}
h2.bottom_content{
text-align: center;
font-size:3vw;
padding: 3% 0;
}
#lab_cate_bottom.categories .genre li{ width: calc((100% / 4) - 5px);}
@media screen and (max-width:768px) {
.sui_lob_cat{
display: block;
}	
.lob_list{
width:90%;
margin:0 auto 10%;
}
.suilabo-list .categories .category-page-category-list.category-item li {
width: 45%;
}
}
p.yoyaku{
position: relative;
background: #163265;
padding: 20px;
margin:0 80px 30px;
text-align: center;
}
p.yoyaku a.more-link{
color: #fff;
font-size: 2rem;
}
p.yoyaku a svg.i-slide-r{
fill: #fff;
width: 9px;
height: 9px;
left: 10px;
margin-top: -4px;
}
.cmp_sub{
background: #F8F9FA;
padding: 20px;
margin: 0 20px;
}
#works .cmp_sub .tab_navi li{
width: calc((100% / 3) - 2px);
height: 60px;
padding-top: 20px;
line-height: 1;
background: #F8F9FA;
text-align: center;
display: block;
float: left;
flex-wrap: nowrap;
text-align: center;
transition: all 0.2s;
margin-bottom: 0;
}
#works .cmp_sub .tab_navi li.on{
background: #fff;
}
#works .cmp_sub .tab_navi li a{
color: #000;
}
#works .cmp_sub .tab_navi li.on a,
#works .cmp_sub .tab_navi li a:hover{
color: #143265;
}
#works .tab_navi li .ja{
font-size: 1.0rem;
padding-top: 2px;
}
#works .cmp_sub .entry-list{
background: #fff;
padding: 40px 20px;
}
@media screen and (max-width:768px) {
#first-view.index {
height: 110vw !important;
}
}  article, aside, details, figcaption, figure, footer, header, hgroup, hr, menu, nav, section {
display: block
}
a, hr {
padding: 0
}
abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: 0 0;
font-size: 100%;
}
ins, mark {
background-color: #ff9;
color: #191919
}
ul,ol {
list-style: none;
margin: 0;
padding: 0;
}
blockquote, q {
quotes: none
}
blockquote:after, blockquote:before, q:after, q:before {
content: none
}
a {
margin: 0;
font-size: 100%;
vertical-align: baseline;
background: 0 0;
text-decoration: none;
}
ins {
text-decoration: none
}
mark {
font-style: italic;
font-weight: 700
}
del {
text-decoration: line-through
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help
}
table {
border-collapse: collapse;
border-spacing: 0
}
hr {
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0
}
input, select {
vertical-align: middle
}
.defs {
display: none;
}
img {
vertical-align: bottom;
width: 100%;
height: auto;
}
button, input, select, textarea {
margin: 0;
padding: 0;
background: 0 0;
border: none;
border-radius: 0;
outline: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: inherit;
font-size: 100%;
}
select::-ms-expand {
display: none;
} [type=search] {
-webkit-appearance: textfield
}
[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-input-placeholder {
color: #ccc;
}
::-moz-placeholder {
color: #ccc;
}
::-ms-input-placeholder {
color: #ccc;
}
::selection {
background-color: #0560aa;
color: #ececec;
}
body{
max-width: 100%;
box-sizing: border-box;
} @font-face {
font-family: YuMinchoM;
src: local(Yu Mincho Medium), local(Yu Mincho);
font-weight: 500;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
.YuMin {
font-family: "游明朝 Medium", "Yu Mincho Medium", "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", sans-serif;
} .lato {
font-family: 'Lato', sans-serif;
font-weight: 400;
}
.lato.bold {
font-weight: 700;
} .garamond {
font-family: 'EB Garamond', serif;
}
.garamond.bold {
font-weight: 600;
} @media all and (-ms-high-contrast:none) {
*::-ms-backdrop, body {
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
} body {
line-height: 120%;
letter-spacing: .02em;
color: #000;
background-color: #fff;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body.pc {
overflow-y: scroll;
} #preloader {
position: fixed;
top: 50%;
left: 50%;
width: 68px;
height: 32px;
margin: -16px 0 0 -34px;
overflow: hidden;
z-index: 51;
}
#preloader p {
color: #143265;
margin-bottom: 3px;
line-height: 100%;
text-align: center;
font-size: 10px;
letter-spacing: 3px;
}
#preloader .line {
width: 1px;
height: 12px;
background-color: #143265;
margin: 0 1px;
display: inline-block;
animation: preloader 1s infinite ease-in-out;
}
#preloader .line-1 {
animation-delay: 1100ms;
}
#preloader .line-2 {
animation-delay: 800ms;
}
#preloader .line-3 {
animation-delay: 500ms;
}
#preloader .line-4 {
animation-delay: 200ms;
}
#preloader .line-6 {
animation-delay: 200ms;
}
#preloader .line-7 {
animation-delay: 500ms;
}
#preloader .line-8 {
animation-delay: 800ms;
}
#preloader .line-9 {
animation-delay: 1100ms;
}
#preloader {
opacity: 1;
visibility: visible;
}
#preloader-bg {
position: fixed;
width: 100%;
max-width:100%;
height: 100%;
top: 0;
left: 0;
background-color: #fff;
z-index: 2;
}
.complete #preloader.fadeout {
opacity: 0;
visibility: hidden;
transition: visibility 0s ease-out 2.0s, opacity .4s ease-out 0.6s;
}
.complete #preloader-bg {
opacity: 0;
visibility: hidden;
transition: visibility 0s ease-out 2.0s, opacity .4s ease-out 0.8s;
}
@keyframes preloader {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
display: none;
}
} @keyframes bounce {
0%, 100%, 20%, 50%, 80% {
transform: translateY(0)
}
40% {
transform: translateY(6px)
}
60% {
transform: translateY(3px)
}
}
@keyframes i-slide-r {
0% {
transform: translate(0, 0);
opacity: 1;
}
50% {
transform: translate(10px, 0);
opacity: 0;
}
51% {
transform: translate(-10px, 0);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes i-slide-l {
0% {
transform: translate(0, 0);
opacity: 1;
}
50% {
transform: translate(-10px, 0);
opacity: 0;
}
51% {
transform: translate(10px, 0);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes blind {
0% {
width: 0;
left: 0;
opacity: 1;
}
50% {
width: 100%;
left: 0;
}
51% {
width: 100%;
left: auto;
right: 0;
}
100% {
width: 0;
left: auto;
right: 0;
opacity: 1;
visibility: hidden;
}
}
@keyframes scratch {
0% {
left: -35px;
width: 0;
opacity: 0;
}
30% {
opacity: 1;
}
100% {
left: 35px;
width: 34px;
}
}
@keyframes elasticus {
0% {
transform-origin: 0% 0%;
transform: scale(1, 0);
}
50% {
transform-origin: 0% 0%;
transform: scale(1, 1);
}
50.1% {
transform-origin: 0% 100%;
transform: scale(1, 1);
}
100% {
transform-origin: 0% 100%;
transform: scale(1, 0);
}
}
@keyframes header-dwon {
0% {
top: -100px;
}
100% {
top: 0;
}
}
@keyframes header-up {
0% {
top: 0;
}
100% {
top: -100px;
}
}
@keyframes current-line {
0% {
height: 0px;
}
100% {
height: 20px;
}
}   [class^="block-"]:not(.block-button) {
margin-left: auto;
margin-right: auto; position: relative;
}
.block {
padding-left: 80px;
padding-right: 80px;
position: relative;
}
.block-s {
padding-left: calc(20% + 10px);
padding-right: calc(20% + 10px); }
.block-m {
padding-left: calc(15% + 10px);
padding-right: calc(15% + 10px); }
.block-l {
padding-left: calc(10% + 10px);
padding-right: calc(10% + 10px); }
.block-ll {
padding-left: calc(8% + 10px);
padding-right: calc(8% + 10px);
}
.block-x {
padding-left: 40px;
padding-right: 40px; }
@media screen and (max-width:1024px) {
.block-l, .block,.block-x {
padding-left: 20px;
padding-right: 20px;
}
.block-m {
padding-left: 80px;
padding-right: 80px;
}
.block-ll{padding-left: 0;padding-right:0;}
}
@media screen and (max-width:768px) {
.block-m {
padding-left: 40px;
padding-right: 40px;
}
} main {
padding-top: 0;
display: block;
}
#contens {
position: relative;
max-width: 1420px;
margin: 0 auto;
} .adjust {
padding-top: 12%;
position: relative;
}
.adjust-bottom {
padding-bottom: 12%;
position: relative;
} .split-column {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.split-column > .headline-frame {
width: calc(26% - 25px);
}
.split-column > .details-frame {
width: calc(74% - 25px);
}
.split-column > .headline-frame .headline {
font-size: 1.4rem;
color: #143265;
line-height: 1;
}
.split-column .txt-overview {
padding-top: 10px;
}
.split-column .txt-overview p {
font-size: 1.3rem;
line-height: 1.6;
padding-top: 10px;
}
.split-column .txt-overview p.precautions {
font-size: 1.1rem;
line-height: 1.2;
}
.split-column.column {
display: block;
}
.split-column.column > .headline-frame {
width: 100%;
} .split-column .detail dl.allotment {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
border-bottom: 1px solid #F2F2F2;
}
.split-column .detail dl.allotment dt {
width: 35%;
border-top: 1px solid #F2F2F2;
padding: 20px 0;
font-weight: normal;
font-size: 1.4rem;
line-height: 1.8;
}
.split-column .detail dl.allotment dd {
width: 65%;
border-top: 1px solid #F2F2F2;
padding: 20px 0;
line-height: 1.8;
}
.split-column .detail dl.allotment dd p {
font-size: 1.4rem;
} .split-column .detail dl.border-none, .split-column .detail dl.border-none dt, .split-column .detail dl.border-none dd {
border-bottom: none;
}
.split-column .detail dl dd p.tel {
font-size: 1.8rem;
}
@media screen and (max-width:768px) {
.single-hair-catalog .split-column{display: block;}
#menu #attention .split-column,#menu #menu-detail .split-column{display: block;}
#menu #attention .split-column > .headline-frame,
#menu #menu-detail .split-column > .headline-frame{width:90%;margin: 0 auto 35px;}
.split-column.menu-detail .menu-name{display: block;}
#menu #attention .split-column > .details-frame,
#menu #menu-detail .split-column > .details-frame{width:90%;margin: 0 auto 15px;}
#outline .split-column{display: block;}
#outline .split-column > .headline-frame{width:90%;margin: 0 auto 15px;}
#outline .split-column > .details-frame{width:90%;margin: 0 auto 15px;}
}  .link-underline {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
transition: color .2s ease-out;
line-height: 100%;
padding-bottom: 3px;
padding-top: 3px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.link-underline::before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background-color: #143265;
height: 1px;
opacity: 0;
transition: left .3s cubic-bezier(.645, .045, .355, 1), right .3s cubic-bezier(.645, .045, .355, 1), opacity 0s .3s;
}
.link-underline.current::before {
left: 0;
right: 0;
opacity: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.link-underline:hover::before {
left: 0;
right: 0;
opacity: 1;
transition: left .3s cubic-bezier(.645, .045, .355, 1), right .3s cubic-bezier(.645, .045, .355, 1);
} .link-underline.display::before {
left: 0;
bottom: 0;
background-color: #000;
width: 100%;
opacity: 1;
}
.link-underline.display::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: 0;
background-color: #143265;
height: 1px;
opacity: 0;
transition: left .3s cubic-bezier(.645, .045, .355, 1), right .3s cubic-bezier(.645, .045, .355, 1), opacity 0s .3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.pc .link-underline.display:hover::after {
right: 0;
opacity: 1;
transition: left .3s cubic-bezier(.645, .045, .355, 1), right .3s cubic-bezier(.645, .045, .355, 1);
} .link-underline.icon {
padding-right: 24px;
}
.link-underline.arrow svg {
width: 17px;
height: 4px;
position: absolute;
right: 0;
top: 50%;
margin-top: -4px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.link-underline.blank {
padding-right: 20px;
}
.link-underline.blank svg {
width: 12px;
height: 10px;
position: absolute;
right: 2px;
top: 50%;
margin-top: -6px;
}   .blind-button {
position: relative;
display: inline-block;
color: #000;
cursor: pointer;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.blind-button > * {
position: relative;
display: block;
z-index: 2;
}
.blind-button::before {
display: block;
content: ''; position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100%;
visibility: hidden;
background-color: #143265;
transform: scaleX(0);
transform-origin: right;
transition: 0.3s transform cubic-bezier(0, 0.01, 0, 1), visibility 0s 0.4s;
}
.blind-button:hover::before {
height: 100%;
visibility: visible;
transform: scaleX(1);
transform-origin: left;
transition: 0.3s transform cubic-bezier(0, 0.01, 0, 1);
}
.blind-button:hover {
color: #fff;
} .blind-button.down::before {
transform: scaleY(0);
transform-origin: bottom;
}
.blind-button.down:hover::before {
transform: scaleY(1);
transform-origin: top
} .blind-button.thin-blue::before {
background-color: #f3f5f7;
} .blind-button.white::before {
background-color: #fff;
} .blind-button.black::before {
background-color: #000;
} .blind-button.lightgray::before {
background-color: rgba(0, 0, 0, .01);
} .blind-button.blue-thin {
background-color: #143265;
}
.blind-button.blue-thin::before {
background-color: #f3f5f7;
} .more-link {
font-size: 1.5rem;
line-height: 1.5;
color: #000;
padding-right: 3px;
}
.more-link span {
padding-left: 15px;
}
.more-link .icon {
width: 9px;
height: 9px;
left: 1px;
margin-top: -5px;
}
.more-link:hover {
color: #999;
}
.more-link:hover .icon {
fill: #999;
}
.more-link.link-underline.display::after {
background-color: #999;
}
.more-link .ja {
font-size: 1.3rem;
} .and-more {
padding: 37px 0 0 0;
}  a svg.i-slide-r {
position: absolute;
right: 0;
top: 50%;
fill: #000;
}
a:hover svg.i-slide-r {
animation: i-slide-r 640ms 1 forwards;
}
a svg.i-slide-l {
position: absolute;
left: 0;
top: 50%;
fill: #000;
}
a:hover svg.i-slide-l {
animation: i-slide-l 640ms 1 forwards;
} .plus-icon {
position: absolute;
text-align: center;
font-size: 1.1rem;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
z-index: 1;
opacity: 0;
transition: opacity .4s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.plus-icon .plus {
height: 30px;
width: 30px;
display: block;
position: relative;
border: 2px solid #fff;
border-radius: 50%;
}
.plus-icon .plus::before, .plus-icon .plus::after {
display: block;
content: '';
background-color: #fff;
position: absolute;
}
.plus-icon .plus::before {
width: 2px;
height: 12px;
top: 9px;
left: 14px;
}
.plus-icon .plus::after {
width: 12px;
height: 2px;
top: 14px;
left: 9px;
}
.plus-icon span:nth-of-type(2) {
padding-top: 5px;
}
a:hover .plus-icon {
opacity: 1;
}
a:hover .plus-icon .plus {
transform: rotate(270deg);
transition: .6s .4s;
}
@media screen and (max-width:768px) {
#lineup-menu .plus-icon .plus {
height: 15px;
width: 15px;
display: block;
position: relative;
border: 1px solid #fff;
border-radius: 50%;
}
#lineup-menu .plus-icon .plus::before, .plus-icon .plus::after {
display: block;
content: '';
background-color: #fff;
position: absolute;
}
#lineup-menu .plus-icon .plus::before {
width: 2px;
height: 11px;
top: 1.5px;
left: 6.25px;
}
#lineup-menu .plus-icon .plus::after {
width: 11px;
height: 2px;
top: 6.25px;
left: 1.5px;
}
} .magnify-scope {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
img.magnify {
transform: scale(1.01);
transition: transform 1.2s ease-in-out;
width: 100%;
height: auto;
}
a:hover img.magnify {
transform: scale(1.05);
}   .scroll-fade {
opacity: 0;
position: relative;
}
.complete .scroll-fade.appear {
opacity: 1;
transition: opacity .8s ease-out .2s;
}
.lounge-description .salon-name.appear{opacity: .06;} .complete .scroll-fade.delay1.appear {
transition: opacity 1s ease-in-out .4s;
}
.complete .scroll-fade.delay2.appear {
transition: opacity 1s ease-in-out .6s;
}
.complete .scroll-fade.delay3.appear {
transition: opacity 1s ease-in-out 1.0s;
}  .scroll-slideup {
top: 60px;
opacity: 0;
position: relative;
}
.complete .scroll-slideup.appear {
top: 0;
opacity: 1;
transition: top .8s cubic-bezier(.56, .08, .09, .96) .4s, opacity .8s cubic-bezier(.56, .08, .09, .96) .6s;
} .complete .scroll-slideup.delay1.appear {
transition: top .8s cubic-bezier(.56, .08, .09, .96) .6s, opacity .8s cubic-bezier(.56, .08, .09, .96) .8s;
}
.complete .scroll-slideup.delay2.appear {
transition: top .8s cubic-bezier(.56, .08, .09, .96) .8s, opacity .8s cubic-bezier(.56, .08, .09, .96) 1.0s;
}
.complete .scroll-slideup.delay3.appear {
transition: top .8s cubic-bezier(.56, .08, .09, .96) 1.0s, opacity .8s cubic-bezier(.56, .08, .09, .96) 1.2s;
} .scroll-drifting {
overflow: hidden;
display: block;
}
.scroll-drifting .effect-block {
display: inline-block;
position: relative;
transition: transform .8s cubic-bezier(.16, .43, .45, 1), opacity .8s cubic-bezier(.56, .08, .09, .96) .1s;
transform: translate3d(0, 100%, 0) skewY(12deg);
transform-origin: left;
opacity: 0;
}
.complete .scroll-drifting .effect-block.appear {
transform: translate3d(0, 0, 0) skewY(0);
opacity: 1;
} .complete .scroll-drifting .effect-block.delay1 {
transition: transform .8s cubic-bezier(.16, .43, .45, 1) .4s, opacity .8s cubic-bezier(.56, .08, .09, .96) .4s;
}
.complete .scroll-drifting .effect-block.delay2 {
transition: transform .8s cubic-bezier(.16, .43, .45, 1) .6s, opacity .8s cubic-bezier(.56, .08, .09, .96) .6s;
}
.complete .scroll-drifting .effect-block.delay3 {
transition: transform .8s cubic-bezier(.16, .43, .45, 1) .8s, opacity .8s cubic-bezier(.56, .08, .09, .96) .8s;
}
.complete .scroll-drifting .effect-block.fast {
transition: transform .8s cubic-bezier(.16, .43, .45, 1) 0s, opacity .8s cubic-bezier(.56, .08, .09, .96) 0s;
} .break-inner {
position: relative;
}
.break .caption {
position: absolute;
top: 35px;
left: 35px;
}
.break .caption p {
font-size: 1.8rem;
line-height: 1.2;
color: #fff;
}
.break .deco-logo {
position: absolute;
bottom: -40px;
right: 40px;
}
.break .deco-logo svg {
fill: #143265;
width: 250px;
height: 110px;
} .section-title {
font-size: 1.2rem;
color: #143265;
line-height: 1;
padding-bottom: 10px;
} .thumb-adjust {
width: 100%;
height: auto;
margin: 0;
padding: 0;
background-color: #fff;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: relative;
}
.thumb-adjust span {
display: block;
}
.thumb-adjust span:nth-of-type(1) {
background-color: #F5F5F5;
}
.thumb-adjust span:nth-of-type(1) img {
opacity: 1;
width: 100%;
height: auto;
}
.thumb-adjust span:nth-of-type(2) {
-webkit-transform: translate(-50%, -50%);
transform: translateY(-50%) translateX(-50%);
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: auto;
}
.thumb-adjust span:nth-of-type(2) img {
width: 100%;
height: auto;
}
.thumb-adjust span.portrait, .thumb-adjust span.portrait img {
width: auto;
height: 100%;
}
.thumb-adjust span.landscape, .thumb-adjust span.landscape img {
width: 100%;
height: auto;
} #head-cover { position: relative;
height: calc(100vh - 70px);
} .txt-chapter {
padding-bottom: 20px;
}
.txt-chapter h2 {
font-weight: 400;
font-size: 4.2rem;
line-height: 1.2;
padding-bottom: 10px;
}
.txt-chapter p {
font-size: 1.4rem;
line-height: 1.6;
padding-top: 0;
}
.txt-chapter p:nth-of-type(1) {
padding-top: 0;
} #menu-button {
position: fixed;
z-index: 200;
top: 18px;
right: 20px;
width: 34px;
height: 34px;
cursor: pointer; }
#menu-button span {
display: block;
}
#menu-button #bars {
position: absolute;
top: 0;
left: 0;
width: 34px;
height: 34px;
transition: transform .3s cubic-bezier(0.694, 0.048, 0.335, 1);
font-size: 0;
text-align: left;
overflow: hidden;
}
#menu-button #bars span {
position: absolute;
width: 100%;
height: 2px;
background-color: #143265;
overflow: hidden;
left: 0;
}
#menu-button #bars span:nth-child(1) {
transform: scaleX(1);
transition: transform 0.2s cubic-bezier(0.694, 0.048, 0.335, 1);
transition-delay: 0.4s;
width: 60%;
}
#menu-button #bars span:nth-child(1) {
top: 9px;
}
#menu-button #bars span:nth-child(2) {
top: 17px;
}
#menu-button #bars span:nth-child(3) {
top: 25px;
}
#menu-button #bars span:nth-child(3) {
width: 70%;
transition: width 0.2s cubic-bezier(0.694, 0.048, 0.335, 1);
transition-delay: 0.4s;
}
#menu-button #bars #cross-bar {
width: 2px;
height: 0;
position: absolute;
top: 0;
left: 16px;
transition: height 0.4s cubic-bezier(0.694, 0.048, 0.335, 1), background-color 0s .6s;
z-index: 10;
margin-top: 0;
margin-left: 0;
} #menu-button #menu-text {
font-size: .6rem;
position: absolute;
width: 100%;
bottom: -2px;
left: 0;
color: #143265;
line-height: 1;
}
#menu-button #menu-text span:nth-child(2) {
display: none;
}
#menu-button #slide-reset {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
} #menu-button #bars span:nth-child(-n + 3):after {
content: "";
position: absolute;
height: 5px;
width: 0;
background-color: #fff;
top: -2px;
left: -35px;
}
#menu-button.scratch #bars span:nth-child(-n + 3):after {
animation: scratch .9s cubic-bezier(0, 0.01, 0, 1) 1;
}
#menu-button.scratch #bars span:nth-child(1):after {
animation-delay: 0s;
}
#menu-button.scratch #bars span:nth-child(2):after {
animation-delay: .3s;
}
#menu-button.scratch #bars span:nth-child(3):after {
animation-delay: .6s;
} #menu-button.transparent #bars span {
background-color: #fff;
}
#menu-button.transparent #bars span:nth-child(-n + 3):after {
background-color: #143265;
}
#menu-button.transparent #menu-text {
color: #fff;
} #menu-button.active {
animation: fluffy1 2s ease 1;
}
@keyframes fluffy1 {
0% {
right: -100px;
display: none;
}
50% {
right: -100px;
display: block;
}
100% {
right: 20px;
}
}
@keyframes fluffy2 {
0% {
right: -100px;
display: none;
}
50% {
right: -100px;
display: block;
}
100% {
right: 16px;
}
}
#menu-button.active #slide-reset {
display: none;
}
#menu-button.active #bars {
transform: rotate(45deg);
transition-delay: 0.4s;
}
#menu-button.active #bars span:nth-child(1) {
transform: scaleX(0);
transition: transform 0.2s cubic-bezier(0.694, 0.048, 0.335, 1);
}
#menu-button.active #bars span:nth-child(2) { }
#menu-button.active #bars span:nth-child(3) {
width: 0;
transition: width 0.2s cubic-bezier(0.694, 0.048, 0.335, 1);
}
#menu-button.active #bars #cross-bar {
height: 34px;
transition: height 0.2s cubic-bezier(0.694, 0.048, 0.335, 1);
transition-delay: 0.3s;
}
#menu-button.active #bars span:after {
display: none;
}
#menu-button.active #menu-text {
color: #fff !important;
transition: color 0s .5s;
}
#menu-button.active #menu-text span:nth-child(1) {
display: none;
}
#menu-button.active #menu-text span:nth-child(2) {
display: block;
}
#menu-button.transparent.active #bars span {
background-color: #143265;
}
@media screen and (max-width:1024px) {
#menu-button {
right: 16px;
top: 22px;
}
#menu-button.active {
animation: fluffy2 2s ease 1;
}
}  #sitenav {
position: fixed;
top: 0;
left: 0;
overflow: hidden;
z-index: 10;
visibility: hidden;
height: 100%;
width: 100%;
opacity: 0;
transition: visibility .4s ease-out .4s, opacity 0s ease-out 1.0s, height .001s ease-out 1.8s;
}
#sitenav #sitenav-inner {
height: 100%; flex-direction: column-reverse;
overflow-y: auto;
background-color: rgba(255, 255, 255, 1);
-webkit-overflow-scrolling: touch;
position: relative;
visibility: hidden;
transition: visibility 0s ease-out 1.4s; }
.pc #sitenav-inner {
width: 100%;
}
.sp #sitenav-inner {
width: 100%;	
} #site-link { padding: 70px 80px 30px 80px;
} #sitenav.active {
visibility: visible;
opacity: 1;
transition: visibility 0s 0s, opacity 0s 0s, height 0s 0s;
margin-top: -70px;
padding-top: 70px;
}
#sitenav.active #sitenav-inner {
visibility: visible;
}
#sitenav.active #sitenav-inner li .salon_menu,#sitenav.active #sitenav-inner li .salon_menu dd{margin-left: 1.5rem}
#sitenav.active #sitenav-inner li{padding-left: 1.5rem;}
#sitenav.active #sitenav-inner .external_link li a{padding-left: 25px;}
#sitenav.active #sitenav-inner .external_link li a svg {
width: 16px;
height: 16px;
fill: #143265;
position: absolute;
top: 50%;
left: 0;
margin-top: -8px;}  #header-logo {
position: fixed;
top: 20px;
left: 20px;
z-index: 21;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#header-logo a {
display: block;
}
#header-logo svg {
fill: #143265;
width: 160px;
height: 70px;
transition: fill .6s ease .4s;
}
#header-logo.transparent svg, #header-logo.active svg {
fill: #143265;
}
#header-logo span {
display: block;
}
#header-logo span:nth-of-type(1) {
font-size: 1.8rem;
font-weight: 500;
}
#header-logo span:nth-of-type(2) {
font-size: 1.2rem;
position: absolute;
bottom: -12px;
left: 0;
width: 100%;
text-align: center;
} #header-logo #site-name {
display: none;
} .home #header-logo.transparent svg {
fill: #fff;
}  #global-header {
position: absolute;
top: 0;
}
#global-header.active {
opacity: 0;
visibility: hidden;
transition: opacity .6s ease .6s, visibility 0s ease 1.6s;
}
#global-header.global-nav nav > ul:nth-of-type(1) li a,
#global-header.global-nav nav > ul:nth-of-type(2) > li a{
color: #717071;}
#global-header.global-nav nav > ul:nth-of-type(2) > li a svg{fill:#717071;}
.parent-pageid-8778 #global-header.global-nav nav > ul:nth-of-type(1) li a,
.parent-pageid-8778 #global-header.global-nav nav > ul:nth-of-type(2) > li a,
.single-hair-catalog #global-header.global-nav nav > ul:nth-of-type(1) li a,
.single-hair-catalog #global-header.global-nav nav > ul:nth-of-type(2) > li a{color: #FFF;}
.parent-pageid-8778 #global-header.global-nav nav > ul:nth-of-type(2) > li a svg,
.single-hair-catalog #global-header.global-nav nav > ul:nth-of-type(2) > li a svg{fill:#FFF;} .global-nav {
width: 100%;
height: 70px;
z-index: 20;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
visibility: visible;
transition: opacity 0s ease .6s, visibility 0s ease 1.6s;
left: 0;
}
.global-nav nav {
font-size: 1.3rem;
width: 100%;
height: 100%;
position: relative;
}
.global-nav nav > ul {
display: flex;
height: 70px;
text-align: center;
justify-content: center;
align-items: center;
position: relative;
} .global-nav nav > ul:nth-of-type(1) {
padding: 0;
}
.global-nav nav > ul:nth-of-type(1) li {
margin: 0 10px;
height: 100%;
display: flex;
align-items: center;
position: relative;
}
.global-nav nav > ul:nth-of-type(1) li:nth-of-type(1) {
margin-left: 0;
}
.global-nav nav > ul:nth-of-type(1) li:nth-last-of-type(1) {
margin-right: 0;
}
.global-nav nav > ul:nth-of-type(1) li a {
color: #717071;
display: block;
padding: 5px 0;
} .global-nav nav > ul:nth-of-type(1) li.current::before {
display: block;
content: '';
background-color: #143265;
position: absolute;
width: 2px;
top: 0;
left: 50%;
margin-left: -1px;
animation: current-line .5s ease-in-out forwards .5s;
}
.global-nav nav > ul:nth-of-type(1) li.current a {
color: #143265;
}
.global-nav nav > ul:nth-of-type(1) li.current a::before {
opacity: 0;
} .global-nav nav > ul:nth-of-type(1) li a:hover {
color: #143265;
} .global-nav nav > ul:nth-of-type(2) {
padding: 0;
}
.global-nav nav > ul:nth-of-type(2) {
position: absolute;
right: 80px;
top: 0;
z-index: 22;
}
.global-nav nav > ul:nth-of-type(2) li:nth-of-type(1) {
margin-right: 20px;
}
.global-nav nav > ul:nth-of-type(2) > li a {
display: block;
color: #143265;
padding: 5px 0 5px 25px;
}
.global-nav nav > ul:nth-of-type(2) > li a svg {
width: 16px;
height: 16px;
fill: #143265;
position: absolute;
top: 50%;
left: 0;
margin-top: -8px;
}
.global-nav nav > ul:nth-of-type(2) > li a:hover {}
.global-nav nav > ul:nth-of-type(2) > li a .link-underline:before {
background-color: #b69997;
} @media screen and (max-width:1024px) {}
@media screen and (max-width:768px) {.global-nav nav{display: none;}}
@media screen and (max-width:567px) {} #fixed-header {
position: fixed;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#fixed-header.display {
animation: header-up 1.9s cubic-bezier(0, 0.01, 0, 1) forwards;
background-color: #fff;
}
#fixed-header.fixed {
animation: header-dwon .9s cubic-bezier(0, 0.01, 0, 1) forwards;
background-color: #fff;
}  .global-nav.transparent nav > ul:nth-of-type(1) > li a {
color: #fff;
}
.global-nav.transparent nav > ul:nth-of-type(1) > li a:hover {
color: #fff;
}
.global-nav.transparent nav > ul:nth-of-type(1) > li a::before {
background-color: #fff;
}
.global-nav.transparent nav > ul:nth-of-type(1) > li.current {
color: #fff;
}
.global-nav.transparent nav > ul:nth-of-type(1) > li.current::before {
background-color: #fff;
} .global-nav.transparent nav > ul:nth-of-type(2) > li a {
color: #fff;
}
.global-nav.transparent nav > ul:nth-of-type(2) > li a::before {
background-color: #fff;
}
.global-nav.transparent nav > ul:nth-of-type(2) > li a svg {
fill: #fff;
} @media screen and (max-width:1024px) {}
@media screen and (max-width:768px) {}
@media screen and (max-width:567px) {}  #global-footer {
display: block;
margin-block-end:30px;
}
#global-footer .footer-inner {
background-color: #F8F8F8;
}
#global-footer .footer-inner:nth-of-type(1) {
padding: 40px 0;
}
#global-footer .footer-inner:nth-of-type(2) {
border-top: 1px solid #fff;
}
#f-info {
padding: 0;
} #f-logo {
position: relative;
}
#f-logo svg {
width: 100px;
height: 45px;
fill: #143265;
position: absolute;
top: 0;
left: -45px;
}
#f-logo p {
font-size: 1.0rem;
padding: 25px 0 0 0;
} #f-info dl {
padding-top: 60px;
}
#f-info dt {
font-weight: bold;
font-size: 1.4rem;
padding-bottom: 10px;
} #f-info .salon-info dd {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#f-info .s-info {
width: calc((100% / 3) - 10px);
}
#f-info .s-info p {
font-size: 1.2rem;
line-height: 1.3;
} #f-info .s-info p:nth-of-type(1) {
font-weight: bold;
padding-bottom: 5px;
color: #143265;
} #f-info .s-info p:nth-of-type(2) {
padding-bottom: 3px;
} #f-info .s-info p:nth-of-type(3) {
padding-bottom: 10px;
}
#f-info .s-info p:nth-of-type(3) a {
color: #000;
} #f-info .s-info p:nth-of-type(4) a {
color: #000;
}
#f-info .s-info p:nth-of-type(4) a span {
padding-left: 15px;
}
#f-info .s-info p:nth-of-type(4) a .i-blank {
width: 9px;
height: 9px;
left: 1px;
margin-top: -5px;
}
.pc #f-info .s-info p:nth-of-type(4) a:hover {
color: #999;
}
.pc #f-info .s-info p:nth-of-type(4) a:hover .i-blank {
fill: #999;
}
.pc #f-info .s-info p:nth-of-type(4) a:after {
background-color: #999;
} #f-info .reception-desk dt span:nth-of-type(1) {
font-weight: bold;
font-size: 1.4rem;
}
#f-info .reception-desk dt span:nth-of-type(2) {
font-weight: normal;
font-size: 1.1rem;
padding-left: 10px;
} #f-info .reception-desk p:nth-of-type(1) {
padding-bottom: 5px;
padding-top: 10px;
}
#f-info .reception-desk p:nth-of-type(1) a {
color: #000;
font-size: 3.0rem;
} #f-info .reception-desk p:nth-of-type(2) {
font-size: 1.1rem;
} #f-info .original-products dd {}
#f-info .original-products p:nth-of-type(1) a {
font-size: 1.2rem;
line-height: 1.3;
color: #000;
}
#f-info .original-products p:nth-of-type(1) a span {
padding-left: 15px;
}
#f-info .original-products p:nth-of-type(1) a .i-blank {
width: 9px;
height: 9px;
left: 1px;
margin-top: -5px;
}
.pc #f-info .original-products p:nth-of-type(1) a:hover {
color: #999;
}
.pc #f-info .original-products p:nth-of-type(1) a:hover .i-blank {
fill: #999;
}
.pc #f-info .original-products p:nth-of-type(1) a:after {
background-color: #999;
} #f-info .get-in-touch {
margin-top: 60px;
border-top: 1px solid #E0DDDE;
}
#f-info .get-in-touch dt span:nth-of-type(1) {
font-weight: bold;
font-size: 1.4rem;
}
#f-info .get-in-touch dt span:nth-of-type(2) {
font-weight: normal;
font-size: 1.1rem;
padding-left: 10px;
} #f-info .get-in-touch ul {
list-style: none;
display: flex;
}
#f-info .get-in-touch li {
margin-right: 20px;
}
#f-info .get-in-touch li a {
font-size: 1.2rem;
line-height: 1.3;
color: #000;
}
#f-info .get-in-touch li a span {
padding-left: 15px;
}
#f-info .get-in-touch li a .i-blank {
width: 9px;
height: 9px;
left: 1px;
margin-top: -5px;
}
.pc #f-info .get-in-touch li a:hover {
color: #999;
}
.pc #f-info .get-in-touch li a:hover .i-blank {
fill: #999;
}
.pc #f-info .get-in-touch li a:after {
background-color: #999;
} #f-info .corporate-link {
margin-top: 20px;
}
#f-info .corporate-link a {
padding: 10px 15px 10px 25px;
}
#f-info .corporate-link a .text {
color: #000;
padding: 0;
font-size: 1.2rem;
}
#f-info .corporate-link a .i-blank {
fill: #000;
width: 9px;
height: 9px;
left: 10px;
margin-top: -4px;
}
#f-info .corporate-link .blind-button {
background-color: #fff;
}
#f-info .corporate-link .blind-button::before {
background-color: #000;
}
#f-info .corporate-link a:hover .text {
color: #fff;
}
#f-info .corporate-link a:hover .i-blank {
fill: #fff;
} #f-info .aside-link {
margin-top: 60px;
}
#f-info .aside-link ul {
list-style: none;
display: flex;
}
#f-info .aside-link li {
margin-right: 20px;
}
#f-info .aside-link li a {
font-size: 1.2rem;
line-height: 1.3;
color: #000;
}
#f-info .aside-link li a span {
padding-left: 15px;
}
#f-info .aside-link li a .i-blank {
width: 9px;
height: 9px;
left: 1px;
margin-top: -5px;
}
.pc #f-info .aside-link li a:hover {
color: #999;
}
.pc #f-info .aside-link li a:hover .i-blank {
fill: #999;
}
.pc #f-info .aside-link li a:after {
background-color: #999;
} #produced-by {
font-size: 1.2rem;
color: #143265;
padding-top: 30px;
} .copy {
font-size: 1.0rem;
line-height: 50px;
text-align: right;
color: #727171;
} #connect {
position: fixed; bottom: 0;
opacity: 1;
z-index: 1;
visibility: visible;
transition: opacity .4s ease-in-out, visibility .4s ease-in-out 1.0s;
background-color: rgba(255,255,255,0.7);
width:100%;
padding:10px 80px;
}
#connect dl {
display: flex;
align-items: center;
}
#connect dt {
font-size: 1.0rem;
padding-right: 15px;
color: #143265;
transition: color .2s ease-out;
}
#connect ul {
display: flex;
justify-content: flex-start;
align-items: center;
}  #global-footer.connect-hide + #connect {
opacity: 0;
visibility: hidden;
} @media screen and (max-width:1024px) {}
@media screen and (max-width:567px) {} #journal-list .txt-container {
padding: 30px 0 30px 0;
}
#journal-list .txt-container h3 {
font-size: 4.0rem;
font-weight: 400;
line-height: .8;
z-index: 5;
position: relative;
padding-bottom: 10px;
} #journal-list .txt-container .decoration {
position: relative;
}
#journal-list .txt-container .decoration p {
position: absolute;
top: 50%;
left: 210px;
margin-top: -27px;
}
#journal-list .txt-container .decoration svg {
width: 140px;
height: 62px;
fill: #000;
} #journal-list .posted-by {
font-size: 1.2rem;
position: absolute;
bottom: 15px;
right: calc(10% + 10px);
color: #143265;
} .entry-list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#journal-list .entry-list{max-width: 1400px;margin: 0 auto;}
.entry-list:nth-last-of-type(1) {
border-bottom: 1px solid #F2F2F2;
padding-bottom: 25px;
}
.entry-list.border-none {
border: none;
} .entry-list.latest .entry-item {
width: calc(50% - 20px);
padding-bottom: 60px;
}
.entry-list .entry-item {
width: calc((100% / 3) - 30px);
padding-bottom: 60px;
}
.entry-list .entry-item:nth-last-of-type(-n + 3) {
padding-bottom: 0;
} .entry-list.index.latest .entry-item {
width: calc(50% - 20px);
padding-bottom: 60px;
}
.entry-list.index .entry-item {
width: calc((100% / 3) - 30px);
padding-bottom: 60px;
} .entry-item a {
display: block;
color: #000;
}
.entry-item .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
z-index: 1;
} .entry-item .post-date {
color: #143265;
padding-top: 15px;
}
.entry-item .post-date .date {
font-size: 1.6rem;
padding-right: 10px;
}
.entry-item .post-date .week {
font-size: 1.1rem;
text-transform: uppercase;
} .entry-item h4 {
font-size: 1.8rem;
padding-top: 10px;
line-height: 1.3;
transition: color .2s ease-out;
} .entry-item .author {
padding-top: 15px;
display: flex;
align-items: center;
}
.entry-item .author-icon {
padding-right: 10px;
}
.entry-item .author-icon img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.entry-item .author-name {
font-size: 1.2rem;
}
.entry-item .author-name span:nth-of-type(1) {
font-weight: bold;
color: #000;
}
.entry-item .author-name span:nth-of-type(2) {
padding: 0 5px;
color: #000;
}
.entry-item .author-name span:nth-of-type(3) {
color: #143265;
} .entry-item .more-link {
margin-top: 15px;
} .entry-item a:hover .overlay {
background-color: rgba(0, 0, 0, .4);
}
.entry-item a:hover h4 {
color: #999;
}
.entry-item a:hover .more-link {
color: #999;
}
.entry-item a:hover .more-link svg {
fill: #999;
}
.entry-item a:hover .link-underline.display::after {
right: 0;
opacity: 1;
transition: left .3s ease-out, right .3s ease-out;
} .entry-list.staff .entry-item {
width: calc((100% / 3) - 20px);
}
.entry-overview.staff {
padding-top: 30px;
}
.entry-item .work-position {
font-size: 1.1rem;
color: #717071;
line-height: 1;
}
.entry-item .staff-name.en {
font-size: 2.0rem;
line-height: 1.2;
font-weight: 400;
}
.entry-item .staff-name.ja {
font-size: 1.2rem;
line-height: 1;
transition: color .2s ease-out;
}
.entry-item a:hover .staff-name.ja {
color: #999;
}  .entry-list.staff.designer .entry-item:nth-last-of-type(-n + 2) {
padding-bottom: 0;
}
.entry-list.staff.carelist .entry-item {
padding-bottom: 60px;
}
.entry-list.staff.carelist .entry-item:nth-last-of-type(-n + 3) {
padding-bottom: 0;
}
@media screen and (max-width:768px) {
.entry-list {display: block;} .entry-list.latest .entry-item,
.entry-list .entry-item,
.entry-list.index.latest .entry-item,
.entry-list.index .entry-item{
width: 90%;
margin: 0 auto;
padding-bottom: 0;
}
.entry-list .entry-item:nth-last-of-type(-n + 3) {
padding-bottom: 0;
}
} .info-list {
list-style: none;
}
.info-list li {
border-top: 1px solid #F2F2F2;
}
.info-list li:nth-last-of-type(1) {
border-bottom: 1px solid #F2F2F2;
}
.info-list a {
display: block;
padding: 20px calc(10% - 50px);
position: relative;
}
.info-list .post-title {
font-size: 1.4rem;
}
.info-list .icon {
width: 9px;
height: 9px;
right: 0;
margin-top: -5px;
} .info-list .post-prop {
color: #143265;
padding-top: 5px;
}
.info-list .post-prop .date {
font-size: 1.3rem;
padding-right: 10px;
}
.info-list .post-prop .week {
font-size: 1.2rem;
text-transform: uppercase;
padding-right: 10px;
}
.info-list .post-prop .cat {
font-size: 1.2rem;
padding-right: 10px;
}
.info-list .post-prop .affiliation span {
color: #999;
}
.info-list .post-prop .affiliation span:nth-of-type(1) {
font-size: 1.0rem;
padding-right: 5px;
}
.info-list .post-prop .affiliation span:nth-of-type(2) {
font-size: 1.3rem;
} .info-list a:hover .post-title {
color: #000;
}
.info-list a:hover .icon {
fill: #143265;
} .salon-list-bg-logo {
position: absolute;
bottom: -100px;
left: -30px;
width: 65vw;
height: 25vw;
fill: #143265;
opacity: .05;
z-index: 1;
}
.salon-frame {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row-reverse;
padding: 0 80px;
}
.salon-frame .salon {
width: calc(42% - 20px);
position: relative;
z-index: 1;
}
.salon-frame .salon:nth-of-type(1) {
margin-top: -100px;
}
.salon-frame .salon:nth-of-type(2) {
margin-top: 15%;
}
.salon-frame .salon:nth-of-type(3) {
margin-top: -15%;
margin-right: 80px;
}
.salon-frame .salon a {
display: block;
} .salon-frame .salon .salon-cover {
position: relative;
}
.salon-frame .salon .hover-caption {
color: #333;
opacity: .5;
font-size: 5.2rem;
letter-spacing: .4rem;
z-index: 1;
display: block;
text-align: center;
position: absolute;
top: 50%;
left: 0%;
width: 100%;
margin-top: -30px;
transition: opacity 1.0s ease, color 1.2s ease, letter-spacing 1.0s ease;
}
.salon-frame .salon .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .0);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
z-index: 1;
} .salon-frame .salon .txt-container {
padding-top: 20px;
color: #000;
transition: color .2s ease-out;
}
.salon-frame .salon .txt-container h3 {
font-size: 2.6rem;
line-height: 1;
font-weight: normal;
padding-bottom: 10px;
}
.salon-frame .salon .txt-container p:nth-of-type(1) {
font-size: 1.4rem;
line-height: 1.6;
padding-bottom: 10px;
} .salon-frame .salon a:hover .hover-caption {
letter-spacing: 0;
opacity: .8;
color: #fff;
}
.salon-frame .salon a:hover .overlay {
background-color: rgba(0, 0, 0, .2);
}
.pc .salon-frame .salon a:hover .txt-container {
color: #999;
}
.pc .salon-frame .salon a:hover .more-link {
color: #999;
}
.pc .salon-frame .salon a:hover .more-link svg {
fill: #999;
}
.pc .salon-frame .salon a:hover .link-underline.display::after {
right: 0;
opacity: 1;
transition: left .3s ease-out, right .3s ease-out;
}
@media screen and (max-width:768px) {
.salon-frame{padding: 0;}
.salon-frame .salon:nth-of-type(3){margin-right: 0;}
.salon-frame .salon{width:100%;}
#i-salon-introduce .introduce-frame .inner:nth-of-type(1) #salon-swipe-images .swiper-slide p{font-size: 5rem;}
#i-salon-list .block-x{padding: 0;}
.salon-frame .salon:nth-of-type(1),
.salon-frame .salon:nth-of-type(2),
.salon-frame .salon:nth-of-type(3){margin-top: 0;}
.salon-frame .salon .hover-caption{
font-size:4rem;
}
.salon-frame .salon{
margin-bottom: 25px;
}
.salon-frame .salon .salon-cover img{
object-position: 0 100%;
height: 350px;
object-fit: cover;
}
.salon-frame .salon.tokyo .salon-cover img{object-position: 0 70%;}
.salon-frame .salon.nara .salon-cover img{object-position: 0 50%;}
#i-salon-introduce .introduce-frame{display:block}
#i-salon-introduce .introduce-frame .inner{width:100%;}
#i-salon-introduce .introduce-frame .txt-container{
padding: 20px 5%;
z-index: 10;
margin-right:0;
margin-left:10%;
margin-top: -15%; }
#i-salon-introduce .introduce-frame .txt-container h3{font-size: 3.8rem}
#i-salon-introduce .introduce-frame .txt-container h4{line-height: 1;padding-bottom: 0;}
#i-salon-introduce .beginning-msg{width: 90%; padding: 60px 0 30px 0;margin: 0 auto;}
#i-salon-introduce .beginning-msg h5{padding-bottom:0;font-size: 3.8rem; }
#i-salon-introduce .beginning-msg p{font-size: 1.2rem; line-height: 2;}
#i-salon-introduce .introduce-frame .txt-container::before{	width:100%;}
}  #to-customers {position: relative;} #to-customers .txt-container {
text-align: center; }
#to-customers .txt-container .section-title {
padding-bottom: 10px;
}
#to-customers .txt-container h3 {
font-size: 4.0rem;
font-weight: normal;
line-height: 1.4;
padding-bottom: 20px;
}
#to-customers .txt-container p:nth-of-type(1) {
font-size: 1.4rem;
line-height: 1.6;
margin-bottom: 3%;
} #to-customers .customers-menu {
position: relative;
max-width: 1600px;
margin: 0 auto;
}
#to-customers .customers-menu .txt-container h3{    
font-size: 2.2rem;
line-height: 1;
font-weight: normal;
padding-bottom: 20px;}
#to-customers .customers-menu::before {
content: '';
background-color: rgba(255, 255, 255, 1.00);
width: calc(100% - 80px);
height: calc(50% - 10px);
display: block;
position: absolute;
bottom: 0;
left: 40px;
} #to-customers .banner {
list-style: none;
}
#to-customers a {
position: relative;
display: block;
}
#to-customers a .icon {
fill: #fff;
width: 12px;
height: 12px;
left: 15px;
margin-top: -6px;
z-index: 1;
}
#to-customers .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .4);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
z-index: 1;
}
@media screen and (max-width:768px){ } #to-customers .banner.temporary .overlay {
background-color: rgba(0, 0, 0, 0);
}  #to-customers .banner.customers {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
}
#to-customers .banner.customers li {
width: calc(50% - 10px); }
#to-customers .banner.customers .caption {
position: absolute;
top: 0;
left: 5%;
width: 90%;
height: 100%;
color: #fff;
display: flex;
flex-direction: column-reverse;
text-align: center;
justify-content: center;
align-items: center;
z-index: 1;
}
#to-customers .banner.customers h4 {
font-size: 1.3rem;
}
#to-customers .banner.customers p {
font-size: 2.4rem;
padding-bottom: 5px;
letter-spacing: .2rem;
} #to-customers .banner a:hover .overlay {
background-color: rgba(0, 0, 0, .2);
}
@media screen and (max-width:768px){
#to-customers .banner.customers{
display: block;
}
#to-customers .banner.customers li{
width:100%;
}
}  #aside-contents {
position: relative;
}
#aside-contents .aside-background {
background-color: #f8f9fa;
padding-top: 40px;
position: relative;
}
#aside-contents.subpage .aside-background::before {
content: '';
background-color: #fff;
width: 100%;
height: 260px;
display: block;
position: absolute;
top: 0;
left: 0;
}
#aside-contents .txt-container {
padding: 30px 0 30px 0;
}
#aside-contents .txt-container h3 {
font-size: 3.4rem;
font-weight: 400;
line-height: .8;
z-index: 5;
position: relative;
padding-bottom: 10px;
}
#aside-contents .txt-container p {
font-size: 1.4rem;
line-height: 1.8;
} #aside-contents .uri {
line-height: 1;
color: #fff;
display: flex;
align-items: center;
position: absolute;
}
#aside-contents .uri svg {
fill: #fff;
width: 9px;
height: 9px;
}
#aside-contents .uri span {
padding-left: 5px;
font-size: 1.1rem;
}  .aside-banner .uri {
top: 10px;
right: 15px;
}
.aside-banner a { display: block;
margin-bottom: 5%;
}
.aside-banner a .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.aside-banner .front-visual {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.aside-banner .front-visual img {
width: 240px;
height: 140px;
}  .aside-banner .banner {
display: flex;
justify-content: space-between;
}
.aside-banner .thumb-large {
width: calc(60% - 5px);
position: relative;
}
.aside-banner .thumb-small {
width: calc(40% - 5px);
position: relative;
}
.aside-banner .thumb-small .small-banner {
width: 100%;
position: absolute;
right: 0;
}
.aside-banner .thumb-small .small-banner:nth-of-type(1) {
height: calc(60% - 5px);
}
.aside-banner .thumb-small .small-banner:nth-of-type(2) {
height: calc(40% - 5px);
}
.aside-banner .thumb-small .small-banner a {
overflow: hidden;
height: 100%;
}
.aside-banner .thumb-small .small-banner:nth-of-type(1) {
top: 0;
}
.aside-banner .thumb-small .small-banner:nth-of-type(2) {
bottom: 0;
}
.hair-make a{
height: 200px;
background: #000;
} .beauty-travel .front-visual{
color: #fff;
line-height: 1.2;
font-weight: 400;
}
.aside-banner a svg {
fill: #fFF;
width: 40%;
} .aside-banner a:hover .overlay {
background-color: rgba(0, 0, 0, .4);
}  #follow-instagram {
margin-top: 60px;
}
.follow-instagram-inner {
background-color: #fff;
background-image: url(//sui-beauty.net/wp-content/themes/sui2021/assets/images/common/preloader.svg);
background-position: center;
background-size: 70px auto;
background-repeat: no-repeat;
position: relative;
}
.follow-instagram-inner .sidebar {
background-color: #f8f9fa;
position: absolute;
top: 0;
width: 80px;
height: 100%;
display: block;
}
.follow-instagram-inner .sidebar.right {
right: 0;
}
.follow-instagram-inner .sidebar.left {
left: 0;
}
.follow-instagram {
text-align: center;
} .follow-instagram.upper {
padding: 5% 20px 3% 20px;
}
.follow-instagram.upper h4 {
font-weight: 400;
line-height: 1;
font-size: 2.2rem;
} .follow-instagram.lower {
padding: 3% 20px 5% 0;
}
.instagram-link {
list-style: none; } .instagram-link a {
padding: 12px 0 12px 0;
display: block;
width: 170px;
}
.instagram-link a.blind-button {
background-color: #143265;
}
.instagram-link a.blind-button::before {
background-color: #f3f5f7;
}
.instagram-link a p {
position: relative;
display: inline-block;
}
.instagram-link a .text {
color: #fff;
padding: 0 0 0 20px;
font-size: 1.2rem;
line-height: 1;
transition: color .3s ease-out;
display: block;
}
.instagram-link a .icon {
fill: #fff;
width: 12px;
height: 12px;
left: 0;
margin-top: -6px;
}
.instagram-link a:hover .text {
color: #143265;
}
.instagram-link a:hover .icon {
fill: #143265;
} @keyframes photoLoopSlider {
100% {
transform: translateX(calc(-100% / 1.5));
}
}
#instagram-posted-items-slider {
height: auto;
width: 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
#instagram-posted-items {
display: flex;
width: 300%;
height: 100%;
animation: photoLoopSlider 80s linear infinite;
}
#instagram-posted-items a {
display: block;
overflow: hidden;
position: relative;
}
#instagram-posted-items .item {
width: calc(100% / 18);
height: 100%;
position: relative;
}
#instagram-posted-items .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(20, 50, 100, .1);
transform: scale(1.05);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
display: block;
} #instagram-posted-items .thumb-adjust {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#instagram-posted-items .thumb-adjust span:nth-of-type(2) {
transform: none;
position: absolute;
top: auto;
left: auto;
margin: auto;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
#instagram-posted-items .thumb-adjust span:nth-of-type(2) img {
width: 100%;
height: auto;
}
#instagram-posted-items .thumb-adjust span.portrait, #instagram-posted-items .thumb-adjust span.portrait img {
width: auto;
height: 100%;
}
#instagram-posted-items .thumb-adjust span.landscape, #instagram-posted-items .thumb-adjust span.landscape img {
width: 100%;
height: auto;
} #instagram-posted-items a:hover .overlay {
background-color: rgba(20, 50, 100, .6);
} .recruit-banner {
margin: 5% 0;
position: relative;
}
.recruit-banner::before {
content: '';
background-color: #fff;
width: 100%;
height: 50%;
display: block;
position: absolute;
bottom: 0;
right: 0;
}
.recruit-banner .banner-body {
display: flex;
justify-content: space-between;
}
.recruit-banner .banner {
position: relative;
display: flex;
height:280px;
}
.recruit-banner .banner img.magnify{
height:100%;
object-fit: cover;
}
.recruit-banner .banner .scroll-slideup {
width: 100%;
}
.recruit-banner .banner:nth-of-type(1) {
width: 72%;
}
.recruit-banner .banner:nth-of-type(2) {
width: calc(28% - 15px);
}
.recruit-banner .banner a {
display: block;
position: relative;
height: 100%;
}
.recruit-banner .banner .caption {
display: flex;
justify-content: center;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
padding: 0 6%;
width: 88%;
height: 100%;
color: #fff;
line-height: 1.2;
} .recruit-banner .banner:nth-of-type(1) .caption p {
font-size: 1.2rem;
}
.recruit-banner .banner:nth-of-type(1) .caption p:nth-of-type(1) {}
.recruit-banner .banner:nth-of-type(1) .caption p:nth-of-type(2) {
padding: 15px 0 5px 0;
}
.recruit-banner .banner:nth-of-type(1) .caption p:nth-of-type(3) {}
.recruit-banner .banner:nth-of-type(1) .caption h5 {
font-weight: 400;
font-size: 4.6rem;
}
.recruit-banner .banner:nth-of-type(1) .uri {
top: 10px;
right: 15px;
}
.recruit-banner .banner:nth-of-type(1) .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(20, 50, 100, 0.3);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.recruit-banner .banner a:hover .overlay {
background-color: rgba(20, 50, 100, .4);
} .recruit-banner .banner:nth-of-type(2) a {
background-color: #B7BEC9;
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.recruit-banner .banner:nth-of-type(2) a:hover {
background-color: #143265;
}
.recruit-banner .banner:nth-of-type(2) .caption {
text-align: center;
}
.recruit-banner .banner:nth-of-type(2) .caption h5 {
font-size: 1.8rem;
}
.recruit-banner .banner:nth-of-type(2) .caption p {
padding: 5px 0 0 0;
font-size: 1.2rem;
}  #store-direct-link a {
display: block;
text-align: center;
padding: 10% 20px;
position: relative;
box-sizing: border-box;
}
#store-direct-link a::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
transition: opacity .3s ease, background-size 1.0s ease .3s;
background-image: url(//sui-beauty.net/wp-content/themes/sui2021/assets/images/common/store-bg.webp);
background-repeat: no-repeat;
background-size: 110% auto;
background-position: center;
opacity: 0;
}
#store-direct-link p:nth-of-type(1), #store-direct-link p:nth-of-type(2), #store-direct-link p:nth-of-type(3) {
color: #000;
transition: color .6s ease-out;
z-index: 1;
position: relative;
}
#store-direct-link p:nth-of-type(1) {
font-size: 1.2rem;
line-height: 1;
padding-bottom: 10px;
}
#store-direct-link p:nth-of-type(2) {
font-size: 4vw;
line-height: .8;
}
#store-direct-link p:nth-of-type(3) {
font-size: 1.2rem;
line-height: 1;
padding-top: 15px;
} #store-direct-link .strikethrough {
display: inline-block;
overflow: hidden;
position: relative;
line-height: 1;
}
#store-direct-link .strikethrough::before {
content: "";
display: block;
width: 100%;
height: 2px;
position: absolute;
bottom: auto;
left: 0;
right: 0;
top: 50%;
margin-top: 1px;
transition: transform .8s cubic-bezier(.215, .61, .355, 1);
background-color: #000;
transform: scaleX(0);
transform-origin: right;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
} #store-direct-link a:hover::before {
opacity: .3;
background-size: 100% auto;
transition: opacity .6s ease-in-out, background-size 6.0s ease;
}
#store-direct-link a:hover .strikethrough::after {
left: 0;
right: 0;
opacity: 1;
}
#store-direct-link a:hover .strikethrough::before {
transform: scaleX(1);
transform-origin: left;
-webkit-font-smoothing: antialiased;
} #touch-reserve a {
display: block;
text-align: center;
padding: 10% 20px;
position: relative;
z-index: 1;
}
#touch-reserve p.reserve, #touch-reserve p.text, #touch-reserve p.ja span span {
color: #143265;
transition: color .6s ease-out, letter-spacing .6s ease-out;
}
#touch-reserve p.name {
font-size: 1.6rem;
line-height: 1;
padding-bottom: 5px;
color: #717071;
}
#touch-reserve p.reserve {
font-size: 8vw;
line-height: .8;
}
#touch-reserve p.text {
font-size: 1.4rem;
line-height: 1;
padding-top: 5px;
}
#touch-reserve p.ja {
font-size: 1.2rem;
line-height: 1;
padding-top: 10px;
} #touch-reserve .link-underline {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
padding: 2px 0 10px 0;
}
#touch-reserve .link-underline::before, #touch-reserve .link-underline::after {
content: "";
position: absolute;
z-index: -1;
height: 1px;
transition: left .6s ease-in-out, right .6s ease-in-out, opacity .6s .2s;
}
#touch-reserve .link-underline::before {
left: 0;
right: 0;
bottom: 0;
background-color: transparent;
opacity: 1;
}
#touch-reserve .link-underline::after {
left: 50%;
right: 50%;
bottom: 0;
background-color: #143265;
opacity: 0;
} #touch-reserve a:hover p.reserve {
letter-spacing: .6rem;
}
#touch-reserve a:hover .link-underline::after {
left: 0;
right: 0;
opacity: 1;
} #reserve-request {}
#reserve-request ul {
display: flex;
list-style: none;
justify-content: space-between;
}
#reserve-request li {
width: calc(50% - 10px);
}
#reserve-request a {
display: block;
color: #fff;
text-align: center;
padding: 20px 5px;
line-height: 1;
}
#reserve-request a .en {
font-size: 2.2rem;
letter-spacing: .2rem;
}
#reserve-request a .en > span {
display: inline-block;
position: relative;
padding-left: 33px;
}
#reserve-request a .en svg {
position: absolute;
top: 50%;
left: 0;
fill: #fff;
width: 22px;
height: 22px;
margin-top: -11px;
}
#reserve-request a .ja {
font-size: 1.1rem;
padding-top: 5px;
font-weight: bold;
}
#reserve-request a:hover {
color: #143265;
}
#reserve-request a:hover .en svg {
fill: #143265;
} #lineup-menu .lineup-menu-inner {
background-color: #f8f9fa;
position: relative;
margin-bottom: 89px;
margin-top: 100px;
}
#lineup-menu .sidebar {
background-color: #fff;
position: absolute;
top: 0;
width: calc(8% + 10px);
height: 100%;
display: block;
}
#lineup-menu .sidebar.right {
right: 0;
}
#lineup-menu .sidebar.left {
left: 0;
} #lineup-menu .lineup.upper {
padding-bottom: 30px;
padding-top: 50px;
}
#lineup-menu .lineup.upper h3 {
font-size: 3.4rem;
font-weight: 400;
line-height: .8;
z-index: 5;
position: relative;
} #lineup-menu .lineup.lower {
padding-top: 30px;
}
#lineup-menu .lineup.lower h5 {
font-size: 1.8rem;
font-weight: normal;
line-height: 1.2;
position: relative;
}
#lineup-menu .lineup.lower p {
font-size: 1.4rem;
line-height: 1.6;
padding-top: 5px;
} #lineup-menu .lineup-link {
position: relative;
z-index: 1;
top: 39px;
}
#lineup-menu .lineup-link a {
display: block;
background-color: #143265;
color: #fff;
padding: 20px 20px;
text-align: center;
}
#lineup-menu .lineup-link a span {
color: #fff;
line-height: 1;
transition: color .2s ease-out;
}
#lineup-menu .lineup-link a span:nth-of-type(1) {
font-size: 1.1rem;
padding-bottom: 3px;
}
#lineup-menu .lineup-link a span:nth-of-type(2) {
font-size: 2.4rem;
}
#lineup-menu .lineup-link a .icon {
fill: #fff;
width: 9px;
height: 9px;
left: 10px;
margin-top: -4px;
}
#lineup-menu .lineup-link a::before {
background-color: #ddd;
}
#lineup-menu .lineup-link a:hover span {
color: #143265;
}
#lineup-menu .lineup-link a:hover .icon {
fill: #143265;
} #oroginal-menu-loop {}
#oroginal-menu-loop .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
z-index: 1;
}
#oroginal-menu-loop .caption {
position: absolute;
text-align: center;
width: calc(100% - 20px);
left: 0;
bottom: 0;
padding: 0 10px;
height: 100%;
display: block;
color: #fff;
z-index: 1;
}
#oroginal-menu-loop .caption .guide-text {
font-size: 1.1rem;
font-weight: normal;
position: absolute;
top: 20px;
left: 0;
width: 100%;
}
#oroginal-menu-loop .caption .en {
line-height: 1;
font-size: 1.6rem;
display: block;
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
letter-spacing: .2rem;
font-weight: 400;
}
#oroginal-menu-loop a {
color: #fff;
display: block;
} #oroginal-menu-loop a:hover .overlay {
background-color: rgba(0, 0, 0, .4);
}
#oroginal-menu-loop a:hover {
color: #143265;
}  .social-link {
display: flex;
align-items: center;
list-style: none;
}
.social-link li {
margin-left: 10px;
position: relative;
}
.social-link li:nth-of-type(1) {
margin-left: 0;
}
.social-link li .account {
position: absolute;
display: block;
color: #fff;
font-size: 1.1rem;
text-align: center;
top: -30px;
left: 0;
width: 100%;
}
.social-link li .account::before {
content: "";
position: absolute;
height: 8px;
width: 1px;
top: 18px;
left: 50%;
background-color: #fff;
}
.social-link a {
padding: 7px;
display: block;
background-color: #f2f2f2;
border-radius: 50%;
width: 14px;
height: 14px;
}
.social-link svg {
width: 14px;
height: 14px;
fill: #727171;
transition: fill .3s cubic-bezier(0.694, 0.048, 0.335, 1);
vertical-align: top;
} .pc .social-link a:hover svg {
fill: #143265;
} .social-link.individual { }
.social-link.individual li { position: relative;
}
.social-link.individual li:nth-of-type(1) { }
.social-link.individual a {
padding: 10px;
width: 18px;
height: 18px;
transition: background-color .3s cubic-bezier(0.694, 0.048, 0.335, 1)
}
.social-link.individual svg {
width: 18px;
height: 18px;
fill: #fff;
}
.social-link.individual a.twitter {
background-color: #55acee;
}
.social-link.individual a.facebook {
background-color: #3B5998;
}
.social-link.individual a.line {
background-color: #00c300;
}
.social-link.individual a.google {
background-color: #dd4b39;
} .pc .social-link.individual a:hover {
background-color: rgba(0, 0, 0, .05);
}
.pc .social-link.individual a:hover svg {
fill: #143265;
}
.pc .social-link.individual a.twitter:hover svg {
fill: #55acee;
}
.pc .social-link.individual a.facebook:hover svg {
fill: #3B5998;
}
.pc .social-link.individual a.line:hover svg {
fill: #00c300;
}
.pc .social-link.individual a.google:hover svg {
fill: #dd4b39;
} #scroll-up-btn {
position: fixed;
bottom: 60px;
right: 20px;
opacity: 0;
padding: 5px;
cursor: pointer;
overflow: visible;
z-index: 10;
transition: right .4s ease-out .6s, visibility .3s ease-out .4s, opacity .3s ease-out .6s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#scroll-up-btn svg {
width: 10px;
height: 94px;
fill: #000;
transition: fill .2s ease-out;
}
#scroll-up-btn.on {
right: 26px;
opacity: 1;
}
.pc #scroll-up-btn:hover svg {
fill: #143265;
}
#scroll-up-btn.flip svg {
fill: #fff;
}
.pc #scroll-up-btn.flip:hover svg {
fill: rgba(255, 255, 255, .3);
}
@media screen and (max-width:768px) {
#scroll-up-btn { right: 0px;
}
#scroll-up-btn.on { right: 12px;
}
} #page-header {
padding: 12% 0;
text-align: center;
}
#original.adjust{padding: 6% 0 0 0;}
#original #page-header,#salon #page-header{
padding: 0 0 3% 0;
}
.category-sui-lab #page-header,
#journal-list #page-header{
padding: 12% 0 3% 0;
}
#page-header #headline {
font-weight: 400;
font-size: 7vw;
line-height: 1.1;
}
#page-header #sub-headline {
font-weight: 400;
font-size: 2.2rem;
line-height: 1;
}
#page-header .page-header-upper {
padding-bottom: 40px;
position: relative;
}
#page-header .page-header-lower {
border-top: 1px solid #F2F2F2;
padding-top: 30px;
position: relative;
} #page-header.cllection,
.author #page-header .page-header-upper{
padding-bottom: 0%;
}  #contents-menu dl {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.3rem;
}
#contents-menu dl dt {
position: relative;
font-size: 1.1rem;
display: none;
}
#contents-menu dt > span:nth-of-type(1) {
display: inline-block;
position: relative;
padding-right: 20px;
}
#contents-menu ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
flex-wrap: wrap;
padding-bottom: 25px;
}
#contents-menu li {
margin: 0 25px;
position: relative;
}
#contents-menu a {
color: #000;
display: block;
position: relative;
transition: color .2s ease-out;
padding: 10px 0;
}
#contents-menu a br {
display: none;
}
#contents-menu a span {
display: block;
}
#contents-menu a .en {
font-size: 1.4rem;
line-height: 1;
}
#contents-menu a .ja {
font-size: 1.0rem;
line-height: 1;
padding-top: 2px;
}
#contents-menu svg {
width: 10px;
height: 5px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -5px;
transition: fill .2s ease-out;
}
#contents-menu a.current {
color: #ccc;
}
#contents-menu a.current svg {
fill: #ccc;
} #contents-menu a:hover {
color: #ccc;
}
#contents-menu a:hover svg {
fill: #ccc;
} #contents-menu.under a {
color: #999;
}
#contents-menu.under a:hover {
color: #000;
}
#contents-menu.under a.current {
color: #ccc;
} #contents-menu .category-page-category-list svg{
width: 9px;
height: 9px;
left: 1px;
margin-top: -5px;
padding-right:8px;
position: inherit;
} @media screen and (max-width:768px){
#page-header{padding-top:18%}
#page-header #headline{font-size:5rem;}
#collection #page-header{padding-bottom: 0;}
#contents-menu .block{padding: 0 60px 0 0;}
#contents-menu ul{height:auto;justify-content: space-around;}
#contents-menu ul li,
#contents-menu ul li.index{margin:0 0 10px;}
#contents-menu ul li.index:before{display:none;}
#contents-menu ul li a{display:block; padding:12px 20px;}
}
@media screen and (max-width:567px){
#contents-menu .block{padding: 0 50px 0 0;}
}  #contents-menu dt .i-plus {
width: 11px;
height: 11px;
transition: 0.5s;
transform: translateZ(0);
position: absolute;
right: 0;
top: 50%;
margin-top: -6px;
}
#contents-menu dt.active .i-plus {
transform: rotate(225deg);
}
#contents-menu .i-plus:before, #contents-menu .i-plus:after {
content: "";
display: block;
position: absolute;
background-color: #000;
}
#contents-menu .i-plus:before {
width: 1px;
height: 100%;
left: 5px;
top: 0;
margin-left: 0px;
}
#contents-menu .i-plus:after {
width: 100%;
height: 1px;
left: 0;
top: 5px;
margin-top: 0px;
} #contents-menu ul li .i-arrow-b {
padding-right: 10px;
position: relative;
transition: color .3s ease;
}
#contents-menu ul li .i-arrow-b .arrow {
width: 3px;
height: 3px;
border: 1px solid;
border-color: transparent transparent #b69997 #b69997;
transform: rotate(-45deg);
position: absolute;
top: 50%;
display: block;
margin-top: -3px;
right: 0;
transition: border-color .3s ease;
} .pc #contents-menu ul li .i-arrow-b:hover {
color: #000;
}
.pc #contents-menu ul li .i-arrow-b:hover .arrow {
border-color: transparent transparent #000 #000;
}  #next-content dl {
text-align: center;
}
#next-content dt {
border-bottom: 1px solid #F2F2F2;
padding: 0 0 20px 0;
overflow: hidden;
font-size: 2.2rem;
}
#next-content dt > span {
display: block;
position: relative;
top: 40px;
opacity: 0;
transition: top .8s cubic-bezier(.56, .08, .09, .96), opacity .8s cubic-bezier(.56, .08, .09, .96);
}
#next-content dd {
padding: 20px 0 0 0;
overflow: hidden;
}
#next-content ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
list-style: none;
position: relative;
top: -60px;
opacity: 0;
transition: top .8s cubic-bezier(.56, .08, .09, .96), opacity .8s cubic-bezier(.56, .08, .09, .96);
} #next-content.appear dt span {
top: 0;
opacity: 1;
}
#next-content.appear ul {
top: 0;
opacity: 1;
} #next-content li {
margin: 0 25px;
position: relative;
}
#next-content a {
color: #000;
display: block;
position: relative;
transition: color .2s ease-out;
padding: 10px 0;
}
#next-content a br {
display: none;
}
#next-content a span {
display: block;
}
#next-content a .en {
font-size: 1.4rem;
line-height: 1;
}
#next-content a .ja {
font-size: 1.0rem;
line-height: 1;
padding-top: 2px;
}
#next-content svg {
width: 10px;
height: 5px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -5px;
transition: fill .2s ease-out;
}
#next-content a.current {
color: #999;
}
#next-content a.current svg {
fill: #999;
} #next-content a:hover {
color: #999;
}
#next-content a:hover svg {
fill: #999;
} #contents-menu.under a {
color: #999;
}
#contents-menu.under a:hover {
color: #000;
}
#contents-menu.under a.current {
color: #000;
} br.hide {
display: none;
} .c-red {
color: #ff1d25;
}  @keyframes displayTime {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.scope-clickable {
display: flex;
margin-top: 8px;
}
.scope-clickable .swiper-pagination-bullet {
margin-left: 0 !important;
margin: 0 5px 0 0;
bottom: auto;
top: auto;
left: auto;
padding: 0;
text-align: left;
position: relative;
width: 25px;
height: 2px;
display: block;
border-radius: 0;
background-color: #ddd;
opacity: 1;
overflow: hidden;
}
.scope-clickable .swiper-pagination-bullet:nth-last-of-type(1) {
margin-right: 0;
}
.scope-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
content: '';
background-color: #143265;
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: -100%;
animation: displayTime 4.5s cubic-bezier(.645, .045, .355, 1);
z-index: 1;
} .swiper-button.move-next, .swiper-button.move-prev {
cursor: pointer;
background-image: none;
background-color: #ffffff;
width: 30px;
height: 30px;
position: absolute;
z-index: 1;
}
.swiper-button.move-next {
right: 2px;
bottom: 2px;
}
.swiper-button.move-prev {
right: 34px;
bottom: 2px;
}
.swiper-button.move-next svg, .swiper-button.move-prev svg {
width: 12px;
height: 12px;
fill: #143265;
position: absolute;
top: 9px;
left: 9px;
}
.swiper-button.move-next:hover svg {
animation: i-slide-r 640ms 1 forwards;
}
.swiper-button.move-prev:hover svg {
animation: i-slide-l 640ms 1 forwards;
} .pswp__button {
float: none;
}
.pswp__bg { background-color: #fff;
}
.pswp__counter {
font-family: 'Cinzel', serif;
left: auto;
right: 0;
color: #143265;
font-size: 2.0rem;
}
.pswp__ui--fit .pswp__caption {
background-color: rgba(0, 0, 0, 0);
}
.pswp__caption__center {
text-align: center;
max-width: 820px;
color: #000;
}
.pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption {
background-color: rgba(0, 0, 0, 0);
}
.pswp__button--arrow--left:before, .pswp__button--arrow--right:before {
background-color: rgba(0, 0, 0, 0);
}
.pswp__button--close {
background-image: url(//sui-beauty.net/wp-content/themes/sui2021/assets/images/common/pswp-close-button.svg);
background-size: 20px;
background-position: center;
}
.pswp__button--arrow--left:before {
background-image: url(//sui-beauty.net/wp-content/themes/sui2021/assets/images/common/pswp-left-button.svg);
background-size: 25px;
background-position: center;
}
.pswp__button--arrow--right:before {
background-image: url(//sui-beauty.net/wp-content/themes/sui2021/assets/images/common/pswp-right-button.svg);
background-size: 25px;
background-position: center;
}
.pswp__button--arrow--left:before {
left: 20px;
}
.pswp__button--arrow--right:before {
right: 20px;
}
.pswp__top-bar {
left: 15px;
top: 10px;
width: calc(100% - 30px);
}
.pswp__button--zoom {
display: none !important;
}
.pswp__top-bar, .pswp__caption {
background-color: rgba(0, 0, 0, 0);
} figure.enlarge a {
display: block;
position: relative;
}
figure.enlarge figcaption {
font-size: 1.3rem;
padding: 10px 0;
line-height: 130%;
} figure.enlarge .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
z-index: 1;
}
figure.enlarge a > p {
position: absolute;
text-align: center;
width: 100%;
height: 26px;
top: 50%;
left: 0;
margin-top: -13px;
display: block;
z-index: 1;
opacity: 0;
transition: opacity .4s cubic-bezier(0.694, 0.048, 0.335, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure.enlarge svg {
position: absolute;
height: 26px;
width: 26px;
top: 0;
left: 50%;
margin-left: -13px;
display: block;
fill: #fff;
}
.fold-num {
position: absolute;
height: 26px;
width: 26px;
top: 0;
left: 0;
display: block;
font-size: 1.6rem;
color: #000;
padding: 5px;
} figure.enlarge a:hover .overlay {
background-color: rgba(0, 0, 0, .3);
}
figure.enlarge a:hover > p {
opacity: 1;
}
.pc figure.enlarge a:hover {
color: #143265;
} a.scroll-down {
position: absolute;
left: 30px;
height: 50px;
width: 10px;
bottom: 15px;
background-color: transparent;
cursor: pointer;
outline: none;
z-index: 50;
transition: all .6s ease-in-out;
}
a.scroll-down:before, a.scroll-down:after {
position: absolute;
background-color: #143265;
content: '';
}
a.scroll-down:before {
top: 0px;
left: 50%;
width: 7px;
height: 7px;
margin-left: -3px;
border-radius: 100%;
animation: scroll_down_btn-animation 2s infinite;
}
a.scroll-down:after {
height: 100%;
width: 1px;
top: 0;
left: 5px;
}
a.scroll-down.white:before, a.scroll-down.white:after {
background-color: #fff;
}
@keyframes scroll_down_btn-animation {
0% {
transform: translate(0, 0);
opacity: 0;
}
40% {
opacity: 1;
}
80% {
transform: translate(0, 40px);
opacity: 0;
}
100% {
opacity: 0;
}
}
@media screen and (max-width:1024px) {
a.scroll-down {
bottom: 80px;
}
a.scroll-down:before, a.scroll-down:after {
background-color: #fff;
}
}
@media screen and (max-width:768px) {
a.scroll-down {
bottom: 27px;
}
.sp #original-menu a.scroll-down{display: none!important;}
} .pager .wp-pagenavi {
display: flex;
margin: 0 0 12% 0;
border-bottom: 1px solid #F2F2F2;
border-top: 1px solid #F2F2F2;
justify-content: space-between;
text-align: center;
} .pager .wp-pagenavi > span, .pager .wp-pagenavi a {
width: 100%;
border-left: 1px solid #F2F2F2;
box-sizing: border-box;
display: block;
color: #143265;
position: relative;
line-height: 1;
padding: 40px 10px;
font-size: 1.2rem;
}
.pager .wp-pagenavi a.blind-button:before {
z-index: -1;
background-color: rgba(20, 50, 101, 0.02);
}
.pager .wp-pagenavi > *:first-child {
border-left: none;
}
.pager .wp-pagenavi > *:last-child {
border-right: none;
}
.pager .wp-pagenavi .extend {
display: none;
}
.pager .wp-pagenavi a svg.icon {
fill: #143265;
width: 12px;
height: 12px;
margin-top: -6px;
top: 50%;
position: absolute;
} .pager .wp-pagenavi a svg.i-arrow-l {
left: 15px;
}
.pager .wp-pagenavi a svg.i-arrow-r {
right: 15px;
}
.pager .wp-pagenavi .current {
background-color: rgba(20, 50, 101, 0.02);
pointer-events: none;
cursor: default;
color: rgba(20, 50, 101, 0.2);
}
.pager .wp-pagenavi .current svg {
fill: rgba(20, 50, 101, 0.2) !important;
} .pager .wp-pagenavi a.center {
width: 45%;
}
.pager .wp-pagenavi a.center > span {
display: inline-block;
}
.pager .wp-pagenavi a.center > span span {
padding-left: 22px;
position: relative;
}
.pager .wp-pagenavi a.center svg.icon {
left: 0;
transition: fill .4s ease-in-out;
} @media screen and (max-width:1024px) {
.pager .wp-pagenavi {
margin: 0 0 12% 0;
}
#pager.pager .wp-pagenavi a.previouspostslink {
padding: 30px 20px 30px 40px;
text-align: right;
}
#pager.pager .wp-pagenavi a.nextpostslink {
padding: 30px 40px 30px 20px;
text-align: left;
}
}
@media screen and (max-width:768px) {
#pager.pager .wp-pagenavi > span, #pager.pager .wp-pagenavi a {
display: none;
}
#pager.pager .wp-pagenavi a.previouspostslink, #pager.pager .wp-pagenavi a.nextpostslink {
display: block;
padding: 30px;
text-align: center;
}
.pager .wp-pagenavi > span, .pager .wp-pagenavi a {
padding: 30px 0;
font-size: 1.2rem;
}
}
@media screen and (max-width:567px) {
.pager .wp-pagenavi > span, .pager .wp-pagenavi a {
padding: 20px 0;
}
.pager .wp-pagenavi a.index span span {
display: block;
padding: 1px;
}
.pager .wp-pagenavi a.index.center {
display: flex;
justify-content: center;
align-items: center;
max-width: 80px;
}
.pager .wp-pagenavi a svg.i-arrow-l {
left: 6px;
}
.pager .wp-pagenavi a svg.i-arrow-r {
right: 6px;
}
} .pager.staff a {
font-size: 1.1rem;
}
.pager.staff a span span {
padding: 0 2px;
}
.pager.collection-list {
padding: 80px 0;
} .side-pager {
position: fixed;
top: 0;
height: 100%;
width: 80px;
}
.side-pager.prev {
left: 0;
transition: left .6s ease-out;
}
.side-pager.next {
right: 0;
transition: right .6s ease-out;
}
.side-pager.prev.hide {
left: -82px;
}
.side-pager.next.hide {
right: -82px;
}
.side-pager a {
height: 130px;
width: 100%;
top: 50%;
margin-top: -65px;
transition: right .4s cubic-bezier(0.694, 0.048, 0.335, 1);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.side-pager.prev a {
left: -52px;
transition: left ease-out .6s;
}
.side-pager.next a {
right: -52px;
transition: right ease-out .6s;
}
.side-pager.prev.active a {
left: 0;
}
.side-pager.next.active a {
right: 0;
}
.side-pager a svg {
fill: #000;
width: 9px;
height: 46px;
transition: fill ease-out .6s;
}
.side-pager .eye-catch {
position: absolute;
top: 0;
width: 120px;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86) .6s;
}
.side-pager .eye-catch:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(243, 184, 185, .6);
transition: background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.side-pager .eye-catch.prev {
left: -162px;
}
.side-pager .eye-catch.next {
right: -162px;
}
.pc .side-pager.prev a:hover + .eye-catch.prev {
left: 0;
}
.pc .side-pager.next a:hover + .eye-catch.next {
right: 0;
}
.pc .side-pager a:hover svg {
fill: #fff;
} .side-pager.info .eye-catch {
width: 260px;
height: 140px;
top: 50%;
margin-top: -75px;
background-color: #143265;
}
.side-pager.info .eye-catch.prev {
left: -380px;
padding: 5px 5px 5px 80px;
}
.side-pager.info .eye-catch.next {
right: -380px;
padding: 5px 80px 5px 5px;
}
.side-pager.info .eye-catch .post-title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background-size: cover;
position: relative;
padding: 0 10px;
} .side-pager.info .eye-catch .post-title h3 {
font-size: 1.3rem;
color: #fff;
position: relative;
z-index: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}
.side-pager.info .eye-catch .post-title p {
font-size: 1.0rem;
color: #fff;
position: relative;
z-index: 1;
}
.pc .side-pager.prev.info a:hover + .eye-catch.prev {
left: 0;
}
.pc .side-pager.next.info a:hover + .eye-catch.next {
right: 0;
}
@media screen and (max-width:1024px) {
.side-pager .eye-catch {
width: 80px;
}
}
@media screen and (max-width:768px) {
.side-pager {
width: 40px;
}
.side-pager a svg {
width: 8px;
height: 46px;
}
}
@media screen and (max-width:567px) {
.side-pager {
display: none;
}
}
@media screen and (max-height:600px) { } #page-menu {
width: 100%;
}
#page-menu dl {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.3rem;
border-bottom: 1px solid rgba(182, 153, 151, .1);
}
#page-menu dl.left {
justify-content: flex-start;
}
#page-menu dl dt {
position: relative;
display: none;
font-size: 1.1rem;
}
#page-menu dt > span {
display: inline-block;
position: relative;
padding-right: 20px;
}
#page-menu ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
height: 60px;
padding: 0 35px;
}
#page-menu ul li {
font-size: 1.3rem;
margin: 0 8px;
position: relative;
}
#page-menu ul li.index {
margin-right: 25px;
}
#page-menu ul li.index:before {
content: "";
position: absolute;
top: 50%;
right: -18px;
width: 5px;
height: 1px;
background-color: #143265;
}
#page-menu ul li a {
color: #143265;
}
#page-menu ul li a.current {
color: #000;
}
#page-menu ul li a.current:before {
display: none;
}
@media screen and (max-width:1024px) {
#page-menu .block {
padding: 0 80px;
}
#page-menu dl, #page-menu dl.left {
justify-content: flex-end;
}
#page-menu ul {
padding: 0;
}
}
@media screen and (max-width:768px) {
#page-menu .block {
padding: 0 60px 0 0;
}
#page-menu ul {
text-align: right;
display: block;
padding-bottom: 20px;
height: auto;
}
#page-menu ul li, #page-menu ul li.index {
margin: 0;
}
#page-menu ul li.index:before {
display: none;
}
#page-menu ul li a {
display: block;
padding: 12px 20px;
border-bottom: 1px solid rgba(182, 153, 151, .1);
}
#page-menu ul li a:before {
display: none;
}
.pc #page-menu ul li a:hover {
color: #000;
}
}
@media screen and (max-width:567px) {
#page-menu .block {
padding: 0 50px 0 0;
}
}  #page-menu dt .i-plus {
display: none;
width: 11px;
height: 11px;
transition: 0.5s;
transform: translateZ(0);
position: absolute;
right: 0;
top: 50%;
margin-top: -6px;
}
#page-menu dt.active .i-plus {
transform: rotate(225deg);
}
#page-menu .i-plus:before, #page-menu .i-plus:after {
content: "";
display: block;
position: absolute;
background-color: #000;
}
#page-menu .i-plus:before {
width: 1px;
height: 100%;
left: 5px;
top: 0;
margin-left: 0px;
}
#page-menu .i-plus:after {
width: 100%;
height: 1px;
left: 0;
top: 5px;
margin-top: 0px;
} #page-menu ul li .i-arrow-b {
padding-right: 10px;
position: relative;
transition: color .3s ease;
}
#page-menu ul li .i-arrow-b .arrow {
width: 3px;
height: 3px;
border: 1px solid;
border-color: transparent transparent #143265 #143265;
transform: rotate(-45deg);
position: absolute;
top: 50%;
display: block;
margin-top: -3px;
right: 0;
transition: border-color .3s ease;
} .pc #page-menu ul li .i-arrow-b:hover {
color: #000;
}
.pc #page-menu ul li .i-arrow-b:hover .arrow {
border-color: transparent transparent #000 #000;
}
@media screen and (max-width:768px) {
#page-menu dl {
position: relative;
display: block;
height: auto;
border-bottom: none;
}
#page-menu dl dt {
display: block;
text-align: right;
pointer-events: auto;
cursor: pointer;
padding: 12px 0;
margin: 0; font-size: 1.3rem;
border-bottom: 1px solid rgba(182, 153, 151, .1);
}
#page-menu dt .i-plus {
display: block;
}
#page-menu dd {
display: none;
}
#page-menu ul li .i-arrow-b {
padding-right: 20px;
}
#page-menu ul li .i-arrow-b .arrow {
right: 3px;
}
.pc #page-menu dt:hover {
color: #143265;
}
.pc #page-menu dt:hover .i-plus:before, .pc #page-menu dt:hover .i-plus:after {
background-color: #143265;
}
} .column-set {
padding-top: 80px;
}
.column-set.adjust-bottom {
padding-bottom: 120px;
}
.column-set .packaging {
padding-left: 15%;
display: flex;
}
.column-set .packaging:nth-of-type(n + 2) {
padding-top: 80px;
} .column-set .column-name {
width: 30%;
padding-top: 10px;
}
.column-set .column-name h3 {
color: #a78335;
padding-bottom: 10px;
font-size: 1.8rem;
}
.column-set .column-name h3 span {
font-size: 1.4rem;
line-height: 120%;
display: block;
}
.column-set .column-name p {
font-size: 1.3rem;
}
.column-set .column-name p.menu-num {
color: #143265;
padding-bottom: 5px;
line-height: 100%;
} .column-set .column-details {
width: 70%;
}
.column-set .column-details > dl {
margin-left: 30px;
padding: 10px 0 10px 30px;
border-left: 1px solid rgba(182, 153, 151, .3);
}
.column-set .column-details > dl > dt {
color: #143265;
border-bottom: 1px solid rgba(182, 153, 151, .3);
padding-bottom: 10px;
}
.column-set .column-details > dl > dt .en {
font-size: 1.6rem;
padding-right: 5px;
}
.column-set .column-details > dl > dt .ja {
font-size: 1.2rem;
}
.column-set .column-details > dl > dt:nth-of-type(n + 2) {
padding-top: 40px;
}
.column-set .column-details > dl > dd > p {
font-size: 1.4rem;
padding-top: 13px;
}
.column-set .column-details > dl > dd dl {
display: flex;
flex-wrap: wrap;
font-size: 1.4rem;
padding-top: 14px;
}
.column-set .column-details > dl > dd dt {
width: 25%;
}
.column-set .column-details > dl > dd dd {
width: 75%;
}
.column-set .column-details > dl > dd dt:nth-of-type(n + 2), .column-set .column-details > dl > dd dd:nth-of-type(n + 2) {
padding-top: 14px;
margin-top: 14px;
border-top: 1px dashed rgba(182, 153, 151, .3);
}
.column-set .column-details > dl > dd dl.price {
justify-content: space-between;
flex-direction: row;
}
.column-set .column-details > dl > dd dl.price dt {
width: calc(100% - 130px);
}
.column-set .column-details > dl > dd dl.price dd {
width: 130px;
padding-left: 15px;
box-sizing: border-box;
} .column-set .column-details .itemization {
list-style: none;
text-align: left; margin-top: 10px;
color: #666;
}
.column-set .column-details .itemization li {
font-size: 1.3rem;
position: relative;
padding-left: 15px;
margin: 3px 0;
line-height: 130%;
}
.column-set .column-details .itemization li:before {
content: '※'; left: -3px;
top: 0;
position: absolute; } .column-set .column-details .serial-number li {
counter-increment: number;
padding-left: 15px;
}
.column-set .column-details .serial-number li:before {
content: counter(number) "."; top: 0;
font-size: 1.3rem;
} .column-set .column-details .photo {
padding-top: 13px;
}
.column-set .column-details .photo .caption {
font-size: 1.2rem;
padding-top: 5px;
color: #143265;
line-height: 120%;
} .column-set .column-details .line-upper {
border-top: 1px dashed rgba(182, 153, 151, .3);
padding-top: 14px;
margin-top: 14px;
} .column-set .column-details strong {
font-size: 1.3rem;
border-bottom: 1px solid #000;
margin-bottom: 8px;
display: inline-block;
line-height: 120%;
}
@media screen and (max-width:1024px) {
.column-set .packaging {
padding-left: 0;
}
}
@media screen and (max-width:768px) {
.column-set {
padding-top: 20px;
padding-right: 5%;
padding-left: 5%;
}
.column-set.adjust-bottom {
padding-bottom: 80px;
}
.column-set .packaging {
display: block;
padding-top: 60px;
}
.column-set .column-name {
width: 100%;
padding-top: 0;
padding-bottom: 10px;
}
.column-set .column-name h3 {
font-size: 2.0rem;
}
.column-set .column-name h3 span {
padding-top: 5px;
}
.column-set .column-name p {
font-size: 1.4rem;
}
.column-set .column-details {
width: 100%;
}
.column-set .column-details > dl {
margin-left: 0;
padding: 10px 0 10px 0;
border-left: none;
}
}
@media screen and (max-width:567px) {
.column-set .packaging:nth-of-type(1) {
padding-top: 40px;
}
.column-set .column-details > dl > dd dl.price dd {
text-align: right;
}
} .column-set-close {
text-align: center;
padding: 80px 0 0 0;
}
.column-set-close p {
font-size: 1.5rem;
line-height: 160%;
} .column-set-close .link-underline {
font-size: 1.3rem;
margin-top: 15px;
color: #000;
line-height: 130%;
}
.pc .column-set-close .link-underline:hover {
color: #143265;
}
#collection-loop .swiper-slide,#collection-loop2 .swiper-slide{height:300px!important;max-width:220px;}
#collection-loop .swiper-slide .magnify-scope img,#collection-loop2 .swiper-slide .magnify-scope img{height:300px!important;width: 220px;object-fit: cover;} @media screen and (max-width:768px) {
.global-nav nav{
display: none;
}
.break .deco-logo {
position: absolute;
bottom: -20px;
right: 20px;
}
.break .deco-logo svg {
fill: #143265;
width: 120px;
height: 50px;
}
#contens {
margin-top: 50px;
max-width: 100%;
}
.block-ss, .block-s {
padding-left: 10%;
padding-right: 10%;
}
.block-m,.block-l, .block{
padding-left: 10px;
padding-right: 10px;
}
.instagram-link{display: block;}
.instagram-link li {margin: 5px;}
.instagram-link a{width:100%;}
#instagram-posted-items .item {
width: calc(100% / 3);
height: 100%;
position: relative;
}
.recruit-banner .banner:nth-of-type(1) .caption h5 {
font-size: 1.8rem
}
.sp .recruit-banner .banner:nth-of-type(1) {
width: 62%
}
.sp .recruit-banner .banner:nth-of-type(2) {
width: 38%;
}
.sp .recruit-banner .banner:nth-of-type(2) .caption h5 {
font-size: 1.5rem
}	
#f-logo svg{
top: -15px;
left: 0;
}
#f-logo p{
padding:20px 0 0 15px;
}
#f-info .salon-info dd{
display: block;
}
#f-info .s-info {width:90%;margin-bottom: 8%;}
#f-info .get-in-touch ul,#f-info .aside-link ul{display: block}	
#connect {
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.social-link a, .sp .social-link svg {
width: 24px;
height: 24px;
}
#i-collection .txt-container.lower{width:80%;margin: 0 auto;}
#collection-loop a .overlay{position:absolute; top:0; left:0; width:100%; height:200px; background-color:rgba(20,50,100,0); transition:background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1); z-index:1;}
#collection-loop .swiper-slide{height:200px!important;max-width:125px;margin-right: 6px;}
#collection-loop .swiper-slide .magnify-scope img{height:200px!important;width: 125px;object-fit: cover;}
#collection-loop2 a .overlay{position:absolute; top:0; left:0; width:100%; height:200px; background-color:rgba(20,50,100,0); transition:background-color .4s cubic-bezier(0.694, 0.048, 0.335, 1); z-index:1;}
#collection-loop2 .swiper-slide{height:200px!important;max-width:125px;margin-right: 6px;}
#collection-loop2 .swiper-slide .magnify-scope img{height:200px!important;width: 125px;object-fit: cover;}
} #page404{
padding: 12% 0;
text-align: center;}
#page404 #contents{position: inherit;}
#page404 .not-found-nu{
font-size: 23rem;
color: #d7d7d7;
line-height: 1;
}
#page404 .not-found-en{
font-size: 3.8rem;
color: #d7d7d7;
line-height: 1.3;
}
#page404 .sorry{font-weight: bold;
font-size:1.8rem;
margin-bottom: 10px;}
#page404 .sorry-comment{width:90%;margin: 15px auto;}  @media print {
.no-print, #global-header, #fixed-header, #global-footer, #menu-button, .pager {
display: none !important;
}  .scroll-fade, .scroll-slideup, .scroll-drifting .effect-block, .scroll-up {
opacity: 1;
}
.scroll-up {
top: 0;
}
.scroll-drifting .effect-block {
transform: translate3d(0, 0, 0) skewY(0);
} * {
transition: none;
}
} body.page-template-page-salon #staff .entry-item{
display: none;
}
body.page-template-page-salon #staff .entry-item:nth-of-type(1){
display: block;
}
body.page-template-page-salon #staff .entry-item:nth-of-type(2){
display: block;
}
body.page-template-page-salon #staff .entry-item:nth-of-type(3){
display: block;
}
.author #page-header{padding-bottom: 6%;}
.author #page-header .page-header-upper{padding-bottom: 0;}	
#staff-individual-header .page-head-cover .staff-name p.affiliation-salon .scroll-drifting {display: inline-block;}
@media screen and (max-width:768px){
#commitment .txt-container p br{display: none;}
#header-logo svg{width:100px;height:40px;}
#site-link{padding:100px 0 30px 10px; }
.entry-list.staff.designer .entry-item,.entry-list.staff.carelist .entry-item{width:90%;}
.entry-list.staff.designer .entry-item:nth-last-of-type(-n + 2),
.entry-list.staff.carelist .entry-item:nth-last-of-type(-n + 3){padding-bottom:60px}
#next-content ul{height:auto;justify-content: space-around;}
#next-content ul li,
#next-content li.index{margin:0 0 10px;}
#next-content li a{	display: block; padding: 12px 20px;}
#staff-list .staff-connect{height:45px;}
.author #page-header,.author #page-header .page-header-upper{padding-bottom: 0;}	
#single-page #contens{margin-top: 0;}
}
.mybox{
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.mybox-inner figure{
display: inline-flex;
width: 200px;
margin: 1em;
}
.mybox-inner figure img{
width: 200px;
height: 240px;
object-fit: contain;
}
.mybox video{
width: 100%;
}
.sp .global-nav nav .lato{display: none;}
.sp #connect .connect-inner{ padding-left: 10px;}
.sp-only-navi ul{ margin:0 auto 10px;}
.sp-only-navi ul li {
}
.sp-only-navi ul li a {
display: block;
background:#143265;
color: #FFF;
padding: 10px 25px 10px 35px;
}
.sp-only-navi ul li a svg {
width: 16px;
height: 16px;
fill: #FFF;
position: absolute;
top: 50%;
left: 10px;
margin-top: -8px;
}
.sp-only-navi ul li a:hover {}
.sp-only-navi ul li a .link-underline:before {
background-color: #b69997;
}
.pc .sp-only-navi{display:none;}
.sp #original-individual{margin-top:70px;}
.single-post .entry-body img{
width:auto;
max-width:100%;	
}
.sp #refine-btn-wrap{padding-right:10px;}
.sp #sitenav ul li .more-link{padding-right:0;}
.vegas-slide-inner{
background-position: top right!important; }
.sp .vegas-slide-inner{
background-size: contain!important;
background-position: top center!important;
}
#yt-background video{width:100%;}
@media screen and (min-width: 481px) { 
.sp .sp-only-navi{display: none;}
.sp .global-nav nav .sub_menu{display: flex;}
.sp #first-view.salon-index h1{font-size:9rem;}
#travel-single {
padding: 12% 0;
}
#travel-single .entry-title{
margin: 0 0 10px;
font-size: 2em;
}
#travel-single .gallery{
display: flex;
}
#travel-single .gallery a{
width: 150px;
}