@charset "UTF-8";

/* ===== 共通 ===== */

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.cf:before,.cf:after {content:"";display:table;}
.cf:after {clear:both;}
.cf {*zoom:1;}

body{
	margin: 0;
	padding: 0;
	color: #333;
	background-attachment: fixed;
	background-size: cover;
	font-family: "Helvetica Neue",
    Arial, 
    "Hiragino Kaku Gothic ProN", 
    "Hiragino Sans", 
    Meiryo, 
    sans-serif;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
	letter-spacing: 0.3px;
}
.clearfix{
	clear:both;
	display: inline-table; 
}
a {
	color: #222;
	position: relative;
}
p{
	padding:0;
	margin:0;
}
figure{
	padding: 0;
	margin: 0;
}
figcaption{
	color:grey;
	font-size:100%;
	margin-top:3%;
	text-align: center;
}

	/* SNS */
ul.sns {
  width: 15%;
  margin: 1% auto;
  padding: 0;
  display: flex;
  justify-content: center;
}
ul.sns li {
  list-style: none;
  margin-right: 5%;
  width: 20%;
  padding: 0;
}
ul li a {
  text-decoration: none;
}
ul.sns li img {
  width: 100%;
}
@media screen and (max-width: 960px) {
ul.sns{
	width:50%;
	margin-bottom:15px;
}
}


	/* ナビ 下 */

footer{
	background-color: #434343;
	background-image: url("../images/cartback.png");
	margin: 40px auto 0;
	background-repeat: no-repeat;
	background-position: right center;
	color:#c3c3c3;
	font-size:90%;
	height:auto;
	padding:0;
}
footer h5{
	font-size:18px;
	margin:5px 0 5px;
  display: flex;
  align-items: center; /* 垂直中心 */
	color:#fff;
}

footer h5:before {
  border-top: 1px solid;
  content: "";
  width: 0.8em; /* 線の長さ */
  margin-right: 5px;
}

#footer_in{
	margin: 0 auto;
	width: 1300px;
}
footer nav.nav-footer{
	padding:3% 0 0% 0;
	width: 100%;

}
footer ul li{
	list-style:none;
	margin:2% 0;
}
footer ul li a{
	color:#c3c3c3;
	text-decoration:none;
}
footer ul li a:hover {
    color: #fff ;
}
footer div.title{
	background:#242424;
	color:#FFF;
	padding:1.5%;
	text-align:center;
	border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}
footer div.col_logo{
	float:left;
	width: 20%;
	margin-right: 2%;
}
footer div.col_logo img{
	width:100%;
}
footer div.col{
	width: calc(100%/5);
}
footer div.col_1{
	float:left;
	padding: 0;
	margin: 0;
}
footer div.col_2{
	float:left;
	margin: 0;
}
footer div.col_3{
	float:left;
	text-align:center;
	margin: 0;
}
footer div.col_3 a{
	color:#FFF;
	text-decoration:none;
}
footer div.col_3 a:hover {
    opacity:0.5;
}
footer div.btn_price{
	background-color: #0060F4;
    background-image: url(../img/common/ico_cart.png); 
	background-repeat:no-repeat;
	background-position:10px;
	border: 1px #FFFFFF solid;
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
	padding:15px 10px 16px 30px;
	margin: 0 0 10px;
	font-size:110%;
	letter-spacing:-0.05em;
}
footer div.btn_catalog{
	background: url('../img/common/ico_pdf.png') no-repeat 10px;
	border: 1px #FFFFFF solid;
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
	padding:15px 10px 16px 30px;
	margin: 0 0 10px;
	font-size:90%;
	letter-spacing:-0.05em;
}
footer div.btn_contact{
	background: url('../img/common/ico_mail.png') no-repeat 10px;
	border: 1px #FFFFFF solid;
	border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
	padding:17px 10px 17px 30px;
	font-size:90%;
}

@media screen and (max-width: 1300px) {
#footer_in{
	width: 98%;
}
}
@media screen and (max-width: 960px) {
footer div.btn_price{
	background-color: #0060F4;
    background-image: url(../img/common/ico_cart.png); 
	background-repeat:no-repeat;
	background-position:10px;
	height:40px;
	padding:20px 10px 37px 10px;
	margin:0;
}

footer div.btn_catalog{
	background: none;
	height:40px;
	padding:10px 10px 10px 10px;
	letter-spacing:-0.05em;
}
footer div.btn_contact{
	height:30px;
	padding:20px 10px 37px 10px;
	margin-top: -4%;
}
}
@media only screen and (max-width: 736px){
footer div.btn_catalog{
	height:30px;
	padding:20px 10px 37px 10px;
}
}
footer ul.sns{
	margin:5% auto;
	display: flex;
	justify-content: center;
}
footer ul.sns li{
	list-style:none;
	margin-right:5%;
}
footer p.copy{
	font-size:80%;
	opacity:0.8;
	color:#FFF;
	text-align:center;
	margin:0 auto 3%;
	width:100%;
}
footer p.copy a{
	color:#FFF;
}

@media screen and (max-width: 960px) {
footer div.col_logo img{
	display:none;
}
footer div.col_1{
	float:left;
	width: 28%;
	margin-right: 1%;
}
footer div.col_2{
	float:left;
	width: 25%;
	margin-right: 1%;
}
footer div.col_3{
	float:left;
	width: 18%;
	margin-right: 1%;
	text-align:center;
}
#footer_in{
	width: 100%;
}
}
@media only screen and (max-width: 736px){
footer{
	height:100%;
	width:100%;
	margin:0 auto;
	display:block;
	clear:both;
	padding-bottom: 10%;
}
footer nav.nav-footer{
	clear:both;
	display:block;
	width:90%;
	height:100%;
	margin:0 auto;
}
footer div.col_logo{
	text-align:center;
}
footer div.col_logo img{
	width: 300%;
}
footer div.title{
	width: 95%;
	margin:1% auto;
	display:block;
	clear;both;
}
footer div.col_1{
	width: 100%;
}
footer div.col_2{
	width: 100%;
}
footer div.col_3{
	width: 100%;
}
}



	/* サブページ */
#title{
	color:#fff;
	margin:0 0 40px 0;
}
#title_back {
	background: url('../img/func_bk.jpg') no-repeat 20px;
    background-position:center center;
    background-size:cover;
    width:100%;  
	height: 320px;
}

#title_txt{
	color:#fff;
	background:#a31716;
	width:700px;
	padding: 20px 30px 30px;
	margin:-120px 0 0 80px;
}
#title_txt h2{
	font-size:2.2rem;
	margin:10px 0;
  display: flex;
  align-items: center; /* 垂直中心 */
}

#title_txt h2:after {
  border-top: 1px solid;
  content: "";
  width: 2em; /* 線の長さ */
  margin-left: 20px;
}

h1#main_title{
	margin:110px 0 40px 0;
	text-align:center;
}

@media only screen and (max-width: 736px){
#title_txt h2{
	font-size:1.8rem;
}

h1#main_title {
  margin: 50px 0 40px 0;
}
#title{
	margin:0 0 4% 0;
}
#title_txt {
  width: 95%;
  margin: -150px 0 0 0;
}
}


.video_box_top{
	margin:20px 0 50px;
}
.video_box_top img:hover{
	opacity:0.7;
}

@media all and (max-width: 767px) {
.video_box_top{
	width:96%;
}
.video_box_top img{
	width:100%;
}
}