@charset "utf-8";
/* CSS Document */
/* ----------------------------------------------------
　　共通設定
------------------------------------------------------- */

body {
/*	background: url("../../pc_sample.jpg") no-repeat top center;*/
/*
	background-size: 2200px;
	background-position: top -280px center;
*/
/*	font-family: var(--f_mincho)*/
}


#header {
	background-color: var(--green9);
}

main {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}

main h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    clip: rect(1px, 1px, 1px, 1px);
}


a {text-decoration: none;}

main#contents {
	background: url("../img/index/main_bg.png") no-repeat top center;
	background-size: contain;
	max-width: none;
}

@media screen and (max-width: 1920px){
	main#contents {
		background-size: 1920px;
	}
}

.main_v {
	text-align: center;
	margin: 0 auto;
	overflow: hidden;
	padding-top: 50px;
}

/*
.main_v ul:before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 250px;
	top: 0;
	background: url("../img/common/bg4.png") no-repeat top center;
	background-size: cover;
}
*/

.main_v ul {
	position: relative;
	height: 850px;
	background: url("../img/index/main_bg.svg") no-repeat;
	background-position: bottom center;
	background-size: 1920px;
	width: 1920px;
	margin: 0 auto;
	
	
	
/*
	background: url("../../tb_sample.jpg") no-repeat;
	background-position: top -70px center;
*/
	

/*    left: 50%;*/
/*    transform: translateX(-50%);*/
}

@media screen and (max-width: 1920px){
	.main_v ul {
		left: 50%;
		transform: translateX(-50%);
	}
}

@media screen and (max-width: 960px){
	#contents {
        padding: 4rem 0rem 2rem;
    }
	.main_v ul {
/*
		left: 0;
		transform: translateX(0);
*/
		height: 650px;
		background-size: 960px;
		width: 960px;
/*
		background: url("../../tb_sample.jpg") no-repeat;
		background-position: top -70px center;
*/

	}
}

@media screen and (max-width: 390px){
	.main_v ul {
/*
		left: 0;
		transform: translateX(0);
*/
		height: 450px;
		
		width: 390px;
/*
		background: url("../../sp_sample.jpg") no-repeat;
		background-position: top -70px center;
		background-size: 390px;
*/
	}
}


.main_v li { position: absolute; list-style: none; z-index:1;  padding-top: 50px;display: none;}
.main_v li a {display: block;}

.main_v li.img1 {left: 360px;top: 140px;display: block;}
.main_v li.img2 {left: 520px;top: -10px;display: block;}
.main_v li.img3 {left: 710px;top: -5px;display: block;}
.main_v li.img4 {left: 870px;top: -34px;display: block;}
.main_v li.img5 {left: 1250px;top: -60px;display: block;}
.main_v li.img6 {left: 500px;top: 180px;display: block;}
.main_v li.img7 {left: 725px;top: 188px;display: block;}
.main_v li.img8 {left: 980px;top: 70px;display: block;}
.main_v li.img9 {left: 1180px;top: 140px;display: block;}
.main_v li.img10 {left: 1370px;top: 230px;display: block;}
.main_v li.img11 {left: 350px;top: 360px;display: block;}
.main_v li.img12 {left: 580px;top: 380px;display: block;}
.main_v li.img13 {left: 830px;top: 320px;display: block;}
.main_v li.img14 {left: 1120px;top: 320px;display: block;}
.main_v li.img15 {left: 950px;top: 460px;display: block;}
.main_v li.img16 {left: 1280px;top: 380px;display: block;}


.main_v li.img1 img {display: block;width: 200px;}
.main_v li.img2 img {display: block;width: 210px;}
.main_v li.img3 img {display: block;width: 220px;}
.main_v li.img4 img {display: block;width: 220px;}
.main_v li.img5 img {display: block;width: 270px;}
.main_v li.img6 img {display: block;width: 270px;}
.main_v li.img7 img {display: block;width: 210px;}
.main_v li.img8 img {display: block;width: 240px;}
.main_v li.img9 img {display: block;width: 200px;}
.main_v li.img10 img {display: block;width: 180px;}
.main_v li.img11 img {display: block;width: 240px;}
.main_v li.img12 img {display: block;width: 230px;}
.main_v li.img13 img {display: block;width: 250px;}
.main_v li.img14 img {display: block;width: 200px;}
.main_v li.img15 img {display: block;width: 270px;}
.main_v li.img16 img {display: block;width: 250px;}



@media screen and (max-width: 960px){
	.main_v li.img1 {left: 20px;top: 110px;display: block;}
	.main_v li.img2 {left: 130px;top: 0px;display: block;}
	.main_v li.img3 {left: 280px;top: 15px;display: block;}
	.main_v li.img4 {left: 400px;top: -15px;display: block;}
	.main_v li.img5 {left: 700px;top: -30px;display: block;}
	.main_v li.img6 {left: 120px;top: 150px;display: block;}
	.main_v li.img7 {left: 330px;top: 160px;display: block;}
	.main_v li.img8 {left: 490px;top: 70px;display: block;}
	.main_v li.img9 {left: 640px;top: 110px;display: block;}
	.main_v li.img10 {left: 790px;top: 170px;display: block;}
	.main_v li.img11 {left: 30px;top: 260px;display: block;}
	.main_v li.img12 {left: 180px;top: 300px;display: block;}
	.main_v li.img13 {left: 370px;top: 230px;display: block;}
	.main_v li.img14 {left: 580px;top: 260px;display: block;}
	.main_v li.img15 {left: 450px;top: 350px;display: block;}
	.main_v li.img16 {left: 700px;top: 300px;display: block;}

	.main_v li.img1 img {display: block;width: 160px;}
	.main_v li.img2 img {display: block;width: 160px;}
	.main_v li.img3 img {display: block;width: 170px;}
	.main_v li.img4 img {display: block;width: 160px;}
	.main_v li.img5 img {display: block;width: 220px;}
	.main_v li.img6 img {display: block;width: 210px;}
	.main_v li.img7 img {display: block;width: 170px;}
	.main_v li.img8 img {display: block;width: 180px;}
	.main_v li.img9 img {display: block;width: 160px;}
	.main_v li.img10 img {display: block;width: 160px;}
	.main_v li.img11 img {display: block;width: 160px;}
	.main_v li.img12 img {display: block;width: 170px;}
	.main_v li.img13 img {display: block;width: 190px;}
	.main_v li.img14 img {display: block;width: 160px;}
	.main_v li.img15 img {display: block;width: 220px;}
	.main_v li.img16 img {display: block;width: 200px;}
}


@media screen and (max-width: 390px){
	.main_v li.img1 {left: 20px;top: 110px;display: none;}
	.main_v li.img2 {left: 20px;top: -63px;display: block;}
	.main_v li.img3 {left: 143px;top: -52px;display: block;}
	.main_v li.img4 {left: 245px;top: -59px;display: block;}
	.main_v li.img5 {left: 700px;top: -30px;display: none;}
	.main_v li.img6 {left: 6px;top: 50px;display: block;}
	.main_v li.img7 {left: 140px;top: 57px;display: block;}
	.main_v li.img8 {left: 490px;top: 60px;display: none;}
	.main_v li.img9 {left: 640px;top: 110px;display: none;}
	.main_v li.img10 {left: 780px;top: 160px;display: none;}
	.main_v li.img11 {left: 256px;top: 36px;display: block;}
	.main_v li.img12 {left: 22px;top: 156px;display: block;}
	.main_v li.img13 {left: 130px;top: 140px;display: block;}
	.main_v li.img14 {left: 590px;top: 280px;display: none;}
	.main_v li.img15 {left: 230px;top: 145px;display: block;}
	.main_v li.img16 {left: 233px;top: 145px;display: none;}

	.main_v li.img1 img {display: block;width: 160px;}
	.main_v li.img2 img {display: block;width: 110px;}
	.main_v li.img3 img {display: block;width: 110px;}
	.main_v li.img4 img {display: block;width: 120px;}
	.main_v li.img5 img {display: block;width: 220px;}
	.main_v li.img6 img {display: block;width: 140px;}
	.main_v li.img7 img {display: block;width: 110px;}
	.main_v li.img8 img {display: block;width: 180px;}
	.main_v li.img9 img {display: block;width: 160px;}
	.main_v li.img10 img {display: block;width: 180px;}
	.main_v li.img11 img {display: block;width: 120px;}
	.main_v li.img12 img {display: block;width: 110px;}
	.main_v li.img13 img {display: block;width: 130px;}
	.main_v li.img14 img {display: block;width: 160px;}
	.main_v li.img15 img {display: block;width: 150px;}
	.main_v li.img16 img {display: block;width: 180px;}
}

/* === ここから HTML2 の読み込み＆ホバー演出を統合 === */
/* 画像の読み込み後に 0 -> 1.1 へスケール、hoverで 1.2。filter もトランジション対象に */
.main_v li img {
display: block;
transform-origin: center;
transform: scale(0);                         /* 初期：見えない */
/*filter: grayscale(0%);                        初期：カラー */
/*transition: transform 0.8s ease, filter 0.3s ease;*/
	opacity: 1;
	transition: transform 0.8s ease, opacity 0.3s ease;
}
.main_v.is-loaded li img {
transform: scale(1.1);                       /* 読み込み後：ふわっと拡大 */
}
.main_v li.on  { z-index:2; }
.main_v li.gray { z-index:1; }
.main_v.is-loaded li.on a img {
transform: scale(1.2);                       /* hover中：さらに拡大 */
transition: transform 0.3s ease, filter 0.3s ease;
}
.main_v li.gray a img {
/*filter: grayscale(200%);                      hover時：他要素はグレー */
	/* opacity: 0.6; */                   /* hover時：他要素は半透明 */
}
/* === 統合ここまで === */

/* 曲線を全画面にオーバーレイするSVG */
.overlay-svg {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999; /* SVGは常に最前面 */
}
/* 画像レイヤ */
.main_v li { position: absolute; list-style: none; z-index: 90; }
.main_v li.on  { z-index: 1100; }   /* ★ホバー中の画像は下層SVGより上 */
.main_v li.gray { z-index: 200; }

/* SVGレイヤ */
.overlay-svg { position: fixed; inset: 0; pointer-events: none; }
.overlay-svg.under { z-index: 1000; }   /* ★通常の線：デフォルトは画像より上 */	
.overlay-svg.over  { z-index: 1200; }   /* ★ホバー中の線：全ての最前面 */

/*
#wires-under path.wire { stroke: gray; stroke-width: 2; }
#wires-over  path.wire { stroke: gray; stroke-width: 3; }
*/
#wires-under path.wire { stroke: var(--red); }
#wires-over  path.wire { stroke: var(--red);stroke-width: 1; }

/* 任意：テキストの見た目 */
/*
#end { position: absolute; left: 0px; top: 1340px; font: 16px/1.4 system-ui, sans-serif; padding-left: 200px;}
*/
#end { position: absolute; left: 50%; top:18%; font: 16px/1.4 system-ui, sans-serif; padding-left: 	382px;}
#txt {
	font: 16px/1.4 system-ui, sans-serif;
	padding-left: 50px;
	position: relative;
	font-size: 2rem;
	z-index: 1300
}

#txt a {
	padding: .7rem 1.5rem;
	font-size: 1rem;
	display: inline-block;
	background: var(--red);
	color: var(--white);
	text-decoration: none;
	--r: 8px; /* 削り半径 */
	min-width: 18rem;
  /* WebKit 系（Chrome/Safari/Edge） */
  -webkit-mask:
    radial-gradient(var(--r) at 0    0,    transparent calc(var(--r) - 1px), #000 calc(var(--r))) top    left,
    radial-gradient(var(--r) at 100% 0,    transparent calc(var(--r) - 1px), #000 calc(var(--r))) top    right,
    radial-gradient(var(--r) at 100% 100%, transparent calc(var(--r) - 1px), #000 calc(var(--r))) bottom right,
    radial-gradient(var(--r) at 0    100%, transparent calc(var(--r) - 1px), #000 calc(var(--r))) bottom left;
  -webkit-mask-size: 51% 51%;
  -webkit-mask-repeat: no-repeat;

  /* 標準プロパティ（Firefox など） */
  mask:
    radial-gradient(var(--r) at 0    0,    transparent calc(var(--r) - 1px), #000 calc(var(--r))) top    left,
    radial-gradient(var(--r) at 100% 0,    transparent calc(var(--r) - 1px), #000 calc(var(--r))) top    right,
    radial-gradient(var(--r) at 100% 100%, transparent calc(var(--r) - 1px), #000 calc(var(--r))) bottom right,
    radial-gradient(var(--r) at 0    100%, transparent calc(var(--r) - 1px), #000 calc(var(--r))) bottom left;
  mask-size: 51% 51%;
  mask-repeat: no-repeat;
}

#txt a:hover,
#txt a:focus {
	background: var(--red2);
}

@media screen and (max-width: 960px){
	#txt {display: none;}
	
	.controller {
		margin-bottom: 1rem;
	}
}

.main_v .outline {
	display: grid;
	grid-template-columns: 1fr auto;
	justify-content: space-between;
	position: relative;
	top: -60px;
	margin-top: -100px;
}

.controller {
/*	margin-top: 10px;*/
	text-align: right;
	padding: 1rem;
}

.main_v .lnk1 b {
	font-size: 1.8rem;
	color: var(--red);
	margin-right: 1rem;
}

.main_v .lnk1 a {
	color: var(--red);
	background-image: url(../img/common/icon_arrow_02_r.svg);
	box-shadow: 3px 3px 0 var(--red);
	vertical-align: text-bottom;
}

.main_v .lnk1 a:hover {
    color: var(--beige4);
    background-image: url(../img/common/icon_arrow_02.svg);
    background-color: var(--red);
    box-shadow: 3px 3px 0 var(--beige4);
}


.main_v .message {
	position: relative;
/*	top: -180px;*/
	text-align: left;
	font-weight: 400;
    font-size: 1.3rem;
    line-height: 2.2rem;
    letter-spacing: 0.2em;
    padding: 2rem 0 0 6rem;
/*	background: var(--green1);*/
	color: var(--green1);
	font-family: var(--f_mincho);
	text-indent: -2rem;
	margin-bottom: 0;
}


.main_v .message span {padding-left: 2rem;}


@media screen and (max-width: 960px){
	
	.main_v .lnk1 b {
		font-size: 1.4rem;
		margin-right: .5rem;
	}
	#txt a {
		padding: .6rem 1.2rem;
		font-size: .9rem;
		min-width: 15rem;
	}
	.controller {
		margin-top: 50px;
		padding: .5rem;
	}
	
	.main_v .outline {
		top: -10px;
		margin-top: -100px;
	}
	
	.main_v .message {
		padding:  1rem 0 0 4rem;
		font-size: 1.1rem;
	}
	
	.main_v .outline .lnk1 {
		margin-bottom: 0;
	}
}
	


@media screen and (max-width: 767px){
	.main_v .outline {
		display: block;
	}
	.controller {
		margin-top: 0px;
	}
	.main_v .message {
		padding:  2rem 0 0 3rem;
		font-size: 1rem;
	}
}
	

/* Project + Techniques of ’Care’ + News
--------------------------------------------*/
#project,
#a-contents,
#news {
	position: relative;
	color: #eae7de;
	margin-bottom: 5rem;
}

#project h2,
#a-contents h2,
#news h2 {
	font-size: 1.3rem;
	white-space: nowrap;
	letter-spacing: 0.08em;
	line-height: 3rem;
/*
	display: flex;
	flex-direction: column;
	flex-wrap:wrap;
	justify-content: space-between;
*/
	font-family: "Hina Mincho", serif;
  	font-weight: 400;
  	font-style: normal;
}

#project h2 span,
#a-contents h2 span,
#news h2 span {
	font-size: 3.2rem;
	display: block;
	font-family: var(--f_en1);
  	font-optical-sizing: auto;
  	font-weight: 500;
  	font-variation-settings:
    "slnt" 0;
	line-height: 3.2rem;
	margin-bottom: 1rem;
}

#project .lnk1,
#a-contents .lnk1,
#news .lnk1 {
	position: absolute;
	color: var(--green1);
    z-index: 1;
}

@media screen and (max-width: 1280px){
	#project h2 span,
	#a-contents h2 span,
	#news h2 span{
		font-size: 2.8rem;
/*		white-space:normal;*/
	}
}


@media screen and (max-width: 959px){
	#project h2,
	#a-contents h2,
	#news h2 {
		line-height: 2rem;
		word-break: normal;
	}
	#news h2 {
        margin-left: 1rem;
	}
	
	#project h2 span,
	#a-contents h2 span,
	#news h2 span {
		font-size: 2.4rem;
		margin-bottom: .5rem;
	}
}

@media screen and (max-width: 767px){
	#project h2 span,
	#a-contents h2 span,
	#news h2 span {
		font-size: 2rem;
	}
}

/* Project
--------------------------------------------*/

#project {
	display: flex;
	padding: 3rem 4rem 3rem calc((100vw - 1280px) / 2);
	margin-right: calc((100vw - 1280px) / 1.5);
	gap:4rem;
    position: relative;
    color: var(--beige1);
    background: url("../img/index/project_bg_center.png") repeat-y;
    background-size: 100%;
}
#project:before{   
    content: "";
    position: absolute;    
    top: -0.4rem;
    left: 0;
    width: 100%;
    height: 1rem;
    background: url("../img/index/project_bg_top.png") no-repeat;
    background-size: 100%;
}
#project:after{
    content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: url("../img/index/project_bg_btm.png") no-repeat;
    background-size: 100%;
}

#project .lnk1 {
	bottom: -2rem;
	right: -1rem;
}

@media screen and (max-width: 1280px){
	#project {
		margin-right: 4rem;
		padding: 3rem 4rem 3rem 3rem;
	}
}
@media screen and (max-width: 959px){
	#project {
		flex-wrap: wrap;
		gap:2rem;
	}
}


@media screen and (max-width: 767px){
	#project {
		margin-right: 5%;
		padding: 1.5rem 2rem 1.5rem 1.5rem;
		gap:1.5rem;
	}
    #project:before{
        top: -0.2rem;
    }
	#project .lnk1 {
		right: 2rem;
	}
}



/* Techniques of ’Care’
--------------------------------------------*/
#a-contents {
    width: 94%;
	max-width: 1280px;
    margin-left: auto;
	margin-right: auto;
    padding: 0;
    position: relative;
    color: var(--green5);
    background: url("../img/index/a-contents_bg_center.png") repeat-y;
    background-size: 100%;
}
#a-contents:before{   
    content: "";
    position: absolute;    
    top: -0.4rem;
    left: 0;
    width: 100%;
    height: 50px;
    background: url("../img/index/a-contents_bg_top.png") no-repeat;
    background-size: 100%;
}
#a-contents:after{
    content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 50px;
    background: var(--beige1) url("../img/index/a-contents_bg_btm.png") no-repeat;
    background-size: 100%;
}

#a-contents .a-contents_01 {
	display: flex;
	padding: 3rem 3rem 0;
	gap:4rem;
}

.slide.content-area.slick-initialized.slick-slider {
    margin: 0 2rem;
}

.a-contents_02 .slick-dots li button {
	background: var(--black);
}


@media screen and (max-width: 959px){
	#a-contents {
		width: 94%;
		margin-left: 3%;
		margin-right: 3%;
	}
}
@media screen and (max-width: 959px){

#a-contents .slick-slide > div {
    margin-bottom: 0;
    padding-left: 2rem;
    padding-right: 2rem;
}
}
@media screen and (max-width: 767px){

#a-contents .slick-slide > div {
    margin-bottom: 0;
    padding-left: 1rem;
    padding-right: 1rem;
}
}
@media screen and (max-width: 959px){
    #a-contents {
        padding: 0rem;
    }
	#a-contents .a-contents_01 {
		flex-wrap: wrap;
		gap:2rem;
        margin-bottom: 0rem;
	}
}

#a-contents .lnk1 {
	bottom: -2rem;
	right: 10rem;
}

@media screen and (max-width: 767px){
	#a-contents .a-contents_01 {
		padding: 1rem 2rem 0;
		gap:1rem;
	}
    #a-contents:before{   
        top: -0.2rem;
    }
	
	#a-contents .lnk1 {
		right: 2rem;
	}
}

/* News
--------------------------------------------*/

#news {
	padding: 3rem calc((100vw - 1280px) / 2) 3rem 3rem;
	margin-left: calc((100vw - 1280px) / 1.5);
	gap:4rem;
    position: relative;
    color: var(--beige1);
    background: url("../img/index/news_bg_center.png") repeat-y;
    background-size: 100%;
    
}
#news:before{   
    content: "";
    position: absolute;    
    top: -0.4rem;
    left: 0;
    width: 100%;
    height: 1rem;
    background: url("../img/index/news_bg_top.png") no-repeat;
    background-size: 100%;
}
#news:after{
    content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: url("../img/index/news_bg_btm.png") no-repeat;
    background-size: 100%;
}

@media screen and (max-width: 1280px){
	#news {
		margin-left: 4rem;
	}
}

@media screen and (max-width: 959px){
	#news {
		flex-wrap: wrap;
		gap:1rem;
	}
}
@media screen and (max-width: 767px){
	#news {
		margin-left: 5%;
		padding: 1rem 1rem 3rem 1rem;
		gap:.5rem;
    }
    #news:before{
        top: -0.2rem;
    }
}

#news .a-contents_01 {
	display: flex;
	gap:4rem;
	margin-bottom: 2rem;
}

#news ul {
	margin-top: 2rem;
	width: 100%;
}

#news ul li {
	border-bottom: 1px solid #e8e5dd;
}

#news ul li a {
	padding: 1rem;
	width: 100%;
	background: url("../img/common/icon_arrow_01.svg") no-repeat;
	background-size: 2.5rem;
	background-position: center right 0.5rem;
	display: flex;
	gap:3rem;
	align-items: center;
    color: var(--beige1);
}

#news ul li a:hover {
	background: url("../img/common/icon_arrow_01_on.svg") no-repeat;
	background-size: 2.5rem;
	background-position: center right 0.5rem;
	opacity: 0.8;
}

#news time {
	font-family: var(--f_en1);
  	font-optical-sizing: auto;
  	font-weight: 500;
  	font-variation-settings:
    "slnt" 0;
	font-style: italic;
	font-size: 0.9rem;
	letter-spacing: 0.05em;
}

#news .lnk1 {
	bottom: -2rem;
	right: 8rem;
}

@media screen and (max-width: 959px){
	#news ul li a {
		flex-wrap: wrap;
		gap:0.5rem;
		padding: 1rem 3rem 1rem 1rem;
		background: url(../img/common/icon_arrow_01.svg) no-repeat;
    	background-size: 2.5rem;
    	background-position: center right;
	}
	#news ul li a:hover {
		background: url(../img/common/icon_arrow_01_on.svg) no-repeat;
    	background-size: 2.5rem;
    	background-position: center right;
	}
}



@media screen and (max-width: 767px){
	#news .lnk1 {
		right: 2rem;
	}
}