@charset "UTF-8" ;

/* ボディ */
body {
  margin: 0 ;   /* ブラウザ枠にフィット */
  padding: 0 ;    /* マージンは領域間のスペース、パディングは領域内のスペース */ 
  font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic'    /* フォント指定 */
  font-size: 1em;    /* 文字サイズは標準サイズ */
  line-height: 1.8; /* 行間は1.8文字分 */
  color : #545454;  /* 文字色はグレー */
  animation: fadeIn 1s ease 0s 1 normal;  /* Web ページのフェードイン表示 */
  -webkit-animation: fadeIn 4s ease 0s 1 normal;  /* Web ページのフェードイン表示 */
}

/* 画像の最大幅を指定する */
img
{
  max-width: 100% ;   /* 親要素のwidth幅の100%の値 */
  height: auto ;      /* 縦幅は自動調整 */
}

/* 画像下に余白をつくらない */
.contents-image img {
  vertical-align: bottom;
}
 
.contents-image img {
  display: block;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 769px) {
.pc { display: none !important; }
.sp { display: block !important; }
}


/* 全体(デスクトップPCとスマホ)に適用するCSS */
.wrapper
{
  width: 960px ;      /* 全体サイズ幅は960px */
  margin: 0 auto ;    /* 左右に[auto]を指定することで、真ん中に寄る */
  padding: 0 ;      /* 上右下左 */
  overflow: hidden ;  /* 内容がボックスに収まらない場合、収まらない部分は非表示 */
  background-color: #fff;      /* 背景色は白 */
  font-size: 16px;/* フォントサイズ */
}

.wrapper_mail
{
  width: 1000px ;      /* 全体サイズ幅は1000px */
  margin: 0 auto ;    /* 左右に[auto]を指定することで、真ん中に寄る */
  padding: 0 ;      /* 上右下左 */
  overflow: hidden ;  /* 内容がボックスに収まらない場合、収まらない部分は非表示 */
  background-color: #fff;      /* 背景色は白 */
  font-size: 16px;/* フォントサイズ */
}

.main
{
  float: left ;   /* mainを左に */
  width: 640px ;          /* 記事枠は640px */
  padding: 30px 45px 0px 15px;   /* 内の上右下左 */
  margin: 0px 0px 0px 0px;   /* 外の上右下左 */
}

.side
{
  float: right ;    /* sideを右に */
  width: 230px ;          /* サイド枠は230px */
  padding: 30px 0px 0px 20px;   /* 内の上右下左 */
  margin: 0px 0px 0px 0px;   /* 外の上右下左 */
}

.oneplate
{
  float: left ;   /* 左に */
  width: 920px ;          /* 記事枠は960px */
  padding: 30px 20px 0px 20px;   /* 内の上右下左 */
  margin: 0px 0px 0px 0px;   /* 外の上右下左 */
}


/* 1034pxx以下の画面に適用するCSS */
@media screen and (max-width:1033px)
{
  .wrapper, .wrapper_mail
  {
    width: auto ;   /* スマホではデフォルトなんだけど */
    padding: 0 10px ; /* 左右に10pxずつ余白 */

  }
  .main
  {
    width: auto ;
    padding: 0 5% ; /* 左右余白 */
    border: none ;    /* 枠線 */
  }
  .side , .oneplate
  {
    padding: 0 5% ; /* 左右余白 */    
    width: auto ;
  }
  .main , .side , .oneplate
  {
    float: none ;
  }
}


/* 768pxx以下の画面に適用するCSS。枠に<table class="table-sp">とつけると横２コマが段折になる。 */
@media screen and (max-width: 768px) {
    .table-sp,
    .table-sp tbody,
    .table-sp thead,
    .table-sp tr,
    .table-sp td,
    .table-sp th {display:block;}
     .table-sp th {width:auto;}
}


/* 480px以下の画面に適用するCSS */
@media screen and (max-width:481px)
{
  /* ボディ */
  body
  {
    font-size: 13px ; /* 文字サイズ13px */
  }
  /* ロゴ画像 */
  .logo
  {
    width: auto ;
  }
}


/* ヘッダー */
.header
{
  text-align: center ;      /* テキスト、画像の真ん中寄せ */
  padding: 0 ;      /* 領域内の上下の余白 */
  margin-bottom: 0 ;      /* 他のブロックとのスペース */
}

/* ヘッダー画像位置 */
.relative {
    position: relative;
}


.Uneme {
  position: absolute;
  left: 0;
  right: 100;
  margin: auto;
  top: 250px;
  width: 40% ;
}
/* 768px以下の画面に適用するCSS */
@media screen and (max-width:768px)
{
  /* ロゴ画像 */
  .Uneme
  {
   top: 450px;
    width: 80% ;
  }
}
/* 560px以下の画面に適用するCSS */
@media screen and (max-width:559px)
{
  /* ロゴ画像 */
  .Uneme
  {
   left: 0;
   right: 0;    
   top: 30px;
    width: 80% ;
  }
}



/* スライダーに文字乗せ */
.sp-slide p {
  position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  font-weight: bold; /*太字に*/
  font-size: 2em;/*サイズ2倍*/
  background-color: rgba( 39, 96, 173, 0.7 );/*背景色　透過*/
  line-height: 1.6;/*行高は1.6に*/
  padding: 15px 15px;/*文字周りの余白
  font-family :Quicksand, sans-serif;/*Google Font*/
  top: 60%;/*上から60％の位置*/
  left: 50%;/*左から真ん中*/
  -ms-transform: translate(-50%,-50%);/*古いブラウザ対応*/
  -webkit-transform: translate(-50%,-50%);/*古いブラウザ対応*/
  transform: translate(-50%,-50%);/*縦と横の文字のズレ補正*/
  margin:0;/*値を0にしてズレなくす*/
  /*文字の装飾は省略*/
  }

.sp-slide img {
  width: 100%;
  }

/* scrollマーク画像 */
.sita {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 100px;
}


/* 写真に文字乗せ */
.example {
  position: relative;
  }

.example p {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  white-space: nowrap;/*改行しない*/
  color: white;/*文字は白に*/
  font-weight: bold; /*太字に*/
  font-size: 2.8em;/*サイズ倍*/
  font-family: "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  background-color: rgba( 0, 0, 0, 0.15 );/*背景色　透過*/
  line-height: 1;/*行高は1に*/
  padding: 15px 15px;/*文字周りの余白*/
}




/* 2段組みフロート */
.boxA:after {content: "";
  display: block;
  clear: both
}

.box1 {float: left;
  width: 50%;
  height: 600px;
  margin: 0;
  padding: 10px ;    /* マージンは領域間のスペース、パディングは領域内のスペース */   
}

.box2 {float: left;
  width: 50%;
  height: 600px;
  margin: 0;
  padding: 10px ;    /* マージンは領域間のスペース、パディングは領域内のスペース */ 
}

.box3 {float: left;
  width: 50%;
  height: 600px;
  margin: 0;
  padding: 10px ;    /* マージンは領域間のスペース、パディングは領域内のスペース */ 
}

.box4 {float: left;
  width: 50%;
  height: 600px;
  margin: 0;
  padding: 10px ;    /* マージンは領域間のスペース、パディングは領域内のスペース */ 
}

/* 480px以下の画面に適用するCSS */
@media screen and (max-width:480px)
{
 .box1  { width: 100%;
  height: auto; }
 .box2  { width: 100%;
  height: auto; }
 .box3  { width: 100%;
  height: auto; }
 .box4  { width: 100%;
  height: auto; } 
}

[class^="box"],
div:not([class]) 
  {
  border: solid 1px white;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: left;
  }
























/* フッター */
.footer
{
  border-top: 1px solid #3f3f3f ;   /* 上ボーダー線を太さ1px、一本線の#3f3f3fカラー */
  text-align: center ;      /* テキスト、画像の真ん中寄せ */
  margin-top: 2em ;     /* 他のブロックとのスペース */
  padding: 1em 0 ;      /* 上下の余白 */
    color : #545454;  /* 文字色はグレー */
  background: #f6f6f6 ;
}



/* Web ページ全体のフェードイン表示 */
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* 要素が画面内に入ったらふわっとフェードイン */
/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
    }
 
/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }







/* パララックスのためのmain-side-under 白く両サイドを塗る処理 */
.main-side-under {
  width: 100vw;     /* 100VWは画面全体幅。VWはビューポートの幅に対する割合 */
  background-color: #fff
  }



/* 横広メニュー */
#menuList {
  width: 100%;
  height: 45px;
  border-top: #aaa 1px solid;
  position: relative;
  z-index: 10;
  background: #2f3763;      /* メニュー外背景色 */
}

#menuList ul {
  margin: 0 auto;
  width:  940px;
  height: 45px;
  text-align: left;
}

#menuList ul li {
  width: 235px;
  height: 45px;
  float: left;
  border-left: #2f3763 1px solid;
  box-sizing: border-box;
      background: #f5f5f5;      /* 以前は#ebebeb */
        border-bottom: #fff 1px solid;
}

#menuList ul li a {
  height: 45px;
  font-weight: bold;
  line-height: 45px;
  display: block;
  text-align: center;
  transition: all 0.2s linear;
}

#menuList ul li:hover > a {
  background: #fff;
}

#contents {
  margin: 0 auto;
  padding: 40px 0;
  width: 800px;
  text-align: left;
}

#contents p {
  padding-bottom: 2em;
  font-size: 1em;
  line-height: 2em;
}

/* ------------------------------
   MEDIAQUERIES LAYOUT
------------------------------ */
@media only screen and (max-width: 1033px) {
  #menuList ul {
    width: 100%;
  }

  #menuList ul li {
    width: 20%;
  }
}

/* ------------------------------
   MEDIAQUERIES[SP]LAYOUT
------------------------------ */
@media only screen and (max-width: 768px) {
  #menuList {
    display: none;
  }

  #rwdMenuWrap {
    width: 100%;
    border-bottom: #aaa 1px solid;
  }

  #rwdMenuWrap #switchBtnArea {
    width: 100%;
    height: 60px;
    background: #2f3763;
    position: relative;
  }

  #rwdMenuWrap #switchBtnArea #switchBtn {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    display: block;
    background: #a7a7a7;
    position: absolute;
    border-radius: 5px;
  }

  #rwdMenuWrap #switchBtnArea #switchBtn span {
    left: 20%;
    width: 60%;
    height: 4px;
    display: block;
    position: absolute;
    background-color: #fff;
    border-radius: 5px;
    transition: all 0.2s linear;
  }
  #rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(1) {
    top: 10px;
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  #rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(2) {
    top: 18px;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  #rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(3) {
    bottom: 10px;
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  #rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(1) {
    top: 18px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(2) {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  #rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(3) {
    bottom: 18px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  #rwdMenuWrap ul {
    width: 100%;
    display: none;
  }

  #rwdMenuWrap ul li {
    width: 100%;
    border-bottom: #aaa 1px solid;
  }

  #rwdMenuWrap ul li a {
    padding: 15px 20px;
    text-align: left;
    display: block;
    background: #ebebeb;
    position: relative;
  }

  #rwdMenuWrap ul li a:after {
    content: '';
    margin-top: -4px;
    top: 50%;
    right: 15px;
    width: 8px;
    height: 8px;
    color: #888;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.2em;
    display: block;
    position: absolute;
    border-top: 2px solid #b0b0b0;
    border-right: 2px solid #b0b0b0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  #contents {
    width: 100%;
  }

  #contents p {
    padding: 0 20px 2em 20px;
  }
}

/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
#menuList > ul:before,
#menuList > ul:after {
  content: " ";
  display: table;
}
#menuList > ul:after {clear: both;}
#menuList > ul {*zoom: 1;}




/* 表のスタイル */
table1 {
  border-collapse: collapse;
}
table th, table td {
  border: solid 1px #e2e2e2;
  /*実線 1px グレー*/
cellpadding:"100";
}
td, th {
padding: 0 5px;
}







/* 表の横スクロール */
@media (max-width: 769px) {
.scroll{
/* tableをスクロール可能にする */
overflow: auto;
/* tableセル内文字の折り返しを禁止 */
white-space: nowrap;
}

/* ↓tableにスクロールバーを追加 ここから */
.scroll::-webkit-scrollbar{
height: 5px;
}
.scroll::-webkit-scrollbar-track{
/* スクロールバーのスクロール範囲の色 */
background: #F6F6F6;
}
.scroll::-webkit-scrollbar-thumb {
/* スクロールバーのツマミの色 */
background: #C2C2C2;
}
/* tableにスクロールバーを追加 ここまで↑ */

.scroll table{
/* tableの幅を100%に */
width:100%;
}
}




/* [iframe]を囲む要素 */
.embed-wrapper
{
  width: 100% ;
  max-width: 650px ;      /* 最大の横幅 */
  height: 0 ;       /* 高さは0にする */
  position: relative ;
  top: 0 ;
  left: 0 ;
}

/* [ifram] */
.embed-wrapper iframe
{
  width: 100% ;   /* 親要素の余白いっぱい */
  height: 100% ;    /* 親要素の余白いっぱい */
  margin: 0 ;     /* 余白 */
  padding: 0 ;    /* スペース */
  position: absolute ;
  top: 0 ;
  left: 0 ;
}

/* Youtubeの場合 [1:0.5625] */
.embed-youtube
{
  padding-bottom: 56.25% ;  /* 横幅に対する縦幅の比率 */
}

/* Vineの場合 [1:1] */
.embed-vine
{
  padding-bottom: 100% ;  /* 横幅に対する縦幅の比率 */
}

/* Google Mapsの場合 [自由] */
.embed-googlemaps
{
  max-width: 999px ;      /* 最大の横幅 */
  padding-bottom: 100% ;  /* 横幅に対する縦幅の比率 */
}



/* リンクの処理 */
a{
  color: #1d3994;  /*  リンク文字 */
}
a:hover{
  color : #ff7043;
}



/* h見出し */
h1 {
  font-size: 1.6em;  
  padding: .5em .75em;
  background-color: #f6f6f6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
h1 {
  position: relative;
  padding-bottom: .5em;
  border-bottom: 4px solid #ccc;
}
h1::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background-color: #bcd6e8;
}

h2 {
  position: relative;
  padding-bottom: .5em;
  border-bottom: 4px solid #ccc;
}
h2::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background-color: #bcd6e8;
}

h3 {
  position: relative;
  padding-bottom: .5em;
}
h3::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #fff;
}







/* カード */
.card{
  float: left;
  width: 220px;
  height: auto;
  margin: 5px ;    /* 左右に[auto]を指定することで、真ん中に寄る */
  padding: 0 ;      /* 上右下左 */
}

.card__imgframe{
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  background: url(https://placehold.jp/640x360.png) no-repeat center;
  background-size: cover;
  box-sizing: border-box;
}

.card__textbox{
  width: 100%;
  height: auto;
  padding: 20px 18px;
  background: #ffffff;
  box-sizing: border-box;
}

.card__textbox > * + *{
  margin-top: 10px;
}

.card__titletext{
  font-size: 20px;
  font-weight: bold;
  line-height: 125%;
}

.card__overviewtext{
  font-size: 12px;
  line-height: 150%;
}

.card-skin{
  box-shadow: 2px 2px 6px rgba(0,0,0,.4);
}