@charset "utf-8";
/* CSS Document */

/* ページトップボタンエリア（ご注文のながれ、よくある質問） */
.box_bnr{
    display: flex;
    justify-content: space-around;
    margin-bottom: 40px;
}
.box_bnr a{
    display: block;
    width:340px;
    height: 60px;
    color: #162F65;
    font-size:20px;
    font-weight: bold;
    text-align: center;
    line-height: 60px;
    text-decoration: none;
    color: #162F65 !important;
    box-shadow: 0px 1px 15px rgb(0 0 0 / 16%);
	transition-duration: .3s;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}
.box_bnr a:hover{
    box-shadow: 0 6px 12px rgb(0 0 0 / 20%);
    transform: translateY(-0.3em);
    -webkit-transform: translateY(-0.3em);
}
@media screen and (max-width:750px) {
    .box_bnr{
        margin-bottom:0;
    }
    .box_bnr a{
        width:calc(100% / 2);
        height: calc(105 * 100vw / 750);
        font-size:calc(35 * 100vw / 750);
        line-height: calc(105 * 100vw / 750);
    }
    .box_bnr a + a{
        margin-left: calc(40 * 100vw / 750);
    }
}
/* メニュー部分（3-3-1グリッド：上2行は3列、最後のbox_aboutのみ1カラム全幅） */
.box_menu {
    width: 920px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.box_menu dl {
    border: 1px solid #CCC;
}
.box_menu dl:not(#box_about) {
    width: 100%;
}
.box_menu dt {
    font-size: 22px;
	height:46px;
    letter-spacing: .1em;
    color: #FFF;
    line-height: 46px;
    text-align: center;
    background: #162F65;
    font-weight: bold;
    box-sizing: border-box;
}
.box_menu dt a {
	display:block;
    text-decoration: none;
    color: #FFF !important;
    background: #162F65;
}
.box_menu dt a:hover {
    color: #FFF;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	opacity:0.7;
}
.box_menu dd {
	padding:20px 10px 20px 15px;
    line-height: 190%;
}
.box_menu dd li::before{
    content: "▸";
    margin-right: 5px;
}
.box_menu dd a {
    text-decoration: none;
    color: #333 !important;
}
.box_menu dd a:hover {
    color: #F60 !important;
}
/* 挨拶状ドットコムについて */
.box_menu #box_about dd {
	height:auto;
    padding:20px 0;
}
.box_menu dl#box_about {
    grid-column: 1 / -1;  /* 1カラムで全幅 */
    width: 100%;
}
.box_menu #box_about dt {
	width:100%;
}
.box_menu #box_about dt a {
	width:100%;
    padding:0;
    text-align: center;
}
.box_menu #box_about ul{
    margin:0 24px;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.box_menu #box_about li{
    width: 290px;
}
.box_menu #box_about .link_outlink {
    display: inline-flex;
}
@media screen and (max-width:750px){
    .box_menu {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 0;
    }
    .box_menu dl#box_about {
        grid-column: 1;
    }
    .box_menu dl {
        width: 100%;
        border: 0;
    }
    .box_menu dt {
        margin: calc(50 * 100vw / 750) 0 calc(26 * 100vw / 750);
        padding: calc(8 * 100vw / 750) calc(22 * 100vw / 750);
        font-size: calc(40 * 100vw / 750);
        border: 0;
        text-align: left;
        font-weight: bold;
        height: auto;
        line-height: 175%;
    }
    .box_menu dd {
        padding: 0;
    }
    .box_menu dd li::before{content: none;}
    .box_menu dd li{
        border-bottom: 1px solid #e6e6e6;
    }
    .box_menu dd a{
        text-decoration: none;
        font-weight: bold;
        width: 100%;
        position: relative;
        padding: calc(16 * 100vw / 750) calc(24 * 100vw / 750);
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
        flex-direction: row-reverse;
    }
    .box_menu dd a::before{
        content: "";
        display: inline-block;
        width: calc(12 * 100vw / 750);
        height: calc(12 * 100vw / 750);
        margin-left: auto;
        border-bottom: calc(4 * 100vw / 750) solid #333;
        border-right: calc(4 * 100vw / 750) solid #333;
        transform: rotate(315deg);
    }
    .box_menu dd .link_outlink::before{
        content: none;
    }
    .box_menu #box_about .link_outlink {
        display: inline-flex;
        flex-direction: row;
    }
    /* 挨拶状ドットコムについて */
    .box_menu #box_about dd {
        padding:0;
    }
    .box_menu #box_about dt {
        width:100%;
    }
    .box_menu #box_about ul{
        margin:0;
        flex-direction: column;
    }
    .box_menu #box_about li{
        width: 100%;
    }
}