Nice!
COPY
ダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
Nice!
COPY
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
.concept {
background: #ffe26c;
}
.concept .inner {
max-width: 900px;
margin: 0 auto;
padding: 100px 20px;
}
.concept .inner .box_txt {
position: relative;
}
.concept .inner .box_txt .heading {
width: auto;
height: 100%;
position: absolute;
left: -20px;
opacity: 0.5;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
@media only screen and (max-width: 600px) {
.concept .inner .box_txt .heading {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.concept .inner .box_txt .heading img {
width: auto;
height: 100%;
}
.concept .inner .box_txt .txt {
position: relative;
margin-bottom: 40px;
}
.concept .inner .box_txt .txt h2 {
margin-bottom: 20px;
font-weight: 700;
color: #894938;
line-height: 1.4;
}
.concept .inner .box_txt .txt h2 span {
display: block;
}
.concept .inner .box_txt .txt h2 span:nth-child(1) {
font-size: 26px;
}
@media only screen and (max-width: 600px) {
.concept .inner .box_txt .txt h2 span:nth-child(1) {
font-size: 18px;
}
}
.concept .inner .box_txt .txt h2 span:nth-child(2) {
font-size: 44px;
}
@media only screen and (max-width: 600px) {
.concept .inner .box_txt .txt h2 span:nth-child(2) {
font-size: 28px;
}
}
.concept .inner .box_txt .txt h4 {
font-size: 30px;
font-weight: 700;
color: #894938;
padding: 1em 0 0.5em;
}
@media only screen and (max-width: 600px) {
.concept .inner .box_txt .txt h4 {
font-size: 22px;
}
}
.concept .inner .box_txt .txt p {
font-size: 17px;
font-weight: 500;
margin-bottom: 0.5em;
color: #894938;
}
@media only screen and (max-width: 600px) {
.concept .inner .box_txt .txt p {
font-size: 15px;
}
}
.concept .inner .box_img img {
max-width: 100%;
border-radius: 10px;
-webkit-box-shadow: 10px 10px 20px -10px rgba(0, 0, 0, 0.2);
box-shadow: 10px 10px 20px -10px rgba(0, 0, 0, 0.2);
}
/*# sourceMappingURL=style.css.map */
Nice!
COPY
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
.concept {
background: #ffe26c;
.inner {
max-width: 900px;
margin: 0 auto;
padding: 100px 20px;
.box_txt {
position: relative;
.heading {
width: auto;
height: 100%;
position: absolute;
left: -20px;
opacity: 0.5;
transform: scale(1.2);
@media only screen and (max-width: 600px) {
transform: scale(1);
}
img {
width: auto;
height: 100%;
}
}
.txt {
position: relative;
margin-bottom: 40px;
h2 {
margin-bottom: 20px;
font-weight: 700;
color: #894938;
line-height: 1.4;
span {
display: block;
&:nth-child(1) {
font-size: 26px;
@media only screen and (max-width: 600px) {
font-size: 18px;
}
}
&:nth-child(2) {
font-size: 44px;
@media only screen and (max-width: 600px) {
font-size: 28px;
}
}
}
}
h4 {
font-size: 30px;
font-weight: 700;
color: #894938;
padding: 1em 0 0.5em;
@media only screen and (max-width: 600px) {
font-size: 22px;
}
}
p {
font-size: 17px;
font-weight: 500;
margin-bottom: 0.5em;
color: #894938;
@media only screen and (max-width: 600px) {
font-size: 15px;
}
}
}
}
.box_img {
img {
max-width: 100%;
border-radius: 10px;
box-shadow: 10px 10px 20px -10px rgba(#000, 0.2);
}
}
}
}