/*サイト全体*/
html {
overflow: auto;
}
body {
overflow: hidden;
user-select:none;
font-family: 'Kiwi Maru', serif;
}


body {
position: relative;
background: -webkit-repeating-linear-gradient(-45deg, #fffbf1, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
background: repeating-linear-gradient(-45deg, #fffbf3, #fff5df 4px,#fffbf4 3px, #e6e8ff 8px);
border-radius: 7px;
background-attachment: fixed;
}
@media screen and (max-width:767px) {
body {
background: -webkit-repeating-linear-gradient(-45deg, #fffbf1, #fff5df 4px,#ffe4b1 3px, #ffe4b1 6px);
background: repeating-linear-gradient(-45deg, #fffbf3, #fff5df 4px,#fffbf4 3px, #e6e8ff 6px);
border-radius: 7px;
background-attachment: fixed;
}
}


img {
pointer-events: none; 
}
/* レスポンシブ */
@media screen and (min-width:768px) { 
.mobilein { 
display:none;
}
}
@media screen and (min-width:1000px) { 
.mobilein2 { 
display:none;
}
}
@media screen and (max-width:767px) { 
.desktopin { 
display:none;
}
}
@media screen and (max-width:999px) { 
.desktopin2 { 
display:none;
}
}



/* レスポンシブ */
@media screen and (min-width:768px) { 
  .sp { 
  display:none;
  }
  }
  @media screen and (min-width:1000px) { 
  .sp2 { 
  display:none;
  }
  }
  @media screen and (max-width:767px) { 
  .pc { 
  display:none;
  }
  }
  @media screen and (max-width:999px) { 
  .pc2 { 
  display:none;
  }
  }


/* Loading */
#loading {
width: 100vw;
height: 100vh;
transition: all 1s;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: radial-gradient(at top ,#ffffff 0%, #fbffde 70%);
}
.spinner {
width: 100px;
height: 100px;
margin: 200px auto;
background-color: #ffefd4;
border-radius: 100%;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@media screen and (min-width:768px) {
.spinner {
width: 1000px;
height: 1000px;
margin: -250px auto;
background-color: #fcffc1;
border-radius: 100%;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
}
/* Loading Animation */
@keyframes sk-scaleout {
0% {
transform: scale(0);
} 100% {
transform: scale(1.0);
opacity: 0;
}
}
/* Hide Loading Block */
.loaded {
opacity: 0;
visibility: hidden;
}




/* FixIcon */
.topbutton {
    position: fixed;
    bottom: 0px;
    right: 0px;
    opacity: 1;
    text-align: center;
    font-size: 120%;
    font-weight: bold;
    z-index: 96;
    transform: translateY(100%);
    border-radius: 24px;
    margin: 0px;
    padding: 10px;
    transition: all 0.3s ease 0s;
}
.topbutton a {
    display: block;
    border: 0;
color: #202020;
cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline:none;
}
.FixIconIMG {
    max-width: 70px;
}
@media screen and (max-width: 999px){
.FixIconIMG {
    max-width: 60px;
}
}

.active {
    transform: translate(0px);
}











/* 追加 追記 */
.pcl {
 color: rgb(187, 255, 0);
}
/* 白背景 */
.BackgroundNone2{
  width: 100%;
  height: auto;
  background-color: #FFF;
  background-size: 80px 80px;
  z-index: 89;
  position: relative;
  padding-bottom: 50px;
  padding-top: 5px;
  }

/* 見出し */
@media screen and (min-width:768px) {
  .md {
  text-align: center;
  margin-top: 15px;
  padding:  0px 10px 5px;
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin: 0 auto;
  font-weight: 500;
  position: relative;
  z-index: 91;
  background-color: #ffffff;
  }
  .mdspan{
  font-size: 3rem;
  }
  }
  
  @media screen and (max-width:767px) {
  .md {
  text-align: center;
  margin-top: -5px;
  padding:  0px 10px 5px;
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 500;
  position: relative;
  z-index: 91; 
  background-color: #ffffff;
  }
  .mdspan{
  font-size: 2rem;
  }
  }
  .csBoxall{
    margin-top: -40px;
    padding-top: 40px;
    background-color: white;
    padding-bottom: 40px;
    }
    .boxc .titlec .fas {
      margin-top: 20px;
      font-size: 60px;
      color: #ffc98e;
    }







/* FullWidthSBBox */
@media screen and (min-width:768px) {

.FullWidthSBBox{
position: relative;
padding: 0.6em;
background-color: #3b3b3b;/* 背景色 */
text-align: center;
margin-bottom: 40px;
margin-top: 20px;
z-index: 90;
}
.FullWidthSBBox:after {
content: "";
display: block;
width: 40px;
height: 40px;
background-color: inherit;
transform: rotate(45deg);
position: absolute;
bottom: -20px;
left: 0;
right: 0;
margin: auto;
z-index: 0;
}
.FullWidthSBBox2{
position: relative;
padding: 0.6em;
background-color: #3b3b3b;/* 背景色 */
text-align: center;
margin-bottom: 40px;
}
.FullWidthSBBox2:after {
content: "";
display: block;
width: 40px;
height: 40px;
background-color: inherit;
transform: rotate(45deg);
position: absolute;
bottom: -20px;
left: 0;
right: 0;
margin: auto;
z-index: 0;
}

.FullWidthSBBoxIn{
font-size: 2rem;
font-weight: 500;
position: relative;
margin: 40px;
color:#ffffff;
line-height: 2rem;
letter-spacing: 3px;
z-index: 1;
}
.FullWidthSBBoxInSpan{
color:#c4b7ff;
font-size: 3rem;
}

.FullWidthSBBoxInSpan2{
color:#ffacdc;
font-size: 3rem;
line-height: 3.5rem;
}

.FullWidthSBBoxInSpan3{
color:#faff7f;
font-size: 3rem;
}
}


@media screen and (max-width:767px) { 

.FullWidthSBBox{
position: relative;
padding: 1rem 0;
background-color: #3b3b3b;/* 背景色 */
text-align: center;
margin-bottom: 40px;
margin-top: 10px;
z-index: 90;
}
.FullWidthSBBox:after {
content: "";
display: block;
width: 40px;
height: 40px;
background-color: inherit;
transform: rotate(45deg);
position: absolute;
bottom: -20px;
left: 0;
right: 0;
margin: auto;
z-index: 0;
}
.FullWidthSBBox2{
position: relative;
padding: 0.6em;
background-color: #3b3b3b;/* 背景色 */
text-align: center;
margin-bottom: 40px;
}
.FullWidthSBBox2:after {
content: "";
display: block;
width: 40px;
height: 40px;
background-color: inherit;
transform: rotate(45deg);
position: absolute;
bottom: -20px;
left: 0;
right: 0;
margin: auto;
z-index: 0;
}

.FullWidthSBBoxIn{
font-size: 1.5rem;
font-weight: 500;
position: relative;
color:#ffffff;
line-height: 2rem;
letter-spacing: 1px;
z-index: 1;
}
.FullWidthSBBoxInSpan{
color:#c4b7ff;
font-size: 1.5rem;
}
.FullWidthSBBoxInSpan2{
color:#ffacdc;
font-size: 1.5rem;
}
.FullWidthSBBoxInSpan3{
color:#faff7f;
font-size: 1.5rem;
}
}


.FadeinFullWidthSB {
opacity : 0;
transform : translate(-1000px, 0px);
transition : all 0.5s;
}
.FadeinFullWidthSB.active{
opacity : 1;
transform : translate(0px, 0px);
}

.FadeinFullWidthSB2 {
  opacity : 0;
  transform : scale(0.1);
  transition : all 0.5s;
  }
  .FadeinFullWidthSB2.active{
  opacity : 1;
  transform : scale(1);
  }


/* TextBasic */
@media screen and (min-width:768px) {

.TextBasic {
text-align: left;
margin-top: 15px;
padding:  0px 10px 5px;
font-size: 1rem;
border-radius: 15px;
line-height: 1.8rem;
width: 40%;
margin: 0 auto;
font-weight: 500;
position: relative;
z-index: 91;
1px  1px 0px #ffffff,
-1px  1px 0px #ffffff,
1px -1px 0px #ffffff,
-1px -1px 0px #ffffff,
1px  0px 0px #ffffff,
0px  1px 0px #ffffff,
-1px  0px 0px #ffffff,
0px -1px 0px #ffffff;  
}
.TextBasicspan{
font-size: 3rem;
}
}

@media screen and (max-width:767px) {
.TextBasic {
text-align: left;
margin-top: -5px;
padding:  0px 10px 5px;
font-size: .8rem;
border-radius: 15px;
line-height: 1.2rem;
font-weight: 500;
position: relative;
z-index: 91;
1px  1px 0px #ffffff,
-1px  1px 0px #ffffff,
1px -1px 0px #ffffff,
-1px -1px 0px #ffffff,
1px  0px 0px #ffffff,
0px  1px 0px #ffffff,
-1px  0px 0px #ffffff,
0px -1px 0px #ffffff;  
}
.TextBasicspan{
font-size: 2rem;
}
}

.Underline {
background: linear-gradient(transparent 50%, #ffff00 50%);
}


/*固定ヘッダ*/
@charset "utf-8";
* {
box-sizing: border-box;
}
header {
padding: 3px 0px 2px;
position: fixed;
top: 0;
width: 100%;
background-color: transparent;
align-items: center;
position: fixed;
z-index: 97;
background: rgba(0, 0, 0, 80%);
letter-spacing : 0.2em;
}
@media screen and (min-width:768px) {
header {
padding: 0px 0px 2px;
}
}

.headerTitle {
margin: 7px 10px 3px;
}
.headerTitleImg {
width: 150px;
}
@media screen and (min-width:768px) {
.headerTitle {
margin: 14px 10px 0px;
}
.headerTitleImg {
width: 200px;
}
}

.headerTitleLink {	
text-decoration: none;
color: #fff;
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline:none;
display: inline-block;
}
.pc-nav a {	
text-decoration: none;
color: #fff;
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline:none;
}

header nav {
margin: 0 0 0 auto;
}
header ul {
list-style: ;
margin: ;
display: flex;
}
header li {
margin: 0 0 0 15px;
font-size: 14px;
}
.main-visual {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: url('') top center / cover no-repeat;
}
header h2 {
margin: 0;
font-size: 30px;
font-weight: normal;
color: #fff;
}

.pc-nav {
float: right;
margin: -20px 10px 16px;
}
@media screen and (max-width:767px) {
.pc-nav {
display: none;
}
}

/* アイコン */
.icon-hamburger {
background: ;
border: ;
cursor: pointer;
height: 50px;
position: relative;
width: 50px;
display: none;
margin-bottom: 0.4em;
}

.icon-hamburger span {
background: #fff;
display: block;
height: 16%;
left: 50%;
margin: -8% 0 0 -42%;
position: absolute;
top: 50%;
width: 84%;
}

.icon-hamburger span::before,
.icon-hamburger span::after {
background: #fff;
content: "";
display: block;
height: 100%;
left: 50%;
margin: -8% 0 0 -50%;
position: absolute;
top: 50%;
width: 100%;
}

.icon-hamburger span::before {
margin-top: -38%;
}

.icon-hamburger span::after {
margin-top: 19%;
}

@media screen and (max-width: 767px) {
.icon-hamburger {
display: inline-block;
position: fixed;
z-index: 98;
right: 0;
-webkit-tap-highlight-color:rgba(0,0,0,0);
margin-top: -2.5px;
}
}

/* 機能 */
.menu-container {
margin: 0;
}

.menu-container .menu {
border: ;
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
}

.menu-container .menu .menu-item {
flex: 1;
padding: 25px 10px;
letter-spacing: 5px;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
@media screen and (min-width: 768px) {
.menu-container .menu .menu-item {
padding: 0px;
}
}

.menu-container .menu .menu-item a {
background-color: ;
border-right: ;
color: rgb(255, 255, 255);
display: block;
padding: 0.6em 0.4em;
text-align: center;
text-decoration: none;
}
.menu-container .menu .menu-itemClose {
flex: 1;
letter-spacing: 5px;
-webkit-tap-highlight-color:rgba(0,0,0,0);
background-color: ;
border-right: ;
color: rgb(255, 255, 255);
display: block;
padding: 25px 10px;
text-align: center;
text-decoration: none;
}

.menu-container .menu .menu-item a:hover {
background:;
color: #ffffff;
}

.menu-container .menu .menu-item:last-child a {
border-right: none;
}

#modal-overlay {
background-color: rgba(0, 0, 0, 0.8);
display: none;
height: 120%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}

@media screen and (max-width: 767px) {
.menu-container .menu {
-webkit-transform: translate(-50%, -50%);
background: ;
display: none;
height: ;
left: 50%;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
width: ;
z-index: 100;
}
.menu-container .menu .menu-item a {
border-bottom: ;
border-right: none;
}
.menu-container .menu .menu-item:last-child a {
border-bottom: none;
}
}

/* モーダルウィンドウ */
.modal-wrapper {
z-index: 999;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 30px 10px;
text-align: center
}

.modal-wrapper:not(:target) {
opacity: 0;
visibility: hidden;
transition: opacity .3s, visibility .3s;
}

.modal-wrapper:target {
opacity: 1;
visibility: visible;
transition: opacity .4s, visibility .4s;
}

.modal-wrapper::after {
display: inline-block;
height: 100%;
margin-left: -.05em;
vertical-align: middle;
content: ""
}

.modal-wrapper .modal-window {
box-sizing: border-box;
display: inline-block;
z-index: 20;
position: relative;
width: 100%;
max-width: 600px;
padding: 15px 0px 15px;
border-radius: 2px;
background: ;
box-shadow: 0 0 30px rgba(0, 0, 0, .6);
vertical-align: middle
}

.modal-wrapper .modal-window .modal-content {
max-height: 80vh;
overflow-y: auto;
}

.modal-overlay {
z-index: 10;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 1)
}

.modal-wrapper .modal-close {
z-index: 20;
position: absolute;
top: 0;
right: 0;
width: 20px;
color: #fff!important;
font-size: 1.2rem;
font-weight: ;
line-height: 35px;
text-align: center;
text-decoration: none;
text-indent: 0
}

.modal-wrapper .modal-close:hover {
color: #fff!important
}


/* トップオブジェクト */
/* 全体 */
@media (min-width: 480px) {
.TopObBoxAll {
background: linear-gradient(#eeff7e 10%, #ffffff 70%);
}
}
@media (max-width: 480px) {
.TopObBoxAll {
width: 100%;
height: auto;
background-repeat: repeat-x;
background-size: 40%;
padding-top: 50px; 
background-position: 0 47px, bottom;
background: linear-gradient(#f1ff96 0% 15%, #ffffff 25% 75%,#f1ff96 95% 100%);
}
}
/* タイトル */
@media (min-width: 480px) {
.textbox2 {
text-align: center;
position: relative;
z-index: 77;
}
.textbox2Img {
width: 47%;
}
.TopObBoxTitleAnimation {
opacity : 0;
transform : translateX(0px) translateY(-200px);
transition : all 1s;
transition-delay : 0s;
}
.TopObBoxTitleAnimation.active{
opacity : 1;
transform : translateX(0px) translateY(0px);
}
.reflection-img{
position    :relative;
text-align: center;
}
/* ------------キラリ------------ */
.shinybtn2 {   
overflow: hidden;
}
.shinybtn2::before {
position: absolute;
content: '';
top: -180px;
left: 0;
width: 100px;
height: 100%;
background-color: rgba(255, 255, 255, 100%);
animation: shinybtn2 5s ease-in-out infinite;
}
@-webkit-keyframes shinybtn2 {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
90% { -webkit-transform: scale(0) rotate(45deg); opacity: .1; }
91% { -webkit-transform: scale(4) rotate(45deg); opacity: .8; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
}

@media (max-width: 480px) {
.textbox2 {
text-align: center;
position: relative;
z-index: 90;
}
.textbox2Img {
width: 90%;
}
.TopObBoxTitleAnimation {
opacity : 0;
transform : translateX(0px) translateY(-200px);
transition : all .5s;
transition-delay : 0s;
}
.TopObBoxTitleAnimation.active{
opacity : 1;
transform : translateX(0px) translateY(0px);
}
.reflection-img{
position    :relative;
text-align: center;
}
/* ------------キラリ------------ */
.shinybtn2 {   
overflow: hidden;
}
.shinybtn2::before {
position: absolute;
content: '';
top: -180px;
left: 0;
width: 100px;
height: 100%;
background-color: rgba(255, 255, 255, 80%);
animation: shinybtn2 5s ease-in-out infinite;
}
@-webkit-keyframes shinybtn2 {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
90% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
91% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
}

/* オブジェクト */
@media (min-width: 1000px) {
.TopObBox {
position: relative;
height: 340px;
margin-top: -25px;
}

.TopObBox1 {
position: absolute;
z-index: 85;
top: 2%;
left: 53%;
}
.TopObBox1 img {
max-width: 460px;
}
.TopObBox1Animation {
opacity : 1;
transform : translateX(-200px) translateY(0px);
transition : all 1s;
transition-delay : 0s;
}
.TopObBox1Animation.active{
opacity : 1;
transform : translateX(0px) translateY(0px);
}

.TopObBox2 {
position: absolute;
z-index: 79;
top: 2%;
left: 20%;
}
.TopObBox2 img {
max-width: 460px;
}
.TopObBox2Animation {
opacity : 1;
transform : translateX(-90px) translateY(0px);
transition : all 1s;
transition-delay : 0s;
}
.TopObBox2Animation.active{
opacity : 1;
transform : translateX(0px) translateY(0px);
}

.TopObBox3 {
position: absolute;
z-index: 78;
top: 3%;
left: 31%;
}
.TopObBox3 img {
max-width: 200px;
}
.TopObBox3Animation {
opacity : 1;
transform : translateX(-60px) translateY(0px);
transition : all 1s;
transition-delay : 0s;
}
.TopObBox3Animation.active{
opacity : 1;
transform : translateX(0px) translateY(0px);
}

.TopObBox4 {
position: absolute;
z-index: 77;
top: 20%;
left: 41%;
}
.TopObBox4 img {
max-width: 300px;
}
.TopObBox4Animation {
opacity : 1;
transform : translateX(-40px) translateY(0px);
transition : all 1s;
transition-delay : 0s;
}
.TopObBox4Animation.active{
opacity : 1;
transform : translateX(0px) translateY(0px);
}

.TopObBox5 {
position: absolute;
z-index: 75;
top: -10%;
left: 32%;
}
.TopObBox5 img {
max-width: 500px;
}
.TopObBox5Animation {
opacity : 0;
transform : scale(1);
transition : all 1s;
transition-delay : .5s;
}
.TopObBox5Animation.active{
opacity : 1;
transform : scale(1);
}

.TopObBox7 {
position: absolute;
z-index: 86;
top: 75%;
left: 85%;
margin-top: ;
}
.TopObBox7 img {
max-width: 190px;
}
.TopObBox7Animation {
opacity : 0;
transform : translateX(0px) translateY(-150px);
transition : all .5s;
transition-delay : 0s;
}
.TopObBox7Animation.active{
opacity : 1;
transform : translateX(0px) translateY(0px);
}

.TopObBox8 {
position: absolute;
z-index: 90;
top: -40%;
left: 77%;
}
.TopObBox8 img {
max-width: 280px;
}
.TopObBoxBalloon {
opacity : 0;
transform : translate(0, 0px)scale(0,0);
transition : all 0.5s;
transition-delay : .5s;
}
.TopObBoxBalloon.active{
opacity : 1;
transform : translate(0, 0px)scale(1,1);
animation: TopObBoxBalloon 3s ease-out .5s 1 normal both;
}
@keyframes TopObBoxBalloon {
0% { transform: scale(1); }
10% { transform: scale(1.05); }
20% { transform: scale(1); }
30% { transform: scale(1.02); }
40% { transform: scale(1); }
100% { transform: scale(1); }
}
}


@media (min-width: 480px) and (max-width: 1000px) {
.TopObBox {
position: relative;
height: 350px;
padding-top: 0px;
background-size: 100% auto;
}

.TopObBox1 {
position: absolute;
z-index: 80;
top: 4%;
left: 52%;
}
.TopObBox1 img {
max-width: 400px;
}
.TopObBox1Animation {
opacity : 1;
transform : translateX(-200px) translateY(0px);
transition : all 1s;
transition-delay : 0s;
}
.TopObBox1Animation.active{
opacity : 1;
transform : translateX(0px) translateY(0px);
}

.TopObBox2 {
position: absolute;
z-index: 79;
top: 12%;
left: 0%;
}
.TopObBox2 img {
max-width: 420px;
}
.TopObBox2Animation {
opacity : 1;
transform : translateX(-90px) translateY(0px);
transition : all 1s;
transition-delay : 0s;
}
.TopObBox2Animation.active{
opacity : 1;
transform : translateX(0px) translateY(0px);
}

.TopObBox3 {
position: absolute;
z-index: 78;
top: 15%;
left: 20%;
}
.TopObBox3 img {
max-width: 140px;
}
.TopObBox3Animation {
opacity : 1;
transform : translateX(-60px) translateY(0px);
transition : all 1s;
transition-delay : 0s;
}
.TopObBox3Animation.active{
opacity : 1;
transform : translateX(0px) translateY(0px);
}

.TopObBox4 {
position: absolute;
z-index: 77;
top: 25%;
left: 35%;
}
.TopObBox4 img {
max-width: 250px;
}
.TopObBox4Animation {
opacity : 1;
transform : translateX(-40px) translateY(0px);
transition : all 1s;
transition-delay : 0s;
}
.TopObBox4Animation.active{
opacity : 1;
transform : translateX(0px) translateY(0px);
}

.TopObBox5 {
position: absolute;
z-index: 75;
top: 0%;
left: 10%;
}
.TopObBox5 img {
max-width: 500px;
}
.TopObBox5Animation {
opacity : 0;
transform : scale(1);
transition : all 1s;
transition-delay : .5s;
}
.TopObBox5Animation.active{
opacity : 1;
transform : scale(1);
}

.TopObBox7 {
position: absolute;
z-index: 81;
top: 85%;
left: 78%;
}
.TopObBox7 img {
max-width: 160px;
}
.TopObBox7Animation {
opacity : 0;
transform : scale(1);
transition : all 1s;
transition-delay : 1s;
}
.TopObBox7Animation.active{
opacity : 1;
transform : scale(1);
}
}


@media screen and (max-width:480px) {
.TopObBox {
position: relative;
height: 200px;
}

.TopObBox1 {
position: absolute;
z-index: 80;
top: 0%;
left: 50%;
}
.TopObBox1 img {
max-width: 220px;
}
.TopObBox1Animation {
opacity : 1;
transform : translateX(-200px) translateY(0px);
transition : all 1s;
transition-delay : 0s;
}
.TopObBox1Animation.active{
opacity : 1;
transform : translateX(0px) translateY(0px);
}

.TopObBox2 {
position: absolute;
z-index: 79;
top: 10%;
left: -2%;
}
.TopObBox2 img {
max-width: 250px;
}
.TopObBox2Animation {
opacity : 1;
transform : translateX(-90px) translateY(0px);
transition : all 1s;
transition-delay : 0s;
}
.TopObBox2Animation.active{
opacity : 1;
transform : translateX(0px) translateY(0px);
}

.TopObBox3 {
position: absolute;
z-index: 78;
top: 22%;
left: 18%;
}
.TopObBox3 img {
max-width: 60px;
}
.TopObBox3Animation {
opacity : 1;
transform : translateX(-60px) translateY(0px);
transition : all 1s;
transition-delay : 0s;
}
.TopObBox3Animation.active{
opacity : 1;
transform : translateX(0px) translateY(0px);
}

.TopObBox4 {
position: absolute;
z-index: 77;
top: 27%;
left: 32%;
}
.TopObBox4 img {
max-width: 120px;
}
.TopObBox4Animation {
opacity : 1;
transform : translateX(-40px) translateY(0px);
transition : all 1s;
transition-delay : 0s;
}
.TopObBox4Animation.active{
opacity : 1;
transform : translateX(0px) translateY(0px);
}

.TopObBox5 {
position: absolute;
z-index: 75;
top: 0%;
left: 22%;
}
.TopObBox5 img {
max-width: 150px;
}
.TopObBox5Animation {
opacity : 0;
transform : scale(1);
transition : all 1s;
transition-delay : 0s;
}
.TopObBox5Animation.active{
opacity : 1;
transform : scale(1);
}

.TopObBox7 {
position: absolute;
z-index: 81;
top: 5%;
left: 25%;
}
.TopObBox7 img {
max-width: 130px;
}
.TopObBox7Animation {
opacity : 0;
transform : scale(1) rotate(-5deg);
transition : all 1s;
transition-delay : .3s;
}
.TopObBox7Animation.active{
opacity : 1;
transform : scale(1) rotate(-5deg);
}
}


/* オブジェクト下 */
@media screen and (min-width:768px) {
.TopTextBox {
margin-top: ;
padding-top: ;
background: ;
position: relative;
z-index: 90;
}
.textbox1 {
text-align: center;
padding:  15px 10px 15px;
font-size: 1.2rem;
color: #fff;
font-weight: 500;
background-color: #333333;
position: relative;
z-index: 90;
line-height: 1.2;
}
}

@media screen and (max-width:767px) {
.TopTextBox {
margin-top: ;
padding-top: ;
background: ;
position: relative;
z-index: 90;
}
.textbox1 {
text-align: center;
padding:  10px 0px 10px;
font-size: .8rem;
color: #fff;
font-weight: 500;
background-color: #333333;
line-height: 1.2;
}
}









/* 白背景 */
.BackgroundNone{
width: 100%;
height: auto;
background-color: #FFF;
background-size: 80px 80px;
z-index: 89;
position: relative;
padding-bottom: 10px;
padding-top: 5px;
}










/* トップピックアップ */
@media screen and (min-width:1000px) {
.TopPickUpBox {
position: absolute;                        
display: flex;
max-width: 500px;
margin: 0 auto;
font-size: 1rem;
font-weight: bold;
align-items: center;
color: #cf4a32;
font-family: 'Hachi Maru Pop', cursive;
line-height: 1.2rem;
z-index: 90;
flex-direction: column;
left: 2%;
width: 300px;
top: -45%;
}

.TopPickUpBox1 {
flex: 2;
background:linear-gradient(#fff, #ffffa3);
padding: 10% 10%;
text-align: center;
margin: 5px;
border: solid 5px #ff3e1c;
border-radius: 10px;
font-size: 2rem;
line-height: 1.2rem;
}
.TopPickUpBox1 p {
padding-bottom: 5px; 
}
.TopPickUpBoxAnime1 {
opacity : 0;
transform : scale(0.5,0.5) translate(0px, -300px);
transition : all 0.2s;
transition-delay : .5s;
}
.TopPickUpBoxAnime1.active{
opacity : 1;
transform : scale(1,1);
}

.TopPickUpBox2 {
flex: 1;
background:linear-gradient(#fff, #ffffa3);
padding: 10% 5%;
text-align: center;
margin: 5px;
border: solid 5px #ff3e1c;
border-radius: 10px;
font-size: 1.6rem;
line-height: 1.2rem;
}
.TopPickUpBox2 p {
padding-bottom: 5px; 
}
.TopPickUpBoxAnime2 {
opacity : 0;
transform : scale(0.5,0.5) translate(0px, -300px);
transition : all 0.2s;
transition-delay : .6s;
}
.TopPickUpBoxAnime2.active{
opacity : 1;
transform : scale(1,1);
}

.TopPickUpBox3 {
flex: 1;
background:linear-gradient(#fff, #ffffa3);
padding: 10% 4%;
text-align: center;
margin: 5px;
border: solid 5px #ff3e1c;
border-radius: 10px;
font-size: 1.8rem;
line-height: 1.2rem;
}
.TopPickUpBox3 p {
padding-bottom: 5px; 
}
.TopPickUpBoxAnime3 {
opacity : 0;
transform : scale(0.5,0.5) translate(0px, -300px);
transition : all 0.2s;
transition-delay : .7s;
}
.TopPickUpBoxAnime3.active{
opacity : 1;
transform : scale(1,1);
}

.TopPickUpBoxSpan{
font-size: 1.1rem;
}
}


@media screen and (max-width:999px) {
.TopPickUpBox { 
position:relative;                            
display: flex;
max-width: 700px;
margin: 0 auto;
height: ;
padding: ;
background: ;
font-size: .8rem;
font-weight: bold;
align-items: center;
color: #cf4a32;
line-height: 1rem;
font-family: 'Hachi Maru Pop', cursive;
z-index: 90;
margin-top: 5px;
}

.TopPickUpBox1 {
flex: 1;
background:linear-gradient(#fff, #ffffa3);
padding: 0% 0%;
text-align: center;
margin: 5px;
border: solid 3px #ff3e1c;
border-radius: 10px;
font-size: 1rem;
line-height: ;
}
.TopPickUpBox1 p {
padding-bottom: 5px; 
}
.TopPickUpBoxAnime1 {
opacity : 0;
transform : scale(0.5,0.5) translate(0px, -550px);
transition : all 0.2s;
transition-delay : .5s;
}
.TopPickUpBoxAnime1.active{
opacity : 1;
transform : scale(1,1) translate(0px, 0px);
}

.TopPickUpBox2 {
flex: 1;
background:linear-gradient(#fff, #ffffa3);
padding: 0% 0%;
text-align: center;
margin: 5px;
border: solid 3px #ff3e1c;
border-radius: 10px;
font-size: .9rem;
line-height: ;
}
.TopPickUpBox2 p {
padding-bottom: 5px; 
}      
.TopPickUpBoxAnime2 {
opacity : 0;
transform : scale(0.5,0.5) translate(0px, -550px);
transition : all 0.2s;
transition-delay : .6s;
}
.TopPickUpBoxAnime2.active{
opacity : 1;
transform : scale(1,1) translate(0px, 0px);
}

.TopPickUpBox3 {
flex: 1;
background:linear-gradient(#fff, #ffffa3);
padding: 0% 0%;
text-align: center;
margin: 5px;
border: solid 3px #ff3e1c;
border-radius: 10px;
font-size: 1rem;
line-height: ;
}
.TopPickUpBox3 p {
padding-bottom: 5px; 
}
.TopPickUpBoxAnime3 {
opacity : 0;
transform : scale(0.5,0.5) translate(0px, -550px);
transition : all 0.2s;
transition-delay : .7s;
}
.TopPickUpBoxAnime3.active{
opacity : 1;
transform : scale(1,1) translate(0px, 0px);
}

.TopPickUpBoxSpan{
font-size: .6rem;
}
}








.TopPickUpBoxAnimeb1 {
  opacity : 0;
  transform : scale(0.5,0.5) translate(0px, -500px);
  transition : all 0.2s;
  }
  .TopPickUpBoxAnimeb1.active{
  opacity : 1;
  transform : scale(1,1) translate(0px, 0px);
  }
  .TopPickUpBoxAnimeb2 {
    opacity : 0;
    transform : scale(0.5,0.5) translate(0px, -500px);
    transition : all 0.2s;
   
    }
    .TopPickUpBoxAnimeb2.active{
       transition-delay : .5s;
    opacity : 1;
    transform : scale(1,1) translate(0px, 0px);
    }
    .TopPickUpBoxAnimeb3 {
      opacity : 0;
      transform : scale(0.5,0.5) translate(0px, -500px);
      transition : all 0.2s;
      }
      .TopPickUpBoxAnimeb3.active{
           transition-delay : 1s;
      opacity : 1;
      transform : scale(1,1) translate(0px, 0px);
      }








/*アクセス情報*/
@media screen and (min-width:1000px) {
.h__mdl {
display: flex;
}
.AccessInformationFlex {
margin: auto;
display: flex;
margin-top: 10px;
}

.h__mdlLogo {
float: left;
position: relative;
display: block;
margin-top: 10px;
margin-left: 10px;
}
.h__mdlLogo img {
width: 220px;
height: auto;
}
.h__mdlLogo .txt {
font-size: .8rem;
color: #603813;
position: absolute;
top: 100%;
left: 11%;
}

.h__mdlInfoTitle {
font-size: 1.2rem;
line-height: 1.4;
margin-left: 20px;
}
.h__mdlInfoBtn, .AccessInformationFlex2, .h__mdlInfoCircle, .h__mdlInfoTitle {
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
.h__mdlInfoCircle {
}

.h__mdlInfoCircleInner {
width: ;
height: ;
border-radius: 100%;
display: table;
border: 3px solid #ff4f4f;
}
.h__mdlInfoCircleInner .txt {
font-size: 1.2rem;
letter-spacing: .2em;
line-height: 1.3;
color: #ff4f4f;
display: table-cell;
vertical-align: middle;
text-align: center;
font-weight: 500;
padding: 10px;
padding: 10px 10px 12px 14px;
}

.AccessInformationFlex2 {
margin-top: 4px;
margin-left: 4px;
}
.AccessInformationFlex2 .tel {
font-size: 2.5rem;
line-height: 1;
letter-spacing: .06em;
text-decoration: none;
outline:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

.u-en {
font-family: DINMittelschrift;
border: 0;
color: #202020;
cursor: pointer;
outline: none;
text-decoration: none;
}
.AccessInformationFlex2 .txt {
font-size: 1rem;
}

}


@media (min-width: 768px) and (max-width: 1000px) {
.h__mdl {
display: flex;
}
.AccessInformationFlex {
margin: auto;
display: flex;
text-align: center;
margin-top: 10px;
}

.h__mdlLogo {
float: left;
position: relative;
display: block;
margin-top: 10px;
margin-left: 10px;
}
.h__mdlLogo img {
width: 150px;
height: auto;
}
.h__mdlLogo .txt {
font-size: .6rem;
color: #603813;
position: absolute;
top: 90%;
left: 5%;
}

.h__mdlInfoTitle {
font-size: .9rem;
line-height: 1.4;
margin-left: 20px;
margin-top: 5px;
}
.h__mdlInfoBtn, .AccessInformationFlex2, .h__mdlInfoCircle, .h__mdlInfoTitle {
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
.h__mdlInfoCircle {
}

.h__mdlInfoCircleInner {
width: ;
height: ;
border-radius: 100%;
display: table;
border: 2px solid #ff4f4f;
}
.h__mdlInfoCircleInner .txt {
font-size: .8rem;
letter-spacing: .2em;
line-height: 1.3;
color: #ff4f4f;
display: table-cell;
vertical-align: middle;
text-align: center;
font-weight: 500;
padding: 10px;
padding: 5px 5px 7px 7px;
}

.AccessInformationFlex2 {
margin-left: 10px;
}
.AccessInformationFlex2 .tel {
font-size: 2.2rem;
line-height: 1;
letter-spacing: .06em;
text-decoration: none;
outline:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

.u-en {
font-family: DINMittelschrift;
border: 0;
color: #202020;
cursor: pointer;
outline: none;
text-decoration: none;
}
.AccessInformationFlex2 .txt {
font-size: .9rem;
}
}


@media screen and (max-width:767px) {
.h__mdl {
display: flex;
}
.AccessInformationFlex {
margin: auto;
text-align: center;
}

.h__mdlLogo {
float: left;
position: relative;
display: block;
margin-top: 10px;
margin-left: 10px;
}
.h__mdlLogo img {
width: 150px;
height: auto;
}
.h__mdlLogo .txt {
font-size: .6rem;
color: #603813;
position: absolute;
top: 90%;
left: 5%;
}

.h__mdlInfoTitle {
font-size: .9rem;
line-height: 1.4;
margin-left: 5px;
margin-top: 5px;
}
.h__mdlInfoBtn, .AccessInformationFlex2, .h__mdlInfoCircle, .h__mdlInfoTitle {
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
.h__mdlInfoCircle {
}

.h__mdlInfoCircleInner {
width: ;
height: ;
border-radius: 100%;
display: table;
border: 2px solid #ff4f4f;
}
.h__mdlInfoCircleInner .txt {
font-size: .8rem;
letter-spacing: .2em;
line-height: 1.3;
color: #ff4f4f;
display: table-cell;
vertical-align: middle;
text-align: center;
font-weight: 500;
padding: 10px;
padding: 7px 5px 5px 7px;
}

.AccessInformationFlex2 {
margin-top: 10px;
}
.AccessInformationFlex2 .tel {
font-size: 2.2rem;
line-height: 1;
letter-spacing: .06em;
text-decoration: none;
outline:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

.u-en {
font-family: DINMittelschrift;
border: 0;
color: #202020;
cursor: pointer;
outline: none;
text-decoration: none;
}
.AccessInformationFlex2 .txt {
font-size: .9rem;
}
}


/* シンプルボタン */
@media screen and (min-width:768px) {
.cp_hr06 {
position: relative;
height: 10px;
border-width: 0;
background-image:         linear-gradient(90deg,
transparent 0%,#ffcf00 50%,transparent 100%);
margin: 20px 0px 20px;
}

.SimpleButtonBox {
text-align: center;
margin-top: 20px;
padding-bottom: ;
}
.SimpleButtonBox h2 {
color: #000;
font-size: 1.5rem;
line-height: ;
font-weight: bold;
text-align: center;
margin: 0px 0px 20px;
font-family: 'Hachi Maru Pop', cursive;
}
}


@media screen and (max-width:767px) {
.cp_hr06 {
position: relative;
height: 10px;
border-width: 0;
background-image:         linear-gradient(90deg,
transparent 0%,#ffcf00 50%,transparent 100%);
margin: 10px 0px 10px;
}

.SimpleButtonBox {
padding: 10px 10px 10px;
text-align: center;
}
.SimpleButtonBox h2 {
color: #000;
font-size: .9rem;
line-height: 1.5rem;
font-weight: bold;
text-align: center;
margin: 0px 0px 10px;
font-family: 'Hachi Maru Pop', cursive;
}
}

/* デザイン */
@media screen and (min-width:768px) {

/* ------------ボタン------------ */

.btn-wrap {
padding: 0px 10px 0px;
text-align: center;
border-radius: 10px;
background: ;
}

.btn, a.btn, button.btn {
font-size: 2rem;
font-weight: 500;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 2rem 5rem;
cursor: pointer;
user-select: none;
transition: all .3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: .1em;
color: #212529;
border-radius: .5rem;
border: solid #e06000;
text-shadow: .5px .5px 2px #494949;
}

a.btn--green {
color: #fff;
background-color: #ff006e;
}

a.btn--green:hover {
color: #fff;
background: #ff006e;
}

a.btn--green.btn--cubic {
border-bottom: 5px solid #cd5800;
}

a.btn--green.btn--cubic:hover {
margin-top: 3px;
border-bottom: 2px solid #cd5800;
}

a.btn-c {
font-size: 2rem;
position: relative;
padding: 1.5rem 3rem 1.5rem 2rem;
border-radius: 100vh;
}

a.btn-c:before {  
font-size: 1.6rem;
line-height: 1;
position: absolute;
top: calc(50% - .8rem);
right: 1rem;
content: '';
}
}


@media screen and (max-width:767px) {

/* ------------ボタン------------ */

.btn-wrap {
padding: 0px 10px 0px;
text-align: center;
border-radius: 10px;
background: ;
}

.btn, a.btn, button.btn {
font-size: 1.2rem;
font-weight: 500;
line-height: 1.5;
position: relative;
display: inline-block;
padding: .6rem 2.2rem;
cursor: pointer;
user-select: none;
transition: all .3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: .1em;
color: #212529;
border-radius: .5rem;
border: solid #e06000;
text-shadow: .5px .5px 2px #494949;
}

a.btn--green {
color: #fff;
background-color: #ff006e;
}

a.btn--green:hover {
color: #fff;
background: #ff006e;
}

a.btn--green.btn--cubic {
border-bottom: 5px solid #cd5800;
}

a.btn--green.btn--cubic:hover {
margin-top: 3px;
border-bottom: 2px solid #cd5800;
}

a.btn-c {
font-size: 2rem;
position: relative;
padding: 1.5rem 3rem 1.5rem 2rem;
border-radius: 100vh;
}

a.btn-c:before {  
font-size: 1.6rem;
line-height: 1;
position: absolute;
top: calc(50% - .8rem);
right: 1rem;
content: '';
}
}


.btnmin {  
  font-size: 1.6rem;
  }
  @media screen and (max-width:767px) {
    .btnmin {  
      font-size: 1.1rem;
      }
    }


/* ------------キラリ------------ */
.shinybtn {   
overflow: hidden;
}
.shinybtn::before {
position: absolute;
content: '';
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: shinybtn 3s ease-in-out infinite;
}
@-webkit-keyframes shinybtn {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}














/* Worry */
@media screen and (min-width:480px) {
.WorryBoxAll {                             
padding: 20px 0px;
}
.WorryBoxTitle {                             
text-align: center;
background: #707070;
}
.WorryBoxTitle img {                             
width: 35%;
}
.WorryBoxFlex {                             
display: flex;
max-width: 800px;
margin: 0 auto;
background: ;   
align-items: center;
justify-content: center;
}

.WorryBoxFlex2 {
flex: 1;
position:relative;
text-align: center;
z-index: 10;
background-color: ;
}
.WorryBoxFlex2 img {
max-width: 100%;
height: auto;
padding-left: ;
}

.WorryBoxFlex1 {
flex: 1;
text-align: center;
background-color: ;
position:relative;
z-index: 20;
padding-top: ;
}
.WorryBoxFlex1 img {
max-width: 90%;
height: auto;
padding-left: ;
margin-bottom: 15%;
}
.WorryBoxFlexTxtAll {
transform: rotate(-2deg);
}
.WorryBoxFlexTxt {
font-size: 2.5rem;
position: absolute;
margin-left: 120px;
margin-top: -30px;
font-weight: bold;
color: #cf8200;
}

.WorryBoxFlex3 {
flex: 1;
position:relative;
text-align: center;
z-index: 10;
background-color: ;
}
.WorryBoxFlex3 img {
max-width: 100%;
height: auto;
padding-right: ;
}
}


@media screen and (max-width:480px) {
.WorryBoxAll {                             
padding: 20px 0px;
}
.WorryBoxTitle {                             
text-align: center;
background: #707070;
}
.WorryBoxTitle img {                             
width: 80%;
}

.WorryBoxFlex {                             
display: flex;
width: 100%;
margin: 0 auto;
background: ;   
align-items: center;
justify-content: center;
}

.WorryBoxFlex2 {
flex: 1;
position:relative;
text-align: center;
z-index: 10;
background-color: ;
}
.WorryBoxFlex2 img {
max-width: 120px;
height: auto;
margin-left: 20%;
}

.WorryBoxFlex1 {
flex: 1;
text-align: center;
background-color: ;
position:relative;
z-index: 20;
padding-top: ;
}
.WorryBoxFlex1 img {
max-width: 110px;
padding-left: ;
margin-bottom: 20%;
}
.WorryBoxFlexTxtAll {
transform: rotate(-2deg);
}
.WorryBoxFlexTxt {
font-size: 1.2rem;
position: absolute;
margin-left: 35px;
margin-top: -15px;
font-weight: bold;
color: #cf8200;
}

.WorryBoxFlex3 {
flex: 1;
position:relative;
text-align: center;
z-index: 10;
background-color: ;
}
.WorryBoxFlex3 img {
max-width: 120px;
height: auto;
margin-left: -40%;
}
}


/* Appear */
.WorryAppear {
opacity : 0;
transform : translate(0, 0px)scale(0,0);
transition : all 0.5s;
transition-delay : 0s;
}
.WorryAppear.active{
opacity : 1;
transform : translate(0, 0px)scale(1,1);
animation: balloonAnime 3s ease-out 0s 1 normal both;
}
.WorryAppear2 {
opacity : 0;
transform : translate(0, 0px)scale(0,0);
transition : all 0.5s;
transition-delay : .2s;
}
.WorryAppear2.active{
opacity : 1;
transform : translate(0, 0px)scale(1,1);
animation: balloonAnime 3s ease-out .2s 1 normal both;
}
.WorryAppear3 {
opacity : 0;
transform : translate(0, 0px)scale(0,0);
transition : all 0.5s;
transition-delay : 0s;
}
.WorryAppear3.active{
opacity : 1;
transform : translate(0, 0px)scale(1,1);
animation: balloonAnime 3s ease-out 0s 1 normal both;
}
.WorryAppear4 {
opacity : 0;
transform : translate(0, 0px)scale(0,0);
transition : all 0.5s;
transition-delay : .2s;
}
.WorryAppear4.active{
opacity : 1;
transform : translate(0, 0px)scale(1,1);
animation: balloonAnime 3s ease-out .2s 1 normal both;
}
.WorryAppear5 {
opacity : 0;
transform : translate(0, 0px)scale(1,1);
transition : all 0.5s;
transition-delay : 0s;
}
.WorryAppear5.active{
opacity : 1;
transform : translate(0, 0px)scale(1,1);
}


@media screen and (max-width:767px) {
.WorryAppear {
opacity : 0;
transform : translate(0, 0px)scale(0,0);
transition : all 0.5s;
transition-delay : 0s;
}
.WorryAppear.active{
opacity : 1;
transform : translate(0, 0px)scale(1,1);
animation: balloonAnime 3s ease-out 0s 1 normal both;
}
.WorryAppear2 {
opacity : 0;
transform : translate(0, 0px)scale(0,0);
transition : all 0.5s;
transition-delay : .2s;
}
.WorryAppear2.active{
opacity : 1;
transform : translate(0, 0px)scale(1,1);
animation: balloonAnime 3s ease-out .2s 1 normal both;
}
.WorryAppear3 {
opacity : 0;
transform : translate(0, 0px)scale(0,0);
transition : all 0.5s;
transition-delay : .3s;
}
.WorryAppear3.active{
opacity : 1;
transform : translate(0, 0px)scale(1,1);
animation: balloonAnime 3s ease-out .3s 1 normal both;
}
.WorryAppear4 {
opacity : 0;
transform : translate(0, 0px)scale(0,0);
transition : all 0.5s;
transition-delay : .5s;
}
.WorryAppear4.active{
opacity : 1;
transform : translate(0, 0px)scale(1,1);
animation: balloonAnime 3s ease-out .5s 1 normal both;
}
.WorryAppear5 {
opacity : 0;
transform : translate(0, 0px)scale(1,1);
transition : all 0.5s;
transition-delay : .2s;
}
.WorryAppear5.active{
opacity : 1;
transform : translate(0, 0px)scale(1,1);
}
}

@keyframes balloonAnime {
0% { transform: scale(1); }
10% { transform: scale(1.05); }
20% { transform: scale(1); }
30% { transform: scale(1.02); }
40% { transform: scale(1); }
100% { transform: scale(1); }
}


.WorryUp-down {
animation-name: WorryUp-down;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 1.5s;
}
@keyframes WorryUp-down {
0% {
transform: translate(0,5px);
}
100% {
transform: translate(0,-5px)
}
}


/* 動く矢印 */
@media screen and (max-width:767px) {
.MovingArrow {
margin: ;
padding-top: ; /* 要素の上の余白調整 */
position: relative;
margin-top: -15px;
z-index: ;
margin-bottom: 10%;
}
.MovingArrow:after {
border-top: 35px solid #ffc4c4; /* 角度を緩やかなものに指定 */
border-left: 75px solid transparent; /* 左のボーダーを透過に指定 */
border-right: 75px solid transparent; /*右のボーダーを透過に指定*/
content: "";
position: absolute;
top: ; /* 四角形の高さと同じ物を指定 */
left: 50%; /* 中央寄せに使用 */
margin-left: -75px; /* 中央寄せに使用 */
}
}
@media screen and (min-width:768px) {
.MovingArrow {
margin: ;
padding-top: ; /* 要素の上の余白調整 */
position: relative;
margin-top: -30px;
z-index: 90;
margin-bottom: 5%;
}
.MovingArrow:after {
border-top: 70px solid #ffc4c4; /* 角度を緩やかなものに指定 */
border-left: 200px solid transparent; /* 左のボーダーを透過に指定 */
border-right: 200px solid transparent; /*右のボーダーを透過に指定*/
content: "";
position: absolute;
top: ; /* 四角形の高さと同じ物を指定 */
left: 50%; /* 中央寄せに使用 */
margin-left: -200px; /* 中央寄せに使用 */
}
}

@media screen and (max-width:767px) {
.MovingArrowMove {
opacity : 0;
transform : translateX(10px) translateY(-40px);
transition : all 1.5s;
transition-delay : .5s;
}
.MovingArrowMove.active{
opacity : 1;
transform : translateX(0px) translateY(0px);
}
}
@media screen and (min-width:768px) {
.MovingArrowMove {
opacity : 0;
transform : translateX(0px) translateY(-70px);
transition : all 1.5s;
transition-delay : 0s;
}
.MovingArrowMove.active{
opacity : 1;
transform : translateX(0px) translateY(0px);
}
}

/*漫画2*/
@media screen and (min-width:768px) {
.Manga2{   
text-align: center;
position: relative;
z-index: 0;
padding-bottom: 10px;
}
.Manga2 img{   
width: 50%;
}
}

@media screen and (max-width:767px) {
.Manga2{   
position: relative;
z-index: 0;
padding-bottom: 10px;
}
.Manga2 img{   
width: 100%;
}
}

/*3Dフリップ*/
.SolidText {
color: #fff;
font-size: 5em;
font-weight: bold;
font-family: Helvetica;
text-shadow: 
0 1px 0 #ccc, 
0 2px 0 #c9c9c9, 
0 3px 0 #bbb, 
0 4px 0 #b9b9b9, 
0 5px 0 #aaa, 
0 6px 1px rgba(0,0,0,.1), 
0 0 5px rgba(0,0,0,.1), 
0 1px 3px rgba(0,0,0,.3), 
0 3px 5px rgba(0,0,0,.2), 
0 5px 10px rgba(0,0,0,.25), 
0 10px 10px rgba(0,0,0,.2), 
0 20px 20px rgba(0,0,0,.15);
text-align: center;
word-wrap: break-word;
position: relative;
z-index: 90;
}


/*メイン*/
@media screen and (min-width:768px) {
.Solidback {
background-repeat: repeat;
margin:15px 0px 0px 0px;
height: ;
background: ;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.SolidWrapper{
position: relative;
width:100%;
}

.cols{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.col{
width: calc(80% );
margin: 0px 0px 10px 0px;
cursor: pointer;
}

.container{
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
}

/*テキスト位置、表面幅*/
.front,
.back{
background-size: cover;
box-shadow: 0 4px 80px 0 rgba(0,0,0,30%);
border-radius: 10px;
background-position: center;
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: left;
min-height: 300px;
height: auto;
border-radius: 10px;
}

.back{
background: #cedce7;
background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
background: linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
text-shadow    : 
2px  2px 3px #000000,
-2px  2px 3px #000000,
2px -2px 3px #000000,
-2px -2px 3px #000000,
2px  0px 3px #000000,
0px  2px 3px #000000,
-2px  0px 3px #000000,
0px -2px 3px #000000;   
color: #fff;
line-height: 2rem;
font-size: 1.7rem;
line-height: 2.5rem;
}


.front:after{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
content: '';
display: block;
opacity: .6;
background-color: ;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 10px;
}


.container:hover .front,
.container:hover .back{
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}


/*裏面背景画像、裏面幅*/
.back{
position: absolute;
top: 0;
left: 0;
width: 100%;
background: url() 20%;
background: #2c2c2c;
}


.inner{
-webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
transform: translateY(-50%) translateZ(60px) scale(0.94);
top: 50%;
position: absolute;
left: 0;
width: 100%;
padding: 2rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 1px solid transparent;
-webkit-perspective: inherit;
perspective: inherit;
z-index: 2;
}
.innerIn{
-webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
transform: translateY(-50%) translateZ(60px) scale(0.94);
top: 50%;
position: absolute;
left: 0;
width: 100%;
padding: 2rem 5rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 1px solid transparent;
-webkit-perspective: inherit;
perspective: inherit;
z-index: 2;
}
.innerInSpan{
color: #ff8383;
}

.container .back{
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.container .front{
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.container:hover .back{
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.container:hover .front{
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.front .inner p{
font-size: 2.2rem;
margin-bottom: 2rem;
position: relative;
color: #ff6666;
font-weight: 500;
line-height: 3rem;
}

.front .inner p:after{
content: '';
width: 4rem;
height: 2px;
position: absolute;
display: block;
left: 0;
right: 0;
margin: 0 auto;
bottom: -.75rem;
}

.front .inner span{
color: #000;
font-size: 1rem;
}

}


@media screen and (max-width:767px) {

.Solidback {
background-repeat: repeat;
margin:15px 0px 0px 0px;
height: ;
background: ;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

.SolidWrapper{
position: relative;
width:100%;

}

.cols{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}


.col{
width: calc(95% );
margin: 0px 0px 10px 0px;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}


.container{
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
}

/*テキスト位置、表面幅*/
.front,.back{
background-size: cover;
box-shadow: 0 4px 80px 0 rgba(0,0,0,30%);
border-radius: 10px;
background-position: center;
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: left;
min-height: 300px;
height: auto;
border-radius: 10px;
color: #000;
font-size: 1.5rem;
width: 100%;
}


.back{
background: #cedce7;
background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
background: linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
text-shadow    : 
2px  2px 3px #000000,
-2px  2px 3px #000000,
2px -2px 3px #000000,
-2px -2px 3px #000000,
2px  0px 3px #000000,
0px  2px 3px #000000,
-2px  0px 3px #000000,
0px -2px 3px #000000;   
color: #fff;
line-height: 2rem;
}


.front:after{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
content: '';
display: block;
opacity: .6;
background-color: ;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 10px;
}


.container:hover .front,
.container:hover .back{
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}


/*裏面背景画像、裏面幅*/
.back{
position: absolute;
top: 0;
left: 0;
width: 100%;
background: url() 20%;
background: #2c2c2c;
}


.inner{
-webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
transform: translateY(-50%) translateZ(60px) scale(0.94);
top: 35%;
position: absolute;
left: 0;
width: 100%;
padding: 2rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 1px solid transparent;
-webkit-perspective: inherit;
perspective: inherit;
z-index: 2;
text-align: center;
}
.innerIn{
-webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
transform: translateY(-50%) translateZ(60px) scale(0.94);
top: 50%;
position: absolute;
left: 0;
width: 100%;
padding: 2rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 1px solid transparent;
-webkit-perspective: inherit;
perspective: inherit;
z-index: 2;
text-align: left;
}
.innerInSpan{
color: #ff8383;
}

.container .back{
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.container .front{
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.container:hover .back{
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.container:hover .front{
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.front .inner p{
font-size: 2rem;
margin-bottom: 2rem;
position: relative;
color: #ff6666;
line-height: 2.5rem;
font-weight: 500; 
}

.front .inner p:after{
content: '';
width: 4rem;
height: 2px;
position: absolute;
display: block;
left: 0;
right: 0;
margin: 0 auto;
bottom: -.75rem;
}

.front .inner span{
color: #000;
font-size: 1rem;
}

}


@media screen and (min-width:768px) {
.Manga3{   
text-align: center;
}
.Manga3 img{   
width: 50%;
}
}
@media screen and (max-width:767px) {
.Manga3 img{   
width: 100%;
}
}


/*ペーパー*/
@media screen and (min-width:768px) {
.paperbox {
width:100%;
margin-top: -40px;
}

.paperboxTitle {
text-align: center;
position: relative;
z-index: 91;
padding-top: 20px;
}
.paperboxTitle img {
width: 60%;
}
/* ランダムに揺れる */
.RandomShake {
display: inline-block;
animation: RandomShake .1s  infinite;
}
@keyframes RandomShake {
0% {transform: translate(0px, 0px) rotateZ(0deg)}
25% {transform: translate(1px, 1px) rotateZ(.5deg)}
50% {transform: translate(0px, 1px) rotateZ(0deg)}
75% {transform: translate(1px, 0px) rotateZ(-.5deg)}
100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

.paperbox1 {
width:100%;
max-width: 1000px;
margin: auto;
margin: 0 auto;
height: ;
padding:0px 0px 0px 0px;
padding: ;
display: flex;
position: relative;
z-index: 70;
}
.paperbox2 {
width:100%;
max-width: 1000px;
margin: auto;
margin: 0 auto;
height: ;
padding:0px 0px 0px 0px;
padding: ;
display: flex;
position: relative;
z-index: 70;
justify-content: space-around;
}

.PaperinboxIn {
position: relative;
width: 50%;
height:;
background:#FFF;
margin: 10px;
}
.PaperinboxIn p{
color: #000;
border-bottom: dashed 2px #000;
font-size: 1.8rem;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
}

.paperboximg {
width:100%;
position: ;
margin:30px 0px 0px 0px;
}

.paperboxtext {
margin:0px 10px 0px 10px;
font-size: 1.2rem;
word-wrap: break-word;
padding: 20px 5px;
line-height: 1.5rem;
}
.paperboxtext2 {
    margin:0px 10px 0px 10px;
    font-size: 1rem;
    word-wrap: break-word;
    padding: 20px 5px;
    line-height: 1.5rem;
    }
}


@media screen and (max-width:767px) {

.paperbox {
width:100%;
margin: 0 auto;
height: ;
padding:0px 0px 0px 0px;
padding: 10px 0px;
margin-top: -40px;
}

.paperboxTitle {
position: relative;
z-index: 91;
padding-top: 15px;
}
.paperboxTitle img {
width: 100%;
}
/* ランダムに揺れる */
.RandomShake {
display: inline-block;
animation: RandomShake .1s  infinite;
}
@keyframes RandomShake {
0% {transform: translate(0px, 0px) rotateZ(0deg)}
25% {transform: translate(1px, 1px) rotateZ(.5deg)}
50% {transform: translate(0px, 1px) rotateZ(0deg)}
75% {transform: translate(1px, 0px) rotateZ(-.5deg)}
100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

.paperbox1 {
padding: 0px 10px;
position: relative;
z-index: 70;
}
.paperbox2 {
padding: 0px 10px;
}

.PaperinboxIn {
position: relative;
width:100%;
height:;
background:#FFF;
margin: 10px 0px;
}
.PaperinboxIn p{
color: #000;
border-bottom: dashed 2px #000;
font-size: 1.5rem;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}

.paperboximg {
width:100%;
position: ;
margin:30px 0px 0px 0px;
}

.paperboxtext {
position: ;
margin:0px 10px 0px 10px;
font-size: 1rem;
word-wrap: break-word;
padding: 20px 5px;
line-height: 1.3rem;
}
.paperboxtext2 {
    position: ;
    margin:0px 10px 0px 10px;
    font-size: .8rem;
    word-wrap: break-word;
    padding: 20px 5px;
    line-height: 1.3rem;
    }

}


.PaperEffect
{
position:;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.PaperEffect:before, .PaperEffect:after
{  
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.PaperEffect:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}

.FadeinPaperTitle2 {
opacity : 0;
transform : scale(10);
transition : all 0.5s;
transition-delay : 0s;
}
.FadeinPaperTitle2.active{
opacity : 1;
transform : scale(1);
}
@media screen and (min-width:768px) {
.FadeinPaperTitle {
opacity : 0;
transform : scale(10);
transition : all 0.5s;
transition-delay : 0s;
}
.FadeinPaperTitle.active{
opacity : 1;
transform : scale(1);
}
}


.FadeinPaper {
opacity : 0;
transform : translate(0px, -100px);
transition : all 0.5s;
}
.FadeinPaper.active{
transition-delay : .2s;
opacity : 1;
transform : translate(0px, 0px);
}
.FadeinPaper2 {
opacity : 0;
transform : translate(0px, -100px);
transition : all 0.5s;
transition-delay : .2s;
}
.FadeinPaper2.active{
opacity : 1;
transform : translate(0px, 0px);
}


.Manga4{   
text-align: center;
margin-top: 10px;
}
.Manga4 img{   
width: 50%;
}
@media screen and (max-width:767px) {
.Manga4 img{   
width: 100%;
}
}

/*カラーチェンジ*/
.ColorChange {
animation: ColorChange 2.5s linear infinite alternate both;
display: table;
width: 100%;
height: 100px;
transform: skewY(-deg);
padding:;
margin: 10px 0px 10px 0px;
}
.ColorChange > * {
transform: skewY(0deg);
}

@keyframes ColorChange {
0% {
background: #f0e68c;
}
100% {
background: #ffb6c1;
}
}
.ColorChangeTitle {
color: #fff;
text-shadow    : 
2px  2px 1px #ff8585,
-2px  2px 1px #ff8585,
2px -2px 1px #ff8585,
-2px -2px 1px #ff8585,
2px  0px 1px #ff8585,
0px  2px 1px #ff8585,
-2px  0px 1px #ff8585,
0px -2px 1px #ff8585; 
margin-top: 20px;
font-weight: bold;
}


@media screen and (min-width:768px) {
.ColorChangeBox {
display: flex;
flex-wrap: wrap;
border: 1px solid #ffffff;
max-width: 1000px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}
.ColorChangeBox li {
width: 50%;
padding: 40px 30px 40px 120px;
border: 1px solid #ffffff;
background-color: rgba(0, 0, 0, 30%);
color: #ffffff;
box-sizing: border-box;
position: relative;
line-height: 1.2rem;
}
.ColorChangeBox li .icon {
position: absolute;
top: 20%;
left: 30px;
width: 70px;
}
.ColorChangeBox li h2 {
font-size: .8rem;
}
.ColorChangeBoxBigText {
font-size: 1.4rem;
line-height: 2rem;
}

.ObColorChange {
position: ;
top: ;
left: 0%;
text-align: center;
}
.ObColorChange p {
color: #000;
font-size: 1.5rem;
font-weight: bold;
line-height: 1.8rem;
text-align: left;
padding-bottom: 30px;
}
}

@media screen and (max-width:767px) {
.ColorChangeBox {
.voice .point 
display: block;
border: none;
margin-top: 20px;
margin-bottom: 20px;
}

.ColorChangeBox li {
width: ;
padding: 30px 30px 30px 120px;
border: 1px solid #ffffff;
background-color: rgba(0, 0, 0, 30%);
color: #ffffff;
box-sizing: border-box;
position: relative;
margin: 5px;
line-height: 1.2rem;
}
.ColorChangeBox li .icon {
position: absolute;
top: 15%;
left: 15px;
width: 90px;
}
.ColorChangeBox li h2 {
font-size: .8rem;
}
.ColorChangeBoxBigText {
font-size: 1.4rem;
line-height: 2rem;
}
}


.ColorChangeAppear {
opacity : 0;
transform : translate(0, 0px)scale(0,0);
transition : all 0.5s;
}
.ColorChangeAppear.active{
transition-delay : 0s;
opacity : 1;
transform : translate(0, 0px)scale(1,1);
animation: balloonAnime 3s ease-out 0s 1 normal both;
}
.ColorChangeAppear2 {
opacity : 0;
transform : translate(0, 0px)scale(0,0);
transition : all 0.5s;
}
.ColorChangeAppear2.active{
transition-delay : .2s;
opacity : 1;
transform : translate(0, 0px)scale(1,1);
animation: balloonAnime 3s ease-out .2s 1 normal both;
}
.ColorChangeAppear3 {
  opacity : 0;
  transform : translate(0, 0px)scale(0,0);
  transition : all 0.5s;
  }
  .ColorChangeAppear3.active{
  transition-delay : .4s;
  opacity : 1;
  transform : translate(0, 0px)scale(1,1);
  animation: balloonAnime 3s ease-out .4s 1 normal both;
  }
@keyframes balloonAnime {
0% { transform: scale(1); }
10% { transform: scale(1.05); }
20% { transform: scale(1); }
30% { transform: scale(1.02); }
40% { transform: scale(1); }
100% { transform: scale(1); }
}


@media screen and (min-width:768px) {
.Manga5{   
text-align: center;
}
.Manga5 img{   
width: 50%;
}
}
@media screen and (max-width:767px) {
.Manga5 img{   
width: 100%;
}
}





.topic{   
text-align: center;
background-color: #fff;
}
.topic img{   
width: 60%;
}
@media screen and (max-width:767px) {
.topic img{   
width: 100%;
}
}





@media screen and (min-width:768px) {
.Manga6{   
text-align: center;
z-index: 90;
position: relative;
}
.Manga6 img{   
width: 50%;
}
}
@media screen and (max-width:767px) {
.Manga6{   
z-index: 90;
position: relative;
margin-top: -10px;
}
.Manga6 img{   
width: 100%;
}
}


/*パララックス*/
#bg01 {
background: url(data/hanePara.png);
height: ;
padding-top: 30px;
}

.circle {	
position: relative;
display: ;
width: 270px;
height: 270px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 50%);
margin: auto;
margin-bottom: 40px;
}
.circle p {
position: absolute;
display: inline-block;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width :270px;
text-align:center;
font-size: 2.5rem;
line-height: ;
color: #fff;
font-weight: 500;
}
.circleText {
font-size: 1.7rem; 
}

.FadeinPara {
opacity : 0;
transform : translate();
transition : all 0.5s;
transition-delay : 0s;
vertical-align: bottom;
}
.FadeinPara.active{
opacity : 1;
transform : translate();
}


@media screen and (min-width:768px) {
#mainpara {
background: linear-gradient(#f5deb3, #ffffe0);
background: url(data/haneBack.jpg) no-repeat center 0;
background-repeat: repeat;
}
.boxpara {
position: relative;
width: 70%;
margin:0 auto;
}

.ObMain {
position: ;  
}
}


@media screen and (max-width:767px) {
#mainpara {
background: url(data/haneBack.jpg) no-repeat center 0;
background-repeat: repeat;
}
.boxpara {
position: relative;
width:100%;
margin:0 auto;
}

.ObMain {
position: ;  
top: ;
left: ;
margin-left: -300px;
}
}

/* 中身 */
@media screen and (min-width:768px) {

.ContentsBox {
margin: auto;
margin-bottom: 20px;
margin-top: 25px;
width: ;
z-index: 10;
position: relative;
background: rgba(0, 0, 0, 50%);
padding: 10px 0px;
}
.ContentsTitle {
text-align: center;
margin: 10px;
padding:  5px 10px 12px;
font-size: 1.2rem;
font-weight: 500;
background-color: ;
color: #fff;
border-radius: ;
border-bottom: solid #fff;
text-shadow: 1px 1px 2px #000000, -1px 1px 2px #000000, 1px -1px 2px #000000, -1px -1px 2px #000000, 1px 0px 2px #000000, 0px 1px 2px #000000, -1px 0px 2px #000000, 0px -1px 2px #000000;
}
.ContentsIn {
text-align: left;
margin: 10px;
padding: 10px 40px;
font-size: .9rem;
background-color: ;
color: #fff;
border-radius: 0px;
line-height: 1.5rem;
}
.ContentsIn img {
max-width: 60px; 
float: left;
margin: -10px 10px 10px;
padding-bottom: 10px;
}
}


@media screen and (max-width:767px) {

.ContentsBox {
margin: 20px auto;
width: 95%;
margin-bottom: -10px;
z-index: 10;
position: relative;
background: rgba(0, 0, 0, 50%);
padding: 10px 0px;
}
.ContentsTitle {
text-align: left;
margin: 10px;
padding:  5px 10px 10px;
font-size: 1.1rem;
font-weight: 500;
color: #fff;
line-height: 1.6rem;
border-bottom: solid #fff;
text-shadow: 1px 1px 2px #000000, -1px 1px 2px #000000, 1px -1px 2px #000000, -1px -1px 2px #000000, 1px 0px 2px #000000, 0px 1px 2px #000000, -1px 0px 2px #000000, 0px -1px 2px #000000;
}
.ContentsIn {
text-align: left;
margin: -10px 10px 10px;
padding: 10px;
font-size: .9rem;
background-color: ;
color: #fff;
border-radius: 0px;
line-height: 1.5rem;
}
.ContentsIn img {
max-width: 60px; 
float: left;
margin: 0px 10px 0px;
padding-bottom: 0px;
}
}

/* 料金表 */
.PriceContainerBox {
margin: 0;
padding: 0;
justify-content: center;
}
.PriceContainer {
margin: 25px 0 35px;
display: ;
grid-template-columns: repeat(1, 300px);
grid-auto-rows: 560px;
grid-gap: 80px;
align-items: stretch;
}

@media (min-width: 768px) and (max-width: 1259px) {
.PriceContainer {
grid-template-columns: ;
margin: auto 0;
padding: 40px 0;
}
}
@media (min-width: 1260px) {
.PriceContainer {
grid-template-columns: ;
margin: auto 0;
padding: 40px 0;
}
}


.box {
position: ;
overflow: hidden;
width: 100%;
height: auto;
padding: 20px;
box-sizing: border-box;
text-align: center;
background: linear-gradient(0deg, #202020, #464646);
box-shadow: 0 0 0 20px #000000, 0 0 0 rgb(62 62 62);
transition: 0.5s;
}


@media (min-width: 768px) {
.box:hover {
transform: scale(1);
}
}

.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: ;
pointer-events: none;
}

.box .title .fa {
font-size: 60px;
color: #ffc98e;
}


.PriceCaption {
color: #fff;
margin: 30px 0 0;
padding: 0;
font-size: 1rem;
line-height: 1.8rem;
}
@media (max-width: 767px) {
.PriceCaption {
font-size: 1rem;
}
}


.PriceCaption2 {
color: #ffc98e;
margin: 20px 0 0;
padding: 0;
font-size: 1.8rem;
line-height: 2.5rem;
}
@media (max-width: 767px) {
.PriceCaption2 {
font-size: 1.3rem;
line-height: 1.8rem;
}
}

.PricePrice {
font-size: 1.3rem;
color: #fff;
margin: 10px 0;
padding: 0;
text-shadow: 
2px  2px 1px #393939,
-2px  2px 1px #393939,
2px -2px 1px #393939,
-2px -2px 1px #393939,
2px  0px 1px #393939,
0px  2px 1px #393939,
-2px  0px 1px #393939,
0px -2px 1px #393939;
}

.box .option ul {
margin: 20px 0 0;
padding: 0;
list-style: none;
}

.box .option ul li {
color: #fff;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
line-height: 1.5rem;
font-size: 1rem;
}
@media screen and (max-width:767px) {
.box .option ul li {
font-size: 1rem;
}
}

.box .option ul li:last-child {
border-bottom: none;
}


.box .PriceBtn {
display: inline-block;
background: #ffc98e;
color: #262626;
font-weight: bold;
padding: 15px 70px;
text-decoration: none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
font-size: 1.1rem;
margin-bottom: 15px;
}
@media (min-width: 768px) {
.box .PriceBtn {
display: inline-block;
background: #ffc98e;
color: #262626;
font-weight: bold;
padding: 20px 150px;
margin-top: ;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
font-size: 1.3rem;
}
}


.Priceshiny {
position: relative;
overflow: hidden;
}
.Priceshiny::before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: shinybtnBox 2s ease-in-out infinite;
}
@-webkit-keyframes shinybtnBox {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/*テーブル*/
#TableTitle {
padding:10px 0px 10px 0px;
}

#TableTitleIn {
margin: 0 auto;
text-align: center;
font-size: 1.4rem;
line-height: 1.6rem;
}
@media screen and (min-width:768px) {
#TableTitleIn {
font-size: 1.6rem;
line-height: 2rem;
}
}

.FadeinTable {
opacity : 0;
transform : translate(-1000px, 0px);
transition : all 0.5s;
}
.FadeinTable.active{
opacity : 1;
transform : translate(0px, 0px);
}

#TableTitle .far {
margin-right: 4px;
vertical-align: 2px;
}








/*全幅の下の文*/
.TableTextBasic {
text-align: center;
padding:;
font-size: ;
font-weight: ;
width: 90%;
margin: auto;
margin-top: 5px;
line-height: 1.2rem;
}
.Underline {
background: linear-gradient(transparent 50%, #ffff00 50%);
}
@media screen and (min-width:768px) {
.TableTextBasic {
text-align: center;
padding:;
font-size: ;
font-weight: ;
margin-top: 10px;
}
.Underline {
background: linear-gradient(transparent 50%, #ffff00 50%);
}
}

/*本体*/
table {
border-collapse: collapse;
margin: 0 auto;
padding: 0;
width: 850px;
table-layout: ;
color: #000;
}
@media screen and (min-width:768px) {
table {
margin-bottom: 30px;
}
}

table tr {
padding: .35em;
border-bottom: 1px dotted #ffbebe;
}
table tr:last-child{
border-bottom: 2px solid #ff5e5e;
}
table th,
table td {
padding: 1em 10px 1em 1em;
}
tbody th {
color: #000;
line-height: 1.2rem;
}
.txt{
text-align: left;
font-size: .85em;
line-height: 1.2rem;
}

.TablePrice{
text-align: right;
vertical-align: bottom;
}

@media screen and (max-width:767px) {
table {
border: 0;
width:100%
}
table th{
display: block;
border-right: none;
border-bottom: 2px solid #ff5e5e;
padding-bottom: .6em;
margin-bottom: .6em;

}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

table tr {
display: block;
margin-bottom: ;
border-bottom: 2px solid #ff5e5e;
}

table td {
border-bottom: 1px solid #bbb;
display: block;
font-size: .8em;
text-align: right;
position: relative;
padding: .625em .625em .625em 4em;
border-right: none;
}

table td::before {
content: attr(data-label);
font-weight: bold;
position: absolute;
left: 10px;
}

table td:last-child {
border-bottom: 0;
}

.TablePrice{
text-align: right;
}
}



/* Particle */
#canvas-title {
background: -webkit-linear-gradient(left, #ba65fd, #5aa5f8, #00d8ee);
padding: 10px;
font-size: 1.8rem;
line-height: 3rem;
width: 100%;
font-weight: 500;
color: #ffe3e3;
text-align: center;
}
@media screen and (max-width:767px) {
#canvas-title {
background: -webkit-linear-gradient(left, #ba65fd, #5aa5f8, #00d8ee);
padding: 10px 0px;
font-size: 1rem;
line-height: 2rem;
width: 100%;
margin-top: 20px;
}
}

#canvas-wrap {
width: 100%;
position: relative;
height: 740px;
overflow: hidden;
}
@media (min-width:820px) and (max-width:920px) {
#canvas-wrap {
height: 660px;
}
} 
@media (min-width:768px) and (max-width:819px) {
#canvas-wrap {
height: 600px;
}
} 
@media (min-width:620px) and (max-width:767px) {
#canvas-wrap {
height: 540px;
}
} 
@media (min-width:480px) and (max-width:619px) {
#canvas-wrap {
height: 450px;
}
} 
/* ここからは小さな値で修正 */
@media (min-width:375px) and (max-width:479px) {
#canvas-wrap {
height: 360px;
}
} 
@media screen and (max-width:375px) {
#canvas-wrap {
height: 290px;
}
} 

#canvas-txt {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}

/* 基本テキスト */
.TextBasic2 {
text-align: center;
font-size: 25px;
font-weight: 500;
margin-bottom: 20px;
margin-top: 10px;
}
@media screen and (max-width:767px) {
.TextBasic2 {
font-size: 1rem;
margin-bottom: 10px;
margin-top: 10px;
}
}
.Underline {
background: linear-gradient(transparent 50%, #ffff00 50%);
}

#canvas-image {
text-align: center;
}
#canvas-image img {
max-width: 1000px;
width: 100%;
margin-top: 10px;
}



/* Surprise */
.SurpriseBox{
padding-bottom: 10px;
}

/* Draw */
.DrawBox{
width: 100%;
background-color: #5d5f00;
padding: 30px 0px;
}
.svg1{
display: block;
width: 50%;
height: auto;
margin: 0px auto;
}
@media screen and (max-width:480px) { 
.DrawBox{
width: 100%;
background-color: #5d5f00;
padding: 15px 0px;
}
.svg1{
width: 95%;
}
}

/*全幅*/
@media screen and (min-width:768px) { 
.FAFullWidthImgBox{
position: relative;
padding: 0.6em;
background-color: ;
text-align: center;
}
.FAFullWidthImgBoxIn{
position: relative;
margin: 20px;
}
}
@media screen and (max-width:767px) { 
.FAFullWidthImgBox{
position: relative;
padding: 0.6em;
background-color: ;
text-align: center;
}
.FAFullWidthImgBoxIn{
position: relative;
margin: 5px 0px 0px;
width: 100%;
}
}

/* グラフィックボックス */
@media ( min-width : 768px ){

.faflex { 
display: flex;
max-width: 1000px;
margin: 0 auto;
display: -webkit-flex;  
border: 2px solid #ddd;    
}
.faflex1 {
flex: 1;
-webkit-flex: 1;
background: ;
padding: 2%;
text-align: center;
}
.faflex1Txt {
color: #ff0000;
margin-top: 10px;
font-size: 2.5rem;
transform: rotate(-1deg);
letter-spacing: .2rem;
}
.faflex1Txt2 {
text-align: left;
color: #000;
margin: 20px 10px 30px 15px;
font-size: 1.2rem;
line-height: 1.5rem;
font-weight: bold;
}

.faflex2 {
flex: 1;
-webkit-flex: 1;
background: #fff;
border-left: 1px solid #ddd;
padding: 2%;
text-align: center;
}
.faflex2Txt2 {
text-align: left;
color: #000;
margin: 10px 10px 30px 15px;
font-size: 1.2rem;
line-height: 1.5rem;
font-weight: bold;
}
.faflex2 img {
max-width: 100%;
height: auto;
}
}


@media ( max-width : 767px ){

.faflex { 
margin: 5px; 
}
.faflex1 {
flex: 1;
-webkit-flex: 1;
background: ;
padding: 4%;
text-align: center;
}
.faflex1Txt {
color: #ff0000;
margin-top: 10px;
font-size: 1.8rem;
transform: rotate(-1deg);
letter-spacing: .2rem;
}
.faflex1Txt2 {
text-align: left;
color: #000;
margin: 20px 10px 30px 15px;
font-size: 1rem;
line-height: 1.5rem;
font-weight: bold;
}
.faflex1Img {
width: 100%;
}

.faflex2 {
flex: 1;
-webkit-flex: 1;
background: #fff;
border-top: 1px solid #ddd;
padding: 2%;
text-align: center;
}
.faflex2Txt2 {
text-align: left;
color: #000;
margin: 10px 10px 10px 15px;
font-size: 1rem;
line-height: 1.5rem;
font-weight: bold;
}
.faflex2 img {
max-width: 100%;
height: auto;
}
}

.Underline {
background: linear-gradient(transparent 50%, #ffff00 50%);
}


/* 基本テキスト */
.SurpriseTextBasic {
text-align: center;
font-size: 1rem;
margin: 10px 0px 0px;
line-height: 1.2rem;
}
@media screen and (max-width:767px) {
.SurpriseTextBasic {
font-size: .8rem;
text-align: left;
margin: 10px 10px 0px;
}
}


.Manga7{   
text-align: center;
background-color: #fff;
padding-top: 30px;
padding-bottom: 30px;
}
.Manga7 img{   
width: 50%;
filter: drop-shadow(0px 0px 3px rgba(0, 0, 0,.2));
}
@media screen and (max-width:767px) {
.Manga7 img{   
width: 97%;
}
}

/*お問い合わせボタンエリア*/
@media screen and (min-width:768px) {
#ButtonBoxWrapper {
width: 80%;
margin: 0 auto;
}
.ButtonBox {
padding: 1em ;
margin: 2em 0;
height: 550px;
border-radius: 5px;/*角の丸み*/
background: linear-gradient(to right bottom, #c0c0c0, #708090);
}
.ButtonBoxInner{
padding: 1em;
background-color: #FFF;
height: 520px;
border-radius: 5px;/*角の丸み*/
background-image: url("data/chara4.gif"),url("data/back_office.jpg");
background-repeat: no-repeat;
background-position: -50px 30px, -10px 0px;
}

.shinybtnBox {
display: block;
position: relative;
width: ;
padding: 90px 0px 90px 0px;
margin-left: 50%;
background: linear-gradient(#ff7b7b, #e56f6f);
box-shadow: 0 5px 0 0 rgba(215,62,62,1);/*影の色(rgbaの値を変更)*/
border-radius: 5px;   
color: #fff;
text-align: center;
text-decoration: none;
overflow: hidden;
letter-spacing: 10px;
font-family: 'Lato', sans-serif;
}
.shinybtnBoxP1 {
font-size: 2.5rem;
line-height: 3rem;
margin: 0px auto 10px;
}
.shinybtnBoxP2 {
font-size: 1rem;
line-height: 2.5rem;
}

.shinybtnBox:hover {
text-decoration: none;
color: #fff;
background: linear-gradient(#ffa1a1, #e56f6f);
-webkit-transform: translate(0, 3px);
transform: translate(0, 3px);
}
.shinybtnBox::before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: shinybtnBox 3s ease-in-out infinite;
}
@-webkit-keyframes shinybtnBox {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

.ButtonBoxUpDown {
animation-name: ButtonBoxUpDown;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 1.5s;
}
@keyframes ButtonBoxUpDown {
0% {
transform: translate(0,0px);
}
100% {
transform: translate(0,-5px)
}
}

/*吹き出し動き*/
.ButtonBoxBalMove{
animation: ButtonBoxBalMove 3s ease-out 0s infinite normal both;
}
@keyframes ButtonBoxBalMove {
0% { transform: scale(1); }
10% { transform: scale(1.05); }
20% { transform: scale(1); }
30% { transform: scale(1.02); }
40% { transform: scale(1); }
100% { transform: scale(1); }
}
/*吹き出しのデザイン*/
.ButtonBoxBalDesign{
position: relative;
background-color: #fff;
border: 2px solid #ca8888;
border-radius: 10px;        
font-size: 17px;
letter-spacing: 5px;
padding: 25px 20px 25px 20px;
line-height: 1.5em;
margin-left: 50%;
margin-top: 30px;
}
/*三角アイコン*/
.ButtonBoxBalDesign::before{
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
left: -15px;
top: 20px;
border-right: 15px solid #ca8888;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
.ButtonBoxBalDesign::after{
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
left: -12px;
top: 20px;
border-right: 15px solid #fff;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
}


@media (min-width: 768px) and (max-width: 999px) {
.shinybtnBox {
display: block;
position: relative;
width: ;
padding: 40px 0px 40px 0px;
margin-left: 50%;
background: linear-gradient(#ff7b7b, #e56f6f);
box-shadow: 0 5px 0 0 rgba(215,62,62,1);/*影の色(rgbaの値を変更)*/
border-radius: 5px;   
color: #fff;
text-align: center;
text-decoration: none;
overflow: hidden;
letter-spacing: 10px;
font-family: 'Lato', sans-serif;
}
}


@media screen and (max-width:767px) {
#ButtonBoxWrapper {
width: 100%;
margin: 0 auto;
}
.ButtonBox {
padding: 1em ;
margin: 2em 0;  
height: 550px;
border-radius: 5px;/*角の丸み*/
background: linear-gradient(to right bottom, #c0c0c0, #708090);
}
.ButtonBoxInner{
padding: 1em;
background-color: #FFF;
height: 520px;
border-radius: 5px;/*角の丸み*/
background-image: url("data/chara4.gif"),url("data/back_office.jpg");
background-repeat: no-repeat;
background-position: -10px 270px, -10px 0px;
background-size:50%,auto;
}

.shinybtnBox {
display: block;
position: relative;
width: 100%;
padding: 50px 0px 50px 0px;
margin: ;
background: linear-gradient(#ff7b7b, #e56f6f);
box-shadow: 0 5px 0 0 rgba(215,62,62,1);
border-radius: 5px;   
color: #fff;
text-align: center;
text-decoration: none;
overflow: hidden;
letter-spacing: 5px;
font-family: 'Lato', sans-serif;
word-wrap: break-word;  
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.shinybtnBoxP1 {
font-size: 1.6rem;
line-height: 2.5rem;
margin: 0px auto 10px;
}
.shinybtnBoxP2 {
font-size: .7rem;
line-height: 1.5rem;
}

.shinybtnBox:hover {
text-decoration: none;
color: #fff;
background: linear-gradient(#ffa1a1, #e56f6f);
-webkit-transform: translate(0, 3px);
transform: translate(0, 3px);
}
.shinybtnBox::before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: shinybtnBox 3s ease-in-out infinite;
}
@-webkit-keyframes shinybtnBox {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

.ButtonBoxUpDown {
animation-name: ButtonBoxUpDown;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 1.5s;
}
@keyframes ButtonBoxUpDown {
0% {
transform: translate(0,0px);
}
100% {
transform: translate(0,-5px)
}
}

/*吹き出し動き*/
.ButtonBoxBalMove{
animation: ButtonBoxBalMove 3s ease-out 0s infinite normal both;
}
@keyframes ButtonBoxBalMove {
0% { transform: scale(1); }
10% { transform: scale(1.05); }
20% { transform: scale(1); }
30% { transform: scale(1.02); }
40% { transform: scale(1); }
100% { transform: scale(1); }
}
/*吹き出しデザイン*/
.ButtonBoxBalDesign{
position: relative;
background-color: #fff;
border: 2px solid #ca8888;
border-radius: 10px;        
font-size: 12px;
letter-spacing: 5px;
padding: 60px 0px 60px 0px;
line-height: 1.5em;
margin-left: 50%;
margin-top: 50px;
}
/*三角アイコン*/
.ButtonBoxBalDesign::before{
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
left: -15px;
top: 20px;
border-right: 15px solid #ca8888;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
.ButtonBoxBalDesign::after{
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
left: -12px;
top: 20px;
border-right: 15px solid #fff;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
}

/* 方眼紙 */
@media screen and (min-width:768px) {
.GraphPaper {
width: 100%;
height: auto;
background-color: #FFF;
background-size: 80px 80px;
z-index: 89;
position: relative;
padding-bottom: 5px;
padding-top: 50px;
margin-top: -40px;
background-image: linear-gradient(rgba(215,204,200,.7) 1%, rgba(215,204,200,.7) 1%, transparent 1%, transparent 99%, rgba(215,204,200,.7) 99%, rgba(215,204,200,.7) 100%), linear-gradient(
90deg
, rgba(215,204,200,.7) 1%, rgba(215,204,200,.7) 1%, transparent 1%, transparent 99%, rgba(215,204,200,.7) 99%, rgba(215,204,200,.7) 100%), linear-gradient(transparent, transparent 25%, rgba(215,204,200,.4) 25%, rgba(215,204,200,.4) 26%, transparent 26%, transparent 50%, rgba(215,204,200,.4) 50%, rgba(215,204,200,.4) 51%, transparent 51%, transparent 75%, rgba(215,204,200,.4) 75%, rgba(215,204,200,.4) 76%, transparent 76%, transparent 100%), linear-gradient(
90deg
, transparent, transparent 25%, rgba(215,204,200,.4) 25%, rgba(215,204,200,.4) 26%, transparent 26%, transparent 50%, rgba(215,204,200,.4) 50%, rgba(215,204,200,.4) 51%, transparent 51%, transparent 75%, rgba(215,204,200,.4) 75%, rgba(215,204,200,.4) 76%, transparent 76%, transparent 100%);
}
}
@media screen and (max-width:767px) {
.GraphPaper {
}
}

/* フロー */
.flow {
padding: 0 10px 10px;
margin-top: -10px;
}

.flow .FlowBox {
margin: 0 auto 33px;
width: 100%;
padding: 10px;
-webkit-border-radius: 5px;
border-radius: 5px;
position: relative;
font-size: 1rem; /* テキストの指定 */
line-height: 1.4; /* テキストの指定 */
border-bottom: 1px solid;
background-color: #fff;
}
@media screen and (max-width:767px) {
.flow .FlowBox {
background-color: unset;
}
}
.flow .FlowBox h3 {
font-size: 1.4rem;
margin-bottom: 5px;
}
.flow .FlowBox p {
font-size: .9rem;
}

.flow .FlowBox2 {
margin: 0 auto 33px;
width: 100%;
padding: 10px;
-webkit-border-radius: 5px;
border-radius: 5px;
position: relative;
font-size: 1rem; /* テキストの指定 */
line-height: 1.4; /* テキストの指定 */
border-bottom: 1px solid;
background-color: #fff;
}
@media screen and (max-width:767px) {
.flow .FlowBox2 {
background-color: unset;
}
}
.flow .FlowBox2 h3 {
font-size: 1.4rem;
margin-bottom: 5px;
}
@media screen and (max-width:767px) {
.flow .FlowBox2 h3 {
font-size: 1.3rem;
}
}
.flow .FlowBox2 p {
font-size: .9rem;
}
@media screen and (max-width:767px) {
.flow .FlowBox2 p {
font-size: .8rem;
}
}

@media screen and (min-width:768px) {
.flow {
width: 50%;
margin: auto;
}

.flow .FlowBox {
margin: 0 auto 33px;
padding: 10px;
border: 1.5px solid #000;
-webkit-border-radius: 5px;
border-radius: 5px;
position: relative;
font-size: 1rem; /* テキストの指定 */
line-height: 1.4; /* テキストの指定 */
}

.flow .FlowBox2 {
margin: 0 auto 33px;
padding: 10px;
border: 1.5px solid #000;
-webkit-border-radius: 5px;
border-radius: 5px;
position: relative;
font-size: 1rem; /* テキストの指定 */
line-height: 1.4; /* テキストの指定 */
}

@keyframes typing { from { width: 0; } }
@keyframes caret { 50% { border-color: transparent; } }
.ttt {
color: #fff;
}
.ttt.active {
color: #000;
width: 200ch;
border-right: .08em solid;
overflow: hidden;
font-size: 4em;
white-space: nowrap;
animation: typing 9s steps(100, end), caret 1s step-end infinite;
}
}

/* 三角形 */
.flow .FlowBox:after {
border-top: 25px solid #ffbebe;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
content: "";
position: absolute;
bottom: -28px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
left: 50%;/* 中央寄せに使用 */
margin-left: -70px; /* 中央寄せに使用 */

animation-name: FlowUpDown;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 1.5s;
}
.flow .FlowBox:last-child:after {
border: none; /* 最後のボックスだけ三角形を表示しない */
}


.flow .FlowBox2:after {
border-top: 25px solid #b0bfff;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
content: "";
position: absolute;
bottom: -27px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
left: 50%;/* 中央寄せに使用 */
margin-left: -70px; /* 中央寄せに使用 */

animation-name: FlowUpDown;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 1.5s;
}
.flow .FlowBox2:last-child:after {
border: none; /* 最後のボックスだけ三角形を表示しない */
}


@keyframes FlowUpDown {
0% {
transform: translate(0,0px);
}
100% {
transform: translate(0,7px)
}
}

/*お問い合わせフォーム*/

@media screen and (min-width:768px) {
.ContactBox {
position: relative;
max-width:1000px;
margin: 20px auto;
font-family: 'Lato', sans-serif;
}

/*上下に動くアニメーション*/
.ContactUpDown {
margin         : 0px 0px 0px 150px;
animation-name: ContactUpDown;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 1.5s;
}
@keyframes ContactUpDown {
0% {
transform: translate(0,0px);
}
100% {
transform: translate(0,-5px)
}
}

.ContactTitle {
position: relative;
text-align: center;
font-size: 30px;
letter-spacing: 20px;
margin: -70px 0px 0px 0px;
}

.Form {
margin-top: 40px;
margin-left: auto;
margin-right: auto;
max-width: 980px;
}

.Form-Item {
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
display: flex;
align-items: center;
}
.Form-Item-Label {
width: 100%;
max-width: 980px;
letter-spacing: 0.05em;
font-weight: bold;
font-size: 20px;
background: #ededed;
padding: 16px 8px 16px 8px;
}
.Form-Item-Label.isMsg {
margin-top: 8px;
margin-bottom: auto;
}
.Form-Item-Label-Required {
border-radius: 6px;
margin: 0px 8px 0px 8px;
padding: 0px 8px 0px 8px;
text-align: center;
background: #ff4500;
color: #fff;
font-size: 1.2rem;
}
.Form-Item-Label-Any {
border-radius: 6px;
margin: 0px 8px 0px 8px;
padding: 0px 8px 0px 8px;
text-align: center;
background: #00f7ff;
color: #fff;
font-size: 24px;
}

.Form-Item-Input {
border: 2px solid #ddd;
border-radius: 10px;
margin: 0px 0px 0px 0px;
padding-left: 1em;
padding-right: 1em;
height: 48px;
flex: 1;
width: 100%;
background: #fff;
font-size: 18px;
}
.Form-Item-Input:focus {
border-color: skyblue;   /* 枠線の色 */
outline: none;           /*※ブラウザが標準で付加する線を消したい時*/
}
.Form-Item-Textarea {
border: 2px solid #ddd;
border-radius: 10px;
margin: 0px 0px 0px 0px;
padding: 1em;
height: 216px;
flex: 1;
width: 100%;
background: #fff;
font-size: 18px;
font-family: 'Lato', sans-serif;
}
.Form-Item-Textarea:focus {
border-color: skyblue;   /* 枠線の色 */
outline: none;           /*※ブラウザが標準で付加する線を消したい時*/
}

.Form-Btn {
border-radius: 6px;
margin-top: 32px;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
padding-bottom: 10px;
max-width: 600px;
display: block;
letter-spacing: 0.05em;
background: #ff9aac;
color: #fff;
font-weight: bold;
font-size: 1.3rem;
transition: 0.2s;
border-bottom: solid 3px gray;
box-shadow: 0px 3px 10px lightgray;
-webkit-appearance: none;
width: 100%;
}
.Form-Btn:active {
transform: translateY(8px);
}
.Form-Btn:hover {
background-color: #ffa5b5;
}
}


@media screen and (max-width:767px) {
.ContactBox {
position: relative;
width:100%;
margin: 20px auto;
font-family: 'Lato', sans-serif;
word-wrap: break-word;
}

/*上下に動くアニメーション*/
.ContactUpDown {
margin         : 0px 0px 0px 20px;
animation-name: ContactUpDown;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 1.5s;
}
@keyframes ContactUpDown {
0% {
transform: translate(0,0px);
}
100% {
transform: translate(0,-5px)
}
}

.ContactTitle {
position: absolute;
font-size: 1.5rem;
margin: -70px 0px 0px 8px;
letter-spacing: 20px;
width: 100%;
text-align: center;
}

.Form {
margin-top: 40px;
margin-left: auto;
margin-right: auto;
width: 100%;
margin-bottom: 60px;
}
.Form-Item {
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
display: flex;
align-items: center;
font-size: .9rem;
}
.Form-Item-Label {
width: 100%;
letter-spacing: 0.05em;
font-weight: bold;
font-size: 15px;
background: #ededed;
padding: 16px 8px 16px 8px;
line-height: 1.5rem;
}
.Form-Item-Label.isMsg {
margin-top: 8px;
margin-bottom: auto;
}
.Form-Item-Label-Required {
border-radius: 6px;
margin: 0px 8px 0px 8px;
padding: 0px 8px 0px 8px;
text-align: center;
background: #ff4500;
color: #fff;
font-size: 15px;
}

.Form-Item-Input {
border: 2px solid #ddd;
border-radius: 10px;
margin: 0px 0px 0px 0px;
padding-left: 1em;
padding-right: 1em;
height: 48px;
flex: 1;
width: 100%;
background: #fff;
font-size: 18px;
}
.Form-Item-Input:focus {
border-color: skyblue;   /* 枠線の色 */
outline: none;           /*※ブラウザが標準で付加する線を消したい時*/
}
.Form-Item-Textarea {
border: 2px solid #ddd;
border-radius: 10px;
margin: 0px 0px 0px 0px;
padding: 1em;
height: 216px;
flex: 1;
width: 100%;
background: #fff;
font-size: 18px;
font-family: 'Lato', sans-serif;
}
.Form-Item-Textarea:focus {
border-color: skyblue;   /* 枠線の色 */
outline: none;           /*※ブラウザが標準で付加する線を消したいと時*/
}

.Form-Btn {
border-radius: 6px;
margin-top: 32px;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
display: block;
letter-spacing: 0.05em;
background: #ffc0cb;
color: #fff;
font-weight: bold;
font-size: 1.3rem;
transition: 0.2s;
border-bottom: solid 3px gray;
box-shadow: 0px 3px 10px lightgrey;
-webkit-appearance: none;
}
.Form-Btn:active {
transform: translateY(8px);
}
.Form-Btn:hover {
background-color: #ffa5b5;
}
}

/* フッタ */
@media screen and (min-width:768px) {
.fa-footer {
margin: 0 auto;
padding: 0;
margin-top:;
font-size: .8rem;
}
.fa-footer .fa-footer-menu-list ul {
margin: 0 auto;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
min-height: 32px;
}
.fa-footer .fa-footer-menu-list ul li {
padding: 3px 16px;
margin: -.5px;
}
.fa-footer .fa-footer-menu-list ul li a {
font-weight: 700;
color: inherit;
text-decoration: none;
}
.fa-footer .fa-footer-menu-list ul li a:hover {
opacity: 0.5 ;
}

.FooterText {
text-align: center;
font-family: 'Lato', sans-serif;
margin:  5px 0px 0px 0px;
font-size: .8rem;
line-height: 1.2rem;
color: #b9b9b9;
padding-bottom:;
}
}


@media screen and (max-width:767px) {
.fa-footer {
margin: 0 auto;
padding: 0;
margin-top:;
font-size: .8rem;   
}
.fa-footer .fa-footer-menu-list ul {
margin: 0 auto;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
min-height: 32px;
}
.fa-footer .fa-footer-menu-list ul li {
padding: 3px 16px;
margin: -.5px;
}
.fa-footer .fa-footer-menu-list ul li a {
font-weight: 700;
color: inherit;
text-decoration: none;
}
.fa-footer .fa-footer-menu-list ul li a:hover {
opacity: 0.5 ;
}

.FooterText {
text-align: center;
font-family: 'Lato', sans-serif;
margin:  5px 0px 0px 0px;
font-size: .8rem;
line-height: 1.2rem;
color: #b9b9b9;
padding-bottom:;
}
}










/* ココが違う */

.PriceContainerBoxc {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    height: ;
    font-family: unset;
    background-color: #fff;
  }
  
  .PriceContainerc {
    margin: auto 0;
    display: flex;
    grid-template-columns: repeat(1, 300px);
    align-items: stretch;
    max-width: 1200px;
  }
  @media (min-width: 768px) {
    .PriceContainerc {
      grid-template-columns: repeat(3, 340px);
    }
  }
  @media (max-width: 767px) {
    .PriceContainerc {
      flex-direction: column;
      width: 90%;
    }
  }

  .boxc {
    position: ;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    transition: 0.5s;
    margin: 10px auto;
  }
  @media screen and (max-width:767px) {
    .boxc {
  padding: 0;
    }
  }
  
  .boxc::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: ;
    pointer-events: none;
  }
  

  .boxc .titlec .fa {
    margin-top: 20px;
    font-size: 60px;
    color: #ffc98e;
  }
  

  .boxc .titlec h2 {
    color: #fff;
    margin: 20px 0 0;
    padding: 0;
    font-size: 1rem;
  }
  

  .boxc .pricec h4 {
    font-size: 1.7rem;
    color: #3b3b3b;
    margin: 10px 0;
    padding: 0;
    font-weight: 500;
    line-height: 1.2;
  }
  

  .boxc .optionc ul {
    padding: 0;
    list-style: none;
  }
  
  .boxc .optionc ul li {
    color: #000;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .boxc .optionc ul li:last-child {
    border-bottom: none;
  }
  
  .boxc .PriceBtnc {
    display: inline-block;
    background: #ffc98e;
    color: #262626;
    font-weight: bold;
    padding: 10px 50px;
    margin-top: 20px;
    text-decoration: none;
  }
  
  
  
    .Manga3{   
    text-align: center;
    margin-bottom: 20px;
    }
    .Manga3 img{   
    width: 50%;
    }
    @media screen and (max-width:767px) {
      .Manga3{   
        text-align: center;
        margin-bottom: 20px;
        }
    .Manga3 img{   
    width: 100%;
    }
    }
  
    .optionc{   
     text-align: left;
     line-height: 1.5;
      }

.subTitle {
    color: #fff;
    text-align: center;
    display: block;
    margin: 0 10px;
    font-size: 1rem;
    line-height: 3;
}
@media screen and (max-width: 767px){
.subTitle {
    color: #fff;
    text-align: center;
    display: block;
    margin: 0 10px;
    font-size: .8rem;
}
}

.underc {
   color: #faff7f;
}

.under {
    background: linear-gradient(transparent 70%, #fff300 70%);
}













/* 価格表 */

.PriceContainerBox {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    margin-bottom: 60px;
  }

  .PriceContainer {
    margin: auto 0;
    padding: 40px 0 0;
    display: flex;
    grid-template-columns: repeat(1, 300px);
    grid-gap: 40px;
    align-items: stretch;
    width: 80%;
    margin: auto;
  }
  @media screen and (max-width: 767px){
    .PriceContainer {
        flex-direction: column;
      }
    }
  
  @media (min-width: 768px) and (max-width: 1259px) {
    .PriceContainer {
      grid-template-columns: repeat(1, 400px);
    }
  }
  
  @media (min-width: 1260px) {
    .PriceContainer {
      grid-template-columns: repeat(3, 340px);
    }
  }
  

  .box {
    position: ;
    overflow: hidden;
    width: 100%;
    height: auto;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    background: linear-gradient(0deg, #202020, #464646);
    transition: 0.5s;
  }
  @media screen and (max-width: 767px){
    .box {
        min-height: 0;
      }
    }


  @media (min-width: 768px) {
    .box:hover {
      transform: scale(1.05);
    }
  }
  
  .box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: ;
    pointer-events: none;
  }
  
  .box .title .fa {
    margin-top: 10px;
    font-size: 60px;
    color: #ffc98e;
  }
  

  .box .title h2 {
    color: #fff;
    margin: 20px 0 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.5;
  }
  

  .box .price h4 {
    font-size: 2rem;
    color: #ffc98e;
    margin: 10px 0;
    padding: 0;
    font-weight: bold;
    text-shadow    : 
    2px  2px 1px #393939,
   -2px  2px 1px #393939,
    2px -2px 1px #393939,
   -2px -2px 1px #393939,
    2px  0px 1px #393939,
    0px  2px 1px #393939,
   -2px  0px 1px #393939,
    0px -2px 1px #393939;
  }
  

  .box .option ul {
    padding: 0;
    list-style: none;
  }
  
  .box .option ul li {
    color: #fff;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .box .option ul li:last-child {
    border-bottom: none;
  }
  
  .box .PriceBtn {
    display: inline-block;
    background: #ffc98e;
    color: #262626;
    font-weight: bold;
    padding: 10px 40px;
    margin-top: 20px;
    text-decoration: none;
  }

.option {
  text-align: left;
  }

  .ps {
   font-size: 1.5rem;
    }

    .optiont {
    text-align: center;
    font-size: 1.6rem;
    color: white;
    margin-top: 30px;
    }
    @media screen and (max-width: 767px){
        .optiont {
            font-size: 1rem;
            margin-top: 30px;
            }
        }
                











            
/* 制作実例 */
.columnIn {
    width: 98%;
    max-width: 1160px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 200px;
    margin-top: -200px;
    }
    @media screen and (max-width: 736px){
    .columnIn {
    max-width: 96%;
    font-size: 0.85em;
    padding-top: 80px;
    margin-top: -80px;
    }
    }
    
    .column {
    margin: 20px 0 50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    }
    @media screen and (max-width: 736px){
    .column {
    flex-direction: column;
    }
    }
  
  
    
    #columnAll h3, #columnAll h4 {
    margin: 0 0 0.5em;
    }
    @media screen and (max-width: 736px){
    #columnAll h3, #columnAll h4 {
    text-align: center;
    font-size: 1.3em;
    }
    }
    
    #columnAll h4 {
    color: #42546A;
    font-size: 1.6em;
    }
    @media screen and (max-width: 736px){
    #columnAll h4 {
    font-size: 1.4em;
    text-align: center;
    }
    }
    
    .columnAllP {
    line-height: 1.1rem;
    max-width: 500px;
    }
    
    .featureWrapImg {
    max-width: 120px;
    }
    .featureWrapImg2 {
    max-width: 300px;
    }
    
    .columntp{
     margin-top: 20px;
      }
      @media (max-width: 767px) {
        .columntp{
          width: 90%;
           }
          }

          .columntp2{
            margin-top: 20px;
            text-align: center;
             }
             @media (max-width: 767px) {
               .columntp2{
                 width: 90%;
                  }
                 }
  
    .columnBtn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 1rem;
    }

    .TopObBoxBalloon2 {
      opacity : 1;
      transform : translate(0, 0px)scale(0,0);
      transition : all 0.5s;
      transition-delay : .5s;
      opacity : 1;
      animation: TopObBoxBalloon 3s ease-out .5s infinite normal both;
      }
      @keyframes TopObBoxBalloon {
      0% { transform: scale(1); }
      10% { transform: scale(1.03); }
      20% { transform: scale(1); }
      30% { transform: scale(1.01); }
      40% { transform: scale(1); }
      100% { transform: scale(1); }
      }

      .WorryUp-down2 {
        animation-name: WorryUp-down;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-duration: .5s;
        }
        @keyframes WorryUp-down {
        0% {
        transform: translate(0,2px);
        }
        100% {
        transform: translate(0,-2px)
        }
        }
        @media screen and (max-width:767px) {
          .WorryUp-down2 {
            animation-name: WorryUp-down;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-duration: .8s;
            }
            @keyframes WorryUp-down {
            0% {
            transform: translate(0,2px);
            }
            100% {
            transform: translate(0,-2px)
            }
            }
          }











  /*km*/
  .km{   
  text-align: center;
  position: relative;
  z-index: 0;
   padding: 20px 20px;
  }
 @media screen and (max-width:767px) {
  .km{  
    padding: 0 5px 20px; 
  }
}
  .km img{   
  width: 60%;
  }
  @media screen and (max-width:767px) {
  .km img{   
  width: 100%;
  }
  }

  .km2{   
    text-align: center;
    position: relative;
    z-index: 0;
    background-color: white;
     padding: 20px 20px 0;
    }
   @media screen and (max-width:767px) {
    .km2{  
      padding: 0 20px 40px; 
    }
  }
    .km2 img{   
    width: 50%;
    }
    @media screen and (max-width:767px) {
    .km2 img{   
    width: 100%;
    }
    }






    /* FAQ よくある質問 */
.cp_qa {
  width: 60%;
  margin: auto;
  }
  @media screen and (max-width:767px) { 
  .cp_qa {
  width: 90%;
  margin: auto;
  }
  }
  
  .cp_qa *, .cp_qa *:after, .cp_qa *:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  }
  .cp_qa .cp_actab {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 0 1em 0;
  color: #1b2538;
  background-color: #fff;
  border-radius: 1rem;
  }
  @media screen and (max-width:767px) { 
  .cp_qa .cp_actab {
  }
  }
  
  .cp_qa .cp_actab input {
  position: absolute;
  opacity: 0;
  }
  
  /* 質問 */
  .cp_qa .cp_actab label {
  line-height: 1.6em;
  position: relative;
  display: block;
  margin: 0 0 0 0;
  padding: 1em 5em 1em 3em;
  cursor: pointer;
  text-indent: 1em;
  border-radius: 0.5em;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  }
  @media screen and (max-width:767px) { 
  .cp_qa .cp_actab label {
  padding: 1em 2.5em 1em 2.5em;
  }
  }
  
  .cp_qa .cp_actab label::before {
  font-family: serif;
  font-size: 1.5em;
  margin-left: -1.5em;
  content: 'Q';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f059";
  color: #ff6e6e;
  padding-right: 0.5em;
  }
  .cp_qa .cp_actab label:hover {
  transition: all 0.3s;
  }
  
  /* --質問の＋アイコン */
  .cp_qa .cp_actab label::after {
  font-size: 1.7em;
  line-height: 2em;
  position: absolute;
  top: 0;
  right: 0;
  content: '\2b';
  display: inline-block;
  width: 2em;
  height: 2em;
  -webkit-transition: transform 1s;
  transition: transform 1s;
  }
  
  /* 答え */
  .cp_qa .cp_actab .cp_actab-content {
  line-height: 1.6em;
  position: relative;
  overflow: hidden;
  max-height: 0;
  padding: 0 0 0 2.9em;
  -webkit-transition: max-height .5s;
  transition: max-height .5s;
  border-radius: 0 0 0.5em 0.5em;
  background-color: #f2f2f2;
  }
  @media screen and (max-width:767px) {
  .cp_qa .cp_actab .cp_actab-content {
  padding: 0 0 0 .5em;
  }
  } 
  .cp_qa .cp_actab .cp_actab-content::before {
  font-family: serif;
  font-size: 1.5em;
  position: absolute;
  margin: 0.4em 0 0 .5em;
  padding: 0;
  content: 'A';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\41";
  }
  .cp_qa .cp_actab .cp_actab-content p {
  margin: 1em 3em 1em 3em;
  }
  @media screen and (max-width:767px) {
  .cp_qa .cp_actab .cp_actab-content p {
  margin: 1em 1.5em 1em 2.5em;
  }
  }
  
  /* 質問を開いた時の仕様 */
  /* --答えの高さ */
  .cp_qa .cp_actab input:checked ~ .cp_actab-content {
  max-height: 40em;
  background-color: #f2f2f2;
  transition: max-height 3s;
  }
  
  /* 質問をクリックした時のアイコンの動き */
  .cp_qa .cp_actab input:checked ~ label {
  border-radius: 0.5em 0.5em 0 0;
  }
  /* 質問をクリックした時の+の動き */
  .cp_qa .cp_actab input[type=checkbox]:checked + label::after {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  }