@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-style: normal;
}

html {
  font-size: 10px;

  /* for iPhone */
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-family:
    YuGothic,
    "游ゴシック",
    'ヒラギノ角ゴ Pro W3',
    'Hiragino Kaku Gothic Pro',
    'メイリオ',
    'Meiryo',
    'Osaka',
    'ＭＳ Ｐゴシック',
    sans-serif;
  width: 100%;
  height: 100%;
}
img {
  max-width :100%;
  vertical-align: top;
}
img.keep {
  width: auto!important;
  max-width :100%!important;
}
a img  {
  border: none;
}

ul,ol,li {
  list-style-type: none;
}

input,label,select,textarea {
  vertical-align: middle;
}

.disp_bl {
  display: block;
}
.disp_ibl {
  display: inline-block;
}

/* SP コピーガード */
#main img {
  pointer-events: none;
  -webkit-touch-callout: none; /* default or none */
    -webkit-user-select: none; /* auto or none */
            user-select: none;
}
#main .controller img,
#main .prev img,
#main .next img{
  pointer-events: auto;
  -webkit-touch-callout: default;
    -webkit-user-select: auto;
            user-select: auto;
}

/* mfp保存禁止 */
.mfp-figure figure {
  position: relative;
}
.mfp-figure figure::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  content: '';
  background: url(../images/dam.png) no-repeat;
  background-size: 100% 100%;
}


/*----------------------------------------------------
common
----------------------------------------------------*/

.clearfix:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}
.clearfix{display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix{display:block;}


body {
  color: #000000;
  font-size: 18px;
  line-height: 1.5;
  width: 100%;
  background: #ffffff;
  text-align: left;
}
@media screen and (min-width: 751px) {
  body {
    font-size: 18px;
    line-height: 1.5;
  }
}

.off {
  display: none;
}
.on {
  display: block;
}

@media screen and (max-width: 750px) {
  html,
  body {
    height: auto;
    width: 100%;
    overflow-x: hidden;
  }
  .forPC {
    display: none;
  }
  .forSP {
    display: block;
  }
  .forSPi {
    display: inline;
  }
  .forSPib {
    display: inline-block;
  }
}
@media screen and (min-width: 751px) {
  html,
  body {
    height: 100%;
  }
  .forPC {
    display: block;
  }
  .forSP,
  .forSPi,
  .forSPib {
    display: none;
  }
}

a {
  outline: none;
  text-decoration: underline;
  color: #000000;
}
a:link {
  color: #000000;
}
a:visited {
  color: #000000;
}

@media screen and (min-width: 751px) {
  a:hover {
    text-decoration: none;
  }
  a img.alpha {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  a:hover img.alpha {
    opacity: 0.8;
  }
}
.nowrap {
  white-space: nowrap;
}

.ibLeft {
  display: inline-block;
  text-align: left;
}

.shadow {
  box-shadow: 5px 5px 0px rgba(0,0,0,0.3);
}
.image img {
  width: 100%;
}
.alignLeft {
  text-align: left;
}
.alignCenter {
  text-align: center;
}
.alignRight {
  text-align: right;
}

/* text change */
.large {
  font-size: 1.36em;
}
.small {
  font-size: 0.8em;
}
.bold {
  font-weight: bold;
}

/* text color */
.white{
  color: #ffffff;
}
.black {
  color: #000000;
}
.yellow {
  color: #fff100;
}
.red {
  color: #e34934;
}
.purple {
  color: #7238ad;
}
.green {
  color: #44b77e;
}
.blue {
  color: #3580ba;
}
.orange {
  color: #eb9800;
}
.olive{
  color: #c4be27;
}
.pink{
  color: #d04aa9;
}


/* flex Layout */
@media screen and (max-width: 750px){
  .col_sp2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .col_sp2 .box {
    width: 48%;
  }
}
@media screen and (min-width: 751px){
  .col_pc2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .col_pc2 .box {
    width: 48%;
  }
  .col_pc3 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .col_pc3::after {
    content: '';
    width: 32%;
    display: block;
  }
  .col_pc3 .box {
    width: 32%;
  }
  .col_pc4 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .col_pc4::before {
    content: '';
    display: block;
    width: 24%;
    order: 1;
  }
  .col_pc4::after {
    content: '';
    display: block;
    width: 24%;
  }
  .col_pc4 .box {
    width: 24%;
  }
  .reverse {
    flex-direction: row-reverse;
  }
}


/*----------------------------------------------------
inner
----------------------------------------------------*/

.inner,
.innerSP {
  text-align: center;
  padding: 0 3.33333%;
  width: 100%;
  box-sizing: border-box;
}
.innerPC {
  text-align: center;
  width: 100%;
}
@media screen and (min-width: 751px) {
  .inner,
  .innerPC {
    margin: 0 auto;
    padding: 0 20px;
  }
  .innerSP {
    padding: 0;
  }
}
@media screen and (min-width: 1111px) {
  .inner.narrow,
  .innerPC.narrow {
    width: 1054px!important;
    padding: 0;
  }
}
@media screen and (min-width: 1177px) {
  .inner,
  .innerPC {
    width: 1120px;
    padding: 0;
  }
}

/* innerTop */
.innerTop {
  margin: 0 7.33333%;
  max-width: 640px;
}
@media screen and (min-width: 641px) {
  .innerTopPC {
    margin: 0 auto;
    width: 640px;
  }
}
@media screen and (min-width: 751px) {
  .innerTop {
    margin: 0 auto;
  }
}


/*----------------------------------------------------
loading
----------------------------------------------------*/

#loaderBg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #ffffff;
  z-index: 10000;
}
#loader {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #555555;
  z-index: 10001;
}
#loader p {
  display: none;
  margin-top: 10px;
  color: #555555;
}
#loader img {
  display: none;
  width: 100%;
  height: auto;
  max-width: 120px;
}
@media screen and (min-width: 751px) {
  #loader img {
    max-width: 240px;
  }
}


/*----------------------------------------------------
imgHov
----------------------------------------------------*/

@media screen and (min-width: 751px) {
  .imgHov .target {
    display: block;
    overflow: hidden;
    cursor: pointer;
  }
  .imgHov .target img {
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
  }
  .imgHov:hover .target img {
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}


/*----------------------------------------------------
siteHead
----------------------------------------------------*/

#siteHead {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: #000000;
  z-index: 99;
}
#siteHead .logo {
  position: absolute;
  top: 9px;
  left: 10px;
  width: 100px;
}
#siteHead .banner {
  position: absolute;
  top: 9px;
  left: 120px;
  width: 90px;
}
@media screen and (min-width: 751px) {
  #siteHead {
    height: 80px;
  }
  #siteHead .logo {
    top: 20px;
    left: 20px;
    width: 160px;
  }
  #siteHead .banner {
    top: 20px;
    left: 200px;
    width: 150px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  #siteHead .banner:hover {
    opacity: 0.8;
  }
}


/*----------------------------------------------------
menuBtn
----------------------------------------------------*/

.menuBtn {
  position: absolute;
  top: 0;
  right: 10px;
  width: 30px;
  height: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 9999;
}
.menuBtn .text {
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 1em;
  text-align: center;
  color: #ffffff;
  font-size: 9px;
  line-height: 1;
  font-weight: bold;
  vertical-align: bottom;
}
@media only screen and (min-width: 751px) {
  .menuBtn {
    width: 50px;
    right: 20px;
    height: 80px;
    cursor: pointer;
  }
  .menuBtn .text {
    bottom: 12px;
    font-size: 13px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .menuBtn:hover .text {
    color: #fff100;
  }
}
@media only screen and (min-width: 1336px) {
  .menuBtn {
    display: none;
  }
  body.bannerHeader .menuBtn {
    display: block;
  }
}
@media only screen and (min-width: 1506px) {
  body.bannerHeader .menuBtn {
    display: none;
  }
}


/*----------------------------------------------------
burger
----------------------------------------------------*/

.burger {
  position: relative;
  width: 30px;
  padding-top: 100%;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: .3s ease-in-out;
}
.burger span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: #ffffff;
  border-radius: 0;
  opacity: 1;
  right: 0;
  -webkit-transform: rotate(0deg);
  transition: 0.4s cubic-bezier(0.45, 0.49, 0.77, 1.15);
}
.burger span:nth-child(1) {
  top: 5px;
}
.burger span:nth-child(2) {
  top: 13px;
}
.burger span:nth-child(3) {
  top: 21px;
}
.burger.open span:nth-child(2) {
  top: 24px;
  width: 0%;
  right: 50%;
}
.burger.open span {
  background: #ffffff;
}
.burger.open span:nth-child(1) {
  top: 13px;
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}
.burger.open span:nth-child(3) {
  top: 13px;
  -webkit-transform: rotate(-315deg);
  transform: rotate(-315deg);
}
@media screen and (min-width: 751px) {
  .burger {
    width: 50px;
  }
  .burger span {
    height: 6px;
  }
  .menuBtn:hover .burger span {
    background: #fff100;
  }
  .burger span:nth-child(1) {
    top: 16px;
  }
  .burger span:nth-child(2) {
    top: 28px;
  }
  .burger span:nth-child(3) {
    top: 40px;
  }
  .burger.open span:nth-child(2) {
    top: 28px;
  }
  .burger.open span:nth-child(1),
  .burger.open span:nth-child(3) {
    top: 28px;
  }
}


/*----------------------------------------------------
gnav
----------------------------------------------------*/

@media only screen and (max-width: 1335px) {
  body.bannerNormal .gnav {
    display: inline-block;
    position: fixed;
    top: 80px;
    right: -360px;
    min-width: 360px;
    max-width: 100vw;
    background: #000000;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  body.bannerNormal .gnav.open {
    right: 0;
  }
  body.bannerNormal .gnav li a {
    display: block;
    font-size: 18px;
    line-height: 1.2;
    font-weight: bold;
    text-align: right;
    text-decoration: none;
    padding: 1.54em 7.33333%;
  }
  body.bannerNormal .gnav li a span {
    color: #ffffff;
    white-space: nowrap;
  }
  body.bannerNormal .gnav li.current a {
    background: #fff100;
  }
  body.bannerNormal .gnav li.current a span {
    color: #000000;
  }
  body.bannerNormal .gnav li.wait a {
    cursor: default;
  }
  body.bannerNormal .gnav li.wait a span {
    opacity: 0.3;
  }
}
@media only screen and (max-width: 750px) {
  body.bannerNormal .gnav {
    top: 40px;
  }
}

@media only screen and (max-width: 1506px) {
  body.bannerHeader .gnav {
    display: inline-block;
    position: fixed;
    top: 80px;
    right: -360px;
    min-width: 360px;
    max-width: 100vw;
    background: #000000;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  body.bannerHeader .gnav.open {
    right: 0;
  }
  body.bannerHeader .gnav li a {
    display: block;
    font-size: 18px;
    line-height: 1.2;
    font-weight: bold;
    text-align: right;
    text-decoration: none;
    padding: 1.54em 7.33333%;
  }
  body.bannerHeader .gnav li a span {
    color: #ffffff;
    white-space: nowrap;
  }
  body.bannerHeader .gnav li.current a {
    background: #fff100;
  }
  body.bannerHeader .gnav li.current a span {
    color: #000000;
  }
  body.bannerHeader .gnav li.wait a {
    cursor: default;
  }
  body.bannerHeader .gnav li.wait a span {
    opacity: 0.3;
  }
}

@media only screen and (max-width: 1335px) and (min-width: 751px) {
  body.bannerNormal .gnav li a {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  body.bannerNormal .gnav li:not(.current):not(.wait) a:hover {
    background: #ffffff;
  }
  body.bannerNormal .gnav li a span {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  body.bannerNormal .gnav li:not(.current):not(.wait) a:hover span {
    color: #000000;
  }
}
@media only screen and (max-width: 1506px) and (min-width: 751px) {
  body.bannerHeader .gnav li a {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  body.bannerHeader .gnav li:not(.current):not(.wait) a:hover {
    background: #ffffff;
  }
  body.bannerHeader .gnav li a span {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  body.bannerHeader .gnav li:not(.current):not(.wait) a:hover span {
    color: #000000;
  }
}

@media only screen and (max-width: 750px) {
  .gnav {
    top: 40px;
    right: -100vw;
    width: auto;
    min-width: 280px;
    max-width: 100vw;
  }
  .gnav li a {
    font-size: 16px;
    padding: 1.4em 7.33333%;
  }
}

@media only screen and (min-width: 1336px) {
  body.bannerNormal .gnav ul {
    margin-top: 25px;
    letter-spacing: -.40em;
    text-align: right;
  }
  body.bannerNormal .gnav li {
    display: inline-block;
    letter-spacing: normal;
    margin-left: 2px;
  }
  body.bannerNormal .gnav li a {
    display: block;
    color: #ffffff;
    font-size: 16px;
    line-height: 30px;
    font-weight: bold;
    text-decoration: none;
    padding: 0 0.4em;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  body.bannerNormal .gnav li:not(.current):not(.wait) a:hover {
    color: #000000;
    background: #ffffff;
  }
  body.bannerNormal .gnav li.wait a {
    cursor: default;
    opacity: 0.3;
  }
  body.bannerNormal .gnav li.current a {
    color: #000000;
    background: #fff100;
  }
  body.bannerNormal .gnav li:last-child {
    margin-right: 20px;
  }
  body.bannerNormal .gnav li.official a {
    color: #fff100;
    border: solid 1px #fff100;
    box-sizing: border-box;
  }
  body.bannerNormal .gnav li.official a:hover {
    background: #fff100!important;
  }
}
@media only screen and (min-width: 1506px) {
  body.bannerHeader .gnav ul {
    margin-top: 25px;
    letter-spacing: -.40em;
    text-align: right;
  }
  body.bannerHeader .gnav li {
    display: inline-block;
    letter-spacing: normal;
    margin-left: 2px;
  }
  body.bannerHeader .gnav li a {
    display: block;
    color: #ffffff;
    font-size: 16px;
    line-height: 30px;
    font-weight: bold;
    text-decoration: none;
    padding: 0 0.4em;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  body.bannerHeader .gnav li:not(.current):not(.wait) a:hover {
    color: #000000;
    background: #ffffff;
  }
  body.bannerHeader .gnav li.wait a {
    cursor: default;
    opacity: 0.3;
  }
  body.bannerHeader .gnav li.current a {
    color: #000000;
    background: #fff100;
  }
  body.bannerHeader .gnav li:last-child {
    margin-right: 20px;
  }
  body.bannerHeader .gnav li.official a {
    color: #fff100;
    border: solid 1px #fff100;
    box-sizing: border-box;
  }
  body.bannerHeader .gnav li.official a:hover {
    background: #fff100!important;
  }
}


/*----------------------------------------------------
siteFoot
----------------------------------------------------*/

#siteFoot {
  padding: 100px 0 50px;
  background: #000000;
}
#siteFoot .share {
  letter-spacing: -.40em;
}
#siteFoot .share dt {
  display: block;
  color: #fff100;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
}
#siteFoot .share dd {
  display: inline-block;
  letter-spacing: normal;
}
#siteFoot .share dd img {
  width: 36px;
  padding: 0 8px;
}

#footBanner {
  padding-top: 45px;
}
#footBanner li {
  margin-top: 15px;
}
#footBanner2 {
  padding-top: 45px;
}
#footBanner2 li {
  margin-top: 15px;
}

#siteFoot .code h2 {
  margin-top: 80px;
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: normal;
  letter-spacing: 0.02em;
}
#siteFoot .code p a {
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-decoration: none;
}

#siteFoot .copyright {
  margin-top: 30px;
  color: #fff100;
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: 0.08em;
}

@media only screen and (min-width: 751px) {
  #siteFoot {
    padding: 100px 0 30px;
  }
  #siteFoot .code p a:hover {
    text-decoration: underline;
  }
  #siteFoot .copyright {
    margin-top: 50px;
  }

  #siteFoot .share dd img {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  #siteFoot .share dd:hover img {
    opacity: 0.8;
  }
  /*#siteFoot .share .share_line {
    display: none;
  }*/

  #footBanner {
    padding-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 101%;
    overflow: hidden;
  }
  #footBanner li {
    display: inline-block;
    width: 38%;
    margin: 15px 0.5% 0;
  }
  #footBanner li a {
    display: block;
    background: #ffffff;
  }
  #footBanner li a img {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  #footBanner li a:hover img {
    opacity: 0.9;
  }
  #footBanner2 {
    padding-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 101%;
    overflow: hidden;
  }
  #footBanner2 li {
    display: inline-block;
    width: 72%;
    margin: 15px 0.5% 0;
  }
  #footBanner2 li a {
    display: block;
    background: #ffffff;
  }
  #footBanner2 li a img {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  #footBanner2 li a:hover img {
    opacity: 0.9;
  }
}


/*----------------------------------------------------
toPageTop
----------------------------------------------------*/

#toPageTop img {
  position: fixed;
  top: auto;
  bottom: 20px;
  left: auto;
  right: 20px;
  width: 80px;
  max-width: none;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: -10;
}
#toPageTop.view img {
  opacity: 1;
  bottom: 80px;
  z-index: 99;
}
#toPageTop.view img:hover {
  bottom: 90px;
}
@media screen and (max-width: 750px) {
  #toPageTop img {
    bottom: 60px;
    right: 0;
    width: 55px;
  }
  #toPageTop.view img {
    bottom: 70px;
  }
  #toPageTop.view img:hover {
    bottom: 70px;
  }
}













/*----------------------------------------------------
breadcrumb
----------------------------------------------------*/

#breadcrumb{
  padding:5px 0;
  background: #fff100;
}
#breadcrumb ul{
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.5;
}
#breadcrumb li a img{
  padding-top: 3px;
}
#breadcrumb ul li:first-child {
  margin-right: 3px;
}
#breadcrumb ul li:not(:first-child)::before {
  content: "＞";
  margin-right: 5px;
}
#breadcrumb ul li:not(:first-child) {
  margin-left: 5px;
}
@media screen and (min-width: 751px) {
  #breadcrumb{
    padding:8px 0;
  }
  #breadcrumb ul{
    font-size: 16px;
  }
  #breadcrumb li a img{
    padding-top: 3px;
  }
}


/*----------------------------------------------------
mainHead
----------------------------------------------------*/
#mainHead {
  position: relative;
  background: #fff100 url(../images/mainhead_sp.png) no-repeat left center;
  background-size: cover;
}
#mainHead::before {
  content: '';
  display: block;
  padding-top: 130px;
}
#mainHead .wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/mainhead_bg.png) no-repeat;
  background-position-x: 0;
  background-position-y: 48px;
  background-size: 70% 28px;
}
#mainHead h1 {
  margin: 34px 0 0 30px;
  color: #ffffff;
  font-size: 20px;
  line-height: 1em;
  text-align: left;
  vertical-align: top;
}
#mainHead h1 .en {
  display: block;
  margin-bottom: 4px;
  color: #fff100;
  font-size: 14px;
  line-height: 1em;
}
@media screen and (min-width: 561px) {
  #mainHead::before {
    padding-top: 22.6666%;
  }
}
@media screen and (min-width: 751px) {
  #mainHead {
    background-image: url(../images/mainhead_pc.png);
    background-size: cover%;
  }
  #mainHead::before {
    padding-top: 150px;
  }
  #mainHead h1 {
    margin: 34px 0 0 0;
    font-size: 32px;
  }
  #mainHead h1 .en {
    margin-bottom: 15px;
    font-size: 22px;
  }
  #mainHead .wrap {
    background-position-y: 71px;
    background-size: 60% 32px;
  }
}
@media screen and (min-width: 1001px) {
  #mainHead {
    background-size: 100% 100%;
  }
  #mainHead::before {
    padding-top: 15.11976%;
  }
}
@media screen and (min-width: 1337px) {
  #mainHead {
    background-size: cover;
  }
  #mainHead::before {
    padding-top: 202px;
  }
  #mainHead .wrap {
    background-position-y: 71px;
  }
}

/* pageShoulder */
.pageShoulder {
  padding: 40px 0 30px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: bold;
  background: #fff100;
}
@media screen and (min-width: 751px) {
  .pageShoulder {
    padding: 30px 0 50px;
    font-size: 26px;
  }
}


/*----------------------------------------------------
]mainBody
----------------------------------------------------*/
#mainBody {
  background: #ffffff;
  padding: 0 0 50px 0;
}
#mainBody .section {
  padding-top: 40px;
}


/*----------------------------------------------------
table
----------------------------------------------------*/
.caption {
  display: block;
  margin-top: 0.3em;
  font-size: 10px;
  line-height: 1.4;
}
.caption.right {
  text-align: right;
}
.caption.center {
  text-align: center;
}
.caption.left {
  text-align: left;
}


/*----------------------------------------------------
table
----------------------------------------------------*/
table {
  margin-top: 20px;
}
table.noMargin {
  margin-top: 0!important;
}
@media screen and (min-width: 751px) {
  table {
    margin-top: 30px;
  }
}

/* common */
table.common {
  width: 100%;
  border: 1px solid #b4b4b4;
  border-width: 0 1px 1px 0;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}
table.common th,
table.common td {
  border-top: 1px solid #b4b4b4;
  border-left: 1px solid #b4b4b4;
  background-color: #ffffff;
  color: #010101;
  font-size: 14px;
  line-height: 1.71;
  padding: 0.7em;
  vertical-align: top;
  text-align: left;
  font-weight: normal;
}
table.common th {
  text-align: center;
}
table.common thead th {
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  color: #ffffff;
  background: #000000;
  padding: 0.2em;
}
table.common.th_yellow tbody th {
  background: #fff100;
}
table.common.td_center tbody td {
  text-align: center;
}
table.common.padding tbody td,
table.common.padding tbody th {
  padding: 1em 0.7em;
}
table.common.noBorder {
  border-right: none;
}
table.common.noBorder td,
table.common.noBorder th {
  border-left: none;
}
@media screen and (min-width: 751px) {
  table.common th,
  table.common td {
    font-size: 16px;
    line-height: 1.875;
    padding: 1.2em;
  }
  table.common.padding tbody td,
  table.common.padding tbody th {
    padding: 1.4em 1.2em;
  }
}

/* map */
table td .map {
  margin-top: 10px;
}
table td .map iframe {
  width: 100%;
  max-width: 360px;
}


/* dl */
table td dl {
  padding: 10px 0;
}
table td dd {
  position: relative;
  padding-left: 1.3em;
}
table td dd::before {
  position: absolute;
  top: 0.4em;
  left: 0;
  content: '';
  display: block;
  width: 0.8em;
  height: 0.8em;
  border: solid 1px #010101;
  border-radius: 50%;
}

/* tableNote */
.tableNote {
  margin-top: 0.6em;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  text-indent: -1em;
  padding-left: 1em;
}
.tableNote.min {
  margin-top: 0.8em;
  font-size: 10px;
  line-height: 1.3;
}
ul.tableNote {
  text-indent: 0;
  padding-left: 0;
}
ul.tableNote li {
  text-indent: -1em;
  padding-left: 1em;
}
@media screen and (min-width: 751px) {
  .tableNote {
    font-size: 16px;
  }
  .tableNote.min {
    font-size: 14px;
  }
}


/* pageOutline */
#pageOutline table.common tbody th {
  width: 30%;
}
@media screen and (min-width: 751px) {
  #pageOutline table.common tbody th {
    width: auto;
  }
}

/* pageTicket */
#pageTicket table.common tbody th {
  width: 35%;
}
#pageTicket table.common tbody td {
  white-space: nowrap;
  vertical-align: middle;
}

/* pageEvent */
#pageEvent table.common tbody th {
  width: 35%;
}
#pageEvent table.common tbody td {
  white-space: nowrap;
  vertical-align: middle;
}

/* pageSpecial */
#pageSpecial table.common tbody th {
  width: 35%;
}
#pageSpecial table.common tbody td {
  white-space: nowrap;
  vertical-align: middle;
}


/*----------------------------------------------------
barTitle
----------------------------------------------------*/
.barTitle {
  text-align: left;
  font-size: 16px;
  line-height: 1.3;
  padding-left: 0.5em;
  border-left: solid 3px #000000;
}

@media screen and (min-width: 751px) {
  .barTitle {
    font-size: 24px;
    padding-left: 0.8em;
    border-left-width: 5px;
  }
}

.barTitle2 {
  text-align: left;
  font-size: 16px;
  line-height: 1.3;
}

@media screen and (min-width: 751px) {
  .barTitle2 {
    font-size: 24px;
  }
}

.barTitle3 {
  text-align: left;
  font-size: 14px;
  line-height: 1.3;
  padding-left: 0.5em;
  border-left: solid 2px #000000;
}

@media screen and (min-width: 751px) {
  .barTitle3 {
    font-size: 18px;
    padding-left: 0.8em;
    border-left-width: 3px;
  }
}

/*----------------------------------------------------
section box
----------------------------------------------------*/
.section .box {
  margin-top: 20px;
  border: solid 2px #000000;
  padding: 2.857%;
  text-align: left;
}
.section .box.noMargin {
  margin-top: 0!important;
}

.section .box .title {
  font-size: 18px;
  line-height: 1.3;
  font-weight: bold;
}
.section .box .price {
  font-size: 30px;
  line-height: 1;
  font-weight: bold;
  margin-top: 0.2em;
}
.section .box .price .tax {
  font-size: 16px;
  font-weight: normal;
}
.section .box .image {
  margin-top: 10px;
}

.section .box .text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4285;
}
.section .box .text.noMgn {
  margin-top: 0!important;
}

.section .box .prof {
  margin-top: 10px;
  padding: 15px 10px;
  background: #fff100;
}
.section .box .prof .title {
  font-size: 17px;
}
.section .box .subTitle {
  font-size: 15px;
  line-height: 1.3;
  font-weight: bold;
  margin: 5px 0 4px;
}

@media screen and (min-width: 751px) {
  .section .box {
    margin-top: 30px;
    padding: 28px;
  }
  .section .box .title {
    font-size: 20px;
  }
  .section .box .price {
    font-size: 34px;
  }
  .section .box .price .tax {
    font-size: 18px;
  }
  .section .box .image {
    margin-top: 0;
  }
  .section .box .text {
    margin-top: 30px;
    font-size: 16px;
    line-height: 1.875;
  }

  .section .box .column {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .section .box .column.imageLeft {
    flex-direction: row-reverse;
  }
  .section .box .column .wrap,
  .section .box .column .image {
    width: 48%;
  }

  .section .box .prof {
    margin-top: 15px;
    padding: 15px;
  }
  .section .box .prof .text {
    font-size: 15px;
    line-height: 1.6;
  }
  .section .box .prof .title {
    font-size: 18px;
  }
  .section .box .subTitle {
    font-size: 16px;
  }
}

/* image_sp_move */
.section .box.image_sp_move .text {
}
@media screen and (min-width: 751px) {
  .section .box.image_sp_move .wrap {
    position: relative;
  }
  .section .box.image_sp_move .text {
    margin: 10px 0;
  }

  .section .box.image_sp_move .text.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}


/*----------------------------------------------------
priceBox
----------------------------------------------------*/
.priceBox {
  text-align: left;
}

.priceBox .price {
  font-size: 30px;
  line-height: 1;
  font-weight: bold;
  margin: 0.55em 0;
}
.priceBox .price .tax {
  font-size: 16px;
  font-weight: normal;
}
.priceBox .price .min {
  display: block;
  font-size: 17px;
  line-height: 1.3;
  margin-top: 5px;
}
.priceBox .price .min.mgn {
  margin-bottom: 0.8em;
}
.priceBox .text,
.priceBox .note,
.priceBox .subTitle {
  font-size: 14px;
  line-height: 1.42;
}

.priceBox .subTitle {
  font-weight: bold;
  margin-bottom: 0.4em;
}

.priceBox .note {
  margin-top: 1em;
}
.priceBox .note.mgn {
  margin-top: 1.6em;
}
.priceBox .note  a:hover{
text-decoration: none !important;
border: none !important;
}

.priceBox .float {
  margin-top: 15px;
}
.priceBox .float img {
  width: 150px;
}
.priceBox .image {
  margin-top: 20px;
}
.priceBox .image img {
  border: solid 1px #000000;
}
.priceBox .image.noBorder img {
  border: none;
}
.priceBox .caption {
  margin-top: 0.5em;
}
.priceBox .image2 {
  margin-top: 20px;
}
.priceBox .image2 img {
  border: solid 1px #000000;
}
.priceBox .image2.noBorder img {
  border: none;
}
.priceBox .image3 {
  margin-top: 20px;
}
.priceBox .image3.noBorder img {
  border: none;
}
.priceBox .caption {
  margin-top: 0.5em;
}
.priceBox .image4 {
  margin-top: 20px;
}
.priceBox .image4.noBorder img {
  border: none;
}
.priceBox .caption {
  margin-top: 0.5em;
}
@media screen and (min-width: 751px) {
  .priceBox {
    margin-top: 40px;
  }
  .priceBox:first-child {
    margin-top :0;
  }
  .priceBox .price  {
    font-size: 34px;
    margin: 25px 0 0.4em;
  }
  .priceBox .price.long {
    font-size: 32px;
  }
  .priceBox .price .min {
    font-size: 20px;
  }
  .priceBox .column .price {
    margin-top: 0;
  }
  .priceBox .price .tax  {
    font-size: 18px;
  }
  .priceBox .text,
  .priceBox .note,
  .priceBox .subTitle {
    font-size: 16px;
    line-height: 1.875;
  }
  .priceBox .note {
    margin-top: 1.8em;
  }
  .priceBox .note a:hover {
    text-decoration: underline;
  }
  .priceBox .column {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .priceBox .column2 {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .priceBox .wrap {
    width: 48%;
  }
  .priceBox .wrap.withFloat {
    position: relative;
    padding-bottom: 40px;
  }
  .priceBox .image {
    margin-top: 0;
    width: 48%;
  }
  .priceBox .image2 {
    margin-top: 0;
    width: 100%;
  }
  .priceBox .image3 {
    margin-top: 0;
    width: 48%;
  }
  .priceBox .image4 {
    margin-top: 0;
    width: 100%;
  }
  .priceBox .float {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .priceBox .float a img {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .priceBox .float a:hover img {
    opacity: 0.8;
  }
}


/*----------------------------------------------------
tabWrap
----------------------------------------------------*/

/* tabChanger */
.tabChanger {
  margin-top: 40px;
}
.tabChanger ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tabChanger li {
  width: 23.8%;
  border: solid;
  box-sizing: border-box;
  line-height: 1.3em;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 5px;
  border-color: #fff100;
}
.tabChanger li.current {
  background: #fff100;
}
.tabChanger li.wait {
  color: #cdcdcd;
  border-color: #ededed;
}
@media screen and (min-width: 751px) {
  .tabChanger li {
    font-size: 18px;
    letter-spacing: 0.05em;
    padding: 15px 10px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .tabChanger li:not(.wait):hover {
    background: #fff100;
  }
  .tabChanger li.wait,
  .tabChanger li.current {
    cursor: default;
  }
}


/* tabWrap */
#mainBody  .tabWrap .section {
  margin-top: 0!important;
  padding-top: 20px!important;
}
@media screen and (min-width: 751px) {
  #mainBody  .tabWrap .section {
    padding-top: 30px!important;
  }
}


/*----------------------------------------------------
pageTicket
----------------------------------------------------*/

#pageTicket .pageNote {
  text-align: left;
  margin-top: 2.6em;
  font-size: 14px;
  line-height: 1.42;
}
#pageTicket .pageNote strong {
  color: #ff0000;
  font-weight: normal;
}
@media screen and (min-width: 751px) {
  #pageTicket .pageNote {
    margin-top: 3.4em;
    font-size: 16px;
    line-height: 1.875;
  }
  #pageTicket .section.mgn {
    margin-top: 40px;
  }
  #pageTicket table.common.padding tbody td,
  #pageTicket table.common.padding tbody th {
    padding: 1.2em 1.2em;
  }
}

/*----------------------------------------------------
pageEvent
----------------------------------------------------*/

#pageEvent .pageNote {
  text-align: left;
  margin-top: 2.6em;
  font-size: 14px;
  line-height: 1.42;
}
#pageEvent .pageNote strong {
  color: #ff0000;
  font-weight: normal;
}
@media screen and (min-width: 751px) {
  #pageEvent .pageNote {
    margin-top: 3.4em;
    font-size: 16px;
    line-height: 1.875;
  }
  #pageEvent .section.mgn {
    margin-top: 40px;
  }
  #pageEvent table.common.padding tbody td,
  #pageEvent table.common.padding tbody th {
    padding: 1.2em 1.2em;
  }
}
/* tabChanger */
  #pageEvent .tabChanger {
  margin-top: 40px;
}
  #pageEvent .tabChanger ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
  #pageEvent .tabChanger li {
  width: 48.8%;
  border: solid;
  box-sizing: border-box;
  line-height: 1.3em;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 5px;
  border-color: #fff100;
}
  #pageEvent .tabChanger li.current {
  background: #fff100;
}
  #pageEvent .tabChanger li.wait {
  color: #cdcdcd;
  border-color: #ededed;
}
@media screen and (min-width: 751px) {
  #pageEvent   .tabChanger li {
    font-size: 18px;
    letter-spacing: 0.05em;
    padding: 15px 10px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  #pageEvent   .tabChanger li:not(.wait):hover {
    background: #fff100;
  }
  #pageEvent   .tabChanger li.wait,
  #pageEvent   .tabChanger li.current {
    cursor: default;
  }
}

/*----------------------------------------------------
pageHighlight
----------------------------------------------------*/

#pageHighlight #mainBody {
  background-image: url(../../images/highlight/bg_sp.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}
#pageHighlight #mainBody>.inner {
  padding: 20px 0 0 0;
  text-align: center;
}
#pageHighlight .zone {
  margin: 20px auto 0;
  max-width: 1054px;
  text-align: left;
}
#pageHighlight .zone h2 {
  background: #fff100;
  text-align: center;
}
#pageHighlight .zone h2 img {
  display: block;
  width: 100%;
  background: #ffffff;
}
#pageHighlight .zone h2 span {
  position: relative;
  display: inline-block;
  font-size: 13px;
  line-height: 23px;
  vertical-align: top;
}
#pageHighlight .zone h2 span::after {
  content: '▼';
}
#pageHighlight .zone h2.open span::after {
  content: '▲';
}
#pageHighlight .zone .body {
  display: none;
  padding: 40px 6.4% 30px;
}

@media screen and (min-width: 751px) {
  #pageHighlight #mainBody {
    background-image: url(../../images/highlight/bg_pc.png);
    background-size: auto auto;
  }
  #pageHighlight .zone h2 {
    cursor: pointer;
  }
  #pageHighlight .zone h2 span {
    font-size: 16px;
    line-height: 30px;
  }
  #pageHighlight .zone h2,
  #pageHighlight .zone h2 img {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  #pageHighlight .zone h2:hover {
    background: #fffaa5;
  }
  #pageHighlight .zone h2:hover img {
    opacity: 0.92;
  }

  #pageHighlight .zone .body {
    padding: 55px 20px 35px;
  }
}
@media screen and (min-width: 1111px) {
  #pageHighlight .zone .body {
    padding: 55px 0 35px;
  }
}

/* only sp */
@media screen and (max-width: 750px) {

  #pageHighlight .caption {
    display: block;
    margin-top: 8px;
    color: #221815;
    font-size: 10px;
    line-height: 1.26;
  }

  /* zone_1 */
  #pageHighlight #zone_1 .forSP {
    position: relative;
  }
  #pageHighlight #zone_1 .forSP::before {
    position: absolute;
    top: 10px;
    left: 50px;
    display: block;
    content: '';
    width: 1px;
    height: 100%;
    background: #000000;
  }
  #pageHighlight #zone_1 .contain {
    position: relative;
    padding-left: 65px;
    padding-bottom: 45px;
  }
  #pageHighlight #zone_1 .contain::before {
    position: absolute;
    top: 6px;
    left: 43px;
    display: block;
    content: '';
    width: 15px;
    height: 15px;
    background: url(../../images/highlight/zone_1_icon.png) no-repeat;
  }
  #pageHighlight #zone_1 .year {
    position: absolute;
    top: 2px;
    left: 0;
    font-size: 15px;
    lne-height: 1.2;
    font-weight: bold;
  }
  #pageHighlight #zone_1 h3 {
    font-size: 22px;
    line-height: 1.16;
  }
  #pageHighlight #zone_1 .text {
    margin-top: 10px;
    color: #221815;
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.03em;
  }
  #pageHighlight #zone_1 .text strong {
    color: #e60012;
    font-weight: normal;
  }
  #pageHighlight #zone_1 .image {
    position: relative;
    margin-top: 10px;
  }
  #pageHighlight #zone_1 .image.mgn {
    margin-top: 25px;
  }
  #pageHighlight #zone_1 h4.red {
    position: relative;
    color: #e60012;
    font-size: 22px;
    line-height: 1.2;
    padding-left: 1em;
    margin: 2em 0 0;
  }
  #pageHighlight #zone_1 h4.red::before {
    position: absolute;
    top: 0.2em;
    left: 0;
    display: block;
    font-size: 0.8em;
    content: '▲';
    transform: rotate(90deg);
  }
  #pageHighlight #zone_1 .fuk {
    position: relative;
    margin-top: 20px;
    border: solid 1px #67605d;
    padding: 10px;
  }
  #pageHighlight #zone_1 .fuk h5 {
    color: #e60012;
    font-size: 16px;
    line-height: 1.3;
  }
  #pageHighlight #zone_1 .fuk p {
    color: #221815;
    font-size: 14px;
    line-height: 1.8;
    margin-top: 0.4em;
  }
  #pageHighlight #zone_1 .fuk::after {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    content: '';
    width: 8px;
    height: 8px;
    margin: -6px 0 0 -6px;
    border-top: 1px solid #67605d;
    border-right: 1px solid #67605d;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #ffffff;
  }
  #pageHighlight #zone_1 .image .caption.ex1 {
    position: absolute;
    bottom: -2.2em;
    left: 0;
  }
  #pageHighlight #zone_1 .image.ex1 {
    margin-bottom: 1em;
  }
  #pageHighlight #zone_1 .image .caption.ex2 {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #pageHighlight #zone_1 .continu {
    color: #221815;
    font-size: 24px;
    line-height: 1.2;
    font-weight: bold;
    margin-top: 2em;
  }

  /* zone_2 */
  #pageHighlight #zone_2 .lead {
    color: #000000;
    font-size: 16px;
    line-height: 1.875;
    font-weight: bold;
    margin-bottom: 1.5em;
  }
  #pageHighlight #zone_2 .image.ex1,
  #pageHighlight #zone_2 .image.ex2,
  #pageHighlight #zone_2 .image.ex3,
  #pageHighlight #zone_2 .image.ex4 {
    position: relative;
  }
  #pageHighlight #zone_2 .image.ex1 {
    margin-bottom: 40px;
  }
  #pageHighlight #zone_2 .image.ex2 {
    padding-bottom: 1.4em;
  }
  #pageHighlight #zone_2 .image.ex3 {
    margin-top: 10px;
  }
  #pageHighlight #zone_2 .image.ex4 {
    margin-top: 20px;
  }
  #pageHighlight #zone_2 .caption.ex1,
  #pageHighlight #zone_2 .caption.ex2,
  #pageHighlight #zone_2 .caption.ex3 {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #pageHighlight #zone_2 .caption.ex1 {
    left: auto;
    right: 0;
    text-align: right;
  }
  #pageHighlight #zone_2 .caption.ex3 {
    bottom: 14px;
  }
  #pageHighlight #zone_2 .caption.ex4 {
    left: auto;
    right: 0;
    text-align: right;
  }
  #pageHighlight #zone_2 h3.line {
    border-left: solid 3px #ff0025;
    color: #e60012;
    font-size: 24px;
    line-height: 1;
    padding-left: 12px;
  }
  #pageHighlight #zone_2 h3.line span {
    display: block;
    color: #221815;
    font-size: 14px;
    line-height: 1.8;
    font-weight: normal;
    margin-top: 1.4em;
  }

  /* column1 */
  #pageHighlight .column1 {
    margin-top: 40px;
    border: solid 1px #000000;
    padding: 15px;
  }
  #pageHighlight .column1 h3 {
    position: relative;
    display: inline-block;
    background: #19acb3;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    padding: 0.46em 0.5em 0.4em;
    margin-bottom: 20px;
    min-height: 36px;
    box-sizing: border-box;
  }
  #pageHighlight .column1 h3::after {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    content: '';
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: solid 18px transparent;
    border-left: solid 18px #19acb3;
    margin-right: -36px;
  }
  #pageHighlight .column1 h4 {
    position: relative;
    color: #221815;
    font-size: 14px;
    line-height: 1.4;
    font-weight: normal;
    padding-left: 60px;
  }
  #pageHighlight .column1 h4 span {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
  }
  #pageHighlight .column1 .image {
    margin-top: 10px;
  }
  #pageHighlight .column1 li {
    padding: 10px 0;
    border-top: dashed 1px #000000;
  }
  #pageHighlight .column1 li:first-child {
    padding: 0 0 10px;
    border-top: none;
  }
  #pageHighlight .column1 .clm {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #pageHighlight .column1 .clm .image {
    width: 48.6%;
  }

  /* column2 */
  #pageHighlight .column2 {
    margin-top: 30px;
    background: #fffbbf;
    padding: 20px 15px 30px;
  }
  #pageHighlight .column2 h3 {
    color: #221815;
    font-size: 16px;
    line-height: 1.3;
  }
  #pageHighlight .column2 h3 em {
    display: block;
    font-size: 22px;
    margin-top: 0.16em;
  }
  #pageHighlight .column2 h4 {
    position: relative;
    margin-top: 30px;
    font-size: 22px;
    line-height: 1.2;
    padding-left: 1em;
  }
  #pageHighlight .column2 h4::before {
    position: absolute;
    top: 0.2em;
    left: 0;
    display: block;
    color: #ff0025;
    font-size: 0.8em;
    content: '▲';
    transform: rotate(90deg);
  }
  #pageHighlight .column2 .text {
    color: #221815;
    margin-top: 0.4em;
    font-size: 14px;
    line-height: 2;
  }
  #pageHighlight .column2 .image {
    margin-top: 15px;
  }

  /* tri */
  #pageHighlight .tri {
    position: relative;
    margin-top: 30px;
    font-size: 22px;
    line-height: 1.2;
    padding-left: 1em;
  }
  #pageHighlight .tri::before {
    position: absolute;
    top: 0.2em;
    left: 0;
    display: block;
    color: #ff0025;
    font-size: 0.8em;
    content: '▲';
    transform: rotate(90deg);
  }

  /* zone_3 */
  #pageHighlight #zone_3 .lead {
    position: relative;
    color: #000000;
    font-size: 16px;
    line-height: 1.875;
    font-weight: bold;
    margin-bottom: 1.5em;
  }
  #pageHighlight #zone_3 .lead img {
    float: right;
    width: 160px;
    padding: 0 0 5px 5px;
  }
  #pageHighlight #zone_3 .text {
    margin-top: 10px;
    color: #221815;
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.03em;
  }
  #pageHighlight #zone_3 .text.ex {
    display: inline-block;
    background: #f7b2b7;
    line-height: 1.2;
  }
  #pageHighlight #zone_3 .text.ex.mgn {
    margin-top: 20px;
  }
  #pageHighlight #zone_3 .image {
    position: relative;
  }
  #pageHighlight #zone_3 .image.ex1 {
    margin: 20px 0 30px;
  }
  #pageHighlight #zone_3 .caption.ex1 {
    position: absolute;
    top: 14vw;
    left: 56vw;
  }
  #pageHighlight #zone_3 .image.ex2 {
    margin-top: 30px;
  }

  #pageHighlight #zone_3 .column1 li.ex1 {
    position: relative;
    padding-right: 152px;

  }
  #pageHighlight #zone_3 .column1 li.ex1 .image {
    position: absolute;
    top: 0;
    right: 0;
    width: 142px;
  }
  #pageHighlight #zone_3 .column1 li.ex2 {
    margin-right: 152px;
    padding-bottom: 14vw;
  }
  #pageHighlight #zone_3 .column2 .lead {
    margin-top: 10px;
    color: #221815;
    font-size: 14px;
    line-height: 2;
    font-weight: normal;
    padding: 0.5em 0;
  }

  /* zone_4 */
  #pageHighlight #zone_4 .lead {
    color: #000000;
    font-size: 16px;
    line-height: 1.875;
    font-weight: bold;
    margin-bottom: 1.5em;
  }
  #pageHighlight #zone_4 .text {
    color: #221815;
    font-size: 14px;
    line-height: 1.43;
    margin: 20px 0 0;
  }
  #pageHighlight #zone_4 .image {
    margin: 20px 0 0;
  }
}

@media screen and (max-width: 420px) {
  #pageHighlight #zone_3 .column1 li.ex2 {
    padding-bottom: 8vw;
  }
}
@media screen and (max-width: 410px) {
  #pageHighlight .column1 .clm {
    display: block;
  }
  #pageHighlight .column1 .clm .image {
    width: 100%;
  }

  #pageHighlight #zone_3 .column1 li.ex1 {
    padding-right: 0;
  }
  #pageHighlight #zone_3 .column1 li.ex1 .image {
    position: static;
    width: 100%;
  }
  #pageHighlight #zone_3 .column1 li.ex2 {
    margin-right: 0;
    padding-bottom: 20px;
  }
}
@media screen and (max-width: 340px) {
  #pageHighlight .column1 h3 {
    font-size: 16px;
  }
}
/*----------------------------------------------------
pageSpecial
----------------------------------------------------*/

#pageSpecial .pageNote {
  text-align: left;
  margin-top: 2.6em;
  font-size: 14px;
  line-height: 1.42;
}
#pageSpecial .pageNote strong {
  color: #ff0000;
  font-weight: normal;
}
@media screen and (min-width: 751px) {
  #pageSpecial .pageNote {
    margin-top: 3.4em;
    font-size: 16px;
    line-height: 1.875;
  }
  #pageSpecial .section.mgn {
    margin-top: 40px;
  }
  #pageSpecial table.common.padding tbody td,
  #pageSpecial table.common.padding tbody th {
    padding: 1.2em 1.2em;
  }
#pageSpecial .zone {
  margin: 20px auto 0;
  max-width: 640px;
  text-align: center;
}
#pageSpecial .zone2 {
  max-width: 70px;
  text-align: left;
}
#pageSpecial .zone h2 {
  background: #fff100;
  text-align: center;
}
#pageSpecial .zone h2 img {
  display: block;
  width: 100%;
  background: #ffffff;
}
#pageSpecial .zone h2 span {
  position: relative;
  display: inline-block;
  font-size: 13px;
  line-height: 23px;
  vertical-align: top;
}
#pageSpecial .zone2 h3 {
  background: #ffffff;
  text-align: left;
}
#pageSpecial .zone2 h3 img {
  display: block;
  width: 100%;
  background: #ffffff;
}
#pageSpecial .zone2 h3 span {
  position: relative;
  display: inline-block;
  font-size: 13px;
  line-height: 23px;
  vertical-align: top;
}
#pageSpecial .zone .body {
  display: none;
  padding: 40px 6.4% 30px;
}
#pageSpecial .zone2 .body {
  display: none;
  padding: 40px 6.4% 30px;
}

@media screen and (min-width: 751px) {
  #pageSpecial #mainBody {
    background-size: auto auto;
  }
  #pageSpecial .zone h2 {
    cursor: pointer;
  }
  #pageSpecial .zone h2 span {
    font-size: 16px;
    line-height: 30px;
  }
  #pageSpecial .zone h2,
  #pageSpecial .zone h2 img {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  #pageSpecial .zone h2:hover {
    background: #fffaa5;
  }
  #pageSpecial .zone h2:hover img {
    opacity: 0.92;
  }
  #pageSpecial .zone h3 {
    cursor: pointer;
  }
  #pageSpecial .zone h3 span {
    font-size: 16px;
    line-height: 30px;
  }
  #pageSpecial .zone h3,
  #pageSpecial .zone h3 img {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  #pageSpecial .zone2 h3:hover {
    background: #fffaa5;
  }
  #pageSpecial .zone2 h3:hover img {
    opacity: 0.92;
  }

  #pageSpecial .zone .body {
    padding: 55px 20px 35px;
  }
}
@media screen and (min-width: 1111px) {
  #pageSpecial .zone .body {
    padding: 55px 0 35px;
  }
  #pageSpecial .zone2 .body {
    padding: 55px 0 35px;
  }
}

/* only sp */
@media screen and (max-width: 750px) {

  #pageSpecial .caption {
    display: block;
    margin-top: 8px;
    color: #221815;
    font-size: 10px;
    line-height: 1.26;
  }

  /* zone_1 */
  #pageSpecial #zone_1 .forSP {
    position: relative;
  }
  #pageSpecial #zone_1 .forSP::before {
    position: absolute;
    top: 10px;
    left: 50px;
    display: block;
    content: '';
    width: 1px;
    height: 100%;
    background: #000000;
  }
  #pageSpecial #zone_1 .contain {
    position: relative;
    padding-left: 65px;
    padding-bottom: 45px;
  }
  #pageSpecial #zone_1 .contain::before {
    position: absolute;
    top: 6px;
    left: 43px;
    display: block;
    content: '';
    width: 15px;
    height: 15px;
  }
  #pageSpecial #zone_1 .year {
    position: absolute;
    top: 2px;
    left: 0;
    font-size: 15px;
    lne-height: 1.2;
    font-weight: bold;
  }
  #pageSpecial #zone_1 h3 {
    font-size: 22px;
    line-height: 1.16;
  }
  #pageSpecial #zone_1 .text {
    margin-top: 10px;
    color: #221815;
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.03em;
  }
  #pageSpecial #zone_1 .text strong {
    color: #e60012;
    font-weight: normal;
  }
  #pageSpecial #zone_1 .image {
    position: relative;
    margin-top: 10px;
  }
  #pageSpecial #zone_1 .image.mgn {
    margin-top: 25px;
  }
  #pageSpecial #zone_1 h4.red {
    position: relative;
    color: #e60012;
    font-size: 22px;
    line-height: 1.2;
    padding-left: 1em;
    margin: 2em 0 0;
  }
  #pageSpecial #zone_1 h4.red::before {
    position: absolute;
    top: 0.2em;
    left: 0;
    display: block;
    font-size: 0.8em;
    transform: rotate(90deg);
  }
  #pageSpecial #zone_1 .fuk {
    position: relative;
    margin-top: 20px;
    border: solid 1px #67605d;
    padding: 10px;
  }
  #pageSpecial #zone_1 .fuk h5 {
    color: #e60012;
    font-size: 16px;
    line-height: 1.3;
  }
  #pageSpecial #zone_1 .fuk p {
    color: #221815;
    font-size: 14px;
    line-height: 1.8;
    margin-top: 0.4em;
  }
  #pageSpecial #zone_1 .fuk::after {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    content: '';
    width: 8px;
    height: 8px;
    margin: -6px 0 0 -6px;
    border-top: 1px solid #67605d;
    border-right: 1px solid #67605d;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #ffffff;
  }
  #pageSpecial #zone_1 .image .caption.ex1 {
    position: absolute;
    bottom: -2.2em;
    left: 0;
  }
  #pageSpecial #zone_1 .image.ex1 {
    margin-bottom: 1em;
  }
  #pageSpecial #zone_1 .image .caption.ex2 {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #pageSpecial #zone_1 .continu {
    color: #221815;
    font-size: 24px;
    line-height: 1.2;
    font-weight: bold;
    margin-top: 2em;
  }
}
/*----------------------------------------------------
pageGoods
----------------------------------------------------*/

#pageGoods .pageNote {
  text-align: left;
  margin-top: 2.6em;
  font-size: 14px;
  line-height: 1.42;
}
#pageGoods .pageNote strong {
  color: #ff0000;
  font-weight: normal;
}
@media screen and (min-width: 751px) {
  #pageGoods .pageNote {
    margin-top: 3.4em;
    font-size: 16px;
    line-height: 1.875;
  }
  #pageGoods .section.mgn {
    margin-top: 40px;
  }
  #pageGoods table.common.padding tbody td,
  #pageGoods table.common.padding tbody th {
    padding: 1.2em 1.2em;
  }

#pageGoods .pageNote {
  text-align: left;
  margin-top: 2.6em;
  font-size: 14px;
  line-height: 1.42;
}
#pageGoods .pageNote strong {
  color: #ff0000;
  font-weight: normal;
}
@media screen and (min-width: 751px) {
  #pageGoods .pageNote {
    margin-top: 3.4em;
    font-size: 16px;
    line-height: 1.875;
  }
  #pageGoods .section.mgn {
    margin-top: 40px;
  }
  #pageGoods table.common.padding tbody td,
  #pageGoods table.common.padding tbody th {
    padding: 1.2em 1.2em;
  }
#pageGoods .zone {
  margin: 20px auto 0;
  max-width: 100%;
  text-align: center;
}
#pageGoods .zone2 {
  max-width: 70px;
  text-align: left;
}
#pageGoods .zone h2 {
  background: #fff100;
  text-align: center;
}
#pageGoods .zone h2 img {
  display: block;
  width: 100%;
  background: #ffffff;
}
#pageGoods .zone h2 span {
  position: relative;
  display: inline-block;
  font-size: 13px;
  line-height: 23px;
  vertical-align: top;
}
#pageGoods .zone2 h3 {
  background: #ffffff;
  text-align: left;
}
#pageGoods .zone2 h3 img {
  display: block;
  width: 100%;
  background: #ffffff;
}
#pageGoods .zone2 h3 span {
  position: relative;
  display: inline-block;
  font-size: 13px;
  line-height: 23px;
  vertical-align: top;
}
#pageGoods .zone .body {
  display: none;
  padding: 40px 6.4% 30px;
}
#pageGoods .zone2 .body {
  display: none;
  padding: 40px 6.4% 30px;
}

@media screen and (min-width: 751px) {
  #pageGoods #mainBody {
    background-size: auto auto;
  }
  #pageGoods .zone h2 {
    cursor: pointer;
  }
  #pageGoods .zone h2 span {
    font-size: 16px;
    line-height: 30px;
  }
  #pageGoods .zone h2,
  #pageGoods .zone h2 img {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  #pageGoods .zone h2:hover {
    background: #fffaa5;
  }
  #pageGoods .zone h2:hover img {
    opacity: 0.92;
  }
  #pageGoods .zone h3 {
    cursor: pointer;
  }
  #pageGoods .zone h3 span {
    font-size: 16px;
    line-height: 30px;
  }
  #pageGoods .zone h3,
  #pageGoods .zone h3 img {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  #pageGoods .zone2 h3:hover {
    background: #fffaa5;
  }
  #pageGoods .zone2 h3:hover img {
    opacity: 0.92;
  }

  #pageGoods .zone .body {
    padding: 55px 20px 35px;
  }
}
@media screen and (min-width: 1111px) {
  #pageGoods .zone .body {
    padding: 55px 0 35px;
  }
  #pageGoods .zone2 .body {
    padding: 55px 0 35px;
  }
}

/* only sp */
@media screen and (max-width: 750px) {

  #pageGoods .caption {
    display: block;
    margin-top: 8px;
    color: #221815;
    font-size: 10px;
    line-height: 1.26;
  }
  /* zone_1 */
  #pageGoods #zone_1 .forSP {
    position: relative;
  }
  #pageGoods #zone_1 .forSP::before {
    position: absolute;
    top: 10px;
    left: 50px;
    display: block;
    content: '';
    width: 1px;
    height: 100%;
    background: #000000;
  }
  #pageGoods #zone_1 .contain {
    position: relative;
    padding-left: 65px;
    padding-bottom: 45px;
  }
  #pageGoods #zone_1 .contain::before {
    position: absolute;
    top: 6px;
    left: 43px;
    display: block;
    content: '';
    width: 15px;
    height: 15px;
  }
  #pageGoods #zone_1 .year {
    position: absolute;
    top: 2px;
    left: 0;
    font-size: 15px;
    lne-height: 1.2;
    font-weight: bold;
  }
  #pageGoods #zone_1 h3 {
    font-size: 22px;
    line-height: 1.16;
  }
  #pageGoods #zone_1 .text {
    margin-top: 10px;
    color: #221815;
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.03em;
  }
  #pageGoods #zone_1 .text strong {
    color: #e60012;
    font-weight: normal;
  }
  #pageGoods #zone_1 .image {
    position: relative;
    margin-top: 10px;
  }
  #pageGoods #zone_1 .image.mgn {
    margin-top: 25px;
  }
  #pageGoods #zone_1 h4.red {
    position: relative;
    color: #e60012;
    font-size: 22px;
    line-height: 1.2;
    padding-left: 1em;
    margin: 2em 0 0;
  }
  #pageGoods #zone_1 h4.red::before {
    position: absolute;
    top: 0.2em;
    left: 0;
    display: block;
    font-size: 0.8em;
    transform: rotate(90deg);
  }
  #pageGoods #zone_1 .fuk {
    position: relative;
    margin-top: 20px;
    border: solid 1px #67605d;
    padding: 10px;
  }
  #pageGoods #zone_1 .fuk h5 {
    color: #e60012;
    font-size: 16px;
    line-height: 1.3;
  }
  #pageGoods #zone_1 .fuk p {
    color: #221815;
    font-size: 14px;
    line-height: 1.8;
    margin-top: 0.4em;
  }
  #pageGoods #zone_1 .fuk::after {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    content: '';
    width: 8px;
    height: 8px;
    margin: -6px 0 0 -6px;
    border-top: 1px solid #67605d;
    border-right: 1px solid #67605d;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #ffffff;
  }
  #pageGoods #zone_1 .image .caption.ex1 {
    position: absolute;
    bottom: -2.2em;
    left: 0;
  }
  #pageGoods #zone_1 .image.ex1 {
    margin-bottom: 1em;
  }
  #pageGoods #zone_1 .image .caption.ex2 {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #pageGoods #zone_1 .continu {
    color: #221815;
    font-size: 24px;
    line-height: 1.2;
    font-weight: bold;
    margin-top: 2em;
  }
}