@charset "UTF-8" ;

/* ボディ */
body {
	margin: 0 ;		/* ブラウザ枠にフィット */
	padding: 0 ;		/* マージンは領域間のスペース、パディングは領域内のスペース */
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "メイリオ", Meiryo, 'ＭＳ Ｐゴシック', Arial, sans-serif;
  font-size:1.05em;    /* 文字サイズ */
  line-height: 1.9; /* 行間は1.9文字分（前は1.8） */
  color : #666666;  /* 文字色はグレー */
  word-break: break-all;/* 改行防止 */
  animation: fadeIn 1s ease 0s 1 normal;  /* Web ページのフェードイン表示 */
  -webkit-animation: fadeIn 2s ease 0s 1 normal;  /* Web ページのフェードイン表示 */
}

/* 480px以下の画面に適用するCSS */
@media screen and (max-width:481px)
{
	/* ボディ */
	body
	{
    font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
    font-size: 18px;
    color: #333333;  /* 以上3行は文春オンラインと同 */
	}
}



/* 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);
    }



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

/* ロゴ画像を囲むh1 */
.logo-wrapper
{
	margin: 0 ;
	padding: 0 ;
	line-height: 1 ;
}

/* ロゴ画像 */
.logo
{
	width: 960px ;
	height: auto ;
}

/* 480px以下の画面に適用するCSS */
@media screen and (max-width:481px)
{
	/* ロゴ画像 */
	.logo
	{
		width: auto ;
	}
}



/* 記事一覧トップをパソコンの際には非表示、スマホの際には表示 */
.table-title {
  color: white;
  text-align: center;
  padding: 8px;
  display: none; /* PCでは非表示 */
}

/* スマホ（幅768px以下）の時だけ表示 */
@media screen and (max-width: 768px) {
  .table-title {
    display: block;
  }
}




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



/* ドロップダウンメニュー */
/* 本来この段まではパソコンでも表示するときもあるが、今回は非表示。950pxx以下の画面に適用するCSS */
.nav {
  position: fixed;  /* 絶対位置への配置で、スクロールしても位置固定 */
  right: 0;         /* 右ピッタリ */
  top: 0;           /* 上ピッタリ */
  margin: 0 auto;   /* 要素を中央に */
  padding: 0;       /* 要素の内側の余白0 */
  display: flex;    /* 要素を横に並べる */
  box-shadow: -0px 0px 4px grey;     /* ドロップシャドウ　左右　上下　ぼかし　色 */
  z-index: 4;/* 数値が大きいほど上層 */
}
.nav li {
  position: relative; /* 親要素を基準にして、子要素の相対位置を決める */
  list-style: none;   /* liのポチなし */
}
.nav li a {         /* 絞り込み指定。HTML上で navの中の liの中の aに対してCSSを適用。親要素と子要素の関係を示す */
  display: block;   /* aタグで作ったリンクのクリック範囲を、親要素と同じサイズに広げる */
  width: 220px;     /* 幅190px */
  height: 50px;     /* 高50px */
  text-align: left; /* 左揃え */
  color: #545454;		/* 文字カラー */
  font-size:0.9em;    /* フォントサイズ */
  line-height: 2.8; /* 行高はフォントサイズの2.8倍 */
  background: #F2F1F0;		/* 背景カラー */
  transition: 0.5s; /* 0.5秒かけて変化 */
  text-decoration: none;      /* テキストの装飾なし */
  border-right: 1px solid #eee;		/* 文字カラー */
  box-shadow: -0px 0px 4px grey;  /* ドロップシャドウ　左右　上下　ぼかし　色 */
  box-sizing: border-box;         /* paddingとborderがwidthとheightの中に含まれる */
}
.nav > li:hover > a {       /* layer-1 liの中の aにマウスオンの際に適用。適用したいHTML箇所にontouchstart="" */
  color: #545454;		        /* トップ選択時背景文字カラー */
  background: #fff;		      /* トップ選択時背景カラー */
}
.nav > li li:hover > a {    /* layer-2（同上） */
  color: #fff;		          /* ドロップダウン文字カラー */
  background: #A6A5A4;		  /* ドロップダウン背景カラー */
}
.nav li ul {
  top: 50px;          /* 上から50pxにボックス */
  left: -40px;        /* 左から-40pxにボックス。liでは自動で40px右ずれ表示されるので、補整し真下に表示 */
  position: absolute; /* 親要素を基準に絶対的な位置を決める */
}
.nav li ul li {       /* 以下、floatに関わる処理。これでlayer-2を隠す */
  overflow: hidden;   /* 高さが認識される。下にはみ出た部分は隠れる */
  height: 0;          /* 高さ0で表示されない */
  transition: 0.2s;   /* 0.2秒かけて変化 */
}
.nav li ul li a {
  border-top: 1px solid #eee;   /* 上ボーダーを1px1本線のグレー */
}
.nav li:hover > ul > li {   /* layer-2を出す */
  overflow: visible;        /* 下にはみ出た部分を表示 */
  height: 50px;             /* 高さ50px（元の高さ） */
}
  .nav li ul li ul {
    top: 0;
    left: 110px;
  }
  .nav li ul li ul.left {
    top: 0;
    left: -190px;
  }

/* 768pxx以下の画面に適用するCSS */
@media screen and (max-width:769px)
{
.nav li a {
  display: block;
  width: 180px;
  height: 40px;
  text-align: left;
  color: #545454;		/* 文字カラー */
  font-size: 12px;
  line-height: 2.8;
  background: #F2F1F0;		/* 背景カラー */
  transition: 0.5s;
  text-decoration: none;
  border-right: 1px solid #eee;
  box-sizing: border-box;
}
.nav li ul {
  top: 40px;
  left: -40px;
  position: absolute;
}
.nav li:hover > ul > li {
  overflow: visible;
  height: 40px;
}
}

/* 768pxx以下の画面に適用するCSS ドロップダウンではないメニューを表示しない */
@media screen and (max-width:769px)
{
.hihyouji {
    height: 0; /* 高さ0 */
    opacity: 0; /* 透明 */
    visibility: hidden; /* 不可視 */
    transition: .4s;
    }
}


/* 写真に文字乗せ */
.example {
  position: relative;
  }
.example p {
  position: absolute;
  top: 50%;     /* ← 160pxから50%に変更 */
  left: 50%;
  transform: translate(-50%, -50%);
  margin:0;
  padding:0;
  color: #fff;
  font-size: 3.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.5;
  padding: 15px 15px;
  text-shadow: 1px 0px 16px black;
}

@media screen and (max-width: 960px) {
.example p {
  top: 50%;
  margin:0;
  padding:0;
  font-size: 7vw;/*ブラウザの横幅全体が100vw*/
}
}


/* プロフィール範囲 */
.prf
{
  text-align:left;      /* テキスト、画像の左寄せ */
  margin: 0 10%;     /* 横左右10%あけ */
}


/* フッター */
.footer
{
	text-align: center ;			/* テキスト、画像の真ん中寄せ */
	margin-top: 1em ;			/* 他のブロックとのスペース */
	padding: 1em 0 1em 0 ;			/* 上、右、下、左 */
	background: #F7F7F7 ;
}



/* 全体(デスクトップPCとスマホ)に適用するCSS */
.wrapper
{
	width: 960px ;			/* 全体サイズ幅は960px */
	margin: 0 auto ;		/* 左右に[auto]を指定することで、真ん中に寄る */
	padding: 0 ;			/* 上下左右の余白を0にしておく */
  background-color: #ffffff;      /* 背景色は白 */
}

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



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



/* 全体(デスクトップPCとスマホ)に適用するCSS */
.main
{
	width: 640px ;					/* 記事枠は640px */
	padding: 0px 30px ;					/* 領域内の上下左右に30pxの余白 */
	border-right: 1px solid rgba(0,0,0,.1) ;		/* 右枠線1pxの一本線。色は黒の透明色.1 */
	border-left: 1px solid rgba(0,0,0,.1) ;		/* 左枠線1pxの一本線。色は黒の透明色.1 */
}

.side
{
	width: 230px ;					/* サイド枠は230px */
}

/* 768pxx以下の画面に適用するCSS */
@media screen and (max-width:769px)
{
	.main
	{
		width: auto ;
		padding: 0 ;		/* 余白 */
		border: none ;		/* 枠線 */
	}

	.side
	{
		width: auto ;
	}
}



/* 全体(デスクトップPCとスマホ)に適用するCSS */
.main
{
	float: left ;		/* 記事枠を左に寄せる */
}

.side
{
	float: right ;		/* サイド枠を右に寄せる */
}

/* 768pxx以下の画面に適用するCSS */
@media screen and (max-width:769px)
{
	.main , .side
	{
		float: none ;
	}
}

.wrapper
{
	overflow: hidden ;
}



/* 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;}
}



/* 画像の最大幅を指定する */
img
{
	max-width: 100% ;		/* 親要素のwidth幅の100%の値 */
	height: auto ;			/* 縦幅は自動調整 */
	vertical-align ; middle		/* ディセンダーの削除 */
}






/* [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
{
	padding-bottom: 56.25% ;	/* 横幅に対する縦幅の比率 */
}


/* 横幅を指定してGoogle Mapを埋め込む */
.map-wrap {
  max-width: 100%; /* ここに横幅を指定 */
}
 
/* Google Mapを囲う要素 */
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 比率を4:3に固定 */
}
 
/* Google Mapのiframe */
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
最後に





/* 動画videoの場合 [自由] */
video {
  width: 100%;   /* 適宜指定 */
}

/* リンクと動くアンダーラインの処理 */
a {
  color: #8F8CB8;  /*  リンク文字 */
  position: relative;
  display: inline-block;
  text-decoration: none;
}
a:hover{
  color : #ff7043;
}
a::after {
  position: absolute;
  bottom: 1px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
a:hover::after {
  transform: scale(1, 1);
}




/* ページ内リンクの飛び先ずれ調整。HTMLはジャンプ部分は<a href="#name">ページ内リンク</a>、ジャンプ先は<a id="name" class="anchor"></a> */
a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}




/* 引用blockquoteデザイン */
figure, blockquote {
  margin: 0; /* ブラウザデフォルトの隙間をリセット */
}
.figure-quote { 
  padding:   5px 30px 5px; /* 余白 */
  border-left: solid 5px #F2F5F4; /* 左側に線 */
}
.figure-quote p {
  margin: 0.5em 0;
}
.figure-quote figcaption {
  text-align: right; /* 出典は右寄せに */
  font-size: smaller; /* 小文字 */
}



/* 写真上部を空ける */
img {
  margin-top: 2em;
}



/* h1の見出しに左線（ほぼ黒） */
h1 {
font-size: 4vh;/*画面高を基準にフォントサイズ*/
font-family: 'Inter', sans-serif;/*Googleフォント＿Inter*/
font-weight: 500;
letter-spacing: 0.5px;
color: #343c42;
padding: 0.25em 0.5em;/*上下 左右の余白*/
background: transparent;/*背景透明に*/
border-left: solid 14px #212121;/*左線*/
text-shadow: 0.5px 0.5px 5px #E3E3E3;/*シャドウ*/
}

/* h2の見出し ~さんのコメント */
h2 {
font-size: 2.8vh;/*画面高を基準にフォントサイズ*/
font-family: 'M PLUS 1p', sans-serif;/*Googleフォント＿M PLUS 1P*/
font-weight: 100;
color: #343c42;
margin-top: 3em;/*上マージン*/
  padding-bottom: .05em;
  border-bottom: 1px solid #ccc;
}

/* h3の見出し 中見出し*/
h3 {
font-family: 'M PLUS 1p', sans-serif;
color: #212121;
margin-top: 5em;/*上マージン*/
padding: 0.1em 0.5em;/*上下 左右の余白*/
background: transparent;/*背景透明に*/
border-left: solid 5px #a2a2a7;/*左線*/
text-shadow: 0.5px 0.5px 5px #E3E3E3;/*シャドウ*/
}

/* h4の見出し  ~さんのコメントの中見出し*/
h4 {
font-family: 'M PLUS 1p', sans-serif;
color: #212121;
margin-top: -7px;/*上をblockquote欄と並べる*/
margin-bottom: -12px;
padding: 0.1em 0.5em;/*上下 左右の余白*/
background: transparent;/*背景透明に*/
border-left: solid 5px #a2a2a7;/*左線*/
text-shadow: 0.5px 0.5px 5px #E3E3E3;/*シャドウ*/
}

/* h5の見出し(引用blockquoteデザイン内のタイトル) */
h5 {
font-size: 1.2em;
font-family: 'M PLUS 1p', sans-serif;
color: #212121;
margin-top: -12px;/*上をblockquote欄と並べる*/
padding: 0em 0.5em;/*上下 左右の余白*/
background: transparent;/*背景透明に*/
border-left: solid 5px #bcbcc0;/*左線*/
text-shadow: 0.5px 0.5px 5px #E3E3E3;/*シャドウ*/
}

/* 注・出典 */
h6 {
  text-align: right;
  margin-top: -12px;/*上をblockquote欄と並べる*/
  margin-bottom: -12px;
  padding: 0em;
  font-size:0.8em;
  font-weight: normal;
}

/* 矢印アニメーション */
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.cp_arrows {
  position: relative;
  display: flex;
  height: 50px;/*画面いっぱいにする場合100vh*/
  margin: 2em auto;
  justify-content: center;
  align-items: center;
}
.cp_arrows .cp_arrow {
  position: absolute;
  top: 50%;/*着地点（サンプルは[class:cp_arrows]height300pxの50%）*/
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  opacity: 0;
}
.cp_arrows .cp_arrowfirst {
  -webkit-animation: arrow-move08 2s ease-in-out infinite;
          animation: arrow-move08 2s ease-in-out infinite;
}
.cp_arrows .cp_arrowsecond {
  -webkit-animation: arrow-move08 2s 1s ease-in-out infinite;
          animation: arrow-move08 2s 1s ease-in-out infinite;
}
.cp_arrows .cp_arrow:before, .cp_arrows .cp_arrow:after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 30px;
  height: 3px;
  content: '';
  background: #d1d1d1;
}
.cp_arrows .cp_arrow:before {
  -webkit-transform: rotate(30deg) translateX(-39%);
          transform: rotate(30deg) translateX(-39%);
  -webkit-transform-origin: top left;
          transform-origin: top left;
}
.cp_arrows .cp_arrow:after {
  -webkit-transform: rotate(-30deg) translateX(39%);
          transform: rotate(-30deg) translateX(39%);
  -webkit-transform-origin: top right;
          transform-origin: top right;
}
@-webkit-keyframes arrow-move08 {
  0% {
    top: 40%;/*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes arrow-move08 {
  0% {
    top: 40%;/*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}




/* 次記事へのリンク（<p><a href="#飛ばしたい先" class="next-article">  次記事 <i class="fas fa-caret-up"></i></a>） */
/* スムーススクロール（ページ全体） */
html {
  scroll-behavior: smooth;
}

/* 次記事リンク */
.next-article {
  display: inline-block;

  /* 一段下げ */
  margin-top: 1.5em;

  /* 左寄せ（親に左右中央指定があっても効く） */
  margin-left: 0;

  font-size: 1rem;
  font-weight: 500;
  padding: .2rem 2rem;

  border-radius: 5px;
  text-decoration: none;
  color: #666666;
  background: #EFEFEF;

  box-shadow: 0 4px 6px rgba(50,50,93,.11),
              0 1px 3px rgba(0,0,0,.08);

  transition: all .22s;
}

/* hover時 */
.next-article:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(50,50,93,.15),
              0 3px 6px rgba(0,0,0,.12);
}





/* 記事間の空け（HTMLに<div class="article-space"></div>） */
.article-space {
  margin-bottom: 15em;
}





/* ボタン */
.ex-4 button{
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 5px;
  border: none;
  padding: .2rem 2rem;/* 上下 | 左右 */
  box-shadow: 0 4px 6px rgba(50,50,93,.06),0 1px 3px rgba(0,0,0,.02);
  cursor: pointer;
  display: inline-block;
  transition: all .22s;
}

.ex-4 button:hover{
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.02);
  filter: brightness(130%);
}

.ex-4 button.b-1{
  background: #f8f8ff;
  color: #fff;
  margin-right: .25rem;
}

.ex-4 button.b-2{
  color: #6771E5;
  background: #fff;
}

.ex-4 button.b-3{
  background: #828383;
}

/* 次の記事ボタン */
.ex-4 button.b-4{
  background: #EFEFEF;
}



/* 細線枠 HTML側は<p class="ex-5">テキスト</p> */
p.ex-5 {
  margin: 1em 0 1em 0.3em;/* 上 | 右 | 下 | 左 */
  padding: .2rem 2rem;/* 上下 | 左右 */
  background-color:white;
  border: 1px solid rgba(0, 0, 0, 0.12);
  word-break: break-all;/* 改行防止 */
  text-align: justify;/* 行揃え */
}

/* 前の記事ボタンのスライド */
/* 画面外にいる状態 */
.fadein {
  opacity : 0.1;
  transform : translate(0, 50px);
  transition : all 500ms;
  }

/* 画面内に入った状態 */
.fadein.scrollin {
  opacity : 1;
  transform : translate(0, 0);
  }









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


/* カード横並べ用コンテナ */
.container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1rem;
}

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

.card2{
  width: 300px;
  height: auto;
  margin: 5px ;    /* 左右に[auto]を指定することで、真ん中に寄る */
  padding: 0 ;      /* 上右下左 */
}

.card__imgframe{
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  background: url(parts/kiwidesign_card.jpg) 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);
}

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

.card01__imgframe{
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  background: url(parts/card01.jpg) no-repeat center;
  background-size: cover;
  box-sizing: border-box;
}

.card02__imgframe{
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  background: url(parts/card02.jpg) no-repeat center;
  background-size: cover;
  box-sizing: border-box;
}

.card03__imgframe{
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  background: url(parts/card03.jpg) no-repeat center;
  background-size: cover;
  box-sizing: border-box;
}

.card04__imgframe{
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  background: url(parts/card04.jpg) no-repeat center;
  background-size: cover;
  box-sizing: border-box;
}

.card05__imgframe{
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  background: url(parts/card05.jpg) no-repeat center;
  background-size: cover;
  box-sizing: border-box;
}

.card06__imgframe{
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  background: url(parts/card06.jpg) no-repeat center;
  background-size: cover;
  box-sizing: border-box;
}

.card07__imgframe{
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  background: url(parts/card07.jpg) no-repeat center;
  background-size: cover;
  box-sizing: border-box;
}

.card08__imgframe{
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  background: url(parts/card08.jpg) no-repeat center;
  background-size: cover;
  box-sizing: border-box;
}

.card09__imgframe{
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  background: url(parts/card09.jpg) no-repeat center;
  background-size: cover;
  box-sizing: border-box;
}

.card10__imgframe{
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  background: url(parts/card10.jpg) no-repeat center;
  background-size: cover;
  box-sizing: border-box;
}


/* 768pxx以下の画面に適用するCSS */
@media screen and (max-width:769px)
{
  .card{
    width: auto ;   /* スマホではデフォルトなんだけど */
    padding: 0 10px ; /* 左右に10pxずつ余白 */
  }
  .card__overviewtext{
  font-size: 1.1em;
  }
  .card2{
    width: auto ;   /* スマホではデフォルトなんだけど */
    padding: 0 10px ; /* 左右に10pxずつ余白 */
  }
}


/* カード全体にリンク広げる */
.hoge {
    position: relative;
    z-index: 1; /* 必要であればリンク要素の重なりのベース順序指定 */
}
.hoge a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
    z-index: 2; /* 必要であればリンク要素の重なりのベース順序指定 */
}
.hoge:hover {
    filter:alpha(opacity=70);/* IE 6,7*/
    -ms-filter: "alpha(opacity=70)";/* IE 8,9 */
    -moz-opacity:0.7;/* FF , Netscape */
    -khtml-opacity: 0.7;/* Safari 1.x */
    opacity:0.7;
    zoom:1;/*IE*/
}


/* ページトップへ */
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}


/* ページトップのレイヤーを最上部へ */
.z-index-1ban{
    position: absolute;
    z-index: 3;/* 数値が大きいほど上層 */
}