@charset "UTF-8";
#wrap{
  display:flex;
  padding:30px 0 0;
}

/********** header **********/
#header_area{
  width:260px;
  padding:0 20px 0;
}
  #logo_head{
    background:url(/travel/wp-content/themes/xeory_extension/lib/images/logo_t1.svg) no-repeat;
    background-position:top center;
    display:block;
    height:160px;
    margin:0 0 15px;
    width:100%;
  }
  #header_area h1{
    font-size:13px;
    font-weight:600;
    letter-spacing:-0.5px;
    line-height:140%;
    margin:0 0 15px;
    padding:0 15px;
  }

  /***** ナビ｜SERVICE *****/
  #nav_srv{
    background: radial-gradient(circle at bottom center, #0094C8 5%, #0094C8 20%, #0064C8 100%);
    /* border-radius:5px 5px 0 0; */
    border-radius:5px;
    padding:15px;
  }
    #nav_srv h2{
      border-bottom:2px solid #fff;
      color:#fff;
      font-size:12px;
      font-weight:600;
      margin:0 0 5px;
    }
    #nav_srv li{
      border-top:1px solid rgba(255,255,255,0.2);
      margin:5px 0 0;
      padding:5px 0 0;
    }
    #nav_srv li:nth-of-type(1){
      border:none;
    }
      #nav_srv li a{
        color:#fff;
        font-weight:600;
        font-size:12px;
      }
  /***** ナビ｜TOOL *****/
  #nav_tool{
    background:#F1F1F1;
    border-radius:0 0 5px 5px;
    padding:15px;
  }
    #nav_tool h2{
      border-bottom:2px solid #414141;
      font-size:12px;
      font-weight:600;
      margin:0 0 5px;
    }
    #nav_tool li{
      border-top:1px solid rgba(0,0,0,0.2);
      margin:5px 0 0;
      padding:5px 0 0;
    }
    #nav_tool li:nth-of-type(1){
      border:none;
    }
      #nav_tool li a{
        color:#414141;
        font-weight:600;
        font-size:12px;
      }

  /********** aside **********/
  aside{
    padding:20px 0;
  }
    aside h2{
      font-size:12px;
      font-weight:bold;
      margin:0 0 15px;
    }
    aside .ads{
      display:block;
      margin:0 0 20px;
    }
      aside figure{
        background:#ccc;
        min-height:60px;
        width:100%;
      }
      aside h3{
        font-size:12px;
        font-weight:600;
        margin:5px 0;
      }
      aside .ads p{
        background:#FFF3E9;
        font-size:12px;
        padding:10px;
      }
  /********** コンテンツエリア｜上部 **********/
  #upper_area{
    display:flex;
  }

    /*** 対象国変更タブ ***/
    #newest_article_tabs{
      background:url(/travel/wp-content/themes/xeory_extension/lib/images/1px_gray.gif);
      background-repeat: repeat-x;
      background-size:auto 5px;
      background-position:bottom left 15px;
      display:flex;
      margin:0 15px 10px 0;
    }
      #newest_article_tabs li{
        border-bottom:5px solid #ccc;
          /* margin:0 15px 0 0; */
        line-height:0%;
          padding:0 20px 15px;
          transition:0.5s;
      }
      #newest_article_tabs li:hover{
        border-bottom:5px solid #FF821E;
        cursor:pointer;
      }
      #newest_article_tabs li.slct{
        border-bottom:5px solid #0064C8;
      }
        #newest_article_tabs li i{
          background-size:16px auto !important;
          background-position:left center;
          background-repeat: no-repeat;
          padding:0 0 0px 20px;
          color:#333;
          font-size:14px;
          font-weight:600;
          letter-spacing:1px;
        }

        #newest_article_tabs .japan{
          background-image:url(/travel/wp-content/themes/xeory_extension/lib/images/icon/flag_ja.svg);
        }
        #newest_article_tabs .usa{
          background-image:url(/travel/wp-content/themes/xeory_extension/lib/images/icon/flag_us.svg);
        }

  /********** 最新記事エリア **********/
  #newest_article{
    border-right:1px solid rgba(0,100,200,0.2);
    flex:1;
    margin:0 10px 0 0;
    padding:0 0 15px 0;
  }
    /***** 記事 *****/
    .media_latest_posts {
      /* background:#f1f1f1; */
      /* border-radius:0 0 5px 5px; */
      display:none;
      justify-content: space-between;
      flex-wrap: wrap;
      padding:0 0 20px;
    }
    .media_latest_posts.slct{
      display: flex;
    }
      .media_post{
        background:rgba(0,60,140,0.05);
        /* border-radius: 5px; */
        padding:15px 15px 15px;
        position:relative;
        width:calc(100%/3);
      }
      @media only screen and (max-width: 1200px) {
        .media_post{
          width:calc(100%/2);
        }
      }
      @media only screen and (max-width: 900px) {
        .media_post{
          width:calc(100%);
        }
      }
      /*** 一番目の記事 ***/
      .media_post.no1 {
        margin:0;
        width:100%;
      }
        .media_post.no1 a{
          display: flex;
        }
        @media only screen and (max-width: 1000px) {
          .media_post.no1 a{
            display: block;
          }
        }
        .media_post a:before{
          align-items: center;
          display:flex;
          color:#fff;
          content:"　";
          /* background-image:
            url(/travel/wp-content/themes/xeory_extension/lib/images/icon/detail.svg),
            radial-gradient(circle at center center, rgba(0,60,140,0.7) 20%,rgba(0,60,140,0.5) 70%,rgba(0,60,140,0.2) 100%);
          background-repeat:no-repeat;
          background-position:center center; */
          background-size:0px auto,auto auto;
          font-weight:600;
          height:0;
          justify-content: center;
          left:50%;
          position:absolute;
          transition:0.5s;
          top:50%;
          width:0;
        }
        .media_post a:hover:before{
          display:flex;
          /* background-size:40px auto,auto auto; */
          border:3px solid #ffda06;
          border-radius: 8px;
          content:"　";
          font-size:12px;
          font-weight: 800;
          height:100%;
          left:0;
          letter-spacing: 1px;
          position:absolute;
          transition:0.5s;
          top:0;
          width:100%;
        }
        .media_post .media_image {
          overflow: hidden;
          flex-shrink: 0;
        }
        .media_post.no1 .media_image {
          display:flex;
          height:initial;
          margin-right: 15px;
          min-height:150px;
          overflow: hidden;
          position:relative;
          width:50%;
        }
        @media only screen and (max-width: 1000px) {
          .media_post.no1 .media_image {
            width:100%;
          }
        }
            .media_thumbnail {
              display:block;
              object-fit: cover;
              height:200px;
              width:100%;
            }
            .media_post.no1 .media_thumbnail {
              height:initial;
              position:absolute;
              top:0;
            }
            @media only screen and (max-width: 1200px) {
              .media_post.no1 .media_thumbnail {
                /* position:initial; */
                width:initial;
              }
            }

          .media_post.no1 .media_content{
            align-items: center;
            padding:10px;
          }
            /*** カテゴリー ***/
            .media_post .media_category{
              color:#0064C8;
              font-size:12px;
              font-weight: 600;
              margin:5px 0 10px;
            }
            .media_post.no1 .media_category{
              margin:0 0 10px;
            }
            /*** タイトル ****/
            .media_content h3 {
              font-size:14px;
              font-weight: 600;
              line-height:160%;
              margin: 0 0 10px;
            }
            .media_post.no1 .media_content h3 {
              font-size:14px;
            }
            /*** 日付 ***/
            .media_date{
              color:#666;
              font-size:12px;
              margin:0 0 5px;
            }
            /*** ディスクリプション ***/
            .media_desc{
              background:#fff;
              border-radius:5px;
              color:#000;
              font-size:14px;
              line-height:160%;
              margin:0;
              padding:10px;
            }
      /*** もっと読む ***/
      .media_latest_posts .more{
        padding:20px 0 0;
        text-align:center;
        width:100%;
      }
        .media_latest_posts .more a{
          background: radial-gradient(circle at bottom center, #0094C8 5%, #0094C8 20%, #0064C8 100%);
          border-radius:30px;
          color:#fff;
          display:inline-block;
          font-size:12px;
          padding:5px 30px;
        }
        .media_latest_posts .more a:hover{
          background: radial-gradient(circle at bottom center, rgba(0,0,0,0.4) 5%, #555 100%);
        }

  /********** ピックアップeSIM **********/
  #pickup_japan_esim{
    padding:0 20px 0 0;
    width:300px;
  }
    #pickup_japan_esim h2{
      background:url(/travel/wp-content/themes/xeory_extension/lib/images/icon/esim_bk.svg) no-repeat;
      background-size:auto 100%;
      font-size:14px;
      font-weight:800;
      padding:0 0 0 20px;
      margin:0 0 10px;
    }
    #pickup_japan_esim h2+p{
      background:rgba(0,100,200,0.1);
      border-top:1px solid rgba(0,100,200,0.2);
      font-size:14px;
      font-weight:400;
      margin:0 0 10px;
      padding:10px;
    }

    /***** 商品 *****/
    .esim-latest-products {
      padding: 0;
    }
      .esim-product{
        position:relative;
        margin:0 0 10px;
      }
      /*** ランキング ***/
      .esim-product i{
        background:#b6b6b6;
        border-radius:20px;
        color:#fff;
        font-size:10px;
        font-weight:600;
        line-height:100%;
        padding:4px 5px;
        position:absolute;
        top:2px;
        left:-2px;
        z-index:1;
      }
      .esim-product:nth-of-type(1) i{
        background:#B81;
      }
      .esim-product:nth-of-type(2) i{
        background:#888;
      }
      .esim-product:nth-of-type(3) i{
        background:#A22;
      }
      .esim-product a{
          display:flex;
          padding: 10px;
          margin:0 0 0;
          position:relative;
      }
      .esim-product a:hover{
        background:rgba(255,255,0,0.2);
      }
  
      .esim-image img {
          max-width: 100px;
          height: 60px;
          object-fit: cover;
      }
      .esim-content{
        padding:0 0 0 10px;
        position:relative;
        text-align:right;
      }
        .esim-content h3 {
            font-size: 12px;
            font-weight:500;
            margin: 0 0 5px;
            text-align:left;
        }

        .esim-price {
            font-size: 12px;
            color: #E83929;
            font-weight: bold;
            text-align:left;
        }
        .esim-product .dtl{
          background: radial-gradient(circle at bottom center, #0094C8 5%, #0094C8 20%, #0064C8 100%);
          border-radius:10vw;
          bottom:0;
          color:#fff;
          display:inline-block;
          font-size:10px;
          padding:2px 8px;
          position:absolute;
          right:0;
        }
/********** main **********/
main{
  flex:1;
}

/********** footer **********/
#footer{
  background:url(/travel/wp-content/themes/xeory_extension/lib/images/logo_t1_w.svg) #0064C8 no-repeat;
  background-position:top 40px left 40px;
  background-size:150px auto;
}
  #footer a{
    color:#fff;
    font-size:12px;
    font-weight:600px;
  }
  #footer nav{
    display:flex;
    min-height:200px;
    padding:40px 40px 0 300px;
    width:100%;
  }
    #footer nav ul{
      margin:0 40px 0 0;
    }
    #footer nav ul li{
      margin:0 0 8px;
    }
      #footer nav ul a{
        border-bottom:1px solid rgba(255,255,255,0.2);
      }
  #footer p{
    background:#0045B2;
    color:rgba(255,255,255,0.7);
    font-size:12px;
    padding:10px;
    text-align:center;
  }