@charset "utf-8";
@layer assets {

  /*____________________________________________________________________________

  SITE TITLE: BOEM - assets
  TITLE: PC フッター

  UPDATED:2021.1
  ____________________________________________________________________________*/
  .displayMode{
    clear: both;
    text-align:center;
  }
  .footer{
    clear: both;
    padding-top:50px;
    margin-top: 50px;
    border-top: #444 1px solid;
  }
  .footer__contents{
    margin:0 auto;
    width:1024px;
  }
  .footer__nav{
    display:flex;
    justify-content:space-between;
    margin-bottom:50px;
  }
  /* カラムごとの調整 */
  .footer__nav__inner:nth-of-type(1){
    width:310px;
  }
  .footer__nav__inner:nth-of-type(2){
    width:350px;
  }
  .footer__nav__inner:nth-of-type(3){
    width:270px;
  }
  .footer__nav__inner:nth-of-type(1) .footer__nav__list{
    column-count: 2;
  }
  .footer__nav__inner:nth-of-type(2){
    column-count: 2;
  }
  /* テキスト */
  .footer__nav__heading{
    margin-bottom:16px;
    font-size:16px;
  }
  .footer__nav__list li{
    margin-bottom:12px;
  }
  .footer__nav__list li a{
    font-size:13px;
    color:#000;
  }
  /* SNSアイコン */
  .footer__nav__list.sns li{
    display:inline-block;
    margin-right:18px;
  }
  .footer__nav__list.sns li a{
    font-size:0;
  }
  .footer__nav__list.sns li a:before{
    font-size:32px;
  }
  .footer__nav__list.sns li:last-child{
    margin-right:0;
  }
  /* 会社概要リンク */
  .footer__bottomLink{
    margin-bottom:20px;
    width:1024px;
    text-align:center;
  }
  .footer__bottomLink li{
    display:inline-block;
  }
  .footer__bottomLink li:after{
    content:"";
    display:inline-block;
    width:1px;
    height:12px;
    background-color:#999;
  }
  .footer__bottomLink li:last-child:after{
    display:none;
  }
  .footer__bottomLink li a{
    padding:0 1em;
    font-size:12px;
    color:#444;
  }
  /* コピーライト */
  .footer__copyright{
    text-align:center;
    line-height:70px;
    font-size:13px;
  }
  /* hover */
  .footer__nav__heading a:hover,
  .footer__nav__list li a:hover,
  .footer__bottomLink li a:hover{
    opacity:.7;
    text-decoration:none;
  }

  /*----------------------------------------------------------------------------
  メルマガ登録
  ----------------------------------------------------------------------------*/
  .footer__nav__list.sns{
    text-align: center;
    margin-top: 40px;
  }
  .footer_box{
    width: 1024px;
    margin: 30px auto 50px;
  }
  .footer .footer_box {
    border: 1px solid #000;
    padding: 30px 0;
    box-sizing: border-box;
  }
  .footer_box #newslater-form{
    display: inline-block;
    vertical-align: top;
    margin-left: 60px;
  }
  .footer_box{
    position: relative;
  }
  .footer_box .newslater-text {
    display: inline-block;
    vertical-align: top;
    padding: 15px 0;
    line-height: 170%;
    font-size: 15px;
    letter-spacing: 1px;
  }
  .footer .footer_box .button button {
    background: #000;
    color: #fff;
    margin: 0;
    padding: 9px 0;
    border-radius: 0;
    outline: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    font-size: 13px;
    letter-spacing: 0.5px;
    width: 170px;
    cursor: pointer;
  }
  .footer .mail input {
    margin: 0 0 8px 0;
    padding: 6px 10px;
    border-radius: 0;
    outline: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ddd;
    box-sizing: border-box;
    width: 348px;
  }
  .footer-newsletter-message.as-fail-panel {
    position: absolute;
    top: 30px;
    right: 210px;
    color: #e00;
    background-color: #fff;
    padding: 20px 25px;
    border: 1px solid #ccc;
  }
  .footer-newsletter-message span.trg-errorMailMsg-remodal {
    font-size: 11px;
    color: #666;
    border-bottom: 1px solid #666;
    line-height: 1;
  }
  .footer .icon_close{
    display: block;
    text-align: center;
    text-decoration: underline;
    color: #6D6F71;
    margin-top: 5px;
    font-size: 12px;
    cursor: pointer;
  }
  .footer .footer-newsletter-message.as-success-panel{
    line-height: 1.8;
    width: 300px;
    border: 1px solid #ccc; 
    background: #fff;
    padding: 20px;
    z-index: 2;
    position: absolute;
    top: 50%;
    right: 22%;
    margin-top: -55px;
  }
  /* メルマガのみ会員フォームの下に注釈 #99451 */
  .footer_box #newslater-form .newslater-note {
    font-size: 11px;
    color: #777;
    margin-top: .5rem;
    display: inline-block;
    text-indent: -10px;
    margin-left: 8px;
    letter-spacing: -0.5px;
  }
  .footer_box #newslater-form .newslater-note a {
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
  }
  .footer_box #newslater-form .newslater-note a[target="_blank"]::after {
    content: "";
    margin-right: 4px;
    margin-left: 1px;
    padding-right: 12px;
    background: #777;
    mask: url("//media.aws.locondo.jp/contents/common/images/pict_blank.svg") no-repeat center center / contain;
    -webkit-mask: url("//media.aws.locondo.jp/contents/common/images/pict_blank.svg") no-repeat center center / contain;
  }

}