:root { --main-color: #133967; --sub-color: #C4C4C4; }
TITLE
TITLE
TITLE
TITLE
TITLE
TITLE
TITLE
TITLE
.two_column01 { display: flex; flex-wrap: wrap; gap: 40px 40px; margin: 0 0 60px; } .two_column01:last-child{ margin-bottom: 0; } .two_column01 > li { width: calc((100% - 40px) / 2) } .two_column01_txt_box { margin: 15px 0 0; } .two_column01_tit_area { display: flex; flex-direction: column-reverse; line-height: 1.3; } .two_column01_tit { font-size: 20px; font-weight: bold; } .two_column01_sub_tit { font-size: 16px; font-weight: bold; color: var(--main-color); } @media (max-width : 1024px){ .two_column01_tit { font-size: 18px; } } @media (max-width : 640px){ .two_column01 { gap: 30px 30px; } .two_column01 > li { width: 100%; max-width: inherit; margin: 0; } .two_column01_tit { font-size: 18px; } .two_column01_img_box { text-align: center; } }
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
.two_column02 { display: flex; flex-wrap: wrap; margin: 0 0 50px; gap: 40px 40px; } .two_column02:last-child { margin: 0; } .two_column02 li { width: calc((100% - 40px) / 2); background: #fff; position: relative; } .two_column02_img_box { margin: 0 0 15px; text-align: center; } .two_column02_txt_box { padding: 20px 10px 30px; box-sizing: border-box; } .two_column02_tit { font-size: 22px; font-size: 2.2rem; text-align: center; color: #444; font-weight: 500; letter-spacing: 0.2em; display: flex; flex-direction: column; align-items: center; margin: 0 0 25px; } .two_column02_tit:after { content: ''; width: 30px; height: 3px; background: var(--sub-color); margin: 10px 0 0; } @media (max-width : 810px){ .two_column02 { gap: 30px 30px; } .two_column02 li { width: 100%; } .two_column02_tit { font-size: 21px; font-size: 2.1rem; } } @media (max-width : 640px){ .two_column02_tit { font-size: 20px; font-size: 2.0rem; } }
.two_column03 { display: flex; flex-wrap: wrap; gap: 30px 30px; margin: 0 0 60px; } .two_column03:last-child { margin: 0; } .two_column03_txt_box { height: 225px; position: relative; } .two_column03_txt_area { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .two_column03_txt { text-align: center; font-size: 22px; font-size: 2.2rem; font-weight: bold; display: block; position: relative; width: 100%; } .two_column03_txt::after { position: absolute; top:100%; background: #fff; width: 30px; height: 30px; border-top: solid 1px var(--main-color); border-right: solid 1px var(--main-color); transform: rotate(45deg); } .two_column03 > li { width: calc((100% - 30px) / 2) } .two_column03 a { display: block; } .two_column03 a:hover { display: block; background: #333; } .two_column03 a .two_column03_bg01 { background: url("../img/common/two_column03_bg01.webp") center/cover no-repeat #ccc; color: #fff; z-index: 0; } .two_column03 a .two_column03_bg01: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; } .two_column03 a:hover .two_column03_bg01:before { background: rgba(51,51,51,0.8); } .two_column03 a .two_column03_bg02 { background: url("../img/common/two_column03_bg02.webp") center/cover no-repeat #ccc; color: #fff; z-index: 0; } .two_column03 a .two_column03_bg02: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; } .two_column03 a:hover .two_column03_bg02:before { background: rgba(51,51,51,0.8); } .two_column03 a .two_column03_bg03 { background: url("../img/common/two_column03_bg03.webp") center/cover no-repeat #ccc; color: #fff; z-index: 0; } .two_column03 a .two_column03_bg03: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; } .two_column03 a:hover .two_column03_bg03:before { background: rgba(51,51,51,0.8); } @media (max-width : 1040px){ .two_column03 > li { width: 100%; } }
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
.two_column04 { display: flex; flex-wrap: wrap; margin: 0 0 50px; gap: 40px 40px; counter-reset: number; } .two_column04:last-child { margin: 0; } .two_column04 li { width: calc((100% - 40px) / 2); background: #fff; position: relative; } .two_column04_img_box { text-align: center; } .two_column04_txt_box { padding: 20px 10px 30px; box-sizing: border-box; } .two_column04_tit { font-size: 22px; font-size: 2.2rem; text-align: center; color: #444; font-weight: 500; letter-spacing: 0.2em; margin: 0 0 10px; position: relative; } .two_column04_tit_number { padding: 10px 10px 10px 45px; position: relative; display: inline-block; } .two_column04_tit_number:before{ position: absolute; counter-increment: number; content: counter(number); display: inline-block; background: var(--main-color); color: #fff; font-weight: 500; font-size: 14px; left: 0; width: 35px; height: 35px; border-radius: 5px; line-height: 35px; text-align: center; letter-spacing: 0; } .two_column04_tit:after { content: ''; width: 30px; height: 3px; background: var(--sub-color); margin: 10px 0 0; } @media (max-width : 810px){ .two_column04_tit { font-size: 20px; font-size: 2.0rem; } .two_column04 { gap: 30px 30px; } .two_column04 li { width: 100%; } } @media (max-width : 640px){ .two_column04_tit { font-size: 18px; font-size: 1.8rem; } }
.two_column05 { gap: 40px; display: flex; flex-wrap: wrap; } .two_column05 li { width: calc((100% - 40px) / 2); position: relative; } .two_column05 li a{ display: block; position: relative; width: 100%; } .two_column05 li a:hover{ text-decoration: none; } .two_column05 li a .two_column05_box { width: 100%; min-height: 300px; display: flex; justify-content: center; align-items: center; position: relative; } .two_column05 li a .two_column05_box::before{ content: ""; width: 100%; height: 100%; background: rgba(0,0,0,.4); position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); z-index: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .two_column05 li a:hover .two_column05_box::before{ background: rgba(0,0,0,.5); width: calc(100% - 40px); height: calc(100% - 40px); } .two_column05 li a .two_column05_box::after{ content: ''; position: absolute; bottom: 10px; right: 10px; width: 0; height: 0; border-style: solid; border-width: 0 0 19px 19px; border-color: transparent transparent #fff transparent; } .two_column05_tit { font-size: 23px; font-size: 2.3rem; font-weight: bold; letter-spacing: 0; color: #fff; position: relative; z-index: 5; text-align: center; line-height: 1.5; } .two_column05_bg01{ background: url("../img/common/two_column05_bg01.webp") no-repeat 50% 50% #ccc; background-size: cover; } .two_column05_bg02{ background: url("../img/common/two_column05_bg02.webp") no-repeat 50% 50% #ccc; background-size: cover; } .two_column05_bg03{ background: url("../img/common/two_column05_bg03.webp") no-repeat 50% 50% #ccc; background-size: cover; } .two_column05_bg04{ background: url("../img/common/two_column05_bg04.webp") no-repeat 50% 50% #ccc; background-size: cover; } @media (max-width: 810px) { .two_column05 { gap: 20px; } .two_column05 li { width: 100%; } }