/*-------------------------------------------------------------

 共通CSS

-------------------------------------------------------------*/
body{
	font-size: 16px;
	width:100%;
	color:#000;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.75;
}
/* 全要素にbox-sizing: border-box;をかける　*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img{
	width: 100%;
	max-width: 100%;
	vertical-align:top;
}
/* 100%では荒くなる画像に追加する */
img.originalsize{
	width: auto !important;
	max-width: 100%;
	vertical-align:top;
}
video{
	width: 100%;
}
/* リンク（デフォルト） */
a{
	color: #083b10;
	cursor: pointer;
	text-decoration: none;
}
a:hover,a:active{
	color: #083b10;
	text-decoration: none;
}
/* リンク（装飾） */
a.link, a.link:active{
	color: #083b10;
	cursor: pointer;
	text-decoration: none;
	border-bottom: dashed 1px #083b10;
}
a.link:hover{
	color: #083b10;
	border-bottom: 0px;
}

p{ line-height: 1.75; }

.row{ margin: 0; }

/* 明朝体 */
.serif{ font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
/* ゴシック体 */
.gothic{ font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
/* 文字装飾 */
.red{ color:#f00; } /* 赤文字 */
.bold{ font-weight: bold; } /* 太文字 */
.line{ text-decoration: line-through; } /* 取消線 */
.small{ font-size:14px; } /* 取消線 */

/* 文字の行の揃え位置 */
.txt_right { text-align: right; }
.txt_center { text-align: center; }
.txt_left { text-align: left; }
/* リンクが貼ってある画像は透過する */
a img:hover{
    filter:alpha(opacity=70);/* IE 6,7*/
    -ms-filter: "alpha(opacity=70)";/* IE 8,9 */
    -moz-opacity:0.7;/* FF , Netscape */
    -khtml-opacity: 0.7;/* Safari 1.x */
    opacity:0.7;
    zoom:1;/*IE*/
}

/* clear */
.clear { clear: both; }

/* pc/sp切り替え */
.pc_view{ display:inline-block;}
.sp_view{ display:none;}

/* pc/sp 改行 */
.br_pc { display:block; }
.br_sp { display:none; }

@media screen and (max-width: 768px) {
	html{ height:100%; }
	body{
		min-width: 100%;
		height:100%;
	}
	.pc_view{ display:none;}
	.sp_view{ display:block;}

	.br_pc { display:none; }
	.br_sp { display:block; }
}

/*-------------------------------------------------------------
  フォント
-------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap');
.font_dg{ font-family: 'Didact Gothic', sans-serif; }

/*-------------------------------------------------------------
  余白
-------------------------------------------------------------*/
.mt10{ margin-top: 10px !important; }
.mt20{ margin-top: 20px !important; }
.mt30{ margin-top: 30px !important; }
.mt40{ margin-top: 40px !important; }
.mt50{ margin-top: 50px !important; }
.mt60{ margin-top: 60px !important; }
.mt70{ margin-top: 70px !important; }
.mt80{ margin-top: 80px !important; }
.mt90{ margin-top: 90px !important; }
.mt100{ margin-top: 100px !important; }

.mb10{ margin-bottom: 10px !important; }
.mb20{ margin-bottom: 20px !important; }
.mb30{ margin-bottom: 30px !important; }
.mb40{ margin-bottom: 40px !important; }
.mb50{ margin-bottom: 50px !important; }
.mb60{ margin-bottom: 60px !important; }
.mb70{ margin-bottom: 70px !important; }
.mb80{ margin-bottom: 80px !important; }
.mb90{ margin-bottom: 90px !important; }
.mb100{ margin-bottom: 100px !important; }

/*-------------------------------------------------------------
  color
-------------------------------------------------------------*/
/* 背景色 */
.bg_main_green { background-color: #00826d; }
.bg_light_green { background-color: #daedea; }
.bg_middle_green { background-color: #7bb2a9; }

/* .bg_main_color { background-color: #004d4d; } */
.bg_main_color { background-color: #083b10; }
.bg_light_color { background-color: #F5F3EB; }
.bg_middle_color { background-color: #006666; }

/* グラデーション画像 */
.bg_main_img_l { background: url(../img/common/bg_maincolor_l.jpg) repeat-x top center; }
.bg_main_img_m { background: url(../img/common/bg_maincolor_m.jpg) repeat-x top center; }
.bg_main_img_s { background: url(../img/common/bg_maincolor_s.jpg) repeat-x top center; }

/* テクスチャ画像 */
.bg_texture_light { background: url(../img/common/bg_lightcolor.jpg) repeat; }

.bg_shiga { background-color: #f49650; }
.bg_kyoto { background-color: #a276bb; }
.bg_mie { background-color: #de5f5f; }

/* 文字色 */
/* .txt_green{ color: #004d4d; } */
.txt_green{ color: #083b10; }
.txt_blue{ color: #008da7; }
.txt_orange{ color: #ff9933; }
.txt_white{ color: #fff; }
/* .txt_main_color{ color: #004d4d; } */
.txt_main_color{ color: #083b10; }

/*-------------------------------------------------------------
  object-fit
-------------------------------------------------------------*/
/* IE対応用：object-fitを対応させているimgタグ内に追加する */
.object_fit_img{
  object-fit: cover;
  font-family: 'object-fit: cover;'
}

/*-------------------------------------------------------------
  wrapper
-------------------------------------------------------------*/
#wrapper {
  width:100%;
  overflow:hidden;
}

/*-------------------------------------------------------------
  section
-------------------------------------------------------------*/
section {
	width: 100%;
	margin: 0;
}

/*-------------------------------------------------------------
  main
-------------------------------------------------------------*/
.main{
	max-width:1200px;
	padding: 30px 0 50px 0;
	margin: 0 auto;
}
@media screen and (max-width: 768px) {
	.main{ max-width: initial; width:96%; }
}

/*-------------------------------------------------------------
  inner_box
-------------------------------------------------------------*/
/* 基本的には.mainの中に使用する */
.inner_box{
	max-width:1160px;
	margin: 0 auto;
	padding-bottom: 60px;
}
@media screen and (max-width: 768px) {
	.inner_box{ max-width: initial; width:100%; padding-bottom: 40px; }
}

/*-------------------------------------------------------------
  header -- 各ページ用ヘッダーCSS
-------------------------------------------------------------*/
header{
	width:100%;
	height: auto;
	margin: 0;
	padding: 0;
}
header .header_area{
	width: 100%;
}

/* cmn_menu_area ------------------------------ */
.header_area .cmn_menu_area{
	width: 100%;
	height: 80px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
}
.header_area .cmn_menu_area .head_logo{
	width: 30%;
	height: 80px;
	padding: 15px 0 0 10px;
	box-sizing: border-box;
}
.header_area .cmn_menu_area .head_logo img{
	max-width: 300px;
	height: auto;
}
.header_area .cmn_menu_area .head_menu{
	width: 70%;
	height: 80px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
}
.header_area .cmn_menu_area .head_menu .menu_box{
	width: auto;
	padding: 10px;
	text-align: center;
}
.header_area .cmn_menu_area .head_menu .menu_box a{
	color: #000;
}
.header_area .cmn_menu_area .head_menu .menu_box a:hover{
	color: #083b10;
}
.header_area .cmn_menu_area .head_menu .tel_box{
	width: auto;
	height: 80px;
	padding: 0 15px;
	background-color: rgba(8,59,16,0.8);
	color: #fff;
	position: relative;
}
.header_area .cmn_menu_area .head_menu .tel_box p.tel_txt{
	font-size: 14px;
	text-align: center;
	padding-top: 8px;
}
.header_area .cmn_menu_area .head_menu .tel_box p.telnumber{
	text-align: center;
	color: #fff;
	font-size: 25px;
	font-weight: bold;
}
.header_area .cmn_menu_area .head_menu .tel_box p.telnumber span:before {
	content:"";
	display:inline-block;
	width:25px;
	height:25px;
	margin-right: 5px;
	background:url("../img/common/icon_head_mail.png") no-repeat;
	background-size:contain;
}
.header_area .cmn_menu_area .head_menu .tel_box a{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
}

@media screen and (max-width: 768px) {
	.header_area .cmn_menu_area{
		height: auto;
		position: static;
		margin-bottom: 10px;
	}	
	.header_area .cmn_menu_area .head_logo{
		width: 70%;
		height: auto;
		padding: 10px 0 0 5px;
	}
	.header_area .cmn_menu_area .head_logo img{
		max-width: 400px;
		height: auto;
	}
	.header_area .cmn_menu_area .head_menu{
		display: none !important;
	}	
}

/*-------------------------------------------------------------
  cmn_head_cover -- 各ページ用ヘッダー下部カバー
-------------------------------------------------------------*/
.cmn_head_cover{
	width: 100%;
	height: 300px;
	background-color: #ccc;
	margin-top: 80px;
}
.cmn_head_cover img {
	width: 100%;
	height: 300px;
	object-fit: cover;
}
@media screen and (max-width: 768px) {
	.cmn_head_cover{
		height: 200px;
		margin-top: 0;
	}
    .cmn_head_cover img {
        height: 200px;
    }
}

/*-------------------------------------------------------------
  breadcrumb_area -- 各ページぱんくずリスト
-------------------------------------------------------------*/
.breadcrumb_area {
	margin: 0;
	padding: 5px 0;
}
.breadcrumb_area .bread_inner {
	max-width: 1200px;
	margin: 0 auto;
}
/* ぱんくずデザイン */
.breadcrumb {
	margin: 0;
	padding: 0;
	list-style: none;
}
.breadcrumb li {
	display: inline;/*横に並ぶように*/
	list-style: none;
	font-size: 12px;
}
.breadcrumb li:after {
	/* >を表示*/
	content: '»';
	padding: 0 0.2em;
	color: #555;
}
.breadcrumb li:last-child:after {
  content: '';
}
.breadcrumb li a {
  text-decoration: none;
  color: #00826d;/*色*/
}
.breadcrumb li a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
	.breadcrumb_area .bread_inner {
		max-width: initial;
		width: 96%;
	}
}

/*-------------------------------------------------------------
  ページタイトル
-------------------------------------------------------------*/
h3.h3_title{
	padding-top: 50px;
	text-align: center;
	font-size: 30px;
	letter-spacing: 3px;
}
h4.h4_note{
	text-align: center;
	margin-bottom: 30px;
	font-weight: normal;
}
@media screen and (max-width: 768px) {
	h3.h3_title{
		padding-top: 30px;
		font-size: 24px;
		letter-spacing: 2px;
	}
}

/*-------------------------------------------------------------
  見出し関係
-------------------------------------------------------------*/
/* 先頭に四角 */
h4.h4_round {
    width: 100%;
    margin-bottom: 10px;
    font-weight: bold;
    position: relative;
    padding-left: 1.3em;
}
h4.h4_round::after {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    content: '';
    width: 15px;
    height: 15px;
    background-color: #00826d;
}



/*-------------------------------------------------------------
  新着情報のアイコン色
-------------------------------------------------------------*/
/* カテゴリ・タグアイコン共通 */
.cat_icon{
	padding: 0 10px;
	margin-right: 5px;
	display: inline-block;
	color: #fff;
	font-weight: normal;
    font-size: 90%;
}
/* カテゴリ */
.cat_pickup{ background-color: #ff8c4d;} /* pickup */
/* タグ */
.tag_kyoto{ background-color: #a276bb;} /* 四条烏丸グリーン歯科 */
.tag_ritto{ background-color: #f49650;} /* 栗東グリーン歯科 */
.tag_seta{ background-color: #f49650;} /* 瀬田グリーン歯科 */
.tag_zeze{ background-color: #f49650;} /* 膳所グリーン歯科 */
.tag_kusatsu{ background-color: #f49650;} /* 草津グリーン歯科 */
.tag_yasu{ background-color: #f49650;} /* 野洲グリーン歯科 */
.tag_suzuka{ background-color: #de5f5f;} /* 鈴鹿グリーン歯科 */

@media screen and (max-width: 768px) {
    .cat_icon{
        margin-bottom: 5px;
    }
}

/*-------------------------------------------------------------
  footer
-------------------------------------------------------------*/
footer{
	width:100%;
	height: auto;
	padding: 0;
	margin-top: 100px;
}
/* footer_logo_area */
footer .footer_logo_area{
	width:100%;
	margin-bottom: 25px;
}
footer .footer_logo_area .f_logo{
	width:100%;
	text-align: center;
	margin-bottom: 20px;
}
footer .footer_logo_area .f_logo img{
	max-width:80%;
	width:auto;
}
@media screen and (max-width: 768px) {
	footer .footer_logo_area{
		width:96%;
		margin: 0 auto 25px auto;
	}
}

/* footer_main_area ------------------------------ */
footer .footer_main_area{
	width:100%;
	height: auto;
	padding: 20px 0;
	margin:0 auto;
}
footer .footer_main_area .f_inner{
	max-width:1200px;
	margin:  10px auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
footer .footer_main_area h3{
	width: 100%;
	margin-bottom: 15px;
/*	border-left: #cca78f solid 5px; */
	border-left: #fff solid 5px;
	padding-left: 10px;
/*	color: #cca78f; */
	color: #fff;
}

/* 店舗一覧 */
footer .footer_main_area .f_shop_area{
	width: 30%;
	padding: 10px;
}
footer .footer_main_area .f_shop_area .shop_box{
	width: 90%;
	padding: 20px;
	background-color: #fff;
	border-radius: 10px;
}
footer .footer_main_area .f_shop_area .shop_box ul{
	list-style-position: inside;
}
footer .footer_main_area .f_shop_area .shop_box ul li{
	padding-top: 2px;
	padding-bottom: 2px;
}
footer .footer_main_area .f_shop_area .shop_box a{
	color: #000;
}
footer .footer_main_area .f_shop_area .shop_box a:hover{
	text-decoration: underline;
}
@media screen and (max-width: 768px) {
	footer .footer_main_area .f_shop_area{
		width: 100%;
	}
	footer .footer_main_area .f_shop_area .shop_box{
		width: 100%;
	}
}

/* コンテンツ一覧 */
footer .footer_main_area .f_cnt_area{
	width: 70%;
	padding: 10px;
}
footer .footer_main_area .f_cnt_area .cnt_box{
	width: 100%;
	margin-top: 10px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
footer .footer_main_area .f_cnt_area .cnt_box .parts_box{
	width : 33.33333% ;
	width : -webkit-calc(100% / 3) ;
	width : calc(100% / 3) ;
	padding: 10px;
}
footer .footer_main_area .f_cnt_area .cnt_box .parts_box ul {
   list-style: none;
   list-style-position: inside;
   padding-top: 15px;
   padding-left: 20px;
   padding-bottom: 15px;
}
footer .footer_main_area .f_cnt_area .cnt_box .parts_box ul li {
	padding-bottom: 2px;
    position: relative;
}
footer .footer_main_area .f_cnt_area .cnt_box .parts_box ul li::after {
  display: block;
  content: '';
  position: absolute;
  top: .5em;
  left: -1em;
  width: 6px;
  height: 6px;
  background-color: #fff;
  border-radius: 100%;
}
footer .footer_main_area .f_cnt_area .cnt_box .parts_box a{
	color: #fff;
}
footer .footer_main_area .f_cnt_area .cnt_box .parts_box a:hover{
	text-decoration: underline;
}
/* copyright */
footer .footer_main_area .copy{
	color: #fff;
	text-align: center;
	font-size: 14px;
	margin-top: 15px;
}

@media screen and (max-width: 768px) {
	footer .footer_main_area .f_cnt_area{
		width: 100%;
		padding: 10px;
	}
	footer .footer_main_area .f_cnt_area .cnt_box .parts_box{
		width : 100%;
		padding: 0 0 10px 0;
        border-bottom: 1px solid #2b9483;
	}
	footer .footer_main_area .f_cnt_area .cnt_box .parts_box ul li {
		float:left;
		width: 50%;
	}
}

/*-------------------------------------------------------------
  要素を画面表示時にフェードインする
-------------------------------------------------------------*/
/* 画面外にいる状態 */
.fadein {
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 500ms;
	}
/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

/*-------------------------------------------------------------
  PAGE TOP
-------------------------------------------------------------*/
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 5%;
  bottom: 5%;
/*  background: #00826d; */
  background: #083b10;
  opacity: 0.6;
  border-radius: 50%;
  border: 1px solid #fff;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
  z-index: 1000;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  top: 3px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

@media screen and (max-width: 768px) {
	#page_top{ bottom: 3%; }
}

/*-------------------------------------------------------------
  SP MENU
-------------------------------------------------------------*/
/* menu -------------------------------- */
.menu{
    height: 20px;
    position: fixed;
    right: 20px;
    top: 20px;
    width: 30px;
    z-index: 20001;
}
.menu__line{
    background: #00826d;
    display: block;
    height: 2px;
    position: absolute;
    transition:transform .3s;
    width: 100%;
}
.menu__line--center{
    top: 9px;
}
.menu__line--bottom{
    bottom: 0;
}
.menu__line--top.active{
    top: 8px;
    transform: rotate(45deg);
	background: #fff;
}
.menu__line--center.active{
    transform:scaleX(0);
}
.menu__line--bottom.active{
    bottom: 10px;
	transform: rotate(135deg);
	background: #fff;
}

/* gnav -------------------------------- */
.gnav{
    background: rgba(8,59,16,0.7);;
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 20000;
}
.gnav__wrap{
    align-items:center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    width: 100%;
}
.gnav__menu{
	width: 90%;
	text-align:center;
}
.gnav__menu__item{
    padding: 8px 0;
	border-bottom: 1px dashed #ccc;
}
.gnav__menu__item a{
    color: #000;
    font-size: 1.1em;
    font-weight: bold;
    padding: 8px;
    text-decoration: none;
    transition: .5s;
}
.gnav__menu__item a:hover{
    color: #666;
}
/* SPメニュー下部のボタン ----------------- */
.gnav__menu__icon{
	width: 100%;
	margin-top: 15px;
	text-align:center;
	color:#fff;
	font-weight:bold;
}
.gnav__menu__icon .telbox {
	width: 100%;
	margin: 5px 0;
}
.gnav__menu__icon a.maintel {
	width: 100%;
	padding: 10px 0;
	background-color: #3bb36f;
	color: #fff;
	display: inline-block;
}
/* tel */
.gnav__menu__icon a.maintel span::before {
	content:"";
	display:inline-block;
	width:1em;
	height:1em;
	margin-right: 3px;
	background:url(../img/common/icon_tel.svg) no-repeat;
	background-size:contain;
}
/* gnav_menu_original ------------ */
.gnav_menu_original{
	width:100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.gnav_menu_original .gnav_menu_btn{
	width:46%;
	margin: 0 2% 15px 2%;
	text-align: center;
	border: 1px solid #fff;
	border-radius: 10px;
	padding: 10px;
	position: relative;
	color: #fff;
}
.gnav_menu_original .gnav_menu_btn .icon_img{
	width:40%;
}
.gnav_menu_original .gnav_menu_btn .menu_txt{
	margin-top:5px;
	font-weight: bold;
}
.gnav_menu_original .gnav_menu_btn a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
}
.gnav_menu_original .gnav_tel_btn{
	width:100%;
	margin-top: 10px;
}
.gnav_menu_original .gnav_tel_btn a{
	width:100%;
	display: block;
	text-align: center;
	border-radius: 10px;
	padding: 15px;
	background-color: #083b10;
	color: #fff;
}
.gnav_menu_original .gnav_tel_btn a span{
	font-weight: bold;
	font-size: 20px;
}

/*-------------------------------------------------------------
  pager
-------------------------------------------------------------*/
.news_pager_area{
	width:100%;
	margin: 30px 0 0 0;
}
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.pagination .nav-links {
	text-align: center;
}
.pagination .nav-links .current {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 5px;
	border: 1px solid #083b10;
	border-radius: 50%;
	background: #083b10;
	color: #fff;
	font-size: 0.8rem;
	line-height: 30px;
}
.pagination .nav-links .dots {
	display: inline-block;
	margin: 5px;
	font-size: 0.8rem;
	font-weight: bold;
	line-height: 30px;
}
.pagination .nav-links a.page-numbers {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 5px;
	border: 1px solid #083b10;
	border-radius: 50%;
	font-size: 0.8rem;
	text-decoration: none;
	line-height: 30px;
}
.pagination .nav-links a.page-numbers:hover {
	background: #083b10;
	color: #fff;
	transition: all .3s;
}
.pagination .nav-links a.prev.page-numbers,
.pagination .nav-links a.next.page-numbers {
	width: auto;
	padding-right: 6px;
	padding-left: 6px;
	border: 0;
	border-radius: 0;
	background: transparent;
}
.pagination .nav-links a.prev.page-numbers:hover,
.pagination .nav-links a.next.page-numbers:hover {
	color: #083b10;
}