@charset "utf-8";







.main_box {

  background-color: rgb(255,248,235);

  background-image: url(../images/bg.jpg);

  background-size: contain;

  background-position: center top;

  background-repeat: no-repeat;

}



@media screen and (max-width: 767px) {

  #main_box {

    padding-right: 0;

    padding-left: 0;

  }

}





/* title ----------------- */



#title {

}



#title .title_inner {

  position: relative;

  padding-top: calc(586 / 1550 * 100%);

}

#title .title_inner > h2 {

  position: absolute;

  top: calc(195 / 586 * 100%);

  right: calc(((1550 - 1190) / 2 ) / 1550 * 100%);

  width: calc(500 / 1550 * 100%);

  height: calc(84 / 586 * 100%);

  background-image: url(../images/title_text.svg);

}

@media screen and (max-width: 1550px) {

  #title .title_inner > h2 {

    right: calc(50vw - 595px);

  }

}

@media screen and (max-width: 1190px) {

  #title .title_inner > h2 {

    right: 0;

  }

}

@media screen and (max-width:767px) {

  #title .title_inner > h2 {

    width: calc(378 / 750 * 100%);

    height: calc(50 / 284 * 100%);

    top: 33%;

  }

}







/* ---- box01 ---- */

.box01 {

  

}



.navi_box01 {

  position: relative;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

}

.navi_box01 > li:first-child {

  position: absolute;

  bottom: calc(100% + 16px);

  left: 0;

  width: 100%;

  padding-top: calc(154 / 1190 * 100%);

  background-image: url(../images/img_jihanki_kun.png);

  background-repeat: no-repeat;

  background-position: left top;

  background-size: contain;

}

.navi_box01 > li:first-child > span {

  display: block;

  position: absolute;

  left: calc(163 / 1190 * 100%);

  top: calc(-11 / 154 * 100%);

  background-image: url(../images/bg_hukidashi.svg);

  width: calc(393 / 1190 * 100%);

  height: calc(147 / 154 * 100%);

}

.navi_box01 > li:first-child > span > span {

  position: absolute;

  top: 27%;

  left: 22%;

  font-size: 25px;

  line-height: 38px;

  font-weight: 700;

  text-align: center;

}

.navi_box01 > li:first-child {

  left: 0;

  opacity: 1;

}

.navi_box01 > li:first-child > span {

  opacity: 1;

}

._csstrans .navi_box01 > li:first-child {

  transition: left .6s cubic-bezier(.165, .84, .44, 1),

           opacity .6s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .navi_box01 > li:first-child > span {

  transition: opacity .4s .2s cubic-bezier(.165, .84, .44, 1);

}

.navi_box01._start > li:first-child {

  left: 0;

  opacity: 1;

}

.navi_box01._start > li:first-child > span {

  opacity: 1;

}



.navi_box01 > li:not(:first-child) {

  position: relative;

  width: calc(385 / 1190 * 100%);

  padding-top: calc(261 / 1190 * 100%);

}

._csstrans .navi_box01 > li:nth-child(2){

  transition: top .6s .8s cubic-bezier(.165, .84, .44, 1),

           opacity .6s .8s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .navi_box01 > li:nth-child(3){

  transition: top .6s 1s cubic-bezier(.165, .84, .44, 1),

           opacity .6s 1s cubic-bezier(.165, .84, .44, 1);}

._csstrans .navi_box01 > li:nth-child(4){

  transition: top .6s 1.2s cubic-bezier(.165, .84, .44, 1),

           opacity .6s 1.2s cubic-bezier(.165, .84, .44, 1);

}

.navi_box01 > li:not(:first-child) {

  opacity: 1;

  top: 0;

}

.navi_box01._start > li:not(:first-child) {

  opacity: 1;

  top: 0;

}



.navi_box01 > li > a {

  display: block;

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  font-size: 20px;

  line-height: 1.4;

  border-radius: 30px;

  background-color: rgb(247,176,0);

}

._csstrans .navi_box01 > li > a {

  transition: top .4s cubic-bezier(.165, .84, .44, 1),

    background-color .4s cubic-bezier(.165, .84, .44, 1);

}

.navi_box01 > li > a:hover {

  top: 3px;

  background-color: rgb(255 201 78);

}



.navi_box01 > li > a::before,

.navi_box01 > li > a::after {

  position: absolute;

  content: '';

  left: 50%;

  transform: translate3d(-50%, 0, 0);

  background-position: center center;

  background-repeat: no-repeat;

  background-size: contain;

}

.navi_box01 > li.nav-11 > a::before {

  background-image: url(../images/icon_navi01_01.svg);

  width: calc(139 / 385 * 100%);

  height: calc(131 / 261 * 100%);

  bottom: calc(93 / 261 * 100%);

}

.navi_box01 > li.nav-12 > a::before {

  background-image: url(../images/icon_navi01_02.svg);

  width: calc(113 / 385 * 100%);

  height: calc(124 / 261 * 100%);

  bottom: calc(97 / 261 * 100%);

}

.navi_box01 > li.nav-13 > a::before {

  background-image: url(../images/icon_navi01_03.svg);

  width: calc(168 / 385 * 100%);

  height: calc(125 / 261 * 100%);

  bottom: calc(99 / 261 * 100%);

}



.navi_box01 > li > a::after {

  background-image: url(/common/images/arrow_bottom_w.svg);

  width: 21px;

  height: 15px;

  bottom: 9px;

}

.navi_box01 > li > a > span {

  display: block;

  position: absolute;

  bottom: calc(43 / 261 * 100%);

  width: 100%;

  padding-right: 16px;

  padding-left: 16px;

  text-align: center;

}



@media screen and (max-width:920px) {

  .navi_box01 > li:first-child > span > span {

    line-height: 1.5;

    font-size: calc(3.9474vw - 11.3158px);



  }

}



@media screen and (max-width:767px) {

  .box01 .navi_box01 {

    flex-wrap: wrap;

    justify-content: center;

    margin-top:30px;

  }

  .box01 .navi_box01 > li:first-child {

    left: 5%;

    width: 90%;

    bottom: calc(100% + 4px);

    padding-top: calc(200 / 1190 * 100%);

  }

  .navi_box01 > li:first-child > span {

    width: calc(393 / 640 * 80%);

    height: calc(147 / 120 * 80%);

    left: 20%;

    top: -5%;

    background-repeat: no-repeat;

  }

  .navi_box01 > li:first-child > span > span {

    top: 22%;

    left: 17%;

    font-size: 14px;

    line-height: 1.4;

  }

  .navi_box01 > li:not(:first-child) {

    width: 90%;

    margin-bottom: 12px;

    border-radius: 16px;

  }

  .navi_box01 > li > a > span {

    text-align: left;

    padding-left: 90px;

  }

  .navi_box01 > li > a::before {

    left: 24px;

    transform: translate3d(0, 50%, 0);

  }

  .navi_box01 > li.nav-11 > a::before {

    width: calc(139 / 1280 * 120%);

    height: calc(131 / 312 * 120%);

    bottom: 50%;

  }

  .navi_box01 > li.nav-12 > a::before {

    width: calc(113 / 1280 * 120%);

    height: calc(124 / 312 * 120%);

    bottom: 50%;

  }

  .navi_box01 > li.nav-13 > a::before {

    width: calc(168 / 1280 * 120%);

    height: calc(125 / 312 * 120%);

    bottom: 50%;

  }

  .navi_box01 > li > a::after {

    left: auto;

    right: 16px;

    bottom: 50%;

    transform: translate3d(0, 50%, 0) rotate(-90deg);

  }

}



/* ---- box02 ---- */

.box02 .title {

  position: relative;

  margin-top: calc(125 / 1190 * 100%);

  padding-bottom: calc(10 / 1190 * 100%);

  text-align: center;

}

.box02 .title::after {

  position: absolute;

  left: 50%;

  top: 100%;

  transform: translate3d(-50%, 0, 0);

  width: 455px;

  height: 18px;

  background-image: url(../images/wave_line_o.svg);

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center center;

  content: '';

}

.box02 .title > span {

  font-size: 34px;

  line-height: 1.5;

  font-weight: 700;

  letter-spacing: .1em;

}



.box02 .title {

  top: 100px;

  opacity: 0;

}

._csstrans .box02 .title {

  transition: top .6s cubic-bezier(.165, .84, .44, 1),

           opacity .6s cubic-bezier(.165, .84, .44, 1);

}

.box02._start .title {

  top: 0;

  opacity: 1;

}



@media screen and (max-width:767px) {

  .box02 .title > span {

    font-size: 20px;

  }

  .box02 .title::after {

    width: 227px;

    height: 9px;

  }

}



.navi_box02 {

  display: flex;

  justify-content: space-between;

  margin-top: calc(90 / 1190 * 100%);

  max-width: 992px;

  margin-right: auto;

  margin-left: auto;

}

.navi_box02 > li {

  position: relative;

  width: calc(278 / 992 * 100%);

  top: 100px;

  opacity: 0;

}

._csstrans .navi_box02 > li:nth-child(1) {

  transition: top .6s .4s cubic-bezier(.165, .84, .44, 1),

           opacity .6s .4s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .navi_box02 > li:nth-child(2) {

  transition: top .6s .6s cubic-bezier(.165, .84, .44, 1),

           opacity .6s .6s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .navi_box02 > li:nth-child(3) {

  transition: top .6s .8s cubic-bezier(.165, .84, .44, 1),

           opacity .6s .8s cubic-bezier(.165, .84, .44, 1);

}

.box02._start .navi_box02 > li {

  top: 0;

  opacity: 1;

}





.navi_box02 > li > a {

  display: block;

  position: relative;

  width: 100%;

  top: 0;

  padding-top: 100%;

  border-radius: 50%;

  border: 1px rgb(247, 176, 0) solid;

  background-color: rgb(255,255,255);

  box-shadow: 3px 3px rgb(255,255,255);

}

._csstrans .navi_box02 > li > a {

  transition: top .4s cubic-bezier(.165, .84, .44, 1),

    background-color .4s cubic-bezier(.165, .84, .44, 1);

}

.navi_box02 > li > a:hover {

  top: 3px;

  background-color: rgb(251, 237, 188);

  box-shadow: 1px 1px rgb(255,255,255);

}





.navi_box02 > li > a > span {

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.navi_box02 > li > a > span::before,

.navi_box02 > li > a > span::after {

  display: block;

  position: absolute;

  left: 50%;

  transform: translate3d(-50%, 0, 0);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: contain;

  content: '';

}

.navi_box02 > li.nav-21 > a > span::before {

  background-image: url(../images/icon_navi02_01.svg);

  width: calc(107 / 278 * 100%);

  height: calc(77 / 278 * 100%);

  bottom: calc(148 / 278 * 100%);

}

.navi_box02 > li.nav-22 > a > span::before {

  background-image: url(../images/icon_navi02_02.svg);

  width: calc(107 / 278 * 100%);

  height: calc(75 / 278 * 100%);

  bottom: calc(149 / 278 * 100%);

}

.navi_box02 > li.nav-23 > a > span::before {

  background-image: url(../images/icon_navi02_03.svg);

  width: calc(77 / 278 * 100%);

  height: calc(88 / 278 * 100%);

  bottom: calc(152 / 278 * 100%);

}



.navi_box02 > li > a > span::after {

  background-image: url(/common/images/arrow_bottom_o.svg);

  width: 21px;

  height: 16px;

  bottom: calc(27 / 278 * 100%);

}

.navi_box02 > li > a > span > span {

  display: block;

  position: absolute;

  bottom: calc(62 / 278 * 100%);

  width: 100%;

  text-align: center;

  font-size: 21px;

  line-height: 1.33;

}





@media screen and (max-width:767px) {

  .navi_box02 {

    flex-wrap: wrap;

    justify-content: center;

  }

  .navi_box02 > li {

    width: 140px;

    margin-right: 5px;

    margin-left: 5px;

  }

  .navi_box02 > li:last-child {

    margin-top: -10px;

  }

  .navi_box02 > li > a > span > span {

    font-size: 14px;

  }

}



/* ---- box03 ---- */

.box03 {

  position: relative;

  overflow: hidden;

}

.box03::before {

  display: block;

  position: absolute;

  width: 150%;

  height: 100%;

  left: -25%;

  top: 0;

  transform: matrix(1, 0, -0.218, 1, 0, 0);

  background-image: linear-gradient(to right, rgb(247,176,0), rgb(247,176,0) 44px, rgb(248,183,39) 44px, rgb(248,183,39) 66px);

  background-size: 66px 1px;

  background-repeat: repeat;

  content: '';

}

.box03 > div {

  position: relative;

}

.box03 > div::before,

.box03 > div::after {

  display: block;

  position: absolute;

  left: 0;

  width: 100%;

  padding-top: calc(86 / 1550 * 100%);

  background-image: url(../images/bg_wave.svg);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

  content: '';

}

.box03 > div::before {

  top: -2px;

  z-index: 200;

}

.box03 > div::after {

  bottom: -2px;

  z-index: 200;

  transform: rotate(180deg);

}

.box03_i {

  position: relative;

}

.box03_i::before,

.box03_i::after {

  display: block;

  position: absolute;

  left: 0;

  width: 100%;

  padding-top: calc(53 / 1550 * 100%);

  background-image: url(../images/bg_wave_line.svg);

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

  content: '';

}

.box03_i::before {

  top: 3%;

  z-index: 210;

}

.box03_i::after {

  bottom: 3%;

  z-index: 210;

}

.box03_i .more_info_box {

  position: relative;

  padding-top: calc(115 / 1190 * 100%);

  padding-bottom: calc(135 / 1190 * 100%);

}

.box03_i .more_info_box > .title {

  position: relative;

  padding-bottom: calc(15 / 1190 * 100%);

  font-size: 37px;

  font-weight: 700;

  text-align: center;

}

.box03_i .more_info_box > .title::after {

  position: absolute;

  left: 50%;

  top: 100%;

  transform: translate3d(-50%, 0, 0);

  width: 455px;

  height: 18px;

  background-image: url(../images/wave_line_w.svg);

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center center;

  content: '';

}



.box03_i .more_info_box > .title {

  top: 100px;

  opacity: 0;

}

._csstrans .box03_i .more_info_box > .title:nth-child(1) {

  transition: top .6s cubic-bezier(.165, .84, .44, 1),

           opacity .6s cubic-bezier(.165, .84, .44, 1);

}

.box03._start .box03_i .more_info_box > .title {

  top: 0;

  opacity: 1;

}





@media screen and (max-width:767px) {

  .box03::before {

    background-image: linear-gradient(to right, rgb(247,176,0), rgb(247,176,0) 22px, rgb(248,183,39) 22px, rgb(248,183,39) 33px);

    background-size: 33px 1px;

  }

  .box03_i::before {

    top: 1%;

  }

  .box03_i::after {

    bottom: 1%;

  }

  .box03_i .more_info_box > .title {

    font-size: 20px;

  }

  .box03_i .more_info_box > .title::after {

    width: 227px;

    height: 9px;

  }

}







.navi_box03 {

  display: flex;

  justify-content: space-between;

}

.navi_box04 {

  display: flex;

  /* justify-content: space-between; */

  justify-content: center;

}

.navi_box03 > li,

.navi_box04 > li {

  position: relative;

  width: calc(585 / 1190 * 100%);

  /* border-radius: 50px;*/

  overflow: hidden;

  padding-top: calc(181 / 1190 * 100%);

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center center;

}

.box03 .navi_box03 > li,

.box04 .navi_box04 > li {

  top: 100px;

  opacity: 0;

}

._csstrans .navi_box03 > li:nth-child(1),

._csstrans .navi_box04 > li:nth-child(1) {

  transition: top .6s .4s cubic-bezier(.165, .84, .44, 1),

           opacity .6s .4s cubic-bezier(.165, .84, .44, 1);

}

._csstrans .navi_box03 > li:nth-child(2),

._csstrans .navi_box04 > li:nth-child(2) {

  transition: top .6s .6s cubic-bezier(.165, .84, .44, 1),

           opacity .6s .6s cubic-bezier(.165, .84, .44, 1);

}

.box03._start .navi_box03 > li,

.box04._start .navi_box04 > li {

  top: 0;

  opacity: 1;

}







.navi_box04 > li {

  padding-top: calc(283 / 1190 * 100%);

}

.navi_box03 > li.nav-31 {

  background-image: url(../images/navi03_01.png);

}

.navi_box03 > li.nav-32 {

  background-image: url(../images/navi03_02.png?ud=211216);

}

.navi_box04 > li.nav-41 {

  background-image: url(../images/navi04_01.png);

}

.navi_box04 > li.nav-42 {

  background-image: url(../images/navi04_02.png);

}





.navi_box03 > li > .item,

.navi_box04 > li > .item {

  display: flex;

  justify-content: center;

  align-items: center;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border-radius: 50px;

  background-color: rgba(0,12,24,0.43);

  color: rgb(255,255,255);

  font-size: 150%;

  line-height: 1.4;

}

._csstrans .navi_box03 > li > .item,

._csstrans .navi_box04 > li > .item {

  transition: background-color .6s cubic-bezier(.165, .84, .44, 1);

}

.navi_box03 > li > a:hover,

.navi_box04 > li > a:hover {

  background-color: rgba(0,12,24,0.66);

}

.navi_box03 > li > ._blank,

.navi_box04 > li > ._blank {

}

.navi_box04 > li > a::after,

.navi_box03 > li > a::after {

  display: block;

  position: absolute;

  right: 35px;

  bottom: 27px;

  width: 24px;

  height: 31px;

  background-image: url(/common/images/arrow_right_w.svg);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: contain;

  content: '';

}

@media screen and (max-width:1254px) {

  .navi_box03 > li > .item,

  .navi_box04 > li > .item {

    border-radius: calc(50 / 1254 * 100vw);

  }

  .navi_box04 > li > a::after,

  .navi_box03 > li > a::after {

    right: calc(2.2634vw + 6.6173px); /* 35 -> 24 */

    bottom: calc(1.8519vw + 3.7778px); /* 27 -> 18 */

    width: calc(1.6461vw + 3.358px); /* 24 -> 16 */

    height: calc(2.2634vw + 2.6173px); /* 31 -> 20 */

  }

}



@media screen and (max-width:767px) {

  .navi_box03,

  .navi_box04 {

    flex-wrap: wrap;

  }

  .navi_box03 > li,

  .navi_box04 > li {

    width: 100%;

    margin-bottom: 16px;

    padding-top: calc(181 / 585 * 100%);

  }

  .navi_box04 > li {

    padding-top: calc(283 / 585 * 100%);

  }

  .navi_box03 > li > .item,

  .navi_box04 > li > .item {

    text-align: center;

    border-radius: calc(50 / 627 * 100vw);

  }

  .navi_box04 > li > a::after,

  .navi_box03 > li > a::after {

    right: 24px;

    bottom: 18px;

    width: 16px;

    height: 20px;

  }

}





/* ---- box04 ---- */

.box04 {

  padding-bottom: calc(115 / 1550 * 100%);

}

.box04 .title {

  position: relative;

  margin-top: calc(110 / 1190 * 100%);

  padding-bottom: calc(10 / 1190 * 100%);

  text-align: center;

}

.box04 .title::after {

  position: absolute;

  left: 50%;

  top: 100%;

  transform: translate3d(-50%, 0, 0);

  width: 455px;

  height: 18px;

  background-image: url(../images/wave_line_o.svg);

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center center;

  content: '';

}

.box04 .title  {

  top: 100px;

  opacity: 0;

}

._csstrans .box04 .title  {

  transition: top .6s cubic-bezier(.165, .84, .44, 1),

           opacity .6s cubic-bezier(.165, .84, .44, 1);

}

.box04._start .title {

  top: 0;

  opacity: 1;

}



.box04 .title > span {

  font-size: 42.3px;

  line-height: 1.5;

  font-weight: 700;

  letter-spacing: .1em;

}



@media screen and (max-width:767px) {

  .box04 .title::after {

    width: 227px;

    height: 9px;

  }

  .box04 .title > span {

    font-size: 24px;

  }

}







/* ---- box05 ---- */



.box05 {

  background-color: rgb(255,255,255);

  padding-top: calc(108 / 1550 * 100%);

  padding-bottom: calc(119 / 1550 * 100%);

}

.box05 a {

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

  margin-right: auto;

  margin-left: auto;

  width: 90%;

  max-width: 689px;

  height: 91px;

  padding-right: 40px;

  padding-left: 40px;

  text-align: center;

  font-size: 23.2px;

  border-radius: 8px;

  background-color: rgb(247,176,0);

}

._csstrans .box05 a {

  transition: top .4s cubic-bezier(.165, .84, .44, 1),

    background-color .4s cubic-bezier(.165, .84, .44, 1);

}

.box05 a:hover {

  background-color: rgb(255 201 78);

}



.box05 a::after {

  position: absolute;

  top: 50%;

  right: 31px;

  transform: translate3d(0, -50%, 0);

  width: 13px;

  height: 16px;

  background-image: url(/common/images/arrow_right_w.svg);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: contain;

  content: '';

}

.box05 a > span {

  display: block;

}



@media screen and (max-width:767px) {

  .box05 a {

    height: 60px;

    font-size: 16px;

  }

}