/*	12 COLUMN : RESPONSIVE GRID SYSTEM
	DEVELOPER : DENIS LEBLANC
	URL : http://responsive.gs
	VERSION : 3.0
	LICENSE : GPL & MIT */

/* 	SET ALL ELEMENTS TO BOX-SIZING : BORDER-BOX */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(/scripts/boxsizing.htc);
	/*	If you need support for IE7 and lower make
		sure the boxsizing.htc file is linked properly.
		More info here:  https://github.com/Schepp/box-sizing-polyfill */
}


/*	MAIN CONTAINER
	Set the width to whatever you want the width of your site to be. */
.container {
	max-width: 1000px;
	margin: 0 auto;
  position: relative;
  padding: 5px;
}


/*	SELF CLEARING FLOATS - CLEARFIX METHOD */
.container:after,
.row:after,
.col:after,
.clr:after,
.group:after {
	content: "";
	display: table;
	clear: both;
}

/* 	DEFAULT ROW STYLES
	Set bottom padding according to preference */
.row { padding-bottom: 0em;
}
.row_flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* DEFAULT COLUMN STYLES */
.col {
	display: block;
	float: left;
	width: 100%;
}

@media ( min-width : 1000px ) {

	.gutters .col {
		margin-left: 2%;
	}

	.gutters .col:first-child {
		margin-left: 0;
	}
}


/*	COLUMN WIDTH ON DISPLAYS +1000px
	You might need to play with media queries here to suite your design. */
@media ( min-width : 1000px ) {
	.span_1 { width: 8.33333333333%; }
	.span_2 { width: 16.6666666667%; }
	.span_3 { width: 25%; }
	.span_4 { width: 33.3333333333%; }
	.span_5 { width: 41.6666666667%; }
	.span_6 { width: 50%; }
	.span_7 { width: 58.3333333333%; }
	.span_8 { width: 66.6666666667%; }
	.span_9 { width: 75%; }
	.span_10 { width: 83.3333333333%; }
	.span_11 { width: 91.6666666667%; }
	.span_12 { width: 100%; }

	.gutters .span_1 { width: 6.5%; }
	.gutters .span_2 { width: 15.0%; }
	.gutters .span_3 { width: 23.5%; }
	.gutters .span_4 { width: 32.0%; }
	.gutters .span_5 { width: 40.5%; }
	.gutters .span_6 { width: 49.0%; }
	.gutters .span_7 { width: 57.5%; }
	.gutters .span_8 { width: 66.0%; }
	.gutters .span_9 { width: 74.5%; }
	.gutters .span_10 { width: 83.0%; }
	.gutters .span_11 { width: 91.5%; }
	.gutters .span_12 { width: 100%; }
}

/*base
------------------------------*/
html{color: #3d3d3d; font-size: .9em;}
a{color: #333; text-decoration: none;}

/*a:link{color: #3d3d3d; text-decoration: underline}
a:visited{color: #3d3d3d; text-decoration: underline}*/
a:hover{color: #d82481; text-decoration: underline}
a:action{color: #d82481; text-decoration: underline}
p{margin: 10px auto 0; line-height: 1.8em;}
p.txt-notice{font-size: .8em; text-align: center;}
p.txt-right{text-align: right;}
p.txt-center{text-align: center;}
.txt-color-orange{color: #f60;}
.txt-color-green{color: #8fc231;}
ul{list-style: none; margin: 0; padding: 0;}
a,area,button,input,label,select,summary,textarea{touch-action: manipulation;}
/*assets*/
img.img-centering{
  display: block;
  margin: 0 auto;
  object-fit: none;
}
hr{
  width: 300px;
  border: none;
  margin: 40px auto;
  border-top: 1px solid #ddd;
}
/*マーク付きリスト*/
.item-list-mark{list-style: disc inside; margin-left: 10px;}

/*見出し*/
h2{ font-size: 2em; margin:  0 auto 40px;}
@media ( max-width : 1000px ) {
  h2{ font-size: 1.5em; margin:  0 auto 20px;}
}
h4{ margin: 0 ; font-size: 1.3em;
}
/*リンク*/
a.link-white:link{color: #fff; text-decoration: none}
a.link-white:visited{color: #fff; text-decoration: none}
a.link-white:hover{color: #fff; text-decoration: underline}
a.link-white:action{color: #d82481; text-decoration: underline}

/*余白系*/
.indent-5{ text-indent:  5px;}
.p-10{ padding: 10px;}
.p-20{ padding: 20px;}
.pt-10{ padding-top: 10px;}
.pt-20{ padding-top: 20px;}
.pt-30{ padding-top: 30px;}
.pt-40{ padding-top: 40px;}
.pt-50{ padding-top: 50px;}

main .pl-10{ padding-left: 10px}
main .pl-20{ padding-left: 20px}
main .pl-30{ padding-left: 30px}
main .pl-40{ padding-left: 40px}

.mt-10{margin-top: 10px;}
.mt-20{margin-top: 20px;}
.mt-30{margin-top: 30px;}


.mb-10{margin-bottom: 10px;}
.mb-20{margin-bottom: 20px;}
.mb-30{margin-bottom: 30px;}
.mb-40{margin-bottom: 40px;}
.mb-50{margin-bottom: 50px;}
/*pagetop*/
p.button-returnTop{
  display: block;
  z-index: 100;
  font-size:  .65em;
  border: 2px solid #e7e7e7;
  background: #fff;
  border-radius: 5px;
  position: fixed;
  right: 10px;
  bottom: 5%;
  width: 50px;
  height: 50px;
  line-height: .3em;
  text-align:  center;
}
p.button-returnTop a{
  display:  block;
  text-decoration: none;
}
p.button-returnTop span{
  font-size: 3em;
  color: #8fc231;
}
p.button-returnTop a:hover{
  color: #3d3d3d;
}
p.button-returnTop:hover span{
  line-height:  25px;
}
p.button-returnTop{background:none;border:none;width:80px;height:100px;}
p.button-returnTop a{height:100%;}
p.button-returnTop span.ti-angle-up{background:url(/assets/images/cmn/pagetop.png) 0% 0%/cover;height:100%;display:block;}
p.button-returnTop span.ti-angle-up:before{content:"Page top";width:95%;font-size:.8rem;font-weight:bold;color:#333;}

@media ( max-width : 1000px ) {
	p.button-returnTop{width: 60px;height: 80px;font-size: 0.5em;}
	p.button-returnTop span.ti-angle-up:before{font-size: 0.6rem;}
}

/*module
------------------------------*/
/*btn base*/
a.button{text-decoration: none;}
.button {
  box-sizing: border-box;
  padding: 15px 5px;
  vertical-align: middle;
  position: relative;
  /* 1 */
  display: inline-flex;
/*  justify-content: center;*/
  align-items: center;
  transition: background-color 0.2s, border-radius 0.5s;
}
@media ( max-width : 1000px ) {
  .button {
  padding: 10px 5px;
  font-size: .8em;
}
}
.button span.ti-angle-right{
  display: inline-block;
  position: absolute;
  right: 10px;
  top:50%;
  transform: translateY(-50%);
  width:  20px;
  height: 20px;
  border-radius: 50%;
  background: #d82481;
  text-align: center;
  line-height: 20px;
  text-indent:  0em;
  font-size: .8em;
  color: #fff;
  vertical-align: middle;
}
@media ( max-width : 1000px ) {
  .list-nav-button .button span.ti-angle-right{
    /*right: -3px;
    top: 30%;
    width:  15px;
    height: 15px;
    line-height: 16px;*/
    display: none;

  }
}
.button span.icon-circle-large{
  width:  30px;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
}
/*default*/
.button-default{
  background: #fff;
  border: 1px solid #d2d2d2;
  text-align: left;
  text-indent: 10px;
}
/* Hover + Focus */
li:hover .button,
li:focus .button,
p:hover .button,
p:focus .button {
  background-color: #d82481;
  color: #FFF;
  outline: none;
  border-radius: 10px;
  transition: background-color 0.3s, border-radius 1s;
}
li:hover .button span,
li:focus .button span,
p:hover .button span,
p:focus .button span  {
  background:  #fff;
  color: #d82481;
  transition: background-color 0.3s, border-radius 1s;
}
/* OnClick + Active */
.button:active,
.uk-active > .uk-icon-button {
  background-color: #d82481;
  color: #fff;
}

/*bg white*/
.button-whiteBg{
  background: #fff;
}

/*bg gray*/
.button-grayBg{
background: #959595;
color: #fff;
text-align: center;
}
.button-grayBg:hover{
background: #d82481;
color: #fff;
border-radius: 10px;
}
/*ボタン各種サイズassets*/
.button-w300{ width:300px;}
.button-w400{ width:400px;}
.button-w640{width: 640px;}
@media ( max-width : 1000px ) {
  .button-w400{ width:80%;}
}
/*toB & toC gnav
------------------------------*/
ul.icon-nav-menu {
  display: flex;
  float: right;
  padding: 20px 0;
  font-size: .9em;
}
ul.icon-nav-menu li{ margin-right: 15px;}
ul.icon-nav-menu li.nav-icons{
  width:  30px;
  height: 30px;
  border-radius: 50%;
  background: #4b4b4b;
  text-align: center;
  line-height: 30px;
  text-indent:  0em;
  font-size: 1.4em;
  margin-top: 15px;
}
ul.icon-nav-menu li.nav-icons a{
  color: #fff;
  text-decoration: none;
  display:  block;
}
ul.icon-nav-menu li.nav-icons:hover{ transition: background-color 0.1s}
ul.icon-nav-menu li.icon-fb:hover{ background: #3b5998;}
ul.icon-nav-menu li.icon-youtube:hover{ background: #ff0000;}
ul.icon-nav-menu li.icon-contact:hover{ background: #d82481;}
ul.icon-nav-menu li a.button{
  font-weight:  bold;
  color: #fff;
}
ul.icon-nav-menu li.icon-tw a{font-size: .9em; padding-top: -5px;}
  ul.icon-nav-menu li.icon-tw:hover span{color: #fff;}
  ul.icon-nav-menu li.icon-tw:hover{background: #1DA0F1;}

/*ナビゲーション*/
.pc-gnav-wrap{
  background: #8fc231;
  position: relative;
}
.pc-gnav-wrap ul{
  display: flex;
  letter-spacing: .1em;
  position: static;
  padding: 0;
}
.pc-gnav-wrap ul li{padding: 10px 30px 10px 20px ;}

.pc-gnav-sub{
  position: absolute;
  background: #fff;
  height: auto;
  width:  100%;
  top: 45px;
  left: 0;
  z-index: 9;
  display:  none;
}
.pc-gnav-wrap ul ul{
  display : -webkit-box;     /* old Android */
  display : -webkit-flex;    /* Safari etc. */
  display : -ms-flexbox;     /* IE10        */
  display : flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap    : wrap;
  flex-wrap        : wrap;
  z-index: 10;
  background: #fff;
  padding-top: 10px;
  margin: 0 auto;
}
.pc-gnav-wrap ul ul li{
  width:  auto;
  margin: 0 30px 10px;
  padding: 0;
  letter-spacing: normal;
  font-size: .9em;
}
.pc-gnav-wrap ul ul li::before{
  font-family: FontAwesome;
  vertical-align: middle;
  content: '\f0da';
  color: #8fc231;
  margin-right: 5px;
}
.pc-gnav-wrap ul ul li a{ text-decoration: none;}


/*sp footer menu*/
footer .icon-nav-menu{
  display:  none;
  float: none;
  margin: 0 auto 20px;
  padding: 0 0 0 15px;
}
footer .icon-nav-menu li.nav-icons{
  width: 40px;
  height: 40px;
  font-size: 1.8em;
  line-height: 1.9em;
}

ul.footer-nav-sp{
  display: none;
  flex-wrap: wrap;
  border-top: 1px solid #959595;
  text-align: center;
  font-size: .7em;
}
ul.footer-nav-sp li.nav-topLayer{
  width: 50%;
  margin-left: -1px;
  border-left: 1px solid #959595;
  border-bottom: 1px solid #959595;
  margin: 0;
  padding: 15px 0;
  position: relative;
}
ul.footer-nav-sp li.nav-topLayer:hover,
ul.footer-nav-sp li.nav-topLayer:focus,
ul.footer-nav-sp li.nav-topLayer:active{
  color: #d82481;
  background: #eee;
}
ul.footer-nav-sp li.nav-topLayer a{
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}



/*List*/

ul.nav{
  width: 85%;
  border-top: 1px solid #e7e7e7;
}
ul.nav  li{
    border-bottom: 1px solid #e7e7e7;
  }
  ul.nav  a:link{
      text-decoration: none;
      display: block;
      padding: 20px 10px;
    }
  ul.nav  a:hover{
      background: #fafafa;
    }
  ul.nav  span{
      color: #8fc231;
      padding-right: 5px;
    }
    ul.nav .button-grayBg{
    color: #fff;
}
    ul.nav  a.button-grayBg:hover{
    background: #d82481;
    color: #fff;
    border-radius: 10px;
    }

/*sp*/
div.sp-nav-menu{
  display:  none;
}
.nav-button {
  display: none;
}
.nav-wrap.open {
  display: block;
}
.nav-wrap.close {
  display: none;
}
@media screen and (min-width: 1000px) {
  .nav-wrap {
    display: none !important;
  }
}

@media screen and (max-width: 1000px) {
/*toB & toC*/
.pc-gnav-wrap ul {
  font-size: .9em;
}
.pc-gnav-wrap ul li{
  margin-right: 10px;
}




@media screen and (max-width: 1000px) {

div.row{
  padding:0 10px;
}
ul.container{
  margin-left: 10px;
}
  /*toB & toC*/
  .pc-gnav-wrap ul {
    display:  none !important;
  }
header .icon-nav-menu{
    display:  none !important;
  }
footer .icon-nav-menu{
  display: flex;
}
footer ul.span_3{display:none;}
footer .footer-nav-sp{
  display: flex;
}
  div.sp-nav-menu{
    display:  block;
  }

  .nav-button {
    cursor: pointer;
  }
  .nav-wrap {
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    z-index: 10;
    background-color: rgba(255, 255, 255, 1);
    width: 110%;
    height: 100%;
    overflow: auto;
    overflow-x:  hidden;
    -webkit-overflow-scrolling: touch;
  }
    .nav-wrap .nav {
      height: 100%;
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
      display:  block;
      margin: 20px;
    }
    div.sp-nav-menu ul.nav{
      border-top: none;
      margin:  0 auto;
      width: 100%;
    }
    div.sp-nav-menu .nav li {
      display: block;
      width: 100%;
      padding: 10px;
    }
    div.sp-nav-menu .nav li:last-child{
      border-bottom: none;
    }
    div.sp-nav-menu .nav li p{
      cursor: pointer
    }

    div.sp-nav-menu .nav p{
      display: block;
      position: relative;
      width: 100%;
    }
    .nav-wrap .nav p{
      font-size: 1.1em;
      font-weight: 600;
    }

    div.sp-nav-menu .nav li ul{
    border-top: 1px solid #e7e7e7;
  }
  div.sp-nav-menu .nav li ul li{
    width: 100%;
    margin: 0;
  }
    div.sp-nav-menu .nav li ul li i{
      margin-right: 5px;
      color: #8fc231;
    }

    div.sp-nav-menu .nav li.sp-menu-button{
      border: none;
    }
    div.sp-nav-menu .nav li.sp-menu-button:hover{
      background: none;
    }
    div.sp-nav-menu .nav li.sp-menu-button .button-grayBg{
      width: 60%;
      margin:  20px auto;
    }

  /*メニューボタンのエフェクト*/
  .nav-button,
  .nav-button span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box;
  }
  .nav-button {
    z-index: 20;
    position: absolute;
    width: 40px;
    height: 36px;
    right: 10px;
    top: 30px;
  }
  .nav-button span {
    position: absolute;
    right: 0;
    width: 100%;
    height: 4px;
    border-radius: 4px;
  }
  div.sp-nav-menu img{
    margin: 20px;
  }
  
  @media ( max-width : 1000px ) {
    div.sp-nav-menu img{
    width: 70%;
  }
  }

  div.sp-nav-menu a.nav-button span{
    background-color: #fff;
  }
  div.sp-nav-menu a.nav-button-black span{
    background-color: #333 ;
  }
  div.sp-nav-menu a.active span{
    background-color: #333;
  }
  .nav-button span:nth-of-type(1) {
    top: 0;
  }
  .nav-button span:nth-of-type(2) {
    top: 16px;
  }
  .nav-button span:nth-of-type(3) {
    bottom: 0;
  }
  .nav-button.active span:nth-of-type(1) {
    -webkit-transform: translateY(16px) rotate(-45deg);
    transform: translateY(16px) rotate(-45deg);
  }
  .nav-button.active span:nth-of-type(2) {
    opacity: 0;
  }
  .nav-button.active span:nth-of-type(3) {
    -webkit-transform: translateY(-16px) rotate(45deg);
    transform: translateY(-16px) rotate(45deg);
  }

  .sp-centering{
    text-align: center;
  }
  /*footer*/
  footer{
    padding: 30px 0 !important;
  }
footer ul{
  display: block;
}
footer ul li{
  margin: 10px auto;
  text-align: center;
}
}}

.sab_ttl{
  background: #efe9d8;
  padding: 10px;
  font-size: 1.3rem;
  padding-left: 4.5rem;
  color: #5f861b;
  position: relative;
}
.sab_ttl::after{
position: absolute;
content: "";
left: 10px;
top: 50%;
transform: translateY(-50%);
background: url(/assets/images/biz/sab_ttl.png);
background-size: contain;
background-repeat: no-repeat;
width: 4rem;
height: 2.5rem;
}
.container .btn_pink{
  background: #d82481;
  border: 1px solid #d82481;
  padding: 10px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  padding-right: 2.5em;
  font-size: 120%;
  width: 100%;
  transition: none;
}
.container a.btn_pink span {
    background: #fff;
    color: #d82481;
}
.container .btn_pink:hover{
background-color: #fff;
border: 1px solid #d82481;;
color: #d82481;
transition: none;
}
.container a.btn_pink:hover span {
  background: #d82481;
  color: #fff;
}
section.container div p.p-20{ padding: 20px;}
.sp_only{
  display:none
  }
@media ( max-width : 1000px ) {
.sp_only{
  display: block;
}
}

/* 2306追加 */
@media ( min-width : 1000px ) {
	.span_3 { 
    width: 25%;
    padding-right: 26px;
  }
}