@charset "utf-8";

section.hero{
  background-image: url("../img/hero_bg.svg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 1920px auto;
  padding-bottom: 70px;
}
section.hero .container{
  padding: 70px 0 3em 5%;
  background-image: url("../img/hero_bg_window.svg");
	background-repeat: no-repeat;
	background-position: right top 40px;
	background-size: auto;
}
@media screen and (min-width: 1921px){
  section.hero{
    background-size: 100% auto;
  }
}
@media screen and (max-width: 520px){
  section.hero{
    padding: 0 6vw 3em 6vw;
    background-size: auto 170vw;
  }
  section.hero .container{
    flex-direction: column;
    padding: 1em 0 2em 0;
    background: none;
  }
}

/*--------------------------------------------------------------------*/

section.hero .container .lead{
  margin-right: 1em;
}
section.hero .container .lead .pre{
  background-image: url("../img/hero_lead_balloon.svg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
  padding: .4em 2em 1.5em 2em;
  margin-bottom: .5em;
}
section.hero .container .lead .main{
  margin-bottom: 2em;
  transform: translate(-5%, 0);
}
@media screen and (max-width: 520px){
  section.hero .container .lead{
    margin-right: 0;
  }
  section.hero .container .lead .pre{
    font-size: 1.8rem;
    padding: .4em 1em 1.5em 1em;
  }
  section.hero .container .lead .main{
    margin-bottom: 2em;
    transform: translate(-3%, 0);
  }
}

/*--------------------------------------------------------------------*/

section.hero .container .lead .lottery{
  width: 9em;
  height: 9em;
  margin-right: 1em;
  box-sizing: border-box;
  background-image: url("../img/hero_title_balloon.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}
section.hero .container .lead .lottery .box{
  padding-bottom: .3em;
}
section.hero .container .lead .lottery .unit{
  margin-left: .3em;
}
@media screen and (max-width: 520px){
  section.hero .container .lead .lottery{
    width: 7.3em;
    height: 7.3em;
    margin-right: .5em;
  }
  section.hero .container .lead .lottery .box .upper{
    font-size: 1.8rem;
  }
  section.hero .container .lead .lottery .box .middle .num{
    font-size: 2.973rem;
  }
  section.hero .container .lead .lottery .box .middle .unit{
    font-size: 1.2rem;
  }
  section.hero .container .lead .lottery .box .comp{
    font-size: 1.5rem;
    padding-left: .5em;
  }
}

/*--------------------------------------------------------------------*/

section.hero .container .lead .catch .upper b::after{
  width: 100%;
  height: .75em;
  background-image: url("../img/common_wave.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: auto 100%;
  right: 0;
  bottom: 0;
  transform: translate(0, 55%);
}
section.hero .container .lead .catch .middle{
   font-feature-settings: "palt";
}
section.hero .container .lead .catch .middle .mini{
  font-size: 73%;
  margin-left: .2em;
}
section.hero .container .lead .catch .present{
  background: linear-gradient(transparent 45%, #FFF 45%);
  padding-bottom: .3em;
}
section.hero .container .lead .catch .present .kerning{
  letter-spacing: -.1em;
}
@media screen and (max-width: 520px){
  section.hero .container .lead{
    margin-bottom: 2em;
  }
  section.hero .container .lead .catch .upper{
    font-size: 2rem;
    white-space: nowrap;
  }
  section.hero .container .lead .catch .middle{
    font-size: 2.5rem;
    white-space: nowrap;
  }
  section.hero .container .lead .catch .present{
    font-size: 4.2857rem;
    white-space: nowrap;
  }
}

/*--------------------------------------------------------------------*/

section.hero .container .image{
  
}
@media screen and (max-width: 520px){
  section.hero .container .image{
    width: 100%;
    text-align: right;
  }
  section.hero .container .image img{
    max-width: 75vw;
  }
}

/*--------------------------------------------------------------------*/

section.hero .container .lead .period .index{
  margin-bottom: .5em;
}
section.hero .container .lead .period .index .label{
  padding: .2em 1.5em;
  border-radius: 5em;
  background-color: var(--blue-p2);
}
section.hero .container .lead .period .value .date{
  border-bottom: 2px solid var(--blue-p5);
}
@media screen and (max-width: 520px){
  section.hero .container .lead .period .index .label{
    display: block;
    max-width: 75vw;
    margin: 0 auto;
  }
  section.hero .container .lead .period .value{
    font-size: 1.9rem;
  }
}

/*--------------------------------------------------------------------*/

section.hero .description{
  max-width: 53em;
  margin: 0 auto 2em auto;
}
@media screen and (max-width: 520px){
  section.hero .description{
    text-align: left;
  }
}

/*--------------------------------------------------------------------*/

section.hero .function{
  
}
section.hero .function .ctab a{
  background-color: var(--orange-or5);
}
section.hero .function .ctab .button::after{
  background-color: #BE4B0F;
}
@media screen and (max-width: 520px){
  section.hero .function .ctab a .icon_arrow{
    font-size: 1.8rem;
  }
}

/*--------------------------------------------------------------------*/

section.campaign{
  margin-bottom: 2em;
}
section.campaign .heading{
  margin-bottom: 1em;
}
@media screen and (max-width: 520px){
  section.campaign{
    padding: 0 5vw;
  }
  section.campaign .heading{
    margin-bottom: 2em;
  }
}

/*--------------------------------------------------------------------*/

section.campaign .bodying{
  max-width: 1045px;
  margin: 0 auto;
}
section.campaign .bodying .container::after{
  width: 100%;
  height: 85%;
  background-color: var(--blue-p1);
  border-radius: .8em;
  left: 0;
  right: 0;
  bottom: 0;
}
section.campaign .bodying .item{
  padding-bottom: 2em;
}
section.campaign .bodying .item .pre .border{
  padding: 0 1.5em;
  background-image: url("../img/campaign_title_border_l.svg"), url("../img/campaign_title_border_r.svg");
	background-repeat: no-repeat;
	background-position: left center, right center;
	background-size: auto 1.5em;
}
section.campaign .bodying .item .pre .border b{
  background: linear-gradient(transparent 60%, #FAD2D7 60%);
}
section.campaign .bodying .item .pre .border .big{
  font-size: 142%;
}
section.campaign .bodying .item .index{
  max-width: 17em;
  border: 1px solid var(--blue-p5);
  border-radius: 5em;
  margin: .5em auto;
  padding: .1em 1em;
  box-sizing: border-box;
  background-color: #fff;
}
section.campaign .bodying .item .index img{
  width: auto;
  height: 1.2em;
  margin-left: .2em;
}
section.campaign .bodying .item .box{
  
}
section.campaign .bodying .item .box .includes{
  padding: 1em 0;
  min-height: 5.9em;
}
section.campaign .bodying .item .box ul{
  display: inline-flex;
  max-width: 25em;
}
section.campaign .bodying .item .box ul li{
  padding-left: 1.5em;
  margin-right: 1em;
  margin-bottom: .2em;
  background-image: url("../img/common_check.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 1.1em auto;
}
section.campaign .bodying .item .box .image{
  transform: translate(4%, 0);
}
section.campaign .bodying .item .box .image img + img{
  margin-left: 1em;
}
section.campaign .bodying .item .box .description{
  margin-top: 1em;
}
@media screen and (max-width: 520px){
  section.campaign .bodying .container{
    flex-direction: column;
  }
  section.campaign .bodying .container::after{
    display: none;
  }
  section.campaign .bodying .item{
    padding: 0 8vw;
    padding-bottom: 2em;
    background: linear-gradient(transparent 15%, var(--blue-p1) 15%);
  }
  section.campaign .bodying .item .pre{
    font-size: 1.8rem;
  }
  section.campaign .bodying .item .index{
    font-size: 2.2rem;
  }
  section.campaign .bodying .item .box .includes{
    min-height: 0;
  }
  section.campaign .bodying .item .box ul{
    font-size: 1.4rem;
  }
  section.campaign .bodying .item .box ul li{
    margin-right: 1em;
    letter-spacing: 0;
  }
  section.campaign .bodying .item .box .image img{
    max-height: 45vw;
  }
  section.campaign .bodying .item .box .description br{
    display: none;
  }
}

/*--------------------------------------------------------------------*/

section.campaign .bodying .item.i1{
  flex: 1.2
}
section.campaign .bodying .item.i1::after{
  width: 2px;
  height: 60%;
  background-color: #fff;
  right: 0;
  bottom: 0;
  top: 20%;
  margin: auto;
}
section.campaign .bodying .item.i2{
  flex: 1;
}
@media screen and (max-width: 520px){
  section.campaign .bodying .item.i1{
    margin-bottom: 2em;
  }
  section.campaign .bodying .item.i1::after{
    display: none;
  }
}

/*--------------------------------------------------------------------*/

section.intro{
  flex: 1;
  padding: 60px 0;
  background-image: url("../img/intro_bg.svg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 1677px;
}
section.intro .heading{
  margin-bottom: 1.5em;
}
section.intro .heading .message{
  writing-mode: vertical-rl;
  letter-spacing: .4em;
}
section.intro .heading .message b{
  background: linear-gradient(90deg, transparent 50%, var(--blue-p1) 50%);
}
section.intro .bodying .description{
  max-width: 40em;
  margin: 0 auto;
}
section.intro .bodying .description p + p{
  margin-top: 2em;
}
@media screen and (max-width: 520px){
  section.intro{
    padding: 20px 9vw 2em 9vw;
    background-image: url("../img/intro_bg_750.svg");
    background-size: 400px;
  }
  section.intro .heading .message{
    font-size: 2rem;
  }
  section.intro .bodying{
    text-align: left;
    font-size: 1.5rem;
  }
}

/*--------------------------------------------------------------------*/

section.bookshelf{
  background-image: url("../img/bookshelf_bg_1.svg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
}
section.bookshelf .heading{
  padding-top: 5em;
  padding-bottom: 3em;
  background-image: url("../img/bookshelf_bg_2.svg"), url('../img/bookshelf_bg_3.svg');
	background-repeat: no-repeat;
	background-position: left calc(((100vw - 1200px) / 2) - 205px) bottom 3em, right calc(((100vw - 1200px) / 2) - 95px) bottom 3em;
	background-size: auto;
}
section.bookshelf .heading .index{
  margin-bottom: 2em;
}
section.bookshelf .heading .index .pre{
  background-color: #fff;
  border-radius: 5em;
  padding: .2em 1.2em;
  margin-bottom: 1.5em;
}
section.bookshelf .heading .index .pre::after{
  width: 0;
  height: 0;
  border-width: 12px 6px 0 6px;
  border-color: #fff transparent transparent transparent;
  border-style: solid;
  left: 50%;
  bottom: -11px;
  transform: translate(-50%, 0);
}
section.bookshelf .heading .index .middle{
  padding: 0 2em;
  background-image: url("../img/bookshelf_title_border_l.svg"), url("../img/bookshelf_title_border_r.svg");
	background-repeat: no-repeat;
	background-position: left center, right center;
	background-size: auto 60%;
}
section.bookshelf .heading .index .main{
  letter-spacing: .64em;
  background-image: url("../img/bookshelf_title_boxs.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto;
  padding: .3em 0 .3em .64em;
  margin: .3em 0;
}
@media screen and (max-width: 520px){
  section.bookshelf{
    background-size: 150%;
  }
  section.bookshelf .heading{
    padding: 4em 4vw 2em 4vw;
  }
  section.bookshelf .heading .index .middle{
    font-size: 2rem;
  }
  section.bookshelf .heading .index .main{
    font-size: 3rem;
	  background-size: 10em;
  }
  section.bookshelf .heading .index .logo img{
    max-width: 6em;
  }
}

/*--------------------------------------------------------------------*/

section.bookshelf .heading .selection{
  
}
section.bookshelf .heading .selection ul{
  max-width: 830px;
  margin: 0 auto;
}
section.bookshelf .heading .selection li{
  width: 48%;
  margin-bottom: 1em;
  box-sizing: border-box;
}
section.bookshelf .heading .selection li:nth-of-type(2n){
  margin-left: 1%;
}
section.bookshelf .heading .selection a{
  padding: .4em;
  display: block;
  background-color: #fff;
  border-radius: 5em;
  position: relative;
}
section.bookshelf .heading .selection a:hover{
  color: inherit;
}
section.bookshelf .heading .selection a .icon_arrow{
  position: static;
}
section.bookshelf .heading .selection a .icon_arrow::before{
  right: 1em;
  width: .5em;
  height: .5em;
}
@media screen and (max-width: 520px){
  section.bookshelf .heading .selection ul{
    flex-direction: column;
  }
  section.bookshelf .heading .selection ul li{
    width: 100%;
    font-size: 1.4rem;
  }
}

/*--------------------------------------------------------------------*/

section.bookshelf .heading .selection li.cat1{
  color: var(--blue-p5);
}
section.bookshelf .heading .selection li.cat1 .icon_arrow::before{
  border-color: var(--blue-p5);
}
section.bookshelf .heading .selection li.cat2{
  color: var(--orange-or5);
}
section.bookshelf .heading .selection li.cat2 .icon_arrow::before{
  border-color: var(--orange-or5);
}
section.bookshelf .heading .selection li.cat3{
  color: var(--green-bg5);
}
section.bookshelf .heading .selection li.cat3 .icon_arrow::before{
  border-color: var(--green-bg5);
}
section.bookshelf .heading .selection li.cat4{
  color: var(--purple-pu5);
}
section.bookshelf .heading .selection li.cat4 .icon_arrow::before{
  border-color: var(--purple-pu5);
}
section.bookshelf .heading .selection li.cat5{
  color: var(--red-re4);
}
section.bookshelf .heading .selection li.cat5 .icon_arrow::before{
  border-color: var(--red-re4);
}

/*--------------------------------------------------------------------*/

section.bookshelf .bodying{
  background-color: var(--blue-p1);
  padding-bottom: 6em;
}
section.bookshelf .bodying .shelf{
  padding: 1.5em;
  max-width: calc(100% - 6em);
  margin: 0 auto;
  background-color: var(--blue-p2);
  position: relative;
}
section.bookshelf .bodying .shelf .borad.top{
  position: static;
}
@media screen and (max-width: 1400px){
  section.bookshelf .bodying .shelf{
    max-width: calc(100% - 4em);
  }
}
@media screen and (max-width: 520px){
  section.bookshelf .bodying{
    background-color: var(--blue-p1);
    padding-bottom: 3em;
  }
  section.bookshelf .bodying .shelf{
    max-width: calc(100% - 1.4em);
    padding: .75em;
  }
}

/*--------------------------------------------------------------------*/

section.bookshelf .bodying .shelf .borad.top::before,
section.bookshelf .bodying .shelf .borad.top::after{
  width: 22px;
  height: 2em;
  border-radius: 7px 0 0 7px;
  left: -20px;
  top: 0;
  background-color: var(--blue-p2);
  z-index: 12;
}
section.bookshelf .bodying .shelf .borad.top::after{
  border-radius: 0 7px 7px 0;
  left: auto;
  right: -20px;
}
section.bookshelf .bodying .shelf .legs{
  position: static;
}
section.bookshelf .bodying .shelf .legs::before,
section.bookshelf .bodying .shelf .legs::after{
  width: 2.5em;
  height: 2em;
  border-radius: 0 0 7px 7px;
  left: 0;
  bottom: -2em;
  background-color: var(--blue-p2);
  z-index: 12;
}
section.bookshelf .bodying .shelf .legs::after{
  left: auto;
  right: 0;
}
@media screen and (max-width: 520px){
  section.bookshelf .bodying .shelf .borad.top::before,
  section.bookshelf .bodying .shelf .borad.top::after{
    width: .5em;
    height: 1.2em;
    border-radius: 3px 0 0 3px;
    left: -.5em;
    z-index: 12;
  }
  section.bookshelf .bodying .shelf .borad.top::after{
    border-radius: 0 3px 3px 0;
    left: auto;
    right: -.5em;
  }
  section.bookshelf .bodying .shelf .legs::before,
  section.bookshelf .bodying .shelf .legs::after{
    width: 1.8em;
    height: 1.8em;
    border-radius: 0 0 3px 3px;
    bottom: -1.8em;
  }
}

/*--------------------------------------------------------------------*/

section.bookshelf .bodying .shelf .box{
  background-color: #fff;
  border-radius: .875em;
  border: 2px solid #AAC8FF;
  padding: 3em;
  margin-bottom: 1em;
}
section.bookshelf .bodying .shelf .box.b5{
  margin-bottom: 0;
}
section.bookshelf .bodying .shelf .box .wrap{
  position: relative;
}
section.bookshelf .bodying .shelf .box .cat{
  position: absolute;
  right: 3em;
  top: 0;
  background-color: #333;
  width: 1.5em;
  padding: .75em 0;
  text-align: center;
}
section.bookshelf .bodying .shelf .box .index{
  margin-bottom: 1.2em;
}
section.bookshelf .bodying .shelf .box .stand{
  gap: 2%;
  align-items: stretch;
}
section.bookshelf .bodying .shelf .box .stand .item{
  width: 23%;
  max-width: 20em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
section.bookshelf .bodying .shelf .box .stand .item .title{
  margin-bottom: 2em;
  display: flex;
  justify-content: center;
  align-items: stretch;
  text-align: center;
  color: #1e1e1e;
  order: 2;
  font-size: 1.3rem;
  letter-spacing: 0;
  height: 1.75em;
  overflow: visible;
}
section.bookshelf .bodying .shelf .box .stand .item .image{
  margin-bottom: 1em;
  order: 1;
}
section.bookshelf .bodying .shelf .box .stand .item .image img{
  box-shadow: 10px 10px 0px var(--blue-p1);
}
section.bookshelf .bodying .shelf .box .stand .item .reason{
  padding: 1em;
  background-color: var(--blue-p1);
  border-radius: .5em;
  margin-bottom: 1em;
  order: 3;
}
section.bookshelf .bodying .shelf .box .stand .item .reason::after{
  width: 0;
  height: 0;
  border-width: 12px 6px 0 6px;
  border-color: var(--blue-p1) transparent transparent transparent;
  border-style: solid;
  left: 50%;
  bottom: -11px;
  transform: translate(-50%, 0);
}
section.bookshelf .bodying .shelf .box .stand .item .reason .text{
  min-height: 7em;
}
section.bookshelf .bodying .shelf .box .stand .item .who{
  order: 4;
}
section.bookshelf .bodying .shelf .box .stand .item .who .person{
  margin-right: .3em;
}
@media screen and (max-width: 520px){
  section.bookshelf .bodying .shelf .box{
    border-radius: 6px;
    padding: 3em 6vw 2em 6vw;
  }
  section.bookshelf .bodying .shelf .box .cat{
    font-size: 1.6rem;
    right: 0;
    padding: 0 1em;
    text-align: center;
    width: auto;
  }
  section.bookshelf .bodying .shelf .box .index{
    font-size: 2rem;
    margin-bottom: 1.7em;
    line-height: 1.5;
  }
  section.bookshelf .bodying .shelf .box .stand{
    flex-direction: column;
  }
  section.bookshelf .bodying .shelf .box .stand .item{
    width: 100%;
    display: grid;
    max-width: none;
    margin-bottom: 3em;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    grid-template-areas: "book title"
                         "book who"
                         "reason reason";
  }
  section.bookshelf .bodying .shelf .box .stand .item:last-of-type{
    margin-bottom: 0;
  }
  section.bookshelf .bodying .shelf .box .stand .item .title{
    grid-area: title;
    width: 100%;
    background-color: var(--blue-p1);
    border-radius: 3px;
    height: 5em;
    padding: 0 1em;
    font-size: 1.6rem;
    color: var(--blue-p5);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
  }
  section.bookshelf .bodying .shelf .box .stand .item .title br{
    display: none;
  }
  section.bookshelf .bodying .shelf .box .stand .item .image{
    grid-area: book;
    margin-right: 2em;
    margin-bottom: 2em;
  }
  section.bookshelf .bodying .shelf .box .stand .item .image img{
    height: 36vw;
  }
  section.bookshelf .bodying .shelf .box .stand .item .reason{
    grid-area: reason;
    margin-bottom: 0;
    background-color: transparent;
    border-top: 1px solid var(--blue-p1);
    border-bottom: 1px solid var(--blue-p3);
    padding: .75em;
    border-radius: 0;
  }
  section.bookshelf .bodying .shelf .box .stand .item .reason::after{
    display: none;
  }
  section.bookshelf .bodying .shelf .box .stand .item .reason .why{
    text-align: left;
    margin-bottom: .4em;
  }
  section.bookshelf .bodying .shelf .box .stand .item .reason .text{
    font-size: 1.5rem;
    min-height: 0;
  }
  section.bookshelf .bodying .shelf .box .stand .item .who{
    grid-area: who;
    display: block;
    text-align: center;
  }
  section.bookshelf .bodying .shelf .box .stand .item .who .person{
    text-align: center;
    margin-right: 0;
    margin-bottom: .5em;
  }
  section.bookshelf .bodying .shelf .box .stand .item .who .person img{
    width: 4em;
  }
  section.bookshelf .bodying .shelf .box .stand .item .who .detail{
    line-height: 1.25;
    font-size: 1.4rem;
  }
}

/*--------------------------------------------------------------------*/


section.bookshelf .bodying .shelf .box.b1 .index{
  color: var(--blue-p5);
}
section.bookshelf .bodying .shelf .box.b2 .index{
  color: var(--yellow-ye5);
}
section.bookshelf .bodying .shelf .box.b3 .index{
  color: var(--green-bg5);
}
section.bookshelf .bodying .shelf .box.b4 .index{
  color: var(--purple-pu5);
}
section.bookshelf .bodying .shelf .box.b5 .index{
  color: var(--red-re4);
}

section.bookshelf .bodying .shelf .box.b1 .cat{
  background-color: var(--blue-p5);
}
section.bookshelf .bodying .shelf .box.b2 .cat{
  background-color: var(--yellow-ye5);
}
section.bookshelf .bodying .shelf .box.b3 .cat{
  background-color: var(--green-bg5);
}
section.bookshelf .bodying .shelf .box.b4 .cat{
  background-color: var(--purple-pu5);
}

/*--------------------------------------------------------------------*/

section.howtoenter{
  padding: 60px 0;
}
section.howtoenter .heading{
  position: sticky;
  top: 0;
  padding: 2em 0;
}
section.howtoenter .heading .common_index{
  display: inline-block;
  position: relative;
  margin-bottom: 1em;
}
section.howtoenter .heading .common_index .plane{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
section.howtoenter .heading .eyecatch img{
  
}
section.howtoenter .heading .title{
  margin: 7% 0;
}
section.howtoenter .heading .function{
  
}
section.howtoenter .heading .function a{
  display: block;
}
section.howtoenter .heading .function a + a{
  margin-left: 1em;
}
section.howtoenter .heading .function .label{
  margin-bottom: 1em;
}
section.howtoenter .heading .function .blue{
  padding: .2em 1.5em;
  background-color: var(--blue-p1);
  border-radius: 5em;
}
@media screen and (min-width: 1120px) and (max-height: 700px){
  section.howtoenter .heading .common_index{
    padding-top: 0;
    background-size: 2.5em;
  }
  section.howtoenter .heading .common_index .plane{
    display: none;
  }
  section.howtoenter .heading .title{
    margin: 5% 0;
  }
}
@media screen and (max-width: 520px){
  section.howtoenter{
    padding: 30px 6vw;
  }
  section.howtoenter .container{
    flex-direction: column;
  }
  section.howtoenter .heading{
    position: static;
  }
  section.howtoenter .heading .plane img{
    height: 2em;
  }
  section.howtoenter .heading .eyecatch img{
    width: 80%;
    transform: translate(0, 0);
    height: auto !important;
  }
  section.howtoenter .heading .function a{
    padding: .5em;
    background-color: var(--blue-p1);
    border-radius: 3px;
  }
  section.howtoenter .heading .function .label{
    margin-bottom: .5em;
  }
  section.howtoenter .heading .function .blue{
    line-height: 1.5;
    border-radius: 3px;
    display: block;
    background-color: transparent;
    text-decoration: underline;
    padding: .3em;
  }
}

/*--------------------------------------------------------------------*/

section.howtoenter .container{
  gap: 7%;
}
section.howtoenter .bodying{
  padding-top: 2em;
}
section.howtoenter .bodying .item + .item{
  padding-top: 1.5em;
}
section.howtoenter .bodying .item .content{
  max-width: 21em;
  padding-top: 1em;
  padding-bottom: 1.5em;
}
section.howtoenter .bodying .item .content .index{
  margin-bottom: 1em;
}
section.howtoenter .bodying .item .content .description p + p{
  margin-top: 1.5em;
}
section.howtoenter .bodying .item .content .description .links{
  margin-top: 1em;
}
section.howtoenter .bodying .item .content .description .includes ul li{
  padding-left: 1.5em;
  background-image: url("../img/common_check.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 1em auto;
}
section.howtoenter .bodying .item .ruler{
  margin-left: 1em;
}
section.howtoenter .bodying .item .ruler .border{
  width: 1px;
  margin: 0 auto;
  margin-top: 1.5em;
  background-color: var(--blue-p5);
  flex: 1;
}
@media screen and (max-width: 520px){
  section.howtoenter .bodying{
    padding-top: 0;
    padding-left: 1em;
  }
  section.howtoenter .bodying .item .ruler .number img{
    width: 3em;
    min-width: 3em;
    max-width: 3em;
  }
}

/*--------------------------------------------------------------------*/

section.howtoenter .bodying .item.i4{
  position: relative;
}
section.howtoenter .bodying .item.i4 .content{
  padding-top: 2em;
}
section.howtoenter .bodying .item.i4 .deco{
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-40%, -10%);
}
section.howtoenter .bodying .item.i4 .deco img{
  max-width: 9.4em;
}
section.howtoenter .bodying .item.i4 .ruler .border{
  display: none;
}
@media screen and (max-width: 520px){
  section.howtoenter .bodying .item.i4 .deco{
    left: auto;
    top: auto;
    transform: translate(0, 0);
    right: 0;
    bottom: 0;
  }
  section.howtoenter .bodying .item.i4 .content{
    padding-top: 1em;
  }
}

/*--------------------------------------------------------------------*/

section.kigyojidai{
  padding: 3em 0 0 0;
}
section.kigyojidai .heading{
  background-image: url("../img/kigyojidai_bg.svg");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100%;
}
@media screen and (max-width: 520px){
  section.kigyojidai{
    padding: 2em 0;
  }
  section.kigyojidai .heading{
    padding: 0 4vw;
    background-size: 200%;
  }
  section.kigyojidai .heading .logo img{
    max-width: 12em;
  }
  section.kigyojidai .heading .index .comp{
    font-size: 3rem;
  }
}

/*--------------------------------------------------------------------*/

section.kigyojidai .bodying{
  padding: 1em 0;
  background-color: var(--blue-p1);
}
section.kigyojidai .bodying .intro{
  margin-bottom: 4em;
}
section.kigyojidai .bodying .intro p + p{
  margin-top: 1.2em;
}
@media screen and (max-width: 520px){
  section.kigyojidai .bodying{
    padding: 1em 6vw 4em 6vw;
    background-color: var(--blue-p1);
  }
  section.kigyojidai .bodying .intro{
    text-align: left;
    padding: 0 3vw;
  }
}

/*--------------------------------------------------------------------*/

section.kigyojidai .bodying .types .item{
  margin-bottom: 4em;
}
section.kigyojidai .bodying .types .item .wrap{
  gap: 3em;
}
section.kigyojidai .bodying .types .item .index{
  margin-bottom: 1.5em;
  padding: .5em 0;
}
section.kigyojidai .bodying .types .item .index .logo img{
  width: 8.5em;
}
section.kigyojidai .bodying .types .item .index .type{
  padding-left: 1.5em;
  margin-left: 1.2em;
  padding-top: .5em;
}
section.kigyojidai .bodying .types .item .index .type::before{
  width: 1px;
  height: 70%;
  background-color: var(--blue-p3);
  left: 0;
  top: 60%;
  transform: translate(0, -50%);
}
section.kigyojidai .bodying .types .item .index .type .label{
  background-color: var(--blue-p5);
  border-radius: .3em;
  line-height: 1.5;
  padding: 0 .5em .15em .5em;
  min-width: calc(5em * 1.08);
  white-space: nowrap;
  box-sizing: content-box;
}
@media screen and (max-width: 520px){
  section.kigyojidai .bodying .types .item{
    margin-bottom: 4em;
  }
  section.kigyojidai .bodying .types .item:last-of-type{
    margin-bottom: 0;
  }
  section.kigyojidai .bodying .types .item .wrap{
    flex-direction: column;
  }
  section.kigyojidai .bodying .types .item .content{
    display: grid;
    grid-template-columns: 4fr 6fr;
    grid-template-rows: auto auto;
    grid-template-areas: "index index"
                        "image text";
    gap: 0 1em;
  }
  section.kigyojidai .bodying .types .item .index{
    margin-bottom: 2em;
    grid-area: index;
    justify-content: center;
  
  }
  section.kigyojidai .bodying .types .item .index .logo img{
    width: 9em;
  }
  section.kigyojidai .bodying .types .item .image{
    text-align: center;
    margin-bottom: 0;
    grid-area: image;
  }
}
/*--------------------------------------------------------------------*/

section.kigyojidai .bodying .types .item .text{
  width: 21em;
}
section.kigyojidai .bodying .types .item .text p + p{
  margin-top: 1.2em;
}
section.kigyojidai .bodying .types .item .function{
  margin-top: 2em;
  gap: 1.5em;
}
section.kigyojidai .bodying .types .item .function a .button{
  padding: .75em 2em;
  width: 18em;
  box-sizing: border-box;
  background-color: var(--green-bg5);
  border-radius: 5em;
}
section.kigyojidai .bodying .types .item .function a .button::before{
  width: .6em;
  height: .6em;
  right: 1.4em;
}
section.kigyojidai .bodying .types .item .download{
  margin-top: 1.5em;
  gap: .75em;
}
section.kigyojidai .bodying .types .item .download img{
  height: 3em;
}
@media screen and (max-width: 520px){
  section.kigyojidai .bodying .types .item .text{
    width: auto;
    font-size: 1.4rem;
  }
  section.kigyojidai .bodying .types .item .function{
    gap: 0;
    justify-content: space-between;
  }
  section.kigyojidai .bodying .types .item .function a{
    width: 48%;
    white-space: nowrap;
  }
  section.kigyojidai .bodying .types .item .function a .button{
    padding: .7em 2em .7em 1em;
    width: auto;
    font-size: 1.4rem;
  }
  section.kigyojidai .bodying .types .item .function a .button::before{
    right: .75em;
  }
  section.kigyojidai .bodying .types .item .download{
    
  }
  section.kigyojidai .bodying .types .item .download a{
    width: 48%;
  }
  section.kigyojidai .bodying .types .item .download a img{
    width: 100%;
    max-width: none;
    height: auto;
  }
}

/*--------------------------------------------------------------------*/

@media screen and (max-width: 520px){
  section.kigyojidai .bodying .types .item.i1 .image img{
    max-width: 33vw;
  }
  section.kigyojidai .bodying .types .item.i2 .image img{
    max-width: 33vw;
  }
  section.kigyojidai .bodying .types .item.i2 .content{
    display: grid;
    grid-template-columns: 4fr 6fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "index index"
                        "image text"
                        "download download";
  }
  section.kigyojidai .bodying .types .item.i2 .download{
    grid-area: download;
    margin-top: 2em;
  }
}

/*--------------------------------------------------------------------*/

section.contact{
  padding: 3em 0;
}
section.contact .heading{
  margin-bottom: 1em;
  border-bottom: 1px solid var(--blue-p5);
}
section.contact .bodying p + p{
  margin-top: 1.5em;
}
@media screen and (max-width: 520px){
  section.contact{
    padding: 1em 9vw;
  }
}

/*--------------------------------------------------------------------*/

section.term{
  padding: 0 0 6em 0;
}
section.term .heading{
  margin-bottom: 1em;
  cursor: pointer;
  border-bottom: 1px solid var(--blue-p5);
}
section.term .bodying{
  display: none;
}
section.term .bodying p + p{
  margin-top: 1.5em;
}
section.term .bodying dl{
  margin-top: 2em;
}
@media screen and (max-width: 520px){
  section.term{
    padding: 1em 9vw 5em 9vw;
  }
}