@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500&display=swap&subset=japanese');
/*----------------------------------------

	#scene
	- modal
	- common
	- content

-----------------------------------------*/
/*----------------------------------------
	modal
-----------------------------------------*/
/* modal - keyframes */
@-webkit-keyframes modalwindow_body_in {
	0% {
		-webkit-transform: translateY(-20px);
		        transform: translateY(-20px);
	}
	100% {
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
	}
}
@keyframes modalwindow_body_in {
	0% {
		-webkit-transform: translateY(-20px);
		        transform: translateY(-20px);
	}
	100% {
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
	}
}
@-webkit-keyframes modalwindow_body_out {
	0% {
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
	}
	100% {
		-webkit-transform: translateY(-20px);
		        transform: translateY(-20px);
	}
}
@keyframes modalwindow_body_out {
	0% {
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
	}
	100% {
		-webkit-transform: translateY(-20px);
		        transform: translateY(-20px);
	}
}
@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
body.enabled_modal {
	overflow: hidden;
}
#modal {
	-webkit-box-sizing: content-box;
	        box-sizing: content-box;
	display: none;
	position: fixed;
	z-index: 9999;
	overflow: auto;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: url("../img/s_m_bg01.png") repeat;
}
#modal img {
	width: 100%;
	height: auto;
}
#modal .modalOverlay {
	display: table;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	position: relative;
	max-width: 750px;
	height: 100%;
	margin: 0 auto;
	padding: 50px 5px;
	-webkit-transform: translateY(-20px);
	    -ms-transform: translateY(-20px);
	        transform: translateY(-20px);
	-webkit-animation: 500ms modalwindow_body_out;
	        animation: 500ms modalwindow_body_out;
}
#modal.is_visible .modalOverlay {
	-webkit-transform: translateY(0px);
	    -ms-transform: translateY(0px);
	        transform: translateY(0px);
	-webkit-animation: 200ms modalwindow_body_in;
	        animation: 200ms modalwindow_body_in;
}

#modal .loader {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border: 2px solid #fff;
	border-top: 2px solid transparent;
	border-radius: 50%;
	-webkit-animation: loader 0.6s infinite linear;
	animation: loader 0.6s infinite linear;
}


/* modal - style */
#modal .modalWrap {
	display: table-cell;
	vertical-align: middle;
	position: relative;
	margin: 30px auto;
}
#modal .modalInner {
	position: relative;
	max-width: 740px;
	background-color: #fff;
	border: 3px solid #333;
	border-radius: 10px;
}
#modal .modalBox {
	position: relative;
	z-index: 2;
	padding: 20px 60px 40px;
}
#modal .mHead {
	text-align: center;
}
#modal .mHead h1 {
	position: relative;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 3.0rem;
	text-align: center;
}
#modal .mHead h1::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 3px;
	background: url("../img/s_m_line01.png") repeat-x;
}
#modal .mHead h1>span {
	display: block;
	font-size: 1.6rem;
}

#modal .mWrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	max-height: 50vh;
	min-height: 50vh;
	margin-right: -25px;
	padding-right: 25px;
	overflow-y: scroll;
}
#modal .mWrap>div {
	padding: 20px 0;
}
#modal .mWrap .mPicBox {
	width: calc(50% - 30px);
	margin-right: 30px;
}
#modal .mWrap .mPicBox>img {
	border-radius: 10px;
	overflow: hidden;
}
#modal .mWrap .mTxtBox {
	width: 50%;
	height: 100%;
}
#modal .mWrap .mTxtBox>p {
	font-size: 1.6rem;
	line-height: 2.0;
}
#modal .mWrap .btns {
	margin-top: 25px;
}
#modal .mWrap .btns a {
	position: relative;
	display: block;
	width: 80%;
	max-width: 300px;
	margin: 0 auto;
	padding: 1.0em 30px 1.0em 10px;
	border: 2px solid #333;
	border-radius: 50px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	text-align: center;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
#modal .mWrap .btns a+a {
	margin-top: 15px;
}
#modal .mWrap .btns a>span {
	font-size: 1.4rem;
	line-height: 1;
	margin-right: -10px;
	margin-left: 10px;
}
#modal .mWrap .btns a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #333;
	border-right: 2px solid #333;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
	-webkit-transform-origin: right top;
	    -ms-transform-origin: right top;
	        transform-origin: right top;
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
}
#modal .mWrap .btns a:hover {
	color: #333;
	background-color: #fef47f;
}

#modal .btn01.modalClose {
	position: absolute;
	top: -20px;
	right: -20px;
	z-index: 100;
}
#modal .btn01.modalClose a {
	display: block;
	width: 45px;
	height: 45px;
	background-color: #fff;
	border: 2px solid #333;
	border-radius: 50%;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
#modal .btn01.modalClose a::before,
#modal .btn01.modalClose a::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	border-bottom: 2px solid #333;
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
#modal .btn01.modalClose a::before {
	-webkit-transform: rotate(45deg) translate(-50%,-50%);
	    -ms-transform: rotate(45deg) translate(-50%,-50%);
	        transform: rotate(45deg) translate(-50%,-50%);
}
#modal .btn01.modalClose a::after {
	-webkit-transform: rotate(-45deg) translate(-50%,-50%);
	    -ms-transform: rotate(-45deg) translate(-50%,-50%);
	        transform: rotate(-45deg) translate(-50%,-50%);
}
#modal .btn01.modalClose a:hover {
	background-color: #fef47f;
}

#modal .btn02.modalClose {
	position: absolute;
	bottom: -20px;
	right: 0;
	left: 0;
	z-index: 100;
	width: 150px;
	margin: 0 auto;
	text-align: center;
}
#modal .btn02.modalClose a {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 100%;
	height: 40px;
	background-color: #fff;
	border: 2px solid #333;
	border-radius: 20px;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
#modal .btn02.modalClose a>span {
	font-size: 1.4rem;
	line-height: 1;
}
#modal .btn02.modalClose a::before,
#modal .btn02.modalClose a::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 20px;
	width: 10px;
	border-bottom: 2px solid #333;
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
#modal .btn02.modalClose a::before {
	-webkit-transform: rotate(45deg) translate(-50%,-50%);
	    -ms-transform: rotate(45deg) translate(-50%,-50%);
	        transform: rotate(45deg) translate(-50%,-50%);
}
#modal .btn02.modalClose a::after {
	-webkit-transform: rotate(-45deg) translate(-50%,-50%);
	    -ms-transform: rotate(-45deg) translate(-50%,-50%);
	        transform: rotate(-45deg) translate(-50%,-50%);
}
#modal .btn02.modalClose a:hover {
	color: #333;
	background-color: #fef47f;
}

/* inWrap */
#modal .mWrap.inWrap {
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
#modal .mWrap.inWrap .mWrap {
	height: auto;
	max-height: initial;
	max-height: auto;
	min-height: initial;
	min-height: auto;
	overflow-y: visible;
	display: block;
	margin: 0;
	padding: 0;
}
#modal .mWrap.inWrap>.in {
	width: calc(50% - 5px);
}
#modal .mWrap.inWrap>.in:first-child{
	margin-right: 10px;
	margin-bottom: 20px;
}
_:-ms-lang(x)::-ms-backdrop, #modal .mWrap.inWrap>.in:first-child{
	margin-bottom: 60px;
}
#modal .mWrap.inWrap>.in .mPicBox {
	width: 100%;
	max-width: 250px;
	margin: 0 auto;
}
#modal .mWrap.inWrap>.in .mTxtBox {
	width: 100%;
	padding: 0 10px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

@media screen and (max-width:768px){
	#modal .modalOverlay {
		max-width: 360px;
	}
	#modal .modalBox {
		position: relative;
		padding: 15px 20px 40px;
	}
	#modal .modalBox span.scIcon {
		position: absolute;
		right: 0;
		bottom: 40px;
		left: 0;
		width: calc(100% - 40px);
		height: 30px;
		margin: 0 auto;
		background-color: rgba(102,102,102,0.9);
		border-radius: 10px;
		pointer-events: none;
	}
	#modal .modalBox span.scIcon>span {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 30px;
		height: 30px;
		margin: 0 auto;
		-webkit-animation: infinit_scroll 4.0s ease-in-out infinite;
		        animation: infinit_scroll 4.0s ease-in-out infinite;
	}
	#modal .modalBox span.scIcon>span::before,
	#modal .modalBox span.scIcon>span::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 16px;
		height: 3px;
		background-color: #fff;
		border-radius: 1.5px;
		-webkit-transform-origin: center center;
		    -ms-transform-origin: center center;
		        transform-origin: center center;
	}
	#modal .modalBox span.scIcon>span::before {
		margin-left: -14px;
		-webkit-transform: rotate(45deg);
		    -ms-transform: rotate(45deg);
		        transform: rotate(45deg);
	}
	#modal .modalBox span.scIcon>span::after {
		margin-left: -4px;
		-webkit-transform: rotate(-45deg);
		    -ms-transform: rotate(-45deg);
		        transform: rotate(-45deg);
	}
	
	#modal .mWrap {
		display: block;
		margin-right: -10px;
		padding-right: 10px;
	}
	#modal .mHead h1 {
		font-size: 2.4rem;
	}
	#modal .mHead h1>span {
		font-size: 1.4rem;
	}
	#modal .mWrap .mPicBox {
		width: 100%;
		max-width: 250px;
		margin: 0 auto;
		padding-top: 30px;
	}
	
	#modal .mWrap .mTxtBox {
		width: 100%;
		padding: 0 0 30px;
	}
	#modal .mWrap .mTxtBox>p {
		font-size: 1.4rem;
	}
	#modal .btn01.modalClose {
		top: -10px;
		right: -5px;
	}
	#modal .btn01.modalClose a {
		width: 30px;
		height: 30px;
	}
	#modal .btn01.modalClose a::before,
	#modal .btn01.modalClose a::after {
		width: 10px;
	}
	#modal .mWrap .btns {
		margin-top: 15px;
	}
	#modal .mWrap .btns a {
		width: 100%;
		max-width: 100%;
		padding: 0 0 0 20px;
		border: none;
		text-align: left;
	}
	#modal .mWrap .btns a:hover {
		background-color: rgba(255,255,255,0.0);
	}
	#modal .mWrap .btns a>span {
		font-size: 1.4rem;
		line-height: 1.5;
		margin-right: 0;
		margin-left: 0;
	}
	#modal .mWrap .btns a::after {
		right: auto;
		left: 0px;
	}
	#modal .mWrap .btns a+a {
		margin-top: 10px;
	}
	
	/*スクロールバー表示*/
	#modal .mWrap::-webkit-scrollbar{ 
	   width: 6px;
	}
	#modal .mWrap::-webkit-scrollbar-thumb{ 
	   background: #999;
	   border-radius: 3px;
	}
	#modal .mWrap::-webkit-scrollbar-track-piece{
	   background: #efefef;
	}
	/* inWrap */
	#modal .mWrap.inWrap {
		margin-top: 20px;
	}
	#modal .mWrap.inWrap>.in {
		width: 100%;
		padding-top: 0;
	}
	#modal .mWrap.inWrap>.in .mHead h1 {
		padding-top: 0;
	}
}
/* scIcon - keyframes */
@-webkit-keyframes infinit_scroll {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-10px);
		        transform: translateY(-10px);
	}
	5% {
		opacity: 0.2;
		-webkit-transform: translateY(-5px);
		        transform: translateY(-5px);
	}
	10% {
		opacity: 1;
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
	}
	80% {
		opacity: 1;
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(10px);
		        transform: translateY(10px);
	}
}
@keyframes infinit_scroll {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-10px);
		        transform: translateY(-10px);
	}
	5% {
		opacity: 0.2;
		-webkit-transform: translateY(-5px);
		        transform: translateY(-5px);
	}
	10% {
		opacity: 1;
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
	}
	80% {
		opacity: 1;
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(10px);
		        transform: translateY(10px);
	}
}
	


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

/*----------------------------------------
	common
-----------------------------------------*/
body {
	font-family: 'Noto Sans JP', YuGothic, 'Yu Gothic Medium', 'Yu Gothic', meiryo, sans-serif;
}
img.sp,
span.sp,
span.sp_in {
	display: none;
}
/* font size */
[class*="font9"] {font-size: 0.9rem;}
[class*="font10"] {font-size: 1.0rem;}
[class*="font11"] {font-size: 1.1rem;}
[class*="font12"] {font-size: 1.2rem;}
[class*="font14"] {font-size: 1.4rem;}
[class*="font15"] {font-size: 1.5rem;}
[class*="font16"] {font-size: 1.6rem;}
[class*="font18"] {font-size: 1.8rem;}
[class*="font19"] {font-size: 1.9rem;}
[class*="font20"] {font-size: 2.0rem;}
[class*="font22"] {font-size: 2.2rem;}
[class*="font24"] {font-size: 2.4rem;}
[class*="font28"] {font-size: 2.8rem;}

@media screen and (max-width: 767px){
	/* font size */
	[class*="font"][class*="_9"] {font-size: 0.9rem;}
	[class*="font"][class*="_10"] {font-size: 1.0rem;}
	[class*="font"][class*="_11"] {font-size: 1.1rem;}
	[class*="font"][class*="_12"] {font-size: 1.2rem;}
	[class*="font"][class*="_14"] {font-size: 1.4rem;}
	[class*="font"][class*="_15"] {font-size: 1.5rem;}
	[class*="font"][class*="_16"] {font-size: 1.6rem;}
	[class*="font"][class*="_18"] {font-size: 1.8rem;}
	[class*="font"][class*="_19"] {font-size: 1.9rem;}
	[class*="font"][class*="_20"] {font-size: 2.0rem;}
	[class*="font"][class*="_22"] {font-size: 2.2rem;}
	
	img.pc {
		display: none;
	}
	img.sp {
		display: block;
	}
	span.pc {
		display: none;
	}
	span.sp {
		display: block;
	}
	span.sp_in {
		display: inline;
	}
}
@media screen and (max-width: 1000px){
	#main {
		margin-top: 0;
	}
}

/*----------------------------------------
	layout
-----------------------------------------*/
body {
	background: #46ace4;
}
main#main {
	position: relative;
	width: 100%;
}
header {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 99;
	width: 100%;
	background: rgba(255,255,255,0.0);
}
header img {
	width: auto;
	-webkit-transition: -webkit-transform 0.2s;
	transition: -webkit-transform 0.2s;
	-o-transition: transform 0.2s;
	transition: transform 0.2s;
	transition: transform 0.2s, -webkit-transform 0.2s;
	-webkit-transform-origin: left top;
	    -ms-transform-origin: left top;
	        transform-origin: left top;
	display: none;
}
header img.on {
	-webkit-transform: scale(0.4);
	    -ms-transform: scale(0.4);
	        transform: scale(0.4);
}

article {
	position: relative;
	z-index: 1;
}
#content {
	position: relative;
	z-index: 2;
	margin-top: 150vh;
	margin-bottom: 50vh;
	padding: 0;
	background: rgba(255,255,255,0.0);
}
#content > div {
	max-width: 900px;
}
#content > div+div {
	margin-top: 110vh;
	padding-top: 94px;
}
footer {
	position: fixed;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	padding: 10px 20px;
	background-color: rgba(255,255,255,0.9);
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
footer .fmenu dl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
footer .fmenu dl dt {
	width: 115px;
	margin-right: 20px;
}
footer .fmenu dl dd {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
footer .fmenu ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
footer .fmenu ul li {
	padding: 0 10px;
}
footer .fmenu ul li>a {
	font-size: 1.2rem;
}
footer .copyright {
	color: #333;
	opacity: 0.5;
}


/*----------------------------------------
	content
-----------------------------------------*/
.areaWrapper {
	position: relative;
}
.areaWrapper::after {
	content: "";
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100px;
	background: url("../img/s_main_bg01_01.png") repeat-x;
	background-size: auto 100%;
	background-position: center top;
}
#mb {
	position: absolute;
	top: 0;
	z-index: 2;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	    -ms-flex-align: end;
	        align-items: flex-end;
	width: 100%;
	height: 100vh;
	min-height: 670px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
#mb.fixed {
	position: fixed;
}
#mb::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: 167px;
	background: #fff;
}
#mb .mb_inner {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 330px;
	background: url("../img/s_main_bg01.png") no-repeat;
	background-position: center bottom;
	background-size: auto 100%;
}

#mb .ancArea {
	width: 100%;
	max-width: 768px;
	height: 100%;
	margin: 0 auto;
}
#mb .ancArea .ancArea_inner {
	height: 100%;
}
#mb .ancArea .ancArea_inner ul {
	position: relative;
	height: 100%;
}
#mb .ancArea .ancArea_inner ul li {
	position: absolute;
	opacity: 0;
	-webkit-transform: translateY(-20px);
	    -ms-transform: translateY(-20px);
	        transform: translateY(-20px);
}
#mb .ancArea .ancArea_inner ul li.on {
	opacity: 1;
	-webkit-transform: translateY(0px);
	    -ms-transform: translateY(0px);
	        transform: translateY(0px);
	-webkit-transition: 0.4s ease-out;
	-o-transition: 0.4s ease-out;
	transition: 0.4s ease-out;
}
@media print {
	#mb .ancArea .ancArea_inner ul li,
	#mb .ancArea .ancArea_inner ul li.on {
		opacity: 0;
	}
}
#mb .ancArea .ancArea_inner ul li:nth-child(1) {
	width: calc(190px * 0.65);
	bottom: 54%;
	left: 20%;
}
#mb .ancArea .ancArea_inner ul li:nth-child(2) {
	width: calc(224px * 0.65);
	bottom: 21.5%;
	left: 31%;
}
#mb .ancArea .ancArea_inner ul li:nth-child(3) {
	width: calc(224px * 0.65);
	bottom: 61%;
	left: 41%;
}
#mb .ancArea .ancArea_inner ul li:nth-child(4) {
	width: calc(201px * 0.65);
	bottom: 33%;
	left: 57%;
}
#mb .ancArea .ancArea_inner ul li:nth-child(5) {
	width: calc(195px * 0.65);
	bottom: 60%;
	left: 69%;
}
#mb .ancArea .ancArea_inner ul li {
	-webkit-transform-origin: 22px bottom;
	    -ms-transform-origin: 22px bottom;
	        transform-origin: 22px bottom;
}
#mb .ancArea .ancArea_inner ul li:hover {
	-webkit-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	        transform: scale(1.1);
	-webkit-transition: transform 0.2s ease-out;
	-o-transition: transform 0.2s ease-out;
	-webkit-transition: -webkit-transform 0.2s ease-out;
	transition: -webkit-transform 0.2s ease-out;
	transition: transform 0.2s ease-out;
	transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

/* sec common */
[id^="sec0"] {
	position: relative;
	width: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
[id^="sec0"]::before {
	content: "";
	position: absolute;
	top: 0;
	z-index: 0;
	width: 85px;
	height: 85px;
	border-radius: 10px;
	-webkit-box-shadow: 6px 6px 0 0 rgba(54,71,81,0.3);
	        box-shadow: 6px 6px 0 0 rgba(54,71,81,0.3);
}
[id^="sec0"].str2::before {
	left: calc(50% - 2px);
}
[id^="sec0"].str3::before {
	left: calc(50% + 38px);
}
.sec_title {
	position: relative;
	z-index: 2;
}
.sec_inner {
	position: relative;
	z-index: 1;
	max-width: 1000px;
	margin: 0 auto;
	padding: 27px;
	border: 3px solid #333;
	border-radius: 10px;
	background: #fff;
	-webkit-box-shadow: 6px 6px 0 0 rgba(54,71,81,0.3);
	        box-shadow: 6px 6px 0 0 rgba(54,71,81,0.3);
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.sec_title h2 {
	text-align: center;
}
.str2 .sec_title h2 img {
	width: 168px;
	margin-bottom: -44px;
}
.str3 .sec_title h2 img {
	width: 251px;
	margin-bottom: -44px;
}

.sec_pic {
	position: relative;
	z-index: 1;
}
.sec_modalArea {
	position: absolute;
	top: 27px;
	z-index: 2;
	width: calc(100% - 54px);
	height: calc(100% - 54px);
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

.sec_modalArea .areaTop {
	position: relative;
	height: 100%;
}
.sec_modalArea .areaTop a img {
	width: auto;
}
.sec_modalArea .areaTop a.on {
	opacity: 1;
	-webkit-transform: translateY(0px);
	    -ms-transform: translateY(0px);
	        transform: translateY(0px);
	-webkit-transition: 0.4s ease-out;
	-o-transition: 0.4s ease-out;
	transition: 0.4s ease-out;
}
.sec_modalArea .areaTop a {
	position: absolute;
	z-index: 0;
	display: block;
	margin-left: -27px;
	opacity: 0;
	-webkit-transform: translateY(-20px);
	    -ms-transform: translateY(-20px);
	        transform: translateY(-20px);
	cursor: pointer;
	-webkit-transform-origin: 48% bottom;
	    -ms-transform-origin: 48% bottom;
	        transform-origin: 48% bottom;
}
@media print {
	.sec_modalArea .areaTop a {
		opacity: 1;
		-webkit-transform: translateY(0px);
			-ms-transform: translateY(0px);
				transform: translateY(0px);
	}
}
.sec_modalArea .areaTop a:hover {
	-webkit-transform: scale(1.08);
	    -ms-transform: scale(1.08);
	        transform: scale(1.08);
	-webkit-transition: transform 0.2s ease-out;
	-o-transition: transform 0.2s ease-out;
	-webkit-transition: -webkit-transform 0.2s ease-out;
	transition: -webkit-transform 0.2s ease-out;
	transition: transform 0.2s ease-out;
	transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}
.sec_modalArea .areaTop a p {
	position: absolute;
	bottom: 79%;
	z-index: -1;
	height: 41px;
}
.sec_modalArea .areaTop a p.txt01 {
	right: 55%;
}
.sec_modalArea .areaTop a p.txt02 {
	left: 45%;
}
.sec_modalArea .areaTop a p img {
	height: 100%;
}
.sec_modalArea .areaBtm {
	display: none;
}

/* secTop */
#secTop {
	position: relative;
	/*display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;*/
	height: 100vh;
	height: auto;
	/*min-height: 330px;
	max-height: calc(100vh - 350px);*/
	padding-top: 90px;
	z-index: 3;
}
#secTop>h1 {
	max-width: 500px;
	margin: 0 auto 10px;
}
#secTop>h1>img {
	margin-right: -6px;
}
#secTop>.read {
	line-height: 1.7;
	text-align: center;
}
#secTop>.read>span {
	background-color: rgba(70, 172, 228, 0.8);
}

/* sec01 */
#sec01 .sec_modalArea .areaTop a:nth-of-type(1) {
	bottom: 54%;
	left: 23%;
}
#sec01 .sec_modalArea .areaTop a:nth-of-type(2) {
	bottom: 56%;
	left: 37%;
}
#sec01 .sec_modalArea .areaTop a:nth-of-type(3) {
	bottom: 15%;
	left: 32%;
}
#sec01 .sec_modalArea .areaTop a:nth-of-type(4) {
	bottom: 43%;
	left: 54%;
}
#sec01 .sec_modalArea .areaTop a:nth-of-type(5) {
	bottom: 50%;
	left: 71%;
}

/* sec02 */
#sec02 .sec_modalArea .areaTop a:nth-of-type(1) {
	bottom: 54%;
	left: 25%;
}
#sec02 .sec_modalArea .areaTop a:nth-of-type(2) {
	bottom: 68%;
	left: 32.5%;
}
#sec02 .sec_modalArea .areaTop a:nth-of-type(3) {
	bottom: 30%;
	left: 40.5%;
}
#sec02 .sec_modalArea .areaTop a:nth-of-type(4) {
	bottom: 14%;
	left: 83%;
}

/* sec03 */
#sec03 .sec_modalArea .areaTop a:nth-of-type(1) {
	bottom: 59%;
	left: 31%;
}
#sec03 .sec_modalArea .areaTop a:nth-of-type(2) {
	bottom: 70%;
	left: 44%;
}
#sec03 .sec_modalArea .areaTop a:nth-of-type(3) {
	bottom: 47%;
	left: 66%;
}
#sec03 .sec_modalArea .areaTop a:nth-of-type(4) {
	bottom: 30%;
	left: 70%;
}

/* sec04*/
#sec04 .sec_modalArea .areaTop a:nth-of-type(1) {
	bottom: 61%;
	left: 12%;
}
#sec04 .sec_modalArea .areaTop a:nth-of-type(2) {
	bottom: 58%;
	left: 24.6%;
}
#sec04 .sec_modalArea .areaTop a:nth-of-type(3) {
	bottom: 38%;
	left: 46%;
}
#sec04 .sec_modalArea .areaTop a:nth-of-type(4) {
	bottom: 66%;
	left: 52%;
}
#sec04 .sec_modalArea .areaTop a:nth-of-type(5) {
	bottom: 68%;
	left: 71%;
}

/* sec05 */
#sec05 .sec_modalArea .areaTop a:nth-of-type(1) {
	bottom: 28%;
	left: 31.5%;
}
#sec05 .sec_modalArea .areaTop a:nth-of-type(2) {
	bottom: 33%;
	left: 41%;
}
#sec05 .sec_modalArea .areaTop a:nth-of-type(3) {
	bottom: 71%;
	left: 57%;
}
#sec05 .sec_modalArea .areaTop a:nth-of-type(4) {
	bottom: 62%;
	left: 87%;
}


/*/---------------------/ sp /----------------------/*/
@media screen and (max-width: 767px){
	header img {
		width: 45%;
		max-width: 180px;
	}
	#content > div {
		max-width: 350px;
	}
	#secTop {
		padding-top: 60px;
		/*min-height: 250px;
		max-height: calc(100vh - 320px);*/
	}
	#secTop>h1 {
		max-width: 350px;
		padding: 0 18px;
	}
	#mb {
		min-height: 560px;
	}
	#mb::after {
		height: 100px;
	}
	#mb .mb_inner {
		height: 300px;
	}
	#mb .ancArea {
		max-width: 320px;
	}
	#mb .ancArea .ancArea_inner ul li:nth-child(1) {
		width: calc(190px * 0.4);
		top: auto;
		left: 27px;
		bottom: 51.5%;
	}
	#mb .ancArea .ancArea_inner ul li:nth-child(2) {
		width: calc(224px * 0.4);
		top: auto;
		left: 48px;
		bottom: 21%;
	}
	#mb .ancArea .ancArea_inner ul li:nth-child(3) {
		width: calc(224px * 0.4);
		top: auto;
		left: 120px;
		bottom: 63%;
	}
	#mb .ancArea .ancArea_inner ul li:nth-child(4) {
		width: calc(201px * 0.4);
		top: auto;
		left: 172px;
		bottom: 44%;
	}
	#mb .ancArea .ancArea_inner ul li:nth-child(5) {
		width: calc(195px * 0.4);
		top: auto;
		left: 245px;
		bottom: 62%;
	}
	footer {
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		padding: 8px 10px;
	}
	footer .fmenu {
		width: 100%;
		margin-bottom: 5px;
	}
	footer .fmenu dl dt {
		display: none;
	}
	footer .fmenu dl dd {
		width: 100%;
	}
	footer .fmenu ul {
		width: 100%;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	}
	footer .fmenu ul li {
		margin-right: 5px;
		padding: 0;
	}
	footer .fmenu ul li>a {
		font-size: 0.9rem;
	}
	footer .fmenu ul li:last-child {
		margin-right: 0;
	}
	#content {
		margin-bottom: 50vh;
	}
	#content > div+div {
		margin-top: 100vh;
	}
	/* sec common */
	.str2 .sec_title h2 img {
		width: 114px;
		margin-bottom: -30px;
	}
	.str3 .sec_title h2 img {
		width: 171px;
		margin-bottom: -30px;
	}
	.sec_inner {
		padding: 10px 10px 80px;
		border-width: 2px;
		-webkit-box-shadow: 3px 3px 0 0 rgba(54,71,81,0.3);
		        box-shadow: 3px 3px 0 0 rgba(54,71,81,0.3);
	}
	[id^="sec0"] {
		padding-top: 0;
	}
	[id^="sec0"]::before {
		top: 30px;
		width: 58px;
		height: 58px;
		-webkit-box-shadow: 3px 3px 0 0 rgba(54,71,81,0.3);
		        box-shadow: 3px 3px 0 0 rgba(54,71,81,0.3);
	}
	[id^="sec0"].str2::before {
		left: calc(50% - 2px);
	}
	[id^="sec0"].str3::before {
		left: calc(50% + 28px);
	}
	
	.sec_pic {
		overflow: hidden;
	}
	.sec_pic img {
		width: 132%;
		margin-left: -16%;
	}
	.sec_modalArea {
		top: 10px;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
	}
	.sec_modalArea .areaTop {
		height: calc(100% - 70px);
	}
	.sec_modalArea .areaTop a {
		margin-left: -12px;
	}
	.sec_modalArea .areaTop a img {
		width: 25px;
	}
	.sec_modalArea .areaTop a span {
		position: absolute;
		top: 2px;
		right: 0;
		bottom: auto;
		left: -2px;
		font-size: 1.2rem;
		text-align: center;
	}
	.sec_modalArea .areaTop a p {
		bottom: 85%;
		height: auto;
	}
	.sec_modalArea .areaTop a p.txt01 {
		right: 40%;
	}
	.sec_modalArea .areaTop a p.txt02 {
		left: 40%;
	}
	.sec_modalArea .areaTop a p img {
		width: auto;
		height: 21px;
	}
	.sec_modalArea .areaBtm {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		width: 100%;
		padding: 15px 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.sec_modalArea .areaBtm a {
		display: block;
		width: 100%;
		-webkit-box-flex: 1;
		    -ms-flex: 1 1 auto;
		        flex: 1 1 auto;
		margin-right: 6px;
		padding: 5px 0 6px;
		background-color: #f08425;
		border-radius: 5px;
		font-size: 2.5rem;
		text-align: center;
	}
	.sec_modalArea .areaBtm a:last-child {
		margin-right: 0;
	}
	
	/* sec01 */
	#sec01 .sec_modalArea .areaTop a:nth-of-type(1) {
		bottom: 54%;
		left: 16%;
	}
	#sec01 .sec_modalArea .areaTop a:nth-of-type(1) p {
		bottom: 70%;
	}
	#sec01 .sec_modalArea .areaTop a:nth-of-type(1) p img {
		height: 32px;
	}
	#sec01 .sec_modalArea .areaTop a:nth-of-type(2) {
		bottom: 56%;
		left: 32%;
	}
	#sec01 .sec_modalArea .areaTop a:nth-of-type(3) {
		bottom: 18%;
		left: 31%;
	}
	#sec01 .sec_modalArea .areaTop a:nth-of-type(3) p {
		bottom: 40%;
		left: 70%;
	}
	#sec01 .sec_modalArea .areaTop a:nth-of-type(4) {
		bottom: 43%;
		left: 57.3%;
	}
	#sec01 .sec_modalArea .areaTop a:nth-of-type(5) {
		bottom: 50%;
		left: 83%;
	}
	#sec01 .sec_modalArea .areaTop a:nth-of-type(5) p {
		left: 30%;
	}

	/* sec02 */
	#sec02 .sec_modalArea .areaTop a:nth-of-type(1) {
		bottom: 55%;
		left: 16.5%;
	}
	#sec02 .sec_modalArea .areaTop a:nth-of-type(2) {
		bottom: 70%;
		left: 27%;
	}
	#sec02 .sec_modalArea .areaTop a:nth-of-type(2) p {
		left: 40%;
		right: auto;
	}
	#sec02 .sec_modalArea .areaTop a:nth-of-type(3) {
		bottom: 32%;
		left: 36%;
	}
	#sec02 .sec_modalArea .areaTop a:nth-of-type(4) {
		bottom: 20%;
		left: 90%;
	}
	#sec02 .sec_modalArea .areaTop a:nth-of-type(4) p {
		right: 40%;
		left: auto;
	}

	/* sec03 */
	#sec03 .sec_modalArea .areaTop a:nth-of-type(1) {
		bottom: 59%;
		left: 25%;
	}
	#sec03 .sec_modalArea .areaTop a:nth-of-type(2) {
		bottom: 68%;
		left: 42%;
	}
	#sec03 .sec_modalArea .areaTop a:nth-of-type(4) {
		bottom: 30%;
		left: 77%;
	}
	#sec03 .sec_modalArea .areaTop a:nth-of-type(4) p {
		bottom: 50%;
		left: 70%;
	}
	#sec03 .sec_modalArea .areaTop a:nth-of-type(4) p img {
		height: 32px;
	}

	/* sec04*/
	#sec04 .sec_modalArea .areaTop a:nth-of-type(1) {
		bottom: 78%;
		left: 7%;
	}
	#sec04 .sec_modalArea .areaTop a:nth-of-type(2) {
		bottom: 58%;
		left: 16.5%;
	}
	#sec04 .sec_modalArea .areaTop a:nth-of-type(3) {
		bottom: 39%;
		left: 45%;
	}
	#sec04 .sec_modalArea .areaTop a:nth-of-type(4) {
		bottom: 65%;
		left: 54%;
	}
	#sec04 .sec_modalArea .areaTop a:nth-of-type(5) {
		bottom: 66%;
		left: 78%;
	}

	/* sec05 */
	#sec05 .sec_modalArea .areaTop a:nth-of-type(1) {
		bottom: 28%;
		left: 25%;
	}
	#sec05 .sec_modalArea .areaTop a:nth-of-type(2) {
		bottom: 33%;
		left: 38.5%;
	}
	#sec05 .sec_modalArea .areaTop a:nth-of-type(3) {
		bottom: 67%;
		left: 59%;
	}
	#sec05 .sec_modalArea .areaTop a:nth-of-type(3) p {
		right: 40%;
		left: auto;
	}
	#sec05 .sec_modalArea .areaTop a:nth-of-type(4) {
		bottom: 64%;
		left: 92%;
	}
	#sec05 .sec_modalArea .areaTop a:nth-of-type(4) p {
		right: 40%;
		left: auto;
	}
}


#fnav {
	display: none;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 1000;
	height: 100%;
	
}
#fnav ul {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}
#fnav li {
	width: 92px;
	margin: 6px 0 6px auto;
	transition: width 0.1s linear;
}
#fnav li.on {
	width: 120px;
}
#fnav li:hover {
	width: 120px;
}
@media screen and (max-width: 767px){
	#fnav {
		width: 100%;
		height: auto;
		padding-bottom: 75px;
	}
	#fnav ul {
		flex-wrap: wrap;
		flex-direction: row;
		max-width: 350px;
		margin: 0 auto;
	}
	#fnav li {
		width: auto;
		height: 32px;
		margin: 5px 8px;
	}
	#fnav li.on {
		width: auto;
	}
	#fnav li:hover {
		width: auto;
	}
	#fnav li img {
		width: auto;
		height: 100%;
	}
}

#pagetop {
	display: none;
	position: fixed;
	bottom: 50px;
	right: 8px;
	z-index: 1000;
	width: 70px;
}
@media screen and (max-width: 767px){
	#pagetop {
		bottom: 60px;
		right: 10px;
		width: 55px;
	}
}