Skip to content

sora / achievement

Go to a project
Commit a6d809e7 by Orine Matsui
Options

お客様事例　検索追加

parent 7d28860c
Expand all
Inline Side-by-side
Showing with 131 additions and 18 deletions
achievement-official.conohawing.com/case/index.php
...@@ -17,12 +17,20 @@ ...@@ -17,12 +17,20 @@
<div class="p-case1" id="hacker-list"> <div class="p-case1" id="hacker-list">
<div class="l-container"> <div class="l-container">
<div class="c-search"> <div class="c-search">
<h3 class="c-title1">プロフィール</h3> <h3 class="c-search__title1">事例を探す</h3>
<div class="c-search__box1"> <div class="c-search__box1">
<div class="c-search__tab industry active">業種</div> <div class="c-search__tab industry active">すべて</div>
<div class="c-search__tab case">課題</div> <div class="c-search__tab case">『頂点への道』講座<br>活用事例</div>
<div class="c-search__tab case">組織変革サービス<br>活用事例</div>
<div class="c-search__tab case">教材プログラム<br>活用事例</div>
</div> </div>
<h4 class="c-search__title2">さらに「課題」「業種」から絞り込みができます。</h4>
<div class="c-search__box2"> <div class="c-search__box2">
<div class="c-search__tab industry active">課題</div>
<div class="c-search__tab case">業種</div>
</div>
<div class="c-search__box3">
<ul class="c-search__list active" title="業種 industry"> <ul class="c-search__list active" title="業種 industry">
<li class="c-search__item" data-id="tab-24">士業</li> <li class="c-search__item" data-id="tab-24">士業</li>
<li class="c-search__item" data-id="tab-30">建設</li> <li class="c-search__item" data-id="tab-30">建設</li>
......
achievement-official.conohawing.com/common_previous/css/case.css
...@@ -180,13 +180,72 @@ case.css ...@@ -180,13 +180,72 @@ case.css
margin-bottom: 30px; margin-bottom: 30px;
} }
} }
.p-case .c-search {
padding: 40px;
margin-bottom: 60px;
background: #fff;
-webkit-box-shadow: 0px 0px 21px 3px rgba(0, 0, 0, 0.08);
box-shadow: 0px 0px 21px 3px rgba(0, 0, 0, 0.08);
}
@media screen and (max-width: 767px) {
.p-case .c-search {
margin-bottom: 30px;
padding: 0;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.p-case .c-search__title1 {
margin-bottom: 20px;
font-size: 2.4rem;
line-height: 1;
color: #363636;
font-weight: bold;
}
.p-case .c-search__title2 {
margin-top: 30px;
margin-bottom: 20px;
font-size: 1.6rem;
line-height: 1;
color: #363636;
font-weight: bold;
}
@media screen and (max-width: 767px) {
.p-case .c-search__title2 {
margin-top: 20px;
}
}
.p-case .c-search__box1 { .p-case .c-search__box1 {
display: flex; display: flex;
justify-content: center; justify-content: center;
border-bottom: 2px solid #001c35; margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
.p-case .c-search__box1 {
flex-wrap: wrap;
margin-bottom: 10px;
}
}
.p-case .c-search__box2 {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
.p-case .c-search__box2 {
padding: 0 15px;
margin: 0 -15px 20px ;
border-bottom: 2px solid #001c35;
}
} }
.p-case .c-search__tab { .p-case .c-search__tab {
width: 49.5%; display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
margin-left: 1%;
text-align: center; text-align: center;
font-size: 1.8rem; font-size: 1.8rem;
background: #fff; background: #fff;
...@@ -195,13 +254,18 @@ case.css ...@@ -195,13 +254,18 @@ case.css
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
border: 1px solid #ececec; border: 1px solid #ececec;
border-bottom: none;
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
.p-case .c-search__tab { .p-case .c-search__tab {
width: 49%; width: calc(50% - 5px);
font-size: 1.5rem; font-size: 1.5rem;
padding: 10px; padding: 10px;
margin-left: 10px;
margin-bottom: 10px;
}
.p-case .c-search__box2 .c-search__tab {
margin-bottom: 0;
border-bottom: none!important;
} }
} }
.p-case .c-search__tab.active { .p-case .c-search__tab.active {
...@@ -209,24 +273,21 @@ case.css ...@@ -209,24 +273,21 @@ case.css
border: 1px solid #001c35; border: 1px solid #001c35;
color: #fff; color: #fff;
} }
.p-case .c-search__tab.active02 {
background: #fff;
border: 2px solid #001c35;
color: #001c35;
}
.p-case .c-search__tab:first-child { .p-case .c-search__tab:first-child {
margin-right: 1%; margin-left: 0;
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
.p-case .c-search__tab:first-child { .p-case .c-search__tab:nth-child(2n+1) {
margin-right: 2%; margin-left: 0;
} }
} }
.p-case .c-search__list { .p-case .c-search__list {
border: 1px solid #ececec;
padding: 30px;
display: none; display: none;
background: #fff;
}
@media screen and (max-width: 767px) {
.p-case .c-search__list {
padding: 15px;
}
} }
.p-case .c-search__list.active { .p-case .c-search__list.active {
display: flex; display: flex;
...@@ -507,6 +568,50 @@ case.css ...@@ -507,6 +568,50 @@ case.css
left: 0; left: 0;
border-radius: 50px; border-radius: 50px;
} }
.p-case-detail1 .c-search-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 20px 0;
}
.p-case-detail1 .c-search-list li {
font-size: 1.6rem;
line-height: 16px;
position: relative;
padding: 6px 14px 4px 14px;
margin-bottom: 8px;
margin-right: 14px;
}
.p-case-detail1 .c-search-list .c-search-list__item01 {
color: #333;
border: 1px solid #ececec;
}
.p-case-detail1 .c-search-list .c-search-list__item02 {
background: #001c35;
color: #fff;
border: 1px solid #001c35;
}
.p-case-detail1 .c-table1 {
margin-bottom: 32px;
}
.p-case-detail1 .c-table1 dl {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 1.6rem;
color: #363636;
margin-bottom: 3px;
line-height: 1.85;
}
.p-case-detail1 .c-table1 dt {
font-weight: bold;
width: 90px;
}
.p-case-detail1 .c-table1 dd {
width: calc(100% - 90px);
}
/* /*
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment