@charset "shift_jis";
/* CSS Document */

#Head{}
body.noScroll{  }

/*h2 common*/
h2.common{
    margin-bottom: 20px;
}
h2.common .sub{font-size: 1.4rem;letter-spacing: 1px;}
h2.common .main{
  font-size: 1.2rem;
  letter-spacing: 1px;
  }
h2.common .main strong{font-size: 2rem;font-weight: normal;}

h2.common .main:before,
h2.common .main:after {
  width: 15px;
  height: 15px;
}

h2.common .main:before {
}

h2.common .main:after {
}

/*----------------------------------------------------MainVisual*/
#MainVisual{
    background-image: url("/kokunai/theme/premium/asset/images/index/mainvisual_new_sp.jpg");
    padding-bottom: 15px;
    padding-top: 30px;
  }
#MainVisual:before{}
#MainVisual p.dept{
    width: 100%;
    position: relative;
    padding: 0;
    box-sizing: border-box;
    left: auto;
    top: auto;
    padding: 10px 0;
    font-size: 12px;
}

#MainVisual h2{
    padding: 10px;
}
#MainVisual h2 img{max-width: 230px;}
#MainVisual h2 .main{
    font-size: 22px;
    letter-spacing: 0;
}
#MainVisual h2 .sub{
    font-size: 14px;
}
#MainVisual h2 .main span,
#MainVisual h2 .sub span{}
#MainVisual h2 .deco{
    display: none;
}

/*----------------------------------------------------News*/
#News{
    margin-left: 0;
    display: block;
    width: 90%;
    margin: 0 auto;
    padding: 15px 0;
}
#News h2{
    display: flex;
    justify-content: center;
    padding-bottom: 15px;
}
#News h2 .main{}
#News h2 .sub{
    color: #a56c4b;
    font-weight: normal;
    font-size: 16px;
    padding-left: 10px;
}
#News .Inner{padding-left: 0;border: none;width: 100%;}
#News .Entry{display: block;position: relative;border-top: 1px solid #ccc;padding-top: 7px;}
#News .Entry + .Entry{
    margin-top: 15px;
    padding-top: 10px;
}
#News .Entry .date{font-size: 1.4rem;padding-bottom: 3px;display: flex;align-items: center;white-space: nowrap;}
#News .Entry .date:after{content:"";width: 100%;height: 1px;background-color: #ccc;margin-left: 5px;}
#News .Entry dl{display: flex;flex-wrap: wrap;align-items: baseline;justify-content: end;width: 100%;}
#News .Entry dl + dl{
    margin-top: 5px;
}
#News .Entry dt{
    width: 7em;
    text-align: center;
    font-size: 12px;
    background-color: #e8e1d8;
    color: #a56c4b;
    position: absolute;
    top: 10px;
    right: 0;
}
#News .Entry dd{
    width: 100%;
    padding-left: 0;
}
#News .Entry dd + dd{}

#News .Entry.bn{
    margin-top: 10px;
    display: block;
}
#News .Entry.bn ul{
    width: 100%;
    display: block;
}
#News .Entry.bn li{
    width: 100%;
}
#News .Entry.bn li + li{}
#News .Entry.bn a:hover{ opacity: 0.7}

/*----------------------------------------------------About*/
#About{padding-bottom: 30px;padding-top: 4px;}
#About #Common{width: 90%;flex-wrap: wrap;padding-top: 30px;}
#About #Common .box{padding: 0;width: 100%;flex-grow: inherit;}
#About #Common .box.photo{width: 47%;position: relative;z-index: 2;}
#About #Common .box:nth-of-type(1){
    order: 1;
}
#About #Common .box:nth-of-type(2){
    order: 3;
}
#About #Common .box:nth-of-type(3){
    order: 2;
    margin-top: 40px;
}

#About #Common .box h2{width: 23%;padding-top: 23px;padding-left: 5px;}
#About #Common .box dl{padding-right: 5px;padding-bottom: 38px;width: 76%;}
#About #Common .box dt{font-size: 80px;color: rgba(202,179,138,0.4);top: -1.5em;left: -7px;z-index: 1;}
#About #Common .box dd{font-size: 1.4rem;width: 16em;}
#About #Common .box dd span{
    display: inline;
}


#About #Qua{width: 90%;margin-top: 25px;}
#About #Qua:after{content:"";background: -moz-linear-gradient(left, rgba(163,152,53,0) 0%, rgba(163,152,53,0.6) 20%, rgba(163,152,53,1) 50%, rgba(163,152,53,0.6) 80%, rgba(163,152,53,0) 100%);background: -webkit-linear-gradient(left, rgba(163,152,53,0) 0%,rgba(163,152,53,0.6) 20%,rgba(163,152,53,1) 50%,rgba(163,152,53,0.6) 80%,rgba(163,152,53,0) 100%);background: linear-gradient(to right, rgba(163,152,53,0) 0%,rgba(163,152,53,0.6) 20%,rgba(163,152,53,1) 50%,rgba(163,152,53,0.6) 80%,rgba(163,152,53,0) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a39835', endColorstr='#00a39835',GradientType=1 );width: 100%;height: 2px;display: block;margin-top: 10px;}
#About #Qua h2{margin-bottom: 10px;}
#About #Qua h2:before,#About #Qua h2:after{}
#About #Qua h2:before{}
#About #Qua h2:after{}
#About #Qua h2 span{padding: 0 2px;font-size: 1.4rem;}
#About #Qua h2 strong{font-size: 1.6rem;font-weight: normal;}
#About #Qua .Inner{
    flex-wrap: wrap;
}
#About #Qua .box{width: 100%;}
#About #Qua .box h3{margin-bottom: 0px;display: flex;justify-content: center;}
#About #Qua .box h3 .sub{padding-bottom:10px;white-space: nowrap;padding-right: 7px;}
#About #Qua .box h3 .sub strong{color:#A39835;font-size: 15px;font-weight: normal;}
#About #Qua .box h3 .logo{width: 120px;}
#About #Qua .box ul{margin-bottom: 10px;}
#About #Qua .box li{}
#About #Qua .box li.icon{}
#About #Qua .box li.txt{font-size: 14px;}
#About #Qua .box .atte{font-size:12px;padding: 5px;margin-bottom: 15px;background-color: #fff;}
#About #Qua .box.photo{width: 47%;margin-bottom: 10px;}
#About #Qua .box.photo dl{
    /* display: flex; */
    /* align-items: center; */
}
#About #Qua .box.photo dt{position:relative;width: 100%;}
#About #Qua .box.photo dd{text-align:left;position:relative;font-size: 12px;line-height:1.4;text-align: center;padding-left: 0;}
#About #Qua .box.photo dd:before{
    content: none;
}
#About #Qua .box.photo dd strong{color:#A39835;font-size: 16px;font-weight: normal;}
#About #Qua .box.photo:nth-child(odd){}
#About #Qua .box.photo:nth-child(odd) dl{display: block;}
#About #Qua .box.photo:nth-child(odd) dt{}
#About #Qua .box.photo:nth-child(odd) dd{
    padding: 0;
    padding-right: 6px;
}
#About #Qua .box.photo:nth-child(odd) dd:before{background:-moz-linear-gradient(top,rgba(163,152,53,0) 0%,rgba(163,152,53,0.5) 23%,rgba(163,152,53,0.8) 50%,rgba(163,152,53,1) 100%);background:-webkit-linear-gradient(top,rgba(163,152,53,0) 0%,rgba(163,152,53,0.5) 23%,rgba(163,152,53,0.8) 50%,rgba(163,152,53,1) 100%);background:linear-gradient(to bottom,rgba(163,152,53,0) 0%,rgba(163,152,53,0.5) 23%,rgba(163,152,53,0.8) 50%,rgba(163,152,53,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a39835',endColorstr='#a39835',GradientType=0);top:0;padding:0}
#About #Qua .box.photo:nth-of-type(3){
    /* margin-top: -10px; */
}
#About #Qua .box.photo:nth-of-type(4){
    width: 47%;
}

@media screen and (min-width:1550px){
#About #Qua{width: 1230px;margin-top: 20px;}
#About #Qua h2{}
#About #Qua h2:before,#About #Qua h2:after{}
#About #Qua h2:before{}
#About #Qua h2:after{}
#About #Qua h2 span{
    font-size: 20px;
}
#About #Qua h2 strong{
    font-size: 32px;
}
#About #Qua .Inner{}
#About #Qua .box{flex-grow: 1;padding-right: 40px;}
#About #Qua .box h3{}
#About #Qua .box h3 .sub{
    font-size: 18px;
}
#About #Qua .box h3 .sub strong{
    font-size: 26px;
}
#About #Qua .box h3 .logo{
    width: 230px;
}
#About #Qua .box ul{}
#About #Qua .box li{}
#About #Qua .box li.icon{}
#About #Qua .box li.txt{
    font-size: 22px;
}
#About #Qua .box .atte{font-size: 14px;}
#About #Qua .box.photo{
    width: 250px;
}
#About #Qua .box.photo dl{}
#About #Qua .box.photo dt{
    width: 230px;
}
#About #Qua .box.photo dd{
    font-size: 18px;
}
#About #Qua .box.photo dd:before{}
#About #Qua .box.photo dd strong{
    font-size: 25px;
}
#About #Qua .box.photo:nth-child(odd){}
#About #Qua .box.photo:nth-child(odd) dl{}
#About #Qua .box.photo:nth-child(odd) dt{}
#About #Qua .box.photo:nth-child(odd) dd{}
#About #Qua .box.photo:nth-child(odd) dd:before{}
#About #Qua .box.photo:nth-of-type(3){}
#About #Qua .box.photo:nth-of-type(4){
    width: 230px;
}
}

#About #Goto{
    margin-top: 20px;
    width: 90%;
}
#About #Goto .logo{
    width: 80px;
}
#About #Goto .Inner{}
#About #Goto .Inner{
	position: relative;
	background: #F5F6F7;
	border: 3px solid #50aa36;
	border-radius: 4px;
	margin-left: 15px;
	flex: 1;
}
#About #Goto .Inner:after,
#About #Goto .Inner:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}




#About #Goto .Inner:after {
	border-color: rgba(245, 246, 247, 0);
	border-right-color: #F5F6F7;
	border-width: 10px;
	margin-top: -10px;
}
#About #Goto .Inner:before {
	border-color: rgba(80, 170, 54, 0);
	border-right-color: #50aa36;
	border-width: 14px;
	margin-top: -14px;
}
#About #Goto dl{
    color: #50aa36;
    padding: 5px 9px;
}
#About #Goto dt{
    padding-bottom: 1px;
    font-weight: bold;
}
#About #Goto dd{
}
#About #Goto dd span{
    font-size: 13px;
}

/*-----------------------------------------------Recom*/
#Recom{
    width: 100%;
    padding-top: 30px;
    margin-bottom: 0;
}
/*#Recom img{ width: 100%;}*/
#Recom .btn{
    width: 90%;
}
#Recom .btn a{
	padding: 10px 20px;
	border-radius: 3px;
}
#Recom .btn a span{
	margin-top: 6px;
}
/*------------------------------------------------------Topic*/
#Topic{
    padding: 30px 0 10px 0;
}
#Topic h2{}
#Topic .Inner{
    width: 90%;
    display: block;
}
#Topic .Inner .Entry{
    margin-bottom: 30px;
    width: 100%;
}
#Topic .Inner .Entry .img{
}
#Topic .Inner .Entry .img a:hover{
    opacity: 0.7;
}
#Topic .Inner .Entry dl{}
#Topic .Inner .Entry dt{
}
#Topic .Inner .Entry dd{}


/*----------------------------------------------------------OtherItem*/
#OtherItem{
    width: 90%;
    padding: 15px 10px;
    margin-bottom: 0;
}
#OtherItem h2{
    text-align: center;
    font-size: 16px;
    color: #a56c4b;
    padding-bottom: 10px;
}
#OtherItem ul{
    margin: 0 10px;
    display: block;
}
#OtherItem li{
    margin-bottom: 10px;
    margin: 0;
    margin-bottom: 15px;
}
#OtherItem li + li{}
#OtherItem li a{position: relative;text-decoration: none;display: block;padding: 20px;font-size: 1.4rem;background-color: #fff;text-align: center;border-radius: 3px;box-shadow: 0 3px 0px #caa691;}
#OtherItem li a:after{position: absolute;right: 8px;font-size: 18px;top:50%;margin-top:-0.5em;content:"\f105";font-family:FontAwesome;line-height: 1;}
#OtherItem li a:hover{
    background-color: #caa691;
    color: #fff;
