/*
Theme Name: ITO
Version: 1.0
Author: ITO
Description: 2025, ITO
*/

@charset 'UTF-8';

@charset 'UTF-8';
@import url("css/destyle.css");


html {
 overflow: auto;
 font-size: 62.5%;
}
body {
 position: relative;
 width: 100%;
 height: 100%;
 font-family: "Helvetica Neue", "Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Yu Gothic", "Osaka", sans-serif;
 color: #000;
 background-color: #fff;
 -webkit-text-size-adjust: 100%; /*iPhoneの文字が大きくなるバグ対策*/
}
body {
 display: flex; /* フッターを下部に固定 1/4 */
 flex-direction: column; /* フッターを下部に固定 2/4  */
 min-height: 100vh; /* フッターを下部に固定 3/4  */
}
footer {
 margin-top: auto; /*  フッターを下部に固定 4/4  */
}
article {
 width: 100%;
 height: 100%;
}
.max960 {
 position: relative;
 width: 90%;
 max-width: 960px;
 margin: 0 auto;
}
h2, h3, h4, h5, h6 {
 font-weight: bold;
}
p, li, ul, figcaption {
 font-size: 1.6rem;
 line-height: 1.8;
}
a:hover {
 opacity: 0.5;
 transition: 0.5s;
}
section img {
 width: 100%;
}
p, li, ul, figcaption {
 font-size: 1.6rem;
 line-height: 1.8;
}
a:hover {
 opacity: 0.5;
 transition: 0.5s;
}
h2.midashi {
 font-size: 4.8rem;
 font-weight: bold;
 text-align: center;
}
p.komidashi {
 margin-top: 4px;
 font-weight: bold;
 text-align: center;
}
img.kei {
 border: solid 1px #000;
}

/* ---------------- media screen ---------------- */
@media screen and (max-width: 480px) {
 p, li, ul, figcaption {
  font-size: 1.5rem;
  line-height: 1.8;
 }
 h2.midashi {
  font-size: 3.6rem;
 }
 p.komidashi {
  margin-top: 0;
 }
}
/* -------------- media screen end -------------- */



/* --------------------------- */
/*  Header */
/* --------------------------- */

header {
 z-index: 100;
 position: fixed;
 top: 0;
 width: 100%;
 background: #6ad;
 border-bottom: 1px solid #fff;
 transition: 0.3s;
}
header > div {
 display: flex;
 justify-content: space-between; /*横に均等配置*/
 align-items: center; /*縦に中央揃え*/
 position: relative;
 width: 90%;
 height: 64px;
 margin: 0 auto;
}
header > div img {
 width: 100%;
 max-width: 274px;
}
header.rollup {
 transform: translateY(-66px);
}
header.rolldown {
 transform: none;
}

/* ---------------- media screen ---------------- */
@media screen and (max-width: 480px) {
 header > div {
  width: 95%;
 }
 header > div img {
  max-width: 216px;
 }
}
/* -------------- media screen end -------------- */



/* --------------------------- */
/*  Top Head */
/* --------------------------- */

section#topHead {
 position: relative;
 width: 100%;
 margin: 64px auto 0;
 color: #fff;
}
section#topHead img {
 top: 0;
 aspect-ratio: 16 / 9;
 object-fit: cover;
 object-position: 100% 0;
 overflow: hidden;
}
section#topHead > div {
 position: absolute;
 top: 20%;
 left: 50%;
 margin: 0 auto;
}
section#topHead h2 {
 font-size: 3.2vw;
 line-height: 1.3;
}
section#topHead h3 {
 font-size: 2.4vw;
}
section#topHead p {
 margin-top: 5%;
}
section#topHead > div > p {
 font-size: 1.0rem;
}
section#topHead > div > div > p {
 font-size: 1.2vw;
}

/* ---------------- media screen ---------------- */
@media screen and (max-width: 480px) {
 section#topHead img {
  width: 100%;
  height: 360px;
  object-position: left top;
 }
 section#topHead > div {
  top: 10%;
  left: 45%;
  margin: 0 auto;
 }
 section#topHead h2 {
  font-size: 5.5vw;
  line-height: 1.4;
 }
 section#topHead h3 {
  font-size: 5vw;
 }
 section#topHead > div > p {
  font-size: 2.4vw;
 }
 section#topHead > div > div > p {
  margin-top: 65%;
  font-size: 2.4vw;
 }
}
/* -------------- media screen end -------------- */



/* --------------------------- */
/*  Top Intro Text */
/* --------------------------- */

section#topIntro {
 padding: 80px 0 160px;
}
section#topIntro h6 {
 margin-bottom: 8px;
 font-size: 1.8rem;
}
section#topIntro p {
 margin-bottom: 32px;
}
section#topIntro ul {
 margin-left: 16px;
 list-style: disc outside;
}

/* ---------------- media screen ---------------- */
@media screen and (max-width: 480px) {
 section#topIntro {
  padding: 20% 0 20%;
 }
 section#topIntro h6 {
  font-size: 1.5rem;
 }
 section#topIntro p {
  margin-bottom: 8%;
 }
 section#topIntro ul {
  margin-left: 5%;
 }
}
/* -------------- media screen end -------------- */



/* --------------------------- */
/*  Top Product */
/* --------------------------- */

section.topProduct  {
 padding: 0 0 160px;
}
section.topProduct h3 {
 padding: 8px 16px;
 margin-top: 32px;
 font-size: 3.0rem;
 color: #fff;
 background: #6ad;
 border-left: solid 8px #059;
}
section.topProduct h5 {
 margin-top: 24px;
 font-size: 2.0rem;
 color: #38c;
}
/*  Main */
div.topProductMain {
 display: flex;
 flex-wrap: wrap; /*複数行*/
 justify-content: space-between; /*均等に配置*/
 column-gap: calc(100% / 16);
 row-gap: 60px;
 margin: 56px auto 0;
}
div.topProductMain div {
 width: calc(calc(100% / 16) * 7.5);
}
div.topProductMain h4 {
 margin-top: 16px;
 font-size: 2.0rem;
 color: #38c;
}
div.topProductMain p {
 margin-top: 8px;
}
/*  Main sheetFilmGlass */
div.sheetFilmGlass h6 {
 margin-top: 16px;
 font-size: 1.8rem;
}
div.sheetFilmGlass p {
 margin-top: 6px !important;
}
div.sheetFilmGlass ul {
 margin-left: 16px;
 list-style: disc outside;
}
/*  Sub */
div.topProductSub {
 margin-top: 48px;
 padding: 5%;
 background: #e8f2fa;
 border: solid 1px #059;
 border-radius: 16px;
}
div.topProductSub > div {
 display: flex;
 flex-wrap: wrap; /*複数行*/
 column-gap: calc(100% / 18);
 row-gap: 48px;
}
div.topProductSub h6 {
 display: inline-block;
 margin-bottom: 32px;
 padding: 4px 40px;
 font-size: 2.0rem;
 color: #fff;
 background: #6ad;
 border-radius: 6px;
}
div.topProductSub p {
 margin-top: 4px;
 font-size: 1.5rem;
}
/*  Flex 4分割 */
div.flexQuadra div {
 width: calc(calc(100% / 18) * 3.75);
}
div.flexQuadra div.double {
 width: calc(calc(100% / 18) * 8.5) !important;
}
/*  Flex 3分割 */
div.flexTrinity div {
 width: calc(calc(100% / 18) * 5.3333);
}

/* ---------------- media screen ---------------- */
@media screen and (max-width: 480px) {
 section.topProduct {
  padding: 0 0 20%;
 }
 section.topProduct h3 {
  padding: 8px 8px;
  font-size: 2.2rem;
 }
 section.topProduct h5 {
  margin-top: 5%;
  font-size: 1.6rem;
  line-height: 1.4;
 }
 /*  Main */
 div.topProductMain {
  display: block;
  margin: 10% auto 0;
 }
 div.topProductMain div {
  width: 100%;
  margin-bottom: 10%;
 }
 div.topProductMain h4 {
  margin-top: 2%;
  font-size: 1.6rem;
 }
 div.topProductMain p {
  margin-top: 1.5%;
  line-height: 1.4;
 }
 /*  Main sheetFilmGlass */
 div.sheetFilmGlass h6 {
  margin-top: 6%;
  font-size: 1.6rem;
 }
 div.sheetFilmGlass p {
  margin-top: 2% !important;
 }
 div.sheetFilmGlass ul {
  margin-left:5%;
 }
 
 /*  Sub */
 div.topProductSub {
  margin-top: 10%;
  padding: 5%;
 }
 div.topProductSub > div {
  column-gap: 5%;
  row-gap: 16px;
 }
 div.topProductSub h6 {
  width: 100%;
  margin-bottom: 5%;
  padding: 4px 8px;
  font-size: 1.8rem;
  border-radius: 4px;
 }
 div.topProductSub p {
  margin-top: 3%;
  font-size: 1.4rem;
  line-height: 1.4;
 }
 /*  Flex 4分割 */
 div.flexQuadra div {
  width: 47.5%;
 }
 div.flexQuadra div.double {
  width: 100% !important;
 }
 /*  Flex 3分割 */
 div.flexTrinity div {
  width: 47.5%;
 }
}
/* -------------- media screen end -------------- */



/* --------------------------- */
/*  Top Company */
/* --------------------------- */

section#topCompany {
 padding: 0 0 160px;
}
section#topCompany > div {
 display: flex;
 justify-content: space-between; /*横に均等配置*/
 gap: 8px;
 margin-bottom: 8px;
}
section#topCompany > div:first-of-type {
 margin-top: 40px;
}
section#topCompany > div p {
 padding: 16px;
 line-height: 1.4;
}
section#topCompany > div p:nth-of-type(1) {
 width: 100%;
 max-width: 200px;
 font-weight: bold;
 color: #fff;
 background: #6ad;
}
section#topCompany > div p:nth-of-type(2) {
 width: 100%;
 max-width: 752px;
 background: #def;
}
section#topCompany a {
 text-decoration: underline;
}
/*  Google Maps */
div#companyMap iframe {
 width: 100%;
 height: 360px;
}

/* ---------------- media screen ---------------- */
@media screen and (max-width: 480px) {
 section#topCompany {
  padding: 0% 0 20%;
 }
 section#topCompany > div {
 gap: 4px;
 margin-bottom: 4px;
 }
 section#topCompany > div p {
  padding: 8px;
 }
 section#topCompany > div p:nth-of-type(1) {
  max-width: 96px;
 }
 /*  Google Maps */
 div#companyMap iframe {
  height: 240px;
 }
}
/* -------------- media screen end -------------- */



/* --------------------------- */
/*  Footer  */
/* --------------------------- */

footer {
 width: 100%;
 padding: 8px 0 40px;
 color: #fff;
 background: #6ad;
}
footer a {
 text-decoration: underline;
}
footer div {
 display: flex;
 justify-content: space-between; /*均等に配置*/
 width: 96%;
 margin: 0 auto;
}
footer div p {
 font-size: 1.1rem !important;
 line-height: 1.4 !important;
}

/* ---------------- media screen ---------------- */
@media screen and (max-width: 480px) {
 footer {
  padding: 3% 0 10%;
  font-size: 1.2rem;
  text-align: center;
 }
 footer div {
  display: block;
 }
 footer div p.footerRight {
  margin-top: 1%;
 }
}
/* -------------- media screen end -------------- */





/* ------------------------------------------------------------------------------------ */
/*  PAGES */
/* ------------------------------------------------------------------------------------ */

/* --------------------------- */
/*  Pages Common */
/* --------------------------- */

article.pages {
 margin: 64px auto 0;
 padding: 64px 0;
}
/* ---------------- media screen ---------------- */
@media screen and (max-width: 480px) {
 article.pages {
  padding: 15% 0;
 }
}
/* -------------- media screen end -------------- */



/* --------------------------- */
/*  Policy */
/* --------------------------- */

article#policy h6 {
 font-size: 1.6rem;
 line-height: 1.8;
}
article#policy p,
article#policy ul {
 margin-bottom: 32px;
}
article#policy a {
 text-decoration: underline;
}
/* ---------------- media screen ---------------- */
@media screen and (max-width: 480px) {
 article#policy h6 {
  font-size: 1.5rem;
 }
 article#policy p,
 article#policy ul {
  margin-bottom: 10%;
 }
}
/* -------------- media screen end -------------- */



/* --------------------------- */
/*  Error */
/* --------------------------- */

article#error {
 background: #000;
 height: calc(100vh - 128px)!important;
}
article#error section {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 text-align: center;
 color: #eee;
}
article#error h2 {
 font-size: 12vw;
 font-weight: normal;
}
article#error p {
 display: inline-block;
 margin-top: 24px;
 padding: 4px 32px;
 border: 1px solid #fff;
 border-radius: 4px;
}
article#error p:hover {
 color: #000;
 background: #fff;
 transition: 0.5s;
}
/* ---------------- media screen ---------------- */
@media screen and (max-width: 480px) {
 article#error h2 {
  font-size: 16vw;
 }
}
/* -------------- media screen end -------------- */