@charset "UTF-8";

/* 設定 */
:root {
    --scrollbar: 0;

    --prussianblue: #37395E;
    --steelblue: #608DB7;
    --lightblue: #92C7DE;
    --white: #ffffff;
    --bglightgray: #F7F7F7;
    --lightgray: #F5F5F5;
    --bluegray: #B9C7D2;
    --textcolor: #737F8B;
    --gold: #F0C350;
    --stronglinecolor: #FAD984;
    --linkhovercolor: #92C7DE;

    --entitlefont: playfair-display, serif;
    --jptitlefont: YakuHanMP,'Noto Serif JP','ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',serif;
    --textfont: YakuHanJP,'IBM Plex Sans JP','Noto Sans JP','Roboto','Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    --YHnukifont: 'IBM Plex Sans JP','Noto Sans JP','Roboto','Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;

    --footerfontsize: 0.875rem;
    --footerlineheight: 1.29;
    --footerblockbetween: 12px;
        
    --dropshadowsetting: 0 6px 10px rgba(185,199,210,.65);
    --dropshadowsetting2: 0 6px 10px rgba(117, 126, 133, 0.65);
}



/* 共通 */
.itemlabel {
    font-size: var(--footerfontsize);
    line-height: 1.43;
    margin-top: 10px;
}
.mklist li {
    list-style-type: disc;
}
.ml1rem {
    margin-left: 1rem;
}
.ml2rem {
    margin-left: 2rem;
}
.dropshadow {
    filter: drop-shadow(var(--dropshadowsetting));
}

/* 期間・使用ソフト */

.periodandsoft {
    line-height: 1.25;
    color: var(--steelblue);
}
.perioddl, .softdl {
    display: grid;
    grid-template-columns: 7rem auto;
    column-gap: 20px;
    row-gap: 0;
}
.softdl {
    margin-top: 20px;
}
.perioddl dt, .softdl dt {
    width: 100%;
    text-align: right;
    padding-bottom: 10px;
}
.perioddl dd, .softdl dd {
    width: 100%;
    padding-left: 20px;
    border-left: 4px solid var(--steelblue);
    padding-bottom: 10px;
}
.softdl dd {
    border-left: 4px solid var(--lightblue);
}
.pb10 {
    padding-bottom: 10px;
}
.perioddl dt:last-of-type, .softdl dt:last-of-type, .perioddl dd:last-of-type, .softdl dd:last-of-type {
    padding-bottom: 0;
}


/* 店舗情報 */
.storeinfo {
    width: 100%;
    border: 2px solid var(--bluegray);
    padding: 30px;
}
.storeinfo dl {
    display: grid;
    grid-template-columns: 5rem auto;
    column-gap: 20px;
    row-gap: 0;
    font-size: var(--footerfontsize);
    line-height: 1.5;
}
.storeinfo dl dt {
    width: 100%;
    text-align: right;
    padding-bottom: 10px;
}
.storeinfo dl dd {
    width: 100%;
    padding-bottom: 10px;
    padding-left: 20px;
    border-left: 1px dashed var(--bluegray);
    letter-spacing: 0.2px;
}
.storeinfo dl dt:last-of-type, .storeinfo dl dd:last-of-type {
    padding-bottom: 0;
} 


.storeinfo-kaisetu {
    width: 100%;
    border: 2px solid var(--bluegray);
    padding: 30px;
}
.storeinfo-kaisetu dl {
    display: grid;
    grid-template-columns: 5rem auto;
    column-gap: 20px;
    row-gap: 0;
    font-size: var(--footerfontsize);
    line-height: 1.5;
}
.storeinfo-kaisetu dl dt {
    width: 100%;
    text-align: right;
    padding-bottom: 30px;
}
.storeinfo-kaisetu dl dd {
    width: 100%;
    padding-bottom: 30px;
    padding-left: 20px;
    border-left: 1px dashed var(--bluegray);
    letter-spacing: 0.2px;
}
.storeinfo-kaisetu dl dt:last-of-type, .storeinfo-kaisetu dl dd:last-of-type {
    padding-bottom: 0;
} 
.storeinfo-kaisetu dl dd ul li {
    padding-bottom: 10px;
}
.storeinfo-kaisetu dl dd ol li {
    list-style-type: decimal;
    padding-bottom: 6px;
} 
.storeinfo-kaisetu dl dd ol li:last-child {
    padding-bottom: 0;
}
.storeinfo-kaisetu dl dd ol {
    margin-left: calc( 20px + 1rem);
}

/* 作品間の前後ナビ */
.workvav {
    width: 100%;
    height: 140px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.prenav, .nextnav {
    width: 150px;
    height: 20px;
    display: flex;
    justify-items: flex-start;
    align-items: center;
}
.nextnav {
    justify-content: flex-end;
}
.prenav svg, .nextnav svg {
    display: inline-block;
    padding-top: 2px;
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.prenav a, .nextnav a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 20px;
    font-weight: 400;
}
.prenav a {
    color: var(--lightblue);
}
.nextnav a {
    color: var(--steelblue);
    text-align: right;
}
.prenav a:hover, .nextnav a:hover {
    color: var(--gold);
} 


/* index.html
----------------------------- */
.index-topsect {
    padding-top: 60px;
    width: 100%;
    height: calc( 100vh - 80px );
    position: relative;
    margin-bottom: 90px;
}
.index-topsect div.wrapper {
    z-index: 3;
}
.index-topsect p {
    width: 80%;
    margin-inline: auto;
    margin-top: 90px;
}
.index-topsect ul {
    width: 80%;
    margin-inline: auto;
    margin-top: 90px;
}
.index-topsect p:last-child {
    margin-top: 40px;
}
.index-topsect img {
    display: block;
    max-height: 65%;
    aspect-ratio: 987 / 574;
    position: absolute;
    right: 0;
    bottom: 10px;
    z-index: 2;
    mix-blend-mode: multiply;
}
/* intro section  */
.historywrapper {
    width: calc( 100% - 30px );
    padding: 4px;
    background: linear-gradient(138.58deg, #F7F7F7 0%, #92C7DE 49.5%, #F7F7F7 100%);
    margin-bottom: 18px;
}
.historycontainer {
    width: 100%;
    height: 100%;
    background-color: var(--white);
    padding: 30px;
    padding-bottom: 67px;
    position: relative;
}
.historycontainer h3 {
    font-family: var(--jptitlefont);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.17;
    color: var(--lightblue);
}
.historydl {
    display: grid;
    grid-template-columns: 6rem auto;
    column-gap: 15px;
    row-gap: 10px;
    line-height: 1.25;
    margin-top: 20px;
}
.historycontainer p {
    margin-top: 20px;
}
#intro .twoframe {
    position: relative;
}
.historycat {
    display: block;
    width: 178px;
    height: 107px;
    position: absolute;
    right: 0;
    bottom: 0;
}
.pb-100 {
    padding-bottom: 200px;
}

/* family section  */
#familyphoto {
    width: 100%;
    margin-top: -30px;
}

/* selfPR section  */
#threecicles {
    display: block;
    width: 90%;
    margin-inline: auto;
}
h3.prtitle {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.0;
    margin-bottom: 20px;
}
.color-prblue {
    color: var(--prussianblue);
}
.color-stblue {
    color: var(--steelblue);
}
.color-liblue {
    color: var(--lightblue);
}

/* skillrate section  */
h3.ratingtitle {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.0;
    margin-bottom: 20px;
    margin-top: 80px;
    color: var(--steelblue);
}
h4.officetitle {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 20px;
    margin-top: 40px;
    margin-left: 15px;
    color: var(--lightblue);
}
.threecolumn {
    display: flex;
    justify-content: space-between;
}
.threeframe {
    width: calc( ( 100% - 80px ) / 3 );
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    padding-right: 15px;
    border: solid 1px var(--steelblue);
}
.threeframe p {
    color: var(--steelblue);
    font-size: 14px;
}
p.comu {
    font-size: 12px;
    letter-spacing: -10%;
}
p.rate1, p.rate2, p.rate3, p.rate4, p.rate5 {
    width: 145px;
    height: 24px;
    object-fit: contain;
}
p.rate5 {
    background-image: url(../images/rating5.svg);
}
p.rate4 {
    background-image: url(../images/rating4.svg);
}
p.rate3 {
    background-image: url(../images/rating3.svg);
}
p.rate2 {
    background-image: url(../images/rating2.svg);
}
p.rate1 {
    background-image: url(../images/rating1.svg);
}

.ratingaddtext {
    color: var(--lightblue);
    width: 60%;
    margin-top: 90px;
}

/* 白抜き猫2匹ゾーン */
div.whitecat2 {
    width: 100%;
    height: 330px;
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7F7F7 70%);
    margin-top: -150px;
    mix-blend-mode: multiply;
}
div.bigcatwhite{
    width: 100%;
    height: 330px;
    position: absolute;
    right: 0;
    bottom: 0;
    background-image: url(../images/btmcut-whitecat01.svg);
    background-size: 550px 314px;
    background-repeat: no-repeat;
    background-position: right 15px bottom -2px;
}
div.minicatwhite {
    width: 100%;
    height: 330px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: url(../images/btmcut-smallcat01.svg);
    background-size: 209px 122.4px;
    background-repeat: no-repeat;
    background-position: left 123px bottom -2px;
}

/* 作品集section  */
#gallery h2 {
    font-family: var(--jptitlefont);
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--prussianblue);
    text-align: center;
    line-height: 1.11;
    margin-bottom: 60px;
}
.cardcontainer {
    width: 100%;
    display: grid;
    column-gap: 40px;
    row-gap: 70px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 60px;
}
.gallerycard {
    width: 100%;
    background-color: var(--lightgray);
    border: 0.5px solid var(--bluegray);
    box-shadow: 2px 2px 4px rgba(185, 199, 210, 0.5);
}
.gallerycard p {
    height: 60px;
}
.cardtitle {
    display: block;
    width: 100%;
    height: 60px;
    font-size: 0.875rem;
    line-height: 1.43;
    padding: 10px;
}
.cardpicture {
    width: 100%;
    aspect-ratio: 3 / 2;
    background: linear-gradient(180deg, #608DB7 0%, #436280 100%);
}
.cardpicture img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    filter: sepia(100%) hue-rotate(180deg) brightness(90%) saturate(80%);
}
.gallerycard:hover .cardpicture img {
    filter: sepia(0%) hue-rotate(0deg) brightness(100%) saturate(100%);
    transition: 0.1s;
}
.gallerycard:hover .cardpicture {
    /* filter: brightness(120%); */
    background: linear-gradient(180deg, #D9C07E 0%, #D69C06 100%);
    transition: 0.1s;
}
.gallerycard:hover {
    color: var(--gold);
    background-color: var(--stronglinecolor);
    border: 1px solid var(--gold);
    transition: 0.1s;
}
.gallerycard:hover a {
    color: var(--white);
    transition: 0.1s;
}

    /* 作品集のカードアニメ */
    .box {
        opacity: 0;
    }
    .fadeUp {
        animation-name: fadeUpAnime;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        opacity: 0;
    }
    @keyframes fadeUpAnime{
        from {
            opacity: 0;
            transform: translateY(100px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }


/* ブルーグレー猫2匹ゾーン */
div.graycat2 {
    width: 100%;
    height: 330px;
    position: relative;
    margin-top: -120px;
}
div.bigcatgray{
    width: 100%;
    height: 330px;
    position: absolute;
    right: 0;
    bottom: 0;
    background-image: url(../images/btmcut-biggraycat01.svg);
    background-size: 550px 314px;
    background-repeat: no-repeat;
    background-position: right 15px bottom -5px;
}
div.minicatgray {
    width: 100%;
    height: 330px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: url(../images/btmcut-smallgraycat01.svg);
    background-size: 209px 122.4px;
    background-repeat: no-repeat;
    background-position: left 123px bottom -3px;
}

/* motto section  */
#mottopict {
        width: 100%;
        margin-top: 10px;    
}

/* 終わりに section  */
#shakehands {
    width: 100%;
    margin-top: 0px;    
}

/* thunks section  */
#thunks {
    background-color: var(--bglightgray);
    padding-top: 160px;
    padding-bottom: 160px;
}
.thunktext {
    width: 80%;
    margin-inline: auto;
}
#mailbig {
    text-align: center;
    font-family: var(--jptitlefont);
    font-size: 1.875rem;
    font-weight: 400;
    color: var(--steelblue);
    margin-top: 80px;
}
#thunkscat {
    width: 262px;
    height: 178px;
}
#catcontainer {
    width: 100%;
    text-align: right;
    margin-top: 50px;
}





/* ----------------------------- 
    01saitouhp.html
----------------------------- */
.topitemwrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}

.fa-clone {
    font-size: 14px;
}

div#saitouscreenshot01 {
    width: 72%;
}
div#saitouscreenshot01 img {
    width: 100%;
    border-radius: 10px;
    filter: drop-shadow(var(--dropshadowsetting));
}
div#saitouscreenshot01:hover img {
    filter: drop-shadow(0 6px 10px var(--lightblue));
}
div#saitouscreenshot01 p {
    text-align: right;
}
div#saitouscreenshot01 p i {
    display: inline-block;
    padding-left: 10px;
}

/* needsandcolor section  */
/* section#needsandcolor {
    padding-top: 100px;
} */

div#saitoucolorset {
    display: grid;
    grid-template-columns: repeat(5, 50px);
    column-gap: 15px;
}
div#saitoucolorset div {
    width: 50px;
    height: 50px;
    border: 1px solid var(--textcolor);
}
#saitoucolor1 {
    background-color: #6F443F;
}
#saitoucolor2 {
    background-color: #CC633D;
}
#saitoucolor3 {
    background-color: #56B6BF;
}
#saitoucolor4 {
    background-color: #FFFFFF;
}
#saitoucolor5 {
    background-color: #FAEFE0;
}

/* designcompsection  */
img#saitoucomppng {
    display: block;
    width: 100%;
}
#saitoukeyviual {
    width: 65%;
    margin-inline: auto;
}
#saitoukeyviual img {
    width: 100%;
}
img#saitouicons {
    display: block;
    width: 60%;
    /* margin-inline: auto; */
}

/* logoandother section  */
div#logoscontainer img {
    display: block;
    width: 100%;
}
div#logoscontainer p.itemlabel {
    text-align: right;
}
div#logoscontainer img#saitoulogo {
    width: 65%;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
}


/* achievements section */
img#dreamcatcherbg {
    width: 100%;
    mix-blend-mode: multiply;
    margin-top: -50px;
    opacity: 0.4;
    filter: brightness(120%) saturate(80%);
}



/* ----------------------------- 
    02logo.html
----------------------------- */
img#chambrercolorlogo {
    display: block;
    width: 70%;
}
img#chambrermono01 {
    display: block;
    width: 80%;
}
div#chambrermono02 {
    width: 80%;
    padding: 20px 10px;
    background-color: #353A40;
}
div#chambrermono02 img {
    width: 100%;
}
img#bbcolorlogo {
    display: block;
    width: 68%;
}
img#bbmono01 {
    display: block;
    width: 80%;
    margin-left: 20%;
}
div#bbmono02 {
    width: 80%;
    padding: 20px 10px;
    background-color: #353A40;
    margin-left: 20%;
}
/* progress seition */
img#logos5w1h {
    display: block;
    width: 100%;
}


/* ----------------------------- 
    03clipsozai.html
----------------------------- */
div#sozaibushscreen {
    width: 62%;
}
div#sozaibushscreen img {
    width: 100%;
    border-radius: 10px;
    border: 0.5px solid var(--bluegray);
    filter: drop-shadow(var(--dropshadowsetting));
}
div#sozaiwrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.sozaicontainer {
    width: calc( 50% - 20px );
}
.sozaicontainer img {
    display: block;
    width: 100%;
    border-radius: 5px;
    border: 0.5px solid var(--bluegray);
    filter: drop-shadow(var(--dropshadowsetting));
}

table#dlcount {
    width: 90%;
    margin-inline: auto;
    color: var(--steelblue);
    font-weight: 700;
    text-align: right;
}
table#dlcount td.tal {
    text-align: left;
}

#sozaiingenuity img {
    display: block;
    width: 100%;
}
img#sozaithumb {
    margin-top: -70px;
}
#sozaiingenuity .itemlabel {
    text-align: right;
}
img#tutrialscreen {
    border-radius: 5px;
    border: 0.5px solid var(--bluegray);
    filter: drop-shadow(var(--dropshadowsetting));
}

#toukei img {
    display: block;
    width: 100%;
}
img#bushenscreen {
    border-radius: 5px;
    border: 0.5px solid var(--bluegray);
    filter: drop-shadow(var(--dropshadowsetting));
}

#sozaimarketting img {
    display: block;
    width: 100%;
}
img#lank1st {
    margin-top: -100px;
}

/* ----------------------------- 
    04kurumarucomp.html
----------------------------- */
div#mocpccontainer {
    width: 65%;
    display: flex;
    align-items: flex-end;
}
div#mocpccontainer img {
    display: block;
    width: 100%;
}
div#mocphonecontainer {
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
div#pandsoftcontainer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
img#mocphone {
    display: block;
    width: 50%;
    margin-inline: auto;
}
img#kurumaruwireframe {
    display: block;
    width: 100%;
    border-radius: 5px;
    filter: drop-shadow(var(--dropshadowsetting));
    border: 0.5px solid var(--steelblue);
}
.kurumaruthreecolumn {
    display: flex;
    justify-content: space-between;
}
.kurumaruthreeframe img {
    display: block;
    width: 100%;
}
.kurumaruthreeframe {
    display: flex;
    flex-direction: column;
    width: calc( ( 100% -  ( 60px * 2 ) ) / 3 );
}

#phonecompwrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.phonecompcontainer {
    width: calc( 50% - 30px );
}
.kurumaruthreeframe p.itemlabel {
    margin-top: 0;
    margin-bottom: 10px;
    height: calc( var(--footerfontsize) * 1.43 * 2);
}
p#kurumarucompkaisetu {
    width: calc( 50% - 20px );
}

img#kurumarutopimage {
    display: block;
    width: 100%;
    filter: drop-shadow(var(--dropshadowsetting));
}

img#kurumarulogo {
    display: block;
    width: 65%;
    margin-inline: auto;
}
#kurumaruprogress .itemlabel {
    text-align: center;
}

/* ----------------------------- 
    05psphotos.html
----------------------------- */

/* beforeafter画像表示枠 */
.topbaimagescontainer, .baimagescontainer {
    display: flex;
    padding: 0;
}
.baimagescontainer {
    flex-direction: column;
    width: 100%;
}
.leftbacontainer, .rightbacontainer {
    position: relative;
    width: 100%;
}
.leftbacontainer img, .rightbacontainer img {
    display: block;
    width: 100%;
}
.leftbacontainer::before {
    content: "Before";
    display: block;
    width: 120px;
    height: 47px;
    padding-top: 16px;
    padding-left: 25px;
    font-size: 16px;
    font-family: var(--textfont);
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: 0.3px;
    color: var(--white);
    background-image: url(../images/bookdarts-before.svg);
    background-size: 100% 100%; 
    position: absolute;
    z-index: 2;
    top: 10px;
    left: -3px;
}
.rightbacontainer::before {
    content: "After";
    display: block;
    width: 120px;
    height: 47px;
    padding-top: 15px;
    padding-right: 26px;
    text-align: right;
    font-size: 16px;
    font-family: var(--textfont);
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: 0.3px;
    color: var(--white);
    background-image: url(../images/bookdarts-after.svg);
    background-size: 100% 100%; 
    position: absolute;
    z-index: 2;
    top: 10px;
    right: -3px;
}

/* 各画像のサイズ指定 */
div#saitoubeforeafter {
    width: 70%;
}
#saitoubeforeafter .leftbacontainer, #saitoubeforeafter .rightbacontainer {
    width: 50%;
    aspect-ratio: 3 / 4;
}
#flowerbombeforeafter {
    width: 100%;
}


#kakoueyecatch .periodandsoft {
    margin-left: -2rem;
}
#tegakilogoframe img {
    display: block;
    width: 43%;
    margin-inline: auto;
}
#tegakilogoframe .itemlabel {
    text-align: center;
}

#calmillust01 img{
    display: block;
    width: 60%;
    margin-inline: auto;
}
#calmillust01 .itemlabel {
    text-align: center;
}
div#calmiconframe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}
/* #calmicon01,#calmicon02 {

} */
#calmiconlabel {
    text-align: center;
    margin-top: 20px;
}



/* ----------------------------- 
    06coding.html
----------------------------- */
/* section.codingtopsection {
    padding-bottom: 200px;
}

div#coding4container {
    width: 100%;
    display: grid;
    column-gap: 10px;
    grid-template-columns: repeat(4, 1fr);
}
div.coding4frame {
    width: 100%;
}

div.coding4frame .coding4title {
    font-size: 0.75rem;
    line-height: 2.0;
    text-align: center;
}

div.coding4frame .periodandsoft {
    width: calc( 6rem + 50px );
    margin-inline: auto;
    margin-top: 35px;
}
div.coding4frame .perioddl {
    grid-template-columns: 4rem calc( 2rem + 20px );
}

div.coding4frame img {
    display: block;
    width: 100%;
    border-radius: 5px;
    border: 0.5px solid var(--bluegray);
    filter: drop-shadow(var(--dropshadowsetting));
    margin-top: 20px;
}

p#codingaddtext {
    width: 43%;
    margin-top: -50px;
} */


/* ----------------------------- 
    06portfolio.html
----------------------------- */
div#pfindexscreen {
    width: 72%;
}
div#pfindexscreen img {
    width: 100%;
    border-radius: 10px;
    filter: drop-shadow(var(--dropshadowsetting));
}
#pffigmalink {
    font-family: var(--jptitlefont);
    font-size: 1.25rem;
}
#pffigmalink a {
    color: var(--steelblue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: none;
}
#pffigmalink a:hover {
    color: var(--gold);
}
#pffigmalink p i {
    display: inline-block;
    padding-left: 10px;
}
img#pfcompimage {
    display: block;
    width: 100%;
    filter: drop-shadow(var(--dropshadowsetting));
}

img#pfwireframe {
    display: block;
    width: 100%;
    border-radius: 5px;
    filter: drop-shadow(var(--dropshadowsetting));
    border: 0.5px solid var(--steelblue);
    opacity: 0.75;
}

/* カラースキーム部分　 */
div#pfcolorset {
    display: grid;
    grid-template-columns: repeat(7, 50px);
    gap: 15px;
}
div#pfcolorset div {
    width: 50px;
    height: 50px;
    border: 1px solid var(--textcolor);
}
#pfcolor1 {
    background-color: var(--prussianblue);
}
#pfcolor2 {
    background-color: var(--steelblue);
}
#pfcolor3 {
    background-color: var(--lightblue);
}
#pfcolor4 {
    background-color: var(--white);
}
#pfcolor5 {
    background-color: var(--bglightgray);
}
#pfcolor6 {
    background-color: var(--textcolor);
}
#pfcolor7 {
    background-color: var(--gold);
}

img#pfcssscreen {
    display: block;
    width: 100%;
    filter: drop-shadow(var(--dropshadowsetting2));
    margin-top: -90px;
}
img#pflogoblue {
    display: block;
    width: 92%;
    aspect-ratio: 439 / 338 ;
    margin-inline: auto;
    filter: drop-shadow(var(--dropshadowsetting2));
}
img#pfteatime {
    display: block;
    width: 100%;
    opacity: 0.5;
    filter: saturate(50%);
    margin-top: 60px;
}






/* --------------------------------------------------- 
        タブレット対応
------------------------------------------------------*/
@media (min-width: 701px) and (max-width: 1030px) {
/* 共通 */

/* index.html
----------------------------- */
.index-topsect p {
    width: 80%;
}
.index-topsect ul {
    width: 80%;
}
.index-topsect img {
    height: auto;
    max-width: 80%;
    mix-blend-mode: multiply;
}

/* intro section  */
.historydl {
    grid-template-columns: 6rem auto;
    column-gap: 15px;
    row-gap: 10px;
}
.historycat {
    bottom: -15px;
}

/* skillrate section  */
.threecolumn {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.threeframe {
    width: 100%;
}

/* 白抜き猫2匹ゾーン */
div.whitecat2 {
    height: 180px;
    margin-top: -100px;
}
div.bigcatwhite{
    height: 130px;
    background-size: 209px 122.4px;
}
div.minicatwhite { 
    display: none;
}
    
/* 作品集section  */
#gallery h2 {
    font-size: 1.25rem;
}
.cardcontainer {
    column-gap: 40px;
    row-gap: 70px;
    grid-template-columns: repeat(2, 1fr);
}

/* ブルーグレー猫2匹ゾーン */
div.graycat2 {
    height: 180px;
    margin-top: -30px;
}
div.bigcatgray{
    height: 130px;
    background-size: 209px 122.4px;
}
div.minicatgray {
    display: none;
}

/* thunks section  */
#thunks {
    padding-top: 100px;
    padding-bottom: 100px;
}
.thunktext {
    width: 100%;
}
#mailbig {
    font-size: 1.25rem;
    margin-top: 50px;
}
#thunkscat {
    width: calc( 262px * 0.6 );
    height: calc( 178px * 0.6 );
}
#catcontainer {
    text-align: right;
    margin-top: 50px;
    padding-right: 5%;
}

/* 
    01saitouhp.html
----------------------------- */
.topitemwrapper {
    display: block;
}
div#saitouscreenshot01 {
    width: 100%;
    margin-top: 30px;
}
/* designcompsection  */
#saitoukeyviual {
    width: 80%;
}
img#saitouicons {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
img#dreamcatcherbg {
    display: none;
}

/*
    02logo.html
----------------------------- */
img#chambrercolorlogo {
    width: 100%;
    margin-top: 60px;
}
img#chambrermono01 {
    width: 100%;
}
div#chambrermono02 {
    width: 100%;
}
img#bbcolorlogo {
    width: 100%;
    margin-top: 60px;
}
img#bbmono01 {
    display: block;
    width: 100%;
    margin-left: 0;
}
div#bbmono02 {
    width: 100%;
    margin-left: 0;
}

/* 
    03clipsozai.html
----------------------------- */
div#sozaibushscreen {
    width: 100%;
    margin-top: 30px;
}
div#sozaiwrapper {
    display: block;
    margin-top: 30px;
}
.sozaicontainer {
    width: 100%;
    margin-top: 30px;
}
.sozaicontainer:first-child {
    margin-top: 0;
}
img#sozaithumb {
    margin-top: -50px;
    mix-blend-mode: multiply;
}
img#lank1st {
    margin-top: 0px;
}

/*
    04kurumarucomp.html
----------------------------- */
div#mocpccontainer {
    width: 100%;
    display: block;
    margin-top: 60px;
}

div#mocphonecontainer {
    width: 100%;
    display: block;
}
div#mocphonecontainer img {
    margin-top: 30px;  
}
div#pandsoftcontainer {
    display: block;
}
img#mocphone {
    width: 80%;
}

.kurumaruthreecolumn {
    display: block;
}
.kurumaruthreeframe {
    display: block;
    width: 100%;
    margin-top: 60px;
}
.kurumaruthreeframe:first-child {
    margin-top: 0;
}
p#kurumarucompkaisetu {
    width: 100%;
    margin-top: 60px;
}

/* 
    05psphotos.html
----------------------------- */
/* beforeafter画像表示枠 */
.topbaimagescontainer {
    display: block;
}
/* 各画像のサイズ指定 */
div#saitoubeforeafter {
    width: 100%;
    margin-top: 30px;
}
#saitoubeforeafter .leftbacontainer, #saitoubeforeafter .rightbacontainer {
    width: 100%;
}

#kakoueyecatch .periodandsoft {
    margin-left: auto;
}
#tegakilogoframe img {
    width: 60%;
}
#irisillust {
    margin-top: 30px;
}

/* 
    06portfolio.html
----------------------------- */
div#pfindexscreen {
    width: 100%;
    margin-top: 30px;
}

/* カラースキーム部分　 */
div#pfcolorset {
    grid-template-columns: repeat(7, 50px);
}

img#pfcssscreen {
    margin-top: 30px;
}
    







}


/* --------------------------------------------------- 
        スマートフォン対応
------------------------------------------------------*/
@media (max-width: 700px) {

/* 共通 */
.itemlabel {
text-align: right;
}

/* 期間・使用ソフト */
.periodandsoft {
/* margin-inline: auto; */
/* margin-top: 30px; */
margin-bottom: 30px;
}
/* 作品間の前後ナビ */
.workvav {
    height: 80px;
}

/* index.html
----------------------------- */
.index-topsect p {
    width: 100%;
}
.index-topsect ul {
    width: 100%;
}
.index-topsect img {
    height: auto;
    max-width: 100%;
    aspect-ratio: 987 / 574;
    position: absolute;
    right: 0;
    bottom: 10px;
    z-index: 2;
    mix-blend-mode: multiply;
}

/* intro section  */
.historydl {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    column-gap: 15px;
    row-gap: 5px;
    line-height: 1.25;
    margin-top: 20px;
}
.historycat {
    bottom: -15px;
}
.historydl dt {
    margin-top: 15px;
}

/* skillrate section  */
h3.ratingtitle {
    font-size: 1rem;
    margin-bottom: 20px;
    margin-top: 60px;
}
h4.officetitle {
    font-size: 1rem;
    margin-bottom: 10px;
    margin-top: 20px;
    margin-left: 15px;
}
.threecolumn {
    display: block;
}
.threeframe {
    width: 100%;
    margin-bottom: 10px;
}
.threeframe:last-child {
    margin-bottom: 0;
}

/* 白抜き猫2匹ゾーン */
div.whitecat2 {
    height: 180px;
    margin-top: -100px;
}
div.bigcatwhite{
    height: 130px;
    background-size: 209px 122.4px;
}
div.minicatwhite { 
    display: none;
}
    
/* 作品集section  */
#gallery h2 {
    font-size: 1.25rem;
}
.cardcontainer {
    row-gap: 30px;
    grid-template-columns: repeat(1, 100%);
}

/* ブルーグレー猫2匹ゾーン */
div.graycat2 {
    height: 180px;
    margin-top: -30px;
}
div.bigcatgray{
    height: 130px;
    background-size: 209px 122.4px;
}
div.minicatgray {
    display: none;
}

/* thunks section  */
#thunks {
    padding-top: 100px;
    padding-bottom: 100px;
}
.thunktext {
    width: 100%;
}
#mailbig {
    font-size: 1.25rem;
    margin-top: 50px;
}
#thunkscat {
    width: calc( 262px * 0.6 );
    height: calc( 178px * 0.6 );
}
#catcontainer {
    text-align: right;
    margin-top: 50px;
    padding-right: 5%;
}

/* 
    01saitouhp.html
----------------------------- */
.topitemwrapper {
    display: block;
}
div#saitouscreenshot01 {
    width: 100%;
}
/* designcompsection  */
#saitoukeyviual {
    width: 100%;
}
img#saitouicons {
    width: 100%;
    /* margin-inline: auto; */
    margin-left: 0;
}
img#dreamcatcherbg {
    display: none;
}

/*
    02logo.html
----------------------------- */
img#chambrercolorlogo {
    width: 100%;
}
img#chambrermono01 {
    width: 100%;
}
div#chambrermono02 {
    width: 100%;
}
img#bbcolorlogo {
    width: 100%;
}
img#bbmono01 {
    display: block;
    width: 100%;
    margin-left: 0;
}
div#bbmono02 {
    width: 100%;
    margin-left: 0;
}

/* 
    03clipsozai.html
----------------------------- */
div#sozaibushscreen {
    width: 100%;
}
div#sozaiwrapper {
    display: block;
    margin-top: 30px;
}
.sozaicontainer {
    width: 100%;
    margin-top: 30px;
}
.sozaicontainer:first-child {
    margin-top: 0;
}
img#sozaithumb {
    margin-top: -50px;
    mix-blend-mode: multiply;
}
img#lank1st {
    margin-top: 0px;
}

/*
    04kurumarucomp.html
----------------------------- */
div#mocpccontainer {
    width: 100%;
    display: block;
    margin-top: 60px;
}

div#mocphonecontainer {
    width: 100%;
    display: block;
}
div#pandsoftcontainer {
    display: block;
}
img#mocphone {
    width: 80%;
}

.kurumaruthreecolumn {
    display: block;
}
.kurumaruthreeframe {
    display: block;
    width: 100%;
    margin-top: 60px;
}
.kurumaruthreeframe:first-child {
    margin-top: 0;
}
p#kurumarucompkaisetu {
    width: 100%;
    margin-top: 60px;
}

/* 
    05psphotos.html
----------------------------- */
/* beforeafter画像表示枠 */
.topbaimagescontainer {
    display: block;
}
/* 各画像のサイズ指定 */
div#saitoubeforeafter {
    width: 100%;
}
#saitoubeforeafter .leftbacontainer, #saitoubeforeafter .rightbacontainer {
    width: 100%;
}

#kakoueyecatch .periodandsoft {
    margin-left: auto;
}
#tegakilogoframe img {
    width: 60%;
}

div#calmiconframe {
    grid-template-columns: 1fr;
}

/* 
    06portfolio.html
----------------------------- */
div#pfindexscreen {
    width: 100%;
}

/* カラースキーム部分　 */
div#pfcolorset {
    grid-template-columns: repeat(4, 50px);
}

img#pfcssscreen {
    margin-top: 30px;
}
    
    }