@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Zen+Maru+Gothic:wght@500&display=swap");
:root{
--maincolor:#F78111;
--accentcolor:#BDD74F;
--basecolor:#FAEDCA;
--textcolor:#373A40;
--graycolor:#686d7666;
--highlightcolor:#F9F7F0;
--linecolor:#4CC764;
--gradientcolor:linear-gradient(90deg, rgb(from var(--maincolor) r g b / 0.8) 0%, #ffc100cc 50%, rgb(from var(--accentcolor) r g b / 0.8) 100%);
--gradientcolorre:linear-gradient(90deg, rgb(from var(--accentcolor) r g b / 0.8) 0%, #ffc100cc 50%, rgb(from var(--maincolor) r g b / 0.8) 100%);
}
html{
font-size: calc(10 / 1440 * 100vw);
font-feature-settings: "palt";
letter-spacing: 0.1em;
}
body{
font-family: "Noto Sans JP", sans-serif;
font-size: 1.6rem;
line-height: 1.6;
background: var(--highlightcolor);
color: var(--textcolor);
}
@media (max-width: 768px) {
html{
font-size: calc(10 / 393 * 100vw);
}
} body:has(#wpadminbar) .header {
top: 32px;
} @media screen and (max-width: 782px) {
body:has(#wpadminbar) .header {
top: 46px;
}
} .breadcrumb{
background: var(--basecolor);
font-size: 1.2rem;
margin-bottom: 8rem;
}
.breadcrumbs {
display: flex;
flex-wrap: wrap;
list-style: none;
max-width: 128rem;
margin: auto;
padding: 1.5rem;
color: rgb(from var(--graycolor) r g b / 0.4);
}
span[property="itemListElement"]:not(:last-of-type)::after ,
.breadcrumb_list_item:not(:last-of-type)::after {
content: "-";
margin: 0 .6em;
}
span[property="itemListElement"] a,
.breadcrumb_list_item a{
color: var(--maincolor);
} .wp-pagenavi{
display: flex;
justify-content: center;
gap: 1rem;
}
.wp-pagenavi a,
.wp-pagenavi span{
font-size: 1.4rem;
font-family: "Montserrat", sans-serif;
font-weight: bold;
width: 4rem;
height: 4rem;
border-radius: 50%;
border: 1px solid rgb(from var(--graycolor) r g b / 0.4);
display: grid;
place-content: center;
transition: all .3s ease;
}
.wp-pagenavi a:hover,
.wp-pagenavi .current{
border: 1px solid var(--maincolor);
background: var(--maincolor);
color: var(--highlightcolor);
}
.wp-pagenavi .extend {
border: none;
}
.wp-pagenavi .previouspostslink svg{
scale: -1 1;
}
.wp-pagenavi .previouspostslink:hover svg,
.wp-pagenavi .nextpostslink:hover svg{
fill: var(--highlightcolor);
}
.wp-pagenavi .pages{
display: none;
} .anchor_btn{
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 500;
width: 41rem;
border-radius: 8.7rem;
text-align: center;
color: #fff;
height: 7rem;
display: grid;
place-content: center;
margin: auto;
position: relative;
font-size: 2rem;
transition: all .3s ease;
overflow: hidden;
}
.anchor_btn::before{
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
90deg,
rgb(from var(--maincolor) r g b / 0.8) 0%,
#ffc100cc 50%,
rgb(from var(--accentcolor) r g b / 0.8) 100%
);
transition: all .8s ease;
transform-origin: center;
transform: translateY(-50%);
top: 50%;
aspect-ratio: 1/1;
}
.anchor_btn .icon_arrow{
position: absolute;
top:50%;
right: 2rem;
transform: translateY(-50%);
fill: #fff;
width: 3.4rem;
height: 3.4rem;
}
.anchor_btn:hover{
.icon_arrow{
right: 1rem;
}
}
.anchor_btn:hover::before{
transform: translateY(-50%) rotate(180deg);
}
.btn::before{
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
90deg,
rgb(from var(--maincolor) r g b / 0.8) 0%,
#ffc100cc 50%,
rgb(from var(--accentcolor) r g b / 0.8) 100%
);
transition: transform .5s ease;
transform-origin: center;
}
.btn:hover::before{
transform: scaleX(-1);
}
.icon_arrow{
transition: all .3s ease;
}
@media (max-width: 768px) {
.anchor_btn{
width: 90%;
font-size: 1.6rem;
height: 5rem;
}
.anchor_btn .icon_arrow{
width: 2.8rem;
height: 2.8rem;
}
} .menu-toggle{
display:none;
}
.hamburger{
display: none;
}
@media (max-width: 768px) {
body{
font-size: 1.4rem;
}
.hamburger{
position: fixed;
top: 2rem;
right: 2rem;
width: 4rem;
height: 3rem;
z-index: 1001;
cursor: pointer;
display: block;
}
.hamburger span{
position: absolute;
left: 0;
width: 100%;
height: 3px;
background: var(--gradientcolor);
border-radius: 999px;
transition: transform .3s ease, top .3s ease, bottom .3s ease, opacity .2s ease;
}
.hamburger span:nth-child(1){
top: 0;
}
.hamburger span:nth-child(2){
top: 50%;
transform: translateY(-50%);
}
.hamburger span:nth-child(3){
bottom: 0;
} .menu-toggle:checked + .hamburger span:nth-child(1){
top: calc(50% - 1.5px);
transform: rotate(45deg);
}
.menu-toggle:checked + .hamburger span:nth-child(2){
opacity: 0;
}
.menu-toggle:checked + .hamburger span:nth-child(3){
bottom: calc(50% - 1.5px);
transform: rotate(-45deg);
}
} .header{
background: rgb(from var(--basecolor) r g b / 0.8) ;
position: fixed;
top: 0; z-index: 99;
width: 100%;
filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.25));
}
.header_logo{
width: 20rem;
height: 9rem;
display: flex;
}
.header_logo img{
object-fit: contain;
}
.header_logo_icon{
width: 40%;
}
.header_logo_text{
width: 60%;
}
.header_inner{
display: flex;
align-items: center;
width: 95%;
margin: auto;
}
.header_nav{
display: flex;
align-items: center;
margin-left: auto;
gap: 3rem;
}
.header_nav_list{
display: flex;
gap: 3rem;
}
.header_nav_list_item{
font-size: 1.6rem;
font-weight: bold; 
}
.header_nav_list_item a{
transition: all .3s ease;
}
.header_nav_list_item a:hover{
color: var(--maincolor);
}
.header_nav_sns{
display: flex;
gap: 3rem;
}
.header_nav_sns img{
width: 4.5rem;
transition: all .3s ease;
}
.header_nav_sns img:hover{
opacity: .5;
}
.header .info_box{
display: none;
}
@media (max-width: 768px) {
.header_logo{
height: auto;
width: auto;
padding: 1.5rem 0;
position: relative;
z-index: 2;
}
.header_logo_icon{
display: none;
}
.header_logo_text{
width: 7rem;
}
.header_nav{
position: fixed;
top: 0;
left: 0;
height: 100svh;
width: 100%;
flex-direction: column;
justify-content: flex-start;
background: var(--basecolor);
transform:translateX(100%);
transition:all .4s ease;
overflow: auto;
padding: 7rem 0;
}
.header_nav_list{
flex-direction: column;
gap: 1rem;
width: 80%;
}
.header_nav_list_item{
padding-bottom: 1rem;
border-bottom: 1px solid rgb(from var(--graycolor) r g b / 0.4) ;
}
.header_nav_list_item a{
width: 100%;
display: block;
}
.menu-toggle:checked ~ .header_nav{
transform:translateX(0);
z-index: 1;
}
.header .info_box{
display: block;
transform: none;
}
} .sec_head_title span{
display: block;
}
.sec_head_title .en{
font-family: "Montserrat", sans-serif;
font-weight: bold;
font-size: 4.8rem;
color: var(--maincolor);
text-transform: uppercase;
}
.sec_head_title .ja{
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 500;
font-size: 2.0rem;
}
@media (max-width: 768px) {
.sec_head_title .en{
font-size: 3.6rem;
}
.sec_head_title .ja{
font-size: 1.5rem;
}
} .footer_inner{
width: 90%;
margin: 5rem auto;
padding: 4rem;
border-radius: 2rem;
background: var(--maincolor);
color: var(--highlightcolor);
display: flex;
justify-content: space-between;
}
.footer_logo{
width: 20rem;
height: 9rem;
display: flex;
}
.footer_logo img{
object-fit: contain;
}
.footer_logo_icon{
width: 40%;
}
.footer_logo_text{
width: 50%;
}
.footer_nav{
display: flex;
gap: 5rem;
align-items: start;
}
.footer_list{
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer_list_item a{
transition: all .3s ease;
display: block;
}
.footer_list_item a:hover{
transform: translateY(-.2rem);
}
.footer_sns{
margin-top: 8rem;
}
.footer_sns_list{
display: flex;
gap:3rem
}
.footer_sns_list svg{
vertical-align: middle;
}
@media (max-width: 768px) {
.footer_inner{
width: 100%;
margin: 0;
border-radius: 2rem 2rem 0 0;
flex-direction: column;
gap: 3rem;
padding-bottom: 10rem;
}
.footer_logo{
margin: auto;
width: 100%;
height: auto;
}
} .recruit_inner{
max-width: 94rem;
width: 90%;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 8rem 10rem;
background: url(//joyfoot-makidume.com/wp/wp-content/themes/joyfoot/assets/img/common/bnr_recruit.jpg) center/cover no-repeat;
border-radius: 8rem;
}
.recruit .anchor_btn{
background: var(--maincolor);
margin: 0;
align-self: end;
}
.recruit .recruit_head{
width: 100%;
}
.recruit .recruit_head_title,
.recruit .sec_head_title .en,
.recruit .recruit_cap{
color: #fff;
}
.recruit .recruit_cap{
line-height: 2;
}
.recruit_cap_first{
font-size: 150%;
}
@media (max-width: 768px) {
.recruit_inner{
padding: 5rem 4rem;
border-radius: 6rem;
flex-direction: column;
gap: 2rem;
}
.recruit_cap_first{
font-size: 140%;
margin-bottom: 1em;
}
.recruit .anchor_btn{
align-self: center;
margin-top: 3rem;
}
} .follow_btn{
position: fixed;
right: 5rem;
top: 15rem;
z-index: 999;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.follow_btn_item span{
display: none;
}
.follow_btn_item{
width: 6.8rem;
}
.follow_btn_item img{
transition: all .3s ease;
}
.follow_btn_item:hover img{
transform: translateY(-1rem);
}
@media (max-width: 768px) {
.follow_btn{
width: 100%;
flex-direction: row;
gap: 0;
right: 0;
top: auto;
bottom: 0;
text-align: center;
color: #fff;
height: 6rem;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 500;
border-radius: 2rem 2rem 0 0;
filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.5));
overflow: hidden;
}
.follow_btn_item{
width: 50%;
place-content: center;
}
.follow_btn_item.is_line{
background: #4CC764;
}
.follow_btn_item.is_web{
background: var(--accentcolor);
}
.follow_btn_item img{
display: none;
}
.follow_btn_item span{
display: flex;
justify-content: center;
align-items: center;
}
} .info_box{
display: flex;
align-items: stretch;
transform: translateY(-4rem);
}
.info_area{
padding: 1.2rem;
text-align: center;
display: flex;
flex-direction: column;
gap: 2rem;
}
.info_area_text{
font-size: 2rem;
font-weight: bold;
}
.info_area_text span{
font-size: 3.6rem;
margin-right: 1rem;
}
.info_area_title,
.info_timetable_title{
height: 4rem;
line-height: 4rem;
letter-spacing: 1rem;
text-indent: 1rem;
display: block;
object-fit: contain;
}
.info_area_title,
.info_timetable_title{
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 500;
font-style: normal;
color: #fff;
background: var(--maincolor);
border-radius: 3rem;
font-size: 2rem;
}
.info_timetable{
flex:1;
padding: 0 1.2rem;
border-left: 4px solid #fff;
}
.time-table{
width:100%;
border-collapse:collapse;
font-weight:700;
}
.time-table th,
.time-table td{
padding:1.2rem 1.2rem;
text-align:center;
font-size:1.8rem;
}
.time-table thead th{
font-size:2rem;
place-content: center;
}
.time-table tbody th{
text-align:center;
white-space:nowrap;
font-size:1.6rem;
place-content: center;
}
.time-table tbody tr:first-child th,
.time-table tbody tr:first-child td{
border-bottom:1px solid rgb(from var(--graycolor) r g b / 0.4);
}
.time-table .circle{
display:inline-block;
width:1.8rem;
height:1.8rem;
background:var(--maincolor);
border-radius:50%; }
.timetable_attention{
font-size: 1.4rem;
text-align: right;
}
@media (max-width: 768px) {
.info_box{
flex-direction: column;
padding: 0;
}
.info_timetable{
border-top: 4px solid #fff;
border-left: 0;
margin: 1.2rem;
padding: 2rem 0 0 0;
}
.info_area{
gap: 1rem;
}
.info_area_title,
.info_timetable_title{
font-size: 1.5rem;
height: 3rem;
line-height: 3rem;
}
.time-table thead th{
font-size: 1.4rem;
}
.time-table th, 
.time-table td{
padding: 0 .5rem;
}
.time-table tbody th{
font-size: 1.4rem;
}
.time-table .circle{
width: 1.4rem;
height: 1.4rem;
}
}