body {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	position: relative;
    left: 0;
    overflow-x: hidden;
	-webkit-text-size-adjust: 100%; /* iphone横向き 文字拡大防止 */
}
img {
	display: block;
	width: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
a {
	text-decoration: none;
	color: #000;
	transition: all .3s;
}
a:hover {
	filter: brightness(1.1);
}
p {
	line-height: 1.8;
}

/*==================================================================================
Header
==================================================================================*/
header {
	width: 100%;
	padding: 12px 0!important;
	border-top: 6px #0064b8 solid!important;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}
header.index {
	transform: translateY(-100%);
	transition: all .6s;
}
header.index.show {
	transform: translateY(0);
}
header .logo {
	display: block;
	width: 130px;
}
header .logo span {
	display: block;
	color: #706F70;
}
nav.gnav {
	width: calc(100% - 130px - 15px);
}
nav.gnav .menu {
	margin: 0 0 0 auto;
}
nav.gnav .menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
}
nav.gnav .menu ul li a {
	display: block;
	color: #706F70;
	font-size: 13px;
	text-align: center;
}
nav.gnav .menu ul li a.active {
	color: #0064b8;
}
nav.gnav .menu ul li a:hover {
	filter: none;
	opacity: 0.7;
}
nav.gnav .menu ul.sub li {
	margin-left: 15px;
}
nav.gnav .menu ul.sub li:last-child a {
	padding: 4px;
	background: #0064b8;
	color: #fff;
}
nav.gnav .menu ul.main {
	width: 100%;
	max-width: 750px;
	justify-content: space-between;
	margin: 0 0 0 auto;
}
nav.gnav .menu ul.main li a {
	line-height: 1.3;
}

/*==================================================================================
共通
==================================================================================*/
/* レイアウト */
main {
	margin-top: 94px;
	position: relative;
}
main.index section {
	background: rgba(40,72,125,0.50);
	position: relative;
}
main.index section::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(40,72,125,1.0);
	mix-blend-mode: multiply;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
section {
	padding: 60px 0!important;
	position: relative;
	overflow: hidden;
}
section.h100vh {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	width: 100%;
	height: calc(100vh - 94px - 60px);
	/*min-height: calc(760px - 60px);*/
	padding: calc(94px + 30px) 0 30px!important;
}
section.child {
	padding: 40px 0!important;
}
.container {
	width: calc(100% - 30px);
	max-width: 1000px;
	padding: 0 15px;
	margin: auto;
}
.max1200 {
	max-width: 1200px;
	margin: auto;
}
.max960 {
	max-width: 960px;
	margin: auto;
}
.max840 {
	max-width: 840px;
	margin: auto;
}
.max700 {
	max-width: 700px;
	margin: auto;
}
.max460 {
	max-width: 460px;
	margin: auto;
}
.max360 {
	max-width: 360px;
	margin: auto;
}
.row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.row.align_center {
	align-items: center;
}
.row.align_end {
	align-items: flex-end;
}
.row.just_center {
	justify-content: center;
}
.row.just_start {
	justify-content: flex-start;
}
.row.just_end {
	justify-content: flex-end;
}
.col3 {
	width: calc(100% / 3 - 30px);
}
.col3_2 {
	width: calc(100% / 3 * 2);
}
.col2 {
	width: calc(100% / 2 - 15px);
}
.col2.wide {
	width: calc(100% / 2 - 30px);
}
.w100 {
	width: 100%;
}
.col4 {
	width: calc(100% / 4 - 15px);
}

.mb_10 {
	margin-bottom: 10px;
}
.mb_20 {
	margin-bottom: 20px;
}
.mb_30 {
	margin-bottom: 30px;
}
.mb_40 {
	margin-bottom: 40px;
}
.mb_60 {
	margin-bottom: 60px;
}
.mb_120 {
	margin-bottom: 120px;
}
.mr_10  {
	margin-right: 10px;
}

.bg_gray {
	padding: 15px 20px;
	background: #eeedee;
}
.bg_blue {
	padding: 15px 20px;
	background: #d9e8f4;
}
.frame {
	padding: 15px 20px;
	border: 2px #dbdbdb solid;
}
.z2 {
	position: relative;
	z-index: 2;
}

/* フォント */
h2 {
	color: #0064b8;
	font-size: 34px;
	font-weight: 700;
}
.white h2 {
	color: #fff;
}
h3 {
	color: #585757;
	font-size: 34px;
	font-weight: 700;
	text-align: left;
}
h4 {
	padding: 0 0 10px!important;
	border-bottom: 4px #b3b3b3 solid!important;
	font-size: 20px;
	line-height: 1.6;
	position: relative;
}
h4::after {
	content: "";
	display: block;
	width: 50%;
	border-bottom: 4px #0064b8 solid;
	position: absolute;
	bottom: -4px;
	left: 0;
}
h4.solid {
	padding: 15px 20px!important;
	border: none!important;
	background: #eeedee;
	color: #585757;
}
h4.plane {
	padding: 0!important;
	border: none!important;
	font-size: 24px;
}
h4.solid::after,
h4.plane::after {
    display: none;
}
h5 {
	padding: 5px 10px!important;
	background: #0064b8;
	color: #fff;
	font-size: 18px!important;
	font-weight: 700;
	line-height: 1.2;
}
.font_12 {
	font-size: 12px;
}
.font_14 {
	font-size: 14px;
}
.font_18 {
	font-size: 18px;
}
.font_20 {
	font-size: 20px;
}
.font_24 {
	font-size: 24px;
}
.font_28 {
	font-size: 28px;
}
.font_34 {
	font-size: 34px;
}
.font_46 {
	font-size: 46px;
}
.txt_center {
	text-align: center;
}
.txt_right {
	text-align: right;
}
.txt_left {
	text-align: left;
}
.eng {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
}
.eng.black {
	font-weight: 900;
}
.mincho {
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
}
.regular {
	font-weight: 400;
}
.bold {
	font-weight: 700;
}
.white {
	color: #fff;
}
.blue {
	color: #0064b8;
}
.gray {
	color: #888888;
}
.line1_2 {
	line-height: 1.2;
}
.line1_4 {
	line-height: 1.4;
}
.line2 {
	line-height: 2;
}
.indent {
	padding-left: .5em;
	text-indent: -.5em;
}
.indent1_4 {
	padding-left: 1.4em;
	text-indent: -1.4em;
}
.indent1_8 {
	padding-left: 1.8em;
	text-indent: -1.8em;
}
.indent3 {
	padding-left: 3em;
	text-indent: -3em;
}
.indent4 {
	padding-left: 4em;
	text-indent: -4em;
}
small {
	font-size: .6em;
	position: relative;
	top: -5px;
}

/* リスト */
ul.square li p {
	padding-left: 1.5em;
	position: relative;
}
ul.square li p::before {
	content: "\025a0";
	color: #0064b8;
	position: absolute;
	top: 0;
	left: 0;
}
ul.disc li p {
	padding-left: .8em;
	position: relative;
}
ul.disc li p::before {
	content: "\025cf";
	display: block;
	color: #0064b8;
	font-size: 10px;
	line-height: 2.8;
	position: absolute;
	top: 0;
	left: 0;
}
ol.decimal {
	padding-left: 1em;
	list-style: decimal;
}
ol.decimal.chuki {
	padding-left: 4.5em;
	position: relative;
}
ol.decimal.chuki::before {
	content: "Notes: ";
	display: block;
    line-height: 1.8;
	position: absolute;
	top: 0;
	left: 0;
}

/* ボタン */
.btn {
	display: inline-block;
	padding: 8px 30px 10px;
	border: 2px #fff solid;
	border-radius: 5px;
	color: #fff;
	letter-spacing: 0.1em;
}
.btn:hover {
	background: #fff;
	color: #0064b8;
}
.link {
	color: #0064b8;
	text-decoration: underline;
}
.anker {
	padding-top: 120px;
	margin-top: -120px;
}
.icon_pdf,
.icon_xsl {
	display: inline-block;
	padding-left: 25px;
	position: relative;
}
a .icon_pdf,
a.icon_pdf,
a .icon_xsl,
a.icon_xsl {
	text-decoration: underline;
}
.icon_pdf::after,
.icon_xsl::after {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: url("../img/icon_pdf.png") center center / contain no-repeat;
	position: absolute;
	top: -15%;
	left: 0;
}
.icon_xsl::after {
	background-image: url("../img/icon_xsl.png");
}
.btn_arrow {
	position: relative;
}
.btn_arrow::after {
	content: "";
	display: block;
	border: 15px transparent solid;
	border-right-color: #0064b8;
	border-bottom-color: #0064b8;
	position: absolute;
	right: 15px;
	bottom: 15px;
    transition: all .3s;
}
a.btn_arrow:hover::after {
    border-width: 20px;
    right: 5px;
    bottom: 5px;
}

/* アニメーション -----------*/
.animated.fadeinup {
	animation: fadeinup 1s;
}
@keyframes fadeinup {
	0% {opacity: 0; transform: translateY(30px);}
	50% {opacity: 0; transform: translateY(30px);}
	100% {opacity: 1; transform: translateY(0);}
}
.animated.fadeinup.second {
	animation: fadeinup_2nd 1.2s;
}
@keyframes fadeinup_2nd {
	0% {opacity: 0; transform: translateY(30px);}
	58.33% {opacity: 0; transform: translateY(30px);}
	100% {opacity: 1; transform: translateY(0);}
}
.animated.fadeinup.third {
	animation: fadeinup_3rd 1.4s;
}
@keyframes fadeinup_3rd {
	0% {opacity: 0; transform: translateY(30px);}
	64.28% {opacity: 0; transform: translateY(30px);}
	100% {opacity: 1; transform: translateY(0);}
}
.animated.fadeinup.fourth {
	animation: fadeinup_4th 1.6s;
}
@keyframes fadeinup_4th {
	0% {opacity: 0; transform: translateY(30px);}
	68.75% {opacity: 0; transform: translateY(30px);}
	100% {opacity: 1; transform: translateY(0);}
}
.animated.fadeinleft {
	animation: fadeinleft 1s;
}
@keyframes fadeinleft {
	0% {opacity: 0; transform: translateX(-30px);}
	50% {opacity: 0; transform: translateX(-30px);}
	100% {opacity: 1; transform: translateX(0);}
}
.animated.fadeinleft.second {
	animation: fadeinleft 1.2s;
}
@keyframes fadeinleft {
	0% {opacity: 0; transform: translateX(-30px);}
	58.33% {opacity: 0; transform: translateX(-30px);}
	100% {opacity: 1; transform: translateX(0);}
}

/*==================================================================================
INDEX
==================================================================================*/
section#main {
	height: calc(100vh - 94px);
	box-sizing: border-box;
	padding: 10px 0!important;
	background: #fff;
	position: sticky;
	top: 94px;
	z-index: -2;
}
section#main::before {
	display: none;
}
section#main::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #28487d;
	mix-blend-mode: color;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: all .3s;
}
section#main.bg::after {
	opacity: 1;
}
section#main .container {
	/*width: auto;*/
	max-width: 1920px;
	height: 100%;
	/*aspect-ratio: 2 / 1.04;*/
    position: relative;
}
section#main .container .row {
	/*width: auto;*/
	width: 100%;
	height: 100%;
	/*aspect-ratio: 2 / 1.04;*/
	margin: auto;
    position: relative;
}
section#main .img {
    width: calc(100% / 6 - 8px);
	max-height: 24.14%;
    margin-bottom: 10px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
	transform: scaleX(0.06) scaleY(0.07);
	animation: main_img00 .5s;
}
@keyframes main_img00 {
	0% {transform: scaleX(0) scaleY(0); opacity: 0;}
	100% {transform: scaleX(0.06) scaleY(0.07); opacity: 1;}
}
section#main .img.active {
	border-radius: 15px;
    transform: scaleX(1) scaleY(1);
    animation: main_img 1.5s;
}
@keyframes main_img {
    0% {border-radius: 50%; transform: scaleX(0.06) scaleY(0.07);}
    33.33% {border-radius: 50%; transform: scaleX(0.06) scaleY(0.07);}
    100% {border-radius: 15px; transform: scaleX(1) scaleY(1);}
}
section#main .img::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,72,133,1.0);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.8;
}
section#main .img.active::after {
    opacity: 0;
    animation: main_img_af 1.5s;
}
@keyframes main_img_af {
    0% {opacity: 0.8;}
    66.66% {opacity: 0.8;}
    100% {opacity: 0;}
}
section#main .img img {
	height: 100%;
	object-fit: cover;
}
section#main .main_logo {
	display: flex;
	justify-content: center;
	align-items: center;
    width: calc(100% / 2 - 4px);
    height: 45vh;
	background: #fff;
    overflow: hidden;
    position: absolute;
    top: 25%;
    left: 0;
	opacity: 0;
	transition: opacity .6s;
}
section#main .main_logo.show {
    animation: main_logo 1s;
	opacity: 1;
}
@keyframes main_logo {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
section#main.bg .main_logo {
    opacity: 0;
}

/* 投資対象としてのHOYOの実力 --------------------------------------------------------*/
#capability_slide a {
	display: block;
}
#capability_slide {
	padding-top: 50px!important;
}
#capability_slide .sp-slide {
	opacity: 0.5;
	transform: translateY(10%);
}
#capability_slide .sp-slide.sp-selected {
	opacity: 1;
	transform: translateY(0);
}
#capability_slide .sp-slide a {
	display: block;
	padding: 20px 40px;
	background: rgba(255,255,255,0.8);
}
#capability_slide .sp-slide img {
	width: auto;
	max-height: 35vh;
	margin: 0 auto 20px;
}
/* 矢印 */
#capability_slide .sp-arrows {
	max-width: 1000px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
#capability_slide .sp-arrows .sp-arrow {
	width: 40px;
	height: 40px;
	border-left: 4px #3864b4 solid;
	border-bottom: 4px #3864b4 solid;
	left: 30px;
	transform: rotate(45deg);
}
#capability_slide .sp-arrows .sp-arrow.sp-next-arrow {
	left: auto;
	right: 30px;
	transform: rotate(225deg);
}
#capability_slide .sp-arrows .sp-arrow::before,
#capability_slide .sp-arrows .sp-arrow::after {
	display: none;
}
/* サムネイル */
#capability_slide .sp-thumbnails {
	z-index: 2;
}
#capability_slide .sp-thumbnails-container {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%!important;
}
#capability_slide .sp-thumbnail-container {
	margin: 0 15px;
	cursor: pointer;
}
#capability_slide .sp-thumbnail-container:first-child {
	margin: 0 15px 0 0;
}
#capability_slide .sp-thumbnail-container:last-child {
	margin: 0 0 0 15px;
}
#capability_slide .sp-thumbnail-container.sp-selected-thumbnail {
	color: #1acaff;
}
#capability_slide .sp-thumbnail-container.sp-selected-thumbnail::before,
#capability_slide .sp-thumbnail-container.sp-selected-thumbnail::after {
	display: none;
}
#capability_slide .sp-thumbnail-container p {
	white-space: nowrap;
	position: relative;
	top: 0;
}

/* 2023年度のハイライト ------------------------------------------------------------*/
section#top_highlight a {
	display: block;
	width: calc(100% / 2 - 10px);
	box-sizing: border-box;
	padding: 20px 40px;
	background: rgba(255,255,255,0.8);
}
section#top_highlight a .row.mb_30 {
	margin: 0 auto 30px;
}
section#top_highlight a .icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: #fff;
	margin-top: 25px;
}
section#top_highlight a .icon img {
	width: 65%;
}
section#top_highlight a .txt {
	width: calc(100% - 110px);
	white-space: nowrap;
}
/* カウントアップ */
section#top_highlight .proportion {
	font-size: 70px;
}
section#top_highlight .proportion .countup {
	font-size: 80px;
}

/* マネジメントメッセージ ------------------------------------------------------------*/
section#top_message a {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% / 2 - 10px);
	margin-bottom: 20px;
    background: rgba(255,255,255,0.8);
	position: relative;
}
section#top_message a:nth-child(3),
section#top_message a:nth-child(4) {
	margin-bottom: 0;
}
section#top_message a.other {
	display: block;
}
section#top_message a:hover {
	background: rgba(0,100,184,0.80);
}
section#top_message a.btn_arrow:hover::after {
	border-right-color: #fff;
	border-bottom-color: #fff;
	opacity: 0.5;
}
section#top_message a .img {
	width: 48%;
	height: 250px;
    max-height: 30vh;
    padding-top: 10px;
    overflow: hidden;
    position: relative;
}
section#top_message a.other .img {
	width: calc(100% - 60px);
	height: auto;
    padding-top: 0;
    overflow: hidden;
    position: absolute;
	bottom: 0;
	left: 0;
}
section#top_message a .img::after {
	content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #303846;
    mix-blend-mode: multiply;
    opacity: 0.4;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s;
}
section#top_message a.other .img::after {
	display: none;
}
section#top_message a:hover .img {
	background: #0064B8;
}
section#top_message a.other:hover .img {
	background: none;
}
section#top_message a:hover .img::after {
	opacity: 0;
}
section#top_message a .img img {
    filter: grayscale(100%);
	transition: all .3s;
}
section#top_message a:hover .img img {
    filter: grayscale(0%);
	transform: scale(1.05);
}
section#top_message a .inner {
	width: 52%;
	box-sizing: border-box;
	padding: 15px 15px 0;
}
section#top_message a.other .inner {
	width: 100%;
}
section#top_message a .inner p,
section#top_message a .inner .blue {
    transition: all .3s;
}
section#top_message a:hover .inner p,
section#top_message a:hover .inner .blue {
	color: #fff;
}

/* HOYAの価値創造 -----------------------------------------------------------------*/
section#top_value .container {
	height: 100%;
}
section#top_value a {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	background: url("../img/value_main.jpg") center center / cover no-repeat;
}
section#top_value a .txt {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: center;
	width: 340px;
	height: 340px;
	box-sizing: border-box;
	padding: 0 30px;
	background: rgba(40,72,125,1.0);
}
section#top_value a .txt h2 {
	width: 100%;
}

/* ESG報告 -----------------------------------------------------------------------*/
section#top_esg .row {
	position: relative;
}
section#top_esg .column {
	width: calc(100% / 4 - 1px);
    transition: all .3s;
}
section#top_esg .column .tab {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 40px;
	background: #fff;
	text-align: center;
	line-height: 1;
	transition: all .3s;
}
section#top_esg .column:hover .tab {
	background: #004680;
	color: #fff;
}
section#top_esg .column.show .img {
	opacity: 0;
}
/*section#top_esg .column .inner {
	display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 160px;
    background: rgba(255,255,255,0.8);
}*/
section#top_esg .column .inner {
	display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: calc(100% - 40px);
    box-sizing: border-box;
    padding: 30px 40px;
	position: absolute;
    top: 40px;
    left: 0;
    z-index: -1;
	visibility: hidden;
	opacity: 0;
	transition: all .3s;
}
section#top_esg .column.esg02 .inner {
	background: url("../img/esg02_bg.jpg") center center / cover no-repeat;
}
section#top_esg .column.esg03 .inner {
	background: url("../img/esg03_bg.jpg") center center / cover no-repeat;
}
section#top_esg .column.esg04 .inner {
	background: url("../img/esg04_bg.jpg") center center / cover no-repeat;
}
section#top_esg .column.hidden .inner {
	opacity: 0;
	z-index: -1;
}
/*
section#top_esg div.column:hover .inner {
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 30px 40px;
    background: none;
    position: absolute;
    top: 0;
    left: 0;
}
section#top_esg a.column:hover .inner::after {
    border-width: 20px;
    right: 5px;
    bottom: 5px;
}
*/
section#top_esg div.column:hover .inner {
    z-index: 10;
	visibility: visible;
	opacity: 1;
}
/*
section#top_esg div.column .inner::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #01122E;
    mix-blend-mode: multiply;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s;
}
section#top_esg div.column:hover .inner::before {
    opacity: .8;
}
*/
section#top_esg div.column .inner a {
	color: #fff;
    text-align: left;
	position: relative;
    z-index: 2;
}
/*section#top_esg .column .inner ul {
	position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}*/
section#top_esg .column .inner ul {
    margin-left: 80px;
	position: relative;
    z-index: 2;
}
/*section#top_esg .column:hover .inner ul {
    margin-left: 80px;
	position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 2;
}*/
section#top_esg .column .inner ul li {
    display: block;
	padding-left: 20px;
    position: relative;
}
section#top_esg .column .inner ul li::before {
	content: "";
    display: block;
    border: 8px transparent solid;
    border-right: none;
    border-left: 10px #fff solid;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
section#top_esg .column .inner ul a {
    display: inline-block;
	color: #fff;
}
section#top_esg .column .inner a:hover {
	filter: none;
    opacity: .8;
}
/* 事業概況 -----------------------------------------------------------------------*/
section#top_review {
	background: #0064b8;
}
section#top_review::before,
section#top_review::after {
	content: "";
	display: block;
	width: 50%;
	height: 100%;
	mix-blend-mode: unset;
	background: url("../img/review_lifecare_main.jpg") center center / cover no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
section#top_review::after {
	background-image: url("../img/review_it_main.jpg");
	background-position: left center;
	left: auto;
	right: 0;
}
section#top_review h2 {
	position: relative;
	z-index: 2;
}
section#top_review a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 360px;
	height: 360px;
	background: rgba(255,255,255,0.8);
	position: relative;
	z-index: 2;
}

/* ライブラリ ---------------------------------------------------------------------*/
section#top_library .container {
	height: 100%;
}
section#top_library a {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	background: url("../img/library_main.jpg") center center / cover no-repeat;
}
section#top_library a .txt {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	width: 340px;
	height: 340px;
	box-sizing: border-box;
	padding: 0 30px;
	background: rgba(40,72,125,1.0);
	position: relative;
}
/*==================================================================================
2023年度ハイライト
==================================================================================*/
section#highlight {
	padding: 60px 0 0!important
}
section#highlight ul.highlight_link li {
	width: 50%;
	position: relative;
	opacity: 0.5;
}
section#highlight ul.highlight_link li.active {
	pointer-events: none;
	opacity: 1;
}
section#highlight ul.highlight_link li.active::after {
	content: "";
	display: block;
	width: 100%;
	border-bottom: 15px #0064b8 solid;
	position: absolute;
	left: 0;
	bottom: 0;
}
section#highlight ul.highlight_link li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 240px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
	text-align: center;
}
section#highlight ul.highlight_link li.a01 a {
	background-image: url("../img/highlight01_btn.jpg");
}
section#highlight ul.highlight_link li.a01 a:hover {
	background-image: url("../img/highlight01_btn_hv.jpg");
}
section#highlight ul.highlight_link li.a02 a {
	background-image: url("../img/highlight02_btn.jpg");
}
section#highlight ul.highlight_link li.a02 a:hover {
	background-image: url("../img/highlight02_btn_hv.jpg");
}
/* ESG ----------------------------------------------------------------------------*/
/* 開示の拡充・外部評価 */
section#e04 .logo_ftse {
	max-width: 200px;
}
section#e04 .logo_msci {
	max-width: 320px;
}
section#e04 .logo_sp_jpx {
	max-width: 70px;
}
section#e04 .logo_ms {
	max-width: 240px;
}
section#e04 .logo_msci_leacers {
	max-width: 300px;
}
/* Financial ---------------------------------------------------------------------*/
section.financial .proportion {
	font-size: 70px;
	line-height: .8;
}
section.financial .proportion span {
	font-size: 110px;
}

/* ページリンク --------------------------------------------------------------------*/
.page_nav ul li {
	width: calc(100% / 3 - 7px);
}
.page_nav ul li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px;
	box-sizing: border-box;
	padding-left: 20px;
	background: #eeedee;
	color: #585757;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
	position: relative;
}
.page_nav ul li a.right {
	padding-left: 0;
	padding-right: 20px;
}
.page_nav ul li a:hover {
	filter: none;
	background: #F1F1F1;
}
.page_nav ul li a::before {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #585757;
	position: absolute;
	top: 10px;
	left: 15px;
}
.page_nav ul li a::after {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border-top: 1px #fff solid;
	border-left: 1px #fff solid;
	position: absolute;
	top: 44%;
	left: 24px;
	transform: rotate(45deg);
}
.page_nav ul li a.left::after {
	top: 36%;
	left: 27px;
	transform: rotate(-45deg);
}
.page_nav ul li a.right::before {
	left: auto;
	right: 15px;
}
.page_nav ul li a.right::after {
	top: 36%;
	left: auto;
	right: 27px;
	transform: rotate(135deg);
}

/*==================================================================================
ESG報告
==================================================================================*/
/* HOYAのESG ----------------------------------------------------------------------*/
/* マテリアリティ（重要課題） */
section#materiality03 .img {
	width: 220px;
}
section#materiality03 .txt {
	width: calc(100% - 220px - 40px);
}
table.table01 {
	width: 100%;
	border-top: 1px #000 solid;
}
table.table01 p {
	font-weight: 400;
	line-height: 1.4;
}
table.table01 p.bold {
	font-weight: 700;
}
table.table01 tr {
	border-bottom: 1px #000 solid;
}
table.table01.mutual tr:nth-child(odd) {
	background: #e5eff8;
}
table.table01 th {
	padding: 15px 10px;
	background: #b2d0ea;
	font-weight: 700;
	text-align: center;
}
table.table01 td {
	padding: 10px;
	vertical-align: top;
}
table.table01.data03 td {
	width: calc(100% / 3);
}
section#materiality03 table.table01 td:nth-child(1){
	width: 24%;
}
table.table01 td ul.disc li p::before {
	line-height: 2.4;
}
section#materiality03 table.table01.data04 td:nth-child(1){
	width: 22%;
}
section#materiality03 table.table01.data04 td.sdgs {
	width: 25%;
}
.icon_sdgs {
	display: inline-block;
	width: 90px;
}
/* コーポレートガバナンス ------------------------------------------------------------*/
/* 基本的な考え方 */
.page_nav.other ul li {
	width: calc(100% / 3)!important;
    text-align: left!important;
}
.page_nav.other ul li:nth-child(2) {
    text-align: center!important;
}
.page_nav.other ul li:nth-child(3) {
    text-align: right!important;
}
.page_nav.other ul li a {
	display: inline-flex;
    width: auto;
}
.page_nav.other ul li a.right {
	text-align: right;
}
.page_nav.other ul li a.active {
	padding-left: 20px!important;
    pointer-events: visible!important;
}
.page_nav.other ul li a.active::before {
	display: block!important;
    border-left: 6px transparent solid;
    border-right: 6px transparent solid;
    border-bottom: 10px #0064b8 solid;
    top: 49%;
}
.page_nav ul.list li {
	width: 100%!important;
}
.page_nav ul.list.row li {
	width: calc(100% / 3 - 7px)!important;
}
.page_nav ul.list li a {
	display: block;
    height: auto;
	padding-left: 20px!important;
	color: #585757;
	font-weight: 500;
	text-align: left;
	line-height: 1.4!important;
	position: relative;
}
.page_nav ul.list li a:hover {
	filter: brightness(1.1);
	background: none;
}
.page_nav ul.list li a::before {
	content: "";
	display: block;
	width: 10px!important;
	height: 10px!important;
    border: none!important;
	border-top: 1px #585757 solid!important;
	border-right: 1px #585757 solid!important;
	position: absolute;
	top: 7px!important;
	left: 0!important;
	transform: rotate(45deg)!important;
}
.page_nav ul.list li a::after {
	display: none;
}

/* 取締役会 */
.profile {
	background: #eeedee;
    position: relative;
}
.profile .img {
	width: 160px;
    height: 220px;
    overflow: hidden;
}
.profile .img img {
    height: 100%;
    object-fit: cover;
}
.profile .basic {
	width: calc(100% - 160px - 60px);
	padding: 15px 30px 80px 30px;
}
.profile ul {
	width: calc(100% - 160px - 60px);
	margin-left: 160px;
	padding: 0 30px;
	position: absolute;
	bottom: 0;
	left: 0;
}
.profile ul li {
	width: calc(100% / 3 - 10px);
}
.profile ul li p.ttl {
	padding: 5px;
	background: #585757;
	color: #fff;
	line-height: 1;
}
.profile .data {
	width: calc(100% - 80px);
	padding: 30px 40px;
	clear: both;
}
.profile .data table {
	width: 100%;
}
.profile .data table th {
	width: 100px;
	padding-bottom: 10px;
	text-align: left;
	font-weight: 400;
}
.profile .data table td {
	width: calc(100% - 100px);
	padding-bottom: 10px;
}

/* 社外取締役のスキル・マトリックス */
section#skill table {
	width: 100%;
}
section#skill table tr {
	border-bottom: 1px #fff solid;
}
section#skill table thead th {
	vertical-align: middle;
    white-space: nowrap;
}
section#skill thead th:nth-child(n+4) {
	width: 70px;
	box-sizing: border-box;
}
section#skill table tbody th {
	padding: 10px 20px;
	text-align: left;
    white-space: nowrap;
}
section#skill table tbody td {
	color: #585757;
}
section#skill table tbody td:nth-child(n+4) {
    text-align: center;
    vertical-align: middle;
}
/* 執行役 */
section#officer .officer {
	background: #eeedee;
}
section#officer .officer .img {
	width: 200px;
}
section#officer .officer .txt {
	width: calc(100% - 200px - 60px);
	padding: 15px 30px;
}

/* 委員会 */
ul.ul_indent3 {
	padding-left: 3em;
}
section#committee .arrow {
	text-align: center;
}
section#committee .arrow span {
	display: inline-block;
	width: 30px;
	height: 30px;
	border-right: 10px #c6c8c8 solid;
	border-bottom: 10px #c6c8c8 solid;
	transform: rotate(45deg);
}
/*---------*/
section#committee table {
	width: 100%;
}
section#committee table tr {
	border-bottom: 1px #000 solid;
}
section#committee table th,
section#committee table td {
	vertical-align: middle;
}
section#committee table p {
	line-height: 1.4;
}
section#committee table p.line1_2 {
	line-height: 1.2;
}
section#committee .table01 {
	width: 240px;
}
section#committee .table01 table th {
	height: 40px;
	padding: 6px;
	background: #c6c8c8;
}
section#committee .table01 table td {
	padding: 8px 6px;
}
section#committee .table01 table td:nth-child(2) {
	text-align: center;
}
/*---------*/
section#committee .cross {
	width: 40px;
	position: relative;
}
section#committee .cross::before,
section#committee .cross::after {
	content: "";
	display: block;
	width: 60px;
	border-bottom: 1px #999 solid;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(45deg);
}
section#committee .cross::after {
	transform: translate(-50%,-50%) rotate(-45deg);
}
/*---------*/
section#committee .table02 {
	width: 500px;
}
section#committee .table02 table th {
	height: 40px;
	padding: 6px;
	background: #d9e8f4;
}
section#committee .table02 table td {
	padding: 8px 0;
}
section#committee .table02 table .vertical {
	width: 24px;
}
section#committee .table02 table .vertical p {
	line-height: 1.1;
}
section#committee .table02 table .w15 {
	width: 15%;
}
section#committee .table02 table .w14 {
	width: 14%;
	text-align: center;
}
section#committee .table02 table .w40 {
	width: 40%;
	padding-left: 8px;
}
/*---------*/
section#committee table.table03 th {
	padding: 6px;
	background: #d9e8f4;
	font-weight: 500;
}
section#committee table.table03 td {
	padding: 6px;
}

/* HOYAグループ コンプライアンス体制 */
.table {
	width: 100%;
}
.table p {
	line-height: 1.4;
}
.table p.line1_2 {
	line-height: 1.2;
}
.table tr {
	border-bottom: 1px #fff solid;
	vertical-align: middle;
}
.table th {
	padding: 6px;
	border-right: 1px #fff solid;
	background: #dbdbdb;
	vertical-align: middle;
	font-weight: 500;
}
.table thead th {
	background: #585757;
	color: #fff;
}
.table td {
	padding: 8px 10px;
	border-right: 1px #fff solid;
	background: #eeedee;
}
.table th:last-child,
.table td:last-child {
	border-right: none;
}
.table td.middle {
	vertical-align: middle;
}
section#compliance .txt {
	width: calc(100% - 200px - 40px);
}
section#compliance .img {
	width: 200px;
}

/* 社会 --------------------------------------------------------------------------*/
/* 人権尊重 */
section#labor .table th {
	padding: 5px;
}
section#labor .table td {
	padding: 4px 6px;
}
section#labor .table .vertical {
	width: 20px;
	vertical-align: middle;
	text-align: center;
}
section#labor .table .vertical p {
	line-height: 1.1;
}
section#labor .table tr:nth-child(2) th {
	width: 90px;
}
section#labor .table tr:nth-child(n+12) td:first-child {
	padding-left: 15px;
}
.society_ttl {
	height: 95px;
	box-sizing: border-box;
	padding: 15px 20px;
	background-position: right center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}
.society_ttl.t01 {
	background-image: url("../img/society_ttlbg01.jpg");
}
.society_ttl.t02 {
	background-image: url("../img/society_ttlbg02.jpg");
}
.society_ttl.t03 {
	background-image: url("../img/society_ttlbg03.jpg");
}
.society_ttl.t04 {
	background-image: url("../img/society_ttlbg04.jpg");
}
.society_ttl::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, #0064b8 0%, #0064b8 40%, transparent 50%);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.society_ttl p {
	line-height: 1.2;
	position: relative;
	z-index: 2;
}

/* 人材戦略 */
section#hrd .bg01,
section#hrd .bg02 {
	width: 50%;
	box-sizing: border-box;
	padding: 15px 20px;
	background: #cce0f1;
}
section#hrd .bg02 {
	background: #a6c9e6;
}

/* 社会貢献活動 */
section#market .float {
	clear: both;
}
section#market .img {
	width: 160px;
    margin: 0 0 20px 20px;
    float: right;
}
section#market .img02 {
	width: 250px;
    margin: 10px 0 10px 20px;
	float: right;
}
section#market .donation {
	width: calc(100% / 3 - 10px);
	box-sizing: border-box;
	padding: 15px;
	border: 1px #9d9d9e solid;
}
section#market .donation .icon {
	display: block;
	width: 80px;
	margin: -60px auto 15px;
	padding: 0 10px;
	background: #fff;
}
/* 環境 --------------------------------------------------------------------------*/
.society_ttl.t05 {
	background-image: url("../img/environment_ttl01.jpg");
}
.society_ttl.t06 {
	background-image: url("../img/environment_ttl02.jpg");
}
.society_ttl.t07 {
	background-image: url("../img/environment_ttl03.jpg");
}
.society_ttl.t08 {
	background-image: url("../img/environment_ttl04.jpg");
}
/* 気候変動 */
section#environment .table thead th {
	background: #C6C8C8;
	color: #000;
}
section#environment .table tbody td {
    vertical-align: middle;
}
section#environment .float {
	clear: both;
}
section#environment .float .img {
    width: calc(50% - 20px);
    margin: 0 0 10px 20px;
    float: right;
}
/* 水 */
section#water .water_reduction {
    display: flex;
    flex-wrap: wrap;
    color: #fff;
}
section#water .water_reduction .ttl {
    width: 260px;
    box-sizing: border-box;
    padding: 10px 20px;
    background: #0064b8;
}
section#water .water_reduction .cont {
    width: calc(100% - 260px);
    box-sizing: border-box;
    padding: 10px 20px;
    background: #3383c6;
}
section#water .table.t01 th:last-child {
	background: #C6C8C8;
}
section#water .table.t01 td:last-child {
	background: #DBDBDB;
}
/* 汚染および廃棄物 */
section#waste .table.t01 tr:first-child th:last-child {
	background: #C6C8C8;
}
section#waste .table.t01 td:last-child {
	background: #DBDBDB;
}
section#waste .float  {
	clear: both;
}
section#waste .float .img {
	float: right;
	width: calc(50% - 15px);
	margin-left: 15px;
}

/*==================================================================================
マネジメントメッセージ
==================================================================================*/
section#interview_main {
	padding-bottom: 0!important;
}
.page_nav.plane ul li {
	width: auto;
}
.page_nav.plane ul li a {
	padding-left: 20px;
	background: none;
	line-height: 1.3;
    text-align: left;
}
.page_nav.plane ul li a.right {
	padding-left: 0;
	padding-right: 20px;
}
.page_nav.plane ul li a:hover {
	color: #0064b8;
}
.page_nav.plane ul li a::before {
	width: auto;
	height: auto;
	border-radius: 0;
	border: 6px transparent solid;
	border-left: none;
	border-right: 10px #0064b8 solid;
	background: none;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.page_nav.plane ul li a.right::before {
	border-right: none;
	border-left: 10px #0064b8 solid;
	left: auto;
	right: 0;
}
.page_nav.plane ul li a::after {
	display: none;
}
.page_nav.plane ul li a.active {
	padding-left: 0;
	pointer-events: none;
}
.page_nav.plane ul li a.active::before {
	display: none;
}
.page_nav.plane ul li a.active span {
	display: inline-block;
	padding-bottom: 5px;
	border-bottom: 3px #0064b8 solid;
    position: relative;
    top: 4px;
}
section#interview_main .bg {
	width: 100%;
	height: calc(460px - 60px);
	padding: 20px 0 40px;
	background: linear-gradient(to bottom, #eeedee 20%, #b3b3b3 100%);
	position: relative;
}
section#interview_main.int04 .bg {
	height: auto;
	padding: 20px 0 30px;
	background: linear-gradient(to right, #eeedee 20%, #b3b3b3 100%);
}
section#interview_main .bg .row {
	align-content: space-between;
	height: 100%;
	position: relative;
}
section#interview_main .bg .row::after {
	content: "";
	display: block;
	width: 46%;
	height: calc(100% + 40px);
	background-position: right bottom;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	right: 0;
	bottom: -40px;
}
section#interview_main.int01 .bg .row::after {
	background-image: url("../img/interview01.png");
	right: -40px;
}
section#interview_main.int02 .bg .row::after {
	background-image: url("../img/interview02.png");
}
section#interview_main.int03 .bg .row::after {
	background-image: url("../img/interview03.png");
}
section#interview_main.int04 .bg .row::after {
	display: none;
}

section#interview_main .row .ttl {
	width: 100%;
	position: relative;
	z-index: 2;
}
section#interview_main h3 {
	font-size: 18px;
	font-weight: 500;
	position: relative;
	z-index: 2;
}
section#interview_main .mincho {
	font-size: 26px;
	line-height: 1.7;
	letter-spacing: 0.05em;
}
section#interview_main.int01 .mincho {
	font-size: 24px;
}
section#interview_main.int04 .mincho {
	font-size: 46px;
    line-height: 1;
}
section#interview_main p {
	position: relative;
	z-index: 2;
}
/* 【特集】社外取締役に聞く */
section[id^="other_int0"] {
	padding-bottom: 0!important;
}
section[id^="other_int0"] .container {
	padding: 0 0 40px;
	border-bottom: 4px #b3b3b3 solid;
	position: relative;
}
section[id^="other_int0"] .container::after {
	content: "";
	display: block;
	width: 50%;
	border-bottom: 4px #0064b8 solid;
	position: absolute;
	bottom: -4px;
	left: 0;
}
section#other_int05 .container {
	border-bottom: none;
}
section#other_int05 .container::after {
	display: none;
}
section[id^="other_int0"] .question {
	width: calc(100% - 30px);
	box-sizing: border-box;
	margin: 0 0 20px auto;
	padding: 0 60px;
	position: relative;
}
section[id^="other_int0"] .question::before {
	content: "Q";
	display: flex;
	justify-content: center;
	align-items: center;
	width: 65px;
	height: 65px;
	box-sizing: border-box;
	border-radius: 50%;
	padding-bottom: 6px;
	background: #0064b8;
	color: #fff;
	font-size: 30px;
	font-weight: 500;
	position: absolute;
	top: 0;
	left: -30px;
}
section[id^="other_int0"] .frame {
    padding: 20px;
	border: 2px #0064b8 solid;
	border-radius: 20px;
    position: relative;
}
section[id^="other_int0"] .txt {
	width: calc(72% - 30px);
	box-sizing: border-box;
}
section[id^="other_int0"] .img {
	width: 40%;
    position: absolute;
    bottom: -20px;
    right: -20px;
}
/*section[id^="other_int0"] .img img {
	transform-origin: right bottom;
	transform: scale(1.25);
}*/
section#other_int05 .img {
	width: 34%
}

/*==================================================================================
投資対象としてのHOYAの実力
==================================================================================*/
.capability_ttl {
	width: 100%;
	height: 25vh;
	min-height: 200px;
	margin: 0 auto 30px;
	position: relative;
}
.capability_ttl img {
	height: 100%;
	object-fit: cover;
}
.capability_ttl h3 {
	width: 100%;
	color: #fff;
	font-size: 28px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 2;
}
.capability_ttl h3 span {
	position: relative;
	z-index: 2;
}

.ttl_arrow span {
	display: inline-block;
	padding-left: 1.1em;
	line-height: 1.4;
	position: relative;
}
.ttl_arrow span::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-top: 4px #0064b8 solid;
	border-right: 4px #0064b8 solid;
	position: absolute;
	top: 7px;
	left: 0;
	transform: rotate(45deg);
}
/* 株主価値の最大化に向けて ----------------------------------------------------------*/
section#value01 .profile {
	display: flex;
	flex-wrap: wrap;
	position: relative;
}
section#value01 .profile .img {
	width: 160px;
	height: 220px;
}
section#value01 .profile .txt {
	width: calc(100% - 160px);
	background: #EEEDEE;
}
section#value01 .profile .ttl {
	padding: 10px;
	background: #0064b8;
	color: #fff;
	line-height: 1;
}
section#value01 .profile .name {
	padding: 10px 20px;
	line-height: 1.4;
}
section#value01 .profile a {
	display: inline-block;
	padding: 10px 60px 10px 20px;
	background: #ffffff url("../img/icon_arrow.png") right 10px center / 40px no-repeat;
	position: absolute;
	right: 15px;
	bottom: 15px;
}
section#value01 .table thead th {
    white-space: nowrap;
}
section#value01 .table thead th:nth-child(n+4) {
	width: 70px;
    box-sizing: border-box;
}
section#value01 .table tbody th {
	padding: 10px 20px;
	text-align: left;
    white-space: nowrap;
}
section#value01 .table tbody td {
	color: #585757;
}
section#value01 .table tbody td:nth-child(n+4) {
    text-align: center;
    vertical-align: middle;
}

/*==================================================================================
情報・通信事業
==================================================================================*/
.review_ttl {
	width: 100%;
	height: 25vh;
	min-height: 240px;
	margin: 0 auto 30px;
	position: relative;
}
.review_ttl img {
	height: 100%;
	object-fit: cover;
}
.review_ttl h3 {
	width: 100%;
	color: #fff;
	font-size: 28px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 2;
}

/*==================================================================================
ライフケア事業
==================================================================================*/
section#lifecare01 .float {
	clear: both;
}
section#lifecare01 .float .img {
	width: calc(100% / 2 - 15px);
	float: right;
	margin: 0 0px 10px 20px;
}
section#lifecare02 .pentax1 {
	width: calc(100% / 3 - 6px);
}
section#lifecare02 .pentax2 {
	width: calc(100% / 3 * 2 - 6px);
}
section#lifecare02 .pentax2 {
	width: calc(100% / 3 * 2 - 6px);
}

/*==================================================================================
ライブラリー
==================================================================================*/
.library_ttl {
	width: 100%;
	height: 20vh;
	min-height: 240px;
	margin: 0 auto 30px;
	position: relative;
}
.library_ttl img {
	height: 100%;
	object-fit: cover;
}
.library_ttl h3 {
	width: 100%;
	color: #fff;
	font-size: 28px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 2;
}

/*==================================================================================
Footer
==================================================================================*/
footer {
	padding: 70px 0 30px!important;
	position: relative;
}
footer.index {
	background: #28487d;
}
footer #pagetop {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 30px; 
	transform: translateY(60px);
	z-index: 100;
}
footer #pagetop.is-scrolling {
	transform: translateY(0);
}
footer #pagetop.is-stop {
	position: absolute;
	top: 30px;
	bottom: auto;
	transform: translateY(0);
}
footer #pagetop a {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #c4c6c6;
	margin: auto;
	position: relative;
}
footer #pagetop a::after {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border-top: 2px #fff solid;
	border-left: 2px #fff solid;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
}
footer.index #pagetop a::after {
	border-color: #28487d;
}

.tb {display: none;}
.pc {display: inline;}
.sp {display: none;}


@media screen and (max-width : 1500px) {
	section#main .img {
		transform: scaleX(0.06) scaleY(0.05);
	}
	@keyframes main_img00 {
		0% {transform: scaleX(0) scaleY(0); opacity: 0;}
		100% {transform: scaleX(0.06) scaleY(0.05); opacity: 1;}
	}
	@keyframes main_img {
	    0% {border-radius: 50%; transform: scaleX(0.06) scaleY(0.05);}
	    33.33% {border-radius: 50%; transform: scaleX(0.06) scaleY(0.05);}
	    100% {border-radius: 15px; transform: scaleX(1) scaleY(1);}
	}
}


@media screen and (max-width : 1024px) {
	.pc {display: none;}
	.tb {display: inline;}
	p {font-size: 14px;}
	/*==================================================================================
	Header
	==================================================================================*/
	header {
		display: flex!important;
		align-items: center;
		width: 100%;
		height: 60px;
		padding: 0!important;
		border-top: none!important;
	}
	header .logo {
		display: block;
		width: 110px;
	}
	header .logo img {
		margin-bottom: 5px;
	}
	/* スマホ版 メニュー -----------------------*/
	nav.gnav {
	    z-index: 2;
	    width: 100%;
		height: calc(100vh - 60px);
		background: #0064b8;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s;
	    position: fixed;
	    top: 60px;
	    left: 0;
	}
	nav.gnav.active {
	    opacity: 1;
		visibility: visible;
	}
	nav.gnav .menu {
		display: flex;
		flex-wrap: wrap;
		width: calc(100% - 30px);
		max-width: 360px;
		margin: 0 auto;
		padding: 50px 15px 0;
		transform: translateY(40px);
		transition: all .6s;
	}
	nav.gnav.active .menu {
		transform: translateY(0);
	}
	nav.gnav .menu ul {
		opacity: 0;
	}
	nav.gnav.active .menu ul {
		opacity: 1;
	}
	nav.gnav .menu ul li a,
	nav.gnav .menu ul li a.active {
		color: #fff;
		font-size: 16px;
	}
	nav.gnav .menu ul li a:hover {
		opacity: 1;
		color: #333;
	}
	nav.gnav .menu ul.sub {
		justify-content: center;
		order: 2;
	}
	nav.gnav .menu ul.sub li {
		margin: 0 0 20px;
		text-align: center;
	}
	nav.gnav .menu ul.sub li:first-child {
		padding-right: 20px;
		border-right: 1px #fff solid;
	}
	nav.gnav .menu ul.sub li:nth-child(2) {
		padding-left: 20px;
	}
	nav.gnav .menu ul.sub li:last-child {
		width: 100%;
	}
	nav.gnav .menu ul.sub li:last-child a {
		display: inline-block;
		padding: 4px 6px;
		background: #fff;
		color: #0064b8;
	}
	nav.gnav .menu ul.sub li a .blue {
		color: #fff;
	}
	nav.gnav .menu ul.sub li a:hover .blue {
		color: #333;
	}
	nav.gnav .menu ul.main {
		display: block;
		margin-bottom: 20px;
		border-bottom: 1px #fff solid;
	}
	nav.gnav .menu ul.main li {
		margin: 0 0 20px;
	}
	nav.gnav .menu ul.main li a {
		line-height: 1;
	}
	.gnavToggle {
	    z-index: 9999;
	    display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	    width: 40px;
	    height: 40px;
	    background: #0064b8;
	    text-align: center;
	    cursor: pointer;
	    position: fixed;
	    right: 20px;
	    top: 10px;
	}
	.gnavToggle span {
	    display: block;
	    width: 24px;
		margin-bottom: 7px;
	    border-bottom: 1px #FFF solid;
	    transition: .35s ease-in-out;
	}
	.gnavToggle span:last-child {
		margin-bottom: 0;
	}
	.gnavToggle span:nth-child(4) {
		width: 100%;
		margin-bottom: 0;
	    border: none;
	    color: #FFF;
	    font-size: 10px;
	    font-weight: bold;
		text-align: center;
	}
	.gnavToggle.active span:nth-child(1) {
	    transform: translateY(8px) rotate(-45deg);
	}
	.gnavToggle.active span:nth-child(2) {
		opacity: 0;
	}
	.gnavToggle.active span:nth-child(3) {
	    transform: translateY(-8px) rotate(45deg);
	}
	/*==================================================================================
	共通
	==================================================================================*/
	/* レイアウト */
	main {
		margin-top: 60px!important;
	}
	section {
		padding: 40px 0!important;
	}
	section.h100vh {
		height: calc(100vh - 60px - 40px);
		/*min-height: calc(760px - 40px);*/
		padding: calc(60px + 20px) 0 20px!important;
	}
	section.child {
		padding: 20px 0!important;
	}
	.max960 {
		max-width: 680px;
		margin: auto;
	}
	.max840 {
		max-width: 680px;
		margin: auto;
	}
	.max700 {
		max-width: 540px;
		margin: auto;
	}
	.col3 {
		width: calc(100% / 3 - 5px);
	}
	.col3_2 {
		width: calc(100% / 3 * 2 - 10px);
	}
	.col2.wide {
		width: calc(100% / 2 - 20px);
	}
	.mb_10 {
		margin-bottom: 8px;
	}
	.mb_20 {
		margin-bottom: 15px;
	}
	.mb_30 {
		margin-bottom: 20px;
	}
	.mb_40 {
		margin-bottom: 25px;
	}
	.mb_60 {
		margin-bottom: 40px;
	}
	.mb_120 {
		margin-bottom: 80px;
	}
	.mr_10 {
		margin-right: 8px;
	}
	.bg_gray,
	.bg_blue,
	.frame {
		padding: 10px 15px;
	}
	/* フォント */
	h2 {
		font-size: 24px;
	}
	h3 {
		font-size: 24px;
		line-height: 1.4;
	}
	h4 {
		border-width: 3px!important;
		font-size: 16px;
	}
	h4::after {
		border-width: 3px;
		bottom: -3px;
	}
	h4.solid {
		padding: 12px 15px!important;
	}
	h4.plane {
		font-size: 20px;
	}
	h5 {
		padding-bottom: 6px!important;
		font-size: 18px;
	}
	.font_12 {
		font-size: 10px;
	}
	.font_14 {
		font-size: 12px;
	}
	.font_18 {
		font-size: 16px;
	}
	.font_20 {
		font-size: 18px;
	}
	.font_24 {
		font-size: 20px;
	}
	.font_28 {
		font-size: 22px;
	}
	.font_34 {
		font-size: 24px;
	}
	.font_46 {
		font-size: 30px;
	}
	.indent1_8 {
		padding-left: 1.2em;
		text-indent: -1.2em;
	}
	small {
		top: -4px;
	}
	/* リスト */
	ul.square li p {
		padding-left: 1.2em;
	}
	ul.disc li p {
		padding-left: .7em;
	}
	ul.disc li p::before {
		content: "";
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #0064b8;
		top: 10px;
	}
	ol.decimal.chuki {
		padding-left: 3.4em;
	}
	ol.decimal.chuki::before {
		font-size: 10px;
	}
	ol.decimal li::marker {
		font-size: 14px;
	}
	ol.decimal.font_12 li::marker {
		font-size: 10px;
	}
	/* ボタン */
	.btn {
		padding: 8px 30px;
	}
	.anker {
		padding-top: 100px;
		margin-top: -100px;
	}
	.btn_arrow::after {
		border-width: 10px;
	}
	a.btn_arrow:hover::after {
		border-width: 12px;
	}
	/*==================================================================================
	INDEX
	==================================================================================*/
	section#main {
		height: calc(100vh - 60px);
		top: 60px;
	}
	section#main .container {
		max-width: 960px;
	}
	/*
	section#main .container {
		aspect-ratio: 1.56 / 2;
	}
	section#main .container .row {
		aspect-ratio: 1.56 / 2;
	}
	*/
	section#main .img {
	    width: calc(100% / 4 - 4px);
		max-height: 16.3%;
	    margin-bottom: 5px;
		transform: scaleX(0.06) scaleY(0.07);
	}
	@keyframes main_img00 {
		0% {transform: scaleX(0) scaleY(0); opacity: 0;}
		100% {transform: scaleX(0.06) scaleY(0.07); opacity: 1;}
	}
	@keyframes main_img {
	    0% {border-radius: 50%; transform: scaleX(0.06) scaleY(0.07);}
	    33.33% {border-radius: 50%; transform: scaleX(0.06) scaleY(0.07);}
	    100% {border-radius: 15px; transform: scaleX(1) scaleY(1);}
	}
	section#main .main_logo {
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc(100% / 2 - 15px);
	    height: 31.2vh;
	    top: 33.3%;
		left: 15px
	}
	/* 投資対象としてのHOYOの実力 --------------------------------------------------------*/
	#capability_slide {
		width: calc(100% - 30px)!important;
		padding: 0 15px!important;
	}
	#capability_slide .sp-slide img {
		width: 85%;
		max-height: 100%;
		margin: 0 auto 15px;
	}
	#capability_slide .sp-arrows {
		width: 100%;
	}
	#capability_slide .sp-arrows .sp-arrow {
		width: 25px;
		height: 25px;
	}
	#capability_slide .sp-arrows .sp-previous-arrow {
		left: 10px;
	}
	#capability_slide .sp-arrows .sp-arrow.sp-next-arrow {
		left: auto;
		right: 10px;
	}
	/* サムネイル */
	#capability_slide .sp-thumbnails-container {
		display: none;
	}
	/* 2023年度のハイライト ------------------------------------------------------------*/
	section#top_highlight a {
		padding: 20px;
	}
	section#top_highlight a .row {
		max-width: 310px;
		margin: auto;
	}
	section#top_highlight a .row.mb_30 {
		margin: 0 auto 30px;
	}
	section#top_highlight a .icon {
		width: 80px;
		height: 80px;
	}
	section#top_highlight a .txt {
		width: calc(100% - 90px);
		white-space: inherit;
	}
	/* カウントアップ */
	section#top_highlight .proportion {
		font-size: 40px;
	}
	section#top_highlight .proportion .countup {
		font-size: 60px;
	}
	/* マネジメントメッセージ ------------------------------------------------------------*/
    section#top_message a {
    	width: calc(100% / 2 - 5px);
		margin-bottom: 10px;
    }
    section#top_message a .img {
		width: 40%;
		height: 220px;
    }
	section#top_message a .img img {
		height: 100%;
		object-fit: cover;
	}
    section#top_message a .inner {
		width: 60%;
    	padding: 10px 10px 0;
    }
    /* HOYAの価値創造 -----------------------------------------------------------------*/
    section#top_value a {
    	width: calc(100% - 40px);
    	height: calc(100% - 40px);
        margin: 20px 0 0 20px;
    }
	section#top_value a .txt {
		width: 280px;
		height: 280px;
		padding: 0 20px;
	}
	/* ESG報告 -----------------------------------------------------------------------*/
    section#top_esg .container {
    	max-width: 680px;
    }
    section#top_esg .row {
    	align-items: flex-start;
    }
    section#top_esg .column {
    	width: calc(100% / 2 - 5px);
        margin-bottom: 20px;
        position: relative;
    }
    section#top_esg .column:nth-child(n+3) {
        margin-bottom: 0;
    }
    section#top_esg .column.hidden {
    	opacity: 1;
    }
	section#top_esg .column .tab {
		display: none;
	}
	section#top_esg .column.esg01 .tab {
		display: block;
		height: auto;
		background: none;
		color: #fff;
		font-size: 18px;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		z-index: 2;
	}
    section#top_esg .column .img {
    	height: 200px;
        overflow: hidden;
        margin-bottom: 10px;
    }
    section#top_esg .column .img::after {
    	display: none;
    }
    section#top_esg a.column .img {
        margin-bottom: 0;
    }
    section#top_esg .column .img img {
    	height: 100%;
        object-fit: cover;
        filter: brightness(0.8);
    }
    section#top_esg .column.show .img {
    	opacity: 1;
    }
    section#top_esg .column .inner {
    	display: block;
        height: auto;
        background: none;
		padding: 0;
        position: static;
		z-index: 1;
		visibility: visible;
		opacity: 1;
    }
	section#top_esg .column.esg02 .inner,
	section#top_esg .column.esg03 .inner,
	section#top_esg .column.esg04 .inner {
		background: none;
	}
	section#top_esg .column.hidden .inner {
		opacity: 1;
		z-index: 1;
	}
    section#top_esg a.column .inner {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    	position: absolute;
        top: 0;
        left: 0;
    }
    section#top_esg a.column .inner p {
        color: #fff;
    }
    section#top_esg div.column:hover .inner {
        width: 100%;
        height: auto;
        padding: 0;
        position: static;
    }
    section#top_esg div.column:hover .inner a {
        text-align: center;
    }
    section#top_esg .column .inner.btn_arrow::after {
        display: none;
    }
    section#top_esg div.column .inner::before {
        display: none;
    }
    section#top_esg div.column .inner a.font_24 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 200px;
    	color: #fff;
        font-size: 18px;
		text-align: center;
        position: absolute;
        top: 0;
        left: 0;
    }
    section#top_esg .column .inner ul {
        display: flex;
        flex-wrap: wrap;
		margin-left: 0;
    	position: relative;
        opacity: 1;
        visibility: visible;
    }
    section#top_esg .column:hover .inner ul {
        margin-left: 0;
    }
    section#top_esg .column .inner ul li {
        margin: 0 12px 5px 0;
    	padding-left: 8px;
    }
    section#top_esg .column .inner ul li::before {
        border: 3px transparent solid;
        border-right: none;
        border-left: 5px #fff solid;
    }
    section#top_esg .column .inner ul a {
        font-size: 14px;
    }
    section#top_esg .column:hover .inner ul a {
        text-align: left;
    }
	/* 事業概況 -----------------------------------------------------------------------*/
	section#top_review::before,
	section#top_review::after {
		width: 100%;
		height: 50%;
	}
	section#top_review::after {
		top: auto;
		bottom: 0;
	}
    section#top_review h2 {
    	margin-top: -125px;
    }
    section#top_review .row {
    	display: block;
    }
    section#top_review a {
    	width: 300px;
    	height: 300px;
    	margin: 0 auto 20px;
    }
    section#top_review a:last-child {
    	margin: 0 auto;
    }
	/* ライブラリ ---------------------------------------------------------------------*/
    section#top_library a {
    	width: calc(100% - 40px);
    	height: calc(100% - 40px);
        margin: 20px 0 0 20px;
    }
	section#top_library a .txt {
		width: 280px;
		height: 280px;
		padding: 0 20px;
	}
	/*==================================================================================
	2023年度ハイライト
	==================================================================================*/
	section#highlight {
		padding: 40px 0 0!important
	}
	section#highlight ul.highlight_link li.active::after {
		border-bottom-width: 10px;
	}
	section#highlight ul.highlight_link li a {
		height: 140px;
	}
	/* 開示の拡充・外部評価 */
	section#e04 ul.other {
		width: 100%;
		margin-bottom: 10px;
	}
	section#e04 .logo_msci_leacers {
		max-width: 300px;
	}
	/* Financial ---------------------------------------------------------------------*/
	section.financial .proportion {
		font-size: 50px;
	}
	section.financial .proportion span {
		font-size: 70px;
	}
	/* ページリンク --------------------------------------------------------------------*/
	.page_nav ul li {
		width: calc(100% / 3 - 5px);
	}
	.page_nav ul li a {
		height: 46px;
	}
	.page_nav ul li a::before {
		width: 26px;
		height: 26px;
		left: 10px;
	}
	.page_nav ul li a::after {
		width: 10px;
		height: 10px;
		left: 18px;
	}
	.page_nav ul li a.left::after {
		left: 20px;
		top: 38%;
	}
	.page_nav ul li a.right::before {
		left: auto;
		right: 10px;
	}
	.page_nav ul li a.right::after {
		left: auto;
		right: 20px;
		top: 38%;
	}
	/*==================================================================================
	ESG報告
	==================================================================================*/
	/* HOYAのESG ----------------------------------------------------------------------*/
	/* マテリアリティ（重要課題） */
	section#materiality03 .img {
		width: 180px;
	}
	section#materiality03 .txt {
		width: calc(100% - 180px - 20px);
	}
	table.table01 th {
		padding: 10px;
	}
	section#materiality03 table.table01 td:nth-child(1) {
		width: 22%;
	}
	table.table01 td ul.disc li p::before {
		top: 7px;
	}
	section#materiality03 table.table01.data04 td:nth-child(1) {
		width: 24%;
	}
	section#materiality03 table.table01.data04 td.sdgs {
		width: 150px;
	}
	.icon_sdgs {
		width: 70px;
	}
	/* コーポレートガバナンス ------------------------------------------------------------*/
	.page_nav.other ul li.tb_non {
		display: none;
	}
	.page_nav.other ul li {
		width: calc(50% - 4px)!important;
	}
	.page_nav.other ul li a {
		font-size: 14px;
	}
	.page_nav ul.list li {
		width: 100%!important;
		white-space: nowrap;
	}
	.page_nav ul.list.row li {
		width: calc(100% / 3 - 7px)!important;
	}
	.page_nav ul.list li a {
		padding-left: 18px!important;
        text-align: left!important;
	}
	.page_nav ul.list li a::before {
		width: 8px!important;
		height: 8px!important;
	}
	/* 取締役会 */
	.profile .img {
		width: 140px;
        height: 190px;
	}
	.profile .basic {
		width: calc(100% - 140px - 40px);
		padding: 15px 20px 80px 20px;
	}
	.profile ul {
		width: calc(100% - 140px - 40px);
		margin-left: 140px;
		padding: 0 20px;
	}
	.profile ul li {
		width: calc(100% / 3 - 5px);
	}
	.profile ul li p.ttl {
		font-size: 12px;
	}
	.profile .data {
		width: calc(100% - 40px);
		padding: 20px;
	}
	.profile .data table th {
		width: 80px;
		padding-bottom: 8px;
	}
	.profile .data table td {
		width: calc(100% - 80px);
		padding-bottom: 8px;
	}
	/* 社外取締役のスキル・マトリックス */
	section#skill thead th:nth-child(n+4) {
		width: 60px;
	}
	section#skill table tbody th {
		padding: 6px 8px;
	}
	/* 執行役 */
	section#officer .officer .img {
		width: 160px;
	}
	section#officer .officer .txt {
		width: calc(100% - 160px - 40px);
		padding: 15px 20px;
	}
	/* 委員会 */
	ul.ul_indent3 {
		padding-left: 1em;
	}
	section#committee .arrow span {
		width: 20px;
		height: 20px;
		border-right: 8px #c6c8c8 solid;
		border-bottom: 8px #c6c8c8 solid;
	}
	/*---------*/
	section#committee .table01 {
		width: 100%;
		max-width: 540px;
		margin-bottom: 20px;
	}
	section#committee .table01 table th {
		height: 30px;
	}
	section#committee .table01 table td {
		text-align: center;
	}
	/*---------*/
	section#committee .cross {
		width: 100%;
		max-width: 540px;
		height: 40px;
		margin-bottom: 20px;
	}
	section#committee .cross::before,
	section#committee .cross::after {
		width: 50px;
	}
	/*---------*/
	section#committee .table02 {
		width: 100%;
		max-width: 540px;
	}
	section#committee .table02 table th {
		height: 30px;
	}
	section#committee .table02 table .vertical {
		width: 20px;
	}
	/* HOYAグループ コンプライアンス体制 */
	.table td {
		padding: 6px 8px;
	}
	section#compliance .txt {
		width: calc(100% - 140px - 20px);
	}
	section#compliance .img {
		width: 140px;
	}
	/* 環境 --------------------------------------------------------------------------*/
    /* 水 */
    section#water .water_reduction .ttl {
        width: 210px;
        padding: 5px 10px;
    }
    section#water .water_reduction .cont {
        width: calc(100% - 210px);
        padding: 5px 10px;
    }
	/* 社会 --------------------------------------------------------------------------*/
	/* 人権尊重 */
	section#labor .table tr:nth-child(2) th {
		width: 75px;
	}
	.society_ttl {
		height: 70px;
		padding: 10px 15px;
	}
	/* 人材戦略 */
	section#hrd .bg01,
	section#hrd .bg02 {
		padding: 10px 15px;
	}
	/* 社会貢献活動 */
	section#market .img {
		width: 120px;
	}
	section#market .img02 {
		width: 200px;
	}
	section#market .donation {
		width: calc(100% / 3 - 5px);
		padding: 10px;
	}
	section#market .donation .icon {
		width: 60px;
		margin: -40px auto 10px;
		padding: 0 5px;
	}
	/*==================================================================================
	マネジメントメッセージ
	==================================================================================*/
	section#interview_main {
		padding-top: 0!important;
	}
	section#interview_main .page_nav {
		display: none;
	}
	.page_nav.plane ul li.tb_non {
		display: none;
	}
	.page_nav.plane ul li {
		width: 100%;
        margin-bottom: 10px;
        text-align: right;
	}
	.page_nav.plane ul li a {
        justify-content: flex-end;
        height: auto;
		padding-left: 16px;
        text-align: left;
	}
	.page_nav.plane ul li a.right {
		padding-left: 0;
		padding-right: 16px;
        text-align: right;
	}
	.page_nav.plane ul li a.sp_left {
		padding-left: 16px;
		padding-right: 0;
	}
	.page_nav.plane ul li a.sp_right {
		padding-left: 0;
		padding-right: 16px;
        text-align: right;
	}
	.page_nav.plane ul li a::before {
		border: 5px transparent solid;
		border-left: none;
		border-right: 8px #0064b8 solid;
	}
	.page_nav.plane ul li a.right::before {
		border: 5px transparent solid;
		border-right: none;
		border-left: 8px #0064b8 solid;
	}
	.page_nav.plane ul li a.sp_right::before {
		border: 5px transparent solid;
		border-right: none;
		border-left: 8px #0064b8 solid;
		left: auto;
		right: 0;
	}
	.page_nav.plane ul li a.sp_left::before {
		border: 5px transparent solid;
		border-left: none;
		border-right: 8px #0064b8 solid;
		right: auto;
		left: 0;
	}
	section#interview_main .bg {
		height: auto;
		padding: 15px 0 0;
	}
    section#interview_main.int04 .bg {
    	padding: 15px 0 20px;
    }
	section#interview_main .bg .row {
		display: block;
		height: 100%;
		padding-bottom: 240px;
	}
	section#interview_main .bg .row::after {
		height: 340px;
		bottom: 0;
	}
	section#interview_main.int01 .bg .row::after {
		right: 0;
	}
	section#interview_main .row .ttl {
		margin-bottom: 30px;
	}
    section#interview_main.int04 .bg .row {
		padding-bottom: 0;
    }
    section#interview_main.int04 .ttl{
		margin-bottom: 0;
    }
	section#interview_main h3 {
		font-size: 14px;
	}
	section#interview_main .mincho {
		font-size: 20px;
		letter-spacing: 0;
	}
	section#interview_main.int01 .mincho {
		font-size: 20px;
	}
	section#interview_main.int04 .mincho {
		font-size: 34px;
	}
	/* 【特集】社外取締役に聞く */
	section[id^="other_int0"] .container {
		border-bottom: 3px #b3b3b3 solid;
	}
	section[id^="other_int0"] .container::after {
		border-bottom: 3px #0064b8 solid;
		bottom: -3px;
	}
	section[id^="other_int0"] .question {
		width: 100%;
		margin: 0 0 15px;
		padding: 0 20px 10px 40px;
	}
	section[id^="other_int0"] .question::before {
		width: 34px;
		height: 34px;
		padding-bottom: 0;
		font-size: 16px;
		left: 0;
	}
    section[id^="other_int0"] .frame {
        padding: 15px;
    	border-radius: 10px;
    }
	section[id^="other_int0"] .txt {
		width: calc(70% - 10px);
		padding: 0;
	}
	/*==================================================================================
	投資対象としてのHOYAの実力
	==================================================================================*/
	.capability_ttl {
		height: 180px;
		min-height: 0;
		margin: 0 auto 20px;
	}
	.capability_ttl h3 {
		font-size: 20px;
	}
	.ttl_arrow span {
		padding-left: 1em;
	}
	.ttl_arrow span::before {
		width: 5px;
		height: 5px;
		border-top: 3px #0063b8 solid;
		border-right: 3px #0064b8 solid;
		top: 5px;
	}
	/* 株主価値の最大化に向けて ----------------------------------------------------------*/
	section#value01 .profile .img {
		width: 120px;
		height: 160px;
	}
	section#value01 .profile .txt {
		width: calc(100% - 120px);
	}
	section#value01 .profile .ttl {
		padding: 8px;
	}
	section#value01 .profile .name {
		padding: 8px 15px;
	}
	section#value01 .profile a {
		padding: 8px 50px 8px 20px;
		background-size: 25px;
		font-size: 14px;
	}
	section#value01 .table tbody th {
		padding: 6px 8px;
	}
	section#value01 .table thead th:nth-child(n+4) {
		width: 60px;
	}
	/*==================================================================================
	情報・通信事業
	==================================================================================*/
	.review_ttl {
		height: 180px;
		min-height: 0;
	}
	.review_ttl h3 {
		font-size: 20px;
	}
	/*==================================================================================
	ライフケア事業
	==================================================================================*/
	section#lifecare01 .float {
		display: flex;
		flex-wrap: wrap;
	}
	section#lifecare01 .float .txt {
		width: 100%;
		margin: 0 0 20px;
	}
	section#lifecare01 .float .img {
		width: 100%;
		float: none;
		margin: 0;
		order: 2;
	}
	section#lifecare01 .float .img img {
		max-width: 360px;
		margin: 0 auto 15px;
	}
	section#lifecare02 .pentax1,
	section#lifecare02 .pentax2,
	section#lifecare02 .pentax3 {
		width: 100%;
		max-width: 360px;
		margin: 0 auto 10px;
	}
	/*==================================================================================
	ライブラリー
	==================================================================================*/
	.library_ttl {
		height: 180px;
		min-height: 0;
	}
	.library_ttl h3 {
		font-size: 20px;
	}
	/*==================================================================================
	Footer
	==================================================================================*/
	footer {
		padding: 50px 0 20px!important;
	}
	footer #pagetop {
		bottom: 15px; 
	}
	footer #pagetop.is-stop {
		top: 20px;
		bottom: auto;
	}
	footer #pagetop a {
		width: 26px;
		height: 26px;
	}
	footer #pagetop a::after {
		width: 10px;
		height: 10px;
	}
}


@media screen and (max-width : 680px) {
	.col3 {
		width: 100%;
		margin: 0 auto 20px;
	}
	.col3.tb_max360 {
		max-width: 360px;
		margin: 0 auto 20px;
	}
	.col3_2 {
		width: 100%;
		margin-bottom: 15px;
	}
	.col2,
	.col2.wide {
		width: 100%;
		margin-bottom: 15px;
	}
	.col2.tb_max460 {
		max-width: 460px;
		margin: 0 auto 15px;
	}
	.col2.sp_100 {
		width: calc(50% - 7px);
	}
	.col2.wide.sp_100 {
		width: calc(100% / 2 - 20px);
	}
	.tb_order2 {
		order: 2;
	}
	.col4 {
		width: calc(100% / 2 - 10px);
	}
	/*==================================================================================
	INDEX
	==================================================================================*/
	/* 2023年度のハイライト ------------------------------------------------------------*/
	section#top_highlight a {
		width: 100%;
		max-width: 460px;
		margin: 0 auto 15px;
	}
	/*==================================================================================
	2022年度ハイライト
	==================================================================================*/
	/* ページリンク --------------------------------------------------------------------*/
	.page_nav ul li {
		width: calc(50% - 4px);
	}
	.page_nav ul li.tb_non {
		display: none;
	}
	/*==================================================================================
	ESG報告
	==================================================================================*/
	/* HOYAのESG ----------------------------------------------------------------------*/
	/* マテリアリティ（重要課題） */
	section#materiality03 .img {
		width: 100%;
		margin-bottom: 20px;
	}
	section#materiality03 .img img {
		max-width: 200px;
		margin: auto;
	}
	section#materiality03 .txt {
		width: 100%;
	}
	table.table01 th {
		padding: 10px;
	}
	/* スクロール */
	.scroll {
		display: block;
	  	overflow-x: scroll;
	  	-webkit-overflow-scrolling: touch;
		padding: 0 0 10px;
		margin-bottom: 20px;
	}
	.scroll::-webkit-scrollbar {
	  height: 6px;
	}
	.scroll::-webkit-scrollbar-track {
	  margin: 0 2px;
	  background: #f1f1f1;
	  border-radius: 5px;
	}
	.scroll::-webkit-scrollbar-thumb {
	  border-radius: 5px;
	  background: #c1c1c1;
	}
	.scroll table {
		min-width: 680px;
	}
	/* コーポレートガバナンス -----------------------------------------------------------*/
	.page_nav ul.list li {
		white-space: normal;
	}
	.page_nav ul.list li a {
		font-size: 12px;
		padding-left: 14px!important;
	}
	.page_nav ul.list li a::before {
		width: 6px!important;
		height: 6px!important;
		top: 5px!important;
	}
	/* 取締役会 */
	.profile .basic {
		padding: 15px 20px 0 20px;
	}
	.profile ul {
		width: calc(100% - 40px);
		padding: 15px 20px;
		margin-left: 0;
		position: relative;
        bottom: 0;
	}
	/* 委員会 */
	section#committee .table02 .scroll table {
		min-width: 440px;
	}
	/* HOYAグループ コンプライアンス体制 */
	section#compliance .scroll table.table {
		min-width: 480px;
	}
	/* 環境 ---------------------------------------------------------------------------*/
    /* 気候変動 */
    section#environment .float {
        display: flex;
        flex-wrap: wrap;
    }
    section#environment .float p {
        width: 100%;
        margin-bottom: 15px;
    }
    section#environment .float .img {
        width: 100%;
        margin: 0 0 15px;
        float: none;
        order: 2;
    }
	/* 社会 ---------------------------------------------------------------------------*/
	/* 人権尊重 */
	section#labor .scroll table.table {
		min-width: 640px;
	}
	/* 人材戦略 */
	section#hrd .bg01,
	section#hrd .bg02 {
		width: 100%;
	}
	/* 安全衛生 */
	section#safety-health .scroll table.table {
		min-width: 420px;
	}
	/* 健康経営 */
	section#health .frame .col2 {
		margin-bottom: 0;
	}
	/* 製品安全品質管理指針・体制 */
	section#product-safety .scroll table.table {
		min-width: 420px;
	}
	/* サプライチェーン・マネジメント */
	section#supplier .scroll table.table {
		min-width: 420px;
	}
	/* 社会貢献活動 */
	section#market .donation {
		width: 100%;
		max-width: 360px;
		margin: 0 auto 40px;
	}
	section#market .donation:last-child {
		margin: 0 auto;
	}
	/*==================================================================================
	情報・通信事業
	==================================================================================*/
	section#it01 .col3 img,
	section#it02 .col3 img {
		width: 70%;
		margin: 0 auto 15px;
	}
	/*==================================================================================
	ライフケア事業
	==================================================================================*/
	section#lifecare01 .col3 img,
	section#lifecare02 .col3 img {
		width: 70%;
		margin: auto;
	}
}



@media screen and (max-width : 460px) {
	.tb {display: none;}
	.sp {display: inline;}
	p {line-height: 1.6;}

	header.index {
		transform: translateY(0);
	}
	/*==================================================================================
	共通
	==================================================================================*/
	/* レイアウト */
	section.h100vh {
		display: block;
		height: calc(100vh - 60px - 80px);
		min-height: calc(460px - 40px);
		padding: calc(60px + 15px) 0 50px!important;
	}
	.col2.sp_100,
	.col2.wide.sp_100 {
		width: 100%;
		margin-bottom: 20px;
	}
	.col4 {
		width: calc(100% / 2 - 5px);
	}
	.col4.sp_100 {
		width: 100%;
	}
	/* フォント */
	h2 {
		font-size: 22px;
	}
	h3 {
		font-size: 22px;
	}
	h4.plane {
		font-size: 20px;
	}
	.font_18 {
		font-size: 14px;
	}
	.font_20 {
		font-size: 16px;
	}
	.font_24 {
		font-size: 18px;
	}
	.font_28 {
		font-size: 20px;
	}
	.font_34 {
		font-size: 22px;
	}
	.font_46 {
		font-size: 28px;
	}
	.indent1_8 {
		padding-left: 1.8em;
		text-indent: -1.8em;
	}
	/* ボタン */
	.icon_pdf,
	.icon_xsl {
		line-height: 1.2;
	}
	.icon_pdf::after,
	.icon_xsl::after {
		top: 0;
	}

	/*==================================================================================
	INDEX
	==================================================================================*/
	section#main .img {
	    width: calc(100% / 3 - 4px);
		max-height: 11.8%;
		transform: scaleX(0.05) scaleY(0.07);
	}
	@keyframes main_img00 {
		0% {transform: scaleX(0) scaleY(0); opacity: 0;}
		100% {transform: scaleX(0.05) scaleY(0.07); opacity: 1;}
	}
	section#main .img.active {
		border-radius: 10px;
	}
	@keyframes main_img {
	    0% {border-radius: 50%; transform: scaleX(0.05) scaleY(0.07);}
	    33.33% {border-radius: 50%; transform: scaleX(0.05) scaleY(0.07);}
	    100% {border-radius: 10px; transform: scaleX(1) scaleY(1);}
	}
	section#main .main_logo {
		width: calc((100% / 3) * 2 - 22px);
	    height: 22.8vh;
	    top: 37%;
	}
	/* 投資対象としてのHOYOの実力 --------------------------------------------------------*/
	section#top_capability {
		display: flex;
	}
	#capability_slide {
		margin-bottom: 120px;
	}
	#capability_slide .sp-slide img {
		width: 90%;
	}
	#capability_slide .sp-slide .font_18 {
		font-size: 12px;
	}
	#capability_slide .sp-arrows .sp-arrow {
		width: 15px;
		height: 15px;
	}
	/* 2023年度のハイライト ------------------------------------------------------------*/
	section#top_highlight a {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 15px 20px 20px;
	}
	section#top_highlight a .ttl {
		width: 100%;
		margin-bottom: 0;
	}
	section#top_highlight a .row {
		display: block;
		width: calc(50% - 10px);
		margin: 0;
	}
	section#top_highlight a .row.mb_30 {
		margin: 0;
	}
	section#top_highlight a .icon {
		width: 50px;
		height: 50px;
		margin: 0 auto 10px;
	}
	section#top_highlight a .txt {
		width: 100%;
	}
	section#top_highlight a .txt p {
		font-size: 12px;
		text-align: center;
	}
	section#top_highlight a .txt p.font_14 {
		font-size: 10px;
	}
	/* カウントアップ */
	section#top_highlight .proportion {
		font-size: 22px;
		text-align: center;
		margin-bottom: 0;
	}
	section#top_highlight .proportion .countup {
		font-size: 40px;
	}
	/* マネジメントメッセージ ------------------------------------------------------------*/
	section#top_message h2 {
		margin-bottom: 20px;
	}
    section#top_message a {
        width: 100%;
        max-width: 360px;
        margin: 0 auto 10px;
        /*background: none;*/
    }
    section#top_message a:nth-child(3) {
        margin-bottom: 10px;
    }
    section#top_message a.other {
        display: flex;
    }
    section#top_message a .img {
        width: 80px;
        height: 80px;
        padding-top: 5px;
    }
    section#top_message a.other .img {
		width: 70%;
        position: relative;
		order: 2;
    }
	section#top_message a .img img {
		height: auto;
		object-fit: contain;
	}
    section#top_message a.other .inner {
		margin-bottom: 15px;
    }
    /*section#top_message a .inner {
    	padding: 0;
    }
    section#top_message a .inner p {
    	color: #fff;
    }*/
	/* HOYAの価値創造 -----------------------------------------------------------------*/
	section#top_value a .txt {
		width: 240px;
		height: 240px;
	}
	/* ESG報告 -----------------------------------------------------------------------*/
    section#top_esg .column {
        margin-bottom: 15px;
    }
    section#top_esg .column .img {
    	height: 80px;
        margin-bottom: 8px;
    }
    section#top_esg div.column .inner a.font_24 {
        height: 80px;
        line-height: 1.2;
    }
    section#top_esg .column .inner ul li {
        margin: 0 10px 0 0;
    	padding-left: 8px;
    }
    section#top_esg .column .inner ul li::before {
        border: 2px transparent solid;
        border-right: none;
        border-left: 4px #fff solid;
        top: 65%;
    }
    section#top_esg .column .inner ul a {
        font-size: 10px;
        line-height: 1.2;
    }
	/* 事業概況 -----------------------------------------------------------------------*/
 	section#top_review::before,
	section#top_review::after {
		height: calc(50% + 60px);
	}
	section#top_review::after {
		height: calc(50% - 60px);
	}
   section#top_review h2 {
    	margin-top: 20px;
    }
    section#top_review a {
        width: 220px;
    	height: 220px;
    }
	/* ライブラリ ---------------------------------------------------------------------*/
	section#top_library a .txt {
		width: 240px;
		height: 240px;
	}
	/*==================================================================================
	2022年度ハイライト
	==================================================================================*/
	section#highlight ul.highlight_link li a {
		height: 100px;
		font-size: 24px;
	}
	/* 気候変動への取り組み */
	section#h02 .col3 img {
		max-width: 180px;
	}
	/*==================================================================================
	ESG報告
	==================================================================================*/
	/* コーポレートガバナンス ------------------------------------------------------------*/
	.page_nav.other ul li {
		width: auto!important;
	}
	.page_nav.other ul li a.sp_font_12 {
		padding-left: 16px;
		font-size: 12px;
	}
	.page_nav.other ul li a.right.sp_font_12 {
        padding-left: 0;
		padding-right: 16px;
	}
	.page_nav .row ul.list {
		width: 100%;
	}
	.page_nav ul.list.row li {
		width: 100%!important;
	}
	/* 取締役会 */
	.profile .basic {
		width: calc(100% - 40px);
		margin-left: 0;
		padding: 15px 20px 0 20px;
		clear: both;
	}
	.profile ul li {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin-bottom: 8px;
	}
	.profile ul li p.ttl {
		width: 160px;
		margin-right: 10px;
	}
	/* 執行役 */
	section#officer .officer .img {
		width: 120px;
	}
	section#officer .officer .txt {
		width: calc(100% - 120px - 30px);
		padding: 10px 15px;
	}
	/* 	HOYAグループ コンプライアンス体制 */
	section#compliance .txt {
		width: 100%;
		margin-bottom: 20px;
	}
	section#compliance .img {
		width: 200px;
	}
	/* 環境 --------------------------------------------------------------------------*/
    /* 水 */
    section#water .water_reduction .ttl,
    section#water .water_reduction .cont {
        width: 100%;
    }
	/* 汚染および廃棄物 */
	section#waste .float {
		display: flex;
		flex-wrap: wrap;
	}
	section#waste .float .txt {
		width: 100%;
		margin-bottom: 20px;
	}
	section#waste .float .img {
		float: none;
		width: 100%;
		margin-left: 0;
		order: 2;
	}
	/* 社会 ---------------------------------------------------------------------------*/
	/* 人権尊重 */
	.society_ttl::before {
		background: linear-gradient(to right, #0064b8 0%, #0064b8 35%, transparent 40%);
	}
	.page_nav .row .sp_wrap {
		width: 100%;
		margin-bottom: 15px;
	}
	/* 社会貢献活動 */
	section#market .img02.sp {
		display: block;
		width: 200px;
		float: none;
		margin: 10px 0 0 auto;
	}
	/*==================================================================================
	マネジメントメッセージ
	==================================================================================*/
	section#interview_main .bg .row {
		padding-bottom: 0;
	}
	section#interview_main .bg .row::after {
		width: 100%;
		height: 300px;
		position: relative;
		top: 10px;
		left: 0;
	}
	section#interview_main.int01 .bg .row::after {
		background-position: left 25% bottom;
	}
	section#interview_main.int01 .mincho {
		font-size: 17px;
	}
	/* 【特集】社外取締役に聞く */
    section[id^="other_int0"] .frame {
        margin-bottom: 180px;
        padding: 15px 15px 25px;
    }
	section[id^="other_int0"] .txt {
		width: 100%;
	}
	section[id^="other_int0"] .img {
		width: 220px;
        bottom: -200px;
        right: 0;
	}
    section#other_int05 .img {
    	width: 210px;
    }
	/*==================================================================================
	投資対象としてのHOYAの実力
	==================================================================================*/
	.capability_ttl {
		height: 120px;
	}
	/* 市場成長性 ----------------------------------------------------------------------*/
	section#growth01 .bg_gray .col2.sp_100 {
		margin-bottom: 0;
	}
	/*==================================================================================
	情報・通信事業
	==================================================================================*/
	.review_ttl {
		height: 120px;
	}
	/*==================================================================================
	ライブラリー
	==================================================================================*/
	.library_ttl {
		height: 120px;
	}
}