@charset "UTF-8";
/* ページ全体の設定 */
body {
   margin: 0px;
   /* text-size-adjust: none;  * ANDROID Chrome文字サイズ自動拡大無効化 */
   -webkit-text-size-adjust: none;  /* iOS Safari文字サイズ自動拡大無効化 */
   background-image:url("backimage1.png");
}

.contents {
   background-color: #29abe2;
   padding: 25px 15px;
}

h1 {
  font-size:30px;
}

article {
  background-color: #ffffff;
  padding: 20px;
}

.topannai {
         width:90%;
         text-align:left;
		 margin-bottom:20px;
}
.kageblue {                     /* 文に影を付ける */
         text-shadow: #51E7FF 2px 2px 5px;
         margin:0px;
         padding:0px;
         align:left;
         text-align:left;
}
.kagegreen {                     /* 文に影を付ける */
         text-shadow: #B1FF2F 2px 2px 5px;
         margin:0px;
         padding:0px;
         align:left;
         text-align:left;
}
.nokage {                     /* 文に影を付けない */
         margin:0px;
         padding:0px;
         align:left;
         text-align:left;
}

/*== art declare =======================*/
/*-- art0     TOPICS                      --*/
/*-- art1 fig1 CATEGORY             box1h  --*/
/*-- art2 fig2 HYPERKEWL, PET, etc  box1w  --*/

/* box declare */
.box1h {
  width:auto;
  max-width:400px;
  margin:15px;
}
.box1w {
  width:auto;
  max-width:300px;
  margin:10px;
  margin-bottom:50px;
}

.box1 {
  max-width:250px;
  margin:5px;
}

.art0 {
   width: 90%;
   /* display:flex; */
   /* align-items:start; */
   margin-left:auto;
   margin-right:auto;
   text-align:center;
}
.art0 img {
   width:500px;
   padding:20px;
}

.art1 {
   justify-content:space-around;
}
.art2 {
   justify-content:space-around;
}

.art1 .box1h img{   /* CATHEGORYの写真*/
   width:auto;
   height:100px;
}
.art2 .box1w img{   /* 各製品のの写真*/
   width:auto;
   /*width:90%;*/
   height:280px;

   max-width:240px;
}
.art2 .box1w .price1 img{  /* アイコン */
   height:30px;
   width:auto;
}
.price1 img {              /* アイコン凡例 */
   height:30px;
   width:auto;
}

.art1 .fig1 img {
   width:auto;
   height:auto;
}

.art1 .box1h .fig1 img {
   width:10%;
   height:auto;
}
.art2 .box1w .fig2 img {
   height:50%;
   width:auto;
}

   /* ここから先はart2特有 */
.art2 .box1w figure {
   margin-left:auto;
   margin-right:auto;
   text-align:center;
}
.art2 .box1w .price1 {
   font-size:12px;
}

/* フッター部分 */
footer {
   background-color: #6ac4eb;
   padding: 15px 15px;
}
footer .small {
   font-size: 10px;
   width:80%;
   margin-left:auto;
   margin-right:auto;
   text-align:left;
}
footer .big {
   margin:0px;
   font-size: 18px;
}
footer nav {   /* 横並びメニュー */
   display: flex;
   padding: 0px;
   color: #ffffff;
   font-size: 12px;
}
footer ul { 
   list-style-type: none; /* 箇条書き・を消す */
   justify-content: space-around; /* UL全体Boxを中央へ */

   width:80%;
   text-align:center;
   margin-left:0px;
   margin-right:auto;
}
footer li { 
   display: inline;    /* 横並び liに対して指定 */
}

/* ヘッダー */
header {
   top:0px;  /* scroll固定するときはこれも一緒に指定 */
   position: fixed;  /* scroll omitted */

   width:100%;
   padding: 10px 15px;
   background-color: #000000;
   color: #00ff00;
   font-size:36px;
   font-weight:bold;
   text-align:center;
}

header .toplogo {    /* topのテクニッシュ日本営業部ロゴ */
   width:50%;
   max-height:94px;    /* 大きすぎるとスライドを圧迫する */
   max-width:635px;    /* 大きすぎるとスライドを圧迫する */
}

   /* MOBILE用 
.MenuMOBILE {
   display:flex;
   float-direction:column;
   float:left;
} */
   /* PC用 */
.MenuPC {
   width:100%;
   margin-left: auto;
   margin-right: auto;
}


/* リンク　色を変えない */
a {
   text-decoration: none;
   color: inherit ;
}

a:hover {
   opacity:0.5 ;
}

/* ナビゲーションメニュー */
.MenuPC ul {
  list-style: none;
  padding: 0px;
  color: #666666;
  font-size: 12px;
  display: flex;
  justify-content:center;
}
.MenuMOBILE .globalMenuSp li:not(:last-child) {
  margin-right:20px;
}

/* フッター */
footer {
   color:#ffffff;
   background-color:#6ac4eb;
   padding: 18px 15px;
   color:#ffffff;
   font-size:14px;
   text-align:center;
}

aside {
  background-color: #ffffff;
  padding: 20px;
  margin-top: 40px;
}

h2 {
  color: #29abe2;
  text-align: center;
}

p {
  font-size:16px;
  line-height:1.4;    /* line-heightには単位を付けない　*/
}

.profile figure {
   text-align:center;
}

.profile img {
   width: 100px;
   height: 100px;
   border-radius: 50%;   /* 丸く切り出す */
}

figure{
   margin:0;
}

/* トップページ　heroイメージ */
.hero0 {
   text-align:center;
   padding-top:160px;
}

.hero1 {    /* スライド */
   margin-top:40px;  /* 上の開ける高さMenuにかぶらない様に空冷服で160から変更 */
   background-size: cover;
   background-position: center;

   text-align:center;
   padding: 25px 15px;
}

.hero1 img {
   width: 100%;
   height:auto;
}

.hero {
   background-size: cover;
   background-position: center;
   height:100px;

   color: #ffffff;
   font-size: 14px;
   text-align:center;
   font-family: 'Exo 2', sans-serif;
   padding: 25px 15px;
 
   display: flex;
   justify-content:center;  /* 以下2行で横並びくっつけて表示 */
   align-items:center;

   flex-direction: column;   /* 縦に並べる */
   text-align: center;       /* 箱の中の文字を中央へ */

}

.hero h1 {
   font-size:40px;
   font-family: 'Exo 2', sans-serif;
   text-shadow: 0 0 10px #ff0000 ;
}
.hero p {
   font-weight: bold;
   text-shadow: 0 0 20px #444444;
   margin-top: 0;
}
.hero a {
   border: solid 2px #ffffff;
   padding: 10px 40px ;
   border-radius: 10px;  /* 角に丸みをつける */
   background-color: rgba(41,171,226,0.5); /* 半透明 */
   margin-top: 10px;
}

/* 記事の見出し */
.toppost h2 {  /* 大見出し */
   background:linear-gradient(transparent 80%, #99ccff 0%);
   font-size: 29px;
   margin-top:0px;
}
.toppost h3 {  /* 中見出し */
   background:linear-gradient(transparent 90%, #CCCCCC 90%);
   font-size: 20px;
   margin:0 ;
}
.fig20 {      /* 見出しの所のマーク */
   width:10%;
   height:auto;
   margin-left: 30%;
}

.toppost .refferh a {  /* もっと詳しく青 */
   border: solid 2px #00bbdd;
   padding: 4px 7px ;
   border-radius: 8px;
   background-color: rgba(81,231,255,0.7);
   font-size: 18px;
}
.toppost .refferc a {  /* もっと詳しく緑 */
   border: solid 2px #00bbdd;
   padding: 4px 7px ;
   border-radius: 8px;
   background-color: rgba(177,255,47,0.7);
   font-size: 18px;
}
.toppost article { padding: 0 ; }
.toppost { padding: 15px; }

.toppost div {  /* 横並びにして領域不足なら折り返す */
   display: flex;
   flex-wrap: wrap;

   margin-left: auto;  /* 効いてない */
   margin-right: auto;  /* 効いてない */
}

.toppost article {
   width: 48% ;
   flex: none;
}

.accessc {
   font-size:13px;
   text-align:center;
   margin-left: auto;
   margin-right: auto;
   align:center;
}


/************************************
 MOBILE スマホ明記の必要あり　追加部分   

  toppost フッター直前までの全体枠
    600PXより小さい画面の時は、 
*/
@media (max-width:600px) {

html {
  min-width:600px;
}

body {
  min-width:600px;
  font-size:10px;
}

.hero0 {
   text-align:center;
   margin-top:120px;
   padding-top:0px;
}

.hero1 {    /* スライド */
   margin-top:0px;  /* 上の開ける高さMenuにかぶらない様に空冷服で160から変更 */
   margin-bottom:10px;  /* これを入れないと下が食い込んでくる */
   height:200px;
}

.price1 {
  font-size:13px;
}

.box1h {   /* CATEGORY の箱 */
  width:auto;
  max-width:280px;
  margin:1px;
  margin-bottom:50px;
}

.box1w {   /* 各製品 の箱 */
  width:auto;
  max-width:300px;
  margin:1px;
  margin-bottom:50px;
}

 /* topics */
.art0 {
   width: 90%;
   /* display:flex; */
   /* align-items:start; */
   margin-left:auto;
   margin-right:auto;
   text-align:center;
   font-size:10px;
}
.art0 img {
   width:300px;
   padding:10px;
}

.art2 h3 {
   font-size:15px;
}

/* 動作変なため停める
.MenuPC {
   display:none;
}
*/

header .toplogo {
   display: flex ;
   width: 200px;
}

/* 動作変なため停める
.MenuMOBILE .globasMenuSp li {
   font-size: 8px;   /* ハンバーガの文字の大きさ */
   text-align: left;  /* levelを示すため頭位置を揃える */
   margin-left: 170px;
   margin-top: 0px;
   margin-bottom: 0px;
}
*/

.toppost article {
   width: 42% ;
   flex: none;
}

/* Category内の3個並んだ写真 */
.toppost .art1 .box1h img.fig1 {
   width:100%;
   height:auto;
}

.toppost .refferh a {  /* もっと詳しく青 小さくする*/
   border: solid 2px #00bbdd;
   padding: 2px 3px ;
   border-radius: 4px;
   font-size: 10px;
}
.toppost .refferc a {  /* もっと詳しく緑 小さくする*/
   border: solid 2px #00bbdd;
   padding: 2px 3px ;
   border-radius: 4px;
   font-size: 10px;
}

}


/************************************
 PC版　追加部分   680pxより広いとき
*/
@media (min-width:600px) {

.MenuMOBILE {      /* モバイルのメニューを消す */
   display:none;
}

.hero1 {    /* スライド */
   margin-top:160px;
}

header .toplogo {
  margin-right: 250px;
}

 /* 二重DIVの内側部分 */
.container {
  margin-left: auto;
  margin-right: auto;
}
  /* max-width: 800px; */


header .container {
  display: flex;
  justify-content: space-between; /* 均一割 */
}

h1 {
  font-size:40px;
}

.hero h1 {
  font-size:72px;
}

p {
  font-size:18px;
}

article {
  padding-left: 60px;
  padding-right: 60px;
}

.box1h {
  width:30%;
}

}    /* @media */


/************************************
 PC版(大)　追加部分  1025pxより広いとき 
*/
@media (min-width:1025px) {

/* .container { */
.hero1,.toppost {
   max-width: 1100px;
   margin-left:auto;
   margin-right:auto;
}

.art0 {
   max-width: 1100px;
}

.contents .container {
   display: flex;
   justify-content: space-between;
}

article {
   width: 68%;
   box-sizing: border-box;  /* padding含めて算出のため */
}

.sub {
   width: 28%;
}

.profile {
   margin-top:0;
}

}