@charset "utf-8";
/* CSS Document */


/* 30周年記念サイト */
/* ========================================================================= */
@media screen and (max-width: 736px) {

.mv_30thArea{display: none;}

.sp_mv30th{
	width: 100%;
}
#contentsArea a.sp_mv30th img:hover{ 
	opacity: 1;
}

/* 汎用　スペース */
.pt50{ 
	padding-top: 0;
}







/* ■上部：Webストアバナー■ */
.bn_main_wws {
	text-align: center;
	width: 100%;
	padding-top: 50px;
}

/* ■上部：「ハローキティ」コラボ　バナー■ */
.logo_30th {
	display: block;
	width: 70%;
	text-align: center;
	margin: auto;
	padding-top: 50px;
}

/* ■上部：デジタルカタログ　バナー■ */
.bn_top_digital {
	text-align: center;
	width: 98%;
	margin: auto;
	padding-top: 50px;
	padding-bottom: 5px;
	display: block;

}
.bn_top_digital img{
	width: 100%;
}


/* ■上部：代表コピー■ */
.copy_main30th {
	text-align: center;
	padding-top: 50px;
}
.copy_main30th h2 {
	font-size: 145%;
	line-height: 1.2;
	color: #e10012;
}

.copy_main30th h2 strong {
	font-size: 116%;
	line-height: 1.7;

	font-weight: 500;
	padding-left: 0.1em;
	padding-right: 0.1em;
}
.copy_main30th h2 strong span {
	font-size: 100%;

}

/* 「ハローキティ」といっしょに。 */
.copy_main30th_sub {
	font-size: 105%;
	line-height: 1.0;
	color: #e10012;
	font-weight: 600;
	padding-bottom: 1.0em;
}


.copy_main30th .copy_main_read {
	font-size: 100%;
	line-height: 1.8;
	padding-top: 25px;
	padding-bottom: 10px;
}


/* 「ハローキティ」がいぱい！ */
#kitty_ippai {
	width: 100%;
	margin-top: 60px;
	
	text-align: center;
}

#kitty_ippai h2 {
	width: 85%;
	margin: auto;
}

#kitty_ippai h2 strong {
	color:#1d2083;
	font-size: 105%;
	display: block;
	padding-top: 15px;
	line-height: 1.6;

}

#kitty_ippai .kitty_ippai_conts {
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 60px;
	position: relative!important;
	width: 100%;
	height: auto;
}

/* トップス（表） */
.kitty_ippai_02 { 
	width: 50%;
	position: absolute!important;
	top: 19%;
	left: 10%;
}
/* トップス（裏） */
.kitty_ippai_03 { 
	width: 50%;
	position: absolute!important;
	top: 28.5%;
	left: 42.5%;
}
/* カルソン（表） */
.kitty_ippai_04 { 
	width: 27%;
	position: absolute!important;
	top: 59.5%;
	left: 20%;
}
/* カルソン（裏） */
.kitty_ippai_05 { 
	width: 27.5%;
	position: absolute!important;
	top: 68%;
	left: 53%;
}

/* ■リボン画像■ */
.kitty2_ippai_06 {
	text-align: center;
	margin-bottom: 60px;
}
.kitty2_ippai_06 img {
	min-width: 100%;
}

/* ■ロゴ　30th×「ハローキティ」コラボ 02■ */
.logo_30th_02 {
	display: block;
	width: 70%;
	text-align: center;
	margin: auto;
	padding-top: 0;
}

.copy_main_read02 {
	font-size: 100%;
	line-height: 1.8;
	padding-top: 35px;
	padding-bottom: 60px;
	font-feature-settings: "palt" 1;/* 文字詰め カーニング　プロポーショナルメトリクスを有効にする指定 */
}
.copy_main_read02 span {
	letter-spacing: -0.07em;
}

/* ■「ワコール カルソン」HISTORY ピンク背景■ */
#kity_history {
	width: 100%;
	min-width: 100%;
	padding-top: 45px;
	padding-bottom: 40px;
	background-color: #faf5f5;
	text-align: center;

}
.title_history01 {
	color: #d38191;
	font-size: 130%;
	position: relative!important;
}
.title_history01::after {
	content: '';
	display: block;
	position: absolute;
	left: 50%; /* 位置調整 */
	transform: translate(-50%); /* 位置調整 */
	bottom: -1.2em; /* 下線の上下位置調整 */
	width: 8%; /* 下線の幅 */
	height: 1px; /* 下線の太さ */
	background-color: #d38191; /* 下線の色 */
}

.kity_history_read { 
	width: 85%;
	margin: auto;
	margin-top: 50px;
	text-align: left;
	display: block;
	color: #333333;
	font-size: 105%;
	line-height: 1.8;
	font-feature-settings: "palt" 1;/* 文字詰め カーニング　プロポーショナルメトリクスを有効にする指定 */
}

.kity_history_read p { 
	padding-bottom: 1.5em;
}

/* ■タイトル「HISTORY」■ */
.title_history02 {
	background :url( "../images/title_history02_bg.png") no-repeat center;
	background-size: 100%;
	width: 70%;
	height: calc(100vw * 0.14559819);
	margin: auto;
	margin-top: 30px;
	margin-bottom: 25px;
	text-align:center; 
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 4.8vw;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* ■「HISTORY」リスト■ */
.history_list { 
	width: 90%;
	margin: auto;
	text-align: left;
	  display: flex;
		display: -webkit-flex;
	justify-content: space-between;
		justify-content: -webkit-space-between;
	align-items: stretch;
		align-items: -webkit-stretch;
	flex-wrap: wrap;
		flex-wrap: -webkit-wrap;
	background :url( "../images/history_bg_line.png") repeat-y;
	background-position: top 0 left 20.8vw;
	background-size: 4px;
}

/* （年号） */
.history_list dt.list01 { 
	width: 29%;
	background :url( "../images/history_bg_maru.png") no-repeat;
	background-position: top 0 right 6.5%;
	background-size: 24%;
	color: #d38191;
	font-size: 100%;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding-top: 0.1%;
}
/* （丸の下にラインがない丸） */
.history_list dt.list01.bg_maru02 { 
	width: 29%;
	background :url( "../images/history_bg_maru02.png") no-repeat;
	background-position: top 0 right 6.5%;
	background-size: 24%;
	color: #d38191;
	font-size: 105%;
	letter-spacing: 0.05em;
	padding-top: 0.2%;
}

/* （できごと） */
.history_list dd.list02 { 
	width: 70%;
	background :none;
	font-size: 94%;
	line-height: 1.6;
	/*font-feature-settings: "palt" 1;*/
	margin-right: 0;
	padding-bottom: 7%;
	padding-left: 1%;


}
/* PC用- 点線隠し用ピンク） */
.history_list dd.list02 span { 
	background-color : none;
	padding-right: 0;
}

/* （商品画像） */
.history_list dd.list03 { 
	width: auto;
	text-align: center;
	margin: auto;
	padding-right: 13%;
	width: 100%;
}
.history_list dd.list03 img { 
	height: calc(100vw * 0.60681818);
	margin-top: 0;
	
	padding-bottom: 10%;

}
.br-pc { 
	display: none;
}

.history_list .h_space { 
	margin-bottom: 4%!important;
}


/* （商品2つの時の調整） */
.history_list dd.list02.wc01 { 
	width: 70%;
}
.history_list dd.list03.wc02 { 
	width: 100%;
	padding-right: 0;
	padding-left: 23%;
	margin-bottom: 0;
}


/* ■ お客様からのうれいいお声 ■■■■■■■ */
#kity_voice {
	width: 90%;
	margin: auto;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;

}

#kity_voice h2 {
	padding-bottom: 50px;
	width: 75%;
	margin: auto;
}

.voice_flex {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.voice_flex li {
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 30px;
}

.voice_flex .list_left {
	padding-left: 0;
}
.voice_flex .list_right {
	padding-right: 0;
}
/* 右よせ */
.mr0 {
	margin-right: 0;
	margin-left: auto;
}
/* 左よせ */
.ml0 {
	margin-right: auto;
	margin-left: 0;
}


.voice01 {
	width: 80%;
	background-image : url( "../images/voice01_bg02.jpg");
	background-position: center;
	background-size: 100%;
	background-repeat: repeat-y;
}
.voice01_inner {
	width: 100%;
	background-image :url( "../images/voice01_bg01.jpg"),  url( "../images/voice01_bg03.jpg") ;
	background-position: top center, bottom center;
	background-size: 100%;
	background-repeat: no-repeat, no-repeat;
	text-align: left;
	padding-top: 65px;
	padding-bottom: 60px;
	
	position: relative;
}

#kity_voice .voice_inner_box a img:hover{ 
	opacity:1!important;
}

.voice_img {
	position: absolute;
	top: -20px;
	right: 6px;
}

.voice_inner_box {
	width: 80%;
	margin: auto;

}

dl.voice_tx dt {
	font-size: 120%;
	line-height: 1.4em;
	padding-bottom: 1.0em;
	

}
dl.voice_tx dd {
	font-size: 93%;
	line-height: 1.7em;
}





/* 動画エリア（本体ページ用） */

@media screen and (max-width: 736px) {

.movie_area {
	width: 95%;
	margin: auto;
	margin-top: 50px;
}




}


