/* CSS Document */

/*common ------------------------------------------------------------*/

main h1{
  margin-top:20px;
  height:184px;
  background:#f7f7f7; 
  position:relative;
}

main{
  color: #333; 
}

main h1 > span{
  display:block;
  width:980px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) ;
  font-size: 36px;
  text-align: left;
}

.common_ttl01{
	font-size:26px;
	color:#333333;
	line-height:1.2;
	position:relative;
  margin-bottom:12px;
}

.common_ttl01:before,
.common_ttl01:after{
	content:"";
	display:block;
	background:#a4a4a4;
	width:100%;
	height:2px;
	position:absolute;
	left:0;
	bottom:-12px;	
}

.common_ttl01:after{
	background:#ff0044;
	width:200px;	
}

.common_inner{
  width:980px;
  margin:0 auto; 
}

.common_ttl02{
	font-size:23px;
	color:#333333;
	padding-left:15px;
	border-left: solid 6px #ff0044;
	line-height:1.2;
	position:relative;
	padding-top:2px;
  margin-bottom:8px;
}

.common_ttl02:before{
	content:"";
	display:block;
	background:#a4a4a4;
	width:980px;
	height:1px;
	position:absolute;
	left:-8px;
	bottom:-9px;
}

@media screen and (max-width: 1050px) {
  
  main h1{
    margin-top:6vw;
    height:45vw;
  }
  
  main h1 span{
    width:86.6vw;
    box-sizing:border-box;
    position:absolute;
    font-size: 7.4vw;
  }
  
  main h1 span > span{
    position:relative;
    left:auto;
    top:auto;
    display:block;
    transform:none;
    font-size:4.26vw; 
  }
  
  .common_inner{
    width:86.6vw;
    margin:0 auto; 
  }
  
  .common_ttl01{
		font-size:5.06vw;
		margin-bottom:4.3vw;
		color:#333333;
	}
  
	.common_ttl01:before,
	.common_ttl01:after{
		content:"";
		display:block;
		background:#a4a4a4;
		width:100%;
		height:0.53vw;
		position:absolute;
		left:0;
		bottom:-4vw;	
	}
	
	.common_ttl01:after{
		background:#ff0044;
		width:26.6vw;	
	}
  
  .common_ttl02{
		font-size:4vw;
		padding-left:2vw;
		border-left: solid 1.3vw #ff0044;
		line-height:1.2;
		position:relative;
		padding-top:1vw;
	}
	
	
	.common_ttl02:before{
		content:"";
		display:block;
		background:#a4a4a4;
		width:90.6vw;
		height:0.26vw;
		position:absolute;
		left:-1.3vw;
		bottom:-2vw;
	}
}


/*/common ------------------------------------------------------------*/


/*top ------------------------------------------------------------*/

.top_block01{
  margin-top:60px; 
}

.top_block01 h2 span{
  display:block;
  padding-left:55px;
  position:relative;
}

.top_block01 h2 span:before{
  content:"";
  display:block;
  background:url(../images/top/ttl_icon.svg) no-repeat left top;
  background-size:100% auto;
  width:40px;
  height:37px;
  position:absolute;
  left:0;
  top:-2px;
}

.top_block01 .box{
  margin-top:30px;
  background:#f7f7f7;
  padding:50px 50px 10px; 
}

.top_block01 .box ul{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap; 
}

.top_block01 .box ul li{
  width:420px; 
  margin-bottom:40px;
}

.top_block01 .box ul li a{
  display:block;
  height:192px;
  border:solid 1px #a5a5a5;
  background:#FFF;
  box-sizing:border-box;
  text-decoration:none; 
  color:#333333;
  position:relative;
}


.top_block01 .box ul li a h3{
  height:48px;
  background:#fff3f2;
  padding:13px 0 0 20px;
  font-size:17px;
  box-sizing:border-box;
  
}

.top_block01 .box ul li a .txt{
  padding:17px 20px 50px;
  display:block;
  font-size: 14px;
  line-height: 24px;
  text-align: left;
}

.top_block01 .box ul li a .link{
  display:block; 
  width: 130px;
  height: 26px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid #c7c7c7;
  box-sizing:border-box;
  position:absolute;
  right:20px;
  bottom:20px;
  text-align:center;
  font-size: 12px;
  color: #f04;
  padding-top:4px;
  transition: all 0.4s;
  line-height: 1.4em;
}

.top_block01 .box ul li a:hover .link{
  background:#f04;
  color:#FFF;
}

.top_block01 .box ul li a .link span{
   position:absolute;
   right:10px;
   top:30%;
   transform:translateY(-50%); 
}

.top_block01 .box ul li a .link .icon_right {
  fill: none;
  stroke: #f04;
  transition: all 0.4s;
}

.top_block01 .box ul li a:hover .link .icon_right {
  stroke: #FFF;
}


@media screen and (max-width: 1050px) {
  .top_block01{
    margin-top:12vw; 
  }
  
  .top_block01 h2 span{
    padding-left:8vw;
  }
  
  .top_block01 h2 span:before{
    width:6.13vw;
    height:5.6vw;
    top:-0vw;
  }
  
  .top_block01 .box{
    margin-top:0vw;
    background:#f7f7f7;
    padding:6.6vw; 
  }
  
  
  .top_block01 .common_ttl01{
    margin-bottom:10vw; 
  }
  .top_block01 .box ul{
    display:block;
  }
  
  .top_block01 .box ul li{
    width:100%; 
    margin-bottom:4vw;
  }
  
  .top_block01 .box ul li:last-child{
    margin-bottom:0; 
  }
  
  .top_block01 .box ul li a{
    height:auto;
    border:solid 0.26vw #a5a5a5;
  }
  
  
  .top_block01 .box ul li a h3{
    height:12.8vw;
    padding:4vw 0 0 4vw;
    font-size:4.53vw;
    box-sizing:border-box;
    
  }
  
  .top_block01 .box ul li a .txt{
    padding:4.5vw 5.3vw 14vw;
    font-size: 3.73vw;
    line-height: 6.4vw;
  }
  
  .top_block01 .box ul li a .link{
    width: 34.6vw;
    height: 6.93vw;
    border-radius: 3.46vw;
    border: 0.26vw solid #c7c7c7;
    right:3.46vw;
    bottom:3.46vw;
    font-size: 3.2vw;
    padding-top:1vw;
  }
  
  .top_block01 .box ul li a .link span{
     position:absolute;
     right:2.6vw;
  }
  
  .top_block01 .box ul li a .link span svg{
    width:0.984vw;
    height:1.704vw;
  }
  
}


/*/top ------------------------------------------------------------*/

/*mailorder ------------------------------------------------------------*/

.mail_block01{
  margin-top:35px; 
}

.mail_block01 .txt01{
  font-size: 16px;
  line-height: 28px;
  text-align: left;
}

.mail_block01 .txt01 span{
  font-size:12px;   
}

.mail_block01 .txt01 a{
  display:block;
  width: 500px;
  height: 70px;
  background: #fff;
  border: 1px solid #ff0144;
  box-sizing:border-box;
  text-decoration:none;
  margin:23px auto 0;
  border-radius:35px;
  text-align:center;
  font-size: 23px;
  color: #ff0144;
  font-weight:bold;
  padding-top:21px;
  position:relative;
  transition: all 0.4s;
}

.mail_block01 .txt01 a:hover{
  background:#ff0144;
  color:#FFF;
  border: 1px solid #ff0144;
}

.mail_block01 .txt01 a span{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  right:34px;
  height:34px;
}

.mail_block01 .txt01 a span .mail_right {
  fill: none;
  stroke: #f04;
  stroke-width: 4px;
  transition: all 0.4s;
}

.mail_block01 .txt01 a:hover span .mail_right {
  stroke: #FFF;
}

.mail_block02{
  margin-top:55px; 
}

.mail_block02 h2 span{
  display:block;
  padding-left:50px;
  position:relative;
}

.mail_block02 h2 span:before{
  content:"";
  display:block;
  background:url(../images/mailorder/ttl_icon01.svg) no-repeat left top;
  background-size:100% auto;
  width:42px;
  height:30px;
  position:absolute;
  left:0;
  top:-0px;
}

.mail_block02 .mail_block02_inner{
  margin:40px 0 0 0 ; 
  padding-bottom:20px;
}

.mail_block02 .mail_block02_inner.top{
  margin-top:60px; 
}

.mail_block02 .mail_block02_inner .box{
  margin-top:30px;
  position:relative; 
}

.mail_block02 .mail_block02_inner .box p{
  position:absolute;
  left:370px;
  top:0;
  font-size: 16px;
  line-height: 28px;
}

.mail_block02 .mail_block02_inner .box p a{
  display:block;
  margin-top:10px; 
  width: 130px;
  height: 26px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid #c7c7c7;
  box-sizing:border-box;
  font-size: 12px;
  text-align: left;
  color: #f04;
  text-decoration:none;
  text-align:center;
  position:relative;
  transition: all 0.4s;
  line-height: 2em;
}

.mail_block02 .mail_block02_inner .box p a:hover{
   color: #FFF;
   background:#f04;
   border-color:#f04;
}

.mail_block02 .mail_block02_inner .box p a span{
  position:absolute;
  right:10px;
  top:12%;
  transform:translateY(-50%);
}

.mail_block02 .mail_block02_inner .box p a .icon_right {
  fill: none;
  stroke: #f04;
  transition: all 0.4s;
}

.mail_block02 .mail_block02_inner .box p a:hover .icon_right {
  stroke: #FFF;
}


@media screen and (max-width: 1050px) {
  .mail_block01{
    margin-top:10.6vw; 
  }
  
  .mail_block01 .txt01{
    font-size: 4.26vw;
    line-height: 7.46vw;
    text-align: left;
  }
  
  .mail_block01 .txt01 span{
    font-size:2.93vw;
    display:block;
    line-height:1.7;
    margin-top:1.5vw;  
  }
  
  .mail_block01 .txt01 span > span{
    display:inline-block;
    text-indent:-1em;
    padding-left:1em;
  } 
  
  .mail_block01 .txt01 a{
    width: 100%;
    height: 18.6vw;
    border: 0.26vw solid #ff0144;
    margin:5vw auto 0;
    border-radius:9.3vw;
    font-size: 4.8vw;
    padding-top:5.8vw;
  }
  
  .mail_block01 .txt01 a:hover{
    border: 0.26vw solid #ff0144;
  }
  
  .mail_block01 .txt01 a span{
    right:3.3vw;
    margin-top:-1%;
    height:3.73vw;
  }
  
  .mail_block01 .txt01 a span .mail_right {
    stroke-width: 0.8vw;
  }
  
  .mail_block01 .txt01 a span .mail_right svg{
    height:3.73vw;
    width:2.13vw; 
  }
  
  .mail_block01 .txt01 a:hover span .mail_right {
    stroke: #FFF;
  }
  
  .mail_block02{
    margin-top:12vw; 
  }
  
  .mail_block02 h2 span{
    padding-left:10.6vw;
  }
  
  .mail_block02 h2 span:before{
    width:8.8vw;
    height:6.13vw;
    top:0.7vw;
  }
  
  .mail_block02 .mail_block02_inner{
    margin:13.3vw 0 0 0 ; 
    padding-bottom:0;
  }
  
  .mail_block02 .mail_block02_inner.top{
    margin-top:8vw; 
  }
  
  .mail_block02 .mail_block02_inner .box{
    margin-top:5.3vw;
  }
  
  .mail_block02 .mail_block02_inner .box p{
    position:relative;
    left:auto;
    top:auto;
    font-size: 3.73vw;
    line-height: 6.4vw;
    margin-top:4vw;
  }
  
  .mail_block02 .mail_block02_inner .box p a{
    margin-top:2vw; 
    width: 34.6vw;
    height: 6.93vw;
    border-radius: 3.46vw;
    border: 0.26vw solid #c7c7c7;
    font-size: 3.2vw;
    padding-top:0;
    margin-left:auto;
  }
  
  
  .mail_block02 .mail_block02_inner .box p a span{
    position:absolute;
    right:2.6vw;
    top:14%;
  }
  
  
  .mail_block02 .mail_block02_inner .box p a span svg{
    width:0.96vw;
    height:1.68vw; 
  }
}


/*/mailorder ------------------------------------------------------------*/

/*mailorder ------------------------------------------------------------*/



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


/*/mailorder ------------------------------------------------------------*/