@charset "UTF-8";
/* 共通 */
#main img {
	width: 100%;
    height: auto;
    vertical-align: bottom;
}
.border {
    border: 1px solid #ccc;
}
/* :is(#layout , #font , #quality) {
padding-top: 72px;
margin-top: -72px;
}
:is(#layout , #font) {
    margin-bottom: calc(120 * 100vw / 920);
}

@media screen and (min-width:920px) {
:is(#layout , #font) {
    margin-bottom: 80px;
}
} */

/* menu */
#menu .menu_list {
    padding: calc(24 * 100vw / 750) calc(18 * 100vw / 750) calc(36 * 100vw / 750);
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: calc(28 * 100vw / 750);
}
.menu_item a {
    padding: calc(28 * 100vw / 750) 0;
    font-size: calc(24 * 100vw / 750);
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    border-bottom: 2px solid #796ca4;
}
@media screen and (min-width:920px) {
#menu .menu_list {
    padding: 16px 12px 20px;
    gap: 20px;
}
.menu_item a {
    padding: 20px;
    font-size: 16px;
}
}

/* 宛名印刷のレイアウト */
#layout .layout_list {
    display: flex;
    justify-content: center;
    gap: min(calc(40 * 100vw / 920), 40px);
}
#layout .layout_sender-images {
    margin-inline: auto;
    width: min(100%, 272px);
}

/* 宛名印刷の書体 */
#font .font_list {
    display: flex;
    justify-content: center;
    gap: min(calc(40 * 100vw / 920), 40px);
}
#font .font_type {
    font-size: calc(32 * 100vw / 920);
    font-weight: bold;
    text-align: center;
}
#font .kusa_list {
    display: flex;
    gap: min(calc(40 * 100vw / 920), 40px);
}
@media screen and (min-width:920px) {
#font .font_type {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}
}

/* 宛名印刷印刷品質 */
#quality .quality_list {
    display: flex;
    flex-direction: column;
    gap:calc(30 * 100vw / 920) 0;
}
.quality_item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    row-gap:0;
    align-items: center;
}
#quality .quality_list dt {
    font-size: calc(42 * 100vw / 920);
    font-weight: bold;
    text-align: center;
}

@media screen and (min-width:920px) {
#quality .quality_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:0 40px;
}
#quality .quality_list dt {
    font-size: 14px;
}
}