@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 1160px) {
	#mainVisual .bg {
		background: url(/ccard/images/main02.jpg) no-repeat 0 0;
		background-size: 160%;
	}
	#main .mainBox {
		padding: 0 1%;
	}
	#mainVisual h1 {
		font-size: 3.2rem;
		line-height: 1em;
	}
	#mainVisual h1 span.txt01 {
		margin-bottom: 0.5em;
	}
	#mainVisual h1 span.txt02 {
		margin-top: 0.5em;
	}
}

@media screen and (max-width: 737px) {
	#mainVisual {
		width: 100%;
	}
	#mainVisual .bg,
	#mainVisual .bg02 {
		top: 0;
		background-size: 300%;
	}
	#mainVisual .overlay {
		top: 5%;
	}
	#mainVisual h1 {
		font-size: 1.6rem;
	}
	#mainVisual h1 span {
		font-size: 1rem;
	}
	#mainVisual h1 span.txt01 {
		font-size: 1rem;
	}
	#mainVisual h1 span.txt02 {
		font-size: 1rem;
	}
	#index .img01 {
		float: none;
		width: 50%;
		margin: 1.5em auto;
		display: block;
		transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	#form01 .img01 {
		float: none;
		width: 50%;
		margin: 0 auto 1.5em;
		display: block;
		transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	#form01 #fee div dl dd ul li:first-child {
		padding: 0 0 0.2em;
		margin: 0 0 0.2em;
		border-left:none;
		display: block;
	}
	#form01 #fee div dl dd ul li:not(:last-child) {
		padding: 0 0 0.2em;
		margin: 0 0 0.2em;
		border-right: none;
		display: block;
		border-bottom: 1px solid #ccc;
	}
	#form01 #fee div dl dd ul li:last-child {
		padding: 0 0 0.2em;
		margin: 0 0 0.2em;
		border-right: none;
		display: block;
	}
	#form01 h2 {
		margin-bottom: 0;
	}
	#form01 #formTable01 {
		display: block;
		border: none;
	}
	#form01 #formTable01 th {
		width: auto;
		display: block;
		border: none;
	    padding: 0.5em 1em;
		background: #ddd;
	}
	#form01 #formTable01 th .required {
		margin: 0 0 0 0.5em;
		padding: 0.8em 0.6em;
	}
	#form01 #formTable01 .rome th p {
		display: inline;
	}
	#form01 #formTable01 td {
		width: auto;
		display: block;
		border: none;
	}
	#form01 #formTable01 td input {
		padding: 1em;
	}
	#form01 #formTable01 select {
		padding: 0.8em 0;
	}
	#form01 #formTable01 table {
		width: 100%;
	}
	#form01 #formTable01 .name input,
	#form01 #formTable01 .rome input,
	#form01 #formTable01 .address div input,
	#form01 #formTable01 .tel input,
	#form01 #formTable01 .mobile input,
	#form01 #formTable01 .email input,
	#form01 #formTable01 .address02 div input,
	#form01 #formTable01 .card input,
	#form01 #formTable01 .place div input,
	#form01 #formTable01 .place div input,
	#form01 #formTable01 .rank ul li div input,
	#form01 #formTable01 .number input {
		width: 85%;
	}
	#form01 #formTable01 .address table td,
	#form01 #formTable01 .address02 table td {
		display: inline-block;
	}
	#form01 #formTable01 .rank ul li div span {
		display: block;
	}
	#form01 #formTable01 .design ul {
		width: 100%;
	}

	#form01 #formTable02 {
		display: block;
		border: none;
		border-top: 2px solid #ddd;
		border-bottom: 2px solid #ddd;
	}
	#form01 #formTable02 th {
		border: none;
	    padding: 3.5%;
		background: #ddd;
		width: 38%;
	}
	#form01 #formTable02 tr:not(:last-child) th {
		border-bottom: 2px solid #eee;
	}
	#form01 #formTable02 td {
		border: none;
	    padding: 3.5%;
	}
	#form01 #formTable02 tr:not(:last-child) td {
		border-bottom: 2px solid #ddd;
	}
	#form01 #photo table {
		display: block;
		border: none;
		width: 100%;
	}
	#form01 #photo table tbody,
	#form01 #photo table tr {
		display: block;
		width: auto;
	}
	#form01 #photo table th,
	#form01 #photo table td {
		display: block;
		width: auto;
	    border-collapse: inherit;
	}
	#form01 #photo table th span {
		width: auto;
	}
	#form01 #photo table th i {
		display: none;
	}
	#consent h3 span {
		width: auto;
		display: block;
	}
	#consent .box01 {
		border: 1px solid #dc2520;
	}
	#consent .privacy {
		height: auto;
	}
	#btn-confirm {
		width: 89%;
	}
	#main .bnrArea01 {
		padding: 0 1%;
	}
	#main .bnrArea01 a {
		width: auto;
	}
	#index .table01 {
		width: 100%;
	}
	#index .sec02 dl dd .btn01 {
		width: auto;
	}
	.bnrArea02 {
		width: auto;
		margin: 0 1% 1em;
	}
	.form_btn_area_02 {
		width: auto;
	}
	.form_btn_03 {
		width: 30%;
	}
	.form_btn_04 {
		width: 50.4%;
	}
}
