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

プロフィール

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



.profile-inner {
	max-width: 1200px;
	margin: auto;
	position: relative;
	z-index: 1;
	background: url("../../images/common/headerBG.jpg");
	padding: 20px;
	box-sizing: border-box;
	border-radius: 20px;
}

.profile_box {
    display: flex;
	justify-content: space-between;
	position: relative;
	box-sizing: border-box;
	background: #fff;
	border-radius: 20px;
	box-shadow: inset 0 0 0 6px #f2a4c2;
	padding: 40px;
}

.profile_item01 {
	width: 35%;
	position: relative;
}
.profile_item02 {
	width: 63%;
	/*color: #fff;*/
}

.profile_item01 .new {
	position: absolute;
	width: 60px;
	top:5px;
	right: 5px;
	z-index: 1;
}
.profile_item01 .rank {
	position: absolute;
	width: 100px;
	top:-25px;
	left: -5px;
	z-index: 1;
}


.slider-profile img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	margin-bottom: 10px;
}

.thumbnail {
	width: 100%;
}
.thumbnail img {
	width: 100%;
	height: auto;
}
.thumnail {
  transform: unset !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between;
  flex-wap: wrap;
}
.thumbnail .slick-track {
  transform: unset !important;
	 display: block!important;
    float: none !important;
	width: 100% !important;
}
.thumbnail .thumbnail-img {
    width: 20% !important;
	opacity: 0.5;
  transition: opacity .3s linear;
}
.thumbnail .slick-current {
  opacity: 1;
}


.profile_wrap {
	margin-bottom: 20px;
}


.profile_wrap p {
	line-height: 1.6;
	font-size: clamp(1.2rem, 1.3vw, 1.4rem);
	padding: 0;
	margin: 0;
	font-family: 'Noto Sans JP',"Yu Gothic","游ゴシック",YuGothic,"Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",Helvetica,Arial,Verdana,sans-serif;
	margin-bottom: 20px;
}


.profIcon {
	display: flex;
	margin-bottom: 10px;
}
.profIcon div {
	width: 47%;
	margin-right: 5px;
}


.profHEAD {
	display: flex;
	margin-bottom: 15px;
	border-bottom: 1px solid #bea163;
	padding-bottom: 10px;
}


.profHEAD h2 {
	padding: 0;
	margin: 0;
	font-size: clamp(2.2rem, 3vw, 3.5rem);
	font-weight: 600;
	 text-align: center;
	font-family: "Zen Maru Gothic", sans-serif;
	color:#ee83ac !important;
	
}
.profHEAD h2 span {
	font-size: clamp(1.5rem, 1.6vw, 1.8rem);
	font-weight: 500;
	 text-align: center;
	color:#222;
	margin-left: 10px;
}

.profHEAD .size {
	font-size: clamp(1.5rem, 1.6vw, 1.8rem);
	position: relative;
	margin-top: 14px;
	margin-left: 20px;
}

.profile_box .catch {
	padding: 0;
	margin: 0;
	font-size: clamp(1.8rem, 2vw, 2.4rem);
	color:#fed266;
}


.profile_box h3 {
	padding: 0;
	margin: 0;
	font-size: clamp(1.5rem, 1.8vw, 2rem);
	color:#ee83ac !important;
	margin-bottom: 5px;
	font-family: "Zen Maru Gothic", sans-serif;
}



.profBGBOX {
	background: #fceff6;
	padding: 20px;
	box-sizing: border-box;
	border-radius: 10px;
	border: 1px solid #f6c8d4;
}
.profBGBOX .inner {
	overflow:auto;
	width:auto;
	height:350px;
	box-sizing: border-box;
	padding-right: 20px;
}
.profBGBOX .inner2 {
	overflow:auto;
	width:auto;
	height:50px;
	box-sizing: border-box;
	padding-right: 20px;
}
.profBGBOX p {
	font-size: clamp(1.4rem, 1.5vw, 1.6rem);
}


table.intTABLE {
	font-size: clamp(1.4rem, 1.5vw, 1.6rem);
    width: 100%;
	box-sizing: border-box;
    border: 1px #fff solid;
    border-collapse: collapse;
    border-spacing: 0;
}

table.intTABLE th {
    padding: 10px;
	box-sizing: border-box;
    border: #fff solid;
    border-width: 0 0 1px 1px;
    background: #ee83ac;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
	color:#fff;
	width: 30%;
}
table.intTABLE td {
    padding: 10px;
	box-sizing: border-box;
    border: 1px #fff solid;
    border-width: 0 0 1px 1px;
    text-align: left;
	background: #fceff6;
}


table#qa {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
	font-size: clamp(1.3rem, 1.4vw, 1.6rem);
	box-sizing: border-box;
	line-height: 1.6;
	font-family: 'Noto Sans JP',"Yu Gothic","游ゴシック",YuGothic,"Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",Helvetica,Arial,Verdana,sans-serif;
	border: 1px solid #ee83ac;
}

table#qa th {
    padding: 10px;
    font-weight: normal;
    text-align: left;
	line-height: 1.4;
	box-sizing: border-box;
	width: 30%;
}

table#qa td {
    padding: 10px;
    text-align: left;
	line-height: 1.4;
	box-sizing: border-box;
	position: relative;
}
table#qa tr:nth-child(even) {
	background: #fceff6;
}
table#qa td span {
	color:#fa7a91;
}

table.option {
	font-size: clamp(1.2rem, 1.4vw, 1.4rem);
    width: 100%;
	box-sizing: border-box;
    border: 1px #fff solid;
    border-collapse: collapse;
    border-spacing: 0;
}

table.option th {
    padding: 5px;
	box-sizing: border-box;
    border: #fff solid;
    border-width: 0 0 1px 1px;
    background: #ee83ac;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
	color:#fff;
	width: 25%;
}
table.option td {
    padding: 5px;
	box-sizing: border-box;
    border: 1px #fff solid;
    border-width: 0 0 1px 1px;
    text-align: center;
	background: #fceff6;
	font-size: clamp(1.4rem, 1.6vw, 1.8rem);
}


div.vid_contents {
width: 100%;/*背景色を横幅いっぱいに広げる*/
text-align: center;
margin: 0px auto;
	box-sizing: border-box;
}
video.vid_main {
width: 100%;
max-width: 900px;/*PC版での最大幅*/
}

.blockWrap {
	margin-bottom: 60px;
}

.media {
    width: 90%;
    margin: 20px auto;
    
    /* 追加部分ここから */
    background-color: #fff9cc; /* 薄い黄色（お好みで変更してください） */
    border-radius: 10px;       /* 角丸のサイズ（数値が大きいほど丸くなります） */
    padding: 20px;             /* 背景のフチと中身がくっつかないように内側に余白をとる */
    box-sizing: border-box;    /* paddingを追加しても全体の横幅(90%)が崩れないようにする */
}
.media_box  {
	width: 100%;
	margin: auto auto;
	text-align: center;
}

.media li {
	width: 100%;
	margin: 15px auto;
}





@media screen and (max-width: 834px) {

.profile-inner {
	max-width: 1200px;
	margin: auto;
	position: relative;
	z-index: 1;
	background: url("../../images/common/headerBG.jpg");
	padding: 10px;
	box-sizing: border-box;
	border-radius: 10px;
	margin: 0 2%;
}

.profile_box {
    display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	box-sizing: border-box;
	background: #fff;
	border-radius: 10px;
	box-shadow: inset 0 0 0 3px #f2a4c2;
	padding: 20px;
}

.profile_item01 {
	width: auto;
	position: relative;
	margin-bottom: 15px;
}
.profile_item02 {
	width: auto;
	/*color: #fff;*/
}

.profile_item01 .new {
	position: absolute;
	width: 60px;
	top:5px;
	right: 5px;
	z-index: 1;
}
.profile_item01 .rank {
	position: absolute;
	width: 70px;
	top:-25px;
	left: 5px;
	z-index: 1;
}


.slider-profile img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	margin-bottom: 10px;
}

.thumbnail {
	width: 100%;
}
.thumbnail img {
	width: 100%;
	height: auto;
}
.thumnail {
  transform: unset !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between;
  flex-wap: wrap;
}
.thumbnail .slick-track {
  transform: unset !important;
	 display: block!important;
    float: none !important;
	width: 100% !important;
}
.thumbnail .thumbnail-img {
    width: 20% !important;
	opacity: 0.5;
  transition: opacity .3s linear;
}
.thumbnail .slick-current {
  opacity: 1;
}


.profile_wrap {
	margin-bottom: 20px;
}


.profile_wrap p {
	line-height: 1.6;
	font-size: clamp(1.2rem, 1.3vw, 1.4rem);
	padding: 0;
	margin: 0;
	font-family: 'Noto Sans JP',"Yu Gothic","游ゴシック",YuGothic,"Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",Helvetica,Arial,Verdana,sans-serif;
	margin-bottom: 20px;
}


.profIcon {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 0px;
}
.profIcon div {
	width: 49%;
	margin: 0;
	margin-bottom: 5px;
}
.profIcon div:first-child {
	flex: 0 0 100%;
}


.profHEAD {
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
	border-bottom: 1px solid #bea163;
	padding-bottom: 10px;
}


.profHEAD h2 {
	padding: 0;
	margin: 0;
	font-size: clamp(2.2rem, 3vw, 3.5rem);
	font-weight: 600;
	 text-align: center;
	font-family: "Zen Maru Gothic", sans-serif;
	color:#ee83ac !important;
	
}
.profHEAD h2 span {
	font-size: clamp(1.5rem, 1.6vw, 1.8rem);
	font-weight: 500;
	 text-align: center;
	color:#222;
	margin-left: 0px;
	margin-bottom: 10px;
}

.profHEAD .size {
	font-size: clamp(1.4rem, 1.6vw, 1.8rem);
	position: relative;
	margin-top: 5px;
	margin-left: 0px;
	text-align: center;
}

.profile_box .catch {
	padding: 0;
	margin: 0;
	font-size: clamp(1.8rem, 2vw, 2.4rem);
	color:#fed266;
	text-align: center;
}


.profile_box h3 {
	padding: 0;
	margin: 0;
	font-size: clamp(1.6rem, 1.8vw, 2rem);
	color:#ee83ac !important;
	margin-bottom: 5px;
	font-family: "Zen Maru Gothic", sans-serif;
}



.profBGBOX {
	background: #fceff6;
	padding: 15px;
	box-sizing: border-box;
	border-radius: 6px;
	border: 1px solid #f6c8d4;
}
.profBGBOX .inner {
	overflow:auto;
	width:auto;
	height:250px;
	box-sizing: border-box;
	padding-right: 20px;
}
.profBGBOX p {
	font-size: clamp(1.4rem, 1.5vw, 1.6rem);
}


table.intTABLE {
	font-size: clamp(1.4rem, 1.5vw, 1.6rem);
    width: 100%;
	box-sizing: border-box;
    border: 1px #fff solid;
    border-collapse: collapse;
    border-spacing: 0;
}

table.intTABLE th {
	display: block;
	width: 100%;
    padding: 8px;
	box-sizing: border-box;
    border: #fff solid;
    border-width: 0 0 1px 1px;
    background: #ee83ac;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
	color:#fff;
}
table.intTABLE td {
	display: block;
	width: 100%;
    padding: 8px;
	box-sizing: border-box;
    border: 1px #fff solid;
    border-width: 0 0 1px 1px;
    text-align: left;
	background: #fceff6;
}


table#qa {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
	font-size: clamp(1.4rem, 1.4vw, 1.6rem);
	box-sizing: border-box;
	line-height: 1.6;
	font-family: 'Noto Sans JP',"Yu Gothic","游ゴシック",YuGothic,"Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",Helvetica,Arial,Verdana,sans-serif;
	border: 1px solid #ee83ac;
}

table#qa th {
    padding: 10px;
    font-weight: normal;
    text-align: left;
	line-height: 1.4;
	box-sizing: border-box;
	width: 50%;
}

table#qa td {
    padding: 10px;
    text-align: left;
	line-height: 1.4;
	box-sizing: border-box;
	position: relative;
}
table#qa tr:nth-child(even) {
	background: #fceff6;
}
table#qa td span {
	color:#fa7a91;
}

table.option {
	font-size: clamp(1rem, 1.4vw, 1.4rem);
    width: 100%;
	box-sizing: border-box;
    border: 1px #fff solid;
    border-collapse: collapse;
    border-spacing: 0;
}

table.option th {
    padding: 5px;
	box-sizing: border-box;
    border: #fff solid;
    border-width: 0 0 1px 1px;
    background: #ee83ac;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
	color:#fff;
	width: 25%;
}
table.option td {
    padding: 5px;
	box-sizing: border-box;
    border: 1px #fff solid;
    border-width: 0 0 1px 1px;
    text-align: center;
	background: #fceff6;
	font-size: clamp(1.4rem, 1.6vw, 1.8rem);
}


div.vid_contents {
width: 100%;/*背景色を横幅いっぱいに広げる*/
text-align: center;
margin: 0px auto;
	box-sizing: border-box;
}
video.vid_main {
width: 100%;
max-width: 900px;/*PC版での最大幅*/
}

.blockWrap {
	margin-bottom: 60px;
}

.media  {
	width: 90%;
	margin: 10px auto 0;
}
.media li {
	width: 100%;
	margin: 0 0;
	margin-bottom: 10px;
}
}


/* ========================================================
   スマホ表示：iconBOX内を確実に「左右2列（2カラム）」に並べる設定
======================================================== */
@media screen and (max-width: 960px) {
    
    /* フリー項目は1行（横幅いっぱい） */
    .sp .profIcon .sp-free-icon {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        margin-bottom: 8px !important;
    }

    /* iconBOX 自体を確実にフレックスコンテナにする */
    .sp .profIcon .iconBOX {
        display: flex !important;
        flex-direction: row !important;      /* ★強制的に「横方向」に並べる */
        flex-wrap: wrap !important;         /* ★入り切らない分は次の行へ（2列配置の基本） */
        justify-content: space-between !important; /* 左右にきれいに分散配置 */
        align-items: center !important;
        width: 100% !important;
        gap: 8px 0 !important;              /* 行と行の上下の隙間 */
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* iconBOXの中にある「すべての要素（div）」を確実に幅48%（2列）にする */
    .sp .profIcon .iconBOX > * {
        display: inline-flex !important;    /* ★ブロックではなくインラインフレックスで横並びを維持 */
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        
        width: 48% !important;              /* 1行に2つ並ぶように48%に固定 */
        max-width: 48% !important;
        min-width: 0 !important;
        
        box-sizing: border-box !important;
        margin: 0 !important;
        float: none !important;
        clear: none !important;             /* ★勝手な改行（clear）を禁止 */
        
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}