@charset "utf-8";


*:focus {
  outline: none;
}
body{
    margin: 0;
    padding: 0;
}
.noto-sans-jp{
	font-family: "Noto Sans JP", sans-serif;
}
.HalyardDisplay{
    font-family: halyard-display, sans-serif;
}
.Helvetica{
    font-family: "helvetica-lt-pro", sans-serif;
}
.Inter{
      font-family: "Inter", sans-serif;
}

.uo_base {
  position: fixed;
  display: flex;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  flex-direction: column;
  align-items: center
}

.uo_header {
  background-color: #fdeee7;
    opacity: 1;
  padding: 1rem;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  font-size: xx-large;
}
.uo_header .title_area{
    color: #ea5514;
    font-size: 25px;
    text-align: center;
    font-weight: bold;
    font-family: "Inter", sans-serif;
    letter-spacing: 0.05em;
}

.contents {
  border: 1px solid #aaaaaa;
  margin: 0;
  width: 100%;
  font-size: x-large;
}
.flexHeader {
}
.flexHeaderContents {
  overflow: auto
}
.uo_base a,.uo_base a:hover,.uo_base a:link{
    text-decoration: none;
    opacity: 1;
}


.sticky__container{
	display: flex;
	background: #FFFFFF;
    margin: 0 auto;
    padding: 0;
	background-attachment: fixed;
}
.pcBox{
	width: 30%;
	height: 100vh;
	position: sticky;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.title_pc{
	display: block;
	width: 35vh;
}


#uo_wrap{
	width: 40%;
	text-align: center;
	margin: 0 auto 0 0;
	color: #222;
	display: block;
	padding: 0 0 5%;
	overflow: hidden;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	letter-spacing:.5px;
	line-height: 1.65em;;
	background: #ededed;

}
#uo_wrap img{
    vertical-align: bottom;
    line-height: 0;
    border: none;
}
#uo_wrap ul,#uo_wrap li{
	padding: 0;
    list-style: none;
}

#uo_wrap a,#uo_wrap a:hover,#uo_wrap a:link{
    text-decoration: none;
    opacity: 1;
}
#uo_wrap img{
	width: 100%;
	height:auto;
	 display:block;
}
/* ================================================ 
header
================================================ */
#uo_head{
	width: 100%;
	display: block;
	position: relative;
	text-align: center;
	margin: 0 auto;
	padding: 10% 0;
}
#uo_head .title_box{
    width: 80%;
    text-align: center;
    margin: 0 auto;
    position: relative;
    display: inline-block;
}
#uo_head .title_box .st_logo{
    width: 30%;
    text-align: center;
    margin: 0 auto;
}
#uo_head .title_box .title_s{
    width: 100%;
    margin: 10% auto 0;
    position: relative;
    display: block;
    z-index: 10;
}
#uo_head .title_box .title{
    width: 100%;
    margin: 5% auto 8%;
    position: relative;
    display: block;
    z-index: 10;
}
#uo_head .title_box .vol{
    width: 15%;
    text-align: center;
    margin: 0 auto;
    z-index: 10;
}
#uo_head .lead_box{
    width:95%;
    aspect-ratio: 1 / 1;    /* 縦横比を1:1に固定 */
    border-radius: 50%;     /* 角を極限まで丸めて円にする */
    background-color: #ea5514;
    display: grid;
    place-items: center;
    position: relative;
    margin: 10% auto 0;
    z-index: 10;
}
#uo_head .lead_box .lead{
    font-size: 17px;
    text-align: center;
    color: #FFFFFF;
    margin: 0 auto;
    line-height: 1.8em;
    
}
#uo_head .lead_box .lead span{
    font-weight: bold;
    font-size: 120%;
}
#uo_head .title_box .circle1{
    width: 110px;
    position: absolute;
    top: 50%;
    left: -10%;
}
#uo_head .title_box .circle2{
    width: 50px;
    position: absolute;
    top: 90%;
    left: 10%;
}
#uo_head .title_box .circle3{
    width:80px;
    position: absolute;
    top: 90%;
    right: -5%;
}
#uo_head .circle4{
    width: 120px;
    position: absolute;
    bottom: -5%;
    left: 5%;
}
#uo_head .circle5{
    width: 50px;
    position: absolute;
    bottom: 10%;
    right: 5%;
}
#uo_head .circle6{
    width: 50px;
    position: absolute;
    bottom: 6%;
    right: 10%;
}

/* ================================================ 
contents
================================================ */

#uo_contents{
	width: 100%;
	position: relative;
	display: block;
	margin: 10% auto 0;
}
#uo_contents .staff_box{
    width: 90%;
    text-align: center;
    margin: 0 auto;
    position: relative;
    display: inline-block;
    padding: 10% 0;
}
#uo_contents .staff_box .heading {
  align-items: center; 
  display: flex; 
    font-size: 20px;
    font-weight: bold;
}
#uo_contents .staff_box .heading::after {
  background-color: #ea5514; 
  border-radius: 0px; 
  content: "";
  flex-grow: 1;
  height: 2px; 
}
#uo_contents .staff_box .heading::after {
  margin-left: 15px; 
}

#uo_contents .speechBubble {
    width:auto;
    position: relative;
    display: inline-block;
    margin: 10% auto 5%;
    padding: 20px;
    border-radius: 10px;
    background-color: #ffffff;
    text-align: left;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65em;
    color: #222;
}
#uo_contents .speechBubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  border-style: solid;
  border-width: 20px 0 0 20px;
  border-color: #ffffff transparent transparent;
  translate: -50% 100%;
}
#uo_contents .speechBubble span{
    color: #ea5514;
    font-weight: bold;
    font-size: 110%;
}
#uo_contents .staff_plof{
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    column-gap: 5%;
    margin: 0 auto;
}
#uo_contents .staff_plof .detail{
    width: 50%;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    position: relative;
}
#uo_contents .staff_plof .detail .sb{
    width: 100%;
    
}
#uo_contents .staff_plof .detail .sns {
    width:90%;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    margin: 10% auto 0;
    justify-content: space-between;
}
#uo_contents .staff_plof .detail .sns a {
    display: block;
    border: 1px solid #E6E6E6;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    overflow: hidden;
    color: #0191cf;
    text-decoration: none;
}
#uo_contents .instagram a {
    background: #fff url(https://static.dot-st.com/static/docs/c/pages/cp-staffboard/images/icon_instagram.png) 50% 50% no-repeat;
    background-size: 24px auto;
}
#uo_contents .wear a {
    background: #fff url(https://static.dot-st.com/static/docs/c/pages/cp-staffboard/images/icon_wear.png) 50% 50% no-repeat;
    background-size: 98% auto;
}
#uo_contents .tiktok a {
    background: #fff url(https://static.dot-st.com/static/docs/c/pages/cp-staffboard/images/icon_tiktok.svg) 50% 50% no-repeat;
    background-size: 22px auto;
}
#uo_contents .youtube a{
    background: #fff url(	https://static.dot-st.com/static/docs/c/pages/cp-staffboard/images/icon_youtube.svg) 50% 50% no-repeat;
    background-size: 24px auto;  
}
#uo_contents .staff_plof .staffimg{
    width: 50%;
    position: relative;
    text-align: center;
    margin: 0 auto;
}
#uo_contents .staff_box .circle1{
    width: 90px;
    position: absolute;
    right: -5%;
    top: 15%;
    z-index: 10;
}
#uo_contents .staff_box .circle2{
    width: 80px;
    position: absolute;
    left: 0;
    bottom: 2%;
    z-index: 10;
}
#uo_contents .staff_box .circle3{
    width: 45px;
    position: absolute;
    left: 15%;
    bottom: -2%;
    z-index: 10;
}


#uo_contents .uo_box{
    width: 100%;
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 10% auto;
}
#uo_contents .uo_box .label{
    width: 100%;
    background: #ea5514;
    color: #FFFFFF;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    font-size: 24px;
    font-weight: 600;
    font-family: halyard-display, sans-serif;
    padding: 3% 0;
    line-height: 1.5em;
}
#uo_contents .uo_box .label .no{
    font-size: 80%;
}
#uo_contents .uo_box .col{
    font-size: 50%;
    font-weight: 500;
    text-align: center;
    margin: 5% auto;
        
}
#uo_contents .uo_box .speechBubble2 {
    width: 90%;
    position: relative;
    display: inline-block;
    margin: 10% auto;
    padding: 24px 0px;
    border-radius: 9999px;
    background-color: #ffffff;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.7;
    color: #ea5514;
}

#uo_contents .uo_box .speechBubble2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 18%;
    border-style: solid;
    border-width: 20px 0 0 20px;
    border-color: #ffffff transparent transparent;
    translate: calc(-50% + 0.2px) 100%;
}
#uo_contents .uo_box .main{
    width: 90%;
    text-align: center;
    margin: 0 auto;
    position: relative;
    aspect-ratio: 5 / 6;
     background-color:#e2e2e2;
    box-shadow:2px 2px 10px #b2b2b2;
}
#uo_contents .uo_box .description{
    width: 90%;
    font-size: 15px;
    text-align: center;
    font-weight: 500;
    margin: 5% auto;
    display: inline-block;
    position: relative;
    line-height: 1.7em;
}
#uo_contents .uo_box .point_box{
    width: 90%;
    text-align: center;
    margin: 5% auto;
    position: relative;
    display: flex;
    column-gap: 0;
    align-items: center;
    
}
#uo_contents .uo_box .point_box .sub{
    width: 50%;
    position: relative;
    aspect-ratio: 5 / 6;
    display: block;
    
}
#uo_contents .uo_box .point_box .txt_area{
    width: 50%;
    text-align: center;
    margin: 0 auto;
    display: inline-block;
    position: relative;
}
#uo_contents .uo_box .point_box .txt_area .ttl{
    width: 90%;
    font-size: 16px;
    color: #ea5514;
    font-weight: bold;
    line-height: 1.6em;
    padding-bottom: 5%;
    display: inline-block;
    text-align:left;
    margin: 0 auto;
    margin-left: 5%;
}
#uo_contents .uo_box .point_box .txt_area .line{
    width: 100%;
    border-bottom: #ea5514 2px solid;
}
#uo_contents .uo_box .point_box .txt_area .ttl span{
    font-weight: 500;
    font-size: 80%;
}
#uo_contents .uo_box .point_box .txt_area .txt{
     width: 90%;
    font-size: 13px;
    text-align: left;
    font-weight: normal;
    margin: 5% auto;
    margin-left: 8%;
    line-height: 1.65em;
    
}
#uo_contents .uo_box .point_box .txt_area .ttl2{
    width: 90%;
    font-size: 16px;
    color: #ea5514;
    font-weight: bold;
    line-height: 1.6em;
    padding-bottom: 5%;
    display: inline-block;
    text-align:left;
    margin: 0 auto;
    margin-left: -5%;
}
#uo_contents .uo_box .point_box .txt_area .ttl2 span{
    font-weight: 500;
    font-size: 80%;
}
#uo_contents .uo_box .point_box .txt_area .txt2{
     width: 90%;
    font-size: 13px;
    text-align: left;
    font-weight: normal;
    margin: 5% auto;
    margin-left: 0%;
    line-height: 1.65em;
}
#uo_contents .uo_box .credit_box{
    width: 90%;
    text-align: center;
    margin: 5% auto;
    position: relative;
    display: inline-block;
    padding: 5% 0;
    z-index: 10;
}
#uo_contents .uo_box .credit_box .item{
    font-size: 22px;
    text-align: center;
    margin: 0 auto;
    line-height: 1.7em;
    font-weight: 700;
    font-family: "Inter", sans-serif;
}
#uo_contents .uo_box .credit_box .circle1{
    width: 90px;
    position: absolute;
    left: 0;
    bottom: -20%;
    z-index: 2;
    
}
#uo_contents .uo_box .credit_box .circle2{
    width:50px;
    position: absolute;
    left: 20%;
    bottom: -40%;
    z-index: 2;
}

#uo_contents .uo_box .credit_box .circle3{
    width:60px;
    position: absolute;
    top: 0%;
    right: 5%;
    z-index: 2;
}
#uo_contents .uo_box_s{
    width: 85%;
    text-align: center;
    margin: 20% auto 0;
    position: relative;
    display: inline-block;
}
#uo_contents .uo_box_s .styling{
    width: 100%;
    position: relative;
    display: block;
    aspect-ratio: 5 / 6;
}
#uo_contents .uo_box_s .itemimg{
    width: 40%;
    position: relative;
    display: block;
    float: left;
    margin: 10% auto 0;
    aspect-ratio: 1 / 1;
}
#uo_contents .uo_box_s .itemimg2{
    width: 70%;
    float: right;
    position: relative;
    margin: -10% auto 0;
}
#uo_contents .uo_box_s .speechBubble3 {
    width: 100%;
    position: relative;
    display: inline-block;
    margin-top: 20px;
  padding: 5% 0;
  border-radius: 4px;
  background-color: #ffffff;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  color: #ea5514;
}

#uo_contents .uo_box_s .speechBubble3::after {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent #ffffff;
  translate: -50% -100%;
}
#uo_contents .uo_box_s .title_box{
    width: 70%;
    text-align: center;
    margin: 15% auto 10%;
    position: relative;
    display: inline-block;
    padding: 5% 0;
}
#uo_contents .uo_box_s .title_box .title_s{
    width: 90%;
    margin: 10% auto 0;
    position: relative;
    display: block;
    z-index: 10;
}
#uo_contents .uo_box_s .title_box .title{
    width: 90%;
    margin: 5% auto 8%;
    position: relative;
    display: block;
    z-index: 10;
}
#uo_contents .uo_box_s .title_box .vol{
    width: 15%;
    text-align: center;
    margin: 0 auto;
    z-index: 10;
}
#uo_contents .uo_box_s .title_box .circle1{
    width: 120px;
    position: absolute;
    top: 35%;
    left: -15%;
}
#uo_contents .uo_box_s .title_box .circle2{
    width: 50px;
    position: absolute;
    top: 95%;
    left: 10%;
}
#uo_contents .uo_box_s .title_box .circle3{
    width:80px;
    position: absolute;
    top: 0%;
    right: -10%;
}

.reverse{
    flex-direction: row-reverse;
}




 



/*=====ボタン01=====*/
.btn01 a {
    background: #222;
    color: #FFFFFF;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
	margin: 2% auto;
    width: 60%;
    padding: 2% 0%;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.5em;
    letter-spacing:2px;
	border-radius: 0;
	font-family: halyard-display, sans-serif;
	float: none;
    
}
.btn01 a:hover {
    background: #333;
    color: #FFFFFF;
}

/* ============ ボタン04 ============ */
.btn02 a {
    background: #222;
    color: #FFFFFF;
	position: relative;
    width: 80%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 18px;
    padding: 3% 0;
    text-align: center;
    line-height: 2em;
    transition: 0.3s ease-in-out;
    margin: 10% auto 0;
    font-weight: 600;
	border-radius: 3px;
}

/*.btn02 a::after {
    position: absolute;
    content: "+";
    right: 5%;
    bottom: 5%;
    font-size: 40px;
    font-weight: 100;
    line-height: 2em;
}
*/
.btn03 a {
    background: #ea5514;
    color: #000000;
	position: relative;
    width: 80%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 15px;
    padding: 3% 0;
    text-align: center;
    line-height: 2em;
    transition: 0.3s ease-in-out;
    margin: 5% auto 0;
    font-weight: 500;
	border-radius: 3px;
}

.btn_all a {
	background: #ea5404;
	color: #FFFFFF;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5% auto 0;
    width: 60%;
    padding: 3% 0%;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    font-size: 13px;
    line-height: 2em;
    letter-spacing: .8px;
	border-radius: 100vh;
	font-family: "Inter", sans-serif;
    
}
.btn_all a:hover {
    background: #333;
    color: #FFFFFF;
}
.btn_all a:after {
    content: '';
    width: 7px;
    height: 7px;
    border-top: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.btn_all a:hover:after {
    border-color: #FFFFFF;
}



.pc{
    display:block;
}
.sp {
	display:none;
}
.clear{
    clear: both;
}
.Left{
    float: left;
}
.Right{
    float: right;
}
.small{
	font-size: 70%;
}


/**********************************************
　　　　　　　　　　　　SP
**********************************************/

@media only screen and (max-width:768px){
    .uo_header .title_area{
            font-size: 16px;
        letter-spacing: 0.02em;
        line-height: 2em;
    }
    .pcBox{
		display: none;
	}
    
	#uo_wrap {
		width: 100%;
		margin: 0% auto;
	}
    #uo_head .title_box{
        width: 85%; 
    }
    #uo_head .lead_box{
        width: 100%;
    }
    #uo_head .lead_box .lead{
        font-size: 14px;
    }
    #uo_head .title_box .circle1{
        width: 90px;
        left: -8%;
    }
    #uo_head .title_box .circle2{
        width: 40px;
        left: 15%;
    }
    #uo_head .title_box .circle3{
        width: 60px;
        top: 95%;
    }
    #uo_head .circle4{
        width: 90px;
        bottom: -8%;
    }
    #uo_head .circle5{
        width: 30px;
    }
    #uo_head .circle6{
        bottom: 3%;
    }
    #uo_contents{
        margin: 15% auto 0;
    }
    #uo_contents .staff_box{
        padding: 10% 0 20%;
    }
    #uo_contents .staff_box .heading{
        font-size: 16px;
    }
    #uo_contents .speechBubble{
            margin: 5% auto;
        font-size: 13px;
        
    }
    #uo_contents .staff_plof .detail .sns a{
        height: 35px;
        width: 35px;
    }
    #uo_contents .staff_box .circle1{
            top: 12%;
        width: 75px;
    }
    #uo_contents .staff_box .circle2{
        width: 60px;
            bottom: 5%;
    }
    #uo_contents .staff_box .circle3{
            width: 40px;
        bottom: 0%;
    }
    #uo_contents .uo_box .label{
        font-size: 20px;
    }
    #uo_contents .uo_box .speechBubble2{
        width: 95%;
        font-size: 14px;
    }
    #uo_contents .uo_box .description{
        font-size: 13px;
    }
    #uo_contents .uo_box .point_box{
        width: 95%;
    }
    #uo_contents .uo_box .point_box .txt_area .ttl{
        font-size: 12px;
        letter-spacing: 0;
    }
    #uo_contents .uo_box .point_box .txt_area .txt{
        font-size: 11px;
    }
    #uo_contents .uo_box .point_box .txt_area .ttl2{
        font-size: 12px;
        
    }
    #uo_contents .uo_box .point_box .txt_area .txt2{
        font-size: 11px;
    }
    #uo_contents .uo_box .credit_box .item{
        font-size: 18px;
    }
    #uo_contents .uo_box .credit_box .circle1{
        width: 70px;
        left: -2%;
    }
    #uo_contents .uo_box .credit_box .circle2{
        width: 40px;
        left: 15%;
        bottom: -40%;
    }
    #uo_contents .uo_box .credit_box .circle3 {
        width: 50px;
        top: -10%;
        right: 2%;
        z-index: 2;
    }
    #uo_contents .uo_box_s{
        width: 100%;
    }
    #uo_contents .uo_box_s .itemimg{
        margin-left: 5%;
    }
    #uo_contents .uo_box_s .itemimg2{
        width: 60%;
        margin-right: 5%;
    }
    #uo_contents .uo_box_s .speechBubble3{
        width: 90%;
        font-size: 14px;
    }
    #uo_contents .uo_box_s .title_box .circle1{
        width: 100px;
        top: 20%;
    }
    #uo_contents .uo_box_s .title_box .circle3{
        width: 60px;
        top: -5%;
        right: -15%;
    }
    
    
    
    .btn01 a{
        font-size: 15px;
        font-weight: 300;
        line-height: 2em;
    }
	
	.btn02 a{
		width: 90%;
		font-size: 14px;
		padding: 4.5% 0;
        margin: 20% auto 0;
	}
	.btn03 a{
		width: 90%;
		font-size: 14px;
		padding: 4.5% 0;
	}
/*	.btn02 a::after{
		bottom: 8%;
		font-size: 30px;
		
		
	}*/
	.btn_all a{
		width: 80%;
		font-size: 15px;
	}
	
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
}


/* ==================================== 
 CSS動き
======================================== */

/* ============ 4枚切り替え ============ */
.slider4,
.slider3,
.slider2{
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  z-index: 1;
}

.slider4 img,
.slider3 img,
.slider2 img{
    width: 100%;
    height: auto;
    display: block;
}

.slider4{
    animation: anime4 8s infinite;
}
.slider4:nth-child(1) { animation-delay: 0s; }
.slider4:nth-child(2) { animation-delay: 2s; }
.slider4:nth-child(3) { animation-delay: 4s; }
.slider4:nth-child(4) { animation-delay: 6s; }

/* ============ 3枚切り替え ============ */
.slider3{
    animation: anime3 6s infinite;
}
.slider3:nth-child(1) { animation-delay: 0s; }
.slider3:nth-child(2) { animation-delay: 2s; }
.slider3:nth-child(3) { animation-delay: 4s; }

/* ============ 2枚切り替え ============ */
.slider2{
    animation: anime2 4s infinite;
}
.slider2:nth-child(1) { animation-delay: 0s; }
.slider2:nth-child(2) { animation-delay: 2s; }


/* 4枚用のキーフレーム（全体で8秒、1枚あたり2秒の計算） */
@keyframes anime4 {
  0% { opacity: 0; z-index: 1; }
  6% { opacity: 1; z-index: 3; }    /* 0.5秒かけてふわっと表示 */
  25% { opacity: 1; z-index: 3; }   /* 2秒間（25%まで）表示をキープ */
  31% { opacity: 0; z-index: 1; }   /* 0.5秒かけてふわっと消える */
  100% { opacity: 0; }
}

/* 3枚用のキーフレーム（全体で6秒、1枚あたり2秒の計算） */
@keyframes anime3 {
  0% { opacity: 0; z-index: 1; }
  8% { opacity: 1; z-index: 3; }   /* 0.5秒かけてふわっと表示 */
  33% { opacity: 1; z-index: 3; }  /* 約2秒間（33%まで）表示をキープ */
  41% { opacity: 0; z-index: 1; }  /* 0.5秒かけてふわっと消える */
  100% { opacity: 0; }
}

/* 2枚用のキーフレーム（全体で4秒、1枚あたり2秒の計算） */
@keyframes anime2 {
  0% { opacity: 0; z-index: 1; }
  12% { opacity: 1; z-index: 3; }  /* 0.5秒かけてふわっと表示 */
  50% { opacity: 1; z-index: 3; }  /* 2秒間（50%まで）表示をキープ */
  62% { opacity: 0; z-index: 1; }  /* 0.5秒かけてふわっと消える */
  100% { opacity: 0; }
}