/***************************************
Color Scheme
07913A		main
E7F3EB		sub
FF6726		accent
FFF1EB	background
***************************************/
body {font-size: 100%; padding-bottom: 60px;}

/***************************************
Tag Level
***************************************/
h1 { font-size: 120%;}
h2 { font-size: 115%; }
h3 { font-size: 110%; }
h4 { font-size: 105%; }
h5 { font-size: 100%; }
h6 { font-size: 100%; }

/***************************************
Layout
***************************************/
#wapper {width: 92%; margin: 0 auto;}

/***************************************
Header
***************************************/
header {width: 92%; margin: 0 auto; padding-top: 5px;}
header #logo {width:100%; margin: 5px 0 20px 0; text-align: center;}
header #logo img {width:100%; max-width: 240px; height: auto; margin: 0 auto;}

header div#action-info {width: 100%; text-align: left;}
header div#action-info ul {margin: 0 0 10px 0;}
header div#action-info li { margin-bottom: 5px; }
header div#action-info #search-area form.flex {display: flex; justify-content: flex-start; margin-bottom: 20px;}

.budget {width:100%;}

/***************************************
Main Contents
***************************************/
main#column1{width: 100%;}
main#column2{width: 100%;}

/***************************************
ASide
***************************************/
aside {width:100%;}
aside .aside-box a.flex div {display: inline-block; width: 30%; margin-right: 7%; vertical-align: top;}
aside .aside-box a.flex div img {width: 100%;}
aside .aside-box a.flex p {display: inline-block; width: 60%; margin: 0; font-size: 90%;}

/***************************************
Footer
***************************************/
footer {text-align: center;　font-size:90%;}

footer p#go-to-top {margin-bottom: 0;}
footer p#go-to-top a {margin-bottom: 0px;}

footer ul {width: 100%; margin: 0 auto 20px auto;}
footer ul li {margin: 0; padding: 0; display: inline-block; width: 48%;}
footer ul li {white-space: nowrap; word-wrap: break-word; word-break: keep-all;}
footer ul li:nth-child(odd) {margin-left: 2%;}
footer ul li:nth-child(even) {margin-right: 2%;}
footer ul li:first-child {width: 100%;}
footer ul li a {
width: 100%;
display: block;
text-align: left;
border-bottom: 1px dotted #ccc;
padding:15px 10px;
margin:0 0 0 0;
box-sizing: border-box;
white-space: normal;
}

footer #secretariat {padding: 30px 5% 10px 5%;	margin-bottom: 0;}
footer #secretariat.flex div:first-child {margin-bottom: 30px; text-align: center;}
footer #secretariat.flex div:last-child {text-align: center;}
footer #secretariat.flex div:last-child p {margin-bottom: 20px;}
footer #secretariat.flex div:last-child img {text-align: right; max-width: 222px; width: 100%; height: auto;}

footer #links {display: none;}

footer address.copyright {
padding: 20px 0 20px 0;
margin-bottom: 0;
font-style: normal;
font-size: 70%;
}

footer ul#footer-menu {
background-color: #07913A	;
display: block;
width: 100%;
position: fixed;
left: 0px;
bottom: 0px;
z-index: 100;
text-align: center;
padding: 4px 4px;
margin-bottom: 0;
height: 60px;
box-sizing: border-box;
}

footer #footer-menu li {margin: 0 10px 0 0; width: auto;} /*5*/
footer #footer-menu li {margin: 0 30px 0 0; width: auto;} /*4*/
footer #footer-menu li:last-child {margin-right: 0;}
footer #footer-menu li a {color: #E7F3EB; text-decoration: none; padding: 4px 8px; border: none; white-space: nowrap;}

footer #footer-menu li i {font-size: 180%; display: block; margin-right: 0; margin-bottom: 4px; text-align: center;}
footer #footer-menu li span {font-size: 80%; display: block; text-align: center;}

/***************************************
Parts
***************************************/
.flex {display: block; margin-bottom: 20px;}
.half {width: 100%;}
.inner {width: 100%; margin: 0 auto;}
.pc-none {display: inline;}
.sp-none {display: none;}

.buttonbox div {width: 100%;  text-align: center;}
.buttonbox div:first-child {width: 80%; margin: 0 auto 20px auto;}
.buttonbox div:last-child {width: 80%; margin: 0 auto;}


/***************************************
Accordion List.
***************************************/
.title{
	pointer-events: all;
	cursor: pointer;
	padding-left:1.6em; text-indent:-1.6em;
	border-bottom: 2px solid #07913A;
	padding-bottom: 10px;
	text-align: left;
	font-size: 110%;
	margin-bottom: 10px;
}

.ac {
border-bottom: none;
padding-bottom: 0px;
margin-bottom: 0px;
}

.ac:last-child {	margin-bottom: 30px;}

.title:before {	content: "\f0fe "; font-family: FontAwesome; margin-right: 10px; font-size: 110%; color:#07913A	;}
.title.active:before {	content: "\f146 "; font-family: FontAwesome; margin-right: 10px; font-size: 110%; color:#07913A	; }
.toggle {margin-bottom: 20px;}
.toggle{display: none;}

/*News*/
ul#news {margin-left: 0;}
ul#news li {padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dotted #ccc;}
ul#news li span:first-child {margin: 0 0 10px 0; display: block;}
ul#news li span:last-child {margin-left: 0px; display: block;}

/***************************************
Home (Top Page)
***************************************/
.flex.wrap.element-column3 { margin-bottom: 0;}
.flex.wrap.element-column3 div:nth-child(1),
.flex.wrap.element-column3 div:nth-child(2),
.flex.wrap.element-column3 div:nth-child(4),
.flex.wrap.element-column3 div:nth-child(5),
.flex.wrap.element-column3 div:nth-child(7),
.flex.wrap.element-column3 div:nth-child(8),
.flex.wrap.element-column3 div:nth-child(10),
.flex.wrap.element-column3 div:nth-child(11),
.flex.wrap.element-column3 div:nth-child(13),
.flex.wrap.element-column3 div:nth-child(15),
.flex.wrap.element-column3 div:nth-child(16),
.flex.wrap.element-column3 div:nth-child(17) {width: 100%; margin-right: 0px;}

.flex.wrap.element-column3 div:nth-child(3),
.flex.wrap.element-column3 div:nth-child(6),
.flex.wrap.element-column3 div:nth-child(9),
.flex.wrap.element-column3 div:nth-child(12),
.flex.wrap.element-column3 div:nth-child(15),
.flex.wrap.element-column3 div:nth-child(18) {width: 100%;}

.flex.wrap.element-column3 div div:first-child {text-align: center;}
.flex.wrap.element-column3 div div img {object-fit:cover; width: 72vw; height: 54vw; margin:0 auto; margin-bottom: 10px; border: 5px solid #E7F3EB;}
.flex.wrap.element-column3 div p {margin-left: 10%;margin-right: 10%;}


/***************************************
Feature
***************************************/
section.feature-box {margin-bottom: 0;}
section.feature-box h2.flex {display: flex;}
section.feature-box h2 div:first-child {}
section.feature-box h2 div:last-child {}

section.feature-box .photo-text-area div:first-child {width: 100%; text-align: center;}
section.feature-box .photo-text-area div:first-child img {width: 80%; max-width: 300px;}
section.feature-box .photo-text-area div:last-child {width: 100%;}

div#special .item,
div#special .company {margin-left: 10%;}
section.whatisbs-box {margin-bottom: 30px;}
div.whatisbs {width: 100%; margin: 10px auto;}

#topcontrol {display: none;}


.budget{
	display: none;
}

div#special .rightimage {
    width: 100%;
   	padding: 10px;
}
div#special .leftimage {
    width: 100%;
   	padding: 10px;
}

.advertise-box{
	width: 90%;
	border: solid 3px #07913A;
    border-radius: 8px;
    padding: 10px 10px;
    margin-bottom: 10px;
}
.advertise-box h2{
	text-align: center;
	padding: 5px 10px;
}
.advertise-box button{
	width: 40%;
	margin-bottom: 10px;
	padding: 10px 10px;
}
.topbanner{
	position: relative;
    background-color: #EEEEEE;
    text-align: center;
    margin-bottom: 10px;
}
.topbanner img{
	width: auto;
    max-width: 80%;
    margin: 10px 10px 10px 10px;
}

.footbanner{
	position: relative;
    background-color: #EEEEEE;
    text-align: center;
    margin-bottom: 10px;
}
.footbanner img{
	width: auto;
    max-width: 80%;
    margin: 10px 10px 10px 10px;
}

.topbanner p.prdisplay,.footbanner p.prdisplay{
	margin-right: 10%;
}
.infeed{
	position: relative;
	 margin-bottom: 10px;
}



section.company-area{
border: 1px solid #ddd;
margin-bottom: 10px;
}

section.company-area div div:first-child {width: 80%;margin: 20px auto;}
section.company-area div div:last-child {width: 80%;margin: 20px auto;}
#search-area form div.checkbox {width: 90%;}

.prdisplay2 {margin-left: 10%;}

/*slider*/

.slider {
  height: 60vw;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.slider__nav {
  width: 20vw;
  height: 15vw;
  margin: 10px 0px;
  /*border-radius: 10px;*/
  z-index: 10;
  /*outline: 6px solid #ccc;*/
  outline-offset: -6px;
  box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.slider__nav:checked {
  -webkit-animation: check 0.4s linear forwards;
          animation: check 0.4s linear forwards;
}
.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
  left: 0%;
}
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
  left: -100vw;
}
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
  left: -200vw;
}
.slider__nav:checked:nth-of-type(4) ~ .slider__inner {
  left: -300vw;
}
.slider__nav:checked:nth-of-type(5) ~ .slider__inner {
  left: -400vw;
}
.slider__nav:checked:nth-of-type(6) ~ .slider__inner {
  left: -500vw;
}
.slider__nav:checked:nth-of-type(7) ~ .slider__inner {
  left: -600vw;
}
.slider__nav:checked:nth-of-type(8) ~ .slider__inner {
  left: -700vw;
}
.slider__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 500vw;
  height: 100vw;
  -webkit-transition: left 0.4s;
  transition: left 0.4s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
}
.slider__contents {
  height: 100vw;
  padding: 1rem;
  padding-bottom: 20vw;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.slider__image {
  font-size: 2.7rem;
      color: #2196F3;
}
.slider__caption {
  font-weight: 500;
  margin: 2rem 0 1rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;

}
.slider__txt {
  color: #999;
  /*margin-bottom: 3rem;*/
  max-width: 70vw;
}

@-webkit-keyframes check {
  50% {
    outline-color: #333;
    box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
  }
  100% {
    outline-color: #333;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  }
}

@keyframes check {
  50% {
    outline-color: #333;
    box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
  }
  100% {
    outline-color: #333;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  }
}