/*==================================================== ////id | data ====================================================*/ .data-inner { display: flex; justify-content: center; } .data-item-wrapper { display: grid; grid-gap: 5px; font-size: min(3.6vw, 1.6rem); } .data-item dt { background: var(--l_gray); padding: .4em 1em; text-align: center; } .data-item dd { padding: .4em 1em; } .data-item .company_name { background: url('data:image/svg+xml;charset=UTF-8,') no-repeat top left ; display: inline-block; width: 12em; height: 1em; } /* ////////// mobile ////////// */ @media screen and (max-width: 769px) { .data-item-wrapper { grid-gap: 1em; } .data-item dt { margin-bottom: .3em; width: 8em; } } /* ////////// PC ////////// */ @media print, screen and (min-width: 769px) { .data-item-wrapper { grid-template-columns: min(25vw, 220px) 1fr; } .data-item { border-bottom: solid 1px var(--d_gray); display: grid; grid-template-columns: subgrid; grid-column: span 2; } } @media (hover: hover) {} /*==================================================== ////id | xxx ====================================================*/ /* ////////// mobile ////////// */ @media screen and (max-width: 769px) { } /* ////////// PC ////////// */ @media print, screen and (min-width: 769px) { } @media (hover: hover) {} /*==================================================== ////id | xxx ====================================================*/ /* ////////// mobile ////////// */ @media screen and (max-width: 769px) { } /* ////////// PC ////////// */ @media print, screen and (min-width: 769px) { } @media (hover: hover) {}