@charset "utf-8";
/* ----------------------------------
              COMMON
---------------------------------- */
body { margin:0px auto 0px auto;
       font-family:'メイリオ', Meiryo, 'ＭＳ Ｐゴシック' ,sans-serif;
       background:#fff;}
header,section,article,aside,footer{ 	display: block;}
img{ margin:0;padding:0;border:none;display:block;}
ul,ol{	margin:0;padding:0;list-style:none;list-style-position:outside;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
p{ margin:0;padding:0;}
div{ 	margin:0;padding:0;}
/* ----------------------------------
           COMMON LINK
---------------------------------- */
a:link{ color:#222;text-decoration:none;}
a:visited{ color:#222;text-decoration:none;}
a:hover{ color:#ff0000;	text-decoration:underline;}
a:active{ color:#298ADC;text-decoration:none;}
/* ----------------------------------
          ClearFix
---------------------------------- */
.cf { clear:both;}
.cf:after {  display:block; height:0;  visibility:hidden;
            clear:both;   content:".";}
/* 追加 MacIE 5 と WinIE 7 向け */
/*MacIE \*/
* html .cf{ height:1em;}
/* ----------------------------------
       CONTAINER --> START
---------------------------------- */
img{ max-width: 100%;height: auto;width /***/:auto; display:block;　}
/* ----------------------------------
       PC/SP
---------------------------------- */
.pc { display:block; }
.sp { display:none; }

  @media screen and (max-width : 480px) { 
      .pc { display:none; }
      .sp { display:block; }
  }
/* ----------------------------------
            SPAN COLOR
---------------------------------- */
span.red {
    color:#ff0000;
}

/*-------------------------------------
	画像リンク透過
-------------------------------------*/
a:hover img {opacity: 0.8;filter: alpha(opacity=80);}
/*-------------------------------------
	     Header
-------------------------------------*/
body { width:100%; margin:0px auto;font-size:16px;}
header { width:100%;  }

  @media screen and (max-width : 768px){ 
  }
  @media screen and (max-width : 480px) { 
  }
/* ----------------------------------
             NAVI
---------------------------------- */
nav { width:100%;  background-color:#fff; } 
nav ul  { width:98%; margin:0px auto; padding:0 1%; }
nav li { float:left;  padding:10px 0; width:14.28%; text-align:center; }
nav li.logo { padding:0; }
nav li.logo img { height:44px; }
nav li.member { background:#ffcccc; }
nav li a:link { padding:0px 5px; display:block; }
nav li a:hover { color:#ff0000;text-decoration:none;}

  @media screen and (min-width : 769px){
     .openIcon { display:none;}
  }
  @media screen and (max-width : 930px){
     nav ul  { font-size:14px; }
  }
  @media screen and (max-width : 768px){
     nav { position: fixed;  top: 0px; left:0;  margin:0; background:none;width:100%;z-index:10; }
     nav.open { height:30px;-webkit-transition: .5s linear; 	transition: .5s linear;  }
     nav.close { width:100%;height:100%;margin-left:230px; -webkit-transition: .5s linear; transition: .5s linear; 
                     background:#eee;background-color: rgba(51,51,51,0.5);}
     nav ul { list-style:none; padding:0px; width:230px; 
              margin:-42px 0px 0px -230px;height:100%;background:#eee;}
     nav ul li { color:#fff;font-size: 14px;font-weight: bold;padding:8px 0px 8px 20px;
                 background: #eee none repeat scroll 0% 0%;
                 width: 210px;border-bottom: 1px solid #333;}
  }
  @media screen and (max-width : 480px) { 
          nav {  }
  }
/*-------------------------------------
	   Main Contents
-------------------------------------*/
main { width : 100% ;  margin:0px auto 0 auto; padding-bottom:102px; }
article { margin:0px auto 0px auto; width:100%; }

#top-contents { margin:0 auto; width:100%; border-bottom:1px #fff solid; }
h1  { width:100%;  margin:0 auto; padding:6% 0; text-align:center; color:#fff; 
      background:url(../image/top-001.jpg); position; center center fixed; }
h1 img { margin:0 auto; }

div.title { width:100%; margin:0 auto; background:#88c0ff; }
h2 { color:#fff; font-size:18px;  max-width:1180px; padding:10px; margin:0 auto; 
     text-shadow: 2px 2px 2px #009900, -2px 2px 2px #009900,2px -2px 2px #009900,-2px -2px 2px #009900,
             0px 2px 2px #009900, -2px 0px 2px #009900, 2px 0px 2px #009900, 0px -2px 2px #009900,
             5px 5px 6px #009900;}

  @media screen and (max-width : 768px){
       h1 {padding:8% 0; }
  }
  @media screen and (max-width : 480px) {
      main { padding-bottom:10px; }
      #top-contents { width:100%; }
      h2 { width:94%; }
  }

#mid-contents { margin:10px auto; max-width:1200px; }
#mid-contents img { border-radius: 10px; }

div.greeting-left { float:left; width:20%; }
div.greeting-right { 
    float:left; 
    width:80%; 
    line-height:1.8em;
}
div.greeting-right ol { list-style-type: decimal; padding-left:30px; }

div.greeting-right p { 
    margin:10px 0;
}

p.mid-text { padding:10px 50px; }
h3  { padding:10px 40px; }

.midConLeft { float:left; width:30%; margin:20px 1.5% 10px; }
.midConCenter { float:left; width:30%; margin:20px 1.5% 10px; }
.midConRight { float:left; width:30%; margin:20px 1.5% 10px; }

p.caption { text-align:center; padding:10px 0; }

#bottom-contents { margin:10px auto; max-width:1200px; }
.bottomConLeft { float:left; width:47%; margin:20px 1.5% 10px; }
.bottomConRight { float:left; width:47%; margin:20px 1.5% 10px; }

.ggmap { position: relative; padding-bottom: 100%; padding-top: 30px;
       height: 0;overflow: hidden; }
.ggmap iframe, .ggmap object, .ggmap embed { position: absolute;
       top: 0; left: 0; width: 100%; height: 100%; }

  @media screen and (max-width : 768px){
       
  }
  @media screen and (max-width : 480px) {
       #mid-contents img { width:90%; margin:0 auto; }
       p.mid-text { padding:10px; }
       h3  { padding:10px; }
       #mid-contents div.greeting-left { float:none; width:154px; padding:0 10px;}
       #mid-contents div.greeting-left img{ ; width:100%; }
       #mid-contents div.greeting-right { float:none; width:calc(100% - 20px);padding:10px; }
       .midConLeft { float:none; width:100%; margin:10px 0; }
       .midConCenter { float:none; width:100%; margin:10px 0; }
       .midConRight { float:none; width:100%; margin:10px 0; }
       .bottomConLeft { float:none; width:100%; margin:10px 0; }
       .facebook { margin:0 auto; }
       .bottomConRight { float:none; width:100%; margin:10px 0; }
  }
/*-------------------------------------
	   ACTION
-------------------------------------*/
#action ul { margin-left:80px; list-style-type: disc; }
#relation { width:80%; margin:0 auto; }
.relation-left { clear:both; width:50%; float:left; }
.relation-right { width:50%; float:left; }

  @media screen and (max-width : 480px) {
       #action ul { margin-left:30px; list-style-type: disc; }
       #relation { width:90%; }
       .relation-left { width:100%; float:none; }
       .relation-right { padding-left:10%;  width:90%; }
  }
/*-------------------------------------
	   VISA
-------------------------------------*/
.visa-left { clear:both; float:left; width:calc(75% - 50px); }
.visa-right { float:left; width:25%; }
.visa-right img { width:100%; }
.visa-left ol { padding: 10px 50px 10px 80px; list-style-type: decimal; }

  @media screen and (max-width : 480px) {
       .visa-left { float:none; width:100%; }
       .visa-right { float:none; width:100%; }
       .visa-left ol { padding: 10px 10px 10px 30px; }
  }
/*-------------------------------------
	   PROFILE
-------------------------------------*/
div.profileTxt { margin-left:50px;}
.profile-text { clear:both; margin:0 0 20px 50px;  }
.pro-left { clear:both; width:60px; float:left; margin:0 0 10px 80px; }
.pro-right { width:calc(100% - 140px); float:left; }
  @media screen and (max-width : 480px) {
       div.profileTxt { margin-left:5px;}
       .profile-text { clear:both; margin:0 0 20px 0px;  }
       .pro-left { margin:0 0 10px 20px; }
       .pro-right { width:calc(100% - 90px); margin-left:5px; padding-bottom:20px; }
  }
/*-------------------------------------
	   PROFILE
-------------------------------------*/
.column-box {
	width:90%;
	margin:10px auto;
	padding-bottom:20px;
	border-bottom:#ccc solid 1px;
}
h3.column {
	padding:50px 40px 0px;

}
.column-box p{
	margin:10px 0;
}
.column-box table{
	width:100%;
}
.date {
	text-align:right;
	margin-bottom:10px;
}
@media screen and (max-width : 480px) {
	.column-box {
		width:98%;
	}
	h3.column {
		padding:30px 0px 0px;
	}
}

/*-------------------------------------
	   CONTACT
-------------------------------------*/
#contactBox { width:70%; margin:0px auto 10px; padding:10px;
            border:3px #ccc solid; border-radius:20px; }
#contactBox .contactTex { width: 50%; float: left;  margin: 10px 0; }

#contactBox .contactTex input.name { width:96%; padding:20px 1%; border-radius:8px;
                   border:none; background:#eee; }
#contactBox .contactRadio { clear:both; font-size:14px; color:#555; width:96%; padding:20px 1%; 
                  border-radius:8px; border:none; background:#eee; }
#contactBox .contactArea { clear:left; width:100%; padding:10px 0;  }
#contactBox .contactArea textarea.message { width:97%; height:114px; padding:20px 1%; 
          border-radius:8px; border:none; background:#eee; }
#contactBox .contactTex input.submit { clear:left; width:50%; padding:20px 1%; border-radius:8px; margin:20px 0;
          border:none; cursor:pointer; background-color:rgba(255, 102, 0, 0.8);  }
#contactBox .contactTex input.submit:hover { background-color:rgba(255, 102, 0, 1.0);  }

  @media screen and (max-width : 480px) {
        #contactBox { width:90%; }
  }

#contactForm { margin:10px 0px 20px 100px; }
  @media screen and (max-width : 480px) {
    .contactBox { width:90%; margin:0px auto 10px; padding:10px;
            border:3px #fff solid; border-radius:20px; }
    #contactForm { margin:30px 5px 20px 3px; }
  }
.contactLeft { width:200px;float:left;margin:3px;}
.contactRight { margin:14px; }
.contactRight input, .contactRight textarea { width:400px;}
  @media screen and (max-width : 768px){
    .contactRight input, .contactRight textarea { width:80%;}
  }
  @media screen and (max-width : 480px) {
    .contactRight input, .contactRight textarea { width:100%;}
  }
.submitBtn { margin-left:200px;}
  @media screen and (max-width : 768px){
    .submitBtn { margin-left:5%;}
  }
  @media screen and (max-width : 480px) {
    .submitBtn { margin-left:5%;}
  }
#contactForm table { table-layout:fixed; }
#contactForm .formTable { width:80%;margin:10px auto 10px auto;
         border-spacing:0;border-collapse:collapse; }
#contactForm .formTable td { width:69%;padding:5px;word-wrap:break-word; }
#contactForm .formTable th { width:29%;padding:5px; }
/*-------------------------------------
	   MEMBER
-------------------------------------*/
.profile-text { clear:both; margin:0 0 20px 50px;  }
.list-left { clear:both; width:150px; float:left; margin:0 0 10px 80px; }
.list-right { width:calc(100% - 240px); float:left; }
  @media screen and (max-width : 480px) {
       .profile-text { clear:both; margin:0 0 20px 0px;  }
  }
/*-------------------------------------
	     Footer
-------------------------------------*/
footer { width:100%;text-align:center;margin:0px auto; padding:0px auto 20px;
         background:#88c0ff; position:fixed; bottom:0; }
footer ul { text-align:center;margin:0px auto 0px auto; }
footer li { float:left; width:12.5%; padding:25px 0; text-align:center; }
footer li.footer-logo { padding:0; }
footer li a { display:block;text-decoration:none;}

address { clear:both; font-size: 12px; text-align:center;
          padding-bottom: 10px; margin:0px auto; }

  @media screen and (max-width : 480px) {
       footer { padding:0px auto 20px; position:relative; }
       footer li { float:left; width:50%; padding:10px 0; text-align:center; }
       footer li.footer-logo { padding:0; }
       footer li.footer-logo img { margin:0 auto; }
  }

g { margin:0 auto; }
  }