@charset "UTF-8";

/* スマホでは非表示 */
.sp_no{display: none;}

p{font-size: 0.9em;}

/* センター系 */
.img_c{
display: block;
margin: 10px auto;
}

.m_top_40{margin-top: 40px;}
.m_top_20{margin-top: 20px;}

.m_top_20_sp{margin-top: 20px;}







/*-----------------*/
/* ---- テーブル --- */
/*-----------------*/
.table_01 {
width: 100%;
font-size: 0.9em;
font-family:"Noto Sans JP","Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
border-collapse:collapse;
}
.table_01 th {
width: 100%;
display:block; 
padding:7px;
border: #fff solid 1px;
background: #EBE0BB;
font-weight:normal;
line-height: 120%;
text-align: center;
white-space: nowrap;
box-sizing: border-box;
}
.table_01 td {
width: 100%;
display:block;
padding: 7px;
border: 1px #CECECE solid;
vertical-align:top;/*文字の垂直そろえを上揃えに*/
box-sizing: border-box;
}
.table_01 .th_c{background: #A99860; color: #fff;}



/*------------------------*/
/* ---- YouTubeのボタン --- */
/*------------------------*/

.you_btn{
    width: 60%;
    margin: 0px auto 40px;
    padding: 20px;
    background-color: #002e7d;
    border-radius: 20px;
    border: 10px double #ffffff;
    box-shadow: 10px 10px 5px 0px #aaaaaa;
    }

.you_text{
    text-decoration: none;
    color: #fff;
    font-size: 1.25em;
    text-align: center;
    line-height: 1.5;
}

.you_btn:hover{
    width: 60%;
    margin: 0px auto 40px;
    padding: 20px;
    background-color: #FFFFFF;
    border-radius: 20px;
    border: 10px double #002e7d;
    box-shadow: 10px 10px 5px 0px #aaaaaa;
    }

.you_text:hover{
    text-decoration: none;
    color: #002e7d;
    font-size: 1.25em;
    text-align: center;
    line-height: 1.5;
}

/*-----------------*/
/* ---- footer --- */
/*-----------------*/
footer{}
footer .f_back{
  background-color: #002e7d;
background-position: center center;
background-size: cover;
}
footer .f_box{
font-size: 0.9em;
padding: 30px 0;
width: 90%;
margin: 0 auto;
color: #fff;
text-align: center;
box-sizing: border-box;
}


footer a{color: #fff;}

/* ページトップへ */
.p_t{margin: 0 auto; display: block; text-align: center;}


/* ロゴと会社 */
footer .f_box h2{
display: inline-block;
padding: 0 15px;
font-size: 0.7em;
text-align:center;
margin: 0px auto;
}
footer .f_box h2 span{display: block; margin-bottom: -3px;}
footer .f_box h2 span:nth-child(2){font-size: 1.7em;}
footer .f_box h2 img{width: 70%; margin: 0 0 10px 0;}

/* 住所 */
footer .f_box .address{
margin: 10px auto;
text-align: center;
}
footer .f_box .address .flex_bet{justify-content: center; flex-wrap: wrap;}
footer .f_box .address img{margin: 20px 0 20px 10px; display: block;}
footer .f_box .address ul{margin: 0;}
footer .f_box .address ul li{
width: 43%;
border: 1px solid #fff;
margin: 10px 5px;
padding: 10px 5px;
box-sizing: border-box;
}

/* 会場 */
footer .f_box .kaizyo{
letter-spacing: 1px;
margin: 0 0 10px 0;
}
footer .f_box .kaizyo span{
display: block;
background-color: #fff;
color: #A99860;
padding: 3px 5px;
margin: 20px 0 5px 0;
}

/* sns */
footer .f_box > ul{margin: 20px auto;}
footer .f_box > ul.flex_bet{justify-content: center; flex-wrap: wrap;}
footer .f_box > ul li{margin: 0 5px;}





/*-----------------*/
/* ----content--- */
/*-----------------*/
.content{
width: 90%;
margin:40px auto;
}







/*-----------------*/
/* ----top--- */
/*-----------------*/

/* メイン */
#main_box{position: relative;}
#main{height: 200px;}
#main_box #main img{
width: 70%;
display: block;
margin: 50px auto 0 auto;
}


/* テーマ */
.main_thema{
background-image: url("../img/top_copy_back.jpg");
background-size: cover;
background-position:center;
padding: 7% 5%;
box-sizing: border-box;
text-align: center;
}
.main_thema h3{
font-size: 0.8em;
color: #fff;
}
.main_thema h4{
font-size: 1.5em;
color: #A99860;
}
.main_thema a{
color: #fff;
margin: 20px 0 0 0;
display:block;
border: 1px solid #fff;
padding: 7px 10px;
background-image: url("../img/icon_yazi.png");
background-position: right 10px center;
}
.main_thema a:hover{
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
background-color: rgba( 255, 255, 255, 0.55 );
}


/* 歴史 */
.top_history{
background-image: url("../img/top_tokeidai_back_sp_001.jpg");
background-size: cover;
background-position:center;
padding: 5%;
box-sizing: border-box;
  border-bottom:2px solid #002e7d;
}
.top_history h3{
color: #A99860;
text-align: center;
font-size: 1.3em;
}
.top_history h3 span{
display: block;
font-size: 0.7em;
}
.top_history p{
width: 80%;
margin: 10px auto 0 auto;
font-size: 0.9em;
}

/* TOPのお知らせ */
#top_index .news ul{
margin: 0 0 0 0;
}


/* バナー */
aside ul {margin-top: 50px;}
aside ul li {
width: 100%;
margin-bottom: 10px;
text-align: center;
}
aside ul .font_rotary {
  margin: 0 auto;
  margin-bottom: 10px;
}

aside h3 {
  width: 100%;
  text-align: center;
}


/* topメニュー */
.top_menu ul{margin-top: 40px;}
.top_menu ul li{
background-position: center;
background-size: cover;
width: 49%;
box-sizing: border-box;
margin-bottom: 10px;
}
.top_menu ul li a{
display: block;
color: #fff;
padding: 20px 15px;
}
.top_menu ul li:nth-child(1){
  background-color: #002e7d;
}
.top_menu ul li:nth-child(2){
  background-color: #002e7d;
}
.top_menu ul li:nth-child(3){
  background-color: #002e7d;
}
.top_menu ul li:nth-child(4){
  background-color: #002e7d;
}

.message {
  text-align: center;
}
.sp_font{
  font-size: 1.5em;
}
.main_message {
  padding: 7% 5%;
  box-sizing: border-box;
}
.main_message .mess{
  font-size: 0.9em;
  color: #000;
}
.test {
  margin: 0 auto;
  width: 270px;
}
.test img {
  padding: 0px 30px 10px;
  width: 70%;
}
.main_mokuhyou {
  color: #002e7d;
  text-align: center;
}
.mokuhyou {
  margin: 0 auto;
  width: 100%;
}
.mokuhyou h5 {
  line-height: 20px;
}
.mokuhyou ol{
  font-size: 1.0em;
  line-height: 180%;
  margin: 10px 0 10px 20px;
  list-style: none;
  counter-reset: ol_li; /* ol_li カウンタをセットする(値もリセット) */
}
.mokuhyou ol li{margin-bottom: 10px;}
.mokuhyou ol li::before{
  margin-right: 10px;
  margin-left: -17px;
  counter-increment: ol_li; /* ol_li カウンタの値に1加える */
  content: counter(ol_li); /* before擬似要素のcontentで出力 */
}

.gabana_j {
  border-bottom:1px solid #fff;
}



.scroll {
  overflow:auto;
  height:400px;
  line-height:1.5;
  padding:10px 0;
  
}




.mov_message {
  width: 100%;
  font-size: 0.8em;
}

.mov_you {
  text-align: center;
}
.mov_you video{
  width: 100%;
}
.mov_you iframe{
  width: 100%;
}

.ri_mess {
  width: 100%;
  background-image: url("../img/main_ph002.jpg");
  background-size: cover;
  background-position:center;
  margin: 0 auto;
}
.ri_mess .scl{
  text-align: center;
}
.officer {
  width: 100%;
  background-image: url("../img/main_ph003.jpg");
  background-size: cover;
  background-position:center;
  margin: 0 auto;
}
.officer .scl{
  text-align: center;
}

.event {
  width: 100%;
  background-image: url("../img/main_ph004.jpg");
  background-size: cover;
  background-position:center;
  margin: 0 auto;
}
.event .scl{
  text-align: center;
}

.office {
  width: 100%;
  background-image: url("../img/main_ph001.jpg");
  background-size: cover;
  background-position:center;
  margin: 0 auto;
}
.office  .scl{
  text-align: center;
}

.convention {
  width: 100%;
  background-image: url("../img/main_ph005.jpg");
  background-size: cover;
  background-position:center;
  margin: 0 auto;
}
.convention .scl{
  text-align: center;
}

.dl {
  width: 100%;
  background-image: url("../img/main_ph001.jpg");
  background-size: cover;
  background-position:center;
  margin: 0 auto;
}
.dl .scl{
  text-align: center;
}

/*-----------------*/
/* ---- あいさつ --- */
/*-----------------*/
.aisatsu{margin: 50px 0 100px 0;}
.aisatsu div:first-child{width: 100%;}
.aisatsu div:last-child{width: 100%; text-align: center;}
.aisatsu img{margin: 10px 0 10px 0;}
.aisatsu span{font-size: 1.6em;font-weight: 600;}


/* 目標 */
.aims{
color: #fff;
background-size: cover;
background-position: center;
padding: 5px 20px 20px 20px;
box-sizing: border-box;
}
/* 日本版 */
.aims.sapporo_aims{background-image: url("../img/message_back.jpg");}



.aims h4 {
font-size: 1.0em;
position: relative;
height: 40px;
margin: 30px 0 -30px 0;
}
.aims h4::before {
position: absolute;
top: 50%;
right:0;
transform:translateY(-50%);
content: '';
width: 100%;
height:1px;
background-color: #fff;
}
.aims h4 span{
padding: 0 10px 0 0;
top: 50%;
transform:translateY(-50%);
position: absolute;
display: inline-block;
background-color: #3d7177;
}



.aims h5{
color: #EBE0BB;
font-size: 1.2em;
margin:30px 0 10px 0;
}



.aims dd{
text-align: center;
width: 100%;
padding: 10px 20px;
margin-top: 10px;
box-sizing: border-box;
background-color: rgba( 255, 255, 255, 0.2 );
}

.aims ol{margin-left: 20px;}
.aims ol li{list-style:decimal;}


.aims small{margin: -10px 0 10px 0; display: block;}



/* 国際版 */
.aims.world_aims h5{margin-top: 0px;}
.aims.world_aims{background-image: url("../img/message_back_02.jpg");}
.aims.world_aims h4 span{background-color: #292b2a;}
.aims.world_aims h4{margin-top: 0px;}
.aims.world_aims{margin-top: 30px;}





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

/* 概要 */
.gaiyou{margin-bottom: 100px;}
.gaiyou div:first-child{width: 100%;}
.gaiyou div:last-child{width: 100%;}
.gaiyou .title_01{margin-top: 40px;}
.gaiyou img{display: block; margin: 10px auto;}


/* 例会場 */
.reikaizyo{}
.reikaizyo > div{margin: 20px 0 0 0;}

.reikaizyo dl{margin-bottom: 20px;}
.reikaizyo dl dt{
background-color: #0F4662;
color: #fff;
width: 100%;
padding: 5px;
margin: 0 0 5px 0;
text-align: center;
box-sizing: border-box;
}
.reikaizyo dl dd{}
.reikaizyo dl span{font-size: 1.2em;}

.reikaizyo > div > div{
width: 100%;
border: 1px solid;
padding: 10px;
margin-top: 20px;
box-sizing: border-box;
}
.reikaizyo > div > div h4{
background-color: #EBEBEB;
text-align:center;
padding: 10px 20px;
margin-bottom: 10px;
box-sizing: border-box;
}
.reikaizyo > div > div ol{margin-left: 20px;}
.reikaizyo > div > div ol li{
list-style: decimal;
}

.reikaizyo iframe{
width: 100%;
height: 300px;
}




/* ---- 入会金・会費 --- */
.price{
background-color: #F7F7F7;
padding: 50px 0 50px 0;
}

.price > div{
width: 90%;
margin: 0 auto;
}
.price table{margin:0 0 20px 0;}
.price table th{
width: 90px;
background-color: #0F4662;
color: #fff;
padding: 10px;
box-sizing: border-box;
}

.price table td{
padding: 10px;
font-size: 1.4em;
line-height: 100%;
}
.price table td span{font-size: 1.7em;}
.price table td small{font-size: 0.6em;}



/* 歴史 */
.history{
background-color: #EBE0BB;
padding: 70px 0 70px 0;
margin-bottom: 100px;
}
.history > div{
width: 90%;
margin: 0 auto;
}

.history table {
width: 100%;
font-size: 0.9em;
border: 1px #E3E3E3 solid;
border-collapse:collapse;
}
.history table th {
font-size: 1.2em;
padding:7px;
color: #83764B;
border-bottom: #fff solid 1px;
background: -moz-linear-gradient(left, #fff, #EBE0BB);
background: -webkit-linear-gradient(left, #fff, #EBE0BB);
background: linear-gradient(to right, #fff, #EBE0BB);
font-weight:normal;
line-height: 120%;
text-align:left;
white-space: nowrap;
box-sizing: border-box;
}
/* 年代のthだけ*/
.history table th[colspan^="2"] {
background: -moz-linear-gradient(left, #A99860, #A99860);
background: -webkit-linear-gradient(left, #A99860, #A99860);
background: linear-gradient(to right, #A99860, #A99860);
color: #fff;
text-align: center;
}

.history table td {
padding: 7px;
box-sizing: border-box;
border-bottom: #fff solid 1px;
vertical-align:top;/*文字の垂直そろえを上揃えに*/
font-family:"Noto Sans JP","Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}





/*------------------------*/
/* ---- ロータリーについて --- */
/*------------------------*/
/* 目標 */
.mokuteki{
padding: 30px;
box-sizing: border-box;
background-color: #EBE0BB;
margin-bottom: 100px;
}
.mokuteki h4 {
color: #A99860;
font-size: 1.2em;
position: relative;
height: 40px;
margin: 0 0 10px 0;
}
.mokuteki h4::before {
position: absolute;
top: 50%;
right:0;
transform:translateY(-50%);
content: '';
width: 100%;
height:1px;
background-color: #A99860;
}
.mokuteki h4 span{
padding: 0 20px 0 0;
top: 50%;
transform:translateY(-50%);
position: absolute;
display: inline-block;
background-color: #EBE0BB;
}

.mokuteki ol{
line-height: 180%;
margin: 10px 0 10px 20px;
list-style: none;
counter-reset: ol_li; /* ol_li カウンタをセットする(値もリセット) */
}
.mokuteki ol li{margin-bottom: 10px;}
.mokuteki ol li::before{
margin-right: 10px;
margin-left: -17px;
counter-increment: ol_li; /* ol_li カウンタの値に1加える */
content: counter(ol_li); /* before擬似要素のcontentで出力 */
color: #A99860;
}

.mokuteki table{line-height: 180%;
}
.mokuteki table td{vertical-align: 180%; border-bottom: 1px solid;}
.mokuteki table th{
color: #A99860;
width: 60px;
text-align: left;
vertical-align:top;
border-bottom: 1px solid;
}

/* ロータリー本文 */
.rotary_bun{
border: 1px solid;
align-items: flex-start;
margin-bottom: 70px;
padding: 30px 20px 20px 20px;
}
.rotary_bun .flex_bet_pc{
/* 順番入れ替え */
display:-webkit-box;
display: -webkit-flex;
display:-ms-flexbox;
display: flex;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.rotary_bun .flex_bet_pc div{
width: 100%;
/* 順番入れ替え */
-webkit-box-ordinal-group:1;
-ms-flex-order:1;
-webkit-order:1;
order:1;
}
.rotary_bun .flex_bet_pc img{
margin: 10px auto;
display: block;
/* 順番入れ替え */
-webkit-box-ordinal-group:2;
-ms-flex-order:2;
-webkit-order:2;
order:2;
}
.rotary_bun .flex_bet_pc img[src$="_pc.jpg"]{display: none;}





/* ロータリの木 */
.rotary_tree{text-align: center; margin-bottom: 100px;}


/* 四つのテスト */
.rotary_test{
background-color: #F7F7F7;
border: 1px solid #707070;
padding: 20px;
margin: 20px 0 0 0;
box-sizing: border-box;
}
.rotary_test .flex_bet_pc{justify-content:flex-start;}
.rotary_test ol{
margin: 0 30px 0px 20px;
list-style: none;
counter-reset: ol_li; /* ol_li カウンタをセットする(値もリセット) */
}
.rotary_test ol li{margin-bottom: 10px;}
.rotary_test ol li::before{
margin-right: 10px;
margin-left: -17px;
counter-increment: ol_li; /* ol_li カウンタの値に1加える */
content: counter(ol_li); /* before擬似要素のcontentで出力 */
color: #A99860;
}






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

/* 電話 */
.tel{
text-align: center;
margin-bottom: 100px;
}
.tel a{
display:inline-block;
font-size: 2.0em;
color: #000;
}

/* --------メールフォーム-------- */
/* フォームの中身 */
.form_table {
border-collapse:collapse;
line-height: 180%;
width: 100%;
margin: 30px 0;
}

/* 共通 */
.form_table input[type="text"],
.form_table input[type="tel"],
.form_table input[type="email"],
.form_table textarea{
border: none;
font-size: 1.0em;
background-color: #f2f2f2;
font-family: "Shuei KakuGo Gin L", "Arial, Roboto", "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif;
}

/* 必須 */
.hi{
color: #ff6c6c;
border: 1px solid #ff6c6c;
font-size: 0.8em;
padding: 1px;
margin-left: 10px;
}

.form_table th{
display: block;
color: #0F4662;
border: 1px solid #0F4662;
padding: 5px 10px;
font-weight: normal;
text-align: center;
box-sizing: border-box;
}

.form_table td {
width: 100%;
display: block;
padding: 10px 0;
box-sizing: border-box;
vertical-align:middle;
margin-bottom: 20px;
}

/* ボタン系 */
.form_table input[type="text"],
.form_table input[type="tel"],
.form_table input[type="email"]{
width: 100%;
height: 30px;
padding: 0 10px;
box-sizing: border-box;
line-height: 230%;
}

/* 問い合わせ内容 */
.form_table textarea{
width:100%;
padding: 10px;
box-sizing: border-box;}




/* 同意前の説明 */
.form_doui p{margin-bottom: 40px;}
.form_doui p a{color: #00a99d;}

/* 同意ボタン */
.doui{background: #569eb2;}
.rese{background: #f08f71;}

.doui,.rese{
width: 100%;
margin: 15px 10px 0 0;
display: block;
text-align: center;
font-size: 1.2em;
padding: 10px 20px;
color: #FFF;
border: none;
text-transform:uppercase;
cursor:pointer;
word-wrap: break-word;
white-space: normal;
}



/* エラー内容 */
.error_messe{color: #ed807b;}
/* エラー戻りボタン */
.error_r_bt{
display: block;
margin: 15px 10px 0 0;
text-align: center;
font-size: 1.0em;
padding: 10px 20px;
color: #FFF;
border: none;
text-transform:uppercase;
cursor:pointer;
background: #569eb2;
}



/*-----------------*/
/* ---- program --- */
/*-----------------*/

.calender iframe{
width: 100%;
margin: 0 0 30px 0;
}

/*-----------------*/
/* ---- song --- */
/*-----------------*/

.song div{
width: 100%;
max-width: 500px;
text-align: center;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
padding:8%;
margin: 0 auto 60px auto;
outline: 1px solid #EBE0BB; /* 線幅、線のスタイル、カラー */
outline-offset: -10px;
box-sizing: border-box;
}

.song div h4{
font-size: 1.5em;
color: #0F4662;
}

.song div p:nth-child(2){
font-size: 0.9em;
line-height: 1.6em;
margin: 20px 0;
}

.song div p:nth-child(3){
font-size: 1em;
line-height: 2em; 
margin: 0;
}

.song div audio{width: 100%; margin: 20px 0 0 0;}

/*-----------------*/
/* ---- link --- */
/*-----------------*/

.link_bt{margin: 15px 0 60px 0;}

.link ul{
display: block;
font-family:"Noto Sans JP","Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
text-align: center;
margin: 0 0 30px 0;
}

.link .link_bt ul li a{
display: block;
width: 100%;
margin: 0 0 10px 0;
padding: 15px 0;
border: 1px solid #000000;
position: relative;
box-sizing: border-box;
}

/* ---- リンクがない --- */
.link .link_bt ul li span{
display: block;
width: 100%;
margin: 0 0 10px 0;
padding: 15px 0;
border: 1px solid #000000;
box-sizing: border-box;
}

.link .link_bt ul li a::after{
content: "";
display: inline-block;
position: absolute;
background: url("../img/icon_yazi_b.png") no-repeat;
background-size: contain;
background-position: center;
width: 5px;
height: 10px;
top: 22px;
right: 10px;
}

.link .link_bt ul li:nth-child(1){
width: 100%;
margin: 0 0 10px 0;
padding: 10px 0;
color: #571D09;
background: #EBE0BB;
}

/* YouTube例会・メイクアップ */
.meeting{margin: 0 0 100px 0;}
.meeting div a{
position: relative;
display: block;
text-align: center;
width: 100%;
margin: 30px 0;
padding: 20px 0px;
border: 1px solid #000000;
font-family:"Noto Sans JP","Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}

.meeting div a::after{
content: "";
display: inline-block;
position: absolute;
background: url("../img/icon_yazi_b.png") no-repeat;
background-size: contain;
background-position: center;
width: 5px;
height: 10px;
top: 28px;
right: 10px;
}