@charset "UTF-8";

.mainVisual {
    width: 100%;
    margin-bottom: 80px;
}
.mainVisual img {
    width: 100%;
    max-width: inherit;
}


.town_wrapp #point1, .town_wrapp #point2, .town_wrapp #point3 {
    
}


.town_wrapp .miryoku_title {
    width: 90%;
    max-width: 1040px;
    margin: 0 auto 20px;
}

.town_wrapp .point_title {
    width: 90%;
    max-width: 1040px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto 80px;
}
.town_wrapp .point_title li {
    width: 33.3%;
    max-width: 340px;
}
.town_wrapp .point_title li a {
    display: block;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
}

.town_wrapp .point_title li a:hover{
   opacity: 1;
     margin-left: 3%;
}

.town_wrapp .point_wrapp {
    margin-bottom:120px;
}

.town_wrapp .contents_no {
    width: auto;
    text-align: center;
    height: 98px;
    margin: 0 auto 50px;
}
.town_wrapp .contents_no img {
    width: auto;
    height: 100%;
}
.town_wrapp .flexbox {
    width: 92%;
    max-width: 1000px;
    margin: 0 auto 60px;
    display: flex;
    justify-content: space-between;
}
.town_wrapp .flexbox .image_box {
    width: calc(470 / 1000 *100%);
}
.town_wrapp .flexbox .image_box.w70 {
    width: calc(640 / 1000 *100%);
}
.town_wrapp .flexbox .image_box.makinodai {
   margin-top: -130px;
}

.town_wrapp .flexbox .text_box {
    width: calc(483 / 1000 *100%);
}
.town_wrapp .flexbox .text_box.w30 {
    width: calc(328 / 1000 *100%);
}
.town_wrapp .flexbox .text_box.w40 {
    width: calc(460 / 1000 *100%);
}
.town_wrapp .flexbox .text_box h3 {
   color: #7F998B;
    font-size: min(3vw, 36px);
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
}
.town_wrapp .flexbox .text_box h4 {
   color: #7F998B;
    font-size: min(2.5vw, 20px);
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
}

.town_text {
       font-size: min(1.8vw, 17px);
    line-height: 200%;
}
.town_text.mb25 {
    margin-bottom: 25px;
}

.town_text .kosodate {
    width: 40%;
    float:right;
    margin-right:10px;
    margin-bottom:10px
}


.line_bottom {
    border-bottom: 4px dotted #749986;
    padding-bottom: 60px;
}

.in_image {

}


/***インタビュー***/

.interview_section {
    width: 92%;
    max-width: 1000px;
    margin: 0 auto 60px;
    padding-top: 20px;
    background:#F5F1DF;
    padding-bottom: 30px;
}

.interview_section h3 {
    color: #7F998B;
    font-size: min(3vw, 36px);
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid #7F998B;
padding: 0 0px 20px;
margin: 0 30px;
}


.interview_wrapp {
    width: 92%;
    max-width: 1000px;
    margin: 0 auto 60px;
    display: flex;
    justify-content: space-between;
    background:#F5F1DF;
    padding: 10px 30px;
    align-items: center;
}

.interview_wrapp.row {
     flex-direction:row-reverse
}


.interview_section .interview_wrapp {
width: 100%;
    margin: 0 auto 30px;
    align-items: center;
    }

.interview_section .interview_wrapp.ac_in {
    width: 86%;
    margin: 0 auto 20px;
    background: rgb(255 255 255 / 60%);
    padding: 20px;
    }


.interview_section .interview_button {
width:60%;
    max-width: 300px;
    margin: 0 auto 0px;
    cursor: pointer;
    transition: all 1s ease-out;
}
.interview_section .interview_button:hover {
    opacity: 0.7;
}
.interview_section .interview_button.voice-open.active img {
    opacity: 0;
}
.interview_section .interview_button.voice-open.active {
    background-image: url(../image/havefun/close_bt.svg);
    background-repeat: no-repeat;
    background-size: contain;
}




.voice{ display: none; 
    padding-top: 40px;
}



.interview_wrapp.jitikai {
    background: #7F998B;
    display: block;
    padding: 30px 30px;
}

.interview_wrapp .text_box {
    width: calc(590 / 1000 *100%);
}

.interview_wrapp .image_box {
    width: calc(400 / 1000 *100%);
}
.interview_wrapp .text_box h4 {
    color: #7F998B;
    font-size: min(2.5vw, 23px);
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    margin-bottom: 15px;
}


.interview_section .interview_wrapp.ac_in .text_box h4 {
font-size: min(2.2vw, 18px);
    position: relative;
    padding-left: 2.5em;
        border-bottom: 1px dotted #c5b8b8;
    padding-bottom: 20px;
    margin-bottom: 20px;
    }
.interview_section .interview_wrapp.ac_in .text_box h4 span {
display: inline-block;
    background: #7F998B;
    color: #fff;
    margin-right: 10px;
     border-radius: 50%;
       padding: 8px 10px 8px;
    line-height: 90%;
    position: absolute;
    top: 0;
    left: 0;
}

.interview_section .interview_wrapp.ac_in .town_text {
    font-size: min(1.8vw, 14px);
    line-height: 200%;
    position: relative;
    padding-left: 3em;
}

.interview_section .interview_wrapp.ac_in .town_text span {
display: inline-block;
    background: #989969;
    color: #fff;
    margin-right: 10px;
    border-radius: 50%;
        padding: 8px 10px 8px;
    line-height: 90%;
    position: absolute;
    top: 0;
    left: 0;
}


 .voice .interview_section .interview_wrapp {
    margin: 0 auto 50px;
    }

 .voice .interview_wrapp .text_box {
    width: calc(650 / 1000 *100%);
}
 .voice .interview_wrapp .image_box {
    width: calc(300 / 1000 *100%);
}



.interview_wrapp.jitikai .text_box h4 {
    color: #fff;
}

.interview_wrapp.jitikai .text_box {
   color: #fff;
    width: 100%;
}

h3.event_title {
    color: #7F998B;
    font-size: min(3vw, 30px);
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center;
}

.event_wrapp {
    width: 92%;
    max-width: 1000px;
    margin: 0 auto 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.event_wrapp .event_block {
    width: 32%;
    display: block;
    margin-bottom: 15px;
}
.event_wrapp .event_block .ivent_image {
    width: 100%;
}
.event_wrapp .event_block .event_text {
    width: 100%;
    text-align: center;
}
.event_wrapp .event_block .event_text h4 {
        color: #7F998B;
    font-size: min(2.5vw, 20px);
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
}

.support_wrapp {
    width: 92%;
    max-width: 1000px;
    margin: 0 auto 60px;
}


@media screen and (max-width: 768px) {
    
.mainVisual {
    width: 100%;
    margin-bottom: 30px;
}
.town_wrapp .contents_no {
    height: 68px;
    margin: 0 auto 30px;
} 
   
.town_wrapp .point_wrapp {
    margin-bottom: 60px;
}
    
.town_wrapp .point_title {
    margin: 0 auto 50px;
}
.town_wrapp .point_title li {
    width:100%;
    max-width: inherit;
} 
    
    
.town_wrapp .flexbox {
    display: block;
    width: 88%;
    margin: 0 auto 40px;
}  
    
 .line_bottom {
  padding-bottom: 40px;
}   
    
.town_wrapp .flexbox .image_box {
    width: 100%;
    margin-bottom: 20px;
}   
.town_wrapp .flexbox .text_box {
   width: 100%;
    margin-bottom: 20px;
} 
    
.town_wrapp .flexbox .text_box h3 {
      font-size: min(5vw, 40px);
    text-align: center;
}
 .town_text {
    font-size: 16px;
     font-size: 14px;
    line-height: 200%;
}   
    
.town_wrapp .flexbox .text_box h4 {
    font-size: min(5vw, 40px);
    text-align: center;
}
 .town_wrapp .flexbox .text_box.w30 {
    width: 100%;
}  
.town_wrapp .flexbox .text_box.w40 {
   width: 100%;
    margin-bottom: 30px;
}  
    
.town_wrapp .flexbox .image_box.w70 {
   width: 100%;
}  
    
.interview_wrapp {
    margin: 0 auto 30px;
    display: block;
    padding: 20px 30px;
} 
   
.interview_section {
    width: 90%;
}
    
    
.interview_section h3 {
    font-size: min(5vw, 35px);
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
}
    
    
.interview_wrapp .text_box {
   width: 100%;
}
    
.voice .interview_wrapp .text_box {
  width: 100%;
} 
 .voice .interview_wrapp .image_box {
    width: 90%;
}   
    
.interview_wrapp .text_box h4 {
  font-size: min(4.5vw, 35px);
}  
    
.interview_section .interview_wrapp.ac_in .text_box h4 {
    font-size: min(2.9vw, 22px);
    text-align: left;
}
    
.interview_wrapp .town_text {
    font-size: 13px;
    line-height: 200%;
   margin-bottom: 20px;
}
    
.interview_section .interview_wrapp.ac_in .town_text {
        font-size: 13px;
} 
    
.interview_wrapp .image_box {
    width: 90%;
    margin: 0 auto;
}    
    
.interview_wrapp {
    margin: 0 auto 30px;
    display: block;
}
    
.interview_section .interview_button {
    width: 50%;
    max-width: inherit;
} 
    
    
h3.event_title {
font-size: min(5vw, 33px);
} 
    
.event_wrapp {
    width: 88%;
    margin: 0 auto 30px;
}
.event_wrapp .event_block {
    width:48%;
    margin-bottom: 15px;
}   
    
    
.town_wrapp .flexbox .image_box.makinodai {
    margin-top: 0px;
}
.event_wrapp .event_block .event_text h4 {
   font-size: 14px;
    margin-bottom: 0px;
} 
.interview_wrapp.jitikai {
 width: 88%;
 padding: 10px 20px 5px;
}  
    
}