@charset "utf-8";

/* =====================================================
   Sweet Jazz Life Kazumi 公式サイト(1ページ構成)
   ・画面幅の区分:スマホ(?599px) / タブレット(600px?) / PC(960px?)
   ===================================================== */


/* ---------- 基本 ---------- */
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:#fff;}
body .site{margin:0 auto;padding:0;max-width:100%;overflow:hidden;}
a{word-wrap:break-word;}
.ct{text-align:center;}
.rt{text-align:right;}


/* ---------- ヘッダー(ロゴ) ---------- */
.site-header{width:100%;margin:0;padding:0;background:url(/images/bg_header_s.gif) repeat-x 0 0;}
.site-header h1{display:none;}
.site-header #header-inner h2{display:block;width:270px;height:65px;margin:0;padding:12px 0 0 0;text-align:left;}
.site-header #header-inner h2 a{display:block;width:270px;height:65px;padding:0;background:url(/images/header_logo.jpg) no-repeat 0 0;text-indent:-9999px;}


/* ---------- メイン画像(KV)とYouTube ---------- */
.wrapper{clear:both;margin:15px 15px 0;}
#main-inner{margin:0 auto;}

/* スマホ用KV(PC・タブレットでは非表示) */
.kv{display:none;}

/* YouTubeを入れる枠 */
.bx-wrapper{width:300px;height:240px;margin:20px auto 30px;padding:0;}


/* ---------- プロフィール ---------- */
#profile-wrap{clear:both;box-sizing:border-box;max-width:960px;margin:0 auto;padding:30px 20px 50px;background:#fff;}

/* 見出し(スマホ用。601px以上は下の専用画像に切り替え) */
#profile .entry-title,
#profile h3{margin:5px 0 25px;padding:5px 10px;background:url(/images/h3_bg_s.jpg) 0 0 no-repeat;border-bottom:1px solid #e9e9e9;color:#826c38;font-size:110%;font-weight:bold;line-height:120%;}
#profile h3{margin-top:40px;}

#profile h4{margin:25px 0 15px;padding:0 20px 5px 50px;background:url(/images/h6_bg.gif) 0 0 no-repeat;border-bottom:1px dotted #a3a3a3;color:#13469c;font-size:110%;font-weight:bold;line-height:1.35;}
#profile p{margin:10px 0;color:#666;font-size:100%;line-height:1.8;}
#profile hr{margin:20px 0;border:0;border-top:1px solid #e9e9e9;}
#profile img{max-width:100%;height:auto;}
#profile img.profile-photo{float:right;margin:5px 0 10px 20px;}
#profile .entry-content:after{content:"";display:block;clear:both;}

/* SNSリンク(Font Awesome のアイコン) */
#profile .sns-links{display:flex;flex-wrap:wrap;gap:10px 12px;margin:25px 0 10px;padding:0;list-style:none;clear:both;}
#profile .sns-links a{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:1px solid #d5dbc8;border-radius:999px;background:#fff;color:#13469c;font-size:95%;font-weight:bold;line-height:1.2;text-decoration:none;}
#profile .sns-links a:hover{background:#f5f9ec;}
#profile .sns-links i{font-size:1.3em;}
#profile .sns-links .fa-instagram{color:#c13584;}
#profile .sns-links .fa-facebook{color:#1877f2;}
#profile .sns-links .fa-blog{color:#4c9a2a;}


/* ---------- フッター ---------- */
#colophon{clear:both;width:100%;max-width:100%;height:24px;margin:0;padding:0;border-top:none;font-size:12px;line-height:2;background:url(/images/bg_footer.gif) #13469c repeat-x 0 top;}
#footer-inner{margin:0 auto;padding:2px 10px 0 10px;}
#footer-inner .site-info{color:#ffffff;font-size:11px;font-weight:normal;}


/* =====================================================
   スマホ(?599px)
   ===================================================== */
@media screen and (max-width:599px){
/* KVを表示(YouTubeはKVの下に通常配置)。縦横比を変えるときは aspect-ratio を調整 */
.kv{display:block;margin:0 -15px;aspect-ratio:5/6;max-height:628px;background:url(/images/g_main_s.jpg) no-repeat right top;background-size:cover;}
}

/* スマホ(?600px):プロフィールの調整 */
@media screen and (max-width:600px){
#profile img.profile-photo{float:none;display:block;margin:0 auto 15px;}
#profile h4{padding-left:20px;background-image:none;}
}


/* =====================================================
   タブレット以上(600px?)
   KVは背景画像、YouTubeはその上に重ねて配置
   ===================================================== */
@media screen and (min-width:600px){
.home .wrapper{margin:0;}
.home #main-inner{height:628px;margin:0;padding:0;background:url(/images/g_main_s.jpg) no-repeat right 0;}
/* YouTubeの位置:top=下へ / left=右へ */
.home #main-inner .bx-wrapper{position:relative;top:235px;left:-140px;}
}

/* 見出し(601px以上):全幅の専用画像 */
@media screen and (min-width:601px){
#profile .entry-title,
#profile h3{box-sizing:border-box;width:auto;height:70px;min-height:0;margin:5px 0 25px;padding:30px 80px 0 20px;line-height:36px;background:url(/images/h3_bg_wide.jpg) right 0 no-repeat;border:0;font-size:130%;}
#profile h3{margin-top:40px;}
}

@media screen and (min-width:700px){
.home #main-inner .bx-wrapper{left:25px;margin:0 0 50px;}
}


/* =====================================================
   PC(960px?)
   ===================================================== */
/* =====================================================
   写真グリッド（かづみ）
   ===================================================== */
.kazumi-wrap {
  text-align: center;
  margin-top:50px;
}
.kazumi-portrait {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-bottom: 5px;
}
.kazumi-landscape {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.kazumi-portrait .ph,
.kazumi-landscape .ph {
  overflow: hidden;
}
.kazumi-portrait .ph {
  aspect-ratio: 200 / 284;
}
.kazumi-landscape .ph {
  aspect-ratio: 200 / 125;
}
.kazumi-portrait .ph img,
.kazumi-landscape .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (max-width: 600px) {
  .kazumi-portrait,
  .kazumi-landscape {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .kazumi-portrait .ph {
    width: calc(25% - 4px);
  }
  .kazumi-landscape .ph {
    width: calc(33.333% - 4px);
  }
}
/* =====================================================
   PC(960px?)
   ===================================================== */
@media screen and (min-width:960px){
/* ヘッダー */
.site-header{height:99px;background:url(/images/bg_header.gif) top center no-repeat;}
.home .site-header{background:url(/images/bg_header_top.gif) top center no-repeat;}
#header-inner{width:960px;margin:0 auto;}

/* メイン画像とYouTube */
.home #main{width:100%;margin:0;padding:0;background:url(/images/bg_main_top.jpg) no-repeat center -3px;}
.home #main-inner{width:960px;margin:0 auto;background:url(/images/g_main.jpg) no-repeat 0 0;}
.home #main-inner .bx-wrapper{top:270px;left:10px;margin:0 0 100px;}

/* フッター */
#footer-inner{width:960px;padding:2px 0 0 0;text-align:right;}
#footer-inner .site-info{float:right;}
}