@charset "UTF-8";

#intro-img{
width: 100%;
max-width: 100%;
}
#intro-img img{  
width:100%;
height:auto;
} 

@media all and (max-width : 820px ){
#intro-img {
margin-top: 80px;
}
}

@media all and (max-width : 767px ){
#intro-img {
margin-top: 50px;
}
}

/*-------------------------------------------------
概要
-------------------------------------------------*/

#wrapper{
position: relative;
}
#tree{
z-index: 1;
position: absolute;
top: -80px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.page_ono h1{
font-size: 40px;
font-weight: bold;
color:rgb(148,111,63);
opacity:0.6;
margin-top: 20px;
}
.page_miki h1{
font-size: 40px;
font-weight: bold;
color:rgb(235,109,160);
opacity:0.6;
margin-top: 20px;
}
.page_kato h1{
font-size: 40px;
font-weight: bold;
color:rgb(44,178,194);
opacity:0.6;
margin-top: 20px;
}
.page_kasai h1{
font-size: 40px;
font-weight: bold;
color:rgb(78,143,109);
opacity:0.6;
margin-top: 20px;
}
.page_nishi h1{
font-size: 40px;
font-weight: bold;
color:rgb(233,108,44);
opacity:0.6;
margin-top: 20px;
}
.page_taka h1{
font-size: 40px;
font-weight: bold;
color:rgb(186,117,169);
opacity:0.6;
margin-top: 20px;
}

@media all and (max-width : 767px ){
#tree{
max-width: 90px;
height: auto;
top: -50px;
}
.page_ono h1{
font-size: 20px;
margin-top: 10px;
}
.page_miki h1{
font-size: 20px;
margin-top: 10px;
}
.page_kato h1{
font-size: 20px;
margin-top: 10px;
}
.page_kasai h1{
font-size: 20px;
margin-top: 10px;
}
.page_nishi h1{
font-size: 20px;
margin-top: 10px;
}
.page_taka h1{
font-size: 20px;
margin-top: 10px;
}
}

.page_ono #charm-wrapper{
background-color: rgb(239,238,233);
width: 100%;
padding: 40px 30px 40px
}
.page_miki #charm-wrapper{
background-color: rgb(252,232,240);
width: 100%;
padding: 40px 30px 40px
}
.page_kato #charm-wrapper{
background-color: rgb(217,238,242);
width: 100%;
padding: 40px 30px 40px
}
.page_kasai #charm-wrapper{
background-color: rgb(244,247,218);
width: 100%;
padding: 40px 30px 40px
}
.page_nishi #charm-wrapper{
background-color: rgb(255,241,213);
width: 100%;
padding: 40px 30px 40px
}
.page_taka #charm-wrapper{
background-color: rgb(243,233,242);
width: 100%;
padding: 40px 30px 40px
}
#charm{
width: 100%;
text-align: justify;
}
.page_ono #charm h3{
color:rgb(148,111,63);
font-size: 20px;
font-weight: bold;
padding-top: 20px;
}
.page_miki #charm h3{
color:rgb(235,109,160);
font-size: 20px;
font-weight: bold;
padding-top: 20px;
}
.page_kato #charm h3{
color:rgb(44,178,194);
font-size: 20px;
font-weight: bold;
padding-top: 20px;
}
.page_kasai #charm h3{
color:rgb(78,143,109);
font-size: 20px;
font-weight: bold;
padding-top: 20px;
}
.page_nishi #charm h3{
color:rgb(233,108,44);
font-size: 20px;
font-weight: bold;
padding-top: 20px;
}
.page_taka #charm h3{
color:rgb(186,117,169);
font-size: 20px;
font-weight: bold;
padding-top: 20px;
}
#charm p{
line-height: 32px;
padding-top: 5px;
}

@media all and (max-width : 767px ){
.page_ono #charm h3,
.page_miki #charm h3,
.page_kato #charm h3,
.page_kasai #charm h3,
.page_nishi #charm h3,
.page_taka #charm h3{
font-size: 16px;
letter-spacing: 0.2em;
}
#charm p{
line-height: 26px;
}
}

#city-topics{
width: 100%;
padding-top: 80px;
}
#city-topics ul{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
#city-topics ul #topic {
width: calc(33.333333% - 60px / 3);
margin-right: 30px;
}
#city-topics ul #topic:nth-child(3) {
margin-right: 0px;
}
#city-topics ul #topic li {
width: 100%;
}
#topic img{
width: 100%;
border-radius: 35px;
}
#topic p{
text-align: justify;
margin: 0 auto;
padding-top: 10px;
line-height: 28px;
}

@media all and (max-width : 767px ){
#city-topics{
padding-top: 30px;
}
#city-topics ul{
display: flex;
flex-direction: column;
}
#city-topics ul #topic {
width: 100%;
margin-right: 0px;
}
#city-topics ul #topic li {
margin-bottom: 20px;
}
}



/*-------------------------------------------------
データ
-------------------------------------------------*/

#city-data{
background: url("../img/common/cm-citydata-bac.jpg") repeat 0 0; 
width: 100%;
padding: 30px;
margin-top: 70px;
}
#data{
display: flex;
align-items: center;
margin-bottom: 20px;
}
#data p{
padding-left: 30px;
}
#data02{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 30px;
}
.date02 {
width: calc(33.3333333% - 40px / 3);
margin-right: 20px;
}
.date02:nth-child(3) {
margin-right: 0px;
}
table{
width: 100%;
}
table tbody {
border-color:#5F3940
}
.page_ono table th{
text-align: center;
color:#fff;
background-color:rgb(148,111,63); 
padding: 10px 0;
}
.page_miki table th{
text-align: center;
color:#fff;
background-color:rgb(235,109,160); 
padding: 10px 0;
}
.page_kato table th{
text-align: center;
color:#fff;
background-color:rgb(44,178,194); 
padding: 10px 0;
}
.page_kasai table th{
text-align: center;
color:#fff;
background-color:rgb(78,143,109); 
padding: 10px 0;
}
.page_nishi table th{
text-align: center;
color:#fff;
background-color:rgb(233,108,44);  
padding: 10px 0;
}
.page_taka table th{
text-align: center;
color:#fff;
background-color:rgb(186,117,169);  
padding: 10px 0;
}

table td {
padding: 10px 10px;
}
.date-number{
text-align: right;
}

#data03{
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#access,
#time {
width: 48%;
}
.page_ono h5{
color:#fff;
background-color:rgb(148,111,63); 
padding: 10px;
text-align: center;
font-weight: bold;
}
.page_miki h5{
color:#fff;
background-color:rgb(235,109,160); 
padding: 10px;
text-align: center;
font-weight: bold;
}
.page_kato h5{
color:#fff;
background-color:rgb(44,178,194); 
padding: 10px;
text-align: center;
font-weight: bold;
}
.page_kasai h5{
color:#fff;
background-color:rgb(78,143,109); 
padding: 10px;
text-align: center;
font-weight: bold;
}
.page_nishi h5{
color:#fff;
background-color:rgb(233,108,44);  
padding: 10px;
text-align: center;
font-weight: bold;
}
.page_taka h5{
color:#fff;
background-color:rgb(186,117,169); 
padding: 10px;
text-align: center;
font-weight: bold;
}
#access p{
padding-left: 10px;
line-height: 25px;
padding-top: 8px;
}
#time p{
padding-left: 10px;
line-height: 25px;
padding-top: 8px;
}

@media all and (max-width : 767px ){
#city-data{
padding: 20px;
margin-top: 10px;
}
#data{
display: flex;
align-items: flex-start;
flex-direction:column; 
margin-bottom: 20px;
}
#data-logo {
max-width: 120px;
margin: 0 auto;
margin-bottom: 15px;
}
#data p{
padding-left: 0px;
margin-bottom: 5px;
}
#data02{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction:column; 
margin-bottom: 0px;
}
.date02 {
width: 100%;
margin-right: 0px;
margin-bottom: 20px;
}
#access,
#time {
width: 100%;
margin-bottom: 20px;
}
}

/*-------------------------------------------------
暮らす
-------------------------------------------------*/

hr{
border: none;
}
#kurasu-line{
width: 100%;
border-top: 4px solid rgb(186,117,169);
margin-top: 70px;
}
#kurasu{
width: 100%;
margin: 0 auto;
}
#kurasu-logo{
text-align: center;
margin-top: 70px;
}
#kurasu-main-ono{
padding-top: 50px;
line-height: 25px;
font-weight: bold;
}
#kurasu h2{
color:#fff;
background-color:#b275a2;; 
border-radius: 23px;
width: 100%;
padding: 15px;
text-align: center;
font-weight: bold;
margin-top: 50px;
font-size: 18px;
}
#kurasu-tokutyou-ono span{
color:#b275a2;
}
#kurasu-tokutyou-ono{
width: 100%;
line-height: 25px;
padding-top: 50px;
}
#kosodate-tokutyou-ono div.txt_box_100 {
width: 100% !important;
}
#kurasu-tokutyou-kasai {
display: flex;
justify-content: space-between;
margin-top: 50px;
}
#kurasu-tokutyou-kasai .txt_box,
#kurasu-tokutyou-kasai .img_box {
width: 47%;
}
#kurasu-tokutyou-kasai .txt_box span {
color: #b275a2;
}
#kurasu-tokutyou-kasai .img_box img {
width: 100%;
border-radius: 35px;
}
#kurasu-sien-ono h4{
color:#b275a2;
font-size: 18px;
font-weight: bold;
}
#kurasu-main{
display: flex;
justify-content: space-between;
margin-top: 70px;
}
#kurasu-main .txt_box{
width: 58%;
line-height: 25px;
text-align: justify;
font-weight: bold;
}
#kurasu-main .kurasu_img{
width: 36%;
}
#kurasu-main .kurasu_img img {
width: 100%;
border-radius: 35px;
}
#kurasu-tokutyou{
display: flex;
justify-content: space-between;
margin-top: 50px;
}
#kurasu-tokutyou p{
width: 32%;
line-height: 25px;
text-align: justify;
}
#kurasu-tokutyou span{
color: #b275a2;
}
#kurasu-tokutyou img{
margin-left: 30px;
border-radius: 35px;
width: 32%;
height: auto;
}
#kurasu-sien-ono{
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 50px;
}
#kurasu-sien-ono div {
width: 47%;
}
#kurasu-sien-ono p{
line-height: 25px;
padding-top: 8px;
padding-bottom: 25px;
}
#kurasu-sien-ono {
width: 100%;
}
#kurasu-column-ono {
width: 50%
}
#kurasu-column-ono img{
width: 100%;
}
#kurasu-column-ono p a {
text-decoration: underline;
}
#kurasu-column-ono p a:hover {
text-decoration: none;
}
#kurasu-sien{
display: flex;
justify-content: space-between;
margin-top: 50px;
}
#kurasu-sien .txt_box{
width: 45%;
line-height: 25px;
padding-top: 8px;
display: flex;
flex-direction: column;
align-items: center;
}
#kurasu-sien h4{
color:#b275a2;
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
#kurasu-column{
width: 52.14%;
}
#kurasu-column img {
width: 100%;
}
#kurasu-column-ono .kadomaru img {
border-radius: 37px;
}

@media all and (max-width : 767px ){
#kurasu-line{
margin-top: 40px;
}
#kurasu-logo{
margin-top: 40px;
}
#kurasu h2{
padding: 10px;
font-size: 16px;
margin-top: 25px;
}
#kurasu-tokutyou-ono{
padding-top: 25px;
}
#kurasu-sien-ono h4{
font-size: 16px;
}
#kurasu-sien-ono{
width: 100%;
display: flex;
justify-content: space-between;
flex-direction: column;
margin-top: 25px;
}
#kurasu-sien-ono div {
width: 100%;
}

/*三木*/
#kurasu-main{
display: flex;
flex-direction: column;
margin-top: 30px;
}
#kurasu-main .txt_box{
width: 100%;
margin-bottom: 20px;
}
#kurasu-main .kurasu_img{
width: 100%;
}
#kurasu-tokutyou{
display: flex;
flex-direction: column;
margin-top: 30px;
}
#kurasu-tokutyou p{
width: 100%;
line-height: 25px;
margin-bottom: 15px;
}
#kurasu-tokutyou img{
margin-left: 0px;
width: 100%;
margin-bottom: 15px;
}

#kurasu-sien{
display: flex;
flex-direction: column;
margin-top: 30px;
}
#kurasu-sien .txt_box{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
#kurasu-sien h4{
font-size: 16px;
margin-bottom: 10px;
}
#kurasu-column{
width: 100%;
}
#kurasu-tokutyou-kasai {
display: flex;
flex-direction: column;
margin-top: 30px;
}
#kurasu-tokutyou-kasai .txt_box,
#kurasu-tokutyou-kasai .img_box {
width: 100%;
}
#kurasu-tokutyou-kasai .txt_box {
margin-bottom: 20px;
}
}



/*-------------------------------------------------
子育て
-------------------------------------------------*/

#kosodate-line{
width: 100%;
border-top: 4px solid rgb(132,182,68);
margin-top: 70px;
}
#kosodate{
width: 100%;
}
#kosodate-logo{
text-align: center;
margin-top: 70px;
}
#kosodate-main-ono{
padding-top: 70px;
width: 100%;
line-height: 25px;
font-weight: bold;
margin-bottom: 30px;
}
#kosodate h2{
color:#fff;
background-color:rgb(132,182,68); 
border-radius: 23px;
padding: 10px;
margin-bottom: 30px;
text-align: center;
font-weight: bold;
font-size: 18px;
}
#kosodate-tokutyou-ono{
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
line-height: 25px;
margin-bottom: 20px;
}
#kosodate-tokutyou-ono div {
width: 47%;
}
.page_kato #kosodate-tokutyou-ono div {
width: 100%;
}
#kosodate-tokutyou-ono div.txt_box {
width: 100% !important;
}
#kosodate-tokutyou-ono p{
line-height: 25px;
}
#kosodate-tokutyou-ono img{
width: 100%;
}
#kosodate-tokutyou-ono span{
color:rgb(132,182,68);
}
#kosodate-sien-ono h4{
color:rgb(132,182,68);
font-size: 18px;
font-weight: bold;
}
#kosodate-sien-ono{
display: flex;
justify-content: space-between;
}
#kosodate-sien-ono{
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#kosodate-sien-ono div {
width: 47%;
}
#kosodate-sien-ono p{
line-height: 25px;
padding-top: 8px;
padding-bottom: 25px;
}
#kosodate-sien-ono p a {
text-decoration: underline;
}
#kosodate-sien-ono p a:hover {
text-decoration: none;
}
#kosodate-sien-ono p:last-child {
padding-bottom: 0px;
}
#kosodate-sien-ono-ph01{
width: 100% !important;
}
#kosodate-sien-ono-ph01 img{
border-radius: 35px;
width: 100%;
}
#kosodate-sien-ono-ph02{
width: 100% !important;
}
#kosodate-sien-ono-ph02 img{
width: 100%;
border-radius: 35px; 
}

@media all and (max-width : 767px ){
#kosodate-line{
margin-top: 30px;
}
#kosodate-logo{
margin-top: 30px;
}
#kosodate-main-ono{
padding-top: 30px;
}
#kosodate h2{
margin-bottom: 20px;
font-size: 16px;
}
#kosodate-tokutyou-ono{
display: flex;
flex-direction: column;
}
#kosodate-tokutyou-ono div {
width: 100%;
margin-bottom: 20px;
}
#kosodate-sien-ono{
display: flex;
flex-direction: column;
}
#kosodate-sien-ono div {
width: 100%;
margin-bottom: 20px;
}
#kosodate-sien-ono h4{
font-size: 16px;
}
}



/*-------------------------------------------------
働く
-------------------------------------------------*/

#hataraku-line{
width: 100%;
border-top: 4px solid rgb(174,157,111);
margin-top: 70px;
}
#hataraku-ono{
width: 100%;
padding-bottom: 50px;
}
#hataraku-logo{
text-align: center;
margin-top: 70px;
}
#hataraku-main-ono{
padding-top: 50px;
width: 100%;
line-height: 25px;
font-weight: bold;
margin-bottom: 30px;
}
#hataraku-ono h2{
color:#fff;
background-color:rgb(174,157,111); 
border-radius: 23px;
padding: 10px;
text-align: center;
font-weight: bold;
font-size: 18px;
margin-bottom: 30px;
}
#hataraku-tokutyou-ono{
display: flex;
justify-content: space-between;
flex-wrap:wrap; 
margin-bottom: 30px;
}
#hataraku-tokutyou-ono div {
width: 47%;
}
#hataraku-tokutyou-ono div.txt_box {
width: 100%;
}
#hataraku-tokutyou-ono p{
line-height: 25px;
}
#hataraku-tokutyou-ono img{
border-radius: 35px; 
width: 100% !important;
}
#hataraku-tokutyou-ono span{
color:rgb(174,157,111);
}
#hataraku-sien-ono{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#hataraku-sien-ono div {
width: 47%;
}
#hataraku-sien-ono h4{
color:rgb(174,157,111);
font-size: 18px;
font-weight: bold;
}
#hataraku-sien-ono p{
line-height: 25px;
padding-top: 8px;
padding-bottom: 18px;
}
#hataraku-sien-ono div.imgbox {
width: 47% !important;
}
#hataraku-sien-ono div.imgbox img {
width: 100% !important;
border-radius: 35px; 
}
#onowork-navi{
margin-bottom: 41px;
}
#hataraku-sien-ono a{
background-color: rgb(254,252,222);
border-radius: 18px;
padding: 5px 20px;
border: 1px rgb(95,57,64) solid;
}
.page_taka #hataraku-sien-ono a{
background-color: transparent;
border-radius: none;
padding: 0;
border: none;
text-decoration: underline;
}
.page_taka #hataraku-sien-ono a:hover {
text-decoration: none;
}

@media all and (max-width : 767px ){
#hataraku-line{
margin-top: 0px;
}
#hataraku-ono{
padding-bottom: 10px;
}
#hataraku-logo{
margin-top: 30px;
}
#hataraku-ono h2{
font-size: 16px;
margin-bottom: 20px;
}
#hataraku-tokutyou-ono{
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
#hataraku-tokutyou-ono div {
width: 100%;
margin: 15px 0 10px;
}
#hataraku-sien-ono{
display: flex;
flex-direction: column;
}
#hataraku-sien-ono div {
width: 100%;
}
#hataraku-sien-ono h4{
font-size: 16px;
}
#hataraku-sien-ono div.imgbox {
width: 100% !important;
margin-bottom: 20px;
}
}

/*-------------------------------------------------
問い合わせ
-------------------------------------------------*/

.page_ono #information{
width: 100%;
border-radius: 75px;
border: solid 4px rgb(148,111,63);
padding: 20px;
margin-bottom: 50px;
}
.page_miki #information{
width: 100%;
border-radius: 75px;
border: solid 4px rgb(235,109,160);
padding: 20px;
margin-bottom: 50px;
}
.page_kato #information{
width: 100%;
border-radius: 75px;
border: solid 4px rgb(44,178,194);
padding: 20px;
margin-bottom: 50px;
}
.page_kasai #information{
width: 100%;
border-radius: 75px;
border: solid 4px rgb(78,143,109);
padding: 20px;
margin-bottom: 50px;
}
.page_nishi #information{
width: 100%;
border-radius: 75px;
border: solid 4px rgb(233,108,44);
padding: 20px;
margin-bottom: 50px;
}
.page_taka #information{
width: 100%;
border-radius: 75px;
border: solid 4px rgb(186,117,169);
padding: 20px;
margin-bottom: 50px;
}
#information-wrapper{
display: flex;
align-items: center;
}
#contact-information h2{
font-size: 23px;
font-weight: bold;
}
#contact-information p{
font-size: 18px;
}
#ono-web h3{
font-size: 22px;
font-weight: bold;
color: rgb(148,111,63);
}
#information-img{
width: 109px;
height: auto;
}
#information-img img {
width: 100%;
}
#contact-information{
padding-left: 36px;
line-height: 35px;
}
#ono-web{
padding-left: 70px;
line-height: 33px;
}
#ono-web a:hover {
text-decoration: underline;
}
#miki-web{
padding-left: 70px;
line-height: 33px;
}
#miki-web a:hover {
text-decoration: underline;
}
#kato-web{
padding-left: 70px;
line-height: 33px;
}
#kato-web a:hover {
text-decoration: underline;
}
#kasai-web{
padding-left: 50px;
line-height: 33px;
}
#taka-web{
padding-left: 50px;
line-height: 33px;
}
#kasai-web a:hover {
text-decoration: underline;
}
#nishi-web{
padding-left: 70px;
line-height: 33px;
}
#nishi-web a:hover {
text-decoration: underline;
}
#taka-web a:hover {
text-decoration: underline;
}
#miki-web h3{
font-size: 22px;
font-weight: bold;
color: rgb(235,109,160);
}
#kato-web h3{
font-size: 20px;
font-weight: bold;
color: rgb(44,178,194);
}
#kasai-web h3{
font-size: 20px;
font-weight: bold;
color: rgb(78,143,109);
}
#nishi-web h3{
font-size: 20px;
font-weight: bold;
color: rgb(233,108,44);
}
#taka-web h3{
font-size: 20px;
font-weight: bold;
color: rgb(186,117,169);
}


@media all and (max-width : 820px ){
#contact-information h2{
font-size: 18px;
}
#contact-information p{
font-size: 14px;
}
#contact-information{
padding-left: 20px;
line-height: 30px;
}
#ono-web h3{
font-size: 18px;
}
#miki-web h3{
font-size: 18px;
}
#kato-web h3{
font-size: 18px;
}
#taka-web h3{
font-size: 14px;
}
#ono-web{
padding-left: 40px;
line-height: 30px;
}
#miki-web{
padding-left: 40px;
line-height: 30px;
}
#kato-web{
padding-left: 40px;
line-height: 30px;
}
#kasai-web{
padding-left: 0px;
line-height: 30px;
}
#nishi-web{
padding-left: 15px;
line-height: 30px;
}
#taka-web{
padding-left: 15px;
line-height: 30px;
}
}

@media all and (max-width : 767px ){
#information-wrapper{
display: flex;
align-items: center;
flex-direction: column;
}
#information-img{
width: 80px;
height: auto;
margin: 0 auto 20px;
}
#contact-information{
padding-left: 0px;
line-height: 26px;
}
#ono-web{
padding-left: 0px;
line-height: 26px;
text-align: center;
}
#miki-web{
padding-left: 0px;
line-height: 26px;
text-align: center;
}
#kato-web{
padding-left: 0px;
line-height: 26px;
text-align: center;
}
#kasai-web{
padding-left: 0px;
line-height: 20px;
text-align: center;
}
#nishi-web{
padding-left: 0px;
line-height: 26px;
text-align: center;
}
#taka-web{
padding-left: 0px;
line-height: 26px;
text-align: center;
}
#contact-information h2{
font-size: 16px;
text-align: center;
margin-bottom: 10px;
}
#contact-information p{
font-size: 13px;
margin-bottom: 5px;
}
#ono-web h3{
font-size: 16px;
}
#ono-web p {
font-size: 1.0rem;
text-align: center;
}
#nishi-web h3{
font-size: 16px;
}
#nishi-web p {
font-size: 1.0rem;
text-align: center;
}
#taka-web h3{
font-size: 16px;
}
#taka-web p {
font-size: 1.0rem;
text-align: center;
}
.page_kasai #information{
padding: 10px;
border-radius: 50px;
}
}