@charset "utf-8";

/* 共通設定
---------------------------------------------------------- */
#main .important {
	color: #D70C18;
	font-weight: bold;
}
/* button */
#main a.btn-square:hover {
	color: #FF6600;
}
/* attention_area */
#main .attention_area a{
    color: #D70C18;
}
.attention_area {
	width: 800px;
	margin: 25px auto 0;
	box-sizing: border-box;
}
.attention_title {
	font-size: 18px;
	font-weight: bold;
}
/* button */
	#main .btn-area {
		display: flex;
		justify-content: center;
		margin-top: 30px;
		gap: 0 20px;
	}
@media screen and (max-width: 750px){
/* attention_area */
	.attention_area {
		width:100%;
		margin:calc(40*100vw/750) auto 0;
	}
	.attention_title{
		font-size:calc(30*100vw/750);
		margin-bottom:calc(10*100vw/750);
	}
/* button */
	#main .btn-area {
		width: 100%;
		gap:calc(40*100vw/750) 0;
		flex-direction: column;
	}

}
/* appeal_area
---------------------------------------------------------- */
.appeal_box {
	display: flex;
	justify-content: space-between;
	column-gap: 24px;
}

.appeal_box-item {
	width: calc((100% - 24px) / 2);
	padding: 15px;
	background: #ECF0F4;
	box-sizing: border-box;
}

.appeal_box-title {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: -0.04em;
	text-align: center;
}

.appeal_box-title span {
	font-size: 24px;
}

.appeal_box-text {
	margin-top: 10px;
	letter-spacing: 0.04em;
}
.anc_list-link {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media screen and (max-width: 750px) {
	.appeal_box{
		flex-direction: column;
		row-gap:calc(30*100vw/750);
		column-gap:0;
	}
	.appeal_box-item{
		width: 100%;
		margin: 0;
		padding: calc(26*100vw/750);
	}
	.appeal_box-title{
		font-size:calc(30*100vw/750);
		height:auto;
	}
	.appeal_box-title span {
		font-size:calc(42*100vw/750);
	}
    .anc_list-link {
        grid-template-columns: repeat(1, 1fr);
        gap: calc(25 * 100vw / 750);
    }
}
/* 宛名印刷無料
---------------------------------------------------------- */
.cam  {
	margin-top: 54px;
}
.cam_kv-link:hover img {
	opacity: .7;
}
.cam_kv-link img {
	transition: opacity .3s;
}
.cam_free{
    display: inline-block;
    background: #fff;
    padding: 2px 10px;
    border-radius: 8px;
    letter-spacing: .04em;
}
@media screen and (max-width: 750px){
	.cam_free {
		padding: 0 calc(10 * 100vw / 750);
		border-radius: calc(8 * 100vw / 750);
	}
}
/* about_area
---------------------------------------------------------- */
.about_btn-area .anc_list-link{
	grid-template-columns:repeat(2, 1fr);
}
.about_btn-area p {
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}
@media screen and (max-width: 750px){
	.about_btn-area .anc_list-link {
		grid-template-columns: auto;
	}
	.about_btn-area p {
		margin-bottom:calc(18 * 100vw / 750);
	}
}
/* mypage_area
---------------------------------------------------------- */
.mypage_area {
	margin-top: 44px;
}
#main .mypage_desc span {
	font-weight: normal;
	text-decoration: underline;
}
.mypage_btn-area {
	display: flex;
	justify-content: space-between;
	text-align: center;
}


/* quality_area
---------------------------------------------------------- */
.sample-flex {
	display: flex;
	gap: 20px;
}
/*宛名印刷例*/
.print_sample{
	margin-top: 24px;
}
.print_sample dt{
	margin-bottom: 8px;
}
.print_sample-image{
	width: 232px;
	text-align: center;
	margin-bottom: 16px;
}
/* 書体*/
.font_supplement {
    margin: 20px 0 0 20px;
}
.font_supplement-area p{
	margin-bottom: 20px;
}
@media screen and (max-width: 750px){
	.sample-flex{
		gap:0;
	}
	.sample-flex > div + div{
		margin-left: calc(40 * 100vw / 750);
	}
	/*宛名印刷例*/
	.print_sample{
		margin-top:calc(42 * 100vw / 750);
	}
	.print_sample dt{
		margin-bottom:calc(14 * 100vw / 750);
	}
	.print_sample-image{
		width:calc(100% / 2 - calc(20 * 100vw / 750));
		margin-bottom:calc(24 * 100vw / 750);
	}
	/* 書体*/
	.font_supplement {
		margin:calc(40 * 100vw / 750) 0 0 0;
	}
	.font_supplement-area p{
		margin-bottom:calc(40 * 100vw / 750);
	}
	.font_sample-image {
		width: 50%;
	}
	.font_sample-image img{
		width: 100%;
		height: auto;
	}
}

/* .quality_area {
.print_sample-image a {
	cursor: url(/atena/img/zoomin.cur), url(/atena/img/zoomin.gif), pointer;
	outline: none;
}

#zoom {
	cursor: url(/atena/img/zoomout.cur), url(/atena/img/zoomout.gif), pointer;
	outline: none;
	z-index:100;
} */

/* /atena/mihon.html
---------------------------------------------------------- */
#hagaki_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 20px;
    text-align: center;
}
#hagaki_list .hagaki_ttl {
    display: flex;
    justify-content: center;
	margin-bottom: 10px;
}
#hagaki_list .hagaki_ttl .h-label{
	display: inline-block;
	background: #eee;
	font-weight: bold;
	padding: 3px 10px 0;
    font-size: 14px;
	box-sizing: border-box;
}
#hagaki_list .hagaki_ttl .h-label + .h-label{
	margin-left: 10px;
}
.hagaki_img img {
    height: auto;
}
@media screen and (max-width: 750px){
	#hagaki_list {
		grid-template-columns: repeat(2, 1fr);
		gap:calc(70*100vw/750) ;
	}
	#hagaki_list .hagaki_ttl .h-label{
		padding: calc(3*100vw/750)  calc(16*100vw/750) 0;
		font-size: calc(20*100vw/750);
	}
	#hagaki_list .hagaki_ttl .h-label + .h-label{
		margin-left: calc(16*100vw/750);
	}
}
/* /atena/card.html
---------------------------------------------------------- */
#card #hagaki_list{
	grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 750px){
	#card #hagaki_list{
		grid-template-columns: repeat(1, 1fr);
	}
}

/* /atena/t_order.html
---------------------------------------------------------- */
.layout_box {
    padding: 0 40px;
}
.step_1,
.step_2,
.step_3 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 60px;
    position: relative;
}
.step_1::after,
.step_2::after {
    content: "";
    background-color: #D70C18;
    width: 46px;
    height: 18px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    position: absolute;
    bottom: -42px;
    left: 140px;
}
.step_1_text,
.step_2_text,
.step_3_text {
    width: 450px;
}
.title {
    font-size: 18px;
    font-weight: bold;
}
.step_3 img {
    border: 1px solid #CCC;
}
@media screen and (max-width: 750px){
.step_1,
.step_2,
.step_3 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    margin-bottom: calc(120*100vw/750);
}
.step_1::after,
.step_2::after {
    width: calc(80*100vw/750);
    height: calc(40*100vw/750);
    bottom: calc(-88*100vw/750);
    left: calc(50% - calc(40*100vw/750));
}
.step_1_text,
.step_2_text,
.step_3_text {
    width: 100%;
    margin-bottom: calc(40*100vw/750);
}
.title {
    font-size: calc(36*100vw/750);
}
.step_3 img {
    width: 100%;
}
}



/* 市販宛名ソフト
---------------------------------------------------------- */
#soft_about ul.soft_caution {
    margin-bottom: 40px;
}
#soft_about ul.soft_inner > li {
    margin-bottom: 20px;
}
@media screen and (max-width: 750px){
    #soft_about {
        padding:0 calc(22*100vw/750);
    }
    #soft_about ul.soft_caution {
        margin-bottom: calc(60*100vw/750);
    }
    #soft_about ul.soft_inner > li {
        margin-bottom: calc(40*100vw/750);
    }
    #soft_about ul.soft_inner > li img {
        width: 100%;
        height: auto;
    }
}