@charset "UTF-8";
@import url('//fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap');
img {
    max-width: 100%;
    height: auto;
}

.header {
    background-color: rgb(0, 0, 0);
    top: 0;
    width: 100%;
    height: 60px;
    position: fixed;
    z-index: 5;
}


/*固定タグ*/

.active {
    /* HOME ABOUT CONTACT STORE LOGO*/
    /*横並びにする*/
    list-style: none;
    /*liタグ特有の●を消す*/
    text-transform: uppercase/*文字を大文字に*/
    ;
    display: flex;
    /*floatではなく横に並べるｃｓｓdisplay:flex;*/
}

.active li:hover a {
    /* home work vision contact*/
    color: rgb(126, 126, 126);
}

.komekome {
    display: flex;
}

.logo {
    margin-top: 8px;
    margin-right: 550px;
    width: 114px;
    height: 46px;
    transition: all 0.2s/*0.2ｓかけて変化させる*/
    ;
}

.logo:hover {
    transform: scale(1.2, 1.2)/*0.2ｓかけて変化させる*/
    ;
}

.home {
    font-size: 16px;
    color: rgb(255, 255, 255);
    transition: all 0.2s/*0.2ｓかけて変化させる*/
    ;
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: 18px;
    margin-left: 40px;
    display: inline-block;
}

.home:hover {
    font-size: 17px;
    transform: scale(1.2, 1.2)/*0.2ｓかけて変化させる*/
    ;
}

.about {
    font-size: 16px;
    color: rgb(255, 255, 255);
    transition: all 0.2s/*0.2ｓかけて変化させる*/
    ;
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: 18px;
    margin-left: 40px;
    display: inline-block;
}

.about:hover {
    font-size: 17px;
    transform: scale(1.2, 1.2)/*0.2ｓかけて変化させる*/
    ;
}

.contact {
    font-size: 16px;
    color: rgb(255, 255, 255);
    transition: all 0.2s/*0.2ｓかけて変化させる*/
    ;
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: 18px;
    margin-left: 40px;
    display: inline-block;
}

.contact:hover {
    font-size: 17px;
    transform: scale(1.2, 1.2)/*0.2ｓかけて変化させる*/
    ;
}

.store {
    font-size: 16px;
    color: rgb(255, 255, 255);
    transition: all 0.2s/*0.2ｓかけて変化させる*/
    ;
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: 18px;
    margin-left: 40px;
    display: inline-block;
}

.store:hover {
    font-size: 17px;
    transform: scale(1.2, 1.2)/*0.2ｓかけて変化させる*/
    ;
}

.icon::before
/*インスタグラムアイコン*/

{
    content: '\f16d';
    font-family: 'Font Awesome 5 Brands';
    display: inline-block;
    color: rgb(255, 255, 255);
    font-size: 20px;
    transition: all 0.2s/*0.2ｓかけて変化させる*/
    ;
    margin-top: 14.5px;
    margin-left: 45px;
}

.icon:hover::before {
    /*インスタグラムアイコンの動き*/
    color: rgb(126, 126, 126);
    font-size: 21px;
    transform: scale(1.2, 1.2)/*0.2ｓかけて変化させる*/
    ;
}


/*contactのページ*/

.conta {
    color: rgb(155, 155, 155);
    margin-top: 300px;
}

.concon {
    color: rgb(0, 0, 0);
    padding: 80px;
}


/*biographyのページ*/

.biography {
    width: 100%;
    max-width: 100%;
    height: auto
}

.profiel p {
    margin-top: 10px;
    text-align: center;
    font-size: 20px;
    color: rgb(102, 102, 102);
    line-height: 1.3em;
    display: inline-block;
}


/*biographyのページ*/


/*.back {
    background-image: url("<?php echo get_template_directory_uri(); ?>/imges/yone900-462.png");
    background-size: cover;
    /*auto	自動算出します。基本は元画像の大きさそのままです。
    contain	元画像の縦横比は保持して、要素に元画像が全て収まるように調整してくれます。
    cover	元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。
    数値(px)	明示的にpxで大きさを調整します。
    数値(%)	要素に対しての割合で指定します。*/


/* height: 500px;
    background-position: center;
    /*top; left; center; 25% 75%; bottom 50px right 100px; right 35% bottom 45%; などなど色々ポジション設定できるので試してください*/


/*} */

.loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    /*3番-10000*/
}

.loading img {
    width: 200px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 46%;
    margin-top: -20px;
    margin-left: -20px;
}

body {
    /*背景色を黒に変える*/
    background-color: black;
}

.loading {
    width: 100vw;
    height: 100vh;
    transition: all 1s;
    background-color: rgb(0, 0, 0);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    /*1番-10002*/
    opacity: 1;
    visibility: visible;
}

.loading.is-active {
    opacity: 0;
    visibility: hidden;
}

.loading-animation {
    width: 100vw;
    height: 100vh;
    transition: all 1s;
    background-color: #000000;
    z-index: 70;
    /*4番-9999*/
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
}

.loading-animation.is-active {
    opacity: 1;
    visibility: visible;
}

html {
    overflow: auto/*はみ出た要素をどうするか*/
    ;
}


/*footerの背景色を画面いっぱいに設定する*/

.all {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.footer-back {
    height: 150px;
    background-color: rgb(0, 0, 0);
    position: relative;
    margin-top: auto;
}

.saigo {
    /*footer 文字　*/
    font-family: 'Roboto Condensed', sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 13px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: auto;
    color: rgb(255, 255, 255);
    white-space: nowrap/*改行させたくない*/
    ;
}

.line-1 {
    /*線*/
    width: 100%;
    border-style: solid;
    border-color: rgb(70, 70, 70);
    position: absolute;
    top: 1px;
}

.line-2 {
    /*線*/
    width: 100%;
    border-style: solid;
    border-color: rgb(70, 70, 70);
    position: absolute;
    bottom: 1px;
}

.content1 {
    width: 60%;
    overflow: hidden;
    margin: auto;
}

.content2 {
    position: relative;
    width: 60%;
    margin: 0px auto;
}

.content3 {
    width: 60%;
    margin: 0px auto;
}

.content1-img,
.content2-img,
.content3-img {
    width: 100%;
}

.text1 {
    position: absolute;
    top: 0px;
}

.text2 {
    position: absolute;
    bottom: 0px;
    right: -150px;
}

.text1>span,
.text2>span {
    color: white;
    display: inline-block;
    font-size: 50px;
    font-weight: bold;
}

.Space-below .single-item {
    vertical-align: bottom;
}

#keyvisual {
    background-image: url("../imges/top.png");
    position: relative;
    width: 100%;
    height: 700px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}


/*
#keyvisual h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1em;
}
*/


/*ここから↓↓↓↓追加したサムネ付きslick↓↓↓↓↓*/

.sliderArea {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 25px;
}

.sliderArea.w300 {
    max-width: 300px;
}

.slick-slide {
    margin: 0 5px;
}

.slick-slide img {
    width: 100%;
    height: auto;
}

.slick-prev,
.slick-next {
    z-index: 1;
}

.slick-prev:before,
.slick-next:before {
    color: #000;
}

.slick-slide {
    transition: all ease-in-out .5s;
    opacity: .2;
}

.slick-active {
    opacity: 1;
}

.slick-current {
    opacity: 1;
}

.thumb {
    margin: 1px 0 0;
}

.thumb .slick-slide {
    cursor: pointer;
}

.thumb .slick-slide:hover {
    opacity: .7;
}


/*cssアニメーションGraphic*/

.Graphic {
    font-size: 40px;
    color: rgb(255, 255, 255);
    font-family: 'Roboto Condensed', sans-serif;
    clear: both;
}

.Graphic:hover {
    color: rgb(155, 155, 155);
}

.Graphic span {
    font-size: 15px;
    color: rgb(255, 255, 255);
    font-family: 'Roboto Condensed', sans-serif;
    clear: both;
    right: 10px;
}

.delay01 {
    animation-iteration-count: 5;
}

.wrap:hover a {
    /*カーソルが合わさった時の下線を無くす*/
    text-decoration: none;
}


/*cssアニメーションIllustration*/

.Illustration {
    font-size: 40px;
    color: rgb(255, 255, 255);
    font-family: 'Roboto Condensed', sans-serif;
    clear: both;
}

.Illustration:hover {
    color: rgb(155, 155, 155);
}

.delay02 {
    animation-iteration-count: 1;
}

.Illustration span {
    font-size: 15px;
    color: rgb(255, 255, 255);
    font-family: 'Roboto Condensed', sans-serif;
    clear: both;
    right: 10px;
}


/*lightboxの設定*/

.SECTION-1 {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
}

.SECTION-1 p {
    position: absolute;
    font-size: 20px;
    left: 10px;
    font-family: 'Roboto Condensed', sans-serif;
}

.SECTION-1 p span {
    font-size: 10px;
    font-family: 'Roboto Condensed', sans-serif;
    margin-left: 5px;
}

.blackwhite {
    width: 50%;
    padding-left: 0.1%;
    padding-bottom: 0.1%;
    transition: all .2s;
}

.blackwhite:hover {
    opacity: 0.6;
}


/*
.blackwhite:first-of-type {
    padding-left: 0;
}*/

.blackwhite img {
    width: 100%;
}

.SECTION-1-1 {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
}

.SECTION-1-1 p {
    position: absolute;
    font-size: 20px;
    left: 10px;
    font-family: 'Roboto Condensed', sans-serif;
}

.SECTION-1-1 p span {
    font-size: 10px;
    font-family: 'Roboto Condensed', sans-serif;
    margin-left: 5px;
}

.blackwhite-1 {
    width: 50%;
    float: left;
    padding-left: 0.1%;
    padding-bottom: 0.1%;
    position: relative;
    transition: all .2s;
}

.blackwhite-1:hover {
    opacity: 0.6;
}


/*
.blackwhite:first-of-type {
    padding-left: 0;
}*/

.blackwhite-1 img {
    width: 100%;
}

.SECTION-2 {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.SECTION-2 p {
    position: absolute;
    font-size: 20px;
    left: 10px;
    font-family: 'Roboto Condensed', sans-serif;
}

.SECTION-2 p span {
    font-size: 10px;
    font-family: 'Roboto Condensed', sans-serif;
    margin-left: 5px;
}

.colorcolor {
    width: 50%;
    float: left;
    padding-left: 0.1%;
    padding-bottom: 0.1%;
    position: relative;
    transition: all .2s;
}

.colorcolor:hover {
    opacity: 0.6;
}

.colorcolor img {
    width: 100%;
}

.SECTION-2-1 {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.SECTION-2-1 p {
    position: absolute;
    font-size: 20px;
    left: 10px;
    font-family: 'Roboto Condensed', sans-serif;
}

.SECTION-2-1 p span {
    font-size: 10px;
    font-family: 'Roboto Condensed', sans-serif;
    margin-left: 5px;
}

.colorcolor-1 {
    width: 33.3333%;
    float: left;
    padding-left: 0.1%;
    padding-bottom: 0.1%;
    position: relative;
    transition: all .2s;
}

.colorcolor-1:hover {
    opacity: 0.6;
}

.colorcolor-1 img {
    width: 100%;
}

.SECTION-2-2 {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.SECTION-2-2 p {
    position: absolute;
    font-size: 20px;
    left: 10px;
    font-family: 'Roboto Condensed', sans-serif;
}

.SECTION-2-2 p span {
    font-size: 10px;
    font-family: 'Roboto Condensed', sans-serif;
    margin-left: 5px;
}

.colorcolor-2 {
    width: 50%;
    float: left;
    padding-left: 0.1%;
    padding-bottom: 0.1%;
    position: relative;
    transition: all .2s;
}

.colorcolor-2:hover {
    opacity: 0.6;
}

.colorcolor-2 img {
    width: 100%;
}

.SECTION-3 {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
}

.SECTION-3 p {
    position: absolute;
    font-size: 20px;
    left: 10px;
    font-family: 'Roboto Condensed', sans-serif;
}

.SECTION-3 p span {
    font-size: 10px;
    font-family: 'Roboto Condensed', sans-serif;
    margin-left: 5px;
}

.dejideji {
    width: 50%;
    padding-left: 0.1%;
    padding-bottom: 0.1%;
    position: relative;
    transition: all .2s;
}

.dejideji:hover {
    opacity: 0.6;
}

.dejideji img {
    width: 100%;
}

.SECTION-3-1 {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
}

.SECTION-3-1 p {
    position: absolute;
    font-size: 20px;
    left: 10px;
    font-family: 'Roboto Condensed', sans-serif;
}

.SECTION-3-1 p span {
    font-size: 10px;
    font-family: 'Roboto Condensed', sans-serif;
    margin-left: 5px;
}

.dejideji-1 {
    width: 50%;
    padding-left: 0.1%;
    padding-bottom: 0.1%;
    position: relative;
    transition: all .2s;
}

.dejideji-1:hover {
    opacity: 0.6;
}

.dejideji-1 img {
    width: 100%;
}

.SECTION-3-2 {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
}

.SECTION-3-2 p {
    position: absolute;
    font-size: 20px;
    left: 10px;
    font-family: 'Roboto Condensed', sans-serif;
}

.SECTION-3-2 p span {
    font-size: 10px;
    font-family: 'Roboto Condensed', sans-serif;
    margin-left: 5px;
}

.dejideji-2 {
    width: 50%;
    padding-left: 0.1%;
    padding-bottom: 0.1%;
    position: relative;
    transition: all .2s;
}

.dejideji-2:hover {
    opacity: 0.6;
}

.dejideji-2 img {
    width: 100%;
}

.SECTION-4 {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
}

.SECTION-4 p {
    position: absolute;
    font-size: 20px;
    right: 10px;
    top: 733px;
    font-family: 'Roboto Condensed', sans-serif;
}

.aparel {
    width: 50%;
    padding-left: 0.1%;
    padding-bottom: 0.1%;
    position: relative;
    transition: all .2s;
}

.aparel:hover {
    opacity: 0.6;
}

.aparel img {
    width: 100%;
}

.SECTION-4-1 {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
}

.SECTION-4-1 p {
    position: absolute;
    font-size: 20px;
    right: 10px;
    top: 733px;
    font-family: 'Roboto Condensed', sans-serif;
}

.SECTION-4-1 p span {
    font-size: 5px;
}

.aparel-1 {
    width: 50%;
    padding-left: 0.1%;
    padding-bottom: 0.1%;
    position: relative;
    transition: all .2s;
}

.aparel-1:hover {
    opacity: 0.6;
}

.aparel-1 img {
    width: 100%;
}

.SECTION-4-2 {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
}

.SECTION-4-2 p {
    position: absolute;
    font-size: 20px;
    right: 10px;
    top: 733px;
    font-family: 'Roboto Condensed', sans-serif;
}

.aparel-2 {
    width: 50%;
    padding-left: 0.1%;
    padding-bottom: 0.1%;
    position: relative;
    transition: all .2s;
}

.aparel-2:hover {
    opacity: 0.6;
}

.aparel-2 img {
    width: 100%;
}

.SECTION-4-3 {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
}

.SECTION-4-3 p {
    position: absolute;
    font-size: 19px;
    right: 10px;
    top: 480px;
    font-family: 'Roboto Condensed', sans-serif;
}

.aparel-3 {
    width: 33.3333%;
    padding-left: 0.1%;
    padding-bottom: 0.1%;
    position: relative;
    transition: all .2s;
}

.aparel-3:hover {
    opacity: 0.6;
}

.aparel-2 img {
    width: 100%;
}

.artoffreedome {
    margin-top: 30px;
    color: rgb(70, 70, 70);
    font-family: 'Roboto Condensed', sans-serif;
    line-height: .5;
    text-align: center;
}


/*タブレット用  912   912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912    912 */

@media screen and (max-width:912px) {
    /*固定タグ*/
    .header {
        height: 140px;
    }
    .active {
        display: block;
    }
    .active .logo {
        margin-top: 20px;
        margin-right: 0px;
        margin-left: 230px;
        width: 150px;
        height: 60px;
        display: inline-block;
    }
    .home {
        font-size: 22px;
        margin-top: 12px;
        margin-left: 30px;
        display: inline-block;
    }
    .about {
        font-size: 22px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 65px;
    }
    .store {
        font-size: 22px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 70px;
    }
    .contact {
        font-size: 22px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 70px;
    }
    .icon::before
    /*インスタグラムアイコン*/
    {
        font-size: 24px;
        margin-top: 10px;
        margin-left: 80px;
    }
    .icon:hover::before {
        /*インスタグラムアイコンの動き*/
        font-size: 13px;
    }
    /*biographyのページ*/
    .haba {
        margin-top: 100px;
    }
    .biography {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .profiel p {
        margin-top: 20px;
        text-align: center;
        font-size: 30px;
        color: rgb(102, 102, 102);
        line-height: 1.3em;
        display: inline-block;
    }
    /*biographyのページ*/
    .loading img {
        left: 43%;
    }
    /*content*/
    #keyvisual {
        background-image: url("../imges/webtop(sumaho).png");
        height: 350px;
        margin-top: 150px;
    }
    /*ここから↓↓↓↓追加したサムネ付きslick↓↓↓↓↓*/
    .section {
        margin-top: 0px;
    }
    .sliderArea {
        padding: 0 12px;
    }
    .slick-slide {
        margin: 0 2px;
    }
    /*cssアニメーションGraphic*/
    .Graphic {
        font-size: 35px;
    }
    .Graphic span {
        font-size: 15px;
    }
    /*cssアニメーションIllustration*/
    .Illustration {
        font-size: 35px;
    }
    .Illustration span {
        font-size: 15px;
    }
    /*lightboxの設定*/
    .SECTION-1 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-1 p span {
        font-size: 8px;
        margin-left: 5px;
    }
    .SECTION-1-1 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-1-1 p span {
        font-size: 8px;
        margin-left: 5px;
    }
    /*
.blackwhite:first-of-type {
    padding-left: 0;
}*/
    .SECTION-2 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-2 p span {
        font-size: 8px;
        margin-left: 1px;
    }
    .SECTION-2-1 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-2-1 p span {
        font-size: 8px;
        margin-left: 1px;
    }
    .SECTION-2-2 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-2-2 p span {
        font-size: 8px;
        margin-left: 5px;
    }
    .SECTION-3 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-3 p span {
        font-size: 8px;
        margin-left: 1px;
    }
    .SECTION-3-1 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-3-1 p span {
        font-size: 8px;
        margin-left: 1px;
    }
    .SECTION-3-2 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-3-2 p span {
        font-size: 8px;
        margin-left: 5px;
    }
    .SECTION-4 p {
        font-size: 17px;
        top: 450px;
    }
    .SECTION-4-1 p {
        font-size: 17px;
        top: 450px;
    }
    .SECTION-4-2 p {
        font-size: 17px;
        top: 450px;
    }
    .SECTION-4-3 p {
        font-size: 17px;
        top: 293px;
    }
    .artoffreedome {
        margin-top: 15px;
        line-height: 1.5;
    }
    .artoffreedome p {
        font-size: 15px;
        margin-top: -1px;
        /*追加*/
        margin-bottom: -1px;
        /*追加*/
    }
    .artoffreedome {
        color: rgb(70, 70, 70);
        font-family: 'Roboto Condensed', sans-serif;
        line-height: 1;
        text-align: center;
    }
}


/*タブレット用  820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820     820   */

@media screen and (max-width:820px) {
    /*固定タグ*/
    .header {
        height: 140px;
    }
    .active {
        display: block;
    }
    .active .logo {
        margin-top: 20px;
        margin-right: 0px;
        margin-left: 230px;
        width: 150px;
        height: 60px;
        display: inline-block;
    }
    .home {
        font-size: 22px;
        margin-top: 12px;
        margin-left: 75px;
        display: inline-block;
    }
    .about {
        font-size: 22px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 40px;
    }
    .store {
        font-size: 22px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 40px;
    }
    .contact {
        font-size: 22px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 40px;
    }
    .icon::before
    /*インスタグラムアイコン*/
    {
        font-size: 24px;
        margin-top: 10px;
        margin-left: 50px;
    }
    .icon:hover::before {
        /*インスタグラムアイコンの動き*/
        font-size: 13px;
    }
    /*biographyのページ*/
    .haba {
        margin-top: 100px;
    }
    .biography {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .profiel p {
        margin-top: 20px;
        text-align: center;
        font-size: 25px;
        color: rgb(102, 102, 102);
        line-height: 1.3em;
        display: inline-block;
    }
    /*biographyのページ*/
    .loading img {
        left: 40%;
    }
    /*content*/
    #keyvisual {
        background-image: url("../imges/webtop(sumaho).png");
        height: 350px;
        margin-top: 150px;
    }
    /*ここから↓↓↓↓追加したサムネ付きslick↓↓↓↓↓*/
    .section {
        margin-top: 0px;
    }
    .sliderArea {
        padding: 0 12px;
    }
    .slick-slide {
        margin: 0 2px;
    }
    /*cssアニメーションGraphic*/
    .Graphic {
        font-size: 35px;
    }
    .Graphic span {
        font-size: 15px;
    }
    /*cssアニメーションIllustration*/
    .Illustration {
        font-size: 35px;
    }
    .Illustration span {
        font-size: 15px;
    }
    /*lightboxの設定*/
    .SECTION-1 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-1 p span {
        font-size: 8px;
        margin-left: 5px;
    }
    .SECTION-1-1 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-1-1 p span {
        font-size: 8px;
        margin-left: 5px;
    }
    /*
.blackwhite:first-of-type {
    padding-left: 0;
}*/
    .SECTION-2 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-2 p span {
        font-size: 8px;
        margin-left: 1px;
    }
    .SECTION-2-1 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-2-1 p span {
        font-size: 8px;
        margin-left: 1px;
    }
    .SECTION-2-2 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-2-2 p span {
        font-size: 8px;
        margin-left: 5px;
    }
    .SECTION-3 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-3 p span {
        font-size: 8px;
        margin-left: 1px;
    }
    .SECTION-3-1 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-3-1 p span {
        font-size: 8px;
        margin-left: 1px;
    }
    .SECTION-3-2 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-3-2 p span {
        font-size: 8px;
        margin-left: 5px;
    }
    .SECTION-4 p {
        font-size: 17px;
        top: 450px;
    }
    .SECTION-4-1 p {
        font-size: 17px;
        top: 450px;
    }
    .SECTION-4-2 p {
        font-size: 17px;
        top: 450px;
    }
    .SECTION-4-3 p {
        font-size: 17px;
        top: 293px;
    }
    .artoffreedome {
        margin-top: 15px;
        line-height: 1.5;
    }
    .artoffreedome p {
        font-size: 15px;
        margin-top: -1px;
        /*追加*/
        margin-bottom: -1px;
        /*追加*/
    }
    .biography {
        top: 50px;
        width: 100%;
        height: 100%;
    }
    .artoffreedome {
        color: rgb(70, 70, 70);
        font-family: 'Roboto Condensed', sans-serif;
        line-height: 1;
        text-align: center;
    }
}


/*タブレット用  768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768   768  */

@media screen and (max-width:768px) {
    /*固定タグ*/
    .header {
        height: 140px;
    }
    .active {
        display: block;
    }
    .active .logo {
        margin-top: 20px;
        margin-right: 0px;
        margin-left: 230px;
        width: 150px;
        height: 60px;
        display: inline-block;
    }
    .home {
        font-size: 18px;
        margin-top: 14px;
        margin-left: 105px;
        display: inline-block;
    }
    .about {
        font-size: 18px;
        color: rgb(255, 255, 255);
        margin-top: 14px;
        margin-left: 40px;
    }
    .store {
        font-size: 18px;
        color: rgb(255, 255, 255);
        margin-top: 14px;
        margin-left: 40px;
    }
    .contact {
        font-size: 18px;
        color: rgb(255, 255, 255);
        margin-top: 14px;
        margin-left: 40px;
    }
    .icon::before
    /*インスタグラムアイコン*/
    {
        font-size: 20px;
        margin-top: 12px;
        margin-left: 50px;
    }
    .icon:hover::before {
        /*インスタグラムアイコンの動き*/
        font-size: 13px;
    }
    /*biographyのページ*/
    .haba {
        margin-top: 100px;
    }
    .biography {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .profiel p {
        margin-top: 20px;
        text-align: center;
        font-size: 20px;
        color: rgb(102, 102, 102);
        line-height: 1.3em;
        display: inline-block;
    }
    /*biographyのページ*/
    .loading img {
        left: 40%;
    }
    /*content*/
    #keyvisual {
        background-image: url("../imges/webtop(sumaho).png");
        height: 350px;
        margin-top: 150px;
    }
    /*ここから↓↓↓↓追加したサムネ付きslick↓↓↓↓↓*/
    .section {
        margin-top: 0px;
    }
    .sliderArea {
        padding: 0 12px;
    }
    .slick-slide {
        margin: 0 2px;
    }
    /*cssアニメーションGraphic*/
    .Graphic {
        font-size: 40px;
    }
    .Graphic span {
        font-size: 20px;
    }
    /*cssアニメーションIllustration*/
    .Illustration {
        font-size: 40px;
    }
    .Illustration span {
        font-size: 20px;
    }
    /*lightboxの設定*/
    .SECTION-1 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-1 p span {
        font-size: 8px;
        margin-left: 5px;
    }
    .SECTION-1-1 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-1-1 p span {
        font-size: 8px;
        margin-left: 5px;
    }
    /*
.blackwhite:first-of-type {
    padding-left: 0;
}*/
    .SECTION-2 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-2 p span {
        font-size: 8px;
        margin-left: 1px;
    }
    .SECTION-2-1 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-2-1 p span {
        font-size: 8px;
        margin-left: 1px;
    }
    .SECTION-2-2 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-2-2 p span {
        font-size: 8px;
        margin-left: 5px;
    }
    .SECTION-3 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-3 p span {
        font-size: 8px;
        margin-left: 1px;
    }
    .SECTION-3-1 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-3-1 p span {
        font-size: 8px;
        margin-left: 1px;
    }
    .SECTION-3-2 p {
        font-size: 15px;
        left: 10px;
    }
    .SECTION-3-2 p span {
        font-size: 8px;
        margin-left: 5px;
    }
    .SECTION-4 p {
        font-size: 17px;
        top: 450px;
    }
    .SECTION-4-1 p {
        font-size: 17px;
        top: 450px;
    }
    .SECTION-4-2 p {
        font-size: 17px;
        top: 450px;
    }
    .SECTION-4-3 p {
        font-size: 17px;
        top: 293px;
    }
    .artoffreedome {
        margin-top: 15px;
        line-height: 1.5;
    }
    .artoffreedome p {
        font-size: 15px;
        margin-top: -1px;
        /*追加*/
        margin-bottom: -1px;
        /*追加*/
    }
    .biography {
        top: 50px;
        width: 100%;
        height: 100%;
    }
    .artoffreedome {
        color: rgb(70, 70, 70);
        font-family: 'Roboto Condensed', sans-serif;
        line-height: 1;
        text-align: center;
    }
}


/*タブレット用  540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540   540  */

@media screen and (max-width:540px) {
    /*固定タグ*/
    .header {
        height: 110px;
    }
    .active {
        display: block;
    }
    .active .logo {
        margin-top: 15px;
        margin-right: 0px;
        margin-left: 160px;
        width: 120px;
        height: 48px;
        display: inline-block;
    }
    .home {
        font-size: 14px;
        margin-top: 14px;
        margin-left: 40px;
        display: inline-block;
    }
    .about {
        font-size: 14px;
        color: rgb(255, 255, 255);
        margin-top: 14px;
        margin-left: 40px;
    }
    .store {
        font-size: 14px;
        color: rgb(255, 255, 255);
        margin-top: 14px;
        margin-left: 40px;
    }
    .contact {
        font-size: 14px;
        color: rgb(255, 255, 255);
        margin-top: 14px;
        margin-left: 40px;
    }
    .icon::before
    /*インスタグラムアイコン*/
    {
        font-size: 18px;
        margin-top: 11px;
        margin-left: 50px;
    }
    .icon:hover::before {
        /*インスタグラムアイコンの動き*/
        font-size: 13px;
    }
    /*biographyのページ*/
    .haba {
        margin-top: 100px;
    }
    .biography {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .profiel p {
        margin-top: 17px;
        text-align: center;
        font-size: 17px;
        color: rgb(102, 102, 102);
        line-height: 1.3em;
        display: inline-block;
    }
    /*biographyのページ*/
    .loading img {
        left: 38%;
    }
    /*content*/
    #keyvisual {
        background-image: url("../imges/webtop(sumaho).png");
        height: 250px;
        margin-top: 100px;
    }
    /*ここから↓↓↓↓追加したサムネ付きslick↓↓↓↓↓*/
    .section {
        margin-top: 0px;
    }
    .sliderArea {
        padding: 0 12px;
    }
    .slick-slide {
        margin: 0 2px;
    }
    /*cssアニメーションGraphic*/
    .Graphic {
        font-size: 30px;
    }
    .Graphic span {
        font-size: 10px;
    }
    /*cssアニメーションIllustration*/
    .Illustration {
        font-size: 30px;
    }
    .Illustration span {
        font-size: 10px;
    }
    /*lightboxの設定*/
    .SECTION-1 p {
        font-size: 13px;
        left: 7px;
    }
    .SECTION-1 p span {
        font-size: 7px;
        margin-left: 3px;
    }
    .SECTION-1-1 p {
        font-size: 13px;
        left: 7px;
    }
    .SECTION-1-1 p span {
        font-size: 7px;
        margin-left: 3px;
    }
    /*
.blackwhite:first-of-type {
    padding-left: 0;
}*/
    .SECTION-2 p {
        font-size: 13px;
        left: 7px;
    }
    .SECTION-2 p span {
        font-size: 7px;
        margin-left: 3px;
    }
    .SECTION-2-1 p {
        font-size: 13px;
        left: 7px;
    }
    .SECTION-2-1 p span {
        font-size: 7px;
        margin-left: 3px;
    }
    .SECTION-2-2 p {
        font-size: 13px;
        left: 7px;
    }
    .SECTION-2-2 p span {
        font-size: 7px;
        margin-left: 3px;
    }
    .SECTION-3 p {
        font-size: 13px;
        left: 7px;
    }
    .SECTION-3 p span {
        font-size: 7px;
        margin-left: 3px;
    }
    .SECTION-3-1 p {
        font-size: 13px;
        left: 7px;
    }
    .SECTION-3-1 p span {
        font-size: 7px;
        margin-left: 3px;
    }
    .SECTION-3-2 p {
        font-size: 13px;
        left: 7px;
    }
    .SECTION-3-2 p span {
        font-size: 7px;
        margin-left: 3px;
    }
    .SECTION-4 p {
        font-size: 13px;
        top: 450px;
    }
    .SECTION-4-1 p {
        font-size: 13px;
        top: 450px;
    }
    .SECTION-4-2 p {
        font-size: 13px;
        top: 450px;
    }
    .SECTION-4-3 p {
        font-size: 13px;
        top: 293px;
    }
    .artoffreedome {
        margin-top: 15px;
        line-height: 1.5;
    }
    .artoffreedome p {
        font-size: 15px;
        margin-top: -1px;
        /*追加*/
        margin-bottom: -1px;
        /*追加*/
    }
    .biography {
        top: 50px;
        width: 100%;
        height: 100%;
    }
    .artoffreedome {
        color: rgb(70, 70, 70);
        font-family: 'Roboto Condensed', sans-serif;
        line-height: 1;
        text-align: center;
    }
}


/*タブレット用  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414  414 */

@media screen and (max-width:414px) {
    /*固定タグ*/
    .header {
        height: 110px;
    }
    .active {
        display: block;
    }
    .active .logo {
        margin-top: 15px;
        margin-right: 0px;
        margin-left: 100px;
        width: 120px;
        height: 48px;
        display: inline-block;
    }
    .home {
        font-size: 13px;
        margin-top: 14px;
        margin-left: 25px;
        display: inline-block;
    }
    .about {
        font-size: 13px;
        color: rgb(255, 255, 255);
        margin-top: 14px;
        margin-left: 20px;
    }
    .store {
        font-size: 13px;
        color: rgb(255, 255, 255);
        margin-top: 14px;
        margin-left: 20px;
    }
    .contact {
        font-size: 13px;
        color: rgb(255, 255, 255);
        margin-top: 14px;
        margin-left: 20px;
    }
    .icon::before
    /*インスタグラムアイコン*/
    {
        font-size: 15px;
        margin-top: 13px;
        margin-left: 25px;
    }
    .icon:hover::before {
        /*インスタグラムアイコンの動き*/
        font-size: 13px;
    }
    /*biographyのページ*/
    .haba {
        margin-top: 100px;
    }
    .biography {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .profiel p {
        margin-top: 12px;
        text-align: center;
        font-size: 15px;
        color: rgb(102, 102, 102);
        line-height: 1.3em;
        display: inline-block;
    }
    /*biographyのページ*/
    .loading img {
        left: 33%;
    }
    /*content*/
    #keyvisual {
        background-image: url("../imges/webtop(sumaho).png");
        height: 220px;
        margin-top: 80px;
    }
    /*ここから↓↓↓↓追加したサムネ付きslick↓↓↓↓↓*/
    .section {
        margin-top: 0px;
    }
    .sliderArea {
        padding: 0 12px;
    }
    .slick-slide {
        margin: 0 2px;
    }
    /*cssアニメーションGraphic*/
    .Graphic {
        font-size: 25px;
    }
    .Graphic span {
        font-size: 10px;
    }
    /*cssアニメーションIllustration*/
    .Illustration {
        font-size: 25px;
    }
    .Illustration span {
        font-size: 10px;
    }
    /*lightboxの設定*/
    .SECTION-1 p {
        font-size: 10px;
        left: 4px;
    }
    .SECTION-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-1-1 p {
        font-size: 10px;
        left: 4px;
    }
    .SECTION-1-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    /*
.blackwhite:first-of-type {
    padding-left: 0;
}*/
    .SECTION-2 p {
        font-size: 10px;
        left: 4px;
    }
    .SECTION-2 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-2-1 p {
        font-size: 10px;
        left: 4px;
    }
    .SECTION-2-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-2-2 p {
        font-size: 10px;
        left: 4px;
    }
    .SECTION-2-2 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-3 p {
        font-size: 10px;
        left: 4px;
    }
    .SECTION-3 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-3-1 p {
        font-size: 10px;
        left: 4px;
    }
    .SECTION-3-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-3-2 p {
        font-size: 10px;
        left: 4px;
    }
    .SECTION-3-2 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-4 p {
        font-size: 10px;
        top: 248px;
    }
    .SECTION-4-1 p {
        font-size: 10px;
        top: 248px;
    }
    .SECTION-4-2 p {
        font-size: 10px;
        top: 248px;
    }
    .SECTION-4-3 p {
        font-size: 10px;
        top: 160px;
    }
    .artoffreedome {
        margin-top: 15px;
        line-height: 1.5;
    }
    .artoffreedome p {
        font-size: 10px;
        margin-top: -1px;
        /*追加*/
        margin-bottom: -1px;
        /*追加*/
    }
    .biography {
        top: 50px;
        width: 100%;
        height: 100%;
    }
    .artoffreedome {
        color: rgb(70, 70, 70);
        font-family: 'Roboto Condensed', sans-serif;
        line-height: 1;
        text-align: center;
    }
}


/*タブレット用  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393  393 */

@media screen and (max-width:393px) {
    /*固定タグ*/
    .header {
        height: 100px;
    }
    .active {
        display: block;
    }
    .active .logo {
        margin-top: 15px;
        margin-right: 0px;
        margin-left: 90px;
        width: 120px;
        height: 48px;
        display: inline-block;
    }
    .home {
        font-size: 12px;
        margin-top: 12px;
        margin-left: 20px;
        display: inline-block;
    }
    .about {
        font-size: 12px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 20px;
    }
    .store {
        font-size: 12px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 20px;
    }
    .contact {
        font-size: 12px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 20px;
    }
    .icon::before
    /*インスタグラムアイコン*/
    {
        font-size: 14px;
        margin-top: 11px;
        margin-left: 25px;
    }
    .icon:hover::before {
        /*インスタグラムアイコンの動き*/
        font-size: 13px;
    }
    /*biographyのページ*/
    .haba {
        margin-top: 100px;
    }
    .biography {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .profiel p {
        margin-top: 12px;
        text-align: center;
        font-size: 14px;
        color: rgb(102, 102, 102);
        line-height: 1.3em;
        display: inline-block;
    }
    /*biographyのページ*/
    .loading img {
        left: 33%;
    }
    /*content*/
    #keyvisual {
        background-image: url("../imges/webtop(sumaho).png");
        height: 220px;
        margin-top: 80px;
    }
    /*ここから↓↓↓↓追加したサムネ付きslick↓↓↓↓↓*/
    .section {
        margin-top: 0px;
    }
    .sliderArea {
        padding: 0 12px;
    }
    .slick-slide {
        margin: 0 2px;
    }
    /*cssアニメーションGraphic*/
    .Graphic {
        font-size: 25px;
    }
    .Graphic span {
        font-size: 10px;
    }
    /*cssアニメーションIllustration*/
    .Illustration {
        font-size: 25px;
    }
    .Illustration span {
        font-size: 10px;
    }
    /*lightboxの設定*/
    .SECTION-1 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-1-1 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-1-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    /*
.blackwhite:first-of-type {
    padding-left: 0;
}*/
    .SECTION-2 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-2 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-2-1 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-2-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-2-2 p {
        font-size: 9px;
        left: 4px;
    }
    .SECTION-2-2 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-3 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-3 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-3-1 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-3-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-3-2 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-3-2 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-4 p {
        font-size: 9px;
        top: 234px;
    }
    .SECTION-4-1 p {
        font-size: 10px;
        top: 234px;
    }
    .SECTION-4-2 p {
        font-size: 10px;
        top: 234px;
    }
    .SECTION-4-3 p {
        font-size: 10px;
        top: 152px;
    }
    .artoffreedome {
        margin-top: 15px;
        line-height: 1.5;
    }
    .artoffreedome p {
        font-size: 10px;
        margin-top: -1px;
        /*追加*/
        margin-bottom: -1px;
        /*追加*/
    }
    .biography {
        top: 50px;
        width: 100%;
        height: 100%;
    }
    .artoffreedome {
        color: rgb(70, 70, 70);
        font-family: 'Roboto Condensed', sans-serif;
        line-height: 1;
        text-align: center;
    }
}


/*タブレット用  375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375   375  */

@media screen and (max-width:375px) {
    /*固定タグ*/
    .header {
        height: 100px;
    }
    .active {
        display: block;
    }
    .active .logo {
        margin-top: 15px;
        margin-right: 0px;
        margin-left: 80px;
        width: 120px;
        height: 48px;
        display: inline-block;
    }
    .home {
        font-size: 12px;
        margin-top: 12px;
        margin-left: 15px;
        display: inline-block;
    }
    .about {
        font-size: 12px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 20px;
    }
    .store {
        font-size: 12px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 20px;
    }
    .contact {
        font-size: 12px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 20px;
    }
    .icon::before
    /*インスタグラムアイコン*/
    {
        font-size: 14px;
        margin-top: 11px;
        margin-left: 25px;
    }
    .icon:hover::before {
        /*インスタグラムアイコンの動き*/
        font-size: 13px;
    }
    /*biographyのページ*/
    .haba {
        margin-top: 100px;
    }
    .biography {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .profiel p {
        margin-top: 12px;
        text-align: center;
        font-size: 14px;
        color: rgb(102, 102, 102);
        line-height: 1.3em;
        display: inline-block;
    }
    /*biographyのページ*/
    .loading img {
        left: 33%;
    }
    /*content*/
    #keyvisual {
        background-image: url("../imges/webtop(sumaho).png");
        height: 220px;
        margin-top: 80px;
    }
    /*ここから↓↓↓↓追加したサムネ付きslick↓↓↓↓↓*/
    .section {
        margin-top: 0px;
    }
    .sliderArea {
        padding: 0 12px;
    }
    .slick-slide {
        margin: 0 2px;
    }
    /*cssアニメーションGraphic*/
    .Graphic {
        font-size: 25px;
    }
    .Graphic span {
        font-size: 10px;
    }
    /*cssアニメーションIllustration*/
    .Illustration {
        font-size: 25px;
    }
    .Illustration span {
        font-size: 10px;
    }
    /*lightboxの設定*/
    .SECTION-1 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-1-1 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-1-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    /*
.blackwhite:first-of-type {
    padding-left: 0;
}*/
    .SECTION-2 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-2 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-2-1 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-2-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-2-2 p {
        font-size: 9px;
        left: 4px;
    }
    .SECTION-2-2 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-3 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-3 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-3-1 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-3-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-3-2 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-3-2 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-4 p {
        font-size: 9px;
        top: 222px;
    }
    .SECTION-4-1 p {
        font-size: 10px;
        top: 222px;
    }
    .SECTION-4-2 p {
        font-size: 10px;
        top: 222px;
    }
    .SECTION-4-3 p {
        font-size: 10px;
        top: 143px;
    }
    .artoffreedome {
        margin-top: 15px;
        line-height: 1.5;
    }
    .artoffreedome p {
        font-size: 10px;
        margin-top: -1px;
        /*追加*/
        margin-bottom: -1px;
        /*追加*/
    }
    .biography {
        top: 50px;
        width: 100%;
        height: 100%;
    }
    .artoffreedome {
        color: rgb(70, 70, 70);
        font-family: 'Roboto Condensed', sans-serif;
        line-height: 1;
        text-align: center;
    }
}


/*タブレット用  360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360    360  */

@media screen and (max-width:360px) {
    /*固定タグ*/
    .header {
        height: 100px;
    }
    .active {
        display: block;
    }
    .active .logo {
        margin-top: 15px;
        margin-right: 0px;
        margin-left: 74px;
        width: 120px;
        height: 48px;
        display: inline-block;
    }
    .home {
        font-size: 12px;
        margin-top: 12px;
        margin-left: 8px;
        display: inline-block;
    }
    .about {
        font-size: 12px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 20px;
    }
    .store {
        font-size: 12px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 20px;
    }
    .contact {
        font-size: 12px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 20px;
    }
    .icon::before
    /*インスタグラムアイコン*/
    {
        font-size: 14px;
        margin-top: 11px;
        margin-left: 25px;
    }
    .icon:hover::before {
        /*インスタグラムアイコンの動き*/
        font-size: 13px;
    }
    /*biographyのページ*/
    .haba {
        margin-top: 100px;
    }
    .biography {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .profiel p {
        margin-top: 12px;
        text-align: center;
        font-size: 14px;
        color: rgb(102, 102, 102);
        line-height: 1.3em;
        display: inline-block;
    }
    /*biographyのページ*/
    .loading img {
        left: 33%;
    }
    /*content*/
    #keyvisual {
        background-image: url("../imges/webtop(sumaho).png");
        height: 220px;
        margin-top: 80px;
    }
    /*ここから↓↓↓↓追加したサムネ付きslick↓↓↓↓↓*/
    .section {
        margin-top: 0px;
    }
    .sliderArea {
        padding: 0 12px;
    }
    .slick-slide {
        margin: 0 2px;
    }
    /*cssアニメーションGraphic*/
    .Graphic {
        font-size: 23px;
    }
    .Graphic span {
        font-size: 8px;
    }
    /*cssアニメーションIllustration*/
    .Illustration {
        font-size: 23px;
    }
    .Illustration span {
        font-size: 8px;
    }
    /*lightboxの設定*/
    .SECTION-1 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-1-1 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-1-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    /*
.blackwhite:first-of-type {
    padding-left: 0;
}*/
    .SECTION-2 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-2 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-2-1 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-2-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-2-2 p {
        font-size: 9px;
        left: 4px;
    }
    .SECTION-2-2 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-3 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-3 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-3-1 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-3-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-3-2 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-3-2 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-4 p {
        font-size: 9px;
        top: 210px;
    }
    .SECTION-4-1 p {
        font-size: 10px;
        top: 210px;
    }
    .SECTION-4-2 p {
        font-size: 10px;
        top: 210px;
    }
    .SECTION-4-3 p {
        font-size: 10px;
        top: 135px;
    }
    .artoffreedome {
        margin-top: 15px;
        line-height: 1.5;
    }
    .artoffreedome p {
        font-size: 10px;
        margin-top: -1px;
        /*追加*/
        margin-bottom: -1px;
        /*追加*/
    }
    .biography {
        top: 50px;
        width: 100%;
        height: 100%;
    }
    .artoffreedome {
        color: rgb(70, 70, 70);
        font-family: 'Roboto Condensed', sans-serif;
        line-height: 1;
        text-align: center;
    }
}


/*タブレット用  280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280   280  */

@media screen and (max-width:280px) {
    /*固定タグ*/
    .header {
        height: 90px;
    }
    .active {
        display: block;
    }
    .active .logo {
        margin-top: 15px;
        margin-right: 0px;
        margin-left: 40px;
        width: 100px;
        height: 40px;
        display: inline-block;
    }
    .home {
        font-size: 10px;
        margin-top: 12px;
        margin-left: 0px;
        display: inline-block;
    }
    .about {
        font-size: 10px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 12px;
    }
    .store {
        font-size: 10px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 12px;
    }
    .contact {
        font-size: 10px;
        color: rgb(255, 255, 255);
        margin-top: 12px;
        margin-left: 12px;
    }
    .icon::before
    /*インスタグラムアイコン*/
    {
        font-size: 12px;
        margin-top: 11px;
        margin-left: 15px;
    }
    .icon:hover::before {
        /*インスタグラムアイコンの動き*/
        font-size: 13px;
    }
    /*biographyのページ*/
    .haba {
        margin-top: 100px;
    }
    .biography {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .profiel p {
        margin-top: 12px;
        text-align: center;
        font-size: 14px;
        color: rgb(102, 102, 102);
        line-height: 1.3em;
        display: inline-block;
    }
    /*biographyのページ*/
    .loading img {
        left: 24%;
    }
    /*content*/
    #keyvisual {
        background-image: url("../imges/webtop(sumaho).png");
        height: 120px;
        margin-top: 80px;
    }
    /*ここから↓↓↓↓追加したサムネ付きslick↓↓↓↓↓*/
    .section {
        margin-top: 0px;
    }
    .sliderArea {
        padding: 0 12px;
    }
    .slick-slide {
        margin: 0 2px;
    }
    /*cssアニメーションGraphic*/
    .Graphic {
        font-size: 13px;
    }
    .Graphic span {
        font-size: 6px;
    }
    /*cssアニメーションIllustration*/
    .Illustration {
        font-size: 10px;
    }
    .Illustration span {
        font-size: 5px;
    }
    /*lightboxの設定*/
    .SECTION-1 p {
        font-size: 6px;
        left: 3px;
    }
    .SECTION-1 p span {
        font-size: 3px;
        margin-left: 3px;
    }
    .SECTION-1-1 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-1-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    /*
.blackwhite:first-of-type {
    padding-left: 0;
}*/
    .SECTION-2 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-2 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-2-1 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-2-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-2-2 p {
        font-size: 9px;
        left: 4px;
    }
    .SECTION-2-2 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-3 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-3 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-3-1 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-3-1 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-3-2 p {
        font-size: 9px;
        left: 3px;
    }
    .SECTION-3-2 p span {
        font-size: 6px;
        margin-left: 3px;
    }
    .SECTION-4 p {
        font-size: 9px;
        top: 157px;
    }
    .SECTION-4-1 p {
        font-size: 10px;
        top: 157px;
    }
    .SECTION-4-2 p {
        font-size: 10px;
        top: 157px;
    }
    .SECTION-4-3 p {
        font-size: 8px;
        top: 100px;
    }
    .artoffreedome {
        margin-top: 15px;
        line-height: 1.5;
    }
    .artoffreedome p {
        font-size: 10px;
        margin-top: -1px;
        /*追加*/
        margin-bottom: -1px;
        /*追加*/
    }
    .biography {
        top: 50px;
        width: 100%;
        height: 100%;
    }
    .artoffreedome {
        color: rgb(70, 70, 70);
        font-family: 'Roboto Condensed', sans-serif;
        line-height: 1;
        text-align: center;
    }
}