/* CSS Document */
main img{
    max-width: 100%;
    width: auto;
}
a img{
    transition: opacity .3s ease;
}
a img:hover{
    opacity: .7;
}
.keyV_titlebox{
    text-align: center;
    margin-bottom: 3em;
}
.keyV_subtitle{
    width: 90%;
    margin: auto;
    color: #fff;
    background: #C7C5C5;
}
.talk_box_icon img{
    width: 90px;
}
.talk_box_user .talk_box_icon{
    width: 90px;
}
.talk_box_user {
    margin-top: 3em;
    margin-bottom: 3em;
}
.talk_box_user .talk_box_cap,
.talk_box_staff .talk_box_cap{
    width: calc(100% - 120px);
    text-align: center;
    background: #fff;
    padding: 30px;
    border-radius: 30px;
    position: relative;
    border: 1px solid #ccc;
}
.talk_box_user .talk_box_cap::after,
.talk_box_user .talk_box_cap::before{
    content: "";
    position: absolute;
    top: 50%;
	transform: translateY( -50% );
	left: -1.5em;
	border-top: 10px solid transparent;
	border-right: 1.5em solid #ccc;
	border-bottom: 10px solid transparent;
}
.talk_box_staff .talk_box_cap::after,
.talk_box_staff .talk_box_cap::before{
    content: "";
    position: absolute;
    top: 50%;
	transform: translateY(-50%);
	right: -1.5em;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 1.5em solid #ccc;
}
.talk_box_user .talk_box_cap::after{
    left: calc( 4px - 1.5em );
	border-right: solid 1.5em #fff;
}
.talk_box_staff .talk_box_cap::after{
    right: calc( 4px - 1.5em );
	border-left: solid 1.5em #fff;
}
.osusume{
    text-align: center;
    margin: 10em 0;
    background: #fff;
    padding-bottom: 5em;
}
.osusume_title{
    background: #707070;
    color: #fff;
    font-weight: bold;
    margin: 0 calc(50% - 50vw);
    margin-bottom: 2em;
    padding: 10px calc(50vw - 50%);
}
.osusume_list{
    display: inline-block;
    text-align: left;
}
.osusume_item{
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
}
.osusume_item::before{
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background: #707070;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.osusume_item::after{
    content: "";
    width: 8px;
    height: 6px;
    display: block;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    position: absolute;
    left: 6px;
    top: 45%;
    transform: translateY(-50%) rotate(-45deg);
}

/*section*/
.style_sec{
    margin-bottom: 10em;
}
.style_sec_title{
    border: 1px solid #707070;
    text-align: center;
    padding: 10px;
    position: relative;
    margin-bottom: 80px;
}
.style_sec_title::after{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 5px;
    left: 5px;
    border: 1px solid #707070;
    z-index: -1;
}
.style_sec.is_bob .style_sec_title,
.style_sec.is_bob .style_sec_title::after{
    background: #E8DFDF;    
}
.style_sec.is_medium .style_sec_title,
.style_sec.is_medium .style_sec_title::after{
    background: #DFE8E8;    
}
.style_sec.is_long .style_sec_title,
.style_sec.is_long .style_sec_title::after{
    background: #F3F5E5;    
}
.style_sec_title img{
    height: 30px;
}
.style_sec_grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:200px 100px;
}
/*style_sec_box*/
.style_sec_box{
    position: relative;
}
.style_sec_box:nth-of-type(2){
    transform: translateY(50%);
}
.style_sec_wrap{
    background: #fff;
    padding-right: 30px;
    border: 1px solid #707070;
    position: relative;
    z-index: 1;
}
.style_sec_box::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #707070;
    position: absolute;
    top: -20px;
    left: -40px;
    z-index: -1;
}
.style_sec_box::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #707070;
    position: absolute;
    top: 20px;
    right: -20px;
    z-index: -2;
    background: #C5C5C5;
}
.style_sec.is_bob .style_sec_box::before{
    background: #E9DFE0    
}
.style_sec.is_medium .style_sec_box::before{
    background: #DFE8E8;
}
.style_sec.is_long .style_sec_box::before{
    background: #F3F5E5;
}
.style_sec_img{
    position: relative;
    margin-top: -30px;
    margin-left: -20px;
    display: inline-block;
}
.style_sec_img > img{
    border: 1px solid #707070;
}
.style_sec_img .style_sec_cat{
    position: absolute;
    bottom: 0;
    right: 0;
    transform-origin: bottom right;
    transform: rotate(90deg);
}
.style_sec_img .style_sec_cat img{
    height: 15px;
}
.style_sec_number{
    position: absolute;
    top: -10px;
    left: 20px;
    z-index: 1;
}
.style_sec_number img{
    height: 100px;    
}
.style_sec_cap{
    padding: 30px 20px;
}
.style_sec_cap_name{
    margin-bottom: 1em;
}
.style_sec_stylist_title{
    display: inline-block;
    padding: 3px 3em;
    background: #707070;
    color: #fff;
    border-radius: 0 30px 30px 0;
    transform: translateX(-25%);
    margin-bottom: 10px;
}
.movie_wrap{
    padding: 30px;
}
.movie_wrap .movie_box{
    width: 48%;
    aspect-ratio:16/9;
    position: relative;
}
.movie_wrap .movie_box iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
@media screen and (max-width:768px){
}
@media screen and (max-width:768px){
    .style_sec_grid{
        display: block;
    }
    .style_sec_box:nth-of-type(2){
        transform: none;
    }
    .style_sec_box{
        margin-bottom: 100px;
    }
    .style_sec_box::before{
        top: -40px;
    }
    .style_sec_img{
        margin-top: -20px;
    }
}