/* common start */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
:root {
  --main-width:100vw;
  --max-width:100vw;
  --division:900;
  --ratio:calc(100vw / var(--division));
  --Noto-Sans-JP:'Noto Sans JP', sans-serif;
  --red: #ff0000;
  --red-dark: #B61C24;
  --orange: #fd7b0d;
  --blue:#325681;
  --gray:gray;
  --gray-light:#EEEEEE;
  --yellow:yellow;
  --yellow-dark:#FFC000;
  --cornsilk:#FFF9EA;
}
* {
  font-family: var(--Noto-Sans-JP);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
}
body{
  background-color: #fffab0;
}
main{
  max-width: var(--max-width);
  margin: auto;
  background-color: #ffffff;
}
img{
  vertical-align: top;
}
fieldset{
  outline: none;
}
.line-yellow {
  background: linear-gradient(transparent 60%, var(--yellow-dark) 60%);
}
/* common end */
/* h1 start */
h1>img{
  width: 100%;
}
/* h1 end */
/* income start */
.income{
  margin: calc(50 * var(--ratio)) auto;
}
.income>h2{
  font-weight: 900;
  text-align: center;
  font-size: calc(58 * var(--ratio));
}
.income>h2::after{
  content: "";
  display: block;
  margin: calc(45 * var(--ratio)) auto;
  width: fit-content;
  border-top: calc(60 * var(--ratio)) solid var(--orange);
  border-right: calc(180 * var(--ratio)) solid transparent;
  border-left: calc(180 * var(--ratio)) solid transparent;
}
.income>h2>span{
  color: var(--red);
}
.income>img{
  width: 100%;
}
.income>img:first-of-type~img{
  margin-top: calc(25 * var(--ratio));
}
/* income end */
/* questionnaire start */
.questionnaire{
  text-align: center;
  font-weight: bold;
}
.questionnaire>*:nth-child(1){
  background-color: var(--orange);
  color: #ffffff;
  font-size: calc(48 * var(--ratio));
  padding: calc(15 * var(--ratio));
}
.questionnaire>*>span{
  display: block;
}
.questionnaire>*:nth-child(2)>span{
  font-size: calc(62 * var(--ratio));
  margin: calc(20 * var(--ratio)) auto 0;
  width: fit-content;
  border-bottom: calc(4 * var(--ratio)) solid;
}
.questionnaire>*:nth-child(2)>span:last-child{
  font-size: calc(44 * var(--ratio));
  border-bottom: none;
}
.questionnaire>*:nth-child(3){
  width: 90%;
  margin: auto;
  border: calc(8 * var(--ratio)) solid var(--blue);
  border-radius: calc(15 * var(--ratio));
  font-size: calc(36 * var(--ratio));
  line-height: calc(60 * var(--ratio));
  padding: calc(15 * var(--ratio));
  position: relative;
}
.questionnaire>*:nth-child(3)>img{
  width: calc(100 * var(--ratio));
  position: absolute;
  bottom: 0;
  right: calc(25 * var(--ratio));
}
/* questionnaire end */
/* field start */
.field-img>img{
  width: 100%;
  margin-top: calc(50 * var(--ratio));
}
.field{
  margin-top: calc(50 * var(--ratio));
}
.field>*:first-child{
  display: block;
  width: 100%;
  margin-bottom: calc(25 * var(--ratio));
  background-color: var(--orange);
  color: #ffffff;
  font-size: calc(50 * var(--ratio));
  font-weight: bold;
  padding: calc(15 * var(--ratio));
  text-align: center;
}
.field>label{
  display: block;
  width: 90%;
  text-align: center;
  margin: calc(25 * var(--ratio)) auto;
  padding: calc(20 * var(--ratio));
  font-size: calc(45 * var(--ratio));
  font-weight: bold;
  background-color: var(--gray-light);
  border: 1px solid var(--gray);
  border-radius: calc(15 * var(--ratio));
}
.field>label.checked{
  background-color: var(--yellow-dark);
  color: #ffffff;
}
.field>label>input{
  display: none;
}
.field>img{
  width: 100%;
}
/* field end */
/* campaing start */
.campaing{
  margin-top: calc(50 * var(--ratio));
}
.campaing>img{
  width: 100%;
}
.campaing>figcaption>p{
  text-align: center;
  font-weight: bold;
}
.campaing>figcaption>p:first-child{
  margin: calc(50 * var(--ratio)) auto;
}
.campaing>figcaption>p:first-child>span{
  display: block;
  width: fit-content;
  margin: auto;
  font-size: calc(100 * var(--ratio));
}
.campaing>figcaption>p:first-child>span:nth-of-type(3){
  background-color: var(--yellow);
}
.campaing>figcaption>p:nth-of-type(2){
  font-size: calc(45 * var(--ratio));
  margin-bottom: calc(50 * var(--ratio));
}
/* campaing end */
/* form start */
.form{
  margin-top: calc(50 * var(--ratio));
  padding-bottom: calc(50 * var(--ratio));
  background-color: var(--gray-light);
}
.form>form>*:first-child{
  display: block;
  width: 100%;
  margin-bottom: calc(25 * var(--ratio));
  background-color: var(--orange);
  color: #ffffff;
  font-size: calc(50 * var(--ratio));
  font-weight: bold;
  padding: calc(15 * var(--ratio));
  text-align: center;
}
.form>form>*:first-child::after{
  content: "▼▼▼";
  display: block;
  letter-spacing: calc(30 * var(--ratio));
}
.form>form>*:nth-child(2){
  font-size: calc(30 * var(--ratio));
  font-weight: bold;
  text-align: center;
}
.form>form>fieldset{
  width: 90%;
  margin: calc(25 * var(--ratio)) auto 0;
}
.form>form>fieldset>legend{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: calc(31 * var(--ratio));
  margin-bottom: calc(15 * var(--ratio));
}
.form>form>fieldset>legend>span:nth-of-type(1){
  font-size: calc(31 * var(--ratio));
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: calc(10 * var(--ratio));
}
.form>form>fieldset>legend>span:nth-of-type(1)::after{
  content: "*";
  color: var(--red);
  display: block;
  width: fit-content;
  height: calc(35 * var(--ratio));
}
.form>form>fieldset>legend>span:nth-of-type(2){
  font-size: calc(20 * var(--ratio));
}
.form>form>fieldset>input{
  width: 100%;
  font-size: calc(30 * var(--ratio));
  padding: calc(15 * var(--ratio));
  border: 1px solid var(--gray);
  border-radius: calc(5 * var(--ratio));
}
.form>form>fieldset>label{
  font-size: calc(30 * var(--ratio));
  display: block;
  display: flex;
  align-items: center;
  gap: calc(15 * var(--ratio));
  padding-left: calc(10 * var(--ratio));
  width: fit-content;
  margin: calc(15 * var(--ratio)) 0;
}
.form>form>button{
  color: #ffffff;
  background-color: var(--red-dark);
  text-align: center;
  font-weight: bold;
  font-size: calc(60 * var(--ratio));
  padding: calc(15 * var(--ratio));
  display: block;
  width: 80%;
  margin: calc(25 * var(--ratio)) auto;
  border-radius: calc(15 * var(--ratio));
}
/* form end */

/***************** mobile(the device those width smaller than 768px) ↑ *****************/
/***************** desktop(the device those width larger than 768px,like ipad etc.) ↓ *****************/

/* common start */
@media screen and (min-width: 768px) {
  :root{
    --main-width:768px;
    --max-width:768px;
    --division:768;
    --ratio:1px;
  }
  .questionnaire>*:nth-child(3){
    font-size: calc(32 * var(--ratio));
  }
  .campaing>figcaption>p:first-child>span{
    font-size: calc(75 * var(--ratio));
  }
  .field>label{
    cursor: pointer;
  }
  .form>form>fieldset>label{
    cursor: pointer;
  }
  .form>form>button{
    cursor: pointer;
  }
  .form>form>fieldset>label>input{
    transform: scale(2);
  }
}
/* common end */