@charset "utf-8";
   h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6 ,
a ,
abbr ,
acronym ,
address ,
applet ,
article ,
aside ,
audio ,
b ,
big ,
blockquote ,
body ,
caption ,
canvas ,
center ,
cite ,
code ,
dd ,
del ,
details ,
dfn ,
dialog ,
div ,
dl ,
dt ,
em ,
embed ,
fieldset ,
figcaption ,
figure ,
form ,
footer ,
header ,
hgroup ,
h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6 ,
html ,
i ,
iframe ,
img ,
ins ,
kbd ,
label ,
legend ,
li ,
mark ,
menu ,
nav ,
object ,
ol ,
output ,
p ,
pre ,
q ,
ruby ,
s ,
samp ,
section ,
main ,
small ,
span ,
strike ,
strong ,
sub ,
summary ,
sup ,
tt ,
table ,
tbody ,
textarea ,
tfoot ,
thead ,
time ,
tr ,
th ,
td ,
u ,
ul ,
var ,
video{
padding : 0;
margin : 0;
font-family : "Hiragino Sans" , Meiryo , sans-serif;
font-size : 100%;
font-weight : 400;
line-height : 1;
letter-spacing : 2.26px;
white-space : normal;
vertical-align : baseline;
background : transparent;
border : 0;
outline : 0;
}
article ,
aside ,
details ,
figcaption ,
figure ,
footer ,
header ,
hgroup ,
menu ,
nav ,
section ,
main{
display : block;
}
a{
color : #000;
text-decoration : none;
}
a:hover{
text-decoration : none;
}
a:focus{
outline : none;
}
li{
list-style : none;
}
input[type="text"] ,
input[type="password"] ,
textarea ,
select{
outline : none;
}
body{
width : 100%;
min-width : auto;
max-width : 100vw;
overflow-x : hidden;
letter-spacing : .1em;
} .background{
background : linear-gradient( 135deg , #da0711 , #700002 );
}
body{
width : 100%;
}
.box{
max-width : 994px;
margin : auto;
}
body article{
width : 100%;
}
body section{ }
body section img{
display : block;
margin : auto;
}
section .title{
margin-bottom : 56px;
}
section .title h2{
margin-bottom : 24px;
font-family : Oswald , sans-serif;
font-size : 50px;
font-weight : 700;
line-height : 1em;
color : #b60004;
text-align : center;
letter-spacing : 3.08px;
}
section .title p{
font-size : 26px;
font-weight : 800;
color : #1d1d1d;
text-align : center;
letter-spacing : 2.26px;
}
section .container{
width : 100%;
max-width : 970px;
margin : auto;
}
section .inner{
width : 80%;
margin : auto;
} #header{
position : relative;
position : fixed;
top : 0;
left : 0;
z-index : 10000;
width : 100%;
padding-top : 20px;
padding-bottom : 20px;
background : white;
}
#header .box{
box-sizing : border-box;
display : -webkit-box;
display : -ms-flexbox;
display : flex;
align-items : center;
justify-content : space-between;
width : 100%;
height : 100%;
padding : 0 12px;
margin : auto;
-webkit-box-pack : justify;
-ms-flex-pack : justify;
-webkit-box-align : center;
-ms-flex-align : center;
}
#header-logo{
height : 48px;
}
#header-logo img{
width : auto;
height : 48px;
}
#header .header-right{
color : white;
}
#header .header-right a{
display : inline-block;
padding : 20px 6px;
line-height : 21px;
color : white;
border-radius : 1px;
}
#header .header-right a span{
display : inline-block;
font-size : 16px;
font-weight : 600;
line-height : 21px;
letter-spacing : 1.23px;
}
#header .header-right a span.space{
letter-spacing : -1.2px;
}
#header .header-right a .free{
display : inline-block;
padding : 4px;
margin-left : 5px;
font-size : 13px;
font-weight : 600;
line-height : 1em;
background : #670002;
}
header.key{
position : relative;
width : 100%;
height : fit-content;
margin-top : 104px;
}
header.key video{
width : 100%;
}
header.key h1{
position : absolute;
top : 0;
left : 0;
right : 0;
display : -webkit-box;
display : -ms-flexbox;
display : flex;
align-items : center;
justify-content : center;
width : 100%;
height : 100%;
font-size : 40px;
font-weight : 800;
line-height : 1.8em;
color : white;
text-align : center;
letter-spacing : 4.1px;
background : rgb( 0 0 0 / .6 );
-webkit-box-pack : center;
-ms-flex-pack : center;
-webkit-box-align : center;
-ms-flex-align : center;
} section.apply{
position : relative;
box-sizing : border-box;
width : 100%;
height : auto;
padding : 63px;
}
section.apply::after{
position : absolute;
bottom : 0;
right : 0;
z-index : 0;
display : block;
width : 156px;
height : 190px;
margin : auto;
content : "";
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/triangle_red.png);
background-repeat : no-repeat;
background-position : center;
background-size : contain;
}
section.apply a{
position : relative;
z-index : 1;
box-sizing : border-box;
display : block;
width : fit-content;
padding : 23px 32px;
margin : auto;
font-size : 18px;
font-weight : 600;
color : white;
border : 1px solid white;
}
section.why{
position : relative;
overflow : hidden;
background : #f6f6f6;
}
section.why .title{
position : relative;
z-index : 1;
}
section .background-left , section .background-right{
position : absolute;
bottom : 0;
z-index : 0;
display : block;
width : auto;
height : 100%;
margin : auto;
}
section .background-left{
left : 0;
-moz-transform : rotateY( 180deg );
-webkit-transform : rotateY( 180deg );
-o-transform : rotateY( 180deg );
-ms-transform : rotateY( 180deg );
transform : rotateY( 180deg );
}
section .background-right{
right : 0;
}
section.why .why-content{
position : relative;
z-index : 1;
width : 100%;
max-width : 600px;
margin : auto;
line-height : 1.5em;
text-align : center;
}
section.why .why-content p{
margin-bottom : 1.5em;
line-height : 1.5em;
}
section.merit{
background : #eee;
}
section.merit .merit-content{
display : -webkit-flex;
display : -ms-flexbox;
display : flex;
-ms-flex-wrap : wrap;
flex-wrap : wrap;
justify-content : space-between;
margin : auto;
-webkit-box-pack : justify;
-ms-flex-pack : justify;
}
section.merit .merit-content .merit-cell{
position : relative;
box-sizing : border-box;
width : 46%;
padding : 16px 24px;
margin : 0 0 40px;
background : #f6f6f6;
border : 2px solid #1e1e1e;
box-shadow : 5.5px 6px 0 0 #b60004;
}
section.merit .merit-content .merit-cell h3{
position : relative;
z-index : 1;
margin-bottom : 8px;
font-size : 18px;
font-weight : 800;
line-height : 1.5em;
color : #1e1e1e;
text-align : center;
letter-spacing : 1.23px;
}
section.merit .merit-content .merit-cell img{
position : relative;
z-index : 1;
display : block;
width : auto;
max-width : 80%;
height : 80px;
margin : 0 auto 12px;
}
section.merit .merit-content .merit-cell .merit-txt{
position : relative;
z-index : 1;
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-ms-flex-direction : column;
flex-direction : column;
justify-content : center;
width : 100%;
min-height : 9em;
font-size : 14px;
-webkit-box-orient : vertical;
-webkit-box-direction : normal;
-webkit-box-pack : center;
-ms-flex-pack : center;
}
section.merit .merit-content .merit-cell .merit-txt p{
margin-bottom : 1.5em;
font-size : 14px;
font-weight : 300;
line-height : 1.5em;
text-align : center;
letter-spacing : 1.23px;
}
section.merit .merit-content .merit-cell .merit-txt p:nth-last-of-type( 1 ){
margin-bottom : 0;
}
section.merit .merit-content .merit-cell .number{
position : absolute;
top : -4px;
left : -4px;
right : 0;
z-index : 1000;
display : block;
width : 70px;
height : 70px;
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/number.png);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
border : 0;
}
section.merit .merit-content .merit-cell .number p{
margin : 6px 0 0 18px;
font-family : Oswald , sans-serif;
font-size : 18px;
font-weight : 700;
line-height : 26px;
color : white;
letter-spacing : 1.11px;
}
section.merit .merit-content .merit-cell::after{
position : absolute;
bottom : 0;
right : 0;
z-index : 0;
display : block;
width : 31%;
padding-top : 37.5%;
content : "";
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/triangle_pnk.png);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
}
section.merit .note{
box-sizing : border-box;
width : 100%;
padding : 28px 72px;
margin : auto;
margin : 8px auto 0;
background : white;
}
section.merit .note p{
margin-bottom : 1.5em;
font-size : 16px;
font-weight : 300;
line-height : 1.5em;
letter-spacing : 1.23px;
}
section.merit .note p:nth-last-of-type( 1 ){
margin-bottom : 0;
}
section.second_key{
position : relative;
width : 100%;
padding : 0;
overflow : hidden;
}
section.second_key h2{
position : absolute;
top : 0;
left : 0;
right : 0;
display : -webkit-box;
display : -ms-flexbox;
display : flex;
align-items : center;
justify-content : center;
width : 100%;
height : 100%;
font-size : 32px;
font-weight : 800;
line-height : 1.5em;
color : white;
text-align : center;
letter-spacing : 2.26px;
-webkit-box-pack : center;
-ms-flex-pack : center;
-webkit-box-align : center;
-ms-flex-align : center;
}
section.second_key img{
width : 100%;
}
section.flow img{
width : 343px;
}
section.movie{
position : relative;
padding : 41px 88px 88px;
}
section.movie::after{
position : absolute;
bottom : 0;
right : 0;
z-index : 1000;
z-index : 0;
display : block;
width : 259px;
height : 314px;
margin : auto;
content : "";
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/triangle_pnk.png);
background-repeat : no-repeat;
background-position : center;
background-size : contain;
}
section.movie video{
position : relative;
z-index : 1;
width : 100%;
}
section.program{
position : relative;
z-index : 1;
overflow : hidden;
background : #f6f6f6;
}
section.program .slick-slide{
box-sizing : border-box;
padding : 4px;
}
section.program .slick-slide img{
width : 94%;
height : auto;
box-shadow : 4px 4px 0 0 #b60004;
}
section.program img.p{
width : 100%;
margin-top : 40px;
}
section.program .slick-programs{
margin-bottom : 60px;
}
section.program .program-description{
margin : 0 auto 66px;
}
section.program .program-description:nth-last-of-type( 1 ){
margin-bottom : 0;
}
section.program .program-description a{
position : relative;
display : inline-block;
padding-right : 40px;
margin-bottom : 28px;
}
section.program .program-description a::after{
position : absolute;
top : 2px;
right : 0;
z-index : 1;
display : block;
width : 32px;
height : 32px;
content : "";
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/next_blue.svg);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
}
section.program .program-description h3{
margin-bottom : 32px;
font-size : 24px;
font-weight : 800;
line-height : 1em;
letter-spacing : 1.64px;
}
section.program .program-description a h3.link{
margin : auto;
line-height : 36px;
border-bottom : 2px solid #1e1e1e;
}
section.program .program-description li{
position : relative;
padding-left : 32px;
margin-bottom : 16px;
font-size : 18px;
line-height : 1.5em;
}
section.program .program-description li:nth-last-of-type( 1 ){
margin-bottom : 0;
}
section.program .program-description li::before{
position : absolute;
top : 0;
left : 0;
display : block;
width : 24px;
height : 24px;
content : "";
background-repeat : no-repeat;
background-position : center;
background-size : cover;
}
section.program .program-description.yellow li::before{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/check_org.svg);
}
section.program .program-description.red li::before{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/check_red.svg);
}
section.program .background-1 , section.program .background-2{
position : absolute;
left : 0;
right : 0;
height : 688px;
}
section.program .background-1{
bottom : 1055px;
}
section.program .background-2{
bottom : 0;
}
section.program .program-description .event-content .event-cells{
display : -webkit-box;
display : -ms-flexbox;
display : flex;
justify-content : space-between;
width : 100%;
-webkit-box-pack : justify;
-ms-flex-pack : justify;
}
section.program .program-description .event-content .event-cells{
margin : 40px auto 24px;
}
section.program .program-description .event-content .event-cell{
box-sizing : border-box;
width : 48%;
padding : 0 24px 24px;
background : white;
border : 2px solid #b60004;
}
section.program .program-description .event-cell h4{
padding : 24px 0;
margin-bottom : 18px;
font-size : 20px;
font-weight : 800;
line-height : 1em;
text-align : center;
letter-spacing : 1.54px;
border-bottom : 2px solid #b60004;
}
section.program .program-description .event-cell .cell-txt{
display : -webkit-box;
display : -ms-flexbox;
display : flex;
justify-content : flex-start;
margin-bottom : 16px;
-webkit-box-pack : start;
-ms-flex-pack : start;
}
section.program .program-description .event-cell .cell-txt:nth-last-of-type( 1 ){
margin-bottom : 0;
}
section.program .program-description .event-cell .cell-txt img{
display : inline-block;
width : 32px;
height : 32px;
margin : 0 16px 0 0;
}
section.program .program-description .event-cell .cell-txt p{
display : inline-block;
font-size : 16px;
font-weight : 300;
line-height : 32px;
letter-spacing : 1.23px;
}
section.program .program-description .event-content .event-description{
position : relative;
padding : 63px 32px 40px;
background : #b60004;
}
section.program .program-description .event-content .event-description::before{
position : absolute;
top : 0;
left : 0;
right : 0;
z-index : 0;
display : block;
width : 98px;
height : 47px;
margin : auto;
content : "";
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/triangle_white.png);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
}
section.program .program-description .event-content .event-description h4{
margin : 0 auto 32px;
text-align : center;
}
section.program .program-description .event-content .event-description h4 p{
margin : 0 auto 8px;
font-size : 18px;
font-weight : 300;
color : white;
letter-spacing : 1.38px;
}
section.program .program-description .event-content .event-description h4 span{
font-family : Oswald , sans-serif;
font-size : 32px;
font-weight : 700;
letter-spacing : 2.46px;
}
section.program .program-description .event-content .event-description-txt{
max-width : 454px;
margin : auto;
}
section.program .program-description .event-content .event-description-txt p{
margin-bottom : 1.5em;
font-size : 16px;
font-weight : 300;
line-height : 1.5em;
color : white;
letter-spacing : 1.23px;
}
section.program .program-description .event-content .event-description-txt p:nth-last-of-type( 1 ){
margin-bottom : 0;
}
section.faq{
position : relative;
}
section.faq::after{
position : absolute;
bottom : 0;
right : 0;
z-index : 0;
display : block;
width : 342px;
padding-top : 415px;
content : "";
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/triangle_red.png);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
}
section.faq .title h2{
color : white;
}
section.faq .title p{
color : white;
}
section.faq .faq-content{
display : -webkit-flex;
display : -ms-flexbox;
display : flex;
-ms-flex-wrap : wrap;
flex-wrap : wrap;
justify-content : space-between;
margin : 0 auto;
-webkit-box-pack : justify;
-ms-flex-pack : justify;
}
section.faq .faq-content .faq-cell{
position : relative;
z-index : 1;
box-sizing : border-box;
width : 48%;
min-height : 276px;
padding : 24px 24px 16px;
margin : 0 0 32px;
background : #f6f6f6;
border-radius : 4px;
}
section.faq .faq-content .faq-cell h3{
position : relative;
z-index : 1;
margin-bottom : 16px;
font-size : 18px;
font-weight : 800;
line-height : 1.5em;
color : #b60004;
letter-spacing : 1.23px;
}
section.faq .faq-content .faq-cell .faq-txt{
position : relative;
z-index : 1;
width : 100%;
font-size : 14px;
font-weight : 300;
line-height : 1.5em;
color : #1e1e1e;
letter-spacing : 1.23px;
}
section.faq .faq-content .faq-cell .background{
position : absolute;
top : 0;
left : 0;
right : 0;
z-index : 1;
display : block;
width : 38%;
height : 100%;
margin : auto;
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/fandq.png);
background-repeat : no-repeat;
background-position : center;
background-size : contain;
}
section.precaution{}
section.precaution .precaution-content{
font-size : 18px;
font-weight : 300;
line-height : 1.5em;
color : #1e1e1e;
letter-spacing : 1.23px;
}
section.message{
position : relative;
}
section.message::after{
position : absolute;
bottom : 0;
right : 0;
z-index : 0;
display : block;
width : 342px;
padding-top : 415px;
content : "";
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/triangle_red.png);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
}
section.message h2{
position : relative;
z-index : 1;
margin-bottom : 32px;
font-size : 32px;
font-weight : 800;
line-height : 1.5em;
color : white;
text-align : center;
letter-spacing : 1.23px;
}
section.message .message-content{
position : relative;
z-index : 1;
max-width : 531px;
margin : 0 auto 72px;
font-size : 20px;
font-weight : 300;
line-height : 1.5em;
color : white;
letter-spacing : 1.23px;
}
section.message a{
position : relative;
z-index : 1;
box-sizing : border-box;
display : block;
width : fit-content;
padding : 24px 32px;
margin : auto;
font-size : 20px;
font-weight : 600;
line-height : 1em;
color : white;
text-align : center;
letter-spacing : .77px;
border : 1px solid white;
} @media screen and ( max-width : 1023px ){
.tablet{
display : block;
}
}
@media screen and ( min-width : 1024px ){
.tablet{
display : none;
}
}
@media screen and ( max-width : 1023px ){
section .inner{
width : 90%;
}
section.merit {
}
section.merit .merit-content{
width : 100%;
}
section.merit .merit-content .merit-cell{
width : 48%;
}
section.program{
padding : 72px 0;
}
section.program .program-description{
box-sizing : border-box;
padding : 0 72px;
margin : 0 auto 57px;
}
section.program .program-description .event-content .event-description-txt{
max-width : none;
margin : auto;
}
} @media screen and ( min-width : 769px ){
.sp{
display : none ! important;
}
.notsp{
display : block;
}
}
@media screen and ( max-width : 768px ){
.sp{
display : block;
}
.notsp{
display : none;
}
}
@media screen and ( max-width : 768px ){
body section{
padding : 40px 16px;
}
section .title{
margin-bottom : 40px;
}
section .title h2{
margin-bottom : 16px;
font-size : 32px;
letter-spacing : 1.97px;
}
section .title p{
font-size : 20px;
letter-spacing : 1.23px;
}
section .inner{
width : 100%;
}
#header{
box-sizing : border-box;
width : 100%;
height : 72px;
padding : 0 12px;
}
#header .box{
padding : 0;
}
#header .container{
padding : 0;
}
#header-logo{
height : 36px;
}
#header-logo img{
width : auto;
height : 36px;
}
#header .header-right a{
padding : 6px 10px;
font-size : 16px;
}
#header .header-right a span{
font-size : 13px;
}
header.key{
height : 66vh;
margin-top : 72px;
overflow : hidden;
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/key_sp.png);
}
header.key video{
width : auto;
min-width : 100%;
height : 66vh;
margin-left : -29.333vh;
}
header.key h1{
font-size : 26px;
letter-spacing : 1.23px;
}
section.apply{
padding : 24px;
}
section.apply::after{
width : 79px;
height : 96px;
}
section.apply a{
box-sizing : border-box;
width : 100%;
text-align : center;
}
section.why .why-content{
width : 100%;
}
section.merit {
}
section.merit .merit-content{
-ms-flex-direction : column;
flex-direction : column;
justify-content : center;
width : 100%;
-webkit-box-orient : vertical;
-webkit-box-direction : normal;
-webkit-box-pack : center;
-ms-flex-pack : center;
}
section.merit .merit-content .merit-cell{
width : 100%;
margin : 0 auto 32px;
}
section.merit .merit-content .merit-cell:nth-last-of-type( 1 ){
margin-bottom : 30px;
}
section.merit .merit-content .merit-cell::after{
display : block;
width : 105px;
padding-top : 127px;
}
section.merit .note{
width : 100%;
padding : 24px;
margin-top : 0;
}
section.second_key h2{
font-size : 20px;
}
section.flow img{
width : 100%;
}
section.movie{
position : relative;
padding : 32px 16px;
}
section.movie::after{
width : 112px;
height : 136px;
}
section.program{
padding : 32px 0;
}
section.program .slick-programs{
margin-bottom : 32px;
}
section.program .program-description{
box-sizing : border-box;
max-width : 100%;
padding : 0 16px;
margin : 0 auto 56px;
}
section.program .program-description a{
padding : 0 36px 0 16px;
}
section.program .program-description a::after{
width : 28px;
height : 28px;
}
section.program .program-description a h3.link{
padding : 0;
line-height : 28px;
border-bottom : 1px solid #1e1e1e;
}
section.program .program-description h3{
box-sizing : border-box;
padding : 0 16px;
font-size : 20px;
letter-spacing : 1.37px;
}
section.program .program-description ul{
box-sizing : border-box;
padding : 0 16px;
}
section.program .program-description li{
font-size : 14px;
}
section.program .background-1 , section.program .background-2{
right : 0;
height : 574px;
}
section.program .background-2{
bottom : 0;
left : auto;
}
section.program .program-description .event-content .event-cells{
-webkit-box-orient : vertical;
-webkit-box-direction : normal;
-ms-flex-direction : column;
flex-direction : column;
}
section.program .program-description .event-content .event-cell{
width : 100%;
}
section.program .program-description .event-content .event-cell:nth-last-of-type( 1 ){
margin-top : 16px;
}
section.program .program-description .event-content .event-description{
position : relative;
padding : 60px 0 32px;
background : #b60004;
}
section.program .program-description .event-content .event-description::before{
width : 79px;
height : 37.8px;
}
section.program .program-description .event-content .event-description h4{
margin : 0 auto 32px;
}
section.program .program-description .event-content .event-description h4 p{
font-size : 16px;
letter-spacing : 1.23px;
}
section.program .program-description .event-content .event-description h4 span{
font-family : Oswald , sans-serif;
font-size : 24px;
font-weight : 700;
letter-spacing : 1.85px;
}
section.program .program-description .event-content .event-description-txt{
padding : 0 32px;
}
section.program .program-description .event-content .event-description-txt p{
margin-bottom : 24px;
font-size : 14px;
line-height : 24px;
letter-spacing : 1.08px;
}
section.faq::after{
width : 100px;
padding-top : 121px;
}
section.faq .faq-content .faq-cell{
width : 100%;
}
section.faq .faq-content .faq-cell .faq-txt{
letter-spacing : .96px;
}
section.faq .faq-content .faq-cell .background{
top : 50px;
width : 150px;
height : 222px;
}
section.precaution{}
section.precaution .precaution-content{
font-size : 14px;
}
section.message{
padding : 32px 24px;
}
section.message h2{
text-align : left;
}
section.message::after{
width : 100px;
padding-top : 121px;
}
section.message .message-content{
max-width : none;
margin : 0 auto 40px;
font-size : 18px;
letter-spacing : .69px;
}
section.message a{
width : 100%;
padding : 24px;
font-size : 18px;
line-height : 1em;
letter-spacing : .69px;
}
}