body{
font-family: "Yu Gothic Medium", "Yu Gothic", "Hiragino Sans", sans-serif;
background:#FCFCE6;
}

h1{
text-align:center;
font-size:17px;
font-weight:bold;
margin:0 auto 30px;
width:95%;
max-width:700px;
padding:10px 0;
background:#ffc0cb;
color:#4D4D4D;
}


h4{
text-align:center;
font-size:20px;
font-weight:normal;
margin:80px auto 40px;
border-top:1px solid #000;
border-bottom:1px solid #000;
padding:15px 0;
width:95%;
max-width:700px;
}
.copy{
font-size:11px;
width:95%;
max-width:700px;
margin:20px auto 10px;
text-align:center;
}

.arrow{
width: 30px;
height: 30px;
border: 8px solid;
border-color:  transparent transparent #ccc #ccc;
transform: rotate(-45deg);
margin:0 auto;
}
.text{
display:inline;
font-size:20px;
}

.point{
margin-left:6px;
white-space:nowrap;
font-size:12px;
}

.custom-checkbox01,
.custom-checkbox02,
.custom-checkbox03,
.custom-checkbox04,
.custom-checkbox05,
.custom-checkbox06 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.3s ease;
  width: 95%;
  border-bottom: 1px dashed #999;
}

.custom-checkbox01 input,
.custom-checkbox02 input,
.custom-checkbox03 input,
.custom-checkbox04 input,
.custom-checkbox05 input,
.custom-checkbox06 input {
  display: none;
}

.checkmark01,
.checkmark02,
.checkmark03,
.checkmark04,
.checkmark05,
.checkmark06 {
  width: 30px;
  height: 30px;
  border-radius: 20px;
  background: rgba(0,0,0,0.1);
  position: relative;
  transition: all 0.3s ease;
}

.checkmark01::after,
.checkmark02::after,
.checkmark03::after,
.checkmark04::after,
.checkmark05::after,
.checkmark06::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 5px;
  width: 8px;
  height: 16px;
  border-width: 0 3px 3px 0;
  border-style: solid;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  opacity: 0;
}

.checkmark01::after { border-color: #99c94d; }
.checkmark02::after { border-color: #68b081; }
.checkmark03::after { border-color: #dea6bd; }
.checkmark04::after { border-color: #c697d1; }
.checkmark05::after { border-color: #6ab3cc; }
.checkmark06::after { border-color: #95a6de; }

.custom-checkbox01 input:checked + .checkmark01,
.custom-checkbox02 input:checked + .checkmark02,
.custom-checkbox03 input:checked + .checkmark03,
.custom-checkbox04 input:checked + .checkmark04,
.custom-checkbox05 input:checked + .checkmark05,
.custom-checkbox06 input:checked + .checkmark06 {
  background: #fff;
  animation: pop 0.25s ease;
}

.custom-checkbox01 input:checked + .checkmark01::after,
.custom-checkbox02 input:checked + .checkmark02::after,
.custom-checkbox03 input:checked + .checkmark03::after,
.custom-checkbox04 input:checked + .checkmark04::after,
.custom-checkbox05 input:checked + .checkmark05::after,
.custom-checkbox06 input:checked + .checkmark06::after {
  animation: draw 0.3s ease forwards;
}

.custom-checkbox01.checked { background: #f1fccc; }
.custom-checkbox02.checked { background: #e1edce; }
.custom-checkbox03.checked { background: #f2e1e8; }
.custom-checkbox04.checked { background: #efdff2; }
.custom-checkbox05.checked { background: #dde9ed; }
.custom-checkbox06.checked { background: #d9e1fc; }


@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes draw {
  0% {
    transform: rotate(45deg) scale(0);
    opacity: 0;
  }
  50% {
    transform: rotate(45deg) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: rotate(45deg) scale(1);
    opacity: 1;
  }
}  
.tbox01title{
color:#fff;
width:95%;
max-width:700px;
margin:0px auto 20px;
text-align:center;
padding:10px 0;
}
.kana{
font-size:15px;
}

.tbox02title,.tbox03title,.tbox04title,.tbox05title,.tbox06title{
color:#fff;
width:95%;
max-width:700px;
margin:60px auto 20px;
text-align:center;
padding:10px 0;
}
h3{
font-size:30px;
font-weight:normal;
margin:0;
padding:0;
}

.tbox01title{
background:#99c94d;
}
.tbox02title{
background:#68b081;
}
.tbox03title{
background:#dea6bd;
}
.tbox04title{
background:#c697d1;
}
.tbox05title{
background:#6ab3cc;
}
.tbox06title{
background:#95a6de;
}

.tbox01,.tbox02,.tbox03,.tbox04,.tbox05,.tbox06{
width:95%;
max-width:700px;
margin:0 auto;
overflow:hidden;
}


.resultbox{
width:95%;
max-width:700px;
clear:both;
overflow: hidden;
margin:50px auto;
font-size:30px;
}
.resultleft{
float:left;
width:47%;

}
.resultright{
float:right;
width:47%;
}
table {
    border-collapse:  collapse;
    margin:20px 0;
    width:100%;
}

.tbox01s th, .tbox02s th, .tbox03s th,
.tbox04s th, .tbox05s th, .tbox06s th {
  width: 50%;
  color: #fff;
  text-align: center;
  font-weight: normal;
  padding: 3px;
}

.tbox01s td, .tbox02s td, .tbox03s td,
.tbox04s td, .tbox05s td, .tbox06s td {
  width: 50%;
  text-align: right;
  padding: 3px;
  background: #fff;
}

.tbox01s th, .tbox01s td { border: 1px solid #99c94d; }
.tbox01s th { background: #99c94d; }

.tbox02s th, .tbox02s td { border: 1px solid #68b081; }
.tbox02s th { background: #68b081; }

.tbox03s th, .tbox03s td { border: 1px solid #dea6bd; }
.tbox03s th { background: #dea6bd; }

.tbox04s th, .tbox04s td { border: 1px solid #c697d1; }
.tbox04s th { background: #c697d1; }

.tbox05s th, .tbox05s td { border: 1px solid #6ab3cc; }
.tbox05s th { background: #6ab3cc; }

.tbox06s th, .tbox06s td { border: 1px solid #95a6de; }
.tbox06s th { background: #95a6de; }


.unit {
  font-size: 0.7em;
}

.type01,.type02,.type03,.type04,.type05,.type06{
width:95%;
max-width:700px;
margin:20px auto;
}

.type01 th{
background:#99c94d;
color:#fff;
text-align:center;
font-weight:normal;
border-bottom:1px solid #99c94d;
width:120px;
padding:8px 0;
font-size:18px;
}
.type01 td{
text-align:left;
border-bottom:1px solid #99c94d;
padding:8px 0;
font-size:18px;
}
.type02 th{
background:#68b081;
color:#fff;
text-align:center;
font-weight:normal;
border-bottom:1px solid #68b081;
width:120px;
padding:8px 0;
font-size:18px;
}
.type02 td{
text-align:left;
border-bottom:1px solid #68b081;
padding:8px 0;
font-size:18px;
}
.type03 th{
background:#dea6bd;
color:#fff;
text-align:center;
font-weight:normal;
border-bottom:1px solid #dea6bd;
width:120px;
padding:8px 0;
font-size:18px;
}
.type03 td{
text-align:left;
border-bottom:1px solid #dea6bd;
padding:8px 0;
font-size:18px;
}
.type04 th{
background:#c697d1;
color:#fff;
text-align:center;
font-weight:normal;
border-bottom:1px solid #c697d1;
width:120px;
padding:8px 0;
font-size:18px;
}
.type04 td{
text-align:left;
border-bottom:1px solid #c697d1;
padding:8px 0;
font-size:18px;
}
.type05 th{
background:#6ab3cc;
color:#fff;
text-align:center;
font-weight:normal;
border-bottom:1px solid #6ab3cc;
width:120px;
padding:8px 0;
font-size:18px;
}
.type05 td{
text-align:left;
border-bottom:1px solid #6ab3cc;
padding:8px 0;
font-size:18px;
}
.type06 th{
background:#95a6de;
color:#fff;
text-align:center;
font-weight:normal;
border-bottom:1px solid #95a6de;
width:120px;
padding:8px 0;
font-size:18px;
}
.type06 td{
text-align:left;
border-bottom:1px solid #95a6de;
padding:8px 0;
font-size:18px;
}

.advice{
width:95%;
max-width:700px;
margin:20px auto;
}
.advicehead th{
background:#ccc;

}
.advicehead td{
background:#ccc;

}
.advice th{
background:#eee;
text-align:center;
font-weight:normal;
border:1px solid #666;
padding:3px 0 5px;
}
.advice td{
text-align:left;
border:1px solid #666;
padding:3px 3px 5px;
}
h2{
text-align:center;
font-size:30px;
font-weight:normal;
margin:50px 0 0;
}
.kekka{
text-align:center;
font-size:26px;
margin:30px 0 0;
}
.kekka span{
font-size:37px;
}
.kekka2{
text-align:center;
font-size:23px;
margin:0;
}
.kekka2 span{
font-size:26px;
}


.total{
font-size:24px;
font-weight:normal;
width:95%;
max-width:700px;
margin:0 auto;
text-align:center;
}
.advice{
font-size:18px;
font-weight:normal;
width:95%;
max-width:700px;
margin:5px auto 25px;
border-bottom:1px dashed #333;
padding-bottom:25px;
}
@media (max-width: 768px) {
.text{
font-size:14px;
}
}


input {
      font-size: 20px;
      padding: 10px;
}
    #resultq {
      font-size: 26px;
    }
    #resultq span{
      margin-top: 30px;
      font-size: 37px;
    }    
    
    #resultqArea{
       font-size: 26px;
       text-align:center;
    }
    .index01{
    text-align:center;
    font-size:19px;
    margin:25px 0 15px;
   color:#BA492F;
    }
    .index02{
    text-align:center;

    font-size:19px;
    margin:40px 0 15px;
   color:#BA492F;
    }
    
    .index03{
    text-align:center;
    font-weight:bold;
    font-size:19px;
    margin:15px 0;
    color:#4D4D4D;
    }
    .caution{
    width:95%;
    max-width:700px;
    margin:30px auto;
    text-align:left;
    font-size:12px;
    }
    
.link02 a{
  display: block;
  padding: 15px 0px 15px 15px;
  font-size:20px;
  background-color: #0086cc;
  color: #fff;
  text-decoration: none;
  position: relative;
  border-radius: 4px;
  font-weight: normal;
  width:90%;
  max-width:350px;
  margin:10px auto;
  text-align:center;
}

.link02 a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

.link02 a:hover::after {
  right: 12px;
  transition: 0.2s;
}

.link02-btn {
  display: block;
  padding: 15px 0px 15px 15px;
  font-size: 20px;
  background-color: #0086cc;
  color: #fff;
  border: none;
  text-decoration: none;
  position: relative;
  border-radius: 4px;
  font-weight: normal;
  width: 90%;
  max-width: 350px;
  margin: 60px auto;
  text-align: center;
  cursor: pointer;
  appearance: none;
  animation: blink 2.5s infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.link02-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

.link02-btn:hover::after {
  right: 12px;
  transition: 0.2s;
}
    
.select-wrap {
  position: relative;
  margin: 10px 0;
}

.select-group {
  display: flex;
  gap: 8px;
  width:95%;
  max-width:700px;
  margin:0 auto;
}

.select-group .select-wrap {
  flex: 1;
}

.select-wrap select {
  width: 100%;
  padding: 12px 40px 12px 12px;
  font-size: 16px;
  border-radius: 10px;
  border: 2px solid #ccc;
  background: #fff;
  font-weight:bold;
  color:#ccc;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.select-wrap select {
  color: #ccc;
}
.select-wrap select.selected {
  color: #333;
}
.select-wrap::after {
  content: "▼";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #888;
  font-size: 12px;
}
.select-wrap select:focus {
  border-color: #66afe9;
  outline: none;
  box-shadow: 0 0 5px rgba(102,175,233,0.5);
}
.error-text {
   color:#BA492F;
  font-weight: bold;
}