/* CSS Document */

.pcOnly{display:block;}
.spOnly{display:none;}

.red{color:#f53f4e;}
.error{font-size:1.5rem;color:#f53f4e !important;}
.error-txt{background:#ffe7e9;}
.small{font-size:80%;}
.txt{
	margin-bottom:4rem;
}
.attention{
	text-align:center;
}
.attention-txt{
	text-align:center;
}

.btn{width:50%;}

label{
	cursor: pointer;
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}

#logo{
	text-align:center;
}

nav{
	/* width: 1060px; */
	margin: 0px auto;
}

nav ul{
	display: flex;
	justify-content: space-between;
}
nav ul li{
	display: flex;
	justify-content: center;
	width: 13%;
	position: relative;
	padding: 4rem 1rem 2rem;
	color: #fff;
	background: #0d56c9;
}
nav ul li:before{
	position:absolute;
	top:20%;
	left: 50%;
	transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	font-size:1.7rem;
	color:#fff;
}
nav ul li:nth-child(1):before{content:"\02776";}
nav ul li:nth-child(2):before{content:"\02777";}
nav ul li:nth-child(3):before{content:"\02778";}
nav ul li:nth-child(4):before{content:"\02779";}
nav ul li:nth-child(5):before{content:"\0277a";}
nav ul li:nth-child(6):before{content:"\0277b";}
nav ul li:nth-child(7):before{content:"\0277c";}
nav ul li:nth-child(8):before{content:"\0277d";}
nav ul li:nth-child(9):before{content:"\0277e";}

nav ul li:after{
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	right: -2.3rem;
	width: 0;
	height: 0;
	border-left: 15px solid #e6e6e6;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
}
nav ul:last-child li::after{
	content:none;
}

nav ul li.gray{
	color:#b8b8b8;
	background:#e6e6e6;
}
nav ul li.gray:before{
	color:#b8b8b8;
}

#form{
	width:1200px;
	margin:0 auto;
}

#form h2{
	margin:2rem 0 0 0;
	padding:1rem;
	color:#fff;
	text-align:center;
	background:#46260a;
}

#form h3{
	position:relative;
	font-size:2.3rem;
	text-align:center;
}
#form .required:before{
	content:"å¿…é ˆ";
	position:absolute;
	left:0;
	padding:0.3rem 0.5rem;
	font-size:1.5rem;
	color:#fff;
	border-radius:5px;
	background:#f53f4e;
}

#form p{
	text-align:center;
}


.area-form{
	width:1040px;
	margin:4rem auto;
	padding:4rem;
	border-radius:10px;
	background:#fff;
}

.check{
	position:relative;
    display: block;
	margin-bottom:3rem;
	padding: 4rem 4rem 4rem 8rem;
	font-size: 2.3rem;
	color: #0d56c9;
	border: #0d56c9 2px solid;
    border-radius: 1rem;
}

input[type=checkbox] {
    display: none;
}

.check::before {
    content: '';
    display: block;
	width:4rem;
    height: 4rem;
	left: 3rem;
    margin-top: -8px;
    position: absolute;
    top: 39%;
	border-radius:50%;
	background:#e4eeff;
}
.check::before:hover {
	background: #b6d2fe;
}
.check::after {
    border-right: 6px solid #0d56c9;
    border-bottom: 3px solid #0d56c9;
    content: '';
    display: block;
    height: 20px;
    left: 4.2rem;
    margin-top: -16px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg) translate3d(0,2px,0) scale3d(.7,.7,1);
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
    width: 9px;
}

input[type=checkbox]:checked + .check{
	color:#fff;
	background:#0d56c9;
}
input[type=checkbox]:checked + .check::before {
	background:#fff;
}
input[type=checkbox]:checked + .check::after {
    opacity: 1;
    transform: rotate(45deg) scale3d(1,1,1);
}

.nazotoki-select,
.tsushin-select{
	display:none;
}
#nazotoki:checked ~ .nazotoki-select{
	display:block !important;
}
#tsushin:checked ~ .tsushin-select{
	display:block !important;
}

input[type=radio]:checked ~ .radio-btn,
input[type=checkbox]:checked ~ .radio-btn{
	color:#fff;
	background:#0d56c9;
}
.radio{
	display:none;
}
.radio-btn{
	position:relative;
}
.radio-btn::after {
	content:"";
	position: absolute;
	top:37%;
	left:2rem;
	margin-right: 0.5rem;
	cursor: pointer;
	transition: all 0.15s ease-out 0s;
	color: #ffffff;
	border: none;
	outline: none;
	width:3.7rem;
    height: 3.7rem;
    margin-top: -8px;
	border-radius:50%;
	background:#e4eeff;
}
.radio-btn:hover::after {
	background: #b6d2fe;
}
input[type=radio]:checked ~ .radio-btn::after,
input[type=checkbox]:checked ~ .radio-btn::after{
	background:#fff;
}
.radio-btn::before {
    border-right: 4px solid #0d56c9;
    border-bottom: 3px solid #0d56c9;
    content: '';
    height: 15px;
    left: 3.2rem;
    margin-top: -14px;
    opacity: 0;
    position: absolute;
    top: 56%;
    transform: rotate(45deg) translate3d(0,2px,0) scale3d(.7,.7,1);
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
    width: 9px;
	z-index:1;
}

input[type=radio]:checked ~ .radio-btn::before,
input[type=checkbox]:checked ~ .radio-btn::before{
    opacity: 1;
    transform: rotate(45deg) scale3d(1,1,1);
}

.area-select{
	position: relative;
	margin:3rem 0;
}

.radiobox{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 85%;
	margin: 3rem auto;
}
.radiobox div{
	width: 49%;
}
.radiobox div label{
	display:block;
	margin-bottom:1rem;
    padding: 2rem 2rem 2rem 7rem;
    font-size: 1.8rem;
	color: #0d56c9;
    border: #0d56c9 2px solid;
    border-radius: 1rem;
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}

.tsushin-select .radiobox div{
	width:33%;
}

.pdf-btn{
	position:relative;
	padding-left:4rem;
}
.pdf-btn::before {
    content: '';
    display: block;
	width:2.5rem;
    height: 2.5rem;
	left: 0;
    margin-top: -8px;
    position: absolute;
    top: 30%;
	border:2px solid #ababab;
	border-radius:5px;
	background:#fff;
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}
.pdf-btn:hover::before {
	border:2px solid #0d56c9;
}
.pdf-btn::after {
    border-right: 5px solid #0d56c9;
    border-bottom: 3px solid #0d56c9;
    content: '';
    display: block;
    height: 16px;
	top:0;
    left: 0.8rem;
    opacity: 0;
    position: absolute;
    transform: rotate(45deg) translate3d(0,2px,0) scale3d(.7,.7,1);
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
    width: 9px;
}

input[type=checkbox]:checked + .pdf-btn::after {
    opacity: 1;
    transform: rotate(45deg) scale3d(1,1,1);
}

.area-personal{
	margin:0 0 7rem 0;
}

.area-personal h2{
	font-size:2.8rem;
	color:#000 !important;
	background-color:transparent !important;
}

.area-text{
	width:780px;
	margin:0 auto 2.5rem;
	padding:4rem;
	text-align:left;
	border-radius:10px;
	background:#fff;
}

.area-text h3{
	display: inline-block;
	text-align: left;
}
.area-text h3.required:before{
	content: "å¿…é ˆ";
    position: absolute;
    top: 25%;
    right: -4.5rem;
    left: auto !important;
    padding: 0.1rem 0.5rem !important;
    font-size: 1.3rem !important;
    color: #fff;
    border-radius: 5px;
    background: #f53f4e;
}

.area-text p{
	text-align:left !important;
}

.area-text ul{
	display:flex;
	justify-content: space-between;
}
.area-text ul li{
	flex:1;
}
.area-text ul li:first-child{
	margin:0 2rem 0 0;
}
.area-text input[type="text"],
input[type="password"]{
	width:100%;
	padding:2rem;
	border-radius:10px;
	box-sizing: border-box;
	transition: 0.3s;
	border: 2px solid #cbcbcb;
}
input[type='text']:focus,
input[type="password"]:focus{
	border: 2px solid #0d56c9;
	outline: none;
}

.area-text .data{
	display:flex;
	justify-content: flex-start;
}
.area-text div{
	display:flex;
	justify-content: flex-end;
    margin-right: 1rem;
}

.area-text .data div{
    align-items: flex-end;
}
.area-text .data select,
.prefectures select{
	width:100%;
	position:relative;
    padding: 2rem;
    border: 2px solid #cbcbcb;
	box-sizing: border-box;
	transition: 0.3s;
    border-radius: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.area-text .data select:focus,
.prefectures select:focus{
	border: 2px solid #0d56c9;
	border-radius:10px;
	outline:none;
}
.area-text .data label,
.prefectures label{
	width:100%;
	position:relative;
	margin:0 0.5rem 0 0;
}
.area-text .data div:nth-child(1){
	width:30%;
}
.area-text .data div:nth-child(2),
.area-text .data div:nth-child(3){
	width:20%;
}
.area-text .data label:after,
.prefectures label:after{
	content:"";
	position:absolute;
	width: 0;
	height: 0;
	top:50%;
	right:2rem;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 9px solid #fabe00;
}

.text-frame{
	display:block !important;
	margin:2rem 0;
}

.prefectures select{
	width:20% !important;

}

.postal input.postal-code{
	width:15% !important;
}

.tel input{
	width:50% !important;
}

.survey-list{
    position:relative;
	display: flex;
    flex-wrap: wrap;
	justify-content: flex-start !important;
	width: auto !important;
	margin: 2rem 0 0 0 !important;
}
.survey-list div{
	width: 32%;
}
.survey-list div label{
	width:100% !important;
	font-size: 1.5rem !important;
}

.postal{
	display:flex;
	justify-content: flex-start !important;
}
.postal .btn-postal{
	margin-left:1rem;
	padding:2rem;
	border-radius:10px;
	background:#fabe00;
	border: none;
	cursor: pointer;
	outline: none;
	appearance: none;
}

.attention{
	width:780px;
	margin:0 auto;
	padding:2rem;
	border-radius:10px;
	background:#ffeeb9;
}
.attention .red{
	margin-bottom:2rem;
}
.attention p a{
	color:#5386d7;
	text-decoration:underline;
}
.attention .required:before{
	left:-5rem !important;
}
.attention .pdf-btn::before{
	background:#fff;
}
.attention .btn-red{
	margin-bottom:0;
}
.attention .area-select{
	display:inline-block;
}

.area-pass {
	width:50%;
      align-items: center;
      background: #fff;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      padding: 8px 10px;
      position: relative;
}

.area-pass input[type=checkbox] {
      cursor: pointer;
      opacity: 0;
      position: absolute;
      right: 1px;
      width: 30px;
      height: 30px;
}
.area-pass span {
	margin-left:1rem;
	color:#fabe00;
}

#btnPagetop{
	position:fixed;
	width:12%;
	right:20px;
	bottom:20px;
}

#btnPagetop a{cursor: pointer;}

@media screen and (max-width:1200px){
.spOnly{display:block;}
nav,
#form{
	width:90%;
}

nav ul li{
	width:12%;
	font-size:1.5rem;
	text-align:center;
}
}

@media screen and (max-width:1040px){
.area-form{
	width:auto;
}
}

@media screen and (max-width:1020px){
.nazotoki-select .radio-btn::before{
	margin-top:-20px;
}
}

@media screen and (max-width:970px){

.pdf-btn{
	display:block;
	font-size:1.5rem;
}

.area-text{
	width:auto;
}

.attention{
	width:auto;
}

nav ul li{
	width:11%;
}

.survey-list div{
	width:48%;
}

}

@media screen and (max-width:970px){

.pdf-btn:before{
	top:16%;
}
}

@media screen and (max-width:560px){
.v-application ul {
	padding-left: 0px !important;
}
nav,
#form{
	width:100%;
}
.pcOnly{display:none;}
main{padding:2rem 0;}
nav ul li:before{top:30%;}
nav ul li:after{content:none !important;}

.area-form,
.area-text{
	padding:2rem;
}

.check{
	padding: 7rem 2rem 2em;
	font-size:1.8rem;
}
.check::before{
	top:13%;
	left:7%;
}
.check::after{
	top:20%;
	left:11%;
}

.nazotoki-select .radio-btn::before {
    margin-top: -14px !important;
}

.area-text ul{
	flex-direction: column;
}
.area-text ul li:first-child{
	margin:0 0 2rem 0;
}

.area-text .data div:nth-child(1){width:40%;}
.area-text .data div:nth-child(2){width:25%;}
.area-text .data div:nth-child(3){
	width:25%;
	margin:0;
}

.radiobox div label{font-size:1.5rem;}

.radiobox{
	flex-direction: column;
	width:auto !important;
}
.radiobox div{width:100%;}
.radiobox div .small{font-size:60%;}

.tsushin-select .radiobox div{
	width:100%;
}

.pdf-btn::after{top:7%;}

.area-personal h2{font-size:2.5rem;}
#form h3{font-size:2.2rem;}
.postal input.postal-code{width:50% !important;}
.prefectures select{width:50% !important;}
.survey-list{
	flex-direction: column;
}
.survey-list div{width:100%;margin-right:0;}

.btn-red,
.btn-gray{
	width:100% !important;
}

#form .required:before{font-size:1.2rem;}

.attention .required:before{content:none !important;}
.pdf-btn span{
    padding: 0.3rem 0.5rem;
    font-size: 1.2rem;
    color: #fff;
    border-radius: 5px;
    background: #f53f4e;
}
.attention-txt {
    text-align: center;
    width: 90%;
    margin: 0 auto;
}

.attention{padding:2rem;}

.area-pass{width:100%;}

#btnPagetop{width:20%;}
#btnPagetop img{width:100%;}

.area-text input[type="text"],
input[type="password"]{
	padding:1.5rem;
	font-size:1.6rem !important;
}

input[type="button"]{
	border: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}
}