@charset "utf-8";

:root{
  --color-cmpny: #008bc5;		/* インタフェースブルー		*/
  --color-prdc: #dc3314;		/* インタフェースレッド		*/
  --color-svc: #fbc200;		/* インタフェースイエロー	*/
  --color-prcs: #009898;		/* インタフェースグリーン	*/
  --color-gp: #364691;			/* インタフェースバイオレット	*/
  --color-lt-cmpny: #afcbe3;		/* ライトブルー			*/
  --color-lt-prdc: #eacfcd;		/* ライトレッド			*/
  --color-lt-svc: #f7e6c5;		/* ライトイエロー		*/
  --color-lt-prcs: #c4d7c6;		/* ライトグリーン		*/
  --color-lt-gp: #cfc9db;		/* ライトバイオレット		*/

  --color-black: #09151a;		/* インタフェースブラック	*/	
  --color-navy: #374e57;		/* インタフェースネイビー	*/	
  --color-blue: #008bc5;		/* インタフェースブルー		*/
  --color-red: #dc3314;		/* インタフェースレッド		*/
  --color-yellow: #fbc200;		/* インタフェースイエロー	*/
  --color-green: #009898;		/* インタフェースイエロー	*/
  --color-violet: #364691;		/* インタフェースバイオレット	*/
  --color-light-gray: #dbdfef;	/* ライトグレー			*/
  --color-light-blue: #afcbe3;	/* ライトブルー			*/
  --color-light-red: #eacfcd;		/* ライトレッド			*/
  --color-light-yellow: #f7e6c5;	/* ライトイエロー		*/
  --color-light-green: #c4d7c6;	/* ライトグリーン		*/
  --color-light-yellowgreen: #dce0c0;	/* ライトグリーン		*/
  --color-light-violet: #cfc9db;	/* ライトバイオレット		*/
}

body{
  font-family:sans-serif;
  cursor: auto;
  line-height: 1.2;
  box-sizing: border-box;

  color: var(--color-black);
}

/* aタグ */
a{
  color: var(--color-blue);
  text-decoration:underline;
}
a:visited{
  color: var(--color-violet);
}
a:hover{
  color: var(--color-red);
  transition: 0.3s;
}

/* tableタグ */
table {
  border-color: var(--color-black);
}

/* imgタグ */
img {
  vertical-align: baseline;
}

/* ▼ボタン（共通装飾＋非選択状態の装飾） */
button {
  color: var(--color-black);
  background-color: #E8E8E8;
}

/* ▼ボタンにポインタが載った際の装飾 */
button:hover {
  cursor: pointer;
  background-color:var(--color-lt);
  color:var(--color);
}

/*	ページトップに戻るフローティングボタン		*/
.btn-top {
  height: 32px;
  width: 64px;
/*  position: fixed;*/
  position: sticky;
  display: block;
  float: right;
  right: 16px;
  bottom: 80px;
  background: var(--color-lt-gp);
  border-radius: 8px;
  line-height: 32px;
  z-index: 2;
  opacity:0.9;
  box-shadow: 0 4px 6px var(--color-black);
  font-family:sans-serif;
  font-weight: bold;
}



/* 説明用表の定義 （製品個別ページなど） */
.description-table {
  border-radius: 8px;
  border-spacing: 0;
  border:none;
  border-left: 2px solid var(--color-black);
  border-top: 2px solid var(--color-black);
  border-collapse: separate;
}
.description-table tr>*{
  padding: 4px 4px;
  border: none;
  border-right: 2px solid var(--color-black);
  border-bottom: 2px solid var(--color-black);
 }
 .description-table tr:first-child td:first-child {
  border-radius: 8px 0 0 0;
 }
 .description-table tr:first-child td:last-child {
  border-radius: 0 8px 0 0;
 }
 .description-table tr:last-child td:first-child {
  border-radius: 0 0 0 8px;
 }
 .description-table tr:last-child td:last-child {
  border-radius: 0 0 8px 0;
 }
 
/* 区切り用表の定義 （列は1列、行は複数行。） */
.description-table-tate {
  border-radius: 8px;
  border-spacing: 0;
  border:none;
  border-collapse: separate;
  margin:2px;
}
.description-table-tate tr>*{
  padding: 4px 2px;
  border: none;
 }
 .description-table-tate tr td {
  border:none;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
 }
 .description-table-tate tr:first-child th {
  background:linear-gradient(to bottom,white 0%,var(--color-lt) 50%,white 100%);
  border-radius: 8px 8px 8px 8px;
  border-left: 2px solid var(--color-black);
  border-right: 2px solid var(--color-black);
  border-top: 2px solid var(--color-black);
  border-bottom: 2px solid var(--color-black);
 }

.header{
  display: block;
  background: #ffffff;
  width: 100%;
  text-align: center;
/*  padding-top: 10px;*/
}

.head-items{
  position:relative;
  display: grid;
  width: 100%;
  /* grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-template-areas:*/
  grid-template: "head-logo1 head-search head-icon head-logo2";
/*  place-items: center stretch;*/
  gap: 0em;
}

#head-logo1{
  grid-area:head-logo1;
}

.head-logo1{
/*  margin-right: auto;
  margin-left: 40px;*/
 width: 180px; height: auto;
 float:left;
 margin: 8px;
}

#head-logo2{
  grid-area:head-logo2;
}

.head-logo2{
/*  margin-right: 40px;*/
  width: 60px;
  height: auto;
  display: block;
  float:right;
}

.head-logo2:hover{
  transform: scale(1.1);
  opacity: 0.6;
}

#head-search{
  grid-area:head-search;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.head-search{
/*  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  box-sizing: border-box;
*/
  width: calc(300px - 5em);
  height: 2em;
  border-radius: 0.5em 0 0 0.5em;
  border: solid 1px #ccc;
  background: #fff;
  padding-left: 0.5em;
  text-align: left;
  margin-right:0px;
  float:right;
}

.head-submit{
  grid-area:head-submit;
/*  position: absolute;
  left: 0;*/
  width: 5em;
  border-radius: 0 0.5em 0.5em 0;
  border: solid 1px #ccc;
  height: 2em;
  background: #333;
  color: #fff;
  text-align: center;
  margin-left:-1px;
  float:right;
}

.head-submit:hover{
  opacity: 0.8;
}

#user-login {
  grid-area:user-login;
/*  display: flex;
  margin: 0 20px;*/
  background: #333;
  color: #fff;
  width: 6em;
  height: 2em;
  align-items: center;
  justify-content: center;
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  border: solid 1px #333;
}

#user-login:hover {
  opacity: 0.8;
}

.head-icon {
  grid-area:head-icon;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap:4px 4px;
  font-family:sans-serif;
  padding:4px;
  color:#ffffff;
  font-weight: bold;
  font-size:0.9em;
  white-space:nowrap;
}

.head-icon a{
  color: white;
  cursor: pointer;
  display: block;
  padding: 0.5em 0.5em;
  text-align: center;
  text-decoration: none;
  margin: 2px;
  border-radius:5px;
  border:solid 1px #ccc;
  background-color: var(--color-gp);
  height:1em;
  line-height:1em;
}


.main{
  text-align: center;
  margin:0 auto;
  max-width: 1200px;
  min-width: 375px;
  width: 100%;
  justify-self: center;
  z-index: 2;
  align-items: center;
  gap: 0 ;
  position: relative;
  break-before:auto;
  break-after:auto;
  break-inside:auto;
}

.top-banner{
  display: block;
  position: relative;
  top: 0;
  max-width: 100%;
  height: 135px;
}

.top-banner img{
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: auto;
}

.top-banner_select{
  position: relative;
  display: flex;
}

.top-banner_select a{
  display: block;
  background-color: #6c93a0;
  border-radius: 1px;
  height: 6px;
  width: 1.5rem;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
}

/* 見出し */
h2.top-desc{
  text-align:center;
  font-size: 1.5rem;
  letter-spacing: 2px;
}

/* 4つのバナー */
.top-card-lnk{
  display: grid;
  margin: 20px;
  padding: 8px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: minmax(40px, 120px);
  grid-template-areas: "top-card-lnk__1 top-card-lnk__2 top-card-lnk__3 top-card-lnk__4";
  gap: 10px;
  justify-content:center;
}

.top-card-lnk a{
  background: var( --color-lt-gp);
}

.top-card-lnk__1{
  display: flex;
  place-items: center;
  text-align: center;
  justify-content:center;
  grid-area: top-card-lnk__1;
}

.top-card-lnk__2{
  display: flex;
  place-items: center;
  text-align: center;
  justify-content:center;
  grid-area: top-card-lnk__2;
}

.top-card-lnk__3{
  display: flex;
  place-items: center;
  text-align: center;
  justify-content:center;
  grid-area: top-card-lnk__3;
}

.top-card-lnk__4{
  display: flex;
  place-items: center;
  text-align: center;
  justify-content:center;
  grid-area: top-card-lnk__4;
}

.footer{

}

#footer {
  text-decoration: none;
}


/* ヘッダー内のメニュー */
.menubar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap:4px 4px;
  font-family:sans-serif;
  padding:4px;
  color:#ffffff;
  font-weight: bold;
  font-size:1.05em;
  white-space:nowrap;
  margin-bottom:4px;
}

.menubar a{
  color: white;
  cursor: pointer;
  display: block;
  padding: 0.5em 0.5em;
  text-align: center;
  text-decoration: none;
  margin: 2px;
  border-radius:5px;
  border:solid 1px #ccc;
/*  border-color:var(--color-navy);*/
  text-shadow:
    1px  1px 0 var(--color-black),
   -1px  1px 0 var(--color-black),
   -1px -1px 0 var(--color-black),
    1px -1px 0 var(--color-black),
    1px  0px 0 var(--color-black),
    0px  1px 0 var(--color-black),
   -1px  0px 0 var(--color-black),
    0px -1px 0 var(--color-black);
}

.h-cmpny{
  flex: 1;
  background: var(--color-cmpny);
}

.h-prdc{
  flex: 1;
  background: var(--color-prdc);
}

.h-svc{
  flex: 1;
  background: var(--color-svc);
}

.h-prcs{
  flex: 1;
  background: var(--color-prcs);
}

.h-gp{
  flex: 1;
  background: var(--color-gp);
}

.h-cmpny:hover{
  background: var(--color-lt-cmpny);
}

.h-prdc:hover{
  background: var(--color-lt-prdc);
}

.h-svc:hover{
  background: var(--color-lt-svc);
}

.h-prcs:hover{
  background: var(--color-lt-prcs);
}

.h-gp:hover{
  background: var(--color-lt-gp);
}




.top-nav{
  max-width: 100%;
  background: #f4f5f7;
}


.top-nav nav{
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-template-rows: repeat(4, 80px);
  gap: 12px 0;
/*  max-width: 860px;
  min-width: 360px;*/
  background: #f4f5f7;
  padding: 10px;
  margin: 0 auto;
}

.top-nav__img,
.top-nav__img a{
  background: var(--color-gp);
  color: #fff;
}

.top-nav ul{
  display: flex;
  background: #fff;
  height: 100%;
  box-sizing: border-box;
  align-items: center;
}
    
.top-nav li{
  display: block;         
}

    
.top-nav li:before{
  content: "/";
  margin-left: 1em;
  margin-right: 0.5em;
}
    
.top-nav li:first-child::before{
  content: none;
}


.news h2{
  font-size: 1.5rem;
}

.news{
  width: 100%;
}

.news tr{
/*  display: grid;
  grid-template-columns: minmax(8em, 9em) minmax(4.5em, 6em) 1fr;
  grid-template-rows: minmax(2.5em, 4em);*/
  border-top: 1px solid #ccc;
/*  gap: 1em;*/
  padding: 0 0.5em;
}
  
.news tr:last-child{
  border-bottom: 1px solid #ccc;
}
    
td.news-date,
td.news-category{
/*  place-self: center;*/
  font-weight: bold;
  white-space: nowrap;
  padding:4px;
  border-collapse:collapse;
}

td.news-text{
  font-weight: normal;
  padding:4px;
  border-collapse:collapse;
/*  align-self: center;*/
}

td.news-text a:hover{
  color: var(--color-red);  
}


/* ---------------------------------- */
/* 第2階層                             */
/* ---------------------------------- */

/* ▼タブ機能の掲載領域の装飾 */
.tabbox {
  margin: 0px;
  padding-top: 2em;
}

/* ▼タブ機能を制御するラジオボタン（非表示にする） */
.tabbox input[type=radio] {
  display: none;
}

/* ▼タブ（共通装飾＋非選択状態の装飾） */
.tab {
  width:28%;
  display: inline-block;
  border-width: 1px 1px 0px 1px;
  border-style: solid;
  border-color: black;
  border-radius: 0.75em 0.75em 0px 0px;
  padding: 0.5em 0.75em;
  color: black;
  background-color: #e0e0e0;
  font-weight: bold;
  margin-left: 2px;
  text-align:center;
}

/* ▼タブにマウスポインタが載った際の装飾 */
.tab:hover {
  cursor: pointer;
  background-color:var(--color-lt);
  color:var(--color);
}

/* ▼チェックが入っているラジオボタンの隣にあるタブの装飾（＝選択状態のタブ） */
input:checked + .tab {
  color: #000;
  background-color: #fff;
  position: relative;
  z-index: 10;
}

/* ▼タブの中身（共通装飾＋非選択状態の装飾） */
.tabcontent {
  width:98%;
  display: none;
  border: 1px solid black;
  margin-top: -1px;
  position: relative;
  z-index: 0;
  background-color: #fff;
  margin-left: 2px;
}

/* ▼チェックが入っているラジオボタンに対応するタブの中身を表示する */
#tabcheck1:checked ~ #tabcontent1 { display: block; }
#tabcheck2:checked ~ #tabcontent2 { display: block; }
#tabcheck3:checked ~ #tabcontent3 { display: block; }

a:link.Interface_detail_menu_1 { 
  text-decoration: none; 
} 

a:link.Interface_detail_menu_2 { 
  text-decoration: none; 
} 

a.Interface_detail_menu_1{
  display:block;
  width:100%;
  height:50px;
  color: black;
  padding:28px 0px 12px;
}

a:hover.Interface_detail_menu_1 { 
  cursor: pointer;
  color:var(--color);
  background: linear-gradient(to top,var(--color-lt),white,var(--color-lt))
}

a.Interface_detail_menu_2{
  display:block;
  width:100%;
  height:50px;
  color: black;
  padding:20px 0px;
  font-size: 1.2em;
}

a:hover.Interface_detail_menu_2 { 
  cursor: pointer;
  font-weight: bold;
  color:var(--color);
  background: linear-gradient(to top,var(--color-lt),white,var(--color-lt))
}

.Interface_detail {
  width:100%;
  border-collapse:separate;
  table-layout:fixed;
  border-spacing:4px;
}

table.Interface_detail td a{
  display:block;
  background: linear-gradient(to top,#e8e8e8,white,#e8e8e8);
}

table.spec {
  border: solid 1px var(--color-black);
}

table.spec td {
  border: solid 1px var(--color-black);
  padding: 4px;
}

table.spec th {
  border: solid 1px var(--color-black);
  padding: 4px;
  background: var(--color-lt-gp);
}

.shadow-main-button {
    height:64px;
    width:100%;
    background-color: #E8E8E8;
    color: black;
    padding: 0px 0px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    border-radius: 2px;
}

.shadow-main-button:hover {
    cursor:pointer;
    background-color: #E0E0E0;
}


/* ---------------------------------- */
/* 第3階層                             */
/* ---------------------------------- */
.con {
  display: inline;
  break-before:auto;
  break-after:auto;
  break-inside:auto;
}

.main_con {
  display: inline;
  width:100%;
  break-before:auto;
  break-after:auto;
  break-inside:auto;
}
 
.side_con {
  display: flex;
  flex-direction:column;
  width:98%;
  position: relative;
  margin:auto;
  break-before:auto;
  break-after:auto;
  break-inside:auto;
}
.side {
  padding: 8px;
  position: absolute;
  overflow: hidden;
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content: center;
  gap:8px 16px;
  display: none;
  z-index:11;
  margin-top:-11px;
  break-before:auto;
  break-after:auto;
  break-inside:auto;
}


#h-cmpny {
  background-color: color-mix(in srgb,var(--color-lt-gp) 90%, transparent);
  backdrop-filter:blur(8px);
}
#h-cmpny.side a{
  background-color: var(--color-lt-cmpny);
}
#h-cmpny.side a:hover{ 
 cursor: pointer;
 background-color: var(--color-cmpny);
}

#h-prdc {
  background-color: color-mix(in srgb,var(--color-lt-gp) 90%, transparent);
  backdrop-filter:blur(8px);
}
#h-prdc.side a{
  background-color: var(--color-lt-prdc);
}
#h-prdc.side a:hover{ 
 cursor: pointer;
 background-color: var(--color-prdc);
}


#h-svc {
  background-color: color-mix(in srgb,var(--color-lt-gp) 90%, transparent);
  backdrop-filter:blur(8px);
}
#h-svc.side a{
  background-color: var(--color-lt-svc);
}
#h-svc.side a:hover{ 
 cursor: pointer;
 background-color: var(--color-svc);
}

#h-prcs {
  background-color: color-mix(in srgb,var(--color-lt-gp) 90%, transparent);
  backdrop-filter:blur(8px);
}
#h-prcs.side a{
  background-color: var(--color-lt-prcs);
}
#h-prcs.side a:hover{ 
 cursor: pointer;
 background-color: var(--color-prcs);
}

/* 第2層へのリンク*/
#h-cmpny .m-cmpny a{
  text-align:center;
  font-size:1.1em;
  font-weight:bold;
  width:100%;
  color:white;
  background-color:var(--color-cmpny);
}

#h-cmpny .m-cmpny a:hover{
  background-color:var(--color-lt-cmpny);
}

#h-prdc .m-prdc a{
  text-align:center;
  font-size:1.1em;
  font-weight:bold;
  width:100%;
  color:white;
  background-color:var(--color-prdc);
}

#h-prdc .m-prdc a:hover{
  background-color:var(--color-lt-prdc);
}

#h-svc .m-svc a{
  text-align:center;
  font-size:1.1em;
  font-weight:bold;
  width:100%;
  color:white;
  background-color:var(--color-svc);
}

#h-svc .m-svc a:hover{
  background-color:var(--color-lt-svc);
}

#h-prcs .m-prcs a{
  text-align:center;
  font-size:1.1em;
  font-weight:bold;
  width:100%;
  color:white;
  background-color:var(--color-prcs);
}

#h-prcs .m-prcs a:hover{
  background-color:var(--color-lt-prcs);
}


.side a{
  color: white;
  cursor: pointer;
  display: block;
  padding: 0.5em 0.5em;
  text-decoration: none;
  border-radius:5px;
  border:solid 1px #ccc;
  margin:2px;
  font-size:1em;
  font-weight:bold;
  white-space:nowrap;
  height:1.5em;
  line-height:1.5em;
  flex:1;
  text-shadow:
    1px  1px 0 var(--color-black),
   -1px  1px 0 var(--color-black),
   -1px -1px 0 var(--color-black),
    1px -1px 0 var(--color-black),
    1px  0px 0 var(--color-black),
    0px  1px 0 var(--color-black),
   -1px  0px 0 var(--color-black),
    0px -1px 0 var(--color-black);
}

.side_item {

}

.side a:hover{ 
 cursor: pointer;
 background-color: var(--color-lt);
}

.side a:active{ 
 border:solid 2px var(--color);
 background-color: var(--color-lt);
 color:var(--color-yellow);
}

.side_item.is-active {
 border:solid 2px var(--color);
 background-color: var(--color-lt);
 color:var(--color-yellow);
}

.side.open {
  float: none;
  display: block;
}

.side.open a {
  float: none;
  display: block;
}


/* 画面の横幅が600px以下の場合 */
@media screen and (max-width: 600px) {
  body{
    line-height: 1.8;
  }

  .main{
    max-width: 100%;
  }

  .head-items{
    grid-template: "head-logo1 head-icon head-icon"
                   "head-search head-search head-logo2";
  }

  .head-logo1{
    width: 30vw;
    height: auto;
  }

  .head-logo2{
    width: 15vw;
    height: auto;
  }

  .head-search{
/*    font-size: 0.8em;*/
    width: calc(250px - 3em);
/*    height: 1.5em;*/
  }

  .head-submit{
    width: 3em;
/*    font-size: 0.8em;*/
  }

  .head-icon a{
    font-size:0.7em;
    font-weight: normal;
  }

  .user-login {
    font-size: 1em;
  }

  .top-banner{
    height: 100px;
  }

  .top-banner_select {
    justify-content: center;
  }

  /* メニュー */
  .menubar {
    padding:0px;
    gap:4px 1px;
  }
  .menubar a{
    font-size:0.7em;
    font-weight: normal;
    padding: 0.5em 0.1em;
    margin: 1px;
    margin-top:6px;
    margin-bottom:6px;
  }


/*  .menubar {
    font-size: 1em;
    flex-direction: column;
  }
  .menubar a:not(:first-child) {
    display: none;
  }
  .menubar a.menuicon {
    font-size: 1.1em;
    font-weight:bold;
    display: flex;
    position: absolute;
    right: 10px;
    top: 0;
  }
  .menubar.open a {
    float: none;
    display: block;
  }
  .menubar.open .menuicon {
    font-size: 1.1em;
    font-weight:bold;
    position: absolute;
    right: 10px;
    top: 0;
  }*/
  /* 4つのバナー */
  .top-card-lnk{
    display: grid;
    grid-template-columns: repeat(2, 150px);
    grid-template-rows: repeat(2, 4em);
    grid-template-areas: "top-card-lnk__1 top-card-lnk__2" "top-card-lnk__3 top-card-lnk__4";
    gap: 10px;
    width: 90%;
    margin: 0 auto;
    font-size: 0.8em;
  }


  .top-nav nav{
    display: block;
  }
  .top-nav ul{
    display: block;
  }

  .top-nav li:before{
    content: "・";
    margin-left: 1em;
    margin-right: 0em;
  }
    
  .top-nav li:first-child::before{
    content: "・";
    margin-left: 1em;
    margin-right: 0em;
  }

  /* 見出し */
  h2.top-desc{
    font-size: 0.8rem;
    letter-spacing: 0px;
  }

  /* ---------------------------------- */
  /* 第2階層                             */
  /* ---------------------------------- */
  /* ▼タブ（共通装飾＋非選択状態の装飾） */
  .tab {
    width:31.8%;
    padding: 0.2em 0em;
    font-size: 0.65em;
    font-weight: normal;
  }
  .Interface_detail {
    border-spacing:1px;
  }
  .Interface_detail_menu_1 {
    font-size: 0.7em;
  }
  .Interface_detail_menu_2 {
    font-size: 0.7em;
  }
  a.Interface_detail_menu_2{
    height: 40px;
    font-size: 0.7em;
  }


  td.news-date,
  td.news-category{
  /*  place-self: center;*/
    font-size: 0.7em;
    font-weight: normal;
    padding:2px;
  }

  td.news-text{
    font-size: 0.7em;
    font-weight: normal;
    padding:2px;
  }

  td.news-text img{
    width:200px;
  }


  /* ---------------------------------- */
  /* 第3階層                             */
  /* ---------------------------------- */
  .con {

  }

  .main_con {
    width: 99%;
    font-size:0.9rem;
  }

  .main_con td{
    font-size:0.9rem;
  }

  .side_con {
/*    position:fixed;*/
/*    flex-direction:row;
    flex-wrap:wrap;
    max-width:100%;
    width:100%;*/
  }
  .side {
/*    width:100%;*/
    flex-direction:row;
    flex-wrap:wrap;
    font-size:0.9rem;
    justify-content: space-around;
    gap:2px 4px;
  }

  .side a {
    font-size:0.9em;
  }

  .side a.menuicon {
/*    width:100%;*/
  }

  .logo_interface {
    width: 120px;
  }

  /*　h1 ロゴ画像調整 */
  h1 > img.logo_interface{
    width: 120px;
    vertical-align: -25%;
    height: auto;
    margin-right: 0.3em;
  }
}

/* 画面の横幅が390px以下の場合 (iphone SE3 など)*/
@media screen and (max-width: 390px){
  /* ---------------------------------- */
  /* 第1階層                             */
  /* ---------------------------------- */


  /* ---------------------------------- */
  /* 第2階層                             */
  /* ---------------------------------- */

  /* ---------------------------------- */
  /* 第3階層                             */
  /* ---------------------------------- */

}



/* margin調整用 */
.mrgin_all2{ margin: 2px; }
.mrgin_all4{ margin: 4px; }
.mrgin_all8{ margin: 8px; }
.mrgin_all12{ margin: 12px; }
.mrgin_all14{ margin: 14px; }
.mrgin_all16{ margin: 16px; }
.mrgin_all18{ margin: 18px; }
.mrgin_all20{ margin: 20px; }
.mrgin_all22{ margin: 22px; }
.mrgin_all24{ margin: 24px; }
.mrgin_all26{ margin: 26px; }
.mrgin_all28{ margin: 28px; }
.mrgin_all32{ margin: 32px; }
.mrgin_all36{ margin: 36px; }
.mrgin_all40{ margin: 40px; }
.mrgin_all48{ margin: 48px; }
.mrgin_all60{ margin: 60px; }
.mrgin_all64{ margin: 64px; }
.mrgin_all80{ margin: 80px; }
.mrgin_all100{ margin: 100px; }
.mrgin_all160{ margin: 160px; }
.mrgin_all180{ margin: 180px; }
.mrgin_all200{ margin: 200px; }
.mrgin_top2{ margin-top: 2px; }
.mrgin_top4{ margin-top: 4px; }
.mrgin_top8{ margin-top: 8px; }
.mrgin_top12{ margin-top: 12px; }
.mrgin_top14{ margin-top: 14px; }
.mrgin_top16{ margin-top: 16px; }
.mrgin_top18{ margin-top: 18px; }
.mrgin_top20{ margin-top: 20px; }
.mrgin_top22{ margin-top: 22px; }
.mrgin_top24{ margin-top: 24px; }
.mrgin_top26{ margin-top: 26px; }
.mrgin_top28{ margin-top: 28px; }
.mrgin_top32{ margin-top: 32px; }
.mrgin_top36{ margin-top: 36px; }
.mrgin_top40{ margin-top: 40px; }
.mrgin_top48{ margin-top: 48px; }
.mrgin_top60{ margin-top: 60px; }
.mrgin_top64{ margin-top: 64px; }
.mrgin_top80{ margin-top: 80px; }
.mrgin_top100{ margin-top: 100px; }
.mrgin_top160{ margin-top: 160px; }
.mrgin_top180{ margin-top: 180px; }
.mrgin_top200{ margin-top: 200px; }
.mrgin_right2{ margin-right: 2px; }
.mrgin_right4{ margin-right: 4px; }
.mrgin_right8{ margin-right: 8px; }
.mrgin_right12{ margin-right: 12px; }
.mrgin_right14{ margin-right: 14px; }
.mrgin_right16{ margin-right: 16px; }
.mrgin_right18{ margin-right: 18px; }
.mrgin_right20{ margin-right: 20px; }
.mrgin_right22{ margin-right: 22px; }
.mrgin_right24{ margin-right: 24px; }
.mrgin_right26{ margin-right: 26px; }
.mrgin_right28{ margin-right: 28px; }
.mrgin_right32{ margin-right: 32px; }
.mrgin_right36{ margin-right: 36px; }
.mrgin_right40{ margin-right: 40px; }
.mrgin_right48{ margin-right: 48px; }
.mrgin_right60{ margin-right: 60px; }
.mrgin_right64{ margin-right: 64px; }
.mrgin_right80{ margin-right: 80px; }
.mrgin_right100{ margin-right: 100px; }
.mrgin_right160{ margin-right: 160px; }
.mrgin_right180{ margin-right: 180px; }
.mrgin_right200{ margin-right: 200px; }
.mrgin_bottom2{ margin-bottom: 2px; }
.mrgin_bottom4{ margin-bottom: 4px; }
.mrgin_bottom8{ margin-bottom: 8px; }
.mrgin_bottom12{ margin-bottom: 12px; }
.mrgin_bottom14{ margin-bottom: 14px; }
.mrgin_bottom16{ margin-bottom: 16px; }
.mrgin_bottom18{ margin-bottom: 18px; }
.mrgin_bottom20{ margin-bottom: 20px; }
.mrgin_bottom22{ margin-bottom: 22px; }
.mrgin_bottom24{ margin-bottom: 24px; }
.mrgin_bottom26{ margin-bottom: 26px; }
.mrgin_bottom28{ margin-bottom: 28px; }
.mrgin_bottom32{ margin-bottom: 32px; }
.mrgin_bottom36{ margin-bottom: 36px; }
.mrgin_bottom40{ margin-bottom: 40px; }
.mrgin_bottom48{ margin-bottom: 48px; }
.mrgin_bottom60{ margin-bottom: 60px; }
.mrgin_bottom64{ margin-bottom: 64px; }
.mrgin_bottom80{ margin-bottom: 80px; }
.mrgin_bottom100{ margin-bottom: 100px; }
.mrgin_bottom160{ margin-bottom: 160px; }
.mrgin_bottom180{ margin-bottom: 180px; }
.mrgin_bottom200{ margin-bottom: 200px; }
.mrgin_left2{ margin-left: 2px; }
.mrgin_left4{ margin-left: 4px; }
.mrgin_left8{ margin-left: 8px; }
.mrgin_left12{ margin-left: 12px; }
.mrgin_left14{ margin-left: 14px; }
.mrgin_left16{ margin-left: 16px; }
.mrgin_left18{ margin-left: 18px; }
.mrgin_left20{ margin-left: 20px; }
.mrgin_left22{ margin-left: 22px; }
.mrgin_left24{ margin-left: 24px; }
.mrgin_left26{ margin-left: 26px; }
.mrgin_left28{ margin-left: 28px; }
.mrgin_left32{ margin-left: 32px; }
.mrgin_left36{ margin-left: 36px; }
.mrgin_left40{ margin-left: 40px; }
.mrgin_left48{ margin-left: 48px; }
.mrgin_left60{ margin-left: 60px; }
.mrgin_left64{ margin-left: 64px; }
.mrgin_left80{ margin-left: 80px; }
.mrgin_left100{ margin-left: 100px; }
.mrgin_left160{ margin-left: 160px; }
.mrgin_left180{ margin-left: 180px; }
.mrgin_left200{ margin-left: 200px; }

/* padding調整用 */
.pdng_all2{ padding: 2px; }
.pdng_all4{ padding: 4px; }
.pdng_all8{ padding: 8px; }
.pdng_all12{ padding: 12px; }
.pdng_all14{ padding: 14px; }
.pdng_all16{ padding: 16px; }
.pdng_all18{ padding: 18px; }
.pdng_all20{ padding: 20px; }
.pdng_all22{ padding: 22px; }
.pdng_all24{ padding: 24px; }
.pdng_all26{ padding: 26px; }
.pdng_all28{ padding: 28px; }
.pdng_all32{ padding: 32px; }
.pdng_all36{ padding: 36px; }
.pdng_all40{ padding: 40px; }
.pdng_all48{ padding: 48px; }
.pdng_all60{ padding: 60px; }
.pdng_all64{ padding: 64px; }
.pdng_all80{ padding: 80px; }
.pdng_all100{ padding: 100px; }
.pdng_all160{ padding: 160px; }
.pdng_all180{ padding: 180px; }
.pdng_all200{ padding: 200px; }
.pdng_top2{ padding-top: 2px; }
.pdng_top4{ padding-top: 4px; }
.pdng_top8{ padding-top: 8px; }
.pdng_top12{ padding-top: 12px; }
.pdng_top14{ padding-top: 14px; }
.pdng_top16{ padding-top: 16px; }
.pdng_top18{ padding-top: 18px; }
.pdng_top20{ padding-top: 20px; }
.pdng_top22{ padding-top: 22px; }
.pdng_top24{ padding-top: 24px; }
.pdng_top26{ padding-top: 26px; }
.pdng_top28{ padding-top: 28px; }
.pdng_top32{ padding-top: 32px; }
.pdng_top36{ padding-top: 36px; }
.pdng_top40{ padding-top: 40px; }
.pdng_top48{ padding-top: 48px; }
.pdng_top60{ padding-top: 60px; }
.pdng_top64{ padding-top: 64px; }
.pdng_top80{ padding-top: 80px; }
.pdng_top100{ padding-top: 100px; }
.pdng_top160{ padding-top: 160px; }
.pdng_top180{ padding-top: 180px; }
.pdng_top200{ padding-top: 200px; }
.pdng_right2{ padding-right: 2px; }
.pdng_right4{ padding-right: 4px; }
.pdng_right8{ padding-right: 8px; }
.pdng_right12{ padding-right: 12px; }
.pdng_right14{ padding-right: 14px; }
.pdng_right16{ padding-right: 16px; }
.pdng_right18{ padding-right: 18px; }
.pdng_right20{ padding-right: 20px; }
.pdng_right22{ padding-right: 22px; }
.pdng_right24{ padding-right: 24px; }
.pdng_right26{ padding-right: 26px; }
.pdng_right28{ padding-right: 28px; }
.pdng_right32{ padding-right: 32px; }
.pdng_right36{ padding-right: 36px; }
.pdng_right40{ padding-right: 40px; }
.pdng_right48{ padding-right: 48px; }
.pdng_right60{ padding-right: 60px; }
.pdng_right64{ padding-right: 64px; }
.pdng_right80{ padding-right: 80px; }
.pdng_right100{ padding-right: 100px; }
.pdng_right160{ padding-right: 160px; }
.pdng_right180{ padding-right: 180px; }
.pdng_right200{ padding-right: 200px; }
.pdng_bottom2{ padding-bottom: 2px; }
.pdng_bottom4{ padding-bottom: 4px; }
.pdng_bottom8{ padding-bottom: 8px; }
.pdng_bottom12{ padding-bottom: 12px; }
.pdng_bottom14{ padding-bottom: 14px; }
.pdng_bottom16{ padding-bottom: 16px; }
.pdng_bottom18{ padding-bottom: 18px; }
.pdng_bottom20{ padding-bottom: 20px; }
.pdng_bottom22{ padding-bottom: 22px; }
.pdng_bottom24{ padding-bottom: 24px; }
.pdng_bottom26{ padding-bottom: 26px; }
.pdng_bottom28{ padding-bottom: 28px; }
.pdng_bottom32{ padding-bottom: 32px; }
.pdng_bottom36{ padding-bottom: 36px; }
.pdng_bottom40{ padding-bottom: 40px; }
.pdng_bottom48{ padding-bottom: 48px; }
.pdng_bottom60{ padding-bottom: 60px; }
.pdng_bottom64{ padding-bottom: 64px; }
.pdng_bottom80{ padding-bottom: 80px; }
.pdng_bottom100{ padding-bottom: 100px; }
.pdng_bottom160{ padding-bottom: 160px; }
.pdng_bottom180{ padding-bottom: 180px; }
.pdng_bottom200{ padding-bottom: 200px; }
.pdng_left2{ padding-left: 2px; }
.pdng_left4{ padding-left: 4px; }
.pdng_left8{ padding-left: 8px; }
.pdng_left12{ padding-left: 12px; }
.pdng_left14{ padding-left: 14px; }
.pdng_left16{ padding-left: 16px; }
.pdng_left18{ padding-left: 18px; }
.pdng_left20{ padding-left: 20px; }
.pdng_left22{ padding-left: 22px; }
.pdng_left24{ padding-left: 24px; }
.pdng_left26{ padding-left: 26px; }
.pdng_left28{ padding-left: 28px; }
.pdng_left32{ padding-left: 32px; }
.pdng_left36{ padding-left: 36px; }
.pdng_left40{ padding-left: 40px; }
.pdng_left48{ padding-left: 48px; }
.pdng_left60{ padding-left: 60px; }
.pdng_left64{ padding-left: 64px; }
.pdng_left80{ padding-left: 80px; }
.pdng_left100{ padding-left: 100px; }
.pdng_left160{ padding-left: 160px; }
.pdng_left180{ padding-left: 180px; }
.pdng_left200{ padding-left: 200px; }