@charset "utf-8";

/*============================
top common
============================*/

.title-box {
  width: 100%;
  text-align: center;
}
.title-box .english {
  font-size: 64px;
  font-weight: bold;
  color: #da291c;
}
.title-box .flex {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.title-box .flex .chs {
  font-size: 32px;
}
.title-box .flex .slash {
  margin-left: 10px;
  font-size: 32px;
}
.title-box .flex .cht {
  margin-left: 10px;
  font-size: 32px;
}

/*============================
#menu
============================*/

#headerSP { display: block; height: 50px; }
#headerSP .first { padding-left: 10px; width: 80%; }
#headerSP .first .logoBox { width: 100%; padding-top: 16px; }
#headerSP .first .logoBox .mainLogo { float: left; width: 160px; }
#headerSP .first .logoBox .mainLogo a { display: block; }
#headerSP .first .logoBox .mainLogo a img { width: 100%; height: auto; }
#headerSP .first .logoBox .jsaLogo { float: left; width: 80px; margin-top: -6px; margin-left: 5px; }
#headerSP .first .logoBox .jsaLogo img { width: 100%; height: auto; }
#headerSP button.drawer-toggle.drawer-hamburger { padding: 14px; }
#headerSP button.drawer-toggle.drawer-hamburger span.menu {}
#headerSP button.drawer-toggle.drawer-hamburger span.drawer-hamburger-icon.first-bar {}
#headerSP nav.drawer-nav { background: #222; }
#headerSP nav.drawer-nav ul { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#headerSP nav.drawer-nav ul li { border-bottom: 1px solid #777; }
#headerSP nav.drawer-nav ul li .btn { position: relative; padding: 10px 15px; line-height: 1.5; color: #fff; }
#headerSP nav.drawer-nav ul li .btn::after { position: absolute; content: ""; background: url("../../imageFile/global/sp_navi_ico.png")no-repeat center; background-size: contain; top:16px; right: 20px; width: 12px; height: 8px; font-size: 1.2rem; color: #fff; }
#headerSP nav.drawer-nav ul li .close_ico::after { position: absolute; content: ""; background: url("../../imageFile/global/sp_navi_ico.png")no-repeat center; background-size: contain; top:16px; right: 20px; width: 12px; height: 8px; font-size: 1.2rem; color: #fff; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
#headerSP nav.drawer-nav ul li .open { display: none; position: relative; border-top: 1px solid #777; }
#headerSP nav.drawer-nav ul li .open li { position: relative; line-height: 1.5; }
#headerSP nav.drawer-nav ul li .open li:last-child { border-bottom: none; }
#headerSP nav.drawer-nav ul li .open li a { position: relative; padding: 10px 25px; color: #dedede; font-size: 0.866rem; }
#headerSP nav.drawer-nav ul li .open li a::before { position: absolute; top: 20px; left: 10px; content: ""; background: #dedede; width: 5px; height: 1px; }
#faqListArea .content .faqListBox ul li:nth-child(n+2) { margin-top: 5px; }
#headerSP nav.drawer-nav ul li a { display: block; color: #fff; padding: 10px 15px; font-size: 0.875rem; line-height: 1.5; }
.drawer-hamburger-icon { height: 2px !important; background-color: #222; }
.drawer-hamburger-icon:before { height: 2px!important; background-color: #222; }
.drawer-hamburger-icon:after { height: 2px !important; background-color: #222; }

#headerSP nav li .languageBox {
    display: flex;
    justify-content: center;
    padding-top: 8px;
    padding-bottom: 6px;
}

#headerSP nav li .languageBox .languageEn {
}

#headerSP nav li .languageBox .languageJp {
    color: #999999;
}

/*============================
#main-panel
============================*/
#main-panel {
  width: 100%;
}

#main-panel .main-panel-contents {
  width: 100%;
}
#main-panel .main-panel-contents .img-box {
  width: 100%;
}
#main-panel .main-panel-contents .img-box img.main-panel-pc {
  display: block;
  width: 100%;
}
#main-panel .main-panel-contents .img-box img.main-panel-sp {
  display: none;
  width: 100%;
}

/*============================
#about
============================*/
#about {
  width: 100%;
  margin-top: 120px;
}
#about .about-contents {
  width: 60%;
  margin-right: auto;
  margin-left: auto;
}
#about .about-contents .about-button {
  width: 250px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  background-color: #da291c;
  border-radius: 40px;
}
#about .about-contents .about-button .flex {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
#about .about-contents .about-button .text {
  font-size: 24px;
  color: #fff;
}
#about .about-contents .about-button .arrow {
  margin-left: 25px;
  width: 18px;
}
#about .about-contents .about-button .arrow img {
  width: 100%;
}
#about .about-contents .about-text {
  width: 100%;
  margin-top: 80px;
}
#about .about-contents .about-text .english {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 1.7;
}
#about .about-contents .about-text .chs {
  margin-top: 60px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 1.7;
}
#about .about-contents .about-text .cht {
  margin-top: 60px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 1.7;
}

/*============================
#category
============================*/
#category {
  margin-top: 160px;
}
#category .category-contents {
  width: 100%;
}
#category .category-contents .big-box {
  display: flex;
  width: 100%;
  margin-top: 60px;
}
#category .category-contents .big-box .food-box {
  width: 25%;
  background-color: #BBC221;
}
#category .category-contents .big-box .shopping-box {
  width: 25%;
  background-color: #008B80;
}
#category .category-contents .big-box .beauty-box {
  width: 25%;
  background-color: #CF1E79;
}

#category .category-contents .big-box .amusement-box {
  width: 25%;
  background-color: #DD923B; 
}
#category .category-contents .big-box .img-box {
  width: 180px;
  height: 180px;
  margin-top: 50px;
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
  border-radius: 200px;
}
#category .category-contents .big-box .food-box .img-box img {
  width: 65%;
  margin-left: 18%;
  margin-top: 26%;
}
#category .category-contents .big-box .shopping-box .img-box img {
  width: 60%;
  margin-left: 20%;
  margin-top: 20%;
}
#category .category-contents .big-box .beauty-box .img-box img {
  width: 65%;
  margin-left: 20%;
  margin-top: 28%;
}
#category .category-contents .big-box .amusement-box .img-box img {
  width: 65%;
  margin-left: 18%;
  margin-top: 18%;
}
#category .category-contents .big-box .text {
  width: 100%;
  margin-top: 30px;
  margin-bottom: 50px;
  text-align: center;
  font-size: 36px;
  font-weight: bold;
}

/*============================
#area
============================*/
#area {
  width: 100%;
  margin-top: 120px;
  background-image: url("../../imageFile/top/top-map.png");
  background-size: 120%;
  background-position: center;
}
#area .area-contents {
  width: 100%;
  padding-right: 150px;
  padding-left: 150px;
}
#area .area-contents .subtitle-box {
  margin-top: 100px;
}
#area .area-contents .subtitle-box h3.subtitle {
  font-size: 32px;
  color: #da291c;
  font-weight: bold;
}
#area .area-contents .area-box {
  display: flex;
  margin-top: 60px;
  flex-wrap: wrap;
}
#area .area-contents .area-box .detail-box {
  width: 23.1%;
  margin-right: 2.5%;
  margin-top: 0;
}
#area .area-contents .area-box .detail-box:nth-child(4n) {
  margin-right: 0;
}
#area .area-contents .area-box .detail-box:nth-child(n+5) {
  margin-top: 60px;
}
#area .area-contents .area-box .detail-box .img-box {
  width: 100%;
}
#area .area-contents .area-box .detail-box .img-box img {
  width: 100%;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;

}
#area .area-contents .area-box .detail-box .text-box {
  background-color: #da291c;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}
#area .area-contents .area-box .detail-box .text-box .english {
  padding-top: 15px;
  font-size: 20px;
  color:#fff;
  text-align: center;
}
#area .area-contents .area-box .detail-box .text-box .flex {
  display: flex;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 15px;
}
#area .area-contents .area-box .detail-box .text-box .flex .chs {
  font-size: 14px;
  color: #fff;
}
#area .area-contents .area-box .detail-box .text-box .flex .slash {
  font-size: 14px;
  color: #fff;
  margin-left: 5px;
}
#area .area-contents .area-box .detail-box .text-box .flex .cht {
  font-size: 14px;
  color: #fff;
  margin-left: 5px;
}

/*============================
#topics
============================*/
#topics {
  width: 100%;
  height: 1180px;
  margin-top: 160px;
  background-image: url("../../imageFile/top/topics-bg.png");
  background-size: cover;
  background-position: center;
}
#topics .topics-contents {
}
#topics .topics-contents .title-box {
  padding-top: 250px;
}
#topics .topics-contents .title-box h2.english {
  color: #fff;
}
#topics .topics-contents .title-box .flex {
}
#topics .topics-contents .title-box .flex .chs {
  color: #fff;
}
#topics .topics-contents .title-box .flex .slash {
  color: #fff;
}
#topics .topics-contents .title-box .flex .cht {
  color: #fff;
}

#topics .topics-contents .slider {
}
#topics .topics-contents .slider .img-box {
  width: 100%;
}
#topics .topics-contents .slider .img-box img {
  /* width: 380px; */
}

/*============================
#footer
============================*/
#footer {
  margin-top: 200px;
}
#footer .footer-banner-box-01 {
  width: 100%;
}
#footer .footer-banner-box-01 .flex {
  width: 780px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
}
#footer .footer-banner-box-01 .flex .banner-box {
  width: 380px;
}
#footer .footer-banner-box-01 .flex .banner-box:nth-child(n+3) {
  margin-top: 20px;
}
#footer .footer-banner-box-01 .flex .banner-box img {
  width: 100%;
}
#footer .footer-banner-box-02 {
  margin-top: 100px;
}
#footer .footer-banner-box-02 .flex {
  display: flex;
  width: 52%;
  margin-right: auto;
  margin-left: auto;
  justify-content: space-between;
}
#footer .footer-banner-box-02 .flex .banner-box {
  width: 230px;
}
#footer .footer-banner-box-02 .flex .banner-box img {
  width: 100%;
}
#footer .sns-box {
  margin-top: 200px;
}
#footer .sns-box .flex {
  display: flex;
  width: 20%;
  margin-right: auto;
  margin-left: auto;
  justify-content: space-between;
}
#footer .sns-box .flex .sns {
  width: 30px;
}
#footer .sns-box .flex .sns-facebook {
  width: 15px;
}
#footer .sns-box .flex .sns img {
  width: 100%;
}
#footer .sponcer {
  margin-top: 60px;
}
#footer .sponcer .flex {
  display: flex;
  width: 180px;
  margin-right: auto;
  margin-left: auto;
  justify-content: space-between;
}
#footer .sponcer .flex .text {
  font-size: 18px;
}
#footer .sponcer .flex .slash {
  font-size: 18px;
}
#footer .copyright {
  margin-top: 30px;
  width: 100%;
  background-color: #da291c ;
}
#footer .copyright .text {
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 16px;
  color: #fff;
  text-align: center;
}