File: /www/wwwroot/www.xxlht.com/sh/189/index_files/common-new.css
@charset "UTF-8";
.inner #use #use-pc2018 {
}
#use-pc2018 .use-pc-waku p {
margin-bottom: 23px;
font-size: 16px;
}
/* menu */
@media only screen and (max-width: 1069px) {
#menu-btn {
position: fixed;
z-index: 1000;
top: 12px;
right: 12px;
padding-top: 5px;
padding-right: 0px;
padding-left: 3px;
padding-bottom: 10px;
height: 36px;
opacity: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
border-radius: 5px;
-webkit-opacity: 0.5;
}
#wrap #menu ul {
margin-top: 0px;
color: #FFFFFF;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#menu ul li {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#menu ul li a {
color: #FFFFFF;
text-decoration: none;
font-size: 12px;
display: block;
padding-top: 8px;
padding-right: 3px;
padding-bottom: 8px;
padding-left: 14px;
border-bottom: 1px solid #393939;
background-image: url(../images/allow-menu.png);
background-repeat: no-repeat;
background-position: 95% 45%;
}
}
#menu-btn span.img {
position: absolute;
top: 35px;
display: block;
width: 33px;
height: 10px;
background-repeat: no-repeat;
background-image: url(../images/menu_sp_2x.png);
background-size: 33px 10px;
overflow: hidden;
}
.old #menu-btn span.img {
height: 34px;
height: 35px;
background: url("/img/common/sp/menu_toggle_sp_2x.png") no-repeat;
background-size: 33px 70px;
}
#menu-btn.close span.img {
position: absolute;
top: 35px;
display: block;
width: 33px;
height: 10px;
background-repeat: no-repeat;
background-image: url(../images/menu_sp_2xx.png);
background-size: 33px 10px;
overflow: hidden;
}
.old #menu-btn.close span.img {
background-position: 0 -36px;
}
#menu-btn span.bar {
position: relative;
top: 0;
left: 0;
display: block;
margin-top: 7px;
margin-right: auto;
margin-left: auto;
margin-bottom: 2px;
width: 40px;
height: 2px;
background: #000;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-transform-origin: left top;
transform-origin: left top;
}
.old #menu-btn span.bar {
display: none;
}
#menu-btn span.bar.middle {
top: 7px;
opacity: 1;
}
#menu-btn span.bar.bottom {
top: 12px;
}
#menu-btn span.bar.top {
top: 4px;
}
#menu-btn.close span.bar.top {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: 0px;
left: -2px;
top: auto;
}
#menu-btn.close span.bar.middle {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
.inner #use #use-pc2018 {
text-align: center;
}
#use #use-pc2018 div {
margin-bottom: 20px;
margin-top: 20px;
}
#menu-btn.close span.bar.bottom {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media only screen and (max-width: 1069px) {
/*グレーバック*/
#menu-cover-close {
visibility: hidden;
position: fixed;
z-index: 11;
top: 0;
right: 260px;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.50);
z-index:9999;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#7e000000,EndColorStr=#7e000000);
/*IE8以下用*/
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
-webkit-transition-duration: .3s;
-moz-transition-duration: .3s;
-ms-transition-duration: .3s;
-o-transition-duration: .3s;
transition-duration: .3s;
opacity: 0;
}
}
#menu {
position: fixed;
z-index: 10000;
right: 0;
box-sizing: border-box;
width: 260px;
height: 100%;
}
@media only screen and (max-width: 1069px) {
#menu {
transition-property: all;
-webkit-transform: translateX(260px);
-moz-transform: translateX(260px);
-ms-transform: translateX(260px);
-o-transform: translateX(260px);
transform: translateX(260px);
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-ms-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
overflow-y: auto;
z-index: 10000;
}
}
#menu.smooth {
-webkit-overflow-scrolling: touch;
z-index: 153;
background-color: #000000;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#menu .menu-list > li {
margin-top: 6px;
margin-right: 50px;
}
#menu .menu-list > li .link {
padding: 8px 0;
width: 100%;
}
#menu .menu-list > li:first-child {
margin-top: 0;
}
#menu ul.link-list {
margin-top: 26px;
}
#menu ul.link-list > li {
float: left;
margin-right: 25px;
margin-bottom: 25px;
}
#menu ul.link-list > li:nth-child(5) {
clear: both;
margin-right: 0;
}
#menu ul.link-list .link-jp {
float: left;
width: 28px;
height: 18px;
margin-right: 12px;
background: url("/img/common/sp/btn_jp.png") no-repeat;
background-size: 28px 18px;
}
#menu ul.link-list .link-jp.active {
background: url("/img/common/sp/btn_jp_on.png") no-repeat;
background-size: 28px 18px;
}
#menu ul.link-list .link-en {
float: left;
width: 28px;
height: 18px;
background: url("/img/common/sp/btn_en.png") no-repeat;
background-size: 28px 18px;
}
#menu ul.link-list .link-en.active {
background: url("/img/common/sp/btn_en_on.png") no-repeat;
background-size: 28px 18px;
}
/* header */
#header {
position: fixed;
top: 0;
z-index: 2;
width: 100%;
height: 110px;
background-color: #ffffff;
border-bottom: solid 1px #cccccc;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-ms-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
}
@media only screen and (max-width: 1069px) {
#header {
height: 74px;
}
}
#header .links {
overflow: hidden;
padding: 12px 0;
}
#header .links ul.link-list {
float: right;
display: table;
}
@media only screen and (max-width: 1069px) {
#header .links ul.link-list {
float: none;
}
}
#header .links ul.link-list > li {
display: inline-block;
vertical-align: middle;
}
#header .links ul.link-list > li > .link {
margin: 0 10px;
vertical-align: bottom;
color: #666666;
}
#header .links ul.link-list .partition {
border-right: solid 1px #b3b3b3;
}
#header .link-jp {
width: 28px;
height: 18px;
margin-left: 4px;
margin-right: 4px;
background: url("/img/common/btn_jp.png") no-repeat;
}
#header .link-jp.active {
background: url("/img/common/btn_jp_over.png") no-repeat;
}
#header .link-en {
width: 28px;
height: 18px;
margin-right: 10px;
background: url("/img/common/btn_en.png") no-repeat;
}
#header .link-en.active {
background: url("/img/common/btn_en_over.png") no-repeat;
}
#header .btn-keyword {
vertical-align: top;
margin-left: 10px;
margin-right: 0 !important;
width: 87px;
height: 18px;
background: url("/img/common/btn-keyword.png") no-repeat;
}
#header .btn-keyword.active {
background-position: 0 -18px;
}
#header .nav {
overflow: hidden;
}
#header .nav .nav-logo {
float: left;
}
@media only screen and (max-width: 1069px) {
#header .nav .nav-logo {
float: none;
margin-top: 14px;
text-align: center;
}
}
#header .nav .nav-list {
float: right;
overflow: hidden;
margin-top: 8px;
}
@media only screen and (max-width: 1069px) {
#header .nav .nav-list {
display: none;
}
}
#header .nav .nav-list > li {
float: left;
}
#header .nav .nav-list > li .link {
padding: 10px;
margin-right: 35px;
}
#use-pc .use-pc-waku p {
}
#header .nav .nav-list > li .link.list-end {
padding-right: 0;
margin-right: 0;
}
#header .nav .nav-list > li:first-child .link {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 44px;
}
#popover-keyword {
z-index: 99;
visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition-duration: .3s;
-moz-transition-duration: .3s;
-ms-transition-duration: .3s;
-o-transition-duration: .3s;
transition-duration: .3s;
opacity: 0;
}
#popover-keyword.active {
visibility: visible;
-webkit-transition-duration: .3s;
-moz-transition-duration: .3s;
-ms-transition-duration: .3s;
-o-transition-duration: .3s;
transition-duration: .3s;
opacity: 1;
}
#popover-keyword .popover-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#popover-keyword .keyword-list {
position: absolute;
top: 37px;
right: -27px;
width: 200px;
padding: 10px 0;
background-color: #ffffff;
border: solid 1px #cccccc;
-webkit-box-shadow: 0 5px 9px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 5px 9px rgba(0, 0, 0, 0.15);
box-shadow: 0 5px 9px rgba(0, 0, 0, 0.15);
}
#popover-keyword .keyword-list:after {
content: " ";
position: absolute;
top: -7px;
right: 94px;
display: block;
width: 13px;
height: 7px;
background: url("/img/common/popover_beak.png") no-repeat;
}
#popover-keyword .link-keyword {
display: block;
padding: 9px 10px;
color: #666666;
}
#popover-keyword .link-keyword:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
background-color: #f1f1f1;
}
/* 汎用クラス */
.inner, .inner-overflow-visible, .inner-sp-full, .inner-sp-wide, .inner-liquid {
position: relative;
margin: 0 auto;
box-sizing: border-box;
overflow: hidden;
}
@media only screen and (max-width: 1069px) {
.inner, .inner-overflow-visible, .inner-sp-full, .inner-sp-wide, .inner-liquid {
width: 290px;
padding: 0;
margin: 0 auto;
}
}
.inner-overflow-visible {
overflow: visible;
}
@media only screen and (max-width: 1069px) {
.inner-sp-full {
width: 100%;
}
}
@media only screen and (max-width: 1069px) {
.inner-sp-wide {
width: 300px;
margin: 0 auto;
}
}
@media only screen and (max-width: 1069px) {
.inner-liquid {
width: auto;
padding: 0 20px;
}
}
.inner-mv {
width: 1020px;
margin: 0 auto;
}
@media only screen and (max-width: 1069px) {
.inner-mv {
width: auto;
}
}
.link {
display: inline-block;
color: #444444;
text-decoration: none;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
-ms-transition-duration: .2s;
-o-transition-duration: .2s;
transition-duration: .2s;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
filter: alpha(opacity=1);
-ms-filter: "alpha(opacity=100)";
/*
img {
background:#FFF;
}
*/
}
.link:hover {
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
-ms-transition-duration: .2s;
-o-transition-duration: .2s;
transition-duration: .2s;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
filter: alpha(opacity=0.5);
-ms-filter: "alpha(opacity=50)";
}
@media only screen and (max-width: 1069px) {
.link:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
}
.link.current:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.btn {
text-decoration: none;
line-height: 0.5;
overflow: hidden;
text-indent: -9999px;
}
.btn:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}
.img {
overflow: hidden;
text-indent: -9999px;
}
.icon-close {
background: url("/img/icon/");
}
@media only screen and (max-width: 1069px) {
.only-pc {
display: none;
}
}
.only-sp {
display: none;
z-index: 10000;
}
@media only screen and (max-width: 1069px) {
#gmenu {
display: none;
}
.only-sp {
display: block;
}
}
.hide {
display: none;
}
/* アニメーション用クラス */
.animation-scroll-fadein {
opacity: 0.1;
}
.lt_ie9 .animation-scroll-fadein {
opacity: 1;
}
@media only screen and (max-width: 1069px) {
.animation-scroll-fadein {
opacity: 1;
}
}
.animation-scroll-fadein.fadeIn {
-webkit-transition-duration: 1.5s;
-moz-transition-duration: 1.5s;
-ms-transition-duration: 1.5s;
-o-transition-duration: 1.5s;
transition-duration: 1.5s;
-webkit-transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
opacity: 1;
}
.link.animation-scroll-fadein.fadeIn:hover {
opacity: 0.5;
}
/* SP用TOPへ戻るボタン */
.pagetop-sp {
display: none;
}
@media only screen and (max-width: 1069px) {
.pagetop-sp {
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
position: fixed;
top: auto;
right: 14px;
bottom: 30px;
left: auto;
width: 44px;
height: 44px;
background: url("/img/common/sp/pagetop_2x.png") no-repeat;
background-size: 44px 44px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
z-index: 999;
}
}
@media screen and (max-width:767px){
.inner #use #use-pc2018 {
display: none;
}
}