@charset "utf-8";
  body {
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
font-weight: 500;
font-size: 16px;
background: #fff;
color: #444;
line-height: 190%;
word-wrap: break-word;
overflow-wrap: break-word;
overflow-x: hidden;
} a {
color: #45AAB8;
text-decoration: none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
a:hover {
color: #666;
}
a:active, a:focus {
outline: 0;
} img {
border: 0;
padding: 0px;
margin: 0px
}
img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 10px 20px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 20px 10px 0;
display: inline;
} .alignright, .right {
float: right;
margin: 0 0 10px 20px;
}
.alignleft, .left {
float: left;
margin: 0 20px 10px 0;
}
.clear {
clear: both;
}
.aligncenter {
display: block;
margin: 0 auto;
} ol {
margin: 7px 0 7px 10px;
padding: 0 0 0 0;
list-style: decimal;
}
ul {
margin: 7px 0 7px 4px;
padding: 0 0 0 0;
list-style: disc;
}
li {
margin: 5px 0 5px 15px;
padding: 0;
}
li a {
color: #45AAB8;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
li a:hover {
color: #666;
} .wrapper {
margin: auto;
max-width: 100%;
padding: 0px 0;
background-image: linear-gradient(0deg, #fff, #fff 100px, #192a7b 54px);
}
.wrapper_wide {
margin: auto;
max-width: 100%;
padding: 100px 0;
}
.g_blue {
background: #eaedee;
}
.p_blue {
background: #d6d9e7;
}
.d_blue {
background: #192a7b;
}
.wrapper_sub {
max-width: 100%;
} #header {
top: 0;
left: 0;
right: 0;
position: fixed;
z-index: 1000;
padding: 10px 20px;
transition: all .3s;
}
#header.is-show {
background: #fff;
padding: 10px;
}
.header-logo {
width: 90px;
}
@media(min-width: 576px) {
#header {
padding: 20px;
}
.header-logo {
width: 120px;
}
}
.header-inner {
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
@media (min-width: 1200px) {
.header-inner {
max-width: 1000px;
}
}
#header_sub {
width: 1000px;
margin: 0 auto;
}
.header_sub-inner {
max-width: 400px;
margin: 0px auto;
padding: 20px 0;
float: left;
position: absolute;
z-index: 999;
}
#header h1 {
text-align: center;
margin: 0;
}
#header_sub h1 {
text-align: center;
margin: 0;
}
.logo {
text-align: center;
margin: 0;
padding: 0;
} #nav ul {
list-style: none;
margin: auto;
}
@media (max-width: 1200px) {
#nav {
opacity: 0;
visibility: hidden;
position: absolute;
height: 100vh;
top: 0;
left: 0;
right: 0;
background: #fff;
transition: opacity .3s, visibility .3s;
}
#nav.is-active {
opacity: 1;
visibility: visible;
}
}
ul.nav-menu, div.nav-menu>ul {
margin: 0;
padding: 0;
}
.nav-menu li {
display: inline-block;
position: relative;
margin: 0 -2px 0 -2px;
}
.nav-menu li a {
text-align: center;
color: #FFF;
display: block;
font-size: 14px;
font-weight: bold;
text-decoration: none;
padding: 12px 15px;
}
.nav-menu li:not(.current_page_item) a:hover {
color: #0071bc !important;
}
.nav-menu .sub-menu, .nav-menu .children {
background: #eee;
display: none;
padding: 0;
position: absolute;
z-index: 99999;
}
.nav-menu .sub-menu ul, .nav-menu .children ul {
border-left: 0;
left: 100%;
top: 0;
}
ul.nav-menu ul a, .nav-menu ul ul a {
color: #333;
margin: 0;
width: 200px;
}
ul.nav-menu ul a:hover, .nav-menu ul ul a:hover {
background: #f5f5f5;
}
ul.nav-menu li:hover>ul, .nav-menu ul li:hover>ul {
display: block;
background: #eee;
}
.nav-menu .current_page_item>a, .nav-menu .current_page_ancestor>a, .nav-menu .current-menu-item>a, .nav-menu .current-menu-ancestor>a, .nav-menu .current-post-ancestor>a {
color: #0071bc;
pointer-events: none;
}
@media (min-width: 1200px) {
.nav-menu .current_page_item>a {
position: relative;
color: #fff;
}
.nav-menu .current_page_item>a::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background-color: #fff;
}
#header.is-show .nav-menu .current_page_item>a {
color: #0071bc;
}
#header.is-show .nav-menu .current_page_item>a::before {
background-color: #0071bc;
}
}
.toggle {
display: none;
}
.menu-toggle {
width: 40px;
height: 40px;
}
.hamburger {
display: none;
} #nav_sub {
width: 800px;
z-index: 9999;
padding: 0;
float: right;
margin-top: 30px;
text-align: right;
}
#nav_sub ul {
list-style: none;
margin: auto;
}
ul.nav_sub-menu, div.nav_sub-menu>ul {
margin: 0;
padding: 0;
}
.nav_sub-menu li {
display: inline-block;
position: relative;
margin: 0 -2px 0 -2px;
}
.nav_sub-menu li a {
color: #192a7b;
display: block;
font-size: 14px;
font-weight: bold;
text-decoration: none;
padding: 12px 15px;
}
.nav_sub-menu li:hover>a, .nav_sub-menu li a:hover {
color: #0071bc;
}
.nav_sub-menu .sub-menu, .nav_sub-menu .children {
background: #eee;
display: none;
padding: 0;
position: absolute;
z-index: 99999;
}
.nav_sub-menu .sub-menu ul, .nav_sub-menu .children ul {
border-left: 0;
left: 100%;
top: 0;
}
ul.nav_sub-menu ul a, .nav_sub-menu ul ul a {
color: #333;
margin: 0;
width: 200px;
}
ul.nav_sub-menu ul a:hover, .nav_sub-menu ul ul a:hover {
background: #f5f5f5;
}
ul.nav_sub-menu li:hover>ul, .nav_sub-menu ul li:hover>ul {
display: block;
background: #eee;
}
.nav_sub-menu .current_page_item>a, .nav_sub-menu .current_page_ancestor>a, .nav_sub-menu .current-menu-item>a, .nav_sub-menu .current-menu-ancestor>a, .nav_sub-menu .current-post-ancestor>a {
color: #009c8e;
}  .hamburger {
padding: 10px;
display: inline-block;
cursor: pointer;
transition-property: opacity, -webkit-filter;
transition-property: opacity, filter;
transition-property: opacity, filter, -webkit-filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
background: #d6d9e7;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger-box {
width: 37px;
height: 10px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 35px;
height: 3px;
background-color: #000;
border-radius: 4px;
position: absolute;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
} .hamburger--spin .hamburger-inner {
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin .hamburger-inner::before {
transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in;
}
.hamburger--spin .hamburger-inner::after {
transition: bottom 0.1s 0.34s ease-in, -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin.is-active .hamburger-inner {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
transition-delay: 0.14s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--spin.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out;
}
.hamburger--spin.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
} .top-header {
width: 100%;
margin: 0px auto;
text-align: center;
position: relative;
padding-top: 105px;
}
.top-header__videowrap {
width: 100vw;
text-align: center;
max-width: 100vw;
margin: 0 auto;
height: auto;
}
.top-header__video {
width: 100%;
display: none;
}
@media (min-width: 768px) {
.top-header__video {
display: block;
}
}
.top-header_comment {
position: absolute;
z-index: 10;
width: 1200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.top-header_comment h1 {
width: 100%;
text-align: center;
border: none;
font-size: 60px;
color: #FFFFFF;
margin: 0;
display: block;
margin-bottom: 50px;
}
.top-header_comment h2 {
width: 100%;
text-align: center;
border: none;
} .top-header_text {
width: 1200px;
margin: -50px auto 0;
z-index: 999;
padding: 0;
position: relative;
}
.top-header .text {
font-size: 19px;
line-height: 2;
letter-spacing: 0px;
text-align: left;
padding: 15px 0 40px 10px;
color: #FFFFFF;
}
.scroll {
height: 224px;
position: absolute;
right: -22px;
bottom: 0;
color: #FFFFFF;
}
.scroll span {
display: block;
font-size: 14px;
position: relative;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: top bottom;
transform-origin: top bottom;
}
.scroll span:after {
content: "";
width: 162px;
height: 0;
border: .5px dashed #b4bac1;
position: absolute;
top: 14px;
left: 62px;
} .midashi-header {
width: 100%;
margin: 0px auto 70px;
text-align: center;
position: relative;
height: clamp(400px, 70vw, 600px);
}
@media (min-width: 992px) {
.midashi-header {
height: 650px;
}
}
.fitImg {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.midashi-header_comment {
position: absolute;
z-index: 10;
width: 1200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.midashi-header_comment h1 {
width: 100%;
text-align: left;
border: none;
font-size: 60px;
color: #FFFFFF;
margin: 0;
display: block;
margin-bottom: 20px;
}
.midashi-header_comment h2 {
width: 100%;
text-align: left;
border: none;
font-size: 26px;
color: #FFFFFF;
padding-left: 10px;
}
.midashi-header_comment p {
width: 100%;
text-align: left;
border: none;
font-size: 22px;
color: #FFFFFF;
line-height: 1.5em;
} #main {
padding: 0 0 0 0;
width: 1300px;
margin: 0 auto;
}
#main_sub {
padding: 0 0 0 0;
width: 100%;
margin: 30px auto 0;
}
.foot_contact {
width: 1300px;
margin-top: 0;
margin: 0 auto;
}
.sub {
padding: 0 0 0 0;
width: 1200px;
margin: 0 auto;
}
.full_img {
width: 100%;
margin: 0 auto;
max-width: 100%;
text-align: center;
}
.blue {
color: #2e9ad6 !important;
}
.white {
color: #FFFFFF !important;
}
.s-title h1 {
padding-left: 48px;
font-size: 118px;
font-family: futura-pt, sans-serif;
font-weight: 500;
line-height: 1;
letter-spacing: 48px;
}
.s-title p {
font-size: 21px;
line-height: 39px;
letter-spacing: 2.73px;
margin-top: -8px;
}
.title_font_index {
width: 100%;
text-align: center;
margin-bottom: 50px;
padding-top: 160px;
}
.title_font {
width: 100%;
text-align: center;
margin-bottom: 50px;
}
.title_contact_font {
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.value {
width: 1300px;
margin: 0 auto 50px;
overflow: hidden;
position: relative;
}
.value .item-num {
padding: 0 4px;
position: absolute;
top: -10px;
left: -50px;
z-index: 3;
}
.value h3 {
margin-bottom: 0px;
font-size: 26px;
line-height: 1.5;
color: #192a7b;
font-weight: bold;
}
.value p {
color: #353535;
font-size: 14px;
line-height: 1.714;
letter-spacing: 2px;
padding: 0;
margin: 10px 0;
font-weight: bold;
}
.value_left {
width: 650px;
float: left;
position: absolute;
background: #FFFFFF;
padding: 50px 35px 30px 155px;
box-sizing: border-box;
height: 225px;
}
.value_right {
width: 940px;
float: right;
margin-top: 50px;
}
.value .item-num_r {
padding: 0 4px;
position: absolute;
top: 0px;
z-index: 3;
right: -40px;
}
.value_r h3 {
margin-bottom: 0px;
font-size: 26px;
line-height: 1.5;
color: #192a7b;
font-weight: bold;
}
.value_r p {
color: #353535;
font-size: 14px;
line-height: 1.714;
letter-spacing: 2px;
padding: 0;
margin: 10px 0;
font-weight: bold;
}
.value_r_right {
width: 650px;
position: absolute;
background: #FFFFFF;
padding: 50px 155px 30px 50px;
box-sizing: border-box;
height: 280px;
right: 0;
}
.value_r_left {
width: 940px;
float: left;
margin-top: 50px;
}
.sbox {
width: 100%;
overflow: hidden;
}
.sbox_4 {
width: 50%;
padding: 30px;
box-sizing: border-box;
float: left;
text-align: center;
}
.sbox_4:nth-child(odd) {
border-right: #c8c9c9 2px dotted;
}
.sbox_4:nth-child(1) {
border-bottom: #c8c9c9 2px dotted;
}
.sbox_4:nth-child(2) {
border-bottom: #c8c9c9 2px dotted;
}
.s_title {
font-size: 30px;
color: #192a7b;
text-align: center;
font-weight: bold;
margin-top: 20px;
}
.s_commn {
font-size: 16px;
line-height: 1.5em;
text-align: left;
padding: 15px 50px;
}
.s_btn {
width: 100%;
text-align: center;
}
.btn, a.btn, button.btn {
font-size: 16px;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #FFFFFF;
border-radius: 0.5rem;
margin: 0 auto;
}
a.btn-flat {
overflow: hidden;
padding: 10px 60px;
color: #192a7b;
border-radius: 0;
background: #d6d9e7;
}
a.btn-flat:hover {
color: #FFFFFF;
}
a.btn-flat span {
position: relative;
}
a.btn-flat:before {
position: absolute;
top: 0;
left: 0;
width: 150%;
height: 500%;
content: "";
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(45deg);
background: #192a7b;
}
a.btn-flat:hover:before {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
.tenpo_box_l {
width: 1200px;
margin: 50px auto;
overflow: hidden;
}
.tenpo_left {
width: 445px;
float: left;
box-shadow: 5px 5px #ffffff; border: 3px solid #FFFFFF;
box-sizing: border-box;
margin-bottom: 15px;
}
.tenpo_right {
width: 750px;
float: left;
box-sizing: border-box;
padding: 0px 0 40px 50px;
}
.t_title_logo {
margin-bottom: 30px;
line-height: 1em;
}
.t_title_logo_right {
margin-bottom: 30px;
line-height: 1em;
text-align: right;
}
.tenpo_btn {
width: 100%;
background: #192a7b;
text-align: center;
margin: 20px 0;
}
.tenpo_btn a {
color: #FFF;
padding: 5px 0;
box-sizing: border-box;
display: block;
}
.t_title {
font-size: 30px;
color: #192a7b;
font-weight: bold;
margin-bottom: 30px;
line-height: 1em;
}
.t_commn {
font-size: 16px;
line-height: 1.8em;
text-align: left;
margin-bottom: 20px;
font-weight: bold;
}
.t_tenpo {
font-size: 16px;
line-height: 1.8em;
text-align: left;
}
.t_tenpo span {
margin-left: 72px;
}
.t_tenpo_r span {
margin-left: 0;
}
.tenpo_box_r {
width: 1200px;
margin: 50px auto;
overflow: hidden;
}
.tenpo_r_left {
width: 750px;
float: left;
box-sizing: border-box;
padding: 0px 50px 40px 0;
}
.tenpo_r_right {
width: 445px;
float: right;
box-shadow: -5px 5px #ffffff; border: 3px solid #FFFFFF;
box-sizing: border-box;
margin-bottom: 15px;
}
.t_r_title {
font-size: 30px;
color: #192a7b;
font-weight: bold;
margin-bottom: 30px;
text-align: right;
}
.t_r_commn {
font-size: 16px;
line-height: 1.8em;
text-align: right;
margin-bottom: 20px;
font-weight: bold;
}
.t_r_tenpo {
font-size: 16px;
line-height: 1.8em;
text-align: right;
}
.karaokenet {
width: 100%;
text-align: center;
}
.news {
width: 1000px;
margin: 0 auto;
background: #d6d9e7;
position: relative;
}
.news a {
color: #192a7b;
}
.news a:hover {
color: #45AAB8;
}
.information_item {
width: 100%;
overflow: hidden;
border-bottom: 1px solid #192a7b; padding: 30px 0;
}
.information_item_space {
width: 100%;
border-bottom: 1px solid #CCCCCC;
margin: 5px 0;
}
.information_item_txt_meta {
width: 20%;
float: left;
text-align: center;
font-size: 38px;
margin: 0;
vertical-align: middle;
box-sizing: border-box;
}
.information_item_txt_meta span {
font-size: 10px;
letter-spacing: 14px;
clear: both;
display: block;
text-align: center; margin-right: -14px;
}
.information_item_txt_title {
width: 80%;
float: left;
height: 60px;
display: flex;
align-items: center;
}
.item.new:before {
content: "New";
width: 80px;
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #192a7b;
font-size: 18px;
font-weight: 700; line-height: 1;
text-transform: uppercase;
letter-spacing: 0;
background-color: #FFFFFF;
position: absolute;
top: 39px;
left: -45px;
}
.item:after {
content: "";
width: 20px;
height: 20px;
display: none;
border-bottom: 5px solid #153368;
border-right: 5px solid #153368;
position: absolute;
top: 50px;
right: 44px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
display: inline-block;
}
.top_contact {
width: 820px;
margin: 0 auto;
overflow: hidden;
}
.top_contact p {
font-size: 16px;
text-align: center;
}
.contactbox-item_tel {
width: calc((100% - 0px)/2);
float: left;
padding: 0 10px 0 0;
box-sizing: border-box;
}
.contactbox-item {
width: calc((100% - 0px)/2);
background-color: #192a7b;
text-align: center;
overflow: hidden;
position: relative;
background-image: linear-gradient(45deg, #1f5ab2 50%, transparent 50%);
background-position: 99%;
background-size: 400%;
-webkit-transition: background 0.6s ease;
transition: background 0.6s ease; float: left;
height: 118px;
}
.contactbox__link {
display: inline-block;
width: 100%;
height: 100%;
}
.contactbox-item__ttl {
font-size: 18px;
letter-spacing: 0.05em;
line-height: 1.2;
font-weight: bold;
margin-bottom: 15px;
transition: 0.3s ease;
}
.contactbox-telnum {
color: #1f5ab2;
font-size: 36px;
font-feature-settings: 'palt' 1;
}
.contactbox-telnum__sub {
color: #0e2447;
letter-spacing: 0.1em;
}
.contactbox-item__ttl--sub {
display: block;
font-size: 13px;
line-height: 1.6;
letter-spacing: 0.05em;
}
.contactbox-ico--mail {
width: 50px;
height: 40px;
background: url(https://togo-karaoke.com/wp-content/themes/togo/images/mail.png) center /100% auto no-repeat;
display: inline-block;
}
@media screen and (min-width: 768px) {
.contactbox-item:nth-child(3) .contactbox__link {
padding-top: 25px;
color: #FFFFFF;
}
.contactbox-item:nth-child(2) .contactbox-item__ttl {
margin-bottom: 25px;
}
.contactbox-item:nth-child(3) .contactbox-item__ttl {
margin-bottom: 10px;
}
.contactbox-item:not(:first-child):hover {
background-position: 0;
}
.contactbox-item:not(:first-child):hover .contactbox-item__ttl {
color: #fff;
}
.contactbox-item:not(:first-child):hover .contactbox-ico--mail {
background: url(https://togo-karaoke.com/wp-content/themes/togo/images/mail_on.png) center /100% auto no-repeat;
}
}
.products_title {
width: 100%;
background: url(https://togo-karaoke.com/wp-content/themes/togo/images/products/midashi.jpg) center /100% auto no-repeat;
}
.sub_page {
width: 1300px;
margin: 0 auto;
}
.sub_title {
position: relative;
width: 100%;
margin: 20px auto 50px;
padding: 10px 0 30px;
color: #000000;
border-bottom: 3px solid #c2c3c3;
font-size: 40px;
font-weight: bold;
}
.sub_title:before {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 160px;
height: inherit;
border-bottom: 3px solid #192a7b;
}
.sub_title_top {
margin: 50px auto 10px;
}
.sub_title_comm {
text-align: left;
font-size: 22px;
line-height: 2em;
}
.sub_comm {
text-align: left;
font-size: 22px;
line-height: 2em;
}
.products {
width: 100%;
margin-bottom: 100px;
}
.products_item {
width: 100%;
overflow: hidden;
padding: 50px 0 0;
position: relative;
height: 390px;
}
.products_item_left {
width: 40%;
box-sizing: border-box;
text-align: center;
position: absolute;
z-index: 10;
}
.products_item_right {
width: 55%;
box-sizing: border-box;
position: absolute;
z-index: 5;
left: 40%;
padding-top: 20px;
}
.products_item_right h2.first {
transform: skewX(40deg);
background-color: #192a7b;
color: #fff;
max-width: 115%;
font-size: 40px;
padding: 15px 0px;
width: 115%;
text-align: left;
margin-left: -95px;
}
.products_item_right h2.first div {
transform: skewX(-40deg) scale(0.8, 1);
width: 200%;
margin: 0 auto;
text-align: left;
margin-left: -100px;
}
.products_item_right h3 {
width: 100%;
text-align: left;
font-size: 30px;
font-weight: bold;
color: #192a7b;
margin-bottom: 5px;
letter-spacing: -1px;
line-height: 1.2em;
padding: 10px 0;
}
.products_item_right p {
width: 100%;
text-align: left;
font-size: 24px;
line-height: 1.5em;
padding: 0;
}
.products_syousai {
width: 220px;
float: right;
padding-top: 20px;
}
.products_item_right_arrow {
width: 5%;
float: left;
box-sizing: border-box;
padding: 125px 0 0;
text-align: center;
position: absolute;
left: 95%;
z-index: 15;
}
.elder_item {
width: 100%;
margin: 0 auto 50px;
overflow: hidden;
}
.elder_item_title {
text-align: left;
font-size: 30px;
font-weight: bold;
color: #192a7b;
line-height: 1.5em;
margin-bottom: 35px;
}
.elder_item_comm {
text-align: left;
font-size: 22px;
line-height: 2em;
}
.elder_item_box {
width: 50%;
float: left;
text-align: center;
}
.lease_flow {
width: 100%;
margin: 100px 0 0;
padding: 100px 0 0;
overflow: hidden;
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.lease_flow_box {
width: 1300px;
margin: 0 auto;
}
.lease_flow_title {
width: 100%;
font-size: 45px;
text-align: center;
color: #192a7b;
font-weight: bold;
margin-bottom: 70px;
}
.lease_flow_left {
float: left;
width: 100%;
text-align: left;
position: relative;
margin-bottom: 100px;
}
.lease_flow_right {
float: right;
width: 100%;
text-align: right;
position: relative;
margin-bottom: 100px;
}
.lease_arrow_right { position: absolute;
left: 50%;
top: 92%;
}
.lease_arrow_left { position: absolute;
left: 50%;
top: 95%;
}
.reflection-img {
width: 100%;
height: auto;
position: relative;
overflow: hidden;
}
.reflection {
height: 100%;
width: 30px;
position: absolute;
top: -180px;
left: 0;
background-color: #fff;
opacity: 0;
transform: rotate(45deg);
animation: reflection 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 2s ease-in-out infinite;
-moz-transform: rotate(45deg);
-moz-animation: reflection 2s ease-in-out infinite;
-ms-transform: rotate(45deg);
-ms-animation: reflection 2s ease-in-out infinite;
-o-transform: rotate(45deg);
-o-animation: reflection 2s ease-in-out infinite;
}
@keyframes reflection {
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
@-webkit-keyframes reflection {
0% {
-webkit-transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
-webkit-transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
-webkit-transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
-webkit-transform: scale(50) rotate(45deg);
opacity: 0;
}
}
@-moz-keyframes reflection {
0% {
-moz-transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
-moz-transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
-moz-transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
-moz-transform: scale(50) rotate(45deg);
opacity: 0;
}
}
@-ms-keyframes reflection {
0% {
-ms-transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
-ms-transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
-ms-transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
-ms-transform: scale(50) rotate(45deg);
opacity: 0;
}
}
@-o-keyframes reflection {
0% {
-o-transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
-o-transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
-o-transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
-o-transform: scale(50) rotate(45deg);
opacity: 0;
}
}
.lease_contact {
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
}
.lease_contact_box {
width: 50%;
margin: 115px auto;
position: relative;
left: 150px;
}
.lease_contact_staff {
width: 100%;
margin: 0 auto;
position: absolute;
left: 0;
top: 40px;
}
.lease_contact_tell {
width: 100%;
margin: 10px auto 50px;
}
.lease_contact_tell p {
background: #FFFFFF;
font-size: 24px;
color: #192a7b;
font-weight: bold;
padding: 5px 0;
text-align: center;
box-sizing: border-box;
margin-top: 30px;
}
.lease_contact_tell_box {
width: calc(100% / 3);
text-align: center;
float: left;
}
.usen_title {
width: 100%;
margin-top: 100px;
}
.usen_title h2.first {
transform: skewX(40deg);
background-color: #d6d9e7;
color: #192a7b;
max-width: 100%;
font-size: 40px;
padding: 15px 50px;
width: 100%;
text-align: left;
margin-left: 15px;
box-sizing: border-box;
}
.usen_title h2.first div {
transform: skewX(-40deg);
width: 100%;
margin: 0 auto;
text-align: left; }
.usen_box {
width: 100%;
margin: 60px auto 100px;
overflow: hidden;
}
.usen_box_left {
width: 40%;
float: left;
box-sizing: border-box;
}
.usen_box_right {
width: 55%;
float: right;
box-sizing: border-box;
font-size: 22px;
line-height: 2em;
}
.usen_btn {
width: 100%;
margin-bottom: 100px;
}
.button-hex {
font-size: 45px;
line-height: 40px;
position: relative;
display: inline-block;
width: 100%;
transition: all .1s ease-in-out;
text-align: center;
text-decoration: none;
color: #fff;
background-color: #192a7b;
padding: 30px 0px;
font-weight: bold;
}
.button-hex:before, .button-hex:after {
position: absolute;
top: 0;
width: 0;
height: 0;
content: '';
border: 50px solid transparent;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
}
.button-hex:before {
right: 100%;
border-right-color: #192a7b;
}
.button-hex:after {
left: 100%;
border-left-color: #192a7b;
}
.button-hex:hover {
color: #009c8e;
}
.covid {
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
margin: 100px 0 0;
padding: 100px 0 0;
}
.covid_title {
width: 100%;
font-size: 45px;
text-align: center;
color: #192a7b;
font-weight: bold;
margin-bottom: 70px;
}
.covid_box {
width: 1300px;
overflow: hidden;
margin: 0 auto;
}
.covid_i_box {
width: 50%;
padding: 30px;
box-sizing: border-box;
float: left;
text-align: center;
border-bottom: #192a7b 1px solid;
height: 880px;
}
.covid_i_box:nth-child(odd) {
border-right: #192a7b 1px solid;
}
.covid_box_title {
font-size: 30px;
font-weight: bold;
color: #192a7b;
text-align: center;
margin-top: 35px;
height: 90px;
margin-bottom: 35px;
line-height: 1.2em;
}
.covid_box_comm {
font-size: 14px;
text-align: left;
margin-top: 10px;
height: 230px;
line-height: 1.5em;
width: 85%;
margin: 0 auto;
}
.covid_box_price {
width: auto;
text-align: center;
margin: 35px auto 20px;
}
.covid_box_price span {
font-size: 28px;
}
.covid_box_comm2 {
width: 50%;
float: left;
box-sizing: border-box;
padding: 0 10px;
}
.covid_box_comm2_title {
color: #192a7b;
font-size: 18px;
border: 1px solid #192a7b;
padding: 5px 0;
box-sizing: border-box;
text-align: center;
margin-top: 16px;
}
.covid_box_comm2_size {
font-size: 14px;
text-align: left;
margin-top: 10px;
}
.covid_box_comm2_price {
width: auto;
text-align: center;
margin: 35px auto 20px;
}
.covid_box_comm2_price span {
font-size: 28px;
}
.covid_box_wide_syouhin {
width: 1300px;
margin: 0 auto;
overflow: hidden;
padding: 50px;
box-sizing: border-box;
border-bottom: #192a7b 1px solid;
}
.covid_box_wide_syouhin_left {
width: 500px;
float: left;
}
.covid_box_wide_syouhin_right {
width: 600px;
float: left;
padding: 20px 40px;
box-sizing: border-box;
}
.covid_box_wide_syouhin_title {
font-size: 30px;
font-weight: bold;
color: #192a7b;
text-align: left;
margin-top: 35px;
margin-bottom: 35px;
line-height: 1.2em;
}
.covid_box_wide_syouhin_comm {
font-size: 14px;
text-align: left;
margin-top: 10px;
height: auto;
line-height: 1.5em; margin: 0 auto;
}
.covid_wide_box {
width: 1200px;
padding: 80px 30px;
box-sizing: border-box;
overflow: hidden;
margin: 0 auto;
}
.covid_wide_box_left {
width: 70%;
float: left; padding: 0;
box-sizing: border-box;
}
.covid_wide_box_right {
width: 30%;
float: left;
}
.about {
width: 100%;
overflow: hidden;
margin: 15px auto 50px;
}
.about_title {
width: 100%;
text-align: left;
color: #192a7b;
font-weight: bold;
font-size: 43px;
line-height: 1em;
padding-top: 30px;
}
.about_box_left {
width: 55%;
font-size: 22px;
float: left;
line-height: 2em;
}
.about_box_right {
width: 45%;
font-size: 22px;
float: left;
box-sizing: border-box;
padding-left: 50px;
}
.p_name {
font-size: 30px;
font-weight: bold;
margin-top: 40px;
}
.p_name span {
font-size: 18px;
font-weight: bold;
display: block;
margin-bottom: -10px;
}
.company {
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
margin: 100px 0 0;
padding: 100px 0 0;
}
.company_box {
width: 1300px;
margin: 0 auto;
}
.company_title {
width: 100%;
text-align: center;
margin-bottom: 70px;
}
.company table {
width: 100%;
color: #192a7b;
font-size: 30px;
}
.company table th {
width: 30%;
text-align: center;
font-weight: bold;
border-right: 3px solid #192a7b;
border-top: 3px solid #192a7b;
border-bottom: 3px solid #192a7b;
vertical-align: middle;
padding: 30px 0;
box-sizing: border-box;
background: none;
}
.company table td {
width: 70%;
text-align: left;
font-weight: bold;
border-left: 3px solid #192a7b;
border-top: 3px solid #192a7b;
border-bottom: 3px solid #192a7b;
vertical-align: middle;
padding: 30px 0 30px 70px;
box-sizing: border-box;
}
.news_page {
width: 1100px;
margin: 100px auto;
position: relative;
border-top: 5px solid #192a7b;
border-bottom: 5px solid #192a7b;
}
.news_page a {
color: #192a7b;
}
.news_page a:hover {
color: #45AAB8;
}
.information_item_page {
width: 100%;
overflow: hidden;
border-bottom: 1px solid #192a7b; padding: 30px 0;
}
.information_item_page_space {
width: 100%;
border-bottom: 1px solid #CCCCCC;
margin: 5px 0;
}
.information_item_page_txt_meta {
width: 20%;
float: left;
text-align: center;
font-size: 38px;
margin: 0;
vertical-align: middle;
box-sizing: border-box;
}
.information_item_page_txt_meta span {
font-size: 10px;
letter-spacing: 14px;
clear: both;
display: block;
text-align: center; margin-right: -14px;
}
.information_item_page_txt_title {
width: 80%;
float: left;
display: flex;
align-items: center;
}
.item:after {
content: "";
width: 20px;
height: 20px;
display: none;
border-bottom: 5px solid #153368;
border-right: 5px solid #153368;
position: absolute;
top: 30px;
right: 44px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
display: inline-block;
}  .contact {
width: 100%;
margin: 50px auto;
}
.contact_title {
font-size: 150%;
text-align: center;
}
.contact_phone {
background: #F0EFEE;
padding: 15px;
margin: 30px 0;
overflow: hidden;
}
.contact_phone_left {
font-size: 130%;
padding: 0px 0px;
float: left;
width: 35%;
text-align: center;
}
.contact_phone_right {
padding: 15px 0;
text-align: center;
background: #FFF;
width: 65%;
float: right;
}
.contact_phone_right img {
text-align: center;
width: 60%;
vertical-align: middle;
padding: 7px 0;
} li.item {
height: 470px;
margin-bottom: 50px;
}
li.item-gallery {
height: 300px;
}
.item-img {
margin: 0 0 10px 0;
overflow: hidden;
text-align: center;
}
.item-cat {
font-size: 65%;
color: #999;
padding: 0 0 0px 0;
margin: 0 0 20px 0;
max-height: 65px;
overflow: hidden;
}
.item-cat a {
color: #444;
}
.item-date {
font-size: 70%;
color: #ccc;
padding: 0 0 0 0;
margin: 0 0 10px 0;
max-height: 50px;
overflow: hidden;
line-height: 150%;
}
.item h2 {
font-size: 22px;
line-height: 150%;
font-weight: bold;
letter-spacing: 0;
text-decoration: none;
}
.item-title {
margin: 0 0 0 0;
padding: 5px 0px 0px 0px;
border-top: 0px solid #ccc;
border-bottom: 0px solid #ccc;
}
.item-title a {
color: #444;
}
.item-title a:hover {
color: #999;
}
.item-text {
font-size: 13px;
color: #666;
line-height: 170%;
} .single-contents {
margin: 0 0 0;
}
.page-contents {
margin: 0 0 0;
}
p {
font-size: 16px;
color: #444;
line-height: 200%;
padding: 15px 0px 15px 0px;
}
p a {
color: #45AAB8;
text-decoration: none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
p a:hover {
color: #666;
}
p a:active, a:focus {
outline: 0;
} .breadcrumb {
margin: 10px 0 0px 0;
line-height: 120%;
}
.breadcrumb div {
display: inline;
font-size: 12px;
color: #999;
}
.breadcrumb span, .breadcrumb span a {
color: #45aab8;
}
.breadcrumb ol {
margin: 0px;
}
.breadcrumb li {
margin: 0px;
display: inline;
} .pagedate {
font-size: 12px;
font-weight: normal;
text-align: left;
padding: 0 0 0 0;
margin: 0 0 -10px 0;
color: #555;
letter-spacing: 0.02em;
}
.pagetitle-kotei {
color: #333;
font-size: 16px;
font-weight: bold;
letter-spacing: 0.05em;
font-style: normal;
margin: 0px 0px 20px 0px;
padding: 0 0 3px 0;
}
.pagetitle {
font-size: 32px;
font-weight: normal;
letter-spacing: 0.01em;
padding: 0px 0px 10px 0px;
margin: 0px auto 40px auto;
border-bottom: 3px double #ccc;
max-width: 100%;
text-align: center;
}
.pagetitle a {
color: #333;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
.pagetitle a:hover {
color: #666;
}
.pagetitle-single {
color: #333;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.05em;
font-style: normal;
margin: 0px 0px 10px 0px;
}
.pagetitle-single a {
color: #333;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
.pagetitle-single a:hover {
color: #666;
}
.blog-title {
font-size: 22px;
line-height: 140%;
font-weight: bold;
color: #333;
margin: 20px 0px 20px 0px;
padding: 18px 0px 15px 0px;
border-top: 3px double #ccc;
border-bottom: 1px solid #ccc;
}
.blog-title a {
color: #333;
text-decoration: none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
.blog-title a:hover {
color: #666;
} .head-img {
width: 100%;
text-align: center;
overflow: hidden;
}
.head-img img {
margin: 0px auto 50px auto;
} .blog-foot {
clear: both;
font-size: 75%;
text-align: left;
margin: 0px 0 50px 0;
font-weight: normal;
color: #999;
border-bottom: 0px dotted #ccc;
}
.blog-foot span {
color: #999;
} #next {
font-size: 90%;
line-height: 150%;
margin: 50px 0 20px 0;
}
.next-left {
float: left;
text-align: left;
margin: 0 0 10px 0;
background: url(//togo-karaoke.com/wp-content/themes/togo/images/left.gif) no-repeat left;
}
.next-left a {
padding: 20px 20px 20px 50px;
display: block;
border: 1px solid #fff;
}
.next-left a:hover {
border: 1px solid #eee;
}
.next-right {
float: right;
text-align: right;
margin: 0 0 10px 0;
background: url(//togo-karaoke.com/wp-content/themes/togo/images/right.gif) no-repeat right;
}
.next-right a {
padding: 20px 50px 20px 20px;
display: block;
border: 1px solid #fff;
}
.next-right a:hover {
border: 1px solid #eee;
} .pager {
text-align: center;
margin: 50px 0 80px 0;
}
a.page-numbers, .pager .current {
background: #f0f0f0;
padding: 10px 10px;
margin: 0 2px;
}
.pager .current {
background: #ccc;
color: #fff;
} .wp-caption {
max-width: 100%;
}
.wp-caption-text {
font-size: 90%;
text-align: center;
}
.sticky {
}
.gallery-caption {
}
.bypostauthor {
} .screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; } #footer {
clear: both;
width: 100%;
font-size: 80%;
margin: 0px auto 0px auto;
background: url(https://togo-karaoke.com/wp-content/themes/togo/images/f_bg.jpg) center / cover no-repeat;
box-sizing: border-box;
}
.footer-inner {
margin: 0 auto;
padding: 50px 0;
max-width: 800px;
text-align: center;
color: #FFFFFF;
}
.footer_logo {
width: 20%;
float: left;
text-align: center;
}
.footer_add {
width: 80%;
float: left;
padding: 0 0 0 50px;
box-sizing: border-box;
text-align: left;
}
.footer_add h2 {
font-size: 30px;
margin-bottom: 15px;
}
.footer_add p {
font-size: 16px;
padding: 0;
line-height: 1.5em;
color: #FFFFFF;
letter-spacing: 2px;
} #f_nav {
width: 800px;
padding: 0;
margin: 0 auto;
text-align: center;
}
#f_nav ul {
list-style: none;
margin: auto;
}
.footer-navigation {
clear: both;
margin: 0 auto;
position: relative;
}
ul.f_nav-menu, div.f_nav-menu>ul {
margin: 0;
padding: 0;
}
.f_nav-menu li {
display: inline-block;
position: relative;
margin: 0 -2px 0 -2px;
}
.f_nav-menu li a {
color: #FFF;
display: block;
font-size: 14px;
font-weight: bold;
text-decoration: none;
padding: 12px 15px;
}
.f_nav-menu li:hover>a, .f_nav-menu li a:hover {
color: #0071bc;
}
.f_nav-menu .sub-menu, .f_nav-menu .children {
background: #eee;
display: none;
padding: 0;
position: absolute;
z-index: 99999;
}
.f_nav-menu .sub-menu ul, .f_nav-menu .children ul {
border-left: 0;
left: 100%;
top: 0;
}
ul.f_nav-menu ul a, .f_nav-menu ul ul a {
color: #333;
margin: 0;
width: 200px;
}
ul.f_nav-menu ul a:hover, .f_nav-menu ul ul a:hover {
background: #f5f5f5;
}
ul.f_nav-menu li:hover>ul, .f_nav-menu ul li:hover>ul {
display: block;
background: #eee;
}
.f_nav-menu .current_page_item>a, .f_nav-menu .current_page_ancestor>a, .f_nav-menu .current-menu-item>a, .f_nav-menu .current-menu-ancestor>a, .f_nav-menu .current-post-ancestor>a {
color: #0071bc;
}
.fcomm {
color: #FFFFFF;
font-size: 16px;
line-height: 1.5em;
padding-top: 20px;
}
#copyright {
font-size: 16px;
line-height: 110%;
color: #FFFFFF;
text-align: center;
position: relative;
margin: 0;
padding: 0 0 20px;
}  .widget {
margin: 0 0 50px 0;
}
.widget ul {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.widget li {
list-style: none;
}
.widget li a {
color: #666;
}
.widget li a:hover {
color: #999;
}
.widget_recent_entries li a, .widget_archive li a, .widget_categories li a, .widget_nav_menu li a {
margin: 0 0 0 0;
}
.textwidget, .textwidget p {
font-size: 16px;
color: #444;
line-height: 170%;
margin: 0 0;
padding: 0px 0px 0px 0px;
}
.widget-title {
color: #333;
font-size: 16px;
font-weight: bold;
letter-spacing: 0.05em;
font-style: normal;
margin: 0px 0px 10px 0px;
padding: 0 0 3px 0;
border-bottom: 3px double #ccc;
} .topbox {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.topbox ul {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.topbox li {
margin: 0 0 0 0;
padding: 7px 0px 6px 0px;
list-style: none;
border-bottom: 1px dotted #ddd;
}
.topbox li a {
line-height: 160%;
color: #444;
margin: 0 0 0 0;
padding: 7px 0px 6px 0px;
list-style: none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
.topbox li a:hover {
color: #999;
}
.topbox h2 {
font-size: 14px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.topbox h3 {
font-size: 13px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.topbox h4 {
font-size: 12px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.topbox ul.children {
margin-bottom: 0px;
display: block;
padding: 5px 0 0 0;
}
.topbox ul.children li {
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}
.topbox ul.sub-menu {
margin-bottom: 0px;
display: block;
padding: 5px 0 0 0;
}
.topbox ul.sub-menu li {
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}
.top-widget-title {
font-size: 18px;
letter-spacing: 0.01em;
padding: 0px 0px 10px 0px;
margin: 0px auto 40px auto;
border-bottom: 3px double #ccc;
max-width: 300px;
text-align: center;
} .footerbox .widget {
margin: 0 0 0 0;
padding: 50px 0 50px 0;
}
.footerbox {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.footerbox ul {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.footerbox li {
margin: 0 0 0 0;
padding: 7px 0px 6px 0px;
list-style: none;
border-bottom: 1px dotted #ddd;
}
.footerbox li a {
font-size: 14px;
line-height: 160%;
color: #444;
margin: 0 0 0 0;
padding: 7px 0px 6px 0px;
list-style: none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
.footerbox li a:hover {
color: #999;
}
.footerbox h2 {
font-size: 14px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.footerbox h3 {
font-size: 13px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.footerbox h4 {
font-size: 12px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.footerbox ul.children {
margin-bottom: 0px;
display: block;
padding: 5px 0 0 0;
}
.footerbox ul.children li {
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}
.footerbox ul.sub-menu {
margin-bottom: 0px;
display: block;
padding: 5px 0 0 0;
}
.footerbox ul.sub-menu li {
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}
.footer-widget-title {
color: #333;
font-size: 16px;
font-weight: bold;
letter-spacing: 0.05em;
font-style: normal;
margin: 0px 0px 10px 0px;
padding: 0px 0 3px 0;
border-bottom: 3px double #ccc;
} .singlebox {
margin: 50px 0 50px 0;
padding: 0 0 0 0;
}
.singlebox ul {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.singlebox li {
margin: 0 0 0 0;
padding: 7px 0px 6px 0px;
list-style: none;
border-bottom: 1px dotted #ddd;
}
.singlebox li a {
line-height: 160%;
color: #444;
margin: 0 0 0 0;
padding: 7px 0px 6px 0px;
list-style: none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
.singlebox li a:hover {
color: #999;
}
.single-widget-title {
color: #333;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.05em;
font-style: normal;
margin: 50px 0 10px 0;
padding: 0 0 3px 0;
border-bottom: 3px double #ccc;
}
.singlebox .textwidget, .singlebox .textwidget p {
font-size: 16px;
color: #444;
line-height: 170%;
margin: 0 0 0px 0;
padding: 5px 0 5px 0;
}
.singlebox ul.children {
margin-bottom: 0px;
display: block;
padding: 5px 0 0 0;
}
.singlebox ul.children li {
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}
.singlebox ul.sub-menu {
margin-bottom: 0px;
display: block;
padding: 5px 0 0 0;
}
.singlebox ul.sub-menu li {
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
} .sidebox {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.sidebox ul {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.sidebox li {
margin: 0 0 0 0;
padding: 7px 0px 7px 0px;
list-style: none;
border-bottom: 1px dotted #ddd;
}
.sidebox li a {
font-size: 14px;
color: #444;
margin: 0 0 0 0;
padding: 5px 0px 5px 0px;
list-style: none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
.sidebox li a:hover {
color: #999;
}
.sidebox h2 {
font-size: 14px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.sidebox h3 {
font-size: 13px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.sidebox h4 {
font-size: 12px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.sidebox ul.children {
margin-bottom: 0px;
display: block;
padding: 5px 0 0 0;
}
.sidebox ul.children li {
padding: 5px 0 5px 15px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}
.sidebox ul.sub-menu {
margin-bottom: 0px;
display: block;
padding: 5px 0 0 0;
}
.sidebox ul.sub-menu li {
padding: 5px 0 5px 15px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
} .top-wide-contents {
width: 100%;
margin: 0 0 50px 0;
background: #f9f9f9;
}
.top-wide-contents .widget {
padding: 30px 20px 30px 20px;
}
.top-wide-contents .textwidget, .top-wide-contents .textwidget p {
color: #444;
line-height: 170%;
margin: 0 0 50px 0;
text-align: center;
}
.top-wide-contents .top-widget-title {
font-weight: bold;
margin-bottom: 30px;
padding: 30px 0 5px 0;
border-bottom: 4px solid #444;
}
.top-wide-contents ul {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.top-wide-contents li {
margin: 0 0 0 0;
padding: 7px 0px 6px 0px;
list-style: none;
border-bottom: 1px dotted #ddd;
}
.top-wide-contents li a {
line-height: 160%;
color: #444;
margin: 0 0 0 0;
padding: 7px 0px 6px 0px;
list-style: none;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
.top-wide-contents li a:hover {
color: #999;
}
.top-wide-contents ul.children {
margin-bottom: 0px;
display: block;
padding: 5px 0 0 0;
}
.top-wide-contents ul.children li {
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
}
.top-wide-contents ul.sub-menu {
margin-bottom: 0px;
display: block;
padding: 5px 0 0 0;
}
.top-wide-contents ul.sub-menu li {
padding-left: 15px;
padding-top: 5px;
border-top: 1px dotted #ccc;
border-bottom: 0px dotted #ccc;
} table#wp-calendar {
width: 100%
}
table#wp-calendar th {
text-align: center;
}
table#wp-calendar td {
text-align: center;
}  .search input {
font: 16px arial, sans-serif;
color: #333;
width: 85%;
padding: 10px 5px;
}
.search button {
width: 15px;
height: 15px;
cursor: pointer;
vertical-align: middle;
border: none;
background: url(//togo-karaoke.com/wp-content/themes/togo/images/search.png) no-repeat;
} .img-anime2 img {
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.img-anime2:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
} .responsive-tabel-01 table {
width: 100%;
}
.responsive-tabel-01 {
margin: 20px 0;
}
.responsive-tabel-01 th {
width: 30%;
font-size: 20px;
text-align: left;
background: #f4f4f4;
padding: 20px;
border: 1px solid #ddd;
vertical-align: middle;
}
.responsive-tabel-01 td {
font-size: 20px;
text-align: left;
padding: 20px;
border: 1px solid #ddd;
vertical-align: middle;
}
@media only screen and (max-width:480px) {
.responsive-tabel-01 {
margin: 20px -10px;
}
.responsive-tabel-01 th, .responsive-tabel-01 td {
width: 100%;
display: block;
border-top: none;
}
.responsive-tabel-01 tr:first-child th {
border-top: 1px solid #ddd;
}
} .inquiry {
width: 1300px;
margin: 50px auto;
border-top: 5px solid #192a7b;
border-bottom: 5px solid #192a7b;
}
.inquiry p {
font-size: 16px;
color: #444;
line-height: 200%;
padding: 15px 0px 15px 0px;
text-align: center;
}
.inquiry_title {
width: 100%;
font-size: 150%;
margin: 50px auto;
padding-bottom: 15px;
border-bottom: solid 1px #3fa8f4;
}
.inquiry_title span {
margin-right: 10px;
vertical-align: text-bottom;
}
.inquiry_title span img {
width: 45px;
}
.inquiry th {
text-align: left;
font-size: 24px;
color: #192a7b;
width: 30%;
padding: 30px 20px;
box-sizing: border-box;
background: #d6d9e7;
border-top: 2px solid #192a7b;
border-bottom: 2px solid #192a7b;
font-weight: bold;
position: relative;
vertical-align: middle;
} .inquiry td {
font-size: 18px;
border: none;
border-top: 2px solid #192a7b;
border-bottom: 2px solid #192a7b;
padding: 10px 20px;
} .entry-content .inquiry tr, .entry-content table {
border: solid 1px #d7d7d7;
} .haveto {
font-size: 21px;
padding: 0px 5px;
background: #ff0000;
color: #fff;
border-radius: 2px;
position: absolute;
right: 20px;
} .any {
font-size: 15px;
padding: 5px;
background: #93c9ff;
color: #fff;
border-radius: 2px;
margin-right: 5px;
position: relative;
bottom: 1px;
} .verticallist .wpcf7-list-item {
display: block;
} #formbtn {
display: block;
padding: 1em 0;
margin-top: 30px;
width: 490px;
background: #192a7b;
color: #fff;
font-size: 18px;
font-weight: bold;
border-radius: 2px;
border: none;
margin: 30px auto 0;
border-radius: 15px;
} #formbtn:hover {
background: #009c8e;
color: #fff;
}
.wpcf7 input[name="your-name"], .wpcf7 input[name="your-company"], .wpcf7 input[name="your-kana"], .wpcf7 input[name="your-email"], .wpcf7 input[name="your-subject"], .wpcf7 input[name="kana"], .wpcf7 input[name="your-postalcode"], .wpcf7 input[name="your-address"], .wpcf7 input[name="your-tel"], .wpcf7 input[name="your-birthday"] {
width: 95%;
height: 60px !important;
background: #e4e4e4;
}
.wpcf7 textarea {
width: 95%;
height: 350px !important;
}  @media only screen and (min-width: 768px) and (max-width: 1200px) {
.wrapper {
width: 100%;
padding: 30px 0px 0;
}
.wrapper_sub {
overflow: hidden;
padding-bottom: 100px;
}
.nav-menu li a {
color: #333;
display: block;
font-size: 15px;
padding: 20px 10px;
text-decoration: none;
}
.nav-menu li {
display: block;
float: none;
border-bottom: 1px solid #ededed;
}
#nav_sub {
display: none;
position: absolute;
top: 0;
float: none;
text-align: center;
width: 100%;
background: #fefefe;
margin: 0 auto 40px auto;
padding: 0;
}
.nav_sub-menu li a {
color: #333;
display: block;
font-size: 15px;
padding: 20px 10px;
text-decoration: none;
}
.nav_sub-menu li {
display: block;
float: none;
border-bottom: 1px solid #ededed;
}
.nav_sub-menu li a:after {
display: none;
}
.toggle {
display: block;
}
li.item {
height: auto;
margin-bottom: 100px;
}
.top-header_comment {
position: absolute;
z-index: 10;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.top-header_comment h1 {
font-size: 38px;
margin-bottom: 5px;
line-height: 1em;
}
.top-header_comment h2 {
width: 65%;
margin: 0 auto;
} .top-header_text {
width: 80%;
margin: 0px auto 0;
z-index: 999;
padding: 0;
position: relative;
top: 95%;
}
.top-header .text {
font-size: 12px;
line-height: 2;
letter-spacing: 0px;
text-align: left;
padding: 15px 0 40px 10px;
color: #FFFFFF;
}
.sbox_4 {
padding: 30px 10px;
}
.s_title {
font-size: 20px;
}
.s_commn {
font-size: 14px;
padding: 15px 0px;
}
#header_sub {
width: 100%;
margin: 0 auto;
}
.sub {
width: 90%;
}
.header_sub-inner {
padding: 10px 15px;
position: unset;
margin: auto;
}
.midashi-header_comment {
width: 90%;
}
.sub_page {
width: 90%;
}
.sub_title {
font-size: 26px;
}
.sub_title_top {
margin: 50px auto 10px;
}
.sub_comm {
font-size: 18px;
}
.lease_flow {
margin: 50px 0 0;
padding: 50px 0 0;
}
.lease_flow_box {
width: 100%;
margin: 0 auto;
}
.lease_flow_title {
font-size: 26px;
margin-bottom: 25px;
}
.lease_flow_left {
margin-bottom: 70px;
}
.lease_arrow_right {
width: 30%;
left: 40%;
}
.lease_flow_right {
margin-bottom: 70px;
}
.lease_arrow_left {
width: 30%;
left: 40%;
}
.lease_contact_staff {
width: 100%;
margin: 0 auto;
position: unset;
left: 0;
}
.lease_contact_box {
width: 100%;
margin: 20px auto;
position: relative;
left: 0;
padding: 20px 50px;
box-sizing: border-box;
}
.lease_contact_tell {
margin: 10px auto;
}
.products_item {
width: 100%;
padding: 0;
height: auto;
}
.products_item_left {
width: 100%;
position: unset;
}
.products_item_right {
width: 100%;
position: unset;
}
.products_item_right h2.first {
max-width: 100%;
font-size: 24px;
width: 90%;
text-align: center;
margin-left: 15px;
transform: skewX(20deg);
padding: 5px 0;
}
.products_item_right h2.first div {
margin-left: 0;
width: 100%;
transform: skewX(-20deg) scale(0.8, 1);
text-align: center;
}
.products_item_right h3 {
width: 100%;
text-align: center;
font-size: 18px;
padding: 10px 0;
}
.products_item_right p {
text-align: left;
font-size: 16px;
width: 85%;
}
.products_item_right_arrow {
width: 10%;
float: right;
position: unset;
left: 67%;
z-index: 15;
margin: -50px 0 0;
padding: 0;
}
.wpcf7 input[name="your-name"], .wpcf7 input[name="your-company"], .wpcf7 input[name="your-kana"], .wpcf7 input[name="your-email"], .wpcf7 input[name="your-subject"], .wpcf7 input[name="kana"], .wpcf7 input[name="your-postalcode"], .wpcf7 input[name="your-address"], .wpcf7 input[name="your-tel"], .wpcf7 input[name="your-birthday"] {
width: 100%;
}
.twothird {
width: 460px;
margin-right: 10px;
}
#footer {
background: url(https://togo-karaoke.com/wp-content/themes/togo/images/f_bg.jpg) center /250% auto no-repeat;
}
.footer-inner {
width: 728px;
padding: 50px 0px;
}
#main {
width: 90%;
margin-top: 100px;
}
.foot_contact {
width: 90%;
}
.value {
width: 100%;
margin: 0 auto 50px;
overflow: hidden;
position: relative;
}
.value_left {
width: 85%;
}
.value_right {
width: 90%;
margin-top: 170px;
}
.tenpo_box_l {
width: 100%;
}
.tenpo_left {
float: none;
margin: 0 auto 15px;
}
.tenpo_right {
width: 100%;
}
.tenpo_box_r {
width: 100%;
}
.tenpo_r_left {
width: 100%;
}
.tenpo_r_right {
float: none;
margin: 0 auto 15px;
}
.t_title_logo {
text-align: center;
}
.t_title_logo_right {
text-align: center;
}
.t_r_title {
text-align: center;
}
.t_r_commn {
text-align: left;
}
.t_r_tenpo {
text-align: right;
}
.t_title {
text-align: center;
}
.tenpo_box_r {
width: 100%;
}
.news {
width: 100%;
}
.top_contact {
width: 100%;
}
.contactbox-item {
height: 100px;
}
.item.new:before {
display: none;
}
.item:after {
display: none;
}
.top-header_text {
width: 85%;
}
.usen_box {
margin: 0px auto 50px;
}
.usen_title {
width: 100%;
margin-top: 20px;
}
.usen_title h2.first {
transform: skewX(20deg);
font-size: 26px;
padding: 20px 1px;
width: 90%;
}
.usen_title h2.first div {
transform: skewX(-20deg);
width: 100%;
margin: 0 auto;
text-align: center;
}
.usen_box_left {
width: 50%;
float: none;
margin: 0 auto;
}
.usen_box_right {
width: 90%;
float: none;
font-size: 16px;
line-height: 1.5em;
margin: 0 auto;
}
.button-hex {
font-size: 32px;
line-height: 40px;
position: relative;
display: inline-block;
width: 80%;
transition: all .1s ease-in-out;
text-align: center;
text-decoration: none;
color: #fff;
background-color: #192a7b;
padding: 30px 0px;
font-weight: bold;
left: 10%;
}
.covid_box {
width: 100%;
}
.covid_box_comm {
height: 320px;
}
.covid_box_title {
font-size: 17px;
margin-top: 15px;
height: 40px;
}
.covid_box_price {
font-size: 28px;
}
.covid_box_price span {
font-size: 16px;
}
.covid_box_comm2_price {
width: 65%;
margin: 10px auto;
}
.covid_box_comm2_price span {
font-size: 16px;
}
.covid_box_comm2 {
width: 100%;
}
.covid_box_wide_syouhin {
width: 100%;
}
.covid_box_wide_syouhin_left {
width: 100%;
float: none;
text-align: center;
}
.covid_box_wide_syouhin_right {
width: 100%;
}
.covid_wide_box {
width: 100%;
}
.covid_wide_box_left {
width: 100%;
text-align: center;
margin-bottom: 100px;
}
.covid_wide_box_right {
width: 100%;
text-align: center;
}
.about {
margin: 20px auto 50px;
}
.about_title {
font-size: 32px;
}
.about_box_left {
font-size: 18px;
width: 100%;
margin-bottom: 20px;
}
.about_box_right {
width: 100%;
padding-left: 0;
text-align: center;
}
.p_name {
text-align: right;
}
.p_name span {
margin-bottom: 0;
}
.company_box {
width: 90%;
margin: 0 auto;
}
.company table {
font-size: 24px;
}
.company table th {
width: 100%;
display: block;
border: none;
border-bottom: 1px solid #192a7b;
}
.company table td {
width: 100%;
display: block;
border: none;
border-bottom: 1px solid #192a7b;
}
.news_page {
width: 100%;
margin: 0 auto 100px;
}
#f_nav {
display: none;
}
.topcate_title {
font-size: 28px;
}
.topcate_comm {
font-size: 16px;
}
.sub {
padding: 0 0 0 0;
width: 90%;
margin: 0 auto;
}
.contact_phone_left {
width: 100%;
text-align: center;
}
.contact_phone_right {
width: 100%;
float: left;
}
.inquiry {
width: 90%;
}
.inquiry th {
font-size: 24px;
width: 100%;
padding: 10px 20px;
display: block;
}
.inquiry td {
font-size: 18px;
width: 100%;
padding: 10px 0;
display: block;
box-sizing: border-box;
}
} @media only screen and (max-width: 767px) {
.wrapper {
width: 100%;
padding: 30px 0px 50px 0px;
}
.wrapper_sub {
overflow: hidden;
}
.nav-menu li a {
color: #333;
display: block;
font-size: 15px;
padding: 10px;
text-decoration: none;
}
.nav-menu li {
display: block;
float: none;
border-bottom: 1px solid #ededed;
}
#nav_sub {
display: none;
position: absolute;
top: 0;
float: none;
text-align: center;
width: 100%;
background: #fefefe;
margin: 0 auto 40px auto;
padding: 0;
}
.nav_sub-menu li a {
color: #333;
display: block;
font-size: 15px;
padding: 20px 10px;
text-decoration: none;
}
.nav_sub-menu li {
display: block;
float: none;
border-bottom: 1px solid #ededed;
}
.nav_sub-menu li a:after {
display: none;
}
.toggle {
display: block;
}
li.item {
height: auto;
margin-bottom: 100px;
}
table.similar-text img {
width: 100px;
}
table.similar-text th {
width: 100px;
}
.pagedate {
margin: -20px 0 -10px 0;
}
.head-img img {
margin: 35px auto 10px auto;
}
p {
font-size: 15px;
}
.pager {
margin: 80px 0 80px 0;
}
.footer-inner {
width: 300px;
padding: 0px 0px;
}
.mobile-display-none {
display: none;
}
.single-contents br {
display: none;
}
.top-wide-contents br {
display: none;
}
.single-contents {
margin: 0 0 0px 0;
}
.page-contents {
margin: 0 0 0px 0;
}
.top-header {
width: 100%;
padding-top: 85px; } .top-header_comment {
position: absolute;
z-index: 10;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.top-header_comment h1 {
font-size: 18px;
margin-bottom: 0px;
line-height: 1em;
}
.top-header_comment h2 {
width: 65%;
margin: 0 auto;
} .top-header_text {
width: 80%;
margin: 0px auto 0;
z-index: 999;
padding: 0;
position: relative;
top: 85%;
}
.top-header .text {
font-size: 12px;
line-height: 2;
letter-spacing: 0px;
text-align: left;
padding: 15px 0 40px 10px;
color: #FFFFFF;
}
.foot_contact {
width: 90%;
}
.title_font_index {
width: 70%;
margin: 80px auto 20px;
padding-top: 0;
}
.title_font {
width: 70%;
margin: 0px auto 20px;
}
.value {
width: 100%;
}
.value h3 {
font-size: 15px;
}
.value h4 {
font-size: 12px;
line-height: 1.5em;
color: #192a7b;
font-size: 9px;
}
.value p {
font-size: 9px;
line-height: 1.5em;
letter-spacing: 1px;
}
.value .item-num {
top: 5px;
left: -45px;
width: 38%;
}
.value_left {
width: 90%;
padding: 15px 5px 10px 85px;
height: auto;
height: 170px;
}
.value_right {
width: 90%;
float: right;
margin-top: 165px;
}
.value_r_right {
width: 95%;
padding: 15px 85px 10px 5px;
height: 170px;
}
.value_r_left {
width: 95%;
margin-top: 165px;
}
.value .item-num_r {
padding: 0 4px;
top: 0px;
right: -30px;
width: 35%;
}
#main {
width: 90%;
}
.wrapper {
padding: 10px 0px 50px 0px; }
.wrapper_wide {
padding: 50px 0;
}
.sbox_4 {
width: 100%;
padding: 0;
margin-bottom: 50px;
}
.sbox_4:nth-child(odd) {
border-right: none;
}
.sbox_4:nth-child(1) {
border-bottom: none;
}
.sbox_4:nth-child(2) {
border-bottom: none;
}
.s_title {
font-size: 22px;
margin-top: 10px;
line-height: 1em;
}
.s_commn {
text-align: left;
padding: 10px 0;
}
.tenpo_box_l {
width: 100%;
margin: 0px auto;
}
.tenpo_left {
width: 80%;
float: none;
box-shadow: none;
background: none;
border: none;
box-sizing: border-box;
margin: 0 auto 15px;
}
.tenpo_right {
width: 100%;
float: left;
box-sizing: border-box;
padding: 20px 0;
}
.tenpo_box_r {
width: 100%;
margin: 50px auto;
overflow: hidden;
}
.tenpo_r_left {
width: 100%;
float: left;
box-sizing: border-box;
padding: 10px 0;
}
.t_title_logo_right {
text-align: center;
width: 80%;
margin: 0 auto 30px;
}
.t_title_logo {
margin-bottom: 30px;
line-height: 1em;
width: 80%;
margin: 0 auto 30px;
}
.tenpo_r_right {
width: 80%;
float: none;
box-shadow: none;
background: none;
border: none;
box-sizing: border-box;
margin: 0 auto 15px;
}
.t_title {
font-size: 25px;
text-align: center;
}
.t_r_title {
font-size: 25px;
text-align: center;
}
.t_r_commn {
text-align: left;
}
.t_r_tenpo {
text-align: left;
}
.t_r_tenpo span {
margin-left: 72px;
}
.news {
width: 100%;
}
.information_item {
padding: 5px 0;
}
.information_item_txt_meta {
width: 20%;
font-size: 18px;
}
.information_item_txt_meta span {
font-size: 10px;
letter-spacing: 2px;
margin-right: 0;
margin-bottom: -10px;
}
.information_item_txt_title {
font-size: 11px;
}
.item.new:before {
content: "New";
width: 60px;
height: 25px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #192a7b;
font-size: 14px;
font-weight: 700; line-height: 1;
text-transform: uppercase;
letter-spacing: 0;
background-color: #FFFFFF;
position: absolute;
top: -15px;
left: 5px;
}
.item:after {
display: none;
}
.top_contact {
width: 100%;
}
.top_contact p {
font-size: 10px;
}
.contactbox-item_tel {
width: 100%;
float: none;
padding: 0 0 15px;
box-sizing: border-box;
}
.contactbox-item {
width: 100%;
height: 100px;
padding: 10px 0;
box-sizing: border-box;
}
.contactbox__link {
color: #ffffff;
}
.sub_page {
width: 95%;
}
.sub_title {
font-size: 22px;
margin: 0px auto 50px;
padding: 0;
}
.sub_title img {
padding: 0 0 10px;
}
.sub_title_top {
margin: 50px auto 10px;
}
.sub_comm {
text-align: left;
font-size: 16px;
line-height: 1.5em;
}
.products_item {
padding: 15px 0 20px;
height: auto;
}
.products_item_left {
width: 100%;
float: none;
position: unset;
}
.products_item_right {
width: 100%;
float: none;
position: unset;
}
.products_syousai {
width: 130px;
}
.products_item_right h2.first {
max-width: 100%;
font-size: 18px;
width: 90%;
text-align: center;
margin-left: 15px;
transform: skewX(20deg);
padding: 5px 0;
}
.products_item_right h2.first div {
margin-left: 0;
width: 100%;
transform: skewX(-20deg) scale(0.8, 1);
text-align: center;
}
.products_item_right h3 {
width: 100%;
text-align: center;
font-size: 18px;
padding: 10px 0;
}
.products_item_right p {
text-align: left;
font-size: 16px;
width: 100%;
}
.products_item_right_arrow {
width: 10%;
float: right;
position: unset;
left: 67%;
z-index: 15;
margin: -50px 0 0;
padding: 0;
}
.fitImg {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.midashi-header {
margin: 0 0 30px;
}
.midashi-header_comment h1 {
font-size: 20px;
margin-bottom: 0px;
line-height: 1;
padding-left: 5px;
}
.midashi-header_comment h2 {
font-size: 18px;
padding-left: 5px;
width: 30%;
}
.midashi-header_comment p {
font-size: 10px;
padding: 0 5px;
}
.midashi-header_comment {
position: absolute;
z-index: 10;
width: 95%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.elder_item_title {
font-size: 18px;
margin-bottom: 15px;
}
.elder_item_comm {
font-size: 16px;
line-height: 1.5em;
}
.elder_item_box {
width: 100%;
margin-bottom: 10px;
}
.lease_flow {
margin: 50px 0 0;
padding: 50px 0 0;
}
.lease_flow_box {
width: 100%;
margin: 0 auto;
}
.lease_flow_title {
font-size: 26px;
margin-bottom: 25px;
}
.lease_flow_left {
margin-bottom: 70px;
}
.lease_arrow_right {
width: 30%;
left: 40%;
}
.lease_flow_right {
margin-bottom: 70px;
}
.lease_arrow_left {
width: 30%;
left: 40%;
}
.lease_contact_staff {
width: 100%;
margin: 0 auto;
position: unset;
left: 0;
}
.lease_contact_box {
width: 100%;
margin: 20px auto;
position: relative;
left: 0;
padding: 15px;
box-sizing: border-box;
}
.lease_contact_tell {
margin: 10px auto;
}
.usen_box {
margin: 0px auto 50px;
}
.usen_title {
width: 100%;
margin-top: 20px;
}
.usen_title h2.first {
transform: skewX(20deg);
font-size: 18px;
padding: 10px 1px;
width: 90%;
}
.usen_title h2.first div {
transform: skewX(-20deg);
width: 100%;
margin: 0 auto;
text-align: center;
}
.usen_box_left {
width: 50%;
float: none;
margin: 0 auto;
}
.usen_box_right {
width: 100%;
float: left;
font-size: 16px;
line-height: 1.5em;
}
.button-hex {
font-size: 22px;
width: 70%;
padding: 5px 0px;
font-weight: bold;
left: 15%;
}
.button-hex:before, .button-hex:after {
position: absolute;
top: 0;
width: 0;
height: 0;
content: '';
border: 25px solid transparent;
border-right: 25px solid transparent;
border-left: 25px solid transparent;
}
.button-hex:before {
right: 100%;
border-right-color: #192a7b;
}
.button-hex:after {
left: 100%;
border-left-color: #192a7b;
}
.button-hex:hover {
color: #009c8e;
}
.covid {
margin: 50px 0 0;
padding: 50px 0 0;
}
.covid_title {
width: 70%;
margin: 50px auto 20px;
}
.covid_box {
width: 100%;
}
.covid_box_comm {
height: auto;
margin-bottom: 35px;
}
.covid_i_box {
width: 100%;
height: auto;
}
.covid_box_title {
font-size: 18px;
margin-top: 20px;
height: auto;
}
.covid_box_comm {
height: 65px;
font-size: 12px;
height: auto;
}
.covid_box_price {
font-size: 45px;
width: 85%;
margin: 15px auto 20px;
}
.covid_box_comm2 {
width: 100%;
}
.covid_box_comm2_price {
font-size: 45px;
width: 85%;
margin: 15px auto 20px;
}
.covid_wide_box {
width: 100%;
}
.covid_wide_box_left {
width: 100%;
}
.covid_wide_box_right {
width: 50%;
margin: 0 auto;
float: none;
overflow: hidden;
padding: 20px 0;
}
.covid_box_wide_syouhin {
width: 100%;
}
.covid_box_wide_syouhin_left {
width: 100%;
text-align: center;
}
.covid_box_wide_syouhin_right {
width: 100%;
float: left;
padding: 0;
box-sizing: border-box;
}
.about_title {
font-size: 20px;
}
.about_box_left {
width: 100%;
text-align: left;
font-size: 16px;
line-height: 1.5em;
}
.about_box_right {
width: 100%;
padding-left: 0;
text-align: center;
margin: 30px auto;
}
.p_name {
font-size: 22px;
font-weight: bold;
margin-top: 10px;
text-align: right;
}
.p_name span {
font-size: 15px;
font-weight: bold;
display: block;
margin-bottom: 0;
}
.company_box {
width: 100%;
}
.company_title {
width: 70%;
margin: 0 auto 70px;
}
.company table {
width: 95%;
color: #192a7b;
font-size: 18px;
margin: 0 auto;
}
.company table th {
width: 100%;
text-align: left;
font-weight: bold;
border: none;
vertical-align: middle;
padding: 10px;
box-sizing: border-box;
display: block;
border-bottom: 1px solid #192a7b;
}
.company table td {
width: 100%;
text-align: left;
font-weight: bold;
border: none;
vertical-align: middle;
padding: 10px;
box-sizing: border-box;
border-bottom: 1px solid #192a7b;
}
.news_page {
width: 100%;
margin: 0 auto 100px;
}
.information_item_page_txt_meta {
width: 100%;
float: left;
text-align: left;
font-size: 22px;
}
.information_item_page_txt_title {
width: 100%;
}
#f_nav {
display: none;
}
.footer_logo {
width: 100%;
margin: 0 0 50px;
}
.footer_add {
width: 100%;
padding: 0;
text-align: center;
}
.footer_add h2 {
font-size: 20px;
margin-bottom: 15px;
}
.footer_add p {
font-size: 14px;
padding: 0 0 30px;
line-height: 1.5em;
letter-spacing: 1px;
}
#footer {
padding: 30px 10px 100px;
box-sizing: border-box;
height: auto;
width: auto;
background-size: auto 100%;
background-position: right 35% bottom 45%;
background-repeat: no-repeat;
}
#header_sub {
width: 100%;
margin: 0 auto;
}
.sub {
width: 90%;
}
.header_sub-inner {
padding: 10px 15px;
position: unset;
margin: auto;
}
.title__txt {
font-size: 32px;
letter-spacing: 0;
}
.subcate_go_title span {
width: 15%;
margin: 20px auto;
}
.rec_title {
font-size: 22px;
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
margin-bottom: 20px;
border-bottom: 1px dotted;
padding-bottom: 20px;
}
.page-contents td {
width: 100%;
display: block;
box-sizing: border-box;
}
.contact_title {
font-size: 16px;
text-align: center;
}
.contact_phone_left {
font-size: 16px;
padding: 0px 0px;
float: left;
width: 100%;
text-align: center;
}
.contact_phone_right {
padding: 15px 0;
text-align: center;
background: #FFF;
width: 100%;
float: left;
}
.inquiry {
width: 90%;
}
.inquiry th {
width: 100%;
display: block;
padding: 10px 15px;
font-size: 18px;
}
.inquiry td {
width: 100%;
display: block;
padding: 10px 0;
box-sizing: border-box;
font-size: 16px;
}
.title_contact_font {
width: 70%;
margin: 0 auto;
}
.haveto {
font-size: 16px;
}
.wpcf7 input[name="your-name"], .wpcf7 input[name="your-company"], .wpcf7 input[name="your-kana"], .wpcf7 input[name="your-email"], .wpcf7 input[name="your-subject"], .wpcf7 input[name="kana"], .wpcf7 input[name="your-postalcode"], .wpcf7 input[name="your-address"], .wpcf7 input[name="your-tel"], .wpcf7 input[name="your-birthday"] {
width: 100%;
}
#formbtn {
width: 100%;
}
.subphotobox {
width: 100%;
float: left;
padding: 5px;
box-sizing: border-box;
}
} @media only screen and (min-width: 375px) and (max-width: 479px) {
.wrapper {
width: 100%;
background-image: linear-gradient(0deg, #fff, #fff 0px, #192a7b 0px);
}
li.item {
height: auto;
margin-bottom: 10px;
}
.footer-inner {
width: 100%;
padding: 0px 0px;
}
} @media only screen and (min-width: 480px) and (max-width: 767px) {
.wrapper {
width: 100%;
}
li.item {
height: auto;
margin-bottom: 100px;
}
.footer-inner {
width: 100%;
padding: 0px 0px;
}
}  .twitter-timeline {
width: 100%;
height: 100%;
} .youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
}
.youtube iframe, .youtube object, .youtube embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} .wp-block-embed-youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
}
.wp-block-embed-youtube iframe, .wp-block-embed-youtube object, .wp-block-embed-youtube embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.ggmap iframe, .ggmap object, .ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} .pc {
display: block !important;
}
.sp {
display: none !important;
} @media only screen and (max-width: 1000px) {
.pc {
display: none !important;
}
.sp {
display: block !important;
}
}
@media screen and (min-width: 769px) {
.br-pc {
display: block;
}
.br-sp {
display: none;
}
}
@media screen and (max-width: 768px) {
.br-pc {
display: none;
}
.br-sp {
display: block;
}
}
.pc_area {
display: block;
}
.phone_area {
display: none;
} @media screen and (max-width: 768px) {
.pc_area {
display: none;
}
.phone_area {
display: block;
}
} .js-slideinAnimation {
position: relative;
z-index: 10;
transition: all .6s cubic-bezier(0, 0, 0.1, 1.0);
}
.js-slideinAnimation.anim-left {
transform: translateX(-100px);
opacity: 0;
}
.page-id-2128 .js-slideinAnimation.anim-left > div {
position: relative;
color: #fff;
}
.page-id-2128 .js-slideinAnimation.anim-left > div::after {
content: "";
background: #192a7b;
display: inline-block;
width: 450px;
height: 100%;
position: absolute;
left: -3em;
top: 50%;
z-index: -1;
transform: translateY(-50%) skew(225deg, 0deg);
}
@media(max-width: 1200px) {
.page-id-2128 .js-slideinAnimation.anim-left > div {
padding-left: 3em;
}
.page-id-2128 .js-slideinAnimation.anim-left > div::after {
left: 15px;;
}
}
.js-slideinAnimation.anim-left-rotate {
transform: rotateX(-30deg) translate(-100px, 50px);
opacity: 0;
transform-style: preserve-3d;
}
.js-slideinAnimation.anim-right {
transform: translateX(100px);
opacity: 0;
}
.js-slideinAnimation.anim-right-rotate {
transform: rotateX(30deg) translate(100px, 50px);
opacity: 0;
transform-style: preserve-3d;
}
.js-slideinAnimation.anim-top {
transform: translateY(-50px);
opacity: 0;
}
.js-coverAnimation {
position: relative;
z-index: 1;
}
.js-coverAnimation>* {
visibility: hidden;
}
.js-coverAnimation.is-lightblue::before {
background-color: #d6d9e7;
}
.js-coverAnimation.is-blue::before {
background-color: #192a7b;
}
.js-coverAnimation:not(.is-loading)::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
animation-name: in, out;
animation-duration: .5s;
animation-delay: 0s, .5s;
animation-timing-function: cubic-bezier(.75, 0, .2, 1);
animation-fill-mode: backwards, forwards;
}
.js-coverAnimation:not(.is-loading)>* {
animation: 1s show forwards;
}
@keyframes in {
0% {
transform-origin: 0 0;
transform: scale3d(0, 1, 1);
}
100% {
transform-origin: 0 0;
transform: scale3d(1, 1, 1);
}
}
@keyframes out {
0% {
transform-origin: 100% 0;
transform: scale3d(1, 1, 1);
}
100% {
transform-origin: 100% 0;
transform: scale3d(0, 1, 1);
}
}
@keyframes show {
0%, 50% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
.js-shineAnimation {
position: relative;
overflow: hidden;
}
.js-shineAnimation::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #eaedee;
opacity: .6;
transform: translateX(-100%);
animation: reflect 3s cubic-bezier(.25,0,.25,1) infinite;
}
@keyframes reflect {
0% {
transform: skew(-20deg) translateX(-100%);
opacity: 0;
}
60% {
transform: skew(-20deg) translateX(-100%);
opacity: 0.8;
}
100% {
transform: skew(-20deg) translateX(5%);
opacity: 0;
}
} .home #header .nav-menu li a,
:not(.home) #header.is-show .nav-menu li a {
color: inherit;
}
#header .h-logo {
display: none;
} .home #header {
border-bottom: 1px solid #000;
}
#header.is-show {
border: none;
} .banner_jka {
margin-top: 20px;
}
.banner_jka img {
max-width: 1200px;
width: 100%;
margin: 0 auto;
display: block;
}
.front-banner_list{
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding-top: 40px;
padding-bottom: 60px;
}
.front-banner_list a {
display: block;
}
.front-banner_list a img{
width: 100%;
}
.front-darts {
background: url(//togo-karaoke.com/wp-content/themes/togo/images/front-darts.jpg) no-repeat center center;
background-size: cover;
width: 100%;
}
.front-darts__inner {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px;
}
.front-darts__inner p{
color: #fff;
}
.front-darts__inner h1{
color: #fff;
font-size: 40px;
}
.front-darts__inner .en{
padding: 0 0 0 0;
font-size: 18px;
font-weight: bold;
}
.front-darts__inner .darts-btn a {
background-color: #c5d0e6;
color: #1d2088;
border-radius: 0;
}
@media only screen and (min-width: 768px) and (max-width: 1200px){
.front-banner_list {
width: 90%;
}
}
@media screen and (max-width: 768px) {
.front-banner_list {
width: 90%;
grid-template-columns: repeat(2,1fr);
}
}
.darts-btn {
margin-top: 1rem;
text-align: left;
}
.darts-btn a {
display: inline-block;
width: 300px;
padding: 6px 10px;
background-color: #084399;
color: #ffffff;
text-align: center;
text-decoration: none;
border-radius: 30px;
font-size: 16px;
font-weight: bold;
}
.dartsbanner {
text-align: center;
margin-top: 40px;
}
.darts_wrap{
color: #231815;
}
.darts-product {
background: linear-gradient(to bottom, #ffffff, #dfe0e0);
padding: 120px 20px 0;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.darts-product__img {
margin-bottom: -60px;
}
.darts-product__element {
margin-left: 80px;
}
.darts-product__btn {
display: block;
max-width: 300px;
padding: 14px 10px;
background-color: #fff;
color: #231815;
text-align: center;
text-decoration: none;
border: 1px solid #888;
border-radius: 10px;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}
.darts-product__btn:first-of-type {
margin-top: 20px;
}
.darts-product.reverse {
flex-direction: row-reverse;
margin-top: 40px;
}
.darts-product.reverse .darts-product__element{
margin-left: 0;
margin-right: 80px;
}
.title {
font-size: 40px;
}
.text {
color: #231815;
line-height: 1.8;
padding: 16px 0px 0px 0px;
}
.text-b {
color: #231815;
font-weight: bold;
font-size: 20px;
line-height: 1.8;
}
@media only screen and (max-width: 767px){
.darts-product{
flex-wrap: wrap;
}
.darts-product__img {
margin-bottom: 0px;
width: 100px;
}
.darts-product.reverse .darts-product__element{
margin-right: 0;
}
.darts-product__element {
margin-left: 0px;
margin-top: 20px;
padding-bottom: 40px;
}
.title {
font-size: 26px;
}
.text-b {
font-size: 18px;
}
}
.darts-text {
margin-top: 140px;
padding: 0 20px;
text-align: center;
}
.darts-text__img {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 40px;
max-width: 760px;
margin: 0 auto;
}
.darts-text__img img {
width: 100%;
}
.darts-text .title {
margin-top: 60px;
}
@media only screen and (max-width: 767px) {
.darts-text {
margin-top: 60px;
}
.darts-text__img {
gap: 20px;
}
.darts-text .title {
margin-top: 40px;
}
}
.darts_hr{
max-width: 1200px;
margin-top: 120px;
}
.darts-pro {
background: linear-gradient(to bottom, #ffffff, #dfe0e0);
text-align: center;
margin: 120px auto 0;
padding: 0 20px;
}
.darts-pro__head {
margin-bottom: 40px;
max-width: 1200px;
width: 100%;
}
.darts-pro__wrap{
margin: 0 auto;
padding-bottom: 80px;
max-width: 1200px;
}
.profile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
max-width: 1000px;
margin: 80px auto 0;
}
.profile-card {
text-align: left;
}
.profile-img {
width: 100%;
max-width: 200px;
margin-bottom: 20px;
}
.profile-card .name {
font-size: 18px;
font-weight: bold;
margin-bottom: 0px;
}
.profile-card .date {
padding: 0 0 0 0;
}
.banner-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 20px;
max-width: 800px;
margin: 80px auto 0;
}
.banner-grid img {
width: 100%;
}
@media only screen and (max-width: 767px) {
.darts_hr{
margin-top: 80px;
}
.darts-pro{
margin: 80px auto 0;
}
.profile-grid {
margin: 60px auto 0;
}
.profile-card {
text-align: center;
}
.banner-grid {
grid-template-columns: repeat(1,1fr);
}
}
@media (min-width: 1200px) {
.header-inner {
max-width: 1200px;
}
}