@charset "UTF-8";
/* CSS Document */
/*デザイン選択ページのCSS*/

#design #wrap #contents h2 {
	font-size: 187.5%;
	color: #4B4B4B;
		margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
	font-weight: normal;
}
#design #wrap #contents {
	margin-bottom: 100px;
	padding-top: 20px;
}
#contents .design_title {
	color: #FFF;
	background-color: #4B4B4B;
	font-weight: normal;
	text-align: center;
	height: 30px;
}






/*２カラムのデザインCSS*/
#contents #sk8er011,
#contents #rabbit007,
#contents #logo001,
#contents #sweetmusic010_01,
#contents #sweetmusic010_02,
#contents #loveburger003,
#contents #initial013 {
	border-bottom-width: 10px;
	border-bottom-style: solid;
	border-bottom-color: #454545;
	margin-bottom: 15px;
	clear: both;
}


#design #wrap #contents .column_left {
	float: left;
	margin-top: -30px;
}
#design #wrap #contents .column_right {
	float: left;
	width: 50%;
}


#design #wrap #contents #rabbit007 .column_right {
	background-image: url(../img/design_007_nav_bg.jpg);
	height: 428px;
}
#design #wrap #contents #loveburger003 .column_right {
	background-image: url(../img/design_003_nav_bg.jpg);
	height: 428px;
}

#design #wrap #contents #logo001 .column_right.clearfix {
	background-image: url(../img/design_001_nav_bg.jpg);
		height: 428px;
}
#design #wrap #contents #sweetmusic010_01 .column_right.clearfix {
	background-image: url(../img/design_010_01_nav_bg.jpg);
		height: 642px;
}

#design #wrap #contents #initial013 .column_right.clearfix {
	background-image: url(../img/design_013_nav_bg_bottom.jpg);
	height: 458px;
}

#design #wrap #contents #initial013 .column_right .margin {
	margin-top: 45px;
}

#design #wrap #contents #initial013 .column_right li {
	margin-top: 10px;

}

#design #wrap #contents #initial013 .initialselect{
	background-image: url(../img/design_013_nav_bg_top.jpg);
		height: 184px;
		float: left;
	}
#design #wrap #contents #initial013 .initialselect li{
		margin-top: 125px;
		padding-right:10px;
		padding-left:205px;		

	}

#design #wrap #contents #sweetmusic010_02 .column_right {
	background-image: url(../img/design_010_02_nav_bg.jpg);
	height: 428px;
	float: right;
}
#design #wrap #contents #sk8er011 .column_right {
	background-image: url(../img/design_011_nav_bg.jpg);
	height: 428px;
	float: right;
}

#design #wrap #contents #sweetmusic010_02 .column_left,
#design #wrap #contents #sk8er011 .column_left {
	float: right;
}





#design #wrap #contents .column_right li {
	float: left;
	margin-top: 10px;
	margin-right: 8px;
	margin-bottom: 10px;
	margin-left: 7px;
}





/*１カラムのデザインCSS*/

/*３Dメガネ猫*/
#design #wrap #contents #glasses_cat004 {
	background-image: url(../img/design_004_image.png);
	background-repeat: no-repeat;
	border-bottom-width: 10px;
	border-bottom-style: solid;
	border-bottom-color: #454545;
	height: 750px;
	margin-bottom: 15px;
	width: 470px;
	float: left;
}
#design #wrap #contents #glasses_cat004 ul {
	padding-top: 300px;
	padding-left: 31px;
}
#design #wrap #contents #glasses_cat004 ul li {
	margin-top: 15px;
	margin-bottom: 10px;
}





/*バーガーフォン*/
#design #wrap #contents #berger_phone006 {
	background-image: url(../img/design_006_image.png);
	background-repeat: no-repeat;
	border-bottom-width: 10px;
	border-bottom-style: solid;
	border-bottom-color: #454545;
	height: 750px;
	margin-bottom: 15px;
	width: 470px;
	float: right;
}
#design #wrap #contents #berger_phone006 ul {
	padding-top: 545px;
	margin-left: 4px;
	
}
#design #wrap #contents #berger_phone006 ul li {
	display: inline;
	margin-right: 3px;
	margin-left: 3px;

}




/*スマホで閲覧した時に見やすく画像が拡大・フロートも解除*/
/*２カラム*/

@media screen and (max-width: 1000px) {
#design #wrap #contents .column_left,
#design #wrap #contents .column_right {
          float: none;
		  margin-right:auto;
		  margin-left:auto;		  
	 }
	 
	 
#design #wrap #contents #initial013 .column_left,
#design #wrap #contents #sweetmusic010_02 .column_left,
#design #wrap #contents #sweetmusic010_02 .column_right,
#design #wrap #contents #sk8er011 .column_left,
#design #wrap #contents #sk8er011 .column_right {
          float: none;
		  margin-right:auto;
		  margin-left:auto;		  
}

#design #wrap #contents .column_left{
			  margin-top:-60px;
	}
#design #wrap #contents .column_left img {
    	  width: 100%;
		  height:auto;	
}
#design #wrap #contents #sweetmusic010_02 .column_left.clearfix img,
#design #wrap #contents #sk8er011 .column_left.clearfix img{
    	  width: 100%;
		  height:auto;	
	}



#design #wrap #contents #rabbit007 .column_right{
			margin:0;
		 	width: 960px;
		  height:auto;	
			background-image: url(../img/design_007_nav_bg_big.jpg);
}
#design #wrap #contents #loveburger003 .column_right{
			margin:0;
		 	width: 960px;
		  height:auto;	
			background-image: url(../img/design_003_nav_bg_big.jpg);
}
#design #wrap #contents #logo001 .column_right.clearfix{
			margin:0;
		 	width: 960px;
		  height:auto;	
				background-image: url(../img/design_001_nav_bg_big.jpg);
}
#design #wrap #contents #sweetmusic010_01 .column_right.clearfix{
			margin:0;
		 	width: 960px;
		  height:auto;	
				background-image: url(../img/design_010_01_nav_bg_big.jpg);
}

#design #wrap #contents #initial013 .column_right.clearfix {
	margin:0;
		 	width: 960px;
		  height:916px;	
				background-image: url(../img/design_013_nav_bg_bottom_big.jpg);
		
}
#design #wrap #contents #initial013 .initialselect{
	float: none;
		  margin-right:auto;
		  margin-left:auto;	
	margin:0;
	margin-bottom:0px;
		 	width: 740px;
		  height:244px;	
				background-image: url(../img/design_013_nav_bg_top_big.jpg);
				padding-top: 125px;
		padding-right:20px;
		padding-left:200px;	
	}

#design #wrap #contents #initial013 .initialselect li a img{
	width: 100%;
		  height:auto;	
	}


#design #wrap #contents #initial013 .column_right .margin {
margin-top: 70px;
}
#design #wrap #contents #initial013 .column_right li {
	padding-top: 10px;
	margin-bottom:0px;
}





#design #wrap #contents #sweetmusic010_02 .column_right.clearfix{
			margin:0;
		 	width: 960px;
		  height:auto;	
				background-image: url(../img/design_010_02_nav_bg_big.jpg);
}
#design #wrap #contents #sk8er011 .column_right{
			margin:0;
		 	width: 960px;
		  height:auto;	
			background-image: url(../img/design_011_nav_bg_big.jpg);
}



#design #wrap #contents .design_title{
 		  height:60px;	
	font-size: 200%;
}

#design #wrap #contents .column_right img{
			margin-left:4px;
	 	    width: 300px;
 		    height:auto;	
}
body　{
    margin: 0;
}

#design #wrap #contents #sweetmusic010_01 .column_right li,
#design #wrap #contents #initial013 .column_right li
 {
	margin-top: 13px;
}


/*３Dメガネ猫*/
#design #wrap #contents #glasses_cat004 {
	background-image: url(../img/design_004_image_big.png);
 		    height:1528px;	
			width:960px;
}
#design #wrap #contents #glasses_cat004 img{
	 	    width: 356px;
 		    height:auto;	
}

#design #wrap #contents #berger_phone006 img{
	 	    width: 300px;
 		    height:auto;	
}
#design #wrap #contents #glasses_cat004 ul {
	padding-top: 610px;
	padding-left: 65px;
}
#design #wrap #contents #glasses_cat004 ul li {
	margin-top: 40px;
}




/*バーガーフォン*/
#design #wrap #contents #berger_phone006 {
	background-image: url(../img/design_006_image_big.png);
	width:960px;
	height: 1528px;
}
#design #wrap #contents #berger_phone006 ul {
	padding-top: 1120px;
	margin-left: 2px;
}
#design #wrap #contents #berger_phone006 ul li {
	display: inline;
	margin-left: 11px;
}


}



/*モーダルウィンドウをスマホで閲覧した時に見やすく画像が拡大・フロートも解除*/

@media screen and (max-height: 750px) {
	.modal-content {padding:10px}
	.modal-content h1 {font-size:100%; margin-bottom:3px}
	.modal-content p {font-size:75%;width:70%; margin:auto}
	a.modal-close:hover {opacity:1}
}
@media screen and (max-width: 750px) {
	.modal-content {padding:10px}
	.modal-content img {max-height:inherit; width:100%; height:auto}
	.modal-content p {font-size:75%; width:100%;}
	a.modal-close:hover {opacity:1}
}









/*デザイン下層ページ*/
#contents #design_header {
	background-image: url(../img/step23.png);
	background-repeat: no-repeat;
	background-position: center top;
	margin-top: 40px;
	padding-top: 50px;
}
#design_header .back_to_step1 {
	text-align: right;
	margin-top: -50px;
	margin-bottom: 50px;
}
#design_header h2 {
	font-size: 187.5%;
	text-align: center;
	color: #4B4B4B;
	font-weight: normal;
}





/*デザインページ第２ナビ（タブ）*/

/*ナビ部分のCSS*/
#design_header #nav2 {
	border-bottom-width: 10px;
	border-bottom-style: solid;
	border-bottom-color: #4B4B4B;
	background-color: #A5CB00;
}
#design_header #nav2 li {
	float: left;
	height: 250px;
	margin-right: 10px;
	width: 109px;
}
#design_header #nav2 li:hover {
	opacity:0.7;
}


#design_header #nav2 li:first-child {
	margin-left: 8px;
}





/*タブのCSS*/

.ChangeElem_Panel{
  display: none;
}

.is-active img{
	visibility: hidden;
}
#wrap #contents #all_design .go_to_trinity .pink_back2 a {
	color: #FFF;
	display: block;
}


#contents #design_header #nav2 .ChangeElem_Btn.tshirt {
	background-image: url(../img/item_tshirt_on.png);
	background-repeat: no-repeat;
}
#contents #design_header #nav2 .ChangeElem_Btn.vtshirt {
	background-image: url(../img/item_vtshirt_on.png);
	background-repeat: no-repeat;
}
#contents #design_header #nav2 .ChangeElem_Btn.ladies_tshirt {
	background-image: url(../img/item_ladies_tshirt_on.png);
	background-repeat: no-repeat;
}
#contents #design_header #nav2 .ChangeElem_Btn.raglan_tshirt {
	background-image: url(../img/item_raglan_on.png);
	background-repeat: no-repeat;
}
#contents #design_header #nav2 .ChangeElem_Btn.long_tshirt {
	background-image: url(../img/item_long_tshirt_on.png);
	background-repeat: no-repeat;
}
#contents #design_header #nav2 .ChangeElem_Btn.long_raglan_tshirt {
	background-image: url(../img/item_long_raglan_on.png);
	background-repeat: no-repeat;
}
#contents #design_header #nav2 .ChangeElem_Btn.parka {
	background-image: url(../img/item_parka_on.png);
	background-repeat: no-repeat;
}
#contents #design_header #nav2 .ChangeElem_Btn.sweat {
	background-image: url(../img/item_sweat_on.png);
	background-repeat: no-repeat;
}
#contents #design_header #nav2 .ChangeElem_Btn.bag {
	background-image: url(../img/item_bag_on.png);
	background-repeat: no-repeat;
}



/*デザインページ、タブ以下のCSS*/

#contents p {
	color: #4B4B4B;
	text-align: center;
	line-height: 1.8em;
}

#contents .design_item .point {
	padding-right: 30px;
	padding-left: 30px;
	margin-top: 10px;
	margin-bottom: 10px;
}
#design_header .pink_back {
	background-color: #FF8296;
	color: #FFF;
	font-size: 125%;
	line-height: 2em;
	font-weight: normal;
	text-align: center;
	border-radius: 1em;
	margin-top: 20px;
	margin-bottom: 20px;
}
#design_header .brown_back {
	line-height: 2em;
	color: #FFF;
	background-color: #4B4B4B;
	text-align: center;
	font-weight: normal;
}



#contents h3 {
	font-size: 187.5%;
	line-height: 1.5em;
	color: #FFF;
	text-align: center;
	margin-bottom: 25px;
	font-weight: normal;
	padding-right: 40px;
	padding-left: 40px;
}
#contents .design_item h3 .text  {
	background-color: #4B4B4B;
	padding-right: 40px;
	padding-left: 40px;
	padding-bottom: 5px;
		padding-top: 5px;
	line-height: 1.3em;

}
#contents .sumple {
	margin-bottom: 35px;
	clear: both;
}
#contents p .pink {
	color: #FF8296;
}
#contents .design_item {
	background-color: #FFF;
}

#contents h4 {
	color: #FFF;
	background-color: #4B4B4B;
	line-height: 2em;
	margin-right: 330px;
	margin-bottom: 20px;
	margin-left: 330px;
	text-align: center;
	font-weight: normal;
}
#contents .border {
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #4B4B4B;
	margin-top: 20px;
}
#contents .border_price {
		border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #4B4B4B;
	margin-top: 20px;
	padding-bottom: 20px;
}

#contents .design_item .border .size30,
#contents .design_item .border_price .size30 {
	font-size: 187.5%;
	font-family: "mplus-1p-regular", "メイリオ", Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;/*webフォント設定*/
	line-height: 1.4em;
}
.go_to_customize .size30 {
	font-size: 187.5%;
	line-height: 1.3em;
	font-weight: bold;
}
#contents .design_item .border .color_sumple {
	margin-top: 10px;
}
#contents .go_to_customize {
	color: #FFF;
	background-color: #A5CD00;
	padding-top: 25px;
	padding-bottom: 25px;
	margin-top: 30px;
}
#contents .go_to_customize .size20 {
	font-size: 125%;
	font-weight: normal;
}
#contents .go_to_trinity {
	background-color: #FFF;
	padding-top: 35px;
	padding-bottom: 30px;
	border-bottom-width: 10px;
	border-bottom-style: solid;
	border-bottom-color: #4B4B4B;
	margin-bottom: 90px;
}
#contents .go_to_trinity .pink2 {
	font-size: 125%;
	font-weight: bold;
	color: #FF8296;
	margin-bottom: 25px;
}

#contents .go_to_trinity .pink_back2 {
	margin-top: 50px;
	margin-bottom: 50px;
	margin-left: auto;
	margin-right: auto;
	width: 650px;
}
#contents .go_to_trinity .pink_back2:hover {
	opacity:0.7;
}

#contents .go_to_trinity .left {
	background-image: url(../img/item_info.png);
	background-repeat: no-repeat;
	background-position: left center;
	margin-left: 135px;
	padding-left: 85px;
	text-align: left;
}
#contents .design_item .small {
	font-size: 75%;
}
#contents #bag .design_item .border .size30 .small50 {
	font-size: 50%;
}


@media screen and (max-width: 1000px) {
#design_header #nav2 li:hover {
	opacity:1;
	}
			p {
			font-size: 187.5%;
			padding-left: 30px;
			padding-right: 30px;
		}

		#contents .border_price,
        #contents .border_price .size30 {
						font-size: 53%;
			}
			
		#contents .go_to_customize .size20
		{
						font-size: 87.5%;			
			}
		#contents .go_to_customize .size30{
							font-size: 100%;						
			}
		
		#contents .left{
							font-size: 125%;						
			}
			
		#contents .go_to_trinitybg,
		#contents .color_sumple,
		#contents .sumple{
			padding-left: 0px;
			padding-right: 0px;

				}
		#contents .design_item .small {
				font-size: 150%;						
			
			}
		#contents h4 {
							font-size: 125%;						

			}
		#contents .border_price h4 {
			font-size: 200%;						
		
			}
		#contents .go_to_trinity .pink_back2 {
			width: 795px;
			}
	    #contents .go_to_trinity .pink_back2 img{
		width: 100%;
		    height: auto;
		}
			
}



/*モーダルウィンドウのCSS*/

.modal-overlay {
    z-index:2;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
	height:100%;/*for old Safari*/
    height:100vh;
    background-color:rgba(0,0,0,.5)}
.modal-overlay (:target) {height:100%\9} /* IE9,10 */

#contents .modal-open img {
	float: right;
	margin-right: 30px;
}
#contents .modal-open img:hover {
	cursor:pointer;
	opacity:0.8;
}
.modal-content {
	position:fixed;
	display:none;
	z-index:3;
	margin:10px;
	background-color:rgba(0,0,0,.65)
}
a.modal-close {
	position:absolute;
	top:5px;
	right:5px;
	text-decoration:none
}
a.modal-close:hover {
	cursor:pointer;
	opacity:0.7;
}
#contents #modal1 ul {
	padding-top: 40px;
	padding-right: 65px;
	padding-bottom: 15px;
	padding-left: 55px;
	max-width: 700px;
}

#contents #modal1 ul li {
	float: left;
	margin-left: 10px;
}
#contents #modal1 ul .layout{
	margin-left: 75px;
	}

#wrap #modal1 .clearfix {
	padding-top: 40px;
	padding-right: 65px;
	padding-bottom: 15px;
	padding-left: 55px;
}
#modal1 .clearfix .single {
		margin-left: 0px;

}