Skip to content

sora / achievement

Go to a project
Commit a106c62c by Orine Matsui
Options

セミナーのテンプレートを追加

parent 22e4e0a2
Expand all
Inline Side-by-side
Showing with 230 additions and 34 deletions
achievement-official.conohawing.com/common_previous/css/seminar.css
......@@ -33,10 +33,9 @@ body {
}
.c-mainvisual {
height: 360px;
background-image: url(/assets/img/seminar/img_seminar_mv_NVY.gif);
background-position: top center;
background-repeat: repeat!important;
background-size: auto!important;
background-size: 1207px 134px!important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
......@@ -46,10 +45,12 @@ body {
position: relative;
}
@media screen and (max-width: 767px) {
.c-mainvisual {
margin-top: 100px;
height: 250px;
background-size: 604px 67px!important;
}
}
.p-seminar-orig .c-mainvisual {
......@@ -69,8 +70,8 @@ body {
}
@media screen and (max-width: 767px) {
.c-mainvisual__ttl {
transform: translateY(-30px);
font-size: 3rem;
transform: translateY(-10px);
font-size: 2.6rem;
}
}
.c-mainvisual__txt {
......@@ -93,7 +94,7 @@ body {
width: 80%;
}
}
.l-btn--center {
.l-btn {
text-align: center;
}
.c-btn1__txt {
......@@ -108,13 +109,26 @@ body {
box-sizing: border-box;
padding: 18px 0 16px;
position: relative;
text-align: center;
}
.l-btn--center {
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 767px) {
.l-btn + .l-btn {
margin-top: 20px;
}
.c-btn1__txt {
width: 100%;
font-size: 1.4rem;
line-height: 1.4;
padding: 12px 0 10px;
font-weight: 400;
}
}
.c-btn1__txt::after {
......@@ -460,6 +474,9 @@ body {
width: 32%;
}
@media screen and (max-width: 767px) {
.c-list2 {
margin-top: 20px;
}
.c-list2__item {
width: 100%;
margin: 0 0 15px;
......@@ -481,10 +498,14 @@ body {
width: 23.5%;
}
@media screen and (max-width: 767px) {
.c-list3 {
display: block;
margin-top: 20px;
}
.c-list3__item {
width: 100%;
margin: 0 0 15px;
padding: 16vw 15px 15px;
padding: 15px;
}
}
......@@ -507,12 +528,14 @@ body {
width: 100%;
margin: 20px 0 0 0;
}
.c-list2__item:first-child,
.c-list3__item:first-child {
margin: 0;
}
}
.c-list2__ttl,
.c-list3__ttl {
font-size: 1.8rem;
font-size: 3.0rem;
line-height: 1.2;
color: #fff;
font-weight: bold;
......@@ -540,9 +563,11 @@ body {
}
.c-list2__txt,
.c-list3__txt {
font-size: 1.6rem;
font-size: 2.0rem;
line-height: 1.5;
color: #fff;
font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
font-weight: 600;
}
@media screen and (max-width: 767px) {
.c-list2__txt,
......@@ -689,42 +714,49 @@ body {
/*
------------------------------------------------------------*/
.seminar3 {
.seminar3,
.seminar5 {
padding: 75px 0 70px;
background-color: #1f3563;
color: #fff;
}
@media screen and (max-width: 767px) {
.seminar3 {
.seminar3,
.seminar5 {
padding: 30px 0;
}
}
.seminar3 .c-title1 {
.seminar3 .c-title1,
.seminar5 .c-title1 {
text-align: center;
margin: 0 0 26px;
}
@media screen and (max-width: 767px) {
.seminar3 .c-title1 {
.seminar3 .c-title1,
.seminar5 .c-title1 {
padding: 0 15px;
}
}
.seminar3 .c-title1__txt {
.seminar3 .c-title1__txt,
.seminar5 .c-title1__txt {
margin-bottom: 20px;
display: inline-block;
color: #beac56;
font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
}
@media screen and (max-width: 767px) {
.seminar3 .c-title1__txt {
.seminar3 .c-title1__txt,
.seminar5 .c-title1__txt {
margin-bottom: 20px;
}
}
.seminar3 .c-title1__txt img {
.seminar3 .c-title1__txt img,
.seminar5 .c-title1__txt img {
max-width: 340px;
height: auto;
}
.seminar3 .c-title1__txt:after {
.seminar3 .c-title1__txt:after,
.seminar5 .c-title1__txt:after {
width: 100vw;
}
.seminar3__txt {
......@@ -739,6 +771,29 @@ body {
font-size: 1.4rem;
}
}
.seminar5 .c-list2__item,
.seminar5 .c-list3__item {
background-color: #fff;
}
.seminar3 .c-list2__ttl,
.seminar3 .c-list3__ttl,
.seminar5 .c-list2__ttl,
.seminar5 .c-list3__ttl {
margin-bottom: 0;
}
.seminar5 .c-list2__ttl,
.seminar5 .c-list2__txt,
.seminar5 .c-list3__ttl,
.seminar5 .c-list3__txt {
color: #363636!important;
}
@media screen and (max-width: 767px) {
.seminar4,
.seminar6 {
padding: 30px 0 40px;
}
}
/*
------------------------------------------------------------*/
......@@ -746,40 +801,163 @@ body {
padding: 75px 0 120px;
background-color: #fff;
}
.seminar4 .bgGRY {
.seminar6 {
margin-bottom: 65px;
padding: 75px 0 0;
background-color: #fff;
}
.seminar4 .bgGRY,
.seminar6 .bgGRY {
background-color: #ececec;
}
.seminar4 .c-imgtext1 {
margin-top: 40px;
}
.seminar4 .c-imgtext1 + .c-imgtext1 {
margin-top: 60px;
}
@media screen and (max-width: 767px) {
.seminar4 {
.seminar4,
.seminar6 {
padding: 30px 0 40px;
}
}
.seminar4 .c-title1 {
@media screen and (max-width: 767px) {
.seminar4 .c-imgtext1 {
margin-top: 20px;
}
.seminar4 .c-imgtext1 + .c-imgtext1 {
margin-top: 40px;
}
}
.seminar4 .c-title1,
.seminar6 .c-title1 {
text-align: center;
}
@media screen and (max-width: 767px) {
.seminar4 .c-title1 {
.seminar4 .c-title1,
.seminar6 .c-title1 {
margin-bottom: 0;
}
}
.seminar4 .c-title1__txt {
.seminar4 .c-title1__txt,
.seminar6 .c-title1__txt {
margin-bottom: 20px;
display: inline-block;
font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
}
@media screen and (max-width: 767px) {
.seminar4 .c-title1__txt {
.seminar4 .c-title1__txt,
.seminar6 .c-title1__txt {
margin-bottom: 20px;
}
}
.seminar4 .c-title1__txt img {
.seminar4 .c-title1__txt img,
.seminar6 .c-title1__txt img {
max-width: 340px;
height: auto;
}
.seminar4 .c-title1__txt:after {
.seminar4 .c-title1__txt:after,
.seminar6 .c-title1__txt:after {
width: 100vw;
}
@media screen and (max-width: 767px) {
.seminar6 {
margin-bottom: 0;
}
}
/*
------------------------------------------------------------*/
.seminar-btnset {
margin-top: 65px;
padding: 0 0 105px;
background-color: #fff;
}
.seminar-btnset > .container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.seminar-btnset .c-btn1__txt {
font-size: 1.6rem;
}
.seminar-btnset .c-btn1__txt strong {
font-size: 2.4rem;
font-weight: 900;
}
.c-btn1-red {
background: #7d0000;
}
.c-btn1-red .c-btn1__txt {
color: #fff;
border: 2px solid #7d0000;
}
.c-btn1-red .c-btn1__txt::after {
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
@media screen and (max-width: 767px) {
.seminar-btnset {
margin-top: 0;
padding: 0 0 65px;
}
.seminar-btnset > .container {
flex-direction: column;
}
.seminar-btnset .l-btn,
.seminar-btnset .c-btn1,
.seminar-btnset .c-btn1__txt {
display: block;
width: 100%;
}
.seminar-btnset .c-btn1__txt {
font-size: 1.4rem;
}
.seminar-btnset .c-btn1__txt strong {
font-size: 2.0rem;
font-weight: 900;
}
}
/*
------------------------------------------------------------*/
.c-table2 {
margin-top: 40px;
......@@ -828,7 +1006,7 @@ body {
.c-table2 dt {
width: 200px;
background-color: #ececec;
border-right: 1px solid #dbdbdb;
border-right: 1px solid #ececec;
font-size: 1.6rem;
color: #363636;
font-weight: bold;
......@@ -927,6 +1105,8 @@ body {
}
.c-table2 dd {
display: block;
justify-content: flex-start;
text-align: left;
}
}
......@@ -1007,9 +1187,6 @@ body {
border-radius: 10px;
text-align: center;
}
/*
------------------------------------------------------------*/
......@@ -1024,10 +1201,29 @@ body {
}
/*
------------------------------------------------------------*/
.c-mainvisual.c-mainvisual-bg-01 {background-image: url(/assets/img/seminar/img_seminar_mv_NVY.gif);}
.c-mainvisual.c-mainvisual-bg-02 {background-image: url(/assets/img/seminar/img_seminar_mv_RED.gif);}
.c-mainvisual.c-mainvisual-bg-03 {background-image: url(/assets/img/seminar/img_seminar_mv_GRN.gif);}
.c-mainvisual.c-mainvisual-bg-04 {background-image: url(/assets/img/seminar/img_seminar_mv_BLU.gif);}
.c-mainvisual.c-mainvisual-bg-05 {background-image: url(/assets/img/seminar/img_seminar_mv_BLK.gif);}
.p-seminar-01 .seminar3,
.p-seminar-01 .seminar5 {background-color: #1f3563;}
.p-seminar-02 .seminar3,
.p-seminar-02 .seminar5 {background-color: #812727;}
.p-seminar-03 .seminar3,
.p-seminar-03 .seminar5 {background-color: #2e4e34;}
.p-seminar-04 .seminar3,
.p-seminar-04 .seminar5 {background-color: #1e5169;}
.p-seminar-05 .seminar3,
.p-seminar-05 .seminar5 {background-color: #363636;}
.p-seminar-orig .c-mainvisual__ttl {display: none;}
.p-seminar-orig .seminar3.font-Black .c-list2__item, .p-seminar-orig .seminar3.font-Black .c-list3__item {border: 1px solid #1b1b1b;}
.p-seminar-orig .seminar3.font-Black .c-list2__txt, .p-seminar-orig .seminar3.font-Black .c-list3__txt {color: #1b1b1b;}
......
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