@charset "UTF-8";

/* CSS Document */
/*ブラウザクリア*/
ul {
display: block;
list-style-type: disc;

margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
}

p {
display: block;

margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

h2 {
display: block;
font-weight: bold;
font-size: 0em;

margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

body {
display: block;
margin: 0px;
}

/*ブラウザクリア*/
#harajuku7th {
overflow: hidden;
margin: 0 auto;
width: 100%;
background: #fff;
color: #000;
text-align: center;
font-size: 16px;
font-family: Arial, helvetica, 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W6', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

-webkit-font-smoothing: antialiased;
}

#harajuku7th a:hover {
opacity: .4;
transition: 1s;
}

#harajuku7th .inner {
margin: 0 auto;
max-width: 1200px;
width: 80%;
}

#harajuku7th .main {
position: relative;
width: 100%;
height: auto;
}

#harajuku7th h2 {
display: inline-block;
padding-bottom: 0;
border-bottom: solid 5px #000;
letter-spacing: -4;
font-weight: 300;
font-size: 3rem;
}

#harajuku7th h3 {
display: inline-block;
margin-bottom: 30px;
border-bottom: solid 2px #000;
font-size: 3rem;
}

#harajuku7th h4 {
margin: 30px auto 80px;
font-size: 2rem;
}

#harajuku7th .flex {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
margin: 50px auto;
}

#harajuku7th .wrap {
margin: 0 auto;
max-width: 800px;
width: 90%;
}

/*--------------------------
main
---------------------------*/
#harajuku7th .main{
position: relative;
width: 100%;
margin: 0px auto;
height: auto;
}
#harajuku7th .main .icon{
position: absolute;
width: 100px;
bottom: 24px;
left: 24px;
z-index: 1;
}
#harajuku7th .main .txt{
position: absolute;
width: 75%;
top: 50%;
left: 55%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
z-index: 1;
}
#harajuku7th .main .bg{
position: relative;
background: url(../image/main_imageB_pc.jpg) no-repeat;
background-size: contain;
}

#harajuku7th .flash{
width: 100%;
animation-name: flash;
animation: flash 4s linear infinite;
}

@keyframes flash{
0%,70%,80%,90%,100% {
opacity: 0;
}
10%,20%,50% {
opacity: 1;
}
}

/*--------------------------
contents
---------------------------*/
#harajuku7th .contents{
background: #000;
color: #fff;
}

#harajuku7th .contents .lead{
width: 90%;
padding: 160px 0;
margin: 0 auto;
}
#harajuku7th .contents .lead h2{
border: none;
font-weight: bold;
font-size: 3rem;
margin-bottom: 80px;
}
#harajuku7th .contents .lead p{
font-size: 1.3rem;
line-height: 2;
}


#harajuku7th .contents .column{
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
#harajuku7th .contents .column .flex{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}

#harajuku7th .contents .column .flex .image{
width: 45%;
}
#harajuku7th .contents .column .flex .Tarea{
width: 45%;
text-align: justify;
}
#harajuku7th .contents .column .flex .Tarea h3{
font-size: 2.4rem;
border: none;
}
#harajuku7th .contents .column .flex .Tarea p{
font-size: 1.1rem;
line-height: 1.8;
}


#harajuku7th .contents .item{
width: 90%;
margin: 160px auto;
}
#harajuku7th .contents .slide_wrap {
display: block;
width: 80%;
max-width: 500px;
margin: 0 auto;
}
#harajuku7th .contents .item h4{
font-size: 1.6rem;
color: #fff;
margin: 24px auto;
}
#harajuku7th .contents .item h4 span{
display: block;
font-size: 3rem;
}
#harajuku7th .contents .item p.price{
color: #fff;
font-size: 1.1rem;
margin: 40px auto 80px;
line-height: 1.8;
}
#harajuku7th .contents .item a.btn{
background: #fff;
padding: 24px 40px;
font-weight: bold;
}


#harajuku7th .contents .bottom{
padding: 80px 0 160px;
}

#harajuku7th .contents .bottom p{
font-size: 1rem;
line-height: 2.4;
}


/***************
slide-item
***************/

#harajuku7th ul.slide-item,
#harajuku7th ul.slide-item-second {
display: block;
margin: 0 auto;
margin-bottom: 1em;
}

#harajuku7th ul.slide-item {
width: 100%;
height: auto;
}

#harajuku7th ul.slide-item li.slick-slide li {
height: auto;
}

#harajuku7th ul.slide-item li.slick-slide img {
width: 100%;
}

#harajuku7th ul.slide-item.slick-initialized .slick-slide {
display: block;
margin: 0 auto;
/*width: 350px!important;*/
height: auto !important;
}

#harajuku7th .slide-item {
opacity: 1;
/*transition: opacity .3s linear;*/
}

#harajuku7th .slide-item.slick-initialized {
opacity: 1;
}

#harajuku7th ul.slide-item-bottom img {
display: block;
margin: 0 auto;
height: 160px;
}

#harajuku7th ul.slide-item.slick-initialized.slick-slider.slick-dotted .slick-list {
width: 100% !important;
}

/***************
slide-item
***************/

/***************
slick-option
***************/
#harajuku7th button {
margin: 0;
padding: 0;
outline: none;
border: none;
border-radius: 0;
background: none;

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

#harajuku7th .slick-slide {
outline: none;
}

#harajuku7th .slick-slide:not(.slick-current) {
opacity: 1;
}

#harajuku7th .slick-slide img {
display: block;
margin: 0 auto;
width: 100%;
}

#harajuku7th .slick-initialized {
opacity: 1
}

#harajuku7th .slide-arrow {
position: absolute;
top: 50%;
margin-top: -15px;
}

#harajuku7th .prev-arrow::before {
position: absolute;
top: 45%;
left: 5px;
z-index: 5;
margin-top: -5px;
width: 32px;
height: 32px;
border-top: solid 4px #231815;
border-right: solid 4px #231815;
content: '';
transform: rotate(225deg);
}

#harajuku7th .prev-arrow {
position: absolute;
left: 10px;
z-index: 4;
display: block;
margin-top: -10px;
width: 45px;
height: 45px;
border-radius: 50px;
content: "";
}

#harajuku7th .next-arrow::before {
position: absolute;
top: 45%;
right: 5px;
z-index: 5;
margin-top: -5px;
width: 32px;
height: 32px;
border-top: solid 4px #231815;
border-right: solid 4px #231815;
content: '';
transform: rotate(45deg);
}

#harajuku7th .next-arrow {
position: absolute;
right: 10px;
z-index: 4;
display: block;
margin-top: -10px;
width: 45px;
height: 45px;
border-radius: 50px;
content: "";
}

#harajuku7th .slick-dotted.slick-slider {
margin: 0 auto;
width: auto !important;
}

#harajuku7th .slick-dots {
position: absolute;
bottom: 5px;
display: none !important;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
text-align: center;
}

#harajuku7th .slick-dots li {
position: relative;
display: inline-block;
margin: 0 0px;
padding: 0;
width: 15px;
height: 15px;
cursor: pointer;
}

#harajuku7th .slick-dots li button {
display: block;
padding: 5px;
width: 15px;
height: 15px;
outline: none;
border: 0;
background: transparent;
color: transparent;
font-size: 0px;
line-height: 0px;
cursor: pointer;
}

#harajuku7th .slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}

#harajuku7th .slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}

#harajuku7th .slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
color: #ccc;
content: "•";
text-align: center;
font-size: 15px;
font-family: inherit;
line-height: 8px;
opacity: 1;

-webkit-font-smoothing: antialiased;
-moz-osx-fontsmoothing: grayscale;
}

#harajuku7th .slick-dots li .slick-active button:before {
color: black;
opacity: 0.75;
}

#harajuku7th .slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
color: #ccc;
content: '●';
text-align: center;
font-size: 15px;
font-family: inherit;
line-height: 8px;
opacity: 1;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

#harajuku7th .slick-dots li.slick-active button:before {
color: #ccc;
content: '○';
opacity: 1;
}

/***************
slick-option
***************/

/********オーダー**********/
.orderA {
order: 1;
}

.orderB {
order: 2;
}

/********オーダー**********/

/********フェード**********/
.sa {
width: 100%;
opacity: 0;
transition: all 1.5s ease;
}

.sa.show {
opacity: 1;
transform: none;
}

.sa--lr {
transform: translate(-100px, 0);
}

.sa--rl {
transform: translate(100px, 0);
}

.sa--up {
transform: translate(0, 50px);
}

.sa--down {
transform: translate(0, -100px);
}

.sa--scaleUp {
transform: scale(0.5);
}

.sa--scaleDown {
transform: scale(1.5);
}

.sa--rotateL {
transform: rotate(180deg);
}

.sa--rotateR {
transform: rotate(-180deg);
}

/********フェード**********/
.pc {display: block !important;}
.sp {display: none !important;}

@media only screen and (max-width: 750px) {
.pc {display: none !important;}
.sp {display: block !important;}

#harajuku7th .inner {
width: 85%;
}

#harajuku7th h2 {
display: block;
font-size: 2.5rem;
}

#harajuku7th h3 {
display: inline-block;
margin-bottom: 30px;
border-bottom: solid 2px #000;
font-size: 3rem;
}

#harajuku7th h4 {
margin: 30px auto 80px;
font-size: 2rem;
}

#harajuku7th .flex {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
margin: 50px auto;
}

/*--------------------------
main
---------------------------*/
#harajuku7th .main .icon{
position: absolute;
width: 60px;
}
#harajuku7th .main .txt{
position: absolute;
width: 75%;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#harajuku7th .main .bg{
background: url(../image/main_imageB_sp.jpg) no-repeat;
position: relative;
background-size: contain;
}

/*--------------------------
contents
---------------------------*/
#harajuku7th .contents .lead{
padding: 80px 0;
}
#harajuku7th .contents .lead h2{
width: 90%;
font-size: 1.4rem;
margin: 0 auto 60px;
}
#harajuku7th .contents .lead p{
width: 90%;
font-size: .95rem;
margin: 0 auto;
}


#harajuku7th .contents .column{
width: 90%;
margin: 0 auto;
}
#harajuku7th .contents .column .flex{
width: 90%;
flex-wrap: wrap;
}

#harajuku7th .contents .column .flex .image{
width: 100%;
}
#harajuku7th .contents .column .flex .Tarea{
width: 100%;
}
#harajuku7th .contents .column .flex .Tarea h3{
font-size: 1.4rem;
margin-top: 16px;
margin-bottom: 24px;
border: none;
}
#harajuku7th .contents .column .flex .Tarea p{
font-size: .9rem;
line-height: 1.6;
}


#harajuku7th .contents .item{
width: 100%;
margin: 160px auto 80px;
}
#harajuku7th .contents .item h4{
width: 90%;
font-size: 1rem;
}
#harajuku7th .contents .item h4 span{
font-size: 2rem;
}
#harajuku7th .contents .item p.price{
font-size: 1rem;
margin: 24px auto 40px;
}

#harajuku7th .contents .bottom{
padding: 80px 0 160px;
}

#harajuku7th .contents .bottom p{
width: 90%;
font-size: .8rem;
margin: 0 auto;
}


.slide {
width: 100%;
}
#harajuku7th .prev-arrow::before {
width: 16px;
height: 16px;
border-top: solid 4px #231815;
border-right: solid 4px #231815;
}

#harajuku7th .next-arrow::before {
width: 16px;
height: 16px;
border-top: solid 4px #231815;
border-right: solid 4px #231815;
}




/********オーダー**********/
.orderA {
order: 2;
}

.orderB {
order: 1;
}

/********オーダー**********/
}