@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap');

/*--------------------------------------------------------------
|
| reset css
|
--------------------------------------------------------------*/

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:bold;margin:0;padding:0;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;}
	
a {text-decoration:none;overflow:hidden;}
img {border:none;vertical-align:middle;
 -webkit-backface-visibility: hidden;}
hr {display:none;clear:both;}
ul {margin:0;padding:0;}
li {margin:0;padding:0;list-style:none;}
dl {margin:0;padding:0;}
dt {margin:0;padding:0;}
dd {margin:0;padding:0;}

p {margin:0;padding:0;
font-feature-settings: "palt" 1;
font-family: 'M PLUS Rounded 1c', sans-serif;}

span{font-feature-settings: "palt" 1;
font-family: 'M PLUS Rounded 1c', sans-serif;}

* {-webkit-appearance:none;}

* {-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;}


 .sp{display: none!important;}  
        .pc{display:block!important;}  



/*--------------------------------------------------------------
|
| main
|
--------------------------------------------------------------*/


body {
    height: 100%;
    margin: 0;
    font-feature-settings: 'palt';
 font-family: 'M PLUS Rounded 1c', sans-serif;}
 
 
.pagetitle{
max-width: 1000px;
width: 100%;
margin: 15px auto;
display: flex;
align-items: center;
justify-content: space-between;    
font-size: 18px;
color: black;
letter-spacing: 0.015em;
}	

.pagetitle a.applicationbutton{
width: 25%;
}	

.pagetitle a.applicationbutton img{
width: 90%;
object-fit: contain;
}	

a.applicationbutton{
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;  
padding: 5px 20px;
background-color: #F74E77;    
}

a.applicationbutton:hover{
opacity: 0.8;
transition: 0.3s ease;    
}


#topmv{
margin: 0 auto;  
background-color:#FFC841;       
}

.container{
max-width: 860px;
width: 100%;
position: relative;
margin: 0 auto;
}

#topmv.container img{
object-fit: contain;
position: relative;
z-index: 2;    
}


.btncolumn{
margin-top: 70px;     
display: flex;
height: 60px;    
justify-content: space-between;
align-items: center;    
}


.btncolumn a.checkbutton{
    height: 60px;   
        width: 48%!important;
border:0;
    
}


.btncolumn a.applicationbutton img {
    width: 58%!important;
    margin: 7px 0;
}


.btncolumn a.applicationbutton {
    width: 48%!important;
height: 60px;  
margin:0!important;
}


.imgWrpper{
width: 100%;
margin: 0 auto;
text-align: center;}

.imgWrpper img{
margin: 0 auto;
text-align: center;}

#topmv img.topmv_c{
position: absolute;
width: 35px;
right: -2%;
top:10%;
}


#topmv img.topmv_d{
width: 100%;
margin: 0px 0 30px;}


.topmvcontent{
width: 61.5%;  
padding: 50px 0 55px;
}





.cb_maintitle{
font-size: 46px;
color:#108761;
line-height: 1.3;    
display: block;    
font-weight: 600;    
}

.cb_subpoint{
color:#108761;    
padding: 0px 7px;
font-size: 27px;  
font-weight: 500;
border-radius: 10px;
border: 4px solid #108761;    
}

a.checkbutton{
width: 100%; 
display: flex;
border-radius:50px;   
padding: 5px 10px;
justify-content: center;    
 background-color: #9EDB0B;
border: 2px solid white;
}

a.checkbutton img{
object-fit: contain;
width: 80%;

}

a.checkbutton:hover{
background-color: #B1E21A;
transition: 0.3s ease;    
}

.list-item {
    opacity: 0;
    transition: opacity 0.5s;
}


#SS_topmv .SS_hund{
width: 6vw;
right: 32.5%;
bottom: -6%;
position: absolute;}

.SS_hund{
width:70px;
object-fit: contain;
position: absolute;}

.SS_hund:active {
object-fit: contain;
  position: relative;
  top: 7px;
  box-shadow: none;}

.SS_scale {
animation: hundanime 3s ease infinite;
transform: scale(0.2, 0.2);}


.SS_fadeIn{
animation-name:fadeInAnime;
animation-duration:0.3s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


.SS_bottom{
animation-name:bottomAnime;
animation-duration:.3s;
animation-fill-mode:forwards;
opacity:0;
animation-delay: 0.7s;    
}

@keyframes bottomAnime{
  from {
    opacity: 0;
   transform: translateY(30px); 
  }

  to {
    opacity: 1;
      transform: translateY(0px);
  }
}


@keyframes hundanime {
  0% { transform: scale(1); }
    10% { transform: scale(1.08); }
    20% { transform: scale(1); }
    30% { transform: scale(1.08); }
    40% { transform: scale(1); }
    100% { transform: scale(1); }}
  
 .SS_nAnime{
    animation: iconAnime 4s ease infinite;
}  

@keyframes iconAnime {
0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  40% { transform:translateY(0) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
} 

.SS_sway{
    transform-origin: center bottom;
    animation: swayanime 3s linear infinite;
}

@keyframes swayanime {

0% {transform: rotate(0)}
  5% {transform: rotate(0)}
  10% { transform: rotate(0)}
    15% { transform: rotate(0)}
  20% { transform: rotate(0) }
  25% { transform: rotate(0) }
  30% { transform: rotate(0) }
  40% { transform: rotate(-10deg) }
  50% { transform: rotate(0) }
    60% { transform: rotate(10deg) }
	   70% { transform: rotate(0) }
	   	   80% { transform: rotate(10deg) }
  90% {  transform: rotate(0)}		   
  100% {  transform: rotate(0)}

}

  
.ch__a{
    display: block!important;  }  
    
 .ch__b{
    display:none!important; }    


.cbInnner{
background-color:#D0EB00;
position: relative;
padding-bottom: 150px;    
}

.cb_title{
text-align: center;
margin: 80px auto 0;
}

.cbInnner ul li{
margin-top: 20px;
margin-bottom: 60px;
}


.cbInnner ul li img{
 width: 100%   
}


img.plus{
left: 50%;
width: 150px;
transform: translate(-50%, 0%);
position: absolute;
bottom: -70px;    
}

.cb_title-b{
margin: 0 auto;
position: relative;
width: 700px;    
}

.cb_title-b img{
width: 100%;    
}

.cb_c-top-a{
border:4px solid #F74E77;
border-radius: 7px;
 display: block;
color:   #F74E77;
font-size: 35px;    
text-align: center;
font-weight: 500;
padding: 6px;    
margin: 35px 0 10px;   
    
}

.cb_c-top-b{
 background-color: #F2F1EB;
font-size: 25px;    
padding: 5px;
text-align: center;
display: block;
 border-radius: 7px; 
margin-bottom: 25px;    
}



.cb_check{
background-color: white;
border-radius: 30px; 
padding: 0 6% 50px;
}

.cb_title-b img.cb_c-icon{
  position: absolute;
width: 200px;
bottom: 0;
right: 35px;  
}



.cb_title img{
width: 770px;
text-align: center;    
margin: -80px auto 0;
}

#content-a{
padding: 80px 0 0px;
margin: 0 auto;
background-color: #FFC841;    
text-align: center;   
}

#content-a img{
 width: 100%;     
object-fit: contain;    
}

#content-a a.applicationbutton{
 width: 500px;
margin: 65px auto 0;
}


#content-a a.applicationbutton img{
width: 40%;
margin: 7px 0;
}

#content-b .container{
width: 780px;
margin-top: -3%;  
	font-size: 0;
	line-height: 0;
	z-index: 2;
}

    
#content-b .container ul{
   width: 100%;
    margin: 0 auto 0;    
text-align: center;
    }

#content-b .container ul li{
text-align: center;    
margin: 0 auto;   
    }

#content-b .container ul li img{
width: 100%;
height: auto;
    }

#content-b .container ul li:first-child{
padding-bottom: 25px;   
    }
  


.cb_top{
width: 100%;   
margin: 0 auto;
}

.cb_top img{
width: 100%!important;
object-fit: contain;    
position: relative;
 z-index: 1;  
bottom: -1px; 
}

.cb_bottom{
width: 100%;   
margin: 0 auto;
}

.cb_bottom img{
width: 100%!important;
object-fit: contain;    
position: relative;
bottom: -1px; 
}


#content-c .cb_top img{
top: -1px; 
}

#content-c{
background-color: #FFC841;     
}

#content-c .container{
	max-width: 86%;
width: 800px;
	font-size: 0;
	line-height: 0;
}

#content-c .container ul{
text-align: center;
margin: 0 auto 100px;    
}


@media screen and (max-width: 750px) {
#content-c .container ul{
text-align: center;
margin: 0 auto 50px;    
}
	
}



@media screen and (max-width: 500px) {
#content-c .container ul{
text-align: center;
margin: 0 auto 20px;    
}
	
}
	


@media screen and (min-width: 1000px) {
#content-c .container ul{
text-align: center;
margin: 0 auto 110px;    
}
	
}

@media screen and (min-width: 1200px) {
#content-c .container ul{
text-align: center;
margin: 0 auto 100px;    
}
	
}

@media screen and (min-width: 1400px) {
#content-c .container ul{
text-align: center;
margin: 0 auto 130px;    
}
	
}

@media screen and (min-width: 1800px) {
#content-c .container ul{
text-align: center;
margin: 0 auto 100px;    
}
	
}



#content-c .container img{
width: 100%;
height: auto;
}

#content-c .container ul li:first-child img{
text-align: center;
margin: 20px auto 0px;   
width: 100%;
}

.ganplan{
background-color: #F74E77;
border-radius: 20px; 
padding: 40px 30px 0px;    
margin-top: 30px;
}

.ganplan img.gp-a{
 width: 100%;
object-fit: contain;    
}

ul.ganplan_list{
display: flex;
flex-wrap: wrap;
margin: 25px 0 18px;
justify-content: space-between;       
}

ul.ganplan_list li{
width: 32%;  
margin-bottom: 2%;
}

ul.ganplan_list li img{
width: 100%;   
object-fit: contain;}

img.ganprice{
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;    
object-fit: contain;    
}



#content-d .container{
	max-width: 86%;
width: 830px;
margin-top: -300px;  
}



@media screen and (max-width: 1400px) {
#content-d .container{
width: 830px;
margin-top: -190px;  
}

}


@media screen and (max-width: 1000px) {
#content-d .container{
width: 830px;
margin-top: -140px;  
}

}


@media screen and (max-width: 750px) {
#content-d .container{
margin-top: -100px;  
}

}


@media screen and (max-width: 500px) {
#content-d .container{
margin-top: -95px;  
}

}


#content-d .container img{
width: 100%;
height: auto;
}



#content-d .container ul{
text-align: center;
margin: 40px auto 0;    
}



#content-d .container li div.pc {
	position: relative;
	width: 100%;
}


.cd_sec_a {
	position: absolute;
	top: 115px;
	left: 340px;
}

.cd_sec_b {
	position: absolute;
	top: 117px;
	left: 78px;
}

.cd_sec_c {
	position: absolute;
	top: 129px;
	left: 340px;
}

.cd_sec_d {
	position: absolute;
	top: 133px;
	left: 78px;
}

.cd_title {
	text-align: left;
	font-size: 36px;
	font-weight: 700;
	line-height: 47px;
	letter-spacing: 0px;
	padding-bottom: 12px;
	color: #EF5A24;
}
.cd_text {
	text-align: left;
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
	letter-spacing: 0px;
}

.cd_text span {
	display: block;
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0px;
	text-indent: -1em;
	padding-top: 3px;
	padding-left: 1em;
}


@media screen and (max-width: 960px) {
.cd_sec_a {
	position: absolute;
	top: 95px;
	left: 290px;
}

.cd_sec_b {
	position: absolute;
	top: 97px;
	left: 28px;
}

.cd_sec_c {
	position: absolute;
	top: 109px;
	left: 290px;
}

.cd_sec_d {
	position: absolute;
	top: 113px;
	left: 28px;
}

}



@media screen and (max-width: 910px) {
	
	
.cd_sec_a {
	position: absolute;
	top: 73px;
	left: 260px;
}

.cd_sec_b {
	position: absolute;
	top: 73px;
	left: 28px;
}

.cd_sec_c {
	position: absolute;
	top: 73px;
	left: 260px;
}

.cd_sec_d {
	position: absolute;
	top: 73px;
	left: 28px;
}
	
.cd_title {
	text-align: left;
	font-size: 29px;
	font-weight: 700;
	line-height: 42px;
	letter-spacing: 0px;
	padding-bottom: 12px;
	color: #EF5A24;
}
.cd_text {
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0px;
}

.cd_text span {
	display: block;
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0px;
	text-indent: -1em;
	padding-top: 3px;
	padding-left: 1em;
}

}



@media screen and (max-width: 830px) {
	
	
.cd_sec_a {
	position: absolute;
	top: 73px;
	left: 240px;
}

.cd_sec_b {
	position: absolute;
	top: 73px;
	left: 28px;
}

.cd_sec_c {
	position: absolute;
	top: 73px;
	left: 240px;
}

.cd_sec_d {
	position: absolute;
	top: 73px;
	left: 28px;
}
	
.cd_title {
	text-align: left;
	font-size: 29px;
	font-weight: 700;
	line-height: 42px;
	letter-spacing: 0px;
	padding-bottom: 12px;
	color: #EF5A24;
}
.cd_text {
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0px;
}

.cd_text span {
	display: block;
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0px;
	text-indent: -1em;
	padding-top: 3px;
	padding-left: 1em;
}

}







.cd_plan{
display: flex;
align-items: center;
width: 90%;
margin: 20px auto 0;    
justify-content: space-between;    
}

img.cd_a{
width: 43%;
object-fit: contain;    
}

img.cd_b{
width: 10%;
object-fit: contain;    
}

.orange .cd_plan{
display: flex;
align-items: center;
width: 98%;
margin: 20px auto 0;    
justify-content: space-between;    
}


img.cd_c{
width: 43%;
object-fit: contain;    
}


img.cd_d{
width: 28%;
object-fit: contain;    
}

img.cd_e{
width: 8%;
object-fit: contain;    
}



img.cd_f{
width: 28%;
object-fit: contain;    
}

img.cd_g{
width: 28%;
object-fit: contain;    
}

.cd_h{
display: flex;
justify-content:flex-end;
margin: 20px 0 0;  
}

.cd_h img{
width: 47%; 
}



#content-e {
 background-color: #FFC841;
}




#content-e .cb_top img {
    width: 100% !important;
    object-fit: contain;
    position: relative;
    z-index: 1;
    bottom: -1px;
    top: -1px;
}

#content-e .imgWrpper{
padding: 18px 0 20px;   
}

#content-e .imgWrpper img {
    width: 100%;
	height: auto;
}

.tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 80px;
}


.tablink.active {
background-color: #108761;
 box-shadow: 0 0 0 6px white;
    color: white;
}

.tablink:hover{
transition: 0.3s ease;
background-color: #108761;
 box-shadow: 0 0 0 6px white;
    color: white;
     border-radius: 15px;   
}
#content-e .fig-content {
	font-size: 0;
	line-height: 0;
}

#content-e .fig-content img {
    width: 100%;
	height: auto;
margin-bottom: 48px; }


.tablink {
    transition: 0.3s ease;
    width: 47%;
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border: none;
    border-radius: 15px;
    font-weight: 700;
    font-size: 38px;
    padding: 35px 20px;
     box-shadow:2px 6px 18px hsl(0deg 0% 0% / 0.3);
}



.tablink img{    height: 280px;
    margin-top: 10px;}




.cf_column{
display: flex;
align-items: flex-start;
justify-content: space-between;    
}

.pamphlet{
width: 35%;    
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;    
}

.pamphlet span{
background-color: #F74E77;
color: white;
width: 100%;
font-size: 25px;
font-weight: 500;    
border-radius: 50px;
text-align: center;   
padding: 4px 3px;
margin-bottom: 30px;
}

img.pamphletimg{
object-fit: contain;
height: 300px;
display: block;
margin: 0 auto;    
}

.cf_btn{
width: 230px;
margin-top: 30px;    
}

.cf_btn img{
height: 22px;
object-fit: contain;    
}

.cf_btn a.browser{
display: flex;
align-items: center;
height: 50px;
border-radius: 50px;
border: 2px solid black;    
justify-content: center;   
background-color: #D0EB00;
margin-bottom: 10px;
}

.cf_btn a.browser:hover{ 
background-color: #E8F721;
transition: 0.3s ease;
}

.cf_btn a.download{
display: flex;
align-items: center;
height: 50px;
border-radius: 50px;
border: 2px solid black;    
justify-content: center;   
background-color: white;
}

.cf_btn a.download:hover{
background-color: #efefefef;
transition: 0.3s ease;   }

.flier{
width: 61%;    
}

    
#content-e .container {
	max-width: 86%;
    margin: 0 auto 100px;
	max-width:760px; 
}    
 

.topvi_a{
    width: 100%;
    position: relative;
    margin: 0 auto;
    bottom: 0px;
    top: -1px;

}

.topvi_b img{
width: 100%;
object-fit: contain;    
}


img.topvi_b-bg{
position: absolute;
    z-index: -1;
width: 990px;
}

.topvi_b-column{
display: flex;
width: 990px;
margin: 0 auto;    
position: relative;

}

.topvi_b-column img{
object-fit: contain;
height: 600px;
width: auto;    
}

.topvi_b{
    width: 100%;
    padding-top: 360px;
    padding-bottom: 80px;
    background-color: #D0EB00; 
}

.topvi_a img{
width: 100%;
object-fit:   contain;     
}

.flier span{
display: block;
background-color:#9EDB0B;
color: white;
width: 100%;
font-size: 25px;
font-weight: 500;    
border-radius: 50px;
text-align: center;   
padding: 4px 3px;
margin-bottom: 30px;
}

.fliercolumn{
display: flex;
justify-content: space-between;
align-items: flex-start;    
padding: 0 15px;
}

.flier-a{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;    
}

.flier-b{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;    
}


.videowrap{
margin-top: 20px;    
display: flex;
justify-content: space-between;
    
}

.videowrap video{
width: 100%;
object-fit: contain;    
    
}


#footer_button {
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    z-index: 100;
}


.space{
width: 48%; 
}

.footer_buttonInner .btnwrap{
width: 50%;
 margin-right: 15%;
}


.footer_buttonInner a.applicationbutton {
    border-radius: 50px;
    display: flex;
    height: 90px;
    justify-content: center;
    align-items: center;
    padding: 5px 20px;
border:5px solid white;

}

.footer_buttonInner{
display: flex;  
width: 100%;    
margin: 0 auto;
height: 180px;    
position: relative;      
align-items: center;
justify-content: center;
}

.number {
    margin-top: 130px;
    margin-bottom: 140px;}


img.illust {  
width: 300px;
    right: 20px;
    position: absolute;
    bottom: 20px;  
}



.cg-a{
display: flex;
width: 48%;
flex-direction: column;   
}

.cg-a span{
width: 85%;
margin: 0 auto;    
background-color: black;
color: white;
font-size: 20px;
font-weight: 500;
text-align: center;
border-radius: 50px;
padding: 5px 5px;    
}

.cg-b span{
width: 85%;
margin: 0 auto 22px;    
background-color: black;
color: white;
font-size: 20px;
font-weight: 500;
text-align: center;
border-radius: 50px;
padding: 5px 5px;    
}


.cg-b{
display: flex;
width: 48%;
flex-direction: column;
    
}


img.chimg{
position: absolute;
width: 15%;
right: 0;
bottom:10%;    
}

footer{
 margin-top:0px;  
margin-bottom: 80px;
}

footer p.ex{
font-size: 16px;
    color: #231815;
}


footer .fWrap{
margin-top: 0px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    justify-content: space-between; 
}

.fInner{
width: 47%;   
margin-bottom: 30px;    
}


.fInner span{
    width: 100%;
	background-color: #EF5A24;
    font-size: 18px;
    color: #ffffff;
    font-weight: 500;
    display: block;
    text-align: center;
    padding: 2px 0 2px 0;
    border-radius: 8px;
}

p.company {
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    margin: 10px 0 8px;
    letter-spacing: 0.01em;
}

p.mark{
display: flex;
margin-top: 50px;
justify-content: flex-end;    
margin-bottom: 50px;
}


    
#site .container{
margin: 60px auto 30px;
padding: 30px;
}

#site .container img.title{
width: 90%;
display: block;
margin: 25px auto 20px;    
}

 #site ul{
    display:flex;
    justify-content: space-between;   margin-top: 50px; 
    }   


 #site ul li:nth-child(1){
width: 34%;
    }


 #site ul li:nth-child(2){
width: 62%;
    }

 #site ul li:nth-child(2):hover{
opacity: 0.8;
     transition: 0.3s ease;
    }
    
     #site ul img{
object-fit: contain;
        width: 100%; 
    }


.btnarrow {
height: 40px;    
    position: relative;
}
.btnarrow::before {
  content: "";
  display: block;
  position: absolute;
   top: 10px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 30px;
  height: 30px;
  border-top: 5px solid #108761;
  border-right: 5px solid #108761;
  transform: translateX(-50%) rotate(135deg);
}


.tablink:hover .btnarrow:before {
  border-top: 5px solid white;
  border-right: 5px solid white;
}



.tablink.active .btnarrow::before {
  border-top: 5px solid white;
  border-right: 5px solid white;
}


/*--------------------------------------------------------------
|
| 1200PX
|
--------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
    
footer {
    margin-top: 100px;
    margin-bottom: 80px;
}    
   
    
.number {
    margin-top: 130px;
    margin-bottom: 100px;
}    
    
    
#content-b .container ul {
    width: 90%;
    margin: 0 auto 0;
    text-align: center;
}    
    

.contentcolumn li:nth-child(4) div img.cb_number {
    position: absolute;
    width: 70%;
    top: -35%;
    left: -8%;
    z-index: -1;
}

    
    .contentcolumn li:nth-child(4) div {
    width: 45%;
}
    
    
.contentcolumn li:nth-child(6) div {
    width: 70%;
    padding-right: 0%;
}  
    
    
.contentcolumn li:nth-child(7) div {
    width: 53%;
    padding-left: 0%;
}   
    
.contentcolumn li:nth-child(7) div img.cb_number {
    position: absolute;
    width: 68%;
    top: -22%;
    left: -2%;
    z-index: -1;
} 
    
#content-b .container ul li:nth-child(7) {
    margin-top: 100px!important;
}    
        
    
    
}


/*--------------------------------------------------------------
|
| 1000PX
|
--------------------------------------------------------------*/

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



.pagetitle {
    max-width: 100%;
    width: 95%;
    margin: 15px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    color: black;
    letter-spacing: 0.015em;
}
    
    .container {
    max-width: 100%;
   width: 95%;
    position: relative;
    margin: 0 auto;
}
    
    
#topmv img.topmv_a {
    position: absolute;
    width: 42%;
    right: 0%;
    bottom: -12%;
}
    
    #topmv img.topmv_c {
    position: absolute;
    width: 35px;
    right: 5%;
    top: 10%;
}
    
   
    
footer {
    margin-top: 50px;
    margin-bottom: 80px;
}    

#topmv img.topmv_b {
    position: absolute;
    width: 35px;
    left: auto;
    right: 25%;
    bottom: auto;
    top: 15%;
}    


    
img.pamphletimg {
    object-fit: contain;
    height: 33vw;
    display: block;
    margin: 0 auto;
}  
    
.pamphlet span {
    background-color: #F74E77;
    color: white;
    width: 100%;
    font-size: 22px;
    font-weight: 500;
    border-radius: 50px;
    text-align: center;
    padding: 4px 3px;
    margin-bottom: 30px;
}    

.flier span {
    display: block;
    background-color: #9EDB0B;
    color: white;
    width: 100%;
    font-size: 22px;
    font-weight: 500;
    border-radius: 50px;
    text-align: center;
    padding: 4px 3px;
    margin-bottom: 30px;
}    
    
    
.cf_btn img {
    height: 15px;
    object-fit: contain;
}    

    
.cf_btn {
width: 100%;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    
    .cg-a span {
    width: 100%;
    margin: 0 auto 0px;
    background-color: black;
    color: white;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    border-radius: 50px;
    padding: 5px 5px;
}
    
    
    .cg-b span {
    width: 100%;
    margin: 0 auto 22px;
    background-color: black;
    color: white;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    border-radius: 50px;
    padding: 5px 5px;
}
    
    .cf_btn a.browser {
    display: flex;
    align-items: center;
    height: 50px;
    border-radius: 50px;
    border: 2px solid black;
    justify-content: center;
    background-color: #D0EB00;
    margin-bottom: 10px;
    width: 24vw;
}
    
    .cf_btn a.download {
    display: flex;
    align-items: center;
    height: 50px;
            width: 24vw;
    border-radius: 50px;
    border: 2px solid black;
    justify-content: center;
    background-color: white;
}
    
    
.fInner {
    width: 48%;
}    
   
    


.space{
width: 48%; 
}

.footer_buttonInner .btnwrap{
width: 50%;
 margin-right: 10%;
}


.footer_buttonInner a.applicationbutton {
    border-radius: 50px;
    display: flex;
    height: 90px;
    justify-content: center;
    align-items: center;
    padding: 5px 20px;
border:5px solid white;
    background-color: #F74E77;

}

.footer_buttonInner{
background-color:  #F9F8F2;  
display: flex;  
width: 100%;    
margin: 0 auto;
height: 180px;    
position: relative;      
align-items: center;
justify-content: center;
}
    
.cb_subpoint {
    color: #108761;
    padding: 0px 7px;
    font-size: 3vw;
    font-weight: 500;
    border-radius: 10px;
    border: 4px solid #108761;
}    
    
    
.cb_maintitle {
    font-size: 40px;
    color: #108761;
    line-height: 1.3;
    display: block;
    font-weight: 600;
}    
    
.contentcolumn li:nth-child(5) img {
    width: 48%;
}    
    
    
    .contentcolumn li:nth-child(4) div img.cb_number {
        position: absolute;
        width: 65%;
        top: -10%;
        left: -8%;
        z-index: -1;
    }    
    
.contentcolumn li:nth-child(4) img {
    width: 45%;
    object-fit: contain;
}   
    
    .contentcolumn li:nth-child(4) div {
        width: 50%;
    }   
    
#content-b .container ul li:nth-child(2) img{
    width: 100%;
object-fit: contain    

}   
    
#content-b .container ul li:nth-child(3) img{
    width: 100%;
object-fit: contain    

}        


}

/*--------------------------------------------------------------
|
| 750PX
|
--------------------------------------------------------------*/

@media screen and (max-width: 750px) {
    
    .sp{display: block!important;}  
        .pc{display:none!important;}   
	
.ch__a{ display:none!important; }  
.ch__b{ display:none!important; }    
	

    
    .number {
    margin-top: 50px;
    margin-bottom: 220px;
}

    
 #footer_button.show {
        display: block; 
           opacity: 1; 
        transform: translateY(0px);
    }    
    
    

#footer_button{
z-index: 100;
 position: fixed;
box-sizing: border-box;
  transition: .5s; 
  bottom: -200px;
    right: 5px;   
}

#footer_button.is-show {
  bottom: 10px;
}
    


    
#content-e .imgWrpper {
    margin: 0px 0 ;
}    

#content-e .fig-content img {
margin-bottom: 20px; }

    
  .cb_title img {
    width: 95%;
    text-align: center;
    margin: -80px auto 0;
}  
    
a.checkbutton img {
    object-fit: contain;
    width: 90%;
}   
    
    
img.plus {
    left: 50%;
    width: 20%;
    transform: translate(-50%, 0%);
    position: absolute;
    bottom: -70px;
}    
    
.cbInnner {
    background-color: #D0EB00;
    position: relative;
    padding-bottom: 100px;
}    
    

    
.cb_title-b {
    margin: 0 auto;
    position: relative;
    width: 95%;
}    
    
    
.cb_title-b img.cb_c-icon {
    position: absolute;
    width: 32%;
    bottom: 0;
    right: 2%;
}    
    
   #content-a .btnwrap {
    display: flex;
    max-width: 100%;
    width: 100%;
       height: auto;
    flex-direction: column;
    align-items: center;
    margin: 50px auto 60px;
    justify-content: center;
}     
    
#content-a .btnwrap a.checkbutton {
    margin-top: 30px;
    width: 80%!important;
    height: 60px!important;
}    

    #content-a .btnwrap a.applicationbutton {
    width: 80%!important;
    height: 60px!important;
}
    
   
.container {
    max-width: 100%;
    width: 86%;
    position: relative;
    margin: 0 auto;
}    
	
#content-c .container {
    max-width: 100%;
    width: 86%;
}
    

.pagetitle {
    max-width: 100%;
    width: 95%;
    margin: 20px auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    font-size: 3.5vw;
    color: black;
    letter-spacing: 0.015em;
}
    
 .pagetitle a.applicationbutton {
    width: 80%;
    margin-top: 15px;
}   
    
.pagetitle a.applicationbutton img {
    width: 50%;
    padding: 8px;
    object-fit: contain;
}    
    
.topmvcontent {
    width: 95%;
    margin: 0 auto;
}
    
#topmv img.topmv_a {
    position: relative;
    width: 80%;
    margin: 0 auto;
    bottom: -6.5vw;
}
    
    #topmv img.topmv_b {
display: none;
}
        
    
    
    #topmv img.topmv_c {
display: none;
}
    
    
    #topmv a.checkbutton {
    width: 100%;
    display: flex;
    border-radius: 50px;
    padding: 15px 10px;
    justify-content: center;
    background-color: #9EDB0B;
    border: 2px solid white;
}
    
    .topmvcontent {
    padding: 40px 0 0px;
}
    
    
p.mark {
    display: flex;
    margin-top: 50px;
    justify-content: flex-end;
    margin-bottom: 50px;
}    
    
#content-a {
    padding: 40px 0 0px;
    margin: 0 auto;
    text-align: center;
}   
    
#content-a img {
    width: 100%;
    object-fit: contain;
}   
    
#content-a .container {
    max-width: 100%;
    width: 100%;
    position: relative;
    margin: -30px auto 0;
}    
    
#content-b .container {
    margin-top: 0px;
    margin-bottom: 10px;
}    
    
   
 .ganplan {
    background-color: #F74E77;
    border-radius: 20px;
    padding: 30px 30px 0px;
    margin-top: 30px;
}   

 ul.ganplan_list li {
    width: 48%;
    margin-bottom: 5%;
}   
    
ul.ganplan_list {
    display: flex;
    flex-wrap: wrap;
    margin: 25px 0 0px;
    justify-content: space-between;
}    
    
    
#content-c .btnwrap {
    display: flex;
    max-width: 100%;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
    margin: 60px auto 0;
    justify-content: center;
}    
    
    
#content-c .btnwrap a.checkbutton {
    margin-top: 20px;
    width: 80%!important;
    height: 60px!important;
}    
    
    
a.checkbutton img {
    object-fit: contain;
    width: 90%;
}    
    
#content-c .btnwrap a.applicationbutton img {
    width: 50%;
}  



    
.pamphlet {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}    
    
img.pamphletimg {
 object-fit: contain;
    height: auto;
    width: 80%;
    display: block;
    margin: 0 auto;
}    
    
.cf_btn a.browser {
    display: flex;
    align-items: center;
    height: 50px;
    border-radius: 50px;
    border: 2px solid black;
    justify-content: center;
    background-color: #D0EB00;
    margin-bottom: 10px;
    width: 90%;
}    
    
 .cf_btn a.download {
    display: flex;
    align-items: center;
    height: 50px;
    width: 90%;
    border-radius: 50px;
    border: 2px solid black;
    justify-content: center;
    background-color: white;
}   
    
.flier {
    width: 100%;
    margin-top: 50px;
}   
    
   
    
    
  .fliercolumn {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    padding: 0 15px;
}  
    
    
.cf_column {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
}    
    
.flier-a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}    
    
.flier-b {
margin-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}  
    
#content-c .container {
    text-align: center;
    padding: 0px 0px;
}   
    

    
#content-c ul li img{
object-fit: contain;
width: 100%;    
}  
    
#content-c .container ul li:first-child img {
    text-align: center;
    margin: 30px auto 0px;
    width: 100%;
}    
    
.cd_plan {
    display: flex;
    align-items: center;
    width: 90%;
    flex-direction: column;
    margin: 20px auto 0;
    justify-content: space-between;
}    
    
 img.cd_a {
    width: 80%;
    object-fit: contain;
}
    
img.cd_b {
    width: 15%;
        margin: 30px 0;
    object-fit: contain;
}    
    
 img.cd_c {
    width: 80%;
    object-fit: contain;
}    
    
.orange .cd_plan {
    display: flex;
    align-items: center;
    width: 90%;
    flex-direction: column;
    margin: 20px auto 0;
    justify-content: space-between;
}  
    
    
img.cd_d {
    width: 80%;
    object-fit: contain;
}    
    
img.cd_e {
    width: 15%;
    margin: 30px 0;
    object-fit: contain;
}    
    
img.cd_f {
    width: 80%;
    object-fit: contain;
}    
    
    
img.cd_g {
    width: 80%;
    object-fit: contain;
}        
    
    
.cd_h img {
    width: 90%;
}    
    
.cd_h {
    display: flex;
    justify-content: center;
    margin: 50px 0 40px;
}    


#content-c .cc_column ul li span {
    background-color: white;
    border-radius: 50px;
    padding: 5px 2px;
    font-weight: 500;
    font-size: 16px;
}    
       

    
.videowrap {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}    
    
 .cg-a {
    display: flex;
    width: 100%;
    flex-direction: column;
}   
    
.cg-a span {
    width: 100%;
    margin: 0 auto 0px;
    background-color: black;
    color: white;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    border-radius: 50px;
    padding: 5px 5px;
    /* margin-bottom: 50px; */
}    
    
 .cg-b {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin-top: 50px;
}   
    
    
.cb_c-top-a {
    border: 4px solid #F74E77;
    border-radius: 7px;
    display: block;
    color: #F74E77;
    font-size: 5vw;
    text-align: center;
    font-weight: 500;
    padding: 6px;
    margin: 35px 0 10px;
}    
    
.cb_c-top-b {
    background-color: #F2F1EB;
    font-size: 3vw;
    padding: 5px;
    text-align: center;
    display: block;
    border-radius: 7px;
    margin-bottom: 25px;
}    
    
    
    
img.chimg {
    position: static;
    width: 30%;
    right: 0;
    bottom: 0%;
        margin-left: 10px;
    object-fit: contain;
}  
    
.fInner {
    width: 100%;
    margin-bottom: 20px;
}    
    
#content-c .btnwrap a.applicationbutton {
    width: 80%!important;
    height: 60px!important;
}    
    
    
#content-c a.applicationbutton {
    width: 80%!important;
    height: 60px!important;
    margin: 65px auto 0;
}   

#content-a a.applicationbutton img {
    width: 50%;
    margin: 7px 0;
}    
    
footer .container {
    width: 75%;
    position: relative;
    margin: 0 auto 0;
}    
   
    
footer .fWrap {
    margin-top: 0px;
	padding-top: 60px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
}    
	

    

#content-e .imgWrpper img {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}  
    
.tablink img {
    height: 25vw;
    width: auto;
    margin-top: 5px;
}


.space{
width: 48%; 
}

.footer_buttonInner .btnwrap{
width: 66%;
 margin-right: 6%;
}


.footer_buttonInner a.applicationbutton {
    border-radius: 50px;
    display: flex;
    height: 60px;
width:100%;
    justify-content: center;
    align-items: center;
    padding: 5px 20px;
border:2px solid white;
    background-color: #F74E77;
}
    
    

    .footer_buttonInner a.applicationbutton img{
width: 85%;
    }

    

.footer_buttonInner{
background-color:  #F9F8F2;  
display: flex;  
width: 100%;    
margin: 0 auto;
height: 100px;    
position: relative;      
align-items: center;
justify-content: center;
}

    
    #content-e .container {
    margin: 0 auto 25px;
}


  footer{
 margin-top:10px;  
margin-bottom: 80px;
}  
    
    


 
    
    
        #content-b .container ul {
        text-align: center;
    }
 
    
.btnarrow {
height: 5.5vw;    
    position: relative;
}
.btnarrow::before {
  content: "";
  display: block;
  position: absolute;
   top: 0vw;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 3.3vw;
  height: 3.3vw;
  border-top: 5px solid #108761;
  border-right: 5px solid #108761;
  transform: translateX(-50%) rotate(135deg);
}
    
    


}



/*--------------------------------------------------------------
|
| 500PX
|
--------------------------------------------------------------*/

@media screen and (max-width: 500px) {
    
    .btnarrow {
height: 5.5vw; 
    margin-bottom: 3px;    
    position: relative;
}
.btnarrow::before {
  content: "";
  display: block;
  position: absolute;
   top: 3vw;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 3.3vw;
  height: 3.3vw;
  border-top: 3px solid #108761;
  border-right: 3px solid #108761;
  transform: translateX(-50%) rotate(135deg);
}
    
    
    
    
.tablink:hover .btnarrow:before {
  border-top: 3px solid white;
  border-right: 3px solid white;
}



.tablink.active .btnarrow::before {
  border-top: 3px solid white;
  border-right: 3px solid white;
}

    

.cb_maintitle {
    font-size: 7vw;
    color: #108761;
    line-height: 1.3;
    display: block;
    font-weight: 600;
}    
    
    
.cb_subpoint {
    color: #108761;
    padding: 0px 7px;
    font-size: 5.2vw;
    font-weight: 500;
    border-radius: 10px;
    border: 4px solid #108761;
}    
        
        
    


.space{
display: none;
}

.footer_buttonInner .btnwrap{
width: 70%;
 margin-right: 0%;
   
}


.footer_buttonInner a.applicationbutton {
    border-radius: 50px;
    display: flex;
    height: 60px;
width:100%;
    justify-content: center;
    align-items: center;
    padding: 5px 20px;
border:2px solid white;
    background-color: #F74E77;
}
    


    .footer_buttonInner a.applicationbutton img{
width: 80%;
    }

	.fInner span{
    width: 100%;
	background-color: #EF5A24;
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    display: block;
    text-align: center;
    padding: 2px 0 2px 0;
    border-radius: 8px;
}
	
  p.company {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin: 10px 0 8px;
    letter-spacing: 0.01em;
}  
    

.footer_buttonInner{
background-color:  #F9F8F2;  
display: flex;  
width: 100%;    
margin: 0 auto;
height: 100px;    
position: relative;      
align-items: center;
justify-content: center;
}
    
    
img.illust {
    width: 50vw;
    right: 5px;
    position: absolute;
    bottom: 5px;
}    
  
        


}

    



@media screen and (min-width: 1400px) {
    
	
	
#content-c , #content-e {
margin-top: -30px;
}
	
	#content-e .imgWrpper{
padding: 48px 0 20px;   
}
    
    #content-d .container ul {
    text-align: center;
    margin: -60px auto 30px;
    position: relative;
    z-index: 2;
}    
    
    
.topvi_b{   
    width: 100%;
    padding-top: 18.5vw;
    padding-bottom: 0px;
height: 880px;    
    background-color: #D0EB00; 
}    
    
    
    img.topvi_b-bottom{
    width: 100%;
    margin-top: -0.28%;
    }    
    
 
#content-b .container{
margin-top: -15%;  
}   
   
  
.topvi_a{
    width: 100%;
    position: relative;
    margin: 0 auto;
    bottom: -5px;

}
    
.ch__a{
    display:none!important; }  
    
 .ch__b{
display:block!important; }    
    
    
    
    
}