@charset "UTF-8";

/* ----------------------------------------------------------

  reset

---------------------------------------------------------- */

*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td {

  margin: 0;

  padding: 0;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



fieldset, img {

  border: 0;

}



address, caption, cite, code, dfn, em, strong, th, var {

  font-style: normal;

  font-weight: normal;

}



ol, ul {

  list-style: none;

}



caption, th {

  text-align: left;

}



h1, h2, h3, h4, h5, h6 {

  font-size: 100%;

  font-weight: normal;

}



q:before, q:after {

  content: '';

}



/* Global reset-RESET */

/* The below restores some sensible defaults */

strong {

  font-weight: normal;

}



em {

  font-style: normal;

}



img {

  border: none;

}



input[type="button"], input[type="submit"], button {

  -webkit-appearance: none;

  appearance: none;

  cursor: pointer;

  background: none;

  border: 0;

  border-radius: 0;

  width: auto;

  overflow: visible;

  padding: 0;

  font-size: 0;

  line-height: 0;

  -webkit-box-sizing: content-box;

  box-sizing: border-box;

}



input[type="button"]::-webkit-search-decoration, input[type="submit"]::-webkit-search-decoration, button::-webkit-search-decoration {

  display: none;

}



input[type="button"]::focus, input[type="submit"]::focus, button::focus {

  outline-offset: -2px;

}



input[type="text"], input[type="number"], input[type="tel"], input[type="password"], input[type="date"], input[type="email"], textarea, select {

  outline: none;

}



select::-ms-expand {

  display: none;

}



input[type="date"]::-webkit-inner-spin-button,

input[type="date"]::-webkit-outer-spin-button,

input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button {

  -webkit-appearance: none;

  margin: 0;

}



input[type="date"],

input[type="number"] {

  -moz-appearance: textfield;

}



select {

  background-color: #fff;

}



a {

  text-decoration: none;

  color: inherit;

}



i {

  font-style: normal;

}



/* -----------------

@include MediaQuery

----------------- */

::selection {

  background: #B4E146;

  color: #FFFFFF;

}



::-moz-selection {

  background: #B4E146;

  color: #FFFFFF;

}



body {

  font-family: Hiragino Kaku Gothic Pro, メイリオ, serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  color: #333333;

  min-width: 1286px;

  max-width: 100%;

  padding-bottom: 40px;

}



body.body-hidden {

  overflow: hidden;

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  body {

    min-width: initial;

    padding-bottom: 16px;

  }

}



a {

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);

  cursor: pointer;

}



@media screen and (min-width: 768px) {

  .pc-hide {

    display: none !important;

  }

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .sp-hide {

    display: none !important;

  }

}



.koukoku {

  width: 1286px;

  box-sizing: border-box;

  margin: 85px auto 0 auto;

  padding: 65px 160px;

  border-radius: 50px;

  background-color: #eaded6;

  background-image: url("../..../../img/common/about-bg.png");

  background-repeat: repeat;

  color: #333;

}

.koukoku.shinai { margin: -65px auto 165px auto; }



.koukoku--title {

  text-align: center;

  font-size: 1.75em;

  font-weight: bold;

  margin-bottom: 17px;

}



.koukoku .banner_box01 img { max-width: 150px; }



.about {

  width: 1286px;

  box-sizing: border-box;

  margin: -65px auto 0 auto;

  padding: 100px 160px;

  border-top-left-radius: 50px;

  border-top-right-radius: 50px;

  background-color: #EFEFEF;

  background-image: url("../..../../img/common/about-bg.png");

  background-repeat: repeat;

  color: #333333;

}



.about--title {

  text-align: center;

  font-size: 1.75em;

  font-weight: bold;

  margin-bottom: 17px;

}



.about__content {

  display: flex;

  max-width: 960px;

  text-align: center;

  flex-wrap: wrap;

  margin: 0 auto;

  /*justify-content: center;*/

  padding-bottom: 30px;

  border-bottom: solid 2px #CCCCCC;

  overflow: hidden;

}



.about__content--item {

  width: 300px;

  background-color: #FFFFFF;

  margin-left: 30px;

  margin-bottom: 30px;

  border-radius: 8px;

}



.about__content--item--img {

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);

  width: 300px;

  height: 150px;

  vertical-align: top;

  object-fit: cover;

  font-family: 'object-fit: cover;';

  /*IE対策*/

  border-top-right-radius: 8px;

  border-top-left-radius: 8px;

}



.about__content--item--img:hover {

  opacity: .6;

}



.about__content--item--text {

  font-weight: bold;

  font-size: .75em;

  padding: 16px 0;

}



.about__content--item:nth-child(3n + 1) {

  margin-left: 0;

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  

  .koukoku {

    max-width: 100%;

    width: auto;

    margin: 30px 12px 30px;

    padding: 24px 16px;

    border-radius: 12px;

  }

  .koukoku.shinai {

    margin: 50px 12px 0;

  }

  .koukoku--title {

    font-size: 1.25em;

    margin-bottom: 16px;

  }

  

  .koukoku .banner_box01 .ss-image-box-item-list {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

  }

  .koukoku .banner_box01 span {

    display: block;

    width: calc(50% - 5px);

    height: auto;

    margin-bottom: 10px;

    margin-left: 0;

  }

  .koukoku .banner_box01 img { width: 100%; max-width: 100%; }

  

  .about {

    max-width: 100%;

    width: auto;

    margin: 30px 12px 0;

    padding: 24px 16px;

    border-top-left-radius: 12px;

    border-top-right-radius: 12px;

  }

  .about--title {

    font-size: 1.25em;

    margin-bottom: 16px;

  }

  .about__content {

    /*justify-content: space-around;*/

    justify-content: space-between;

    padding-bottom: 24px;

  }

  .about__content--item {

    width: calc(50% - 10px);

    height: auto;

    margin-bottom: 16px;    

    margin-left: 0;

  }

  .about__content--item--img {

    width: 100%;

    height: auto;

  }

  .about__content--item--text {

    font-size: .625em;

    padding: 0;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

  }



}



/* alert */

.header__alert {

  display: flex;

  position: relative;

  max-height: 80px;

  overflow: hidden;

  transition: all 0.5s;

}



.header__alert::after {

  content: '';

  display: block;

  position: absolute;

  width: calc(100% - 215px);

  height: 10px;

  bottom: 0;

  right: 0;

  background-color: #F6D6CD;

}



.header__alert.alert_active::after {

  content: none;

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .header__alert {

    max-height: 135px;

  }

}



.header__alert--left {

  display: flex;

  width: 215px;

  background-color: #F6D6CD;

  align-items: center;

  position: relative;

}



.header__alert--left__heading {

  display: flex;

  align-items: center;

  position: absolute;

  top: 0;

  width: inherit;

  height: 80px;

  background-color: #D03405;

}



.header__alert--left__heading > svg {

  width: 40px;

  height: 40px;

  margin: 0 10px;

}



.header__alert--left__heading > svg .circle {

  fill: #FFFFFF;

}



.header__alert--left__heading > svg .stroke {

  stroke: #FFFFFF;

}



.header__alert--title {

  font-weight: bold;

  color: #FFFFFF;

}



.header__alert--list {

  width: calc(100% - 215px);

  background-color: #F6D6CD;

  padding-bottom: 20px;

}



.header__alert--wrapper {

  font-size: 1em;

  color: #333333;

  display: flex;

  align-items: center;

  box-sizing: border-box;

  margin-left: 2.92vw;

}



.header__alert--wrapper:first-child {

  margin-top: 29px;

}



.header__alert--wrapper:not(:first-child) {

  margin-top: 20px;

}



.header__alert--date {

  margin-right: 20px;

}



.header__alert--message {

  font-weight: bold;

}



.header__alert a:hover {

  text-decoration: underline;

}



.header__alert--trigger {

  display: none;

}



.header__option {

  font-size: .875em;

  padding: 10px;

  color: #7D7D7D;

  font-weight: bold;

  background-color: #EFEFEF;

  display: flex;

  align-items: center;

  justify-content: center;

}



.header__option .alert_close > svg,

.header__option .alert_open > svg {

  stroke: #7D7D7D;

}



.header__option .alert_close > svg {

  position: relative;

  top: 3px;

}



.header__option .alert_open {

  display: block;

}



.header__option .alert_close {

  display: none;

}



.header__alert--trigger:checked ~ .header__alert {

  max-height: 480px;

}



.header__alert--trigger:checked ~ .header__option > .alert_option.alert_open {

  display: none;

}



.header__alert--trigger:checked ~ .header__option > .alert_option.alert_close {

  display: block;

}



.alert_active {

  background-color: rgba(0, 0, 0, 0.9) !important;

  color: rgba(0, 0, 0, 0.9) !important;

}



.alert_active > svg .circle {

  fill: #000000 !important;

}



.alert_active > svg .stroke {

  stroke: #000000 !important;

}



.alert_active .alert_close svg,

.alert_active .alert_open svg {

  stroke: #000000 !important;

}



.alert_active.header__alert--title {

  color: #333333;

}



.alert_active .header__alert--wrapper {

  color: rgba(0, 0, 0, 0.9);

}



.alert_active.header__alert--list::after {

  content: none;

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .header__alert {

    max-height: 145px;

    flex-direction: column;

  }

  .header__alert--left {

    width: 100%;

  }

  .header__alert--left__heading {

    height: 40px;

    justify-content: center;

    position: initial;

  }

  .header__alert--left__heading > svg {

    width: 20px;

    height: 20px;

    margin: 0 10px;

  }

  .header__alert--list {

    width: 100%;

  }

  .header__alert--wrapper {

    font-size: .875em;

    display: block;

    margin-left: 20px;

    margin-right: 20px;

  }

  .header__alert--wrapper:first-child {

    margin-top: 20px;

    height: 63px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

  }

  .header__alert--date {

    color: #7D7D7D;

    margin: 0;

  }

  .alert_active .header__alert--date {

    color: #000000;

  }

}



.svg-symbol {

  display: none;

}



.section__title {

  border-bottom: solid 2px #B4E146;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.section__title > span:first-child {

  font-size: 1.75em;

  font-weight: bold;

  position: relative;

}



.section__title > span:first-child::after {

  content: "";

  display: block;

  line-height: 0;

  overflow: hidden;

  position: absolute;

  left: 0;

  bottom: -2px;

  width: 108px;

  border-bottom: 2px solid #008463;

}



.section__title > span:nth-child(2) {

  top: 10px;

  right: 0px;

  color: #0C4198;

  font-weight: bold;

}



.section__title > span:nth-child(2) > a {

  display: flex;

  align-items: center;

}



.section__title > span:nth-child(2) > a > svg {

  fill: #0C4198;

}



.section__title > span:nth-child(2) > a > p {

  margin-right: 10px;

}



.section__title span:nth-child(2):hover {

  color: #5A5A5A;

}



.section__title span:nth-child(2):hover > a > svg {

  fill: #5A5A5A;

}







.section__subtitle {

  color: #333333;

  opacity: 0.8;

  font-weight: bold;

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .section__title span:first-child {

    font-size: 1.25em;

  }

  .section__title span:nth-child(2) {

    font-size: .875em;

    top: 5px;

  }

  .section__title span:nth-child(2)::after {

    background-size: 16px 16px;

    top: 2px;

  }

}



.emergency {

  display: flex;

  width: 1020px;

  margin: 70px auto 0 auto;

  background-color: #FAEAE5;

  border-radius: 16px;

}



.emergency__title {

  padding: 55px 88px 0 60px;

  width: 112px;

  color: #D03405;

  font-size: 1.75em;

  font-weight: bold;

  line-height: 1.25;

}



.emergency__list {

  font-size: 1em;

  color: #333333;

  padding: 55px 0 50px 0;

}



.emergency__list > li > dl {

  padding-bottom: 15px;

  display: flex;

}



.emergency__list > li > dl > dd {

  margin-left: 40px;

  font-weight: bold;

}



.emergency__list li + li {

  margin-top: 17px;

}



.emergency__list li:not(:last-child) {

  border-bottom: dashed 1.5px #CCCCCC;

}



.emergency a:hover {

  text-decoration: underline;

}



.emergency__trigger {

  display: none;

}



.emergency__wrapper {

  display: none;

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .emergency {

    display: block;

    width: calc(100% - 40px);

    margin: 40px auto 0 auto;

    border-radius: 12px;

  }

  .emergency + .hero-right {

    margin-top: 55px;

  }

  .emergency__title {

    padding: 24px 0 0 16px;

    font-size: 1.25em;

    width: 100%;

    line-height: 1.25;

  }

  .emergency__list {

    font-size: .875em;

    padding: 0 16px;

    margin-bottom: 10px;

    max-height: 146px;

    overflow: hidden;

    position: relative;

    transition: 0.3s ease;

  }

  .emergency__list::before {

    display: block;

    position: absolute;

    content: '';

    bottom: 0;

    left: 0;

    width: 100%;

    height: 28px;

    background: transparent linear-gradient(180deg, #FAEAE500 0%, #FAEAE5 94%, #FAEAE5 100%) 0% 0% no-repeat padding-box;

  }

  .emergency__list > li > dl {

    margin-top: 15px;

    border-bottom: dashed 1.5px #CCCCCC;

    padding-bottom: 10px;

    display: block;

  }

  .emergency__list > li > dl > dt {

    color: #7D7D7D;

  }

  .emergency__list > li > dl > dd {

    margin-left: 0px;

    font-weight: bold;

  }

  .emergency__list > li:last-child > dl {

    border-bottom: none;

  }

  .emergency__wrapper {

    display: block;

    font-size: .875em;

    padding: 10px;

    color: #7D7D7D;

    font-weight: bold;

    background-color: #FAEAE5;

    display: flex;

    align-items: center;

    justify-content: center;

    border-bottom-left-radius: 12px;

    border-bottom-right-radius: 12px;

    border-top: solid 1px #CCCCCC;

  }

  .emergency__wrapper .emergency_close > svg,

  .emergency__wrapper .emergency_open > svg {

    stroke: #7D7D7D;

  }

  .emergency__wrapper .emergency_close > svg {

    position: relative;

    top: 3px;

  }

  .emergency__wrapper .emergency_open {

    display: block;

  }

  .emergency__wrapper .emergency_close {

    display: none;

  }

  .emergency__trigger:checked ~ .emergency__list {

    max-height: 600px;

  }

  .emergency__trigger:checked ~ .emergency__list::before {

    content: none;

  }

  .emergency__trigger:checked ~ .emergency__wrapper > .emergency_option.emergency_open {

    display: none;

  }

  .emergency__trigger:checked ~ .emergency__wrapper > .emergency_option.emergency_close {

    display: block;

  }

}



.event {

  width: 1026px;

  padding: 80px 130px 130px;

  height: 100%;

  margin: 90px auto 0 auto;

  background-image: url("../../img/common/green_pattern.png");

  position: relative;

  overflow: hidden;

}



.event__wave {

  width: 100%;

  position: absolute;

  left: 0;

  top: 0;

}



.event__wave .waves {

  position: relative;

  width: 100%;

  height: 30px;

  margin-bottom: -7px;

  transform: scale(1, -1);

}



.event__wave .parallax > use {

  animation: move-forever 10s cubic-bezier(0.55, 0.45, 0.45, 0.5) infinite;

}



@keyframes move-forever {

  0% {

    transform: translate3d(-90px, 0, 0);

  }

  100% {

    transform: translate3d(85px, 0, 0);

  }

}



.event .section {

  width: 1020px;

}



.event .section .event-list {

  display: flex;

  justify-content: flex-start;

  flex-wrap: wrap;

  width: 1020px;

  margin-bottom: 80px;

}



.event .section .event-list__item {

  width: 240px;

  margin-top: 30px;

  overflow: hidden;

  margin-right: 20px;

}



.event .section .event-list__item .image {

  width: 240px;

  height: 160px;

  display: block;

  overflow: hidden;

}



.event .section .event-list__item .image > img {

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);

  width: 100%;

  height: 100%;

  vertical-align: top;

  object-fit: cover;

  font-family: 'object-fit: cover;';

  /*IE対策*/

}



.event .section .event-list__item .image > img:hover {

  transform: scale(1.05);

  transition: 1.05s all;

}



.event .section .event-list__item .title:hover .event-title {

  opacity: 0.6;

}



.event .section .event-list__item .event-title {

  font-size: 1em;

  font-weight: bold;

  margin-top: 16px;

}



.event .section .event-list__item .event-time {

  font-size: .75em;

  opacity: 0.4;

  display: block;

  margin-top: 2px;

}



.event .section .event-list__item .event-tag {

  background-color: #FABAB4;

  border-radius: 15px;

  text-align: center;

  display: inline-block;

  margin-top: 10px;

  padding: 1px 8px;

  font-weight: bold;

  font-size: .75em;

}



.event .section .event-list__item .event-tag:hover {

  background-color: #5A5A5A;

  color: #FFFFFF;

}



.event .section .event-list__item:nth-of-type(4n) {

  margin-right: 0;

}



.event:after {

  content: "";

  position: absolute;

  border-style: none;

  left: 0;

  bottom: 0;

  z-index: 0;

  width: 100%;

  height: 100px;

  background: linear-gradient(rgba(255, 255, 255, 0) 0, #FFFFFF 100px);

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .event {

    width: calc(100% - 64px);

    padding: 50px 16px 24px 16px;

    margin: 60px auto 0 auto;

  }

  .event .section {

    width: auto;

  }

  .event .section__title span:nth-child(2) p {

    margin-right: 5px;

  }

  .event .section__title span:nth-child(2) svg {

    width: 15px;

    height: 15px;

  }

  .event .section .event-list {

    display: flex;

    justify-content: space-between;

    width: 100%;

    flex-wrap: wrap;

    margin-top: 15px;

    margin-bottom: 50px;

  }

  .event .section .event-list__item {

    width: calc(50% - 4px);

    margin-top: 0;

    margin-right: 0;

  }

  .event .section .event-list__item:nth-of-type(n + 3) {

    margin-top: 15px;

  }

  .event .section .event-list__item .image {

    width: 100%;

    height: 26.9vw;

  }

  .event .section .event-list__item .event-title {

    margin-top: 11px;

    font-size: .875em;

    line-height: 1.25;

  }

  .event .section .event-list__item .event-time {

    margin-top: 6px;

    font-size: .625em;

  }

  .event .section .event-list__item .event-tag {

    margin-top: 6px;

    font-size: .625em;

  }

  .event__wave .waves {

    height: 30px;

  }

}



/* footer */

.footer {

  color: #333333;

  margin: 0 auto;

  max-width: 960px;

}



.footer .contact {

  padding-top: 50px;

  display: flex;

  justify-content: space-between;

  padding-bottom: 60px;

  border-bottom: solid 2px #CCCCCC;

  align-items: center;

}



.footer .contact__content--wrapper {

  line-height: 150%;

}



.footer .contact__content--name {

  font-size: 1.25em;

  font-weight: bold;

}



.footer .contact__content--wrapper {

  margin-top: 18px;

}



.footer .contact__content--address, .footer .contact__content--tel, .footer .contact__content--fax {

  font-size: .875em;

}



.footer .contact__social {

  margin-top: 10px;

  padding-top: 15px;

  background-color: #FFFFFF;

  border-radius: 12px;

  padding: 15px 80px 10px 70px;

  width: 300px;

  text-align: center;

}



.footer .contact__social--title {

  font-size: 1em;

  font-weight: bod;

  margin-bottom: 5px;

}



.footer .contact__social--icons {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 2.25em;

}



.footer .contact__social--icon {

  margin-right: 28px;

}



.footer .contact__social--icon:last-child {

  margin-right: 0;

}



.footer .contact__social--icon > svg {

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);

}



.footer .contact__social--icon:hover > svg {

  fill-opacity: .6;

}



.footer__link {

  text-align: center;

  font-size: .75em;

  margin-top: 60px;

  margin-bottom: 40px;

}



.footer__link > a {

  margin: 0 10px;

}



.footer__list--bottom {

  display: flex;

  justify-content: space-between;

  font-size: .875em;

  font-weight: bold;

  margin-bottom: 40px;

}



.footer__list--bottom--item {

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);

  width: 300px;

  height: 48px;

  background-color: #FFAE80;

  border-radius: 8px;

  text-align: center;

}



.footer__list--bottom--item a {

  padding: 15px 0;

  display: block;

}



.footer__list--bottom--item:hover {

  background-color: #5A5A5A;

  color: #FFFFFF;

}



.footer__copyright {

  text-align: center;

  font-size: .625em;

  color: #333333;

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .footer {

    max-width: 100%;

    width: auto;

  }

  .footer .contact {

    padding: 24px 0;

    flex-direction: column;

    text-align: center;

  }

  .footer .contact__content {

    order: 2;

  }

  .footer .contact__content--name {

    font-size: 1em;

    margin-bottom: 16px;

  }

  .footer .contact__content--wrapper {

    line-height: 1.8;

  }

  .footer .contact__content--address, .footer .contact__content--tel, .footer .contact__content--fax {

    font-size: .75em;

  }

  .footer .contact__social {

    order: 1;

    width: 100%;

    padding: 12px 0;

    margin-bottom: 24px;

  }

  .footer .contact__social--title {

    font-size: .875em;

  }

  .footer .contact__social--icons {

    font-size: 1.75em;

  }

  .footer .contact__social--icon {

    margin-right: 16px;

  }

  .footer__link {

    margin-top: 24px;

    margin-bottom: 24px;

  }

  .footer__link > a {

    display: inline-block;

    margin: 20px 10px 0 10px;

  }

  .footer__link a:nth-of-type(1),

  .footer__link a:nth-of-type(2) {

    margin-top: 0;

  }

  .footer__list--bottom {

    display: block;

    font-size: .75em;

  }

  .footer__list--bottom--item {

    width: 100%;

    height: 22px;

    padding: 5px 5px 3px;

    margin-bottom: 8px;

  }

  .footer__list--bottom--item a {

    height: 100%;

    padding: 0px;

  }

  .footer__copyright {

    font-size: .625em;

  }

}



/* header */

.site-header {

  position: relative;

  z-index: 999;

}



.site-header.is-white {

  background-color: #FFFFFF;

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .site-header {

    box-shadow: 0px 1px 0px #0000001A;

  }

}



.header.hide {

  transform: translateY(-100%);

}



.header.hide .header__logo.other {

  margin-bottom: 0;

}



.header {

  width: 100%;

  position: sticky;

  top: 0;

  transition: .5s;

  width: 100%;

  z-index: 999;

}



.header .header-pc {

  display: flex;

  justify-content: space-between;

}



.header .sp-nav {

  display: none;

}



.header__logo {

  width: 190px;

  height: 60px;

  margin-left: 20px;

  margin-top: 20px;

  transition: .5s ease-out;

}



.header__logo.other {

  width: 216px;

  height: 68px;

  margin-top: 40px;

  margin-left: 40px;

  margin-bottom: -28px;

}



.is-white .header__logo {

  margin: auto 0 auto 20px;

}



.is-white .header__logo.other {

  width: 190px;

  height: 60px;

  margin: auto 0 auto 20px;

}



.fixedsticky-withoutfixedfixed .fixedsticky-on,

.fixed-supported .fixedsticky-on {

  position: fixed;

}



.fixedsticky-dummy {

  display: none;

}



.nav-list {

  background-color: #ffffff;

  display: flex;

  position: relative;

}



.nav-list__item.current a {

  opacity: 50%;

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .nav-list__item.current {

    content: '';

    border-bottom: 1px solid #333333;

  }

}



.nav-list__item {

  width: 140px;

  height: 40px;

  padding: 20px 30px;

}



.nav-list__item .nav-item-wrapper {

  display: flex;

  align-items: center;

}



.nav-list__item .nav-item-wrapper svg {

  fill: none;

  stroke: #0C4198;

  margin-left: 10px;

}



.nav-list__item .nav-item-main {

  font-size: 1.125em;

  color: #0C4198;

  font-weight: bold;

  display: block;

}



.nav-list__item .nav-item-sub {

  font-size: .75em;

  color: #0C4198;

  font-weight: bold;

  display: block;

  opacity: 80%;

}



.nav-list__item.current a {

  cursor: default;

  pointer-events: none;

}



.nav-list__item:not(.current):hover .nav-item-wrapper svg {

  stroke: #5A5A5A;

}



.nav-list__item:not(.current):hover .nav-item-main,

.nav-list__item:not(.current):hover .nav-item-sub {

  color: #5A5A5A;

}



.nav-list::after {

  content: '';

  width: 1px;

  height: 30px;

  position: absolute;

  top: 25px;

  left: 50%;

  background-color: #CCCCCC;

}



.header__nav {

  width: 640px;

  display: flex;

}



.header__nav .option,

.header__nav .menu {

  width: 80px;

  height: 80px;

}



.header__nav .option {

  background-color: #46C4B0;

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);

}



.header__nav .option > div > svg {

  fill: #0C4198;

}



.header__nav .option .nav-icon {

  fill: none;

  stroke: #333333;

}



.header__nav .option:hover {

  cursor: pointer;

  background-color: #5A5A5A;

  color: #FFFFFF;

}



.header__nav .option:hover .nav-icon {

  stroke: #FFFFFF;

}



.header__nav .option .nav-icon {

  width: 22px;

  height: 22px;

  display: block;

  margin: 0px auto 5px auto;

  padding-top: 20px;

}



.header__nav .option .nav-icon .stroke {

  stroke: #333333;

}



.header__nav .option span {

  display: block;

  text-align: center;

  font-weight: bold;

}



.header__nav .option .menu-open > span {

  padding-bottom: 15px;

  font-size: .75em;

}



.header__nav .option .gear-close.active {

  display: block;

  width: 80px;

  height: 80px;

  position: absolute;

  right: 160px;

  background-color: #EFEFEF;

  z-index: 5;

}



.header__nav .option .search-close.active {

  display: block;

  width: 80px;

  height: 80px;

  position: absolute;

  right: 80px;

  background-color: #EFEFEF;

  z-index: 5;

}



.header__nav .option:first-of-type > .menu-open {

  position: relative;

}



.header__nav .option:first-of-type > .menu-open::after {

  content: '';

  width: 1px;

  height: 30px;

  background-color: #333333;

  position: absolute;

  top: 50%;

  right: -1px;

  transform: translateY(-50%);

  opacity: 0.4;

}



.header__nav .option:first-of-type > .menu-open:hover::after {

  content: none;

}



.header__nav .menu {

  background-color: #008463;

  color: #FFFFFF;

  text-align: center;

}



.header__nav .menu:hover {

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);

  cursor: pointer;

  background-color: #5A5A5A;

  color: #FFFFFF;

}



.header__nav .menu .ham-menu-icon,

.header__nav .menu .ham-menu-icon span {

  display: inline-block;

  transition: all 0.4s;

  box-sizing: border-box;

  font-size: .75em;

}



.header__nav .menu .menu-open > span {

  display: block;

  margin-top: 3px;

  font-size: .75em;

  font-weight: bold;

}



.header__nav .menu .ham-menu-icon {

  position: relative;

  width: 20px;

  height: 16px;

  margin-top: 22px;

}



.header__nav .menu .ham-menu-icon span {

  position: absolute;

  left: 0;

  width: 100%;

  height: 2px;

  background-color: #FFFFFF;

  border-radius: 4px;

  z-index: 1;

}



.header__nav .menu .ham-menu-icon span:nth-of-type(1) {

  top: 0;

}



.header__nav .menu .ham-menu-icon span:nth-of-type(2) {

  top: 50%;

  left: 50%;

  -webkit-transform: translate3d(-50%, -50%, 0);

  transform: translate3d(-50%, -50%, 0);

}



.header__nav .menu .ham-menu-icon span:nth-of-type(3) {

  bottom: 0;

}



.header__nav .menu .ham-close.active {

  display: block;

  width: 80px;

  height: 80px;

  position: absolute;

  right: 0;

  background-color: #EFEFEF;

  z-index: 5;

}



.header__nav .menu-close {

  display: none;

  color: #333333;

}



.header__nav .menu-close img {

  display: block;

  margin: 20px auto 0 auto;

}



.header__nav .menu-close span {

  display: block;

  margin: 10px auto 0 auto;

  font-weight: bold;

  font-size: .75em;

}



.header__nav .menu-modal {

  width: 100%;

  height: 200vh;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 2;

  background-color: rgba(0, 0, 0, 0.9);

  display: none;

  cursor: auto;

}



.header__nav .setting-modal {

  width: 100%;

  height: 120px;

  background-color: #EFEFEF;

  margin: 80px auto 0 auto;

}



.header__nav .setting-modal__inner {

  width: 952px;

  margin: 0 auto;

  padding: 40px 0;

  color: #333333;

}



.header__nav .setting-modal__inner .tools {

  display: flex;

}



.header__nav .setting-modal__inner .goog-te-gadget-simple {

  width: 130px;

  margin-right: 30px;

  line-height: 32px;

  padding: 5px;

  border-radius: 8px;

}



.header__nav .setting-modal__inner .goog-te-gadget-simple img {

  display: none;

}



.header__nav .setting-modal__inner .goog-te-gadget-simple span {

  display: inline-block;

}



.header__nav .setting-modal__inner .goog-te-gadget-simple span:nth-of-type(1) {

  font-size: 14px;

  margin-right: 40px;

  color: #333333;

  opacity: 0.6;

}



.header__nav .setting-modal__inner .goog-te-gadget-simple span:nth-of-type(2) {

  display: none;

}



.header__nav .setting-modal__inner .goog-te-gadget-simple span:nth-of-type(3) {

  color: #000000 !important;

}



.header__nav .setting-modal__inner #theme {

  display: flex;

  margin-right: 30px;

  padding-top: 5px;

}



.header__nav .setting-modal__inner #theme p {

  font-size: 1em;

  font-weight: bold;

  margin-right: 20px;

  line-height: 32px;

}



.header__nav .setting-modal__inner #theme #ss-theme {

  display: flex;

  justify-content: space-between;

  width: 200px;

}



.header__nav .setting-modal__inner #theme #ss-theme a {

  min-width: 38px;

  height: 30px;

  text-align: center;

  line-height: 30px;

  border-radius: 8px;

  font-size: 14px;

  font-weight: bold;

  cursor: pointer;

}



.header__nav .setting-modal__inner #theme #ss-theme .white {

  background-color: #FFFFFF;

  border: 1px solid #CCCCCC;

}



.header__nav .setting-modal__inner #theme #ss-theme .black {

  background-color: #000000;

  color: #FFFFFF;

  border: 1px solid #CCCCCC;

}



.header__nav .setting-modal__inner #theme #ss-theme .blue {

  background-color: #0066CC;

  color: #FFFFFF;

  border: 1px solid #0066CC;

}



.header__nav .setting-modal__inner #theme #ss-theme .yellow {

  background-color: #FDFE00;

  border: 1px solid #CCCCCC;

}



.header__nav .setting-modal__inner #theme #ss-theme .green-tea {

  background-color: #1B7A3B;

  color: #FFFFFF;

  border: 1px solid #1B7A3B;

}



.header__nav .setting-modal__inner #size {

  display: flex;

  margin-right: 30px;

  padding-top: 5px;

}



.header__nav .setting-modal__inner #size p {

  font-size: 1em;

  font-weight: bold;

  margin-right: 20px;

  line-height: 32px;

}



.header__nav .setting-modal__inner #size span {

  display: inline-block;

  width: 32px;

  height: 32px;

  line-height: 32px;

  background-color: #FFFFFF;

  border: 1px solid #CCCCCC;

  border-radius: 8px;

  margin-right: 10px;

  font-size: 14px;

  font-weight: bold;

  cursor: pointer;

}



.header__nav .setting-modal__inner #ss-voice {

  display: block;

  width: 160px;

  height: 48px;

  background-color: #FFAE80;

  border-radius: 8px;

  line-height: 48px;

  font-size: 14px;

  font-weight: bold;

  cursor: pointer;

}



.header__nav .setting-modal__inner #ss-voice svg {

  margin-right: 5px;

  vertical-align: text-bottom;

}



.header__nav .setting-modal__inner #ss-voice .fa-volume-up {

  display: none;

}



.header__nav .search-modal {

  width: 100%;

  height: auto;

  background-color: #EFEFEF;

  margin: 80px auto 0 auto;

}



.header__nav .search-modal__inner {

  width: 720px;

  margin: 0 auto;

  padding: 40px 0;

  color: #333333;

}



.header__nav .search-modal__inner .search-title {

  text-align: left;

  font-size: 1em;

  font-weight: bold;

}



.header__nav .search-modal__inner .gsc-search-box {

  position: relative !important;

}



.header__nav .search-modal__inner .gsc-input {

  position: relative;

}



.header__nav .search-modal__inner .gsc-input .gsib_a {

  padding: 0 !important;

}



.header__nav .search-modal__inner .gsc-input .gsc-input-box {

  background: none !important;

  border: none !important;

}



.header__nav .search-modal__inner .gsc-input input.gsc-input {

  position: relative !important;

  width: 100% !important;

  height: 48px !important;

  border-radius: 55px !important;

  border: 1px solid #CCCCCC !important;

  margin-top: 10px !important;

  padding: 0 40px 0 20px !important;

  box-sizing: border-box !important;

  background: #FFFFFF !important;

}



.header__nav .search-modal__inner td.gsc-search-button {

  position: absolute !important;

  top: 15px !important;

  right: 20px !important;

  opacity: 0 !important;

  height: 40px !important;

  width: 40px !important;

}



.header__nav .search-modal__inner td.gsc-search-button > button {

  width: inherit !important;

  height: inherit !important;

  padding: 0 !important;

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .header__nav .search-modal__inner td.gsc-search-button {

    top: 20px !important;

  }

}



.header__nav .search-modal__inner .gsc-input-box::after {

  content: '' !important;

  width: 22px !important;

  height: 22px !important;

  position: absolute !important;

  top: 25px !important;

  right: 30px !important;

  background-image: url("../../img/icon/search.png") !important;

  background-repeat: no-repeat !important;

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .header__nav .search-modal__inner .gsc-input-box::after {

    top: 30px !important;

  }

}



.header__nav .search-modal__inner .gsib_b {

  display: none !important;

}



.header__nav .search-modal__inner .search-word {

  margin-top: 40px;

}



.header__nav .search-modal__inner .search-word-list {

  width: 720px;

  display: flex;

  justify-content: flex-start;

  flex-wrap: wrap;

}



.header__nav .search-modal__inner .search-word-list__item {

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);

  height: 32px;

  line-height: 32px;

  border-radius: 20px;

  display: inline-block;

  background-color: #FFFFFF;

  padding: 5px 10px;

  margin-top: 10px;

  margin-right: 10px;

  font-weight: bold;

  opacity: 0.6;

}



.header__nav .search-modal__inner .search-word-list__item > a {

  display: block;

  cursor: pointer;

}



.header__nav .search-modal__inner .search-word-list__item:hover {

  background-color: #5A5A5A;

}



.header__nav .search-modal__inner .search-word-list__item:hover > a {

  color: #FFFFFF;

}



.header__nav .link-modal {

  position: absolute;

  top: 25%;

  left: 50%;

  transform: translateX(-50%) translateY(-50%);

  width: 1000px;

  height: calc(100vh - 200px);

  background-color: #EFEFEF;

  padding: 0 60px;

  box-sizing: border-box;

  color: #000000;

  overflow-y: scroll;

}



.add-alert .header__nav .link-modal {

  margin-top: -120px;

}



.is-white .header__nav .link-modal {

  margin-top: 0;

}



.header__nav .link-modal__wrapper {

  display: flex;

}



.header__nav .link-modal__wrapper.citizens {

  margin-top: 60px;

}



.header__nav .link-modal__wrapper .title {

  display: block;

  width: 130px;

  font-size: 0.75em;

  font-weight: bold;

  text-align: left;

}



.header__nav .link-modal__wrapper dl {

  width: 740px;

  text-align: left;

  font-weight: bold;

}



.header__nav .link-modal__wrapper dl .category {

  font-size: 1.25em;

  border-top: 1px dotted #CCCCCC;

  height: 60px;

  line-height: 60px;

  position: relative;

  cursor: pointer;

}



.header__nav .link-modal__wrapper dl .category .accordion_status_image {

  width: 16px;

  height: 16px;

  position: absolute;

  top: 23px;

  right: 20px;

  background-repeat: no-repeat;

  background-size: cover;

}



.header__nav .link-modal__wrapper dl .category .is_accordion_open {

  background-image: url("../../img/icon/accordion_open.svg");

}



.header__nav .link-modal__wrapper dl .category .is_accordion_close {

  background-image: url("../../img/icon/accordion_close.svg");

}



.header__nav .link-modal__wrapper dl .content {

  color: #0C4198;

  border-top: 1px dotted #CCCCCC;

}



.header__nav .link-modal__wrapper dl .content .content__category {

  font-size: 1em;

  margin-top: 30px;

}



.header__nav .link-modal__wrapper dl .content .content__category span {

  display: inline-block;

  line-height: 36px;

}



.header__nav .link-modal__wrapper dl .content .content__category svg {

  fill: #0C4198;

  vertical-align: sub;

}



.header__nav .link-modal__wrapper dl .content .modal-nav-list {

  display: flex;

  flex-wrap: wrap;

  margin-bottom: 20px;

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .header__nav .link-modal__wrapper dl .content .modal-nav-list {

    justify-content: space-between;

  }

}



.header__nav .link-modal__wrapper dl .content .modal-nav-list__item {

  width: 135px;

  margin-top: 10px;

  margin-right: 20px;

  position: relative;

  padding-left: 20px;

  font-size: 0.75em;

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .header__nav .link-modal__wrapper dl .content .modal-nav-list__item {

    width: calc(50% - 30px);

    margin-right: 0;

  }

}



.header__nav .link-modal__wrapper dl .content .modal-nav-list__item::before {

  content: '';

  position: absolute;

  width: 10px;

  height: 10px;

  background-image: url("../..../..../..../../img/icon/icon_arrow_blue.svg");

  background-repeat: no-repeat;

  top: 5px;

  left: 0;

}



.header__nav .link-modal .charm {

  margin-top: 40px;

}



.header__nav .modal-nav-button-list {

  display: flex;

  width: 700px;

  margin: 60px auto;

  justify-content: space-between;

}



.header__nav .modal-nav-button-list__item {

  width: 160px;

  height: 48px;

  background-color: #FFAE80;

  border-radius: 8px;

  line-height: 48px;

  text-align: center;

  font-size: .875em;

  font-weight: bold;

}



.header__nav .modal-nav-button-list__item a {

  width: 100%;

  height: 100%;

  display: inline-block;

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .header .header__logo {

    margin: auto 0 auto 10px;

    height: 36px;

  }

  .header .header__nav {

    width: 100%;

    justify-content: flex-end;

  }

  .sp-nav {

    display: block;

  }

  .sp-nav .nav-item-wrapper {

    display: flex;

    align-items: center;

  }

  .sp-nav .nav-item-wrapper svg {

    margin-left: 20px;

  }

  .sp-nav .nav-item-wrapper svg .stroke {

    stroke: #0C4198;

  }

  .nav-list__item {

    width: 50%;

  }

  .header__nav::after {

    right: 100px;

    height: 20px;

  }

  .header__nav .option,

  .header__nav .menu {

    width: 50px;

    height: 50px;

  }

  .add-alert .header__nav .option .menu-modal, .add-alert .header__nav .option .menu-close {

    margin-top: -186px;

  }

  .is-white .header__nav .option .menu-modal, .is-white .header__nav .option .menu-close {

    margin-top: 0;

  }

  .header__nav .option .nav-icon {

    margin: 5px auto 3px auto;

    padding-top: 0;

  }

  .header__nav .option .gear-close.active {

    width: 50px;

    height: 50px;

    right: 100px;

  }

  .header__nav .option .search-close.active {

    width: 50px;

    height: 50px;

    right: 50px;

  }

  .header__nav .option span {

    font-size: .625em;

    margin-top: 5px;

  }

  .header__nav .option .menu-open > span {

    padding-bottom: 0;

    font-size: .625em;

  }

  .header__nav .option:first-of-type > .menu-open::after {

    height: 20px;

  }

  .add-alert .header__nav .menu .menu-modal, .add-alert

  .header__nav .menu .menu-close {

    margin-top: -186px;

  }

  .is-white .header__nav .menu .menu-modal, .is-white

  .header__nav .menu .menu-close {

    margin-top: 0;

  }

  .header__nav .menu .ham-menu-icon {

    margin-top: 8px;

  }

  .header__nav .menu .ham-close.active {

    width: 50px;

    height: 50px;

  }

  .header__nav .menu .ham-close.active img {

    margin: 10px auto 0 auto;

  }

  .header__nav .menu .ham-close.active span {

    margin: 5px auto 0 auto;

    font-size: .625em;

  }

  .header__nav .menu .menu-open > span {

    margin-top: 2px;

    font-size: .625em;

  }

  .header__nav .menu-close img {

    margin: 10px auto 0 auto;

  }

  .header__nav .menu-close span {

    margin: 5px auto 0 auto;

    font-size: .625em;

  }

  .header__nav .search-modal {

    margin: 50px auto 0 auto;

  }

  .header__nav .search-modal__inner {

    width: calc(100% - 40px);

    padding: 40px 20px;

  }

  .header__nav .search-modal__inner .search-word {

    margin-top: 40px;

  }

  .header__nav .search-modal__inner .search-title {

    text-align: center;

  }

  .header__nav .search-modal__inner .search-word-list {

    width: calc(100% - 50px);

    margin: 0 auto;

    justify-content: center;

  }

  .header__nav .setting-modal {

    height: 450px;

    margin: 50px auto 0 auto;

  }

  .header__nav .setting-modal__inner {

    width: calc(100% - 40px);

    padding: 40px 20px;

    text-align: center;

  }

  .header__nav .setting-modal__inner .tools {

    display: block;

  }

  .header__nav .setting-modal__inner .goog-te-gadget-simple {

    width: 160px;

    height: 36px;

    margin-right: 0;

  }

  .header__nav .setting-modal__inner .goog-te-gadget-simple span {

    margin-top: 1px;

  }

  .header__nav .setting-modal__inner .goog-te-gadget-simple span:nth-of-type(1) {

    margin-right: 70px;

  }

  .header__nav .setting-modal__inner .goog-te-gadget-simple .goog-te-menu-value {

    font-size: .875em;

  }

  .header__nav .setting-modal__inner #theme {

    display: block;

    margin-top: 30px;

    margin-right: 0;

  }

  .header__nav .setting-modal__inner #theme p {

    margin-right: 0;

  }

  .header__nav .setting-modal__inner #theme #ss-theme {

    width: 280px;

    margin: 0 auto;

  }

  .header__nav .setting-modal__inner #theme #ss-theme a {

    width: 38px;

    height: 38px;

    line-height: 38px;

  }

  .header__nav .setting-modal__inner #size {

    display: block;

    margin-top: 30px;

    margin-right: 0;

  }

  .header__nav .setting-modal__inner #size p {

    margin-right: 0;

  }

  .header__nav .setting-modal__inner #size span {

    margin-right: 20px;

    width: 40px;

    height: 40px;

    line-height: 40px;

  }

  .header__nav .setting-modal__inner #size #ss-large {

    margin-right: 0;

  }

  .header__nav .setting-modal__inner #ss-voice {

    margin: 28px auto 0 auto;

  }

  .header__nav .link-modal {

    position: initial;

    top: initial;

    left: initial;

    transform: initial;

    margin-top: 50px;

    width: 100%;

    padding: 0 20px;

    height: calc(100vh - 50px);

  }

  .add-alert .header__nav .link-modal {

    margin-top: 50px;

  }

  .is-white .header__nav .link-modal {

    margin-top: 50px;

  }

  .header__nav .link-modal__wrapper {

    display: block;

  }

  .header__nav .link-modal__wrapper.citizens {

    margin-top: 40px;

  }

  .header__nav .link-modal__wrapper .title {

    margin-bottom: 20px;

  }

  .header__nav .link-modal__wrapper dl {

    width: 100%;

  }

  .header__nav .modal-nav-button-list {

    flex-wrap: wrap;

    width: 100%;

    margin-top: 24px;

    margin-bottom: 120px;

  }

  .header__nav .modal-nav-button-list__item {

    width: calc((100vw - 56px) /2);

    margin-top: 16px;

  }

  .nav-list {

    margin-bottom: 2px;

  }

  .nav-list__item {

    height: 50px;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 0;

  }

  .nav-list__item .nav-item-main {

    font-size: .875em;

  }

  .nav-list__item .nav-item-sub {

    font-size: .625em;

  }

  .nav-list::after {

    height: 20px;

    top: 15px;

    left: 50%;

  }

}



.news {

  width: 1020px;

  margin: 0 auto;

  background-color: #FFFFFF;

  border-radius: 16px;

  padding: 60px 4.39vw;

  transform: translateY(-150px);

  color: #333333;

  box-sizing: border-box;

}



.news ul {

  margin-top: 30px;

}



.news ul > li > dl {

  border-bottom: dashed 1.5px #CCCCCC;

  padding-bottom: 16px;

  display: flex;

}



.news ul > li > dl > dt {

  margin-right: 100px;

}



.news ul > li > dl > dd {

  font-weight: bold;

}



.news ul > li > dl > dd > a:hover {

  text-decoration: underline;

}



.news ul > li > dl .tag {

  font-size: .75em;

  font-weight: bold;

  border-radius: 12px;

  margin-left: 24px;

  background-color: #FABAB4;

  padding: 4px 8px;

}



.news li:not(:first-child) {

  margin-top: 16px;

}



.news ul > li:last-child > dl {

  border-bottom: none;

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .news {

    max-width: 100%;

    width: auto;

    border-radius: 12px;

    padding: 16px 24px;

    transform: translateY(-45px);

    margin: 0 20px -60px;

  }

  .news ul {

    margin-top: 16px;

  }

  .news li:not(:first-child) {

    margin-top: 10px;

  }

  .news ul > li > dl {

    padding-bottom: 8px;

    display: block;

    font-size: .875em;

  }

  .news ul > li > dl .tag {

    margin-left: 10px;

  }

}



.icon-arrow {

  width: 13px;

  height: 13px;

}



.icon-arrow-up {

  width: 13px;

  height: 13px;

}



.icon-arrow-down {

  width: 13px;

  height: 13px;

}



.icon-arrow-circle {

  width: 20px;

  height: 20px;

}



.icon-link {

  width: 10px;

  height: 10px;

}



.icon-warning {

  width: 40px;

  height: 40px;

}



.icon-speaker {

  width: 16px;

  height: 16px;

}



.move-wave {

  width: 100%;

  height: 30px;

  position: absolute;

  left: 0;

  bottom: 0;

  z-index: 0;

  overflow: hidden;

}



.move-wave.top {

  bottom: initial;

  top: 0;

}



.move-wave.top.yellow {

  top: -29px;

}



.move-wave .waves {

  position: relative;

  width: 100%;

  height: 30px;

  margin-bottom: -7px;

}



.move-wave .waves.reverse {

  transform: scale(1, -1);

}



.move-wave .parallax > use {

  animation: move-forever 10s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;

}



@keyframes move-forever {

  0% {

    transform: translate3d(-90px, 0, 0);

  }

  100% {

    transform: translate3d(85px, 0, 0);

  }

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .move-wave {

    width: 100%;

    height: 30px;

    position: absolute;

    left: 0;

    bottom: 0;

    z-index: 0;

  }

  .move-wave.top {

    bottom: initial;

    top: 0;

  }

  .move-wave .waves {

    position: relative;

    width: 100%;

    height: 30px;

    margin-bottom: -7px;

  }

  .move-wave .parallax > use {

    animation: move-forever 10s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;

  }

  @keyframes move-forever {

    0% {

      transform: translate3d(-90px, 0, 0);

    }

    100% {

      transform: translate3d(85px, 0, 0);

    }

  }

}



.container__charm {

  position: relative;

  margin-top: -80px;

}



.container__charm .mainVisual {

  height: 66.66667vw;

  min-height: 500px;

  max-height: 100vh;

  background-repeat: no-repeat;

  overflow: hidden;

  position: relative;

}



.container__charm .mainVisual.slide-background {

  background-image: url("../../img/charm/mv1.jpg");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

}



.container__charm .mainVisual .slide {

  opacity: 0;

}



.container__charm .mainVisual .slide.slick-initialized {

  opacity: 1;

}



.container__charm .mainVisual .slick-slider,

.container__charm .mainVisual .slick-list,

.container__charm .mainVisual .slick-slide,

.container__charm .mainVisual .slick-track,

.container__charm .mainVisual .slick-slide > div {

  height: 100%;

}



.container__charm .mainVisual .slide-animation {

  animation: fadeZoom 12s 0s forwards;

}



.container__charm .mainVisual .slick-dots {

  bottom: 120px !important;

}



.container__charm .mainVisual .slide-arrow {

  cursor: pointer;

}



.container__charm .mainVisual .slide-arrow.next-arrow {

  position: absolute;

  bottom: 82px;

  right: 60px;

}



.container__charm .mainVisual .slide-arrow.prev-arrow {

  position: absolute;

  z-index: 1;

  bottom: 82px;

  right: 82px;

}



.container__charm .mainVisual .slide-dots {

  position: absolute;

  bottom: 78px;

  right: 105px;

  display: block;

  width: 100%;

  padding: 0;

  margin: 0;

  list-style: none;

  text-align: right;

  pointer-events: none;

  background: none !important;

}



.container__charm .mainVisual .slide-dots li {

  position: relative;

  display: inline-block;

  width: 30px;

  height: 2px;

  margin: 0 5px;

  padding: 0;

  cursor: pointer;

  pointer-events: painted;

}



.container__charm .mainVisual .slide-dots li > button {

  font-size: 0;

  line-height: 0;

  display: block;

  width: 30px;

  height: 2px;

  padding: 5px;

  cursor: pointer;

  color: transparent;

  border: 0;

  outline: 0;

  background: 0 0;

}



.container__charm .mainVisual .slide-dots li > button::before {

  font-family: slick;

  font-size: 6px;

  line-height: 20px;

  position: absolute;

  top: 0;

  left: 0;

  width: 30px;

  height: 2px;

  content: '•';

  text-align: center;

  background-color: #fff;

  -webkit-font-smoothing: antialiased;

}



.container__charm .mainVisual .slide-dots li.slick-active > button::before {

  background-color: #B4E146;

}



@keyframes fadeZoom {

  0% {

    transform: scale(1);

  }

  100% {

    transform: scale(1.2);

  }

}



.container__charm .mainVisual .item {

  height: 100%;

}



.container__charm .mainVisual .item > img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  font-family: 'object-fit: cover;';

  /*IE対策*/

}



.container__charm .mainVisual .item__text {

  position: absolute;

  left: 80px;

  bottom: 87px;

  z-index: 9999;

}



.container__charm .mainVisual .item__text span {

  font-size: 3em;

  font-family: 'Noto Serif JP', serif;

  display: inline-block;

  margin-top: 20px;

  background-color: #FFFFFF;

  line-height: 1.25;

}



.container__charm .mainVisual .item__text a {

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);

  font-size: 1.25em;

  background-color: #FFFFFF;

  color: #0C4198;

  font-weight: bold;

  margin-top: 30px;

  display: inline-block;

  position: relative;

  padding-right: 20px;

  line-height: 1.25;

}



.container__charm .mainVisual .item__text a:after {

  content: '';

  width: 13px;

  height: 13px;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  right: 5px;

  background-image: url("../..../..../..../../img/icon/icon_arrow_blue.svg");

  background-size: 13px 13px;

  background-repeat: no-repeat;

}



.container__charm .mainVisual .item__text a:hover {

  color: #5A5A5A;

}



.container__charm .mainVisual .item__text a:hover::after {

  background-image: url("../..../../img/icon/icon_arrow_gray.svg");

}



.container__charm.add-alert .mainVisual {

  max-height: calc(100vh - 121px);

}



.container__charm .emergency + .hero {

  margin-top: 70px;

}



.container__charm .hero {

  background-image: url("../..../../img/common/yellow_pattern.png");

  background-repeat: repeat;

  padding: 80px 4.392vw;

  position: relative;

}



.container__charm .hero .no-bold {

  font-weight: 100;

  font-size: 1em;

}



.container__charm .hero .section {

  max-width: 1160px;

  margin: 0 auto;

  display: flex;

}



.container__charm .hero .sightsee {

  max-width: 710px;

  margin-right: 3.660vw;

}



.container__charm .hero .sightsee .tourism, .container__charm .hero .sightsee .main {

  margin-top: 28px;

}



.container__charm .hero .emigration .reference {

  margin-top: 28px;

}



.container__charm .hero .emigration .contents {

  margin-top: 20px;

}



.container__charm .hero .emigration__content {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  margin-top: 16px;

  text-align: center;

  overflow: hidden;

}



.container__charm .hero .emigration__content--item {

  width: calc(50% - 10px);

  background-color: #FFFFFF;

  border-radius: 8px;

}



.container__charm .hero .emigration__content--item--img {

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);

  width: 190px;

  height: 95px;

  border-top-left-radius: 8px;

  border-top-right-radius: 8px;

  vertical-align: middle;  

}



.container__charm .hero .emigration__content--item--img:hover {

  opacity: .6;

}



.container__charm .hero .emigration__content--item--text {

  font-size: .75em;

  font-weight: bold;

  padding: 10px 0;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

}



.container__charm .hero .emigration__content--item:nth-of-type(n + 3) {

  margin-top: 20px;

}



.container__charm .hero .emigration__link {

  margin-top: 12px;

}



.container__charm .hero .emigration__link > li {

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);

  width: 400px;

  padding: 19px 0;

  background-color: #FFAE80;

  border-radius: 8px;

  text-align: center;

  font-size: .875em;

  font-weight: bold;

}



.container__charm .hero .emigration__link > li:hover {

  background-color: #5A5A5A;

  color: #FFFFFF;

  cursor: pointer;

}



.container__charm .hero .emigration__link > li:nth-child(2) {

  margin-top: 20px;

}



.container__charm .hero .hero-menu {

  width: 710px;

  display: flex;

  margin-top: 10px;

  flex-wrap: wrap;

  justify-content: space-between;

  overflow: hidden;

}



.container__charm .hero .hero-menu__content {

  display: flex;

  text-align: center;

  flex-wrap: wrap;

  margin: 0 auto;

  justify-content: space-between;

  margin-top: 16px;

  overflow: hidden;

}



.container__charm .hero .hero-menu__content--item {

  width: 340px;

  height: 190px;

  background-color: #FFFFFF;

  border-radius: 8px;

}



.container__charm .hero .hero-menu__content--item--img {

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);

  width: 340px;

  height: 140px;

  border-top-left-radius: 8px;

  border-top-right-radius: 8px;

}



.container__charm .hero .hero-menu__content--item--img:hover {

  opacity: .6;

}



.container__charm .hero .hero-menu__content--item--text {

  font-weight: bold;

  font-size: .75em;

  height: 40px;

  display: flex;

  justify-content: center;

  align-items: center;

}



.container__charm .hero .hero-menu__content--item:first-child {

  margin-left: 0;

}



.container__charm .hero .hero-menu__item {

  width: 220px;

  border: 2px solid #008463;

  background-color: #FFFFFF;

  border-radius: 8px;

  margin-bottom: 20px;

  padding: 10px 0;

  box-sizing: border-box;

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);

}



.container__charm .hero .hero-menu__item .hero-menu-item-inner {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  position: relative;

  box-sizing: border-box;

}



.container__charm .hero .hero-menu__item .hero-menu-item-inner .image {

  width: 70px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.container__charm .hero .hero-menu__item .hero-menu-item-inner .text {

  color: #333333;

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);  

}



.container__charm .hero .hero-menu__item .hero-menu-item-inner .text span {

  display: block;

}



.container__charm .hero .hero-menu__item .hero-menu-item-inner .text span:first-child {

  font-size: 1.1875em;

  font-weight: bold;

}



.container__charm .hero .hero-menu__item .hero-menu-item-inner .text span:nth-child(2) {

  font-size: .6875em;

  font-weight: bold;

  opacity: .8;

}



.container__charm .hero .hero-menu__item:hover {

  background-color: #008463;

}



.container__charm .hero .hero-menu__item:hover .text {

  color: #FFFFFF;

}



.container__charm .hero .hero-menu__item .hero-menu-item-inner::before {

  content: '';

  width: 70px;

  height: 40px;

  position: absolute;

  top: 20px;

  left: 0px;

  background-repeat: no-repeat;

  background-position-x: center;

}



.container__charm .hero .margin {

  margin-top: 8px;

}



.container__charm .hero .administration {

  margin-top: 40px;

}



.container__charm .hero .hero-menu-useful {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  width: 100%;

  margin-top: 10px;

  overflow: hidden;

}



.container__charm .hero .hero-menu-useful__item {

  width: 160px;

  background-color: #FFAE80;

  border-radius: 8px;

  color: #333333;

  font-size: .875em;

  text-align: center;

  font-weight: bold;

  position: relative;

  padding: 13.5px 0;

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);

}



.container__charm .hero .hero-menu-useful__item svg {

  transition: 2s cubic-bezier(0.16, 1, 0.3, 1);

}



.container__charm .hero .hero-menu-useful__item:hover {

  background-color: #5A5A5A;

  color: #FFFFFF;

}



.container__charm .hero .hero-menu-useful__item:hover svg {

  fill: #FFFFFF;

}



.container__charm .hero .hero-menu-useful__item a {

  display: block;



}



.container__charm .event {

  padding-bottom: 100px;

}



.container__charm .event .event-list {

  margin-bottom: 0;

}



.container__charm .about {

  margin-top: 100px;

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .container__charm {

    margin-top: 0;

  }

  .container__charm .mainVisual {

    height: 100vw;

    min-height: initial;

    position: relative;

  }

  .container__charm .mainVisual .slick-slider,

  .container__charm .mainVisual .slick-list,

  .container__charm .mainVisual .slick-slide,

  .container__charm .mainVisual .slick-track,

  .container__charm .mainVisual .slick-slide > div {

    height: inherit;

  }

  .container__charm .mainVisual .slick-slider {

    margin-bottom: 0;

  }

  .container__charm .mainVisual .slide-arrow {

    display: none !important;

  }

  .container__charm .mainVisual .slide-dots {

    bottom: 15px;

    right: 0;

    text-align: center;

  }

  .container__charm .mainVisual .slide-dots > li {

    width: 25px;

  }

  .container__charm .mainVisual .slide-dots > li button {

    width: 25px;

  }

  .container__charm .mainVisual .item {

    height: inherit;

  }

  .container__charm .mainVisual .item img {

    object-fit: cover;

    font-family: 'object-fit: cover;';

    /*IE対策*/

    height: 100%;

  }

  .container__charm .mainVisual .item__text {

    left: 20px;

    bottom: 40px;

  }

  .container__charm .mainVisual .item__text span {

    font-size: 1.375em;

    margin-top: 10px;

  }

  .container__charm .mainVisual .item__text a {

    margin-top: 10px;

    font-size: .75em;

    padding: 0px 20px 0px 0px;

  }

  .container__charm .mainVisual .item__text a:after {

    content: '';

    width: 13px;

    height: 13px;

    position: absolute;

    top: 7px;

    right: 7px;

    background-image: url("../..../..../..../../img/icon/icon_arrow_blue.svg");

    background-size: 13px 13px;

    background-repeat: no-repeat;

  }

  .container__charm .emergency + .hero {

    margin-top: 55px;

  }

  .container__charm .hero {

    width: calc(100% - 32px);

    padding: 40px 16px 50px 16px;

    box-sizing: unset;

  }

  .container__charm .hero .administration {

    margin-top: 0;

  }

  .container__charm .hero .sightsee {

    margin: 0;

  }

  .container__charm .hero .sightsee .section__sub {

    display: flex;

    flex-direction: column;

  }

  .container__charm .hero .sightsee .section__sub > .main {

    order: 1;

    margin-top: 16px;

  }

  .container__charm .hero .sightsee .section__sub > .main .section__subtitle {

    font-size: .875em;

  }

  .container__charm .hero .sightsee .section__sub > .life {

    margin-top: 10px;

    order: 2;

  }

  .container__charm .hero .sightsee .section__sub > .life .section__subtitle {

    font-size: .875em;

  }

  .container__charm .hero .sightsee .section__sub > .tourism {

    order: 3;

    margin-top: 14px;

  }

  .container__charm .hero .sightsee .section__sub > .tourism .section__subtitle {

    font-size: .875em;

  }

  .container__charm .hero .section {

    width: auto;

    display: block;

  }

  .container__charm .hero .section__title span:nth-child(2) p {

    margin-right: 5px;

  }

  .container__charm .hero .section__title span:nth-child(2) svg {

    width: 15px;

    height: 15px;

  }

  .container__charm .hero .hero-menu {

    width: 100%;

    margin-top: 4px;

    justify-content: space-between;

  }

  .container__charm .hero .hero-menu__content {

    margin-top: 5px;

  }

  .container__charm .hero .hero-menu__content--item {

    width: calc(50% - 4px);

    height: auto;

  }

  .container__charm .hero .hero-menu__content--item--text {

    font-size: .625em;

    height: 30px;

    padding: 5px 0;

  }

  .container__charm .hero .hero-menu__content--item--img {

    width: 100%;

    height: auto;

    vertical-align: top;

  }

  .container__charm .hero .hero-menu__item {

    width: calc(100%/3 - 10px);

    margin-right: 0;

    margin-bottom: 0;

    padding: 3px 0;    

  }

  .container__charm .hero .hero-menu__item:nth-of-type(n + 4) {

    margin-top: 8px;

  }

  .container__charm .hero .hero-menu__item .hero-menu-item-inner {

    padding-left: 0;

    text-align: center;

    flex-direction: column;

  }

  .container__charm .hero .hero-menu__item .hero-menu-item-inner .image {

    height: 40px;

    margin-top: 12px;

  }

  .container__charm .hero .hero-menu__item .hero-menu-item-inner .text {

    margin-top: 4px;

  }

  .container__charm .hero .hero-menu__item .hero-menu-item-inner .text span:first-child {

    font-size: .8125em;

  }

  .container__charm .hero .hero-menu__item .hero-menu-item-inner .text span:nth-child(2) {

    display: none;

  }

  .container__charm .hero .hero-menu-useful {

    width: 100%;

    margin-top: 4px;

  }

  .container__charm .hero .hero-menu-useful__item {

    width: calc(50% - 4px);

    font-size: .75em;

    margin-top: 0;

    padding: 7px 0;    

  }

  .container__charm .hero .hero-menu-useful__item:nth-of-type(n + 3) {

    margin-top: 8px;

  }

  .container__charm .hero .hero-menu-useful__item a {

    padding: 0;

    height: 100%;

    vertical-align: middle;

    display: flex;

    align-items: center;

    justify-content: center;

  }

  .container__charm .hero .emigration {

    width: 100%;

    margin-top: 20px;

  }

  .container__charm .hero .emigration .section__sub {

    display: flex;

    flex-direction: column;

  }

  .container__charm .hero .emigration .section__sub > .contents {

    order: 1;

    margin-top: 14px;

  }

  .container__charm .hero .emigration .section__sub > .contents .section__subtitle {

    font-size: .875em;

  }

  .container__charm .hero .emigration .section__sub > .reference {

    order: 2;

    margin-top: 14px;

  }

  .container__charm .hero .emigration .section__sub > .reference .section__subtitle {

    font-size: .875em;

  }

  .container__charm .hero .emigration__content {

    margin-top: 3px;

    justify-content: space-around;

  }

  .container__charm .hero .emigration__content--item {

    width: calc(50% - 6px);

    height: auto;

    margin: 0;

  }

  .container__charm .hero .emigration__content--item--img {

    width: 100%;

    height: auto;

  }

  .container__charm .hero .emigration__content--item--text {

    font-size: .625em;

    padding: 6px 0;

  }

  .container__charm .hero .emigration__content--item:nth-of-type(n + 3) {

    margin-top: 10px;

  }

  .container__charm .hero .emigration__link {

    margin-top: 2px;

  }

  .container__charm .hero .emigration__link > li {

    width: 100%;

    padding: 6px 0;

    background-color: #FFAE80;

    border-radius: 8px;

    text-align: center;

    font-size: .75em;

    font-weight: bold;

  }

  .container__charm .hero .emigration__link > li:hover {

    background-color: #5A5A5A;

    color: #FFFFFF;

    cursor: pointer;

  }

  .container__charm .hero .emigration__link > li:nth-child(2) {

    margin-top: 8px;

  }

  .container__charm .event {

    margin-top: 20px;

  }

  .container__charm .about {

    margin-top: 0;

  }

}



.container__hero {

  display: flex;

  align-items: flex-start;  

  position: relative;

}



@keyframes charm {

  0% {

    transform: scale(1);

  }

  30% {

    transform: scale(1.2);

  }

  100% {

    transform: scale(0.9);

  }

}



@keyframes charm-reverse {

  0% {

    transform: scale(0.9);

  }

  30% {

    transform: scale(1.2);

  }

  100% {

    transform: scale(1);

  }

}



@keyframes border-animation {

  to {

    transform: rotate(360deg);

  }

}



@keyframes green-circle {

  0% {

    border-radius: 60% 50% 70% 80% / 50% 60% 50% 70%;

  }

  25% {

    border-radius: 70% 60% 60% 90% / 70% 80% 40% 90%;

  }

  50% {

    border-radius: 60% 40% 70% 60% / 40% 60% 50% 60%;

  }

  75% {

    border-radius: 90% 60% 40% 70% / 70% 50% 80% 40%;

  }

  100% {

    border-radius: 60% 50% 70% 80% / 50% 60% 50% 70%;

  }

}



@keyframes white-circle {

  0% {

    border-radius: 70% 60% 60% 90% / 70% 80% 40% 90%;

  }

  25% {

    border-radius: 60% 50% 70% 80% / 50% 60% 50% 70%;

  }

  50% {

    border-radius: 90% 60% 40% 70% / 70% 50% 80% 40%;

  }

  75% {

    border-radius: 60% 40% 70% 60% / 40% 60% 50% 60%;

  }

  100% {

    border-radius: 70% 60% 60% 90% / 70% 80% 40% 90%;

  }

}



.container__hero .charm {

  width: 230px;

  height: 220px;

  text-align: center;

  position: absolute;

  left: 0;

  top: 450px;

  z-index: 2;

  transition: 1s ease-out charm;

}



.container__hero .charm .circle-1,

.container__hero .charm .circle-2 {

  width: 180px;

  height: 180px;

  position: absolute;

  top: 20px;

  left: 30px;

}



.container__hero .charm .circle-1 {

  background: #46C4B0;

  animation: border-animation 44s infinite linear, green-circle 30s linear infinite;

}



.container__hero .charm .circle-2 {

  background: #FFFFFF;

  border-radius: 80% 30% 50% 50%/50%;

  animation: border-animation 44s infinite linear, white-circle 25s linear infinite, charm-reverse 0.3s ease-out forwards;

}



.container__hero .charm__text {

  width: 192px;

  height: 160px;

  position: absolute;

  left: 30px;

  top: 55px;

  z-index: 2;

  animation: 0.3s ease-out charm-reverse forwards;

}



.container__hero .charm__text p:first-of-type {

  font-size: 1.5em;

  color: #0C4198;

  font-weight: bold;

}



.container__hero .charm__text p:nth-of-type(2) {

  width: 108px;

  margin: 0 auto;

  font-size: .75em;

  color: #0C4198;

  font-weight: bold;

  border-bottom: 2px solid #0C4198;

  padding-bottom: 5px;

  padding-right: 15px;

  position: relative;

}



.container__hero .charm__text p:nth-of-type(2)::after {

  content: '';

  width: 13px;

  height: 13px;

  position: absolute;

  top: 5px;

  right: 0;

  background-image: url("../..../..../..../../img/icon/icon_arrow_blue.svg");

  background-repeat: no-repeat;

}



.container__hero .charm:hover {

  transform-origin: center;

}



.container__hero .charm:hover .circle-1,

.container__hero .charm:hover .circle-2 {

  animation: border-animation 44s infinite linear, green-circle 20s linear infinite, 0.3s ease-out charm forwards;

}



.container__hero .charm:hover .charm__text {

  animation: 0.3s ease-out charm forwards;

}



.container__hero .charm:hover .charm__text p:first-of-type {

  color: #5a5a5a;

  font-size: 1.3125em;

}



.container__hero .charm:hover .charm__text p:nth-of-type(2) {

  color: #5a5a5a;

  border-bottom: 2px solid #5a5a5a;

  font-size: .625em;

}



.container__hero .charm:hover .charm__text p:nth-of-type(2)::after {

  background-image: url("../..../../img/icon/icon_arrow_gray.svg");

  right: 10px;

}



.container__hero .hero-left {

  width: 40%;

  height: 708px;

  background-repeat: no-repeat;

  border-radius: 0 30px 30px 0;

  transform: translateY(-20px);

  overflow: hidden;

}



.container__hero .hero-left.slide-background {

  background-image: url("../../img/resident/mv1.jpg");

  background-size: cover;

  background-position-x: center;

  background-repeat: no-repeat;

}



.container__hero .hero-left .slick-slider,

.container__hero .hero-left .slick-list,

.container__hero .hero-left .slick-slide,

.container__hero .hero-left .slick-track,

.container__hero .hero-left .slick-slide > div {

  z-index: 0;

}



.container__hero .hero-left .slide {

  opacity: 0;

}



.container__hero .hero-left .slide.slick-initialized {

  opacity: 1;

}



.container__hero .hero-left .slide-arrow {

  display: none !important;

}



.container__hero .hero-left .slide-dots {

  display: none !important;

}



.container__hero .hero-left .slide-animation {

  animation: fadeZoom 12s 0s forwards;

}



@keyframes fadeZoom {

  0% {

    transform: scale(1);

  }

  100% {

    transform: scale(1.2);

  }

}



.container__hero .hero-left .item > img {

  width: 100%;

  object-fit: cover;

  font-family: 'object-fit: cover;';

  /*IE対策*/

}



@media screen and (min-width: 768px) {

  .container__hero .hero-left .item > img {

    height: 708px;

  }

}



.container__hero .hero-right {

  width: 60%;

  background-image: url("../..../../img/common/yellow_pattern.png");

  background-repeat: repeat;

  padding: 40px 4.39vw 55px;

  position: relative;

  box-sizing: border-box;

}



.container__hero .hero-right .section {

  width: 700px;

  margin: 0 auto;

}



.container__hero .hero-right .section > .living {

  margin-top: 28px;

}



.container__hero .hero-right .hero-menu {

  display: flex;

  margin-top: 10px;

  width: 700px;

}



.container__hero .hero-right .hero-menu__item {

  width: 220px;

  border: 2px solid #008463;

  background-color: #FFFFFF;

  border-radius: 8px;

  margin-right: 20px;

  padding: 10px 0;  

  box-sizing: border-box;

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);

}



.container__hero .hero-right .hero-menu__item .hero-menu-item-inner {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  position: relative;

  box-sizing: border-box;

}



.container__hero .hero-right .hero-menu__item .hero-menu-item-inner .image {

  width: 70px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.container__hero .hero-right .hero-menu__item .hero-menu-item-inner .text {

  color: #333333;

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);  

}



.container__hero .hero-right .hero-menu__item .hero-menu-item-inner .text span {

  display: block;

}



.container__hero .hero-right .hero-menu__item .hero-menu-item-inner .text span:first-child {

  font-size: 1.1875em;

  font-weight: bold;

}



.container__hero .hero-right .hero-menu__item .hero-menu-item-inner .text span:nth-child(2) {

  font-size: .6875em;

  font-weight: bold;

  opacity: .8;

}



.container__hero .hero-right .hero-menu__item:hover {

  background-color: #008463;

}



.container__hero .hero-right .hero-menu__item:hover .text {

  color: #FFFFFF;

}



.container__hero .hero-right .hero-menu__item:last-child {

  margin-right: 0;

}



.container__hero .hero-right .administration {

  margin-top: 35px;

}



.container__hero .hero-right .administration > .main {

  margin-top: 28px;

}



.container__hero .hero-right .administration > .contents {

  margin-top: 28px;

}



.container__hero .hero-right .hero-menu-useful {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  width: 700px;

  margin-top: 10px;

  overflow: hidden;

}



.container__hero .hero-right .hero-menu-useful__item {

  width: 160px;

  background-color: #FFAE80;

  border-radius: 8px;

  color: #333333;

  font-size: .875em;

  text-align: center;

  font-weight: bold;

  position: relative;

  padding: 13.5px 0;

  transition: 1s cubic-bezier(0.16, 1, 0.3, 1);

}



.container__hero .hero-right .hero-menu-useful__item svg {

  transition: 2s cubic-bezier(0.16, 1, 0.3, 1);

}



.container__hero .hero-right .hero-menu-useful__item:hover {

  background-color: #5A5A5A;

  color: #FFFFFF;

}



.container__hero .hero-right .hero-menu-useful__item:hover svg {

  fill: #FFFFFF;

}



.container__hero .hero-right .hero-menu-useful__item:nth-of-type(n + 5) {

  margin-top: 20px;

}



.container__hero .hero-right .hero-menu-useful__item.weather:hover svg {

  fill: #FFFFFF;

}



.container__hero .hero-right .hero-menu-useful__item a {

  display: block;

}



.container__hero .hero-right .hero-menu-useful .weather a {

  display: flex;

  align-items: center;

  justify-content: center;

}



.container__hero .hero-right .hero-menu-useful .weather a span {

  display: inline-block;

  margin-right: 5px;

}



.container__hero .hero-right .hero-menu-useful .weather a svg {

  padding-bottom: 2px;

}



@media screen and (min-width: 1px) and (max-width: 767px) {

  .container__hero {

    display: block;

    position: relative;

    margin-top: 0;

  }

  .container__hero .charm {

    width: 110px;

    height: 110px;

    left: 10px;

    top: 45vw;

    text-align: center;

    z-index: 2;

  }

  .container__hero .charm .circle-1,

  .container__hero .charm .circle-2 {

    top: 0;

    left: 0;

    width: 90px;

    height: 90px;

    position: absolute;

  }

  .container__hero .charm__text {

    top: 0;

    left: 0;

    width: 90px;

    height: 90px;

    padding-top: 0;

  }

  .container__hero .charm__text p:first-of-type {

    font-size: .9375em;

    margin-top: 18px;

  }

  .container__hero .charm__text p:nth-of-type(2) {

    display: none;

  }

  .container__hero .charm:hover .charm__text p:first-child {

    font-size: .9375em;

  }

  .container__hero .hero-left {

    width: 100%;

    height: 66.66667vw;

    transform: translateY(0);

    border-radius: 0;

    overflow: initial;

  }

  .container__hero .hero-left .slide,

  .container__hero .hero-left .slick-slider,

  .container__hero .hero-left .slick-list,

  .container__hero .hero-left .slick-slide,

  .container__hero .hero-left .slick-track,

  .container__hero .hero-left .slick-slide > div {

    height: 100%;

  }

  .container__hero .hero-left .item {

    height: inherit;

  }

  .container__hero .hero-left .item > img {

    object-fit: cover;

    font-family: 'object-fit: cover;';

    /*IE対策*/

    width: 100%;

    height: 100%;

  }

  .container__hero .hero-right {

    width: calc(100% - 32px);

    height: 100%;

    box-sizing: unset;

    padding: 40px 16px 60px 16px;

  }

  .container__hero .hero-right .section {

    width: 100%;

  }

  .container__hero .hero-right .section > .living {

    margin-top: 14px;

  }

  .container__hero .hero-right .section__subtitle {

    font-size: .875em;

  }

  .container__hero .hero-right .section.administration {

    margin-top: 18px;

  }

  .container__hero .hero-right .section.administration > .main {

    margin-top: 16px;

  }

  .container__hero .hero-right .section.administration > .contents {

    margin-top: 14px;

  }

  .container__hero .hero-right .hero-menu {

    width: 100%;

    margin-top: 5px;

    justify-content: space-between;

  }

  .container__hero .hero-right .hero-menu__item {

    width: calc(100%/3 - 10px);

    margin-right: 0;

    padding: 3px 0;    

  }

  .container__hero .hero-right .hero-menu__item .hero-menu-item-inner {

    flex-direction: column;

    text-align: center;

  }

  .container__hero .hero-right .hero-menu__item .hero-menu-item-inner .image {

    height: 40px;

    margin-top: 12px;

  }

  .container__hero .hero-right .hero-menu__item .hero-menu-item-inner .text {

    margin-top: 4px;

  }

  .container__hero .hero-right .hero-menu__item .hero-menu-item-inner .text span:first-child {

    font-size: .8125em;

  }

  .container__hero .hero-right .hero-menu__item .hero-menu-item-inner .text span:nth-child(2) {

    display: none;

  }

  .container__hero .hero-right .hero-menu-useful {

    width: 100%;

    margin-top: 2px;

  }

  .container__hero .hero-right .hero-menu-useful__item {

    width: calc(50% - 4px);

    font-size: .75em;

    padding: 7px 0;

  }

  .container__hero .hero-right .hero-menu-useful__item a {

    padding: 0;

    height: 100%;

    vertical-align: middle;

    display: flex;

    align-items: center;

    justify-content: center;

  }

  .container__hero .hero-right .hero-menu-useful__item:nth-of-type(n + 3) {

    margin-top: 8px;

  }

  .container__hero .hero-right .hero-menu-useful .weather a svg {

    padding: 0;

  }

}



#ss-voice-controller {

  position: absolute;

  top: 180px;

  right: 15em;

  overflow: none;

}

.jp-audio .ss-jp-dismiss .ss-jp-close {

  padding: 1px 6px;

  font-size: 14px;

  line-height: 1.5em;

}

@media screen and (min-width: 1px) and (max-width: 767px) {

  #ss-voice-controller {

    position: absolute;

    top: 460px;

    left: 1em;

    width: 90%;

  }

  .jp-audio {

    width: 100%;

  }

  .jp-audio .jp-controls {

    width: 100%;

    box-sizing: border-box;

  }

}