@charset "UTF-8";

/* ======================================

	Base css
	Data.2013.09.28

====================================== */



.block {
    display: block;          /* inline-block から変更 */
    margin: 15% auto;        /* 上下は15%、左右はautoにして綺麗に中央寄せ */
    max-width: 1200px;       /* 画面が大きすぎる時に広がりすぎないように最大幅を指定（お好みで調整） */
}

.image_m{
    display:inline-block;
	width:100%;
    max-width:1000px;
}
.container1{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.parts1{
    padding: 2%; 
    grid-column: 1/2;
    grid-row: 1/2;
}
.parts2{
    padding: 2%; 
    grid-column: 2/3;
    grid-row: 1/2;
}
.parts3{
    padding: 2%; 
    grid-column: 3/4;
    grid-row: 1/2;
}
.container2{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.parts4{
    padding: 2%; 
    grid-column: 1/2;
    grid-row: 1/2;
}
.parts5{
    padding: 2%; 
    grid-column:2/3;
    grid-row: 1/2;
}
.container3{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.parts6{
    padding: 2%; 
    grid-column: 1/3;
    grid-row: 1/3;
}
.parts7{
    padding: 2%; 
    grid-column:4/7;
    grid-row: 1/4;
}
.parts8{
    padding: 2%;
    grid-column: 1/4;
    grid-row: 3/6;
}
.parts9{
    padding: 2%; 
    grid-column:5/7;
    grid-row: 4/6;
}

.container4{
    width: 100%;
    display: grid;
     grid-template-columns: 1fr 1fr;
}
.parts10{
    text-align: center;
    padding: 2%; 
    grid-column:1/3;
    grid-row: 1/3;
}
/* ======================================
   オープニング（ローディング）演出
====================================== */
/* ======================================
   オープニング（ローディング）演出
====================================== */
#loading {
  /* 100vw, 100vhの代わりに上下左右を0にして画面全体に強制的に広げます（隙間対策） */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  
  /* 何があっても背景を確実に真っ黒（ベタ塗り）にする */
  background-color: #000000 !important; 
  
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1.5s ease, visibility 1.5s ease;
}

/* 1. 写真をふわっと表示させる */
.loading-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('img/img_00.jpg') no-repeat center center;
  
  /* 
    【写真の表示方法の選択】
    cover: 画面全体に隙間なく写真を広げる（はみ出た部分はトリミングされます）
    contain: 写真全体をトリミングせずに見せる（上下または左右に黒い余白ができます）
    お好みに合わせてどちらかを選んでください。
  */
  background-size: cover; 
  
  opacity: 0;
  animation: fadeInBg 2s forwards;
}

/* 写真の上に薄く黒いフィルターをかけて文字を読みやすくする */
.loading-bg::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.3);
}

@keyframes fadeInBg {
  to { opacity: 1; }
}

/* （以下、.typewriter や .loaded などの記述は変更なしでそのまま残してください） */
/* 2. タイプライター風の太文字 */
.typewriter {
  position: relative;
  z-index: 10;
  color: #fff;
  font-size: 4rem;       /* 文字の大きさ */
  font-weight: bold;     /* 太めの文字 */
  letter-spacing: 0.1em;
  
  /* タイプライター用の設定 */
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid #fff; /* 点滅するカーソル */
  width: 0;
  
  /* アニメーション：
     写真の表示(2秒)を待ってから、1.5秒かけて文字を打つ */
  animation: typing 1.5s steps(9) 2s forwards, blink 0.6s step-end infinite;
}

/* 文字を1文字ずつ表示（portfolioは9文字） */
@keyframes typing {
  from { width: 0; }
  /* ※フォントによって幅が違うため、途切れる場合は 9.5ch を 10ch や 11ch に増やしてください */
  to { width: 9.5ch; } 
}

/* カーソルの点滅 */
@keyframes blink {
  from, to { border-color: transparent; }
  50% { border-color: #fff; }
}

/* 3. すべて終わった後にフェードアウトさせるクラス */
.loaded {
  opacity: 0 !important;
  visibility: hidden;
}

/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
    
    .block {

    margin: 20% 0% 20% 0%;
	
     }
    .container1{
    padding: 10% 1% 10% 1%;
    
    }
    
    .container2{
    padding: 2%;
   
    }
    
    .container3{
    padding: 2%;
    }
    
    .container4{
    padding: 15% 0% 15% 0%;
    
    }