penny271
2/27/2020 - 5:40 AM
responsive scss isara 20200309
@charset "utf-8";
/* 全体のresposive設定 */
@media (max-width: 768px) {
:root {
font-size: 12px;
}
.txtl {
font-size: 18px;
font-weight: 600;
}
.txtm {
font-size: 15px;
line-height: 16.5px;
font-weight: 600;
}
.btn2 {
display: inline-block;
}
.brsp { /* <br class="brsp"> 小さい画面での改行表示 通常時はCSSで display:none */
display: block;
line-height: initial;
}
}
@media (min-width: 769px) and (max-width:1189px) {
:root {
font-size: 12px;
}
.txtl {
font-size: 24px;
font-weight: 600;
line-height: 30px;
}
.txtm {
font-size: 16px;
line-height: 25.6px;
font-weight: 600;
}
}
@media (min-width: 1190px) {
:root {
font-size: 20px;
}
.txtl {
font-size: 28px;
font-weight: 600;
}
.txtm {
font-size: 20px;
line-height: 32px;
font-weight: 600;
}
h2 {
font-size: 28px;
}
}
/* 全体のresposive設定終わり */
/* ヘッダーresponsive */
@media (max-width: 768px) {
header {
.isaralogo {
position: absolute;
top: 25px;
width: 92px;
height: 33px;
}
.img1 p {
position: absolute;
font-size: 10px;
letter-spacing: normal;
top: 5px;
margin: 0 3px;
}.btn{
display: none;
}
.btn2 {
// display: inline-block;
position: absolute;
top: 0;
right: 0;
width: 80px;
max-width: 100%;
height: 70px;
float: right;
text-align: center;
background-color: #da6b64;
padding-bottom: 10px;
a {
display: block;
color: #ffffff;
text-decoration: none;
line-height: 28.8px;
font-size: 12px;
height: 28.8px;
padding-top: 7px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
&:hover {
background-color: #d84940;
}
}
}
}
/* ヘッダーresponsive 終わり */
/* プログラミングで人生の安定を手にいれよう */
@media (max-width: 768px) {
.isaratop{
font-size: 12px;
text-align: center;
background-size: cover;
background-position:53%;
height: 330px;
.txtl {
font-size: 18px;
padding: 0!important;
margin: 0;
}
.btn2 {
display: block;
}
}
}
@media (min-width: 769px) and (max-width:1189px) {
:root {
font-size: 12px;
}
.txtl {
font-size: 24px;
}
}
@media (min-width: 1190px) {
.txtl {
font-size: 28px;
}
}
/* 終わり プログラミングで人生の安定を手にいれよう */
/* ask まずは２０日間で、*/
@media (max-width: 768px) {
.ask {
line-height: initial;
.txtl{
font-size: 20px !important;
display: inline-block;
padding: 25px 20px !important;
padding: 10px !important;
}
a {
line-height: initial !important;
}
.brsp {
display: block;
line-height: initial;
}
.btnbtn {
padding: 8px;
height: 95px;
}
h2 {
font-size: 15px!important;
line-height: 24px;
padding: 0;
padding-bottom: 10px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
}
}
@media (min-width: 769px) and (max-width:1189px) {
}
@media (min-width: 1190px) {
.ask {
p {
font-size: 20px;
line-height: 32px;
&.take {
font-size: 18px;
width: 470px;
line-height: 28.8px;
}
}
.btnbtn {
padding: 15px;
height: 105px;
}
.txtl {
font-size: 28px!important;
}
h2 {
font-size: 21px!important;
line-height: 33.6px;
padding: 0;
margin-top: 40px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h2:nth-of-type(3) {
margin-bottom: 30px;
}
}
}
/* ask まずは２０日間で、終わり*/
/* エンジニアとして本当の自由を手に入れるためには？ */
@media (max-width: 768px) {
.engineer {
height: 780px;
.brsp {
display: block;
line-height: initial;
}
.txtl {
padding-top: 0;
}
.contents-txtm {
padding-top: 20px;
}
}
}
@media (min-width: 769px) and (max-width:1189px) {
}
@media (min-width: 1190px) {
.engineer {
height: 550px;
.txtl {
padding-top: 0;
}
.contents-txtm {
padding-top: 20px;
}
p {
font-size: 20px;
line-height: 32px;
}
.about {
font-size: 14px;
}
}
}
/* 終わり エンジニアとして本当の自由を手に入れるためには？ */
/*ノマドエンジニア育成講座iSara[イサラ]とは */
@media (max-width: 768px) {
.nomad {
.brsp {
display: block;
line-height: initial;
}
.container {
letter-spacing: 1.5px; /* ここだと効く。おそらく直下だから */
}
.txtl {
margin: auto;
padding: 90px;
padding-bottom: 40px;
line-height: 40px;
font-weight: 600;
}
.txtm {
margin: 0 0 10px;
font-weight: 600;
line-height: 24px;
font-size: 15px;
}
img {
height: 30px;
}
.pic {
display: inline-block;
padding: 10px;
}
p {
font-size: 10px;
padding: 0;
align-items: center;
letter-spacing: 1.5px;
line-height: 16px;
}
}
}
@media (min-width: 769px) and (max-width:1189px) {
}
@media (min-width: 1190px) {
}
/*終わり ノマドエンジニア育成講座iSara[イサラ]とは */
/* iSaraで「基本的なプログラミングスキル」 */
@media (max-width: 768px) {
.chat {
height: 670px;
.brsp {
display: block;
line-height: initial;
line-height: 20px;
}
.txtm {
font-size: 13px;
line-height: 20.8px;
margin-bottom: 10px;
}
.steps_content {
max-width: calc(100% - 40px);
width: 768px;
padding: 15px 50px;
}
.first {
margin-top: 15px;
margin-bottom: 5px;
}
.second {
margin: 0;
}
}
}
@media (min-width: 769px) and (max-width:1189px) {
}
@media (min-width: 1190px) {
.chat {
height: 420px;
h3 {
font-size: 16px;
}
.first {
font-size: 14px;
}
.second {
font-size: 16px;
}
.steps {
display: inline-block;
}
.steps_content {
width: 374px;
}
.steps_content:not(:nth-of-type(3)) {
margin-right: 15px;
}
}
}
/* 終わりiSaraで「基本的なプログラミングスキル」 */
/* スキルアップしてもフリーランス */
@media (max-width: 768px) {
.blue {
padding: 20px 0;
.txtm {
line-height: 19.2px;
font-size: 12px;
}
}
}
@media (min-width: 769px) and (max-width:1189px) {
}
@media (min-width: 1190px) {
}
/* 終わり スキルアップしてもフリーランス */
/* iSara<span>[イサラ]</span>で学べること */
@media (max-width: 768px) {
.learning {
padding: 20px 0;
text-align: center;
letter-spacing: 1.5px;
width: 100%;
max-width: 1170px;
margin: auto;
.txtl {
padding: 20px 0 35px;
} span {
font-size: 14px;
} .txtm {
margin-bottom: 10px;
font-size: 16px;
color: #333333;
font-weight: normal;
line-height: 24px;
} .enclose {
margin: 0;
// margin-right: 50px;
// margin-left: 50px;
max-width: calc(100% - 20px);
}
.learningbox {
display: inline-block;
padding: 5px 5px;
width: 20%;
}
img {
width: 120px;
height: auto;
max-width: 100%;
max-height: 100%;
}
.txts {
margin-top: 10px;
font-size: 12px;
}
}
}
@media (min-width: 769px) and (max-width:1189px) {
}
@media (min-width: 1190px) {
.learning {
.txts {
margin-top: 10px;
font-size: 16px;
}
}
}
/*終わり iSara<span>[イサラ]</span>で学べること */
/* 他のプログラミングスクール */
@media (max-width: 768px) {
.merit {
padding: 30px 15px;
background-color: #fef5e0;
text-align: center;
.txtm {
font-size: 16px;
// font-weight: bold;
padding-top: 40px;
line-height: 21px;
} .txtl
{
padding: 20px 0 30px;
}
img {
width: 100%;
height: 120px;
object-fit: cover;
}
.learnbox {
padding-bottom: 10px;
}
.textenclose {
padding: 0;
}
h3 {
margin-top: 5px;
font-size: 16px;
color:#ebb94d;
} .texts {
font-size: 14px;
margin: 8px auto;
text-align: left;
width: 97%;
} .support {
border: 2px solid #ebb94d;
margin: 15px 20px 15px;
padding: 10px;
background-color: #fff;
} .txtl-yellow {
font-family: "Hiragino Kaku Gothic Pro"
;
font-size: 18px;
margin-bottom: 10px;
color: #ebb94d;
font-weight: bold;
line-height: 38.4px;
} .txtm.tx {
padding: 0;
margin-bottom: 10px;
line-height: 24px;
} .txts {
font-size: 10px;
font-weight: bold;
margin-bottom: 10px;
line-height: 16px;
} .meritbottom {
font-size: 12px;
width: 100%;
letter-spacing: normal;
line-height: 19px;
}
} /* merit */
}
@media (min-width: 769px) and (max-width:1189px) {
}
@media (min-width: 1190px) {
.merit {
padding: 30px 15px;
background-color: #fef5e0;
text-align: center;
.txtm {
font-size: 16px;
// font-weight: bold;
padding-top: 40px;
line-height: 21px;
} .txtl
{
padding: 20px 0 30px;
}
img {
}
.learnbox {
display: inline-block;
padding-bottom: 10px;
width: 25%;
}
.enclose {
display: flex;
justify-content: center;
}
.textenclose {
padding: 0;
flex: 1;
display: flex;
}
.learndetail {
display: inline-block;
flex: 1;
}
h3 {
margin-top: 8px;
font-size: 16px;
color:#ebb94d;
} .texts {
display: inline-block;
font-size: 14px;
text-align: left;
word-break: break-all;
width: 90%;
} .support {
border: 2px solid #ebb94d;
margin: 40px 20px;
padding: 40px 20px;
background-color: #fff;
} .txtl-yellow {
font-family: "Hiragino Kaku Gothic Pro"
;
font-size: 24px;
margin-bottom: 10px;
color: #ebb94d;
font-weight: bold;
line-height: 38.4px;
} .txtm.tx {
padding: 0;
margin-bottom: 10px;
line-height: 25.6px;
} .txts {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
line-height: 22px;
} .meritbottom {
font-size: 14px;
width: 100%;
letter-spacing: normal;
line-height: 22px;
.brsp2 {
display: block;
line-height: initial;
}
}
} /* merit */
}
/* 終わり 他のプログラミングスクール 03-09-2020 */
/* 創業メンバー 03-09-2020*/
/* <!-- ここから！！ --> */
@media (max-width: 768px) {
.teacher {
padding: 20px;
// width:100%;
height: 1530px;
background-image: url(../img/teacherbg.jpg);
background-position: 53%;
// background-position: 0;
background-size: cover;
color: #ffffff;
.txtl {
line-height: 40px;
margin: 50px 0 10px;
font-weight: 600;
} .txtss {
font-size: 12px;
margin-top: 30px;
margin-bottom: 10px;
font-weight: 600;
line-height: 19px;
} .fa::before {
display:inline-block;
font-size: inherit;
content: "\f2c3"
}
img {
width: 120px;
border-radius: 50%;
top: 40px;
position: relative;
} .detail {
padding: 40px 10px 10px;
border: 3px solid white;
// max-width: 944px;
// width: 100%;
width: calc(100% - 40px);
width: auto;
margin: 0;
// text-align: center;
} .txts {
text-align: center;
margin-bottom: 10px;
font-size: 12px;
line-height: 19.2px;
} .txts.tx{
text-align: left;
margin: 0 0 10px 0;
}
.brsp {
display: block;
line-height: initial;
}
}
}
@media (min-width: 769px) and (max-width:1189px) {
}
@media (min-width: 1190px) {
.teacher {
padding: 20px;
// width:100%;
height: 1380px;
background-image: url(../img/teacherbg.jpg);
background-position: 53%;
// background-position: 0;
background-size: cover;
color: #ffffff;
.txtl {
line-height: 40px;
margin: 50px 0 10px;
font-weight: 600;
} .txtss {
font-size: 16px;
margin-top: 30px;
margin-bottom: 10px;
font-weight: 600;
line-height: 25.5px;
}
.container {
display: flex;
flex-wrap: wrap;
max-width: 800px;
margin: auto;
}
.col-md-6 {
flex: 41%;
margin: 0 15px;
}
img {
width: 198px;
border-radius: 50%;
top: 40px;
position: relative;
} .detail {
height: 375px;
padding: 40px;
border: 3px solid white;
flex-direction: column;
// max-width: 944px;
// width: 100%;
width: calc(100% - 40px);
width: auto;
margin: 0;
// text-align: center;
} .txts {
text-align: center;
margin-bottom: 10px;
font-size: 16px;
line-height: 22.4px;
} .txts.tx{
text-align: left;
margin: 0 0 10px 0;
}
}
}
/*終わり 創業メンバー 03-09-2020*/
/* Q&A ノマドエンジニアとして自由に稼ぐことは 20200309*/
//ここから
/* 終わり Q&A ノマドエンジニアとして自由に稼ぐことは 20200309*/
// <br class="brsp">