@charset "utf-8";

/* ==========================

	
	File name: basic.css
	
	Summary: 基本設定
	
	last updated: 2021/08/27
	
	CONTENTS

       :枠組み
	   :見出し・リスト・文章等
	　 :見出し
	   :リスト
	   :図の配置
	   :コピーライト
	   :加工条件･加工事例


============================= */



/* 枠組み 
==================================================================================*/
main, article, aside, footer, header, nav, section {
  display: block;
}
body,table,th,td,div,h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd{margin:0;padding:0;}
body {
margin:0;
font-family:"メイリオ", "Meiryo", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-family:Verdana, Helvetica, sans-serif;
font-size:90%;
color:#111;
}

		  
/* 枠組みレイアウト
=================================================================================*/
header{position:relative;
		background-color:#999;
		width:760px;
        height: 100px;
		margin:0 auto;
        border-left: solid 1px #999;
        border-right: solid 1px #999;
		}
main{	  background:#fff;
		  border-left:solid 1px #999;
          border-right:solid 1px #999;
		  border-bottom:solid 1px #999;
		  width:760px;
		  margin:0 auto;
		  }
article{padding: 10px 20px;}

/*　見出し（h1, h2, h3 ） 段落
=================================== */ 

h1{
		font-size:large;
		color:#444;
		margin:10px 10px;
          }
h2{
	  	  font-size:96%;
		  font-weight:normal;
		  margin:10px 10px;
		  padding-left:1em;
          color:#222;
		  line-height:1.8em;
		 /* border-bottom:1px dotted #666;
		  border-left:5px solid #666;*/
          }
h3{
		  font-size:100%;
		  font-weight:bold;
		  text-indent:1em;
		  line-height:30px;
		  color:#222;
		  margin:0 0 5px 0px;
		  }
h4{
		font-size:110%;
		font-weight:300;
		line-height:1.4em;
		margin:10px 0;
        text-align: center;
}
h5{
		font-size:96%;
		color:#222;
		line-height:1.2em;
}

.sentence{
	margin-left:10px;
}
  
p{
		  margin:6px auto 10px 10px;
		  line-height:1.4em;
		  }
p.right{text-align: right;}
/*===============================リンク=====================================*/

a {text-decoration: none;}
a:link {color:#352ABC;}
a:hover,a:visited{
    color: inherit;
}	
/*　ページトップへリンク
=================================== */  
p.pagetop{
	font-size:94%;
	text-align:right;
	padding-right:20px;
	margin-top:25px;
} 
p.pagetop a{
	border-bottom:dotted 1px #666;
	}

/*　コピーライト（address）
=================================== */    
footer{
width:760px;
margin:30px auto;
border-top:#ccc dotted 1px;
padding-bottom:10px;
line-height:140%;
}
footer p{
margin-left:5px;
font-style:normal;
font-size:12px;
color:#666;
text-align:left;
}
footer address{
font-style:normal;
font-size:12px;
color:#666;
text-align:center;
padding-top:10px;

}

/*TOPページ
=================================== */
.menu_top {
	margin:30px auto;
	width:400px;
	display:block;
}
.container{
  height: 330px;
  width: 760px;
  position: relative;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  background-size:auto;
  background-position: center center;
  animation: image-switch-animation 32s infinite;
  border: thin #999;

}
.src1 {
  background-image:url("../img/main_01.png");background-repeat: no-repeat;
}
.src2 {
  background-image:url("../img/main_02.png");background-repeat: no-repeat;
}
.src3 {
  background-image:url("../img/main_03.png");background-repeat: no-repeat;
}
.src4 {
  background-image:url("../img/main_04.png");background-repeat: no-repeat;
}

 @keyframes image-switch-animation {
  0%{ opacity: 0;}
  5%{ opacity: 1;}
  25%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}
.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 8s;
}
.image:nth-of-type(3) {
  animation-delay: 16s;
}
.image:nth-of-type(4) {
  animation-delay: 24s;
}
/*バナー
=================================== */
.banner {
    margin: 50px auto;
    width: 650px;
    height: 60px;
overflow: hidden;
  background: #BBB;
}
.banner img{
cursor: pointer;
  transition-duration: 0.3s;
}

.banner:hover img{
  opacity: 0.6;
  transition-duration: 0.3s;
}

/*概要
=================================== */
.list-8 {
    position: relative;
    padding: 1.5em 1em 1em 2.5em;
    border: 2px solid #999;
    width:60%;
    margin: 30px auto;
}

.list-8 > div {
    position: absolute;
    top: -.75em;
    left: 1em;
    padding: 0 .5em;
    background-color: #fff;
    color: #666;
    font-weight: 600;
}

.list-8 ul {
    list-style-type: square;
    margin: 0;
    padding: 0;
}

.list-8 li {
    padding: .3em .3em .3em 0;
}

.list-8 li::marker {
    color: #999;
    font-size: 1.1em;
}

figure.outline_img {
    margin:auto;
	text-align:center;
}
figure.outline_img img{
    padding:10px;    
}
/*加工条件
=================================== */
div.emethod_{width: 400px;
    margin: 20px auto;}

dl.emethod{display: flex;
  flex-wrap: wrap;}
dl.emethod dt{width:40%; line-height: 2.0em;}
dl.emethod dd{width:60%; line-height: 2.0em;}

table.experimentmethods{
    width:400px;
    border:1px solid #fff;
	border-collapse:collapse;
	margin:20px auto;
}
table.experimentmethods th{
	width:90px;
	padding:6px;
	border:1px solid #fff;
    background: #B7CAD9;
    font-weight: normal;
}
table.experimentmethods td{
	border:1px solid #ccc;
	padding:6px;
}
/*加工事例
=================================== */
#elements-table {
          width: 95%;
          border-collapse: collapse;
          margin: auto;
      }
      th, td {
          border: 1px solid #ccc;
          padding: 8px;
          text-align: left;
          text-indent: 5px;
      }
#elements-table a { 
    color: #333; 
	padding-bottom: 10px; 
	text-decoration: none; /* 下線を非表示 */
	position: relative; /* 疑似要素の位置基準 */
}
#elements-table a::before {
	content: ""; /* 擬似要素の内容は空に設定 */
	position: absolute; /* リンクを基準に絶対位置を指定 */
	left: 50%; /* 下線を中央から表示するための開始位置 */
	bottom: 0; /* リンクテキストの下に下線を配置 */
	width: 0; /* 初期の下線幅を0に設定 */
	height: 2px; /* 下線の太さ */
	background-color: #333; /* 下線の色 */
	transition: all 0.4s ease; /* ホバー時の下線アニメーション効果 */
}
#elements-table a:hover::before {
	width: 100%; /* ホバー時に下線が全体に広がるよう設定 */
    left: 0; /* 下線の開始位置を左端に設定 */}

      .hidden {
          display: none;
      }
table.casemenu {
	width:600px;
	border:1px solid #06c;
	border-collapse:collapse;
	margin:auto;
}
table.casemenu th{
	width:150px;
	padding:8px;
	border:1px solid #06c;
}
table.casemenu td{
	border:1px solid #06c;
	padding:8px;
}
table.functionmenu {
	width:550px;
	margin:auto;
}
table.functionmenu th{
	text-align:left;
	font-weight:normal;
}
table.functionmenu td{
	text-align:left
}
.functionmenu th a{
	text-indent:0.8em;
	display:inline-block;
	border-radius:9px;
	background:#039;
	padding:4px;
	color:#fff;
	width:120px;
}
/*====== 各機能別加工条件トップページ、条件選択ページ ========*/

div#select40{width:400px;text-align:left;margin:2.5em auto;}
div#select45{width:450px;text-align:left;margin:2.5em auto;}
div#select50{width:500px;text-align:left;margin:2.5em auto;}
/*各機能別加工条件トップページ、条件選択ページ内の段落*/
div#select40 p, div#select45 p, div#select50 p{margin-bottom:5px;}
/*各機能別加工条件トップページ、条件選択ページ内のプルダウンメニューの幅、余白設定*/
div#select40 .pd, div#select45 .pd, div#select50 .pd{width:150px;margin-left:40px;margin-top:10px;}
#dbutton{width:150px;margin-left:40px;margin-top:10px}

/*グラフ*/
figure.case_graph{
	margin:auto;
	text-align:center;
}

/*画像*/
figure.case_img{
	margin:auto;
	text-align:center;
	}
figure.case_img img{
	padding:10px;
	border:groove #eee;
	}
figcaption{margin-bottom: 5px;}
/* 条件の表、事例データの表など */
table.datablue{
	width:670px;
border-collapse:collapse;
border:1px solid #fff;
border-spacing:0;
empty-cells:show;
margin:1.5em auto 1em auto;}
table.datablue caption{font-size:12px;font-weight:bold;}
table.datablue th{
background:#38374D;
text-align:center;
padding:3px;
font-size:12px;
font-weight:normal;
border:1px solid #fff;
color:#fff;
}

table.datablue td{
background:#B7CAD9;
text-align:center;
padding:3px;
border:1px solid #fff;
}
table.datablue th.method{width:85px;}
table.datablue th.material{width:105px;}
table.datablue td.method{width:85px;}
table.datablue td.material{width:105px;}
/* グラフ用の表 */
table.datatable {
    border-collapse: collapse;
    border: 1px solid #38374D;
    empty-cells: show;
    margin: 1em auto;
}
table.datatable th{
padding:3px;
border:1px solid #38374D;
}

table.datatable td{
padding:3px;
border:1px solid #38374D;
}

/*====== HEA合金3Dグラフ========================*/


/*====== 機能別加工条件・加工事例の条件部分 ========*/

/*---見出しの幅の設定あり（見出し5～6文字のものに適）---*/

table.cd40{width:400px;margin-top:10px;margin-left:auto;margin-right:auto;}
table.cd40 th{font-weight:bold;width:85px;text-align:left;font-size:80%;vertical-align:top;color:#38374D;padding:2px;}

table.cd45{width:450px;margin-top:10px;margin-left:auto;margin-right:auto;}
table.cd45 th{font-weight:bold;width:85px;text-align:left;font-size:80%;vertical-align:top;color:#38374D;padding:2px;}

table.cd50{width:500px;margin-top:10px;margin-left:auto;margin-right:auto;}
table.cd50 th{font-weight:bold;width:85px;text-align:left;font-size:80%;vertical-align:top;color:#38374D;padding:2px;}


/*====== 機能別加工条件・加工事例のコメント部分 ========*/

/* コメント枠・400ピクセル*/
div.comment40{
	 width:400px;
	 margin:20px auto 5px auto;
	 border:solid 1px #666;
	 background-color:#CDC2FE;
	 text-align:left;
	 padding:6px;
}	
/* コメント枠・450ピクセル */
div.comment45{
	 width:450px;
	 margin:20px auto 5px auto;
	 border:solid 1px #666;
	 background-color:#B7CAD9;
	 text-align:left;
	 padding:6px;
}	
/* コメント枠・500ピクセル */
div.comment50{
	 width:500px;
	 margin:20px auto 5px auto;
	 border:solid 1px #666;
	 background-color:#B7CAD9;
	 text-align:left;
	 padding:6px;
}
/* コメント枠・550ピクセル */ 
div.comment55{
     width:550px;
	 margin:20px auto 5px auto;
	 border:solid 1px #666;
	 text-align:left;
	 background-color:#B7CAD9;
	 padding:6px;
}
/* コメント枠内の段落(pタグ) */ 
div.comment40 p,div.comment45 p,div.comment50 p,div.comment55 p{text-indent:0.5em;margin:3px 0 0 3px;}


/*====== 機能別加工条件・加工事例の出典部分 ========*/

/* 一番良く使うのはこれです↓ */
div.source53{margin:15px auto 0 auto;width:530px;text-align:left;}
/* 上のスタイルで対応できないもの(時々ある、短いタイトルのもの) は下記をお使いください */
div.source35{margin:15px auto 15px auto;width:350px;text-align:left;}
div.source30{margin:15px auto 15px auto;width:300px;text-align:left;}
div.source40{margin:15px auto 15px auto;width:400px;text-align:left;}

/*====== 機能別加工条件・加工事例の組成 ========*/
.composition{
	margin:10px auto;
	border-collapse:collapse;
	border:solid 1px #666;
}
.composition th{
	background-color:#B7CAD9;
	line-height:1.4em;
	font-weight:normal;
	border:solid 1px #666;
	width:85px;
}
.composition td{
	line-height:1.4em;
	text-align:right;
	padding:0.4em;
	border:solid 1px #666;
	width:85px;
}
.composition_graph{
	text-align:center;
}
/*密度*/
.density{
	margin:10px auto 10px 15px;
	border-collapse:collapse;
	border:solid 1px #666;
		width:80px;

}
.density th{
	background-color:#B7CAD9;
	line-height:1.4em;
	font-weight:normal;
	border:solid 1px #666;

}
.density td{
	line-height:1.4em;
	text-align:right;
	padding:0.4em;
	border:solid 1px #666;

}
.hea_calc{
	margin:10px auto 10px 15px;
	border-collapse:collapse;
	border:solid 1px #666;
}
.hea_calc th{
	background-color:#B7CAD9;
	line-height:1.4em;
	font-weight:normal;
	border:solid 1px #666;
	width:80px;
}
.hea_calc td{
	line-height:1.4em;
	text-align:right;
	padding:0.4em;
	border:solid 1px #666;
	width:80px;
}

/*区切り線*/
.dotline {
	margin:auto;
	width:650px;
	border-bottom:2px dotted #999;
}
/*====== CALPHAD法=================*/
.calphad_comment{
    width: 80%;
    background-color: #eee;
    padding: 10px;
    margin: 0 auto;
}
/*====== 混合エントロピー計算 ========*/
section.culc{width: 95%;
            margin: 15px auto; 
}
.culc article {width: 550px;margin: 0 auto;}

/* 色説明用のスタイル */

.periodic-table{
    width: 80%;
    margin: 15px auto;
}
section.colorbox{
    width: 80%;
    margin: 5px auto 5px auto;
}
        .color-box {
            width: 100px;
            height: 2em;
            font-size: 12px;
            font-weight: normal;
            text-align: center;
            padding-top: 0.5em;
            display: inline-block;
            margin-right: 3px;
            border: 2px solid #ccc;
        }

        /* 各元素の色分け */
        /* 各グループに応じた色を定義 */
        .alkali-metal {
            background-color: #fd97be; /* アルカリ金属 */
        }

        .alkaline-earth-metal {
            background-color: #fcc680; /* アルカリ土類金属 */
        }

        .transition-metal {
            background-color: #fdf46e; /* 遷移金属 */
        }

        .halogen {
            background-color: #8998fc; /* ハロゲン */
        }

        .noble-gas {
            background-color: #46c1ff; /* 貴ガス */
        }

        .lanthanide {
            background-color: #f0e1fd; /* ランタノイド */
        }

        .actinide {
            background-color: #fce4e4; /* アクチノイド */
        }

        .other-metal {
            background-color: #c4fc7b; /* その他の金属 */
        }

        .metalloid {
            background-color: #5ffc5f; /* 半金属 */
        }

        .other-non-metal {
        background-color: #e7ecfc; /* その他の非金属 */
        }


 /* ボタンの基本スタイル */
        .element-button {
            width: 35px;
            height: 35px;
            margin: 1px;
            font-size: 14px;
            font-weight: normal; /* 通常の文字の太さ */
            text-align: center;
            border: 2px solid #ccc;
            cursor: pointer;
            transition: background-color 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
        }

        /* 未選択時のスタイル */
        .element-button:not(.selected) {
            opacity: 0.7;  /* 透明度を少し下げる */
        }

        /* 選択されたボタンのスタイル */
        .element-button.selected {
            border-color: #000; /* 枠線を濃く */
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); /* 選択時に影を付けて立体的に */
            opacity: 1;  /* 透明度を100%に */
            font-weight: bold; /* 文字を太くする */
        }
        .filter-button, .clear-button {
          margin: 5px;
          padding: 10px;
          border: 1px solid #ccc;
          cursor: pointer;
      }
          .active {
          border-color: #000; /* 枠線を濃く */
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); /* 選択時に影を付けて立体的に */
          opacity: 1;  /* 透明度を100%に */
          font-weight: bold; /* 文字を太くする */
      }
          .disabled {
          opacity: 0.7;  /* 透明度を少し下げる */
      }

        .periodic-table {
            display: grid;
            grid-template-columns: repeat(18, 30px); /* 18列 */
            gap: 1px;
            justify-content: left;
        }

        .empty {
            visibility: hidden;
        }

        /* 入力フォームのデフォルトは非表示 */
        .input-form {
            display: none;
            margin-top: 3px;
        }

        /* 数式全体を左揃えにするスタイル */
        #formula {
            text-align: left;
            margin-left: 0;
        }

        /* MathJaxで使用されるスタイルのカスタマイズ */
        .mjx-mn, .mjx-mi {
            font-style: normal; /* 通常の文字にする */
        }

#filters {text-align: center;
        margin: 20px auto 20px auto;}
#calculationForm {
    display: flex;
    justify-content: center; /* コンテナ内のアイテムを中央揃えに */
    gap: 10px; /* ボタン間のスペース */
}