@charset "UTF-8";
/* --------------------------------
 * wrapper
 * -------------------------------- */
.wrapper {
padding: 0px;
}
/* --------------------------------
 * header
 * -------------------------------- */
.header-wrap {
position: relative;
}
h1 {
position: absolute;
top: 35px;
right: 15px;
font-size: 1.2rem;
text-align: right;
z-index: 5;
}
.site-logo {
width: 190px;
height: 60px;
padding: 17px 0 0 15px;
}
.site-title {
position: absolute;
width: 100%;
top: 180px;
text-align: center;
font-size: 5.2rem;
z-index: 5;
font-family: 'Muli', sans-serif;
color: #fff;
letter-spacing: 2px;
text-shadow: 0px 0px 10px hsla(208,55%,55%,0.67);
}
.site-title strong {
font-size: 2.0rem;
display: block;
letter-spacing: 1px;
}
.header-main-visual {
width: 100%;
height: 600px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.header-main-visual01 {
background-image: url("../../img/header-main-visual01.jpg");
}
.header-main-visual02 {
background-image: url("../../img/header-main-visual02.jpg");
}
.site-description-wrap {
padding-top: 50px;
padding-bottom: 50px;
}
.site-description {
/*text-align: center;*/
line-height: 2.0;
margin-bottom: 20px;
}
.site-description strong {
font-weight: bold;
font-size: 1.5rem;
}

@media only screen and (max-width: 767px) {
h1 {
position: absolute;
top: 370px;
right: 15px;
font-size: 1.0rem;
color: #fff;
text-shadow: 0px 0px 5px hsla(208,55%,55%,0.8);
}
.site-logo {
padding: 17px 0 0 10px;
width: 185px;
}
.site-title {
top: 140px;
font-size: 4.2rem;
}
.site-title strong {
font-size: 1.7rem;
}
.site-description-wrap {
padding-top: 20px;
}
.site-description {
text-align: left;
line-height: 1.6;
margin-bottom: 15px;
}
}
/* -------------------
 * global-nav
 * ------------------- */
.global-nav-wrap {
z-index: 99;
width: 100%;
background-color: hsla(0,0%,100%,0.80);
position: absolute;
top: 610px;/*(60+600)-40+5+5*/
}
.global-nav {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;/*-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;*/
}
.global-nav li {
width: calc(100% / 3);
padding: 0px;
}
.global-nav li a {
display: block;
font-size: 1.6rem;
letter-spacing: 1px;
color: #434343;
text-decoration: none;
text-align: center;
line-height: 50px;
height: 50px;
transition: 0.2s ease-in-out;
border-right: 1px solid hsla(0,0%,65%,0.3);
}
.global-nav li:last-child a {
border-right: none;
}
@media only screen and (min-width: 1025px) {
.global-nav li a:hover {
background-color: hsla(0,0%,100%,1.00);
}
}
@media only screen and (max-width: 767px) {
.global-nav-wrap {
background-color: hsla(213,91%,56%,0.90);
padding: 70px 0px 0px;
}
.global-nav {
display: block;
padding-top: 10px;
}
.global-nav li {
width: 100%;
padding-bottom: 0px;
}
.global-nav li a {
font-size: 1.4rem;
letter-spacing: 1px;
color: #fff;
text-align: left;
line-height: 1.3;
border-right: none;
padding: 25px 10px 40px;
border-bottom: 1px solid hsla(0,0%,100%,0.61);
}
.global-nav li a::before {
content: '\e804';
font-family: "fontello";
margin-right: 8px;
}
}
.btn-language {
position: absolute;
top:-610px;
right: 25px;
margin-left: auto;
margin-right: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.btn-language a {
display: block;
text-decoration: none;
color: #434343;
padding: 5px;
line-height: 1;
font-size: 1.3rem;
margin-right: 1px;
width: 130px;
text-align: center;
}
.btn-language a.current {
color: #fff;
background-color: #84B9E1;
}
@media only screen and (min-width: 1025px) {
.btn-language a:hover {
color: #fff;
background-color: #84B9E1;
}
}
@media only screen and (max-width: 767px) {
.btn-language {
position: relative;
top: auto;
right: auto;
width: 90%;
margin: 25px auto;
}
.btn-language a {
color: #fff;
width: 50%;
}
.btn-language a.current {
color: #2885F5;
background-color: hsla(0,0%,100%,0.80);
}
}
/* ----------------
 * slideout
 * ---------------- */
@media only screen and (max-width: 767px) {
.slideout-menu {
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 0;
width: 230px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
display: none;
background-color: hsla(213,91%,56%,1.00);
}
.slideout-panel {
position: relative;
z-index: 99;
will-change: transform;
background-color: #fff;
}
.slideout-open, .slideout-open body, .slideout-open .slideout-panel {
overflow: hidden;
}
.slideout-open .slideout-menu {
display: block;
}
}
/* ----------------
 * toggle
 * ---------------- */
.toggle-button {
display: none;
}

@media only screen and (max-width: 767px) {
.toggle-button {
display: block;
position: fixed;
}
}
.menuWrapper {
position: fixed;
z-index: 999999999;
top: 8px;
right: 10px;
/*border: 2px solid #fff;*/
border-radius: 5px;
width: 44px;
height: 44px;
background-color: hsla(213,91%,56%,0.90);
}
#menuButton {
overflow: hidden;
display: block;
position: relative;
z-index: 99990;
width: 44px;
height: 44px;
cursor: pointer;
transition: transform 300ms;
}
#menuButton span, #menuButton::before, #menuButton::after {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 24px;
height: 3px;
margin: auto;
background: #fff;
}
#menuButton span {
opacity: 1;
transition: opacity 200ms;
overflow: hidden;
z-index: 99991;
color: #fff;
}
#menuButton::before, #menuButton::after {
transition: transform 200ms;
z-index: 99992;
content: "";
}
#menuButton::before {
transform: translate(0, -9px);
}
#menuButton::after {
transform: translate(0, 9px);
}
#menuButton.active {
transform: rotate(-180deg);
}
#menuButton.active span {
opacity: 0;
}
#menuButton.active::before {
transform: rotate(45deg);
}
#menuButton.active::after {
transform: rotate(-45deg);
}
/* --------------------------------
 * content
 * -------------------------------- */
#packaging-films, #industrial-films, #history {
padding-bottom: 50px;
}
#packaging-films {
background-color: #fef8f3;
}
#industrial-films {
background-color: #f0f9f8;
}
#history {
padding-top: 50px;
}
.content-description {
max-width: 880px;
margin: 0 auto 25px;
padding: 0 10px;
line-height: 1.8;
}
.content-description strong {
font-weight: bold;
font-size: 1.5rem;
}

@media only screen and (max-width: 767px) {
#history {
padding-top: 25px;
}
}
/* --------------------
 * content-products-wrap
 * -------------------- */
.content-products-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-width: 1200px;
margin: 0 auto 10px;
}
.content-products-p {
border-bottom: 1px dashed hsla(25,79%,57%,0.60);
margin-bottom: 35px;
}
.content-products-wrap li {
width: 340px;
padding: 0 10px 30px;
}
.content-products-wrap li a {
display: block;
text-decoration: none;
color: #434343;
}
.content-products-image {
width: 100%;
height: 188px;
background-position: center center;
background-size: 100% auto;
background-repeat: no-repeat;
margin-bottom: 8px;
transition: 0.2s ease-in-out;
display: table;
position: relative;
}
.content-products-image::before {
content: "";
position: absolute;
width: 100%;
height: 70px;
background-color: hsla(0,0%,100%,0.50);
top: 59px;
left: 0;
transition: 0.2s ease-in-out;
}
.content-products-logo {
display: table-cell;
text-align: center;
vertical-align: middle;
position: relative;
padding: 0 30px;
line-height: 1.0;
}
.content-products-name {
font-size: 1.7rem;
font-weight: bold;
line-height: 1.3;
text-align: center;
}

@media screen and (min-width: 1025px) {
.content-products-wrap li a:hover .content-products-image {
background-size: 120% auto;
}
.content-products-wrap li a:hover .content-products-image::before {
width: 100%;
height: 188px;
top: 0px;
left: 0;
}
}
/* --------------------
 * pom-wrap
 * -------------------- */
.pom-wrap {
background-color: #434343;
padding: 45px 30px;
margin-top: 40px;
}
.pom-movie-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.pom-movie {
width: 48%;
margin: 0 1% 40px;
color: #fff;
}
.pom-movie-title {
text-align: center;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
padding: 2px 0;
margin-bottom: 10px;
}
.pom-movie-title span {
display: block;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 10px 3px 8px;
}
.pom-movie-title strong {
display: block;
font-size: 1.7rem;
font-weight: bold;
padding-top: 3px;
}
.btn-jstream-note a {
text-align: center;
text-decoration: none;
color: #fff;
display: block;
padding: 10px 0 0;
}
.btn-jstream-note a::before {
font-family: "fontello";
content: '\e813';
margin-right: 10px;
}

@media only screen and (max-width: 767px) {
.pom-movie {
width: 100%;
margin: 0 0px 35px;
}
}

@media only screen and (max-width: 500px) {
.pom-wrap {
padding: 40px 15px;
}
.pom-movie-title.pom-movie-title-e {
font-size: 1.2rem;
}
.pom-movie-title.pom-movie-title-e strong {
font-size: 1.4rem;
}
}

@media screen and (max-width: 500px) {
.btn-jstream-note a {
font-size: 1.2rem;
}
}
/* --------------------------------
 * banner-wrap
 * -------------------------------- */
.banner-wrap {
width: 100%;
background-color: #eaeaea;
padding: 20px 5px 10px;
}
.banner-wrap ul {
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/*-ms-flex-wrap: wrap;
flex-wrap: wrap;*/
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.banner-wrap ul li {
max-width: 240px;
margin: 0px 15px 10px;
line-height: 1;
}

@media only screen and (max-width: 600px) {
.banner-wrap ul li {
margin-left: 5px;
margin-right: 5px;
}
}
/* --------------------------------
 * footer
 * -------------------------------- */
.footer {
color: #fff;
width: 100%;
padding: 30px 0px;
background-color: #2b87f5;
}
.footer-address {
border-bottom: 1px solid hsla(0,0%,100%,0.61);
padding-bottom: 20px;
margin-bottom: 10px;
letter-spacing: 1px;
}
.footer-address a {
color: #fff;
text-decoration: none;
}
.footer-address-name {
font-size: 1.8rem;
display: block;
margin-bottom: 5px;
}
.footer-address-add {
margin-bottom: 5px;
display: block;
}
.footer-address-tel {
display: block;
line-height: 1.9;
}
.footer-address-tel02 {
display: inline-block;
}

@media screen and (max-width: 768px) {
.footer-address-tel02 {
display: none;
}
}
.footer-nav {
width: 100%;
border-bottom: 1px solid hsla(0,0%,100%,0.61);
padding-bottom: 10px;
margin-bottom: 10px;
}
.footer-nav ul::after {
content: "";
display: block;
clear: both;
}
.footer-nav li {
float: left;
display: inline-block;
}
.footer-nav li:last-child {
float: right;
display: inline-block;
}
.footer-nav li a {
display: block;
padding: 10px 35px 8px 0px;
color: #fff;
line-height: 1.1;
text-decoration: none;
}
.footer-nav li a::before {
content: '\e813';
font-family: 'fontello';
margin-right: 10px;
}
.footer-nav li:last-child a {
padding-right: 0px;
}
.copyright {
display: block;
font-size: 1.2rem;
text-align: right;
}
@media only screen and (min-width: 1025px) {
.footer-address a:hover, .footer-nav li a:hover {
text-decoration: underline;
}
}
@media only screen and (max-width: 767px) {
.footer-address {
padding-bottom: 20px;
margin-bottom: 0px;
}
.footer-nav {
border-bottom: none;
padding-bottom: 10px;
margin-bottom: 10px;
}
.footer-nav li {
float: none;
display: block;
}
.footer-nav li:last-child {
float: none;
display: block;
}
.footer-nav li a {
padding: 15px 10px;
border-bottom: 1px solid hsla(0,0%,100%,0.61);
position: relative;
}
.footer-nav li a::before {
display: none;
}
.footer-nav li a::after {
content: '\e804';
font-family: 'fontello';
position: absolute;
right: 10px;
}
.footer-nav li:last-child a {
padding: 15px 10px;
}
.copyright {
font-size: 1.0rem;
}
}