@charset "utf-8";

/* 共通 */
@font-face {
  font-family: 'mop';
  src:  url('../fonts/mop.eot?9ee1eo');
  src:  url('../fonts/mop.eot?9ee1eo#iefix') format('embedded-opentype'),
    url('../fonts/mop.ttf?9ee1eo') format('truetype'),
    url('../fonts/mop.woff?9ee1eo') format('woff'),
    url('../fonts/mop.svg?9ee1eo#mop') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'mop' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-service_foreign:before {
  content: "\e92c";
}
.icon-osusumeitem:before {
  content: "\e92d";
}
.icon-shopnews:before {
  content: "\e900";
}
.icon-busreservation:before {
  content: "\e901";
}
.icon-card:before {
  content: "\e902";
}
.icon-clock:before {
  content: "\e903";
}
.icon-eventnewsitem:before {
  content: "\e904";
}
.icon-facility:before {
  content: "\e905";
}
.icon-mailmag:before {
  content: "\e906";
}
.icon-news:before {
  content: "\e907";
}
.icon-notepc:before {
  content: "\e908";
}
.icon-openrenewal:before {
  content: "\e909";
}
.icon-oshirase:before {
  content: "\e90a";
}
.icon-osusume:before {
  content: "\e90b";
}
.icon-performer:before {
  content: "\e90c";
}
.icon-point:before {
  content: "\e90d";
}
.icon-recruit:before {
  content: "\e90e";
}
.icon-special:before {
  content: "\e90f";
}
.icon-tour:before {
  content: "\e910";
}
.icon-wagon:before {
  content: "\e911";
}
.icon-access:before {
  content: "\e912";
}
.icon-trainbus:before {
  content: "\e913";
}
.icon-bicycle:before {
  content: "\e914";
}
.icon-bicyclebike:before {
  content: "\e915";
}
.icon-bike:before {
  content: "\e916";
}
.icon-bus:before {
  content: "\e917";
}
.icon-service:before {
  content: "\e918";
}
.icon-service_atm:before {
  content: "\e919";
}
.icon-service_barrierfree:before {
  content: "\e91a";
}
.icon-service_center:before {
  content: "\e91b";
}
.icon-service_child:before {
  content: "\e91c";
}
.icon-service_other:before {
  content: "\e91d";
}
.icon-service_pet:before {
  content: "\e91e";
}
.icon-search_kids:before {
  content: "\e91f";
  font-size: 90%;
}
.icon-search:before {
  content: "\e920";
}
.icon-search_fashion:before {
  content: "\e921";
}
.icon-search_food:before {
  content: "\e922";
}
.icon-search_goods:before {
  content: "\e923";
}
.icon-search_ladies:before {
  content: "\e924";
}
.icon-search_limited:before {
  content: "\e925";
}
.icon-search_mens:before {
  content: "\e926";
}
.icon-search_mensladies:before {
  content: "\e927";
}
.icon-search_service:before {
  content: "\e928";
}
.icon-search_shoes:before {
  content: "\e929";
}
.icon-search_sports:before {
  content: "\e92a";
}
.icon-search_watch:before {
  content: "\e92b";
}
.icon-block {
  font-size:130%;
  margin:0 10px;
  vertical-align:-2px;
}
.icon-position {
  position:relative;
}


#pcHeader {
        height:auto;
	min-height: 183px;
}

/* 共通（グローバルナビ） */
#pcHeader nav .gnavi {
    width: 1000px;
    min-height: 48px;
    margin: 0 auto;
    background-color: #f58500;
    -webkit-box-shadow: 1px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 1px 3px 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    color: #ffffff;
}
#pcHeader nav .gnavi li {
    width: 20%;
    border-right:2px solid #ffffff;
    text-align:center;
}
#pcHeader nav .gnavi li:last-child {
    border-right:none;
}
#pcHeader nav .gnavi a {
    width:100%;
    height:100%;
    color: #ffffff;
    font-size: 130%;
    font-weight: 800;
    padding: 12px 10px;
}
#pcHeader nav .gnavi li a:hover {
    color: #f58500;
    background-color: #fff7ee;
    text-decoration: none;
}
#pcHeader nav .gnavi li a.item1:hover {
    border-radius: 9px 0 0 9px;
}
#pcHeader nav .gnavi li a.item2:hover {
    border-radius: 0 9px 9px 0;
}

/* 共通（右カラム検索窓） */
#mainContents #mainRight .searchForm ul {
    margin-top:10px;
}
#mainContents #mainRight .searchForm ul.pdf li {
    margin-right:0;
    float:none;
}
#mainContents #mainRight .searchForm ul.pdf li a {
    height:auto;
    line-height: 1.4;
    padding:12px 22px 12px 8px;
}
#mainContents #mainRight .searchForm ul.pdf li a span {
    font-size:90%;
}
#mainContents #mainRight .searchForm {
    color: #fff;
}
#mainContents #mainRight .searchForm span.icon-search  {
    position: absolute;
    top: 6px;
    left: 40px;
    font-size: 230%;
}
#mainContents #mainRight .searchForm h2 {
    font-size: 120%;
    font-weight: 700;
    padding-left: 80px;
    text-align: left;
}
#mainContents #mainRight .searchForm h3 {
    font-size: 120%;
    font-weight: 700;
}

#mainContents #mainRight .search_small {
    font-size: 80%;
    font-weight: 700;
}

/* 共通（左カラム見出し） */

/* 2020/10追加 */

.spTopNav {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  padding: 3vw 0;
}
.spTopNav li {
  width: 32.4%;
	height: 30vw;
	margin: 1px;
  text-align: center;
  background: #fff;
}
.spTopNav li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
	width: 100%;
	height: 100%;
	color: #222;
	font-size: 14px;
	line-height: 1;
}
.spTopNav li:nth-child(1) {
	border-top-left-radius: 1.5vw;
}
.spTopNav li:nth-child(3) {
	border-top-right-radius: 1.5vw;
}
.spTopNav li:nth-child(4) {
	border-bottom-left-radius: 1.5vw;
}
.spTopNav li:nth-child(6) {
	border-bottom-right-radius: 1.5vw;
}
.spTopNav li:nth-child(5) a,
.spTopNav li:nth-child(6) a {
	line-height: 2;
}
.spTopNav li img {
  display: inline-block;
	width: 13vw;
	height: 13vw;
  max-width: 100px;
	margin-bottom: 10%;
}

@media screen and (max-width: 375px) {
	.spTopNav li a {
		font-size: 12px;
	}
}

/* 2020/10追加 */

#mainContents #mainLeft .toptitle {
    font-family: "Noto Sans JP";
    font-size: 30px!important;
    font-weight: bold;
    padding: 10px 20px;
}
@media only screen and (max-width: 768px) {
    #mainContents #mainLeft .toptitle {
      font-size: 20px!important;
      padding: 10px 15px;
    }
}
#mainContents #mainLeft .topicon {
  display: none;
}

#mainContents #mainLeft section h2:FIRST-CHILD, 
#mainContents #mainRight section h2:FIRST-CHILD {
    -webkit-border-radius:5px 5px 0 0;
    overflow:visible;
}
#mainContents #mainLeft section h2 img, 
#mainContents #mainRight section h2 img {
    -webkit-border-radius:5px 5px 0 0;
}

/*横浜トップ 外国語バナー*/
#foreign_banner {
	margin-bottom: 30px;
	padding-bottom: 20px;
}
#foreign_banner ul {
	padding: 20px 37px 5px 37px;
}
#foreign_banner li {
	margin: 0 15px 15px 0;
}
#foreign_banner li:nth-child(2n) {
	margin-right: 0;
}

/* ショップを探す */
.searchBox .searchList01 .searchicon {
    font-size: 60px;
}
.searchBox .searchList01 li a {
    text-align: center;
    padding: 22px 0 0 0;
    color:#717372;
    min-height:154px;
}
.searchBox .searchList01 li a:hover {
    color:#888888;
}
.searchBox .searchList01 li .text {
    font-size: 16px;
    font-weight: 800;
    padding: 8px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.searchBox .searchList01 li .text.line1 {
    line-height: 2.8;
}
.searchBox .searchList03 li.yok_pdf {
    width: 100%;
}
.searchBox .searchList03 li.yok_pdf p {
    font-size: 80%;
}
.searchBox > h3 {
    position: static;
}
.searchBox > h3 .red {
    position: static;
}

/* アクセス */
#access .accBtnlist01 {
	display: flex;
	flex-wrap: wrap;
}
#access .accBtnlist01 .accessicon {
    color: #f58500;
    font-size: 32px;
}
#access .accBtnlist01 li {
    width: 155px;
    margin: 0 10px 10px 0;
    text-align:center;
}
#access .accBtnlist01 li a {
    min-height:100px;
    padding: 16px 0 32px;
    border-radius: 10px;
    text-decoration: none;
    height: 100%;
    position: relative;
    background-color: transparent;
    color: #000000;
    border: 1px solid #979797;
}
#access .accBtnlist01 li a:after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #f58800;
  border-right: 2px solid #f58800;
  display: inline-block;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#access .accBtnlist01 li a:hover {
    color:#888888;
}
#access .accBtnlist01 li .text {
    font-family: "Noto Sans JP";
    font-size:140%;
    font-weight:800;
    padding-top:8px;
}
#access .accBtnlist01 li .txt_carshare {
    font-size:120%;
    font-weight:800;
    padding-top:0;
}

/* ニュース */
#mainContents #mainLeft .newstitle {
    min-height:32px;
    background-color: #fe7777;
    color: #ffffff;
    padding: 10px;
    font-size: 120%;
    font-weight: 700;
    margin-bottom: 10px;
}

/* 施設サービス */
#mainContents #mainLeft .info02List .leftman .serviceicon {
  font-size:150%;
  margin:0 10px 0 5px;
  vertical-align:-2px;
}
#mainContents #mainLeft .info02List .leftman a {
    color:#717372;
    text-decoration:none;
}
#mainContents #mainLeft .info02List .leftman a h3 {
  background-image: -moz-linear-gradient( -45deg, rgb(255,114,0) 0%, rgb(251,154,0) 100%);
  background-image: -webkit-linear-gradient( -45deg, rgb(255,114,0) 0%, rgb(251,154,0) 100%);
  background-image: -ms-linear-gradient( -45deg, rgb(255,114,0) 0%, rgb(251,154,0) 100%);
  border-radius: 50px;
  color: #fff;
  font-size: 120%;
  font-weight: bold;
  min-height: 60px;
  padding: 16px 10px;
  position: relative;
}
#mainContents #mainLeft .info02List .leftman a h3:hover {
  opacity: .7;
}
#mainContents #mainLeft .info02List .leftman ul li a {
    text-decoration:underline;
}
#mainContents #mainLeft .info02List .leftman ul li a:hover {
    text-decoration:none;
    color:#717372;
}

#mainContents #mainLeft #info02 .serviceList li {
    width: 320px;
}
#info02 .serviceList li:nth-child(2n) {
    margin-right:0;
}
#info02 .serviceList li:nth-child(3) {
    margin-right:10px;
}
#mainContents #mainLeft #info02 .serviceList li .serviceicon {
  font-size:150%;
  margin:0 10px 0 5px;
  vertical-align:-2px;
}
#mainContents #mainLeft #info02 .serviceList li a {
    font-size: 110%;
    text-decoration: none;
    display: block;
    background-image: -moz-linear-gradient( -45deg, rgb(255,114,0) 0%, rgb(251,154,0) 100%);
    background-image: -webkit-linear-gradient( -45deg, rgb(255,114,0) 0%, rgb(251,154,0) 100%);
    background-image: -ms-linear-gradient( -45deg, rgb(255,114,0) 0%, rgb(251,154,0) 100%);
    color: #fff;
    font-weight: bold;
    border-radius: 50px;
    padding: 13.5px 26px 13.5px 14px;
}
#mainContents #mainLeft #info02 .serviceList li a.current {
    background: #b4b4b4;
    color:#ffffff;
}
#mainContents #mainLeft #info02 .serviceList li a:hover {
    color:#ffffff;
    opacity: .7;
    text-decoration:none;
}
#mainContents #mainLeft .info02List .leftman a h3 div.othersforeign {
    position: absolute;
    left: 50px;
    top: 12px;
    font-weight: 800;
}

#info02 #foreign {
    margin-top: 40px;
}

#info02 #foreign h3 {
    background: url(/mop/common/images/store_common/bg_service07.png) left top no-repeat;
    background-size: 32px 32px;
    padding-left: 50px;
    font-size: 24px;
    min-height: 30px;
    margin-bottom: 20px;
    padding-top: 3px;
}




/* スマホ */
@media screen and (max-width: 640px) {

/* 共通 */
.icon-block {
  font-size:100%;
  margin:0 5px;
  vertical-align:-2px;
}

/* 共通（グローバルナビ） */
#mainContents #mainLeft .spTopbtn {
    width: 100%;
    height: 10vh;
    background-color: #f58500;
    -webkit-box-shadow: 1px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 1px 3px 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
}
#mainContents #mainLeft .spTopbtn div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align:center;
    width: 100%;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}
#mainContents #mainLeft .spTopbtn div.item1 {
    border-right: 1px solid #ffffff;
}
#mainContents #mainLeft .spTopbtn div.item2 {
}
#mainContents #mainLeft .spTopbtn a {
    color: #ffffff;
    width: 100%;
    height: 100%;
    font-size: 3vh;
    font-weight: 800;
}
#mainContents #mainLeft .spTopbtn div.item1 a {
    border-radius: 10px 0 0 10px;
    padding: 3vh 0 0 0;
}
#mainContents #mainLeft .spTopbtn div.item2 a {
    border-radius: 0 10px 10px 0;
    padding: 3vh 0 0 0;
}
#mainContents #mainLeft .spTopbtn a:hover {
    color: #f58500;
    background-color: #fff7ee;
    text-decoration: none;
}

/*横浜トップ 外国語バナー*/
#mainContents #mainLeft section#foreign_banner {
    margin-bottom: 20px;
    background: none;
    padding-bottom: 0;
}
#foreign_banner ul {
    padding: 10px 0 7px 0px;
}
#foreign_banner li {
    margin: 0 2% 8px 0;
    width: 49%;
}
#foreign_banner li:nth-child(2n) {
    margin-right: 0;
}
#foreign_banner li img {
    width: 100%;
    height: auto;
}

/* ショップを探す */

/* 2020/10追加 */

  .spTopNav {
    display: flex;
  }

/* 2020/10追加 */


#mainContents #mainLeft .searchForm {
    position: relative;
    color: #fff;
}
#mainContents #mainLeft .searchForm span.icon-search  {
    position: absolute;
    top: 4vw;
    left: 10vw;
    font-size: 230%;
}
#mainContents #mainLeft .searchForm h2 {
    font-size: 130%;
    font-weight: 700;
    padding: 3vw 10vw 4vw 20vw;
    text-align: left;
}
#mainContents #mainLeft .searchForm h3 {
    font-size: 130%;
    font-weight: 800;
}

.searchBox .searchList01 .searchicon{
    font-size: 2.8em;
}
.searchBox .searchList01 li a {
    text-align: center;
    padding: 1em 0;
    color: #717372;
    height: 8em;
    min-height: auto;
}
.searchBox .searchList01 li i {
}
.searchBox .searchList01 li .text {
    font-size: 2.8vw;
    padding: 0.3em;
    margin-top:0.6em;
}

/* アクセス */
#access .accBtnlist01 li {
    width: 48%;
    margin: 0 10px 10px 0;
}
#access .accBtnlist01 li:nth-child(2n) {
    margin: 0 0 10px 0;
}


/* 施設サービス */
#mainContents #mainLeft #info02 .serviceList {
    margin-bottom: 30px;
}
#mainContents #mainLeft #info02 .serviceList li {
    float: none;
    margin-right: 0;
    width: 100%;
}
#mainContents #mainLeft .info02List .leftman ul {
    padding: 0 8px;
}
#mainContents #mainLeft .info02List .leftman ul li {
    margin-bottom: 14px;
}

}

/*PARK_P2-388*/
#access .accBtnlist01 .accessicon-train , .accessicon-bus , .accessicon-bus , .accessicon-carshare ,.accessicon-tourbus, .accessicon-bike{
  color: #f58500;
}

#access .access-btn a {text-decoration:none}
.cl-notranslate {font-size: 100%;font-weight: 700;}
.access-btn a:hover {
  opacity: .7;
}
#access .access-menu-list-sapporo {  justify-content: flex-start;}
@media screen and (min-width: 769px){
  #access .access-menu-list { margin-top: 0px;  display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100%; }
  #access .access-menu-list li { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 195px; height: 60px; border-radius: 3px;text-align: center; margin-top: 11.66px; margin-left: 11.66px; }
  #access .access-menu-list li a {min-height:auto;padding:0;height:auto}
  #access .access-menu-list li a .access-menu-list-inner { display: -webkit-flex; display: flex;  align-items: center; height: 60px; text-align: left; margin-left: 5%;}
  .access-menu-width {
    width: 66%;
  }
  #access .accBtnlist01 .accessicon { font-size: 23px; margin-left: 3%;}
  #access .accBtnlist01 li a:after {content: none;}
  #access .access-menu-list li a::before {content: ""; position: absolute; margin-top: 25px;  margin-left: 65px; width: 8px; height: 8px; vertical-align: middle; border-bottom: 1px solid #f58800; border-right: 1px solid #f58800; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
  #access .accBtnlist01 .accessicon-train ,.accessicon-carshare ,.accessicon-tourbus ,.accessicon-bike {
    font-size: 15px;
    margin-left: 3%;
  }
  #access .access-menu-list li a {border-radius: 5px;}
  #access .accBtnlist01 .accessicon-bus {
    font-size: 17px;
    margin-left: 3%;
  }
  #access .access-menu-cont{
    text-align: center;
    font-size: 16px;
    width: 50%;
  }
  .access-list-btn { display: flex; justify-content: space-between; margin-bottom: 30px; }
  .access-list-btn .access-btn {text-align: center;margin-top: 10px;width: 100%;}
  .access-list-btn .access-btn .btn-st-custom {
    background-image: -webkit-linear-gradient( -45deg, rgb(255,114,0) 0%, rgb(251,154,0) 100%);
    border-radius: 50px;
    color: #fff;
    padding: 20px;
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0px auto 0;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
  }
  #access .access-menu-list-sapporo {  justify-content: flex-start;}
}
@media screen and (max-width: 769px) {
  #access .access-menu-list { margin-top: 0px;  display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100%;padding: 0;}
  #access .access-menu-list li { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 48%;; height: 60px; border-radius: 3px;text-align: center;}
  #access .access-menu-list li a {min-height:auto;padding:0;height:auto}
  #access .access-menu-list li a .access-menu-list-inner { display: -webkit-flex; display: flex;  align-items: center; height: 50px; text-align: left; margin-left: 5%;}
  .access-menu-width {
    width: 66%;
  }
  #access .accBtnlist01 .accessicon { font-size: 20px; margin-left: 3%;}
  #access .accBtnlist01 li a:after {content: none;}
  #access .access-menu-list li a::before {content: ""; position: absolute; margin-top: 20px;  margin-left: 55px; width: 8px; height: 8px; vertical-align: middle; border-bottom: 1px solid #f58800; border-right: 1px solid #f58800; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
  #access .access-menu-list li a {border-radius: 5px;}
  #access .accBtnlist01 .accessicon-carshare ,.accessicon-tourbus , .accessicon-train ,.accessicon-bus ,.accessicon-bike {
    font-size: 17px;
    margin-left: 3%;
  }

  #access .access-menu-cont{
    text-align: center;
    font-size: 16px;
    width: 50%;
  }
  .access-list-btn { display: block; margin: 0 0 30px; }
  .access-list-btn .access-btn {text-align: center;margin-top: 15px;width: 100%;}
  .access-list-btn .access-btn .btn-st-custom {
    background-image: -webkit-linear-gradient( -45deg, rgb(255,114,0) 0%, rgb(251,154,0) 100%);
    border-radius: 50px;
    color: #fff;
    padding: 8px;
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 20px auto 0;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
  }
  #access .access-menu-list-sapporo {  justify-content: flex-start;}
}
/*PARK_P2-388*/

/* PARK_P2-532  Start*/
@media only screen and (min-width: 768px) {
  #mainContents #mainLeft #info02 .serviceList li{
    width: 310px;
  }
  #info02 .serviceList li:nth-child(2n) {
    margin-right: 10px;
  }
  #detail ul[class="clearfix"] {
    display: flex;
    justify-content: flex-start;
  }
  #detail .other-shops ul li {
    width: 145px;
    height: 150px;
    margin-right: 5rem;
  }
  #detail .other-shops ul li .image {
    width: 145px;
    height: 150px;
  }
}
/* PARK_P2-532  End*/