/* width */
/*border*/
/*screenmarge*/
/*---------------------------------
	TOP
-----------------------------------*/
.mainop {
  position: relative;
  height: 85vh;
  min-height: 600px;
  max-height: 900px;
  overflow: hidden;
  background: url("../imgs/top_mainbg_op.webp") center center;
  background-size: cover; }
  @media only screen and (max-width: 600px) {
    .mainop {
      height: 650px;
      background: url("../imgs/top_mainbg_ops.webp") center center;
      background-size: cover; } }
  .mainop #particles-js {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 10; }
  .mainop .firstcopy {
    position: absolute;
    top: calc(50% - 2.5em);
    width: 100%;
    text-align: center;
    color: #FFF;
    font-size: 3rem;
    opacity: 0; }
    .mainop .firstcopy p {
      font-size: 1.3rem; }
  .mainop .firstop,
  .mainop .secop {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; }
  .mainop .firstop {
    z-index: 11;
    /*.ben10{
    	background: url("../imgs/top_mainimg_10.webp") center center no-repeat;
    	background-size:contain;
    	z-index: 20;
    }*/
    /*
    .service01_pop{
    	top:1%;
    	left:calc(50%  - 11.5em);
    	width:23em;
    	padding:2rem;
    }
    .service02_pop{
    	top:19%;
    	left:calc(50% + 24vh);
    }
    .service03_pop{
    	top:41%;
    	left:calc(50% + 37vh);
    }
    .service04_pop{
    	top:64%;
    	left:calc(50% + 30vh);
    }
    .service05_pop{
    	top:81%;
    	left:calc(50% + 18vh);
    }
    .service06_pop{
    	top:81%;
    	left:calc(50% - 37vh);
    }
    .service07_pop{
    	top:65%;
    	left:calc(50% - 49vh);
    }
    .service08_pop{
    	top:42%;
    	left:calc(50% - 50vh);
    }
    .service09_pop{
    	top:22%;
    	left:calc(50% - 39vh);
    }*/ }
    .mainop .firstop .logo,
    .mainop .firstop .readtxt,
    .mainop .firstop .ben {
      display: none; }
    .mainop .firstop .pc_p {
      visibility: hidden;
      opacity: 0; }
    .mainop .firstop .sp_p p {
      opacity: 0; }
    .mainop .firstop .logo {
      position: absolute;
      top: 42%;
      left: calc(50% - 100px);
      z-index: 33;
      margin-top: 20px; }
      .mainop .firstop .logo img {
        width: 200px; }
    .mainop .firstop .readtxt {
      position: absolute;
      top: 55%;
      left: calc(50% - 150px);
      width: 300px;
      z-index: 33;
      text-align: center;
      font-size: 1.75rem;
      color: #02216a;
      line-height: 0.8;
      font-weight: bold; }
      .mainop .firstop .readtxt span {
        font-size: 1.5rem;
        color: #666;
        font-weight: normal; }
    .mainop .firstop .ben {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 11; }
    .mainop .firstop .ben01 {
      background: url("../imgs/top_mainimg_01.webp") center center no-repeat;
      background-size: contain;
      z-index: 12; }
      @media only screen and (max-width: 600px) {
        .mainop .firstop .ben01 {
          background: url("../imgs/top_mainimg_01s.webp") center center no-repeat;
          background-size: contain; } }
    .mainop .firstop .ben02 {
      background: url("../imgs/top_mainimg_02.webp") center center no-repeat;
      background-size: contain;
      z-index: 13; }
      @media only screen and (max-width: 600px) {
        .mainop .firstop .ben02 {
          background: url("../imgs/top_mainimg_02s.webp") center center no-repeat;
          background-size: contain; } }
    .mainop .firstop .ben03 {
      background: url("../imgs/top_mainimg_03.webp") center center no-repeat;
      background-size: contain;
      z-index: 14; }
      @media only screen and (max-width: 600px) {
        .mainop .firstop .ben03 {
          background: url("../imgs/top_mainimg_03s.webp") center center no-repeat;
          background-size: contain; } }
    .mainop .firstop .ben04 {
      background: url("../imgs/top_mainimg_04.webp") center center no-repeat;
      background-size: contain;
      z-index: 15; }
      @media only screen and (max-width: 600px) {
        .mainop .firstop .ben04 {
          background: url("../imgs/top_mainimg_04s.webp") center center no-repeat;
          background-size: contain; } }
    .mainop .firstop .ben05 {
      background: url("../imgs/top_mainimg_05.webp") center center no-repeat;
      background-size: contain;
      z-index: 16; }
      @media only screen and (max-width: 600px) {
        .mainop .firstop .ben05 {
          background: url("../imgs/top_mainimg_05s.webp") center center no-repeat;
          background-size: contain; } }
    .mainop .firstop .ben06 {
      background: url("../imgs/top_mainimg_06.webp") center center no-repeat;
      background-size: contain;
      z-index: 17; }
      @media only screen and (max-width: 600px) {
        .mainop .firstop .ben06 {
          background: url("../imgs/top_mainimg_06s.webp") center center no-repeat;
          background-size: contain; } }
    .mainop .firstop .ben07 {
      background: url("../imgs/top_mainimg_07.webp") center center no-repeat;
      background-size: contain;
      z-index: 18; }
      @media only screen and (max-width: 600px) {
        .mainop .firstop .ben07 {
          background: url("../imgs/top_mainimg_07s.webp") center center no-repeat;
          background-size: contain; } }
    .mainop .firstop .ben08 {
      background: url("../imgs/top_mainimg_08.webp") center center no-repeat;
      background-size: contain;
      z-index: 19; }
      @media only screen and (max-width: 600px) {
        .mainop .firstop .ben08 {
          background: url("../imgs/top_mainimg_08s.webp") center center no-repeat;
          background-size: contain; } }
    .mainop .firstop .ben09 {
      background: url("../imgs/top_mainimg_09.webp") center center no-repeat;
      background-size: contain;
      z-index: 20; }
      @media only screen and (max-width: 600px) {
        .mainop .firstop .ben09 {
          background: url("../imgs/top_mainimg_09s.webp") center center no-repeat;
          background-size: contain; } }
    .mainop .firstop p {
      position: absolute;
      text-shadow: 2px  2px 2px #FFF, -2px  2px 2px #FFF, 2px -2px 2px #FFF, -2px -2px 2px #FFF, 2px  0px 2px #FFF, 0px  2px 2px #FFF, -2px  0px 2px #FFF, 0px -2px 2px #FFF;
      color: #02216a;
      font-weight: bold;
      z-index: 30;
      text-align: center; }
      .mainop .firstop p a {
        padding: 1em;
        display: block; }
    .mainop .firstop .service01 {
      top: 15%;
      left: calc(50% - 4em); }
    .mainop .firstop .service02 {
      top: 22%;
      left: calc(50% + 13vh); }
      @media only screen and (max-height: 750px) {
        .mainop .firstop .service02 {
          left: calc(50% + (750px * 0.13)); } }
    .mainop .firstop .service03 {
      top: 42%;
      left: calc(50% + 22vh); }
      @media only screen and (max-height: 750px) {
        .mainop .firstop .service03 {
          left: calc(50% + (750px * 0.22)); } }
    .mainop .firstop .service04 {
      top: 65%;
      left: calc(50% + 20vh); }
      @media only screen and (max-height: 750px) {
        .mainop .firstop .service04 {
          left: calc(50% + (750px * 0.2)); } }
    .mainop .firstop .service05 {
      top: 82%;
      left: calc(50% + 3.5vh); }
      @media only screen and (max-height: 750px) {
        .mainop .firstop .service05 {
          left: calc(50% + (750px * 0.035)); } }
    .mainop .firstop .service06 {
      top: 83%;
      left: calc(50% - 17vh); }
      @media only screen and (max-height: 750px) {
        .mainop .firstop .service06 {
          left: calc(50% - (750px * 0.2)); } }
    .mainop .firstop .service07 {
      top: 65%;
      left: calc(50% - 29vh); }
      @media only screen and (max-height: 750px) {
        .mainop .firstop .service07 {
          left: calc(50% - (750px * 0.29)); } }
    .mainop .firstop .service08 {
      top: 43%;
      left: calc(50% - 30vh); }
      @media only screen and (max-height: 750px) {
        .mainop .firstop .service08 {
          left: calc(50% - (750px * 0.3)); } }
    .mainop .firstop .service09 {
      top: 23%;
      left: calc(50% - 20vh); }
      @media only screen and (max-height: 750px) {
        .mainop .firstop .service09 {
          left: calc(50% - (750px * 0.2)); } }
    .mainop .firstop .benpop {
      position: absolute;
      width: 20em;
      height: 20em;
      padding: 1.5rem;
      z-index: 99;
      background: rgba(255, 255, 255, 0.9);
      /*background: rgba(0,27,106,0.9);
      box-shadow: 0 0 10px rgba(0,27,106,0.8);*/
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      border-radius: 50%;
      opacity: 0;
      top: calc(50% - 10em);
      left: calc(50% - 10em); }
    @media only screen and (min-width: 601px) {
      .mainop .firstop .sp_p {
        display: none; } }
    @media only screen and (max-width: 600px) {
      .mainop .firstop p.pc_p {
        display: none;
        visibility: hidden; }
      .mainop .firstop .ben {
        background-position: center top calc((600px - 100vw) * 0.4); }
      .mainop .firstop .logo {
        top: 35%; }
      .mainop .firstop .readtxt {
        top: 48%; }
      .mainop .firstop .service01, .mainop .firstop .service02, .mainop .firstop .service03, .mainop .firstop .service04, .mainop .firstop .service05, .mainop .firstop .service06, .mainop .firstop .service07, .mainop .firstop .service08, .mainop .firstop .service09, .mainop .firstop .service10 {
        position: relative;
        top: inherit;
        left: inherit; }
      .mainop .firstop .sp_p {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        font-size: 1.3rem;
        position: absolute;
        bottom: 0.5rem;
        width: 98%;
        margin: 0 1%; }
        .mainop .firstop .sp_p p {
          width: 48%;
          margin: 0.25rem 1%; }
          .mainop .firstop .sp_p p a {
            padding: 0.5rem;
            background: rgba(255, 255, 255, 0.8);
            height: 100%; }
          .mainop .firstop .sp_p p br {
            display: none; } }
  .mainop .secop {
    z-index: 22; }
    .mainop .secop .photo {
      display: flex;
      height: 100%; }
      .mainop .secop .photo .secimg01, .mainop .secop .photo .secimg02, .mainop .secop .photo .secimg03 {
        opacity: 0; }
      .mainop .secop .photo .secimg01 {
        background: url(../imgs/top_main_fixp01.webp) center center;
        background-size: cover;
        width: 30vw;
        /*margin-top:-50px;*/ }
      .mainop .secop .photo .secimg02 {
        background: url(../imgs/top_main_fixp02.webp) center center;
        background-size: cover;
        width: 40vw;
        /*margin-bottom:-50px;*/ }
      .mainop .secop .photo .secimg03 {
        background: url(../imgs/top_main_fixp03.webp) center center;
        background-size: cover;
        width: 30vw;
        /*margin-top:-50px;*/ }
    .mainop .secop .readtxt {
      position: absolute;
      color: #FFF;
      background: rgba(0, 27, 106, 0.8);
      padding: 1.5rem 2rem;
      right: 0;
      top: 45%;
      font-size: 1.75rem;
      z-index: 23;
      opacity: 0; }

.topcaution {
  text-align: center;
  margin: 1rem 0;
  font-size: 1.3rem; }

.appeal .ap_block.service .tbtn, .appeal .ap_block.special .tbtn, .appeal .ap_block.help .tbtn, .appeal .ap_block.word .tbtn {
  position: relative;
  margin: 3rem 0 0;
  display: inline-block; }
  .appeal .ap_block.service .tbtn a, .appeal .ap_block.special .tbtn a, .appeal .ap_block.help .tbtn a, .appeal .ap_block.word .tbtn a {
    padding: 0.75rem 3rem 0.75rem 1rem;
    display: block; }
  .appeal .ap_block.service .tbtn:before, .appeal .ap_block.special .tbtn:before, .appeal .ap_block.help .tbtn:before, .appeal .ap_block.word .tbtn:before, .appeal .ap_block.service .tbtn:after, .appeal .ap_block.special .tbtn:after, .appeal .ap_block.help .tbtn:after, .appeal .ap_block.word .tbtn:after {
    position: absolute;
    content: '';
    right: 1rem; }
  .appeal .ap_block.service .tbtn:before, .appeal .ap_block.special .tbtn:before, .appeal .ap_block.help .tbtn:before, .appeal .ap_block.word .tbtn:before {
    width: 7px;
    height: 1px;
    top: 50%; }
  .appeal .ap_block.service .tbtn:after, .appeal .ap_block.special .tbtn:after, .appeal .ap_block.help .tbtn:after, .appeal .ap_block.word .tbtn:after {
    width: 6px;
    height: 6px;
    top: calc(50% - 3px);
    transform: rotate(45deg); }

.appeal .ap_block.service .tbtn, .appeal .ap_block.word .tbtn {
  border: 1px solid #FFF; }
  .appeal .ap_block.service .tbtn:before, .appeal .ap_block.word .tbtn:before {
    background: #FFF; }
  .appeal .ap_block.service .tbtn:after, .appeal .ap_block.word .tbtn:after {
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF; }
  .appeal .ap_block.service .tbtn a, .appeal .ap_block.word .tbtn a {
    color: #FFF; }

.appeal .ap_block.special .tbtn, .appeal .ap_block.help .tbtn {
  border: 1px solid #000; }
  .appeal .ap_block.special .tbtn:before, .appeal .ap_block.help .tbtn:before {
    background: #000; }
  .appeal .ap_block.special .tbtn:after, .appeal .ap_block.help .tbtn:after {
    border-top: 1px solid #000;
    border-right: 1px solid #000; }

.appeal {
  display: flex;
  flex-wrap: wrap; }
  .appeal .ap_block {
    width: 50%;
    height: 350px;
    padding: 0 3%;
    display: flex;
    align-items: center; }
    @media only screen and (max-width: 600px) {
      .appeal .ap_block {
        width: 100%;
        display: inherit; } }
    .appeal .ap_block.service {
      background: url(../imgs/top_appeal_service.webp) center center;
      background-size: cover;
      color: #FFF; }
    .appeal .ap_block.special {
      background: url(../imgs/top_appeal_special.webp) center center;
      background-size: cover; }
    .appeal .ap_block.help {
      background: url(../imgs/top_appeal_help.webp) center center;
      background-size: cover; }
      @media only screen and (max-width: 600px) {
        .appeal .ap_block.help {
          background: url(../imgs/top_appeal_help_sp.webp) center center;
          color: #FFF; }
          .appeal .ap_block.help .tbtn {
            border: 1px solid #FFF; }
            .appeal .ap_block.help .tbtn a {
              color: #FFF; }
            .appeal .ap_block.help .tbtn:before {
              background: #FFF; }
            .appeal .ap_block.help .tbtn:after {
              border-top: 1px solid #FFF;
              border-right: 1px solid #FFF; } }
    .appeal .ap_block.word {
      background: url(../imgs/top_appeal_word.webp) center center;
      background-size: cover;
      color: #FFF; }
      @media only screen and (max-width: 600px) {
        .appeal .ap_block.word {
          background: url(../imgs/top_appeal_word_sp.webp) center center;
          color: #02216a; }
          .appeal .ap_block.word .tbtn {
            border: 1px solid #000; }
            .appeal .ap_block.word .tbtn a {
              color: #02216a; }
            .appeal .ap_block.word .tbtn:before {
              background: #000; }
            .appeal .ap_block.word .tbtn:after {
              border-top: 1px solid #000;
              border-right: 1px solid #000; } }

/*# sourceMappingURL=top.css.map */