@charset "utf-8";
/* CSS Document */


body { font-family: "MS Pゴシック", sans-serif ; }


p.font { font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; line-height: 120%; }

#fixedTop { width: 42px; height: 42px; text-align: center; line-height: 38px; color: #fff; font-size: 20px; border-radius: 42px; background: #199381; position: fixed; right: 9px; bottom: -60px; -webkit-transform: translateZ(0); z-index: 9999; }


/**----------	----------	----------	----------	----------
navi		navi
----------	----------	----------	----------	----------	**/
/* OPEN / CLOSE BTNS */
.menu-btn { z-index: 9999; position: absolute; top: 10px; right: 10px; z-index: 9999; position: fixed; display: inline; width: 42px; height: 42px; text-align: center; font-size: 42px; line-height: 42px; background: #ffdb01; 

}

.menu-btn a { display: inline-block; text-decoration: none; /* safari hack */ }
.btn-open:after { color: #000; content: "\f394"; font-family: "Ionicons"; -webkit-transition: all .2s linear 0s; -moz-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; transition-property: all .2s linear 0s; }
.btn-open:hover:after { color: #000; }
.btn-close:after { color: #000; content: "\f2d7"; font-family: "Ionicons"; -webkit-transition: all .2s linear 0s; -moz-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; transition-property: all .2s linear 0s; }
.btn-close:hover:after { color: #000; }
/* OVERLAY */
.overlay { position: fixed; top: 0; z-index: 9900; display: none; overflow: auto; width: 100%; height: 100%; background: rgba(0,0,0,0.8); }
.overlay .menu { margin: 10% auto; width: 80%; }
.overlay .menu ul {  width: 100%; margin: 0; padding: 0; }
.overlay .menu ul li { width: 100%; margin-bottom: 0; padding: 20px 0; float: none; list-style: none; text-align: center; text-transform: uppercase; border-bottom: 1px solid #575757; }
.overlay .menu ul li.nones { padding: 20px 0 0; border-bottom: none; }
.overlay .menu ul li.nonesmini { padding: 0 0; border-bottom: none; }

/*.overlay .menu ul li:last-child { border: 0; }*/
.overlay .menu ul li a { width: 100%; font-size: 14px; text-decoration: none; font-weight: 400; color: #fff; }
.overlay .menu ul ul { margin-top: 0; }
.overlay .menu ul ul li { position: relative; width: 100%; margin: 0; padding: 10px 0; float: none;  }
.overlay .menu ul ul li a { font-size: 10px; font-weight: 400; text-transform: capitalize; color: #fff; }
.overlay .menu ul ul li a:hover { color: #888888; }

img.size { display: block; width: 100%; max-width: 42px; margin: 0 auto; }

.navarrow{ position: relative; display: inline-block; padding: 0 0 0 25px; text-decoration: none; color: #000; vertical-align: middle; }
.navarrow::before,
.navarrow::after{ position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; }
.navarrow::before{ left: 10px; box-sizing: border-box; width: 4px; height: 4px; border: 4px solid transparent; border-left: 4px solid #fff; }







#contents { }


.top_visual { clear: both; position: relative; height: 740px; }

.logo { z-index: 9900; }
.logo img { width: 100%; max-width: 80px; }


.top_visual .bgimageloop_hero_top { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 520px; /* 画像の高さを指定 */ background: url("../images/top_visual.jpg") repeat-x 0 0; background-size: auto 100%; animation: bg-bgimageloop_hero_top 120s linear infinite; margin: 0 0; padding: 0; }

@keyframes bg-bgimageloop_hero_top {
from { background-position: 0 0; }
to { background-position: -1860px 0; }
}


.top_visual .hero { z-index: 9999; position: absolute; right: 0; bottom: -220px; left: 0; margin: auto; max-width: 100%; }

.top_visual .hero .top_title { width: 100%; max-width: 320px; margin: 0 auto; }
.top_visual .hero .top_title img { width: 100%; max-width: 320px; }

.topnavi { clear: both; display: block; margin: 0 0; padding: 0 2.5px 0; box-sizing: border-box; }
.topnavi ul.navibox { display: flex; }
.topnavi ul.navibox li { width: 33.3%; padding: 0 2.5px 0; box-sizing: border-box; }
.topnavi ul.navibox li img { display: block; width: 100%; max-width: 300px; }
.naviboxsecond { margin: 5px 0 0; }
.topnavi ul.navibox li .navibutton { clear: both; position: relative; }
.topnavi ul.navibox li .navibutton p { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-size: 14px; color: #fff; }


.horizontal { width: 100%; clear: both; margin: 0 0; }
.horizontal ul.horizontal_list { overflow-x: auto; white-space: nowrap; }
.horizontal ul.horizontal_list li.item { display: inline-block; width: 80%; height: auto; margin: 0 5px 0 0; font-size: 48px; box-sizing: border-box; }
.horizontal ul.horizontal_list li.item .item_frame { box-sizing: border-box; }

.youtube { padding: 5px 0 0; box-sizing: border-box; background-repeat: no-repeat; }
.youtube .youtube_inner { aspect-ratio: 16 / 9; }
.youtube .youtube_inner iframe { width: 100%; height: 100%; }












/**----------	----------	----------	----------	----------
footer		footer
----------	----------	----------	----------	----------	**/
footer { clear: both; background: #222; }

footer .arrows { text-align: center; border-bottom: solid 1px #121212; }
footer .arrows a { display: block; width: 100%; padding: 10px 0; }
footer ul.navi { display: block; text-align: center; border-top: solid 1px #2a2a2a; border-bottom: solid 1px #121212; }
footer ul.navi li { display: inline; padding: 0 6px; }
footer ul.navi li a { text-decoration: none; font-size: 14px; line-height: 42px; color: #bbbbbb; }
footer ul.navi li a:hover { color: #fff; }

footer .footer_frame { clear: both; display: block; padding: 10px 0 0; box-sizing: border-box; border-top: solid 1px #2a2a2a; }
footer .footer_frame .left_box { width: 100%; padding: 0 0 20px; float: left; border-bottom: solid 1px #121212; }
footer .footer_frame .left_box ul { text-align: center; }
footer .footer_frame .left_box ul li { width: 100%; margin: 0 0; float: left; }
footer .footer_frame .left_box ul li.left { padding: 0 0; text-align: center; box-sizing: border-box; }
footer .footer_frame .left_box ul li.right { }

footer .footer_frame .left_box ul li.right { padding: 0; box-sizing: border-box; }
footer .footer_frame .left_box ul li img { width: 100%; max-width: 60px; }
footer .footer_frame .left_box ul li p { text-align: center; font-size: 14px; line-height: 150%; color: #bbbbbb; }
footer .footer_frame .center_box { clear: both; display: block; width: 100%; margin: 0 0; font-size: 14px; }
footer .footer_frame .center_box ul.navigation { padding-left: 0; box-sizing: border-box; }
footer .footer_frame .center_box ul.navigation li { padding: 20px 10px; box-sizing: border-box; }
footer .footer_frame .center_box ul.navigation li.blocks { border-top: solid 1px #2a2a2a; border-bottom: solid 1px #121212; }
footer .footer_frame .center_box ul.navigation li.first {}
footer .footer_frame .center_box ul.navigation li.end { }
footer .footer_frame .center_box ul.navigation li ul { margin: 0 0 0; }
footer .footer_frame .center_box ul.navigation li ul li { border: none; font-size: 14px; }
footer .footer_frame .center_box ul.navigation li ul li.mains { padding: 0 0 10px; }

footer .footer_frame .center_box ul.navigation li ul li.contents { padding: 10px 0 0; font-size: 14px; }
footer .footer_frame .center_box ul.navigation li ul li a { text-decoration: none; color: #bbbbbb; }
footer .footer_frame .center_box ul.navigation li ul li a:hover { color: #fff; }
footer .footer_frame .center_box ul.navigation li ul li .navarrow{ position: relative; display: inline-block; padding: 0 0 0 25px; text-decoration: none; color: #bbbbbb; vertical-align: middle; }
footer .footer_frame .center_box ul.navigation li ul li .navarrow::before,
footer .footer_frame .center_box ul.navigation li ul li .navarrow::after{ position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; }
footer .footer_frame .center_box ul.navigation li ul li .navarrow::before{ left: 10px; box-sizing: border-box; width: 4px; height: 4px; border: 4px solid transparent; border-left: 4px solid #bbbbbb; }
footer .footer_frame .right_box { display: none; }
footer .cominfo { display: none; }
footer .copy { clear: both; padding: 20px; text-align: center; color: #fff; box-sizing: border-box; border-top: solid 1px #2a2a2a; }
footer .copy p { text-align: center; font-size: 12px; line-height: 150%; color: #fff; letter-spacing: 1px; }
footer .copy p span { color: #bbbbbb; }









/******************************************			SPSP     481px～767px		*******************************************/
/******************************************			SPSP     481px～767px		*******************************************/
/******************************************			SPSP     481px～767px		*******************************************/
/******************************************			SPSP     481px～767px		*******************************************/

@media only screen and (min-width: 481px) {

#contents .contents_flame { }




.top_visual { clear: both; position: relative; height: 520px; }

.logo { z-index: 9999; }
.logo img { width: 100%; max-width: 80px; }

.top_visual .hero { position: absolute; right: 0; bottom: 10px; left: 0; margin: auto; max-width: 95%; display: flex; }

.top_visual .hero .top_title { width: 20%; max-width: 600px; margin: 0 auto; }
.top_visual .hero .top_title img { width: 100%; max-width: 680px; }



.topnavi { width: 80%; padding: 0 2.5px 0; }
.topnavi .navi_in { display: flex; }
.topnavi ul.navibox { width: 50%; }
.topnavi ul.navibox li { width: 33.3%; padding: 0 2.5px 0; box-sizing: border-box; }
.topnavi ul.navibox li img { display: block; width: 100%; max-width: 300px; }
.navibox {}
.naviboxsecond { margin: 0 0; }
.topnavi ul.navibox li .navibutton { clear: both; position: relative; }
.topnavi ul.navibox li .navibutton p { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-size: 14px; color: #fff; }





.youtube {}
.youtube .youtube_inner {}
.youtube .youtube_inner iframe { width: 100%; height: 100%; }








}






/******************************************			tablet	768px～1023px		*******************************************/
/******************************************			tablet	768px～1023px		*******************************************/
/******************************************			tablet	768px～1023px		*******************************************/
/******************************************			tablet	768px～1023px		*******************************************/
@media only screen and (min-width: 768px) {




.top_visual { clear: both; position: relative; height: 720px; }

.top_visual .bgimageloop_hero_top { height: 720px; }


.top_visual .hero { }

.top_visual .hero .top_title { width: 20%; max-width: 600px; margin: 0 auto; }
.top_visual .hero .top_title img { width: 100%; max-width: 680px; }



.topnavi { width: 80%; padding: 0 2.5px 0; }
.topnavi .navi_in { display: flex; }
.topnavi ul.navibox { width: 50%; }
.topnavi ul.navibox li { width: 33.3%; padding: 0 2.5px 0; box-sizing: border-box; }
.topnavi ul.navibox li img { display: block; width: 100%; max-width: 300px; }
.topnavi ul.navibox li .navibutton { clear: both; position: relative; }
.topnavi ul.navibox li .navibutton p { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 12px; color: #fff; }








.horizontal { }
.horizontal ul.horizontal_list {}

.horizontal ul.horizontal_list li.item { }


.horizontal ul.horizontal_list li.item .item_frame { box-sizing: border-box; }

.youtube { }
.youtube .youtube_inner { }
.youtube .youtube_inner iframe { }







/**----------	----------	----------	----------	----------
footer		footer
----------	----------	----------	----------	----------	**/
footer .arrows { text-align: center; }
footer ul.navi { display: block; width: 100%; padding: 20px 0; text-align: center; font-size: 12px; }
footer ul.navi li { display: inline; width: 20%; padding: 0 20px; border-left: solid 1px #2a2a2a; }
footer ul.navi li:last-child { border-right: solid 1px #2a2a2a; }
footer ul.navi li a { text-decoration: none; line-height: 200%; }
footer .footer_frame { display: block; padding: 20px 0; box-sizing: border-box; }
footer .footer_frame .left_box { width: 100%; padding: 0 0 20px; float: left; }
footer .footer_frame .left_box ul { text-align: center; }
footer .footer_frame .left_box ul li { width: 50%; margin: 0 0; float: left; }
footer .footer_frame .left_box ul li.left { padding: 0 20px 0 0; text-align: right; box-sizing: border-box; }
footer .footer_frame .left_box ul li.right { }
footer .footer_frame .left_box ul li img { width: 100%; max-width: 80px; text-align: right; }
footer .footer_frame .left_box ul li p { text-align: left; }
footer .footer_frame .center_box { clear: both; width: 100%; padding: 20px 0 0; border-top: solid 1px #2a2a2a; border-bottom: solid 1px #121212; }
footer .footer_frame .center_box { display: block; }
footer .footer_frame .center_box ul.navigation { width: auto; margin: 0 auto; padding: 0; text-align: center; box-sizing: border-box; }
footer .footer_frame .center_box ul.navigation li { display: inline-block; padding: 0; border-bottom: none; }
footer .footer_frame .center_box ul.navigation li.blocks { width: auto; padding: 0 10px 0; border: none; vertical-align: top; }
footer .footer_frame .center_box ul.navigation li.end {}
footer .footer_frame .center_box ul.navigation li.blocks .navarrow{ position: relative; display: inline-block; padding: 0 0 0 15px; text-decoration: none; vertical-align: middle; color: #bbbbbb; }
footer .footer_frame .center_box ul.navigation li.blocks .navarrow::before,
footer .footer_frame .center_box ul.navigation li.blocks .navarrow::after{ position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; }
footer .footer_frame .center_box ul.navigation li.blocks .navarrow::before{ left: 0; box-sizing: border-box; width: 4px; height: 4px; border: 4px solid transparent; border-left: 4px solid #bbbbbb; }
footer .footer_frame .center_box ul.navigation li.blocks .navarrow:hover { color: #fff; }
footer .footer_frame .center_box ul.navigation li.first { padding: 0 10px 0; }
footer .footer_frame .center_box ul.navigation li ul { margin: 20px 0; }
footer .footer_frame .center_box ul.navigation li ul li { display: block; width: 100%; border: none; }
footer .footer_frame .center_box ul.navigation li ul li.mains { padding: 0 0 10px 0; text-align: left; box-sizing: border-box; }
footer .footer_frame .center_box ul.navigation li ul li.contents { padding: 10px 0; text-align: left; box-sizing: border-box; }
footer .footer_frame .center_box ul.navigation li ul li a { text-decoration: none; color: #bbbbbb; }
footer .footer_frame .center_box ul.navigation li ul li a:hover { color: #fff; }
footer .footer_frame .right_box { clear: both; display: block; width: 100%; padding: 20px 0 0; border-top: solid 1px #2a2a2a; }
footer .footer_frame .right_box ul { text-align: center; }
footer .footer_frame .right_box ul li { }
footer .footer_frame .right_box ul li a { text-decoration: none; color: #bbbbbb; }
footer .footer_frame .right_box ul li a:hover { color: #fff; }
footer .cominfo { display: block; }
footer .cominfo { width: 100%; height: 40px; margin: 0; text-align: center; background-color: #2a2a2a; transition: all 0.9s ease; }
footer .cominfo:hover { background-color: #121212; }
footer .cominfo p { text-align: center; padding: 0 20px 0 0; line-height: 36px; box-sizing: border-box; }
footer .cominfo p a { display: block; text-decoration: none; color: #bbbbbb; }
footer .cominfo p a:hover { }
footer .cominfo p img { width: 32px; vertical-align: middle; padding: 0 10px; }
footer .copy { padding: 20px; text-align: center; color: #fff; box-sizing: border-box; border-top: none; }
footer .copy p {}
footer .copy p span { }


}






/******************************************			tablet	1024px～1249px		*******************************************/
/******************************************			tablet	1024px～1249px		*******************************************/
/******************************************			tablet	1024px～1249px		*******************************************/
/******************************************			tablet	1024px～1249px		*******************************************/
@media only screen and (min-width: 1024px) {



.top_visual { clear: both; position: relative; height: 720px; }

.top_visual .bgimageloop_hero_top { height: 720px; }


.top_visual .hero { position: absolute; right: 0; bottom: 0; left: 0; margin: auto; max-width: 80%; display: flex; }

.top_visual .hero .top_title { width: 35%; max-width: 600px; margin: 0 auto; }
.top_visual .hero .top_title img { width: 100%; max-width: 680px; }



.topnavi { width: 65%; padding: 0 2.5px 0; }
.topnavi .navi_in { display: flex; }
.topnavi ul.navibox { width: 50%; }
.topnavi ul.navibox li { width: 33.3%; padding: 0 2.5px 0; box-sizing: border-box; }
.topnavi ul.navibox li img { display: block; width: 100%; max-width: 300px; }
.topnavi ul.navibox li .navibutton { clear: both; position: relative; }
.topnavi ul.navibox li .navibutton p { position: absolute; bottom: 15px; left: 0; right: 0; text-align: center; font-size: 12px; color: #fff; }







.horizontal { width: 100%; }
.horizontal ul.horizontal_list { }

.horizontal ul.horizontal_list li.item { display: inline-block; width: 25%; height: auto; margin: 0; }


.horizontal ul.horizontal_list li.item .item_frame { box-sizing: border-box; }



.youtube { display: block; width: 100%; }
.youtube .youtube_inner { display: block; width: 100%; height: 80%; max-width: 980px; margin: 0 auto; }
.youtube .youtube_inner iframe { }







/**----------	----------	----------	----------	----------
footer		footer
----------	----------	----------	----------	----------	**/
footer { width: 100%; }
footer #wraps { clear: both; }






}





/******************************************			PCPC     1250px～1500px		*******************************************/
/******************************************			PCPC     1250px～1500px		*******************************************/
/******************************************			PCPC     1250px～1500px		*******************************************/
/******************************************			PCPC     1250px～1500px		*******************************************/

@media only screen and (min-width: 1250px) {

#contents .contents_flame { }

/*

.youtube { display: block; width: 50%; margin: 0 auto; padding: 0; border-radius: 80px; }
.youtube .youtube_inner { padding: 80px; }
.youtube .youtube_inner iframe { display: block; width: 100%; height: 100%; margin: 0 auto; }

*/


/**----------	----------	----------	----------	----------
footer		footer
----------	----------	----------	----------	----------	**/
footer { }
footer #wraps { }


footer .arrows { text-align: center; }
footer ul.navi { display: block; width: 100%; padding: 20px 0; text-align: center; font-size: 12px; }
footer ul.navi li { display: inline; width: 20%; padding: 0 20px; }
footer ul.navi li:last-child { }
footer ul.navi li a { text-decoration: none; line-height: 200%; }
footer ul.navi li a:hover {}
footer .footer_frame { padding: 20px 0; }
footer .footer_frame .left_box { float: left; }
footer .footer_frame .left_box ul { text-align: left; }
footer .footer_frame .left_box ul li { width: 100%; margin: 0 0; }
footer .footer_frame .left_box ul li { text-align: right; }
footer .footer_frame .left_box ul li.left { width: 50%; }
footer .footer_frame .left_box ul li.right { width: 50%; margin-top: 0; }
footer .footer_frame .left_box ul li img { padding: 0 0; }
footer .footer_frame .left_box ul li p { padding-left: 14px; text-align: left; font-size: 12px; line-height: 200%; }
footer .footer_frame .center_box { clear: both; float: none; text-align: center; font-size: 14px; border-top: solid 1px #2a2a2a; border-bottom: solid 1px #121212; }
footer .footer_frame .right_box { display: block; clear: none; padding: 0; }
footer .footer_frame .right_box ul { margin: 20px 0 0; text-align: center; font-size: 14px; }
footer .footer_frame .right_box ul li a:hover { color: #fff; }
footer .cominfo { display: block; }
footer .cominfo { width: 100%; height: 40px; margin: 0; text-align: right; transition: all 0.9s ease; }
footer .cominfo:hover { }
footer .cominfo p { padding: 0 20px 0 0; line-height: 36px; box-sizing: border-box; }
footer .cominfo p a { display: block; text-decoration: none; font-size: 12px; }
footer .cominfo p a:hover { }
footer .cominfo p img { width: 32px; vertical-align: middle; padding: 0 10px; }
footer .copy { padding: 20px; text-align: center; color: #fff; box-sizing: border-box; border-top: none; }
footer .copy p { display: inline; font-size: 10px; line-height: 150%; }
footer .copy p span { }

}





/******************************************			PCPC     1500px～1799px		*******************************************/
/******************************************			PCPC     1500px～1799px		*******************************************/
/******************************************			PCPC     1500px～1799px		*******************************************/
/******************************************			PCPC     1500px～1799px		*******************************************/

@media only screen and (min-width: 1500px) {



.top_visual { clear: both; position: relative; height: 720px; }

.top_visual .bgimageloop_hero_top { height: 720px; }


.top_visual .hero { position: absolute; right: 0; bottom: 0; left: 0; margin: auto; max-width: 70%; display: flex; }

.top_visual .hero .top_title { width: 40%; max-width: 600px; margin: 0 auto; }
.top_visual .hero .top_title img { width: 100%; max-width: 680px; }



.topnavi { width: 60%; padding: 0 2.5px 0; }
.topnavi .navi_in { display: flex; }
.topnavi ul.navibox { width: 50%; }
.topnavi ul.navibox li { width: 33.3%; padding: 0 2.5px 0; box-sizing: border-box; }
.topnavi ul.navibox li img { display: block; width: 100%; max-width: 300px; }
.topnavi ul.navibox li .navibutton { clear: both; position: relative; }
.topnavi ul.navibox li .navibutton p { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-size: 14px; color: #fff; }



/**----------	----------	----------	----------	----------
footer		footer
----------	----------	----------	----------	----------	**/

footer .arrows { text-align: center; }
footer ul.navi { display: block; width: 100%; padding: 20px 0; text-align: center; font-size: 12px; }
footer ul.navi li { display: inline; width: 20%; padding: 0 20px; }
footer ul.navi li:last-child { }
footer ul.navi li a { text-decoration: none; line-height: 200%; }
footer ul.navi li a:hover {}
footer .footer_frame { width: auto; margin: 0 auto; padding: 20px 0; }
footer .footer_frame .center_box ul.navigation { }
footer .footer_frame .center_box ul.navigation li.blocks { padding: 0 40px 0; }
footer .footer_frame .center_box ul.navigation li ul li.mains { text-align: center; }
footer .cominfo { display: block; }
footer .cominfo { width: 100%; height: 40px; margin: 0; text-align: right; transition: all 0.9s ease; }
footer .cominfo:hover { }
footer .cominfo p { padding: 0 20px 0 0; line-height: 36px; box-sizing: border-box; }
footer .cominfo p a { display: block; text-decoration: none; font-size: 12px; }
footer .cominfo p a:hover { }
footer .cominfo p img { width: 32px; vertical-align: middle; padding: 0 10px; }
footer .copy { padding: 20px; text-align: center; color: #fff; box-sizing: border-box; border-top: none; }
footer .copy p { display: inline; font-size: 10px; line-height: 150%; }
footer .copy p span { }


}





/******************************************			PCPC     1800px～		*******************************************/
/******************************************			PCPC     1800px～		*******************************************/
/******************************************			PCPC     1800px～		*******************************************/
/******************************************			PCPC     1800px～		*******************************************/

@media only screen and (min-width: 1800px) {









}