asada / lifeup.cyber-physical.jp

Go to a project
Toggle navigation Toggle navigation pinning
asada
973406a0 1 parent 4d00a59c

ページ作成

Expand all
Inline Side-by-side
Showing 12 changed files with 420 additions and 0 deletions
header {
position: static;
padding: 10px 0 6px 0;
}
header .logo {
text-align: center;
}
@media only screen and (max-width: 767px) {
main {
padding-left: 3%;
padding-right: 3%;
}
}
main .container {
max-width: 970px;
}
main h1 {
font-weight: normal;
color: #62bcc3;
font-size: 3.4rem;
}
@media only screen and (max-width: 767px) {
main h1 {
font-size: 2.2rem;
}
}
main h1 p {
border-bottom: 2px #62bcc3 solid;
padding-bottom: 15px;
}
main h1 p.small {
font-size: 2.8rem;
margin-bottom: 8px;
margin-top: 20px;
}
@media only screen and (max-width: 767px) {
main h1 p.small {
font-size: 1.8rem;
}
}
main h1 p.big {
margin-bottom: 20px;
}
main p.catch {
font-size: 2.0rem;
}
@media only screen and (max-width: 767px) {
main p.catch {
font-size: 1.8rem;
line-height: 1.7;
}
}
main p.writer {
font-size: 1.2rem;
text-align: right;
}
@media only screen and (max-width: 767px) {
main p.writer {
margin-top: 2.0rem;
}
}
main .block {
margin-top: 4.0rem;
}
main .block h2 {
background-color: #62bcc3;
color: #fff;
padding: 8px;
font-size: 2.2rem;
margin-bottom: 20px;
}
main .block p {
font-weight: 300;
line-height: 1.7;
}
main .block p.note {
font-size: 1.2rem;
}
main #firstSection > div:nth-child(1) {
width: 26%;
}
@media only screen and (max-width: 767px) {
main #firstSection > div:nth-child(1) {
width: 100%;
order: 2;
}
}
main #firstSection > div:nth-child(2) {
width: 71%;
}
@media only screen and (max-width: 767px) {
main #firstSection > div:nth-child(2) {
width: 100%;
}
}
main #firstSection .prof {
margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
main #firstSection .prof figure {
text-align: center;
}
}
main #firstSection .prof p {
font-size: 1.3rem;
line-height: 1.7;
}
main #firstSection .prof p.name {
font-size: 1.8rem;
}
main #firstSection #healsio > div:nth-child(1) {
width: 62%;
}
@media only screen and (max-width: 767px) {
main #firstSection #healsio > div:nth-child(1) {
width: 100%;
}
}
main #firstSection #healsio > div:nth-child(2) {
width: 35%;
}
@media only screen and (max-width: 767px) {
main #firstSection #healsio > div:nth-child(2) {
width: 100%;
margin-bottom: 20px;
}
main #firstSection #healsio > div:nth-child(2) figure {
text-align: center;
margin-top: 20px;
}
}
main #energy {
margin-top: 40px;
}
main #energy > div:nth-child(1) {
width: 35%;
}
@media only screen and (max-width: 767px) {
main #energy > div:nth-child(1) {
width: 100%;
margin-bottom: 20px;
}
}
main #energy > div:nth-child(2) {
width: 62%;
}
@media only screen and (max-width: 767px) {
main #energy > div:nth-child(2) {
width: 100%;
}
}
main #comment {
max-width: 680px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
main #comment > div {
width: 42.5%;
}
@media only screen and (max-width: 767px) {
main #comment > div {
width: 100%;
}
}
main #comment > div img {
margin-left: 30px;
}
main #comment > div p.remark {
padding: 40px 20px 10px 20px;
position: relative;
}
main #comment > div p.remark:before {
content: "";
display: block;
border: 2px #62bcc3 solid;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 20px;
}
main .contact p {
font-size: 1.4rem;
line-height: 1.7;
margin-top: 40px;
}
main .back {
text-align: center;
margin-top: 40px;
}
@media only screen and (max-width: 767px) {
main .back img {
max-width: 100%;
}
}
... ...
header{
position: static;
padding: 10px 0 6px 0;
.logo{
text-align: center;
}
}
main{
@media only screen and (max-width: 767px){
padding-left: 3%;
padding-right: 3%;
}
.container{
max-width: 970px;
}
h1{
font-weight: normal;
color: #62bcc3;
font-size: 3.4rem;
@media only screen and (max-width: 767px){
font-size: 2.2rem;
}
p{
border-bottom: 2px #62bcc3 solid;
padding-bottom: 15px;
}
p.small{
font-size: 2.8rem;
margin-bottom: 8px;
margin-top: 20px;
@media only screen and (max-width: 767px){
font-size: 1.8rem;
}
}
p.big{
margin-bottom: 20px;
}
}
p.catch{
font-size: 2.0rem;
@media only screen and (max-width: 767px){
font-size: 1.8rem;
line-height: 1.7;
}
}
p.writer{
font-size: 1.2rem;
text-align: right;
@media only screen and (max-width: 767px){
margin-top: 2.0rem;
}
}
.block{
margin-top: 4.0rem;
h2{
background-color: #62bcc3;
color: #fff;
padding: 8px;
font-size: 2.2rem;
margin-bottom: 20px;
}
p{
font-weight: 300;
line-height: 1.7;
}
p.note{
font-size: 1.2rem;
}
}
#firstSection{
>div:nth-child(1){
width: 26%;
@media only screen and (max-width: 767px){
width: 100%;
order: 2;
}
}
>div:nth-child(2){
width: 71%;
@media only screen and (max-width: 767px){
width: 100%;
}
}
.prof{
margin-bottom: 30px;
@media only screen and (max-width: 767px){
figure{
text-align: center;
}
}
p{
font-size: 1.3rem;
line-height: 1.7;
}
p.name{
font-size: 1.8rem;
}
}
#healsio{
>div:nth-child(1){
width: 62%;
@media only screen and (max-width: 767px){
width: 100%;
}
}
>div:nth-child(2){
width: 35%;
@media only screen and (max-width: 767px){
width: 100%;
margin-bottom: 20px;
figure{
text-align: center;
margin-top: 20px;
}
}
}
}
}
#energy{
margin-top: 40px;
>div:nth-child(1){
width: 35%;
@media only screen and (max-width: 767px){
width: 100%;
margin-bottom: 20px;
}
}
>div:nth-child(2){
width: 62%;
@media only screen and (max-width: 767px){
width: 100%;
}
}
}
#comment{
max-width: 680px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
>div{
width: 42.5%;
@media only screen and (max-width: 767px){
width: 100%;
}
img{
margin-left: 30px;
}
p.remark{
padding: 40px 20px 10px 20px;
position: relative;
&:before{
content: "";
display: block;
border:2px #62bcc3 solid;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 20px;
}
}
}
}
.contact{
p{
font-size: 1.4rem;
line-height: 1.7;
margin-top: 40px;
}
}
.back{
text-align: center;
margin-top: 40px;
@media only screen and (max-width: 767px){
img{
max-width: 100%;
}
}
}
}
... ...
This diff is collapsed. Click to expand it.