/*
Theme Name: Plotwork Speed Sessaku
Version: 18.05.22-
Author: Plotwork

- base color -
blue	:#00b0db
orange   :#f97f39
font-color: #383838
base color: #f2f2f2
footer color: #101010
*/
/*-------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho&display=swap');

/**/
html,
body {
  height: 100%;
}

/* scroll */
html{
    scroll-behavior: smooth;
}

/**/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0px none;
	margin: 0px;
	padding: 0px;
}
h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
	background-color: white;
}
a{
	color: #00b0db;  /*blue */
	text-decoration: none;
}
a:hover{
	text-decoration: none;
}
a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=60);
}
p{
	margin: 0;
	padding: 0;
}
strong{
  color: #f97f39;
  font-weight: normal;
  font-size: 1.5em;
}
img{
	margin: 0;
	padding: 0;
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
  body
-------------------------------------------------------------- */
body {
	font-family: "Noto Sans JP";
	color: #383838;
	line-height: 180%;
	background-color: #f2f2f2;
	margin:0 auto;
	padding: 0;
}

/*--------------------------------------------------------------
  wrap
-------------------------------------------------------------- */
.index_wrap{

}
/*--------------------------------------------------------------
  Main VISUAL
-------------------------------------------------------------- */
.MV_wrap{
  background-color: black;
	position: relative;
	height:100%;
}
.mv{
  height: 100%;
	background-image:url(images/mv01.jpg);
	background-position: top left;
}
/*--------------------------------------------------------------
  NAVIGATION
-------------------------------------------------------------- */
#nav-toggle {
  position: fixed;
  top: 25px;
  right: 25px;
  height: 32px;
  cursor: pointer;
}
#nav-toggle > div {
  position: relative;
  width: 36px;
}
#nav-toggle span {
  width: 100%;
  height: 5px;
  left: 0;
  display: block;
  background: #00b0db;
  position: absolute;
  transition: top .5s ease, -webkit-transform .6s ease-in-out;
  transition: transform .6s ease-in-out, top .5s ease;
  transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
}
#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 14px;
}
#nav-toggle span:nth-child(3) {
  top: 28px;
}
#nav-toggle:hover span:nth-child(1) {
  top: 4px;
}
#nav-toggle:hover span:nth-child(3) {
  top: 23px;
}

.open #nav-toggle span {
  background: #fff;
}
.open #nav-toggle span:nth-child(1) {
  top: 15px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2) {
  top: 15px;
  width: 0;
  left: 50%;
}
.open #nav-toggle span:nth-child(3) {
  top: 15px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

/* z-index */
#nav-toggle {
  z-index: 1000;
}

#container {
  z-index: 900;
}

#gloval-nav {
  background: #000;
  color: #fff;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  transform: rotate(.03deg);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  text-align: center;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 29px;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
}

#gloval-nav span{
    font-size: 0.8em;
    margin-left: 30px;
    color: #ccc;
}

#gloval-nav a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px 0;
  transition: color .6s ease;
}
#gloval-nav a:hover {
  color: #999;
}
#gloval-nav ul {
  list-style: none;
}
#gloval-nav ul li {
  opacity: 0;
  -webkit-transform: translateX(200px);
          transform: translateX(200px);
  transition: opacity .2s ease, -webkit-transform .6s ease;
  transition: transform .6s ease, opacity .2s ease;
  transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;
}
#gloval-nav ul li:nth-child(2) {
  transition-delay: .15s;
}
#gloval-nav ul li:nth-child(3) {
  transition-delay: .3s;
}
#gloval-nav ul li:nth-child(4) {
  transition-delay: .45s;
}
#gloval-nav ul li:nth-child(5) {
  transition-delay: .6s;
}
#gloval-nav ul li:nth-child(6) {
  transition-delay: .75s;
}
#gloval-nav ul li:nth-child(7) {
  transition-delay: .9s;
}

/* open */
.open {
  overflow: hidden;
}
.open #gloval-nav {
  visibility: visible;
  opacity: 1;
}
.open #gloval-nav li {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  transition: opacity .9s ease, -webkit-transform 1s ease;
  transition: transform 1s ease, opacity .9s ease;
  transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
}

/*--------------------------------------------------------------
  LOGO
-------------------------------------------------------------- */
.logo_img{
    z-index: 10;
	position: absolute;
    margin-left: 30px;
    margin-top: 30px;
	top: 0;
}

.logo{
	position: absolute;
	bottom: 0;
	padding-bottom: 10%;
    z-index: 10;
}
header .logo{
	position: absolute;
	top: 0;
	padding-top: 20%;
    z-index: 10;
}
@media screen and (max-width: 580px) {
    .sp_space{
    position: absolute;
    bottom: 0;
    padding-bottom: 30%;
    z-index: 10;
    }
}
/*--------------------------------------------------------------
  scroll
-------------------------------------------------------------- */

.scroll{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /*以下装飾*/
    /*color: #f97f39;*/
    color: white;
    font-weight: 900;
    text-align: center;
    padding:0 5px;
    line-height:3;
    z-index: 10;
}
.scroll a{
    color: white;
}
.flash{
  animation: flash 2s ease infinite alternate;
}

@keyframes flash {
  50% {
    opacity: 0;
  }
}
/*--------------------------------------------------------------
  exhibition
-------------------------------------------------------------- */
.exhibition{
  background-color: black;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  transform: rotate(.03deg);
  display: flex;
  justify-content:center;
  flex-wrap: wrap;
  padding: 100px 0 100px 0;
}
.exhibition h2{
  color: white;
  font-size: 3em;
  line-height: 2em;
}
.ex_photo{
  text-align: center;
  margin-bottom: 30px;
  margin-top: 30px;
}
.ex_photo img{
  box-shadow: 0px 0px 5px #999;
    border: 3px solid white;
  /*border: 2px solid white;*/
}
.swiper-slide{
  box-shadow: 0px 0px 5px #999;
  border: 1px solid white;
}


/* right */
.ex_right{
  max-width: 600px;
  color: #bbb;
}
.ex_date{
  font-size: 1.1em;
  color: white;
  line-height: 2em;
}
.ex_name{
  font-size: 1.2em;
  color: #f97f39;
}

/* left */
.ex_left{
  font-family: "Noto Sans JP";
  font-size: .9em;
  font-weight: 100;
  color: white;
  /*max-width: 620px;*/
  margin: 0 50px 0 50px;
  padding: 20px 0 0 0 ;
  text-align: center;
}
.ex_left img{
  margin: 10px;
}

/*--------------------------------------------------------------
  info
-------------------------------------------------------------- */
.info{
  background-color: #f2f2f2;
  /*font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  transform: rotate(.03deg);*/
  display: flex;
  justify-content:center;
  flex-wrap: wrap;
  padding: 5% 0 5% 0;
}
.info h2{
  color: black;
  font-size: 1.8em;
  margin: 20px 0 10px 0 ;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.

/* right */
.info_right{
  /*max-width: 300px;*/
  border-right: 1px solid #999;
  padding: 0 50px 0 0 ;
}
.info_right span{
  font-size: .8em;
  letter-spacing: 0.45em;
}

/* left */
.info_left{
  font-size: .9em;
  font-weight: 100;
  max-width: 7  00px;
  margin: 0 30px 0 30px;
  padding: 20px 0 0 0 ;
}
.info_left ul{

}
.info_left ul li{
  padding: 5px;
  font-size: 1.1em;
}

/* info_label */
.label_blue{
  background-color: #00b0db;
  padding: 10px;
  color: white;
  letter-spacing: .5em;
  font-size: .8em;
  margin: 5px;
  width: 100px;
  display: inline-block;
  text-align: center;
}
.label_gray{
  background-color: gray;
  padding: 10px;
  color: white;
  letter-spacing: .5em;
  font-size: .8em;
  margin: 5px;
  width: 100px;
  display: inline-block;
  text-align: center;  
}
.label_date{
  color: #333;
  margin:0 20px 0 20px;
  font-size: 1em;
  font-size: .9em;
  text-decoration: underline;
}

/* sp */
@media screen and (max-width: 580px) {
  .label_date{
    color: #333;
    margin:0 10px 0 10px;
  }
}

@media screen and (min-width: 581px) {
    br.sp{
        display: none;
    }
}


/*--------------------------------------------------------------
  index_contents
-------------------------------------------------------------- */
.index_box{
	letter-spacing: -.4em;
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.index_box ul{

}

.index_box ul li{
	display: inline-block;
	text-align: center;
	width: 33.3333%;
	padding-top: 50px;
    padding-bottom: 80px;
	margin: 0 auto;
}

/* SP */
@media screen and (max-width: 580px) {
.index_box{
	letter-spacing: -.4em;
	display: box;
}
.index_box ul li{
	display: inline-block;
	text-align: center;
	width: 100%;
	padding-top: 50px;
	margin: 0 auto;
}
}

.index_box h2{
    font-size: 3em;
	letter-spacing:0;
	font-family: 'Sawarabi Mincho', sans-serif;
    font-weight: 600;
}
.index_box h3{
	font-size: 1.5em;
	letter-spacing:0;
	font-family: 'Sawarabi Mincho', sans-serif;
	padding-top: 50px;
	padding-bottom: 0px;
    font-weight: 500;
}
.index_box span{
	vertical-align: middle;
    letter-spacing: 0;
    color: #999;
}
.index_box a{
	color: black;
}
/* index_box_pattern */

.box_resin{
	background-color: white;
}
.box_metal{
	background-image: url(images/back_metal.jpg);
}
  .box_metal a{
    color: white;
  }
.box_mass{
	background-color: white;
}
.box_company{
	background-image: url(images/back_company.jpg);
  background-position: center;
}
  .box_company a{
    color: white;
  }
.box_product{
	background-color: white;
}
.box_material{
	background-image: url(images/back_material.jpg);
  background-position: center;
}
.box_material a{
  color: white;
}

/*--------------------------------------------------------------
  contents header
-------------------------------------------------------------- */
.head_company{
  background-image: url('./images/header_company.jpg');
  background-position: center;
  height: 50%;
}
.head_exhibition{
  background-image: url('./images/header_ex.jpg');
  background-position: center;
  height: 50%;
}
.head_product{
  background-image: url('./images/header_product.jpg');
  background-position: center;
  height: 50%;
}
.head_mat{
  background-image: url('./images/header_mat.jpg');
  background-position: center;
  height: 50%;
}
.head_contact{
  background-image: url('./images/header_contact.jpg');
  background-position: center;
  height: 50%;
}
header h1{
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  transform: rotate(.03deg);
}
.icon_bnr{
  margin-right: auto;
}

/*--------------------------------------------------------------
  contents wrap
-------------------------------------------------------------- */
.contents_wrap{
  line-height: 1.8em;
  background-color: #d5d5d5;
}
.contents_wrap h1{
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  transform: rotate(.03deg);
  font-size: 2em;
  letter-spacing: 0.5em;
  margin: 50px;
  text-align: center;
}

.contents_wrap h2{
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  transform: rotate(.03deg);
  letter-spacing: 0.2em;
  padding: 50px;
  text-align: center;
    font-weight: 900;
}

/* midashi sp */
@media screen and (max-width: 479px) {
    .contents_wrap h1{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    transform: rotate(.03deg);
    font-size: 2em;
    letter-spacing: 0em;
    margin: 50px;
    text-align: center;
    }
    .contents_wrap h2{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    transform: rotate(.03deg);
    letter-spacing: 0em;
    padding: 50px;
    text-align: center;
    font-weight: 900;
    }
}

.contents_wrap img{
  margin: 10px;
}

.contents h3{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    transform: rotate(.03deg);
    letter-spacing: 0.2em;
    padding: 15px 0 15px 0;
    font-size: 1.3em;
    text-align: left;
    font-weight: 900;
}


/*--------------------------------------------------------------
  contents-title
-------------------------------------------------------------- */
.contents-title{
  position: relative;
  overflow: hidden;
  margin: 5% 0;
  padding: 80px 0;
  margin-top: -150px;
}

.contents-title:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 80%;
  margin: 3% -30% 0;
  background: black;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  transform: rotate(2deg);
  z-index: -1;
}

.contents-title_inner {
  box-sizing: boder-box;
  width: 100%;
  max-width: 1000px;
  height: 100%;
  margin: 0 auto;
  padding: 100px 10px 120px;
  color: #fff;
  text-align: center;
}




/*--------------------------------------------------------------
  sub_nav
-------------------------------------------------------------- */
.sub_nav ul{
	display: table;
  table-layout: fixed;
  text-align: center;
  width: 100%;
  margin-bottom: 15px;
	letter-spacing: 0.5em;
  margin: 0 auto;
  line-height: 2.5em;
}
.sub_nav li{
	display: table-cell;
  vertical-align: middle;
  border-bottom: 1px solid #999;
}

.sub_nav li a{
 color: #999;
  display: block;
  font-size: 0.9em;
  text-decoration: none;
  padding: 15px 0;
}
.sub_nav li a:hover{
 /*background-color: #ddd;*/
    border-bottom: 2px solid #f97f39;
}
.sub_nav li:first-child{
border-left:none;
}

/*--------------------------------------------------------------
  contents
-------------------------------------------------------------- */
.contents{
  width: 80%;
  margin: 0 auto;
}
  .minus{
    margin-top: -50px;
  }

/* exhibition */
.contents_ex{
  color: black;
    text-align: center;
    font-size: 1em;
    padding: 50px;
}
.contents_ex p{
    text-align: center;
    margin: 0 auto;
    color: #666;
    padding: 15px;
}
.contents_ex_schedule{
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 5px #999;
}
.contents_ex ul{
    /*padding-left: 8%;*/
    font-size: 1.3em;
    color: #333;
    max-width: 900px;
    margin: 0 auto;
}
.contents_ex ul li{
    margin: 30px;
    padding: 15px;
    border-bottom: 1px dotted #999;
    text-align: left;
}


/* product */
.contents_pro{
  color: black;
}
.animation{
  margin: 0 auto;
  text-align: center;
  background-color: black;
  width: 90%;
}
.pro_att{
  color: black;
  text-align: center;
}
.pro_att dl{
    display:flex;
    flex-wrap: wrap;
    margin: 0 auto;
    font-size: .9em;
    letter-spacing: .1em;
}
.pro_att dt{
    font-weight: 700;
    width: 45%;
    padding: 5px 20px 5px 5px;
    text-align: right;
}
.pro_att dd{
    width: 45%;
    padding: 5px 5px 5px 20px;
    text-align: left;
}



/* company */
.contents_com{
  color: black;
}
.contents_com .att{
    font-size: .9em;
    padding: 20px 50px 0 50px;
    margin-top: 10px;
}

/* company button */
.company_link{
	width: 100%;
    text-align: center;
}
.company_button{
	width: 100%;
	background-color: #00b0db;
	padding: 15px 0 15px 0;
	color: white;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	transform: rotate(.03deg);
	line-height: 2em;
    margin:  15px 0 15px 0;
    font-size: 1.2em;
}

/* company equipment */
.equipment{
    display: flex;
    justify-content:center;
    flex-wrap: wrap;
    margin: 0 auto;
}
.e_box{
    background-color: #e6e6e6;
    width: 300px;
    padding: 30px;
    margin: 5px;
    font-size: .8em;
    text-align: center;
}
.e_box h4{
    text-align: center;
    font-weight: 900;
    font-size: 1.3em;
    line-height: 2em;
}
.e_box .label_pro{
    background-color: #999;
}

/* material */
.material{
    display: flex;
    justify-content:center;
    flex-wrap: wrap;
    margin: 0 auto;
}
.m_box{
    background-color: #eee;
    width: 300px;
    padding: 30px;
    margin: 5px;
    font-size: .8em;
    text-align: center;
}

.back02{
    background-color: #f0f0f0;
}

.m_box h4{
    text-align: center;
    font-weight: 900;
    font-size: 1.3em;
    line-height: 2em;
    margin-bottom: 10px;
}
.m_box .label_pro{
    background-color: #999;
}

/* material DL DT DD*/
.m_box dl{
    margin: 0 auto;
    font-size: 1em;
    letter-spacing: .1em;
}
.m_box dt{
    background-color: #999;
    color: white;
    width: 100px;
}
.m_box dd{
    text-align: left;
    margin-left: 15px;
}

/* product button */
.product_link{
	width: 100%;
    text-align: center;
    vertical-align: middle;
    height: 200px;
    margin:  30px 0 50px 0;
    top:0;
    bottom: 0;
}
.product_button{
	width: 100%;
	background-color: black;
    background-image: url(images/mv04.jpg);
	padding: 100px 0 100px 0;
	color: white;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	transform: rotate(.03deg);
    /*height: 100%;*/
    font-size: 1.2em;
}

/* contact */
.contents_contact{
  margin: 15px;
    text-align: center;
}
div.box h3{
    text-align: center;
}
.form{
    margin: 0 auto;
}

/* policy */
.policy{
    font-size: .8em;
    background-color: #ddd;
    padding: 30px;
    margin: 10px;
    border-radius: 10px;
}
.policy h4{
    font-weight: 700;
    padding: 30px 0 30px 0;
    font-size: 1.3em;
}
.policy_contact{
    text-align: center;
}


/*--------------------------------------------------------------
  Product box
-------------------------------------------------------------- */
/* data */
div.data{
	width: 100%;
	margin:0 auto;
	text-align: center;
	padding:10px;
}
div.box {
	background-color: black;
    color: white;
	width: 300px;
	font-size: 0.8em;
	text-align: center;
	vertical-align: top;
	padding: 15px;
	text-align: center;
    display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5`7*/
    /zoom: 1; /*for ie5`7*/
}
div.box02 {
	background-color: #333;
	width: 435px;
	min-width: 45%;
	font-size: 0.8em;
	text-align: left;
	vertical-align: top;
	padding: 15px;
	text-align: left;
    display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5`7*/
    /zoom: 1; /*for ie5`7*/
}
div.box03 {
	background-color: #333;
/*	width: 435px;*/
	min-width: 45%;
	font-size: 0.8em;
	text-align: left;
	vertical-align: top;
	padding: 15px;
	text-align: center;
    display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5`7*/
    /zoom: 1; /*for ie5`7*/
}
div.box04 {
	background-color: white;
	color: #333;
	max-width: 450px;
	min-width: 45%;
	font-size: 0.9em;
	vertical-align: top;
	padding: 10px 20px 30px 15px;
    margin: 5px;
	text-align: center;
    display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5`7*/
    /zoom: 1; /*for ie5`7*/
    box-shadow: 0px 0px 5px #999;
}
div.box05 {
	background-color: #fff;
	color: #222;
	width: 400px;
	height: 320px;
	margin-right: 10px;
	font-size: 0.9em;
	text-align: left;
	vertical-align: top;
	padding: 15px;
    display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5`7*/
    /zoom: 1; /*for ie5`7*/
	 border-top: 15px solid #ccc;
}
.data span{
	font-weight: 900;
	font-size: 1.8em;
    line-height: 2em;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	transform: rotate(.03deg);
}
span.label_pro{
    background-color: #00b0db;
    color: white;
    font-size: 1em;
    font-weight: 300;
    padding: 2px 10px 2px 10px;
    margin: 2px 10px 2px 10px;
}

/*--------------------------------------------------------------
  TABLE
-------------------------------------------------------------- */
.material table{
  width: 95%;
}
.material thead{
  background-color: #eee;
  font-weight: bold;
  text-align: center;;
}
.material td{
  padding: 10px;
  text-align: center;;
  border-bottom: 1px dotted #eee;
  width: 16%;
  font-size: .9em;
}




/*--------------------------------------------------------------
  DL DT DD
-------------------------------------------------------------- */
.contents_com dl{
    display:flex;
    flex-wrap: wrap;
    margin: 0 auto;
    background-color: #e6e6e6;
    font-size: .9em;
    letter-spacing: .1em;
}
.contents_com dt{
    font-weight: 700;
    width: 25%;
    padding: 30px;
    border-bottom: 1px dotted white;
    text-align: right;
}
.contents_com dd{
    width: 60%;
    padding: 30px;
    border-bottom: 1px dotted white;
}

@media (max-width: 767px) {
    .contents_com dl{
        display:flex;
        flex-wrap: no-wrap;
        margin: 0 auto;
        background-color: #ddd;
    }
    .contents_com dt{
        width: 100%;
        text-align: center;
    }
    .contents_com dd{
        width: 100%;
    }
}


/*--------------------------------------------------------------
  contact
-------------------------------------------------------------- */
/* contact button */
.contact{
	text-align: center;
    margin-top: 100px;
	padding: 5%;
}
.contact_button{
	background-color: #00b0db;
	border-radius: 10px;
	padding: 30px;
	color: white;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	transform: rotate(.03deg);
	font-size: 1.5em;
	line-height: 2em;
}

/*--------------------------------------------------------------
  footer
-------------------------------------------------------------- */
footer{
    background-color: #222;
    text-align: center;
    color: #f2f2f2;
    font-size: .9em;
    padding: 3% 0 3% 0;
    /* color */
    background: -moz-linear-gradient(top, #888, #000);
    background: -webkit-linear-gradient(top, #888, #000);
    background: linear-gradient(top right, #888, #000);
}
.footer_att{
    font-size: .8rm;
    color: #999;
}
.footer_nav{
	margin-top: 20px;
}
.footer_nav ul{
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
}
.footer_nav ul li{
    padding: 10px;
    margin: 0 auto;
}
.footer_nav ul li a{
    color: white;
}
.footer_nav ul li a:hover{
    color: #00b0db;
}
.footer_nav span{
	font-size: .8em;
    color: #999;
    letter-spacing: .3em;
}
.copy{
    background-color: black;
    font-size: .8em;
    color: white;
    text-align: center;
    padding: 3%;
}

/*--------------------------------------------------------------
  hover effect
-------------------------------------------------------------- */
/* Grow */
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* Sweep To Right to black*/
.hvr-sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
  color: white;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* Sweep To Right to blue*/
.hvr-sweep-to-right_bl {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-right_bl:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-right_bl:hover, .hvr-sweep-to-right_bl:focus, .hvr-sweep-to-right_bl:active {
  color: white;
}
.hvr-sweep-to-right_bl:hover:before, .hvr-sweep-to-right_bl:focus:before, .hvr-sweep-to-right_bl:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/*--------------------------------------------------------------
  pagetop
-------------------------------------------------------------- */

/* パソコン・スマホ共通のCSS */
#PageTopBtn {
    position: fixed; /*ボタンの配置場所を固定*/
    bottom: -10px; /*下からのボタンの配置場所を指定*/
    right: 10px; /*右からのボタンの配置場所を指定*/
}
#PageTopBtn a {
    display: block; /*配置の調整*/
    text-decoration: none; /*文字の下線を消す*/
    color: #fff; /*文字の色*/
    background: #000; /*ボタンの背景色*/
    text-align: center; /*文字を中央に配置*/
    border-radius: 5%; /*ボタンの角を少し丸くする*/
    outline: none; /*クリックしたときの黒い枠を消す*/
    border: 1px solid white;
}
#PageTopBtn a:hover {
    text-decoration: none;
    background: #00b0db; /*マウスオーバー時の背景色*/
}

/* パソコンで表示する場合のCSS */
@media (min-width: 768px) {
#PageTopBtn {
    font-size: 13px; /*文字のサイズ*/
}
#PageTopBtn a {
    width: 80px; /*ボタンの幅*/
    height: 50px; /*ボタンの高さ*/
    padding: 24px 0; /*文字の配置場所の調整*/
}
}

/* スマホで表示する場合のCSS */
@media (max-width: 767px) {
#PageTopBtn {
    font-size: 10px;
}
#PageTopBtn a {
    width: 70px;
    height: 90px;
    padding: 17px 0;
}
}

/*--------------------------------------------------------------
  footer SP menu
-------------------------------------------------------------- */
.mini-text{font-size:12px;}/*文字大きさ*/

ul.bottom-menu {
    position: fixed;
    left:0;
    bottom:0;
    width: 100%;
    height:60px;/*高さ*/
    margin:0;
    padding:0;
    background-color:#f5f5f5;/*背景色*/
    border-top:2px solid #808080;/*バーの上の線*/
    border-bottom:2px solid #808080;/*バーの下の線*/
    z-index:30;}

ul.bottom-menu li {
    float:left;
    width:50%;
    background-color:#f5f5f5;/*背景色*/
    list-style-type:none;
    text-align:center;
    font-size:25px;/*アイコンのサイズ*/}

.bottom-menu li a {
    display: block;
    color:#f97f39;/*アイコン＆文字の色*/
    padding-top:10px;
    padding-bottom:5px;
    line-height:10px;
    text-decoration:none;}

.bottom-menu li a:hover {
    color:#a9a9a9;/*マウスオーバー時の色*/}

/* === 展開メニュー === */

ul.menu-second-level {
    visibility: hidden;
    opacity: 0;
    z-index:1;}

ul.menu-second-level li a{
    border-top:1px dashed #a9a9a9;/*展開の枠点線*/
        font-size:15px;/*展開メニューの文字サイズ*/
        line-height:30px;/*文字の縦幅*/}

.menu-second-level li a:hover {
    height:100%;
    background: lightgrey;/*マウスオーバーの色*/}

li.menu-width-max ul.menu-second-level {
    position: absolute;
    bottom: 80px;/*高さ*/
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding:0;}

li.menu-width-max:hover ul.menu-second-level {
    bottom: 47px;/*高さ*/
    visibility: visible;
    opacity: 1;}

li.menu-width-max ul.menu-second-level li {
    float: left;
    width: 100%;
    border: none;}

/* PCでは非表示 */
@media(min-width: 768px){
    .bottom-menu{display:none; }
}

/* 位置調整 */
@media(max-width: 767px){
    .copy{margin-bottom:50px;}
}

/*--------------------------------------------------------------
  Googlemap
-------------------------------------------------------------- */
.ggmap_bk {
	position: relative;
	padding: 0 0 56%;
	height: 0;
	overflow: hidden;
}

.ggmap_bk iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

/*--------------------------------------------------------------
  mail form
-------------------------------------------------------------- */
/* reset */
button,
option,
select,
textarea,
input[type="button"],
input[type="submit"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="text"],{
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    border: none;
    outline: 0;
    margin: 0;
    background: #fff;
}

/* for firefox */

select {
    text-indent: 0.01px;
    text-overflow: '';
}

/* for ie10 ie11 ie系のプルダウンの矢印を消す ie9は非対応 */

select::-ms-expand {
    display: none;
}

/* form　Parts */
textarea,
input[type="number"],
input[type="text"] {
    width: 80%; !important
    padding: 10px 15px;
    font-size: 14px;
    font-size: 1.4rem;
    border: 1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
}
textarea {
    height: 100px; /* お好みの高さに */
}
textarea:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="text"]:focus {
    background-color: #eee;
}


/* form Layout */
.mailform{
	width: 100%;
	margin: 0 auto;
    text-align: center;
    background-color: #eee;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0px 0px 10px #999;
}
.mailform dt{
    margin: 10px 0 10px 0;
    font-size: 1.2em;
    font-weight: 700;
    letter-spacing: .3em;
}
.mailform dd{
    padding: 15px;
}
.mailform label{
    margin: 0 10px 0 10px;
}
.mailform span{
	font-size: 0.7em;
	background-color: orange;
    color: white;
    padding: 5px;
    margin-right: 10px;

}
.btn{
    display:block;
    width: 100%;
    height:100px;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    background-color: #f39800;
    border-radius: 5px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    font-size: 1.5em;
}
.btn:hover{
     background-color: #f9c500;
}