@charset "UTF-8";
html,body{height:100%;}
html{scroll-padding-top: 96px;}
body{
-webkit-text-size-adjust: 100%;
padding:0;
margin: 0;
font-family: "Arial", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
font-feature-settings: "palt" 1;
-webkit-font-feature-settings: "palt" 1;
color: #61666C;
min-width: 1080px;
}
.conclude-new-line pre {
font: 16px/1.6 "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
img{
image-rendering: -webkit-optimize-contrast;
}
/* default */
div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,
h6,pre,code,form,fieldset,legend,
input,textarea,p,blockquote,
th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;word-break: break-all;font-size:inherit;width:100%;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q::before,q::after{content:'';}
abbr{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}
pre,code,kbd,samp{font-family:monospace;*font-size:108%;line-height:100%;}
.aligncenter{text-align:center;}
img{vertical-align: bottom;line-height: 1;max-width:100%;}
a{text-decoration: none;color:#000;transition: all .25s ease;}
a:hover{}
*{box-sizing:border-box;}
button{
cursor:pointer;
border:none;
outline: none;
}
p{
line-height: 1.7;
font-size:16px;
color: #61666C;
}
.animation{
transition: all .75s ease;
transform:translate(0,20px);
opacity:0;
}
.animation.on{
transform:translate(0,0px);
opacity:1;
}
@media print {
header, footer, .gotop, .kv-wrapper, .pankuzu, .ul-widget-hide, .ul-widget-main-window, #gnav, .sp{
display: none;
}
}
/* common item ---------------------------------------*/
.clearfix::after,
.inner::after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
@media all and (-ms-high-contrast:none){
.foo { color: green } /* IE10〜Edge */
}
.btn-item {
background-color: #B8C0C7;
border-radius: 100px;
width: 25px;
height: 25px;
line-height: 25px;
color: white;
text-align: center;
cursor: pointer;
font-weight: bold;
transition: 0.3s;
margin-top: 5px;
}
.btn-item:hover {
box-shadow: 0 0 8px #343639;
transition: 0.3s;
}
/* layout ---------------------------------------*/
.wrapper{padding:0 20px;}
.inner{
max-width:1080px;
margin:0 auto;
}
.container{
position:relative;
padding-bottom: 1px;
}
.main{width:720px;}
.side{
width:290px;
position:absolute;
right: 0;
top: 0;
}
.side.is-fixed{
position: fixed;
top: 94px;
right: 50%;
margin-right: -540px;
}
.side.is-fixed.is-bottom{
position:absolute;
top: auto;
right: 0;
bottom: 40px;
margin: 0;
}
.section{margin-bottom: 80px;}
.section:last-child{margin-top: 0;}
.ov-h{overflow: hidden;}
/* banner ---------------------------------------*/
.indexnews-image-stright{
width: 100%;
display: flex;
margin-bottom: 20px;
justify-content: center;
}
.indexnews-image-stright img{
width: 30%;
max-width: 960px;
transition: all 0.25s ease;
display: block;
margin: 0 auto;
}
.indexnews-image-stright img:hover{opacity:0.7;}
/* mypage ---------------------------------------*/
.container-mypage {
position: relative;
display: flex;
flex-direction: column;
width: 90%;
margin: 0 auto;
background-color: #fff;
}
.container-mypage .top-side {
position: relative;
background-color: #fff;
width: 100%;
height: 60px;
}
.container-mypage .bottom-content {
display: flex;
width: 100%;
flex: 1;
margin-bottom: 50px;
}
.container-mypage .left-side {
position: relative;
background-color: #fbfbfb;
width: 27%;
padding: 30px 0 20px 20px;
}
.container-mypage .right-side {
flex: 1;
position: relative;
background-color: #fff;
padding: 0 20px 0 20px;
}
.home-icon,
.customer-icon,
.payment-icon,
.list-icon,
.form-icon,
.help-icon{
color: #0A4A9B;
position: relative;
}
.home-icon:hover{
color: #32A1F5;
text-decoration: underline;
}
.home-icon,
.customer-icon,
.payment-icon,
.list-icon,
.form-icon,
.help-icon{
padding-left: 30px;
margin-top: 25px;
margin-bottom: 5px;
font-size: 20px;
}
.home-icon::before{
content: '';
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fmypage%2Fhome.png);
background-size: 100%;
background-repeat: no-repeat;
width: 22px;
height: 25px;
position: absolute;
top: calc(50% - 12px);
left: 0px;
}
.customer-icon::before{
content: '';
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fmypage%2Fcustomer.png);
background-size: 100%;
background-repeat: no-repeat;
width: 22px;
height: 25px;
position: absolute;
top: calc(50% - 13px);
left: 0px;
}
.payment-icon::before{
content: '';
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fmypage%2Fpayment.png);
background-size: 100%;
background-repeat: no-repeat;
width: 22px;
height: 14px;
position: absolute;
top: calc(50% - 7px);
left: 0px;
}
.list-icon::before{
content: '';
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fmypage%2Flist.png);
background-size: 100%;
background-repeat: no-repeat;
width: 22px;
height: 20px;
position: absolute;
top: calc(50% - 11px);
left: 0px;
}
.form-icon::before{
content: '';
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fmypage%2Fform.png);
background-size: 100%;
background-repeat: no-repeat;
width: 22px;
height: 26px;
position: absolute;
top: calc(50% - 10px);
left: 0px;
}
.help-icon::before{
content: '';
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fmypage%2Fhelp.png);
background-size: 100%;
background-repeat: no-repeat;
width: 22px;
height: 26px;
position: absolute;
top: calc(50% - 10px);
left: 0px;
}
/* header ---------------------------------------*/
header{
position:fixed;
height:94px;
width: 100%;
z-index: 100;
background: #fff;
min-width: 1080px;
}
.is-cart header,
.is-contact header{height:64px;}
/*
header.is-megadropopen{
position:relative;
height:66px;
width: 100%;
padding: 0 20px;
}
*/
.header-tagline{
background: transparent linear-gradient(90deg, #0D84DF 0%, #285CD1 100%) 0% 0% no-repeat padding-box;
padding: 0px 0px;
line-height: 1.0;
color: #fff;
overflow: hidden;
height: 32px;
}
.header-tagline-contact{
float: right;
}
.header-tagline-contact a{
display: inline-block;
color: #fff;
line-height: 1.0;
padding: 8px 20px;
}
.header-tagline-contact a::before{
content:'';
display: inline-block;
vertical-align: middle;
margin-right: 10px;
background: url('/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_mail.png') 0 center no-repeat;
background-size: 100%;
width:20px;
height:18px;
}
.header-tagline-contact a:hover{text-decoration: underline;}
.header-tagline-text{
color:#fff;
margin-left: 20px;
padding-top: 6px;
}
.header-inner{
height:64px;
margin:0 auto;
padding: 0 20px;
position:relative;
background: #fff;
}
.header-logo-wrapper{}
.header-logo{
display: block;
background: url('/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Flogo_header.png') 0 0 no-repeat;
background-size: 121px 40px;
width:121px;
height:40px;
text-indent: -999em;
overflow: hidden;
position: absolute;
left:20px;
top:10px;
}
.header-logo-title{
position:absolute;
left: 150px;
top: 30px;
line-height:1.0;
font-size: 15px;
color: #000000;
}
/* gnav ---------------------------------------*/
.gnav{
position: fixed;
top: 30px;
right: 8px;
z-index: 150;
height: 64px;
}
.is-cart .gnav{top:0;}
.gnav-inner{
display: flex;
flex-wrap: nowrap;
align-items: center;
position:relative;
min-width:1120px;
}
.gnav-list{
font-size:0px;
text-align: center;
}
.gnav-list-item{
display: inline-block;
font-size:14px;
line-height: 66px;
padding: 0 0px;
letter-spacing: 0em;
}
.gnav-mypage{right:0;}
.gnav-mypage .gnav-list-item{margin-left: 10px;}
.gnav-list-item a,
.gnav-list-item span{
display: block;
position: relative;
color: #61666C;
transition: all .25s ease;
padding: 0 20px;
}
.has-megadrop.gnav-list-item a,
.has-megadrop.gnav-list-item span {
padding-right: 30px;
}
.is-blank.gnav-list-item a {
padding-right: 30px;
}
.gnav-list-item a:hover{color: #32A1F5;}
.top-style.gnav-list-item a::after {
content: '';
display: block;
position: absolute;
top: 70%;
right: 0;
transform: translate(0,-50%);
left: 10%;
bottom: -2px;
width: 0%;
height: 4px;
background-color: #32A1F5;
transition: width 0.3s ease;
}
.top-style.gnav-list-item a:hover::after {
width: 80%;
}
.is-blank.gnav-list-item > a::after,
.is-blank.gnav-list-item > span::after{
content: '';
display: block;
width: 10px;
height: 15px;
position: absolute;
top: 50%;
right: 0;
transform: translate(0,-50%);
}
.has-megadrop.gnav-list-item > a::after,
.has-megadrop.gnav-list-item > span::after,
.has-account.gnav-list-item > a::after{
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_headerarrow_bl.png) no-repeat center center;
background-size: 10px;
}
.is-blank.gnav-list-item a::after{
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_blank.png) no-repeat center center;
background-size: 18px;
width: 18px;
height: 18px;
}
.header-contractor {
margin-right: 40px;
position: relative;
height: 66px;
width: 172px;
}
.header-contractor-btn {
background: transparent linear-gradient(90deg, #0D84DF 0%, #285CD1 100%) 0% 0% no-repeat padding-box;
width: 160px;
height: 40px;
display: block;
color: #fff;
text-align: center;
box-sizing: border-box;
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
}
.header-contractor-btn:hover{
background: #32A1F5;
}
.header-contractor-btn::after {
content: '';
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_mypage_white.png) no-repeat center center;
width: 30px;
height: 30px;
position: absolute;
top: 50%;
right: 18px;
transform: translate(0,-50%);
}
.header-contractor-btn span{
display: inline-block;
padding-right: 23px;
line-height: 1.1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
white-space: nowrap;
}
.header-contractor-menu-wrapper{
position:absolute;
right: -55px;
top: 64px;
width: 330px;
padding: 24px;
border-radius:5px;
background: #fff;
border:1px solid #E1E4EB;
box-sizing:border-box;
display: none;
}
.header-contractor-menu-wrapper::before {
content: "";
position: absolute;
top: -18px;
right: 63px;
border: 8px solid transparent;
border-bottom: 10px solid #FFF;
z-index: 2;
}
.header-contractor-menu-wrapper::after {
content: "";
position: absolute;
top: -20px;
right: 62px;
border: 9px solid transparent;
border-bottom: 11px solid #E1E4EB;
z-index: 1;
}
.header-contractor-menu-item:not(:first-child){margin-top: 24px;}
.header-contractor-menu-item a{
display: block;
width: 100%;
color: #fff;
margin: 0 auto;
border-radius: 4px;
padding: 12px;
font-size: 13px;
position: relative;
overflow: hidden;
background: #32A1F5;
z-index: 0;
text-align:center;
}
.header-contractor-menu-item a::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
background: transparent linear-gradient(90deg, #0D84DF 0%, #285CD1 100%) 0% 0% no-repeat padding-box;
transition: all 0.25s ease;
z-index: -1;
}
.header-contractor-menu-item a::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
background: #32A1F5;
transition: all 0.25s ease;
z-index: -2;
}
.header-contractor-menu-item a:hover:before{opacity:0;}
.header-contractor-menu-item p{
font-size:12px;
line-height: 1.5;
color: #61666C;
padding-top: 10px;
}
.header-search {}
.header-search a {
display: block;
height: 66px;
width: 66px;
position: relative;
text-align: center;
}
.header-search a span {
display: inline-block;
border-left: 1px solid #D9D9D9;
width: 21px;
height: 21px;
padding-left: 20px;
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_search.png) no-repeat right center;
background-size: 21px 21px;
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
box-sizing: content-box;
}
.header-search:hover a span,
.header-search a.is-open span {background-image:url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_search_blue.png);}
.header-search a img{width: 100%;}
.header-search-inner{
position:absolute;
right: 0px;
top: 64px;
width: 100%;
max-width: 820px;
padding: 10px;
border-radius:5px;
background: #fff;
border:1px solid #E1E4EB;
box-sizing:border-box;
display: none;
}
.header-search-inner::before {
content: "";
position: absolute;
top: -18px;
right: 23px;
border: 8px solid transparent;
border-bottom: 10px solid #FFF;
z-index: 2;
}
.header-search-inner::after {
content: "";
position: absolute;
top: -20px;
right: 22px;
border: 9px solid transparent;
border-bottom: 11px solid #E1E4EB;
z-index: 1;
}
.header-search-input-wrapper{
display:flex;
justify-content:space-between;
position:relative;
}
.header-search-input-wrapper::before{
display:block;
content:'';
background:url('/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_search_bold.png') no-repeat left top;
background-size:100%;
width:20px;
height:20px;
margin-top:-10px;
position:absolute;
left:20px;
top:50%;
}
.header-search-input{
width: 100%;
border-radius:5px;
border:1px solid #61666C;
padding: 0 0 0 50px;
height: 48px;
line-height: 48px;
font-size:15px;
letter-spacing: 0.1em;
outline: none;
}
.header-search-submit{
width: 66px;
height: 48px;
line-height: 48px;
text-align:center;
color: #fff;
font-size:16px;
cursor: pointer;
background: #0A4A9B;
border-radius:0 5px 5px 0;
}
.header-cart {
width: 80px;
margin-left: 35px;
}
.header-cart a{
display: block;
width: 80px;
height: 64px;
transition: all .25s ease;
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_headercart.png) no-repeat center center;
background-size: 25px;
position:relative;
}
.header-cart a:hover{
background-color: #E8F3FC;
}
.header-cart a > span{
position:absolute;
right: 20px;
top: 13px;
width: 16px;
height: 16px;
font-size:10px;
line-height:16px;
color: #fff;
text-align:center;
white-space: nowrap;
background: #D64141;
border-radius:10px;
}
.header-tel-wrapper{
position:absolute;
right: 30px;
top: 10px;
text-align: right;
line-height:1.0;
}
.header-tel{
display: inline-block;
padding-left: 23px;
position:relative;
font-size:26px;
line-height:1.0;
font-family: Arial;
margin-right: 5px;
}
.header-tel::before{
display:block;
content:'';
background:url('/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_phone.png') no-repeat left top;
background-size:100%;
width:11px;
height:20px;
position:absolute;
left:0;
top:3px;
}
.header-tel-date{
font-size:12px;
line-height:1.0;
padding-top: 5px;
}
.header-account-menu-wrapper{
position:absolute;
top: 64px;
width: 400px;
padding: 24px;
border-radius:5px;
background: #fff;
border:1px solid #E1E4EB;
box-sizing:border-box;
display: none;
right: 20%;
}
.header-account-menu-wrapper::before {
content: "";
position: absolute;
top: -18px;
right: 63px;
border: 8px solid transparent;
border-bottom: 10px solid #FFF;
z-index: 2;
}
.header-account-menu-wrapper::after {
content: "";
position: absolute;
top: -20px;
right: 62px;
border: 9px solid transparent;
border-bottom: 11px solid #E1E4EB;
z-index: 1;
}
.header-account-menu-wrapper a.btn{
color:#fff;
line-height: 48px;
margin: 0 auto 20px;
}
.header-account-menu-wrapper a.btn-simple{
margin: 0 auto 0px;
}
.cover{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* background: rgba(0,0,0,0.5); */
z-index: 100;
display: none;
}
/* megadrop ---------------------------------------*/
.vertical-divider {
width: 1px;
background-color: #7a7b7b;
margin: 0 20px;
}
.megadrop-wrapper {
position: fixed;
top: 93px;
left: 50%;
transform: translate(-50%,0);
z-index: 1;
width: 100%;
max-width: 1080px;
background: #fff;
display: none;
}
.megadrop-service {
min-width: 960px;
}
.has-megadrop-service > a.is-open {
color: #32A1F5;
}
.has-megadrop-service.is-open > a {
color: #32A1F5;
}
.has-megadrop-service.is-open > a::after {
content: '';
display: block;
position: absolute;
top: 70%;
right: 0;
transform: translate(0,-50%);
left: 10%;
bottom: -2px;
height: 4px;
background-color: #32A1F5;
transition: width 0.3s ease;
width: 80%;
}
.is-cart .megadrop-wrapper {
top: 63px;
}
.megadrop{display: none;}
.megadrop-service-inner {
background: #f4f5f6;
display: flex;
justify-content: space-between;
padding: 130px 30px 0 30px;
}
.megadrop-title-wrapper {
width: 208px;
min-height: 188px;
background: transparent linear-gradient(90deg, #0D84DF 0%, #285CD1 100%) 0% 0% no-repeat padding-box;
}
.megadrop-title {
border-bottom: 1px solid #9ABEDD;
}
.is-active.megadrop-title {
}
.megadrop-title a {
display: block;
position: relative;
padding: 18px 32px;
color: rgba(255,255,255,0.43);
font-size: 16px;
transition: all .25s ease;
}
.megadrop-title a:hover {
color: #343639;
background-color: #fff;
}
.is-active.megadrop-title a {
color: #343639;
background-color: #fff;
}
.megadrop-title a:before {
content: "";
display: block;
width: 19px;
height: 19px;
position: absolute;
left: 10px;
top: 50%;
margin-top: -9.5px;
}
.megadrop-title.is-domain a::before {
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_nav_domain_off.png) 50% 0 no-repeat;
background-size: 16px auto;
}
.is-active.megadrop-title.is-domain a:hover::before,
.is-active.megadrop-title.is-domain.is-active a::before {
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_nav_domain_on.png) 50% 0 no-repeat;
background-size: 16px auto;
}
.megadrop-title.is-ssl a::before {
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_nav_ssl_off.png) 50% 0 no-repeat;
background-size: auto 18px;
}
.is-active.megadrop-title.is-ssl a:hover::before,
.is-active.megadrop-title.is-ssl.is-active a:before {
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_nav_ssl_on.png) 50% 0 no-repeat;
background-size: auto 18px;
}
.megadrop-content {
width: calc(100% - 208px);
background: #fff;
display: none;
}
.megadrop-content.is-domain {display: block;}
.megadrop-content.is-ssl {display: block;}
.megadrop-content-inner {
padding: 10px 10px;
}
.megadrop-content-toplink {
margin-bottom: 12px;
}
.megadrop-content-toplink a{
display: inline-block;
padding-left: 20px;
position: relative;
}
.megadrop-content-toplink a:hover {
background-color: #E8F3FC;
}
.megadrop-content-toplink-title {
color: #343639;
font-size: 20px;
line-height: 1.6;
letter-spacing: 0.06em;
transition: all .25s ease;
}
.megadrop-content-toplink a:hover .megadrop-content-toplink-title{
color: #32A1F5;
}
.megadrop-content-toplink-title img {
width: 50px;
height: 50px;
}
.megadrop-content-toplink-title-img {
width: 56px;
height: 56px;
}
.megadrop-content-toplink-description {
color: #61666C;
margin-top: 8px;
font-size: 12px;
line-height: 1.6;
letter-spacing: 0.06em;
}
.megadrop-content-link {
}
.megadrop-content-link-border {
border-bottom: 1px solid #E1E4EB;
padding-bottom: 16px;
margin-bottom: 16px;
}
.megadrop-content-link-list {
display: flex;
flex-wrap: wrap;
}
.megadrop-content-link-list-item {
width: calc(100% / 3);
}
.megadrop-content-link-list-item a {
display: flex;
justify-content: space-between;
padding: 14px 14px 16px 16px;
border-radius: 5px;
transition: all .25s ease;
}
.megadrop-content-link-list-item a:hover {
background-color: #E8F3FC;
}
.megadrop-content-link-list-item-image {
width: 56px;
height: 56px;
}
.megadrop-content-link-list-item-detail {
width: calc(100% - 72px);
position: relative;
}
.is-center .megadrop-content-link-list-item-detail-inner {
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
}
.megadrop-content-link-title {
color: #343639;
font-size: 16px;
line-height: 1.6;
letter-spacing: 0.06em;
transition: all .25s ease;
margin-bottom: 2px;
}
.megadrop-content-link-title {
color: #343639;
font-size: 16px;
line-height: 1.6;
letter-spacing: 0.06em;
transition: all .25s ease;
margin-bottom: 2px;
}
.megadrop-content-link-title.is-blank {
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_blank.png) no-repeat right 45%;
padding-right: 20px;
background-size: 18px;
}
.megadrop-content-link-list-item a:hover .megadrop-content-link-title {
color: #32A1F5;
}
.megadrop-content-link-description {
color: #61666C;
font-size: 12px;
line-height: 1.6;
letter-spacing: 0.06em;
}
.megadropabout {
padding: 48px 20px;
display: block;
}
.megadropabout-inner {
max-width: 688px;
margin: 0 auto;
}
.megadropabout-list {
display: flex;
justify-content: space-between;
}
.megadropabout-list-item {
width: 50%;
}
.megadropabout-list-item a {
display: flex;
justify-content: space-between;
border-radius: 5px;
padding: 10px;
transition: all .25s ease;
}
.megadropabout-list-item a:hover {
background-color: #F5F8FA;
}
.megadropabout-list-item-image {
width: 56px;
}
.megadropabout-list-item-detail {
width: calc(100% - 72px);
}
.megadropabout-list-item-title {
color: #343639;
font-size: 16px;
line-height: 1.6;
transition: all .25s ease;
}
.megadropabout-list-item a:hover .megadropabout-list-item-title {
color: #32A1F5;
}
.megadropabout-list-item-description {
color: #61666C;
font-size: 12px;
line-height: 1.6;
}
/*
.megadropabout-list-item a:hover .megadropabout-list-item-title,.megadropabout-list-item a:hover .megadropabout-list-item-description {
text-decoration: underline;
}
*/
.headerfukidashi {
position: absolute;
top: 66px;
right: 0;
width: 328px;
z-index: 1;
background-color: #fff;
border: 1px solid #E1E4EB;
border-radius: 5px;
}
.headerfukidashi-inner {
position: relative;
padding: 23px;
}
.headerfukidashi-inner:before {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
right: 63px;
top: -14px;
border-right: 14px solid transparent;
border-bottom: 14px solid #E1E4EB;
border-left: 14px solid transparent;
}
.headerfukidashi-inner:after {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
right: 63px;
top: -12px;
border-right: 14px solid transparent;
border-bottom: 14px solid #fff;
border-left: 14px solid transparent;
}
.headerfukidashi-btn {}
.headerfukidashi-btn a {
display: block;
position: relative;
color: #fff;
text-align: center;
box-sizing: border-box;
z-index: 0;
background: transparent linear-gradient(90deg, #0D84DF 0%, #285CD1 100%) 0% 0% no-repeat padding-box;
padding: 8px 10px;
border-radius: 5px;
letter-spacing: 0.04em;
margin-bottom: 10px;
font-size: 14px;
line-height: 24px;
z-index: 0;
}
.headerfukidashi-btn a::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: transparent linear-gradient(90deg, #0D84DF 0%, #285CD1 100%) 0% 0% no-repeat padding-box;
transition: all 0.25s ease;
z-index: -1;
border-radius: 5px;
}
.headerfukidashi-btn a::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #32A1F5;
transition: all 0.25s ease;
z-index: -2;
border-radius: 5px;
}
.headerfukidashi-btn a:hover:before{opacity:0;}
.headerfukidashi-btn-description {
margin-bottom: 15px;
}
.headerfukidashi-btn:last-of-type .headerfukidashi-btn-description {
margin-bottom: 0;
}
#openmenu{display:none;}
.close-menu {
width: 40px;
height: 40px;
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_invalid.svg) no-repeat center center;
background-size: 18px 33px;
border: none;
cursor: pointer;
}
.megadrop-column {
flex: 1;
}
/* footer ---------------------------------------*/
footer{
padding: 30px 25px;
background: transparent linear-gradient(to right, #0D84DF 0%, #285CD1 100%) 0% 0% no-repeat padding-box;
position: relative;
}
.is-contact footer{padding:25px;}
.footer-inner{
max-width:1196px;
margin:0 auto;
position: relative;
}
.gotop {
position: fixed;
right: 20px;
bottom: 40px;
width: 56px;
}
.gotop.is-bottom{
position: absolute;
bottom: auto;
top: -120px;
}
.footer-main{
display: flex;
justify-content: space-between;
margin-bottom: 70px;
}
.footer-main-links{width: calc(100% - 380px);}
.footer-main-links-inner{
display: flex;
justify-content: space-between;
}
.footer-main-links-list-wrapper{
width: calc(33.33% - 10px);
margin-left: 15px;
}
.footer-main-links-list-wrapper:first-of-type{margin-left: 0;}
.footer-main-links-list{margin-bottom: 10px;}
.footer-main-links-list:nth-child(2) {margin-top: 40px;}
.footer-main-links-list-item-head{margin-bottom: 20px;}
/* .footer-main-links-list:nth-child(2) .footer-main-links-list-item-head{margin-bottom: 0;} */
.footer-main-links-list-item-head a {
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 1.6;
transition: all .25s ease;
}
.footer-main-links-list-item-head a:hover {border-bottom: 1px solid #fff;}
.footer-main-links-list-item{}
.footer-main-links-list-item a {
color: #fff;
font-size: 12px;
line-height: 1.6;
transition: all .25s ease;
}
.footer-main-links-list-item a:hover {border-bottom: 1px solid #fff;}
.footer-main-contact{
width: 342px;
background: #fff;
padding: 32px 33px;
}
.footer-main-contact-title{
font-size: 18px;
font-weight: bold;
text-align: center;
color: #61666C;
margin-bottom: 9px;
line-height: 1.4;
}
.footer-main-contact-text {
font-size: 14px;
color: #61666C;
margin-bottom: 20px;
text-align: center;
line-height: 1.4;
}
.footer-main-contact-call {
font-size: 32px;
color: #61666C;
margin-bottom: 5px;
text-align: center;
line-height: 33px;
}
.footer-main-contact-call span {
display: inline-block;
padding-left: 34px;
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_call.png) no-repeat left center;
background-size: 18px 33px;
}
.footer-main-contact-open {
font-size: 14px;
color: #61666C;
text-align: center;
line-height: 1.4;
margin-bottom: 20px;
}
.footer-main-contact-mail {
margin-bottom: 8px;
text-align: center;
}
.footer-main-contact-mail a {
position: relative;
display: block;
color: #fff;
font-size: 14px;
line-height: 1.6;
font-weight: bold;
padding: 8px 10px;
letter-spacing: 0.08em;
transition: all 0.25s ease;
z-index: 0;
}
.footer-main-contact-mail a::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
background: transparent linear-gradient(90deg, #0D84DF 0%, #285CD1 100%) 0% 0% no-repeat padding-box;
transition: all 0.25s ease;
z-index: -1;
}
.footer-main-contact-mail a::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
background: #32A1F5;
transition: all 0.25s ease;
z-index: -2;
}
.footer-main-contact-mail a:hover:before{opacity:0;}
.footer-main-contact-mail a span{
display: inline-block;
padding-left: 22px;
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_mail.png) no-repeat left center;
background-size: 16px 12px;
}
.footer-main-contact-faq {text-align: center;}
.footer-main-contact-faq a {
position: relative;
display: block;
color: #fff;
font-size: 14px;
line-height: 1.6;
font-weight: bold;
padding: 8px 10px;
letter-spacing: 0.08em;
transition: all 0.25s ease;
z-index: 0;
}
.footer-main-contact-faq a::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
background: transparent linear-gradient(90deg, #0D84DF 0%, #285CD1 100%) 0% 0% no-repeat padding-box;
transition: all 0.25s ease;
z-index: -1;
}
.footer-main-contact-faq a::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
background: #32A1F5;
transition: all 0.25s ease;
z-index: -2;
}
.footer-main-contact-faq a:hover::before{opacity:0;}
.footer-sub{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.footer-sub-list-wrapper{width: calc(100% - 120px);}
.footer-sub-list{font-size: 0;}
.footer-sub-list-item{
display: inline-block;
font-size: 12px;
margin-right: 20px;
padding-right: 20px;
border-right: 1px solid #90BCE2;
}
.footer-sub-list-item a {
color: #fff;
transition: all .25s ease;
}
.footer-sub-list-item a:hover {border-bottom: 1px solid #fff;}
.footer-sub-list-item:last-of-type{
margin-right: 20px;
padding-right: 0;
border-right: none;
}
.footer-sub-icon{width: 120px;}
.footer-sub-icon a {transition: all .25s ease;}
.footer-sub-icon a:hover {opacity: 0.7}
.footer-bottom{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.footer-bottom-main{width: calc(100% - 220px);}
.footer-bottom-main-title{
display: inline-block;
width: 144px;
padding-right: 30px;
vertical-align: top;
}
.footer-bottom-main-title a {transition: all .25s ease;}
.footer-bottom-main-title a:hover {opacity: 0.7;}
.footer-bottom-main-text{
display: inline-block;
color: #fff;
font-size: 10px;
line-height: 1.8;
}
.footer-bottom-copyright{
width: 220px;
color: #fff;
text-align: right;
line-height: 1;
}
.is-contact .footer-bottom-copyright{
width:100%;
text-align:center;
}
.footer-bottom-copyright small {
font-size: 10px;
line-height: 1;
}
/* Cookie popup */
.cookie-consent {
display: block;
align-items: center;
position: fixed;
bottom: 0;
font-size: 12px;
background: rgba(3,132,223,.9);
padding: 1.2em;
margin: 0em 1.2em;
box-sizing: border-box;
visibility: hidden;
width: 400px;
z-index: 999;
}
.cookie-consent.is-show {
visibility: visible;
}
.cookie-consent a {
color: #fff !important;
text-decoration: underline;
}
.cookie-text {
margin: 0 0 1.0em;
}
.cookie-text p {
color: #FFF;
font-size: 12px;
line-height: 1.7em;
margin: 0 0 0.5em 0;
}
.cookie-button {
margin: 0 0 0.5em 0;
display: flex;
justify-content: space-around;
}
.cookie-agree {
color: #61666C;
background: #F5F8FA;
padding: .5em 1.5em;
}
.cookie-agree:hover {
cursor: pointer;
}
.cookie-deny {
color: #61666C;
background: #F5F8FA;
padding: .5em 1.5em;
}
.cookie-deny:hover {
cursor: pointer;
}
.cc-hide {
display: none !important;
}
/* tfa popup */
.tfa-consent {
display: block;
align-items: center;
position: fixed;
bottom: 0;
font-size: 24px;
background: rgba(3,132,223,.9);
padding: 1.2em;
margin: 0em 1.2em;
box-sizing: border-box;
visibility: hidden;
width: 400px;
z-index: 999;
}
.tfa-consent.is-show {
visibility: visible;
}
.tfa-text {
margin: 0 0 1.0em;
}
.tfa-text p {
color: #FFF;
font-size: 24px;
line-height: 1.7em;
margin: 0 0 0.5em 0;
}
.tfa-button {
margin: 0 0 0.5em 0;
display: flex;
justify-content: space-around;
}
.tfa-agree {
color: #61666C;
background: #F5F8FA;
padding: .5em 1.5em;
}
.tfa-agree:hover {
cursor: pointer;
}
.tfa-close {
color: #61666C;
background: #F5F8FA;
padding: .5em 1.5em;
}
.tfa-close:hover {
cursor: pointer;
}
.tfa-checkbox {
display: inline-block;
line-height: 1;
margin-right: 24px;
font-size: 16px;
position:relative;
}
.tfa-checkbox label {
background: url('/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_checkbox.png') left 1px no-repeat;
background-size: 24px;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
line-height: 1.4;
min-height: 25px;
margin: 0px 0;
padding: 2px 0 0 32px;
position: relative;
vertical-align: top;
}
.cc-hide {
display: none !important;
}
/* loading */
.loading{
z-index: 10000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.loading-image{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.loading-image svg {
fill: none;
stroke: #fff;
stroke-width: 10;
stroke-linecap: round;
stroke-dasharray: 230 230;
animation: loader 1.4s infinite cubic-bezier(.4,0,.3,1), loading 1.2s infinite linear;
vertical-align: middle;
}
@keyframes loader {
from { stroke-dashoffset: 230; }
to { stroke-dashoffset: -230; }
}
@keyframes loading {
from { transform: none; }
to { transform: rotate(360deg); }
}
/* pcのみ */
@media screen and (min-width: 769px){
.sp{display: none !important;}
.spbr{display: none;}
}
/* learge pc */
@media screen and (min-width: 2500px){
.header-inner{max-width:2000px;}
.gnav{right: calc(50% - 980px);}
}
@media screen and (min-width: 769px) and (max-width: 1220px){
.text-img {width: 600px;}
}
/* small pc */
@media screen and (min-width: 769px) and (max-width: 1274px){
.gnav-list-item {margin-right: 0px;}
.gnav-list-item a,
.gnav-list-item > span{font-size: 14px;padding:0 10px;}
.has-megadrop.gnav-list-item a,
.has-megadrop.gnav-list-item span{padding-right: 20px;}
.is-blank.gnav-list-item a{padding-right: 25px;}
.header-contractor {width: 160px;}
.header-contractor a {
font-size: 14px;
width: 160px;
}
.side.is-fixed{
position: fixed;
top: 94px;
right: auto;
left: 770px;
margin-right: 0px;
}
.side.is-fixed.is-bottom{left:auto;}
.gnav{
right: auto;
left: 180px;
min-width: 900px;
}
.gnav-list-item:last-of-type {margin-right: 0;}
.gnav-list-item:last-of-type a {margin-right: 0;}
}
/* small pc */
@media screen and (min-width: 769px) and (max-width: 990px){
.megadrop-content-toplink-title {font-size: 14px;}
.megadrop-content-toplink-description {font-size: 11px;}
.megadrop-content-link-list-item a {padding: 15px 10px;}
.megadrop-content-link-list-item-image {width: 45px;height: 45px;}
.megadrop-content-link-list-item-detail {width: calc(100% - 60px);}
.megadrop-content-link-title {font-size: 14px;}
.megadrop-content-link-description {font-size: 11px;}
}
/* small pc */
@media screen and (min-width: 769px) and (max-width: 825px){
/*
.gnav-list-item a,
.gnav-list-item > span {font-size: 12px;}
.header-contractor a {
font-size: 12px;
width: 160px;
}
*/
}
@media screen and (max-width: 768px){
/* default ---------------------------------------*/
body{min-width:0;}
img{max-width:100%;}
*{box-sizing:border-box;}
/* common item ---------------------------------------*/
.pc{display: none !important;}
.pcbr{display: none;}
/* layout ---------------------------------------*/
.header-inner,
.footer-inner,
.inner,
.wrapper{
min-width:0;
width:100%;
}
.wrapper{
padding:0 30px;
overflow: hidden;
}
.container{
display: block;
margin-bottom: 60px;
}
.main{width:100%;}
.side{
width:100%;
position:relative;
}
.side.is-fixed,
.side.is-fixed.is-bottom{
position:relative;
margin: 0;
top: 0;
right: 0;
bottom: 0;
}
.section {margin-bottom: 30px;}
.section:last-child {margin-top: 0;}
/* mypage ---------------------------------------*/
.container-mypage {
width: 100%;
}
.bottom-content {
flex-direction: column;
}
.bottom-content .left-side{
padding: 20px 20px;
}
.bottom-content .left-side,
.bottom-content .right-side {
width: 100%;
height: auto;
}
.bottom-content .right-side {
background-color: #fff;
}
.home-icon{
margin-top: 15px;
}
.customer-icon,
.payment-icon,
.form-icon,
.help-icon{
margin-top: 15px;
}
/* banner ---------------------------------------*/
.indexnews-image-stright img {
width: 80%;
}
/* header ---------------------------------------*/
header{
width:100%;
position:fixed;
left:0px;
top:0px;
padding:0px 0 0 0;
height: 60px;
background: none;
min-width: 0;
}
.header-tagline{display: none;}
.header-inner{
width:auto;
padding:0px 0 0px 0;
text-align: center;
background: none;
position: relative;
background: #fff;
z-index:200;
height: 60px;
}
.header-logo{
display: block;
background: url('/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Flogo_header.png') 0 center no-repeat;
background-size: 110px auto;
width:110px;
height:60px;
left:10px;
top:0px;
}
.header-logo-title{
left: 128px;
top: 30px;
font-size: 12px;
}
.header-tel-wrapper{right:10px;}
.header-tel{
font-size:21px;
padding: 0 0 0 18px;
}
.header-tel::before{
width: 9px;
height:18px;
}
.header-tel a{color:#61666c;}
.header-tel-date{font-size:10px}
.header-cart {
width: 60px;
height: 60px;
margin-left: 0px;
position:absolute;
right: 60px;
z-index: 110;
overflow: hidden;
}
.header-cart a{
width:60px;
height: 60px;
position: fixed;
}
.header-cart a > span{
right: 9px;
top: 11px;
}
.gnav-inner{
display: flex;
flex-wrap: nowrap;
align-items: center;
position:relative;
min-width:100px;
}
#openmenu{
display:block;
width:60px;
height:60px;
text-indent: -99em;
overflow: hidden;
position:fixed;
right:0px;
top:0px;
background: linear-gradient(to right,#0097E6, #285CD1);
z-index: 300;
}
#openmenu span{
content:'';
display: block;
width:25px;
height:2px;
background: #fff;
position: absolute;
left:17px;
transition: all .25s ease;
}
#openmenu span:nth-child(1){top:19px;}
#openmenu span:nth-child(2){top:28px;}
#openmenu span:nth-child(3){top:37px;}
#openmenu.open span:nth-child(1){
transform:rotate(45deg);
top:28px;
left:12px;
width: 36px;
}
#openmenu.open span:nth-child(2){
opacity:0;
left:-25px;
}
#openmenu.open span:nth-child(3){
transform:rotate(-45deg);
top:28px;
left:12px;
width: 36px;
}
.menuopen{
position: fixed;
width: 100%;
height: 100%;
}
/* gnav ---------------------------------------*/
.gnav{
border:none;
background: #F5F8FA;
padding-bottom: 30px;
overflow:auto;
z-index:100;
position: fixed;
left:0px;
top:0px;
width:calc(100% - 60px);
transition: all .25s ease;
transform:translate3d(-100%,0,0);
z-index: 150;
min-width: 0;
}
.gnav.active{
transform:translate3d(0,0,0);
opacity:1;
}
.gnav.active.no-scroll{
overflow: hidden;
}
.gnav-inner{display: block;}
.gnav-list{
text-align: left;
}
.gnav-list-item{
display: block;
font-size:14px;
line-height: 1.4;
margin-right: 0px;
border-bottom:1px solid #E1E4EB;
}
.gnav-mypage .gnav-list-item{margin-left: 0}
.gnav-list-item > a,
.gnav-list-item > span{
font-weight: normal;
margin-right: 0px;
position: relative;
color: #61666C;
padding: 14px 28px;
background: #fff;
}
.has-megadrop.gnav-list-item > a,
.has-megadrop.gnav-list-item > span,
.gnav-list-item-spsubtitle {
padding-right: 20px;
background: #F5F8FA;
border-bottom:1px solid #E1E4EB;
font-size: 13px;
color: #aaa;
padding: 18px 20px 10px;
}
.has-megadrop.gnav-list-item:first-child > a,
.has-megadrop.gnav-list-item:first-child > span {padding-top: 8px}
.gnav-list-item-spsubtitle{
margin-top: 1px;
display: block;
}
.is-blank.gnav-list-item a {padding-right: 20px;}
.gnav-list-item a:hover{color: #61666C;}
.gnav-list-item:not(.is-blank) a::after,
.gnav-list-item:not(.is-blank) span::after{display: none}
.gnav-list-item.is-blank a::after,
.gnav-subinnerlist-item.is-blank a::after{
display: inline-block;
position:relative;
vertical-align: middle;
transform: translate(0,0);
top: -2px;
margin-left: 8px;
}
/*
.gnav-list-item a::after{
width: 10px;
height: 15px;
top: 50%;
right: 20px;
transform: translate(0,-50%);
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Farrow_right_blue.png) no-repeat center center;
background-size: 7px;
}
.has-megadrop.gnav-list-item a::after{
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Farrow_right_blue.png) no-repeat center center;
background-size: 7px;
}
*/
.is-blank.gnav-list-item a::after,
.is-blank.gnav-subinnerlist-item a::after{
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_blank.png) no-repeat center center;
background-size: 18px;
width: 18px;
height: 18px;
}
.is-service .gnav-sublist,
.is-logionedservice .gnav-sublist{
margin-bottom: 20px;
border-bottom:1px solid #E1E4EB;
}
.gnav-sublist-item:not(:first-child){
border-top:1px solid #E1E4EB;
}
.gnav-sublist-item > a{
font-weight: normal;
margin-right: 0px;
position: relative;
color: #61666C;
padding: 14px 28px;
background: #fff;
display: block;
}
.gnav-sublist-item > a.has-subinner{position:relative;}
.gnav-sublist-item > a.has-subinner::before,
.gnav-list-item.has-account > a::before{
content: '';
position:absolute;
width: 10px;
height: 15px;
top: 50%;
right: 20px;
transform: translate(0,-50%);
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Farrow_right_blue.png) no-repeat center center;
background-size: 7px;
}
.gnav-subinnerlist-wrapper{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background: #F5F8FA;
z-index: 2;
transform: translate(-100%,0);
transition: all .25s ease;
overflow: scroll;
padding-bottom:10px;
}
.gnav-subinnerlist-wrapper.is-active{
transform: translate(0%,0);
}
.gnav-list-item span.gnav-subinnerlist-wrapper-close{
display: block;
background: linear-gradient(to right,#0097E6, #285CD1);
padding: 22px 0;
line-height: 1;
font-size:18px;
color: #fff;
text-align:center;
letter-spacing: 0.15em;
position:relative;
cursor: pointer;
}
.gnav-subinnerlist-wrapper-close::before{
content: '';
position:absolute;
width: 10px;
height: 15px;
top: 50%;
left: 17px;
transform: translate(0,-50%);
background: url('/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Farrow_left_white.png') no-repeat center center;
background-size: 8px;
}
.gnav-subinnerlist{margin-bottom: 50px}
.gnav-subinnerlist-item{
border-bottom:1px solid #E1E4EB;
}
.gnav-subinnerlist-item > a{
font-weight: normal;
margin-right: 0px;
position: relative;
color: #61666C;
padding: 14px 28px;
background: #fff;
display: block;
}
.header-contractor {
margin-right: 0px;
position: relative;
height: auto;
width: 100%;
text-align: left;
}
.header-contractor{
position:relative;
padding-top: 5px;
}
.header-contractor-btn {
background: #F5F8FA;
width: 100%;
height: auto;
color: #aaa;
text-align: left;
position:relative;
top: 0;
transform: translate(0,0);
font-size:14px;
padding-right: 0px;
border-bottom:none;
font-size: 13px;
padding: 18px 20px 10px;
}
.header-contractor-btn::after {display: none;}
.header-contractor-btn span{
display: block;
padding-right: 0px;
border-right: none;
line-height: 1.3;
position:relative;
top: 0;
left: 0;
transform: translate(0,0);
padding: 0px;
}
.header-contractor-menu-wrapper{
position:relative;
right: 0;
top: 0;
width: 100%;
padding: 0;
border-radius:0;
border:none;
display: block;
}
.header-contractor-menu-wrapper::before {display: none;}
.header-contractor-menu-wrapper::after {display: none;}
.header-contractor-menu-item:not(:first-child){margin-top: 0;}
.header-contractor-menu{border-top: 1px solid #E1E4EB;}
.header-contractor-menu-item{border-bottom: 1px solid #E1E4EB;}
.header-contractor-menu-item a{
background: none;
font-weight: normal;
margin-right: 0px;
position: relative;
color: #61666C;
padding: 14px 28px;
background: #fff;
z-index: 0;
text-align:left;
font-size:14px;
line-height: 1.4;
}
.header-contractor-menu-item a::after {display: none;}
.header-contractor-menu-item a::before {display: none;}
.header-contractor-menu-item p{display: none}
.header-search {display: none;}
.gnav-search{
position:relative;
padding: 10px 16px;
background: #F5F8FA;
}
.gnav-search input{
width: 100%;
font-size: 14px;
padding: 11px 20px;
line-height: 1.3;
border:1px solid #BDC2CE;
border-radius:5px;
}
.gnav-search button{
background:none;
border:none;
cursor: pointer;
position:absolute;
right: 20px;
top: 50%;
width: 32px;
transform: translate(0,-50%);
}
.cover{z-index: 110;}
/* megadrop ---------------------------------------*/
.megadrop-wrapper {
position: fixed;
top: 0;
left: 0;
transform: translate(0,0);
width: calc(100% - 60px);
height: 100%;
display: block;
transition: all .25s ease;
transform:translate3d(-100%,0,0);
}
.megadrop-wrapper.is-active {transform:translate3d(0%,0,0);}
.megadrop{display: block;}
.megadrop-sp-close{
background: linear-gradient(to right,#0097E6, #285CD1);
color: #fff;
font-size:16px;
line-height: 1.3;
padding: 20px;
position:relative;
}
.megadrop-service-inner {
display: block;
}
.megadrop-title-wrapper {
width: 100%;
min-height: 0;
background: transparent linear-gradient(90deg, #0D84DF 0%, #285CD1 100%) 0% 0% no-repeat padding-box;
}
.megadrop-title {}
.is-active.megadrop-title {}
.megadrop-title a {
display: block;
padding: 20px;
color: rgba(255,255,255,0.43);
font-size: 16px;
transition: all .25s ease;
}
.megadrop-title a:hover {
color: #343639;
background-color: #fff;
}
.is-active.megadrop-title a {
color: #343639;
background-color: #fff;
}
.megadrop-content {
width: 100%;
background: #fff;
display: none;
}
.megadrop-content.is-domain {display: block;}
.megadrop-content.is-ssl {display: block;}
.megadrop-content-inner {padding: 0px 0px;}
.megadrop-content-toplink {margin-bottom: 0px;}
.megadrop-content-toplink a{
display: block;
padding: 14px 28px;
}
.megadrop-content-toplink a::before{display: none;}
.megadrop-content-toplink-title {
color: #343639;
font-size: 16px;
line-height: 1.6;
letter-spacing: 0.06em;
transition: all .25s ease;
}
.megadrop-content-toplink a:hover .megadrop-content-toplink-title{
color: #32A1F5;
}
.megadrop-content-toplink-description {display: none;}
.megadrop-content-link {}
.megadrop-content-link-border {
border-bottom: none;
padding-bottom: 0px;
margin-bottom: 0px;
}
.megadrop-content-link-list {display: block;}
.megadrop-content-link-list-item {width: 100%;}
.megadrop-content-link-list-item a {
display: block;
padding: 14px 28px;
border-radius: 0px;
}
.megadrop-content-link-list-item a:hover {
background-color: #E8F3FC;
}
.megadrop-content-link-list-item-image {display: none;}
.megadrop-content-link-list-item-detail {width: 100%;}
.is-center .megadrop-content-link-list-item-detail-inner {
position:relative;
top: 0;
left: 0;
transform: translate(0,0);
}
.megadrop-content-link-title {
color: #343639;
font-size: 14px;
line-height: 1.4;
letter-spacing: 0.06em;
transition: all .25s ease;
margin-bottom: 0px;
}
.megadrop-content-link-title.is-blank {
background: url(/proxy/https%3A%2F%2Fjpdirect.jp%2Fimg%2Fcommon%2Ficon_blank.png) no-repeat right 45%;
padding-right: 20px;
background-size: 18px;
}
.megadrop-content-link-list-item a:hover .megadrop-content-link-title {
color: #32A1F5;
}
.megadrop-content-link-description {display: none;}
.megadropabout {
padding: 0px 0px;
display: block;
}
.megadropabout-inner {max-width: 100%;}
.megadropabout-list {display: block;}
.megadropabout-list-item {
width: 100%;
border-bottom: 1px solid #E1E4EB;
}
.megadropabout-list-item a {
display: block;
border-radius: 0px;
position: relative;
color: #61666C;
padding: 14px 28px;
}
.megadropabout-list-item a:hover {background-color: none;}
.megadropabout-list-item-image {display: none;}
.megadropabout-list-item-detail {width: 100%;}
.megadropabout-list-item-title {
color: #61666C;
font-size: 14px;
line-height: 1.4;
transition: all .25s ease;
}
.megadropabout-list-item a:hover .megadropabout-list-item-title {
color: #61666C;
}
.megadropabout-list-item-description {display: none;}
/* footer ---------------------------------------*/
footer {
padding: 45px 26px 20px;
background: transparent linear-gradient(90deg, #0D84DF 0%, #285CD1 100%) 0% 0% no-repeat padding-box;
}
.gotop{
right: 5px;
bottom: 60px;
}
.footer-main {
display: block;
justify-content: space-between;
margin-bottom: 25px;
}
.footer-main-contact {width: 100%;}
.footer-main-contact-text {font-size: 13px;}
.footer-main-contact-open {font-size: 13px;}
.footer-main-contact-mail a {font-size: 16px;}
.footer-main-contact-faq a {font-size: 16px;}
.footer-logo {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.footer-logo-image:nth-of-type(1) {width: 114px; height: 100%;}
/* .footer-seal-image:nth-of-type(1) {width: 86px; height: 100%;} */
.footer-seal-image:nth-of-type(1) {width: 100%; border-radius: 0;}
.footer-sub {display: block;}
.footer-sub-list-wrapper {width: 100%;}
.footer-sub-list-item {
font-size: 10px;
margin-right: 18px;
padding-right: 18px;
margin-bottom: 4px;
}
.footer-bottom {display: block;}
.footer-bottom-main {
width: 100%;
margin-bottom: 20px;
}
.footer-bottom-main-title {width: 100%;}
.footer-bottom-copyright {
width: 100%;
text-align: center;
line-height: 1;
}
/* Cookie利用の同意確認ポップアップ */
/* 2022/3//15 start */
.cookie-consent {
margin: auto;
width: 100%;
text-align: center;
}
.cookie-text {}
.cookie-button {}
.cookie-agree {}
.cookie-deny {}
.ul-widget-main-window {
z-index: 998 !important;
}
}
/* iphone5 iphoneSE用 */
@media screen and (max-width: 370px){
.wrapper{padding:0 15px;}
}