@charset "utf-8";


/* ここからモバイル */

body{
  font-family: sans-serif;
  text-align: left;
  background-color: #f5f5f5;
  margin: 0px;
}

main{
  text-align: center;
}

@media screen and (max-width: 968px){
header{
  background-color: white;
  padding: 6%;
  margin: 0px;
  box-shadow: -12px -11px 12px 16px rgba(0,0,0,0.3);
}

.logo{
  position: fixed;
  width: 14%;

  left: 2%;top: 0%;
  margin-top: 3%;
}

.header-container{
  background-color: white;

}

.navsize{
  /* width: 10%; */
}

}

footer{
background-color: #ebebeb;
text-align: center;
font-size: 0.6em;
}

nav{
  background-color: white;
}


li :hover{
opacity: 0.5;
}

ul{
  padding: 32px 15px 0 15px;
  margin: 0;
  list-style: none;
}

section{
  margin: 0;
}

article{
 margin: -60px 0;
}

footer article{
 margin: 0;
}

article .scroll{
  margin-top: -142px;
  padding: 0px 0 61px 0;
}

.section-background01{
  background: url(../images/images_sp/sp_bg01.png)center top no-repeat;
  background-size: cover;
  text-align: center;
  padding: 152px 0 145px 0 ;
}

.section-background02{
  background: url(../images/images_sp/sp_bg02.png)center top no-repeat;
  background-size: cover;
  text-align: center;
  padding: 144px 0 100px 0 ;

}

.section-background03{
  background: url(../images/images_sp/sp_bg03.png)center top no-repeat;
  background-size: cover;
  text-align: center;
  padding: 120px 0 120px 0 ;

}

.section-background04{
  background: url(../images/images_sp/sp_bg04.png)center top no-repeat;
  background-size: cover;
  text-align: center;
  padding: 120px 0 70px 0 ;

}

.section-background05{
  text-align: center;
  padding: 74px 0 74px 0;

}

.section-background06{
  background: url(../images/images_sp/sp_bg06.png)center top no-repeat;
  background-size: cover;
  text-align: center;
  padding: 90px 0 130px 0 ;
}

.section-background08{
  background: url(../images/images_sp/sp_bg07.png)center top no-repeat;
  background-size: cover;
  text-align: center;
  padding: 83px 0 100px 0 ;
}

.section-background07{
  background: url(../images/images_sp/sp_bg08.png)center top no-repeat;
  background-size: cover;
  text-align: center;
  padding: 90px 0 90px 0 ;
}

.section-background09{
  background: url(../images/images_sp/sp_bg09.png)center top no-repeat;
  background-size: cover;
  text-align: center;
  padding: 84px 0 84px 0;
}



h1{
  font-size: 1.28em;
  color: #F9BD2D;
}

h2{
  font-size: 0.8em;
}

p{
  font-size: 0.6em;
}

a{
  font-size: 0.8em;
  text-decoration: none;
  color: black;
}


a :hover{
  opacity: 0.5 !important;
}

.header-navbtn {
display: block;
position: absolute;
top: 0;
right: 0;
z-index: 30;
width: 42px;
height: 42px;
background-image: url(../images/navbtn.png);
background-size: 42px 42px;
background-color: #C0EAF0;
border-radius: 10px;
margin: 4px;
}


.header-nav-wrapper{
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
}

.main-wrapper {
z-index: 0;
left: 0;
width: 100%;
}


.globalnav {
list-style: none;
margin-left: -50px;
}

.globalnav li {
padding: 15px 0;
}

.globalnav li a {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
font-weight: bold;
color: black;
font-size: 1.2em;
margin: 5px 0 0 5px;
}

.col-01{
  margin: 0 20px 0 20px;
  padding: 30px 0 30px 0;
  text-align: center;
}
.col-02{
  padding: 30px 0 30px 0;
}

.col-02 img{
  width: 100%;
}

.flex-box{
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.flex-box li{
  flex: 0 0 50%;
  margin-bottom: 10px;
}

.images-flex{
  width: 100%;
  margin: 0 0;
  padding: 0 0px;
}

.images{
  text-align: center;
  width: 100%;
  margin: 30px 0;
}

.click{
  text-decoration: none;
  border: 1px solid #F9BD2D;
  border-radius: 10px;
  background-color: #F9BD2D;
  font-size: 0.8em;
  padding: 15px 40px;
  box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.3);
  font-weight: bold;
}


.mark{
  text-decoration: none;
  border: 1px solid #C0EAF0;
  border-radius: 20px;
  background-color: #C0EAF0;
  font-size: 1em;
  padding: 8px 20px;
}

.bold{
  font-size: 1.3em;
  color: #67C4EC;
}


.space{
  margin-bottom: 60px;
}

.logo-mobile{
  width: 22%;
  margin: 5px;
}

.logo-mobile{
  display: none;
}

.btn_01{
  margin: 11px 0 13px 0;
  width: 100%;
}

.btn_02{
  margin: 11px 0 118px 0;
  width: 100%;
}

.sp_btn_01{
  width: 83% !important;
  margin: 15px;
}

.sp_image_type{
  width: 91% !important;
  margin: 30px 0 51px 0;
}

.sp_step{
  width: 96% !important;
  margin: 45px 0px 45px -18px;
}

.sp_step02{
  width: 96% !important;
  margin: 45px -13px 50px -0px;
}

.image_06{
  width: 32% !important;
  margin: 30px 0 85px 0;
}

.sp_text06_01{
  width: 90% !important;
}

.sp_text06_02{
  width: 82% !important;
  margin: 45px 0 -10px 0;
}


.sp_image_01{
  width: 80% !important;
  margin-bottom: 40px;
}

.sp_image_02{
  width: 80% !important;
  margin: 32px 0 50px 0;
}

.image_05{
  width: 52% !important;
  margin: 50px;
}

.image_08{
  width: 18% !important;
  margin: 50px;
}

.title_08{
  width: 32% !important;
  margin: 17px 0 57px 0;
}

.sp_voice{
  width: 98% !important;
  margin: -3px 0 -2px 0;
}

.text_10{
  width: 63% !important;
  margin: 54px 0 60px 0;
}

.linebtn{
  width: 53% !important;
}

.footerlogo{
  width: 50% !important;
  margin: 30px 0px 6px 0px;
}

.sp_text_footer{
  width: 63% !important;
}

.Copyright{
  width: 35% !important;
  margin: 20px 0px 20px 0px;
}

.menubtn_01{
  position: fixed;
  top: 0%;
  right: 90px;
}

.menubtn_02{
  position: fixed;

  right: 320px;
}

.title_03{
  width: 50%;
  margin: -20px 0 25px 0;
}

.text_03{
  width: 86%;
  margin: 27px 0 -23px 0;
}

.title_04{
  width: 64%;
  margin: -30px 0 42px 0;
}

.btn_04_02{
  margin: 11px -18px 8px -18px;
  width: 53%;
}


#wrapper nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    padding-top: 0px;
    background-image: url(../images/menu_bg.png);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: cover;
    background-color:rgba(255,255,255,0.1);
    font-size: 16px;
    box-sizing: border-box;
    z-index: 2
}

#wrapper nav ul li {
    padding: 3px 0px;
    border-top: 0.5px solid white;
    margin-top: -5px;
}

.border-bottom{
    border-bottom: 0.5px solid white;
}

#wrapper nav ul li a {
    text-decoration: none;
    color: #ddd
}

#wrapper nav ul li img{
    padding: 5px;
margin: 4px 0 4px 22px;
}

#wrapper .btn-gnavi {
  position: fixed;top: 0%;

  right: 13%;
  z-index: 3;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-transition: all 400ms;
  transition: all 400ms;margin-top: 3%;
}

#wrapper .btn-gnavi span {
    position: absolute;
    width: 30px;
    height: 2px;
    background: #666;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms
}

#wrapper .btn-gnavi span:nth-child(1) {
    top: 0
}

#wrapper .btn-gnavi span:nth-child(2) {
    top: 10px;}

#wrapper .btn-gnavi span:nth-child(3) {
    top: 20px
}

#wrapper .btn-gnavi.open {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

#wrapper .btn-gnavi.open span {
    background: #fff
}

#wrapper .btn-gnavi.open span:nth-child(1) {
    width: 35px;
    -webkit-transform: translate(-7px,17px) rotate(45deg);
    transform: translate(-34px,-15px) rotate(45deg)
}

#wrapper .btn-gnavi.open span:nth-child(2) {
   width: 35px;
   -webkit-transform: translate(-7px,-17px) rotate(-45deg);
   transform: translate(-34px,-26px) rotate(-45deg)
}

#wrapper .btn-gnavi.open span:nth-child(3) {
    display: none;
}

.sp_menu_btn01{
  width: 42%;
  margin-top: 18px;
  margin-left: -16px;
  padding: 0px;
}

.sp_menu{
  width: 79%;
}

.sp_text_08{
  width: 76%;
  margin: 0px 0 33px 0;
}

.title_09{
  width: 78%;
  margin: 49px 0 47px 0;
  }

/* 非表示切り替え */

  @media screen and (max-width: 968px){
  .menubtn_01{
    display: none;
  }
  .menubtn_02{
    display: none;
  }

  .menuline{
    display: none;
  }

  .image_01{
    display: none;
  }

  .btn_04{
    display: none;
  }

  .image_02{
    display: none;
  }

  .image_type{
    display: none;
  }

  .image_step{
  display: none;
  }

  .text_06_01{
    display: none;
  }

  .text_06_02{
    display: none;
  }

  .text_08_01{
    display: none;
  }

  .text_08_02{
    display: none;
  }

  .text_07{
    display: none;
  }

  .text_footer{
    display: none;
  }

  }







/* ここからデスクトップ */

@media screen and (min-width: 968px){
body{
  font-family:  "M PLUS Rounded 1c",sans-serif;
  text-align: center;

}

header{
  margin: 0px;
  box-shadow: -12px -11px 12px 16px rgba(0,0,0,0.3);
}

footer{
background-color: #ebebeb;
text-align: center;
margin: 0;
font-size: 0.6em;
}

footer article{
  margin-bottom: 0;
}


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

h1{
  font-size: 2.6em;

}

h2{
  font-size: 2.1em;
}

p{
  font-size: 1.5em;
}

a{
  font-size: 1.5em;
}


section{
  margin:0;
}

article{
 margin: -60px 0;
}

footer article{
 margin: 0;
}

article img{
  /* width: 18%; */
}

article .scroll{

  margin-top: -100px;
  padding-bottom: 60px;
}

.section-background01{
  background: url(../images/img_01.png)center top no-repeat;
  background-size: cover;
  text-align: center;
  padding: 138px 0 149px 0;
}

.section-background02{
  background: url(../images/bg_02.png)center top no-repeat;
  background-size: cover;
  text-align: center;
  padding: 100px 0 100px 0;

}

.section-background03{
  background: url(../images/title_03_bg.png)center top no-repeat;
  background-size: cover;
  text-align: center;
  padding: 120px 0 120px 0 ;

}

.section-background04{
  background: url(../images/bg_04.png)center top no-repeat;
  background-size: cover;
  text-align: center;
  padding: 120px 0 100px 0 ;

}

.section-background05{
  text-align: center;
  padding: 63px 0 124px 0;

}

.section-background06{
  background: url(../images/bg_06.png)center top no-repeat;
  background-size: cover;
  text-align: center;
  padding: 90px 0 85px 0 ;
}

.section-background08{
  background: url(../images/bg_08.png)center top no-repeat;
  background-size: cover;
  text-align: center;
  padding: 100px 0 100px 0 ;
}

.section-background07{
  background: url(../images/bg_07.png)center top no-repeat;
  background-size: cover;
  text-align: center;
  padding: 72px 0 155px 0;
}

.section-background09{
  background: url(../images/bg_09.png)center top no-repeat;
  background-size: cover;
  text-align: center;
  padding: 90px 0 19px 0;
}


.header-navbtn {
  display: none;
}


.header-nav-wrapper{
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
}

.main-wrapper {
position: absolute;
left: 0;
z-index: 0;
width: 100%;
}

.globalnav{
  list-style: none;
  display: flex;
  flex-flow: row;
  margin: 0;
}

.menu{
  list-style: none;
  flex-flow: row;
  margin: 38px 10px 0 10px;
  text-align: left;
}

nav li a{
  display: block;
  padding: 5px 25px 0px 25px;
  text-decoration: none;
}

.globalnav {
list-style: none;
margin-left: -28px;
}

.globalnav li {
padding: 0px 0;
}

.globalnav li a {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
font-weight: bold;
color: black;
font-size: 1.2em;
margin: 5px 0 0 5px;
}

.globalnav-mobile{
  display: none;
}

.li-logo{
  margin-right: 19%;
}

.col-01{
  flex:0 0 50%;
}

.col-02{
  flex: 0 0 50%;
}

.container{
  display: flex;
  padding: 0 80px;
}

.flex-box{
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.flex-box li{
  flex: 1 0 30%;
  margin-bottom: 10px;
}

.images-flex{
  width: 380px;
  margin: 30px 0;
  padding: 0 0px;
}

.images{
  width: 37%;
}

.click{
  text-decoration: none;
  border: 1px solid #F9BD2D;
  border-radius: 10px;
  background-color: #F9BD2D;
  font-size: 0.8em;
  padding: 20px 45px;
  box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.3);
}

.mark{
  text-decoration: none;
  border: 1px solid #C0EAF0;
  border-radius: 30px;
  background-color: #C0EAF0;
  font-size: 1em;
  padding: 8px 20px;
}

.bold{
  font-size: 1.8em;
  color: #67C4EC;
}

.space{
  margin-bottom: 60px;
}

.header-logo{
  display: none;
}

.header-container{
  background-color: white;
  padding: 3%;
}

.logo {
  position: fixed;
  width: 8%;
  top: 0%;
  left: 1%;
  margin-top: 0.8%;
}

.logo-mobile{
  display: none;
}

.btn_01{
  margin: 15px;
  width: 33%;
}

.btn_02{
  margin: 11px 0 0px 0;
  width: 33%;
}

.btn_04{
  margin: 0 0 16px 0;
  width: 27%;
}

.btn_04_02{
  margin: 0px -18px 4px -18px;
  width: 18%;
}

.image_type{
  width: 57% !important;
  margin: 40px;
}

.image_step{
  width: 67% !important;
  margin: 45px;
}

.image_06{
  width: 12% !important;
  margin: 50px 0 85px 0;
}

.text_06_01{
  width: 28% !important;
  margin: 20px;
  padding-top: -20px;
}

.text_06_02{
  width: 28% !important;
  margin: 45px;
}


.image_01{
  width: 40% !important;
margin: 50px 0 5px 0;
}

.image_02{
  width: 40% !important;
  margin: 50px;
}

.image_05{
  width: 21% !important;
  margin: 50px;
}

.image_08{
  width: 18% !important;
  margin: 50px;
}

.text_08_01{
  width: 38% !important;
  margin: 5px;
}

.text_08_02{
  width: 38% !important;
  margin: 5px;
}

.text_10{
  width: 23% !important;
  margin: 116px 0 0 0;
}

.linebtn{
  width: 13% !important;
  margin: 68px 0px 66px 0px;
}

.footerlogo{
  width: 13% !important;
  margin: 20px 0px 10px 0px;
}

.text_footer{
  width: 20% !important;
  margin: 0px 0px 4px 0px;
}

.Copyright{
  width: 13% !important;
  margin: 20px 0px 30px 0px;
}

.menuline{
  position: fixed;
  right: 7%;
  width: 0.14%;
  margin-top: -2%;
  height: 5%;
}

.menubtn_01{
  position: fixed;
  right: 8%;
  width: 17%;
  margin-top: 0.2%;
}

.menubtn_02{
  position: fixed;
  width: 17%;
  margin-top: 0.2%;
  right: 25%;top: 0%;
}

#wrapper nav {
    position: fixed;
    top: 0;
    right: -30%;
    width: 20%;
    height: 100%;
    padding-top: 50px;
    background-image: url(../images/menu_bg.png);
    background-repeat: no-repeat;
    background-attachment:inherit;
    background-size: cover;
    background-color:rgba(255,255,255,0.1);
    font-size: 16px;
    box-sizing: border-box;
    z-index: 2
}

#wrapper nav ul li {
   padding: 11px 0px;
}

#wrapper nav ul li a {
    text-decoration: none;
    color: #ddd
}

#wrapper nav ul li img{
    padding: 5px;
    margin-left: -29px;
}

#wrapper .btn-gnavi {
    position: fixed;
    right: 5%;
    margin-top: 1.5%;
    z-index: 3;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms
}

#wrapper .btn-gnavi span {
    position: absolute;
    width: 30px;
    height: 2px;
    background: #666;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms
}

#wrapper .btn-gnavi span:nth-child(1) {
    top: 0
}

#wrapper .btn-gnavi span:nth-child(2) {
    top: 10px
}

#wrapper .btn-gnavi span:nth-child(3) {
    top: 20px
}

#wrapper .btn-gnavi.open {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

#wrapper .btn-gnavi.open span {
    background: #fff
}

#wrapper .btn-gnavi.open span:nth-child(1) {
    width: 35px;
    -webkit-transform: translate(-7px,17px) rotate(45deg);
    transform: translate(-39px,-13px) rotate(45deg);}

#wrapper .btn-gnavi.open span:nth-child(2) {
   width: 35px;
   -webkit-transform: translate(-7px,-17px) rotate(-45deg);
   transform: translate(-39px,-24px) rotate(-45deg);}

#wrapper .btn-gnavi.open span:nth-child(3) {
    display: none;
}

.sp_menu{
  width: 123%;
}

.title_03{
  width: 24%;
  margin: 39px 0 11px 0;
}

.text_03{
  width: 32%;
  margin: 27px 0 20px 0;
}

.title_04{
  width: 25%;
  margin: 3px 0 42px 0;
}

.text_07{
  width: 35%;
  margin: 3px 0 42px 0;
}

.title_08{
  width: 14% !important;
  margin: 17px 0 57px 0;
}

.title_09{
  width: 27%;
  margin: 0px 0 47px 0;
  }


/* 非表示切り替え */

.sp_menu_btn01{
  display: none;
}

.sp_image_01{
  display: none;
}

.sp_btn_01{
  display: none;
}

.sp_image_02{
  display: none;
}

.sp_image_type{
display: none;
}

.sp_step{
  display: none;
}

.sp_step02{
  display: none;
}

.sp_text06_01{
  display: none;
}
.sp_text06_02{
  display: none;
}

.sp_voice{
  display: none;
}

.sp_text_08{
  display: none;
}

.sp_text_footer{
  display: none;
}

}

@media screen and (max-width: 968px){
  .li-logo{
    display: none;
  }
}