@charset "utf-8";
/* CSS Document */

/* ===== clearfix ===== */

.clearfix:after {
  content: "";
  display: block;
  clear: both;
} 
.clearfix:before {
  content: "";
  display: block;
  clear: both;
} 
.clearfix {
  display: block;
}

body{
	margin: 0;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif", Arial, Helvetica;
}

h2{
	margin: 0;
}

/*li,ol{
	list-style: none;
}

a{
	text-decoration: none;
}*/

img{
    image-rendering: auto;
}

div.container{
	margin: 0 auto ;
	width: 1200px;
}

.pc-item{
    display: block;
}

.sp-item{
    display: none !important;
}
/*
table, table tr th, table tr td, tbody{
    background:initial;
}
table th, table td {
    border: initial;
}*/

.annotation_text{
	margin: 0 auto;
	width: 80vw;
	font-size: 0.8rem;
	text-align: left;
}

.annotation_text li{
	list-style: none;
}

p.smallTxt {
    font-size: 0.8rem;
    line-height: 1.4 !important;
    text-align: left;
    width: 77%;
    margin: 0 auto;
}

td p.smallTxt {
    font-size: 0.8rem;
    line-height: 1.4 !important;
    text-align: left;
    width: 77%;
    margin: 0;
}


.contents-border{
	display: block;
	margin: 50px 10% 80px;
	padding: 1px 0;
	border-bottom: 1px solid #e5e5e5;
}
/** KV **/

#kv{
	background: url("../../img/bg-kv-pc.png") center top no-repeat;
	background-size: auto 100% ;
	max-width:2400px;
	height: 600px;
}

/** アニメーション設定 **/
.img-frame{
    position: relative;
	width: 1024px;
	height: 600px;
    overflow: hidden;
	margin: 0 auto;
}

.img-01,
.img-02,
.img-03{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
	height: 600px;
    background-size: auto 100%;
    background-repeat: no-repeat;
    margin-bottom: 70px;
}

.img-01{
   background-image: url("../../img/img-kv-1-pc.png");
   animation: slide-animation-01 24s infinite;
}
.img-02{
   background-image: url("../../img/img-kv-2-pc.png");
   animation: slide-animation-02 24s infinite;
}
.img-03{
   background-image: url("../../img/img-kv-3-pc.png");
   animation: slide-animation-03 24s infinite;
}

@keyframes slide-animation-01 {
   0% {opacity: 1; transform: scale(1.0) ;}
   30% {opacity: 1;}
   40% {opacity: 0; transform: scale(1.15)}
   90% {opacity: 0}
   100% {opacity: 1; transform: scale(1.0)}
 }
 @keyframes slide-animation-02 {
   0% {opacity: 0;}
   30% {opacity: 0; transform: scale(1.1) }
   40% {opacity: 1;}
   60% {opacity: 1;}
   70% {opacity: 0; transform: scale(1.0)}
   100% {opacity: 0;}
 }
 @keyframes slide-animation-03 {
   0% {opacity: 0;}
   60% {opacity: 0;  transform: scale(1.0) ;}
   70% {opacity: 1;}
   90% {opacity: 1;}
   100% {opacity: 0; transform: scale(1.1) ;}
 }
@media screen and (max-width: 767px){
.img-frame{
   width: 100%;
   height: 200px;
}
}

/** スクロールアニメーション **/
.parallax_content{
  min-height: 100vh;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-overflow-scrolling: touch;
}

.parallax_content.background-1 {
  background-image: url( "../../img/bg-feat_toc-pc.png");
}
 
.parallax_content.background-2 {
  background-image: url("../../img/bg-howto-pc.png");
}

.parallax_content.background-3 {
  background-image: url("../../img/bg-contact-pc.png");
}

/** フェードインアニメーション**/

.js-scroll.-fadein {
  opacity: 0;
  transform: translateY(3rem);
}
.js-scroll.-fadein.js-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.0s ease, transform 1.0s ease;
}



/** トグル　**/
@keyframes lineFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#newsArea .container {
  margin: 30px 0;
  position: relative;
 /* max-width: 600px;*/
  margin-left: auto;
  margin-right: auto;
}

#newsArea .container .btn-box button {
  width: 100%;
  padding: 20px 0;
  background: transparent;
  border: none;
  font-size: 16px;
  font-weight: 400;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  position: relative;
  font-family: 'Arial', sans-serif;
  letter-spacing: 2px;
}

#newsArea .container .btn-box button::before,
#newsArea .container .btn-box button::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: #ddd;
  transition: all 0.3s ease;
}

#newsArea .container .btn-box button::before {
  left: 0;
}

#newsArea .container .btn-box button::after {
  right: 0;
}

#newsArea .container .btn-box button:hover {
  color: #333;
}

#newsArea .container .btn-box button:hover::before,
#newsArea .container .btn-box button:hover::after {
  background: #999;
  width: 32%;
}

#newsArea .container .more {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  background: transparent;
  text-align: center;
}

#newsArea .container .more.appear {
  max-height: 400px;
  animation: lineFadeIn 0.3s ease;
}

#newsArea .container .more ul {
  list-style: none;
  padding: 0 0 20px;
  margin: 0;
  text-align: left;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

#newsArea .container .more li {
  padding: 20px 0;
  color: #222;
  font-size: 1rem;
  line-height: 1.6;
  border-bottom: 1px solid #e1dace;
  text-align: left;
}

#newsArea .container .more li:first-child {
  padding-top: 0;
}

#newsArea .container .more li:last-child {
  border-bottom: none;
}

#newsArea .container .more li a {
    color: #222 !important;
  text-decoration: underline;
}

#newsArea .container .more li a:hover {
    text-decoration: none;
}

/** ロゴ・コピー **/

.copyArea{
	position: absolute;
	top:150px;
	left: 90px;
	color: #FFF;
	z-index: 10;
}

.copyArea h2{
	margin-bottom: 15px;
}
.copyArea p:last-child{
	margin-top: -20px;
	font-size:42px;
    font-family:Helvetica;
	font-weight: 700;
}

/** news-line **/
.news-line{
	padding: 1vw 0;
    background-image: linear-gradient(90deg, #002f7b, #000000);
	color: #fff;
}

.news-line a{
	text-decoration: underline;
	color: #fff;
}

.news-line a:hover{
	text-decoration: none;
}

.news-line dl{
	display: flex;
	margin: 0 auto;
	width: 1024px;
}

/** about **/
#about{
	padding: 80px 0 472px;
    background: url(../../img/bg-about-pc.png) center bottom no-repeat;
	background-size: auto 100%;
    text-align: center;
}

#about .container{
	margin: 0 auto;
	width: 750px;
}

#about .container h2{
	margin-bottom: 30px;
}

#about .container p{
	line-height: 2;
}

#about .container p.smallTxt a{
    color: #222 !important;
    text-decoration: underline;
}

#about .container p.smallTxt a:hover{
    text-decoration: none;
}


/** feat **/
#feat{
	/*padding: 80px 0 0;*/
	text-align: center;
}

#feat h2{
	margin-bottom: 50px;
}

#feat h2 span{
	font-size: 0.95rem;
}

#feat .innerBox {
	display: flex;
}

#feat h3 {
	margin-bottom: 40px;
	font-size: 1.15rem;
	font-weight: 400;
}

#feat .innerBox dl {
	width: 100%;
}

#feat .innerBox dt {
	margin: 0 auto 20px;
	width: 100%;
}

#feat .other_use h3{
	margin-bottom: 40px;
	font-size: 1.15rem;
	font-weight: 500;

}

#feat .innerBox dd h4{
	margin-top: 0;
	margin-bottom: 20px;
	width: 95%;
	text-align: center;
}

#feat .innerBox dd p{
	margin-top: 0;
	margin-left: -1em;
	margin-bottom: 20px;
	width: 98%;
	text-align: left;
}

#feat .other_use{
	margin-top: 100px;
	padding-top: 80px;
}

#feat .other_use {
	color: #fff;
}

#feat .other_use .innerBox{
	margin: 0 auto;
	width:790px;
}


/** advantage **/
#advantages{
	padding: 100px 0;
	background-color: #e7eff4;
	text-align: center;
}

#advantages h2{
	margin-top: -1em;
	margin-bottom: 50px;
}

#advantages h2 span{
	font-size: 0.95rem;
}

#advantages h3 {
	margin-bottom: 40px;
	font-size: 1.15rem;
	font-weight: 400;
}


#advantages .innerBox {
	display: flex;
	width: 100%;
}

#advantages .innerBox dl {
	display: flex;
	margin-right: 30px;
	width: 550px;
	text-align: left;
}

#advantages .innerBox dl:last-child{
	display: flex;
	margin-right: 0;
	width: 550px;
	text-align: left;
}

#advantages .innerBox dt {
	margin: 0 auto 20px;
	width: 200px;
}
#advantages .innerBox dd {
	width: 350px;
}
#advantages .innerBox dd span {
	font-size: 0.75rem;
}


/** service **/
#service{
	padding: 100px 0;
	text-align: center;
}

#service h2{
	margin-top: -1em;
	margin-bottom: 50px;
}

#service h2 span,
#service h3 span{
	font-size: 0.95rem;
}

#service h3 {
	margin-bottom: 40px;
	font-size: 1.15rem;
	font-weight: 400;
}

#service .innerBox {
	display: flex;
}

#service .innerBox dl {
	width: 100%;
}

#service .innerBox dt {
	margin: 0 auto 20px;
	width: 100%;
}

#service .other_use h3{
	margin-bottom: 40px;
	font-size: 1.15rem;
	font-weight: 500;

}

#service .innerBox dd h4{
	margin-top: 0;
	margin-bottom: 20px;
	width: 95%;
	text-align: center;
}

#service .innerBox dd p{
	margin-top: 0;
	margin-left: -1em;
	margin-bottom: 20px;
	width: 98%;
	text-align: left;
}


/** buy **/

#buy{
	padding: 100px 0 ;
	text-align: center;
	color: #fff;
}

#buy h2{
	margin-top: -1em;
	margin-bottom: 50px;
}

#buy h2 span{
	font-size: 0.95rem;
}

#buy h3 {
	margin-bottom: 40px;
	font-size: 1.15rem;
	font-weight: 400;
}

#buy .buy-contents .innerBox {
	display: flex;
	margin: 0 auto;
	width:1200px;
}

#buy .buy-contents .innerBox dd p{
	font-weight: 700;
}

#buy .buy-contents .innerBox dd p span{
	font-size:0.9rem;
	font-weight: 400;
}

#buy .innerBox dl{
	width:99%;
	margin-right: 2px;
}

#buy .innerBox dl:last-child{
	margin-right: 0;
}

#buy .innerBox dt.bg-1{
	background: #0068b7;
}

#buy .innerBox dt.bg-2{
	background: #007fde;
}
#buy .innerBox dt{
	padding: 20px 0;
}
#buy .innerBox dd{
	margin-left: 0em;
	background: rgb(255,255,255,1.0);
	color:#222;
}

#buy .innerBox dd p{
	margin-top: 0em;
	padding: 20px 0;
}

#buy .colorBox{
	margin-right: 30px;
	width:100%;
}

#buy .colorBox:last-child{
	margin-right: 0px;
}

#buy .colorBox dt.bg-3{
	background: #13b5b1;
}

#buy .colorBox dt.bg-4{
	background: #1395b5;
}

#buy .colorBox dt.bg-5{
	background: #eb6100;
}

#buy .colorBox dd{
	padding: 10px 0;
}

#buy .colorBox dd p{
	font-size:1.6rem;
	font-weight:700;
}

#buy .colorBox dd p.color-3{
	color: #13b5b1;
}

#buy .colorBox dd p.color-4{
	color: #1395b5;
}

#buy .colorBox dd p.color-5{
	color: #eb6100;
}

/** spec **/

#spec{
	padding: 100px 0;
	text-align: center;
}

#spec h2{
	margin-top: -1em;
	margin-bottom: 50px;
}

#spec h2 span{
	font-size: 0.95rem;
}

#spec h3 {
	margin-bottom: 40px;
	font-size: 1.15rem;
	font-weight: 400;
}

#spec .innerBox {
	display: flex;
}

#spec table.tableLayout-1{
	margin: 0 auto 80px;
	width: 1200px;
}

#spec table.tableLayout-1 th{
	padding: 20px 0;
	width:25%;
/*	border: 0 solid #a4c0cf;
	border-bottom: 1px solid #a4c0cf;*/
}

#spec table.tableLayout-1 td{
	padding: 15px 0;
	width:25%;
/*	border: 0 solid #a4c0cf;
	border-bottom: 1px solid #a4c0cf;*/
}

#spec table.tableLayout-1 .lastchild{
	border: 0px
}

#spec table.tableLayout-2{
	margin: 0 auto 80px;
/*	border-top: 1px solid #a4c0cf;
	border-left: 1px solid #a4c0cf;*/
	width: 1200px;
}

#spec table.tableLayout-2 th{
	padding: 20px 0;
/*	border-right: 1px solid #a4c0cf;
	border-bottom: 1px solid #a4c0cf;*/
	width:40%;
}

#spec table.tableLayout-2 td{
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 40px;
/*	border-right: 1px solid #a4c0cf;
	border-bottom: 1px solid #a4c0cf;*/
	text-align: left;
}

#spec table.tableLayout-2 tr:nth-child(2n+1){
/* background:#eef2f4 !important;*/
 }


/** newsArea **/
#newsArea{
	padding: 100px 0;
	background: #f8f4ed;
	text-align: center;
}

#newsArea h2{
	margin-top: -1em;
	margin-bottom: 50px;
}

#newsArea h2 span{
	font-size: 0.95rem;
}

#newsArea h3 {
	margin-bottom: 40px;
	font-size: 1.15rem;
	font-weight: 400;
}

#newsArea .innerBox {
	margin: 0 auto;
}

#newsArea .innerBox h4{
	margin-top:  5vw;
	padding-top: 2vw;
	text-align: center;
	font-size: 1.1rem;
	border-top: 1px solid #e1dace;
}

#newsArea .container ul {
  list-style: none;
  padding: 20px 0;
  margin: 0;
  text-align: left;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

#newsArea .container ul li {
  padding: 20px 0;
  color: #222;
  font-size: 1rem;
  line-height: 1.6;
  border-bottom: 1px solid #e1dace;
  text-align: left;
}

#newsArea .container ul li:last-child {
	margin-bottom: 0px;
}

.newsArea li a{
	text-decoration: underline;
  }

.newsArea li a:hover{
	text-decoration: none;
}

#newsArea .container p span,
#newsArea .container li span{
	font-size: 0.8rem
}


/** contact **/

#contact{
	padding: 100px 0;
	text-align: center;
}

#contact h2{
	margin-top: -1em;
	margin-bottom: 50px;
}

#contact h2 span{
	font-size: 0.95rem;
}

#contact h3 {
	margin-bottom: 40px;
	font-size: 1.15rem;
	font-weight: 400;
}

#contact .innerBox {
	margin: 0 auto;
	width: 500px;
}

#contact .innerBox dl{
	margin-bottom: 80px;
	text-align: left;
	line-height: 2;
}

#contact .innerBox dt h4{
	text-align: center;
	font-size: 1.1rem;
}

#contact .btnArea{
    position: relative;
	margin: 0 auto 120px;
    padding: 33px 0;
    background: url(../../img/btn-contact.png) 0 0 no-repeat;
    background-size: 100% auto;
    width: 100%;
    color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
	transition: .3s;
}

@media screen and (min-width: 1024px) {
    #contact .btnArea:hover {
        box-shadow: 0px 12px 24px #999;
        transform: translateY(-4px);
    }	
}

#contact .btnArea p{
    margin-top: -0.5em;
    margin-bottom: -0.25em;}

#contact .btnArea a{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}

#contact .imgArea{
	margin: 0 auto;
	width: 100%;
}

#contact .imgArea img{
	width: 100%;
}


/** スマホ **/
@media screen and (max-width: 750px) {
  .pc-item{
      display: none !important;
  }

  .sp-item{
      display: block !important;
  }
	
  /** トグル **/
  #newsArea .container .btn-box button {
    font-size: 14px;
    padding: 15px 0;
    letter-spacing: 1px;
  }
  
  #newsArea .container .btn-box button::before,
  #newsArea .container .btn-box button::after {
    width: 25%;
  }
  
  #newsArea .container .btn-box button:hover::before,
  #newsArea .container .btn-box button:hover::after {
    width: 30%;
  }
  
  #newsArea .container .more ul {
    padding: 15px 20px;
    text-align: left;
  }
  
  #newsArea .container .more.appear {
    max-height: 120.667vw;
  }
	
.contents-border{
	display: block;
	margin: 50px 10% 80px;
	padding: 1px 0;
	border-bottom: 1px solid #e5e5e5;
}
	
div.container {
    margin: 0 auto;
    width: 95%;
}
	
.annotation_text li {
    list-style: none;
    margin-left: -3em;
}

/** KV **/

#kv{
    background-image: none;
	height: 80vw;
}

/** アニメーション設定 **/
    @media screen and (max-width: 750px){
      .img-frame{
         width: 100%;
         height: 100%;
      }
	}

    .img-01,
    .img-02,
    .img-03{
        width: 100%;
        height: 80vw;
    }
	
	.img-01{
       background-image: url("../../img/img-kv-1-sp.png");
       animation: slide-animation-01 24s infinite;
    }
    .img-02{
       background-image: url("../../img/img-kv-2-sp.png");
       animation: slide-animation-02 24s infinite;
    }
    .img-03{
       background-image: url("../../img/img-kv-3-sp.png");
       animation: slide-animation-03 24s infinite;
    }
	
	/** ロゴ・コピー **/
    .copyArea{
        position: absolute;
		top:2vw;
        /*top:23vw;*/
        left: 6.667vw;
    }

    .copyArea h2{
        margin-bottom: 5vw;
    }
    .copyArea h2 img{
		width:45vw;
	}
	.copyArea p:last-child{
        font-size:1.6rem;
		line-height: 1.2;
    }

    .copyArea p:last-child{
        margin-top: -20px;
        font-size:1.6rem;
        font-family:Helvetica;
        font-weight: 700;
    }
	
	/** news-line **/
	.news-line {
      padding: 2vw 0;
    }

    .news-line dl {
        margin: 0 auto;
        width: 90%;
    }

	/** about **/
    #about{
      padding: 10.667vw 0 80vw;
      background: url("../../img/bg-about-sp.png") center bottom no-repeat;
      background-size: 100% auto;
      text-align: center;
    }

    #about .container{
        margin: 0 auto;
        width: 90%;
    }

    #about .container h2{
        margin-bottom: 4vw;
		font-size: 1.6rem;
    }

    #about .container p{
        line-height: 2;
    }
	
    p.smallTxt {
        font-size: 0.8rem;
        line-height: 1.4 !important;
        text-align: left;
        width: 95%;
        margin: 0 auto;
    }
	
    td p.smallTxt {
        font-size: 0.7rem;
        line-height: 1.4 !important;
        text-align: left;
        width: 77%;
        margin: 0;
    }

    /** feat **/
	
    #feat{
        padding: 10.667vw 0 ;
        text-align: center;
    }

    #feat h2{
        margin-bottom: 6.667vw;
    }

    #feat h2 span{
        font-size: 0.95rem;
    }

    #feat .innerBox {
        display: block;
		margin: 0 auto;
		width: 90%;
    }
	
	/*#feat .innerBox dl:first-child,
	#feat .innerBox dl:last-child{
		display: none;
	}*/

    #feat h3 {
        margin-bottom: 6.667vw;
    }

    #feat .innerBox dl {
		margin-bottom: 20vw;
        /*width: 45.333vw;*/
    }

    #feat .innerBox dt {
        margin: 0 auto 2.667vw;
        width: 100%;
    }

	#feat .innerBox dt img{
        width: 90%;
    }

    #feat .other_use h3{
        margin-bottom:5.2vw;
    }

    #feat .innerBox dd h4{
        margin-top: 0;
		margin-left: -0.5em;
        margin-bottom: 2.667vw;
        width: 95%;
        text-align: center;
    }

    #feat .innerBox dd p{
        margin-top: 0;
        margin-left: -1em;
        margin-bottom: 20px;
        width: 98%;
        text-align: left;
    }

    #feat .other_use{
        margin-top: 13.333vw;
        padding: 10.667vw 0 30vw;
		background: url("../../img/bg-feat_toc-sp.png") center bottom no-repeat;
		background-size:auto 100%;
        color: #fff;
    }
	
    #feat .other_use p.copyTxt{
		margin: 0 auto 20vw;
		width: 95%;
		text-align: left;
	}
	
    #feat .other_use .innerBox {
        margin: 0 auto;
        width: 95%;
    }

    #feat .other_use .innerBox dd{
        /*margin: 0 auto;*/
        width:  80vw;
    }

	
    /** advantage **/
    #advantages{
		margin-top: -12vw;
        padding: 13.333vw 0;
    }

    #advantages h2{
        margin-top: 10vw;
        margin-bottom: 6.667vw;
    }

    #advantages h2 span{
        font-size: 0.95rem;
    }

    #advantages h3 {
        margin-bottom: 15vw;
        font-size: 1.15rem;
        font-weight: 400;
    }


    #advantages .innerBox {
        display: block;
    }

    #advantages .innerBox dl,
	#advantages .innerBox dl:last-child{
        display: block;
		margin: 0 auto 24vw;
		width: 85%;
    }
	
    #advantages .innerBox dt {
        margin: 0 auto 2.667vw;
    }
    #advantages .innerBox dd {
        width: 80%;
    }


/*
    #advantages .innerBox dt {
        margin: 0 auto 2.667vw;
		width: 46vw;
    }*/
	
    #advantages .innerBox dd h4{
        margin-left: -1em;
        text-align: center;
	}
    #advantages .innerBox dd p{
        margin-left: -1.5em;
        text-align: left;
	}

    /** service **/
    #service{
        padding: 24vw 0;
    }

    #service h2{
        margin-top: -1em;
        margin-bottom: 6.667vw;
    }

    #service h2 span{
        font-size: 0.95rem;
    }

    #service h3 {
        margin-bottom: 15vw;
        font-size: 1.15rem;
        font-weight: 400;
		text-align: center;
    }

    #service .innerBox {
        display: block;
    }

    #service .innerBox dl {
		margin-bottom: 20vw;
        width: 100%;
    }

    #service .innerBox dt {
        margin: 0 auto 2.667vw;
    }

    #service .innerBox dd h4{
        margin-top: 0;
		margin-left: -0.5em;
        margin-bottom: 2.667vw;
        width: 95%;
        text-align: center;
    }

    #service .innerBox dd p{
        margin-top: 0;
        margin-left: -1em;
        margin-bottom: 2.667vw;
        width: 98%;
        text-align: left;
    }
	
    /** buy **/

    #buy{
        padding: 13.333vw 0 100vw;
        background: url("../../img/bg-howto-sp.png") center top no-repeat;
		background-size:auto 100%; 
    }

    #buy h2{
        margin-top: -1em;
        margin-bottom: 13.333vw;
    }

    #buy h2 span{
        font-size: 0.95rem;
    }

    #buy h3 {
        margin-bottom: 40px;
        font-size: 1.15rem;
        font-weight: 400;
    }

    #buy .buy-contents .innerBox {
        display: block;
        margin: 0 auto;
        width:95%;
    }

    #buy .buy-contents .innerBox dl{
		display: flex;
		width: 100%;
	}
	
	#buy .buy-contents .innerBox dd p{
        font-weight: 700;
    }

    #buy .buy-contents .innerBox dd p span{
        font-size:0.9rem;
        font-weight: 400;
    }

    #buy .innerBox dl{
        width:99%;
        margin-right: 0.267vw;
    }

    #buy .innerBox dl:last-child{
        margin-right: 0;
    }

    #buy .innerBox dt.bg-1{
		width: 40vw;
    }

    #buy .innerBox dt.bg-2{
 		width: 40vw;
   }
    #buy .innerBox dt{
        padding: 6vw 0;
    }
    #buy .innerBox dd{
        margin-left: 0em;
        background: rgb(255,255,255,1.0);
        color:#222;
		width: 50vw;
    }

    #buy .innerBox dd p{
        margin-top: 0em;
        padding: 2.667vw 0 0;
    }

    #buy .colorBox{
		margin-top: 15vw;
        margin-right: 4vw;
        width:100%;
    }

    #buy .colorBox dl{
		display: block !important;
	}
	
	#buy .colorBox dd{
		width:100%;
	}
	
    #buy .colorBox dd p{
        font-size:1.6rem;
        font-weight:700;
    }
	
    /** spec **/



    #spec table.tableLayout-1{
        margin: 0 auto 10.667vw;
        width: 95%;
		font-size: 0.70rem;
    }

    #spec table.tableLayout-1 .lastchild{
        border: 0px;
    }

    #spec table.tableLayout-2{
        margin: 0 auto 10.667vw;
   /*     border-top: 1px solid #a4c0cf;
        border-left: 1px solid #a4c0cf;*/
        width: 95%;
		font-size: 0.70rem;
    }

    #spec table.tableLayout-2 td{
        padding-left: 2vw;
        padding-right: 1vw;
    }
	
	/** newsArea **/
    #newsArea .innerBox h4 {
        padding-top: 8vw;
    }
	
    #newsArea .container ul {
        width: 90%;
    }
	
    #newsArea .container ul li{
        line-height: 1.6;
    }
	
	
    /** contact **/
	#contact{
		background: url("../../img/bg-contact-sp.png") center top no-repeat;
		background-size: 100% auto;
	}

    #contact .innerBox {
        width: 95%;
    }


    #contact .innerBox dt h4{
        font-size: 1.2rem;
    }

    #contact .btnArea{
        padding: 9vw 0 1vw;
    }

    #contact .btnArea p{
        margin-top: -1.25em;
        margin-bottom: 0.75em;
	}

    #contact .btnArea a{
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
    }

    #contact .imgArea{
        margin: 0 auto;
        width: 100%;
    }

    #contact .imgArea img{
        width: 100%;
    }
	
	
}

@media (min-width: 751px) and (max-width: 1023px) {
  
	#kv{
		width: 100vw;
	}
	
/** アニメーション設定 */
    .img-frame{
        width: 100%;
    }
	
/** トグル　**/
	
/*  #newsArea .container .btn-box button {
    font-size: 14px;
    padding: 15px 0;
    letter-spacing: 1px;
  }
  
  #newsArea .container .btn-box button::before,
  #newsArea .container .btn-box button::after {
    width: 25%;
  }
  
  #newsArea .container .btn-box button:hover::before,
  #newsArea .container .btn-box button:hover::after {
    width: 30%;
  }
  
  #newsArea .container .more ul {
    padding: 15px 20px;
    text-align: left;
  }
  
  #newsArea .container .more.appear {
    max-height: 120.667vw;
  }*/

	/** newsArea **/
	#newsArea .container{
		margin: 0 auto;
		width: 98vw;
	}
/*
	
    #newsArea .innerBox h4 {
        padding-top: 8vw;
    }
	
    #newsArea .container ul {
        width: 90%;
    }
	
    #newsArea .container ul li{
        line-height: 1.6;
    }*/

    .news-line dl {
        width: 98vw;
    }

    #newsArea .container .more ul {
        max-width: 98vw;
    }

	
	#feat .container{
		margin: 0 auto;
		width: 98vw;
	}
	
	#feat .container .innerBox{
		display: block;
	}
	
    #feat .innerBox dd {
		margin-left: -10px;
	}
	#feat .innerBox dd p {
        margin: 0 auto 10vw;
        width: 80%;
        text-align: left;
    }
	
    #feat .other_use .innerBox {
        margin: 0 auto;
        width: 100vw;
    }
	
	#advantages .container{
		margin: 0 auto;
		width: 98vw;
	}
	
    #advantages .innerBox {
        display: block;
        width: 100%;
    }
	
    #advantages .innerBox dl,
	#advantages .innerBox dl:last-child{
        display: flex;
        margin: 0 auto 30px;
        width: 550px;
        text-align: left;
    }
	
	#service .container{
		margin: 0 auto;
		width: 98vw;
	}
	
    #service .innerBox {
		display:block;
	}
	
    #service .innerBox dd {
		margin-left: -10px;
	}
	
	#service .innerBox dd p {
        margin: 0 auto 10vw;
        width: 62%;
        text-align: center;
    }
	
    #buy {
        padding: 10vw 0;
    }
	
	#buy .container{
		margin: 0 auto;
		width: 98vw;
	}
	
    #buy .buy-contents .innerBox {
        display: block ;
        margin: 0 auto;
        width: 68vw;
    }
	
    #buy .innerBox dl {
        display: flex;
        width: 68vw;
        margin: 0 auto 1vw;
    }
	#buy .innerBox dt.bg-1 {
        width: 34vw;
        background: #0068b7;
    }
	#buy .innerBox dd {
        margin-left: 0em;
        background: rgb(255, 255, 255, 1.0);
        color: #222;
        width: 34vw;
    }
	
    #buy .innerBox dl:last-child {
        display: flex;
        width: 68vw;
        margin: 0 auto 8vw;
    }
	#buy .innerBox dl:last-child dt.bg-1 {
        width: 34vw;
        background: #0068b7;
    }
	#buy .innerBox dl:last-child dd {
        margin-left: 0em;
        background: rgb(255, 255, 255, 1.0);
        color: #222;
        width: 34vw;
    }
	
    #buy .innerBox dt {
        padding: 20px 0;
        width: 34vw;
    }
	

    #buy .innerBox .colorBox dl:first-child {
        display: block;
        width: 68vw;
        margin: 0 auto 8vw;
    }
	
    #buy .innerBox .colorBox dt.bg-3,
    #buy .innerBox .colorBox dt.bg-4,
    #buy .innerBox .colorBox dt.bg-5{
        width: 68vw;
    }
	
    #buy .innerBox .colorBox dl:first-child dd {
        width: 68vw;
    }
	
	#spec .container{
		margin: 0 auto;
		width: 98vw;
	}

    #spec table.tableLayout-1 {
        margin: 0 auto 10vw;
        width: 90vw;
    }
	
    #spec table.tableLayout-2 {
        margin: 0 auto 10vw;
        width: 90vw;
    }
	
	#contact .container{
		margin: 0 auto;
		width: 98vw;
	}

}