@charset "UTF-8";

a { transition:opacity 0.5s ease-in-out 0s, color  0.5s ease-in-out 0s, background  0.5s ease-in-out 0s, box-shadow 0.5s ease-in-out 0s; }



/* FONT STYLE
----------------------------------------------------------*/
.enSerif { font-family: 'Merriweather', serif; }
.jpSerif { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
.gothic {font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;}
.serifFont {font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.sawarabiFont {font-family: "Sawarabi Gothic";}

/* CONTENT */
#content { margin:0 0 80px 0; }
#content > h2 { width:100%; max-width:1120px; padding:5px 10px; margin:50px auto 5% auto; box-sizing: border-box; font-size:24px; border-bottom:#959595 solid 1px; position:relative; overflow:visible; line-height:1.1;}
#content > h2:after { content:' '; display:block; width:12em; height:3px; background:#959595; position:absolute; bottom:-7px; left:0; }

.warapper { width: 100%; max-width: 1920px; margin: 0 auto;}

/* TITLE BOX */
.titleBox {width:100%; max-width:1120px; padding: 15px 10px 15px 10px; margin: 0 auto 50px; box-sizing: border-box; border-bottom: #666 solid 1px; position:relative; line-height:1.1em; font-size:36px;}
.titleBox h2 { font-weight:bold;}
.titleBox #breadCrumbs { position:absolute; bottom:15px; right:0;}
.hd_menuBtn { display: inline-block; margin-right: 10px;}
.hd_menuBtn p { display: inline-block; font-size: 14px; transform: translateY(-0.5em);}
.hd_menuBtn a{ display: inline-block; border: 1px solid #bc001c; background: #bc001c; border-radius: 5px; font-weight: bold; color: #fff; font-size: 14px; line-height: 1em; padding: 5px 10px; transform: translateY(-30%);}
.hd_menuBtn a:hover{ color: #bc001c; background: #fff;}
.titleBox #breadCrumbs ul { font-size:0px; display: inline-block}
.titleBox #breadCrumbs ul li { display:inline-block; font-size:12px; vertical-align:bottom; line-height:1.5em; }
.titleBox #breadCrumbs ul li:after { content:'＞'; display:inline; margin:0 0.5em; }
.titleBox #breadCrumbs ul li:last-of-type:after { display:none; content:''; }
.titleBox #breadCrumbs ul li a { color:#000; text-decoration:underline; }
.titleBox #breadCrumbs ul li a:hover { color:#666; text-decoration:underline; }
.titleBox > span {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); left: 0; width: 100%; font-size: 14px; text-align: center; font-weight: bold; color: #ff0000;}



p.attention { display:block; width:100%; max-width:1120px; padding:0 10px 0 10px; margin:0 auto 50px; box-sizing:border-box; text-align:right; font-size:12px; line-height:1.5em; }


@media screen and (min-width:768px) {
	.spOnly { display: none;}
}
@media screen and (max-width:767px) {
	.pcOnly { display: none;}	
	.hd_menuBtn a{ font-size: 12px; transform: translateY(-25%);}
}

@media screen and (max-width:1120px) {
  #footerNavi ul li { font-size:1.25vw; }
  #footerLink ul li { font-size:1.07vw; }
  .titleBox {font-size:3.2vw; }
}

@media screen and (max-width:768px) {
  #content > h2 {font-size:5vw;}
  .titleBox {font-size:5vw; padding: 6.51% 10px 15px 10px; margin: 0 auto 20px;}
  .titleBox #breadCrumbs {  display:none; }
	.hd_menuBtn p {font-size: 10px;}
  .titleBox h2 {margin: 0 0 10px;}
  .titleBox > span {display: block; position: static; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); text-align: left; font-size: 10px; line-height: 1.6;}
  p.attention { font-size:2vw; }

}

/* HEADER
----------------------------------------------------------*/
#header { width: 100%; background: rgba(255,255,255,1); border-bottom: #bc001c solid 3px;     position: fixed; top: 0; left: 0; right: 0; z-index: 100;}
#header.hIndex { position: fixed; left: 0; top: 0; width: 100%; z-index: 999; background: #fff;}
#header.hIndex {}
#headerContent { padding: 0 40px; box-sizing: border-box; width: 100%; max-width: 1920px; margin: 0 auto; flex-wrap: nowrap; align-content: center;}
#headerLogo { flex-basis: 150px; margin: 0 2.6% 0 0 ; }
#headerLogo a { display: block; padding: 20px 0 10px 0;}
#gNavi { flex-basis:660px; align-content: center; margin: 0 2.6% 0 0; align-self: center;}
#gNavi a { font-weight: bold; color: #000;}
#gNavi .spBtn { display: none;}
#headerCV { flex-basis: 820px; align-self: stretch;}
#headerCV ul { height: 100%;}
#headerCV ul li { flex-basis:calc( ( 100% - 40px ) / 3);}
#headerCV ul li.appBtn { background: #9a0d22;}
#headerCV ul li:not(.appBtn) { background: #bc001c;}
#headerCV ul a { display: block; height: 100%; box-sizing: border-box; padding: 20% 0 10% 0; line-height: 1;}
#spNavi { display: none;}

/* BRAND and CSR
----------------------------------------------------------*/
#brandLink { color: #000;}
#brandLink a { display: block;}
#groupLink ul { border: #ccc solid 1px;}
#groupLink .flexChild { flex-basis: 25%;}
#groupLink .flexChild:not(:last-of-type) a { border-right: #ccc solid 1px; box-sizing: border-box; }
#supportLink { }
#supportLink ul { height: 100%;}
#supportLink ul li { align-self:center;}
#chibaJETS { flex-basis:33%; }
#jefUNITED { flex-basis:54%; }
#brandAndCsr { margin: 0 auto 40px auto; max-width: 980px;}
#brandAndCsr #brandLink { justify-content: end;}
#brandAndCsr #supportLink { margin: 0 0 20px 0; flex-basis:180px; margin: 0 0 40px 0;}
#brandAndCsr #supportLink h4 { margin: 0 0 1em 0; text-align: center; }
#brandAndCsr #supportLink ul { height: auto;}
#brandAndCsr #languageLink { flex-basis:320px; font-size: 16px; margin: 0 0 20px 0; }
/*
#brandAndCsr #ecmenuLink{ flex-basis:230px; margin: 0 0 40px 0;}
#brandAndCsr #ecmenuLink ul{ margin-top: 1em;}
#brandAndCsr #ecmenuLink a{ font-weight: bold; text-decoration: underline;}
*/
#brandAndCsr #menuAttention { flex-basis:calc( 100% - 180px); margin: 0 0 40px 0; text-align: center; align-self: flex-end; font-weight: bold;}
#brandAndCsr #menuAttention a { display: inline-block; text-decoration: underline;}
#languageLink p { margin: 0 0 1em 0;}
#languageLink a { color: #000; font-weight: bold;}

/* FOOTER
----------------------------------------------------------*/
#footer { }
#footer .logoBox { flex-basis: 69.8%; background: #000;}
#footer .kuidon { width: 100%; max-width: 1340px; float: right; padding: 30px;}
#footer .logoBox a { display: block; width: 100%; max-width: 140px;}
#footer .shareBox { flex-basis:30.20%; background: #c9c9c9;  color: #000;}
#footer .shareBox h4 { text-align: center; color: #fff;}
#footer .instagram { max-width: 580px; width: 100%; text-align: center; padding: 30px ;}
#footer .instagram a { display: block; color: #000; }
#footer .instagram a img { width: 62px; display: block; margin: 0 auto 10px auto;}
#footer .instagram span { display: block; text-align: center;}
#footer .footerLink { flex-basis:100%; background: #707070; font-size: 14px; }
#footer .footerContent { width: 100%; max-width: 1920px; margin: 0 auto; padding: 20px 40px;}
#footer .fNavi { float: left;}
#footer .fNavi ul { text-align: left;}
#footer .fNavi ul li { display: inline-block; margin: 0 1em, 0 0;}
#footer .fNavi ul li a { display: block; color: #fff;}
#footer .copyright { text-align: right; color: #fff; float: right;}


.container {max-width: 1120px; width: 100%; margin: 0 auto; padding: 0 10px;}

.brand {width: 100%; max-width: 730px; margin: 0 auto 100px; border: 1px solid #ccc; padding: 20px 10px; text-align: center;}
.brand a {margin: 0 0 0 10px; display: inline-block;vertical-align: middle;}
.brand label {font-size: 12px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; display: inline-block;vertical-align: middle; margin: 0 0 0 25px; text-align: left; color: #000;}
.brand label span {display: block;}

.lstLogo {border-top: 1px solid #ccc; margin: 0 auto;}
.lstLogo ul {max-width: 1100px; width: 100%; margin: 0 auto;}
.lstLogo ul li {float: left; width: 20%; text-align: center; padding: 60px 20px; border-left: 1px solid #ccc;}
.lstLogo ul li:last-of-type {border-right: 1px solid #ccc;}



#pageTop {position: fixed; right: 50px; bottom: 50px; display: none;}


/* fcModal */
.fcModalWrap{ position: fixed; background: rgba(0, 0, 0, 0.7); top: 0; left: 0; right: 0; bottom: 0; z-index: 10000;}
.fcModalWrap .fcModal{ background: #fff; max-width: 500px; width: 90%; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 40px 20px; z-index: 10100;}
.fcModalWrap p{ font-feature-settings: "palt" 1;}
.fcModalWrap .tit{ font-size: 24px; border-bottom: 1px solid #000; padding-bottom: 10px; margin-bottom: 10px; font-weight: bold;}
.fcModalWrap .txt{ font-size: 21px; font-weight: normal; margin-bottom: 15px;}
.fcModalWrap .bntBox .enterBtn,
.fcModalWrap .bntBox .appBtn a{ background: url(/assets/img/common/arrow_wh.png) #007aff no-repeat right 10px bottom 15px/ 40px; font-size: 17px; color: #fff; padding: 10px; line-height: 1.3em; font-weight: bold; display: block;}
.fcModalWrap .bntBox .enterBtn:hover,
.fcModalWrap .bntBox .appBtn a:hover{ cursor: pointer; opacity: 0.8;}
.fcModalWrap .flowBox{ padding: 15px; border: 5px solid #007aff; margin: 10px 0 20px;}
.fcModalWrap .flowBox li{ position: relative; padding-left: 1.2em; font-size: 17px; font-weight: bold;}
.fcModalWrap .flowBox li .num{ position: absolute; top: 0; left: 0;}
/*
.fcModalWrap .bntBox li:nth-child(2){ padding: 0;}
.fcModalWrap .bntBox li:nth-child(2) input { background: #b5b5b5; box-sizing: border-box; border: none; padding: 10px; width: 100%; font-size: 18px; color: #fff; font-family: inherit; line-height: 1em;}
*/

@media screen and (max-width:1200px) {
    header .gNavi .navLogo a img {height: 40px;}
}

@media screen and (max-width:1024px) {
  header .gNavi nav a {padding: 5px 10px;}
    header .gNavi nav {text-align: left;}
    header .gNavi .navLogo a img {height: 35px;}
}

@media screen and (max-width:768px) {
  header .logo .grIcon {width: 150px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%);}
  header .logo .btn-sns {right: 165px; bottom: 29px;}
  header .logo .btn-sns img {width: 20px;}
}

@media screen and (max-width:767px) {

  #couponHeader {position: static; box-shadow: none;}

  /* HEADER */
	#header { position: fixed; left: 0; top:0; z-index: 9999; width: 100%;}
	#headerContent { flex-wrap: wrap; padding: 0;}
	#headerLogo { flex-basis: 24%; margin: 0 ; }
  #headerLogo a { display: block; padding: 10px 20px;}
	#gNavi { display: block; flex-basis:9.3%; margin: 0 20px 0 0; align-self: center;}
	#gNavi .spBtn { display: block; position: relative; padding: 85% 0 0 0; cursor: pointer;}
	#gNavi .spBtn span { background: #bc001c;  position: absolute; left: 0; width: 100%; height: 6px; transition: all 0.5s linear 0s;}
	#gNavi .spBtn span:nth-of-type(1) { display: block; top:0; transform-origin: center bottom;}
	#gNavi .spBtn span:nth-of-type(2) { display: block; top:calc(50% - 3px) ; }
	#gNavi .spBtn span:nth-of-type(3) { display: block; top:calc(100% - 6px); transform-origin: center top;}
	#gNavi .spBtn.active span:nth-of-type(1) { transform: rotate(45deg); top:calc(50% - 4px) ;}
	#gNavi .spBtn.active span:nth-of-type(2) { opacity: 0; }
	#gNavi .spBtn.active span:nth-of-type(3) { transform: rotate(-45deg); top:calc(50% - 3px) ;}
	#gNavi ul { display: none;}
	#headerCV { flex-basis:100%; background: #fff;}
	#headerCV ul li:nth-of-type(1) { flex-basis:46.26%; }
	#headerCV ul li:nth-of-type(2) { flex-basis:26.66%; }
	#headerCV ul li:nth-of-type(3) { flex-basis:26.66%; }
	#headerCV ul a { padding: 0;}
	#spNavi { display: block;width:100%; position: fixed; left: -300%; opacity: 0; height: 100%; top:auto; z-index: 9998; transition: all 0.5s linear 0s, top 0s linear 0s; transform: skewX(-45deg) }
	#spNavi.active { left: 0; opacity: 1; background: rgba(255,255,255,0.95); transform: skewX(0deg)}
	#spNavi ul { padding: 20px; }
	#spNavi ul li { display: block;}
	#spNavi ul li:not(:last-of-type) { border-bottom: #bc001c dotted 1px;}
	#spNavi ul li a { display: block; color: #bc001c; text-align: center; font-size: 4vw; padding: 0.5em 0;}
	
	/* BRAND LINK */
	
	#groupLink .flexChild { flex-basis:50%;}
	#groupLink ul { border: none;}
	#groupLink .flexChild a { border: #ccc solid 1px;}
	#groupLink .flexChild:nth-of-type(even) a { border-left:#fff solid 1px;}
	#brandAndCsr #languageLink  { flex-basis:100%; text-align: center; margin: 0 auto 12% auto; font-size: 3.2vw;}
  #brandAndCsr #menuAttention { flex-basis: 100%; margin: 0 auto 12% auto;}
	#brandAndCsr #menuAttention .cap { padding: 0 20px;}
/*
#brandAndCsr #ecmenuLink{ flex-basis:100%; text-align: center;}
	#brandAndCsr #ecmenuLink ul{ display: inline-block; text-align: left;}
*/
	#brandAndCsr #supportLink { flex-basis:56%; margin: 0 auto 16.5% auto;}
	
  /* FOOTER */
	#footer .footerLink { font-size: 12px;}
	#footer .logoBox { flex-basis:100%; }
	#footer .logoBox .kuidon { float: none; margin: 0 auto; width: 30%; padding: 8% 0;}
	#footer .logoBox .kuidon a { max-width: none;}
	#footer .shareBox { flex-basis:100%;}
	#footer .shareBox .instagram { padding: 5.3% 0;}
	#footer .shareBox h4,
	#footer .shareBox a { font-size: 4.25vw;}
	#footer .footerLink { font-size: 3.2vw;}
	#footer .fNavi { width: 100%; float: none; margin: 0 auto 1em auto;}
	#footer .fNavi ul { text-align: center;}
	#footer .copyright { float: none; text-align: center;}

  .brand {border: 0; margin: 0 auto 30px; padding: 0 10px;}
  .brand label {display: block; width: 100%; margin: 20px auto 10px; font-size: 14px; text-align: center;}
  .brand label span {display: inline;}

  .lstLogo {margin: 0 auto 0;}
  .lstLogo ul li {float: left; width: 50%; text-align: center; padding: 30px 5px; border: 0 !important;}
  .lstLogo ul li a img {max-width: 109px;}
	
	.fcModalWrap .fcModal { padding: 20px 15px;}
	.fcModalWrap .flowBox { padding: 10px; border: 3px solid #007aff; margin: 10px 0 15px;}
	.fcModalWrap .tit { font-size: 16px; padding-bottom: 7px; margin-bottom: 7px;}
	.fcModalWrap .txt { font-size: 14px; margin-bottom: 10px; line-height: 1.4em;}
	.fcModalWrap .txt br{ display: none;}
	.fcModalWrap .flowBox li { font-size: 14px;}
/*
	.fcModalWrap .bntBox ul { font-size: 16px;}
	.fcModalWrap .bntBox li { flex-basis: calc((100% - 15px)/2);}
*/
	.fcModalWrap .bntBox .enterBtn,
	.fcModalWrap .bntBox .appBtn a{ background-position: right 10px bottom 10px; font-size: 14px;}
}
/*END MODIFY 0604*/




/* add 21.04.07 */
.hdLogoWrap{ padding: 15px 2.08% 15px; border-bottom: 1px solid #eee;}
.hdLogoWrap .inBox{ display: flex; align-items: center;}
.hdLogoWrap img{ max-height: 45px}
.hdLogoWrap .txt{ margin-left: 10px; font-size: 11px}

.ftLogoWrap{ max-width: 1220px; width: 100%; margin: 0 auto; padding: 0 10px 40px;}
.ftLogoWrap .tit{ font-size: 16px; margin-bottom: 5px;}
.ftLogoWrap .inBox{ max-width: 160px;}
.ftLogoWrap img{ max-width: 100%; max-height: 80px; display: block;}
.ftLogoWrap .logoList{ display: flex; flex-wrap: wrap;}
.ftLogoWrap .logoList li{ display: flex; justify-content: center; align-items: center; padding: 40px 20px; border: 1px solid #ccc; border-left: none; box-sizing: border-box;}
.ftLogoWrap li .inBox,
.ftLogoWrap li a{ display: inline-block;}
.ftLogoWrap .sptBox{ border: none; padding: 0;}
.ftLogoWrap .sptBox ul{ display: flex; align-items: center; margin-top: 10px;}
.ftLogoWrap .sptBox li:first-of-type{ margin-right: 10px;}
.ftLogoWrap .sptBox img{ max-height: 70px;}
.ftLogo-2nd{ margin-top: 40px;}
.ftLogo-2nd li{ background: #f3eee6;}

@media screen and (min-width:1060px){
	.ftLogoWrap .sptBox{ padding: 0 0 0 20px; justify-content: flex-end;}
	.ftLogoWrap .sptBox .inBox{ max-width: 200px; max-height: 100px;}
}
@media screen and (max-width:1024px) {
/*
	.hdLogoWrap{ left: auto; right: 460px; text-align: right}
	.hdLogoWrap img{ max-height: 35px}
	.hdLogoWrap .txt{ transform: scale(0.85); transform-origin: 100% 0;}
*/
}
@media screen and (min-width:768px){
	.ftLogoRow{ display: flex; align-items: center;}
	.ftLogoRow .colL{ order: 1; flex-basis: 80%;}
	.ftLogoRow .colR{ order: 2; flex-basis: 20%; padding-left: 20px;}
	.ftLogoWrap .logoList{ border-left: 1px solid #ccc;}
	.ftLogoWrap .ftLogo-1st .logoList li{ flex-basis: 25%; width: 25%;}
	.ftLogoWrap .ftLogo-2nd .logoList li{ flex-basis: 20%; width: 20%;}
	.ftLogoWrap li:nth-of-type(n+6){ border-top: none;}
}
@media screen and (max-width:767px) {
	.hdLogoWrap .inBox{ justify-content: center;}
	.hdLogoWrap img{ max-height: 35px}
	.hdLogoWrap .txt{ margin-left: 7px; font-size: 10px}
	.ftLogoWrap .logoList>li{ flex-basis: 50%; width: 50%; padding: 30px 10px; }
	.ftLogoWrap .logoList>li:nth-of-type(n+3){ border-top: none;}
	.ftLogoWrap .logoList>li:nth-of-type(odd){ border-left: 1px solid #ccc;}
	.ftLogoWrap .colR{ border: none; flex-basis: 100%; width: 100%; margin-bottom: 40px;}
	.ftLogoWrap .sptBox{ max-width: 280px; margin: 0 auto;}
	.ftLogoWrap .sptBox img{ max-height: 80px;}
}