@charset "utf-8";

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

@ DESKTOP

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

	
/**************************************
  base
**************************************/
html, body {
	position: relative;
	width: 100%;
	color: #000;
	font-size: 16px;
	line-height: 2.1875;
	font-family: YakuHanMP_Noto, 'Noto Serif JP', serif;
	/*font-feature-settings: "palt" 1;*/
	background: #eee;
}


#container {
	position: relative;
	margin: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
}


.inner {
	position: relative;
	/*height: 100%;*/
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 10px;
}

/*
img {
	display: block;
	width: 100%;
	height: auto;
}
*/

.tb	{ display: none; }
.sp	{ display: none; }
.pc	{ display: inherit; }


#tsparticles {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}




/**************************************
  head
**************************************/
#head {
	position: fixed;
	width: 100%;
	text-align: center;
	padding: 20px 0;
	z-index: 9;
	/*font-family: 'minion-pro', serif;*/
	/*background-color: rgba(255, 0, 0, 0.1);*/
}


/*** logo ***/
#head .logo {
	display: inline-block;
	width: 120px;
}
#head .logo a {
	display: block;
	transition: all 0.2s 0s ease;
}
#head .logo a:hover {
	opacity: 0.5;
}
#head .logo a .img {

}
#head .logo a .txt {

}
/*
#head .logo a .txt svg {
	transition: all 0.2s 0s ease;
}

.on_title_image #head .logo a .txt svg {
	fill: #fff;
}
*/


/*** lang ***/
#head .lang {
	position: absolute;
	right: 16vw;
	top: 40px;
	line-height: 1.0;
	letter-spacing: 0.05em;
	font-family: 'minion-pro', serif;
	font-weight: bold;
	z-index: 9;
}
#head .lang ul {
	display: flex;
	gap: 0 1.8vw;
	list-style: none;
}
#head .lang ul li {

}
#head .lang ul li a {
	position: relative;
	color: #000;
	text-decoration: none;
	text-underline-offset: 8px;
	transition: all 0.2s 0s ease;
}
#head .lang ul li a:hover {
	opacity: 0.5;
	text-decoration: underline;
}
#head .lang ul li.active a {
	text-decoration: underline;
}

.on_title_image #head .lang ul li a {
	color: #fff;
}

#head.open .lang ul li a {
	animation: menu-lang-open-txt .6s forwards;
}
@keyframes menu-lang-open-txt {
	0% {}
	50% {}
	100% { color: #000; }
}


/*** sns ***/
#head .sns {
	position: absolute;
	left: 20px;
	top: 20px;
	line-height: 1.0;
}
#head .sns ul {
	display: flex;
	gap: 0 20px;
	list-style: none;
}
#head .sns ul li {
	width: 30px;
}
#head .sns ul li a {
	display: block;
	transition: all 0.2s 0s ease;
}
#head .sns ul li a:hover {
	opacity: 0.5;
}
.on_title_image #head .sns ul li a svg {
	fill: #fff;
}
/*
#head .sns ul li a svg {
	transition: all 0.2s 0s ease;
}
#head .sns ul li a:hover svg {
	fill: #8fb94a;
}
*/


/*** mail ***/
#head .mail {
	position: absolute;
	right: 32vw;
	top: 42px;
	line-height: 1.0;
	/*z-index: 9;*/
}
#head .mail a {
	display: inline-flex;
	color: #000;
	font-family: 'minion-pro', serif;
	font-weight: bold;
	text-decoration: none;
	text-underline-offset: 8px;
	transition: all 0.2s 0s ease;
}
#head .mail a:hover {
	opacity: 0.5;
}
#head .mail a .icon {
	width: 1.0em;
	margin-right: 0.3em;
}
.on_title_image #head .mail a {
	color: #fff;
}
.on_title_image #head .mail a .icon svg {
	fill: #fff;
}



/*** menu ***/
#head .menu {
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

/* toggle */
#head .menu .toggle {
	position: absolute;
	right: 3vw;
	top: 5px;
	width: 100px;
	height: 100px;
	cursor: pointer;
	z-index: 9;
	transition: all 0.2s 0s ease;
	/*background: rgba(255, 0, 0, 0.1);*/
}
#head .menu .toggle:hover {
	opacity: 0.5;
}

#head .menu .toggle span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #000;
}

.on_title_image #head .menu .toggle span {
	background-color: #fff;
}

#head .menu .toggle span:nth-of-type(1) {
	top: 36%;
}
#head.open .menu .toggle span:nth-of-type(1) {
	animation: menu-toggle-open-bar-01 .6s forwards;
}
@keyframes menu-toggle-open-bar-01 {
	0% { transform: rotate(0); top: 36%; }
	50% { transform: rotate(0); top: 50%; }
	100% { transform: rotate(45deg); top: 50%; background-color: #000; }
}
#head.close .menu .toggle span:nth-of-type(1) {
	animation: menu-toggle-close-bar-01 .3s forwards;
}
@keyframes menu-toggle-close-bar-01 {
	0% { transform: rotate(45deg); top: 50%; }
	100% { transform: rotate(0); top: 36%; }
}

#head .menu .toggle span:nth-of-type(2) {
	bottom: 36%;
}
#head.open .menu .toggle span:nth-of-type(2) {
	animation: menu-toggle-open-bar-02 .6s forwards;
}
@keyframes menu-toggle-open-bar-02 {
	0% { transform: rotate(0); bottom: 36%; }
	50% { transform: rotate(0); bottom: 50%; }
	100% { transform: rotate(-45deg); bottom: 50%; background-color: #000; }
}
#head.close .menu .toggle span:nth-of-type(2) {
	animation: menu-toggle-close-bar-02 .3s forwards;
}
@keyframes menu-toggle-close-bar-02 {
	0% { transform: rotate(-45deg); bottom: 50%; }
	100% { transform: rotate(0); bottom: 36%; }
}

#head .menu .toggle p {
	position: absolute;
	top: 70%;
	width: 100%;
	color: #000;
	font-size: 14px;
	text-align: center;
	letter-spacing: 0.1em;
	font-family: 'minion-pro', serif;
	font-weight: bold;
}

.on_title_image #head .menu .toggle p {
	color: #fff;
}

#head.open .menu .toggle p {
	animation: menu-toggle-open-txt .6s forwards;
}
@keyframes menu-toggle-open-txt {
	0% { top: 70%; }
	50% { top: 70%; }
	100% { top: 90%; color: #000; }
}
#head.close .menu .toggle p {
	animation: menu-toggle-close-txt .3s forwards;
}
@keyframes menu-toggle-close-txt {
	0% { top: 90%; }
	100% { top: 70%; }
}

#head .menu .toggle p::after {
	content: 'MENU';
}
#head.open .menu .toggle p::after {
	animation: menu-toggle-open-txt-after .6s forwards;
}
@keyframes menu-toggle-open-txt-after {
	0% { content: 'MENU'; }
	50% { content: 'MENU'; }
	100% { content: 'CLOSE'; }
}
#head.close .menu .toggle p::after {
	animation: menu-toggle-close-txt-after .3s forwards;
}
@keyframes menu-toggle-close-txt-after {
	0% { content: 'CLOSE'; }
	100% { content: 'MENU'; }
}

/* navi */
#head .menu .navi {
	display: flex;
	align-items: center;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	background: url(../img/bg_texture_01.jpg);
	opacity: 0;
	pointer-events: none;
}

#head.open .menu .navi {
	animation: menu-navi-open .6s forwards;
	pointer-events: all;
}
@keyframes menu-navi-open {
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

#head.close .menu .navi {
	animation: menu-navi-close .3s forwards;
}
@keyframes menu-navi-close {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

#head .menu .navi .navi_main {
	display: flex;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 10px;
}
#head .menu .navi .navi_main .box_logo {
	width: 230px;
}
#head .menu .navi .navi_main .box_logo .menu_logo {
	padding: 0 15px;
	margin-bottom: 20px;
}
#head .menu .navi .navi_main .box_navi {
	flex-grow: 1;
	/*background: rgba(0, 0, 255, 0.1);*/
}
#head .menu .navi .navi_main .box_navi .head_menu {
	/*** (tips) https://note.com/takamoso/n/n32c4e6904cf7 ***/
	display: inline-flex;
	flex-wrap: wrap;
	gap: 60px 20px;
	writing-mode: vertical-lr;
	height: 300px;
}
#head .menu .navi .navi_main .box_navi .head_menu li {
	text-align: left;
	writing-mode: horizontal-tb;
}
#head .menu .navi .navi_main .box_navi .head_menu li a {
	display: block;
	color: #000;
	font-size: 124%;
	line-height: 1.0;
	text-decoration: none;
	letter-spacing: 0.05em;
	padding: 0.6em 0;
	transition: all 0.2s 0s ease;
}
#head .menu .navi .navi_main .box_navi .head_menu li a .arrow {
	position: relative;
	display: inline-block;
	width: 1.4em;
	height: 0.8em;
	margin-right: 0.5em;
	vertical-align: top;
	transition: all 0.2s 0s ease;
}
#head .menu .navi .navi_main .box_navi .head_menu li a .arrow::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: #000;
	transition: all 0.2s 0s ease;
}
#head .menu .navi .navi_main .box_navi .head_menu li a .arrow::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 0 10px;
	border-color: transparent transparent transparent #000;
	transition: all 0.2s 0s ease;
}

#head .menu .navi .navi_main .box_navi .head_menu li a:hover {
	color: #8FB94A;
}
#head .menu .navi .navi_main .box_navi .head_menu li a:hover .arrow {
	margin-left: 0.3em;
	margin-right: 0.2em;
}
#head .menu .navi .navi_main .box_navi .head_menu li a:hover .arrow::before {
	background: #8FB94A;
}
#head .menu .navi .navi_main .box_navi .head_menu li a:hover .arrow::after {
	border-color: transparent transparent transparent #8FB94A;
}

#head .menu .navi .navi_main .box_navi .head_menu li.current-menu-item,
#head .menu .navi .navi_main .box_navi .head_menu li.current-page-ancestor {

}
#head .menu .navi .navi_main .box_navi .head_menu li.current-menu-item a,
#head .menu .navi .navi_main .box_navi .head_menu li.current-page-ancestor a {
	color: #8FB94A;
}
#head .menu .navi .navi_main .box_navi .head_menu li.current-menu-item a .arrow::before,
#head .menu .navi .navi_main .box_navi .head_menu li.current-page-ancestor a .arrow::before {
	background: #8FB94A;
}
#head .menu .navi .navi_main .box_navi .head_menu li.current-menu-item a .arrow::after,
#head .menu .navi .navi_main .box_navi .head_menu li.current-page-ancestor a .arrow::after {
	border-color: transparent transparent transparent #8FB94A;
}

#head .menu .navi .navi_sub {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 50px 0;
}
#head .menu .navi .navi_sub .box_contact {
	position: absolute;
	right: 3.5vw;
	bottom: 50px;
}
#head .menu .navi .navi_sub .box_navi {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 10px;
}
#head .menu .navi .navi_sub .box_navi .head_menu_sub {
	display: flex;
	justify-content: space-between;
	/*gap: 0 40px;*/
	margin-right: 34%;
}
#head .menu .navi .navi_sub .box_navi .head_menu_sub li {

}
#head .menu .navi .navi_sub .box_navi .head_menu_sub li a {
	color: #000;
	font-size: 92%;
	line-height: 1.0;
	text-underline-offset: 6px;
}


/* menu_sns */
#head .menu .menu_sns {
	line-height: 1.0;
}
#head .menu .menu_sns ul {
	display: flex;
	justify-content: center;
	gap: 0 16px;
	list-style: none;
	margin-bottom: 6px;
}
#head .menu .menu_sns ul li {
	width: 30px;
}
#head .menu .menu_sns ul li a {
	display: block;
	transition: all 0.2s 0s ease;
}
#head .menu .menu_sns ul li a:hover {
	opacity: 0.5;
}
/*
#head .menu .menu_sns ul li a svg {
	transition: all 0.2s 0s ease;
}
#head .menu .menu_sns ul li a:hover svg {
	fill: #0b8888;
}
*/
#head .menu .menu_sns p {
	text-align: center;
	font-size: 74%;
	line-height: 1.2;
}


/*** GTranslate ***/
#head .gtranslate_wrapper {
	position: fixed;
	left: 20px;
	top: 30px;
}




/**************************************
  main
**************************************/
#main {
	position: relative;
	/*padding-top: 160px;*/
	/*background-color: rgba(0, 255, 0, 0.1);*/
}


/*** page-title ***/
#main #page-title {
	position: relative;
}


/** title_image **/
#main #page-title.title_image {
	height: 590px;
}

/* title */
#main #page-title.title_image .title {
	display: flex;
	align-items: center;
	height: 100%;
}
#main #page-title.title_image .title .ttl {

	z-index: 1;
}
#main #page-title.title_image .title .ttl h1 {
	position: absolute;
	top: 66%;
	color: #fff;
	font-size: 182%;
	line-height: 1.6;
	letter-spacing: 0.15em;
}

/* draw */
#main #page-title.title_image .draw {
	position: absolute;
	bottom: 32%;
	left: 50%;
	width: 100%;
	max-width: 1400px;
	z-index: 1;
	transform: translateX(-50%);
	/*background: rgba(255, 0, 0, 0.2);*/
}
#main #page-title.title_image .draw svg {
	fill: #fff;
}

/* bgimage */
#page-title.title_image .bgimage {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#page-title.title_image .bgimage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#page-title.title_image .bgimage::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 160px;
	background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}


/** title_japanese **/
#main #page-title.title_japanese {
	
}

#main #page-title.title_japanese {
	position: relative;
	height: 460px;
}

/* title */
#main #page-title.title_japanese .title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}
#main #page-title.title_japanese .title .ttl {

}
#main #page-title.title_japanese .title .ttl h1 {
	font-size: 175%;
	line-height: 1.6;
	letter-spacing: 0.15em;
	z-index: 1;
}


/** title_english **/
#main #page-title.title_english {
	
}

#main #page-title.title_english {
	position: relative;
	height: 460px;
}

/* title */
#main #page-title.title_english .title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}
#main #page-title.title_english .title .ttl {

}
#main #page-title.title_english .title .ttl h1 {
	font-size: 375%;
	line-height: 1.0;
	letter-spacing: 0.1em;
	font-family: 'minion-pro', serif;
	font-weight: normal;
	/*z-index: 1;*/
}
#main #page-title.title_english .title .ttl p {
	/*font-size: 86%;*/
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: 0.1em;
	/*margin-top: -1.0em;*/
}


/*** back ***/
#page-title .title .back {
	position: absolute;
	display: inline-block;
	line-height: 1.0;
	left: 10px;
	bottom: 30px;
	color: #000;
	font-size: 86%;
	font-weight: bold;
	text-decoration: none;
	transition: all 0.2s 0s ease;
}
#page-title .title .back .arrow {
	position: relative;
	display: inline-block;
	width: 1.4em;
	height: 0.8em;
	margin-right: 0.5em;
	vertical-align: top;
}
#page-title .title .back .arrow::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: #000;
	transition: all 0.2s 0s ease;
}
#page-title .title .back .arrow::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 5px 10px;
	border-color: transparent transparent #000 transparent;
	transition: all 0.2s 0s ease;
}

#page-title .title .back:hover {
	color: #8FB94A;
}
#page-title .title .back:hover .arrow::before {
	background: #8FB94A;
}
#page-title .title .back:hover .arrow::after {
	border-color: transparent transparent #8FB94A transparent;
}


/*** search ***/
#page-title .title .search {

}
#page-title .title .search form {
	
}
#page-title .title .search form input[type=text],
#page-title .title .search form select {
	box-sizing: border-box;
	/*width: 100%;*/
	padding: 0.3em;
	color: #666;
	background: #fff;
	border: 1px solid #999;
	border-radius: 4px;
	transition : all .3s ease;
}
#page-title .title .search form input[type=text] {
	width: 11em;
}
#page-title .title .search form select {
	padding: 0.2em;
}
#page-title .title .search form input[type=text]:focus,
#page-title .title .search form select:focus {
	outline: none;
	border: 1px solid #666;
	box-shadow: 0 0 5px 1px rgba(136, 136, 136, 0.5);
}
#page-title .title .search form input[type=submit] {
	box-sizing: border-box;
	/*width: 100%;*/
	font-size: 74%;
	padding: 0.2em 0.6em;
	color: #666;
	background: #eee;
	border: 1px solid #999;
	border-radius: 4px;
	cursor: pointer;
}


/*** message ***/
#page-title .title .message {
	position: absolute;
	left: 0px;
	bottom: 30px;
	padding: 0 10px;
	font-size: 100%;
	line-height: 1.6;
}





/**************************************
  foot
**************************************/
#foot {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 160px 30px 30px;
	gap: 100px 60px;
	/*background-color: rgba(0, 0, 255, 0.1);*/
}

#foot .logo {
	width: 130px;
}

#foot .cont {
	flex-grow: 1;
}
#foot .cont .info {
	font-size: 86%;
	line-height: 1.8;
	margin-bottom: 6px;
}
#foot .cont .navi {

}
#foot .cont .navi .foot_menu {
	display: flex;
	gap: 0 20px;
	list-style: none;
}
#foot .cont .navi .foot_menu li {

}
#foot .cont .navi .foot_menu li a {
	color: #000;
	font-size: 86%;
	line-height: 1.0;
	text-underline-offset: 6px;
}
#foot .cont .navi .foot_menu li a:hover {
	text-decoration: none;
}

#foot .copyright {
	width: 100%;
	font-size: 74%;
	letter-spacing: 0.1em;
}




/**************************************
  (to-top)
**************************************/
#to-top {
	position: fixed;
	right: 20px;
	bottom: 140px;
	opacity: 0;
	pointer-events: none;
	transition: all 0.4s 0s ease-out;
	z-index: 1;
}
#to-top a {
	position: relative;
	display: block;
	width: 100px;
	color: #000;
	font-size: 98%;
	font-weight: bold;
	font-family: 'minion-pro', serif;
	line-height: 1.0;
	letter-spacing: 0.15em;
	text-decoration: none;
	padding: 0.3em 0;
	transform: rotate(-90deg);
	transform-origin: right bottom;
	transition: all 0.2s 0s ease;
}
#to-top a .arrow {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}
#to-top a .arrow::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: #000;
	transition: all 0.2s 0s ease;
}
#to-top a .arrow::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 0 10px;
	border-color: transparent transparent transparent #000;
	transition: all 0.2s 0s ease;
}

#to-top a:hover {
	color: #8FB94A;
}
#to-top a:hover .arrow::before {
	background: #8FB94A;
}
#to-top a:hover .arrow::after {
	border-color: transparent transparent transparent #8FB94A;
}

.on_scroll #to-top {
	bottom: 150px;
	opacity: 1;
	pointer-events: all;
}



/**************************************
  (common)
**************************************/

/*** link ***/
a,
a:link,
a:active,
a:focus,
a:visited {
	color: #000;
	text-underline-offset: 0.2em;
}
a:hover {
	text-decoration: none;
}


/*** button ***/
.button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	height: 3em;
	color: #000;
	font-size: 124%;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-decoration: none;
	background: #f4fa52;
	padding: 0.8em 1.2em;
	border: none;
	cursor: pointer;
	transition: all 0.2s 0s ease;
}
.button:hover {
	opacity: 0.5;
}
.button.left {
	min-width: 13em;
	text-align: left;
}
.button.center {
	justify-content: center;
}
.button.small {
	font-size: 112%;
}
.button.white {
	background: #fff;
}
.button.wide {
	min-width: 20em;
}

.button .arrow {
	position: relative;
	display: inline-block;
	width: 38px;
	height: 38px;
	border: 1px solid #000;
	border-radius: 50%;
	margin-left: 1.0em;
}
.button .arrow::before {
	content: '';
	position: absolute;
	left: 20%;
	bottom: calc(50% - 1px);
	width: 60%;
	height: 1px;
	background: #000;
}
.button .arrow::after {
	content: '';
	position: absolute;
	right: 20%;
	bottom: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 0 8px;
	border-color: transparent transparent transparent #000;
}

.button .icon {
	width: 1.0em;
	line-height: 1.0;
	margin-right: 0.5em;
}


/*** morelink ***/
.morelink {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 4.6em;
	color: #000;
	font-size: 86%;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-decoration: none;
	/*border-bottom: 1px solid #000;*/
	/*background: rgba(255, 0, 0, 0.1);*/
	transition: all 0.2s 0s ease;
	overflow: hidden;
}
.morelink::after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	position: absolute;
	left: 0;
	bottom: 0;
	background: #000;
	/*transform-origin: bottom right;*/
	transition: all 0.2s 0s ease;
}

.morelink .arrow {
	position: relative;
	display: inline-block;
	width: 2.6em;
	height: 2.6em;
	border: 1px solid #000;
	border-radius: 50%;
	transition: all 0.2s 0s ease;
}
.morelink .arrow::before {
	content: '';
	position: absolute;
	left: 20%;
	bottom: calc(50% - 1px);
	width: 60%;
	height: 1px;
	background: #000;
	transition: all 0.2s 0s ease;
}
.morelink .arrow::after {
	content: '';
	position: absolute;
	right: 20%;
	bottom: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 0 8px;
	border-color: transparent transparent transparent #000;
	transition: all 0.2s 0s ease;
}

.morelink:hover {
	color: #8FB94A;
}
.morelink:hover::after {
	background: #8FB94A;
	animation: morelink-hover-after .8s;
}
.morelink:hover .arrow {
	border: 1px solid #8FB94A;
	background: #8FB94A;
}
.morelink:hover .arrow::before {
	background: #fff;
}
.morelink:hover .arrow::after {
	border-color: transparent transparent transparent #fff;
}
@keyframes morelink-hover-after {
	0% { left: 0; width: 100%; }
	40% { left: 100%; width: 0; }
	100% { left: auto; width: 100%; }
}


/*** pagelink ***/
.pagelink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #000;
	letter-spacing: 0.05em;
	text-decoration: none;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	transition: all 0.2s 0s ease;
}

.pagelink .cont {
	padding: 1.5em 0;
}
.pagelink .cont .lead {
	display: block;
	font-size: 240%;
	line-height: 1.2;
	letter-spacing: 0.05em;
	font-family: 'minion-pro', serif;
	margin-bottom: 0.1em;
}
.pagelink .cont .text {
	display: block;
	font-size: 86%;
	line-height: 1.6;
	letter-spacing: 0.1em;
}

.pagelink .arrow {
	position: relative;
	display: inline-block;
	width: 2.6em;
	height: 2.6em;
	border: 1px solid #000;
	border-radius: 50%;
	transition: all 0.2s 0s ease;
}
.pagelink .arrow::before {
	content: '';
	position: absolute;
	left: 20%;
	bottom: calc(50% - 1px);
	width: 60%;
	height: 1px;
	background: #000;
	transition: all 0.2s 0s ease;
}
.pagelink .arrow::after {
	content: '';
	position: absolute;
	right: 20%;
	bottom: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 0 8px;
	border-color: transparent transparent transparent #000;
	transition: all 0.2s 0s ease;
}

.pagelink:hover {
	color: #8FB94A;
	border-top: 1px solid #8FB94A;
	border-bottom: 1px solid #8FB94A;
}
.pagelink:hover .arrow {
	border: 1px solid #8FB94A;
	background: #8FB94A;
}
.pagelink:hover .arrow::before {
	background: #fff;
}
.pagelink:hover .arrow::after {
	border-color: transparent transparent transparent #fff;
}


/*** backlink ***/
.backlink {
	position: relative;
	display: inline-block;
	line-height: 1.0;
	color: #000;
	font-size: 86%;
	font-weight: bold;
	text-decoration: none;
	padding-left: 2.0em;
}
.backlink::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0.2em;
	width: 1.5em;
	height: 1px;
	background: #000;
}
.backlink::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0.2em;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 5px 10px;
	border-color: transparent transparent #000 transparent;
}


/*** prevlink ***/
.prevlink {
	position: relative;
	display: inline-block;
	line-height: 1.0;
	color: #000;
	font-size: 86%;
	font-weight: bold;
	text-decoration: none;
	padding-right: 2.0em;
}
.prevlink::before {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0.2em;
	width: 1.5em;
	height: 1px;
	background: #000;
}
.prevlink::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0.2em;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 0 10px;
	border-color: transparent transparent transparent #000;
}




/**************************************
  (screen)
**************************************/

#screen {
	position: fixed;
	left: 0;
	bottom: 0;
	color: #999;
	font-size: 8px;
}
#screen:after {
	content: '@ DESKTOP';
}



/**************************************
  (theme)
**************************************/

#theme {
	position: fixed;
	right: 0;
	bottom: 0;
	color: #999;
	font-size: 8px;
}





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

@ TABLET

////////////////////////////////////////////////////////////
***********************************************************/
@media only screen and (max-width: 960px) {

	
	/**************************************
	  base
	**************************************/
	html, body {
		/*font-size: 15px;*/
	}

	.inner {
		max-width: 580px;
		padding: 0 15px;
	}
	
	.pc	{ display: none; }
	.sp	{ display: none; }
	.tb	{ display: inherit; }
	
	

	/**************************************
	  head
	**************************************/
	#head {
		text-align: left;
	}

	/*** logo ***/
	#head .logo {
		width: 22vw;
		max-width: 120px;
		margin: 0 10px;
	}

	/*** lang ***/
	#head .lang {
		right: auto;
		left: 20px;
		opacity: 0;
		pointer-events: none;
	}
	.on_menu_open #head .lang {
		display: block;
		opacity: 1;
		pointer-events: all;
		transition: all .5s .2s ease;
	}

	/*** sns ***/
	#head .sns {
		display: none;
	}

	/*** mail ***/
	#head .mail {
		display: none;
	}

	/*** menu ***/
	#head .menu {

	}
	
	/* toggle */
	#head .menu .toggle {
		top: 10px;
		width: 70px;
		height: 70px;
	}

	/* navi */
	#head .menu .navi {
		display: block;
		overflow: scroll;
	}

	#head .menu .navi .navi_main {
		display: block;
		width: auto;
		padding: 0 30px
	}
	#head .menu .navi .navi_main .box_logo {
		width: 150px;
		margin: 100px auto 20px;
	}
	#head .menu .navi .navi_main .box_navi {
		
	}
	#head .menu .navi .navi_main .box_navi .head_menu {
		display: block;
		writing-mode: unset;
		height: auto;
	}
	#head .menu .navi .navi_main .box_navi .head_menu li a {
		font-size: 109%;
	}

	#head .menu .navi .navi_sub {
		position: relative;
		padding: 30px 30px;
		width: auto;
	}
	#head .menu .navi .navi_sub .box_contact {
		position: relative;
		text-align: center;
		right: auto;
		bottom: auto;
		margin-bottom: 30px;
	}
	#head .menu .navi .navi_sub .box_contact .button {
		display: flex;
		justify-content: space-between;
	}
	#head .menu .navi .navi_sub .box_navi {
		padding: 0;
	}
	#head .menu .navi .navi_sub .box_navi .head_menu_sub {
		display: block;
		margin-right: auto;
	}

	/* menu_sns */
	#head .menu .menu_sns {
		margin-bottom: 90px;
	}

	/*** GTranslate ***/
	#head .gtranslate_wrapper {
		transform: scale(0.8);
		top: 32px;
		left: min(24vw, 140px);
	}


	/**************************************
	  main
	**************************************/
	#main {
		
	}

	/*** page-title ***/
	#main #page-title {

	}

	/** title_image **/
	#main #page-title.title_image {
		height: 420px;
	}

	/* title */
	#main #page-title.title_image .title {
		display: block;
	}
	#main #page-title.title_image .title .ttl {
		display: flex;
		align-items: center;
		height: 100%;
	}
	#main #page-title.title_image .title .ttl h1 {
		position: relative;
		top: auto;
		line-height: 1.2;
		padding-top: 5em;
		z-index: 1;
	}

	/* draw */
	#main #page-title.title_image .draw {
		bottom: 42%;
		left: 2%;
		width: 140%;
		max-width: 640px;
		transform: none;
	}


	/* bgimage */
	#page-title.title_image .bgimage {

	}


	/** title_japanese **/
	#main #page-title.title_japanese {
		height: 420px;
	}

	/* title */
	#main #page-title.title_japanese .title {
		flex-flow: column;
		justify-content: center;
		align-items: flex-start;
	}
	#main #page-title.title_japanese .title .ttl h1 {
		line-height: 1.2;
	}


	/** title_english **/
	#main #page-title.title_english {
		height: 420px;
	}

	/* title */
	#main #page-title.title_english .title {
		flex-flow: column;
		justify-content: center;
		align-items: flex-start;
	}
	#main #page-title.title_english .title .ttl h1 {
		font-size: 320%;
		letter-spacing: 0.05em;
	}
	#main #page-title.title_english .title .ttl p {
		font-size: 86%;
	}



	/*** back ***/
	#page-title .title .back {
		left: 15px;
		bottom: 26px;
	}

	/*** search ***/
	#page-title .title .search {
		position: absolute;
		left: 15px;
		bottom: 24px;
		width: calc(100% - 30px);
	}
	#page-title .title .search form {
		text-align: center;
	}
	#page-title .title .search form input[type=text],
	#page-title .title .search form select {
		display: block;
		width: 100%;
		margin: 6px 0;
		padding: 0.5em 0.5em
	}
	#page-title .title .search form input[type=submit] {
		font-size: 90%;
	}



	/*** message ***/
	#page-title .title .message {
		font-size: 86%;
		bottom: 20px;
	}





	/**************************************
	  foot
	**************************************/
	#foot {
		display: block;
		padding: 60px 20px 20px;
	}

	#foot .logo {
		width: 220px;
		margin: 0 auto 30px;
	}
	#foot .logo .img {
		margin: 0 50px;
	}

	#foot .cont {
		text-align: center;
	}

	#foot .cont .navi {
		margin: 30px 0;
	}
	#foot .cont .navi .foot_menu {
		justify-content: center;
	}
	#foot .copyright {
		font-size: 64%;
		text-align: center;
	}


	/**************************************
	  (to-top)
	**************************************/
	#to-top {
		right: 10px;
		bottom: 110px;
	}
	.on_scroll #to-top {
		bottom: 120px;
	}



	/**************************************
	  (common)
	**************************************/

	/*** button ***/
	.button {
		text-align: left;
	}
	.button .arrow {
		/*width: 50px;*/
	}
	.button.wide {
		min-width: auto;
		display: flex;
	}


	/*** pagelink ***/
	.pagelink {

	}
	.pagelink .cont {

	}
	.pagelink .cont .lead {
		font-size: 200%;
	}


	
	
	/**************************************
	  (screen)
	**************************************/
	#screen:after {
		content: '@ TABLET';
	}
}





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

@ MOBILE

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

	
	/**************************************
	  base
	**************************************/
	html, body {
		
	}
	
	.pc	{ display: none; }
	.tb	{ display: none; }
	.sp	{ display: inherit; }

	
	
	
	/**************************************
	  (screen)
	**************************************/
	#screen:after {
		content: '@ MOBILE';
	}
}