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

html{
/*	background:#ededed;
	height: 100%;*/
	font-size:62.5%;
/*	scroll-behavior: smooth;*/
}
body{
	font-size:100%;
}

/* ******************************************************
	Toggle Menu
******************************************************* */

.menu-opener,
.menu-opener:hover,
.menu-opener.active,
.menu-opener-inner,
.menu-opener-inner::before,
.menu-opener-inner::after,
.mobile-menu,
.mobile-menu.active {
  -webkit-transition: 250ms all;
  transition: 250ms all;
}
.menu-opener {
	display:inline-block;
	cursor: pointer;
	width:50px;
	height:50px;
	position: absolute;
	top: 20px;
	right:15px;
	background:#FFF;
	z-index:200;
}
.menu-opener:hover,
.menu-opener.active {
  background:#FFF;
}
.menu-opener-inner {
	background:#474343;
	height:0;
	margin-left:10px;
	margin-top: 40px;
	width:30px;
}
.menu-opener-inner::before,
.menu-opener-inner::after {
  background: #474343;
  content: '';
  display: block;
  height: 1px;
  width:30px;
}
.menu-opener-inner::before {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}
.menu-opener-inner::after {
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
}
.menu-opener-inner.active {
  background: transparent;
}
.menu-opener-inner.active::before {
  -webkit-transform: translateY(1px) translateX(0rem) rotate(-45deg);
  -ms-transform: translateY(1px) translateX(0rem) rotate(-45deg);
  transform: translateY(1px) translateX(0rem) rotate(-45deg);
  
}
.menu-opener-inner.active::after {
  -webkit-transform: translateY(0px) translateX(0rem) rotate(45deg);
  -ms-transform: translateY(0px) translateX(0rem) rotate(45deg);
  transform: translateY(0px) translateX(0rem) rotate(45deg);
}
.mobile-menu{
	display:inline-block;
	background:#FFF;
	height:auto;
	width:0;
	position: absolute;
	top:0;
	right:0;
	z-index: 199;
}
.mobile-menu.active {
	width:100%;
	height:100%;
}
.mobile-menu.active .menu-inner {
	display:block;
}
.menu-inner {
	display:none;
	margin: 120px 30px 0 0;
	padding: 0 0 50px 40px;
	z-index: 101;
	text-align:right;
}
.menu-inner li{
	padding:0 0 7px 0;
}
.menu-inner li a{
	font-size:1.8em;
	line-height:200%;
	font-weight:400;
	letter-spacing:3px;
}
.menu-inner li.sub a{
	margin-left:27px;
}



/* *******************************************************************
	Layout
******************************************************************* */

#layout{
	width:100%;
	text-align:center;
	background:#FFF;
}
.contents-layout{
	width:85%;
	min-width:0px;
	text-align:left;
}
.main-contents{
	width:88vw;
	min-width:0px;
	text-align:center;
	margin:0 auto;
	background:#FFF;
	position:relative;
	padding-left:0px;
}

/* **************************************
	Header & Menu
*************************************** */
.header-content{
	width:85%;
	margin:0 auto;
	display:block;
	grid-template-columns: 690px 420px;
}
.header-content ul {
 	display:none;
}
#logo .image img{
	width:65%;
	height:auto;
}
#logo .site-title{
	font-size:1.4rem;
	line-height:160%;
	font-weight:400;
}

/* *******************************************************************

	Footer

******************************************************************* */
footer{
	width:100%;
	border-top:1px solid #8f8d00;
	padding-top:40px;
	padding-bottom:40px;
}
.footer-content{
	width:85%;
	margin:0 auto;
	display:block;
}
.footer-content dl{
	margin-bottom:50px;
}
.footer-content dl dt{
	font-size:1.4rem;
}
.footer-content dl dt,
.footer-content dl dd{
	margin-bottom:10px;
}
.footer-content dl dd a{
	font-size:1.4rem;

}
.footer-content .mail{
	font-size:1.4rem;
	line-height:180%;
	text-align:right;
	font-weight:400;
	color:#000;
}



/* *******************************************************************

	Index

******************************************************************* */

.contents-layout.index{
	display:block;
	padding-top:15vw;
}
.main-text{
	font-size:1.6rem;
	font-weight:400;
	line-height:200%;
}
.index-link{
	font-size:1.6rem;
}
/* ----------------------
	New
----------------------- */
.archive-news-layout{
	text-align:left;
	margin:0 auto;
	width:100%;
	padding-bottom:100px;
}
.archive-news-layout a.news-list{
	margin:0 auto;
	width:100%;
	display:block;
	margin-bottom:40px;
}
.archive-news-layout .pic{
    width: 100%;
    height: auto;
}

.archive-news-layout .pic img{
	width:100%;
	height:auto;
}
.archive-news-layout .date{
	font-size:1.5rem;
	font-weight:700;
	color:#8f8d00;
	padding-top:15px;
}
.archive-news-layout .text{
	padding-top:15px;
	font-size:1.6rem;
	line-height:140%;
}
.archive-news-layout .news-more{
	width:60%;
	margin:0 auto;
}
.archive-news-layout .news-more a{
	padding:1.5rem 0;
	font-size:1.6rem;
	margin-top:30px;
	width:100%;
	text-align:center;
}
.archive-news-layout .news-more a:hover{
	color:#8f8d00;
}

/* ----------------------
	Profile
----------------------- */
.index-right .profile-more{
	width:60%;
	margin: 0 auto;
	padding-bottom:100px;
}
.index-right .profile-more a{
	width:100%;
	border:1px solid #8f8d00;
	padding:1rem 0;
	font-size:1.6rem;
	font-weight:400;
	display:inline-block;
	margin-top:0px;
	text-align:center;
}
.contents-layout.page{
	width:85%;
	padding-top:60px;
}
.contents-layout.page .index-left{
	width:100%;
	margin-left:0;
}
h3.profile{
	font-size:1.6rem;
	margin-bottom: 10px;
}
h3.bio{
	font-size:1.6rem;
}
.profile-text{
	font-size:1.6rem;
	line-height:180%;
	margin-bottom:100px;
}

/* *******************************************************************

	NEWS

******************************************************************* */

.contents-layout.news{
	padding-top:40px;
}
.yearly ul{
	padding-bottom:30px;
}
.yearly li{
	float:left;
	color:#8f8d00;
	font-weight:700;
	padding-bottom:60px;
	padding-right:12px;
}
.yearly li a{
	color:#8f8d00;
	font-size:1.6rem;
	font-weight:700;
}
h2.news {
    font-size: 2.8rem;
    font-weight: 400;
    margin-bottom: 50px;
}
.contents-layout.news .archive-news-layout{
	width:100%;
	padding-bottom:100px;
}
.contents-layout.news .archive-news-layout a.news-list{
	width:100%;
	display:block;
	margin-bottom:40px;
}
.contents-layout.news .archive-news-layout .pic{
    width: 100%;
    height: auto;
}
.contents-layout.news .archive-news-layout .pic img{
	width:100%;
	height:auto;
}
.contents-layout.news .archive-news-layout .date{
	font-size:1.5rem;
	font-weight:700;
	color:#8f8d00;
	padding-top:15px;
}
.contents-layout.news .archive-news-layout .text{
	padding-top:15px;
	font-size:1.6rem;
	line-height:140%;
}
.contents-layout.news-entry{
	padding-top:60px;
}
.news-content{
	width:100%;
	margin:0 auto;
}
.news-content .pic{
	padding-bottom:50px;
}
.news-content .pic img{
	width:100%;
	height:auto;
}
.news-content .date{
	font-size:1.5rem;
	font-weight:700;
	color:#8f8d00;
}
.news-content .title{
	line-height: 180%;
	font-size:2rem;
	font-weight:400;
	margin-top:15px;
	margin-bottom:35px;
}
.news-content .text{
	font-size:1.6rem;
	font-weight:400;
	line-height:180%;
}
.news-content .text a{
	color:#8f8d00;
}
.news-post-nav{
	text-align:center;
	margin:100px 0 80px 0;
}
.news-post-nav div{
	margin:0 8vh;
}
.news-post-nav .back{
	display:inline-block;
	width:2vh;
	height:2vh;
	border-top:1px solid #000;
	border-left:1px solid #000;
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
}
.news-post-nav .forward{
	display:inline-block;
	width:2vh;
	height:2vh;
	border-top:1px solid #000;
	border-right:1px solid #000;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
}
.news-post-nav .back a,
.news-post-nav .forward a{
	padding:4vh;
}
.news-post-nav .back.empty,
.news-post-nav .forward.empty{
	border-color:#dedede;
}



/* End CSS*/
}