@charset "UTF-8";

html {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
	word-break: normal;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	   tab-size: 4;
	width: 100%;
}
body {
	position: relative;
	background: #fff;
	overflow-x: hidden;
	color: #69534a;
	font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 600;
  font-style: normal;
	font-size: 13px;
	font-size: 3.7333vw;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	   -moz-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%;
	        text-size-adjust: 100%;
}
* {
    padding: 0;
    margin: 0;
}
img {
	vertical-align: bottom;
	width: 100%;
  height: auto;
  display: block;
}
a {
    text-decoration: none;
    display: block;
	color: #69534a;
}
a:hover {
	opacity: 0.7;
}
ul,
ol {
	list-style: none;
}
main {
	margin: 0 auto;
}
.scrollAnim.-top {
  transform: translateY(30px);
  opacity: 0;
  transition: transform 5.0s cubic-bezier(0.19, 1, 0.22, 1), opacity 5.0s cubic-bezier(0.19, 1, 0.22, 1); 
}
.scrollAnim {
  transform: translateY(30px);
  opacity: 0;
  transition: transform 2.0s cubic-bezier(0.19, 1, 0.22, 1), opacity 2.0s cubic-bezier(0.19, 1, 0.22, 1); 
}
  .scrollAnim.show {
    transform: translateY(0);
    opacity: 1; 
}
/*-------------------------------- 

　　　　共通 

--------------------------------*/
.pc{
	display: none;
}
.txt_green {
	color: #227600;
}
.txt_pink {
	color: #ce1d46;
}
.txt_blue {
	color: #0e78c9;
}
/*ボタンのスタイル*/
.btn a{
	background-color: #d00e31;
	border-radius: 10vw;
	padding: 3vw;
	color: #fff;
	font-size: 4.8vw;
	width: 80%;
	text-align: center;
	margin: 3vw auto 0;
	position: relative;
}
.btn a:after {
  content: '';
  width: 2vw;
  height: 2vw;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 7vw;
  bottom: 0;
  margin: auto;
}
@media screen and (min-width: 768px), print {
body {
	font-size: 22px;
}

.sp{
	display: none;
}	
.pc{
	display: block;
	}

/*ボタンのスタイル*/
.btn a{
	padding: 15px;
	font-size: 22px;
	max-width: 350px;
	margin: 30px auto 0;
}
.btn a:after {
  width: 10px;
  height: 10px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  right: 30px;
}
	
}

/*-------------------------------- 

　　　　ヘッダー

--------------------------------*/
.header {
	position: fixed;
	background-color: #fff;
	width: 100%;
	box-shadow: 0px 1.2vw 0px 0px rgba(0, 0, 0, 0.1);
	z-index: 1000;
}
.header_wrap {
	display: flex;
	justify-content: space-between;
	padding: 3vw;
	position: relative;	
}
.header_wrap .header_logo {
	width: 25vw;
}
/*-------------------------------- 
　　　　共通SPハンバーガー中身
--------------------------------*/
/*----- SPハンバーガーメニュー ------*/
.menu {
  position: fixed;
  top: 0;
  right: -100%; /* 初期状態では画面の外に隠れている */
  width: 80%;
  height: 100%;
  background-color: #fff;
  transition: right 0.3s ease;
  padding: 20px;
  box-sizing: border-box;
  z-index: 999;
}
/* メニューが開いているとき */
.menu.open {
  right: 0;
}
/* ボタンのスタイル */
.hamburger {
  position: fixed !important; /* 強制的に固定 */
  top: 5.3vw;
  right: 5.3vw;
  width: 8vw;
	z-index: 1001; 
}
.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #333;
  margin: 5px 0;
  transition: 0.4s;
}
/* バツ印に変化するスタイル */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* メニューリストのスタイル */
.menu ul {
  padding: 0;
  margin-top: 20vw;
}
.menu li {
  padding: 20px 0;
  border-bottom: dashed 2px #d2cbc8;
  font-size: 4vw;
	position: relative;
}
.menu li::before {
  content: '';
  width: 7vw;
  height: 7vw;
  background: #d00e31;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.menu li::after {
  content: '';
  width: 1.5vw;
  height: 1.5vw;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 4%;
  bottom: 0;
  margin: auto;
}
.menu li a {
  color: #69534a;
}
.menu_intro {
	margin-top: 3vw;
}
.menu_intro a {
	font-size: 3.5vw;
	margin-top: 2vw;
	position: relative;
	padding-left: 4.5vw;
}
.menu_intro a::before {
	position: absolute;
	content: '';
  	width: 4%;
	height: 2px;
	top: 3vw;
	left: 0;
	background-color: #d00e31;
}


@media screen and (min-width: 768px), print {
.header {
	box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.1);
}
.header_wrap {
	display: flex;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}
.header_wrap .header_logo {
	max-width: 150px;
}
.header_nav_pc {
		width: 75%;
	}
.header_nav_pc ul {
	display: flex;
	justify-content: space-between;
	padding: 20px 0 10px 20px;
	font-size: 2vw;
}	
/*-------------------------------- 
　共通PC class=is-activeで赤線
--------------------------------*/
.nav-item {
    position: relative;
    text-decoration: none;
	cursor: pointer;
}
/* アクティブ時の文字色 */
.nav-item.is-active {
    color: #d00e31 !important;
}
/* アクティブ時の下線（擬似要素） */
.nav-item.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -30px; /* 文字からの距離 */
    width: 100%;
    height: 3px;    /* 線の太さ */
    background-color: #d00e31; /* 線の色 */
}
	
/*-------------------------------- 
　共通PC 取組み紹介現れるエリア
--------------------------------*/
.balloon {
  display: none;
  position: fixed;
  top: 120px;
  right: calc(50% - 25vw);
  z-index: 999;
  background: #fff;
  width: 20vw;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  padding: 10px 20px;
  text-align: center;
  border-radius: 20px;
  font-size: 18px;
}
.balloon .nav_line {
  border-bottom: dashed 2px #d2cbc8;	
}	
.balloon p {
	padding: 10px 0;	
}	
}
@media screen and (min-width: 1024px), print {
.header_nav_pc ul {
	font-size: 18px;
	justify-content: right;
}	
.header_nav_pc ul li+li {
	margin-left: 30px;
}	
/*-------------------------------- 
　共通PC 取組み紹介現れるエリア
--------------------------------*/
.balloon {
  right: 210px;
  width: 220px;
}
}
@media screen and (min-width: 1200px), print {
/*-------------------------------- 
　共通PC 取組み紹介現れるエリア
--------------------------------*/
.balloon {
  right: calc(50% - 400px);
  width: 220px;
}	
}

/*-------------------------------- 

　　　共通フッター

--------------------------------*/
footer p,
footer a {
	color: #fff;
}
footer .footer_lists {
	background-color: #69534a;
	padding: 2vw 5vw 5vw;
}
footer .footer_inner01_wrap {
	margin-top: 5vw;
}
footer .footer_inner01_wrap p {
	position: relative;
	font-size: 4.8vw;
}
footer .footer_inner01_wrap p::after {
	position: absolute;
	content: '';
  	width: 100%;
	height: 0.7vw;
	bottom: -2vw;
	left: 0;
	background-color: #8dd883;
}
footer .footer_inner01_wrap.-footer_favorite p::after {
	background-color: #feacc2;
}
footer .footer_inner01_wrap.-footer_creation p::after {
	background-color: #74c5f0;
}

footer .footer_inner01_wrap ul {
	margin-top: 4vw;
}
footer .footer_inner01_wrap ul li+li {
	margin-top: 2vw;
}
footer .footer_inner01_wrap ul li span {
	font-size: 3.2vw;
}

/*企業情報flex*/
footer .footer_inner02 {
	margin-top: 5vw;
	font-size: 3.4vw;
}
footer .footer_inner02 ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
footer .footer_inner02 ul li {
	display: inline-block;
	width: 47%;
	border: 0.7vw solid #87756e;
	border-radius: 2vw;
	padding: 2vw 0;
}
footer .footer_inner02 ul li a {
	text-align: center;
}
footer .footer_inner02 ul li:nth-of-type(n+3) {
	margin-top: 2vw;
}
footer .copyright {
	color: #fff;
    font-size: 3.2vw;
    text-align: center;
    padding: 5vw 0;
	background-color: #503d35;
}
@media screen and (min-width: 768px), print {
footer .footer_lists {
	padding: 50px;
}
footer .footer_inner01 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
}
footer .footer_inner01_wrap {
	width: 30%;
	margin-top: 0;
}
footer .footer_inner01_wrap p {
	font-size: 24px;
}
footer .footer_inner01_wrap p::after {
	height: 3px;
	bottom: -20px;
}
footer .footer_inner01_wrap ul {
	margin-top: 30px;
	font-size: 18px;
}
footer .footer_inner01_wrap ul li+li {
	margin-top: 10px;
}
footer .footer_inner01_wrap ul li span {
	font-size: 14px;
}
/*企業情報flex*/
footer .footer_inner02 {
	max-width: 1200px;
	margin: 50px auto 0;
	font-size: 16px;
}
	footer .footer_inner02 ul {
		display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 横並びにする場合 */
    list-style: none;
    padding: 0;
	}
footer .footer_inner02 ul li {
	width: 23%;
	border: 3px solid #87756e;
	border-radius: 10px;
	display: flex;
	padding: 0;
}
	footer .footer_inner02 ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2em;  
    padding: 10px 5px;
    text-align: center;
    text-decoration: none;
	}
footer .footer_inner02 ul li:nth-of-type(n+3) {
	margin-top: 0;
}
footer .copyright {
    font-size: 14px;
    padding: 30px 0;
}	
}

/*-------------------------------- 

　　　TOPフローティング

--------------------------------*/
.page_top {
	position: fixed;
	right: 3vw;
	bottom: 3vw;
	z-index: 5;
	background-color: #d00e31;
	display: inline-block;
	border-radius: 3vw;
	padding: 2vw;
	width: 10vw;
	height: 10vw;
}
.page_top p {
	color: #fff;
	padding-top: 3.5vw;
	text-align: center;
	position: relative;
}
.page_top p::before {
  content: '';
  width: 2.6vw;
    height: 2.6vw;
    border: 0;
    border-top: solid 0.6vw #fff;
    border-right: solid 0.6vw #fff;
    transform: rotate(-45deg);
    position: absolute;
    top: -3.2vw;
    left: 3.4vw;
  bottom: 0;
  margin: auto;
}
@media screen and (min-width: 768px), print {
.page_top {
	right: 20px;
	bottom: 20px;
	border-radius: 20px;
	padding: 20px;
	width: 50px;
	height: 50px;
}
.page_top p {
	padding-top: 20px;
}
.page_top p::before {
  width: 15px;
    height: 15px;
    border-top: solid 3px #fff;
    border-right: solid 3px #fff;
    top: -25px;
    left: 17px;
}	
}

/*-------------------------------- 

　　　2階層共通パンくず

--------------------------------*/
.article_nav_breadcrumb {
	background-color: #fff;
	padding: 4vw 5vw;
}
.article_nav_breadcrumb ol {
    display: flex;
        overflow-x: scroll;
        word-break: keep-all;
        white-space: nowrap;
	max-width: 1200px;
	margin: 0 auto;
}
.article_nav_breadcrumb ol li {
        font-size: 3.2vw;      
    }
.article_nav_breadcrumb ol li::after {
    content: '>';
    display: inline-block;
    padding: 0 10px;
}
.article_nav_breadcrumb ol li.ic_none::after {
	content: '';
}
.article_nav_breadcrumb ol li a {
    text-decoration: underline;
	display: inline-block;
}
@media screen and (min-width: 768px), print {
.article_nav_breadcrumb {
	padding: 20px 50px;
}
.article_nav_breadcrumb ol li {
        font-size: 18px;      
    }
}




/*-------------------------------------------------------------------------------------------------------------------------------- 

　　　　　TOP

--------------------------------------------------------------------------------------------------------------------------------*/

/*-------------------------------- 

　　　KV~TOP-宣言

--------------------------------*/
.kv {
	padding-top: 14.6vw;
}
.declaration {
	background-color: #f7f7f7;
	padding: 10vw 3vw 6vw;
	overflow: hidden;
}
.declaration_contents {
	background-color: #fff;
	padding: 7vw 2vw;
	border-radius: 10vw;
	text-align: center;
	line-height: 1.8;
	position: relative;
}
.declaration_contents p+p {
	margin-top: 4vw;
}
.declaration_ic01 {
	position: absolute;
	width: 25vw;
	top: -5vw;
	right: -5vw;
}
.declaration_ic02 {
	position: absolute;
	width: 25vw;
	top: 25vw;
	left: -5vw;
}
.declaration_ic03 {
	position: absolute;
	width: 25vw;
	bottom: 20vw;
	right: -5vw;
}
.declaration_ic04 {
	position: absolute;
	width: 25vw;
	bottom: -5vw;
	left: -5vw;
}

.top_philosophy {
	padding-top: 60vw;
	background-color: #f7f7f7;	
}
.top_philosophy_inner {
	margin-top: -40vw;
	position: relative;
}
.top_philosophy_img {
	position: absolute;
	width: 90%;
	top: -22vw;
	left: 5%;
}
.top_philosophy_contents {
	background-color: #fff;
	padding: 60vw 5vw 12vw;
}
.top_philosophy p {
	text-align: center;
}
.top_philosophy_txt {
	font-size: 4.8vw;
	margin: 3vw 0;
}
@media screen and (min-width: 768px), print {
.kv {
	padding-top: 100px;
}
.declaration {
	padding: 80px 50px;
}
.declaration_contents {
	max-width: 800px;
	margin: 0 auto;
	padding: 50px 0;
	border-radius: 50px;
}
.declaration_contents p+p {
	margin-top: 30px;
}
.declaration_ic01 {
	width: 230px;
	top: -40px;
	right: -100px;
}
.declaration_ic02 {
	width: 170px;
	top: 50px;
    left: -80px;
}
.declaration_ic03 {
	width: 160px;
	bottom: 10px;
	right: -80px;
}
.declaration_ic04 {
	width: 230px;
	bottom: -80px;
	left: -90px;
}

.top_philosophy {
	padding-top: 0;
	background-color: #f7f7f7;	
}
.top_philosophy_inner {
	margin-top: 0;
	padding-top: 20px;
	position: relative;
}
.top_philosophy_img {
	position: absolute;
	width: 40%;
	top: 10%;
	left: 2%;
}
.top_philosophy_contents {
	background-color: #fff;
	padding: 8vw 10px 8vw 23vw;
	margin-left: 200px;
	border-radius: 80px 0 0 0;
}
.top_philosophy p {
	text-align: left;
	font-size: 22px;
}
.top_philosophy p.top_philosophy_txt {
	font-size: 30px;
	margin: 0 0 30px;	
}
.top_philosophy_contents .btn a {
    margin: 30px 0 0;
}	
	
}
@media screen and (min-width: 1024px), print {
.top_philosophy_img {
	max-width: 500px;
	top: 50px;
	left: calc(50% - 45%);
	z-index: 2
}
.top_philosophy_contents {
	padding: 130px 0;
	position: relative;
	height: 280px;
	margin-left: 32vw;
}
.top_philosophy_contents_detail {
	position: absolute;
	top: 120px;
	left: calc(50% - 16vw);
}
}
@media screen and (min-width: 1300px), print {
.top_philosophy_img {
	left: calc(50% - 560px);
}
}





/*-------------------------------- 

　　　　　三つの項目

--------------------------------*/
/*-----------
 あんしん安全
------------*/
#mirai_top #safety {
	background-color: #07b248;
	color: #227600;
}
#mirai_top #favorite {
	background-color: #ff7c9c;
	color: #ce1d46;
}
#mirai_top #creation {
	background-color: #00a3e3;
	color: #0e78c9;
}
.project_contents {
	border-radius: 15vw 15vw 0 0;
	padding: 10vw 5vw;
}
.project_contents.-safety_bg {
	background-color: #8dd883;
}
.project_contents.-favorite_bg {
	background-color: #feacc2;
}
.project_contents.-creation_bg {
	background-color: #74c5f0;
}
.project_contents_txt01 {
	text-align: center;
	font-size: 4.8vw;
	margin-bottom: 4vw;
}
.project_contents_inner {
	background-color: #fff;
	border-radius: 0 0 10vw 10vw;
	padding: 5vw;
	position: relative;
	margin-top: 12vw;
}
.project_contents_ttl {
	position: absolute;
	width: 108%;
    top: -12vw;
    left: -4%;
}
.btn.-safety a {
	background-color: #227600;
}
.btn.-favorite a {
	background-color: #ce1d46;
}
.btn.-creation a {
	background-color: #0e78c9;
}


/*-----------スライド----------*/
.slide_area {
	margin: 0px 0px;
}
.slide_item {
  margin: 0 7vw;
  border-radius: 2vw;
  background-color: #f7f7f7;	
}
.slide_item_txt {
	padding: 0 4vw;
	height: 18vw;
	display: flex;
	align-items: center;
	justify-content: center;
}
.slide_item p {
	color: #69534a;
	width: 100%;
	text-align: center;
}
.slide_item img {
	border-radius: 2vw 2vw 0 0;
}
/*--矢印表示--*/
.slick-arrow{ 
	z-index:2; 
}
.slick-arrow:before{
    content:"";
    width: 100%;
    height: 99%;
    position: absolute;
    top: 0;
    left: 0;
}
.slide_area .slick-next{
    right:1vw;
}
.slide_area .slick-prev{
    left:1vw;
}
.slide_area .slick-next{
    right:-7vw;
}
.slide_area .slick-prev{
    left:-7vw;
}
.slide_area .slick-next:before{
    background: url("../img/common/slider_btn02.png") no-repeat;
    background-size: contain;
	opacity: 1;
}
.slide_area .slick-prev:before{
    background: url("../img/common/slider_btn01.png") no-repeat;
    background-size: contain;
	opacity: 1;
}
.slick-arrow{
    z-index: 2;
    width: 11vw;
    height: 11vw;
}
/*--dots表示--*/
.slick-dots{
	bottom: -10vw;
	left: 5%;
}
.slick-dots li{
	width: 4vw;
	height: 5.33vw;
	margin: 0 0.5vw;
}

/* ドット全体のスタイル */
.slick-dots li button {
    width: 2.666vw;
    height: 2.666vw;
    padding: 0;
    cursor: pointer;
    background: transparent; 
    border: 0.5vw solid #69534a;
    border-radius: 50%;
    font-size: 0; 
    outline: none;
}
/* デフォルトの疑似要素（丸）が表示される場合は非表示にする */
.slick-dots li button::before {
    display: none;
}
/* アクティブ（現在表示中）なドットのスタイル */
.slick-dots li.slick-active button {
    background: #69534a; 
    border-color: #69534a;
}

/*--停止ボタン表示--*/
.slick_btn {
  width: 5vw; 
  height: 5vw; 
  background-color: #69534a;
  border-radius: 50%; 
  position: relative;
  cursor: pointer; 
	margin: 3.5vw 0 0 25vw;
	border: none;
}
/*一時停止*/
.slick_btn::after {
  content: ''; 
  width: 0.53vw;
  height: 1.86vw; 
  border-width: 0 2px 0 2px; 
  border-color: transparent #fff transparent #fff;
  border-style: solid;
  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
/* 再生 */
.slick_btn.playback::after {
  width: 0; 
  height: 0;
  border-width: 1.06vw 0 1.06vw 1.86vw;
}

@media screen and (min-width: 768px), print {
.project_contents {
	border-radius: 150px 150px 0 0;
	padding: 60px 30px;
}
.project_contents_txt01 {
	font-size: 30px;
	margin-bottom: 30px;
}
.project_contents_inner {
	border-radius: 30px;
	padding: 70px 30px;
	margin-top: 80px;
}
.project_contents_ttl {
	width: 700px;
    top: -80px;
    left: calc(50% - 350px);
}
/*-----------スライド----------*/
.slide_item {
  margin: 0 10px;
  border-radius: 20px;
}
.slide_item_txt {
	padding: 0 5px;
	height: 100px;
	font-size: 18px;
}
.slide_item img {
	border-radius: 20px 20px 0 0;
}
/*--矢印表示--*/
.slide_area .slick-next{
    right:10px;
}
.slide_area .slick-prev{
    left:10px;
}
.slide_area .slick-next{
    right:-30px;
}
.slide_area .slick-prev{
    left:-30px;
}
.slick-arrow{
    width: 50px;
    height: 50px;
}
/*--dots表示--*/
.slick-dots{
	bottom: -60px;
	left: 0;
}
.slick-dots li{
	width: 30px;
	height: 30px;
	margin: 0 0.5px;
}

/* ドット全体のスタイル */
.slick-dots li button {
    width: 20px;
    height: 20px;
	border: 3px solid #69534a;
}
/*--停止ボタン表示--*/
.play_button_wrap {
	max-width: 500px;
	margin: 0 auto;
	}
.slick_btn {
  width: 30px; 
  height: 30px; 
	margin: 25px 0 0 100px;
}
/*一時停止*/
.slick_btn::after {
  width: 5px;
  height: 15px; 
  border-width: 0 2px 0 2px; 
}
/* 再生 */
.slick_btn.playback::after {
  border-width: 6px 0 6px 10px;
}

}

@media screen and (min-width: 1024px), print {
.project_contents {
	padding: 60px 100px;
}
.project_contents_txt01 {
	font-size: 30px;
	margin-bottom: 30px;
}
.project_contents_inner {
	border-radius: 80px;
	padding: 70px 50px;
	max-width: 1200px;
        margin: 80px auto 0;
}
.project_contents_ttl {
	max-width: 700px;
    top: -80px;
    left: calc(50% - 360px);
}
/*-----------スライド----------*/
.slide_item {
  margin: 0 20px;
}
.slide_item_txt {
	padding: 0 5px;
	height: 100px;
}

/*--矢印表示--*/
.slide_area .slick-next{
    right:10px;
}
.slide_area .slick-prev{
    left:10px;
}
.slide_area .slick-next{
    right:-30px;
}
.slide_area .slick-prev{
    left:-30px;
}
.slick-arrow{
    z-index: 2;
    width: 60px;
    height: 60px;
}	
/*--dots表示--*/
.slick-dots{
	bottom: -60px;
	left: 0;
}		
	
}









/*-------------------------------- 

　　　子どもを支える人たちとともに

--------------------------------*/
.top_support {
	background-color: #69534a;
	color: #fff;
}
.top_support_img img{
	border-radius: 0 0 0 10vw;
}
.top_support_contents {
	padding: 3vw 5vw 7vw;
}
.top_support_txt01 {
	font-size: 6.1vw;
	margin-bottom: 2vw;
}
.btn.-top_support a {
	background-color: #fff;
	color: #d00e31;
}
.btn.-top_support a:after {
    border-top: solid 2px #d00e31;
    border-right: solid 2px #d00e31;
}
@media screen and (min-width: 768px), print {
.top_support_inner {
	display: flex;
	max-width: 1300px;
	margin: 0 auto;
}
.top_support_img {
	width: 45%;
}
.top_support_img img{
	width: 100%;
    height: 100%;
    object-fit: cover;
	border-radius: 0 50px 0 0 ;
}
.top_support_contents {
	width: 55%;
	padding: 40px;
}
.top_support_txt01 {
	font-size: 40px;
	margin-bottom: 5px;
}
.top_support_txt02 {
	max-width: 580px;
}
.btn.-top_support a {
	padding: 10px;
	max-width: 280px;
	margin: 30px auto 0 0;
}

}






/*-------------------------------- 

　　　お知らせ

--------------------------------*/
.notice {
	background-color: #f7f7f7;
	position: relative;
}
.notice_contents {
	padding: 8vw 5vw 10vw;
}
.notice_ttl {
	font-size: 6.1vw;
	text-align: center;
	margin: 0 auto 5vw;
	position: relative;
}
.notice_ttl::before {
  position: absolute;
  content: '';
  left: 27vw;
	top: 40%;
  width: 2vw;
  height: 2vw;
  background-color: #feacc2;
	border-radius: 50%;
}
.notice_ttl::after {
  position: absolute;
  content: '';
	top: 40%;
  right: 27vw;
  width: 2vw;
  height: 2vw;
  background-color: #8dd883;
	border-radius: 50%;
}
.notice_contents ul li+li {
	margin-top: 4vw;
}
.notice_wrap {
	background-color: #fff;
	border-radius: 5vw;
	padding: 4vw;
}
.notice_wrap p {
	color: #69534a;
}
.notice_wrap a {
	padding-right: 5vw;
	position: relative;
}
.notice_wrap a:before {
  content: '';
  width: 6vw;
  height: 6vw;
  background: #69534a;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: -1vw;
  bottom: 0;
  margin: auto;
}
.notice_wrap a:after {
  content: '';
  width: 1.6vw;
  height: 1.6vw;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 1.5vw;
  bottom: 0;
  margin: auto;
}
.notice_wrap_ic {
	line-height: 1;
	display: inline-block;
	border: 0.3vw solid #69534a;
	padding: 1vw 2vw;
	border-radius: 10vw;
	font-size: 2.93vw;
}
.notice_wrap_date {
	font-size: 3.2vw;
	margin-top: 1vw;
	letter-spacing: 2px;
}
.btn.-notice a {
    background-color: #69524a;
    color: #fff;
}
/*-------------------------------- 
　　　ピックアップ
--------------------------------*/
.pickup_contents {
	background-color: #fff;
	border-radius: 15vw 15vw 0 0;
	padding: 10vw 5vw 22vw;
}
.pickup_ttl_wrap {
	position: relative;
}
.pickup_ttl_ic01 {
	position: absolute;
	width: 14%;
	left: 15%;
	top: 0;
}
.pickup_ttl_ic02 {
	position: absolute;
	width: 5%;
    right: 24%;
    top: -1vw;
}
.pickup_ttl_txt {
	font-size: 6.1vw;
	text-align: center;
	margin: 0 auto 5vw;
	position: relative;
}
.pickup_wrap {
    background-color: #f7f7f7;
    border-radius: 5vw;
	position: relative;
}
.pickup_wrap_ic {
	background-color: #d00e31;
	border-radius: 10vw;
	display: inline-block;
	padding: 1vw 3vw;
	position: absolute;
	top: 2vw;
	left: 3vw;
	width: 8%;
	color: #fff;
	font-size: 3vw;
	line-height: 1;
}
.pickup_wrap a {
	display: flex;
}
.pickup_wrap p{
    color: #69534a;
}
.pickup_wrap_img {
	width: 30%;
}
.pickup_wrap_img img {
	width: 100%;
  	height: 30vw;
  	object-fit: cover;
	border-radius: 5vw 0 0 5vw;
}
.pickup_wrap_inner {
	width: 70%;
	padding: 2vw 3vw;
}
.pickup_wrap_date {
	font-size: 3.2vw;
	margin-top: 1vw;
	letter-spacing: 2px;
}
.pickup_contents ul li+li {
	margin-top: 4vw;
}

@media screen and (min-width: 768px), print {
.notice_contents {
	padding: 80px 50px;
}
.notice_ttl {
	font-size: 46px;
	margin: 0 auto 50px;
}
.notice_ttl::before {
  left: calc(50% - 140px);
	top: 40%;
  width: 20px;
  height: 20px;
}
.notice_ttl::after {
  right: calc(50% - 140px);
	top: 40%;
  width: 20px;
  height: 20px;
}
.notice_contents ul li+li {
	margin-top: 30px;
}
.notice_contents ul {
	max-width: 900px;
	margin: 0 auto;
}
.notice_wrap {
	border-radius: 20px;
	padding: 30px;
}

.notice_wrap a {
	padding-right: 40px;
}
.notice_wrap a:before {
  width: 35px;
  height: 35px;
  right: -10px;
}
.notice_wrap a:after {
  width: 10px;
  height: 10px;
  right: 4px;
}
.notice_wrap_toptxt {
	display: flex;
	flex-direction:row-reverse;
	justify-content: left;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.notice_wrap_ic {
	border: 2px solid #69534a;
	padding: 5px 10px;
	border-radius: 10vw;
	font-size: 16px;
	
}
.notice_wrap_date {
	font-size: 18px;
	margin-top: 0;
	letter-spacing: 2px;
	margin-right: 10px;
}

/*-------------------------------- 
　　　ピックアップ
--------------------------------*/
.pickup_contents {
	border-radius: 150px 150px 0 0;
	padding: 80px 50px 100px;
}
.pickup_ttl_ic01 {
	width: 100px;
	left: calc(50% - 240px);
	top: 0;
}
.pickup_ttl_ic02 {
	right: calc(50% - 180px);
	width: 40px;
    top: -10px;
}
.pickup_ttl_txt {
	font-size: 46px;
	margin: 0 auto 50px;
}
.pickup_contents ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1000px;
	margin: 0 auto;
}
.pickup_wrap {
    border-radius: 20px;
	width: 32%;
}
.pickup_wrap_ic {
	padding: 6px 15px;
	top: 15px;
	left: 10px;
	width: 12%;
	font-size: 16px;
}
.pickup_wrap a {
	display: block;
}
.pickup_wrap_img {
	width: 100%;
}
.pickup_wrap_img img {
	width: 100%;
	height: 40%;
  	max-height: 220px;
	border-radius: 20px 20px 0 0;
}
.pickup_wrap_inner {
	width: auto;
	padding: 10px 25px 25px;
}
.pickup_wrap_date {
	font-size: 16px;
	margin-top: 1vw;
	letter-spacing: 2px;
}
.pickup_contents ul li+li {
	margin-top: 0;
}
.pickup_contents ul li:nth-of-type(n+4) {
	margin-top: 30px;
}
	
}




/*-------------------------------------------------------------------------------------------------------------------------------- 

ドコモが目指す社会 philosophy(mirai/philosophy/)

--------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------- 

　　　KV

--------------------------------*/
#philosophy main {
	background-color: #f7f7f7;
}
@media screen and (max-width: 767px), print {
#philosophy .kv_wrap_sp {
	padding: 5vw 0;
}
#philosophy .kv_wrap_sp p {
	padding: 45vw 0 5vw;
	text-align: center;
	font-size: 6.1vw;
}
#philosophy .kv_wrap_sp .kv_01 {
	position: absolute;
	width: 70%;
	left: 2vw;
}
#philosophy .kv_wrap_sp .kv_flex {
	padding: 0 2vw;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#philosophy .kv_wrap_sp .kv_flex_img01 {
	width: 52%;
}
#philosophy .kv_wrap_sp .kv_flex_img02 {
	width: 40%;
}
#philosophy .kv_wrap_ribbon {
		position: relative;
	}
#philosophy .kv_wrap_ribbon figure.kv_wrap_ribbon01 {
	position: absolute;
	width: 100%;
	z-index: 2;
	top: 44vw;
}
#philosophy .kv_wrap_ribbon figure.kv_wrap_ribbon02 {
	position: absolute;
	width: 100%;
	z-index: 2;
	top:140vw;
}
	}
@media screen and (min-width: 768px), print {
#philosophy .kv {
	position: relative;
}	
#philosophy .kv_wrap_ribbon03 {
	position: absolute;
	width: 100%;
	left: 0;
	top: 340px;
	}
#philosophy .kv_wrap_pc {
	padding: 50px 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1000px;
	margin: 0 auto;
}
#philosophy .kv_wrap_pc p {
	font-size: 38px;
}
#philosophy .kv_wrap_pc .kv_01 {
	width: 45%;
	left: 0;
	max-width: 500px;
}
#philosophy .kv_wrap_pc .kv_txt {
	width: 50%;
	text-align: left;
}
#philosophy .kv_wrap_pc .kv_flex {
	position: relative;
	
}
#philosophy .kv_wrap_pc .kv_flex .kv_02 {
	position: absolute;
	width: 50%;
	max-width: 310px;
        right: calc(50% - 0px);
        top: 20px;
	z-index: 2;
}
#philosophy .kv_wrap_pc .kv_flex .kv_03 {
	position: absolute;
	width: 40%;
	max-width: 230px;
        right: 0px;
        top: -20px;
	z-index: 2;
}

}

/*-------------------------------- 

　　　宣言

--------------------------------*/
.declaration_ttl {
	font-size: 4.8vw;
}
#philosophy .declaration_ttl {
	color: #d00e31;
}
@media screen and (max-width: 767px), print {
#philosophy .declaration .declaration_ic05 {
	position: absolute;
    width: 25vw;
    top: 55vw;
    left: -5vw;
}
#philosophy .declaration .declaration_ic06 {
	position: absolute;
    width: 25vw;
    bottom: 17vw;
    right: -5vw;
}
}
@media screen and (min-width: 768px), print {
.declaration_ttl {
	font-size: 30px;
}
#philosophy .declaration .declaration_ic05 {
	position: absolute;
	width: 230px;
    top: -40px;
    right: -100px;
}
#philosophy .declaration .declaration_ic06 {
	position: absolute;
	width: 190px;
        bottom: 420px;
        left: -110px;
}
	
}

/*-------------------------------- 

　　　ドコモ未来プロジェクトとは

--------------------------------*/
#philosophy .about_project {
	background-color: #fff; 
}
#philosophy .about_project_contents {
	padding: 8vw 0 0;
}
#philosophy .about_project_contents_txt01 {
	padding: 0 5vw;
	line-height: 1.8;
}

#philosophy .about_project_intro_ttl {
	background-color: #f7f7f7;
	margin: 5vw 5vw 0;
	padding: 4vw;
	border-radius: 6vw 6vw 0 0;
	text-align: center;
	font-size: 4.8vw;
}
#philosophy .about_project_intro ul li{
	display: flex;
	flex-wrap: wrap;
	color: #fff;
	text-align: center;
}
#philosophy .about_project_intro ul li.-safety {
	background-color: #227600;
}
#philosophy .about_project_intro ul li.-favorite {
	background-color: #ce1d46;
}
#philosophy .about_project_intro ul li.-creation {
	background-color: #0e78c9;
}
#philosophy .about_project_intro ul li .about_project_intro_img {
	width: 35%;
}
#philosophy .about_project_intro ul li .about_project_intro_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#philosophy .about_project_intro ul li .about_project_intro_contents {
	width: 65%;
	padding: 5vw 0;
}
#philosophy .about_project_intro ul li .about_project_intro_txt01 {
	font-size: 6.1vw;
	margin-bottom: 1vw;
}
/*各ボタン*/
#philosophy .about_project_intro ul li .about_project_intro_contents .btn a{
	background-color: #fff;
	font-size: 3.7vw;
	width: 70%;
}
#philosophy .about_project_intro ul li.-safety .about_project_intro_contents .btn a{
	color: #227600;
}
#philosophy .about_project_intro ul li.-safety .about_project_intro_contents .btn a:after {
    border-top: solid 2px #227600;
    border-right: solid 2px #227600;
}
#philosophy .about_project_intro ul li.-favorite .about_project_intro_contents .btn a{
	color: #ce1d46;
}
#philosophy .about_project_intro ul li.-favorite .about_project_intro_contents .btn a:after {
    border-top: solid 2px #ce1d46;
    border-right: solid 2px #ce1d46;
}
#philosophy .about_project_intro ul li.-creation .about_project_intro_contents .btn a{
	color: #0e78c9;
}
#philosophy .about_project_intro ul li.-creation .about_project_intro_contents .btn a:after {
    border-top: solid 2px #0e78c9;
    border-right: solid 2px #0e78c9;
}

.area_btm {
	background-color: #f7f7f7;
	height: 20vw;
	position: relative;
}
@media screen and (min-width: 768px), print {
#philosophy .about_project_contents {
	padding: 80px 0 0;
}
#philosophy .about_project_contents_txt01 {
	padding: 0 30px;
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}

#philosophy .about_project_intro_ttl {
	background-color: #f7f7f7;
	margin: 50px auto 0;
	max-width: 800px;
	padding: 40px;
	border-radius: 50px 50px 0 0;
	text-align: center;
	font-size: 30px;
}
#philosophy .about_project_intro ul {
		display: flex;
		flex-wrap: wrap;
	}
#philosophy .about_project_intro ul li{
	display: block;
	width: 33.3%;
	color: #fff;
	text-align: center;
}
#philosophy .about_project_intro ul li .about_project_intro_img {
	width: 100%;
}

#philosophy .about_project_intro ul li .about_project_intro_contents {
	width: 100%;
	padding: 30px 0;
	font-size: 19px;
}
#philosophy .about_project_intro ul li .about_project_intro_txt01 {
	font-size: 30px;
	margin-bottom: 10px;
}
/*各ボタン*/
#philosophy .about_project_intro ul li .about_project_intro_contents .btn a:after {
        right: 15px;
}
#philosophy .about_project_intro ul li .about_project_intro_contents .btn a{
	font-size: 22px;
	width: 70%;
	max-width: 250px;
}

.area_btm {
	background-color: #f7f7f7;
	height: 150px;
	position: relative;
}	
}
@media screen and (min-width: 1024px), print {
#philosophy .about_project_intro ul li .about_project_intro_contents .btn a:after {
     right: 30px;
}	
}

/*-------------------------------------------------------------------------------------------------------------------------------- 

子どもを支える人たちとともに support(mirai/support/)

--------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------- 

　　　KV

--------------------------------*/
#support .kv_wrap .kv_wrap_contents {
	padding: 8vw 5vw;
	text-align: center;
	line-height: 1.9;
}
#support .kv_wrap .kv_img img {
	border-radius: 0 0 0 20vw;
}
#support .kv_wrap .kv_wrap_contents .kv_txt {
	color: #d00e31;
	font-size: 4.8vw;
	margin-bottom: 3vw;
}
@media screen and (min-width: 768px), print {
#support .kv_wrap {
	display: flex;
    max-width: 1200px;
    margin: 0 auto;	
	flex-direction:row-reverse;
}
#support .kv_wrap .kv_wrap_contents {
	padding: 20px 20px 40px;
	text-align: left;
	line-height: 1.9;
}
#support .kv_wrap .kv_img {
	width: 50%;
}
#support .kv_wrap .kv_img img {
	width: 100%;
    height: 100%;
    object-fit: cover;
	border-radius: 100px 0 0 0;
}
#support .kv_wrap .kv_wrap_contents .kv_txt {
	font-size: 30px;
	margin-bottom: 20px;
}
	
}

/*-------------------------------- 

　　　保護者の「あんしん」を支える
	 教育現場とともに考える

--------------------------------*/
#support .about_project {
	background-color: #f7f7f7; 
}
#support .about_project.-education {
	background-color: #fff; 
}
#support .about_project_contents {
	padding: 8vw 0 0;
}
#support .about_project_contents_txt01 {
	padding: 0 5vw;
	line-height: 1.8;
}

/*-------------------------------- 
　　　スライド
--------------------------------*/
#support .slick-dots {
    left: 0%;
}
#support .slider.slick-dotted.slick-slider,
#support .slider .slick-track {
    display: flex !important;
    align-items: stretch !important;
}
/* 2. 各スライド自体の高さを100%にする */
#support .slider .slick-slide {
    height: auto !important;
    display: flex !important;
    flex-direction: column;
}
#support .slide_area {
    display: flex !important;
}
#support .about_project_contents_slider {
	padding: 8vw 7vw;
}
#support .slide_item {
    background-color: #fff;
	border-radius: 5vw;
	height: auto !important; 
    display: flex !important;
    flex-direction: column;
	margin: 0 10px; 
}
#support .about_project.-education .slide_item {
    background-color: #f7f7f7;
}

#support .slide_item img {
    border-radius: 5vw 5vw 0 0;
}
#support .slide_item_txt {
    padding: 5vw;
    height: auto;
	font-size: 4.2vw;
	display: flex;
  flex-direction: column;
	flex-grow: 1; 
	align-items: normal;
}
#support .slide_item_txt p {
	text-align: left;
	font-weight: 500;
}
#support .slide_item_txt p.slide_item_ttl {
	text-align: center;
    font-size: 5.3vw;
	margin-bottom: 2vw;
	font-weight: 600;
}
#support .slide_item_txt .btn {
	 margin-top: auto;
    padding-top: 2vw; 
}
#support .slide_item_txt .btn a {
    background-color: #fff;
	border: 0.7vw solid #69534a;
    padding: 2vw;
    color: #69534a;
    width: 80%;
    margin: 2vw auto 0;
}
#support .slide_item_txt .btn a:after {
    border-top: solid 2px #69534a;
    border-right: solid 2px #69534a;
}
#support .slide_area .slick-prev {
    left: -5vw;
}
#support .slide_area .slick-next {
    right: -5vw;
}

@media screen and (min-width: 768px), print {
#support .about_project_contents {
	padding: 100px 0 0;
}
#support .about_project_contents_txt01 {
	padding: 0 30px;
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}


/*-------------------------------- 
　　　スライド
--------------------------------*/
#support .slide_area {
    justify-content: center;
}

#support .about_project_contents_slider {
	padding: 50px;
	max-width: 1200px;
	margin: 0 auto;
}
#support .slide_item {
	border-radius: 30px;
	margin: 0 10px; 
}
#support .slide_item img {
    border-radius: 30px 30px 0 0;
}
#support .slide_item_txt {
    padding: 20px;
	font-size: 1.5vw;
}
#support .slide_item_txt p.slide_item_ttl {
    font-size: 2vw;
	margin-bottom: 20px;
}
#support .slide_item_txt .btn {
    padding-top: 10px; 
}
#support .slide_item_txt .btn a {
	border: 2px solid #69534a;
    padding: 10px;
	width: 80%;
	max-width: 200px;
	font-size: 1.8vw;
    margin: 10px auto 0;
}
#support .slide_item_txt .btn a:after {
    border-top: solid 2px #69534a;
    border-right: solid 2px #69534a;
	right: 10px;
}
#support .slide_area .slick-prev {
    left: -30px;
}
#support .slide_area .slick-next {
    right: -30px;
}

#support .about_project.-education .slide_item {
    background-color: #f7f7f7;
	width: 30%!important;
}
  /* 教育現場とともに考えるPCの時スライド無効*/
	#support .play_button_wrap.-noslide {
		display: none!important;
	}
}
@media screen and (min-width: 1024px), print  {
#support .slide_item_txt {
	font-size: 18px;
}
#support .slide_item_txt p.slide_item_ttl {
    font-size: 22px;
}
#support .slide_item_txt .btn a {
	font-size: 22px;
}
#support .slide_item_txt .btn a:after {
	right: 20px;
}
	
}

/*-------------------------------- 

　　　地域で子どもを育む

--------------------------------*/
.about_project_work {
	text-align: center;
	margin-top: 8vw;
	padding-bottom: 1vw;
}
/*見出しリボン*/
#support .work_ribbon {
	position: relative;
    display: inline-block;
    padding: 1.5vw 10vw;
    background-color: #69524a;
    color: #fff;
	font-size: 5.3vw;
}
#support .work_ribbon::before,
#support .work_ribbon::after {
    position: absolute;
    top: 0;
    width: 0px;
    height: 0px;
    border-color: #69524a transparent;
    border-style: solid;
    content: '';
}
#support .work_ribbon::before {
    left: -2.6vw;
    border-width: 5.8vw 0px 5.9vw 2.66vw;
}
#support .work_ribbon::after {
    right: -2.6vw;
    border-width: 5.8vw 2.66vw 5.9vw 0px;
}
#support .about_project_work p {
	text-align: left;
	margin-top: 3vw;
	line-height: 1.8;
}
#support .about_project_work .about_project_work_first {
	background-color: #fff;
	position: relative;
	margin-top: 25vw;
	padding: 26vw 5vw 10vw;
}
#support .about_project_work .about_project_work_first figure{
	position: absolute;
	top: -20vw;
	width: 90%;
	left: 5%;
}
#support .about_project_work .btn a {
    background-color: #fff;
	border: 0.7vw solid #69534a;
    color: #69534a;
}
#support .about_project_work .btn a:after {
    border-top: solid 2px #69534a;
    border-right: solid 2px #69534a;
}

#support .about_project_work .about_project_work_other {
	background-color: #fff;
	padding: 10vw 5vw 5vw;
	margin: 8vw 5vw 1vw;
	border-radius: 8vw;
	position: relative;
}
#support .about_project_work .about_project_work_other .ex_ic {
	position: absolute;
	width: 40%;
	padding: 0.5vw 0;
	background-color: #fff;
	color: #d00e31;
	border: 0.7vw solid #d00e31;
	border-radius: 2vw;
	font-size: 4.8vw;
	top: -2vw;
	left: -1vw;
}
#support .about_project_work .about_project_work_other figure {
	width: 60%;
	margin: 0 auto;
}
#support .about_project_work .about_project_work_other_txt p:not(.about_project_work_ttl) {
	font-weight: 500;
}
#support .about_project_work  .about_project_work_ttl {
	font-size: 4.8vw;
}
#support .about_project_work .about_project_work_other .article_link {
	text-align: right;
	margin-top: 2vw;
}
#support .about_project_work .about_project_work_other .article_link a {
	font-size: 4.8vw;
	color: #d00e31;
	display: inline-block;
	position: relative;
	border-bottom: 0.7vw solid #d00e31;
	padding-right: 6vw;
}
#support .about_project_work .about_project_work_other .article_link a:after {
    content: '';
    width: 2vw;
    height: 2vw;
    border: 0;
    border-top: solid 2px #d00e31;
    border-right: solid 2px #d00e31;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 2vw;
    bottom: 0;
    margin: auto;
}




@media screen and (min-width: 768px), print {
.about_project_work {
	margin-top: 60px;
	padding-bottom: 10px;
}
/*見出しリボン*/
#support .work_ribbon {
	height: 70px;
        line-height: 70px;
        padding: 0 80px;
        font-size: 36px;
}
#support .work_ribbon::before {
    left: -14px;
    border-width: 35px 0px 35px 15px;
}
#support .work_ribbon::after {
    right: -14px;
    border-width: 35px 15px 35px 0px;
}
#support .about_project_work p {
	text-align: center;
	margin: 30px auto 0;
}
#support .about_project_work .about_project_work_first {
	margin: 140px auto 50px;
	width: 80%;
	max-width: 1000px;
	border-radius: 50px;
	padding: 250px 50px 50px;
}
#support .about_project_work .about_project_work_first figure{
	top: -100px;
	max-width: 700px;
	left: calc(50% - 350px);
}
#support .about_project_work .btn a {
	border: 3px solid #69534a;
}
#support .about_project_work .about_project_work_other {
	padding: 80px 50px 50px;
	margin: 50px auto 20px;
	width: 80%;
	max-width: 1000px;
	border-radius: 60px;
}
#support .about_project_work .about_project_work_other .ex_ic {
	position: absolute;
        width: 260px;
        padding: 5px 0;
        border: 3px solid #d00e31;
        border-radius: 10px;
        font-size: 30px;
        top: -20px;
        left: 40px;
}
#support .about_project_work .about_project_work_other_flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
}

#support .about_project_work .about_project_work_other_flex p{
	text-align: left;
}
#support .about_project_work .about_project_work_other figure {
	width: 30%;
	margin: 0 30px 0 0;
}
#support .about_project_work .about_project_work_other_txt {
	width: 65%;
	margin: 0;
}
#support .about_project_work .about_project_work_ttl {
	font-size: 30px;
	margin-top: 0;
}
#support .about_project_work .about_project_work_other .article_link {
	margin-top: 20px;
}
#support .about_project_work .about_project_work_other .article_link a {
	font-size: 30px;
	border-bottom: 3px solid #d00e31;
	padding-right: 40px;
}
#support .about_project_work .about_project_work_other .article_link a:after {
    content: '';
    width: 20px;
    height: 20px;
    border: 0;
    border-top: solid 2px #d00e31;
    border-right: solid 2px #d00e31;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 13px;
    bottom: 0;
    margin: auto;
}		
#support .area_btm {
    height: 100px;
}	
		
}


/*-------------------------------------------------------------------------------------------------------------------------------- 

あんしん・安全 safety(mirai/safety/)
好きを見つける favorite(mirai/favorite/)
未来をつくる creation(mirai/creation/)

--------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------- 

　　　KV

--------------------------------*/
.kv_common .kv_wrap {
	display: flex;
	flex-wrap: wrap;
}
#safety .kv_common .kv_wrap {
	background-color: #227600;
}
#favorite .kv_common .kv_wrap {
	background-color: #ce1d46;
}
#creation .kv_common .kv_wrap {
	background-color: #0e78c9;
}

.kv_common .kv_wrap_contents {
	width: 60%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.kv_common .kv_wrap_contents .kv_txt {
	color: #fff;
	font-size: 6.1vw;
}
.kv_common .kv_img {
	width: 40%;
}
.kv_common .kv_img img {
	border-radius: 20vw 0 0 0;
}
@media screen and (min-width: 768px), print {
.kv_common .kv_wrap_contents {
	width: 60%;
}
.kv_common .kv_wrap_contents .kv_txt {
	font-size: 4vw;
}
.kv_common .kv_img {
	width: 40%;
}	
.kv_common .kv_img img {
	width: 100%;
        height: 100%;
        object-fit: cover;
	border-radius: 100px 0 0 0;
}	
}
@media screen and (min-width: 1024px), print {
	.kv_common .kv_wrap_contents .kv_txt {
	font-size: 46px;
}
}




/*-------------------------------- 

　　　declaration

--------------------------------*/
.declaration_bg {
	background-repeat: no-repeat;
	background-size: 100%;
	padding: 15vw 5vw;
}
#safety .declaration_bg {
	background-image: url("../img/safety/safety_bg_sp.png");
}
#favorite .declaration_bg {
	background-image: url("../img/favorite/favorite_bg_sp.png");
}
#creation .declaration_bg {
	background-image: url("../img/creation/creation_bg_sp.png");
}
.declaration.-common {
	background-color: #fff;
	border-radius: 10vw;
	padding: 8vw 5vw;
	line-height: 1.8;
}
.declaration.-common .declaration_ttl{
	text-align: center;
	margin-bottom: 5vw;
}
.declaration.-common figure {
	margin-top: 2vw;
}

#safety .declaration_ttl,
#safety .about_project_ttl span {
	color: #227600;
}
#favorite .declaration_ttl,
#favorite .about_project_ttl span{
	color: #ce1d46;
}
#creation .declaration_ttl,
#creation .about_project_ttl span{
	color: #0e78c9;
}
@media screen and (min-width: 768px), print {
.declaration_bg {
	padding: 80px 50px;
}
#safety .declaration_bg {
	background-image: url("../img/safety/safety_bg_pc.png?260325");
}
#favorite .declaration_bg {
	background-image: url("../img/favorite/favorite_bg_pc.png?260325");
}
#creation .declaration_bg {
	background-image: url("../img/creation/creation_bg_pc.png?260325");
}
.declaration.-common {
	max-width: 800px;
        margin: 0 auto;
        padding: 50px 70px;
        border-radius: 50px;
	text-align: center;
}
.declaration.-common .declaration_ttl{
	margin-bottom: 20px;
}
.declaration.-common figure {
	margin-top: 30px;
}	
}

/*-------------------------------- 

　　　施策・取組み

--------------------------------*/
.about_project_contents {
	padding: 8vw 0 0;
}
.about_project_contents_txt01 {
	padding: 0 5vw;
}
.about_project .about_project_ttl {
	font-size: 6.1vw;
    text-align: center;
    margin: 0 auto 8vw;
    position: relative;
}
.about_project .about_project_ttl span {
	font-size: 4.8vw;
}
.about_project .about_project_ttl::after {
	content: "";
	position: absolute;
	bottom: -2vw;
	left: 43%;
	width: 13%;
	height: 1vw;
	background-image: linear-gradient(90deg, #07b248 32%, #ff7c9c 32%, #ff7c9c 65%, #00a3e3 65%);
}
.about_project_contents_wrap ul {
	margin: 10vw 5vw 5vw;
}
.about_project_contents_wrap ul li{
	background-color: #f7f7f7;
	margin-top: 8vw;
	border-radius: 5vw;
	
}
.about_project_contents_wrap ul li img {
	border-radius: 5vw 5vw 0 0;
}
.about_project_contents_wrap ul li .txt_wrap {
	padding: 5vw;
    height: auto;
    font-size: 4.2vw;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: normal;
	justify-content: center;
}
.about_project_contents_wrap ul li .txt_wrap_ic {
	font-size: 3.7vw;
	background-color: #fff;
	border: 2px solid #69534a;
	padding: 0.1vw 2vw;
	width: 20%;
	text-align: center;
	border-radius: 1vw;
	margin-bottom: 2vw;
}
.about_project_contents_wrap ul li .txt_wrap_ttl {
	text-align: center;
    font-size: 5.3vw;
    margin-bottom: 4vw;
}
.about_project_contents_wrap ul li .txt_wrap p:not(.txt_wrap_ttl) {
	font-weight: 500;
}
.about_project_contents_wrap ul li .txt_wrap p {
	width: 100%;
}
.about_project_contents_wrap ul li .txt_wrap .btn a {
    background-color: #fff;
    border: 0.7vw solid #69534a;
    padding: 2vw;
    color: #69534a;
    width: 80%;
    margin: 5vw auto 0;
}
.about_project_contents_wrap ul li .txt_wrap .btn a:after {
    border-top: solid 2px #69534a;
    border-right: solid 2px #69534a;
}

.area_btm.-bg_wh {
	background-color: #fff;
}
.article_nav_breadcrumb.-bg_gray {
	background-color: #f7f7f7;
}

@media screen and (min-width: 768px), print  {
.about_project_contents {
	padding: 80px 0 0;
}
.about_project_contents_txt01 {
	padding: 0 30px;
	max-width: 1000px;
        margin: 0 auto;
        text-align: center;
}
.about_project .about_project_ttl {
	font-size: 46px;
    margin: 0 auto 70px;
	}
.about_project .about_project_ttl span {
	font-size: 30px;
}
.about_project .about_project_ttl::after {
	bottom: -20px;
	left: 43%;
	height: 5px;
}
.about_project_contents_wrap ul {
	max-width: 1200px;
    margin: 50px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.about_project_contents_wrap ul li{
	margin: 0 10px 40px;
	border-radius: 30px;
	width: calc(33.333% - 20px);
	display: flex; 
    flex-direction: column;
    background: #f9f9f9;
}
.about_project_contents_wrap ul li img {
	border-radius: 30px 30px 0 0;
}
.about_project_contents_wrap ul li .txt_wrap {
    display: flex; 
    flex-direction: column;
    flex-grow: 1;
    font-size: 18px;
	position: relative;
	padding: 24px;
    padding-top: 30px;
}
.about_project_contents_wrap ul li .txt_wrap_ic {
	position: absolute;
    top: 10px; 
    left: 16%;  
    transform: translateX(-50%);
	display: inline-block;
    padding: 1px;
    background-color: #fff; 
    color: #69534a; 
    font-size: 1.4vw;
    font-weight: bold;
    border-radius: 5px;  
	white-space: nowrap; 
}
	
.about_project_contents_wrap ul li .txt_wrap p:not(.txt_wrap_ttl) {
    flex-grow: 1;
}
.about_project_contents_wrap ul li .txt_wrap .btn {
    margin-top: auto;
}
.about_project_contents_wrap ul li .txt_wrap_ttl {
	text-align: center;
    font-size: 19px;
    margin-bottom: 15px;
	min-height: 3em; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.about_project_contents_wrap ul li .txt_wrap p:not(.txt_wrap_ttl) {
    flex-grow: 1; 
    margin-bottom: 20px;
}
.about_project_contents_wrap ul li .txt_wrap p {
	width: 100%;
}
.about_project_contents_wrap ul li .txt_wrap .btn a {
    border: 2px solid #69534a;
    padding: 10px;
    width: 90%;
	max-width: 230px;
    margin: 10px auto 0;
	font-size: 20px;
}
.about_project_contents_wrap ul li .txt_wrap .btn a:after {
    border-top: solid 2px #69534a;
    border-right: solid 2px #69534a;
	right: 15px;
}	
}
@media screen and (min-width: 1024px), print {
.about_project_contents_wrap ul li .txt_wrap .btn a:after {
	right: 30px;
}	
.about_project_contents_wrap ul li .txt_wrap_ttl {
        font-size: 22px;
    }
.about_project_contents_wrap ul li .txt_wrap_ic {
	font-size: 14px;
	top: 13px;
	}
.about_project_contents_wrap ul li .txt_wrap .btn a {
    font-size: 22px;
}
.about_project_contents_wrap ul li {
        margin: 0 20px 40px;
        width: calc(33.333% - 40px);
    }
}