@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/*　リセットCSS　*/

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}
body {
  margin: 0;
  padding:0;
  text-align: center;
  color: #252525;
  font-family: "Noto Sans JP", sans-serif;
}

main {
  display: block;
}
 a{
    text-decoration: none;
 }


 /*===============
共通部
===============*/
header,footer{
  background-color:#EFF9FF;
}

.con{
    max-width: 90rem;
    margin: 0px auto;
  }


summary {
  display: block;
  list-style: none;
}





/*===============
ヘッダー
===============*/
header section{
  max-width: 90rem;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}

.logo{
  max-width: 21.711875rem;
  padding-bottom: 0.4375rem;
}

header .pc_menu{
  margin-top: 8.1875rem;
}

.whats{
color: #0096FA;
font-size: 2.1875rem;
}

.whats:hover{
  background-color: #0096FA;
  color: #ffffff;
}


/*スマホメニュー*/
.sp_menu{
  display: none;
}

h2{
  font-size: 2rem;
}



/*===============
メイン
===============*/
main{
    margin: 0px auto;
    height: auto;
    padding:2.9375rem 0px;}


.tab_a{
    display: flex;
    justify-content: space-between;
    padding:4.25rem 3.375rem;
}

.plus_b{
      background-color: #FFFFFF;
      border: solid 1px #E5EEF4;
      width: 5rem;
      border-radius: 1.25rem;
      padding:1.25rem;
      font-size: 2.25rem;
  }

  .plus_b:hover{
    background-color: #0096FA;
  }

.main_b{
  background-color: #0096FA;
  width: 31.25rem;
  font-size: 2.25rem;
  padding:3.75rem;
  margin: 0.625rem auto;
  border-radius: 2.3125rem;
  text-align: center;
  color:#FFFFFF;
  border: none;
  
}

.main_b:hover{
  background-color: #0060a0;
}

.check{
 position: relative;

}


.checkbox {
  position: absolute;
    left: 4.125rem;
  top: 4.125rem;
}

/* 本物のチェックボックスは隠す */
.checkbox input {
  display: none;
}

/* ダミー枠 */
.checkbox .custom {
  display: inline-block;
  width: 3.125rem;
  height: 3.125rem;
  border: 1px solid #D0D9DF; /* 枠線の色をテーマカラー */
  border-radius: 4px;
  position: relative;
  margin-right: 8px;
}

/* チェックが入ったとき */
.checkbox input:checked + .custom::after {
  content: "";
  position: absolute;
  left: 0.3125rem;
  top: 0.0625rem;
 width: 2.5rem;
  height: 1.875rem;
  border: solid #0060a0;
  border-width: 0 0.3125rem 0.3125rem 0;
  transform: rotate(45deg);
}


.tab_a,.tab_b {
  max-width: 90rem;
  margin: 0px auto;
  padding:60px 0px;
}

.tab_b{
  border: solid 1px #E5EEF4;
  text-align: left;
  padding:3.75rem 3.5rem;
   position: relative;
}


summary .arrow::after{
  content: "▶";
  display: inline-block;
  color: #0096FA;
  transform: rotate(0deg); /* open時 */
  transition: transform 0.2s;
  position: absolute;
   right: 3.75rem;
   top: 5.85rem;
}

details[open] summary .arrow::after {
  transform: rotate(90deg);
}







.scene{
    background-color: #E5EEF4;
    padding:3.75rem 0px 3.75rem 0px;
  }


main textarea{
  width: 13.125rem;
  height: 17.0625rem;
  border: none;
}



main textarea{
margin:1rem 1rem 0px 0px;
}

main textarea:first-child{
  margin:0px 1rem 0px 0px;}






/*中身のモーダル*/
.modal{
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  z-index: 1;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 60%);
}

.modal-wrapper {
 padding:2.75rem;
  background-color: #E5EEF4;
}

.modal h2{
 padding: 2.125rem;
 margin-bottom: 0px;
background-color: #ffffff;
}

.modal textarea{
width:100%;
min-height: 28.875rem;
}


.sentence{
  text-align: left;
}



/*===============
フッター
===============*/
footer section{
  max-width: 90rem;
  margin: 0px auto;
  padding:1.25rem;
}