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

layout2021

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

.indexBox {margin-bottom: 3em; padding: 40px; color: #fff; background:linear-gradient(#01a6d5, #0bbfc2);}
section.indexBox h2 {color: #fff; text-align: left; background: none; font-size: 3.2em !important; margin-bottom: 0; padding:0;}
section h2 { font-size: 3.6em !important; line-height: 1.25 !important; color: #02a1cf; background: none;}
.centerWrap {margin-bottom: 3em; text-align:center;}
.indexBox h2 span {background: none; font-size: 0.5em !important; font-weight: normal; background: none;display: block; margin-bottom: 0.5em;}

.indexBox p { font-size: 1.6em !important; line-height:2; color: #fff; margin-bottom: 2em;}
.indexBox h3 {font-size: 2.25em; font-weight:normal; border: none; border-left: 3px solid #01abbc; color: #fff; padding: 0; padding-left: 15px; margin-bottom:1em;}
.indexBox h4 {font-size: 1.6em; border: none; border-bottom: 3px solid #fff; padding-bottom: 0.2em; margin-bottom: 0.5em; font-weight: normal; color: #fff;}
.indexBox article {margin-bottom: 3em;}
.indexBox article.translucent {border-radius: 10px; background: rgba(256, 256, 256, 0.8); margin-bottom: 2em; padding: 2em;}
.indexBox article.translucent h4 {color: #0a82a4; border-color:#0a82a4;}
.indexBox article.translucent ul {display: flex; flex-wrap: wrap; color: #0a82a4;}
.indexBox article.translucent ul li {font-size: 0.85em; width: 46%; display: inline-block; border-bottom: none; margin-bottom: 0.25em; }

section.date {text-align: center; font-size: 2.5em; color: #000;}
section.date span {font-size: 80%; display: block;}
section.date { padding: 50px; position: relative;}
section.date::before, section.date::after { display: block; font: normal normal 6rem 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; position: absolute; line-height: 0;}

section.date::before {content: '('; top: 50%; left: 20%;}
section.date::after {content: ')'; top: 50%; right: 20%;}

section.sectiontWrap p {font-size: 1.4em; color: #000; margin-bottom: 2em; line-height:2;}
ul.date {font-size: 1.4em; }
ul.date li {padding-bottom: 0.5em; margin-bottom: 0.5em; border-bottom: 1px solid #a1d9df;text-indent: -1em; padding-left: 1em;}
.schedule ul.date li {text-indent: -8.5em; padding-left: 8em;}
ul.date.list li {list-style-type: disc; list-style-position: inside;}
ul.date + p.tblNote {font-size: 1.2em !important; line-height:1.2;}
ul.normalList {font-size: 1.4em;}
ul.normalList li {padding-bottom: 0.5em;}

.titleBox {
  position: relative;
  width: 100%;
  padding: 40px 20px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: linear-gradient(0deg, transparent 14px, #c9e2e9 15px), linear-gradient(90deg,  transparent 14px, #c9e2e9 15px);
  background-size: 15px 15px;
  margin-bottom: 4em;
  text-align:center;
}

.titleBox::before,
.titleBox::after {
  position: absolute;
  top: 0;
  content: '';
  width: 10%;
  height: 100%;
  border-top: 3px solid #02a1cf;
  border-bottom: 3px solid #02a1cf;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.titleBox::before {
  left: 0;
  border-left: 3px solid #02a1cf;
}
.titleBox::after {
  right: 0;
  border-right: 3px solid #02a1cf;
}

.balloon {
     position: relative;
     display: inline-block;
     width: 20%; 
     text-align: center;
     color:#fff;
     padding: 0.1em 0.3em 0;
     background-color: #02a1cf;
     border-radius: 5px;
	 font-size: 2.6em;
	 margin-bottom:0.3em;
}
.balloon:before {
     content: '';
     position: absolute;
     display: block;
     z-index: 1;
     border-style: solid;
     border-color: #02a1cf transparent;
     border-width: 10px 10px 0 10px;
     bottom: -10px;
     left: 50%;
     margin-left: -10px;
}

.flexBox {display: flex; }
.flexBox.sb {justify-content: space-between;}

figure {padding: 18px; text-align:center; margin-bottom: 4em;}
figure img {box-shadow: 0 0 0 9px #fff, 0 0 0 18px #03c3fa; box-sizing:border-box; margin-bottom:2.5em;}
figcaption {/*padding: 1em 2.5em;*/ color: #02a1cf; font-size: 1.6em; line-height:2; font-weight:bold; background: linear-gradient(transparent 90%, #02a1cf 0%); display: inline;}

.sectiontWrap .note {
  background: linear-gradient(#9fc6ff 1px, transparent 1px) ;
  background-size: auto 3em;
  line-height: 3em;
  border-bottom: 1px solid #9fc6ff;
  overflow: hidden;
  margin-bottom: 3em;}
  
.sectiontWrap .note p {color: #000; font-size: 1.4em; line-height:inherit !important;}

.sectiontWrap article.group {padding: 3em; margin-bottom: 3em;}
.sectiontWrap article.group h3 {border: none; padding: 0; margin-bottom: 0.5em; font-size: 1.8em; color: #000; background: none;  display: flex; align-items: center; justify-content: center; text-align:center;}
.sectiontWrap article.group h3:before, .sectiontWrap article.group h3:after {border-top: 1px solid;content: "";width: 2em;}
.sectiontWrap article.group h3:before { margin-right: 0.5em;}
.sectiontWrap article.group h3:after {margin-left: 0.5em; }
.sectiontWrap article.group figure {padding: 7px; margin-bottom: 0;}
.sectiontWrap article.group figure img {box-shadow:0 0 0 6px #fff, 0 0 0 7px #ddd; margin-bottom: 1em; }
.sectiontWrap article.group figure figcaption {color: #000; font-size: 1.2em; background: none;}

.sectiontWrap article#group01 {background:#fbe0e0;}
.sectiontWrap article#group02 {background:#f8f0e0;}
.sectiontWrap article#group03 {background:#e3eee2;}
.sectiontWrap article#group04 {background:#e1e1e5;}
.sectiontWrap article#group05 {background:#dcf1f6;}
.sectiontWrap article#group06 {background:#fef3df;}

.comment {background: linear-gradient(0deg, transparent 29px, #c9e2e9 30px), linear-gradient(90deg,  transparent 29px, #c9e2e9 30px); padding: 3em; background-size: 30px 30px; margin-bottom: 4em; border: 1px solid #c9e2e9;}
.comment h3 {border: none; background: none; text-align: center; font-size: 2.4em; padding: 0; margin-bottom: 1em;}
.tips {background: #fefddf; padding: 2em; border-radius: 1em; text-align:left; width: 100%; font-size: 1.2em; margin-bottom: 2em; color:#000; box-sizing:border-box; border: 5px dotted #deda6d;}
.tips .flexBox {align-items: center;justify-content: center;}
.tips figure, .tips .name {width: 50%;padding: 0; margin-bottom:0;}
.tips .name {font-size: 1.2em; text-align:center;}
.tips figure img {box-shadow: none; border-radius: 300px; margin-bottom:0; border: 3px solid #deda6d;}
.tips p {margin-bottom: 1em;}
/*
.tips {position: relative;
     display: inline-block;
     width: 100%; 
     text-align: left;
     padding: 2em;
     border-radius: 2em;
	 font-size: 1.2em;
	 margin-bottom:0.3em;
	 box-sizing:border-box;
	 margin-bottom: 3em;
	 background: #fefddf;
}
.tips:before {
     content: '';
     position: absolute;
     display: block;
     z-index: 1;
     border-style: solid;
     border-color: #fff transparent;
     border-width: 30px 15px 0 15px;
     bottom: -30px;
     left: 50%;
     margin-left: -10px;
}
.tips:nth-child(1) {background: #f7ede0;}
.tipss:nth-child(1):before{border-color: #f7ede0;}
*/
.tips h4 {border: none; color: #000; margin-bottom: 0.5em;}
.tips p {color: #000;}
@media screen and (max-width: 600px) {
	.sectiontWrap { font-size: 0.8em; margin-bottom: 2em;}
	section h2 { font-size: 2.5em !important; }
	section.indexBox h2 {font-size: 2em !important; }
	.indexBox h4 {font-size: 1.3em;}
	ul.date {font-size: 1em;}
	.schedule ul.date li {text-indent: -8.5em; padding-left: 8em;}
	.indexBox article.translucent ul li {width: 100%;}
	
	section.date {font-size: 1.5em;}
	section.date::before, section.date::after {font-size: 3rem;}
	
	.titleBox {padding: 20px 10px 10px; background: none;}
	.titleBox h2 {padding:0.25em 0 0 0;}
	
	.balloon {height: 40px; line-height: 40px; font-size: 2em;}
	.balloon::after {left: 40px;}
	
	figure {padding: 8px;}
	figure img {box-shadow: 0 0 0 4px #fff, 0 0 0 8px #03c3fa;}
	figcaption {font-size: 1.4em;}
	
	.comment {padding: 1em;}
	.comment h3 {font-size: 1.8em;}
	.tips {padding: 1em; border-width: 2px;}
	
	.indexBox {border-width: 10px; padding: 20px;}
	.indexBox p {font-size: 1.2em !important;}
	.indexBox h3 {font-size: 1.3em;background: none;}
}