@charset "utf-8"; /* CSS Document */ /****** 制作事例ページ ******/ div.grid_box{ display: -ms-grid; display: grid; -ms-grid-rows: auto; grid-template-rows: auto; -ms-grid-columns: 13% 74% 13%; grid-template-columns: 13% 74% 13%; } div.grid_box > *:nth-child(1){ -ms-grid-row: 1; -ms-grid-column: 1; } div.grid_box > *:nth-child(2){ -ms-grid-row: 1; -ms-grid-column: 2; } div.grid_box > *:nth-child(3){ -ms-grid-row: 1; -ms-grid-column: 3; } #itemA{ -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1 / 2; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1 / 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #itemB{ -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1 / 2; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-column: 2 / 3; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #itemC{ -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1 / 2; -ms-grid-column: 3; -ms-grid-column-span: 1; grid-column: 3 / 4; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } p.btn_itiran img{ display: block; margin: 0 auto; } @media screen and (max-width: 768px){ p.btn_itiran img{ display: block; margin: 0 auto; width: 30%; } div.grid_box{ -ms-grid-columns: 9% 82% 9%; grid-template-columns: 9% 82% 9%; } }