@charset "utf-8";
/* =============================================================================
   page
   ========================================================================== */
   /* top ----------------------*/

   .p-top .u-section {
      width: calc(650/750*100%);
   }

   /* story */
   .p-top__story{
      padding-top: calc(20/1600*100vw);
      margin-top: calc(-20/1600*100vw);
   }
   .p-top__storyTitle{}
   .p-top__storyHead{}
   .p-top__storyList{}
   .p-top__storyList li{
      width: calc(540/1100*100%);
      margin-right: calc(20/1100*100vw);
      display: block;
   }
   .p-top__storyList li:last-child{
      margin-right: 0;
   }
   .p-top__storyList li:last-child .c-caption{
      margin-bottom: 0;
   }
   .p-top__storyList li img{
   }
   .p-top__storyText{
      margin-bottom: calc(70/1600*100vw);
   }
   @media only screen and (max-width: 768px) {
      .p-top__story{
         padding-top: calc(60/750*100vw);
         margin-bottom: calc(200/750*100vw);
      }
      .p-top__storyList li{
         width: 100%;
         margin-right: 0;
      }
      .p-top__storyList li img{
         max-width: unset;
         width: 100%;
      }
      .p-top__storyText{
         margin: calc(30em/18) 0 calc(70em/18);
      }
   }

   /* p-top__storyKeidai */
   .p-top__storyKeidai {
      position: relative;
      z-index: 1;
      font-size: 16px;
      height: calc(780/1600*100vw);
      margin-bottom: calc(60/1600*100vw);
    }

   @media screen and (max-width: 768px) {
      .p-top__storyKeidai {
         height: auto;
         display: block;
         font-size: calc(27*.8/750*100vw);
         padding-bottom: calc(80px*.8);
      }
   }
   @media screen and (max-width: 640px) {
      .p-top__storyKeidai {
         font-size: calc(27*.9/750*100vw);
      }
   }
   @media screen and (max-width: 415px) {
      .p-top__storyKeidai {
         font-size: calc(27/750*100vw);
         padding-bottom: calc(80px*.6);
      }
   }
  /* 左側（境内写真） */
   .p-top__storyKeidaiImg {
      position: absolute;
      bottom: 0;
      left: 0;
      width: calc(870/1600*100vw);
      height: calc(700/1600*100vw);
      background-color: #007b8b;
      z-index: 10;
   }
      @media screen and (max-width: 768px) {
         .p-top__storyKeidaiImg {
            z-index: 9;
            top:0;
            bottom: unset;
            left: unset;
            right: unset;
            width: 100%;
            height: calc(700/750*100vw);
            position: relative;
            top:unset;
            bottom: unset;
            left: unset;
            right: unset;
         }
      }

  /* 緑背景の文字ブロック */
   .p-top__storyKeidaiBody {
      position: absolute;
      top: 0;
      right: 0;
      width: calc(907/1600*100vw);
      height: calc(680/1600*100vw);
      padding: calc(18em/16);
      background-color: #007b8b;
      z-index: 9;
   }
   .p-top__storyKeidaiBody-inner {
      border: 1px solid rgba(255, 255, 255, .36);
      text-align: left;
      background: url(../../assets/images/top/greenbg.png) top left repeat;
      height: 100%;
      color: #fff;
      position: relative;
   }
   .p-top__storyKeidaiBody-inner .body {
      height: 100%;
      font-size: 18px;
      line-height: 2.0;
      letter-spacing: .05em;
      margin: auto calc(90/1600*100vw) auto calc(200/1600*100vw);
      width: calc(577/1600*100vw);
      display: table;
   }
   .p-top__storyKeidaiBody-inner .body p{
      display: table-cell;
      vertical-align: middle;
   }

   @media screen and (min-width: 1620px) {
      .p-top__storyKeidaiBody-inner .body {
         font-size: calc(18/1600*100vw);
      }
   }
   @media screen and (max-width: 1080px) {
      .p-top__storyKeidaiBody-inner .body {
         font-size: calc(18px*.9);
      }
   }
   @media screen and (max-width: 1024px) {
      .p-top__storyKeidaiBody-inner .body {
         font-size: calc(18px*.8);
      }
   }
   @media screen and (max-width: 768px) {
      .p-top__storyKeidaiBody {
         width: calc(650/750*100%);
         height: auto;
         margin: calc(-120/750*100%) auto 0;
         padding: calc(9em/16);
         position: relative;
         top:unset;
         bottom: unset;
         left: unset;
         right: unset;
         z-index: 10;
      }

      .p-top__storyKeidaiBody-inner .body {
         display: block;
         font-size: 16px;
         line-height: 1.6em;
         margin: calc(40/750*100vw);
         position: unset;
         top:unset;
         bottom: unset;
         left: unset;
         right: unset;
         width: auto;
      }
      .p-top__storyKeidaiBody-inner .body p{
         display: inline-block;
         top:0;
         transform: unset ;
         -webkit-transform: unset ;
         position: unset;
      }

   }


   /* 下層link */
   .p-top__link{
      background: url(../../assets/images/top/link_bg.jpg) no-repeat;
      background-position: center 80px;
      background-size: cover;
      font-size: 32px;
      margin-bottom: calc(150em/32);
      padding-bottom: calc(10em/32);
   }
   .p-top__linkList{
      margin-bottom: calc(130em/32);
   }
   .p-top__linkList li{
      width: calc(540/1100*100%);
      margin-right: calc(20/1100*100%);
      text-align: center;
   }
   .p-top__linkList li:last-child{
      margin-right: 0;
   }
   .p-top__linkListText{
      color: #01afc6;
      letter-spacing: .05em;
      position: relative;
   }
   .p-top__linkListText::before{
      content: '';
      display: block;
      height: calc(30em/32);
      border-right: 1px solid #01afc6;
      width: 50%;
      margin-bottom: calc(20em/32);
   }
   .p-top__linkListText::after{
      content: '';
      display: block;
      margin: calc(20em/32) auto 0;
      height: calc(10em/32);
      width: calc(56em/32);
      /* position: absolute; */
      background-image:url(../../assets/images/top/link_arrow.png);
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 100%;
   }



   @media screen and (max-width: 768px) {
      .p-top__link{
         margin-bottom: calc(100em/32);
      }
      .p-top__linkList{
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
         margin-bottom: 0;
      }

      .p-top__linkList li{
         width: calc(540/750*100vw);
         margin: 0 auto calc(90/750*100vw);
      }
      .p-top__linkList li:last-child{
         margin-right: auto;
      }
      .p-top__linkListText{
         font-size: calc(32/750*100vw);
      }

   }
   @media screen and (max-width: 640px) {
      .p-top__linkList li{
         width: 100%;
      }
      .p-top__linkListText{
         font-size: calc(32/550*100vw);
      }
   }
   @media screen and (max-width: 415px) {
      .p-top__link{
         margin-bottom: calc(60em/32);
      }
   }






   /*  precincts  */
   .p-top__precincts{
      margin-bottom: calc(110/1600*100vw);
      text-align: center;
   }
   .p-top__precinctsList{
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      text-align: left;
   }
   .p-top__precinctsList li{
      width: 32%;
      text-align: center;
      margin-bottom: calc(40/1600*100vw);
   }
   @media screen and (max-width: 768px) {
      .p-top__precinctsList li{width: 48%;}
   }




   /* video */
   .p-top__video{
      margin-bottom: calc(110/1600*100vw);
      text-align: center;
   }
   .p-top__videoList{
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      text-align: left;
   }
   .p-top__videoListItem{
      width: calc(539/1100*100%);
   }
   .p-top__videoListItem:not(:first-of-type) {
      margin-left: calc(22/1100*100%);
   }
   .p-top__videoListItem .body {
      position: relative;
      padding-top: calc(315/560*100%);
   }
   .p-top__videoListItem .body iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
   }
   @media screen and (max-width: 768px) {
      .p-top__videoListItem{width: 100%;}
      .p-top__videoListItem:not(:first-of-type) {
         margin: calc(50/1100*100%) 0 0;
      }
   }



/* access */
.p-top__access { font-size: 20px; padding: calc(77em/20) 0; background: url("../images/top/graybg02.png") top left repeat; }
.p-top__accessMap { width: 100%; position: relative; padding-top: 556px; }
.p-top__accessMap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.p-top__accessBody { margin-top: calc(68em/20); }
.p-top__accessBodyBlock:not(:first-of-type) { margin-top: calc(28em/20); }
.p-top__accessBodyBlock .title { font-size: calc(30em/20); letter-spacing: .04em; margin-bottom: calc(8em/30); }
.p-top__accessInfo { margin-top: calc(80em/20); background-color: #fff; padding: 0 calc(50/1100*100%); }
.p-top__accessInfoTitle { outline: 0; border: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: calc(42em/20); padding: calc(40em/42) 0; }
.p-top__accessInfoTitle .txt,
.p-top__accessInfoTitle .icon { display: block; }
.p-top__accessInfoTitle .txt { line-height: 1.3; }
.p-top__accessInfoTitle .icon.is-close { display: none; }
.p-top__accessInfoTitle .icon img { display: block; width: calc(24em/42); }
.p-top__accessInfoTitle.is-active .icon.is-close { display: block; }
.p-top__accessInfoTitle.is-active .icon.is-open { display: none; }
.p-top__accessInfoBody { padding-bottom: calc(65em/20); display: none; }
.p-top__accessInfoBody .block:not(:first-of-type) { margin-top: calc(36em/20); }
.p-top__accessInfoBody .block__title { font-size: calc(30em/20); letter-spacing: .06em; color: #01afc6; margin-bottom: calc(8em/30); }
.p-top__accessInfoBody .block__body { font-size: calc(17em/20); }
.p-top__accessInfoBody .block__body p:not(:first-of-type) { margin-top: calc(20em/17); }
@media screen and (max-width: 768px) {
   .p-top__accessMap { padding-top: calc(556/750*100%); }
   .p-top__accessBody { margin-top: calc(35em/20); }
}
@media screen and (max-width: 640px) {
   .p-top__accessMap { padding-top: calc(556/640*100%); }
   .p-top__accessInfoTitle { font-size: calc(42/640*100vw); }
   .p-top__accessInfoBody { padding: calc(15em/20) 0 calc(65/640*100vw); }
}
@media screen and (max-width: 415px) {
   .p-top__access { font-size: calc(20px*.9); }
   .p-top__accessMap { padding-top: 100%; }
   .p-top__accessInfo { margin-top: calc(60em/20); }
}