@charset "UTF-8" ;

/* ボディ */
body {
  margin: 0 ;   /* ブラウザ枠にフィット */
  padding: 0 ;    /* マージンは領域間のスペース、パディングは領域内のスペース */ 
    font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  font-size: 1.1em;    /* 文字サイズは標準サイズ */
  line-height: 1.8; /* 行間は1.8文字分 */
  color : #545454;  /* 文字色はグレー#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: 1em; /* 文字サイズは標準サイズ */
  }
  /* ロゴ画像 */
  .logo
  {
    width: auto ;
  }
}


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

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


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


/* 写真に文字乗せ */
.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;
  line-height: 1;/*行高は1に*/
  padding: 15px 15px;/*文字周りの余白*/
  text-shadow: 5px 5px 5px #080707;/*テキストシャドウ*/
}




/* 2段組みフロート600PX */
.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;
  }



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

.box1_500 {float: left;
  width: 50%;
  height: 500px;    /* 枠の高さ調整 */   
  margin: 0;
  padding: 10px ;    /* マージンは領域間のスペース、パディングは領域内のスペース */   
}

.box2_500 {float: left;
  width: 50%;
  height: 500px;    /* 枠の高さ調整 */ 
  margin: 0;
  padding: 10px ;    /* マージンは領域間のスペース、パディングは領域内のスペース */ 
}

.box3_500 {float: left;
  width: 50%;
  height: 500px;    /* 枠の高さ調整 */ 
  margin: 0;
  padding: 10px ;    /* マージンは領域間のスペース、パディングは領域内のスペース */ 
}

.box4_500 {float: left;
  width: 50%;
  height: 500px;    /* 枠の高さ調整 */ 
  margin: 0;
  padding: 10px ;    /* マージンは領域間のスペース、パディングは領域内のスペース */ 
}

.box5_500 {float: left;
  width: 50%;
  height: 500px;    /* 枠の高さ調整 */ 
  margin: 0;
  padding: 10px ;    /* マージンは領域間のスペース、パディングは領域内のスペース */ 
}

.box6_500 {float: left;
  width: 50%;
  height: 500px;    /* 枠の高さ調整 */ 
  margin: 0;
  padding: 10px ;    /* マージンは領域間のスペース、パディングは領域内のスペース */ 
}

/* 480px以下の画面に適用するCSS */
@media screen and (max-width:480px)
{
 .box1_500  { width: 100%;
  height: auto; }
 .box2_500  { width: 100%;
  height: auto; }
 .box3_500  { width: 100%;
  height: auto; }
 .box4_500  { width: 100%;
  height: auto; } 
 .box5_500  { width: 100%;
  height: auto; }
 .box6_500  { 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;
  }













.shadow_test{
    text-shadow:-2px -2px 3px #f51818;
}



/* 「RightToLeft」の動作内容 */
@keyframes RightToLeft {
  0% {
    opacity: 0;/* 透明 */
    transform: translateX(360px);/* X軸方向に360px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);
  }
}

/* 「RightToLeft」を適用する箇所 */
.RightLeft {
  animation-duration: 5s;/* アニメーション時間 */
  animation-name: RightToLeft;/* アニメーション名 */
  animation-iteration-count: 1;/* アニメーションの繰り返し回数*/
}








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



/* 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: #c0593b;      /* メニュー外背景色 */
}

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

#menuList ul li {
  width: 235px;
  height: 45px;
  float: left;
  border-left: #d4e49d 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: #c0593b;
    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 {
  text-align: left;
  font-weight: normal; 
  padding: 0 5px;
}
table {
  border-collapse: collapse;
  /*  border-collapse: separate;*/
  border-spacing: 0;
}






/* 表の横スクロール */
@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: #65A993;  /*  リンク色 */
  text-decoration: none;  /*  下線なし */
}
a:hover{
  color : #ff7043;
}

/* ページトップへのリンクをずらす処理 */
#anchor{
  padding-top:100px;
  margin-top:-100px;
}



/* h見出し */
h1 {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;  
  font-size: 1.6em;
  padding: .5em .75em;
  color: black;
  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;
}





/* 動的ボタン */
.ex-4 button{
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 5px;
  border: none;
  padding: .625rem 2rem;
  box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
  cursor: pointer;
  display: inline-block;
  transition: all .22s;
  background-color: #f8f8ff;
}
.ex-4 button:hover{
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
  filter: brightness(130%);
}
.ex-4 button.b-1{
  color: #6771E5;
  background: #fff;
  margin-right: .25rem;
}

/* 望ましい位置で改行 HTMLの<span class="aks">に対応 */
.aks {
   display: inline-block;
}




/* テキストシャドウ */
.shadow_t {
     text-shadow: 1px 1px 2px #BFBFBF;
}



/* キーボード */
kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
    color: #333;
    display: inline-block;
    font-size: .85em;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
   }




/* カード */
.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);
}