@charset "UTF-8";
html {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 62.5%;
}
body {
    color: #000;
    font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    background:#fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin:0;
	padding:0;
}
img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:block;
    color: #666;
    text-decoration-line: none;
}
a:hover { 
    color: #999;
}

.container {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 2.0rem;
    position: relative;
}
.row {
    display: flex;
    flex-direction: row;
    padding: 0;
    width: 100%;
}
.col {
    display: block;
    flex: 1 1 auto;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
}
.row .col.span-12 {
    flex: 0 0 100%;
    max-width: 100%;
}
.header {
	display: flex;
    flex-direction: row;
    padding: 2rem 0 0 0;
}
.header-box {
	margin-left: auto;
	margin-top: 8px;
}

nav ul {
	flex-direction: column;
}
nav ul {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	margin: 1rem 0 0 0;
}
nav li {
	flex: 1 0 auto;
}
nav li a {
    text-decoration: none;
    text-align: center;
    width: 100%;
}
nav a:hover {
    background-color: #f7f7f7;    
}
nav a {
    padding: 0.5rem;
}
/*HP中間タイトル文字装飾-------------------------------------*/
h2 {
    position: relative;
    padding: 1rem .5rem;
    max-width: 400px;
    margin: auto;
  }
  
  h2:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    content: '';
    border-radius: 3px;
    background-image: -webkit-gradient(linear, right top, left top, from(#2af598), to(#009efd));
    background-image: -webkit-linear-gradient(right, #2af598 0%, #009efd 100%);
    background-image: linear-gradient(to left, #2af598 0%, #009efd 100%);
  }

/*Top ロゴの装飾-------------------------------------*/
.sample1{
    display     : inline-block;
    font-size   : 250%;
    font-weight : bold;
    color       : #ffffff;
    text-shadow:  2px  2px 10px #777 ,
                 -2px  2px 10px #777 ,
                  2px -2px 10px #777 ,
                 -2px -2px 10px #777;
}


/*背景色*/

#home {
    background-image: url(../images/insatsu3.png);
    min-height: 100vh;
    background-size: cover;
    background-repeat: no-repeat; 
    background-position:center ;
}
.home-content {
    width:70%;
    text-align:left;
    margin-top:20%;
}



  
/*メイン画像-------------------------------------*/
.mainimg img {
    width: 100vw;
}
/*川口印刷とはから始まる-------------------------------------*/
.catch {
    text-align: center;
}
.catch2 {
    text-align: left;
    width: 95%;
    margin-left: 2.25rem;
    margin-top: 2.25rem;
}
.catch3 {
    display: inline-block;
    width: 300px;
    height: 200px;
    background-color: blue;
    color: #ffffff;
}
.catch4 {
    display: inline-block;
    width: auto;
    height: 100px;
    background-color: none;
    color:#000
    margin: auto;
    text-align: left;
}


/* 見出し
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 300;
    letter-spacing: 0.1em;}
  h1 { font-size: 3.2rem; line-height: 1.2;  letter-spacing: -.1rem;}
  h2 { font-size: 3.0rem; line-height: 1.25; letter-spacing: -.1rem; }
  h3 { font-size: 2.8rem; line-height: 1.3;  letter-spacing: -.1rem; }
  h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
  h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
  h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }


  section {
	margin: 1rem 0;
	padding: 1rem 0;
  }
  /*製品・サービスの説明-------------------------------------*/
  .gray-back {
	background-color: #f4f4f4;
  }
  .grid {
    display: grid;
    gap:5px;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    margin-top: 0.5%;
    margin-bottom: 5px;
  }
  .big-box img{
    height: auto;
    width:auto;
    object-fit: cover;
  }
  .gitem p{
    padding: 0.5em 0.5em;/*文字の上下 左右の余白*/
    color:#494949;/*文字色*/
    background: #f4f4f4;/*背景色*/
    border-left: solid 5px #7db4e6;/*左線*/
    border-bottom: solid 3px #d7d7d7;/*下線*/
    font-size: larger;
    font-weight:bold;
  }

/*保管・お預かりサービス-------------------------------------*/
.flex{
    max-width: 1100px;
    margin: 0 auto;
    justify-content: space-between;
}
.pic{
    max-width: 330px;
    display: block;
    margin: 0 auto;
  }
  @media screen and (min-width:600px) {
    .flex{
      display:flex;
      flex-wrap:nowrap;
      justify-content: space-between;
    }
.item+.item{
    margin-left:1.0em;
}

.img-container{
    display:flex;/* flexbox */
  }

  /*問い合わせ-------------------------------------*/
.row .col.span-6 {
    flex: 0 0 48%;
    max-width: 48%;
}
.contact-box {
	border: 1px solid #ccc;
	text-align: center;
	padding: 2rem 0;
}

 /*フッター-------------------------------------*/
 footer {
     background:#432;
     text-align:center;
     padding: 26px 0;
 }
 footer p {
     color: #fff;
     font-size: 1.875rem;
 }

/*製品.サービス紹介の枠線-------------------------------------*/
.box2 {
  padding: 0.5em 1em;
  margin: 2em 0;
  font-weight: bold;
  position:relative;
  display: block;
  color: #6091d3;/*文字色*/
  background: #FFF;
  border: solid 3px #6091d3;/*線*/
  border-radius: 10px;/*角の丸み*/
  
}
.box2 p {
  margin: 0; 
  padding: 0;
}
 

 /*2ページ.地図表示-------------------------------------*/
#location {
    padding: 4% 0;
}
#location .wrapper{
    display:flex;
    justify-content: center;
}
.location-info{
    width:22%;
}
.location-info p {
    padding:12px 10px;
}
.location-map {
    width: 74%;
}
iframe{
    width:100%;
}
.sub-title {
    border-bottom:2px #0bd solid;
    font-weight:normal;
}

 /*浮かび上がるページ上部のp-------------------------------------*/
.text-focus-in {
    -webkit-animation: text-focus-in 2.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: text-focus-in 2.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    }
    /* ----------------------------------------------
     * Generated by Animista on 2018-11-27 15:52:19
     * w: http://animista.net, t: @cssanimista
     * ---------------------------------------------- */
    
    /**
     * ----------------------------------------
     * animation text-focus-in
     * ----------------------------------------
     */
    @-webkit-keyframes text-focus-in {
      0% {
        -webkit-filter: blur(12px);
                filter: blur(12px);
        opacity: 0;
      }
      100% {
        -webkit-filter: blur(0px);
                filter: blur(0px);
        opacity: 1;
      }
    }
    @keyframes text-focus-in {
      0% {
        -webkit-filter: blur(12px);
                filter: blur(12px);
        opacity: 0;
      }
      100% {
        -webkit-filter: blur(0px);
                filter: blur(0px);
        opacity: 1;
      }
    }


 /*画像の変化・左右から写真が表示される-------------------------------------*/
    .img-wrap {
      overflow: hidden;
      position: relative;
    }
    
    .img-wrap:before,
    .img-wrap:after {
      animation: 2s cubic-bezier(.4, 0, .2, 1) forwards;
      background: #fff;
      content: '';
      left: 0;
      pointer-events: none;
      position: absolute;
      right: 0;
      z-index: 1;
    }
    
    .img-wrap:before {
      animation-name: img-wrap-before;
      top: 0;
      bottom: 50%;
    }
    
    .img-wrap:after {
      animation-name: img-wrap-after;
      top: 50%;
      bottom: 0;
    }
    
    @keyframes img-wrap-before {
      100% {
        transform: translateX(100%);
      }
    }
    
    @keyframes img-wrap-after {
      100% {
        transform: translateX(-100%);
      }
    }



/* ルーフ写真の設定 ++++++++++ */    
/* 1.親スタイルリセットとペース設定 ++++++++++ */
.slider-box p, .slider-box div, .loop-box ul, .loop-box li {
  box-sizing: border-box; margin: 0 !important; padding: 0 !important;
}

/* 2.ベースBOXの設定 +++++++++++++++++++++ */
.slider-box {
  box-sizing: border-box;
  overflow: hidden;
  width: 98%; /* 画面又は親要素に対するサイズ - 変更可 */
  background: #333; /* 背景色 - 変更可・削除可 */
  border: solid 5px #ccc; /* 囲み線 - 変更可・削除可 */
  margin: 0 auto; /* Box外の余白 - 変更可 */
  padding: 10px 0 0; /* 上端からスライダーまでの距離 - 変更可・削除可 */
}

/* 3.チェックボックスを利用した停止・再生などの設定 +++++++++++++++++ */
.slider-check {
  display: none;
}
.slider-check:checked ~ .loop-box > .loop {
  animation-play-state: paused;
}
.slider-label {
  display: block;
  cursor: pointer;
  color: #fff; /* 文字色 - 変更可 */
  font-size: 24px; /* 文字サイズ - 変更可 */
  line-height: 2; /* ボタン部分の高さ - 変更可 */
  text-align: center;  
}
.slider-label::before {
  content: "\025a0  STOP"; /* 停止テキスト - 変更可 */
  } 
.slider-check:checked ~ div > .slider-label::before {
  content: "\025b6  MOVE"; /* 再生テキスト - 変更可 */
}

/* 4.スライダー本体とアニメーションの基本設定 ++++++++++++++ */
.loop-box{
  position: relative;
  width: 100%;
  overflow: hidden; 
}
.loop-box, .loop-box ul {
  height: 300px; /* スライダーの高さ - 変更注意 */
}
.loop-box ul {
  position: absolute; left: 0; top: 0;
  display: flex; 
  justify-content: space-between;
  background: #000; /* スライダーの背景色 - 変更可 */
  list-style: none;
  max-width: 10000%; 
  min-width: 100%;
  width: calc(450px * 1.5 * 3); /* 画像の横幅×枚数 - 変更注意・変更可・変更注意 */
  animation: 45s linear infinite; /* アニメーション設定 - 変更可 */
}
.loop-box li {
  display: flex;
  align-items: center; 
  justify-content: center;
  color: #fff;
  width: calc(100% / 3); /* li の幅を均等にする - 削除可・変更注意 */
}
.loop-box img {
  height: auto;
  width: 100%;
}

/* 5.アニメーション個別設定 ++++++++++ */
.loop-box ul.loop1 {
  animation-name: loop1;
}
.loop-box ul.loop2 {
  animation-name: loop2;
}
@keyframes loop1 {
  0% {transform: translateX(0); }
  49.99999% {transform: translateX(-100%); }
  50% {transform: translateX(100%); }
}
@keyframes loop2 {
  0% {transform: translateX(100%); }
  100%{transform: translateX(-100%); }
}


/* Topページの詳細はこちら文字 ++++++++++ */
.hh22 {
  position: relative;
  padding: 1rem 2rem;
  text-align: center;
  border: 3px solid #75A9FF;
  border-radius: 0 10px 10px 10px;
}

.hh22:before {
  font-size: 15px;
  font-size: 1.5rem;
  position: absolute;
  top: -24px;
  left: -3px;
  height: 24px;
  padding: 0 1em;
  content: 'Check';
  color: #fff;
  border-radius: 10px 10px 0 0;
  background: #0000FF;
}