@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&display=swap"); html , body , div , span , applet , object , iframe , h1 , h2 , h3 , h4 , h5 , h6 , p , blockquote , pre , a , abbr , acronym , address , big , cite , code , del , dfn , em , font , img , ins , kbd , q , s , samp , small , strike , strong , sub , sup , tt , var , b , u , i , center , dl , dt , dd , ol , ul , li , fieldset , form , label , legend , table , caption , tbody , tfoot , thead , tr , th , td{
padding : 0;
margin : 0;
font-size : 1em;
background : transparent;
border : 0;
outline : 0;
}
html{
font-size : 62.5%;
}
body , table , input , textarea , select , option{
font-family : "Noto Sans JP" , sans-serif;
}
article , aside , canvas , details , figcaption , figure , footer , header , hgroup , menu , nav , section , summary{
display : block;
}
ol , ul{
list-style : none;
}
blockquote , q{
quotes : none;
}
:focus{
outline : 0;
}
ins{
text-decoration : none;
}
del{
text-decoration : line-through;
}
img{
max-width : 100%;
height : auto;
vertical-align : top;
}
a , a:link{
color : #000;
text-decoration : none;
}
a:visited{
color : #000;
}
a:hover{
color : #000;
}
a:active{
color : #000;
} body{
font-size : 1.7rem;
font-weight : 400;
-moz-font-feature-settings : "palt";
font-feature-settings : "palt";
line-height : 1.5;
color : #000;
background-color : #fff;
-webkit-text-size-adjust : none;
text-size-adjust : none;
}
#container{
min-width : 960px;
padding : 0;
text-align : left;
}
#container .wrapper{
max-width : 1110px;
margin : 0 auto;
}
.pc{
display : block ! important;
}
.sp{
display : none ! important;
}
a[href^="tel:"]{
pointer-events : none;
cursor : default;
}
@media all and ( max-width : 768px ){
body{
min-width : inherit;
font-size : .9rem;
}
#container{
min-width : auto;
padding : 0;
}
#container .wrapper{
width : auto;
}
a:hover , a:hover img{
opacity : 1 ! important;
}
.pc{
display : none ! important;
}
a[href^="tel:"]{
pointer-events : auto;
cursor : pointer;
}
.pc{
display : none ! important;
}
.sp{
display : block ! important;
}
}
section{
padding : 24px 0;
} .content{
width : 750px;
margin : 0 auto;
}
@media all and ( max-width : 896px ){
.content{
width : auto;
margin : 0 10px;
}
} .head-line01{
box-sizing : border-box;
min-height : 121px;
padding-top : 30px;
margin : -22px 0 -35px;
font-size : 1.8rem;
font-weight : 500;
text-align : center;
letter-spacing : .08em;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/stacari/bg02.png) no-repeat center top / auto 100%;
}
@media all and ( max-width : 896px ){
.head-line01{
width : 95%;
max-width : 338px;
min-height : inherit;
padding-top : 0;
margin : -16px auto -17px;
background : transparent;
}
} .head-line02{
position : relative;
z-index : 1;
width : fit-content;
margin : 0 auto 30px;
font-size : 3.5rem;
font-weight : 700;
line-height : 1.2em;
text-align : center;
letter-spacing : .19em;
}
.head-line02::after{
position : absolute;
bottom : .2rem;
left : -1.5%;
z-index : -1;
width : 100%;
height : 1.8rem;
content : "";
background : #ffe100;
}
.head-line02 .imgtxt{
display : inline-block;
margin : -42px -9px 0 22px;
vertical-align : top;
}
@media all and ( max-width : 896px ){
.head-line02{
font-size : 2.5rem;
letter-spacing : .15em;
}
.head-line02::after{
height : 1.2rem;
}
.head-line02 .imgtxt{
width : 31px;
margin : -8px -10px 0 12px;
}
} .com-link{
width : 489px;
padding-left : 29px;
margin : 0 auto 19px;
}
.com-link a:hover{
opacity : .7;
}
@media all and ( max-width : 896px ){
.com-link{
width : 83%;
padding-left : 10px;
margin-bottom : 9px;
}
} #g-header{
position : relative;
z-index : 10;
width : 100%;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/stacari/kv.png) no-repeat center top / 100% auto;
}
#g-header .content{
position : relative;
display : flex;
flex-direction : column;
align-items : center;
justify-content : flex-end;
width : 100%;
padding-top : 65%;
margin : 0 auto;
text-align : right;
}
#g-header .content .container{
position : absolute;
top : 60px;
width : 820px;
margin : auto;
}
#g-header h1{
width : 100%;
margin : 0 auto 30px;
}
#g-header h1 img{
width : 350px;
}
#g-header .kv-txt{
display : flex;
justify-content : flex-end;
width : 100%;
margin-bottom : -10px;
font-size : 2.2rem;
font-weight : 700;
line-height : 3.6rem;
letter-spacing : .4rem;
}
#g-header .kv-txt p{
width : 340px;
text-align : left;
}
#g-header .kv-txt p span{
position : relative;
z-index : 1;
display : inline-block;
}
#g-header .kv-txt p span::after{
position : absolute;
bottom : .5rem;
left : -1%;
z-index : -1;
width : 100%;
height : 1rem;
content : "";
background : #ffe102;
}
#g-header .cta{
width : 100%;
}
#g-header .cta a{
display : inline-block;
width : 260px;
}
@media all and ( max-width : 768px ){
#g-header{
background : #fff;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/stacari/kv-sp.png) no-repeat center top / 100% auto;
border-radius : 10px 10px 0 0;
}
#g-header .content .container{
position : relative;
top : 0;
box-sizing : border-box;
width : 100%;
padding : 16px;
}
#g-header .content{
padding-top : 117%;
}
#g-header h1{
display : none;
}
#g-header h1 img{
width : 50%;
}
#g-header .pho{
padding-top : 73px;
}
#g-header .kv-txt{
display : none;
}
#g-header .cta{
margin-top : -35%;
text-align : center;
}
#g-header .cta a{
width : 260px;
}
}
@media all and ( max-width : 380px ){
#g-header .cta{
margin-top : -45%;
text-align : center;
}
#g-header .cta a{
width : 260px;
}
} #g-footer{
padding : 25px 0;
background : #1a1a1a;
}
#g-footer .f-navi{
margin-bottom : 23px;
}
#g-footer .f-navi li{
margin : 0 20px;
}
#g-footer .f-navi li a{
display : block;
font-size : 1.2rem;
font-weight : 500;
}
#g-footer .f-navi li a:hover{
opacity : .7;
}
#g-footer address{
font-size : .9rem;
font-style : normal;
font-weight : 500;
color : white;
text-align : center;
letter-spacing : .08em;
}
@media all and ( max-width : 896px ){
#g-footer{
padding-bottom : 9px;
}
#g-footer .f-navi{
margin-bottom : 13px;
}
#g-footer .f-navi li{
margin : 0 11px;
}
#g-footer .f-navi li a{
font-size : .6rem;
}
#g-footer address{
font-size : .4rem;
letter-spacing : .15em;
}
} #main .sec01{
position : relative;
z-index : 1;
padding : 60px 0 40px;
margin-top : -40px;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/stacari/sec02-back.png) no-repeat center top / 100% auto;
background-size : cover;
}
#main .sec01 .head-line{
margin : 0 auto 6px;
font-size : 2.5rem;
font-weight : 500;
color : white;
text-align : center;
letter-spacing : .19em;
}
#main .sec01 .img-list{
margin-bottom : 5px;
}
#main .sec01 .img-list li{
position : relative;
padding : 30px 20px 30px 50px;
border-bottom : 1px solid #fff;
}
#main .sec01 .img-list li::before{
position : absolute;
top : 34px;
left : 0;
width : 20px;
height : 14px;
padding : 4px;
content : "";
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/stacari/check-wh.png) no-repeat center;
background-size : contain;
}
#main .sec01 .img-list li p{
font-size : 1.8rem;
font-weight : 700;
line-height : 1.5em;
color : white;
letter-spacing : .19rem;
}
#main .sec01 .img-list li p span{
color : #ffe102;
}
#main .sec01 .link01{
margin-bottom : 0;
}
#main .sec02{
width : 100%;
padding : 72px 0;
}
#main .sec02 .merits{
width : 100%;
}
#main .sec02 .text-list{
width : 100%;
margin : 0 auto;
}
#main .sec02 .text-list li{
width : 100%;
margin : 0 0 40px;
}
#main .sec02 .text-list li .list{
position : relative;
width : 90%;
margin : 0 10% 0 0;
}
#main .sec02 .text-list .bg-img{
width : 100%;
box-shadow : 15px 15px 0 0 #c7c7c7;
}
#main .sec02 .text-list .list02 .bg-img{
box-shadow : -15px 15px 0 0 #c7c7c7;
}
#main .sec02 .text-list .list .bg-img .merit-img{
width : 100%;
}
#main .sec02 .text-list .list .bg-img .num{
position : absolute;
top : 0;
left : 0;
height : 100%;
opacity : .75;
}
#main .sec02 .text-list .list.list02 .bg-img .num{
left : auto;
right : 0;
}
#main .sec02 .text-list li .list.list02{
margin : 0 0 0 10%;
}
#main .sec02 .text-list li .list .txt-box{
position : absolute;
bottom : -15px;
left : 25%;
padding : 32px 16px;
color : white;
background : #4d4d4d;
opacity : .9;
}
#main .sec02 .text-list li .list.list02 .txt-box{
left : auto;
right : 25%;
}
#main .sec02 .text-list li .list .txt-box .box-title{
margin-bottom : 16px;
font-size : 1.8rem;
text-align : center;
letter-spacing : .19rem;
}
#main .sec02 .text-list li .list .txt-box .text{
font-size : 1.5rem;
letter-spacing : .19rem;
}
#main .sec03{
position : relative;
padding : 92px 0 64px;
background : #ffe102;
background-repeat : no-repeat;
background-position : 50% 0%;
background-size : cover;
}
#main .sec03::before{
position : absolute;
top : -2px;
left : calc( 50% - 30px );
width : 60px;
height : 30px;
margin : auto;
content : "";
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/stacari/arrow-wh.png) no-repeat center;
background-size : contain;
}
#main .sec03 .head-line02::after{
background : white;
}
#main .sec03 .story-list{
position : relative;
width : 100%;
height : 100%;
padding : 16px 0;
margin : 0 auto 64px;
background : #1a1a1a;
}
#main .sec03 .story-list .slick-list{
height : 100%;
}
#main .sec03 .story-list .slick-track{
display : flex;
}
#main .sec03 .story-list img.slide-arrow{
position : absolute;
top : calc( 50% - 16px );
z-index : 1;
width : 32px;
height : 32px;
opacity : .8;
}
#main .sec03 .story-list img.prev-arrow{
left : -4%;
transform : rotate( -180deg );
}
#main .sec03 .story-list img.next-arrow{
right : -4%;
}
#main .sec03 .story{
max-width : 94%;
height : auto;
padding : 16px 0;
margin : auto;
background : white;
}
#main .sec03 .story h3{
margin-bottom : 20px;
font-size : 1.7rem;
text-align : center;
}
#main .sec03 .story .story-img{
position : relative;
width : 100%;
padding-top : 66.6%;
margin-bottom : 6px;
}
#main .sec03 .story img{
position : absolute;
top : 0;
width : 100%;
height : 100%;
}
#main .sec03 .story .description{
padding : 0 16px;
font-size : 1.3rem;
font-weight : 700;
line-height : 1.5em;
}
#main .sec03 .story-list .slick-dots{
bottom : -60px;
}
#main .sec03 .story-list .slick-dots li button{
width : 10px;
height : 10px;
background : #1a1a1a;
border-radius : 50%;
}
#main .sec03 .story-list .slick-dots li.slick-active button{
background : white;
border : 1px solid #1a1a1a;
}
#main .sec03 .story-list .slick-dots li button::before{
font-size : 0;
opacity : 1;
}
#main .sec04{
padding : 24px 0 128px;
}
#main .sec04 .cta{
margin-bottom : 64px;
text-align : center;
}
#main .sec04 .cta a{
display : inline-block;
width : 260px;
}
#main .sec04 .section-title{
color : #ffe100;
}
#main .sec04 .content{
box-sizing : border-box;
padding : 0 24px;
margin : auto;
}
#main .sec04 .content ul{
padding : 0;
}
#main .sec04 .content li{
display : flex;
align-items : center;
justify-content : flex-start;
}
#main .sec04 .content li .checkbox{
height : 21px;
}
#main .sec04 .content li img{
height : 21px;
margin-right : 16px;
}
#main .sec04 .content li .text-box{
font-size : 16px;
font-weight : 700;
line-height : 21px;
}
#main .sec04 .content hr{
height : 3px;
margin : 20px auto;
background-image : linear-gradient( to right , #1a1a1a , #1a1a1a 7px , transparent 7px , transparent 10px );
background-repeat : repeat-x;
background-size : 10px 3px;
border : none;
}
#main .sec05{
position : relative;
padding : 96px 0;
background : #c7c7c7;
}
#main .sec05::before{
position : absolute;
top : -2px;
left : calc( 50% - 30px );
width : 60px;
height : 30px;
margin : auto;
content : "";
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/stacari/arrow-wh.png) no-repeat center;
background-size : contain;
}
#main .sec05 .head-line02{
margin-bottom : 57px;
}
#main .sec05 .flow-list{
width : 528px;
padding-left : 15px;
margin : 0 auto;
}
#main .sec05 .flow-list > li{
position : relative;
padding : 8px 8px 8px 48px;
font-size : 2rem;
font-weight : 700;
text-align : center;
letter-spacing : .07em;
background : white;
border : 2px solid #ffe102;
}
#main .sec05 .flow-list > li img{
position : absolute;
top : -12px;
left : 6px;
width : 36px;
}
#main .sec05 .flow-list li .text01{
margin : -2px 0;
}
#main .sec05 .flow-list .flow-arrow{
margin : 16px auto;
text-align : center;
}
#main .sec05 .flow-list .flow-arrow img{
width : 56px;
}
#main .sec05 .flow-list li .inner .ttl{
padding-bottom : 10px;
margin-bottom : 10px;
border-bottom : 3px dotted #ffe102;
}
#main .sec05 .flow-list li .inner .txt-list {
}
#main .sec05 .flow-list li .inner .txt-list li{
position : relative;
padding-left : 24px;
margin-bottom : 8px;
text-align : left;
}
#main .sec05 .flow-list li .inner .txt-list li::before{
position : absolute;
top : 1.25rem;
left : 0;
width : 8px;
height : 8px;
content : "";
background : #1a1a1a;
border-radius : 50%;
}
#main .sec05 .cta{
width : 100%;
margin-top : 36px;
text-align : center;
}
#main .sec05 .cta a{
display : inline-block;
width : 260px;
}
#main #contact{
max-width : 670px;
margin : auto;
}
#main #contact .section-title{
margin : 0 auto 24px;
color : #ffe100;
}
#main #contact .item-table{
width : 100%;
}
#main #contact .item-table th{
display : block;
width : 100%;
margin-bottom : 6px;
text-align : left;
}
#main #contact .item-table th .txt ,
#main #contact .item-table th .item-txt{
vertical-align : middle;
}
#main #contact .item-table th .txt{
padding : 0 2px;
margin-right : 12px;
font-size : 16px;
font-weight : 700;
}
#main #contact .item-table th .item-txt{
padding : 2px 4px;
font-size : 12px;
color : white;
background : #ffe100;
}
#main #contact .item-table tr:last-child th{
vertical-align : top;
}
#main #contact .item-table td{
display : block;
width : 100%;
margin-bottom : 20px;
}
#main #contact .item-table td input{
box-sizing : border-box;
width : 100%;
height : 48px;
padding : 10px;
font-size : 16px;
resize : none;
background : rgb( 248 248 248 );
border : 1px solid rgb( 204 204 204 );
border-radius : 4px;
}
#main #contact .privacy{
box-sizing : border-box;
margin-bottom : 20px;
overflow : auto;
}
#main #contact .privacy{
font-size : 15px;
line-height : 2;
}
#main #contact .privacy a{
padding : 2px 4px;
font-size : 15px;
color : #ffe100;
}
#main #contact .privacy p.textRight{
margin-bottom : 20px;
text-align : right;
}
#main p.textCenter{
margin : 0 auto 40px;
text-align : center;
}
#main.confirm .privacy , #main.confirm p.textCenter{
display : none;
}
#main #contact .btn{
display : block;
width : fit-content;
min-width : 180px;
max-width : 100%;
padding : 16px 32px;
margin : auto;
line-height : 1.5em;
line-height : 1.5;
color : white;
text-align : center;
cursor : pointer;
background : #ffe100;
border : none;
border-radius : 4px;
}
#main #contact .btn-gray{
background : #a3a3a3;
}
#main #contact .complete-message{
display : flex;
align-items : center;
justify-content : center;
padding : 40px 16px 64px;
line-height : 1.5em;
text-align : left;
}
@media all and ( max-width : 768px ){
#main .sec01{
padding-top : 40px;
margin-bottom : 1px;
background-size : cover;
}
#main .sec01 .head-line{
margin : 0 auto 12px;
font-size : 1.6rem;
}
#main .sec01 .top-txt{
padding : 9px 5px 17px;
font-size : 1.1rem;
line-height : 1.9;
letter-spacing : .15em;
}
#main .sec01 .img-list{
width : auto;
max-width : 375px;
margin : 0 auto;
}
#main .sec01 .img-list li{
padding : 16px 6px 16px 36px;
font-size : 1.2rem;
line-height : 1.7;
}
#main .sec01 .img-list li::before{
top : 17px;
width : 14px;
height : 10px;
}
#main .sec01 .img-list li p{
font-size : 1.3rem;
line-height : 1.4em;
}
#main .sec02{
width : 100%;
padding : 48px 0;
}
#main .sec02 .merits{
width : 100%;
}
#main .sec02 .text-list{
width : 100%;
margin : 0 auto;
}
#main .sec02 .text-list li{
width : 100%;
margin : 0 0 60px;
}
#main .sec02 .text-list li .list{
position : relative;
width : 87%;
margin : 0 3% 0 10%;
}
#main .sec02 .text-list .bg-img{
box-shadow : -15px 15px 0 0 #c7c7c7;
}
#main .sec02 .text-list .list02 .bg-img{
box-shadow : 15px 15px 0 0 #c7c7c7;
}
#main .sec02 .text-list .list .bg-img .merit-img{
width : 100%;
}
#main .sec02 .text-list .list .bg-img .num{
height : 60%;
}
#main .sec02 .text-list .list.list02 .bg-img .num{
left : auto;
right : 0;
}
#main .sec02 .text-list li .list.list02{
margin : 0 10% 0 3%;
}
#main .sec02 .text-list li .list .txt-box{
bottom : -30px;
left : auto;
right : 10px;
}
#main .sec02 .text-list li .list.list02 .txt-box{
left : 10px;
right : auto;
}
#main .sec02 .text-list li .list .txt-box .box-title{
margin-bottom : 10px;
font-size : 1.5rem;
text-align : left;
}
#main .sec02 .text-list li .list .txt-box .text{
font-size : 1.2rem;
letter-spacing : .19rem;
}
#main .sec03{
margin-bottom : 17px;
}
#main .sec03 .head-line02 {
}
#main .sec03 .com-link{
margin-bottom : -1px;
}
#main .sec03 .img-list{
width : auto;
margin : 0 -1px;
}
#main .sec03 .img-list .slick-arrow{
width : 16px;
}
#main .sec03 .img-list .slick-arrow:hover{
opacity : 1;
}
#main .sec03 .img-list .slick-prev{
left : 0;
}
#main .sec03 .img-list .slick-next{
right : 0;
}
#main .sec03 .img-box{
border : 2px solid #000;
border-radius : 6px;
}
#main .sec03 .img-box .photo-box{
width : 111px;
border-right : 2px solid #000;
}
#main .sec03 .img-box .photo-box .photo{
padding : 11px 13px 8px 14px;
border-bottom : 2px solid #000;
}
#main .sec03 .img-box .photo-box p{
padding : 8px 15px;
font-size : .7rem;
line-height : 1.4;
}
#main .sec03 .img-box .photo-box p .name{
font-size : 1.3rem;
}
#main .sec03 .img-box .text-box{
width : calc( 100% - 111px );
padding : 13px 10px 11px;
}
#main .sec03 .img-box .text-box p{
font-size : 1.1rem;
letter-spacing : 0;
}
#main .sec04{
padding : 48px 0;
}
#main .sec04 .head-line02{
margin-bottom : 36px;
}
#main .sec04 .flow-list li .inner .txt-list{
width : calc( 100% - 89px );
}
#main .sec04 .flow-list li .inner .txt-list li{
margin-bottom : 7px;
font-size : 1.1rem;
}
#main .sec04 .content li .text-box{
font-size : 1.4rem;
font-weight : 700;
line-height : 1.6rem;
}
#main .sec05{
padding : 72px 0;
}
#main .sec05::before{
width : 40px;
height : 20px;
}
#main .sec05 .head-line02{
margin-bottom : 48px;
}
#main .sec05 .content{
margin : auto;
}
#main .sec05 .flow-list{
box-sizing : border-box;
width : 100%;
padding : 0 24px;
}
#main .sec05 .flow-list > li{
padding : 8px 8px 8px 24px;
font-size : 1.6rem;
}
#main .sec05 .flow-list > li img{
position : absolute;
top : -10px;
left : 6px;
width : 30px;
}
#main .sec05 .flow-list li .text01{
margin : -2px 0;
}
#main .sec05 .flow-list .flow-arrow{
margin : 16px auto;
text-align : center;
}
#main .sec05 .flow-list .flow-arrow img{
width : 56px;
}
#main .sec05 .flow-list li .inner .ttl{
padding-bottom : 10px;
margin-bottom : 10px;
border-bottom : 3px dotted #ffe102;
}
#main .sec05 .flow-list li .inner .txt-list {
}
#main .sec05 .flow-list li .inner .txt-list li{
position : relative;
padding-left : 24px;
margin-bottom : 8px;
text-align : left;
}
#main .sec05 .flow-list li .inner .txt-list li::before{
position : absolute;
top : 1.25rem;
left : 0;
width : 8px;
height : 8px;
content : "";
background : #1a1a1a;
border-radius : 50%;
}
#main .sec05 .cta{
text-align : center;
}
#main .sec05 .cta a{
display : inline-block;
width : 260px;
}
}