@charset "utf-8";

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

base

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



html {
	background: #f1f1f1;
	
	
}	
	
	
	
	
	
	


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

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

22'アウター

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



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

h1{
	/*font-size: 8rem;*/
	text-align: center;
	/*font-family: 'Reem Kufi Ink', sans-serif;*/
	
}



.Disp{
	width: 40%;
	margin: 0% auto;
	font-size: 1.2rem;
	text-align: left;
	font-weight: 900;

	
}

.kikaku_Disp

{
	width: 40%;
	margin: 1% auto;
	font-size: 1.0rem;
	text-align: left;
	

	
}


.kikaku_Disp img

{
	width: 100%;
	margin: 0% auto;
	
	
	

	
}


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

h3{
	font-size: 1.2rem;
	text-align: center;
	letter-spacing: 0.1rem;
	font-weight: 500;
	font-style: italic;
	
}


p.item_disp{
	width: 50%;
	margin: 3% auto;
	font-size: 1.2rem;
	text-align: center;
}



section{
	width: 100%;
	margin: 10% auto;
	
}



.item_code_wrap{
	width: 100%;
	background: #dcdcdc;
	margin: 5% auto;
	padding-top: 5%;
}

.item_code_box{	
	width: 80%;
	margin: 0 auto;
	
	display: flex;
}

.item_code_boxchild{
	width: 16.666666666%
		
}

.item_code_box img{
	width: 100%;
}

.item_name{
	font-size: .7rem;
	text-align: center;
	line-height: 1.2rem;
	padding: 1% 0 3% 0;
	font-weight: 600;
}


.item_box{	
	width: 70%;
	margin: 0 auto;
	
	display: flex;
}

.item_box img{
	width: 92%;
	text-align: center;
}

.item_boxchild{
	width: 25%
		
}



.item_box_6{	
	width: 95%;
	margin: 0 auto;
	
	display: flex;
}

.item_box_6 img{
	width: 98%;
	text-align: center;
}

.item_boxchild_6{
	width: 16.666666%
		
}



p.button {
    width: 50%;
    margin: 7% auto;
    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) {
    
	
	
	
	
h1 img{
		width: 100%;
	}	

.Disp{
	width: 95%;
	margin: 0% auto;
	font-size: 1.1rem;
	text-align: left;
	font-weight: 700;
	line-height: 2.0rem;

	
}

.kikaku_Disp

{
	width: 95%;
	margin: 4% auto 15%;
	font-size: .8rem;
	text-align: left;
	

	
}


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

h3{
	font-size: 1.2rem;
	text-align: center;
	letter-spacing: 0.1rem;
	font-weight: 500;
	font-style: italic;
	
}


p.item_disp{
	width: 95%;
	margin: 5% auto;
	font-size: 1.1rem;
	text-align: left;
	line-height: 1.9rem;
}



section{
	width: 100%;
	margin: 10% auto;
	
}



.item_code_wrap{
	width: 100%;
	background: #dcdcdc;
	margin: 5% auto;
	padding-top: 5%;
}

.item_code_box{	
	width: 95%;
	margin: 0 auto;
	
	display: flex;
	flex-wrap: wrap;
	font-size: 0;

}

.item_code_boxchild{
	width: 50%
		
}

.item_code_box img{
	width: 100%;
}

.item_name{
	font-size: 0.5rem;
	text-align: left;
	line-height: 1.1rem;
	padding: 1% 0 3% 0;
	font-weight: 600;
	width: 90%;
	margin: 0 auto;
}

	

		
	.item_name br{
		display: none;
	}	
	

.item_box{	
	width: 100%;
	margin: 0 auto;
	
	display: flex;
	flex-wrap: wrap;
	font-size: 0;
}

.item_box img{
	width: 92%;
	text-align: center;
}

.item_boxchild{
	width: 50%
		
}



.item_box_6{	
	width: 95%;
	margin: 0 auto;
	
	display: flex;
	flex-wrap: wrap;
	font-size: 0;
}

.item_box_6 img{
	width: 98%;
	text-align: center;
}

.item_boxchild_6{
	width: 50%
		
}

.spnone{
		display: none;
	}	
	
}



.pcnone {
        display: none;
    }