@charset "utf-8";

/*---------------------------------------------------
	みんなおいでん！市民伝言板
---------------------------------------------------*/



/* +++++++++++++++++++++++++　基本設定 */

section {
    margin-bottom: 100px;
    margin-right: auto;
    margin-left: auto;
    font-size: 18px;
    line-height: 1.5;
}

img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.main-img {
    margin-bottom: 100px;
}

/* +++++++++++++++++++++++++　パーツ */
.hiddin-pc {display: none;}
.red { color: #ff0000;}
.boderBt {border-bottom: 1px solid;}
.ta-c { text-align: center;}
.small-txt { font-size: 1.3rem;}
.imgBoder {border: 1px #666 solid;}
hr {
    border: none;
    height: 1px;
    background: #666;
    width: 100%;
}
.flex {
    display: flex;
}
.flex-bt {
    display: flex;
    justify-content: space-between;
}
.flex-ce {
    display: flex;
    justify-content: center;
}
.flex-wr {
    display: flex;
    flex-wrap: wrap;
}
.flex-re {
    display: flex;
    flex-wrap: wrap-reverse;
}


/* +++++++++++++++++++++++++　空き設定(margin) */

.mt00{ margin-top:0px !important;}
.mt05{ margin-top:5px !important;}
.mt1{ margin-top:10px !important;}
.mt2{ margin-top:20px !important;}
.mt3{ margin-top:30px !important;}
.mt4{ margin-top:40px !important;}
.mt5{ margin-top:50px !important;}
.mt6{ margin-top:60px !important;}
.mt7{ margin-top:70px !important;}
.mt8{ margin-top:80px !important;}
.mt9{ margin-top:90px !important;}
.mt10{ margin-top:100px !important;}

.mb05{ margin-bottom:5px !important;}
.mb1{ margin-bottom:10px !important;}
.mb2{ margin-bottom:20px !important;}
.mb3{ margin-bottom:30px !important;}
.mb4{ margin-bottom:40px !important;}
.mb5{ margin-bottom:50px !important;}
.mb6{ margin-bottom:60px !important;}
.mb7{ margin-bottom:70px !important;}
.mb8{ margin-bottom:80px !important;}
.mb9{ margin-bottom:90px !important;}
.mb10{ margin-bottom:100px !important;}
.mb12{ margin-bottom:120px !important;}
.mb15{ margin-bottom:150px !important;}
.mb20{ margin-bottom:200px !important;}

.mr05{ margin-right:5px !important;}
.mr1{ margin-right:10px !important;}
.mr2{ margin-right:20px !important;}
.mr3{ margin-right:30px !important;}
.mr4{ margin-right:40px !important;}
.mr5{ margin-right:50px !important;}
.mr6{ margin-right:60px !important;}
.mr7{ margin-right:70px !important;}
.mr8{ margin-right:80px !important;}
.mr9{ margin-right:90px !important;}
.mr10{ margin-right:100px !important;}

/* +++++++++++++++++++++++++　空き設定(padding) */

.pt05{ padding-top:5px !important;}
.pt1{ padding-top:10px !important;}
.pt2{ padding-top:20px !important;}
.pt3{ padding-top:30px !important;}
.pt4{ padding-top:40px !important;}
.pt5{ padding-top:50px !important;}
.pt6{ padding-top:60px !important;}
.pt7{ padding-top:70px !important;}
.pt8{ padding-top:80px !important;}
.pt9{ padding-top:90px !important;}
.pt10{ padding-top:100px !important;}

.pb05{ padding-bottom:5px !important;}
.pb1{ padding-bottom:10px !important;}
.pb2{ padding-bottom:20px !important;}
.pb3{ padding-bottom:30px !important;}
.pb4{ padding-bottom:40px !important;}
.pb5{ padding-bottom:50px !important;}
.pb6{ padding-bottom:60px !important;}
.pb7{ padding-bottom:70px !important;}
.pb8{ padding-bottom:80px !important;}
.pb9{ padding-bottom:90px !important;}
.pb10{ padding-bottom:100px !important;}



/* +++++++++++++++++++++++++　ページレイアウトここから */

.blueBox {
    border: 2px solid #006cc0;
    padding: 50px 80px;
    background: linear-gradient( -45deg, #a5e0fe 25%, #b9e7fe 25%, #b9e7fe 50%, #a5e0fe 50%, #a5e0fe 75%, #b9e7fe 75%, #b9e7fe );
    background-size: 20px 20px;
}
.white-ttl {
    color: #006cc0;
    font-weight: bold;
    font-size: 2.5rem;
    background: #fff;
    text-align: center;
    padding: 5px 0;
    border: 2px solid #006cc0;
    border-radius: 25px;
    margin-bottom: 25px;
}
.blueBox li { 
	list-style: none;
	position: relative;
    margin-left: 2.6rem;
    font-size: 2.3rem;
    font-weight: bold;
    line-height: 2;
}

.blueBox li:before { 
	content: " ● ";
	position: absolute;
	font-size: 2.5rem;
	color: #006cc0;
    left: -25px;
    top: -3px;
 }


.blueBox ol{
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
  margin: 0;
}
.blueBox ol li {
  padding-left: 30px;
  position: relative;
}
.blueBox ol li:before {
    content: counter(my-counter);
    counter-increment: my-counter;
    background-color: #006cc0;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25px;
    width: 25px;
    color: #b9e7fe;
    font-size: 80%;
    line-height: 1;
    position: absolute;
    top: 10px;
    left: 0;
}



#sec01 .flex-bt div:nth-child(1) {
    width: 57%;
} 
#sec01 .flex-bt div:nth-child(2) {
    width: 41%;
} 
#sec01 li span {
    font-size: 1.8rem;
}

.sec-ttl {
    position: relative;
    font-size: 3rem;
    color: #006cc0;
    padding-bottom: 15px;
    font-weight: bold;
}
.sec-ttl:after {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    bottom: 0;
    width: 325px;
    margin: auto;
    border-bottom: 2px solid #006cc0;
}

#sec02 .step {
    padding-bottom: 50px;
    border-bottom: 1px solid #666;
    margin-top: 50px;
}
p.icon-step {
    background: url(https://ch-mics.jp/oubo/chmics/wp-content/themes/mics/img/stepicon.jpg) no-repeat;
    color: #fff;
    width: 155px;
    background-size: cover;
    text-align: center;
    padding: 3px 0;
    margin: 0;
    font-size: 20px;
    font-weight: bold;
}
p.step-ttl {
    padding: 5px 0;
    font-weight: bold;
    
}
#sec02 .oder div {
    width: 49%;
}
#sec02 .step ol{
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
  margin: 0;
}
#sec02 .step ol li {
  padding-left: 30px;
  position: relative;
    margin-bottom: 85px;
}
#sec02 .step ol li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #333;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  width: 25px;
  color: #ffffff;
  font-size: 85%;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 0;
}
#sec02 .flex-bt.step4 div:nth-child(1) {
    width: 57%;
} 
#sec02 .flex-bt.step4 div:nth-child(2) {
    width: 41%;
} 
#sec03 {
    border-bottom: 1px solid #666;
    padding-bottom: 50px;
    margin-bottom: 60px;
}
#sec03 .blueBox p {
    line-height: 3;
    font-weight: bold;
}
#sec03 .blueBox ol {
    margin: 20px 0;
}
p.orangeDisc {
    position: relative;
    margin-left: 20px;
    font-weight: bold;
}
p.orangeDisc:before {
    content: " ● ";
    position: absolute;
    font-size: 2.5rem;
    color: #f7931e;
    left: -25px;
    top: -6px;
    
}
ul.listDisc, .listDisc li {
    list-style: disc;
    margin-left: 20px;
}
 

@media screen and (max-width:1024px) {
    section {
        width: 95%;
    }
    

}
@media screen and (max-width: 767px) {
    
    
    
    /* +++++++++++++++++++++++++　空き設定(margin) */


.mt05{ margin-top:.5vw !important;}
.mt1{ margin-top:1vw !important;}
.mt2{ margin-top:2vw !important;}
.mt3{ margin-top:3vw !important;}
.mt4{ margin-top:4vw !important;}
.mt5{ margin-top:5vw !important;}
.mt6{ margin-top:6vw !important;}
.mt7{ margin-top:7vw !important;}
.mt8{ margin-top:8vw !important;}
.mt9{ margin-top:9vw !important;}
.mt10{ margin-top:10vw !important;}

.mb05{ margin-bottom:.5vw !important;}
.mb1{ margin-bottom:1vw !important;}
.mb2{ margin-bottom:2vw !important;}
.mb3{ margin-bottom:3vw !important;}
.mb4{ margin-bottom:4vw !important;}
.mb5{ margin-bottom:5vw !important;}
.mb6{ margin-bottom:6vw !important;}
.mb7{ margin-bottom:7vw !important;}
.mb8{ margin-bottom:8vw !important;}
.mb9{ margin-bottom:9vw !important;}
.mb10{ margin-bottom:10vw !important;}
.mb12{ margin-bottom:12vw !important;}
.mb15{ margin-bottom:15vw !important;}
.mb20{ margin-bottom:20vw !important;}

.mr05{ margin-right:.5vw !important;}
.mr1{ margin-right:1vw !important;}
.mr2{ margin-right:2vw !important;}
.mr3{ margin-right:3vw !important;}
.mr4{ margin-right:4vw !important;}
.mr5{ margin-right:5vw !important;}
.mr6{ margin-right:6vw !important;}
.mr7{ margin-right:7vw !important;}
.mr8{ margin-right:8vw !important;}
.mr9{ margin-right:9vw !important;}
.mr10{ margin-right:10vw !important;}
    
    
.hiddin-sp {display: none;}
.hiddin-pc {display: block;}
    
section {
    font-size: 1.6rem;
    margin-bottom: 60px;
}
    .flex-bt {
    display: block;
}
    .main-img {
    margin-bottom: 45px;
}
    
    .blueBox {
    padding: 35px 10px;
}
    #sec01 .flex-bt div:nth-child(1) {
    width: 100%;
}
    #sec01 .flex-bt div:nth-child(2) {
    width: 100%;
    margin-top: 10px;
}
    .white-ttl {
    font-size: 1.5rem;
}
    .blueBox li {
    font-size: 1.8rem;
}
    .sec-ttl {
    font-size: 2.3rem;
}
    #sec02 .oder div {
    width: 90%;
    margin: 0 auto 25px;
}
    #sec02 .flex-bt.step4 div:nth-child(1) {
    width: 100%;
}
    #sec02 .flex-bt.step4 div:nth-child(2) {
    width: 100%;
}
    #sec02 .step ol li {
    margin-bottom: 18px;
}
    #sec03 .blueBox p {
    line-height: 1;
    margin: 20px 0;
}
    
    
}