@charset "utf-8";

    
.content_choose{
	padding-bottom: 20px;
}

.content_choose .mainv{
	margin-bottom: 20px;
	position: relative;
}

.content_choose .mainv img{
	width: 100%;
	transition: all 1000ms 1000ms ease;
	/*opacity: 0;*/
}

.content_choose .mainv img.start{
	opacity: 1;
}

.content_choose .mainv .text{
	position: absolute;
	left: calc(50% - 150px);
	bottom: 30px;
	transition: all 1000ms 1500ms ease;
	transform: translate(0, 50px);

}

.content_choose .mainv .text.start{
	transform: translate(0, 0);
	opacity: 1;
}

.content_choose .catch{
	margin-bottom: 30px;
	line-height: 220%;
	text-align: center;
}

.content_choose .brand{
	margin-bottom: 70px;
	position: relative;
}

.content_choose .brand:before{
	position: absolute;
	top: 300px;
	right: 0;
	background: #F0E9F0;
	width: 0;
	height: 430px;
	content: '';
	transition: all 1000ms 0s ease;
}

.content_choose .brand.start:before{
	width: 30%;
}

.content_choose .brand:after{
	position: absolute;
	top: 880px;
	left: 0;
	background: #F0E9F0;
	width: 0;
	height: 450px;
	content: '';
	transition: all 1000ms 0s ease;
}

.content_choose .brand.start:after{
	width: 40%;
}

.content_choose .brand .headline{
	margin-bottom: 15px;
	display: block;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: #8D8A8A;
}

.content_choose .brand .description{
	margin-bottom: 40px;
	line-height: 220%;
	text-align: center;
	font-size: 15px;
}

.content_choose .brand .list{
	position: relative;
}

.content_choose .brand .list:before{
	position: absolute;
	bottom: 1500px;
	right: 0;
	background: #F0E9F0;
	width: 0;
	height: 192px;
	content: '';
	transition: all 1000ms 0s ease;
}

.content_choose .brand .list.start:before{
	width: 50%;
}

.content_choose .brand .list:after{
	position: absolute;
	bottom: 1300px;
	left: 0;
	background: #F0E9F0;
	width: 0;
	height: 115px;
	content: '';
	transition: all 1000ms 0s ease;
}

.content_choose .brand .list.start:after{
	width: 95%;
}

.content_choose .brand .wrap{
	position: relative;
}
/*
.content_choose .brand .wrap:before{
	position: absolute;
	top: 260px;
	left: 260px;
	background: #F0E9F0;
	width: 0;
	height: 380px;
	content: '';
	transition: all 1000ms 0s ease;
}

.content_choose .brand .wrap.start:before{
	width: 315px;
}

.content_choose .brand .wrap:after{
	position: absolute;
	bottom: 0;
	left: 0;
	background: #F0E9F0;
	width: 0;
	height: 210px;
	content: '';
	transition: all 1000ms 0s ease;
}

.content_choose .brand .wrap.start:after{
	width: 70%;
}
*/
.content_choose .brand .list li{
	position: relative;
	overflow: hidden;
}

.content_choose .brand .list li+li{
	margin-top: 20px;
}

.content_choose .brand .list img{
	vertical-align: bottom;
}

.content_choose .brand .list .pht{
	position: relative;
	z-index: 1;
	transition: all 1000ms 50ms ease;
	transform: translate(0, 50px);
	opacity: 0;
}

.content_choose .brand .list .pht.start{
	transform: translate(0, 0);
	opacity: 1;
}

.content_choose .brand .list .information{
	width: 90%;
	margin: -20px auto 0;
	padding: 20px;
	position: relative;
	background: #ffffff;
	z-index: 10;
}

.content_choose .brand .list .layout-1 .pht{
}

.content_choose .brand .list .layout-1 .information{
}

.content_choose .brand .list .layout-2 .pht{
}

.content_choose .brand .list .layout-2 .information{
}

.content_choose .brand .list .information .ttl{
	margin-bottom: 15px;
	text-align: center;
	font-size: 12px;
}

.content_choose .brand .list .information .ttl strong{
	font-size: 18px;
}

.content_choose .brand .list .information .text{
	margin-bottom: 20px;
	line-height: 180%;
}

.content_choose .brand .list .information .link_btn{
	text-align: center;
}

.content_choose .brand .list .information .link_btn a{
	width: 100%;
	padding: 10px 0;
	display: inline-block;
	border: 1px solid #212121;
	background: #ffffff;
	border-radius: 8px;
	text-align: center;
	color: #212121;
}

.content_choose .casesize{
	margin-bottom: 70px;
}

.content_choose .casesize>.headline{
	margin-bottom: 15px;
	display: block;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: #8D8A8A;
}

.content_choose .casesize .description{
	margin-bottom: 40px;
	line-height: 180%;
	text-align: center;
}

.content_choose .casesize .exp{
	margin-bottom: 50px;
	line-height: 180%;
}

.content_choose .casesize .case_navi{
	margin-bottom: 20px;
}

.content_choose .casesize .case_navi ul{
	overflow: hidden;
}

.content_choose .casesize .case_navi li{
	float: left;
	width: 33%;
	text-align: center;
}

.content_choose .casesize .case_navi li a{
	width: 80px;
	height: 80px;
	margin-bottom: 10px;
	padding-top: 16px;
	display: inline-block;
	line-height: 120%;
	border-radius: 100px;
	border: 1px solid #707070;
	background: url(/html/choose/ic_arrow.svg) center bottom 10px no-repeat;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #8D8A8A;
}


.content_choose .casesize .smallsize,
.content_choose .casesize .regularsize{
	margin-bottom: 80px;
	position: relative;
}

.content_choose .casesize .boyssize{
	position: relative;
}

.content_choose .casesize .smallsize:after,
.content_choose .casesize .regularsize:after{
	width: 60%;
	content: "";
	position: absolute;
	display: inline-block;
	bottom: -40px;
	left: 20%;
	border-bottom: 2px solid #E6DEE6;
}

.content_choose .casesize .smallsize>.headline,
.content_choose .casesize .regularsize>.headline,
.content_choose .casesize .boyssize>.headline{
	margin-bottom: 15px;
	display: block;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #8D8A8A;
}

.content_choose .casesize .smallsize:before{
	position: absolute;
	top: 220px;
	left: 0;
	background: #F0E9F0;
	width: 0;
	height: 458px;
	content: '';
	transition: all 1000ms 0s ease;
}

.content_choose .casesize .smallsize.start:before{
	width: 80%;
}

.content_choose .casesize .regularsize:before{
	position: absolute;
	top: 40px;
	right: 0;
	background: #F0E9F0;
	width: 0;
	height: 468px;
	content: '';
	transition: all 1000ms 0s ease;
}

.content_choose .casesize .regularsize.start:before{
	width: 80%;
}

.content_choose .casesize .boyssize:before{
	position: absolute;
	top: 90px;
	left: 0;
	background: #F0E9F0;
	width: 0;
	height: 595px;
	content: '';
	transition: all 1000ms 0s ease;
}

.content_choose .casesize .boyssize.start:before{
	width: 80%;
}

.content_choose .casesize .list ul{
	padding: 10px 0;
	overflow: hidden;
}

.content_choose .casesize .list li{
	width: calc(100% - 20px);
	margin: 0 10px;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.content_choose .casesize .list li:nth-child(1){
	transition: all 1000ms 100ms ease;
	transform: translate(0, 50px);
	opacity: 0;
}

.content_choose .casesize .list li:nth-child(2){
	transition: all 1000ms 100ms ease;
	transform: translate(0, 50px);
	opacity: 0;
}

.content_choose .casesize .list li:nth-child(3){
	transition: all 1000ms 100ms ease;
	transform: translate(0, 50px);
	opacity: 0;
}

.content_choose .casesize .list li.start{
	transform: translate(0, 0);
	opacity: 1;
}

.content_choose .casesize .list li+li{
	margin-top: 20px;
}

.content_choose .casesize .list .information{
	padding: 15px;
	position: relative;
}

.content_choose .casesize .list .pht{
	padding: 15px 15px 0;
}

.content_choose .casesize .list .pht img{
	width: 100%;
	vertical-align: bottom;
}

.content_choose .casesize .list .ttl{
	margin-bottom: 15px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}

.content_choose .casesize .list .text{
	padding-bottom: 80px;
	line-height: 180%;
}

.content_choose .casesize .list .link_btn{
	width: 100%;
}

.content_choose .casesize .list .link_btn a{
	width: 100%;
	padding: 10px 0;
	display: inline-block;
	border: 1px solid #707070;
	background: #ffffff;
	border-radius: 8px;
	text-align: center;
	color: #212121;
}