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

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

[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Header
4. Front page
  4.1 Header
  4.2 News
  4.3 About dental clinic
  4.4 Information
  4.5 Reserve
  4.6 Scroll button
5. Category news
6. Single
7. Footer

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

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

@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700&display=swap&subset=japanese");
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
/*********************************
2. Body and some general stuff
*********************************/

/* 等線体
font-family: 'Roboto', sans-serif; */

/* *はページ全体に適用　*/
* { 
  margin: 0;
  padding: 0;
  -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px; /* Chrome向けのベンダープレフィレックス　*/
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px; /* その他 */
}

body {
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 400;
  background: #ffffff;
  color: #a5a5a5;
}

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: "Noto Serif JP", serif;
  font-size: 17px;
  line-height: 1.85;
  font-weight: 400;
  color: #76777a;
  -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}

@media screen and (max-width: 576px) {
  p {
    font-size: 15px;
  }
}

p a {
  display: inline;
  position: relative;
  color: inherit;
  border-bottom: solid 1px #ffa07f;
  -webkit-transition: all 200ms ease; /* transition:変化の対象 変化の時間 変化の仕方 〇疑似クラスとと組み合わせて使用 */
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

p:last-of-type {
  margin-bottom: 0;
}

a,
a:hover,
a:visited,
a:active,
a:link {
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}

p a:active {
  position: relative;
  color: #ff6347;
}

p a:hover {
  color: #ffffff;
  background: #ffa07f;
}

p a:hover::after {
  opacity: 0.2;
}

::selection {
} /* クリックやドラッグすることでスタイルを適用（疑似要素）*/

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: "Noto Serif JP", serif;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  color: #384158;
  margin-bottom: 0;
}

h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection {
}

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;
}

.super_container {
  width: 100%;
  overflow: hidden; /* はみ出た部分は表示しない */
}

/*********************************
3. Header
*********************************/
.header_container{
  background-color: #D3E0EA;
}

.header_text{
  display: inline-block;
  font-family: "Noto Serif JP", serif;
  margin-bottom: 4px;
  vertical-align: middle;
  margin-left: 7px;
}

.header_text span {
  color: black;
  font-size: 25px;
}

/*********************************
4. Front page
*********************************/
/***** 4.1 Header ******/
.header_slider_container {
  width: 100%;
  height: 100%;
}

.carousel-caption {
  position: absolute;
  top: 10%;
}

.title-slide p {
  color: #92def1;
  font-size: 70px;
  font-weight:bold;
  letter-spacing: 3.45px;
  text-shadow: 3px 3px 6px #00000063;
}

@media screen and (max-width: 992px) {
  .title-slide p {
    color: #92def1;
    font-size: 45px;
    font-weight:bold;
    letter-spacing: 3.45px;
    text-shadow: 3px 3px 6px #00000063;
  }
}

.content-slide p {
  font-family: "Roboto", sans-serif;
  color: #ffffff;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 2.4px;
  text-align: center;
  position: absolute;
  left: 18%;
  right: 18%;
}

@media screen and (max-width: 992px) {
  .content-slide p {
  font-family: "Roboto", sans-serif;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2.4px;
  text-align: center;
  position: absolute;
  left: 18%;
  right: 18%;
  }
}

.header_nav_container {
  position: relative;
  width: 100%;
  height: 80px;
  z-index: 100;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  background: #D3E0EA;
}

.logo_text {
    display: inline-block;
    font-family: "Noto Serif JP", serif;
    margin-bottom: 4px;
    font-size: 36px;
    font-weight: 700;
    line-height: 0.75;
    color: #384158;
    vertical-align: middle;
    margin-left: 7px;
}

@media screen and (min-width: 768px) {
	.logo_text { 
    display: none;
    font-family: "Noto Serif JP", serif;
    margin-bottom: 4px;
    font-size: 36px;
    font-weight: 700;
    line-height: 0.75;
    color: #384158;
    vertical-align: middle;
    margin-left: 7px;
  }
}


.logo_text span {
  color: black;
  font-size: 20px;
  text-transform: uppercase;
}

.toggle-menu {
  color: #ffffff;
}

	.navbar { 
    height: 100%;
  }

.navbar ul li a {
  font-size: 28px;
  color: black;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  padding: 20px;
}

@media screen and (max-width: 992px) {
	.navbar ul li a { 
    font-size: 20px;
  }
}

@media screen and (max-width: 631px) {
	.navbar ul li a { 
    font-size: 13px;
  }
}

.navbar ul li a:hover {
  color: #14bdee;
}

/****** 4.2 News ******/
.news {
  width: 100%;
  padding-bottom: 30px;
  background: #ffffff;
}

.section_row {
  padding: 0px 5%;
}

.news_row {
  margin-top: 55px;
}

.section_title_container {
  max-width: 600px;
  width: fit-content;
  margin: 0 auto;
}

.home_title {
  letter-spacing: 3.2px;
  color: #000000;
  font-size: 32px;
  border-bottom: 2px solid #4aa0b5;
  margin-bottom: 20px;
  width: fit-content; /* 子要素に合わせた横幅にする */
}


.news_posts_small {
  margin-top: -6px;
}

.news_post_small:not(:last-child) {
  padding-bottom: 10px;
  border-bottom: solid 2px #e5e5e5;
}

.news_post_meta {
  margin-top: 11px;
}
.news_post_meta {
  text-align: left;
  font-size: 14px;
  letter-spacing: 0.28px;
  color: #00000099;
  font-weight: 600;
}

.news_post_meta ul li {
  display: inline-block;
  position: relative;
}

.news_post_meta ul li a {
  font-size: 14px;
  font-weight: 400;
  color: #b5b8be;
  letter-spacing: 0.7px;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease; /* transtion :all(transiotion対象のCSSプロパティ 200ms(200ミリ秒) ease(開始と終了時は緩やかに変化) */
}

.news_post_meta ul li a:hover { /* transitionは変化の終わりの状態となる :hoverなどの疑似クラスと合わせて利用するとアニメーションが発生 */
  color: #14bdee;
}

.news_post_small_title {
  margin-top: 10px;
}

.news_post_small_title a {
  font-family: "Noto Serif JP", serif;
  font-size: 17px;
  letter-spacing: 0.51px;
  font-weight: bold;
  line-height: 1.55;
  color: #000000dd;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.news_post_small_title a:hover {
  color: #14bdee;
}

/***** 4.3 About dental clinic*****/
.courses {
  width: 100%;
  padding-top: 60px;
  padding-bottom: 30px;
}

.courses_row {
  margin-top: 25px;
}

.course_image {
  width: 100%;
  border-radius: 6px; /* radius 角を丸める */
  overflow: hidden;
  text-align: center;
}

.course_image img {
  max-width: 100%;
  height: auto;
}

.course_body {
  padding-top: 10px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 10px;
}

.course_text {
  height: 100%;
}

.course_title {
  padding-top: 8px;
  padding-bottom: 10px;
}


/***** 4.4 Information *****/
.consultation_time_image {
  padding: 50px 30px;
  width: 100%;
}

.consultation_time_image img {
  max-width: 100%;
  height: auto;
}


/***** 4.5 Reserve *****/
.reserve_content{
  text-align: center;
  padding-bottom: 20px;
}


/***** 4.6 Scroll button *****/
@media screen and (max-width: 576px) {
	.scroll_button { 
    display: none;
  }
}

.pagetop{
  padding:40px 10px;
  background-color: #14bdee;
  color: white;
  text-decoration: none;
  border-radius: 50%;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 999999;
}

/*********************************
5. Category-news
*********************************/
.home {
  width: 100%;
  /* height: 850px; */
}

.image_header {
  display: block;
  position: relative;
  width: 100%;
}

.image_header img{
 max-width: 100%;
 height: auto;
}

.image_header::after {
  content: "";
  background: rgba(43, 123, 142, 0.15);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; /* 親要素から重なりをずらす */
}

.header_info {
  position: absolute;
  top: 50%;
  padding-left: 5%;
  text-align: left;
  font-size: 50px;
  letter-spacing: 3.45px;
  color: rgba(146, 222, 241, 1);
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.39);
  opacity: 1; /* セレクタ全体の透明度を決める　*/
}

.content-body {
  padding-left: 5%;
}

.tab_panels {
  padding-right: 5%;
}

.tab_panel_content {
  margin-top: 30px;
}

.tab_panel_text {
  padding-top: 40px;
  padding-bottom: 50px;
}

.calendar_news_border {
  width: 110px;
  height: 110px;
  background: #555555 0% 0% no-repeat padding-box;
  opacity: 1;
}

.calendar_news_border_1 {
  width: 100px;
  height: 100px;
  top: 5px;
  left: 5px;
  border: 1px solid #ffffff;
  opacity: 1;
}

.calendar_news_border_1 > .calendar_month {
  letter-spacing: 0.6px;
  color: #ffffff;
  opacity: 1;
  font-size: 12px;
  text-align: center;
  padding-top: 15px;
}

.calendar_news_border_1 .calendar_day > span:first-child {
  font-size: 40px;
  letter-spacing: 0;
  color: #ffffff;
  opacity: 1;
  text-align: center;
}

.calendar_news_border_1 .calendar_day {
  text-align: center;
  margin-top: 10px;
  color: #ffffff;
}

.read_continue > button {
  background: #4aa0b5 0% 0% no-repeat padding-box;
  border-radius: 3px;
  opacity: 1;
  width: 150px;
  height: 40px;
  border: none;
  font-size: 16px;
  color: #ffffff;
  float: right;
  margin: 10px 0 10px 0;
}


/*********************************
6. Single
*********************************/
.tab_panel_title {
  text-align: left;
  font-size: 32px;
  letter-spacing: 0;
  color: #000000dd;
  text-transform: uppercase;
  opacity: 1;
  border-bottom: 4px solid #4aa0b5;
  width: fit-content;
  margin-bottom: 30px;
  margin-top: 30px;
  font-weight: 700;
}

.news_detail_title {
  text-align: left;
  font-size: 24px;
  letter-spacing: 0.72px;
  color: #000000dd;
  font-weight: bold;
  margin-top: 10px;
}


/*********************************
7. Footer 
*********************************/

.footer {
  display: block;
  position: relative;
  width: 100%;
  background: #D3E0EA;
  padding-top: 60px;
  margin-top: 30px;
}

.footer_row{
  width: 100%;
}

.footer_content {
  padding-bottom: 53px;
}

.footer_links {
  padding-left: 40px;
}

.footer_links_container ul {
  /* columns: 2; */
  /* -webkit-columns: 2; */
  /* -moz-columns: 2; */
}

.footer_links_container {
  margin-top: 50px;
}

.footer_links_container ul li {
  margin-bottom: 10px;
}
.footer_links_container ul li a {
  font-size: 18px;
  color: black;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.footer_links_container ul li a:hover {
  color: #14bdee;
}

.copyright {
  background-color: #D3E0EA;
  height: 40px;
  border-top: solid 1px white;
}

.copyright div {
  font-size: 12px;
  color: white;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
}