@charset "UTF-8"; /* ======================================= office-info ======================================= */ .office-info{ margin-top: 63px; display: flex; align-items: center; justify-content: space-between; max-width: 1145px; margin-right: auto; margin-left: auto; position: relative; } .office-info::after{ content:""; display:block; width:100%; height:1px; background-color:#707070; position:absolute; bottom:-20px; left:0px; } .office-info .office-title{ width: 50%; /* 20220131 korenaga */ display:flex; flex-wrap:wrap; /* //korenaga */ } .office-info .office-title .offer{ min-width: 63px; height: 38px; background-color: #F29100; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: bold; margin-bottom: 12px; /* 20220131 korenaga */ max-width:300px; padding:5px 10px; /* //korenaga */ } .office-info .office-title h3.office-add{ font-size: 35px; font-weight: bold; color: #000; padding-top: 0px; /* 20220131 korenaga */ width:100%; /* //korenaga */ } .office-info .office-title .office-add-sub{ font-size: 20px; font-weight: bold; color: #000; /* padding-top: 10px; */ display: flex; align-items: center; } .office-info .office-title .office-add .wark-time, .office-info .office-title .office-add-sub .wark-time{ color: #FB1010; } .office-info .office-title .office-add-sub .office-number{ font-size: 16px; font-weight: normal; color: #000; margin-left: 18px; } .office-contact{ width: 50%; max-width: 529px; border: 1px solid #707070; padding-top: 18px; padding-bottom: 21px; margin-top: 8px; /* margin-left: -30px; */ } .office-contact .office-contact-title{ text-align: center; font-size: 16px; font-weight: bold; color: #000; padding-bottom: 20px; } .office-contact .office-contact-link{ display: flex; align-items: center; justify-content: space-between; /* justify-content:center; */ max-width: 482px; margin-right: auto; margin-left: auto; } .office-contact .office-contact-link .email-contact{ width: 48%; max-width: 234px; height: 61px; background-color: #F25252; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: bold; } .office-contact .office-contact-link .zoom-contact{ width: 48%; max-width: 235px; height: 61px; background-color: #549BD1; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: bold; } .office-contact .office-contact-link .user-contact{ width: 48%; max-width: 235px; height: 61px; background-color: #000000; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: bold; } .office-imge{ display: flex; align-items: center; justify-content: space-between; margin-top: 58px; margin-bottom: 63px; } .office-imge .office-phote{ width: 48%; text-align:center; } .office-imge .office-drawing{ width: 50%; text-align: center; } .office-imge .office-drawing img{ max-width: 608.5px; margin-right: auto; margin-left: auto; width: 100%; max-height:600px; } .other-office-imge li a { display: flex; max-height: 450px; justify-content: center; align-items: center; overflow: hidden; } .good-info{ background-color: #F2F2F2; text-align: center; max-width: 1133px; margin-right: auto; margin-left: auto; width: 100%; position: relative; padding-top: 55px; padding-bottom: 32px; margin-bottom: 40px; } .good-info .good-info-icon{ position: absolute; width: 127.58px; top: -37px; left: 0; right: 0; margin: auto; } .good-info .good-info-text{ text-align: left; font-size: 16px; font-weight: bold; padding:0 15px; } .tagline { border-top:1px solid #333; width:100%; max-width:1072px; margin:0 auto; } h3.hashttl { border-left:1px solid #333; margin:0; font-family: 'Oswald', sans-serif; font-weight: bold; color:#333; font-size:220%; padding:15px; } ul.tag-link{ display: flex; flex-wrap:wrap; align-items: center; /* justify-content: space-between; */ width:100%; max-width: 1072px; margin-right: auto; margin-left: auto; margin-bottom: 30px; padding-top:15px; padding-bottom:10px; border-top:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #333; } ul.tag-link li{ /* max-width: 163px; height: 52px; */ /* width: 16.66%; */ /* border: 1px solid #707070; */ /* border-radius: 3px; */ margin-right:10px; margin-bottom:5px; } ul.tag-link li a{ color: #000; /* font-size: 16px; */ font-size:130%; font-weight: bold; margin: 0; border-radius: 3px; display: flex; align-items: center; justify-content: center; width:100%; height:100%; /* min-height: 40px; */ padding:0 5px 0 10px; } ul.tag-link li a::before { font-family: "Font Awesome 5 Free"; content: "\f292"; font-weight: 900; color: #204d86; /* margin-right:5px; */ } ul.tag-link li a:hover { background-color:#eee; } ul.tag-link li a p{ line-height:1; padding:8px; word-break: break-all; } .office-detail{ max-width: 1133px; margin-right: auto; margin-left: auto; display: flex; align-items: center; justify-content: space-between; } .office-detail dl{ width: 50%; max-width: 526px; } .office-detail dl dt{ float: left; font-size: 16px; font-weight: bold; width: 30%; height: 67px; display: flex; align-items: center; border-bottom: 1px solid #707070; } .office-detail dl dd{ font-size: 16px; height: 67px; border-bottom: 1px solid #707070; display: flex; align-items: center; } dd { display: block; margin-inline-start: 0; } /* スライダー */ .other-office-imge{ margin-top: 67px; } .other-office-imge ul li{ max-height: 441px; } .menu{ width: 41px; position: fixed; top: 37.8%; right: 1.2%; text-align: center; color: #000; font-size: 15px; font-family: 'Oswald', sans-serif; letter-spacing: 2px; } .top .header .menu { margin-left:8px; } /* 20220224 korenaga */ .image-mem { min-height:430px; display:flex !important; flex-wrap:wrap; justify-content:center; align-items:center; height:100%; width:100%; background-color:#ccc; } .image-membox { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; height:100%; width:100%; background-color:#aaa; position:relative; } .image-membox img { width:100%; position:absolute; z-index:1; filter: blur(10px); } .image-memtxt { color:#fff; font-size:20px; text-align:center; z-index:2; background-color:rgba(0,0,0,0.6); width: 100%; } /* //korenaga */ @media (max-width: 1180px) { .office-imge .office-phote a, .office-imge .office-drawing a { display:flex; max-height:320px; justify-content: center; align-items:center; } .office-detail{ width: 90%; margin-right: auto; margin-left: auto; } .office-info{ width: 95%; } .office-contact .office-contact-link{ width: 95%; } ul.tag-link{ width: 95%; } .other-office-imge li a { max-height: 300px; } .image-mem { min-height:360px; } } @media (max-width: 810px) { .produced,.menu{ display: none; } ul.tag-link{ margin-top: 21px; margin-bottom: 10px; overflow-x: auto; white-space: nowrap; flex-wrap: nowrap; } ul.tag-link li{ width: 148px; height: 47px; display: inline-block; /* width: 100%; */ display: flex; align-items: center; /* justify-content: center; */ margin-left: 17px; text-align: center; } ul.tag-link li a{ width: 148px; } .image-mem { min-height:275px; } } @media (max-width: 768px) { .main{ display: flex; flex-direction: column; } .office-imge{ order: 1; margin-top: 19px; margin-bottom: 32px; } .other-office-imge li a { max-height: 250px; } .office-info{ display: block; order: 2; margin-top: 0; } .good-info{ order: 3; max-width: 356px; width: 95%; margin-right: auto; margin-left: auto; margin-top: 50px; } .office-imge .office-phote{ width: 100%; } .office-imge .office-drawing{ display: none; } .office-info .office-title h3.office-add{ font-size: 25px; } .office-info .office-title .office-add-sub{ font-size: 16px; } .office-info .office-title{ width: 100%; border-bottom: solid 1px #707070; padding-bottom: 16.5px; } .office-info .office-title.office-title1{ border-bottom: none; margin-top: 33px; margin-bottom: 34.5px; max-width: 529px; margin-right: auto; margin-left: auto; } .office-contact{ width: 95%; margin-right: auto; margin-left: auto; } .office-contact .office-contact-link .email-contact{ font-size: 16px; } .office-contact .office-contact-link .zoom-contact{ font-size: 16px; } .office-info::after{ display: none; } .good-info .good-info-icon{ width: 115px; } .good-info .good-info-text{ width: 95%; margin-right: auto; margin-left: auto; text-align: left; font-weight: normal; } .office-contact .office-contact-link{ width: 90%; } .office-detail{ display: block; } .office-detail dl{ width: 90%; margin-right: auto; margin-left: auto; } .image-mem { min-height:235px; } } @media (max-width: 500px) { .other-office-imge ul li{ margin-bottom: 20px; } .image-mem { min-height:200px; } } /* ======================================= recommend ======================================= */ .property{ margin-top: 105px; } .property h3{ font-size: 32px; font-weight: bold; max-width: 1245px; margin-right: auto; margin-left: auto; } .recommend{ margin-top: 20px; display: flex; justify-content: space-between; margin-bottom: 46px; height: 220px; } .recommend_office{ max-width: 1290px; margin-right: 70px; margin-left: auto; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 53px; } .search_tub{ width: 58%; margin-top: -10px; padding-left: 45px; border-left: 1px solid #DCDCDC; } /* click tab */ .block_category_list{ display: flex; width: 100%; margin: 0 auto; justify-content: space-between; margin-bottom: 31px; max-width: 520px; padding-right: 20px; } .block_category_list .border{ width: 165px; } .block_category_list .border .click_tab.is-show{ background-color: #DCDCDC; padding: 5px 10px; color: #000; text-align: center; border-radius: 40px; } .block_category_list .border{ padding-top: 13px; padding-bottom: 12px; position: relative; } .block_category_list .border::after{ content:""; display:block; width:102%; height:1px; background-color:#858585; position:absolute; bottom:0; left:-2px; } .block_category_list .border.border.is-active::after{ display: none; } .block_category_list .border:hover{ cursor: pointer; } .block_category_list .border.is-active{ width: 165px; border-top: 1px solid #858585; border-left: 1px solid #858585; border-right: 1px solid #858585; border-bottom: none; padding-top: 13px; } .block_category_list .border .tab{ background-color: #DCDCDC; color: #000; padding: 5px 10px; text-align: center; border-radius: 40px; width: 137px; height: 37px; display: flex; align-items: center; justify-content: center; margin-right: auto; margin-left: auto; } .block_category_list .border.is-active .tab{ width: 137px; background-color: #3D3D3D; color: #fff; text-align: center; border-radius: 40px; height: 37px; display: flex; align-items: center; justify-content: center; margin-right: auto; margin-left: auto; } .block_category_list .tab_text{ font-size: 16px; font-weight: bold; } .block_category_list .tab_text2{ font-size: 16px; font-weight: bold; } .tab_border{ border-top: 1px solid #000; padding-top: 20px; } .click_tab.is-show{ display: block; padding-left: 28px; } .click_tab{ display: none; } .search_are{ display: flex; flex-wrap: wrap; max-width: 418px; margin: 0 auto; display: flex; justify-content: space-between; } .search_are a{ border: 1px solid #707070; border-radius: 5px; width: 30%; min-width: 126px; max-width: 126px; height: 52px; text-align: center; margin-bottom:20px; font-size: 16px; display: flex; align-items: center; justify-content: center; color: #000; font-weight: bold; } @media (max-width: 1270px) { .property h3{ width: 95%; font-size: 25px; padding-top: 35.5px; } } @media screen and (max-width:800px){ .property h3{ text-align: center; } .recommend{ display: block; margin-top: 33px; height: auto; margin-bottom: 21px; border: none; } .recommend h3{ width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; margin-bottom: 36px; font-size: 25px; border: none; } .search_tub{ display: none; } .search_are a{ width: 125px; font-size: 13px; margin-bottom: 16px; } .block_category_list{ /* padding-right: 0; */ } .recommend_office{ margin-right: auto; } } @media (max-width: 768px) { .property h3{ border-top: 1px solid #707070; } } @media screen and (max-width:500px){ .block_category_list .border{ width: 169px; height: 56px; } .block_category_list .border.is-active{ padding-top: 8px; padding-bottom: 11px; width: 169px; height: 56px; } .block_category_list .border{ padding-top: 8px; } .block_category_list{ margin-bottom: 20px; } .block_category_list .border.is-active .tab{ width: 143px; } .block_category_list .border.is-active .tab .tab_text{ font-size: 13px; } .block_category_list .border .tab{ width: 143px; } .block_category_list .border .tab .tab_text2{ font-size: 13px; } .search_are{ max-width: 269px; } } /* search_breadth */ .search-box{ max-width: 453px; display: flex; justify-content: space-between; margin-right: auto; margin-left: auto; margin-bottom: 22px; } .termslist1{ display: flex; width: 246px; justify-content: space-between; margin-right: auto; margin-left: auto; } .termslist1-1{ display: flex; justify-content: center; } .termslist1-1 .sopAB1{ position: relative; height: 52px; width: 103px; } .input-area{ width: 100%; height: 100%; border-radius: 5px; border: 1px solid #707070; } .tubo{ position: absolute; top: 16px; right: 11px; font-size: 16px; font-weight: bold; } .termslist1-2{ display: flex; align-items: center; padding-left: 5px; font-weight: bold; } .termslist2{ width: 246px; height: 50px; margin: 0 auto; margin-top: 20px; } #sopArea1, #sopArea2{ width: 100%; height: 100%; border-radius: 5px; font-size: 16px; font-weight: bold; padding-left: 15px; } .termslist3{ display: flex; align-items: center; justify-content: flex-end; } .termslist3 a .search-text{ background-color: #FFC743; color: #000; font-size: 16px; font-weight: bold; width: 173px; height: 52px; border-radius: 5px; display: flex; align-items: center; justify-content: center; } .office_link1{ display: flex; } .office_item{ position: relative; padding-left: 42px; max-width: 397px; width: 32%; margin-bottom: 60px; } .office_item::before{ content:""; display:inline-block; width:1px; height:360px; background-color:#DCDCDC; position:absolute; top:-2px; left:24px; } .office_item::after{ content:""; display:block; width:100%; height:1px; background-color:#DCDCDC; position:absolute; bottom:0; left:10px; } .office_item .update { position: absolute; top: -1px; left: 15px; writing-mode: vertical-rl; font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: bold; /* letter-spacing: 1px; */ padding-right: 3px; background-color: #fff; padding-bottom: 15px; } .office_img{ position: relative; } /* 20220202 korenaga */ ul.recommend_office li.office_item div.office_link1 > div.office_img { height: 240px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #eee; } /* //korenaga */ .office_img .img_text{ position: absolute; background-color: #fff; font-size: 18px; right: 0; bottom: 20px; min-height: 38px; padding: 6px 7px; font-weight: bold; display: flex; align-items: center; justify-content: end; text-align:right; line-height:1.3; max-width:85%; opacity:0.85; } .contact{ display: flex; align-items: center; padding-top: 13px; padding-bottom: 15px; } .contact_btn .contact_text{ font-weight: bold; width: 117px; display: flex; align-items: center; justify-content: center; color: #000; background-color: #FFC743; padding-top: 16px; padding-bottom: 10px; border-radius: 3px; font-size: 18px; margin-right: 19px; height: 53px; padding-left: 2px; } .office_info2{ min-width: 48%; margin-top: 5px; letter-spacing: 1; margin-left: -7px; } .office_add{ font-size: 12px; font-weight: bold; } .office_mem{ font-size: 16px; font-weight: bold; line-height:1; color:crimson; } .office_number{ font-size: 12px; margin-top: 4px; font-weight: bold; } /* all_search */ .all_search{ width: 37%; display: flex; align-items: center; justify-content: center; } .all_search a{ display: flex; align-items: center; justify-content: center; background-color: #2E2E2E; color: #fff; width: 100%; max-width: 376px; height: 75px; border-radius: 5px; margin-right: auto; margin-left: auto; font-size: 16px; font-weight: bold; margin-top: 10px; } /* .office_item */ @media (max-width: 1300px){ .office_item::before{ height: 105%; } } @media (max-width: 1200px) { .office_item{ margin-left: 5px; } .office_item::before{ height: 350px; } } @media (max-width: 1000px) { .property{ max-width: 900px; margin-right: auto; margin-left: auto; } .office_item{ max-width: 397px; width: 49%; } .office_info2{ width: 100%; } .office_item::before{ height: 360px; } } @media screen and (max-width:800px){ .office_item{ width: 90%; max-width: 400px; margin-right: auto; margin-left: auto; /* padding-right: 60px; */ } .search-box{ display: block; } .termslist2{ margin-top: 16px; } .termslist3{ justify-content: center; } .termslist3 a{ width: 100%; } .termslist3 a .search-text{ width: 246px; margin-right: auto; margin-left: auto; margin-top: 17px; margin-bottom: 15px; } } @media screen and (max-width:500px){ .termslist1-1 .sopAB1{ width: 103px; } .office_link1{ max-width: 342px; margin-right: auto; margin-left: auto; padding-left: 20px; } .office_item{ margin-right: auto; margin-left: auto; padding-left: 0px; margin-bottom: 30.5px; max-width: 350px; } .office_item:last-of-type{ margin-bottom: 39.5px; } .office_img{ max-width: 322px; height: 266px; } .office_img img{ height: 100%; } .office_item .update{ left: 0; } .office_item::after{ width: 100%; left: 0px; } .office_item::before{ height: 360px; left: 8px; } /* .office_img .img_text{ top: 208px; } */ .contact{ max-width: 342px; margin-right: auto; margin-left: auto; padding-left: 20px; } .contact_btn .contact_text{ font-size: 16px; width: 136px; height: 53px; margin-right: 16.5px; } .office_number{ font-size: 10px; } .all_search{ margin-top: 0; } .search-box{ margin-bottom: 23px; } } /* ======================================= .ranking ======================================= */ .ranking{ height: 421px; background-color: #2E2E2E; margin-top: 58px; margin-bottom: 290px; } .ranking-title{ text-align: center; font-family: 'Oswald', sans-serif; font-weight: normal; font-size: 56px; color: #fff; } .ranking-title h2{ max-width: 267px; margin-right: auto; margin-left: auto; display: flex; align-items: center; justify-content: center; /* height: 83px; */ padding-top: 45px; padding-right: 40px; font-size: 56px; font-family: 'Oswald', sans-serif; font-weight: normal; /* margin-top: 10px; */ } .ranking-title h2 img{ width: 48px; margin-right: 33px; } .group{ position: relative; top: 42px; display: flex; max-width: 1151px; justify-content: space-between; margin: 0 auto; /* margin-left: 10px; */ } .ranking_section{ width: 48%; box-shadow: 0 2px 8px 0px rgba(0, 0, 0, .3); margin-left: -4px; } .ranking_section2{ margin-right: 5px; } .ranking_item a{ display: flex; background-color: #fff; border-top: 1px solid #D1D1D1; max-width: 553px; height: 150px; } .ranking_item a:hover{ opacity: 1; background-color: #fff; } .ranking_img{ max-width: 209px; position: relative; display:flex; align-items:center; justify-content: center; overflow:hidden; } .ranking_img .tiara{ position: absolute; top: 5px; left: 5px; width: 63px; } .ranking_add{ padding-top: 20px; padding-left: 23px; letter-spacing: 0.8px; padding-bottom: 10px; transition: .3s; } .ranking_add .add_title{ font-size: 20px; font-weight: bold; } .ranking_add .add_number{ font-size: 18px; padding-bottom: 10px; } .ranking_contact{ font-size: 18px; color: #000; background-color: #FFC743; display: flex; align-items: center; justify-content: center; width: 153px; height: 53px; border-radius: 5px; font-weight: bold; margin-top: -1px; padding-left: 4px; } .ranking_add .ranking_contact:hover{ opacity: 0.7; transition: .3s; } @media (max-width: 1170px) { .group{ width: 95%; } } @media screen and (max-width:950px){ .ranking_add .add_title{ font-size: 15px; } .ranking_contact{ padding-right: 0; padding-left: 0; } } @media screen and (max-width:800px){ .ranking{ display: none; } .group{ display: block; } .ranking_section{ width: 95%; margin-right: auto; margin-left: auto; box-shadow: none; } .ranking_item{ margin-right: auto; margin-left: auto; border-top: 1px solid #D1D1D1; border-left: 1px solid #D1D1D1; border-right: 1px solid #D1D1D1; } .ranking_item:last-of-type{ border-bottom: 1px solid #D1D1D1; } } @media screen and (max-width:500px){ .ranking{ margin-top: 50px; } .ranking_add .add_title{ padding-bottom: 1px; } .group{ top: 11px; } .ranking-title{ font-size: 41px; padding-top: 25px; } .ranking-title h3{ margin-top: 0; height: auto; padding-top: 0; font-size: 41px; } .ranking-title h3 img{ margin-right: 10px; width: 35px; } .ranking_add{ padding: 0; padding-left: 13px; padding-top: 19.6px; padding-bottom: 5px; } .ranking_add .add_number{ font-size: 12px; } .ranking_contact{ width: 153px; height: 43px; } .ranking_img .ranking_img1{ width: 128px; height: 128px; } } /* ======================================= popular ======================================= */ .popular{ display: flex; justify-content: space-between; margin-top: 48px; margin-bottom: 67px; } .popular_title{ font-size: 26px; width: 20%; display: flex; align-items: center; justify-content: flex-start; position: relative; } .popular_title::after{ content:""; display:inline-block; width:1px; height:158px; background-color:#DCDCDC; position:absolute; top:-10px; right:-23px; } .popular_tag{ width: 75%; max-width: 890px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-top: 10px; } .popular_tag a { height: 52px; border: 1px solid #707070; border-radius: 5px; width: 19%; max-width: 163px; font-size: 16px; font-weight: bold; color: #000; text-align: center; padding-bottom: 10px; padding-top: 10px; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; } .popular_tag a p { line-height:1; } @media (max-width: 1200px) { .popular{ width: 95%; } } @media screen and (max-width:1050px){ .popular_title::after{ content: none; } } @media screen and (max-width:800px){ .popular{ display: none; } .popular_title{ width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 23.8px; font-size: 25px; } .popular_tag{ width: 100%; max-width: 340px; margin-right: auto; margin-left: auto; } .popular_tag a{ width: 163px; margin-right: auto; margin-left: auto; padding: 0; margin-bottom: 20px; } } @media screen and (max-width:620px){ .popular{ margin-top: 140%; margin-bottom: 42px; } } /* select */ .select{ /* margin-top: 100px; */ margin-bottom: 92px; } .select_item{ display: flex; padding-top: 13px; margin-bottom: 110px; height: 512px; } .select_item1{ display: flex; flex-direction: row-reverse; } .select_item_img{ width: 60%; position: relative; max-width: 833px; } .select_text1{ margin-left: 4.7rem; } .select_text2{ margin-right: 4.7rem; } .select_text{ width: 40%; max-width: 350px; padding-top: 54px; box-sizing: border-box; } .select_item_img .img_text{ position: absolute; top: 340px; right: 0; font-size: 60px; line-height: 65px; background-color: #fff; font-weight: bold; object-fit: contain; margin-right: -1px; } .select_recomend{ font-size: 16px; margin-bottom: 46px; font-weight: bold; } .select_title{ font-size: 32px; margin-bottom: 38px; font-weight: bold; } .select_info{ font-size: 15px; margin-bottom: 60px; font-weight: bold; } .select_text a{ text-align: right; font-size: 16px; display: flex; align-items: center; justify-content: flex-end; } .select_text a p{ display: flex; align-items: center; font-weight: bold; font-size: 16px; border-bottom: 1px solid #DCDCDC; padding-bottom: 17.8px; } .select_text a p img{ margin-left: 23px; width: 36px; } @media screen and (max-width:1200px){ .select_text{ padding-top: 30px; } .select_item_img .img_text{ top: 280px; } .select_recomend{ margin-bottom: 36px; } .select_info{ margin-bottom: 30px; } } @media screen and (max-width:1140px){ .select_text{ margin-left: 2rem; margin-right: 2rem; } .select_item_img .img_text{ top: 260px; } .select_item_img .img_text{ font-size: 50px; } } @media screen and (max-width:800px){ .select_recomend{ margin-bottom: 26px; } .select_item{ display: block; height: auto; margin-bottom: 58.3px; } .select_item1{ display: block; } .select_item_img{ width: 100%; } .select_text{ width: 100%; padding-top: 22px; margin-right: auto; margin-left: auto; } .all_search{ width: 100%; max-width: 324px; margin-right: auto; margin-left: auto; } /* .all_search a{ width: 95%; margin-right: auto; margin-left: auto; } */ .select_info{ margin-bottom: 22.8px; } .select_text a p{ border-bottom: none; } .all_search1 a{ max-width: 324px; } } @media screen and (max-width:600px){ .select_item_img .img_text{ font-size: 28px; top: 200px; } .select_title{ font-size: 25px; margin-bottom: 10px; } } @media screen and (max-width:500px){ .all_search a{ max-width: 324px; } .select{ margin-bottom: 30px; } .select_item_img .img_text{ top: 159px; line-height: 31px; } } @media (max-width: 376px) { .all_search{ width: 90%; } } /* 吹き出し */ .balloon { position: absolute; top:-50px; display: block; margin: 1.5em 15px 1.5em 0; padding: 10px 5px; width: 130px; height: 70px; line-height: 1.2; text-align: center; color: #333; font-size: 70%; font-weight: bold; background: #f1f1f1; border-radius: 50%; box-sizing: border-box; } .balloon:before { content: ""; position: absolute; bottom: -8px; right: -8px; margin-top: -15px; border: 15px solid transparent; border-left: 15px solid #f1f1f1; z-index: 0; -webkit-transform: rotate(50deg); transform: rotate(50deg); }