@charset "UTF-8";

#column .gnav-list li:nth-of-type(7) a::after{
  transform: scale(1, 1);
}
#column .gnav-list .gnav-sub ul li:nth-of-type(7) a::after{
  transform: scale(0, 1);
}
#column .gnav-list .gnav-sub ul li:nth-of-type(7) a:hover::after{
  transform: scale(1, 1);
}
@media screen and (max-width:767px) { 
  #column .gnav-list li:nth-of-type(7) a::after{
    transform: scale(0, 0);
  }
}

/* -- detail -- */

.wrapper-column-detail{
  display: flex;
}
.wrapper-column-detail .column-main{
  margin-right: 5%;
  text-align: left;
  width: calc( 100% - 280px );
}
.wrapper-column-detail .column-main h1{
  border-bottom: 1px solid #ccc;
  color: #0e214e;
  font-size: 2.8rem;
  letter-spacing: 0;
  line-height: 1.4em;
  font-weight: 700;
  margin-bottom: 50px;
  padding-bottom: 30px;
}
.wrapper-column-detail .column-main .contents{
  margin-bottom: 80px;
}
.wrapper-column-detail .column-main .contents h2{
  color: #0e214e;
  font-size: 2.6rem;
  letter-spacing: 0;
  line-height: 1.4em;
  margin-bottom: 20px;
}
.wrapper-column-detail .column-main .contents h3{
  color: #0e214e;
  border-left: 2px solid #0e214e;
  font-size: 2.0rem;
  letter-spacing: 0;
  line-height: 1.4em;
  margin-bottom: 20px;
  padding: 2px 0 2px 15px;
}
.wrapper-column-detail .column-main .contents h4 {
  font-size: 1.7rem;
  margin-bottom: 10px;
}
.wrapper-column-detail .column-main .contents p{
  font-size: 1.6rem;
  line-height: 2.0em;
  margin-bottom: 1.5em;
}
.wrapper-column-detail .column-main .contents a{
  color: #0e214e;
  font-weight: bold;
  outline: none;
  text-decoration:underline;
  transition: .3s;
}
.wrapper-column-detail .column-main .contents a:hover{
  color: #0e214e;
  outline: none;
  text-decoration:none;
}
.wrapper-column-detail .column-main .contents figure{
  margin: 0 auto;
  text-align: center;
  max-width: 100%;
}
.wrapper-column-detail .column-main .contents figure img{
  height: 100%;
  max-width: 100%;
}
.wrapper-column-detail .column-main .contents figure figcaption{
  font-size: 1.4rem;
  line-height: 1.4em;
  margin: 15px 0 0;
}
.wrapper-column-detail .column-main .contents ul,
.wrapper-column-detail .column-main .contents ol{
  margin: 0 0 2em 1.7em;
  padding: 0;
}
.wrapper-column-detail .column-main .contents ul li,
.wrapper-column-detail .column-main .contents ol li{
  font-size: 1.6rem;
  line-height: 1.8em;
  margin: 0 0 10px 0;
  padding: 0;
}
.wrapper-column-detail .column-main .contents ul li:last-child,
.wrapper-column-detail .column-main .contents ol li:last-child{
  margin: 0;
}
.wrapper-column-detail .column-main .recommend{
  background: #e3eafa;
  margin-bottom: 60px;
  padding: 35px 3% 30px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper-column-detail .column-main .recommend div{
  background: #fff;
  border: 2px solid #0e214e;
  font-size: 1.4rem;
  line-height: 1em;
  padding: 10px 2em;
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
}
.wrapper-column-detail .column-main .recommend p{
  color: #0e214e;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4em;
}
.wrapper-column-detail .column-main .recommend p a{
  text-decoration: underline;
}
.wrapper-column-detail .column-main .recommend p a:hover{
  text-decoration: none;
}
.wrapper-column-detail .column-main .sns-share{
  border: 1px solid #ccc;
  padding:40px 3%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper-column-detail .column-main .sns-share div{
  font-size: 1.6rem;
  line-height: 1em;
  margin-right: 40px;
}
.wrapper-column-detail .column-main .sns-share ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.wrapper-column-detail .column-main .sns-share ul li{
  margin: 0 20px 0 0;
  padding: 0;
  width: 40px;
}
.wrapper-column-detail .column-main .sns-share ul li:last-child{
  margin-right: 0;
}
.wrapper-column-detail .column-main .sns-share ul li img{
  transition: .3s;
  width: 100%;
}
.wrapper-column-detail .column-main .sns-share ul li:hover img{
  opacity: .7;
}
.wrapper-column-detail aside{
  width: 280px;
  position: -webkit-sticky;
  position: sticky;
  top: 90px;
  align-self: flex-start;
}
.wrapper-column-detail aside h2{
  border-bottom: 3px solid #0e214e;
  color: #0e214e;
  font-size: 2.0rem;
  letter-spacing: 0;
  line-height: 1em;
  margin-bottom: 0;
  padding-bottom: 15px;
}
.wrapper-column-detail aside ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.wrapper-column-detail aside ul li{
  border-bottom: 1px solid #ccc;
  font-size: 1.5rem;
  line-height: 1.4em;
  margin: 0;
  padding: 0;
}
.wrapper-column-detail aside ul li a{
  display: block;
  padding: 15px 3%;
  text-decoration: none;
  transition: .3s;
}
.wrapper-column-detail aside ul li a:hover{
  background: #e3eafa;
}
.wrapper-column-detail aside ul li a span{
  font-size: 1.3rem;
  margin-left: 3px;
}
@media screen and (max-width:900px) { 
  .wrapper-column-detail{
    flex-wrap: wrap;
  }
  .wrapper-column-detail .column-main{
    margin-right: 0;
    margin-bottom : 70px;
    width: 100%;
  }
.wrapper-column-detail .column-main .recommend div{
  padding: 10px 1em;
  text-align: center;
  width: 60%;
}
  .wrapper-column-detail .column-main .sns-share{
    padding: 30px 3%;
    flex-wrap: wrap;
    text-align: center;
  }
  .wrapper-column-detail .column-main .sns-share div{
    font-size: 1.6rem;
    line-height: 1em;
    margin-right: 0;
    margin-bottom: 25px;
    width: 100%;
  }
  .wrapper-column-detail .column-main .sns-share ul{
    justify-content: center;
    width: 100%;
  }
  .wrapper-column-detail aside{
    width: 100%;
    position: static;
  }
  .wrapper-column-detail aside h2{
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    color: #333;
    font-family:"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN W3",HiraKakuProN-W3,"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","游ゴシック体","Yu Gothic",YuGothic,Osaka,'メイリオ',Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-size: 1.7rem;
    margin-bottom: 0;
    padding: 15px 3%;
    position: relative;
  }
  .wrapper-column-detail aside h2:after{
    content: "";
    border-color: #333;  
    border-style: solid;
    border-width: 1px 1px 0 0;
    display: inline-block;
    height: 12px;
    border-color: #333;  
    border-style: solid;
    border-width: 1px 1px 0 0;
    transform: rotate(135deg);
    transition: .3s;
    width: 12px;
    position: absolute;
    right: 3%;
    top: 12px;
  }
  .wrapper-column-detail aside h2.close:after{
    transform: rotate(-45deg);
    top: 18px;
  }
  .wrapper-column-detail aside ul{
    border: 1px solid #ccc;
    border-radius: 0 0 3px 3px;
    display: none;
  }
  .wrapper-column-detail aside ul li:last-child{
    border: none;
  }
  .wrapper-column-detail aside ul li a{
    padding: 20px 3%;
  }
  .wrapper-column-detail aside ul li a:hover{
    background: #ede4d3;
  }
  .wrapper-column-detail aside ul li a span{
    font-size: 1.3rem;
    margin-left: 3px;
  }
}

/*組み合わせ*/
.wrapper-column-detail .column-main .contents p+ul,
.wrapper-column-detail .column-main .contents p+ol,
.wrapper-column-detail .column-main .contents p+h2,
.wrapper-column-detail .column-main .contents p+h3,
.wrapper-column-detail .column-main .contents figure+h2,
.wrapper-column-detail .column-main .contents figure+p,
.wrapper-column-detail .column-main .contents figure+ul,
.wrapper-column-detail .column-main .contents figure+ol,
.wrapper-column-detail .column-main .contents ul+h2,
.wrapper-column-detail .column-main .contents ol+h2,
.wrapper-column-detail .column-main .contents h2+ul,
.wrapper-column-detail .column-main .contents h2+ol{
  margin-top: 2.0em;
}
.wrapper-column-detail .column-main .contents p+h3,
.wrapper-column-detail .column-main .contents figure+h3,
.wrapper-column-detail .column-main .contents ul+h3,
.wrapper-column-detail .column-main .contents ol+h3,
.wrapper-column-detail .column-main .contents h3+ul,
.wrapper-column-detail .column-main .contents h3+ol{
  margin-top: 1.5em;
}