@charset "utf-8";
/* ************************************************************************************************
ファイル名: female_20251001.css
概要: 女性たちの活躍の設定
作成日: 2025.10.01
Copyright Hitachi Systems, Ltd.
************************************************************************************************ */

/* 変数 */
:root {
	--female-page-page-size:1275px;
}

@media screen and (max-width: 1304px) {
	#branding{
		margin-left:var(--female-space-size1-);
		margin-right:var(--female-space-size1-);
	}
	#branding-txt-area{
		margin-top:-17rem;
	}
	#branding-txt-area p br{
		display:none;
	}
	#interviwee ul{
		margin:auto var(--female-space-size2);
	}
	#talk01,
	#talk03{
		padding-left:var(--female-space-size2);
		margin-left:var(--female-space-size1-);
		margin-right:var(--female-space-size1-);
	}
	.photo-area{
		height:auto;
	}
	.photo-area.no1{
		margin-left:var(--female-space-size2-);
		margin-right:var(--female-space-size2-);
		background-size: 150%;
		background-position-x: 55%;
	}
	.talk-msg dl{
		width:60%;
	}
	.talk-msg p{
		width:40%;
	}
}

@media screen and (max-width: 767px) {
	#branding-txt-area{
		margin-top:-22rem;
	}
	#branding-txt-area h1{
		margin-bottom:40px;
	}
	#branding-txt-area p{
		font-size:2rem;
	}
	#talk01 .talk-msg,
	#talk03 .talk-msg{
		display:block;
	}
	#talk02{
		margin-left:var(--female-space-size1-);
		margin-right:var(--female-space-size1-);
	}
	#talk02 #talk02-innerbk{
		margin-bottom:var(--female-space-size-tb);
		margin-left:50px;
		padding-left:var(--female-space-size2);
		padding-right:var(--female-space-size2);
	}
	#talk02 .talk-ttl{
		margin-left:0;
	}
	#talk02 .talk-msg{
		width:auto;
		margin-left:0;
		flex-direction:column-reverse;
	}
	#talk02 .talk-msg dl{
		width:100%;
		margin-left:0;
	}
	#talk02 .talk-msg p{
		margin-left:-80px;
		margin-bottom:-240px;
		width:auto;
		text-align:left;
	}
	.talk-msg dl{
		width:calc(100% - var(--female-space-size2));
	}
	.talk-msg p{
		width:100%;
		text-align:right;
		margin-top:var(--female-space-size2);
	}

}

@media screen and (max-width: 579px) {
	#branding-txt-area h1{
		margin-top:-35px;
	}
	#branding-txt-area h1 span{
		font-size:3.5rem;
	}
	#branding-txt-area p,
	.talk-ttl h2{
		font-size:1.8rem;
	}

}

@media screen and (max-width: 399px) {
	#branding-txt-area{
		margin-top:-30rem;
	}
	#branding-txt-area h1{
		margin-top:-25px;
	}
	#branding-txt-area h1 span{
		font-size:2.5rem;
	}
	#branding-txt-area p, .talk-ttl h2{
		font-size:1.5rem;
	}
	#talk01,
	#talk03{
		padding-right:var(--female-space-size2);
	}
	#talk01 .talk-msg,
	#talk03 .talk-msg{
		margin-right:var(--female-space-size2-);
	}
	#talk02 #talk02-innerbk{
		margin-left:var(--female-space-size2);
	}
	.talk-msg dt{
		margin-right:var(--female-space-size1);
	}
	.talk-msg dd{
		width:calc(100% - 80px - var(--female-space-size1));
		padding:20px;
	}
	.talk-ttl h2{
		font-size:1.2rem;
	}
}