@charset "utf-8";
/* =========================================================
 /ecoene/hydraulic/ps_okutadami/report/2021.htm
========================================================= */
#left .inner-wrapper * {font-feature-settings: "palt";font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif !important;}
figure {margin:0;}
.day-tab li {
    width: 49%;
    margin-right: 2%;
}
.day-tab li:last-child {
    margin-right: 0 !important;
}
/*---------------------------

layout2026

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

.sectiontWrap {margin-bottom: 5em;}

#sectiontWrapper01 { background-image: linear-gradient(180deg, rgba(12, 212, 247, 1), rgba(0, 122, 255, 1) 100%, rgba(46, 78, 230, 1) 65%, rgba(233, 102, 3, 0.67) 75%, rgba(0, 43, 135, 1) 92%, rgba(12, 46, 128, 0.98) 99%);margin-bottom: 6em; padding-bottom:1.5em;}
#sectiontWrapper02 { background-image: linear-gradient(180deg, rgba(12, 212, 247, 1), rgba(0, 122, 255, 1) 100%); margin-bottom: 6em; padding-bottom:1.5em;}
.indexBox {text-align: left;}
.indexBox figure {margin-bottom: 1em;} 
h2.headtitle {background: none !important; padding: 0; font-size: 1em; text-align:center;}
h2.headtitle span {background: linear-gradient(transparent 90%, #e8e62c 0%) repeat scroll 0 -4px; padding: 0; margin-bottom: 1em; display: inline; font-weight: normal; font-size: 2.8em; color: #008898; line-height: 1.6;}

.indexBox article.message { margin: 2em auto;  padding: 2em; background-color: #f2f3f4;  position: relative; }
.indexBox article.message::after { position: absolute;  content: ''; right: 0;  top: 0;  border-width: 0 50px 50px 0;  border-style: solid;  border-color: #ccc #fff #ccc;  box-shadow: -1px 1px 1px rgb(0 0 0 / .15); }
.indexBox article.message h2 {font-size: 2.6em; font-weight: normal; background: none; padding:0; margin:0 0 0.5em 0; position: relative; padding: 0.25em 0;}
.indexBox article.message h2:after { content: ""; display: block; height: 4px; background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2); background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);}
.indexBox article.message p {color: #333; margin-bottom: 1.8em;}
.indexBox article.message figure  { float: right; width: 40%; margin: 0 0 1em 1.5em;}
.indexBox article.message figure figcaption {background: none;display: block; color: #008898;}
.indexBox article.message figure figcaption:before, .indexBox article.message figure figcaption:after {content: none;display: none;}


.indexBox article.overview { margin: 0 0 3em;  padding: 2em; background-color: #daf5f0; outline: 3px dashed #fff; outline-offset: -1em; max-width: 100%;border: 10px solid #e3faee;}
.indexBox article h4 {position: relative; padding: 0.6em; background: #39a; border: none;font-size: 1.6em; font-weight: bold; color: #fff; padding: 0.5em 0.75em; margin-bottom: 1.5em; border: none; }
.indexBox article h4::after{ position: absolute; content: ''; top: 100%; left: 30px; border: 15px solid transparent; border-top: 15px solid #39a; width: 0;  height: 0;}
.indexBox article.overview h4 {border-bottom: solid 3px #39a; color: #39a; background:none; padding: 0 0 0.25em; font-size: 2em;margin-bottom: 0.5em;}
.indexBox article.overview h4::after {content: none; display: none;}
ul.date {margin-bottom: 0;}
ul.date.list {margin-bottom: 2em;}
ul.date.list li { padding-bottom: 0.75em; margin-bottom: 0.75em; border-bottom: 2px dashed #a1d9df;}

h3.articleTitle {background: none; border: none; font-size: 2.6em; padding: 0; margin: 0 0 0.5em 0; color: #39a; font-weight: normal;}

.indexBox article {margin-bottom: 1.5em;}
.indexBox p { font-size: 1.4em !important; line-height:2; color: #0088aa; margin-bottom: 3em;}

ul.date {font-size: 1.4em; }
ul.date li {padding-bottom: 0.75em;}
ul.date + p.tblNote {font-size: 1.2em !important; line-height:1.2;}

figure {text-align:center; margin-bottom: 4em;}
figure img {margin-bottom: 1em;}
figure img + img {margin: -1em 0 1em;}
figure:has(> figcaption) img {margin-bottom: 2em;}
figure figcaption {font-size: 1.4em; text-align:center; color: #fff; position: relative; padding: 20px; background: #008898; border-radius: 10px;padding:0.5em; display: inline-block; font-weight: bold;line-height: 1.75; max-width: 80%; min-width: 50%;}
figure figcaption::before{ content: ''; position: absolute; display: block; width: 0; height: 0; border-radius: 50%; transform: rotate(45deg); left: 40px; top: -15px; border-left: 20px solid #008898; border-top: 20px solid #008898; border-right: 20px solid transparent; border-bottom: 20px solid transparent;}
figure figcaption::after{ content: ''; position: absolute; display: block; width: 0; height: 0; border-radius: 50%; transform: rotate(45deg); left: 55px; top: -20px; border-left: 20px solid #ffffff; border-top: 20px solid #ffffff; border-right: 20px solid transparent; border-bottom: 20px solid transparent;}

section .note {
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), linear-gradient(180deg, #9fc6ff 1px, transparent 1px);
  background-size: 8px 100%, 100% 3em;
  line-height: 3em;
  border-bottom: 1px dotted #9fc6ff;
  overflow: hidden;
  margin-bottom: 3em;}
section .note p {color: #000; font-size: 1.4em; line-height:inherit !important;}

#sectiontWrapper > em,
.comment h3 {text-align: center; display: block; border: none; background: none; padding: 0;}
#sectiontWrapper > em span,
.comment h3 span { position: relative; display: inline-block; padding: 0 45px; font-size: 3em; margin: 0 auto 1em; background:none; font-weight:normal; color: #000;}
#sectiontWrapper > em span:before, #sectiontWrapper > em span:after,
.comment h3 span:before, .comment h3 span:after { content: ''; position: absolute; top: 50%; display: inline-block; width: 44px; height: 2px; background-color: black; -webkit-transform: rotate(-60deg); transform: rotate(-60deg);}
.comment h3 span {margin-bottom: 0.5em;}
#sectiontWrapper > em span:before,
.comment h3 span:before {-webkit-transform: rotate(60deg); transform: rotate(60deg);}
#sectiontWrapper > em span:before,
.comment h3 span:before { left:0;}
#sectiontWrapper > em span:after,
.comment h3 span:after { right: 0;}

.sectiontWrap h2 { position: relative; box-sizing: border-box; width: 100%; background: #dfefff; border: 10px solid #dfefff; padding: 0.5em;  font-weight: bold; font-size: 2.2em; line-height: 1.4 !important; margin-bottom: 1.5em; color: #1c8fca;}
.sectiontWrap h2::before { content: ""; position: absolute; inset: 0; border: 2px dashed white; pointer-events: none;}
.sectiontWrap h2 span { font-weight: normal; font-size: 75%; display: block; color: #333;}
.sectiontWrap h2 span::after, .sectiontWrap h2 span::before {content: "～";}
.sectiontWrap h2:after { position: absolute; content: ''; left: -10px; top: -10px; border-width: 0 0 0.75em 0.75em; border-style: solid; border-color: #fff #fff #a8d4ff; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);}

.comment {margin: 2em auto;  padding: 5em 2em 2em;  position: relative;  background: #d3effc;  max-width: 100%; }
.comment::before { content: ''; position: absolute; top: 1.5em;  left: 1em;  right: 1em;  border-top: dotted 1.5em #fff;  pointer-events: none;}

.comment figure figcaption {font-size: 1.8em: text-align: right; color: #f00; background:none; margin-bottom: 0.5em;}
.comment > div {margin-bottom:3em}

.comment h4 {position: relative;
  padding: .5em .7em;
  background-color: #2589d0;
  color: #fff;
  border: none;
  display: inline-block;
  font-size: 1.4em;
  left: -20px;
  border-bottom: none;}
  
.comment h4::before {
  position: absolute;
  top: 100%;
  left: 0px;
  border-bottom: solid 10px transparent;
  border-right: solid 20px #1579c0;
  content: '';}
.comment figure {border: px solid #ccc; padding: 0.75em; background: #fff;margin-bottom: 1em; margin-top: -30px;}
.comment figure img {margin:0;}
.comment p {font-size: 1.4em; color: #333; line-height: 1.8;}

/*sectionStaff*/
.sectionStaff { position: relative; max-width: 100%; margin: 1em auto 3em; padding: 2em; border-radius: 3px; background-color: #f3ffe7; color: #333333; box-sizing:border-box;}
.sectionStaff p {font-size: 1.4em;}
.sectionStaff::before,
.sectionStaff::after { position: absolute; content: '';}
.sectionStaff::before { top: -15px; right: 10px; height: 50px; width: 15px; border: 3px solid #999; border-radius: 10px; box-shadow: 1px 1px 2px rgb(0 0 0 / 30%); transform: rotate(10deg);}
.sectionStaff::after { top: 0; width: 10px; right: 20px; border: solid 5px #f3ffe7;}

.sectionStaff h3 {border: none; background: none; font-size: 2.2em; text-align:center; padding:1em 0 0 0;margin-bottom: 1.5em; color: #01abbc; display: inline-block; position: relative; width: 100%;}
.sectionStaff h3::before { content: ''; display: inline-block; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 100px; height: 4px; background-color: #00e1c1;}
.sectionStaff p {color: #666; margin-bottom: 1em;}

.sectionStaff figure {margin-bottom:2em;}
.sectionStaff figure img{margin-bottom:1em;}
.sectionStaff figure figcaption {position: relative; padding: .5em 1em; color: #666; font-size: 1.4em;margin-bottom: 3em; width: 80%; margin-left: auto; margin-right: auto;font-weight: bold; background: none; }
.sectionStaff figure figcaption::before,
.sectionStaff figure figcaption::after { display: inline-block; position: absolute; width: 10px; height: 100%; border: 3px solid #2589d0; box-sizing: border-box; content: '';border-radius: 0; transform: none;}
.sectionStaff figure figcaption::before { top: 0; left: 0; border-right: none;}
.sectionStaff figure figcaption::after { bottom: 0; right: 0; top: 0; left: 100%; border-left: none;}

.sectionStaff ul li{ position: relative; margin: 1em 0 2em !important; padding: 1.8em 1.5em 1em 1.5em; border: 2px solid #01abbc;	font-size: 1.4em; background-color: rgba(256,256,256, 0.8);}
.sectionStaff ul li > span { position: absolute; top: -1.15em; left: -.5em; padding: .4em 1.4em; border-radius: 25px; background-color: #01abbc; color: #fff; font-size: .9em;}
.sectionStaff ul li > span::before { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 16px; height: 8px; background-color: #01abbc; clip-path: polygon(0 0, 100% 0, 50% 100%); content: '';}
.sectionStaff ul li { margin: 0;}



sectiontWrap h3 {position: relative; background: #dfefff; box-shadow: 0px 0px 0px 5px #dfefff; border: dashed 2px white; padding: 0.2em 0.5em; color: #454545; font-weight: normal;}
sectiontWrap h3:after { position: absolute; content: ''; left: -7px; top: -7px; border-width: 0 0 15px 15px; border-style: solid; border-color: #fff #fff #a8d4ff; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);}

@media screen and (max-width: 769px) {
	section .note {background-image:linear-gradient(90deg, transparent 0%, transparent 50%, #f5f5f1 50%, #f5f5f1 100%), linear-gradient(180deg, #9fc6ff 1px, transparent 1px)}
	.indexBox article.message::after {border-width: 0 30px 30px 0; border-color: #ccc #f5f5f1 #ccc;}
	.sectiontWrap h2::after {border-color: #f5f5f1 #f5f5f1 #a8d4ff;}
	.sectiontWrap h2 span::after {display: inline;}
}
	
@media screen and (max-width: 600px) {
	h2.headtitle span,
	.indexBox article.message h2,
	h3.articleTitle,
	#sectiontWrapper > em span, .comment h3 span,
	.sectiontWrap h2 {font-size: 1.6em}
	
	.indexBox article.overview h4,
	.indexBox article h4,
	.sectionStaff h3 {font-size: 1.4em}
	
	.indexBox p,
	ul.date,
	section .note p,
	.comment h4,
	.comment p,
	.sectionStaff p,
	.sectionStaff ul li {font-size: 1.2em !important;}
	
	figure figcaption {font-size: 1em !important;}
	
	.indexBox article.message figure {float: none; width: 60%;margin: 0 auto;}
	.indexBox figure img {margin: 0;}
	
	
	

}