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

html{
	font-size: 18px;
}
@media(max-width: 767px){
	html{
		font-size: 12px;
	}
}
html,body{
    width: 100%;
    -ms-overflow-x: hidden;
        overflow-x: hidden;
	font-family: "Zen Maru Gothic", serif;
}

#main{
	background: #080126;
	color: #fff;
}

hr { 
	margin:40px auto;
	border-width: 0 0 1.5px;
	border-image: linear-gradient(
    90deg,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.7) 50%,
    hsla(0, 0%, 100%, 0) 100%) 0 0 100%;
  border-style: solid;
}

.bg-section{
	position: absolute;
    left: 0;
    top: 0;
	width: 100%;
	height: 100vh;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center center; 
    -webkit-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

#bg-section01{
    background-image: url('../img/img01.jpg');
}
#bg-section02{
    background-image: url('../img/img02.jpg');
}
#bg-section03{
    background-image: url('../img/img03.jpg');
    top: 30vh;
}


#section01{
    position: relative;
    z-index: 2;
    padding: 22vh 0 30vh;
}
#section01 .content-inner{
    max-width: 80%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
#section01 .inner-el{
    font-size: 4rem;
    position: relative;
    text-align: center;
    padding: 0 10px;
    max-width:50px;
}
@media(max-width: 767px){
    #section01 .inner-el{
        padding: 0 10px; 
        font-size: 3rem;
    }
}

#section01 .main-logo {
	text-align:center;
}
#section01 .main-logo img {
	width:330px;
	padding:50px 60px;
	background:#fff;
}

#section01 h2 {
width:100%;
margin:30px auto;
font-weight:600;
font-size:2.4vw;
line-height:1.5;
letter-spacing:3px;
text-shadow: 0 0 10px rgb(0, 0, 0, 0.8);
}

#section01 p {
	background:rgba(0, 0, 0, 0.3);
	padding:30px;
	text-align:left;
	max-width: 800px;
	line-height:2;
	margin:30px auto;
	letter-spacing:1px;
}

.sp-br { display:none; }

@media screen and (max-width:1200px){
#section01 h2 {
font-size:3vw;}	
}

@media screen and (max-width:820px){	
#section01 h2 {
font-size:4vw;}
#section01 p {
line-height:1.8;}
}

@media screen and (max-width:767px){
#section01 h2 {font-size:6vw;}
#section01 p {
font-size:15px;
line-height:1.8;
}
.sp-br { display:block; }
}

.title{
    letter-spacing: 4px;   
}
.z-depth-2{
    position: relative;
    z-index: 2;
}
.table{
    background-color: #FFF;
    color: #333;
}

#section02 {
    background: #005bab;
    position: relative;
    z-index: 4;
    padding:10vh 0;
}

#section02 {
    background: #005bab;
    position: relative;
    z-index: 4;
    padding:10vh 0;
}

#section02 p.logo {
	text-align:center;
	background:#fff;
	color:#005bab;
	font-size:40px;
	margin:0 auto 50px;
	font-weight:800;
	box-shadow: 0 0 60px rgb(255,255, 255, 0.6);
}

#section02 p.logo span {
	background:#005bab;
	color:#fff;
	font-weight:600;
	letter-spacing:2px;
	padding:0px 10px 5px 12px;
}

#section02 p.logo img {
	background:#fff;
	width:250px;
	padding:25px 20px 27px;
}

#section02 p.candle-light {
	text-align:center;
	font-size:20px;
	line-height:2;
}

#section02 p.candle-light a {
	text-decoration:none;
	color:#fff;
	border-bottom:1px solid #fff;
	padding-bottom:2px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

#section02 p.candle-light a:hover {
	opacity:0.8;
}

#section02 p.candle-light span {
	font-size: 17px;
	line-height:1;
	letter-spacing:1px;
	position:relative;
}

#section02 p.candle-light span:after {
	content:"";
	width:17px;
	height:16px;
	display:inline-block;
	right:-3px;
	background:url(../img/open_in_new.svg);
	position:relative;
}

#section02 p.candle-light img.product {
	width: 260px;
	margin:10px auto 30px;
}

#section02 p.candle-light img.hp {
	width: 120px;
}

#section02 p.candle-light img.hp2 {
	width: 260px;
	padding:5px 8px;
	background:#fff;
}

@media screen and (max-width:767px){
#section02 p.logo {
	padding:10px 0 20px;
}
#section02 p.candle-light {
	margin-top:50px;}
	
#section02 p.logo img {
	display:block;
	margin:auto;
}	
#section02 p.logo span {
	display:block;
	width:80%;
	margin:0 auto;
}
#section02 p {
   font-size:16px;
}
}



#section03{
    position: relative;
    z-index: 3;
    padding: 50vh 0 0;
    background: #080126;
    overflow: hidden;
}

#section04{
    position: relative;
    background: #005bab;
    z-index: 3;
    padding: 10vh 0;
}

#section04 {
    position: relative;
    z-index: 3;
    padding: 50vh 0 0;
    background: #005bab;
    overflow: hidden;
}

#section04 {
    background: #005bab;
    position: relative;
    z-index: 4;
    padding:10vh 0;
}

#section04 {
    background: #005bab;
	background: #eb6100;
    position: relative;
    z-index: 4;
    padding:10vh 0;
}

#section04 p.logo {
	text-align:center;
	background:#fff;
	color:#005bab;
	font-size:40px;
	margin:0 auto 50px;
	font-weight:800;
	box-shadow: 0 0 60px rgb(255,255, 255, 0.6);
}

#section04 p.logo span {
	background:#005bab;
	color:#fff;
	font-weight:600;
	letter-spacing:2px;
	padding:0px 10px 5px 12px;
}

#section04 p.logo img {
	background:#fff;
	width:250px;
	padding:25px 20px 27px;
}

#section04 p.local-activity img {
	max-width:400px;
	margin:0 auto 30px;
	background:#fff;
	padding:10px 15px;
	-webkit-transition: all 0.3s;
transition: all 0.3s;cursor:pointer;
}

#section04 p.local-activity img:hover {
	opacity:0.8;
}

#section04 p.local-activity {
	font-size:26px;
	text-align:center;
}

#section04 p.local-activity span {
	font-size:17px;
	letter-spacing:2px;
	text-align:center;
}

#section04 p.openFactory {
	margin:0 auto 20px;
	text-align:center;
}

#section04 p.openFactory img {
    width:100%;
}

#section04 p img {
    width:100%;
}

@media screen and (max-width:767px){
#section04 p.logo {
	padding:10px 0 20px;
}
#section04 p.candle-light {
	margin-top:50px;}
	
#section04 p.logo img {
	display:block;
	margin:auto;
}
	
#section04 p.logo span {
	display:block;
	width:80%;
	margin:0 auto;
}
#section04 p {
   font-size:16px;}
	
#section04 p.openFactory img {
    width:260px;
	margin:0 auto 20px;
}	
	
}


#section04 p img {
    width:100%;
}



#section05{
    position: relative;
    z-index: 3;
    padding: 50vh 0 0;
    background: #080126;
    overflow: hidden;
}

#section06{
    position: relative;
    background: #005bab;
    z-index: 3;
    padding: 10vh 0;
}

.fukidashi h2 { 
	text-align:center;
	font-size:30px;
	font-weight:600;
	margin: 20px auto 30px;
	display:block;
}

.fukidashi h2 span { 
	font-size:22px;
	font-weight:400;
}

.fukidashi { text-align:center;}

.fukidashi {
    display: flex;
    justify-content: center;
    align-items: center;
}
.fukidashi::before,.fukidashi::after {
    content: "";
    background-color: #fff;
	border-radius:6px;
    height: 3px;
    width: 40px;
}
.fukidashi::before {
    margin-right: 5px;
    transform: rotate(60deg); 
}
.fukidashi::after {
    margin-left: 5px;
    transform: rotate(-60deg); 
}

#footer{
    color: #FFF;
    padding: 50px 20px;
    font-size: 12px;
    text-align: center;
		background: #eb6100;
}

@media screen and (max-width:767px){  
    #section02,#section04,#section06{

        padding: 40px 0;
    }
}



.sns ul {
z-index:999;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position:fixed;
top:50%;
right: 32px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-ms-flex-direction: column;
flex-direction: column;
}

.sns ul li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width:80px;
height:80px;
margin:20px auto;
}

.sns ul li a {
display:block;
width:80px;
height:80px;
cursor:pointer;
background:#fff;
border-radius:50%;
box-shadow: rgba(149, 157, 165, 0.5) 0px 8px 24px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
position:relative;
text-decoration: none;
}

.sns ul li a:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

.sns ul li a span {
display:none;
}

.sns ul li a:after {
content:"";
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);                      /* 3 */
position:absolute;
background-repeat:no-repeat!important;
background-size:contain!important;
}

.sns ul li a.fb:after {
width:40px;
height:40px;
background:url(../img/Facebook.svg);
}

.sns ul li a.insta:after {
width:35px;
height:35px;
background:url(../img/Instagram.png);
}

.sns ul li a.stores:after {
width:55px;
height:55px;
background:url(../img/stores.png);
}

/*.sns ul li a.stores:before {
content:"準備中";
padding:5px;
text-align:center;
color:#fff;
background:red;
text-decoration: none;
font-size:12px;
position:absolute;
z-index:999;
top: -10%;
left: 50%;
margin-right: -50%;
transform: translate(-50%); 
}*/

.sns ul li a.backtohome:after {
width:40px;
height:40px;
background:url("../img/backtohome.svg");
}

.sns ul li a.backtohome:before {
content:"青戸金属";
padding:5px;
text-align:center;
color:#005bab;
font-weight:500;
text-decoration: none;
font-size:13px;
position:absolute;
z-index:999;
top:12%;
left: 50%;
margin-right: -50%;
transform: translate(-50%); 
}

@media screen and (max-width:767px){
.sns ul {
right:0px;
top:auto;
bottom:-15%;
}
.sns ul li {
width:65px;
height:65px;
margin:12px auto;
}
.sns ul li a {
	display:block;width: 65px;
	height: 65px;border-radius:0;
	box-shadow: rgba(149, 157, 165, 0.5) 0px 8px 24px;
	text-decoration: none;
}
/*.sns ul li a.stores:before {
	top:-15px;
}*/
.sns ul li a.backtohome:before {
	font-size:12px;
	padding:2px 5px 8px;
	top:10%;
}
}