/* base width 1280px  */


/* basic -------------------------------------------------- */
.red {
    color: #CA2600;
}
.blue {
    color: #0205d6;
}


/* .field -------------------------------------------------- */
.bb {
    border-bottom: 1px solid #ddd;
    padding: 10px 0 20px 0;
}
.pp {
    margin-top: 60px;
}
/* .field {
    border-top: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
} */
.field > fieldset {
    display: grid;
    grid-template-columns: min(21.875vw, 280px) 1fr;
}
.field > fieldset > div {
    border-bottom: 1px solid #bbb;
    border-left: 1px solid #bbb;
}
@media screen and (max-width: 768px) {
    .field {
        /* border: 1px solid #cccccc;*/
        box-sizing: border-box;
        /* padding: 5%;*/
    }
    .field > fieldset {
        /*  border-bottom: 1px dashed #cccccc;*/
        grid-template-columns: 1fr;
    }
    .field > fieldset > div {
        border: none;
    }
    .pp {
        margin-top: 40px;
    }
}


/* .col -------------------------------------------------- */
.col {
    background: #eeeeee;
    box-sizing: border-box;
    padding: 10px;
}
@media screen and (max-width: 768px) {
    .col {
        background: unset;
        padding: 20px 0 10px;
    }
}


/* .val -------------------------------------------------- */
.val {
    box-sizing: border-box;
    padding: 10px 10px 10px 0;
}
.val p {
    color: #333;
    font-size: 14px;
    margin: 15px 0;
}
.val a {
    color: #2200c1;
    display: block;
    font-size: 14px;
    font-weight: 900;
    margin: 5px 0;
    text-decoration: underline;
}
.val > h1 {
    color: #333;
    display: block;
    font-size: 16px;
    margin: 15px 0 5px 0;
}
@media screen and (max-width: 768px) {
    .val {
        padding: 0 0 20px;
    }
    .val > p {
        font-size: 14px;
        margin: 10px 0 0;
    }
}


/* .foreword -------------------------------------------------- */
.foreword {
    box-sizing: border-box;
    padding: 20px 10px 40px 0;
}
.foreword p {
    color: #333;
    font-size: 16px;
    margin: 15px 0;
}
.foreword dl {
	margin: 20px 0;
	color: #333;
    font-size: 16px;
}
.foreword dl dt {
	font-weight: 900;
    line-height: 175%;
}
.foreword dl dd {
    line-height: 175%;
}
@media screen and (max-width: 768px) {
    .foreword {
        padding: 10px 0 40px 0;
    }
    .foreword p {
        font-size: 14px;
        margin: 10px 0 0;
    }
    .foreword dl {
        font-size: 14px;
    }
}


/* .grid -------------------------------------------------- */
.grid {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 65px 1fr;
	gap: 0 15px;
}
.grid > div {
	grid-row: 1 / 3;
    grid-column: 1;
}
.grid > div > img {
	width: 65px;
}
.grid p {
	font-size: 14px;
	line-height: 200%;
	margin: 0;
	padding: 0;
	display:flex;
	align-items:flex-end;
}
.grid p br {
	display: none;
}
.grid h2 {
	font-size: 20px;
	line-height: 100%;
}
.gridday {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 55px 1fr;
	gap: 0 10px;
	padding: 15px 0;
}
.gridday > div {
	grid-row: 1 / 3;
    grid-column: 1;
}
.gridday > div > img {
	width: 55px;
}
.gridday p {
	font-size: 14px;
	line-height: 220%;
	margin: 0;
	padding: 0;
}
.gridday p br {
	display: none;
}
.grid h2 {
	font-size: 20px;
	line-height: 100%;
}
@media screen and (max-width: 768px) {
    .grid {
        padding: 20px 0 0 0;
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 55px 1fr;
        gap: 5px 15px;
    }
    .grid > div > img {
        width: 55px;
    }
    .grid p {
        line-height: 155%;
        font-size: 12px;
    }
    .gridday p br {
        display: block;
    }
    .grid h2{
        font-size: 18px;
    }
    .gridday {
        padding: 10px 0;
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 60px 1fr;
        gap: 5px 10px;
    }
    .gridday > div {
        grid-row: 1 / 3;
        grid-column: 1;
    }
    .gridday > div > img {
        width: 60px;
    }
    .gridday p {
        line-height: 135%;
        font-size: 12px;
    }
    .grid h2 {
        font-size: 18px;
    }
}


/* input, select, textarea -------------------------------------------------- */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
}
input[type="text"],
select,
textarea {
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 18px;
    padding: 5px;
    max-width: 100%;
}
input[type="text"],
select {
    height: 40px;
    background: #fff;
    color: #333;
}
textarea {
    width: min(100%, 500px);
    height: 200px;
}
@media screen and (max-width: 768px) {
    input[type="checkbox"] {
        width: 20px;
        height: 20px;
        margin-top: -20px;
    }
    input[type="text"],
    select,
    textarea {
        font-size: 16px;
    }
    #C02 > .val > label input[type="checkbox"] {
        margin-top: 0px;
    }
}


/* #schedule -------------------------------------------------- */
.form-inner > h2 {
    border-bottom: solid 3px #ccc;
    position: relative;
    font-size: 24px;
    color: #333;
    margin: 0;
    padding: 5px 5px 5px 0;
}
.form-inner > h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px var(--green_color);
  bottom: -3px;
  width: 20%;
}
#schedule {
    padding-bottom: 50px;
}
#schedule > div > .val {
    padding: 25px 10px 10px;
}
#schedule > div > .val > .check {
    margin: 0 0 25px 0;
}
#schedule > div > .val > .check > label {
    align-items: center;
    display: flex;
    grid-gap: min(0.78vw, 10px);
    width: fit-content;
	margin-left: -5px;
}
#schedule > div > .val > .check > p {
    font-size: 14px;
    margin: 5px 0 0 20px;
}
#schedule > div > .val > .check dl{
    font-weight: 900;
	font-size: 16px;
}
#schedule > div > .val > .check dl dt {
	color: #333;
}
#schedule > div > .val > .check dl dd {
	color: #333;
}
@media screen and (max-width: 768px) {
    .form-inner > h2 {
        font-size: 20px;
    }
    .form-inner > h2 > .pc {
        display: none!important;
    }
    #schedule {
        padding-bottom: 30px;
    }
    #schedule > div > .val {
        padding: 0 0 20px;
    }
    #schedule > div > .val > .check {
        margin: 0 0 25px 0;
    }
    /* #schedule > .val > .check:last-of-type {
        margin: 0;
    } */
    #schedule > div > .val > .check > label {
        font-size: clamp(13px, 2.08vw, 16px);
        grid-gap: 5px;
    }
    #schedule > div > .val > .check > p {
        font-size: clamp(13px, 2.08vw, 16px);
        margin: 5px 0 0;
    }
    #schedule > div > .val > p {
        margin: 20px 0;
        color: #333;
    }
    #schedule > div > .val > .check dl {
        font-weight: 900;
        font-size: 15px;
    }
}


/* .name -------------------------------------------------- */
.name > .val {
    align-items: center;
}
.name > .val > input[type="text"]{
    width: 200px;
}
.name > .val > span {
    font-size: 14px;
    margin: 0 0 0 min(0.78vw, 10px);
}
@media screen and (max-width: 768px) {
    .name > .val .flex{
        display: flex;
        grid-gap: 5px;
        grid-template-columns: max-content max-content;
    }
    .name > .val > div > input[type="text"] {
        background: #fdebeb;
        width: clamp(145px, 20.83vw, 160px);
    }
    .name > .val > div > span {
        grid-column: 1/3;
        font-size: 12px;
        margin: 0;
    }
}


/* #mail -------------------------------------------------- */
#mail > .val > input[type="text"] {
    width: min(100%, 400px);
}


/* #birthday -------------------------------------------------- */
#birthday > .val .flex{
    display: flex;
    grid-gap: min(1.56vw, 20px);
}
@media screen and (max-width: 768px) {
    #birthday > .val {
        grid-gap: min(2.6vw, 20px);
    }
}


/* #C03, #C04 -------------------------------------------------- */
#C03 > .val > input[type="text"],
#C04 > .val > input[type="text"] {
    width: min(100%, 500px);
}
@media screen and (max-width: 768px) {}


/* .campagin -------------------------------------------------- */
.campagin {
    margin: 15px 0;
}
.campagin > a {
    color: #25abda;
    font-weight: 900;
    text-decoration: underline;
    transition: .5s;
}
.campagin > a:hover {
    color: #ffaa00;
}
@media screen and (max-width: 768px) {}


/* #C02 -------------------------------------------------- */
#C02 > .val {
    padding: 10px 10px 15px;
}
#C02 > .val > h2{
    font-size: 16px;
    color: #333;
    margin-top: 20px;
    font-weight: 300;
}
#C02 > .val > label {
    align-items: center;
    background: #fff000;
    box-sizing: border-box;
    display: flex;
    grid-gap: 5px;
    margin: 15px 0 5px;
    padding: 8px 5px;
    width: min(100%, 500px);
}
#C02 > .val > .scroll {
    background: #fff;
    box-shadow: 0 0 5px #ccc inset;
    box-sizing: border-box;
    font-size: 14px;
    overflow-y: scroll;
    padding: 20px min(1.56vw, 20px) 10px;
    width: min(100%, 500px);
    height: 240px;
}
#C02 > .val > .scroll > p {
    margin: 0 0 30px;
}
#C02 > .val > .scroll > article {
    padding: 0 0 30px;
}
#C02 > .val > .scroll > article > h3 {
    background: #f0f0f0;
    box-sizing: border-box;
    font-size: 16px;
    margin: 0 0 15px;
    padding: 10px min(1.56vw, 20px) 5px min(1.56vw, 20px);
}
#C02 > .val > .scroll > article > ol {
    box-sizing: border-box;
    display: grid;
    grid-gap: 15px;
    padding: 0 0 0 18px;
}
#C02 > .val > .scroll > article:first-of-type > ol {
    margin: 20px 0 0;
}
#C02 > .val > .scroll > article > ol > li > ul {
    display: grid;
    grid-gap: 10px;
    list-style: none;
    margin: 15px 0 0 ;
}
@media screen and (max-width: 768px) {
    #C02 > .val {
        padding: 0;
    }
    #C02 > .val > h2,
    #C02 > .val > label {
        font-size: clamp(14px, 2.08vw, 16px);
    }
    #C02 > .val > .scroll {
        padding: 30px 20px 0px;
    }
    #C02 > .val > .scroll > article > h3 {
        font-size: clamp(14px, 2.08vw, 16px);
        padding: 10px;
    }
}


/* .submit_area -------------------------------------------------- */
.submit_area {
    margin: 20px 0 0;
    padding: 50px 0;
    text-align: center;
}
.submit_area > button {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    width: min(44.68vw, 572px);
}
@media screen and (max-width: 768px) {
    .submit_area {
        background: transparent;
        margin: 40px 0 0;
        padding: 0;
        text-align: center;
    }
    .submit_area > button {
        width: min(74.47vw, 572px);
    }
}



/* ADD20220913
.check -------------------------------------------------- */
.check {
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 20px;
}
.check h3 {
    border-left: 5px solid #c5c5c5;
    padding-left: 10px;
    margin: 10px 0 15px 0;
}
.check dl {
    padding: 7px 0;
}
@media screen and (max-width: 768px) {
    .check dl dl dd {
        font-size: 16px;
    }
}


/* .birthday -------------------------------------------------- */
.birthday {
	display: grid;
	grid-gap: 15px;
	align-items: center;
    grid-template-columns: 25% 25% 25%;
}
.birthday > label {
	align-items: center;
	grid-gap: 5px;
	grid-template-columns: 1fr max-content;
}
.birthday > label > select,
.birthday > label > input[type="text"] {
    border: 1px solid #ccc!important;
    border-radius: 3px;
	background: #f9f9f9;
	border: none;
	color: #000!important;
	font-size: 16px;
	text-indent: 10px;
	width: 80%;
	height: 45px;
}
@media screen and (max-width: 768px) {
    .birthday {
        grid-gap: 5px;
        grid-template-columns: 1fr max-content max-content;
        max-width: 375px;
    }
    .birthday > label > select  {
        width: 77%;
    }
    .birthday > label > input[type="text"] {
        width: 77%;
    }
    .birthday > .month > select,
    .birthday > .day > select {
        width: 60px;
    }
}


/* .error -------------------------------------------------- */
.val > .error,
.val > .flex > .error {
    background: #fdebeb!important;
    /* background: #ffe3e3!important; */
}
.val  > .valid,
.val > .flex  >.valid {
	background: #ccffff!important;
	/* background: #d1ffdd!important; */
}
.errorText > label.error {
	color: #b92000;
	display: block;
	font-size: 14px;
	font-weight: bold;
}
.errorText > label.error > br{
	display: none;
}
@media screen and (max-width: 768px) {
	.errorText > label.error > br{
		display: block;
	}
}


/* #area -------------------------------------------------- */
@media screen and (min-width: 769px) {
    #area {
        margin: 0 0 25px;
    }
}
@media screen and (max-width: 768px) {
    #area {
        margin: 20px 0 25px;
    }
}