@charset "utf-8";

a{color: #fff; text-decoration:none; display: block; padding: 20px;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}
.header-right:hover, .button:hover{background: #ff0000}
h2{font-family: 'Righteous', cursive; font-size:40px; letter-spacing: 4px; margin-bottom: 10px}
iframe {
    vertical-align: bottom;
}

#top{
	margin: 0;
	background: #000;
	text-align: center
}

.col-box{
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between; }

.col2-3{width:66%;}
.col1-3{flex:1;}
.col1-3-1{width:32%;}
.col1-2{width:49%;}
.col1-4{width:23.5%;}
.col1-5{width:19.2%;}
.col1-8{width:11.625%;}
.col3-4{width:75%;}

.space-r-1{margin-right:1%;}

.space-r-2{margin-right:2%;}
.space-r-5{margin-right:5%;}

.mobi-none{display: inline;}
.pc-none{display: none;}

.p-r{position: relative;}
.foot{position: absolute;bottom:-100px; width: 100% ;}

header{display:flex;
border-bottom:solid 1px #fff; }
.header-left{
flex:1;
box-sizing:border-box;
color: #fff;
padding: 30px 0 0 30px ;
text-align: left;
}
.header-right{
width:20%;
color: #fff;
text-align: center;
background: red;
font-weight: 900;
box-sizing:border-box;
font-size: 30px
}

.main{
padding: 100px 0;
background: url(img/bg02.jpg)no-repeat;
background-size: 100% auto;
background-position: top center;
color: #fff;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size: 30px;
letter-spacing: 2px;
text-shadow:0px 0px 14px rgba(255,255,255,0.8), 0px 0px 4px rgba(255,255,255,1);
}

.main-img{width:240px; height:auto;}


.main h1{
padding: 50px 0 0 0;
font-size: 300%;
font-weight: 400;
letter-spacing: 2px;
line-height: 110%
}


.main-02{
padding: 0px 0 100px 0;
background: url(img/niku-logo.png)no-repeat;
background-size: 180px auto;
background-position: bottom right;
color: #fff;
font-size: 15px;
letter-spacing: 2px;
}

.main-02 p{
width: 800px;
margin: 0 auto;
text-align: left;
font-size: 12px
}

.button{
background: #F5A400;
color: #fff;
width: 300px;
margin: 20px auto;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
} 


.main-03{
background:#BDBEBE;
padding: 100px 0;
}

.grid, .grid02{
width: 800px;
margin: 0 auto;
}


.menber section h3, .menber section p{
padding: 10px;
box-sizing:border-box;
background: #fff;
margin: 0px;
}
.menber02 section h4, .premium{background: #d7c447}

.menber section p{
text-align: left;
margin-top: -5px;
margin-bottom: 0px;
}
.menber02{height: 350px; overflow: hidden;}
.business{font-size: 10px; padding-bottom: 10px!important}

.last{
padding-left:1em;
text-indent:-1em;
box-sizing:border-box;
}




.ribbon17-wrapper {
  display: block;
  position: relative;
  box-sizing: border-box;
}

.ribbon17-content {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 89px;
  height: 91px;
  overflow: hidden;
  }

.ribbon17 {
  display: inline-block;
  position: absolute;
  padding: 7px 0;
  left: -23px;
  top: 22px;
  width: 160px;
  text-align: center;
  font-size: 18px;
  line-height: 16px;
  background: #ffa520;
  color: #fff;
  letter-spacing: 0.05em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.ribbon17:before, .ribbon17:after {
  position: absolute;
  content: "";
  border-top: 4px solid #b2751b;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  bottom: -4px;
}

.ribbon17:before {
  left: 14px;
}

.ribbon17:after {
  right: 18px;
}



.ribbon9 {
  display: block;
  position: relative;
  height: 45px;
  
  text-align: center;
  box-sizing: border-box;
}
.ribbon9:before {/*左側のリボン端*/
  content: '';
  position: absolute;
  width: 10px;
  bottom: -10px;
  left: -35px;
  z-index: 1;
  border: 20px solid #F5A400;
  border-left-color: transparent;/*山形に切り抜き*/
}

.ribbon9:after {/*右側のリボン端*/
  content: '';
  position: absolute;
  width: 10px;
  bottom: -10px;
  right: -35px;
  z-index: 1;
  border: 20px solid #F5A400;
  border-right-color: transparent;/*山形に切り抜き*/
}

.ribbon9 h3 {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0 20px;
  line-height: 45px;
  font-size: 18px;
  color: #FFF;
  width: 95%;
  z-index: 99;
  background: #ffb621;/*真ん中の背景色*/
}
.ribbon9 h3:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 15px #b59139;/*左の折り返し部分*/
}
.ribbon9 h3:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-left: solid 15px #b59139;/*右の折り返し部分*/
}

.balloon4 {
  position: relative;
  margin: 2em 0 2em 40px;
  padding: 15px;
  background: #fff0c6;
  border-radius: 30px;
}

.balloon4:before {  
  content: "";
  position: absolute;
  left: -38px;
  width: 13px;
  height: 12px;
  bottom: 0;
  background: #fff0c6;
  border-radius: 50%;
}

.balloon4:after {
  content: "";
  position: absolute;
  left: -24px;
  width: 20px;
  height: 18px;
  bottom: 3px;
  background: #fff0c6;
  border-radius: 50%;
}
.balloon4 p {
  margin: 0; 
  padding: 0;
  font-size: 22px;
  color: #000
}







@media (max-width: 500px){
.header-left{
flex:1;
box-sizing:border-box;
color: #fff;
padding: 10px 0 0 30px ;
text-align: left;
}
.header-right{
width:35%;
font-size: 20px
}
.ribbon17-wrapper{margin-top: -20px}
.main{
background: url(img/bg.jpg)no-repeat;
background-size: 110% auto;
background-position: top center;
padding: 70px 0;
font-size: 20px;
letter-spacing: 2px;}
.main h1{padding: 50px 0 0 0; font-size: 400%;}
.main-img{width:100px; height:auto;}

.col-box{display:inline;}
.col1-3-1{width:100%;}
.col2-3{width:100%;}
.col1-2{width:100%;}

.space-r-2{margin-right:0%;}

.main-02 p{width: 100%;}
.grid{
width: 100%;
}
.grid02{
width: 95%;
}
iframe{margin-left: 1.5%!important; width: 95%}
.mobi-none{display: none;}
.pc-none{display: inline;}
.business{font-size: 10px; padding-bottom: 10px!important}
.menber02{height: 207px; overflow: visible;}
.foot{position: absolute;bottom:-50px; width: 100% ;}

}