@charset "UTF-8";
/** GENERAL
==============================================*/
/*
INIT
---------------------------------------------------------------- */
html {
font-size: 62.5%;
}
body {
line-height: 1.7;
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
color: #111;
}
div, dl, dt, dd, ul, ol, li, pre, form, blockquote, th, td {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-style: normal;
text-rendering: optimizeLegibility;
margin: 0;
line-height: 1.4;
}
p {
margin: 0 0 10px;
}
ul, ol {
list-style: none;
}
img {
vertical-align: bottom;
border-style: none;
}
map,
area,
map:active,
area:active {
border: none;
outline: none;
}
figure {
margin: 0;
}
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.notes {
font-size: 1.2rem;
line-height: 1.5;
}
@media only screen and (max-width: 767px) {
.notes {
font-size: 1.0rem;
}
}
/** FONTS
==============================================*/
/** JS LIBS
==============================================*/
/* Slider */
.slick-slider {
position: relative;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
}
.slick-track:before, .slick-track:after {
content: "";
display: table;
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
float: left;
height: auto;
min-height: 1px;
display: none;
}
[dir="rtl"] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* Slider */
.slick-loading .slick-list {
background: #fff url("./../images_v3/common/ajax-loader.gif") center center no-repeat;
}
/* Icons */
@font-face {
font-family: "slick";
src: url("./fonts/slick.eot");
src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
/* Arrows */
#js-slider-arrow{display:none;}
/*
.slick-prev,
.slick-next {
position: absolute;
display: block;
height: 24px;
width: 24px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: 50% 50%;
}
@media only screen and (max-width: 767px) {
.slick-prev,
.slick-next {
width: 40px;
height: 40px;
background-size: 22px auto;
}
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
outline: none;
opacity: 0.8;
color: transparent;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: 1;
}
.slick-prev {
left: 20px;
background-image: url(../images_v3/common/slider-arrow-prev.png);
z-index: 111;
}
@media only screen and (max-width: 767px) {
.slick-prev {
left: 5px;
}
}
[dir="rtl"] .slick-prev {
left: auto;
right: 20px;
}
.slick-next {
right: 20px;
background-image: url(../images_v3/common/slider-arrow-next.png);
z-index: 111;
}
@media only screen and (max-width: 767px) {
.slick-next {
right: 5px;
}
}
[dir="rtl"] .slick-next {
left: 20px;
right: auto;
}
*/
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 40px;
}
.slick-dots {
list-style: none;
display: block;
text-align: center;
padding: 0;
width: 100%;
position: absolute;
bottom: -40px;
}
.slick-dots li {
position: relative;
display: inline-block;
margin: 0 10px;
cursor: pointer;
}
.slick-dots li button {
border: 0;
background: transparent;
display: block;
height: 12px;
width: 12px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer;
background-color: #ccc;
border-radius: 12px;
line-height: 12px;
}
.slick-dots li.slick-active button {
color: #6E6E6E;
background-color: #6E6E6E;
opacity: 1;
}
/**
* COMMON
-----------------------------------------------------------*/
body {
background-color: #fff;
font-size: 14px;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
text-rendering: optimizeLegibility;
}
@media only screen and (max-width: 767px) {
body {
font-size: 1.2rem;
}
}
.site-main {
color: #2f3438;
}
.small {
font-size: 85.7%;
}
.w880 {
max-width: 880px;
margin: 0 auto;
}
@-webkit-keyframes shiny {
0% {
left: -30%;
}
30% {
left: 120%;
}
100% {
left: 120%;
}
}
@keyframes shiny {
0% {
left: -30%;
}
30% {
left: 120%;
}
100% {
left: 120%;
}
}
@media only screen and (max-width: 767px) {
.figure img {
width: 100%;
height: auto;
}
}
/**
* Icon Font
*/
@font-face {
font-family: 'fontello';
src: url("../font/fontello.eot?10553169");
src: url("../font/fontello.eot?10553169#iefix") format("embedded-opentype"), url("../font/fontello.woff2?10553169") format("woff2"), url("../font/fontello.woff?10553169") format("woff"), url("../font/fontello.ttf?10553169") format("truetype"), url("../font/fontello.svg?10553169#fontello") format("svg");
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?10553169#fontello') format('svg');
}
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-search:before {
content: '\e800';
}
/* '' */
.icon-right-circle:before {
content: '\e801';
}
/* '' */
.icon-left-circle:before {
content: '\e802';
}
/* '' */
.icon-down-open:before {
content: '\e803';
}
/* '' */
.icon-basket:before {
content: '\e804';
}
/* '' */
.icon-cancel:before {
content: '\e805';
}
/* '' */
.icon-home:before {
content: '\e806';
}
/* '' */
.icon-up-open:before {
content: '\e807';
}
/* '' */
.icon-th-large:before {
content: '\e809';
}
/* '' */
.icon-menu:before {
content: '\f0c9';
}
/* '' */
.icon-angle-left:before {
content: '\f104';
}
/* '' */
.icon-angle-right:before {
content: '\f105';
}
/* '' */
.icon-angle-up:before {
content: '\f106';
}
/* '' */
.icon-angle-down:before {
content: '\f107';
}
/* '' */
.text-center {
text-align: center;
}
.show-small {
display: none;
}
@media only screen and (max-width: 767px) {
.show-small {
display: inherit;
}
}
@media only screen and (max-width: 767px) {
.hide-small {
display: none;
}
}
a {
color: #111;
text-decoration: none;
outline: none;
}
a:hover {
color: #444444;
text-decoration: none;
}
a .alpha {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
-webkit-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
}
@media only screen and (max-width: 767px) {
a .alpha {
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
}
a:hover .alpha {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
}
@media only screen and (max-width: 767px) {
a:hover .alpha {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
}
.site-header {
padding: 0 60px 0;
}
@media (max-width: 1280px) {
.site-header {
padding: 0 30px;
padding: 0 20px;
}
}
@media only screen and (max-width: 767px) {
.site-header {
padding: 0;
position: relative;
}
.site-header .row {
padding: 0 10px;
}
}
.site-header .page-title {
margin-bottom: 0;
height: 100px;
padding-top: 35px;
text-align: center;
background-position: 50% 50%;
background-size: cover;
}
@media only screen and (max-width: 767px) {
.site-header .page-title {
height: auto;
padding: 30px 0;
}
}
.site-header .page-title__jp {
font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
font-size: 2.6rem;
}
@media only screen and (max-width: 767px) {
.site-header .page-title__jp {
font-size: 1.8rem;
}
}
.site-header .page-title + .breadcrumbs {
border-top: none;
}
.masthead .content {
height: 84px;
}
@media only screen and (min-width: 768px) {
.masthead .content {
padding-top: 22px;
}
}
@media only screen and (max-width: 767px) {
.masthead .content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media only screen and (max-width: 767px) {
.masthead .content {
padding-top: 44px;
}
}
.masthead .brand-logo {
line-height: 1;
}
@media only screen and (min-width: 768px) {
.masthead .brand-logo {
float: left;
}
}
.masthead .brand-logo .brand-logo-img a {
padding: 10px 0;
}
.masthead .brand-logo-desc {
font-size: 1.0rem;
margin-bottom: 8px;
letter-spacing: 0.1em;
display: inline-block;
line-height: 1;
}
@media only screen and (max-width: 767px) {
.masthead .brand-logo-desc {
margin-bottom: 0;
line-height: 1.3;
}
}
@media only screen and (max-width: 350px) {
.masthead .brand-logo-desc {
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
display: block;
width: calc(100%/.8);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
.masthead .brand-logo-img {
margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
.masthead .brand-logo-img {
display: none !important;
position: absolute;
top: 15px;
left: 10px;
}
.masthead .brand-logo-img img {
height: 10px;
}
}
.masthead .official {
width: 30%;
text-align: right;
}
@media only screen and (min-width: 768px) {
.masthead .official {
padding-top: 2px;
float: right;
}
}
.masthead .official img {
margin-left: 15px;
}
.masthead .official img:last-child {
margin-left: 63px;
}
@media only screen and (max-width: 767px) {
.masthead .official img {
margin-left: 10px;
height: 22px;
width: auto;
}
.masthead .official img:last-child {
margin-left: 32.5px;
}
.masthead .official {
width: auto;
white-space: nowrap;
}
}
.globalnav {
color: #111;
z-index: 99;
width: 100%;
}
.globalnav .gn-list {
border-top: 1px solid #e6e6e6;
padding-left: calc(50% - 490px);
}
.globalnav .gn-list:after {
content: "";
display: table;
clear: both;
}
.globalnav .gn-list li {
float: left;
}
@media screen and (min-width:768px) and (max-width:1060px){
.globalnav .gn-list li {
width: 25% !important;
}
}
@media only screen and (max-width: 767px) {
.globalnav .gn-list {
display: none;
position: absolute;
width: 100%;
z-index: 999;
background-color: #fff;
}
}
.globalnav .gn-list a {
color: #111;
opacity: 1;
-webkit-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
font-size: 1.3rem;
font-weight: bold;
display: inline-block;
width: 100%;
padding: 17px 0 15px;
position: relative;
background-color: #fff;
}
.globalnav .gn-list a:after {
content: ' ';
display: inline-block;
background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA0xpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzJCM0Y0RjA4RDk4MTFFODkyNkM5RjY0Mjg2OUI3MkEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzJCM0Y0RUY4RDk4MTFFODkyNkM5RjY0Mjg2OUI3MkEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjhlODExMDdkLWQzZTYtZmE0MS05MTgxLTc0ZjVhNWRjODk1YyIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjhlODExMDdkLWQzZTYtZmE0MS05MTgxLTc0ZjVhNWRjODk1YyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PltDrscAAABkSURBVHjaYmBgYCgH4g4GIoALEN8F4jNAbExIsSAQrwLid1AbCIJQqOJVUM14gRIQ74ZqCCXG9HKoYpBHBZnwuBlm9XsoxgDGxIQCyLr/+MJVCWrCO2i4YgVpxAZJGjGBDBBgANZFFnf8d40EAAAAAElFTkSuQmCC);
width: 10px;
height: 12px;
background-repeat: no-repeat;
background-position: 50% 50%;
margin-left: 10px;
}
@media only screen and (max-width: 767px) {
.globalnav .gn-list a {
padding: 15px 5%;
-webkit-transition-duration: 0s;
transition-duration: 0s;
width: 100%;
}
}
.globalnav .gn-list a:hover {
background-color: #054380;
color: #fff;
}
.globalnav .gn-list a:hover:after {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAb0lEQVQYlY3QQRXDMAwEUbsMTKEUQiEUQqEUTCFYQqEUQqEUEgi/F/VWP1nn0a40BR17yQYrPjixZHDDgQt9Jn0L+EDL4CfesbDNpPeAd7TH6OZSyq/6rrXe/6AltRB1hl7jgTNuWkfQa0pJgKnkL5x6jgI+//S1AAAAAElFTkSuQmCC);
}
@media only screen and (max-width: 767px) {
.globalnav .gn-list a:hover {
color: #111;
background-color: #fff;
}
}
.globalnav .gn-list li {
width: 245px;
text-align: center;
}
@media only screen and (max-width: 900px) {
.globalnav .gn-list li a {
font-size: 1.1rem;
}
}
@media only screen and (max-width: 767px) {
.globalnav .gn-list li {
margin: 0;
width: auto;
}
}
.globalnav.new_nav .gn-list .gn-card {width: 25% !important;}
.globalnav.new_nav .gn-list .gn-business {width: 18% !important;}
.globalnav.new_nav .gn-list .gn-use-scene {width: 18% !important;}
.globalnav.new_nav .gn-list .gn-service {width: 21% !important;}
.globalnav.new_nav .gn-list .gn-faq {width: 18% !important;}
.globalnav.new_nav .gn-list {
max-width: 1000px;
margin: 0 auto;
padding-left: 0;
border-top: none;
}
.globalnav.new_nav .masthead {
border-bottom: 1px solid #e6e6e6;
}
.is-open .globalnav .gn-list li {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
.is-open .globalnav .gn-list li:nth-child(1) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.is-open .globalnav .gn-list li:nth-child(2) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.is-open .globalnav .gn-list li:nth-child(3) {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.is-open .globalnav .gn-list li:nth-child(4) {
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
}
.page--card .gn-card a {
background-color: #054380;
color: #fff;
}
.page--card .gn-card a:after {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAb0lEQVQYlY3QQRXDMAwEUbsMTKEUQiEUQqEUTCFYQqEUQqEUEgi/F/VWP1nn0a40BR17yQYrPjixZHDDgQt9Jn0L+EDL4CfesbDNpPeAd7TH6OZSyq/6rrXe/6AltRB1hl7jgTNuWkfQa0pJgKnkL5x6jgI+//S1AAAAAElFTkSuQmCC);
}
.page--service .gn-service a {
background-color: #054380;
color: #fff;
}
.page--service .gn-service a:after {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAb0lEQVQYlY3QQRXDMAwEUbsMTKEUQiEUQqEUTCFYQqEUQqEUEgi/F/VWP1nn0a40BR17yQYrPjixZHDDgQt9Jn0L+EDL4CfesbDNpPeAd7TH6OZSyq/6rrXe/6AltRB1hl7jgTNuWkfQa0pJgKnkL5x6jgI+//S1AAAAAElFTkSuQmCC);
}
.page--faq .gn-faq a {
background-color: #054380;
color: #fff;
}
.page--faq .gn-faq a:after {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAb0lEQVQYlY3QQRXDMAwEUbsMTKEUQiEUQqEUTCFYQqEUQqEUEgi/F/VWP1nn0a40BR17yQYrPjixZHDDgQt9Jn0L+EDL4CfesbDNpPeAd7TH6OZSyq/6rrXe/6AltRB1hl7jgTNuWkfQa0pJgKnkL5x6jgI+//S1AAAAAElFTkSuQmCC);
}
.gn-menu {
position: absolute;
top: 0px;
right: 0px;
width: 50px;
height: 34px;
background-color: #fff;
padding: 8px 10px;
line-height: 1;
z-index: 999999;
-webkit-transition: all 500ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 500ms cubic-bezier(0.42, 0, 0.58, 1);
height: 44px;
padding-bottom: 20px;
display: none;
}
@media only screen and (max-width: 767px) {
.gn-menu {
display: block;
border-radius: 0;
top: 0px;
right: 0px;
}
}
.gn-menu .txt {
display: inline-block;
width: 100%;
margin-left: -1px;
padding-top: 4px;
font-size: 1.0rem;
display: block;
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
width: calc(100%/0.8);
-webkit-transform-origin: left center;
transform-origin: left center;
text-align: center;
}
.menu-hbg,
.menu-trigger,
.sp-menu-trigger span {
display: inline-block;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.menu-hbg,
.menu-trigger {
position: relative;
width: 100%;
height: 100%;
}
.over .menu-hbg #icon-menu,
.is-open .menu-hbg #icon-menu, .over
.menu-trigger #icon-menu,
.is-open
.menu-trigger #icon-menu {
opacity: 0;
}
.menu-hbg span,
.menu-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: #111;
border-radius: 0px;
-webkit-transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.over .menu-hbg span,
.is-open .menu-hbg span, .over
.menu-trigger span,
.is-open
.menu-trigger span {
background-color: #707070 !important;
}
.menu-hbg span:nth-of-type(1),
.menu-trigger span:nth-of-type(1) {
top: 0;
}
.menu-hbg span:nth-of-type(2),
.menu-trigger span:nth-of-type(2) {
top: 50%;
margin-top: -1px;
}
.menu-hbg span:nth-of-type(3),
.menu-trigger span:nth-of-type(3) {
bottom: 0;
}
.gn-menu.active .menu-trigger.basic span {
opacity: 1;
}
.gn-menu.active .menu-trigger.basic span:nth-of-type(1) {
-webkit-transform: translateY(8px) rotate(-45deg);
transform: translateY(8px) rotate(-45deg);
}
.gn-menu.active .menu-trigger.basic span:nth-of-type(2) {
opacity: 0;
margin-top: 0;
}
.gn-menu.active .menu-trigger.basic span:nth-of-type(3) {
-webkit-transform: translateY(-8px) rotate(45deg);
transform: translateY(-8px) rotate(45deg);
}
.gn-menu.active .menu-trigger.rotate {
-webkit-transition: all 400ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 400ms cubic-bezier(0.42, 0, 0.58, 1);
}
.gn-menu.active .menu-trigger.rotate span {
opacity: 1;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.gn-menu.active .menu-trigger.rotate span:nth-of-type(1) {
-webkit-transform: translateY(8px) rotate(-45deg);
transform: translateY(8px) rotate(-45deg);
}
.gn-menu.active .menu-trigger.rotate span:nth-of-type(2) {
-webkit-transform: translateY(0) rotate(45deg);
transform: translateY(0) rotate(45deg);
margin-top: 0;
}
.gn-menu.active .menu-trigger.rotate span:nth-of-type(3) {
opacity: 0;
}
.breadcrumbs {
background-color: #fff;
border-top: 1px solid #e6e6e6;
}
.breadcrumbs .icon-home {
font-size: 1.2rem;
}
.breadcrumbs .bc-list {
margin-bottom: 0;
height: 40px;
}
@media only screen and (max-width: 767px) {
.breadcrumbs .bc-list {
height: auto;
}
}
.breadcrumbs a,
.breadcrumbs span {
font-weight: bold;
position: relative;
padding: 0 10px 0 10px;
}
@media only screen and (max-width: 767px) {
.breadcrumbs a,
.breadcrumbs span {
font-weight: normal;
padding: 0 3px;
}
}
.breadcrumbs ol {
padding-top: 10px;
font-size: 1.2rem;
}
@media only screen and (max-width: 767px) {
.breadcrumbs ol {
padding-top: 5px;
padding-left: 10px;
}
}
.breadcrumbs li {
line-height: 1;
font-size: 1.2rem;
display: inline-block;
}
@media only screen and (max-width: 767px) {
.breadcrumbs li {
font-size: 1.0rem;
}
}
.breadcrumbs li.disabled {
font-weight: bold;
}
.breadcrumbs li.disabled:after {
display: none;
}
.breadcrumbs li:after {
content: '/';
}
/*------- navbox -------*/
.sidenav .row {
padding: 0;
}
.sidenav .menu {
border-right: 1px solid #dbdbdb;
border-left: 1px solid #dbdbdb;
margin: 0 0 15px 0;
}
.sidenav .menu > li a {
text-decoration: none !important;
display: block;
padding: 16px;
font-size: 1.1rem;
color: #2f3438;
position: relative;
}
.sidenav .menu .listhead a {
color: #fff;
text-align: center;
}
.sidenav .menu .link {
text-decoration: none;
}
.sidenav .menu.amex .list-item.link {
background-color: transparent;
}
.sidenav .menu .listhead {
padding: 16px;
border-bottom: 1px solid #dbdbdb;
text-decoration: none;
display: block;
padding: 16px;
font-size: 1.4rem;
color: #fff;
position: relative;
text-align: center;
background: #A5A5A5;
}
#pearl .menu .listhead a {
background-color: #0D5357;
}
#blue .menu .listhead a {
background-color: #172944;
}
#gold .menu .listhead a {
background-color: #8A5D05;
}
#platinum .menu .listhead a,
#sbs .listhead a {
background-color: #222;
}
.sidenav .menu .list-item {
border-bottom: 1px solid #dbdbdb;
background-color: #fff;
cursor: pointer;
}
.sidenav .menu .list-item.link {
background-color: #f6f6f6;
}
.sidenav .menu .sub-menu {
display: none;
}
.sidenav .menu .sub-menu li {
border-bottom: 1px solid #dbdbdb;
background-color: #f6f6f6;
}
.sidenav .menu .sub-menu li:first-child {
border-top: 1px solid #dbdbdb;
}
.sidenav .menu .sub-menu li:last-child {
border-bottom: none;
}
.sidenav .menu .sub-menu li.pearl {
background: #EAF4F0;
}
.sidenav .menu .sub-menu li.blue {
background: #EAEFF4;
}
.sidenav .menu .sub-menu li.gold {
background: #F4F2EA;
}
.sidenav .menu .sub-menu li.sbs {
background: #EEEEEE;
}
.sidenav .list-item > a::after {
position: absolute;
top: -3px;
bottom: 0;
margin: auto;
content: "";
vertical-align: middle;
right: 15px;
width: 10px;
height: 10px;
border-top: 1px solid #c6c6c6;
border-right: 1px solid #c6c6c6;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.sidenav .list-item > a.active::after {
position: absolute;
top: -3px;
bottom: 0;
margin: auto;
content: "";
vertical-align: middle;
right: 15px;
width: 10px;
height: 10px;
border-top: 1px solid #c6c6c6;
border-right: 1px solid #c6c6c6;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
top: 5px;
border-top: 1px solid #555;
border-right: 1px solid #555;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sidenav .list-item.link > a::after {
top: 5px;
border-top: 1px solid #c6c6c6;
border-right: 1px solid #c6c6c6;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#navbox .sp-use,
.sp-header {
display: none;
}
#navbox .pc-use li {
margin: 0 0 15px 0;
}
#navbox .pc-use li a:hover {
opacity: 0.75;
-webkit-transition: 0.3s;
transition: 0.3s;
}
#cov {
display: none;
}
@media only screen and (max-width: 767px) {
body.navopen {
position: fixed;
width: 100%;
}
#navbox {
display: none;
width: 85%;
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
height: auto;
min-height: 100%;
z-index: 999;
overflow-y: scroll;
background: #fff;
-webkit-overflow-scrolling: touch;
}
#navbox .sp-use {
display: block;
}
#navbox .pc-use {
display: none;
}
#cov {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 998;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
#cov div {
color: #fff;
font-size: 3.2rem;
width: 15%;
text-align: center;
}
.sidenav .menu {
border: none;
}
.sidenav .menu > li a {
padding: 14px 30px 14px 14px;
font-size: 1.4rem;
}
.sub_nav {
margin: 15px 0 30px 0;
border-top: 1px solid #dbdbdb;
border-left: 1px solid #dbdbdb;
}
.sub_nav li {
border-bottom: 1px solid #dbdbdb;
}
.sub_nav a {
text-decoration: none;
display: block;
padding: 10px 16px;
font-size: 1.1rem;
color: #2f3438;
position: relative;
background-color: #f6f6f6;
}
.sub_nav .listhead {
padding: 10px 16px;
font-size: 1.1rem;
background: #A5A5A5;
color: #fff;
}
.sub_nav a::after {
position: absolute;
top: -3px;
bottom: 0;
margin: auto;
content: "";
vertical-align: middle;
right: 15px;
width: 10px;
height: 10px;
border-top: 1px solid #c6c6c6;
border-right: 1px solid #c6c6c6;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* sp-header */
.row.sp-header {
padding: 0 0 0 3%;
width: 100%;
height: 44px;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;
}
.sp-header {
border-bottom: 1px solid #eaeaea;
}
.sp-header p {
margin: 0;
}
#pearl .sp-header {
background-color: #0D5357;
}
#blue .sp-header {
background-color: #172944;
}
#gold .sp-header {
background-color: #8A5D05;
}
#platinum .sp-header,
#sbs .sp-header {
background-color: #222;
}
.sp-header .sp-header-logo {
width: 50%;
vertical-align: middle;
}
.sp-header .sp-header-logo {
width: 64%;
line-height: 1;
}
.sp-header .sp-header-logo img {
max-height: 40px;
}
.sp-header .entry {
display: table-cell;
width: 100%;
text-align: center;
vertical-align: middle;
line-height: 1.4;
}
.sp-header .entry a {
display: block;
font-size: 1.3rem;
text-decoration: none;
border-radius: 4px;
border: 1px solid #fff;
padding: 0.7rem 2.2rem;
margin: 0 15px;
color: #fff;
background: rgba(255, 255, 255, 0.3);
}
.sp-header .btn {
height: 100%;
position: absolute;
right: 0;
top: 0;
}
.sp-header .btn {
width: 50px;
height: 44px;
background-color: #0B457E;
margin-left: auto;
margin-right: 0;
padding: 8px 10px;
}
.sp-header .btn div {
width: 28px;
height: 18px;
margin: 0 0 0 auto;
}
.sp-header .btn div span {
display: block;
height: 2px;
background: #fff;
}
.sp-header .btn div span {
background: #fff;
}
.sp-header .btn div .middle {
margin: 6px 0;
}
.sp-header .btn .menu {
color: #fff;
text-align: right;
font-size: 9px;
}
.sp-header .btn .menu {
color: #fff;
}
}
.w1300 {
max-width: 1300px;
margin: 0 auto;
}
.modal {
display: none;
}
@media only screen and (min-width: 768px) {
#navbox {
display: none;
}
}
/*------- ttl -------*/
.ttl_service-name {
font-size: 2.8rem;
}
.main-content_inner {
margin: 15px 0 50px 0;
}
.main-content_inner .rogo img {
max-height: 26px;
width: auto;
max-width: 100%;
}
.main-content_inner > div {
float: left;
width: 360px;
}
.ttl_square {
font-size: 1.5rem;
margin: 0 0 10px 0;
}
.ttl_square:before {
content: '■';
padding: 0 3px 0 0;
}
.expand-main-content section > figure,
.main-content_inner figure {
float: right;
margin-left: 20px;
}
.expand-main-content section > figure img,
.main-content figure img {
width: 232px;
}
.content-box {
margin-bottom: 25px;
}
.main-content {
padding: 30px;
background: #fff;
}
.main-content_inner {
margin: 15px 0 50px 0;
}
.main-content_inner > div {
float: left;
width: 360px;
}
.expand-main-content section > figure,
.main-content_inner figure {
float: right;
margin-left: 20px;
}
.main-content_inner .rogo {
margin-bottom: 10px;
}
.main-content_inner .rogo img {
max-height: 26px;
width: auto;
max-width: 100%;
}
.main-content_inner .rogo.long img {
max-height: 48px;
}
.expand-main-content section > figure img,
.main-content figure img {
width: 232px;
}
.expand-main-content {
border-top: 1px #dbdbdb solid;
background: #fff;
display: none;
}
.expand-main-content section {
padding: 25px 30px;
}
.bo_top {
border-top: 1px #dbdbdb solid;
}
.box1-2 {
float: left;
width: 49.2%;
margin-right: 10px;
}
.box1-3 {
float: left;
width: 31%;
margin-right: 3%;
}
@media only screen and (max-width: 768px) {
.main-content {
padding: 0 14px 14px;
background: #fff;
}
.content-box {
margin-bottom: 14px;
margin-top: -15px;
padding-top: 15px;
}
.expand-main-content section {
padding: 14px;
}
.main-content_inner {
margin: 0 0 25px 0;
}
.expand-main-content section > figure + div,
.main-content_inner > div {
float: none;
width: 100%;
margin-top: 15px;
}
.expand-main-content section > figure,
.main-content figure {
float: none;
text-align: center;
display: block;
margin-left: 0px;
}
.main-content_inner .rogo {
text-align: center;
}
.main-content figure img,
.expand-main-content section > figure img,
.expand-main-content img {
width: 100%;
height: auto;
}
.box1-2,
.box1-3 {
float: none;
width: 100%;
}
}
#luggage_counter > section {
padding: 25px 30px;
background: #fff;
}
#luggage_counter .tableA th {
width: 100px;
}
@media only screen and (max-width: 768px) {
#luggage_counter > section {
padding: 15px 14px;
}
#luggage_counter img {
width: 100%;
}
}
#mobilerental,
.popup-content-html {
width: 750px;
}
@media only screen and (max-width: 768px) {
#wifimobile .listbox_1-3_w200 p.listbox_1-3_w200-txt {
height: auto;
}
#mobilerental,
.popup-content-html {
width: auto;
}
}
@media only screen and (max-width: 768px) {
.main-content {
padding: 0 14px 14px;
background: #fff;
}
.content-box {
margin-bottom: 14px;
margin-top: -15px;
padding-top: 15px;
}
.expand-main-content section {
padding: 14px;
}
.main-content_inner {
margin: 0 0 25px 0;
}
.expand-main-content section > figure + div,
.main-content_inner > div {
float: none;
width: 100%;
margin-top: 15px;
}
.expand-main-content section > figure,
.main-content figure {
float: none;
text-align: center;
display: block;
margin-left: 0px;
}
.main-content_inner .rogo {
text-align: center;
}
.main-content figure img,
.expand-main-content section > figure img,
.expand-main-content img {
width: 100%;
height: auto;
}
.box1-2,
.box1-3 {
float: none;
width: 100%;
}
}
@media only screen and (max-width: 767px) {
.ttl_service-name {
padding: 20px 0 12px;
font-size: 1.8rem;
text-align: center;
}
}
.notes {
font-size: 0.9rem;
color: #777c80;
}
.content-box ul li {
text-indent: -1em;
padding-left: 1em;
margin-left: 0;
}
.notes li {
margin: 0 0 3px 0;
}
.list_kome li:before {
content: '※';
margin: 0 3px 0 0;
}
.btn a {
display: block;
padding: 1em 0;
-webkit-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
margin: 1.5em auto;
text-align: center;
font-size: 1.8rem;
}
@media only screen and (max-width: 767px) {
.btn a {
-webkit-transition-duration: 0s;
transition-duration: 0s;
font-size: 1.2rem;
width: 100%;
}
}
.btn .more {
background-color: #969FA5;
color: #fff;
}
.btn .more:hover {
background-color: #a4acb1;
}
@media only screen and (max-width: 767px) {
.btn .more:hover {
background-color: #969FA5;
}
}
.btn .apply {
background-color: #DB2E41;
color: #fff;
}
.btn .apply:hover {
background-color: #df4455;
}
@media only screen and (max-width: 767px) {
.btn .apply:hover {
background-color: #DB2E41;
}
}
.link {
text-decoration: underline;
color: #1953c7;
}
.link:hover {
text-decoration: none;
}
@media only screen and (max-width: 767px) {
.link:hover {
text-decoration: underline;
}
}
/* area-comparison */
.area-comparison {
padding-bottom: 60px;
}
@media only screen and (max-width: 767px) {
.area-comparison {
padding: 0;
}
}
.area-comparison .btn-more, .area-comparison .btn-apply {
margin-bottom: 0;
}
.area-comparison .btn-more a, .area-comparison .btn-apply a {
display: block;
text-decoration: none;
text-align: center;
line-height: 1;
color: #fff;
}
.area-comparison .btn-apply + .btn-more {
margin-top: 3px;
}
.area-comparison .notes {
margin-top: 1em;
}
.area-comparison i {
color: #ff0000;
font-style: normal;
}
.area-comparison .comparison_list_thead table {
margin-bottom: -1px;
}
.area-comparison table {
width: 100%;
table-layout: fixed;
font-size: 87%;
border-collapse: collapse;
}
.area-comparison table,
.area-comparison td,
.area-comparison th {
border: 1px #eaeaea solid;
}
.area-comparison .thead th {
padding: 10px;
font-weight: normal;
}
.area-comparison td {
padding: 10px 15px;
vertical-align: top;
}
.area-comparison .ttl {
width: 180px;
text-align: left;
padding: 10px 15px;
}
.area-comparison .ttl_sub {
width: 90px;
padding: 10px 15px;
}
.area-comparison .red {
color: #dd2b3c;
font-size: 110%;
}
.area-comparison .red.small {
font-size: 12px;
}
.area-comparison .bold {
font-weight: bold;
}
.area-comparison img {
width: 100%;
}
.area-comparison .logo {
display: block;
margin: 6px 0;
}
.area-comparison .card img {
width: 116px;
height: auto;
}
.area-comparison td span {
font-size: 88%;
display: block;
font-weight: normal;
}
.area-comparison .tbody tr:nth-child(odd) {
background: #f6f6f6;
}
@media only screen and (max-width: 767px) {
.area-comparison table {
width: 100%;
}
.area-comparison .thead th {
padding: 5px 10px;
}
.area-comparison .thead .card {
padding: 0 10px;
margin: 0 0 3px;
}
.area-comparison .card img {
width: 100%;
height: auto;
max-width: 76px;
}
.area-comparison img {
width: 100%;
max-width: 120px;
}
.area-comparison td,
.area-comparison .tbody th {
padding: 5px 10px;
}
.area-comparison .ttl {
width: 30%;
padding: 5px 10px;
}
.area-comparison .ttl_sub {
width: 15%;
padding: 5px 10px;
}
.area-comparison .ttl.spnone {
color: #2f3438;
text-decoration: none;
}
.area-comparison td.ttl span {
display: none;
margin: 0;
}
.area-comparison .text {
text-align: center;
}
.area-comparison table .pearl,
.area-comparison table .sbs {
display: none;
}
.area-comparison .comparison_nav {
margin: 0 0 10px 0;
}
.area-comparison .comparison_nav ul {
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.area-comparison .comparison_nav ul li {
border: 1px solid #eaeaea;
padding: 5px;
text-align: center;
display: table-cell;
}
.area-comparison img {
display: block;
margin: 0 auto;
}
.area-comparison .red.small {
font-size: 10px;
}
}
.section-comparison th.platinum,
.section-comparison th.pearl,
.section-comparison th.blue,
.section-comparison th.gold,
.section-comparison th.sbs {
position: relative;
}
.section-comparison .btn-more a {
background-color: #969FA5;
padding: 10px 0;
}
.section-comparison .btn-apply a {
background-color: #dd2b3c;
padding: 10px 0;
}
.section-comparison .btn-apply.split {
/*display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: space-between;*/
}
.section-comparison .btn-apply.split:after {
content: "";
display: table;
clear: both;
}
.section-comparison .btn-apply.split>a{float: left;}
.section-comparison .btn-apply.split>a:last-child{float: right;}
.section-comparison .btn-apply.split a {
display: block;
width: 49%;
font-size: 11px;;
}
.section-comparison .btn-more a:hover {
background-color: #889299;
}
.section-comparison .btn-apply a:hover {
background-color: #ce2131;
}
.section-comparison a.all_link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.site-main {
padding: 0 60px;
}
@media (max-width: 1280px) {
.site-main {
padding: 0 30px;
padding: 0 20px;
}
}
@media only screen and (max-width: 767px) {
.site-main {
padding: 0 10px;
}
}
.notes li {
margin-left: 1em;
text-indent: -1em;
}
.notes + p {
margin-top: 1em;
}
.notes + .notes {
margin-top: 1em;
}
.page-title {
background-size: cover;
background-position: 50% 50%;
}
.page-title h1 {
font-size: 2.4rem;
}
@media only screen and (max-width: 767px) {
.page-title h1 {
font-size: 1.8rem;
}
}
.section .headline {
text-align: center;
/* margin-bottom: 45px; */
}
.section .headline__title {
font-size: 3.4rem;
font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
position: relative;
}
@media only screen and (max-width: 767px) {
.section .headline__title {
font-size: 2.2rem;
}
}
.section .headline__title:after {
content: ' ';
display: block;
width: 3em;
margin: 30px auto 0;
border-bottom: 1px solid #a0a0a0;
}
@media only screen and (max-width: 767px) {
.section .headline__title:after {
margin-top: 15px;
}
}
.section.gray {
background-color: #F6F6F6;
}
.section-content {
padding: 65px 0;
margin: 0 auto;
left: 0 !important;
top: 0 !important;
}
#comparison .section-content{
padding-top: 0;
padding-bottom: 130px;
left: 0 !important;
top: 0 !important;
}
@media only screen and (max-width: 767px) {
.section-content {
padding: 20px 0;
}
#comparison .section-content {
padding-top: 20px;
padding-bottom: 40px;
}
}
.section-content + .section-content {
padding-top: 0;
}
.bg-gray {
background-color: #F6F6F6;
}
.page--top #js-bg-movie {
background-color: #333;
}
.page--top #js-bg-movie .embed-movie {
opacity: 0;
}
@media only screen and (max-width: 767px) {
.page--top #js-bg-movie {
display: none;
}
}
.page--top #js-bg-heros {
display: none;
}
@media only screen and (max-width: 767px) {
.page--top #js-bg-heros {
display: block;
}
}
.page--top .bg-heros {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
.page--top .bg-heros .slide {
height: 100vh;
background-size: cover;
background-position: 50% 50%;
}
.page--top .bg-heros .slide-1 {
background-image: url(../img/top/main-01.jpg);
}
.page--top .bg-heros .slide-2 {
background-image: url(../img/top/main-02.jpg);
}
.page--top .bg-heros .slide-3 {
background-image: url(../img/top/main-03.jpg);
}
/* .page--top .headline {
margin-bottom: 45px;
} */
@media only screen and (max-width: 767px) {
.page--top .headline {
margin-bottom: 20px;
}
}
.page--top .headline .lead {
margin: 1em 0;
}
.page--top .section-comparison {
padding: 0 60px;
left: 0 !important;
top: 0 !important;
}
.page--top .section-comparison .section-content {
padding-bottom: 0;
}
.page--top .section-comparison .area-comparison {
padding-bottom: 0;
}
@media only screen and (max-width: 1280px) {
.page--top .section-comparison {
padding: 0 20px;
}
}
@media only screen and (max-width: 767px) {
.page--top .section-comparison {
padding: 0;
}
}
.page--top .tabnav,
.page--faq .tabnav {
text-align: center;
padding: 65px 0;
}
@media only screen and (max-width: 767px) {
.page--top .tabnav,
.page--faq .tabnav {
margin-top: 15px;
padding: 20px 0;
}
.page--top .tabnav .row,
.page--faq .tabnav .row {
padding: 0 15px;
}
}
.page--top .tabnav__lead {
font-size: 2.2rem;
font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
.page--top .tabnav__lead {
font-size: 1.0rem;
}
}
.page--top .tabnav__title {
font-size: 2.6rem;
font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
.page--top .tabnav__title {
font-size: 1.3rem;
}
.page--top .tabnav__title a {
text-decoration: underline;
color: #1953c7;
}
}
.page--top .tabnav__ctrl {
margin-top: 50px;
}
.page--top .tabnav__ctrl>div,
.page--faq .tabnav__ctrl>div{margin-bottom: 0 !important;}
.page--top .tabnav__ctrl>div:last-child/* ,
.page--faq .tabnav__ctrl>div:last-child */{float: right;}
.page--faq .tabnav__ctrl>div:not(:last-child) {
margin-right: 2%;
}
@media only screen and (max-width: 1000px) {
.page--faq .tabnav__ctrl>div:not(:last-child) {
margin-right: 4%;
}
}
@media only screen and (max-width: 767px) {
.page--top .tabnav__ctrl,
.page--faq .tabnav__ctrl {
margin-top: 0px;
margin-bottom: 2em;
display: block;
}
.page--top .tabnav__ctrl .cell,
.page--faq .tabnav__ctrl .cell {
margin: 5px 0;
width: 100%!important;
}
}
.page--top .tabnav__ctrl a,
.page--faq .tabnav__ctrl a {
border: 1px solid #D3D3D3;
border-bottom: 3px solid #D3D3D3;
display: block;
background-color: #fff;
font-size: 1.7rem;
padding: 22px 0;
position: relative;
}
.page--faq .tabnav__ctrl a {
font-size: 1.4rem;
}
.page--top .tabnav__ctrl a::after,
.page--faq .tabnav__ctrl a::after {
position: absolute;
top: -3px;
bottom: 0;
margin: auto;
content: "";
vertical-align: middle;
right: 8%;
width: 10px;
height: 10px;
border-top: 1px solid;
border-right: 1px solid;
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.page--faq .tabnav__ctrl a::after {
right: 5%;
}
@media only screen and (max-width: 767px) {
.page--top .tabnav__ctrl a,
.page--faq .tabnav__ctrl a {
font-size: 1.4rem;
padding: 1em 0;
}
}
.page--top .tabnav__ctrl a:hover,
.page--faq .tabnav__ctrl a:hover {
border: 1px solid #000 !important;
color: #000 !important;
font-weight: bold;
}
.page--top .tabnav__ctrl,
.page--faq .tabnav__ctrl {
-webkit-justify-content: space-between;
justify-content: space-between;
}
.page--top .tabnav__ctrl .cell,
.page--faq .tabnav__ctrl .cell{
width: 48%;
-webkit-box-flex: none;
-ms-flex: none;
flex: none;
}
.page--faq .tabnav__ctrl .cell{
width: 32%;
}
@media only screen and (max-width: 1000px) {
.page--faq .tabnav__ctrl .cell{
width: 48%;
}
.page--faq .tabnav__ctrl .cell:first-child {
width: 100%;
margin: 0;
padding-bottom: 20px;
}
}
@media only screen and (max-width: 767px) {
.page--top .tabnav__ctrl a.tabnav__feature {
border-right-color: #D3D3D3;
}
.page--faq .tabnav__ctrl .cell:first-child {
padding-bottom: 0;
}
}
.page--top .section-campaign .section-content {
background-color: #054380;
}
.page--top .section-campaign .panel {
background-color: #fff;
padding: 45px 16px 25px;
}
@media only screen and (max-width: 767px) {
.page--top .section-campaign .panel {
padding: 30px 0;
}
}
.page--top .section-campaign .notes {
line-height: 1.6;
}
.page--top .section-dir a {
display: block;
position: relative;
}
.page--top .section-dir a:before {
content: ' ';
display: block;
border: 2px solid #000;
position: absolute;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}
.page--top .section-dir a:hover:before {
visibility: visible;
opacity: 1;
}
.page--top .section-dir .cell {
margin-bottom: 36px;
}
@media only screen and (max-width: 767px) {
.page--top .section-dir .cell {
margin-bottom: 20px;
}
}
.page--top .section-dir .panel {
background-color: #fff;
padding: 20px;
}
@media only screen and (max-width: 767px) {
.page--top .section-dir .panel {
padding: 10px 15px;
}
}
.page--top .section-dir .panel dt {
text-align: center;
font-size: 2.0rem;
position: relative;
font-weight: bold;
}
@media only screen and (max-width: 767px) {
.page--top .section-dir .panel dt {
font-size: 1.6rem;
}
}
.page--top .section-dir .panel dt:after {
content: ' ';
display: block;
width: 50px;
margin: 15px auto 20px;
height: 2px;
background-color: #ccc;
}
@media only screen and (max-width: 767px) {
.page--top .section-dir .panel dt:after {
margin: 7px auto 10px;
}
}
.page--top .section-dir .panel dd {
font-size: 1.6rem;
}
.page--top .section-dir .panel dd ul {
margin-top: 0.5em;
text-align: left;
}
.page--top .section-dir .panel dd li {
margin: 0.25em 0;
font-size: 1.3rem;
}
@media only screen and (max-width: 767px) {
.page--top .section-dir .panel dd {
font-size: 1.2rem;
}
}
.page--top .section-feature .link_box {display: block;}
.page--top .section-feature .panel {
padding-bottom: 70px;
}
.page--top .section-feature .panel.p-pass {
padding-bottom: 30px;
}
@media only screen and (max-width: 767px) {
.page--top .section-feature .panel {
padding-bottom: 35px;
}
}
.page--top .section-feature .panel dt {
font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
font-size: 2.0rem;
padding: 0.75em 0;
font-weight: bold;
}
.page--top .section-feature .panel dd {
line-height: 1.8;
}
.page--top .section-feature .panel dd .red.bold {
padding-top: 0.7em;
display: block;
}
.page--top .section-feature .panel dd .red.bold .link {
color: #1953c7;
}
.page--top .section-feature .panel dl {
margin-bottom: 1em;
}
.page--top .section-feature .panel .link {
color: #222;
}
.page--top .section-hero {
text-align: center;
color: #fff;
background-color: #fafafa;
}
.page--top .section-hero .section-content {
padding: 0;
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .section-content {
margin: 0 -10px;
}
}
.page--top .section-hero .slider {
height: 380px;
overflow: hidden;
}
.page--top .section-hero .slider.is-lock {
pointer-events: none;
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .slider {
height: auto;
}
.page--top .section-hero .slider .row {
padding: 0;
}
/* .page--top .section-hero .slider .card-platinum .row,
.page--top .section-hero .slider .card-business .row {
padding-top: 10px;
} */
}
.page--top .section-hero .slider .slick-slide {
opacity: 1 !important;
}
.page--top .section-hero .slider .slide {
overflow: hidden;
opacity: 0;
display: block !important;
/* height: auto !important; */
}
.page--top .section-hero .slider-wrap {
position: relative;
z-index: 0;
}
.page--top .section-hero .card {
background-color: #ccc;
text-align: center;
height: 380px;
/* padding-top: 22px; */
position: relative;
left: 0;
top: 0;
}
.page--top .section-hero .card-campaign {
display: flex;
align-items: center;
}
.page--top .section-hero .card-campaign {
padding-top: 30px\9;
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .card {
height: auto;
/* padding-top: 20px;
padding-bottom: 30px; */
height: auto;
/* padding: 70px 0 80px 0; */
padding: 0;
}
.page--top .section-hero .card-campaign {
padding: 0;
width: auto !important;
}
}
.page--top .section-hero .card .row {
position: relative;
}
.page--top .section-hero .card .bgimg {
position: absolute;
width: 110%;
height: 110%;
top: 0%;
left: 0;
display: block;
background-size: cover;
background-position: 50% top;
}
.page--top .section-hero .card .catch {
margin-bottom: 0;
position: relative;
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .card .catch {
margin: 0 10%;
}
.page--top .section-hero .card .row {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.page--top .section-hero .card .bgimg {
/* height: 180%; */
background-position: 50% 50%;
}
}
.page--top .section-hero .card .card__title {
position: relative;
}
/* .page--top .section-hero .card-platinum .card__title,
.page--top .section-hero .card-business .card__title {
padding-top: 0.5em;
} */
/* .page--top .section-hero .card-platinum .card__title .card_title_logo,
.page--top .section-hero .card-business .card__title .card_title_logo {
margin-top: -1em;
} */
/* .page--top .section-hero .card .card__title .sub_b {
position: absolute;
top: 0;
left: calc(50% - 180px);
width: 360px;
text-align: center;
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255,0.45) 9%,rgba(255, 255, 255,1) 20%,rgba(255, 255, 255,1) 40%,rgb(255, 255, 255) 80%,rgba(255, 255, 255,0.45) 91%,rgba(255, 255, 255,0) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255,0.45) 9%,rgba(255, 255, 255,1) 20%,rgba(255, 255, 255,1) 40%,rgba(255, 255, 255,1) 80%,rgba(255, 255, 255,0.45) 91%,rgba(255, 255, 255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a08f59', endColorstr='#009e8d57',GradientType=1 );
color: #444;
font-size: 18px;
z-index: 999999 !important;
padding: 5px 0;
}
@media only screen and (max-width: 768px) {
.page--top .section-hero .card .card__title .sub_b {
top: 0.5em;
font-size: 16px;
left: calc(50% - 150px);
width: 300px;
}
}
.page--top .section-hero .card-platinum .card__title .sub_b {
color: #fff;
background: -webkit-linear-gradient(left, rgb(35, 43, 51, 0) 0%,rgba(35, 43, 51,0.45) 9%,rgba(35, 43, 51,1) 20%,rgba(35, 43, 51,1) 40%,rgb(35, 43, 51) 80%,rgba(35, 43, 51,0.45) 91%,rgba(35, 43, 51,0) 100%);
background: linear-gradient(to right, rgba(35, 43, 51, 0) 0%,rgba(35, 43, 51,0.45) 9%,rgba(35, 43, 51,1) 20%,rgba(35, 43, 51,1) 40%,rgba(35, 43, 51,1) 80%,rgba(35, 43, 51,0.45) 91%,rgba(35, 43, 51,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a08f59', endColorstr='#009e8d57',GradientType=1 );
} */
.page--top .section-hero .card .figure {
margin: 10px 0 20px;
position: relative;
}
.page--top .section-hero .card-business .figure {
margin: 0;
}
.page--top .section-hero .card .figure span {
display: block;
max-width: 360px;
margin: 0 auto;
background: -webkit-linear-gradient(left, rgba(156, 156, 156,0) 0%,rgba(156, 156, 156,0.45) 9%,rgba(156, 156, 156,1) 20%,rgba(156, 156, 156,1) 40%,rgba(156, 156, 156,1) 80%,rgba(156, 156, 156,0.45) 91%,rgba(156, 156, 156,0) 100%);
background: linear-gradient(to right, rgba(156, 156, 156,0) 0%,rgba(156, 156, 156,0.45) 9%,rgba(156, 156, 156,1) 20%,rgba(156, 156, 156,1) 40%,rgba(156, 156, 156,1) 80%,rgba(156, 156, 156,0.45) 91%,rgba(156, 156, 156,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a08f59', endColorstr='#009e8d57',GradientType=1 );
color: #000;
font-size: 14px;
font-weight: bold;
}
.page--top .section-hero .card .figure a{
display: inline-block;
}
/* @media only screen and (max-width: 767px) {
.page--top .section-hero .card .figure {
width: 60%;
margin: 0 auto;
}
} */
.page--top .section-hero .card .figure img {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
border-radius: 10px;
/* max-width: 360px; */
}
/* .page--top .section-hero .card-platinum .figure {
padding-top: 20px;
} */
/* .page--top .section-hero .card-platinum .figure img {
max-width: 280px;
} */
/* .page--top .section-hero .card-business .figure img {
max-width: 719px;
} */
.page--top .section-hero .card-business .figure img {
box-shadow: none;
-webkit-box-shadow: none;
}
.page--top .section-hero .card__title {
line-height: 1;
margin-top: -10px;
}
/* .page--top .section-hero .card-platinum .card__title {
margin: -10px auto;
} */
@media only screen and (max-width: 767px) {
.page--top .section-hero .card__title {
margin-top: 0;
/* margin-bottom: 1em; */
/* width: 300px; */
max-width: 100%;
margin: 0 auto;
}
/* .page--top .section-hero .card:not(.card-campaign) .figure {
height: 150px;
} */
/* .page--top .section-hero .card-platinum .card__title {
padding-top: 1em;
margin-bottom: 0.5em;
} */
/* .page--top .section-hero .card-business .card__title {
padding-top: 0;
margin-bottom: 0;
} */
/* .page--top .section-hero .card-platinum .card__title .sp,
.page--top .section-hero .card-business .card__title .sp {
margin-top: -1em;
} */
/* .page--top .section-hero .card__title img {
width: 90%;
} */
/* .page--top .section-hero .card-platinum .card__title img {
width: 70%;
} */
/* .page--top .section-hero .card-business .card__title img {
width: 60%;
} */
/* .page--top .section-hero .card-business .card__title img {
width: 90%;
} */
/* .page--top .section-hero .card-business .kakaku_note{
font-size: 10px;
letter-spacing: -0.03em;
margin-top: 10px;
} */
/* .page--top .section-hero .card {
min-height: 700px;
} */
/* .page--top .section-hero .card-business .figure {
width: 90%;
margin: 0 auto;
} */
/* .page--top .section-hero .card-platinum .figure img {
max-width: 360px;
} */
}
/* @media only screen and (max-width: 600px) {
.page--top .section-hero .card {
min-height: 650px;
}
} */
/* @media only screen and (max-width: 500px) {
.page--top .section-hero .card {
min-height: 630px;
}
} */
/* @media only screen and (max-width: 420px) {
.page--top .section-hero .card {
min-height: 550px;
}
} */
/* @media only screen and (max-width: 370px) {
.page--top .section-hero .card {
min-height: 500px;
}
} */
/* @media only screen and (max-width: 350px) {
.page--top .section-hero .card {
min-height: 480px;
}
} */
/* .page--top .section-hero .period {
color: #323346;
font-size: 20px;
font-weight: bold;
} */
.page--top .section-hero .card__title span {
display: inline-block;
width: 100%;
font-size: 1.6rem;
position: relative;
/* top: -10px; */
}
.page--top .section-hero .card__title .sub_b img {
max-width: 350px;
}
.page--top .section-hero .card__title span.lead_txt {
font-size: 2.1rem;
margin-top: 0.5em;
}
@media only screen and (max-width: 767px) {
/* .page--top .section-hero .period {
font-size: 16px;
} */
.page--top .section-hero .card__title span {
font-size: 1.1rem;
/* top: -10px; */
}
.page--top .section-hero .card-business .card__title span.hide-small {
display: none;
}
.page--top .section-hero .card__title .sub_b img {
width: 80%;
}
.page--top .section-hero .card__title span.lead_txt {
font-size: 1.6rem;
margin-top: 0.5em;
line-height: 1.3;
/* display: none; */
}
}
.page--top .section-hero .card-campaign .bgimg {
background-image: url(../images_v3/top/hero/campaign/hero-bg.jpg);
}
.page--top .section-hero .card-campaign .row {
/* padding-top: 100px; */
}
.page--top .section-hero .card-campaign .figure img {
box-shadow: none;
max-width: 80%;
}
.page--top .section-hero .card-campaign .card__title .sub {
max-width: 30%;
vertical-align: top;
}
.page--top .section-hero .card-campaign .card__title .main {
max-width: 60%;
}
.page--top .section-hero .card-campaign .day_note {
width: 100%;
/* padding: 20px 5% 0; */
}
.page--top .section-hero .card-campaign .day_note .period {
float: left;
vertical-align: middle;
width: 60%;
margin: 0 auto;
color: #fff;
font-size: 16px;
padding: 0.2em 0;
text-shadow:0px 0px 10px #FFF;
background: -webkit-linear-gradient(left, rgba(212,78,13,0) 0%,rgba(1212,78,13,0.45) 9%,rgba(212,78,13,1) 20%,rgba(212,78,13,1) 40%,rgba(212,78,13,1) 80%,rgba(212,78,13,0.45) 91%,rgba(212,78,13,0) 100%);
background: linear-gradient(to right, rgba(212,78,13,0) 0%,rgba(212,78,13,0.45) 9%,rgba(212,78,13,1) 20%,rgba(212,78,13,1) 40%,rgba(1212,78,13,1) 80%,rgba(212,78,13,0.45) 91%,rgba(212,78,13,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a08f59', endColorstr='#009e8d57',GradientType=1 );
}
.page--top .section-hero .card-campaign .day_note .cp_notes {
float: right;
color: #323346;
font-size: 12px;
vertical-align: middle;
width: auto;
text-align: left;
padding: 5px 0;
}
@media only screen and (max-width: 1000px) {
.page--top .section-hero .card-campaign .day_note .period {
font-size: 14px;
}
.page--top .section-hero .card-campaign .day_note .cp_notes {
font-size: 11px;
}
}
@media only screen and (max-width: 900px) {
/* .page--top .section-hero .card-campaign .row {
padding: 95px;
} */
.page--top .section-hero .card-campaign .day_note .period {
width: 55%;
}
.page--top .section-hero .card-campaign .day_note .cp_notes {
font-size: 10px;
}
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .card-campaign .bgimg {
background-image: url(../images_v3/top/hero/campaign/hero-bg-m2x.png);
}
.page--top .section-hero .card-campaign .row {
padding: 0;
}
.page--top .section-hero .card-campaign .figure {
/* margin-bottom: 30px; */
/* width: 90%; */
/* margin-top: 10px; */
margin: 0 0 10px;
}
.page--top .section-hero .card-campaign .figure img {
width: 100%;
max-width: 300px;
/* max-width: 100%; */
}
.page--top .section-hero .card-campaign .card__title img {
/* width: 80%; */
width: 100%;
max-width: 300px;
}
.page--top .section-hero .card-campaign .catch img {
display: block;
}
.page--top .section-hero .card-campaign .day_note {
width: 100%;
padding: 0;
}
.page--top .section-hero .card-campaign .day_note .period {
width: 80%;
float: none;
font-size: 12px;
}
.page--top .section-hero .card-campaign .day_note .cp_notes {
/* float: none; */
/* padding-right: 10%; */
}
}
@media only screen and (max-width: 480px) {
.page--top .section-hero .card-campaign .day_note .period {
width: 90%;
}
}
.page--top .section-hero .card-gold .bgimg {
background-image: url(../images_v3/top/hero/gold/hero-bg.jpg);
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .card-gold .bgimg {
background-image: url(../images_v3/top/hero/gold/hero-bg-m2x.png);
}
}
.page--top .section-hero .card-gold .btn a {
background-color: #E0AA5A;
}
.page--top .section-hero .card-gold .btn a:hover {
background-color: #d8942f;
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .card-gold .btn a:hover {
background-color: #E0AA5A;
}
}
.page--top .section-hero .card-blue .bgimg {
background-image: url(../images_v3/top/hero/blue/hero-bg.jpg);
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .card-blue .bgimg {
background-image: url(../images_v3/top/hero/blue/hero-bg-m2x.png);
}
}
.page--top .section-hero .card-blue .btn a {
background-color: #5097CF;
}
.page--top .section-hero .card-blue .btn a:hover {
background-color: #337eb9;
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .card-blue .btn a:hover {
background-color: #5097CF;
}
}
/* .page--top .section-hero .card-pearl {
color: #111;
} */
.page--top .section-hero .card-pearl .bgimg {
background-image: url(../images_v3/top/hero/pearl/hero-bg.jpg);
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .card-pearl .bgimg {
background-image: url(../images_v3/top/hero/pearl/hero-bg-m2x.png);
}
}
.page--top .section-hero .card-pearl .btn a {
/* color: #111;
background-color: #EAF1F2; */
background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA0xpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzJCM0Y0RjA4RDk4MTFFODkyNkM5RjY0Mjg2OUI3MkEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzJCM0Y0RUY4RDk4MTFFODkyNkM5RjY0Mjg2OUI3MkEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjhlODExMDdkLWQzZTYtZmE0MS05MTgxLTc0ZjVhNWRjODk1YyIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjhlODExMDdkLWQzZTYtZmE0MS05MTgxLTc0ZjVhNWRjODk1YyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PltDrscAAABkSURBVHjaYmBgYCgH4g4GIoALEN8F4jNAbExIsSAQrwLid1AbCIJQqOJVUM14gRIQ74ZqCCXG9HKoYpBHBZnwuBlm9XsoxgDGxIQCyLr/+MJVCWrCO2i4YgVpxAZJGjGBDBBgANZFFnf8d40EAAAAAElFTkSuQmCC);
}
/* .page--top .section-hero .card-pearl .btn a:hover {
background-color: #cbdcdf;
} */
.page--top .section-hero .card-rose .bgimg {
background-image: url(../images_v3/top/hero/rose/hero-bg.jpg);
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .card-rose .bgimg {
background-image: url(../images_v3/top/hero/rose/hero-bg-m2x.jpg);
}
}
@media only screen and (max-width: 767px) {
/* .page--top .section-hero .card-pearl .btn a:hover {
background-color: #EAF1F2;
} */
}
.page--top .section-hero .card-business .bgimg {
background-image: url(../images_v3/top/hero/business/hero-bg.jpg);
}
.page--top .section-hero .card-platinum .bgimg {
background-image: url(../images_v3/top/hero/platinum/hero-bg.jpg);
}
.page--top .section-hero .card-cobalt .bgimg {
background-image: url(../images_v3/top/hero/cobalt/hero-bg.jpg);
}
.page--top .section-hero .card_appeal {
background: rgba(0, 0, 0, 0.58);
width: 100%;
height: 380px;
padding: 70px 30px 80px;
}
/* .page--top .section-hero .card-pearl .card_appeal {
background: rgba(255, 255, 255, 0.6);
} */
/* @media only screen and (max-width: 1000px) {
.page--top .section-hero .card_appeal {
width: 85%;
}
} */
@media only screen and (max-width: 767px) {
.page--top .section-hero .card_appeal {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: transparent;
padding: 15px 0 30px;
position: relative;
}
.page--top .section-hero .card_appeal.hide-small {
display: none;
}
.page--top .section-hero .card_appeal .slide_link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
}
.page--top .section-hero .card_appeal .appeal_area {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
}
.page--top .section-hero .card-cobalt .card_appeal .appeal_area {
justify-content: center;
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .card-business .bgimg {
background-image: url(../images_v3/top/hero/cobalt/hero-bg-m2x.png);
}
.page--top .section-hero .card_appeal .appeal_area {
display: flex;
flex-direction: column;
}
}
.page--top .section-hero .card_appeal .appeal_area .figure {
max-width: 230px;
width: 230px;
margin-right: 20px;
}
@media all and (-ms-high-contrast: none){
.page--top .section-hero .card_appeal .appeal_area .figure img {
max-width: 230px;
width: 230px;
}
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .card_appeal .appeal_area .figure {
margin: 0 auto 25px;
}
}
.page--top .section-hero .card_appeal .appeal_area .appeal_txt h4 {
border-top: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
padding: 5px 0;
}
.page--top .section-hero .card_appeal .appeal_area .appeal_txt p {
font-size: 18px;
margin: 20px 0 0;
}
.page--top .section-hero .card_appeal .appeal_area .appeal_txt span {
font-size: 10px;
color: #fff;
}
/* .page--top .section-hero .card-pearl .card_appeal .appeal_area .appeal_txt span {
color: #111;
} */
/* .page--top .section-hero .card-cobalt .card_appeal {
display: flex;
justify-content: space-between;
align-items: center;
} */
.page--top .section-hero .card_appeal .card_appeal-cp {
width: 60%;
margin: 0 auto;
position: relative;
}
.page--top .section-hero .card_appeal .card_appeal-cp .slide_link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100;
}
.page--top .section-hero .card.card-cobalt .figure img {
box-shadow: none;
}
.page--top .section-hero .card-cobalt .card_appeal .cp_appeal {
width: 40%;
padding: 50px 40px 50px 30px;
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .card-cobalt .card_appeal.hide-small {
display: none;
}
.page--top .section-hero .slick-slide .card-cobalt img.hide-small {
display: none;
}
.page--top .section-hero .card-cobalt .card_appeal .card_appeal-cp {
width: 100%;
}
.page--top .section-hero .card-cobalt .card_appeal .cp_appeal {
width: 100%;
padding: 0;
}
}
.page--top .section-hero .lead {
margin-bottom: 1.5em;
}
.page--top .section-hero .btn {
margin-top: 1em;
}
.page--top .section-hero .card-business .btn {
margin-top: 0;
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .btn {
margin: 0 10%;
}
}
.page--top .section-hero .btn a {
color: #fff;
display: block;
max-width: 350px;
margin: 0 auto;
font-size: 1.6rem;
padding: 12px 0;
position: relative;
overflow: hidden;
border: 1px solid #555555;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAb0lEQVQYlY3QQRXDMAwEUbsMTKEUQiEUQqEUTCFYQqEUQqEUEgi/F/VWP1nn0a40BR17yQYrPjixZHDDgQt9Jn0L+EDL4CfesbDNpPeAd7TH6OZSyq/6rrXe/6AltRB1hl7jgTNuWkfQa0pJgKnkL5x6jgI+//S1AAAAAElFTkSuQmCC);
background-repeat: no-repeat;
background-position: 95% 50%;
-webkit-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
background-color: #050A0D;
}
.page--top .section-hero .card-business .btn a,
.page--top .section-hero .card-platinum .btn a {
max-width: 300px;
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .btn a {
padding: 8px 0;
font-size: 1.3rem;
}
}
.page--top .section-hero .btn a:before {
display: block;
position: absolute;
left: -30%;
top: -100%;
content: "";
width: 10%;
height: 300%;
opacity: .8;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background: -webkit-gradient(linear, left top, right bottom, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.8)), color-stop(60%, rgba(255, 255, 255, 0)));
background: linear-gradient(to right bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 60%);
-webkit-animation: shiny 2s ease infinite;
animation: shiny 2s ease infinite;
}
.page--top .section-hero .btn a:hover {
background-color: #1a1a1a;
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .btn a:hover {
background-color: #050A0D;
}
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .payments {
font-size: 1.4rem;
}
}
.page--top .section-hero .thumb {
padding: 15px 0 50px;
background-color: #f0f0f0;
}
.page--top .section-hero .thumb .headline {
color: #7d7d7d;
margin-bottom: 0;
}
.page--top .section-hero .thumb .headline .ttl_line,
.page--top .section-hero .thumb-slider li.wide .ttl_line,
.card_t_headline .ttl_line {
position: relative;
text-align: center;
color: #7d7d7d;
}
.page--top .section-hero .thumb .headline .ttl_line span,
.page--top .section-hero .thumb-slider li.wide .ttl_line span,
.card_t_headline .ttl_line span {
position: relative;
z-index: 2;
display: inline-block;
margin: 0 2.5em;
padding: 0 1em;
background-color: #fafafa;
text-align: left;
}
.card_t_headline .ttl_line span {
background-color: #fff;
margin: 0;
}
.page--top .section-hero .thumb .headline .ttl_line:before,
.page--top .section-hero .thumb-slider li.wide .ttl_line:before,
.card_t_headline .ttl_line:before {
position: absolute;
top: 50%;
z-index: 1;
content: '';
display: block;
width: 100%;
height: 1px;
background: linear-gradient(to right, #fafafa, #d0d0d0, #d0d0d0, #d0d0d0, #d0d0d0, #d0d0d0, #d0d0d0, #d0d0d0, #fafafa);
}
.page--top .section-hero .thumb .headline .business {
width: 20%;
float: right;
}
.page--top .section-hero .thumb .headline .personal {
float: left;
width: 80%;
}
.card_t_headline,
.card_t_headline .line_none {
border: none;
}
th.line_none2 {
border-top: none;
}
.card_t_headline th.line_none {
border-right: 1px #eaeaea solid;
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .thumb {
padding: 10px 0 25px;
/* background-color: #fff; */
}
.page--top .section-hero .thumb .row {
padding: 0 20px;
}
.page--top .section-hero .thumb .headline .personal {
float: none;
width: 100%;
margin-bottom: 2em;
}
.page--top .section-hero .thumb .headline .ttl_line span,
.page--top .section-hero .thumb-slider li.wide .ttl_line span {
background-color: #fff;
}
}
.page--top .section-hero .thumb-slider {
/*display: -webkit-box;
display: -ms-flexbox;
display: flex;*/
border-right: 1px solid #e6e6e6;
}
.page--top .section-hero .thumb-slider:after {
content: "";
display: table;
clear: both;
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .thumb-slider {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.page--top .section-hero .thumb-slider li {
border-left: 1px solid #e6e6e6;
cursor: pointer;
opacity: 1;
-webkit-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
width: 20%;
float: left;
position: relative;
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .thumb-slider li {
-webkit-transition-duration: 0s;
transition-duration: 0s;
width: 50%;
text-align: center;
padding: 10px 0;
margin: 0 0 10px;
}
.page--top .section-hero .thumb-slider li.wide {
width: 100%;
}
.page--top .section-hero .thumb-slider li img {
/* height: 50px; */
width: auto;
}
.page--top .section-hero .thumb-slider li.wide img {
max-width: 50%;
max-width: 100%;
}
}
.page--top .section-hero .thumb-slider li:hover {
opacity: 0.7;
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .thumb-slider li:hover {
opacity: 1;
}
}
.page--top .section-hero .slick-slide img {
display: inline;
}
.page--top .section-hero .slick-slide img.show-small {
display: none;
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .slick-slide img.pc {
display: none;
}
}
@media only screen and (min-width: 768px) {
.page--top .section-hero .slick-slide img.sp {
display: none;
}
}
.page--top .section-hero .thumb-slider li .sub {
position: absolute;
bottom: -2.5em;
left: 0;
width: 100%;
text-align: center;
background: -webkit-linear-gradient(left, rgba(116, 116, 116,0) 0%,rgba(116, 116, 116,0.45) 9%,rgba(116, 116, 116,1) 20%,rgba(116, 116, 116,1) 40%,rgb(116, 116, 116) 80%,rgba(116, 116, 116,0.45) 91%,rgba(116, 116, 116,0) 100%);
background: linear-gradient(to right, rgba(116, 116, 116, 0) 0%,rgba(116, 116, 116,0.45) 9%,rgba(116, 116, 116,1) 20%,rgba(116, 116, 116,1) 40%,rgba(116, 116, 116,1) 80%,rgba(116, 116, 116,0.45) 91%,rgba(116, 116, 116,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a08f59', endColorstr='#009e8d57',GradientType=1 );
color: #fff;
font-weight: bold;
font-size: 12px;
}
@media only screen and (max-width: 768px) {
.page--top .section-hero .thumb-slider li .sub {
bottom: inherit;
top: -1em;
left: calc(50% - 65px);
width: 130px;
font-size: 11px;
}
}
.page--top .section-members .panel {
text-align: center;
}
.page--top .section-members .panel dl dt {
font-weight: bold;
font-size: 2.2rem;
}
.page--top .section-members .panel .privilege {
padding-top: 10px;
margin-top: 10px;
border-top: 1px solid #ccc;
font-weight: bold;
font-size: 1.8rem;
}
.page--top .section-members .panel .privilege p {
margin-bottom: 0;
}
.page--top .section-other .headline__title {
font-size: 2.7rem;
}
.page--top .section-other ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
font-size: 1.2rem;
}
.page--top .section-other ul li {
margin: 0 35px;
}
.page--top .section-other .btn {
text-align: center;
}
.page--top .section-other .btn a {
display: inline-block;
border: 1px solid #111;
padding: 1em 4em;
font-size: 1.4rem;
}
.page--top .section-type {
background-color: #F6F6F6;
padding: 0 60px;
}
.page--top .section-type .medium-7{
position: relative;
height: 405px;
}
/* .page--top .section-type .section-content:last-child .medium-7{height: 331px;} */
.page--top .section-type .medium-7>.block__content{position: absolute;bottom: 0;}
@media only screen and (max-width: 767px) {
.page--top .section-type .medium-7{height:auto;padding-top:20px;}
.page--top .section-type .section-content:last-child .medium-7{height:auto;}
.page--top .section-type .medium-7>.block__content{position:relative;}
}
#select_card_area {
color: #555;
}
#select_card_area .select_card_switch {
margin-top: -45px;
padding: 0 28px;
}
#select_card_area .select_card_switch ul {
display: flex;
flex-wrap: wrap;
background-color: #f0f0f0;
border-radius: 5px;
z-index: 100;
position: relative;
}
#select_card_area .select_card_switch .SwitchBtn {
width: calc(100% / 6);
padding: 72px 0 15px;
position: relative;
/* background-color: #fafafa; */
font-size: 13px;
line-height: 1.15;
font-weight: bold;
}
#select_card_area .select_card_switch .SwitchBtn {
float: left\9;
width: 16.5%\9;
}
@media all and (-ms-high-contrast: none){
#select_card_area .select_card_switch .SwitchBtn {
width: 16%;
}
}
@supports (-ms-ime-align: auto) {
#select_card_area .select_card_switch .SwitchBtn {
width: 16.5%;
}
}
#select_card_area .select_card_switch .SwitchBtn#PopularityCardSwitch {
background: url(../images_v3/top/hero/switch_ico01.png) no-repeat center 24px;
}
#select_card_area .select_card_switch .SwitchBtn#PopularityCardSwitch.active_tab {
background: url(../images_v3/top/hero/switch_ico01_active.png) no-repeat center 24px;
}
#select_card_area .select_card_switch .SwitchBtn#IndividualCardSwitch {
background: url(../images_v3/top/hero/switch_ico02.png) no-repeat center 24px;
}
#select_card_area .select_card_switch .SwitchBtn#IndividualCardSwitch.active_tab {
background: url(../images_v3/top/hero/switch_ico02_active.png) no-repeat center 24px;
}
#select_card_area .select_card_switch .SwitchBtn#BusinessCardSwitch {
background: url(../images_v3/top/hero/switch_ico03.png) no-repeat center 24px;
}
#select_card_area .select_card_switch .SwitchBtn#BusinessCardSwitch.active_tab {
background: url(../images_v3/top/hero/switch_ico03_active.png) no-repeat center 24px;
}
#select_card_area .select_card_switch .SwitchBtn#StudentCardSwitch {
background: url(../images_v3/top/hero/switch_ico04.png) no-repeat center 24px;
}
#select_card_area .select_card_switch .SwitchBtn#StudentCardSwitch.active_tab {
background: url(../images_v3/top/hero/switch_ico04_active.png) no-repeat center 24px;
}
#select_card_area .select_card_switch .SwitchBtn#MileCardSwitch {
background: url(../images_v3/top/hero/switch_ico05.png) no-repeat center 24px;
}
#select_card_area .select_card_switch .SwitchBtn#MileCardSwitch.active_tab {
background: url(../images_v3/top/hero/switch_ico05_active.png) no-repeat center 24px;
}
#select_card_area .select_card_switch .SwitchBtn#StatusCardSwitch {
background: url(../images_v3/top/hero/switch_ico06.png) no-repeat center 24px;
}
#select_card_area .select_card_switch .SwitchBtn#StatusCardSwitch.active_tab {
background: url(../images_v3/top/hero/switch_ico06_active.png) no-repeat center 24px;
}
#select_card_area .select_card_switch .SwitchBtn.active_tab {
color: #1171cd;
border-bottom: 6px solid #1171cd;
}
#select_card_area .select_card_switch .SwitchBtn .tab_ttl {
/* padding-top: 1em; */
margin: 0;
}
#select_card_area .select_card_switch .SwitchBtn a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent:-999px;
z-index: 2; /* 必要であればリンク要素の重なりのベース順序指定 */
}
@media only screen and (max-width: 767px) {
#select_card_area .select_card_switch {
padding: 0;
margin-top: -25px;
}
#select_card_area .select_card_switch .SwitchBtn {
width: calc(100% / 3);
}
/* #select_card_area .select_card_switch .SwitchBtn:first-child {
width: 100%;
} */
}
#select_card_area .select_card_switch .SwitchBtn:hover {
opacity: 0.7;
cursor: pointer;
transition: all .5s;
}
#select_card_area .select_card_switch .SwitchBtn:not(:last-child):after {
content: "";
width: 1px;
height: 5em;
background: #ccc;
position: absolute;
top: 24px;
right: 0;
}
@media only screen and (max-width: 767px) {
#select_card_area .select_card_switch .SwitchBtn:nth-child(3):after {
display: none;
}
}
#select_card_area .card_variation_list {
display: flex;
justify-content: space-around;
align-items: flex-end;
flex-wrap: wrap;
margin: 0 auto;
text-align: center;
}
#select_card_area .card_variation_list li {
width: 22%;
text-align: left;
padding-top: 35px;
}
#select_card_area .card_variation_list li {
width: 25%\9;
float: left\9;
}
#select_card_area .card_variation_list li:not(:last-child) {
padding: 35px 1% 0 1%\9;
}
@media only screen and (max-width: 767px) {
#select_card_area .card_variation_list {padding-top: 35px;}
#select_card_area .card_variation_list li:first-child {
border-top: 1px solid #ccc;
}
#select_card_area .card_variation_list li {
text-align: center;
width: 100%;
padding: 15px 10px;
border-bottom: 1px solid #ccc;
}
#select_card_area .card_variation_list li.NullBlock {
padding: 0;
border-bottom: none;
}
#select_card_area .card_variation_list li figure {
text-align: center;
padding: 0 5%;
}
#select_card_area .card_variation_list li figure img {
width: 144px;
}
}
#select_card_area .card_variation_list li .card_type,
.card_lineup .thumb_lineup .card_type {
display: inline-block;
font-size: 10px;
border-radius: 5px;
border: 1px solid #122238;
line-height: 1;
padding: 5px 10px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
#select_card_area .card_variation_list li .card_type.pearsonal,
.card_lineup .thumb_lineup .card_type.pearsonal {
color: #122238;
background: none;
}
#select_card_area .card_variation_list li .card_type.business,
.card_lineup .thumb_lineup .card_type.business {
color: #f0f0f0;
background: #122238;
}
#select_card_area .card_variation_list li figcaption {
text-align: center;
font-size: 12px;
line-height: 1.2;
font-weight: bold;
padding: 12px 0 5px;
border-bottom: 1px #ccc solid;
height: 5em;
}
#select_card_area .card_variation_list li .card_price {
font-size: 10px;
line-height: 1.3;
font-weight: bold;
color: #747474;
text-align: center;
padding: 5px 0;
height: 5em;
}
#select_card_area .card_variation_list li .card_price .red {
color: #ff0000;
}
#select_card_area .card_variation_list li .btn_area .next_btn{
display: block;
box-shadow: 0px 3px 2px 0px #b4b4b4;
-webkit-box-shadow: 0px 3px 2px 0px #b4b4b4;
-moz-box-shadow: 0px 3px 2px 0px #b4b4b4;
border-radius: 25px;
text-align: center;
padding: 5px 0;
font-size: 12px;
font-weight: bold;
}
#select_card_area .card_variation_list li .btn_area .next_btn.entry_btn {
background-color: #1171cd;
color: #fff;
}
#select_card_area .card_variation_list li .btn_area .next_btn.service_btn {
background-color: #fff;
color: #373737;
margin-top: 7px;
border: 1px solid #b4b4b4;
}
#select_card_area .card_variation_list li#MileNote {
font-size: 12px;
font-weight: bold;
border: 2px solid #1171cd;
padding: 1em;
}
#select_card_area .card_variation_list li#MileNote {
margin-top: 28%\9;
}
#select_card_area .card_variation_list li#MileNote p {
margin: 0;
}
@media only screen and (max-width: 767px) {
#select_card_area .card_variation_list li {
position: relative;
}
#select_card_area .card_variation_list li .card_type {
margin-bottom: 5px;
position: absolute;
left: 0;
top: 15px;
padding: 3px;
}
}
.card_lineup {
background: #fff;
}
.card_lineup h3 {
color: #202022;
font-size: 21px;
padding: 30px 0;
letter-spacing: 0.5em;
}
.card_lineup .thumb_lineup {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 40px;
flex-wrap: wrap;
}
.card_lineup .thumb_lineup li {
width: 13%;
text-align: left;
}
/* .card_lineup .thumb_lineup li {
float: left\9;
width: 14.5%\9;
margin: 0 1%\9;
} */
.card_lineup .thumb_lineup li a {
display: block;
}
@media only screen and (max-width: 767px) {
.card_lineup h3 {
font-size: 16px;
}
.card_lineup .thumb_lineup li {
width: 50%;
padding-bottom: 12px;
}
.card_lineup .thumb_lineup li:nth-child(odd) {
padding-right: 8px;
}
.card_lineup .thumb_lineup li:nth-child(even) {
padding-left: 8px;
}
}
/*------------------------------------------------------------
header_content version 3 no1
------------------------------------------------------------*/
.page--top .section-type .type__content .mincho {font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;}
.page--top .section-type .type__content.bold{font-weight: bold;}
.page--top .section-type .type__content.page--top .section-type .type__content .area-no1-inner{
padding: 17px 0 0;
background: none;
}
.page--top .section-type .type__content .area-no1-inner .area-no1-inner-inner{
max-width: 100%;
width: 100%;
margin: 0 auto;
display: block;
text-align: center;
}
.page--top .section-type .type__content .area-no1-inner .logo{
display: block;
padding: 0;
width: 250px;
margin: 0 auto 10px;
}
.page--top .section-type .type__content .area-no1-inner .logo img{width: 100%;}
@media only screen and (max-width: 767px) {
.page--top .section-type .type__content .area-no1-inner .logo{width: 150px;}
}
/**/.page--top .section-type .type__content .area-no1-inner .copy{
max-width: 22em;
margin: 0 auto;
color: #000;
padding: 0.2em 0;
text-shadow:0px 0px 10px #FFF;
background: -webkit-linear-gradient(left, rgba(160,143,89,0) 0%,rgba(160,143,89,0.45) 9%,rgba(187,173,127,1) 20%,rgba(237,227,196,1) 40%,rgba(175,160,111,1) 80%,rgba(158,141,87,0.45) 91%,rgba(158,141,87,0) 100%);
background: linear-gradient(to right, rgba(160,143,89,0) 0%,rgba(160,143,89,0.45) 9%,rgba(187,173,127,1) 20%,rgba(237,227,196,1) 40%,rgba(175,160,111,1) 80%,rgba(158,141,87,0.45) 91%,rgba(158,141,87,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a08f59', endColorstr='#009e8d57',GradientType=1 );
text-align: center;
}
.page--top .section-type .type__content .area-no1-inner .text{padding: 0; margin-bottom: 30px;}
.page--top .section-type .type__content .area-no1-inner .text ul{
font-size: 10.5px;
text-align: left;
margin: 10px 0;
padding: 0;
}
.page--top .section-type .type__content .area-no1-inner .text ul li{
text-indent: -1em;
padding-left: 1em;
font-weight: normal;
letter-spacing: -0.1em;
}
.page--top .section-type .type__content .area-no1-inner .text ul li {
letter-spacing: -0.11em\9;
}
@media all and (-ms-high-contrast: none){
.page--top .section-type .type__content .area-no1-inner .text ul li {
letter-spacing: -0.11em; /* IE10以上 */
}
}
@media only screen and (max-width: 768px) {
/* .page--top .section-type .type__content .area-no1-inner {
width: 60%;
margin: 0 auto;
} */
/* .page--top .section-type .type__content .area-no1-inner .logo{
display: block;
padding: 0;
width: 50%;
margin: 0 auto 10px;
} */
.page--top .section-type .type__content .area-no1-inner .text{
display: block;
width: 100%;
margin: 0 auto;
padding: 0px;
}
.page--top .section-type .type__content .area-no1-inner .text ul{margin: 20px 0 0 0;}
.page--top .section-type .type__content .area-no1-inner .text ul li{white-space: normal;}
}
@media (max-width: 1280px) {
.page--top .section-type {
padding: 0 20px;
}
}
@media only screen and (max-width: 767px) {
.page--top .section-type {
padding: 0;
}
}
.page--top .section-type .type__headline {
text-align: center;
position: relative;
}
.page--top .section-type .type__headline .lead {
font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
font-size: 2.8rem;
line-height: 1.4;
margin-bottom: 1em;
position: relative;
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type__headline .lead {
font-size: 2.0rem;
}
}
.page--top .section-type .type__headline .invitation {
position: absolute;
left: 0;
top: 0;
margin-top: -40px;
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type__headline .invitation {
margin-top: 60px;
}
.page--top .section-type .type__headline .invitation img {
width: 110px;
height: auto;
}
}
.page--top .section-type .type__title {
text-align: center;
position: relative;
}
.page--top .section-type .type__title-jp {
text-align: center;
margin-top: -5px;
font-size: 1.3rem;
}
.page--top .section-type .type__title-jp/* IE9以上 */{
/*color: #999\9; /* IE10以下 => 結果的にIE9のみ */
font-size: 1.15rem\9;
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type__title-jp {
font-size: 1.2rem;
}
}
.page--top .section-type .type__title-en {
margin: 20px 0 10px;
}
.page--top .section-type .type__content {
color: #fff;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
height: 590px;
padding-top: 40px;
}
.page--top .section-type .type {
position: relative;
}
.page--top .section-type .type__content:before {
background: inherit;
content: '';
filter: blur(1.5px);
width: 100%;
height: 590px;
position: absolute;
top: 0;
z-index: 0;
}
.page--top .section-type .type-pearl .type__content:before,
.page--top .section-type .type-rose .type__content:before {
background: rgba(0, 0, 0, 0.5);
}
.page--top .section-type .type__content .row {
z-index: 1;
position: relative;
}
.page--top .section-type .type__content.expand {
height: 670px;
}
.btn .cs2 {
background-color: #003F99;
color: #fff;
}
.btn .cs2:hover {
background-color: #0049b0;
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type__content.expand {
height: auto;
}
.page--top .section-type .type__content {
height: auto;
padding-bottom: 35px;
}
}
.page--top .section-type .type__content .block__headline {
max-width: 345px;
z-index: 0;
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type__content .block__headline {
margin: 0 auto;
}
}
/*.page--top .section-type .type__content .block__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}*/
.page--top .section-type .type__content .block__content {
width: 100%;
}
.page--top .section-type .type__content .strong {
font-size: 2.6rem;
margin-bottom: 1.25em;
}
.page--top .section-type .type-cobalt .type__content .strong,
.page--top .section-type .type-pearl .type__content .strong,
.page--top .section-type .type-rose .type__content .strong {
color: #FFF;
/* text-shadow:0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 30px #fff; */
}
.page--top .section-type .type-cobalt .type__content .txt,
.page--top .section-type .type-pearl .type__content .txt,
.page--top .section-type .type-rose .type__content .txt {
text-shadow:0px 0px 10px #000,0px 0px 10px #000,0px 0px 10px #000;
color: #fff;
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type-cobalt .type__content .strong {
text-shadow:none;
}
.page--top .section-type .type-cobalt .type__content .txt,
.page--top .section-type .type-pearl .type__content .txt,
.page--top .section-type .type-rose .type__content .txt {
color: #FFF;
/* color: #000;
text-shadow:0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 30px #fff; */
}
}
.page--top .section-type .type__content .block__content .sbsonly-cp {
text-align: center;
padding-bottom: 30px;
}
.page--top .section-type .type__content .block__content .sbsonly-cp img {
width: 100%;
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type__content .strong {
text-align: center;
font-size: 1.8rem;
margin-bottom: 1em;
line-height: 1.4;
}
.page--top .section-type .type-pearl .type__content .strong {
color: #fff;
}
.page--top .section-type .type-pearl .type__content .txt {
color: #fff;
}
/* .page--top .section-type .type-pearl .type__content .panel p {
color: #fff;
} */
}
.page--top .section-type .type__content .txt {
line-height: 1.8;
margin-bottom: 2em;
font-size: 1.5rem;
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type__content .txt {
margin: 1.5em 0;
font-size: 1.2rem;
}
}
.page--top .section-type .type__content .panel {
text-align: center;
border: 1px solid #929292;
background-color: rgba(24, 51, 70, 0.1);
height: 75px;
/*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;*/
width: 100%;
font-size: 1.5rem;
}
.page--top .section-type .type__content .panel{padding-top: 1em;}
.page--top .section-type .type__content .panel.top_irr {padding-top: 1.75em;}
@media only screen and (max-width: 767px) {
.page--top .section-type .type__content .panel {
font-size: 1.2rem;
height: auto;
padding: 1em 0;
}
.page--top .section-type .type-business .type__content .panel {
height: calc(60px + 1em);
}
}
.page--top .section-type .type__content .panel p {
margin-bottom: 0;
line-height: 1.4;
}
@media only screen and (max-width: 767px) {
.page--top .section-type .section-content:nth-child(3) .panel p {letter-spacing:-0.03em;}
}
.page--top .section-type .type__content .figure {
text-align: center;
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type__content .figure {
width: 80%;
margin: 0 auto;
}
}
.page--top .section-type .type__content .figure .shadow {
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
border-radius: 15px;
}
.page--top .section-type .type__content .link {
padding: 0;
margin-bottom: 1.5em;
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type__content .link {
text-align: center;
}
}
.page--top .section-type .type__content .link a {
color: #fff;
font-size: 1.5rem;
font-weight: bold;
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type__content .link a {
font-size: 1.3rem;
}
}
.page--top .section-type .btn a, .page--top .section-type .link a {
font-size: 1.7rem;
padding: 12px 0;
margin: 0;
}
.page--top .section-type .btn.blue a {
line-height: 1.2;
}
.page--top .section-type .btn a .span_small {
font-size: 1.4rem;
}
@media only screen and (max-width: 767px) {
.page--top .section-type .btn a, .page--top .section-type .link a {
padding: 10px 0;
}
}
.page--top .section-type .btn .member, .page--top .section-type .link .member {
background-color: #000;
color: #fff;
border: 1px solid #929292;
padding: 1em 0;
}
@media only screen and (max-width: 767px) {
.page--top .section-type .btn .member, .page--top .section-type .link .member {
font-size: 1.2rem;
}
}
.page--top .section-type .btn li {
margin-top: 7px;
}
.page--top .section-type .type-cobalt .type__content {
background-image: url(../images_v3/top/hero/cobalt/hero-bg-bk.jpg);
color: #111;
/* text-shadow:0px 0px 20px #222; */
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type-cobalt .type__content {
background-image: url(../images_v3/top/hero/cobalt/hero-bg-m2x.png);
background-position: 70% top;
}
.page--top .section-type .type__content:before {
display: none;
}
}
.page--top .section-type .type-gold .type__content {
background-image: url(../images_v3/top/hero/gold/hero-bg.jpg);
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type-gold .type__content {
background-image: url(../images_v3/top/hero/gold/hero-bg-m2x.png);
}
}
.page--top .section-type .type-blue .type__content {
background-image: url(../images_v3/top/hero/blue/hero-bg.jpg);
}
.page--top .section-type .type-blue .type__content .cs2 {
padding: 1.25em 0;
}
.page--top .section-type .type-blue .type__content .btn-split {
/*display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;*/
}
.page--top .section-type .type-blue .type__content .btn-split:after {
content: "";
display: table;
clear: both;
}
.page--top .section-type .type-blue .type__content .btn-split>a{float: left;}
.page--top .section-type .type-blue .type__content .btn-split>a:last-child{float: right;}
.page--top .section-type .type-blue .type__content .btn-split a {
width: 49%;
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type-blue .type__content {
background-image: url(../images_v3/top/hero/blue/hero-bg-m2x.png);
}
}
.page--top .section-type .type-rose .type__content {
color: #111;
background-image: url(../images_v3/top/hero/rose/hero-bg.jpg);
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type-rose .type__content {
background-image: url(../images_v3/top/hero/rose/hero-bg-m2x.jpg);
}
}
.page--top .section-type .type-pearl {
color: #111;
}
.page--top .section-type .type-pearl .type__content {
color: #111;
background-image: url(../images_v3/top/hero/pearl/hero-bg.jpg);
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type-pearl .type__content {
background-image: url(../images_v3/top/hero/pearl/hero-bg-m2x.png);
}
}
.page--top .section-type .type-pearl .type__content .panel,
.page--top .section-type .type-cobalt .type__content .panel,
.page--top .section-type .type-rose .type__content .panel {
background-color: rgba(255, 255, 255, 0.5);
}
.page--top .section-type .type-business .type__content {
background-image: url(../images_v3/top/hero/business/hero-bg.jpg);
}
.page--top .section-type .type-business .type__content .txt {
margin-bottom: 1em;
}
.page--top .section-type .type-platinum .type__content {
/* padding-top: 80px; */
background-image: url(../images_v3/top/type/platinum-bg.jpg);
position: relative;
}
/* .page--top .section-type .type-platinum .type__content .btn a {
background-color: #050A0D;
}
.page--top .section-type .type-platinum .type__content .btn a:hover {
background-color: #1a1a1a;
} */
@media only screen and (max-width: 767px) {
.page--top .section-type .type-platinum .type__content .btn a:hover {
background-color: #050A0D;
}
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type-platinum .type__content {
padding-top: 50px;
}
}
.page--top .section-type .type-platinum .type__content .invitation {
position: absolute;
top: -20px;
left: 0;
}
@media only screen and (max-width: 767px) {
.page--top .section-type .type-platinum .type__content .invitation {
top: -10px;
}
.page--top .section-type .type-platinum .type__content .invitation img {
height: 40px;
}
}
#pagetop {
position: fixed;
z-index: 9999;
display: none;
right: 0px;
bottom: 0px;
}
@media only screen and (max-width: 767px) {
#pagetop {
right: 10px;
bottom: 10px;
display: none !important;
}
}
#pagetop a {
display: block;
width: 56px;
height: 56px;
background-image: url(../img/common/pagetop.png);
background-size: cover;
}
@media only screen and (max-width: 767px) {
#pagetop a {
width: 40px;
height: 40px;
}
}
#pagetop.pinned {
position: fixed;
}
.footer {
padding: 60px 60px 0;
}
@media only screen and (max-width: 767px) {
.footer {
padding: 20px 10px 0;
}
}
@media only screen and (max-width: 767px) {
.footer__company .row {
padding: 0;
}
}
.footer__company .fc-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media only screen and (max-width: 767px) {
.footer__company .fc-info {
position: relative;
display: block;
}
}
@media only screen and (max-width: 767px) {
.footer__company .fc-info__logo {
position: absolute;
top: 0;
left: 0;
}
.footer__company .fc-info>div.fc-info__logo{padding-top: 0;}
}
.footer__company .fc-info__leagal {
font-size: 1.0rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
@media only screen and (min-width: 768px) {
.footer__company .fc-info{display: block;}
.footer__company .fc-info:after {
content: "";
display: table;
clear: both;
}
.footer__company .fc-info>div.fc-info__logo{float: left;padding-top: 18px;}
.footer__company .fc-info>div.fc-info__leagal{float: right;}
.footer__company .fc-info__leagal{display: block;}
.footer__company .fc-info__leagal:after {
content: "";
display: table;
clear: both;
}
.footer__company .fc-info__leagal>div.pmark{float: right;padding-top: 0;}
.footer__company .fc-info__leagal>div.copyright{float: left;padding-top: 7px;}
}
@media only screen and (max-width: 767px) {
.footer__company .fc-info__leagal {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
display: block;
text-align: right;
}
.footer__company .fc-info__leagal .pmark img {
width: 60px;
}
.footer__company .fc-info__leagal>div.copyright{padding-top:0;}
}
.footer__company .fc-info .copyright {
text-align: right;
padding-right: 2em;
margin-bottom: 0;
}
.footer__company .fc-info .copyright__jp {
margin: 0;
}
@media only screen and (max-width: 767px) {
.footer__company .fc-info .copyright {
text-align: left;
}
}
.footer__nav {
text-align: center;
border-top: dotted #ccc 1px;
margin-top: 20px;
padding-top: 20px;
padding-bottom: 40px;
font-size: 1.2rem;
}
@media only screen and (max-width: 767px) {
.footer__nav {
font-size: 1.1rem;
}
.footer__nav .row {
padding: 0;
}
}
.footer__nav span {
margin: 0 0.5em;
}
.footer__nav a {
color: #4651c3;
text-decoration: underline;
}
.footer__nav a:hover {
text-decoration: none;
}
@media only screen and (max-width: 767px) {
.footer__nav a:hover {
text-decoration: underline;
}
}
@media only screen and (max-width: 767px) {
#feature .grid-margin-x > .cell{
border-bottom: 1px solid #d8d8d8;
}
}
@media only screen and (max-width: 768px) {
#navbox{
background: #cdcdcd;
padding-bottom: 0;
}
.sidenav .head-menu .menu {margin-bottom: 0;}
.sidenav .service-menu,
.sidenav .foot-menu{
padding: 10px;
background-color: #cdcdcd;
}
.sidenav .service-menu + .foot-menu{padding-top: 0px;}
.sidenav .head-menu li,
.sidenav .foot-menu li{
font-size: 1.6rem;
font-weight: bold;
border-bottom: 1px solid #dbdbdb;
background: rgb(243,243,243);
background: linear-gradient(0deg, rgba(243,243,243,1) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 100%);
cursor: pointer;
}
.sidenav .list-item > a::after,
.sidenav .list-item > a.active::after{border-color: #736c6a;}
.sidenav .head-menu li > a::after,
.sidenav .foot-menu li > a::after{
position: absolute;
top: -3px;
bottom: 0;
margin: auto;
content: "";
vertical-align: middle;
right: 15px;
width: 10px;
height: 10px;
border-top: 1px solid #736c6a;
border-right: 1px solid #736c6a;
-ms-transform: rotate(135deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sidenav .head-menu li.listhead-nolink,
.sidenav .foot-menu li.listhead-nolink{
background: #0b457e;
padding: 14px;
font-size: 1.8rem;
font-weight: bold;
text-align: center;
color: #FFF;
text-transform: uppercase;
}
.sidenav .service-menu li.listhead-nolink{background-color:#6B6B6B;}
.sidenav .service-menu li.listhead-nolink span{
padding-left:63px;
height: 53px;
line-height: 1.2;
font-weight: bold;
text-align: center;
color: #FFF;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
}
.sidenav .service-menu .menu > li a{padding: 9px 14px;}
.sidenav .foot-menu li.listhead-nolink{
background: #6B6B6B;
padding: 14px 0;
font-size: 1.4rem;
}
/*.sidenav .foot-menu li.listhead-nolink span{letter-spacing: -0.3em;margin-left: -0.3em;}*/
.sidenav .foot-menu li{background:linear-gradient(0deg, rgba(243,243,243,1) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 100%);}
.sidenav .foot-menu li a{padding-left:73px;}
.sidenav .thumb{
background-repeat: no-repeat;
background-position: 10px 50%;
background-size: 53px 34px;
}
.service-menu .menu .listhead a{font-weight: bold;}
#pearl .service-menu .menu .listhead a {background-color: #A2A2A2;}
#blue .service-menu .menu .listhead a {background-color: #A2A2A2;}
#gold .service-menu .menu .listhead a {background-color: #A2A2A2;}
#business .service-menu .menu .listhead a {background-color: #A2A2A2;}
#platinum .service-menu .menu .listhead a {background-color: #A2A2A2;}
#sbs .service-menu .menu .listhead a {background-color: #A2A2A2;}
.sidenav .thumb.gold{background-image:url(../images_v3/top/comparison/card-gold.png);}
.sidenav .thumb.blue{background-image:url(../images_v3/top/comparison/card-blue.png);}
.sidenav .thumb.pearl{background-image:url(../images_v3/top/comparison/card-pearl.png);}
.sidenav .thumb.business{background-image:url(../images_v3/top/comparison/card-business.png);}
.sidenav .thumb.platinum{background-image:url(../images_v3/top/comparison/card-platinum.png);}
.sidenav .thumb.cobalt{background-image:url(../cobalt/images/card-cobalt.png);}
.sidenav .thumb.rose{background-image:url(/amex/rose/images/common_card-rose.png);}
}
@media only screen and (max-width: 374px) {
.sidenav .service-menu li.listhead-nolink{font-size: 1.3rem;}
}
@media only screen and (max-width: 767px) {
.page--top .section-hero .card-cobalt .bgimg {
background: url(../images_v3/top/hero/cobalt/hero-bg-m2x.png);
}
.page--top .section-hero .card-campaign .bgimg {
background-image: url(../images_v3/top/hero/campaign/hero-bg-m2x.png);
}
.page--top .section-hero .card-business .bgimg {
background: url(../images_v3/top/hero/business/hero-bg-m2x.png);
}
.page--top .section-hero .card-platinum .bgimg {
background: url(../images_v3/top/hero/platinum/hero-bg-m2x.png);
}
.page--top .section-hero .card-gold .bgimg {
background: url(../images_v3/top/hero/gold/hero-bg-m2x.png);
}
.page--top .section-hero .card-blue .bgimg {
background: url(../images_v3/top/hero/blue/hero-bg-m2x.png);
}
.page--top .section-hero .card-pearl .bgimg {
background: url(../images_v3/top/hero/pearl/hero-bg-m2x.png);
}
.page--top .section-hero .card .bgimg {
background-repeat: no-repeat;
background-size: cover;
}
}
.page--top .appeal_video {
text-align: center;
}
.page--top .appeal_video video {
width: 640px;
}
@media only screen and (max-width: 767px) {
.page--top .appeal_video video {
width: 100%;
}
}
/* 201126 */
#btn-modal-close {
background-color:#464646 !important;
border-bottom: 1px solid #d7d7d7 !important;
}
@media only screen and (min-width: 768px) {
.page--top #comparison .grid-x {
justify-content: center;
}
.page--top #featured-cards .feature__data:nth-child(3),
.page--top #featured-cards .feature__data:last-child {
border-right: none;
}
.page--top #featured-cards .feature__data:nth-child(-n+3) {
width: 33.3333%;
}
.page--top #featured-cards .feature__data:nth-child(n+4) {
width: 25%;
}
.page--top #featured-cards .feature__data:nth-child(3n) {
border-right: 1px solid #ccc !important;
}
}