@charset "utf-8";



/* 右回転 */
@-webkit-keyframes r_spin {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes r_spin {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes r_spin {
    0% {-ms-transform: rotate(0deg);}
    100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes r_spin {
    0% {-o-transform: rotate(0deg);}
    100% {-o-transform: rotate(360deg);}
}
@keyframes r_spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
/* 左回転 */
@-webkit-keyframes l_spin {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes l_spin {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(-360deg);}
}
@-ms-keyframes l_spin {
    0% {-ms-transform: rotate(0deg);}
    100% {-ms-transform: rotate(-360deg);}
}
@-o-keyframes l_spin {
    0% {-o-transform: rotate(0deg);}
    100% {-o-transform: rotate(-360deg);}
}
@keyframes l_spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}


#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}


/* CSS Document */
html, body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

body {
  position: relative;
  overflow-x: hidden;
  margin: 0 auto;
  min-width: 1200px;
  background: url(common/images/background.gif) repeat;
  box-sizing: border-box;
  font-size: 0.9rem;
  line-height: 1.8rem;
  letter-spacing: 0.06em;
  font-family: "Yu Gothic";
  font-weight: 500;
	z-index:0;
  -webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 767px) {
  body {
    min-width: 100%;
  }
}
*::selection    {
  background: #d19c47;
  color:#fff;
}

*:focus{
  outline: none;
}

.pc {
  display: block;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp {
    display: block;
  }
}

img.res {
  width: 100%;
}

label {
  cursor: pointer;
  font-weight: bold;
}

div.sideL {
  position: fixed;
  width: 271px;
  height: 100%;
  background: url(common/images/side001.png) repeat ;
  z-index: 10;
}
@media screen and (max-width: 1199px) {
  div.sideL {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  div.sideL {
    display: none;
  }
}
div.sideR {
  position: fixed;
  width: 271px;
  height: 100%;
  background: url(common/images/side002.png) repeat ;
  z-index: 10;
}
@media screen and (max-width: 1199px) {
  div.sideR {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  div.sideR {
    display: none;
  }
}

.sideL {
  position: fixed;
  top: 0;
  left: -190px;
}

.sideR {
  position: fixed;
  top: 0;
  right: -190px;
}

.sideL nav ul {
  position: relative;
}

.sideL nav ul li {
  position: absolute;
}

.sideL nav ul li:nth-child(1) {
  top: 220px;
  left: -60px;
  z-index: 3;
}
.sideL nav ul li:nth-child(2) {
  top: 300px;
  left: -50px;
  z-index: 2;
}
.sideL nav ul li:nth-child(3) {
  top: 358px;
  left: -60px;
  z-index: 1;
}
.sideL nav ul li:nth-child(4) {
  top: 430px;
  left: -70px;
}
.sideL nav ul li:nth-child(5) {
  top: 498px;
  left: -50px;
}

.sideL nav ul li {
  transition: 0.6s;
  -webkit-transition: 0.6s;
}

.sideL nav ul li:hover{
  transform: translateX(20px);
}

.arrow{
position: relative;
display: inline-block;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
}
.arrow::before,
.arrow::after{
position: absolute;
top: 0px;
bottom: 0;
right: -168px;
margin: auto;
content: "";
vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .arrow::before,
  .arrow::after {
    display: none;
  }
}

.arrowDesign::before{
left: 4px;
box-sizing: border-box;
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 6px solid #b89774;
}
.arrowDesign::after{
left: 0;
width: 8px;
height: 6px;
border-left: 4px solid #b89774;
}

@font-face {
	font-family: 'harenosora';
	src: url(common/fonts/harenosora.otf);
}
@media screen and (max-width: 767px) {
  body section {
    overflow: hidden;
  }
}
body section h2 {
  margin-bottom: 30px;
  color: #71581f;
	font-family: "harenosora";
  font-size: 30px;
  letter-spacing: 0;
  text-align: center;
}
@media screen and (max-width: 767px) {
  body section h2 {
    margin-bottom: 1rem;
    font-size: 1.3rem;
  }
}

body section h2::before {
  content: url(common/images/orn006.png);
  margin: 10px;
  position: relative;
  top: 3px;
}
@media screen and (max-width: 767px) {
  body section h2::before {
    content: '';
    display: inline-block;
    background: url(common/images/orn006.png) no-repeat;
    background-size: contain;
    width: 40px;
    height: 18px;
    margin: 2px 6px;
    position: relative;
    top: 3px;
  }
}

body section h2::after {
  content: url(common/images/orn007.png);
  margin: 10px;
  position: relative;
  top: 3px;
}
@media screen and (max-width: 767px) {
  body section h2::after {
    content: '';
    display: inline-block;
    background: url(common/images/orn007.png) no-repeat;
    background-size: contain;
    width: 40px;
    height: 18px;
    margin: 2px 6px;
    position: relative;
    top: 3px;
  }
}

.end {
  margin: 0 !important;
}

.fly {
    background-color: #3169d1;
    color: #fff !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
    margin: 20px 0 0 0;
}
.fly:hover {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
}

/* その他アニメーション */

.purun {
  animation: purun 10s ease-in-out 0s infinite normal;
  animation-delay: 10s;
  -moz-animation-delay: 10s;
  -webkit-animation-delay: 10s;
}

@keyframes purun {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  90%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  92%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  94%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  96%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  98%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

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

article {
  height: 100%;
}

header {
  overflow: hidden;
  position: relative;
  padding-top: 60px;
  background: url(common/images/key_bg.gif) repeat;
  width: 100%;
  height: 700px;
}
@media screen and (max-width: 767px) {
  header {
    overflow: hidden;
    position: relative;
    padding: 0;
    height: 500px;
  }
}

header p {
  position: absolute;
  top: 50%;
  left: 50%;
}
@media screen and (max-width: 767px) {
  header p {
    position: static;
    top: inherit;
    left: auto;
  }
}

header span {
  display: block;
  -webkit-animation: vertical 3s ease-in-out infinite alternate;
  -moz-animation: 0s;
}

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

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

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

@keyframes usagi1 {
  0%   { transform: translate(0%, 0%);
  -webkit-transform-origin:right bottom 0; }
  5%   { transform: translate(0%, 0%) rotate(0deg);
  -webkit-transform-origin:right bottom 0; }
  25%  { transform: translate(0%, 0%) rotate(0deg);
  -webkit-transform-origin:right bottom 0; }
  30%  { transform: translate(-3%, 0%) rotate(-3deg);
  -webkit-transform-origin:right bottom 0; }
  35%  { transform: translate(-5%, 0%) rotate(-5deg);
  -webkit-transform-origin:right bottom 0; }
  45%  { transform: translate(5%, 0%) rotate(5deg);
  -webkit-transform-origin:right bottom 0; }
  50%  { transform: translate(10%, 0%) rotate(10deg);
  -webkit-transform-origin:right bottom 0; }
  60%  { transform: translate(-5%, 0%) rotate(-5deg);
  -webkit-transform-origin:right bottom 0; }
  65%  { transform: translate(-7%, 0%) rotate(-7deg);
  -webkit-transform-origin:right bottom 0; }
  75%  { transform: translate(0%, 0%) rotate(0deg);
  -webkit-transform-origin:right bottom 0; }
  100% { transform: translate(0%, 0%) rotate(0deg);
  -webkit-transform-origin:right bottom 0; }
}

@media screen and (max-width: 767px) {
  @keyframes usagi1 {
    0%   { transform: translate(0%, 0%);
    -webkit-transform-origin:right bottom 0; }
    5%   { transform: translate(0%, 0%) rotate(0deg);
    -webkit-transform-origin:right bottom 0; }
    25%  { transform: translate(0%, 0%) rotate(0deg);
    -webkit-transform-origin:right bottom 0; }
    30%  { transform: translate(-1%, 0%) rotate(-1deg);
    -webkit-transform-origin:right bottom 0; }
    35%  { transform: translate(-2%, 0%) rotate(-2deg);
    -webkit-transform-origin:right bottom 0; }
    45%  { transform: translate(2%, 0%) rotate(2deg);
    -webkit-transform-origin:right bottom 0; }
    50%  { transform: translate(3%, 0%) rotate(3deg);
    -webkit-transform-origin:right bottom 0; }
    60%  { transform: translate(-2%, 0%) rotate(-2deg);
    -webkit-transform-origin:right bottom 0; }
    65%  { transform: translate(-1%, 0%) rotate(-1deg);
    -webkit-transform-origin:right bottom 0; }
    75%  { transform: translate(0%, 0%) rotate(0deg);
    -webkit-transform-origin:right bottom 0; }
    100% { transform: translate(0%, 0%) rotate(0deg);
    -webkit-transform-origin:right bottom 0; }
  }
}

@keyframes usagi2 {
  0%   { transform: translate(0%, 0%);
  -webkit-transform-origin:left bottom 0; }
  5%   { transform: translate(0%, 0%) rotate(0deg);
  -webkit-transform-origin:left bottom 0; }
  25%  { transform: translate(2%, 0%) rotate(2deg);
  -webkit-transform-origin:left bottom 0; }
  30%  { transform: translate(-3%, 0%) rotate(-3deg);
  -webkit-transform-origin:left bottom 0; }
  35%  { transform: translate(-5%, 0%) rotate(-5deg);
  -webkit-transform-origin:left bottom 0; }
  45%  { transform: translate(5%, 0%) rotate(5deg);
  -webkit-transform-origin:left bottom 0; }
  50%  { transform: translate(3%, 0%) rotate(3deg);
  -webkit-transform-origin:left bottom 0; }
  60%  { transform: translate(-1%, 0%) rotate(-1deg);
  -webkit-transform-origin:left bottom 0; }
  65%  { transform: translate(-2%, 0%) rotate(-2deg);
  -webkit-transform-origin:left bottom 0; }
  75%  { transform: translate(0%, 0%) rotate(0deg);
  -webkit-transform-origin:left bottom 0; }
  100% { transform: translate(0%, 0%) rotate(0deg);
  -webkit-transform-origin:left bottom 0; }
}

@keyframes shake {
  0%   { transform: translate(0%, 0%); }
  5%   { transform: translate(10%, 0%) rotate(10deg); }
  25%  { transform: translate(20%, 0%) rotate(20deg); }
  30%  { transform: translate(-10%, 0%) rotate(-10deg); }
  35%  { transform: translate(-15%, 0%) rotate(-15deg); }
  45%  { transform: translate(10%, 0%) rotate(10deg); }
  50%  { transform: translate(15%, 0%) rotate(15deg); }
  60%  { transform: translate(-5%, 0%) rotate(-5deg); }
  65%  { transform: translate(-7%, 0%) rotate(-7deg); }
  75%  { transform: translate(0%, 0%) rotate(0deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}

/* --------------- 点滅 ------------------ */
.blink {
  -webkit-animation:blink 5s ease-in-out alternate;
    -moz-animation:blink 5s ease-in-out alternate;
    animation:blink 5s ease-in-out alternate;
}
/* 点滅 */
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
/* --------------------------------------- */
header h1 {
  position: absolute;
  bottom: 40px;
  left: 50%;
  margin-left: -76px;
}
@media screen and (max-width: 767px) {
  header .usagiF {
    position: absolute;
    bottom: 0;
    left: 6%;
    height: auto;
    width: 80px
  }
}

header .key001 {
  margin-top: -60px;
  margin-left: -410px;
  z-index: 7;
}
@media screen and (max-width: 767px) {
  header .key001 {
    width: 100%;
  }
  header .key001 img {
    width: 100%;
  }
}

header .key001a {
  margin-top: -120px;
  margin-left: -417px;
  z-index: 7;
  animation: usagi1 5.5s linear;
  animation-iteration-count: infinite;
  animation-delay: 3.4s;
  -moz-animation: 0s;
  -webkit-animation-delay: 3.4s;
}
@media screen and (max-width: 767px) {
  header .key001a {
    position: absolute;
    top: -13%;
    left: -18%;
    width: 100%;
    padding-right: 30%;
    box-sizing: border-box;
  }
  header .key001a img {
    padding: 0 20%;
    width: 100%;
    box-sizing: border-box;
  }
}

header .key001b {
  margin-top: -120px;
  margin-left: -355px;
  z-index: 7;
  animation: usagi2 6.5s linear;
  animation-iteration-count: infinite;
  animation-delay: 5s;
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 5s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key001b {
    position: absolute;
    top: -13%;
    left: 22%;
    width: 100%;
    padding-right: 30%;
    box-sizing: border-box;
  }
  header .key001b img {
    padding: 0 30%;
    width: 100%;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 767px) {
  header .usagiM {
    position: absolute;
    bottom: 0;
    right: 6%;
    height: auto;
    width: 70px
  }
}

header .key002 {
  margin-top: -73px;
  margin-left: 280px;
  z-index: 7;
}
@media screen and (max-width: 767px) {
  header .key002 {
    width: 100%;
  }
  header .key002 img {
    width: 100%;
  }
}

header .key002a {
  margin-top: -142px;
  margin-left: 293px;
  z-index: 7;
  animation: usagi1 10s linear;
  animation-iteration-count: infinite;
  animation-delay: 8s;
  -moz-animation-delay: 0s;
  -webkit-animation-delay: 8s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key002a {
    position: absolute;
    top: -13%;
    left: -8%;
    width: 100%;
    padding-right: 30%;
    box-sizing: border-box;
  }
  header .key002a img {
    padding: 0 30%;
    width: 100%;
    box-sizing: border-box;
  }
}

header .key002b {
  margin-top: -138px;
  margin-left: 355px;
  z-index: 7;
  animation: usagi2 0s linear;
}
@media screen and (max-width: 767px) {
  header .key002b {
    position: absolute;
    top: -12%;
    left: 42%;
    width: 100%;
    padding-right: 30%;
    box-sizing: border-box;
  }
  header .key002b img {
    padding: 0 25%;
    width: 100%;
    box-sizing: border-box;
  }
}

header .key003 {
  margin-top: -229px;
  margin-left: -12px;
  animation: shake 2.5s linear 0s 1;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key003 {
    position: absolute;
    top: 5%;
    margin-left: -5%;
  }
  header .key003 img {
    width: 11px;
  }
}

@media screen and (max-width: 767px) {
  header .stick {
    position: absolute;
    padding-top: 0;
    left: 50%;
    width: 150px;
    height: 95%;
  }
}

header .key004 {
  margin-top: -179px;
  margin-left: -55px;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key004 {
    position: absolute;
    top: 10%;
    left: -16%;
  }
}

header .key005 {
  margin-top: -160px;
  margin-left: 34px;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key005 {
    position: absolute;
    top: 12%;
    left: 10%;
  }
  header .key006 img {
    width: 13%;
  }
}

header .key006 {
  margin-top: -144px;
  margin-left: -33px;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key006 {
    position: absolute;
    top: 14%;
    left: -4%;
  }
  header .key006 img {
    width: 30%;
  }
}
@media screen and (max-width: 767px) {
  header .textPosition {
    position: absolute;
    top: 110px;
    left: 50%;
    margin-left: -160px;
    padding: 25% 0;
    min-width: 320px;
  }
}

header .key007 {
  margin-top: -102px;
  margin-left: -226px;
  -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 1.5s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key007 {
    position: absolute;
    top: 0;
    left: 4%;
  }
  header .key007 img {
    width: 33%;
  }
}

header .key008 {
  margin-top: -65px;
  margin-left: -172px;
  -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 1.7s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key008 {
    position: absolute;
    top: 0;
    left: 13%;
  }
  header .key008 img {
    width: 36%;
  }
}

header .key009 {
  margin-top: -90px;
  margin-left: -137px;
  -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 2s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key009 {
    position: absolute;
    top: 0;
    left: 22%;
  }
  header .key009 img {
    width: 43%;
  }
}

header .key010 {
  margin-top: -70px;
  margin-left: -94px;
  -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 1.5s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key010 {
    position: absolute;
    top: 0;
    left: 32%;
  }
  header .key010 img {
    width: 36%;
  }
}

header .key011 {
  margin-top: -87px;
  margin-left: -52px;
  -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 2s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key011 {
    position: absolute;
    top: 0;
    left: 41%;
  }
  header .key011 img {
    width: 26%;
  }
}

header .key012 {
  margin-top: -63px;
  margin-left: -13px;
  -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 1.5s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key012 {
    position: absolute;
    top: 0;
    left: 48%;
  }
  header .key012 img {
    width: 20%;
  }
}

header .key013 {
  margin-top: -143px;
  margin-left: 29px;
  -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 1.7s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key013 {
    position: absolute;
    top: -30px;
    left: 55%;
  }
  header .key013 img {
    width: 90%;
  }
}

header .key014 {
  margin-top: -95px;
  margin-left: 120px;
  -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 2s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key014 {
    position: absolute;
    top: -16px;
    left: 71%;
  }
  header .key014 img {
    width: 70%;
  }
}

header .key015 {
  margin-top: -65px;
  margin-left: 190px;
  -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 1.5s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key015 {
    position: absolute;
    top: 0;
    left: 88%;
  }
  header .key015 img {
    width: 30%;
  }
}

header .key016 {
  margin-top: -9px;
  margin-left: -64px;
  -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 1.7s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key016 {
    position: absolute;
    top: 42px;
    left: 39%;
  }
  header .key016 img {
    width: 30%;
  }
}

header .key017 {
  margin-top: 1px;
  margin-left: -107px;
  -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 1.7s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key017 {
    position: absolute;
    top: 47px;
    left: 26%;
  }
  header .key017 img {
    width: 100%;
  }
}

header .key018 {
  margin-top: -20px;
  margin-left: -26px;
  -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 2s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key018 {
    position: absolute;
    top: 42px;
    left: 46%;
  }
  header .key018 img {
    width: 30%;
  }
}

header .key019 {
  margin-top: -12px;
  margin-left: 12px;
  -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 1.5s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key019 {
    position: absolute;
    top: 42px;
    left: 56%;
  }
  header .key019 img {
    width: 28%;
  }
}

header .key020 {
  margin-top: -10px;
  margin-left: 46px;
  -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 2s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key020 {
    position: absolute;
    top: 42px;
    left: 64%;
  }
  header .key020 img {
    width: 30%;
  }
}

header .key021 {
  margin-top: 40px;
  margin-left: -246px;
  -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 1.5s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key021 {
    position: absolute;
    top: 76px;
    left: 2%;
  }
  header .key021 img {
    width: 42%;
  }
}

header .key022 {
  margin-top: 45px;
  margin-left: -196px;
  -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 1.7s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key022 {
    position: absolute;
    top: 70px;
    left: 13%;
  }
  header .key022 img {
    width: 42%;
  }
}

header .key023 {
  margin-top: 53px;
  margin-left: -156px;
  -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 2s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key023 {
    position: absolute;
    top: 76px;
    left: 21%;
  }
  header .key023 img {
    width: 42%;
  }
}

header .key024 {
  margin-top: 47px;
  margin-left: -116px;
  -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 1.5s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key024 {
    position: absolute;
    top: 76px;
    left: 30%;
  }
  header .key024 img {
    width: 42%;
  }
}

header .key025 {
  margin-top: 45px;
  margin-left: -66px;
  -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 1.7s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key025 {
    position: absolute;
    top: 70px;
    left: 40%;
  }
  header .key025 img {
    width: 42%;
  }
}

header .key026 {
  margin-top: 47px;
  margin-left: -18px;
  -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 1.7s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key026 {
    position: absolute;
    top: 83px;
    left: 48%;
  }
  header .key026 img {
    width: 42%;
  }
}

header .key027 {
  margin-top: 42px;
  margin-left: 32px;
  -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 2s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key027 {
    position: absolute;
    top: 76px;
    left: 58%;
  }
  header .key027 img {
    width: 40%;
  }
}

header .key028 {
  margin-top: 47px;
  margin-left: 74px;
  -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 1.5s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key028 {
    position: absolute;
    top: 76px;
    left: 65%;
  }
  header .key028 img {
    width: 42%;
  }
}

header .key029 {
  margin-top: 57px;
  margin-left: 130px;
  -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 1.7s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key029 {
    position: absolute;
    top: 76px;
    left: 75%;
  }
  header .key029 img {
    width: 20%;
  }
}

header .key030 {
  margin-top: 41px;
  margin-left: 160px;
  -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 2s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key030 {
    position: absolute;
    top: 76px;
    left: 82%;
  }
  header .key030 img {
    width: 30%;
  }
}

header .key031 {
  margin-top: 35px;
  margin-left: 198px;
  -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
  -webkit-animation-duration: 1.5s;
  -moz-animation: 0s;
}
@media screen and (max-width: 767px) {
  header .key031 {
    position: absolute;
    top: 76px;
    left: 88%;
  }
  header .key031 img {
    width: 50%;
  }
}
header .keyPop {
  position: relative;
  margin-top: -300px;
  margin-left: -320px;
  z-index: 3;
}

header .key032 {
  margin-top: 103px;
  margin-left: -234px;
}
@media screen and (max-width: 767px) {
  header .key032{
    position: absolute;
    top: 210px;
    left: 50%;
  }
  header .key032 img {
        margin-left: -40%;
    width: 80%;
  }
}

@media screen and (max-width: 767px) {
  header .key033 {
    position: absolute;
    bottom: 30px;
    left: 50%;
  }
  header .key033 img {
    margin-left: -42px;
    height: 18px;
  }
}

header .key034 {
  top: 100%;
  left: 50%;
  margin-top: -219px;
  margin-left: -1300px;
  z-index: 6;
}
@media screen and (max-width: 767px) {
  header .key034 {
    position: absolute;
    top: 410px;
    left: -280px;
  }
  header .key034 img {
    height: 100px;
  }
}

header .key035 {
  top: 100%;
  right: 50%;
  margin-top: -219px;
  margin-left: 380px;
  z-index: 6;
}
@media screen and (max-width: 767px) {
  header .key035 {
    position: absolute;
    top: 410px;
    right: -280px;
  }
  header .key035 img {
    height: 100px;
  }
}

header .key036 {
  margin-top: 342px;
  margin-left: -12px;
}
@media screen and (max-width: 767px) {
  header .key036 {
    position: absolute;
    top: 93%;
    left: 50%;
  }
  header .key036 img {
    margin-left: -11px;
  }
}

header .key037 {
  margin-top: -610px;
  margin-left: -1210px;
  z-index: 5;
}
@media screen and (max-width: 767px) {
  header .key037 {
    display: none;
  }
}

header .key038 {
  margin-top: -500px;
  margin-left: -1070px;
  z-index: 4;
}
@media screen and (max-width: 767px) {
  header .key038 {
    display: none;
  }
}

header .key039 {
  margin-top: -450px;
  margin-left: -970px;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  header .key039 {
    display: none;
  }
}

header .key040 {
  margin-top: -430px;
  margin-left: -900px;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  header .key040 {
    display: none;
  }
}

header .key041 {
  margin-top: -350px;
  margin-left: -800px;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  header .key041 {
    display: none;
  }
}

header .key042 {
  margin-top: -590px;
  margin-left: 336px;
  z-index: 5;
}
@media screen and (max-width: 767px) {
  header .key042 {
    display: none;
  }
}

header .key043 {
  margin-top: -450px;
  margin-left: 340px;
  z-index: 4;
}
@media screen and (max-width: 767px) {
  header .key043 {
    display: none;
  }
}

header .key044 {
  margin-top: -420px;
  margin-left: 302px;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  header .key044 {
    display: none;
  }
}

header .key045 {
  margin-top: -410px;
  margin-left: 258px;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  header .key045 {
    display: none;
  }
}

header .key046 {
  margin-top: -360px;
  margin-left: 240px;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  header .key046 {
    display: none;
  }
}

header .key047 {
  margin-top: -850px;
  margin-left: -1100px;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  header .key047 {
    display: none;
  }
}

header .key048 {
  display: none
}
@media screen and (max-width: 767px) {
  header .key048 {
    display: block;
    position: absolute;
    top: -140px;
    left: -210px;
  }
  header .key048 img {
    width: 300px;
  }
}

header .key049 {
  display: none
}
@media screen and (max-width: 767px) {
  header .key049 {
    display: block;
    position: absolute;
    top: -130px;
    right: -210px;
  }
  header .key049 img {
    width: 300px;
  }
}



@media screen and (max-width: 767px) {
  header .key001,
  header .key001a,
  header .key001b,
  header .key002,
  header .key002a,
  header .key002b,
  header .key003,
  header .key004,
  header .key005,
  header .key006,
  header .key007,
  header .key008,
  header .key009,
  header .key010,
  header .key011,
  header .key012,
  header .key013,
  header .key014,
  header .key015,
  header .key016,
  header .key017,
  header .key018,
  header .key019,
  header .key020,
  header .key021,
  header .key022,
  header .key023,
  header .key024,
  header .key025,
  header .key026,
  header .key027,
  header .key028,
  header .key029,
  header .key030,
  header .key031,
  header .key032,
  header .key033,
  header .key034,
  header .key035,
  header .key036,
  header .key037,
  header .key038,
  header .key039,
  header .key040,
  header .key041,
  header .key042,
  header .key043,
  header .key044,
  header .key045,
  header .key046,
  header .key047 {
    margin-top: 0;
    margin-left: 0;
  }
  header .key003,
  header .key004,
  header .key005,
  header .key006,
  header .key007,
  header .key008,
  header .key009,
  header .key010,
  header .key011,
  header .key012,
  header .key013,
  header .key014,
  header .key015,
  header .key016,
  header .key018,
  header .key019,
  header .key020,
  header .key021,
  header .key022,
  header .key023,
  header .key024,
  header .key025,
  header .key026,
  header .key027,
  header .key028,
  header .key029,
  header .key030,
  header .key031 {
    width: 20%;
  }
  header .key037 img,
  header .key038 img,
  header .key039 img,
  header .key040 img,
  header .key041 img,
  header .key042 img,
  header .key043 img,
  header .key044 img,
  header .key045 img,
  header .key046 img {
    height: 500px;
  }
}

header .keySubText {
  display: none;
}

@media screen and (max-width: 767px) {
  header .keySubText {
    display: block;
    position: absolute;
    top: 53%;
    left: 50%;
    margin-left: -60px;
  }
  header .keySubText img {
    width: 120px;
  }
}

header .buttonA {
  margin-top: 152px;
  margin-left: -107.5px;
}
@media screen and (max-width: 767px) {
  header .buttonA {
    margin-top: 0;
    margin-left: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: -110px;
    margin-left: -63px;
  }
}

header .buttonA a {
  display: block;
  padding-top: 14px;
  width: 215px;
  height: 42px;
  background: url(common/images/button_a.png) no-repeat;
  color: #fff;
  text-align: center;
  -moz-transition: -moz-transform 0s linear;
    -webkit-transition: -webkit-transform 0.2s linear;
    -ms-transition: -ms-transform 0.2s linear;
    transition: transform 0.2s linear;
}
@media screen and (max-width: 767px) {
  header .buttonA a {
    padding: 2px 20px 2px;
    width: 100%;
    height: auto;
    font-size: 0.6rem;
    background-size: contain;
    box-sizing: border-box;
  }
}

header .buttonA a:hover {
  -webkit-transform: scale(1.1);
      -moz-transform: scale(0);
      -ms-transform: scale(1.1);
      transform: scale(1.1);
}


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

section {
	overflow: hidden;
  clear: both;
  padding: 60px 0 0;
}
@media screen and (max-width: 767px) {
  section {
    clear: both;
    padding: 1.6em 3% 0;
  }
  section p {
    font-size: 0.8rem;
    line-height: 1.6rem;
  }
}

section .inner {
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
}
@media screen and (max-width: 767px) {
  section .inner {
    width: 100%;
  }
}

section .inner .content {
  margin: 2rem 0 0;
}
@media screen and (max-width: 767px) {
  section .inner .content {
    margin: 0;
  }
}

section .inner .content .iconA {
  margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
  section .inner .content .iconA img {
    height: 50px;
  }
}

section .inner .content .keyText {
  margin: 0 0 3rem;
  color: #705118;
  line-height: 180%;
  text-align: center;
}
@media screen and (max-width: 767px) {
  section .inner .content .keyText {
    margin-bottom: 1.6rem;
  }
}

@media screen and (max-width: 767px) {
  section#webdesign {
    padding: 2rem 3% 0;
  }
}

section#webdesign .inner {

}
@media screen and (max-width: 767px) {
  section#webdesign .inner {
    width: 100%;
  }
}

section#webdesign .textArea {
  position: relative;
  margin: 0 auto;
  padding: 3rem;
  max-width: 800px;
  background: url(common/images/background02.gif) no-repeat;
  background-size: cover;
  color: #5b440f;
  font-size: 1.1rem;
  line-height: 2rem;
  font-family: "Sawarabi Mincho";
  text-align: center;
  border-radius: 20px;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  section#webdesign .textArea {
    padding: 1em;
  }
}

section#webdesign .textArea p {
  line-height: 2rem;
}
@media screen and (max-width: 767px) {
  section#webdesign .textArea p {
    line-height: 1.5rem;
  }
}

section#webdesign .textArea .border {
  padding: 5em 2em 7em;
  border: 4px double #dac4a3;
}
@media screen and (max-width: 767px) {
  section#webdesign .textArea .border {
    padding: 3em 1em 5em;
  }
}

section#webdesign .textArea h3 {
  margin: 0 0 2em;
  font-size: 2rem;
  line-height: 2rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  section#webdesign .textArea h3 {
    font-size: 1.6rem;
    line-height: 1.6rem;
  }
}
@media screen and (max-width: 531px) {
  section#webdesign .textArea h3 {
    font-size: 1.4rem;
    line-height: 1.4rem;
  }
}

section#webdesign .textArea h3 span {
  position: relative;
}

section#webdesign .textArea h3 span::before {
  content:'';
  position: absolute;
  top: 0;
  left: -78px;
  width: 69px;
  height: 35px;
  background: url(common/images/orn020.png) 0 50% no-repeat;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  section#webdesign .textArea h3 span::before {
    width: 59px;
    height: 30px;
  }
}
@media screen and (max-width: 531px) {
  section#webdesign .textArea h3 span::before {
    display: none;
  }
}

section#webdesign .textArea h3 span::after {
  content:'';
  position: absolute;
  top: 0;
  right: -78px;
  width: 69px;
  height: 35px;
  background: url(common/images/orn021.png) 0 50% no-repeat;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  section#webdesign .textArea h3 span::after {
    width: 59px;
    height: 30px;
  }
}
@media screen and (max-width: 531px) {
  section#webdesign .textArea h3 span::after {
    display: none;
  }
}

section#webdesign .textArea span.span1 {
  padding: 0 0.1em;
  color: #b1450f;
  font-size: 1.7rem;
  line-height: 3rem;
}
@media screen and (max-width: 767px) {
  section#webdesign .textArea span.span1 {
    font-size: 1.4rem;
    line-height: 2rem;
  }
}
@media screen and (max-width: 531px) {
  section#webdesign .textArea span.span1 {
    font-size: 1.3rem;
    line-height: 1.8rem;
  }
}

section#webdesign .textArea span.span2 {
  padding: 0 0.1em;
  text-decoration: underline;
}

section#webdesign .textArea .orn1 {
  position: absolute;
  bottom: 80px;
  right: 55px;
}
@media screen and (max-width: 767px) {
  section#webdesign .textArea .orn1 {
    bottom: 50px;
    right: 0px;
  }
}

section#webdesign .textArea .orn2 {
  position: absolute;
  bottom: 108px;
  right: -80px;
}
@media screen and (max-width: 767px) {
  section#webdesign .textArea .orn2 {
    bottom: 50px;
    right: 0px;
  }
  section#webdesign .textArea .orn2 img {
    position: relative;
    right: -40px;
    width: 60px;
  }
}

section#webdesign .textArea .orn3 {
  position: absolute;
  top: -100px;
  left: -100px;
}
@media screen and (max-width: 767px) {
  section#webdesign .textArea .orn3 {
    top: -35px;
    left: -30px;
  }
}

section#webdesign .textArea .orn4 {
  position: absolute;
  top: 180px;
  left: -100px;
}
@media screen and (max-width: 767px) {
  section#webdesign .textArea .orn4 {
    top: 110px;
    left: -40px;
  }
}

section#webdesign .textArea .orn5 {
  position: absolute;
  top: -120px;
  right: -300px;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  section#webdesign .textArea .orn5 {
    display: none;
  }
}
section#webdesign .textArea .orn5 img {
  -webkit-animation: r_spin 335s linear infinite;
    -moz-animation: r_spin 335s linear infinite;
    -ms-animation: r_spin 335s linear infinite;
    -o-animation: r_spin 335s linear infinite;
    animation: r_spin 335s linear infinite;
}

section#webdesign .textArea .orn6 {
  position: absolute;
  top: 550px;
  right: -270px;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  section#webdesign .textArea .orn6 {
    display: none;
  }
}
section#webdesign .textArea .orn6 img {
  -webkit-animation: r_spin 15s linear infinite;
    -moz-animation: r_spin 15s linear infinite;
    -ms-animation: r_spin 15s linear infinite;
    -o-animation: r_spin 15s linear infinite;
    animation: r_spin 15s linear infinite;
}

section#webdesign .textArea .orn7 {
  position: absolute;
  bottom: -130px;
  right: -250px;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  section#webdesign .textArea .orn7 {
    display: none;
  }
}
section#webdesign .textArea .orn7 img {
  -webkit-animation: r_spin 235s linear infinite;
    -moz-animation: r_spin 235s linear infinite;
    -ms-animation: r_spin 235s linear infinite;
    -o-animation: r_spin 235s linear infinite;
    animation: r_spin 235s linear infinite;
}
section#webdesign .textArea .orn8 {
  position: absolute;
  top: 260px;
  left: -320px;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  section#webdesign .textArea .orn8 {
    display: none;
  }
}
section#webdesign .textArea .orn8 img {
  -webkit-animation: l_spin 25s linear infinite;
    -moz-animation: l_spin 25s linear infinite;
    -ms-animation: l_spin 25s linear infinite;
    -o-animation: l_spin 25s linear infinite;
    animation: l_spin 25s linear infinite;
}
section#webdesign .textArea .orn9 {
  position: absolute;
  bottom: -10px;
  left: -350px;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  section#webdesign .textArea .orn9 {
    display: none;
  }
}
section#webdesign .textArea .orn9 img {
  -webkit-animation: l_spin 365s linear infinite;
    -moz-animation: l_spin 365s linear infinite;
    -ms-animation: l_spin 365s linear infinite;
    -o-animation: l_spin 365s linear infinite;
    animation: l_spin 365s linear infinite;
}

section#webdesign .textArea .orn1 img,
section#webdesign .textArea .orn2 img,
section#webdesign .textArea .orn6 img,
section#webdesign .textArea .orn7 img {
  width: 80%;
}
@media screen and (max-width: 767px) {
  section#webdesign .textArea .orn1 img,
  section#webdesign .textArea .orn2 img,
  section#webdesign .textArea .orn3 img,
  section#webdesign .textArea .orn4 img {
    width: 50%;
  }
}

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

section#webdesign .textArea .orn2 {
  animation: horizontal 1.2s ease-in-out infinite alternate;
}
section#webdesign .textArea .orn2 img {
  animation: vertical 1.3s ease-in-out infinite alternate;
}
section#webdesign .textArea .orn3 {
  animation: horizontal 1.5s ease-in-out infinite alternate;
}
section#webdesign .textArea .orn3 img {
  animation: vertical 1.8s ease-in-out infinite alternate;
}
section#webdesign .textArea .orn4 {
  animation: horizontal 1.2s ease-in-out infinite alternate;
}
section#webdesign .textArea .orn4 img {
  animation: vertical 1.5s ease-in-out infinite alternate;
}

section #slider {
  clear: both;
}

section #slider h3 {
  margin: 0 auto 40px;
  text-align: center;
  color: #71581f;
  font-family: "harenosora";
  font-size: 30px;
  letter-spacing: 0;
}
@media screen and (max-width: 767px) {
  section #slider h3 {
    margin: 0 auto 1em;
    font-size: 1.3em;
  }
}

section #slider h3::before {
  content: url(common/images/orn004.png);
  margin: 10px;
  position: relative;
  top: -5px;
}
@media screen and (max-width: 767px) {
  section #slider h3::before {
    content: '';
display: inline-block;
background: url(common/images/orn004.png) no-repeat;
background-size: contain;
width: 40px;
height: 10px;
margin: 2px 6px;
position: relative;
top: 3px;
  }
}

section #slider h3::after {
  content: url(common/images/orn005.png);
  margin: 10px;
  position: relative;
  top: -5px;
}
@media screen and (max-width: 767px) {
  section #slider h3::after {
    content: '';
display: inline-block;
background: url(common/images/orn005.png) no-repeat;
background-size: contain;
width: 40px;
height: 10px;
margin: 2px 6px;
position: relative;
top: 3px;
  }
}

section #slider ul,
section #slider li,
section #slider2 ul,
section #slider2 li {
	list-style: none;
	margin: 0;
	padding: 0;
}

#slider img,
#slider2 img {
    display: block;
    margin-right: 10px;
    width: 300px;
    height: 157px;
}
@media screen and (max-width: 767px) {
  #slider img,
  #slider2 img {
      display: block;
      margin-right: 10px;
      width: 229px;
      height: 120px;
  }
}

section #slider {
  margin-bottom: 10px;
}

/* SUBKEY design */
section#explanation01 {
  margin: 120px 0 0;
  padding: 6rem 0;
  width: 100%;
  font-size: 1rem;
  background: url(common/images/background04.png) repeat fixed;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  section#explanation01 {
    margin: 3% 0 0;
    padding: 2rem 3%;
    background: url(common/images/background04.png) repeat fixed;
    background-size: 300%;
  }
}
section#explanation01 .inner {
  margin: 0 auto;
  background: #f9f7f5 url(common/images/grunge_pink_l.gif) no-repeat;
  box-sizing: border-box;
}
section#explanation01 .inner .content{
  padding: 6% 10% 8%;
}
@media screen and (max-width: 767px) {
  section#explanation01 .inner .content{
    padding: 2rem 6% 2rem;
  }
  section#explanation01 .inner .content.sppd{
    padding: 2rem 6% 2rem;
  }
}
section#explanation01 .inner.radius {
  border-radius: 15px;
}
section#explanation01 p span {
  font-weight: bold;
  font-size: 1.1rem;
}
section#explanation01 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
section#explanation01 ul.col2 {
  margin: 0 0 3.2rem;
}
@media screen and (max-width: 767px) {
  section#explanation01 ul.col2 {
    margin: 0 0 2rem;
  }
}
section#explanation01 ul.col2 li {
  width: calc(100% / 2 - 1rem);
    text-align: center;
    font-family: "harenosora";
}
@media screen and (max-width: 767px) {
  section#explanation01 ul.col2 li {
    margin: 0 0 1.4rem;
    width: 100%;
  }
  section#explanation01 ul.col2 li:last-child {
    margin: 0;
  }
}
section#explanation01 ul.col2 li p:nth-child(1) {
  position: relative;
  margin: 0 0 1.5rem;
  display: inline-block;
  color: #71581f;
  font-size: 1.4rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  section#explanation01 ul.col2 li p:nth-child(1) {
    margin: 0 0 1rem;
    font-size: 1.1rem;
  }
}
section#explanation01 ul.col2 li p:nth-child(1)::before,
section#explanation01 ul.col2 li:nth-child(2) p:nth-child(1)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50px;
  width: 30px;
  height: 2rem;
  background: url(common/images/orn028.png) no-repeat;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  section#explanation01 ul.col2 li p:nth-child(1)::before,
  section#explanation01 ul.col2 li:nth-child(2) p:nth-child(1)::before {
    top: 5px;
    left: -30px;
    width: 15px;
  }
}
section#explanation01 ul.col2 li p:nth-child(1)::after {
  content: '';
  position: absolute;
  top: 0;
  right: -50px;
  width: 30px;
  height: 2rem;
  background: url(common/images/orn029.png) no-repeat;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  section#explanation01 ul.col2 li p:nth-child(1)::after {
    top: 5px;
    right: -30px;
    width: 15px;
  }
}
section#explanation01 ul.col2 li p:nth-child(2) {
  position: relative;
}
section#explanation01 ul.col2 li p:nth-child(2)::before {
  content: '';
  position: absolute;
  top: -50px;
  left: -40px;
  width: 110px;
  height: 110px;
  background: url(common/images/pop02.png) no-repeat;
  background-size: contain;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  section#explanation01 ul.col2 li p:nth-child(2)::before {
    top: -20px;
    left: -20px;
    width: 80px;
    height: 80px;
  }
}
section#explanation01 ul.col2 li:nth-child(2) p:nth-child(2)::before {
  content: '';
  position: absolute;
  top: -50px;
  left: -40px;
  width: 110px;
  height: 110px;
  background: url(common/images/pop01.png) no-repeat;
  background-size: contain;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  section#explanation01 ul.col2 li:nth-child(2) p:nth-child(2)::before {
    top: -20px;
    left: -20px;
    width: 80px;
    height: 80px;
  }
}
section#explanation01 ul.col2 li p:nth-child(2) span,
#example .mixContainer .mix span {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 1rem;
  color: #fff;
  font-size: 0.7rem;
  font-weight: normal;
  background: #af8550;
}
section#explanation01 .container01 p:nth-child(1) {
  position: relative;
}
section#explanation01 .container01 p:nth-child(1)::before {
  content: '';
  position: absolute;
  right: -105px;
  bottom: -85px;
  width: 350px;
  height: 350px;
  background: url(common/images/image056.png) no-repeat;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  section#explanation01 .container01 p:nth-child(1)::before {
    right: -35px;
    bottom: 40px;
    width: 100px;
    height: 100px;
  }
}
section#explanation01 .container01 p.disText {
  font-size: 0.8rem;
  color: #71581f;
}
@media screen and (max-width: 767px) {
  section#explanation01 .container01 p.disText {
    font-size: 0.6rem;
  }
}
section#explanation01 a {
  transition: 0.8s;
}
section#explanation01 a:hover {
  opacity: 0.6;
}
section#explanation01 .container01 {
  margin: 0;
  padding: 7.6%;
  background:
   -webkit-linear-gradient(45deg,  transparent 40px, #f2ede7 10px),
   -webkit-linear-gradient(135deg, transparent 40px, #f2ede7 10px),
   -webkit-linear-gradient(225deg, transparent 40px, #f2ede7 10px),
   -webkit-linear-gradient(315deg, transparent 40px, #f2ede7 10px);
   background-position: bottom left, bottom right, top right, top left;
   background-size: 50% 50%;
   background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  section#explanation01 .container01 {
    padding: 1.6rem 6%;
    background: -webkit-linear-gradient(#f2ede7, #f2ede7);
    background-position: center;
    background-size: 100% 100%;
  }
}
@media screen and (max-width: 767px) {
  section#explanation01 .container01 {
    margin: 0;
  }
}
section#explanation01 .container01.mb01 {
  margin: 0 0 1rem;
}
section#explanation01 .container01 h3,
#example.inner h3 {
  padding: 0 0 3.2rem;
  color: #8d5d2b;
  font-size: 160%;
  font-family: "harenosora";
  line-height: 100%;
  text-align: center;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  section#explanation01 .container01 h3,
  #example.inner h3 {
    padding: 0 0 20px;
    font-size: 1rem;
    line-height: 1.8rem;
  }
}
section#explanation01 .container01 h3::before,
#example.inner h3::before {
  content: url(common/images/orn004.png);
  margin: 10px;
  position: relative;
  top: -4px;
}
@media screen and (max-width: 767px) {
  section#explanation01 .container01 h3::before,
  #example.inner h3::before {
    display: none;
  }
}

section#explanation01 .container01 h3::after,
#example.inner h3::after {
  content: url(common/images/orn005.png);
  margin: 10px;
  position: relative;
  top: -4px;
}
@media screen and (max-width: 767px) {
  section#explanation01 .container01 h3::after,
  #example.inner h3::after {
    display: none;
  }
}
section#explanation01 .container01 .textArea {
  margin: 2rem 0 0;
}
@media screen and (max-width: 767px) {
  section#explanation01 .container01 .textArea {
    padding: 0 0.8rem 0.3rem;
    text-align: justify;
  }
}
@media screen and (max-width: 767px) {
  section#explanation01 .container01 .subTtl {
    line-height: 1.4rem;
  }
}
section#explanation01 .container01 .button {
  text-align: center;
}
section#explanation01 .container01 .button a {
  display: block;
  margin: 0 auto;
  background: url(common/images/button_a.png) 50% 0 no-repeat;
  width: 215px;
  height: 41px;
  color: #fff;
  padding-top: 15px;
  font-size: 1rem;
  -moz-transition: -moz-transform 0.2s linear;
    -webkit-transition: -webkit-transform 0.2s linear;
    -ms-transition: -ms-transform 0.2s linear;
    transition: transform 0.2s linear;
}
@media screen and (max-width: 767px) {
  section#explanation01 .container01 .button a {
    padding: 0.7rem 0;
    width: 100%;
    height: auto;
    font-size: 0.8rem;
    background-size: contain;
  }
}

section#explanation01 .orn1 {
  position: absolute;
  top: 10px;
  left: 10px;
}
@media screen and (max-width: 767px) {
  section#explanation01 .orn1 img {
    width: 60px;
  }
}

section#explanation01 .orn2 {
  position: absolute;
  top: 10px;
  right: 10px;
}
@media screen and (max-width: 767px) {
  section#explanation01 .orn2 {
    left: 100%;
    margin-left: -70px;
  }
  section#explanation01 .orn2 img {
    width: 60px;
  }
}

section#explanation01 .orn3 {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
@media screen and (max-width: 767px) {
  section#explanation01 .orn3 img {
    width: 60px;
  }
}

section#explanation01 .orn4 {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
@media screen and (max-width: 767px) {
  section#explanation01 .orn4 img {
    width: 60px;
  }
}


/* サービスの紹介 */

section#service {
  overflow: hidden;
  background-color: #fcf9f7;
  background-image: url(common/images/image031.png), url(common/images/image032.png),
  url(common/images/image033.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0% 0%, 120% 120% , 0% 120%;
  background-attachment: fixed, fixed, fixed;
}
@media screen and (max-width: 767px) {
  section#service {
    padding: 2em 3% 0;
  }
}

@keyframes light {
  0%   { transform: translate(0%, 0%) rotate(0deg);
  -webkit-transform-origin:left top 0; }
  50%  { transform: translate(0%, 0%) rotate(55deg);
  -webkit-transform-origin:left top 0;
  -ms-transform: translate(0%, 0%) rotate(0deg); }
  100%   { transform: translate(0%, 0%) rotate(0deg);
  -webkit-transform-origin:left top 0; }
}

@keyframes light2 {
  0%   { transform: translate(0%, 0%) rotate(0deg);
  -webkit-transform-origin:right top 0; }
  50%  { transform: translate(0%, 0%) rotate(-55deg);
  -webkit-transform-origin:right top 0;
  -ms-transform: translate(0%, 0%) rotate(0deg);}
  100%   { transform: translate(0%, 0%) rotate(0deg);
  -webkit-transform-origin:right top 0; }
}

section#service .lightA {
  position: absolute;
  top: calc(-65px - 2rem);
  left: 0;
}
@media screen and (max-width: 767px) {
  section#service .lightA {
    top: -32px;
  }
}

section#service .lightB {
  position: absolute;
  top: calc(-50px - 2rem);
  left: 0px;
  animation: light 20s linear;
  animation-iteration-count: infinite;
}
@media screen and (max-width: 767px) {
  section#service .lightB  {
    top: -17px;
    left: 2px;
  }
  section#service .lightB img {
    width: 100%;
  }
}

section#service .lightC {
  position: absolute;
  top: calc(-65px - 2rem);
  right: -3px;
}
@media screen and (max-width: 767px) {
  section#service .lightC {
    top: -32px;
  }
}

section#service .lightD {
  position: absolute;
  top: calc(-50px - 2rem);
  right: -5px;
  animation: light2 24s linear;
  animation-iteration-count: infinite;
}
@media screen and (max-width: 767px) {
  section#service .lightD {
    top: -17px;
    right: -1px;
  }
  section#service .lightD img {
    width: 100%;
  }
}

section#service .inner {
  padding-bottom: 108px;
}
@media screen and (max-width: 767px) {
  section#service .inner {
    padding-bottom: 0em;
  }
}

section#service .sliderBg {
  margin: 0 auto;
  width: 1175px;
  height: 830px;
  background: url(common/images/image005.png) no-repeat;
}
@media screen and (max-width: 767px) {
  section#service .sliderBg {
    overflow: hidden;
    margin: 0 0 0 calc(-3% - 1px);
    padding: 2rem 0 0;
    width: calc(100% + 6% + 2px);
    height: auto;
    background: url(common/images/image005.png) no-repeat 50% 50%;
    background-size: 200%;
  }
}

section#service .sliderBg .orn {
  margin-bottom: 40px;
  padding-top: 80px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  section#service .sliderBg .orn {
    margin-bottom: 0;
    padding-top: 1em;
    text-align: center;
  }
  section#service .sliderBg .orn img {
    height: 20px;
  }
}

section#service .sliderBg .bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-bottom: 0px;
  margin-left: -1250px;
}
@media screen and (max-width: 767px) {
  section#service .sliderBg .bottom {
    position: static;
    margin-bottom: -10px;
    margin-left: -150%;
  }
  section#service .sliderBg .bottom img {
    width: 200%;
  }
}

section#service .sliderBg .subImg {
  position: absolute;
  bottom: 50px;
  left: -130px;
}
@media screen and (max-width: 767px) {
  section#service .sliderBg .subImg {
    display: none;
  }
}
section#service .sliderBg .subImg2 {
  position: absolute;
  bottom: 60px;
  right: 50px;
}
@media screen and (max-width: 767px) {
  section#service .sliderBg .subImg2 {
    bottom: 30px;
    right: 10px;
  }
  section#service .sliderBg .subImg2 img {
    max-height: 100px;
  }
}

section#service .sliderBg .container {
  margin: 0 auto 10px;
  padding-top: 110px;
  padding-bottom: 30px;
  width: 714px;
  height: 403px;
  color: #fff;
  background: url(common/images/image030.png) no-repeat;
  font-family: "harenosora";
  font-size: 240%;
  line-height: 150%;
  text-align: center;
}
@media screen and (max-width: 767px) {
  section#service .sliderBg .container {
    margin: 0 auto 24px;
    padding-top: 0;
    padding-bottom: 70px;
    width: 100%;
    height: auto;
    background: url(common/images/image030.png) no-repeat 50% 50%;
    background-size: contain;
  }
}

section#service .sliderBg .container h3 {
  padding: 10px 0 30px;
}
@media screen and (max-width: 767px) {
  section#service .sliderBg .container h3 {
    padding: 0.5rem 0 0.8rem;
    font-size: 1rem;
    line-height: 1.8rem;
  }
}

section#service .sliderBg .container p.subTitle {
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  section#service .sliderBg .container p.subTitle {
    padding-top: 3rem;
    font-size: 1rem;
  }
}

section#service .sliderBg .container p.description {
  color: #e3c46c;
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  section#service .sliderBg .container p.description {
    font-size: 0.4rem;
  }
}

section#service .sliderBg .container p.button a {
  display: block;
  margin: 0 auto;
  padding: 10px 0 16px;
  width: 200px;
  color: #fff;
  font-size: 1.3rem;
  line-height: 110%;
  border-radius: 10px;
  background: #761a1c;
  transition: 0.3s;
}
@media screen and (max-width: 767px) {
  section#service .sliderBg .container p.button a {
    padding: 0.4rem 0 0.5rem;
    width: 30%;
    font-size: 0.8rem;
    line-height: 1rem;
    border-radius: 5px;
  }
}
section#service .sliderBg .container p.button a:hover {
  color: #fff;
  background: #b49019;
}

section#service .sliderBg .button_ske {
  margin-bottom: 5px;
}
@media screen and (max-width: 767px) {
  section#service .sliderBg .button_ske {
    margin: 0 auto;
    text-align: center;
  }
}

section#service .sliderBg .button_ske a {
  display: block;
  margin: 0 auto;
  padding: 15px;
  width: 250px;
  color: #fff;
  text-align: center;
  background: url(common/images/image012.png) no-repeat 10px 50%;
  border: 1px #fff solid;
  border-radius: 5px;
}
@media screen and (max-width: 767px) {
  section#service .sliderBg .button_ske a {
    display: inline-block;
    padding: 0.5em;
    max-width: 200px;
    background: url(common/images/image012.png) no-repeat 10px 50%;
    background-size: 20px;
    text-indent: 15px;
  }
}

section#service .sliderBg .text {
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 767px) {
  section#service .sliderBg .text {
    margin-bottom: 3em;
    font-size: 0.6rem;
  }
}

section#plan {
  margin-bottom: 40px;
}

section#plan .inner {
  position: relative;
  margin-bottom: 30px;
}

section#plan .container {
  overflow: hidden;
  position: relative;
  padding: 6% 10% 8%;
  background: #f9f7f5 url(common/images/grunge_pink.gif) no-repeat;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  section#plan .container {
    padding: 10% 2% 8%;
    width: 100%;
    box-sizing: border-box;
  }
}

section#plan .container h3 {
  padding: 0 0 2.5rem;
  color: #71581f;
  font-size: 160%;
  font-family: "harenosora";
  line-height: 100%;
  text-align: center;
}
@media screen and (max-width: 767px) {
  section#plan .container h3 {
    padding: 20px 0 20px;
    font-size: 1rem;
  }
}

section#plan .container h3.child {
  clear :both;
  padding: 5rem 0 3rem;
}
@media screen and (max-width: 767px) {
  section#plan .container h3.child {
    padding: 3rem 0 2rem;
  }
}

section#plan .container h3::before {
  content: url(common/images/orn004.png);
  margin: 10px;
  position: relative;
  top: -4px;
}
@media screen and (max-width: 767px) {
  section#plan .container h3::before {
    content: '';
  }
}

section#plan .container h3::after {
  content: url(common/images/orn005.png);
  margin: 10px;
  position: relative;
  top: -4px;
}
@media screen and (max-width: 767px) {
  section#plan .container h3::after {
    content: '';
  }
}

section#plan .container .orn1 {
  position: absolute;
  top: 10px;
  left: 10px;
}
@media screen and (max-width: 767px) {
  section#plan .container .orn1 img {
    position: absolute;
    width: 60px;
  }
}

section#plan .container .orn2 {
  position: absolute;
  top: 10px;
  right: 10px;
}
@media screen and (max-width: 767px) {
  section#plan .container .orn2 {
    top: 10px;
    left: 100%;
    margin-left: -70px;
  }
  section#plan .container .orn2 img {
    position: absolute;
    width: 60px;
  }
}

section#plan .container .orn3 {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
@media screen and (max-width: 767px) {
  section#plan .container .orn3 {
    bottom: 70px;
  }
  section#plan .container .orn3 img {
    position: absolute;
    width: 60px;
  }
}

section#plan .container .orn4 {
  position: absolute;
  bottom: 10px;
  left: 100%;
  margin-left: -147px;
}
@media screen and (max-width: 767px) {
  section#plan .container .orn4 {
    bottom: 70px;
    margin-left: -70px;
  }
  section#plan .container .orn4 img {
    position: absolute;
    width: 60px;
  }
}

section#plan {
  width: 100%;
}
@media screen and (max-width: 767px) {
  section#plan {
    width: 100%;
    box-sizing: border-box;
  }
}

section#plan ul.card > li {
  float: left;
  margin-right: 2.5%;
  width: calc(100% / 3 - 1.67%);
}
section#plan ul.card > li > p:nth-child(1) {
  position: relative;
}
section#plan ul.card > li > p:nth-child(1)::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -35px;
  width: 130px;
  height: 130px;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  section#plan ul.card > li > p:nth-child(1)::before {
    top: 5px;
    left: 5px;
    width: 90px;
    height: 90px;
  }
}
section#plan ul.card > li:nth-child(1) > p:nth-child(1)::before {
  background: url(common/images/pop03.png) center center /cover no-repeat;
}
section#plan ul.card > li:nth-child(2) > p:nth-child(1)::before {
  background: url(common/images/pop04.png) center center /cover no-repeat;
}
section#plan ul.card > li:nth-child(3) > p:nth-child(1)::before {
  background: url(common/images/pop05.png) center center /cover no-repeat;
}

section#plan .optionList ul > li {
  float: left;
  margin-right: 2.5%;
  width: calc(100% / 3 - 1.67%);
}
@media screen and (max-width: 767px) {
  section#plan .optionList ul > li {
    margin-right: 5px;
    width: 220px;
  }
}

@media screen and (max-width: 767px) {
  section#plan .optionList {
    margin: 0 auto;
    width: 90%;
    overflow-x: auto;
	overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
	.enabled_modal section#plan .optionList {
		overflow-x: inherit;
		overflow-y: inherit;
	}
  section#plan .optionList ul {
    display: flex;
    width: 670px;
    height: 100%;
  }
  section#plan .optionList ul li {
    position: relative;
    float: none;
    margin-right: 5px;
    width: 220px;
    background: #fff;
    border-radius: 10px;
  }
  section#plan .optionList ul li p.button {
    position: absolute;
    left: 10%;
    bottom: 5%;
    width: 80%;
  }
}
@media screen and (max-width: 767px) {
  section#plan #cardlist {
    margin: 0 auto;
    width: 90%;
    overflow-x: auto;
	overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
	.enabled_modal section#plan #cardlist {
		overflow-x: inherit;
		overflow-y: inherit;
	}
  section#plan #cardlist > ul.card {
    width: 670px;
    height: 100%;
  }
  section#plan #cardlist > ul.card > li {
    float: left;
    margin-right: 5px;
    white-space: nowrap;
    width: 220px;
  }
  section#plan #cardlist > ul.card li:last-child {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  section#plan .adText {
    padding: 0 5%;
  }
}
.modalwindow .body {
  padding: 1.2rem;
  white-space: normal;
}
@media screen and (max-width: 767px) {
  .modalwindow .body {
    padding: 1rem;
  }
}
.modalwindow .body .modal_content {
  padding: 4rem !important;
  border: 2px solid #bfa479;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .modal_content {
    padding: 2rem 1.4rem !important;
    border: 2px solid #bfa479;
  }
}
.modalwindow .body .textArea {
  margin: 3rem 0;
  padding: 2.4rem;
  font-size: 1.1rem;
  line-height: 2.2rem;
  border: 1px solid #bfa479;
  border-radius: 10px;
}
.modalwindow .body .textArea02 {
  margin: 0 0 3rem;
  font-size: 0.9rem;
  line-height: 2rem;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .textArea02 {
    margin: 0 0 2rem;
  }
  .modalwindow .body .textArea02 p {
    font-size: 0.6rem;
    line-height: 1.1rem;
  }
  .modalwindow .body .textArea02 p:nth-child(1) {
    margin: 0 0 0.3rem;
  }
}
.modalwindow .body .textArea02 span {
  font-weight: bold;
}
.modalwindow .body .subText {
  margin: 0 0 4rem;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .subText p {
    font-size: 0.7rem;
    line-height: 1.1rem;
  }
  .modalwindow .body .subText p:nth-child(1) {
    margin: 0 0 0.3rem;
  }
}
.modalwindow .body .textAreaMerit {
  margin: 1rem 0 3rem;
  padding: 3rem;
  font-size: 1.1rem;
  line-height: 2.2rem;
  background:
    -webkit-linear-gradient(45deg,  transparent 30px, #f3edea 10px),
    -webkit-linear-gradient(135deg, transparent 30px, #f3edea 10px),
    -webkit-linear-gradient(225deg, transparent 30px, #f3edea 10px),
    -webkit-linear-gradient(315deg, transparent 30px, #f3edea 10px);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .textAreaMerit {
    margin: 1rem 0;
    padding: 1.5rem 1rem;
    background: linear-gradient(#f3edea,#f3edea);
    background-position: 100% 100%;
    background-size: 100% 100%;
  }
}

.modalwindow .body .textAreaMerit .caution {
  margin: 2rem 0 0;
  padding: 3rem;
  background: #fbf8f7;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .textAreaMerit .caution {
    padding: 1.4rem;
  }
}
.modalwindow .body .textAreaMerit .ttl {
  margin: 0 0 0.8rem;
  color: #b1843b;
  font-size: 1.5rem;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .textAreaMerit .ttl {
    font-size: 1rem;
  }
}
.modalwindow .body .textAreaMerit .udline {
  margin: 0 0 0.8rem;
  padding: 0 0 0.1rem;
  border-bottom: 1px dashed #000;
}

.modalwindow .close_modal {
  display: block;
    margin: 2rem auto 0;
    background: url(common/images/button_a.png) no-repeat;
    width: 215px;
    height: 41px;
    color: #fff;
    padding-top: 15px;
    font-size: 1rem;
    line-height: 1.5rem;
    -moz-transition: -moz-transform 0.2s linear;
    -webkit-transition: -webkit-transform 0.2s linear;
    -ms-transition: -ms-transform 0.2s linear;
    transition: transform 0.2s linear;
    text-align: center;
    cursor: pointer;
}

.modalwindow .body h4 {
  margin-bottom: 30px;
    color: #71581f;
    font-family: "harenosora";
    font-size: 30px;
    letter-spacing: 0;
    text-align: center;
}
@media screen and (max-width: 767px) {
  .modalwindow .body h4 {
    margin: 0;
    font-size: 1.2rem;
  }
}
.modalwindow .body h4::before {
  content: url(common/images/orn006.png);
      margin: 10px;
      position: relative;
      top: 3px;
}
@media screen and (max-width: 767px) {
  .modalwindow .body h4::before {
    content: '';
    display: inline-block;
    background: url(common/images/orn006.png) no-repeat;
    background-size: contain;
    width: 20px;
    height: 18px;
    margin: 2px 6px;
    position: relative;
    top: 10px;
  }
}
.modalwindow .body h4::after {
  content: url(common/images/orn007.png);
  margin: 10px;
  position: relative;
  top: 3px;
}
@media screen and (max-width: 767px) {
  .modalwindow .body h4::after {
    content: '';
    display: inline-block;
    background: url(common/images/orn007.png) no-repeat;
    background-size: contain;
    width: 20px;
    height: 18px;
    margin: 2px 6px;
    position: relative;
    top: 10px;
  }
}

.modalwindow .body h5 {
  position: relative;
  padding: 1rem 1rem 0.5rem;
  font-size: 1rem;
  line-height: 2.4rem;
  color: #fff;
  background: #b3a287;
  text-align: center;
  color: #333;
  background: #fff;
  border-bottom: 3px double #ddd;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .modalwindow .body h5 {
    position: relative;
    padding: 0.5rem;
    font-size: 0.8rem;
    line-height: 2rem;
    border-bottom: 3px double #ddd;
    text-align: center;
  }
}
.modalwindow .body h5::before {
  content: '';
  position: absolute;
  top: calc(50% - 4px);
  left: 20px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #b9504d;
}
@media screen and (max-width: 767px) {
  .modalwindow .body h5::before {
    left: 5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #b9504d;
  }
}
.modalwindow .body h5:hover {
	background: #f8f8f8;
}

.modalwindow .body .close_modal {
  margin: 3rem auto 0;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .close_modal {
    margin: 2rem auto 0;
  }
}

.modalwindow .body .cardListKey {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.modalwindow .body .cardListKey img {
  width: 100%;
}
.modalwindow .body .cardListKey {
  margin: 0 0 4rem;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .cardListKey {
    margin: 0 0 2rem;
  }
}
.modalwindow .body .cardListKey > div {
  position: relative;
}
.modalwindow .body .cardListKey > div:first-child {
  margin: 2rem 0 0;
  width: calc(55% - 1.9rem);
}
@media screen and (max-width: 767px) {
  .modalwindow .body .cardListKey > div:first-child {
    margin: 0;
    width: 100%;
  }
}
.modalwindow .body .cardListKey > div:first-child p:nth-child(2) {
  position: absolute;
  bottom: 1rem;
  right: 0.7rem;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .cardListKey > div:first-child p:nth-child(2) img {
    max-width: 70px;
  }
}
.modalwindow .body .cardListKey > div:first-child p:nth-child(3) {
  position: absolute;
  top: calc(50% + 5rem);
  right: -1.8rem;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .cardListKey > div:first-child p:nth-child(3) {
    top: calc(50% + 1.5rem);
    right: -1.6rem;
  }
}
.modalwindow .body .cardListKey > div:first-child p:nth-child(3) img {
  max-width: 80px;
}
.modalwindow .body .cardListKey > div:last-child {
  width: calc(45% - 1.9rem);
}
@media screen and (max-width: 767px) {
  .modalwindow .body .cardListKey > div:last-child {
    width: 100%;
  }
  .modalwindow .body .cardListKey > div:last-child .spbox {
    text-align: center;
  }
}
.modalwindow .body .cardListKey > div:last-child .price {
  margin: 0 0 0.2rem;
  color: #7faa90;
  font-size: 3.1rem;
  font-weight: bold;
  font-family: 'harenosora';
  letter-spacing: -0.03rem;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .cardListKey > div:last-child .price {
    font-size: 2.4rem;
    letter-spacing: -0.017rem;
  }
}
.modalwindow .body .cardListKey > div:last-child .price span {
  color: #333;
  font-size: 1.1rem;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .cardListKey > div:last-child .price span {
    font-size: 0.9rem;
  }
}
.modalwindow .body .cardListKey > div:last-child .price.snow {
  color: #9c4a4a;
}
.modalwindow .body .cardListKey > div:last-child .price.cin {
  color: #7aa6b3;
}
.modalwindow .body .cardListKey > div:last-child .price span:nth-of-type(1) {
  margin: 0 0.5rem 0 0;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .cardListKey > div:last-child .price span:nth-of-type(1) {
    margin: 0 0.2rem 0 0;
  }
}
.modalwindow .body .cardListKey > div:last-child .price span:nth-of-type(2) {
  margin: 0 0 0 0.5rem;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .cardListKey > div:last-child .price span:nth-of-type(2) {
    margin: 0 0 0 0.2rem;
  }
}
.modalwindow .body .cardListKey > div:last-child .price02 {
  color: #7faa90;
  font-size: 1rem;
  font-weight: bold;
  text-align: right;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .cardListKey > div:last-child .price02 {
    margin: 0 0 1.5rem;
    font-size: 0.8rem;
    text-align: center;
  }
}
.modalwindow .body .cardListKey > div:last-child .price02.snow {
  color: #9c4a4a;
}
.modalwindow .body .cardListKey > div:last-child .price02.cin {
  color: #7aa6b3;
}
.modalwindow .body .cardListKey > div:last-child .ttl02 {
  position: relative;
  color: #7faa90;
  font-weight: bold;
}
.modalwindow .body .cardListKey > div:last-child .ttl02.snow {
  color: #9c4a4a;
}
.modalwindow .body .cardListKey > div:last-child .ttl02.cin {
  color: #7aa6b3;
}
.modalwindow .body .cardListKey > div:last-child .ttl02::before {
  content: '';
  position: absolute;
  top: calc(100% - 9px);
  right: 0;
  height: 2px;
  width: calc(100% - 2.4rem);
  background: #7faa90;
}
.modalwindow .body .cardListKey > div:last-child .ttl02.snow::before {
  background: #9c4a4a;
}
.modalwindow .body .cardListKey > div:last-child .ttl02.cin::before {
  background: #7aa6b3;
}
.modalwindow .body .cardListKey > div:last-child ul li {
  padding: 0.5rem 0;
  border-bottom: 1px dashed #333;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .cardListKey > div:last-child ul li {
    width: 100%;
  }
}
.modalwindow .body .cardListKey > div:last-child ul li span,
.modalwindow .body .cardListKey > div:last-child ul.color02 li span,
.modalwindow .body .cardListKey > div:last-child ul.color03 li span {
  color: #bb6e28;
  font-weight: bold;
}

section#plan .modal_content {
	background: #fff;
}


.modalwindow .body .accordion {
  margin: 0 auto 1rem;
  max-width: 100%;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .accordion {
    margin: 0 auto;
  }
}
.modalwindow .body .modalKeyText {
  margin: 0 0 3rem;
  color: #705118;
  line-height: 180%;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .modalwindow .body .modalKeyText {
    margin: 1rem 0 2rem;
  }
}

.modalwindow.slidePage {
  font-size: 1.2rem !important;
  line-height: 2.4rem !important;
  color: #333;
  text-align: left;
}

.modalwindow.slidePage h4 {
  color: #dacec2;
}

.modalwindow.slidePage .body {
  padding: 0;
  background-size: cover;
  font-family: "Yu Gothic";
}
@media screen and (max-width: 767px) {
  .modalwindow.slidePage .body {
    padding: 0;
    font-family: "Yu Gothic";
  }
}
.modalwindow.slidePage .body .modal_content {
  border: none;
}
.modalwindow.slidePage ul {
  margin: 5rem 0 0;
}
@media screen and (max-width: 767px) {
  .modalwindow.slidePage ul {
    margin: 2.6rem 0 0;
  }
}
.modalwindow.slidePage ul li {
  margin: 0 0 5rem;
}
@media screen and (max-width: 767px) {
  .modalwindow.slidePage ul li {
    margin: 0 0 2rem;
  }
}
.modalwindow.slidePage ul li:last-child {
  margin: 0;
}
.modalwindow.slidePage .usa1 > div {
  display: block;
  margin: 0 0 0 200px;
  padding: 2rem;
  background: #e3dcd1;
  box-sizing: border-box;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
  .modalwindow.slidePage .usa1 > div {
    margin: 0 0 0 80px;
    padding: 1rem;
  }
}
.modalwindow.slidePage .usa1 > div::before {
  content: '';
  position: absolute;
  top: 25px;
  left: calc(200px - 50px);
  width: 50px;
  height: 50px;
  background: url(common/images/arrow006.png) 100% 0 no-repeat;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .modalwindow.slidePage .usa1 > div::before {
    top: 12px;
    left: calc(80px - 25px);
    width: 25px;
    height: 25px;
  }
}

.modalwindow.slidePage .usa1 {
  position: relative;
	animation: purupuru 0.8s linear 0s 1;
}
.modalwindow.slidePage .usa1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  background: url(common/images/icon004.png) no-repeat;
  background-size: contain;
  -webkit-animation: purupuru 0.8s linear 0s 1;
  animation: talk 10s linear 0s infinite;
}
@media screen and (max-width: 767px) {
  .modalwindow.slidePage .usa1::before {
    width: 50px;
    height: 50px;
  }
}

.modalwindow.slidePage .usa2 > div {
  display: block;
  margin: 0 200px 0 0;
  padding: 2rem;
  background: #d8c9c3;
  box-sizing: border-box;
  border-radius: 10px;
}
@media screen and (max-width: 767px) {
  .modalwindow.slidePage .usa2 > div {
    margin: 0 80px 0 0;
    padding: 1rem;
  }
}
.modalwindow.slidePage .usa2 > div::before {
  content: '';
  position: absolute;
  top: 25px;
  right: calc(200px - 50px);
  width: 50px;
  height: 50px;
  background: url(common/images/arrow007.png) 0 0 no-repeat;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .modalwindow.slidePage .usa2 > div::before {
    top: 12px;
    right: calc(80px - 25px);
    width: 25px;
    height: 25px;
  }
}
.modalwindow.slidePage .usa2 {
  position: relative;
}
.modalwindow.slidePage .usa2::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: url(common/images/icon005.png) no-repeat;
  background-size: contain;
 -webkit-animation: purupuru 0.8s linear 0s 1;
  animation: talk 10s linear 5s infinite;
}
@media screen and (max-width: 767px) {
  .modalwindow.slidePage .usa2::before {
    width: 50px;
    height: 50px;
  }
}

@keyframes talk {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  1%  { transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
  3%  { transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
  6%  { transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
  9%  { transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
  10% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@-webkit-keyframes talk {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  1%  { transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
  3%  { transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
  6%  { transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
  9%  { transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
  10% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.modalwindow.slidePage .closeText {
  margin: 5rem 0 0;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .modalwindow.slidePage .closeText {
    margin: 2rem 0 0;
  }
}
.scroll-table {
  overflow: auto;
  white-space: nowrap;
}

.scText {
  display: none;
}
@media screen and (max-width: 767px) {
  .scText {
    display: block;
    margin: 5px auto 0;
    padding: 7px 0 7px;
    width: 90%;
    color: #b65067;
    background: #fffdfc;
    text-align: center;
    font-size: 0.7rem;
    box-sizing: border-box;
  }
  .scText::before {
    content: '<<';
    margin: 10px;
  }
  .scText::after {
    content: '>>';
    margin: 10px;
  }
}

section#plan ul li:last-child {
  margin: 0;
}
section#plan ul.card > li > p:nth-child(1) img {
  width: 100%;
  border-radius: 20px;
  transition: 1s;
  -webkit-transition: 1s;
}
@media screen and (max-width: 767px) {
section#plan ul.card > li > p:nth-child(1) img {
    border-radius: 8px;
  }
}

section#plan ul.card > li > p:nth-child(1) img:hover{
  transform: translateY(-20px);
}
@media screen and (max-width: 767px) {
  section#plan ul.card > li > p:nth-child(1) img:hover{
    transform: none;
  }
}
section#plan .priceTtlWrp {
  margin: 0 0 3.4rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  section#plan .priceTtlWrp {
    margin: 0 0 2.4rem;
  }
}
section#plan .priceTtl {
  display: inline-block;
  color: #71581f;
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  font-family: "harenosora";
  background:rgba(0, 0, 0, 0) linear-gradient(transparent 73%, #f3eada 0%) repeat scroll 0 0;
}
@media screen and (max-width: 767px) {
  section#plan .priceTtl {
    font-size: 1.2rem;
    line-height: 2rem;
  }
}

section#plan .priceTtl span {
  margin: 0 0 0 0.5rem;
  font-size: 3.2rem;
  line-height: 3.6rem;
}
@media screen and (max-width: 767px) {
  section#plan .priceTtl span {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}

section#plan .option {
  float: left;
  margin-right: 2%;
  padding: 20px 20px 24px;
  background: #fffdfc;
  background-size: cover;
  width: 100%;
  min-height: 300px;
  border-radius: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 90%;
}
@media screen and (max-width: 767px) {
  section#plan .option {
    margin: 0 0 2%;
    padding: 8%;
    width: 100%;
  }
}

section#plan .option h4 {
  margin-bottom: 26px;
  color: #86765c;
  font-family: 'harenosora';
  font-size: 1.5rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  section#plan .option h4 {
    margin-bottom: 1em;
    font-size: 1rem;
  }
  section#plan .option h4 span {
    display: none;
  }
}

section#plan .option h4::before {
  content: url(common/images/orn008.png);
  margin-right: 10px;
  position: relative;
  top: 3px;
}

section#plan .option h4::after {
  content: url(common/images/orn009.png);
  margin-left: 10px;
  position: relative;
  top: 3px;
}

section#plan .option .img {
  margin-bottom: 20px;
  min-height: 165px;
}
@media screen and (max-width: 767px) {
  section#plan .option .img {
    margin-bottom: 10px;
    min-height: auto;
  }
  section#plan .option .img img {
    width: 100%;
  }
}

section#plan .option .text {
  margin-bottom: 20px;
  color: #71581f;
  line-height: 1.4rem;
}
@media screen and (max-width: 767px) {
  section#plan .option .text {
    margin-bottom: 10px;
  }
}

section#plan .option .button a {
  display: block;
  margin: 0 auto;
  background: url(common/images/button_a.png) no-repeat;
  width: 215px;
  height: 41px;
  color: #fff;
  padding-top: 15px;
  font-size: 1rem;
  -moz-transition: -moz-transform 0.2s linear;
    -webkit-transition: -webkit-transform 0.2s linear;
    -ms-transition: -ms-transform 0.2s linear;
    transition: transform 0.2s linear;
}
@media screen and (max-width: 767px) {
  section#plan .option .button a {
    padding-top: 0.7rem;
    width: 100%;
    font-size: 0.8rem;
    background-size: contain;
  }
}

section#plan .option .button a:hover {
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);
  }


/*-------------------- アリス ・　白雪姫　・　シンデレラ --------------------*/

section#plan table {
  margin: 0 0 0.4rem;
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  line-height: 1.5;
  border: 1px solid #333;
}
@media screen and (max-width: 767px) {
  section#plan table {
    margin: 1rem 0 0.4rem;
    font-size: 0.6rem;
  }
}
section#plan table th {
  padding: 1.2rem;
  width: 25%;
  background: #f3edea;
  color: #333;
  border: 1px solid #333;
}
@media screen and (max-width: 767px) {
  section#plan table th {
    padding: 0.5rem;
  }
}
section#plan table td {
  padding: 1.2rem;
  color: #745c51;
  font-size: 1.1rem;
  font-weight: bold;
  border: 1px solid #333;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  section#plan table td {
    padding: 0.5rem;
    font-size: 0.6rem;
  }
}
section#plan table.calc4 td {
	width: calc(100% / 4);
}

section#plan table tr:nth-child(1) td {
  color: #fff;
  font-size: 0.9rem;
  font-weight: inherit;
  background: #a4928a;
}
section#plan table tr:nth-child(1) td:nth-child(2) {
  background: #90bca1;
}
section#plan table tr:nth-child(1) td:nth-child(3),
section#plan table tr:nth-child(1) td.plan02 {
  background: #d9afa8;
}
section#plan table tr:nth-child(1) td:nth-child(4),
section#plan table tr:nth-child(1) td.plan03 {
  background: #8eb9c5;
}
section#plan table td.bgc01 {
  background: #f1dbbf;
}
section#plan table td.bgc02 {
  background: #f7ecde;
}
section#explanation01 .subText {
  margin: 0;
  font-size: 0.8rem;
}
section#plan table td span {
  color: #c56a29;
}









section#plan .w3 {
  margin-top: 2%;
  width: 100%;
}

section#plan .wrap {
}
@media screen and (max-width: 767px) {
  section#plan .wrap {
    margin: 0 auto;
    padding: 0;
    width: 90%;
  }
}

#example .controls {
  margin: 0 auto 1.4rem;
  width: 100%;
}
@media screen and (max-width: 767px) {
  #example .controls {
    margin: 0 auto 1rem;
  }
}

#example .controls ul.controlList {
  display: block;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

#example .controls ul.controlList li {
  margin: 0 0.64% 0.64% 0;
  float: left;
  width: calc(33% - 0.32%);
  border: none;
}
@media all and (max-width: 767px) {
  #example .controls ul.controlList li {
    margin: 0 5px 5px 0.75%;
    width: calc(50% - 5px) !important;
    border: none;
  }
  #example .controls ul.controlList li:nth-child(even) {
    margin: 0 0 5px 0;
  }
}

#example .controls ul.controlList li:nth-child(3n) {
  margin-right: 0;
}
@media all and (max-width: 767px) {
  #example .controls ul.controlList li:nth-child(3n) {
    margin-right: 5px;
  }
  #example .controls ul.controlList li:nth-child(2n) {
    margin-right: 0;
  }
}

#example .controls ul.controlList li:nth-child(n + 5) {
  margin-bottom: 0;
}
@media all and (max-width: 767px) {
  #example .controls ul.controlList li:nth-child(n + 5) {
    margin-bottom: 5px;
  }
}

#example .controls ul.controlList li button {
  margin: 0;
  padding: 10px;
  width: 100%;
  color: #fff;
  background: #90826b;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 5px;
}
#example .controls ul.controlList li button.active {
  background: #d19c47;
}
#example .mixContainer{
}

#example .mixContainer:after{
content:'';
display: none;
width:100%;
}
#example .mixContainer .mix {
  position: relative;
}
#example .mixContainer .mix,
#example .mixContainer .gap{
  display: inline-block;
  width: 49.30%;
}
@media all and (max-width: 767px){
  #example .mixContainer .mix {
    width: 100%;
  }
  #example .mixContainer .gap {
    display: none;
  }
}
#example .mixContainer .mix{
  text-align: left;
  background: #ccc;
  margin-bottom: 0.64%;
  display: none;
}
@media all and (max-width: 767px){
#example .mixContainer .mix{
  margin-bottom: 1.5%;
}
}


/* sample */
section#explanation02 {
  margin: 120px 0 0;
  padding: 6rem 0;
  width: 100%;
  font-size: 1rem;
  background: url(common/images/background03.png) repeat fixed;
  box-sizing: border-box;
}
@media all and (max-width: 767px){
  section#explanation02 {
    margin: 0;
    padding: 2rem 3%;
    background: url(common/images/background03.png) repeat fixed;
    background-size: 200%;
  }
}
section#explanation02 .inner {
  margin: 0 auto;
  width: 1200px;
  background: #f9f7f5 url(common/images/grunge_pink_l.gif) no-repeat;
  box-sizing: border-box;
}
@media all and (max-width: 767px){
  section#explanation02 .inner {
    width: 100%;
  }
}
section#explanation02 .inner .content {
  padding: 3rem;
}
@media all and (max-width: 767px) {
  section#explanation02 .inner .content {
    padding: 1rem;
  }
}
section#explanation02 .inner .border {
  padding: 5rem 5rem 2rem;
  border: 4px double #bfa479
}
@media all and (max-width: 767px) {
  section#explanation02 .inner .border {
    padding: 2rem 2rem 1rem;
  }
}
section#explanation02 .inner ul {
  margin: 3rem auto 0;
  max-width: 900px;
  text-align: left;
}
@media all and (max-width: 767px) {
  section#explanation02 .inner ul {
    margin: 0 auto;
  }
}
section#explanation02 .inner ul li {
  padding: 1.4rem 0;
  border-bottom: 1px solid #c2b399;
}
section#explanation02 .inner ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
section#explanation02 .inner ul li p:nth-child(1) {
  margin: 0 0 1rem;
  font-weight: bold;
}
section#explanation02 .inner ul li p:nth-child(2) {
  padding: 0 0 0 1.3rem;
}
@media all and (max-width: 767px) {
  section#explanation02 .inner ul li p:nth-child(2) {
    padding: 0 0 0 1.2rem;
  }
}

section#faq {
  padding: 60px 0 calc(60px + 2rem);
  background-color: #fcf9f7;
  background-image:
  url(common/images/image034.png),
  url(common/images/image033.png);
  background-position:
  0% -120%,
  100% 110%;
  background-repeat:
  no-repeat,
  no-repeat;
  background-attachment:
  fixed,
  fixed;
}
@media screen and (max-width: 767px) {
  section#faq {
    margin-bottom: 0;
    padding: 2em 3%;
  }
}

section#faq .faqList {
  background: #fffdfc;
  background-size: cover;
  padding: 6% 10%;
}
@media screen and (max-width: 767px) {
  section#faq .faqList {
    padding: 10% 6%;
  }
}

section#faq h3 {
  padding: 0 0 50px;
  color: #71581f;
  font-size: 160%;
  font-family: "harenosora";
  line-height: 100%;
  text-align: center;
}

@media screen and (max-width: 767px) {
  section#faq h3 {
    padding: 0 0 30px;
    font-size: 1rem;
  }
}


section#faq h3::before {
  content: url(common/images/orn004.png);
  margin: 10px;
  position: relative;
  top: -4px;
}
@media screen and (max-width: 767px) {
  section#faq h3::before {
    content: '';
    display: inline-block;
    background: url(common/images/orn004.png) no-repeat;
    background-size: contain;
    width: 40px;
    height: 10px;
    margin: 2px 6px;
    position: relative;
    top: 3px;
  }
}

section#faq h3::after {
  content: url(common/images/orn005.png);
  margin: 10px;
  position: relative;
  top: -4px;
}
@media screen and (max-width: 767px) {
  section#faq h3::after  {
    content: '';
    display: inline-block;
    background: url(common/images/orn005.png) no-repeat;
    background-size: contain;
    width: 40px;
    height: 10px;
    margin: 2px 6px;
    position: relative;
    top: 3px;
  }
}

section#faq .faqList {
  position: relative;
}

section#faq .orn1 {
  position: absolute;
  top: 10px;
  left: 10px;
}
@media screen and (max-width: 767px) {
  section#faq .orn1 img {
    width: 60px;
  }
}

section#faq .orn2 {
  position: absolute;
  top: 10px;
  right: 10px;
}
@media screen and (max-width: 767px) {
  section#faq .orn2 {
    left: 100%;
    margin-left: -70px;
  }
  section#faq .orn2 img {
    width: 60px;
  }
}

section#faq .orn3 {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
@media screen and (max-width: 767px) {
  section#faq .orn3 img {
    width: 60px;
  }
}

section#faq .orn4 {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
@media screen and (max-width: 767px) {
  section#faq .orn4 img {
    width: 60px;
  }
}



section#faq ul.pickUp {
  overflow: hidden;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  section#faq .pickUpWrap {
    margin: 0 auto;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
  }
  section#faq ul.pickUp {
    margin: 0;
    width: 670px;
    height: 100%;
  }
  section#faq .scText {
    margin-bottom: 20px;
    width: 100%;
  }
}

section#faq ul.pickUp li {
  float: left;
  margin-right: 2%;
  width: 32%;
  background: url(common/images/image040.png) no-repeat;
}
@media screen and (max-width: 767px) {
  section#faq ul.pickUp li {
    margin-right: 1%;
    width: 210px;
    background-size: contain;
  }
}

section#faq ul.pickUp li:last-child {
  margin: 0;
}

section#faq ul.pickUp li p:first-child {
  padding-top: 70px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  section#faq ul.pickUp li p:first-child {
    padding-top: 50px;
    min-height: 190px;
  }
  section#faq ul.pickUp li:first-child p img {
    width: 35%;
  }
  section#faq ul.pickUp li p img {
    width: 40%;
  }
}

section#faq ul.pickUp li p a {
  display: block;
  margin-top: 87px;
  padding: 10px 0 0 10px;
  height: 54px;
  color: #fff;
  background: url(common/images/button_c.png) no-repeat 50% 50%;
  text-align: center;
  line-height: 1.4rem;
  font-weight: 100;
}
@media screen and (max-width: 767px) {
  section#faq ul.pickUp li p a {
    margin-top: 0;
    padding: 14px 0 0 15px;
    background-size: contain;
    line-height: 1.2rem;
  }
}

section#faq ul.list {
  overflow: hidden;
}

section#faq ul.list li {
  margin-bottom: 8px;
}

section#faq ul.list li a {
  display: block;
  padding-top: 13px;
  padding-left: 30px;
  background: url(common/images/button_d.png) no-repeat;
  background-size: cover;
  height: 37px;
  color: #333;
}

section#faq ul.list li a::before {
  content: 'Q.';
  padding-right: 10px;
}

section#form {
  margin-bottom: 80px;
}
@media screen and (max-width: 767px) {
  section#form {
    margin-bottom: 3rem;
  }
}

section#form .content {
    overflow: hidden;
    position: relative;
    padding: 4% 10% 8%;
    background: #f9f7f5 url(common/images/grunge_pink_l.gif) no-repeat;
    background-size: cover;
}
@media screen and (max-width: 767px) {
  section#form .content {
      padding: 10% 1.5% 8%;
  }
}

section#form .orn1 {
  position: absolute;
  top: 10px;
  left: 10px;
}
@media screen and (max-width: 767px) {
  section#form .orn1 img {
    width: 60px;
  }
}

section#form .orn2 {
  position: absolute;
  top: 10px;
  right: 10px;
}
@media screen and (max-width: 767px) {
  section#form .orn2 img {
    width: 60px;
  }
}

section#form .orn3 {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
@media screen and (max-width: 767px) {
  section#form .orn3 img {
    width: 60px;
  }
}

section#form .orn4 {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
@media screen and (max-width: 767px) {
  section#form .orn4 img {
    width: 60px;
  }
}

section#form table {
  border-collapse:collapse;
  margin:0 auto;
  width: 100%;
}
@media screen and (max-width: 767px) {
  section#form table {
    font-size: 0.8rem;
  }
}

section#form table th {
  padding: 20px;
  background: #f6f1ea;
  border: 1px #e3ded9 solid;
  width: 30%;
  text-align: left;
}
@media screen and (max-width: 767px) {
  section#form table th {
    display: block;
    padding: 0.5rem 1rem;
    width: 100%;
    background: #f6f1ea;
    text-align: left;
    box-sizing: border-box;
  }
}
section#form table tr:nth-child(even) th {
  background: #efe9e2;
}

section#form table td {
  padding: 20px;
  border: 1px #e3ded9 solid;
}
@media screen and (max-width: 767px) {
  section#form table td {
    display: block;
    padding: 5%;
    width: 100%;
    box-sizing: border-box;
  }
}

section#form .option ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

section#form .option ul li {
  width: 32.5%;
}



section#form .formSlider {
  margin: 0 auto;
  padding: 1rem 0;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  section#form .formSlider {
    padding: 0.7rem 0;
  }
}
section#form .cMode {
  width: 100%;
  text-align: center;
}
section#form .cMode .slick-slide{
  margin: 5px;
}

section#form .cMode .slick-dots {
  bottom: -40px;
}
@media screen and (max-width: 767px) {
  section#form .cMode .slick-dots {
    bottom: -30px;
  }
}
section#form .cMode .slick-dots li.slick-active button:before {
  color: #90826c;
  font-size: 30px;
}
section#form table.func {
  margin: 1rem 0 1rem;
}
@media screen and (max-width: 767px) {
  section#form table.func {
    margin: 1rem 0 1rem;
  }
}
section#form .cMode label {
  color: #71581f;
  font-size: 1.2rem;
  font-weight: bold;
}
section#form .cMode .ttl {
  color: #71581f;
  font-size: 1.2rem;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  section#form .cMode .ttl {
    font-size: 0.8rem;
  }
}
section#form .ttl2 {
  padding: 3rem 0 1rem;
  color: #71581f;
  font-size: 1.2rem;
  font-weight: bold;
}
section#form .sText {
  font-size: 0.8rem;
  line-height: 1.8rem;
}

section#company {
  margin: 0 0 80px;
  padding: 0;
}
@media screen and (max-width: 767px) {
  section#company {
    margin: 0 0 0.5rem;
  }
}
section#company .inner {
  padding: 6rem 3rem ;
  background: #f9f7f5 url(common/images/grunge_pink_l.gif) no-repeat;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  section#company .inner {
    padding: 2rem;
  }
}
section#company .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 5rem 0 0;
}
@media screen and (max-width: 767px) {
  section#company .flex {
    margin: 2rem 0 0;
  }
}
section#company .flex > div:first-child {
  width: 470px;
}
@media screen and (max-width: 767px) {
  section#company .flex > div:first-child {
    margin: 0 0 1rem;
    width: 100%;
  }
}
section#company .flex > div:last-child {
  width: calc(100% - 470px - 3rem);
}
@media screen and (max-width: 767px) {
  section#company .flex > div:last-child {
    padding: 0 0 2rem;
    width: 100%;
  }
}
section#company .flex > div img {
  max-height: 750px;
  max-width: 100%;
}
section#company .flex > div .ttl {
  font-size: 1.2rem;
  line-height: 2.4rem;
}
@media screen and (max-width: 767px) {
  section#company .flex > div .ttl {
    margin: 0 0 2rem;
  }
}
section#company .flex h3 {
  margin: 0 0 0.5rem;
  font-weight: bold;
}
section#company .flex span {
  padding: 0 0 0.1rem;
  border-bottom: 1px solid #333;
}
section#company .flex .txtR {
  text-align: right;
}

footer {
  position: relative;
}

footer .inner {
  position: relative;
  background: url(common/images/key_bg.gif) repeat;
  overflow: hidden;
}

footer h2 {
  margin-bottom: 60px;
  padding-top: 80px;
  color: #846e1b;
  text-align: center;
  font-size: 200%;
  font-family: "harenosora";
  line-height: 130%;
}
@media screen and (max-width: 767px) {
  footer h2 {
    margin-bottom: 20px;
    padding-top: 20px;
    font-size: 1.2rem;
  }
}

footer ul {
  margin-bottom: 10px;
  overflow: hidden;
  text-align: center;
}
@media screen and (max-width: 767px) {
  footer ul {
    margin-bottom: 5px;
    font-size: 0.8rem;
  }
}

footer ul li {
  display: inline;
}

footer ul li:first-child::after {
  content: "|";
  margin: 0 10px;
  color: #866f1f;
}

footer .copyright {
  background: #798517;
  color: #fff;
  text-align: center;
  z-index: 3;
}

footer a {
  color: #333;
}

footer p.foo01 {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: -228px;
  margin-left: -1290px;
  z-index: 2;
}

footer p.foo02 {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: -228px;
  margin-left: 238px;
  z-index: 2;
}

footer p.foo03 {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: -298px;
  margin-left: -700px;
  z-index: 1;
}

footer p.foo04 {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: -310px;
  margin-left: 300px;
  z-index: 1;
}

footer p.foo05 {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: -220px;
  margin-left: -420px;
  z-index: 1;
}

footer p.foo06 {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: -280px;
  margin-left: 790px;
  z-index: 1;
}

footer p.foo07 {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: -340px;
  margin-left: -202px;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  footer p.foo07 {
    margin-top: -210px;
    margin-left: -155px;
  }
  footer p.foo07 img {
    width: 90%;
  }
}

footer p.foo08 {
  display: none;
}
@media screen and (max-width: 767px) {
  footer p.foo08 {
    display: block;
    position: absolute;
    bottom: 10px;
    right: 2%;
  }
  footer p.foo08 img {
    width: 50px;
  }
}

.effect1 {
  position: fixed;
  top: 0;
  right: -200px;
  z-index: 100;
  background: red;
  width: 200px;
}
@media screen and (max-width: 767px) {
  .effect1 {
    display: none;
  }
}


/* contact form7 */
.wpcf7-not-valid-tip {
	text-align: left;
}