@charset "utf-8";
/* ************************************************
 *
 * frame
 *
************************************************* */
.key-visual{position:relative;margin:0 auto}
h2{text-align:center;margin-bottom:40px;font-weight:300}

/* ************************************************
 *
 * key-visual
 *
************************************************* */
.key-visual .slick-dotted.slick-slider{margin:0}
.left-arrow, .right-arrow{
  width: 50px;
  height: 70px;
  position: absolute;
  bottom: 50%;
  transform: translateY(50%);
  background: rgba(57, 181, 74, .6);
  cursor:pointer
}
.left-arrow{
  left:0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.right-arrow{
  right:0;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.left-arrow>span::before, .right-arrow>span::after{
  width: 17px;
  height: 17px;
  position: absolute;
  bottom: 50%;
  border-width: 2px
}
.left-arrow>span::before{transform: translateY(50%) rotate(-135deg);left: 20px;}
.right-arrow>span::after{right:20px;transform: translateY(50%) rotate(45deg);}
.slick-dots{bottom:58px}

.slick-dots li button:before {color: #ddd;font-size: 16px;opacity:1;}
.slick-dots li.slick-active button:before {color: #39b54a;}
.pause-area{
  width:40px;height:14px;
  border: 1px solid #999;
  background: #fff;
  position: absolute;
  bottom: 62px;
  right: 50%;
  transform: translateX(50%);
  margin-right: 45px;
  cursor:pointer
}
.pause-area:hover{opacity:.7}
.pause-btn{
  width: 6px;
  height: 8px;
  border: 2px solid #999;
  border-top: transparent;
  border-bottom: transparent;
  display: block;
  text-align: center;
  margin: 2px auto 0;
}
.pause-area[data-btn="false"]>.pause-btn{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 4px;
  border-color: transparent transparent transparent #999;
}

/*------ button-radius ------*/
.button-radius-wrap{position: relative;}
.button-radius-wrap>.padding-control-10{position:absolute;width: 100%;bottom: -50px;}
.button-radius{
  width:32%;
  position:relative;
  text-align: center;
  font-size: 1.7rem;
  line-height: 1.4;
  border-radius: 99em;
  background: #fff
}
.button-radius>span>span, .button-radius>a>span{margin-left: 20px}
.button-radius>a, .button-radius>span{
  display: -webkit-box; /*Android4.3*/
  display: -moz-box;    /*Firefox21*/
  display: -ms-flexbox; /*IE10*/
  display: -webkit-flex; /*PC-Safari,iOS8.4*/
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
    border-radius: 99em;
  border: 2px solid #000;
  height:100px;
  background: #fff
}
.button-radius.green>span, .button-radius.green>a{color: #51c861;border-color: #51c861;}
.button-radius.blue>span, .button-radius.blue>a{color: #5facf3;border-color: #5facf3;}
.button-radius.yellow>span, .button-radius.yellow>a{color: #f7931e;border-color: #f7931e;}


/* ************************************************
 *
 * block-all
 *
************************************************* */
.block-all{padding-top:20px;margin-bottom: 40px;}
.block-all-inner{position:relative;margin-bottom:50px}
.slide-content-e .slick-slide {margin-left: 10px;margin-right: 10px}
.slide-content{position: relative}
.content-arrow-left , .content-arrow-right{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background:#39b54a;
  position: absolute;
  bottom:50%;transform:translateY(50%);
  cursor: pointer;
}
.content-arrow-left{left:-6.6%} .content-arrow-right{right:-6.6%}
.content-arrow-left>span::before, .content-arrow-right>span::after{
  position: absolute;
  bottom: 50%;
  width: 18px;
  height: 18px;
  border-width: 2px;
}
.content-arrow-left>span::before{left: 25px;transform: translateY(50%) rotate(-135deg);}
.content-arrow-right>span::after{right:25px;transform: translateY(50%) rotate(45deg);}
.content-arrow-left:hover , .content-arrow-right:hover,
.content-arrow-left:focus , .content-arrow-right:focus{opacity:.7}

/*------ keyword-block ------*/
.keyword-block{padding: 0 0.981%;margin-bottom:40px}.keyword-block form{width:50%;padding-right: 6%}
.keyword-block >.keyword-box{width: 50%;position: relative;}
.keyword-box>h3{font-size: 2rem;border-left: 2px solid #f7931e;padding-left: .45em;margin-bottom:20px}
.keyword-block form .keyword-box>h3{margin-bottom:30px}
.keyword-box .all-keyword{
  border: 1px solid #f7931e;
  background: #fff;
  font-size: 1.4rem;
  padding: 5px 27px 5px 15px;
  position: absolute;
  top: 0;
  right: 0;
}
.keyword-box .all-keyword>span::after{margin-left:.8em;width: 9px;height: 9px}
.keyword-button>.label{max-width:160px;width: 30.8%;height: 70px;font-size: 18px;border-radius: 5px}
.keyword-button>.label>span{display:table-cell;vertical-align: middle;line-height:1.4}
.keyword-button>.label:last-of-type{margin:0}

/* ************************************************
 *
 * notification
 *
************************************************* */
.notify-row{flex-wrap:wrap}
.notification {background: #f8f3ec url(../img/top/bg_block_01_pc.png) repeat-x 0 50px;padding: 170px 0 80px}
.notify-row>li {
  border-left: 2px solid #8bd673;
  padding-left: 30px;
  display: inline-block;
  width: 48%;
}
.notify-row>li:nth-child(odd){margin-right:4%}
.notify-row>li:nth-child(n + 3){margin-top: 60px}
.notify-row>li>a {display: block}
.notify-time{font-size:1.8rem}
.notify-content{font-size:1.6rem;line-height:1.6}

/* ************************************************
 *
 * banner-block
 *
************************************************* */
.banner-block{background: #f8f3ec;padding: 60px 0}
.banner-block ul{flex-wrap:wrap;}
.banner-block ul>li{width:31%}
.banner-block ul>li:nth-child(n + 4){margin-top: 35px}


@media print, screen and (max-width: 1024px){
/* ************************************************
 *
 * key-visual 1024
 *
************************************************* */
/*------ button-radius ------*/
.button-radius-wrap>.padding-control-10{bottom:-40px}
.button-radius{font-size:14px}
.button-radius>img{width:17%;max-width:70px}
.button-radius img{padding-left:5px}
.button-radius>span>span, .button-radius>a>span{margin:0;padding:0 5px}
.button-radius>span, .button-radius>a{width:100%;height:80px}

/* ************************************************
 *
 * block-all 1024
 *
************************************************* */
.content-arrow-left , .content-arrow-right{width: 44px;height: 44px;}
.content-arrow-right{right: -6%;}.content-arrow-left{left:-6%;}
.content-arrow-right>span::after{right:17px;}.content-arrow-left>span::before{left:17px;}

/*------ keyword-block ------*/
.keyword-block{padding: 0 1.1%}
.keyword-box>h3{font-size: 1.8rem}
.keyword-box .all-keyword{
  position: relative;
  margin: 20px 0 0 auto;
  float: right;
}
.keyword-button>.block-label{font-size: 16px}
}

@media screen and (max-width: 767px){
h2{margin-bottom:35px}
/* ************************************************
 *
 * key-visual 767
 *
************************************************* */
.left-arrow, .right-arrow{display:none;}
.slick-dots{bottom: -30px;text-indent: 0;}
.pause-area{display:none}

/*------ button-radius ------*/
.button-radius-wrap{margin:65px auto 50px;overflow: visible;}
.button-radius-wrap>.padding-control-10{position:static;padding: 0 13.97%;}
.button-radius-wrap>.padding-control-10>.fx{display:block}
.button-radius{width:100%;height:auto;font-size:15px;max-width: 300px;margin: 0 auto;}
.button-radius img{padding-left:0;margin-left: 20px;}
.button-radius>span>span, .button-radius>a>span{padding:0 18px 0 0}
.button-radius>span, .button-radius>a{margin:0;height:86px;  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;}
.button-radius:not(:first-of-type){margin-top: 20px}
.button-radius:first-of-type img{width:48px}
.button-radius:nth-of-type(2) img{width:50px}
.button-radius:last-of-type img{width:56px}

/* ************************************************
 *
 * block-all 767
 *
************************************************* */
.block-all{padding-top:0;margin-bottom:60px}
.padding-control-column-03{padding: 0 5.333%;}
.block-all-inner{padding: 0 6.9%;margin-bottom:35px}
.content-arrow-left, .content-arrow-right{width:30px;height:30px;}
.content-arrow-left {left: -2.5%;}.content-arrow-right {right: -2.5%;}
.content-arrow-left>span::before, .content-arrow-right>span::after{width:10px;height:10px;}
.content-arrow-right>span::after{right:12px;}.content-arrow-left>span::before{left:12px}
.block-content .label{font-size:12px}

/*------ keyword-block ------*/
.keyword-block{padding: 0;display:block;margin-bottom:50px}
.keyword-block >.keyword-box{width: 100%;overflow: hidden}.keyword-block form{width:100%;padding-right: 0;margin-bottom:40px}
.keyword-box>h3{font-size: 1.6rem;margin-bottom:18px}
.keyword-block form .keyword-box>h3{margin-bottom:18px}
.all-keyword:hover {color: #f7931e;background:#fff}
.keyword-box .all-keyword:hover>span::after{border-color:#f7931e}
.keyword-button>.label{font-size: 14px;height: 60px;}




/* ************************************************
 *
 * notification 767
 *
************************************************* */
.notification {
    background: #f8f3ec url(../img/top/bg_block_01_sp.png) repeat-x 0 25px;
    padding: 130px 0 60px;
}
.notify-row>li{padding-left: 1.3em;width: 100%}
.notify-row>li:nth-child(odd){margin-right:0}
.notify-row>li:nth-child(n + 3){margin-top:0}
.notify-row>li:not(:first-child){margin-top: 40px}
.notify-row>li>a {display: block}
.notify-row .notify-time{margin-bottom:8px;display:block}
.notify-row .notify-content{font-size:1.4rem}

/* ************************************************
 *
 * news-block 767
 *
************************************************* */
.news-block{margin: 60px auto}
.news-bt{position:static;max-width:225px;margin: 0 auto;width:auto}
.news-bt .size-SS{max-width:none}
.news-bt .icon-list{height:50px;padding:0;background-position:top 18px left 23px;}
.news-bt .icon-list>span{padding-left: 0em;}

/* ************************************************
 *
 * banner-block 767
 *
************************************************* */
.banner-block{padding: 60px 0}
.banner-block ul>li{width:47.3885%}
.banner-block ul>li:nth-child(n + 4){margin-top: 0}
.banner-block ul>li:nth-child(n + 3){margin-top:17px}
}

@media screen and (max-width: 359px){
/* ************************************************
 *
 * key-visual 359
 *
************************************************* */
/*------ button-radius ------*/
.button-radius>span>span, .button-radius>a>span{padding: 0 10px 0 0;}
.button-radius{height:80px;font-size:12px}
}
