@charset "utf-8";
/* CSS Document */

body{
	background-image: url("../images/mv_bkimg.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position:right top;
	background-attachment: fixed;
	
	overflow-x:hidden;
}

div.body{overflow-x:hidden;}


/*=================================
  ヘッダー
=================================*/

header{
	width: 100%;
	position: fixed;
	top: 0;
	transition: 0.5s;
	z-index: 22;
	background-color:#fff;
}

.header_wrap{
	width:100%;
	display: flex;
	flex-wrap:wrap;
	position: relative;
	padding:0 30px;
}
.header_logo{
	width:auto;
	height:60px;
	padding: 10px 20px;
}
.header_logo img{
	width: auto;
	height:100%;
}

.header_links{
	display: flex;
	flex-wrap:wrap;
	gap:0 40px;
	margin-left:30px;
}
.header_links a{
	margin: auto 0;
	display: block;
	color:#157bb9;
	font-weight:700;
	font-size:17px;
	font-family: "LINE Seed JP", sans-serif;
}


.header_bottom{
	padding-bottom:60px;
}


/*=================================
  MV
=================================*/
.mv_wrap{
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	max-width:1500px;
	padding:30px 2vw;
}
.mv_inner_text{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:20px 0;
	position:relative;
	margin: auto 0;
	width:43%;
	padding:0 3% 30px calc(5% + 2vw);
}
.mv_inner_text div.sanaru{
	width:60%;
	filter:drop-shadow(1px 1px 5px rgba(28,89,132,.7));
}
.mv_inner_text h1{
	width: 100%;
	filter:drop-shadow(1px 1px 9px rgba(28,89,132,.7));
}
.mv_inner_text h1 .tb_only{display:none;}

.mv_inner_shadow{
	position:absolute;
	z-index: -1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: radial-gradient(closest-side, #2ab3ff, rgba(255,255,255,0));
	mix-blend-mode: multiply;
}
.mv_inner_text div.text{
	width: 100%;
	filter:drop-shadow(1px 1px 4px rgba(255,255,255,1)) drop-shadow(1px 1px 10px rgba(255,255,255,.6));
}

.mv_inner_img{width:57%;}
.mv_inner_img img{margin-right:-2vw;}


/*=================================
  buttonエリア
=================================*/


.button_area{background:linear-gradient(to bottom,rgba(255,255,255,0) 50%,#fff 50%);}
.button_box{
	background-image: url("../images/button_bk.webp");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 120%;
	padding:30px;
}

.button_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:80px;
	margin: auto;
	max-width: 1200px;
}
.button_wrap a{
	width:calc((100% - (80px * 2)) / 3);
	filter:drop-shadow(1px 1px 11px rgba(127,118,110,.4));
	transition: .2s;
}

@media screen and (min-width:768px) {
	.button_wrap a:hover{
		transform: scale(.96);
	}
}


/*=================================
  MISSION
=================================*/

.mission_area{
	background-color:#fff;
}

.mission_bk{
	position:relative;
}
.mission_bk::before,.mission_bk::after{
	content:"";
	display:block;
	position:absolute;
	z-index:0;
	bottom:-10vw;
	height:auto;
	width:50%;
	aspect-ratio:8 / 10;
	background-repeat: no-repeat;
	background-size: contain;
}
.mission_bk::before{
	background-image:url("../images/misson_bk_l.webp");
	left:-10vw;
	background-position:left bottom;
}
.mission_bk::after{
	background-image:url("../images/misson_bk_r.webp");
	right:-10vw;
	background-position:right bottom;
}

.mission_main{
	padding:50px 40px;
	position:relative;
	z-index: 5;
}

.mission_title{
	display: flex;
	flex-wrap: wrap;
	justify-content:flex-end;
	margin: auto;
	gap:0 5%;
	max-width: 1400px;
}
.mission_title_text{width:38%;}
.mission_title_img{
	padding-top:50px;
	width:50%;
}
.mission_title_img img{
	transform: rotate(3deg);
	filter: drop-shadow(0 0 5px rgba(0,0,0,.35));
}

.mission_title_frame{
	width:100%;
	margin-left:-10%;
	padding-bottom:30px;
}

.mission_text{
	padding: 60px 0;
}

.mission_text div:nth-child(1){
	
}
.mission_text div p{
	color:#306163;
	text-align:center;
	font-size:20px;
	letter-spacing:.1em;
	font-family: "LINE Seed JP", sans-serif;
	padding-bottom:60px;
}
.mission_text div:last-child p{
	font-size:27px;
	font-weight:600;
	letter-spacing:.15em;
	line-height:1.4em;
	padding-bottom:0;
}


/*=================================
  VISION-living
=================================*/

.vision-living_wrap{background-color:#fff;}

.vision-living_bk{
	position:relative;
	background-image: url("../images/vision_bk.webp");
	background-position:right top;
	background-repeat: no-repeat;
	background-size: 120%;
}

.vision_box{padding:120px 30px;}

.vision_text{
	margin: auto;
	max-width:900px;
	padding:100px 0 40px;
}
.vision_text h2{
	color:#276d60;
	font-size:31px;
	font-weight: 800;
	letter-spacing:.15em;
	line-height:1.2em;
	padding-bottom:30px;
}

.vision_text_wrap{}
.vision_text_wrap p{
	color:#306163;
	text-align:left;
	font-size:20px;
	letter-spacing:.1em;
	font-family: "LINE Seed JP", sans-serif;
	padding-bottom:30px;
}
.vision_text_wrap p:last-child{padding-bottom:0;}

.vision-living_line{opacity:.7;}

.living_area{
	background-color:rgba(255,255,255,.7);
}

.living_bk{
	position:relative;
}
.living_bk::before,.living_bk::after{
	content:"";
	display:block;
	position:absolute;
	z-index:1;
	bottom:0;
	height:auto;
	background-repeat: no-repeat;
	background-size: contain;
}
.living_bk::before{
	background-image:url("../images/living_bk_l.webp");
	left:-10vw;
	background-position:left bottom;
	width:50%;
	aspect-ratio:4 / 3;
}
.living_bk::after{
	background-image:url("../images/living_bk_r.webp");
	right:-10vw;
	background-position:right bottom;
	width:35%;
	aspect-ratio:1 / 1;
	transform: rotate(1deg);
}

.living_main{
	position:relative;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	gap:0 5%;
	margin: auto;
	max-width: 1400px;
	padding:0 40px 120px;
}

.living_img{width:50%;}
.living_img img{
	transform: rotate(-3deg);
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, .35));
}

.living_text{width:45%;}

.living_text h2{
	text-align:left;
	color: #164756;
    font-size: 31px;
    font-weight: 800;
    letter-spacing: .15em;
    line-height: 1.2em;
    padding-bottom: 30px;
}
.living_text p{
	text-align:left;
    color: #306163;
    font-size: 20px;
    letter-spacing: .1em;
    font-family: "LINE Seed JP", sans-serif;
    padding-bottom: 60px;
}


.living_bottom_img{width:100%;text-align: center;}
.living_bottom_img img{max-width:600px;}


/*=================================
  welfare
=================================*/
.welfare_area{background-color:#fff;}

.welfare_bk{
	position:relative;
}
.welfare_bk::before,.welfare_bk::after{
	content:"";
	display:block;
	position:absolute;
	z-index:1;
	top:50%;
	transform: translateY(-50%);
	height:auto;
	background-repeat: no-repeat;
	background-size: contain;
}
.welfare_bk::before{
	background-image:url("../images/welfare_bk_l.webp");
	left:-10vw;
	background-position:left bottom;
	width:50%;
	aspect-ratio:4 / 3;
}
.welfare_bk::after{
	background-image:url("../images/welfare_bk_r.webp");
	right:-10vw;
	background-position:right bottom;
	width:35%;
	aspect-ratio:1 / 1;
}

.welfare_main{
	position:relative;
	z-index: 5;
	padding:40px 0 120px;
}

.welfare_title{
	margin: auto;
	max-width:800px;
	padding-bottom:80px;
}

.imgline_box {
	display: flex;
	align-items: center;
	overflow:hidden;
}
.imgline {
	display:flex;
	width:100%;
	width:min-content;
	animation: 120s linear infinite sliderAnimation;
}
@keyframes sliderAnimation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.imgline_inner{
	width:360px;
	position:relative;
}

.welfare_text{
	padding:100px 0 0;
}
.welfare_text p{
	color: #306163;
    text-align: center;
    font-size: 20px;
    letter-spacing: .1em;
    font-family: "LINE Seed JP", sans-serif;
    padding-bottom: 60px;
}

/*=================================
  framework
=================================*/
.framework_area{background-color:#fff;}

.framework_title{
	margin-top:-1vw;
	position: relative;
	padding:0 0 30px;
}
.framework_title h2{
	position:relative;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:20px;
	margin: auto;
	max-width:800px;
}
.framework_title h2 img:nth-child(1){width:100%;}
.framework_title h2 img:nth-child(2){width:56%;}

.framework_title::before,.framework_title::after{
	content:"";
	display:block;
	position:absolute;
	z-index:1;
	bottom:-15vw;
	height:auto;
	background-repeat: no-repeat;
	background-size: contain;
}
.framework_title::before{
	background-image:url("../images/framework_title_l.webp");
	left:-2vw;
	background-position:left bottom;
	width:50%;
	aspect-ratio:4 / 3;
}
.framework_title::after{
	background-image:url("../images/framework_title_r.webp");
	right:0;
	background-position:right bottom;
	width:35%;
	aspect-ratio:1 / 1;
}

.framework_bottom{position:relative;z-index: 5;}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.framework_contents{
	padding:0 40px;
}

.framework_contents_title{
	margin: auto;
	max-width:800px;
}
.framework_contents_title > div{
	margin: auto;
	max-width:300px;
	filter:drop-shadow(1px 1px 11px rgba(127,118,110,.4));
}
.framework_contents_title h3{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:15px;
}
.framework_contents_title h3 img:nth-child(1){width:100%;}
.framework_contents_title h3 img:nth-child(2){width:54%;}

.framework_contents_list{
	position:relative;
	margin: auto;
	max-width:1200px;
	padding:100px 0 80px;
	z-index:5;
}

.framework_contents_inner{
	display:flex;
	flex-wrap: wrap;
	gap:50px;
	padding-bottom:100px;
}

.contents_inner_img{width:100px;}
.contents_inner_text{width:calc(100% - 150px);padding-top:20px;}

.w170 .contents_inner_img{width:170px;}
.w170 .contents_inner_text{width:calc(100% - 220px);}

.w-half .contents_inner_img{width:calc(45% - 50px);margin-top:-40px;}
.w-half .contents_inner_img img[src*="method"]{margin-left:-25px;width:120%;}
.w-half .contents_inner_text{width:55%;margin:auto 0;}


.contents_inner_text .h4_sub{
	color:#37686d;
	font-size:21px;
	font-weight:700;
	text-align:left;
	line-height:1.2em;
}
.contents_inner_text h4{
	color:#37686d;
	font-size:46px;
	font-weight:700;
	text-align:left;
	line-height:1.2em;
	padding:0 0 15px;
}

.contents_inner_text .textbox{
	color:#38342b;
	font-size:18px;
	text-align:left;
	font-family: "LINE Seed JP", sans-serif;
}
.contents_inner_text .textbox p{padding-bottom:1em;}
.contents_inner_text .textbox p:last-child{padding-bottom:0;}


.framework_contents_section ul{
	display: flex;
	flex-wrap: wrap;
}
.framework_contents_section ul li{
	text-align:left;
    color: #38342b;
    font-size: 20px;
	font-weight:600;
    letter-spacing: .1em;
    font-family: "LINE Seed JP", sans-serif;
}
.framework_contents_section ul li::after{
	content:"/";
	padding:0 .5em;
}
.framework_contents_section ul li:last-child::after{
	content:none;
}

.contents_section_text{
	color: #38342b;
    text-align: left;
    font-family: "LINE Seed JP", sans-serif;
	padding:30px 0;
}

.contents_section_imglist{display:flex;flex-wrap: wrap;}
.contents_section_imglist .imgitem{width:25%;}
.contents_section_imglist .imgitem .note{
	color: #38342b;
	font-size:14px;
	font-weight:700;
    text-align: left;
    font-family: "LINE Seed JP", sans-serif;
}



/*=================================
  system_box
=================================*/

.system_area{
	position:relative;
	z-index:3;
}

.system_box{
	margin-top:-5vw;
	position:relative;
	background-image: url("../images/system_bk.webp");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 110%;
}

.system_box .framework_contents_title{
	padding-top:8vw;
}
#system{padding-top:2vw;}

.system_bk{
	position: relative;
}

.system_bk::before,.system_bk::after{
	content:"";
	display:block;
	position:absolute;
	z-index:1;
	height:100%;
	background-repeat: no-repeat;
	background-size: contain;
}
.system_bk::before{
	background-image:url("../images/system_frame_l.webp");
	left:-15vw;
	bottom:5vw;
	background-position:left bottom;
	width:30%;
}

.system_bk::after{
	background-image:url("../images/system_frame_r.webp");
	right:-15vw;
	top:26vw;
	background-position:right top;
	width:50%;
}

.system_bottombk{
	position: relative;
}
.system_bottombk::before,.system_bottombk::after{
	content:"";
	display:block;
	position:absolute;
	z-index:1;
	bottom:-15vw;
	height:auto;
	background-repeat: no-repeat;
	background-size: contain;
}
.system_bottombk::before{
	background-image:url("../images/system_bk_l.webp");
	left:0;
	background-position:left bottom;
	width:50%;
	aspect-ratio:4 / 3;
}
.system_bottombk::after{
	background-image:url("../images/system_bk_r.webp");
	right:0;
	background-position:right bottom;
	width:35%;
	aspect-ratio:1 / 1;
}

.system_bottom_img{
	margin:auto;
	width:57vw;
}

/*=================================
  advancement_box
=================================*/

.advancement_area{
	position:relative;
	z-index:3;
}

.advancement_box{
	position:relative;
	background-image: url("../images/advancement_bk.webp");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100%;
}

.advancement_box .framework_contents_title{
	padding-top:4vw;
}

#advancement{padding-top:2vw;}

.advancement_bk{
	position:relative;
}

.advancement_bk::before,.advancement_bk::after{
	content:"";
	display:block;
	position:absolute;
	z-index:1;
	height:100%;
	background-repeat: no-repeat;
	background-size: contain;
}
.advancement_bk::before{
	background-image:url("../images/advancement_frame_l.webp");
	left:0;
	bottom:8vw;
	background-position:left bottom;
	width:25%;
}

.advancement_bk::after{
	background-image:url("../images/advancement_frame_r.webp");
	right:0;
	top:15vw;
	background-position:right top;
	width:18%;
}

.advancement_bottombk{
	position: relative;
	padding-bottom:120px;
}
.advancement_bottombk::before,.advancement_bottombk::after{
	content:"";
	display:block;
	position:absolute;
	z-index:1;
	bottom:-15vw;
	height:auto;
	background-repeat: no-repeat;
	background-size: contain;
}
.advancement_bottombk::before{
	background-image:url("../images/advancement_bk_l.webp");
	left:0;
	background-position:left bottom;
	width:60%;
	aspect-ratio:4 / 3;
}
.advancement_bottombk::after{
	background-image:url("../images/advancement_bk_r.webp");
	right:0;
	background-position:right bottom;
	width:60%;
	aspect-ratio:1 / 1;
}


/*=================================
  ambition_box
=================================*/

.ambition_area{
	position:relative;
	z-index:3;
}

.ambition_box{
	position:relative;
	background-image: url("../images/ambition_bk.webp");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100%;
}

.ambition_box .framework_contents_title{
	padding-top:2vw;
	margin-top:-2vw;
}


.ambition_bk{
	position:relative;
}

.ambition_bk::before,.ambition_bk::after{
	content:"";
	display:block;
	position:absolute;
	z-index:1;
	height:100%;
	background-repeat: no-repeat;
	background-size: contain;
}
.ambition_bk::before{
	background-image:url("../images/ambition_frame_l.webp");
	left:-10vw;
	bottom:10vw;
	background-position:left bottom;
	width:30%;
}

.ambition_bk::after{
	background-image:url("../images/ambition_frame_r.webp");
	right:0;
	top:25vw;
	background-position:right top;
	width:22%;
}

.ambition_bottombk{
	position: relative;
}
.ambition_bottombk::before,.ambition_bottombk::after{
	content:"";
	display:block;
	position:absolute;
	z-index:1;
	bottom:-10vw;
	height:auto;
	background-repeat: no-repeat;
	background-size: contain;
}
.ambition_bottombk::before{
	background-image:url("../images/ambition_bk_l.webp");
	left:0;
	background-position:left bottom;
	width:40%;
	aspect-ratio:4 / 3;
}
.ambition_bottombk::after{
	background-image:url("../images/ambition_bk_r.webp");
	right:0;
	background-position:right bottom;
	width:40%;
	aspect-ratio:1 / 1;
}

.ambition_bottom_img{
	margin:auto;
	max-width:900px;
}


/*=================================
  SANARU チャンネル
=================================*/

.channel_area{
	background-color: #fff;
}

.channel_main{
	margin: auto;
	padding:120px 30px;
}

.channel_sns_links{
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	max-width:860px;
	gap:40px;
}

.channel_sns_links a{
	display: flex;
	flex-wrap: wrap;
	gap:30px;
	justify-content: center;
	width: calc((100% - (40px * 1))/ 2);
	border:1px solid #ddd;
	padding:25px 0;
}

.channel_sns_links a img{
	width:50px;
	margin: auto 0;
}

.channel_sns_links a span{
	margin: auto 0;
	display: block;
	text-align:left;
	font-family:sans-serif;
	font-size:16px;
	font-weight:600;
}

@media screen and (min-width:767px) {
	.channel_sns_links a:hover{
		opacity: .5;
	}
}



/*=================================
  フッター
=================================*/
footer{
	background-color: #fff;
}

.footer_box{
	padding:40px 20px 60px;
}

.footer_menu{
	margin: auto;
	width:100%;
	max-width: 1300px;
	padding:80px 150px 100px;
}

.footer_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.footer_list > li{
	text-align: left;
}

.footer_list > li > ul h4{
	letter-spacing: 0.05em;
	font-size:24px;
	font-weight:600;
	padding-bottom:10px;
}

.footer_list > li > ul > li{
	font-size:13px;
	font-family: sans-serif;
	letter-spacing: 0.02em;
	padding:5px 0;
}

.footer_list > li > ul > li a{
	display:inline-block;
	position: relative;
	transition: .2s;
}

.footer_list > li > ul > li a:after{
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    border-bottom: #111 1px solid;
    border-right: #111 1px solid;
    bottom: 8px;
    right: -20px;
    transform: rotate(-45deg);
    transition: .2s;
}

.footer_group{
	margin: auto;
	background-color: #fff;
	max-width:1400px;
	padding:60px 40px;
}

.footer_group_box{
	margin: auto;
	max-width:1100px;
	display:flex;
	flex-wrap:wrap;
	gap:35px;
}

.footer_group_box h4{
	width:100%;
}
.footer_group_box h4 span{
	display: block;
	margin: auto;
	max-width: 240px;
}

.footer_group_box a{
	display: block;
	width:calc((100% - (35px * 3))/ 4);
	height:auto;
	aspect-ratio:117 / 13;
	transition: .2s;
}
.footer_group_box a img{
	width:auto;
	height:100%;
	transition: .2s;
}

.footer_group_box a[href*="keimeikan"] img{height:124%;margin-top:-2.8%;}

.footer_logo_box{
	padding:30px 0 0;
}

.footer_logo_box{
	margin: auto;
	max-width:170px;
}

address{
	background-color:rgba(0,0,0,.75);
	font-size:12px;
	padding:4px 0;
	color:#fff;
}

@media screen and (min-width:768px) {
	.footer_list > li > ul > li a:hover {
		
	}
	.footer_list > li > ul > li a:hover::after {
		right: -10px;
	}
	.footer_group_box a img:hover{
		opacity: .5;
	}
	
}