@charset "UTF-8";
/*
Theme Name:hpdf
Theme URI:https://hpdf.jp/
Description:
Author: 広島県歯科医師連盟 TEAM
Version: 1.0.0
*/



#base-fs{
font-size:16px;
}





/*--------------------------------------------
松本追記
---------------------------------------------*/
@media screen and ( width < 960px ){
  #sidebar{
    display: none !important;
  }
}
@media screen and ( width >= 960px ){
  #column02{
    display: grid;
    grid-template-columns: calc( 220 * 100% / 960 ) calc( 740 * 100% / 960 );
    align-items: start;
    #sidebar{
      grid-column: 1;
      grid-row: 1;
    }
    .entry-content{
      grid-column: 2;
      grid-row: 1;
    }
    /* 別例：40pxの隙間が欲しい時 */
    /*
      grid-template-columns: calc( 220 * 100% / 960 ) calc( 700 * 100% / 960 );
      justify-content: space-between;
    */
  }
}



/* ■SPメニュー */
.menu-btn {
    position: fixed;
    top: 5px;
    right: 10px;
    display: flex;
    height: 40px;
    width: 40px;
    justify-content: center;
    align-items: center;
    z-index: 1090;
    background-color: #006699;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}


#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}

#menu-btn-check {
    display: none;
}


/* SPメニュー展開時 */

.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 1080;
    background-color: rgba(255,255,255,0.95);
    transition: all 0.5s;/*アニメーション設定*/
}

.menu-content ul {
    padding: 50px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #000;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 20px;
    box-sizing: border-box;
    color:#000;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #000;
    border-right: solid 2px #000;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}



/* 通常左カラムメニュー */
#pcmenu1 {
margin: 20px 20px 0 0;
padding: 0;
list-style: none;
}
#pcmenu1 li {
display: block;
width: 200px;
height: 50px;
margin: 0;
line-height: 48px;
background: linear-gradient(#fff, #f1f1f1);
border: 1px solid #cfcfcf;
}
#pcmenu1 li + li {
margin-top: -1px;
}
#pcmenu1 li:first-child {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#pcmenu1 li:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

#pcmenu1 li a {
font-size: 16px;
display: block;
position: relative;
width: 100%;
height: 100%;
padding: 0 10px 0 18px;
box-sizing: border-box;
text-decoration: none;
color: #666;
}


#pcmenu1 li a:hover {
display: block;
position: relative;
width: 100%;
height: 100%;
padding: 0 10px 0 18px;
box-sizing: border-box;
text-decoration: none;
color: #666;
background-image: linear-gradient(white,white,white,#dbebf8);
}



#pcmenu1 li a::after {

position: absolute;
right: 10px;
top: 50%;
margin-top: -10px;
}


#pcmenu1 li a:hover:after {

position: absolute;
right: 10px;
top: 50%;
margin-top: -10px;
}





/* ページ上部の余白(ヘッダー固定のときには余白が必要でした) */
body{padding-top: 90px;}

@media screen and (max-width:960px){
body{padding-top: 50px;}
}




.a-linkicon01:after{
	content:url(/img/icon_link01.png);
}


.a-link01{
  color: #666666;
  padding: 0.1rem 1rem;
  margin:0 2px 2px 0;
  display: inline-block;
  background: #ffffff;
  vertical-align: middle;
  border: solid 1px #cfcfcf;
  border-radius: 25px;

}

.a-link02{
  color: #333333;
  padding: 0.1rem 0.5rem;
  margin:0 0 0 5px;
  display: inline-block;
  background: #ffffff;
  vertical-align: middle;
  border: solid 1px #cfcfcf;
  border-radius: 15px;

}






/*■横幅で表示変更
--------------------*/
.SP{display:none;}
@media screen and (max-width:960px){
.PC{display:none;}
.SP{display:inherit;}
}



/* ■topbar */


img.logo01 {
	max-width:100%;
	min-width:10px;
	height:auto;
}

@media (max-width: 640px) {
img.logo01 {
	width: 50%;
	}
}

#a-topbar01{
background-color:#fff;
width:100%;
top:0;
z-index:10;
position: fixed;
border-bottom:solid 1px #003366;
display: flex;
}

@media (max-width: 800px) {#a-topbar01{display: grid; border-bottom:solid 1px #fff;}}


.a-topbar02{
display: flex;
margin:0;
padding:30px 0 30px 0;
}

@media (max-width: 800px) {.a-topbar02{width: 100%; padding:0;}}


.a-btn01{
color:#fff;
height:30px;
text-align:center;
vertical-align: middle;
background: #006699;
padding:3px 20px;

font-size:16px;
line-height: 20px;

margin:0 1px;
border: 3px solid #000;

}


@media (max-width: 800px) {.a-btn01{
font-size:12px;
line-height: 20px;

margin:0;
border:0px solid #fff;
width: 25%;
border-right:1px solid #fff;
}}


.a-btn02{
color:#fff;
height:30px;
text-align:center;
vertical-align: middle;
background: #ff0000;
padding:3px 20px;

font-size:16px;
line-height: 20px;

margin:0 1px;
border: 3px solid #000;

}

@media (max-width: 800px) {.a-btn02{
font-size:12px;
line-height: 20px;

margin:0;
border:0px solid #fff;
width: 25%;
border-right:1px solid #fff;
}}











.fade-up {
  transition: opacity 1s;
  -moz-transition: opacity 1s;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: transform 1s;
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  -o-transition: transform 1s;
}







/* ■■フォントサイズ別 */
.fs07{font-size:10px;}
.fs08{font-size:12px;}
.fs09{font-size:14px;}
.fs10{font-size:16px;}
.fs11{font-size:18px;}
.fs12{font-size:20px;}
.fs15{font-size:24px;}
.fs20{font-size:32px;}
.fs25{font-size:40px;}

.bold{font-weight:bold;}


.text{
	font-size:16px;
	line-height : 24px;
	margin:0 0 16px 0;
}

.text2{
	font-size:16px;
	text-indent: 16px;
	line-height : 24px;
	margin:0 0 16px 0;
}




.wp-element-caption{
font-size:16px;

}




div.none{display:none;}

div.max960 {
	max-width: 960px;
	margin: 0 auto;
	text-align: left;
}

img.max {
	max-width:100%;
	min-width:10px;
	height:auto;
}


.h1-01 {
	position: relative;
	padding-top: 30px;
	font-size: 24px;
	border-bottom: 2px solid #006666;
	margin:0 0 30px 0;
	background: linear-gradient(to right, #fff, #006699);
}

.h1-01 span {
	background-color: transparent;
	position: relative;
	z-index: 2;
	font-size:24px;
	font-weight:bold;
	border-left:10px solid #333333;
    border-image: linear-gradient(to right bottom,#cccccc,#003366) 1;
	padding:10px;
	color:#000000;
	margin:0 0 0 10px;
}

.h1-01::before {
	content: attr(data-en);
	position: absolute;
	top: 10px;
	left: 60px;
	color: rgba(5,62,98,0.1);
	font-size: 40px;
	text-transform: none;
	z-index: 1;
}






.h2-01 {
	font-size: 20px;
	background: #eaf5f9;
	padding: 10px 10px 10px 25px;
	position: relative;
	margin:0 0 5px 0;
	}
.h2-01:before {
    position: absolute;
    top: 20%;
    left: 15px;
    width: 6px;
    height: 60%;
    content: '';
    border-radius: 3px;
    background: #006699;
}





.a-p01{
  padding-bottom: 5px;
  margin:5px 0;
  font-size: 20px;
  position: relative;
  overflow: hidden;
}
.a-p01::before{
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #006666;
}
.a-p01::after{
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #cccccc;
}


/* ■支部だより日付 */
.a-p02{
  margin:0 0 30px 10px;
  padding:3px 10px;
  font-size: 16px;
  	line-height : 30px;
  color:#fff;
  background: #006666;
  border-radius: 10px;
  }

/* ■支部だより リンク文字 */
.text3{
  margin:0 0 0 10px;
  font-size: 16px;
  border-bottom:1px dotted #ccc;
}



/* 連盟ニュース「NEW」マーク */
span.a-new01{
  font-size:12px;
  color: #FF0000;
  padding: 1px 5px;
  margin:0 5px 0 0;
  background: #fff;
  vertical-align: middle;
  border: solid 1px #ff0000;
  }






/* ■歴史、沿革 */
table.a-table02{
	width:100%;
	line-height : 24px;
}

table.a-table02 td{
	border-bottom:1px dotted #cccccc;
	padding:5px;
}

table.a-table02 td:first-child{
    width: 0;
    white-space: nowrap;
	vertical-align:top;
}


/* ■役員名簿 */

table.a-table03{
	margin:auto;
	width:50%;
}


@media (max-width: 960px) {
table.a-table03{
	width: 90%;
	}
}

table.a-table03 td{
	text-align:center;
	border:1px solid #cccccc;
	padding:5px;
}

td.a-table03-2td{
background: #006699;
color:#ffffff;
}

td.a-table03-3td{
background: #cfcfcf;
color:#000;
}




/* ■議員リンク */
table.a-table04{
	width:100%;
	line-height : 20px;
}

table.a-table04 td{
	border-bottom:1px dotted #cccccc;
	padding:5px;
}

table.a-table04 td:nth-child(2){
    width: 0;
    white-space: nowrap;
}



/* ■選挙結果 */
table.a-table05{
	width:80%;
	line-height : 24px;
}


@media (max-width: 960px) {
table.a-table05{
	width: 100%;
	}
}

table.a-table05 td{
	border-bottom:1px dotted #cccccc;
	padding:5px;
}

table.a-table05 td:nth-child(4){
color:#ff0000;
}

table.a-table05 td:nth-child(5){
    width: 0;
    white-space: nowrap;
	text-align:right;
}


table.a-table07{
	width:80%;
	line-height : 24px;
}


@media (max-width: 960px) {
table.a-table07{
	width: 100%;
	}
}

table.a-table07 td{
	border-bottom:1px dotted #cccccc;
	padding:5px;
	text-align:center;
}


table.a-table07 td:nth-child(4){
    width: 0;
    white-space: nowrap;
	text-align:right;
}



table.a-table08{
	width:100%;
	line-height : 24px;
}


@media (max-width: 960px) {
table.a-table08{
	width: 100%;
	}
}

table.a-table08 td{
	border:1px dotted #cccccc;
	padding:5px;
	white-space: nowrap;
text-align:center;
}

table.a-table08 td:nth-child(3){
font-size:12px;
white-space:normal;
text-align:left;
}



table.a-table08 td:nth-child(4){
color:#ff0000;
}

table.a-table08 td:nth-child(5){
    width: 0;
    white-space: nowrap;
	text-align:right;
}



---------------

table.a-table09{
	width:100%;
	line-height : 24px;
}


@media (max-width: 960px) {
table.a-table09{
	width: 100%;
	}
}

table.a-table09 td{
	border:1px dotted #cccccc;
	padding:5px;
	white-space: nowrap;
}



















/* ■連盟ニュース */
table.a-table06{
	width:80%;
	line-height : 24px;
}

@media (max-width: 960px) {
table.a-table06{
	width: 100%;
	}
}

table.a-table06 td{
	border-bottom:1px dotted #cccccc;
}


table.a-table06 td:nth-child(1){width: 0; white-space: nowrap; padding:0 0 0 5px;}
table.a-table06 td:nth-child(2){width: 0; white-space: nowrap;}
table.a-table06 td:nth-child(3){width: 0; white-space: nowrap;}
table.a-table06 td:nth-child(4){width: 0; white-space: nowrap;}
table.a-table06 td:nth-child(5){width: 0; white-space: nowrap;}

table.a-table06 td:nth-child(6){
	text-align:right;
	padding:5px;
}


/* 全号掲載時にリニューアル */

.news-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}



div.news-p001 {
  display: flex;
  width: calc(50% - 5px);
  font-size: 16px;
  padding:10px;
  border-bottom:1px solid #cccccc;
  box-sizing: border-box;
}

.news-p001 a {
  display: flex;
  margin-left: auto;
}


.news-span001 {
  width: 170px;
  text-align: left;
  flex-shrink: 0;
}

.news-span002 {
  width: 70px;
  text-align: center;
  flex-shrink: 0;
  font-weight: bold;
}

.news-span003 {
  width: 90px;
  text-align: center;
  flex-shrink: 0;
  border:1px solid #ccc;
  border-radius:20px;
  padding: 2px 3px;
  font-size:10px;
  
}


@media (max-width: 960px) {
  div.news-p001 {
    width: 100%;
    margin-right: 0;
  }
}










/* ■トップ画像ズーム */

.zoom-1 img {
      width: 100%;
      height: auto;
      animation: animationZoom1 5s ease-in-out forwards;
    }

.zoom {
      width: 100%;
      height: auto;
      overflow: hidden;
      margin-bottom: 30px
    }

    @keyframes animationZoom1 {
      100% { transform:scale(1.03)}
    }


/* ■YOUTUBE */
.youtube-ratio iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.a-half{display: flex;}
@media (max-width: 640px) {.a-half{display: grid;}}

.a-half2{
border:1px solid #cccccc;
padding:10px;
margin:0 3px 0 0;
width:49%;
border-radius: 10px;
}

@media (max-width: 640px) {.a-half2{width: 98%;}}



/* ■続きを読むボタン（開閉） */

.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	position: relative;
}

.cp_box label {
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	height: auto;
	background: none;
}

.cp_box::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 140px;
	background: linear-gradient(to bottom, rgba(250,252,252,0) 0%, rgba(250,252,252,0.95) 90%);
	pointer-events: none; /* ←これ重要 */
}


.cp_box input:checked ~ .cp_container::before {
	display: none;
}





.cp_box label:after {
	font-size:18px;
	line-height:32px;
	position:absolute;
	z-index:3;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	width:240px;
	font-weight:bold;
	content:'▽ 続きを読む';
	letter-spacing:5px;
	color:#006666;
	border:solid 2px #006666;
	background-color:#fff;
	text-align:center;
	padding:5px 0;
}






.cp_box input {
	display: none;
}
.cp_box .cp_container {
	overflow: hidden;
	height: 200px; /* 開く前に見えている部分の高さ */
	transition: all 0.5s;
}
.cp_box input:checked + label {
	/* display: none ; 閉じるボタンを消す場合解放 */
}
.cp_box input:checked + label:after {
	font-family: FontAwesome;
	content: '▲'' 閉じる';
}
.cp_box input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
	transition: all 0.5s;
}





/* ■フローティングボタン共通 */

.fbutton{
    position: fixed;
    font-size: 14px;
    font-weight:bold;
    z-index:999;
}

.fbutton a{
    background: #006699;
    text-decoration: none;
    color: #FFFFFF;
    border: 3px #000000 solid;
    width: 80px;
    padding: 5px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}


.fbutton a:hover {
    text-decoration: none;
    background: #70D2F0;
    border: 2px #FFFFFF solid;
    color: #ffffff;
}


/*■上に戻るボタン　*/
.fbutton-1 {bottom: 10px; right: 10px;}










/* ■フッタ */


div.a-foot01{
width:100%;
border-top: 1px solid #006666;
padding:10px 0 100px 0;
text-align:center;
margin:100px 0 0 0;
}


a.a-map{
  font-size:16px;
  color: #ffffff;
  padding: 5px 20px;
  margin:0 0 20px 0;
  display: inline-block;
  background: #409EB5;
  vertical-align: middle;
  border: solid 1px #ffffff;
  border-radius: 5px;
}


img.a-tel01{
vertical-align:bottom;
}


a.a-tel01{
  font-size:32px;
  font-weight:bold;
  color: #003366;
margin:0 0 0 5px;
}



a.a-link02{
  font-size:16px;
  color: #000000;
  padding: 10px 20px;
  margin:20px 0;
  display: inline-block;
  background: #fff;
  vertical-align: middle;
  border: solid 1px #cccccc;
  border-radius: 20px;
}





/*--------------------------------------------
MEMBER
---------------------------------------------*/
.wp-block-query:has(.listEntries){
  time{
    display: block;
    font-size: 16px;
    line-height: calc( 20 / 16 );
    padding-block: 8px;
    letter-spacing: 0.1em;
  }
  .wp-block-post-title{
    margin:0;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }
  .wp-block-post-excerpt__excerpt{
    font-size: 16px;
    letter-spacing: 0.1em;
  }
}
@media screen and ( width < 960px ){
  .wp-block-query:has(.listEntries){
    padding-inline:calc( 30 * 100% / 960 );
    .wp-block-columns{
      display: block;
    }
    time{
      padding-inline: calc( 12 * 100% / 900 );
    }
    .wp-block-post-featured-image{
      margin-top: 0;/* 元2.4em */
      width: 50%;
      margin-inline: auto;
    }
  }
}

@media screen and ( width >= 960px ){
  .wp-block-query:has(.listEntries){
    time{
      padding-left: 8px;
    }
    .wp-block-post-title{
      padding-left: 8px;
    }
    .wp-block-post-excerpt__excerpt{
      padding-left: 8px;
    }
  }
}