@charset "utf-8";
/* CSS Document */

img{max-width: 100%;}
.ump_body{background: url(../img/il_bodybg.png) center bottom no-repeat;}
.ump_top{
  position: relative;
  padding: 0 16px 100px;
}
.ump_top::after{
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: auto;
  bottom:0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center,  rgba(139,227,239,0.8) 0%,rgba(191,240,245,0.5) 50%,rgba(139,227,239,0.8) 100%);
  mix-blend-mode: color-burn;
}
.ump_captureimg{
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.ump_captureimg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1{
  position: relative;
  max-width:1100px;
  margin: auto;
  z-index: 5;
}
.ump_copy{
  position: relative;
  max-width: 732px;
  line-height: 1.5;
  margin: auto;
  padding: 24px 44px 32px;
  text-align: center;
  font-size: 1.25rem;
}
.ump_copy p:not(:last-of-type){
  padding-bottom:1em;
}

.ump_copy p span{
  font-weight:bold;
}
.ump_aboutamamo{
  background: #e6f4f6;
  width:90%;
  max-width: 1000px;
  margin: auto;
  border-radius: 20px;
  font-size: 0.875em;
  line-height: 1.8;
  text-align: left;
  color: #158500;
}
.ump_aboutamamo p{padding: 16px;}


.ump_wave{
  position: absolute;
  left: 0;
  bottom: -1px;/*変な隙間が空くのが嫌なので保険*/
  width: 100%;
  height: 150px;
  z-index: 10;
  pointer-events: none;
}
.ump_wave svg{width: 100%;}

.ump_ttlh2{
  max-width: 600px;
  height: 84px;
  margin: auto;
  padding: 32px 0 34px;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  color: #FFFFFF;
  background: url(../img/il_ttlbg.png) center 0.25em no-repeat;
}

.ump_news{
  position: relative;
  padding: 40px 16px 48px;
}
.ump_news .ump_newsblock{
  max-width: 800px;
  height: 210px;
  margin: auto;
  padding: 18px 0 18px 20px;
  border-radius: 10px 0px 0px 10px;
  background-color: #FFFFFF;
  box-shadow: 0 0 40px #A5D9DE inset;
  position:relative;
  z-index:2;
}
.ump_news ul{
  height: 176px;
  padding-right: 18px;
  overflow-y: scroll;
}
.ump_news ul li{
  display: flex;
  padding: 12px 0;
  font-size: 0.875rem;
  border-bottom: 1px dashed #7A8E9A;
}
.ump_news ul li p{width: 88px;}
.ump_news ul li h3{
  width: calc(100% - 88px);
  line-height: 1.2;
}

.ump_ilchara{
  position:absolute;
  right:-116px;
  top:0;
  z-index:1;
}

.ump_bgblue{
  background-image: url(../img/il_contentsend.png), linear-gradient(0deg, #FFFFFF 0px, #FFFFFF 18px, #CAE9EB 18px, #CAE9EB 100%);
  background-position: center bottom, left top;
  background-repeat: repeat-x, no-repeat;
}

.ump_videolist{
  position: relative;
  padding: 32px 16px 56px;

}
.ump_videolist ul{
  display: flex;
  flex-wrap: wrap;
  gap: 32px 20px;
  max-width: 1200px;
  margin: 0 auto 18px;
}
.ump_videolist ul li{
  width: 386px;
  position:relative;
}

.ump_videolist ul li div{
  position: relative;
  margin-bottom: 8px;
  aspect-ratio: 16/9;
  background-color: #BFBFBF;
  overflow: hidden;
}
.ump_videolist ul li div a{
  display: block;
  aspect-ratio: 16/9;
}
.ump_videolist ul li div a img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.2s ease;
}
.ump_videolist ul li div:not(.ump_videologo)::after{
  content: "";
  position: absolute;
  display: block;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  width: 40px;
  height: 40px;
  background: url(../img/icon_pray.svg) center center no-repeat;
  pointer-events: none;
}
.ump_videologo{
  position:absolute !important;
  left:10px;
  top:10px;
  width:64px !important;
  height:64px !important;
  pointer-events: none;
  z-index: 2;
  background-color:transparent !important;
}
.ump_videolist ul li p{
  line-height: 1.2;
  text-align: center;
  font-size: 0.87rem;
  color: #106FAD;
}
.ump_videolist div{text-align: center;}
.ump_videolist button{
  width: 200px;
  height: 40px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: bold;
  color: #616161;
  border: none;
  border-radius: 20px;
  background-color: #E7F4F5;
  box-shadow: 0px 0px 6px rgba(68, 121, 132, 0.16);
  transition: all 0.2s ease-in-out;
}

.ump_videolist > p{
  /*font-size: clamp(0.875rem, 0.708rem + 0.63vw, 1.125rem);*/
  font-size:0.875rem;
  color: #000;
  text-align:center;
  padding:0.5em 0;
  line-height:1.375;
}

/*--特番--*/
.ump_archive_spprgrm{
  width:100%;
  max-width:720px;
  margin:0 auto 48px;
}
.ump_archive_spprgrm p:not([class]){
  font-size: clamp(0.875rem, 0.708rem + 0.63vw, 1.125rem);
  font-weight: bold;
  color: #106FAD;
  text-align: center;
  padding:1em 0 0.25em;
  line-height: 1.375;
}
.ump_archive_spprgrm > div{
  width: 100%;
  aspect-ratio: 16 / 9;
}
.ump_archive_spprgrm > div iframe {
  width: 100%;
  height: 100%;
}
.ump_archive_caption{
  line-height: 1.375;
  text-align: center;
  font-size: 0.87rem;
  color: #106FAD;
  padding-top:10px;
}


/*-- 活動報告 --*/
.ump_activitywrap{
  width:100%;
  max-width:1200px;
  margin:auto;
  padding-bottom:140px;
}
.ump_activitybox{
  padding: 24px 0;
  display:flex;
  gap:0 2%;
}
.ump_activitybox > div{
  width:48%;
  max-width:624px;
}
.ump_activitybox > div p{
  line-height:1.5;
}
.ump_activityttl{
  font-size:1.25rem;
  font-weight:bold;
  padding-bottom:0.5em;
}
.ump_activitywrap .js-post_include button{
  display: block;
  width: 200px;
  height: 40px;
  margin: auto;
  text-align: center;
  font-size: 0.875rem;
  font-weight: bold;
  color: #616161;
  border: none;
  border-radius: 20px;
  background-color: #E7F4F5;
  box-shadow: 0px 0px 6px rgba(68, 121, 132, 0.16);
  transition: all 0.2s ease-in-out;
}


.ump_baloon{
  position: absolute;
  aspect-ratio: 1;
  border-radius: 100%;
  background-color: #FFFFFF;
  animation: move 8s ease-in-out infinite;
}
.ump_bln1{
  width: 34px;
  left: calc(50% - 824px);
  top: 32px;
}
.ump_bln2{
  width: 34px;
  left: calc(50% - 670px);
  top: 157px;
}
.ump_bln3{
  width: 54px;
  left: calc(50% - 754px);
  top: 226px;
}
.ump_bln4{
  width: 34px;
  left: calc(50% - 859px);
  top: 269px;
}
.ump_bln5{
  width: 76px;
  left: calc(50% - 754px);
  top: 392px;
}
.ump_bln6{
  width: 76px;
  right: calc(50% - 789px);
  top: 32px;
}
.ump_bln7{
  width: 34px;
  right: calc(50% - 642px);
  top: 196px;
}
.ump_bln8{
  width: 54px;
  right: calc(50% - 766px);
  top: 220px;
}
.ump_bln9{
  width: 34px;
  right: calc(50% - 832px);
  top: 308px;
}
.ump_bln10{
  width: 34px;
  right: calc(50% - 678px);
  top: 432px;
}
.ump_animdly1{animation-delay: 0.2s;}
.ump_animdly2{animation-delay: 0.4s;}
.ump_animdly3{animation-delay: 0.6s;}
.ump_animdly4{animation-delay: 0.8s;}
.ump_animdly5{animation-delay: 1s;}
@keyframes move{
  0%{transform: translateY(0);}
  25%{transform: translateY(10px);}
  75%{transform: translateY(-10px);}
  100%{transform: translateY(0);}
}






.ump_sponsor{padding: 24px 16px 80px;}
.ump_sponsor ul{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1000px;
  margin: auto;
  padding-top: 32px;
}
.ump_sponsor ul.ump_sp_small{
  max-width:1072px;
  padding-top:20px;
}
.ump_sponsor ul li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border:solid 1px #ccc;
}

ul.ump_sp_large li{
  /*width:32%;*/
  width: 30.5%;
}

ul.ump_sp_middle li{
  width:23.6%;/*20*/
}

ul.ump_sp_small li{
  /*width:23.6%; 最下段が4枚のとき */
  width: 18.5%; /* 最下段が5枚のとき */
}


.ump_bnwrap{padding: 0 16px;}
.ump_bnambassador{
  max-width: 120px;
  margin: 32px auto 40px;
}

.ump_bnfspj{
  max-width: 240px;
  margin: 32px auto 64px;
  border:solid 1px #106fad;
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
}

.tss_body::after{
  content: "";
  display: block;
  height: 20px;
  background: url("../img/il_border.png") center top repeat-x;
}

.tss_footer{background-color: #E4E4E4}
.tss_footer a{color: #000000;}

/*-- slick上書き --*/
.slick-prev{
  left: 5px;
  z-index: 99;
}
.slick-next {
  right: 2px;
}
.slick-slide{
  opacity:0.5;
}
.slick-current{
  opacity:1;
}

.slick-prev:before, .slick-next:before{
  color: #106fad;
  opacity: 1;
}

/*-- 202407 イベント&グロナビ追加 --*/
.ump_glnv{
  background-image:url("../img/bg_glnv.svg");
  background-size:100% auto;
  background-repeat:no-repeat;
  max-width:850px;
  width:90%;
  margin:auto;
}

.ump_glnv ul{
  display:flex;
  justify-content: space-between;
  padding:1.25em 6vw 2em;
}

.ump_glnv ul li a{
  color:#FFF;
  font-weight:bold;
  text-decoration: none;
  font-size:clamp(0.75rem, 0.599rem + 1.05vw, 1rem);
}

.ump_topbnr{
  padding-top:24px;
  max-width:600px;
  width:80%;
  margin:auto;
}

.ump_event{
  padding: 76px 16px 28px;
}
.ump_eventbox{
  max-width: 840px;
  margin: 0 auto 2em;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 30px rgba(31, 177, 132, 0.28);
  padding:4px 4px 24px;
}

.ump_eventheader{
  background-color:#A5DBF7;
  background-image:url("../img/il_sw_l.png"),url("../img/il_sw_r.png");
  background-position:left bottom,right bottom;
  background-repeat:no-repeat;
  background-size: auto 96%;
  padding:0.75em 2rem 0.5rem;
  font-size:clamp(0.875rem, 0.375rem + 2.27vw, 2.125rem);
  color: #fff;
  text-shadow: 0px 0px 6px #005d7a;
  text-align:center;
  line-height:1.5;
}

.ump_eventdate{
  font-size:clamp(0.75rem, 0.523rem + 1.14vw, 1.375rem);
  font-weight: bold;
  color: #CB1973;
  text-align:center;
  padding:0.75em 0 0.5em;
}
.ump_eventtxt{
  margin-bottom: 12px;
  line-height: 1.375;
  font-size:0.875em;
  text-align: center;
  padding:0 1em;
}
.ump_eventtxt span{
  display:block;
}

.ump_eventbox a{
  display:flex;
  border: 1px solid #CB1973;
  align-content: center;
  justify-content: center;
  max-width: 294px;
  width: 100%;
  text-decoration: none;
  font-size:clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem);
  font-weight: bold;
  color: #FFFFFF;
  border-radius: 20px;
  background-color: #CB1973;
  box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.16);
  transition: all 0.2s ease;
  margin:auto;
  padding:1em 0;
}

/*-- リンクOFF --*/
.ump_eventbox a.ump_nolink{
  pointer-events:none;
  background-color: #999;
  border: 1px solid #999;
}


@media screen and (min-width:801px){
  .ump_videolist ul li div a:hover img{transform: scale(1.2);}
  .ump_videolist button:hover,
  .ump_activitywrap .js-post_include button:hover{background-color: #B1DEFC;}
  .ump_eventbox a:hover{
    color: #CB1973;
    background-color: #FFFFFF;
    border: 1px solid #CB1973;
  }
  .ump_bnfspj:hover{
    transform: translate(3px, 3px);
    box-shadow:none;
  }
  .ump_sponsor a img:hover,
  .ump_activityslide_thumb img:hover,
  .ump_bnambassador img:hover{
    opacity:0.7;
    cursor:pointer;
  }
  /*-- 活動報告 --*/
  .ump_activitybox_l{
    order:1;
  }
  .ump_activitybox_r{
    order:2;
  }
}






@media screen and (max-width:1050px){/*1000+32+スクロールバー17 (デザイン依存)*/
  .ump_videolist ul{gap: 32px 2%;}
  .ump_videolist ul li{width: 32%;}
  .ump_videolist ul li p{font-size: clamp(0.875rem, 0.708rem + 0.63vw, 1.125rem);}/*14-18 420-1050*/
}
@media screen and (max-width:890px){/*840+32+スクロールバー17 (デザイン依存)*/
  .ump_date{font-size: max(1.125rem, 3.37vw);}
  .ump_eventtxt{font-size: clamp(0.75rem, 0.527rem + 0.85vw, 1rem);}/*12-16 420-890*/
}

@media screen and (max-width:800px){
  .ump_body{padding-bottom: calc(17.5vw + 32px);}
  .ump_top{padding-bottom:64px;}
  .ump_video{display: none;}
  .ump_captureimg{display: block;}
  .ump_captureimg .slick-list,
  .ump_captureimg .slick-track,
  .ump_captureimg .slick-slide div{height: 100%;}
  h1{
    width: 120%;
  }
  .ump_copy{
    width: 100%;
    padding: 3.5% 2.5%;
    font-size: clamp(0.875rem, 0.599rem + 1.05vw, 1.125rem);/*14-18 420-800*/
  }
  
  .ump_ilchara{
    display:none;
  }

  .ump_copy p br.dsp_pc{
    display:none;
  }
  .ump_aboutamamo {
    background: linear-gradient(180deg, #fff 0%, #fff 10%, #E6F4F6 10%, #E6F4F6 100%);
    border-radius: 0;
  }

  .ump_videolist ul{gap: 32px 4%;}
  .ump_videolist ul li{width: 48%;}
  .ump_videologo{
    width:32px;
    height:32px;
    left:0;
    top:0;
  }
  .ump_archive_caption{
    text-align:left;
  }
  .ump_archive_caption br{
    display:none;
  }

  .ump_sp_smallwrap{
    display: flex;
    flex-wrap:wrap;
    padding:8px 0 16px;
    gap:8px 10px;
    justify-content: center;
  }
  .ump_sponsor{
    padding-bottom: 1em;
    padding-top: 0;
  }
  .ump_sponsor ul{
    gap:10px;
  }
  .ump_sponsor ul.ump_sp_small{
    display:contents;
  }
  .ump_sponsor ul.ump_sp_small {
    padding-top:8px;
  }
  ul.ump_sp_large li{
    width:46%;
  }
  ul.ump_sp_middle li{
    width:34%;
  }
  
  ul.ump_sp_small li{
    width:34%;
  }
  
  .ump_bnambassador{
    width:16%;
    margin:1em auto;
  }
  .ump_bnfspj{
    width:30%;
    margin:1em auto;
    padding-top: 1px;
  }
  
  /*-- 活動報告 --*/
  .ump_activitywrap{
    padding:0 16px;
  }
  .ump_activitybox{
    flex-direction: column;
  }
  .ump_activitybox > div{
    width:100%;
  }
  .ump_activitybox > div p{
    font-size:0.875rem;
  }
  .ump_activitybox_r{
    display: contents;
  }
  .ump_activityttl{
    order:1;
    font-size:1rem;
  }
  .ump_activitybox_l{
    order:2;
  }
  .ump_activitytxt{
    order:3;
    padding:0.5em 0 80px;
  }
  
  /*--202407 イベントバナー設置 --*/
  .ump_glnv {
    background-image:none;
    background-size: 100% auto;
    background-repeat: no-repeat;
    max-width: 850px;
    width: 100%;
    margin: auto;
    background-color: #ebebeb;
  }
  .ump_glnv ul {
    display: flex;
    justify-content: space-between;
    padding: 1.25em 3vw;
  }
  .ump_glnv ul li a {
    color: #003b01;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight:normal;
  }
  
  .ump_eventtxt span{
    display:inline;
  }
    
}

@media screen and (max-width:400px){
  .ump_glnv ul{
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1.25em 6.5vw;
  }
}



