@charset "utf-8";
/* CSS Document */

.body {
	width: 100%;
	overflow:hidden;
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
               "メイリオ", Meiryo,
               "Noto Sans JP",
               sans-serif;
}


/*マウスオーバーで白くする*/
.hover-opacity {
  transition-property: opacity;
  transition-duration: 0.5s;
  position: relative;
  overflow: hidden;      /* ← 角丸からリボンがはみ出さない */
  border-radius: 10px;   /* ← 角丸をここに付けるのが一番綺麗 */
}



.hover-opacity:hover {
  opacity: 0.7; 
}

.img-wrap img {
  width: 100%;
  display: block;
}

.ribbon-new {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(255,255,255,0.6); /* ← 透け白 */
  color: #cb3629;
  padding: 3px 10px;                 /* ← 細く控えめ */
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;                /* ← 角丸で柔らかく */
  z-index: 10;
  pointer-events: none;
}


.side img{
	width: 100%;
    border-radius: 10px; /* 角を丸くする */
}


/*スタイリングのタイトル*/

.box{
	margin: auto;
	color: #5f5f5f;
	font-weight: 600;
	font-size: 30px;
	text-align: center;
	margin-bottom: 5%;
}

/*商品並べる用*/

.item-box {
  width: 48% !important;
  display: inline-block !important;
  vertical-align: top;
  text-align: left !important;
}


.item-box:first-child {
  text-align: left !important;
  width: 48% !important;
}

.col_4to2{
  padding-top: 1%;
  margin: 0 auto;
  width: 85%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}


.col_4to2 p{
	text-align: center;
	margin: 0 auto;
}

.col_4to2 img{
	width: 100%;
    border-radius: 10px; /* 角を丸くする */
}

.col_4to2 p:hover { 
	opacity: 0.6; filter: brightness(110%); 
}

.col_4to2 > div{
	width: calc(25% - 2%); /* 4列にピッタリ収まる */
    margin: 0;
    padding: 1%;
}

/*ヘッダー*/
.header{
	padding-top: 10px;
	padding-left: 5px;
	padding-bottom: 15px;
}

/*プロフィールメイン*/
.nibox{
	width: 70%;
	margin: auto;
	padding-bottom: 15px;
	text-align: left;
	max-width: 600px;
    padding: 5%;
    background-color: #f4f5f7;
}

.prp{
	width: 70%;
	}

.wrap {
    padding: 32px 0 64px;
    background-color: #fff;
}

.ameba{
    width: 30px;
}

/* SNSボタン全体の外枠指定 */

.snsbtniti {
  display: flex;
  flex-flow: row wrap;
  /*justify-content: space-around;*/
  max-width: 350px;/* ボタンを設置する場所の最大横幅 */
  /*margin: 0 auto;*//* ボタンを中央へ */
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti {
  padding: 0!important;
  list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti li {
  /*flex: 0 0 33%;*//* ボタンを3つ並びへ */
  text-align: center!important;
}

/* ボタン全体 */
.flowbtn {
  font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
  position: relative;
  display: inline-block;
  width: 55px; /* 背景横幅 */
  height: 55px;/* 背景高さ */
  font-size: 30px;/* アイコンサイズ */
  border-radius: 4px;
  color: #fff!important;/* ボタン内カラー */
  transition: .5s;
  text-decoration: none;
  box-shadow: 0 1px 2px #999;
  margin-bottom:10px;/* ボタン下余白 */
}

/* アイコンの位置を少し下げる */
.flowbtn i {
  position: relative;
  top: 5px;
}

/* ボタン内テキスト調整 */
.flowbtn div {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
}

/* ボタンマウスホバー時少し浮き上がる */
.flowbtn:hover {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
  text-decoration: none;
  cursor: pointer;
}

/* インスタ・Amazonのアイコンを少し大きく */
.flowbtn i.fa-brands.fa-instagram,.flowbtn i.fa-brands.fa-amazon {
  font-size: 35px;
}

/* エックス背景 */
.my_x1 {
  background: #000;
}

/* Instagram紫グラデ背景 */
.my_instagram1 {
 background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}

/* Facebook背景 */
.my_facebook1 {
  background: #1877f2;
}

/* YouTube背景 */
.my_youtube1 {
  background: #da1725;
}

/* TikTok背景 */
.my_tiktok1 {
  background: #000;
}

/* Amazon背景 */
.my_amazon1 {
  background: #ff9900;
}

/* LINE背景 */
.my_line1 {
  background: #00b900;
}


/*全体ここまで*/



/*スタイリング用PC*/
@media screen and (min-width: 500px) {
  /*　画面サイズ 500px以上*/
	
h2{
  font-size: 25px;
}
	
h3{
  font-size: 20px;
  line-height: 1;
}

p{
  margin-top: -10px;
  margin-bottom: -10px;
  font-size: 15px;
}
	
.flexbox{
  display: flex;
  max-width: 55%;
  align-items: flex-start;
  gap: 40px;
  margin: 0 auto;
}
	

.main {
  width: 60%;
  /*background: #f9f9f9;*/
  margin-bottom: 10px;
}

.main img {
  width: 100%;
}
	
/* メイン画像 */
.main-photo {
  width: 100%;
  border-radius: 6px;
}

/* サムネ3枚を横並び */
.thumbs {
  display: flex;
  justify-content: space-between;
  /*margin-top: 10px;*/
}

.thumbs img {
  width: 32%;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.3s;
  height: auto;
}


.thumbs img:hover {
  opacity: 0.7;
}

.size-info {
  margin-top: 5px;
  line-height: 1.6;
  font-size: 14px;
}

.thumbs img:hover {
  opacity: 1 !important;
}

.thumbs img {
  cursor: default !important;
}

.side {
  clear: right;
  width: 40%;
  /*background: #f9f9f9;*/
}
	
/*.shincho {
  text-align: left !important;
  margin-left: 3%;
  margin-top: -5%;
  font-weight: normal;
}*/

/* プロフィール画像 */

.profile{
　margin: 0 auto; /* 中央寄せ */
  width: 60%;
}

.side img {
　margin: 0 auto; /* 中央寄せ */
  width: 90%;
}

.side h2 {
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.side h3 {
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 4px;
}

.side p {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 14px;
  letter-spacing: 0.2px;
}


/*使用アイテムを2列*/
.item-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item-grid .item {
  width: calc(50% - 10px); /* ← 2列 */
}

.item-grid .item img {
  width: 100%;
  border-radius: 8px;
}

.item-grid .item p {
  font-size: 13px;
  line-height: 1.6;
  margin: 8px 0;
}

.item-grid .button {
  font-size: 12px;
  padding: 6px 10px;
}

/*.main,*/
.side {
  /*padding: 2%;*/
  /*border-radius: 10px;*/
}
	
	
/*ボタン*/	
.button {
  font-size: 20px;
  display: inline-block;
  background: #4e5155;
  padding: 1%;
  color: #FFF;
  text-decoration: none;
  margin-bottom: 10%;
  transition-property: opacity;
  transition-duration: 0.5s;
}
.button:hover {
  opacity: 0.7; 
}
}
/* ----------------------*/

/*スマホのみ*/
@media screen and (max-width: 499px) {

  /* 全体を縦並びにする */
  .flexbox {
    display: block;
    width: 95%;
    margin: auto;
  }

  /* メイン画像 */
  .main {
    width: 100%;
    text-align: center;
  }

  .main-photo {
    width: 95%;
    margin: 0 auto;
    display: block;
  }

  /* サムネ */
  .thumbs {
    width: 95%;
    margin: auto;
    display: flex;
    justify-content: space-between;
  }

  .thumbs img {
    width: 32%;
    border-radius: 6px;
  }

  /* プロフィール画像だけ調整 */
  .profile img {
    margin-left: 3%;
	margin-top: 10%;
    display: block;
	width: 50%;
  }
	
/* 着用者 だけ左寄せ */

.senchi {
  text-align: left !important;
  margin-left: 3%;
  margin-top: -5%;
}
	
.name-title	{
  text-align: left !important;
  margin-left: 3%;
  font-weight: normal;
}
	
  /* 使用ITEMの見出し */
  .sitem {
    text-align: center;
    margin-top: 20px;
	font-weight: normal;
  }
	
  /*身長*/
  .shincho {
  text-align: left !important;
  margin-left: 3%;
  font-weight: normal;
}
	


	/*着用サイズ*/
  .size-info {
  text-align: left;
  width: 90%;
  margin: 10px auto;
}

  /* 使用アイテムは1列に戻す */
  .item-grid {
    display: block;
  }

  .item-grid .item {
    width: 100%;
    margin-bottom: 25px;
  }

  .item-grid .item img {
    width: 90%;
    margin: 0 auto;
    display: block;
  }

  /* ボタン */
.button {
  display: block;
  width: fit-content;
  margin-left: auto;   /* ← 右寄せの決め手 */
  margin-right: 3%;  
  font-size: 20px;
  display: inline-block;
  background: #4e5155;
  padding: 3%;
  color: #FFF;
  text-decoration: none;
  margin-bottom: 10%;
  transition-property: opacity;
  transition-duration: 0.5s;
}
	
.button:hover {
  opacity: 0.7; 
}
}


/*スマホのみ*/
@media screen and (max-width: 499px) {

.col_4to2{
	padding-top: 5%;
	width: 100%;
	display: flex;
	display: -ms-flexbox; 
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;  
	justify-content: flex-start; /* ←左に寄せる */
}
	
.col_4to2 img{
	width: 100%;
}
	
	
.col_4to2 > div{
	margin: 0;
	width: 48%;
	padding: 1%;
}
	
/*ボタン右寄せしたくない時はこれ消す*/
.item-grid .item .button {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: 3%;
}	
	
body {
  font-family: "Poppins", "Noto Sans JP", sans-serif;
}

.niname, .nmee, .ame, h1, h2, h3 {
  font-weight: 500;
}
	
}

/* ----------------------*/

/*プロフィール内の文字設定全体*/

.siteName {
	margin-top: 5%;
	margin-bottom: 5%;
}

.niname {
font-size: 20px;
font-weight: normal;
}

.nmee {
font-size: 15px;
font-weight: normal;
padding-bottom: 20px;
}

.ame {
font-size: 18px;
font-weight: normal;
}