/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
汎用
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
main {}

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-thumb {background: #005243;}
::-webkit-scrollbar-track-piece {background: #fff;}

/*clearfix*/
.cf:after {content: ""; display: block; clear: both; visibility: hidden;}

.flex {display: flex;}

/*--------------------------------------------------------------------------
部品
--------------------------------------------------------------------------*/

/*------------------------------------
MORE
------------------------------------*/
.more {position: relative; display: inline-block; color: #fff; font-size: 1rem; letter-spacing: 2px; margin: 20px 0; padding: 16px 64px; border: 2px solid #fff; opacity: 1;}
.more:hover {color: #005243; background: #fff; opacity: 1;}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
テンプレ＆固定ページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
汎用
--------------------------------------------------------------------------*/
header .logo {position: fixed; top: 24px; left: 24px; width: 140px; height: auto; z-index: 9001;}
header #nav-toggle {position: fixed; top: 24px; right: 24px; width: 60px; height: 60px; background: #fff; border-radius: 50%; z-index: 9001;}
header #nav-toggle:hover {cursor: pointer;}
header #nav-toggle div {position: absolute; width: 24px; height: 2px; left: 18px; background: #005243; overflow: hidden; transition: all .5s ease;}
header #nav-toggle div:nth-child(1) {top: 20px;}
header #nav-toggle div:nth-child(2) {top: 28px;}
header #nav-toggle div:nth-child(3) {top: 36px;}
header #g-navi {position: fixed; display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100vh; background: #005243; opacity: 0; z-index: -1; transition: .5s ease;}
header #g-navi a {color: #fff;}

.open-menu header #g-navi {opacity: 1; z-index: 9000;}
.open-menu header #nav-toggle div:nth-child(1) {top: 28px; transform: rotate(45deg);}
.open-menu header #nav-toggle div:nth-child(2) {opacity: 0;}
.open-menu header #nav-toggle div:nth-child(3) {top: 28px; transform: rotate(-45deg);}

footer {background: #005243; text-align: center; padding: 180px 0 0;}
footer .logo {display: block; width: 140px; height: auto; margin: 0 auto 180px;}
footer p {color: #fff; padding: 8px 0;}

.next-seclink {position: absolute; left: 50%; bottom: 50px; transform: translate(-50%,0); color: #fff; z-index: 11;}
.next-seclink:after {content: ""; position: absolute; width: 1px; height: 40px; left: 0; right: 0; bottom: -50px; margin: auto; background: #fff;}

#menu {position: fixed; top: 50%; right: 24px; transform: translate(0,-50%); z-index: 100;}
#menu li {margin: 12px 0;}
#menu li a {display: block; width: 8px; height: 8px; background: #fff; border-radius: 50%;}
#menu li.active a {background: transparent; box-shadow: 0 0 0 2px #fff;}

/*--------------------------------------------------------------------------
TOPページ
--------------------------------------------------------------------------*/
#front .inner {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; z-index: 10;}
#front .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; z-index: 10;}
#front .bg:before {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0, .625); z-index: 11;}
#front section.sec01 .bg {background-image: url(img/back01.jpg);}
#front section.sec02 .bg {background-image: url(img/back02.jpg);}
#front section.sec03 .bg {background-image: url(img/back03.jpg);}
#front section.sec04 .bg {background-image: url(img/back04.jpg);}
#front section.sec05 .bg {background-image: url(img/back05.jpg);}
#front h1 {position: relative; font-size: 6rem; font-weight: 700; line-height: 1.25; text-align: center; color: #fff; z-index: 12;}
#front h2 {font-size: 4rem; font-weight: 700; line-height: 1.25; color: #fff; margin-bottom: 30px;}
#front p {font-size: 1.1rem; color: #fff; margin-bottom: 20px;}
#front .txt {position: relative; width: 40vw; padding: 80px 40px; z-index: 12;}