@charset "utf-8";
   h1,
h2,
h3,
h4,
h5,
h6,
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
caption,
canvas,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
form,
footer,
header,
hgroup,
h1,
h2,
h3,
h4,
h5,
h6,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
main,
small,
span,
strike,
strong,
sub,
summary,
sup,
tt,
table,
tbody,
textarea,
tfoot,
thead,
time,
tr,
th,
td,
u,
ul,
var,
video {
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
white-space: normal;
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1;
background: transparent;
font-family: "Roboto", "Noto Sans JP", sans-serif;
font-weight: 400;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
display: block;
}
img {
vertical-align: bottom;
border: none;
max-width: 100%;
width: 100%;
height: auto;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.2s ease-in;
transition: 0.2s ease-in;
filter: alpha(opacity=100);
opacity: 1;
}
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: 0.1em;
} .clearfix {
zoom: 1;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
@media print {
.clearfix {
overflow: hidden;
}
}
.Tcenter {
text-align: center;
}
html {
height: 100%;
margin: 0 !important;
}
.inner {
max-width: 1200px;
width: 100%; margin-left: auto;
margin-right: auto;
position: relative;
box-sizing: border-box;
z-index: 98;
justify-content: space-between;
}
.wrap-box {
-ms-flex-pack: justify;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
}
.anchor-txt {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
img {
width: 100%;
max-width: 100%;
} #header {
padding-top: 20px;
padding-bottom: 20px;
position: relative;
z-index: 300;
position: fixed;
top: 0;
left: 0;
width: 100%;
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 {
width: 162px;
display: block;
}
#header-nav .btn img {
height: 100%;
}
#header-nav .btn:hover img {
opacity: 0.6;
}
#nav-item-1 {
margin-left: 20px;
}
#panel-btn {
width: 45px;
margin-left: 20px;
height: 50px;
border: none; outline: none;
position: relative;
cursor: pointer;
background: none;
z-index: 101;
}
#panel-btn-icon {
display: block;
position: absolute;
text-align: center;
z-index: 11;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 45px;
height: 5px; -webkit-transition: 0.2s;
transition: 0.2s;
}
#panel-btn-icon:before,
#panel-btn-icon:after {
display: block;
content: "";
position: absolute;
top: 50%;
width: 45px;
height: 5px;
background: rgb(182, 0, 20);
-webkit-transition: 0.3s;
transition: 0.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 {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
#panel-btn .close:after {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.sp-menu {
display: block;
position: fixed;
right: 0;
top: 0;
z-index: 1002;
width: 45px;
}
.sp-menu .txt {
display: block;
text-align: center;
letter-spacing: 0.1em;
}
#sp-menubox li.item .txt a:after {
content: "";
position: absolute;
top: 6px; margin-left: 10px;
width: 0;
height: 0;
border-style: solid;
border-width: 7px 5px 0 5px;
border-color: #ffffff transparent transparent transparent;
} #sp-menubox li:before {
content: "";
position: absolute;
top: 10px;
left: -25px;
width: 15px;
height: 1px;
background: white;
}
#sp-menubox .minbox {
margin-left: 30px;
margin-top: 20px;
display: none;
}
#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 {
width: 360px;
position: fixed;
top: 105px;
right: -50%;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
z-index: 99;
height: 100%;
background: rgb(186, 0, 20);
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 50px;
overflow-x: hidden;
}
#sp-menubox ul {
margin-left: 25px;
margin-bottom: 25px;
}
#sp-menubox li {
position: relative;
}
#sp-menubox li:not(:last-child) {
padding-bottom: 20px;
}
#sp-menubox li a {
color: white;
font-size: 18px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
#sp-menubox .text-gallery {
width: 100%;
display: block;
margin: 0 auto 100px;
}
#searchform {
width: 100%;
border: 1px solid white;
border-radius: 6px;
background: rgb(186, 0, 20);
padding: 15px 20px 15px 15px;
margin-bottom: 25px;
position: relative;
box-sizing: border-box;
}
#searchform #s {
background: none;
color: white;
border: none;
font-size: 16px;
width: 90%;
}
#searchform #s::placeholder {
font-size: 14px;
color: #fff;
font-weight: bold;
}
#searchsubmit {
position: absolute;
width: 38px;
height: 38px;
top: calc(50% - 19px);
right: 5px;
background: none;
border: none;
}
#searchsubmit::before {
display: block;
position: absolute;
content: "";
width: 15px;
height: 15px;
top: calc(50% - 9px);
left: calc(50% - 9px);
border-radius: 50%;
box-shadow: 0 0 0 3px #fff;
}
#searchsubmit::after {
display: block;
position: absolute;
content: "";
width: 8px;
height: 6px;
top: calc(50% + 6px);
left: calc(50% + 2px);
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;
color: #fff;
font-weight: bold;
}
#searchform #s::-moz-placeholder {
font-size: 14px;
color: #fff;
font-weight: bold;
}
#searchform #s:-ms-input-placeholder {
font-size: 14px;
color: #fff;
font-weight: bold;
}
#searchform #s::-ms-input-placeholder {
font-size: 14px;
color: #fff;
font-weight: bold;
} #top-banner .cap figure {
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
}
#top-banner {
width: 100%;
position: relative;
margin: 105px auto 60px;
}
#top-banner .cap {
padding-top: 4.9926%;
position: relative;
} #footer {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/footer-bg.png) no-repeat center top;
background-size: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
height: 290px;
}
@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 {
justify-content: center;
align-items: center;
width: 100%;
margin: 0 auto 50px;
}
#footer .nav li {
margin: 0 10px;
position: relative;
font-size: 12px;
padding-top: 2px;
}
#footer .nav li:first-child {
font-size: 16px;
padding-top: 0;
}
#footer .nav li:first-child a:after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 2px;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
background-color: rgb(182, 0, 20);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#copy {
text-align: center;
font-style: normal;
font-size: 12px;
margin: 0 auto;
padding: 20px 0;
display: block;
}
#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 {
max-width: 407px;
width: 100%;
margin: 80px auto;
display: block;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#line-banner:hover img {
opacity: 0.6;
}
#footer .nav li a::after {
content: "";
position: absolute;
bottom: -6px;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 2px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
background-color: rgb(182, 0, 20);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#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 {
content: "";
position: absolute;
bottom: -6px;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 2px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
background-color: rgb(182, 0, 20);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#footer-nav .minbox a::after {
content: "";
position: absolute;
bottom: 6px !important;
}
#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;
vertical-align: middle;
text-decoration: none;
z-index: 11;
}
#footer-nav ul li.item-txt .txt::before {
position: absolute;
top: 0;
content: "";
vertical-align: middle;
right: -16px;
width: 8px;
height: 8px;
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 {
display: none;
width: auto;
position: absolute;
top: 14px;
background: rgba(255, 255, 255, 0.8);
padding: 20px 20px 10px;
left: -20px;
z-index: 100;
}
#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 {
color: rgb(182, 0, 20);
text-align: center;
font-size: 60px;
font-weight: 500;
margin-bottom: 80px;
letter-spacing: 0.1em;
}
.index-news-box .news-list-box {
max-width: 564px;
width: 100%;
margin: auto;
position: relative;
padding-left: 50px;
padding-right: 50px;
}
.index-news-box .news-list-box:before,
.index-news-box .news-list-box:after {
top: -50px;
content: "";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 1px;
margin: 0 auto;
text-align: center;
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-position: center;
background-repeat: no-repeat;
}
.index-news-box .news-list-box:before {
bottom: -50px;
top: auto;
}
.news-list-box li {
position: relative;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.news-list-box li:not(:last-child) {
margin-bottom: 40px;
}
.news-list-box dt {
justify-content: flex-start;
align-items: center;
margin-bottom: 12px;
}
.news-list-box .item {
background: rgb(182, 0, 20);
color: white;
margin-left: 10px;
padding: 2px 6px 5px 4px;
border: 1px solid rgb(182, 0, 20);
-webkit-transition: 0.5s;
transition: 0.5s;
}
.news-list-box li dd {
-webkit-transition: 0.5s;
transition: 0.5s;
}
.index-news-box {
margin: 100px 0 190px;
}
.news-list-box li:hover .item {
background: white;
color: rgb(182, 0, 20);
}
.news-list-box li:hover dd {
color: rgb(182, 0, 20);
text-decoration: underline;
} .sns-box {
background: rgb(240, 236, 236);
padding: 28px 0;
}
.sns-box .inner {
transform: translateY(-78px);
}
.sns-box .text {
text-align: center;
margin-bottom: 60px;
}
.sns-box h2 {
max-width: 306px;
width: 100%;
margin: 0 auto 20px;
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/fukidashi.png) no-repeat center top;
background-size: 100%;
color: rgb(182, 0, 20);
text-align: center;
font-size: 20px;
padding: 18px 0 50px;
line-height: 1.6;
font-weight: bold;
}
.sns-box ul {
justify-content: center;
align-items: center;
}
.sns-box li {
position: relative;
}
.sns-box li:hover img {
opacity: 0.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 {
margin: auto;
position: relative;
}
.index-other-contents .box:first-of-type {
margin: 0 auto 120px;
}
.index-other-contents .story-box:after {
margin: auto;
position: absolute;
display: block;
content: "";
left: 0;
top: 50%;
width: 100%;
height: 252px;
z-index: 2;
background-color: #ffffff;
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 {
max-width: 860px;
width: 100%;
margin: auto; position: relative;
z-index: 10;
}
.index-other-contents h2 {
letter-spacing: 0.1em;
text-align: center;
font-size: 60px;
font-weight: 500;
color: rgb(182, 0, 20);
line-height: 1;
margin-bottom: 20px;
}
.index-other-contents .itemcap .txt {
position: absolute;
text-align: center;
z-index: 2;
top: 62%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: 0.2s;
transition: 0.2s;
}
.index-other-contents .text {
text-align: center;
margin: 5px 0 30px;
}
.index-other-contents .itemcap .cap {
position: relative;
}
.index-other-contents .story-box {
width: 100%;
}
.index-other-contents .story-box .itemcap {
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);
padding-top: 25px;
position: relative;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.index-other-contents .itemcap:hover img {
opacity: 0.6;
}
.index-other-contents .box:last-of-type .itemcap {
margin-bottom: 30px;
}  .service-box {
background: rgb(182, 0, 20);
margin-bottom: 70px;
height: 638px;
}
.service-box h2 {
color: rgb(182, 0, 20);
text-align: center;
font-size: 60px;
margin-bottom: 30px;
letter-spacing: 0.1em;
font-weight: 500;
}
.service-box .text {
text-align: center;
margin-bottom: 50px;
}
.service-box .box .icon {
width: 50px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.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 {
max-width: 32%;
width: 100%;
padding-top: 31.915%;
position: relative;
overflow: hidden;
}
.service-box .cap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
z-index: 1;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.service-box .box .title {
position: absolute;
text-align: center;
z-index: 2;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: 0.2s;
transition: 0.2s;
width: 100%;
}
.service-box .box .title .font_sans,
.service-box .box h3 {
color: white;
}
.service-box .box h3 {
font-weight: 600;
line-height: 1.6;
font-size: 18px;
}
.service-box .box .font_sans {
border-bottom: 1px solid white;
display: inline-block;
padding-bottom: 10px;
margin-bottom: 8px;
font-size: 16px;
padding-left: 5px;
padding-right: 5px;
font-weight: 500;
} .index-benefits-box {
position: relative;
margin-bottom: 300px;
overflow: hidden; height: 720px;
padding-top: 52px;
}
.index-benefits-box::before,
.index-benefits-box::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.index-benefits-box::before {
left: 0;
width: 100%;
height: 208px;
background: rgb(182, 0, 20);
}
.index-benefits-box::after {
right: -100px;
left: auto;
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 {
text-decoration: underline;
color: rgb(182, 0, 20);
font-weight: bold;
}
.index-benefits-box h3 {
text-align: center;
letter-spacing: 0.1em;
font-weight: bold;
color: rgb(182, 0, 20);
font-size: 19px;
margin-bottom: 120px;
}
.index-benefits-box h2 {
position: relative;
max-width: 435px;
width: 100%;
margin: 0 auto 50px;
text-align: center;
color: rgb(182, 0, 20);
font-size: 36px;
font-weight: bold;
}
.index-benefits-box h2:after {
bottom: -10px;
content: "";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 1px;
margin: 0 auto;
text-align: center;
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-position: center;
background-repeat: no-repeat;
}
.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 {
content: "";
position: absolute;
width: 1px;
height: 100%;
background: rgb(182, 0, 20);
left: 50%;
transform: translate(-50%, 0);
}
.index-benefits-box .pc-only li:first-child .wrap-box {
height: 100%;
align-items: center;
justify-content: center;
}
.index-benefits-box .pc-only li:first-child {
padding-bottom: 20px;
padding-top: 10px;
}
.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;
padding-right: 20px;
display: block;
color: #3e3a39;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.index-benefits-box .btn .txt::before,
.index-benefits-box .btn .txt::after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
content: "";
vertical-align: middle;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.index-benefits-box .btn .txt::before {
width: 12px;
height: 12px;
-webkit-border-radius: 50%;
border-radius: 50%;
background: rgb(182, 0, 20);
}
.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;
border: 1px solid rgb(182, 0, 20);
padding: 10px;
background: white;
}
.index-benefits-box li {
position: relative;
border-bottom: 1px solid rgb(182, 0, 20);
padding-bottom: 30px;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.index-benefits-box li:last-child {
border-bottom: none;
}
.index-benefits-box li {
padding-top: 30px;
}
.index-benefits-box dl {
justify-content: center;
align-items: center;
}
.index-benefits-box dt {
width: 80px;
margin-right: 20px;
}
.index-benefits-box dd {
max-width: 275px;
width: 100%;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.index-benefits-box .text {
font-weight: bold;
font-size: 22px;
line-height: 1.4;
color: rgb(182, 0, 20);
margin-bottom: 8px;
-webkit-transition: 0.5s;
transition: 0.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 {
content: "";
width: 10px;
height: 10px;
top: 10px;
left: -15px;
display: block;
position: absolute;
border-radius: 50%;
background: rgb(182, 0, 20);
}
#guide .color-box {
background-color: rgba(250, 236, 226, 0.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);
padding: 0 20px;
}
#guide .color-box .inbox {
min-width: 500px;
}
#guide .color-box li {
border-bottom: 1px solid rgb(182, 0, 20);
padding: 30px 0;
}
#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 {
font-size: 28px;
color: rgb(182, 0, 20);
font-weight: bold;
display: inline;
border-bottom: 1px dotted rgb(182, 0, 20);
padding: 0 2px 4px;
line-height: 2.2;
letter-spacing: 0.1em;
}
#guide .item-box h3.wrap-box {
background: rgb(182, 0, 20);
width: 100%;
align-items: center;
justify-content: center;
padding: 15px 0;
margin-bottom: 30px;
}
#guide .item-box .inbox {
margin-top: 30px;
}
#guide .item-box h3.wrap-box .icon {
width: 54px;
}
#guide .item-box h3.wrap-box .txt {
color: white;
font-size: 30px;
font-weight: bold;
}
#guide .item-box .inbox:last-of-type { }
#guide .item-box .inbox:last-of-type h3 {
text-align: center;
font-size: 21px;
border-radius: 6px;
background: rgb(182, 0, 20);
width: 100%;
padding: 15px 0;
color: white;
margin-bottom: 20px;
} #message .item-list {
margin-left: 50px;
margin-right: 50px;
margin-top: 20px;
background: rgb(240, 236, 236);
padding: 30px;
box-sizing: border-box;
}
#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 {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size: 100%;
width: 25px;
height: 25px;
line-height: 22px;
text-align: center;
color: white;
font-size: 16px;
margin-right: 10px;
}
#message .arrow-text {
max-width: 362px;
width: 100%;
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 {
max-width: 1640px;
width: 100%;
margin: 0 auto 50px;
text-align: center;
padding: 0 20px;
box-sizing: border-box;
}
#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) {
margin-right: 22px;
position: relative;
}
#topicpath ul li:not(:last-child):after {
content: "";
position: absolute;
display: block;
top: 2px;
right: -12px;
width: 6px;
height: 6px;
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;
table-layout: fixed;
max-width: 1600px;
width: 100%;
margin: 104.5px auto 20px;
}
.page-header .cap,
.page-header .inbox {
display: table-cell;
vertical-align: middle;
position: relative;
}
.page-header .cap {
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
padding-top: 33%;
}
.page-header .inbox {
background-size: 100%;
width: 33%;
text-align: center;
}
.page-header .inbox .itemcap {
background-image: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/page-header-bg.png);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.page-header .inbox .box {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 10;
color: white;
width: 100%;
}
.page-header .inbox .font_sans {
font-size: 25px;
margin-bottom: 25px;
letter-spacing: 0.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);
}
#adviser-test-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 {
font-size: 24px;
margin-bottom: 30px;
}
.search-everything-highlight-color {
background-color: rgb(182, 0, 20) !important;
color: white;
padding: 2px 6px 2px 6px;
} #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 {
background: rgb(246, 244, 245);
padding: 30px;
margin: 50px 0;
}
.page-contents .number-list ol {
counter-reset: number;
}
.page-contents .number-list.alphabet-list ol {
counter-reset: alphabet;
}
.page-contents .number-list li:before {
counter-increment: number;
content: counter(number) ".";
position: absolute;
top: 0;
left: -20px;
color: rgb(182, 0, 20);
font-weight: bold;
}
.page-contents .number-list.alphabet-list li:before {
counter-increment: alphabet;
content: counter(alphabet, lower-alpha) "） ";
position: absolute;
top: 0;
left: -20px;
color: rgb(182, 0, 20);
font-weight: bold;
}
.page-contents .number-list li {
line-height: 1.6;
margin-left: 20px;
position: relative;
font-size: 19px;
}
.page-contents .number-list li p {
font-size: 16px;
margin-top: 6px;
line-height: 1.6em;
}
.page-contents .number-list li:not(:last-child) {
margin-bottom: 40px;
}
.page-contents .number-list.alphabet-list li:not(:last-child) {
padding-left: 16px;
}
.page-contents h2.section-title {
font-size: 24px;
margin-bottom: 6px;
} #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 {
max-width: 133px;
width: 100%;
}
#company dd {
max-width: calc(100% - 133px);
width: 100%;
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 {
max-width: 290px;
width: 100%;
border: 1px solid rgb(182, 0, 20);
border-radius: 6px;
padding: 30px 10px;
box-sizing: border-box;
margin-bottom: 40px;
}
#gallery .inbox:nth-child(n + 4) {
margin-bottom: 0;
}
#gallery .inbox h3 {
text-align: center;
font-size: 24px;
font-weight: bold;
color: rgb(182, 0, 20);
margin-bottom: 30px;
}
#gallery .inbox li:nth-child(-n + 2) {
margin-bottom: 3%;
}
#gallery .inbox li {
width: 48.5%;
padding-top: 48.5%;
position: relative;
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 {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
position: absolute;
-webkit-transition: all 0.5s ease;
transition: all 0.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; text-align: center;
margin: 0 auto 100px;
}
#slide-auto-box .cap {
width: 100%;
padding-top: 7%;
position: relative;
}
#slide-auto-box .cap figure {
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; height: 667px;
}
#slide-auto-box .slick-dots {
bottom: 20px;
} .single-gallery .listbox {
justify-content: flex-start;
}
.single-gallery .listbox li {
max-width: 19%;
width: 100%;
position: relative;
overflow: hidden;
cursor: pointer;
margin-bottom: 1.3%;
padding-top: 19%;
}
.single-gallery .listbox ul.wrap-box {
justify-content: left;
}
.single-gallery .listbox li:not(:nth-child(5n)) {
margin-right: 1%;
}
.single-gallery .listbox .cap {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
position: absolute;
-webkit-transition: all 0.5s ease;
transition: all 0.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 {
max-width: 250px;
width: 100%;
}
#adviser .introduction-box .inbox dl {
max-width: 550px;
width: 100%;
}
#adviser .introduction-box .inbox dt {
color: rgb(182, 0, 20);
font-size: 23px;
font-weight: bold;
border-bottom: 1px solid rgb(182, 0, 20);
padding-bottom: 12px;
margin-bottom: 12px;
}
#adviser .introduction-box .inbox dd {
font-size: 16px;
line-height: 1.6;
}
#adviser .introduction-box .inbox dd .item-box {
border: 2px solid rgb(182, 0, 20);
padding: 10px 20px;
border-radius: 6px;
margin-top: 30px;
line-height: 1.6;
}
#adviser .introduction-box .inbox dd .item-box .icon {
background: rgb(182, 0, 20);
color: white;
padding: 6px 12px;
font-size: 15px;
font-weight: 700;
position: relative;
top: -24px;
display: inline-block;
}
#adviser .introduction-box .inbox dd .item-box .icon::after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 11px 5px 0 5px;
border-color: rgb(182, 0, 20) transparent transparent transparent;
bottom: -11px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#adviser .introduction-box .inbox dd .item-box ul li {
margin-bottom: 10px;
line-height: 1.6;
position: relative;
margin-left: 15px;
}
#adviser .introduction-box .inbox dd .item-box ul li:before {
content: "";
width: 5px;
height: 5px;
top: 10px;
left: -12px;
display: block;
position: absolute;
border-radius: 50%;
background: #000;
}
#adviser .introduction-box .inbox dd .item-box p {
margin-bottom: 10px;
}
#adviser .introduction-box .text-center {
text-align: center;
font-size: 24px;
}
#adviser .introduction-box .inbox dd .item-box {
text-align: center;
padding-left: 1rem;
padding-right: 1rem;
}
#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;
justify-content: flex-start;
flex-wrap: wrap;
}
#adviser .introduction-box .card {
flex: 0 0 calc(33.3% - 15px);
margin: 0 calc(7px + 0.015%) 15px;
position: relative;
}
#adviser .introduction-box .card .name-wrap {
position: absolute;
bottom: 0;
background: #950f0f;
opacity: 0.7;
font-size: 1em;
text-align: center;
color: white;
padding: 20px 0;
width: 100%;
}
@media screen and (max-width: 767px) {
#adviser .introduction-box .card-wrap {
flex-direction: column;
flex-wrap: nowrap;
}
}
#adviser .support-box .inbox .cap {
max-width: 150px;
width: 100%;
}
#adviser .support-box .inbox dl {
max-width: 650px;
width: 100%;
}
#adviser .support-box .inbox dt {
color: #000;
}
#adviser .support-box .inbox dt .icon {
margin-bottom: 15px;
}
#adviser .support-box .inbox dt .icon span {
color: #fff;
font-size: 12px;
background: rgb(182, 0, 20);
padding: 5px;
}
#adviser .support-box .inbox dt strong {
margin-bottom: 10px;
line-height: 1;
margin-right: 20px;
}
#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 {
max-width: 415px;
width: 100%;
margin: auto;
}
#adviser .special-box .cap {
margin-bottom: 40px;
}
#adviser .special-box dt {
border-bottom: 1px solid rgb(182, 0, 20);
position: relative;
margin-bottom: 50px;
padding-bottom: 14px;
letter-spacing: 0.1em;
}
#adviser .special-box dt .txt {
font-size: 23px;
color: rgb(182, 0, 20);
font-weight: bold;
display: block;
text-align: center;
}
#adviser .special-box dt .item-txt {
width: 85px;
height: 85px;
background: rgb(182, 0, 20);
border-radius: 50%;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 20%;
}
#adviser .special-box dl {
clear: both;
}
#adviser .special-box dt .item-txt .item {
color: white;
font-weight: bold;
font-size: 14px;
text-align: center;
line-height: 1.4;
display: block;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 100%;
}
#adviser .special-box dd p {
font-size: 16px;
margin-bottom: 5px;
}
#adviser .special-box dd {
font-size: 16px;
line-height: 1.8;
}
#adviser .special-box dd img {
width: 139px;
float: right;
margin: 0 0 0 20px;
}
#adviser .other-box {
margin-bottom: 100px;
}
#adviser .other-box .inbox {
max-width: 280px;
width: 100%;
margin: 0 auto 20px;
}
#adviser .other-box .inbox ul {
margin-bottom: 15px;
}
#adviser .other-box .itembox {
background: rgb(182, 0, 20);
border-radius: 6px;
height: 89px;
align-items: center;
justify-content: center;
text-align: center;
margin-top: 20px;
}
#adviser .other-box .itembox p {
color: white;
line-height: 1.2;
font-weight: bold;
} #system .list-box {
margin-bottom: 20px;
}
#system .box-title .text {
display: block;
margin-top: 30px;
}
#system .box-title .item-txt {
background: rgb(182, 0, 20);
color: white;
padding: 6px 12px;
font-size: 15px;
font-weight: bold;
position: relative;
}
#system .box-title .item-txt:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 11px 5px 0 5px;
border-color: rgb(182, 0, 20) transparent transparent transparent;
bottom: -11px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#system .border-title,
#guide .border-title {
border-left: 4px solid rgb(182, 0, 20);
padding-left: 15px;
font-size: 21px;
line-height: 1.6;
font-weight: bold;
margin-bottom: 25px;
}
#system .item-list { margin-top: 20px;
background: rgb(240, 236, 236);
padding: 30px;
box-sizing: border-box;
margin-bottom: 25px;
}
#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 {
content: "";
width: 10px;
height: 10px;
top: 10px;
left: -15px;
display: block;
position: absolute;
border-radius: 50%;
background: rgb(182, 0, 20);
}
#system .item-list .list-box li:before {
top: 5px;
}
#system .item-list .list-box li:not(:last-child) {
margin-bottom: 35px;
}
#system .box .cap {
max-width: 381px;
width: 100%;
margin: 35px auto 0;
}
#system section.box:not(:last-of-type) {
margin-bottom: 50px;
}
#system .number-list p {
margin-bottom: 0;
font-weight: bold;
}
#system .number-list li:not(:last-child) {
margin-bottom: 25px;
}
#system .number-list li {
justify-content: flex-start;
align-items: center;
}
#system .number-list li .icon {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size: 100%;
width: 25px;
height: 25px;
line-height: 22px;
text-align: center;
color: white;
font-size: 16px;
margin-right: 10px;
} #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: 0.1em;
}
#service .service-box .box:not(:first-of-type) h3 {
font-size: 23px;
} .page-contents {
max-width: 850px;
width: 100%;
margin: 0 auto 180px;
padding-left: 10px;
padding-right: 10px;
}
.page-contents .box-title .text {
font-size: 30px;
font-weight: bold;
line-height: 1.4;
}
.page-contents .box-title {
position: relative;
text-align: center;
color: rgb(182, 0, 20);
font-size: 30px;
line-height: 1.4;
font-weight: bold;
margin-bottom: 50px;
}
.page-contents .box-title:after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 1px;
bottom: -20px;
margin: 0 auto;
text-align: center;
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-position: center;
background-repeat: no-repeat;
}
.page-contents article.box {
margin-bottom: 100px;
}
.page-contents .text-box p b {
font-weight: bold;
}
.page-contents .text-box p {
line-height: 1.8; }
.page-contents .text-box .inner80 {
margin: 0 80px;
}
.page-contents .text-box.corporate-box h4 {
font-size: 18px;
font-weight: 700;
margin-bottom: 20px;
}
.page-contents .text-box.corporate-box p.text-center {
font-size: 30px;
font-weight: 700;
}
.page-contents .text-box p.text-center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.page-contents .text-box p:not(:last-of-type) {
margin-bottom: 20px;
}
.page-contents .text-box p.text-right {
text-align: right;
margin-top: 20px;
}
.page-contents .text-box .item-color {
color: rgb(182, 0, 20);
}
.page-contents .text-box .text-line {
text-decoration: underline;
font-weight: bold;
}
.page-contents .text-box .font-w {
font-weight: bold;
}
.page-contents .box-title .item-arrow {
width: 25px;
vertical-align: -5px;
}
.page-contents .btn,
.other-color-box {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.page-contents .btn a,
.page-contents button.btn,
.other-color-box .btn a {
background: rgb(182, 0, 20);
border: 1px solid rgb(182, 0, 20);
border-radius: 4px;
text-align: center;
margin: auto;
color: white;
line-height: 55px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
padding: 30px;
max-width: 100%;
min-width: 180px;
display: inline-block;
line-height: 1.5;
}
.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 {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size: 100%;
width: 37px;
height: 37px;
line-height: 34px;
text-align: center;
color: white;
font-size: 18px;
margin-right: 10px;
}
.page-contents .line-box .border-box {
border: 1px solid rgb(182, 0, 20);
background-color: #ffffff;
background-image: radial-gradient(rgba(182, 0, 20, 0.2) 10%, transparent 10%),
radial-gradient(rgba(182, 0, 20, 0.2) 10%, transparent 10%);
background-position: 0 0, 7px 7px;
background-size: 14px 14px;
margin-bottom: 50px;
}
.page-contents .line-box .border-box li {
padding: 50px 0;
position: relative;
z-index: 2;
}
.page-contents .line-box .border-box li:first-child:after {
content: "";
display: block;
position: absolute;
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/about/img05.png) no-repeat center center;
background-size: 100%;
width: 102px;
height: 135px;
z-index: 10;
left: 75%;
top: 85%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.page-contents .line-box .border-box li:not(:last-child):before {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: rgb(182, 0, 20) transparent transparent transparent;
bottom: -10px;
left: 50%;
-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 {
justify-content: center;
align-items: center;
}
.page-contents .line-box .border-box .title p {
font-size: 21px;
font-weight: bold;
max-width: 400px;
width: 100%;
}
.page-contents .line-box .border-box .item {
max-width: 254px;
width: 100%;
margin: 20px auto 0;
}
#guide {
max-width: 100%;
margin-bottom: 100px;
}
#guide .inner {
max-width: 850px;
}
.page-contents .flow-box {
background: #b60114;
width: 100%;
padding: 60px;
box-sizing: border-box;
margin-bottom: 100px;
}
.page-contents .flow-box .text-box {
border-radius: 6px;
background: #fff;
padding: 60px 100px;
}
.page-contents .flow-box .border-box .icon {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size: 100%;
width: 37px;
height: 37px;
line-height: 34px;
text-align: center;
color: white;
font-size: 18px;
margin-right: 10px;
}
.page-contents .flow-box .border-box li .cap {
margin-bottom: 40px;
}
.page-contents .flow-box .border-box li:not(:last-child) {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/guide/flow02.png) no-repeat center bottom;
background-size: contain;
padding-bottom: 60px;
margin-bottom: 30px;
}
.page-contents .flow-box .border-box li:first-child {
padding-bottom: 80px;
}
.page-contents .flow-box .border-box .title {
justify-content: left;
align-items: center;
margin-bottom: 30px;
}
.page-contents .flow-box .border-box .title p {
font-size: 21px;
font-weight: bold;
max-width: 600px;
width: 100%;
margin-bottom: 0;
}
.page-contents .flow-box .border-box .item {
max-width: 254px;
width: 100%;
margin: 20px auto 0;
}
.page-contents .flow-box .text-box p {
font-size: 18px;
margin-bottom: 20px;
}
.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 {
max-width: 32%;
width: 100%;
position: relative;
padding-top: 20%;
}
.page-contents .gallerys-box li figure {
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transition: 0.2s ease-in;
transition: 0.2s ease-in;
}
.page-contents .gallerys-box li figure:hover {
opacity: 0.6;
}
.page-contents .corporate-box .min-txt {
text-align: center;
font-size: 30px;
line-height: 1.6;
margin-bottom: 15px;
}
.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 {
background: rgba(240, 236, 236, 0.6);
padding: 0 0 50px;
margin: 100px 0;
}
#night .color-box header {
text-align: center;
transform: translate(0, -25px);
}
#night .color-box header p {
font-weight: bold;
}
#night .color-box header .item {
font-weight: bold;
font-size: 39px;
}
#night .color-box h3 {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/house/bg-item.png) no-repeat center center;
background-size: cover;
width: 404px;
height: 52px;
line-height: 55px;
color: white;
font-size: 22px;
margin: 0 auto 20px;
}
#night .icon-title .icon {
width: 45px;
height: 56px;
}
#night .list-item-box {
width: 100%;
margin: auto;
padding: 0 80px;
box-sizing: border-box;
}
#night .list-box {
width: 100%;
margin: auto;
padding: 0 80px;
box-sizing: border-box;
}
#night .night-box {
margin: 0 auto 130px;
}
#night .night-box .inbox:not(:last-of-type) {
margin-bottom: 40px;
}
#night .night-box .inbox {
border: 1px solid rgb(182, 0, 20);
padding: 20px;
}
#night .list-item-box li:not(:last-of-type) {
margin-bottom: 25px;
}
#night .list-item-box h4 {
position: relative;
margin-left: 20px;
color: rgb(182, 0, 20);
font-weight: bold;
font-size: 21px;
margin-bottom: 20px;
}
#night .list-item-box h4:before {
content: "";
width: 10px;
height: 10px;
top: 10px;
left: -15px;
display: block;
position: absolute;
border-radius: 50%;
background: rgb(182, 0, 20);
}
#night .list-item-box dl {
border-bottom: 1px solid rgb(191, 191, 191);
padding: 20px 0;
}
#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 {
text-align: center;
position: absolute;
top: 50px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
z-index: 10;
width: 100%;
}
#house .slidebox h3 {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/house/bg-item.png) no-repeat center center;
background-size: cover;
width: 404px;
height: 52px;
line-height: 55px;
color: white;
font-size: 22px;
margin: 0 auto 20px;
}
#house #house-banner {
max-width: 523px;
width: 100%;
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 {
background: rgba(240, 236, 236, 0.6);
padding: 50px 0;
margin: 100px 0;
} #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 {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size: 100%;
width: 37px;
height: 37px;
line-height: 34px;
text-align: center;
color: white;
font-size: 18px;
margin-right: 15px;
}
#cafe .icon-title p {
font-weight: 700;
font-size: 28px;
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 {
width: 158px;
height: 158px;
background: rgb(182, 0, 20);
border-radius: 50%;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
right: -100px;
bottom: -120px;
}
#cafe .inbox .item .item-txt {
color: white;
font-weight: bold;
font-size: 23px;
text-align: center;
line-height: 1.4;
display: block;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 100%;
}
#cafe .time-box {
text-align: center;
}
#cafe .time-box .item {
font-weight: bold;
margin-bottom: 5px;
}
#cafe .time-box .txt {
font-size: 15px;
margin-bottom: 5px;
}
#cafe .time-box .link-txt a {
text-decoration: underline;
color: rgb(182, 0, 20);
}
#cafe .access-box ul {
text-align: center;
}
#cafe .access-box ul li {
font-size: 19px;
line-height: 1.6;
}
#cafe .color-box {
background: rgba(240, 236, 236, 0.6);
padding: 50px 0;
margin: 100px 0;
} #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 {
max-width: 30.591%;
width: 100%;
position: relative;
-webkit-transition: 0.2s;
transition: 0.2s;
transition: 0.2s;
}
.voice-box .inbox li:hover {
opacity: 0.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 {
width: 100%;
padding-top: 66.552%;
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.voice-box .inbox li .cap figure {
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.voice-box .inbox li dt {
font-weight: bold;
color: rgb(182, 0, 20);
font-size: 16px;
margin-bottom: 10px;
line-height: 1.4;
text-align: left;
}
.voice-box .inbox li dd {
width: 100%;
justify-content: flex-start;
}
.voice-box .inbox li dd .txt {
font-size: 12px;
color: rgb(102, 102, 102);
margin-bottom: 5px;
line-height: 1.5;
display: block;
width: 100%;
}
.voice-box .inbox li dd .txt:first-child {
font-size: 14px;
color: #333;
font-weight: bold;
margin-bottom: 5px;
line-height: 1.5;
}
#voice .description-txt {
text-align: center;
margin-bottom: 40px;
font-size: 18px;
}
#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 {
text-align: center;
font-size: 18px;
margin-bottom: 80px;
line-height: 1.6;
}
.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 {
width: 100%;
padding-top: 66.552%;
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.voice-box .inbox li .cap figure {
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.voice-box .inbox li dt {
font-weight: bold;
color: rgb(182, 0, 20);
font-size: 16px;
margin-bottom: 10px;
line-height: 1.4;
text-align: left;
}
.voice-box .inbox li dd {
width: 100%;
justify-content: flex-start;
}
.voice-box .inbox li dd .txt {
font-size: 12px;
color: rgb(102, 102, 102);
margin-bottom: 5px;
line-height: 1.5;
display: block;
width: 100%;
}
.voice-box .inbox li dd .txt:first-child {
font-size: 14px;
color: #333;
font-weight: bold;
margin-bottom: 5px;
line-height: 1.5;
}
#voice .description-txt {
text-align: center;
margin-bottom: 40px;
font-size: 18px;
}
#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 {
text-align: center;
font-size: 18px;
margin-bottom: 80px;
line-height: 1.6;
}
.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%;
margin: 0;
padding: 0;
}
#online p {
line-height: 1.8;
}
#online .page-header {
margin-top: 0;
padding-top: 104.5px;
}
#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 {
color: rgb(182, 0, 20);
text-align: center;
font-size: 30px;
line-height: 1.4;
padding: 20px 0;
font-weight: bold;
}
#online .sub-text {
text-align: center;
padding: 10px 0 100px;
}
#online .inner-title {
background: rgb(182, 0, 20);
color: white;
text-align: center;
font-size: 30px;
line-height: 1.4;
padding: 20px 0;
font-weight: bold;
}
#online section .inner-text {
text-align: center;
padding: 30px 0;
}
#online img {
width: 50%;
padding: 30px 0;
}
.online-movie {
position: relative;
margin: 10px 0 100px;
}
.online-movie .video-text {
color: white;
text-align: center;
font-size: 40px;
line-height: 1.4;
padding: 20px 0;
font-weight: bold;
margin-bottom: 10px;
position: absolute;
top: 45%;
left: 35%;
}
#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;
margin: 20px auto 50px;
background: #eeeeee;
padding: 20px 0 5px 20px;
}
#online .inner-lists li {
font-size: 18px;
line-height: 1.5em;
margin-bottom: 16px;
padding-left: 32px;
position: relative;
}
#online .inner-lists li::before {
content: "";
background-image: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/check_org.svg);
display: block;
position: absolute;
left: 0;
top: 0;
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#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 {
font-size: 1.875rem;
margin-top: 0;
}
#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 {
max-width: 850px;
width: 100%;
}
#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 {
text-align: center;
color: rgb(182, 0, 20);
font-size: 30px;
line-height: 1.4;
font-weight: bold;
margin-bottom: 50px;
}
#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: bold;
}
#event .top-text03 {
margin-bottom: 100px;
}
#event .inner-title-arrow {
display: block;
height: 50px;
background-color: rgb(182, 0, 20);
position: relative;
top: 40px;
margin: 0 auto;
color: white;
text-align: center;
font-size: 30px;
font-weight: bold;
line-height: 50px;
}
#event .inner-title-arrow:before {
position: absolute;
content: "";
width: 0;
height: 0;
border: 60px solid transparent;
border-left: 60px solid rgb(182, 0, 20);
left: 100%;
top: -37px;
}
#event .inner-lists ul {
max-width: 650px;
margin: 100px auto 50px;
background: #eeeeee;
padding: 20px 0 5px 20px;
}
#event .inner-lists li {
font-size: 18px;
line-height: 1.5em;
margin-bottom: 16px;
padding-left: 32px;
position: relative;
}
#event .inner-lists li::before {
content: "";
background-image: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/event/check_black.svg);
display: block;
position: absolute;
left: 0;
top: 0;
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#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;
padding: 0 0 0 60px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 20px;
font-weight: bold;
height: 140px;
border-bottom: 1px solid #000;
line-height: 120px;
}
.schedule-lists li::before,
.schedule-lists li::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.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 {
font-size: 14px;
position: absolute;
bottom: 5px;
}
#event .corporate-title {
position: relative;
color: rgb(182, 0, 20);
font-size: 30px;
line-height: 1.4;
font-weight: bold;
margin: 100px auto 50px;
display: flex;
align-items: center;
justify-content: center;
}
#event .corporate-title:after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 1px;
bottom: -20px;
margin: 0 auto;
text-align: center;
background-image: linear-gradient(
to right,
transparent,
rgb(182, 0, 20) 25%,
rgb(182, 0, 20) 75%,
transparent
);
background-position: center;
background-repeat: no-repeat;
}
.event-entry .inner-title-sub {
position: relative;
margin: 100px 0 0;
text-align: center;
color: rgb(182, 0, 20);
font-size: 30px;
line-height: 1.4;
font-weight: bold;
}
.event-entry .inner-title-sub::after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 1px;
bottom: -20px;
margin: 0 auto;
text-align: center;
background-image: linear-gradient(
to right,
transparent,
rgb(182, 0, 20) 25%,
rgb(182, 0, 20) 75%,
transparent
);
background-position: center;
background-repeat: no-repeat;
}
.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 {
text-align: center;
color: #000;
font-size: 20px;
font-weight: bold;
position: relative;
display: block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
top: 100px;
left: 37%;
}
.event-tour .event-arrow::before,
.event-tour .event-arrow::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.event-tour .event-arrow::before {
width: 80px;
height: 25px;
background: rgb(182, 0, 20);
transform: rotate(135deg);
}
.event-tour .event-arrow::after {
left: 27px;
width: 30px;
height: 30px;
border-top: 20px solid rgb(182, 0, 20);
border-right: 20px solid rgb(182, 0, 20);
top: -25px;
}
.event-tour .event-title {
padding: 73% 32px 0;
margin-bottom: 30px;
text-align: center;
color: #000;
font-size: 30px;
line-height: 1.4;
font-weight: bold;
margin-bottom: 50px;
}
.event-tour .right-box {
width: 60%;
}
.event-tour .right-box-title {
text-align: center;
background: #555555;
color: #fff;
font-size: 25px;
margin: 40px 40px 40px 0;
height: 40px;
line-height: 40px;
}
.event-tour .right-text01 {
margin-bottom: 20px;
}
.event-tour .right-text02 {
margin-bottom: 20px;
} .event-night {
display: flex;
max-width: 700px;
margin: 100px auto 200px;
border: 3px solid rgb(182, 0, 20);
border-radius: 5px;
position: relative;
}
.event-night .right-box {
width: 40%;
}
.event-night .event-arrow {
text-align: center;
color: #000;
font-size: 20px;
font-weight: bold;
position: relative;
display: block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
top: 100px;
left: 37%;
}
.event-night .event-arrow::before,
.event-night .event-arrow::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.event-night .event-arrow::before {
width: 80px;
height: 25px;
background: rgb(182, 0, 20);
transform: rotate(135deg);
}
.event-night .event-arrow::after {
left: 27px;
width: 30px;
height: 30px;
border-top: 20px solid rgb(182, 0, 20);
border-right: 20px solid rgb(182, 0, 20);
top: -25px;
}
.event-night .event-title {
padding: 73% 40px 0;
margin-bottom: 30px;
text-align: center;
color: #000;
font-size: 30px;
line-height: 1.4;
font-weight: bold;
margin-bottom: 50px;
}
.event-night .left-box {
width: 60%;
margin-left: 40px;
}
.event-night .left-box-title {
text-align: center;
background: #555555;
color: #fff;
font-size: 25px;
margin: 40px 0 40px 0;
height: 40px;
line-height: 40px;
}
.event-night .left-text01 {
margin-bottom: 20px;
}
.event-night .left-text02 {
margin-bottom: 50px;
}
.event-night .circle-icon {
color: #fff;
display: block;
content: "";
background-color: rgb(182, 0, 20);
width: 120px;
height: 120px;
border-radius: 999px;
text-align: center;
font-size: 14px;
position: absolute;
top: -56px;
right: -59px;
}
.event-night .circle-icon::after {
content: "2021年2月より開催予定";
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 46px;
}
#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 {
margin: 0 0 0 30px;
font-size: 18px;
width: 70%;
}
#event .inner-lists ul {
width: 80%;
}
#event .sub-text {
width: 80%;
margin: 80px auto 0;
}
#event .schedule-lists {
max-width: 80%;
}
.schedule-lists li {
line-height: 1;
display: flex;
align-items: center;
font-size: 16px;
height: 160px;
}
.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 {
width: 85%;
flex-direction: column;
}
.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 {
width: 85%;
flex-direction: column-reverse;
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 {
margin-bottom: 0;
margin-top: 100px;
width: 850px;
margin-left: auto;
margin-right: auto;
}
.single-voice-box .story-box {
margin-top: 0;
}
.story-box .itemcap {
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);
padding-top: 25px;
position: relative;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.story-box p {
text-align: center;
margin: 20px auto 0;
}
.story-box .itemcap {
-webkit-transition: 0.2s;
transition: 0.2s;
transition: 0.2s;
}
.story-box .itemcap:hover {
opacity: 0.6;
}
#users p.description-txt {
text-align: center;
margin: 0 auto 30px;
}
#users .voice-box .inbox {
width: 48%;
border: 1px solid rgb(182, 0, 20);
border-radius: 6px;
padding: 30px 10px;
box-sizing: border-box;
margin-bottom: 40px;
position: relative;
padding-bottom: 115px;
padding-top: 70px;
}
#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 {
bottom: 30px;
position: absolute;
text-align: center;
margin: 0 auto;
display: block;
width: 100%;
}
#users .voice-box ul {
margin-bottom: 30px;
}
#users .voice-box .inbox h4 {
text-align: center;
color: rgb(182, 0, 20);
font-size: 22px;
line-height: 1.4;
font-weight: 700;
margin-bottom: 30px;
}
#users .voice-box .inbox li {
max-width: 100%;
width: 100%;
position: relative;
margin: 0;
}
#users .voice-box .inbox li {
-webkit-transition: 0.2s;
transition: 0.2s;
transition: 0.2s;
}
#users .voice-box .inbox li:hover {
opacity: 0.6;
}  .single .page-header {
margin-bottom: 15px;
}
.single-contents-box .contents-box {
padding-left: 60px;
padding-right: 60px;
}
.single-contents-box .item-box {
justify-content: flex-end;
align-items: center;
margin-bottom: 25px;
}
.single-contents-box .item-box time {
line-height: 23px;
display: block;
}
.single-contents-box .item-box .category-name {
background: rgb(182, 0, 20);
color: white;
margin-right: 10px;
padding: 2px 6px 5px 4px;
}
.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 {
max-width: 1000px;
width: 100%;
margin: 0 auto 180px;
padding-left: 10px;
padding-right: 10px;
}
.other-link-box ul {
justify-content: flex-start;
}
.other-link-box li {
border: 1px solid rgb(182, 0, 20);
background: rgb(182, 0, 20);
width: 32%;
position: relative;
text-align: center;
height: 78px;
line-height: 78px;
border-radius: 6px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.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 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
} .other-color-box {
background: rgb(246, 244, 245);
padding: 50px 0;
margin-bottom: 80px;
}
.other-color-box .box-title {
position: relative;
text-align: center;
color: rgb(182, 0, 20);
font-size: 30px;
line-height: 1.4;
font-weight: bold;
margin: 0 auto 40px;
max-width: 678px;
width: 100%;
}
.other-color-box .box-title:after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 1px;
bottom: -20px;
margin: 0 auto;
text-align: center;
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-position: center;
background-repeat: no-repeat;
} .other-color-box .inbox {
max-width: 948px;
} .single-voice-box header .text {
text-align: center;
margin-bottom: 20px;
}
.single-voice-box header .text .txt {
font-weight: bold;
font-size: 18px;
}
.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 {
max-width: 600px;
width: 100%;
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 {
font-weight: bold;
color: rgb(182, 0, 20);
margin-bottom: 18px;
}
.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 {
max-width: 32%;
width: 100%;
position: relative;
height: 50px;
}
.single-sns-box li .txt {
color: white;
font-size: 14px;
margin-left: 12px;
}
.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 {
max-width: 600px;
width: 100%;
margin: auto;
}
.single-story-box .minbox {
background: rgb(246, 244, 245);
padding: 20px;
box-sizing: border-box;
justify-content: left;
margin-bottom: 60px;
}
.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 {
margin-bottom: 0;
width: 100px;
}
.single-story-box .minbox .cap {
width: 200px;
}
.single-story-box .text-box h3 {
font-size: 24px;
color: rgb(182, 1, 20);
font-weight: bold;
margin-bottom: 25px;
line-height: 1.5;
}
.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 {
text-align: center;
font-weight: bold;
font-size: 34px;
line-height: 1.6;
color: rgb(182, 0, 20);
margin-bottom: 25px;
}
#ticket .top-box .text {
text-align: center;
margin-bottom: 12px;
}
#ticket .top-box .text .txt {
border-bottom: 2px dotted rgb(182, 0, 20);
font-size: 26px;
line-height: 1.8;
}
#ticket .top-box .item-txt {
text-align: center;
font-size: 12px;
line-height: 1.8;
}
#ticket .box-title .icon {
width: 44px;
height: 44px;
margin-right: 10px;
}
#ticket .icon-title {
align-items: center;
justify-content: center;
}
#ticket .color-box .item {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size: 100%;
width: 25px;
height: 25px;
line-height: 22px;
text-align: center;
color: white;
margin-right: 15px;
font-size: 12px;
}
#ticket .color-box {
background-color: rgba(250, 236, 226, 0.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);
padding: 0 20px;
}
#ticket .text-box .item-color {
font-weight: bold;
}
#ticket .color-box p {
font-weight: bold;
}
#ticket .color-box .txt {
font-size: 30px;
font-weight: bold;
}
#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: bold;
text-decoration: underline;
}
#ticket .inbox {
max-width: 580px;
width: 100%;
margin: 0 auto;
}
#ticket .box-color-txt {
background: rgb(182, 0, 20);
height: 46px;
line-height: 42px;
color: white;
text-align: center;
font-size: 21px;
border-radius: 4px;
margin-bottom: 35px;
}
#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 {
text-align: center;
font-size: 42px;
margin-bottom: 30px;
}
#about .top-box h3 {
text-align: center;
font-size: 26px;
margin-bottom: 25px;
line-height: 1.6;
}
#about .index-benefits-box::before,
#about .index-benefits-box::after {
content: none;
}
#about .index-benefits-box {
background: rgb(240, 236, 236);
padding: 50px 0;
margin-bottom: 50px;
}
#about .index-benefits-box .btn {
max-width: none;
width: auto;
height: auto;
background: none;
border: none;
border-radius: 4px;
margin: 0;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
#about .text-box .cap {
margin-bottom: 15px;
}
#about .text-center {
text-align: center;
font-size: 28px;
font-weight: bold;
}
#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 {
overflow: hidden;
width: 100%;
height: 160px;
position: relative;
}
#about .tabs-box li:not(:last-child) {
margin-bottom: 25px;
}
#about .tabs-box li figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
z-index: 1;
-webkit-transition: 0.5s;
transition: 0.5s;
}
#about .tabs-box li:hover figure {
transform: scale(1.1);
}
#about .tabs-box h4 {
font-weight: bold;
font-size: 26px;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
z-index: 2;
color: white;
}
#about .text-box:last-of-type h3 {
text-align: center;
font-size: 28px;
position: relative;
}
#about .text-box:last-of-type .item-color {
border-bottom: 2px solid rgb(182, 0, 20);
} .question-box ul {
border: 1px solid rgb(182, 0, 20);
margin-bottom: 50px;
}
.question-box h3 {
background: rgb(182, 0, 20);
color: white;
text-align: center;
font-size: 30px;
line-height: 1.4;
padding: 20px 0;
font-weight: bold;
position: relative;
}
.question-box h3:after {
width: 0;
height: 0;
border-style: solid;
border-width: 12px 6px 0 6px;
border-color: rgb(182, 0, 20) transparent transparent transparent;
content: "";
display: block;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
bottom: -12px;
}
.question-box .itembox .icon {
font-size: 32px;
text-align: center;
width: 30px;
position: relative;
}
.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 {
padding: 40px 0 40px 40px;
align-items: center;
justify-content: flex-start;
}
.question-box li:not(:last-child) {
border-bottom: 2px dotted rgb(182, 0, 20);
}
.question-box li .font_sans:after {
content: "";
position: absolute;
display: block;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background: rgb(182, 0, 20);
}
.question-box li .font_sans {
color: rgb(182, 0, 20);
font-weight: bold;
font-size: 33px;
position: relative;
margin-right: 15px;
}
.question-box li .txt {
font-size: 18px;
display: inline-grid;
width: 90%;
}
.question-box li .title {
cursor: pointer;
}
.category-faq .itembox {
border: 1px solid rgb(182, 0, 20);
background-color: #ffffff;
background-image: radial-gradient(rgba(182, 0, 20, 0.2) 10%, transparent 10%),
radial-gradient(rgba(182, 0, 20, 0.2) 10%, transparent 10%);
background-position: 0 0, 7px 7px;
background-size: 14px 14px;
margin: 0 80px 50px;
}
.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;
table-layout: fixed;
width: 100%;
}
.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 {
font-size: 32px;
text-align: center;
width: 30px;
position: relative;
}
.category-faq .itembox .title .item {
color: rgb(182, 0, 20);
border-bottom: 2px solid rgb(182, 0, 20);
font-weight: 500;
}
.category-faq .itembox .text .item {
color: rgb(77, 77, 133);
border-bottom: 2px solid rgb(77, 77, 133);
font-weight: 500;
background: none;
}
.category-faq .itembox .min-title,
.category-faq .itembox .data {
padding-left: 15px;
}
.category-faq .itembox .itemtxt {
color: rgb(182, 0, 20);
font-size: 18px;
font-weight: 700;
}
.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;
max-width: 32%;
width: 100%;
border: 1px solid rgb(182, 0, 20);
border-radius: 6px;
padding: 30px 10px;
box-sizing: border-box;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#faq li dl {
display: table;
table-layout: fixed;
width: 100%;
}
#faq li dt,
#faq li dd {
display: table-cell;
vertical-align: middle;
}
#faq li dt {
width: 20%;
}
#faq li dd {
color: rgb(182, 0, 20);
font-size: 16px;
font-weight: 700;
padding-left: 12px;
line-height: 1.4;
-webkit-transition: all 0.3s ease;
transition: all 0.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 {
background: rgb(240, 236, 236);
padding: 50px 0;
margin-bottom: 120px;
}
.voice-select-box .inbox {
max-width: 850px;
width: 100%;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
}
.voice-select-box h3 {
position: relative;
text-align: center;
color: rgb(182, 0, 20);
font-size: 30px;
line-height: 1.4;
font-weight: bold;
margin-bottom: 40px;
}
.voice-select-box h3 .item {
width: 32px;
vertical-align: unset;
}
.voice-select-box h3:after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 1px;
bottom: -20px;
margin: 0 auto;
text-align: center;
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-position: center;
background-repeat: no-repeat;
}
.voice-select-box ul {
justify-content: flex-start;
max-width: 1200px;
width: 100%;
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;
overflow: hidden;
width: 100%;
padding-top: 69.445%;
margin-bottom: 15px;
}
.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: bold;
text-decoration: underline;
}
.voice-select-box .cap figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
z-index: 1;
-webkit-transition: 0.5s;
transition: 0.5s;
} .service-notebox {
max-width: 1000px;
width: 100%;
margin: 0 auto 120px;
padding-left: 10px;
padding-right: 10px;
}
.service-notebox h3 {
font-weight: bold;
font-size: 19px;
margin-bottom: 12px;
}
.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 {
color: rgb(182, 0, 20);
font-size: 24px;
font-weight: bold;
}
#sitemap h2 {
position: relative;
}
#sitemap h2:before {
width: 16px;
height: 16px;
content: "";
display: block;
border-radius: 50%;
background: rgb(182, 0, 20);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
position: absolute;
margin-top: 0;
top: 50%;
left: -20px;
}
#sitemap h2:after {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
position: absolute;
margin-top: 0;
top: 50%;
left: -14px;
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 0 3px 6px;
border-color: transparent transparent transparent white;
}
#sitemap ul {
justify-content: flex-start;
margin-top: 25px;
}
#sitemap li {
width: 32%;
position: relative;
}
#sitemap .item-box ul {
display: block;
}
#sitemap .item-box ul li {
width: 100%;
}
#sitemap li:before {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
position: absolute;
margin-top: 0;
top: 50%;
left: -14px;
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 0 3px 6px;
border-color: transparent transparent transparent rgb(182, 0, 20);
}
#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 {
text-align: center;
margin-bottom: 50px;
}
#contact .text-center {
text-align: center;
margin-bottom: 60px;
}
#contact .text-center a {
text-decoration: underline;
color: rgb(182, 0, 20);
}
#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 {
font-weight: bold;
color: rgb(182, 0, 20);
margin-right: 12px;
font-size: 18px;
}
#contact .item-table th .item-txt {
background: rgb(182, 0, 20);
color: white;
font-size: 12px;
padding: 2px 4px;
}
#contact .item-table tr:last-child th {
vertical-align: top;
}
#contact .item-table td {
width: 449px;
}
#contact .item-table .input-txt {
width: 100%;
border: 1px solid rgb(204, 204, 204);
border-radius: 4px;
background: rgb(248, 248, 248);
height: 48px;
padding: 10px;
box-sizing: border-box;
resize: none;
font-size: 15px;
}
#contact .item-table textarea.input-txt {
height: 350px;
}
#contact .itembtn .btn {
color: white;
font-size: 16px;
margin: auto;
display: block;
cursor: pointer;
}
#contact .itembtn .btn:hover {
color: rgb(182, 0, 20);
}
#contact .itembtn {
margin: auto;
}
#contact .btn-box {
margin: 0 80px;
}
#contact .privacy {
padding: 20px;
background: rgb(248, 248, 248);
margin-bottom: 20px;
height: 300px;
overflow: auto;
box-sizing: border-box;
}
#contact .privacy p {
font-size: 80%;
line-height: 2;
}
#contact .privacy p strong {
font-weight: bold;
}
#contact .privacy p.textRight {
text-align: right;
margin-bottom: 20px;
}
#contact p.textCenter {
text-align: center;
margin: 0 auto 40px;
}
#contact.confirm .privacy,
#contact.confirm p.textCenter {
display: none;
} #terms h3 {
font-size: 24px;
margin-bottom: 12px;
}
#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 {
text-align: center;
margin: 0 auto 60px;
font-size: 20px;
line-height: 1.8;
}
#story .voice-box .inbox li {
-webkit-transition: 0.2s;
transition: 0.2s;
transition: 0.2s;
}
#story .voice-box .inbox li:hover {
opacity: 0.6;
} @media screen and (min-width: 768px) {
#house .slidebox .inbox {
-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%);
position: relative;
padding: 210px 0 20px;
}
} @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 {
line-height: 1.4;
font-size: 4.6vw;
margin-bottom: 35px;
}
.pc-only {
display: none;
}
.sp-only {
display: block;
}
.sp-icon {
height: 175px !important;
}
#header {
padding-top: 0;
padding-bottom: 0;
height: 5.312rem;
}
#header .inner {
max-width: none;
padding: 0 1rem;
height: 100%;
}
#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 {
font-size: 3rem;
margin-bottom: 1.5rem;
}
.index-news-box .news-list-box::before,
.index-news-box .news-list-box::after {
top: -2rem;
}
.index-news-box h2 {
font-size: 3rem;
margin-bottom: 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 {
padding-left: 1rem;
padding-right: 1rem;
margin-bottom: 6rem;
height: auto;
padding-top: 0;
}
.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 {
font-size: 1rem;
padding: 0.125rem 0.25rem 0.062rem;
}
.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 {
transform: translateY(0);
padding-left: 0;
padding-right: 0;
}
.service-box .text,
.service-box h2 {
color: white;
}
.service-box .wrap-box {
display: block;
}
.index-other-contents {
height: auto;
background: none;
margin-bottom: 6rem;
}
.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 {
max-width: none;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}
.sns-box h2 {
font-size: 1.6rem;
max-width: 75%;
width: 100%;
margin: 0 auto 2rem;
padding: 1rem 0 4rem;
}
.sns-box .text {
margin-bottom: 50px;
font-size: 1.4rem;
line-height: 1.6;
}
.sns-box .inner {
transform: translateY(-64px);
}
#line-banner {
max-width: none;
margin: 3.125rem auto 2.5rem;
padding: 0 4rem;
box-sizing: border-box;
}
.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 {
margin: 0 auto;
display: block;
text-align: center;
}
#footer {
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%;
display: flex;
align-items: flex-end;
justify-content: center;
height: auto;
padding-top: 4.8rem;
}
address {
margin-bottom: 20px;
font-size: 0.9rem;
}
#footer .nav {
margin-bottom: 1.875rem;
}
#footer .nav li:first-child {
font-size: 1rem;
}
#copy {
font-size: 0.75rem;
padding: 0 0 1.25rem;
}
#footer .nav li {
font-size: 0.75rem;
margin: 0 0.625rem;
}
#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-2026.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 {
padding: 2.812rem 1.25rem;
top: 5.312rem;
right: -100%;
width: 100%;
}
.index-benefits-box h2 {
font-size: 7vw;
max-width: 100%;
margin-bottom: 20px;
}
#sp-menubox li:not(:last-child) {
padding-bottom: 20px;
}
#sp-menubox li a {
font-size: 1.25rem;
display: block;
}
#sp-menubox ul {
width: 65%;
margin-left: 1.562rem;
margin-bottom: 1.562rem;
}
#sp-menubox .minbox li a {
font-size: 1rem;
}
#sp-menubox .minbox {
margin-left: 0.5rem;
width: 100%;
}
#footer-nav ul li {
font-size: 1.25rem;
position: relative;
}
#footer-nav ul li:not(:last-child) {
margin-bottom: 1.65rem;
}
.index-benefits-box li {
width: 100%;
padding: 2rem 0 2rem 1rem;
box-sizing: border-box;
}
.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 {
display: none;
width: auto;
position: inherit;
top: 1rem;
padding: 10px 0;
left: 0;
}
#footer-nav ul ul {
margin: 0 auto;
}
#footer-nav ul li ul li {
font-size: 1rem;
margin-bottom: 0.5rem !important;
}
#topicpath {
display: none;
}
.voice-select-box .inbox {
max-width: none;
width: auto;
}
.voice-select-box .inbox {
padding-left: 1rem;
padding-right: 1rem;
}
.voice-select-box {
background: rgb(240, 236, 236);
padding: 1.875rem 0 3.125rem;
margin-bottom: 3.75rem;
}
.page-contents .box-title {
font-size: 1.675rem;
margin-bottom: 3.125rem;
}
#about .voice-select-box .text-center {
font-size: 1.375rem;
text-align: left;
}
#about .text-box:last-of-type h3 {
font-size: 1.675rem;
margin-bottom: 3.125rem;
}
#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 {
justify-content: space-between;
max-width: none;
margin: 0 auto 2.187rem;
padding-left: 1rem;
padding-right: 1rem;
box-sizing: border-box;
}
.voice-select-box .cap {
padding-top: 67%;
margin-bottom: 0.312rem;
}
.page-contents .btn a,
.page-contents button.btn,
.other-color-box .btn a {
padding: 1.45rem;
max-width: 100%;
min-width: 8.312rem;
font-size: 1rem;
}
#about .inner {
max-width: none;
}
#about .top-box h2 {
text-align: left;
font-size: 2.625rem;
margin-bottom: 1.875rem;
line-height: 1.5;
letter-spacing: 0.5px;
font-feature-settings: "palt";
}
#about .top-box h3 {
text-align: left;
font-size: 1.625rem;
margin-bottom: 1.875rem;
line-height: 1.6;
}
.page-contents .text-box p {
line-height: 1.8;
font-size: 1.25rem;
}
#about .index-benefits-box {
background: none;
padding: 0 1rem;
margin-bottom: 4rem;
}
.page-contents .corporate-box .min-txt {
text-align: left;
font-size: 1.875rem;
line-height: 1.6;
margin-bottom: 0.937rem;
}
.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 {
text-align: center;
font-size: 1.75rem;
font-weight: bold;
}
.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 {
padding-left: 0;
margin: 0 auto 5rem;
padding-right: 0;
max-width: none;
width: auto;
}
#about {
max-width: none;
}
.page-contents .box-title:after,
.voice-select-box h3:after {
width: 95%;
}
.index-benefits-box h2 {
font-size: 2rem;
max-width: none;
margin-bottom: 2rem;
}
.page-contents .line-box .border-box {
border: 1px solid rgb(182, 0, 20);
border-left: none;
border-right: none;
margin-bottom: 3.125rem;
}
.page-contents .line-box .border-box li {
padding: 3.125rem 0;
}
.page-contents .line-box .border-box .title {
padding-left: 1rem;
padding-right: 1rem;
box-sizing: border-box;
width: auto;
justify-content: space-between;
}
.page-contents .line-box .border-box .icon {
width: 2.312rem;
height: 2.312rem;
line-height: 2.425rem;
font-size: 1.125rem;
margin-right: 0.625rem;
}
.page-contents .line-box .border-box .title p {
font-size: 1.375rem;
width: calc(100% - 3rem);
max-width: none;
}
.page-contents .line-box .border-box .item {
max-width: none;
width: auto;
margin: 0.937rem 6.875rem 0;
}
.page-contents .line-box .border-box li:first-child:after {
left: auto;
width: 6.375rem;
height: 8.437rem;
z-index: 10;
right: -1.5rem;
top: 85%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#about .tabs-box h4 {
font-size: 1.625rem;
}
#about .tabs-box li {
padding-top: 35%;
height: auto;
}
#about .tabs-box li figure {
position: absolute;
background-size: cover;
}
.service-notebox {
max-width: none;
box-sizing: border-box;
width: 100%;
margin: 0 auto 6.75rem;
padding-left: 1rem;
padding-right: 1rem;
}
.service-notebox h3 {
font-weight: bold;
font-size: 1.187rem;
margin-bottom: 0.75rem;
}
.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 {
padding-left: 3rem;
padding-right: 3rem;
box-sizing: border-box;
}
#sitemap .box:not(:last-of-type) h2 { }
#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 {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
#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 {
max-width: none;
width: 100%;
}
#adviser .introduction-box .inbox dt {
color: rgb(182, 0, 20);
font-size: 1.5rem;
font-weight: bold;
border-bottom: 1px solid rgb(182, 0, 20);
padding-bottom: 0.75rem;
margin-bottom: 0.75rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#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 {
max-width: none;
width: auto;
margin: 0 1.25rem 1.25rem;
}
.page-contents .text-box .list-box li:before {
content: "";
width: 10px;
height: 10px;
top: 0.625rem;
left: -0.937rem;
display: block;
position: absolute;
border-radius: 50%;
background: rgb(182, 0, 20);
}
.page-contents .text-box .list-box li {
margin-bottom: 0.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 {
font-size: 1.875rem;
padding: 1.25rem 0;
}
.question-box ul {
margin-bottom: 1.562rem;
}
.question-box li {
padding: 1.562rem;
align-items: flex-start;
}
.question-box li .font_sans {
color: rgb(182, 0, 20);
font-weight: bold;
font-size: 1.875rem;
position: relative;
margin-right: 0.937rem;
}
.question-box li .txt {
font-size: 1.187rem;
width: calc(100% - 3rem);
}
.other-link-box {
max-width: none;
width: auto;
margin: 0 auto 8rem;
padding-left: 1rem;
padding-right: 1rem;
}
.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: 0.875rem;
}
#adviser .special-box dt .txt {
font-size: 1.5rem;
}
#adviser .special-box dt {
margin-bottom: 2.525rem;
padding-bottom: 0.875rem;
}
#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 {
width: 8.687rem;
float: right;
margin: 0 0 0 1.25rem;
}
#night .color-box h3 {
width: auto;
height: 3.25rem;
line-height: 3.437rem;
font-size: 1.375rem;
margin: 0 auto 1.25rem;
}
#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;
margin: auto;
padding: 0;
}
#night .night-box {
margin: 0 auto 2.25rem;
}
#night .list-item-box {
width: auto;
margin: auto;
padding: 0;
box-sizing: border-box;
}
#night .list-item-box h4 {
margin-left: 20px;
font-size: 1.312rem;
margin-bottom: 0.312rem;
}
#night .list-item-box h4:before {
width: 10px;
height: 10px;
top: 0.125rem;
left: -15px;
}
#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 {
border-bottom: 1px solid rgb(191, 191, 191);
padding: 1.25rem 0;
}
#night .list-item-box dl:first-of-type {
padding: 0 0 1.25rem;
}
#cafe .icon-title .icon {
width: 2.312rem;
height: 2.312rem;
line-height: 2.312rem;
text-align: center;
color: white;
font-size: 1.125rem;
margin-right: 15px;
}
#cafe .inbox {
margin-bottom: 3.75rem;
}
#cafe .icon-title p {
font-weight: 700;
line-height: 1.5;
width: calc(100% - 4rem);
font-size: 1.5rem;
}
#cafe .icon-title {
margin-bottom: 0.937rem;
}
#cafe .inbox .item {
width: 8rem;
height: 8rem;
right: -50px;
bottom: -80px;
}
#cafe .inbox .item .item-txt {
font-size: 1.2rem;
}
#cafe .time-box .txt {
font-size: 0.937rem;
margin-bottom: 5px;
}
#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;
line-height: 3.437rem;
font-size: 1.375rem;
margin: 0 auto 20px;
}
#house .slidebox p {
text-align: left;
padding-left: 1rem;
padding-right: 1rem;
font-size: 1rem;
}
#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 {
font-size: 2.125rem;
margin-bottom: 1.562rem;
}
#ticket .top-box .text {
text-align: left;
}
#ticket .top-box .text .txt {
font-size: 1.625rem;
}
#ticket .top-box .item-txt {
text-align: left;
font-size: 0.75rem;
line-height: 1.4;
}
#ticket {
padding-left: 1rem !important;
padding-right: 1rem !important;
box-sizing: border-box;
}
#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;
line-height: 1.662rem;
margin-right: 15px;
font-size: 0.75rem;
}
#ticket .color-box .item-txt {
width: calc(100% - 4rem);
}
#ticket .color-box .txt {
font-size: 1.875rem;
}
#ticket .box-color-txt {
height: 2.875rem;
line-height: 3.125rem;
font-size: 1.312rem;
margin-bottom: 2.187rem;
}
#ticket .last-box h3 {
text-align: left;
padding: 0 2rem;
}
#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 {
font-size: 1.875rem;
margin-bottom: 4.5rem;
}
#contact,
#regulation,
#policy,
#message,
#system {
padding-left: 1rem;
padding-right: 1rem;
}
.page-contents .flow-box {
margin-bottom: 3rem;
padding: 1rem;
}
.page-contents .flow-box .text-box {
padding: 2rem;
}
.page-contents .flow-box .border-box .icon {
width: 2.312rem;
height: 2.312rem;
line-height: 2.425rem;
font-size: 1.125rem;
margin-right: 0.625rem;
}
.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 {
font-size: 1.375rem;
width: calc(100% - 3rem);
max-width: none;
}
.page-contents .flow-box .border-box .item {
max-width: none;
width: auto;
margin: 0.937rem 6.875rem 0;
}
.page-contents .flow-box .text-box p {
font-size: 1.25rem;
margin-bottom: 1rem;
}
.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 {
border-left: 0.25rem solid rgb(182, 0, 20);
padding-left: 0.937rem;
font-size: 1.312rem;
margin-bottom: 1.562rem;
}
#system .item-list {
margin-top: 1.25rem;
padding: 1.875rem;
margin-bottom: 1.25rem;
}
#system .number-list p {
width: calc(100% - 3rem);
margin-bottom: 0;
font-weight: bold;
}
#system .number-list li {
justify-content: flex-start;
align-items: flex-start;
margin-left: 0;
}
#system .number-list li .icon {
width: 1.562rem;
height: 1.562rem;
line-height: 1.662rem;
font-size: 1rem;
margin-right: 10px;
}
.page-contents .box-title .item-arrow {
width: 1.562rem;
vertical-align: -0.312rem;
}
#message .box-title {
font-size: 1.675rem;
text-align: left;
}
#message .item-list {
margin-left: 0;
margin-right: 0;
margin-top: 1.25rem;
background: rgb(240, 236, 236);
padding: 1.875rem;
box-sizing: border-box;
}
.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 {
line-height: 1.6;
margin-left: 1.25rem;
position: relative;
font-size: 1.287rem;
}
#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: 0.75rem;
}
#regulation .top-box li {
font-size: 1.187rem;
line-height: 1.6;
}
#regulation h2 {
font-size: 1.5rem;
margin-bottom: 1.275rem;
}
.page-contents .number-list li {
line-height: 1.6;
margin-left: 1.25rem;
font-size: 1.187rem;
}
.page-contents .number-list li p {
font-size: 13px;
margin-top: 6px;
}
.page-contents .number-list li:not(:last-child) {
margin-bottom: 2.5rem;
}
#company dl {
padding: 0 1rem;
}
#company dt {
max-width: none;
width: 8.312rem;
}
#company dd {
max-width: 100%;
width: auto;
}
#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;
max-width: none;
width: auto;
margin-bottom: 3rem;
margin-top: 5.312rem;
}
.page-header .item-spcap {
width: 100%;
}
.page-header .cap {
display: none;
}
.page-header .inbox {
width: 100%;
display: block;
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-size: 100%;
height: 8.8034rem;
background-position: center top;
background-repeat: no-repeat;
}
.page-header .inbox .itemcap {
background: none;
}
.page-header .inbox .font_sans {
font-size: 1.562rem;
margin-bottom: 1.162rem;
}
.page-header .inbox h1 {
font-size: 1.875rem;
font-weight: 700;
}
#ticket {
max-width: none;
}
#ticket .inner {
width: auto;
}
#gallery .inner {
max-width: none;
display: block;
margin-bottom: 9rem;
}
#gallery .inbox {
max-width: none;
width: auto;
}
#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%;
margin-bottom: 1%;
padding-top: 49.5%;
}
#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 {
text-align: left;
margin-bottom: 2.5rem;
font-size: 1.125rem;
}
.category-voice,
#voice {
max-width: none;
padding-left: 1rem;
padding-right: 1rem;
}
.voice-box .inbox li {
max-width: none;
width: 48.5%;
}
.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: 0.875rem;
}
.voice-box .inbox li dt {
font-size: 1.25rem;
margin-bottom: 1rem;
}
.voice-box .inbox li dd .txt {
font-size: 1rem;
display: block;
width: 100%;
}
.single-voice-box .other-link-box li .txt,
.category-voice .other-link-box li .txt {
font-size: 0.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 {
max-width: none;
width: 100%;
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 {
font-size: 1.25rem;
display: block;
margin-bottom: 1rem;
}
.single-story-box .text-box h3 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.single-voice-box header .text .txt:not(:last-of-type) {
margin-right: 0;
}
.single-story-box .text-box header h3 {
color: #000;
text-align: center;
margin: 0 auto 1rem;
}
.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: 0.937rem;
}
.single-voice-box .contents-box dt,
.single-voice-box .contents-box dd {
font-size: 1.25rem;
}
.other-color-box.voice-box .box-title {
font-size: 1.675rem;
margin-bottom: 3.125rem;
}
.single-sns-box li .box .icon {
width: 1.625rem;
}
.single-voice-box header {
margin-bottom: 2.5rem;
}
.single-sns-box li .txt {
color: white;
font-size: 0.875rem;
margin-left: 0.75rem;
}
.single-sns-box li {
max-width: none;
width: 32%;
height: 3.125rem;
}
.single-voice-box .contents-box {
max-width: none;
width: auto;
margin: 0 auto 2.5rem;
}
.category-voice .description-txt {
text-align: left;
font-size: 1.125rem;
margin-bottom: 2.5rem;
line-height: 1.6;
}
.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 {
text-align: center;
display: block;
margin: 0 auto 10px;
}
.page-contents.category-faq .icon-title {
text-align: center;
} #news.page-contents .box-title {
text-align: left;
padding-left: 1rem;
padding-right: 1rem;
box-sizing: border-box;
}
.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 {
padding-left: 1rem;
padding-right: 1rem;
box-sizing: border-box;
margin-bottom: 3rem;
}
#faq li {
max-width: 100%;
box-sizing: border-box;
} #users p.description-txt {
line-height: 1.8;
font-size: 1.25rem;
}
#users .voice-box .inbox {
width: 100%;
padding: 2rem 1rem;
margin-bottom: 1rem;
padding-bottom: 115px;
padding-top: 70px;
}
.page-contents article.box.story-box {
margin-bottom: 10rem;
margin-top: 3rem;
}
#users .voice-box .inbox:nth-child(n + 3) {
margin-bottom: 1rem;
padding-bottom: 115px;
}
#users .voice-box .inbox h4 {
font-size: 1.5rem;
margin-bottom: 2rem;
}
#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: 0.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: 0.3;
}
.index-other-contents .nolink .itemcap {
position: relative;
}
.index-other-contents .nolink .itemcap p {
display: inherit;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
font-size: 36px;
font-weight: 500;
color: rgb(182, 0, 20);
} @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;
height: 60px;
width: 88%;
max-width: 500px;
border: solid #b60014 2px;
margin: 0 auto;
padding: 10px 2%;
justify-content: space-between;
align-items: center;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.tourBanner a:hover {
opacity: 0.8;
}
.tourBanner a .logo {
padding-right: 20px;
}
.tourBanner a .btn {
font-weight: bold;
font-size: 1.2rem;
flex: 1;
background: #b60014;
color: #fff;
line-height: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
}
.tourBanner a .logo img {
max-width: 200px;
max-height: 60px;
width: auto;
}
@media screen and (max-width: 767px) {
.tourBanner {
margin-bottom: 40px;
}
} .wrap-index-btn {
width: 96%;
margin: 0 auto;
max-width: 860px;
}
.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;
border: #b60014 solid 2px;
padding: 20px 4%;
background: url(//jo-katsu.com/images/common/icon_right_R.png) no-repeat left
20px center;
color: #b60014;
background-size: 16px auto;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.wrap-index-btn .innr div a:hover {
opacity: 0.8;
}
.wrap-index-btn .innr div a span {
display: block;
padding-left: 10%;
}
.wrap-index-btn .innr div.right a {
background: url(//jo-katsu.com/images/common/icon_right.png) no-repeat left
20px center #b60014;
color: #fff;
background-size: 16px auto;
}
@media screen and (max-width: 767px) {
.wrap-index-btn {
margin-bottom: 40px;
margin-top: -20px;
}
.wrap-index-btn .innr div a {
display: block;
border: #b60014 solid 2px;
padding: 10px 4%;
background: url(//jo-katsu.com/images/common/icon_right_R.png) no-repeat
left 5px center;
color: #b60014;
background-size: 10px auto;
}
.wrap-index-btn .innr div.right a {
background: url(//jo-katsu.com/images/common/icon_right.png) no-repeat left
5px center #b60014;
color: #fff;
background-size: 10px auto;
}
#story .voice-box {
padding-left: 1rem;
padding-right: 1rem;
}
} .wp-pagenavi {
text-align: center;
margin: 40px auto 100px;
}
.wp-pagenavi a,
.wp-pagenavi span {
text-decoration: none;
border: 2px solid #c51b19 !important;
color: #c51b19;
padding: 5px 10px !important ;
margin: 0 5px !important;
}
.wp-pagenavi a:hover,
.wp-pagenavi span.current {
background: #c51b19 !important;
color: #fff !important;
}
.caution {
border: rgb(182, 0, 20) solid 2px;
color: rgb(182, 0, 20);
padding: 20px 2%;
margin-bottom: 60px;
}
.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 {
border: none;
background: none;
}
.form2 .button-submit {
background: rgb(182, 0, 20);
color: #fff;
padding: 30px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
.form2 .text-area {
padding: 10px 0;
display: block;
}
.form2 .selectbox {
border: 1px solid rgb(204, 204, 204);
border-radius: 4px;
background: rgb(248, 248, 248);
height: 48px;
padding: 10px;
box-sizing: border-box;
resize: none;
font-size: 15px;
}
.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: 0.5;
}
a.anchor-txt.nolink {
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
text-align: center;
filter: alpha(opacity=100);
opacity: 1;
display: table;
}
a.anchor-txt.nolink span {
font-size: 1.8rem;
display: table-cell;
vertical-align: middle;
}
.other-link-box a.anchor-txt.nolink {
background-color: rgba(0, 0, 0, 0.5);
border: none !important;
}
.other-link-box a.anchor-txt.nolink span {
font-size: 1.6rem;
}
.caution p {
font-size: 1.5rem;
text-align: center;
margin: auto;
}
@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 {
display: block;
top: 45%;
position: absolute;
text-align: center;
margin: 0 auto;
width: 100%;
}
.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 {
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
white-space: normal;
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1;
background: transparent;
font-family: "Roboto", "Noto Sans JP", sans-serif;
font-weight: 400;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
display: block;
}
img {
vertical-align: bottom;
border: none;
max-width: 100%;
width: 100%;
height: auto;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.2s ease-in;
transition: 0.2s ease-in;
filter: alpha(opacity=100);
opacity: 1;
}
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: 0.1em;
} .clearfix {
zoom: 1;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
@media print {
.clearfix {
overflow: hidden;
}
}
.Tcenter {
text-align: center;
}
html {
height: 100%;
margin: 0 !important;
}
.inner {
max-width: 1200px;
width: 100%; margin-left: auto;
margin-right: auto;
position: relative;
box-sizing: border-box;
z-index: 98;
justify-content: space-between;
}
.wrap-box {
-ms-flex-pack: justify;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
}
.anchor-txt {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
img {
width: 100%;
max-width: 100%;
} #header {
padding-top: 20px;
padding-bottom: 20px;
position: relative;
z-index: 300;
position: fixed;
top: 0;
left: 0;
width: 100%;
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 {
width: 162px;
display: block;
}
#header-nav .btn:hover img {
opacity: 0.6;
}
#nav-item-1 {
margin-left: 20px;
}
#panel-btn {
width: 45px;
margin-left: 20px;
height: 50px;
border: none; outline: none;
position: relative;
cursor: pointer;
background: none;
z-index: 101;
}
#panel-btn-icon {
display: block;
position: absolute;
text-align: center;
z-index: 11;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 45px;
height: 5px; -webkit-transition: 0.2s;
transition: 0.2s;
}
#panel-btn-icon:before,
#panel-btn-icon:after {
display: block;
content: "";
position: absolute;
top: 50%;
width: 45px;
height: 5px;
background: rgb(182, 0, 20);
-webkit-transition: 0.3s;
transition: 0.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 {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
#panel-btn .close:after {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.sp-menu {
display: block;
position: fixed;
right: 0;
top: 0;
z-index: 1002;
width: 45px;
}
.sp-menu .txt {
display: block;
text-align: center;
letter-spacing: 0.1em;
}
#sp-menubox li.item .txt a:after {
content: "";
position: absolute;
top: 6px; margin-left: 10px;
width: 0;
height: 0;
border-style: solid;
border-width: 7px 5px 0 5px;
border-color: #ffffff transparent transparent transparent;
} #sp-menubox li:before {
content: "";
position: absolute;
top: 10px;
left: -25px;
width: 15px;
height: 1px;
background: white;
}
#sp-menubox .minbox {
margin-left: 30px;
margin-top: 20px;
display: none;
}
#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 {
width: 360px;
position: fixed;
top: 105px;
right: -50%;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
z-index: 99;
height: 100%;
background: rgb(186, 0, 20);
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 50px;
overflow-x: hidden;
}
#sp-menubox ul {
margin-left: 25px;
margin-bottom: 25px;
}
#sp-menubox li {
position: relative;
}
#sp-menubox li:not(:last-child) {
padding-bottom: 20px;
}
#sp-menubox li a {
color: white;
font-size: 18px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
#sp-menubox .text-gallery {
width: 100%;
display: block;
margin: 0 auto 100px;
}
#searchform {
width: 100%;
border: 1px solid white;
border-radius: 6px;
background: rgb(186, 0, 20);
padding: 15px 20px 15px 15px;
margin-bottom: 25px;
position: relative;
box-sizing: border-box;
}
#searchform #s {
background: none;
color: white;
border: none;
font-size: 16px;
width: 90%;
}
#searchform #s::placeholder {
font-size: 14px;
color: #fff;
font-weight: bold;
}
#searchsubmit {
position: absolute;
width: 38px;
height: 38px;
top: calc(50% - 19px);
right: 5px;
background: none;
border: none;
}
#searchsubmit::before {
display: block;
position: absolute;
content: "";
width: 15px;
height: 15px;
top: calc(50% - 9px);
left: calc(50% - 9px);
border-radius: 50%;
box-shadow: 0 0 0 3px #fff;
}
#searchsubmit::after {
display: block;
position: absolute;
content: "";
width: 8px;
height: 6px;
top: calc(50% + 6px);
left: calc(50% + 2px);
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;
color: #fff;
font-weight: bold;
}
#searchform #s::-moz-placeholder {
font-size: 14px;
color: #fff;
font-weight: bold;
}
#searchform #s:-ms-input-placeholder {
font-size: 14px;
color: #fff;
font-weight: bold;
}
#searchform #s::-ms-input-placeholder {
font-size: 14px;
color: #fff;
font-weight: bold;
} #top-banner .cap figure {
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
}
#top-banner {
width: 100%;
position: relative;
margin: 105px auto 60px;
}
#top-banner .cap {
padding-top: 4.9926%;
position: relative;
} #footer {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/footer-bg.png) no-repeat center top;
background-size: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
height: 290px;
}
@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 {
justify-content: center;
align-items: center;
width: 100%;
margin: 0 auto 50px;
}
#footer .nav li {
margin: 0 10px;
position: relative;
font-size: 12px;
padding-top: 2px;
}
#footer .nav li:first-child {
font-size: 16px;
padding-top: 0;
}
#footer .nav li:first-child a:after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 2px;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
background-color: rgb(182, 0, 20);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#copy {
text-align: center;
font-style: normal;
font-size: 12px;
margin: 0 auto;
padding: 20px 0;
display: block;
}
#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 {
max-width: 407px;
width: 100%;
margin: 80px auto;
display: block;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#line-banner:hover img {
opacity: 0.6;
}
#footer .nav li a::after {
content: "";
position: absolute;
bottom: -6px;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 2px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
background-color: rgb(182, 0, 20);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#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 {
content: "";
position: absolute;
bottom: -6px;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 2px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
background-color: rgb(182, 0, 20);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#footer-nav .minbox a::after {
content: "";
position: absolute;
bottom: 6px !important;
}
#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;
vertical-align: middle;
text-decoration: none;
z-index: 11;
}
#footer-nav ul li.item-txt .txt::before {
position: absolute;
top: 0;
content: "";
vertical-align: middle;
right: -16px;
width: 8px;
height: 8px;
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 {
display: none;
width: auto;
position: absolute;
top: 14px;
background: rgba(255, 255, 255, 0.8);
padding: 20px 20px 10px;
left: -20px;
z-index: 100;
}
#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 {
color: rgb(182, 0, 20);
text-align: center;
font-size: 60px;
font-weight: 500;
margin-bottom: 80px;
letter-spacing: 0.1em;
}
.index-news-box .news-list-box {
max-width: 564px;
width: 100%;
margin: auto;
position: relative;
padding-left: 50px;
padding-right: 50px;
}
.index-news-box .news-list-box:before,
.index-news-box .news-list-box:after {
top: -50px;
content: "";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 1px;
margin: 0 auto;
text-align: center;
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-position: center;
background-repeat: no-repeat;
}
.index-news-box .news-list-box:before {
bottom: -50px;
top: auto;
}
.news-list-box li {
position: relative;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.news-list-box li:not(:last-child) {
margin-bottom: 40px;
}
.news-list-box dt {
justify-content: flex-start;
align-items: center;
margin-bottom: 12px;
}
.news-list-box .item {
background: rgb(182, 0, 20);
color: white;
margin-left: 10px;
padding: 2px 6px 5px 4px;
border: 1px solid rgb(182, 0, 20);
-webkit-transition: 0.5s;
transition: 0.5s;
}
.news-list-box li dd {
-webkit-transition: 0.5s;
transition: 0.5s;
}
.index-news-box {
margin: 100px 0 190px;
}
.news-list-box li:hover .item {
background: white;
color: rgb(182, 0, 20);
}
.news-list-box li:hover dd {
color: rgb(182, 0, 20);
text-decoration: underline;
} .sns-box {
background: rgb(240, 236, 236);
padding: 28px 0;
}
.sns-box .inner {
transform: translateY(-78px);
}
.sns-box .text {
text-align: center;
margin-bottom: 60px;
}
.sns-box h2 {
max-width: 306px;
width: 100%;
margin: 0 auto 20px;
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/fukidashi.png) no-repeat center top;
background-size: 100%;
color: rgb(182, 0, 20);
text-align: center;
font-size: 20px;
padding: 18px 0 50px;
line-height: 1.6;
font-weight: bold;
}
.sns-box ul {
justify-content: center;
align-items: center;
}
.sns-box li {
position: relative;
}
.sns-box li:hover img {
opacity: 0.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 {
margin: auto;
position: relative;
}
.index-other-contents .box:first-of-type {
margin: 0 auto 120px;
}
.index-other-contents .story-box:after {
margin: auto;
position: absolute;
display: block;
content: "";
left: 0;
top: 50%;
width: 100%;
height: 252px;
z-index: 2;
background-color: #ffffff;
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 {
max-width: 860px;
width: 100%;
margin: auto; position: relative;
z-index: 10;
}
.index-other-contents h2 {
letter-spacing: 0.1em;
text-align: center;
font-size: 60px;
font-weight: 500;
color: rgb(182, 0, 20);
line-height: 1;
margin-bottom: 20px;
}
.index-other-contents .itemcap .txt {
position: absolute;
text-align: center;
z-index: 2;
top: 62%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: 0.2s;
transition: 0.2s;
}
.index-other-contents .text {
text-align: center;
margin: 5px 0 30px;
}
.index-other-contents .itemcap .cap {
position: relative;
}
.index-other-contents .story-box {
width: 100%;
}
.index-other-contents .story-box .itemcap {
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);
padding-top: 25px;
position: relative;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.index-other-contents .itemcap:hover img {
opacity: 0.6;
}
.index-other-contents .box:last-of-type .itemcap {
margin-bottom: 30px;
}  .service-box {
background: rgb(182, 0, 20);
margin-bottom: 70px;
height: 638px;
}
.service-box h2 {
color: rgb(182, 0, 20);
text-align: center;
font-size: 60px;
margin-bottom: 30px;
letter-spacing: 0.1em;
font-weight: 500;
}
.service-box .text {
text-align: center;
margin-bottom: 50px;
}
.service-box .box .icon {
width: 50px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.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 {
max-width: 32%;
width: 100%;
padding-top: 31.915%;
position: relative;
overflow: hidden;
}
.service-box .cap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
z-index: 1;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.service-box .box .title {
position: absolute;
text-align: center;
z-index: 2;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: 0.2s;
transition: 0.2s;
width: 100%;
}
.service-box .box .title .font_sans,
.service-box .box h3 {
color: white;
}
.service-box .box h3 {
font-weight: 600;
line-height: 1.6;
font-size: 18px;
}
.service-box .box .font_sans {
border-bottom: 1px solid white;
display: inline-block;
padding-bottom: 10px;
margin-bottom: 8px;
font-size: 16px;
padding-left: 5px;
padding-right: 5px;
font-weight: 500;
} .index-benefits-box {
position: relative;
margin-bottom: 300px;
overflow: hidden; height: 720px;
padding-top: 52px;
}
.index-benefits-box::before,
.index-benefits-box::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.index-benefits-box::before {
left: 0;
width: 100%;
height: 208px;
background: rgb(182, 0, 20);
}
.index-benefits-box::after {
right: -100px;
left: auto;
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 {
text-decoration: underline;
color: rgb(182, 0, 20);
font-weight: bold;
}
.index-benefits-box h3 {
text-align: center;
letter-spacing: 0.1em;
font-weight: bold;
color: rgb(182, 0, 20);
font-size: 19px;
margin-bottom: 120px;
}
.index-benefits-box h2 {
position: relative;
max-width: 435px;
width: 100%;
margin: 0 auto 50px;
text-align: center;
color: rgb(182, 0, 20);
font-size: 36px;
font-weight: bold;
}
.index-benefits-box h2:after {
bottom: -10px;
content: "";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 1px;
margin: 0 auto;
text-align: center;
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-position: center;
background-repeat: no-repeat;
}
.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 {
content: "";
position: absolute;
width: 1px;
height: 100%;
background: rgb(182, 0, 20);
left: 50%;
transform: translate(-50%, 0);
}
.index-benefits-box .pc-only li:first-child .wrap-box {
height: 100%;
align-items: center;
justify-content: center;
}
.index-benefits-box .pc-only li:first-child {
padding-bottom: 20px;
padding-top: 10px;
}
.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;
padding-right: 20px;
display: block;
color: #3e3a39;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.index-benefits-box .btn .txt::before,
.index-benefits-box .btn .txt::after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
content: "";
vertical-align: middle;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.index-benefits-box .btn .txt::before {
width: 12px;
height: 12px;
-webkit-border-radius: 50%;
border-radius: 50%;
background: rgb(182, 0, 20);
}
.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;
border: 1px solid rgb(182, 0, 20);
padding: 10px;
background: white;
}
.index-benefits-box li {
position: relative;
border-bottom: 1px solid rgb(182, 0, 20);
padding-bottom: 30px;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.index-benefits-box li:last-child {
border-bottom: none;
}
.index-benefits-box li {
padding-top: 30px;
}
.index-benefits-box dl {
justify-content: center;
align-items: center;
}
.index-benefits-box dt {
width: 80px;
margin-right: 20px;
}
.index-benefits-box dd {
max-width: 275px;
width: 100%;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.index-benefits-box .text {
font-weight: bold;
font-size: 22px;
line-height: 1.4;
color: rgb(182, 0, 20);
margin-bottom: 8px;
-webkit-transition: 0.5s;
transition: 0.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 {
content: "";
width: 10px;
height: 10px;
top: 10px;
left: -15px;
display: block;
position: absolute;
border-radius: 50%;
background: rgb(182, 0, 20);
}
#guide .color-box {
background-color: rgba(250, 236, 226, 0.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);
padding: 0 20px;
}
#guide .color-box .inbox {
min-width: 500px;
}
#guide .color-box li {
border-bottom: 1px solid rgb(182, 0, 20);
padding: 30px 0;
}
#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 {
font-size: 28px;
color: rgb(182, 0, 20);
font-weight: bold;
display: inline;
border-bottom: 1px dotted rgb(182, 0, 20);
padding: 0 2px 4px;
line-height: 2.2;
letter-spacing: 0.1em;
}
#guide .item-box h3.wrap-box {
background: rgb(182, 0, 20);
width: 100%;
align-items: center;
justify-content: center;
padding: 15px 0;
margin-bottom: 30px;
}
#guide .item-box .inbox {
margin-top: 30px;
}
#guide .item-box h3.wrap-box .icon {
width: 54px;
}
#guide .item-box h3.wrap-box .txt {
color: white;
font-size: 30px;
font-weight: bold;
}
#guide .item-box .inbox:last-of-type { }
#guide .item-box .inbox:last-of-type h3 {
text-align: center;
font-size: 21px;
border-radius: 6px;
background: rgb(182, 0, 20);
width: 100%;
padding: 15px 0;
color: white;
margin-bottom: 20px;
} #message .item-list {
margin-left: 50px;
margin-right: 50px;
margin-top: 20px;
background: rgb(240, 236, 236);
padding: 30px;
box-sizing: border-box;
}
#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 {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size: 100%;
width: 25px;
height: 25px;
line-height: 22px;
text-align: center;
color: white;
font-size: 16px;
margin-right: 10px;
}
#message .arrow-text {
max-width: 362px;
width: 100%;
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 {
max-width: 1640px;
width: 100%;
margin: 0 auto 50px;
text-align: center;
padding: 0 20px;
box-sizing: border-box;
}
#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) {
margin-right: 22px;
position: relative;
}
#topicpath ul li:not(:last-child):after {
content: "";
position: absolute;
display: block;
top: 2px;
right: -12px;
width: 6px;
height: 6px;
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;
table-layout: fixed;
max-width: 1600px;
width: 100%;
margin: 104.5px auto 20px;
}
.page-header .cap,
.page-header .inbox {
display: table-cell;
vertical-align: middle;
position: relative;
}
.page-header .cap {
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
padding-top: 33%;
}
.page-header .inbox {
background-size: 100%;
width: 33%;
text-align: center;
}
.page-header .inbox .itemcap {
background-image: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/page-header/page-header-bg.png);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.page-header .inbox .box {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 10;
color: white;
width: 100%;
}
.page-header .inbox .font_sans {
font-size: 25px;
margin-bottom: 25px;
letter-spacing: 0.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 {
font-size: 24px;
margin-bottom: 30px;
}
.search-everything-highlight-color {
background-color: rgb(182, 0, 20) !important;
color: white;
padding: 2px 6px 2px 6px;
} #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 {
background: rgb(246, 244, 245);
padding: 30px;
margin: 50px 0;
}
.page-contents .number-list ol {
counter-reset: number;
}
.page-contents .number-list li:before {
counter-increment: number;
content: counter(number) ".";
position: absolute;
top: 0;
left: -20px;
color: rgb(182, 0, 20);
font-weight: bold;
}
.page-contents .number-list li {
line-height: 1.6;
margin-left: 20px;
position: relative;
font-size: 19px;
}
.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 {
max-width: 133px;
width: 100%;
}
#company dd {
max-width: calc(100% - 133px);
width: 100%;
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 {
max-width: 290px;
width: 100%;
border: 1px solid rgb(182, 0, 20);
border-radius: 6px;
padding: 30px 10px;
box-sizing: border-box;
margin-bottom: 40px;
}
#gallery .inbox:nth-child(n + 4) {
margin-bottom: 0;
}
#gallery .inbox h3 {
text-align: center;
font-size: 24px;
font-weight: bold;
color: rgb(182, 0, 20);
margin-bottom: 30px;
}
#gallery .inbox li:nth-child(-n + 2) {
margin-bottom: 3%;
}
#gallery .inbox li {
width: 48.5%;
padding-top: 48.5%;
position: relative;
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 {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
position: absolute;
-webkit-transition: all 0.5s ease;
transition: all 0.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; text-align: center;
margin: 0 auto 100px;
}
#slide-auto-box .cap {
width: 100%;
padding-top: 7%;
position: relative;
}
#slide-auto-box .cap figure {
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; height: 667px;
}
#slide-auto-box .slick-dots {
bottom: 20px;
} .single-gallery .listbox {
justify-content: flex-start;
}
.single-gallery .listbox li {
max-width: 19%;
width: 100%;
position: relative;
overflow: hidden;
cursor: pointer;
margin-bottom: 1.3%;
padding-top: 19%;
}
.single-gallery .listbox ul.wrap-box {
justify-content: left;
}
.single-gallery .listbox li:not(:nth-child(5n)) {
margin-right: 1%;
}
.single-gallery .listbox .cap {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
position: absolute;
-webkit-transition: all 0.5s ease;
transition: all 0.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 {
max-width: 250px;
width: 100%;
}
#adviser .introduction-box .inbox dl {
max-width: 550px;
width: 100%;
}
#adviser .introduction-box .inbox dt {
color: rgb(182, 0, 20);
font-size: 23px;
font-weight: bold;
border-bottom: 1px solid rgb(182, 0, 20);
padding-bottom: 12px;
margin-bottom: 12px;
}
#adviser .introduction-box .inbox dd {
font-size: 16px;
line-height: 1.6;
}
#adviser .introduction-box .inbox dd .item-box {
border: 2px solid rgb(182, 0, 20);
padding: 10px 20px;
border-radius: 6px;
margin-top: 30px;
line-height: 1.6;
}
#adviser .introduction-box .inbox dd .item-box .icon {
background: rgb(182, 0, 20);
color: white;
padding: 6px 12px;
font-size: 15px;
font-weight: 700;
position: relative;
top: -24px;
display: inline-block;
}
#adviser .introduction-box .inbox dd .item-box .icon::after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 11px 5px 0 5px;
border-color: rgb(182, 0, 20) transparent transparent transparent;
bottom: -11px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#adviser .introduction-box .inbox dd .item-box ul li {
margin-bottom: 10px;
line-height: 1.6;
position: relative;
margin-left: 15px;
}
#adviser .introduction-box .inbox dd .item-box ul li:before {
content: "";
width: 5px;
height: 5px;
top: 10px;
left: -12px;
display: block;
position: absolute;
border-radius: 50%;
background: #000;
}
#adviser .introduction-box .inbox dd .item-box p {
margin-bottom: 10px;
}
#adviser .introduction-box .text-center {
text-align: center;
font-size: 24px;
}
#adviser .introduction-box .inbox dd .item-box {
text-align: center;
padding-left: 1rem;
padding-right: 1rem;
}
#adviser .introduction-box .inbox dd .item-box p,
#adviser .introduction-box .inbox dd .item-box li {
text-align: left;
}
#adviser .support-box .inbox .cap {
max-width: 150px;
width: 100%;
}
#adviser .support-box .inbox dl {
max-width: 650px;
width: 100%;
}
#adviser .support-box .inbox dt {
color: #000;
}
#adviser .support-box .inbox dt .icon {
margin-bottom: 15px;
}
#adviser .support-box .inbox dt .icon span {
color: #fff;
font-size: 12px;
background: rgb(182, 0, 20);
padding: 5px;
}
#adviser .support-box .inbox dt strong {
margin-bottom: 10px;
line-height: 1;
margin-right: 20px;
}
#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 {
max-width: 415px;
width: 100%;
margin: auto;
}
#adviser .special-box .cap {
margin-bottom: 40px;
}
#adviser .special-box dt {
border-bottom: 1px solid rgb(182, 0, 20);
position: relative;
margin-bottom: 50px;
padding-bottom: 14px;
letter-spacing: 0.1em;
}
#adviser .special-box dt .txt {
font-size: 23px;
color: rgb(182, 0, 20);
font-weight: bold;
display: block;
text-align: center;
}
#adviser .special-box dt .item-txt {
width: 85px;
height: 85px;
background: rgb(182, 0, 20);
border-radius: 50%;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 20%;
}
#adviser .special-box dl {
clear: both;
}
#adviser .special-box dt .item-txt .item {
color: white;
font-weight: bold;
font-size: 14px;
text-align: center;
line-height: 1.4;
display: block;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 100%;
}
#adviser .special-box dd p {
font-size: 16px;
margin-bottom: 5px;
}
#adviser .special-box dd {
font-size: 16px;
line-height: 1.8;
}
#adviser .special-box dd img {
width: 139px;
float: right;
margin: 0 0 0 20px;
}
#adviser .other-box {
margin-bottom: 100px;
}
#adviser .other-box .inbox {
max-width: 280px;
width: 100%;
margin: 0 auto 20px;
}
#adviser .other-box .inbox ul {
margin-bottom: 15px;
}
#adviser .other-box .itembox {
background: rgb(182, 0, 20);
border-radius: 6px;
height: 89px;
align-items: center;
justify-content: center;
text-align: center;
margin-top: 20px;
}
#adviser .other-box .itembox p {
color: white;
line-height: 1.2;
font-weight: bold;
} #system .list-box {
margin-bottom: 20px;
}
#system .box-title .text {
display: block;
margin-top: 30px;
}
#system .box-title .item-txt {
background: rgb(182, 0, 20);
color: white;
padding: 6px 12px;
font-size: 15px;
font-weight: bold;
position: relative;
}
#system .box-title .item-txt:after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 11px 5px 0 5px;
border-color: rgb(182, 0, 20) transparent transparent transparent;
bottom: -11px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#system .border-title,
#guide .border-title {
border-left: 4px solid rgb(182, 0, 20);
padding-left: 15px;
font-size: 21px;
line-height: 1.6;
font-weight: bold;
margin-bottom: 25px;
}
#system .item-list { margin-top: 20px;
background: rgb(240, 236, 236);
padding: 30px;
box-sizing: border-box;
margin-bottom: 25px;
}
#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 {
content: "";
width: 10px;
height: 10px;
top: 10px;
left: -15px;
display: block;
position: absolute;
border-radius: 50%;
background: rgb(182, 0, 20);
}
#system .item-list .list-box li:before {
top: 5px;
}
#system .item-list .list-box li:not(:last-child) {
margin-bottom: 35px;
}
#system .box .cap {
max-width: 381px;
width: 100%;
margin: 35px auto 0;
}
#system section.box:not(:last-of-type) {
margin-bottom: 50px;
}
#system .number-list p {
margin-bottom: 0;
font-weight: bold;
}
#system .number-list li:not(:last-child) {
margin-bottom: 25px;
}
#system .number-list li {
justify-content: flex-start;
align-items: center;
}
#system .number-list li .icon {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size: 100%;
width: 25px;
height: 25px;
line-height: 22px;
text-align: center;
color: white;
font-size: 16px;
margin-right: 10px;
} #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: 0.1em;
}
#service .service-box .box:not(:first-of-type) h3 {
font-size: 23px;
} .page-contents {
max-width: 850px;
width: 100%;
margin: 0 auto 180px;
padding-left: 10px;
padding-right: 10px;
}
.page-contents .box-title .text {
font-size: 30px;
font-weight: bold;
line-height: 1.4;
}
.page-contents .box-title {
position: relative;
text-align: center;
color: rgb(182, 0, 20);
font-size: 30px;
line-height: 1.4;
font-weight: bold;
margin-bottom: 50px;
}
.page-contents .box-title:after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 1px;
bottom: -20px;
margin: 0 auto;
text-align: center;
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-position: center;
background-repeat: no-repeat;
}
.page-contents article.box {
margin-bottom: 100px;
}
.page-contents .text-box p b {
font-weight: bold;
}
.page-contents .text-box p {
line-height: 1.8; }
.page-contents .text-box .inner80 {
margin: 0 80px;
}
.page-contents .text-box.corporate-box h4 {
font-size: 18px;
font-weight: 700;
margin-bottom: 20px;
}
.page-contents .text-box.corporate-box p.text-center {
font-size: 30px;
font-weight: 700;
}
.page-contents .text-box p.text-center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.page-contents .text-box p:not(:last-of-type) {
margin-bottom: 20px;
}
.page-contents .text-box p.text-right {
text-align: right;
margin-top: 20px;
}
.page-contents .text-box .item-color {
color: rgb(182, 0, 20);
}
.page-contents .text-box .text-line {
text-decoration: underline;
font-weight: bold;
}
.page-contents .text-box .font-w {
font-weight: bold;
}
.page-contents .box-title .item-arrow {
width: 25px;
vertical-align: -5px;
}
.page-contents .btn,
.other-color-box {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.page-contents .btn a,
.page-contents button.btn,
.other-color-box .btn a {
background: rgb(182, 0, 20);
border: 1px solid rgb(182, 0, 20);
border-radius: 4px;
text-align: center;
margin: auto;
color: white;
line-height: 55px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
padding: 30px;
max-width: 100%;
min-width: 180px;
display: inline-block;
line-height: 1.5;
}
.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 {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size: 100%;
width: 37px;
height: 37px;
line-height: 34px;
text-align: center;
color: white;
font-size: 18px;
margin-right: 10px;
}
.page-contents .line-box .border-box {
border: 1px solid rgb(182, 0, 20);
background-color: #ffffff;
background-image: radial-gradient(rgba(182, 0, 20, 0.2) 10%, transparent 10%),
radial-gradient(rgba(182, 0, 20, 0.2) 10%, transparent 10%);
background-position: 0 0, 7px 7px;
background-size: 14px 14px;
margin-bottom: 50px;
}
.page-contents .line-box .border-box li {
padding: 50px 0;
position: relative;
z-index: 2;
}
.page-contents .line-box .border-box li:first-child:after {
content: "";
display: block;
position: absolute;
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/about/img05.png) no-repeat center center;
background-size: 100%;
width: 102px;
height: 135px;
z-index: 10;
left: 75%;
top: 85%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.page-contents .line-box .border-box li:not(:last-child):before {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: rgb(182, 0, 20) transparent transparent transparent;
bottom: -10px;
left: 50%;
-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 {
justify-content: center;
align-items: center;
}
.page-contents .line-box .border-box .title p {
font-size: 21px;
font-weight: bold;
max-width: 400px;
width: 100%;
}
.page-contents .line-box .border-box .item {
max-width: 254px;
width: 100%;
margin: 20px auto 0;
}
#guide {
max-width: 100%;
margin-bottom: 100px;
}
#guide .inner {
max-width: 850px;
}
.page-contents .flow-box {
background: #b60114;
width: 100%;
padding: 60px;
box-sizing: border-box;
margin-bottom: 100px;
}
.page-contents .flow-box .text-box {
border-radius: 6px;
background: #fff;
padding: 60px 100px;
}
.page-contents .flow-box .border-box .icon {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size: 100%;
width: 37px;
height: 37px;
line-height: 34px;
text-align: center;
color: white;
font-size: 18px;
margin-right: 10px;
}
.page-contents .flow-box .border-box li .cap {
margin-bottom: 40px;
}
.page-contents .flow-box .border-box li:not(:last-child) {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/guide/flow02.png) no-repeat center bottom;
background-size: contain;
padding-bottom: 60px;
margin-bottom: 30px;
}
.page-contents .flow-box .border-box li:first-child {
padding-bottom: 80px;
}
.page-contents .flow-box .border-box .title {
justify-content: left;
align-items: center;
margin-bottom: 30px;
}
.page-contents .flow-box .border-box .title p {
font-size: 21px;
font-weight: bold;
max-width: 600px;
width: 100%;
margin-bottom: 0;
}
.page-contents .flow-box .border-box .item {
max-width: 254px;
width: 100%;
margin: 20px auto 0;
}
.page-contents .flow-box .text-box p {
font-size: 18px;
margin-bottom: 20px;
}
.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 {
max-width: 32%;
width: 100%;
position: relative;
padding-top: 20%;
}
.page-contents .gallerys-box li figure {
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transition: 0.2s ease-in;
transition: 0.2s ease-in;
}
.page-contents .gallerys-box li figure:hover {
opacity: 0.6;
}
.page-contents .corporate-box .min-txt {
text-align: center;
font-size: 30px;
line-height: 1.6;
margin-bottom: 15px;
}
.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 {
background: rgba(240, 236, 236, 0.6);
padding: 0 0 50px;
margin: 100px 0;
}
#night .color-box header {
text-align: center;
transform: translate(0, -25px);
}
#night .color-box header p {
font-weight: bold;
}
#night .color-box header .item {
font-weight: bold;
font-size: 39px;
}
#night .color-box h3 {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/house/bg-item.png) no-repeat center center;
background-size: cover;
width: 404px;
height: 52px;
line-height: 55px;
color: white;
font-size: 22px;
margin: 0 auto 20px;
}
#night .icon-title .icon {
width: 45px;
height: 56px;
}
#night .list-item-box {
width: 100%;
margin: auto;
padding: 0 80px;
box-sizing: border-box;
}
#night .list-box {
width: 100%;
margin: auto;
padding: 0 80px;
box-sizing: border-box;
}
#night .night-box {
margin: 0 auto 130px;
}
#night .night-box .inbox:not(:last-of-type) {
margin-bottom: 40px;
}
#night .night-box .inbox {
border: 1px solid rgb(182, 0, 20);
padding: 20px;
}
#night .list-item-box li:not(:last-of-type) {
margin-bottom: 25px;
}
#night .list-item-box h4 {
position: relative;
margin-left: 20px;
color: rgb(182, 0, 20);
font-weight: bold;
font-size: 21px;
margin-bottom: 20px;
}
#night .list-item-box h4:before {
content: "";
width: 10px;
height: 10px;
top: 10px;
left: -15px;
display: block;
position: absolute;
border-radius: 50%;
background: rgb(182, 0, 20);
}
#night .list-item-box dl {
border-bottom: 1px solid rgb(191, 191, 191);
padding: 20px 0;
}
#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 {
text-align: center;
position: absolute;
top: 50px;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
z-index: 10;
width: 100%;
}
#house .slidebox h3 {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/house/bg-item.png) no-repeat center center;
background-size: cover;
width: 404px;
height: 52px;
line-height: 55px;
color: white;
font-size: 22px;
margin: 0 auto 20px;
}
#house #house-banner {
max-width: 523px;
width: 100%;
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 {
background: rgba(240, 236, 236, 0.6);
padding: 50px 0;
margin: 100px 0;
} #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 {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size: 100%;
width: 37px;
height: 37px;
line-height: 34px;
text-align: center;
color: white;
font-size: 18px;
margin-right: 15px;
}
#cafe .icon-title p {
font-weight: 700;
font-size: 28px;
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 {
width: 158px;
height: 158px;
background: rgb(182, 0, 20);
border-radius: 50%;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
right: -100px;
bottom: -120px;
}
#cafe .inbox .item .item-txt {
color: white;
font-weight: bold;
font-size: 23px;
text-align: center;
line-height: 1.4;
display: block;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 100%;
}
#cafe .time-box {
text-align: center;
}
#cafe .time-box .item {
font-weight: bold;
margin-bottom: 5px;
}
#cafe .time-box .txt {
font-size: 15px;
margin-bottom: 5px;
}
#cafe .time-box .link-txt a {
text-decoration: underline;
color: rgb(182, 0, 20);
}
#cafe .access-box ul {
text-align: center;
}
#cafe .access-box ul li {
font-size: 19px;
line-height: 1.6;
}
#cafe .color-box {
background: rgba(240, 236, 236, 0.6);
padding: 50px 0;
margin: 100px 0;
} #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 {
max-width: 30.591%;
width: 100%;
position: relative;
-webkit-transition: 0.2s;
transition: 0.2s;
transition: 0.2s;
}
.voice-box .inbox li:hover {
opacity: 0.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 {
width: 100%;
padding-top: 66.552%;
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.voice-box .inbox li .cap figure {
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.voice-box .inbox li dt {
font-weight: bold;
color: rgb(182, 0, 20);
font-size: 16px;
margin-bottom: 10px;
line-height: 1.4;
text-align: left;
}
.voice-box .inbox li dd {
width: 100%;
justify-content: flex-start;
}
.voice-box .inbox li dd .txt {
font-size: 12px;
color: rgb(102, 102, 102);
margin-bottom: 5px;
line-height: 1.5;
display: block;
width: 100%;
}
.voice-box .inbox li dd .txt:first-child {
font-size: 14px;
color: #333;
font-weight: bold;
margin-bottom: 5px;
line-height: 1.5;
}
#voice .description-txt {
text-align: center;
margin-bottom: 40px;
font-size: 18px;
}
#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 {
text-align: center;
font-size: 18px;
margin-bottom: 80px;
line-height: 1.6;
}
.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 {
width: 100%;
padding-top: 66.552%;
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.voice-box .inbox li .cap figure {
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.voice-box .inbox li dt {
font-weight: bold;
color: rgb(182, 0, 20);
font-size: 16px;
margin-bottom: 10px;
line-height: 1.4;
text-align: left;
}
.voice-box .inbox li dd {
width: 100%;
justify-content: flex-start;
}
.voice-box .inbox li dd .txt {
font-size: 12px;
color: rgb(102, 102, 102);
margin-bottom: 5px;
line-height: 1.5;
display: block;
width: 100%;
}
.voice-box .inbox li dd .txt:first-child {
font-size: 14px;
color: #333;
font-weight: bold;
margin-bottom: 5px;
line-height: 1.5;
}
#voice .description-txt {
text-align: center;
margin-bottom: 40px;
font-size: 18px;
}
#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 {
text-align: center;
font-size: 18px;
margin-bottom: 80px;
line-height: 1.6;
}
.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%;
margin: 0;
padding: 0;
}
#online p {
line-height: 1.8;
}
#online .page-header {
margin-top: 0;
padding-top: 104.5px;
}
#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 {
color: rgb(182, 0, 20);
text-align: center;
font-size: 30px;
line-height: 1.4;
padding: 20px 0;
font-weight: bold;
}
#online .sub-text {
text-align: center;
padding: 10px 0 100px;
}
#online .inner-title {
background: rgb(182, 0, 20);
color: white;
text-align: center;
font-size: 30px;
line-height: 1.4;
padding: 20px 0;
font-weight: bold;
}
#online section .inner-text {
text-align: center;
padding: 30px 0;
}
#online img {
width: 50%;
padding: 30px 0;
}
.online-movie {
position: relative;
margin: 10px 0 100px;
}
.online-movie .video-text {
color: white;
text-align: center;
font-size: 40px;
line-height: 1.4;
padding: 20px 0;
font-weight: bold;
margin-bottom: 10px;
position: absolute;
top: 45%;
left: 35%;
}
#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;
margin: 20px auto 50px;
background: #eeeeee;
padding: 20px 0 5px 20px;
}
#online .inner-lists li {
font-size: 18px;
line-height: 1.5em;
margin-bottom: 16px;
padding-left: 32px;
position: relative;
}
#online .inner-lists li::before {
content: "";
background-image: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/online/check_org.svg);
display: block;
position: absolute;
left: 0;
top: 0;
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#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 {
font-size: 1.875rem;
margin-top: 0;
}
#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 {
max-width: 850px;
width: 100%;
}
#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 {
text-align: center;
color: rgb(182, 0, 20);
font-size: 30px;
line-height: 1.4;
font-weight: bold;
margin-bottom: 50px;
}
#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: bold;
}
#event .top-text03 {
margin-bottom: 100px;
}
#event .inner-title-arrow {
display: block;
height: 50px;
background-color: rgb(182, 0, 20);
position: relative;
top: 40px;
margin: 0 auto;
color: white;
text-align: center;
font-size: 30px;
font-weight: bold;
line-height: 50px;
}
#event .inner-title-arrow:before {
position: absolute;
content: "";
width: 0;
height: 0;
border: 60px solid transparent;
border-left: 60px solid rgb(182, 0, 20);
left: 100%;
top: -37px;
}
#event .inner-lists ul {
max-width: 650px;
margin: 100px auto 50px;
background: #eeeeee;
padding: 20px 0 5px 20px;
}
#event .inner-lists li {
font-size: 18px;
line-height: 1.5em;
margin-bottom: 16px;
padding-left: 32px;
position: relative;
}
#event .inner-lists li::before {
content: "";
background-image: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/event/check_black.svg);
display: block;
position: absolute;
left: 0;
top: 0;
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#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;
padding: 0 0 0 60px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 20px;
font-weight: bold;
height: 140px;
border-bottom: 1px solid #000;
line-height: 120px;
}
.schedule-lists li::before,
.schedule-lists li::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.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 {
font-size: 14px;
position: absolute;
bottom: 5px;
}
#event .corporate-title {
position: relative;
color: rgb(182, 0, 20);
font-size: 30px;
line-height: 1.4;
font-weight: bold;
margin: 100px auto 50px;
display: flex;
align-items: center;
justify-content: center;
}
#event .corporate-title:after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 1px;
bottom: -20px;
margin: 0 auto;
text-align: center;
background-image: linear-gradient(
to right,
transparent,
rgb(182, 0, 20) 25%,
rgb(182, 0, 20) 75%,
transparent
);
background-position: center;
background-repeat: no-repeat;
}
.event-entry .inner-title-sub {
position: relative;
margin: 100px 0 0;
text-align: center;
color: rgb(182, 0, 20);
font-size: 30px;
line-height: 1.4;
font-weight: bold;
}
.event-entry .inner-title-sub::after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 1px;
bottom: -20px;
margin: 0 auto;
text-align: center;
background-image: linear-gradient(
to right,
transparent,
rgb(182, 0, 20) 25%,
rgb(182, 0, 20) 75%,
transparent
);
background-position: center;
background-repeat: no-repeat;
}
.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 {
text-align: center;
color: #000;
font-size: 20px;
font-weight: bold;
position: relative;
display: block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
top: 100px;
left: 37%;
}
.event-tour .event-arrow::before,
.event-tour .event-arrow::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.event-tour .event-arrow::before {
width: 80px;
height: 25px;
background: rgb(182, 0, 20);
transform: rotate(135deg);
}
.event-tour .event-arrow::after {
left: 27px;
width: 30px;
height: 30px;
border-top: 20px solid rgb(182, 0, 20);
border-right: 20px solid rgb(182, 0, 20);
top: -25px;
}
.event-tour .event-title {
padding: 73% 32px 0;
margin-bottom: 30px;
text-align: center;
color: #000;
font-size: 30px;
line-height: 1.4;
font-weight: bold;
margin-bottom: 50px;
}
.event-tour .right-box {
width: 60%;
}
.event-tour .right-box-title {
text-align: center;
background: #555555;
color: #fff;
font-size: 25px;
margin: 40px 40px 40px 0;
height: 40px;
line-height: 40px;
}
.event-tour .right-text01 {
margin-bottom: 20px;
}
.event-tour .right-text02 {
margin-bottom: 20px;
} .event-night {
display: flex;
max-width: 700px;
margin: 100px auto 200px;
border: 3px solid rgb(182, 0, 20);
border-radius: 5px;
position: relative;
}
.event-night .right-box {
width: 40%;
}
.event-night .event-arrow {
text-align: center;
color: #000;
font-size: 20px;
font-weight: bold;
position: relative;
display: block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
top: 100px;
left: 37%;
}
.event-night .event-arrow::before,
.event-night .event-arrow::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.event-night .event-arrow::before {
width: 80px;
height: 25px;
background: rgb(182, 0, 20);
transform: rotate(135deg);
}
.event-night .event-arrow::after {
left: 27px;
width: 30px;
height: 30px;
border-top: 20px solid rgb(182, 0, 20);
border-right: 20px solid rgb(182, 0, 20);
top: -25px;
}
.event-night .event-title {
padding: 73% 40px 0;
margin-bottom: 30px;
text-align: center;
color: #000;
font-size: 30px;
line-height: 1.4;
font-weight: bold;
margin-bottom: 50px;
}
.event-night .left-box {
width: 60%;
margin-left: 40px;
}
.event-night .left-box-title {
text-align: center;
background: #555555;
color: #fff;
font-size: 25px;
margin: 40px 0 40px 0;
height: 40px;
line-height: 40px;
}
.event-night .left-text01 {
margin-bottom: 20px;
}
.event-night .left-text02 {
margin-bottom: 50px;
}
.event-night .circle-icon {
color: #fff;
display: block;
content: "";
background-color: rgb(182, 0, 20);
width: 120px;
height: 120px;
border-radius: 999px;
text-align: center;
font-size: 14px;
position: absolute;
top: -56px;
right: -59px;
}
.event-night .circle-icon::after {
content: "2021年2月より開催予定";
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 46px;
}
#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 {
margin: 0 0 0 30px;
font-size: 18px;
width: 70%;
}
#event .inner-lists ul {
width: 80%;
}
#event .sub-text {
width: 80%;
margin: 80px auto 0;
}
#event .schedule-lists {
max-width: 80%;
}
.schedule-lists li {
line-height: 1;
display: flex;
align-items: center;
font-size: 16px;
height: 160px;
}
.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 {
width: 85%;
flex-direction: column;
}
.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 {
width: 85%;
flex-direction: column-reverse;
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 {
margin-bottom: 0;
margin-top: 100px;
width: 850px;
margin-left: auto;
margin-right: auto;
}
.single-voice-box .story-box {
margin-top: 0;
}
.story-box .itemcap {
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);
padding-top: 25px;
position: relative;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.story-box p {
text-align: center;
margin: 20px auto 0;
}
.story-box .itemcap {
-webkit-transition: 0.2s;
transition: 0.2s;
transition: 0.2s;
}
.story-box .itemcap:hover {
opacity: 0.6;
}
#users p.description-txt {
text-align: center;
margin: 0 auto 30px;
}
#users .voice-box .inbox {
width: 48%;
border: 1px solid rgb(182, 0, 20);
border-radius: 6px;
padding: 30px 10px;
box-sizing: border-box;
margin-bottom: 40px;
position: relative;
padding-bottom: 115px;
padding-top: 70px;
}
#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 {
bottom: 30px;
position: absolute;
text-align: center;
margin: 0 auto;
display: block;
width: 100%;
}
#users .voice-box ul {
margin-bottom: 30px;
}
#users .voice-box .inbox h4 {
text-align: center;
color: rgb(182, 0, 20);
font-size: 22px;
line-height: 1.4;
font-weight: 700;
margin-bottom: 30px;
}
#users .voice-box .inbox li {
max-width: 100%;
width: 100%;
position: relative;
margin: 0;
}
#users .voice-box .inbox li {
-webkit-transition: 0.2s;
transition: 0.2s;
transition: 0.2s;
}
#users .voice-box .inbox li:hover {
opacity: 0.6;
}  .single .page-header {
margin-bottom: 15px;
}
.single-contents-box .contents-box {
padding-left: 60px;
padding-right: 60px;
}
.single-contents-box .item-box {
justify-content: flex-end;
align-items: center;
margin-bottom: 25px;
}
.single-contents-box .item-box time {
line-height: 23px;
display: block;
}
.single-contents-box .item-box .category-name {
background: rgb(182, 0, 20);
color: white;
margin-right: 10px;
padding: 2px 6px 5px 4px;
}
.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 {
max-width: 1000px;
width: 100%;
margin: 0 auto 180px;
padding-left: 10px;
padding-right: 10px;
}
.other-link-box ul {
justify-content: flex-start;
}
.other-link-box li {
border: 1px solid rgb(182, 0, 20);
background: rgb(182, 0, 20);
width: 32%;
position: relative;
text-align: center;
height: 78px;
line-height: 78px;
border-radius: 6px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.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 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
} .other-color-box {
background: rgb(246, 244, 245);
padding: 50px 0;
margin-bottom: 80px;
}
.other-color-box .box-title {
position: relative;
text-align: center;
color: rgb(182, 0, 20);
font-size: 30px;
line-height: 1.4;
font-weight: bold;
margin: 0 auto 40px;
max-width: 678px;
width: 100%;
}
.other-color-box .box-title:after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 1px;
bottom: -20px;
margin: 0 auto;
text-align: center;
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-position: center;
background-repeat: no-repeat;
} .other-color-box .inbox {
max-width: 948px;
} .single-voice-box header .text {
text-align: center;
margin-bottom: 20px;
}
.single-voice-box header .text .txt {
font-weight: bold;
font-size: 18px;
}
.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 {
max-width: 600px;
width: 100%;
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 {
font-weight: bold;
color: rgb(182, 0, 20);
margin-bottom: 18px;
}
.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 {
max-width: 32%;
width: 100%;
position: relative;
height: 50px;
}
.single-sns-box li .txt {
color: white;
font-size: 14px;
margin-left: 12px;
}
.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 {
max-width: 600px;
width: 100%;
margin: auto;
}
.single-story-box .minbox {
background: rgb(246, 244, 245);
padding: 20px;
box-sizing: border-box;
justify-content: left;
margin-bottom: 60px;
}
.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 {
margin-bottom: 0;
width: 100px;
}
.single-story-box .minbox .cap {
width: 200px;
}
.single-story-box .text-box h3 {
font-size: 24px;
color: rgb(182, 1, 20);
font-weight: bold;
margin-bottom: 25px;
line-height: 1.5;
}
.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 {
text-align: center;
font-weight: bold;
font-size: 34px;
line-height: 1.6;
color: rgb(182, 0, 20);
margin-bottom: 25px;
}
#ticket .top-box .text {
text-align: center;
margin-bottom: 12px;
}
#ticket .top-box .text .txt {
border-bottom: 2px dotted rgb(182, 0, 20);
font-size: 26px;
line-height: 1.8;
}
#ticket .top-box .item-txt {
text-align: center;
font-size: 12px;
line-height: 1.8;
}
#ticket .box-title .icon {
width: 44px;
height: 44px;
margin-right: 10px;
}
#ticket .icon-title {
align-items: center;
justify-content: center;
}
#ticket .color-box .item {
background: url(//jo-katsu.com/release/wordpress/wp-content/themes/jo-katsu/images/common/icon-bg01.png) no-repeat center center;
background-size: 100%;
width: 25px;
height: 25px;
line-height: 22px;
text-align: center;
color: white;
margin-right: 15px;
font-size: 12px;
}
#ticket .color-box {
background-color: rgba(250, 236, 226, 0.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);
padding: 0 20px;
}
#ticket .text-box .item-color {
font-weight: bold;
}
#ticket .color-box p {
font-weight: bold;
}
#ticket .color-box .txt {
font-size: 30px;
font-weight: bold;
}
#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: bold;
text-decoration: underline;
}
#ticket .inbox {
max-width: 580px;
width: 100%;
margin: 0 auto;
}
#ticket .box-color-txt {
background: rgb(182, 0, 20);
height: 46px;
line-height: 42px;
color: white;
text-align: center;
font-size: 21px;
border-radius: 4px;
margin-bottom: 35px;
}
#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 {
text-align: center;
font-size: 42px;
margin-bottom: 30px;
}
#about .top-box h3 {
text-align: center;
font-size: 26px;
margin-bottom: 25px;
line-height: 1.6;
}
#about .index-benefits-box::before,
#about .index-benefits-box::after {
content: none;
}
#about .index-benefits-box {
background: rgb(240, 236, 236);
padding: 50px 0;
margin-bottom: 50px;
}
#about .index-benefits-box .btn {
max-width: none;
width: auto;
height: auto;
background: none;
border: none;
border-radius: 4px;
margin: 0;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
#about .text-box .cap {
margin-bottom: 15px;
}
#about .text-center {
text-align: center;
font-size: 28px;
font-weight: bold;
}
#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 {
overflow: hidden;
width: 100%;
height: 160px;
position: relative;
}
#about .tabs-box li:not(:last-child) {
margin-bottom: 25px;
}
#about .tabs-box li figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
z-index: 1;
-webkit-transition: 0.5s;
transition: 0.5s;
}
#about .tabs-box li:hover figure {
transform: scale(1.1);
}
#about .tabs-box h4 {
font-weight: bold;
font-size: 26px;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
z-index: 2;
color: white;
}
#about .text-box:last-of-type h3 {
text-align: center;
font-size: 28px;
position: relative;
}
#about .text-box:last-of-type .item-color {
border-bottom: 2px solid rgb(182, 0, 20);
} .question-box ul {
border: 1px solid rgb(182, 0, 20);
margin-bottom: 50px;
}
.question-box h3 {
background: rgb(182, 0, 20);
color: white;
text-align: center;
font-size: 30px;
line-height: 1.4;
padding: 20px 0;
font-weight: bold;
position: relative;
}
.question-box h3:after {
width: 0;
height: 0;
border-style: solid;
border-width: 12px 6px 0 6px;
border-color: rgb(182, 0, 20) transparent transparent transparent;
content: "";
display: block;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
bottom: -12px;
}
.question-box .itembox .icon {
font-size: 32px;
text-align: center;
width: 30px;
position: relative;
}
.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 {
padding: 40px 0 40px 40px;
align-items: center;
justify-content: flex-start;
}
.question-box li:not(:last-child) {
border-bottom: 2px dotted rgb(182, 0, 20);
}
.question-box li .font_sans:after {
content: "";
position: absolute;
display: block;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background: rgb(182, 0, 20);
}
.question-box li .font_sans {
color: rgb(182, 0, 20);
font-weight: bold;
font-size: 33px;
position: relative;
margin-right: 15px;
}
.question-box li .txt {
font-size: 18px;
display: inline-grid;
width: 90%;
}
.question-box li .title {
cursor: pointer;
}
.category-faq .itembox {
border: 1px solid rgb(182, 0, 20);
background-color: #ffffff;
background-image: radial-gradient(rgba(182, 0, 20, 0.2) 10%, transparent 10%),
radial-gradient(rgba(182, 0, 20, 0.2) 10%, transparent 10%);
background-position: 0 0, 7px 7px;
background-size: 14px 14px;
margin: 0 80px 50px;
}
.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;
table-layout: fixed;
width: 100%;
}
.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 {
font-size: 32px;
text-align: center;
width: 30px;
position: relative;
}
.category-faq .itembox .title .item {
color: rgb(182, 0, 20);
border-bottom: 2px solid rgb(182, 0, 20);
font-weight: 500;
}
.category-faq .itembox .text .item {
color: rgb(77, 77, 133);
border-bottom: 2px solid rgb(77, 77, 133);
font-weight: 500;
background: none;
}
.category-faq .itembox .min-title,
.category-faq .itembox .data {
padding-left: 15px;
}
.category-faq .itembox .itemtxt {
color: rgb(182, 0, 20);
font-size: 18px;
font-weight: 700;
}
.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;
max-width: 32%;
width: 100%;
border: 1px solid rgb(182, 0, 20);
border-radius: 6px;
padding: 30px 10px;
box-sizing: border-box;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#faq li dl {
display: table;
table-layout: fixed;
width: 100%;
}
#faq li dt,
#faq li dd {
display: table-cell;
vertical-align: middle;
}
#faq li dt {
width: 20%;
}
#faq li dd {
color: rgb(182, 0, 20);
font-size: 16px;
font-weight: 700;
padding-left: 12px;
line-height: 1.4;
-webkit-transition: all 0.3s ease;
transition: all 0.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 {
background: rgb(240, 236, 236);
padding: 50px 0;
margin-bottom: 120px;
}
.voice-select-box .inbox {
max-width: 850px;
width: 100%;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
}
.voice-select-box h3 {
position: relative;
text-align: center;
color: rgb(182, 0, 20);
font-size: 30px;
line-height: 1.4;
font-weight: bold;
margin-bottom: 40px;
}
.voice-select-box h3 .item {
width: 32px;
vertical-align: unset;
}
.voice-select-box h3:after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 1px;
bottom: -20px;
margin: 0 auto;
text-align: center;
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-position: center;
background-repeat: no-repeat;
}
.voice-select-box ul {
justify-content: flex-start;
max-width: 1200px;
width: 100%;
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;
overflow: hidden;
width: 100%;
padding-top: 69.445%;
margin-bottom: 15px;
}
.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: bold;
text-decoration: underline;
}
.voice-select-box .cap figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
z-index: 1;
-webkit-transition: 0.5s;
transition: 0.5s;
} .service-notebox {
max-width: 1000px;
width: 100%;
margin: 0 auto 120px;
padding-left: 10px;
padding-right: 10px;
}
.service-notebox h3 {
font-weight: bold;
font-size: 19px;
margin-bottom: 12px;
}
.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 {
color: rgb(182, 0, 20);
font-size: 24px;
font-weight: bold;
}
#sitemap h2 {
position: relative;
}
#sitemap h2:before {
width: 16px;
height: 16px;
content: "";
display: block;
border-radius: 50%;
background: rgb(182, 0, 20);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
position: absolute;
margin-top: 0;
top: 50%;
left: -20px;
}
#sitemap h2:after {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
position: absolute;
margin-top: 0;
top: 50%;
left: -14px;
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 0 3px 6px;
border-color: transparent transparent transparent white;
}
#sitemap ul {
justify-content: flex-start;
margin-top: 25px;
}
#sitemap li {
width: 32%;
position: relative;
}
#sitemap .item-box ul {
display: block;
}
#sitemap .item-box ul li {
width: 100%;
}
#sitemap li:before {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
position: absolute;
margin-top: 0;
top: 50%;
left: -14px;
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 0 3px 6px;
border-color: transparent transparent transparent rgb(182, 0, 20);
}
#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 {
text-align: center;
margin-bottom: 50px;
}
#contact .text-center {
text-align: center;
margin-bottom: 60px;
}
#contact .text-center a {
text-decoration: underline;
color: rgb(182, 0, 20);
}
#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 {
font-weight: bold;
color: rgb(182, 0, 20);
margin-right: 12px;
font-size: 18px;
}
#contact .item-table th .item-txt {
background: rgb(182, 0, 20);
color: white;
font-size: 12px;
padding: 2px 4px;
}
#contact .item-table tr:last-child th {
vertical-align: top;
}
#contact .item-table td {
width: 449px;
}
#contact .item-table .input-txt {
width: 100%;
border: 1px solid rgb(204, 204, 204);
border-radius: 4px;
background: rgb(248, 248, 248);
height: 48px;
padding: 10px;
box-sizing: border-box;
resize: none;
font-size: 15px;
}
#contact .item-table textarea.input-txt {
height: 350px;
}
#contact .itembtn .btn {
color: white;
font-size: 16px;
margin: auto;
display: block;
cursor: pointer;
}
#contact .itembtn .btn:hover {
color: rgb(182, 0, 20);
}
#contact .itembtn {
margin: auto;
}
#contact .btn-box {
margin: 0 80px;
}
#contact .privacy {
padding: 20px;
background: rgb(248, 248, 248);
margin-bottom: 20px;
height: 300px;
overflow: auto;
box-sizing: border-box;
}
#contact .privacy p {
font-size: 80%;
line-height: 2;
}
#contact .privacy p strong {
font-weight: bold;
}
#contact .privacy p.textRight {
text-align: right;
margin-bottom: 20px;
}
#contact p.textCenter {
text-align: center;
margin: 0 auto 40px;
}
#contact.confirm .privacy,
#contact.confirm p.textCenter {
display: none;
} #terms h3 {
font-size: 24px;
margin-bottom: 12px;
}
#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 {
text-align: center;
margin: 0 auto 60px;
font-size: 20px;
line-height: 1.8;
}
#story .voice-box .inbox li {
-webkit-transition: 0.2s;
transition: 0.2s;
transition: 0.2s;
}
#story .voice-box .inbox li:hover {
opacity: 0.6;
} @media screen and (min-width: 768px) {
#house .slidebox .inbox {
-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%);
position: relative;
padding: 210px 0 20px;
}
} @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 {
line-height: 1.4;
font-size: 4.6vw;
margin-bottom: 35px;
}
.pc-only {
display: none;
}
.sp-only {
display: block;
}
.sp-icon {
height: 175px !important;
}
#header {
padding-top: 0;
padding-bottom: 0;
height: 5.312rem;
}
#header .inner {
max-width: none;
padding: 0 1rem;
height: 100%;
}
#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 {
font-size: 3rem;
margin-bottom: 1.5rem;
}
.index-news-box .news-list-box::before,
.index-news-box .news-list-box::after {
top: -2rem;
}
.index-news-box h2 {
font-size: 3rem;
margin-bottom: 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 {
padding-left: 1rem;
padding-right: 1rem;
margin-bottom: 6rem;
height: auto;
padding-top: 0;
}
.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 {
font-size: 1rem;
padding: 0.125rem 0.25rem 0.062rem;
}
.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 {
transform: translateY(0);
padding-left: 0;
padding-right: 0;
}
.service-box .text,
.service-box h2 {
color: white;
}
.service-box .wrap-box {
display: block;
}
.index-other-contents {
height: auto;
background: none;
margin-bottom: 6rem;
}
.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 {
max-width: none;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}
.sns-box h2 {
font-size: 1.6rem;
max-width: 75%;
width: 100%;
margin: 0 auto 2rem;
padding: 1rem 0 4rem;
}
.sns-box .text {
margin-bottom: 50px;
font-size: 1.4rem;
line-height: 1.6;
}
.sns-box .inner {
transform: translateY(-64px);
}
#line-banner {
max-width: none;
margin: 3.125rem auto 2.5rem;
padding: 0 4rem;
box-sizing: border-box;
}
.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 {
margin: 0 auto;
display: block;
text-align: center;
}
#footer {
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%;
display: flex;
align-items: flex-end;
justify-content: center;
height: auto;
padding-top: 4.8rem;
}
address {
margin-bottom: 20px;
font-size: 0.9rem;
}
#footer .nav {
margin-bottom: 1.875rem;
}
#footer .nav li:first-child {
font-size: 1rem;
}
#copy {
font-size: 0.75rem;
padding: 0 0 1.25rem;
}
#footer .nav li {
font-size: 0.75rem;
margin: 0 0.625rem;
}
#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-2026.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 {
padding: 2.812rem 1.25rem;
top: 5.312rem;
right: -100%;
width: 100%;
}
.index-benefits-box h2 {
font-size: 7vw;
max-width: 100%;
margin-bottom: 20px;
}
#sp-menubox li:not(:last-child) {
padding-bottom: 20px;
}
#sp-menubox li a {
font-size: 1.25rem;
display: block;
}
#sp-menubox ul {
width: 65%;
margin-left: 1.562rem;
margin-bottom: 1.562rem;
}
#sp-menubox .minbox li a {
font-size: 1rem;
}
#sp-menubox .minbox {
margin-left: 0.5rem;
width: 100%;
}
#footer-nav ul li {
font-size: 1.25rem;
position: relative;
}
#footer-nav ul li:not(:last-child) {
margin-bottom: 1.65rem;
}
.index-benefits-box li {
width: 100%;
padding: 2rem 0 2rem 1rem;
box-sizing: border-box;
}
.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 {
display: none;
width: auto;
position: inherit;
top: 1rem;
padding: 10px 0;
left: 0;
}
#footer-nav ul ul {
margin: 0 auto;
}
#footer-nav ul li ul li {
font-size: 1rem;
margin-bottom: 0.5rem !important;
}
#topicpath {
display: none;
}
.voice-select-box .inbox {
max-width: none;
width: auto;
}
.voice-select-box .inbox {
padding-left: 1rem;
padding-right: 1rem;
}
.voice-select-box {
background: rgb(240, 236, 236);
padding: 1.875rem 0 3.125rem;
margin-bottom: 3.75rem;
}
.page-contents .box-title {
font-size: 1.675rem;
margin-bottom: 3.125rem;
}
#about .voice-select-box .text-center {
font-size: 1.375rem;
text-align: left;
}
#about .text-box:last-of-type h3 {
font-size: 1.675rem;
margin-bottom: 3.125rem;
}
#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 {
justify-content: space-between;
max-width: none;
margin: 0 auto 2.187rem;
padding-left: 1rem;
padding-right: 1rem;
box-sizing: border-box;
}
.voice-select-box .cap {
padding-top: 67%;
margin-bottom: 0.312rem;
}
.page-contents .btn a,
.page-contents button.btn,
.other-color-box .btn a {
padding: 1.45rem;
max-width: 100%;
min-width: 8.312rem;
font-size: 1rem;
}
#about .inner {
max-width: none;
}
#about .top-box h2 {
text-align: left;
font-size: 2.625rem;
margin-bottom: 1.875rem;
line-height: 1.5;
letter-spacing: 0.5px;
font-feature-settings: "palt";
}
#about .top-box h3 {
text-align: left;
font-size: 1.625rem;
margin-bottom: 1.875rem;
line-height: 1.6;
}
.page-contents .text-box p {
line-height: 1.8;
font-size: 1.25rem;
}
#about .index-benefits-box {
background: none;
padding: 0 1rem;
margin-bottom: 4rem;
}
.page-contents .corporate-box .min-txt {
text-align: left;
font-size: 1.875rem;
line-height: 1.6;
margin-bottom: 0.937rem;
}
.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 {
text-align: center;
font-size: 1.75rem;
font-weight: bold;
}
.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 {
padding-left: 0;
margin: 0 auto 5rem;
padding-right: 0;
max-width: none;
width: auto;
}
#about {
max-width: none;
}
.page-contents .box-title:after,
.voice-select-box h3:after {
width: 95%;
}
.index-benefits-box h2 {
font-size: 2rem;
max-width: none;
margin-bottom: 2rem;
}
.page-contents .line-box .border-box {
border: 1px solid rgb(182, 0, 20);
border-left: none;
border-right: none;
margin-bottom: 3.125rem;
}
.page-contents .line-box .border-box li {
padding: 3.125rem 0;
}
.page-contents .line-box .border-box .title {
padding-left: 1rem;
padding-right: 1rem;
box-sizing: border-box;
width: auto;
justify-content: space-between;
}
.page-contents .line-box .border-box .icon {
width: 2.312rem;
height: 2.312rem;
line-height: 2.425rem;
font-size: 1.125rem;
margin-right: 0.625rem;
}
.page-contents .line-box .border-box .title p {
font-size: 1.375rem;
width: calc(100% - 3rem);
max-width: none;
}
.page-contents .line-box .border-box .item {
max-width: none;
width: auto;
margin: 0.937rem 6.875rem 0;
}
.page-contents .line-box .border-box li:first-child:after {
left: auto;
width: 6.375rem;
height: 8.437rem;
z-index: 10;
right: -1.5rem;
top: 85%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#about .tabs-box h4 {
font-size: 1.625rem;
}
#about .tabs-box li {
padding-top: 35%;
height: auto;
}
#about .tabs-box li figure {
position: absolute;
background-size: cover;
}
.service-notebox {
max-width: none;
box-sizing: border-box;
width: 100%;
margin: 0 auto 6.75rem;
padding-left: 1rem;
padding-right: 1rem;
}
.service-notebox h3 {
font-weight: bold;
font-size: 1.187rem;
margin-bottom: 0.75rem;
}
.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 {
padding-left: 3rem;
padding-right: 3rem;
box-sizing: border-box;
}
#sitemap .box:not(:last-of-type) h2 { }
#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 {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
#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 {
max-width: none;
width: 100%;
}
#adviser .introduction-box .inbox dt {
color: rgb(182, 0, 20);
font-size: 1.5rem;
font-weight: bold;
border-bottom: 1px solid rgb(182, 0, 20);
padding-bottom: 0.75rem;
margin-bottom: 0.75rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#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 {
max-width: none;
width: auto;
margin: 0 1.25rem 1.25rem;
}
.page-contents .text-box .list-box li:before {
content: "";
width: 10px;
height: 10px;
top: 0.625rem;
left: -0.937rem;
display: block;
position: absolute;
border-radius: 50%;
background: rgb(182, 0, 20);
}
.page-contents .text-box .list-box li {
margin-bottom: 0.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 {
font-size: 1.875rem;
padding: 1.25rem 0;
}
.question-box ul {
margin-bottom: 1.562rem;
}
.question-box li {
padding: 1.562rem;
align-items: flex-start;
}
.question-box li .font_sans {
color: rgb(182, 0, 20);
font-weight: bold;
font-size: 1.875rem;
position: relative;
margin-right: 0.937rem;
}
.question-box li .txt {
font-size: 1.187rem;
width: calc(100% - 3rem);
}
.other-link-box {
max-width: none;
width: auto;
margin: 0 auto 8rem;
padding-left: 1rem;
padding-right: 1rem;
}
.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: 0.875rem;
}
#adviser .special-box dt .txt {
font-size: 1.5rem;
}
#adviser .special-box dt {
margin-bottom: 2.525rem;
padding-bottom: 0.875rem;
}
#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 {
width: 8.687rem;
float: right;
margin: 0 0 0 1.25rem;
}
#night .color-box h3 {
width: auto;
height: 3.25rem;
line-height: 3.437rem;
font-size: 1.375rem;
margin: 0 auto 1.25rem;
}
#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;
margin: auto;
padding: 0;
}
#night .night-box {
margin: 0 auto 2.25rem;
}
#night .list-item-box {
width: auto;
margin: auto;
padding: 0;
box-sizing: border-box;
}
#night .list-item-box h4 {
margin-left: 20px;
font-size: 1.312rem;
margin-bottom: 0.312rem;
}
#night .list-item-box h4:before {
width: 10px;
height: 10px;
top: 0.125rem;
left: -15px;
}
#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 {
border-bottom: 1px solid rgb(191, 191, 191);
padding: 1.25rem 0;
}
#night .list-item-box dl:first-of-type {
padding: 0 0 1.25rem;
}
#cafe .icon-title .icon {
width: 2.312rem;
height: 2.312rem;
line-height: 2.312rem;
text-align: center;
color: white;
font-size: 1.125rem;
margin-right: 15px;
}
#cafe .inbox {
margin-bottom: 3.75rem;
}
#cafe .icon-title p {
font-weight: 700;
line-height: 1.5;
width: calc(100% - 4rem);
font-size: 1.5rem;
}
#cafe .icon-title {
margin-bottom: 0.937rem;
}
#cafe .inbox .item {
width: 8rem;
height: 8rem;
right: -50px;
bottom: -80px;
}
#cafe .inbox .item .item-txt {
font-size: 1.2rem;
}
#cafe .time-box .txt {
font-size: 0.937rem;
margin-bottom: 5px;
}
#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;
line-height: 3.437rem;
font-size: 1.375rem;
margin: 0 auto 20px;
}
#house .slidebox p {
text-align: left;
padding-left: 1rem;
padding-right: 1rem;
font-size: 1rem;
}
#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 {
font-size: 2.125rem;
margin-bottom: 1.562rem;
}
#ticket .top-box .text {
text-align: left;
}
#ticket .top-box .text .txt {
font-size: 1.625rem;
}
#ticket .top-box .item-txt {
text-align: left;
font-size: 0.75rem;
line-height: 1.4;
}
#ticket {
padding-left: 1rem !important;
padding-right: 1rem !important;
box-sizing: border-box;
}
#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;
line-height: 1.662rem;
margin-right: 15px;
font-size: 0.75rem;
}
#ticket .color-box .item-txt {
width: calc(100% - 4rem);
}
#ticket .color-box .txt {
font-size: 1.875rem;
}
#ticket .box-color-txt {
height: 2.875rem;
line-height: 3.125rem;
font-size: 1.312rem;
margin-bottom: 2.187rem;
}
#ticket .last-box h3 {
text-align: left;
padding: 0 2rem;
}
#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 {
font-size: 1.875rem;
margin-bottom: 4.5rem;
}
#contact,
#regulation,
#policy,
#message,
#system {
padding-left: 1rem;
padding-right: 1rem;
}
.page-contents .flow-box {
margin-bottom: 3rem;
padding: 1rem;
}
.page-contents .flow-box .text-box {
padding: 2rem;
}
.page-contents .flow-box .border-box .icon {
width: 2.312rem;
height: 2.312rem;
line-height: 2.425rem;
font-size: 1.125rem;
margin-right: 0.625rem;
}
.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 {
font-size: 1.375rem;
width: calc(100% - 3rem);
max-width: none;
}
.page-contents .flow-box .border-box .item {
max-width: none;
width: auto;
margin: 0.937rem 6.875rem 0;
}
.page-contents .flow-box .text-box p {
font-size: 1.25rem;
margin-bottom: 1rem;
}
.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 {
border-left: 0.25rem solid rgb(182, 0, 20);
padding-left: 0.937rem;
font-size: 1.312rem;
margin-bottom: 1.562rem;
}
#system .item-list {
margin-top: 1.25rem;
padding: 1.875rem;
margin-bottom: 1.25rem;
}
#system .number-list p {
width: calc(100% - 3rem);
margin-bottom: 0;
font-weight: bold;
}
#system .number-list li {
justify-content: flex-start;
align-items: flex-start;
margin-left: 0;
}
#system .number-list li .icon {
width: 1.562rem;
height: 1.562rem;
line-height: 1.662rem;
font-size: 1rem;
margin-right: 10px;
}
.page-contents .box-title .item-arrow {
width: 1.562rem;
vertical-align: -0.312rem;
}
#message .box-title {
font-size: 1.675rem;
text-align: left;
}
#message .item-list {
margin-left: 0;
margin-right: 0;
margin-top: 1.25rem;
background: rgb(240, 236, 236);
padding: 1.875rem;
box-sizing: border-box;
}
.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 {
line-height: 1.6;
margin-left: 1.25rem;
position: relative;
font-size: 1.287rem;
}
#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: 0.75rem;
}
#regulation .top-box li {
font-size: 1.187rem;
line-height: 1.6;
}
#regulation h2 {
font-size: 1.5rem;
margin-bottom: 1.275rem;
}
.page-contents .number-list li {
line-height: 1.6;
margin-left: 1.25rem;
font-size: 1.187rem;
}
.page-contents .number-list li:not(:last-child) {
margin-bottom: 2.5rem;
}
#company dl {
padding: 0 1rem;
}
#company dt {
max-width: none;
width: 8.312rem;
}
#company dd {
max-width: 100%;
width: auto;
}
#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;
max-width: none;
width: auto;
margin-bottom: 3rem;
margin-top: 5.312rem;
}
.page-header .item-spcap {
width: 100%;
}
.page-header .cap {
display: none;
}
.page-header .inbox {
width: 100%;
display: block;
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-size: 100%;
height: 8.8034rem;
background-position: center top;
background-repeat: no-repeat;
}
.page-header .inbox .itemcap {
background: none;
}
.page-header .inbox .font_sans {
font-size: 1.562rem;
margin-bottom: 1.162rem;
}
.page-header .inbox h1 {
font-size: 1.875rem;
font-weight: 700;
}
#ticket {
max-width: none;
}
#ticket .inner {
width: auto;
}
#gallery .inner {
max-width: none;
display: block;
margin-bottom: 9rem;
}
#gallery .inbox {
max-width: none;
width: auto;
}
#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%;
margin-bottom: 1%;
padding-top: 49.5%;
}
#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 {
text-align: left;
margin-bottom: 2.5rem;
font-size: 1.125rem;
}
.category-voice,
#voice {
max-width: none;
padding-left: 1rem;
padding-right: 1rem;
}
.voice-box .inbox li {
max-width: none;
width: 48.5%;
}
.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: 0.875rem;
}
.voice-box .inbox li dt {
font-size: 1.25rem;
margin-bottom: 1rem;
}
.voice-box .inbox li dd .txt {
font-size: 1rem;
display: block;
width: 100%;
}
.single-voice-box .other-link-box li .txt,
.category-voice .other-link-box li .txt {
font-size: 0.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 {
max-width: none;
width: 100%;
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 {
font-size: 1.25rem;
display: block;
margin-bottom: 1rem;
}
.single-story-box .text-box h3 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.single-voice-box header .text .txt:not(:last-of-type) {
margin-right: 0;
}
.single-story-box .text-box header h3 {
color: #000;
text-align: center;
margin: 0 auto 1rem;
}
.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: 0.937rem;
}
.single-voice-box .contents-box dt,
.single-voice-box .contents-box dd {
font-size: 1.25rem;
}
.other-color-box.voice-box .box-title {
font-size: 1.675rem;
margin-bottom: 3.125rem;
}
.single-sns-box li .box .icon {
width: 1.625rem;
}
.single-voice-box header {
margin-bottom: 2.5rem;
}
.single-sns-box li .txt {
color: white;
font-size: 0.875rem;
margin-left: 0.75rem;
}
.single-sns-box li {
max-width: none;
width: 32%;
height: 3.125rem;
}
.single-voice-box .contents-box {
max-width: none;
width: auto;
margin: 0 auto 2.5rem;
}
.category-voice .description-txt {
text-align: left;
font-size: 1.125rem;
margin-bottom: 2.5rem;
line-height: 1.6;
}
.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 {
text-align: center;
display: block;
margin: 0 auto 10px;
}
.page-contents.category-faq .icon-title {
text-align: center;
} #news.page-contents .box-title {
text-align: left;
padding-left: 1rem;
padding-right: 1rem;
box-sizing: border-box;
}
.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 {
padding-left: 1rem;
padding-right: 1rem;
box-sizing: border-box;
margin-bottom: 3rem;
}
#faq li {
max-width: 100%;
box-sizing: border-box;
} #users p.description-txt {
line-height: 1.8;
font-size: 1.25rem;
}
#users .voice-box .inbox {
width: 100%;
padding: 2rem 1rem;
margin-bottom: 1rem;
padding-bottom: 115px;
padding-top: 70px;
}
.page-contents article.box.story-box {
margin-bottom: 10rem;
margin-top: 3rem;
}
#users .voice-box .inbox:nth-child(n + 3) {
margin-bottom: 1rem;
padding-bottom: 115px;
}
#users .voice-box .inbox h4 {
font-size: 1.5rem;
margin-bottom: 2rem;
}
#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: 0.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: 0.3;
}
.index-other-contents .nolink .itemcap {
position: relative;
}
.index-other-contents .nolink .itemcap p {
display: inherit;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
font-size: 36px;
font-weight: 500;
color: rgb(182, 0, 20);
} @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;
height: 60px;
width: 88%;
max-width: 500px;
border: solid #b60014 2px;
margin: 0 auto;
padding: 10px 2%;
justify-content: space-between;
align-items: center;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.tourBanner a:hover {
opacity: 0.8;
}
.tourBanner a .logo {
padding-right: 20px;
}
.tourBanner a .btn {
font-weight: bold;
font-size: 1.2rem;
flex: 1;
background: #b60014;
color: #fff;
line-height: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
}
.tourBanner a .logo img {
max-width: 200px;
max-height: 60px;
width: auto;
}
@media screen and (max-width: 767px) {
.tourBanner {
margin-bottom: 40px;
}
} .wrap-index-btn {
width: 96%;
margin: 0 auto;
max-width: 860px;
}
.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;
border: #b60014 solid 2px;
padding: 20px 4%;
background: url(//jo-katsu.com/images/common/icon_right_R.png) no-repeat left
20px center;
color: #b60014;
background-size: 16px auto;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.wrap-index-btn .innr div a:hover {
opacity: 0.8;
}
.wrap-index-btn .innr div a span {
display: block;
padding-left: 10%;
}
.wrap-index-btn .innr div.right a {
background: url(//jo-katsu.com/images/common/icon_right.png) no-repeat left
20px center #b60014;
color: #fff;
background-size: 16px auto;
}
@media screen and (max-width: 767px) {
.wrap-index-btn {
margin-bottom: 40px;
margin-top: -20px;
}
.wrap-index-btn .innr div a {
display: block;
border: #b60014 solid 2px;
padding: 10px 4%;
background: url(//jo-katsu.com/images/common/icon_right_R.png) no-repeat
left 5px center;
color: #b60014;
background-size: 10px auto;
}
.wrap-index-btn .innr div.right a {
background: url(//jo-katsu.com/images/common/icon_right.png) no-repeat left
5px center #b60014;
color: #fff;
background-size: 10px auto;
}
#story .voice-box {
padding-left: 1rem;
padding-right: 1rem;
}
} .wp-pagenavi {
text-align: center;
margin: 40px auto 100px;
}
.wp-pagenavi a,
.wp-pagenavi span {
text-decoration: none;
border: 2px solid #c51b19 !important;
color: #c51b19;
padding: 5px 10px !important ;
margin: 0 5px !important;
}
.wp-pagenavi a:hover,
.wp-pagenavi span.current {
background: #c51b19 !important;
color: #fff !important;
}
.caution {
border: rgb(182, 0, 20) solid 2px;
color: rgb(182, 0, 20);
padding: 20px 2%;
margin-bottom: 60px;
}
.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 {
border: none;
background: none;
}
.form2 .button-submit {
background: rgb(182, 0, 20);
color: #fff;
padding: 30px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
.form2 .text-area {
padding: 10px 0;
display: block;
}
.form2 .selectbox {
border: 1px solid rgb(204, 204, 204);
border-radius: 4px;
background: rgb(248, 248, 248);
height: 48px;
padding: 10px;
box-sizing: border-box;
resize: none;
font-size: 15px;
}
.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: 0.5;
}
a.anchor-txt.nolink {
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
text-align: center;
filter: alpha(opacity=100);
opacity: 1;
display: table;
}
a.anchor-txt.nolink span {
font-size: 1.8rem;
display: table-cell;
vertical-align: middle;
}
.other-link-box a.anchor-txt.nolink {
background-color: rgba(0, 0, 0, 0.5);
border: none !important;
}
.other-link-box a.anchor-txt.nolink span {
font-size: 1.6rem;
}
.caution p {
font-size: 1.5rem;
text-align: center;
margin: auto;
}
@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 {
display: block;
top: 45%;
position: absolute;
text-align: center;
margin: 0 auto;
width: 100%;
}
.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;
}
}
@media screen and (max-width: 349px) {
#header-nav .btn {
width: 100px;
}
#panel-btn {
width: 35px;
height: 30px;
margin-left: 10px;
}
}