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

/*******************************
パララックスエフェクト
*******************************/
html {
	height: 100%;
}

body {
	height: 100%;
	line-height: 1.6;
}

#mainVisual {
	position: relative;
	height: 30%;
	/*background-color: rgba(0, 0, 0, 0.5);*/
	overflow: hidden;
}
@media screen and (max-width: 737px) {
	#mainVisual {
		margin-top:0 !important;
	}
}

#mainVisual .bg {
	/*position: fixed;*/
	right: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	z-index: -100;
	background: url('/ccard/images/main02.jpg') no-repeat 0 0;
	background-size: 100%;
}

#mainVisual .bg02 {
	position: fixed;
	right: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	z-index: -100;
	background: url('/ccard/images/main02.jpg') no-repeat 0 0;
	background-size: 100%;
}

#mainVisual h1 {
	width: 96%;
	text-align: center;
	font-size: 3rem;
	font-weight: bold;
	color: #fff;
	line-height: 1em;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
}

#mainVisual h1 span {
	font-size: 1rem;
	display: block;
}

#mainVisual h1 span.txt01 {
	font-size: 2rem;
	line-height: 1.3;
}

#mainVisual h1 span.txt02 {
	font-size: 1.5rem;
	line-height: 1.3;
	margin-top: 0.5em;
}

/*******************************
main
*******************************/
#main {
	background: #fff;
    -webkit-box-shadow: 0 -5px 20px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 -5px 20px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 -5px 20px 0 rgba(0, 0, 0, 0.5);
	padding-bottom: 5%;
	overflow: hidden;
	line-height: 1.6;
}

/*******************************
index
*******************************/
#index {
	color: #444;
}

#index h2 {
	background: #444;
	border-left: 10px solid #000;
	color: #fff;
	padding: 0.5em;
	font-weight: bold;
	font-size: 1.3rem;
	margin-bottom: 1.2em;
}

#index h3 {
	margin: 2em 0 0;
	background: #eee;
    font-weight: bold;
    font-size: 1rem;
	padding: 0.5em;
	color: #000;
}

#index h4 {
	border-bottom: 1px solid #000;
	padding-bottom: 0.2em;
    font-size: 1rem;
	font-weight: bold;
	margin: 1.5em 0 0.5em;
	color: #000;
	padding-left: 1.6em;
    text-indent: -1.6em;
}

#index .img01 {
	float: right;
	width: 20%;
	margin: -5em 2% 0 2%;
	transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
}

#index p {
	font-size: 85%;
}

#index .sec01 div {
	margin-left: 1.7em;
}

#index .list01 {
	margin-top: 1em;
	font-size: 85%;
}

#index .list02 {
	margin-top: 1em;
	font-size: 85%;
}

#index .list02 li {
	margin: 0 0 0.25em 1em;
	text-indent: -1em;
}

#index .list02 li {
	margin-bottom: 0.5em;
}

#index .table01 {
	margin-top: 0.5em;
	width: 55%;
	font-size: 85%;
}

#index .table01 td {
	padding: 0.5em;
	border-bottom: 1px dotted #444;
}

#index .table01 td:last-child {
	text-align: right;
}

#index .table01 td b {
	font-weight: bold;
	color: #333;
}

#index .caution {
	margin-top: 1em;
	border: 2px solid #dc2520;
	padding: 1em 1em 0.5em;
}

#index .caution dt {
	color: #dc2520;
	font-weight: bold;
	margin-bottom: 0.5em;
}

#index .caution dd p {
	margin-bottom: 0.5em;
}

#index .sec02 {
	margin-top: 3.5em;
}

#index .sec02 dl {
	border: 1px solid #eee;
	margin-bottom: 2em;
}

#index .sec02 dl dt {
	background: #eee;
	font-size: 1.2rem;
	font-weight: bold;
	padding: 0.5em;
	color: #000;
}

#index .sec02 dl dd {
	padding: 1em;
}

#index .sec02 dl dd .txt01 {
	font-weight: bold;
	margin-bottom: 1em;
}

#index .sec02 dl dd .txt02 {
	color: #dc2520;
	font-weight: bold;
	text-align: center;
}

#index .sec02 dl dd .list03 {
	font-size: 85%;
	margin-top: 0.5em;
}

#index .sec02 dl dd .list03 li {
	list-style-type: disc;
	margin: 0 0 0.5em 1.2em;
}

#index .sec02 dl dd .btn01 {
	text-align: center;
	width: 45.3%;
	margin: 1em auto;
}

#index .sec02 dl dd .btn01 a {
    display: block;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    background-color: #29a3dd;
    color: #fff;
    transition: background-color 300ms ease-out;
}

#index .sec02 dl dd .btn01 a::after {
	content: '\f105';
	font-family: FontAwesome;
	margin-left: 0.5em;
}

#index .sec02 dl dd .btn01 a:hover {
    background-color: #ffdd0e;
    color: #000;
	opacity: 1.0!important;
}

/*******************************
form01
*******************************/
#form01 .img01 {
	float: right;
	width: 17%;
	margin: 0 2% 2% 2%;
	transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
}

#form01 h2 {
    background: #444;
    border-left: 10px solid #000;
    color: #fff;
    padding: 0.5em;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 1.2em;
}

#form01 #fee {
	margin: 0.5em 0 2.5em;
    border: 3px solid #dc2520;
}

#form01 #fee h3 {
    background: #dc2520;
    color: #fff;
	padding: 0.5em 1.5em;
	font-size: 0.93rem;
	font-weight: bold;
}

#form01 #fee div {
	padding: 1.5em;
	font-size: 0.93rem;
}

#form01 #fee div strong {
	font-weight: bold;
}

#form01 #fee div ol {
	font-weight: bold;
}

#form01 #fee div ol li {
	margin-left: 1em;
	text-indent: -1em;
}

#form01 #fee div dl {
	margin-top: 1em;
}

#form01 #fee div dl dt {
    color: #dc2520;
	font-weight: bold;
    border-top: 1px solid #dc2520;
	padding-top: 0.5em;
	margin-bottom: 0.2em;
}

#form01 #fee div dl dd ul {
	letter-spacing: -.4em;
}

#form01 #fee div dl dd ul li {
	display: inline-block;
	letter-spacing: normal;
	padding-right: 0.5em;
	margin: 0 0.5em 0.2em 0;
	border-right: 1px solid #ccc;
}

#form01 #fee div dl dd ul li:first-child {
	border-left: 1px solid #ccc;
	padding-left: 0.5em;
}

/*******************************
formMain
*******************************/
#form01 #formTable01 {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	margin-bottom: 2.5em;
	font-size: 85%;
	line-height: 1.4;
}

#form01 #formTable01 th,
#form01 #formTable01 td {
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    padding: 1em;
    vertical-align: middle;
	text-align: left;
}

#form01 #formTable01 th {
    background: #e5e5e5;
	font-weight: bold;
	width: 26%;
}

#form01 #formTable01 th .required {
    background: #dc2520;
	font-weight: bold;
	color: #fff;
	padding: 0.8em 0.5em;
	font-size: 85%;
	border-radius: 100%;
	margin: 0.5em 0 0.5em 0.5em;
	display: inline-block;
}

#form01 #formTable01 .redTxt {
	color: #dc2520;
}

#form01 #formTable01 td {
	background: #f8f8f8;
}

#form01 #formTable01 input {
	border: 1px solid #666;
	padding: 0.5em;
}

#form01 #formTable01 input:focus {
	border: 1px solid #666;
    background: #fff4b3;
}

#form01 #formTable01 .example td:nth-child(even) {
	color: #999;
	font-size: 90%;
	padding-left: 0.5em;
}

#form01 #formTable01 .exampleText {
	color: #999;
	font-size: 90%;
}

#form01 #formTable01 table:not(:last-child) {
	margin: 0 0 0.8em;
}

#form01 #formTable01 table th,
#form01 #formTable01 table td {
    background: none;
    border: none;
    padding: 0;
}

#form01 #formTable01 table td input {
	margin: 0 0.5em;
}

#form01 #formTable01 select {
	margin: 0 0.5em;
}

#form01 #formTable01 .name input {
	width: 15em;
}

#form01 #formTable01 .sex input:not(:first-child) {
	margin-left: 3em;
}

#form01 #formTable01 .rome input {
	width: 15em;
}

#form01 #formTable01 .rome th p {
	font-weight: normal;
}

#form01 #formTable01 .rome td p {
	color: #dc2520;
	text-indent: -1em;
	margin: 0 0 0.5em 1em;
}

#form01 #formTable01 .rome p strong {
	font-weight: bold;
}

#form01 #formTable01 .address .cel01 {
	text-align: center;
}

#form01 #formTable01 .address div.first {
	margin-bottom: 1em;
}

#form01 #formTable01 .address div .cautionText {
	color: #dc2520;
	font-weight: bold;
}

#form01 #formTable01 .address div input {
	width: 40em;
}

#form01 #formTable01 .tel input,
#form01 #formTable01 .mobile input,
#form01 #formTable01 .email input {
	width: 25em;
}

#form01 #formTable01 .address02 div input {
	width: 40em;
}

#form01 #formTable01 .card input {
	width: 25em;
}

#form01 #formTable01 .place input:not(:first-child) {
	margin-left: 3em;
}

#form01 #formTable01 .place div {
	margin-top: 1em;
}

#form01 #formTable01 .place div input {
	margin: 0 0.5em;
	width: 25em;
}

#form01 #formTable01 .rank ul li:not(:last-child) {
	margin-bottom: 0.5em;
}

#form01 #formTable01 .rank ul li div {
	display: inline;
}

#form01 #formTable01 .rank ul li div input {
	width: 25em;
}

#form01 #formTable01 .rank02 .kind,
#form01 #formTable02 .rank02 .kind {
	font-weight: bold;
	border-bottom: none;
	background: #888;
	color: #fff;
}

#form01 #formTable01 .design .box01 p {
	margin-bottom: 0.5em;
}

#form01 #formTable01 .design .box02 {
	margin-top: 2em;
}

#form01 #formTable01 .design .box02 p {
	margin-bottom: 0.8em;
}

#form01 #formTable01 .design ul {
	letter-spacing: -.4em;
	width: 60%;
}

#form01 #formTable01 .design ul li {
	letter-spacing: normal;
	display: inline-block;
	width: 32%;
}

#form01 #formTable01 .design ul li:not(:last-child) {
	margin-right: 2%;
}

#form01 #formTable01 .design ul li img {
	width: 100%;
}

#form01 #formTable01 .design strong {
	font-weight: bold;
}

#form01 #formTable01 .number input {
	width: 25em;
}

#form01 #formTable02 {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	margin-bottom: 2.5em;
	font-size: 85%;
	line-height: 1.4;
}

#form01 #formTable02 th,
#form01 #formTable02 td {
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    padding: 1em;
    vertical-align: middle;
	text-align: left;
	line-height: 1.3;
}

#form01 #formTable02 th {
    background: #e5e5e5;
	font-weight: bold;
	width: 26%;
}

#form01 #formTable02 tr.design .box02 {
	margin-top: 1em;
}

#form01 #formTable02 tr.design ul {
	margin-top: 0.5em;
}

/*******************************
formPhoto
*******************************/
#form01 #photo {
    border: 1px solid #1d84b5;
}

#form01 #photo table {
	width: 100%;
	border-collapse: collapse;
	font-size: 85%;
	line-height: 1.4;
}

#form01 #photo table td {
    padding: 1em;
    vertical-align: middle;
	text-align: left;
}

#form01 #photo table th {
    vertical-align: top;
	text-align: left;
	width: 31.9em;
}

#form01 #photo table th span {
    padding: 1em;
	background-color: #1d84b5;
	color: #fff;
	font-size: 1rem;
	font-weight: bold;
	display: block;
}

#form01 #photo table th i {
	margin-left: 0.5em;
}

#form01 #photo dl {
	padding: 1em 1.5em 1.5em;
}

#form01 #photo dl dt {
	color: #1d84b5;
	font-weight: bold;
	margin-bottom: 0.5em;
}

#form01 #photo dl dd {
	font-size: 85%;
}

/*******************************
formcConsent
*******************************/
#consent {
	margin-top: 2.5em;
}

#consent h3 {
	background: #f5aeac;
}

#consent h3 span {
	background: #dc2520;
	color: #fff;
	padding: 1em;
	width: 25em;
	font-size: 1rem;
	font-weight: bold;
	display: inline-block;
}

#consent .box01 {
	margin-top: -1px;
	border-right: 1px solid #f5aeac;
	border-bottom: 1px solid #f5aeac;
	border-left: 1px solid #dc2520;
	padding: 1.5em;
}

#consent p {
	font-size: 85%;
	margin-bottom: 0.8em;
}

#consent p strong {
	font-weight: bold;
	font-size: 1rem;
}

#consent .checkbox {
	font-size: 1.1rem;
	font-weight: bold;
	border-bottom: 2px solid #dc2520;
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
}

#consent h4 {
	background: #666;
	color: #fff;
	padding: 0.5em;
	margin: 1.5em 0 1em;
	font-size: 93%;
}

#consent .privacy {
	margin-top: 1.5em;
	height: 20em;
	overflow-y: scroll;
	background: #f8f8f8;
	padding: 1.5em;
}

#consent .privacy h5 {
	color: #dc2520;
	font-weight: bold;
	font-size: 85%;
}

#consent .privacy h5:not(:first-child) {
	margin-top: 1.5em;
}

#consent p.formText02 {
	margin-top: 1em;
	font-size: 100%;
}

/*******************************
btn
*******************************/
#btn-confirm {
	text-align: center;
	width: 41%;
	margin: 1.5em auto 3em;
    display: block;
    padding: 1.2rem 1rem;
    font-size: 1rem;
    background-color: #dc2520;
    color: #fff;
    transition: 300ms ease-out;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
	border-radius: 0;
	border: none;
	cursor: pointer;
}

#btn-confirm:hover {
    background-color: #ffdd0e;
    color: #000;
	opacity: 1.0!important;
}

.form_btn_area_02 {
	letter-spacing: -.4em;
	margin: 2.5em auto 3em;
	width: 84%;
	text-align: center;
}

.form_btn_03 {
	text-align: center;
	width: 41%;
    display: inline-block;
	margin-right: 2%;
	letter-spacing: normal;
    padding: 1.2rem 1rem;
    font-size: 1rem;
    background-color: #ddd;
    color: #000;
    transition: 300ms ease-out;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
	border: none;
	border-radius: 0!important;
	cursor: pointer;
}

.form_btn_03:hover {
    background-color: #eee;
	opacity: 1.0!important;
}

.form_btn_04 {
	text-align: center;
	width: 41%;
    display: inline-block;
	letter-spacing: normal;
    padding: 1.2rem 1rem;
    background-color: #ffdd0e;
    color: #000;
    font-size: 1rem;
    transition: 300ms ease-out;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
	border: none;
	border-radius: 0!important;
	cursor: pointer;
}

.form_btn_04:hover {
    background-color: #dc2520;
    color: #fff;
	opacity: 1.0!important;
}

/*******************************
addition
*******************************/
.formBox01 {
	margin-bottom: 2em;
}

.formText01 {
	margin-bottom: 1em;
}

.formText02 {
	margin-top: 1.5em;
}

/*******************************
bnr
*******************************/
.bnrArea01 {
	text-align: center;
}

.bnrArea01 a {
	display: block;
	width: 30%;
	margin: 0 auto;
}

.bnrArea01 a img {
	width: 100%;
}

.bnrArea02 {
	text-align: center;
	width: 30%;
	margin: 0 auto 2em;
}

.bnrArea02 a {
    display: block;
    padding: 1rem 1rem 1.0625rem 1rem;
    font-size: 1rem;
    background-color: #000;
    color: #fff;
    transition: background-color 300ms ease-out;
}

.bnrArea02 a:hover {
    background-color: #1d84b5;
	opacity: 1.0!important;
}

.bnrArea02 i {
	margin-right: 0.4em;
	font-size: 1.5rem;
}

.card {
    width: 200px;
    margin-left: 20px;
}

.name_flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 40px 0;
    flex-wrap: wrap;
}

.name_flex img {
    max-width: 90%;
}

#index .name_flex p {
    font-size: 40px;
}

.sp {
    display: none;
}

.indent {
    text-indent: -1rem;
    padding-left: 1rem;
}

#index .sec01 .flexbox {
    display: flex;
    margin-left: 0em;
}

#index .sec01 .flexbox>div {
    width: 49%;
}

#index .sec01 .h3ttl {
    background: #2bb6be38;
}

.red {
    color: red;
}

.mb_20 {
    margin-bottom: 20px;
}

.fwb {
    font-weight: bold;
}

@media screen and (max-width: 559px) {
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    #index .name_flex p {
        width: 100%;
        text-align: center;
    }
    #index .sec01 .flexbox {
        display: block;
        margin-left: 0em;
    }
    #index .sec01 .flexbox>div {
        width: auto;
        padding: 0.5em;
        margin-left: 0em;
    }
}