html,body { margin:0; padding:0; background-color:#FFF; font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; color:#231815;  }
img { vertical-align:middle; }
body * { box-sizing: border-box; margin:0; padding:0; }
body#page { padding-top:100px; }

/*************************************/
header,section {
  opacity: 0;         /* 初期値は透明にしておく */
  transition: .500s;    /* 動くスピードを0.5秒に指定 */
  position: relative; /* 相対位置の設定 */
  top: 80px;          /* 事前に下に50pxずらしておく */
}

header.active,section.active {
  opacity: 1;         /* 透明度を元に戻す */
  top: 0;             /* ずらしていた位置を戻すことで上に上がっているようにみえる */
}
header.active {  position:fixed; top:0; left:0; z-index:999; background-color:#FFF; width:100%; }

/*******************************************/


section#top { 
  position:relative; z-index:10;
  top: 0; 
  background-color:#FFF;
  width:100%; height:100vh;
  overflow:hidden;
  display:flex; justify-content: center; align-items: center;
  font-size:32px;

  opacity: 1;
/*
  animation-name: fadeout;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 5s;
*/

}

@keyframes fadeout {
  0% {
     opacity: 1;
     transform: translateY(0);
  }
  100% {
     opacity: 0;
     transform: translateY(0);
  }
}

div#tp1 { 
  opacity: 0;
  animation-name: fadein;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;

  animation-delay: 0.5s;
}

div#tp2 { 
  opacity: 0;
  animation-name: fadein;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;

  animation-delay: 1s;
}


@keyframes fadein {
  0% {
     opacity: 0;
     transform: translateY(0);
  }
  100% {
     opacity: 1;
     transform: translateY(0);
  }
}

/* 紺色円 */
div#en {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200%;
  height: 200vh;
  background: #002f7b;
     opacity: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: clipPath 5s linear;

  animation-delay: 2.0s;

}

/* メインボックス */
section#tp_main { 
  width:100%; height:100vh; overflow:hidden; background:url("images/tp_main_bk.png") no-repeat 0 0; position:absolute; top:0; left:0; z-index:11;
  background-size: cover;
  display:flex; justify-content: center; align-items: center;
  opacity: 0;

  animation-name: clipPath;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: 3.5s;

}
section#tp_main img { 
  opacity: 0;
  animation-name: fadein;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;

  animation-delay: 6s;	
}
#tpLogo { position:absolute; top:20%; margin: auto; right:0; left:0; width:60%; max-width:1000px; height:auto; }
img#tpScroll { position:absolute; bottom:5%; margin: auto; right:0; left:0;  }

/* 円形処理 */
@keyframes clipPath {
0% {
     opacity: 1;
     clip-path: circle(0 at 50% 50%);
  }
  100% {
     opacity: 1;
     clip-path: circle(100% at 50% 50%);
  }
}

/* ************************************************ */
header { display:flex; justify-content: space-between; align-items: center; padding:16px; }
#btnTop { position:absolute; top:16px; left:294px; }
#menu { display:flex; }
  #menu > ul { display:flex; list-style-type:none; margin: auto 0; height:24px; }
  #menu > ul li { border-left:1px solid #231815; margin:0; padding:0 0.8em; display:flex; align-items: center; }
  #menu > ul li a  { color:#231815; text-decoration:none; }

  #hIcMenu { display:flex; align-items: center; border-left:1px solid #231815; padding-left:24px; }
  #hIcMenu img { margin:0 6px;  }

footer {  background:#FFF url("images/tp_message_bk.png") repeat-x 0 0; }
footer ul { display:flex; justify-content: center; align-items: center; background-color:#727171; list-style-type:none; padding:6px 0;  }
footer li { border-right:1px solid #FFF; padding:0 0.5em;  }
footer li:first-child { } 
footer ul a { color:#FFF; text-decoration:none; }
#ftLogo { width:160px; height:auto; }
div#ftCts { width:90%; max-width:1000px; display:flex; justify-content: space-between;  margin:0 auto; font-size:12px; padding:24px 0;  }
div#ftCts dl { display:flex; justify-content: space-between; flex-wrap:wrap; width:404px; margin:0; padding:0; }
div#ftCts dt { width:120px;  margin:0; padding:0; }
div#ftCts dd { width:280px;  margin:0; padding:0; }
#copyright { text-align:right; }
#copyright img { width:auto; height:80px; margin:0 0 12px 12px; }

/* 共通 */
.sp { display:none; }
.tpImg { width:100%; height:320px; overflow:hidden; position:relative; }
.tpImg img { width:100%; height:auto; position:absolute; top:0; left:0; bottom:0; right:0;  }

h2 { text-align:center; margin:24px 0;  }
#page h2 { font-size:32px; }
#page h2 div { border-top:1px solid #231815; font-size:18px; width:90%; max-width:1000px; margin:6px auto; padding-top:6px }
a.btn { display:block; width:200px; padding:4px; text-align:center; border:1px solid #231815; text-decoration:none; color:#231815; margin:24px auto; border-radius:18px; display:flex; justify-content:center; align-items: center; background-color:#FFF; }

.triangle{
  display:inline-block;
  width: 0;
  height: 0;
  border-left: 8px solid #231815;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left:0.5em;
}
.ctsFrm { width:90%; max-width:1000px; margin:0 auto; }
.txtC { text-align:center; }
.txtR { text-align:right; }
.txtL { text-align:left; }

.flexBox { display:flex; justify-content: space-between; flex-wrap:wrap; }
/* ************* */
#tpConcept { text-align:center; padding-bottom:64px; background:#FFF url("images/tp_concept_bk.png") no-repeat calc(50% - 255px) bottom; background-size:235px 168px;  }
#tpConcept p { margin:48px 0; }

/* ************* */
#tpManufact   { text-align:center; padding:64px 0 120px; background:#FFF url("images/tp_manufact_bk.png") no-repeat calc(50% + 255px) bottom; background-size:206px 203px;  }
#tpManufact p { margin:48px; 0; }

/* ************* */
#tpProduct   { text-align:center; padding:64px 0 120px; background:#FFF url("images/tp_product_bk.png") no-repeat calc(50% + 255px) bottom; background-size:206px 203px;  }
#tpProduct p { margin:48px; 0; }

/* ************* */
#tpEnv   { text-align:center; padding:64px 0 120px; background:#FFF url("images/tp_env_bk.png") no-repeat calc(50% - 255px) bottom; background-size:167px 194px;  }
#tpEnv p { margin:48px; 0; }

/* ************* */
#tpMessage { text-align:center; margin:64px 0 0 0; padding:0 0 48px 0;  background:#FFF url("images/tp_message_bk.png") repeat 0 0; position:relative; height:auto; }
#tpMessage .flexBox { width:90%; max-width:1000px; margin:0 auto; }
#tpMessage img#president { /* position:absolute; top:0; left:calc(50% - 620px); width:620px; height:auto; */ }
#msgbox { width:600px; text-align:left; position:relative; border:0; }
#msgbox h2 { text-align:left; font-size:18px; line-height:130%; margin:0; padding:48px 0 12px; }
#msgbox p  { font-size:14px; line-height:120%;  }
#msgbox div { text-align:right; margin-top:28px; }

/* ************** */
#tpMovie { width:90%; max-width:1000px; margin:48px auto; padding:0; }
#tpMovie h2 { text-align:center; font-size:24px; line-height:130%; margin:28px 0; padding:0;  }

/* ************* */
#tpBtmMenu { margin:24px 0;  }
#tpBtmMenu ul { width:1000px; list-style-type:none; margin:0 auto; display:flex; justify-content: space-between; align-items: center; }

/* toics */
#topics { text-align:center; background-color:#e0eed7; margin:0; padding:48px 0;  }
#topics h2 { margin:0; }
#topics h3 { margin:0 0 24px 0; font-size:16px; }
#topics  ul {  width:1000px; list-style-type:none; margin:0 auto; display:flex; justify-content: space-between; }
#topics  li { text-align:left; width:238px; }
#topics a { text-decoration:none; color:#231815; }

.thumbox { width:238px; height:158px; overflow:hidden; position:relative; }
.thumbox img { width:100%; height:auto; /* position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); */}
.bTitle { height:3.5em; overflow:hidden; margin:6px 0; line-height:110%; font-size:12px; }
.bInfo  { display:flex; justify-content: space-between; font-size:90%;  }
.bdate  { }
.bcat   { }


/* about us ***************** *************** *************** */
#aboutus { text-align:center; padding-bottom:48px; }
#aboutus img.fac { width:90%; max-width:1399px; height:auto; }
#aboutus .flexBox { width:90%; max-width:1000px; margin:24px auto 0; }

.abFac,.abFacInfo { border-left:6px solid #8dc556; text-align:left; padding-left:1.5em; margin-bottom:24px; }
.abFacInfo  { border-left:6px solid #FFF;}

#aboutus .ctsFrm { padding-left:1.5em; margin-bottom:24px;  }

#facMonbetsu  { margin-top:48px; }
#monbetsuInfo { background:#FFF url("images/tp_concept_bk.png") no-repeat left bottom; background-size:235px 168px;   }

#cmpInfo    { width:90%; max-width:1000px; margin:48px auto; background:#FFF url("images/ab_cmpinfo_bk.png") no-repeat right bottom; background-size:203px 194px; }
#cmpInfo dl { display:flex; justify-content: space-between; flex-wrap:wrap; text-align:left; }
#cmpInfo dt { width:20%; margin:0; padding:0; }
#cmpInfo dt::first-letter { color:#8cc456; }
#cmpInfo dd { width:80%; margin:0; padding:0; }


/* about us ***************** *************** *************** */
#story { margin:48px auto; }
#story .flexBox { width:90%; max-width:1000px; margin:24px auto;  }
#story_main h3 {  }
#story_main p { width:496px; margin-top:16px; font-size:14px; }
.caption { font-size:12px; }
#story ul { list-style-type:none; font-size:12px; }

#enkaku { width:90%; max-width:1000px; margin: 0 auto; padding-bottom:48px; }
#enkaku dl { width:496px; display:flex; justify-content: space-between; flex-wrap:wrap; font-size:12px; }
#enkaku dt { width:100px; margin:0; padding:0; }
#enkaku dd { width:386px; margin:0; padding:0; }
#enkaku p  { font-size:12px; margin-bottom:24px; }
#enkaku h3 { border-left:38px solid #dcdddd; padding:6px 0 0 0.5em; margin-bottom:12px; }

/* Factory ***************** *************** *************** */
#factory .flexBox { width:90%; max-width:1000px; margin:24px auto; }
#factory .flexBox p { width:496px; margin-top:16px; font-size:14px;  }
#factory ul { list-style-type:none; font-size:12px; }
#factory li { margin-bottom:24px; }
#productLine { text-align:center; background:#FFF url("images/tp_message_bk.png") repeat-x 0 0; position:relative; background-size:auto 440px; padding:48px 0; }
#productLine h3 { margin: 0 0 24px 0; padding:0; }

#cutMachine { }
#cutMachine .flexBox { width:90%; max-width:1000px; margin:24px auto; }
#cutMachine .flexBox p { width:496px; margin-top:16px; font-size:14px;  }
#cutMachine ul { list-style-type:none; font-size:12px; }
#cutMachine li { margin-bottom:24px; }

#kumitate { }
#kumitate .flexBox { width:90%; max-width:1000px; margin:24px auto; }
#kumitate .flexBox p { width:496px; margin-top:16px; font-size:14px;  }
#kumitate ul { list-style-type:none; font-size:12px; }
#kumitate li { margin-bottom:24px; }


#haribako { }
#haribako .flexBox { width:90%; max-width:1000px; margin:24px auto; }
#haribako .flexBox p { width:496px; margin-top:16px; font-size:14px;  }
#haribako ul { list-style-type:none; font-size:12px; }
#haribako li { margin-bottom:24px; }

/* Products ***************** *************** *************** */
#products .flexBox { width:90%; max-width:1000px; margin:24px auto; }
#products .flexBox p { width:496px; margin-top:16px; font-size:14px;  }
#products div.caption { text-align:center; }
#products ul { list-style-type:none; font-size:12px; }
#products li { margin-bottom:24px; text-align:center; }

#Usage { background:#FFF url("images/pdt_usage_bk.png") repeat-x 0 64px; position:relative; padding:0 0 48px 0; }
#UsageIcon { width:90%; max-width:1000px; margin:0 auto; display:flex; align-items: end; }
#UsageIcon img { width:160px; height:auto; margin-right:48px; }
#UsageIcon h3 { font-size:32px; }
#Usage ul { width:90%; max-width:1000px; margin:24px auto; list-style-type:none; display:flex; justify-content: space-between;   }
#Usage li { margin:0; padding:0; width:312px; }
#Usage li a { display:block; width:80%; margin:24px auto; padding:8px; text-align:center; border:1px solid #231815; text-decoration:none; color:#231815;  border-radius:18px; display:flex; justify-content:center; align-items: center; background-color:#FFF; }
#Usage li div { font-size:14px; }
#Usage li div:nth-child(3) { font-size:18px; margin-bottom:8px; }
#Usage li img { width:100%; height:auto; margin-bottom:16px; }

/* soundness */
#soundness .flexBox { width:90%; max-width:1000px; margin:24px auto; }
#soundness h3 { background-color:#898989; color:#FFF; padding:4px 0.5em; }
#kenko   { width:500px; }
#kenko img { width:321px; height:auto; margin-top:24px; }
#kenko p { margin-top:1em; font-size:14px; }
.certimg { width:415px; }
.certimg img { max-width:100%; height:auto;  }
/* Eco ***************** *************** *************** */
#eco ,#philosophy ,#sdgs { margin-bottom:48px; }
#philosophy h3,#sdgs h3 { background-color:#898989; color:#FFF; padding:4px 0.5em;  }
h3#policy { margin-top:48px;  }
#sdgs h3:nth-child(3)  { margin-top:48px; }
#eco .flexBox,#philosophy .flexBox,#sdgs .flexBox { width:90%; max-width:1000px; margin:24px auto; }
/* #sdgs .flexBox {  background:#FFF url("images/tp_env_bk.png") no-repeat left bottom; background-size:167px 194px;  } */
#eco .flexBox p,#philosophy .flexBox p,#sdgs .flexBox p { width:496px; margin-top:16px; font-size:14px; }
#philosophy ul,#sdgs ul { margin:0; padding:0; list-style-type:none; width:496px; font-size:14px; }
#philosophy li { }

#sdgs img,#ecoimg img { margin-bottom:24px; }

/* contact ***************** *************** *************** */
#contact { padding-bottom:48px; }
#contact h2 { border-bottom:1px solid #231815; width:90%; max-width:1000px; margin:24px auto 64px; }
#contact h3 { text-align:center; background-color:#898989; color:#FFF; width:90%; max-width:680px; margin: 24px auto; }
#contact dl { width:90%; max-width:680px; margin:24px auto 48px; flex-wrap:wrap; }
#contact dt { width:30%; padding:4px 0; }
#contact dt span { color:red; }
#contact dl p { margin:0; padding:0; }
#contact dd { width:70%; padding:4px 0; }
#contact input[type="text"],#contact input[type="tel"],#contact input[type="email"],#contact textarea   { width:100%; padding:6px; border-radius:6px; border:1px solid #999; }
#contact textarea { height:120px; }
#contact ul { width:90%; max-width:680px; margin:24px auto; list-style-type:none; }
#contact li { text-indent:-1em; margin-left:1em; }
#contact p { width:90%; max-width:680px; margin:24px auto; }

#contact button,#contact input[type="submit"] { width:90%; max-width:240px; margin:24px auto 48px; padding:6px; border-radius:25px; background-color:#FFF; border:1px solid #999; font-size:18px; }
#contact button:hover,#contact input[type="submit"]:hover { background-color:#e0eed7; }

#conNotes { border-top:1px solid #231815; padding-top:24px; }

/* pp ***************** *************** *************** */
#pp dl { width:90%; max-width:1000px; margin:24px auto; }
#pp dt {  }
#pp dd {  }
#pp ul { list-style-type:none; }

@media screen and ( max-width:512px ) {

	#menu > ul:first-child,#menu img,#btnTop { display:none; } 

	section,footer { width:100%; overflow:hidden; }

	section#top { 
	  text-align:center; 
	  flex-wrap:wrap;
	  font-size:5.2vw;
	  top: 0; 
	}
	section#top img { width:60%; }
/* メインボックス */
	section#tp_main { 
	  background-color:#FFF;
	  background-image: url("images/tp_main_mb_bk.png");
	  background-size: 100% auto;
	  background-position: center bottom;
	}

	
	#tpLogo img { top:10%; width:90%; height:auto; }
	img#tpScroll {display:none;  }

/* footer */
	footer ul { display:block; }
	footer li { text-align:center; border-bottom:1px solid #CCC; }
	footer li:last-child { border:0;}
	footer li a { display:block; padding:4px; }

	div#ftCts { display:block; font-size:12px; }
	div#ftCts dl { width:100%; margin-top:14px; }

	#copyright { text-align:center; margin-top:14px; }
	#copyright div{ text-align:right; }



/* 共通 */
	.sp { display:block; }
	.tpImg { width:100%; height:100px; margin-bottom:24px; }

/* ************* */
	#tpConcept { padding-bottom:24px; background-image:none;  }
	#tpConcept h2,#tpConcept p { width:90%; margin: 0 auto 24px; }

/* ************* */
	#tpManufact   { padding-bottom:24px; background-image:none;  }
	#tpManufact h2,#tpManufactt p { width:90%; margin: 0 auto 24px; }
/* ************* */
	#tpProduct   { padding-bottom:24px; background-image:none; }
	#tpProduct p { width:90%; margin: 0 auto 24px; }
	#tpProduct img { width:90%; height:auto; }

/* ************* */
	#tpEnv   { padding-bottom:24px; background-image:none;  }
	#tpEnv h2 { width:90%; margin: 0 auto 24px; }
	#tpEnv p { width:100%; margin: 0 auto 24px; font-size:2.4vw; }

/* ************* */
	#tpMessage { margin:0 0 24px 0; padding-bottom:24px; height:auto; background-size:auto; background-repeat:repeat-y; }
	#tpMessage img#president { position:static; width:90%; height:auto; }

	#msgbox { position:static; width:90%; height:auto; margin:0 auto; }

	#msgbox h2 { font-size:4.0vw; padding:24px 0; }
	#msgbox p  { font-size:3.0vw; line-height:140%; }
	#msgbox div { text-align:right; position:static; margin-top:24px; }


/* ************* */
	#tpMovie { margin:24px auto;  }
	#tpMovie .flexBox { display:block; }
	#tpMovie div { width:100%; margin:0 auto; text-align:center; }
	#tpMovie video { width:100%; height: auto; }
/* toics */
	#topics h2 { font-size:4.6vw; }
	#topics h3 { font-size:3.2vw; }

	#topics  ul {  width:90%; display:block; }
	#topics  li { text-align:left; width:100%; max-width:238px; margin:14px auto; }

	.bTitle { font-size:3.0vw; }
	.bInfo  { font-size:2.6vw;  }
	.bdate  { }
	.bcat   { }
/* aboutus */
	#aboutus .flexBox > div { width:100%;  }
	#aboutus iframe { width:100%; }
	#aboutus .ctsFrm { padding:0; }

	#monbetsuInfo { padding-bottom:224px; background-position: center bottom+24px; }

	#cmpInfo    { padding-bottom:240px; background:#FFF url("images/ab_cmpinfo_bk.png") no-repeat right bottom; background-size:203px 194px; }
	#cmpInfo dl { display:block; }
	#cmpInfo dt { width:100%; }
	#cmpInfo dd { width:100%; margin:0 0 0.5em; padding:0; }

	#story_main p { width:100%; margin-bottom:24px; }
	#story .flexBox div { width:100%; }
	#story .flexBox div img { width:100%; height:auto; }
	#story li { margin-bottom:24px; width:100%; }
	#story li img { width:100%; height:auto; }

	#enkaku dl { margin-bottom:24px; }

/* factory */
	#factory .flexBox p { width:100%; margin-bottom:24px; }
	#factory .flexBox img { width:100%; height:auto; }
	#factory ul.flexBox ul { margin:0 auto; }
	#factory ul.flexBox li { width:100%;  }

	#productLine h3 {  width:90%; margin:0 auto; }
	#productLine img { width:90%; height:auto; }

	#cutMachine .flexBox p { width:100%; margin-bottom:24px; }
	#cutMachine div,#cutMachine li { width:100%; height:auto; }
	#cutMachine div img ,#cutMachine li img { width:100%; height:auto; }

	#kumitate .flexBox p { width:100%; margin-bottom:24px; }
	#kumitate div,#kumitate li { width:100%; height:auto; }
	#kumitate div img ,#kumitate li img { width:100%; height:auto; }

	#haribako .flexBox p { width:100%; margin-bottom:24px; }
	#haribako div,#haribako li { width:100%; height:auto; }
	#haribako div img ,#haribako li img { width:100%; height:auto; }

	#products .flexBox p { width:100%; margin-bottom:24px; }
	#products div,#products li { width:100%; height:auto; }
	#products div img ,#products li img { width:100%; height:auto; }


	#UsageIcon h3 { font-size:16px; }
	#Usage ul { display:block; }
	#Usage li { margin:0 auto 48px auto; padding:0; width:312px; }

/* Eco */
	#eco .flexBox p,#philosophy .flexBox p,#sdgs .flexBox p { width:100%; margin:16px auto; }

	#eco img,#philosophy img,#sdgs img { max-width:100%; height:auto; }
	#ecoimg  { margin-top:24px; }

	#philosophy ul,#sdgs ul { width:100%; }

	
/* Soundness */
	.certimg { width:100%;  }
	.certimg img { width:100%; height:auto; }


}