画像+テキスト

このページの基本カラー

:root {
 --main-color: #133967;
 --sub-color: #C4C4C4;
}

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

HTML


 
  テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

CSS

.common_box01 {
 width: 100%;
 display: flex;
 margin: 0 0 70px;
 gap: 40px 40px;
}

.common_box01:last-child {
 margin-bottom: 0;
}

.common_box01 .common_box01_txt_area {
 width: 50%;
}

.common_box01 .common_box01_txt_area:only-child {
 width: 100%;
}

.common_box01 .common_box01_img_area {
 width: 50%;
 box-sizing: border-box;
}

@media (max-width : 810px){

 .common_box01 {
 flex-direction: column;
 align-items: center;
 text-align: center;
}
 
.common_box01 .common_box01_img_area {
 max-width: inherit;
 width: 100%;
 order: 1;
}
 
.common_box01 .common_box01_txt_area {
 width: 100%; 
 margin: 0;
 order: 2;
} 

}

詳細

POINT1

タイトルが入ります。

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

HTML


 
   
    POINT1
    タイトルが入ります。   
   
   テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

CSS

.common_box03 {
 width: 100%;
 display: flex;
 margin: 0 0 70px;
 gap: 40px 40px;
}

.common_box03:last-child {
 margin: 0;
}

.common_box03 .common_box03_txt_area {
 width: 60%;
}

.common_box03 .common_box03_txt_area:only-child {
 width: 100%;
}

.common_box03 .common_box03_img_area {
 width: 40%;
 box-sizing: border-box;
}

.common_box03_tit_area {
	display: flex;
	margin: 0 0 35px;
	flex-direction: column;
	position: relative;
}

.common_box03_point {
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 width: 110px;
 padding: 10px 5px;
 font-size: 18px;
 font-size: 1.8rem;
 font-weight: 600;
 line-height: 1;
 color: #fff;
 text-align: center;
 background-color: var(--main-color);
 margin: 0 0 15px;
}

.common_box03_tit {
 font-size: 24px;
 letter-spacing: 0.1em;
 font-weight: 400;
 border-bottom: 2px solid #f3f3f3;
 padding-bottom: 8px;
 position: relative;
}

.common_box03_tit::after {
 content: "";
 position: absolute;
 left: 0;
 bottom: -2px;
 width: 70px;
 height: inherit;
 border-bottom: 2px solid var(--main-color);
}


@media (max-width : 810px){
 
.common_box03 {
 flex-direction: column;
 align-items: center;
 text-align: center;
}
 
.common_box03 .common_box03_img_area {
 max-width: inherit;
 width: 100%;
 order: 1;
}
 
.common_box03 .common_box03_txt_area {
 width: 100%; 
 margin: 0;
 order: 2;
} 

}

詳細