@charset "utf-8";



#vidual-area,
#vidual-area #slider-area,
#slider{
    min-height: 1100px !important;
}

#vidual-area{
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 6%;
    padding-top: calc(6% + 80px);
    margin: 0;
    display: grid;
    grid-template-rows: auto auto auto; /* 3つの行を定義 */
    grid-template-columns: 1fr 1fr 1fr 1fr; /* 2列構成 */
    align-content: center; /* 垂直方向の中央揃え */
    justify-items: center; /* 水平方向の中央揃え */
    gap: 30px; /* グリッド間の隙間 */
}

#vidual-area #slider-area {
    position: absolute;
    top:0;
    left: 0;
    width:100%;
    z-index: -1;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

#slider {
    width: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

/* Avoid Chrome to see Safari hack */
@supports (-webkit-touch-callout: none) {
  #slider {
    /* The hack for Safari */
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
  }
}
	
	
	
	
	

#vidual-area h2 {
    font-size: 18px;
    line-height: 1em;
    color: #b2eef3;
    grid-area: h2;
}

.nsj_font_01 {
	font-weight: 700;
	font-family: 'Noto Serif JP', serif;
    font-size: 4.8em;
    padding-left: 0.8em;
	line-height: 120%;
	letter-spacing: 0;
}

.nsj_font_02 {
    font-weight: 700;
    font-family: 'Noto Serif JP', serif;
    font-size: 4.2em;
    line-height: 110%;
    letter-spacing: 4px;
    display: block;
    margin-top: 4px;
    padding-left: 0.8em;
}

.nsj_font_03 {
    grid-area: p;
	display: block;
	font-family: 'Murecho', sans-serif;
	font-weight: 400;
	font-size: 2em;
    line-height: 160%;
    color: #fff;
	text-shadow: 0 0 5px #000;
    margin-bottom: 4px;
}

#vidual-area h2 {
    grid-row: 1; /* 1行目に配置 */
    grid-column: 1 / 5; /* 全幅（2列分）を占有 */
    text-align: center; /* テキストを中央揃え */
}

#vidual-area .nsj_font_03 {
    grid-row: 2; /* 2行目に配置 */
    grid-column: 1 / 5; /* 全幅（2列分）を占有 */
    text-align: center; /* テキストを中央揃え */
}

.mv_on_logo {
    grid-area: logo;
	display: flex;
    gap: 12px;
    align-items: center;
}

.mv_on_logo a:hover img {
	filter: brightness(1.3);
}



@media screen and (max-width:1600px) {

	.nsj_font_01 {
        font-size: 3.8vw;
	}

	.nsj_font_02 {
	    letter-spacing: 0;
        font-size: 5.2vw;
		line-height: 120%;
	}

	.nsj_font_03 {
        font-size: 2vw;
	}
}

@media screen and (max-width:1024px) {

	#vidual-area{
	    padding: 94px 6% 6%;
	}
}


@media screen and (max-width:980px) {

	#vidual-area{
	    padding: 124px 4% 4%;
	    grid-template-columns: auto auto;
	    gap:4%;
	}
		.nsj_font_01 {
        font-size: 6vw;
	}

	.nsj_font_02 {
        font-size: 6vw;
	}

	.nsj_font_03 {
        font-size: 3vw;
	}
	
	
}


@media screen and (max-width:600px) {

	#vidual-area {
	    grid-template-rows: auto auto auto; /* 4つの行を定義 */
	    grid-template-columns: 1fr; /* 1列構成 */
		gap: 2%;
	}

	#vidual-area #slider-area {
	    width:100%;
	    height: 100vh;
	}

	.mv_on_logo {
		justify-content: flex-end;
		gap: 8px;
	}

	.mv_on_logo img {
		max-height: 12vw;
	}
}


@media screen and (max-width:480px) {

	.nsj_font_01 {
        font-size: 28px;
	}

	.nsj_font_02 {
        font-size: 28px;
	}

	.nsj_font_03 {
        font-size: 14px;
	}
}

@media screen and (max-height:340px) {

	#vidual-area{
	    padding:94px 4% 4vh;
    }


}

#main-area {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
	height: auto;
	overflow: hidden;
}

/* #sustana */

#sustana {
	clear: both;
	display: block;
	position: relative;
	padding: 0 0 80px 0;
	margin: 0 0 0 0;
	overflow: hidden;
}

.sustana_top {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
	height: 320px;
	/*background: url(../images/sustana_top_bg.jpg);*/
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	z-index: 1;
}

.sustana_top_inner {
	display: block;
	position: relative;
	padding: 84px 0 0 0;
	margin: 0 auto 0 auto;
	width: 95%;
	max-width: 1060px;
}

.sustana-h1 {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 2.5%;
	font-size: 4.8em;
	line-height: 1.1em;
	color: #fff;
	font-family: 'Open Sans', 'Noto Sans Japanese', sans-serif;
	font-weight: 700;
	letter-spacing: -3px;
}



.sustana_inner {
	display: block;
	position: relative;
	padding: 70px 0 0 0;
	margin: -140px auto 0 auto;
	width: 90%;
	max-width: 1060px;
	height: auto;
	min-height: 380px;
	background: #fff;
	z-index: 2;
}

.sustana_title {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	text-align: center;
	font-size: 2.6em;
	line-height: 1.1em;
	color: #70ab59;
	font-family: 'Noto Sans Japanese', sans-serif;
	font-weight: 700;
}

.sustana_title_line {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 16px auto 18px auto;
	width: 530px;
	height: 1px;
	border-bottom: 2px solid #4c8037;
}

.sustana_sub_title {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	text-align: center;
	font-size: 1.4em;
	line-height: 1.1em;
	color: #4c8037;
}

.sustana_lead {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 32px 0 0 0;
	text-align: center;
	font-size: 1.2em;
	line-height: 1.7em;
	color: #555;
}

.sustana_title br {
	display: none;
}

.sustana_sub_title br {
	display: none;
}



.sustana_work_area {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 auto 0 auto;
	width: 90%;
	max-width: 1200px;
	height: auto;
	overflow: hidden;
}

.sustana_work_area ul {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	list-style: none;
}

.sustana_work_area ul li {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 auto 0 auto;
	width: 33.33%;
	max-width: 400px;
	height: auto;
	float: left;
}



.sustana_work_img {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
	height: auto;
}

.sustana_work_img img {
	transform: scale(1);
	transition: .3s ease-in-out;
}

.sustana_work_img a:hover img {
  transform:scale(1.1,1.1);
  transition:1s all;
	/*transform:rotate(5deg) scale(1.2);*/
}

.mask {
    display: block;
    line-height: 0;
    overflow: hidden;
}



.sustana_work_txt {
	display: block;
	position: absolute;
	top: 14px;
	left: 12px;
	font-size: 2.8em;
	line-height: 1.1em;
	color: #fff;
	letter-spacing: -2px;
/*	font-weight: 700;*/
	font-family: 'Noto Sans Japanese', sans-serif;
	z-index: 2;
/*	  -webkit-text-stroke: 1px #4c8037;
	  text-stroke: 1px #4c8037;  */
}

.sustana_work_title {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 18px 0 8px 0;
	text-align: center;
	font-size: 2.3em;
	line-height: 1.2em;
	color: #4c8037;
	letter-spacing: -1px;
	/*font-family: "UD新ゴNT EL JIS2004 AP" ;*/
	font-family: 'Murecho', sans-serif;
	font-weight: 300;
}

.sustana_work_title a {
	color: #4c8037;
	text-decoration: none;
}

.sustana_work_title a:hover  {
	color: #4c8037;
	text-decoration: none;
}

.sustana_work_title span:hover {
	border-bottom: 1px solid #4c8037;
	padding-bottom: 2px;
}

.sustana_work_lead {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 12px 0 0 0;
	text-align: center;
	font-size: 1.1em;
	line-height: 1.7em;
	color: #0b2863;
	letter-spacing: -1px;
	font-weight: 900;
	font-family: 'Noto Sans Japanese', sans-serif;
}

#dx_banner{
    text-align: center;
    margin-top:4em;
}
#dx_banner a{
	display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 550px;
    gap: 20px;
    margin: 0 auto;
    font-size: 2em;
    color:#fff;
    background: url("../images/dx_banner.png") no-repeat center / cover;
    font-weight: 400;
	font-family: 'Noto Sans Japanese', sans-serif;
    padding: 0.5em 1em;
    border-radius: 5px;
    text-shadow: 5px 5px 40px #0a3ba1, -5px -5px 40px #0a3ba1;
    overflow: hidden;
    letter-spacing: 0.1em;
}
#dx_banner a:hover{
    opacity: 0.8;
}
@media only screen and (max-width: 1200px) {

	.sustana_work_txt {
		display: block;
		position: absolute;
		top: 14px;
		left: 12px;
		font-size: 2em;
		line-height: 1.1em;
		color: #fff;
		letter-spacing: -2px;
/*		font-weight: 700;*/
		font-family: 'Noto Sans Japanese', sans-serif;
		z-index: 2;
/*		  -webkit-text-stroke: 1px #4c8037;
		  text-stroke: 1px #4c8037;*/
	}

	.sustana_work_title {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 18px 0 0 0;
		text-align: center;
		font-size: 1.8em;
		line-height: 1.1em;
	}

	.sustana_work_lead {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 12px 18px 0 18px;
		text-align: center;
		font-size: 1.1em;
		line-height: 1.7em;
	}

	.sustana_work_lead br {
		display: none;
	}

}

@media only screen and (max-width: 768px) {


	.sustana-h1 {
		display: block;
		position: relative;
		padding: 24px 0 0 0;
		margin: 0 0 0 0;
		font-size: 3.4em;
		line-height: 1.1em;
		color: #fff;
		font-family: 'Open Sans', 'Noto Sans Japanese', sans-serif;
		font-weight: 700;
		letter-spacing: 0;
		text-align: center;
	}

	.sustana_title {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		text-align: center;
		font-size: 2.3em;
		line-height: 1.3em;
		color: #4c8037;
		font-family: 'Noto Sans Japanese', sans-serif;
		font-weight: 700;
	}
	
	.sustana_title_line {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 16px auto 18px auto;
		width: 80%;
		height: 1px;
		border-bottom: 2px solid #4c8037;
	}

	.sustana_sub_title {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		text-align: center;
		font-size: 1.4em;
		line-height: 1.3em;
		color: #4c8037;
	}

	.sustana_lead {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 32px 0 0 0;
		text-align: center;
		font-size: 1.2em;
		line-height: 1.7em;
		color: #555;
	}
		
	.sustana_lead br {
		display: none;
	}
	
	.sustana_work_area ul li {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 0 auto 50px auto;
		width: 80%;
		max-width: 400px;
		height: auto;
		float: none;
	}
	
}

@media only screen and (max-width: 520px) {

	#dx_banner a {
		font-size: 5vw;
		letter-spacing: 0;
		gap: 12px;
	}

	#dx_banner a .logo {
		max-width: 20vw;
	}

	.sustana_inner {
		display: block;
		position: relative;
		padding: 70px 0 0 0;
		margin: -140px auto 50px auto;
		width: 90%;
		max-width: 1060px;
		height: auto;
		min-height: 460px;
		background: #fff;
		z-index: 2;
	}
	
	.sustana_lead {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 32px 0 0 0;
		text-align: left;
		font-size: 1.3em;
		line-height: 2em;
		color: #555;
	}
	
	
	.sustana_title br {
		display: block;
	}
	
	.sustana_sub_title br {
		display: block;
	}
	
}
	
	
@media only screen and (max-width: 430px) {
	
	.sustana-h1 {
		display: block;
		position: relative;
		padding: 24px 0 0 0;
		margin: 0 0 0 0;
		font-size: 2.6em;
		line-height: 1.3em;
		color: #fff;
		font-family: 'Open Sans', 'Noto Sans Japanese', sans-serif;
		font-weight: 700;
		letter-spacing: 0;
		text-align: center;
	}

	.sustana_work_area ul li {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 0 auto 50px auto;
		width: 95%;
		max-width: 400px;
		height: auto;
		float: none;
	}
	
}










/* .philosophy */

.philosophy {
	display: block;
	position: relative;
	padding: 80px 0 80px 0;
	margin: 0 0 0 0;
	width: 100%;
	background: #f7f7f7 url(../images/philosophy_back.png) no-repeat center center;
}




.index-info01 {
	display: block;
	position: relative;
	padding: 0 0 40px 0;
	margin: 18px auto 40px auto;
	width: 90%;
	max-width: 1300px;
	height: auto;
	overflow: hidden;
}	

.index-info01-img {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 45%;
	max-width: 500px;
	height: auto;
	float: left;
}

.index-info01-img span {
	display: block;
	position: relative;
	padding: 8px 8px 0 8px;
	margin: 0 0 0 0;
	font-size: 1em;
	line-height: 1.6em;
	font-weight: 400;
	font-family: 'Noto Sans Japanese', sans-serif;
	color: #414141;
}

.index-info01-img img {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
	height: auto;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px; 
	border-radius: 8px;
}

.index-info01-txt {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 50px;
	width: 45%;
	max-width: 550px;
	float: left;
	text-align: right;
}

.index-info01-title {
	display: block;
	position: relative;
	padding: 0 0 24px 0;
	margin: 0 0 0 0;
	color: #415a8e;
	font-size: 2.2em;
	line-height: 1.4em;
	font-family: 'Open Sans', 'Noto Sans Japanese', sans-serif;
	font-weight: 700;
	letter-spacing: -0.2px;
}

.index-info01-title span {
	display: inline-block;
	position: relative;
	padding: 0 8px 0 0;
	margin: 0 0 0 0;
	bottom: -4px;
}

.index-info01-lead {
	display: block;
	position: relative;
	padding: 0 0 24px 0;
	margin: 0 0 0 0;
	color: #415a8e;
	font-size: 2.4em;
	line-height: 1.36em;
	font-weight: 400;
	font-family: 'Noto Sans Japanese', sans-serif;
}

.index-info01-line {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 15%;
	width: 85%;
	height: 2px;
	background: #415a8e;
}	
	
.index-info01-word {
	display: block;
	position: relative;
	padding: 36px 0 0 0;
	margin: 0 0 0 0;
	font-size: 1.4em;
	line-height: 1.8em;
	font-weight: 300;
	font-family: 'Noto Sans Japanese', sans-serif;
	color: #414141;
}

.index-info01-word span {
	display: none;
}





@media only screen and (max-width: 1200px) {
	
	.index-info01-img {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 0 5% 0 0;
		width: 30%;
		max-width: 500px;
		height: auto;
		float: left;
	}	

	.index-info01-txt {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		width: 65%;
		max-width: 650px;
		float: right;
		text-align: left;
	}

	.index-info01-title {
		font-size: 1.8em;
		letter-spacing: -0.2px;
	}
			
	.index-info01-line {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 0 5% 0 0;
		width: 95%;
		height: 2px;
		background: #415a8e;
	}	
	
}	
	
@media only screen and (max-width: 768px) {	
	
	.index-info01-title {
		font-size: 1.8em;
		letter-spacing: -0.2px;
	}

	.index-info01-lead {
		padding: 0 0 24px 0;
		font-size: 1.4em;
		line-height: 1.4em;
	}

	.index-info01-word {
		padding: 30px 0 0 0;
		font-size: 1.2em;
		line-height: 1.8em;
	}

}


@media only screen and (max-width: 768px) {	

	.index-info01-line {
		margin: 0 0 0 0;
		width: 100%;
	}

	.index-info01-word br {
		display: none;
	}

	.index-info01-word span {
		display: inline-block;
	}

}





.index-info02 {
	display: block;
	position: relative;
	padding: 0 0 40px 0;
	margin: 18px auto 50px auto;
	width: 90%;
	max-width: 1300px;
	height: auto;
	overflow: hidden;
}


.index-info02-img {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 45%;
	max-width: 500px;
	height: auto;
	float: right;
}	
	
.index-info02-img span {
	display: block;
	position: relative;
	padding: 8px 8px 0 8px;
	margin: 0 0 0 0;
	font-size: 1em;
	line-height: 1.6em;
	font-weight: 400;
	font-family: 'Noto Sans Japanese', sans-serif;
	color: #414141;
}

.index-info02-img img {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 100%;
	height: auto;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px; 
	border-radius: 8px;
}

.index-info02-txt {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 40px 0 0;
	width: 45%;
	max-width: 550px;
	float: right;
	text-align: left;
}
	
.index-info02-title {
	display: block;
	position: relative;
	padding: 0 0 24px 0;
	margin: 0 0 0 0;
	color: #415a8e;
	font-size: 2.4em;
	line-height: 1.2em;
	font-family: 'Open Sans', 'Noto Sans Japanese', sans-serif;
	font-weight: 700;
	letter-spacing: -0.2px;
}

.index-info02-title span {
	display: inline-block;
	position: relative;
	padding: 0 8px 0 0;
	margin: 0 0 0 0;
	bottom: -4px;
}

.index-info02-lead {
	display: block;
	position: relative;
	padding: 0 0 24px 0;
	margin: 0 0 0 0;
	color: #415a8e;
	font-size: 2.4em;
	line-height: 1.36em;
	font-weight: 400;
	font-family: 'Noto Sans Japanese', sans-serif;
}

.index-info02-line {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 15% 0 0;
	width: 85%;
	height: 2px;
	background: #415a8e;
}

.index-info02-word {
	display: block;
	position: relative;
	padding: 36px 0 0 0;
	margin: 0 0 0 0;
	font-size: 1.4em;
	line-height: 1.8em;
	font-weight: 300;
	font-family: 'Noto Sans Japanese', sans-serif;
	color: #414141;
}





@media only screen and (max-width: 1200px) {
	
	.index-info02-img {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 0 5% 0 0;
		width: 30%;
		max-width: 500px;
		height: auto;
		float: left;
	}	

	.index-info02-txt {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		width: 65%;
		max-width: 650px;
		float: right;
		text-align: left;
	}	
	
	.index-info02-title {
		font-size: 1.8em;
		letter-spacing: -0.2px;
	}

	.index-info02-line {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 0 5% 0 0;
		width: 95%;
		height: 2px;
		background: #415a8e;
	}	
	
}


@media only screen and (max-width: 768px) {


	.index-info02-title {
		font-size: 1.8em;
		letter-spacing: -0.2px;
	}
	
	.index-info02-lead {
		padding: 0 0 24px 0;
		color: #415a8e;
		font-size: 1.4em;
		line-height: 1.4em;
	}
	
	.index-info02-word {
		padding: 30px 0 0 0;
		font-size: 1.2em;
		line-height: 1.8em;
	}

}


@media only screen and (max-width: 768px) {	

	.index-info02-line {
		margin: 0 0 0 0;
		width: 100%;
	}
	
	.index-info02-word br {
		display: none;
	}

}






@media only screen and (max-width: 430px) {	

	.philosophy {
		display: block;
		position: relative;
		padding: 30px 0 40px 0;
		margin: 0 0 0 0;
		width: 100%;
    	background-size: 120%;
	}

	.index-info01,
	.index-info02 {
		display: block;
		position: relative;
		padding: 0 0 20px 0;
		margin: 18px auto 18px auto;
		width: 85%;
		height: auto;
		overflow: hidden;
	}

	.index-info01-img,
	.index-info02-img {
		display: none;
	}
	
	.index-info01-txt,
	.index-info02-txt {
		display: block;
		position: relative;
		padding: 0 0 0 0;
		margin: 0 auto 0 auto;
		width: 100%;
		float: none;
		text-align: left;
	}

}







/* float_area */

.float_area {
    grid-area: float;
	display: block;
	padding:0;
	margin: 0;
	background-color: rgba(235, 232, 227,0.9);
	border-radius: 10px;
	z-index: 900;
	box-shadow: 0 0 34px 0px rgba(0, 0, 0, 0.4);
    max-width: 340px;
}

.float_area {
    grid-row: 3; /* 2行目に配置 */
    margin: 0 auto; /* 左右の中央揃え */
}

.float_area.fadeLeftTrigger{
    grid-column: 1; /* 左側に配置 */
    margin: 0 0 0 auto;
}

.float_area.fadeCenterTrigger{
    grid-column: 2; /* 右側に配置 */
    margin: 0 0 0 0;
}

.float_area.fadeRightTrigger{
    grid-column: 3; /* 右側に配置 */
    margin: 0 auto 0 0;
}

.float_area.fadeRight2Trigger{
    grid-column: 4; /* 右側に配置 */
    margin: 0 auto 0 0;
}


.float_area_inner {
	display: block;
	position: relative;
	padding:1em 1em 0.2em;
	margin:0;
	width: 100%;
	height: auto;	
}

.float_img {
	display: block;
	position: relative;
	padding: 0;
	margin: 0 auto;
	border: 1px solid #cdcaca;
    background-color: #fff;
}

.float_txt {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0.2em auto;
	width: 95%;
	height: auto;
	font-size: 1.1em;
	line-height: 170%;
	font-family: 'Murecho', sans-serif;
	font-weight: 500;
	color: #000000;
}

.float_area_inner a .float_txt,
.float_area_inner a:hover .float_txt {
	color: #666666;
	text-decoration: none;
}

.float_info {
	display: block;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	text-align: right;
	font-size: 1.2em;
	font-weight: 700;
	font-family: 'Noto Sans Japanese', sans-serif;
	color: #4c8037;
}

.float_area_inner a .float_info,
.float_area_inner a:hover .float_info {
	color: #4c8037;
	text-decoration: none;
}


@media only screen and (max-width: 980px) {
	.float_area {
        font-size: 1.45vw;
    	max-width: 80%;
	}
	
	.float_area_inner a .float_txt, .float_area_inner a:hover .float_txt {
    font-size: 0.9em;
}

.float_area_inner a .float_info, .float_area_inner a:hover .float_info {
    font-size: 0.9em;
}

	
}

@media only screen and (max-width: 600px) {
	.float_area {
		max-width: 280px;
		margin: 18px auto 0;
		font-size:0.8em;
	}

	.float_area.fadeLeftTrigger{
		grid-row: 3;
		grid-column: 1;
		margin: 0 auto;
	}


	.float_area.fadeCenterTrigger{
		grid-row: 4;
		grid-column: 1;
		margin: 0 auto;
	}


	.float_area.fadeRightTrigger{
		grid-row: 5;
		grid-column: 1;
		margin: 0 auto;
	}
	
		.float_area.fadeRight2Trigger{
		grid-row: 6;
		grid-column: 1;
		margin: 0 auto;
	}
	
	.float_txt {
	display: none;
}
	
	 
    .float_area_inner a .float_info, .float_area_inner a:hover .float_info {
        font-size: 1em;
    }
}

@media only screen and (max-height: 340px) {

	.float_img {
		border: 1px solid red;
	    height: 80px;
	    text-align: center;
	}

    .float_img img{
        width: auto;
        height: 100%;
    }
}

.float_close {
	display: block;
	position: absolute;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	top: -18px;
	right: -18px;
	width: 44px;
	height: 44px;
	line-height: 44px;
	font-size: 1.4em;
	color: #fff;
	text-align: center;
	border-radius: 50%;
	background: #4c8037;
	z-index: 901;
}

.float_close a,
.float_close a:hover {
	color: #fff;
	background: #4c8037;
	text-decoration: none;
}

/*
 * modal_YouTube再生
 */

.modal-wrap {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	width: 100%;
	height: 100vh;
	display: none;
	justify-content: center;
	align-items: center;
	/*background: rgba(46,45,102,0.2);*/
	background-color:rgba(235,232,227,0.9);
}

.modal-wrap.shown {
	display: flex;
	animation-name:PageAnimeAppear;
	animation-duration:.5s;
	animation-fill-mode:forwards;
}

@keyframes PageAnimeAppear {
	
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
	
}

.modal-panel {
	width: calc(100% - 40px);
	max-width: 1000px;    
	position: relative;
}

.modal-frame {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin: 0 auto;
}

.modal-frame iframe {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

.modal-close {
	font-size: 0;
	width: 44px;
	height: 44px;
	background: url(../images/close.png) no-repeat center center;
	position: absolute;
	right: 36px;
	top: -44px;
	transform: translate(15px, -15px);
	border: none;
}

/*
 * modal_YouTubeセット
 */


.youtube-area {
	clear: both;
	display: block;
	position: relative;
	margin: 0 auto 36px auto;
	padding: 0 0 1em 0 ;
	width: 95%;
	max-width: 880px;
	overflow: hidden;
}

.youtube-part {
	display: block;
	position: relative;
	float: left;
	padding: 0 0 0 0;
	margin: 0 1.5% 18px 1.5%;
	width: 30.3%;
}

.youtube-part img {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
}

.youtube-title {
	display: block;
	text-align: center;
	margin: 0.5em auto 0 auto;
}

svg.mask{
	display: none;
}

@media screen and (min-width: 1280px) {

	svg.mask{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: -80px auto;
		width:100%;
		height:100%;
		position: absolute;
	}
	.engo {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    height: 100%;
	    width: 100%;
	    position: absolute;

	    fill: none;
	    stroke-width: 18;
	    stroke-dasharray: 100;
	    stroke-dashoffset: 0;
	    transform: rotate(-135deg); /* 右回りに変更 */
	    transform-origin: center; /* 回転の基準点を中央に */
	} 

	#white {
	    animation: white 2s ease-in-out;
	    animation-fill-mode: forwards;
	    animation-play-state: paused; /* 最初は停止 */
	}

	@keyframes white {
	    to {
	        stroke-dashoffset: -100;
	    }
	}
}