@charset "utf-8";

.mobile{
display: none!important
}

*{
font-size:15px
}

div.loadingWrap img {
width: 400px;
}

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

header.contents_header{
border-top: solid 1px #dcdcdc;
border-bottom: solid 1px #dcdcdc;
padding: 120px 0px 15px;
}

ol.contents {
width: 1200px; 
margin: 0px auto;
text-align: right;
}

ol li{
display:inline-block;
vertical-align: middle
}

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:13px;
}

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

ol li a:hover {
text-decoration: underline;
}

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

nav.nav{
display: none
}

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

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

ul.menu_inner{
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 5%
}

li.menu_logo{
width: 200px;
}

li.menu_right{
width: calc(100% - 400px);
display: flex;
align-items: center;
justify-content: end;
gap: 30px;
padding-right: 40px
}

a.menu{
font-weight: 600;
font-size:17px
}

a.menu_small{
font-size:15px;
color: #444444;
font-weight: 600;
display: flex;
align-items: center
}

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

li.menu_contact{
width: 200px;
}

a.menu_contact{
width: 200px;
height: 80px;
display: block;
background: #000;
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: 32px;
margin-top: 80px;
position: relative;
}

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

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

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

div.inner .grid{
aspect-ratio: 1 / 1;
opacity: 0;
overflow: hidden;
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;
}

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;
}
}

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

div.item_logo{
grid-row: 2 / 3;
-ms-grid-column: 3;
-ms-grid-column-span: 2;
grid-column: 3 / 5;
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: unset;
padding: 32px;
background: #fff
}

a.item_logo{
width: 72%;
display: block;
}

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

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

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

section#sns{
background: #000;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: #000;
padding: 15px 0px
}

h3.sns{
font-size: 13px;
border-right: solid 1px #fff;
padding: 6px 20px 6px 0px
}

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

a.sns{
width: 28px
}

li.connection{
margin: 0px 10px
}

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

section#connection{
padding: 60px 0px 100px 0px
}

h2.connection{
width: 1200px;
margin: 0px auto;
font-size: 40px;
margin-bottom: 40px;
letter-spacing: 0em;
text-align: center;
font-family: 'impact';
font-weight: 100;
}

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

ul.connection{
background: #efefef;
padding-top: 20px
}

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

section#stores{
padding: 60px 0px
}

h3.stores_area{
width: 1200px;
border-bottom: solid 1px #000;
margin: 0px auto 20px auto;
}

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

a.stores{
display: block;
margin-bottom: 10px;
letter-spacing: 0em!important;
border:solid 1px #dcdcdc
}

h3.stores{
font-size: 13px;
text-align: center;
font-family: "Noto Serif JP", serif;
font-weight: 600;
font-style: normal;
margin-bottom: 2px;
}

h4.stores{
font-size: 10px;
color: #666;
text-align: center;
font-weight: 500;
margin-bottom: 5px
}

a.stores_link{
display: block;
font-size: 13px;
text-align: center;
text-decoration: underline;
display: flex;
align-items: center;
justify-content: center
}

a.stores_link:after{
content: '→';
}

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

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

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



div.fooer{
width: 1200px;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
margin-bottom: 40px
}

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

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

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

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

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

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

div.fooer_under{
background: #000;
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
padding: 30px 0px
}

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

p.recruit{
padding-bottom: 150px
}

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

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


p.totop:hover{
cursor: pointer
}

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

div.footer_menu{
display: none
}

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

div.about_top{
width: 1200px;
margin: 40px auto 0px auto
}

section#about{
padding: 60px 0px
}

article.about{
text-align: center
}

img.about_logo{
width: 380px;
margin: 0px auto 40px auto
}

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

p.about{
line-height: 1.8
}

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

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: 60px 0;
}

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

i.media{
font-size:15px;
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{
text-align: center;
font-size:15px;
line-height: 2
}

article.media{
width: 900px;
margin:0px auto 60px auto
}

article.contact{
width: 600px;
margin: 0px auto;
border:solid 2px #000;
padding: 20px
}

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

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

a.media{
font-size:22px;
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: 1200px;
margin: 0px auto;
padding-top: 0px
}

header.recruit_header{
width: 1200px;

margin: 30px auto
}

img.recruit_banner{


}

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

div.recruit_page_link{
width: 400px;


position: fixed;
right: 0%;

bottom: 40px;
z-index: 10;

}

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

a.recruit_header_link{
display: block;
}

a.recruit_header_link:last-of-type{
margin-bottom: 0px
}

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

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

div.recruit_contents{
display: flex;
align-items: flex-start; 
margin-bottom: 40px
 }

div.recruit_contents:nth-of-type(2n){
flex-direction: row-reverse
}

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

article.recruit_contents{
width: 600px;
padding: 25px;
border-radius: 15px;
box-shadow: 10px 10px 10px #dcdcdc;
position: relative;
background: #fff;
margin-top: 60px
}

div.recruit_contents:nth-of-type(1n) article.recruit_contents{
margin-left: -150px
}

div.recruit_contents:nth-of-type(2n) article.recruit_contents{
margin-right: -150px
}

h3.recruit_contents{
font-family: "Zen Old Mincho", serif;
border-bottom: solid 1.5px #000;
padding-bottom: 5px;
font-size: 54px;
font-weight: 700;
font-style: normal;
display: flex;
align-items: end;
justify-content: space-between;
gap: 10px;
margin-bottom: 20px
}

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

h3.recruit_contents i{
letter-spacing: 0em;
font-size: 16px;
white-space: nowrap;
}

p.recruit_contents_txt{
font-size: 15px;
line-height: 1.6;
margin-bottom: 20px
}

div.recruit_contents_thumbnail{
display: flex;
align-items: start;
gap: 10px
}

div.recruit_contents_thumbnail img{
width: 160px
}

section#information{
width: 1100px;
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: 18px;
font-weight: 700;
padding: 15px 0px
}

li.recruit_tab:hover{
cursor: pointer
}

li.selected{
padding: 20px 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: 25px
}

div#t1{
background: #d2f4ff
}

div#t2{
background: #a3a3a3
}

div#t3{
background:#aee5da
}

p.information{
font-size: 14px;
margin-bottom: 40px;
font-weight: 600;
background: #fff;
padding: 30px
}

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

ul.information{
width: 100%;
display: table;
table-layout: fixed
}

ul.information li{
display: table-cell;
vertical-align: middle;
padding: 15px 0px;
}

li.information_left{
width: 200px;
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
}