body {
  background-color: #00B4ED;
}
/*--------------------------
 header
----------------------------*/
header.header {
 background: #00B4ED;
}
header.header ul.global-menu li {
 border-bottom: 1px solid #C7E9FA;
}
header.header nav.global-menu-wrap div.btn-wrap a {
 background-color: #D2EDFB;
}
div.btn-wrap a {
 color: #00B4ED;
}
header.header nav.global-menu-wrap div.btn-wrap a.instagram {
 border: 2px solid #8FD3F5;
}
div.btn-wrap a::after {
 background-image: url(../img/blue/icon-arrow-blue.png);
 }
div.btn-wrap a.instagram::after {
 background-image: none;
}
div.btn-wrap a.instagram {
 font: 600 normal .7125rem / 40px "Noto Sans JP", sans-serif;
 padding-left: 15px;
}
@media screen and (max-width: 768px) {
    header.header .icon-menu {
        background-color: #00B4ED;
    }
    header.header nav.global-menu-wrap {
        background-color: #00B4ED;
    }
    header.header a.link-official::after {
        background-image: url(../img/blue/icon-arrow-header-only_blue.png);
    }
}

/*--------------------------
  MV
----------------------------*/
section.mv h1.site-title {
 max-width: 322px;
}

/*--------------------------
  Recommended
----------------------------*/
section.recommended h3.h3-title {
 background: linear-gradient(to bottom, #C7E8FA, #00B4ED);
}

/*--------------------------
  Pick Up
----------------------------*/
section.pick-up .container:last-child::before {
 background: linear-gradient(to bottom, #C7E8FA, #9FD9F6);
}
section.pick-up h3.h3-title {
 background: linear-gradient(to bottom, #C7E8FA, #00B4ED);
}
section.pick-up ul.recommended span {
    color: #00B4ED;
}
section.pick-up h2.h2-title {
 font-feature-settings: "palt";
}
section.pick-up p.text {
 padding: 0 1.9rem;
}

/********* Check Box ************/
section.pick-up .btn-group {
  margin-top: 20px;
  /*display: grid;*/
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0 3px;
  /*overflow: auto;*/
  display: flex;
  flex-direction: column;
}
label.btn {
  display: flex;
  align-items: flex-start;
}

label.btn span {
  font: 400 normal 0.95rem / 22px "Noto Sans JP", sans-serif;
  display: inline-block;
}

label.btn input {
  display: inline-block;
  margin-right: 8px;
  transform: scale(1.5);
  accent-color: #00b4ed;
}
label.btn input.indent {
  position: relative;
  top: -20px; /* チェックボックスを少し下げて1行目と揃える */
}

div[data-toggle="buttons"] label {
display: inline-block;
padding: 6px 0;
margin-bottom: 0;
/*font-size: 14px;
font-weight: normal;*/
text-align: left;
white-space: nowrap;
vertical-align: top;
cursor: pointer;
border-radius: 3px;
color: #333;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

/* チェックすると表示 */
.message{
  display: none;
}
input.toggle:checked ~ .message{
  display: block;
  animation: fadein 1.5s;
}
@keyframes fadein{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@media screen and (max-width: 428px) {
    label.btn span {
     font: 400 normal 1.1rem / 28px "Noto Sans JP", sans-serif;
   }
   label.btn input.indent {
      top: -27px;
    }
}

/*--------------------------
  Point
----------------------------*/
section.point::before, section.point::after {
 background: linear-gradient(to bottom, #C7E8FA, #9FD9F6);
}
section.point {
    background-color: #EEF8FE;
}
section.point h1.point-title::after {
 background: linear-gradient(to right, #C7E8FA, #9FD9F6);
}
section.point div.btn-accordion {
 background-image: url(../img/blue/btn-accordion-off_blue.png);
}
section.point div.btn-accordion.is-active {
  background-image: url("../img/blue/btn-accordion-on_blue.png");
}

.fadeIn {
  transform: translate3d(50px, 0, 0);
  transition: 1s;
  opacity: 0;
}

.fadeIn.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

section.point .contents-wrap {
  position: relative;
}

@media screen and (max-width: 428px) {
   section.point div.point-card {
        padding: 20px 15px 5px 20px;
    }
    section.point p.text {
        font: 300 normal .975rem/1.642 "Noto Sans JP",sans-serif;
    }
}

/*--------------------------
  Dairy
----------------------------*/
section.dairy h1.dairy-title::after {
  background: linear-gradient(to bottom, #C7E8FA, #00B4ED);
}

/*--------------------------
  CTA
----------------------------*/
section.cta {
 background: linear-gradient(to bottom, #c7e8fa, #9fd9f6)
 }
section.cta div.btn-cta {
 background: linear-gradient(to bottom, #C7E8FA, #9fd9f6);
}
section.cta div.btn-cta a {
 color: #00B4ED;
}
section.cta h1.cta-title {
 width: 240px;
}
section.point div.point-card {
 box-shadow: 2px 2px 3px 0px rgba(143, 211, 245, 0.3);
}
@media screen and (max-width: 428px) {
    section.cta div.btn-cta {
        height: 55px;
    }
    section.cta div.btn-cta a {
        font: 600 normal 1.1rem/47px "Noto Sans JP",sans-serif;
        height: 48px;
    }
}

/*--------------------------
  Event
----------------------------*/
section.event {
 background: linear-gradient(to bottom, #cfebfa, #afddf7);
 }
section.event div.btn-cta {
 background: linear-gradient(to bottom, #c7e8fa, #9fd9f6);
}
section.event div.btn-cta a {
 color: #00b4ed;
}
section.event .speech-bg {
  background-image: url('../img/blue/event-bubble-bg_blue.png');
}
section.event p.lead::before, section.event p.lead::after,
section.event p.lead02::before, section.event p.lead02::after  {
    position: absolute;
    top: 0;
    display: block;
    width: 18px;
    height: 25px;
    background-image: url(../img/event-lead-deco.png);
    background-size: cover;
    background-repeat: no-repeat;
    content: '';
}

@media screen and (max-width: 428px) {
    section.event div.btn-cta a {
        font: 600 normal 1.1rem / 47px "Noto Sans JP", sans-serif;
        height: 48px;
}
}


/*--------------------------
  footer
----------------------------*/
footer.footer .container {
    padding: 40px 10%;
}
footer.footer {
 background: linear-gradient(to bottom, #C7E8FA, #9FD9F6);
}
footer.footer .container dl.department dt {
 color: #00B4ED;
 border-bottom: 2px solid #4CCAF3;
}
a {
    color: #00B4ED;
}
footer.footer .container div.btn-wrap a.instagram {
    border: 2px solid #00b4ed;
    padding-left: 22px;
    font: 600 normal .72rem / 40px "Noto Sans JP", sans-serif;
}
footer.footer .container dl.access span, footer.footer .container dl.address span {
    color: #00B4ED;
}
footer.footer .container dl.department dd::after {
 background-image: url(../img/blue/icon-arrow-pale.png);
}

div.cta-fix {
 background: linear-gradient(to bottom, #00B4ED 60%, #C7E8FA);
}

@media screen and (min-width:376px) and ( max-width:480px) {
 footer.footer .container div.btn-wrap a.instagram {
        font: 600 normal 0.9rem / 40px "Noto Sans JP", sans-serif;
        padding-left: 0.9rem;
    }
}

@media screen and (max-width: 375px) {
    footer.footer .container {
    padding: 40px 6%;
}
    footer.footer .container div.btn-wrap a.instagram {
        font: 600 normal 0.85rem / 40px "Noto Sans JP", sans-serif;
        padding-left: 0.9rem;
    }
}