/* 
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, 
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

dl, dt, dd, tr, th, td{
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

body {
  line-height:1;
  font-size: 14px;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
  display:block;
}
nav ul {
  list-style:none;
}
blockquote, q {
  quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}
a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
/* change colours to suit your needs */
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}
/* change colours to suit your needs */
mark {
  background-color:#ff9;
  color:#000; 
  font-style:italic;
  font-weight:bold;
}
del {
  text-decoration: line-through;
}
abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
/* change border colour to suit your needs */
hr {
  display:block;
  height:1px;
  border:0;   
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}
input, select {
  vertical-align:middle;
}

li {
  list-style: none;
}

p {
  line-height: 1.5em;
}


/* clearfix */
.fix:before,
.fix:after {
  content:"";
  display:table;
}
.fix:after {
  clear:both;
}
.fix {
  *zoom:1;
}



/********************
Base
********************/

body {
  min-width: 1150px;
  margin: 0 auto;
  background: url(../cmn_images/cmn_bg.jpg);
}

h1, h2, h3,
ul.gnav li{
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

.container {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 100;
  overflow: hidden;
}

#header {
  width: 100%;
  height: 100px;
  background-color: #fff;
  box-shadow: 0 1px 10px rgb(126,126,126);
  box-shadow: 0px 1px 10px 0.00px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 100;
  padding-top: 8px;
}

.header_wrapper {
  width: auto;
  margin: 0 auto;
  padding: 0 5px;
  position: relative;
}

.header_wrapper:before {
  content: '';
  display: block;
  position: absolute;
  top:50px;
  right:-30px;
  background: url(../cmn_images/header_contact-img.png);
  width: 147px;
  height: 138px;
  z-index: 120;
}

@media only screen and (min-width:1250px) {
  .header_wrapper {
    max-width: 1260px;
  }
}


.contents {
  width: 95%;
  min-width: 1024px;
  max-width: 1200px;
  margin: 30px auto;
  position: relative;
  z-index: 100;
}


/*  コラムの設定  */

.icon {
  float: left;
  position: relative;
  margin-left: 2%;
  padding: 15px 1%;
  border-radius: 7px;
  border:#eae9b1 0px solid;
}

.icon img:hover{
  opacity: 0.8;
  
}

.clm {
  float: left;
  position: relative;
  margin-left: 2%;
  padding: 15px 1%;
  background: #ffffff;
  border-radius: 7px;
  border:#eae9b1 0px solid;
  box-shadow: 0px 0px 10px 0.00px rgba(0, 0, 0, 0.15);
}
.clm-1 {
  width: 100%;
  margin-left: 0;
}
.clm-2 {
  width: 49%;
}
.clm-3 {
  width: 32%;
}

/* 下層ページ用 */
.clm-1_2 {
  width: 74%;
  float: left;
  position: relative;
  margin-left: 2%;
}

.clm-1_2 .clm {
  margin-bottom: 45px;
  padding: 30px 4% 60px;
}

.clm-2_2 {
  width: 24%;
  float: left;
  margin-left: 2%;
  text-align: center;
}

/* コラムの最初につけてマージンをなくす */
.c-first {
  margin-left: 0;
}

/* バナーの画像 adaptiveに */
.bnr {
  max-width: 100%;
  height: auto;
}

/*  GROUPING  */
.contents:before,
.contents:after {
  content:"";
  display:table;
}
.contents:after {
  clear:both;
}
.contents {
  zoom:1; /* For IE 6/7 */
}



/********************
Elements
********************/

/* 緑のバーライン */
.bar {
  background: url(../cmn_images/cmn_top-btm_bar.png) repeat-x top;
}


.heading {
  font-size: 18px;
  font-weight: normal;
  padding: 10px 0 10px 39px;
  line-height:130%;
}


.h-first {
  background: url(../cmn_images/cmn_bubble_1.png) no-repeat left;
}

.h-second {
  background: url(../cmn_images/cmn_bubble_2.png) no-repeat left;
}

.h-third {
  background: url(../cmn_images/cmn_bubble_3.png) no-repeat left;
}


/* ボタンの基本構造 */
.btn {
  display: block;
  padding: 15px 0;
  text-align: center;
  text-decoration: none;
  position: relative;
  margin: 0 auto;
}

.btn:before {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -12px;
  background: url(../cmn_images/cmn_btnArrow-middle.png) no-repeat;
  width: 14px;
  height: 24px;
}


/* ボタンにグラーデーションをつける場合に付与 */
.grd-btn {
  color: #fff;
  border-radius: 7px;
  font-size: 1.1em;
}

.grd-btn:hover {
  filter: alpha(opacity=75);
  -moz-opacity:0.75;
  opacity:0.75;
}


/* ボタンのグラデーションパターン */

.g-first {
  background-color: #698f20;
  background: linear-gradient(90deg, #698f20 0%, #79ae38 67%, #80bd44 100%);
}

.g-second {
  background-color: #698f20;
  background: linear-gradient(90deg, #76a220 0%, #9dbe3e 70%, #adc94b 100%);
}

.g-third {
  background-color: #98a80d;
  background: linear-gradient(90deg, #98a80d 0%, #b8c54e 100%);
}


/* カテゴリーに色をつける */
.red {
  background: #cf4829;
}
.blue {
  background: #7ea4f5;
}
.green {
  background: #698f20;
}


/* 大きさを指定する */
.small {
  width: 30%;
}
.medium {
  width: 50%;
}
.medium-large {
  width: 65%;
}
.large {
  width: 80%
}

/* 白矢印 */
.red.btn:before {
  background:url(../images/course/course_arrow_white.png);
  right: 8%;
  width: 15px;
}


/* 画像を真ん中に寄せる */
.img_center {
  display: block;
  margin: 20px auto 35px;
}



/********************
Header
********************/

#logo {
  position: relative;
  width: 25%;
  top: 0;
  left: -28px;
}

.logo-img {
  max-width: 100%;
}

.logo-img:hover {
  filter: alpha(opacity=75);
  -moz-opacity:0.75;
  opacity:0.75;
}

.gnav {
  position: absolute;
  font-size: 1.1em;
  width: 45%;
  top: 19px;
  left: 23%;
  display: flex;
  justify-content: space-between;
}

.gnav li {
  text-align: center;
}


.gnav li a {
  color:#1e1e1e;
  text-decoration: none;
  display: block;
  padding: 5px 8px;
  height: 40px;
  line-height: 40px;
  transition: all .2s ease;
}

.gnav i { /* ナビ前の> */
  font-size: 1.5em;
  position: relative;
  top:2px;
  color: #328165;
  margin-right: 5px;

  transition: all .3s ease;
}

.gnav li a:hover,
.gnav li a:hover i,
.active,
.active i{
  background: #328165;
  border-radius: 3px;
  color: #fff !important;
}



.laguage{
  vertical-align:bottom;
}

.laguage a:link,
.laguage a:visited,
.laguage a:active,
.laguage a:hover{
  background:none !important;
}

@media (max-width: 1250px) {
  #logo {
    top: 5px;
  }
  .gnav {
    left: 225px;
    top: 20px;
    font-size: 1em;
  }
}



/*
Gnavi横のお問い合わせ・支援、寄付についてボタン
*/

.header_box-btn {
  width: 30%;
  position: absolute;
  top: 22px;
  right: 0px;
  z-index: 150;
  display: flex;
  justify-content: space-between;
}

.header_box-btn li {
  padding:0 3px;
}

.header_box-btn li a {
  transition: all .2s ease;
  opacity: 1;
}

.header_box-btn li a:hover {
  opacity: 0.8;
}

.header_box-btn li img {
  max-width: 100%;
  height: auto;
}

.language{
  padding-top:7px !important; 
}

@media (max-width: 1250px) {
  .logo-img {
    width: 228px;
    top: 2px;
  }
  .gnav {
    left: 225px;
    top: 20px;
    font-size: 1em;
  }
}



/********************
キーイメージ
********************/

.key-contents {
  width: 100%;
  max-width: 1600px;
  position: relative;
}

.key-contents._home {
  height: 580px;  
}

.key-contents._sub {
  height: 260px;
}


/* キーイメージ （トップについてはindex.css）*/
.sub-keyimg {
  position: absolute;
  left: 0;
  top:-30px;
}

@media only screen and (max-width:1300px) {
  .sub-keyimg {
    left: auto;
    right: 48%;
  }
}



/********************
キャッチコピー　h1
********************/

.copy {
  position: absolute;
  z-index: 110;
}

/*
トップは透過状態から浮き上がるアニメ→ opacity:0;
サブは最初から表示してアニメはなし→ opacity:1;
*/

.copy img {
  max-width: 100%;
  height: auto;
}

.copy._home{
  width: 41%;
  top: 38%;
  left: 57%;
  opacity: 0;
}

.copy._sub {
  top: 45%;
  left: 58%;
}

.copy._sub h1 {
  font-size: 31px;
  color: #404040;
  letter-spacing: 2px;
}

._sub .copy,
._sub .dot_a, ._sub .dot_b{
  opacity: 1;
}

.dots li {
  width: 12px;
  height: 12px;
  display: inline-block;
}

.dot_a,.dot_b {
  opacity: 0;
}

.dot1 {
  background: url(../images/top/top_keyimg-colorDots01.png);
}
.dot2 {
  background: url(../images/top/top_keyimg-colorDots02.png);
}
.dot3 {
  background: url(../images/top/top_keyimg-colorDots03.png);
}
.dot4 {
  background: url(../images/top/top_keyimg-colorDots04.png);
}
.dot5 {
  background: url(../images/top/top_keyimg-colorDots05.png);
}

.top-bana{
  width:40%;
  position:absolute;
  z-index:999;
  top: 55%;
  left: 56%;
}

.top-bana li{
  float:left;
  margin:0 1%;
}

.top-bana li img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 1250px) {
  .copy._home {
    width: 33%;
    left: 65%;
    top: 43%;
  }
  .dots li {
    width: 8px;
    height: 8px;
    background-size: contain;
  }
  .top-bana {
    width: 20%;
    top: 63%;
    left: 54%;
  }
}

/********************
見出し（heading）
********************/

.heading._sub {
  font-size: 2em;
  background: url(../cmn_images/cmn_h_bg.png) no-repeat left top;
  padding: 7px 0 21px 50px;
  letter-spacing: 2px;
  width: 95%;
  margin: 0 auto;
}

.side {
  text-align: left;
  padding: 20px 0 30px 48px;
  background: url(../cmn_images/cmn_h_bg.png) no-repeat left top;
}

.h-link {
  color: #000;
  text-decoration: none;
}

.h-link:hover {
  text-decoration: underline;
}

.h-link img:hover {
  filter: alpha(opacity=75);
  -moz-opacity:0.75;
  opacity:0.75;
}
/********************
文字組
********************/

p._sub {
  margin-left: 6%;
  line-height: 1.7em;
}



/********************
画像処理
********************/

/* 図など、画像を中央寄せにしたいとき*/
.img_center {
  display: block; 
  margin: 20px auto;
}



/********************
サークル
********************/

.circles img {
  position: absolute;
}
.circle1 {
  top:-100px;
  right: 180px;
}
.circle2 {
  top:60px;
  right: 30px;
}
.circle3 {
  top:-20px;
  right: -120px;
  z-index: 110;
}
.circle4 {
  top:-86px;
  right: -1200px;
  z-index: 100;
}
.circle5 {
  top: 80px;
  right: -250px;
}
.circle6 {
  top: 340px;
  right: -90px;
}
.circle7 {
  top: 500px;
  right: -100px;
}
.circle8 {
  top:600px;
  left: 48%;
}




/********************
サイドメニュー
********************/

.bnr:hover {
  opacity: 0.8;
}

.b-group1 {
  margin: 0 auto 20px;
}

.b-group2 {
  margin: 25px auto 40px;
}

.b-group3 {
  margin: 0 auto 20px;
}

.side.heading.fb {
  margin-top: 35px;
}
.fb:before {
  content:'';
  background: url(../cmn_images/cmn_sidemenu_facebook.png);
  width: 76px;
  height: 20px;
  position: absolute;
  right: 0;
}


/********************
お問い合わせ｜Btm
********************/
.btm-contact {
  position: relative;
  margin: 40px auto 0px;
  float: none;
  text-align: center;
  max-width: 1024px;
}

.contact-img1 {
  position: absolute;
  left: -2%;
  top: -50px;
  display: block;
  z-index: 50;
}

.contact-crcl {
  content: '';
  background: url(../cmn_images/cmn_contact-crcl.png);
  width: 125px;
  height: 122px;
  position: absolute;
  top: 40px;
  left: 80px;
  z-index: 45;
}

.contact-img2 {
  position: relative;
  z-index: 60;
  display: inline-block;
  margin: 5px 10px 0 4%;
}

.contact-btns {
  margin: 0 auto 0 11%;
  text-align: center;
}
.contact-btns li {
  float: left;
}

._contact {
  display: inline-block;
  border-radius: 5px;
  padding: 8px 50px 10px 20px;
  margin: 5px 5px 5px 0;
  font-size: 1.4em;
  min-height: 56px;
  line-height: 1em;
  /*text-align: left;*/
  float:left;
  position: relative;
}

._contact a {
  color:#fff;
  text-decoration: none; 
}

._contact.btn:before {
  width: 20px;
  height: 38px;
  top: 21px;
}

._contact.green {
  margin-left: 3%;
}
._contact.red {
  margin-left: 1%;
}
._contact.green:hover {
  background: #8bad49;
}
._contact.red:hover {
  background: #e0775f;
}
._contact.btn.green:before {
  background: url(../cmn_images/cmn_conBtn-arrow-contact.png);
}

._contact.btn.red:before {
  background: url(../cmn_images/cmn_conBtn-arrow-kifu.png);
}

._contact span {
  font-size: 14px;
  display: block;
}



/********************
ページトップへ
********************/

.pagetop {
  position: absolute;
  right: 5%;
  bottom: 160px;
  z-index: 50;
}
.pagetop:hover {
  bottom: 175px;
}


/********************
FOOTER
********************/

#footer {
  margin-top: 80px;
  background-color: #fff;
  position: relative;
  z-index: 100;
  min-height: 250px;
}

#footer .contents {
  margin: 0 auto;
}


.footer-logo {
  width: 37%;
  padding-top: 55px;
  min-height: 250px;
  text-align: center;
  float: left;
}

#footer ul {
  float: left;
  margin-top: 65px;
  margin-right: 2%;
  font-size: 12px;
}

#footer ul li {
  line-height: 1.8em;
}
#footer a {
  color: #434343;
  text-decoration: none;
}

#footer a i {
  color: #698f20;
  padding-right: 5px;
}

.btn-colist {
  margin-top: 10px;
}




/********************
サークル達
********************/

.side-left, .side-right {
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.side-left img, .side-right img {
  position: absolute;
}

.pt10{padding-top:10px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}
.mb30{margin-bottom:30px !important;}


.small-txt{font-size:8px;}


.p-first{
width:70%;
}
.r-box{float:right;
  padding-left:15px;
  padding-top:15px;
  padding-bottom:15px;}
	
.r-box img{
width:225px;
}

.cen{
  text-align:center;
}

.ticket a:link,
.ticket a:visited{
  color:#fff !important;
  display:block;
  width:300px;
  margin:0 auto;
  background:#FD8097;
  text-align:center;
  padding:10px 0;
  text-decoration:none;
  border-radius:10px;
}

.ticket a:active,
.ticket a:hover{
  color:#fff !important;
  display:block;
  width:300px;
  margin:0 auto;
  background:#CF4829;
  text-align:center;
  padding:10px 0;
  border-radius:10px;
}

.end {
  color:#fff !important;
  display:block;
  width:300px;
  margin:0 auto;
  background:#E2E2E2;
  text-align:center;
  padding:10px 0;
  text-decoration:none;
  border-radius:10px;
}

.redtxt{
  color:#E10003 !important;
}

.bluetxt{
  color:#1476D6 !important;}

.smalltxt{
  font-size:11px;
  padding:5px 0;
}