@charset "utf-8";
/* CSS Document */
/*********************************************
 
	         　共通
 
*********************************************/
body{
	font-family:'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-size:14px;	
	line-height:1.2rem;
	color: #343434;
}

/*　画面サイズが760pxからはここを読み込む　*/
@media screen and (max-width:760px) { 
body{font-size:12px;}	
}

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 1 !important;
	display: block ;
	z-index: 99999;
}

#girdle .contents_wrapper{
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
	padding: 50px 0;

}



/*　画面サイズが990pxからはここを読み込む　*/
@media screen and (max-width:990px) { 
	#girdle .contents_wrapper{
		padding: 5% 3%;
		box-sizing: border-box;
	}
}


div.read{
	text-align: center;
}

/* 整列部分 */
.list{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.list img{width: 100%}

.list li{margin-bottom: 2%;}

#girdle .list.cont2 li{
	width: 49%;
}
#girdle .list.cont3 li{width: 32%;}
#girdle .list.cont4 li{
	width: 23%;
	margin-bottom: 50px;
}
/* 見出し */
#girdle h2{
	font-size: 1.1rem;
    line-height: 3.5rem;
	margin: 0 0 3%;
	text-align: center;
	letter-spacing: 0.2rem;
}
#girdle h2 span{
	font-family: 'Dancing Script', cursive;
	font-style: italic;
	font-weight: 700;
    font-size: 3rem;
	display: block;	
}

#girdle #choose h3{
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-style: normal;
	font-size: 1rem;
    line-height: 2.8rem;
	margin: 0 0 3%;
	text-align: center;
	letter-spacing: 0.2rem;
}
#girdle #choose h3 span{
	font-family: 'Dancing Script', cursive;
	font-weight: 700;
    font-size: 2rem;
	display: block;	
}

#girdle h4{
	text-align: center;
	margin-bottom: 2%;
}

/* テキスト関連 */
#girdle .contents_wrapper > p{
	text-align: center;
}
p.party{
	line-height: 2.5rem;
}

/* ボタン */
#girdle div.more_btn a{
	display: block;
	width: 200px;
	text-align: center;
	background-color: #000;
	color: #fff;
	margin: 0 auto;
	padding: 10px 0;
	transition: .5s;	
}

#girdle div.more_btn a:hover{
	background: -webkit-linear-gradient(30deg, #f97e7e 0%, #bb8dc2 50%, #579cdc 100%);
	background: -o-linear-gradient(30deg, #f97e7e 0%, #bb8dc2 50%, #579cdc 100%);
	background: linear-gradient(120deg, #f97e7e 0%, #bb8dc2 50%, #579cdc 100%);
}

#girdle #recommend_aria.contents_wrapper{
    padding:0;
}
#recommend_bn{
	margin-bottom: 0 !important;
	padding-bottom: 50px;
}


/*　画面サイズが480pxからはここを読み込む　*/
@media screen and (max-width:480px) { 
#girdle h2 img{
	width: 90%;
}	

#girdle ul.list.cont4 li {
	width: 44%;
	margin-bottom: 10%;
}

#girdle h2{
	line-height: 2.5rem;
	font-size: 1rem;
	margin: 15% 0 10%;
}
#girdle h3{margin-top: 10%;}
#girdle h2 span{
	font-size: 2rem;
}
.bg2{
	padding: 0 0 10%;
	margin-top: -1%;
	background-color: #FFFFFF;
}
div.read{
	padding: 5% 0;
	line-height: 1.2rem;
	text-align: left;
}

#girdle #choose h3 span{
    line-height: 1rem;
}

#girdle #choose h3 span{
    font-size: 1.5rem;
}
#girdle #recommend_aria.contents_wrapper{
    padding:0 3%;
}
}

/* clearfix
--------------------------------*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
	overflow: hidden;
}
/* Hides from IE Mac */
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}

/* アンカーリンクの位置
--------------------------------*/

a.anchor{
    display: block;
    padding-top: 200px;
    margin-top: -200px;
}

a.anchor2{
    display: block;
    padding-top: 210px;
    margin-top: -210px;
}

@media screen and (max-width:480px) { 

a.anchor2{
    display: block;
    padding-top: 200px;
    margin-top: -200px;
}
}


/* hover image
--------------------------------*/
a:hover img {
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}

/* font
--------------------------------*/
.bold { font-weight:bold; }
.red {  color:#af0000; }
.white{color: #fff;}
.color_pink{color: #c83069;}


/* bg
--------------------------------*/
.bg1{
	background-color: #f4f8fa;
}

.bg2{
	background-color: #fff;
}

.bg3{
	background-image: url(/img/usr/underwear/event/girdle/bg_shorts.jpg);
	padding:0 0 50px;
}
.bg5{
	background-image: url(/img/usr/underwear/event/girdle/postpartum_bg.jpg);
	padding:0 0 50px;
}
.bg6{
	background-color: #b7eaff;
	padding:0 0 50px;
}
	
div.more{
	text-align: center;
}

div.more img{
	max-width: 668px;
	width: 100%;
}

/*********************************************
 
	         　navi
 
*********************************************/
#nav{
	width: 100%;
	background-color: #f4f8fa;
}
#girdle_navi_sp{
	display:none;
}

#girdle .girdle_navi{
	max-width: 980px;
	width:100%;
	margin:0 auto 0;
	padding-top:60px; 
}

#girdle .girdle_navi ul{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#girdle .girdle_navi ul li{
	width:17%;
	margin-bottom:30px;
}

#girdle .girdle_navi ul li img{
	max-width: 146px;
	width: 95%;
}

#girdle .girdle_navi2{
	width:100%;
	margin:0 auto;
	background-color:rgba(245,64,145,0.9);
	opacity:0;
	top: 79px;
}


#girdle .girdle_navi2 ul{
	max-width: 980px;
	width:100%;
	margin:0 auto;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#girdle .girdle_navi2 ul li{
	padding: 7px 2%;
	box-sizing: border-box;
	text-align: center;
}

#girdle .girdle_navi2 ul li:last-child{
	margin-right:0;
}


#girdle .girdle_navi2 ul li a{
	color:#FFF;
	display:block;
}


#girdle .girdle_navi2 ul li a:after{
	content: url("images/arrow_pc.png");
}


#girdle .girdle_navi2 ul li a:hover{
	opacity:0.5;
}

/*　画面サイズが700pxからはここを読み込む　*/
@media screen and (max-width:700px) { 
#girdle .girdle_navi{
	display:none;
}

#girdle .girdle_navi2{
	display:none;
}

#girdle_navi_sp{
	width:100%;
	display: block;
	top: 78px;
}
#girdle_navi_sp .category_wrapper .category li {
	width: 18%;
	}

/*slide
--------------------------------------*/

#girdle_navi_sp img {
	width:100%;
	height:auto;
	border:0;
}

#girdle_navi_sp .category_wrapper {
	box-sizing: border-box;
	position: relative;
	background: #fff;
}

#girdle_navi_sp .category_wrapper .prev, .next {
    position: absolute;
    top: 0px;
    z-index: 5;
}

#girdle_navi_sp .category_wrapper .prev img, .next img {
	width: 50% !important;
}

#girdle_navi_sp .category_wrapper .prev {
    float: left;
	left: 0;
}

#girdle_navi_sp .category_wrapper .next {
    float: right;
	right: 0;
}

#girdle_navi_sp .category_wrapper .prev,
#girdle_navi_sp .category_wrapper .next {
	display: flex;
    width: 4.6%;
	height: 100%;
    justify-content: center;
    align-items: center;
}

#girdle_navi_sp .category_wrapper .category {
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	font-size:0;
	width: 90.8%;
    margin: 0 auto;
	padding: 10px 0;
}

#girdle_navi_sp .category_wrapper .category li {
	width: 23%;
	display: inline-block;
	border-right: 1px dotted #b4b4b4;
}

#girdle_navi_sp .category_wrapper .category li:last-child {
	padding-right:0;
	border-right: none;
}

}

/*********************************************
 
	         　main
 
*********************************************/
#main h1{
	width: 100%;
	text-align: center;
	padding: 20px 0;
	background-color: #f4f8fa;
	margin-bottom: 0;
}

#main h1 img{
	max-width:980px; 
	width: 95%;
}

/*********************************************
 
	         　introduction
 
*********************************************/
#girdle #introduction h2{
	margin: 0 ;
}

#girdle #introduction ul.list{
	justify-content: space-around;
	margin-top:40px;
}

#girdle #introduction ul.list li:first-child{
	width: 68%;
}
#girdle #introduction ul.list li:last-child{
	width: 32%;
}
#girdle #introduction ul.list li:first-child img{
	width: 70%;
	display: block;
	margin: 60px auto;
}
#girdle #introduction ul.list li:last-child img{
	width: 80%;
	display: block;
	margin: 0 auto;
}


/*　画面サイズが570pxからはここを読み込む　*/
@media screen and (max-width:570px) { 
	#girdle #introduction ul.list li{
		width: 40%;
	}
}

/*　画面サイズが480pxからはここを読み込む　*/
@media screen and (max-width:480px) { 
#girdle #introduction ul.list{
	flex: none!important;
}
#girdle #introduction ul.list li{
	width: 100%!important;
}
#girdle #introduction ul.list li:first-child img{
	width: 100%;
	display: block;
	margin: 0 auto;
}
#girdle #introduction ul.list li:last-child img{
	width: 50%;
	display: block;
	margin: 20px auto;
}
	
}

/*********************************************
 
	         　deterioration
 
*********************************************/
#girdle #deterioration{
	background-color: #FFFFFF;
	max-width: 980px;
	margin: 0 auto 50px;
	text-align: center;
	border-radius: 5px;
}

#girdle #deterioration h3{
	margin-bottom: 40px;
}

#girdle #deterioration h3 .hip01{
	margin-right: -30px;
	margin-top: -32px;
}

#girdle #deterioration p{
	margin-top:40px;
}

#girdle #deterioration .deterioration_read img{
	max-width: 676px;
	width: 80%;
}

#girdle #deterioration .contents_wrapper ul li{
	margin-bottom: 30px;
	box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.1);
}

#girdle #deterioration .list{
	align-items: center;
}

#girdle #deterioration .list > div{
	width: 50%;
}
#girdle #deterioration .list > div.deterioration_text{
	text-align: center;
	line-height: 2em;
	padding: 0 5%;
	box-sizing: border-box;
}

#girdle #deterioration li:first-of-type div.list{
	flex-direction: row-reverse;
	background-image: url(/img/usr/underwear/event/girdle/bustup_bg.png);
}

#girdle #deterioration img.deterioration1{
	max-width: 260px;
	width: 80%;
}
#girdle #deterioration img.deterioration2{
	max-width: 251px;
	width: 80%;
}

/*　画面サイズが570pxからはここを読み込む　*/
@media screen and (max-width:570px) { 
	
#girdle #deterioration .list > div{
	width: 100%;
}
	
#girdle #deterioration li div.list{	
	padding: 10%;
	box-sizing: border-box;
}
#girdle #deterioration li:first-of-type div.list{
	flex-direction:row;
}

#girdle #deterioration li:first-of-type div.list,
#girdle #deterioration .list{
	background-image: none;
	background-color: #fff;
}
	
#girdle #deterioration img{
	max-width: none;
	width: 90%;
}
	
#girdle #deterioration h3 .hip01{
	width: 12%;
	margin-right: -18px;
	margin-top: -20px;
}
	
#girdle #deterioration .list > div.deterioration_text{
	margin-top: 5%;
}
#girdle #deterioration .list > div.deterioration_text p{
	text-align: left;
}

#girdle #deterioration .list > div.deterioration_text p br{display: none;}

}

/*********************************************
 
	         　image
 
*********************************************/

#girdle #image h2 {
	margin-top: 40px;
}

#girdle #image h2 .hip02{
	margin-right: -30px;
}

#girdle #image .list.cont3 li{
	width: 34%;
}
#girdle #image .list.cont3 li:nth-child(2){
	width: 22%;
	margin-top: 40px;
}

#girdle #image .list.cont3 li img:nth-child(2){
	margin-top: 20px;
}

/*　画面サイズが570pxからはここを読み込む　*/
@media screen and (max-width:570px) { 

#girdle #image h2 img{
	max-width: none;
	width: 80%;
}

#girdle #image h2 {
	margin-bottom: 40px;
}
	
	#girdle #image h2 .hip02{
		width: 18%;
    margin-right: -50px;
    margin-top: -30px;
}

#girdle #image .list.cont3 li {
    width: 50%;
}
	
#girdle #image .list.cont3 li:nth-child(2) {
    display: none;
}

#girdle #image .list.cont3 li img:nth-child(2){
	margin-top: 10px;
}
	
#girdle #image .list.cont3 li:nth-child(3) {
    margin-top: 13%;
}

}
/*********************************************
 
	         　actually_ttl
 
*********************************************/


#girdle .actually_ttl{
	text-align: center;
	position: relative;
}
#girdle .actually_ttl img{
	position: absolute;
	top: -460px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.bg3::before{
	content: "";
	background-image: url(/img/usr/underwear/event/girdle/bg_actually_ttl_pc.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top;
	height: 340px;
	width: 100%;
	display: block;
}

/*　画面サイズが570pxからはここを読み込む　*/
@media screen and (max-width:570px) { 

#girdle .actually_ttl img {
	width: 78%;
}
	
#girdle .actually_ttl img{
	position: absolute;
	top: -250px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
	
.bg3::before{
	content: "";
	background-image: url(/img/usr/underwear/event/girdle/bg_actually_ttl_sp.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top;
	height: 240px;
	width: 100%;
	display: block;
}

}

/*********************************************
 
	         　merit
 
*********************************************/
#girdle #merit h2 img{
	margin-bottom: 30px;
}

#girdle #merit ul{
	justify-content: center;
	
}

#girdle #merit ul:nth-child(2) {
    margin-bottom: 60px;
}

#girdle #merit ul.reason li{
	margin-right: 2%;
	margin-bottom: 20px;
}

#girdle #merit #fade_img,
#girdle #merit #fade_img2{
	margin-right: 1%;
	position: relative;
	width: 470px;
	height: 396px;
}

#girdle #merit #fade_img img,
#girdle #merit #fade_img2 img{
	position:absolute;
	left:0;
	top:0;
}

#girdle #merit ul.beforeafter .sign{
	text-align: center;
	width: 100%;
	margin-top: 4%;
}
#girdle #merit ul.beforeafter .sign img{
	text-align: center;
	width: 38%;
}

#girdle #merit ul.beforeafter li{
	margin-right: 1%;
}

#girdle #merit .beforeafter{
	text-align: center;
}

#girdle #merit .beforeafter img:first-child{
	margin-bottom: 40px;
}



/*　画面サイズが570pxからはここを読み込む　*/
@media screen and (max-width:570px) { 

.bg2{
	padding: 0;
	}

#girdle #merit{
	padding-top:40px;
}


#girdle #merit #fade_img,
#girdle #merit #fade_img2{
	margin: 0 auto;
	position: relative;
	width: 370px;
	height: 312px;
}


}

/*　画面サイズが480pxからはここを読み込む　*/
@media screen and (max-width:480px) { 
	
#girdle #merit .beforeafter img{
	width: 100%;
}
	
}

/*　画面サイズが320pxからはここを読み込む　*/
@media screen and (max-width:320px) { 
	#girdle #originality .top_pop_rink img{
		width: 40px;
	}
	
}

/*********************************************
 
	         　Choose
 
*********************************************/
#girdle #choose .contents_wrapper.w880{
	max-width: 880px;
	width: 100%;
}

#girdle #choose .contents_wrapper.w880 > img{
	max-width: 880px;
	width: 100%;
}

#girdle #choose .contents_wrapper.w880 ul{
	margin-top: 30px;
}

#girdle #choose .contents_wrapper.w880 ul a img{
	-webkit-transition: ease 400ms;
	-o-transition: ease 400ms;
	transition: ease 400ms;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
#girdle #choose .contents_wrapper.w880 ul a img:hover {
	opacity: 1;
	-webkit-transform: translate3d( 0 , 10px , 0 );
	-ms-transform: translate3d( 0 , 10px , 0 );
	-o-transform: translate3d( 0 , 10px , 0 );
	transform: translate3d( 0 , 10px , 0 );
}

#girdle #choose .choose_wrapper{
	padding: 20px 100px;
	box-sizing: border-box;
	background-position:left 10%, left top,left bottom;
	background-repeat: repeat-y,no-repeat,no-repeat;
	position: relative;
    background-size: contain;
}

#girdle #choose .choose_wrapper::before{
	content: "";
	display: block;
	position: absolute;
	top: 30px;
	left: 30px;
}

#girdle #choose h2{
	margin-top: 40px;
}

#girdle #choose h3{
	display: flex;
	align-items: center;
	line-height: 2.4rem;
	margin-bottom: 60px;

	margin-top: 30px;
}

#girdle #choose h3:before,
#girdle #choose h3:after {
    border-top: 2px dotted;
    content: "";
    display: inline; /* for IE */
    flex-grow: 1;
}

#girdle #choose h3:before {
    margin-right: 2em;
}

#girdle #choose h3:after {
    margin-left: 2em;
}


#girdle #choose .contents_wrapper p.read{
	margin-top: 30px;
	line-height: 2em;
	margin-bottom: 40px;
}


#girdle #choose .choose_wrapper ul.list{
	align-items: center;
	margin-bottom: 30px;
}

#girdle #choose .choose_wrapper .list.pick_up_item {
	justify-content: space-around;
	text-align: center;	
	align-items: center;
}

#girdle #choose .choose_wrapper .list.pick_up_item li{width: 25%;}

#girdle #choose .choose_wrapper div.more_btn{margin-bottom: 80px;}

#girdle #choose .choose_wrapper p.pick_up_img,
#girdle #choose .choose_wrapper p.pick_up_img2{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: center;
	align-items: center;
}


#girdle #choose .pick_up_img{
	margin-bottom: 30px;
}

#girdle #choose a.more_item{
	text-decoration: underline;
	display: block;
	margin-top: 10px;
}


#girdle #choose a.more_item:hover{
	font-weight: bold;
}

#girdle #choose div.girdle_more{
	text-align: center;
	padding-bottom: 50px;
}

#girdle #choose div.girdle_more img{
	max-width: 878px;
	width: 100%;
}

#girdle #feature_11{
	margin-bottom: 0;
}


/*　画面サイズが570pxからはここを読み込む　*/
@media screen and (max-width:570px) { 
	#girdle #choose .contents_wrapper{
		padding:5% 0;
	}
	#girdle #choose .contents_wrapper.w880{
		padding:5% 3%;
	}
	#girdle #choose .choose_wrapper{
		padding: 20px 13%;
	}	
	#girdle #choose .choose_wrapper ul.list{
		margin-bottom: 0;
	}
	#girdle #choose .choose_wrapper::before {
		left: 2%;
	}
	#girdle #choose .list.cont2 li, #girdle #choose .list.cont2 div{
		width: 100%;
	}

	#girdle #choose .choose_wrapper .list.pick_up_item li{width: 44%;}

	#girdle #choose .choose_wrapper div.more_btn{
		margin-bottom: 8%;
	}
	#girdle #choose .list.cont2 li:first-child{
		margin-bottom: 30px;
	}
	#girdle #choose .choose_wrapper .list.cont3 li:nth-of-type(3) .pick_up_img{
		height: auto !important;
	}
	
	#girdle #choose .choose_wrapper .list.pick_up_item{
		align-items:flex-start;
	}

}

@media screen and (max-width:480px) {	
#girdle #choose h3 {
    display: flex;
    align-items: center;
    line-height: 2.4rem;
    margin-top: 20px;
    margin-bottom: 30px;
}

#girdle #choose .contents_wrapper{
		padding:5% 2%;
	}

#girdle .list.cont3 li {
    width: 48%;
}
}

/*********************************************
 
	         　postpartum
 
*********************************************/

#girdle #postpartum h2 {
	margin-top: 40px;
}

#girdle #postpartum p.catch{
	font-weight: bold;
	color: #fff;
	margin-bottom: 30px;
	font-size: 1.1em;
}

#girdle #postpartum p.read{
	color: #fff;
	margin-bottom: 60px;
	line-height: 2em;
}

/*　画面サイズが570pxからはここを読み込む　*/
@media screen and (max-width:570px) { 

#girdle #postpartum p.read{
	margin-bottom: 40px;
}

#girdle #postpartum ul li{
	margin-bottom: 4%;
}


}




/*********************************************
 
	         　item.html
 
*********************************************/
#item_list ul.list.cont4 li {
	width: 25%;
	margin-bottom: 50px;
	padding: 2%;
}
#item_list .contents_wrapper .itemlist_contents ul.list {
    justify-content: flex-start;
}

#item_list h3 {
    text-align: center;
    margin-top: 40px;
}
#item_list h3 img {
	max-width:390px ;
}

#item_list li.itemlist_contents{
    background-image: url(/img/usr/underwear/event/girdle/item_list_bg.jpg);
    border-radius: 5px;
    padding: 5%;
    box-sizing: border-box;
    margin-bottom: 100px;
	position: relative;
}

#item_list li.itemlist_contents:first-child{
    margin-top: 40px;
}

#item_list .itemlist_bg{
	background-color: #fff;
	width: 100%;
}
#item_list .feature_icon{
	position: absolute;
	top: -50px;
	left: 44.5%;
	width: 10%;
}

#item_list .feature_icon img{
	display: block;
	width: 100%;
}

#item_list p.item_name {
    padding: 5% 0;
    text-align: center;
    color: #111111;
}

#item_list div.btn, #womens_item_list div.btn {
    display: block;
    color: #fff;
    padding: 3% 0;
    background-color: #2ebaf4;
    text-align: center;
    border-radius: 15px;
}


/*　画面サイズが768pxからはここを読み込む　*/
@media screen and (max-width:768px) { 
	#item_list .feature_icon{
		position: absolute;
    top: -50px;
    left: 43%;
    width: 13%;
}
	
	#item_list li.itemlist_contents{
    margin-bottom: 70px;
}
	
#choose #item_list h3 {
    display: flex;
    align-items: center;
    line-height: 2.4rem;
    margin-top: 40px;
    margin-bottom: 30px;
}
	
	#choose #item_list h3 img{
		width: 60%;
	}

#item_list ul.list.cont4 li {
    width: 50%;
    margin-bottom: 10%;
}

}

@media screen and (max-width:480px) {	
	#item_list .feature_icon{
		position: absolute;
    top: -35px;
    left: 41%;
    width: 18%;
}
	
	#choose #item_list h3 img{
		width: 80%;
	}

#girdle #choose #item_list h3:before, #girdle #choose #item_list h3:after {
    border:none;
}
	
}