@charset "UTF-8";
/* ====================================================================================

201611s

==================================================================================== */
.app-top {
	border:1px solid #ccc;
	padding:2em;
	margin-bottom:0px;
}
.app-top__img {
	text-align:center;
	margin-bottom:10px;
}
.app-top img,
.app-set img{
	max-width:100%;
	height: auto;
}
.app-top__mt{
	text-align:center;
	margin-bottom:20px;
	border-bottom:3px solid #014099;
	/*border-top:3px solid #014099;*/
	padding:0 0 20px 0;
	color:#014099;
	margin-top:5px;
}

.app-top__list {
	list-style: none; 
	margin-bottom:10px;
	
}

.app-top__list li {
position: relative;
padding-left: 1.4em;
font-size:12px;
	font-size:1.2rem;
}

.app-top__list li:before {
content: "※";
position: absolute;
left: 0; 
top: 0;
}

p.app-top__p{
	font-size:14px;
	//font-size:1.2rem;
}
.app-set_wrap {
	margin:0 5%;
	overflow:hidden;
}

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

.app-set_l {
	width:15%;
	text-align:center;
}

.app-set_r {
	//width:80%;
}
.app-set_r p {
	font-size: 14px !important
}

.app-set_l img{
	margin-bottom:10px;
}

.app-set_l p {
	margin:10px 0;
}

.app-set_list {
	padding-left:2em;
	margin-left:1em;
	margin-bottom:3em;
	/*margin-top:1em;*/
	
}
.app-set_list li{
	list-style-type:decimal;
	margin-bottom:1em;
	
	}
.app-set_list a {
	/*text-decoration:underline;*/
}
.app-set_list a:hover,
.app-top__p a:hover,
.app-tyui a:hover {
	text-decoration:underline;
}
.app-set .link-block__item {
display:inline-block;
	width:auto;
	margin-left:10px;
}
.app-set .link-block {
	border-bottom:none;
	display:table;
	}
.app-set .btn {
	font-size:16px;
	font-size:1.6rem;
	width:9em;
}
.app-tyui {
	border-top:1px dashed #ccc;
	padding:20px 0;
	margin-top:40px;
}
.app-tyui p ,
.app-tyui li{
	/*	font-size:12px;
	font-size:1.2rem;*/
}
/*.app-tyui ul{
	list-style:disc;
	margin-left:2em;
	padding-left:2em;
	margin-bottom:1em;
	}
.app-tyui li{
	list-style:disc;
	
}
*/
.app-tyui ul{
	list-style: none; 
	margin-bottom:10px;
	//width:100%;
	
}

.app-tyui li {
position: relative;
padding-left: 1.4em;
margin-bottom:0.5em;
}

.app-tyui li:before {
content: "・";
position: absolute;
left: 0; 
top: 0;
}

.app-set .btn.btn--page {
	padding-right:30px;
}

.app-dl	{
	display: flex;
	justify-content: space-between;
}
.app-dl_in	{
	display: flex;
	justify-content: space-around;
}
.app-dl_in	{
	width:45%;
	text-align: center;
}

.app-dl_r	{
	max-width:50%;
}
.app-dl_l {
	width:45%;
	line-height:110px;
	text-align:center;
}

.app-dl_l img	{
	width:100%;
}

.app-dl_r img {
	width:75%;
}
.app-dl_l img.applogo	{
	width:95%;
	padding:10px 0;
}

.app-dl_l_in {
	display:inline-block;
	vertical-align: middle;
	line-height:normal;
}

/***************************************************************ここから、計算式ページ***************************************************************/
/***************************************************************ここから、計算式ページ***************************************************************/
.inner {
	padding:0 2em;
}

input {
	//width:100%;
	height: 30px;
	background-color:#EEE;
}

/* input type="number"の、増減ボタンを消す。*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance:textfield;
}
input[type=number] {
	font-size:15px;
	text-align:right;
	padding-right:10px;
}

/* focus時の背景色を指定する */
input[type=number]:focus {
	background: #D5FEE1;
}

/* ラジオボタンを非表示にする。今はdisplayブロックにしてるのできかない
input[type=radio] {
	display: none; 
}
*/

/* マウス選択時のラジオボタンの背景色・フォント色を指定する */
input[type="radio"]:checked + label {
	background: #004C31;
	color: #ffffff; 
}

/* マウス選択時の入力画面の背景色・フォント色を指定する */
input[type="radio"]:checked ~ input {
	background: #004C31;
	color: #ffffff;
}



/*メトリックの旋削・加工別タブ*/
ul.tab{
	height:60px;
	margin:0;
	list-style: none;
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
	padding-right: 40%;
}
ul.tab li {
	display: block;
	width: 30%;
	text-align: center;
	margin-right: 10px;
}
ul.tab li a {
	display: block;
	height:61px;
	padding: 5px 0 5px;
	font-size: 12px;
	background: #fff;
	border:1px solid #ccc;
	opacity: 0.7;
	box-sizing: border-box;

}
ul.tab li.app_current{
	box-sizing: border-box;
	height:61px;
	color: #014099;
	font-size: 12px;
	padding: 5px 0 5px;
	font-weight: bold;
	background: #fff;
	border:1px solid #ccc;
	border-bottom: none;
}
ul.tab li a:hover {
	background:#eaf6fd;
	opacity: 1;
}

.tab li img {
	display: block;
	width: 30px;
	margin: 0 auto;
}
.tab-in {
    background: #fff;
    padding: 10px 30px 0px;
    border: 1px solid #ccc;
        border-top-color: rgb(204, 204, 204);
        border-top-style: solid;
        border-top-width: 1px;
    border-top: none;
}
/*求めたい項目ボタンの設定*/
.col_5{
	width: 100%;
	display: flex;
	justify-content:space-between;
	flex-wrap: wrap;
}
/*求めたい項目ボタンが5で割り切れないときに、同じような感覚で左寄せにする*/
.col_5::after{
	content:"";
	display: block;
	width: 19%;
	padding:0 5px;
	margin: 5px 0px;
	box-sizing:border-box;
}
.col_5 > div{
	width: 19%;
	padding:0 5px;
	margin: 15px 0px 5px;
	text-align: center;
	box-sizing:border-box;
}
.col_5 img{
	display: block;
	padding:0 5px;
	border:1px solid #cccccc;/* ボックスの境界線を実線で指定する */
	border-radius: 10px; /* 角丸を指定する */
	box-sizing:border-box;
}
.col_5 a:hover img{
background-color: #eaf6fd;
}

.col_5 p {
	font-size: 12px;
}

.app_nav__list {
	overflow: hidden;
}
.app_nav__list .app_nav__item {
	float: left;
}

.app_nav__item img {
	display: block;
	width: 50px;
	 margin: 0 auto;
}

.app_nav__link {
    font-size: 10px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    padding: 5px;
    border: 1px solid #cccccc;
}
.app_nav__link:hover {
	background-color: #eaf6fd;
}
.app_nav {
    width: 100%;
    margin: 10px 0;
}
.app_nav__link {
	margin-right: 10px;
}

/*計算する項目を横並びに*/
.flex {
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	justify-content:space-between;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}

/*計算する項目が３で割り切れない場合にはこのクラスをつけて、同じような間隔で左寄せになるように。*/
.flex_over::after{
	content:"";
	display: block;
	width:30%;
	margin:15px 5px 0;
}
/*flexするアイテムの幅・余白設定*/
.flex_item {
	width: 30%;
	margin:15px 5px 0;
	position: relative;
}

.flex_item  input {
	display: block;
	box-sizing:border-box;
	}


/*選択する箱の設定*/
.flex_item select {
	display: block;
	box-sizing:border-box;
	width:100%;
	height: 30px;
	font-size: 12px;
	margin:0;
}

.flex_item img {
	display: block;
	width: auto;
	height: 40px;
}

/*計算ボタンとリセットボタン*/
.calc_btn {
	text-align: center;
}

.calc_btn .c_btn {
	max-width: 150px; /* ボックスの横幅を指定する */
	height: 35px; /* ボックスの高さを指定する */
	margin:20px  ;
	font-size: 15px;
}

/* リセットボタンの動きを設定 */
.calc_btn .r_btn {
	background-color:#FFF;
	border:#3F3F3F 1px solid;
}
.calc_btn .r_btn:hover {
	background-color:#eee;/* マウスオーバー時の背景色を指定する */
	color:#000;
}
.calc_btn .r_btn:active {
	background-color:#3F3F3F;/* 押した際の背景色を指定する */
	color:#FFF;
}
.calc_btn .r_btn:focus {
	outline:ridge  #aaa;
}

/* 計算ボタンの動きを設定 */
.calc_btn .f_btn {
	background-color:#FFF;
	border:#004C31 2px solid;
}
.calc_btn .f_btn:hover {
background-color: #D5FEE1; /* マウスオーバー時の背景色を指定する */
color:#3F3F3F;
}
.calc_btn .f_btn:active {
	background-color:#004C31;/* 押した際の背景色を指定する */
	color:#FFF;
}
.calc_btn .f_btn:focus {
	outline: ridge #D5FEE1;
}

/* 計算ボタンをEdgeのみ表示し、それ以外は非表示にする。 */
/* Firefoxで非表示 */
@-moz-document url-prefix() {
    .edge_display {
	display: none;
    }
}

/* chrome operaで非表示 */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    .edge_display {
	display: none;
    }
}
	
/* safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root .edge_display {
	display: none;
    }
}

.pd_top {
    padding-top: 10px;
}

.hr_dot {
	border-top:dashed #DDD 1px;
}
/* error in here */


.answer {
	border-bottom: 3px solid #014099;
	display: flex;
	justify-content: space-between;
	width:100%;
	padding-bottom: 5px;
	overflow: hidden;
}
.answer_s {
	display: flex;
	justify-content: space-between;
	width:100%;
	margin-top: 10px;
}


.app_fx {
	font-size: 15px;
    text-align: right;
	display: block;
	margin: 2px 0 5px !important;
}
.app_fx a {
	padding:0 0 10px;
}
.app_fx a:hover {
	text-decoration: underline;
}

.app_fx img {
    display: inline-block;
    width: 20px;
    padding-left: 10px;
}

.answer .answer_item,.answer .answer_num {
	display: block;
	height: 45px; /* ボックスの高さを指定する */
	font-size: 20px;
	line-height: 45px;
	margin: 0;
}

.answer p.answer_item {
	font-weight: bold;

}

p.answer_num {
	display: block;
	height: 45px; /* ボックスの高さを指定する */
	width:50%;
	font-size: 25px;
	line-height: 45px;
	text-align: right;
	background-color:#004C31 ;
	color:#FFF;
	border-radius: 10px; /* 角丸を指定する */
	padding:0 10px 0 0px;
	overflow: hidden;
	margin: 20px auto 0;
}
.answer_num span {
	font-size: 12px;
}

.answer_num img {
	display: block;
	width: auto;
	height: 45px;
	float: left;
}

p.annotation {
	font-size:12px;
	margin: 10px 0 0 ;
}

/* フォーカスしたときに下にプレースホルダーをだす。 */
label { 
	width:250px;
	color: #888;
	text-align: right;
	padding:2px 0px;
	position:absolute;
	right: 12px;
	top:62px;
	font-size:15px;
	font-weight:normal;
	z-index:999;
	opacity:0;
	transition:all 0.5s ease-out;
	pointer-events: none;
}
input:focus ~ label{
	transition:all 0.5s ease-out;
	opacity:1;
	margin-top:0px;
	right: 12px;
	top:67px;
}

/* input入力部分がひとつだとエラーが出るため */
.hidden_hp {
	display:none;
}
/* 右下アプリはこちらボタン 
.page	{
	overflow: visible;
}
*/

#app_link	{
margin:30px auto 0 ;
text-align:center;
position:sticky;
bottom:0px;
z-index:99999;
display:block;
opacity: 0.6;
padding:5px;
font-weight:bold;
	height: 65px;
}
.app_link_in	{
	text-align: center;
	position: absolute;
	bottom: 10px;
	right: 5px;
}

#app_link:hover {
	opacity: 1;
}

#app_link img	{
width:50px;
}

/* スムーススクロール 
html {
    scroll-behavior: smooth;
}



/******************************************************************** ここから、レスポンシブ ********************************************************************/
@media (min-width: 501px) {
/* フォーカス時にプレースホルダー消す */
input:focus::-webkit-input-placeholder {
	color: transparent;
}
input:focus::-moz-placeholder {
	color: transparent;
}
input:focus::-ms-input-placeholder {
	color: transparent;
}
input:focus::placeholder {
	color: transparent;
}
}

/* ==========================================================================
    Tablet
========================================================================== */
@media (min-width: 641px) {

.hidden-tablet {
	  display: none;
}
	
.app-set_wrap {
	margin:0 15%;
	overflow:hidden;
}

  .app_nav__item {
    margin-left: 10px;
    margin-bottom: 8px;
  }
  .app_nav__link {
    font-size: 12px;
    font-size: 1.3rem;
  }
  
}

/* ==========================================================================
    PC
========================================================================== */
@media (min-width: 1050px) {
	/*.app-set_l img{
	margin-bottom:0;
}*/

  .app_nav__list {
    margin-left: -10px;
  }
/* タブ固定する 
 .tab_sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    background: rgba(255,255,255,1);
    z-index: 499;
    padding-top: 10px;
	margin-bottom: 15px;
}
*/
	
/* positionをstickyで固定した時のずれ修正 */
.col_5{
	height: 210px;
	}
.tab-in {
	height: 270px;
}
.pd_top {
    padding-top: 350px;
    margin-top: -350px;
}

#tab-ex {
    padding-top: 340px;
    margin-top: -340px;
}
/*
.page {
    overflow: visible;
}
*/

}

/* ==========================================================================
    横幅が720px以下の場合、下記のCSSを適用　
========================================================================== */
@media (max-width: 720px) {
.app-dl	{
	display:block;
}
.app-dl_in	{
	width:60%;
	text-align: center;
	padding: 20px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.app-dl_l img {
	max-width:150px;
}
.app-dl_r img	{
	width:120px;
	}
	
.answer_s {
	display: block;
}

p.answer_num {
	width:70%;
}


.col_5 p {
	font-size: 10px;
}
	
}

/* ==========================================================================
    横幅が640px以下の場合、下記のCSSを適用　
========================================================================== */
@media (max-width: 640px) {
input[type=number] {
	font-size:12px;
}

label {
	font-size:12px;
}

.col_5 img {
    border-radius: 8px;
}
}
/* ==========================================================================
    スマホ　横幅が500px以下の場合、下記のCSSを適用　
========================================================================== */
@media (max-width: 500px) {
.app-dl_in	{
	width:80%;
	}
.app-dl_r img	{
	width:120px;
	}
	

/** ok from here down **/
.flex {
	display: block;
	margin: 0 auto;
	}
.calc_btn {
	display: flex;
	justify-content: space-around;
	padding: 20px 20px 0;
}
	
.calc_btn .c_btn {
	max-width: 120px; /* ボックスの横幅を指定する */
	margin:0 10px 20px  ;
	font-size: 15px;
}
.flex_item {
	width: 100%;
	margin:10px auto 0;
}

.flex_item p  {
	padding:0 10px 0 0;
	display: flex;
	justify-content: space-around;
}

input {
	width:60%;
}

.inner {
    padding: 0 3em;
}
	
.flex_item select {
    width: 60%;
}
.flex_over::after{
	display: none;
}
	
.hidden {
	display: none;
}
	
.col_5 > div{
	padding:0 5px;
	margin: 5px 0px 5px;
	width: 30%;
}

.col_5::after{
	display: none;
}

.flex_item img {
    height: 30px;
}
.answer .hidden-phone, .answer_s .hidden-phone {
	  display: none;
}
	

.answer .answer_item {
	font-size: calc(115% + 1.5vw);
}

p.answer_num {
	width:90%;
	font-size: 20px;
}
.answer {
	padding-bottom: 0px;
}
	
.app_nav ul {
	display: flex;
	justify-content: space-around;
	padding: 0 30px;
}

.app_nav__item img {
	width: 40px;
}
	
label { 
display: none;
}

}