@charset "utf-8";

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

base

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



html {
	background: #e0e0e0;
	
	
}	
	


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;
}






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

トグル

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

	.visible, .invisible {
                opacity: 0.0;
                transition: opacity 0.5s ease;
            }
            .visible {
                opacity: 1.0;
            }
            
            .visible.translateY,.invisible.translateY {
                transform: translateY(100px);
                transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
            }
            .visible.translateY {
                transform: translateY(0);
            }
            .visible.translateToLeft,.invisible.translateToLeft {
                transform: translateX(100px);
                transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
            }
            .visible.translateToLeft {
                transform: translateX(0);
            }
            .visible.translateToRight,.invisible.translateToRight {
                transform: translateX(-100px);
                transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
            }
            .visible.translateToRight {
                transform: translateX(0);
            }
            .visible.translateScaleUp,.invisible.translateScaleUp {
                transform: scale(.5);
                transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
            }
            .visible.translateScaleUp {
                transform: scale(1);
            }
            .visible.translateScaleDown,.invisible.translateScaleDown {
                transform: scale(1.4);
                transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
            }
            .visible.translateScaleDown {
                transform: scale(1);
            }
            .visible.translateRotate,.invisible.translateRotate {
                transform: rotate(360deg);
                transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
            }
            .visible.translateRotate {
                transform: rotate(0deg);
            }



/*========= ページネーションCSS ===============*/

.pagination {
	position:fixed;
	right:20px;
	top: 50%;
  	transform: translateY(-50%);
	font-size:1em;
	z-index: 10;
	list-style: none;
}

.pagination a {
	display:block;
	height:20px;
	margin-bottom:5px;
	color:#fff;
	position:relative;
	padding:4px;
}

.pagination a.active:after {
	box-shadow:inset 0 0 0 5px;
}

/*現在地表示のテキストの設定*/
.pagination a .hover-text {
	position:absolute;
	right:15px;
	top:0;
	opacity:0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	padding-right: 15px;
}

.pagination a:hover .hover-text {
	opacity: 1;
}

.pagination a:after {
	-webkit-transition:box-shadow 0.5s ease;
	transition:box-shadow 0.5s ease;
	width:10px;
	height:10px;
	display: block;
	border:1px solid;
	border-radius:50%;
	content:"";
	position: absolute;
	margin:auto;
	top:0;
	right:3px;
	bottom:0;
}

/*768px以下は現在地表示のテキストを非表示*/
@media screen and (max-width:768px) { 
	.pagination a .hover-text{
		display: none;
	}	
}



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

コンテンツ

/********************************-*/




.contents{
	
	width: 100%;
	margin: 0 auto;
	background: #f1f1f1;
	/*font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;*/
	font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;	
	
}

section{
	width: 100%;	
}


.box{
	width: 100%;
    color: #333;
	text-align: center;
	;
  
}
#box1{
    
}


h1{ 
	width: 100%;
	font-size: 5rem;
	text-align: center;
	padding-top: 10%;
	/*font-family: 'Reem Kufi Ink', sans-serif;*/
	
}


h2{
	padding-top: 5%;
	font-size: 3rem;
	text-align: center;
	font-weight: 500;
	font-family: 'Reem Kufi Ink', sans-serif;
}






h3{
	margin: 5% auto 0;
	font-size: 2rem;
	text-align: center;
	letter-spacing: 0.1rem;
	font-weight: 900;
	font-style: italic;
	
}




.Disp{
	width: 45%;
	margin: 2% auto 3%;
	font-size: 1.3rem;
	text-align: left;
	font-weight: 900;

}



.kikaku_Disp

{
	width: 30%;
	margin: 3% auto;
	font-size: 1.0rem;
	text-align: left;
	letter-spacing: 0.1rem;
	
}


.kikaku_Disp img{
	width: 100%;
	margin: 0% auto;	
}


.emphasis{
	font-size: 0.9rem;
}

#box2{
    
}


.container_box {
  width: 80%;
  margin: 0 auto;		
  display: inline-flex;
  flex-wrap: wrap;	
}


.container_box_full {
  width: 75%;
  margin: 3% auto 3%;		
  display: inline-flex;
  flex-wrap: wrap;	
}


.container_box_full_65 {
  width: 65%;
  margin: 3% auto 0;		
  display: inline-flex;
  flex-wrap: wrap;	
}

.container_box_full_50 {
  width: 50%;
  margin: -15% auto 3%;		
  display: inline-flex;
  flex-wrap: wrap;	
}

.container_box_full_disp {
  width: 60%;
  margin: 0% auto 5%;		
  font-size: .8rem;
  text-align: left;	
  line-height: 1.5rem	
  	
}


.leftbox_100{
	width: 100%;
}

.leftbox_100 img{
	width: 100%;
}

.leftbox_60{
	width: 60%;
}

.leftbox_50{
	width: 50%;
}

.leftbox_18{
	width: 18%;
}

.leftbox_18 img{
	width: 100%;
}

.leftbox_33{
	width: 33.3333%;
}

.leftbox_33 img{
	width: 100%;
}

.leftbox_25{
	width: 25%;
}

.leftbox_25 img{
	width: 100%;
}

.leftbox_46{
	width: 46%;
}

.leftbox_46 img{
	width: 100%;
}

.rightbox_40{
	width: 40%;
}

.rightbox_50{
	width: 50%;
}

.item_Disp{
	width: 75%;
	margin: 0% auto;
	padding: 9% 0 5%;
	font-size: 1.1rem;
	text-align: left;
	font-weight: 500;
	color: #333;
	line-height: 2.0rem;
	letter-spacing: 0.2rem;
	
}


.coordinate_Disp{
	width: 75%;
	margin: 0% auto;
	padding: 10% 0;
	font-size: .7rem;
	text-align: left;
	font-weight: 500;
	color: #333;
	line-height: 2.0rem;
	letter-spacing: 0.1rem;
	
}




.brand_disp{
	width: 85%;
	margin: 0% auto;
	padding: 10% 0;
	font-size: .8rem;
	text-align: left;
	font-weight: 900;
	color: #333;
	line-height: 1.4rem;
	letter-spacing: 0.1rem;
	
	
}


.item_disp{
	width: 85%;
	margin: 0% auto;
	font-size: .7rem;
	text-align: left;
	font-weight: 600;
	color: #333;
	line-height: 1.4rem;
	letter-spacing: 0.1rem;
	
	
}


.h3_disp{
	width: 55%;
	margin: 1% auto 0;
	font-size: 1.2rem;
	text-align: left;
	font-weight: 500;
	
}



#box3{
    
}
#box4{
    
}

.kinjitu{
	
	border: 1px solid #333;
	font-size: 0.5rem;
	padding: 0.4% 1%;
}



.spnone{
		display: inline;
	}
	
	
.pcnone {
        display: none;
    }



p.button {
    width: 50%;
    margin: 1% auto 0%;
    line-height: 1.9;
    text-align: center;
	font-size: 1.5rem;
	
}



/****
ボタン
****/

.btn{
  position: relative;
  overflow: hidden;
    
  text-decoration: none;
  display: inline-block;
    border: 1px solid #555;
    padding: 1.5% 12%;
    text-align: center;
    outline: none;
    transition: ease .2s;
}


.btn span {
  position: relative;
  z-index: 3;
  color:#333;
}

.btn:hover span{
  color:#fff;
}


.bgskew::before {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  background:#333;
  width:120%;
  height: 100%;
  transform: skewX(-25deg);
}


.bgskew:hover::before {
  animation: skewanime .5s forwards;
}

@keyframes skewanime {
  100% {
    left:-10%;
  }
}









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

スマホ

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



@media (max-width:1023px) {
    
	
	



.contents{
	
	width: 100%;
	margin: 0 auto;
	background: #f1f1f1;
	/*font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;*/
	font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;	
	
}

section{
	width: 100%;	
}


.box{
	width: 100%;
    color: #333;
	text-align: center;
  
}
#box1{
    
}


h1{ 
	width: 95%;
	font-size: 2.4rem;
	text-align: center;
	padding-top: 17%;
	/*font-family: 'Reem Kufi Ink', sans-serif;*/
	line-height: 2.8rem
	
}


h2{
	width: 90%;
	padding-top: 20%;
	padding-bottom: 5%;
	font-size: 2.0rem;
	text-align: center;
	font-weight: 500;
	font-family: 'Reem Kufi Ink', sans-serif;
	line-height: 2.3rem;
	margin: 0% auto;
}





h3{
	width: 90%;
	margin: 5% auto 3%;
	font-size: 1.8rem;
	text-align: center;
	letter-spacing: 0.1rem;
	font-weight: 700;
	font-style: italic;
	line-height: 2.3rem
	
}




.Disp{
	width: 90%;
	margin: 3% auto;
	font-size: 1.0rem;
	text-align: left;
	font-weight: 700;

}



.kikaku_Disp

{
	width: 85%;
	margin: 3% auto;
	font-size: 1.0rem;
	text-align: left;

	
}


.kikaku_Disp img{
	width: 100%;
	margin: 0% auto;	
}


.emphasis{
	width: 90%;
	font-size: 0.8rem;
	line-height: 0.9rem
}	
	
#box2{
    
}


.container_box {
  width: 100%;
  margin: 0 auto;		
  display: inline-flex;
  flex-wrap: wrap;	
}


.container_box_full {
  width: 100%;
  margin: 3% auto 3%;		
  display: inline-flex;
  flex-wrap: wrap;	
}


.container_box_full_65 {
  width: 95%;
  margin: 3% auto 0;		
  display: inline-flex;
  flex-wrap: wrap;	
}

.container_box_full_50 {
  width: 100%;
  margin: -15% auto 3%;		
  display: inline-flex;
  flex-wrap: wrap;	
}
	
	


.container_box_full_disp {
  width: 90%;
  margin: 0% auto 5%;		
  font-size: .7rem;
  text-align: left;	
  line-height: 1.3rem	
  	
}


.leftbox_100{
	width: 100%;
}

.leftbox_60{
	width: 100%;
}

.leftbox_50{
	width: 50%;
}

.leftbox_33{
	width: 50%;
}

.leftbox_33 img{
	width: 100%;
}

.leftbox_25{
	width: 50%;
}

.leftbox_25 img{
	width: 100%;
}

	
.leftbox_18{
	width: 33.333%;
}	

.container_box_full_50 li.leftbox_25{
  width: 50%;	
}		
	

.rightbox_40{
	width: 100%;
}

.rightbox_50{
	width: 50%;
}

.item_Disp{
	width: 90%;
	margin: 0% auto;
	padding: 7% 0;
	font-size: 1.1rem;
	text-align: left;
	font-weight: 500;
	color: #333;
	line-height: 1.7rem;
	letter-spacing: 0.2rem;
	
}


.coordinate_Disp{
	width: 90%;
	margin: 0% auto;
	padding: 10% 0;
	font-size: .8rem;
	text-align: left;
	font-weight: 500;
	color: #333;
	line-height: 1.5rem;
	letter-spacing: 0.1rem;
	
}




.brand_disp{
	width: 85%;
	margin: 0% auto;
	padding: 10% 0;
	font-size: .8rem;
	text-align: left;
	font-weight: 900;
	color: #333;
	line-height: 1.4rem;
	letter-spacing: 0.1rem;
	
	
}


.item_disp{
	width: 85%;
	margin: 0% auto;
	font-size: .7rem;
	text-align: left;
	font-weight: 600;
	color: #333;
	line-height: 1.4rem;
	letter-spacing: 0.1rem;
	
	
}


.h3_disp{
	width: 95%;
	margin: 1% auto 0;
	font-size: 0.9rem;
	text-align: left;
	font-weight: 500;
	line-height: 1.5rem;
	
}



#box3{
    
}
#box4{
    
}




.spnone{
		display: none;
	}
	
	
.pcnone {
        display: inline;
    }



p.button {
    width: 87%;
    margin: 1% auto 0%;
    line-height: 1.9;
    text-align: center;
	font-size: 1.20rem;
	
}



/****
ボタン
****/

.btn{
  position: relative;
  overflow: hidden;
    
  text-decoration: none;
  display: inline-block;
    border: 1px solid #555;
    padding: 1.5% 12%;
    text-align: center;
    outline: none;
    transition: ease .2s;
}


.btn span {
  position: relative;
  z-index: 3;
  color:#333;
}

.btn:hover span{
  color:#fff;
}


.bgskew::before {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  background:#333;
  width:120%;
  height: 100%;
  transform: skewX(-25deg);
}


.bgskew:hover::before {
  animation: skewanime .5s forwards;
}

@keyframes skewanime {
  100% {
    left:-10%;
  }
}




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

スライダー

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

.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  
}


.swiper-slide img{
	width: 80%
}