#studio{
}

/* *********************************** */

article.studio-container{
    width:100%;
    margin: auto;
    padding:0;
    box-sizing: border-box;
    color: #4e4e4e;
}
article.studio-container section.section{
    width:100%;
    margin:0;
    padding:4.5rem 0%;
    box-sizing: border-box;
    line-height: 1;
}
article.studio-container .section .content-title{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width:94%;
    margin:0 auto 5rem;
}
.section .content-title h3{
    margin:0;
    padding:0;
    font-size: clamp(18px, 15vw, 12rem);
    background: linear-gradient(90deg, #ffdee1 0%, #ffeed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1 !important;
}
.section .content-title strong{
    display: block;
    margin:0;
    padding:0;
    font-size: clamp(14px, 4vw, 3.5rem);
    line-height: 1 !important;
}
.studio-container .flex-section{
    /* 各コンテンツのフレックス部分 */
    display: flex;
    width:100%;
    justify-content: space-between;
    align-items: flex-start;
    gap:8%;
}
.studio-container .section .main-content{
    /* 各コンテンツのメイン枠となる部分 */
    font-size: 1.2rem;
    line-height: 2;
    margin:0 auto 3.5rem;
    text-align: center;
}
.studio-container .section .main-content .text-content{
    /* 各コンテンツのメイン枠の紹介文となる部分 */
    width:80%;
    margin:0 auto 3.5rem;
}
.studio-container .section .main-content .img-content{
    /* 各コンテンツのメイン枠の画像となる部分 */
}
.studio-container .section .main-content .img-content img{
    display: block ;
    border-radius:12px;
}
.studio-container  .img-content ul li .imagename{
    background:#fff;
    border-radius:50vmax;
    padding:4px 8px;
    font-size: clamp(11px, 0.9rem, 1.2rem);
    white-space: nowrap;
}
.studio-content .img-content{
    display: flex;
    gap: 15%;
    justify-content: center;
    padding:5%;
    background:url(../../images/studio/bg_dot.gif) #f9f9f9;
    margin-bottom:3.5rem;
}



@media (min-width: 600px) and (max-width: 1023px) {
  /* tablet styles */
    .studio-container section.section .flex-section{
        display: block;
    }
    .section .content-title h3{
        margin-bottom:1.2rem;
    }
    .section .content-title strong{
        margin-left:1.5rem;
    }
}
@media (max-width: 599px) {
  /* smartphone styles */

    article.studio-container .section .content-title{
        display: block;
    }
    .section .content-title h3{
        margin-bottom:1.2rem;
    }
    .section .content-title strong{
        margin-left:0.5rem;
    }
    .studio-container .section .main-content .text-content{
        /* 各コンテンツのメイン枠の紹介文となる部分 */
        width:92%;
        font-size: clamp(14px, 2vw, 2.5rem);
        text-align: left;
    }

}

/**/
.info-content{
    padding: 2.5rem 10%;
    background:#f9f9f9;
    box-sizing: border-box;
}
.info-content .content{
    width:40%;
}
.info-content .content h3{
    font-size: 2rem;
    line-height: 2;
}
.info-content .content .english{
    font-size: 1.2rem;
    line-height: 2;
}
.info-content .content .info-list{
    margin-top:2rem;
    margin-bottom:2rem;
}
.info-content .content dl.info-item{
    display: flex ;
    gap:1.8rem;
    margin:1rem 0;
    font-size: clamp(14px, 1.2vw, 1rem);
}
.info-content .content .info-item dt{
    min-width:4rem;
    font-weight: bold;
}
.info-content .content .info-item dd{

}
.info-content .content .toPage a{
    display: inline-block;
    background:#3fc71f;
    color: #fff;
    border-radius:50vmax;
    padding:1rem 1.5rem;
    text-decoration: none;
}
.info-content .content .toPage a:hover{
    background:#7fde5a;
}
.info-content .image-main{
    width:60%;
}

.info-content .image-sub{
    display: flex;
    justify-content: center;
    gap:1.5rem;
    width:100%;

}
.info-content .image-sub img{
    display: block ;
}


@media (min-width: 600px) and (max-width: 1023px) {
  /* tablet styles */
    .info-content .flex-section{
        display: block;
    }
    .info-content .content{
        width: 100%;
        margin-bottom: 2rem;
    }
    .info-content .image-main{
        width: 100%;
    }
}
@media (max-width: 599px) {
  /* smartphone styles */
    .info-content .flex-section{
        display: block;
    }
    .info-content .content{
        width: 100%;
        margin-bottom: 2rem;
    }
    .info-content .image-main{
        width: 100%;
    }
}



/**/
.paper-content{
}
.paper-content .img-content{
    display: flex;
    gap: 15%;
    justify-content: center;
    padding:5%;
    background:url(../../images/studio/bg_dot.gif) #f9f9f9;
    margin-bottom:3.5rem;
}
.paper-content .img-content .img-main{
    width:40%;
}
.paper-content .img-content .colors{
    width: 60%;
}
.paper-content .img-content .colors ul{
    margin-top: 0 !important;
}
.paper-content .img-content .colors ul li{
    margin-top: 0 !important;
}
.paper-content .img-content ul li img{
    display: block;
    box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.04);
}
.paper-content .img-content ul li .imagename{
    background:#fff;
    border-radius:50vmax;
    padding:4px 8px;
    font-size: 0.8rem;
}
.paper-content .samples{
    padding:0 5%;
}
.paper-content .samples ul{
    margin-top: 0 !important;
}
.paper-content .samples ul li{
    margin-top: 0 !important;
}
.paper-content .samples li{
    background: #f4f4f4;
    padding:0.8rem;
    box-sizing: border-box;
}
.paper-content .samples span{
    font-size: 0.87rem;
}

@media (min-width: 600px) and (max-width: 1023px) {
  /* tablet styles */
    .paper-content .img-content{
        display: block;
        padding: 15%;
    }
    .paper-content .img-content .img-main{
        width:100%;
        margin-bottom:2rem;
        text-align: center;
    }
    .paper-content .img-content .colors{
        width: 100%;
    }
}
@media (max-width: 599px) {
  /* smartphone styles */
    .paper-content .img-content{
        display: block;
        padding: 5%;
    }
    .paper-content .img-content .img-main{
        width:100%;
        margin-bottom:2rem;
        text-align: center;
    }
    .paper-content .img-content .colors{
        width: 100%;
    }
}

/**/
.office-content{

}
.office-content .main-content{
}
.office-content .img-content{
    width:100%;
    gap:5%;
}
.office-content .img-main{
    width:60%;
}
.office-content .img-samples{
    width:40%;
}
.office-content .img-samples ul{
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
    justify-content: center;
    width:100%;
}
.office-content .img-samples ul li{
    width:45%;
    box-sizing: border-box;
}
.office-content .img-samples ul li img{
    display: block;
    box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.04);
}

.office-content .img-samples ul li:nth-child(1){
    width:100%;
    margin-bottom:2rem;
}

.office-content .sub-content{
    display: flex;
    gap: 15%;
    justify-content: center;
    padding:5%;
    margin-bottom:3.5rem;
}
.office-content .sub-content h4{
    background: linear-gradient(90deg, rgba(68, 68, 68, 0) 0%, rgba(68, 68, 68, 0.95) 20%, rgba(68, 68, 68, 0.95) 80%, rgba(68, 68, 68, 0) 100%);
    color: #fff;
    text-align: center;
    margin-bottom:3rem;
    padding: 1rem 2rem;
    font-size: clamp(14px, 2vw, 2.5rem);
    white-space: nowrap;
}
.office-content .sub-content .guidance{
    margin-bottom:3rem;
    font-size: clamp(14px, 1.1vw, 1.2rem);
    line-height:2;
}
.office-content .sub-content ul{
    display: flex;
    justify-content: space-between;
    gap:3.5rem;
    margin-bottom:3rem;
}
.office-content .sub-content ul li{
    text-align: center;
}
.office-content .sub-content ul li img{
    display: block;
    margin-bottom:2rem;
    border-radius: 12px 2px 12px 2px;
}

.office-content .sub-content li .imagename{
    font-size: clamp(12px, 1.2vw, 1rem);
}
.office-content .sub-content .deskcolor{1
}
.office-content .sub-content .deskcolor li{
}
.office-content .sub-content .item{
}
.office-content .sub-content .item li{
}

.office-content .sub-content .whiteboard{
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    width:100%;
    align-items: center;
}
.office-content .sub-content .whiteboard li.main{
    flex: 0 0 52%;
}
.office-content .sub-content .whiteboard li.item{
    flex: 0 0 39%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 2.5rem;
    background: #fff5e6;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
}
.office-content .sub-content .whiteboard li.item img{
    width: 100%;
    margin-bottom: 1.5rem;
}
.office-content .sub-content .whiteboard li.item  p{
    font-size: 1rem;
    line-height: 1.8;
    text-align: center;
    margin: 0;
    padding: 0 1rem;
}

/* タブレット・スマホ対応 */
@media (min-width: 600px) and (max-width: 1023px) {
    /* tablet styles */
    .office-content .img-content{
        display: block;
    }
    .office-content .img-main{
        width: 100%;
        margin-bottom: 2rem;
    }
    .office-content .img-samples{
        width: 100%;
    }
    .office-content .sub-content ul.item{
        display: flex;
        flex-wrap: wrap;
        gap: 3%;
    }
    .office-content .sub-content ul.item li{
        width: 30%;
        margin-bottom: 2rem;
    }
    .office-content .sub-content .whiteboard{
        flex-direction: column;
        gap: 2rem;
    }
    .office-content .sub-content .whiteboard li.main{
        flex: none;
        width: 100%;
    }
    .office-content .sub-content .whiteboard li.item{
        flex: none;
        width: 100%;
        aspect-ratio: 1 / 1;
    }

}
@media (max-width: 599px) {
    /* smartphone styles */
    .office-content .img-content{
        display: block;
    }
    .office-content .img-main{
        width: 100%;
        margin-bottom: 2rem;
    }
    .office-content .img-samples{
        width: 100%;
    }


    .office-content .sub-content h4{
        background: linear-gradient(90deg, rgba(68, 68, 68, 0) 0%, rgba(68, 68, 68, 0.95) 10%, rgba(68, 68, 68, 0.95) 90%, rgba(68, 68, 68, 0) 100%);
    }

    .office-content .sub-content ul.deskcolor{
        display: block;
    }
    .office-content .sub-content ul.deskcolor li{
        width: 100%;
        margin-bottom: 2rem;
    }
    .office-content .sub-content ul.item{
        display: flex;
        flex-wrap: wrap;
        gap: 3%;
    }
    .office-content .sub-content ul.item li{
        width: 30%;
        margin-bottom: 2rem;
    }
    .office-content .sub-content .whiteboard{
        flex-direction: column;
        gap: 2rem;
    }
    .office-content .sub-content .whiteboard li.main{
        flex: none;
        width: 100%;
    }
    .office-content .sub-content .whiteboard li.item{
        flex: none;
        width: 100%;
        aspect-ratio: 1 / 1;
    }
}


/**/
.room-content{

}

.room-content .img-samples{
    display: flex;
    gap: 15%;
    justify-content: center;
    padding:5%;
    background:url(../../images/studio/bg_dot.gif) #f9f9f9;
    margin-bottom:3.5rem;
}
.room-content .img-content{
    display: block;
    padding:5%;
    background:url(../../images/studio/bg_dot.gif) #f9f9f9;
    margin-bottom:3.5rem;
}
.room-content .img-content  img{
    box-shadow: 2px 2px 4px 4px rgba(0,0,0,0.05);
}
.room-content .img-content .img-main{
    width:60%;
    margin:auto;
}
.room-content .img-content .img-samples ul{
    display: flex;
    gap: 5%;
    justify-content: center;
    width:100%;
}


/* タブレット・スマホ対応 */
@media (min-width: 600px) and (max-width: 1023px) {
    /* tablet styles */
    .room-content .img-content{
        display: block;
    }
    .room-content .img-content .img-main{
        width:100%;
        margin:auto;
    }

}
@media (max-width: 599px) {
    /* smartphone styles */
    .room-content .img-content .img-main{
        width:100%;
        margin:auto;
    }

}


/**/
.wall-content{

}
.wall-content .img-samples{
    display: flex;
    gap: 15%;
    justify-content: center;
    padding:5%;
    background:url(../../images/studio/bg_dot.gif) #f9f9f9;
    margin-bottom:3.5rem;
}
.wall-content .img-content{
    display: block;
    padding:5%;
    background:url(../../images/studio/bg_dot.gif) #f9f9f9;
    margin-bottom:3.5rem;
}
.wall-content .img-content  img{
    box-shadow: 2px 2px 4px 4px rgba(0,0,0,0.05);
}
.wall-content .img-content .img-main{
    width:60%;
    margin:auto;
}
.wall-content .img-content .img-samples ul{
    display: flex;
    gap: 5%;
    justify-content: center;
    width:100%;
}
.wall-content .img-samples{
}
.wall-content .guidance{
    font-size: clamp(14px, 3vw, 2rem);
    font-weight: bold;
}
.wall-content .guidance span{
    display: block;
    margin:2% 0;
    font-size: clamp(14px, 1.2vw, 1rem);
    font-weight: normal;
}

/* タブレット・スマホ対応 */
@media (min-width: 600px) and (max-width: 1023px) {
    article.studio-container .wall-content  .content-title{
        display: block;
    }
    .wall-content .content-title strong{
        font-size: clamp(14px, 4vw, 3.5rem);
    }

    /* tablet styles */
    .wall-content .img-content{
        display: block;
    }
    .wall-content .img-content .img-main{
        width:100%;
        margin:auto;
    }

    .wall-content .img-content .img-samples.panel ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .wall-content .img-content .img-samples.panel ul li{
    }
    .wall-content .img-content .img-samples.panel ul li .imagename{
        font-size: clamp(11px, 0.8vw, 0.8rem);
    }


}
@media (max-width: 599px) {
    /* smartphone styles */
    .wall-content .img-content .img-main{
        width:100%;
        margin:auto;
    }
    .wall-content .img-content .img-samples.panel ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .wall-content .img-content .img-samples.panel ul li{
    }
}



/**/
.officewall-content{

}
.officewall-content .content-title h3{
    margin:0;
    padding:0;
    font-size: clamp(16px, 12vw, 9rem);
    background: linear-gradient(90deg, #ffdee1 0%, #ffeed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1 !important;
}
.officewall-content .content-title strong{
    display: block;
    margin:0;
    padding:0;
    font-size: clamp(14px, 2vw, 3.5rem);
    line-height: 1 !important;
}

.officewall-content .img-samples{
    display: flex;
    gap: 15%;
    justify-content: center;
    padding:5%;
    background:url(../../images/studio/bg_dot.gif) #f9f9f9;
    margin-bottom:3.5rem;
}
.officewall-content .img-samples .imagename{
    font-size: clamp(11px, 0.8rem, 0.9rem);
}
.officewall-content .img-content{
    display: block;
    padding:5%;
    background:url(../../images/studio/bg_dot.gif) #f9f9f9;
    margin-bottom:3.5rem;
}
.officewall-content .img-content  img{
    box-shadow: 2px 2px 4px 4px rgba(0,0,0,0.05);
}
.officewall-content .img-content .img-main{
    width:60%;
    margin:auto;
}
.officewall-content .img-content .img-samples ul{
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
    justify-content: center;
    width:100%;
}
.officewall-content .img-content .img-samples ul li{
    width:30%;
    margin-bottom:2rem;
}
.officewall-content .img-samples{
}


.officewall-content .guidance{
    font-size: clamp(14px, 3vw, 2rem);
    font-weight: bold;
}
.officewall-content .guidance span{
    display: block;
    margin:2% 0;
    font-size: clamp(14px, 1.2vw, 1rem);
    font-weight: normal;
}
.officewall-content .img-samples ul li img{
    display: block;
    margin-bottom:1rem;
}
.officewall-content .img-samples ul li .imagename{
    background:#999;
    color: #fff;
    border-radius:50vmax;
    padding:4px 8px;
    font-size: clamp(11px, 1.2vw, 1rem);
    white-space: nowrap;
}
.officewall-content .img-samples.list ul li .imagename{
    background:none;
    color: #454554;
}



/* タブレット・スマホ対応 */
@media (min-width: 600px) and (max-width: 1023px) {
    article.studio-container .officewall-content  .content-title{
        display: block;
    }
    .officewall-content .content-title h3{
        margin-bottom:1.2rem;
    }
    .officewall-content .content-title strong{
        margin-left:1.5rem;
        font-size: clamp(14px, 4vw, 3.5rem);
    }
    /* tablet styles */
    .officewall-content .img-content{
        display: block;
    }
    .officewall-content .img-content .img-main{
        width:100%;
        margin:auto;
    }

    .officewall-content .img-content .img-samples{
        font-size: clamp(10px, 0.7rem, 0.8rem);
        color: red !important;
    }

}
@media (max-width: 599px) {
    /* smartphone styles */
    .officewall-content .img-content .img-main{
        width:100%;
        margin:auto;
    }
    .officewall-content .img-content{
        padding:3%;
    }
    .officewall-content .img-content .img-samples{
        font-size: clamp(10px, 0.7rem, 0.8rem);
        color: red !important;
    }

    .officewall-content .content-title h3{
        margin-bottom:1.2rem;
    }
    .officewall-content .content-title strong{
        margin-left:0.5rem;
        font-size: clamp(14px, 4vw, 3.5rem);
    }

    .officewall-content .img-samples ul li .imagename{
        font-size:0.7rem;
        white-space: nowrap;
    }
}
/**/
.items-content{

}