@charset "utf-8";
/* =========================================================
 /ecoene/hydraulic/ps_okutadami/report/2023.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;}

#left .inner-wrapper p {font-size: 1.4em;}

.day-tab li {width: 49%; margin-right:2%;}
.day-tab li:last-child {margin-right:0;}

#allWrap { background: #01abbc; padding: 5%; border-radius: 10px; margin-bottom:4em;}
.sectionWrap { background: #fff; padding: 5%; border-radius: 10px; margin-bottom: 3em;}
.sectionWrap .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;}
.sectionWrap .note p {color: #000; font-size: 1.4em; line-height: inherit !important;}

figure {margin-bottom:2em; text-align:center; }
figure div {position: relative; margin-bottom: 2.5em;}
figure div::before,
figure div::after { content: ''; position: absolute; transform: rotate(-35deg); width: 70px; height: 25px; background-color: #fff; z-index: 1;}
figure div::before { top: -10px; left: -25px; border-bottom: 1px solid #aaa;}
figure div::after { bottom: -10px; right: -25px; border-top: 1px solid #aaa;}

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;}
figure figcaption::before,
figure figcaption::after { display: inline-block; position: absolute; width: 10px; height: 100%; border: 3px solid #2589d0; box-sizing: border-box; content: '';}
figure figcaption::before { top: 0; left: 0; border-right: none;}
figure figcaption::after { bottom: 0; right: 0; border-left: none;}

/* sectionWrap em */
.sectionWrap h2 { position: relative; padding: 0.5em 0 1.5rem 0; background: none; margin-bottom: 1.5em;font-size: 1.4em; color: #000;}
.sectionWrap h2 span {font-size: 200%; color: #008898; line-height: 1.2;}
.sectionWrap h2 span::after {content: "\d\a";white-space: pre;}

.sectionWrap h2:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; content: ''; border-radius: 3px; background-image: -webkit-gradient(linear, right top, left top, from(#2af598), to(#009efd)); background-image: -webkit-linear-gradient(right, #2af598 0%, #009efd 100%); background-image: linear-gradient(to left, #2af598 0%, #009efd 100%);}

/* indexWrap em */
.indexWrap h2{background: none; padding:0; color: #fff; font-size: 2.8em; line-height: 1.2 !important; margin-bottom: 1em; }
.indexWrap h2 span {background:linear-gradient(transparent 80%, #ecf158 80%); font-size: 75%;}
.indexWrap h2 span::after {content: "\d\a";white-space: pre;}
.indexWrap figure img,
.sectionStaff figure img {border: 1px solid #ddd; padding: 9px; background: #fff; box-sizing:border-box;}
.box-018 {  position: relative; max-width: 100%; margin: 0 auto; padding: 1em 1.5em; background-color: #fff; color: #333; box-sizing:border-box;}

.box-018::after { position: absolute; top: 0; right: 0; border-width: 0 30px 30px 0; border-style: solid; border-color: #c0cfdf #01abbc; box-shadow: -1px 1px 1px rgb(0 0 0 / 5%); content: '';}
.indexWrap {margin-bottom: 3em;}
.indexWrap h4 { display: inline-block; position: relative; padding: .25em 1em; border-right: 27px solid #2589d0; background-color: #fff; color: #333333; border-left: none; font-size: 1.6em; margin-bottom: 1em;}
.indexWrap h4::before { position: absolute; bottom: 2px; right: -20px; z-index: -1; transform: rotate(5deg); width: 100%; height: 50%; background-color: #d0d0d0; content: ""; filter: blur(4px);}

.dateWrap {margin: 1.5em 0 2em; background-color: rgba(256,256,256, 0.9); padding: 1.5em;}
.indexWrap .dateWrap h3 {border: none; padding: 0; background: none; font-size: 1.8em; color: #0092a8; font-weight: bold; border-bottom: 3px solid #ccc; padding: 0.3em; margin-bottom: 0.75em; position: relative;}
.indexWrap .dateWrap h3::after { content: ''; background-color: #0092a8; width: 10em; height: 3px; position: absolute; bottom: -3px; left: 0; z-index: 1;}
.indexWrap .dateWrap ul {font-size: 1.3em; margin-bottom: 3em;}
.indexWrap .dateWrap ul li {margin-bottom:0.75em;padding-bottom:0.75em; border-bottom: 1px dashed #333;}
.indexWrap .dateWrap ul li:first-child {padding-top:0.75em; border-top: 1px dashed #333;}
.indexWrap .dateWrap p {color: #000;}

/* allWrap em */
#allWrap em{display: inline-block; position: relative; padding: 0 2.5em; color: #333333; margin: 0 auto 0.5em; text-align: center; width: 65%; display: block; font-size: 3.5em; color: #fff; font-weight:bold; box-sizing: border-box;}
#allWrap em i {font-style: normal;}
#allWrap em i::before,
#allWrap em i::after { content: ''; display: inline-block; position: absolute; top: 50%; width: 45px; height: 3px; background-color: #fff;	}
#allWrap em i::before {left: 0;}
#allWrap em i::after { right: 0;}

/* sectionComment */
.sectionComment {border-top: 16px solid #89c7e1; background:#fff; padding: 5%;  background-color: #d3effc; background-image: repeating-linear-gradient(-45deg, #f6f6eb, #f6f6eb 10px, transparent 0, transparent 20px); margin-bottom:4em;}

.sectionComment h2 { position: relative; padding: 0.5rem 1rem 0.5rem 1.5rem; border: 3px solid #333; font-weight: bold; font-size: 2em; text-align: center; margin: 0 auto; background: #fff; width: 80%;}

.sectionComment h2:before,
.sectionComment h2:after { position: absolute; top: 100%; left: 30px; height: 0; width: 0; border: solid transparent; content: "";}
.sectionComment h2:before { margin-left: -12px; border-color: transparent; border-top-color: #333; border-width: 12px;}
.sectionComment h2:after { margin-left: -8px; border-color: transparent; border-top-color: white; border-width: 8px;}

/* comment */
.comment {margin-bottom: 2em;}

.comment h3 { position: relative; padding: .5em .7em; background-color: #2589d0; color: #fff;border-top: none;display: inline-block;font-size: 1.4em;top: 30px;left: -20px;border-bottom: none;}
.comment h3::before { position: absolute; top: 100%; left: 0px; border-bottom: solid 10px transparent; border-right: solid 20px #1579c0; content: '';}

.comment figure {text-align: center; margin: 0 auto 0;}

.comment ul { background-color: rgba(256,256,256, 0.7); padding: 1em; }
.comment ul li { line-height:1.6; margin-bottom:2em;font-size: 1.4em;}
.comment ul li:last-child { margin-bottom:0;}

/*sectionStaff*/
.sectionStaff { position: relative; max-width: 100%; margin: 1em auto 3em; padding: 2em; border-radius: 3px; box-shadow: 0 2px 3px rgb(0 0 0 / 20%); background-color: #f3ffe7; color: #333333; box-sizing:border-box;}
.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;}
.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 img{margin-bottom:1em;}
.sectionStaff figure figcaption { width: 90%; box-sizing: border-box;}
.sectionStaff figure figcaption::before, .sectionStaff figure figcaption::after {border-color: #00e1c1;}

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




@media screen and (max-width: 600px) {

	#allWrap em {font-size:2em;}
	#left .inner-wrapper p, .sectionWrap h2, figure figcaption, .comment h3, .comment ul li, .sectionStaff p, .sectionStaff ul li, #left .inner-wrapper .sectionStaff p {font-size:1.2em;}
	.sectionWrap h2 span::after { white-space: collapse;}
	figure div::before {top: -10px; left: -15px; width: 50px; height: 20px;}
	figure div::after {bottom: -10px;  right: -15px; width: 50px; height: 20px;}
 	.sectionComment h2, .sectionStaff h3 {font-size:1.4em;}
	.sectionComment {}

}