@charset "utf-8"; /*■■■■■■■■■■■■■■■■■■■■■■■■■   検索結果 用(/search/フォルダ内)  ■■■■■■■■■■■■■■■■■■■■■■■■■*/ /* ▼▼▼▼▼ PCレイアウト : 1200 px以上。 ▼▼▼▼▼ */ /* ■■■■■ 検索一覧 ■■■■■ */ .search_condition{ position: relative; padding: 0 0 0 120px; margin: 10px 10px 20px; font-size: 14px; line-height: 1.4em; border: 1px solid #5a5a5a; } .search_condition em{ display: block; background: #e6e6e6; position: absolute; top: 0; left: 0; width: 120px; height: 100%; padding: 10px 0; text-align: center; color: #f14e55; font-style: normal; font-weight: bold; } .search_condition p{ padding: 10px; } /* ■■■ パーティーリスト ■■■ */ .search_list{ margin: 10px; } .search_list article{ border-top: 3px dotted #aaa; padding: 23px 0 20px; overflow: hidden; } .search_list article:first-child{ border-top: 0; padding: 0 0 20px; } .search_list article p.left_img{ width: 270px; float: left; margin: 0; text-align: center; word-break: break-all; } .search_list article p.left_img img{ display: block; width: 100%; margin-bottom: 5px; } .search_list article p .coupon, .coupon{ display: block; margin-top: 10px; padding: 10px 0; border-radius: 8px; background: #f3676d; color: #fff; text-align: center; } .coupon{ display: inline-block; padding: 5px 10px; margin: 0; text-align: center; } .search_list article p a.coupon:hover{ background: #f3474d; text-decoration: none; } .search_list article p{ margin: 0 0 0 280px; } .search_list article h3{ margin: 0 0 10px 280px; font-weight: bold; font-size: 140%; color: #f14e55; } .search_list article h3 a{ color: #f14e55; text-decoration: none; } .search_list article h3 a small{ display: block; font-size: 14px; font-weight: normal; line-height: 1.5em; color: #333; } .search_list article h3 a:hover{ text-decoration: underline; } .search_list article h3 time{ display: block; } .search_list article h3 a:hover time u, .search_list article h3 time u{ text-decoration: none; font-size: 80%; font-weight: normal; color: #333; } p.hall, p.reserved_condition{ position: relative; padding: 5px 0 5px 105px; margin-bottom: 10px !important; } p.reserved_condition{ padding: 0 0 0 105px; } .hall em, .reserved_condition em{ display: block; position: absolute; top: 0; left: 0; width: 95px; background: #5a5a5a; color: #fff; padding: 5px 0; text-align: center; height: 100%; vertical-align: middle; } .hall em::before, .reserved_condition em::before{ content: ""; display: inline-block; height: 100%; width: 0; vertical-align: middle; } .reserved_condition > span{ display: inline-block; padding: 5px 0 5px 25px; margin-right: 15px; font-weight: bold; font-size: 15px; line-height: 25px; color: #f48640; } .reserved_condition > span:last-child{ margin-right: 0; } span.man{ background: url(../img/common/icon_man.png) no-repeat left center; background-size: 23px; } span.woman{ background: url(../img/common/icon_woman.png) no-repeat left center; background-size: 23px; } span.hobo{ color: #f48640; } span.ka{ color: #0071bc; } span.full{ color: #ed1c24; } /* ■■■■■ パーティー詳細 ■■■■■ */ .search_details{ margin: 10px; } .search_details p .coupon{ float: left; } .search_details .notice{ background: #ffced5; padding: 10px; font-weight: bold; font-size: 120%; color: #f14e55; text-align: center; border: 2px solid #f14e55; border-radius: 8px; } .search_details .notice:before{ content: "!"; display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; background: #f14e55; color: #fff; margin-right: 5px; border-radius: 15px; } .left_info{ width: 600px; float: left; margin-bottom: 20px; } .left_info p.date{ font-size: 150%; color: #f14e55; margin-bottom: 5px; } .left_info h3{ font-size: 190%; line-height: 1.2em; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 3px dotted #5a5a5a; } .left_info form{ text-align: center; } .left_info button{ width: 90%; } .right_img{ width: 270px; float: right; margin-bottom: 20px; } .right_img img{ width: 100%; } .search_details p.words{ clear: both; padding-top: 5px; } .search_details p.tel{ padding: 10px; background: #ffced5; border-radius: 7px; text-align: center; } .search_details p.tel strong{ font-size: 180%; line-height: 1.2em; color: #f14e55; } .search_details p.tel strong .tel_num a{ color: #f14e55; } .party_info { border-top: 4px solid #5a5a5a; margin: 30px 0; text-align: left; } .party_info dl{ position: relative; padding: 15px 10px 15px 115px; border-bottom: 2px solid #5a5a5a; overflow: hidden; } .party_info dl dt{ display: block; position: absolute; top: 10px; left: 10px; width: 95px; height: calc(100% - 20px); height: -webkit-calc(100% - 20px); background: #5a5a5a; color: #fff; padding: 5px 0; text-align: center; vertical-align: middle; } .party_info dl dt i{ display: inline-block; height: 100%; width: 0; vertical-align: middle; } .party_info dl dt span{ display: inline-block; vertical-align: middle; } .party_info dl dd p.man, .party_info dl dd p.woman{ width: 50%; float: left; padding: 5px 0 5px 25px; } .party_info dl dd p.man{ background: url(../img/common/icon_man.png) no-repeat left 2px; background-size: 23px; } .party_info dl dd p.woman{ background: url(../img/common/icon_woman.png) no-repeat left 2px; background-size: 23px; } .party_button{ background: #c8c8c8; padding: 10px 0; margin: 30px 0; text-align: center; } .party_button form{ display: inline; } .party_button button{ border: 1px solid #fff; height: 80px; } .company_info{ border: 4px solid #8cc63f; background: #fff; padding: 20px; margin: 0 10px 40px; border-radius: 10px; } .company_info h3{ border: 2px solid #8cc63f; background: #fff; padding: 5px 10px; margin: 0 0 15px; font-weight: bold; font-size: 180%; line-height: 1.3em; color: #8cc63f; } .company_info p.t_c img{ width: 360px; } .company_info p{ margin: 10px 10px 15px; word-wrap: break-word; overflow: hidden; } .company_info .w50{ width: 49%; } .company_info .w50.r{ float: right; } .company_info .w50.l{ float: left; } .company_info p em{ float: left; width: 23.4%; margin: 0 0.8% 10px; background: #f58488; padding: 8px 0; text-align: center; font-size: 18px; line-height: 1.2em; color: #fff; border-radius: 8px; white-space: nowrap; } .company_info h4{ clear: both; padding: 5px 10px; background: #e6e6e6; font-size: 14px; font-weight: bold; line-height: 1.4em; color: #000; } .company_info p.goto_site { text-align: center; } .company_info p.goto_site a{ display: block; margin: 0 auto; max-width: 320px; padding: 10px 0; background: #acd674; font-size: 180%; line-height: 1.3em; color: #fff; } .company_info p.goto_site a:hover{ background: #8cc63f; text-decoration: none; } /* ■■■■■ 都道府県から婚活パーティーを探す ■■■■■ */ .top_prefecture{ clear: both; padding-top: 30px; margin: 0 auto 40px; max-width: 1200px; overflow: hidden; } .top_prefecture div{ position: relative; width: 50%; float: left; padding: 0 50px 0 0; } .top_prefecture div.first{ padding: 0 0 0 50px; } .top_prefecture div p{ position: relative; padding: 0 0 0 120px; margin: 0 0 10px; font-size: 0; } .top_prefecture div p strong{ display: block; position: absolute; left: 0; font-size: 14px; line-height: 1.7em; color: #8cc63f; } .top_prefecture div p strong a{ color: #8cc63f; } .top_prefecture div p > a{ display: inline-block; width: 14.2%; font-size: 14px; line-height: 1.7em; color: #333; } .goto_list{ display: block; max-width: 510px; margin: 20px auto 0; padding: 10px 0; background: #8cc63f; text-align: center; font-weight: bold; font-size: 15px; line-height: 1.5em; color: #fff; } .party_list{ position: relative; margin: 10px 10px 40px; } .party_list h4{ border: 2px solid #8cc63f; padding: 5px 10px; margin: 0 -10px; font-size: 24px; line-height: 1.2em; color: #8cc63f; } .party_list div{ border-top: 3px dotted #aaa; padding: 13px 0 10px; overflow: hidden; line-height: 1.3em; } .party_list h4 + div, .party_list div:first-child{ border-top: 0; } .party_list div img{ width: 115px; float: left; } .party_list div p{ margin: 5px 0 5px 125px; } .party_list div p.words{ position: relative; /* max-height: 2.6em; text-overflow: ellipsis; overflow: hidden;*/ } /* .party_list div p.words a{ position: absolute; display: inline-block; padding: 0; background: #fff; bottom: 0; right: 0; } */ .party_list div p.address{ font-size: 85%; color: #555; } .party_list div p.address::before{ content: "開催場所:"; } .party_list div h3{ margin: 0 0 4px 125px; font-weight: bold; font-size: 110%; color: #8cc63f; } .party_list div h3 a{ color: #8cc63f; text-decoration: underline; } .party_list div h3 a:hover{ text-decoration: none; } .party_list div p.reserved_condition{ border: 2px solid #e6e6e6; text-align: center; padding: 0 15px; margin: 0 0 0 10px; float: right; } /* プレミアムフライデー(2017/3/15追加) */ .mincho{ font-family: "游明朝", "ヒラギノ明朝 Pro W4", "Hiragino Mincho Pro", "HGS明朝B", "MingLiU", "SimSun", "MS P明朝", serif !important; } .premium h3{ font-weight: bold; font-size: 240%; color: #8cc63f; line-height: 1.3em; margin: 10px 0 10px; } .premium{ margin: 0 10px 30px; } /* ▼▼▼▼▼ タブレットレイアウト : 800 px ~ 1200 px。PCレイアウトからスタイルを継承。 ▼▼▼▼▼ */ @media only screen and (max-width: 1200px){ /* ■■■■■ 検索一覧 ■■■■■ */ /* ■■■ パーティーリスト ■■■ */ .search_list article p.left_img{ width: 160px; float: left; } .search_list article p{ margin: 0 0 0 170px; } .search_list article h3{ margin: 0 0 10px 170px; } /* ■■■■■ パーティー詳細 ■■■■■ */ .left_info{ width: 65%; } .right_img{ width: 33%; } .company_info p em{ font-size: 14px; } /* ■■■■■ 都道府県から婚活パーティーを探す ■■■■■ */ .top_prefecture div p > a{ width: 16.666666%; } .top_prefecture div{ padding: 0 25px 0 0; } .top_prefecture div.first{ padding: 0 0 0 25px; } /* ■■■■■ パーティーリスト ■■■■■ */ .party_list div p{ margin-left: 125px; } .party_list div h3{ margin-left: 125px; } /* プレミアムフライデー(2017/3/15追加) */ .premium h3{ font-size: 220%; } } @media only screen and (max-width: 1000px){ /* ■■■■■ 都道府県から婚活パーティーを探す ■■■■■ */ .top_prefecture div p > a{ width: 25%; } .top_prefecture div{ padding: 0; } .top_prefecture div.first{ padding: 0 0 0 10px; } /* プレミアムフライデー(2017/3/15追加) */ .premium h3{ font-size: 200%; } } /* ▼▼▼▼▼ モバイルレイアウト : 799 px およびそれ以下。PCレイアウトからスタイルを継承 ▼▼▼▼▼ */ @media only screen and (max-width: 799px){ /* ■■■■■ 検索一覧 ■■■■■ */ /* ■■■ パーティーリスト ■■■ */ .search_list article, .search_list article:first-child{ padding-left: 10px; padding-right: 10px; } .tab_date{ margin: 10px; } .search_list article p.left_img{ width: 80px; } .search_list article p{ margin: 0 0 0 90px; } .search_list article h3{ margin: 0 0 10px 90px; } p.hall, p.reserved_condition{ padding: 5px 0 5px 65px; font-size: 12px; } p.reserved_condition{ padding: 0 0 0 65px; } .hall em, .reserved_condition em{ width: 60px; } /* ■■■■■ パーティー詳細 ■■■■■ */ .left_info h3{ font-size: 140%; line-height: 1.2em; } .left_info p.date{ font-size: 130%; } .search_details{ margin: 10px 10px 20px; } .search_details p.words{ padding-top: 10px; } .right_img, .left_info{ width: auto; float: none; margin: 10px 0 20px; } .party_info dl{ padding: 10px; } .party_info dl dt{ position: relative; width: auto; text-align: left; top: 0; left: 0; background: transparent; color: #000; font-weight: bold; } .party_info dl dd p.man, .party_info dl dd p.woman{ width: auto; float: none; } .party_button button{ height: 50px; width: 50%; border-radius: 15px; font-size: 12px; } .company_info{ margin: 10px 10px 20px; padding: 15px; } .company_info h3{ font-size: 120%; line-height: 1.3em; } .company_info p.t_c img{ width: 180px; } .company_info .w50{ width: auto; } .company_info .w50.r, .company_info .w50.l{ float: none; } .company_info p em{ width: 31.3333%; margin: 0 1% 10px; font-size: 13px; line-height: 1.2em; } /* ■■■■■ 都道府県から婚活パーティーを探す ■■■■■ */ .top_prefecture div p{ padding: 0 0 5px 110px; } .top_prefecture div p > a{ color: #0071bc; } /* ■■■■■ パーティーリスト ■■■■■ */ .party_list div, .party_list div:first-child{ padding-left: 10px; padding-right: 10px; } .tab_date{ margin: 10px; } .party_list div img{ width: 80px; float: left; } .party_list div p{ margin-left: 90px; } .party_list div p.reserved_condition{ float: none; margin-left: 90px; } .party_list div h3{ margin-left: 90px; } .party_list div p.words{ display: none; } .party_list h4{ font-weight: bold; font-size: 16px; line-height: 1.2em; } /* プレミアムフライデー(2017/3/15追加) */ .premium h3{ font-size: 180%; } } @media only screen and (max-width: 600px){ .party_button button{ width: 70%; } /* ■■■■■ 都道府県から婚活パーティーを探す ■■■■■ */ .top_prefecture div.first, .top_prefecture div{ width: auto; float: none; padding: 0 10px; } .top_prefecture div p{ padding: 0 0 5px 110px; border-bottom: 1px solid #ace65f; } .goto_list{ max-width: none; margin: 20px 10px 0; } /* プレミアムフライデー(2017/3/15追加) */ .premium h3{ font-size: 160%; } } @media only screen and (max-width: 400px){ .company_info p em{ width: 48%; } .party_button button{ width: 90%; } /* ■■■■■ 都道府県から婚活パーティーを探す ■■■■■ */ .top_prefecture div p > a{ width: 33.333%; } /* プレミアムフライデー(2017/3/15追加) */ .premium h3{ font-size: 130%; } }