@charset "utf-8";

@media print, screen and (min-width : 769px){
	.section {
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		width: 1010px;
		margin: auto;
		letter-spacing: .03em;
		color: #000;
		font-feature-settings: 'palt' 1;
	}
	.section img {
		display: block; 
		width: 100%;
	}
	.section sup {
		vertical-align: top;
		letter-spacing: 0;
		font-size: 75%;
	}


/* ----------------------------------------
	section_title
---------------------------------------- */

	#section_title,
	#section_customize {
		background: #f0f0f0;
	}
	#section_title {
		margin-top: 30px;
		text-align: center;
	}
	#section_title h3 {
		flex-direction: column;
		height: 110px;
		background: #000;
		letter-spacing: .15em;
		color: #fff;
		font-size: 20px;
	}
	#section_title h3 img {
		margin-bottom: 10px;
	}
	#section_title p {
		padding: 15px 0;
		letter-spacing: .15em;
		font-size: 18px;
		line-height: calc(28 / 18);
	}


/* ----------------------------------------
	section_customize
---------------------------------------- */

	#section_customize h4 {
		margin-bottom: 13px;
		letter-spacing: .03em;
		font-size: 18px;
	}

	#section_customize .block {
		position: relative;
		z-index: 1;
		margin-top: 70px;
	}
	#section_customize .block:first-child {
		margin-top: 0;
	}

	#section_customize .block_inner {
		position: relative;
		width: 850px;
	}

	#section_customize .base,
	#section_customize .base .block_inner {
		height: 270px;
	}
	#section_customize .base {
		--pad: 255px;

		z-index: 2;
	}
	#section_customize .base input {
		visibility: hidden;
		opacity: 0;
		position: absolute;
	}

	#section_customize .base .block_inner {
		position: absolute;
		left: 50%;
		box-sizing: border-box;
		width: 1010px;
		padding: 40px var(--pad) 0;
		background: #f0f0f0;
		transform: translateX(-50%);
	}
	#section_customize .base .block_inner::after {
		content: '';
		position: absolute;
		left: 80px;
		right: 80px;
		bottom: 0;
		z-index: 1;
		height: 2px;
		background: #d3d3d3;
	}

	#section_customize .base.is-fixed .block_inner {
		overflow-y: auto;
		position: fixed;
		max-height: 30vh;
		margin-top: 121px;
	}

	#section_customize .base h4 {
		margin-bottom: 0;
		padding: 9px 0;
		font-family: var(--font-bold);
	}

	#section_customize .base .btn {
		position: absolute;
		right: var(--pad);
		top: 40px;
		width: 132px;
		border: 1px solid #000;
	}
	#section_customize .base .btn li {
		width: 50%;
	}
	#section_customize .base .btn label {
		display: block;
		background: #fff;
		text-align: center;
		letter-spacing: .03em;
		font-family: var(--font-bold);
		font-size: 16px;
		line-height: 24px;
		cursor: pointer;
		transition: .2s;
	}

	#base_input_zoom:checked~.block_inner .btn .zoom label,
	#base_input_whole:checked~.block_inner .btn .whole label {
		background: #000;
		color: #fff;
		cursor: default;
	}

	#section_customize .base .img {
		position: relative;
	}
	#section_customize .base .img li {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 1;
		transition: .5s;
		transition-property: visibility, opacity;
	}

	#base_input_zoom:checked~.block_inner .img .zoom,
	#base_input_whole:checked~.block_inner .img .whole {
		visibility: visible;
		opacity: 1;
		position: relative;
		z-index: 2;
	}

	#section_customize .base .customized {
		position: absolute;
		z-index: 1;
		aspect-ratio: 210 / 41;
	}

	#section_customize .base .zoom .customized {
		left: 40px;
		top: 47px;
		width: 332px;
	}

	#section_customize .base .whole .customized {
		left: 77px;
		top: 72px;
		width: 79px;
		transform: rotate(-2deg);
	}

	#section_customize .base[data-preset] .img li::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1;
		background: 50% 50% / contain no-repeat;
	}

	#section_customize .base[data-preset='a'] .img .zoom::after {
		background-image: url(../img/base_zoom_preset_a.jpg);
	}
	#section_customize .base[data-preset='a'] .img .whole::after {
		background-image: url(../img/base_whole_preset_a.jpg);
	}
	#section_customize .base[data-preset='b'] .img .zoom::after {
		background-image: url(../img/base_zoom_preset_b.jpg);
	}
	#section_customize .base[data-preset='b'] .img .whole::after {
		background-image: url(../img/base_whole_preset_b.jpg);
	}
	#section_customize .base[data-preset='c'] .img .zoom::after {
		background-image: url(../img/base_zoom_preset_c.jpg);
	}
	#section_customize .base[data-preset='c'] .img .whole::after {
		background-image: url(../img/base_whole_preset_c.jpg);
	}

	#section_customize .base[data-preset] .img .customized {
		opacity: 0;
	}

	#section_customize .preset {
		padding: 70px 0;
		background: #e1e1e1;
	}

	#section_customize .panel ul {
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-right: -35px;
	}
	#section_customize .panel li {
		position: relative;
		width: 260px;
		margin-right: 35px;
	}
	#section_customize .panel li:nth-child(n+4) {
		margin-top: 40px;
	}
	#section_customize .panel li::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: 3px;
		margin-top: 10px;
		background: #999;
		z-index: 1;
		transform: scaleX(0);
		transition: .2s transform;
	}

	#section_customize .panel li.is-current::after {
		transform: scaleX(1);
	}

	#section_customize .panel h5 {
		margin-bottom: 10px;
		letter-spacing: .03em;
		font-size: 14px;
	}
	#section_customize .panel li:not(.is-current) img {
		cursor: pointer;
		transition: .2s opacity;
	}
	#section_customize .panel li:not(.is-current) img:hover {
		opacity: .7;
	}

	#section_customize .input {
		padding-bottom: 60px;
	}

	#panel_upload {
		visibility: hidden;
		position: absolute;
		right: 100%;
	}

	#btn_upload {
		flex-direction: column;
		box-sizing: border-box;
		width: 255px;
		height: 120px;
		border: 1px solid #000;
		background: #fff;
		letter-spacing: .03em;
		font-family: var(--font-bold);
		font-size: 13px;
		transition: .2s opacity;
		cursor: pointer;
	}
	#btn_upload img {
		width: 53.6px;
		margin-bottom: 6.6px;
		padding-right: 15.3px;
	}
	#btn_upload:hover {
		opacity: .7;
	}
	
	.section #btn_print,
	.section #btn_trim,
	.section #btn_trim_cancel {
		display: inline-block;
		background: #000;
		text-align: center;
		color: #fff;
		font-size: 20px;
		line-height: calc(46 / 20);
		cursor: pointer;
		transition: .2s;
	}
	#btn_print {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 153px;
	}

	#btn_print.is-disable {
		opacity: .3 !important;
		cursor: default;
	}

	#section_customize .input .note {
		margin-top: 1.25em;
		text-align: right;
		font-family: var(--font-light);
		font-size: 12px;
		line-height: 1.5;
	}


/* ----------------------------------------
	section_caution
---------------------------------------- */

	#section_caution {
		margin-top: 40px;
		font-family: var(--font-light);
		font-size: 12px;
		line-height: 1.5;
	}


/* ----------------------------------------
	trim_modal
---------------------------------------- */

	#trim_modal {
		display: flex;
		justify-content: center;
		align-items: center;
		visibility: hidden;
		opacity: 0;
		position: fixed;
		left: 0;
		top: 0;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		z-index: 100000;
		background: rgba(0,0,0,.7);
		transition: .5s;
		transition-property: visibility, opacity;
	}

	#trim_modal.is-shown {
		visibility: visible;
		opacity: 1;
	}

	#trim_modal>div {
		overflow: auto;
		position: relative;
		box-sizing: border-box;
		width: 90%;
		height: 90%;
		padding-bottom: 166px;
		background: #fff;
		text-align: center;
	}
	
	#trim_modal .btn_list {
		display: flex;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 60px;
	}
	#trim_modal .btn_list li {
		margin: 0 20px;
	}

	#btn_trim,
	#btn_trim_cancel {
		padding: 0 50px;
	}

	.section #btn_trim_cancel {
		background: #707070;
	}

	#trimmed {
		visibility: hidden;
		position: absolute;
	}

	.cropper-container {
		overflow: hidden;
		max-width: 100%;
		max-height: 100%;
	}


/* ----------------------------------------
	print_contents
---------------------------------------- */

	#print_contents {
		display: none;
	}


/* ----------------------------------------
	Bottom
---------------------------------------- */

	#bottom_link {
		margin-top: 100px;
	}

	#footer_topic_path {
		margin-top: 80px;
	}
}