@charset "utf-8";
/* CSS Document */

.ec-layoutRole{
transition:transform 0.5s !important;
background:none;
}

article.experience{
background-image: url("../images/taiken/pic_bg.svg");
background-size: 1200px auto;
background-position: center top;
background-repeat: repeat-y;
}
article.experience .mv p.five{
display: inline-block;
color: #743E00;
font-size: 3rem;
font-weight: bold;
transform: rotate(-15deg);
margin-left: 5em;
}
article.experience .mv h2{
font-size:6rem;
text-align: center;
color: #428400;
font-weight: bold;
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       3px  3px 1px #ffffff,
      -3px  3px 1px #ffffff,
       3px -3px 1px #ffffff,
      -3px -3px 1px #ffffff,
       3px  0px 1px #ffffff,
       0px  3px 1px #ffffff,
      -3px  0px 1px #ffffff,
       0px -3px 1px #ffffff;        /* 文字の影 */
}
article.experience .mv p.cat{
font-size:4rem;
text-align: center;
color: #428400;
font-weight: bold;
  letter-spacing : 2px;                /* 文字間 */
  text-shadow    : 
       3px  3px 1px #ffffff,
      -3px  3px 1px #ffffff,
       3px -3px 1px #ffffff,
      -3px -3px 1px #ffffff,
       3px  0px 1px #ffffff,
       0px  3px 1px #ffffff,
      -3px  0px 1px #ffffff,
       0px -3px 1px #ffffff;        /* 文字の影 */
}
article.experience .mv .tobtn{
text-align: center;
position: relative;
padding: 2em 0;
}
article.experience .mv .tobtn a.gbtn{
width: 300px;
height: 40px;
font-size: 2rem;
font-weight: bold;
color: #fff;
background-color: #428400;
display: flex;
  justify-content: center;
  align-items: center;
margin: 0 auto;
border-radius: 1em;
border: 1px solid #428400;
}
article.experience .mv .tobtn a.gbtn:hover{
color:#428400;
background-color:  #fff;
opacity: 1;
}

article.experience .mv .tobtn p.fuki{
text-align: center;
display: flex;
  justify-content: center;
  align-items: center;
  width:240px;
  height: 130px;
  background-image: url("../images/taiken/pic_fuki.svg");
  background-size:100% auto;
  background-repeat: no-repeat;
  padding-top: 1em;
  position: absolute;
  top:-90px;
  right:12%;
}
article.experience .mv{
background-color:transparent;
min-height: inherit;
height: auto;
}
article.experience .mv p.und{
width:500px;
display:block;
margin: 1em auto;
}
article.experience section{
padding:2vw 0;
}

article.experience .course h2{
text-align: center;
font-weight: bold;
color: #428400;
}
article.experience .course table{
background-color: #fff;
width: 600px;
display:table;
margin: 1em auto;
border-collapse:collapse;
border-spacing:0;
empty-cells:show;
}
article.experience .course table th,
article.experience .course table td{
border: 1px solid #ccc;
padding: 2px 0.5em;
text-align:center;
font-size: 1.8rem;
}
article.experience .course table th{
background-color: #ddd;
font-weight: bold;
}
article.experience .course table td:nth-of-type(1){
text-align: left;
color: #743E00;
font-weight: bold;
}

article.experience .nagare h2{
font-size: 3rem;
text-align: center;
color: #428400;
font-weight: bold;
margin-bottom:1.5em;
}
article.experience .nagare h2 strong{
padding: 2px 1.5em;
background-color: #ddd;
border-radius: 1em;
}
article.experience .nagare ul{
display: flex;
  align-items:stretch;
justify-content:space-between;
width: 80%;
margin: 1em auto;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  counter-reset: count 0;
}
article.experience .nagare ul li{
position: relative;
width: 48%;
background-color: #fff;
margin-bottom: 4%;
padding: 1.5em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 2px solid #428400;
border-radius: 1em;
	display:flex;
	justify-content:flex-start;
	align-items: center;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      z-index: 5;
}
article.experience .nagare ul li:before{
width:2em;
height:2em;
font-size:2.4rem;
display: flex;
  justify-content: center;
  align-items: center;
background-color: #E6D3BC;
border-radius: 1em;
color: #428400;
font-weight: bold;
position: absolute;
left:-1em;
top: -1em;
z-index: 10;
  content: counter(count);
  counter-increment: count 1;
}

article.experience .nagare ul li .pic{
width: 100%;
height: auto;
overflow: hidden;
}
article.experience .nagare ul li .pic img{
width: 100%;
height: auto;
}
article.experience .nagare .under{
width: 70%;
	display:flex;
	justify-content:flex-start;
	align-items: center;	
    margin: 1em auto;
}
article.experience .nagare .under .pic{
margin-right: 1.5em;
}
article.experience .nagare .under .text{
text-align: center;
font-size: 1.8rem;
font-weight: bold;
color: #428400;
}
article.experience .nagare .under .text .indm{
font-size: 1.6rem;
font-weight: normal;
margin-top: 1em;
}
article.experience #toform h2{
color: #fff;
font-weight: bold;
text-align: center;
font-size: 2rem;
padding: 0.25em 0;
background-color: #428400;
margin-bottom: 2em;
margin-top: 1em;
}

article.experience #toform form{
padding:2em 0;
}

article.experience #toform table{
width: 600px;
display:table;
margin: 1em auto;
border-collapse:collapse;
border-spacing:0;
empty-cells:show;
}
article.experience #toform table td{
padding:0.5em;
font-size: 1.6rem;
min-width: 10em;
}
article.experience #toform table td i{
background-color: #B90003;
font-size: 1rem;
display: inline-block;
color: #fff;
padding: 0 0.5em;
margin-left: 1em;
}
article.experience #toform table td p{
margin: 0.5em 0;
}
article.experience #toform table td p label{
cursor: pointer;
margin-right: 1em;
}
article.experience #toform input[type=text],
article.experience #toform textarea{
width: 100%;
padding:0.25em 0.5em;
font-size: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
article.experience #toform textarea{
min-height: 7em;
}
article.experience #toform .submit{
text-align: center;
}
article.experience #toform .submit button{
background-color: #428400;
border: 1px solid #428400;
color: #fff;
font-size: 1.8rem;
padding:0.25em 3em;
border-radius: 1em;
}
article.experience #toform .submit button:hover{
background-color:#fff;
color: #428400;
}


/*---------------------------------------------*
* width 1000px
*----------------------------------------------*/
@media screen and (max-width:1000px) {
article.experience .mv p.five {
  font-size:2rem;
  margin-left:1em;
}
article.experience .mv h2 {
  font-size:4rem;
}
article.experience .mv p.cat {
  font-size:3rem;
}
article.experience .mv .tobtn p.fuki {
  width: 200px;
  height: 110px;
  position: absolute;
  top: -90px;
  right:1em;
}
article.experience .nagare ul {
  width: 90%;
  }
article.experience .nagare .under {
  width:90%;
}
article.experience .nagare .under .pic {
width: 25%;
  margin-right: 1em;
}
article.experience .nagare .under .pic img{
width: 100%;
height: auto;
}


}
/* width 1000px end --------------------------------------------*/

/*---------------------------------------------*
* width 768px
*----------------------------------------------*/
@media screen and (max-width:768px) {
}
/* width 768px end --------------------------------------------*/

/*---------------------------------------------*
* width 640px
*----------------------------------------------*/
@media screen and (max-width:640px) {

article.experience {
  background-image: url("../images/taiken/pic_bg.svg");
  background-size:100% auto;
  background-position: center top;
  background-repeat: repeat-y;
}

article.experience .mv p.five {
  font-size:1.6rem;
}
article.experience .mv h2 {
  font-size:3.6rem;
}
article.experience .mv p.cat {
  font-size:2.4rem;
}
article.experience .mv .tobtn p.fuki {
display: none;
}
article.experience .mv .tobtn a.gbtn {
  width:240px;
  height:30px;
  font-size:1.8rem;
}
article.experience .mv p.und {
  width:96%;
  display: block;
  margin: 1em auto;
}
article.experience .mv p.und br{
display: none;
}

article.experience .course h2 {
width: 96%;
  text-align:left;
  margin: 1em auto;
}
article.experience .course table {
  width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
article.experience .course table th,
article.experience .course table td{
width: 100%;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 1.6rem;
text-align:right;
padding:0.25em 4em;
border: none;
line-height: 1;
}
article.experience .course table th{
text-align: left;
}
article.experience .course table th:nth-of-type(2),
article.experience .course table th:nth-of-type(3){
text-align:right;
}

article.experience .course table td:nth-of-type(1) {
border-top: 1px solid #ddd;
padding: 0.5em 1em 0 3em;
}

article.experience .nagare h2 {
  font-size:1.8rem;
}
article.experience .nagare ul{
justify-content:center;
}
article.experience .nagare ul li {
  position: relative;
  width:90%;
  margin-bottom: 2em;
}

article.experience .nagare .under {
  width:90%;
    -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
article.experience .nagare .under .pic {
  width:50%;
  margin:1em auto;
}
article.experience .nagare .under .text {
  text-align:left;
  font-size: 1.6rem;
}
article.experience #toform table {
  width:96%;
}
article.experience #toform table td{
display: block;
width: 100%;
padding:0 0.5em;
}
article.experience #toform table td:nth-of-type(1){
padding:1em 0.5em 0 0.5em;
}

}
/* width 640px end --------------------------------------------*/

/*---------------------------------------------*
* width 480px
*----------------------------------------------*/
@media screen and (max-width:480px) {
}
/* width 480px end --------------------------------------------*/

/*---------------------------------------------*
* width 375px
*----------------------------------------------*/
@media screen and (max-width:375px) {
}