@charset "UTF-8";


@font-face{
	font-family: 'Gen-B';
	src:
		url('../_fonts/GenShinGothic-Bold-web.woff') format('woff'),
		url('../_fonts/GenShinGothic-Bold-web.ttf') format('truetype')
	;
}

@font-face {
	font-family: 'MyYuGothic';
	font-weight: normal;
	src: local('游ゴシック Medium'),
		local('YuGothic-Medium'), /* Postscript name */
		local('Yu Gothic Medium'), /* for Chrome */
		local('游ゴシック体'), /* for Mac */
		local('YuGothic'), /* for Mac */
		local('YuGothic-Regular'); /* Mediumがない場合 */
}
@font-face {
	font-family: 'MyYuGothicB';
	font-weight: bold;
	src: local('游ゴシック Bold'),
		local('YuGothic-Bold'), /* Postscript name */
		local('Yu Gothic'), /* for Chrome */
		local('游ゴシック体'), /* for Mac */
		local('YuGothic'); /* for Mac */
}

@font-face
{
	font-family: 'NotoSerif-M';
	src:
		url('../_fonts/NotoSerifCJKjp-Medium-web.woff') format('woff'),
		url('../_fonts/NotoSerifCJKjp-Medium-web.ttf') format('truetype')
	;
}


body
{
	-webkit-text-size-adjust: 100%; 
	color:rgb(50, 50, 50);
	line-height:1.75;
	letter-spacing:0.1em;
	font-family: "Sawarabi Gothic", MyYuGothic, "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Meiryo, "メイリオ","ＭＳ Ｐゴシック";
	font-weight: 500;
	background-color: rgb(255, 255, 255);
	word-wrap: break-word;
}

a{color: rgb(61, 151, 56)}

a:hover
{
	-webkit-transition: color .2s ease;
	-moz-transition: color .2s ease;
	-ms-transition: color .2s ease;
	-o-transition: color .2s ease;
	transition: color .2s ease;
	
	color: rgb(238, 120, 0);
}

#allContainer
{
	position: relative;
	z-index:1;
}

/* くるくるローダー */
.loader
{
	position:absplute;
	height:100%;
	width:100%;
	top: 0px;
	left:0px;
	z-index:9999;
}

.loader:after
{
	content: ""; 
	display: block;
	position: absolute;
	width: 30px;
	height: 30px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: 5px solid rgb(61, 151, 56);
	border-right-color: transparent;
	
	top: 50%;
	left: 50%;
	margin-top:-30px;
	margin-left:-30px; 

	animation: circle-spin 1s linear infinite; /*1秒毎にくるくる回転するアニメーション*/
}

@keyframes circle-spin
{
	0%
	{
		transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		opacity: 0.2;
	} /*0%の時は20％の透明度*/
	50%
	{
		transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		opacity: 1.0;
	} /*50%の時は透明度なし*/
	100%
	{
		transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		opacity: 0.2;
	} /*100%の時に20％の透明度に戻る*/
}

/* ボーダーローダー */
#loader
{
	position:fixed;
	height:100%;
	width:100%;
	top: 0px;
	left:0px;
	background-color: rgb(61, 151, 56);
	z-index:9999;
}

#loader:before
{
	content: "Loading..."; 
	display: block;
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: 2rem;
	text-align: center;
	color: white;
}

#loader:after
{
	content: ""; 
	display: block;
	position: absolute;
	width: 3rem;
	height: 3rem;
	box-sizing:border-box;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: .5rem solid rgb(255, 255, 255);
	border-right-color: transparent;
	
	top: 50%;
	left: 50%;
	margin-top:-1.5rem;
	margin-left:-1.5rem; 

	animation: circle-spin 1s linear infinite; /*1秒毎にくるくる回転するアニメーション*/
}


#prev_next{overflow:hidden; margin: 100px 0; width: 100%;}
#prev_next a
{
	display: block; position:relative; border-width:0px; text-decoration: none;
	font-family: Gen-B, 'Hiragino Sans W6', 'ヒラギノ角ゴ Pro W6', HiraKakuPro-W6, 'ヒラギノ角ゴ ProN W6', HiraKakuProN-W6, YuGothicB, '游ゴシック  Bold', meiryo, sans-serif;
	font-weight: 500;
}
#prev_next .nextBt{float: right; text-align: left; margin-right: 20px;}
#prev_next .prevBt{float: left; text-align: right;  margin-left: 20px;}
#prev_next a.prevBt:after, #prev_next a.nextBt:after
{
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;  /* float clear */
  height: 0;
  visibility: hidden;
}
#prev_next span
{
	display: block;
	width: 10px;
	height:10px;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
#prev_next .nextBt span:after
{
	content: "";
	display: block;
	margin-top: .8em;
	width: 7px;
	height: 7px;
	border-style: solid;
	border-color: black;
	border-width: 2px 2px 0 0;
	transform: rotate( 45deg );
	-ms-transform: rotate( 45deg );
}
#prev_next .nextBt p{float: left}
#prev_next .nextBt span
{
	float: right;
	margin-right: 3px;
	margin-left: 3px;
}
#prev_next .nextBt:hover span
{
	margin-right: 0px;
	margin-left: 6px;
}
#prev_next .prevBt span:after
{
	content: "";
	display: block;
	margin-top: .8em;
	margin-left:2px;
	width: 7px; 
	height: 7px;
	border-style: solid;
	border-color: black;
	border-width: 2px 2px 0 0;
	transform: rotate( 225deg );
	-ms-transform: rotate( 225deg );
}
#prev_next .prevBt p{float: right; margin-left: 3px;}
#prev_next .prevBt span
{
	float: left;
	margin-right: 3px;
	margin-left: 3px;
}
#prev_next .prevBt:hover span
{
	margin-right: 6px;
	margin-left: 0px;
}

.subHead
{
	font-size: 1em; line-height:1;
	font-family: Gen-B, 'Hiragino Sans W6', 'ヒラギノ角ゴ Pro W6', HiraKakuPro-W6, 'ヒラギノ角ゴ ProN W6', HiraKakuProN-W6, YuGothicB, '游ゴシック  Bold', meiryo, sans-serif;
	font-weight: 500;
}
.strongText
{
	font-family: Gen-B, 'Hiragino Sans W6', 'ヒラギノ角ゴ Pro W6', HiraKakuPro-W6, 'ヒラギノ角ゴ ProN W6', HiraKakuProN-W6, YuGothicB, '游ゴシック  Bold', meiryo, sans-serif;
	font-weight: 500;
}
.smallText{font-size: 0.9em;}


#main
{
	position: relative;
	z-index: 1000;
	background-color: white;
	margin: 10rem 0;
}

.pageContainer
{
	position: relative;
	box-sizing: border-box;
	margin: 5em auto;
}

.pageContainer._2
{
	margin-bottom: 0em;
}

.pageContainer._3
{
	margin: 0em auto;
}

.pageContainer .wrapper .contents
{
	transform: translateY(2rem);
	opacity: 0;
	width: 100%;
	
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.end.pageContainer .wrapper .contents
{
	transform: translateY(0rem);
	opacity: 1;
}

.sectionTitle
{
	position: relative;
	box-sizing:border-box;
	padding-top: 1em;
	z-index: -1;
	background-repeat: no-repeat;
	background-size: contain;
	color: rgb(61, 151, 56);
}
.sectionTitle p
{
	font-family: Gen-B, 'Hiragino Sans W6', 'ヒラギノ角ゴ Pro W6', HiraKakuPro-W6, 'ヒラギノ角ゴ ProN W6', HiraKakuProN-W6, YuGothicB, '游ゴシック  Bold', meiryo, sans-serif;
	font-weight: 500;
	
	display: block;
	position: relative;
	line-height: 1;
	letter-spacing: .5rem;
}
.sectionTitle:before
{
	content: "";
	position: absolute;
	top: 0;
	right: .1em;
	width: 100%;
	/*BORDER1or2*/
	border-bottom: 1px solid;
	z-index: -1;
	display: block;
	
	transform-origin: left top;
	transform: scale(0, 1);
	
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

.end .sectionTitle:before
{
	transform: scale(1, 1);
}

.linkBt, .pdfLink
{
	display: inline-block;
	text-decoration: none;
	background-color: rgb(61, 151, 56);
	color: rgb(255, 255, 255);
	line-height:1;
	padding: .2em .3em;
	margin: 0 .5em;
	font-family: Gen-B, 'Hiragino Sans W6', 'ヒラギノ角ゴ Pro W6', HiraKakuPro-W6, 'ヒラギノ角ゴ ProN W6', HiraKakuProN-W6, YuGothicB, '游ゴシック  Bold', meiryo, sans-serif;
	font-weight: 500;
	border: .1rem solid rgb(61, 151, 56);
	transform: translateY(-.25em);
}

.linkBt{font-size: .7em; margin-left:.5em;}
.linkBt._l{font-size: 1em; margin-left: 0em; margin-top: 1em;}
.pdfLink{font-size: .9em; display:block; margin-top: 1em;}

.linkBt:hover, .pdfLink:hover
{
	background-color: rgb(255, 255, 255);
	color: rgb(61, 151, 56);
}

/********* Selector *********/

#selector
{
	background-color: rgba(255, 255, 255, .7);
	position: fixed;
	top:0;
	width: 100%;

	z-index: 9000;
	box-sizing:border-box;
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: nowrap;

	-webkit-align-items: center;
	align-items: center;
	
	-webkit-align-content: center;
	align-content: center;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px)
}
#selector .selector
{
	margin-top: 0em;
	padding: 0;
}
.selectorBts
{
	padding: 0 1em;
}

#selector .logo
{
	position: absolute;
	top: 0;
	width: 240px;
	height: 100px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 10;
	
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-ms-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease;
}
#selector .logo._s{	width: 120px; height: 120px;}

.svg #selector .logo{background-image: url(../_img/logo.svg)}
.no-svg #selector .logo{background-image: url(../_img/logo.svg)}

#selector .selector
{
	position:relative;
	width: 100%;
	box-sizing:border-box;
	margin: 0;
}
.selector .selectorBts
{
	list-style-type: none;
	font-family: Gen-B, 'Hiragino Sans W6', 'ヒラギノ角ゴ Pro W6', HiraKakuPro-W6, 'ヒラギノ角ゴ ProN W6', HiraKakuProN-W6, YuGothicB, '游ゴシック  Bold', meiryo, sans-serif;
	font-weight: 500;
}

#selector .selector .selectorBts
{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: nowrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-around;
	-webkit-align-items: stretch;
	align-items: stretch;
}

.selector .selectorBts div
{
	color: rgb(61, 151, 56);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-justify-content: center;
	justify-content: center;
	
	-webkit-align-items: center;
	align-items: center;
}

.selector .selectorBts div.line
{
	width: 2px;
	position: relative;
	background-color: rgb(61, 151, 56);
}

.selector .selectorBts a
{
	font-size: .9rem;
	line-height: 1;
	letter-spacing: .2em;

	position: relative;
	display: block;
	padding: 1em 0;
	text-decoration: none;
	cursor: pointer;
	color: inherit;
	text-align: center;
}

.selector .selectorBts a
{
	display: inline-block;
	position: relative;
}

.selector .selectorBts a:before
{
	content: "";
	z-index: -1;
	display: block;
	position: absolute;
	width: 100%;
	height: 4px;
	background-color: rgb(238, 120, 0);
	bottom: -.2rem;
	
	transform-origin: center top;
	transform: scale(0, 1);
	
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-ms-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease;
}

.selector .selectorBts a:hover:before, .selector .selectorBts a.n:before
{
	transform: scale(1, 1);
}

.selector .selectorBts a.now
{
	color: white;
	background-color: rgb(238, 120, 0);
	border-color: rgb(238, 120, 0);
}
.selector .selectorBts a.now:hover
{
	color: rgb(238, 120, 0);
	background-color: white;
	border-color: rgb(238, 120, 0);
}

#selector a.about, #selector a.contact
{
	font-family: Gen-B, 'Hiragino Sans W6', 'ヒラギノ角ゴ Pro W6', HiraKakuPro-W6, 'ヒラギノ角ゴ ProN W6', HiraKakuProN-W6, YuGothicB, '游ゴシック  Bold', meiryo, sans-serif;
	font-weight: 500;
	font-size: .9em;
	letter-spacing:0;
	
	text-decoration: none;
	
	position: absolute;
	display: block;
	top: 0;
	height: 100px;
	width: 100px;
	text-align: center;
	
	box-sizing:border-box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	
	-webkit-justify-content: center;
	justify-content: center;
	
	-webkit-align-items: center;
	align-items: center;
	
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-ms-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease;
}
#selector a.about p, #selector a.contact p
{
	line-height: 1.5;
}
#selector a.about
{
	right: 100px;
	color: rgb(61, 151, 56);
	background-color: rgb(255, 255, 255);
	border: 6px solid rgb(61, 151, 56);
}
#selector a.about:hover
{
	right: 100px;
	color: white;
	background-color: rgb(61, 151, 56);
}

#selector a.contact
{
	right: 0px;
	color: white;
	background-color: rgb(238, 120, 0);
	border: 6px solid rgb(238, 120, 0);
}
#selector a.contact:hover
{
/*	color: rgb(238, 120, 0);*/
	background-color: rgb(61, 151, 56);
	border-color: rgb(61, 151, 56);
}
#selector a.about .icon, #selector a.contact .icon
{
	margin-top: .5em;
	width: 1.5em;
	height: 1.5em;
	display: block;
	position:relative;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.svg #selector a.about .icon{background-image: url(../_img/bt_about.svg)}
.no-svg #selector a.about .icon{background-image: url(../_img/bt_about.png)}
.svg #selector a.about:hover .icon{background-image: url(../_img/bt_about_c.svg)}
.no-svg #selector a.about:hover .icon{background-image: url(../_img/bt_about_c.png)}

.svg #selector a.contact .icon{background-image: url(../_img/bt_contact.svg)}
.no-svg #selector a.contact .icon{background-image: url(../_img/bt_contact.png)}
/*.svg #selector a.contact:hover .icon{background-image: url(../_img/bt_contact_c.svg)}
.no-svg #selector a.contact:hover .icon{background-image: url(../_img/bt_contact_c.png)}*/

#menuList
{
	position:fixed; 
	box-sizing:border-box;
	top: 5rem;
	padding: 5rem 1rem;
	width:100%;
	height:100vh;
	z-index: 8999;
	background-color: rgb(255, 255, 255);
}

#menuList .selector
{
	font-size: 1.5rem;
	position: relative;
}
#menuList .selector .selectorBts
{
	margin: 1rem 0;
}

#menuList .selector .selectorBts div.line
{
	width: 100%;
	height: 2px;
	position: relative;
	background-color: rgb(61, 151, 56);
	margin: 1em 0;
}

/********GO TOP******/

#goTopBt
{
	position:fixed; bottom:64px; right:0px; z-index:9200; display:none; cursor:pointer;
	width: 3em; height: 3em;
	background-color: rgba(255, 255, 255, 0);
	-webkit-transition:bottom .3s ease;
	-moz-transition:bottom .3s ease;
	-ms-transition:bottom .3s ease;
	-o-transition:bottom .3s ease;
	transition:bottom .3s ease;
}
#goTopBt:hover
{
	bottom: 67px;
}

#goTopBt:after
{
	content: ""; 
	display: block;
	position: absolute;
	top: .5em; left: .5em;
	width: 2em; 
	height: 2em;
	
	border-right: 1em solid transparent;
	border-bottom: 1em solid rgb(238, 120, 0);
	border-left: 1em solid transparent; 
	
	box-sizing:border-box;
}


/*********************************************************************/
/****************************** Links ********************************/
/*********************************************************************/

#footer .linksWrapper li a:hover .name:before
{
	left: 0%;
	width: 100%;
}


/*********************************************************************/
/****************************** Footer ********************************/
/*********************************************************************/

#footer
{
	z-index: 8000;
	width: 100%;
	bottom: 0;
	background-color: rgb(61, 151, 56);
/*	border-top: 2px solid rgb(61, 151, 56);*/
	color: white;
	margin-top: 7rem;
}

#footer .footerContents{margin-bottom: 8rem; position: relative;}
#footer .footerTitle{text-align: center; margin-bottom: 3rem;}

.credit
{
	padding: 5rem 5rem 7rem 5rem;
	font-size: .8rem;
	position: relative;
	z-index: 8000;
}
.credit p:first-child
{
	font-family: Gen-B, 'Hiragino Sans W6', 'ヒラギノ角ゴ Pro W6', HiraKakuPro-W6, 'ヒラギノ角ゴ ProN W6', HiraKakuProN-W6, YuGothicB, '游ゴシック  Bold', meiryo, sans-serif;
	font-weight: 500;
}
.credit .logo
{
	width: 320px;
	margin-bottom: 1rem;
	position: relative;
	left: 50%;
	margin-left: -160px;
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.credit .logo:before
{
	content:"";
	display: block;
	position: relative;
	padding-top: 28%;
}
.svg .credit .logo{background-image: url(../_img/logoFooter.svg);}
.no-svg .credit .logo{background-image: url(../_img/logoFooter.png);}

.credit div{text-align: center; background-color: white;}


/*****************************************************************
************************  Modal Window ***************************
*****************************************************************/

a.modalWindowBt
{
	cursor: pointer;
	display: block;
	margin: 1em 1em;
	background-color: white;
	color:rgb(0, 0, 0);
	font-size:1.1em;
	text-align: center;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
a.modalWindowBt span{display: block; padding:1em; text-align: center;}

a.modalWindowBt:hover
{
	background-color: rgb(238, 120, 0);
	color:white;
}
div.modalWindow
{
	display: none;
}

#modalWindow
{
	position:fixed;
	top:-200px;
	left:0px;
	width:100%;
	height: 100vh;
	z-index: 9800;
	background-color: rgba(255, 255, 255, .8);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

/*#modalWindow #modalWindowCloseBt
{
	position :fixed;
	top: 1rem;
	right: 1rem;
}*/

#modalWindow .container{width:90%; margin-left:auto; margin-right:auto; text-align:left; margin-top: 2em; background-color: white; border: 3px solid rgb(238, 120, 0); max-width: 800px;}
#modalWindow .container_relative{width:100%; position:relative;}

#modalWindow .modalBg
{
	position: fixed;
	width: 100%;
	height: 100%;
}

#modalWindow .contents_area
{
	position:relative;
	box-sizing:border-box;
	width:90%;
	margin-left: 5%;
	padding: 3em;
	margin-top: 3em;
	margin-bottom: 1em;
	word-wrap: break-word;
	background-color: rgb(255, 255, 255);
	border: 5px solid rgb(61, 151, 56);
	color: white;
}

#modalWindow .text h1
{
	font-family: Gen-B, 'Hiragino Sans W6', 'ヒラギノ角ゴ Pro W6', HiraKakuPro-W6, 'ヒラギノ角ゴ ProN W6', HiraKakuProN-W6, YuGothicB, '游ゴシック  Bold', meiryo, sans-serif;
	font-weight: 500;
	font-size: 1.3em;
	margin-bottom: 1em;
}

#modalWindow .text p
{
	margin-bottom: 1em;
}

#modalWindow .closeBtWrapper
{
	width: 2em;
	height: 2em;
	position: absolute;
	top: 1rem;
	right: 1rem;
}

.closeBt
{
	position: fixed;
	cursor:pointer; 
	text-indent: -9999px;
	width:2em;
	height: 2em;
}

.closeBt:before
{
	content: "";  /* 新しい要素を作る */
	display: block;  /* ブロックレベル要素に */
	position: absolute;
	width: 2em;
	height: 2px;
	top: .5em;
	right: -.25em;
	background-color: rgb(238, 120, 0);

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-ms-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease;
}
.closeBt:hover:before
{
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.closeBt:after
{
	content: "";  /* 新しい要素を作る */
	display: block;  /* ブロックレベル要素に */
	position: absolute;
	width: 2em;
	height: 2px;
	top: .5em;
	right: -.25em;
	background-color: rgb(238, 120, 0);
	
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-ms-transition:all .3s ease;
	-o-transition:all .3s ease;
	transition:all .3s ease;
}
.closeBt:hover:after
{
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN /////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/


@media screen and (max-width: 1200px)
{
	.selector .selectorBts a span{display: block; text-align: center;}
	.selector .selectorBts a span:first-child{margin-bottom: .4em;}
}

@media screen and (min-width: 650px)
{
	#selector{min-width: 980px; height: 100px;}
	#selector .selector{padding-left: 240px; padding-right: 200px;}
	#selector .selector .topics{color: rgb(238, 120, 0);}
	#menuList, #menuBt{display: none;}
	
	.pageContainer .wrapper
	{
		position: relative;
		box-sizing: border-box;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		flex-wrap: nowrap;
		
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		
		-webkit-align-items: flex-start;
		align-items: flex-start;
	}
	
	.sectionTitle, .spacer{width: 30%; min-width: 20.5em;}
	.sectionTitle p
	{
		text-align: right; font-size: 1.2em;
		padding-left: 1em;
		line-height: 1.5;
		margin-top: -.25em;
	}
	.sectionTitle p+p{margin-top: .2em;}
	.pageContainer .wrapper .contents
	{
		width: 70%;
		padding-right: 3em;
		padding-left: 2em;
		max-width: 850px;
	}
	
}

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

	body{font-size: 14px;}

	.pageContainer .wrapper
	{
		position: relative;
		box-sizing: border-box;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		flex-wrap: wrap;
		
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		
		-webkit-align-items: flex-start;
		align-items: flex-start;
	}
	
	.sectionTitle p{padding-left: 2rem; margin-bottom: 2em;}
	.sectionTitle p+p{padding-left: 2rem; margin-bottom: 2em; margin-top: -1.5em;}

	.pageContainer .wrapper .contents
	{
		padding-right: 3em;
		padding-left: 2em;
	}

	#selector{height: 75px; min-height: 75px;}
	#selector .selector{display: none;}
	#selector .logo
	{
		float: none; position: absolute; width: 75px; height: 75px;
		top: 0;
		left: 10px;
		background-position: 50% 50%;
		background-size: contain;
	}
	#selector .logo._s{	width: 5rem; height: 5rem; margin-left: -2.5rem;}

	#selector a.about, #selector a.contact
	{
		height: 75px;
		width: 75px;
	}
	
	#selector a.about p, #selector a.contact p
	{
		line-height: 1.1;
	}
	
	#selector a.contact{right: 75px;}
	#selector a.about{right: 150px;}
	#selector a.about:hover{right: 150px;}
	
	.selector .selectorBts a span{display: inline-block; text-align: center;}
	.selector .selectorBts a span:first-child{margin-bottom: 0em;}

	#menuList
	{
		top: 75px;
	}

	#menuBt
	{
		width:75px;
		height: 75px;
		position: absolute;
		display: block;
		top: 0;
		right: 0;
		cursor: pointer;
	}
	#menuBt span
	{
		transition: all 0.3s;
		transform: rotate(0deg);
		width: 3em;
		height: 5px;
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -1.5em;
		background: rgb(238, 120, 0);
	}
	#menuBt .top
	{
		transform: translateY(-14px);
	}
	#menuBt .bottom
	 {
		 transform: translateY(14px);
	}
	
	#menuBt:action .top
	{
		transform: translateY(-11px);
	}
	#menuBt:action .bottom
	{
		transform: translateY(11px);
	}
	
	#menuBt.menuBtOpen .middle
	{
		background: rgba(238, 120, 0, 0);
	}
	#menuBt.menuBtOpen .top
	{
		transform: rotate(-45deg) translateY(0px);
	}
	#menuBt.menuBtOpen .bottom
	{
		transform: rotate(45deg) translateY(0px);
	}

	.sectionTitle p{font-size: 1.2rem;}
	
	.credit{padding: 5rem 2rem 7rem 2rem;}

	#modalWindow .container{width:90%; margin-left:auto; margin-right:auto; text-align:left;}
	#modalWindow .container_relative{width:100%; position:relative;}
	
	#modalWindow #formContainer{width: 100%; position: relative; margin-left: 0; left: 0; padding-top: 2em;}
	#modalWindow .q-short{padding:0;  width:100%;}
	#modalWindow .contents_area .qInput{display:block; width:100%; margin-right:0;}

	#modalWindow #formContainer{padding: 0 2rem; width: auto;}
	#modalWindow #formContainer input, #typeArea, #modalWindow #formContainer textarea{width: 100%;}
	#modalWindow #formContainer .statement{width: 100%; height: 200px;}
}