@charset "UTF-8"; /* CSS Document */ /* 基本-モバイルファースト ======================================================================================================== */ .search_list_ .t{ font-size: 21px; font-weight: bold; background-color: #f7e8eb; padding: 0 20px; } .search_list_ .tm { font-size: 16px; font-weight: bold; background-color: #e3e3e3; padding: 8px 20px; } .search_list_ .tmm { font-size: 16px; font-weight: bold; background-color: #fbf4f5; padding: 0 20px; } .search_list_ ul li{ border-bottom: solid 1px #e3e3e3; padding: 5px 20px; } .search_list_ ul li:last-child{ border-bottom: none; } .search_list_ ul li a{ text-decoration: underline; } .search_list_ ul li label{ display: block; width: 100%; padding: 5px 20px; } .search_list_ ul li .n{ font-size: 10px; } .search_btn_box{ padding: 5vw; } /* エリアから探す */ /* スマホのみ======================================================================================================== */ @media screen and (max-width: 750px){ .contents_size#search{ margin: 0; } #area_search ul{ border-top: solid 1px #e3e3e3; } #area_search li{ border-bottom: solid 1px #e3e3e3; } #area_search li a{ display: block; padding: 10px; position: relative; } #area_search li a::after{ content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; position: absolute; top: 0; bottom: 0; right: 13px; margin: auto; border-top: 1px solid #ccc; border-right: 1px solid #ccc; transform: rotate(45deg); } #area_search li .en{ display: none; } } /* PCのみ======================================================================================================== */ @media print and (min-width: 751px), screen and (min-width: 751px){ .search_list_ section{ margin-bottom: 40px; } .search_list_ ul{ display: flex; flex-wrap: wrap; align-items: flex-start; } .search_list_ ul li{ border-bottom: none; width: 33.33%; padding: 10px 0; } .search_list_ ul li label{ display: inline-block; width: auto; padding: 10px 0; } .search_btn_box{ padding: 0; } /* エリアから探す */ #area_search{ width: 1100px; margin-right: auto; margin-left: auto; position: relative; } #area_search li{ position: absolute; } #area_search li.tokyo{ top: 250px; left: 400px;} #area_search li.kanagawa{ top: 380px; left: 350px;} #area_search li.chiba{ top: 280px; left: 700px;} #area_search li.saitama{ top: 100px; left: 350px;} #area_search li.ibaraki{ top: 50px; left: 700px;} #area_search li a{ display: inline-block; } #area_search li a:hover{ transform: scale(1.2); } #area_search li a::before{ content: ""; display: inline-block; vertical-align: middle; background-image: url(../shop/images/map_pin.svg); background-repeat: no-repeat; background-position: left top; background-size: 100%; color: #fff; font-size: 10px; line-height: 18px; font-weight: bold; text-align: center; width: 28px; height: 40px; box-sizing: border-box; } #area_search li p{ display: none; } #area_search li .en{ display: block; font-size: 30px; line-height: 1.4; } } /* 2026/04/02 追記 */ /* 見出しをボタンっぽく見せる */ h4.tm { position: relative; cursor: pointer; padding: 14px 44px 14px 16px; margin: 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #f7f7f7; transition: background-color 0.2s ease; } h4.tm:hover { background: #efefef; } /* h4.tm:focus { outline: 2px solid #333; outline-offset: 2px; } */ /* 開閉アイコン */ h4.tm::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; line-height: 1; } h4.tm.is-open::after { content: "−"; } /* JSで生成する開閉対象ラッパー */ .tm-accordion-panel { overflow: hidden; } /* 初期は閉じる */ .tm-accordion-panel[hidden] { display: none; } h4.tm::before { content: ""; width: 0; height: 0; border-left: 6px solid #333; border-top: 4px solid transparent; border-bottom: 4px solid transparent; position: absolute; left: 10px; top: 50%; transform: translateY(-50%) rotate(0deg); transition: transform 0.2s ease; } h4.tm.is-open::before { transform: translateY(-50%) rotate(90deg); } h4.tm.is-odd { background: #f7f7f7; } h4.tm.is-even { background: #e9e9e9; }