@charset "utf-8";
/* CSS Document */
/*-----------------------------
 reset
-------------------------------*/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, 
img, small, strong, sub, sup,b, i,dl, dt, dd, ol, ul, li,
 form, label,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,hgroup, menu, nav, section,
time, mark, audio, video {
margin:0;	padding:0;border:0;outline:0;font-size:100%;
vertical-align:baseline;background:transparent;line-height:1.7;
}
th{font-style:normal;font-weight:normal;}
ul li{list-style:none; }
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%;}

body {line-height:1;font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ","ＭＳ Ｐゴシック",Helvetica,Sans-Serif;}
nav ul {list-style:none;}
table {	border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
article, aside, figure, footer, header,hgroup, nav, section { display:block; }
article img{vertical-align:bottom;width:100%;display: block;}
/* アンケート
----------------------------------------------------*/

.enque {
	margin-top: 5%;
}
.enque img{
	width:96%;
	margin:auto;
}
/* スイッチボタン */
.switchbox {
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  padding: 5% 5% 10% 5%;
}

.switchbox label {
    display: block;
    font-weight: bold;
    cursor :pointer;
    padding: 3% 3%;
    text-align: center;
    background: #aaa;
    color: #fff;
    border-radius: 5px;
    box-shadow:0px 8px 0px 0px rgba(0,0,0,0.5) ;
    width: 30%;
    font-size: 1.5rem;
}

.switchbox input {
    display: none; 
}

.switchbox input:checked + label {
    transform: translateY(5px);
    background: #5c93e7;
    box-shadow:0px 3px 0px 0px #00327C ;
    color: #fff;
}

.chkbox {
  padding: 5% 5% 10% 5%;
  line-height: 1.48;
  text-align: left;
}
.chkbox li {
  margin-bottom: 7%;
  color: #000;
}

.chkbox li:last-child {
  margin-bottom: 0;
}

label {
  cursor: pointer;
}

.chkbox li input[type="radio"],
.chkbox li input[type="checkbox"]
{
    display: none;
}

.chkbox li label {
  position: relative;
  display: inline-block;
  font-size: 1.3rem;
  font-weight: bold;
  padding-left: 50px;
}

.chkbox li label::before {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  display: inline-block;
  width: 25px;
  height: 25px;
  border: solid 2px #579aff;
  background: #fff;
  border-radius: 4px;
}

.chkbox li input[type="radio"]:checked + label::after,
.chkbox li input[type="checkbox"]:checked + label::after
{ 
  border-right: 5px solid #f71313;
  border-bottom: 5px solid #f71313;
  content: '';
  display: block;
  height: 29px;
  width: 15px;
  left: 9px;
  top: -14px;
  opacity: 1;
  position: absolute;
  transform: rotate(45deg);
}
/*-----------------------------
 common
-------------------------------*/
.wrap{
max-width: 750px;
margin: 0 auto;
background:#fff;
}

.fv02{
    position: absolute;
    top: 5%;
}

.wrap a:hover{
    opacity: .7;
}
.overlaid{
    position: relative;
}
.abs{
    position: absolute;
}
.acc_content{
    position: relative;
    overflow: hidden;
    max-height: 1160px;
    height: 154.67vw;
    transition: all .6s;
}
.acc_content::after{
    content: "";
    display: block;
    max-height: 100px;
    height: 13.34vw;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: -webkit-linear-gradient(top,rgba(255,255,255,0),#fff);
}
.acc_btn{
    cursor: pointer;
}
.activate{
    max-height: 3544px;
    height: 472.4vw;
}
.activate::after{
    display: none;
}
.hidden{
    display: none;
}
.voice1{
    position: absolute;
    bottom: 14%;
    width: 89%;
    left: 5.5%;
}
.voice2 {
    position: absolute;
    bottom: 18%;
    width: 89%;
    left: 5.5%;
}
.btn01{
    top: 47.1%;
    left: 46.5%;
    width: 49.5%;
	animation: fluffyY 1s infinite ease;/*ボタン動き*/
}
.btn02{
    top: 56.1%;
    left: 47.5%;
    width: 49.5%;
	animation: fluffyY 1s infinite ease;/*ボタン動き*/
}

.btn03{
    top: 64%;
    left: 57%;
    width: 37.5%;
	animation: fluffyY 1s infinite ease;/*ボタン動き*/
}
.btn04{
    top: 38%;
    left: 59%;
    width: 34.5%;
	animation: fluffyY 1s infinite ease;/*ボタン動き*/
}
.btn05 {
    top: 60%;
    left: 12.5%;
    width: 76.5%;
}

.btn06 {
    top: 65.1%;
    left: 46.5%;
    width: 49.5%;
    animation: fluffyY 1s infinite ease;
}
.btn07{
    width: 80%;
	left: 10%;
    bottom: 6%;
	animation: fluffyY 1s infinite ease;/*ボタン動き*/
}
.btn08{
    width: 37%;
	float:right;
}
.btn09{
    width: 80%;
	left: 10%;
    bottom: 3.5%;
	animation: fluffyY 1s infinite ease;/*ボタン動き*/
}
.gif01{
    width: 34%;
	top: 10%;
    left: 65%;
}
.popup_video{
    bottom: 20%;
    width: 40W%;
}
/*アコーディオン*/
.acc__area1 {
background-color: #EBF3F5;
background-size: 100%;
padding: 0 0 2.6%;
margin: 5% auto 3.6%;
}
.acc__area {
background: url("https://www.fromcocoro.com/daily1/sp/common/img/acc_bg.jpg");
background-size: 100%;
padding: 0 0 2.6%;

}
.acc{
margin: 0 auto;
width: 90%;
}
.qa__set{
margin-bottom: 5%;
}
.acc__q{
position: relative;
cursor: pointer;
animation: animScale 2s infinite ease-out;
}
.active{
border-radius: 0;
overflow: hidden;
}
.acc__a{
display: none;
}
.acc__q::before{
content: '';
position: absolute;
width: 5.8%;
height: 1px;
border-bottom-width: 0.01vw;
margin: auto;
top: 0;
bottom: 0;
right: 6.2%;
transform: rotate(0deg);
transition: all .4s;
z-index: 5;
}
.active::before{
transform: rotate(360deg);
transition: all .4s;
}
.acc__q::after{
content: '';
position: absolute;
width: 5.8%;
height: 1px;
border-bottom-width: 0.01vw;
margin: auto;
top: 0;
bottom: 0;
right: 6.2%;
transform: rotate(90deg);
transition: all .4s;
z-index: 5;
}
.active::after{
transform: rotate(360deg);
transition: all .4s;
}

@media screen and (max-width:1199px) {
#banner{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 750px;
    margin: 0 auto;
    z-index: 10;
}
}
@media screen and (min-width:1200px) {
#banner{
    position: fixed;
    bottom: 0;
    right: 0;
    max-width: 750px;
    margin: 0 auto;
    z-index: 10;
}
}
#banner2{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 640px;
    margin: 0 auto;
    z-index: 10;
}
.scroll{
position: absolute;
bottom: 9.7%;
right: 0%;
display: flex;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
width: 95%;
padding: 0 0 0 7%;
}
.scroll2{
position: absolute;
bottom: 6.7%;
display: flex;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
width: 95%;
padding: 0 0 0 7%;
}
.scroll2 li{
flex: 0 0 50%;
}
.scroll2 li:last-child{
padding-right: 9%;
}
.menu_bar01{
    display: block;
    margin: 30px 0px 10px 0px;
    font-size: 22px;
    text-align: center;
    background: #d2476d;
    padding: 10px 0px;
    color: #FFF;
    cursor: pointer;
    font-weight: bold;
}

.menu_bar01 img{
	margin-bottom:20px;
}
	

.payway{
    background-color: #fadcd4;
    padding:10px 15px;
    border-left: 10px solid #d2476d;
	margin:5px;
}

.paycomp{
	margin:5px;
	line-height: 180%;
	}
.payimg{
	margin:20px;
	}
.gaiyo{
    padding: 3px;	
} 


.gaiyo ul{
    padding: 0px; 	
    margin: 0px;
} 


.gaiyo ul li {
    display:inline-block; 	
    margin-right: 1em;
} 


.gaiyo ul li a { 
        text-decoration: none;
} 


.gaiyo ul li a:hover{ 
    border-bottom: dotted 1px #fff;	 
}

.footer {
    background-color: #534842;
    color: #FFF;
    text-align: center;
    padding: 10px 0px;
}
.mvbtn_hard {
	position: relative;
}

.mvbtn {
  position: absolute;
  display: block;
  bottom: 1%;
  animation: fluffyY 1s infinite ease;/*ボタン動き*/
}
.mv2btn {
  margin-top: 0%;
  display: block;
  bottom: 1%;
  left: 10%;
  animation: fluffyY 1s infinite ease;/*ボタン動き*/
}
.mv3btn {
  margin-top: 60%;
  display: block;
  bottom: 1%;
  left: 10%;
  animation: fluffyY 1s infinite ease;/*ボタン動き*/
}


.loop{
	position:absolute;
}
.loop01{
bottom:20%;
width:100%;
}
.loop02{
bottom:4%;
width:100%;
}
.video01{
	position:relative;
}
.video02{
position:absolute;
bottom:14%;
width:89%;
left:5.5%;
}
.video03{
position:absolute;
bottom:14%;
width:89%;
left:5.5%;
}
.video04 {
    position: absolute;
    top: 33%;
    width: 85%;
    left: 7.5%;
}
/*-----------------------------
 ボタン挙動
-------------------------------*/
@keyframes fluffyY {
  0% { transform:translateY(7px); }
  50% { transform:translateY(-7px); }
  100% { transform:translateY(7px); }
}
@keyframes animScale {
0% { transform: scale(0.9, 0.9); }/*(Xよこ,Yたて)サイズは%で表示*/
25% { transform: scale(1, 1); }
50% { transform: scale(0.9, 0.9); }
75% { transform: scale(1, 1); }
100% { transform: scale(0.9, 0.9); }
}

.youtube iframe{
  width: 100%;
}
.offer_slider{
	top: 21.1%;
    left: 4%;
    width: 92%;
}