@charset "UTF-8";
*{margin:0;padding:0;}

html,body{background:#F7F7F0;}

h1,h2,h3,p,li,dt,dd, a{
    color:#4C472F;
    font-family: 'Noto Sans JP', sans-serif;
}
li{list-style:none;}

h1{text-align:center;}

a{
        color:#D5B147;
        text-decoration:none;
 }
@media screen and (min-width: 1046px) {
    #toppage h1{padding:200px 0 300px;}

    .i_insta{
        background-image:url(../images/i_insta.png);
        background-repeat:no-repeat ;
        background-position:left center;
        font-weight:bold;
        line-height:29px;
        padding-left:38px;
    }
    .i_insta a{font-weight:bold; }


    .i_base{
        background-image:url(../images/i_base.png) ;
        background-repeat:no-repeat ;
        background-position:left center;
        font-weight:bold;
        line-height:29px;
        padding-left:38px;
    }
    .i_mail{
        background-image:url(../images/i_mail.png) ;
        background-repeat:no-repeat ;
        background-position:2px center;
        font-weight:bold;
        line-height:29px;
        padding-left:38px;
    }




    nav {margin:0 0 175px;}
    .fixednav{
        background:rgba(247,247,240,0.9);
        display:none;
        padding:30px 0;
        position: fixed;
        width:100%;
        top:0;
    }
    nav ul,
    .fixednav ul{
        display: -webkit-flex;
        display: flex;
        margin:0 auto;
        justify-content: space-between;
        width:1100px;
    }
    nav li,
    .fixednav ul li{list-style:none;}
    
    nav li a,
    .fixednav ul li a{
        color:#4C472F;
        font-weight:bold;
        letter-spacing:0.2em;
        text-decoration:none;
        position: relative;
    }
    .fixednav ul li strong{
        -webkit-transition: all .3s;
        transition: all .3s;
    }
    .fixednav ul li strong.now{
        /*background:rgba(213, 177, 71, 0.3)*/
        color:#d5b147
    }
    nav li a span,
    .fixednav ul li a span{
        background:#D5B147;
        position:absolute;
        left:0;
        bottom:-4px;
        height:2px;
        width:0;

        -webkit-transition: all .3s;
        transition: all .3s;
    }
    nav li.on a span,
    .fixednav ul li.on a span{width:100%;}

    .fixednav ul li a{font-size:12px;}

    section{
        margin:0 auto 175px;
        width:1100px;
    }
    section h2{
        font-size:15px;
        font-weight:bold;
        letter-spacing:0.2em;
        margin-bottom:44px;
    }
    section p,
    section li,
    section dt,
    section dd{
        font-size:14px;
        line-height:24px;
/*        margin-bottom:24px;*/
        margin-bottom:0;
    }
    section ul{
        margin-bottom:24px;
    }
    section li{
        font-size:14px;
        line-height:19px;
    }
    br.pc{
        display:inline-block;
    }
    .sp{display:none;}

    #about h2,
    #works h2,
    #business h2,
    #artist h2,
    #company h2,
    #contact h2{
        color:#D5B147;
        font-weight:900;
    }
    #about h2,
    #works h2,
    #artist h2,
    #contact h2{
        margin-bottom:20px;
    }

    /* about */
    #about{
        margin: 0 auto 120px
    }
    #about dt,
    #about dd,
    #about dd div,
    #about dd p,
    #about dd ul{
        display:inline-block;
        color:#4C472F;
    }

    #about dl{
        margin:0 auto;
        padding:56px 0 0 50px;
    }

    #about dt{
        margin-right:42px;
        vertical-align:top;
    }

    #about dd,
    #about dd div,
    #about dd p,
    #about dd ul{
        vertical-align:middle;
    }

    #about dd p{
        font-weight:500;
        margin-right:10px;
    }

    #about dd div{margin-right:38px;}

    #about dd ul ul{
        background:url(../images/line.png) no-repeat left center;
        padding-left:62px;
    }
    .next{
        background:url(../images/next.png) no-repeat right top;
        margin-right:30px;
        padding-right:45px;
    }


    /* works */
    #business p{
        margin-bottom:60px;
    }
    #business ul{
        display: -webkit-flex;
        display: flex;
        margin:0 auto;
        justify-content: space-between;
        width:1100px;
    }
    #business ul dt{
        background:#D5B147;
        color:#fff;
        font-size:13px;
        font-weight:900;
        line-height:40px;
        letter-spacing:0.2em;
        text-align:center;
        width:300px;
    }
    #business ul dd:last-child{
        margin-bottom:0;
    }
    #business .logo,
    #business .link,
    #business .tx_center{text-align:center;}

    #business .logo{margin-bottom:20px;}
    #business .logo img{vertical-align: bottom;}

    .link a{
        font-weight:900;
    }

    /* artist */
    #artist .box,
    #artist .box div,
    #artist .box dl{
        display:inline-block;
        vertical-align:top;
    }
    #artist .box{width:550px;}

    #artist .box div{margin-right:15px;}

    #artist .box dl{padding-top:10px;}
    #artist .box dl dt{
        font-weight:bold;
        margin-bottom:10px;
    }
    #artist .box dl dd span{
        display:block;
        font-weight:bold;
    }
    #artist .box dl dd ul{margin-top:15px;}
    #artist .box dl dd ul li{margin-bottom:10px;}

    #artist .box dl dd ul li a{font-weight:bold;}


    /* company */

    #websitepolicy dt,
    #websitepolicy dd,
    #pirvacy p,
    #pirvacy li{
        font-weight:bold;
    }
    #pirvacy li{
        line-height:24px;
    }

    .btn a{
        border:1px solid #D5B147;
        display:inline-block;
        font-weight:bold;
        line-height:40px;
        padding:0 15px;
    }
    .btn a span{
        background:url(../images/arrow.png) no-repeat right center;
        display:inline-block;
        font-weight:bold;
        line-height:40px;
        padding:0 25px 0;
    }

    #pagefooter{
        margin: 0 auto ;
        width: 1100px;
    }
    #pagefooter p{
        font-weight:bold;
        font-size:12px;
        margin-left:-70px;
        margin-bottom:30px;
    }

}

@media screen and (max-width: 1046px) {
    .menu {
        display: block;
        right: 0;
        height: 16vw;
        position: fixed;
        top: 0;
        width: 16vw;
        z-index: 12;
    }
    .menu li {
        background:#4C472F;
        display: block;
        height: 0.53333vw;
        position: absolute;
        width: 6.13333vw;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }
    .menu li:nth-child(1) {
        left: 5.46667vw;
        top: 4.93333vw;
    }
    .menu li:nth-child(2) {
        left: 5.46667vw;
        top: 7.6vw;
    }
    .menu li:nth-child(3) {
        left: 5.46667vw;
        top: 10.13333vw;
    }
    .menu.on li:nth-child(1) {
        left: 5.33333vw;
        top: 7.6vw;
        transform-origin: center center;
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        width: 6.66667vw;
    }
    .menu.on li:nth-child(2) {
        display: none;
    }
    .menu.on li:nth-child(3) {
        left: 5.33333vw;
        top: 7.6vw;
        transform-origin: center center;
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        width: 6.66667vw;
    }

    nav {
        background: rgba(255,255,255,0.9);
        background-size: 1.06666vw 0.533333vw;
        display: none;
        top: 0;
        height: 100%;
        left: 0;
        opacity: 0;
        overflow: auto;
        position: fixed;
        width: 100%;
        z-index: 10;
    }


    nav ul {
        padding: 31.73333vw 0 31.73333vw ;
    }
    nav ul li {
        display: block;
        font-size: 4vw;
        font-weight: bold;
        margin: 0  auto 13.33333vw;
        vertical-align: top;
        text-align: center;
        position: relative;
    }
    nav ul li  a{
        color:#4C472F;
        font-size:3.73333vw;
        letter-spacing:0.2em;
    }
    #toppage h1{padding:29.3333vw 0 25.333vw;}

    .pc,
    br.pc{
        display:none!important;
    }
    .sp{
        display:inline-block;
    }
    nav .sp{
        display:block;
    }
    .i_insta{
        background-image:url(../images/i_insta.png);
        background-size:7.73333vw;
        background-repeat:no-repeat ;
        background-position:left center;
        font-weight:bold;
        line-height:8vw;
        padding-left:10.4vw;
        
    }
    .i_base{
        background-image:url(../images/i_base.png) ;
        background-size:7.73333vw;
        background-repeat:no-repeat ;
        background-position:left center;
        font-weight:bold;
        line-height:8vw;
        padding-left:10.4vw;
    }
    .i_mail{
        background-image:url(../images/i_mail.png) ;
        background-size:7.73333vw;
        background-repeat:no-repeat ;
        background-position:2px center;
        font-weight:bold;
        line-height:8vw;
        padding-left:10.4vw;
    }
    .i_insta a,
    .i_base a,
    .i_mail a{
        font-weight:900;
    }

    #toppage h1 img{
        height:auto;
        width:49.6666vw;
    }
    nav{
        display:none;
    }
    section{
        margin:0 auto 25.6vw;
        padding:0 8vw;
    }
    section h2{
        font-size:4vw;
        font-weight:900;
        letter-spacing:0.2em;
        margin-bottom:11.7333vw;

    }
    section ul{
        margin-bottom:6.66666vw;
    }
    section p,
    section li,
    section dt,
    section dd{
        font-size:3.7333vw;;
        line-height:6.4vw;
        margin-bottom:6.66666vw;
    }

    section li{
        font-size:3.7333vw;;
        line-height:1.3571428;
    }

    #about h2,
    #works h2,
    #business h2,
    #artist h2,
    #company h2,
    #contact h2{
        color:#D5B147;
        font-weight:900;
    }
    #about h2,
    #works h2,
    #business h2,
    #artist h2{
        margin-bottom:5.333vw;
    }
    /* about */

    #about p{
        margin-bottom:14.6666vw;
    }
    #about dt,
    #about dd,
    #about dd div,
    #about dd p,
    #about dd ul{
        display:inline-block;
        color:#4C472F;
    }
    #about dt{
        margin-right:8.53333vw;
        vertical-align:top;
    }
    #about dd,
    #about dd div,
    #about dd p,
    #about dd ul{
        margin-bottom:0;
        vertical-align:middle;
    }

    #about dt.about1 img{
        height:22.437333vw;
        width:4.72vw;
        vertical-align:middle;
    }
    #about dt.about2 img{
        height:28.373333vw;
        width:4.72vw;
        vertical-align:middle;
    }

    .setose img{
        height:auto;
        width:100%;
    }

    .se img{
        height:18.13333vw;
        width:26.13333vw;
    }
    
    .tose img{
        height:18.13333vw;
        width:26.96666vw;
    }

    #about dd p{
        font-size:2.66666vw;
        width:34.666666vw
    }
    /* business */
    #business ul li{
        margin-bottom:13.3333vw;
    }

    #business ul dt{
        background:#D5B147;
        color:#fff;
        font-size:3.4666vw;
        font-weight:900;
        line-height:10.666vw;
        letter-spacing:0.2em;
        text-align:center;
        width:100%;
    }
    #business .logo,
    #business .link,
    #business .tx_center{text-align:center;}

    #business .logo img{
        height:auto;
        width:100%;
    }
    .link a{
        font-weight:900;
    }

    /* artist */
    #artist .box:not(:last-child){
        margin-bottom:16vw;
    }
    #artist .box div{
        text-align:center;
        margin-bottom:8vw;
    }
    
    #artist .box dl dt{
        font-weight:bold;
        margin-bottom:10px;
        text-align:center;
    }
    #artist .box dl dd span{display:block;}
    #artist .box dl dd > span{
        font-weight:bold;
        text-align:center;
    }
    #artist .box dl dd ul{margin-top:4vw;}
    #artist .box dl dd ul li{margin-bottom:2.6666vw;}


    #business p{
        margin-bottom:14.6666vw;
    }


    /* company */
    #websitepolicy dt,
    #websitepolicy dd,
    #pirvacy p,
    #pirvacy li{
        font-weight:bold;
    }
    #pirvacy li{
        line-height:6.4vw;
    }

    #company .btn{
        margin:12vw 0 0;
    }

    .btn a{
        border:1px solid #D5B147;
        display:inline-block;
        font-weight:bold;
        line-height:10.666vw;
        padding:0 5.333vw;
    }
    .btn a span{
        background:url(../images/arrow.png) no-repeat right center;
        background-size:1.6vw 2.1333vw;
        display:inline-block;
        font-size:4vw;
        font-weight:bold;
        padding:0 5.333vw;
    }

    #pagefooter p{
        font-size:3.2vw;
        font-weight:bold;
        margin-bottom:8vw;
        text-align:center;
    }
}