@charset "UTF-8";
html, body{
    max-width: 100%;
}
body{
    background: -moz-linear-gradient(0deg, rgb(0,104,136)0%, rgb(0,175,204)40%, rgb(0,104,136)100%);
    background: -webkit-linear-gradient(0deg, rgb(0,104,136)0%,rgb(0,175,204)40%, rgb(0,104,136)100%);
    background: linear-gradient(90deg, rgb(0,104,136)0%, rgb(0,175,204)40%, rgb(0,104,136)100%);
    background-color: rgb(0,175,204);
    font-family: 'Lora', serif ,'Noto Serif JP', serif;
    color: #10203d;
    /* color: #c9caca; */
    font-weight: 500;
    font-size: 15px;
    margin: 0;
    padding: 0;
}
header{
    display: none;
}
/* PageTopボタン */
#page_top{
    width: 60px;
    height: 60px;
    position: fixed;
    right: 30px;
    bottom: 20px;
    opacity: .6;
    z-index: 100;
}
  #page_top a{
    width: 60px;
    height: 60px;
    text-decoration: none;
  }
  #page_top a::before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f139';
    font-size: 50px;
    color: #c9caca;
  }
/* Fadein*/
/* 初期値 */
.fadeInItem{
    opacity: 0;
}
/* イベント実行時） */
.fadein{
    opacity: 1;
    /* all 現れる速度(.5s 5sなど) 現れ方*/
    transition : all 5s ease-out;
}
/* スライドして現れる */
/* 初期値 */
.slideitem{
    opacity: 0;
    transform : translate(50px, 0);
}
/* イベント実行時 */
.slidein{
    opacity: 1;
    /* all 現れる速度(.5s 5sなど) 現れ方*/
    transition : all 1s ease;
    transform: translate(0, 0);
}
/* Swiper */
.swiper{
width: 90%;
height: auto;
margin: 0 auto;
}
.swiper img{
width: 100%;
}
.swiper-button-prev, .swiper-button-next{ 
color: #c9caca;
}
/* ---JQここまで--- */

/* 全体 */
ul{
    margin: 5px 0 15px 0;
    list-style-type: square;
    padding-inline-start: 20px;
}
p{
    margin: 0;
    margin-bottom: 5px;
}
section{
    /* width: 70%; */
    /* min-width: 940px; */
    width: 940px;
    margin: 200px auto;
}
h2{
    font-size: 28px;
    font-style: italic;
    font-weight: normal;
    color: #f2cb25;
}
article{
    margin-bottom: 150px;
}
h3{
    font-size: 22px;
    color: #c9caca;
}
h4{
    margin: 0;
    font-size: 18px;
    color: #c9caca;
}
/* ホーム画面 */
main{
    width: 100%;
    min-width: 980px;
    height: 250px;
    padding-top: 180px;
    padding-right: 0px;
    margin: 50px auto;
}
#obi{
    background-color: #c9caca;
    width: 100%;
    height: 120px;
    display: flex;
}
.name{
    width: 35%;
    display: flex;
    justify-content: flex-end;
}
.name img{
    width: 200px;
    height: auto;
    margin-right: 10px;
    align-self: flex-end;
}
.main_img{
    width: 65%;
    display: flex;
    justify-content: left;
}
.main_img img{
    align-self: center;
    width: 600px;
    height: 355px;
    padding-bottom: 40px;
    padding-left: 20px;
}
/* メニューボタン */
nav{
    width: 80%;
    max-width: 940px;
    min-width: 900px;
    margin: 50px auto;
}
.main_menu{
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
}
nav li{
    list-style: none;
}
nav a{
    text-align: center;
    text-decoration: none;
    color: #10203d;
    font-size: 26px;
    transition: color 0.3s;
}
/* マウスを乗せたとき */
li a:hover{
    color: #f2cb25;
    font-style: italic;
}
li a:active{
    color: #f2cb25;
    font-style: italic;
}
.main_menu{
    display: flex;
    flex-direction: row;
    position: relative;
}
/* ドローダウンメニュー */
.ddmenu_ul{
    display: none;
    position: absolute;
    margin: 0;
    padding: 0 10px;
}
.ddmenu:hover .ddmenu_ul{
    display: block;
}
.ddmenu_li{
    position: relative;
}
.ddmenu_li a{
    font-size: 16px;
}

/* スクロール画面：作品一覧 */
/* 4色情報ボックス */
.info_box{
    display: flex;
    box-sizing: border-box;
}
.info_box div{
    width: 80px;
    height: 70px;
    margin: 0 5px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
.info_box p{
    font-size: 12px;
}
.size_box{
    flex-direction: column;
    background-color: #f3981d;
    box-sizing: border-box;
}
.c_date_box{
    flex-direction: column;
    background-color: #009b9f;
    box-sizing: border-box;
}
.c_hour_box{
    flex-direction: column;
    background-color: #a688bd;
    box-sizing: border-box;
}
.tool_box{
    background-color: #00947a;
    box-sizing: border-box;
}
.tool_box img{
    width: 50%;
}

/* Web Design */
.webbox{
    display: flex;
}
.bnr_aside{
    width: 20%;
    margin-right: 20px;
}
.bnr_aside img{
    width: 90%;
    max-width: 160px;
    height: auto;
} 
.bnr_box, .kv_box{
    width: 80%;
    margin-left: 20px;
}
.img_obi img{
    width: 100%;
    max-width: 728px;
    height: auto;
}
.banner1{
    display: flex;
    margin-top: 50px;
}
.img_box, .web_text{
    width: 50%;
}
.web_text{
    margin-left: 50px;
}
.web_text p{
    margin-left: 0;
}
#web_info_box{
    justify-content: flex-end;
    margin-top: 20px;
}
#web_info_box p{
    margin-left: 0;
}
details{
    margin-bottom: 5px;
}
details summary{
    color: #c9caca;
}
/* Key Visual */
.KV_photo{
    width: 500px;
    height: auto;
}
.KV_text{
    padding-left: 70px;
}
.KV_text p{
    margin-left: 0;
}
#KV_info_box{
    justify-content: flex-end;
    margin-top: 20px;
}
#KV_info_box p{
    margin-left: 0;
}
/* Twitterヘッダー画像 */
.twt_box{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.twt_box p{
    width: 80%;
    align-self: center;
}
.twt_img{
    width: 100%;
}
.twt_info{
    display: flex;
    flex-direction: row;
}
.twt_text{
    width: 50%;
    margin: 10px 0 0 80px;
}
#twt_info_box{
    width: 50%;
    margin: 0 80px 20px 0;
    justify-content: flex-end;
    align-items: flex-end;
}
#twt_info_box p{
    text-align: center;
}
.WSD{
    width: 60%;
}
.WSD img{
    width: 100%;
    height: auto;
    margin: 0 auto;
}
.WSD figcaption{
    font-size: 12px;
}
.ws_text{
    width: 50%;
    margin: 10px 0 0 20px;
}
.ws_text p{
    width: 100%;
}
#ws_info_box{
    justify-content: flex-end;
    text-align: center;
    align-items: flex-end;
    width: 50%;
    margin-bottom: 20px;
}
.twt_box .comingsoon{
    width: 60%;
    height: 200px;
    background: #c9caca;
    text-align: center;
    font-size: 20px;
    padding: 100px 20px 0 20px; 
}

/* GraphicDEsign */
.box{
    display: flex;
    flex-direction: row;
}
/* 作品 */
.gd_box{
    display: flex;
    flex-direction: column;
}
.sakuhin_img, .sakuhin_info{
    width: 100%;
    display: flex;
    flex-direction: row;
}
.yoko , .sakuhin_img .mockup{
    width: 50%;
}
.sakuhin_img p{
    margin: 0;
}
.mockup{
    align-self: center;
}
.mockup img{
    transform: rotate(10deg);
    width: 60%;
    max-width: 250px;
    margin-top: 30px;
}
.sakuhin_img .mockup{
    text-align: center;
    align-self: flex-start;
}
.mockup img:hover{
    transform: scale(1.5,1.5) rotate(10deg);
}
.yoko img{
    width: 100%;
    height: auto;
}
.yoko img:hover{
    transform: scale(1.5,1.5) translateX(-50px);
}
/* 作品の説明 */
.sakuhin_text{
    width: 50%;
    margin-top: -50px;
    margin-left: 150px;
}
.sakuhin_text p{
    margin: 0 0 10px 0;
}
#yoko_info_box{
    width: 50%;
    margin: 110px 0 0 0;
    justify-content: center;
}
/* 縦作品用追加CSS */
.tate{
    margin: 0;
}
.tate img{
    width: auto;
    height: 500px;
}
.tate_sakuhin_mockup img{
    transform: rotate(10deg);
    width: 250px;
    margin: 80px 0 0 20px;
}
.tate_sakuhin_mockup img:hover{
transform: scale(1.5,1.5) rotate(10deg);
}
.tate_sakuhin_info{
    width: 50%;
    margin-top: -500px;
    padding-left: 340px;
}
.tate_sakuhin_info p{
    padding-bottom: 5px;
}
span{
    color: #c9caca;
}
#tate_info_box{
    width: 50%;
    margin: 20px 0 0 0;
    display: flex;
}
/* ロゴ */
.logo_box{
    display: flex;
    flex-direction: row;
}
.logo_box article{
    margin-bottom: 10px;
}
.logo{
    width: 33%;
    margin-bottom: 100px;
    display: flex;
    flex-direction: column;
}
.logo_item{
    width: 100%;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo_item img{
    width: 90%;
    height: auto;
}
#logo_mockup{
    display: flex;
    justify-content: space-around;
}
#logo_mockup img{
    width: 80%;
}
#logo_mockup img:hover{
    transform: scale(1.5,1.5);
}
.logo_text{
    width: 90%;
    height: 90px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
#logo_info_box{
    width: 95%;
    margin: 0 auto;
    justify-content: flex-end;
}
/* 名刺 */
.bc_box{
    display: flex;
}
.bc_img{
    display: flex;
    flex-direction: column;
    width: 60%;
}
.bc_info{
    display: flex;
    flex-direction: column;
    width: 40%;
}
.bc_text {
    width: 80%;
    height: 100%;
    align-self: flex-end;
}
.bc_img img{
    width: 90%;
}
.bc_img .mockup{
    width: 50%;
}
#bc_info_box{
    width: 100%;
    margin-top: 100px;
    justify-content: flex-end;
    align-items: flex-end;
}
/* グッズ */
#OP p{
    font-size: 18px;
    margin: 10px 0;
}
#OP a:hover{
    color: #f2cb25;
}
figure{
    width: 200px;
    margin: 10px;
}
figcaption{
    text-align: center;
}
#item{
    margin: 0;
}

/* Materials */
#photo p{
    font-size: 18px;
}
.P_box{
    display: flex;
    flex-flow: row wrap;
}
.P_box figure{
    width: 20%;
    text-align: center;
}
.P_box img{
    width: 90%;
    height: auto;
}
.P_box p{
    width: 25%;
    margin-bottom: 20px;
}
.k_box{
    display: flex;
    flex-flow: row wrap;
}
.k_box p{
    width: 20%;
    margin-bottom: 20px;
}
.k_box img{
    width: 80%;
    height: auto;
}
.items{
    margin-bottom: 5px;
}
.k_box img:hover{
    transform: scale(1.5,1.5);
}
.P_box img:hover{
    transform: scale(1.5,1.5);
}

/* フッター */
footer{
    width: 80%;
    height: 18px;
    margin: 10px auto;
}
footer p{
    font-size: 12px;
    text-align: center;
}

/* タブレット用のレイアウト（一番大きいタブレットipad pro12.9の横幅に合わせている） */
@media screen and (max-width:1024px){
    main{
        width: 100%;
        min-width: auto;
        margin: 50px auto;
    }
    .name img{
        height: 60%;
        width: auto;
    }
    .main_img img{
        width: 80%;
        height: auto;
    }
    nav{
        width: 90%;
        max-width: auto;
        min-width: auto;
    }
    nav a{
        font-size: 22px;
    }
    section{
        width: 85%;
        min-width: 650px;
    }
    .slideitem{
        opacity: 0;
        transform : translate(0,15px);
    }
    .slidein{
        opacity: 1;
        /* all 現れる速度(.5s 5sなど) 現れ方*/
        transition : all 1s ease-in;
        transform: translate(0, 0);
    }
    .info_box div {
        width: 70px;
        height: 60px;
    }
    .info_box p{
        font-size: 11px;
    }
    .banner1 img{
        max-width: 100%;
        height: auto;
    }
    .bnr_img img{
        width: 100%;
        max-width: 700px;
    }
    .wsd{
        width: 80%;
    }
    .ws_text {
        margin: 10px 0 0 0;
    }
    .key_aside, .kv_box{
        width: 50%;
    }
    .key_aside img{
        width: 100%;
    }
    .twt_box .comingsoon{
        width: 80%;
        font-size: 18px;
    }

    /* GD(ipad) */
    .sakuhin_text {
        margin: 40px 0 0 50px;
    }
    #yoko_info_box{
        margin-bottom: 20px;
        align-self: flex-end;
    }
    .tate_sakuhin_info {
        margin-top: -200px;
        padding-left: 100px;
    }
    #tate_info_box{
        align-items: flex-end;
        justify-content: center;
        margin-bottom: 20px;
    }
    .tate{
        width: 60%;
    }
    .tate_sakuhin_mockup{
        width: 40%;
    }
    .tate_sakuhin_mockup img{
        margin: 20px 0 0 0;
    }
    #bc_info_box{
        margin-top: 0;
    }
    .mockup img:hover{
        transform: scale(1,1) rotate(10deg);
    }
    .yoko img:hover{
        transform: scale(1,1) translateX(0px);
    }
    .tate img:hover{
        transform: scale(1, 1) translateX(0px);
    }
    .tate_sakuhin_mockup img:hover{
        transform: scale(1,1) rotate(10deg);
    }
    #logo_mockup img:hover, .logo_item img:hover{
        transform: none;
    }
    .k_box img:hover, .P_box img:hover{
        transform: none;
    }
}

/* レイアウト崩れ中間用 */
@media screen and (max-width:700px){
    main{
        margin: 0 auto;
    }
    .main_img img{
        padding-bottom: 0;
    }
    nav a{
        font-size: 18px;
    }
    section{
        min-width: auto;
    }
    .banner1{
        flex-direction: column;
        margin-top: 20px;
    }
    .web_text{
        margin: 0;
        width: 100%;
    }
    #web_info_box{
        margin-top: 10px;
    }
    .KV_text{
        padding-left: 10px;
    }
    #KV_info_box {
        margin-top: 20px;
    }
    .twt_info{
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
    }
    .twt_text{
        width: 100%;
        margin: 10px 0;
    }
    #twt_info_box{
        width: 100%;
    }
    .ws_text{
        width: 100%;
    }
    #ws_info_box{
        width: 100%;
        margin-top: 20px;
    }
    .sakuhin_info{
        flex-direction: column-reverse;
    }
    #yoko_info_box{
        width: 100%;
        margin-top: 0;
    }
    .sakuhin_text{
        width: 100%;
        margin: 30px 0;
    }
    .tate img{
        width: 100%;
        height: auto;
    }
    .tate_sakuhin_mockup img {
        width: 200px;
        margin: 50px 20px;
    }
    #tate_info_box{
        width: 100%;
    }
    .tate_sakuhin_info{
        width: 90%;
        margin: 20px auto;
        padding: 0;
    }
    .bc_img, .bc_info{
        width: 50%;
    }
    .bc_text{
        align-self: center;
    }
}

/*スマホ用のレイアウト*/
@media screen and (max-width:599px){
    /* スライド */
    .slideitem{
        opacity: 0;
        transform: translate(0,5px);
    }
    .slidein{
        opacity: 1;
        /* all 現れる速度(.5s 5sなど) 現れ方*/
        transition : all 1s ease-in;
        transform: translate(0,0);
    }
    /* パージトップ */
    #page_top{
        width: 50px;
        height: 50px;
        right: 20px;
        bottom: 20px;
        z-index: 200;
        opacity: .5;
    }
    
    /* ハンバーガーメニュー */
    /* クリック前 */
    header{
        display: block;
    }
    .nav_toggle {
    display: block;
    position: relative;
    width: 60px;
    height: 60px;
    margin: 10px 0 0 10px;
    background-color: #c9caca;
    z-index: 100;
    }
    .nav_toggle i {
    display: block;
    width: 50%;
    height: 2px;
    background-color:#10203d;
    position: absolute;
    transition: transform .5s, opacity .5s;
    }
    .nav_toggle i:nth-child(1) {
        top: 30%;
        left: 25%;
    }
    .nav_toggle i:nth-child(2) {
        top: 0;
        bottom: 0;
        left: 25%;
        margin: auto;
    }
    .nav_toggle i:nth-child(3) {
        left: 25%;
        bottom: 30%;
    }
    .menu {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity .5s, visibility .5s;
        z-index: 50;
        overflow: scroll;
        background-color: #00afcc;
    }
    .menu >ul{
        list-style-type: none;
        margin: 10px 0 10px 60px;
        opacity: .8;
    }
    .menu_2nd{
        margin: 10px 0 0 10px;
    }
    .menu li{
        margin-bottom: 10px;
    }
    .menu a{
        font-size: 18px;
        text-decoration: none;
        color: #fff;
    }
    .menu a:active{
        font-size: 18px;
    }
    /* クリック後 真ん中を決して上下の棒をXに変形*/
    .nav_toggle.show i:nth-child(1) {
        transform: translateY(11px) rotate(-45deg);
    }
    .nav_toggle.show i:nth-child(2) {
        opacity: 0;
    }
    .nav_toggle.show i:nth-child(3) {
        transform: translateY(-11px) rotate(45deg);
    }
    .menu.show {
        opacity: 1;
        visibility: visible;
    }
    html.fixed, html.fixed body{
        height: 100%;
        overflow: hidden;
    }

    /* トップページ */
    main{
        min-width: auto;
        height: auto;
        padding-top: 150px;
        margin-top: 0;
        margin-bottom: 400px;
    }
    #obi{
        max-width: 100%;
        height: 60px;
        flex-wrap: nowrap;
        flex-direction: column;
    }
    .name{
        width: 100%;
        height: 60px;
    }
    .name img{
        height: 85%;
        width: auto;
    }
    .main_img{
        width: 100%;
    }
    .main_img img{
        width: 100%;
        height: auto;
        padding: 0;
        margin-top: 10px;
    }
    nav{
        max-width: 100%;
        display: none;
        margin: 0 auto;
        padding-top: 40px;
    }
    /* 作品 */
    section{
        width: 90%;
        max-width: 428px;
        margin: 100px auto;
    }
    article{
        margin-bottom: 80px;
    }
    h2{
        font-size: 20px;
        margin: 10px 0;
    }
    h3{
        font-size: 15px;
        margin: 10px 0;
    }
    h4{
        font-size: 14px;
    }
    p, ul{
        font-size: 14px;
    }
    .info_box p{
        font-size: 11px;
    }
    /* バナー */
    .bnr_aside{
        width: 15%;
        margin: 0;
    }
    .bnr_aside img{
        width: 100%;
        margin: 0 auto;
    }
    .bnr_box{
        width: 75%;
    }
    .img_box img{
        width: 100%;
        height: auto;
    }
    .banner1{
        flex-direction: column;
        margin-top: 20px;
    }
    .web_text{
        width: 100%;
        margin: 10px 0;
    }
    #web_info_box{
        margin: 0;
        justify-content: flex-end;
    }
    /* キービジュアル */
    #KVF .webbox, #KVS .webbox{
        flex-direction: column;
    }
    .key_aside{
        width: 90%;
        margin: 0 auto;
    }
    .key_aside img, .KV_text{
        width: 100%;
    }
    .kv_box{
        width: 90%;
        margin: 10px auto;
    }
    .KV_text{
        padding: 0;
    }
    #KV_info_box {
        margin-top: 20px;
    }
    .KV_photo{
        width: 100%;
    }
    /* twitter header */
    .swiper{
        width: 100%;
    }
    .swiper-button-next::after, .swiper-button-prev::after{
        font-size: 26px;
    }
    .twt_text{
        width: 90%;
        margin: 10px auto;
    }
    .twt_box p{
        width: 100%;
    }
    .WSD{
        width: 95%;
        margin: 0 auto;
        padding: 0;
    }
    .WSD figcaption {
        font-size: 11px;
    }
    .ws_text {
        width: 90%;
        margin: 20px auto;
    }
    #ws_info_box{
        width: 100%;
        margin: 0 auto;
        justify-content: center;
    }
    .twt_box .comingsoon{
        height: 50px;
        margin: 0 auto;
    }

    /* GD */
    /* DVD */
    .sakuhin_img{
        margin: 10px auto;
        flex-direction: column;
        align-items: center;
    }
    .yoko{
        width: 90%;
        margin: 0 auto;
    }
    .yoko img{
        width: 100%;
    }
    .mockup{
        width: 80%;
        padding: 10px 0 0 20px;
    }
    .sakuhin_img .mockup{
        width: 80%;
    }
    .sakuhin_img .mockup img{
        width: 70%;
    }
    .sakuhin_info{
        margin: 5px auto;
    }
    .sakuhin_text{
        width: 90%;
        margin: 10px auto;
    }
    #yoko_info_box{
        text-align: center;
    }
    .tate{
        width: 80%;
    }
    .tate img{
        width: 100%;
        height: auto;
    }
    .tate_sakuhin_mockup{
        width: 60%;
    }
    .tate_sakuhin_mockup img{
        width: 100%;
        margin: 50px 0 10px 0;
    }
    .tate_sakuhin_info{
        width: 80%;
        margin: 10px auto;
        padding: 0;
    }
    #tate_info_box{
        width: 100%;
        justify-content: center;
    }
    /* ロゴ */
    .logo_box article{
        margin-bottom: 30px;
    }
    .logo_item{
        height: 100px;
    }
    .logo_text{
        height: 150px;
        margin-bottom: 30px;
    }
    .logo_mockup{
        width: 90%;
    }
    #LOGO .swiper-button-next::after, #LOGO .swiper-button-prev::after{
        font-size: 20px;
        color: #00947a;
    }
    #LOGO .swiper-button-next, #LOGO .swiper-button-prev{
        width: 1px;
    }
    .bc_box {
        display: flex;
        flex-direction: column;
    }
    .bc_img, .bc_info{
        width: 100%;
    }
    .bc_img p{
        text-align: center;
    }
    .bc_img .mockup{
        padding: 0;
        width: 60%;
    }
    .bc_text{
        width: 90%;
        margin: 15px auto;
    }
    #bc_info_box{
        justify-content: center;
    }
    .k_box p{
        width: 30%;
    }
    #OP p{
        margin: 10px auto;
        font-size: 14px;
    }
    .P_box{
        width: 90%;
        margin: 0 auto;
    }
    .P_box figure{
        width: 50%;
        margin: 0;
    }
    .P_box img{
        width: 90%;
        margin: 5px auto;
    }
    #OP figcaption{
        font-size: 10px;
    }
    #photo p{
        font-size: 14px;
    }
    .P_box p {
        width: 50%;
        margin-bottom: 0;
    }
    footer{
        width: 100%;
        box-sizing: border-box;
    }
    footer p{
        font-size: 10px;
    }
}