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

/*--------basic-configurations--------*/
body{
	font-family:"メイリオ","遊ゴシック体","ヒラギノ角ゴシック","Noto Sans JP","Helvetica","Futura","Arial";
	color:#875b51;
	background-color:#e0f1ef;
	background-image:url("../images/web-PF-file-base.svg");
	background-size:8px;
	margin:0;
	padding:0;
	max-width:2000px;
}
header{
	width:100%;
	height:70px;
	border-bottom:2px solid #875b51;
	margin:0;
	padding:0;
}
.l-header-box--text{
	width:77px;
	position:absolute;
	top:0;
	line-height:80px;
}
.l-header-box--text-inner{
	padding-left:5px;
	padding-top:25px;
}
.l-nav-box{
	width:180px;
	padding-top:10px;
	margin:0 auto;
}
.l-nav-box ul li{
	width:50px;
	float:left;
}
.l-nav-box ul li{
	margin-right:5px;
}
.l-nav-box ul li:last-child{
	margin:0;
}
main{
	width:100%;
	margin:0;
}
.l-main-intro-text-box{
	clear:both;
	margin:14px auto 5px;
	font-size:9.5px;
	width:290px;
	padding-left:14px;
}
.l-main-intro-text-box p{
	margin-bottom:8px;
	line-height:14px;
}
.l-main-intro-text-out-box-2{
/*	padding-left:12px;*/
}
.l-main-intro-text-box-2{
	width:170px;
	height:30px;
	font-size:9.5px;
	text-align:center;
	line-height:12px;
	padding:8px 8px 1px 8px;
	background-color:#b7e0e8;
	border-radius:22px;
	margin:0 auto;
	margin-top:40px;	
}
.l-main-intro-illustration-box{
	width:240px;
	margin:0 auto;
	padding-top:14px;
}
.l-main-intro-illustration-box ul li{
	list-style-type:none;
	float:left;
}
.l-main-line---blue{
	clear:both;
	border-bottom:1.5px solid #b7e0e8;
	width:220px;
	margin:0 auto;
	padding-top:20px;
}
.l-main-contents-box{
	width:330px;
	margin:0 auto;
}
.l-main-contents-icon{
	text-align:center;
	margin-top:30px;
}
.l-main-contents-text{
	font-size:10px;
	text-align:center;
	margin-top:3px;
}
.l-main-contents-image-box{
	width:220px;
	height:37px;
	margin:17px auto 1px;
}
.l-main-contents-image-box---website{
	background-image:url("../images/ume_specialty-coffee-beans.png");
	background-size:24px;
	background-repeat:repeat-x;
}
.l-main-contents-image-box---website:hover{
	background-image:url("../images/ume_specialty-coffee-beans-hover.png");
}
.l-main-contents-image-out-box a{
	display:block;
}
.l-main-contents-speach-bubble-box{
	text-align:center;
	margin-top:-8px;
	padding-bottom:10px;
}
.l-main-contents-text-long{
	width:227px;
	margin:0 auto;
	line-height:14px;
}
.l-main-contents-image-out-box-2{
	height:62px;
	margin-bottom:-14px;
}
.l-main-contents-image-box---design{
	background-image:url("../images/site-icon-002.png");
	background-size:42px;
}
.l-main-contents-image-box---design:hover{
	background-image:url("../images/site-icon-002-hover.png");
}
.l-main-contents-text-long-2{
	letter-spaching:-0.03em;
}
.l-main-contents-image-box---illustration{
	background-image:url("../images/icon_flower_pink_ss.png");
	background-size:37px;
	background-repeat:repeat-x;
}
.l-main-contents-image-box---illustration:hover{
	background-image:url("../images/icon_flower_pink_ss-hover.png");
	background-size:37px;
	background-repeat:repeat-x;
}
.l-nav-box-2{
	margin-top:10px;
	margin-bottom:50px;
}
.l-sub-contents-nav{
	height:97px;
}
.l-before-footer-box--text{
	padding-right:7px;
	text-align:right;
	margin-top:-3vw;
}
.l-nav-icon a:hover{
	opacity:0.7;
}
.l-section-bottom-textimage{
	border-top:2px solid #875b51;
}
footer{
	height:50px;
}
.l-footer-back-to-top{
	width:140px;
	margin:0 auto;
	padding-top:30px;
	padding-bottom:10px;
	font-size:8.5px;
	text-align:center;
}
.l-footer-back-to-top a{
	text-decoration:none;
	color:#875b51;
}
.l-footer-back-to-index{
	width:70vw;
	position:relative;
	top:-15px;
	margin-top:10px;
}
.l-footer-back-to-index-out-box{
	width:100%;
	height:40px;
	background:#b7e0e8;
	position:relative;
	top:10px;
	padding-bottom:-110px;
	border-top-left-radius:70vw;
	border-top-right-radius:70vw;
}
#l-main-2nd-contents-out-box-open-when-wide{
	display:none;
}

/*=========《website-intro》=========*/
#website-intro #l-main-contents-image-box---website{
	width:118px;
	margin-top:12px;
}
#website-intro .l-main-contents-image-box---website:hover{
	background-image:url("../images/ume_specialty-coffee-beans.png");
}
#l-main-contents-website-logo{
	padding-top:12px;
	margin-bottom:14px;
}
#l-main-contents-website-logo:hover{
	opacity:0.7;
}
#website-intro .l-main-contents-before-logo{
	width:84vw;
	height:9.2vw;
	margin-top:35vw;
	margin-right:auto;
	margin-left:auto;
	background:#b7e0e8;
	border-radius:5.1vw;
}
.l-main-contents-before-information{
	font-size:10px;
	padding:2vw 12px 0 12px;
	line-height:13px;
	texxt-align:center;
}
/*=========《design》=========*/

#l-main-contents-image-box---design{
	width:128px;
	margin-top:12px;
}
#design .l-main-contents-image-box---design:hover{
	background-image:url("../images/site-icon-002.png");
}
#design main{
	width:330px;
	margin:0 auto;
}
.l-main-contents-view-list---design{
	margin-top:10px;
}
.l-main-contents-view-list---design ul li{
	list-style-type:none;
	float:left;
	margin-right:2.12vw; 
	margin-bottom:3px;
}
.l-main-contents-view-list---design ul li img{
	border-radius:4px;
}
.l-main-contents-view-list---design ul{
	
}
.pic__open:hover{
 	cursor:pointer;
}
.list-pic{
  	position:fixed;
  	top:0;
  	left:0;
	width:100%;
	height:300px;
	margin:0 auto;
  	z-index:2;
}

.pic__bg{
  height:300px;
  position:fixed;
  left:0;
  width:300px;
}

.pic__content{
  	font-size:22px;
  	background-color:#e0f1ef;
  	padding:7px 3px;
  	text-align:center;
  	position:absolute;
  	top:380px;
  	left: 50%;
  -webkit-transform:translate(-50%,-50%);
          transform:translate(-50%,-50%);
  	width:330px;
  	max-width:360px;
	border-radius:4px;
}

.pic__content img{
  	width:92%;
  	height:auto;
}

.list-pic .close__text{
	color:#875b51;
	font-weight:200;
	text-decoration:none;
	position:absolute;
	top:0;
	right:1px; 
}
a.list-pic .close__text{
	display:block;	
	
}
.l-main-line---blue---close{
	display:none;
}

/*=========《illustration》=========*/
#illustration .l-main-contents-text-long-illustration{
	width:62vw;
}
#illustration #l-main-contents-image-box---illustration{
	width:32vw;
	margin-top:12px;
	background-size:10vw;
}
#illustration .l-main-contents-image-box---illustration:hover{
	background-image:url("../images/icon_flower_pink_ss.png");
}
#illustration .l-main-contents-text-long{
	letter-spacing:-0.03em;
}
/*=========《others》=========*/
#others main{
	width:330px;
	margin:0 auto;
}


/*=======================*/
/*=======================*/
@media only screen and (min-width:360px) and (max-width:510px){
	.l-before-footer-box--text{
		margin-top:-3.1vw;
	}
	#website-intro .l-main-contents-before-logo{
		width:95vw;
		height:12vw;
	}
	#website-intro .l-main-contents-before-information{
		font-size:9.3px;
		padding:2vw 8px 0 8px;
		border-radius:20vw;
		line-height:13px;
		texxt-align:center;
	}
	#illustration #l-main-contents-image-box---illustration{
		width:29vw;
		margin-top:12px;
	}
	footer{
		height:160px;
	}

	
}
/*=======================*/
/*=======================*/
@media only screen and (min-width:390px) and (max-width:420px){
	.l-main-contents-view-list-box{
		width:86vw;
	}
	.l-main-contents-view-list-box ul li img{
		width:26.5vw;
	}
	#website-intro .l-main-contents-before-logo{
		width:87vw;
		height:11.5vw;
		line-height:13px;
		border-radius:20vw;
	}
}

/*=======================*/
/*=======================*/
@media only screen and (min-width:500px) and (max-width:700px){
	.l-main-intro-text-box{
		width:77vw;
		margin-top:30px;
		font-size:11.5px;
		line-height:16px;
	}
	.l-main-intro-text-box-2{
		width:200px;
		height:37px;
		font-size:11.5px;
		line-height:15px;
		padding:10px 10px 1px 10px;
		border-radius:31px;
		margin-top:8vw;
	}
	.l-main-intro-illustration-box{
		width:70vw;
		padding-top:28px;
	}
	.l-main-intro-illustration-box ul{
		padding-left:1.5vw;
	}
	.l-main-intro-illustration-box ul li img{
		width:20.5vw;
		margin-right:2vw;
	}
	.l-main-intro-illustration-box ul li:last-chiled{
		margin-right:0;
	}
	.l-main-contents-text{
		font-size:11.5px;
		line-height:16px;
	}
	.l-main-contents-icon img{
		width:20vw;
		margin-bottom:3px;
	}
	.l-main-contents-image-box{
    	width: 55vw;
		margin-bottom:10px;
		margin-top:12px;
		height:8vw;
	}
	.l-main-contents-image-box---website{
		background-size:7vw;
		width:50vw;
	}
	.l-main-contents-speach-bubble-box img{
		width:34vw;
		margin-bottom:3vw;
	}
	.l-main-contents-text-long{
		width:48vw;
		margin-bottom:3vw;
	}
	.l-main-contents-image-box---design{
		height:12vw;
/*		margin-left:-15px;*/
		background-size:13.25vw;
	}
	.l-main-contents-image-out-box-2{
		margin-bottom:5vw;
	}
	.l-main-contents-speach-bubble-box---design{
		margin-top:22px;
	}
	#l-main-contents-image-box---illustration{
		height:77px;
		width:44vw;
	}
	.l-main-contents-image-box---illustration{
		background-size:10.9vw;
	}
	.l-main-contents-image-box---illustration:hover{
	background-size:10.9vw;
	}
	.l-main-contents-image-out-box-3{
		margin-bottom:5vw;
	}
	.l-before-footer-box--text{
		margin-top:-2.2vw;
	}
	
	
	
	#website-intro main .l-main-contents-box{
		width:85vw;
		margin:0 auto;
	}
	#website-intro #l-main-contents-image-box---website{
	width:35vw;
	height:8vw;
	margin:17px auto 1px;
	}
	#website-intro .l-main-contents-view-list-box{
		width:92vw;
	}
	#website-intro .l-main-contents-view-list---design{
		width:90vw;
	}
	#website-intro .l-main-contents-view-list---design ul li img{
		width:27vw;
	}
	.l-main-contents-before-information{
		font-size:11.5px;
		line-height:15px;
		padding:2vw 12px 0 12px;
	}
	#design main,#others main{
		width:80vw;
	}
	#design .l-main-contents-box,#illustration .l-main-contents-box,#others main #icon-design-in-top.l-main-contents-box{ 
		width:80vw;
		margin:0 auto;
	}
	#design .l-main-contents-icon,#others .l-main-contents-icon{
		width:80vw;	
	}
	#design .l-main-contents-text{
		margin:0 auto;
	}
	#design #l-main-contents-image-box---design{
	width:44vw;
	height:13.5vw;
	margin:17px auto 1px;
	}
	#design .l-main-contents-view-list-box,#illuatration .l-main-contents-view-list-box,#others .l-main-contents-view-list-box{
		width:100%;
		margin:0 auto;
	}
	#design .l-main-contents-view-list---design,#illustration .l-main-contents-view-list---design,#others .l-main-contents-view-list---design{
		width:90vw;
	}
	#design .l-main-contents-view-list---design ul,#illustration .l-main-contents-view-list---design ul,#others .l-main-contents-view-list---design ul{
		width:90vw;
	}
	#design .l-main-contents-view-list---design ul li img,#illustration .l-main-contents-view-list---design ul li img,#others .l-main-contents-view-list---design ul li img{
		width:25vw;
	}
	#design .l-main-contents-image-box---design{
		background-image:url("../images/site-icon-002.png");
		background-size:14.5vw;
	}
	#illustration #l-main-contents-image-box---illustration{
		width:34vw;
		margin-top:12px;
		background-size:11.8vw;
	}
	.list-pic{
		width:100%;
		height:300px;
	}
	.pic__content{
		top:380px;
		width:80vw;
		max-width:400px;
	}
	.pic__content img{
		width:92%;
	}
	.list-pic .close__text{
		font-size:27px;
	}
	footer{
	height:110px;
}
	

}
/*=======================*/
/*=======================*/
@media only screen and (min-width:600px) and (max-width:700px){
	.l-before-footer-box--text{
		margin-top:-1.7vw;
	}
	.l-main-contents-before-information{
		font-size:12px;
		line-height:16px;
		padding-top:2vw;
	}
	#design main #icon-design-in-top .l-main-contents-image-out-box-2{
		margin-bottom:8vw;
	}

}
/*=======================*/
/*=======================*/
@media only screen and (min-width:700px) and (max-width:1000px){
	.l-main-intro-text-box{
		width:77vw;
		margin-top:40px;
		font-size:12.5px;
		line-height:20px;
	}
	.l-main-intro-text-box-2{
		width:80vw;
		height:30px;
		font-size:13.5px;
		line-height:20px;
		padding:10px 10px 1px 10px;
		border-radius:31px;
		margin-top:8vw;
	}
	.l-main-line---blue{
		width:80vw;
	}
	#l-main-contents-out-box{
		display:none;
	}
	#l-main-2nd-contents-out-box-open-when-wide{
		display:block;	
	}
	#l-main-2nd-contens-open-when-wide-ul{
		display:none;
	}
	.l-main-2nd-contents-out-box-open-when-wide{
		height:37vw;
	}
	.l-main-2nd-contents-box-open-when-wide{
		width:77vw;	
		margin:30px auto 5px;
	}
	.l-main-2nd-contens-open-when-wide ul{
		height:30vw;
	}
	.l-main-2nd-contents-list{
		float:left;
		list-style-type:none;
		width:24vw;
		height:24vw;
		margin-right:2vw;
	}
	.l-main-2nd-contents-list:last-child{
		margin-right:0;
	}
	.l-main-2nd-contents-list---W{
		background-image:url("../images/nav-icon-W.svg");
		background-repeat:no-repeat;
	}
	.l-main-2nd-contents-list---W:hover{
		background-image:url("../images/nav-icon-W-hover-bubble.svg");
		background-repeat:no-repeat;
		height:37vw;
	}
	.l-main-2nd-contents-list---D{
		background-image:url("../images/nav-icon-D.svg");
	}
	.l-main-2nd-contents-list---D:hover{
		background-image:url("../images/nav-icon-D-hover-bubble.svg");
		background-repeat:no-repeat;
		height:37vw;
	}
	.l-main-2nd-contents-list---I{
		background-image:url("../images/nav-icon-I.svg");
	}
	.l-main-2nd-contents-list---I:hover{
		background-image:url("../images/nav-icon-I-hover-bubble.svg");
		background-repeat:no-repeat;
		height:37vw;
	}
	.l-main-2nd-contens-open-when-wide ul li a{
		display:block;
		width:24vw;
		height:24vw;
	}
	#website-intro .l-main-contents-before-logo{
		width:84vw;
		height:7.7vw;
		margin-top:35vw;
	}
	.l-main-contents-before-information{
		font-size:12.5px;
		line-height:19px;	
		padding-top:3vw;
	}
	.l-main-contents-box,icon-web-in-top{
		width:87vw;
	}
	.l-main-contents-icon img{
		width:22vw;
		margin-bottom:10px;
	}
	.l-main-contents-text{
		font-size:13px;
	}
	.l-main-contents-image-out-box{
		width:40vw;
		margin:0 auto;
	}
	#website-intro #l-main-contents-image-box---website{
		width:30vw;
		height:9vw;
		background-size:6.2vw;
	}
	#website-intro .l-main-contents-view-list-box{
		width:92vw;
	}
	#website-intro .l-main-contents-view-list---design{
		width:90vw;
	}
	#website-intro .l-main-contents-view-list---design ul li img{
		width:27vw;
	}
	#website-intro main .l-main-contents-box{
		width:85vw;
		margin:0 auto;
	}
	#design main,#others main{
		width:80vw;
	}
	#design .l-main-contents-box,#illustration .l-main-contents-box,#others .l-main-contents-box{ 
		width:80vw;
		margin:0 auto;
	}
	#design .l-main-contents-icon,#others .l-main-contents-icon{
		width:80vw;	
	}
	#design .l-main-contents-text{
		margin:0 auto;
	}
	
	#design main #icon-design-in-top .l-main-contents-image-out-box-2,#illustration main #icon-illustration-in-top .l-main-contents-image-out-box-2{
		margin-bottom:10vw;
	}
	#design #l-main-contents-image-box---design,#illustration #l-main-contents-image-box---illustration{
	width:43vw;
	height:14vw;
	margin:17px auto 1px;
	}
	#design .l-main-contents-image-box---design{
		background-image:url("../images/site-icon-002.png");
		background-size:14vw;
	}
	#design .l-main-contents-view-list-box,#illustration .l-main-contents-view-list-box,#others .l-main-contents-view-list-box{
		width:100%;
		margin:0 auto;
	}
	#design .l-main-contents-view-list---design,#illustration .l-main-contents-view-list---design,#others .l-main-contents-view-list---design{
		width:90vw;
	}
	#design .l-main-contents-view-list---design ul,#illustration .l-main-contents-view-list---design ul,#others .l-main-contents-view-list---design ul{
		width:90vw;
	}
	#design .l-main-contents-view-list---design ul li img,#illustration .l-main-contents-view-list---design ul li img,#others .l-main-contents-view-list---design ul li img{
		width:25vw;
		margin-bottom:1.2vw;
	}
	#illustration #l-main-contents-image-box---illustration{
		width:34vw;
		margin-top:12px;
		background-size:11.5vw;
	}
	#others .l-main-contents-text{
		margin:0 auto;
		width:314px;
	}
	.list-pic{
		height:400px;
	}
	.pic__content{
		top:414px;
		width:80vw;
		max-width:600px;
	}
	.pic__content img{
		width:92%;
	}
	.list-pic .close__text{
		font-size:27px;
		padding-right:3px;
	}
	
}
	
	
/*=======================*/
/*=======================*/
@media only screen and (min-width:700px) and (max-width:800px){
	.l-before-footer-box--text{
		margin-top:-1.55vw;
	}
	#website-intro .l-main-contents-before-logo{
		height:6.5vw;
	}
	.l-main-contents-before-information{
		font-size:12.5px;
		line-height:19px;	
		padding-top:1vw;
	}

}
/*=======================*/
/*=======================*/
@media only screen and (min-width:800px) and (max-width:900px){
	.l-before-footer-box--text{
		margin-top:-1.55vw;
	}
	#website-intro .l-main-contents-before-logo{
		height:7vw;
	}
	.l-main-contents-before-information{
		font-size:13px;
		line-height:19px;	
		padding-top:1.4vw;
	}
}
/*=======================*/
/*=======================*/
@media only screen and (min-width:900px) and (max-width:1000px){
	.l-before-footer-box--text{
		margin-top:-1.3vw;
	}
	#website-intro .l-main-contents-before-logo{
		height:6.8vw;
	}
	.l-main-contents-before-information{
		font-size:13.5px;
		line-height:20px;
		padding-top:1.2vw;
	}
	
	
}
/*=======================*/
/*=======================*/
/*=======================*/
/*=======================*/
@media only screen and (min-width:1000px){
	main{
		width:100%;	
		height:87vw;
	}
	.l-main-intro-text-box{
		width:90vw;
		max-width:1200px;
		padding-top:50px;
		margin:0 auto;
		text-align:center;
		font-size:14px;
		line-height:27px;
	}
	.l-main-intro-text-box-2{
		width:100%;
		height:30px;
		font-size:14.5px;
		line-height:20px;
		padding:10px 10px 1px 10px;
		border-radius:0px;
		margin-top:8vw;
	}
	.l-main-contents-box{
		float:left;
		height:40vw;
	}
	.l-main-line---blue{
		width:80vw;
	}
	#l-main-contents-out-box{
		display:none;
	}
	#l-main-2nd-contents-out-box-open-when-wide{
		display:block;	
	}
	.l-main-2nd-contents-out-box-open-when-wide{
		height:40vw;
	}
	.l-main-2nd-contents-box-open-when-wide{
		width:87vw;	
		margin:30px auto 5px;
	}
	.l-main-2nd-contens-open-when-wide ul{
		height:30vw;
	}
	.l-main-2nd-contents-list{
		float:left;
		list-style-type:none;
		width:27vw;
		height:27vw;
		margin-right:2vw;
	}
	.l-main-2nd-contents-list:last-child{
		margin-right:0;
	}
	.l-main-2nd-contents-list p{
		font-size:12.7px;
		text-align:center;
		width:260px;
		margin:0 auto;
		line-height:17px;
	}
	.l-main-2nd-contents-list---W{
		background-image:url("../images/nav-icon-W.svg");
		background-repeat:no-repeat;
	}
	.l-main-2nd-contents-list---W:hover{
		background-image:url("../images/nav-icon-W-hover.svg");
		background-repeat:no-repeat;
	}
	.l-main-2nd-contents-list---D{
		background-image:url("../images/nav-icon-D.svg");
	}
	.l-main-2nd-contents-list---D:hover{
		background-image:url("../images/nav-icon-D-hover.svg");
		background-repeat:no-repeat;
	}
	.l-main-2nd-contents-list---I{
		background-image:url("../images/nav-icon-I.svg");
	}
	.l-main-2nd-contents-list---I:hover{
		background-image:url("../images/nav-icon-I-hover.svg");
		background-repeat:no-repeat;
	}
	.l-main-2nd-contens-open-when-wide ul li a{
		display:block;
		width:24vw;
		height:24vw;
	}
	.l-main-2nd-contents-list-speach-bubble{
		display:block;
		margin:-20px auto 10px;
		width:20vw;
		height:7vw;
		background-image:url("../images/speach-bubble-1.svg");
		background-repeat:no-repeat;
	}
	#l-main-2nd-contens-open-when-wide-ul{
		height:18vw;
	}
	.l-main-2nd-contents-bottom-image-box{
		display:block;
		margin:-20px auto 10px;
		width:80vw;
		height:7vw;
		background-image:url("../images/image-W-D-I.png");
		background-size:20%;
		background-repeat:repeat-x;
	}
	section{
		clear:both;
	}
	.l-before-footer-box--text{
		margin-top:-1.2vw;
		padding-rignt:5vw;
	}
	#website-intro main,.l-main-contents-box,#illustration main,#others main{
		width:85vw;
		margin:0 auto;
	}
	.l-main-contents-box,#icon-web-in-top,#icon-illustration-in-top{
		width:87vw;
		margin:0 auto;
	}
	.l-main-contents-icon img{
		width:22vw;
		margin-bottom:10px;
	}
	.l-main-contents-text{
		font-size:13px;
	}
	.l-main-contents-image-out-box{
		width:40vw;
		margin:0 auto;
	}
	#website-intro #l-main-contents-image-box---website{
		width:30vw;
		height:9vw;
		background-size:6.2vw;
	}
	#website-intro .l-main-contents-view-list-box{
		width:92vw;
	}
	#website-intro .l-main-contents-view-list---design{
		width:90vw;
	}
	#website-intro .l-main-contents-view-list---design ul li img{
		width:27vw;
	}
	#website-intro main .l-main-contents-box{
		width:85vw;
		margin:0 auto;
	}
	#website-intro .l-main-contents-before-logo{
		width:55vw;
		max-width:600px;
		height:7vw;
		max-height:80px;
		margin-top:35vw;
	}
	.l-main-contents-before-information{
		font-size:14px;
		line-height:22px;
		padding-top:1.4vw;
	}
	#website-intro main{
		height:112vw;
	}
	#website-intro main{
		max-width:1200px;
		margin:0 auto;
	}
	.l-main-contents-image-out-box{
		margin-bottom:4vw;
	}
	#design .l-main-contents-text-long{
		width:28vw;
	}
	#design main,#illustration main,#others main{
		width:90vw;
		height:130vw;
	}
	#design .l-main-contents-image-out-box,#illustration .l-main-contents-image-out-box{
		margin-bottom:5vw;
	}
	#design #l-main-contents-image-box---design,#illustration #l-main-contents-image-box---illustration{
	width:40vw;
	height:10vw;
	}
	#design .l-main-contents-image-box---design,#illustration .l-main-contents-image-box---illustration{
		background-size:10vw;
	}
	#others .l-main-contents-view-list---design ul,#others .l-main-contents-view-list---design{
		width:87vw;
		margin:0 auto;
	}
	#design .l-main-contents-view-list---design ul li,#illustration .l-main-contents-view-list---design ul li,#others .l-main-contents-view-list---design ul li{
		margin-right:1.2vw;
	}
	#design .l-main-contents-view-list---design ul li img,#illustration .l-main-contents-view-list---design ul li img,#others .l-main-contents-view-list---design ul li img{
		width:20vw;
		margin-bottom:0.8vw;
	}
	#design .l-main-contents-view-list-box,#illustration .l-main-contents-view-list-box,#others .l-main-contents-view-list-box{
		width:85vw;
		margin:0 auto;
	}
	#others main{
		margin:0 auto;
		height:150vw;
	}
	#others .l-main-contents-text-long{
		width:30vw;
	}
	#others main #icon-design-in-top.l-main-contents-box{
		margin:0 auto;
	}
	.list-pic{
		height:400px;
	}
	.pic__content{
		top:400px;
		width:80vw;
		max-width:600px;
	}
	.pic__content img{
		width:92%;
	}
	.list-pic .close__text{
		font-size:27px;
		padding-right:3px;
	}
	
}

/*=======================*/
/*=======================*/
@media only screen and (min-width:1200px) {
	.l-main-intro-text-box,.l-main-intro-illustration-box,.l-main-contents-out-box,.l-main-2nd-contents-out-box-open-when-wide{
		max-width:1200px;
		margin:0 auto;
	}
	#design main,#design .l-main-contents-box,#illustration main,#illustration .l-main-contents-box{
		max-width:1200px;
/*		height:130vw;*/
	}
	#design #l-main-contents-image-box---design,#illustration #l-main-contents-image-box---illustration{
		max-width:700px;
		max-height:170px;
	}
	#design .l-main-contents-image-out-box,#illustration .l-main-contents-image-out-box{
		margin-bottom:8vw;
	}
}