Skip to content

sora / achievement

Go to a project
Commit 4d141fe5 by Orine Matsui
Options

「お客様事情」本番から反映

parent 45ef1298
Expand all
Inline Side-by-side
Showing with 146 additions and 10 deletions
achievement-official.conohawing.com/common_previous/css/case.css
...@@ -5,9 +5,6 @@ ...@@ -5,9 +5,6 @@
case.css case.css
======================================== */ ======================================== */
.p-case .c-mainvisual,
.p-case-detail .c-mainvisual {
background-image: url(/assets/img/case/mv.jpg); }
.p-case-detail .c-mainvisual { .p-case-detail .c-mainvisual {
margin-bottom: 68px; } margin-bottom: 68px; }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
...@@ -102,7 +99,126 @@ case.css ...@@ -102,7 +99,126 @@ case.css
/* /*
------------------------------------------------------------*/ ------------------------------------------------------------*/
.p-case .c-search{
margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
.p-case .c-search{
margin-bottom: 30px;
}
}
.p-case .c-search__box1{
display: flex;
justify-content: center;
border-bottom: 2px solid #001c35;
}
.p-case .c-search__tab{
width: 49.5%;
text-align: center;
font-size: 1.8rem;
background: #fff;
color: #333333;
padding: 14px;
font-weight: bold;
cursor: pointer;
border: 1px solid #ececec;
border-bottom: none;
}
@media screen and (max-width: 767px) {
.p-case .c-search__tab{
width: 49%;
font-size: 1.5rem;
padding: 10px;
}
}
.p-case .c-search__tab.active{
background: #001c35;
border: 1px solid #001c35;
color: #fff;
}
.p-case .c-search__tab:first-child{
margin-right: 1%;
}
@media screen and (max-width: 767px) {
.p-case .c-search__tab:first-child{
margin-right: 2%;
}
}
.p-case .c-search__list{
border:1px solid #ececec;
padding: 30px;
display: none;
background: #fff;
}
@media screen and (max-width: 767px) {
.p-case .c-search__list{
padding: 15px;
}
}
.p-case .c-search__list.active{
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
.p-case .c-search__list.active{
display: block;
}
}
.p-case .c-search__item{
font-size: 1.2rem;
color:#333;
padding: 10px 14px;
border:1px solid #ececec;
margin-right: 15px;
cursor: pointer;
background: #fff;
border-radius: 5px;
font-weight: bold;
margin-top: 5px;
}
@media screen and (max-width: 767px) {
.p-case .c-search__item{
width: 100%;
padding: 8px 10px;
}
.p-case .c-search__item:not(:last-child){
margin-bottom: 5px;
}
}
.p-case .c-search__item.active{
background: #003b70;
color:#fff;
position: relative;
}
@media screen and (max-width: 767px) {
.p-case .c-search__item.active:before{
content: "";
width:15px;
height: 2px;
background: #fff;
position:absolute;
right:10px;
top:50%;
transform: translateY(-50%) rotate(45deg);
}
.p-case .c-search__item.active:after{
content: "";
width:15px;
height: 2px;
background: #fff;
position:absolute;
right:10px;
top:50%;
transform: translateY(-50%) rotate(-45deg);
}
}
.p-case .c-case__box{
display: none;
}
.p-case .c-case__box:first-child{
display: block;
}
.p-case-detail1 .c-title1 { .p-case-detail1 .c-title1 {
margin-bottom: 30px; } margin-bottom: 30px; }
...@@ -157,6 +273,11 @@ case.css ...@@ -157,6 +273,11 @@ case.css
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
.p-case-detail1 .c-imgtext__text { .p-case-detail1 .c-imgtext__text {
font-size: 1.6rem; } } font-size: 1.6rem; } }
.p-case-detail1 .c-imgtext__text + p {
font-size: 1.8rem; }
@media screen and (max-width: 767px) {
.p-case-detail1 .c-imgtext__text + p {
font-size: 1.6rem; } }
.p-case-detail1 .c-info { .p-case-detail1 .c-info {
margin-bottom: 33px; } margin-bottom: 33px; }
...@@ -275,24 +396,39 @@ case.css ...@@ -275,24 +396,39 @@ case.css
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
.p-case-detail2 { .p-case-detail2 {
padding: 40px 0 0; } } padding: 40px 0 0; } }
.p-case-detail2 .c-box { .p-case-detail .c-box {
margin: 36px 0 0; } margin: 36px 0 0; }
.p-case-detail2 .c-box img { .p-case-detail .c-box img {
width: auto; } width: auto; }
.p-case-detail2 .c-box p { @media screen and (max-width: 767px) {
.p-case-detail .c-box img {
width: 100%; }
}
.p-case-detail .c-box p {
margin: 7px 0 0; margin: 7px 0 0;
font-size: 1.2rem; font-size: 1.2rem;
color: #363636; color: #363636;
line-height: 1.4; } line-height: 1.4; }
.p-case-detail2 .c-box__list { .p-case-detail .c-box__list {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap;
margin-bottom: 27px; } margin-bottom: 27px; }
.p-case-detail2 .c-box__list li { .p-case-detail .c-box__list li {
display: inline-block; display: inline-block;
margin: 0 16px 10px 0;
max-width: 188px; max-width: 188px;
margin: 0 16px 10px 0; } }
@media screen and (max-width: 767px) {
.p-case-detail .c-box__list li {
margin: 0 2% 10px 0;
width: 49%;
max-width: inherit;
}
.p-case-detail .c-box__list li:nth-child(2n){
margin-right: 0;
}
}
/* /*
------------------------------------------------------------*/ ------------------------------------------------------------*/
......
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