/*=============================
共通
=============================*/


/*=============================
コピーライト
=============================*/
#copyright {
position: absolute;
top: 0.2rem;
right: 0.16rem;
line-height: 1.5;
z-index: 0;
}

.copyright_box img  {
width: 0.12rem;
}

.copyright_box {
color: #fff;
font-size: 0.13rem;
letter-spacing: 0.04em;
}

/*=============================
サイドナビゲーション
=============================*/
#page_navi {
position: absolute;
top:50vh;
right:0.16rem;
transform: translateY(-50%);
text-align: right;
z-index: 1;
}

#page_navi a {
color: #FFF;
text-decoration: none;
}

#page_navi.white a {
color: #222;
text-decoration: none;
}

#page_navi a::after {
content: "●";
font-size: 0.11rem;
padding-left: 0.06rem;
opacity: 0.5;
}


#page_navi .on a::after,
#page_navi li:hover a::after {
content: "●";
font-size: 0.11rem;
padding-left: 0.06rem;
opacity: 1;
color: #00d1cc;
transition: all 0.6s ease;
}

#page_navi a span {
font-size: 0.11rem;
letter-spacing: 0.06em;
opacity: 0;
transition: all 0.6s ease;
}

#page_navi a:hover span {
opacity: 1;
}

/*=============================
ボタン
=============================*/
/* 背景色無しの基本形 */
.btn_common {
max-width: 210px;
margin-top: 0.2rem;
position: relative;
}

.btn_common a {
display: block;
border: 1px solid #fff;
box-sizing: border-box;
padding: 15px 10px;
text-decoration: none;
color: #fff;
font-size: 0.13rem;
position: relative;
letter-spacing: 0.06;
}

/* 擬似要素の共通スタイル */
.btn_common a::after,
.btn_common a::before,
.btn_common a span::after,
.btn_common a span::before {
background-color: #00d1cc;
content: '';
display: block;
position: absolute;
z-index: 10;
transition: all .3s ease;
-webkit-transition: all .3s ease;
}

/* 左上へ配置 */
.btn_common a::after {
height: 1px;
left: -1px;
top: -1px;
width: 0px;
}
/* 右下へ配置 */
.btn_common a::before {
bottom: -1px;
height: 1px;
right: -1px;
width: 0px;
}
/* 左下へ配置 */
.btn_common a span::after {
bottom: -1px;
height: 0px;
left: -1px;
width: 1px;
}
/* 右下へ配置 */
.btn_common a span::before {
height: 0px;
right: -1px;
top: -1px;
width: 1px;
}

/* hover */
.btn_common a:hover::after,
.btn_common a:hover::before {
width: 100%;
width: calc(100% + 1px);
}
.btn_common a:hover span::after,
.btn_common a:hover span::before {
height: 100%;
height: calc(100% + 1px);
}

.btn_common a:hover {
color:  #00d1cc;
}

.btn_common a img {
float: right;
padding-top: 3px;
}

/* 矢印（白から緑） */
.btn_common a i {
width: 0.35rem;
height: 0.06rem;
position: absolute;
top:50%;
transform: translateY(-50%);
right: 0.1rem;
background: url("../img/arrow_white.png") no-repeat right center;
background-size: auto 100%;
transition: width 0.3s ease, right 0.3s ease;
}

.btn_common a:hover i {
width: 0.25rem;
right: 0.06rem;
background: url("../img/arrow_green.png") no-repeat right center;
background-size: auto 100%;
}

/* 矢印（黒から緑） */
.btn_common.btn_bk a i {
background: url("../img/arrow_black.png") no-repeat right center;
background-size: auto 100%;
}

.btn_common.btn_bk a:hover i {
width: 0.25rem;
right: 0.06rem;
background: url("../img/arrow_green.png") no-repeat right center;
background-size: auto 100%;
}

/* 矢印（白から緑） */
.btn_common.btn_wh_gr a i {
background: url("../img/arrow_white.png") no-repeat right center;
background-size: auto 100%;
}

.btn_common.btn_wh_gr a:hover i {
width: 0.25rem;
right: 0.06rem;
background: url("../img/arrow_green.png") no-repeat right center;
background-size: auto 100%;
}

/*
.btn_common a:hover {
background: #00d1cc;
border: 1px solid #00d1cc;
color: #000;
}
*/

/*白*/
.btn_wh a {
border: 1px solid #fff;
color: #fff;
}

/*黒*/
.btn_bk a {
color: #1a1a1a;
background: #00d1cc;
border: 1px solid #FFF;
}

.btn_bk a:hover {
background: #FFF;
color: #00d1cc;
}

/*白→緑*/
.btn_wh_gr a {
color: #fff;
background: #00d1cc;
border: 1px solid #FFF;
}

.btn_wh_gr a:hover {
background: #FFF;
color: #00d1cc;
}

/*=============================
フッターナビ
=============================*/
#bottom_nav {
margin: 0 auto;
background: #eac100;
padding-top: 0.3rem;
padding-bottom: 0.3rem;
}

#bottom_nav ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

#bottom_nav li {
text-align: center;
box-sizing: border-box;
}

#bottom_nav li:first-child a{
border-left: none;
}

#bottom_nav li a {
color: #333;
text-decoration: none;
border-left: 1px solid #333;
padding-left: 0.25rem;
padding-right: 0.25rem;
font-weight: bold;
}

@media screen and (max-width: 699px) {
#bottom_nav {
width: 100%;
}
#bottom_nav li {
width: 33.33%;
margin-bottom: 0.2rem;
}
#bottom_nav li:first-child a{
border-left: none;
}
#bottom_nav li a {
padding-left: 0;
padding-right: 0;
display: block;
}
#bottom_nav li:nth-child(4) a {
border-left: none;
}
}
/*=============================
フッター
=============================*/
footer {
padding-top: 0.8rem;
padding-bottom: 1.2rem;
color: #fff;
position: relative;
overflow-x: hidden;
}

@media screen and (max-width: 699px) {
footer {
padding-top: 0.4rem;
}
}

footer a {
color: #fff;
text-decoration: none;
}
.footer_Box {
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
}

/*左*/
.footer_Left {
width: 40%;
box-sizing: border-box;
padding-right: 30px;
}

/* 20220225 Added Certificate Mark */
.footer_certificate {
  display: flex;
  margin-top: 15px;
}

.footer_certificate li {
  flex-shrink: 0;
  width: calc(100% * 4 / 12 - 0.01px);
  max-width: 50px;
  padding: 10px 5px 0 0;
}

.footer_certificate li:last-of-type {
  padding-right: 0;
}

.footer_certificate_logo {
  display: flex;
  align-items: center;
  padding: 5px;
  background-color: #fff;
}

@media screen and (min-width: 700px) {
  .footer_certificate {
    max-width: 210px;
  }
}

@media screen and (max-width: 699px) {
.footer_Left {
width: 80%;
padding-right: 0;
padding-top: 0.4rem;
margin: auto;
}
.footer_Left_Btn {
width: 100%;
max-width: 100%;
}
}

/*ロゴ*/
.footer_Left_Logo {
padding-bottom: 0.3rem;
}
.footer_Left_Logo img{
padding-bottom: 0.3rem;
height: 0.3rem;
}
.footer_Left_Logo_Border {
width: 0.5rem;
border-top: 1px solid #fff;
}

/* 20210319 Pマーク追加 */
@media screen and (max-width: 699px) {
	.footer_Left_Logo {
		position: relative;	
	}
}

/*住所*/
.footer_Left_Add p {
color: #fff;
font-size: 0.14rem;
}

/*右*/
.footer_Right {
width: 60%;
box-sizing: border-box;
}

@media screen and (max-width: 699px) {
.footer_Right {
width: 100%;
}
.footer_Right ul {
display: flex;
flex-wrap: wrap;
}
}

.footer_Right li {
margin-bottom: 0.2rem;
}

@media screen and (max-width: 699px) {
.footer_Right li {
width: 50%;
}
}

.footer_Right li a {
font-size: 0.14rem;
letter-spacing: 0.06em;
}

.footer_Right li a::before {
content: "";
width: 0.06rem;
height: 0.03rem;
background:  #00d1cc;
display: inline-block;
position: relative;
top: -0.04rem;
margin-right: 0.08rem;
transition: all 0.3s ease;
}

.footer_Right li a:hover {
color: #00d1cc;
}

.footer_Right li a:hover::before {
width: 0.09rem;
}

.footer_Right li img {
vertical-align: middle;
padding-right: 0.1rem;
}

/*パーティクル*/
footer #particles_02 {
width: 40%;
height: 100%;
position: absolute;
top: 0;
right: -1rem;
bottom: 0;
display: block;
z-index: 0;
}

@media screen and (max-width: 699px) {
footer #particles_02 {
width: 100%;
height:1.6rem;
position: absolute;
top: inherit;
bottom:0;
right: 0;
z-index: 0;
}
}

/* スマホのみコピーライト */
.footer_copyright {
padding-top: 0.4rem;
font-size: 0.12rem;
text-align: center;
}

/*=============================
共通
=============================*/
/*セクションタイトル*/
.top_secTitle {
text-align: center;
margin-bottom: 0.6rem;
}

.top_secTitle h2 {
display: inline-block;
position: relative;
text-align: center;
font-size: 0.2rem;
letter-spacing: 0.1em;
}

.top_secTitle h2:before {
content: '';
position: absolute;
left: 50%;
bottom: -0.16rem; /*下線の上下位置調整*/
display: inline-block;
width: 20px; /*下線の幅*/
height: 2px; /*下線の太さ*/
-webkit-transform: translateX(-50%);
transform: translate(-50%); /*位置調整*/
background: rgba(255,255,255,1);
/*下線の色*/
background: rgba(0,209,206,0.6);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,209,206,0.6)), color-stop(47%, rgba(0,209,206,0.79)), color-stop(100%, rgba(0,209,206,1)));
background: -webkit-linear-gradient(left, rgba(0,209,206,0.6) 0%, rgba(0,209,206,0.79) 47%, rgba(0,209,206,1) 100%);
background: linear-gradient(to right, rgba(0,209,206,0.6) 0%, rgba(0,209,206,0.79) 47%, rgba(0,209,206,1) 100%);
}

/*=============================
CONTACT US
=============================*/
#contact {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background: #fff;
}
/*セクションタイトル*/
#contact .top_secTitle {
margin-bottom: 0.6rem;
}

.top_contact_box p {
text-align: center;
font-weight: bold;
margin-bottom: 30px;
line-height: 2;
}

@media screen and (max-width: 699px) {
.top_contact_box p {
text-align: left;
font-weight: 400;
margin-bottom: 30px;
line-height: 2;
}
}

.top_contact_box_btn {
margin: 0 auto;
}



/*=============================
NEWS & INFORMATION
=============================*/
#top_news {
color: #fff;
background: #1a1a1a;
}

.top_news_wrapper {
margin-bottom: 40px;
}
.top_news_box {
margin-bottom: 0.2rem;
line-height: 1.7;
}

.top_news_box .motion-txt {
display: block;
}

.top_news_box a {
text-decoration: none;
color: #FFF;
display: block;
}

.top_news_box a:hover {
opacity: 0.7;
}

.top_news_box dl {
display: flex;
flex-wrap: wrap;
}

/*日付*/
.top_news_box dt {
width: 18%;
font-size: 0.13rem;
padding-top: 0.02rem;
}

@media screen and (max-width: 699px) {
.top_news_box dt {
width: 100%;
}
}

/*カテゴリ*/
.top_news_box dt span {
padding-right: 0.1rem;
display: inline-block;
}
.top_news_box dt em.top_news_box_cate {
padding-left: 0.1rem;
}
.top_news_box dt em.top_news_box_cate_01 {
border-left: 3px solid #00d1cc;
}
.top_news_box dt em.top_news_box_cate_02 {
border-left: 3px solid #d9e021;
}
.top_news_box dt em.top_news_box_cate_03 {
border-left: 3px solid #c1272d;
}
.top_news_box dt em.top_news_box_cate_04 {
border-left: 3px solid #0071bc;
}

.top_news_box dt em.articlecat-news {
border-left: 3px solid #00d1cc;
}
.top_news_box dt em.articlecat-press {
border-left: 3px solid #d9e021;
}
.top_news_box dt em.articlecat-media {
border-left: 3px solid #c1272d;
}
.top_news_box dt em.articlecat-recruit {
border-left: 3px solid #0071bc;
}

/*本文*/
.top_news_box dd  {
width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (max-width: 699px) {
/*テキスト*/
.top_news_box dd {
    width: 100%;
}
}

/*ボタン*/
.top_news_btn {
margin-left: auto;
margin-right: auto;
}






/*=============================
ページ切り替えアニメーション
=============================*/
.fade_group div ,
.fade_group2 div {
    content: '';
    position: fixed;
    top: 0;
/*    left: -100vw;*/
	left: 100vw;
    width: 100vw;
    height: 100%;
    pointer-events: none;
}
.fade_group2 div.fade_group2_01 {
    top: 0;
/*    left: -100vw;*/
	left: 100vw;
    width: 100vw;
    height: 100%;
    pointer-events: none;
}
.fade_group2 div.fade_group2_02 {
    top: 20vh;
/*    left: -100vw;*/
	left: 100vw;
    width: 100vw;
    height: 100%;
    pointer-events: none;
}
.fade_group2 div.fade_group2_03 {
    top: 40vh;
/*    left: -100vw;*/
	left: 100vw;
    width: 100vw;
    height: 100%;
    pointer-events: none;
}
.fade_group2 div.fade_group2_04 {
    top: 60vh;
/*    left: -100vw;*/
	left: 100vw;
    width: 100vw;
    height: 100%;
    pointer-events: none;
}
.fade_group2 div.fade_group2_05 {
    top: 80vh;
/*    left: -100vw;*/
	left: 100vw;
    width: 100vw;
    height: 100%;
    pointer-events: none;
}
.fade_group2 div.fade_group2_02 {
    top: 50vh;
/*    left: -100vw;*/
	left: 100vw;
    width: 100vw;
    height: 100%;
    pointer-events: none;
}
.fade_group div {
    z-index: 9999;
    transition: .6s;
}
.fade_group2 div {
    z-index: 9998;
    transition: .8s;
}
/*
.fade_group div:nth-of-type(1) {
    background: rgba(0, 209, 209,.3);
}
.fade_group div:nth-of-type(2) {
    background: rgba(0, 209, 209,.5);
    transition-delay:.1s;
}
.fade_group div:nth-of-type(3) {
    background: rgba(0, 209, 209,.7);
    transition-delay:.2s;
}
*/
.fade_group div:nth-of-type(4) {
    background: #1a1a1a;
    transition-delay:.0s;
}
.fade_group2 div:nth-of-type(1) {
/*    background: rgba(0, 209, 209,.8);*/
	background: url("../img/pagekirikae.png");
    transition-delay: .1s;
	opacity: 0.3;
}
.fade_group2 div:nth-of-type(2) {
/*    background: rgba(0, 209, 209,.8);*/
	background: url("../img/pagekirikae.png");
    transition-delay: .2s;
	opacity: 0.3;
}
.fade_group2 div:nth-of-type(3) {
	background: url("../img/pagekirikae.png");
/*    background: rgba(0, 209, 209,.8);*/
    transition-delay: .3s;
	opacity: 0.3;
}
.fade_group2 div:nth-of-type(4) {
	background: url("../img/pagekirikae.png");
/*    background: rgba(0, 209, 209,.8);*/
    transition-delay: .4s;
	opacity: 0.3;
}
.fade_group2 div:nth-of-type(5) {
/*    background: rgba(0, 209, 209,.8);*/
	background: url("../img/pagekirikae.png");
    transition-delay: .5s;
	opacity: 0.3;
}
body.fo .fade_group div{
    left: 0;
}
body.fo .fade_group2 div{
/*    left: 100vw;*/
    left: 0;
}