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

#wrapper {
	color: #5d514e;
	overflow:hidden;
	margin-top: 3%;
}
#wrapper img {
	width: 100%;
	}	
#wrapper a {
	display: block;
	text-decoration: none;
}
#wrapper .pc {
    display: none;
}

#wrapper a:link { 
	color: #634f4c; 
} 
#wrapper a:visited {
	color: #634f4c; 
	} 
#wrapper a img:hover {
	opacity: 0.8;
	filter: alpha(opacity=85);
	-ms-filter: "alpha(opacity=85)";
}	
	
/*********************************
              共有
*********************************/	
	
/*画像*/	
#wrapper .main-pic, .c_title,.c-txt, .sab-tit, .menu, .line-tit  {
	margin: 0 auto;	
	display: block;
	}	
	
/*横並び*/	
#wrapper .oh-link,.ye_box,.bl_box,.menu {
      display:flex;
      flex-direction: row;
      justify-content: space-between;
	}	
	
/*ポジション*/	
#wrapper .space, .item_box, .ohter {
	position: relative;
	}		
	
/*********************************
              main
*********************************/	
	
/*top*/
#wrapper .topview {
	}	
#wrapper .back {
	background-color: #eccdc6;
	padding: 2.5% 0 12%;
	border-radius:10px;
	}
#wrapper .main-pic {
	width: 95%;
	}	
#wrapper .c_title {
    width: 85%;
    margin-bottom: 3%;
	}
#wrapper .c-txt {
    width: 95%;	
    font-size: 3.8vw;
	text-align: center;
	line-height: 1.8em;
	}

/*カラーチャート*/
#wrapper .chart {
	margin-top: 13%;
	}	
#wrapper .sab-tit {
	width: 65%;
	}
#wrapper .c-ch {
	width: 94%;
	margin: 3% auto 1%;
	display: block;
	}
#wrapper .att {
	font-size: 2vw;
	margin-left: 3.5%;
}	
#wrapper .side {
    width: 80%;
    background-color: #8b7b77;
    padding-bottom: 2%;
    margin: -7% 0 0 10%;
}
#wrapper .oh-link {
	}		
#wrapper .pict {
    width: 5%;
    margin: 5.5% 5% 0 0;
    text-align: right;
}	
#wrapper .text {
    color: #ffffff;
    font-size: 4vw;
    margin: 4% 0 0 18%;
}
	
/*メニュー*/	
#wrapper .space {
	margin-top: 13%;
	}	
#wrapper .menu {
    width: 90%;
}

#wrapper .ye_be, .bl_be {
   opacity: 0.8;	
   position: absolute;
   top:-12%;	
	}	
#wrapper .ye_be {
    width: 28%;
    left: 8%;
}
#wrapper .bl_be {
    width: 23%;
    right: 21%;
}	
#wrapper .ye_box,.bl_box {
	border-radius:10px;
	}
#wrapper .ye_box {
	background-color: #fdf5a2;	
	}	
#wrapper .bl_box {
	background-color: #a3bfe6;	
	margin-left: 2%;
	}	
#wrapper .pict2, .pict3 {
    margin: 14.5% -5% 0 0;
    text-align: right;
}	
#wrapper .pict2 {
    width: 15%;
}	
#wrapper .pict3 {
    width: 16.5%;
	}	
#wrapper .text2 {
    font-size: 3.5vw;
    margin-left: 8%;
    padding: 10% 0;
}
#wrapper .space2 {
  padding-bottom: 13%;
}
#wrapper .up2  {
    margin-top: 0%;
}

/*ラインナップ*/	
#wrapper .item_box {
    margin-top: 6%;
}
#wrapper .line-tit {
	width: 55%;
	margin-bottom: 6%;
	}	
#wrapper .ab {
    position: absolute;
    top: 5%;
    left: -5%;
}
#wrapper .icon {
    width: 48%;
    background: #fbf2be;
    opacity: 0.8;
    padding: 2.5% 0 1%;
}
#wrapper .icon img {
	width: 80%;
	margin-left: 15%;
	}	
#wrapper .icon p {
    font-size: 3.2vw;
    text-align: center;
    margin: 1% 0 0 8%;
    letter-spacing: 2px;
}	
#wrapper .item_pic {
    width: 95%;
    margin: 0 auto;
    display: block;
}
#wrapper .ye-tit, .bl-tit{
    margin: 10% auto 0;
    display: block;
}
#wrapper .ye-tit {
    width: 60%;
}	
#wrapper .bl-tit {
    width: 60%;
}
#wrapper .up {
	margin-top: 15%;
	}	
#wrapper .mini {
    font-size: 3vw;
    text-align: center;
    margin: 2% 0 3%;
    letter-spacing: 2px;
}

/*その他特集*/	
#wrapper .other {
	width: 95%;
    margin: 8% 0;
	position: relative;
}
#wrapper .pick {
	font-size: 4.5vw;
	text-align: center;
	}	
#wrapper .att-icon {
    width: 8%;
    position: absolute;
    top: -13%;
    right: 25%;
}
#wrapper .link-box2 {
    display: flex;
    flex-wrap: wrap;
    margin-right: 1%;
}
#wrapper .link-list {
    width: 42%;
    margin-left: auto; 
    margin-right: 0.5%;
} 	

	
/*********************************
           pc用指示
*********************************/	
@media (min-width: 768px){
#wrapper {
	max-width: 770px;
	margin:0 auto;
}
#wrapper .sp {
    display: none;
}
#wrapper .pc {
    display: block;
}
	
	
	
/*TOP*/
#wrapper .c_title {
    width: 60%;
}
#wrapper .c-txt {
    font-size: 2rem;
    line-height: 1.6em;
}
#wrapper .sab-tit {
    width: 45%;
}
wrapper .c-ch {
    width: 90%;
}
#wrapper .att {
    font-size: 1.5rem;
    margin-left: 6%;
}
#wrapper .text {
    font-size: 3rem;
    margin: 2.5% 0 0 18%;
}
#wrapper .pict {
    width: 5%;
    margin: 4.3% 5.5% 0 0;
}


/*menu*/
#wrapper .text2 {
    font-size: 2.5rem;
    margin-left: 5%;
    padding: 5.5% 0;
    line-height: 1.3em;
}
#wrapper .space2 {
  padding-bottom: 5%;
}
#wrapper .up2  {
    margin-top: 2%;
}	
#wrapper .menu {
   width: 70%;
}
#wrapper .pict2, .pict3 {
    margin: 11% -5% 0 0;
}
#wrapper .ye_be, .bl_be {
    opacity: 0.8;
    position: absolute;
    top: -10%;
}
#wrapper .bl_be {
    width: 15%;
    right: 30%;
}

#wrapper .ye_be {
    width: 18%;
    left: 18%;
}

/*ラインナップ*/
#wrapper .line-tit {
    width: 40%;
}
#wrapper .icon img {
    width: 65%;
}
#wrapper .icon p {
    font-size: 2.3rem;
    margin: 1% 0 0 0;
}
#wrapper .ye-tit {
    width: 50%;
}
#wrapper .mini {
    font-size: 1.8rem;
    margin: 1% 0 3%;
}
#wrapper .bl-tit {
    width: 45%;
}

/*合わせて*/
#wrapper .pick {
    font-size: 3rem;
}
#wrapper .att-icon {
    width: 5.8%;
    top: -10%;
    right: 30%;
}	
}