@charset "utf-8";
@import url('../column.css');

nav.index .mokuji{
  background: #62a982;
  color: #fff;
  margin: 0;
}
nav.index .mokuji span{
  position: relative;
  }
nav.index .mokuji.toggle span:before{
  border-top-color: #fff;
}
nav.index .mokuji.toggle.active span:before{
  border-bottom-color: #fff;
}
nav.index ul{
  border: 1px solid #62a982;
  border-top-width: 0;
  border-radius: 0 0 5px 5px;
}
nav.index ul li{
  border-color: #62a982;
}
nav.index ul li:first-of-type{
  border: none;
}

nav.pageIndex{
  background: #eff6f2;
  margin: 2rem .5rem .75rem .5rem;
  padding: .75rem 0 1px 0;
  position: relative;
}
nav.pageIndex>div{
  position: relative;
}
nav.pageIndex>div span{
  background: #62a982;
  border-radius: 1rem;
  color: #fff;
  font-size: .9em;
  line-height: 1;
  padding: .5em;
  position: absolute;
  top: calc( -1em + -.75rem);
  left: calc(50% - 2.3em);
}
nav.pageIndex ul{
  list-style-type: none;
  margin: .5rem;
  padding: 0;
}
nav.pageIndex ul ul{
  margin: 0 0 0 1rem ;
}
  nav.pageIndex ul a{
  display: block;
  padding: .5rem .5rem .5rem 1.25rem;
  line-height: 1.3;
  position: relative;
}
nav.pageIndex ul a:before,
nav.pageIndex ul a:after{
  content: "";
  border: 5px solid transparent;
  border-left-color: #62a982;
  left: .5rem;
  top: calc(50% - 5px);
  position: absolute;
  z-index: 1;
}
nav.pageIndex ul a:after{
  border-left-color: #eff6f2;
  left: calc(.5rem - 2px);
  z-index: 2;
}

.ao h1.contentTitle{
  border: none;
  color: #62a982;
  padding: 0;
  margin: .75rem 5px;
}
.ao h1.contentTitle.first{
  background: url("../../../../../_webroot/img/page/newcolumn/ao/ttl_column_ao_h1_bg.png") center bottom / 25px ;
  text-align: center;
}
.ao h1.contentTitle.first img{
  max-width: 100%;
  }
.ao h1.contentTitle:not(.first){
  background: url("../../../../../_webroot/img/page/newcolumn/ao/ttl_column_ao_h1_bg.png") center top / 25px repeat-x; 
  border: 1px solid #62a982;
  border-bottom-width: 3px;
  text-align: left;
}
.ao h1.contentTitle:not(.first) img{
  width: calc(434px/2);
  height:  calc(50px/2);
}
.ao h1.contentTitle span{
  display: block;
  padding: .75rem;
  text-align: center;
}

.ao h2{
  border-bottom: 3px dotted #62a982;
  color: #62a982;
  font-size: 1.2em;
  line-height: 1.2;
  margin: 2rem .5rem .75rem;
  padding: 0 .25rem .25rem;
}
/*
.ao .first h2{
  text-align: center;
}
*/
.ao h3{
  border-left: 6px solid #62a982;
  color: #62a982;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.2;
  margin: 2rem .5rem .75rem .5rem;
  padding: 0 .5rem;
  }
.ao h4{
  color: #62a982;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.2;
  margin: 1rem .5rem;
  }
.ao h4:before{
  content: "◆ ";
  font-size: .8em;
}
.ao h5{
  color: #62a982;
  font-size: 1em;
  font-weight: bold;
  line-height: 1.2;
  margin: 1rem .5rem;
}
.ao b{
  font-weight: 400;
  background: rgba(253,255,150, .5);
}

ul{
  list-style-type: circle;
}

ul.pageLink{
  list-style-type: none;
  margin: .75rem 1rem;
  padding: 0; 
}
ul.pageLink a{
  background: rgba(98,169,130, .2);
  border-left: 2px solid #f77b28;
  color: #62a982;
  display: block;
  font-weight: bold;
  line-height: 1;
  padding: 1rem .75rem;
  position: relative;
}
ul.pageLink a:before{
  content: "";
  border: 6px solid transparent;
  border-left: 5px solid #f77b28;
  position: absolute;
  left: 0;
  top: calc( 50% - 6px )  
}
ul.pageLink a:after{
  content: "";
  border: 4px solid transparent;
  border-left: 4px solid #fff;
  position: absolute;
  left: -2px;
  top: calc( 50% - 4px )  
}
ul.pageLink li+li{
  margin-top: .5rem;
}
.ao dl{
  margin: 0 .75rem .75rem;
}
.ao dt{
  color: #62a982;
  font-weight: bold;
  margin-top:  .75rem;
}
.ao dd{
  margin-left: 0;
}
p.pageLinkMini{
  text-align: right;
}
p.pageLinkMini>a{
  border-bottom: none !important;
  color: #62a982;
  font-size: .9em;
  padding: 0 .25rem 0 .5rem;
  position: relative;
  text-decoration: none;
}
p.pageLinkMini>a:before{
  content: "";
  border: 5px solid transparent;
  border-left: 5px solid #62a982;
  left: 0;
  top: calc(50% - 5px);
  position: absolute;
}
.point{
  background: rgba(247,123,40, .2);
  border: 1px solid #f77b28;
  border-radius: 5px;
  margin: .75rem;
  overflow: hidden;
}
.point h3{
  background: rgba(247,123,40, .2);
  border-radius: 5px 5px 0 0;
  border-left: none;
  border-bottom: 1px dashed #f77b28;
  color: #f77b28;
  font-size: 1.1em;
  margin: 0;
  padding: .25rem;
  text-align: center;
}
.glossary{
  margin: .75rem;
}
.glossary dt{
  font-weight: bold;
  color: #62a982;
}
.glossary dt:before{
  content: "◆ ";
}
.glossary dd{
  margin-left: 1rem;
}
.glossary dd+dt{
  margin-top: .5rem;
}
.memopad{
  background: #fffae3;
  border: 1px dotted rgba(247,123,40, .5);
  border-radius: .5rem;
  overflow: hidden;
  margin: .75rem;
  padding-bottom: .75rem;
}
.memopad .title{
  background: #fde5d4;
  border-radius: 1rem;
  color: #f77b28;
  display: inline-block;
  font-size: 1.1em;
  font-weight: bold;
  margin: .75rem;
  padding: .25rem 1rem;
  position: relative;
  
}
.memopad .title:before{
  content: "";
  border: .5rem solid transparent;
  border-top: .75rem solid #fde5d4;
  bottom: -1rem;
  font-size: 1em;
  left: 1rem;
  position: absolute;
}
.memopad p{
  margin: .75rem 1.25rem;
}
ol.ktkn{
  font-size: .8em;
  list-style-type : katakana;
  margin: .75rem 1.25rem;
  padding-left: 2rem;
}


.patterns ul.current{
  list-style-type: none;
  padding: 0;
  margin: .75rem .75rem 2rem;
}
.patterns ul.current li{
  background: #fde5d4;
  border: 2px dotted #f77b28;
  font-weight: bold;
  line-height: 1.3;
  padding: .5rem 0;
  position: relative;
  text-align: center;
}
.patterns ul.current li:after{
  content: "";
  border: 10px solid transparent;
  border-top: 8px solid #f77b28;
  position: absolute;
  bottom: -1.6rem;
  left: calc(50% - 10px);
}
.patterns ul.current li:last-of-type:after{
  content: none;
}
.patterns ul.current li:nth-last-of-type(3){
  background: #f77b28;
  color: #fff;
  }
.patterns ul.current li:last-of-type{
  background: #f33;
  border: none;
  color: #fff;
  }
.patterns ul.current li+li{
  margin-top: 1rem;
}
.patterns ul.current li span{
  font-size: .8em;
  font-weight: 400;
}
.patterns ul.current li span.fukidashi01,
.patterns ul.current li span.fukidashi02{
  background: #f77b28;
  border-radius: 50%;
  bottom: .25rem;
  color: #fff;
  left: -.5rem;
  line-height: 1.2;
  width: 5em;
  padding: .5rem .75rem;
  position: absolute;
  z-index: 2;
}
.patterns ul.current li span.fukidashi02{
  width: 6em;
  padding: 1rem .75rem;
}
.patterns ul.current li span.fukidashi01:after,
.patterns ul.current li span.fukidashi02:after{
  border: 5px solid transparent;
  border-left: 10px solid #f77b28;
  content: "";
  right: -10px;
  bottom: calc(50% - 13px);
  position: absolute;
  transform: rotate(20deg);
  z-index: 1;
}
.patterns ul.current .passfukidashi{
  display: block;
  padding-left: calc( 5em + 1.5rem + .5rem );
}
.participate{
  margin: .75rem;
  border: 3px solid #62a982;
}
.participate h4{
  background: #62a982;
  color: #fff;
  margin: 0 0 .75rem;
  text-align: center;
  padding: .25rem 0;
}
.participate h5.toggle:after{
  display: inline-block;
  content: "";
  border: 5px solid transparent;
  border-top: 5px solid #62a982;
  top: 3px;
  position: relative;
  left: 3px;
}
.participate h5.toggle + div{
  display: none;
  margin: 0 .75rem;
  font-size: .9em;
}
.participate h5.toggle + div p{
  margin: 0;
}
.selectionPattern h4{
  border: 3px solid #62a982;
  margin: 2rem .75rem;  
  text-align: center;
  position: relative;
  padding: .25rem 0;
}
.participate h4:before,
.selectionPattern h4:before{
  content: none;
}
.selectionPattern h4:nth-last-of-type(2){background: #f77b28;color: #fff; border:none; }
.selectionPattern h4:last-of-type{background: #f33;color: #fff; border:none;}
.selectionPattern h5{
  margin: .5rem;
}
.selectionPattern>div{
  display: flex;
  justify-content: space-between;
  margin: 2rem .75rem;
  position: relative;
}
.selectionPattern>div:after,
.selectionPattern h4:after{
  content: "";
  border: 16px solid transparent;
  border-top: 10px solid #f77b28;
  left: calc(50% - 15px);
  position: absolute;
  top: -1.4rem;
}
.selectionPattern h4.start{
  margin-bottom: 1rem;
}
.selectionPattern h4+p{
  margin: 1rem .75rem;
}
.selectionPattern>div>div{
  background: #fde5d4;
  border: 1px dashed #f77b28;
  width: 48.5%;
  text-align: center;
}
.selectionPattern ol{
  font-size: .85em;
  list-style-type: none;
  padding: .25rem;
}
.selectionPattern p{
  font-size: .85em;
  margin: 0 .5rem;
}
.selectionPattern li{
  position: relative;
}
.selectionPattern li+li{
  margin-top: 1rem;
}
.selectionPattern li+li:before{
  content: "";
  border: 7px solid transparent;
  border-top: 7px solid #f77b28;
  top: -.75rem;
  left: calc(50% - 7px);
  position: absolute;
}
.selectionPattern li span{
  font-size: .9em;
}

.kotsuList{
  margin: .75rem 1rem;
  list-style-type: none;
  padding-left: 0;
}
.kotsuList li+li{
  margin-top: .5rem;
}
.kotsuList a{
  color: #62a982;
  position: relative;
  padding-left: .75rem;
}
.kotsuList a:before{
  content: "";
  border: 5px solid transparent;
  border-left: 5px solid #62a982;
  display: block;
  position: absolute;
  left: 0;
  top: calc(50% - 5px);
}

.cardList{
  list-style-type: none;
  margin: 0 .5rem .75rem .5rem;
  padding: 0;
  
}
.cardList li{
  border: 3px solid #efefef;
  border-radius: 3px;
  margin-top: .75rem;
  padding: .25rem .5rem;
}
.cardList.current li+li,
.exPoint li+li{
  margin-top: 1rem;
  position: relative;
}
.cardList.current li+li:before,
.exPoint li+li:before{
  content: "";
  border: 8px solid transparent;
  border-top: 7px solid #f77b28;
  top: -.9rem;
  left: calc(50% - 8px);
  position: absolute;
}
.cardList span{
  border-bottom: 1px dashed #999;
  display: block;
  margin-bottom: .5rem;
  padding: .25rem 0;
  text-align: center;
}

.exPoint{
  border: 1px solid #bbb;
  list-style-type: none;
  margin: 1.5rem .75rem .75rem;
  padding: 1rem .5rem .75rem .5rem;
  position: relative;
}
.exPoint:before{
  background: #fff;
  content: "例)";
  color: #666;
  display: block;
  padding: .25rem .5rem;
  position: absolute;
  left: .5rem;
  line-height: 1;
  top: -.75rem;
}
.exPoint span{
  color: #f77b28;
  font-size: .8em;
}
.exPoint span:before{
  content: "point";
  border-radius: 1rem;
  background: #fde5d4;
  font-weight: bold;
  padding: 0 .5rem;
  margin-right: .25rem;
}
.cardBox h5{
  background: rgba(98,169,130, .2);
  border-radius: 5px;
  color: rgba(98,169,130, 1);
  padding: .25rem .5rem;
}
.cardBox .cell{}
p.interviewType{
  font-weight: bold;
  margin-left: 1rem;
}
.knack03-01 .cell div{
  text-align: center;
}
.knack03-01 .cell div p{
  margin: 0;
  font-weight: bold;
}
.knack03-01 .cell div p:last-of-type{
  background: #ccc;
  display: inline-block;
  padding: 0 .5rem;
}

.ao table.subject{
  margin: .75rem;
  width: calc(100% - 1.5rem);
}
.ao table.subject caption{
  font-size: 1.2em;
}
.ao table.subject th{
  width: 7em;
}

dl.qaBox{
  margin: .75rem;
}
dl.qaBox dt{
  color: #62a982;
  font-weight: bold;
  margin: 2rem 0 0 0;
}
dl.qaBox dt:before,
dl.qaBox dd:before{
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  margin-right: 3px;
  padding: 0 .5rem;    
}
dl.qaBox dt:before{
  background: #62a982;
  content: "Q";
}
dl.qaBox dd{
  margin: .5rem 0 0 0;
}
dl.qaBox dd:before{
  background: #f77b28;
  content: "A";
  left: 0.04em;
}

table.currentOfJobHunting tr:first-child th{
  background: #62a982;
  border: none;
  color: #fff;
  font-weight: 400;
}
table.currentOfJobHunting th{
  border-bottom: 1px dashed #ccc;
  color: #62a982;
  position: relative;
  white-space: nowrap;
}
table.currentOfJobHunting td{
  border-bottom: 1px dashed #ccc;
  width: 46%;
}
/*
table.currentOfJobHunting th.month:before{
  content: "";
  width: 2em;
  height: 1.5em;
  background: #ccc;
  position: absolute;
  z-index: -1;
  left: calc( 50% - 1em);
  top: calc( 50% - .75em);
}
*/
table.currentOfJobHunting td p{
  line-height: 1.5;
  font-size: .9em;
}
table.currentOfJobHunting td b{
  border-radius: 1rem;
  color: #fff;
  display: inline-block;
  font-size: .8em;
  padding:0 .5rem .1rem;
}
table.currentOfJobHunting td .hss{
  font-size: 1.1em;
}
table.currentOfJobHunting td .hw b{
  background: #393;
}
table.currentOfJobHunting td .cp b{
  background: #963;
}
table.currentOfJobHunting td .hs b{
  background: #369;
}
table.currentOfJobHunting td .hss b{
  background: #c69;
}

.underLine{
  text-decoration: wavy underline #bbb;
}