@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:last-child { margin-right: 0 !important;
}
ul.normalList {list-style: disc; list-style-position: inside; margin-bottom: 2em;}
/*---------------------------

layout2024

---------------------------*/
strong {font-weight: bold}
p {margin-bottom: 1em;}
.flexBox {display: flex; justify-content: space-between;}
section {margin-bottom: 6em;}
section.sectionWrap p, article p {font-size: 1.4em; color: #000; margin-bottom: 0.2em; line-height:2; text-align:left;}
figure img + img {margin-top: 1em;}

.indexBox figure {margin-bottom: 1em;}
.indexBox figure img {border: 1px solid #ccc; padding: 0.5em; background: #fff;}
.indexBox figure figcaption {display: block; padding: 0; position: static; max-width: 100%; color: #333 !important; background: none;text-align: left;}


.indexBox h2 {text-align: center;background: none; font-weight: normal; font-size: 2.6em; padding: 0; line-height: 1.6 !important; margin-bottom: 1em; position: relative; padding: .5em 1em; color: #333333;}
.indexBox h2::before,
.indexBox h2::after { display: inline-block; position: absolute; width: 10px; height: 100%; border: 3px solid #2589d0; box-sizing: border-box; content: '';}
.indexBox h2::before { top: 0; left: 0; border-right: none;}
.indexBox h2::after { bottom: 0; right: 0; border-left: none;}
.indexBox p { font-size: 1.4em !important; line-height:1.8; margin-bottom: 1em; color: #000;}

.indexBox article.member {width: 100%; box-sizing:border-box; text-align:center; margin-top: 3em;}
.indexBox article.member .flexBox {flex-wrap: nowrap;}
.indexBox article.member .flexBox::after {display: none;}
.indexBox article.member .flexBox div {border: 1px solid #ccc; padding: 1em; background: #fff; width: 48%;box-sizing: border-box; box-shadow: 0 0 5px #80808047;}
.indexBox article.member .flexBox div figcaption {color: #333;} 

.indexBox article.member h3 {text-align: center; font-size: 2.4em; font-weight: bold; background: none; border: none; color: #2589d0; text-align: center; box-sizing: border-box; position: relative; display: inline-block; padding: 0 100px; text-align: center;}
.indexBox article h3:before, .indexBox article h3:after {position: absolute; top: calc(50% - 3px); width: 80px; height: 6px; content: ''; border-top: solid 2px #2589d0; border-bottom: solid 2px #2589d0;}
.indexBox article h3:before {left: 0;}
.indexBox article h3:after { right: 0;}
.indexBox article .flexBox div {width: 48%; margin-bottom: 1em;}

.indexBox h3 {font-size: 2.25em; font-weight:normal; border: none; border-left: 3px solid #01abbc; padding: 0; padding-left: 15px; margin-bottom:1em;}
.indexBox h4 {font-weight: bold; font-size: 1.8em; border: none; position: relative; padding: .2em 1em; border-radius: 10px; background-color: #2589d0; color: #fff;display: inline-block; margin-bottom: 1em;}
.indexBox h4::after { content: ''; position: absolute; top: 100%; left: 30px; width: 0; height: 0; border: 11px solid transparent; border-top: 11px solid #2589d0;}

.indexBox ul { font-size: 1.4em;list-style: none; margin: 0 0 1em;border-top: 1px dashed #000; padding: 0.75em 0 0 0;}
.indexBox ul li {border-bottom: 1px dashed #000; padding-bottom: 0.75em; margin-bottom: 0.75em; color: #000;}

.indexBox h5 {font-weight: bold; font-size: 1.8em; color: #000;  border: none; display: flex; align-items: center; column-gap: 8px; color: #333333;}
.indexBox h5::before { width: 0.8em; height: 0.4em; border-bottom: 4px solid #2589d0; border-left: 4px solid #2589d0; transform: rotate(-45deg) translate(2px, -2px); content: '';}

.indexBox article {margin-bottom: 3em;}
.indexBox article.schedule {position: relative; max-width: 100%; margin: 1em auto; padding: 3.5em 2.5em; border-radius: 3px; box-shadow: 0 2px 3px rgb(0 0 0 / 20%); background-color: #e8f9ff; color: #333333;}
.indexBox article.schedule::before,
.indexBox article.schedule::after { position: absolute; content: '';}
.indexBox article.schedule::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);}
.indexBox article.schedule::after { top: 0; width: 10px; right: 20px; border: solid 5px #e0efff;}

.sectionWrap {margin-bottom: 3em;}
.sectionWrap h2 { font-size: 2em !important; line-height: 1.25 !important; color: #000;  position: relative; margin: 0 0 2em 9px; padding: .5em .8em; background-color: #2589d0; color: #fff;
}

.sectionWrap h2::before { position: absolute; top: 0; left: -9px; z-index: 1; width: 5px; height: 135%; border-radius: 3px; background-color: #600; content: '';}
.sectionWrap h2 span::before,
.sectionWrap h2 span::after { position: absolute; left: -9px; width: 20px; height: 3px; border-radius: 3px; background-color: #c99; content: '';}
.sectionWrap h2 span::before { top: 44%; transform: rotate(-25deg);}
.sectionWrap h2 span::after { top: 54%; transform: rotate(25deg);}

figure {padding: 0; text-align: center; margin-bottom: 2.5em; text-align:center;}
figure img {margin-bottom: 0.5em; border: 1px solid #ccc; padding:0.5em; background: #fff;box-sizing: border-box;}
figure img::last-child {margin-bottom: 1.5em;}
figure figcaption {font-size: 1.4em; color: #000;line-height: 1.6;padding: 0; font-weight: bold; text-align:center;line-height: 2;padding-bottom: 1px;  display: inline;   background:linear-gradient(transparent 70%, #fff991 0%);}


.flexBox.circle{align-items: center; margin-bottom: 2em;}
.flexBox.circle img {width: 130px; height:130px;}
.flexBox.circle div {width: calc(100% - 200px); margin-bottom: 0;}
.rbox,
.lbox {padding: 8px 15px; background: #c9e8fc; border-radius: 20px; font-size: 1.4em;  position: relative; margin-left: 15px; padding: .8em 1.2em; border-radius: 5px; background-color: #c9e8fc; color: #333333;}
.lbox {margin-right: 15px; margin-left: 0;}
.rbox::before,
.lbox:before { position: absolute; width: 15px; height: 30px; background-color: #c9e8fc; content: '';}
.rbox::before { left: -15px; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.lbox::before { right: -15px; clip-path: polygon(0 0, 100% 50%, 0 100%);}

.gallery {border: 3px solid #2589d0; padding: 3em 2em; margin-bottom: 6em; background:#f2f6fc;}
.gallery h3{border: none; font-size: 1.8em; text-align:center; margin-bottom: 1em; padding: 0.5em 0; padding: .5em .7em; border: 2px solid #2589d0; box-shadow: 5px 5px #2589d0; color: #2589d0;}

.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; overflow: hidden; margin-bottom: 0; background-color: #fff; padding: 0 0.5em; margin-bottom:2em;}
.sectionWrap .note p {line-height: inherit !important;}
.sectionWrap .note p + p {margin-top: 2em;}

/*
.interview div{margin-bottom: 3em;padding:4em 2em 1em; background-color:#4abc7b; position:relative;}
.interview div:after{ position: absolute; content: ''; right: 0px; top: 0px; border-width: 0 3.5em 3.5em 0; border-style: solid; border-color: #ccc #fff  #ccc; box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);}
.interview div h4 {color: #fff; border: none; font-size: 2.5em; margin-bottom: 0.5em; border-bottom: 3px dashed #fff; padding: 0 0 0.5em;}
.interview div h4 em {display: block; text-align:right; font-size: 80%;}
.interview p {color: #fff;}
*/

.sectionWrap article.announcement {padding: 3em; margin-bottom: 3em; background: rgb(65,136,208); background: radial-gradient(circle, rgba(65,136,208,1) 0%, rgba(77,212,160,1) 100%) 0 0 / 200% 100% repeat;  animation: article 3s infinite alternate;}
@keyframes article {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

.sectionWrap article.announcement p, .sectionWrap article.announcement ul li  {color: #000; font-size: 1.4em; line-height:1.6;}
.sectionWrap article.announcement ul li { line-height:1.6; margin: 0.5em 0 1.5em; position:relative;}
.sectionWrap article.announcement ul li::after {position: absolute; /*font-family: "Font Awesome 5 Free"; content:"\f063";font-weight: 900; display:block; left: 50%;*/content: "\2193";  display: block; left: 50%; right: 50%;font-weight: 900;}
.sectionWrap article.announcement ul li:last-child::after {content:""}
.sectionWrap article.announcement ul li strong {display: block;}
.sectionWrap article.announcement h3 {border: none; padding: 0; margin-bottom: 1em; font-size: 2.4em; color: #fff; background: none; text-align:center;}
.sectionWrap article.announcement h3.exp {background: linear-gradient(transparent 70%, #eeb0ee  70%);}
.sectionWrap article.announcement h3 em {display: block; font-size: 60%;}
.sectionWrap article.announcement h3 span {background: none; padding:0;}
.sectionWrap article.announcement figcaption{display: none;}
.sectionWrap article.announcement figure {margin-bottom: 0.5em;}
.sectionWrap article.announcement p {margin-bottom:0; color: #fff;}
.sectionWrap article.announcement ol {list-style: inside; list-style-type:decimal; font-size: 1.3em; background: rgba(256,256,256,0.5); padding: 1em; margin-bottom: 1em; border: 1px solid #ddd;}
.sectionWrap article.announcement ol li {margin-bottom: 1em; padding-left: 1em;text-indent: -1em;}
.sectionWrap article.announcement ol li:last-child {margin-bottom: 0;}

.comment {margin-bottom: 4em; background-image: linear-gradient(180deg, rgba(100, 170, 228, 1), rgba(157, 253, 203, 1)); padding:1.5em; box-sizing:border-box;}
.comment h3 {border: none; background: none; text-align: center; font-size: 3em; padding: 0; margin-bottom: 0.5em; color: #fff; font-weight: normal; line-height: 1.2 !important; position: relative; padding: 0.75em 0;}
.comment h3:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; content: ''; background-image: -webkit-repeating-linear-gradient(135deg, #fff, #fff 1px, transparent 2px, transparent 5px); background-image: repeating-linear-gradient(-45deg, #fff, #fff 1px, transparent 2px, transparent 5px); background-size: 7px 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.comment article {background: rgb(256,256,256,0.3); padding: 2em; text-align:left; margin-bottom: 1.5em;}

.tips { width: 100%; font-size: 1.2em; color:#000; box-sizing:border-box; }
.tips p {margin-bottom: 1em;}
.tips h4 {border: none; color: #000; margin-bottom: 0.5em; font-size:1.4em; padding: 0; padding-bottom: 0.25em; position: relative; border-bottom: 4px solid #04cacf;}
.tips h4:before { position: absolute; bottom: -4px; left: 0; width: 20%; height: 4px; content: ''; background: #059c9e;
}
.tips p {color: #000;}
.tips figure {margin-bottom:0;}
.tips figcaption {color: #000; font-size: 1.2em;}

.sectionStaff {background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  background-size: 24px 24px;
  background-repeat: repeat;
  background-position: center center;
  padding: 2.5em;
  border: 1.5em solid #c9e8fc;}
.sectionStaff h4 {border:none; color: #000; font-size: 2.4em; font-weight: normal; line-height: 1.2 !important;  margin-bottom: 1em;padding:0; display: inline-block; position: relative; color: #333; text-align:left;  width: 100%; border-bottom: 3px solid #2589d0;}
.sectionStaff h4 span {color: #2589d0; display:block; font-size: 80%; margin-bottom:0.5em; font-weight: bold; text-align:right;}
.sectionStaff p {font-size: 1.4em; line-height: 2 !important;}
/*
section.date { position: relative; color: #000; padding: 10px 0; text-align: center; margin: 1.5em 0;
}
section.date:before { content: ""; position: absolute; top: -13px; left: 50%; width: 190px; height: 110px; border-radius: 50%; border: 5px solid #008ce6; border-left-color: transparent; border-right-color: transparent; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
*/
@media screen and (max-width: 600px) {
	section {margin-bottom: 3em;}
	.indexBox p {font-size: 1.2em !important;}
	.indexBox h2 {font-size: 2em !important; }
	.indexBox h3 {font-size: 1.3em;background: none;}
	.indexBox h4, indexBox h5, .indexBox article.member h3 {font-size: 1.4em;}
	.indexBox h5 {font-size: 1.3em;}
	ul.date {font-size: 1em;}
	.indexBox article.translucent ul li {width: 29%;}
	.indexBox ul {font-size: 1.2em !important;}
	.indexBox article.schedule {padding: 2em 2em 1em;}
	
	figure {margin-bottom: 3em;}
	figure img {padding:0.5em;}
	figure figcaption {font-size: 1.2em;}
	
	
	
	.sectionWrap { font-size: 0.8em; margin-bottom: 2em;}
	.sectionWrap h2 { font-size: 2em !important; }
	
	figure figcaption::before, figure figcaption::after {width: 30px;}
	
	.comment {padding: 1em;}
	.comment h3 {font-size: 1.8em;}
	.comment article {padding: 0.5em;}
	.tips figcaption {font-size: 1em;}
	.tips {padding: 1em; border-width: 2px;}
	.tips h4 {font-size: 1.2em;}
	
	.sectionWrap article {padding: 1.5em;}
	.sectionWrap article h3 {font-size: 2em;}
	
	.sectionStaff {padding:1.5em}
	.sectionStaff::before {border-width: 0 30px 30px 0;}
	.sectionStaff h4 {font-size: 2em;}
	.sectionStaff::before {border-color: #f8f8f4 #f8f8f4 #e3e3e3 #e3e3e3;}
	.sectionStaff p {font-size: 1em;}
	
	.gallery {padding: 1em 1em 2em;}
	.gallery h3 {font-size: 1.6em;}
		
	.interview div h4 {font-size: 1.6em;}
	
	.flexBox.circle img {width: 100px; height:100px;}
	.flexBox.circle div {width:calc(100% - 120px); box-sizing:border-box;}
	
	/*
	section.date {font-size: 2.6em;  margin-bottom:70px;}
	section.date::before { top: -27px;}
	
	
	.titleBox h2 {padding:0.25em 0 0 0;}
	
	*/
	
}