@charset "UTF-8";

@font-face {
  font-family: 'BauerBodoniStd-Roman';
  src: url("BauerBodoniStd-Roman.otf") format("otf");
}

.flex {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}

.fw {
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}

.fnw {
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

.jcsb {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.jcc {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.jcfs {
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.jcfe {
	-webkit-box-pack: end;
     -ms-flex-pack: end;
   justify-content: flex-end;
}

.aic {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.aie {
	-webkit-box-align: end;
     -ms-flex-align: end;
        align-items: flex-end;
}

/* ====================
	all
==================== */
#swimwear {
	width: 1200px;
	margin: 75px auto 140px;
	font-feature-settings: "palt";
}

#swimwear img {
	width: 100%;
}

/* ===================
	title
=================== */
#swimwear .swimwear_ttl {
	width: 560px;
	margin: 0 auto 60px;
}

/* ===================
	section
=================== */
#swimwear .swimwear_wrap {
	margin: 80px auto 0;
}

#swimwear #sec01 .swimwear_wrap{
	width: 510px;
	margin: 0 auto 120px;
	position: relative;
}

#swimwear #sec01 .swimwear_wrap .img_area{
	width: 510px;
	height: 450px;
	margin: 0 auto;
	position: relative;
}

#swimwear #sec01 .swimwear_wrap .img_area .img{
	width: 450px;
	position: relative;
	z-index: 5;
}

#swimwear #sec01 .swimwear_wrap .img_area .bg{
	width: 450px;
	position: absolute;
	right: 0;
	top: 60px;
	z-index: 0;
}

#swimwear #sec01 .swimwear_wrap .fade_txt.onView{
	width: 261px;
}

#swimwear #sec01 .swimwear_wrap .fade_txt{
	height: 200px;
	position: absolute;
	bottom: -40px;
	left: 315px;
	z-index: 10;
}


#swimwear #sec01 .swimwear_wrap .fade_txt .txt{
	width: 261px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}

#swimwear #sec02 .swimwear_wrap{
	width: 1200px;
	height: 600px;
	margin: 0 auto 160px;
	position: relative;
}

#swimwear #sec02 .swimwear_wrap .left{
	width: 460px;
	height: 460px;
	margin: 0 0 0 60px;
	position: relative;
}

#swimwear #sec02 .swimwear_wrap .left .img_area .img{
	width: 400px;
	position: relative;
	left: 60px;
	top: 60px;
	z-index: 5;
}

#swimwear #sec02 .swimwear_wrap .left .img_area .bg{
	width: 400px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}

#swimwear #sec02 .swimwear_wrap .left .img_area .fade_txt.onView{
	width: 200px;
}

#swimwear #sec02 .swimwear_wrap .left .img_area .fade_txt{
	height: 150px;
	position: absolute;
	top: 60px;
	left: -45px;
	z-index: 10;
}

#swimwear #sec02 .swimwear_wrap .left .img_area .fade_txt .txt{
	width: 200px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}

#swimwear #sec02 .swimwear_wrap .right{
	width: 460px;
	height: 460px;
	margin: 200px 110px 0 auto;
	position: relative;
}

#swimwear #sec02 .swimwear_wrap .right .img_area .img{
	width: 400px;
	position: relative;
	z-index: 5;
}

#swimwear #sec02 .swimwear_wrap .right .img_area .bg{
	width: 400px;
	position: absolute;
	right: 0;
	top: 60px;
	z-index: 0;
}

#swimwear #sec02 .swimwear_wrap .right .img_area .fade_txt.onView{
	width: 302px;
}

#swimwear #sec02 .swimwear_wrap .right .img_area .fade_txt{
	height: 200px;
	position: absolute;
	left: 290px;
	top: 230px;
	z-index: 10;
}

#swimwear #sec02 .swimwear_wrap .right .img_area .fade_txt .txt{
	width: 302px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}

#swimwear #sec03 .swimwear_wrap{
	width: 450px;
	margin: 0 0 120px 270px;
}

#swimwear #sec03 .swimwear_wrap .img_area{
	width: 450px;
	height: 450px;
	margin: 0 auto;
	position: relative;
}

#swimwear #sec03 .swimwear_wrap .img_area .img{
	width: 450px;
	position: relative;
	left: 0;
	z-index: 5;
}

#swimwear #sec03 .swimwear_wrap .img_area .bg{
	width: 450px;
	position: absolute;
	left: -60px;
	top: 60px;
	z-index: 0;
}

#swimwear #sec03 .swimwear_wrap .img_area .fade_txt.onView{
	width: 262px;
}

#swimwear #sec03 .swimwear_wrap .img_area .fade_txt{
	height: 180px;
	position: absolute;
	left: 355px;
	top: 55px;
	z-index: 10;
}

#swimwear #sec03 .swimwear_wrap .img_area .fade_txt .txt{
	width: 262px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}

#swimwear #sec04{
	height: 460px;
}

#swimwear #sec04 .swimwear_wrap{
	width: 460px;
	margin: 0 0 120px 505px;
}

#swimwear #sec04 .swimwear_wrap .img_area{
	width: 460px;
	height: 400px;
	margin: 0 auto;
	position: relative;
}

#swimwear #sec04 .swimwear_wrap .img_area .img{
	width: 400px;
	position: relative;
	left: 0;
	z-index: 5;
}

#swimwear #sec04 .swimwear_wrap .img_area .bg{
	width: 400px;
	position: absolute;
	right: 0;
	top: 60px;
	z-index: 0;
}

#swimwear #sec04 .swimwear_wrap .img_area .fade_txt.onView{
	width: 183px;
}

#swimwear #sec04 .swimwear_wrap .img_area .fade_txt{
	height: 125px;
	position: absolute;
	left: -70px;
	top: 45px;
	z-index: 10;
}

#swimwear #sec04 .swimwear_wrap .img_area .fade_txt .txt{
	width: 183px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}


/* ===================
	credit
=================== */

#swimwear .swimwear_credit {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	letter-spacing: 0.1em;
	line-height: 2;
}

#swimwear .swimwear_txt_inner .swimwear_credit_wrap {
	margin-top: 15px;
	position: relative;
	width: 400px;
	z-index: 10;
}

#swimwear #sec02 .left .swimwear_txt_inner .swimwear_credit_wrap {
	margin-top: 75px;
}

/* ===================
	button
=================== */

#swimwear .btn_area {
	margin: 100px auto 0;
	width: 380px;
}


/* for pc */
@media only screen
and (min-device-width: 768px) {
	.sp_only {
		display: none;
	}
}


/* for tablet */
/* for tablet */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1200px)
and (-webkit-min-device-pixel-ratio: 1) {
}

/* for sp */
@media only screen
and (max-device-width: 767px) {
	.pc_only {
		display: none;
	}
	
	.sp_only {
		display: block;
	}

	/* ====================
		all
	==================== */
	#swimwear {
		width: 100%;
		margin: calc(80*(100vw/750)) auto calc(200*(100vw/750));
		font-feature-settings: "palt";
	}

	#swimwear img {
		width: 100%;
	}

	/* ===================
		title
	=================== */
	#swimwear .swimwear_ttl {
		width: calc(492*(100vw/750));
		margin: 0 auto calc(76*(100vw/750));
	}

	/* ===================
		section
	=================== */
	#swimwear .swimwear_wrap {
		margin: 0 auto;
	}

	#swimwear #sec01 .swimwear_wrap{
		width: 100%;
		margin: 0 auto calc(110*(100vw/750));
	}

	#swimwear #sec01 .swimwear_wrap .img_area{
		width: 100%;
		height: calc(750*(100vw/750));
		margin: 0 auto;
		position: relative;
	}

	#swimwear #sec01 .swimwear_wrap .img_area .img{
		width: calc(675*(100vw/750));
		position: relative;
		z-index: 5;
	}

	#swimwear #sec01 .swimwear_wrap .img_area .bg{
		width: calc(675*(100vw/750));;
		position: absolute;
		right: 0;
		top: calc(75*(100vw/750));
		z-index: 0;
	}
	
	#swimwear #sec01 .swimwear_wrap .fade_txt.onView{
		width: calc(430*(100vw/750));
	}

	#swimwear #sec01 .swimwear_wrap .fade_txt{
		height: calc(270*(100vw/750));
		position: absolute;
		left: calc(338*(100vw/750));
		bottom: 0;
		z-index: 10;
	}


	#swimwear #sec01 .swimwear_wrap .fade_txt .txt{
		width: calc(430*(100vw/750));
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}

	#swimwear #sec02 .swimwear_wrap{
		width: calc(674*(100vw/750));
		height: auto;
		margin: 0 auto;
		display: block;
		position: relative;
	}

	#swimwear #sec02 .swimwear_wrap .left{
		width: calc(674*(100vw/750));
		height: auto;
		margin: 0 auto calc(110*(100vw/750));
		position: relative;
	}

	#swimwear #sec02 .swimwear_wrap .left .img_area .img{
		width: calc(600*(100vw/750));
		position: relative;
		left: calc(76*(100vw/750));
		top: calc(76*(100vw/750));
		z-index: 5;
	}

	#swimwear #sec02 .swimwear_wrap .left .img_area .bg{
		width: calc(600*(100vw/750));
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
	}
	
	#swimwear #sec02 .swimwear_wrap .left .img_area .fade_txt.onView{
		width: calc(330*(100vw/750));
	}

	#swimwear #sec02 .swimwear_wrap .left .img_area .fade_txt{
		height: calc(200*(100vw/750));
		position: absolute;
		left: calc(-14*(100vw/750));
		top: calc(-10*(100vw/750));
		z-index: 10;
	}

	#swimwear #sec02 .swimwear_wrap .left .img_area .fade_txt .txt{
		width: calc(330*(100vw/750));
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}

	#swimwear #sec02 .swimwear_wrap .right{
		width: calc(674*(100vw/750));
		height: auto;
		margin: 0 auto calc(110*(100vw/750));
		position: relative;
	}

	#swimwear #sec02 .swimwear_wrap .right .img_area .img{
		width: calc(600*(100vw/750));
		position: relative;
		left: 0;
		top: 0;
		z-index: 5;
	}

	#swimwear #sec02 .swimwear_wrap .right .img_area .bg{
		width: calc(600*(100vw/750));
		position: absolute;
		left: calc(74*(100vw/750));
		top: calc(74*(100vw/750));
		z-index: 0;
	}
	
	#swimwear #sec02 .swimwear_wrap .right .img_area .fade_txt.onView{
		width: calc(548*(100vw/750));
	}

	#swimwear #sec02 .swimwear_wrap .right .img_area .fade_txt{
		height: calc(350*(100vw/750));
		position: absolute;
		left: calc(212*(100vw/750));
		top: calc(446*(100vw/750));
		z-index: 10;
	}

	#swimwear #sec02 .swimwear_wrap .right .img_area .fade_txt .txt{
		width: calc(548*(100vw/750));
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}

	#swimwear #sec03 .swimwear_wrap{
		width: 100%;
		margin: 0 auto calc(110*(100vw/750));
	}

	#swimwear #sec03 .swimwear_wrap .img_area{
		width: 100%;
		height: calc(750*(100vw/750));
		margin: 0 auto;
		position: relative;
	}

	#swimwear #sec03 .swimwear_wrap .img_area .img{
		width: calc(675*(100vw/750));
		position: relative;
		right: 0;
		left: calc(76*(100vw/750));
		top: 0;
		z-index: 5;
	}

	#swimwear #sec03 .swimwear_wrap .img_area .bg{
		width: calc(675*(100vw/750));;
		position: absolute;
		left: 0;
		top: calc(75*(100vw/750));
		z-index: 0;
	}
	
	#swimwear #sec03 .swimwear_wrap .img_area .fade_txt.onView{
		width: calc(432*(100vw/750));
	}

	#swimwear #sec03 .swimwear_wrap .img_area .fade_txt{
		height: calc(300*(100vw/750));
		position: absolute;
		left: calc(-12*(100vw/750));
		top: calc(420*(100vw/750));
		z-index: 10;
	}

	#swimwear #sec03 .swimwear_wrap .img_area .fade_txt .txt{
		width: calc(432*(100vw/750));
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}

	#swimwear #sec04{
		height: auto;
	}

	#swimwear #sec04 .swimwear_wrap{
		width: 100%;
		margin: 0 auto;
	}

	#swimwear #sec04 .swimwear_wrap .img_area{
		width: calc(674*(100vw/750));
		height: calc(674*(100vw/750));
		margin: 0 auto;
		position: relative;
	}

	#swimwear #sec04 .swimwear_wrap .img_area .img{
		width: calc(600*(100vw/750));
		position: relative;
		left: 0;
		z-index: 5;
	}

	#swimwear #sec04 .swimwear_wrap .img_area .bg{
		width: calc(600*(100vw/750));
		position: absolute;
		right: 0;
		top: calc(74*(100vw/750));
		z-index: 0;
	}
	
	#swimwear #sec04 .swimwear_wrap .img_area .fade_txt.onView{
		width: calc(304*(100vw/750));
	}

	#swimwear #sec04 .swimwear_wrap .img_area .fade_txt{
		height: calc(200*(100vw/750));
		position: absolute;
		left: calc(432*(100vw/750));
		top: calc(364*(100vw/750));
		z-index: 10;
	}

	#swimwear #sec04 .swimwear_wrap .img_area .fade_txt .txt{
		width: calc(304*(100vw/750));
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}


	/* ===================
		credit
	=================== */

	#swimwear .swimwear_credit_wrap {
	}

	#swimwear .swimwear_credit {
		font-family: 'Open Sans', sans-serif;
		font-size: calc(24*(100vw/750));
		letter-spacing: 0.05em;
		line-height: calc(42*(100vw/750));
		text-align: center;
	}

	#swimwear .swimwear_txt_inner .swimwear_credit_wrap {
		margin-top: calc(30*(100vw/750));
		width: calc(750*(100vw/750));
	}

	#swimwear #sec02 .left .swimwear_txt_inner .swimwear_credit_wrap {
		margin-top: calc(110*(100vw/750));
		width: calc(674*(100vw/750));
	}
	
	#swimwear #sec02 .right .swimwear_txt_inner .swimwear_credit_wrap {
		margin-top: calc(220*(100vw/750));
		width: calc(674*(100vw/750));
	}
	
	#swimwear #sec03 .swimwear_txt_inner .swimwear_credit_wrap {
		margin-top: calc(30*(100vw/750));
	}

	/* ===================
		button
	=================== */

	#swimwear .btn_area {
		margin: calc(160*(100vw/750)) auto 0;
		width: calc(676*(100vw/750));
	}

}


/************ fade **********/
.fade {
  -webkit-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
  opacity: 0;
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
}

#swimwear .swimwear_wrap .fade_txt {
  -webkit-transition-duration: .5s;
  -o-transition-duration: .5s;
  transition-duration: .5s; 
  width: 0;
  overflow: hidden;
}

.fade.onView {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}