@charset "UTF-8";

@font-face {
font-family: 'shuei';
src: url('../font/AP-OTF-ShueiNMinStd-L.otf'),
url('../font/AP-OTF-ShueiNMinStd-L.woff'),
url('../font/AP-OTF-ShueiNMinStdN-L.otf'),
url('../font/AP-OTF-ShueiNMinStdN-L.woff');
}

html {
  width: 100%;
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  font-size: 75%;
  font-family: 'shuei','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  line-height: 2.0em;
  animation: allfadeIn 2s ease 0s 1 normal;
  -webkit-animation: allfadeIn 2s ease 0s 1 normal;
}
@keyframes allfadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes allfadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
a {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  text-decoration: none;
}
a:hover {
	opacity:0.5;
  filter: alpha(opacity=50);
  -moz-opacity:0.5;
}
p {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 130%;
  line-height: 1.8em;
  color: #260a00;
}
h1 {
  margin: 0;
  padding: 0;
  line-height: 0;
}
h2 {
  margin: 0;
  padding: 0;
  text-align: center;
}
h3 {
  margin: 0;
  padding: 0;
  font-size: 140%;
}
h4 {
  margin: 0;
  padding: 0;
  font-size: 160%;
}
h4 span {
  padding: 0 0 0 1em;
  font-size: 65%;
}

.lineClear {
  clear: both;
  line-height: 0;
}
.pageTop {
  width: 100%;
  text-align: center;
  margin: 4em 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

/*header*/
header {
  width: 100%;
  background: #260a00 url(../images/mainv-bk.jpg) no-repeat center center;
  background-size: contain;
  padding-bottom: 580px;
  position: relative;
}
header #headercontent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 1280px;
  margin: auto;
}
header #headercontent #headerPentelLogo {
  width: 110px;
  height: 63px;
  margin-top: 10px;
}
header #headercontent #headerPentelLogo img {
  width: 150px;
}
header #headercontent h1 {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url(../images/mainv-copyright.png) no-repeat;
  background-size: 600px;
  width: 600px;
  height: 82px;
  margin: 20px 0;
  position: absolute;
  z-index: 3;
}
header #headerLogo {
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
}
header #headerLogo img {
  width: 300px;
  padding-bottom: 15px;
}
header .smpMainv {
  display: none;
}
@media screen and (max-width: 1280px) {
  header {
    background-size: cover;
  }
  header #headercontent {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  header {
    background: none;
    padding-bottom: 0;
  }
  header #headercontent {
    width: 100%;
    position: static;
  }
  #headerPentelLogo, #headerLogo, #headercontent h1 {
    display: none;
  }
  .smpMainv {
    display: block !important;
    width: 100%;
  }
}

/*nav*/
#navContent {
  width: 100%;
  background: #010732;
  padding: 18px 0;
  font-size: 16px;
  position: relative;
  z-index: 2;
}
#navContent ul {
  width: 1280px;
  margin: 0 auto;
  text-align: left;
  display: flex;
}
#navContent ul li {
  display: inline-block;
  padding-right: 3rem;
  position: relative;
}
#navContent ul li a {
  color: #FFF;
}
#navContent ul li.vistageLinkBtn {
  margin-left: auto;
  padding-right: 0;
}
#navContent ul li.vistageLinkBtn a {
  padding: 12px 20px;
  background: #0ba095;
}
a.toggle {
  display: none;
}

@media screen and (max-width: 1280px) {
  #navContent {
    padding: 0;
  }
  #navContent ul {
    width: 100%;
    text-align: center;
    display: none;
  }
  #navContent ul li {
    display: block;
    padding-right: 0;
    border-top: 1px solid #fff;
  }
  #navContent ul li a {
    display: block;
    padding: 1.6em 0;
  }
  #navContent ul li.vistageLinkBtn {
    border-top: none;
  }
  #navContent ul li.vistageLinkBtn a {
    padding: 1.6em 0;
  }
  a.toggle {
    display: block;
    color: #FFF;
    text-align: center;
    padding: 1.6em 0;
    background: url(../images/bottom-arrow.png) no-repeat center left 96%;
    background-size: 20px;
  }
  a.toggle.active {
    background: url(../images/top-arrow.png) no-repeat center left 96%;
    background-size: 20px;
  }
}

/*movieArea*/
#movieArea {
  background: url(../images/movieArea_bk.jpg) no-repeat;
  background-size: 100%;
  background-size: cover;
  padding: 100px 0;
  text-align: center;
  position: relative;
  z-index: 2;
}
#movieArea h3 {
  line-height: 2;
  color: #FFF;
  font-size: 160%;
}
#movieArea p {
  color: #FFF;
  font-size: 160%;
  padding-top: 20px;
}
@media screen and (max-width: 1280px) {
  #movieArea .movieArea-inner {
    width: 90%;
    margin: 0 auto;
  }
}

/*contentArea1*/
#contentArea1 {
  background: url(../images/contentArea1-bk.jpg) no-repeat;
  background-size: cover;
  padding: 60px 0;
  text-align: center;
}
#contentArea1 .contentArea1-inner {
  width: 1280px;
  margin: 0 auto;
}
#contentArea1 h2 {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url(../images/contentArea1-ttl.png) no-repeat center center;
  background-size: 450px;
  height: 85px;
}
#contentArea1 .contentArea1-inner p {
  font-size: 14px;
  line-height: 2;
  margin: 20px 0 40px 0;
  color: #FFF;
}
#contentArea1 .contentArea1-inner p.actionBtn {
  margin: 0;
}
#contentArea1 .contentArea1-inner .lifelogArea {
  position: relative;
  margin-bottom: 30px;
}
#contentArea1 .contentArea1-inner .lifelogArea img {
  width: 862px;
}
#contentArea1 .contentArea1-inner .lifelogArea p.lifelogTxt {
  position: absolute;
  top: 38%;
  right: 22%;
  font-size: 17px;
}
#contentArea1 .contentArea1-inner .lineupArea {
  background: rgba(1,7,50,0.9);
  width: 790px;
  padding: 30px;
  margin: 0 auto;
}
#contentArea1 .contentArea1-inner .lineupArea img.lineupTtl {
  max-width: 200px;
}
#contentArea1 .contentArea1-img {
}
#contentArea1 .contentArea1-img ul {
  font-size: 0;
}
#contentArea1 .contentArea1-img ul li {
  display: inline-block;
}
#contentArea1 .contentArea1-img ul li {
  margin-right: 30px;
}
#contentArea1 .contentArea1-img ul li:last-child {
  margin-right: 0;
}
#contentArea1 .contentArea1-img ul li img {
  width: 406px;
}
#contentArea1 .contentArea1-img ul li p {
  text-align: left;
  font-size: 12px;
  margin: 5px 0;
  line-height: 0;
}
img.lifelogImgSmp {
  display: none;
}
@media screen and (max-width: 1280px) {
  #contentArea1 {
    background-size: cover;
    padding: 30px 0;
  }
  #contentArea1 .contentArea1-inner {
    width: 100%;
  }
  #contentArea1 .contentArea1-img ul li {
    width: 30%;
    padding-right: 2%;
    margin: 0 auto;
  }
  #contentArea1 .contentArea1-img ul li:last-child {
    padding-right: 0;
  }
  #contentArea1 .contentArea1-img ul li img {
    width: 100%;
  }
  #contentArea1 .contentArea1-img ul li p {
    text-align: center;
  }
  #contentArea1 .contentArea1-inner .lifelogArea {
    width: 850px;
    margin: 0 auto;
  }
  #contentArea1 .contentArea1-inner .lifelogArea img {
    width: 100%;
    margin: 0 auto;
  }
  img.lifelogImgSmp {
    display: block;
  }
  img.lifelogImgPC {
    display: none;
  }
  #contentArea1 .contentArea1-inner .lifelogArea p.lifelogTxt {
    display: block;
    position: static;
    margin: 0 0 30px 0;
    background: #190000;
    padding: 20px;
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  #contentArea1 .contentArea1-img ul li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
  #contentArea1 .contentArea1-inner {
    width: 90%;
    margin: 0 auto;
  }
  #contentArea1 h2 {
    background-size: 280px;
    height: 50px;
  }
  #contentArea1 .contentArea1-inner p {
    padding: 0 20px;
  }
  #contentArea1 .contentArea1-inner .lifelogArea {
    width: 100%;
    margin: 0 auto;
    padding: 30px 0;
  }
  #contentArea1 .contentArea1-inner .lineupArea {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
  }
}

/*contentArea2*/
#contentArea2 {
  background: url(../images/contentArea2-bk.jpg) no-repeat;
  background-size: cover;
  padding: 60px 0;
  text-align: center;
}
#contentArea2 .contentArea2-inner {
  width: 1280px;
  margin: 0 auto;
}
.contentArea2-txt {
  background: url(../images/contentArea2-ttl-bk.png) no-repeat center center;
  background-size: 850px;
  height: 155px;
  color: #FFF;
}
.contentArea2-txt h2.contentArea2-ttl {
  font-size: 28px;
  padding-top: 43px;
}
.contentArea2-txt p {
  font-size: 14px;
  color: #FFF;
  padding-top: 10px;
  line-height: 1.6;
  margin-top: 0 !important;
}
.waterbrushImg {
  margin: 30px 0;
  text-align: center;
}
.waterbrushImg img {
  width: 400px;
}
.waterbrushImg ul {
  margin: 50px 0;
}
.waterbrushImg ul li {
  display: inline-block;
  margin-right: 30px;
  vertical-align: top;
}
.waterbrushImg ul li:last-child {
  margin-right: 0;
}
#contentArea3 .contentArea3-inner p.waterbrushImg ul li p {
  color: #da173c;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;/* 文字間 */
  text-shadow:
     2px  2px 1px #ffffff,
    -2px  2px 1px #ffffff,
     2px -2px 1px #ffffff,
    -2px -2px 1px #ffffff,
     2px  0px 1px #ffffff,
     0px  2px 1px #ffffff,
    -2px  0px 1px #ffffff,
     0px -2px 1px #ffffff;/* 文字の影 */
}
.watercolorSetImg {
  margin-bottom: 50px;
}
.watercolorSetImg ul {
  font-size: 0;
  line-height: 0;
  margin-bottom: 20px;
}
.watercolorSetImg ul li {
  display: inline-block;
  margin-right: 20px;
}
.watercolorSetImg ul li:last-child {
  margin-right: 0;
}
.watercolorSetImg ul li img {
  max-width: 250px;
}
p.actionBtn {
  margin-top: 50px;
}
p.actionBtn a {
  background: #0ba095 url(../images/right-arrow.png) no-repeat center left 96%;
  background-size: 14px;
  padding: 30px 0;
  width: 40%;
  margin: 0 auto;
  text-align: center;
  display: block;
  color: #FFF;
  font-size: 24px;
}
#contentArea1 .contentArea1-inner .lineupArea p.actionBtn a {
  width: 100% !important;
}
.actionBtnList {
}
.actionBtnList ul {
  font-size: 0;
}
.actionBtnList ul li {
  display: inline-block;
  width: 48%;
}
.actionBtnList ul li:first-child {
  margin-right: 2%;
}
.actionBtnList ul li p.actionBtn a {
  width: 100%;
  line-height: 2;
}
@media screen and (max-width: 1280px) {
  #contentArea2 {
    background: url(../images/contentArea2-bk_smp.jpg) no-repeat;
    background-size: cover;
    padding-top: 0;
  }
  #contentArea2 .contentArea2-inner {
    width: 100%;
  }
  .waterbrushImg ul {
    margin: 30px 0;
  }
  .waterbrushImg ul li {
    width: 30%;
  }
  .waterbrushImg img {
    width: 100%;
  }
  .contentArea2-txt {
    background-image: none;
    background-color: #dc2649;
    height: auto;
    padding: 20px 0;
  }
  .contentArea2-txt h2.contentArea2-ttl {
    font-size: 24px;
    padding-top: 0;
    text-shadow: none;
    width: 90%;
    margin: 0 auto;
    line-height: 1.4;
  }
  .contentArea2-txt p {
    font-size: 14px;
    padding-top: 10px;
    text-shadow: none;
    width: 90%;
    margin: 0 auto;
  }
  p.actionBtn {
    margin-top: 0;
  }
  p.actionBtn a {
    width: 100%;
    font-size: 14px;
    background-size: 8px;
  }
  .watercolorSetImg ul li {
    width: 30%;
  }
  .watercolorSetImg ul li img {
    width: 100%;
  }
  .actionBtnList {
    width: 90%;
    margin: 0 auto;
  }
  .actionBtnList ul li {
    display: block;
    width: 100%;
  }
  .actionBtnList ul li:first-child {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .watercolorSetImg {
    margin-bottom: 0;
  }
  .watercolorSetImg ul {
    margin-bottom: 0;
  }
  .waterbrushImg ul li {
    margin-right: 0;
    margin-bottom: 20px;
    width: 90%;
  }
  .watercolorSetImg ul li {
    margin-right: 0;
    margin-bottom: 20px;
    width: 90%;
  }
}


/*contentArea2-1*/
#contentArea2-1 {
  background: url(../images/sweetmix-bk.jpg) no-repeat center center;
  background-size: cover;
  height: 700px;
}
.mix-inner {
  width: 1280px;
  margin: 0 auto;
  text-align: center;
  padding: 50px 0 30px 0;
}
#contentArea2-1 .mix-inner h2 {
  font-size: 50px;
  color: #eb5c57;
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
}
#contentArea2-1 .mix-inner p {
  font-size: 14px;
  padding: 20px 0;
  color: #eb5c57;
}
#contentArea2-1 .mix-inner .mixImage-right img {
  width: 783px;
  float: right;
}
.colorVariationArea {
  background: #FFF;
  padding: 20px;
  width: 400px;
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
}
.colorVariationArea h3 {
  color: #260a00;
  font-size: 22px;
  padding: 20px 0;
}
.colorVariationArea h3 i {
  font-style: normal;
  display: flex;
  font-size: 14px;
  align-items: center;
  width: 170px;
  margin: 0 auto;
  padding-top: 5px;
}
.colorVariationArea h3 i:before,
.colorVariationArea h3 i:after {
  content: "";
	flex-grow: 1;
	height: 1px;
	background: #444;
	display: block;
}
.colorVariationArea h3 i:before {
  margin-right: .4em;
}
.colorVariationArea h3 i:after {
  margin-left: .4em;
}
.colorVariationArea ul {
  display: inline-block;
}
.colorVariationArea ul li {
  vertical-align: middle;
  padding: 10px 0;
}
.colorVariationArea ul li img {
  float: left;
  width: 60px;
}
.colorVariationArea ul li i {
  float: left;
  font-style: normal;
  line-height: 3;
  padding-left: 10px;
}
.mixImage-right {
  float: right;
}
@media screen and (max-width: 1280px) {
  .mix-inner {
    width: 100%;
  }
  #contentArea2-1 {
    height: auto;
    background: url(../images/sweetmix-bk_smp.jpg) no-repeat center center;
    background-size: cover;
  }
  #contentArea2-1 .colorVariationArea,
  #contentArea2-1 .mix-inner .mixImage-right,
  #contentArea2-1 .mix-inner .mixImage-right img {
    float: none;
    margin: 0 auto;
  }
  #contentArea2-1 .colorVariationArea {
    margin-bottom: 20px;
  }
  #contentArea2-1 .mix-inner .mixImage-right img {
    width: 90%;
  }
  #contentArea2-1 .mix-inner p,
  #contentArea2-2 .mix-inner p,
  #contentArea2-3 .mix-inner p,
  #contentArea2-4 .mix-inner p,
  #contentArea2-5 .mix-inner p {
    text-shadow: 0 2px 1px #fff;
  }
  #contentArea2-1 .mix-inner h2,
  #contentArea2-2 .mix-inner h2,
  #contentArea2-3 .mix-inner h2,
  #contentArea2-4 .mix-inner h2,
  #contentArea2-5 .mix-inner h2 {
    font-size: 40px !important;
  }
  .colorVariationArea {
    width: 90%;
    padding: 0;
  }
}

/*contentArea2-2*/
#contentArea2-2 {
  background: url(../images/standardmix-bk.jpg) no-repeat center center;
  background-size: cover;
  height: 700px;
}
#contentArea2-2 .mix-inner h2 {
  font-size: 50px;
  color: #d60029;
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
}
#contentArea2-2 .mix-inner p {
  font-size: 14px;
  padding: 20px 0;
  color: #d60029;
}
#contentArea2-2 .mix-inner .mixImage-left img {
  width: 755px;
  float: left;
}
#contentArea2-2 .colorVariationArea {
  float: right;
}
@media screen and (max-width: 1280px) {
  #contentArea2-2 {
    height: auto;
    background: url(../images/standardmix-bk_smp.jpg) no-repeat center center;
    background-size: cover;
  }
  #contentArea2-2 .colorVariationArea,
  #contentArea2-2 .mix-inner .mixImage-left img {
    float: none;
    margin: 0 auto;
  }
  #contentArea2-2 .colorVariationArea {
    margin-bottom: 20px;
  }
  #contentArea2-2 .mix-inner .mixImage-left img {
    width: 90%;
  }
}

/*contentArea2-3*/
#contentArea2-3 {
  background: url(../images/antiquemix-bk.jpg) no-repeat center center;
  background-size: cover;
  height: 700px;
}
#contentArea2-3 .mix-inner h2 {
  font-size: 50px;
  color: #6f433a;
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
}
#contentArea2-3 .mix-inner p {
  font-size: 14px;
  padding: 20px 0;
  color: #6f433a;
}
#contentArea2-3 .mix-inner .mixImage-left img {
  width: 815px;
  float: left;
}
#contentArea2-3 .colorVariationArea {
  float: right;
}
@media screen and (max-width: 1280px) {
  #contentArea2-3 {
    height: auto;
    background: url(../images/antiquemix-bk_smp.jpg) no-repeat center center;
    background-size: cover;
  }
  #contentArea2-3 .colorVariationArea,
  #contentArea2-3 .mix-inner .mixImage-left img {
    float: none;
    margin: 0 auto;
  }
  #contentArea2-3 .colorVariationArea {
    margin-bottom: 20px;
  }
  #contentArea2-3 .mix-inner .mixImage-left img {
    width: 90%;
  }
}

/*contentArea2-4*/
#contentArea2-4 {
  background: url(../images/cocktailmix-bk.jpg) no-repeat center center;
  background-size: cover;
  height: 700px;
}
#contentArea2-4 .mix-inner h2 {
  font-size: 50px;
  color: #ed6d00;
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
}
#contentArea2-4 .mix-inner p {
  font-size: 14px;
  padding: 20px 0;
  color: #ed6d00;
}
#contentArea2-4 .mix-inner .mixImage-left img {
  width: 755px;
  float: left;
}
#contentArea2-4 .colorVariationArea {
  float: right;
}
@media screen and (max-width: 1280px) {
  #contentArea2-4 {
    height: auto;
    background: url(../images/cocktailmix-bk_smp.jpg) no-repeat center center;
    background-size: cover;
  }
  #contentArea2-4 .colorVariationArea,
  #contentArea2-4 .mix-inner .mixImage-left img {
    float: none;
    margin: 0 auto;
  }
  #contentArea2-4 .colorVariationArea {
    margin-bottom: 20px;
  }
  #contentArea2-4 .mix-inner .mixImage-left img {
    width: 90%;
  }
}

/*contentArea2-5*/
#contentArea2-5 {
  background: url(../images/midnightmix-bk.jpg) no-repeat center center;
  background-size: cover;
  height: 700px;
}
#contentArea2-5 .mix-inner h2 {
  font-size: 50px;
  color: #04275e;
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
}
#contentArea2-5 .mix-inner p {
  font-size: 14px;
  padding: 20px 0;
  color: #04275e;
}
#contentArea2-5 .mix-inner .mixImage-right img {
  width: 783px;
  float: right;
}
@media screen and (max-width: 1280px) {
  #contentArea2-5 {
    height: auto;
    background: url(../images/midnightmix-bk_smp.jpg) no-repeat center center;
    background-size: cover;
  }
  #contentArea2-5 .colorVariationArea,
  #contentArea2-5 .mix-inner .mixImage-right,
  #contentArea2-5 .mix-inner .mixImage-right img {
    float: none;
    margin: 0 auto;
  }
  #contentArea2-5 .colorVariationArea {
    margin-bottom: 20px;
  }
  #contentArea2-5 .mix-inner .mixImage-right img {
    width: 90%;
  }
}

/*contentArea3*/
#contentArea3 {
  background: url(../images/contentArea3-bk.jpg);
  background-size: cover;
  padding: 60px 0;
}
#contentArea3 .contentArea3-inner {
  width: 1280px;
  margin: 0 auto;
}
#contentArea3 .contentArea3-inner h2.contentArea3-ttl {
  background: url(../images/contentsArea3-ttl-bk.png) no-repeat center center;
  background-size: 450px;
  padding: 30px 0;
  font-size: 28px;
  color: #331105;
  text-align: center;
  margin-top: 100px;
}
#contentArea3 .contentArea3-inner p {
  text-align: center;
  margin-top: 20px;
  color: #FFF;
}
#contentArea3 .contentArea3-inner .gridArea .gridAreaTxt {
  position: absolute;
  bottom: 0;
  padding: 10px;
  background: #fff;
  opacity: 0.9;
  height: 40%;
}
#contentArea3 .contentArea3-inner .gridArea .gridAreaTxt p {
  color: #331105;
  font-size: 14px;
  margin: 0;
  text-align: left;
}
#contentArea3 .contentArea3-inner .gridArea .gridAreaTxt p.gridTtl {
  font-size: 17px;
}
.gridArea {
}
.gridArea ul {
  font-size: 0;
  margin-top: 30px;
}
.gridArea ul li {
  display: inline-block;
  font-size: 14px;
  width: 305px;
  text-align: center;
  background: #FFF;
  margin-right: 20px;
}
.gridArea ul li:last-child {
  margin-right: 0;
}
.gridArea ul li img {
  width: 305px;
}
@media screen and (max-width: 1280px) {
  #contentArea3 {
    padding: 0 0 30px 0;
  }
  #contentArea3 .contentArea3-inner {
    width: 100%;
  }
  #contentArea3 .contentArea3-inner h2.contentArea3-ttl {
    background-image: none;
    background-color: #FFF;
    height: auto;
    padding: 20px 0;
  }
  #contentArea3 .contentArea3-inner p.contentArea3Txt {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;
  }
  .gridArea ul {
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }
  .gridArea ul li {
    width: 49%;
    margin-right: 2%;
    margin-bottom: 2%;
    position: relative;
  }
  .gridArea ul li:nth-child(even) {
    margin-right: 0;
  }
  .gridArea ul li:last-child {
    margin-right: auto;
  }
  #contentArea3 .contentArea3-inner .gridArea .gridAreaTxt {
    height: 30%;
  }
  .gridArea ul li img {
    width: 100%;
  }
  .gridArea ul li img {
    vertical-align: middle;
  }
  .gridArea ul li a {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  #contentArea3 {
    padding: 0;
  }
  .gridArea ul {
    width: 100%;
  }
  .gridArea ul li {
    width: 90%;
    margin-bottom: 20px;
    margin-right: 0;
  }
  #contentArea3 .contentArea3-inner .gridArea .gridAreaTxt {
    padding: 5%;
    width: 90%;
    height: auto;
  }
}

/*contentArea4*/
#contentArea4 {
  padding: 60px 0;
}
#contentArea4 .contentArea4-inner {
  width: 1280px;
  margin: 0 auto;
}
#contentArea4 .contentArea4-inner h2 {
  background: url(../images/contentsArea4-ttl-bk.png) no-repeat center center;
  background-size: 450px;
  padding: 30px 0;
  font-size: 28px;
  color: #FFF;
  text-align: center;
}
#contentArea4 .contentArea4-inner .contentArea4-img {
  display: table-cell;
  vertical-align: middle;
}
#contentArea4 .contentArea4-inner .contentArea4-img img {
  width: 646px;
}
#contentArea4 .contentArea4-inner .contentArea4-txt {
  display: table-cell;
  vertical-align: middle;
  padding-left: 30px;
}
#contentArea4 .contentArea4-inner .contentArea4-txt h3 {
  font-size: 28px;
  line-height: 1.4;
}
#contentArea4 .contentArea4-inner .contentArea4-txt i {
  font-style: normal;
  font-size: 22px;
}
#contentArea4 .contentArea4-inner .contentArea4-txt p.aboutTxt {
  margin-top: 20px;
  line-height: 2;
}
.subActionBtn a {
  display: block;
  text-align: center;
  padding: 15px 0;
  border: 1px solid #CCC;
  color: #260a00;
  margin-top: 60px;
}
@media screen and (max-width: 1280px) {
  #contentArea4 {
    padding-top: 0;
  }
  #contentArea4 .contentArea4-inner {
    width: 100%;
  }
  #contentArea4 .contentArea4-inner h2 {
    background-image: none;
    background-color: #db586f;
    height: auto;
    padding: 20px 0;
  }
  #contentArea4 .contentArea4-inner .contentArea4-img {
    display: block;
    text-align: center;
  }
  #contentArea4 .contentArea4-inner .contentArea4-img img {
    width: 90%;
    margin: 0 auto;
  }
  #contentArea4 .contentArea4-inner .contentArea4-txt {
    display: block;
    text-align: center;
    padding-top: 20px;
    padding-left: 0;
    width: 90%;
    margin: 0 auto;
  }
  #contentArea4 .contentArea4-inner .contentArea4-txt p.aboutTxt {
    margin: 20px 0;
  }
  .subActionBtn a {
    padding: 15px 10px;
    margin-top: 0;
  }
}

/*footer*/
footer {
  background: #260a00;
}
footer #footerContent {
  width: 1280px;
  margin: 0 auto;
}
footer #footerContentLeft {
  float: left;
  width: 50%;
  color: #fff;
  font-size: 60%;
}
#footerContentLeft img {
    display: block;
    float: left;
    margin: 1.5em 1.5em 1em 0;
    max-width: 100px;
    width: 50%;
}
#footerContentLeft p {
    display: block;
    float: left;
    margin: 2em 0 0 0;
    padding: 0;
    width: 50%;
    line-height: 1;
    color: #FFF;
    font-size: 180%;
}
#footerContentRight {
    display: block;
    float: right;
    width: 40%;
    text-align: right;
}
#footerContentRight ul {
}
#footerContentRight ul li {
  display: inline-block;
  padding-right: 10px;
}
#footerContentRight ul li:last-child {
  padding-right: 0;
}
#footerContentRight ul li a {
  display: block;
  margin: 1em 0;
}
#footerContentRight ul li.vistageLinkBtnFooter {
}
#footerContentRight ul li.vistageLinkBtnFooter a {
  padding: 5px 36px 5px 30px;
  border: 1px solid #FFF;
  font-size: 14px;
  color: #FFF;
  background: url(../images/right-arrow.png) no-repeat center left 96%;
  background-size: 6px;
}
#footerContentRight img {
    width: 35px;
    height: 35px;
    vertical-align: middle;
}
@media screen and (max-width: 1280px) {
  footer #footerContent {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;
  }
  footer #footerContentLeft,
  #footerContentRight {
    float: none;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  #footerContentLeft img,
  #footerContentLeft p {
    float: none;
    text-align: center;
    margin: 0 auto;
  }
  #footerContentLeft img {
    padding: 0 0 15px 0;
  }
  #footerContentLeft p {
    padding-bottom: 10px;
  }
}

/*pageTop*/
#pageTop {
  background: #0ba095 url(../images/top-arrow.png) no-repeat center center;
  background-size: 30px;
  position: fixed;
  right: 0;
  bottom: 64px;
  width: 50px;
  height: 50px;
  text-indent: -9999px;
  z-index: 9999;
}
#pageTop a {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  #pageTop {
    display: none;
  }
}

/*fadein*/
/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
}
/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

/*星*/
.starArea {
  z-index: 1;
}
.star001 {
  position: absolute;
  width: 30%;
  bottom: -20%;
  left: 8%;
}
.star002 {
  position: absolute;
  width: 22%;
  top: 0;
  right: 30%;
}
.star003 {
  position: absolute;
  width: 20%;
  top: 0;
  left: 10%;
}
.star004 {
  position: absolute;
  width: 7%;
  bottom: 11%;
  right: 50%;
}
.star005 {
  position: absolute;
  width: 37%;
  top: 22%;
  left: 11%;
}
.star006 {
  position: absolute;
  width: 18%;
  bottom: 8%;
  right: 20%;
}
@media screen and (max-width: 768px) {
  .star001, .star002, .star003, .star004, .star005, .star006 {
    display: none;
  }
}

/*点滅*/
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
.blinking-2{
	-webkit-animation:blink 3s ease-in-out infinite alternate;
    -moz-animation:blink 3s ease-in-out infinite alternate;
    animation:blink 3s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:1;}
    100% {opacity:0;}
}
@-moz-keyframes blink{
    0% {opacity:1;}
    100% {opacity:0;}
}
@keyframes blink{
    0% {opacity:1;}
    100% {opacity:0;}
}

/*動物*/
.usagiImg {
  position: absolute;
  bottom: 10%;
  width: 65px;
  left: 17%;
}
.nekoImg {
  position: absolute;
  bottom: 30%;
  width: 70px;
  left: 29%;
}
.kumaImg {
  position: absolute;
  width: 60px;
  right: 40%;
  top: 24%;
}
.toriImg {
  position: absolute;
  width: 180px;
  top: 7%;
  right: 26%;
}
.raionImg {
  position: absolute;
  width: 80px;
  bottom: 20%;
  right: 13%;
}
@media screen and (max-width: 768px) {
  .usagiImg, .nekoImg, .kumaImg, .toriImg, .raionImg {
    display: none;
  }
}

p.changeFont1 a {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
}