@charset "utf-8";
 @font-face {
font-family: "Noto Sans JP";
src: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/fonts/Noto_Sans_JP/NotoSansJP-VariableFont_wght.woff2) format('woff2');
font-optical-sizing: auto;
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/fonts/Roboto/Roboto-VariableFont_wdth,wght.woff2) format('woff2');
font-optical-sizing: auto;
font-style: normal;
font-variation-settings:"wdth" 100;
font-weight: 100 900;
font-display: swap;
}   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 : Roboto , "Noto Sans JP" , sans-serif;
font-size : 100%;
font-weight : 400;
line-height : 1;
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;
}
img{
width : 100%;
max-width : 100%;
height : auto;
vertical-align : bottom;
filter : alpha( opacity=100 );
border : none;
opacity : 1;
-webkit-transition : .2s ease-in;
transition : .2s ease-in;
-webkit-backface-visibility : hidden;
backface-visibility : hidden;
}
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{ min-width : 1200px;
letter-spacing : .1em;
} .clearfix{
zoom : 1;
}
.clearfix::after{
display : block;
clear : both;
content : "";
}
@media print{
.clearfix{
overflow : hidden;
}
}
.Tcenter{
text-align : center;
}
html{
height : 100%;
margin : 0 ! important;
}
.inner{
position : relative;
z-index : 98;
box-sizing : border-box;
justify-content : space-between;
width : 100%;
max-width : 1200px; margin-left : auto;
margin-right : auto;
}
.wrap-box{
display : -ms-flexbox;
display : flex;
-ms-flex-wrap : wrap;
flex-wrap : wrap;
justify-content : space-between;
-ms-flex-pack : justify;
}
.anchor-txt{
position : absolute;
top : 0;
left : 0;
z-index : 2;
width : 100%;
height : 100%;
}
img{
width : 100%;
max-width : 100%;
} #header{
position : relative;
position : fixed;
top : 0;
left : 0;
z-index : 300;
width : 100%;
padding-top : 20px;
padding-bottom : 20px;
background : white;
}
#header .inner{
align-items : center;
max-width : 1640px;
padding : 0 20px;
}
#header-logo{
width : 173px;
height : auto;
}
#header-logo img{
height : auto;
}
#header-nav .btn{
display : block;
width : 162px;
}
#header-nav .btn img{
height : 100%;
}
#header-nav .btn:hover img{
opacity : .6;
}
#nav-item-1{
margin-left : 20px;
}
#panel-btn{
position : relative;
z-index : 101;
width : 45px;
height : 50px;
margin-left : 20px;
cursor : pointer;
background : none;
border : none; outline : none;
}
#panel-btn{
width : 40px;
height : 40px;
margin-left : 8px;
background : none;
border : none;
}
#panel-btn-icon{
position : absolute;
top : 50%;
left : 50%;
z-index : 11;
display : block;
width : 45px;
height : 5px;
text-align : center; -webkit-transition : .2s;
transition : .2s;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
#panel-btn-icon::before ,
#panel-btn-icon::after{
position : absolute;
top : 50%;
display : block;
width : 45px;
height : 5px;
content : "";
background : rgb( 182 0 20 );
-webkit-transition : .3s;
transition : .3s;
}
#panel-btn-icon::before{
margin-top : -12px;
}
#panel-btn-icon::after{
margin-top : 4px;
}
#panel-btn .close{
background : transparent;
}
#panel-btn .close::before ,
#panel-btn .close::after{
margin-top : 0;
}
#panel-btn .close::before{
-webkit-transform : rotate( -45deg );
transform : rotate( -45deg );
}
#panel-btn .close::after{
-webkit-transform : rotate( -135deg );
transform : rotate( -135deg );
}
.sp-menu{
position : fixed;
top : 0;
right : 0;
z-index : 1002;
display : block;
width : 45px;
}
.sp-menu .txt{
display : block;
text-align : center;
letter-spacing : .1em;
}
#sp-menubox li.item .txt a::after{
position : absolute;
top : 6px;
width : 0;
height : 0; margin-left : 10px;
content : "";
border-color : #fff transparent transparent transparent;
border-style : solid;
border-width : 7px 5px 0 5px;
} #sp-menubox li::before{
position : absolute;
top : 10px;
left : -25px;
width : 15px;
height : 1px;
content : "";
background : white;
}
#sp-menubox .minbox{
display : none;
margin-top : 20px;
margin-left : 30px;
}
#sp-menubox .minbox li a{
font-size : 16px;
}
#sp-menubox .minbox li::before{
top : 9px;
}
#sp-menubox .minbox li:not( :last-child ){
padding-bottom : 15px;
}
#sp-menubox{
position : fixed;
top : 105px;
right : -100%;
z-index : 99;
-webkit-box-sizing : border-box;
box-sizing : border-box;
width : 360px;
height : 100%;
padding : 50px;
overflow-x : hidden;
background : rgb( 186 0 20 );
-webkit-transition : all .4s;
-moz-transition : all .4s;
-ms-transition : all .4s;
-o-transition : all .4s;
transition : all .4s;
}
#sp-menubox ul{
margin-bottom : 25px;
margin-left : 25px;
}
#sp-menubox li{
position : relative;
}
#sp-menubox li:not( :last-child ){
padding-bottom : 20px;
}
#sp-menubox li a{
font-size : 18px;
color : white;
-webkit-transition : all .4s;
-moz-transition : all .4s;
-ms-transition : all .4s;
-o-transition : all .4s;
transition : all .4s;
}
#sp-menubox .text-gallery{
display : block;
width : 100%;
margin : 0 auto 100px;
}
#searchform{
position : relative;
box-sizing : border-box;
width : 100%;
padding : 15px 20px 15px 15px;
margin-bottom : 25px;
background : rgb( 186 0 20 );
border : 1px solid white;
border-radius : 6px;
}
#searchform #s{
width : 90%;
font-size : 16px;
color : white;
background : none;
border : none;
}
#searchform #s::placeholder{
font-size : 14px;
font-weight : 700;
color : #fff;
}
#searchsubmit{
position : absolute;
top : calc( 50% - 19px );
right : 5px;
width : 38px;
height : 38px;
background : none;
border : none;
}
#searchsubmit::before{
position : absolute;
top : calc( 50% - 9px );
left : calc( 50% - 9px );
display : block;
width : 15px;
height : 15px;
content : "";
border-radius : 50%;
box-shadow : 0 0 0 3px #fff;
}
#searchsubmit::after{
position : absolute;
top : calc( 50% + 6px );
left : calc( 50% + 2px );
display : block;
width : 8px;
height : 6px;
content : "";
border-top : solid 3px #fff;
transform : rotate( 45deg );
}
input::placeholder{
color : white ! important;
}
input:-ms-input-placeholder{
color : white ! important;
}
input::-ms-input-placeholder{
color : white ! important;
}
#searchform #s::-webkit-input-placeholder{
font-size : 14px;
font-weight : 700;
color : #fff;
}
#searchform #s::-moz-placeholder{
font-size : 14px;
font-weight : 700;
color : #fff;
}
#searchform #s:-ms-input-placeholder{
font-size : 14px;
font-weight : 700;
color : #fff;
}
#searchform #s::-ms-input-placeholder{
font-size : 14px;
font-weight : 700;
color : #fff;
} #top-banner .cap figure{
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center center;
background-size : cover;
}
#top-banner{
position : relative;
width : 100%;
margin : 105px auto 60px;
}
#top-banner .cap{
position : relative;
padding-top : 4.9926%;
} #footer{
display : flex;
align-items : flex-end;
justify-content : center;
height : 290px;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/footer-bg.png) no-repeat center top;
background-size : 100%;
}
@media screen and ( max-width : 1450px ){
#footer{
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/footer-bg.png) no-repeat center bottom;
background-size : 100%;
}
}
#footer .nav{
align-items : center;
justify-content : center;
width : 100%;
margin : 0 auto 50px;
}
#footer .nav li{
position : relative;
padding-top : 2px;
margin : 0 10px;
font-size : 12px;
}
#footer .nav li:first-child{
padding-top : 0;
font-size : 16px;
}
#footer .nav li:first-child a::after{
position : absolute;
bottom : -8px;
left : 0;
right : 0;
width : 100%;
height : 2px;
margin : auto;
content : "";
background-color : rgb( 182 0 20 );
-webkit-transition : all .3s ease;
transition : all .3s ease;
-webkit-transform : scaleX( 1 );
-ms-transform : scaleX( 1 );
transform : scaleX( 1 );
}
#copy{
display : block;
padding : 20px 0;
margin : 0 auto;
font-size : 12px;
font-style : normal;
text-align : center;
}
#footer-nav{
margin-bottom : 40px;
}
#footer-nav ul{
align-items : center;
}
#footer-nav ul li{
position : relative;
font-size : 15px;
}
#footer-nav ul li .txt{
display : block;
}
#line-banner{
display : block;
width : 100%;
max-width : 407px;
margin : 80px auto;
-webkit-transition : all .3s ease;
transition : all .3s ease;
}
#line-banner:hover img{
opacity : .6;
}
#footer .nav li a::after{
position : absolute;
bottom : -6px;
left : 0;
right : 0;
width : 100%;
height : 2px;
margin : auto;
content : "";
background-color : rgb( 182 0 20 );
-webkit-transition : all .3s ease;
transition : all .3s ease;
-webkit-transform : scaleX( 0 );
-ms-transform : scaleX( 0 );
transform : scaleX( 0 );
}
#footer .nav li:not( .item-txt ) a:hover::after{
-webkit-transform : scaleX( 1 );
-ms-transform : scaleX( 1 );
transform : scaleX( 1 );
}
#footer-nav li:not( .item-txt ) a::after{
position : absolute;
bottom : -6px;
left : 0;
right : 0;
width : 100%;
height : 2px;
margin : auto;
content : "";
background-color : rgb( 182 0 20 );
-webkit-transition : all .3s ease;
transition : all .3s ease;
-webkit-transform : scaleX( 0 );
-ms-transform : scaleX( 0 );
transform : scaleX( 0 );
}
#footer-nav .minbox a::after{
position : absolute;
bottom : 6px ! important;
content : "";
}
#footer-nav li:not( .item-txt ):hover a::after{
-webkit-transform : scaleX( 1 );
-ms-transform : scaleX( 1 );
transform : scaleX( 1 );
}
#footer-nav ul li.item-txt .txt{
position : relative;
z-index : 11;
text-decoration : none;
vertical-align : middle;
}
#footer-nav ul li.item-txt .txt::before{
position : absolute;
top : 0;
right : -16px;
width : 8px;
height : 8px;
vertical-align : middle;
content : "";
border-top : 1px solid rgb( 40 40 40 );
border-right : 1px solid rgb( 40 40 40 );
-webkit-transform : rotate( 135deg );
transform : rotate( 135deg );
}
#footer-nav ul li.item-txt .minbox{
position : absolute;
top : 14px;
left : -20px;
z-index : 100;
display : none;
width : auto;
padding : 20px 20px 10px;
background : rgb( 255 255 255 / .8 );
}
#footer-nav ul li.item-txt .minbox li{
font-size : 12px;
line-height : 1.5;
}
#footer-nav ul li.item-txt .minbox li a{
white-space : nowrap;
}
#footer-nav ul li.item-txt .minbox li{
padding-bottom : 10px;
} .index-news-box h2{
margin-bottom : 80px;
font-size : 60px;
font-weight : 500;
color : rgb( 182 0 20 );
text-align : center;
letter-spacing : .1em;
}
.index-news-box .news-list-box{
position : relative;
width : 100%;
max-width : 564px;
padding-left : 50px;
padding-right : 50px;
margin : auto;
}
.index-news-box .news-list-box::before ,
.index-news-box .news-list-box::after{
position : absolute;
top : -50px;
left : 0;
right : 0;
width : 100%;
height : 1px;
margin : 0 auto;
text-align : center;
content : "";
background-image : -webkit-linear-gradient( left , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-image : linear-gradient( to right , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-repeat : no-repeat;
background-position : center;
}
.index-news-box .news-list-box::before{
top : auto;
bottom : -50px;
}
.news-list-box li{
position : relative;
-webkit-transition : .5s;
transition : .5s;
}
.news-list-box li:not( :last-child ){
margin-bottom : 40px;
}
.news-list-box dt{
align-items : center;
justify-content : flex-start;
margin-bottom : 12px;
}
.news-list-box .item{
padding : 2px 6px 5px 4px;
margin-left : 10px;
color : white;
background : rgb( 182 0 20 );
border : 1px solid rgb( 182 0 20 );
-webkit-transition : .5s;
transition : .5s;
}
.news-list-box li dd{
-webkit-transition : .5s;
transition : .5s;
}
.index-news-box{
margin : 100px 0 190px;
}
.news-list-box li:hover .item{
color : rgb( 182 0 20 );
background : white;
}
.news-list-box li:hover dd{
color : rgb( 182 0 20 );
text-decoration : underline;
} .sns-box{
padding : 28px 0;
background : rgb( 240 236 236 );
}
.sns-box .inner{
transform : translateY( -78px );
}
.sns-box .text{
margin-bottom : 60px;
text-align : center;
}
.sns-box h2{
width : 100%;
max-width : 306px;
padding : 18px 0 50px;
margin : 0 auto 20px;
font-size : 20px;
font-weight : 700;
line-height : 1.6;
color : rgb( 182 0 20 );
text-align : center;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/fukidashi.png) no-repeat center top;
background-size : 100%;
}
.sns-box ul{
align-items : center;
justify-content : center;
}
.sns-box li{
position : relative;
}
.sns-box li:hover img{
opacity : .6;
}
#item-facebook{
margin : 0 70px;
}
#item-instagram .cap{
width : 70px;
}
#item-facebook .cap{
width : 40px;
}
#item-twitter .cap{
width : 72px;
} .index-other-contents .box{
position : relative;
margin : auto;
}
.index-other-contents .box:first-of-type{
margin : 0 auto 120px;
}
.index-other-contents .story-box::after{
position : absolute;
top : 50%;
left : 0;
z-index : 2;
display : block;
width : 100%;
height : 252px;
margin : auto;
content : "";
background-color : #fff;
background-image : radial-gradient( #b60002 10% , transparent 10% ) , radial-gradient( #b60002 10% , transparent 10% );
background-position : 0 0 , 7px 7px;
background-size : 14px 14px;
}
.index-other-contents .inbox{ position : relative;
z-index : 10;
width : 100%;
max-width : 860px;
margin : auto;
}
.index-other-contents h2{
margin-bottom : 20px;
font-size : 60px;
font-weight : 500;
line-height : 1;
color : rgb( 182 0 20 );
text-align : center;
letter-spacing : .1em;
}
.index-other-contents .itemcap .txt{
position : absolute;
top : 62%;
left : 50%;
z-index : 2;
text-align : center;
-webkit-transition : .2s;
transition : .2s;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
.index-other-contents .text{
margin : 5px 0 30px;
text-align : center;
}
.index-other-contents .itemcap .cap{
position : relative;
}
.index-other-contents .story-box{
width : 100%;
}
.index-other-contents .story-box .itemcap{
position : relative;
padding-top : 25px;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/index/service-bg-title.png) repeat-x left top white;
background-size : 42px;
border-bottom : 25px solid rgb( 182 0 20 );
-webkit-transition : .2s;
transition : .2s;
}
.index-other-contents .itemcap:hover img{
opacity : .6;
}
.index-other-contents .box:last-of-type .itemcap{
margin-bottom : 30px;
}  .service-box{
height : 638px;
margin-bottom : 70px;
background : rgb( 182 0 20 );
}
.service-box h2{
margin-bottom : 30px;
font-size : 60px;
font-weight : 500;
color : rgb( 182 0 20 );
text-align : center;
letter-spacing : .1em;
}
.service-box .text{
margin-bottom : 50px;
text-align : center;
}
.service-box .box .icon{
position : absolute;
top : 0;
left : 0;
z-index : 2;
width : 50px;
}
.service-box .inner{
max-width : 960px;
transform : translateY( -250px );
}
.service-box .box:hover .cap{
transform : scale( 1.1 );
}
.service-box .box:nth-child( -n + 3 ){
margin-bottom : 20px;
}
.service-box .box{
position : relative;
width : 100%;
max-width : 32%;
padding-top : 31.915%;
overflow : hidden;
}
.service-box .cap{
position : absolute;
top : 0;
left : 0;
z-index : 1;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center center;
background-size : 100%;
-webkit-transition : .5s;
transition : .5s;
}
.service-box .box .title{
position : absolute;
top : 50%;
left : 50%;
z-index : 2;
width : 100%;
text-align : center;
-webkit-transition : .2s;
transition : .2s;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
.service-box .box .title .font_sans ,
.service-box .box h3{
color : white;
}
.service-box .box h3{
font-size : 18px;
font-weight : 600;
line-height : 1.6;
}
.service-box .box .font_sans{
display : inline-block;
padding-bottom : 10px;
padding-left : 5px;
padding-right : 5px;
margin-bottom : 8px;
font-size : 16px;
font-weight : 500;
border-bottom : 1px solid white;
} .index-benefits-box{
position : relative; height : 720px;
padding-top : 52px;
margin-bottom : 300px;
overflow : hidden;
}
.index-benefits-box::before ,
.index-benefits-box::after{
position : absolute;
top : 0;
bottom : 0;
left : 0;
margin : auto;
vertical-align : middle;
content : "";
}
.index-benefits-box::before{
left : 0;
width : 100%;
height : 208px;
background : rgb( 182 0 20 );
}
.index-benefits-box::after{
left : auto;
right : -100px;
width : 250px;
height : 250px;
border-top : 150px solid rgb( 182 0 20 );
border-right : 150px solid rgb( 182 0 20 );
-webkit-transform : rotate( 45deg );
transform : rotate( 45deg );
}
.index-benefits-box h3 .item{
font-weight : 700;
color : rgb( 182 0 20 );
text-decoration : underline;
}
.index-benefits-box h3{
margin-bottom : 120px;
font-size : 19px;
font-weight : 700;
color : rgb( 182 0 20 );
text-align : center;
letter-spacing : .1em;
}
.index-benefits-box h2{
position : relative;
width : 100%;
max-width : 435px;
margin : 0 auto 50px;
font-size : 36px;
font-weight : 700;
color : rgb( 182 0 20 );
text-align : center;
}
.index-benefits-box h2::after{
position : absolute;
bottom : -10px;
left : 0;
right : 0;
width : 100%;
height : 1px;
margin : 0 auto;
text-align : center;
content : "";
background-image : -webkit-linear-gradient( left , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-image : linear-gradient( to right , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-repeat : no-repeat;
background-position : center;
}
.index-benefits-box .pc-only .box{
max-width : 880px;
}
.index-benefits-box li{
width : 50%;
}
.index-benefits-box li:nth-child( 5 ){
border-bottom : none;
}
.index-benefits-box .pc-only ul{
position : relative;
}
.index-benefits-box .pc-only ul::before{
position : absolute;
left : 50%;
width : 1px;
height : 100%;
content : "";
background : rgb( 182 0 20 );
transform : translate( -50% , 0 );
}
.index-benefits-box .pc-only li:first-child .wrap-box{
align-items : center;
justify-content : center;
height : 100%;
}
.index-benefits-box .pc-only li:first-child{
padding-top : 10px;
padding-bottom : 20px;
}
.index-benefits-box .pc-only h2{
margin-bottom : 0;
font-size : 32px;
line-height : 1.5;
}
.index-benefits-box h2::after{
display : none;
width : auto;
}
.index-benefits-box .btn{
display : inline-block;
}
.index-benefits-box .btn .txt{
position : relative;
display : block;
padding-right : 20px;
font-size : 15px;
color : #3e3a39;
text-decoration : none;
vertical-align : middle;
-webkit-transition : .5s;
transition : .5s;
}
.index-benefits-box .btn .txt::before ,
.index-benefits-box .btn .txt::after{
position : absolute;
top : 0;
bottom : 0;
right : 0;
margin : auto;
vertical-align : middle;
content : "";
-webkit-transition : .5s;
transition : .5s;
}
.index-benefits-box .btn .txt::before{
width : 12px;
height : 12px;
background : rgb( 182 0 20 );
-webkit-border-radius : 50%;
border-radius : 50%;
}
.index-benefits-box .btn .txt::after{
right : -2px;
box-sizing : border-box;
width : 5px;
height : 5px;
border : 5px solid transparent;
border-left : 5px solid #fff;
}
.index-benefits-box .box{
max-width : 560px;
padding : 10px;
background : white;
border : 1px solid rgb( 182 0 20 );
}
.index-benefits-box li{
position : relative;
padding-bottom : 30px;
border-bottom : 1px solid rgb( 182 0 20 );
-webkit-transition : .5s;
transition : .5s;
}
.index-benefits-box li:last-child{
border-bottom : none;
}
.index-benefits-box li{
padding-top : 30px;
}
.index-benefits-box dl{
align-items : center;
justify-content : center;
}
.index-benefits-box dt{
width : 80px;
margin-right : 20px;
}
.index-benefits-box dd{
width : 100%;
max-width : 275px;
-webkit-transition : .5s;
transition : .5s;
}
.index-benefits-box .text{
margin-bottom : 8px;
font-size : 22px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
-webkit-transition : .5s;
transition : .5s;
}
.index-benefits-box li:not( :first-child ):hover{
background : rgb( 182 0 20 );
}
.index-benefits-box li:not( :first-child ):hover .txt ,
.index-benefits-box li:not( :first-child ):hover .text{
color : white;
}
.index-benefits-box li:not( :first-child ):hover .txt::before{
background : white;
}
.index-benefits-box li:not( :first-child ):hover .txt::after{
border-left : 5px solid rgb( 182 0 20 );
}
.sp-only{
display : none;
} .page-contents .text-box .list-box li{
margin-bottom : 15px;
line-height : 1.6;
}
.page-contents .text-box .list-box li{
position : relative;
margin-left : 15px;
font-size : 19px;
}
.page-contents .text-box .list-box li::before{
position : absolute;
top : 10px;
left : -15px;
display : block;
width : 10px;
height : 10px;
content : "";
background : rgb( 182 0 20 );
border-radius : 50%;
}
#guide .color-box{
padding : 0 20px;
background-color : rgb( 250 236 226 / .9 );
background-image : radial-gradient( rgb( 216 164 163 ) 10% , transparent 10% ) , radial-gradient( rgb( 216 164 163 ) 10% , transparent 10% );
background-position : 0 0 , 7px 7px;
background-size : 14px 14px;
border : 1px solid rgb( 182 0 20 );
}
#guide .color-box .inbox{
min-width : 500px;
}
#guide .color-box li{
padding : 30px 0;
border-bottom : 1px solid rgb( 182 0 20 );
}
#guide .color-box li:last-child{
border-bottom : none;
}
#guide .color-box .item{
width : 30px;
height : 29px;
}
#guide .color-box li{
justify-content : center;
}
#guide .color-box p.item-txt{
margin-bottom : 6px;
}
#guide .color-box p.item-txt img{
vertical-align : sub;
}
#guide .color-box p:not( .item-txt ){
font-size : 14px;
}
#guide .item-box .top-text{
display : inline;
padding : 0 2px 4px;
font-size : 28px;
font-weight : 700;
line-height : 2.2;
color : rgb( 182 0 20 );
letter-spacing : .1em;
border-bottom : 1px dotted rgb( 182 0 20 );
}
#guide .item-box h3.wrap-box{
align-items : center;
justify-content : center;
width : 100%;
padding : 15px 0;
margin-bottom : 30px;
background : rgb( 182 0 20 );
}
#guide .item-box .inbox{
margin-top : 30px;
}
#guide .item-box h3.wrap-box .icon{
width : 54px;
}
#guide .item-box h3.wrap-box .txt{
font-size : 30px;
font-weight : 700;
color : white;
}
#guide .item-box .inbox:last-of-type{ }
#guide .item-box .inbox:last-of-type h3{
width : 100%;
padding : 15px 0;
margin-bottom : 20px;
font-size : 21px;
color : white;
text-align : center;
background : rgb( 182 0 20 );
border-radius : 6px;
} #message .item-list{
box-sizing : border-box;
padding : 30px;
margin-top : 20px;
margin-left : 50px;
margin-right : 50px;
background : rgb( 240 236 236 );
}
#message .item-list li:not( :last-child ){
margin-bottom : 25px;
}
#message .item-list h4{
justify-content : flex-start;
margin-bottom : 12px;
}
#message .item-list h4 span{
font-size : 21px;
}
#message .item-list h4 .icon{
width : 25px;
height : 25px;
margin-right : 10px;
font-size : 16px;
line-height : 22px;
color : white;
text-align : center;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size : 100%;
}
#message .arrow-text{
width : 100%;
max-width : 362px;
margin-bottom : 20px;
}
#message .item-list li h4 .item{
margin-left : 10px;
}
#message .item-list li:nth-child( 1 ) h4 .item ,
#message .item-list li:nth-child( 2 ) h4 .item{
width : 20px;
}
#message .item-list li:nth-child( 3 ) h4 .item{
width : 26px;
} #topicpath{
box-sizing : border-box;
width : 100%;
max-width : 1640px;
padding : 0 20px;
margin : 0 auto 50px;
text-align : center;
}
#topicpath ul{
justify-content : flex-start;
}
#company dd a ,
#topicpath ul a{
color : rgb( 182 0 20 );
}
#company dd a:hover ,
#topicpath ul a:hover{
text-decoration : underline;
}
#topicpath ul li{
font-size : 12px;
}
#topicpath ul li:not( :last-child ){
position : relative;
margin-right : 22px;
}
#topicpath ul li:not( :last-child )::after{
position : absolute;
top : 2px;
right : -12px;
display : block;
width : 6px;
height : 6px;
content : "";
border-top : 1px solid rgb( 40 40 40 );
border-right : 1px solid rgb( 40 40 40 );
-webkit-transform : rotate( 45deg );
transform : rotate( 45deg );
} .page-header{
display : table;
width : 100%;
max-width : 1600px;
margin : 104.5px auto 20px;
table-layout : fixed;
}
.page-header .cap ,
.page-header .inbox{
position : relative;
display : table-cell;
vertical-align : middle;
}
.page-header .cap{
padding-top : 33%;
background-repeat : no-repeat;
background-position : center top;
background-size : cover;
}
.page-header .inbox{
width : 33%;
text-align : center;
background-size : 100%;
}
.page-header .inbox .itemcap{
position : absolute;
top : 0;
left : 0;
z-index : 2;
width : 100%;
height : 100%;
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/page-header-bg.png);
background-repeat : no-repeat;
background-position : center top;
background-size : cover;
}
.page-header .inbox .box{
position : absolute;
top : 50%;
left : 50%;
z-index : 10;
width : 100%;
color : white;
text-align : center;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
.page-header .inbox .font_sans{
margin-bottom : 25px;
font-size : 25px;
letter-spacing : .1em;
}
.page-header .inbox h1{
font-size : 30px;
font-weight : 700;
line-height : 1.5;
}
#news-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/news_pc.png);
}
#company-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/company_pc.png);
}
#message-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/message_pc.png);
}
#system-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/system_pc.png);
}
#guide-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/guide_pc.png);
}
#service-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/service_pc.png);
}
#gallery-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/gallery_pc.png);
}
#voice-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/voice_pc.png);
}
#student-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/student_pc.png);
}
#story-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/story_pc.png);
}
#ticket-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/ticket_pc.png);
}
#about-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/about_pc.png);
}
#faq-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/faq_pc.png);
}
#night-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/night_pc.png);
}
#house-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/house_pc.png);
}
#contact-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/contact_pc.png);
}
#thanks-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/thanks_pc.png);
}
#adviser-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/adviser_pc.png);
}
#cafe-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/cafe_pc.png);
}
#users-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/users_pc.png);
}
#search-head .cap ,
#terms-head .cap ,
#sitemap-head .cap ,
#regulation-head .cap ,
#policy-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/policy_pc.png);
}
#regulation .top-box li{
font-size : 19px;
line-height : 1.6;
}
#regulation h2{
margin-bottom : 30px;
font-size : 24px;
}
.search-everything-highlight-color{
padding : 2px 6px 2px 6px;
color : white;
background-color : rgb( 182 0 20 ) ! important;
} #policy .address-box{
margin-bottom : 120px;
}
#policy .address-box h3 ,
#policy .address-box li{
font-size : 19px;
}
#policy .address-box h3 ,
.page-contents .address-box li:not( :last-child ){
margin-bottom : 12px;
}
#policy .number-list{
padding : 30px;
margin : 50px 0;
background : rgb( 246 244 245 );
}
.page-contents .number-list ol{
counter-reset : number;
}
.page-contents .number-list li::before{
position : absolute;
top : 0;
left : -20px;
font-weight : 700;
color : rgb( 182 0 20 );
content : counter( number ) ".";
counter-increment : number;
}
.page-contents .number-list li{
position : relative;
margin-left : 20px;
font-size : 19px;
line-height : 1.6;
}
.page-contents .number-list li p{
margin-top : 6px;
font-size : 16px;
line-height : 1.6em;
}
.page-contents .number-list li:not( :last-child ){
margin-bottom : 40px;
}
.page-contents h2.section-title{
margin-bottom : 6px;
font-size : 24px;
} #company dl{
justify-content : flex-start;
padding : 0 80px;
}
#company dl:not( :last-of-type ){
margin-bottom : 30px;
}
#company dt ,
#company dd{
font-size : 18px;
line-height : 1.8;
}
#company dt{
width : 100%;
max-width : 133px;
}
#company dd{
width : 100%;
max-width : calc( 100% - 133px );
line-height : 1.8;
}
#company dl:last-of-type{
margin-bottom : 100px;
} #gallery{
max-width : 100%;
padding-left : 0;
padding-right : 0;
}
#gallery .inner{
max-width : 948px;
}
#gallery .inbox{
box-sizing : border-box;
width : 100%;
max-width : 290px;
padding : 30px 10px;
margin-bottom : 40px;
border : 1px solid rgb( 182 0 20 );
border-radius : 6px;
}
#gallery .inbox:nth-child( n + 4 ){
margin-bottom : 0;
}
#gallery .inbox h3{
margin-bottom : 30px;
font-size : 24px;
font-weight : 700;
color : rgb( 182 0 20 );
text-align : center;
}
#gallery .inbox li:nth-child( -n + 2 ){
margin-bottom : 3%;
}
#gallery .inbox li{
position : relative;
width : 48.5%;
padding-top : 48.5%;
overflow : hidden;
cursor : pointer;
}
#gallery .inbox li:hover .cap{
transform : scale( 1.1 );
}
#gallery .btn{ }
#gallery .inbox ul{
margin-bottom : 25px;
}
#gallery.page-contents .inbox .btn a{
padding : 20px;
}
#gallery .cap , .single-gallery .cap{
position : absolute;
top : 0;
left : 0;
z-index : 10;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center center;
background-size : cover;
-webkit-transition : all .5s ease;
transition : all .5s ease;
}
.single-gallery.page-contents{
max-width : 100% ! important;
padding-left : 0;
padding-right : 0;
}
.single-gallery.page-contents .box-title{
max-width : 850px;
margin-left : auto;
margin-right : auto;
}
.single-gallery .inner{
max-width : 948px;
}
#slide-auto-box{
width : 1000px;
margin : 0 auto 100px; text-align : center;
}
#slide-auto-box .cap{
position : relative;
width : 100%;
padding-top : 7%;
}
#slide-auto-box .cap figure{
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%; height : 667px;
background-repeat : no-repeat;
background-position : center top;
background-size : cover;
}
#slide-auto-box .slick-dots{
bottom : 20px;
} .single-gallery .listbox{
justify-content : flex-start;
}
.single-gallery .listbox li{
position : relative;
width : 100%;
max-width : 19%;
padding-top : 19%;
margin-bottom : 1.3%;
overflow : hidden;
cursor : pointer;
}
.single-gallery .listbox ul.wrap-box{
justify-content : left;
}
.single-gallery .listbox li:not( :nth-child( 5n ) ){
margin-right : 1%;
}
.single-gallery .listbox .cap{
position : absolute;
top : 0;
left : 0;
z-index : 10;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center center;
background-size : cover;
-webkit-transition : all .5s ease;
transition : all .5s ease;
}
.single-gallery .listbox li:hover .cap{
transform : scale( 1.1 );
}
#gallery .slick-list , .single-gallery .slick-list{
height : 667px;
}
.slick-prev , .slick-next{
margin-top : -10px;
} #adviser{
max-width : 100%;
}
#adviser .inner{
max-width : 850px;
}
#adviser .other-link-box{
margin-bottom : 50px;
}
#adviser .question-box{
margin-bottom : 100px;
}
#adviser .top-box{
margin-bottom : 50px;
}
#adviser .top-box .box-title{
margin-bottom : 20px;
}
#adviser .top-box .box-title::after{
content : none;
}
#adviser .introduction-box{
margin-bottom : 100px;
}
#adviser .introduction-box h3{
margin-bottom : 65px;
}
#adviser .introduction-box .inbox{
margin-bottom : 65px;
}
#adviser .introduction-box .inbox .cap{
width : 100%;
max-width : 250px;
}
#adviser .introduction-box .inbox dl{
width : 100%;
max-width : 550px;
}
#adviser .introduction-box .inbox dt{
padding-bottom : 12px;
margin-bottom : 12px;
font-size : 23px;
font-weight : 700;
color : rgb( 182 0 20 );
border-bottom : 1px solid rgb( 182 0 20 );
}
#adviser .introduction-box .inbox dd{
font-size : 16px;
line-height : 1.6;
}
#adviser .introduction-box .inbox dd .item-box{
padding : 10px 20px;
margin-top : 30px;
line-height : 1.6;
border : 2px solid rgb( 182 0 20 );
border-radius : 6px;
}
#adviser .introduction-box .inbox dd .item-box .icon{
position : relative;
top : -24px;
display : inline-block;
padding : 6px 12px;
font-size : 15px;
font-weight : 700;
color : white;
background : rgb( 182 0 20 );
}
#adviser .introduction-box .inbox dd .item-box .icon::after{
position : absolute;
bottom : -11px;
left : 50%;
display : block;
width : 0;
height : 0;
content : "";
border-color : rgb( 182 0 20 ) transparent transparent transparent;
border-style : solid;
border-width : 11px 5px 0 5px;
-webkit-transform : translate( -50% , 0 );
transform : translate( -50% , 0 );
}
#adviser .introduction-box .inbox dd .item-box ul li{
position : relative;
margin-bottom : 10px;
margin-left : 15px;
line-height : 1.6;
}
#adviser .introduction-box .inbox dd .item-box ul li::before{
position : absolute;
top : 10px;
left : -12px;
display : block;
width : 5px;
height : 5px;
content : "";
background : #000;
border-radius : 50%;
}
#adviser .introduction-box .inbox dd .item-box p{
margin-bottom : 10px;
}
#adviser .introduction-box .text-center{
font-size : 24px;
text-align : center;
}
#adviser .introduction-box .inbox dd .item-box{
padding-left : 1rem ;
padding-right : 1rem ;
text-align : center;
}
#adviser .introduction-box .inbox dd .item-box p , #adviser .introduction-box .inbox dd .item-box li{
text-align : left;
}
#adviser .introduction-box .card-wrap{
display : flex;
flex-wrap : wrap;
justify-content : flex-start;
}
#adviser .introduction-box .card{
position : relative;
flex : 0 0 calc( 33.3% - 15px );
margin : 0 calc( 7px + .015% ) 15px;
}
#adviser .introduction-box .card .name-wrap{
position : absolute;
bottom : 0;
width : 100%;
padding : 20px 0;
font-size : 1em;
color : white;
text-align : center;
background : #950f0f;
opacity : .7;
}
@media screen and ( max-width : 767px ){
#adviser .introduction-box .card-wrap{
flex-direction : column;
flex-wrap : nowrap;
}
}
#adviser .support-box .inbox .cap{
width : 100%;
max-width : 150px;
}
#adviser .support-box .inbox dl{
width : 100%;
max-width : 650px;
}
#adviser .support-box .inbox dt{
color : #000;
}
#adviser .support-box .inbox dt .icon{
margin-bottom : 15px;
}
#adviser .support-box .inbox dt .icon span{
padding : 5px;
font-size : 12px;
color : #fff;
background : rgb( 182 0 20 );
}
#adviser .support-box .inbox dt strong{
margin-bottom : 10px;
margin-right : 20px;
line-height : 1;
}
#adviser .support-box .inbox dt .txt{
font-size : 14px;
}
#adviser .support-box .inbox dd{
color : #666;
}
#adviser .special-box{
margin-bottom : 100px;
}
#adviser .special-box .inbox{
width : 100%;
max-width : 415px;
margin : auto;
}
#adviser .special-box .cap{
margin-bottom : 40px;
}
#adviser .special-box dt{
position : relative;
padding-bottom : 14px;
margin-bottom : 50px;
letter-spacing : .1em;
border-bottom : 1px solid rgb( 182 0 20 );
}
#adviser .special-box dt .txt{
display : block;
font-size : 23px;
font-weight : 700;
color : rgb( 182 0 20 );
text-align : center;
}
#adviser .special-box dt .item-txt{
position : absolute;
top : 50%;
left : 20%;
width : 85px;
height : 85px;
background : rgb( 182 0 20 );
border-radius : 50%;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
#adviser .special-box dl{
clear : both;
}
#adviser .special-box dt .item-txt .item{
position : absolute;
top : 50%;
left : 50%;
display : block;
width : 100%;
font-size : 14px;
font-weight : 700;
line-height : 1.4;
color : white;
text-align : center;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
#adviser .special-box dd p{
margin-bottom : 5px;
font-size : 16px;
}
#adviser .special-box dd{
font-size : 16px;
line-height : 1.8;
}
#adviser .special-box dd img{
float : right;
width : 139px;
margin : 0 0 0 20px;
}
#adviser .other-box{
margin-bottom : 100px;
}
#adviser .other-box .inbox{
width : 100%;
max-width : 280px;
margin : 0 auto 20px;
}
#adviser .other-box .inbox ul{
margin-bottom : 15px;
}
#adviser .other-box .itembox{
align-items : center;
justify-content : center;
height : 89px;
margin-top : 20px;
text-align : center;
background : rgb( 182 0 20 );
border-radius : 6px;
}
#adviser .other-box .itembox p{
font-weight : 700;
line-height : 1.2;
color : white;
} #system .list-box{
margin-bottom : 20px;
}
#system .box-title .text{
display : block;
margin-top : 30px;
}
#system .box-title .item-txt{
position : relative;
padding : 6px 12px;
font-size : 15px;
font-weight : 700;
color : white;
background : rgb( 182 0 20 );
}
#system .box-title .item-txt::after{
position : absolute;
bottom : -11px;
left : 50%;
display : block;
width : 0;
height : 0;
content : "";
border-color : rgb( 182 0 20 ) transparent transparent transparent;
border-style : solid;
border-width : 11px 5px 0 5px;
-webkit-transform : translate( -50% , 0 );
transform : translate( -50% , 0 );
}
#system .border-title , #guide .border-title{
padding-left : 15px;
margin-bottom : 25px;
font-size : 21px;
font-weight : 700;
line-height : 1.6;
border-left : 4px solid rgb( 182 0 20 );
}
#system .item-list{
box-sizing : border-box;
padding : 30px; margin-top : 20px;
margin-bottom : 25px;
background : rgb( 240 236 236 );
}
#system .item-list li::before{
content : none;
}
#system .item-list p{
margin-bottom : 25px;
}
#system .item-list dt{
margin-bottom : 12px;
line-height : 1.5;
}
#system .item-list dt::before{
position : absolute;
top : 10px;
left : -15px;
display : block;
width : 10px;
height : 10px;
content : "";
background : rgb( 182 0 20 );
border-radius : 50%;
}
#system .item-list .list-box li::before{
top : 5px;
}
#system .item-list .list-box li:not( :last-child ){
margin-bottom : 35px;
}
#system .box .cap{
width : 100%;
max-width : 381px;
margin : 35px auto 0;
}
#system section.box:not( :last-of-type ){
margin-bottom : 50px;
}
#system .number-list p{
margin-bottom : 0;
font-weight : 700;
}
#system .number-list li:not( :last-child ){
margin-bottom : 25px;
}
#system .number-list li{
align-items : center;
justify-content : flex-start;
}
#system .number-list li .icon{
width : 25px;
height : 25px;
margin-right : 10px;
font-size : 16px;
line-height : 22px;
color : white;
text-align : center;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size : 100%;
} #service{
max-width : 1280px;
}
#service .service-box{
height : auto;
background : none;
}
#service .service-box .box:first-of-type{
background : rgb( 182 0 20 );
}
#service .service-box .box:first-of-type .title{
border-bottom : none;
}
#service .service-box .box:first-of-type h3{
font-size : 30px;
letter-spacing : .1em;
}
#service .service-box .box:not( :first-of-type ) h3{
font-size : 23px;
} .page-contents{
width : 100%;
max-width : 850px;
padding-left : 10px;
padding-right : 10px;
margin : 0 auto 180px;
}
.page-contents .box-title .text{
font-size : 30px;
font-weight : 700;
line-height : 1.4;
}
.page-contents .box-title{
position : relative;
margin-bottom : 50px;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : center;
}
.page-contents .box-title::after{
position : absolute;
bottom : -20px;
left : 0;
right : 0;
width : 100%;
height : 1px;
margin : 0 auto;
text-align : center;
content : "";
background-image : -webkit-linear-gradient( left , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-image : linear-gradient( to right , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-repeat : no-repeat;
background-position : center;
}
.page-contents article.box{
margin-bottom : 100px;
}
.page-contents .text-box p b{
font-weight : 700;
}
.page-contents .text-box p{
line-height : 1.8; }
.page-contents .text-box .inner80{
margin : 0 80px;
}
.page-contents .text-box.corporate-box h4{
margin-bottom : 20px;
font-size : 18px;
font-weight : 700;
}
.page-contents .text-box.corporate-box p.text-center{
font-size : 30px;
font-weight : 700;
}
.page-contents .text-box p.text-center{
margin-left : auto;
margin-right : auto;
text-align : center;
}
.page-contents .text-box p:not( :last-of-type ){
margin-bottom : 20px;
}
.page-contents .text-box p.text-right{
margin-top : 20px;
text-align : right;
}
.page-contents .text-box .item-color{
color : rgb( 182 0 20 );
}
.page-contents .text-box .text-line{
font-weight : 700;
text-decoration : underline;
}
.page-contents .text-box .font-w{
font-weight : 700;
}
.page-contents .box-title .item-arrow{
width : 25px;
vertical-align : -5px;
}
.page-contents .btn , .other-color-box{
margin-left : auto;
margin-right : auto;
text-align : center;
}
.page-contents .btn a , .page-contents button.btn , .other-color-box .btn a{
display : inline-block;
min-width : 180px;
max-width : 100%;
padding : 30px;
margin : auto;
line-height : 55px;
line-height : 1.5;
color : white;
text-align : center;
background : rgb( 182 0 20 );
border : 1px solid rgb( 182 0 20 );
border-radius : 4px;
-webkit-transition : all .4s;
-moz-transition : all .4s;
-ms-transition : all .4s;
-o-transition : all .4s;
transition : all .4s;
}
.page-contents .btn a:hover , .page-contents button.btn:hover , .other-color-box .btn a:hover{
background : white;
}
.page-contents .btn a:hover , .page-contents button.btn:hover , .other-color-box .btn a:hover{
color : rgb( 182 0 20 );
}
.page-contents .icon-title{
align-items : center;
justify-content : center;
}
.page-contents .icon-title .icon{
width : 44px;
height : 44px;
margin-right : 10px;
}
.page-contents .line-box .border-box .icon{
width : 37px;
height : 37px;
margin-right : 10px;
font-size : 18px;
line-height : 34px;
color : white;
text-align : center;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size : 100%;
}
.page-contents .line-box .border-box{
margin-bottom : 50px;
background-color : #fff;
background-image : radial-gradient( rgb( 182 0 20 / .2 ) 10% , transparent 10% ) , radial-gradient( rgb( 182 0 20 / .2 ) 10% , transparent 10% );
background-position : 0 0 , 7px 7px;
background-size : 14px 14px;
border : 1px solid rgb( 182 0 20 );
}
.page-contents .line-box .border-box li{
position : relative;
z-index : 2;
padding : 50px 0;
}
.page-contents .line-box .border-box li:first-child::after{
position : absolute;
top : 85%;
left : 75%;
z-index : 10;
display : block;
width : 102px;
height : 135px;
content : "";
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/about/img05.png) no-repeat center center;
background-size : 100%;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
.page-contents .line-box .border-box li:not( :last-child )::before{
position : absolute;
bottom : -10px;
left : 50%;
display : block;
width : 0;
height : 0;
content : "";
border-color : rgb( 182 0 20 ) transparent transparent transparent;
border-style : solid;
border-width : 10px 10px 0 10px;
-webkit-transform : translate( -50% , 0 );
transform : translate( -50% , 0 );
}
.page-contents .line-box .border-box li:not( :last-child ){
border-bottom : 1px solid rgb( 182 0 20 );
}
.page-contents .line-box .border-box .title{
align-items : center;
justify-content : center;
}
.page-contents .line-box .border-box .title p{
width : 100%;
max-width : 400px;
font-size : 21px;
font-weight : 700;
}
.page-contents .line-box .border-box .item{
width : 100%;
max-width : 254px;
margin : 20px auto 0;
}
#guide{
max-width : 100%;
margin-bottom : 100px;
}
#guide .inner{
max-width : 850px;
}
.page-contents .flow-box{
box-sizing : border-box;
width : 100%;
padding : 60px;
margin-bottom : 100px;
background : #b60114;
}
.page-contents .flow-box .text-box{
padding : 60px 100px;
background : #fff;
border-radius : 6px;
}
.page-contents .flow-box .border-box .icon{
width : 37px;
height : 37px;
margin-right : 10px;
font-size : 18px;
line-height : 34px;
color : white;
text-align : center;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size : 100%;
}
.page-contents .flow-box .border-box li .cap{
margin-bottom : 40px;
}
.page-contents .flow-box .border-box li:not( :last-child ){
padding-bottom : 60px;
margin-bottom : 30px;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/guide/flow02.png) no-repeat center bottom;
background-size : contain;
}
.page-contents .flow-box .border-box li:first-child{
padding-bottom : 80px;
}
.page-contents .flow-box .border-box .title{
align-items : center;
justify-content : left;
margin-bottom : 30px;
}
.page-contents .flow-box .border-box .title p{
width : 100%;
max-width : 600px;
margin-bottom : 0;
font-size : 21px;
font-weight : 700;
}
.page-contents .flow-box .border-box .item{
width : 100%;
max-width : 254px;
margin : 20px auto 0;
}
.page-contents .flow-box .text-box p{
margin-bottom : 20px;
font-size : 18px;
}
.page-contents .flow-box .text-box p .item-color.font-w{
font-size : 40px;
}
.page-contents .flow-box article.box{
margin-bottom : 0;
}
.page-contents .gallerys-box .btn{
max-width : 182px;
}
.page-contents .gallerys-box ul{
margin-bottom : 50px;
}
.page-contents .gallerys-box li:not( :nth-child( n + 7 ) ){
margin-bottom : 20px;
}
.page-contents .gallerys-box li{
position : relative;
width : 100%;
max-width : 32%;
padding-top : 20%;
}
.page-contents .gallerys-box li figure{
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center top;
background-size : cover;
-webkit-transition : .2s ease-in;
transition : .2s ease-in;
}
.page-contents .gallerys-box li figure:hover{
opacity : .6;
}
.page-contents .corporate-box .min-txt{
margin-bottom : 15px;
font-size : 30px;
line-height : 1.6;
text-align : center;
}
.page-contents .corporate-box .min-txt .item1{
font-size : 35px;
}
.page-contents .corporate-box .min-txt .item2{
font-size : 22px;
}
.page-contents .corporate-box .minbox{
margin-top : 30px;
margin-bottom : 20px;
}
.gallerys-box{ margin : 100px 0;
} #night{
max-width : 100%;
}
#night .inner{
max-width : 850px;
}
#night .top-box h2::after{
content : none;
}
#night .color-box{
padding : 0 0 50px;
margin : 100px 0;
background : rgb( 240 236 236 / .6 );
}
#night .color-box header{
text-align : center;
transform : translate( 0 , -25px );
}
#night .color-box header p{
font-weight : 700;
}
#night .color-box header .item{
font-size : 39px;
font-weight : 700;
}
#night .color-box h3{
width : 404px;
height : 52px;
margin : 0 auto 20px;
font-size : 22px;
line-height : 55px;
color : white;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/house/bg-item.png) no-repeat center center;
background-size : cover;
}
#night .icon-title .icon{
width : 45px;
height : 56px;
}
#night .list-item-box{
box-sizing : border-box;
width : 100%;
padding : 0 80px;
margin : auto;
}
#night .list-box{
box-sizing : border-box;
width : 100%;
padding : 0 80px;
margin : auto;
}
#night .night-box{
margin : 0 auto 130px;
}
#night .night-box .inbox:not( :last-of-type ){
margin-bottom : 40px;
}
#night .night-box .inbox{
padding : 20px;
border : 1px solid rgb( 182 0 20 );
}
#night .list-item-box li:not( :last-of-type ){
margin-bottom : 25px;
}
#night .list-item-box h4{
position : relative;
margin-bottom : 20px;
margin-left : 20px;
font-size : 21px;
font-weight : 700;
color : rgb( 182 0 20 );
}
#night .list-item-box h4::before{
position : absolute;
top : 10px;
left : -15px;
display : block;
width : 10px;
height : 10px;
content : "";
background : rgb( 182 0 20 );
border-radius : 50%;
}
#night .list-item-box dl{
padding : 20px 0;
border-bottom : 1px solid rgb( 191 191 191 );
}
#night .list-item-box dl:first-of-type{
padding : 0 0 20px;
}
#night .list-item-box dl:last-of-type{
border-bottom : none;
}
#night .list-item-box dt ,
#night .list-item-box dd{
font-size : 19px;
}
#night .list-item-box dt{
margin-bottom : 10px;
}
#night .list-item-box dd small{
font-size : 14px;
}
#night .other-link-box{
margin-bottom : 50px;
}
#night .question-box{
margin-bottom : 100px;
} #house{
max-width : 100%;
margin-bottom : 100px;
}
#house .inner{
max-width : 850px;
}
#house .slidebox{
position : relative;
margin-bottom : 100px;
}
#house .slidebox .inbox{
background : rgb( 240 236 236 );
}
#house .slidebox header{
position : absolute;
top : 50px;
left : 50%;
z-index : 10;
width : 100%;
text-align : center;
-webkit-transform : translate( -50% , 0 );
transform : translate( -50% , 0 );
}
#house .slidebox h3{
width : 404px;
height : 52px;
margin : 0 auto 20px;
font-size : 22px;
line-height : 55px;
color : white;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/house/bg-item.png) no-repeat center center;
background-size : cover;
}
#house #house-banner{
width : 100%;
max-width : 523px;
margin : auto;
}
#house #house-banner .cap{
margin-bottom : 20px;
}
#house #house-banner .text{
font-size : 19px;
text-align : center;
}
#house .slick-prev ,
#house .slick-next{
top : 40%;
}
#house .slick-dots{
bottom : 50px;
}
#house .color-box{
padding : 50px 0;
margin : 100px 0;
background : rgb( 240 236 236 / .6 );
} #house .other-link-box{
margin-bottom : 50px;
}
#house .question-box{
margin-top : 100px;
} #cafe{
max-width : 100%;
}
#cafe .inner{
max-width : 850px;
}
#cafe .other-link-box{
margin-bottom : 50px;
}
#cafe .icon-title .icon{
width : 37px;
height : 37px;
margin-right : 15px;
font-size : 18px;
line-height : 34px;
color : white;
text-align : center;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size : 100%;
}
#cafe .icon-title p{
font-size : 28px;
font-weight : 700;
line-height : 1.5;
}
#cafe .icon-title{
margin-bottom : 15px;
}
#cafe .min-txt{
font-size : 14px;
}
#cafe .text-box dd p:not( .min-txt ){
margin-bottom : 5px;
}
#cafe .inbox{
margin-bottom : 100px;
}
#cafe .inbox .item{
position : absolute;
bottom : -120px;
right : -100px;
width : 158px;
height : 158px;
background : rgb( 182 0 20 );
border-radius : 50%;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
#cafe .inbox .item .item-txt{
position : absolute;
top : 50%;
left : 50%;
display : block;
width : 100%;
font-size : 23px;
font-weight : 700;
line-height : 1.4;
color : white;
text-align : center;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
#cafe .time-box{
text-align : center;
}
#cafe .time-box .item{
margin-bottom : 5px;
font-weight : 700;
}
#cafe .time-box .txt{
margin-bottom : 5px;
font-size : 15px;
}
#cafe .time-box .link-txt a{
color : rgb( 182 0 20 );
text-decoration : underline;
}
#cafe .access-box ul{
text-align : center;
}
#cafe .access-box ul li{
font-size : 19px;
line-height : 1.6;
}
#cafe .color-box{
padding : 50px 0;
margin : 100px 0;
background : rgb( 240 236 236 / .6 );
} #cafe figure.cap img{
margin-top : 20px;
}
#cafe .box iframe{
margin-bottom : 20px;
} .category-voice ,
#voice{
max-width : 948px;
}
.voice-box .inbox:not( :last-of-type ){
margin-bottom : 110px;
}
.voice-box ul{
justify-content : flex-start; }
#voice .btn{
max-width : 150px;
}
.voice-box .inbox li{
position : relative;
width : 100%;
max-width : 30.591%;
-webkit-transition : .2s;
transition : .2s;
}
.voice-box .inbox li:hover{
opacity : .6;
}
.voice-box .inbox li:not( :nth-child( 3n ) ){
margin-right : 4.1%;
}
.voice-box .inbox li:not( :nth-child( -n - 3 ) ){
margin-bottom : 4.1%;
}
.voice-box .inbox li .cap{
position : relative;
width : 100%;
padding-top : 66.552%;
margin-bottom : 20px;
overflow : hidden;
}
.voice-box .inbox li .cap figure{
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center top;
background-size : cover;
}
.voice-box .inbox li dt{
margin-bottom : 10px;
font-size : 16px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : left;
}
.voice-box .inbox li dd{
justify-content : flex-start;
width : 100%;
}
.voice-box .inbox li dd .txt{
display : block;
width : 100%;
margin-bottom : 5px;
font-size : 12px;
line-height : 1.5;
color : rgb( 102 102 102 );
}
.voice-box .inbox li dd .txt:first-child{
margin-bottom : 5px;
font-size : 14px;
font-weight : 700;
line-height : 1.5;
color : #333;
}
#voice .description-txt{
margin-bottom : 40px;
font-size : 18px;
text-align : center;
}
#voice .box-title{
margin-bottom : 60px;
}
.category-voice .other-link-box{
max-width : 850px;
margin-bottom : 0;
}
.single-voice-box.page-contents .other-link-box{
margin-bottom : 100px;
}
.category-voice .other-link-box ul{
justify-content : flex-start;
}
.other-link-box li:not( :nth-child( 3n ) ){
margin-right : 1.6%;
}
.category-voice .description-txt{
margin-bottom : 80px;
font-size : 18px;
line-height : 1.6;
text-align : center;
}
.category-voice .other-link-box li , .single-voice-box .other-link-box li , .category-voice .other-link-box li{
width : 48%;
margin-right : 2%;
}
.category-voice .other-link-box li:nth-child( 2n ) , .single-voice-box .other-link-box li:nth-child( 2n ){
margin-right : 0;
}
.category-voice .other-link-box li:nth-child( n+3 ) , .single-voice-box .other-link-box li:nth-child( n+3 ){
margin-bottom : 0;
}
.other-color-box.voice-box .box-title{
margin-bottom : 60px;
}
.other-color-box.voice-box ul{
margin-bottom : 0;
}
.voice-box .inbox li:not( :nth-child( -n - 3 ) ){
margin-bottom : 4.1%;
}
.voice-box .inbox li .cap{
position : relative;
width : 100%;
padding-top : 66.552%;
margin-bottom : 20px;
overflow : hidden;
}
.voice-box .inbox li .cap figure{
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center top;
background-size : cover;
}
.voice-box .inbox li dt{
margin-bottom : 10px;
font-size : 16px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : left;
}
.voice-box .inbox li dd{
justify-content : flex-start;
width : 100%;
}
.voice-box .inbox li dd .txt{
display : block;
width : 100%;
margin-bottom : 5px;
font-size : 12px;
line-height : 1.5;
color : rgb( 102 102 102 );
}
.voice-box .inbox li dd .txt:first-child{
margin-bottom : 5px;
font-size : 14px;
font-weight : 700;
line-height : 1.5;
color : #333;
}
#voice .description-txt{
margin-bottom : 40px;
font-size : 18px;
text-align : center;
}
#voice .box-title{
margin-bottom : 60px;
}
.category-voice .other-link-box{
max-width : 850px;
margin-bottom : 0;
}
.single-voice-box.page-contents .other-link-box{
margin-bottom : 100px;
}
.category-voice .other-link-box ul{
justify-content : flex-start;
}
.other-link-box li:not( :nth-child( 3n ) ){
margin-right : 1.6%;
}
.category-voice .description-txt{
margin-bottom : 80px;
font-size : 18px;
line-height : 1.6;
text-align : center;
}
.category-voice .other-link-box li , .single-voice-box .other-link-box li , .category-voice .other-link-box li{
width : 48%;
margin-right : 2%;
}
.category-voice .other-link-box li:nth-child( 2n ) , .single-voice-box .other-link-box li:nth-child( 2n ){
margin-right : 0;
}
.category-voice .other-link-box li:nth-child( n+3 ) , .single-voice-box .other-link-box li:nth-child( n+3 ){
margin-bottom : 0;
}
.other-color-box.voice-box .box-title{
margin-bottom : 60px;
}
.other-color-box.voice-box ul{
margin-bottom : 0;
} #online{
max-width : 100%;
padding : 0;
margin : 0;
}
#online p{
line-height : 1.8;
}
#online .page-header{
padding-top : 104.5px;
margin-top : 0;
}
#online .page-header h1 span{
display : block;
margin-top : 50px;
font-size : 30px;
font-weight : 700;
line-height : 1.5;
}
#online section{
padding : 0;
}
#online section:first-child{
padding-top : 100px;
}
#online .page-header .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/online_img01.png);
}
#online .sub-title{
padding : 20px 0;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : center;
}
#online .sub-text{
padding : 10px 0 100px;
text-align : center;
}
#online .inner-title{
padding : 20px 0;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : white;
text-align : center;
background : rgb( 182 0 20 );
}
#online section .inner-text{
padding : 30px 0;
text-align : center;
}
#online img{
width : 50%;
padding : 30px 0;
}
.online-movie{
position : relative;
margin : 10px 0 100px;
}
.online-movie .video-text{
position : absolute;
top : 45%;
left : 35%;
padding : 20px 0;
margin-bottom : 10px;
font-size : 40px;
font-weight : 700;
line-height : 1.4;
color : white;
text-align : center;
}
#online .inner{
max-width : 800px;
}
#online .line-box .border-box .title p{
max-width : 517px;
word-break : keep-all;
}
#online .line-btn{
width : 100%;
padding : 0;
}
#online .inner-lists ul{
max-width : 550px;
padding : 20px 0 5px 20px;
margin : 20px auto 50px;
background : #eee;
}
#online .inner-lists li{
position : relative;
padding-left : 32px;
margin-bottom : 16px;
font-size : 18px;
line-height : 1.5em;
}
#online .inner-lists li::before{
position : absolute;
top : 0;
left : 0;
display : block;
width : 24px;
height : 24px;
content : "";
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/check_org.svg);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
}
#online .inner-lists-red li::before{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/check_red.svg);
}
#online video{
max-width : 100%;
}
#online .slick-dots{
bottom : 40px;
}
#online #house-banner{
max-width : 50%;
margin : 0 auto;
}
#online .slick-img{
width : 100%;
}
#online .line-box .border-box .icon{
margin-left : 110px;
}
@media screen and ( max-width : 930px ){
.page-header .inbox h1{
font-size : 23px;
}
#online img{
width : 65%;
}
#online .top-img{
width : 100%;
}
.online-movie .video-text{
left : 20%;
}
#online #house-banner{
max-width : 65%;
∏	}
}
@media screen and ( max-width : 767px ){
#online .page-header{
margin-top : 0;
}
#online .page-header h1 span{
margin-top : 0;
font-size : 1.875rem;
}
#online .inner-title{
font-size : 20px;
}
#online .sub-title{
font-size : 19px;
}
.online-movie .video-text{
font-size : 20px;
}
#online section .interaction-text{
font-size : 15px;
}
}
@media screen and ( max-width : 412px ){
#online .box-title{
word-break : keep-all;
}
#online .line-box .border-box .icon{
margin-left : 0;
}
#online .line-box .border-box .title p{
max-width : 300px;
}
} #event{
max-width : 100%;
}
#event p{
line-height : 1.8;
}
#event .page-header{
width : 100%;
max-width : 850px;
}
#event .event-charm ,
#event .event-schedule ,
#event .inner ,
#event .event-entry{
max-width : 850px;
margin-left : auto;
margin-right : auto;
}
#event-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/night_pc.png);
}
#event .sub-title{
margin-bottom : 50px;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : center;
}
#event .inner-text{
max-width : 1095px;
margin : 0 auto;
}
#event .top-text01{
margin-bottom : 70px;
}
#event .top-text02{
margin-bottom : 30px;
}
#event .bold-text{
font-weight : 700;
}
#event .top-text03{
margin-bottom : 100px;
}
#event .inner-title-arrow{
position : relative;
top : 40px;
display : block;
height : 50px;
margin : 0 auto;
font-size : 30px;
font-weight : 700;
line-height : 50px;
color : white;
text-align : center;
background-color : rgb( 182 0 20 );
}
#event .inner-title-arrow::before{
position : absolute;
top : -37px;
left : 100%;
width : 0;
height : 0;
content : "";
border : 60px solid transparent;
border-left : 60px solid rgb( 182 0 20 );
}
#event .inner-lists ul{
max-width : 650px;
padding : 20px 0 5px 20px;
margin : 100px auto 50px;
background : #eee;
}
#event .inner-lists li{
position : relative;
padding-left : 32px;
margin-bottom : 16px;
font-size : 18px;
line-height : 1.5em;
}
#event .inner-lists li::before{
position : absolute;
top : 0;
left : 0;
display : block;
width : 24px;
height : 24px;
content : "";
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/event/check_black.svg);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
}
#event #house-banner{
max-width : 50%;
margin : 0 auto;
}
#event .slick-img{
width : 100%;
}
#event .sub-text{
margin-top : 80px;
text-align : center;
}
#event .schedule-lists{
max-width : 800px;
margin : 70px auto 0;
}
.schedule-lists li{
position : relative;
display : flex;
align-items : center;
height : 140px;
padding : 0 0 0 60px;
font-size : 20px;
font-weight : 700;
line-height : 120px;
color : #000;
text-decoration : none;
vertical-align : middle;
border-bottom : 1px solid #000;
}
.schedule-lists li::before ,
.schedule-lists li::after{
position : absolute;
top : 0;
bottom : 0;
left : 0;
margin : auto;
vertical-align : middle;
content : "";
}
.schedule-lists li::before{
left : 2px;
width : 30px;
height : 15px;
background : rgb( 182 0 20 );
}
.schedule-lists li::after{
left : 10px;
width : 20px;
height : 20px;
border-top : 10px solid rgb( 182 0 20 );
border-right : 10px solid rgb( 182 0 20 );
transform : rotate( 45deg );
}
.schedule-sub-text{
position : absolute;
bottom : 5px;
font-size : 14px;
}
#event .corporate-title{
position : relative;
display : flex;
align-items : center;
justify-content : center;
margin : 100px auto 50px;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
}
#event .corporate-title::after{
position : absolute;
bottom : -20px;
left : 0;
right : 0;
width : 100%;
height : 1px;
margin : 0 auto;
text-align : center;
content : "";
background-image : linear-gradient( to right , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-repeat : no-repeat;
background-position : center;
}
.event-entry .inner-title-sub{
position : relative;
margin : 100px 0 0;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : center;
}
.event-entry .inner-title-sub::after{
position : absolute;
bottom : -20px;
left : 0;
right : 0;
width : 100%;
height : 1px;
margin : 0 auto;
text-align : center;
content : "";
background-image : linear-gradient( to right , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-repeat : no-repeat;
background-position : center;
}
.event-entry .line-icon{
max-width : 260px ! important;
}
.event-tour{
display : flex;
max-width : 700px;
margin : 0 auto;
border : 3px solid rgb( 182 0 20 );
border-radius : 5px;
}
.event-tour .left-box{
width : 40%;
}
.event-tour .event-arrow{
position : relative;
top : 100px;
left : 37%;
display : block;
padding : 0 0 0 16px;
font-size : 20px;
font-size : 15px;
font-weight : 700;
color : #000;
text-align : center;
text-decoration : none;
vertical-align : middle;
}
.event-tour .event-arrow::before ,
.event-tour .event-arrow::after{
position : absolute;
top : 0;
bottom : 0;
left : 0;
margin : auto;
vertical-align : middle;
content : "";
}
.event-tour .event-arrow::before{
width : 80px;
height : 25px;
background : rgb( 182 0 20 );
transform : rotate( 135deg );
}
.event-tour .event-arrow::after{
top : -25px;
left : 27px;
width : 30px;
height : 30px;
border-top : 20px solid rgb( 182 0 20 );
border-right : 20px solid rgb( 182 0 20 );
}
.event-tour .event-title{
padding : 73% 32px 0;
margin-bottom : 30px;
margin-bottom : 50px;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : #000;
text-align : center;
}
.event-tour .right-box{
width : 60%;
}
.event-tour .right-box-title{
height : 40px;
margin : 40px 40px 40px 0;
font-size : 25px;
line-height : 40px;
color : #fff;
text-align : center;
background : #555;
}
.event-tour .right-text01{
margin-bottom : 20px;
}
.event-tour .right-text02{
margin-bottom : 20px;
} .event-night{
position : relative;
display : flex;
max-width : 700px;
margin : 100px auto 200px;
border : 3px solid rgb( 182 0 20 );
border-radius : 5px;
}
.event-night .right-box{
width : 40%;
}
.event-night .event-arrow{
position : relative;
top : 100px;
left : 37%;
display : block;
padding : 0 0 0 16px;
font-size : 20px;
font-size : 15px;
font-weight : 700;
color : #000;
text-align : center;
text-decoration : none;
vertical-align : middle;
}
.event-night .event-arrow::before ,
.event-night .event-arrow::after{
position : absolute;
top : 0;
bottom : 0;
left : 0;
margin : auto;
vertical-align : middle;
content : "";
}
.event-night .event-arrow::before{
width : 80px;
height : 25px;
background : rgb( 182 0 20 );
transform : rotate( 135deg );
}
.event-night .event-arrow::after{
top : -25px;
left : 27px;
width : 30px;
height : 30px;
border-top : 20px solid rgb( 182 0 20 );
border-right : 20px solid rgb( 182 0 20 );
}
.event-night .event-title{
padding : 73% 40px 0;
margin-bottom : 30px;
margin-bottom : 50px;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : #000;
text-align : center;
}
.event-night .left-box{
width : 60%;
margin-left : 40px;
}
.event-night .left-box-title{
height : 40px;
margin : 40px 0 40px 0;
font-size : 25px;
line-height : 40px;
color : #fff;
text-align : center;
background : #555;
}
.event-night .left-text01{
margin-bottom : 20px;
}
.event-night .left-text02{
margin-bottom : 50px;
}
.event-night .circle-icon{
position : absolute;
top : -56px;
right : -59px;
display : block;
width : 120px;
height : 120px;
font-size : 14px;
color : #fff;
text-align : center;
content : "";
background-color : rgb( 182 0 20 );
border-radius : 999px;
}
.event-night .circle-icon::after{
position : absolute;
top : 46px;
display : flex;
align-items : center;
justify-content : center;
content : "2021年2月より開催予定";
}
#event .wrap-box p{
max-width : 517px;
}
#event .line-box .border-box .icon{
margin-left : 110px;
}
@media screen and ( max-width : 930px ){
#event .schedule-lists{
max-width : 650px;
}
}
@media screen and ( max-width : 767px ){
#event .page-header{
max-width : 90%;
}
#event .sub-title{
font-size : 18px;
}
#event .inner-title-arrow{
width : 70%;
margin : 0 0 0 30px;
font-size : 18px;
}
#event .inner-lists ul{
width : 80%;
}
#event .sub-text{
width : 80%;
margin : 80px auto 0;
}
#event .schedule-lists{
max-width : 80%;
}
.schedule-lists li{
display : flex;
align-items : center;
height : 160px;
font-size : 16px;
line-height : 1;
}
.schedule-lists li:nth-child( 4 ){
align-items : normal;
padding-top : 25px;
}
#event .corporate-title{
font-size : 14px;
}
.event-entry .inner-title-sub{
font-size : 18px;
}
#event .inner-title-arrow{
font-size : 14px;
}
.event-tour{
flex-direction : column;
width : 85%;
}
.event-tour .left-box{
width : 100%;
}
.event-tour .event-title{
padding : 20px 55px;
}
.event-tour .event-arrow{
top : 150px;
}
.event-tour .right-box{
width : 80%;
margin : 0 auto 20px;
}
.event-tour .right-box-title{
margin : 20px 0;
font-size : 16px;
}
.event-night{
flex-direction : column-reverse;
width : 85%;
margin : 100px auto;
}
.event-night .right-box{
width : 100%;
}
.event-night .event-title{
padding : 20px 55px;
}
.event-night .event-arrow{
top : 150px;
}
.event-night .left-box{
width : 80%;
margin : 0 auto 20px;
}
.event-night .left-box-title{
margin : 20px 0;
font-size : 16px;
}
}
@media screen and ( max-width : 412px ){
#event .box-title{
word-break : keep-all;
}
#event .line-box .border-box .icon{
margin-left : 0;
}
#event .line-box .border-box .title p{
max-width : 300px;
word-break : keep-all;
}
} .story-box{
width : 850px;
margin-top : 100px;
margin-bottom : 0;
margin-left : auto;
margin-right : auto;
}
.single-voice-box .story-box{
margin-top : 0;
}
.story-box .itemcap{
position : relative;
padding-top : 25px;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/index/service-bg-title.png) repeat-x left top white;
background-size : auto;
background-size : 42px;
border-bottom : 25px solid rgb( 182 0 20 );
-webkit-transition : .2s;
transition : .2s;
}
.story-box p{
margin : 20px auto 0;
text-align : center;
}
.story-box .itemcap{
-webkit-transition : .2s;
transition : .2s;
}
.story-box .itemcap:hover{
opacity : .6;
}
#users p.description-txt{
margin : 0 auto 30px;
text-align : center;
}
#users .voice-box .inbox{
position : relative;
box-sizing : border-box;
width : 48%;
padding : 30px 10px;
padding-top : 70px;
padding-bottom : 115px;
margin-bottom : 40px;
border : 1px solid rgb( 182 0 20 );
border-radius : 6px;
}
#users .voice-box .inbox.voice_house{
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/faq/faq2.png) top 20px center no-repeat;
}
#users .voice-box .inbox.voice_night{
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/faq/faq4.png) top 20px center no-repeat;
}
#users .voice-box .inbox.voice_cafe{
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/faq/faq5.png) top 20px center no-repeat;
}
#users .voice-box .inbox.voice_adviser{
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/faq/faq6.png) top 20px center no-repeat;
}
#users .voice-box .inbox{
background-size : 40px ! important;
}
#users .voice-box .inbox:nth-child( n+3 ){
margin-bottom : 0;
}
#users .voice-box .inbox li dd .txt{ }
#users .voice-box .inbox .btn{
position : absolute;
bottom : 30px;
display : block;
width : 100%;
margin : 0 auto;
text-align : center;
}
#users .voice-box ul{
margin-bottom : 30px;
}
#users .voice-box .inbox h4{
margin-bottom : 30px;
font-size : 22px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : center;
}
#users .voice-box .inbox li{
position : relative;
width : 100%;
max-width : 100%;
margin : 0;
}
#users .voice-box .inbox li{
-webkit-transition : .2s;
transition : .2s;
}
#users .voice-box .inbox li:hover{
opacity : .6;
}  .single .page-header{
margin-bottom : 15px;
}
.single-contents-box .contents-box{
padding-left : 60px;
padding-right : 60px;
}
.single-contents-box .item-box{
align-items : center;
justify-content : flex-end;
margin-bottom : 25px;
}
.single-contents-box .item-box time{
display : block;
line-height : 23px;
}
.single-contents-box .item-box .category-name{
padding : 2px 6px 5px 4px;
margin-right : 10px;
color : white;
background : rgb( 182 0 20 );
}
.single-contents-box .other-box ul{
padding-left : 80px;
padding-right : 80px;
margin-bottom : 60px;
}
.single-gallery .other-link-box .btn{
margin-top : 40px;
} .other-link-box{
width : 100%;
max-width : 1000px;
padding-left : 10px;
padding-right : 10px;
margin : 0 auto 180px;
}
.other-link-box ul{
justify-content : flex-start;
}
.other-link-box li{
position : relative;
width : 32%;
height : 78px;
line-height : 78px;
text-align : center;
background : rgb( 182 0 20 );
border : 1px solid rgb( 182 0 20 );
border-radius : 6px;
-webkit-transition : all .4s;
-moz-transition : all .4s;
-ms-transition : all .4s;
-o-transition : all .4s;
transition : all .4s;
}
.other-link-box li:nth-child( -n + 3 ){
margin-bottom : 15px;
}
.other-link-box li:hover{
background : white;
}
.other-link-box li:hover .txt{
color : rgb( 182 0 20 );
}
.other-link-box li .txt{
color : white;
-webkit-transition : all .4s;
-moz-transition : all .4s;
-ms-transition : all .4s;
-o-transition : all .4s;
transition : all .4s;
} .other-color-box{
padding : 50px 0;
margin-bottom : 80px;
background : rgb( 246 244 245 );
}
.other-color-box .box-title{
position : relative;
width : 100%;
max-width : 678px;
margin : 0 auto 40px;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : center;
}
.other-color-box .box-title::after{
position : absolute;
bottom : -20px;
left : 0;
right : 0;
width : 100%;
height : 1px;
margin : 0 auto;
text-align : center;
content : "";
background-image : -webkit-linear-gradient( left , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-image : linear-gradient( to right , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-repeat : no-repeat;
background-position : center;
} .other-color-box .inbox{
max-width : 948px;
} .single-voice-box header .text{
margin-bottom : 20px;
text-align : center;
}
.single-voice-box header .text .txt{
font-size : 18px;
font-weight : 700;
}
.single-voice-box header .text .txt:not( :last-of-type ){
margin-right : 20px;
}
.single-voice-box header .cap{
padding-left : 125px;
padding-right : 125px;
}
.single-voice-box header{
margin-bottom : 40px;
}
.single-voice-box .contents-box{
width : 100%;
max-width : 600px;
margin : 0 auto 50px;
}
.single-voice-box{
margin-bottom : 80px;
}
.single-voice-box .contents-box dt ,
.single-voice-box .contents-box dd{
font-size : 15px;
}
.single-voice-box .contents-box dt{
margin-bottom : 18px;
font-weight : 700;
color : rgb( 182 0 20 );
}
.single-voice-box .contents-box dl:not( :last-of-type ){
margin-bottom : 35px;
}
.single-sns-box li .box{
align-items : center;
justify-content : center;
height : 100%;
}
.single-sns-box li{
position : relative;
width : 100%;
max-width : 32%;
height : 50px;
}
.single-sns-box li .txt{
margin-left : 12px;
font-size : 14px;
color : white;
}
.single-sns-box li.tweet{
background : rgb( 55 136 227 );
border-bottom : 2px solid rgb( 18 66 114 );
}
.single-sns-box li.facebook{
background : rgb( 6 89 179 );
border-bottom : 2px solid rgb( 18 66 114 );
}
.single-sns-box li.line{
background : rgb( 31 205 7 );
border-bottom : 2px solid rgb( 25 144 54 );
} .single-story-box .contents-box{
width : 100%;
max-width : 600px;
margin : auto;
}
.single-story-box .minbox{
box-sizing : border-box;
justify-content : left;
padding : 20px;
margin-bottom : 60px;
background : rgb( 246 244 245 );
}
.single-story-box .minbox .data{
margin-left : 30px;
}
.single-story-box .minbox .data dl{
justify-content : flex-start;
}
.single-story-box .minbox .data dl:not( :last-of-type ){
margin-bottom : 15px;
}
.single-story-box .minbox .data dt{
width : 100px;
margin-bottom : 0;
}
.single-story-box .minbox .cap{
width : 200px;
}
.single-story-box .text-box h3{
margin-bottom : 25px;
font-size : 24px;
font-weight : 700;
line-height : 1.5;
color : rgb( 182 1 20 );
}
.single-story-box .text-box header h3{
color : #000;
text-align : center;
}
.single-story-box .conte-box{
padding : 30px 0;
}
.single-story-box.single-voice-box header{
margin-bottom : 0;
} #ticket{
max-width : 100%;
}
#ticket .inner{
width : 850px;
}
#ticket .top-box{
margin-bottom : 100px;
}
#ticket .top-box h3{
margin-bottom : 25px;
font-size : 34px;
font-weight : 700;
line-height : 1.6;
color : rgb( 182 0 20 );
text-align : center;
}
#ticket .top-box .text{
margin-bottom : 12px;
text-align : center;
}
#ticket .top-box .text .txt{
font-size : 26px;
line-height : 1.8;
border-bottom : 2px dotted rgb( 182 0 20 );
}
#ticket .top-box .item-txt{
font-size : 12px;
line-height : 1.8;
text-align : center;
}
#ticket .box-title .icon{
width : 44px;
height : 44px;
margin-right : 10px;
}
#ticket .icon-title{
align-items : center;
justify-content : center;
}
#ticket .color-box .item{
width : 25px;
height : 25px;
margin-right : 15px;
font-size : 12px;
line-height : 22px;
color : white;
text-align : center;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size : 100%;
}
#ticket .color-box{
padding : 0 20px;
background-color : rgb( 250 236 226 / .9 );
background-image : radial-gradient( rgb( 216 164 163 ) 10% , transparent 10% ) , radial-gradient( rgb( 216 164 163 ) 10% , transparent 10% );
background-position : 0 0 , 7px 7px;
background-size : 14px 14px;
border : 1px solid rgb( 182 0 20 );
}
#ticket .text-box .item-color{
font-weight : 700;
}
#ticket .color-box p{
font-weight : 700;
}
#ticket .color-box .txt{
font-size : 30px;
font-weight : 700;
}
#ticket .color-box li:not( :last-child ){
border-bottom : 1px solid rgb( 182 0 20 );
}
#ticket .color-box li{
align-items : baseline;
justify-content : flex-start;
padding : 40px 0 40px 170px;
}
#ticket .color-box .mintxt{
font-size : 14px;
}
#ticket .color-box p:not( :last-of-type ){
margin-bottom : 10px;
}
#ticket .color-box a{
font-weight : 700;
text-decoration : underline;
}
#ticket .inbox{
width : 100%;
max-width : 580px;
margin : 0 auto;
}
#ticket .box-color-txt{
height : 46px;
margin-bottom : 35px;
font-size : 21px;
line-height : 42px;
color : white;
text-align : center;
background : rgb( 182 0 20 );
border-radius : 4px;
}
#ticket .last-box{
margin-bottom : 120px;
}
#ticket .last-box h3{
align-items : center;
justify-content : center;
}
#ticket .last-box h3 .minicon{
width : 72px;
}
#ticket.page-contents .box-title .txt{
line-height : 1.5;
} #about{
max-width : 100%;
margin-bottom : 50px;
}
#about .inner{
max-width : 850px;
}
#about .top-box{
margin-bottom : 50px;
}
#about .top-box h2{
margin-bottom : 30px;
font-size : 42px;
text-align : center;
}
#about .top-box h3{
margin-bottom : 25px;
font-size : 26px;
line-height : 1.6;
text-align : center;
}
#about .index-benefits-box::before ,
#about .index-benefits-box::after{
content : none;
}
#about .index-benefits-box{
padding : 50px 0;
margin-bottom : 50px;
background : rgb( 240 236 236 );
}
#about .index-benefits-box .btn{
width : auto;
max-width : none;
height : auto;
margin : 0;
background : none;
border : none;
border-radius : 4px;
-webkit-transition : all .4s;
-moz-transition : all .4s;
-ms-transition : all .4s;
-o-transition : all .4s;
transition : all .4s;
}
#about .text-box .cap{
margin-bottom : 15px;
}
#about .text-center{
font-size : 28px;
font-weight : 700;
text-align : center;
}
#about .text-box .btn{
margin-top : 40px;
}
#about .voice-select-box{
margin : 50px 0;
}
#about .voice-select-box .inbox{
margin-bottom : 30px;
}
#about .voice-select-box .text-center{
font-size : 22px;
}
#about .tabs-box{
margin-bottom : 50px;
}
#about .tabs-box li{
position : relative;
width : 100%;
height : 160px;
overflow : hidden;
}
#about .tabs-box li:not( :last-child ){
margin-bottom : 25px;
}
#about .tabs-box li figure{
position : absolute;
top : 0;
left : 0;
z-index : 1;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center center;
background-size : 100%;
-webkit-transition : .5s;
transition : .5s;
}
#about .tabs-box li:hover figure{
transform : scale( 1.1 );
}
#about .tabs-box h4{
position : absolute;
top : 50%;
left : 50%;
z-index : 2;
font-size : 26px;
font-weight : 700;
color : white;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
#about .text-box:last-of-type h3{
position : relative;
font-size : 28px;
text-align : center;
}
#about .text-box:last-of-type .item-color{
border-bottom : 2px solid rgb( 182 0 20 );
} .question-box ul{
margin-bottom : 50px;
border : 1px solid rgb( 182 0 20 );
}
.question-box h3{
position : relative;
padding : 20px 0;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : white;
text-align : center;
background : rgb( 182 0 20 );
}
.question-box h3::after{
position : absolute;
bottom : -12px;
left : 50%;
display : block;
width : 0;
height : 0;
content : "";
border-color : rgb( 182 0 20 ) transparent transparent transparent;
border-style : solid;
border-width : 12px 6px 0 6px;
-webkit-transform : translate( -50% , 0 );
transform : translate( -50% , 0 );
}
.question-box .itembox .icon{
position : relative;
width : 30px;
font-size : 32px;
text-align : center;
}
.question-box .itembox .text{
margin-top : 30px;
}
.question-box .itembox .text .font_sans{
color : rgb( 77 77 133 );
}
.question-box .itembox .text .font_sans::after{
background : rgb( 77 77 133 );
}
.question-box .itembox .txt , .question-box .itembox p{
line-height : 1.5;
}
.question-box li{
align-items : center;
justify-content : flex-start;
padding : 40px 0 40px 40px;
}
.question-box li:not( :last-child ){
border-bottom : 2px dotted rgb( 182 0 20 );
}
.question-box li .font_sans::after{
position : absolute;
bottom : -2px;
left : 0;
display : block;
width : 100%;
height : 2px;
content : "";
background : rgb( 182 0 20 );
}
.question-box li .font_sans{
position : relative;
margin-right : 15px;
font-size : 33px;
font-weight : 700;
color : rgb( 182 0 20 );
}
.question-box li .txt{
display : inline-grid;
width : 90%;
font-size : 18px;
}
.question-box li .title{
cursor : pointer;
}
.category-faq .itembox{
margin : 0 80px 50px;
background-color : #fff;
background-image : radial-gradient( rgb( 182 0 20 / .2 ) 10% , transparent 10% ) , radial-gradient( rgb( 182 0 20 / .2 ) 10% , transparent 10% );
background-position : 0 0 , 7px 7px;
background-size : 14px 14px;
border : 1px solid rgb( 182 0 20 );
}
.category-faq .btn{
max-width : 182px;
}
.category-faq .itembox li{
padding : 20px;
}
.category-faq .itembox li:not( :last-child ){
border-bottom : 2px dotted rgb( 182 0 20 );
}
.category-faq .itembox .title{
cursor : pointer;
}
.category-faq .itembox .title ,
.category-faq .itembox .text{
display : table;
width : 100%;
table-layout : fixed;
}
.category-faq .itembox .text{
margin-top : 20px;
}
.category-faq .itembox .icon ,
.category-faq .itembox .min-title ,
.category-faq .itembox .data{
display : table-cell;
vertical-align : top;
}
.category-faq .itembox .icon{
position : relative;
width : 30px;
font-size : 32px;
text-align : center;
}
.category-faq .itembox .title .item{
font-weight : 500;
color : rgb( 182 0 20 );
border-bottom : 2px solid rgb( 182 0 20 );
}
.category-faq .itembox .text .item{
font-weight : 500;
color : rgb( 77 77 133 );
background : none;
border-bottom : 2px solid rgb( 77 77 133 );
}
.category-faq .itembox .min-title ,
.category-faq .itembox .data{
padding-left : 15px;
}
.category-faq .itembox .itemtxt{
font-size : 18px;
font-weight : 700;
color : rgb( 182 0 20 );
}
.page-contents.category-faq .text-box .data p{
font-size : 18px;
font-weight : 700;
} #faq ul{
width : 100%;
}
#faq.page-contents ul.wrap-box{
margin-bottom : 100px;
}
#faq li{
margin-bottom : 20px;
}
#faq li{
position : relative;
box-sizing : border-box;
width : 100%;
max-width : 32%;
padding : 30px 10px;
border : 1px solid rgb( 182 0 20 );
border-radius : 6px;
-webkit-transition : all .3s ease;
transition : all .3s ease;
}
#faq li dl{
display : table;
width : 100%;
table-layout : fixed;
}
#faq li dt ,
#faq li dd{
display : table-cell;
vertical-align : middle;
}
#faq li dt{
width : 20%;
}
#faq li dd{
padding-left : 12px;
font-size : 16px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
-webkit-transition : all .3s ease;
transition : all .3s ease;
}
#faq li:hover{
background : rgb( 182 0 20 );
}
#faq li:hover dd{
color : white;
}
#faq.page-contents{
margin-bottom : 0;
} .voice-select-box{
padding : 50px 0;
margin-bottom : 120px;
background : rgb( 240 236 236 );
}
.voice-select-box .inbox{
width : 100%;
max-width : 850px;
padding-left : 10px;
padding-right : 10px;
margin : 0 auto;
}
.voice-select-box h3{
position : relative;
margin-bottom : 40px;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : center;
}
.voice-select-box h3 .item{
width : 32px;
vertical-align : unset;
}
.voice-select-box h3::after{
position : absolute;
bottom : -20px;
left : 0;
right : 0;
width : 100%;
height : 1px;
margin : 0 auto;
text-align : center;
content : "";
background-image : -webkit-linear-gradient( left , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-image : linear-gradient( to right , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-repeat : no-repeat;
background-position : center;
}
.voice-select-box ul{
justify-content : flex-start;
width : 100%;
max-width : 1200px;
margin : 0 auto 35px;
}
.voice-select-box li{
position : relative;
width : 24%;
}
.voice-select-box li:not( :last-child ){
margin-right : 1.33463%;
}
.voice-select-box .cap{
position : relative;
width : 100%;
padding-top : 69.445%;
margin-bottom : 15px;
overflow : hidden;
}
.voice-select-box li:hover .cap figure{
transform : scale( 1.1 );
}
.voice-select-box p{
line-height : 1.6;
}
.voice-select-box p .itemtxt{
display : block;
font-weight : 700;
text-decoration : underline;
}
.voice-select-box .cap figure{
position : absolute;
top : 0;
left : 0;
z-index : 1;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center center;
background-size : 100%;
-webkit-transition : .5s;
transition : .5s;
} .service-notebox{
width : 100%;
max-width : 1000px;
padding-left : 10px;
padding-right : 10px;
margin : 0 auto 120px;
}
.service-notebox h3{
margin-bottom : 12px;
font-size : 19px;
font-weight : 700;
}
.service-notebox p{
font-size : 14px;
line-height : 1.6;
}
.page-id-86 .other-link-box{
margin : 0 auto 50px;
} #sitemap .box:not( :last-of-type ){
margin-bottom : 60px;
}
#sitemap h2 a{
font-size : 24px;
font-weight : 700;
color : rgb( 182 0 20 );
}
#sitemap h2{
position : relative;
}
#sitemap h2::before{
position : absolute;
top : 50%;
left : -20px;
display : block;
width : 16px;
height : 16px;
margin-top : 0;
content : "";
background : rgb( 182 0 20 );
border-radius : 50%;
-webkit-transform : translate( 0 , -50% );
transform : translate( 0 , -50% );
}
#sitemap h2::after{
position : absolute;
top : 50%;
left : -14px;
display : block;
width : 0;
height : 0;
margin-top : 0;
content : "";
border-color : transparent transparent transparent white;
border-style : solid;
border-width : 3px 0 3px 6px;
-webkit-transform : translate( 0 , -50% );
transform : translate( 0 , -50% );
}
#sitemap ul{
justify-content : flex-start;
margin-top : 25px;
}
#sitemap li{
position : relative;
width : 32%;
}
#sitemap .item-box ul{
display : block;
}
#sitemap .item-box ul li{
width : 100%;
}
#sitemap li::before{
position : absolute;
top : 50%;
left : -14px;
display : block;
width : 0;
height : 0;
margin-top : 0;
content : "";
border-color : transparent transparent transparent rgb( 182 0 20 );
border-style : solid;
border-width : 3px 0 3px 6px;
-webkit-transform : translate( 0 , -50% );
transform : translate( 0 , -50% );
}
#sitemap li:not( :nth-child( n + 4 ) ){
margin-bottom : 15px;
} .mw_wp_form .error{
margin-top : 10px;
}
.confirm p.text-center{
display : none;
}
#contact.confirm .item-table{
margin-bottom : 50px;
}
#contact.confirm .item-table th ,
#contact.confirm .item-table td{
padding-bottom : 50px;
}
#contact.page-contents .itembtn button.btn.btn-gray{
background : #999;
border : 1px solid #999;
}
#contact.page-contents .itembtn button.btn.btn-gray:hover{
background : white;
}
#contact.page-contents .itembtn button.btn.btn-gray:hover{
color : #999;
}
#thanks .btn{
margin-top : 80px;
}
#contact .top-box{
margin-bottom : 50px;
text-align : center;
}
#contact .text-center{
margin-bottom : 60px;
text-align : center;
}
#contact .text-center a{
color : rgb( 182 0 20 );
text-decoration : underline;
}
#contact .item-table{
width : 100%;
}
#contact .item-table th ,
#contact .item-table td{
padding-bottom : 30px;
}
#contact .item-table th{
width : 205px;
text-align : left;
}
#contact .item-table th .txt ,
#contact .item-table th .item-txt{
vertical-align : middle;
}
#contact .item-table th .txt{
margin-right : 12px;
font-size : 18px;
font-weight : 700;
color : rgb( 182 0 20 );
}
#contact .item-table th .item-txt{
padding : 2px 4px;
font-size : 12px;
color : white;
background : rgb( 182 0 20 );
}
#contact .item-table tr:last-child th{
vertical-align : top;
}
#contact .item-table td{
width : 449px;
}
#contact .item-table .input-txt{
box-sizing : border-box;
width : 100%;
height : 48px;
padding : 10px;
font-size : 15px;
resize : none;
background : rgb( 248 248 248 );
border : 1px solid rgb( 204 204 204 );
border-radius : 4px;
}
#contact .item-table textarea.input-txt{
height : 350px;
}
#contact .itembtn .btn{
display : block;
margin : auto;
font-size : 16px;
color : white;
cursor : pointer;
}
#contact .itembtn .btn:hover{
color : rgb( 182 0 20 );
}
#contact .itembtn{
margin : auto;
}
#contact .btn-box{
margin : 0 80px;
}
#contact .privacy{
box-sizing : border-box;
height : 300px;
padding : 20px;
margin-bottom : 20px;
overflow : auto;
background : rgb( 248 248 248 );
}
#contact .privacy p{
font-size : 80%;
line-height : 2;
}
#contact .privacy p strong{
font-weight : 700;
}
#contact .privacy p.textRight{
margin-bottom : 20px;
text-align : right;
}
#contact p.textCenter{
margin : 0 auto 40px;
text-align : center;
}
#contact.confirm .privacy , #contact.confirm p.textCenter{
display : none;
} #terms h3{
margin-bottom : 12px;
font-size : 24px;
}
#terms .top-box{
margin-bottom : 60px;
}
#terms ul + p ,
#terms ul{
margin-top : 35px;
}
#terms li{
font-size : 19px;
line-height : 1.6;
}
#terms .box:last-of-type{
margin-top : 30px;
}
#notfound .text-box .btn{
margin-top : 40px;
} #story{
max-width : 948px;
}
#story .description-txt{
margin : 0 auto 60px;
font-size : 20px;
line-height : 1.8;
text-align : center;
}
#story .voice-box .inbox li{
-webkit-transition : .2s;
transition : .2s;
}
#story .voice-box .inbox li:hover{
opacity : .6;
} @media screen and ( min-width : 768px ){
#house .slidebox .inbox{
position : relative;
padding : 210px 0 20px;
-webkit-clip-path : polygon( 0 35% , 50% 1% , 100% 35% , 100% 100% , 0% 100% );
clip-path : polygon( 0 35% , 50% 1% , 100% 35% , 100% 100% , 0% 100% );
}
} @media screen and ( max-width : 930px ){
body{
min-width : auto;
}
.index-benefits-box::before , .index-benefits-box::after{
display : none;
width : auto;
}
} @media screen and ( max-width : 767px ){
body{
min-width : auto;
}
#footer .nav li:not( :first-child ) a::after{
display : none;
background : none;
} .inner{
padding-left : 1rem;
padding-right : 1rem;
}
.index-benefits-box h3{
margin-bottom : 35px;
font-size : 4.6vw;
line-height : 1.4;
}
.pc-only{
display : none;
}
.sp-only{
display : block;
}
.sp-icon{
height : 175px ! important;
}
#header{
height : 5.312rem;
padding-top : 0;
padding-bottom : 0;
}
#header .inner{
max-width : none;
height : 100%;
padding : 0 1rem;
}
#header-logo{
width : 120px;
}
#header-nav .btn{
width : 124px;
}
#nav-item-1{
margin-left : 10px;
}
#panel-btn{
width : 35px ! important;
height : 35px ! important;
margin-left : 10px;
}
#panel-btn-icon{
width : 35px;
height : 3px;
}
#panel-btn-icon::before ,
#panel-btn-icon::after{
width : 35px;
height : 3px;
}
#panel-btn-icon::before{
margin-top : -10px;
}
html{
font-size : 3.125vw;
}
#top-banner{
margin : 5.312rem auto 6rem;
}
#top-banner .cap{
padding-top : 14.312%;
}
.index-other-contents h2 ,
.service-box h2{
margin-bottom : 1.5rem;
font-size : 3rem;
}
.index-news-box .news-list-box::before , .index-news-box .news-list-box::after{
top : -2rem;
}
.index-news-box h2{
margin-bottom : 3rem;
font-size : 3rem;
}
.index-other-contents .box:last-of-type .itemcap{
margin-bottom : 1.5rem;
}
.index-other-contents .text ,
.service-box .text{
margin-bottom : 2rem;
font-size : 1rem;
}
.index-other-contents .text{
margin-top : 0;
}
.service-box .box .font_sans{
font-size : 1.5rem;
}
.service-box .box h3{
font-size : 2rem;
font-weight : 700;
}
.index-benefits-box .box{
max-width : none;
}
.index-benefits-box .text{
font-size : 1.65rem;
}
.index-benefits-box{
height : auto;
padding-top : 0;
padding-left : 1rem;
padding-right : 1rem;
margin-bottom : 6rem;
}
.index-benefits-box dl{
justify-content : space-between;
}
.index-benefits-box dt{
width : 70px;
margin-right : 0;
}
.index-benefits-box dd{
max-width : calc( 100% - 85px );
}
.news-list-box dt time ,
.news-list-box dt .item{
padding : .125rem .25rem .062rem;
font-size : 1rem;
}
.news-list-box li dd{
font-size : 1rem;
line-height : 1.4;
}
.news-list-box li:not( :last-child ){
margin-bottom : 20px;
}
.index-news-box .news-list-box::before{
display : none;
width : auto;
}
.service-box{
height : auto;
padding : 50px 0;
margin-bottom : 30px;
}
.service-box .box{
max-width : none;
padding-top : 58.893%;
}
.service-box .box ,
.service-box .box:nth-child( -n + 3 ){
margin-bottom : 30px;
}
.service-box .box:last-of-type{
margin-bottom : 0;
}
.service-box .inner{
padding-left : 0;
padding-right : 0;
transform : translateY( 0 );
}
.service-box .text ,
.service-box h2{
color : white;
}
.service-box .wrap-box{
display : block;
}
.index-other-contents{
height : auto;
margin-bottom : 6rem;
background : none;
}
.index-other-contents .box .inbox{
max-width : none;
} .index-other-contents .box:first-of-type{
margin-bottom : 4rem;
}
.index-other-contents .box{
display : block;
transform : translateY( 0 );
}
.index-news-box{
margin : 6rem 1rem 8rem;
}
.index-news-box .news-list-box{
box-sizing : border-box;
max-width : none;
padding-left : 0;
padding-right : 0;
}
.sns-box h2{
width : 100%;
max-width : 75%;
padding : 1rem 0 4rem;
margin : 0 auto 2rem;
font-size : 1.6rem;
}
.sns-box .text{
margin-bottom : 50px;
font-size : 1.4rem;
line-height : 1.6;
}
.sns-box .inner{
transform : translateY( -64px );
}
#line-banner{
box-sizing : border-box;
max-width : none;
padding : 0 4rem;
margin : 3.125rem auto 2.5rem;
}
.sns-box{
padding : 1.75rem 0;
margin-bottom : 2.812rem;
}
#item-instagram .cap{
width : 15vw;
}
#item-facebook .cap{
width : 10vw;
}
#item-twitter .cap{
width : 15vw;
}
#footer-nav ul{
display : block;
margin : 0 auto;
text-align : center;
}
#footer{
display : flex;
align-items : flex-end;
justify-content : center;
height : auto;
padding-top : 4.8rem;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/footer-bg_sp.png) no-repeat center bottom;
background-size : 100%;
}
address{
margin-bottom : 20px;
font-size : .9rem;
}
#footer .nav{
margin-bottom : 1.875rem;
}
#footer .nav li:first-child{
font-size : 1rem;
}
#copy{
padding : 0 0 1.25rem;
font-size : .75rem;
}
#footer .nav li{
margin : 0 .625rem;
font-size : .75rem;
}
#footer .nav li:nth-child( -n + 3 ){
margin-bottom : 1rem;
}
.service-box .box:nth-of-type( 1 ) .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/index/service-img01_sp.png) ! important;
background-size : 100%;
}
.service-box .box:nth-of-type( 2 ) .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/index/service-img02_sp.png) ! important;
background-size : 100%;
}
.service-box .box:nth-of-type( 3 ) .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/index/service-img03_sp.png) ! important;
background-size : 100%;
} .service-box .box:nth-of-type( 4 ) .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/index/service-img04_sp.png) ! important;
background-size : 100%;
}
.service-box .box:nth-of-type( 5 ) .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/index/service-img07_sp.jpg) ! important;
background-size : 100%;
}
.service-box .box:nth-of-type( 6 ) .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/index/service-img06_sp.png) ! important;
background-size : 100%;
}
#slider01 figure{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-img01_sp.png) ! important;
}
#slider02 figure{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-house_sp.jpg) ! important;
}
#slider03 figure{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-img03_sp.png) ! important;
}
#slider04 figure{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-img04_sp.png) ! important;
} #slider06 figure{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-goodmeeting_sp.jpg) ! important;
}
#slider07 figure{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-online_sp.jpg) ! important;
}
#sp-menubox{
top : 5.312rem;
right : -100%;
width : 100%;
padding : 2.812rem 1.25rem;
}
.index-benefits-box h2{
max-width : 100%;
margin-bottom : 20px;
font-size : 7vw;
}
#sp-menubox li:not( :last-child ){
padding-bottom : 20px;
}
#sp-menubox li a{
display : block;
font-size : 1.25rem;
}
#sp-menubox ul{
width : 65%;
margin-bottom : 1.562rem;
margin-left : 1.562rem;
}
#sp-menubox .minbox li a{
font-size : 1rem;
}
#sp-menubox .minbox{
width : 100%;
margin-left : .5rem;
}
#footer-nav ul li{
position : relative;
font-size : 1.25rem;
}
#footer-nav ul li:not( :last-child ){
margin-bottom : 1.65rem;
}
.index-benefits-box li{
box-sizing : border-box;
width : 100%;
padding : 2rem 0 2rem 1rem ;
}
.index-other-contents .box::after{
display : none;
background : none;
}
#footer-nav ul li.item-txt .txt::before{
right : 6rem;
}
#footer-nav ul li.item-txt .minbox{
position : inherit;
top : 1rem;
left : 0;
display : none;
width : auto;
padding : 10px 0;
}
#footer-nav ul ul{
margin : 0 auto;
}
#footer-nav ul li ul li{
margin-bottom : .5rem ! important;
font-size : 1rem;
}
#topicpath{
display : none;
}
.voice-select-box .inbox{
width : auto;
max-width : none;
}
.voice-select-box .inbox{
padding-left : 1rem;
padding-right : 1rem;
}
.voice-select-box{
padding : 1.875rem 0 3.125rem;
margin-bottom : 3.75rem;
background : rgb( 240 236 236 );
}
.page-contents .box-title{
margin-bottom : 3.125rem;
font-size : 1.675rem;
}
#about .voice-select-box .text-center{
font-size : 1.375rem;
text-align : left;
}
#about .text-box:last-of-type h3{
margin-bottom : 3.125rem;
font-size : 1.675rem;
}
#about .voice-select-box .inbox{
margin-bottom : 1.875rem;
}
.voice-select-box li{
width : 48.5%;
}
.voice-select-box li:not( :last-child ){
margin-right : 0;
}
.voice-select-box li:nth-child( -n + 2 ){
margin-bottom : 2rem;
}
.voice-select-box ul{
box-sizing : border-box;
justify-content : space-between;
max-width : none;
padding-left : 1rem;
padding-right : 1rem;
margin : 0 auto 2.187rem;
}
.voice-select-box .cap{
padding-top : 67%;
margin-bottom : .312rem;
}
.page-contents .btn a , .page-contents button.btn , .other-color-box .btn a{
min-width : 8.312rem;
max-width : 100%;
padding : 1.45rem;
font-size : 1rem;
}
#about .inner{
max-width : none;
}
#about .top-box h2{
margin-bottom : 1.875rem;
font-size : 2.625rem;
font-feature-settings : "palt";
line-height : 1.5;
text-align : left;
letter-spacing : .5px;
}
#about .top-box h3{
margin-bottom : 1.875rem;
font-size : 1.625rem;
line-height : 1.6;
text-align : left;
}
.page-contents .text-box p{
font-size : 1.25rem;
line-height : 1.8;
}
#about .index-benefits-box{
padding : 0 1rem;
margin-bottom : 4rem;
background : none;
}
.page-contents .corporate-box .min-txt{
margin-bottom : .937rem;
font-size : 1.875rem;
line-height : 1.6;
text-align : left;
}
.page-contents .corporate-box .min-txt .item1{
font-size : 2.187rem;
}
.page-contents .corporate-box .min-txt .item2{
font-size : 1.375rem;
}
.page-contents .corporate-box .minbox{
margin-top : 1.875rem;
margin-bottom : 1.25rem;
}
.page-contents .text-box .inner80{
margin : 0;
}
#about .text-center{
font-size : 1.75rem;
font-weight : 700;
text-align : center;
}
.page-contents article.box{
margin-bottom : 3.125rem;
}
#about .voice-select-box{
margin : 3.125remx 0;
}
.line-box{
padding-left : 0;
padding-right : 0;
}
.page-contents{
width : auto;
max-width : none;
padding-left : 0;
padding-right : 0;
margin : 0 auto 5rem;
}
#about{
max-width : none;
}
.page-contents .box-title::after ,
.voice-select-box h3::after{
width : 95%;
}
.index-benefits-box h2{
max-width : none;
margin-bottom : 2rem;
font-size : 2rem;
}
.page-contents .line-box .border-box{
margin-bottom : 3.125rem;
border : 1px solid rgb( 182 0 20 );
border-left : none;
border-right : none;
}
.page-contents .line-box .border-box li{
padding : 3.125rem 0;
}
.page-contents .line-box .border-box .title{
box-sizing : border-box;
justify-content : space-between;
width : auto;
padding-left : 1rem;
padding-right : 1rem;
}
.page-contents .line-box .border-box .icon{
width : 2.312rem;
height : 2.312rem;
margin-right : .625rem;
font-size : 1.125rem;
line-height : 2.425rem;
}
.page-contents .line-box .border-box .title p{
width : calc( 100% - 3rem );
max-width : none;
font-size : 1.375rem;
}
.page-contents .line-box .border-box .item{
width : auto;
max-width : none;
margin : .937rem 6.875rem 0;
}
.page-contents .line-box .border-box li:first-child::after{
top : 85%;
left : auto;
right : -1.5rem;
z-index : 10;
width : 6.375rem;
height : 8.437rem;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
#about .tabs-box h4{
font-size : 1.625rem;
}
#about .tabs-box li{
height : auto;
padding-top : 35%;
}
#about .tabs-box li figure{
position : absolute;
background-size : cover;
}
.service-notebox{
box-sizing : border-box;
width : 100%;
max-width : none;
padding-left : 1rem;
padding-right : 1rem;
margin : 0 auto 6.75rem;
}
.service-notebox h3{
margin-bottom : .75rem;
font-size : 1.187rem;
font-weight : 700;
}
.service-notebox p{
font-size : 1rem;
line-height : 1.6;
}
#service .service-box .box:first-of-type{
display : none;
}
.service-box{
height : auto;
padding : 3rem 0;
margin-bottom : 6rem;
}
#service{
max-width : none;
}
#sitemap{
box-sizing : border-box;
padding-left : 3rem;
padding-right : 3rem;
}
#sitemap .box:not( :last-of-type ) h2{
margin-left : ;
}
#sitemap h2 a{
font-size : 1.5rem;
}
#sitemap .box:not( :last-of-type ){
margin-bottom : 1.875rem;
}
#sitemap li{
width : auto;
font-size : 1rem;
line-height : 1.6;
}
#sitemap ul{
display : block;
margin-top : 1.25rem;
}
#sitemap li:not( :last-child ){
margin-bottom : 1rem;
}
#terms{
padding-left : 1rem;
padding-right : 1rem;
}
#terms .top-box{
margin-bottom : 1.875rem;
}
#terms h3{
margin-bottom : .75rem;
font-size : 1.5rem;
}
#terms li{
font-size : 1.187rem;
line-height : 1.6;
}
#terms ul + p , #terms ul{
margin-top : 2.187rem;
}
#adviser .introduction-box .inbox .cap{
width : 100%;
max-width : 100%;
margin-bottom : 1.5rem;
}
#adviser .introduction-box .inbox dl{
width : 100%;
max-width : none;
}
#adviser .introduction-box .inbox dt{
padding-bottom : .75rem;
margin-bottom : .75rem;
margin-left : auto;
margin-right : auto;
font-size : 1.5rem;
font-weight : 700;
color : rgb( 182 0 20 );
text-align : center;
border-bottom : 1px solid rgb( 182 0 20 );
}
#adviser .introduction-box .inbox dd{
font-size : 1.25rem;
}
#adviser .introduction-box .inbox{
margin-bottom : 3rem;
}
#adviser .introduction-box h3{
margin-bottom : 4rem;
}
#adviser .introduction-box .text-center{
font-size : 1.5rem;
}
#adviser .introduction-box{
margin-bottom : 6rem;
}
#adviser .support-box .inbox .cap{
max-width : 50%;
margin-left : auto;
margin-right : auto;
}
#adviser{
max-width : none;
}
#adviser .inner{
max-width : none;
}
#adviser .other-box .inbox{
width : auto;
max-width : none;
margin : 0 1.25rem 1.25rem;
}
.page-contents .text-box .list-box li::before{
position : absolute;
top : .625rem;
left : -.937rem;
display : block;
width : 10px;
height : 10px;
content : "";
background : rgb( 182 0 20 );
border-radius : 50%;
}
.page-contents .text-box .list-box li{
margin-bottom : .937rem;
line-height : 1.6;
}
.page-contents .text-box .list-box li{
position : relative;
margin-left : 15px;
font-size : 1.25rem;
}
#adviser .other-box{
margin-bottom : 3.125rem;
}
#adviser .other-box .itembox p{
font-size : 1.6rem;
}
.question-box h3{
padding : 1.25rem 0;
font-size : 1.875rem;
}
.question-box ul{
margin-bottom : 1.562rem;
}
.question-box li{
align-items : flex-start;
padding : 1.562rem;
}
.question-box li .font_sans{
position : relative;
margin-right : .937rem;
font-size : 1.875rem;
font-weight : 700;
color : rgb( 182 0 20 );
}
.question-box li .txt{
width : calc( 100% - 3rem );
font-size : 1.187rem;
}
.other-link-box{
width : auto;
max-width : none;
padding-left : 1rem;
padding-right : 1rem;
margin : 0 auto 8rem;
}
.other-link-box ul{
justify-content : space-between;
}
.other-link-box li{
width : 48.5%;
height : 4.875rem;
line-height : 4.875rem;
}
.other-link-box li:not( :nth-child( 3n ) ){
margin-right : 0;
}
.category-voice .other-link-box li:nth-child( 1 ){
margin-right : 2%;
}
.other-link-box li:nth-child( -n + 3 ){
margin-bottom : 1.25rem;
}
#adviser .special-box dt .item-txt{
width : 5.312rem;
height : 5.312rem;
}
#adviser .special-box dt .item-txt .item{
font-size : .875rem;
}
#adviser .special-box dt .txt{
font-size : 1.5rem;
}
#adviser .special-box dt{
padding-bottom : .875rem;
margin-bottom : 2.525rem;
}
#adviser .special-box dd p{
font-size : 1.25rem;
}
#adviser .special-box dd{
font-size : 1.25rem;
}
#adviser .special-box{
margin-bottom : 6rem;
}
#adviser .special-box dd img{
float : right;
width : 8.687rem;
margin : 0 0 0 1.25rem;
}
#night .color-box h3{
width : auto;
height : 3.25rem;
margin : 0 auto 1.25rem;
font-size : 1.375rem;
line-height : 3.437rem;
}
#night .color-box header p{
text-align : left;
}
.page-contents .gallerys-box li{
max-width : 32%;
padding-top : 32%;
}
.page-contents .gallerys-box ul{
margin-bottom : 2.125rem;
}
#night .color-box header .item{
font-size : 2.437rem;
}
#night .night-box .inbox{
padding : 1rem;
}
#night .color-box{
padding : 0 0 3rem;
margin : 6.25rem 0 4rem;
}
.page-contents .gallerys-box li{
margin-bottom : 1rem ! important;
}
#night .icon-title .icon{
width : 2.812rem;
height : 3.5rem;
}
.page-contents .icon-title{
align-items : center;
justify-content : flex-start;
text-align : left;
}
#night .list-box{
width : auto;
padding : 0;
margin : auto;
}
#night .night-box{
margin : 0 auto 2.25rem;
}
#night .list-item-box{
box-sizing : border-box;
width : auto;
padding : 0;
margin : auto;
}
#night .list-item-box h4{
margin-bottom : .312rem;
margin-left : 20px;
font-size : 1.312rem;
}
#night .list-item-box h4::before{
top : .125rem;
left : -15px;
width : 10px;
height : 10px;
}
#night .list-item-box li:not( :last-of-type ){
margin-bottom : 1.562rem;
}
#night .list-item-box dt ,
#night .list-item-box dd{
font-size : 1.187rem;
}
#night .list-item-box dl{
padding : 1.25rem 0;
border-bottom : 1px solid rgb( 191 191 191 );
}
#night .list-item-box dl:first-of-type{
padding : 0 0 1.25rem;
}
#cafe .icon-title .icon{
width : 2.312rem;
height : 2.312rem;
margin-right : 15px;
font-size : 1.125rem;
line-height : 2.312rem;
color : white;
text-align : center;
}
#cafe .inbox{
margin-bottom : 3.75rem;
}
#cafe .icon-title p{
width : calc( 100% - 4rem );
font-size : 1.5rem;
font-weight : 700;
line-height : 1.5;
}
#cafe .icon-title{
margin-bottom : .937rem;
}
#cafe .inbox .item{
bottom : -80px;
right : -50px;
width : 8rem;
height : 8rem;
}
#cafe .inbox .item .item-txt{
font-size : 1.2rem;
}
#cafe .time-box .txt{
margin-bottom : 5px;
font-size : .937rem;
}
#cafe .box iframe{
width : 100%;
height : 15.625rem;
}
#cafe .access-box ul li{
font-size : 1.187rem;
line-height : 1.6;
}
#cafe{
max-width : none;
}
#cafe .inner{
max-width : none;
}
#house .color-box ,
#cafe .color-box{
padding : 3.125rem 0;
margin : 3.125rem 0;
}
#house{
max-width : none;
margin-bottom : 6.25rem;
}
#house .inner{
max-width : none;
}
#house .slidebox h3{
width : 25.25rem;
height : 3.25rem;
margin : 0 auto 20px;
font-size : 1.375rem;
line-height : 3.437rem;
}
#house .slidebox p{
padding-left : 1rem;
padding-right : 1rem;
font-size : 1rem;
text-align : left;
}
#house .slidebox .inner{
padding-left : 0;
padding-right : 0;
}
#house .slidebox .inbox{
padding : 12rem 0 20px;
}
#house .slidebox header{
top : 2rem;
}
#house #house-banner .text{
font-size : 1.187rem;
}
#ticket .top-box ,
#house .slidebox{
margin-bottom : 3.75rem;
}
#ticket .top-box h3{
margin-bottom : 1.562rem;
font-size : 2.125rem;
}
#ticket .top-box .text{
text-align : left;
}
#ticket .top-box .text .txt{
font-size : 1.625rem;
}
#ticket .top-box .item-txt{
font-size : .75rem;
line-height : 1.4;
text-align : left;
}
#ticket{
box-sizing : border-box;
padding-left : 1rem ! important;
padding-right : 1rem ! important;
}
#ticket .color-box{
padding : 0 1.25rem;
}
#ticket .color-box li{
padding : 1.25rem 0;
}
#ticket .color-box .item{
width : 1.562rem;
height : 1.562rem;
margin-right : 15px;
font-size : .75rem;
line-height : 1.662rem;
}
#ticket .color-box .item-txt{
width : calc( 100% - 4rem );
}
#ticket .color-box .txt{
font-size : 1.875rem;
}
#ticket .box-color-txt{
height : 2.875rem;
margin-bottom : 2.187rem;
font-size : 1.312rem;
line-height : 3.125rem;
}
#ticket .last-box h3{
padding : 0 2rem;
text-align : left;
}
#ticket .last-box h3 .minicon{
width : 4.5rem;
}
#ticket .last-box h3 .txt{
width : calc( 100% - 5rem );
line-height : 1.5;
}
#ticket .last-box{
margin-bottom : 3.75rem;
}
.voice-select-box h3{
margin-bottom : 4.5rem;
font-size : 1.875rem;
}
#contact ,
#regulation ,
#policy ,
#message ,
#system{
padding-left : 1rem;
padding-right : 1rem;
}
.page-contents .flow-box{
padding : 1rem;
margin-bottom : 3rem;
}
.page-contents .flow-box .text-box{
padding : 2rem;
}
.page-contents .flow-box .border-box .icon{
width : 2.312rem;
height : 2.312rem;
margin-right : .625rem;
font-size : 1.125rem;
line-height : 2.425rem;
}
.page-contents .flow-box .border-box li .cap{
margin-bottom : 1.5rem;
}
.page-contents .flow-box .border-box li:not( :last-child ){
padding-bottom : 2rem;
margin-bottom : 1rem;
}
.page-contents .flow-box .border-box li:first-child{
padding-bottom : 3rem;
}
.page-contents .flow-box .border-box .title{
margin-bottom : 1rem;
}
.page-contents .flow-box .border-box .title p{
width : calc( 100% - 3rem );
max-width : none;
font-size : 1.375rem;
}
.page-contents .flow-box .border-box .item{
width : auto;
max-width : none;
margin : .937rem 6.875rem 0;
}
.page-contents .flow-box .text-box p{
margin-bottom : 1rem;
font-size : 1.25rem;
}
.page-contents .flow-box .text-box p .item-color.font-w{
font-size : 2.5rem;
}
.page-contents .flow-box article.box{
margin-bottom : 0;
}
#guide .item-box .inbox:last-of-type h3{
font-size : 1.675rem;
}
#guide{
margin-bottom : auto;
}
#guide .color-box .inbox{
min-width : 100%;
}
#guide .color-box br{
display : none;
}
#contact , #policy , #regulation , #terms , #sitemap , #contact , #thanks , #news{
margin-bottom : 10rem;
}
#thanks .btn{
margin-top : 3rem;
}
.page-contents .number-list ol{
margin-left : 1rem;
}
.page-contents .box-title .text{
font-size : 1.875rem;
}
#system .box-title .text{
margin-top : 1.875rem;
}
#system .border-title , #guide .border-title{
padding-left : .937rem;
margin-bottom : 1.562rem;
font-size : 1.312rem;
border-left : .25rem solid rgb( 182 0 20 );
}
#system .item-list{
padding : 1.875rem;
margin-top : 1.25rem;
margin-bottom : 1.25rem;
}
#system .number-list p{
width : calc( 100% - 3rem );
margin-bottom : 0;
font-weight : 700;
}
#system .number-list li{
align-items : flex-start;
justify-content : flex-start;
margin-left : 0;
}
#system .number-list li .icon{
width : 1.562rem;
height : 1.562rem;
margin-right : 10px;
font-size : 1rem;
line-height : 1.662rem;
}
.page-contents .box-title .item-arrow{
width : 1.562rem;
vertical-align : -.312rem;
}
#message .box-title{
font-size : 1.675rem;
text-align : left;
}
#message .item-list{
box-sizing : border-box;
padding : 1.875rem;
margin-top : 1.25rem;
margin-left : 0;
margin-right : 0;
background : rgb( 240 236 236 );
}
.page-contents .text-box p:not( :last-of-type ){
margin-bottom : 1.25rem;
}
#policy .number-list{
padding : 1.875rem;
margin : 2.125rem 0;
}
#policy .number-list li{
position : relative;
margin-left : 1.25rem;
font-size : 1.287rem;
line-height : 1.6;
}
#policy .number-list li:not( :last-child ){
margin-bottom : 1.875rem;
}
#policy .address-box h3 ,
#policy .address-box li{
font-size : 1.187rem;
line-height : 1.4em;
}
#policy .address-box h3 ,
.page-contents .address-box li:not( :last-child ){
margin-bottom : .75rem;
}
#regulation .top-box li{
font-size : 1.187rem;
line-height : 1.6;
}
#regulation h2{
margin-bottom : 1.275rem;
font-size : 1.5rem;
}
.page-contents .number-list li{
margin-left : 1.25rem;
font-size : 1.187rem;
line-height : 1.6;
}
.page-contents .number-list li p{
margin-top : 6px;
font-size : 13px;
}
.page-contents .number-list li:not( :last-child ){
margin-bottom : 2.5rem;
}
#company dl{
padding : 0 1rem;
}
#company dt{
width : 8.312rem;
max-width : none;
}
#company dd{
width : auto;
max-width : 100%;
}
#company dl:last-of-type{
margin-bottom : 100px;
}
#company dt ,
#company dd{
font-size : 1.125rem;
line-height : 1.8;
} #company dl.wrap-box{
display : block;
}
#company dl:not( :last-of-type ){
margin-bottom : 1.25rem;
}
#company dl:last-of-type{
margin-bottom : 3.75rem;
}
#contact .top-box{
margin-bottom : 3.125rem;
}
#contact .text-center{
margin-bottom : 3.125rem;
}
#contact .item-table tr{
margin-bottom : 2rem;
}
#contact .item-table tr ,
#contact .item-table th ,
#contact .item-table td{
display : block;
}
#contact .item-table td{
width : auto;
}
#contact .item-table th{
width : auto;
margin-bottom : 1.25rem;
}
#contact .item-table th ,
#contact .item-table td{
padding-bottom : 0;
}
#contact.confirm .item-table th , #contact.confirm .item-table td{
padding-bottom : 0;
}
#contact.confirm .item-table th .txt , #contact.confirm .item-table td{
font-size : 1.25rem;
}
#contact.page-contents .itembtn button.btn.btn-gray{
margin-bottom : 20px;
}
.page-header{
display : block;
width : auto;
max-width : none;
margin-top : 5.312rem;
margin-bottom : 3rem;
}
.page-header .item-spcap{
width : 100%;
}
.page-header .cap{
display : none;
}
.page-header .inbox{
display : block;
width : 100%;
height : 8.8034rem;
text-align : center;
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/page-header-bg_sp.png);
background-repeat : no-repeat;
background-position : center top;
background-size : 100%;
}
.page-header .inbox .itemcap{
background : none;
}
.page-header .inbox .font_sans{
margin-bottom : 1.162rem;
font-size : 1.562rem;
}
.page-header .inbox h1{
font-size : 1.875rem;
font-weight : 700;
}
#ticket{
max-width : none;
}
#ticket .inner{
width : auto;
}
#gallery .inner{
display : block;
max-width : none;
margin-bottom : 9rem;
}
#gallery .inbox{
width : auto;
max-width : none;
}
#gallery .inbox:not( :last-child ) ,
#gallery .inbox:not( :nth-of-type( n + 3 ) ){
margin-bottom : 3.125rem;
}
.single-gallery .listbox li{
max-width : 49.5%;
padding-top : 49.5%;
margin-bottom : 1%;
}
#slide-auto-box{
width : auto;
height : auto;
margin-bottom : 2rem;
}
#gallery .slick-list , .single-gallery .slick-list , #slide-auto-box .cap figure{
height : 100%;
min-height : 263.5px;
}
.single-gallery .listbox li{
margin-right : 1%;
}
.single-gallery .listbox li:nth-child( 2n ){
margin-right : 0;
}
#voice .description-txt{
margin-bottom : 2.5rem;
font-size : 1.125rem;
text-align : left;
}
.category-voice , #voice{
max-width : none;
padding-left : 1rem;
padding-right : 1rem;
}
.voice-box .inbox li{
width : 48.5%;
max-width : none;
}
.voice-box .inbox li:not( :nth-child( 3n ) ){
margin-right : 0;
}
.voice-box ul{
justify-content : space-between;
margin-bottom : 1.875rem;
}
.voice-box .inbox li .cap{
width : 100%;
padding-top : 12rem;
margin-bottom : .875rem;
}
.voice-box .inbox li dt{
margin-bottom : 1rem;
font-size : 1.25rem;
}
.voice-box .inbox li dd .txt{
display : block;
width : 100%;
font-size : 1rem;
}
.single-voice-box .other-link-box li .txt , .category-voice .other-link-box li .txt{
font-size : .75rem;
}
.single-voice-box .other-link-box , .category-voice .other-link-box{
padding-left : 0;
padding-right : 0;
}
.other-color-box{
padding : 3rem 0;
margin-bottom : 3rem;
}
.other-color-box.voice-box .inbox li{
width : 100%;
max-width : none;
margin-bottom : 3rem;
}
.single-voice-box{
padding-left : 1rem;
padding-right : 1rem;
margin-bottom : 2rem;
}
.single-voice-box header .text{
margin-bottom : 1rem;
}
.single-voice-box header .text .txt{
display : block;
margin-bottom : 1rem;
font-size : 1.25rem;
}
.single-story-box .text-box h3{
margin-bottom : 1.5rem;
font-size : 1.5rem;
}
.single-voice-box header .text .txt:not( :last-of-type ){
margin-right : 0;
}
.single-story-box .text-box header h3{
margin : 0 auto 1rem;
color : #000;
text-align : center;
}
.single-story-box .conte-box{
padding : 1.875rem 0;
}
.single-voice-box header .cap{
padding-left : 0;
padding-right : 0;
}
.single-story-box .minbox{
display : block;
padding : 1.25rem;
margin-bottom : 1.875rem;
}
.single-story-box .minbox .cap{
width : 100%;
margin-bottom : 1.25rem;
}
.single-story-box .minbox .data{
width : 100%;
margin-left : 0;
}
.single-story-box .minbox .data dl:not( :last-of-type ){
margin-bottom : .937rem;
}
.single-voice-box .contents-box dt ,
.single-voice-box .contents-box dd{
font-size : 1.25rem;
}
.other-color-box.voice-box .box-title{
margin-bottom : 3.125rem;
font-size : 1.675rem;
}
.single-sns-box li .box .icon{
width : 1.625rem;
}
.single-voice-box header{
margin-bottom : 2.5rem;
}
.single-sns-box li .txt{
margin-left : .75rem;
font-size : .875rem;
color : white;
}
.single-sns-box li{
width : 32%;
max-width : none;
height : 3.125rem;
}
.single-voice-box .contents-box{
width : auto;
max-width : none;
margin : 0 auto 2.5rem;
}
.category-voice .description-txt{
margin-bottom : 2.5rem;
font-size : 1.125rem;
line-height : 1.6;
text-align : left;
}
.category-voice .other-link-box{
max-width : none;
} .category-faq .itembox{
margin : 0 1rem 3rem;
}
.category-faq .itembox .itemtxt{
font-size : 1.5rem;
}
.page-contents.category-faq .text-box .data p{
font-size : 1.25rem;
}
.page-contents.category-faq .icon-title .icon{
display : block;
margin : 0 auto 10px;
text-align : center;
}
.page-contents.category-faq .icon-title{
text-align : center;
} #news.page-contents .box-title{
box-sizing : border-box;
padding-left : 1rem;
padding-right : 1rem;
text-align : left;
}
.single-contents-box .contents-box{
padding-left : 1rem;
padding-right : 1rem;
}
#news.page-contents .other-box .box-title{
text-align : center;
}
.single-contents-box .other-box ul{
padding-left : 1rem;
padding-right : 1rem;
margin-bottom : 3rem;
}
#faq ul{
box-sizing : border-box;
padding-left : 1rem;
padding-right : 1rem;
margin-bottom : 3rem;
}
#faq li{
box-sizing : border-box;
max-width : 100%;
} #users p.description-txt{
font-size : 1.25rem;
line-height : 1.8;
}
#users .voice-box .inbox{
width : 100%;
padding : 2rem 1rem;
padding-top : 70px;
padding-bottom : 115px;
margin-bottom : 1rem;
}
.page-contents article.box.story-box{
margin-top : 3rem;
margin-bottom : 10rem;
}
#users .voice-box .inbox:nth-child( n+3 ){
padding-bottom : 115px;
margin-bottom : 1rem;
}
#users .voice-box .inbox h4{
margin-bottom : 2rem;
font-size : 1.5rem;
}
#users .voice-box .inbox li dt{
font-size : 1.4rem;
}
#users .voice-box .inbox .btn{
width : calc( 100% - 2rem );
}
#faq.page-contents ul.wrap-box{
margin-bottom : 0;
}
.story-box{
width : 100%;
}
}
.index-other-contents .itemcap p{
display : none;
} .nolink{
filter : alpha( opacity=30 );
opacity : .3;
}
.nolink a , a.nolink{
pointer-events : none ! important;
}
.index-other-contents .nolink{
filter : alpha( opacity=100 );
opacity : 1;
}
.index-other-contents .nolink img{
filter : alpha( opacity=30 );
opacity : .3;
}
.index-other-contents .nolink .itemcap{
position : relative;
}
.index-other-contents .nolink .itemcap p{
position : absolute;
top : 50%;
left : 50%;
display : inherit;
padding : 0;
margin : 0;
font-size : 36px;
font-weight : 500;
color : rgb( 182 0 20 );
-ms-transform : translate( -50% , -50% );
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
} @media screen and ( max-width : 767px ){
.index-other-contents .nolink .itemcap p{
font-size : 2rem;
text-align : center;
}
} .tourBanner{
text-align : center;
}
.tourBanner a{
display : flex;
align-items : center;
justify-content : space-between;
width : 88%;
max-width : 500px;
height : 60px;
padding : 10px 2%;
margin : 0 auto;
border : solid #b60014 2px;
-webkit-transition : .2s ease-in-out;
-moz-transition : .2s ease-in-out;
-o-transition : .2s ease-in-out;
transition : .2s ease-in-out;
}
.tourBanner a:hover{
opacity : .8;
}
.tourBanner a .logo{
padding-right : 20px;
}
.tourBanner a .btn{
display : flex;
flex : 1;
align-items : center;
justify-content : center;
height : 60px;
font-size : 1.2rem;
font-weight : 700;
line-height : 100%;
color : #fff;
background : #b60014;
}
.tourBanner a .logo img{
width : auto;
max-width : 200px;
max-height : 60px;
}
@media screen and ( max-width : 767px ){
.tourBanner{
margin-bottom : 40px;
}
} .wrap-index-btn{
width : 96%;
max-width : 860px;
margin : 0 auto;
}
.wrap-index-btn .innr{
display : flex;
justify-content : space-between;
}
.wrap-index-btn .innr div{
width : 48%;
}
.wrap-index-btn .innr div span{
font-size : 1rem;
font-weight : 800;
line-height : 160%;
}
.wrap-index-btn .innr div a{
display : block;
padding : 20px 4%;
color : #b60014;
background : url(//jo-katsu.com/release/images/common/icon_right_R.png) no-repeat left 20px center;
background-size : 16px auto;
border : #b60014 solid 2px;
-webkit-transition : .2s ease-in-out;
-moz-transition : .2s ease-in-out;
-o-transition : .2s ease-in-out;
transition : .2s ease-in-out;
}
.wrap-index-btn .innr div a:hover{
opacity : .8;
}
.wrap-index-btn .innr div a span{
display : block;
padding-left : 10%;
}
.wrap-index-btn .innr div.right a{
color : #fff;
background : url(//jo-katsu.com/release/images/common/icon_right.png) no-repeat left 20px center #b60014;
background-size : 16px auto;
}
@media screen and ( max-width : 767px ){
.wrap-index-btn{
margin-top : -20px;
margin-bottom : 40px;
}
.wrap-index-btn .innr div a{
display : block;
padding : 10px 4%;
color : #b60014;
background : url(//jo-katsu.com/release/images/common/icon_right_R.png) no-repeat left 5px center;
background-size : 10px auto;
border : #b60014 solid 2px;
}
.wrap-index-btn .innr div.right a{
color : #fff;
background : url(//jo-katsu.com/release/images/common/icon_right.png) no-repeat left 5px center #b60014;
background-size : 10px auto;
}
#story .voice-box{
padding-left : 1rem;
padding-right : 1rem;
}
} .wp-pagenavi{
margin : 40px auto 100px;
text-align : center;
}
.wp-pagenavi a , .wp-pagenavi span{
padding : 5px 10px ! important ;
margin : 0 5px ! important;
color : #c51b19;
text-decoration : none;
border : 2px solid #c51b19 ! important;
}
.wp-pagenavi a:hover , .wp-pagenavi span.current{
color : #fff ! important;
background : #c51b19 ! important;
}
.caution{
padding : 20px 2%;
margin-bottom : 60px;
color : rgb( 182 0 20 );
border : rgb( 182 0 20 ) solid 2px;
}
.coution ol{}
.coution ol li{
margin-bottom : 10px;
}
.coution ol li:last-child{
margin-bottom : 0;
}
.form2 .form-btn-last{
display : flex;
justify-content : center;
width : 100%;
text-align : center;
}
.form2 .button-submit{
background : none;
border : none;
}
.form2 .button-submit{
padding : 30px;
font-size : 16px;
color : #fff;
cursor : pointer;
background : rgb( 182 0 20 );
border-radius : 5px;
}
.form2 .text-area{
display : block;
padding : 10px 0;
}
.form2 .selectbox{
box-sizing : border-box;
height : 48px;
padding : 10px;
font-size : 15px;
resize : none;
background : rgb( 248 248 248 );
border : 1px solid rgb( 204 204 204 );
border-radius : 4px;
}
.WrapError input{
border : rgb( 182 0 20 ) solid 1px;
}
#contact .item-table .input-txt.WrapError{
border : rgb( 182 0 20 ) solid 1px;
} a.nolink{
　pointer-events : none;
filter : alpha( opacity=50 );
opacity : .5;
}
a.anchor-txt.nolink{
display : table;
color : #fff;
text-align : center;
background-color : rgb( 0 0 0 / .7 );
filter : alpha( opacity=100 );
opacity : 1;
}
a.anchor-txt.nolink span{
display : table-cell;
font-size : 1.8rem;
vertical-align : middle;
}
.other-link-box a.anchor-txt.nolink{
background-color : rgb( 0 0 0 / .5 );
border : none ! important;
}
.other-link-box a.anchor-txt.nolink span{
font-size : 1.6rem;
}
.caution p{
margin : auto;
font-size : 1.5rem;
text-align : center;
}
@media screen and ( max-width : 767px ){
a.anchor-txt.nolink span{
font-size : 2.4rem;
}
.other-link-box a.anchor-txt.nolink span{
font-size : 1.3rem;
}
a.anchor-txt.nolink{
display : block;
}
a.anchor-txt.nolink span{
position : absolute;
top : 45%;
display : block;
width : 100%;
margin : 0 auto;
text-align : center;
}
.index-benefits-box a.anchor-txt.nolink span{
top : 40%;
}
} @media screen and ( max-width : 349px ){
#header-nav .btn{
width : 60px;
}
}   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 : Roboto , "Noto Sans JP" , sans-serif;
font-size : 100%;
font-weight : 400;
line-height : 1;
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;
}
img{
width : 100%;
max-width : 100%;
height : auto;
vertical-align : bottom;
filter : alpha( opacity=100 );
border : none;
opacity : 1;
-webkit-transition : .2s ease-in;
transition : .2s ease-in;
-webkit-backface-visibility : hidden;
backface-visibility : hidden;
}
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{ min-width : 1200px;
letter-spacing : .1em;
} .clearfix{
zoom : 1;
}
.clearfix::after{
display : block;
clear : both;
content : "";
}
@media print{
.clearfix{
overflow : hidden;
}
}
.Tcenter{
text-align : center;
}
html{
height : 100%;
margin : 0 ! important;
}
.inner{
position : relative;
z-index : 98;
box-sizing : border-box;
justify-content : space-between;
width : 100%;
max-width : 1200px; margin-left : auto;
margin-right : auto;
}
.wrap-box{
display : -ms-flexbox;
display : flex;
-ms-flex-wrap : wrap;
flex-wrap : wrap;
justify-content : space-between;
-ms-flex-pack : justify;
}
.anchor-txt{
position : absolute;
top : 0;
left : 0;
z-index : 2;
width : 100%;
height : 100%;
}
img{
width : 100%;
max-width : 100%;
} #header{
position : relative;
position : fixed;
top : 0;
left : 0;
z-index : 300;
width : 100%;
padding-top : 20px;
padding-bottom : 20px;
background : white;
}
#header .inner{
align-items : center;
max-width : 1640px;
padding : 0 20px;
}
#header-logo{
width : 173px;
height : auto;
}
#header-logo img{
height : auto;
}
#header-nav .btn{
display : block;
width : 162px;
}
#header-nav .btn:hover img{
opacity : .6;
}
#nav-item-1{
margin-left : 20px;
}
#panel-btn{
position : relative;
z-index : 101;
width : 45px;
height : 50px;
margin-left : 20px;
cursor : pointer;
background : none;
border : none; outline : none;
}
#panel-btn-icon{
position : absolute;
top : 50%;
left : 50%;
z-index : 11;
display : block;
width : 45px;
height : 5px;
text-align : center; -webkit-transition : .2s;
transition : .2s;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
#panel-btn-icon::before ,
#panel-btn-icon::after{
position : absolute;
top : 50%;
display : block;
width : 45px;
height : 5px;
content : "";
background : rgb( 182 0 20 );
-webkit-transition : .3s;
transition : .3s;
}
#panel-btn-icon::before{
margin-top : -12px;
}
#panel-btn-icon::after{
margin-top : 4px;
}
#panel-btn .close{
background : transparent;
}
#panel-btn .close::before ,
#panel-btn .close::after{
margin-top : 0;
}
#panel-btn .close::before{
-webkit-transform : rotate( -45deg );
transform : rotate( -45deg );
}
#panel-btn .close::after{
-webkit-transform : rotate( -135deg );
transform : rotate( -135deg );
}
.sp-menu{
position : fixed;
top : 0;
right : 0;
z-index : 1002;
display : block;
width : 45px;
}
.sp-menu .txt{
display : block;
text-align : center;
letter-spacing : .1em;
}
#sp-menubox li.item .txt a::after{
position : absolute;
top : 6px;
width : 0;
height : 0; margin-left : 10px;
content : "";
border-color : #fff transparent transparent transparent;
border-style : solid;
border-width : 7px 5px 0 5px;
} #sp-menubox li::before{
position : absolute;
top : 10px;
left : -25px;
width : 15px;
height : 1px;
content : "";
background : white;
}
#sp-menubox .minbox{
display : none;
margin-top : 20px;
margin-left : 30px;
}
#sp-menubox .minbox li a{
font-size : 16px;
}
#sp-menubox .minbox li::before{
top : 9px;
}
#sp-menubox .minbox li:not( :last-child ){
padding-bottom : 15px;
}
#sp-menubox{
position : fixed;
top : 105px;
right : -100%;
z-index : 99;
-webkit-box-sizing : border-box;
box-sizing : border-box;
width : 360px;
height : 100%;
padding : 50px;
overflow-x : hidden;
background : rgb( 186 0 20 );
-webkit-transition : all .4s;
-moz-transition : all .4s;
-ms-transition : all .4s;
-o-transition : all .4s;
transition : all .4s;
}
#sp-menubox ul{
margin-bottom : 25px;
margin-left : 25px;
}
#sp-menubox li{
position : relative;
}
#sp-menubox li:not( :last-child ){
padding-bottom : 20px;
}
#sp-menubox li a{
font-size : 18px;
color : white;
-webkit-transition : all .4s;
-moz-transition : all .4s;
-ms-transition : all .4s;
-o-transition : all .4s;
transition : all .4s;
}
#sp-menubox .text-gallery{
display : block;
width : 100%;
margin : 0 auto 100px;
}
#searchform{
position : relative;
box-sizing : border-box;
width : 100%;
padding : 15px 20px 15px 15px;
margin-bottom : 25px;
background : rgb( 186 0 20 );
border : 1px solid white;
border-radius : 6px;
}
#searchform #s{
width : 90%;
font-size : 16px;
color : white;
background : none;
border : none;
}
#searchform #s::placeholder{
font-size : 14px;
font-weight : 700;
color : #fff;
}
#searchsubmit{
position : absolute;
top : calc( 50% - 19px );
right : 5px;
width : 38px;
height : 38px;
background : none;
border : none;
}
#searchsubmit::before{
position : absolute;
top : calc( 50% - 9px );
left : calc( 50% - 9px );
display : block;
width : 15px;
height : 15px;
content : "";
border-radius : 50%;
box-shadow : 0 0 0 3px #fff;
}
#searchsubmit::after{
position : absolute;
top : calc( 50% + 6px );
left : calc( 50% + 2px );
display : block;
width : 8px;
height : 6px;
content : "";
border-top : solid 3px #fff;
transform : rotate( 45deg );
}
input::placeholder{
color : white ! important;
}
input:-ms-input-placeholder{
color : white ! important;
}
input::-ms-input-placeholder{
color : white ! important;
}
#searchform #s::-webkit-input-placeholder{
font-size : 14px;
font-weight : 700;
color : #fff;
}
#searchform #s::-moz-placeholder{
font-size : 14px;
font-weight : 700;
color : #fff;
}
#searchform #s:-ms-input-placeholder{
font-size : 14px;
font-weight : 700;
color : #fff;
}
#searchform #s::-ms-input-placeholder{
font-size : 14px;
font-weight : 700;
color : #fff;
} #top-banner .cap figure{
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center center;
background-size : cover;
}
#top-banner{
position : relative;
width : 100%;
margin : 105px auto 60px;
}
#top-banner .cap{
position : relative;
padding-top : 4.9926%;
} #footer{
display : flex;
align-items : flex-end;
justify-content : center;
height : 290px;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/footer-bg.png) no-repeat center top;
background-size : 100%;
}
@media screen and ( max-width : 1450px ){
#footer{
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/footer-bg.png) no-repeat center bottom;
background-size : 100%;
}
}
#footer .nav{
align-items : center;
justify-content : center;
width : 100%;
margin : 0 auto 50px;
}
#footer .nav li{
position : relative;
padding-top : 2px;
margin : 0 10px;
font-size : 12px;
}
#footer .nav li:first-child{
padding-top : 0;
font-size : 16px;
}
#footer .nav li:first-child a::after{
position : absolute;
bottom : -8px;
left : 0;
right : 0;
width : 100%;
height : 2px;
margin : auto;
content : "";
background-color : rgb( 182 0 20 );
-webkit-transition : all .3s ease;
transition : all .3s ease;
-webkit-transform : scaleX( 1 );
-ms-transform : scaleX( 1 );
transform : scaleX( 1 );
}
#copy{
display : block;
padding : 20px 0;
margin : 0 auto;
font-size : 12px;
font-style : normal;
text-align : center;
}
#footer-nav{
margin-bottom : 40px;
}
#footer-nav ul{
align-items : center;
}
#footer-nav ul li{
position : relative;
font-size : 15px;
}
#footer-nav ul li .txt{
display : block;
}
#line-banner{
display : block;
width : 100%;
max-width : 407px;
margin : 80px auto;
-webkit-transition : all .3s ease;
transition : all .3s ease;
}
#line-banner:hover img{
opacity : .6;
}
#footer .nav li a::after{
position : absolute;
bottom : -6px;
left : 0;
right : 0;
width : 100%;
height : 2px;
margin : auto;
content : "";
background-color : rgb( 182 0 20 );
-webkit-transition : all .3s ease;
transition : all .3s ease;
-webkit-transform : scaleX( 0 );
-ms-transform : scaleX( 0 );
transform : scaleX( 0 );
}
#footer .nav li:not( .item-txt ) a:hover::after{
-webkit-transform : scaleX( 1 );
-ms-transform : scaleX( 1 );
transform : scaleX( 1 );
}
#footer-nav li:not( .item-txt ) a::after{
position : absolute;
bottom : -6px;
left : 0;
right : 0;
width : 100%;
height : 2px;
margin : auto;
content : "";
background-color : rgb( 182 0 20 );
-webkit-transition : all .3s ease;
transition : all .3s ease;
-webkit-transform : scaleX( 0 );
-ms-transform : scaleX( 0 );
transform : scaleX( 0 );
}
#footer-nav .minbox a::after{
position : absolute;
bottom : 6px ! important;
content : "";
}
#footer-nav li:not( .item-txt ):hover a::after{
-webkit-transform : scaleX( 1 );
-ms-transform : scaleX( 1 );
transform : scaleX( 1 );
}
#footer-nav ul li.item-txt .txt{
position : relative;
z-index : 11;
text-decoration : none;
vertical-align : middle;
}
#footer-nav ul li.item-txt .txt::before{
position : absolute;
top : 0;
right : -16px;
width : 8px;
height : 8px;
vertical-align : middle;
content : "";
border-top : 1px solid rgb( 40 40 40 );
border-right : 1px solid rgb( 40 40 40 );
-webkit-transform : rotate( 135deg );
transform : rotate( 135deg );
}
#footer-nav ul li.item-txt .minbox{
position : absolute;
top : 14px;
left : -20px;
z-index : 100;
display : none;
width : auto;
padding : 20px 20px 10px;
background : rgb( 255 255 255 / .8 );
}
#footer-nav ul li.item-txt .minbox li{
font-size : 12px;
line-height : 1.5;
}
#footer-nav ul li.item-txt .minbox li a{
white-space : nowrap;
}
#footer-nav ul li.item-txt .minbox li{
padding-bottom : 10px;
} .index-news-box h2{
margin-bottom : 80px;
font-size : 60px;
font-weight : 500;
color : rgb( 182 0 20 );
text-align : center;
letter-spacing : .1em;
}
.index-news-box .news-list-box{
position : relative;
width : 100%;
max-width : 564px;
padding-left : 50px;
padding-right : 50px;
margin : auto;
}
.index-news-box .news-list-box::before ,
.index-news-box .news-list-box::after{
position : absolute;
top : -50px;
left : 0;
right : 0;
width : 100%;
height : 1px;
margin : 0 auto;
text-align : center;
content : "";
background-image : -webkit-linear-gradient( left , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-image : linear-gradient( to right , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-repeat : no-repeat;
background-position : center;
}
.index-news-box .news-list-box::before{
top : auto;
bottom : -50px;
}
.news-list-box li{
position : relative;
-webkit-transition : .5s;
transition : .5s;
}
.news-list-box li:not( :last-child ){
margin-bottom : 40px;
}
.news-list-box dt{
align-items : center;
justify-content : flex-start;
margin-bottom : 12px;
}
.news-list-box .item{
padding : 2px 6px 5px 4px;
margin-left : 10px;
color : white;
background : rgb( 182 0 20 );
border : 1px solid rgb( 182 0 20 );
-webkit-transition : .5s;
transition : .5s;
}
.news-list-box li dd{
-webkit-transition : .5s;
transition : .5s;
}
.index-news-box{
margin : 100px 0 190px;
}
.news-list-box li:hover .item{
color : rgb( 182 0 20 );
background : white;
}
.news-list-box li:hover dd{
color : rgb( 182 0 20 );
text-decoration : underline;
} .sns-box{
padding : 28px 0;
background : rgb( 240 236 236 );
}
.sns-box .inner{
transform : translateY( -78px );
}
.sns-box .text{
margin-bottom : 60px;
text-align : center;
}
.sns-box h2{
width : 100%;
max-width : 306px;
padding : 18px 0 50px;
margin : 0 auto 20px;
font-size : 20px;
font-weight : 700;
line-height : 1.6;
color : rgb( 182 0 20 );
text-align : center;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/fukidashi.png) no-repeat center top;
background-size : 100%;
}
.sns-box ul{
align-items : center;
justify-content : center;
}
.sns-box li{
position : relative;
}
.sns-box li:hover img{
opacity : .6;
}
#item-facebook{
margin : 0 70px;
}
#item-instagram .cap{
width : 70px;
}
#item-facebook .cap{
width : 40px;
}
#item-twitter .cap{
width : 72px;
} .index-other-contents .box{
position : relative;
margin : auto;
}
.index-other-contents .box:first-of-type{
margin : 0 auto 120px;
}
.index-other-contents .story-box::after{
position : absolute;
top : 50%;
left : 0;
z-index : 2;
display : block;
width : 100%;
height : 252px;
margin : auto;
content : "";
background-color : #fff;
background-image : radial-gradient( #b60002 10% , transparent 10% ) , radial-gradient( #b60002 10% , transparent 10% );
background-position : 0 0 , 7px 7px;
background-size : 14px 14px;
}
.index-other-contents .inbox{ position : relative;
z-index : 10;
width : 100%;
max-width : 860px;
margin : auto;
}
.index-other-contents h2{
margin-bottom : 20px;
font-size : 60px;
font-weight : 500;
line-height : 1;
color : rgb( 182 0 20 );
text-align : center;
letter-spacing : .1em;
}
.index-other-contents .itemcap .txt{
position : absolute;
top : 62%;
left : 50%;
z-index : 2;
text-align : center;
-webkit-transition : .2s;
transition : .2s;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
.index-other-contents .text{
margin : 5px 0 30px;
text-align : center;
}
.index-other-contents .itemcap .cap{
position : relative;
}
.index-other-contents .story-box{
width : 100%;
}
.index-other-contents .story-box .itemcap{
position : relative;
padding-top : 25px;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/index/service-bg-title.png) repeat-x left top white;
background-size : 42px;
border-bottom : 25px solid rgb( 182 0 20 );
-webkit-transition : .2s;
transition : .2s;
}
.index-other-contents .itemcap:hover img{
opacity : .6;
}
.index-other-contents .box:last-of-type .itemcap{
margin-bottom : 30px;
}  .service-box{
height : 638px;
margin-bottom : 70px;
background : rgb( 182 0 20 );
}
.service-box h2{
margin-bottom : 30px;
font-size : 60px;
font-weight : 500;
color : rgb( 182 0 20 );
text-align : center;
letter-spacing : .1em;
}
.service-box .text{
margin-bottom : 50px;
text-align : center;
}
.service-box .box .icon{
position : absolute;
top : 0;
left : 0;
z-index : 2;
width : 50px;
}
.service-box .inner{
max-width : 960px;
transform : translateY( -250px );
}
.service-box .box:hover .cap{
transform : scale( 1.1 );
}
.service-box .box:nth-child( -n + 3 ){
margin-bottom : 20px;
}
.service-box .box{
position : relative;
width : 100%;
max-width : 32%;
padding-top : 31.915%;
overflow : hidden;
}
.service-box .cap{
position : absolute;
top : 0;
left : 0;
z-index : 1;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center center;
background-size : 100%;
-webkit-transition : .5s;
transition : .5s;
}
.service-box .box .title{
position : absolute;
top : 50%;
left : 50%;
z-index : 2;
width : 100%;
text-align : center;
-webkit-transition : .2s;
transition : .2s;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
.service-box .box .title .font_sans ,
.service-box .box h3{
color : white;
}
.service-box .box h3{
font-size : 18px;
font-weight : 600;
line-height : 1.6;
}
.service-box .box .font_sans{
display : inline-block;
padding-bottom : 10px;
padding-left : 5px;
padding-right : 5px;
margin-bottom : 8px;
font-size : 16px;
font-weight : 500;
border-bottom : 1px solid white;
} .index-benefits-box{
position : relative; height : 720px;
padding-top : 52px;
margin-bottom : 300px;
overflow : hidden;
}
.index-benefits-box::before ,
.index-benefits-box::after{
position : absolute;
top : 0;
bottom : 0;
left : 0;
margin : auto;
vertical-align : middle;
content : "";
}
.index-benefits-box::before{
left : 0;
width : 100%;
height : 208px;
background : rgb( 182 0 20 );
}
.index-benefits-box::after{
left : auto;
right : -100px;
width : 250px;
height : 250px;
border-top : 150px solid rgb( 182 0 20 );
border-right : 150px solid rgb( 182 0 20 );
-webkit-transform : rotate( 45deg );
transform : rotate( 45deg );
}
.index-benefits-box h3 .item{
font-weight : 700;
color : rgb( 182 0 20 );
text-decoration : underline;
}
.index-benefits-box h3{
margin-bottom : 120px;
font-size : 19px;
font-weight : 700;
color : rgb( 182 0 20 );
text-align : center;
letter-spacing : .1em;
}
.index-benefits-box h2{
position : relative;
width : 100%;
max-width : 435px;
margin : 0 auto 50px;
font-size : 36px;
font-weight : 700;
color : rgb( 182 0 20 );
text-align : center;
}
.index-benefits-box h2::after{
position : absolute;
bottom : -10px;
left : 0;
right : 0;
width : 100%;
height : 1px;
margin : 0 auto;
text-align : center;
content : "";
background-image : -webkit-linear-gradient( left , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-image : linear-gradient( to right , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-repeat : no-repeat;
background-position : center;
}
.index-benefits-box .pc-only .box{
max-width : 880px;
}
.index-benefits-box li{
width : 50%;
}
.index-benefits-box li:nth-child( 5 ){
border-bottom : none;
}
.index-benefits-box .pc-only ul{
position : relative;
}
.index-benefits-box .pc-only ul::before{
position : absolute;
left : 50%;
width : 1px;
height : 100%;
content : "";
background : rgb( 182 0 20 );
transform : translate( -50% , 0 );
}
.index-benefits-box .pc-only li:first-child .wrap-box{
align-items : center;
justify-content : center;
height : 100%;
}
.index-benefits-box .pc-only li:first-child{
padding-top : 10px;
padding-bottom : 20px;
}
.index-benefits-box .pc-only h2{
margin-bottom : 0;
font-size : 32px;
line-height : 1.5;
}
.index-benefits-box h2::after{
display : none;
width : auto;
}
.index-benefits-box .btn{
display : inline-block;
}
.index-benefits-box .btn .txt{
position : relative;
display : block;
padding-right : 20px;
font-size : 15px;
color : #3e3a39;
text-decoration : none;
vertical-align : middle;
-webkit-transition : .5s;
transition : .5s;
}
.index-benefits-box .btn .txt::before ,
.index-benefits-box .btn .txt::after{
position : absolute;
top : 0;
bottom : 0;
right : 0;
margin : auto;
vertical-align : middle;
content : "";
-webkit-transition : .5s;
transition : .5s;
}
.index-benefits-box .btn .txt::before{
width : 12px;
height : 12px;
background : rgb( 182 0 20 );
-webkit-border-radius : 50%;
border-radius : 50%;
}
.index-benefits-box .btn .txt::after{
right : -2px;
box-sizing : border-box;
width : 5px;
height : 5px;
border : 5px solid transparent;
border-left : 5px solid #fff;
}
.index-benefits-box .box{
max-width : 560px;
padding : 10px;
background : white;
border : 1px solid rgb( 182 0 20 );
}
.index-benefits-box li{
position : relative;
padding-bottom : 30px;
border-bottom : 1px solid rgb( 182 0 20 );
-webkit-transition : .5s;
transition : .5s;
}
.index-benefits-box li:last-child{
border-bottom : none;
}
.index-benefits-box li{
padding-top : 30px;
}
.index-benefits-box dl{
align-items : center;
justify-content : center;
}
.index-benefits-box dt{
width : 80px;
margin-right : 20px;
}
.index-benefits-box dd{
width : 100%;
max-width : 275px;
-webkit-transition : .5s;
transition : .5s;
}
.index-benefits-box .text{
margin-bottom : 8px;
font-size : 22px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
-webkit-transition : .5s;
transition : .5s;
}
.index-benefits-box li:not( :first-child ):hover{
background : rgb( 182 0 20 );
}
.index-benefits-box li:not( :first-child ):hover .txt ,
.index-benefits-box li:not( :first-child ):hover .text{
color : white;
}
.index-benefits-box li:not( :first-child ):hover .txt::before{
background : white;
}
.index-benefits-box li:not( :first-child ):hover .txt::after{
border-left : 5px solid rgb( 182 0 20 );
}
.sp-only{
display : none;
} .page-contents .text-box .list-box li{
margin-bottom : 15px;
line-height : 1.6;
}
.page-contents .text-box .list-box li{
position : relative;
margin-left : 15px;
font-size : 19px;
}
.page-contents .text-box .list-box li::before{
position : absolute;
top : 10px;
left : -15px;
display : block;
width : 10px;
height : 10px;
content : "";
background : rgb( 182 0 20 );
border-radius : 50%;
}
#guide .color-box{
padding : 0 20px;
background-color : rgb( 250 236 226 / .9 );
background-image : radial-gradient( rgb( 216 164 163 ) 10% , transparent 10% ) , radial-gradient( rgb( 216 164 163 ) 10% , transparent 10% );
background-position : 0 0 , 7px 7px;
background-size : 14px 14px;
border : 1px solid rgb( 182 0 20 );
}
#guide .color-box .inbox{
min-width : 500px;
}
#guide .color-box li{
padding : 30px 0;
border-bottom : 1px solid rgb( 182 0 20 );
}
#guide .color-box li:last-child{
border-bottom : none;
}
#guide .color-box .item{
width : 30px;
height : 29px;
}
#guide .color-box li{
justify-content : center;
}
#guide .color-box p.item-txt{
margin-bottom : 6px;
}
#guide .color-box p.item-txt img{
vertical-align : sub;
}
#guide .color-box p:not( .item-txt ){
font-size : 14px;
}
#guide .item-box .top-text{
display : inline;
padding : 0 2px 4px;
font-size : 28px;
font-weight : 700;
line-height : 2.2;
color : rgb( 182 0 20 );
letter-spacing : .1em;
border-bottom : 1px dotted rgb( 182 0 20 );
}
#guide .item-box h3.wrap-box{
align-items : center;
justify-content : center;
width : 100%;
padding : 15px 0;
margin-bottom : 30px;
background : rgb( 182 0 20 );
}
#guide .item-box .inbox{
margin-top : 30px;
}
#guide .item-box h3.wrap-box .icon{
width : 54px;
}
#guide .item-box h3.wrap-box .txt{
font-size : 30px;
font-weight : 700;
color : white;
}
#guide .item-box .inbox:last-of-type{ }
#guide .item-box .inbox:last-of-type h3{
width : 100%;
padding : 15px 0;
margin-bottom : 20px;
font-size : 21px;
color : white;
text-align : center;
background : rgb( 182 0 20 );
border-radius : 6px;
} #message .item-list{
box-sizing : border-box;
padding : 30px;
margin-top : 20px;
margin-left : 50px;
margin-right : 50px;
background : rgb( 240 236 236 );
}
#message .item-list li:not( :last-child ){
margin-bottom : 25px;
}
#message .item-list h4{
justify-content : flex-start;
margin-bottom : 12px;
}
#message .item-list h4 span{
font-size : 21px;
}
#message .item-list h4 .icon{
width : 25px;
height : 25px;
margin-right : 10px;
font-size : 16px;
line-height : 22px;
color : white;
text-align : center;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size : 100%;
}
#message .arrow-text{
width : 100%;
max-width : 362px;
margin-bottom : 20px;
}
#message .item-list li h4 .item{
margin-left : 10px;
}
#message .item-list li:nth-child( 1 ) h4 .item ,
#message .item-list li:nth-child( 2 ) h4 .item{
width : 20px;
}
#message .item-list li:nth-child( 3 ) h4 .item{
width : 26px;
} #topicpath{
box-sizing : border-box;
width : 100%;
max-width : 1640px;
padding : 0 20px;
margin : 0 auto 50px;
text-align : center;
}
#topicpath ul{
justify-content : flex-start;
}
#company dd a ,
#topicpath ul a{
color : rgb( 182 0 20 );
}
#company dd a:hover ,
#topicpath ul a:hover{
text-decoration : underline;
}
#topicpath ul li{
font-size : 12px;
}
#topicpath ul li:not( :last-child ){
position : relative;
margin-right : 22px;
}
#topicpath ul li:not( :last-child )::after{
position : absolute;
top : 2px;
right : -12px;
display : block;
width : 6px;
height : 6px;
content : "";
border-top : 1px solid rgb( 40 40 40 );
border-right : 1px solid rgb( 40 40 40 );
-webkit-transform : rotate( 45deg );
transform : rotate( 45deg );
} .page-header{
display : table;
width : 100%;
max-width : 1600px;
margin : 104.5px auto 20px;
table-layout : fixed;
}
.page-header .cap ,
.page-header .inbox{
position : relative;
display : table-cell;
vertical-align : middle;
}
.page-header .cap{
padding-top : 33%;
background-repeat : no-repeat;
background-position : center top;
background-size : cover;
}
.page-header .inbox{
width : 33%;
text-align : center;
background-size : 100%;
}
.page-header .inbox .itemcap{
position : absolute;
top : 0;
left : 0;
z-index : 2;
width : 100%;
height : 100%;
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/page-header-bg.png);
background-repeat : no-repeat;
background-position : center top;
background-size : cover;
}
.page-header .inbox .box{
position : absolute;
top : 50%;
left : 50%;
z-index : 10;
width : 100%;
color : white;
text-align : center;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
.page-header .inbox .font_sans{
margin-bottom : 25px;
font-size : 25px;
letter-spacing : .1em;
}
.page-header .inbox h1{
font-size : 30px;
font-weight : 700;
line-height : 1.5;
}
#news-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/news_pc.png);
}
#company-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/company_pc.png);
}
#message-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/message_pc.png);
}
#system-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/system_pc.png);
}
#guide-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/guide_pc.png);
}
#service-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/service_pc.png);
}
#gallery-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/gallery_pc.png);
}
#voice-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/voice_pc.png);
}
#student-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/student_pc.png);
}
#story-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/story_pc.png);
}
#ticket-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/ticket_pc.png);
}
#about-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/about_pc.png);
}
#faq-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/faq_pc.png);
}
#night-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/night_pc.png);
}
#house-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/house_pc.png);
}
#contact-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/contact_pc.png);
}
#thanks-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/thanks_pc.png);
}
#adviser-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/adviser_pc.png);
}
#cafe-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/cafe_pc.png);
}
#users-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/users_pc.png);
}
#search-head .cap ,
#terms-head .cap ,
#sitemap-head .cap ,
#regulation-head .cap ,
#policy-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/policy_pc.png);
}
#regulation .top-box li{
font-size : 19px;
line-height : 1.6;
}
#regulation h2{
margin-bottom : 30px;
font-size : 24px;
}
.search-everything-highlight-color{
padding : 2px 6px 2px 6px;
color : white;
background-color : rgb( 182 0 20 ) ! important;
} #policy .address-box h3 ,
#policy .address-box li{
font-size : 19px;
}
#policy .address-box h3 ,
.page-contents .address-box li:not( :last-child ){
margin-bottom : 12px;
}
#policy .number-list{
padding : 30px;
margin : 50px 0;
background : rgb( 246 244 245 );
}
.page-contents .number-list ol{
counter-reset : number;
}
.page-contents .number-list li::before{
position : absolute;
top : 0;
left : -20px;
font-weight : 700;
color : rgb( 182 0 20 );
content : counter( number ) ".";
counter-increment : number;
}
.page-contents .number-list li{
position : relative;
margin-left : 20px;
font-size : 19px;
line-height : 1.6;
}
.page-contents .number-list li:not( :last-child ){
margin-bottom : 40px;
} #company dl{
justify-content : flex-start;
padding : 0 80px;
}
#company dl:not( :last-of-type ){
margin-bottom : 30px;
}
#company dt ,
#company dd{
font-size : 18px;
line-height : 1.8;
}
#company dt{
width : 100%;
max-width : 133px;
}
#company dd{
width : 100%;
max-width : calc( 100% - 133px );
line-height : 1.8;
}
#company dl:last-of-type{
margin-bottom : 100px;
} #gallery{
max-width : 100%;
padding-left : 0;
padding-right : 0;
}
#gallery .inner{
max-width : 948px;
}
#gallery .inbox{
box-sizing : border-box;
width : 100%;
max-width : 290px;
padding : 30px 10px;
margin-bottom : 40px;
border : 1px solid rgb( 182 0 20 );
border-radius : 6px;
}
#gallery .inbox:nth-child( n + 4 ){
margin-bottom : 0;
}
#gallery .inbox h3{
margin-bottom : 30px;
font-size : 24px;
font-weight : 700;
color : rgb( 182 0 20 );
text-align : center;
}
#gallery .inbox li:nth-child( -n + 2 ){
margin-bottom : 3%;
}
#gallery .inbox li{
position : relative;
width : 48.5%;
padding-top : 48.5%;
overflow : hidden;
cursor : pointer;
}
#gallery .inbox li:hover .cap{
transform : scale( 1.1 );
}
#gallery .btn{ }
#gallery .inbox ul{
margin-bottom : 25px;
}
#gallery.page-contents .inbox .btn a{
padding : 20px;
}
#gallery .cap , .single-gallery .cap{
position : absolute;
top : 0;
left : 0;
z-index : 10;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center center;
background-size : cover;
-webkit-transition : all .5s ease;
transition : all .5s ease;
}
.single-gallery.page-contents{
max-width : 100% ! important;
padding-left : 0;
padding-right : 0;
}
.single-gallery.page-contents .box-title{
max-width : 850px;
margin-left : auto;
margin-right : auto;
}
.single-gallery .inner{
max-width : 948px;
}
#slide-auto-box{
width : 1000px;
margin : 0 auto 100px; text-align : center;
}
#slide-auto-box .cap{
position : relative;
width : 100%;
padding-top : 7%;
}
#slide-auto-box .cap figure{
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%; height : 667px;
background-repeat : no-repeat;
background-position : center top;
background-size : cover;
}
#slide-auto-box .slick-dots{
bottom : 20px;
} .single-gallery .listbox{
justify-content : flex-start;
}
.single-gallery .listbox li{
position : relative;
width : 100%;
max-width : 19%;
padding-top : 19%;
margin-bottom : 1.3%;
overflow : hidden;
cursor : pointer;
}
.single-gallery .listbox ul.wrap-box{
justify-content : left;
}
.single-gallery .listbox li:not( :nth-child( 5n ) ){
margin-right : 1%;
}
.single-gallery .listbox .cap{
position : absolute;
top : 0;
left : 0;
z-index : 10;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center center;
background-size : cover;
-webkit-transition : all .5s ease;
transition : all .5s ease;
}
.single-gallery .listbox li:hover .cap{
transform : scale( 1.1 );
}
#gallery .slick-list , .single-gallery .slick-list{
height : 667px;
}
.slick-prev , .slick-next{
margin-top : -10px;
} #adviser{
max-width : 100%;
}
#adviser .inner{
max-width : 850px;
}
#adviser .other-link-box{
margin-bottom : 50px;
}
#adviser .question-box{
margin-bottom : 100px;
}
#adviser .top-box{
margin-bottom : 50px;
}
#adviser .top-box .box-title{
margin-bottom : 20px;
}
#adviser .top-box .box-title::after{
content : none;
}
#adviser .introduction-box{
margin-bottom : 100px;
}
#adviser .introduction-box h3{
margin-bottom : 65px;
}
#adviser .introduction-box .inbox{
margin-bottom : 65px;
}
#adviser .introduction-box .inbox .cap{
width : 100%;
max-width : 250px;
}
#adviser .introduction-box .inbox dl{
width : 100%;
max-width : 550px;
}
#adviser .introduction-box .inbox dt{
padding-bottom : 12px;
margin-bottom : 12px;
font-size : 23px;
font-weight : 700;
color : rgb( 182 0 20 );
border-bottom : 1px solid rgb( 182 0 20 );
}
#adviser .introduction-box .inbox dd{
font-size : 16px;
line-height : 1.6;
}
#adviser .introduction-box .inbox dd .item-box{
padding : 10px 20px;
margin-top : 30px;
line-height : 1.6;
border : 2px solid rgb( 182 0 20 );
border-radius : 6px;
}
#adviser .introduction-box .inbox dd .item-box .icon{
position : relative;
top : -24px;
display : inline-block;
padding : 6px 12px;
font-size : 15px;
font-weight : 700;
color : white;
background : rgb( 182 0 20 );
}
#adviser .introduction-box .inbox dd .item-box .icon::after{
position : absolute;
bottom : -11px;
left : 50%;
display : block;
width : 0;
height : 0;
content : "";
border-color : rgb( 182 0 20 ) transparent transparent transparent;
border-style : solid;
border-width : 11px 5px 0 5px;
-webkit-transform : translate( -50% , 0 );
transform : translate( -50% , 0 );
}
#adviser .introduction-box .inbox dd .item-box ul li{
position : relative;
margin-bottom : 10px;
margin-left : 15px;
line-height : 1.6;
}
#adviser .introduction-box .inbox dd .item-box ul li::before{
position : absolute;
top : 10px;
left : -12px;
display : block;
width : 5px;
height : 5px;
content : "";
background : #000;
border-radius : 50%;
}
#adviser .introduction-box .inbox dd .item-box p{
margin-bottom : 10px;
}
#adviser .introduction-box .text-center{
font-size : 24px;
text-align : center;
}
#adviser .introduction-box .inbox dd .item-box{
padding-left : 1rem ;
padding-right : 1rem ;
text-align : center;
}
#adviser .introduction-box .inbox dd .item-box p , #adviser .introduction-box .inbox dd .item-box li{
text-align : left;
}
#adviser .support-box .inbox .cap{
width : 100%;
max-width : 150px;
}
#adviser .support-box .inbox dl{
width : 100%;
max-width : 650px;
}
#adviser .support-box .inbox dt{
color : #000;
}
#adviser .support-box .inbox dt .icon{
margin-bottom : 15px;
}
#adviser .support-box .inbox dt .icon span{
padding : 5px;
font-size : 12px;
color : #fff;
background : rgb( 182 0 20 );
}
#adviser .support-box .inbox dt strong{
margin-bottom : 10px;
margin-right : 20px;
line-height : 1;
}
#adviser .support-box .inbox dt .txt{
font-size : 14px;
}
#adviser .support-box .inbox dd{
color : #666;
}
#adviser .special-box{
margin-bottom : 100px;
}
#adviser .special-box .inbox{
width : 100%;
max-width : 415px;
margin : auto;
}
#adviser .special-box .cap{
margin-bottom : 40px;
}
#adviser .special-box dt{
position : relative;
padding-bottom : 14px;
margin-bottom : 50px;
letter-spacing : .1em;
border-bottom : 1px solid rgb( 182 0 20 );
}
#adviser .special-box dt .txt{
display : block;
font-size : 23px;
font-weight : 700;
color : rgb( 182 0 20 );
text-align : center;
}
#adviser .special-box dt .item-txt{
position : absolute;
top : 50%;
left : 20%;
width : 85px;
height : 85px;
background : rgb( 182 0 20 );
border-radius : 50%;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
#adviser .special-box dl{
clear : both;
}
#adviser .special-box dt .item-txt .item{
position : absolute;
top : 50%;
left : 50%;
display : block;
width : 100%;
font-size : 14px;
font-weight : 700;
line-height : 1.4;
color : white;
text-align : center;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
#adviser .special-box dd p{
margin-bottom : 5px;
font-size : 16px;
}
#adviser .special-box dd{
font-size : 16px;
line-height : 1.8;
}
#adviser .special-box dd img{
float : right;
width : 139px;
margin : 0 0 0 20px;
}
#adviser .other-box{
margin-bottom : 100px;
}
#adviser .other-box .inbox{
width : 100%;
max-width : 280px;
margin : 0 auto 20px;
}
#adviser .other-box .inbox ul{
margin-bottom : 15px;
}
#adviser .other-box .itembox{
align-items : center;
justify-content : center;
height : 89px;
margin-top : 20px;
text-align : center;
background : rgb( 182 0 20 );
border-radius : 6px;
}
#adviser .other-box .itembox p{
font-weight : 700;
line-height : 1.2;
color : white;
} #system .list-box{
margin-bottom : 20px;
}
#system .box-title .text{
display : block;
margin-top : 30px;
}
#system .box-title .item-txt{
position : relative;
padding : 6px 12px;
font-size : 15px;
font-weight : 700;
color : white;
background : rgb( 182 0 20 );
}
#system .box-title .item-txt::after{
position : absolute;
bottom : -11px;
left : 50%;
display : block;
width : 0;
height : 0;
content : "";
border-color : rgb( 182 0 20 ) transparent transparent transparent;
border-style : solid;
border-width : 11px 5px 0 5px;
-webkit-transform : translate( -50% , 0 );
transform : translate( -50% , 0 );
}
#system .border-title , #guide .border-title{
padding-left : 15px;
margin-bottom : 25px;
font-size : 21px;
font-weight : 700;
line-height : 1.6;
border-left : 4px solid rgb( 182 0 20 );
}
#system .item-list{
box-sizing : border-box;
padding : 30px; margin-top : 20px;
margin-bottom : 25px;
background : rgb( 240 236 236 );
}
#system .item-list li::before{
content : none;
}
#system .item-list p{
margin-bottom : 25px;
}
#system .item-list dt{
margin-bottom : 12px;
line-height : 1.5;
}
#system .item-list dt::before{
position : absolute;
top : 10px;
left : -15px;
display : block;
width : 10px;
height : 10px;
content : "";
background : rgb( 182 0 20 );
border-radius : 50%;
}
#system .item-list .list-box li::before{
top : 5px;
}
#system .item-list .list-box li:not( :last-child ){
margin-bottom : 35px;
}
#system .box .cap{
width : 100%;
max-width : 381px;
margin : 35px auto 0;
}
#system section.box:not( :last-of-type ){
margin-bottom : 50px;
}
#system .number-list p{
margin-bottom : 0;
font-weight : 700;
}
#system .number-list li:not( :last-child ){
margin-bottom : 25px;
}
#system .number-list li{
align-items : center;
justify-content : flex-start;
}
#system .number-list li .icon{
width : 25px;
height : 25px;
margin-right : 10px;
font-size : 16px;
line-height : 22px;
color : white;
text-align : center;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size : 100%;
} #service{
max-width : 1280px;
}
#service .service-box{
height : auto;
background : none;
}
#service .service-box .box:first-of-type{
background : rgb( 182 0 20 );
}
#service .service-box .box:first-of-type .title{
border-bottom : none;
}
#service .service-box .box:first-of-type h3{
font-size : 30px;
letter-spacing : .1em;
}
#service .service-box .box:not( :first-of-type ) h3{
font-size : 23px;
} .page-contents{
width : 100%;
max-width : 850px;
padding-left : 10px;
padding-right : 10px;
margin : 0 auto 180px;
}
.page-contents .box-title .text{
font-size : 30px;
font-weight : 700;
line-height : 1.4;
}
.page-contents .box-title{
position : relative;
margin-bottom : 50px;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : center;
}
.page-contents .box-title::after{
position : absolute;
bottom : -20px;
left : 0;
right : 0;
width : 100%;
height : 1px;
margin : 0 auto;
text-align : center;
content : "";
background-image : -webkit-linear-gradient( left , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-image : linear-gradient( to right , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-repeat : no-repeat;
background-position : center;
}
.page-contents article.box{
margin-bottom : 100px;
}
.page-contents .text-box p b{
font-weight : 700;
}
.page-contents .text-box p{
line-height : 1.8; }
.page-contents .text-box .inner80{
margin : 0 80px;
}
.page-contents .text-box.corporate-box h4{
margin-bottom : 20px;
font-size : 18px;
font-weight : 700;
}
.page-contents .text-box.corporate-box p.text-center{
font-size : 30px;
font-weight : 700;
}
.page-contents .text-box p.text-center{
margin-left : auto;
margin-right : auto;
text-align : center;
}
.page-contents .text-box p:not( :last-of-type ){
margin-bottom : 20px;
}
.page-contents .text-box p.text-right{
margin-top : 20px;
text-align : right;
}
.page-contents .text-box .item-color{
color : rgb( 182 0 20 );
}
.page-contents .text-box .text-line{
font-weight : 700;
text-decoration : underline;
}
.page-contents .text-box .font-w{
font-weight : 700;
}
.page-contents .box-title .item-arrow{
width : 25px;
vertical-align : -5px;
}
.page-contents .btn , .other-color-box{
margin-left : auto;
margin-right : auto;
text-align : center;
}
.page-contents .btn a , .page-contents button.btn , .other-color-box .btn a{
display : inline-block;
min-width : 180px;
max-width : 100%;
padding : 30px;
margin : auto;
line-height : 55px;
line-height : 1.5;
color : white;
text-align : center;
background : rgb( 182 0 20 );
border : 1px solid rgb( 182 0 20 );
border-radius : 4px;
-webkit-transition : all .4s;
-moz-transition : all .4s;
-ms-transition : all .4s;
-o-transition : all .4s;
transition : all .4s;
}
.page-contents .btn a:hover , .page-contents button.btn:hover , .other-color-box .btn a:hover{
background : white;
}
.page-contents .btn a:hover , .page-contents button.btn:hover , .other-color-box .btn a:hover{
color : rgb( 182 0 20 );
}
.page-contents .icon-title{
align-items : center;
justify-content : center;
}
.page-contents .icon-title .icon{
width : 44px;
height : 44px;
margin-right : 10px;
}
.page-contents .line-box .border-box .icon{
width : 37px;
height : 37px;
margin-right : 10px;
font-size : 18px;
line-height : 34px;
color : white;
text-align : center;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size : 100%;
}
.page-contents .line-box .border-box{
margin-bottom : 50px;
background-color : #fff;
background-image : radial-gradient( rgb( 182 0 20 / .2 ) 10% , transparent 10% ) , radial-gradient( rgb( 182 0 20 / .2 ) 10% , transparent 10% );
background-position : 0 0 , 7px 7px;
background-size : 14px 14px;
border : 1px solid rgb( 182 0 20 );
}
.page-contents .line-box .border-box li{
position : relative;
z-index : 2;
padding : 50px 0;
}
.page-contents .line-box .border-box li:first-child::after{
position : absolute;
top : 85%;
left : 75%;
z-index : 10;
display : block;
width : 102px;
height : 135px;
content : "";
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/about/img05.png) no-repeat center center;
background-size : 100%;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
.page-contents .line-box .border-box li:not( :last-child )::before{
position : absolute;
bottom : -10px;
left : 50%;
display : block;
width : 0;
height : 0;
content : "";
border-color : rgb( 182 0 20 ) transparent transparent transparent;
border-style : solid;
border-width : 10px 10px 0 10px;
-webkit-transform : translate( -50% , 0 );
transform : translate( -50% , 0 );
}
.page-contents .line-box .border-box li:not( :last-child ){
border-bottom : 1px solid rgb( 182 0 20 );
}
.page-contents .line-box .border-box .title{
align-items : center;
justify-content : center;
}
.page-contents .line-box .border-box .title p{
width : 100%;
max-width : 400px;
font-size : 21px;
font-weight : 700;
}
.page-contents .line-box .border-box .item{
width : 100%;
max-width : 254px;
margin : 20px auto 0;
}
#guide{
max-width : 100%;
margin-bottom : 100px;
}
#guide .inner{
max-width : 850px;
}
.page-contents .flow-box{
box-sizing : border-box;
width : 100%;
padding : 60px;
margin-bottom : 100px;
background : #b60114;
}
.page-contents .flow-box .text-box{
padding : 60px 100px;
background : #fff;
border-radius : 6px;
}
.page-contents .flow-box .border-box .icon{
width : 37px;
height : 37px;
margin-right : 10px;
font-size : 18px;
line-height : 34px;
color : white;
text-align : center;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size : 100%;
}
.page-contents .flow-box .border-box li .cap{
margin-bottom : 40px;
}
.page-contents .flow-box .border-box li:not( :last-child ){
padding-bottom : 60px;
margin-bottom : 30px;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/guide/flow02.png) no-repeat center bottom;
background-size : contain;
}
.page-contents .flow-box .border-box li:first-child{
padding-bottom : 80px;
}
.page-contents .flow-box .border-box .title{
align-items : center;
justify-content : left;
margin-bottom : 30px;
}
.page-contents .flow-box .border-box .title p{
width : 100%;
max-width : 600px;
margin-bottom : 0;
font-size : 21px;
font-weight : 700;
}
.page-contents .flow-box .border-box .item{
width : 100%;
max-width : 254px;
margin : 20px auto 0;
}
.page-contents .flow-box .text-box p{
margin-bottom : 20px;
font-size : 18px;
}
.page-contents .flow-box .text-box p .item-color.font-w{
font-size : 40px;
}
.page-contents .flow-box article.box{
margin-bottom : 0;
}
.page-contents .gallerys-box .btn{
max-width : 182px;
}
.page-contents .gallerys-box ul{
margin-bottom : 50px;
}
.page-contents .gallerys-box li:not( :nth-child( n + 7 ) ){
margin-bottom : 20px;
}
.page-contents .gallerys-box li{
position : relative;
width : 100%;
max-width : 32%;
padding-top : 20%;
}
.page-contents .gallerys-box li figure{
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center top;
background-size : cover;
-webkit-transition : .2s ease-in;
transition : .2s ease-in;
}
.page-contents .gallerys-box li figure:hover{
opacity : .6;
}
.page-contents .corporate-box .min-txt{
margin-bottom : 15px;
font-size : 30px;
line-height : 1.6;
text-align : center;
}
.page-contents .corporate-box .min-txt .item1{
font-size : 35px;
}
.page-contents .corporate-box .min-txt .item2{
font-size : 22px;
}
.page-contents .corporate-box .minbox{
margin-top : 30px;
margin-bottom : 20px;
}
.gallerys-box{ margin : 100px 0;
} #night{
max-width : 100%;
}
#night .inner{
max-width : 850px;
}
#night .top-box h2::after{
content : none;
}
#night .color-box{
padding : 0 0 50px;
margin : 100px 0;
background : rgb( 240 236 236 / .6 );
}
#night .color-box header{
text-align : center;
transform : translate( 0 , -25px );
}
#night .color-box header p{
font-weight : 700;
}
#night .color-box header .item{
font-size : 39px;
font-weight : 700;
}
#night .color-box h3{
width : 404px;
height : 52px;
margin : 0 auto 20px;
font-size : 22px;
line-height : 55px;
color : white;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/house/bg-item.png) no-repeat center center;
background-size : cover;
}
#night .icon-title .icon{
width : 45px;
height : 56px;
}
#night .list-item-box{
box-sizing : border-box;
width : 100%;
padding : 0 80px;
margin : auto;
}
#night .list-box{
box-sizing : border-box;
width : 100%;
padding : 0 80px;
margin : auto;
}
#night .night-box{
margin : 0 auto 130px;
}
#night .night-box .inbox:not( :last-of-type ){
margin-bottom : 40px;
}
#night .night-box .inbox{
padding : 20px;
border : 1px solid rgb( 182 0 20 );
}
#night .list-item-box li:not( :last-of-type ){
margin-bottom : 25px;
}
#night .list-item-box h4{
position : relative;
margin-bottom : 20px;
margin-left : 20px;
font-size : 21px;
font-weight : 700;
color : rgb( 182 0 20 );
}
#night .list-item-box h4::before{
position : absolute;
top : 10px;
left : -15px;
display : block;
width : 10px;
height : 10px;
content : "";
background : rgb( 182 0 20 );
border-radius : 50%;
}
#night .list-item-box dl{
padding : 20px 0;
border-bottom : 1px solid rgb( 191 191 191 );
}
#night .list-item-box dl:first-of-type{
padding : 0 0 20px;
}
#night .list-item-box dl:last-of-type{
border-bottom : none;
}
#night .list-item-box dt ,
#night .list-item-box dd{
font-size : 19px;
}
#night .list-item-box dt{
margin-bottom : 10px;
}
#night .list-item-box dd small{
font-size : 14px;
}
#night .other-link-box{
margin-bottom : 50px;
}
#night .question-box{
margin-bottom : 100px;
} #house{
max-width : 100%;
margin-bottom : 100px;
}
#house .inner{
max-width : 850px;
}
#house .slidebox{
position : relative;
margin-bottom : 100px;
}
#house .slidebox .inbox{
background : rgb( 240 236 236 );
}
#house .slidebox header{
position : absolute;
top : 50px;
left : 50%;
z-index : 10;
width : 100%;
text-align : center;
-webkit-transform : translate( -50% , 0 );
transform : translate( -50% , 0 );
}
#house .slidebox h3{
width : 404px;
height : 52px;
margin : 0 auto 20px;
font-size : 22px;
line-height : 55px;
color : white;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/house/bg-item.png) no-repeat center center;
background-size : cover;
}
#house #house-banner{
width : 100%;
max-width : 523px;
margin : auto;
}
#house #house-banner .cap{
margin-bottom : 20px;
}
#house #house-banner .text{
font-size : 19px;
text-align : center;
}
#house .slick-prev ,
#house .slick-next{
top : 40%;
}
#house .slick-dots{
bottom : 50px;
}
#house .color-box{
padding : 50px 0;
margin : 100px 0;
background : rgb( 240 236 236 / .6 );
} #house .other-link-box{
margin-bottom : 50px;
}
#house .question-box{
margin-top : 100px;
} #cafe{
max-width : 100%;
}
#cafe .inner{
max-width : 850px;
}
#cafe .other-link-box{
margin-bottom : 50px;
}
#cafe .icon-title .icon{
width : 37px;
height : 37px;
margin-right : 15px;
font-size : 18px;
line-height : 34px;
color : white;
text-align : center;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size : 100%;
}
#cafe .icon-title p{
font-size : 28px;
font-weight : 700;
line-height : 1.5;
}
#cafe .icon-title{
margin-bottom : 15px;
}
#cafe .min-txt{
font-size : 14px;
}
#cafe .text-box dd p:not( .min-txt ){
margin-bottom : 5px;
}
#cafe .inbox{
margin-bottom : 100px;
}
#cafe .inbox .item{
position : absolute;
bottom : -120px;
right : -100px;
width : 158px;
height : 158px;
background : rgb( 182 0 20 );
border-radius : 50%;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
#cafe .inbox .item .item-txt{
position : absolute;
top : 50%;
left : 50%;
display : block;
width : 100%;
font-size : 23px;
font-weight : 700;
line-height : 1.4;
color : white;
text-align : center;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
#cafe .time-box{
text-align : center;
}
#cafe .time-box .item{
margin-bottom : 5px;
font-weight : 700;
}
#cafe .time-box .txt{
margin-bottom : 5px;
font-size : 15px;
}
#cafe .time-box .link-txt a{
color : rgb( 182 0 20 );
text-decoration : underline;
}
#cafe .access-box ul{
text-align : center;
}
#cafe .access-box ul li{
font-size : 19px;
line-height : 1.6;
}
#cafe .color-box{
padding : 50px 0;
margin : 100px 0;
background : rgb( 240 236 236 / .6 );
} #cafe figure.cap img{
margin-top : 20px;
}
#cafe .box iframe{
margin-bottom : 20px;
} .category-voice ,
#voice{
max-width : 948px;
}
.voice-box .inbox:not( :last-of-type ){
margin-bottom : 110px;
}
.voice-box ul{
justify-content : flex-start; }
#voice .btn{
max-width : 150px;
}
.voice-box .inbox li{
position : relative;
width : 100%;
max-width : 30.591%;
-webkit-transition : .2s;
transition : .2s;
}
.voice-box .inbox li:hover{
opacity : .6;
}
.voice-box .inbox li:not( :nth-child( 3n ) ){
margin-right : 4.1%;
}
.voice-box .inbox li:not( :nth-child( -n - 3 ) ){
margin-bottom : 4.1%;
}
.voice-box .inbox li .cap{
position : relative;
width : 100%;
padding-top : 66.552%;
margin-bottom : 20px;
overflow : hidden;
}
.voice-box .inbox li .cap figure{
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center top;
background-size : cover;
}
.voice-box .inbox li dt{
margin-bottom : 10px;
font-size : 16px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : left;
}
.voice-box .inbox li dd{
justify-content : flex-start;
width : 100%;
}
.voice-box .inbox li dd .txt{
display : block;
width : 100%;
margin-bottom : 5px;
font-size : 12px;
line-height : 1.5;
color : rgb( 102 102 102 );
}
.voice-box .inbox li dd .txt:first-child{
margin-bottom : 5px;
font-size : 14px;
font-weight : 700;
line-height : 1.5;
color : #333;
}
#voice .description-txt{
margin-bottom : 40px;
font-size : 18px;
text-align : center;
}
#voice .box-title{
margin-bottom : 60px;
}
.category-voice .other-link-box{
max-width : 850px;
margin-bottom : 0;
}
.single-voice-box.page-contents .other-link-box{
margin-bottom : 100px;
}
.category-voice .other-link-box ul{
justify-content : flex-start;
}
.other-link-box li:not( :nth-child( 3n ) ){
margin-right : 1.6%;
}
.category-voice .description-txt{
margin-bottom : 80px;
font-size : 18px;
line-height : 1.6;
text-align : center;
}
.category-voice .other-link-box li , .single-voice-box .other-link-box li , .category-voice .other-link-box li{
width : 48%;
margin-right : 2%;
}
.category-voice .other-link-box li:nth-child( 2n ) , .single-voice-box .other-link-box li:nth-child( 2n ){
margin-right : 0;
}
.category-voice .other-link-box li:nth-child( n+3 ) , .single-voice-box .other-link-box li:nth-child( n+3 ){
margin-bottom : 0;
}
.other-color-box.voice-box .box-title{
margin-bottom : 60px;
}
.other-color-box.voice-box ul{
margin-bottom : 0;
}
.voice-box .inbox li:not( :nth-child( -n - 3 ) ){
margin-bottom : 4.1%;
}
.voice-box .inbox li .cap{
position : relative;
width : 100%;
padding-top : 66.552%;
margin-bottom : 20px;
overflow : hidden;
}
.voice-box .inbox li .cap figure{
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center top;
background-size : cover;
}
.voice-box .inbox li dt{
margin-bottom : 10px;
font-size : 16px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : left;
}
.voice-box .inbox li dd{
justify-content : flex-start;
width : 100%;
}
.voice-box .inbox li dd .txt{
display : block;
width : 100%;
margin-bottom : 5px;
font-size : 12px;
line-height : 1.5;
color : rgb( 102 102 102 );
}
.voice-box .inbox li dd .txt:first-child{
margin-bottom : 5px;
font-size : 14px;
font-weight : 700;
line-height : 1.5;
color : #333;
}
#voice .description-txt{
margin-bottom : 40px;
font-size : 18px;
text-align : center;
}
#voice .box-title{
margin-bottom : 60px;
}
.category-voice .other-link-box{
max-width : 850px;
margin-bottom : 0;
}
.single-voice-box.page-contents .other-link-box{
margin-bottom : 100px;
}
.category-voice .other-link-box ul{
justify-content : flex-start;
}
.other-link-box li:not( :nth-child( 3n ) ){
margin-right : 1.6%;
}
.category-voice .description-txt{
margin-bottom : 80px;
font-size : 18px;
line-height : 1.6;
text-align : center;
}
.category-voice .other-link-box li , .single-voice-box .other-link-box li , .category-voice .other-link-box li{
width : 48%;
margin-right : 2%;
}
.category-voice .other-link-box li:nth-child( 2n ) , .single-voice-box .other-link-box li:nth-child( 2n ){
margin-right : 0;
}
.category-voice .other-link-box li:nth-child( n+3 ) , .single-voice-box .other-link-box li:nth-child( n+3 ){
margin-bottom : 0;
}
.other-color-box.voice-box .box-title{
margin-bottom : 60px;
}
.other-color-box.voice-box ul{
margin-bottom : 0;
} #online{
max-width : 100%;
padding : 0;
margin : 0;
}
#online p{
line-height : 1.8;
}
#online .page-header{
padding-top : 104.5px;
margin-top : 0;
}
#online .page-header h1 span{
display : block;
margin-top : 50px;
font-size : 30px;
font-weight : 700;
line-height : 1.5;
}
#online section{
padding : 0;
}
#online section:first-child{
padding-top : 100px;
}
#online .page-header .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/online_img01.png);
}
#online .sub-title{
padding : 20px 0;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : center;
}
#online .sub-text{
padding : 10px 0 100px;
text-align : center;
}
#online .inner-title{
padding : 20px 0;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : white;
text-align : center;
background : rgb( 182 0 20 );
}
#online section .inner-text{
padding : 30px 0;
text-align : center;
}
#online img{
width : 50%;
padding : 30px 0;
}
.online-movie{
position : relative;
margin : 10px 0 100px;
}
.online-movie .video-text{
position : absolute;
top : 45%;
left : 35%;
padding : 20px 0;
margin-bottom : 10px;
font-size : 40px;
font-weight : 700;
line-height : 1.4;
color : white;
text-align : center;
}
#online .inner{
max-width : 800px;
}
#online .line-box .border-box .title p{
max-width : 517px;
word-break : keep-all;
}
#online .line-btn{
width : 100%;
padding : 0;
}
#online .inner-lists ul{
max-width : 550px;
padding : 20px 0 5px 20px;
margin : 20px auto 50px;
background : #eee;
}
#online .inner-lists li{
position : relative;
padding-left : 32px;
margin-bottom : 16px;
font-size : 18px;
line-height : 1.5em;
}
#online .inner-lists li::before{
position : absolute;
top : 0;
left : 0;
display : block;
width : 24px;
height : 24px;
content : "";
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/check_org.svg);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
}
#online .inner-lists-red li::before{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/check_red.svg);
}
#online video{
max-width : 100%;
}
#online .slick-dots{
bottom : 40px;
}
#online #house-banner{
max-width : 50%;
margin : 0 auto;
}
#online .slick-img{
width : 100%;
}
#online .line-box .border-box .icon{
margin-left : 110px;
}
@media screen and ( max-width : 930px ){
.page-header .inbox h1{
font-size : 23px;
}
#online img{
width : 65%;
}
#online .top-img{
width : 100%;
}
.online-movie .video-text{
left : 20%;
}
#online #house-banner{
max-width : 65%;
∏	}
}
@media screen and ( max-width : 767px ){
#online .page-header{
margin-top : 0;
}
#online .page-header h1 span{
margin-top : 0;
font-size : 1.875rem;
}
#online .inner-title{
font-size : 20px;
}
#online .sub-title{
font-size : 19px;
}
.online-movie .video-text{
font-size : 20px;
}
#online section .interaction-text{
font-size : 15px;
}
}
@media screen and ( max-width : 412px ){
#online .box-title{
word-break : keep-all;
}
#online .line-box .border-box .icon{
margin-left : 0;
}
#online .line-box .border-box .title p{
max-width : 300px;
}
} #event{
max-width : 100%;
}
#event p{
line-height : 1.8;
}
#event .page-header{
width : 100%;
max-width : 850px;
}
#event .event-charm ,
#event .event-schedule ,
#event .inner ,
#event .event-entry{
max-width : 850px;
margin-left : auto;
margin-right : auto;
}
#event-head .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/night_pc.png);
}
#event .sub-title{
margin-bottom : 50px;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : center;
}
#event .inner-text{
max-width : 1095px;
margin : 0 auto;
}
#event .top-text01{
margin-bottom : 70px;
}
#event .top-text02{
margin-bottom : 30px;
}
#event .bold-text{
font-weight : 700;
}
#event .top-text03{
margin-bottom : 100px;
}
#event .inner-title-arrow{
position : relative;
top : 40px;
display : block;
height : 50px;
margin : 0 auto;
font-size : 30px;
font-weight : 700;
line-height : 50px;
color : white;
text-align : center;
background-color : rgb( 182 0 20 );
}
#event .inner-title-arrow::before{
position : absolute;
top : -37px;
left : 100%;
width : 0;
height : 0;
content : "";
border : 60px solid transparent;
border-left : 60px solid rgb( 182 0 20 );
}
#event .inner-lists ul{
max-width : 650px;
padding : 20px 0 5px 20px;
margin : 100px auto 50px;
background : #eee;
}
#event .inner-lists li{
position : relative;
padding-left : 32px;
margin-bottom : 16px;
font-size : 18px;
line-height : 1.5em;
}
#event .inner-lists li::before{
position : absolute;
top : 0;
left : 0;
display : block;
width : 24px;
height : 24px;
content : "";
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/event/check_black.svg);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
}
#event #house-banner{
max-width : 50%;
margin : 0 auto;
}
#event .slick-img{
width : 100%;
}
#event .sub-text{
margin-top : 80px;
text-align : center;
}
#event .schedule-lists{
max-width : 800px;
margin : 70px auto 0;
}
.schedule-lists li{
position : relative;
display : flex;
align-items : center;
height : 140px;
padding : 0 0 0 60px;
font-size : 20px;
font-weight : 700;
line-height : 120px;
color : #000;
text-decoration : none;
vertical-align : middle;
border-bottom : 1px solid #000;
}
.schedule-lists li::before ,
.schedule-lists li::after{
position : absolute;
top : 0;
bottom : 0;
left : 0;
margin : auto;
vertical-align : middle;
content : "";
}
.schedule-lists li::before{
left : 2px;
width : 30px;
height : 15px;
background : rgb( 182 0 20 );
}
.schedule-lists li::after{
left : 10px;
width : 20px;
height : 20px;
border-top : 10px solid rgb( 182 0 20 );
border-right : 10px solid rgb( 182 0 20 );
transform : rotate( 45deg );
}
.schedule-sub-text{
position : absolute;
bottom : 5px;
font-size : 14px;
}
#event .corporate-title{
position : relative;
display : flex;
align-items : center;
justify-content : center;
margin : 100px auto 50px;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
}
#event .corporate-title::after{
position : absolute;
bottom : -20px;
left : 0;
right : 0;
width : 100%;
height : 1px;
margin : 0 auto;
text-align : center;
content : "";
background-image : linear-gradient( to right , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-repeat : no-repeat;
background-position : center;
}
.event-entry .inner-title-sub{
position : relative;
margin : 100px 0 0;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : center;
}
.event-entry .inner-title-sub::after{
position : absolute;
bottom : -20px;
left : 0;
right : 0;
width : 100%;
height : 1px;
margin : 0 auto;
text-align : center;
content : "";
background-image : linear-gradient( to right , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-repeat : no-repeat;
background-position : center;
}
.event-entry .line-icon{
max-width : 260px ! important;
}
.event-tour{
display : flex;
max-width : 700px;
margin : 0 auto;
border : 3px solid rgb( 182 0 20 );
border-radius : 5px;
}
.event-tour .left-box{
width : 40%;
}
.event-tour .event-arrow{
position : relative;
top : 100px;
left : 37%;
display : block;
padding : 0 0 0 16px;
font-size : 20px;
font-size : 15px;
font-weight : 700;
color : #000;
text-align : center;
text-decoration : none;
vertical-align : middle;
}
.event-tour .event-arrow::before ,
.event-tour .event-arrow::after{
position : absolute;
top : 0;
bottom : 0;
left : 0;
margin : auto;
vertical-align : middle;
content : "";
}
.event-tour .event-arrow::before{
width : 80px;
height : 25px;
background : rgb( 182 0 20 );
transform : rotate( 135deg );
}
.event-tour .event-arrow::after{
top : -25px;
left : 27px;
width : 30px;
height : 30px;
border-top : 20px solid rgb( 182 0 20 );
border-right : 20px solid rgb( 182 0 20 );
}
.event-tour .event-title{
padding : 73% 32px 0;
margin-bottom : 30px;
margin-bottom : 50px;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : #000;
text-align : center;
}
.event-tour .right-box{
width : 60%;
}
.event-tour .right-box-title{
height : 40px;
margin : 40px 40px 40px 0;
font-size : 25px;
line-height : 40px;
color : #fff;
text-align : center;
background : #555;
}
.event-tour .right-text01{
margin-bottom : 20px;
}
.event-tour .right-text02{
margin-bottom : 20px;
} .event-night{
position : relative;
display : flex;
max-width : 700px;
margin : 100px auto 200px;
border : 3px solid rgb( 182 0 20 );
border-radius : 5px;
}
.event-night .right-box{
width : 40%;
}
.event-night .event-arrow{
position : relative;
top : 100px;
left : 37%;
display : block;
padding : 0 0 0 16px;
font-size : 20px;
font-size : 15px;
font-weight : 700;
color : #000;
text-align : center;
text-decoration : none;
vertical-align : middle;
}
.event-night .event-arrow::before ,
.event-night .event-arrow::after{
position : absolute;
top : 0;
bottom : 0;
left : 0;
margin : auto;
vertical-align : middle;
content : "";
}
.event-night .event-arrow::before{
width : 80px;
height : 25px;
background : rgb( 182 0 20 );
transform : rotate( 135deg );
}
.event-night .event-arrow::after{
top : -25px;
left : 27px;
width : 30px;
height : 30px;
border-top : 20px solid rgb( 182 0 20 );
border-right : 20px solid rgb( 182 0 20 );
}
.event-night .event-title{
padding : 73% 40px 0;
margin-bottom : 30px;
margin-bottom : 50px;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : #000;
text-align : center;
}
.event-night .left-box{
width : 60%;
margin-left : 40px;
}
.event-night .left-box-title{
height : 40px;
margin : 40px 0 40px 0;
font-size : 25px;
line-height : 40px;
color : #fff;
text-align : center;
background : #555;
}
.event-night .left-text01{
margin-bottom : 20px;
}
.event-night .left-text02{
margin-bottom : 50px;
}
.event-night .circle-icon{
position : absolute;
top : -56px;
right : -59px;
display : block;
width : 120px;
height : 120px;
font-size : 14px;
color : #fff;
text-align : center;
content : "";
background-color : rgb( 182 0 20 );
border-radius : 999px;
}
.event-night .circle-icon::after{
position : absolute;
top : 46px;
display : flex;
align-items : center;
justify-content : center;
content : "2021年2月より開催予定";
}
#event .wrap-box p{
max-width : 517px;
}
#event .line-box .border-box .icon{
margin-left : 110px;
}
@media screen and ( max-width : 930px ){
#event .schedule-lists{
max-width : 650px;
}
}
@media screen and ( max-width : 767px ){
#event .page-header{
max-width : 90%;
}
#event .sub-title{
font-size : 18px;
}
#event .inner-title-arrow{
width : 70%;
margin : 0 0 0 30px;
font-size : 18px;
}
#event .inner-lists ul{
width : 80%;
}
#event .sub-text{
width : 80%;
margin : 80px auto 0;
}
#event .schedule-lists{
max-width : 80%;
}
.schedule-lists li{
display : flex;
align-items : center;
height : 160px;
font-size : 16px;
line-height : 1;
}
.schedule-lists li:nth-child( 4 ){
align-items : normal;
padding-top : 25px;
}
#event .corporate-title{
font-size : 14px;
}
.event-entry .inner-title-sub{
font-size : 18px;
}
#event .inner-title-arrow{
font-size : 14px;
}
.event-tour{
flex-direction : column;
width : 85%;
}
.event-tour .left-box{
width : 100%;
}
.event-tour .event-title{
padding : 20px 55px;
}
.event-tour .event-arrow{
top : 150px;
}
.event-tour .right-box{
width : 80%;
margin : 0 auto 20px;
}
.event-tour .right-box-title{
margin : 20px 0;
font-size : 16px;
}
.event-night{
flex-direction : column-reverse;
width : 85%;
margin : 100px auto;
}
.event-night .right-box{
width : 100%;
}
.event-night .event-title{
padding : 20px 55px;
}
.event-night .event-arrow{
top : 150px;
}
.event-night .left-box{
width : 80%;
margin : 0 auto 20px;
}
.event-night .left-box-title{
margin : 20px 0;
font-size : 16px;
}
}
@media screen and ( max-width : 412px ){
#event .box-title{
word-break : keep-all;
}
#event .line-box .border-box .icon{
margin-left : 0;
}
#event .line-box .border-box .title p{
max-width : 300px;
word-break : keep-all;
}
} .story-box{
width : 850px;
margin-top : 100px;
margin-bottom : 0;
margin-left : auto;
margin-right : auto;
}
.single-voice-box .story-box{
margin-top : 0;
}
.story-box .itemcap{
position : relative;
padding-top : 25px;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/index/service-bg-title.png) repeat-x left top white;
background-size : auto;
background-size : 42px;
border-bottom : 25px solid rgb( 182 0 20 );
-webkit-transition : .2s;
transition : .2s;
}
.story-box p{
margin : 20px auto 0;
text-align : center;
}
.story-box .itemcap{
-webkit-transition : .2s;
transition : .2s;
}
.story-box .itemcap:hover{
opacity : .6;
}
#users p.description-txt{
margin : 0 auto 30px;
text-align : center;
}
#users .voice-box .inbox{
position : relative;
box-sizing : border-box;
width : 48%;
padding : 30px 10px;
padding-top : 70px;
padding-bottom : 115px;
margin-bottom : 40px;
border : 1px solid rgb( 182 0 20 );
border-radius : 6px;
}
#users .voice-box .inbox.voice_house{
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/faq/faq2.png) top 20px center no-repeat;
}
#users .voice-box .inbox.voice_night{
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/faq/faq4.png) top 20px center no-repeat;
}
#users .voice-box .inbox.voice_cafe{
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/faq/faq5.png) top 20px center no-repeat;
}
#users .voice-box .inbox.voice_adviser{
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/faq/faq6.png) top 20px center no-repeat;
}
#users .voice-box .inbox{
background-size : 40px ! important;
}
#users .voice-box .inbox:nth-child( n+3 ){
margin-bottom : 0;
}
#users .voice-box .inbox li dd .txt{ }
#users .voice-box .inbox .btn{
position : absolute;
bottom : 30px;
display : block;
width : 100%;
margin : 0 auto;
text-align : center;
}
#users .voice-box ul{
margin-bottom : 30px;
}
#users .voice-box .inbox h4{
margin-bottom : 30px;
font-size : 22px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : center;
}
#users .voice-box .inbox li{
position : relative;
width : 100%;
max-width : 100%;
margin : 0;
}
#users .voice-box .inbox li{
-webkit-transition : .2s;
transition : .2s;
}
#users .voice-box .inbox li:hover{
opacity : .6;
}  .single .page-header{
margin-bottom : 15px;
}
.single-contents-box .contents-box{
padding-left : 60px;
padding-right : 60px;
}
.single-contents-box .item-box{
align-items : center;
justify-content : flex-end;
margin-bottom : 25px;
}
.single-contents-box .item-box time{
display : block;
line-height : 23px;
}
.single-contents-box .item-box .category-name{
padding : 2px 6px 5px 4px;
margin-right : 10px;
color : white;
background : rgb( 182 0 20 );
}
.single-contents-box .other-box ul{
padding-left : 80px;
padding-right : 80px;
margin-bottom : 60px;
}
.single-gallery .other-link-box .btn{
margin-top : 40px;
} .other-link-box{
width : 100%;
max-width : 1000px;
padding-left : 10px;
padding-right : 10px;
margin : 0 auto 180px;
}
.other-link-box ul{
justify-content : flex-start;
}
.other-link-box li{
position : relative;
width : 32%;
height : 78px;
line-height : 78px;
text-align : center;
background : rgb( 182 0 20 );
border : 1px solid rgb( 182 0 20 );
border-radius : 6px;
-webkit-transition : all .4s;
-moz-transition : all .4s;
-ms-transition : all .4s;
-o-transition : all .4s;
transition : all .4s;
}
.other-link-box li:nth-child( -n + 3 ){
margin-bottom : 15px;
}
.other-link-box li:hover{
background : white;
}
.other-link-box li:hover .txt{
color : rgb( 182 0 20 );
}
.other-link-box li .txt{
color : white;
-webkit-transition : all .4s;
-moz-transition : all .4s;
-ms-transition : all .4s;
-o-transition : all .4s;
transition : all .4s;
} .other-color-box{
padding : 50px 0;
margin-bottom : 80px;
background : rgb( 246 244 245 );
}
.other-color-box .box-title{
position : relative;
width : 100%;
max-width : 678px;
margin : 0 auto 40px;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : center;
}
.other-color-box .box-title::after{
position : absolute;
bottom : -20px;
left : 0;
right : 0;
width : 100%;
height : 1px;
margin : 0 auto;
text-align : center;
content : "";
background-image : -webkit-linear-gradient( left , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-image : linear-gradient( to right , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-repeat : no-repeat;
background-position : center;
} .other-color-box .inbox{
max-width : 948px;
} .single-voice-box header .text{
margin-bottom : 20px;
text-align : center;
}
.single-voice-box header .text .txt{
font-size : 18px;
font-weight : 700;
}
.single-voice-box header .text .txt:not( :last-of-type ){
margin-right : 20px;
}
.single-voice-box header .cap{
padding-left : 125px;
padding-right : 125px;
}
.single-voice-box header{
margin-bottom : 40px;
}
.single-voice-box .contents-box{
width : 100%;
max-width : 600px;
margin : 0 auto 50px;
}
.single-voice-box{
margin-bottom : 80px;
}
.single-voice-box .contents-box dt ,
.single-voice-box .contents-box dd{
font-size : 15px;
}
.single-voice-box .contents-box dt{
margin-bottom : 18px;
font-weight : 700;
color : rgb( 182 0 20 );
}
.single-voice-box .contents-box dl:not( :last-of-type ){
margin-bottom : 35px;
}
.single-sns-box li .box{
align-items : center;
justify-content : center;
height : 100%;
}
.single-sns-box li{
position : relative;
width : 100%;
max-width : 32%;
height : 50px;
}
.single-sns-box li .txt{
margin-left : 12px;
font-size : 14px;
color : white;
}
.single-sns-box li.tweet{
background : rgb( 55 136 227 );
border-bottom : 2px solid rgb( 18 66 114 );
}
.single-sns-box li.facebook{
background : rgb( 6 89 179 );
border-bottom : 2px solid rgb( 18 66 114 );
}
.single-sns-box li.line{
background : rgb( 31 205 7 );
border-bottom : 2px solid rgb( 25 144 54 );
} .single-story-box .contents-box{
width : 100%;
max-width : 600px;
margin : auto;
}
.single-story-box .minbox{
box-sizing : border-box;
justify-content : left;
padding : 20px;
margin-bottom : 60px;
background : rgb( 246 244 245 );
}
.single-story-box .minbox .data{
margin-left : 30px;
}
.single-story-box .minbox .data dl{
justify-content : flex-start;
}
.single-story-box .minbox .data dl:not( :last-of-type ){
margin-bottom : 15px;
}
.single-story-box .minbox .data dt{
width : 100px;
margin-bottom : 0;
}
.single-story-box .minbox .cap{
width : 200px;
}
.single-story-box .text-box h3{
margin-bottom : 25px;
font-size : 24px;
font-weight : 700;
line-height : 1.5;
color : rgb( 182 1 20 );
}
.single-story-box .text-box header h3{
color : #000;
text-align : center;
}
.single-story-box .conte-box{
padding : 30px 0;
}
.single-story-box.single-voice-box header{
margin-bottom : 0;
} #ticket{
max-width : 100%;
}
#ticket .inner{
width : 850px;
}
#ticket .top-box{
margin-bottom : 100px;
}
#ticket .top-box h3{
margin-bottom : 25px;
font-size : 34px;
font-weight : 700;
line-height : 1.6;
color : rgb( 182 0 20 );
text-align : center;
}
#ticket .top-box .text{
margin-bottom : 12px;
text-align : center;
}
#ticket .top-box .text .txt{
font-size : 26px;
line-height : 1.8;
border-bottom : 2px dotted rgb( 182 0 20 );
}
#ticket .top-box .item-txt{
font-size : 12px;
line-height : 1.8;
text-align : center;
}
#ticket .box-title .icon{
width : 44px;
height : 44px;
margin-right : 10px;
}
#ticket .icon-title{
align-items : center;
justify-content : center;
}
#ticket .color-box .item{
width : 25px;
height : 25px;
margin-right : 15px;
font-size : 12px;
line-height : 22px;
color : white;
text-align : center;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size : 100%;
}
#ticket .color-box{
padding : 0 20px;
background-color : rgb( 250 236 226 / .9 );
background-image : radial-gradient( rgb( 216 164 163 ) 10% , transparent 10% ) , radial-gradient( rgb( 216 164 163 ) 10% , transparent 10% );
background-position : 0 0 , 7px 7px;
background-size : 14px 14px;
border : 1px solid rgb( 182 0 20 );
}
#ticket .text-box .item-color{
font-weight : 700;
}
#ticket .color-box p{
font-weight : 700;
}
#ticket .color-box .txt{
font-size : 30px;
font-weight : 700;
}
#ticket .color-box li:not( :last-child ){
border-bottom : 1px solid rgb( 182 0 20 );
}
#ticket .color-box li{
align-items : baseline;
justify-content : flex-start;
padding : 40px 0 40px 170px;
}
#ticket .color-box .mintxt{
font-size : 14px;
}
#ticket .color-box p:not( :last-of-type ){
margin-bottom : 10px;
}
#ticket .color-box a{
font-weight : 700;
text-decoration : underline;
}
#ticket .inbox{
width : 100%;
max-width : 580px;
margin : 0 auto;
}
#ticket .box-color-txt{
height : 46px;
margin-bottom : 35px;
font-size : 21px;
line-height : 42px;
color : white;
text-align : center;
background : rgb( 182 0 20 );
border-radius : 4px;
}
#ticket .last-box{
margin-bottom : 120px;
}
#ticket .last-box h3{
align-items : center;
justify-content : center;
}
#ticket .last-box h3 .minicon{
width : 72px;
}
#ticket.page-contents .box-title .txt{
line-height : 1.5;
} #about{
max-width : 100%;
margin-bottom : 50px;
}
#about .inner{
max-width : 850px;
}
#about .top-box{
margin-bottom : 50px;
}
#about .top-box h2{
margin-bottom : 30px;
font-size : 42px;
text-align : center;
}
#about .top-box h3{
margin-bottom : 25px;
font-size : 26px;
line-height : 1.6;
text-align : center;
}
#about .index-benefits-box::before ,
#about .index-benefits-box::after{
content : none;
}
#about .index-benefits-box{
padding : 50px 0;
margin-bottom : 50px;
background : rgb( 240 236 236 );
}
#about .index-benefits-box .btn{
width : auto;
max-width : none;
height : auto;
margin : 0;
background : none;
border : none;
border-radius : 4px;
-webkit-transition : all .4s;
-moz-transition : all .4s;
-ms-transition : all .4s;
-o-transition : all .4s;
transition : all .4s;
}
#about .text-box .cap{
margin-bottom : 15px;
}
#about .text-center{
font-size : 28px;
font-weight : 700;
text-align : center;
}
#about .text-box .btn{
margin-top : 40px;
}
#about .voice-select-box{
margin : 50px 0;
}
#about .voice-select-box .inbox{
margin-bottom : 30px;
}
#about .voice-select-box .text-center{
font-size : 22px;
}
#about .tabs-box{
margin-bottom : 50px;
}
#about .tabs-box li{
position : relative;
width : 100%;
height : 160px;
overflow : hidden;
}
#about .tabs-box li:not( :last-child ){
margin-bottom : 25px;
}
#about .tabs-box li figure{
position : absolute;
top : 0;
left : 0;
z-index : 1;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center center;
background-size : 100%;
-webkit-transition : .5s;
transition : .5s;
}
#about .tabs-box li:hover figure{
transform : scale( 1.1 );
}
#about .tabs-box h4{
position : absolute;
top : 50%;
left : 50%;
z-index : 2;
font-size : 26px;
font-weight : 700;
color : white;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
#about .text-box:last-of-type h3{
position : relative;
font-size : 28px;
text-align : center;
}
#about .text-box:last-of-type .item-color{
border-bottom : 2px solid rgb( 182 0 20 );
} .question-box ul{
margin-bottom : 50px;
border : 1px solid rgb( 182 0 20 );
}
.question-box h3{
position : relative;
padding : 20px 0;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : white;
text-align : center;
background : rgb( 182 0 20 );
}
.question-box h3::after{
position : absolute;
bottom : -12px;
left : 50%;
display : block;
width : 0;
height : 0;
content : "";
border-color : rgb( 182 0 20 ) transparent transparent transparent;
border-style : solid;
border-width : 12px 6px 0 6px;
-webkit-transform : translate( -50% , 0 );
transform : translate( -50% , 0 );
}
.question-box .itembox .icon{
position : relative;
width : 30px;
font-size : 32px;
text-align : center;
}
.question-box .itembox .text{
margin-top : 30px;
}
.question-box .itembox .text .font_sans{
color : rgb( 77 77 133 );
}
.question-box .itembox .text .font_sans::after{
background : rgb( 77 77 133 );
}
.question-box .itembox .txt , .question-box .itembox p{
line-height : 1.5;
}
.question-box li{
align-items : center;
justify-content : flex-start;
padding : 40px 0 40px 40px;
}
.question-box li:not( :last-child ){
border-bottom : 2px dotted rgb( 182 0 20 );
}
.question-box li .font_sans::after{
position : absolute;
bottom : -2px;
left : 0;
display : block;
width : 100%;
height : 2px;
content : "";
background : rgb( 182 0 20 );
}
.question-box li .font_sans{
position : relative;
margin-right : 15px;
font-size : 33px;
font-weight : 700;
color : rgb( 182 0 20 );
}
.question-box li .txt{
display : inline-grid;
width : 90%;
font-size : 18px;
}
.question-box li .title{
cursor : pointer;
}
.category-faq .itembox{
margin : 0 80px 50px;
background-color : #fff;
background-image : radial-gradient( rgb( 182 0 20 / .2 ) 10% , transparent 10% ) , radial-gradient( rgb( 182 0 20 / .2 ) 10% , transparent 10% );
background-position : 0 0 , 7px 7px;
background-size : 14px 14px;
border : 1px solid rgb( 182 0 20 );
}
.category-faq .btn{
max-width : 182px;
}
.category-faq .itembox li{
padding : 20px;
}
.category-faq .itembox li:not( :last-child ){
border-bottom : 2px dotted rgb( 182 0 20 );
}
.category-faq .itembox .title{
cursor : pointer;
}
.category-faq .itembox .title ,
.category-faq .itembox .text{
display : table;
width : 100%;
table-layout : fixed;
}
.category-faq .itembox .text{
margin-top : 20px;
}
.category-faq .itembox .icon ,
.category-faq .itembox .min-title ,
.category-faq .itembox .data{
display : table-cell;
vertical-align : top;
}
.category-faq .itembox .icon{
position : relative;
width : 30px;
font-size : 32px;
text-align : center;
}
.category-faq .itembox .title .item{
font-weight : 500;
color : rgb( 182 0 20 );
border-bottom : 2px solid rgb( 182 0 20 );
}
.category-faq .itembox .text .item{
font-weight : 500;
color : rgb( 77 77 133 );
background : none;
border-bottom : 2px solid rgb( 77 77 133 );
}
.category-faq .itembox .min-title ,
.category-faq .itembox .data{
padding-left : 15px;
}
.category-faq .itembox .itemtxt{
font-size : 18px;
font-weight : 700;
color : rgb( 182 0 20 );
}
.page-contents.category-faq .text-box .data p{
font-size : 18px;
font-weight : 700;
} #faq ul{
width : 100%;
}
#faq.page-contents ul.wrap-box{
margin-bottom : 100px;
}
#faq li{
margin-bottom : 20px;
}
#faq li{
position : relative;
box-sizing : border-box;
width : 100%;
max-width : 32%;
padding : 30px 10px;
border : 1px solid rgb( 182 0 20 );
border-radius : 6px;
-webkit-transition : all .3s ease;
transition : all .3s ease;
}
#faq li dl{
display : table;
width : 100%;
table-layout : fixed;
}
#faq li dt ,
#faq li dd{
display : table-cell;
vertical-align : middle;
}
#faq li dt{
width : 20%;
}
#faq li dd{
padding-left : 12px;
font-size : 16px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
-webkit-transition : all .3s ease;
transition : all .3s ease;
}
#faq li:hover{
background : rgb( 182 0 20 );
}
#faq li:hover dd{
color : white;
}
#faq.page-contents{
margin-bottom : 0;
} .voice-select-box{
padding : 50px 0;
margin-bottom : 120px;
background : rgb( 240 236 236 );
}
.voice-select-box .inbox{
width : 100%;
max-width : 850px;
padding-left : 10px;
padding-right : 10px;
margin : 0 auto;
}
.voice-select-box h3{
position : relative;
margin-bottom : 40px;
font-size : 30px;
font-weight : 700;
line-height : 1.4;
color : rgb( 182 0 20 );
text-align : center;
}
.voice-select-box h3 .item{
width : 32px;
vertical-align : unset;
}
.voice-select-box h3::after{
position : absolute;
bottom : -20px;
left : 0;
right : 0;
width : 100%;
height : 1px;
margin : 0 auto;
text-align : center;
content : "";
background-image : -webkit-linear-gradient( left , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-image : linear-gradient( to right , transparent , rgb( 182 0 20 ) 25% , rgb( 182 0 20 ) 75% , transparent );
background-repeat : no-repeat;
background-position : center;
}
.voice-select-box ul{
justify-content : flex-start;
width : 100%;
max-width : 1200px;
margin : 0 auto 35px;
}
.voice-select-box li{
position : relative;
width : 24%;
}
.voice-select-box li:not( :last-child ){
margin-right : 1.33463%;
}
.voice-select-box .cap{
position : relative;
width : 100%;
padding-top : 69.445%;
margin-bottom : 15px;
overflow : hidden;
}
.voice-select-box li:hover .cap figure{
transform : scale( 1.1 );
}
.voice-select-box p{
line-height : 1.6;
}
.voice-select-box p .itemtxt{
display : block;
font-weight : 700;
text-decoration : underline;
}
.voice-select-box .cap figure{
position : absolute;
top : 0;
left : 0;
z-index : 1;
width : 100%;
height : 100%;
background-repeat : no-repeat;
background-position : center center;
background-size : 100%;
-webkit-transition : .5s;
transition : .5s;
} .service-notebox{
width : 100%;
max-width : 1000px;
padding-left : 10px;
padding-right : 10px;
margin : 0 auto 120px;
}
.service-notebox h3{
margin-bottom : 12px;
font-size : 19px;
font-weight : 700;
}
.service-notebox p{
font-size : 14px;
line-height : 1.6;
}
.page-id-86 .other-link-box{
margin : 0 auto 50px;
} #sitemap .box:not( :last-of-type ){
margin-bottom : 60px;
}
#sitemap h2 a{
font-size : 24px;
font-weight : 700;
color : rgb( 182 0 20 );
}
#sitemap h2{
position : relative;
}
#sitemap h2::before{
position : absolute;
top : 50%;
left : -20px;
display : block;
width : 16px;
height : 16px;
margin-top : 0;
content : "";
background : rgb( 182 0 20 );
border-radius : 50%;
-webkit-transform : translate( 0 , -50% );
transform : translate( 0 , -50% );
}
#sitemap h2::after{
position : absolute;
top : 50%;
left : -14px;
display : block;
width : 0;
height : 0;
margin-top : 0;
content : "";
border-color : transparent transparent transparent white;
border-style : solid;
border-width : 3px 0 3px 6px;
-webkit-transform : translate( 0 , -50% );
transform : translate( 0 , -50% );
}
#sitemap ul{
justify-content : flex-start;
margin-top : 25px;
}
#sitemap li{
position : relative;
width : 32%;
}
#sitemap .item-box ul{
display : block;
}
#sitemap .item-box ul li{
width : 100%;
}
#sitemap li::before{
position : absolute;
top : 50%;
left : -14px;
display : block;
width : 0;
height : 0;
margin-top : 0;
content : "";
border-color : transparent transparent transparent rgb( 182 0 20 );
border-style : solid;
border-width : 3px 0 3px 6px;
-webkit-transform : translate( 0 , -50% );
transform : translate( 0 , -50% );
}
#sitemap li:not( :nth-child( n + 4 ) ){
margin-bottom : 15px;
} .mw_wp_form .error{
margin-top : 10px;
}
.confirm p.text-center{
display : none;
}
#contact.confirm .item-table{
margin-bottom : 50px;
}
#contact.confirm .item-table th ,
#contact.confirm .item-table td{
padding-bottom : 50px;
}
#contact.page-contents .itembtn button.btn.btn-gray{
background : #999;
border : 1px solid #999;
}
#contact.page-contents .itembtn button.btn.btn-gray:hover{
background : white;
}
#contact.page-contents .itembtn button.btn.btn-gray:hover{
color : #999;
}
#thanks .btn{
margin-top : 80px;
}
#contact .top-box{
margin-bottom : 50px;
text-align : center;
}
#contact .text-center{
margin-bottom : 60px;
text-align : center;
}
#contact .text-center a{
color : rgb( 182 0 20 );
text-decoration : underline;
}
#contact .item-table{
width : 100%;
}
#contact .item-table th ,
#contact .item-table td{
padding-bottom : 30px;
}
#contact .item-table th{
width : 205px;
text-align : left;
}
#contact .item-table th .txt ,
#contact .item-table th .item-txt{
vertical-align : middle;
}
#contact .item-table th .txt{
margin-right : 12px;
font-size : 18px;
font-weight : 700;
color : rgb( 182 0 20 );
}
#contact .item-table th .item-txt{
padding : 2px 4px;
font-size : 12px;
color : white;
background : rgb( 182 0 20 );
}
#contact .item-table tr:last-child th{
vertical-align : top;
}
#contact .item-table td{
width : 449px;
}
#contact .item-table .input-txt{
box-sizing : border-box;
width : 100%;
height : 48px;
padding : 10px;
font-size : 15px;
resize : none;
background : rgb( 248 248 248 );
border : 1px solid rgb( 204 204 204 );
border-radius : 4px;
}
#contact .item-table textarea.input-txt{
height : 350px;
}
#contact .itembtn .btn{
display : block;
margin : auto;
font-size : 16px;
color : white;
cursor : pointer;
}
#contact .itembtn .btn:hover{
color : rgb( 182 0 20 );
}
#contact .itembtn{
margin : auto;
}
#contact .btn-box{
margin : 0 80px;
}
#contact .privacy{
box-sizing : border-box;
height : 300px;
padding : 20px;
margin-bottom : 20px;
overflow : auto;
background : rgb( 248 248 248 );
}
#contact .privacy p{
font-size : 80%;
line-height : 2;
}
#contact .privacy p strong{
font-weight : 700;
}
#contact .privacy p.textRight{
margin-bottom : 20px;
text-align : right;
}
#contact p.textCenter{
margin : 0 auto 40px;
text-align : center;
}
#contact.confirm .privacy , #contact.confirm p.textCenter{
display : none;
} #terms h3{
margin-bottom : 12px;
font-size : 24px;
}
#terms .top-box{
margin-bottom : 60px;
}
#terms ul + p ,
#terms ul{
margin-top : 35px;
}
#terms li{
font-size : 19px;
line-height : 1.6;
}
#terms .box:last-of-type{
margin-top : 30px;
}
#notfound .text-box .btn{
margin-top : 40px;
} #story{
max-width : 948px;
}
#story .description-txt{
margin : 0 auto 60px;
font-size : 20px;
line-height : 1.8;
text-align : center;
}
#story .voice-box .inbox li{
-webkit-transition : .2s;
transition : .2s;
}
#story .voice-box .inbox li:hover{
opacity : .6;
} @media screen and ( min-width : 768px ){
#house .slidebox .inbox{
position : relative;
padding : 210px 0 20px;
-webkit-clip-path : polygon( 0 35% , 50% 1% , 100% 35% , 100% 100% , 0% 100% );
clip-path : polygon( 0 35% , 50% 1% , 100% 35% , 100% 100% , 0% 100% );
}
} @media screen and ( max-width : 930px ){
body{
min-width : auto;
}
.index-benefits-box::before , .index-benefits-box::after{
display : none;
width : auto;
}
} @media screen and ( max-width : 767px ){
body{
min-width : auto;
}
#footer .nav li:not( :first-child ) a::after{
display : none;
background : none;
} .inner{
padding-left : 1rem;
padding-right : 1rem;
}
.index-benefits-box h3{
margin-bottom : 35px;
font-size : 4.6vw;
line-height : 1.4;
}
.pc-only{
display : none;
}
.sp-only{
display : block;
}
.sp-icon{
height : 175px ! important;
}
#header{
height : 5.312rem;
padding-top : 0;
padding-bottom : 0;
}
#header .inner{
max-width : none;
height : 100%;
padding : 0 1rem;
}
#header-logo{
width : 120px;
}
#header-nav .btn{
width : 124px;
}
#nav-item-1{
margin-left : 10px;
}
#panel-btn{
width : 35px;
height : 35px;
margin-left : 10px;
}
#panel-btn-icon{
width : 35px;
height : 3px;
}
#panel-btn-icon::before ,
#panel-btn-icon::after{
width : 35px;
height : 3px;
}
#panel-btn-icon::before{
margin-top : -10px;
}
html{
font-size : 3.125vw;
}
#top-banner{
margin : 5.312rem auto 6rem;
}
#top-banner .cap{
padding-top : 14.312%;
}
.index-other-contents h2 ,
.service-box h2{
margin-bottom : 1.5rem;
font-size : 3rem;
}
.index-news-box .news-list-box::before , .index-news-box .news-list-box::after{
top : -2rem;
}
.index-news-box h2{
margin-bottom : 3rem;
font-size : 3rem;
}
.index-other-contents .box:last-of-type .itemcap{
margin-bottom : 1.5rem;
}
.index-other-contents .text ,
.service-box .text{
margin-bottom : 2rem;
font-size : 1rem;
}
.index-other-contents .text{
margin-top : 0;
}
.service-box .box .font_sans{
font-size : 1.5rem;
}
.service-box .box h3{
font-size : 2rem;
font-weight : 700;
}
.index-benefits-box .box{
max-width : none;
}
.index-benefits-box .text{
font-size : 1.65rem;
}
.index-benefits-box{
height : auto;
padding-top : 0;
padding-left : 1rem;
padding-right : 1rem;
margin-bottom : 6rem;
}
.index-benefits-box dl{
justify-content : space-between;
}
.index-benefits-box dt{
width : 70px;
margin-right : 0;
}
.index-benefits-box dd{
max-width : calc( 100% - 85px );
}
.news-list-box dt time ,
.news-list-box dt .item{
padding : .125rem .25rem .062rem;
font-size : 1rem;
}
.news-list-box li dd{
font-size : 1rem;
line-height : 1.4;
}
.news-list-box li:not( :last-child ){
margin-bottom : 20px;
}
.index-news-box .news-list-box::before{
display : none;
width : auto;
}
.service-box{
height : auto;
padding : 50px 0;
margin-bottom : 30px;
}
.service-box .box{
max-width : none;
padding-top : 58.893%;
}
.service-box .box ,
.service-box .box:nth-child( -n + 3 ){
margin-bottom : 30px;
}
.service-box .box:last-of-type{
margin-bottom : 0;
}
.service-box .inner{
padding-left : 0;
padding-right : 0;
transform : translateY( 0 );
}
.service-box .text ,
.service-box h2{
color : white;
}
.service-box .wrap-box{
display : block;
}
.index-other-contents{
height : auto;
margin-bottom : 6rem;
background : none;
}
.index-other-contents .box .inbox{
max-width : none;
} .index-other-contents .box:first-of-type{
margin-bottom : 4rem;
}
.index-other-contents .box{
display : block;
transform : translateY( 0 );
}
.index-news-box{
margin : 6rem 1rem 8rem;
}
.index-news-box .news-list-box{
box-sizing : border-box;
max-width : none;
padding-left : 0;
padding-right : 0;
}
.sns-box h2{
width : 100%;
max-width : 75%;
padding : 1rem 0 4rem;
margin : 0 auto 2rem;
font-size : 1.6rem;
}
.sns-box .text{
margin-bottom : 50px;
font-size : 1.4rem;
line-height : 1.6;
}
.sns-box .inner{
transform : translateY( -64px );
}
#line-banner{
box-sizing : border-box;
max-width : none;
padding : 0 4rem;
margin : 3.125rem auto 2.5rem;
}
.sns-box{
padding : 1.75rem 0;
margin-bottom : 2.812rem;
}
#item-instagram .cap{
width : 15vw;
}
#item-facebook .cap{
width : 10vw;
}
#item-twitter .cap{
width : 15vw;
}
#footer-nav ul{
display : block;
margin : 0 auto;
text-align : center;
}
#footer{
display : flex;
align-items : flex-end;
justify-content : center;
height : auto;
padding-top : 4.8rem;
background : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/footer-bg_sp.png) no-repeat center bottom;
background-size : 100%;
}
address{
margin-bottom : 20px;
font-size : .9rem;
}
#footer .nav{
margin-bottom : 1.875rem;
}
#footer .nav li:first-child{
font-size : 1rem;
}
#copy{
padding : 0 0 1.25rem;
font-size : .75rem;
}
#footer .nav li{
margin : 0 .625rem;
font-size : .75rem;
}
#footer .nav li:nth-child( -n + 3 ){
margin-bottom : 1rem;
}
.service-box .box:nth-of-type( 1 ) .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/index/service-img01_sp.png) ! important;
background-size : 100%;
}
.service-box .box:nth-of-type( 2 ) .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/index/service-img02_sp.png) ! important;
background-size : 100%;
}
.service-box .box:nth-of-type( 3 ) .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/index/service-img03_sp.png) ! important;
background-size : 100%;
} .service-box .box:nth-of-type( 4 ) .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/index/service-img04_sp.png) ! important;
background-size : 100%;
}
.service-box .box:nth-of-type( 5 ) .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/index/service-img07_sp.jpg) ! important;
background-size : 100%;
}
.service-box .box:nth-of-type( 6 ) .cap{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/index/service-img06_sp.png) ! important;
background-size : 100%;
}
#slider01 figure{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-img01_sp.png) ! important;
}
#slider02 figure{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-house_sp.jpg) ! important;
}
#slider03 figure{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-img03_sp.png) ! important;
}
#slider04 figure{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-img04_sp.png) ! important;
} #slider06 figure{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-goodmeeting_sp.jpg) ! important;
}
#slider07 figure{
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/slider/slider-online_sp.jpg) ! important;
}
#sp-menubox{
top : 5.312rem;
right : -100%;
width : 100%;
padding : 2.812rem 1.25rem;
}
.index-benefits-box h2{
max-width : 100%;
margin-bottom : 20px;
font-size : 7vw;
}
#sp-menubox li:not( :last-child ){
padding-bottom : 20px;
}
#sp-menubox li a{
display : block;
font-size : 1.25rem;
}
#sp-menubox ul{
width : 65%;
margin-bottom : 1.562rem;
margin-left : 1.562rem;
}
#sp-menubox .minbox li a{
font-size : 1rem;
}
#sp-menubox .minbox{
width : 100%;
margin-left : .5rem;
}
#footer-nav ul li{
position : relative;
font-size : 1.25rem;
}
#footer-nav ul li:not( :last-child ){
margin-bottom : 1.65rem;
}
.index-benefits-box li{
box-sizing : border-box;
width : 100%;
padding : 2rem 0 2rem 1rem ;
}
.index-other-contents .box::after{
display : none;
background : none;
}
#footer-nav ul li.item-txt .txt::before{
right : 6rem;
}
#footer-nav ul li.item-txt .minbox{
position : inherit;
top : 1rem;
left : 0;
display : none;
width : auto;
padding : 10px 0;
}
#footer-nav ul ul{
margin : 0 auto;
}
#footer-nav ul li ul li{
margin-bottom : .5rem ! important;
font-size : 1rem;
}
#topicpath{
display : none;
}
.voice-select-box .inbox{
width : auto;
max-width : none;
}
.voice-select-box .inbox{
padding-left : 1rem;
padding-right : 1rem;
}
.voice-select-box{
padding : 1.875rem 0 3.125rem;
margin-bottom : 3.75rem;
background : rgb( 240 236 236 );
}
.page-contents .box-title{
margin-bottom : 3.125rem;
font-size : 1.675rem;
}
#about .voice-select-box .text-center{
font-size : 1.375rem;
text-align : left;
}
#about .text-box:last-of-type h3{
margin-bottom : 3.125rem;
font-size : 1.675rem;
}
#about .voice-select-box .inbox{
margin-bottom : 1.875rem;
}
.voice-select-box li{
width : 48.5%;
}
.voice-select-box li:not( :last-child ){
margin-right : 0;
}
.voice-select-box li:nth-child( -n + 2 ){
margin-bottom : 2rem;
}
.voice-select-box ul{
box-sizing : border-box;
justify-content : space-between;
max-width : none;
padding-left : 1rem;
padding-right : 1rem;
margin : 0 auto 2.187rem;
}
.voice-select-box .cap{
padding-top : 67%;
margin-bottom : .312rem;
}
.page-contents .btn a , .page-contents button.btn , .other-color-box .btn a{
min-width : 8.312rem;
max-width : 100%;
padding : 1.45rem;
font-size : 1rem;
}
#about .inner{
max-width : none;
}
#about .top-box h2{
margin-bottom : 1.875rem;
font-size : 2.625rem;
font-feature-settings : "palt";
line-height : 1.5;
text-align : left;
letter-spacing : .5px;
}
#about .top-box h3{
margin-bottom : 1.875rem;
font-size : 1.625rem;
line-height : 1.6;
text-align : left;
}
.page-contents .text-box p{
font-size : 1.25rem;
line-height : 1.8;
}
#about .index-benefits-box{
padding : 0 1rem;
margin-bottom : 4rem;
background : none;
}
.page-contents .corporate-box .min-txt{
margin-bottom : .937rem;
font-size : 1.875rem;
line-height : 1.6;
text-align : left;
}
.page-contents .corporate-box .min-txt .item1{
font-size : 2.187rem;
}
.page-contents .corporate-box .min-txt .item2{
font-size : 1.375rem;
}
.page-contents .corporate-box .minbox{
margin-top : 1.875rem;
margin-bottom : 1.25rem;
}
.page-contents .text-box .inner80{
margin : 0;
}
#about .text-center{
font-size : 1.75rem;
font-weight : 700;
text-align : center;
}
.page-contents article.box{
margin-bottom : 3.125rem;
}
#about .voice-select-box{
margin : 3.125remx 0;
}
.line-box{
padding-left : 0;
padding-right : 0;
}
.page-contents{
width : auto;
max-width : none;
padding-left : 0;
padding-right : 0;
margin : 0 auto 5rem;
}
#about{
max-width : none;
}
.page-contents .box-title::after ,
.voice-select-box h3::after{
width : 95%;
}
.index-benefits-box h2{
max-width : none;
margin-bottom : 2rem;
font-size : 2rem;
}
.page-contents .line-box .border-box{
margin-bottom : 3.125rem;
border : 1px solid rgb( 182 0 20 );
border-left : none;
border-right : none;
}
.page-contents .line-box .border-box li{
padding : 3.125rem 0;
}
.page-contents .line-box .border-box .title{
box-sizing : border-box;
justify-content : space-between;
width : auto;
padding-left : 1rem;
padding-right : 1rem;
}
.page-contents .line-box .border-box .icon{
width : 2.312rem;
height : 2.312rem;
margin-right : .625rem;
font-size : 1.125rem;
line-height : 2.425rem;
}
.page-contents .line-box .border-box .title p{
width : calc( 100% - 3rem );
max-width : none;
font-size : 1.375rem;
}
.page-contents .line-box .border-box .item{
width : auto;
max-width : none;
margin : .937rem 6.875rem 0;
}
.page-contents .line-box .border-box li:first-child::after{
top : 85%;
left : auto;
right : -1.5rem;
z-index : 10;
width : 6.375rem;
height : 8.437rem;
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
}
#about .tabs-box h4{
font-size : 1.625rem;
}
#about .tabs-box li{
height : auto;
padding-top : 35%;
}
#about .tabs-box li figure{
position : absolute;
background-size : cover;
}
.service-notebox{
box-sizing : border-box;
width : 100%;
max-width : none;
padding-left : 1rem;
padding-right : 1rem;
margin : 0 auto 6.75rem;
}
.service-notebox h3{
margin-bottom : .75rem;
font-size : 1.187rem;
font-weight : 700;
}
.service-notebox p{
font-size : 1rem;
line-height : 1.6;
}
#service .service-box .box:first-of-type{
display : none;
}
.service-box{
height : auto;
padding : 3rem 0;
margin-bottom : 6rem;
}
#service{
max-width : none;
}
#sitemap{
box-sizing : border-box;
padding-left : 3rem;
padding-right : 3rem;
}
#sitemap .box:not( :last-of-type ) h2{
margin-left : ;
}
#sitemap h2 a{
font-size : 1.5rem;
}
#sitemap .box:not( :last-of-type ){
margin-bottom : 1.875rem;
}
#sitemap li{
width : auto;
font-size : 1rem;
line-height : 1.6;
}
#sitemap ul{
display : block;
margin-top : 1.25rem;
}
#sitemap li:not( :last-child ){
margin-bottom : 1rem;
}
#terms{
padding-left : 1rem;
padding-right : 1rem;
}
#terms .top-box{
margin-bottom : 1.875rem;
}
#terms h3{
margin-bottom : .75rem;
font-size : 1.5rem;
}
#terms li{
font-size : 1.187rem;
line-height : 1.6;
}
#terms ul + p , #terms ul{
margin-top : 2.187rem;
}
#adviser .introduction-box .inbox .cap{
width : 100%;
max-width : 100%;
margin-bottom : 1.5rem;
}
#adviser .introduction-box .inbox dl{
width : 100%;
max-width : none;
}
#adviser .introduction-box .inbox dt{
padding-bottom : .75rem;
margin-bottom : .75rem;
margin-left : auto;
margin-right : auto;
font-size : 1.5rem;
font-weight : 700;
color : rgb( 182 0 20 );
text-align : center;
border-bottom : 1px solid rgb( 182 0 20 );
}
#adviser .introduction-box .inbox dd{
font-size : 1.25rem;
}
#adviser .introduction-box .inbox{
margin-bottom : 3rem;
}
#adviser .introduction-box h3{
margin-bottom : 4rem;
}
#adviser .introduction-box .text-center{
font-size : 1.5rem;
}
#adviser .introduction-box{
margin-bottom : 6rem;
}
#adviser .support-box .inbox .cap{
max-width : 50%;
margin-left : auto;
margin-right : auto;
}
#adviser{
max-width : none;
}
#adviser .inner{
max-width : none;
}
#adviser .other-box .inbox{
width : auto;
max-width : none;
margin : 0 1.25rem 1.25rem;
}
.page-contents .text-box .list-box li::before{
position : absolute;
top : .625rem;
left : -.937rem;
display : block;
width : 10px;
height : 10px;
content : "";
background : rgb( 182 0 20 );
border-radius : 50%;
}
.page-contents .text-box .list-box li{
margin-bottom : .937rem;
line-height : 1.6;
}
.page-contents .text-box .list-box li{
position : relative;
margin-left : 15px;
font-size : 1.25rem;
}
#adviser .other-box{
margin-bottom : 3.125rem;
}
#adviser .other-box .itembox p{
font-size : 1.6rem;
}
.question-box h3{
padding : 1.25rem 0;
font-size : 1.875rem;
}
.question-box ul{
margin-bottom : 1.562rem;
}
.question-box li{
align-items : flex-start;
padding : 1.562rem;
}
.question-box li .font_sans{
position : relative;
margin-right : .937rem;
font-size : 1.875rem;
font-weight : 700;
color : rgb( 182 0 20 );
}
.question-box li .txt{
width : calc( 100% - 3rem );
font-size : 1.187rem;
}
.other-link-box{
width : auto;
max-width : none;
padding-left : 1rem;
padding-right : 1rem;
margin : 0 auto 8rem;
}
.other-link-box ul{
justify-content : space-between;
}
.other-link-box li{
width : 48.5%;
height : 4.875rem;
line-height : 4.875rem;
}
.other-link-box li:not( :nth-child( 3n ) ){
margin-right : 0;
}
.category-voice .other-link-box li:nth-child( 1 ){
margin-right : 2%;
}
.other-link-box li:nth-child( -n + 3 ){
margin-bottom : 1.25rem;
}
#adviser .special-box dt .item-txt{
width : 5.312rem;
height : 5.312rem;
}
#adviser .special-box dt .item-txt .item{
font-size : .875rem;
}
#adviser .special-box dt .txt{
font-size : 1.5rem;
}
#adviser .special-box dt{
padding-bottom : .875rem;
margin-bottom : 2.525rem;
}
#adviser .special-box dd p{
font-size : 1.25rem;
}
#adviser .special-box dd{
font-size : 1.25rem;
}
#adviser .special-box{
margin-bottom : 6rem;
}
#adviser .special-box dd img{
float : right;
width : 8.687rem;
margin : 0 0 0 1.25rem;
}
#night .color-box h3{
width : auto;
height : 3.25rem;
margin : 0 auto 1.25rem;
font-size : 1.375rem;
line-height : 3.437rem;
}
#night .color-box header p{
text-align : left;
}
.page-contents .gallerys-box li{
max-width : 32%;
padding-top : 32%;
}
.page-contents .gallerys-box ul{
margin-bottom : 2.125rem;
}
#night .color-box header .item{
font-size : 2.437rem;
}
#night .night-box .inbox{
padding : 1rem;
}
#night .color-box{
padding : 0 0 3rem;
margin : 6.25rem 0 4rem;
}
.page-contents .gallerys-box li{
margin-bottom : 1rem ! important;
}
#night .icon-title .icon{
width : 2.812rem;
height : 3.5rem;
}
.page-contents .icon-title{
align-items : center;
justify-content : flex-start;
text-align : left;
}
#night .list-box{
width : auto;
padding : 0;
margin : auto;
}
#night .night-box{
margin : 0 auto 2.25rem;
}
#night .list-item-box{
box-sizing : border-box;
width : auto;
padding : 0;
margin : auto;
}
#night .list-item-box h4{
margin-bottom : .312rem;
margin-left : 20px;
font-size : 1.312rem;
}
#night .list-item-box h4::before{
top : .125rem;
left : -15px;
width : 10px;
height : 10px;
}
#night .list-item-box li:not( :last-of-type ){
margin-bottom : 1.562rem;
}
#night .list-item-box dt ,
#night .list-item-box dd{
font-size : 1.187rem;
}
#night .list-item-box dl{
padding : 1.25rem 0;
border-bottom : 1px solid rgb( 191 191 191 );
}
#night .list-item-box dl:first-of-type{
padding : 0 0 1.25rem;
}
#cafe .icon-title .icon{
width : 2.312rem;
height : 2.312rem;
margin-right : 15px;
font-size : 1.125rem;
line-height : 2.312rem;
color : white;
text-align : center;
}
#cafe .inbox{
margin-bottom : 3.75rem;
}
#cafe .icon-title p{
width : calc( 100% - 4rem );
font-size : 1.5rem;
font-weight : 700;
line-height : 1.5;
}
#cafe .icon-title{
margin-bottom : .937rem;
}
#cafe .inbox .item{
bottom : -80px;
right : -50px;
width : 8rem;
height : 8rem;
}
#cafe .inbox .item .item-txt{
font-size : 1.2rem;
}
#cafe .time-box .txt{
margin-bottom : 5px;
font-size : .937rem;
}
#cafe .box iframe{
width : 100%;
height : 15.625rem;
}
#cafe .access-box ul li{
font-size : 1.187rem;
line-height : 1.6;
}
#cafe{
max-width : none;
}
#cafe .inner{
max-width : none;
}
#house .color-box ,
#cafe .color-box{
padding : 3.125rem 0;
margin : 3.125rem 0;
}
#house{
max-width : none;
margin-bottom : 6.25rem;
}
#house .inner{
max-width : none;
}
#house .slidebox h3{
width : 25.25rem;
height : 3.25rem;
margin : 0 auto 20px;
font-size : 1.375rem;
line-height : 3.437rem;
}
#house .slidebox p{
padding-left : 1rem;
padding-right : 1rem;
font-size : 1rem;
text-align : left;
}
#house .slidebox .inner{
padding-left : 0;
padding-right : 0;
}
#house .slidebox .inbox{
padding : 12rem 0 20px;
}
#house .slidebox header{
top : 2rem;
}
#house #house-banner .text{
font-size : 1.187rem;
}
#ticket .top-box ,
#house .slidebox{
margin-bottom : 3.75rem;
}
#ticket .top-box h3{
margin-bottom : 1.562rem;
font-size : 2.125rem;
}
#ticket .top-box .text{
text-align : left;
}
#ticket .top-box .text .txt{
font-size : 1.625rem;
}
#ticket .top-box .item-txt{
font-size : .75rem;
line-height : 1.4;
text-align : left;
}
#ticket{
box-sizing : border-box;
padding-left : 1rem ! important;
padding-right : 1rem ! important;
}
#ticket .color-box{
padding : 0 1.25rem;
}
#ticket .color-box li{
padding : 1.25rem 0;
}
#ticket .color-box .item{
width : 1.562rem;
height : 1.562rem;
margin-right : 15px;
font-size : .75rem;
line-height : 1.662rem;
}
#ticket .color-box .item-txt{
width : calc( 100% - 4rem );
}
#ticket .color-box .txt{
font-size : 1.875rem;
}
#ticket .box-color-txt{
height : 2.875rem;
margin-bottom : 2.187rem;
font-size : 1.312rem;
line-height : 3.125rem;
}
#ticket .last-box h3{
padding : 0 2rem;
text-align : left;
}
#ticket .last-box h3 .minicon{
width : 4.5rem;
}
#ticket .last-box h3 .txt{
width : calc( 100% - 5rem );
line-height : 1.5;
}
#ticket .last-box{
margin-bottom : 3.75rem;
}
.voice-select-box h3{
margin-bottom : 4.5rem;
font-size : 1.875rem;
}
#contact ,
#regulation ,
#policy ,
#message ,
#system{
padding-left : 1rem;
padding-right : 1rem;
}
.page-contents .flow-box{
padding : 1rem;
margin-bottom : 3rem;
}
.page-contents .flow-box .text-box{
padding : 2rem;
}
.page-contents .flow-box .border-box .icon{
width : 2.312rem;
height : 2.312rem;
margin-right : .625rem;
font-size : 1.125rem;
line-height : 2.425rem;
}
.page-contents .flow-box .border-box li .cap{
margin-bottom : 1.5rem;
}
.page-contents .flow-box .border-box li:not( :last-child ){
padding-bottom : 2rem;
margin-bottom : 1rem;
}
.page-contents .flow-box .border-box li:first-child{
padding-bottom : 3rem;
}
.page-contents .flow-box .border-box .title{
margin-bottom : 1rem;
}
.page-contents .flow-box .border-box .title p{
width : calc( 100% - 3rem );
max-width : none;
font-size : 1.375rem;
}
.page-contents .flow-box .border-box .item{
width : auto;
max-width : none;
margin : .937rem 6.875rem 0;
}
.page-contents .flow-box .text-box p{
margin-bottom : 1rem;
font-size : 1.25rem;
}
.page-contents .flow-box .text-box p .item-color.font-w{
font-size : 2.5rem;
}
.page-contents .flow-box article.box{
margin-bottom : 0;
}
#guide .item-box .inbox:last-of-type h3{
font-size : 1.675rem;
}
#guide{
margin-bottom : auto;
}
#guide .color-box .inbox{
min-width : 100%;
}
#guide .color-box br{
display : none;
}
#contact , #policy , #regulation , #terms , #sitemap , #contact , #thanks , #news{
margin-bottom : 10rem;
}
#thanks .btn{
margin-top : 3rem;
}
.page-contents .number-list ol{
margin-left : 1rem;
}
.page-contents .box-title .text{
font-size : 1.875rem;
}
#system .box-title .text{
margin-top : 1.875rem;
}
#system .border-title , #guide .border-title{
padding-left : .937rem;
margin-bottom : 1.562rem;
font-size : 1.312rem;
border-left : .25rem solid rgb( 182 0 20 );
}
#system .item-list{
padding : 1.875rem;
margin-top : 1.25rem;
margin-bottom : 1.25rem;
}
#system .number-list p{
width : calc( 100% - 3rem );
margin-bottom : 0;
font-weight : 700;
}
#system .number-list li{
align-items : flex-start;
justify-content : flex-start;
margin-left : 0;
}
#system .number-list li .icon{
width : 1.562rem;
height : 1.562rem;
margin-right : 10px;
font-size : 1rem;
line-height : 1.662rem;
}
.page-contents .box-title .item-arrow{
width : 1.562rem;
vertical-align : -.312rem;
}
#message .box-title{
font-size : 1.675rem;
text-align : left;
}
#message .item-list{
box-sizing : border-box;
padding : 1.875rem;
margin-top : 1.25rem;
margin-left : 0;
margin-right : 0;
background : rgb( 240 236 236 );
}
.page-contents .text-box p:not( :last-of-type ){
margin-bottom : 1.25rem;
}
#policy .number-list{
padding : 1.875rem;
margin : 2.125rem 0;
}
#policy .number-list li{
position : relative;
margin-left : 1.25rem;
font-size : 1.287rem;
line-height : 1.6;
}
#policy .number-list li:not( :last-child ){
margin-bottom : 1.875rem;
}
#policy .address-box h3 ,
#policy .address-box li{
font-size : 1.187rem;
}
#policy .address-box h3 ,
.page-contents .address-box li:not( :last-child ){
margin-bottom : .75rem;
}
#regulation .top-box li{
font-size : 1.187rem;
line-height : 1.6;
}
#regulation h2{
margin-bottom : 1.275rem;
font-size : 1.5rem;
}
.page-contents .number-list li{
margin-left : 1.25rem;
font-size : 1.187rem;
line-height : 1.6;
}
.page-contents .number-list li:not( :last-child ){
margin-bottom : 2.5rem;
}
#company dl{
padding : 0 1rem;
}
#company dt{
width : 8.312rem;
max-width : none;
}
#company dd{
width : auto;
max-width : 100%;
}
#company dl:last-of-type{
margin-bottom : 100px;
}
#company dt ,
#company dd{
font-size : 1.125rem;
line-height : 1.8;
} #company dl.wrap-box{
display : block;
}
#company dl:not( :last-of-type ){
margin-bottom : 1.25rem;
}
#company dl:last-of-type{
margin-bottom : 3.75rem;
}
#contact .top-box{
margin-bottom : 3.125rem;
}
#contact .text-center{
margin-bottom : 3.125rem;
}
#contact .item-table tr{
margin-bottom : 2rem;
}
#contact .item-table tr ,
#contact .item-table th ,
#contact .item-table td{
display : block;
}
#contact .item-table td{
width : auto;
}
#contact .item-table th{
width : auto;
margin-bottom : 1.25rem;
}
#contact .item-table th ,
#contact .item-table td{
padding-bottom : 0;
}
#contact.confirm .item-table th , #contact.confirm .item-table td{
padding-bottom : 0;
}
#contact.confirm .item-table th .txt , #contact.confirm .item-table td{
font-size : 1.25rem;
}
#contact.page-contents .itembtn button.btn.btn-gray{
margin-bottom : 20px;
}
.page-header{
display : block;
width : auto;
max-width : none;
margin-top : 5.312rem;
margin-bottom : 3rem;
}
.page-header .item-spcap{
width : 100%;
}
.page-header .cap{
display : none;
}
.page-header .inbox{
display : block;
width : 100%;
height : 8.8034rem;
text-align : center;
background-image : url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/page-header-bg_sp.png);
background-repeat : no-repeat;
background-position : center top;
background-size : 100%;
}
.page-header .inbox .itemcap{
background : none;
}
.page-header .inbox .font_sans{
margin-bottom : 1.162rem;
font-size : 1.562rem;
}
.page-header .inbox h1{
font-size : 1.875rem;
font-weight : 700;
}
#ticket{
max-width : none;
}
#ticket .inner{
width : auto;
}
#gallery .inner{
display : block;
max-width : none;
margin-bottom : 9rem;
}
#gallery .inbox{
width : auto;
max-width : none;
}
#gallery .inbox:not( :last-child ) ,
#gallery .inbox:not( :nth-of-type( n + 3 ) ){
margin-bottom : 3.125rem;
}
.single-gallery .listbox li{
max-width : 49.5%;
padding-top : 49.5%;
margin-bottom : 1%;
}
#slide-auto-box{
width : auto;
height : auto;
margin-bottom : 2rem;
}
#gallery .slick-list , .single-gallery .slick-list , #slide-auto-box .cap figure{
height : 100%;
min-height : 263.5px;
}
.single-gallery .listbox li{
margin-right : 1%;
}
.single-gallery .listbox li:nth-child( 2n ){
margin-right : 0;
}
#voice .description-txt{
margin-bottom : 2.5rem;
font-size : 1.125rem;
text-align : left;
}
.category-voice , #voice{
max-width : none;
padding-left : 1rem;
padding-right : 1rem;
}
.voice-box .inbox li{
width : 48.5%;
max-width : none;
}
.voice-box .inbox li:not( :nth-child( 3n ) ){
margin-right : 0;
}
.voice-box ul{
justify-content : space-between;
margin-bottom : 1.875rem;
}
.voice-box .inbox li .cap{
width : 100%;
padding-top : 12rem;
margin-bottom : .875rem;
}
.voice-box .inbox li dt{
margin-bottom : 1rem;
font-size : 1.25rem;
}
.voice-box .inbox li dd .txt{
display : block;
width : 100%;
font-size : 1rem;
}
.single-voice-box .other-link-box li .txt , .category-voice .other-link-box li .txt{
font-size : .75rem;
}
.single-voice-box .other-link-box , .category-voice .other-link-box{
padding-left : 0;
padding-right : 0;
}
.other-color-box{
padding : 3rem 0;
margin-bottom : 3rem;
}
.other-color-box.voice-box .inbox li{
width : 100%;
max-width : none;
margin-bottom : 3rem;
}
.single-voice-box{
padding-left : 1rem;
padding-right : 1rem;
margin-bottom : 2rem;
}
.single-voice-box header .text{
margin-bottom : 1rem;
}
.single-voice-box header .text .txt{
display : block;
margin-bottom : 1rem;
font-size : 1.25rem;
}
.single-story-box .text-box h3{
margin-bottom : 1.5rem;
font-size : 1.5rem;
}
.single-voice-box header .text .txt:not( :last-of-type ){
margin-right : 0;
}
.single-story-box .text-box header h3{
margin : 0 auto 1rem;
color : #000;
text-align : center;
}
.single-story-box .conte-box{
padding : 1.875rem 0;
}
.single-voice-box header .cap{
padding-left : 0;
padding-right : 0;
}
.single-story-box .minbox{
display : block;
padding : 1.25rem;
margin-bottom : 1.875rem;
}
.single-story-box .minbox .cap{
width : 100%;
margin-bottom : 1.25rem;
}
.single-story-box .minbox .data{
width : 100%;
margin-left : 0;
}
.single-story-box .minbox .data dl:not( :last-of-type ){
margin-bottom : .937rem;
}
.single-voice-box .contents-box dt ,
.single-voice-box .contents-box dd{
font-size : 1.25rem;
}
.other-color-box.voice-box .box-title{
margin-bottom : 3.125rem;
font-size : 1.675rem;
}
.single-sns-box li .box .icon{
width : 1.625rem;
}
.single-voice-box header{
margin-bottom : 2.5rem;
}
.single-sns-box li .txt{
margin-left : .75rem;
font-size : .875rem;
color : white;
}
.single-sns-box li{
width : 32%;
max-width : none;
height : 3.125rem;
}
.single-voice-box .contents-box{
width : auto;
max-width : none;
margin : 0 auto 2.5rem;
}
.category-voice .description-txt{
margin-bottom : 2.5rem;
font-size : 1.125rem;
line-height : 1.6;
text-align : left;
}
.category-voice .other-link-box{
max-width : none;
} .category-faq .itembox{
margin : 0 1rem 3rem;
}
.category-faq .itembox .itemtxt{
font-size : 1.5rem;
}
.page-contents.category-faq .text-box .data p{
font-size : 1.25rem;
}
.page-contents.category-faq .icon-title .icon{
display : block;
margin : 0 auto 10px;
text-align : center;
}
.page-contents.category-faq .icon-title{
text-align : center;
} #news.page-contents .box-title{
box-sizing : border-box;
padding-left : 1rem;
padding-right : 1rem;
text-align : left;
}
.single-contents-box .contents-box{
padding-left : 1rem;
padding-right : 1rem;
}
#news.page-contents .other-box .box-title{
text-align : center;
}
.single-contents-box .other-box ul{
padding-left : 1rem;
padding-right : 1rem;
margin-bottom : 3rem;
}
#faq ul{
box-sizing : border-box;
padding-left : 1rem;
padding-right : 1rem;
margin-bottom : 3rem;
}
#faq li{
box-sizing : border-box;
max-width : 100%;
} #users p.description-txt{
font-size : 1.25rem;
line-height : 1.8;
}
#users .voice-box .inbox{
width : 100%;
padding : 2rem 1rem;
padding-top : 70px;
padding-bottom : 115px;
margin-bottom : 1rem;
}
.page-contents article.box.story-box{
margin-top : 3rem;
margin-bottom : 10rem;
}
#users .voice-box .inbox:nth-child( n+3 ){
padding-bottom : 115px;
margin-bottom : 1rem;
}
#users .voice-box .inbox h4{
margin-bottom : 2rem;
font-size : 1.5rem;
}
#users .voice-box .inbox li dt{
font-size : 1.4rem;
}
#users .voice-box .inbox .btn{
width : calc( 100% - 2rem );
}
#faq.page-contents ul.wrap-box{
margin-bottom : 0;
}
.story-box{
width : 100%;
}
}
.index-other-contents .itemcap p{
display : none;
} .nolink{
filter : alpha( opacity=30 );
opacity : .3;
}
.nolink a , a.nolink{
pointer-events : none ! important;
}
.index-other-contents .nolink{
filter : alpha( opacity=100 );
opacity : 1;
}
.index-other-contents .nolink img{
filter : alpha( opacity=30 );
opacity : .3;
}
.index-other-contents .nolink .itemcap{
position : relative;
}
.index-other-contents .nolink .itemcap p{
position : absolute;
top : 50%;
left : 50%;
display : inherit;
padding : 0;
margin : 0;
font-size : 36px;
font-weight : 500;
color : rgb( 182 0 20 );
-ms-transform : translate( -50% , -50% );
-webkit-transform : translate( -50% , -50% );
transform : translate( -50% , -50% );
} @media screen and ( max-width : 767px ){
.index-other-contents .nolink .itemcap p{
font-size : 2rem;
text-align : center;
}
} .tourBanner{
text-align : center;
}
.tourBanner a{
display : flex;
align-items : center;
justify-content : space-between;
width : 88%;
max-width : 500px;
height : 60px;
padding : 10px 2%;
margin : 0 auto;
border : solid #b60014 2px;
-webkit-transition : .2s ease-in-out;
-moz-transition : .2s ease-in-out;
-o-transition : .2s ease-in-out;
transition : .2s ease-in-out;
}
.tourBanner a:hover{
opacity : .8;
}
.tourBanner a .logo{
padding-right : 20px;
}
.tourBanner a .btn{
display : flex;
flex : 1;
align-items : center;
justify-content : center;
height : 60px;
font-size : 1.2rem;
font-weight : 700;
line-height : 100%;
color : #fff;
background : #b60014;
}
.tourBanner a .logo img{
width : auto;
max-width : 200px;
max-height : 60px;
}
@media screen and ( max-width : 767px ){
.tourBanner{
margin-bottom : 40px;
}
} .wrap-index-btn{
width : 96%;
max-width : 860px;
margin : 0 auto;
}
.wrap-index-btn .innr{
display : flex;
justify-content : space-between;
}
.wrap-index-btn .innr div{
width : 48%;
}
.wrap-index-btn .innr div span{
font-size : 1rem;
font-weight : 800;
line-height : 160%;
}
.wrap-index-btn .innr div a{
display : block;
padding : 20px 4%;
color : #b60014;
background : url(//jo-katsu.com/release/images/common/icon_right_R.png) no-repeat left 20px center;
background-size : 16px auto;
border : #b60014 solid 2px;
-webkit-transition : .2s ease-in-out;
-moz-transition : .2s ease-in-out;
-o-transition : .2s ease-in-out;
transition : .2s ease-in-out;
}
.wrap-index-btn .innr div a:hover{
opacity : .8;
}
.wrap-index-btn .innr div a span{
display : block;
padding-left : 10%;
}
.wrap-index-btn .innr div.right a{
color : #fff;
background : url(//jo-katsu.com/release/images/common/icon_right.png) no-repeat left 20px center #b60014;
background-size : 16px auto;
}
@media screen and ( max-width : 767px ){
.wrap-index-btn{
margin-top : -20px;
margin-bottom : 40px;
}
.wrap-index-btn .innr div a{
display : block;
padding : 10px 4%;
color : #b60014;
background : url(//jo-katsu.com/release/images/common/icon_right_R.png) no-repeat left 5px center;
background-size : 10px auto;
border : #b60014 solid 2px;
}
.wrap-index-btn .innr div.right a{
color : #fff;
background : url(//jo-katsu.com/release/images/common/icon_right.png) no-repeat left 5px center #b60014;
background-size : 10px auto;
}
#story .voice-box{
padding-left : 1rem;
padding-right : 1rem;
}
} .wp-pagenavi{
margin : 40px auto 100px;
text-align : center;
}
.wp-pagenavi a , .wp-pagenavi span{
padding : 5px 10px ! important ;
margin : 0 5px ! important;
color : #c51b19;
text-decoration : none;
border : 2px solid #c51b19 ! important;
}
.wp-pagenavi a:hover , .wp-pagenavi span.current{
color : #fff ! important;
background : #c51b19 ! important;
}
.caution{
padding : 20px 2%;
margin-bottom : 60px;
color : rgb( 182 0 20 );
border : rgb( 182 0 20 ) solid 2px;
}
.coution ol{}
.coution ol li{
margin-bottom : 10px;
}
.coution ol li:last-child{
margin-bottom : 0;
}
.form2 .form-btn-last{
display : flex;
justify-content : center;
width : 100%;
text-align : center;
}
.form2 .button-submit{
background : none;
border : none;
}
.form2 .button-submit{
padding : 30px;
font-size : 16px;
color : #fff;
cursor : pointer;
background : rgb( 182 0 20 );
border-radius : 5px;
}
.form2 .text-area{
display : block;
padding : 10px 0;
}
.form2 .selectbox{
box-sizing : border-box;
height : 48px;
padding : 10px;
font-size : 15px;
resize : none;
background : rgb( 248 248 248 );
border : 1px solid rgb( 204 204 204 );
border-radius : 4px;
}
.WrapError input{
border : rgb( 182 0 20 ) solid 1px;
}
#contact .item-table .input-txt.WrapError{
border : rgb( 182 0 20 ) solid 1px;
} a.nolink{
　pointer-events : none;
filter : alpha( opacity=50 );
opacity : .5;
}
a.anchor-txt.nolink{
display : table;
color : #fff;
text-align : center;
background-color : rgb( 0 0 0 / .7 );
filter : alpha( opacity=100 );
opacity : 1;
}
a.anchor-txt.nolink span{
display : table-cell;
font-size : 1.8rem;
vertical-align : middle;
}
.other-link-box a.anchor-txt.nolink{
background-color : rgb( 0 0 0 / .5 );
border : none ! important;
}
.other-link-box a.anchor-txt.nolink span{
font-size : 1.6rem;
}
.caution p{
margin : auto;
font-size : 1.5rem;
text-align : center;
}
@media screen and ( max-width : 767px ){
a.anchor-txt.nolink span{
font-size : 2.4rem;
}
.other-link-box a.anchor-txt.nolink span{
font-size : 1.3rem;
}
a.anchor-txt.nolink{
display : block;
}
a.anchor-txt.nolink span{
position : absolute;
top : 45%;
display : block;
width : 100%;
margin : 0 auto;
text-align : center;
}
.index-benefits-box a.anchor-txt.nolink span{
top : 40%;
}
} @media screen and ( max-width : 374px ){
#header-nav .btn{
width : 122px;
}
#nav-item-1{
margin-left : 5px;
}
#panel-btn{
margin-left : 5px;
}
#header-nav nav{
padding-top : 10px;
padding-right : 8px;
}
}
@media screen and ( max-width : 349px ){
#header-nav .btn{
width : 100px;
}
#panel-btn{
width : 35px;
height : 30px;
margin-left : 10px;
}
}