@charset "utf-8";
@media screen and (max-width : 768px){
	.section {
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		margin: auto;
		letter-spacing: .03em;
		font-feature-settings: 'palt' 1;
	}
	.section img {
		display: block; 
		width: 100%;
	}
	.section sup {
		vertical-align: top;
		letter-spacing: 0;
		font-size: 75%;
	}

	.section .box_flex {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.section .block_inner {
		margin: 0;
	}


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

	#section_title,
	#section_customize,
	#section_customize .base .block_inner {
		background: #f0f0f0;
	}
	#section_title h3 {
		flex-direction: column;
		height: calc(213 / 750 * 100vw);
		background: #000;
		text-align: center;
		letter-spacing: .025em;
		color: #fff;
		font-size: calc(29 / 750 * 100vw);
	}
	#section_title h3 img {
		width: calc(440.5 / 750 * 100vw);
		margin-bottom: calc(18 / 750 * 100vw);
	}
	#section_title p {
		padding: calc(20 / 750 * 100vw) calc(45 / 750 * 100vw);
		letter-spacing: .05em;
		font-family: var(--font-normal);
		font-size: calc(28 / 750 * 100vw);
		line-height: calc(38 / 28);
	}


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

	#section_customize h4 {
		margin-bottom: calc(45 / 750 * 100vw);
		text-align: center;
		letter-spacing: .03em;
		font-size: calc(30 / 750 * 100vw);
		line-height: calc(38 / 30);
	}

	#section_customize .block {
		position: relative;
		z-index: 1;
		margin-top: calc(85 / 750 * 100vw);
	}
	#section_customize .block:first-child {
		margin-top: 0;
	}

	#section_customize .block_inner {
		position: relative;
	}

	#section_customize .base,
	#section_customize .base .block_inner {
		height: calc(351 / 750 * 100vw);
	}
	#section_customize .base {
		z-index: 2;
	}
	#section_customize .base input {
		visibility: hidden;
		opacity: 0;
		position: absolute;
	}

	#section_customize .base .block_inner {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		box-sizing: border-box;
		margin: 0 calc(25 / 750 * 100vw);
		padding-top: calc(40 / 750 * 100vw);
		border-bottom: calc(3 / 750 * 100vw) solid #fff;
	}
	#section_customize .base .block_inner::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		height: calc(3 / 750 * 100vw);
		background: #d3d3d3;
	}

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

	#section_customize .base h4 {
		margin-bottom: calc(12 / 750 * 100vw);
		padding-top: calc(10 / 750 * 100vw);
		text-align: left;
		font-family: var(--font-bold);
		line-height: 1;
	}

	#section_customize .base .btn {
		position: absolute;
		right: 0;
		top: calc(40 / 750 * 100vw);
		width: calc(188 / 750 * 100vw);
		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: calc(24 / 750 * 100vw);
		line-height: calc(34 / 750 * 100vw);
	}

	#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;
		top: 0;
		aspect-ratio: 210 / 41;
	}

	#section_customize .base .zoom .customized {
		left: calc(40 / 500 * 100%);
		margin-top: calc(47 / 500 * 100%);
		width: calc(332 / 500 * 100%);
	}

	#section_customize .base .whole .customized {
		left: calc(77 / 500 * 100%);
		margin-top: calc(72 / 500 * 100%);
		width: calc(79 / 500 * 100%);
		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 {
		margin: calc(40 / 750 * 100vw) calc(25 / 750 * 100vw) 0;
	}

	#section_customize .preset .block_inner {
		padding: calc(40 / 750 * 100vw) 0;
		background: #e1e1e1;
	}

	#section_customize .panel ul {
		flex-direction: column;
	}
	#section_customize .panel li,
	#section_customize .input .block_inner {
		width: calc(535 / 750 * 100vw);
	}
	#section_customize .panel li {
		position: relative;
		margin-top: calc(40 / 750 * 100vw);
	}
	#section_customize .panel li:first-child {
		margin-top: 0;
	}
	#section_customize .panel li::after {
		content: '';
		position: absolute;
		right: 100%;
		bottom: 0;
		width: 5px;
		margin-right: 5px;
		padding-top: calc(102 / 535 * 100%);
		background: #999;
		z-index: 1;
		transform: scaleY(0);
		transition: .2s transform;
	}

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

	#section_customize .panel h5 {
		margin-bottom: calc(15 / 750 * 100vw);
		letter-spacing: .03em;
		font-size: calc(26 / 750 * 100vw);
	}

	#section_customize .input {
		padding-bottom: calc(70 / 750 * 100vw);
	}

	#section_customize .input .block_inner {
		margin: auto;
	}

	#section_customize .input h4 {
		margin-bottom: calc(15 / 750 * 100vw);
		text-align-last: left;
	}

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

	#btn_upload {
		flex-direction: column;
		box-sizing: border-box;
		width: 100%;
		height: calc(240 / 750 * 100vw);
		border: 1px solid #000;
		background: #fff;
		font-family: var(--font-bold);
		letter-spacing: .03em;
		font-size: calc(25 / 750 * 100vw);
	}
	#btn_upload img {
		width: calc(112 / 750 * 100vw);
		margin-bottom: calc(12 / 750 * 100vw);
		padding-right: calc(32 / 750 * 100vw);
	}

	.section #btn_print,
	.section #btn_trim,
	.section #btn_trim_cancel {
		display: block;
		background: #000;
		text-align: center;
		color: #fff;
	}
	#btn_print {
		width: calc(300 / 750 * 100vw);
		margin: calc(150 / 750 * 100vw) auto 0;
		font-size: calc(38 / 750 * 100vw);
		line-height: calc(90 / 38);
	}

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

	#section_customize .input .note {
		margin-top: 1.25em;
		font-family: var(--font-light);
		font-size: calc(24 / 750 * 100vw);
		line-height: 1.5;
	}


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

	#section_caution {
		margin: calc(60 / 750 * 100vw) 15px 0;
		font-family: var(--font-light);
		font-size: calc(24 / 750 * 100vw);
		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;
		max-width: 90%;
		max-height: 90%;
		padding-bottom: 100px;
		background: #fff;
		text-align: center;
	}
	
	#trim_modal .btn_list {
		display: flex;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 30px;
	}
	#trim_modal .btn_list li {
		margin: 0 calc(15 / 750 * 100vw);
	}

	#btn_trim,
	#btn_trim_cancel {
		padding: 0 calc(60 / 750 * 100vw);
		font-size: 16px;
		line-height: 40px;
	}

	.section #btn_trim_cancel {
		background: #707070;
	}

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

	.cropper-container {
		overflow: hidden;
		max-width: 100%;
		max-height: calc(90vh - 160px);
	}


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

	#print_contents {
		display: none;
	}


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

	#bottom_link {
		padding-top: calc(120 / 750 * 100vw);
		background: #fff;
	}

	.cta {
		position: relative;
		z-index: 1;
		background: #fff;
	}

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