@charset "utf-8";
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse; width:100%;}
fieldset,img{border:0; vertical-align:top;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
del,ins{text-decoration:none;}
section{display:block;}
figure,figcaption{margin:0; padding:0;}
main {display:block;padding:0;margin:0;
}
/*----------------------------------
common
-----------------------------------*/
.w1200 {
    width: 1200px;
    margin: auto;
}
.w1050 {
    width: 1050px;
    margin: auto;
}
.cf:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size: 0.1em;}
.cf	{display:inline-block;zoom:1;}
ul.col {
	letter-spacing:-0.5em;
}
ul.col li {
	display:inline-block;
	vertical-align:top;
	letter-spacing:0.06em;
}
/* \*/
* html .cf	{height:1%;}
.cf	{display:block;}
/* */
a:link,a:visited {
	transition: ease .2s;
	text-decoration:none;
	color:#000;
}
a:hover {
	text-decoration: underline;
    outline:none;
}
a:focus, *:focus { outline:none; }
img {
	max-width: 100%;
    height: auto;
    width /***/: auto;
	backface-visibility:hidden;
-webkit-backface-visibility: hidden;  
}
/*----------------------------
共通
----------------------------*/
body {
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
	font-size: 15px;
	line-height: 31px;
	letter-spacing: 0.04em;
	color: #333333;
	word-wrap: break-word;
    font-weight: bold;
	-moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}
br.sp-only {
    display: none;
}
.w1000 {
    width: 1000px;
    margin: auto;
    position:relative;
}
.inner {
    width: 90%;
    margin: auto;
}


h1 {
    position: absolute;
    right: 105px;
    top:100px;
    z-index: 99;
}
h1 img{
    width: 145px;
}

#head {
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    z-index: 99;
}

#head nav  {
writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode:vertical-rl;
    -webkit-text-orientation: upright;
    text-orientation: upright;
    font-size: 20px;
    letter-spacing: 0.1em;
    background-color: #ff0000;
    padding: 30px;
    margin-left: 27px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
	 max-height: 12em;

    
}
#head nav li {
    position: relative;
    padding-top: 20px;
    line-height: 40px;
}
#head nav li:before {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    z-index: 1;
    content: "";
    top: 0;
    background-color: #fff;
    left: 50%;
    margin-left: -5px;
}
#head nav li a {
    color: #fff;
    text-decoration: none;
}
#head nav li a:hover {
    opacity: 0.8;
}
#sp-btn {
    text-align: center;
    position: fixed;
    left: 15px;
    top: 0px;
    z-index: 999;
    cursor: pointer;
    display:none;
    background-color: #ff0000;
    padding: 20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
#sp-btn p {
    font-size: 11px;
    line-height: 1;
    margin-top: -3px;
}
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 45px;
  height: 27px;
    margin-top: 10px;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #fff;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 12px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

#sp-btn.active .menu-trigger span:nth-of-type(1) {
  -webkit-transform: translateY(12px) rotate(-45deg);
  transform: translateY(12px) rotate(-45deg);
}
#sp-btn.active .menu-trigger span:nth-of-type(2) {
  opacity: 0;
}
#sp-btn.active .menu-trigger span:nth-of-type(3) {
  -webkit-transform: translateY(-12px) rotate(45deg);
  transform: translateY(-12px) rotate(45deg);
}

/* sppc */
.only-pc {
	display: block;
}
.only-sp {
	display: none;
}

@media screen and (max-width: 768px) {
.only-pc {
	display: none;
}
.only-sp {
	display: block;
}
}

@media screen and (max-width:860px){
#sp-btn {
    display: block;
}
#head #global {
    position: fixed;
    left: 0;
    z-index: 99;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: #ff0000;
    -moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
    transform: translateY(-100%);
    transition: ease-in-out .7s;
    -moz-transition: ease-in-out .7s;
    -webkit-transition: ease-in-out .7s;
    -o-transition: ease-in-out .7s;
    -ms-transition: ease-in-out .7s;
}
#head #global.active {
    -moz-transform: translateY(0%);
-webkit-transform: translateY(0%);
-o-transform: translateY(0%);
-ms-transform: translateY(0%);
    transform: translateY(0%);
}
#head nav {
    position: static;
    height: 100%;
    width: 100%;
    padding: 0;
    display: table;
    margin-left: 0;
    writing-mode:inherit;
-ms-writing-mode: inherit;
-webkit-writing-mode: inherit;
-webkit-text-orientation: inherit;
    font-size: 5vmin;
}
#head nav ul {
    display: table-cell;
  vertical-align: middle;
  text-align: center;
  
    
}
#head nav li {
    padding-left: 0px;
    padding-top: 0;
    text-align: center;
    margin-bottom: 4vmin;
}
#head nav li a{
    
}
#head nav li:before {
    display: none;
    }
}
@media screen and (max-width:480px){
br.sp-only {
    display: inherit;
}
#sp-btn {
    padding: 12px;

}
}


.index-load {
    position: absolute;
    animation: index-fadeout 0.4s ease 1;
    opacity: 1;
    display: table;
    width: 400px;
    margin: 25vh auto 0;
    height: 70vh;
    vertical-align: bottom;
	animation-fill-mode: forwards;
	animation-delay: 2.6s;
		left: 0;
    right: 0;
}
.ani {
      vertical-align: middle;
    display: table-cell;
	animation:a00 0.8s ease-out 1;
	animation-fill-mode: forwards;
	 transform-origin: center bottom;
}
.ani01 {
position: absolute;
    top: 68px;
    width: 100%;
    animation: a01 0.4s ease-out 1;
    transform-origin: bottom right;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}
.ani02 {
    position: absolute;
    top: 250px;
    width: 100%;
}

.ani03 {
    position: absolute;
    width: 400px;
    height: auto;
    top: 130px;
    animation: a02 0.6s ease-out 1;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    opacity: 0;
}

@keyframes a00 {
 0%   { transform: rotate(0deg); }
 16%   { transform: rotate(-3deg); }
32%   { transform: rotate(3deg); }
	 48%   { transform: rotate(-3deg); }
	64%   { transform: rotate(3deg); }
	80%   { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
 
@keyframes a01 {
 0%   { transform: rotate(0deg); }
  100% { transform: rotate(30deg); }
}
@keyframes a02 {
 0%   { transform: translate(0px, 0px);
	opacity:0;}
  100% { transform: translate(-220px, -80px);
	opacity:1;}
}
@keyframes a02-768 {
 0%   { transform: translate(0px, 0px);
	opacity:0;}
  100% { transform: translate(-150px, -50px);
	opacity:1;}
}
@keyframes a02-424 {
 0%   { transform: translate(0px, 0px);
	opacity:0;}
  100% { transform: translate(-80px, -30px);
	opacity:1;}
}
@keyframes a03 {
 0%   { transform: rotate(0deg); }
  100% { transform: rotate(30deg); }
}
.index-main {
  opacity: 0;
  animation: index-fadein .8s ease .4s forwards;
  animation-delay: 3.7s
}



@keyframes index-fadein {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@keyframes index-fadeout {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
	
}
@media screen and (max-width:860px){
.index-load {
    width: 280px;
}

.ani01 {
    top: 68px;

}
.ani02 {
    top: 200px;
}

.ani03 {
    width: 280px;
    top: 100px;
	animation: a02-768 0.6s ease-out 1;
	 animation-fill-mode: forwards;
    animation-delay: 1s;
}
	
}
@media screen and (max-width:424px){
.index-load {
    width: 140px;
}
.ani01 {
    top: 68px;

}
.ani02 {
    top: 134px;
}

.ani03 {
    width: 140px;
    top: 95px;
	animation: a02-424 0.6s ease-out 1;
	 animation-fill-mode: forwards;
    animation-delay: 1s;
}
	
}
/*----------------------------------
トップページ
----------------------------------*/
main {
}
#visual {
    height: 100vh;
    position: relative;
    overflow: hidden;
    margin-bottom: 75px;
}
#visual ul {
    margin-left: 55px;
    margin-right: 55px;
    height: 75% !important;
    box-sizing:content-box;
    position: relative;
    margin-top: 55px;
    
}
#visual ul li {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 100%;
    border-radius: 20px;
    width: 100% !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

}
#visual .icon {
    width: 220px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -110px;
    z-index: 68;
}
#visual .scroll {
    position: absolute;
    right: 21px;
    bottom: 27%;
}
#visual .scroll a {
    display: block;
}
#visual .scroll a:hover {
    margin-bottom: -10px;
}
#visual .scroll img {
    width: 10px;
}
#visual .bx-viewport {
    height: 100% !important;
    overflow: inherit;
}
#visual .bx-controls {
    position: absolute;
    right: 16px;
    bottom: 52%;
}
@media screen and (max-width:1024px){
#visual .icon {
    bottom: 100px;

}
}

@media screen and (max-width:860px){
h1 {
    right: 65px;
    top: 65px;
}
h1 img {
    width: 100px;
}
#visual ul {
    margin-left: 35px;
    margin-right: 35px;
    margin-top: 35px;
}
#visual .icon {
    width: 160px;
    margin-left: -80px;
}
#visual ul {
    height: 80% !important;
}
#visual .bx-controls {
    right: 8px;
    bottom: 48%;
}
#visual .scroll {
    right: 12px;
    bottom: 21%;
}
	
#visual .icon {
    bottom: 0px;
}
	
	
}

@media screen and (max-width:424px){
#visual {
    height: 90vh;
    position: relative;
    overflow: hidden;
    margin-bottom: 150px;
}

}
@media screen and (max-width:375px){
#visual {
    height: 88vh;
    position: relative;
    overflow: hidden;
    margin-bottom: 150px;
}

}



#about {
    background-color: #ff0000;
    color: #fff;
    text-align: center;
    
    
}
#about .w1040 {
    max-width: 1160px;
    width: 90%;
    margin: auto;
    position: relative;
    padding-top: 90px;
    padding-bottom: 90px;
    background-image: url("../images/bg_about.svg");
    background-repeat: no-repeat;
    background-position: 83% bottom;
    background-size: 350px;
}
#about p {
    font-size: 25px;
    line-height: 54px;
	    letter-spacing: 0.05em;
}
#about .photo {
    z-index: 1;
    position: absolute;
    width: 240px;
}
#about .photo img {
    border-radius: 7px;
}
#about .photo.pos01 {
    right: -15px;
    top: -60px;
}
#about .photo.pos02 {
    left: -15px;
    bottom: -75px;
}
h2 {
    text-align: center;
    font-size: 62px;
    letter-spacing: 0.03em;
    margin-bottom: 80px;
    font-weight: bold;
}
h2 span {
    display: block;
    font-size: 30px;
    margin-top: 25px;
    letter-spacing: 0.14em;
    
}
#about p br.tb-only {
    display: none;
}
@media screen and (max-width:860px){
#about p {
    font-size: 3.5vmin;
    line-height: 7vmin;

}
#about .photo {
    z-index: 1;
    position: absolute;
    width: 150px;

}
#about .photo.pos01 {
    right: -5px;
}
#about .photo.pos02 {
    left: -5px;
}
#about p br.tb-only {
    display: inherit;
}
}
@media screen and (max-width:480px){
#about p br.tb-only {
}
h2 {
    font-size: 30px;
    margin-bottom: 45px;
}
h2 span {
    font-size: 17px;
    margin-top: 0px;
}
#about p {
    font-size: 17px;
    line-height: 35px;
}
#about .photo {
    width: 130px;
}
#about .photo.pos01 {
    right: 20px;
}
#about .photo.pos02 {
    left: 20px;
}
#about .w1040 {
    padding-top: 160px;
    padding-bottom: 160px;
}
#visual .icon {
bottom: -10px;

}	
	#about .w1040 {
    background-position: 98% bottom;
    background-size: 200px;
}
#merit {
    padding-top: 120px;
    background-position: -50px 35px;
    background-size: 200px;

}	
	
}




#products {
    margin-top: 300px;
    margin-bottom: 75px;
}
#products .visual {
    text-align: center;
    position: relative;
    z-index: 1;
    width: 880px;
    margin: 0 auto -30px;
}
#products .dtl {
background-color: #ff9200;
    padding-top: 90px;
    padding-bottom: 90px;
    text-align: center;
    background-image: url(../images/bg_products.svg);
    background-repeat: no-repeat;
    background-position: center 120px;
    background-size: 1100px;
    font-weight: bold;
}
#products .dtl p {
font-size: 25px;
    line-height: 54px;
	    letter-spacing: 0.05em;
	color: #fff;
}
#products .dtl ul {
    font-weight: 500;
    margin-top: 40px;
}
#products .dtl ul li {
    width: 300px;
    margin-left: 20px;
    margin-right: 20px;
}
#products .dtl ul li img {
    border: #fff 4px solid;
    border-radius: 10px;
}
#products .dtl ul li span {
    display: block;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    margin-top: 5px;
    
}
@media screen and (max-width:860px){
#products {
    margin-top: 240px;
}
#products .dtl p {
font-size: 3.5vmin;

line-height: 7vmin;

}
	#products .visual {
    width: 100%;
 
}	
	#products .dtl {
    background-size: 90%;
}
	#merit {
    background-position: -80px 25px;
    background-size: 60%;
}
}
@media screen and (max-width:480px){
#products {
    margin-top: 150px;

}
#products .dtl p {
    font-size: 17px;
    line-height: 35px;
}
#products .dtl ul li {
    margin-bottom: 25px;
}
#products .dtl ul li:last-child {
    margin-bottom: 0px;
}
}
#btn {
    margin-bottom: 250px;
}
#btn a {
    font-size: 26px;
    font-weight: bold;
    color: #ff0000;
    border: #ff0000 4px solid;
    display: block;
    max-width: 460px;
    text-align: center;
    border-radius: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
    position: relative;
    background-color: #fff;
    margin: auto;
	letter-spacing: 0.08em;
}
#btn a:after {
    position: absolute;
    z-index: -1;
    background-image: url("../images/bg_btn.png");
    right: -10px;
    bottom: -10px;
    content: "";
    top: 10px;
    left: 10px;
    background-size: 4px;
    border-radius: 20px;
    
}
#btn a:hover {
    color: #fff;
    background-color: #ff0000;
	text-decoration: none;

}
@media screen and (max-width:480px){
	h1 img {
    width: 85px;
}
#btn {
    margin-bottom: 140px;
}
#btn a {
    font-size: 20px;
    max-width: 300px;
}
}
#merit {
    background-color: #ff0000;
    padding-top: 120px;
    padding-bottom: 100px;
    background-image: url("../images/bg_merit.svg");
    background-repeat: no-repeat;
    background-position: -240px 125px;
    background-size: 820px;
    margin-bottom: 210px;
}
.w960 {
    max-width: 1068px;
    margin: auto;
    width: 90%;
}
#merit h2 {
    color: #fff;
}
#merit .blk {
    background-color: #fff;
    border-radius: 25px;
    padding: 35px;
    line-height: 27px;
    border: #ff0000 6px solid;
    position: relative;
    padding-top: 0;
    z-index: 2;
}
#merit .blk p {
    font-size: 16px;
    padding-top: 10px;
    color: #666;
    letter-spacing: 0.008em;
    line-height: 27px;
}
#merit .line-wrap {
    position: relative;
}
#merit .bg-line {
    background-image: url("../images/bg_merit_blk.png");
    background-size: 9px;
    content: "";
    z-index: -1;
    right: -12px;
    top:25px ;
    bottom: -12px;
    left: 12px;
    position: absolute;
    z-index: 1;
    border-radius: 25px;
}
#merit .blk:before {
    position: absolute;
    width: 330px;
    content: "";
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    background-color: #fff;
    left: 50%;
    margin-left: -165px;
    top: -35px;
    height: 35px;
    border: #ff0000 6px solid;
    z-index: 1;
}
#merit .blk h3 {
    color: #ff0000;
    font-weight: bold;
    font-size: 34px;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    background-color: #fff;
    z-index: 2;
    
}
#merit .blk h3 span {
    position: relative;
}
#merit .blk h3 span:after {
    position: absolute;
    height: 2px;
	    top: 42px;
    left: 0;
    right: 0;
    bottom: 5px;
    content: "";
    background-color: #ff0000;
	    top: 42px;
}
#merit .blk li {
    width: 29.3333%;
    margin-left: 2%;
    margin-right: 2%;
    letter-spacing: 0.008em;
    line-height: 27px;
}
#merit .blk li dt {
    font-size: 24px;
    margin-top: 25px;
    color: #ff0000;
    margin-bottom: 10px;
}
#merit .blk li dt img {
    width: 24px;
    margin-right: 2px;
	margin-top: 1.2px;
}
#merit .blk li dd {
    color: #666666;
    font-size: 16px;
}
#merit .blk p {
    color: #666666;
    font-size: 16px;
	padding-top: 10px;
}

#merit .plus {
    text-align: center;
    margin-top: 30px;
margin-bottom: 40px;
}
#merit .plus img {
    width: 50px;
}
#merit .redu .img {
    float: left;
    width: 210px;
    margin-right: 50px;
}
@media screen and (max-width:860px){
#merit {
    margin-bottom: 180px;

}
	
}
@media screen and (max-width:480px){
#merit {
    padding-top: 70px;
    padding-bottom: 70px;
    margin-bottom: 100px;
}
	#merit {
  
    background-image: url(../images/bg_merit.svg);
    background-repeat: no-repeat;
    background-position: -40px 15px;
    background-size: 200px;

}
#merit .blk li {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    display: block;
    margin-bottom: 20px;
}
#merit .blk li:last-child {
    margin-bottom: 0px;
}
#merit .blk h3 {
font-size: 26px;
}
#merit .blk::before {
    width: 238px;
margin-left: -125px;
top: -30px;
height: 30px;
}
#merit .blk li dt {
    font-size: 22px;
}
#merit .blk {
    padding: 30px;
    padding-top: 0;
}
#merit .redu .img {
    float: none;
    text-align: center;
    margin-bottom: 20px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
#merit .bg-line {
    right: -7px;
    bottom: -7px;
}
#merit .blk h3 span:after {
    bottom: 2px;
	    top: 34px;
}
}
#faq {
    text-align: center;
    margin-bottom: 210px;
}
#faq ul{
    margin-left: -2%;
    margin-right: -2%;
}
#faq li{
position: relative;
    width: 28.1%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    cursor: pointer;
}
#faq li a {
    display: block;
}
#faq li a img {
    width: 280px;
}
#faq .img {
    max-width: 880px;
    text-align: center;
    margin: auto;
    margin-top: 25px;
    margin-bottom: 25px;
}
#faq .card_reverse {
    position: absolute;
    top: 0;
    left: 6px;
}
 
/* 表面の表示 */
#faq .card_surface {
    opacity: 1;
    transform: rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 300ms 150ms;
}
#faq .card_reverse {
    opacity: 0;
    transform: rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 300ms;
}
 
/* 裏面の表示 */
#faq li:hover .card_surface {
    opacity: 0;
    transform:rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 300ms;
}
#faq li:hover .card_reverse {
    opacity: 1;
    transform:rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 300ms 150ms;
}
@media screen and (max-width:860px){
/* 裏面の表示 */
#faq li:hover .card_surface {
    opacity: 1;
    transform:rotateY(0deg);
}
#faq li:hover .card_reverse {
    opacity: 0;
    transform:rotateY(0deg);
}
#faq li.sp-card .card_surface {
    opacity: 1;
    transform: rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 300ms 150ms;
    
}
#faq li.sp-card .card_reverse {
    opacity: 0;
    transform: rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 300ms;
    left: 0px;
}
#faq li.sp-card.active .card_surface {
    opacity: 0;
    transform:rotateY(90deg);
    transition:
        opacity 50ms 200ms,
        transform 300ms;
}
#faq li.sp-card.active .card_reverse {
    opacity: 1;
    transform:rotateY(0deg);
    transition:
        opacity 100ms 150ms,
        transform 300ms 150ms;
}
}
@media screen and (max-width:480px){
#faq {
    margin-bottom: 100px;
    }
#faq .img {
    margin-top: 20px;
    margin-bottom: 20px;
}
	#faq li {
    position: relative;
    width: 31.2%;
    margin-left: 1%;
    margin-right: 1%;
    cursor: pointer;
}
}
#bg-visual {
    height: 400px;
    background-image: url("../images/bg_cont2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    margin-bottom: 210px;
}
@media screen and (max-width:480px){
#bg-visual {
    height: 250px;
    margin-bottom: 100px;
}
}
#contact {
    color: #666666;
}
#contact h2 {
    color: #333333;
}
#contact .lead {
    tab-size: 18px;
    text-align: center;
    margin-bottom: 50px;
}
#contact h3 {
    background-image: url("../images/contact_icon.svg");
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 18px;
    font-size: 21px;
    font-weight: bold;
    margin-bottom: 8px;
}
#contact .form-control {
    background-color: #fff;
    border: #666666 3px solid;
    border-radius: 10px;
    height: 45px;
    width: 100%;
    box-sizing: border-box;
}
#contact .blk {
    margin-bottom: 25px;
}
#contact .left {
    width: 47%;
    float: left;
}
#contact .right {
    width: 47%;
    float: right;
}

#contact textarea {
    height: 480px !important;
}
#contact .form-btn {
    text-align: center;
    margin-top: 40px;
}
#contact .form-btn button {
    font-size: 25px;
    font-family: inherit;
    font-weight: bold;
    background-color: #ff9200;
    color: #fff;
    border: none;
    width: 340px;
    padding: 10px;
    border-radius: 12px;
}
#contact .formError {
    display: block;
color: #CD0F13;
    margin-bottom: 5px;
    padding-top: 2px;
    margin-left: 120px;
}
#contact .form-btn button:hover {
    opacity: 0.8;
}
@media screen and (max-width:860px){
#contact .left {
    width: 100%;
    float: none;
}
#contact .right {
    width: 100%;
    float: none;
}
#contact textarea {
    height: 260px !important;
    max-width: inherit;
}
}
@media screen and (max-width:480px){
#contact h3 {
    font-size: 19px;
}
}
#foot {
    background-color: #ff0000;
    position: relative;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: right;
    color: #fff;
    margin-top: 360px;
    
}
#foot dl {
    font-size: 13px;
    line-height: 21px;
    margin-bottom: 10px;
}
#foot dd {
    font-weight: normal;
}
#foot .copyright {
    font-size: 12px;
}
#foot .icon {
    position: absolute;
    z-index: 1;
    width: 180px;
    left: 50%;
    margin-left: -90px;
    top: -210px;
}
#foot .w960 {
    position: relative;
}
#foot .sns {
    position: absolute;
    z-index: 1;
    width: 60px;
    top: 50%;
    margin-top: -35px;
    left: 25px;
}
#foot .sns a {
    display: block;
}
#foot .sns a:hover {
    opacity: 0.8;
}
#foot #pagetop {
    width: 110px;
    position: fixed;
    z-index: 99;
    right: 47px;
    bottom: 260px;
    display: none; 
}
@media screen and (max-width:860px){
#foot {
    text-align: center;
    margin-top: 280px;

}
#foot #pagetop {
    display: none !important; 
}
#foot .icon {
    width: 120px;
    margin-left: -60px;
    top: -140px;
}
#foot .sns {
    position: static;
    width: auto;
    margin-top: 0px;
    text-align: center;
    margin-bottom: 40px;

}
#foot .sns img {
    width: 40px;
    }
}
@media screen and (max-width:480px){
#foot {
    margin-top: 210px;

}
#foot .icon {
    width: 100px;
    margin-left: -50px;
    top: -116px;

}
#foot .copyright  {
    font-size: 10px;

}
}
/*------------------
フォーム系
-------------------*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
select {
  -webkit-appearance: pop-up-menu !important;
  -moz-appearance: pop-up-menu !important;
  appearance: pop-up-menu !important;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.form-control {
	display: inline-block;
	height: 45px;
	line-height: 1.42857143;
	padding-top: 1px;
	padding-bottom: 1px;
	color: #555;
	background-color: #F3F3F3;
	background-image: none;
	border: 1px solid #f7f7f7;
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	padding-left: 5px;
}
.form-control.text {
	height:150px;
	max-width:550px;
	
}


.form-control::-moz-placeholder {
  color: #999;
  opacity: 0.65;
}
.form-control:-ms-input-placeholder {
  color: #999;
}
.form-control::-webkit-input-placeholder {
  color: #999;
}
input[type=radio],
input[type=checkbox] {
    display: inline-block;
    margin-right: 6px;
}
input[type=radio] + label,
input[type=checkbox] + label {
    position: relative;
    display: inline-block;
    margin-right: 30px;
    /* font-size: 14px; */
    line-height: 30px;
    cursor: pointer;
	 white-space: nowrap;
}

@media (min-width: 1px) {
    input[type=radio],
    input[type=checkbox] {
        margin: 0;
		opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -ms-filter: "alpha(opacity=0)";
	margin-left:-13px;
    }
    input[type=radio] + label,
    input[type=checkbox] + label {
        padding: 0 0 0 30px;
    }
    input[type=radio] + label::before,
    input[type=checkbox] + label::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
         
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        width: 22px;
        height: 22px;
        margin-top: -11px;
         
        background: #FFF;
    }
    input[type=radio] + label::before {
        border: 2px solid #666666;
        border-radius: 30px;
    }
    input[type=checkbox] + label::before {
        border: 2px solid #666666;
    }
    input[type=radio]:checked + label::after,
    input[type=checkbox]:checked + label::after {
        content: "";
        position: absolute;
        top: 50%;
         
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
    }
    input[type=radio]:checked + label::after {
	left: 6px;
width: 10px;
height: 10px;
margin-top: -5px;
background:#ff9200;
border-radius: 8px;
    }
    input[type=checkbox]:checked + label::after {
	left: 3px;
	width: 16px;
	height: 8px;
	margin-top: -8px;
	border-left: 3px solid #155396;
	border-bottom: 3px solid #155396;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
    }
}
/**
 * BxSlider v4.1.2 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2014
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */


/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
	position: relative;
	margin: 0 auto 0px;
	padding: 0;
	text-align:center;
	*zoom: 1;
	height:100%;
}

.bx-wrapper img {
	max-width: 100%;
	display: block;
}

/** THEME
===================================*/


/* LOADER */

.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(../images/loading.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
	text-align: right;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display:block;
    margin-bottom: 13px;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	text-indent: 9999px;
	display: block;
	width: 12px;
	height: 12px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background-color:#c4c4c4;
}
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background-color: #ff0000;
}
/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
    left: -20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../images/pager_prev.svg);
}

.bx-wrapper .bx-next {
	right: -20px;
	background-repeat: no-repeat;
	background-position: center center;
	background-image:url(../images/pager_next.svg);
}


.bx-wrapper .bx-controls-direction a:hover {
    opacity: 0.8;
}




/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
	text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
	display: block;
	text-indent: -9999px;
	width: 10px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -11px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
	background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
	display: block;
	text-indent: -9999px;
	width: 9px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -44px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
	background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
	text-align: left;
	width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
	right: 0;
	width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #666\9;
	background: rgba(80, 80, 80, 0.75);
	width: 100%;
}

.bx-wrapper .bx-caption span {
	color: #fff;
	font-family: Arial;
	display: block;
	font-size: .85em;
	padding: 10px;

}
@media screen and (max-width:860px){
.bx-wrapper .bx-controls-direction a {
    width: 30px;
    height: 50px;
    background-size: 30px;
    margin-top: -15px;
}

}
@media screen and (max-width:480px){
.bx-wrapper .bx-controls-direction a {
    width: 18px;
    height: 30px;
    background-size: 18px;
    margin-top: -15px;

}
.bx-wrapper .bx-prev {
    left: -9px;

}
.bx-wrapper .bx-next {
    right: -9px;

}
}

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

	#visual .icon {
    bottom: 52px;
}
#visual ul {
    height: 68% !important;
}
	
}

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

#visual .icon {
    width: 120px;
    margin-left: -60px;
}
	h1 img {
    width: 70px;
}
	#about p {
    font-size: 15px;
    line-height: 35px;
}
	#products .dtl p {
    font-size: 15px;
    line-height: 35px;
}
	#products .dtl ul li {
    width: 80%;
    margin-left: 20px;
    box-sizing: border-box;
    margin-right: 20px;
}
	#btn a {
    font-size: 16px;
    max-width: 250px;
}
	#merit .blk::before {
    width: 180px;
    margin-left: -95px;
    top: -30px;
    height: 30px;
}
	#merit .blk h3 {
    font-size: 20px;
}
	#merit .blk li dt {
    font-size: 17px;
}
	#merit .blk li dt img {
    width: 18px;
    margin-right: 2px;
    margin-top: 3px;
}#merit .blk li dd {
    color: #666666;
    font-size: 13px;
}
	#merit .blk p {
    color: #666666;
    font-size: 13px;
    padding-top: 10px;
}
	#contact .lead {
    font-size: 13px;
    text-align: center;
    margin-bottom: 50px;
}
	#contact h3 {
    font-size: 13px;
}
	#contact .form-btn button {
    font-size: 20px;
    color: #fff;
    border: none;
    width: 250px;
    padding: 10px;
    border-radius: 12px;
}
	
}