@charset "utf-8";
*{
  scroll-behavior: smooth;
  text-decoration: none;
}
body{
  margin: 0;
	font-family:"Noto Sans JP","Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3",'Hiragino Kaku Gothic Pro W3','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
}
.col1 p,.sub{
  font-weight: 300;
  font-family:'Montserrat',"Noto Sans JP","Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3",'Hiragino Kaku Gothic Pro W3','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
}

#cta,#service p,.sub,.center{
  text-align: center;
}



h2{
  font-size: 2.1em;
  margin-bottom: 6px;
  letter-spacing: 3pt;
}


h3{
  font-size: 1.5em;
}
.sub{
  color:#C39717;
  font-size: 1.2em;
  margin: -.5rem 0 1rem 0;
  letter-spacing: 2pt;
}
#header{
  width: 100%;
  position: fixed;
  z-index: 9999;
}
.logo{
  max-height: 100px;
}
.logo::before{
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
   
    /*ここで三角形のサイズを決める。
    必ず幅100vwにして、ブラウザサイズいっぱいにしてください。*/
    border-width: 0 0 180px 120vw ;
   
    border-color: transparent #FFEFC7 transparent;
    z-index: -1;
}
.h-main_header{
  width:95%;
  margin: 0 0 0 5%;
}

.menu{
  float: right;
  margin-right: 450px;
}
li a{
  color:#333;
  transition: .2s;
}
a li:hover{
  color:#fff;
  background: #C39717;
}
img{
  width: 100%;
}

.tel{
  font-size: 3rem;
  margin:-20px 0;
  font-weight: bold;
  transition: .3s;
}
.telsub{
    margin:0;
    font-weight: bold;
}
.number{
  background: #C39717;
  color:#fff;
  font-weight:bold;
  padding:3px 5px;
  margin-left:5px;
}
.u-line{
  background:linear-gradient(transparent 70%, #FFFF00 0%);
  font-size: 1.2em;
}

#fv img{
  width: 100%;
}

.fv-content{
  position: absolute;
  width: 700px;
  max-width: 700px;
  top:50vh;
  right:0;
  color:#fff;
  background: #C39717;
  padding: 2rem;
  border-radius: 30px 0 0 30px;
  font-weight: 900;
  letter-spacing: 4pt;
  z-index: -1;
}
.bg{
  font-size: 3rem;
  margin:0;
}

.content{
  max-width: 1280px;
  margin:0 auto;
  padding:3rem 0;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

#about{
  padding: 3rem 0;
  background: url(/images/about_bk.png);
  background-size:cover;
}
#reason{
  background: url(/images/reason_bk.png);
  background-size:cover;
}
#feature{
  background: #FFF8FB;
}



#cta{
  background: url(/images/cta_bk.png) no-repeat center center;
  background-size:cover;
  color: #fff;
}
#cta .content{
    max-width: 960px;
}
#cta h2{
    margin-bottom: 2rem;
}

.col1{
  float: left;
  width:7.8%;
  margin:0 0 0 0.6%;
}
.col1::after{
  display: block;
  content:"";
  margin:20px auto 0;
  width: 2px;
  height: 60px;
  background: #E63F7D;
}
.step5 .col1::after{
  display: none;
}

.col2{
  float: left;
  width:15.7%;
  margin:0 0 0 1.3%;
}

.col3{
  float: left;
  width:23.5%;
  margin:0 0 0 1.9%;
}
.col4{
  float: left;
  width:31.4%;
  margin:0 0 0 2.6%;
}
.col5{
    float: left;
    width:39.7%;
    margin:0 0 0 3.1%;
}
.col5 img{
    width:100%;
}
.col6{
  float: left;
  width:48%;
  margin:0 0 0 4%;
  line-height: 2;
}
.col6 img{
  width:25px;
  margin:0 10px 0 0;
}
.col7{
  float: left;
  width:56%;
  margin:0 0 0 4%;
  line-height: 2;
}
.col12{
  line-height: 2;
}
.col2.first,.col3.first,.col4.first,.col5.first,.col6.first{
  margin:0;
}

.box{
  min-height: 100px;
  padding: 3rem 2rem 1rem;
  margin:2rem 0;
  background: #C39717;
  color: #fff;
  text-align: center;
  transition: .4s;
}
.box p{
  text-align: left;
}
#reason .box{
  min-height: 100px;
  padding: 2rem;
  margin:2rem 0;
  color: #333;
  background: #fefefe;
  box-shadow: 0 0 15px #666;
  text-align: left;
}
#reason .box:hover{
  transform:scale(1.1);
  box-shadow: 0 5px 20px #999;
}
#reason .box h3{
  margin: 10px 0;
  line-height: 1.6;
}
#reason .box p{
  margin:10px 5px 0;
}

#function .box:hover{
  margin-top:1rem;
  box-shadow: 0 10px 20px #999;
}
#case{
  padding-top: 30px;
}
#price img{
  max-width:700px;
}

.cv{
    position: absolute;
    right:10px;
}

/*button*/
.btn{
    width:100%;
    padding: 8px 20px;
    color: #fff;
    background: #C39717;
    border-radius: 50px;
    transition: .2s;
}
.btn:hover{
    background: #444;
}
.dl{
    display: block;
    background: darkorange;
    color:#fff;
    width:100%;
    margin: 1rem auto;
    padding: 10px;
    font-size: 1.8rem;
    font-weight: bold;
}

.cp_offcm01 {
	position: fixed;
	top: 20px;
	right: 20px;
	display: inline-block;
	z-index:9999;
}
/* menu */
.cp_offcm01 .cp_menu {
	position: fixed;
	top: 0;
	right: -100vw;
	width: 250px;
	height: 100%;
	cursor: pointer;
	-webkit-transition: 0.53s transform;
	        transition: 0.53s transform;
	-webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	        transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	background-color: #22222280;
}
.cp_offcm01 .cp_menu ul {
	margin: 0;
	padding: 0;
}
.cp_offcm01 .cp_menu li {
	list-style: none;
}
.cp_offcm01 .cp_menu li a {
	display: block;
	padding: 12px;
	text-decoration: none;
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
	font-weight:bold;
}
.cp_offcm01 .cp_menu li a:hover{
	background:#C39717;
}

.cp_offcm01 #cp_toggle01 {
	position: absolute;
	display: none;
	opacity: 0;
}
.cp_offcm01 #cp_toggle01:checked ~ .cp_menu {
	-webkit-transform: translateX(-95vw);
	        transform: translateX(-95vw);
}
/* menu toggle */
.cp_offcm01 #cp_toggle01 ~ label {
	display: block;
	padding: 0.5em;
	cursor: pointer;
	-webkit-transition: 0.5s transform;
	        transition: 0.5s transform;
	-webkit-transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	        transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	text-align: center;
	color: #C39717;
}
.cp_offcm01 #cp_toggle01:checked ~ label {
	-webkit-transform: translateX(-210px);
	        transform: translateX(-210px);
}
.cp_offcm01 #cp_toggle01 ~ label::before {
	font-family: 'FontAwesome';
	content: '\f0c9';
	font-size: 2em
}
.cp_offcm01 #cp_toggle01:checked ~ label::before {
	content: '\f00d';
}



/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 300px;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 3;
  opacity: 0;
}
.open nav {
  left: 0;
  opacity: 1;
}
nav .inner {
  padding: 25px;
}
nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .inner ul li {
  position: relative;
  margin: 0;
  border-bottom: 1px solid #333;
}
nav .inner ul li a {
  display: block;
  color: #333;
  font-size: 14px;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}
nav .inner ul li a:hover {
  background: #e4e4e4;
}
@media screen and (max-width: 767px) {
  nav {
    left: -220px;
    width: 220px;
  }
}
/*============
.toggle_btn
=============*/
.toggle_btn {
  display: block;
  position: fixed;
  top: 15px;
  right: 30px;
  width: 30px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
  transition: all .5s;
}
.toggle_btn span:nth-child(1) {
  top: 4px;
}
.toggle_btn span:nth-child(2) {
  top: 14px;
}
.toggle_btn span:nth-child(3) {
  bottom: 4px;
}
.open .toggle_btn span {
  background-color: #fff;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(-315deg);
  transform: translateY(10px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}
/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
}



.col6.form a{
	font-size:2.4rem;
  font-weight:bold;
  color: #fff;
  letter-spacing: 3pt;
}
.col6.form a{
	color:#E63F7D;
}
.col6.form{
	background:#fff;
	color:#E63F7D;
}
.col6.footertel .inner,
.col6.form .inner{
	padding:2rem 0;
	border:2px solid #fff;
	transition:.3s;
}
.col6 .inner:hover{
	color:#E63F7D;
	background:#474747;
	border:2px solid #474747;
}
.dl-header{
  background: url(/images/dl_header.png)no-repeat center center;
  background-size: cover;
}
.dl-header h2{
  position: relative;
  color: #fff;
  text-align: center;
  top:150px
}
.dl-header{
  height:350px;
  overflow: hidden;
}
.dl-header img{
  margin-top:-150px
}
#consent{
  text-align: center;
}
.form {
  width: 95%;
  max-width: 900px;
  height: 500px;
  margin: 0 auto;
  padding:10px;
  background-color: #f1f1f1;
  overflow: scroll;
  text-align: left;
}
.form li{
  display: list-item;
  list-style-type: disc;
}
.submit{
  padding: 1rem 3rem;
  margin:0  0 2rem;
  border-radius: 50px;
  font-size: 1.8rem;
  font-weight: bold;
  border:none;
}

  .agreement{
  text-align: center;
  }
  #SMP_STYLE label.checkAgree{
  padding: 8px 20px;
  border: solid 2px #c3fa71;
  font-size: 1.5em
  }
  #SMP_STYLE label.checkAgree{
  padding: 8px 20px;
  border: solid 2px #c3fa71;
  font-size: 1.5em
  }
  #SMP_STYLE label.checkAgree{
  padding: 8px 20px;
  border: solid 2px #c3fa71;
  font-size: 1.5em
  }
.checkbox{
  cursor:pointer;
  transform: scale(1.8);
  margin: 0 0 0 15px;
}
@media screen and (min-width:1540px){
#header ul{
}
}
@media screen and (min-width:992px){
  .sp,
  .tab{
    display: none!important;
  }
  ul li {
    display: inline-block;
    padding:16px!important;
    transition: .2s;
  }
  #header li,
  li a{
    color: #444;
    padding: 20px 0;
    font-weight: bold;
  }
  .form {
    padding:10px 30px;
  }
}
@media screen and (max-width:1450px){

  #header li,
  li a{
    padding: 0;
    font-weight: bold;
  }
  ul li{
    padding:8px;
  }
}
@media screen and (min-width:1201px){
  .tabmenu{
    display: none;
  }
}
@media screen and (max-width:1200px){
  .menu{
    margin-right: 380px;
  }
}
@media screen and (max-width:1080px){
  .h-main_header{
    width:100%;
    margin:0 0 0 1%;
  }
  .col2{
    width:13%;
  }
}
@media screen and (max-width:991px){
  .pc{
    display: none!important;
  }
  .cp_offcm01{
    top:16px;
  }
  #header{
    height:90px;
  }
  .content{
    padding:1rem 30px;
  }
  h1{
    margin:0;
  }
  h1 img{
    padding: 10px;
    width:65%;
    max-width: 300px;
  }
  .dl-header img{
    margin-top:0px
  }
  .dl-header h2{
    top: 200px;
  }
  h2{
    font-size: 1.4em;
  }
  h3{
    font-size: 1.2em;
  }
  .fv-content{
    background: #C3971798;
    top:30vh;
    width:70%;
    max-width: 300px;
    padding:1rem  1.4rem;
  }
  .mid{
    font-size: .8rem;
  }
  .bg{
    font-size: 1.6rem;
    letter-spacing: 2pt;
  }
  #about{
    padding: 1rem 0 2rem;
    background: url(/images/about_bk.png) no-repeat center center;
  }


  .col1::after{
    opacity: .2;
    height: 110px;
  }

  .col6 span,.col12 span{
    font-size: .9rem;
  }
}

@media screen and (max-width:768px){
  h1 img{
    max-width: 200px;
  }

  .dl-header h2{
    top: 180px;
  }
  .col4,.col5,.col6,.col7{
    width:100%;
    margin:0;
  }
  #function .col6{
    float: left;
    width:48%;
    margin:0 0 0 4%;
    line-height: 2;
  }
  #function .col6.first{
    margin:0;
  }
  .col6 h3{
    text-align: center;
  }
  .dl{
    max-width: 450px;
  }
  #about{
    background: url(/images/about_bk.png) no-repeat right center;
    background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
  }
  #reason{
    background:url(/images/reason_bk.png) no-repeat left center;
    background-size: cover;
  }

}
@media screen and (max-width:480px){
  .cp_offcm01{
    top:6px;
  }
  .fv-content{
    top:20vh;
  }
  #header{
    height:60px;
  }
  h1 img{
    max-width: 150px;
  }
  .tel{
    font-size: 2.4rem;
  }
  .spmenu{
    position: relative;
    top:20px;
    margin:0 arem;
  }
  #fv img{
    margin-top: 60px;
  }
  .content{
    padding:1rem 10px;
  }
  .col4,.col6{
    width: 100%;
    margin:1rem 0;
  }
  .form{
    max-width: 480px;
  }
  .dl{
    max-width: 400px;
    padding: 0;
  }
}

.color_box {
  background-color: #FFEFD0;
  height: 500px;
  position: relative;
  z-index: -1;
  margin-bottom: -500px;
}
video {
  width: 80%;
  display: block;
  margin: 2rem auto;
  box-shadow: 0 0 15px #666;
}
.movie_txt {
  width: 80%;
  margin: auto;
}
.movie_txt h4 {
    font-size: 1.5em;
    background-color: #C39717;
    color: white;
    display: inline;
    padding: 2px;
}
.movie_txt span {
  margin-top:10px;
  display: inline-block;
}
@media screen and (max-width:768px){
  video {
    width: 100%;
  }
  .movie_txt {
    width: 100%;
    margin: auto;
  }
  .movie_txt h4 {
      font-size: 1.1em;
  }
}
@media screen and (max-width:480px){
  video {
    width: 100%;
  }
  .movie_txt {
    width: 100%;
    margin: auto;
  }
  .movie_txt h4 {
      font-size: 1.0em;
  }
}
.degi {
  color: #C39717;
}