/*-------------------- VARIABLE --------------------*/ /*-------------------- COMMON --------------------*/ @media screen and (max-width: 640px) { .pc { display: none !important; } } .sp { display: none; } @media screen and (min-width: 641px) { .sp { display: block; } } /*-------------------- REGISTRATION --------------------*/ #registration h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #registration h2 { font-size: 1rem; margin: 60px 0 20px; } } #registration h2 span { font-size: 2rem; } @media screen and (max-width: 640px) { #registration h2 span { font-size: .8rem; } } #registration .inner { width: 1160px; margin: 0 auto; } @media screen and (max-width: 640px) { #registration .inner { width: 96%; } } #registration .inner h3 { font-size: 1.8em; line-height: 1.8; margin: 60px 0 20px; border-bottom: 5px solid #ddd; } @media screen and (max-width: 640px) { #registration .inner h3 { font-size: 1.4rem; margin: 20px 0 10px; border-bottom: 3px solid #ddd; } } #registration .inner h3 span { padding-bottom: 5px; border-bottom: 5px solid #bba980; } @media screen and (max-width: 640px) { #registration .inner h3 span { padding-bottom: 4px; border-bottom: 3px solid #bba980; } } #registration .inner h3 span.sml { font-size: .7em; border: none; } #registration .inner .note { font-size: 1rem; } @media screen and (max-width: 640px) { #registration .inner .note { font-size: .9rem; } } #registration .inner .note span { color: #f00; } #registration .inner .child .box { display: grid; grid-template-columns: 70px 1fr; margin-bottom: 10px; } @media screen and (max-width: 640px) { #registration .inner .child .box { grid-template-columns: 40px 1fr; } } #registration .inner .child .box h4 { writing-mode: vertical-lr; text-align: center; line-height: 70px; border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; border-left: 2px solid #ccc; } @media screen and (max-width: 640px) { #registration .inner .child .box h4 { line-height: 40px; } } #registration .inner .child .box dl { display: grid; grid-template-columns: 300px 1fr; box-sizing: border-box; border-top: 2px solid #ccc; border-right: 2px solid #ccc; border-left: 2px solid #ccc; } @media screen and (max-width: 640px) { #registration .inner .child .box dl { grid-template-columns: 1fr; } } #registration .inner .child .box dl:first-child dt, #registration .inner .child .box dl:nth-child(2) dt { padding: 13px 20px; } @media screen and (max-width: 640px) { #registration .inner .child .box dl:first-child dt, #registration .inner .child .box dl:nth-child(2) dt { line-height: 1rem; padding: 15px 10px; } } #registration .inner .child .box dl:last-child { border-bottom: 2px solid #ccc; } #registration .inner .child .box dl:last-child dt { padding: 49px 20px; } @media screen and (max-width: 640px) { #registration .inner .child .box dl:last-child dt { line-height: 1rem; padding: 15px 10px; } } #registration .inner .child .box dl:nth-child(4) dd { padding: 15px 20px; } @media screen and (max-width: 640px) { #registration .inner .child .box dl:nth-child(4) dd { line-height: 1rem; padding: 15px 10px; } } #registration .inner .child .box dl dt { background: #efefef; text-align: center; line-height: 60px; border-right: 2px solid #ccc; } @media screen and (max-width: 640px) { #registration .inner .child .box dl dt { text-align: left; line-height: 1rem; padding: 15px 10px; border: none; } } #registration .inner .child .box dl dt span { color: #f00; font-size: .8rem; } #registration .inner .child .box dl dd { padding: 5px 20px; } @media screen and (max-width: 640px) { #registration .inner .child .box dl dd { padding: 10px; } } #registration .inner .child .box dl dd span { font-size: .9rem; } @media screen and (max-width: 640px) { #registration .inner .child .box dl dd span { font-size: .8rem; } } #registration .inner .child .box dl dd .red { color: #f00; font-size: .8rem; } #registration .inner .child .box dl dd input { padding: 10px; margin: 5px; } #registration .inner .child .box dl dd .min { width: 80px; } @media screen and (max-width: 640px) { #registration .inner .child .box dl dd .min { width: 60px; } } #registration .inner .child .box dl dd .mid { width: 400px; } @media screen and (max-width: 640px) { #registration .inner .child .box dl dd .mid { width: 90%; } } #registration .inner .child .box dl dd select { padding: 10px; margin: 5px; } #registration .inner .child .btn { display: block; width: 400px; background: #999; text-align: center; color: #fff; font-size: 1.4em; font-weight: bold; padding: 10px 0; border-radius: 10px; filter: drop-shadow(5px 5px 0px #ccc); margin: 60px auto 120px; position: relative; transition: .3s; } @media screen and (max-width: 640px) { #registration .inner .child .btn { width: 300px; margin: 40px auto 60px; } } #registration .inner .child .btn:hover { text-decoration: none; filter: none; } #registration .inner .child .btn i { font-size: .9em; position: absolute; top: 21px; right: 5%; } @media screen and (max-width: 640px) { #registration .inner .child .btn i { top: 17px; } } #registration .guardian .parent-info { border-top: 2px solid #ccc; } #registration .guardian .parent-info dl { display: grid; grid-template-columns: 300px 1fr; box-sizing: border-box; border-bottom: 2px solid #ccc; border-right: 2px solid #ccc; border-left: 2px solid #ccc; } @media screen and (max-width: 640px) { #registration .guardian .parent-info dl { grid-template-columns: 1fr; } } #registration .guardian .parent-info dl:nth-child(5) dt { line-height: 257px; } @media screen and (max-width: 640px) { #registration .guardian .parent-info dl:nth-child(5) dt { line-height: 1rem; } } #registration .guardian .parent-info dl:nth-child(9) dt, #registration .guardian .parent-info dl:nth-child(10) dt, #registration .guardian .parent-info dl:nth-child(11) dt { padding: 13px 10px; } @media screen and (max-width: 640px) { #registration .guardian .parent-info dl:nth-child(9) dt, #registration .guardian .parent-info dl:nth-child(10) dt, #registration .guardian .parent-info dl:nth-child(11) dt { padding: 10px; } } #registration .guardian .parent-info dl:nth-child(4) dd, #registration .guardian .parent-info dl:nth-child(12) dd { padding-top: 15px; } @media screen and (max-width: 640px) { #registration .guardian .parent-info dl:nth-child(4) dd, #registration .guardian .parent-info dl:nth-child(12) dd { padding: 10px; } } #registration .guardian .parent-info dl dt { background: #efefef; text-align: center; line-height: 60px; border-right: 2px solid #ccc; } @media screen and (max-width: 640px) { #registration .guardian .parent-info dl dt { text-align: left; line-height: 1rem; padding: 15px 10px; border: NONE; } } #registration .guardian .parent-info dl dt span { color: #f00; font-size: .8rem; } #registration .guardian .parent-info dl dd { padding: 5px 20px; } @media screen and (max-width: 640px) { #registration .guardian .parent-info dl dd { padding: 10px; } } #registration .guardian .parent-info dl dd span { font-size: .9rem; } #registration .guardian .parent-info dl dd input { padding: 10px; margin: 5px; } #registration .guardian .parent-info dl dd .min { width: 80px; } @media screen and (max-width: 640px) { #registration .guardian .parent-info dl dd .min { width: 60px; } } #registration .guardian .parent-info dl dd .big { width: 500px; } @media screen and (max-width: 640px) { #registration .guardian .parent-info dl dd .big { width: 90%; } } #registration .guardian .parent-info dl dd select { padding: 10px; margin: 5px; } #registration .guardian .parent-info dl dd textarea { width: calc(100% - 30px); max-width: 786px; padding: 10px; margin: 5px; } #registration .guardian .parent-info p { font-size: 1rem; margin-top: 10px; } @media screen and (max-width: 640px) { #registration .guardian .parent-info p { font-size: .9rem; } } #registration .guardian .questionnaire h4 { background: #bba980; text-align: center; color: #fff; font-size: 1.2rem; padding: 10px 0; border: 2px solid #ccc; margin-top: 40px; } #registration .guardian .questionnaire dl { display: grid; grid-template-columns: 400px 1fr; box-sizing: border-box; border-bottom: 2px solid #ccc; border-right: 2px solid #ccc; border-left: 2px solid #ccc; } @media screen and (max-width: 640px) { #registration .guardian .questionnaire dl { grid-template-columns: 1fr; } } #registration .guardian .questionnaire dl dt { background: #efefef; line-height: 60px; padding: 0 20px; border-right: 2px solid #ccc; } @media screen and (max-width: 640px) { #registration .guardian .questionnaire dl dt { line-height: 1rem; padding: 15px 10px; border: none; } } #registration .guardian .questionnaire dl dt span { color: #f00; font-size: .8rem; } #registration .guardian .questionnaire dl dd { padding: 5px 20px; } @media screen and (max-width: 640px) { #registration .guardian .questionnaire dl dd { padding: 10px; } } #registration .guardian .questionnaire dl dd span { font-size: .9rem; } #registration .guardian .questionnaire dl dd select { padding: 10px; margin: 5px; } #registration .guardian .questionnaire dl dd textarea { width: calc(100% - 30px); max-width: 686px; padding: 10px; margin: 5px; } #registration .guardian .btn { display: block; width: 300px; background: #f5a200; text-align: center; color: #fff; font-size: 1.4em; font-weight: bold; padding: 10px 0; border-radius: 10px; filter: drop-shadow(5px 5px 0px #fad080); margin: 60px auto 120px; position: relative; transition: .3s; } @media screen and (max-width: 640px) { #registration .guardian .btn { margin: 40px auto 90px; } } #registration .guardian .btn:hover { text-decoration: none; filter: none; } #registration .guardian .btn i { font-size: .9em; position: absolute; top: 21px; right: 5%; } @media screen and (max-width: 640px) { #registration .guardian .btn i { top: 17px; } } /*-------------------- REGISTRATION DONE --------------------*/ #registration_done h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #registration_done h2 { font-size: 1rem; } } #registration_done .inner { width: 1160px; margin: 0 auto 120px; } @media screen and (max-width: 640px) { #registration_done .inner { width: 96%; margin: 0 auto 90px; } } #registration_done .inner p { text-align: center; font-size: 1.1em; } #registration_done .inner .btn { display: block; width: 300px; background: #2151a7; text-align: center; color: #fff; font-size: 1.4em; font-weight: bold; padding: 10px 0; border-radius: 10px; margin: 60px auto 0; filter: drop-shadow(5px 5px 0px #7fa6d6); position: relative; transition: .3s; } @media screen and (max-width: 640px) { #registration_done .inner .btn { width: 300px; margin: 40px auto 5px; } } #registration_done .inner .btn:hover { text-decoration: none; filter: none; } #registration_done .inner .btn i { font-size: .8em; position: absolute; top: 21px; right: 10%; } @media screen and (max-width: 640px) { #registration_done .inner .btn i { top: 17px; } } /*-------------------- CAMPAIN --------------------*/ #campaign h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #campaign h2 { font-size: 1rem; margin: 60px 0 20px; } } #campaign .inner { width: 1160px; background: #fdf1d9; padding: 60px 2%; margin: 0 auto 120px; } @media screen and (max-width: 640px) { #campaign .inner { width: 96%; padding: 40px 2%; margin: 0 auto 90px; } } #campaign .inner h3 { text-align: center; color: #2151a7; font-size: 1.8em; margin-bottom: 90px; } @media screen and (max-width: 640px) { #campaign .inner h3 { font-size: 1.5em; margin-bottom: 60px; } } #campaign .inner dl { display: grid; grid-template-columns: 50px 1fr; gap: 20px; width: 100%; max-width: 700px; margin: 0 auto; } @media screen and (max-width: 640px) { #campaign .inner dl { grid-template-columns: 20px 1fr; gap: 10px; margin-bottom: 20px; } } #campaign .inner dl dt img { height: 50px; } @media screen and (max-width: 640px) { #campaign .inner dl dt img { height: 20px; } } #campaign .inner dl dd { font-weight: bold; line-height: 50px; } @media screen and (max-width: 640px) { #campaign .inner dl dd { line-height: 1.5; } } #campaign .inner img { width: auto !important; display: block; } #campaign .inner .pic { height: 100px; margin: 0 auto; } #campaign .inner .arrow { height: 30px; margin: 30px auto 20px; } #campaign .inner .appr p { text-align: center; font-size: 1.2em; font-weight: bold; margin-bottom: 20px; } #campaign .inner .grn { margin-top: 60px; } #campaign .inner .grn p { text-align: center; color: #2cb6af; font-size: 1.5em; font-weight: bold; } #campaign .inner .grn .btn { display: block; width: 100%; max-width: 500px; background: #2cb6af; text-align: center; color: #fff; font-size: 1.4em; font-weight: bold; padding: 10px 0; border-radius: 10px; filter: drop-shadow(5px 5px 0px #91d9d6); margin: 0 auto 60px; position: relative; transition: .3s; } #campaign .inner .grn .btn:hover { text-decoration: none; filter: none; } #campaign .inner .grn .btn i { font-size: .9em; position: absolute; top: 21px; right: 5%; } @media screen and (max-width: 640px) { #campaign .inner .grn .btn i { top: 17px; } } /*-------------------- INTRODUCE --------------------*/ #introduce h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #introduce h2 { font-size: 1rem; margin: 60px 0 20px; } } #introduce .inner { width: 860px; margin: 0 auto; } @media screen and (max-width: 640px) { #introduce .inner { width: 96%; } } #introduce .inner p { margin-bottom: 20px; } @media screen and (max-width: 640px) { #introduce .inner p { margin-bottom: 20px; } } #introduce .inner .emadr { width: 660px; margin: 60px auto; } @media screen and (max-width: 640px) { #introduce .inner .emadr { width: 100%; margin: 40px auto; } } #introduce .inner .emadr dl { display: grid; grid-template-columns: 230px 1fr; margin-bottom: 10px; } @media screen and (max-width: 640px) { #introduce .inner .emadr dl { grid-template-columns: 1fr; } } #introduce .inner .emadr dl dt { line-height: 40px; } #introduce .inner .emadr dl dd input { width: 95%; padding: 10px 2%; } #introduce .inner .btn { width: 300px; margin: 0 auto; } @media screen and (max-width: 640px) { #introduce .inner .btn { width: auto; margin: 0 auto; } } #introduce .inner .btn li { text-align: center; font-size: 1.5rem; font-weight: bold; margin-bottom: 90px; } @media screen and (max-width: 640px) { #introduce .inner .btn li { font-size: 1.2rem; margin-bottom: 60px; } } #introduce .inner .btn li:first-child a { background: #999; filter: drop-shadow(5px 5px 0px #ccc); } #introduce .inner .btn li:last-child a { background: #2151a7; filter: drop-shadow(5px 5px 0px #7fa6d6); } #introduce .inner .btn li a { display: block; color: #fff; padding: 10px 0; border-radius: 10px; transition: .3s; } @media screen and (max-width: 640px) { #introduce .inner .btn li a { position: relative; } } #introduce .inner .btn li a:hover { text-decoration: none; filter: none; } @media screen and (max-width: 640px) { #introduce .inner .btn li a i { position: absolute; top: 17px; right: 20%; } } /*-------------------- INTRODUCE CONF --------------------*/ #introduce-conf h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #introduce-conf h2 { font-size: 1rem; margin: 60px 0 20px; } } #introduce-conf .inner { width: 860px; margin: 0 auto; } @media screen and (max-width: 640px) { #introduce-conf .inner { width: 96%; } } #introduce-conf .inner p { text-align: center; margin-bottom: 20px; } @media screen and (max-width: 640px) { #introduce-conf .inner p { text-align: left; margin-bottom: 20px; } } #introduce-conf .inner .emadr { width: 660px; margin: 60px auto; } @media screen and (max-width: 640px) { #introduce-conf .inner .emadr { width: 100%; margin: 40px auto; } } #introduce-conf .inner .emadr dl { display: grid; grid-template-columns: 230px 1fr; margin-bottom: 10px; } @media screen and (max-width: 640px) { #introduce-conf .inner .emadr dl { grid-template-columns: 1fr; } } #introduce-conf .inner .emadr dl dt { line-height: 40px; } #introduce-conf .inner .emadr dl dt span { display: inline; } #introduce-conf .inner .btn { width: 300px; margin: 0 auto; } @media screen and (max-width: 640px) { #introduce-conf .inner .btn { width: auto; margin: 0 auto; } } #introduce-conf .inner .btn li { text-align: center; font-size: 1.5rem; font-weight: bold; margin-bottom: 90px; } @media screen and (max-width: 640px) { #introduce-conf .inner .btn li { font-size: 1.2rem; margin-bottom: 60px; } } #introduce-conf .inner .btn li:first-child a { background: #f5a200; filter: drop-shadow(5px 5px 0px #fad080); } #introduce-conf .inner .btn li:last-child a { background: #999; filter: drop-shadow(5px 5px 0px #ccc); } #introduce-conf .inner .btn li a { display: block; color: #fff; padding: 10px 0; border-radius: 10px; transition: .3s; } @media screen and (max-width: 640px) { #introduce-conf .inner .btn li a { position: relative; } } #introduce-conf .inner .btn li a:hover { text-decoration: none; filter: none; } @media screen and (max-width: 640px) { #introduce-conf .inner .btn li a i { position: absolute; top: 17px; right: 20%; } } /*-------------------- COMPLETE --------------------*/ #complete h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #complete h2 { font-size: 1rem; margin: 60px 0 20px; } } #complete .inner { width: 1160px; margin: 0 auto; } @media screen and (max-width: 640px) { #complete .inner { width: 96%; } } #complete .inner p { text-align: center; margin-bottom: 40px; } @media screen and (max-width: 640px) { #complete .inner p { margin-bottom: 20px; } } #complete .inner .btn { width: 300px; display: grid; grid-template-columns: 1fr; margin: 0 auto 120px; } @media screen and (max-width: 640px) { #complete .inner .btn { margin: 0 auto 60px; } } #complete .inner .btn li { text-align: center; font-size: 1.5rem; font-weight: bold; } @media screen and (max-width: 640px) { #complete .inner .btn li { font-size: 1.2rem; } } #complete .inner .btn li a { display: block; background: #2151a7; color: #fff; padding: 10px 0; border-radius: 10px; filter: drop-shadow(5px 5px 0px #7fa6d6); transition: .3s; } #complete .inner .btn li a:hover { text-decoration: none; filter: none; } @media screen and (max-width: 640px) { #complete .inner .btn li a i { position: absolute; top: 17px; right: 10%; } } /*-------------------- GUARDIAN EDIT --------------------*/ #guardian-edit h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #guardian-edit h2 { font-size: 1rem; margin: 60px 0 20px; } } #guardian-edit .inner { width: 1160px; margin: 0 auto; } @media screen and (max-width: 640px) { #guardian-edit .inner { width: 96%; } } #guardian-edit .inner h3 { font-size: 2rem; line-height: 1.8; margin: 60px 0 20px; border-bottom: 5px solid #ddd; } @media screen and (max-width: 640px) { #guardian-edit .inner h3 { font-size: 1.4rem; margin: 20px 0 10px; border-bottom: 3px solid #ddd; } } #guardian-edit .inner h3 span { padding-bottom: 5px; border-bottom: 5px solid #bba980; } @media screen and (max-width: 640px) { #guardian-edit .inner h3 span { padding-bottom: 4px; border-bottom: 3px solid #bba980; } } #guardian-edit .inner .note { font-size: 1rem; } @media screen and (max-width: 640px) { #guardian-edit .inner .note { font-size: .9rem; } } #guardian-edit .inner .note span { color: #f00; } #guardian-edit .inner .guardianForm { border-top: 2px solid #ccc; } #guardian-edit .inner .guardianForm dl { display: grid; grid-template-columns: 300px 1fr; box-sizing: border-box; border-bottom: 2px solid #ccc; border-right: 2px solid #ccc; border-left: 2px solid #ccc; } @media screen and (max-width: 640px) { #guardian-edit .inner .guardianForm dl { grid-template-columns: 1fr; } } #guardian-edit .inner .guardianForm dl:nth-child(6) dt { padding: 23px 0; } @media screen and (max-width: 640px) { #guardian-edit .inner .guardianForm dl:nth-child(6) dt { padding: 15px 10px; } } #guardian-edit .inner .guardianForm dl:nth-child(11) dt, #guardian-edit .inner .guardianForm dl:nth-child(12) dt { padding: 13px 0; } @media screen and (max-width: 640px) { #guardian-edit .inner .guardianForm dl:nth-child(11) dt, #guardian-edit .inner .guardianForm dl:nth-child(12) dt { padding: 15px 10px; } } #guardian-edit .inner .guardianForm dl:nth-child(5) dd, #guardian-edit .inner .guardianForm dl:last-child dd { padding: 15px 20px; } @media screen and (max-width: 640px) { #guardian-edit .inner .guardianForm dl:nth-child(5) dd, #guardian-edit .inner .guardianForm dl:last-child dd { padding: 10px; } } #guardian-edit .inner .guardianForm dl dt { background: #efefef; text-align: center; line-height: 60px; border-right: 2px solid #ccc; } @media screen and (max-width: 640px) { #guardian-edit .inner .guardianForm dl dt { text-align: left; line-height: 1rem; padding: 15px 10px; border: NONE; } } #guardian-edit .inner .guardianForm dl dt span { color: #f00; font-size: .8rem; } #guardian-edit .inner .guardianForm dl dd { padding: 5px 20px; } @media screen and (max-width: 640px) { #guardian-edit .inner .guardianForm dl dd { padding: 10px; } } #guardian-edit .inner .guardianForm dl dd span { font-size: .9rem; } #guardian-edit .inner .guardianForm dl dd input { padding: 10px; margin: 5px; } #guardian-edit .inner .guardianForm dl dd .min { width: 80px; } @media screen and (max-width: 640px) { #guardian-edit .inner .guardianForm dl dd .min { width: 60px; } } #guardian-edit .inner .guardianForm dl dd .big { width: 500px; } @media screen and (max-width: 640px) { #guardian-edit .inner .guardianForm dl dd .big { width: 90%; } } #guardian-edit .inner .guardianForm dl dd select { padding: 10px; margin: 5px; } #guardian-edit .inner .btn { width: 400px; margin: 60px auto 120px; } @media screen and (max-width: 640px) { #guardian-edit .inner .btn { width: auto; margin: 40px auto 60px; } } #guardian-edit .inner .btn p { text-align: center; font-size: 1.5rem; font-weight: bold; } @media screen and (max-width: 640px) { #guardian-edit .inner .btn p { font-size: 1.2rem; } } #guardian-edit .inner .btn p a { display: block; background: #f5a200; color: #fff; padding: 10px 0; border-radius: 10px; filter: drop-shadow(5px 5px 0px #fad080); transition: .3s; } @media screen and (max-width: 640px) { #guardian-edit .inner .btn p a { position: relative; } } #guardian-edit .inner .btn p a:hover { text-decoration: none; filter: none; } @media screen and (max-width: 640px) { #guardian-edit .inner .btn p a i { position: absolute; top: 17px; right: 10%; } } /*-------------------- GUARDIAN CONF --------------------*/ #guardian-conf h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #guardian-conf h2 { font-size: 1rem; margin: 60px 0 20px; } } #guardian-conf .inner { width: 1160px; margin: 0 auto; } @media screen and (max-width: 640px) { #guardian-conf .inner { width: 96%; } } #guardian-conf .inner h3 { font-size: 2rem; line-height: 1.8; margin: 40px 0 20px; border-bottom: 5px solid #ddd; } @media screen and (max-width: 640px) { #guardian-conf .inner h3 { font-size: 1.4rem; margin: 20px 0 10px; border-bottom: 3px solid #ddd; } } #guardian-conf .inner h3 span { padding-bottom: 5px; border-bottom: 5px solid #bba980; } @media screen and (max-width: 640px) { #guardian-conf .inner h3 span { padding-bottom: 4px; border-bottom: 3px solid #bba980; } } #guardian-conf .inner form { border-top: 2px solid #ccc; margin-bottom: 60px; } #guardian-conf .inner form dl { display: grid; grid-template-columns: 300px 1fr; box-sizing: border-box; border-bottom: 2px solid #ccc; border-right: 2px solid #ccc; border-left: 2px solid #ccc; } @media screen and (max-width: 640px) { #guardian-conf .inner form dl { grid-template-columns: 1fr; } } #guardian-conf .inner form dl:nth-child(5) dt { padding: 34px 20px; } @media screen and (max-width: 640px) { #guardian-conf .inner form dl:nth-child(5) dt { line-height: 1rem; padding: 15px 10px; } } #guardian-conf .inner form dl dt { background: #efefef; text-align: center; padding: 20px; border-right: 2px solid #ccc; } @media screen and (max-width: 640px) { #guardian-conf .inner form dl dt { text-align: left; line-height: 1rem; padding: 15px 10px; border: none; } } #guardian-conf .inner form dl dd { padding: 20px; } @media screen and (max-width: 640px) { #guardian-conf .inner form dl dd { padding: 10px; } } #guardian-conf .inner .btn { width: 700px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 40px auto 120px; } @media screen and (max-width: 640px) { #guardian-conf .inner .btn { width: auto; grid-template-columns: 1fr; gap: 20px; margin: 40px auto 60px; } } #guardian-conf .inner .btn li { text-align: center; font-size: 1.5rem; font-weight: bold; } @media screen and (max-width: 640px) { #guardian-conf .inner .btn li { font-size: 1.2rem; } } #guardian-conf .inner .btn li:first-child a { background: #999; filter: drop-shadow(5px 5px 0px #ccc); } #guardian-conf .inner .btn li:last-child a { background: #2151a7; filter: drop-shadow(5px 5px 0px #7fa6d6); } #guardian-conf .inner .btn li a { display: block; color: #fff; padding: 10px 0; border-radius: 10px; transition: .3s; } @media screen and (max-width: 640px) { #guardian-conf .inner .btn li a { position: relative; } } #guardian-conf .inner .btn li a:hover { text-decoration: none; filter: none; } @media screen and (max-width: 640px) { #guardian-conf .inner .btn li a i { position: absolute; top: 17px; right: 20%; } } /*-------------------- GUARDIAN DONE --------------------*/ #guardian-done h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #guardian-done h2 { font-size: 1rem; margin: 60px 0 20px; } } #guardian-done .inner { width: 1160px; margin: 0 auto; } @media screen and (max-width: 640px) { #guardian-done .inner { width: 96%; } } #guardian-done .inner h3 { font-size: 2rem; line-height: 1.8; margin: 40px 0 20px; border-bottom: 5px solid #ddd; } @media screen and (max-width: 640px) { #guardian-done .inner h3 { font-size: 1.4rem; margin: 20px 0 10px; border-bottom: 3px solid #ddd; } } #guardian-done .inner h3 span { padding-bottom: 5px; border-bottom: 5px solid #bba980; } @media screen and (max-width: 640px) { #guardian-done .inner h3 span { padding-bottom: 4px; border-bottom: 3px solid #bba980; } } #guardian-done .inner form { border-top: 2px solid #ccc; margin-bottom: 60px; } #guardian-done .inner form dl { display: grid; grid-template-columns: 300px 1fr; box-sizing: border-box; border-bottom: 2px solid #ccc; border-right: 2px solid #ccc; border-left: 2px solid #ccc; } @media screen and (max-width: 640px) { #guardian-done .inner form dl { grid-template-columns: 1fr; } } #guardian-done .inner form dl:nth-child(5) dt { padding: 34px 20px; } @media screen and (max-width: 640px) { #guardian-done .inner form dl:nth-child(5) dt { line-height: 1rem; padding: 15px 10px; } } #guardian-done .inner form dl dt { background: #efefef; text-align: center; padding: 20px; border-right: 2px solid #ccc; } @media screen and (max-width: 640px) { #guardian-done .inner form dl dt { text-align: left; line-height: 1rem; padding: 15px 10px; border: none; } } #guardian-done .inner form dl dd { padding: 20px; } @media screen and (max-width: 640px) { #guardian-done .inner form dl dd { padding: 10px; } } #guardian-done .inner .btn { width: 300px; display: grid; grid-template-columns: 1fr; margin: 0 auto 120px; } @media screen and (max-width: 640px) { #guardian-done .inner .btn { margin: 0 auto 60px; } } #guardian-done .inner .btn li { text-align: center; font-size: 1.5rem; font-weight: bold; } @media screen and (max-width: 640px) { #guardian-done .inner .btn li { font-size: 1.2rem; } } #guardian-done .inner .btn li a { display: block; background: #2151a7; color: #fff; padding: 10px 0; border-radius: 10px; filter: drop-shadow(5px 5px 0px #7fa6d6); transition: .3s; } #guardian-done .inner .btn li a:hover { text-decoration: none; filter: none; } @media screen and (max-width: 640px) { #guardian-done .inner .btn li a i { position: absolute; top: 17px; right: 10%; } } /*-------------------- CHILD EDIT --------------------*/ #child-edit h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #child-edit h2 { font-size: 1rem; margin: 60px 0 20px; } } #child-edit h2 span { font-size: 2rem; } @media screen and (max-width: 640px) { #child-edit h2 span { font-size: .8rem; } } #child-edit .inner { width: 1160px; margin: 0 auto; } @media screen and (max-width: 640px) { #child-edit .inner { width: 96%; } } #child-edit .inner .note { font-size: 1rem; } @media screen and (max-width: 640px) { #child-edit .inner .note { font-size: .9rem; } } #child-edit .inner .note span { color: #f00; } #child-edit .inner .box { display: grid; grid-template-columns: 70px 1fr; margin-bottom: 10px; } @media screen and (max-width: 640px) { #child-edit .inner .box { grid-template-columns: 40px 1fr; } } #child-edit .inner .box h3 { writing-mode: vertical-lr; text-align: center; line-height: 70px; border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; border-left: 2px solid #ccc; } @media screen and (max-width: 640px) { #child-edit .inner .box h3 { line-height: 40px; } } #child-edit .inner .box dl { display: grid; grid-template-columns: 300px 1fr; box-sizing: border-box; border-top: 2px solid #ccc; border-right: 2px solid #ccc; border-left: 2px solid #ccc; } @media screen and (max-width: 640px) { #child-edit .inner .box dl { grid-template-columns: 1fr; } } #child-edit .inner .box dl:first-child dt, #child-edit .inner .box dl:nth-child(2) dt { padding: 13px 20px; } @media screen and (max-width: 640px) { #child-edit .inner .box dl:first-child dt, #child-edit .inner .box dl:nth-child(2) dt { line-height: 1rem; padding: 15px 10px; } } #child-edit .inner .box dl:last-child { border-bottom: 2px solid #ccc; } #child-edit .inner .box dl:last-child dt { padding: 49px 20px; } @media screen and (max-width: 640px) { #child-edit .inner .box dl:last-child dt { line-height: 1rem; padding: 15px 10px; } } #child-edit .inner .box dl:nth-child(4) dd { padding: 15px 20px; } @media screen and (max-width: 640px) { #child-edit .inner .box dl:nth-child(4) dd { line-height: 1rem; padding: 15px 10px; } } #child-edit .inner .box dl dt { background: #efefef; text-align: center; line-height: 60px; border-right: 2px solid #ccc; } @media screen and (max-width: 640px) { #child-edit .inner .box dl dt { text-align: left; line-height: 1rem; padding: 15px 10px; border: none; } } #child-edit .inner .box dl dt span { color: #f00; font-size: .8rem; } #child-edit .inner .box dl dd { padding: 5px 20px; } @media screen and (max-width: 640px) { #child-edit .inner .box dl dd { padding: 10px; } } #child-edit .inner .box dl dd span { font-size: .9rem; } @media screen and (max-width: 640px) { #child-edit .inner .box dl dd span { font-size: .8rem; } } #child-edit .inner .box dl dd .red { color: #f00; font-size: .8rem; } #child-edit .inner .box dl dd input { padding: 10px; margin: 5px; } #child-edit .inner .box dl dd .min { width: 80px; } @media screen and (max-width: 640px) { #child-edit .inner .box dl dd .min { width: 60px; } } #child-edit .inner .box dl dd .mid { width: 400px; } @media screen and (max-width: 640px) { #child-edit .inner .box dl dd .mid { width: 90%; } } #child-edit .inner .box dl dd select { padding: 10px; margin: 5px; } #child-edit .inner .btn { width: 400px; margin: 40px auto 120px; } @media screen and (max-width: 640px) { #child-edit .inner .btn { width: auto; margin: 40px auto 60px; } } #child-edit .inner .btn li { text-align: center; font-size: 1.5rem; font-weight: bold; } @media screen and (max-width: 640px) { #child-edit .inner .btn li { font-size: 1.2rem; } } #child-edit .inner .btn li:first-child { width: 300px; font-size: 1.2rem; margin: 0 auto 60px; } #child-edit .inner .btn li:first-child a { background: #2151a7; filter: drop-shadow(5px 5px 0px #7fa6d6); } #child-edit .inner .btn li:last-child a { background: #f5a200; filter: drop-shadow(5px 5px 0px #fad080); } #child-edit .inner .btn li a { display: block; color: #fff; padding: 10px 0; border-radius: 10px; transition: .3s; } @media screen and (max-width: 640px) { #child-edit .inner .btn li a { position: relative; } } #child-edit .inner .btn li a:hover { text-decoration: none; filter: none; } @media screen and (max-width: 640px) { #child-edit .inner .btn li a i { position: absolute; top: 17px; right: 10%; } } /*-------------------- CHILD CONF --------------------*/ #child-conf h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #child-conf h2 { font-size: 1rem; margin: 60px 0 20px; } } #child-conf .inner { width: 1160px; margin: 0 auto; } @media screen and (max-width: 640px) { #child-conf .inner { width: 96%; } } #child-conf .inner .box { display: grid; grid-template-columns: 70px 1fr; margin-bottom: 10px; } @media screen and (max-width: 640px) { #child-conf .inner .box { grid-template-columns: 40px 1fr; } } #child-conf .inner .box h3 { writing-mode: vertical-lr; text-align: center; line-height: 70px; border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; border-left: 2px solid #ccc; } @media screen and (max-width: 640px) { #child-conf .inner .box h3 { line-height: 40px; } } #child-conf .inner .box dl { display: grid; grid-template-columns: 300px 1fr; box-sizing: border-box; border-top: 2px solid #ccc; border-right: 2px solid #ccc; border-left: 2px solid #ccc; } @media screen and (max-width: 640px) { #child-conf .inner .box dl { grid-template-columns: 1fr; } } #child-conf .inner .box dl:last-child { border-bottom: 2px solid #ccc; } #child-conf .inner .box dl:last-child dt { padding: 49px 20px; } @media screen and (max-width: 640px) { #child-conf .inner .box dl:last-child dt { line-height: 1rem; padding: 15px 10px; } } #child-conf .inner .box dl dt { background: #efefef; text-align: center; padding: 20px; border-right: 2px solid #ccc; } @media screen and (max-width: 640px) { #child-conf .inner .box dl dt { text-align: left; line-height: 1rem; padding: 15px 10px; border: none; } } #child-conf .inner .box dl dd { padding: 20px; } @media screen and (max-width: 640px) { #child-conf .inner .box dl dd { padding: 10px; } } #child-conf .inner .btn { width: 700px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 40px auto 120px; } @media screen and (max-width: 640px) { #child-conf .inner .btn { width: auto; grid-template-columns: 1fr; gap: 20px; margin: 40px auto 60px; } } #child-conf .inner .btn li { text-align: center; font-size: 1.5rem; font-weight: bold; } @media screen and (max-width: 640px) { #child-conf .inner .btn li { font-size: 1.2rem; } } #child-conf .inner .btn li:first-child a { background: #999; filter: drop-shadow(5px 5px 0px #ccc); } #child-conf .inner .btn li:last-child a { background: #2151a7; filter: drop-shadow(5px 5px 0px #7fa6d6); } #child-conf .inner .btn li a { display: block; color: #fff; padding: 10px 0; border-radius: 10px; transition: .3s; } @media screen and (max-width: 640px) { #child-conf .inner .btn li a { position: relative; } } #child-conf .inner .btn li a:hover { text-decoration: none; filter: none; } @media screen and (max-width: 640px) { #child-conf .inner .btn li a i { position: absolute; top: 17px; right: 20%; } } /*-------------------- CHILD DONE --------------------*/ #child-done h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #child-done h2 { font-size: 1rem; margin: 60px 0 20px; } } #child-done .inner { width: 1160px; margin: 0 auto; } @media screen and (max-width: 640px) { #child-done .inner { width: 96%; } } #child-done .inner p { margin-bottom: 20px; } #child-done .inner .box { display: grid; grid-template-columns: 70px 1fr; margin-bottom: 10px; } @media screen and (max-width: 640px) { #child-done .inner .box { grid-template-columns: 40px 1fr; } } #child-done .inner .box h3 { writing-mode: vertical-lr; text-align: center; line-height: 70px; border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; border-left: 2px solid #ccc; } @media screen and (max-width: 640px) { #child-done .inner .box h3 { line-height: 40px; } } #child-done .inner .box dl { display: grid; grid-template-columns: 300px 1fr; box-sizing: border-box; border-top: 2px solid #ccc; border-right: 2px solid #ccc; border-left: 2px solid #ccc; } @media screen and (max-width: 640px) { #child-done .inner .box dl { grid-template-columns: 1fr; } } #child-done .inner .box dl:last-child { border-bottom: 2px solid #ccc; } #child-done .inner .box dl:last-child dt { padding: 49px 20px; } @media screen and (max-width: 640px) { #child-done .inner .box dl:last-child dt { line-height: 1rem; padding: 15px 10px; } } #child-done .inner .box dl dt { background: #efefef; text-align: center; padding: 20px; border-right: 2px solid #ccc; } @media screen and (max-width: 640px) { #child-done .inner .box dl dt { text-align: left; line-height: 1rem; padding: 15px 10px; border: none; } } #child-done .inner .box dl dd { padding: 20px; } @media screen and (max-width: 640px) { #child-done .inner .box dl dd { padding: 10px; } } #child-done .inner .btn { width: 300px; display: grid; grid-template-columns: 1fr; margin: 60px auto 120px; } @media screen and (max-width: 640px) { #child-done .inner .btn { margin: 40px auto 60px; } } #child-done .inner .btn li { text-align: center; font-size: 1.5rem; font-weight: bold; } @media screen and (max-width: 640px) { #child-done .inner .btn li { font-size: 1.2rem; } } #child-done .inner .btn li a { display: block; background: #2151a7; color: #fff; padding: 10px 0; border-radius: 10px; filter: drop-shadow(5px 5px 0px #7fa6d6); transition: .3s; } #child-done .inner .btn li a:hover { text-decoration: none; filter: none; } @media screen and (max-width: 640px) { #child-done .inner .btn li a i { position: absolute; top: 17px; right: 10%; } } /*-------------------- PW MAIL --------------------*/ #pwmail h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #pwmail h2 { font-size: 1rem; margin: 60px 0 20px; } } #pwmail .inner { width: 660px; margin: 0 auto; } @media screen and (max-width: 640px) { #pwmail .inner { width: 96%; } } #pwmail .inner p { margin-bottom: 40px; } @media screen and (max-width: 640px) { #pwmail .inner p { margin-bottom: 20px; } } #pwmail .inner dl { width: 500px; display: grid; grid-template-columns: 150px 1fr; margin: 60px auto; } @media screen and (max-width: 640px) { #pwmail .inner dl { width: auto; grid-template-columns: 1fr; margin: 40px auto; } } #pwmail .inner dl dt { line-height: 40px; } #pwmail .inner dl dd input { width: 95%; padding: 10px 2%; } #pwmail .inner .btn { width: 300px; display: grid; grid-template-columns: 1fr; margin: 0 auto 120px; } @media screen and (max-width: 640px) { #pwmail .inner .btn { margin: 0 auto 60px; } } #pwmail .inner .btn li { text-align: center; font-size: 1.5rem; font-weight: bold; } @media screen and (max-width: 640px) { #pwmail .inner .btn li { font-size: 1.2rem; } } #pwmail .inner .btn li a { display: block; background: #2151a7; color: #fff; padding: 10px 0; border-radius: 10px; filter: drop-shadow(5px 5px 0px #7fa6d6); transition: .3s; } #pwmail .inner .btn li a:hover { text-decoration: none; filter: none; } @media screen and (max-width: 640px) { #pwmail .inner .btn li a i { position: absolute; top: 17px; right: 20%; } } /*-------------------- LOGIN --------------------*/ #login h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #login h2 { font-size: 1rem; margin: 60px 0 20px; } } #login .inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; width: 1160px; margin: 60px auto 120px; } @media screen and (max-width: 640px) { #login .inner { grid-template-columns: 1fr; width: 96%; margin: 40px auto; } } #login .inner .b-frm { padding: 40px 90px; border: 3px solid #2151a7; } @media screen and (max-width: 640px) { #login .inner .b-frm { padding: 20px 2%; } } #login .inner .b-frm h3 { text-align: center; color: #2151a7; font-size: 1.5em; margin-bottom: 40px; } @media screen and (max-width: 640px) { #login .inner .b-frm h3 { margin-bottom: 20px; } } #login .inner .b-frm dl { margin-top: 20px; } #login .inner .b-frm dl dt { margin-bottom: 5px; } #login .inner .b-frm dl dd input { width: 95%; padding: 10px 2%; } #login .inner .b-frm .btn { display: block; width: 300px; background: #2151a7; text-align: center; color: #fff; font-size: 1.4em; font-weight: bold; padding: 10px 0; border-radius: 10px; margin: 40px auto 20px; filter: drop-shadow(5px 5px 0px #7fa6d6); position: relative; transition: .3s; } #login .inner .b-frm .btn:hover { text-decoration: none; filter: none; } #login .inner .b-frm .btn i { font-size: .8em; position: absolute; top: 21px; right: 10%; } @media screen and (max-width: 640px) { #login .inner .b-frm .btn i { top: 17px; } } #login .inner .b-frm p { text-align: center; } #login .inner .b-frm p a { text-decoration: underline; } #login .inner .g-frm { padding: 40px; background: #d3f0ee; } @media screen and (max-width: 640px) { #login .inner .g-frm { padding: 20px 2%; } } #login .inner .g-frm h3 { text-align: center; color: #2cb6af; font-size: 1.5em; margin-bottom: 40px; } @media screen and (max-width: 640px) { #login .inner .g-frm h3 { margin-bottom: 20px; } } #login .inner .g-frm p { font-size: .9em; } #login .inner .g-frm ul { margin: 10px 0; } #login .inner .g-frm ul li { font-size: .9em; line-height: 2; } #login .inner .g-frm .btn { display: block; width: 400px; background: #2cb6af; text-align: center; color: #fff; font-size: 1.4em; font-weight: bold; padding: 10px 0; border-radius: 10px; margin: 60px auto 0; filter: drop-shadow(5px 5px 0px #91d9d6); position: relative; transition: .3s; } @media screen and (max-width: 640px) { #login .inner .g-frm .btn { width: 300px; margin: 40px auto 5px; } } #login .inner .g-frm .btn:hover { text-decoration: none; filter: none; } #login .inner .g-frm .btn i { font-size: .8em; position: absolute; top: 21px; right: 10%; } @media screen and (max-width: 640px) { #login .inner .g-frm .btn i { top: 17px; } } /*-------------------- PW RESET --------------------*/ #pwreset h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #pwreset h2 { font-size: 1rem; margin: 60px 0 20px; } } #pwreset .inner { width: 1160px; margin: 60px auto; } @media screen and (max-width: 640px) { #pwreset .inner { width: 96%; margin: 40px auto; } } #pwreset .inner p { margin-bottom: 40px; } @media screen and (max-width: 640px) { #pwreset .inner p { margin-bottom: 20px; } } #pwreset .inner dl { width: 560px; display: grid; grid-template-columns: 160px 1fr; margin: 0 auto 20px; } @media screen and (max-width: 640px) { #pwreset .inner dl { width: auto; grid-template-columns: 1fr; margin: 0 auto 20px; } } #pwreset .inner dl dt { line-height: 40px; } #pwreset .inner dl dd input { width: 95%; padding: 10px 2%; } #pwreset .inner dl dd span { display: inline-block; font-size: .9rem; line-height: 1.6em; margin-top: 5px; } #pwreset .inner .btn { width: 300px; display: grid; grid-template-columns: 1fr; margin: 60px auto 120px; } @media screen and (max-width: 640px) { #pwreset .inner .btn { margin: 40px auto 60px; } } #pwreset .inner .btn li { text-align: center; font-size: 1.5rem; font-weight: bold; } @media screen and (max-width: 640px) { #pwreset .inner .btn li { font-size: 1.2rem; } } #pwreset .inner .btn li a { display: block; background: #2151a7; color: #fff; padding: 10px 0; border-radius: 10px; filter: drop-shadow(5px 5px 0px #7fa6d6); transition: .3s; } #pwreset .inner .btn li a:hover { text-decoration: none; filter: none; } @media screen and (max-width: 640px) { #pwreset .inner .btn li a i { position: absolute; top: 17px; right: 20%; } } /*-------------------- PW SET --------------------*/ #pwset h2 { text-align: center; color: #2151a7; font-size: 1.5rem; margin: 80px 0 40px; } @media screen and (max-width: 640px) { #pwset h2 { font-size: 1.2rem; margin: 120px 0 40px; } } #pwset .inner { width: 1160px; margin: 0 auto; } @media screen and (max-width: 640px) { #pwset .inner { width: 96%; } } #pwset .inner p { margin-bottom: 40px; } @media screen and (max-width: 640px) { #pwset .inner p { margin-bottom: 20px; } } #pwset .inner .btn { width: 300px; display: grid; grid-template-columns: 1fr; margin: 0 auto 120px; } @media screen and (max-width: 640px) { #pwset .inner .btn { margin: 0 auto 60px; } } #pwset .inner .btn li { text-align: center; font-size: 1.5rem; font-weight: bold; } @media screen and (max-width: 640px) { #pwset .inner .btn li { font-size: 1.2rem; } } #pwset .inner .btn li:first-child a { background: #f5a200; filter: drop-shadow(5px 5px 0px #fad080); margin-bottom: 120px; } @media screen and (max-width: 640px) { #pwset .inner .btn li:first-child a { margin-bottom: 80px; } } #pwset .inner .btn li:last-child a { background: #999; filter: drop-shadow(5px 5px 0px #ccc); } #pwset .inner .btn li a { display: block; color: #fff; padding: 10px 0; border-radius: 10px; transition: .3s; } @media screen and (max-width: 640px) { #pwset .inner .btn li a { position: relative; } } #pwset .inner .btn li a:hover { text-decoration: none; filter: none; } @media screen and (max-width: 640px) { #pwset .inner .btn li a i { position: absolute; top: 17px; right: 10%; } } /*-------------------- QUIT PROCEDURE --------------------*/ #quit_proc h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #quit_proc h2 { font-size: 1rem; margin: 60px 0 20px; } } #quit_proc .inner { width: 1160px; margin: 0 auto; } @media screen and (max-width: 640px) { #quit_proc .inner { width: 96%; } } #quit_proc .inner .frame { width: 640px; padding: 40px 60px; border: 2px solid #2151a7; margin: 0 auto; } @media screen and (max-width: 640px) { #quit_proc .inner .frame { width: 96%; max-width: 500px; padding: 20px 2%; } } #quit_proc .inner .frame h3 { text-align: center; color: #2151a7; font-size: 1.4em; margin-bottom: 20px; } #quit_proc .inner .frame p { text-align: center; } #quit_proc .inner .frame .coat { background: #e5f1f9; padding: 10px; margin: 10px 0; } #quit_proc .inner .frame .coat p { color: #2151a7; font-weight: bold; } #quit_proc .inner .frame .phn p { color: #2151a7; font-size: 2em; font-weight: bold; letter-spacing: .05em; } #quit_proc .inner .frame .phn p span { font-size: .7em; letter-spacing: 0; } #quit_proc .inner .frame .btn01 { width: 400px; margin: 10px auto; } @media screen and (max-width: 640px) { #quit_proc .inner .frame .btn01 { width: 100%; max-width: 400px; } } #quit_proc .inner .frame .btn01 p { text-align: center; font-size: 1.5rem; font-weight: bold; } @media screen and (max-width: 640px) { #quit_proc .inner .frame .btn01 p { font-size: 1.2rem; } } #quit_proc .inner .frame .btn01 p a { display: block; background: #2151a7; color: #fff; padding: 10px 0; border-radius: 10px; filter: drop-shadow(5px 5px 0px #7fa6d6); transition: .3s; } @media screen and (max-width: 640px) { #quit_proc .inner .frame .btn01 p a { position: relative; } } #quit_proc .inner .frame .btn01 p a:hover { text-decoration: none; filter: none; } @media screen and (max-width: 640px) { #quit_proc .inner .frame .btn01 p a i { position: absolute; top: 17px; right: 10%; } } #quit_proc .inner .frame h4 { text-align: center; padding-top: 20px; border-top: 1px dashed #2151a7; margin: 30px 0 10px; } #quit_proc .inner .frame ul { width: 430px; margin: 0 auto; } @media screen and (max-width: 640px) { #quit_proc .inner .frame ul { width: 310px; } } #quit_proc .inner .frame ul li { font-size: .9em; line-height: 2em; } #quit_proc .inner .questionnaire { width: 640px; padding: 20px 60px; border: 2px dashed #ccc; margin: 20px auto 60px; } @media screen and (max-width: 640px) { #quit_proc .inner .questionnaire { width: 96%; max-width: 500px; padding: 20px 2%; margin: 20px auto; } } #quit_proc .inner .questionnaire h3 { text-align: center; color: #666; font-size: 1.3em; } #quit_proc .inner .questionnaire p { text-align: center; color: #666; margin: 20px 0; } #quit_proc .inner .questionnaire ul { width: 500px; margin: 0 auto; } @media screen and (max-width: 640px) { #quit_proc .inner .questionnaire ul { width: 250px; } } #quit_proc .inner .questionnaire ul li { color: #666; line-height: 2em; } #quit_proc .inner .questionnaire textarea { display: block; width: 100%; max-width: 480px; padding: 10px; margin: 10px auto; } @media screen and (max-width: 640px) { #quit_proc .inner .questionnaire textarea { width: calc(100% - 20px); } } #quit_proc .inner .btn02 { width: 400px; margin: 0 auto 120px; } @media screen and (max-width: 640px) { #quit_proc .inner .btn02 { width: 100%; max-width: 400px; margin: 0 auto 60px; } } #quit_proc .inner .btn02 p { text-align: center; font-size: 1.5rem; font-weight: bold; } @media screen and (max-width: 640px) { #quit_proc .inner .btn02 p { font-size: 1.2rem; } } #quit_proc .inner .btn02 p a { display: block; background: #999; color: #fff; padding: 10px 0; border-radius: 10px; filter: drop-shadow(5px 5px 0px #ccc); transition: .3s; } @media screen and (max-width: 640px) { #quit_proc .inner .btn02 p a { position: relative; } } #quit_proc .inner .btn02 p a:hover { text-decoration: none; filter: none; } @media screen and (max-width: 640px) { #quit_proc .inner .btn02 p a i { position: absolute; top: 17px; right: 10%; } } /*-------------------- QUIT DONE --------------------*/ #quit_done h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #quit_done h2 { font-size: 1rem; margin: 60px 0 20px; } } #quit_done .inner { width: 1160px; margin: 0 auto; } @media screen and (max-width: 640px) { #quit_done .inner { width: 96%; } } #quit_done .inner p { text-align: center; } #quit_done .inner .btn { width: 300px; margin: 60px auto 120px; } @media screen and (max-width: 640px) { #quit_done .inner .btn { width: 100%; max-width: 400px; margin: 40px auto 60px; } } #quit_done .inner .btn p { text-align: center; font-size: 1.5rem; font-weight: bold; } @media screen and (max-width: 640px) { #quit_done .inner .btn p { font-size: 1.2rem; } } #quit_done .inner .btn p a { display: block; background: #2151a7; color: #fff; padding: 10px 0; border-radius: 10px; filter: drop-shadow(5px 5px 0px #7fa6d6); transition: .3s; } @media screen and (max-width: 640px) { #quit_done .inner .btn p a { position: relative; } } #quit_done .inner .btn p a:hover { text-decoration: none; filter: none; } @media screen and (max-width: 640px) { #quit_done .inner .btn p a i { position: absolute; top: 17px; right: 20%; } } /*-------------------- HISTORY --------------------*/ #history h2 { text-align: center; color: #2151a7; font-size: 2.4rem; padding: 10px 0; border-top: 3px solid #2151a7; border-bottom: 3px solid #2151a7; margin: 60px 0; } @media screen and (max-width: 640px) { #history h2 { font-size: 1rem; margin: 60px 0 20px; } } #history .inner { width: 1160px; margin: 0 auto; } @media screen and (max-width: 640px) { #history .inner { width: 96%; } } #history .inner .pc .ordr { display: grid; grid-template-columns: 1fr 1fr; margin-top: 40px; } #history .inner .pc .ordr dl { display: grid; grid-template-columns: 150px 1fr; border-top: 1px solid #ccc; border-right: 1px solid #ccc; } #history .inner .pc .ordr dl:first-child { border-left: 1px solid #ccc; } #history .inner .pc .ordr dl dt { background: #bad3f7; text-align: center; padding: 10px 0; border-right: 1px solid #ccc; } #history .inner .pc .ordr dl dd { padding: 10px 20px; } #history .inner .pc table { width: 100%; } #history .inner .pc table thead tr th { text-align: center; font-size: 1rem; background: #efefef; padding: 10px 0; border: 1px solid #ccc; } #history .inner .pc table tbody tr td { width: 10%; text-align: center; vertical-align: middle; padding: 10px; border: 1px solid #ccc; } #history .inner .pc table tbody tr td:first-child { width: 45%; } #history .inner .pc table tbody tr td:nth-child(2) { width: 15%; font-size: 1rem; } #history .inner .pc table tbody tr td figuare { display: grid; grid-template-columns: 100px 1fr; gap: 20px; } #history .inner .pc table tbody tr td figuare img { display: block; width: 100px; } #history .inner .pc table tbody tr td figuare figcaption { text-align: left; font-weight: bold; padding-top: 10px; } #history .inner .pc table tbody tr td figuare figcaption span { display: inline-block; font-size: 1rem; font-weight: normal; margin-top: 10px; } #history .inner .pc table tbody tr td input { width: 50%; text-align: center; font-size: 1.2rem; padding: 5px 0; } #history .inner .pc table tbody tr td a { display: inline-block; background: #fff; color: #666; font-size: .8rem; line-height: 1.2em; padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px; filter: drop-shadow(2px 2px 2px #ccc); transition: .3s; } #history .inner .pc table tbody tr td a:hover { text-decoration: none; filter: none; } #history .inner .pc table tbody .tf td { font-size: 1rem; } #history .inner .pc table tbody .tf td:first-child { text-align: right; padding: 0 20px; } #history .inner .pc table tbody .tf td a { padding: 10px 23px; } #history .inner .pc table tfoot tr { font-weight: bold; } #history .inner .pc table tfoot tr th { text-align: right; font-size: 1.2rem; background: #efefef; padding: 15px; border: 1px solid #ccc; } #history .inner .pc table tfoot tr td { text-align: center; border: 1px solid #ccc; } #history .inner .pc table .bld { font-weight: bold; } #history .inner .sp .frm .ordr dl { display: grid; grid-template-columns: 150px 1fr; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; } #history .inner .sp .frm .ordr dl dt { background: #bad3f7; text-align: center; padding: 5px 0; border-right: 1px solid #ccc; } #history .inner .sp .frm .ordr dl dd { padding: 5px 10px; } #history .inner .sp .frm .box { padding: 2%; border: 1px solid #ccc; margin-bottom: 10px; } #history .inner .sp .frm .box figuare { display: grid; grid-template-columns: 30% 1fr; gap: 2%; padding-bottom: 10px; border-bottom: 1px solid #ccc; margin-bottom: 10px; } #history .inner .sp .frm .box figuare img { width: 100%; } #history .inner .sp .frm .box figuare figcaption { font-size: 1rem; } #history .inner .sp .frm .box figuare figcaption span { display: inline-block; font-size: .9rem; margin-top: 10px; } #history .inner .sp .frm .box dl dt { text-align: right; } #history .inner .sp .frm .box dl dt dt span { font-size: 1rem; } #history .inner .sp .frm .box dl dt dd input { width: 50px; text-align: center; font-size: 1.2rem; padding: 5px 0; margin: 5px 0 10px; } #history .inner .sp .frm .box dl dd { text-align: right; } #history .inner .sp .frm .box dl dd dt { font-size: 1.2rem; } #history .inner .sp .frm .box dl dd dd a { display: inline-block; text-align: center; background: #fff; color: #666; font-size: .8rem; line-height: 1.2em; padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px; filter: drop-shadow(1px 1px 1px #ccc); margin: 5px 0 10px; } #history .inner .sp .frm .ttl { margin: 0 0 20px; } #history .inner .sp .frm .ttl dl { display: grid; grid-template-columns: 40% 1fr; background: #efefef; font-size: 1.4rem; padding: 10px 0; } #history .inner .sp .frm .ttl dl dt { text-align: center; border-right: 1px solid #fff; } #history .inner .sp .frm .ttl dl dd { text-align: right; padding: 0 2%; } #history .inner p { text-align: center; color: #f00; margin: 60px 0; } @media screen and (max-width: 640px) { #history .inner p { margin: 40px 0; } } #history .inner .btn { width: 400px; margin: 0 auto 120px; } @media screen and (max-width: 640px) { #history .inner .btn { width: 100%; max-width: 400px; } } #history .inner .btn li { text-align: center; font-size: 1.3em; font-weight: bold; margin-bottom: 40px; } #history .inner .btn li:first-child a { background: #999; filter: drop-shadow(5px 5px 0px #ccc); } #history .inner .btn li:last-child a { background: #2151a7; filter: drop-shadow(5px 5px 0px #7fa6d6); } #history .inner .btn li a { display: block; color: #fff; padding: 10px 0; border-radius: 10px; transition: .3s; } #history .inner .btn li a:hover { text-decoration: none; filter: none; }