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

html{
	scroll-behavior: smooth; /*スムーススクロール*/
}


body{
width: 100%;
height: 100%;	
font-size: 62.5%; 	/* font-size 10px */
color:#333;
height: 100%;
position: relative;	
-webkit-overflow-scrolling: touch;/*スマホのスクロールをスムーズにする*/
word-break: break-word;/*自動改行*/	
	
 font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	
	
letter-spacing: 0.1rem;
	
	overflow-x: hidden; /*横スクロール禁止*/
	
	background: #c7dbe6;
	
}


/***************************************

common

***************************************/






a {
	text-decoration: none;
	color: #333;
	outline: none;
}

a:hover {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	opacity: 0.5;
	filter: alpha(opacity=50);
	webkit-transition: 0.6s;
	transition: 0.6s;
}

.clearfix:after {/*親要素に display: flow-root Chrome と Firefox */
  content: "";
  clear: both;
  display: block;
}	

ul{
	list-style-type: none;
	overflow:hidden;
	
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
	
margin: 0;
	padding: 0;
	
	
}

	
/***************************************

header

***************************************/



header{
    width: 100%;
	position: fixed;
    top: 0;
    left:0;
	z-index: 100000;
	background: #c7dbe6;
	
}


section.logo{
	width: 100%;
	margin: 1% 0;
	text-align: right;
}

img.Logo{
	padding-right: .5%;
	width: 10%;
}






@media (max-width:768px) {
	
	
section.logo{
	width: 100%;
	margin: 1% 0;
	text-align: center;
}

img.Logo{
	padding-right: 0%;
	width: 30%;
}	
	
}

	
/***************************************

SIDE MENU

***************************************/
	
.Side_navi{
  width: 3%;
  height: 100%;
  position: fixed;
  right:0;
  top: 15;
  z-index: 99999;
  background: #c7dbe6;	
	
}
	
ul.navi_icon{
	width: 100%;
	margin-top: 20%;
	}

ul.navi_icon li{
	width: 100%;
	margin-bottom: 15%;
	text-align: center;
	}


@media (max-width:768px) {
	
  .Side_navi{
  width: 7%;
  height: 100%;
  position: fixed;
  right:0;
  top: 15;
  z-index: 99999;
  background: #c7dbe6;	
	
}
	
ul.navi_icon{
	width: 100%;
	margin-top: 50%;
	}

ul.navi_icon li{
	width: 100%;
	margin-bottom: 15%;
	text-align: center;
	}
}



	
/***************************************

TOP

***************************************/


.top{	
	width: 100%;
	margin-top: 5%;
}


ul.Top_img{
	
	width: 90%; 
	margin: 0 auto;
	
}

ul.Top_img li.li55{
	width: 55%;
	
}

ul.Top_img li.li55 img{
	width: 100%;
	
}

ul.Top_img li.li45{
	width: 45%;	
	text-align: left;
}


p.s_font{
	width: 100%;
	font-size: 0.7rem;
	padding-left: 2%;
	padding-top: 6%;
	 }

ul.Top_img h1{
	margin-top: -1%;
	padding-left: 2%;
	font-size: 4.5rem;
	font-family: 'Roboto', sans-serif;
}


p.tag_Disp{
	width: 90%;
	margin-top: -1%;
	padding-left: 2%;
	font-size: 1.8rem;
	color:#93938e;
	font-weight: 900;
	line-height: 2.3rem;
	
}


p.txt_Disp{
	width: 78%;
	margin-top: 8%;
	padding-left: 2%;
	font-size: .9rem;
	letter-spacing: 0.15rem;
	line-height: 2.2rem;
	font-weight: 600;
	
}

@media (max-width:768px) {
	
	
	
.top{	
	width: 100%;
	margin-top:10%;
}


ul.Top_img{
	
	width: 90%; 
	margin: 0 auto;
	
}

ul.Top_img li.li55{
	width: 100%;
	
}

ul.Top_img li.li55 img{
	width: 100%;
	
}

ul.Top_img li.li45{
	width: 100%;	
	text-align: left;
}


p.s_font{
	width: 100%;
	font-size: 0.7rem;
	padding-left: 2%;
	padding-top: 6%;
	 }

ul.Top_img h1{
	margin-top: -1%;
	padding-left: 2%;
	font-size: 4.2rem;
	font-family: 'Roboto', sans-serif;
}


p.tag_Disp{
	width: 90%;
	margin-top: -1%;
	padding-left: 2%;
	font-size: 1.4rem;
	color:#93938e;
	font-weight: 900;
	line-height: 2.3rem;
	
}


p.txt_Disp{
	width: 95%;
	margin-top: 8%;
	padding-left: 2%;
	font-size: .9rem;
	letter-spacing: 0.15rem;
	line-height: 2.0rem;
	font-weight: 600;
	
}
	
}

/***************************************

CONTENTS

***************************************/


section.contents_1{
	
	width: 100%;
	background: #000;
	margin: 3% 0;
}


p.con_Disp{
	
	width: 75%;
	margin: 0 auto;
	text-align: center;
	padding: 3% 0 2% 0;
	font-size: 2.0rem;
	letter-spacing: 0.5rem;
	line-height: 2.2rem;
	font-weight: 600;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	
}

p.con_txt_Disp{
	width: 75%;
	margin: 0 auto;
	text-align: center;
	font-size: .9rem;
	color: #fff;
	letter-spacing: 0.15rem;
	line-height: 1.6rem;
	font-weight: 400;
	padding-bottom: 3%;
	
}



section.contents_2{
	
	width: 75%;
	margin: 5% auto;
}


ul.brand{
	width: 100%;
}

ul.brand li{
	width: 33.333%;
	text-align: center;
	margin-bottom: 2%;
}

ul.brand li img{
	
}


.neu{
width: 70%;
margin: 2% auto;
padding: 2% 0;	
font-size: 0.9rem;	
border-radius: 14px;
background: #c7dbe6;
box-shadow: inset 7px 7px 8px #abbcc6, 
            inset -7px -7px 8px #e3faff;
}

.s_brand{font-size:0.4rem;	}





@media (max-width:768px) {
	
	
	section.contents_1{
	
	width: 100%;
	background: #000;
	margin: 3% 0;
	clear: both;
}


p.con_Disp{
	
	width: 80%;
	margin: 0 auto;
	text-align: left;
	padding: 3% 0 2% 0;
	font-size: 2.0rem;
	letter-spacing: 0.5rem;
	line-height: 2.2rem;
	font-weight: 600;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	
}

p.con_txt_Disp{
	width: 80%;
	margin: 0 auto;
	text-align:  left;
	font-size: .9rem;
	color: #fff;
	letter-spacing: 0.15rem;
	line-height: 1.6rem;
	font-weight: 400;
	padding-bottom: 3%;
	
}



section.contents_2{
	
	width: 83%;
	margin: 5% -10% 0 5%;
}


ul.brand{
	width: 100%;
}

ul.brand li{
	width: 50%;
	text-align: center;
}

ul.brand li img{
	width: 95%;
}



.s_brand{font-size:0.4rem;	}

	
}



/********** PC・スマホ切り替え **********/
 
@media (max-width:735px) {
.pc {
	display: none;
}
}

@media (min-width:736px) {
.sp {
	display: none;
}
}









/***************************************

footer

***************************************/


footer{
	width: 100%;
	margin: 5% auto 1%;
	text-align: center;	
}


footer.p{
	font-size: 1.3rem;
	
	margin: 2% 0 ;
}