@charset "utf-8";

/* top mainimage
--------------------------------------------------------------*/
.mainimage{
  height:210px;
  position:relative;
}
.mainimage .image-item{
  display:flex;
  justify-content:space-between;
}
.mainimage .image-item div{
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  height:210px;
  width:25%;
}
.mainimage .image-item .image01{background-image:url(../img/top/mainimage01.jpg);}
.mainimage .image-item .image02{background-image:url(../img/top/mainimage02.jpg);}
.mainimage .image-item .image03{background-image:url(../img/top/mainimage03.jpg);}
.mainimage .image-item .image04{background-image:url(../img/top/mainimage04.jpg);}
.mainimage .catch{
  height:150px;
  width:100%;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}
.mainimage .catch .catch-bg{
  position:absolute;
  height:100%;
  width:100%;
  mix-blend-mode:multiply;
  background-color:rgba(155,213,245,.5);
}
.mainimage .catch .catch-text{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  text-align:center;
  width:100%;
}
.mainimage .catch h1{
  font-size:3.8rem;
  font-weight:bold;
  line-height:1.5;
  color:#666;
  text-shadow:
	0px 0px 1px #fff, 0px 0px 2px #fff,
	0px 0px 3px #fff, 0px 0px 4px #fff,
	0px 0px 5px #fff, 0px 0px 6px #fff,
	0px 0px 7px #fff, 0px 0px 8px #fff,
	0px 0px 9px #fff, 0px 0px 10px #fff;
}
@media only screen and (max-width:768px) {
  .mainimage{margin-top:90px;}
  .mainimage,
  .mainimage .image-item div{height:24vh;}
  .mainimage .catch{height:16vh;}
  .mainimage .catch h1{font-size:4.5vw;}
}
@media only screen and (max-width:480px) {
  .mainimage .catch h1{font-size:8vw;}
}


/* common
--------------------------------------------------------------*/
.btn{
  width:500px;
  margin:0 auto;
}
.btn a{
  display:block;
  width:500px;
  height:50px;
  line-height:50px;
  text-align:center;
  text-decoration:none;
  color:#fff;
  font-weight:bold;
  font-size:2.4rem;
  position:relative;
  z-index:0;
}
.btn a::before,
.btn a::after{
  width:100%;
  height:100%;
  content:"";
  position:absolute;
  left:0;
}
.btn a::before{
  z-index:-1;
  transition:0.5s;
  background: -moz-linear-gradient(left, #add3e7 0%, #70b1e0);
  background: -webkit-linear-gradient(left, #add3e7 0%, #70b1e0);
  background: linear-gradient(to right, #add3e7 0%, #70b1e0);
}
.btn a::after{
  z-index:-2;
  background: -moz-linear-gradient(right, #add3e7 0%, #70b1e0);
  background: -webkit-linear-gradient(right, #add3e7 0%, #70b1e0);
  background: linear-gradient(to left, #add3e7 0%, #70b1e0);
}
.btn a:hover::before{opacity:0;}
.btn a .pdf::before{
  content:url(../img/icon_doc.svg);
  width:36px;
  display:inline-block;
  top:6px;
  position:relative;
  vertical-align:middle;
}
h2{
  text-align:center;
  font-size:3.2rem;
  color:#8bc0dd;
}
@media only screen and (max-width:520px) {
  .btn,
  .btn a{width:100%;}
  .btn a{
	height:80px;
	line-height:80px;
  }
}
@media only screen and (max-width:480px) {
  .btn a{font-size:5vw;}
}


/* price area
--------------------------------------------------------------*/
.price-area{margin:100px auto 0;}
.price-area h2.price-h2{font-size:2.4rem;}
/* basic price */
.basic-price{
  background:-moz-linear-gradient(left, #8bc0dd, #318fd2);
  background:-webkit-linear-gradient(left, #8bc0dd, #318fd2);
  background:linear-gradient(to right, #8bc0dd, #318fd2);
  width:520px;
  padding:50px 90px;
  margin:auto;
  color:#fff;
  font-weight:bold;
  font-size:2.4rem;
}
.basic-price dl{
  display:flex;
  flex-wrap:wrap;
}
.basic-price dl dt,
.basic-price dl dd{margin:5px 0;}
.basic-price dl dd{margin-left:1em;}
/* price table */
.price-area .price-table{
  margin:50px auto 0;
  width:600px;
  font-size:1.8rem;
}
.price-area .price-table table{
  border-top:solid 1px #666;
  border-left:solid 1px #666;
}
.price-area .price-table table th,
.price-area .price-table table td{
  border-right:solid 1px #666;
  border-bottom:solid 1px #666;
}
.price-area .price-table table td{
  text-align:center;
}
.price-area .price-table table thead th{
  background-color:#f6f6f6;
}
/* price */
.price-area .price{
  width:500px;
  margin:30px auto 0;
}
.price-area .price ul{margin-bottom:30px;}
.price-area .price ul li{
  display:flex;
  justify-content:space-between;
}
.price-area .price ul li .type,
.price-area .price ul li .dot,
.price-area .price ul li .yen{font-weight:bold;}
.price-area .price ul li .type{color:#666;}
.price-area .price ul li .yen{text-align:right; color:#f00;}
.price-area .price ul li .yen::before{
  content:'・・・・・・・・';
  color:#666;
  margin-right:1em;
}
.price-area .price ul li.other{margin-top:10px;}
@media only screen and (max-width:750px) {
  .basic-price{
    width:calc(90% - 140px);
    padding:50px 70px;
	text-align:center;
  }
  .basic-price dl{display:block;}
  .basic-price dl dt{
    background-color:rgba(255,255,255,.1);
	border:solid 1px #fff;
	padding:5px 10px;
  }
  .basic-price dl dt,
  .basic-price dl dd{margin:15px 0;}
}
@media only screen and (max-width:650px) {
  .price-area .price-table{
    width:90%;
    font-size:1.6rem;
  }
}
@media only screen and (max-width:550px) {
  .basic-price{
    width:calc(90% - 100px);
    padding:30px 50px;
  }
  .price-area .price{width:90%;}
  .price-area .price ul li .yen::before{
	content:'・・・・・・・';
	color:#666;
	margin-right:.5em;
  }
}
@media only screen and (max-width:510px) {
  .price-area .price ul li .yen::before{content:'・・・・・・';}
}
@media only screen and (max-width:500px) {
  .price-area .price ul li .yen::before{content:'・・・・・';}
}
@media only screen and (max-width:480px) {
  .price-area h2.price-h2{font-size:5.5vw;}
  .basic-price{
    width:calc(90% - 60px);
    padding:10px 30px;
	font-size:2.0rem;
  }
  .price-area .price ul li .yen::before{content:'・・・・';}
}
@media only screen and (max-width:460px) {
  .price-area .price ul li .yen::before{content:'・・・';}
}
@media only screen and (max-width:450px) {
  .price-area .price ul li .yen::before{content:'';}
}
@media only screen and (max-width:385px) {
  .price-area .price ul li{display:block;}
  .price-area .price ul li .yen::before{content:'・・・・・・・・・・・';}
}


/* order area
--------------------------------------------------------------*/
.order-area{
  margin:100px auto 0;
  width:600px;
}
.order-area h2{margin-bottom:20px;}
.order-area .contact{
  margin-top:30px;
  margin-bottom:30px;
  font-weight:bold;
  text-align:center;
  color:#666;
}
.order-area .contact .tel{font-size:4.8rem;}
.order-area .contact .name{font-size:2.0rem;}
.order-area .contact .email{
  font-size:2.4rem;
  margin-top:30px;
}
.order-area .order-link{
  display:flex;
  justify-content:space-between;
}
.order-area .order-link .btn{
  width:48%;
  margin:0;
}
.order-area .order-link .btn a{width:100%;}
@media only screen and (max-width:650px) {
  .order-area{width:500px;}
  .order-area .order-link{display:block;}
  .order-area .order-link .btn{width:100%;}
  .order-area .order-link .btn:not(:first-child){margin-top:20px;}
}
@media only screen and (max-width:550px) {
  .order-area{width:90%;}
}
@media only screen and (max-width:480px) {
  .order-area .contact .tel{font-size:10vw;}
}


/* order area address
--------------------------------------------------------------*/
.order-area.address{
  width:520px;
}
.order-area.address .recommend{margin:30px 0;}
@media only screen and (max-width:650px) {
  .order-area.address{width:500px;}
}
@media only screen and (max-width:550px) {
  .order-area.address{width:90%;}
}


/* contact area
--------------------------------------------------------------*/
.contact-area{
  margin:100px auto 0;
  width:700px;
}
.contact-area .contact-box{
  border:solid 1px #ccc;
  padding:60px 100px;
  margin-top:30px;
  box-shadow: 3px 3px 5px rgba(0,0,0,.2);
}
.contact-area .contact-box .item-area:not(:first-child){margin-top:30px;}
.contact-area .contact-box .item-area .required{
  color:#fff;
  background: -moz-linear-gradient(left, #add3e7 0%, #70b1e0);
  background: -webkit-linear-gradient(left, #add3e7 0%, #70b1e0);
  background: linear-gradient(to right, #add3e7 0%, #70b1e0);
  font-size:1.4rem;
  padding:1px 10px;
  margin-left:.5rem;
}
.contact-area .contact-box .item{margin-top:10px;}
.contact-area .confirm-text{
  text-align:center;
  margin-top:30px;
}
.contact-area .thanks-box{text-align:center;}
.contact-area .thanks-box .title{
  font-weight:bold;
  font-size:2.4rem;
  color:#666;
  margin-bottom:10px;
}
.contact-area .thanks-box .company-box{
  font-weight:bold;
  color:#666;
  margin:30px auto 50px;
  padding:30px 50px;
  border:solid 1px #ddd;
  display:inline-block;
}
.contact-area .thanks-box .company-box .company{font-size:2.0rem;}
.contact-area .thanks-box .company-box .phone{font-size:1.8rem;}
.contact-area .thanks-box .company-box .staff{font-weight:normal;}
.contact-area .thanks-box .company-box .email{font-size:1.8rem;}

.contact-area .contact-box .item-area table{width:100%;}
.contact-area .contact-box .item-area table th,
.contact-area .contact-box .item-area table td{display:block;}
.contact-area .contact-box .item-area table th{
  text-align:left;
  font-size:1.8rem;
  color:#666;
  margin-bottom:10px;
}
.contact-area .contact-box .item-area table td{margin-bottom:30px;}
.contact-area .contact-box .item-area input,
.contact-area .contact-box .item-area textarea,
.contact-area .contact-box .item-area select{/* reset */
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  outline: none;
  font-family:"游ゴシック Medium", "Yu Gothic UI", "Yu Gothic Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meriryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
.contact-area .contact-box .item-area input,
.contact-area .contact-box .item-area textarea,
.contact-area .contact-box .item-area select{
  border:solid 1px #ccc;
  border-radius:3px;
  padding:10px 15px;
  font-size:1.6rem;
  box-sizing:border-box;
  transition:all .3s;
}
.contact-area .contact-box .item-area input:hover,
.contact-area .contact-box .item-area textarea:hover,
.contact-area .contact-box .item-area input:focus,
.contact-area .contact-box .item-area textarea:focus{
  box-shadow:0 0 7px #add3e7;
  border:solid 1px #70b1e0;
}
.contact-area .contact-box .item-area ::placeholder{color:#ccc;}
.contact-area .contact-box .item-area ::-webkit-input-placeholder{color:#ccc;}
.contact-area .contact-box .item-area ::-moz-placeholder{color:#ccc;}
.contact-area .contact-box .item-area ::-ms-input-placeholder{color:#ccc;}
.contact-area .contact-box .item-area :-ms-input-placeholder{color:#ccc;}
.contact-area .contact-box .item-area :focus::placeholder {color:transparent;}
.contact-area .contact-box .item-area :focus::-webkit-input-placeholder {color:transparent;}
.contact-area .contact-box .item-area :focus:-moz-placeholder{color:transparent;}
.contact-area .contact-box .item-area :focus::-moz-placeholder{color:transparent;}
.contact-area .contact-box .item-area input:-webkit-autofill{box-shadow:0 0 0 1000px #fff inset;}
.contact-area .contact-box .item-area input[type="text"]{width:100%;}
.contact-area .contact-box .item-area input[type="tel"]{width:50%;}
.contact-area .contact-box .item-area input[type="email"]{width:100%;}
.contact-area .contact-box .item-area textarea{
  resize:vertical;
  width:100%;
  min-height:7em;
}
.contact-area .contact-box .item-area input[type="submit"]{
  border:none;
  border-radius:0;
  background-color:transparent;
  cursor:pointer;
  width:100%;
  height:100%;
  padding:0;
  vertical-align:baseline;
  color:#fff;
  font-weight:bold;
  font-size:2.4rem;
}
.contact-area .contact-box .item-area input[type="submit"]:hover,
.contact-area .contact-box .item-area input[type="submit"]:focus{
  box-shadow:none;
}
.contact-area .contact-box .item-area .button{
  display:block;
  margin:0 auto;
  width:250px;
  height:50px;
  line-height:50px;
  text-align:center;
  text-decoration:none;
  color:#fff;
  font-weight:bold;
  font-size:2.4rem;
  cursor:pointer;
  border:none;
  position:relative;
  z-index:0;
}
.contact-area .contact-box .item-area .button::before,
.contact-area .contact-box .item-area .button::after{
  width:100%;
  height:100%;
  content:"";
  position:absolute;
  left:0;
}
.contact-area .contact-box .item-area .button::before{
  z-index:-1;
  transition:0.5s;
  background: -moz-linear-gradient(left, #add3e7 0%, #70b1e0);
  background: -webkit-linear-gradient(left, #add3e7 0%, #70b1e0);
  background: linear-gradient(to right, #add3e7 0%, #70b1e0);
}
.contact-area .contact-box .item-area .button::after{
  z-index:-2;
  background: -moz-linear-gradient(right, #add3e7 0%, #70b1e0);
  background: -webkit-linear-gradient(right, #add3e7 0%, #70b1e0);
  background: linear-gradient(to left, #add3e7 0%, #70b1e0);
}
.contact-area .contact-box .item-area .button:hover::before{opacity:0;}
.contact-area .contact-box .item-area .button:not(:last-child){margin-bottom:10px;}
@media only screen and (max-width:768px) {
  .contact-area{
	margin:100px auto 0;
	width:90%;
  }
}
@media only screen and (max-width:480px) {
  .contact-area .contact-box{
	padding:30px 20px;
  }
}