@charset "UTF-8";
@media screen and (max-width: 1080px){
  .contents{
    width: 1080px !important;
  }
}
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}
/*topview*/
.area_topview {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  text-align: -webkit-center;
}
.area_topview .container{
  max-width: 1250px;
  margin: 0 auto;
  padding: 0;
} 
.area_topview .img {
  display: flex;
}
.area_topview .img img{
  width: 100%;
}
/*message*/
.area_message{
  margin: 110px 0;
  position: relative;
}
.area_message::before{
  position: absolute;
  content: '';
  top: 50%;
  left: 10%;
  width: 100px;
  height: 360px;
  transform: translatey(-50%);
  background: url(../images/kacco_1.png) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.area_message::after{
  position: absolute;
  content: '';
  top: 50%;
  right: 10%;
  width: 100px;
  height: 360px;
  transform: translatey(-50%);
  background: url(../images/kacco_2.png) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.area_message .head{
  text-align: center;
}
.area_message .head .ttl{
  font: 500 28px / 1.4em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: #091A24;
  letter-spacing: 0.12em;
  margin: 0;
  padding: 0 0 6px;
  border-bottom: 2px dashed #222;
  display: inline-block;
}
.area_message .head .ttl strong{
  font: 700 36px / 1.4em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: #00AAEA;
  letter-spacing: 0.12em;
  margin: 0;
}
.area_message .body{
  margin: 28px 0 0;
  text-align: center;
}
.area_message .body .description{
  margin: 0;
  text-align: center;
  font: 500 14px / 2em "Zen Kaku Gothic New", sans-serif;
  color: #091A24;
  letter-spacing: 0.16em;
}
.area_message .foot{
  margin: 42px 0 0;
  text-align: center;
}
.area_message .btnarea{
  display: flex;
  justify-content: center;
}
.area_message .btnarea .btn{
  text-decoration: auto;
  flex: 1;
  box-shadow: 1px 1px 4px rgb(122 15 15 / 40%);
  color: #fff;
  background: #D15158;
  letter-spacing: .12em;
  max-width: 500px;
  padding: 20px 20px 20px 20px;
  font: 400 21px / 1em "Noto Sans JP", sans-serif;
  position: relative;
  text-align: center;
  border-radius: 40px;
  transition-duration: .4s;
  border: 4px solid #D15158;
}
.area_message .btnarea .btn:hover{
  border: 4px solid #FEFBCE;
  color: #FFFDDE;
}
.area_message .btnarea .btn::before{
  position: absolute;
  content: '';
  top: 32px;
  right: 24px;
  width: 24px;
  height: 24px;
  transform: translatey(-50%);
  background: url(../images/arrow_icon.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
/*profit*/
.area_profit{
  padding: 30px 0 400px;
  position: relative;
  background: #A4D6E8;
}
.area_profit .head{
  padding: 64px 0 0;
  text-align: center;
}
.area_profit .head .ttl{
  position: relative;
  font: 500 28px / 1.4em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: #091A24;
  letter-spacing: 0.12em;
  margin: 0;
  padding: 8px 80px 8px 60px;
  border: 2px solid #222;
  display: inline-block;
  background: #FFFDDE;
}
.area_profit .head .ttl::after{
  position: absolute;
  content: '';
  top: 32px;
  right: 36px;
  width: 42px;
  height: 44px;
  transform: translatey(-50%);
  background: url(../images/denki_icon.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.area_profit .head .ttl strong{
  font: 700 36px / 1.4em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: #00AAEA;
  letter-spacing: 0.12em;
  margin: 0;
}
.area_profit .body{
  margin: 10px 0 0;
  position: relative;
}
/*list_profit*/
.list_profit{
  display: flex;
  justify-content: center;
  flex-flow: wrap;
  margin: 0;
  padding: 36px 0 0;
  position: absolute;
  z-index: 1;
}
.list_profit >li{
  padding: 10px 12px;
  width: 28%;
  list-style-type: none;
  display: flex;
}
.list_profit li.profit_1,
.list_profit li.profit_2,
.list_profit li.profit_3{
    position: relative;
}
.list_profit li.profit_1::before,
.list_profit li.profit_2::before,
.list_profit li.profit_3::before{
  position: absolute;
  content: '';
  top: 20px;
  left: 28px;
  width: 50px;
  height: 50px;
  transform: translatey(-50%);
  z-index: 0;
}
.list_profit li.profit_1::before{
  background: url(../images/point_1.svg) no-repeat center center !important;
  background-size: contain !important;
}
.list_profit li.profit_2::before{
  background: url(../images/point_2.svg) no-repeat center center !important;
  background-size: contain !important;
}
.list_profit li.profit_3::before{
  background: url(../images/point_3.svg) no-repeat center center !important;
  background-size: contain !important;
}
.list_profit article{
  background: #FFF;
  border: 2px solid #000;
  box-shadow: 6px 6px 0px rgb(64, 177, 215);
  padding: 22px 22px 32px;
}
.list_profit .img {
  text-align: center;
}
.list_profit .img img {
  width: 85%;
}
.list_profit .text {
  margin: 10px 0 0;
}
.list_profit .text .ttl{
  margin: 10px 0 0;
  font: 700 17px / 1.4em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: #00AAEA;
  letter-spacing: 0.12em;
  text-align: center;
}
.list_profit .text .description{
  margin: 10px 0 0;
  font: 500 14px / 1.6em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: #292525;
  letter-spacing: 0.12em;
}
/*hint*/
.area_hint{
  background: #FEFBCE;
  padding: 180px 0 180px;
  position: relative;
}
.area_hint> ::before{
  background: url(../images/hint_text.png) no-repeat center center !important;
  background-size: contain !important;
  position: absolute;
  content: '';
  top: 16%;
  right: 0;
  width: 610px;
  height: 200px;
  transform: translatey(-50%);
  z-index: 0;
}
.area_hint> ::after{
  background: url(../images/hint_human.png) no-repeat center center !important;
  background-size: contain !important;
  position: absolute;
  content: '';
  bottom: -6%;
  right: 0;
  width: 100%;
  height: 180px;
  transform: translatey(-50%);
  z-index: 0;
}
.area_hint .division{
  display: flex;
  align-items: center;
  justify-content: center;
}
/*listt_hint*/
.listt_hint{
  padding: 0;
  margin: 24px 0 0;
}
.listt_hint > li{
  list-style-type: none;
  display: flex;
}
.listt_hint > li+li{
  margin: 32px 0 0;
}
.listt_hint li.hint_1,
.listt_hint li.hint_2,
.listt_hint li.hint_4{
    position: relative;
}
.listt_hint li.hint_1::before{
  background: url(../images/hint_1.png) no-repeat center center !important;
  background-size: contain !important;
  position: absolute;
  content: '';
  top: 48px;
  left: 0;
  width: 175px;
  height: 100px;
  transform: translatey(-50%);
  z-index: 0;
}
.listt_hint li.hint_2::before{
  background: url(../images/hint_2.png) no-repeat center center !important;
  background-size: contain !important;
  position: absolute;
  content: '';
  bottom: -60px;
  left: 0;
  width: 145px;
  height: 160px;
  transform: translatey(-50%);
  z-index: 0;
}
.listt_hint li.hint_4::before{
  background: url(../images/hint_4.png) no-repeat center center !important;
  background-size: contain !important;
  position: absolute;
  content: '';
  bottom: -110px;
  left: -20px;
  width: 190px;
  height: 140px;
  transform: translatey(-50%);
  z-index: 0;
}
.listt_hint > li > article{
  list-style-type: none;
  background: #fff;
  border-radius: 510px;
  border: 3px solid #FFDC29;
  height: 370px;
  width: 370px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
  text-align: center;
}
.listt_hint .text .number{
  margin: 0;
  font: 500 24px / 1.6em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: #A2A2A2;
  letter-spacing: 0.12em;
}
.listt_hint .text .ttl{
  display: inline-block;
  margin: 0;
  padding: 0 0 8px;
  font: 700 22px / 1.4em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: #1F0F0F;
  letter-spacing: 0.12em;
  text-align: center;
  border-bottom: 2px solid #D15158;
}
.listt_hint .text .description{
  margin: 10px 0 0;
  font: 500 16px / 1.6em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: #292525;
  letter-spacing: 0.12em;
}
.listt_hint .example .for{
  background: #D15158;
  border-radius: 40px;
  text-align: center;
  color: #fff;
  margin: 20px 0 0;
  padding: 5px 0;
  font: 500 16px / 1.6em "Zen Kaku Gothic New", sans-serif;
  position: relative;
}
.listt_hint .example .for::after{
  position: absolute;
  content: '';
  top: 45%;
  right: 10%;
  width: 60px;
  height: 60px;
  transform: translatey(-50%);
  background: url(../images/pen_icon.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.listt_example{
  padding: 0;
}
.listt_example > li {
  list-style-type: none;
}
.listt_example article{
  padding: 10px 50px 0;
}
.listt_example .item{
  margin: 8px 0 0;
  font: 500 15px / 1.3em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: #2f2525;
  letter-spacing: 0.12em;
}
.listt_example .note{
  margin: 8px 0 0;
  font: 500 13px / 1.6em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: #292525;
  letter-spacing: 0.12em;
  text-align: end;
}
/*view*/
.area_view{
  margin: 80px 0 0;
  position: relative;
}
.area_view .frame{
  background: #fff;
  margin: 0 40px 70px;
  border: 1px solid #000;
  padding: 70px 40px 70px;
  box-shadow: 6px 6px 0px rgb(64, 177, 215);
}
.area_view .head{
  text-align: center;
}
.area_view .head .sabu{
  position: relative;
  font: 500 18px / 1.4em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: #ffffff;
  letter-spacing: 0.10em;
  margin: 0;
  padding: 10px 52px 10px 40px;
  display: inline-block;
  background: #47A1D9;
  border-radius: 30px;
}
.area_view .head .sabu::after{
  position: absolute;
  content: '';
  top: 23px;
  right: 20px;
  width: 28px;
  height: 30px;
  transform: translatey(-50%);
  background: url(../images/megane_icon.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
.area_view .head .ttl{
  font: 500 28px / 1.4em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: #091A24;
  letter-spacing: 0.12em;
  margin: 0;
  padding: 16px 0 6px;
  display: inline-block;
}
.area_view .head .ttl strong{
  font: 700 36px / 1.4em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: #00AAEA;
  letter-spacing: 0.12em;
  margin: 0;
}
.area_view .body{
  margin: 48px 0 0;
}
.area_view .step2{
  margin: 24px 0 0;
}
.area_view .step1 .en,
.area_view .step2 .en{
  font: 400 36px / 1.4em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: #00AAEA;
  letter-spacing: 0.12em;
  margin: 0;
  text-align: center;
}
.area_view .step1 .description,
.area_view .step2 .description{
  margin: 10px 0 0;
  font: 500 18px / 1.6em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: #292525;
  letter-spacing: 0.12em;
  text-align: center;
}
.area_view .type{
  margin: 40px 0 0;
}
.area_view .information{
  margin: 24px 0 0;
}
/* ▼タブ(共通装飾＋非選択状態の装飾) */
.tabbox{
  margin: 0 auto;
  text-align: center;
}
.tab {
  border: 2px solid #000;
  display: inline-block;
  border-radius: 20px;
  padding: 40px 50px 40px 65px;
  margin: 18px 4px 10px 4px;
  width: 28%;
  font: 500 20px / 1.6em "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.12em;
  position: relative;
}
.tab::before{
  position: absolute;
  content: '';
  top: 51%;
  left: 18%;
  width: 10px;
  height: 17px;
  transform: translatey(-50%);
  background: url(../images/sankaku_icon.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}
/* ▼タブにマウスポインタが載った際の装飾 */
.tab:hover {
  opacity: 0.5;
  cursor: pointer;
/* マウスポインタの形状を「指(指し示す形)」にする */
}

/* ▼選択状態のタブ(＝チェックが入っているラジオボタンの隣にあるタブの装飾) */
input:checked + .tab {
  color: #fff;
  background-color: #47A1D9;
  box-shadow: 2px 2px 0px rgb(64, 177, 215);
}

/* ▼タブ機能を制御するラジオボタン(非表示にする) */
.tabbox input { display: none; }

 /* ▼タブの中身(共通装飾＋非選択状態の装飾) */
.tabcontent {
  display: none;             /* 標準では非表示にする */
  padding: 1em;              /* 内側の余白量 */
}

/* ▼チェックが入っているラジオボタンに対応するタブの中身を表示する */
#tabcheck1:checked ~ #tabcontent1 { display: block; }
#tabcheck2:checked ~ #tabcontent2 { display: block; }

 /* list_typeA */
.list_typeA,
.list_typeB{
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  margin: 20px 0;
  padding: 0;
}
.list_typeA >li,
.list_typeB >li{
  list-style-type: none;
  padding: 4px 10px 4px 0;
  display: flex;
}
.list_typeA a,
.list_typeB a{
  display: flex;
  align-items: center;
  text-decoration: underline #000;
}
.list_typeA a:hover,
.list_typeB a:hover{
  opacity: 0.7;
}
.list_typeA .img,
.list_typeB .img {
  margin: 0 4px 0 0;
}
.list_typeA .img img,
.list_typeB .img img {
  width: 30px;
  height: 30px;
}
.list_typeA .ttl,
.list_typeB .ttl {
  margin: 0;
  color: #272324;
  letter-spacing: 0.12em;
  padding: 6px 10px 6px 6px;
  font: 400 14px / 1.4em "Noto Sans JP", sans-serif;
  position: relative;
  text-align: center;
  transition-duration: .4s;
}

/* list_informationA */
.list_informationA,
.list_informationB{
  padding: 20px 0;
  margin: 0;
}
.list_informationA >li,
.list_informationB >li{
  list-style-type: none;
}
.list_informationA .type,
.list_informationB .type{
  margin: 0;
  padding: 12px 0 10px;
  font: 500 24px / 1.6em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  letter-spacing: 0.12em;
}
/* list_detailA */
.list_detailA,
.list_detailB{
  display: flex;
  margin: 20px 0;
  padding: 0;
}
.list_detailA >li,
.list_detailB >li{
  list-style-type: none;
  padding: 6px 8px 6px 8px;
  display: flex;
  width: 50%;
}
.list_detailA article,
.list_detailB article{
  background-color: #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
  display: flex;
  flex-direction: column;
}
.list_detailA .img img,
.list_detailB .img img{
  width: 100%;
}
.list_detailA .text,
.list_detailB .text{
  margin: 12px 0 0;
  text-align: justify;
  padding: 0 16px;
  flex: 1;
}
.list_detailA .place,
.list_detailB .place{
  margin: 0;
  font: 500 12px / 1.6em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  letter-spacing: 0.12em;
  border: 2px solid #C84E55;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 18px;
}
.list_detailA .ttl,
.list_detailB .ttl{
  margin: 8px 0 0;
  font: 600 22px / 1.4em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  /* letter-spacing: 0.08em; */
}
.list_detailA .description,
.list_detailB .description{
  margin: 8px 0 0;
  font: 400 14px / 1.8em "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  letter-spacing: 0.08em;
}
.list_detailA .btnarea,
.list_detailB .btnarea{
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
}
.list_detailA .btnarea .btn,
.list_detailB .btnarea .btn{
  flex: 1;
  color: #fff;
  background: #47A1D9;
  letter-spacing: .12em;
  padding: 16px;
  font: 400 14px / 1em "Noto Sans JP", sans-serif;
  position: relative;
  transition-duration: .4s;
}
.list_detailA .btnarea .btn::after,
.list_detailB .btnarea .btn::after{
  position: absolute;
  content: '';
  top: 24px;
  right: 18px;
  width: 20px;
  height: 20px;
  transform: translatey(-50%);
  background: url(../images/arrow_icon_blue.svg) no-repeat center center !important;
  background-size: contain !important;
  z-index: 0;
}