@charset "utf-8";
/* CSS Document */


/*********************************************
 
	         　共通
 
*********************************************/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.contents_wrapper{
	max-width: 990px;
	width: 100%;
	margin: 0 auto;
  /*padding-top: 30px;*/
	line-height: 1.8;	
}
.contents_inner{
	padding: 5%;
}


/* 整列部分 */
ul.list{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

ul.list img{width: 100%}

ul.list li{margin-bottom: 2%;text-align: center;}




/* 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;}


/* bg
--------------------------------*/
.bg2{
	/*background-image: url("../images/bg2.jpg");
	background-repeat: repeat;*/
	background-color: #ededed;
	padding:0 0 50px;
}
	
div.more{
	text-align: center;
	margin-bottom: 50px;
}

div.more img{
	max-width: 668px;
	width: 100%;
}

#nightbra .sp_only{
	display: none;
}

#nightbra .pc_only{
	display: block;
}


@media screen and (max-width:500px){
#nightbra .sp_only{
	display: block;
}

#nightbra .pc_only{
	display: none;
}
	
}

#nightbra{
	/*font-family: "游明朝体", "Yu Mincho", YuMincho,'Noto Serif JP', "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;*/
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 300;
	line-height:1.5;
	letter-spacing: 0.06rem;
	color: #505050;
	box-sizing: border-box;
}
#nightbra img{
	width: 100%;
}
#nightbra figure{
	width: 100%;
	margin: 0;
}
#nightbra figcaption{
	display: none;
}
.content-wrap{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding: 120px 0;
}
.productlist_btn{
	font-family: 'TsukushiAOldMinPr6N', serif;
	background-color: #866278;
	max-width: 520px;
	width: 100%;
	margin: 0 auto;
	color: #FFF;
	font-size: 32px;
	text-align: center;
	padding: 10px 0;
	border-radius: 15px;
}
.recommend_btn{
	font-family: 'TsukushiAOldMinPr6N', serif;
	background-color: #866278;
	max-width: 570px;
	width: 100%;
	margin: 0 auto 80px;
	color: #FFF;
	font-size: 32px;
	text-align: center;
	padding: 10px 0;
	border-radius: 15px;
}
@media screen and (max-width:768px){
	.content-wrap{
		padding: 80px 25px;
	}
	.productlist_btn,
	.recommend_btn{
		font-size: 22px;
	}
}
@media screen and (max-width:500px){
	.productlist_btn,
	.recommend_btn{
		font-size: 20px;
	}
	.productlist_btn,
	.recommend_btn {
		width: 85%;
	}
}

/*目次*/
.lead{
	position: relative;
	background-image: url("../images/background01.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}
.lead {
}
.lead_ttl{
	font-family: 'TsukushiAOldMinPr6N', serif;
	font-size: 40px;
	text-align: center;
	margin-bottom: 50px;
}

.lead_text{
	font-size: 18px;
	text-align: center;
	line-height: 2;
	margin-bottom: 90px;
}

.content_nav{
	max-width: 730px;
	width: 100%;
	margin: 0 auto;
	background-color: #FFF;
	border-radius: 50px 0px 50px 0px;
	padding: 30px 0;
}

.nav_ttl{
	font-family: 'TsukushiAOldMinPr6N', serif;
	font-size: 32px;
	text-align: center;
	border-bottom: 4px solid #f4f4f4;
	padding-bottom: 20px;
	margin-bottom: 30px;
}
.nav_list{
	padding: 0 20px;
}
.nav_list li a{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.nav_list li a i{
	margin-bottom: 10px;
	margin-right: 10px;
	min-width: 28px;
}
.nav_list li a span{
	display: inline-block;
	/*width: 100%;*/
	font-family: 'TsukushiAOldMinPr6N', serif;
	font-size: 22px;
	/*border-bottom: 1px solid #505050;*/
	text-decoration: underline;
    text-decoration-color: #000;
    text-underline-offset: 5px;
	margin-bottom: 30px;
}
.nav_list li a:hover span{
	opacity: 0.6;
}

@media screen and (max-width:768px){
	.lead_ttl{
		font-size: 30px;
	}
	.lead_text{
		font-size: 16px;
	}
	.content_nav{
		width: 100%;
	}
	.nav_ttl{
		font-size: 28px;
	}
	.nav_list li a span{
		font-size: 18px;
		margin-bottom: 20px;
	}
}
@media screen and (max-width:500px){
	.lead_ttl {
		font-size: 25px;
		margin-bottom: 30px;
	}
	.content_nav{
		width: 100%;
	}
	.nav_list li a span{
		font-size: 16px;
		margin-bottom: 20px;
	}
}
@media screen and (max-width:425px){
	.lead_ttl {
		font-size: 20px;
		margin-bottom: 30px;
	}
	.nav_ttl{
		font-size: 20px;
	}
	.lead_text{
		font-size: 14px;
	}
	
}

/*役割*/

#role{
	position: relative;
	background-color: #e6e0e4;
	padding-top: 60px;
}
.onepoint{
	position: relative;
	max-width: 1000px;
	margin: 0 auto 80px;
		padding: 0;
}
.onepoint_img{
	position: absolute;
	aspect-ratio: 261 / 268;
	width: 261px;
	height: 268px;
    left: -15%;
    bottom: -25%;
}
#role .content_box{
	margin-bottom: 80px;
}
@media screen and (max-width:768px){
	.onepoint{
		margin-bottom: 60px;
	}
	.onepoint_img{
		width: 200px;
		left: 5%;
		bottom: 75%;
	}
	
}
@media screen and (max-width:500px){
	.onepoint{
		margin-bottom: 60px;
	}
	.onepoint_img{
		width: 140px;
		left: 5%;
		bottom: 65%;
	}
	
}
/*コンテンツ*/

.content_ttl{
	font-family: 'TsukushiAOldMinPr6N', serif;
	font-size: 50px;
	text-align: center;
	margin-bottom: 40px;
	line-height: 1.7;
}
.content_imgttl{
	display: block;
	max-width: 410px;
	width: 100%;
	margin: 0 auto 15px;
}
.content_ttl .color_red{
	color: #866278;
}
.content_lead{
	max-width: 760px;
	width: 100%;
	font-size: 18px;
	line-height: 2;
	text-align: center;
	margin: auto;
	padding: 0;
}
.content_box{
	position: relative;
	max-width: 1488px;
	width: 100%;
	margin-bottom: 60px;
}
.content_box.right_box{
	margin-left: auto;
}

@media screen and (max-width:768px){
	.content_ttl{
		font-size: 40px;
	}
	.content_lead{
		font-size: 16px;
		padding: 0 25px;
	}
}

@media screen and (max-width:500px){
	.content_ttl{
		font-size: 25px;
	}
	.content_imgttl{
		width: 65%;
	}
}
@media screen and (max-width:425px){
	.content_ttl{
		font-size: 24px;
	}
	.content_lead{
		font-size: 14px;
	}
}

/*メリット*/
#merit{
	background-color: #dad6dd;
	padding-top: 80px;
}
.content_box .right_box{
	margin-left: auto;
	text-align: center;
	
}
.textbox_ttl{
	font-family: 'TsukushiAOldMinPr6N', serif;
	font-size: 42px;
	text-align: left;
	border-bottom: 2px solid #e6e0e4;
}
.textbox_list li{
	font-size: 18px;
}
#merit .productlist_btn{
	margin-bottom: 80px;
}

/*ポイント*/
#point{
	background-color: #e6e0e4;
	padding-top: 80px;
}
.point_box{
	max-width: 940px;
	width: 100%;
	background-color: #FFF;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	border-radius: 50px;
	margin: 80px auto;
	padding: 40px 30px;
}
.point_box .point{
	position: relative;
	max-width: 415px;
	width:100%;
	padding: 30px 20px;
}
.point_img{
	max-width: 214px;
	width: 100%;
	margin: 0 auto;
}
.point_box .point .point_icon{
	position: absolute;
	top: 30px;
	left: 30px;
}
.point_ttl{
	font-family: 'TsukushiAOldMinPr6N', serif;
	font-size: 30px;
	text-align: center;
	margin-bottom: 10px;
}
.point_text{
	font-size: 16px;
	text-align: center;
	margin-bottom: 20px;
}
.point a{
	display: flex;
	justify-content: center;
	align-items: center;
}
.point a i{
	margin: 10px 0 0 10px
}
.point_btn{
	position: relative;
	text-align: center;
	color: #866278;
	font-size: 16px;
	border-bottom: 1px solid #866278;
}
.border-top{
	border-top: 1px solid #ebe9ed;
}
.border-bottom{
	border-bottom: 1px solid #ebe9ed;
}
.border-right{
	border-right: 1px solid #ebe9ed;
}
.border-left{
	border-left: 1px solid #ebe9ed;
}
@media screen and (max-width:768px){
	.point_box{
		width: 85%;
		margin-top: 60px;
	}
	.border-right,
	.border-left{
		border-right: 0;
		border-left:0;
	}
}
@media screen and (max-width:500px){
	.point_box{
		padding: 40px 10px;
	}
	.point_box .point .point_icon{
		top: 10px;
		left: 15px;
	}
	.point_box .point{
		padding: 50px 15px 40px;
	}
	.point_ttl{
		font-size: 24px;
	}
}
@media screen and (max-width:500px){
		.point_ttl{
		font-size: 20px;
	}
	.point_text{
		font-size: 14px;
	}
	
}

/*効果*/
#effect{
	background-color: #dad6dd;
	padding-top: 80px;
}
.effect_box{
	background-image: url("https://www.okadaya.co.jp/img/usr/underwear/event/nightbra/2025/background02.jpg.png");
	background-repeat: no-repeat;
	background-size: cover;
	aspect-ratio: 1920 / 700;
	width: 100%;
	height: auto;
	padding: 60px 0;
	margin: 60px 0;
}
.effect_ttl{
	font-family: 'TsukushiAOldMinPr6N', serif;
	font-size: 40px;
	text-align: center;
	line-height: 1.5;
	margin-bottom: 40px;
}
.effect_list{
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 40px;
}
.effect_list li{
	width: calc(100% / 3);
}
.effect_list li p{
	width: 90%;
	margin: 0 auto;
	font-size: 16px;
}
@media screen and (max-width:768px){
	.effect_ttl{
		font-size: 30px;
	}
	.effect_box{
		
	}
.effect_list li{
	width: calc(100% / 2);
}
}
@media screen and (max-width:500px){
	.effect_ttl{
		font-size: 24px;
	}
	.effect_list li p{
		font-size: 14px;
	}
}
/*ケース*/
#case{
	background-color: #e6e0e4;
	padding-top: 80px;
}
.case_box{
	position: relative;
	max-width: 800px;
	width: 100%;
	background-color: #FFF;
	border-radius: 35px;
	margin: 120px auto 60px;
	padding: 60px 30px;
}
.case_point{
	position: absolute;
	width: 50%;
	font-family: 'TsukushiAOldMinPr6N', serif;
	font-size: 40px;
	background-color: #fff497;
	text-align: center;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	border-radius: 999px;
}
.case_box div{
	padding: 30px 0;
	border-bottom: 1px solid #dad6dd;
}
.case_box div:last-child{
	padding-bottom: 0;
	border-bottom: 0px;
}
.case_ttl{
	position: relative;
	font-family: 'TsukushiAOldMinPr6N', serif;
	font-size: 30px;
	text-align: left;
	display: flex;
	justify-content: flex-start;
}
.case_ttl::before{
	position: absolute;
	content: "";
	background-image: url("https://www.okadaya.co.jp/img/usr/underwear/event/nightbra/2025/icon_check.png");
	background-repeat: no-repeat;
	background-size: contain;
	aspect-ratio: 25 / 29;
	width: 25px;
	height: 29px;
	top: 5px;
}
.case_ttl span{
	margin-left: 30px;
}
.case_text{
	font-size: 16px;
	text-align: left;
	margin-left: 30px;
}
@media screen and (max-width:768px){
	.case_box{
		width: 90%;
		margin-top: 80px;
	}
	.case_point{
		font-size: 35px;
		top: -20px;
	}
	.case_ttl{
		font-size: 26px;
	}
	.case_ttl::before{
		width: 20px;
		height: 24px;
		top: 5px;
	}
}
@media screen and (max-width:500px){
	
	.case_point{
		font-size: 24px;
	}
	.case_ttl{
		font-size: 22px;
	}
	.case_text{
		font-size: 14px;
	}
}
@media screen and (max-width:425px){
	
	.case_point{
		font-size: 24px;
	}
	.case_ttl{
		font-size: 20px;
	}
	.case_text{
		font-size: 14px;
	}
}


/*商品*/
#product{
	background-color: #f4f4f4;
	padding: 80px 0;
	/*margin-bottom: 60px;*/
}
#product .content_ttl .content_imgttl{
	max-width: 65px;
	width: 100%;
	margin: 0 auto 10px;
}
.product_first{
	position: relative;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto 100px;
}
.product_first .product_btn{
	position: absolute;
	font-family: 'TsukushiAOldMinPr6N', serif;
	background-color: #866278;
	max-width: 220px;
	width: 100%;
	margin: 0 auto;
	color: #FFF;
	font-size: 20px;
	text-align: center;
	padding: 10px 0;
	border-radius: 15px;
    bottom: 10%;
    right: 15%;
}
.product_list{
	max-width: 1000px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0 auto 60px;
}
.product_list li{
	width: calc(100% / 3 - 20px);
}
.product_name{
	font-size: 16px;
}
@media screen and (max-width:768px){
	.product_list{
		width: 95%;
	}
	.product_list li{
		width: calc(100% / 2 - 20px);
	}
	.product_first .product_btn{
		max-width: 250px;
		right: 10%;
	}
}
@media screen and (max-width:500px){
	.product_first .product_btn{
		max-width: 150px;
		right: 5%;
		font-size: 14px;
	}
.product_name{
	font-size: 14px;
}
}