@charset "UTF-8";
/*===========================================
うらやすPet＆Peopleライオンズクラブ
=============================================*/

body  {  
  background:#f0ede9;
  box-sizing: border-box;
  font-family:"Noto Sans JP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif, Arial, Verdana, monospace;  
  font-size:16px;
  color:#313131;
  margin:0;
  padding: 0;
  line-height:2.0;
  text-align:left;
  width:100%;
  overflow: hidden;
  overflow-y: scroll;  
}

body, html	{height: 100%}

@media only screen and (max-width : 600px) {
    body  {
        font-size:14px;
    }
}

/*===========================================
Google Font
=============================================*/

/*Noto Sans JP
---------------------------------------------*/
.noto-sans-jp-main {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.noto-sans-jp-midashi {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal; 
}

/*Mプラスの丸ゴシック
　（うらやすPet＆Peopleライオンズクラブ）
---------------------------------------------*/
.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.m-plus-rounded-1c-medium {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.m-plus-rounded-1c-bold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}


/*===========================================
General Setting
=============================================*/

/*Default Text Link
---------------------------------------------*/
a  {
  text-decoration:none;
  color: #FC9700;
}
a:link {
  text-decoration:none;
  color:#FC9700;
}
a:visited { 
  text-decoration:none;
  color:#FC9700;
} 
a:active{
  text-decoration:none;
  color:#000;
}
a:hover {
  text-decoration:none;
  color:#000; 
}

/*アウトライン消去
---------------------------------------------*/
a {
  overflow:hidden;
  outline:none;
}
object,embed  {
  outline:none;
}

/*div全体をa要素に
---------------------------------------------*/
.div,
.div_blank{
	cursor:pointer;
}

/*Strong / Point
---------------------------------------------*/
.red  {color:#900;}
.blue  {color:#36C;}
.white{color:#fff;}
.bold  {font-weight:bold;}
.under a  {text-decoration:underline;}
.underline  {text-decoration:underline;}
.dblock  {cursor:pointer;}/*Div全体クリック*/
strong.point{
	color: #E70C0C !important;
	font-weight: normal !important;
}

/*Align
---------------------------------------------*/
.left  {text-align:left !important;}
.right  {text-align:right !important;}
.center  {text-align:center !important;}

/*画像
---------------------------------------------*/
img {
	width: 100%;
	height: auto;
}

/* YouTubeレスポンシブ
---------------------------------------------
.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin-bottom: 1.5em;
}

.youtube iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}*/


/*===========================================
Layout
=============================================*/
#container  {
    height:100%;  
    width:100%;
    background:#f0ede9;    
}
.container_white{    
    background:#fff;
}
.container_beige{    
    background:#eae4db;
}
.contents  {
    width: 1000px;
    margin:0 auto;
    padding:0 10px;
    box-sizing: border-box;
}
 
 @media only screen and (max-width : 1024px) {
     .contents  {
        width: 100%;       
    }
}

/*===========================================
Header Area
=============================================*/
#header  {
  	width:100%; 	
    padding:0;
    margin: 20px 0 0 0;    
    box-sizing: border-box;
    text-align: center; 
}
#header .contents{
    width: 1000px;
    height: 200px;
    margin:0 auto;
    padding:0 10px;
    box-sizing: border-box;
    position: relative;/*illust用*/
}
@media only screen and (max-width : 1024px) {
    #header .contents{
        width: 100%;
    }
}

/*ヘッダーイラスト(アニマル)
---------------------------------------------*/
/*ヘッダーイラスト(ロケット)*/
#header .contents .illust{
    background: url("../images/header_animal.png") no-repeat center right;
	background-size: contain;
    width: 100%;
	height: 200px;    
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    box-sizing: border-box;    
}
@media only screen and (max-width : 1024px) {
    #header .contents .illust{
        background-size: 24% auto;        
    }
}
@media only screen and (max-width : 700px) {
    #header .contents .illust{       
        background-size: 30% auto;        
    }
}
@media only screen and (max-width : 600px) {
    #header .contents .illust{        
        background-size: 35% auto;        
    }
}
@media only screen and (max-width : 500px) {
    #header .contents .illust{
        background-position: 100% 100%;            
    }
}

/*ロゴ（ライオンズクラブ）
---------------------------------------------*/
#header h1.logo_lions  {
	width: 500px;
    height: auto;
}
#header h1 img  {
	width: 100%;
    height: auto;
}

@media only screen and (max-width : 768px) {
     #header h1.logo_lions  {
	    width: 400px;
    }
}
@media only screen and (max-width : 600px) {
    #header h1.logo_lions  {
	    width: 300px;
    }
}
@media only screen and (max-width : 400px) {
    #header h1.logo_lions  {
	    width: 250px;
    }
}

/*ロゴ（うらやすPet）
paint-order: stroke;
輪郭線がテキストよりも後ろに描画
https://qiita.com/H40831/items/ab1bec77e922ac4911be
---------------------------------------------*/
#header h1.logo_pet{
    color: #000;
    margin: 100px auto 0 auto;
    -webkit-text-stroke: 5px white;
    text-stroke: 5px white;
    paint-order: stroke;
    font-size: 30px;
    text-align: center;
}

@media only screen and (max-width : 768px) {
    #header h1.logo_pet{
        font-size: 24px;
        margin: 80px auto 0 auto;
    }
}
@media only screen and (max-width : 600px) {
    #header h1.logo_pet{
        font-size: 20px;
        margin: 70px auto 0 auto;
    }
}
@media only screen and (max-width : 500px) {
    #header h1.logo_pet{
        margin: 60px auto 0 auto;
        font-size: 18px;
    }
}

/*認証状伝達式
---------------------------------------------*/
#header h2  {
    padding: 0!important;
    margin: 0;
    line-height: 1.0;
    font-size: 60px;
}
@media only screen and (max-width : 768px) {
    #header h2{
        line-height: 1.4;
    }
}

@media only screen and (max-width : 768px) {
    #header h2{
        font-size: 40px;
    }
}
@media only screen and (max-width : 500px) {
    #header h2{         
        font-size: 30px;
    }
}

/*ドロワーメニュー
---------------------------------------------*/
button.drawer-toggle {
	margin: 10px 10px 0 0;
    background: url("../images/drawerbutton_bg.png") no-repeat 0 center;
    background-size: 55px auto;
}
.drawer-nav ul{
	margin: 30px 0 0 0;
}
.drawer-nav ul li a{
	padding: 10px;
	border-bottom: #ccc dotted 1px;
	display: block;
    color: #000;
    text-align: left;
}
.drawer-nav ul li a:hover{
	color: #f8b62b;
}
.drawer-nav ul li a:before{    
	content: "▶";
    font-size: 10px;
	margin-right:5px;
    vertical-align: middle;
}

/*ボタンをメニュー内に格納*/
.drawer-hamburger {
	right: 0 !important;
}
  
/*===========================================
Footer Area
=============================================*/

/*Pagetop
---------------------------------------------*/
/*.totop{
	z-index: 99;
	position: fixed;
	bottom:30px;
	right:10px;
	text-align: center;
    display: none;/*ForIE 一瞬表示されるのを防止
}*/

/*ページトップ*/
/*.totop p.toptop a{
  width: 55px;
  height: 55px;
  display: table-cell;
  vertical-align: middle;
  margin: 0 auto;
  background: #58738d;
  color: #fff;  
  font-size: 13px;
}*/

/*フッター共通設定
---------------------------------------------*/
#footer  {
	width:100%;
    height: auto;
    background: #58738d;    
    padding: 30px 0 0 0;
    margin: 30px 0 0 0;
    box-sizing: border-box;   
 }
#footer .footer_in  {
	background:url("../images/footer_img.png") no-repeat center center;
    background-size:contain;
    height: 300px;     
}

@media only screen and (max-width : 1024px) {
    #footer .footer_in  {
	    background-size: 80%  auto;
        height: 300px;
    }
}
@media only screen and (max-width : 900px) {
    #footer .footer_in  {
	    background-size: 90%  auto;
        height: 300px;
    }
}
@media only screen and (max-width : 800px) {
    #footer .footer_in  {
	    background-size: 90%  auto;
        height: 250px;
    }
}

@media only screen and (max-width : 768px) {
    #footer .footer_in  {
	    background-size: 90%  auto;
        height: 220px;
    }
}

@media only screen and (max-width : 600px) {
    #footer .footer_in  {
	    background-size: 100%  auto;
        height: 180px;
    }
}

@media only screen and (max-width : 500px) {
    #footer .footer_in  {
	    background-size: 100%  auto;
        height: 150px;
    }
}


/*フッターロゴ
---------------------------------------------*/
#footer h1.logo_pet{
    color: #000;
    margin: 0;
    padding: 130px 0 0 0;
    -webkit-text-stroke: 5px white;
    text-stroke: 5px white;
    paint-order: stroke;
    text-align: center;
    font-size: 30px;
}

@media only screen and (max-width : 768px) {
    #footer h1.logo_pet{
        font-size: 22px;
        padding: 100px 0 0 0;
    }
}
@media only screen and (max-width : 600px) {
    #footer h1.logo_pet{
        font-size: 18px;
        padding: 85px 0 0 0;
        -webkit-text-stroke: 4px white;
        text-stroke: 4px white;
    }
}
@media only screen and (max-width : 600px) {
    #footer h1.logo_pet{
        padding: 70px 0 0 0;
    }
}

/*コピーライト
---------------------------------------------*/
.copyright{
    color: #fff;
    text-align: right;
    font-size: 13px;
   margin: 5px 10px 5px 5px;   
}
.copyright span{
    font-size: 18px;
    vertical-align: middle;    
}

/*===========================================
コンテンツ／各見出しブロック設定
=============================================*/
.box{
    padding: 60px 0;
    text-align: center;    
}
.box_last{/*会員紹介*/
    padding: 60px 0 0 0;
    text-align: center;   
}

@media only screen and (max-width : 768px) {
    .box{
        padding: 40px 0;        
    }
    .box_first{/*iPad以下「祝辞」*/
        padding: 0;        
    }
    .box_last{/*会員紹介*/
        padding: 40px 0 0 0;          
    }
}

/*共通h2
---------------------------------------------*/
h2.shareh2{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    /* for no-flexbox browsers */
    font-size: 40px;
	
    margin-bottom: 20px;/*h2下部スキマ設定*/
    background-color: transparent;
    color: #333;
    padding: 0px;
    font-weight: normal;
    line-height: 1.2;	
}
h2.shareh2:after{
    border-top: 3px solid #58738d;
    content: "";
    display: inline;
    /* for IE */
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    min-width: 30px;
}
h2.shareh2:before{
    border-top: 3px solid #e5c76c;
    content: "";
    display: inline;
    /* for IE */
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    min-width: 30px;
}
h2.shareh2:before{
    margin-right: 20px;
}
h2.shareh2:after{
    margin-left: 20px;
}

@media only screen and (max-width : 768px) {
    h2.shareh2{    
        font-size: 30px;
    }
}
@media only screen and (max-width : 600px) {
    h2.shareh2{    
        font-size: 27px;
    }
}

/*共通h3
---------------------------------------------*/
h3.shareh3{
    border-left: 7px solid #ffab31;
    text-align: left;
    padding: 2px 10px;
    font-size: 20px;
    margin: 10px 0;
}

/*祝辞
---------------------------------------------*/
.block01{}
.box_shu{
    border-radius: 40px;
    background-color: rgb(234, 228, 219);
    box-shadow: 1px 1.732px 1.96px 0.04px rgba(181, 181, 181, 0.7);
    width: 70%;
    height: auto;
    padding: 20px;
    margin: 40px auto 0;
    box-sizing: border-box;
}
.box_shu img{    
    width: 50%;
    height: auto;
}
.box_shu img.sign{    
    width: 150px;
    height: auto;
}
.box_shu p.name{
    line-height: 1.5;
    padding: 10px 0 0 0;
}
.box_shu p.catch{
    font-size: 22px;
    padding: 0;
}
p.tap br{
    display: none;
}

/*reset追加*/
.box_shu button,
.box_chairman button{
    background: none!important;
    border: none!important;    
    cursor: pointer;
    color: #313131!important;
}
/*ともに奉仕を*/
.box_shu button p.catch{    
    color: #313131!important;
}

@media only screen and (max-width : 600px) {
    .box_shu{    
        width: 80%;
        border-radius: 30px;
    }
    .box_shu img{    
        width: 70%;    
    }
    p.tap br{
        display: block;    
    }
}

/*会長挨拶
---------------------------------------------*/
.block02{}
.box_chairman{
    background: #E8E8E8;    
    box-shadow: 5px 5px #d2d2d2;
    width: 60%;
    height: auto;
    padding: 20px;
    margin: 40px auto 0;
    box-sizing: border-box;
}
.box_chairman img{    
    width: 50%;
    height: auto;
}
.box_chairman p.name{
    line-height: 1.5;
    padding: 10px 0 0 0;
}

@media only screen and (max-width : 600px) {
    .box_chairman{    
        width: 80%;    
    }
    .box_chairman img{    
        width: 70%;    
    }
}

/*来賓紹介
  スポンサークラブ紹介
---------------------------------------------*/
.block03{}
.block04{}

table.raihin,
table.sponsor,
table.sponsor02{
    width: 60%;
    border: 1px #ccc solid;
    margin: 0 auto;
    background: #fff;
    border-spacing: 0;
    border-collapse: collapse;
}
table.raihin_first{
    margin-bottom: 30px;
}
table.sponsor02{
    margin: 30px auto 0 auto;
}
table.raihin th,
table.raihin td,
table.sponsor th,
table.sponsor td{
    border: 1px #ccc solid;
    text-align: left;
}
table.raihin th,
table.sponsor th{    
    width: 60%;
    padding: 5px 10px 5px 30px;
    font-weight:  normal;
}
table.raihin th.header{/*20260109追記*/
    width: 100%;
    padding: 5px 10px 5px 30px;
    text-align: center;
    background: #F2F2F2;
    font-weight: bold;
}

table.raihin td,
table.sponsor td{    
    padding: 5px 10px 5px 30px;
}

table.sponsor02 td{
    text-align: left;
    border: 1px #ccc solid;
    padding: 5px 10px 5px 40px;
}

@media only screen and (max-width : 1024px) {
    table.raihin,
    table.sponsor,
    table.sponsor02{
        width: 90%;    
    }    
}
@media only screen and (max-width : 600px) {
    table.raihin,
    table.sponsor,
    table.sponsor02{
        width: 100%;    
    }    
}
@media only screen and (max-width : 500px) {
    table.sponsor02 td{
        padding: 5px 10px 5px 20px;
    }
}

/*ライオンズ・ヒム＆誓い
---------------------------------------------*/
.block05{}

.box_him{
    background: url("../images/bg_him.jpg") repeat;
    width: 60%;
    margin: 50px auto 0;
    padding: 30px;
    box-sizing: border-box;
    box-shadow: 5px 5px #d2d2d2;
    font-size: 18px;
}
.box_chikai{
    width: 60%;
    margin: 50px auto 0;
    padding: 0;
    box-sizing: border-box;   
}
.box_chikai p{
    line-height: 3.0;
    font-size: 20px;
}

@media only screen and (max-width : 768px) {
    .box_him,
    .box_chikai{
        width: 90%;    
    }
}
@media only screen and (max-width : 600px) {
    .box_him{
        font-size: 16px;
    }
}
@media only screen and (max-width : 500px) {
    .box_him,
    .box_chikai p{
        font-size: 15px;
    }    
}

/*We Serve（会長スローガン・クラブ概要・組織図）
---------------------------------------------*/
.block06{}
.block06 h1{
    font-size: 50px;
    line-height: 1.0;
    margin: 0 0 20px 0;
}
.box_slogan{
    background: #efc74d;
    width: 60%;
    margin: 30px auto 60px;
    padding: 30px;
    box-sizing: border-box;
    box-shadow: 5px 5px #d2d2d2;
    font-size: 22px;
    color: #fff;
    text-shadow: 1px 1px 1px #3e3e3e;
}
.keikaku p,
.naiyo p{
    padding: 10px 20px;
    text-align: left;
}
.soshikizu img{
    width: 60%;
    height: auto;
}
.box_slogan br{
     display: none;
}

@media only screen and (max-width : 768px) {
    .block06 h1{
        font-size: 40px;    
    }
    .box_slogan{    
        width: 90%;    
    }
    .soshikizu img{
        width: 90%;
    }
}

@media only screen and (max-width : 500px) {
    .box_slogan br{
         display: block;
    }
}

/*会員紹介
---------------------------------------------*/
.block07{}

.box_member{
    display: flex;
    flex-wrap:wrap;/* 折返し */
    justify-content: space-between;
}
.box_member::after{
  content:"";
  display: block;
  width: 22%;
}
.box_member::before{
  content:"";
  display: block;
  width: 22%;
  order: 1; /* アイテムの並び順 */
}
.box_personal{
    width: 22%;
    margin: 0 0 50px 0;
}
.box_personal p{
    text-align: center;
    font-size: 15px;    
}

@media only screen and (max-width : 500px) {
    .box_member::after{
        width: 32%;
    }
    .box_member::before{
        width: 32%;
    }
    .box_personal{
        width: 32%;
        margin: 0 0 30px 0;
    }
    .box_personal p{
        font-size: 12px;
        line-height: 1.5;
    }
}