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

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

[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Header
	3.1 Top Bar
	3.2 Header Content
	3.3 Logo
4. Menu
5. Home
6. Boxes
7. GREETING from PROFESSER
8. ABOUT TIDE
9. Topics & Information
10. Footer
11. Other pages 
12. Members

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

/***********
1. Fonts
***********/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@700&family=Noto+Sans+JP:wght@300;400&display=swap');

/*********************************
2. Body and some general stuff
*********************************/

*
{
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
body
{
	font-family: 'Lato', 'Noto Sans JP', sans-serif;
	font-size: 15px;
	font-weight: 500;
	background: #FFFFFF;
	color: #232323;
}
div
{
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul
{
	list-style: none;
	margin-bottom: 0px;
}
p
{
	font-family: 'Lato', 'Noto Sans JP', sans-serif;
	font-size: 15px;
	line-height: 2;
	font-weight: 500;
	color: #232323;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p:last-of-type
{
	margin-bottom: 0;
}
a
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
a, a:hover, a:visited, a:active, a:link
{
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
a:hover
{
	color: #20d34a !important;
}
::selection
{
	color: #20d34a;
}
p::selection
{
	
}
h1{font-size: 48px;}
h2{font-size: 36px;}
h3{font-size: 24px;}
h4{font-size: 18px;}
h5{font-size: 14px;}
h1, h2, h3, h4, h5, h6
{
	font-family: 'Montserrat', sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
	font-weight: bold;
}
h1::selection, 
h2::selection, 
h3::selection, 
h4::selection, 
h5::selection, 
h6::selection
{
	
}
.form-control
{
	color: #db5246;
}
section
{
	display: block;
	position: relative;
	box-sizing: border-box;
}
.clear
{
	clear: both;
}
.clearfix::before, .clearfix::after
{
	content: "";
	display: table;
}
.clearfix::after
{
	clear: both;
}
.clearfix
{
	zoom: 1;
}
.float_left
{
	float: left;
}
.float_right
{
	float: right;
}
.trans_200
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.trans_300
{
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.trans_400
{
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.trans_500
{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.fill_height
{
	height: 100%;
}
.super_container
{
	width: 100%;
	overflow: hidden;
}
.prlx_parent
{
	overflow: hidden;
}
.prlx
{
	height: 130% !important;
}
.parallax-window
{
    min-height: 400px;
    background: transparent;
}
.nopadding
{
	padding: 0px !important;
}
.button
{
	display: inline-block;
	height: 51px;
	background: #283290;
	font-family: 'Lato', sans-serif;
}
.button::after
{
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: #20d34a;
	content: '';
	z-index: 0;
	-webkit-transition: all 400ms cubic-bezier(.33,.68,.59,.99);
	-moz-transition: all 400ms cubic-bezier(.33,.68,.59,.99);
	-ms-transition: all 400ms cubic-bezier(.33,.68,.59,.99);
	-o-transition: all 400ms cubic-bezier(.33,.68,.59,.99);
	transition: all 400ms cubic-bezier(.33,.68,.59,.99);
}
.button a
{
	display: block;
	position: relative;
	line-height: 51px;
	font-size: 14px;
	font-weight: 900;
	color: #FFFFFF;
	padding-left: 39px;
	padding-right: 45px;
	letter-spacing: 0.05em;
	z-index: 10;
}
.button:hover::after
{
	height: 100%;
}
.button:hover a
{
	color: #FFFFFF !important;
}
.section_title
{
	padding-top: 50px;
	font-weight: bold;
}
.section_title h2
{
	font-size: 30px;
	font-weight: bold;
	color: #232323;
}
.section_title::before
{
	display: block;
	position: absolute;
	left: 1px;
	top: 0;
	width: 54px;
	height: 3px;
	background: #20d34a;
	content: '';
}
.section_title_light h2
{
	color: #FFFFFF;
}

/*********************************
3. Header
*********************************/

.header
{
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #FFFFFF;
	z-index: 100;
}
.header.scrolled
{
	top: -48px;
}

/*********************************
3.1 Top Bar
*********************************/

.top_bar
{
	width: 100%;
	background: #283290;
}
.top_bar_content
{
	width: 100%;
	height: 48px;
	padding-left: 214px;
}
.top_bar_item
{
	margin-left: 37px;
	color: #fff;
}

.eng,.eng:hover
{
	height: 100%;
	background: #20D34A;
	color: #283290!important;
	font-size: 14px;
	font-weight: 700;
	padding-left: 38px;
	padding-right: 38px;
	display: block;
}
.eng img
{
	height: 14px;
	padding-right: 5px;
}

/*********************************
3.2 Header Content
*********************************/

.header_container
{
	width: 100%;
	background: #FFFFFF;
}
.header_content
{
	width: 100%;
	height: 103px;
}
.header.scrolled .header_content
{
	height: 80px;
}
.main_nav ul li
{
	display: inline-block;
}
.main_nav ul li:not(:first-child)
{
	margin-left: 20px;
}
.main_nav ul li a
{
	font-size: 14px;
	color: #323232;
	text-transform: uppercase;
	font-weight: bold;
}
.hamburger
{
	display: none;
	cursor: pointer;
}
.hamburger i
{
	font-size: 24px;
	color: #272727;
}

/*********************************
3.3 Logo
*********************************/

.logo_container_outer
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.logo_container
{
	position: absolute;
	top: 0;
	left: 15px;
	width: 240px;
	height: 177px;
	background: #FFFFFF;
	box-shadow: 0px 31px 29px rgba(0,0,0,0.09);
	z-index: 10;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.logo
{
    margin: 0 30px;
}

.header.scrolled .logo_container
{
	top: 48px;
	height: 120px;
}
.logo_container a
{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}
.logo_content
{
	width: 100%;
	height: 100%;
}
.logo_line
{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: #20D34A;
}
.logo_container a .logo:hover
{
	color: #283290;
}
.logo_text
{
	font-size: 30px;
	font-weight: 500;
	color: #283290;
	line-height: 0.75;
}
.logo_box
{
	display: inline-block;
	width: 23px;
	height: 23px;
	background: #20d34a;
	color: #FFFFFF;
	font-size: 24px;
	line-height: 23px;
	text-align: center;
	-webkit-transform: translateY(-2px);
	-moz-transform: translateY(-2px);
	-ms-transform: translateY(-2px);
	-o-transform: translateY(-2px);
	transform: translateY(-2px);
	margin-left: 1px;
}
.logo_sub
{
	font-size: 14px;
	font-weight: 400;
	color: #8f8e8e;
	padding-left: 3px;
	margin-top: 2px;
}

/*********************************
4. Menu
*********************************/

.menu_container
{
	position: fixed;
	top: 0;
	right: -50vw;
	width: 50vw;
	height: 100vh;
	background: #FFFFFF;
	z-index: 101;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
	visibility: hidden;
	opacity: 0;
}
.menu_container.active
{
	visibility: visible;
	opacity: 1;
	right: 0;
}
.menu
{
	position: absolute;
	top:150px;
	left: 0;
	padding-left: 15%;
}
.menu_inner
{
	width: 100%;
	height: 100%;
}
.menu_list
{
	-webkit-transform: translateY(1.5rem);
	-moz-transform: translateY(1.5rem);
	-ms-transform: translateY(1.5rem);
	-o-transform: translateY(1.5rem);
	transform: translateY(1.5rem);
	-webkit-transition: all 1000ms 400ms ease;
	-moz-transition: all 1000ms 400ms ease;
	-ms-transition: all 1000ms 400ms ease;
	-o-transition: all 1000ms 400ms ease;
	transition: all 1000ms 400ms ease;
	opacity: 0;
}
.menu_container.active .menu_list
{
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
	opacity: 1;
}
.menu_item
{
	margin-bottom: 5px;
}
.menu_item a
{
	font-family: 'Lato', sans-serif;
	font-size: 36px;
	font-weight: 700;
	color: #272727;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_item a:hover
{
	color: #ffb606;
}
.menu_close_container
{
	position: absolute;
	top: 86px;
	right: 79px;
	width: 21px;
	height: 21px;
	cursor: pointer;
	z-index: 10;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.menu_close
{
	top: 9px;
	width: 21px;
	height: 3px;
	background: #3a3a3a;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_close::after
{
	display: block;
	position: absolute;
	top: -9px;
	left: 9px;
	content: '';
	width: 3px;
	height: 21px;
	background: #3a3a3a;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_close_container:hover .menu_close,
.menu_close_container:hover .menu_close::after
{
	background: #20d34a;
}
.menu_extra
{
	position: absolute;
	left: 0;
	bottom: 0;
	padding-left: 15%;
	padding-bottom: 25px;
}
.menu_appointment a
{
	font-size: 13px;
	color: #283290;
}
.menu_emergencies
{
	font-size: 13px;
	color: #272727;
}

/*********************************
5. Home
*********************************/

.home
{
	width: 100%;
	height: 900px;
}
.home_slider_container
{
	width: 100%;
	height: 100%;
}
.home_slider_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.home_slider_progress
{
	position: absolute;
	left: 0;
	bottom: 0px;
	width: 0%;
	max-width: 100%;
	height: 2px;
	background: #20d34a;
	z-index: 1;
}
.home_content
{
	position: absolute;
	top: 39.8%;
	left: 0;
	width: 100%;
}
.home_content_inner
{
	width: 700px;
}
.home_title h1
{
	font-size: 48px;
	font-weight: 700;
	color:#283290;
	line-height: 1.0398;
}
.home_text
{
	padding-right: 5px;
	margin-top: 10px;
	padding-left: 3px;
}
.home_text p
{
	font-size: 16px;
	font-weight: 500;
	color: #000;
	line-height: 1.75;
}
.home_button
{
	margin-top: 34px;
	margin-left: 3px;
}

/*********************************
6. Boxes
*********************************/

.boxes
{
	width: 100%;
	background: transparent;
	z-index: 10;
	padding-bottom: 35px;
}
.box_col
{
	margin-top: -59px;
}
.box
{
	width: 100%;
	height: 240px;
	background: #283290;
	padding: 15px 20px 15px 34px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	display: flex;
	flex-direction: column;
}
.box::after
{
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: #20d34a;
	content: '';
}
.box_title
{
	font-size: 20px;
	font-weight: bold;
	color: #FFFFFF;
	margin-top: 11px;
}
.box_text
{
	font-size: 14px;
	line-height: 2.14;
	color: #FFFFFF;
	font-weight: 400;
	margin-top: 23px;
}
.box .btn
{
	text-align: right;
	text-transform: uppercase;
	margin-top: auto;
}
.box .btn a
{
	color: #fff;	
}


/*********************************
7. GREETING from PROFESSER
*********************************/

.greeting
{
	width: 100%;
	background: #FFFFFF;
	padding-top: 92px;
	padding-bottom: 92px;
}

/*********************************
8. ABOUT TIDE
*********************************/

.abouttide
{
	width: 100%;
	padding-top: 75px;
	padding-bottom: 65px;	
}
.abouttide_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*********************************
9. Topics & Information
*********************************/

.topics
{
	width: 100%;
	background: #FFFFFF;
	padding-top: 95px;
	padding-bottom: 65px;
}
.topics_contents
{
	margin: 40px 0;
}
.topics_contents .topics_item
{
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}
.topics_contents .topics_item time {
	color: #20D34A;
	margin-right: 20px;
}

/*********************************
10. Footer
*********************************/

.footer
{
	width: 100%;
}
.footer_container
{
	width: 100%;
	background: #060b3a;
	padding-bottom: 50px;
	border-top: 1px solid #97979c;
}
.footer_logo_container
{
	width: 80%;
	height: 100px;
	background: #FFFFFF;
}
.footer_logo_container::after
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: #20d34a;
	content: '';
}
.footer_logo_container a
{
	display: block;
	width: 100%;
	height: 100%;
}
.footer_logo_container .logo_content
{
	display: inline-block;
	width: auto;
	height: auto;
	text-align: center;
}

.footer_about_text
{
	margin-top: 36px;
	color: #FFF;
	/*text-align: center;*/
}
.footer_about_text p
{
	color: #b2b2b2;
}
.footer_title
{
	font-size: 18px;
	font-weight: 700;
	color: #20D34A;
}
.footer_links
{
	margin: 35px 10px 0 50px;
}
.footer_links ul
{
	margin-top: 10px;
}
.footer_links ul li:not(:last-child)
{
	margin-bottom: 10px;
}
.footer_links ul li
{
	display: inline-block;
	margin-right: 15px;
	padding-left: 8px;
	position: relative;
}
.footer_links ul li:before{
	content: "";
    position: absolute;
    top: .5em;
    left: 0;
    width: 0;
    height: 0;
    border-width: 4px;
    border-style: solid;
    border-color: transparent transparent transparent #20D34A;
}
.footer_links ul li a
{
	font-size: 14px;
	font-weight: 500;
	color: #FFF;
	text-transform: uppercase;
}

.tmdu_logo_container {
	background-color: #ffffff;
	padding: 10px;
	margin-top: 30px;
	text-align: center;
}
.footer_contact {
	margin-top: 20px;
	font-size: 12px;
	color: #fff;
}

.copyright
{
	width: 100%;
	background: #020523;
}
.copyright_content
{
	width: 100%;
	height: 62px;
}
.cr
{
	font-size: 12px;
	color: #fff;
	letter-spacing: 0.05em;
}

.scroll-to-top {
  position: fixed;
  right: 15px;
  bottom: 15px;
  display: none;
  width: 50px;
  height: 50px;
  text-align: center;
  color: #FFF;
  background: #20D34A;
  line-height: 50px;
}

.scroll-to-top:focus, .scroll-to-top:hover {
  color: #FFF;
}

.scroll-to-top:hover {
  	background: #283290;
}


/*********************************
11. Other pages 
*********************************/

.pagehead
{
	width: 100%;
	height: 473px;
}
.pagehead_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.pagehead_container
{
	position: absolute;
	left: 0;
	bottom: 118px;
	width: 100%;
}
.pagehead_title
{
	font-family: 'Montserrat', sans-serif;
	font-size: 42px;
	font-weight: 700;
	color: #20D34A;
	text-transform: uppercase;
}
.pagehead_title span
{
	color: #FFF;
}

.main_content
{
	width: 100%;
	padding-top: 96px;
	padding-bottom: 94px;
}
.main_content .box:not(:last-child)
{
	margin-bottom: 34px;
}
.content_inner
{
	margin-top: 40px;
}
.greeting_photo
{
	width: 40%;
}

.main_content dl dt:not(:first-child)
{
	margin-top: 30px;
}
.main_content dl dd
{
	position: relative;
	margin-right: 15px;
	padding-left: 8px;
} 
.main_content dl dd:before
{
	content: "";
    position: absolute;
    top: .5em;
    left: 0;
    width: 0;
    height: 0;
    border-width: 4px;
    border-style: solid;
    border-color: transparent transparent transparent #20D34A;
}
.main_content .table td, .main_content .table th {
  	border-top: none;
	border-bottom: 1px solid #e9ecef;
}
.main_content .member_list th
{
	width: 20%;
}
.main_content .table td a
{
	position: relative;
	margin-right: 15px;
	padding-left: 8px;
}
.main_content .table td a:before
{
	content: "";
    position: absolute;
    top: .5em;
    left: 0;
    width: 0;
    height: 0;
    border-width: 4px;
    border-style: solid;
    border-color: transparent transparent transparent #20D34A;
}

.main_content figcaption {
	margin-top: 10px;
}

.map_area {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.map_area iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.outline_area {
	margin: 20px 0 40px;
}
.outline_area h3 {
	font-size: 20px;
	text-align: center;
}
.outline_area h4 {
	text-align: center;
}
.outline_area .text-color {
	color: #283290;
}
.outline_area figure {
	text-align: center;
}
.outline_area figcaption {
	font-size: 18px;
	color: #283290;
	margin-top: 1px;
	font-weight: bold;
}

/*********************************
12. Members
*********************************/

.position {
	font-size: 80%;
	font-weight: normal;
	line-height: 1.2;
}
.name {
	font-weight: bold;
	line-height: 1.8;
}
.link {
	font-size: 80%;
	font-weight: normal;
	line-height: 1.2;
}