.page_ttl{display:none!important}

/* ==========================================================================
   Main Visual
   ========================================================================== */

main.main_contents {
	padding: 0!important;
}

section.main_visual{
  background:#3982e3 url(../../img/product/community/top-background.png) no-repeat bottom/100%;
  padding:20px 0 0!important
}
.main_visual #main_h1{position:relative;z-index:0;max-width:300px;margin:0 auto}
.main_visual #main_h1 h1{
  text-align:center!important;
  color:#fff;
  border:3px solid #fff;
  border-radius:10px;
  padding:25px 10px 55px;
  background:rgba(0,142,245,.2);
  backdrop-filter:blur(10px)
}
.main_visual #main_h1::before,
.main_visual #main_h1::after,
.main_visual #main_h1 h1::before,
.main_visual #main_h1 h1::after{
  position:absolute;display:block;content:""
}
.main_visual #main_h1::before{
  z-index:5;top:-10px;left:-10px;width:30px;height:30px;
  background:#3982e3;border:5px solid #fff;border-radius:30px
}
.main_visual #main_h1::after{
  right:-10px;bottom:-10px;width:30px;height:30px;
  background:#3982e3;border:5px solid #fff;border-radius:30px
}
.main_visual #main_h1 h1::before{left:-10px;bottom:-10px;width:25px;height:25px;background:#fff}
.main_visual #main_h1 h1::after{top:-10px;right:-10px;width:25px;height:25px;background:#fff}
.main_visual #main_h1 h1 img{
  display:block;
  width:100%;
  max-width:200px;
  height:auto;
  margin:0 auto;
}
.main_visual #main_h1 h1 span{display:block;font-size:1em}

.top_cta{display:flex;justify-content:center;padding:60px 0}
.top_cta a{
  display:inline-block;
  padding:15px 40px;
  background:#fd9134;
  color:#fff;
  text-decoration:none;
  font-size:1.4em;
  font-weight:700;
  border:2px solid #fff;
  border-radius:4px;
  transition:background-color .3s ease,color .3s ease;
}
.top_cta a:hover{background:#fff;color:#12347c!important; transform: translatey(2px)!important;}

/* ==========================================================================
   Shared
   ========================================================================== */
.community_title{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  font-family:"Zen Old Mincho",serif;
  color:#000!important;
  font-size:2em!important;
  padding-bottom:30px;
  margin:30px auto!important
}
.community_title::after{
  display:block;content:"";width:140px!important;height:8px!important;
  background:#d9d9da!important;margin-top:15px!important
}
.stuff_title{
  display:flex;
  margin-top:40px;
  font:900 2em "Zen Old Mincho",serif
}
.stuff_title span{
  display:block;
  text-align:left;
  font-size:.4em;
  padding-top:5px;
  margin-right:10px
}
.add_blue{color:#2a6da2}

/* ==========================================================================
   Greeting
   ========================================================================== */
#greeting{
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:50px 0;
  font-family:"Zen Old Mincho",serif;
  background:#f8f8f8;



}
#greeting figure{ max-width:450px; 	z-index: 5;
	margin: 30px auto!important; }
#greeting figure img{
  border-radius:10px;
  box-shadow:5px 5px 21px -10px #777
}
#greeting>div{
  width:100%;
  max-width:1000px;
  margin:80px 30px;
  padding:10px 20px
}
#greeting>div h2{font-size:1.8em!important;color:#000!important}
#greeting>div .greeting_txt{
  text-align:justify;
  font-family:"M PLUS 1p",sans-serif;
  font-weight:600;
  line-height:2em
}
#greeting>div .greeting_txt p{padding:10px 0}


  #greeting>div{margin:0;padding:0}
  #greeting>div h2{
    margin-bottom:24px!important;
    font-size:clamp(2.8rem,3vw,4rem)!important;
    line-height:1.5!important
  }
  #greeting>div .greeting_txt{
    padding:30px;
    font-weight:600;
    line-height:2;
    color:#30384a;
    background:#fff;
    border:4px double #ccc
  }

  #greeting figure{max-width:460px;margin:0;padding:20px}


@media print,screen and (max-width:1199px){
  .top-tab-input,.community_wrap,.massage_wrap,#subscribe{flex-direction:column}
  .top-tab-block,.slider-group,.slider-container,
  #community_merit .right_images{max-width:100%}
  #community_merit .right_images{width:100%}
  #community_merit .right_images li:first-child,
  #community_merit .right_images li:nth-child(2),
  #community_merit .right_images li:nth-child(3){justify-content:center}
  .massage_wrap::before{display:none}
}

@media print,screen and (max-width:919px){
  .header{
    padding:18px 0;
    box-shadow:0 8px 24px rgba(18,52,124,.08)
  }

  #main_h1 {
    padding:20px;
  }

  #greeting,#subscribe,.massage_wrap{
    padding-left:20px;
    padding-right:20px
  }

  #greeting {
    display:flex;
    flex-direction:column;
	padding: 0;
	justify-content: center!important;
  }

  .about_content {
    border-radius:0!important;
  }

  #greeting > div {
    padding:10px;
    margin:0;
  }


  .about_content ul{grid-template-columns:1fr}
  .slider-container ul.slider-list{aspect-ratio:16/10}

  .community_title:after {
    display:none!important
  }

  #subscribe {
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }

  .main_visual #main_h1::before{
    top:10px;left:10px;
  }
  .main_visual #main_h1::after{
    right:10px;
    bottom:10px;
  }
}

#greeting + .ta-c {
  padding-bottom: 80px;
  background:#f8f8f8;
}