@charset "utf-8";
/* CSS Document */

@media screen and ( max-width:1279px ) {
    
}
@media screen and ( max-width:1080px ) {
    
    
}
@media screen and ( max-width:768px ) {
    .themebox section {
        width: 100%;
        margin-bottom: 60px;
    }
    .themebox .rc_slogan {
        width: 100%;
    }
    .rc_slogan img {
        width: 50%;
        margin: 0 auto;
    }
    .rc_slogan .leftpic {
        width: 100%;
    }
    .nosp {
        display: none!important;
    }
    .nopc {
        display: block;
    }
    .flexbox {
        display: block;
    }
    .nosp {
        display: none!important;
    }
    .nopc {
        display: block;
    }
    .indexhone {
        width: 100%;
        position: relative;
        bottom: 0;
    }
    .toph {
        padding-top: 100px;
        background-position: top;
        background-size: contain;
        height: 40vw;
    }
    .indexhone h1 {
        width: 60%;
    }
    header {
        height: auto;
        background-size: cover;
        background-position: center;
        position: relative;
    }
    header #head {
        padding-top: 0;
        padding-bottom: 0;
    }

    header h1 {
        width: 60%;
        margin: 0 10px;
    }
    .navbtn {
        font-size: 16px;
        color: #fff;
        background-color: #ffd100;
        z-index: 1010;
        padding: 5px 10px;
        border-radius: 5px;
        display: block;
        position: fixed;
        top: 15px;
        right: 5px;
        margin-top: 0;
        transition: 0.3s;
    }
    .navbtn.open {
        background-color: #17458f;
    }
    .navbtn.open::after {
        content: "を閉じる";
    }
    header nav {
        width: 50%;
        height: 100%;
        position: fixed;
        display: none;
        top: 0;
        right: 0;
    }
    header nav ul {
        height: 100%;
        display: block;
        background: rgba(255, 209, 80, 80%);
        padding: 70px 10px 20px;
    }
    header nav ul li {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }
    header nav ul li a {
        width: 100%;
        color: #333;
        border-bottom: 2px solid #999;
        text-align: right;
        display: block;
    }
    header nav ul li p {
        display: none;
    }
    .scrollindex {
        display: none;
    }
/* footer */
    .ft_address,
    footer .googlemap
    {
        width: 100%;
    }
    .ft_address img {
        width: 100%;
        max-height: none;
    }
    footer .menu_nav {
        display: none;
    }
    
    footer small {
        font-size: 12px;
    }
    .footerflex {
        display: block;
        height: auto;
    }
    .undernav {
        display: none;
    }
    .ft_address div {
        padding: 10px;
    }
/* topbtn */
    #page-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        font-size: 77%;
        z-index: 1;
    }
    #page-top a {
        background: #0061ab;
        text-decoration: none;
        color: #fff;
        width: 50px;
        padding: 15px 0;
        text-align: center;
        display: block;
        border-radius: 5px;
        transition: 0.3s;
        opacity: 0.8;
    }
    #page-top a:hover {
        text-decoration: none;
        opacity: 0.4;
    }

/* content */
    #wrap #content {
        padding-top: 0;
        margin-top: -80px;
    }
    main {
        padding-left: 10px;
        padding-right: 10px;
    }
    main#indexbox {
        margin-top: -30px;
        padding-top: 30px;
    }
    .flex2column {
        display: block;
    }
    .info {
        width: 100%;
        margin-top: 0;
        margin-bottom: 30px;
    }
    .columnhalf .fb {
        width: 100%;
    }
    h3 {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    h3 span {
        width: 100%;
        display: block;
        text-align: center;
    }
    h3 p {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 1em;
    }
    section {
        padding-left: 10px;
        padding-right: 10px;
        margin: 0 auto 30px;
    }
    #pankuzu p {
        margin: 20px 0;
    }
    #policy>div {
        width: 100%;
    }
    .flexcon {
        display: block;
    }
    .flexcon .leftbox {
        width: 100%;
    }
    #index {
        display: block;
    }
    #index section {
        padding-left: 10px;
        padding-right: 10px;
    }
    .columnhalf .rm_program {
        width: 100%;
    }
    .trademark {
        display: block;
    }
    .trademark div {
        width: 100%;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .rightbanner {
        width: 100%;
    }
    .rm_program {
        width: 100%;
        padding-right: 0;
    }
    .trademark div.leftpic {
        width: 100%;
    }
    .trademark div.leftpic>div:first-child {
        width: 80%;
        padding: 0;
        margin: 0 auto;
    }
    .trademark div.leftpic>div {
        display: flex;
    }
    .trademark div.leftpic>div:last-child {
        width: 100%;
        padding: 0 10px;
    }
    .trademark div.leftpic .rotarytheme {
        margin-bottom: 0;
    }
    .trademark div.rightpic {
        display: none;
    }
    .morebk a,
    .rm_program .shuhoulink {
        display: block;
        text-align: center;
    }
    .rc_slogan .rotarytheme {
        width: 100%;
    }
    .ritheme img{
        width: 50%;
        margin: 0 auto;
    }
    #index .leftbox {
        width: 100%;
    }
    .rm_program .calendar {
        width: 100%;
    }
    .rm_program .calendar p {
        display: block;
    }
    .rm_program .calendar p>span:first-child {
        width: 100%;
    }
    .morebk a,
    .rm_program .shuhoulink {
        width: 100%;
        margin-top: 20px;
    }
    #index .fb {
        width: 100%;
        float: none;
    }
    .ri_sns {
        width: 80%;
        margin: 30px auto;
        justify-content: space-between;
    }
    .fb {
        width: 100%;
    }
    .fb iframe {
        margin: 0 auto;
        display: block;
    }
    .banner {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap:5px;
    }
    .banner li {
        width: 48%;
    }
    .banner li:first-child {
        width: 100%;
    }
    .banner .ri_sns ul {
        flex-wrap: wrap;
    }
    .banner .ri_sns ul li {
        width: 33%;
    }
    .banner .ri_sns ul li a {
        width: 50%;
        margin: 0 auto;
        display: block;
    }
    .banner .ri_sns p {
        font-size: 18px;
    }
    
    .leftcolumn {
        width: 100%;
    }
/* index */
    #topslide {
        display: none;
    }
    .policyTop div {
        flex-direction: column;
    }
    .policyTop div img {
        display: none;
    }
    .policyTop ul {
        height: auto;
        position: static;
        margin-top: 20px;
        margin-left: 20px;
    }
    .policyTop ul li span {
        font-size: 28px;
        padding-right: 1em;
    }
    .policyTop ul li br {
        display: none;
    }
    .policyTop ul .clickbtn {
        position:static;
    }
    .policyTop .clickbtn a {
        margin-left: 0;
    }
    .index .leftbox {
        width: 100%;
        max-width: none;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap
    }
    .select_event {
        width: 90%;
        display: block;
    }
    .select_event a {
        width: 50%;
        display: block;
    }
    .columnhalf .rm_program .calendar div {
        display: block;
    }
/* policy */
    .policy {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
    .policy .pic {
        width: 100%;
        display: block;
        flex-wrap: nowrap;
        margin-bottom: 20px;
    }
    .policy .pic>div {
        width: 100%;
        display: block;
        margin-bottom: 10px;
    }
    .policy .pic>div div:first-child {
        width: 50%;
        height: auto;
        max-height: none;
        margin: 0 auto;
    }
    .policy .pic img {
        width: 100%;
        margin: 0 auto 10px;
    }
    .policy div {
        width: 100%;
    }
    .policy .slogan {
        width: 100%;
    }
    .rotary_policy .lefttext {
        width: 100%;
    }
    .rotary_policy .lefttext p {
        margin-bottom: 2rem;
    }
    .policy .flag {
        width: 100%;
    }
/* about */
    .overview ul li {
        display: block;
    }
    .overview ul li span {
        display: block;
    }
    .SistersClub li {
        display: block;
    }
    .SistersClub li span {
        display: block;
    }
    .sanyaku {
        width: 100%;
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;
    }
    .sanyaku br{
        display: none;
    }
    .sanyaku li {
        margin-bottom: 20px;
    }
    .sanyaku li img {
        width: 50%;
    }
    .commMember table {
        margin-left: 20px;
    }
    .commMember table tr {
        height: auto;
    }
    .commMember table tr td {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .post ul li {
        width: 100%;
        display: block;
    }
    .post ul li p:first-child {
        width: 100%;
    }
    .post ul li p {
        padding-left: 10px;
        padding-right: 10px;
    }
    .post .sanyaku {
        width: 100%;
        display: block;
    }
    .post .sanyaku li {
        width: 100%;
    }
    .leftbox ul li:nth-child(odd) {
        background-color: #fff;
    }
    .committee ul li p {
        background-color: #fff;
    }
    .committee ul li p {
        padding-top: 5px;
        padding-bottom: 0;
    }
    .commMember img {
        width: 100%;
    }
    #about .post .membersli li,
    #about .post .membersli li p {
        background-color: #fffae6;
    }
/* shuho */
    .shuho table {
        width: 97.5%;
        padding-right: 20px;
    }
    .shuho table .month,
    .shuho table .weekly th {
        padding-top:20px;
        padding-bottom: 20px;
    }
    .shuho table .month,
    .shuho table .weekly {
        height: auto;  
    }
    .shuho table td {
        height: auto;
        padding: 0;
    }
    .shuho table td a {
        height: auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .shuho table td a img {
        display: none;
    }
    .flexbox {
        display: block;
    }
    .link_list ul {
        width: 100%;
        display: block;
    }
    .link_list ul li {
        width: 80%;
        margin: 0 auto;
    }
    .link_list ul li img {
        width: 100%;
    }
/* back */
    .backnumber ul {
        width: 100%;
        display: block;
        padding-left: 10px;
        padding-right: 10px;
    }
    .backnumber ul li {
        width: 100%;
    }
}
    
}