@charset "utf-8";


.scroll-on .global-search-trigger,
.scroll-on .global-menu-trigger{ background-color: #fff;}

/* SUPPORT MENU */

.support-font,
.support-color{
  margin: 0;
  padding: 1rem 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 0.1rem dotted #999;
  text-align: left;
}

.support-font dt,
.support-color dt{
  margin: 0;
  padding: 0 0 0;
  width: 5.5em;
  font-size: var(--font-size-s);
}

.support-font dd,
.support-color dd{ margin: 0; width: calc(100% - 5.5em); overflow: hidden; display: flex; justify-content: flex-start;}

.head-suppor-inner .h-radio{ display: none;}

.head-suppor-inner .h-radio + label{
  position: relative;
  margin: 0 0 0 0.3rem;
  padding: 0;
  width: 6rem;
  height: 3rem;
  display: block;
  overflow: hidden;
  border-radius: 0.4em;
  border: 0.1rem solid #ccc;
  box-sizing: border-box;
  background-color: #f1f1f1;
  font-size: var(--font-size-s);
  line-height: 3rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 1;
}

.head-suppor-inner .h-radio.white + label{ border: 0.1rem solid #ccc; background-color: #f1f1f1;}
.head-suppor-inner .h-radio.blue + label{ border: 0.1rem solid #000cff; background-color: #000cff; color: #fffc00;}
.head-suppor-inner .h-radio.yellow + label{ border: 0.1rem solid #fffc00; background-color: #fffc00; color: #000cff;}
.head-suppor-inner .h-radio.black + label{ border: 0.1rem solid #000; background-color: #000; color: #fff;}
.head-suppor-inner .h-radio:checked + label{ border: 0.1rem solid #00aeef; background-color: #fff;}

.head-suppor-inner .h-radio:checked + label:before{
  position: absolute;
  top: 0.3rem;
  left: 0.5rem;
  width: 1rem;
  height: 0.7rem;
  display: block;
  border-left: 0.3rem solid #00aeef;
  border-bottom: 0.3rem solid #00aeef;
  transform: rotate( -45deg );
  content: "";
}

.head-suppor-inner .h-radio.white:checked + label{ border: 0.1rem solid #00aeef; background-color: #fff;}
.head-suppor-inner .h-radio.blue:checked + label{ border: 0.1rem solid #000cff; background-color: #000cff; color: #fffc00;}
.head-suppor-inner .h-radio.yellow:checked + label{ border: 0.1rem solid #fffc00; background-color: #fffc00; color: #000cff;}
.head-suppor-inner .h-radio.black:checked + label{ border: 0.1rem solid #000; background-color: #000; color: #fff;}

.head-suppor-inner .h-radio.white:checked + label:before{ border-left: 0.3rem solid #00aeef; border-bottom: 0.3rem solid #00aeef;}
.head-suppor-inner .h-radio.blue:checked + label:before{ border-left: 0.3rem solid #fffc00; border-bottom: 0.3rem solid #fffc00;}
.head-suppor-inner .h-radio.yellow:checked + label:before{ border-left: 0.3rem solid #000cff; border-bottom: 0.3rem solid #000cff;}
.head-suppor-inner .h-radio.black:checked + label:before{ border-left: 0.3rem solid #fff; border-bottom: 0.3rem solid #fff;}


/* GLOBAL MENU */

.global-menu-body.active,
.global-search-body.active{
  left: 0;
  z-index: 1000;
  pointer-events: all;
  opacity: 1;  
  overscroll-behavior: contain;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: none;
  transform: scale(1, 1);
}

.global-menu-body.active::before,
.global-search-body.active::before,
.modal-wrapper::after {
  position: absolute;
  width: 0.1rem;
  height: calc(100vh + 0.1rem);
  display: flex;
  content: "";
}
      
.global-menu-body.active::-webkit-scrollbar,
.global-search-body.active::-webkit-scrollbar{ display: none;}

.global-menu-body .close-menu,
.global-search-body .close-menu{
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: block;
  opacity: 1;
  cursor: pointer;
  z-index: -1;
}
.global-menu-body .close-menu span,
.global-search-body .close-menu span{ display: none;}

.global-menu-inner{
  position: relative;
  padding: 0;
  width: 92%;
  max-width: 52rem;
  height: 100%;
  display: block;
  overflow: hidden;
  transition: all 0.5s 0.6s ease;
  transform: translate(100%, 0);
  background-color: #fff;
  opacity: 1;
}

.global-menu-body.active .global-menu-inner,
.global-search-body.active .global-menu-inner{
  transform: translate(0, 0);
  opacity: 1;
}

.global-menu{
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 5em 0 8em;
  width: calc(100% + 4rem);
  height:100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
}

.global-menu-inner .close-txt{
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0.8em;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #009fe8;
  font-size: var(--font-size-m);
  z-index: 999;
  cursor: pointer;  
}

.global-menu-inner .close-txt::before,
.global-menu-inner .close-txt:after {  
  position: absolute;
  left: 1rem;
  width: 1.8rem;
  height: 0.2rem;
  background-color: #fff;
  content: "";
}

.global-menu-inner .close-txt::before { transform: translateY(-0.9rem);}
.global-menu-inner .close-txt::after { transform: translateY(0.9rem);}
.global-menu-inner .close-txt::before { transform: rotate(45deg);}
.global-menu-inner .close-txt::after { transform: rotate(-45deg);}

@media (hover: hover) {

.global-menu-inner .close-txt{transition: all .5s ease; opacity: 1;}
.global-menu-inner .close-txt:hover { opacity: 0.7;}

}/* End hover */


.head-suppor-inner .hide-link li,
.global-menu li.menu-li{
  margin: 0.5em 0 0;
  padding: 0.5em 0 0.5em 1rem;
  width: calc(100% - 2rem);
  border-bottom: .1rem dotted #ccc;
  font-size: var(--font-size-m);
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: left;
}

.global-menu .inner-link{
  margin: 0;
  padding: 0.5em 0 1em 0;
}

.global-menu .inner-link li.menu-li{
  margin: 0.2em 0 0;
  padding: 0.3em 0 0.3em 1rem;
  border: none;
}

.head-suppor-inner .hide-link li a,
.global-menu a{
  position: relative;

  display: inline-block;
}

.global-menu .head-search-inner{
  margin: 0;
  padding: 0 0 1em;
  width: calc(100% - 1em);
  display: block;
}

.global-menu .head-search-inner strong{
  margin: 0;
  padding: 0 0 0.5em;
  display: block;
  font-size: var(--font-size-m);
  font-weight: 600;
}

.global-menu .head-search-inner table{ border: none; font-size: 1.6rem; line-height: 1; color: #000 !important;}


.global-menu .gsc-search-box{margin: 0 !important; color: #000 !important;}
  
.global-menu .gsc-input-box {
  padding: 0.5rem;
  border: 0.1rem solid #ccc !important;
  border-radius: 0.4rem !important;
  -webkit-border-radius:  0.4rem !important;
  -moz-border-radius:  0.4rem !important;
}

.global-menu .gsc-search-button-v2{
	margin: 0 !important;
	padding-top: 4.5rem !important;
	padding-bottom: 0 !important;
	padding-right: 2.5rem !important;
	padding-left: 2.5rem !important;
	background-color: #009fe8 !important;
	color: #4990c8 !important;
	border-top-style: none !important;
	border-right-style: none !important;
	border-bottom-style: none !important;
	border-left-style: none !important;
	cursor:pointer;
    border-radius: 0.4rem;
    display: block;    
    background: url(/common/img/icon_serch_white.svg) center center no-repeat;
    background-size: 46%;
}

.global-menu .gsc-search-button-v2 svg { display: none; }
/*
.global-menu .head-search-inner button{ width: 5.7rem !important; height: 4.6rem !important;}
.global-menu .head-search-inner button svg{ margin-left: 0.5rem; width: 2.5rem !important; height: 2.5rem !important;}
.global-menu .head-search-inner input { border: none !important;}
.global-menu .head-search-inner .gsc-control-searchbox-only{ width: calc(100% - 1.5rem);}
*/

#trancelate {
  margin: 1em auto 0;
  padding: 1em 0;
  width: 100%;
  max-width: 48rem;
  text-align: center;
}

#trancelate img{width: auto!important; height: auto;}

#trancelate select{
  position: relative;
  margin: 0 0 1em;
  padding: 0.5em 0.4em;
  width: 100%;
  display: block;
  outline: none;
  border: 0.1rem solid #ccc;
  border-radius: 0.2em;
  box-sizing: border-box;
  font-size: 1.6rem;
  text-align: left;
}

#trancelate select{
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff;
  position: relative;
}

#trancelate select::-ms-expand { display: none;}

.trancelate-body{
  position: relative;
  display: block;
}

.trancelate-body::after{
  position: absolute;
  top: 1.5rem;
  right: 1rem;
  margin: auto;
  width: 0.8rem;
  height: 0.8rem;
  display: block;
  border-bottom: solid 0.2rem #b4b3b3;
  border-right: solid 0.2rem #b4b3b3;
  transform: rotate(45deg);
  content: "";
  pointer-events: none;
  z-index: 100;
}


.header-sns{
  margin: 0;
  padding: 0 0 2em;
  width: calc(100% - 1em);
}

.header-sns .sns-title{
  margin: 0;
  padding: 0 0 1em;
  width: 100%;
  font-size: var(--font-size-m);
  font-weight: 600;
  text-align: center;
}

.sns-link{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 1.3rem;
}

.sns-link .sns-icon {
  width: 4rem;
  height: 4rem;
  display: block;
  aspect-ratio: 1 / 1;
}

.sns-link .sns-icon a{ display: block;}

/* PAGE TOP */

.page-top{
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  width: 4.5rem;
  height: 4.5rem;
  display: block;
  overflow:hidden;
  outline:none;
  z-index: 800;
  transition: all .5s ease;
  opacity: 0;
  pointer-events: none;
}

.page-top a{
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  display: block;
  background-color:#fff;
}

.page-top a span{  
  margin: 0 auto;
  padding: 4.5rem 0 0;
  width: 4.5rem;
  height: 0;
  display:block;
  overflow: hidden;
  line-height: 300;
}

.page-top a:before{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  border-top: 0.3rem solid #00aeef;
  border-right: 0.3rem solid #00aeef;
  transform: rotate( -45deg );
  content: "";
}

.scroll-on .page-top{ opacity: 1; pointer-events: all;}

@media (hover: hover) {
.page-top a,
.page-top a:before{transition: all .3s ease;}
.page-top a:hover{ opacity: 1;}
.page-top a:hover:before{ top: -1rem;}

}/* End hover */



/* pager */

.pager {
  margin: 2em 0 1em 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pager li { margin: 0 0.3em;}

.pager span {
  padding: 0.5em 0.8em;
  display: block;
  font-weight: bold;
  color: #00aeef;
  border: 0.2rem solid #00aeef;
  border-radius: 0.4em;
}
.pager a {
  display: block;
  padding: 0.5em 0.8em;
  color: #FFF;
  text-decoration: none;
  background-color: #00aeef;
  border-radius: 0.4em;
}

/*** FOOTER ***/

.footer-inner{
  margin: auto;
  padding: 2.5em 0;
  width: 94%;
  max-width: 76.8rem;
  display:block;
}

.foot-navi{
  margin: 0;
  padding: 0;
  width: 100%;
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
}

.foot-link{
  margin: 2em 0 0;
  padding: 0;
  display:flex;
  align-items: center;
  justify-content: center;
  border-right: 0.1rem dotted #ccc;
}

.foot-link a{
  margin: 0;
  padding: 0.2em 1em;
  display:block;
  border-left: 0.1rem dotted #ccc;
}

.copyright{
  margin: 0;
  padding: 1em;
  width: 100%;
  display:block;
  background-color: #00aeef;
  font-size: var(--font-size-s);
  text-align: center;
}
.copyright span{ white-space: nowrap;}

.foot-issue{
  margin: 2em 0 0;
  padding: 0;
  width: 100%;
  display:flex;
  justify-content: center;
}

.foot-issue dt{
  margin: 0;
  padding: 0;
  width: 50%;
  max-width: 22rem;
  flex-shrink: 1;
}

.foot-issue .foot-logo{ fill:#00aeef;}
.foot-issue dd{
  margin: 0;
  padding: 0 0 0 2rem;
  flex-shrink: 2;
}


@media screen and (max-width: 580px) {


.foot-issue{
  margin: 2em 0 0;
  padding: 0;
  width: 100%;
  flex-wrap: wrap;
}

.foot-issue dt{
  margin: 0 0 1em;
  padding: 0;
  width: 70%;
}

.foot-issue dd{
  width: 94%;
  max-width: 38rem;
  padding: 0 0 0 0;
}

} /* End max 580 */



@media screen and (max-width: 720px) {

.foot-navi{ justify-content: center;}
.footer-sns.sns-link{ justify-content: center;}
.foot-link{ justify-content: center;}

} /* End max 720 */


@media screen and (max-width: 640px) {

.foot-link{
  margin: 1.5em 0 0;
  padding: 0;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  border-right: none;
}

.foot-link li{ margin: 0.5rem 0; width: 50%; text-align: center;}
.foot-link a{ padding: 0.2em 0; border-left: none; white-space: nowrap;}

} /* End max 640 */

.foot-issue {
  margin: 0 0;
}

.footer-inner .home-section-sub-title{margin: 3rem 0 0 0;}



/* HOME ACHIEVEMENTS */

#ACHIEVEMENTS{
  position: relative;
  border-bottom: 0.1rem solid #ccc;
  background-color: #efefef;
}

.achievements-list-sub-title {
  font-size: var(--font-size-l);
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: center;
}

.achievements-list{
  position: relative;
  margin: 1em auto 0;
  padding: 1em 2em;
  width: 100%;
  max-width: 42rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-radius: 1em;
  background-color: #fff;
}

.achievements-list dt{
  padding: 0.25em 0;
  width: 12em;
  display: flex;
  align-items: center;
}

.achievements-list dd{
  padding: 0.25em 0;
  width: calc(100% - 12em);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.achievements-list dd strong{ padding-right: 0.5rem;}

@media screen and (max-width: 640px) {

.achievements-list{ padding: 1em;}
.achievements-list .font-size-xl{ font-size: var(--font-size-l);}

}/* End max 640 */

.footer-inner .achievements-list {
  padding: 1em 4em;
  margin: 1.2rem auto 3rem;
  border: 0.1rem solid #00aeef;
  background-color: #f9f9f9;
  max-width: 52rem;
}

.achievements-list dt {
  padding: 0 0;
  width:14em;
  max-width:none;
}

.achievements-list dd {
  padding: 0 0;
  width:calc(100% - 14em);
}

@media screen and (max-width: 640px) {
  .footer-inner .achievements-list {padding: 1em; max-width: 42rem;}
  .footer-inner .achievements-list dt {width:12em;}
  .footer-inner .achievements-list dd {width:calc(100% - 12em);}
}

.sns-link {
  margin: 0 auto;
}

.foot-link {margin: 3rem 0 0;}




/* breadcrumb */

.breadcrumb{
  position: relative;
  margin: 0;
  padding: 1.6rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
}

.breadcrumb .breadcrumb-list{
  margin: 0;
  padding: 0;
  width: 94%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow-x: scroll;
  -ms-overflow-style: none;    /* IE, Edge */
  scrollbar-width: none;
}

.breadcrumb .breadcrumb-list::-webkit-scrollbar { display:none;/* Chrome, Safari */}

.breadcrumb .breadcrumb-list li{
  position: relative;
  margin: 0 2rem 0 0;
  font-size: var(--font-size-m);
  line-height: 1.4;
  white-space: nowrap;
  z-index: 500;
}

.breadcrumb .breadcrumb-list li::before{
  position: absolute;
  top: 0.6rem;
  left: -1.4rem;
  margin: 0;
  width: 0.8rem;
  height: 0.8rem;
  border-top: solid 0.1rem #999;
  border-right: solid 0.1rem #999;
  transform: rotate(45deg);
  content: '';
}

.breadcrumb .breadcrumb-list .breadcrumb-list-home::before{ border: none;}

@media screen and (max-width: 480px) {

.breadcrumb .breadcrumb-list li{ font-size: var(--font-size-s);}

}/* End max 480 */



/* charity-banner */
/*
.charity-banner{
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
  margin: -2.5rem 0 0;
  padding: 0;
  width: 100%;
  height: 8rem;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 999;
  transition: all .5s ease;
  opacity: 0;
  pointer-events: none;
  contain: paint;
}

.scroll-on .charity-banner{ opacity: 1; pointer-events: all;}
*/

.charity-banner::after{
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 5.5rem;
  background-color: #00aeef;
  content: "";
  z-index: -1;
}

.charity-banner .charity-banner-link{
  margin: 0;
  padding: 0;
  width: 94%;
  max-width: 36rem;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.charity-banner-copy{
  position: relative;
  margin: 0.5rem 0 0;
  padding: 0;
  font-size: var(--font-size-s);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.charity-banner-copy::after{
  position: absolute;
  top: 0;
  right: -2.5em;
  bottom: 0;
  margin: auto;
  width: 1.2rem;
  height: 1.2rem;
  display: block;
  border-top: 0.3rem solid #fff;
  border-right: 0.3rem solid #fff;
  transform: rotate( 45deg );
  content: "";
}

.charity-banner-copy strong{
  margin: 0;
  padding: 0.2rem 0 0;
  display: block;
  font-size: var(--font-size-l);
}

.charity-banner .charity-image{
  position: absolute;
  top: 1.5rem;
  left: calc(50% - 14em);
  margin: 0;
  padding: 0;
  width: 11.6rem;
  height: 14.4rem;
  transform: rotate( 10deg );
  display: block;
  overflow: hidden;
  transition: all .2s ease;
}

.charity-banner img{ position: relative; display: block; overflow: hidden;}

.charity-banner .charity-image::before{
  position: absolute;
  top: 1.2rem;
  right: 3.2rem;
  margin: auto;
  padding: 0;
  width: 1rem;
  height: 1rem;
  display: block;
  background: url(/common/img/icon_twinkle.svg) center center no-repeat;
  background-size: contain;
  content: "";
  z-index: 100;
  animation: twinkle 3s infinite;
}

@keyframes twinkle {
  0% {  opacity: 0; transform: scale(1, 1);} 
  25% { opacity: 0; transform: scale(1,1);}
  45% { opacity: 1; transform: scale(2.5, 2.5);}
  65% { opacity: 0; transform: scale(1,1);}
  100% { opacity: 0; transform: scale(1,1);}
}




@media screen and (max-width: 480px) {

.charity-banner{ justify-content: flex-start;}

.charity-banner .charity-banner-link{
  padding: 0 0 0 5.5rem;
  width: calc(100% - 7rem);
  justify-content: flex-start;
}

.charity-banner-copy::after{ right: -2em;}
.charity-banner .charity-image{ left: -5rem;}

}/* End max 480 */



@media (hover: hover) {

.charity-banner .charity-banner-link:hover{opacity: 1;}
.charity-banner .charity-banner-link:hover .charity-image{ position: absolute; top: 0.5rem;}
.charity-banner .charity-banner-link:hover img{
  margin: 0;
  padding: 14.4rem 0 0 0;
  width: 11.6rem;
  height: 14.4rem;
  background: url(/common/img/icon_duck_smile.svg); background-size: contain;
  line-height: 300;
}

}/* End hover */

/*** CONTENTS ***/