.request_btn{
text-align: center;
width: 90%;
background:#ffffff;
padding: 20px 0;
text-decoration: none;
font-weight: bold;
font-size: 130%;
margin: 20px auto 50px;
position: relative;
transition: .3s;
}
.request_btn i{
position: absolute;
color: white;
right: 10px;
font-size: 160%;
}
.btn_blue:hover{
opacity: 1;
background-image: linear-gradient(45deg, #007C9A 0%, #3EAFCD 100%);
color: #ffffff;
box-shadow: 0 10px 10px -5px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1);
transform: translateX(5px);
border-radius: 50px;
}
.btn_blue{
color: #35A3D1;
border: 2px solid #35A3D1;
box-shadow: 0 0 3px 0 rgba(0,0,0,.12), 0 2px 3px 0 rgba(0,0,0,.22);
text-decoration: none;
}
.btn_pink:hover{
opacity: 1;
background-image: linear-gradient(45deg, #D1355B 0%, #E386B1 100%);
color: #ffffff;
box-shadow: 0 10px 10px -5px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1);
transform: translateX(5px);
border-radius: 50px;
}
.btn_pink{
color: #D1355B;
border: 2px solid #D1355B;
box-shadow: 0 0 3px 0 rgba(0,0,0,.12), 0 2px 3px 0 rgba(0,0,0,.22);
text-decoration: none;
}
.btn_poco{ 
border-radius: 30px;
box-shadow:7px 7px 10px #C9CBCD,-8px -8px 12px rgba(219,240,245,0.10);
border:1px solid #e9eaf1;
background: -webkit-gradient(linear,
left top,
left bottom,
from(#007C9A),
to(#dcddde)
);
background: -webkit-linear-gradient(top, #007C9A 0%, #dcddde 100%);
background: linear-gradient(180deg, #C0E5EE 0%, #A5CBD4 100%);
-webkit-box-shadow: -1px -5px 6px rgba(0, 0, 0, 0.2), 3px 3px 5px white,
 0 10px 10px rgba(0, 0, 0, 0.1), inset 0 -4px 5px rgba(0, 0, 0, 0.1);
box-shadow: -1px -5px 6px rgba(0, 0, 0, 0.2), 3px 3px 5px white,
0 10px 10px rgba(0, 0, 0, 0.1), inset 0 -4px 5px rgba(0, 0, 0, 0.1);
width:70%;
color: #007C9A;
font-weight:bold;
cursor: pointer;
text-align: center;
padding: 15px 10px;
text-decoration: none;
font-size: 120%;
margin: 50px auto 50px;
transition: .3s;
}
.btn_poco:hover{
-webkit-box-shadow: -1px -5px 6px rgba(0, 0, 0, 0.2), 3px 3px 5px white,
0 10px 10px rgba(0, 0, 0, 0.1), inset 0 -4px 5px rgba(0, 0, 0, 0.1),
inset 0 3px 3px rgba(0, 0, 0, 0.18);
box-shadow: -1px -5px 6px rgba(0, 0, 0, 0.2), 3px 3px 5px white,
0 10px 10px rgba(0, 0, 0, 0.1), inset 0 -4px 5px rgba(0, 0, 0, 0.1),
inset 0 3px 3px rgba(0, 0, 0, 0.18);
background: linear-gradient(180deg, #C0E5EE 0%, #8ABBC7 100%);
}
.btn_poco span{
display: inline-block;
 -webkit-transition: all 0.3s;
transition: all 0.3s;
}
.btn_poco:hover span {
-webkit-transform: scale(0.96);
transform: scale(0.96);
color: #006179;
}
/*矢印*/
.arow_con{
position:relative;
width:100%;
height:150px;
}
/*矢印*/
.cp_arrows {
position: relative;
display: flex;
margin: 4em auto 2em;
justify-content: center;
align-items: center;
}
.cp_arrows .cp_arrow {
position: absolute;
top: calc(50% - 25px);
left: 50%;
width: 40px;
height: 40px;
}
.cp_arrows .cp_arrow::before,
.cp_arrows .cp_arrow::after {
position: absolute;
display: block;
width: 3px;
height: 30px;
content: '';
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: translate(-50%, -50%) rotateZ(-60deg);
transform: translate(-50%, -50%) rotateZ(-60deg);
transform-origin: bottom right;
border-radius: 10px;
background: #007C9A;
}
.cp_arrows .cp_arrow::after {
-webkit-transform: translate(-50%, -50%) rotateZ(60deg);
transform: translate(-50%, -50%) rotateZ(60deg);
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
.cp_arrows .cp_bounce {
-webkit-animation: arrow-move09 2s infinite ease-in-out;
animation: arrow-move09 2s infinite ease-in-out;
}
@-webkit-keyframes arrow-move09 {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
48% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes arrow-move09 {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
48% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
/*矢印ここまで*/
/*キラン*/
.kiran {
opacity: 1;
overflow: hidden;
position: relative;
cursor: pointer;
}
.kiran::before {
background-color: #fff;
content: "";
display: block;
position: absolute;
top: -100px;
left: 0;
width: 30px;
height: 100%;
opacity: 0;
transition: cubic-bezier(0.32, 0, 0.67, 0);
}
.kiran:hover::before {
animation: kiran 0.5s linear 1;
}
@keyframes kiran {
0% {
transform: scale(2) rotate(45deg);
opacity: 0;
}
20% {
transform: scale(20) rotate(45deg);
opacity: 0.6;
}
40% {
transform: scale(30) rotate(45deg);
opacity: 0.4;
}
80% {
transform: scale(45) rotate(45deg);
opacity: 0.2;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
button.moushikomi{
width: 100%;
margin: 0 auto;
cursor:pointer;
border:none;
color: #fff;
font-weight:bold;
border-radius: 5px;
padding: 15px 15px;
background:#11C4C9;
font-size: 110%;
}
button.moushikomi:disabled{
background:#C9E7E7;
}
button.moushikomi:hover{
background:#ca012d;
}
button.modoru{
color: #11C4C9;
background:rgba(30, 141, 123, 0.1);
border: 2px solid #11C4C9;
font-weight:bold;
border-radius: 5px;
padding: 15px 15px;
cursor: pointer;	
width: 80%;
margin: 0 auto;
text-align: center;
font-size: 110%;
}
.modoru:hover{
background: #CBFBA4;
}
/* 解約理由チェックボックス */
.check_box{
text-align: center;
font-size: 120%;
margin: 60px auto 0;
}
.check-btns i{
color: #90B5B6;
padding-left: 10px;
}
.check-btns i:hover{
color: #11C4C9;
}
.check-btns input[type=checkbox] {
display: none;
}

.check-btns label {
position: relative;
padding-left: 25px;
line-height: 2;
}
.check-btns input[type=checkbox]  + label::before {
position: absolute;
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #000000;
left: 0px;
top: 0;
border-radius: 3px;
}
.check-btns input[type=checkbox]  + label::before:checked {
background: rgba(239,228,83,1.00);
}
.check-btns input[type=checkbox]  + label::after {
position: absolute;
content: '';
display: block;
width: 8px;
height: 12px;
transform: rotate(45deg) scale(0, 0);
border-right: 3px solid #E31E4D;
border-bottom: 3px solid #E31E4D;
left: 5px;
top: -2px;
transition: .3s;
}
.check-btns input[type=checkbox]:checked + label::after {
transform: rotate(45deg) scale(1, 1);
}
.check-btns input[type=checkbox]:checked + .ch_box{
color: #E31E4D;
}
label.ch_box{
padding-left: 30px;
}
label.ch_box:hover{
color: #E20052;
}
.check-btns input[type=radio] {
display: none;
}
.check-btns{
margin: 20px 10px;
}
.check-btns input[type=radio]  + label::before {
position: absolute;
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #000000;
left: 0px;
top: -1px;
border-radius: 3px;
}

.check-btns input[type=radio]  + label::before:checked {
background: rgba(239,228,83,1.00);
}
.check-btns input[type=radio]  + label::after {
position: absolute;
content: '';
display: block;
width: 8px;
height: 12px;
transform: rotate(45deg) scale(0, 0);
border-right: 3px solid #EF0340;
border-bottom: 3px solid #EF0340;
left: 3px;
top: -1px;
transition: .3s;
}
.check-btns input[type=radio]:checked + label::after {
transform: rotate(45deg) scale(1, 1);
}
.check-btns input[type=radio]:checked + .ch_box{
color: #EF0340;
font-weight: bold;
}
label.ch_box{
padding-left: 30px;
}
label.ch_box:hover{
color: #2137FA;
}

@media screen and (max-width: 479px) {
.request_btn{
font-size: 115%;
margin: 20px auto 30px;
}
.request_btn i{
font-size: 130%;
}
.btn_poco{
width: 85%;
}
button.moushikomi{
width: 100%;
cursor:pointer;
padding: 20px 5px;
font-size: 100%;
}	
button.modoru{
border: 2px solid #11C4C9;
border-radius: 10px;
padding: 20px 15px;
cursor: pointer;	
width: 100%;
font-size: 90%;
}
/* チェックボックス */
.check_box{
font-size: 100%;
margin: 20px auto 0;
}
   
    
label.ch_box{
padding-left: 25px;
font-size: 110%;
}
.check-btns input[type=checkbox]  + label::before {
width: 20px;
height: 20px;
left: -3px;
top: 2px;
}
.check-btns input[type=radio]  + label::before {
width: 20px;
height: 20px;
left: -3px;
top: 1px;
}
.check-btns input[type=radio]  + label::after {
top: 1px;
}
.check-btns input[type=checkbox]  + label::after {
top: 1px;
}
.iframe_box{
width: 98%;
height: 300px;
}
.iframe_box iframe{
height: 300px;
}
.check-btns02{
margin: 20px 0;
}
}

