@charset "utf-8";

.pc{
display: none!important
}

*{
font-size:15px
}

div.loadingWrap img {
width: 60%;
}

/*--------------------breadcrumb--------------------*/

header.contents_header{
padding-top: 70px;
}

ol.contents {
border-bottom: solid 1px #dcdcdc;
width: 100%; 
margin: 0px auto;
text-align: right;
padding: 15px 4%;
display: flex;
align-items: center;
justify-content: right;
font-size:11px;
}

ol li{
display:block;
}

ol li:after{
content: '»';
font-size: 14px;
margin: 0px 5px 0px 5px;
color:#999
}

ol li:last-child:after{
content: '';
display: none;
}

a.breadcrumb span{
text-decoration: none;
font-weight: 500;
font-size:12px;
}

ol li:first-child a{
background: url(../img/icon/home.png) no-repeat left center;
background-size: 12px;
padding-left: 20px;
}

/*--------------------nav--------------------*/

nav.nav{
width: 100%;
height: 60px;
position: fixed;
left: 0px;
top:0px;
z-index: 11;
display: flex;
align-items: center;
justify-content: space-between;
background: #000
}

a.nav_menu{
width: calc(100% - 120px)
}

a.nav_menu img{
width: 94%;
margin: 0px auto
}

div.nav_right{
display: flex;
align-items: center;
}

a.nav_right{
width: 60px;
height: 60px;
background: #333;
display: flex;
align-items: center;
justify-content: center;
}

img.nav_right_inner{
width: 22px;
margin: 0px auto 5px auto
}

h3.nav_right_inner{
font-size: 10px;
text-align: center;
letter-spacing: -0.02em;
color: #fff;
font-weight: 600
}

div.menu-trigger{
width: 60px;
height: 60px;
background: #fff;
position: relative
}

a.menu-trigger,
a.menu-trigger span {
display: inline-block;
transition: all .4s;
position: relative;
}

a.menu-trigger {
position: absolute;
width: 20px;
height: 16px;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

a.menu-trigger span {
position: absolute;
right: 0;
width: 100%;
height: 1px;
background: #000;
}

a.menu-trigger span:nth-of-type(1) {
top: 0;
}
a.menu-trigger span:nth-of-type(2) {
top: 7px;
}
a.menu-trigger span:nth-of-type(3) {
bottom: 0;
}

a.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(7px) rotate(-45deg);
transform: translateY(7px) rotate(-45deg);

}

a.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}

a.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-7px) rotate(45deg);
transform: translateY(-7px) rotate(45deg);

}

.menuIn{
animation-fill-mode:both;
animation-duration:0.5s; 
animation-name: menuIn;
display: block!important;
}
 
@keyframes menuIn {
0% { opacity: 0;}
100% {opacity: 100;}
}

/*--------------------menu--------------------*/

menu.menu{
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top:0px;
background: #fff;
z-index: 10;
display: none
}

ul.menu_inner{
width: 100%;
position: absolute;
top:100px;

padding: 0px 8%
}

li.menu_logo{
display: none
}

li.menu_right{
display: block;
}

a.menu{
font-weight: 600;
font-size:17px;
display: block;
padding: 15px 0px;
border-bottom: solid 1px #dcdcdc
}

a.menu_small{
font-size:15px;
color: #666;
font-weight: 600;
display: flex;
align-items: center;
padding: 15px 0px;
border-bottom: solid 1px #dcdcdc
}

a.menu_small:before{
content: '▶︎';
margin-right: 10px;
font-size: 13px
}

li.menu_contact{
display: none
}

a.menu_contact{
width: 90%;
height: 50px;
display: block;
background: #00b5ee;
color: #fff;
display: flex;
align-items: center;
justify-content: center
}

span.menu_contact{
display: flex;
align-items: center;
}

span.menu_contact:before{
content: '';
width: 24px;
height: 24px;
background: url(../img/menu/mail.png) no-repeat center;
background-size: cover;
margin-right: 10px
}

/*--------------------header--------------------*/

header.header{
padding: 16px 8px;
position: relative;
margin-top: 70px;
margin-bottom: 10px;
position: relative;
}

div.inner{
display: grid;
grid-template-rows: repeat(5, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}

div.back_color{
width: 100%;
height: 100%;
position: absolute;
padding: 16px 8px;
gap: 12px;
top:0px;
left: 0px;
display: grid;
grid-template-rows: repeat(5, 1fr);
grid-template-columns: repeat(3, 1fr);
z-index: -1;
}

p.back_color{
aspect-ratio: 1 / 1;
background: #f3f4f4
}

div.inner .grid{
aspect-ratio: 1 / 1;
overflow: hidden;
opacity: 0;
transform: translateX(-24px) rotateY(-360deg);
transform-origin: center center;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform, opacity;
}

div.inner .grid.is-in{
animation: spinYSlide 0.6s ease-out var(--d,0s) both;
}

@keyframes spinYSlide{
0%{
opacity: 0;
transform: translateX(-24px) rotateY(-360deg);
}
100%{
opacity: 1;
transform: translateX(0) rotateY(0deg);
}
}

div.inner .grid-inner{
width: 100%;
height: 100%;
transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: transform 0.2s ease-out;
}

/* 半回転させる（addClass されている間だけ） */
div.inner .grid-inner.is-flipping{
transform: rotateY(90deg);
}

/* 動き控えめユーザー配慮 */
@media (prefers-reduced-motion: reduce){
div.inner .grid{ transform: translateX(-16px) rotateY(0); }

div.inner .grid.is-in{
animation: fadeSlideIn 0.35s ease var(--d,0s) both;
}

@keyframes fadeSlideIn{
from{ opacity: 0; transform: translateX(-16px); }
to{ opacity: 1; transform: translateX(0); }
}

/* 差し替えは回転させず軽くフェードだけにしたければここ調整 */
div.inner .grid-inner{
transition: opacity 0.35s ease;
}
div.inner .grid-inner.is-flipping{
transform: none;
}
}

/* スマホ（例：〜767px）だけ3つ隠す */
@media (max-width: 767px) {
    .back_color.item-16,
    .back_color.item-17,
    .back_color.item-18,
     .back_color.item-19{
        display: none;
    }
}

a.grid{
display: block;
width: 100%;
}

div.item_logo{
aspect-ratio: 1 / 1;
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: unset;
background: #fff
}

img.item_logo{
width: 90%;
}

div.dots{
position: absolute;
top: 6px;
bottom: 6px;
left: 0px;
right: 0px;
z-index: -1;
grid-template-rows: 6px 6px 6px 6px 6px 6px;
grid-template-columns: 6px 6px 6px 6px;
display: grid;
justify-content: space-between;
align-content: space-between;
}

div.dot{
width: 100%;
height: 100%;
background: #dcdcdc;
}

div.dot:nth-child(n+25) {
display: none;
}

/*--------------------sns--------------------*/

section#sns{
background: #000;
color: #fff;
padding: 15px 0px;
text-align: center
}

h3.sns{
font-size: 11px;
margin-bottom: 10px
}

div.sns{
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}

a.sns{
width: 28px
}

li.connection{

}

a.connection{
width: calc(100% - 16px);
margin: 0px auto 20px auto;
display: block;

}

/*--------------------connection--------------------*/

section#connection{
padding: 30px 0px 0px 0px
}

section#connection h2{
padding-left: 3%;
}

h2.connection{
font-size: 30px;
margin-bottom: 30px;
letter-spacing: 0em;
text-align: center;
font-family: 'impact';
font-weight: 100;
text-transform: uppercase;
line-height: 1.1
}

h2.connection i{
font-family: "Jost", sans-serif;
font-size: 12px;
font-weight: 500;
font-style: normal;
text-align: center;
letter-spacing: 0.08em;
padding-top: 10px;
}

/*-------------------stores--------------------*/

section#stores{
padding: 30px 8px
}

h3.stores_area{
width: 100%;
text-align: center;
border-bottom: solid 1px #000;
padding-bottom: 10px;
margin: 0px auto 20px auto;
}

div.stores{
margin: 0px auto 40px auto;
display: grid; 
grid-template-columns: 1fr 1fr 1fr;
gap: 15px
}

a.stores{
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
box-shadow: 2px 2px 8px #dcdcdc
}

h3.stores{
display: none
}

h4.stores{
display: none
}

a.stores_link{
display: none
}

/*-------------------fooer--------------------*/

footer.fooer{
background: #1a1a1a;
padding:40px 0px 0px 0px;
color: #fff;
position: relative
}

img.footer_logo{
width: 180px;
margin: 0px auto 40px auto;
}

div.fooer{
width: 100%;
margin: 0px auto;
margin-bottom: 40px;
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
position: relative
}

div.fooer a{
font-size: 0px;
}

a.fooer_sns{
color: #fff;
font-size: 13px;
display: flex;
align-items: center
}

a.instagram:before{
content: "";
width: 34px;
height: 34px;
background: url(../img/footer/instagram.svg) no-repeat center;
background-size: cover
}

a.x:before{
content: "";
width: 30px;
height: 30px;
background: url(../img/footer/x.svg) no-repeat center left;
background-size: cover;
position: relative;
left:-5px
}

a.tiktok:before{
content: "";
width: 26px;
height: 26px;
background: url(../img/footer/tiktok.svg) no-repeat center;
background-size: cover
}

a.youtube:before{
content: "";
width: 30px;
height: 30px;
background: url(../img/footer/youtube.svg) no-repeat center;
background-size: cover;
}

a.linkcore:before{
content: "";
width: 28px;
height: 28px;
background: url(../img/footer/linkcore.png) no-repeat center;
background-size: cover
}

div.fooer_under{
background: #000;
display: flex;
align-items: center;
flex-wrap: wrap;
border-bottom: solid 1px #444;
}

div.fooer_under a{
width: 50%;
text-align: center;
display: block;
border-top:solid 1px #444;
border-right: solid 1px #444;
padding: 12px 0px;
}

div.fooer_under a:nth-of-type(2n){
border-right: none;
}

p.copy{
background: #000;
text-align: center;
font-size: 12px;
padding-top: 30px;
padding-bottom: 110px
}

p.exception{
padding-bottom: 30px
}

p.totop{
width: 36px;
height: 48px;
border:solid 2px #dcdcdc;
border-radius: 5px;
background: #fff;
position:absolute;
right: 4%;
top:-26px;
}

p.totop img{
width: 50%;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
opacity: 0.7
}

/*-------------------footer_menu--------------------*/

div.footer_menu{
width: 100%;
background: #000;
position: fixed;
left: 0px;
bottom:0px;
display: flex;
align-items: center;
justify-content: center;
z-index: 9;
padding: 2px 0px 10px 0px;
opacity: 0;
pointer-events: none;
transition: opacity 0.6s ease;
}

.footer_menu.visible {
opacity: 1;
pointer-events: auto;
}

p.footer_menu{
width: calc(100% / 5);
}

img.footer_menu_logo{
width: 70%;
max-width: 90px;
margin: 0px auto
}

a.footer_menu{
width: calc(100% / 5);
color: #fff;
display: block;
text-align: center;
font-size: 10px;
font-weight: 600
}

img.footer_menu{
width: 24%;
max-width: 26px;
margin: 0px auto 5px auto
}

/*-------------------about--------------------*/

div.about_top{
width: 94%;
margin: 20px auto 0px auto
}

section#about{
padding: 30px 0px
}

article.about{
text-align: center
}

img.about_logo{
width: 60%;
margin: 0px auto 30px auto
}

h6.about{
font-size:18px;
margin-bottom: 20px
}

p.about{
line-height: 1.8;
font-size: 14px
}

div.management{
width: 94%;
display: grid;
margin: 0px auto;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}

p.management_image{
margin-bottom: 10px
}

h3.management_name{
font-size: 20px
}

h4.management_kana{
font-size: 13px;
font-weight: 400;
color: #666;
margin-bottom: 10px;
letter-spacing: 0px
}

div.management_sns{
display: flex;
align-items: center;
gap: 15px
}

a.management_sns{
width: 20px
}

/*--------------------media--------------------*/

section.media{
padding: 30px 4%;
}

h2.media{
font-size: 26px;
text-align: center;
font-family: "Cinzel", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
margin-bottom: 30px
}

i.media{
font-size:13px;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
padding-top: 10px;
font-style: normal;;
display: flex;
align-items: center;
gap: 10px;
justify-content: center
}

i.media:before,i.media:after{
content: "";
width: 20px;
height: 1px;
background: #000
}

p.media{
font-size:13px;
line-height: 1.8
}

article.media{
margin-bottom: 30px
}

article.contact{
border:solid 2px #000;
padding: 15px
}

h3.media{
font-size: 18px;
text-align: center;
margin-bottom: 30px
}

h3.media i{
font-size:12px;
}

a.media{
font-size:18px;
font-weight: 700;
display: block;
display: flex;
align-items: center;
 justify-content:  center;
gap: 5px;
margin-bottom: 20px;
text-decoration: underline
}

a.tel:before{
content: "";
width: 30px;
height: 30px;
background: url(../img/icon/mobile.png) no-repeat center;
background-size: 100%
}

a.mail:before{
content: "";
width: 30px;
height: 30px;
background: url(../img/icon/mail.png) no-repeat center;
background-size: 100%
}

/*--------------------recruit--------------------*/

div.recruit_container{
max-width: 700px;
margin: 0px auto;
padding-top: 0px
}

header.recruit_header{
margin-bottom: 30px
}

img.recruit_banner{
width: 94%;
margin: 0px auto 30px auto
}

div.recruit_header{
width: 94%;
margin: 0px auto;
aspect-ratio: 9 / 16;
background: #dcdcdc;
position: relative;
}

a.solution{
width: 94%;
display: block;
margin: 0px auto 30px auto
}

section#information{
padding: 20px 3%
}

ul.recruit_tab{
display: flex;
align-items: end
}

li.recruit_tab{
width: calc(100% / 3);
background: #dcdcdc;
border-radius: 10px 10px 0px 0px;
text-align: center;
font-size: 14px;
font-weight: 700;
padding: 8px 0px
}

li.recruit_tab:hover{
cursor: pointer
}

li.selected{
padding: 8px 0px 20px 0px
}

li.recruit_tab:nth-of-type(1){
background: #d2f4ff
}

li.recruit_tab:nth-of-type(2){
background: #a3a3a3
}

li.recruit_tab:nth-of-type(3){
background: #aee5da
}

div.information{
padding: 15px
}

div#t1{
background: #d2f4ff
}

div#t2{
background: #a3a3a3
}

div#t3{
background:#aee5da
}

p.information{
font-size: 12px
}

/*--------------------recruit--------------------*/

header.recruit_header{
margin-bottom: 30px;
margin-top: 20px
}

img.recruit_banner{
width: 94%;
margin: 0px auto 30px auto
}

div.recruit_page_link{
width: 94%;
position: fixed;
left:50%;
transform: translateX(-50%);
bottom: 0px;
z-index: 10;
opacity: 0;
pointer-events: none;
transition: opacity 0.6s ease;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 0px
}

div.recruit_page_link.visible {
opacity: 1;
pointer-events: auto;
}

a.recruit_header_link{
display: block;
}

a.solution{
width: 94%;
display: block;
margin: 0px auto 30px auto
}

section#recruit_contents{
width: 94%;
margin: 0px auto;
}

div.recruit_contents{
margin-bottom: 40px;
position: relative
 }

p.recruit_contents{
width: 100%;
border-radius: 15px;
}

article.recruit_contents{
width: 50%;
position: absolute;
top:0px;
padding: 0px 0px 15px 15px;
background: rgba(255,255,255,0.6)
}

div.recruit_contents:nth-of-type(1n) article.recruit_contents{
right:0px;
padding-right: 15px
}

div.recruit_contents:nth-of-type(2n) article.recruit_contents{
left: 0px
}

h3.recruit_contents{
font-family: "Zen Old Mincho", serif;
font-size: 46px;
font-weight: 700;
font-style: normal;
margin-bottom: 10px;
}

h3.recruit_contents:after{
content: "";
width: 98%;
height: 1.5px;
background: #000;
display: block
}

div.recruit_contents:nth-of-type(1n) h3.recruit_contents:after{
margin: 0px 0px 0px auto
}

div.recruit_contents:nth-of-type(2n) h3.recruit_contents:after{
margin-left: 0px
}

div.recruit_contents:nth-of-type(1n) article.recruit_contents h3{
text-align: right
}

div.recruit_contents:nth-of-type(2n) article.recruit_contents h3{
text-align: left
}

div.recruit_contents:nth-of-type(1n) p.recruit_contents_txt{
margin: 0px 0px 15px auto
}

div.recruit_contents:nth-of-type(2n) p.recruit_contents_txt{
margin-left: 0%
}

h3.palt{
letter-spacing: -0.2em
}

h3.recruit_contents i{
display: none
}

p.recruit_contents_txt{
width: 98%;
font-size: 12px;
line-height: 1.5;
margin-bottom: 20px;
text-align: justify;

}

div.recruit_contents_thumbnail{
width: 98%;
display: flex;
align-items: start;
justify-content: space-between
}

div.recruit_contents:nth-of-type(1n) div.recruit_contents_thumbnail{
margin: 0px 0px 0px auto
}

div.recruit_contents:nth-of-type(2n) div.recruit_contents_thumbnail{
margin-left:0%
}

div.recruit_contents_thumbnail p{
width: 48%;
aspect-ratio: 1 / 1;

}

div.recruit_contents_thumbnail p img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top
}

section#information{
width:94%;
margin: 0px auto;
padding: 20px 0px
}

ul.recruit_tab{
display: flex;
align-items: end
}

li.recruit_tab{
width: calc(100% / 3);
background: #dcdcdc;
border-radius: 10px 10px 0px 0px;
text-align: center;
font-size: 15px;
font-weight: 700;
padding: 8px 0px
}

li.recruit_tab:hover{
cursor: pointer
}

li.selected{
padding: 8px 0px 20px 0px
}

li.recruit_tab:nth-of-type(1){
background: #d2f4ff
}

li.recruit_tab:nth-of-type(2){
background: #a3a3a3
}

li.recruit_tab:nth-of-type(3){
background: #aee5da
}

div.information{
padding: 15px
}

div#t1{
background: #d2f4ff
}

div#t2{
background: #a3a3a3
}

div#t3{
background:#aee5da
}

p.information{
font-size: 13px;
margin-bottom: 40px;
font-weight: 500;
background: #fff;
text-align: justify;
padding: 15px;

}

div.information_wrap{
border:solid 1px #efefef;
background: #fff;
border-bottom: none
}

ul.information{
width: 100%;
display: block;

}

ul.information li{
display: block;
padding: 15px 0px;
font-size: 14px
}

li.information_left{
width: 100%;
background: #efefef;
text-align: center;
font-weight: 700;
border-right: solid 1px #efefef;
border-bottom: solid 1px #fff
}

li.information_right{
border-bottom: solid 1px #efefef;
padding-left: 20px!important;
padding-right: 20px!important
}