@charset "UTF-8";

/* PCでは非表示 */
.pc_no{display: none;}
/* テキストリンク */
a:hover {color:#114e6d;}


.w_70{width: 70%;}
.w100{width: 100%;}

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




/* -------------------------- */
/* --------flexbox 共通-------- */
/* -------------------------- */
/*自動隙間　横並び　行替え　左寄せ*/
.flex_bet_pc{
display: -moz-box;		/* Fx用 */
display: -webkit-box; 	/* Safari、スマホ用 */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction:row;
flex-wrap:wrap;/*折り返しても*/
justify-content:space-between;
}



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

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

.you_btn{
    width: 45%;
    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.5em;
    text-align: center;
    line-height: 1.5;
}

.you_btn:hover{
    width: 45%;
    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.5em;
    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{
width: 1000px;
margin: 0 auto;
padding: 30px 30px;
color: #fff;
text-align: center;
box-sizing: border-box;
}


footer a{color: #fff;}

/* ページトップへ */
.p_t{margin: 0 auto; display: block; text-align: center;}
.p_t img:hover{
opacity: 0.5;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
}


/* ロゴと会社 */
footer .f_box h2{
width: 400px;
padding: 15px 15px;
font-size: 0.7em;
text-align: left;
margin: 0 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: 150px; margin: -10px 10px 0 0;}

/* 住所 */
footer .f_box .address{
width: 700px;
margin: 10px auto;
}
footer .f_box .address img{margin: 10px 0 0 5px;}
footer .f_box .address ul{
width: 350px;
margin: 0 auto;
}

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

/* sns */
footer .f_box ul{width:240px; margin: 10px auto;}
footer .f_box ul li{}




/*-----------------*/
/* ----content--- */
/*-----------------*/
.content{
width: 1000px;
margin:70px auto;
}




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

/* メイン */
#main_box{position: relative;}
#main_box #main{text-align: center;}
#main_box #main img{margin-top: 170px;}
#main{height: 500px;}


/* テーマ */
.main_thema{
background-image: url("../img/top_copy_back2.jpg");
background-size: cover;
background-position:center;
padding: 40px;
box-sizing: border-box;
text-align: center;
}
.main_thema h3{
font-size: 1.2em;
color: #fff;
}
.main_thema h4{
font-size: 2em;
color: #A99860;
}
.main_thema a{
color: #fff;
margin: 20px 0 0 0;
display:inline-block;
border: 1px solid #fff;
padding: 7px 100px;
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 );
}


.mov_message {
  font-size: 1.5em;
  width: 60%;
}

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


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

.main_message {
  margin: 0 auto;
  width: 80%;
  padding: 20px 40px;
  box-sizing: border-box;
}
.main_message .message h3{
  text-align: center;
  font-size: 1.2em;
  color: #000;
}
.main_message h4{
  text-align: center;
  font-size: 1.5em;
}
.test {
  align-items: center;
  margin: 0 auto;
  width: 515px;
  display: flex;
  justify-content: space-between;
}
.test li :nth-child(2) {
  font-size: 2.2em;
}
.main_mokuhyou {
  text-align: center;
  font-size: 1.5em;
  color: #002e7d;
}

.mokuhyou {
  margin: 0 auto;
  width: 50%;
}
.mokuhyou h5 {
  line-height: 20px;
}
.mokuhyou ol{
  font-size: 1.2em;
  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で出力 */
}

.dl_ran {
  text-align: center
}

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

/* 歴史 */
.top_history{
background-image: url("../img/kushiro_back.jpg");
background-size: cover;
background-position:center;
padding: 11px;
box-sizing: border-box;
}
.top_history .icon_2500{
  text-align: center;
}
.top_history h3{
color: #A99860;
text-align: center;
font-size: 1.5em;
}
.top_history h3 span{
display: block;
font-size: 0.7em;
}
.top_history p{
width: 65%;
margin: 10px auto 0 auto;
font-size: 0.9em;
}

/* TOPのお知らせ */
#top_index .news .flex_bet{
align-items: flex-start;
}
#top_index .news{
margin: 0 0 0 0;
}



/* バナー */
aside ul li{
margin-bottom: 10px;
}
aside ul li a:hover{
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
opacity: 0.5;
}


/* topメニュー */
.top_menu ul{margin-top: 40px;}
.top_menu ul li{
background-position: center;
background-size: cover;
width: 23%;
box-sizing: border-box;
}
.top_menu ul li a{
display: block;
color: #fff;
padding: 20px 15px;
}
.top_menu ul li a:hover{
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
background-color: rgba(255,255,255,0.5);
}
.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;
}


/*-----------------*/
/* ---- privacy --- */
/*-----------------*/
.privacy ol{
margin-top: 20px;
font-family:"Noto Sans JP","Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
.privacy ol li{margin-top: 7px;}







.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: 67%;}
.aisatsu div:last-child{width: 30%;}
.aisatsu img{margin-bottom: 10px;}
.aisatsu span{font-size: 1.6em; font-weight: 600;}


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



.aims h4 {
font-size: 1.2em;
position: relative;
height: 40px;
margin: 50px 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 20px 0 0;
top: 50%;
transform:translateY(-50%);
position: absolute;
display: inline-block;
background-color: #3d7177;
}


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


.aims dd{
text-align: center;
width: 60%;
padding: 10px 20px;
margin-top: 10px;
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{
font-size: 2.4em;
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{width: 70%;}
.aims.world_aims{margin-top: 30px;}





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

/* 概要　*/
.gaiyou{margin-bottom: 100px; overflow: hidden;}
.gaiyou div:first-child{width: 615px;}
.gaiyou div:last-child{width: 350px;}
.gaiyou .title_01{margin-top: 40px;}


/* 例会場 */
.reikaizyo{}
.reikaizyo > div{width: 370px;}

.reikaizyo dl{
overflow: hidden;
margin-bottom: 10px;
}
.reikaizyo dl dt{
background-color: #0F4662;
color: #fff;
width: 130px;
padding: 5px;
margin: 0 10px 0 0;
text-align: center;
float: left;
}
.reikaizyo dl dd{
display: inline-block;
width: 210px;
float: left;
}
.reikaizyo dl span{font-size: 1.2em; display: block;}

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

.reikaizyo iframe{
width: 600px;
height: 300px;
}




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

.price > div{
width: 700px;
margin: 0 auto;
}
.price table{margin:0 0 20px 20px;}
.price table th{
width: 150px;
background-color: #0F4662;
color: #fff;
padding: 10px;
box-sizing: border-box;
}
.price table:first-child th{height: 75px;}

.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: 1000px;
margin: 0 auto;
}

.history table {
width: 48%;
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: 5px 50px 50px 50px;
box-sizing: border-box;
background-color: #EBE0BB;
margin-bottom: 100px;
}
.mokuteki h4 {
color: #A99860;
font-size: 1.2em;
position: relative;
height: 40px;
margin: 50px 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{
border-collapse:separate;
border-spacing:15px;
margin-left: -25px
}
.mokuteki table td{vertical-align: 180%;}
.mokuteki table th{
color: #A99860;
width: 10%;
vertical-align:top; 
}

/* ロータリー本文 */
.rotary_bun{margin-bottom: 100px;}
.rotary_bun > div{align-items: flex-start;}
.rotary_bun > div > div{width: 680px;}
.rotary_bun > div > div img{width: 290px;}
/* 画像に「_sp」があれば非表示 */
.rotary_bun .flex_bet_pc img[src$="_sp.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.4em;
color: #000;
}

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

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

/* 共通 */
.form_table input[type="text"],
.form_table input[type="tel"],
.form_table input[type="email"],
.form_table textarea{
box-sizing: border-box;
width: 100%;
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;
}

/* 幅100%を解除したい列 */
.form_w input[type="text"],
.form_w input[type="tel"],
.form_w input[type="email"],
.form_w textarea{width: auto;}



/* ラジオボタン */
.form_table input[type="radio"]{margin:0 5px 0 30px;}
.form_table input[type="radio"]:first-child{margin:0 5px 0 0;}


.form_table th {
width: 100px;
vertical-align:top;
padding:10px 30px 10px 0;
line-height: 120%;
text-align:right;
white-space: nowrap;
font-weight: normal;
box-sizing: border-box;
}
.form_table td {
padding: 10px 0;
vertical-align:middle;
box-sizing: border-box;
}

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

/* 問い合わせ内容 */
.form_table textarea{padding: 10px;}


/* 同意ボタン */
.doui_bt{
justify-content: center;
flex-wrap: wrap;
text-align: center;
}
.doui{background: #569eb2;}
.rese{background: #f08f71; }
.doui:hover{background: #12a095;}
.rese:hover{background: #ed807b;}

.doui:hover,.rese:hover{color: #fff;}

.doui,.rese{
text-align: center;
font-size: 1.2em;
padding: 10px 20px;
color: #FFF;
border: none;
text-transform:uppercase;
cursor:pointer;
margin: 40px 10px 30px 0;
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 {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}

.song div{
position: relative;
width: 380px;
text-align: center;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
padding: 50px;
margin: 0 0 50px 0;
}

/* ---- IE対応 --- */
.song div::before {
content: '';
width: calc(100% - 20px);
height: calc(100% - 20px);
border: 1px solid #EBE0BB;
position: absolute;
top: 10px;
left:10px;
z-index: -1;
}

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

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

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

.song div audio{
width: 320px;
height: 40px;
margin: 40px 0 0 0;
}


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

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

.link ul{
display: table;
border-collapse: separate;
border-spacing: 4px 0;
font-family:"Noto Sans JP","Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
text-align: center;
margin: 0 0 20px 0;
}

.link .link_bt ul li{
display: table-cell;
}


.link .link_bt ul li a{
min-width: 170px;
display: table-cell;
padding: 5px 10px;
border: 1px solid #000000;
position: relative;
}

/* ---- リンクがない --- */
.link .link_bt ul li span{
min-width: 170px;
display: table-cell;
padding: 5px 10px;
border: 1px solid #000000;
}

.link .link_bt ul li a:hover{
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
background-color: #EBE0BB;
}

.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: 13px;
right: 5px;
}

.link .link_bt ul li:nth-child(1){
min-width: 76px;
color: #571D09;
background: #EBE0BB;
}

/* YouTube例会・メイクアップ */
.meeting div a{
position: relative;
display: block;
text-align: center;
width: 480px;
margin: 30px 0 60px 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:hover{
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
background-color: #EBE0BB;
}

.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;
}