@charset "UTF-8";
/*
 * cmn_layout.css
 */

/* !HTML5 elements
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
	display: block;
}
/* !Reseting
---------------------------------------------------------- */
body {
	width : 100%;
	background: #fff;
	font-family : 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo ,"ＭＳ Ｐゴシック", Osaka, sans-serif;
	font-weight : 300;
	letter-spacing : 0.1rem;
	font-size: 100%;
	/* font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo ,"ＭＳ Ｐゴシック", Osaka, sans-serif; */
	color: #000;
	margin: 0;
  overflow: hidden;
  position: relative;
    transition: left 0.3s ease-in-out;
}
body.panel-open	{
	left: -250px;
}
body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, figure, figcaption {
	margin: 0;
	padding: 0;
}
input, textarea {
	margin: 0;
	font-size: 100%;
}
label {
	cursor: pointer;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 100%;
}
fieldset, img {
	border: 0;
}
img {
	vertical-align: top;
}
@media screen and (max-width: 767px) {
	img {
		max-width: 100%;
	}
}

address, caption, cite, code, dfn, em, th, var {
	font-style: normal;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
caption, th {
	text-align: left;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
q:after, q:before {
	content: '';
}
a, input {
	outline: none;
}
strong {
	font-weight: normal;
	color: #de4730;
}
input, textarea {
	border-radius: 0;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo ,"ＭＳ Ｐゴシック", Osaka, sans-serif;
}
input[type="button"], input[type="submit"] {
	-webkit-appearance: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}
abbr, acronym {
	border: 0;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
p + p {
	margin-top: 1em;
}
p + p.image,
p + p.date,
p + p.link {
	margin-top: 0;
}

/* !Layout
---------------------------------------------------------- */
html {
	overflow-y: scroll;
}

@media screen and (min-width: 767px) {
	html {
		min-width:100%;
	}
}
@media print {
	html,
	html body {
		*zoom: 0.65;
	}
}
/* PC/SP
---------------------------------------------------------- */
.only-PC {
	display: block;
}
@media screen and (max-width: 767px) {
	.only-PC {
		display: none;
	}
}
.only-SP {
	display: none;
}
@media screen and (max-width: 767px) {
	.only-SP {
		display: block;
	}
}



/* ---------- spNav ---------- */
#spNav	{
	background : #FFF;
	height : 60px;
}
@media screen and (min-width: 768px) {
	#spNav {
		display : none;
	}
}
#spNav	#logo	{
	position : relative;
	padding : 0.4rem 0;

}
#spNav	#logo img{
	width : 46%;
	margin-left : 26%;
}
#spNav ul.drawer-menu li {
	display : block;
	width : 265px;
	height : 40px;
	background : #FFF;
	text-indent : 20px;
	font-size : 14px;
	line-height : 40px;
	font-weight : 900;
}
#spNav ul.drawer-menu li a {
	text-decoration: none;
	display : block;
	width : 265px;
	height : 40px;
	color : #222;
}
#spNav ul.drawer-menu li a:hover {
	display: block;
	background : #eb2387;
	color : #FFF;
}
#spNav ul.drawer-menu li.sns {
	height : 50px;
}
#spNav ul.drawer-menu li.sns img	{
	vertical-align : middle;
	margin-right : 0.8rem;
}
#spNav ul.drawer-menu li.sns a:hover	{
	background : #FFF;
	color : #eb2387;
}


/* ---------- megamenu ---------- */
.menu-container {
	width : 1280px;
	height : 70px;
	margin : 0 auto;
	background : #FFF;
  }
@media screen and (max-width: 767px) {
	.menu-container{
		display : none;
	}
}
.menu-container #logo	{
	float : left;
	position : relative;
	top : 14px;
	left : 14px;
}

.gNav > ul#main {
	top : 14px;
	float : right;
    margin: 8px 28px 0 0;
    list-style: none;
    padding: 0;
    position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.gNav > ul#main > li {
      padding: 0;
      margin : 0 2.4rem 0 0;
}
.gNav > ul#main > li a {
      text-decoration: none;
      display: block;
      color : #000;
      font-size : 14px;
	font-weight : 900;
}
.gNav > ul#main > li a:hover {
      color : #eb2387;
}
.gNav > ul#main > li.tw {
      padding: 0;
      margin :0;
      width : 31px;
      height : 31px;
      background-image : url(../img/logo_sns_tw.png);
      background-repeat : no-repeat;
      background-size : contain;
}
.gNav > ul#main > li.tw a	{
	display : block;
	width : 31px;
      height : 31px;
}
.gNav > ul#main > li.yt {
      padding: 0;
      margin :1px 0.8em;
      width : 29px;
      height : 29px;
      background-image : url(../img/logo_sns_yt.png);
      background-repeat : no-repeat;
      background-size : contain;
}
.gNav > ul#main > li.yt a	{
	display : block;
	width : 29px;
      height : 29px;
}
.gNav > ul#main > li.fb {
      padding: 0;
      margin :0;
      width : 31px;
      height : 31px;
      background-image : url(../img/logo_sns_fb.png);
      background-repeat : no-repeat;
      background-size : contain;
}
.gNav > ul#main > li.fb a	{
	display : block;
	width : 31px;
      height : 31px;
}
.gNav > ul#main > li.tw a:hover,
.gNav > ul#main > li.yt a:hover,
.gNav > ul#main > li.fb a:hover	{
	background: rgba(255,255,255,0.5);
}


/* !container
---------------------------------------------------------- */
.container	{
	width : 1280px;
	margin : 0 auto;
}
.container > .inner	{
	margin : 0 auto;
	width : 1200px;
}
.inner > .inBox	{
	margin : 0 auto;
	width : 1100px;
}
.line_rb	{	 /* グラデーションの区切り線 */
	width : 100%;
	height : 5px;
background: rgb(235,35,135); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(235,35,135,1) 0%, rgba(60,200,245,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(235,35,135,1) 0%,rgba(60,200,245,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(235,35,135,1) 0%,rgba(60,200,245,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb2387', endColorstr='#3cc8f5',GradientType=1 ); /* IE6-9 */
}

@media screen and (max-width: 767px) {
	.container {
		width: 100%;
	}
	.container > .inner {
		width: 100%;
	}
	.inner > .inBox	{
		width: 96%;
	}
}



/* 見出し */
h1	{
	text-align : center;
	margin : 6rem auto;
}
h2	{
	font-size : 1.4rem;
	padding-top : 1rem;
}
h2:before	{
	content:"";
	display:inline-block;
	width:37px;
	height:40px;
	background:url(../img/icon_sby.png) no-repeat 0 top;
	background-size:contain;
	vertical-align: middle;
	margin : 0 0.8rem;
}
@media screen and (max-width: 767px)	{
	h1 img	{
		width : 90%;
	}
	h2	{
		font-size : 1rem;
		padding-top : 1rem;
	}
	h2:before	{
		width:30px;
		height:32px;
		margin : 0 0.6rem;
	}
}
/* コンテンツ
---------------------------------------------------------- */
/* Message */
.foryou	{
	font-size : 7rem;
	font-weight : 900;
	line-height : 280%;
	color: #eb2387;
  background: -webkit-linear-gradient(0deg, #eb2387, #41c4f2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.youtube_outer{
	width: 60%;
  padding-top: 35%;
  position: relative;
  top: 0;
  left: 0;
	margin: 0 auto;
}
.youtube_outer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
@media screen and (max-width: 767px)	{
	.foryou	{
		font-size : 2rem;
	}
}
@media screen and (max-width: 767px)	{
	video {
 		 width: 100%;
	}
}
.msgBox	{
	display: block;
	min-height: 1%;
}
.msgBox:after	{
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}
.msgBox > .photo	{
	width : 300px;
	float : left;
}
.msgBox > .msgDtl	{
	width : 800px;
	float : right;
}
.msgDtl > .msgDtlin	{
	display: flex;
	-webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
	 margin-bottom : 1rem;
}
.ph_name	{
	font-size : 2rem;
	line-height : 180%;
}
.msgDtl > h3	{
	font-size : 2rem;
	color : #46c0ee;
	margin-bottom : 1.4rem;
}
.msgDsc > p,
.profileTx	{
	font-size : 0.8rem;
	letter-spacing : none;
}
.btn_PDF	{
	margin-top : 1rem;
	background-color:rgba(235,35,135,1.0);
	color : #FFF;
	font-size : 1.1rem;
	line-height : 240%;
	text-align : center;
	text-indent : 2.4rem;
	background-image: url(../img/icon_PDF.png);
	background-repeat : no-repeat;
	background-position : 28% 50%;
}
.btn_PDF a	{
	display: block;
	color : #FFF;
	text-decoration : none;
}
.btn_PDF a:hover	{
	background-color:rgba(256,256,256,0.1);
}
.movie	{
	margin-left : 1.4rem;
}
.prf_name	{
	display : none;
}
@media screen and (max-width: 767px) {
	.msgBox > .photo	{
		width : 45%;
		margin-right : 3%;
	}
	.msgBox > .msgDtl	{
		width : 50%;
	}
	.ph_name	{
		font-size : 1.4rem;
		line-height : 180%;
	}
	.msgBox > h3	{
		font-size : 1.8rem;
		color : #46c0ee;
		margin-bottom : 1.4rem;
		padding-left : 0.4rem;
		line-height : 120%;
	}
	.btn_PDF	{
		margin : 0.5rem auto 2rem auto;
		width : 80%;
		text-indent : 2.8rem;
		background-position : 18% 50%;
	}
	.movie	{
		margin : 0 auto;
		text-align: center;
	}
	.prf_name	{
		display : block;
		font-weight : 900;
		margin-top : 0.5rem;
	}
}


/* Help */
.box_help	{
	border-left : 15px solid #eb2387;
	border-right : 15px solid #49beed;
	text-align : center;
	margin : 2rem 0 8rem 0;
}
.box_help:before,
.box_help:after	{
	content:"";
	display:block;
	height:15px;
	width:100%;
	background: rgb(235,35,135); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(235,35,135,1) 0%, rgba(60,200,245,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(235,35,135,1) 0%,rgba(60,200,245,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(235,35,135,1) 0%,rgba(60,200,245,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb2387', endColorstr='#3cc8f5',GradientType=1 ); /* IE6-9 */
}
.box_help dl	{
	margin : 6rem 0 2rem 0;
}
.box_help dt	{
	font-size : 2.2rem;
}
.box_help dd	{
	padding : 1rem 0;
}
.box_help dd a	{
	font-size : 3.2rem;
	text-decoration : none;
	color : #eb2387;
}
.box_help dl .kakko,
.box_help dl .kakko_78310	{
	font-size : 1.4rem;
	letter-spacing : none;
}
.box_help dl .kakko_78310	{
	margin-left : 12rem;
}
/* .box_help dd a	{  /* PC表示時の電話非対応 */
		pointer-events: none;
	} */
.box_help p	{
	font-size : 1.8rem;
}
.box_help p a	{
	font-size : 2.2rem;
	text-decoration : none;
	color : #eb2387;
	border-bottom : solid 1px #eb2387;
}

@media screen and (max-width: 767px)	{
	.box_help	{
		border-left : 8px solid #eb2387;
		border-right : 8px solid #49beed;
	}
	.box_help:before,
	.box_help:after	{
		height:8px;
	}
	.box_help dl	{
		margin : 3rem 0 1rem 0;
		letter-spacing : none;
	}
	.box_help dt	{
		font-size : 0.9rem;
		line-height : 110%;
	}
	.box_help dl .kakko,
	.box_help dl .kakko_78310	{
		font-size : 1.2rem;
		line-height : 100%;
	}
	.box_help dl .kakko_78310	{
		margin-left : 10rem;
		margin-bottom : 3rem;
	}
	.box_help dt	{
		font-size : 1.6rem;
	}
	.box_help p	{
		font-size : 1.4rem;
	}
	.box_help p a	{
		font-size : 1.6rem;
	}
}


/* News */
ul.news	{
	border-top : solid 1px #000;
	margin : 2rem 0 8rem 0;
}
ul.news li	{
	border-bottom : solid 1px #000;
	padding : 1.6rem 0;
}
ul.news li .update	{
	display : inline-block;
	margin-right : 2rem;
}
ul.news li .icon_NEW:before	{
	content:"NEW!";
	display:inline-block;
	color : #eb2387;
	margin-left : 1rem;
}
@media screen and (max-width: 767px)	{
	ul.news li	{
		padding : 1.6rem 0.4rem 1.6rem 1.4rem;
	}
	ul.news li .update	{
		display : block;
		margin : 0 0 0.4rem -0.4rem;
	}
}


/* Friend */
ul#friend	{
	margin : 4rem 0 0 0;
}
ul#org	{
	margin : 0 0 6rem 0;
}
ul#org li div ul.local {
	display: flex;
	flex-wrap: wrap;
	font-size: 1.5rem;
}
ul#org li div ul.local li{
	margin: 0 0 0.5rem 2rem;
	width: 30%;
}
ul#org li div{
	margin-bottom: 0.4rem;
}
ul#friend:after,
ul#org:after,
ul#project:after	{
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}
ul#friend li,
ul#org li	{
	margin : 0 1.4rem 2rem 0;
	width: 100%
}
ul#friend li .posTitle,
ul#org li .posTitle,
ul#project li .posTitle	{
	text-align : center;
	font-size : 0.8rem;
	display: flex;
	align-items: center;
}
ul#friend li .posTitle,
ul#org li .posTitle	{
	margin-bottom : 1rem;
}
ul#project li .posTitle	{
	margin-bottom : 3rem;
}
ul#friend li .posTitle:before,
ul#friend li .posTitle:after,
ul#org li .posTitle:before,
ul#org li .posTitle:after,
ul#project li .posTitle:before,
ul#project li .posTitle:after	{
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #acacac;
	display: block;
}
ul#friend li .posTitle:before,
ul#org li .posTitle:before,
ul#project li .posTitle:before	{
	margin-right: 1rem;
}
ul#friend li .posTitle:after,
ul#org li .posTitle:after	{
	margin: 0 1.4rem 0 1rem;
}
ul#project li .posTitle:after	{
	margin: 0;
}
ul#project ul li	{
	float : left;
}
ul#friend li ul.unit,
ul#org li ul.unit{
	display: flex;
	justify-content: center;
}
ul#friend li ul.unit li,
ul#org li ul.unit li	{
	width : 241px;
}
ul#friend li ul.unit li:nth-child(even)	{
	margin-rgh : 2rem;
}
ul#friend li ul.unit li .fr_title	{
	font-size : 0.8rem;
	line-height : 120%;
	margin : .6rem 0 .4rem .1rem;
}
ul#friend li ul.unit li .fr_name,
ul#org li ul.unit li .fr_name	{
	font-size : 1.8rem;
}
ul#org li ul.unit li .fr_name	{
	line-height : 110%;
	margin-top : 0.4rem;
}
ul#org li ul.unit li img	{
	margin-bottom : 0.4rem;
}
ul#project li ul li	{
	width : 22%;
	margin-right : 4%;
	margin-bottom : 2rem;
	font-size : 1.8rem;
	line-height : 180%;
}
ul#project li ul li:nth-child(4),
ul#project li ul li:nth-child(8)	{
	margin-right : 0;
}
ul#project li ul li:after	{
	content: "";
	height : 5px;
	flex-grow: 1;
	display: block;
	background-position : 0 100%;
	background: rgb(235,35,135); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(235,35,135,1) 0%, rgba(60,200,245,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(235,35,135,1) 0%,rgba(60,200,245,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(235,35,135,1) 0%,rgba(60,200,245,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb2387', endColorstr='#3cc8f5',GradientType=1 ); /* IE6-9 */
}
ul.fr_logo	{
	margin : 8rem 0;
	display: flex;
	-webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
   align-items: center;
}
ul.fr_logo li	{
	margin : 0 3rem;
}
@media screen and (max-width: 767px)	{
	ul#friend,
	ul#org,
	ul#project	{
		margin : 2rem auto 0 auto;
		width : 96%;
	}
	ul.fr_logo{
	display: block;
	}
	ul.fr_logo li{
	text-align: center;
	margin-bottom: 60px;
	}
	ul#friend li,
	ul#org li	{
		margin : 0 0 2rem 0;
	}
	ul#org li div ul.local li{
		margin: 0 0 0.5rem 2rem;
		width: 100%;
	}
	ul#friend li .posTitle:after,
	ul#org li .posTitle:after	{	/* 役割見出しの右側の背景線の長さ調整 */
		margin: 0 0 0 1rem;
	}
	ul#friend li ul.unit li,
	ul#org li ul.unit li	{
		width: 48%;
    max-width: 241px;
		margin :0 2%;
	}

	ul#friend li:nth-child(2) ul	{	/* liが１つの場合の個別指定 */
		width: 48%;
		max-width : 241px;
		margin : 0 auto 4rem;
	}
	ul#friend li:nth-child(2) ul li{	/* liが１つの場合の個別指定 */
		width : 100%;
		max-width: 241px;
		margin : 0;
	}
	ul#friend li ul.unit li .fr_title	{
		font-size : 0.6rem;
		width: 241px;
	}
	ul#org li ul.unit li .fr_name,
	ul#org li div ul.local	{
		font-size : 1.2rem;
	}
	ul#project li ul li	{
		width : 46%;
		margin-right : 0;
		margin-bottom : 2rem;
		font-size : 1.6rem;
		line-height : 180%;
	}
	ul#project li ul li:nth-child(odd)	{
		margin-right : 8%;
	}
}



/* Contact */
.btn_contact	{
	margin : 0 auto 8rem auto;
	background-color:rgba(235,35,135,1.0);
	color : #FFF;
	font-size : 1.8rem;
	line-height : 500%;
	text-align : center;
	width : 50%;
	position: relative;
	cursor: pointer;
	display: inline-block;
}
.fukidashi	{
	display: none;
    position: absolute;
    padding: 10px;
    font-size: 12px;
    line-height: 1.6em;
    color: #fff;
    border-radius: 5px;
    background: #00b8ee;
    width: 200px;
}
.fukidashi:before {
    content: "";
    position: absolute;
    top: -24px;
    right: 60%;
    border: 15px solid transparent;
    border-top: 15px solid #00b8ee;
    margin-left: -15px;
    transform: rotateZ(180deg);
}
.btn_contact:hover .fukidashi{
    display: inline-block;
    top: 150px;
    left: 20px;
}
.btn_contact a	{
	display: block;
	color : #FFF;
	text-decoration : none;
}
.btn_contact a:hover	{
	background-color:rgba(256,256,256,0.1);
}
text:hover + .fukidashi {
  display: block;
}
@media screen and (max-width: 767px)	{
	.logo_sby_tx_s	{
		width : 84%;
		margin : 0 auto;
	}
	.btn_contact	{
	margin : 2rem auto 8rem auto;
	font-size : 1.4rem;
	line-height : 400%;
	width : 84%;
	}
	.btn_contact:hover .fukidashi{
	    top: 100px;
	}
}



/* !footer
---------------------------------------------------------- */
footer {
	padding : 4rem 0 0 0;
	background : #00b8ee;
	color : #FFF;
}
footer ul	{
	margin : 0 auto 4rem auto;
	width : 60%;
	text-align: justify;
	&:before,
    	&:after {
	    content: "";
		display: table;
	}
	&:after {
		clear: both;
    	}
}
footer ul li	{
	width : 15%;
	display: inline-block;
	text-align : center;
	font-size : 1rem;
}
footer ul li a	{
	color : #FFF;
	text-decoration : none;
}
footer ul li a:hover	{
	color : #eb2387;
	text-decoration : none;
}
footer #copyright	{
	text-align : center;
}
footer #copyright small	{
	font-size : 0.8rem;
	line-height : 300%;
	letter-spacing : 0.1rem
}
@media screen and (max-width: 767px) {
	footer {
		padding : 2rem 0 0 0;
	}
	footer ul{
		margin : 0 auto 2rem auto;
		width : 98%;
		height : auto;
	}
	footer ul li	{
		width : 15%;
		font-size : 0.8rem;
	}
	footer #copyright small	{
		font-size : 0.6rem;
	}
}



#page-top	{
	position: fixed;
	bottom: 1.4rem;
	right: 2rem;
	font-size : 0.8rem;
	font-weight : 900;
}
#page-top a	{
	display : block;
	text-decoration : none;
	color : #000;
}
#page-top a:hover {
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}