:root { --main-color: #133967; --sub-color: #C4C4C4; }
.three_column02 { display: flex; flex-wrap: wrap; gap: 30px 30px; margin: 0 0 60px; } .three_column02:last-child { margin: 0; } .three_column02 > li { width: calc((100% - 60px) / 3) } @media (max-width : 767px){ .three_column02 > li { width: calc((100% - 30px) / 2) } .three_column02_img_box { text-align: center; } } @media (max-width : 640px){ .three_column02 > li { width: 100%; } .three_column02_img_box { text-align: center; } }
TITLE
TITLE
TITLE
TITLE
TITLE
TITLE
TITLE
TITLE
TITLE
TITLE
TITLE
TITLE
.three_column01 { display: flex; flex-wrap: wrap; gap: 30px 30px; margin: 0 0 60px; } .three_column01:last-child { margin: 0; } .three_column01 > li { width: calc((100% - 60px) / 3) } .three_column01_txt_box { margin: 15px 0 0; } .three_column01_tit_area { display: flex; flex-direction: column-reverse; line-height: 1.3; } .three_column01_main_tit { font-size: 20px; font-weight: bold; } .three_column01_sub_tit { font-size: 16px; font-weight: bold; color: var(--main-color); } @media (max-width : 1060px){ .three_column01_main_tit { font-size: 18px; } .three_column01 > li { width: calc((100% - 30px) / 2) } } @media (max-width : 810px){ .three_column01 > li { width: 100%; } .three_column01_main_tit { font-size: 18px; } .three_column01_img_box { text-align: center; } }
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
.three_column03 { display: flex; flex-wrap: wrap; gap: 30px 30px; margin: 0 0 60px; } .three_column03:last-child { margin: 0; } .three_column03 > li { width: calc((100% - 60px) / 3) } .three_column03_txt_box { margin: 15px 0 0; } .three_column03_main_tit { font-size: 20px; font-weight: bold; } @media (max-width : 1060px){ .three_column03 > li { width: calc((100% - 30px) / 2) } } @media (max-width : 810px){ .three_column03 > li { width: 100%; } .three_column03_img_box { text-align: center; } .three_column03_main_tit { font-size: 18px; } }
.three_column05 { display: flex; flex-wrap: wrap; gap: 30px 30px; margin: 0 0 60px; } .three_column05:last-child { margin: 0; } .three_column05 > li { width: calc((100% - 60px) / 3) } .three_column05 > li > a { text-decoration: none; transition: 0.3s all; } .three_column05 > li > a img { transition: 0.3s all; } .three_column05_txt_box { padding: 10px 0; background: var(--main-color); } .three_column05_main_tit { font-size: 18px; font-size: 1.8rem; text-align: center; color: #fff; } @media (max-width : 1060px){ .three_column05 > li { width: calc((100% - 30px) / 2) } } @media (max-width : 810px){ .three_column05 > li { width: 100%; } .three_column05_img_box { text-align: center; } }
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
.three_column06 { display: flex; flex-wrap: wrap; gap: 30px 30px; margin: 0 0 60px; } .three_column06:last-child { margin: 0; } .three_column06_txt_area { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 225px; padding: 10px; box-sizing: border-box; position: relative; } .three_column06_txt_area:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: 0.3s all; background: rgba(0,0,0,0.3); z-index: -1; } .three_column06_tit { font-size: 20px; font-size: 2.0rem; color: #fff; text-align: center; padding: 0 0 10px; margin: 0 0 15px; position: relative; } .three_column06_tit:after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,-50%); width: 40px; height: 4px; background: #fff; } .three_column06_txt { font-size: 16px; font-size: 1.6rem; text-align: center; font-weight: 500; display: block; position: relative; width: 100%; color: #fff; } .three_column06 > li { width: calc((100% - 60px) / 3) } .three_column06_bg01 { background: url("../img/common/three_column06_bg01.webp") center/cover no-repeat #ccc; z-index: 0; } .three_column06_bg02 { background: url("../img/common/three_column06_bg02.webp") center/cover no-repeat #ccc; z-index: 0; } .three_column06_bg03 { background: url("../img/common/three_column06_bg03.webp") center/cover no-repeat #ccc; z-index: 0; } @media (max-width : 1060px){ .three_column06 > li { width: 100%; } }