@charset "utf-8";

/* =================================================================================================
   GPA 外貨宅配　ONLINE SORE／基本レイアウト（PC）
   Copyright © Greenport Agency Co., Ltd. All Rights Reserved
================================================================================================= */


/* -----------------------------------------------------------------------
　リセット
-------------------------------------------------------------------------- */

body{
	font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Verdana, Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
}

/* iPhone・iPad用文字サイズ */
body{
	-webkit-text-size-adjust: 90%;
}

body a{
	text-decoration:underline;
	outline:0;
}

body a:hover{
	text-decoration:none;
}

body,h1,h2,h3,h4,h5,ul,li,dl,dt,dd,p,strong,address{
	margin:0;
	padding:0;
}

ul,li{
	list-style:none;
}

address{
	font-style:normal;
}

.clearfix {
	display: inline-block;
}
/* Exclude Mac IE \*/
.clearfix {
	display: block;
}
/**/
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
img{
	border:0;
	-ms-interpolation-mode:bicubic;
}


.w980 .sp_area{
	display:none;
}


input{
	font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Verdana, Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
}
select{
	font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Verdana, Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
}


/* -----------------------------------------------------------------------
　基本テキストカラー・リンクカラー
-------------------------------------------------------------------------- */
body{
	color:#000;
}
body a{
/*	color:#0f0f69;*/
	color:#1b6bdc;
	text-decoration:none;
}
body a:hover{
/*	color:#ca0000;*/
	color:#1b6bdc;
	text-decoration:none;
}


/* -----------------------------------------------------------------------
　下マージン
-------------------------------------------------------------------------- */
.mb0{margin-bottom:0 !important;}
.mb5{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important;}
.mb35{margin-bottom:35px !important;}
.mb40{margin-bottom:40px !important;}
.mb45{margin-bottom:45px !important;}
.mb50{margin-bottom:50px !important;}


/* -----------------------------------------------------------------------
　上マージン
-------------------------------------------------------------------------- */
.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt35{margin-top:35px !important;}
.mt40{margin-top:40px !important;}
.mt45{margin-top:45px !important;}
.mt50{margin-top:50px !important;}


/* -----------------------------------------------------------------------
　上パディング
-------------------------------------------------------------------------- */
.pt5{padding-top:5px !important;}
.pt10{padding-top:10px !important;}
.pt15{padding-top:15px !important;}
.pt20{padding-top:20px !important;}
.pt25{padding-top:25px !important;}
.pt30{padding-top:30px !important;}
.pt35{padding-top:35px !important;}
.pt40{padding-top:40px !important;}
.pt45{padding-top:45px !important;}
.pt50{padding-top:50px !important;}


/* -----------------------------------------------------------------------
　左1文字分パディング
-------------------------------------------------------------------------- */
.pl1em{padding-left: 1em; !important;}


/* -----------------------------------------------------------------------
　字詰め
-------------------------------------------------------------------------- */
.letterspacing-1{letter-spacing:-1px;}
.letterspacing-2{letter-spacing:-2px;}


/* ----------------------------------------------------------------------------
　テキスト揃え
---------------------------------------------------------------------------- */
.text_center{
	text-align:center;
}
.text_left{
	text-align:left;
}
.text_right{
	text-align:right;
}
.text_bold{
	font-weight:bold;
}
.text_normal{
	font-weight:normal;
}


/* ----------------------------------------------------------------------------
　テキストカラー
---------------------------------------------------------------------------- */
.text_red{
	color:#b10001;
}
.text_green{
	color:#228b22;
}
.text_warning {
  color:#e90000;
}


/* Light */
@font-face {
	font-family: 'font_l';
	src: url('/font/NotoSans-GPA-Light.eot'); /* IE9 Compat Modes */
	src:url('/font/NotoSans-GPA-Light.eot?#iefix') format('embedded-opentype'),
		url('/font/NotoSans-GPA-Light.woff') format('woff'),
		url('/font/NotoSans-GPA-Light.ttf') format('truetype'),
		url('/font/NotoSans-GPA-Light.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
	line-height:120%;
}

/* Regular */
@font-face {
	font-family: 'font_r';
	src: url('/font/NotoSans-GPA-Regular.eot'); /* IE9 Compat Modes */
	src:url('/font/NotoSans-GPA-Regular.eot?#iefix') format('embedded-opentype'),
		url('/font/NotoSans-GPA-Regular.woff') format('woff'),
		url('/font/NotoSans-GPA-Regular.ttf') format('truetype'),
		url('/font/NotoSans-GPA-Regular.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
	line-height:120%;
}


/* Medium */
@font-face {
	font-family: 'font_m';
	src: url('/font/NotoSans-GPA-Medium.eot'); /* IE9 Compat Modes */
	src:url('/font/NotoSans-GPA-Medium.eot?#iefix') format('embedded-opentype'),
		url('/font/NotoSans-GPA-Medium.woff') format('woff'),
		url('/font/NotoSans-GPA-Medium.ttf') format('truetype'),
		url('/font/NotoSans-GPA-Medium.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
	line-height:120%;
}



/* ----------------------------------------------------------------------------
　テキストサイズ
---------------------------------------------------------------------------- */
.w980{
	font-size:14px;
}

.w980 .text10{
	font-size:10px;
	line-height:150%;
}
.w980 .text11{
	font-size:11px;
	line-height:150%;
}
.w980 .text12{
	font-size:12px;
	line-height:140%;
}
.w980 .text13{
	font-size:13px;
	line-height:150%;
}
.w980 .text14{
	font-size:14px;
	line-height:160%;
}
.w980 .text15{
	font-size:15px;
	line-height:150%;
}
.w980 .text16{
	font-size:16px;
	line-height:150%;
}
.w980 .text17{
	font-size:17px;
	line-height:150%;
}
.w980 .text18{
	font-size:18px;
	line-height:150%;
}
.w980 .text19{
	font-size:19px;
	line-height:150%;
}
.w980 .text20{
	font-size:20px;
	line-height:150%;
}
.w980 .text21{
	font-size:21px;
	line-height:150%;
}
.w980 .text22{
	font-size:22px;
	line-height:150%;
}
.w980 .text23{
	font-size:23px;
	line-height:150%;
}
.w980 .text24{
	font-size:24px;
	line-height:150%;
}
.w980 .text25{
	font-size:25px;
	line-height:150%;
}
.w980 .text26{
	font-size:26px;
	line-height:150%;
}
.w980 .text27{
	font-size:27px;
	line-height:150%;
}
.w980 .text28{
	font-size:28px;
	line-height:150%;
}
.w980 .text29{
	font-size:29px;
	line-height:150%;
}
.w980 .text30{
	font-size:30px;
	line-height:150%;
}


/* -----------------------------------------------------------------------
　大外
-------------------------------------------------------------------------- */
.w980{
	min-width:980px;
}

.w980 .sp_area{
	display:none;
}

.w980 #wrapper{
	padding:0 0 50px;
}


/* ----------------------------------------------------------------------------
　ヘッダ
---------------------------------------------------------------------------- */
.w980 #header{
	width:100%;
	background-color:#fff;
	position:relative;
	z-index:10;
}

.w980 #header_inner{
	width:980px;
	height:99px;
	margin:0 auto;
	position:relative;
}

/* ロゴ */
.w980 #header .logo{
	width:275px;
	height:63px;

	position:absolute;
	top:18px;
	left:0px;

	text-indent:100%;
	white-space:nowrap;
	overflow: hidden;

	background:url("/img/header_logo.png") 0 0 no-repeat;
}
.w980 #header .logo a{
	width:275px;
	height:63px;
	display:block;
}

/* キャッチ */
.w980 #header .catch{
	width:165px;
	height:51px;
	position:absolute;
	top:30px;
	left:410px;
	background:url("/img/header_catch.png") 0 0 no-repeat;
	text-indent:-9999px;
}


/* お問い合わせ */
.w980 #header .inquiry{
	position:absolute;
	top:0px;
	right:0px;
	padding-top:25px;
}
.w980 #header .inquiry .tel{
	font-size:16px;
	font-family: 'font_l';
	line-height:120%;
	color:#000;
	margin-bottom:5px;
}
.w980 #header .inquiry .tel span{
	padding:0 0 0 28px;
	background:url("/img/header_tel.gif") 0 center no-repeat;
}
.w980 #header .inquiry .tel a{
	color:#000;
}
.w980 #header .inquiry .time{
	font-size:11px;
	font-family: 'font_l';
	line-height:120%;
	color:#000;
	margin-bottom:5px;
}
.w980 #header .inquiry .mail a{
	padding-left:20px;
	background:url("/img/header_mail.gif") 0 2px no-repeat;
	font-size:12px;
	line-height:120%;
	font-family: 'font_l';
	display:block;
	color:#000;
	text-align:left;
}
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, .w980 #header .inquiry .mail a{
	line-height: 150%;
}}


.w980 #header .inquiry .mail a:hover{
	text-decoration:none;
}


/* グローバルメニュー */
.w980 #header .menu{
	width:100%;
	height:58px;
	background-color:#34373a;
	display:block !important;
}
.w980 #header .menu ul{
	width:980px;
	margin:0 auto;
}
.w980 #header .menu ul{display: inline-block;}
/* Exclude Mac IE \*/
.w980 #header .menu ul{display: block;}
/**/
.w980 #header .menu ul:after{content:".";display:block;clear:both;height:0;visibility: hidden;}

.w980 #header .menu ul li{
/*	width:196px;*/
	width:193px;
  height: 58px;
	float:left;
}

/* レート */
.w980 #header .menu ul li.rate{
	width:208px;
}



.w980 #header .menu ul li a{
	font-size:14px;
	letter-spacing:3px;
	line-height:57px;
/*	width:196px;*/
	width:193px;
	height:58px;
	font-family: 'font_l';
	display:block;
	text-align:center;
	color:#fff;
	text-decoration:none;
	vertical-align:top;
	position:relative;
}
@media all and (-ms-high-contrast:none){
	*::-ms-backdrop, .w980 #header .menu ul li a{
		line-height: 62px;
}}


.w980 #header .menu ul li a:hover{
	color:#ccc;
}

.w980 #header .menu ul li .on,
.w980 #header .menu ul li .on:hover{
	background-color:#4b4e51;
	color:#ccc;
}


/* レート */

.w980 #header .menu ul li.rate a.has_campaign{
	line-height:22px!important;
	display:table-cell;
	vertical-align:middle;
}
.w980 #header .menu ul li.rate a span{
	width:208px;
	display:block;
	color:#ffff03;
}
.w980 #header .menu ul li.rate a span:hover{
	color:#fffccf;
}


/* お届け期間の目安 */
.w980 #header .menu ul .delivery{
	width:231px;
}
.w980 #header .menu ul .delivery a{
	text-align:left;
	padding-left:68px;
	background-color:#af3108 !important;
	background:url("/img/header_menu_delivery.png") 35px center no-repeat;
}
.w980 #header .menu ul .delivery a:hover{
	background:url("/img/header_menu_delivery_hover.png") 35px center no-repeat;
}
.w980 #header .menu ul .delivery .on,
.w980 #header .menu ul .delivery .on:hover{
	color:#c22f00;
	background-color:#dbdbdb !important;
	background:url("/img/header_menu_delivery_on.png") 35px center no-repeat;
}



/* お届け期間の目安が確認できます。 */
.w980 #delivery_drop_bg{
	display:none !important;
}
.w980 #delivery_drop{
	width:425px;
	height:329px;
	padding:30px 40px 0;
	background-color:#dbdbdb;
	position:absolute;
	top:157px;
	right:0px;
	z-index:3;
	display:none;
}

.w980 #delivery_drop .delivery_close a{
	display:block;
	width:25px;
	height:26px;

	text-indent:100%;
	white-space:nowrap;
	overflow: hidden;
	background:url("/img/header_delivery_close.gif") 0 0 no-repeat;

	position:absolute;
	top:20px;
	right:20px;
}

.w980 #delivery_drop .delivery_title{
	font-size:20px;
	font-family: 'font_m';
	margin-bottom:20px;
}
.w980 #delivery_drop .delivery_lead{
	font-family: 'font_r';
	line-height:160%;
	margin-bottom:20px;
}
.w980 #delivery_drop .lead span{
	font-family: 'font_m';
	color:#da3600;
}
.w980 #delivery_drop .delivery_address{
	width:230px;
	margin:0 auto 20px;
}
.w980 #delivery_drop .delivery_address input{
	border:2px solid #999;
	width:103px;
	height:61px;
	float:left;
	font-size:22px;
	text-align:center;
}

.w980 #delivery_drop .delivery_btn{
	width:88px;
	padding-top:8px;
	float:right;
}
.w980 #delivery_drop .delivery_btn a{
	display:block;
	width:88px;
	height:48px;
	border:1px solid #F00;

	background-color:#da3600;

	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;

	font-size:19px;
	font-family: 'font_r';
	color:#fff;

	text-align:center;
	line-height:48px;
}
@media all and (-ms-high-contrast:none){
	*::-ms-backdrop, .w980 #delivery_drop .delivery_btn a{
		line-height: 55px;
}}
.w980 .delivery_btn a:hover{
	text-decoration:none;
}

.w980 .delivery_period{
	background-color:#fff;
	text-align:center;
	padding:15px 0;
	font-family: 'font_r';
}
.w980 .delivery_period span{
	color:#da3600;
}


/* ----------------------------------------------------------------------------
　パンくずナビ
---------------------------------------------------------------------------- */
.w980 .topicpath{
	width:100%;
	height:30px;
	background-color:#e9e9e9;
	margin-bottom:50px;
}
.w980 .topicpath ul{
	width:980px;
	margin:0 auto;
}
.w980 .topicpath li{
	display:inline-block;
	font-family: 'font_r';
	font-size:12px;
}
.w980 .topicpath li a{
	display:block;
	color:#000;
	height:23px;
	padding:7px 30px 0px 0;
	margin-right:18px;
	background:url("/img/topicpath_arrow.gif") right 0 no-repeat;
}
.w980 .topicpath li em{
	display:block;
	font-style:normal;
}
*:first-child+html .w980 .topicpath li{
	display:inline;
	zoom:1;
}

.w980 .inner {
  width: 980px;
  margin: 0 auto;
}
.w980 .inner .center {
  text-align: center;
}


/* ----------------------------------------------------------------------------
　フッタ
---------------------------------------------------------------------------- */

/* ページTOP */
.w980 .page_top{
	width:980px;
	margin:0 auto;
	text-align:right;
	font-family: 'font_l';
}

.w980 #footer{
	width:100%;
	background-color:#34373a;
}
.w980 #footer .footer_inner{
	width:980px;
	margin:0 auto;
	padding:50px 0;
	position:relative;
}
.w980 #footer .logo{
	font-size:18px;
	color:#fff;
	margin-bottom:70px;
}


/* お問い合わせ */
.w980 #footer .inquiry{
	width:210px;
	position:absolute;
	top:40px;
	right:0px;
	text-align:right;
}
.w980 #footer .inquiry .tel{
	font-size:26px;
	line-height:120%;
	color:#e9e9e9;
	text-align:right;
	padding:0 0 0 25px;
	margin-bottom:2px;
	background:url("/img/footer_inquiry_tel.gif") 0 center no-repeat;
}


.w980 #footer .inquiry .tel a{
	color:#fff;
}

.w980 #footer .inquiry .time{
	font-size:11px;
	color:#e9e9e9;
	text-align:right;
	margin-bottom:5px;
}

.w980 #footer .inquiry .btn_mail a{
	padding:0 0 0 33px;
	font-size:12px;
	color:#e9e9e9;
	background:url("/img/footer_inquiry_mail.gif") 13px center no-repeat;
}
.w980 #footer .inquiry .btn_mail a:hover{
	text-decoration:none;
}


/* メニュー */
.w980 #footer .menu{
	width:100%;
	padding-bottom:45px;
	border-bottom:1px solid #70757a;
	margin-bottom:45px;
}
.w980 #footer .menu li{
	float:left;
	margin-right:55px;
}
.w980 #footer .menu li a{
	font-size:13px;
	line-height:120%;
	color:#fff;
}

.w980 #footer .other_menu{
	margin-bottom:70px;
}
.w980 #footer .other_menu ul{
	margin-bottom:20px;
}
.w980 #footer .other_menu li{
	float:left;
	margin-right:40px;
}
.w980 #footer .other_menu li a{
	font-size:13px;
	line-height:120%;
	color:#fff;
	padding:0 0 0 20px;
	background:url("/img/footer_other_menu.gif") 0 center no-repeat;
}

.w980 #footer .menu li a:hover,
.w980 #footer .other_menu ul li a:hover{
	color:#ccc;
}

/* クレジット */
.w980 #footer .credit{
	font-size:10px;
	line-height:120%;
	color:#70757a;
}

/* バナー */
.w980 #footer .bnr{
	position:absolute;
	top:255px;
	right:0px;
	text-align:right;
}
.w980 #footer .bnr p{
	display:inline-block;
	vertical-align:top;
	margin-left:40px;
}
*:first-child+html .w980 #footer .bnr p{
	display:inline;
	zoom:1;
}




/* ----------------------------------------------------------------------------
　.input_text（フォーム／テキストボックス）
---------------------------------------------------------------------------- */
.w980 input{
	font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Verdana, Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
}
.w980 .input_text{
	border:1px solid #d1d1d1;
	background-color:#fff;
/*	height:38px;*/
	height:32px;
	color:#666;
}
.w980 .disabled{
	background-color:#fbfaf8;
	border:1px solid #fbfaf8;
}

.w980 .input_text_cap{
	padding-left:17px;
}

.w980 .input_text_right,
.alR{
	text-align:right;
}


/* ----------------------------------------------------------------------------
　.label_radio（フォーム／ラジオボタン）
---------------------------------------------------------------------------- */
.label_radio, .label_checkbox {
	margin-right: 20px;
	white-space: nowrap;
	cursor: pointer;
}
.label_radio input[type=radio] {
	accent-color: #228b22;
	appearance: radio;
}
.w980 .label_radio input[type=radio]{
  inline-size: 0.9rem;
  block-size: 0.9rem;
  margin-right: 4px;
}

/* ----------------------------------------------------------------------------
　.label_checkbox（フォーム／チェックボックス）
---------------------------------------------------------------------------- */
.label_checkbox input[type=checkbox]{
  accent-color: #228b22;
  appearance: checkbox;
}
.w980 .label_checkbox input[type=checkbox]{
  inline-size: 0.9rem;
  block-size: 0.9rem;
  margin-right: 4px;
}


/* ----------------------------------------------------------------------------
　.select_box（フォーム／セレクトボックス）
---------------------------------------------------------------------------- */
.w980 .select_box{
	width:200px;
	font-size:14px;
	border:1px solid #d1d1d1;
	height:38px;
	font-family: Meiryo, Century Gothic, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Verdana, Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
}


/* ----------------------------------------------------------------------------
　.textarea（フォーム／テキストエリア）
---------------------------------------------------------------------------- */
.w980 .textarea{
	font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Verdana, Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
}
.w980 .textarea{
	font-size:14px;
	border:2px solid #d3d3d3;
	height:100px;
	color:#666;
}



/* ----------------------------------------------------------------------------
　.efo（フォーム／入力判定）
---------------------------------------------------------------------------- */
.w980 .efo_focus{
	/*border:2px solid #bfbfbf;*/
	background-color:#f5f5f5;
	color:#000;
}
.w980 .efo_ok{
	/*border:2px solid #bfbfbf;*/
	color:#000;
}
.w980 .efo_error{
	/*border:2px solid #ff0000;*/
	background-color:#ffd9d9;
	color:#000;
}


.ime_mode_disabled{
	ime-mode:disabled !important;
}



.w980 .input_text_width50{ width:50px;}
.w980 .input_text_width100{ width:100px;}
.w980 .input_text_width120{ width:120px;}
.w980 .input_text_width150{ width:150px;}
.w980 .input_text_width200{ width:200px;}
.w980 .input_text_width250{ width:250px;}
.w980 .input_text_width280{ width:280px;}
.w980 .input_text_width300{ width:300px;}
.w980 .input_text_width350{ width:350px;}
.w980 .input_text_width400{ width:400px;}
.w980 .input_text_width450{ width:450px;}
.w980 .input_text_width500{ width:500px;}



/* ----------------------------------------------------------------------------
　カートを見る
---------------------------------------------------------------------------- */
.w980 .btn_cart a{
	color:#fff;
	font-size:16px;
	line-height:120%;
	display:block;
	position:fixed;
	left:0px;
	bottom:0px;
	width:100%;
	height:34px;
	padding:16px 0 0;
	z-index:1000;
	text-align:center;
	background-color: rgba(255,0,0,0.8);
}
.w980 .btn_cart a span{
	background:url("/img/btn_cart.png") 0px center no-repeat;
	padding:0 0 0 32px;
}
.w980 .btn_cart a:hover{
	color:#fff;
}



/* ----------------------------------------------------------------------------
　スマホ用電話番号リンク
---------------------------------------------------------------------------- */
.tel_link:hover{
	text-decoration:none;
}

/* ----------------------------------------------------------------------------
　レビューリンク
---------------------------------------------------------------------------- */
.reviews {
	margin-right:20px;
}
.reviews_rate,
.reviews_faq {
	margin-right:40px;
}

::-ms-clear {display: none;}

/* ------20170131CPN用--------------------------------------------------

.w980 #header .cpn {
  left:610px;
  position:absolute;
  top:30px;
}
------------------------------------------------------------------------ */
/* ------20170314CPN用-------------------------------------------------- */

.w980 #header .cpn {
  left:640px;
  position:absolute;
  top:37px;
}

.hover2 {
	transition-duration: 0.1s;
}
.hover2:hover {
	transition-duration: 0.2s;
	transform: scale(1.03);
	filter:contrast(1.5);
}
.hover2:disabled {
	transform: scale(1);
	filter:grayscale(1) brightness(1.5);
}
.hover {
	transition-duration: 0.15s;
}
.hover:hover {
	transition-duration: 0.3s;
	opacity: 0.7;
}