@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  line-height: 1;
}

main,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

img {
  vertical-align: top;
  font-size: 0;
  line-height: 0;
}

body {
  font-size: 100%;
}

@media screen and (min-width: 800px) {
  .sp {
    display: none !important;
  }
}

@media screen and (max-width: 800px) {
  .pc {
    display: none !important;
  }
}

.tar {
  text-align: right !important;
}

@media screen and (max-width: 800px) {
  .tar_sp {
    text-align: right !important;
  }
}

.center {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media screen and (max-width: 800px) {
  .center_sp {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.tal {
  text-align: left !important;
}

@media screen and (max-width: 800px) {
  .tal_sp {
    text-align: left !important;
  }
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.fl_sp {
  float: left;
}

@media screen and (max-width: 800px) {
  .fl_sp {
    float: none;
  }
}

.fr_sp {
  float: right;
}

@media screen and (max-width: 800px) {
  .fr_sp {
    float: none;
  }
}

.clear {
  clear: both;
  *zoom: 1;
}

.clear:before,
.clear:after {
  content: '';
  display: table;
}

.clear:after {
  clear: both;
}

.cf {
  *zoom: 1;
}

.cf:before,
.cf:after {
  content: '';
  display: table;
}

.cf:after {
  clear: both;
}

.mb0 {
  margin-bottom: 0px !important;
}

.mb1 {
  margin-bottom: 10px !important;
}

.mb2 {
  margin-bottom: 20px !important;
}

.mb3 {
  margin-bottom: 30px !important;
}

.mb4 {
  margin-bottom: 40px !important;
}

.mb5 {
  margin-bottom: 50px !important;
}

.mb6 {
  margin-bottom: 60px !important;
}

.mb7 {
  margin-bottom: 70px !important;
}

.mb8 {
  margin-bottom: 80px !important;
}

.mb9 {
  margin-bottom: 90px !important;
}

.mb10 {
  margin-bottom: 100px !important;
}

.mb11 {
  margin-bottom: 110px !important;
}

.mb12 {
  margin-bottom: 120px !important;
}

.mb13 {
  margin-bottom: 130px !important;
}

.mb14 {
  margin-bottom: 140px !important;
}

.mb15 {
  margin-bottom: 150px !important;
}

.mb16 {
  margin-bottom: 160px !important;
}

.mb17 {
  margin-bottom: 170px !important;
}

.mb18 {
  margin-bottom: 180px !important;
}

.mb19 {
  margin-bottom: 190px !important;
}

.mb20 {
  margin-bottom: 200px !important;
}

@media screen and (max-width: 800px) {
  .mb0_sp {
    margin-bottom: 0px !important;
  }
}

@media screen and (max-width: 800px) {
  .mb1_sp {
    margin-bottom: 10px !important;
  }
}

@media screen and (max-width: 800px) {
  .mb2_sp {
    margin-bottom: 20px !important;
  }
}

@media screen and (max-width: 800px) {
  .mb3_sp {
    margin-bottom: 30px !important;
  }
}

@media screen and (max-width: 800px) {
  .mb4_sp {
    margin-bottom: 40px !important;
  }
}

@media screen and (max-width: 800px) {
  .mb5_sp {
    margin-bottom: 50px !important;
  }
}

@media screen and (max-width: 800px) {
  .mb6_sp {
    margin-bottom: 60px !important;
  }
}

@media screen and (max-width: 800px) {
  .mb7_sp {
    margin-bottom: 70px !important;
  }
}

@media screen and (max-width: 800px) {
  .mb8_sp {
    margin-bottom: 80px !important;
  }
}

@media screen and (max-width: 800px) {
  .mb9_sp {
    margin-bottom: 90px !important;
  }
}

@media screen and (max-width: 800px) {
  .mb10_sp {
    margin-bottom: 100px !important;
  }
}

.mt0 {
  margin-top: 0px !important;
}

.mt1 {
  margin-top: 10px !important;
}

.mt2 {
  margin-top: 20px !important;
}

.mt3 {
  margin-top: 30px !important;
}

.mt4 {
  margin-top: 40px !important;
}

.mt5 {
  margin-top: 50px !important;
}

.mt6 {
  margin-top: 60px !important;
}

.mt7 {
  margin-top: 70px !important;
}

.mt8 {
  margin-top: 80px !important;
}

.mt9 {
  margin-top: 90px !important;
}

.mt10 {
  margin-top: 100px !important;
}

@media screen and (max-width: 800px) {
  .mt0_sp {
    margin-top: 0px !important;
  }
}

@media screen and (max-width: 800px) {
  .mt1_sp {
    margin-top: 10px !important;
  }
}

@media screen and (max-width: 800px) {
  .mt2_sp {
    margin-top: 20px !important;
  }
}

@media screen and (max-width: 800px) {
  .mt3_sp {
    margin-top: 30px !important;
  }
}

@media screen and (max-width: 800px) {
  .mt4_sp {
    margin-top: 40px !important;
  }
}

@media screen and (max-width: 800px) {
  .mt5_sp {
    margin-top: 50px !important;
  }
}

@media screen and (max-width: 800px) {
  .mt6_sp {
    margin-top: 60px !important;
  }
}

@media screen and (max-width: 800px) {
  .mt7_sp {
    margin-top: 70px !important;
  }
}

@media screen and (max-width: 800px) {
  .mt8_sp {
    margin-top: 80px !important;
  }
}

@media screen and (max-width: 800px) {
  .mt9_sp {
    margin-top: 90px !important;
  }
}

@media screen and (max-width: 800px) {
  .mt10_sp {
    margin-top: 100px !important;
  }
}

.mr0 {
  margin-right: 0px !important;
}

.mr1 {
  margin-right: 10px !important;
}

.mr2 {
  margin-right: 20px !important;
}

.mr3 {
  margin-right: 30px !important;
}

.mr4 {
  margin-right: 40px !important;
}

.mr5 {
  margin-right: 50px !important;
}

.mr6 {
  margin-right: 60px !important;
}

.mr7 {
  margin-right: 70px !important;
}

.mr8 {
  margin-right: 80px !important;
}

.mr9 {
  margin-right: 90px !important;
}

.mr10 {
  margin-right: 100px !important;
}

@media screen and (max-width: 800px) {
  .mr0_sp {
    margin-right: 0px !important;
  }
}

@media screen and (max-width: 800px) {
  .mr1_sp {
    margin-right: 10px !important;
  }
}

@media screen and (max-width: 800px) {
  .mr2_sp {
    margin-right: 20px !important;
  }
}

@media screen and (max-width: 800px) {
  .mr3_sp {
    margin-right: 30px !important;
  }
}

@media screen and (max-width: 800px) {
  .mr4_sp {
    margin-right: 40px !important;
  }
}

@media screen and (max-width: 800px) {
  .mr5_sp {
    margin-right: 50px !important;
  }
}

@media screen and (max-width: 800px) {
  .mr6_sp {
    margin-right: 60px !important;
  }
}

@media screen and (max-width: 800px) {
  .mr7_sp {
    margin-right: 70px !important;
  }
}

@media screen and (max-width: 800px) {
  .mr8_sp {
    margin-right: 80px !important;
  }
}

@media screen and (max-width: 800px) {
  .mr9_sp {
    margin-right: 90px !important;
  }
}

@media screen and (max-width: 800px) {
  .mr10_sp {
    margin-right: 100px !important;
  }
}

.pt0 {
  padding-top: 0px !important;
}

.pt1 {
  padding-top: 10px !important;
}

.pt2 {
  padding-top: 20px !important;
}

.pt3 {
  padding-top: 30px !important;
}

.pt4 {
  padding-top: 40px !important;
}

.pt5 {
  padding-top: 50px !important;
}

.pt6 {
  padding-top: 60px !important;
}

.pt7 {
  padding-top: 70px !important;
}

.pt8 {
  padding-top: 80px !important;
}

.pt9 {
  padding-top: 90px !important;
}

.pt10 {
  padding-top: 100px !important;
}

@media screen and (max-width: 800px) {
  .pt0_sp {
    padding-top: 0px !important;
  }
}

@media screen and (max-width: 800px) {
  .pt1_sp {
    padding-top: 10px !important;
  }
}

@media screen and (max-width: 800px) {
  .pt2_sp {
    padding-top: 20px !important;
  }
}

@media screen and (max-width: 800px) {
  .pt3_sp {
    padding-top: 30px !important;
  }
}

@media screen and (max-width: 800px) {
  .pt4_sp {
    padding-top: 40px !important;
  }
}

@media screen and (max-width: 800px) {
  .pt5_sp {
    padding-top: 50px !important;
  }
}

@media screen and (max-width: 800px) {
  .pt6_sp {
    padding-top: 60px !important;
  }
}

@media screen and (max-width: 800px) {
  .pt7_sp {
    padding-top: 70px !important;
  }
}

@media screen and (max-width: 800px) {
  .pt8_sp {
    padding-top: 80px !important;
  }
}

@media screen and (max-width: 800px) {
  .pt9_sp {
    padding-top: 90px !important;
  }
}

@media screen and (max-width: 800px) {
  .pt10_sp {
    padding-top: 100px !important;
  }
}

.pb0 {
  padding-bottom: 0px !important;
}

.pb1 {
  padding-bottom: 10px !important;
}

.pb2 {
  padding-bottom: 20px !important;
}

.pb3 {
  padding-bottom: 30px !important;
}

.pb4 {
  padding-bottom: 40px !important;
}

.pb5 {
  padding-bottom: 50px !important;
}

.pb6 {
  padding-bottom: 60px !important;
}

.pb7 {
  padding-bottom: 70px !important;
}

.pb8 {
  padding-bottom: 80px !important;
}

.pb9 {
  padding-bottom: 90px !important;
}

.pb10 {
  padding-bottom: 100px !important;
}

@media screen and (max-width: 800px) {
  .pb0_sp {
    padding-bottom: 0px !important;
  }
}

@media screen and (max-width: 800px) {
  .pb1_sp {
    padding-bottom: 10px !important;
  }
}

@media screen and (max-width: 800px) {
  .pb2_sp {
    padding-bottom: 20px !important;
  }
}

@media screen and (max-width: 800px) {
  .pb3_sp {
    padding-bottom: 30px !important;
  }
}

@media screen and (max-width: 800px) {
  .pb4_sp {
    padding-bottom: 40px !important;
  }
}

@media screen and (max-width: 800px) {
  .pb5_sp {
    padding-bottom: 50px !important;
  }
}

@media screen and (max-width: 800px) {
  .pb6_sp {
    padding-bottom: 60px !important;
  }
}

@media screen and (max-width: 800px) {
  .pb7_sp {
    padding-bottom: 70px !important;
  }
}

@media screen and (max-width: 800px) {
  .pb8_sp {
    padding-bottom: 80px !important;
  }
}

@media screen and (max-width: 800px) {
  .pb9_sp {
    padding-bottom: 90px !important;
  }
}

@media screen and (max-width: 800px) {
  .pb10_sp {
    padding-bottom: 100px !important;
  }
}

.w05 {
  width: 4% !important;
}

@media screen and (max-width: 800px) {
  .w05 {
    width: 100% !important;
  }
}

.w10 {
  width: 9% !important;
}

@media screen and (max-width: 800px) {
  .w10 {
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {
  .w10_sp {
    width: 9% !important;
  }
}

.w15 {
  width: 14% !important;
}

@media screen and (max-width: 800px) {
  .w15 {
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {
  .w15_sp {
    width: 14% !important;
  }
}

.w20 {
  width: 19% !important;
}

@media screen and (max-width: 800px) {
  .w20 {
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {
  .w20_sp {
    width: 19% !important;
  }
}

.w25 {
  width: 24% !important;
}

@media screen and (max-width: 800px) {
  .w25 {
    width: 100% !important;
  }
}

.w30 {
  width: 29% !important;
}

@media screen and (max-width: 800px) {
  .w30 {
    width: 100% !important;
  }
}

.w33 {
  width: 32% !important;
}

@media screen and (max-width: 800px) {
  .w33 {
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {
  .w33_sp {
    width: 32% !important;
  }
}

.w35 {
  width: 34% !important;
}

@media screen and (max-width: 800px) {
  .w35 {
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {
  .w35_sp {
    width: 34% !important;
  }
}

.w40 {
  width: 39% !important;
}

@media screen and (max-width: 800px) {
  .w40 {
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {
  .w40_sp {
    width: 39% !important;
  }
}

@media screen and (max-width: 800px) {
  .w30_sp {
    width: 29% !important;
  }
}

.w45 {
  width: 44% !important;
}

@media screen and (max-width: 800px) {
  .w45 {
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {
  .w45_sp {
    width: 44% !important;
  }
}

.w49 {
  width: 48% !important;
}

@media screen and (max-width: 800px) {
  .w49 {
    width: 100% !important;
  }
}

.w50 {
  width: 49% !important;
}

@media screen and (max-width: 800px) {
  .w50 {
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {
  .w50_sp {
    width: 49% !important;
  }
}

.w53 {
  width: 52% !important;
}

@media screen and (max-width: 800px) {
  .w53 {
    width: 100% !important;
  }
}

.w55 {
  width: 54% !important;
}

@media screen and (max-width: 800px) {
  .w55 {
    width: 100% !important;
  }
}

.w60 {
  width: 59% !important;
}

@media screen and (max-width: 800px) {
  .w60 {
    width: 100% !important;
  }
}

.w65 {
  width: 64% !important;
}

@media screen and (max-width: 800px) {
  .w65 {
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {
  .w60_sp {
    width: 59% !important;
  }
}

@media screen and (max-width: 800px) {
  .w65_sp {
    width: 64% !important;
  }
}

.w70 {
  width: 69% !important;
}

@media screen and (max-width: 800px) {
  .w70 {
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {
  .w70_sp {
    width: 69% !important;
  }
}

.w75 {
  width: 74% !important;
}

@media screen and (max-width: 800px) {
  .w75 {
    width: 100% !important;
  }
}

.w80 {
  width: 79% !important;
}

@media screen and (max-width: 800px) {
  .w80 {
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {
  .w80_sp {
    width: 79% !important;
  }
}

.w83 {
  width: 82% !important;
}

@media screen and (max-width: 800px) {
  .w83 {
    width: 100% !important;
  }
}

.w85 {
  width: 84% !important;
}

@media screen and (max-width: 800px) {
  .w85 {
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {
  .w85_sp {
    width: 84% !important;
  }
}

.w88 {
  width: 88% !important;
}

@media screen and (max-width: 800px) {
  .w88 {
    width: 100% !important;
  }
}

.w90 {
  width: 89% !important;
}

@media screen and (max-width: 800px) {
  .w90 {
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {
  .w90_sp {
    width: 89% !important;
  }
}

.w95 {
  width: 94% !important;
}

@media screen and (max-width: 800px) {
  .w95 {
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {
  .w95_sp {
    width: 94% !important;
  }
}

@media screen and (max-width: 800px) {
  .w25_sp {
    width: 24% !important;
  }
}

.w75 {
  width: 74% !important;
}

@media screen and (max-width: 800px) {
  .w75 {
    width: 100% !important;
  }
}

@media screen and (max-width: 800px) {
  .w75_sp {
    width: 74% !important;
  }
}

img.w100 {
  width: 100% !important;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex img {
  max-width: 100%;
}

@media screen and (max-width: 800px) {
  .flex {
    display: block;
  }
}

@media screen and (max-width: 800px) {
  .sp-flex,
  .flex_sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

.between {
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
}

.a-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.bold {
  font-weight: bold;
}

@media screen and (max-width: 800px) {
  img {
    max-width: 100%;
  }
}

a {
  outline: none;
}

a:focus {
  outline: none;
}

a.fade:hover {
  opacity: 0.7;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

a.scale img {
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

a.scale:hover img {
  -webkit-transition: 0.4s;
  transition: 0.4s;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.eng {
  font-family: 'Trajan Pro 3', 'Adobe Garamond Pro', 'Times New Roman';
  font-weight: normal;
}

.red {
  color: #d31c1c;
}

.st {
  font-size: 150%;
}

.fs16 {
  font-size: 1.5rem !important;
}

/*.expand{
    @media screen and (max-width:800px) {
        background: url(../imgs/common/expand@2x.png) no-repeat center top;
        padding-top: 57px;
        background-size: 262px 47px;
    }
}*/
.m-slideIn {
  opacity: 0;
  -webkit-transform: translate3d(-50px, 0, 0);
  transform: translate3d(-50px, 0, 0);
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}

.m-slideIn.inview {
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.m-slideIn-left {
  -webkit-transform: translate3d(-50px, 0, 0);
  transform: translate3d(-50px, 0, 0);
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.m-slideIn-left.inview {
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.m-slideIn-right {
  opacity: 0;
  -webkit-transform: translate3d(50px, 0, 0);
  transform: translate3d(50px, 0, 0);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.m-slideIn-right.inview {
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.m-slideUp {
  opacity: 0;
  -webkit-transform: translate3d(0, 40px, 0);
  transform: translate3d(0, 40px, 0);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.m-slideUp.inview {
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.m-slideUp02 {
  opacity: 0;
}

.m-slideUp02.inview {
  -webkit-animation: opUp 0.4s ease-in-out 0.2s forwards;
  animation: opUp 0.4s ease-in-out 0.2s forwards;
}

.m-slideUp03 {
  opacity: 0;
}

.m-slideUp03.inview {
  -webkit-animation: opUp 0.4s ease-in-out 0.4s forwards;
  animation: opUp 0.4s ease-in-out 0.4s forwards;
}

.m-slideUp04 {
  opacity: 0;
}

.m-slideUp04.inview {
  -webkit-animation: opUp 0.4s ease-in-out 0.6s forwards;
  animation: opUp 0.4s ease-in-out 0.6s forwards;
}

.m-slideUp05 {
  opacity: 0;
}

.m-slideUp05.inview {
  -webkit-animation: opUp 0.4s ease-in-out 0.8s forwards;
  animation: opUp 0.4s ease-in-out 0.8s forwards;
}

.m-slideUp06 {
  opacity: 0;
}

.m-slideUp06.inview {
  -webkit-animation: opUp 0.4s ease-in-out 1s forwards;
  animation: opUp 0.4s ease-in-out 1s forwards;
}

.m-slideUp07 {
  opacity: 0;
}

.m-slideUp07.inview {
  -webkit-animation: opUp 0.4s ease-in-out 1.2s forwards;
  animation: opUp 0.4s ease-in-out 1.2s forwards;
}

.m-fadeIn {
  opacity: 0;
}

.m-fadeIn.inview {
  -webkit-animation: fadeIn 0.4s ease-in-out 0.2s forwards;
  animation: fadeIn 0.4s ease-in-out 0.2s forwards;
}

.m-fadeIn02 {
  opacity: 0;
}

.m-fadeIn02.inview {
  -webkit-animation: fadeIn 0.8s ease-in-out 0.5s forwards;
  animation: fadeIn 0.8s ease-in-out 0.5s forwards;
}

.m-fadeIn03 {
  opacity: 0;
}

.m-fadeIn03.inview {
  -webkit-animation: fadeIn 1s ease-in-out 0.8s forwards;
  animation: fadeIn 1s ease-in-out 0.8s forwards;
}

.m-fadeIn04 {
  opacity: 0;
}

.m-fadeIn04.inview {
  -webkit-animation: fadeIn 0.4s ease-in-out 4.4s forwards;
  animation: fadeIn 0.4s ease-in-out 4.4s forwards;
}

.m-fadeIn05 {
  opacity: 0;
}

.m-fadeIn05.inview {
  -webkit-animation: fadeIn 0.8s ease-in-out 5.2s forwards;
  animation: fadeIn 0.8s ease-in-out 5.2s forwards;
}

.m-fadeIn06 {
  opacity: 0;
}

.m-fadeIn06.inview {
  -webkit-animation: fadeIn 1s ease-in-out 5.5s forwards;
  animation: fadeIn 1s ease-in-out 5.5s forwards;
}

.m-fadeIn07 {
  opacity: 0;
}

.m-fadeIn07.inview {
  -webkit-animation: fadeIn 1s ease-in-out 5.8s forwards;
  animation: fadeIn 1s ease-in-out 5.8s forwards;
}

@-webkit-keyframes opUp {
  0% {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes opUp {
  0% {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Times New Roman', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho',
    'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HiraMinProN-W3', 'HGS明朝E',
    'ＭＳ Ｐ明朝', 'MS PMincho', serif;
}

p {
  font-size: 1.5rem;
  line-height: 1.6;
}

@media only screen and (max-width: 800px) {
  p {
    font-size: 1.3rem;
    line-height: 1.5;
  }
}

span.anchorlink {
  position: relative;
  top: -80px;
  display: block;
}

@media only screen and (max-width: 800px) {
  span.anchorlink {
    top: -30px;
  }
}

sup {
  font-size: 10px;
  vertical-align: super;
}

.wrap {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 1000px) {
  .wrap {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media only screen and (max-width: 800px) {
  .page {
    font-size: 12px;
  }
}

a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  color: #fff;
  text-decoration: none;
}

/* img */
img {
  vertical-align: bottom;
  max-width: 100%;
}

@media only screen and (max-width: 1000px) {
  img {
    max-width: 100%;
    height: auto;
  }
}

#container {
  padding-top: 86px;
}

@media only screen and (max-width: 800px) {
  #container {
    padding: 0;
  }
}

.header {
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  background: #fff;
  border-bottom: 6px solid #6e9db8;
}

@media only screen and (max-width: 800px) {
  .header {
    border: none;
    bottom: 0;
    top: auto;
  }
}

.headerInner {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.hdrLogo {
  padding: 18px 0 18px 20px;
  margin-right: auto;
}

.navInner {
  padding-right: 15px;
}

@media only screen and (max-width: 1200px) {
  .navInner {
    padding-right: 5px;
  }
}

@media only screen and (max-width: 800px) {
  .navInner {
    padding: 0;
  }
}

.navInner a {
  color: #000;
}

@media only screen and (max-width: 800px) {
  #pNav {
    display: none;
  }
}

#pNav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 15px 10px 13px 0;
}

#pNav ul li {
  margin-left: 25px;
}

#pNav ul a {
  position: relative;
  padding-left: 11px;
  font-size: 1.2rem;
  display: block;
}

#pNav ul a:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  border-left: 6px solid #000;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#pNav ul a:after {
  content: '';
  width: 0;
  height: 1px;
  background: #222;
  position: absolute;
  left: 0;
  right: auto;
  bottom: -4px;
  margin: auto;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

@media only screen and (max-width: 800px) {
  #pNav ul a:after {
    bottom: 0px;
  }
}

#pNav ul a:hover:after {
  width: 100%;
}

@media only screen and (max-width: 800px) {
  #gNav {
    display: none;
    position: fixed;
    top: 0;
    background: #fff;
    z-index: 999;
  }
}

#gNav h1 a {
  padding: 12px 10px 0 12px;
}

#gNav h1 a img {
  width: 120px;
}

#gNav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#gNav li {
  flex-shrink: 0;
}

@media only screen and (max-width: 800px) {
  #gNav li {
    width: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

#gNav li.on a {
  color: #2172a0;
}

#gNav li.on a:after {
  width: 100%;
}

#gNav .new a:before {
  color: #fff;
  content: 'NEW';
  text-align: center;
  font-size: 10px;
  line-height: 12px;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  top: -10px;
  width: 40px;
  background: #c30d23;
}
@media only screen and (max-width: 800px) {
  #gNav .new a:before {
    top: 0;
  }
}

#gNav a {
  font-size: 1.45rem;
  padding: 5px;
  display: block;
  position: relative;
}

#gNav a:hover {
  color: #2172a0;
}

@media only screen and (max-width: 1270px) {
  #gNav a {
    font-size: 1.2rem;
    padding: 2px;
  }
}

@media only screen and (max-width: 800px) {
  #gNav a {
    font-size: 1.3rem;
    padding: 25px 5px 25px;
  }
}

#gNav a:after {
  content: '';
  width: 0;
  height: 3px;
  background: #6e9db8;
  position: absolute;
  left: 0;
  right: auto;
  bottom: -3px;
  margin: auto;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

@media only screen and (max-width: 800px) {
  #gNav a:after {
    bottom: 0px;
  }
}

#gNav a:hover:after {
  width: 100%;
}

#nav-toggle {
  position: fixed;
  top: 0;
  right: 0px;
  padding: 8px 5px 5px;
  cursor: pointer;
  z-index: 1000;
  height: 50px;
  background: rgba(0, 0, 0, 0.6);
}

#nav-toggle > div {
  position: relative;
  width: 30px;
}

#nav-toggle span {
  width: 100%;
  height: 2px;
  left: 0;
  display: block;
  background: #fff;
  position: absolute;
  -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-in-out;
  transition: top 0.3s ease, -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, top 0.3s ease;
  transition: transform 0.3s ease-in-out, top 0.3s ease,
    -webkit-transform 0.3s ease-in-out;
}

#nav-toggle span:nth-child(1) {
  top: 0;
}

#nav-toggle span:nth-child(2) {
  top: 9px;
}

#nav-toggle span:nth-child(3) {
  top: 18px;
  width: 60%;
}

#nav-toggle p {
  top: 26px;
  text-align: center;
  font-size: 0.85rem;
  position: absolute;
  color: #fff;
}

#nav-toggle:hover span:nth-child(1) {
  top: 0px;
}

#nav-toggle:hover span:nth-child(3) {
  top: 18px;
}

@media screen and (max-width: 800px) {
  #nav-toggle {
    display: block;
  }
}

#nav-toggle.open {
  opacity: 0;
  -webkit-transition: 0.15s;
  transition: 0.15s;
}

@media screen and (max-width: 800px) {
  #nav-toggle.open {
    opacity: 1;
  }
}

#nav-toggle.open span:nth-child(1) {
  top: 11px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-toggle.open span:nth-child(2) {
  top: 11px;
  width: 0;
  left: 50%;
}

#nav-toggle.open span:nth-child(3) {
  top: 11px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 100%;
}

@media only screen and (max-width: 800px) {
  .btnArea {
    bottom: 0;
    top: auto;
    width: 100%;
  }
}

.btnArea ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.btnArea .outline,
.btnArea .map,
.btnArea .plan {
  width: 130px;
  height: 80px;
}

@media only screen and (max-width: 800px) {
  .btnArea .outline,
  .btnArea .map,
  .btnArea .plan {
    width: 25%;
    height: 50px;
  }
}

.btnArea .outline a,
.btnArea .map a,
.btnArea .plan a {
  color: #4f809c;
  background: #fff;
  font-size: 1.6rem;
  display: block;
  text-align: center;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid #6e9db8;
  border-right: none;
  border-top: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.btnArea .outline a:hover,
.btnArea .map a:hover,
.btnArea .plan a:hover {
  color: #fff;
  background: #6e9db8;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.btnArea .inq {
  width: 130px;
  height: 80px;
}

@media only screen and (max-width: 800px) {
  .btnArea .inq {
    width: 33.33333%;
    height: 50px;
  }
}

.btnArea .reserve a {
  color: #fff;
  background: #b86e6e;
  font-size: 1.6rem;
  display: block;
  text-align: center;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.btnArea .reserve a:hover {
  color: #b86e6e;
  background: #fff;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-left: 1px solid #b86e6e;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #b86e6e;
  border-top: none;
}

.btnArea .inq a {
  color: #fff;
  background: #ad9d71;
  font-size: 1.6rem;
  display: block;
  text-align: center;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.btnArea .inq a:hover {
  color: #ad9d71;
  background: #fff;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-left: 1px solid #ad9d71;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ad9d71;
  border-top: none;
}

.btnArea .mem,
.btnArea .tel {
  width: 130px;
  height: 80px;
}

@media only screen and (max-width: 800px) {
  .btnArea .mem,
  .btnArea .tel {
    width: 33.33333%;
    height: 50px;
  }
}

.btnArea .mem a,
.btnArea .tel a {
  color: #fff;
  background: #6e9db8;
  font-size: 1.6rem;
  display: block;
  text-align: center;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.btnArea .mem a:hover,
.btnArea .tel a:hover {
  color: #6e9db8;
  background: #fff;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-left: 1px solid #6e9db8;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #6e9db8;
  border-top: none;
}

.btnArea li a {
  line-height: 1.3;
}

@media only screen and (max-width: 1200px) {
  .btnArea li a {
    font-size: 1rem !important;
  }
  .header.pattern02 .btnArea li {
    width: 75px !important;
  }
}

.header.pattern02 .btnArea li {
  width: 100px;
}

.header.pattern02 .btnArea a {
  font-size: 1.25rem;
}

@media only screen and (max-width: 800px) {
  .header.pattern02 .btnArea li {
    width: calc(100% / 3) !important;
  }
}

.pageCap {
  padding: 60px 0;
  font-size: 1.1rem;
  line-height: 1.4;
  color: #ccc;
}

@media only screen and (max-width: 800px) {
  .pageCap {
    padding: 30px 3%;
  }
}

.contact {
  padding: 60px 0 55px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
  background: -webkit-linear-gradient(
    110deg,
    #333333 0%,
    #333333 50%,
    #447590 50.1%,
    #447590 100%
  );
  background: linear-gradient(
    -20deg,
    #333333 0%,
    #333333 50%,
    #447590 50.1%,
    #447590 100%
  );
  color: #fff;
}

@media only screen and (max-width: 800px) {
  .contact {
    padding: 20px 0 20px;
    margin-bottom: 20px;
  }
}

.contact .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: 680px;
  margin: 0 auto;
}

@media only screen and (max-width: 800px) {
  .contact .wrap {
    display: block;
    text-align: center;
  }
  .contact .wrap p {
    margin-bottom: 15px;
  }
  .contact .wrap p.tel {
    margin-bottom: 20px;
  }
}

.contact .txt01 {
  line-height: 1.6;
  font-size: 1.7rem;
  text-align: center;
  padding: 0 5%;
  margin-bottom: 30px;
}

@media only screen and (max-width: 800px) {
  .contact .txt01 {
    margin-bottom: 15px;
    font-size: 1.45rem;
  }
}

.contact .txt02 {
  line-height: 1.5;
  font-size: 1.1rem;
}

.contact .txt03 {
  line-height: 1.6;
  font-size: 1.7rem;
  text-align: center;
  padding: 0 3%;
  margin-top: 10px;
}

@media only screen and (max-width: 800px) {
  .contact .txt03 {
    margin-top: 10px;
    font-size: 1.25rem;
  }
}

.seller {
  padding: 0px 0 30px;
}

@media only screen and (max-width: 800px) {
  .seller {
    display: block;
    text-align: center;
    padding: 0 3% 10px;
  }
}

.seller ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: 960px;
  margin: 10px auto 15px;
}

@media only screen and (max-width: 800px) {
  .seller ul {
    display: block;
    margin-bottom: 20px;
    text-align: left;
  }
  .seller ul li {
    margin-bottom: 20px;
  }
  .seller ul li.hasekoF {
    margin-left: 31px;
  }
  .seller ul li.haseko {
    margin-left: 34px;
  }
}

.seller ul a:hover {
  opacity: 0.6;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.seller .f_bnr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: 630px;
  margin: 0 auto 0px;
}

@media only screen and (max-width: 800px) {
  .seller .f_bnr {
    display: block;
    text-align: center;
  }
  .seller .f_bnr li {
    margin-bottom: 10px;
  }
  .seller .f_bnr li img {
    width: auto;
    max-width: 100%;
  }
}

.footer .social {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 30px;
}

.footer .social a {
  color: #000;
  text-decoration: underline;
}

.copyright {
  background: #333;
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
  padding: 15px 0;
}

@media only screen and (max-width: 800px) {
  .copyright {
    padding-bottom: 65px;
  }
}

.wrap.wide {
  max-width: 1200px;
}

.insta {
  text-align: center;
  background: #fff;
  max-width: 210px;
  margin: 0 auto;
  padding: 15px;
  border-radius: 10px;
}

.insta a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1.7rem;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #000;
}

.insta a:hover {
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.insta a p {
  margin-left: 5px;
  text-decoration: underline;
}

#pagetop a {
  position: fixed;
  right: 20px;
  bottom: 30px;
  z-index: 10001;
  background: url(../img/totop.png);
  text-indent: -9999px;
  width: 40px;
  height: 40px;
  display: block;
  background-size: cover;
}

@media only screen and (max-width: 800px) {
  #pagetop a {
    right: 10px;
    bottom: 50px;
  }
}

#pagetop a:hover {
  opacity: 0.6;
}

.h2Area2 {
  background: #6e9db8;
  background-size: cover;
  height: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 60px;
  z-index: 100;
  position: relative;
  border-top: 1px solid #fff;
}

@media only screen and (max-width: 800px) {
  .h2Area2 {
    margin-bottom: 15px;
    height: 120px;
  }
}

.h2Area2 h2 {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
}

@media only screen and (max-width: 800px) {
  .h2Area2 h2 {
    font-size: 2.4rem;
    margin-top: 10px;
    letter-spacing: 0;
  }
}

.h2Area2 h2 span {
  display: block;
  color: #acc9d9;
  margin-top: 20px;
}

@media only screen and (max-width: 800px) {
  .h2Area2 h2 span {
    margin-top: 5px;
  }
}

.skew {
  position: relative;
  overflow: hidden;
}

.layer-03 {
  display: block;
  content: '';
  position: absolute;
  top: 400px;
  width: 100%;
  height: 600px;
  left: 0;
  background-color: #333333;
  z-index: 1;
  -webkit-transform: skewY(-19deg) skewX(0deg) translateX(100%);
  transform: skewY(-19deg) skewX(0deg) translateX(100%);
  -webkit-transition: 0.5s all ease-in;
  transition: 0.5s all ease-in;
}

@media only screen and (max-width: 800px) {
  .layer-03 {
    top: 300px;
    height: 600px;
    -webkit-transform: skewY(-19deg) skewX(0deg) translateX(0);
    transform: skewY(-19deg) skewX(0deg) translateX(0);
  }
}

.layer-03.is-active {
  -webkit-transform: skewY(-19deg) skewX(0deg) translateX(0);
  transform: skewY(-19deg) skewX(0deg) translateX(0);
}

a[href^='tel:'] {
  pointer-events: none;
}

@media only screen and (max-width: 800px) {
  a[href^='tel:'] {
    pointer-events: auto;
  }
}

#lp {
  /*
.mainVis{
  position: relative;
  z-index: 99;
  overflow: hidden;
  width: 100%;
  h1{
    position: absolute;
    top:15px;
    left: 20px;
    z-index: 120;
    @media only screen and (max-width:800px) {
      top:10px;
      left: 15px;
      width: 160px;
    }
  }
  h2{
    position: absolute;
    top:110px;
    left: 40px;
    z-index: 120;
    @media only screen and (max-width:800px) {
      bottom:20px;
      top:auto;
      left: 3%;
      z-index: 120;
      max-width: 93%;
    }
  }
  .word01,.word02,.word03,.word04,.word05{
    position: absolute;
    figure{
      //animation: vertical 1s ease-in-out infinite alternate;
      //animation-duration: 1s;
    }
    img{
      //animation: horizontal1 1s ease-in-out infinite alternate;
    }
  }
  .word01{
    bottom:110px;
    left: 80px;
    z-index: 110;
  }
  .word02{
    top:150px;
    right: 50px;
    z-index: 111;
  }
  .word03{
    bottom:120px;
    right: 120px;
    z-index: 112;
  }
  .word04{
    top:300px;
    left: 60px;
    z-index: 113;
  }
  .word05{
    bottom:-10px;
    left: 0px;
    z-index: 114;
    transition: .2s;
    @media only screen and (max-width:1600px) {
      width: 27%;
      transition: .2s;
      img{
        max-width: 100%;
      }
    }
  }
}
*/
}

#lp #container {
}

@media only screen and (max-width: 800px) {
  #lp #container {
    padding-bottom: 0px;
  }
}

#lp main {
  background: #000;
  color: #fff;
}

#lp .layer-lay00 {
  display: block;
  content: '';
  position: absolute;
  top: -44%;
  width: 100%;
  height: 500px;
  opacity: 0.7;
  left: 0;
  background-color: #000;
  z-index: 101;
  -webkit-transform: skewY(-20deg) skewX(0deg) translateX(100%);
  transform: skewY(-20deg) skewX(0deg) translateX(100%);
  -webkit-transition: 0.5s all ease-in;
  transition: 0.5s all ease-in;
}

@media only screen and (max-width: 800px) {
  #lp .layer-lay00 {
    width: 100%;
    top: -450px;
  }
}

#lp .layer-lay00.is-active {
  -webkit-transform: skewY(-20deg) skewX(0deg) translateX(0);
  transform: skewY(-20deg) skewX(0deg) translateX(0);
}

#lp .layer-lay01 {
  display: block;
  content: '';
  position: absolute;
  top: 93%;
  width: 100%;
  height: 550px;
  opacity: 0.8;
  left: 0;
  background-color: #6e9db8;
  z-index: 102;
  -webkit-transform: skewY(25deg) skewX(0deg) translateX(100%);
  transform: skewY(25deg) skewX(0deg) translateX(100%);
  -webkit-transition: 0.5s all ease-in;
  transition: 0.5s all ease-in;
}

@media only screen and (max-width: 800px) {
  #lp .layer-lay01 {
    top: 352px;
    height: 400px;
  }
}

#lp .layer-lay01.is-active {
  -webkit-transform: skewY(25deg) skewX(0deg) translateX(0);
  transform: skewY(25deg) skewX(0deg) translateX(0);
}

#lp .layer-lay02 {
  display: block;
  content: '';
  position: absolute;
  width: 1145px;
  height: 508px;
  top: 80%;
  right: -100%;
  background: url(../img/tri.png) no-repeat;
  z-index: 103;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: 0.65s all ease-in;
  transition: 0.65s all ease-in;
  -webkit-transition: -webkit-transform 0.5s all ease-in;
}

@media only screen and (max-width: 800px) {
  #lp .layer-lay02 {
    top: 20%;
    right: -100%;
    -webkit-transform: translateX(70%);
    transform: translateX(70%);
  }
}

#lp .layer-lay02.is-active {
  top: -5%;
  right: 20%;
  -webkit-transform: translateX(70%);
  transform: translateX(70%);
}

@media only screen and (max-width: 800px) {
  #lp .layer-lay02.is-active {
    top: -20%;
    right: 10%;
    -webkit-transform: translateX(70%);
    transform: translateX(70%);
  }
}

#lp .layer-lay03 {
  display: block;
  content: '';
  position: absolute;
  top: 98.5%;
  width: 100%;
  height: 400px;
  opacity: 0.7;
  left: 100;
  background-color: #000;
  z-index: 2;
  -webkit-transform: skewY(-20deg) skewX(0deg) translateX(100%);
  transform: skewY(-20deg) skewX(0deg) translateX(100%);
  -webkit-transition: 0.5s all ease-in;
  transition: 0.5s all ease-in;
}

@media only screen and (max-width: 800px) {
  #lp .layer-lay03 {
    top: 370px;
    height: 400px;
  }
}

#lp .layer-lay03.is-active {
  -webkit-transform: skewY(-20deg) skewX(0deg) translateX(0);
  transform: skewY(-20deg) skewX(0deg) translateX(0);
}

#lp .layer-03 {
  top: 250px;
  z-index: 0;
  height: 400px;
}

#lp .fixArea {
  background: #000;
  padding: 18px 0;
  text-align: center;
}

#lp .fixArea2 {
  background: #457691;
  padding: 10px 0;
  text-align: center;
}

@media only screen and (max-width: 800px) {
  #lp .fixArea {
    position: static;
    padding: 30px 0 0;
  }
  #lp .fixArea2 {
    position: static;
  }
}

#lp .actionArea {
  text-align: center;
  padding: 68px 0;
  position: relative;
  z-index: 100;
}

#lp .actionArea__inner {
  text-align: center;
  vertical-align: middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media only screen and (max-width: 800px) {
  #lp .actionArea__inner {
    display: block;
  }
}

#lp .actionArea__inner h5 {
  margin-left: -90px;
  margin-right: 75px;
  text-align: right;
}

@media only screen and (max-width: 800px) {
  #lp .actionArea__inner h5 {
    margin-left: 0;
    text-align: center;
    margin-bottom: 20px;
    margin-right: 0;
  }
}

#lp .actionArea__inner figure {
  text-align: left;
}

@media only screen and (max-width: 800px) {
  #lp .actionArea {
    height: auto;
    padding: 30px 0 40px;
  }
}

#lp .actionArea .sns {
  margin: 40px auto 0px;
  padding-left: 75px;
}

@media only screen and (max-width: 800px) {
  #lp .actionArea .sns {
    padding: 0 5%;
  }
}

#lp .info {
  border: 1px solid #fff;
  padding: 25px 20px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  margin-bottom: 45px;
}

@media only screen and (max-width: 800px) {
  #lp .info {
    margin-bottom: 25px;
  }
}

#lp .info h4 {
  font-size: 2rem;
  margin-bottom: 10px;
}

#lp .sec01,
#lp .sec03 {
  position: relative;
  height: 650px;
  overflow: hidden;
}

@media only screen and (max-width: 800px) {
  #lp .sec01,
  #lp .sec03 {
    height: auto;
    padding-bottom: 145%;
  }
}

#lp .sec01__el01,
#lp .sec03__el01 {
  position: absolute;
  top: 0;
  right: 53%;
  z-index: 12;
}

@media only screen and (max-width: 800px) {
  #lp .sec01__el01,
  #lp .sec03__el01 {
    left: 10px;
    right: auto;
    width: 60%;
  }
}

#lp .sec01__el02,
#lp .sec03__el02 {
  position: absolute;
  top: 25px;
  right: 0;
  z-index: 11;
  width: 65%;
}

@media only screen and (max-width: 800px) {
  #lp .sec01__el02,
  #lp .sec03__el02 {
    width: 90%;
    top: 18%;
  }
}

#lp .sec01__el03,
#lp .sec03__el03 {
  position: absolute;
  top: 95px;
  left: 7%;
  border: 2px solid #447590;
  padding: 145px 0px 0;
  width: 900px;
  z-index: 10;
}

#lp .sec01__el03 p,
#lp .sec03__el03 p {
  margin-left: 100px;
  margin-bottom: 50px;
  line-height: 2;
  font-size: 1.9rem;
}

#lp .sec01__el03 figure,
#lp .sec03__el03 figure {
  margin-left: 10px;
}

@media only screen and (max-width: 800px) {
  #lp .sec01__el03,
  #lp .sec03__el03 {
    top: 28%;
    left: 5%;
    padding: 30% 10px 0;
    width: 95%;
  }
  #lp .sec01__el03 p,
  #lp .sec03__el03 p {
    margin-left: 50px;
    margin-bottom: 20px;
    line-height: 2;
    font-size: 1.55rem;
  }
  #lp .sec01__el03 figure,
  #lp .sec03__el03 figure {
    width: 60%;
  }
}

@media only screen and (max-width: 800px) {
  #lp .sec03 {
    padding-bottom: 130%;
  }
}

#lp .sec03__el03 p {
  margin-bottom: 80px;
}

@media only screen and (max-width: 800px) {
  #lp .sec03__el03 p {
    margin-bottom: 20px;
  }
}

#lp .sec02,
#lp .sec04 {
  position: relative;
  height: 600px;
  overflow: hidden;
}

@media only screen and (max-width: 800px) {
  #lp .sec02,
  #lp .sec04 {
    height: auto;
    padding-bottom: 155%;
  }
}

#lp .sec02__el01,
#lp .sec04__el01 {
  position: absolute;
  top: 0;
  left: 53%;
  z-index: 12;
}

@media only screen and (max-width: 800px) {
  #lp .sec02__el01,
  #lp .sec04__el01 {
    right: 10px;
    left: auto;
    width: 60%;
  }
}

#lp .sec02__el02,
#lp .sec04__el02 {
  position: absolute;
  top: 25px;
  left: 0;
  z-index: 11;
  width: 65%;
}

@media only screen and (max-width: 800px) {
  #lp .sec02__el02,
  #lp .sec04__el02 {
    width: 90%;
    top: 18%;
  }
}

#lp .sec02__el03,
#lp .sec04__el03 {
  position: absolute;
  top: 95px;
  right: 7%;
  border: 2px solid #9a9a9a;
  padding: 145px 0px 0;
  width: 900px;
  z-index: 10;
}

#lp .sec02__el03 p,
#lp .sec04__el03 p {
  margin-right: 70px;
  margin-bottom: 80px;
  line-height: 2;
  font-size: 1.9rem;
  float: right;
}

@media only screen and (max-width: 1300px) {
  #lp .sec02__el03 p,
  #lp .sec04__el03 p {
    margin-right: 20px;
  }
}

#lp .sec02__el03 figure,
#lp .sec04__el03 figure {
  margin-right: 10px;
  text-align: right;
  clear: both;
}

@media only screen and (max-width: 800px) {
  #lp .sec02__el03,
  #lp .sec04__el03 {
    top: 28%;
    right: 5%;
    padding: 30% 0px 0 10px;
    width: 95%;
  }
  #lp .sec02__el03 p,
  #lp .sec04__el03 p {
    margin-right: 50px;
    margin-bottom: 20px;
    line-height: 2;
    font-size: 1.55rem;
  }
  #lp .sec02__el03 figure,
  #lp .sec04__el03 figure {
    width: 60%;
  }
}

#lp .sec02__el03,
#lp .sec04__el03 {
  padding-bottom: 120px;
}

@media only screen and (max-width: 800px) {
  #lp .sec02__el03,
  #lp .sec04__el03 {
    padding-bottom: 0;
  }
}

#lp .sec02__el03 p,
#lp .sec04__el03 p {
  margin-bottom: 130px;
  margin-bottom: 20px;
}

#lp .sec02__el03 .accBtn,
#lp .sec04__el03 .accBtn {
  position: absolute;
  bottom: 40px;
  right: 110px;
}

@media only screen and (max-width: 800px) {
  #lp .sec02__el03 .accBtn,
  #lp .sec04__el03 .accBtn {
    position: static;
    margin-bottom: 35px;
    margin-left: 13%;
  }
}

#lp .sec02__el03 a,
#lp .sec04__el03 a {
  position: relative;
  background: #363636;
  width: 210px;
  height: 50px;
  border: 1px solid #eee;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 1.6rem;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#lp .sec02__el03 a img,
#lp .sec04__el03 a img {
  position: absolute;
  top: 18px;
  right: -25px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#lp .sec02__el03 a:hover,
#lp .sec04__el03 a:hover {
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#lp .sec02__el03 a:hover img,
#lp .sec04__el03 a:hover img {
  right: -32px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

@media only screen and (max-width: 800px) {
  #lp .sec04 {
    padding-bottom: 130%;
  }
}

#lp .map {
  max-width: 760px;
}

#lp .skew {
  position: relative;
  overflow: hidden;
}

#lp .layer-00 {
  display: block;
  content: '';
  position: absolute;
  top: 551px;
  width: 60%;
  height: 13.5%;
  opacity: 0.2;
  left: 0;
  background-color: #fff;
  z-index: 0;
  -webkit-transform: skewY(-19deg) skewX(0deg) translateX(100%);
  transform: skewY(-19deg) skewX(0deg) translateX(100%);
  -webkit-transition: 0.5s all ease-in;
  transition: 0.5s all ease-in;
}

@media only screen and (max-width: 800px) {
  #lp .layer-00 {
    width: 100%;
    top: -290px;
    -webkit-transform: skewY(-20deg) skewX(0deg) translateX(0);
    transform: skewY(-20deg) skewX(0deg) translateX(0);
  }
}

#lp .layer-01 {
  display: block;
  content: '';
  position: absolute;
  top: 430px;
  width: 100%;
  height: 910px;
  left: 0;
  background-color: #fff;
  z-index: 1;
  -webkit-transform: skewY(-19deg) skewX(0deg) translateX(100%);
  transform: skewY(-19deg) skewX(0deg) translateX(100%);
  -webkit-transition: 0.5s all ease-in;
  transition: 0.5s all ease-in;
}

@media only screen and (max-width: 800px) {
  #lp .layer-01 {
    top: 650px;
    height: 400px;
    -webkit-transform: skewY(-19deg) skewX(0deg) translateX(0);
    transform: skewY(-19deg) skewX(0deg) translateX(0);
  }
}

#lp .layer-02 {
  display: block;
  content: '';
  position: absolute;
  top: 3090px;
  width: 100%;
  height: 1130px;
  left: 0;
  background-color: #fff;
  z-index: 1;
  -webkit-transform: skewY(-19deg) skewX(0deg) translateX(100%);
  transform: skewY(-19deg) skewX(0deg) translateX(100%);
  -webkit-transition: 0.5s all ease-in;
  transition: 0.5s all ease-in;
}

@media only screen and (max-width: 800px) {
  #lp .layer-02 {
    top: 1560px;
    height: 350px;
    -webkit-transform: skewY(-19deg) skewX(0deg) translateX(0);
    transform: skewY(-19deg) skewX(0deg) translateX(0);
  }
}

#lp .layer-00.is-active {
  -webkit-transform: skewY(-19deg) skewX(0deg) translateX(0);
  transform: skewY(-19deg) skewX(0deg) translateX(0);
}

#lp .layer-01.is-active {
  -webkit-transform: skewY(-19deg) skewX(0deg) translateX(0);
  transform: skewY(-19deg) skewX(0deg) translateX(0);
}

#lp .layer-02.is-active {
  -webkit-transform: skewY(-19deg) skewX(0deg) translateX(0);
  transform: skewY(-19deg) skewX(0deg) translateX(0);
}

@-webkit-keyframes vertical {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes vertical {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@-webkit-keyframes horizontal1 {
  0% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@keyframes horizontal1 {
  0% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

#lp .scrt-cover {
  overflow-x: hidden;
  position: relative;
  display: block;
}

#lp .scrt-cover.visible::before {
  -webkit-transform: skew(-55deg) translateX(150%);
  transform: skew(-55deg) translateX(150%);
  overflow: hidden;
}

#lp .scrt-cover::before {
  content: '';
  position: absolute;
  width: 300%;
  height: 100%;
  right: 0;
  top: 0;
  z-index: 1;
  background-color: #333;
  -webkit-transform: skew(-55deg) translateX(10%);
  transform: skew(-55deg) translateX(10%);
  -webkit-transition: all 2.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 2.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  overflow: hidden;
}

#lp .scrt-cover.visible::after {
  -webkit-transform: skew(-55deg) translateX(150%);
  transform: skew(-55deg) translateX(150%);
  overflow: hidden;
}

#lp .scrt-cover::after {
  content: '';
  position: absolute;
  width: 300%;
  height: 100%;
  right: 0;
  top: 0;
  background-color: #333;
  -webkit-transform: skew(-55deg) translateX(10%);
  transform: skew(-55deg) translateX(10%);
  z-index: 2;
  -webkit-transition: all 2.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 2.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  overflow: hidden;
}

#lp .loader {
  width: 100%;
  height: 100vh;
  z-index: 29999;
  position: fixed;
}

#lp .loader__inner {
  width: 100%;
  height: 100vh;
  position: relative;
}

#lp .loader__inner figure {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 33000;
  width: 348px;
  height: 102px;
}

@media only screen and (max-width: 800px) {
  #lp .loader__inner figure {
    width: 300px;
    height: 88px;
  }
}

#lp .loader__inner:before,
#lp .loader__inner:after {
  content: '';
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  height: 51%;
  background-color: #fff;
  z-index: 5;
  -webkit-animation: preloader 0.8s ease-out 3.5s alternate forwards;
  animation: preloader 0.8s ease-out 3.5s alternate forwards;
}

#lp .loader__inner:after {
  bottom: 0;
}

#lp .loader__inner.animated :before {
  -webkit-animation: preloader 0.8s ease-out 3.5s alternate forwards;
  animation: preloader 0.8s ease-out 3.5s alternate forwards;
}

#lp .loader__inner.animated :after {
  -webkit-animation: preloader 0.8s ease-out 3.5s alternate forwards;
  animation: preloader 0.8s ease-out 3.5s alternate forwards;
}

#lp .out {
  -webkit-animation: fadeOut 0.7s ease-out 2.6s alternate forwards;
  animation: fadeOut 0.7s ease-out 2.6s alternate forwards;
}

#lp .hide {
  display: none;
}

@-webkit-keyframes preloader {
  0% {
    height: 51%;
  }
  99% {
    opacity: 1;
  }
  100% {
    height: 0%;
    opacity: 0;
  }
}

@keyframes preloader {
  0% {
    height: 51%;
  }
  99% {
    opacity: 1;
  }
  100% {
    height: 0%;
    opacity: 0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#lp .btnPageArea {
  z-index: 2;
}

#lp .belsBtn {
  text-align: center;
}

#lp .belsBtn a {
  background: -webkit-linear-gradient(70deg, #56bb72 0%, #206943 100%);
  background: linear-gradient(20deg, #56bb72 0%, #206943 100%);
  display: table;
  text-align: center;
  margin: 0 auto;
  padding: 30px 40px 26px 50px;
  font-size: 2rem;
  line-height: 1.5;
  position: relative;
  letter-spacing: 0px;
}

#lp .belsBtn a span {
  font-size: 1rem;
  background: #c90000;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  padding: 3px 10px 2px;
}

@media only screen and (max-width: 800px) {
  #lp .belsBtn a {
    font-size: 1.3rem;
    padding: 20px 20px 16px 30px;
  }
}

#lp .belsBtn a:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 25px;
  border-left: 6px solid #fff;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media only screen and (max-width: 800px) {
  #lp .belsBtn a:before {
    left: 13px;
  }
}

#lp .mainArea {
  z-index: 100;
  color: #000;
  text-align: center;
  position: relative;
  margin-bottom: 180px;
  margin-top: 230px;
}

@media only screen and (max-width: 800px) {
  #lp .mainArea {
    background: #fff;
    -webkit-transform: skewY(-13deg);
    transform: skewY(-13deg);
    z-index: 0;
    margin-bottom: -60px;
  }
  #lp .mainArea .wrap {
    -webkit-transform: skewY(13deg);
    transform: skewY(13deg);
    padding: 60px 5% 100px;
  }
}

#lp .mainLead {
  line-height: 3;
}

@media only screen and (max-width: 800px) {
  #lp .mainLead {
    line-height: 2;
  }
}

#lp .navArea {
  position: relative;
  z-index: 100;
  margin-bottom: 110px;
}

@media only screen and (max-width: 800px) {
  #lp .navArea {
    margin-bottom: 60px;
  }
}

#lp .navArea ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media only screen and (max-width: 800px) {
  #lp .navArea ul {
    display: block;
  }
}

#lp .navArea li {
  width: 32.3%;
}

@media only screen and (max-width: 800px) {
  #lp .navArea li {
    width: 80%;
    margin: 0 auto 10px;
  }
}

#lp .navArea a {
  display: block;
  width: 100%;
  background: #668492;
  padding: 15px 0 14px;
  color: #fff;
  text-align: center;
  font-size: 1.6rem;
  position: relative;
  border: 2px solid #668492;
}

#lp .navArea a:after {
  position: absolute;
  content: url(../img/top/arrow-w-btn.png);
  top: 45%;
  right: 10px;
}

#lp .navArea a:hover,
#lp .navArea a.on {
  background: #fff;
  color: #668492;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#lp .navArea a:hover:after,
#lp .navArea a.on:after {
  position: absolute;
  content: url(../img/top/arrow-b-btn.png);
  top: 45%;
  right: 10px;
}

#lp .conArea {
  position: relative;
  z-index: 100;
  padding-bottom: 65px;
}

@media only screen and (max-width: 800px) {
  #lp .conArea {
    padding-bottom: 0;
  }
}

#lp .conArea .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media only screen and (max-width: 800px) {
  #lp .conArea .inner {
    display: block;
  }
}

#lp .conArea .content {
  text-align: left;
}

#lp .conArea h4 {
  margin-bottom: 50px;
}

@media only screen and (max-width: 800px) {
  #lp .conArea h4 {
    margin-bottom: 25px;
  }
}

#lp .conArea h5 {
  margin-left: 100px;
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: normal;
}

@media only screen and (max-width: 800px) {
  #lp .conArea h5 {
    margin: 0px 0 20px 50px;
  }
}

#lp .conArea p {
  margin-left: 100px;
  margin-bottom: 45px;
}

@media only screen and (max-width: 800px) {
  #lp .conArea p {
    margin: 0px 0 20px 50px;
  }
}

#lp .conArea a.btn {
  margin-left: 95px;
  display: block;
}

@media only screen and (max-width: 800px) {
  #lp .conArea a.btn {
    margin-left: 40px;
  }
}

#lp .conArea a.btn:hover img {
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#lp .concept01,
#lp .concept03 {
  margin-bottom: 80px;
}

@media only screen and (max-width: 800px) {
  #lp .concept01,
  #lp .concept03 {
    margin-bottom: 80px;
  }
}

#lp .concept01 figure,
#lp .concept03 figure {
  margin-right: 50px;
}

#lp .concept02,
#lp .concept04 {
  margin-bottom: 80px;
}

#lp .concept02 .content,
#lp .concept04 .content {
  margin: 0 auto 0 40px;
}

@media only screen and (max-width: 800px) {
  #lp .concept02 .content,
  #lp .concept04 .content {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 800px) {
  #lp .concept02 figure,
  #lp .concept04 figure {
    margin-right: 50px;
  }
}

#lp .conArea2 {
  position: relative;
  z-index: 100;
  text-align: center;
  color: #000;
  margin-bottom: 87px;
}

@media only screen and (max-width: 800px) {
  #lp .conArea2 {
    background: #fff;
    -webkit-transform: skewY(-13deg);
    transform: skewY(-13deg);
    z-index: 0;
    margin-top: -170px;
    margin-bottom: -55px;
  }
  #lp .conArea2 .wrap {
    -webkit-transform: skewY(13deg);
    transform: skewY(13deg);
    padding: 170px 5% 80px;
  }
}

#lp .conArea2__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 950px;
}

#lp .bgArea {
  background: #eeefef;
  padding: 60px 80px;
  max-width: 720px;
  margin: 0 auto 100px;
}

@media only screen and (max-width: 800px) {
  #lp .bgArea {
    padding: 25px;
    margin-bottom: 50px;
  }
}

#lp .bgArea__inner {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 20px 10px;
  margin-bottom: 40px;
}

@media only screen and (max-width: 800px) {
  #lp .bgArea__inner {
    padding: 20px 0;
    margin-bottom: 20px;
  }
}

#lp .bgArea p {
  font-size: 1.4rem;
  text-align: left;
  margin-bottom: 40px;
}

@media only screen and (max-width: 800px) {
  #lp .bgArea p {
    margin-bottom: 20px;
  }
}

#lp .bgArea p.cap {
  font-size: 1rem;
  margin-bottom: 0;
}

#lp .inner_cell {
  max-width: 450px;
  margin-bottom: 30px;
  position: relative;
}

#lp .inner_cell .baji {
  position: absolute;
  top: -70px;
  left: -50px;
}

@media only screen and (max-width: 800px) {
  #lp .inner_cell .baji {
    position: static;
    text-align: center;
    margin-bottom: 10px;
  }
}

#lp .inner_cell h4 {
  background: #668492;
  color: #fff;
  font-size: 1.6rem;
  padding: 7px 0 5px;
  text-align: center;
  margin-bottom: 20px;
  font-weight: normal;
}

@media only screen and (max-width: 800px) {
  #lp .inner_cell h4 {
    margin-bottom: 10px;
  }
}

#lp .inner_cell figure {
  margin-bottom: 15px;
}

#lp .inner_cell p {
  font-size: 1.3rem;
  text-align: left;
}

#lp .inner_cell .cap {
  font-size: 1rem;
}

#lp .conArea3 {
  text-align: center;
  margin-bottom: 100px;
}

@media only screen and (max-width: 800px) {
  #lp .conArea3 {
    margin-bottom: 20px;
  }
}

#lp .conArea3__inner {
  background: #fff;
  color: #000;
  padding: 30px 40px 50px;
  max-width: 600px;
  margin: 0 auto 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #eeefef;
}

@media only screen and (max-width: 800px) {
  #lp .conArea3__inner {
    padding: 25px;
    margin-bottom: 25px;
  }
}

#lp .conArea3__inner h4 {
  border-bottom: 2px solid #666;
  padding-bottom: 6px;
  margin-bottom: 20px;
  font-size: 2rem;
  font-weight: normal;
}

@media only screen and (max-width: 800px) {
  #lp .conArea3__inner h4 {
    font-size: 1.7rem;
  }
}

#lp .conArea3__inner h5 {
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: normal;
}

@media only screen and (max-width: 800px) {
  #lp .conArea3__inner h5 {
    font-size: 1.7rem;
    line-height: 1.4;
    margin-bottom: 15px;
  }
}

#lp .conArea3__inner p {
  text-align: left;
  font-size: 1.3rem;
  margin-bottom: 40px;
}

@media only screen and (max-width: 800px) {
  #lp .conArea3__inner p {
    margin-bottom: 20px;
  }
}

#lp .conArea3__inner .cap {
  font-size: 1rem;
  margin-bottom: 0;
}

#lp .conArea3__inner figure {
  margin-bottom: 30px;
}

@media only screen and (max-width: 800px) {
  #lp .conArea3__inner figure {
    margin-bottom: 20px;
  }
}

#lp .mainVis {
  position: relative;
  padding-bottom: 45%;
  width: 100%;
  overflow: hidden;
}

@media only screen and (max-width: 800px) {
  #lp .mainVis {
    padding-bottom: 114%;
  }
}

#lp .mainVis.hidden {
  display: none;
}

#lp .mainVis2 {
  display: none;
}

#lp .mainVis2.show {
  position: relative;
  padding-bottom: 45%;
  width: 100%;
  overflow: hidden;
  display: block;
}

@media only screen and (max-width: 800px) {
  #lp .mainVis2.show {
    padding-bottom: 114%;
  }
}

#lp .mainVis2.show .inner {
  width: 100%;
  height: 100%;
}

#lp .mainVis2.show .inner div {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

#lp .mainVis2.show .main02 {
  background: url('../img/op/main001.jpg') no-repeat center center/cover;
}

@media only screen and (max-width: 800px) {
  #lp .mainVis2.show .main02 {
    background: url('../img/op/main001-sp.jpg') no-repeat center center/cover;
  }
}

#lp .mainVis2.show .min1-02 {
  background: url('../img/op/img1min.png') no-repeat left 10px bottom -7px;
  background-size: 28%;
}

@media only screen and (max-width: 800px) {
  #lp .mainVis2.show .min1-02 {
    background: url('../img/op/img1min.png') no-repeat left 5px bottom 7px;
    background-size: 48%;
  }
}

#lp .mainVis2.show .eyecatch,
#lp .mainVis2.show .eyecatch-02 {
  background: url('../img/op/eye-catch.png') no-repeat left 22% top 20%;
  background-size: 12%;
}

@media only screen and (max-width: 800px) {
  #lp .mainVis2.show .eyecatch,
  #lp .mainVis2.show .eyecatch-02 {
    background-position: left 5% top 45%;
    background-size: 25%;
  }
}

#lp .opening {
  width: 100%;
  height: 100%;
}

#lp .opening div {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

#lp .opening .text01 {
  background: url(../img/op/anime01.jpg) no-repeat center center;
  opacity: 0;
  -webkit-transform: scale(0.7, 0.7);
  transform: scale(0.7, 0.7);
  -webkit-transition: -webkit-transform 10s;
  transition: -webkit-transform 10s;
  transition: transform 10s;
  transition: transform 10s, -webkit-transform 10s;
}

@media only screen and (max-width: 800px) {
  #lp .opening .text01 {
    background-size: 60%;
  }
}

#lp .opening .text02 {
  background: url(../img/op/anime02.jpg) no-repeat center center;
  opacity: 0;
  -webkit-transform: scale(0.75, 0.75);
  transform: scale(0.75, 0.75);
  -webkit-transition: -webkit-transform 8s;
  transition: -webkit-transform 8s;
  transition: transform 8s;
  transition: transform 8s, -webkit-transform 8s;
}

@media only screen and (max-width: 800px) {
  #lp .opening .text02 {
    background-size: 95%;
  }
}

#lp .opening .view {
  background: url('../img/op/amine03.jpg') no-repeat center center/cover;
  opacity: 0;
}

@media only screen and (max-width: 800px) {
  #lp .opening .view {
    background: url('../img/op/amine03-sp.jpg') no-repeat center center/cover;
  }
}

#lp .opening .prot01 {
  background: url('../img/op/amine03-01.png') no-repeat center center/cover;
  opacity: 0;
}

@media only screen and (max-width: 800px) {
  #lp .opening .prot01 {
    background: url('../img/op/amine03-01-sp.png') no-repeat center center/cover;
  }
}

#lp .opening .prot02 {
  background: url('../img/op/amine03-02.png') no-repeat center center/cover;
  opacity: 0;
}

@media only screen and (max-width: 800px) {
  #lp .opening .prot02 {
    background: url('../img/op/amine03-02-sp.png') no-repeat center center/cover;
  }
}

#lp .opening .prot03 {
  background: url('../img/op/amine03-03.png') no-repeat center center/cover;
  opacity: 0;
}

@media only screen and (max-width: 800px) {
  #lp .opening .prot03 {
    background: url('../img/op/amine03-03-sp.png') no-repeat center center/cover;
  }
}

#lp .opening .prot04 {
  background: url('../img/op/amine03-04.png') no-repeat center center/cover;
  opacity: 0;
}

@media only screen and (max-width: 800px) {
  #lp .opening .prot04 {
    background-size: 120%;
  }
}

#lp .opening .bg {
  background: url('../img/op/amine04.png') no-repeat center left;
  background-size: 2919px 1016px;
}

@media only screen and (max-width: 800px) {
  #lp .opening .bg-sp {
    background: url('../img/op/amine04-sp.png') no-repeat center left;
    background-size: 1000px 1000px;
  }
}

#lp .opening .bg2 {
  background: #000;
}

#lp .opening .bg0 {
  background: url('../img/op/amine04.png') no-repeat center left;
  background-size: 2919px 1016px;
}

@media only screen and (max-width: 800px) {
  #lp .opening .bg0-sp {
    background: url('../img/op/amine04-sp.png') no-repeat center left;
    background-size: 1000px 1000px;
  }
}

#lp .opening .bg01 {
  background: #000;
}

#lp .opening .main {
  background: url('../img/op/main001.jpg') no-repeat center center/cover;
  opacity: 0;
}

@media only screen and (max-width: 800px) {
  #lp .opening .main {
    background: url('../img/op/main001-sp.jpg') no-repeat center center/cover;
  }
}

#lp .opening .min1 {
  background: url('../img/op/img1min.png') no-repeat left 10px bottom -7px;
  opacity: 0;
  background-size: 28%;
}

@media only screen and (max-width: 800px) {
  #lp .opening .min1 {
    background: url('../img/op/img1min.png') no-repeat left 5px bottom 7px;
    background-size: 48%;
  }
}

#lp .skipBt {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #000;
  padding: 5px 15px;
  font-size: 1.3rem;
  color: #fff;
  text-align: center;
  border: 1px solid #fff;
  cursor: pointer;
}

#lp .skipBt:hover {
  opacity: 0.6;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}

@media only screen and (max-width: 800px) {
  #lp .skipBt {
    top: 60px;
    right: 3px;
    font-size: 1.1rem;
    padding: 3px 5px;
  }
}

#lp .replayBt {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #000;
  padding: 5px 15px;
  font-size: 1.3rem;
  color: #fff;
  text-align: center;
  border: 1px solid #fff;
  cursor: pointer;
}

#lp .replayBt:hover {
  opacity: 0.6;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}

@media only screen and (max-width: 800px) {
  #lp .replayBt {
    top: 60px;
    right: 3px;
    font-size: 1.1rem;
    padding: 3px 5px;
  }
}

#zehm main {
  background: #000;
  color: #fff;
}

#zehm .zehm2 {
  padding: 60px 25px 25px;
  background: #fff;
}

#zehm .zehm {
  background: #fff;
  margin-top: 20px;
  color: #000;
}

@media only screen and (max-width: 800px) {
  #zehm .zehm {
    margin-top: 0;
    border-top-width: 10px;
    margin: 0 15px;
    padding: 0;
  }
}

#social main {
  background: #000;
  color: #fff;
  padding-top: 30px;
}

#social .wrap.social {
  padding: 50px 40px 40px;
  background: #fff;
  max-width: 1200px;
  margin-top: 20px;
  color: #000;
}

@media only screen and (max-width: 800px) {
  #social .wrap.social {
    padding: 30px 20px 20px;
  }
}

#social h2 {
  text-align: center;
  font-size: 3rem;
}

@media only screen and (max-width: 800px) {
  #social h2 {
    font-size: 2rem;
  }
}

#social .c-social-title {
  font-size: 2rem;
  font-weight: 700;
}

@media only screen and (max-width: 800px) {
  #social .c-social-title {
    font-size: 1.7rem;
  }
}

#social .c-social-text {
  padding-left: 2rem;
  font-size: 1.5rem;
}

@media only screen and (max-width: 800px) {
  #social .c-social-text {
    font-size: 1.3rem;
  }
}

#social .c-social-text--indent span {
  display: inline-block;
  width: 2rem;
  margin-left: -2rem;
}

#social .p-contents-item--social {
  margin-top: 50px;
}

@media only screen and (max-width: 800px) {
  #social .p-contents-item--social {
    margin-top: 25px;
  }
}

#social .c-social-box {
  line-height: 1.8;
}

@media only screen and (max-width: 800px) {
  #social .c-social-box {
    line-height: 1.6;
  }
}

#campaign #container {
  padding-top: 0px;
}

#campaign main {
  background: #fff;
  color: #000;
}

#campaign .main {
  max-width: 1600px;
  margin: 0 auto 40px;
}

#campaign .main p {
  text-align: right;
  margin-right: 10px;
  font-size: 1.2rem;
}

#campaign h3 {
  font-size: 3.6rem;
  text-align: center;
  margin-bottom: 40px;
  font-weight: normal;
}

@media only screen and (max-width: 800px) {
  #campaign h3 {
    font-size: 2.6rem;
    margin-bottom: 20px;
  }
}

#campaign .period {
  padding: 70px 0 80px;
}

@media only screen and (max-width: 800px) {
  #campaign .period {
    padding: 20px 0 35px;
  }
}

#campaign .period h3 {
  color: #fff;
  font-weight: bold;
  font-size: 3rem;
  margin: 0 auto 0px;
  display: block;
  background: #7fb4d1;
  padding: 22px 0 18px;
}

@media only screen and (max-width: 800px) {
  #campaign .period h3 {
    font-size: 2.1rem;
    line-height: 1.6;
    padding: 13px 0 8px;
  }
}

#campaign .period .ex {
  font-size: 1.7rem;
  text-align: center;
  line-height: 1.9;
  border: 2px solid #7fb4d1;
  padding: 30px 0;
}

@media only screen and (max-width: 800px) {
  #campaign .period .ex {
    text-align: left;
    font-size: 1.5rem;
    padding: 15px;
    line-height: 1.6;
  }
}

#campaign .period a {
  text-decoration: underline;
  color: #0077b5;
}

#campaign .period .periodArea {
  background: -webkit-linear-gradient(
    115deg,
    #797979 0%,
    #797979 50%,
    #7fb4d1 50.1%,
    #7fb4d1 100%
  );
  background: linear-gradient(
    -25deg,
    #797979 0%,
    #797979 50%,
    #7fb4d1 50.1%,
    #7fb4d1 100%
  );
  color: #fff;
  padding: 40px 40px 30px;
  text-align: center;
  font-size: 2.8rem;
}

@media only screen and (max-width: 800px) {
  #campaign .period .periodArea {
    padding: 20px 20px 15px;
  }
}

#campaign .period .periodArea h4 {
  margin-bottom: 20px;
  border-bottom: 1px solid #fff;
  padding-bottom: 20px;
}

@media only screen and (max-width: 800px) {
  #campaign .period .periodArea h4 {
    font-size: 2rem;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}

#campaign .period .periodArea p {
  font-size: 2.8rem;
}

@media only screen and (max-width: 800px) {
  #campaign .period .periodArea p {
    font-size: 2rem;
  }
}

#campaign .period .periodArea p span {
  font-size: 2rem;
}

@media only screen and (max-width: 800px) {
  #campaign .period .periodArea p span {
    font-size: 1.4rem;
  }
}

#campaign .prize {
  padding: 0px 0 80px;
}

@media only screen and (max-width: 800px) {
  #campaign .prize {
    padding: 0 0 40px;
  }
}

#campaign .prize h3 {
  color: #7faec9;
}

#campaign .prize li {
  margin-bottom: 30px;
  padding: 30px;
  border: 3px solid #7faec9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

#campaign .prize li:before {
  content: '';
  width: 300px;
  height: 300px;
  background: #afd0e2;
  -webkit-transform: rotate(65deg);
  transform: rotate(65deg);
  position: absolute;
  bottom: -250px;
  right: -100px;
  z-index: 0;
}

@media only screen and (max-width: 800px) {
  #campaign .prize li:before {
    bottom: -310px;
  }
}

@media only screen and (max-width: 800px) {
  #campaign .prize li {
    margin-bottom: 20px;
    padding: 20px;
    display: block;
  }
}

#campaign .prize figure {
  width: 49%;
  text-align: left;
}

@media only screen and (max-width: 800px) {
  #campaign .prize figure {
    width: 80%;
    text-align: center;
    margin: 0 auto 10px;
  }
}

#campaign .prize dl {
  width: 49%;
  position: relative;
  padding-top: 25px;
}

@media only screen and (max-width: 800px) {
  #campaign .prize dl {
    width: 100%;
  }
}

#campaign .prize dt {
  font-size: 2.6rem;
  border-bottom: 3px solid #afd0e3;
  padding-bottom: 15px;
  margin-bottom: 20px;
  width: 80%;
}

@media only screen and (max-width: 800px) {
  #campaign .prize dt {
    font-size: 2rem;
    margin-bottom: 20px;
  }
}

#campaign .prize .num {
  position: absolute;
  top: 0;
  right: 0;
  background: #8eb3c8;
  padding: 10px;
  width: 100px;
  height: 85px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-bottom: 31px;
  text-align: center;
  border-radius: 50px;
  color: #fff;
  font-size: 4.5rem;
  line-height: 0.5;
}

@media only screen and (max-width: 800px) {
  #campaign .prize .num {
    font-size: 3rem;
    height: 50px;
    padding-bottom: 18px;
    top: 13px;
  }
}

#campaign .prize .num span {
  font-size: 1.6rem;
  font-weight: normal;
}

#campaign .prize .desc {
  font-size: 2.2rem;
}

@media only screen and (max-width: 800px) {
  #campaign .prize .desc {
    font-size: 2.2rem;
  }
}

#campaign .prize .desc .num1 {
  font-size: 3.5rem;
  line-height: 1;
}

@media only screen and (max-width: 800px) {
  #campaign .prize .desc .num1 {
    font-size: 2.7rem;
  }
}

#campaign .prize .desc .num1 span {
  color: #da7314;
}

#campaign .prize .desc .num1 strong {
  font-size: 5.5rem;
  font-weight: normal;
}

@media only screen and (max-width: 800px) {
  #campaign .prize .desc .num1 strong {
    font-size: 4.5rem;
  }
}

#campaign .prize .desc p {
  margin-top: 10px;
}

#campaign .prize .desc .cap {
  font-size: 1rem;
}

#campaign .step {
  padding: 0px 0 0px;
}

@media only screen and (max-width: 800px) {
  #campaign .step {
    padding: 0 0 0px;
  }
}

#campaign .step h3 {
  color: #7faec9;
  margin-bottom: 15px;
}

#campaign .step .lead {
  margin-bottom: 40px;
  text-align: center;
}

@media only screen and (max-width: 800px) {
  #campaign .step .lead {
    margin-bottom: 20px;
  }
}

#campaign .step .lead a {
  color: #000;
  text-decoration: underline;
}

#campaign .step li {
  background: #7aafcc;
  padding: 20px 40px 40px;
  color: #fff;
  margin-bottom: 30px;
}

@media only screen and (max-width: 800px) {
  #campaign .step li {
    padding: 20px;
    margin-bottom: 20px;
  }
}

#campaign .step dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid #fff;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

@media only screen and (max-width: 800px) {
  #campaign .step dl {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: left;
  }
}

#campaign .step dt {
  margin-right: 15px;
}

@media only screen and (max-width: 800px) {
  #campaign .step dt {
    width: 35px;
    margin-right: 8px;
  }
  #campaign .step dt img {
    width: 100%;
  }
}

#campaign .step dd {
  font-size: 2.3rem;
  font-weight: bold;
  padding-top: 20px;
}

@media only screen and (max-width: 800px) {
  #campaign .step dd {
    font-size: 1.8rem;
    width: calc(100% - 40px);
    padding-top: 10px;
    line-height: 1.2;
  }
}

#campaign .step .step01Inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#9f51af),
    to(#d8347b)
  );
  background: -webkit-linear-gradient(#9f51af 0%, #d8347b 100%);
  background: linear-gradient(#9f51af 0%, #d8347b 100%);
  border-radius: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px 30px;
}

@media only screen and (max-width: 800px) {
  #campaign .step .step01Inner {
    display: block;
    text-align: center;
    padding: 20px 15px;
  }
}

#campaign .step .step01Inner h4 {
  font-size: 2.1rem;
  line-height: 1.6;
  font-weight: normal;
}

@media only screen and (max-width: 800px) {
  #campaign .step .step01Inner h4 {
    font-size: 1.7rem;
    margin-top: 5px;
  }
}

#campaign .step .step01Inner h4 span {
  display: block;
  padding-left: 10px;
}

@media only screen and (max-width: 800px) {
  #campaign .step .step01Inner h4 span {
    padding: 0;
  }
}

#campaign .step .step01Inner a {
  border: 2px solid #fff;
  padding: 18px;
  display: block;
  width: 30%;
  text-align: center;
  font-size: 2rem;
  border-radius: 50px;
}

@media only screen and (max-width: 800px) {
  #campaign .step .step01Inner a {
    margin: 15px auto 0;
    width: 80%;
    padding: 10px;
  }
}

#campaign .step .step01Inner a:hover {
  background: #fff;
  color: #d8347b;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#campaign .step .step02Inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  text-align: center;
}

@media only screen and (max-width: 800px) {
  #campaign .step .step02Inner {
    display: block;
  }
  #campaign .step .step02Inner figure {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px;
  }
  #campaign .step .step02Inner figure img {
    width: 45%;
  }
}

#campaign .step .step02Inner figcaption {
  margin: 15px auto 0;
  font-size: 2rem;
}

@media only screen and (max-width: 800px) {
  #campaign .step .step02Inner figcaption {
    width: 50%;
    font-size: 1.5rem;
    text-align: left;
    line-height: 1.6;
  }
}

#campaign .step .step03Inner p {
  text-align: center;
  font-size: 2rem;
}

@media only screen and (max-width: 800px) {
  #campaign .step .step03Inner p {
    text-align: left;
    font-size: 1.6rem;
  }
}

#campaign .step .step03Inner strong {
  font-size: 2.5rem;
}

@media only screen and (max-width: 800px) {
  #campaign .step .step03Inner strong {
    font-size: 2.1rem;
  }
}

#campaign .instaArea {
  background: #cbe5f4;
  padding: 80px 0 80px;
}

#campaign .instaArea .wrap {
  max-width: 960px;
}

#campaign .instaArea h3 {
  margin-bottom: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#campaign .instaArea h3:before {
  content: url(../img/campaign/icon02.png);
  margin-right: 8px;
}

#campaign .instaArea .more {
  width: 300px;
  margin: 40px auto 0;
}

#campaign .instaArea .more a {
  display: block;
  text-align: center;
  border: 2px solid #fff;
  background: #a6c9dc;
  border-radius: 30px;
  padding: 20px 0;
  font-size: 2rem;
}

#campaign .instaArea .more a:hover {
  background: #fff;
  color: #a6c9dc;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#campaign .terms {
  padding: 80px 0;
}

#campaign .terms h3 {
  color: #7faec9;
  margin-bottom: 40px;
  font-size: 2.6rem;
  line-height: 1.4;
}

@media only screen and (max-width: 800px) {
  #campaign .terms h3 {
    font-size: 2rem;
    margin-bottom: 20px;
  }
}

#campaign .terms .termInner {
  padding: 30px;
  height: 600px;
  overflow-y: scroll;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

@media only screen and (max-width: 800px) {
  #campaign .terms .termInner {
    padding: 25px 15px 15px;
  }
}

#campaign .terms .termInner p {
  font-size: 1.8rem;
}

#campaign .terms .termInner dt {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 15px;
}

#campaign .terms .termInner dd {
  font-size: 1.5rem;
  margin-bottom: 30px;
  line-height: 1.5;
}

#campaign .terms .termInner strong {
  font-size: 1.6rem;
  display: block;
  margin-bottom: 5px;
}

#campaign .terms .termInner a {
  color: #0d70a4;
  text-decoration: underline;
}

#campaign .terms .termInner ul li {
  margin-bottom: 5px;
  list-style: inside none;
  padding-left: 1em;
}

#campaign .terms .termInner ul li:before {
  content: '・';
  margin-right: 2px;
  margin-left: -17px;
}

#campaign .intro {
  font-size: 2rem;
  text-align: center;
  line-height: 2;
}

@media only screen and (max-width: 800px) {
  #campaign .intro {
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: left;
  }
}

#campaign .cap {
  font-size: 1.2rem;
}

#campaign h3 {
  margin-bottom: 20px;
  text-align: left;
  padding-bottom: 3px;
}

#campaign h3.gold {
  border-bottom: 1px solid #c3b975;
}

#campaign h3.silver {
  border-bottom: 1px solid #b9c0c2;
}

#campaign h3.bronze {
  text-align: center;
  border-bottom: 1px solid #ba9a7e;
}

@media only screen and (max-width: 800px) {
  #campaign h3.bronze {
    text-align: left;
  }
}

#campaign h4 {
  font-size: 2.3rem;
  margin-bottom: 18px;
  font-weight: normal;
}

#campaign h4 span {
  font-size: 2.7rem;
}

#campaign .toTop {
  width: 360px;
  margin: 0 auto 80px;
}

@media only screen and (max-width: 800px) {
  #campaign .toTop {
    margin: 0 auto 60px;
    width: 90%;
  }
}

#campaign .toTop a {
  width: 100%;
  display: block;
  background: #6e9db8;
  color: #fff;
  padding: 30px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  font-size: 1.8rem;
  letter-spacing: 0;
  border: 1px solid #6e9db8;
}

@media only screen and (max-width: 800px) {
  #campaign .toTop a {
    font-size: 1.6rem;
  }
}

#campaign .toTop a:hover {
  background: #fff;
  color: #6e9db8;
  -webkit-transition: 0.15s;
  transition: 0.15s;
}

#pop main {
  color: #fff;
  background: #000;
  padding-top: 80px;
}

#plan main {
  background: #000;
  color: #fff;
}

#plan .view {
  width: 100%;
  z-index: 100;
  position: relative;
  margin-bottom: 50px;
}

#plan .view img {
  width: 100%;
}

#plan .planArea {
  background: #fff;
  padding: 50px;
  color: #000;
  position: relative;
  z-index: 100;
}

@media only screen and (max-width: 800px) {
  #plan .planArea {
    margin: 0 15px;
    padding: 20px 20px;
  }
}

#plan .planArea .new {
  position: absolute;
  top: 0;
  left: 0;
  background: #b50000;
  color: #fff;
  width: 60px;
  font-size: 1.3rem;
  text-align: center;
  padding: 3px 0 5px;
}

@media only screen and (max-width: 800px) {
  #plan .planArea .new {
    right: 0;
    left: auto;
    font-size: 1.1rem;
  }
}

#plan .planArea h3 {
  color: #6e9db8;
  font-size: 4rem;
  font-weight: normal;
  margin-bottom: 50px;
}

@media only screen and (max-width: 800px) {
  #plan .planArea h3 {
    margin-bottom: 20px;
    font-size: 3rem;
  }
}

#plan .planArea h3 span {
  font-size: 2.4rem;
}

@media only screen and (max-width: 800px) {
  #plan .planArea h3 span {
    font-size: 2rem;
  }
}

#plan .planArea .spec {
  margin-bottom: 50px;
}

@media only screen and (max-width: 800px) {
  #plan .planArea .spec {
    margin-bottom: 20px;
  }
}

#plan .planArea .spec li {
  background: #6e9db8;
  color: #fff;
  margin-bottom: 15px;
  font-size: 1.5rem;
  padding: 15px 0 15px 50px;
  margin-left: -50px;
  line-height: 1;
  width: 100%;
}

@media only screen and (max-width: 800px) {
  #plan .planArea .spec li {
    margin: 0 0 10px -20px;
    font-size: 1.3rem;
  }
}

#plan .planArea .spec li:first-child {
  padding-top: 7px;
  padding-bottom: 8px;
}

#plan .planArea .spec li span {
  font-size: 3rem;
}

@media only screen and (max-width: 800px) {
  #plan .planArea .spec li span {
    font-size: 2.6rem;
  }
}

#plan .planArea .spec02 {
  margin-left: 1.5rem;
}

#plan .planArea .spec02 li {
  font-size: 1.5rem;
  list-style: outside square;
  margin-bottom: 15px;
  line-height: 1.6;
}

@media only screen and (max-width: 800px) {
  #plan .planArea .spec02 li {
    line-height: 1.6;
    font-size: 1.35rem;
  }
}

#plan .planArea .print {
  width: 200px;
  position: absolute;
  bottom: 50px;
  left: 50px;
}

#plan .planArea .print a {
  display: block;
  width: 100%;
  padding: 15px 20px 12px;
  text-align: center;
  border: 2px solid #6e9db8;
  color: #6e9db8;
  font-size: 1.7rem;
  letter-spacing: 2px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
}

#plan .planArea .print a:hover {
  letter-spacing: 5px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  cursor: pointer;
}

#plan .printfig {
  display: none;
}

@media print {
  #plan .print {
    display: none;
  }
  #plan .printfig {
    display: block;
  }
}

#plan main.index .layer-03 {
  top: 400px;
}

#acc main {
  background: #000;
  color: #fff;
}

#acc .accArea {
  max-width: 1000px;
  background: #fff;
  padding: 50px;
  color: #000;
  position: relative;
  z-index: 100;
}

@media only screen and (max-width: 800px) {
  #acc .accArea {
    margin: 0 15px;
    padding: 30px 20px;
  }
}

#acc .accArea h3 {
  color: #6e9db8;
  font-size: 2.8rem;
  font-weight: normal;
  margin-bottom: 50px;
  text-align: center;
}

@media only screen and (max-width: 800px) {
  #acc .accArea h3 {
    margin-bottom: 20px;
    font-size: 2.4rem;
  }
}

#acc .accArea h3 span {
  font-size: 2.4rem;
}

@media only screen and (max-width: 800px) {
  #acc .accArea h3 span {
    font-size: 2rem;
  }
}

#acc .accArea h4 {
  font-size: 2rem;
  text-align: center;
  font-weight: bold;
  margin-bottom: 25px;
  line-height: 1.5;
}

@media only screen and (max-width: 800px) {
  #acc .accArea h4 {
    margin-bottom: 20px;
    font-size: 1.8rem;
  }
}

#acc .bArea {
  padding: 60px 0;
  position: relative;
  z-index: 1;
}

#acc .bArea .wrap {
  padding: 0;
  background: #000;
}

@media only screen and (max-width: 800px) {
  #acc .bArea .wrap {
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media only screen and (max-width: 800px) {
  #acc .bArea {
    padding: 20px 0 0;
  }
}

#acc .bArea h3 {
  font-size: 2.6rem;
  margin-bottom: 20px;
  font-weight: normal;
}

@media only screen and (max-width: 800px) {
  #acc .bArea h3 {
    font-size: 2rem;
  }
}

#acc .bArea h4 {
  font-size: 2rem;
  text-align: center;
  font-weight: bold;
  margin-bottom: 25px;
  line-height: 1.5;
}

@media only screen and (max-width: 800px) {
  #acc .bArea h4 {
    margin-bottom: 20px;
    font-size: 1.8rem;
  }
}

#loc main {
  background: #000;
  color: #fff;
}

#loc .locBtn {
  max-width: 700px;
  margin: 0px auto 55px;
  position: relative;
  z-index: 99;
}

@media only screen and (max-width: 800px) {
  #loc .locBtn {
    margin-bottom: 30px;
    padding: 15px 15px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}

#loc .locBtn ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#loc .locBtn li {
  width: 48%;
}

#loc .locBtn a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #6e9db8;
  border: 1px solid #6e9db8;
  padding: 25px 0 22px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  font-size: 1.85rem;
  text-align: center;
}

@media only screen and (max-width: 800px) {
  #loc .locBtn a {
    font-size: 1.2rem;
  }
}

#loc .locBtn a.on,
#loc .locBtn a:hover {
  background: #fff;
  color: #6e9db8;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#loc figure {
  position: relative;
}

#loc figcaption {
  position: absolute;
  bottom: 5px;
  right: 5px;
  text-shadow: white 0px 0px 2px, white 0px 0px 2px, white 0px 0px 2px,
    white 0px 0px 2px, white 0px 0px 2px, white 0px 0px 2px, white 0px 0px 2px,
    white 0px 0px 2px, white 0px 0px 2px;
}

#loc .locArea {
  max-width: 1100px;
  background: #fff;
  padding: 50px;
  color: #000;
  position: relative;
  z-index: 100;
}

@media only screen and (max-width: 800px) {
  #loc .locArea {
    margin: 0 15px;
    padding: 30px 20px;
  }
}

#loc .locArea h3 {
  color: #6e9db8;
  font-size: 2.8rem;
  font-weight: normal;
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.4;
}

@media only screen and (max-width: 800px) {
  #loc .locArea h3 {
    margin-bottom: 20px;
    font-size: 2.4rem;
  }
}

#loc .locArea h3 span {
  font-size: 2.4rem;
}

@media only screen and (max-width: 800px) {
  #loc .locArea h3 span {
    font-size: 2rem;
  }
}

#loc .locArea h4 {
  font-size: 2rem;
  text-align: center;
  font-weight: bold;
  margin-bottom: 25px;
  line-height: 1.5;
}

@media only screen and (max-width: 800px) {
  #loc .locArea h4 {
    margin-bottom: 20px;
    font-size: 1.6rem;
  }
}

#loc .locArea p {
  line-height: 2;
}

#loc .locArea p.lh14 {
  line-height: 1.45;
}

#loc .kashiwa {
  background: #eee;
  padding: 20px;
}

#loc .locArea2 {
  background: #fff;
  z-index: 100;
  position: relative;
}

@media only screen and (max-width: 800px) {
  #loc .locArea2 {
    margin: 0 15px;
    padding: 0;
  }
}

#loc .locArea2 .h3Area {
  position: relative;
}

#loc .locArea2 .h3Area p {
  position: absolute;
  top: 5px;
  right: 0;
}

#loc .locArea2 .h3Area.gourmet {
  background: url(../img/location/main01.jpg) no-repeat;
  background-size: cover;
  padding-bottom: 40.5%;
  width: 100%;
  border-bottom: 5px solid #6b3829;
}

@media only screen and (max-width: 800px) {
  #loc .locArea2 .h3Area.gourmet {
    background-position: bottom;
    padding-bottom: 90%;
    background-size: contain;
    background-color: #fffdec;
  }
}

#loc .locArea2 .h3Area.gourmet h3 {
  position: absolute;
  right: 20px;
  top: 50%;
  color: #7a6a55;
  font-weight: normal;
  font-size: 2.6rem;
}

@media only screen and (max-width: 800px) {
  #loc .locArea2 .h3Area.gourmet h3 {
    top: 38%;
    right: 0px;
  }
}

#loc .locArea2 .h3Area.mall {
  background: url(../img/location/main02.jpg) no-repeat;
  background-size: cover;
  padding-bottom: 40.5%;
  width: 100%;
  border-bottom: 5px solid #afab89;
}

@media only screen and (max-width: 800px) {
  #loc .locArea2 .h3Area.mall {
    background-position: bottom;
    padding-bottom: 100%;
    background-size: contain;
    background-color: #fffdec;
  }
}

#loc .locArea2 .h3Area.mall h3 {
  position: absolute;
  right: 30px;
  top: 47%;
  color: #6b695a;
  font-weight: normal;
  font-size: 2.6rem;
  text-align: right;
  line-height: 1.6;
}

@media only screen and (max-width: 800px) {
  #loc .locArea2 .h3Area.mall h3 {
    top: 34%;
    right: 15px;
    line-height: 1.3;
    font-size: 2.3rem;
  }
}

#loc .locInner {
  padding: 30px;
  color: #000;
  background: #fffdec;
}

@media only screen and (max-width: 800px) {
  #loc .locInner {
    padding: 10px;
  }
}

#loc .locInner ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#loc .locInner ul.mall h4,
#loc .locInner ul.mall p {
  margin-left: 8px;
}

#loc .locInner ul.mall h4 > p {
  margin-left: 0;
}

#loc .locInner li {
  width: 31%;
}

@media only screen and (max-width: 800px) {
  #loc .locInner li {
    width: 48%;
    margin-bottom: 20px;
  }
}

#loc .locInner li figure {
  margin-bottom: 20px;
}

#loc .locInner li.shop02 {
  margin-top: 25px;
}

@media only screen and (max-width: 800px) {
  #loc .locInner li.shop02 {
    margin-top: 0;
  }
}

#loc .locInner li.shop03 {
  margin-top: 50px;
}

@media only screen and (max-width: 800px) {
  #loc .locInner li.shop03 {
    margin-top: 0;
  }
}

#loc .locInner h4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: normal;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: 1px solid #aaa;
  margin-bottom: 17px;
  padding-bottom: 5px;
}

#loc .locInner h4.noLine {
  border: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

#loc .locInner h4 p {
  font-size: 1.8rem;
}

@media only screen and (max-width: 800px) {
  #loc .locInner h4 p {
    font-size: 1.5rem;
  }
}

#loc .locInner h4 p span {
  font-size: 1.1rem;
}

#loc .locInner h4 div {
  background: #6b3829;
  border-radius: 50%;
  padding: 5px 10px 6px;
  text-align: center;
  color: #fff;
  line-height: 1;
  font-size: 1.65rem;
  margin-right: 5px;
}

@media only screen and (max-width: 800px) {
  #loc .locInner h4 div {
    font-size: 1.2rem;
    padding: 3px 6px 3px;
  }
}

#loc .locInner p.time {
  font-size: 1.1rem;
  line-height: 1.4;
  border-top: 1px solid #aaa;
  padding-top: 10px;
  margin-top: 15px;
  letter-spacing: 1px;
}

@media only screen and (max-width: 800px) {
  #loc .spSlide.loc figure img {
    width: 650px;
    max-width: none;
    height: 100%;
    margin: 0 auto;
    text-align: center;
  }
}

#loc .des3 {
  padding: 0px 0 40px;
}

@media only screen and (max-width: 800px) {
  #loc .des3 {
    padding: 0px 0px 10px;
  }
}

#loc .des3 h3 {
  color: #6e9db8;
  font-size: 2.8rem;
  font-weight: normal;
  margin-bottom: 50px;
}

@media only screen and (max-width: 800px) {
  #loc .des3 h3 {
    margin-bottom: 20px;
    font-size: 2.4rem;
  }
}

#loc .des3 h3 span {
  font-size: 2.4rem;
}

@media only screen and (max-width: 800px) {
  #loc .des3 h3 span {
    font-size: 2rem;
  }
}

#loc .des3 h4 {
  font-size: 2rem;
  text-align: center;
  font-weight: normal;
  margin-bottom: 25px;
  line-height: 1.5;
}

@media only screen and (max-width: 800px) {
  #loc .des3 h4 {
    margin-bottom: 20px;
    font-size: 1.8rem;
  }
}

#des main {
  background: #000;
  color: #fff;
}

#des .locBtn {
  max-width: 700px;
  margin: 0px auto 55px;
  position: relative;
  z-index: 99;
}

@media only screen and (max-width: 800px) {
  #des .locBtn {
    margin-bottom: 30px;
    padding: 15px 15px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}

#des .locBtn ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#des .locBtn li {
  width: 48%;
}

#des .locBtn a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #6e9db8;
  border: 1px solid #6e9db8;
  padding: 25px 0 22px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  font-size: 1.85rem;
  text-align: center;
}

@media only screen and (max-width: 800px) {
  #des .locBtn a {
    font-size: 1.2rem;
  }
}

#des .locBtn a.on,
#des .locBtn a:hover {
  background: #fff;
  color: #6e9db8;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#des figure {
  position: relative;
}

#des figcaption {
  position: absolute;
  bottom: 5px;
  right: 5px;
  text-shadow: white 0px 0px 2px, white 0px 0px 2px, white 0px 0px 2px,
    white 0px 0px 2px, white 0px 0px 2px, white 0px 0px 2px, white 0px 0px 2px,
    white 0px 0px 2px, white 0px 0px 2px;
}

#des .des,
#des .des2,
#des .des3 {
  background: #fff;
  color: #000;
  position: relative;
  z-index: 100;
}

@media only screen and (max-width: 800px) {
  #des .des,
  #des .des2,
  #des .des3 {
    margin: 0 15px;
  }
}

#des .des {
  height: 650px;
  padding: 100px 40px;
  overflow: visible;
}

@media only screen and (max-width: 800px) {
  #des .des {
    padding: 20px;
    height: auto;
  }
}

#des .des h3 {
  font-size: 2.5rem;
  line-height: 1.7;
  margin-bottom: 40px;
  font-weight: normal;
}

@media only screen and (max-width: 800px) {
  #des .des h3 {
    font-size: 1.9rem;
    line-height: 1.4;
    margin-bottom: 15px;
  }
}

#des .des p {
  line-height: 2.4;
}

@media only screen and (max-width: 800px) {
  #des .des p {
    line-height: 1.6;
  }
}

#des .des .perth {
  position: absolute;
  bottom: 0;
  right: -55px;
}

@media only screen and (max-width: 800px) {
  #des .des .perth {
    position: static;
  }
}

#des .des2 {
  background: #d3dee5;
  padding: 30px 25px 15px;
}

@media only screen and (max-width: 800px) {
  #des .des2 {
    padding: 15px;
  }
}

#des .des2__inner {
  background: #e4e8eb;
  padding: 20px;
  margin-bottom: 15px;
}

@media only screen and (max-width: 800px) {
  #des .des2__inner {
    padding: 15px;
  }
}

#des .des2 h4 {
  border-bottom: 1px solid #333;
  padding-bottom: 5px;
  margin-bottom: 10px;
  font-size: 1.7rem;
  font-weight: normal;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media only screen and (max-width: 800px) {
  #des .des2 h4 {
    font-size: 1.45rem;
  }
}

#des .des2 h4 span {
  display: block;
  margin-right: 5px;
  background: #333;
  color: #fff;
  padding: 3px 7px;
  font-size: 1.4rem;
}

@media only screen and (max-width: 800px) {
  #des .des2 h4 span {
    font-size: 1.2rem;
  }
}

#des .des2 p {
  font-size: 1.3rem;
}

@media only screen and (max-width: 800px) {
  #des .des2 p {
    font-size: 1.2rem;
  }
}

#des .des2 .cap {
  font-size: 1rem;
}

#des .des3 {
  padding: 40px 25px;
}

@media only screen and (max-width: 800px) {
  #des .des3 {
    padding: 20px 15px;
  }
}

#des .des3 h3 {
  color: #6e9db8;
  font-size: 2.8rem;
  font-weight: normal;
  margin-bottom: 50px;
}

@media only screen and (max-width: 800px) {
  #des .des3 h3 {
    margin-bottom: 20px;
    font-size: 2.4rem;
  }
}

#des .des3 h3 span {
  font-size: 2.4rem;
}

@media only screen and (max-width: 800px) {
  #des .des3 h3 span {
    font-size: 2rem;
  }
}

#des .des3 h4 {
  font-size: 2rem;
  text-align: center;
  font-weight: normal;
  margin-bottom: 25px;
  line-height: 1.5;
}

@media only screen and (max-width: 800px) {
  #des .des3 h4 {
    margin-bottom: 20px;
    font-size: 1.8rem;
  }
}

#eq main {
  background: #000;
  color: #fff;
}

#eq .eqBtn {
  max-width: 1100px;
  margin: 0px auto 55px;
  position: relative;
  z-index: 99;
}

#eq .eqBtn.str {
  max-width: 550px;
}

#eq .eqBtn.str li {
  width: 49%;
}

@media only screen and (max-width: 800px) {
  #eq .eqBtn {
    margin-bottom: 25px;
    padding: 15px 15px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}

#eq .eqBtn ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#eq .eqBtn li {
  width: 24%;
}

@media only screen and (max-width: 800px) {
  #eq .eqBtn li {
    width: 49%;
    margin-bottom: 10px;
  }
}

#eq .eqBtn a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #6e9db8;
  border: 1px solid #6e9db8;
  padding: 25px 0 22px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  font-size: 1.85rem;
  text-align: center;
}

@media only screen and (max-width: 800px) {
  #eq .eqBtn a {
    font-size: 1.2rem;
  }
}

#eq .eqBtn a.on,
#eq .eqBtn a:hover {
  background: #fff;
  color: #6e9db8;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#eq figure {
  position: relative;
}

#eq figcaption {
  position: absolute;
  bottom: 5px;
  right: 5px;
  text-shadow: white 0px 0px 2px, white 0px 0px 2px, white 0px 0px 2px,
    white 0px 0px 2px, white 0px 0px 2px, white 0px 0px 2px, white 0px 0px 2px,
    white 0px 0px 2px, white 0px 0px 2px;
}

#eq .eqArea {
  max-width: 1100px;
  background: #fff;
  padding: 50px;
  color: #000;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 100;
}

@media only screen and (max-width: 800px) {
  #eq .eqArea {
    margin: 0 15px;
    padding: 30px 15px;
  }
}

#eq .eqArea h3 {
  color: #6e9db8;
  font-size: 2.8rem;
  font-weight: normal;
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.4;
}

@media only screen and (max-width: 800px) {
  #eq .eqArea h3 {
    margin-bottom: 20px;
    font-size: 2.4rem;
  }
}

#eq .eqArea h3 span {
  font-size: 2.4rem;
}

@media only screen and (max-width: 800px) {
  #eq .eqArea h3 span {
    font-size: 2rem;
  }
}

#eq .eqArea h4 {
  font-size: 2rem;
  text-align: center;
  font-weight: bold;
  margin-bottom: 25px;
  line-height: 1.5;
}

@media only screen and (max-width: 800px) {
  #eq .eqArea h4 {
    margin-bottom: 20px;
    font-size: 1.6rem;
  }
}

#eq .eqArea p {
  line-height: 2;
}

#eq .eqArea p.lh14 {
  line-height: 1.45;
}

#eq .main {
  margin: 0 -20px 30px;
}

#eq .ttlArea {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}

#eq .ttlArea h3 {
  position: absolute;
  background: #000;
  padding: 3px 50px;
  display: table;
  text-align: center;
  top: 42%;
  left: -1.7%;
  z-index: 100;
  color: #fff;
  -webkit-transform: skew(-30deg);
  transform: skew(-30deg);
}

#eq .ttlArea h3 p {
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
  font-size: 2.5rem;
}

@media only screen and (max-width: 800px) {
  #eq .ttlArea h3 {
    top: 36%;
    left: -3.7%;
    padding: 3px 35px;
  }
  #eq .ttlArea h3 p {
    font-size: 2rem;
  }
}

#eq .eqInner ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#eq .eqInner ul.struc li {
  width: 32%;
}

@media only screen and (max-width: 800px) {
  #eq .eqInner ul.struc li {
    width: 48%;
  }
}

#eq .eqInner li {
  width: 24%;
  margin-bottom: 30px;
}

@media only screen and (max-width: 800px) {
  #eq .eqInner li {
    width: 48%;
    margin-bottom: 20px;
  }
}

#eq .eqInner li.w100 {
  width: 100% !important;
}

#eq .eqInner li.w66 {
  width: 66.5% !important;
}

@media only screen and (max-width: 800px) {
  #eq .eqInner li.w66 {
    width: 100% !important;
  }
}

#eq .eqInner figure {
  margin-bottom: 15px;
}

@media only screen and (max-width: 800px) {
  #eq .eqInner figure {
    margin-bottom: 10px;
  }
}

#eq .eqInner h5 {
  font-size: 1.7rem;
  margin-bottom: 6px;
  line-height: 1.3;
}

@media only screen and (max-width: 800px) {
  #eq .eqInner h5 {
    font-size: 1.5rem;
    margin-bottom: 4px;
  }
}

#eq .eqInner p {
  font-size: 1.4rem;
  line-height: 1.6;
}

@media only screen and (max-width: 800px) {
  #eq .eqInner p {
    font-size: 1.2rem;
  }
}

#con main {
  background: #000;
  color: #fff;
}

#con .mainArea {
  z-index: 100;
  color: #000;
  text-align: center;
  position: relative;
  margin-bottom: 160px;
  margin-top: 230px;
}

@media only screen and (max-width: 800px) {
  #con .mainArea {
    background: #fff;
    -webkit-transform: skewY(-13deg);
    transform: skewY(-13deg);
    z-index: 0;
    margin-bottom: 80px;
    margin-top: 0;
  }
  #con .mainArea .wrap {
    -webkit-transform: skewY(13deg);
    transform: skewY(13deg);
    padding: 60px 15px 100px;
  }
}

#con .mainLead {
  line-height: 3;
}

@media only screen and (max-width: 800px) {
  #con .mainLead {
    line-height: 2;
  }
}

#con .layer-01 {
  display: block;
  content: '';
  position: absolute;
  top: 330px;
  width: 100%;
  height: 1380px;
  left: 0;
  background-color: #fff;
  z-index: 1;
  -webkit-transform: skewY(-16deg) skewX(0deg) translateX(100%);
  transform: skewY(-16deg) skewX(0deg) translateX(100%);
  -webkit-transition: 0.5s all ease-in;
  transition: 0.5s all ease-in;
}

@media only screen and (max-width: 800px) {
  #con .layer-01 {
    top: 650px;
    height: 400px;
    -webkit-transform: skewY(-19deg) skewX(0deg) translateX(0);
    transform: skewY(-19deg) skewX(0deg) translateX(0);
  }
}

#con .layer-01.is-active {
  -webkit-transform: skewY(-16deg) skewX(0deg) translateX(0);
  transform: skewY(-16deg) skewX(0deg) translateX(0);
}

#con .conArea {
  position: relative;
  z-index: 100;
  padding-bottom: 65px;
}

@media only screen and (max-width: 800px) {
  #con .conArea {
    padding-bottom: 0;
  }
}

#con .conArea .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media only screen and (max-width: 800px) {
  #con .conArea .inner {
    display: block;
  }
}

#con .conArea .content {
  text-align: left;
}

#con .conArea h4 {
  margin-bottom: 50px;
}

@media only screen and (max-width: 800px) {
  #con .conArea h4 {
    margin-bottom: 25px;
  }
}

#con .conArea h5 {
  margin-left: 100px;
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: normal;
}

@media only screen and (max-width: 800px) {
  #con .conArea h5 {
    margin: 0px 0 20px 50px;
  }
}

#con .conArea p {
  margin-left: 100px;
  margin-bottom: 45px;
}

@media only screen and (max-width: 800px) {
  #con .conArea p {
    margin: 0px 0 20px 50px;
  }
}

#con .conArea a.btn {
  margin-left: 95px;
  display: block;
}

@media only screen and (max-width: 800px) {
  #con .conArea a.btn {
    margin-left: 40px;
  }
}

#con .conArea a.btn:hover img {
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#con .concept01,
#con .concept03 {
  margin-bottom: 80px;
}

@media only screen and (max-width: 800px) {
  #con .concept01,
  #con .concept03 {
    margin-bottom: 80px;
  }
}

#con .concept01 figure,
#con .concept03 figure {
  margin-right: 50px;
}

#con .concept02,
#con .concept04 {
  margin-bottom: 80px;
}

#con .concept02 .content,
#con .concept04 .content {
  margin: 0 auto 0 40px;
}

@media only screen and (max-width: 800px) {
  #con .concept02 .content,
  #con .concept04 .content {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 800px) {
  #con .concept02 figure,
  #con .concept04 figure {
    margin-right: 50px;
  }
}

#con .conArea2 {
  position: relative;
  z-index: 100;
  text-align: center;
  color: #000;
  margin-bottom: 87px;
}

@media only screen and (max-width: 800px) {
  #con .conArea2 {
    background: #fff;
    -webkit-transform: skewY(-13deg);
    transform: skewY(-13deg);
    z-index: 0;
    margin-top: -170px;
    margin-bottom: -55px;
  }
  #con .conArea2 .wrap {
    -webkit-transform: skewY(13deg);
    transform: skewY(13deg);
    padding: 170px 5% 80px;
  }
}

#con .conArea2__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 950px;
}

#con .whiteArea {
  background: #fff;
  padding: 60px 0;
  color: #000;
}

@media only screen and (max-width: 800px) {
  #con .whiteArea {
    padding: 50px 0;
  }
}

#con .whiteArea h3 {
  font-size: 2.6rem;
  margin-bottom: 20px;
  font-weight: normal;
}

@media only screen and (max-width: 800px) {
  #con .whiteArea h3 {
    font-size: 2rem;
  }
}

#con .bArea {
  padding: 60px 0 0;
}

@media only screen and (max-width: 800px) {
  #con .bArea {
    padding: 50px 0 0;
  }
}

#con .bArea h3 {
  font-size: 2.6rem;
  margin-bottom: 20px;
  font-weight: normal;
}

@media only screen and (max-width: 800px) {
  #con .bArea h3 {
    font-size: 2rem;
  }
}

.modalWin {
  text-align: center;
  background: #fff;
  max-width: 1100px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 60px;
  position: relative;
  border-left: 20px solid #b5b6b6;
}

@media only screen and (max-width: 800px) {
  .modalWin {
    padding: 30px 15px 15px;
    border-left: 5px;
  }
}

.modalWin .inner {
  max-width: 901px;
  margin: 0 auto;
}

.modalWin h3 {
  position: absolute;
  top: 0;
  left: 20px;
}

@media only screen and (max-width: 800px) {
  .modalWin h3 {
    display: none;
  }
}

.modalWin h4 {
  background: #b5b6b6;
  font-weight: normal;
  font-size: 2rem;
  color: #000;
  margin-bottom: 23px;
  padding: 12px 0 10px;
}

@media only screen and (max-width: 800px) {
  .modalWin h4 {
    margin-bottom: 18px;
  }
}

.modalWin h5 {
  font-size: 1.8rem;
  font-weight: normal;
  margin-bottom: 20px;
}

@media only screen and (max-width: 800px) {
  .modalWin h5 {
    margin-bottom: 15px;
    line-height: 1.5;
  }
}

.modalWin p {
  font-size: 1.4rem;
  line-height: 2;
}

.modalWin .cap {
  font-size: 1rem;
  line-height: 1.2;
  text-align: left;
}

#modal02.modalWin {
  border-left: 20px solid #668492;
}

@media only screen and (max-width: 800px) {
  #modal02.modalWin {
    border-left: 5px solid #668492;
  }
}

#modal02 h4 {
  background: #668492;
  color: #fff;
}

#modal03.modalWin {
  border-left: 20px solid #b3c5cf;
}

@media only screen and (max-width: 800px) {
  #modal03.modalWin {
    border-left: 5px solid #b3c5cf;
  }
}

#modal03 h4 {
  background: #b3c5cf;
}

#modal04.modalWin {
  border-left: 20px solid #565656;
}

@media only screen and (max-width: 800px) {
  #modal04.modalWin {
    border-left: 5px solid #565656;
  }
}

#modal04 h4 {
  background: #565656;
  color: #fff;
}

.mfp-bg {
  opacity: 0;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

/* overlay animate in */
.mfp-bg.mfp-ready {
  opacity: 0.8;
}

/* overlay animate out */
.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-wrap .mfp-content {
  opacity: 0;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

/* content animate it */
.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}

/* content animate out */
.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

@media only screen and (max-width: 800px) {
  .spSlide {
    overflow-y: hidden;
    overflow-x: scroll;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    text-align: center;
    position: relative;
  }
  .spSlide .swipe-icon {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 90px;
    -webkit-animation: horizontal 1s ease-in-out infinite alternate;
    animation: horizontal 1s ease-in-out infinite alternate;
  }
  .spSlide .swipe-icon img {
    max-width: 90px;
  }
  .spSlide figure {
    width: 800px;
    margin: 0 auto;
    text-align: center;
  }
  .spSlide figure img {
    width: auto;
    max-width: none;
    height: 100%;
    margin: 0 auto;
    text-align: center;
  }
}

.cap {
  font-size: 1.1rem;
}

@-webkit-keyframes horizontal {
  0% {
    -webkit-transform: translate(-30%, -50%);
    transform: translate(-30%, -50%);
  }
  100% {
    -webkit-transform: translate(-70%, -50%);
    transform: translate(-70%, -50%);
  }
}

@keyframes horizontal {
  0% {
    -webkit-transform: translate(-30%, -50%);
    transform: translate(-30%, -50%);
  }
  100% {
    -webkit-transform: translate(-70%, -50%);
    transform: translate(-70%, -50%);
  }
}

.bnrArea {
  background: #000;
  padding: 0px 0 60px;
}

@media only screen and (max-width: 800px) {
  .bnrArea {
    padding: 0 0 30px;
  }
}

.reserveBanner {
  margin: auto;
  padding-top: 20px;
  width: 90%;
  max-width: 500px;
  text-align: center;
  font-size: 18px;
}

.reserveBanner a {
  display: block;
  padding: 21px 0 19px;
  color: #fff;
  background: #b86e6e;
}

.entryBanner {
  margin: auto;
  padding-top: 20px;
  width: 90%;
  max-width: 500px;
  text-align: center;
  font-size: 18px;
}

.entryBanner a {
  display: block;
  padding: 21px 0 19px;
  color: #fff;
  background: #ad9d71;
}

.onlineBanner {
  margin: auto;
  padding-top: 20px;
  width: 90%;
  max-width: 500px;
  text-align: center;
  font-size: 18px;
}

.onlineBanner a {
  display: block;
  padding: 21px 0 19px;
  color: #fff;
  background: #6e9db8;
}