@charset "utf-8";

/*===========　レスポンシブ用基礎CSS　===========*/
body {
	font-size: 1em;
	font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color: #faf0e6;
	width: 100%;
	margin: 0;
}

.center {
  background-color: #fff;
  width: 1000px;
  margin: 0 auto;
  min-height: 100vh;
  display: flow-root;
  /* padding-bottomは、ボタン自体の下側にだけ少しあればOK */
  padding-bottom: 40px; 
}

header ul {
	display: flex;
	justify-content: space-between;
	background-color: #333;
	color: #fff;
	padding: 10px 20px;
}

header ul li {
	font-size: 2em;
	font-weight: bold;
}

h1 {
	text-align: center;
	font-size: 3em;
	margin-top: 150px;
	font-weight: bold;
}

.start h2 {
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 100px;
  margin-top: 100px;
}

.start p{
  text-align: center;
  font-size: 1.5em;
}

/* 修正例：セクション内の文章を中央に寄せて左詰めにする */
section p {
  width: 600px;        /* ★1. 文章の「幅」を決めます（centerの1000pxより小さく） */
  margin-left: auto;   /* ★2. 左の余白を自動にする */
  margin-right: auto;  /* ★3. 右の余白を自動にする（これで箱が真ん中に来ます） */
  margin-top: 50px;
  font-size: 1.5em;
  text-align: left;    /* ★4. 中身の文字は左詰めにする */
  line-height: 1.8;    /* 読みやすくするために少し行間を広げるのがおすすめ */
}

section {
  text-align: center;
}

span {
  font-weight: bold;
}

/* プロフィールのリスト（dl）も同様に設定 */
section dl {
  width: 400px;        /* リストは少し狭めの方が綺麗です */
  margin: 20px auto;   /* 上下20px、左右中央 */
  text-align: center;
}

dt {
  font-size: 1.5em;
  font-weight: bold;
}

dd {
  font-size: 1.5em;
  padding: 20px;
}

h2 {
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  margin: 100px 0 50px 0;
}
/* --- 共通設定（土台） --- */
.img-clip {
  overflow: hidden;
  margin: 0 auto;
}
.img-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.cat1 {
  width: 600px;
  /* 縦幅を少し縮める（例：6/7 → 6/5） */
  aspect-ratio: 6 / 5; 
  overflow: hidden;
  margin: 0 auto;
}

.cat1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position は顔が見える位置に微調整してください */
  object-position: center 20%; 
}

.cat2 {
  width: 600px;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  margin: 0 auto;
}

.cat3 {
  width: 600px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0 auto;
}

.cat3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position は顔が見える位置に微調整してください */
  object-position: center 40%; 
}

.cat4 img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
  /* object-position は顔が見える位置に微調整してください */
  object-position: center 30%; 
}

.cat6 img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: contain;
}

.cat7 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position は顔が見える位置に微調整してください */
  object-position: center 85%; 
}

.cat9 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cat10 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-container1 {
  width: 600px;
  height: 500px;
  margin: 30px auto;
  border-radius: 15px;
  overflow: hidden;
  background-color: #000;
  line-height: 0;
}

.video-container1 video {
  width: 600px;
  height: 500px;      /* ★重要：高さを固定しないと位置を動かせません */
  object-fit: cover;  /* ★重要：枠いっぱいに広げてはみ出させる */
  object-position: center 60%; 
}

.video-container2 {
  width: 600px;
  height: 500px;
  margin: 30px auto;
  border-radius: 15px;
  overflow: hidden;
  background-color: #000;
  line-height: 0;
}

.video-container2 video {
  width: 600px;
  height: 500px;      /* ★重要：高さを固定しないと位置を動かせません */
  object-fit: cover;  /* ★重要：枠いっぱいに広げてはみ出させる */
  object-position: center 40%; 
}


.cat-last {
  width: 600px;
  /* 縦幅を少し縮める（例：6/7 → 6/5） */
  aspect-ratio: 6 / 6.5; 
  overflow: hidden;
  margin: 0 auto;
}

.cat-last img {
  width: 100%;
  height: 95%;
  object-fit: cover;
  /* object-position は顔が見える位置に微調整してください */
  object-position: center 30%;
}

/* 外枠：はみ出た分を隠す *//* スライドの外枠 */
.slider-container {
  width: 600px; /* centerと同じ幅 */
  height: 500px;
  position: relative; /* ボタンを配置する基準 */
  overflow: hidden;   /* はみ出た画像を隠す */
  margin: 0 auto;
}

/* スライドの中身（横に並べる） */
.slider-inner {
  display: flex;
  transition: transform 0.5s ease-in-out; /* スーッと動くスピード */
}

/* スライド用の画像サイズ（例：1枚ずつ全画面で見せる場合） */
.slider-inner .img-clip {
  flex-shrink: 0; /* 幅が縮まないように固定 */
  width: 600px;  /* ここを外枠と同じにすると1枚ずつ切り替わります */
  height: 500px;
  object-fit: cover;
}

.end {
  text-align: center;
}

.end p {
  width: 600px;        /* ★1. 文章の「幅」を決めます（centerの1000pxより小さく） */
  margin-left: auto;   /* ★2. 左の余白を自動にする */
  margin-right: auto;  /* ★3. 右の余白を自動にする（これで箱が真ん中に来ます） */
  margin-top: 50px;
  margin-bottom: 50px;
  font-size: 1.5em;
  text-align: center;    /* ★4. 中身の文字は左詰めにする */
  line-height: 1.8; 
}

/* 左右ボタンの見た目（お好みで調整してください） */
.prev-btn, .next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 15px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}
.prev-btn { left: 10px; }
.next-btn { right: 10px; }


/* ボタンを囲む箱 */
.bottom-back {
  /* position: absolute; は削除 */
  display: flex;
  justify-content: center; /* 左右中央 */
  margin-top: 50px;           /* ★ここも0にするとさらに詰まります */
}

/* ボタン自体のデザイン */
.bottom-back a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
  width: 100px;
  height: 100px;
  border-radius: 50%;
  
  text-decoration: none;
  background-color: #333;
  color: #fff;
  font-weight: bold;
  font-size: 1em;
  line-height: 1.2;
}

/*ボックスモデルをborder-boxに変更*/
* {
	box-sizing: border-box;
}

/*フルードイメージ*/
img {
	max-width: 100%;
}

/*回転時の文字調整封印*/
html{
  -webkit-text-size-adjust: 100%;
}

/*===========　スマホ用　通常時　===========*/
body {
	font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/*===========　スマホ用（画面幅が1000px以下の場合）　===========*/
@media screen and (max-width: 1000px) {

  /* 全体のコンテナを画面幅いっぱいにする */
  .center {
    width: 100%;
    padding: 0 10px; /* 左右に少しだけ余白を作る */
  }

  /* 見出しのサイズを小さく調整 */
  h1 {
    font-size: 2em;
    margin-top: 50px;
  }

  h2, .start h2 {
    font-size: 1.5em;
    margin: 50px 0 30px;
  }

  /* 文章の幅を画面いっぱいに広げる */
  section p, .start p, .end p {
    width: 90%;
    font-size: 1.1em;
  }

  /* プロフィールリストの幅調整 */
  section dl {
    width: 100%;
  }

  /* 画像のサイズを画面幅に合わせる */
  .cat1, .cat2, .cat3, .cat-last {
    width: 100%;
    height: auto;
  }

  /* --- スライドショーのスマホ調整 --- */
  .slider-container {
    width: 100%; /* 画面幅いっぱい */
    height: auto;
  }

  .slider-inner .img-clip {
    width: 100vw; /* 画面の横幅ぴったりにする */
    height: 100vw; /* 正方形っぽく見せる（お好みで調整） */
  }

  /* --- 動画のスマホ調整 --- */
  .video-container {
    width: 100%;
    height: auto;
  }

  .video-container video {
    width: 100%;
    height: auto; /* スマホでは高さを自動にすると見やすいです */
    object-position: center; /* 位置を中央に戻す */
  }

  /* 動画を入れる箱の調整 */
  .video-container1, .video-container2 {
    width: 90%;       /* 画面幅の90%にする（左右に少し隙間ができる） */
    height: auto;     /* ★重要：高さを固定せず、動画に合わせる */
    margin: 20px auto;
  }

  /* 中の動画自体の調整 */
  .video-container1 video, .video-container2 video {
    width: 100%;      /* 箱の幅(90%)いっぱいに広げる */
    height: auto;     /* ★重要：500pxなどの固定を解除して、比率を守る */
    object-fit: contain; /* スマホでは削らずに全体を見せるのがおすすめ */
  }

  /* ヘッダーの文字を少し小さく */
  header ul li {
    font-size: 1.5em;
  }
}