@charset "utf-8";
/*========= LoadingのためのCSS ===============*/
/* Loading背景画面設定 */
#splash {
    position: fixed;
    top:0;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    background-color:#ffffff;
}
/* Loading画像中央配置 */
#splash_logo {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:500px; 
    margin: 0 auto;
    text-align: center;
}
g .cls-3 {
    stroke-dasharray: 1000px;
    stroke: #252526;
    stroke-width: 0.75px;
    animation: svgAnime01 5.0s cubic-bezier(1, 0.19, 0.63, 0.78);        
}
@keyframes svgAnime01 {
    0% {
        stroke-dashoffset: 1000px;
        fill: transparent;
        }
    40% {
        stroke-dashoffset: 0px;
        fill: transparent;
        }
    48% {
        stroke-dashoffset: 0px;
        /*stroke: transparent;*/
        fill:#252526;
        }
}
g .cls-2, .cls-1{
    stroke-dasharray: 1000px;
    stroke-width: 5px;
    animation: svgAnime02 3.5s cubic-bezier(1, 0.19, 0.63, 0.78);      
}
@keyframes svgAnime02 {
    0% {
        stroke-dashoffset: 1000px;
        fill: transparent;
        }
    /*70% {
        stroke-dashoffset: 0px;
        fill: transparent;
        }*/
    50% {
        stroke-dashoffset: 0px;
        /*stroke: transparent;*/
        fill:auto;
        }
}
.cls-1 {
    stroke: #d60050;
    stroke-linejoin: bevel;
    stroke-width: 4.67px;
}
.cls-1, .cls-2 {
    fill:none;
}
.cls-2 {
    stroke: #252526;
    stroke-miterlimit: 10;
    stroke-width: 4.84px;
}

/*========= 画面遷移のためのCSS ===============*/
/*画面遷移アニメーション*/
.splashbg{
    display: none;
}
/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display:block;
    animation-name:PageAnime;
    animation-duration:1.0s;
    animation-timing-function:ease-in-out;
    animation-fill-mode:forwards;
    content: "";
    position:fixed;
    z-index: 10000;
    width: 50%;
    height: 100vh;
    top: 0;
    left: 0;
    transform: translateX(-300%) skewX(-45deg);
    background-color: #252526;/*伸びる背景色の設定*/
}
@keyframes PageAnime{
  0% {
    transform-origin:left;
    transform:translateX(-300%) skewX(-45deg);
  }
  100% {
    transform-origin:left;
    transform:translateX(500%) skewX(-45deg);
  }
}
/*画面遷移の後現れるコンテンツ設定*/
#container{
  opacity: 0;/*はじめは透過0に*/
}
/*bodyにappearクラスがついたら出現*/
body.appear #container{
  animation-name:PageAnimeAppear;
  animation-duration:1.5s;
  animation-delay: 0.8s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes PageAnimeAppear{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*==サークルボタン共通設定==*/
.circle_btn{
    width: 100px;
    margin-top: -54px;
    margin-left: -45px;
    transform-origin:center;
    animation:3.5s linear infinite rotation1;
}
@keyframes rotation1{
    0%{ transform:rotate(0);}
    100%{ transform:rotate(360deg); }
}

/*==セクションタイトル共通設定==*/
.section_title{
    font-size: 67px;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 110px;
    font-family:'Cantarell', sans-serif;
}

/*==背景が流れるボタン共通設定==*/
.btn{
    position: relative;
    overflow: hidden;
    background-color: #fff;
    text-align: center;
    outline: none;
    font-size: 16px;
    font-family:'Cantarell', sans-serif;
    letter-spacing: 2px;
    display: table;
    padding: 1em 2.5em;
    min-width: 15em;
    box-sizing: border-box;
}
.btn::after {
    position: absolute;
    top: 50%;
    right: 2em;
    width: 0.5em;
    height: 0.5em;
    transform: translateY(-50%) rotate(45deg);
    border-right: 1px solid currentColor;
    border-top: 1px solid currentColor;
    content: "";
}
.btn span {
    position: relative;
    z-index: 3;
    color:#252526;
    font-size: 20px;
    letter-spacing: 2px;
}
.btn:hover span{
    color:#fff;
}
/*== 背景が流れる（左から右） */
.bgleft:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background:#252526;/*背景色*/
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform: scale(0, 1);
    transform-origin: right top;
}
.bgleft:hover:before{
    transform-origin:left top;
    transform:scale(1, 1);
}

/*==背景が白のボタン共通設定==*/
.common-btn{
    width: 15em;
    margin: 0 auto;
    border: 1px solid #252526;
    border-radius: 2px;
    margin-top: 150px;
}

.sp_nav, .sp_mv, .sp_only, .sp_about, .web_sp, .sp_service, .graphic_text_sp, 
.contact_text_sp, .sp_modal, .sp_gallery, .about_block_sp, .support_text_sp, 
.title_text_sp, .sp_only_min, .sp_text, .modal_text_sp{
    display: none;
}

/*==header==*/
#header{
    box-sizing: border-box;
}
.header_container{
    position: fixed;
    top:0;
    display: flex;
    width: 94%;
    justify-content: space-between;
    padding: 10px 60px 30px 60px;
    z-index: 9998;
    background: #fff;
    align-items: end;
}
.logo a{
    align-items: center;
}
.logo img{
    max-width: 208px;
}
.header_nav{
    display: flex;
}
.header_nav ul{
    display: flex;
    align-items: center;
    gap: 55px;
}
.header_nav a{
    font-size: 16px;
    font-weight: 700;
    font-family:'Cantarell', sans-serif;
    letter-spacing: 1px;
}
.header_contact ul{
    display: flex;
    height: 100%;
    align-items: center;
    gap: 20px;
}
.gnv-border{
    width: 30px;
    border: 0.5px solid #252526;
}
.header_contact a{
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    font-family:'Cantarell', sans-serif;
}
.main_visual{
    display: flex;
    height: 100vh;
}
.mv_main{
    position: fixed;
    right: 0;
    width: calc(100% - 460px);
    margin-top: 120px;
    z-index: -1;
}   
/*mainまでスクロールしたら消す*/
.is-hidden {
    visibility: hidden;
    opacity: 0;
}
.mv_img{
    width: 100%;
    height: 685px;
    object-fit: cover;
    margin-top: 50px;
    z-index: -10;
}
.mv_inner{
    width: 460px;
    margin-top: 15%;
    margin-left: 80px;
    margin-right: -120px;
    z-index: 1;
}
.mv_work_img{
    width: 100%;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .2);
}
.mv_copy{
    font-size: 28px;
    font-weight: 500;
    font-family:'Cantarell', sans-serif;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.mv_copy img{
    width: 24px;
    margin: 0 15px 2px 13px;
}
.mv_logo{
    font-size: 38px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 60px;
    font-family:'Cantarell', sans-serif;
}

/*==TOP about==*/
main{
    background-color: #fff;
}
.about{
    background-color: #252526;
    margin-top: 124px;
    padding: 150px 30px;
    position: relative;
    overflow: hidden;
}
.abou_title{
    position: relative;
    text-align: center;
    z-index: 5;
    margin-bottom: -30px;
}
.abou_title img{
    width: 654px;
}
.about_inner{
    max-width: 1100px;
    display: flex;
    margin: 0 auto;
    justify-content: space-around;
    align-items: center;
}
.about_lead{
    width: 320px;
    color: white;
    font-size: 45px;
    font-weight: 600;
    line-height: 1.57;
    letter-spacing: 2px;
    text-align: left;
    z-index: 1;
}
.about_img{
    width: 100%;
    height:489px;
    object-fit: cover;
}
.about_contents{
    margin-top: 30px;
    margin-left: 52px;
    max-width: 300px;
}
.about_text{
    width: 100%;
    color: white;
    font-size: 16px;
    line-height: 1.8;
    text-align: left;
    font-feature-settings: "palt";
}
.bottom_space{
    width: 100%;
    color: white;
    font-size: 16px;
    line-height: 1.8;
    text-align: left;
    margin: 25px auto;
    font-feature-settings: "palt";
}
.about-btn{
    margin-top: 30px;
    border: 1px solid #fff;
    border-radius: 2px;
    width: 15em;
}

/*==TOP service==*/
.service{
    margin: 157px 0 233px 0;
    text-align: center;
}
.service_icon{
    max-width: 1100px;
    margin: 0 auto;
    text-align: right;
    margin-top: 80px;
    margin-bottom: -5px;
}
.service_icon img{
    width: 62px;
    text-align: right;
    margin-right: 20px
}
.service_inner{
    max-width: 1100px;
    display: flex;
    margin: 0 auto;
    justify-content: space-around;
    align-items: center;
    padding: 0 30px;
}
.service_contents{
    width: 40%;
    background-color: #252526;
    padding: 40px;
    border-radius: 2px;
}
.service_contents h3{
    color: #fff;
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 1px;
    font-family:'Cantarell', sans-serif;
}
.service_contents h3 img{
    width: 43px;
    vertical-align: 0;
}
.service_center{
    width: 20%;
}
.service_center img{
    width: 50%;
}
.service_btn_block{
    display: flex;
    margin: 0 auto;
    justify-content: center;
    gap:20px;
    margin-top: 32px;
}
/*ボタン表示するテキストが切り替わる*/
.btntextchange{
    /*テキストの基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
    background-color: #fff;
	border: 1px solid #fff;
	border-radius:2px;
    min-width:150px;
	padding: 20px;
    text-align: center;
	display: inline-block;
    text-decoration: none;
    font-size: 18px;
    color: #252526;
    font-family:'Cantarell', sans-serif;
    outline: none;
    transition: all .2s;
}
/*hoverした際の変化*/
.btntextchange:hover{
    background:#252526;
    color:#fff;
}
.btntextchange span{
    /*絶対配置でテキストの位置を決める*/
	position: absolute;
	left: 50%;
	top:50%;
    transform:translate(-50%,-50%);
    transition: all .5s;
  /*ブロック要素にしてテキスト折り返しなし*/  
	display: block;
	white-space: nowrap;
}
/*差し替わるテキストの設定*/
.btntextchange span:nth-child(2){
	opacity:0;/*透過0に*/
}
/*hoverするとテキストが入れ替わる設定*/
.btntextchange:hover span:nth-child(1){
	opacity:0;/*透過0に*/
}
.btntextchange:hover span:nth-child(2){
	opacity:1;/*不透明に*/
}
.btntextchange::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1em;
    width: 0.5em;
    height: 0.5em;
    color: #252526;
    transform: translateY(-50%) rotate(45deg);
    border-right: 1px solid currentColor;
    border-top: 1px solid currentColor;
}
.btnchange_ja{
    font-size: 16px;
}

/*==TOP web design==*/
.web-design{
    margin-top: 157px;
}
.web-design_inner{
    max-width: 1040px;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    padding: 0 60px;
    gap:121px;
    margin-top: 157px;
}
.web_gallery{
    position: relative;
    width: 50%;
}
.work-type{
    position: absolute;
    transform-origin: bottom left;
    transform: rotate(-90deg);
    bottom: 70px;
    margin-top: 400px;
    font-size: 18px;
    font-weight: 400;
    font-family:'Cantarell', sans-serif;
}
.work-type_pc-only{
    position: absolute;
    transform-origin: bottom left;
    transform: rotate(-90deg);
    bottom: 290px;
    margin-top: 400px;
    font-size: 18px;
    font-weight: 400;
    font-family:'Cantarell', sans-serif;
}
.work_link img{
    width: 90%;
    margin-left: 8px;
}
.web_main_text{
    margin: 22px 0 77px 13px;
    font-size: 16px;
    line-height: 1.8;
    width: 90%;
    text-align: justify;
    font-feature-settings: "palt";
}
.work-title{
    margin: 13px 0 0 13px;
    font-size: 27px;
    font-family:'Cantarell', sans-serif;
}
.work-client{
    margin: 7px 0 0 16px;
    font-size: 14px;
    font-feature-settings: "palt";
}
.work_btn{
    text-align: right;
    margin-top: -70px;
}

/*==graphic==*/
.graphic-design{
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 30px;
}
.graphic_title_block{
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    margin-top: 257px;
}
.graphic_title_block .section_title{
    font-size: 67px;
    letter-spacing: 4px;
    text-align: center;
    margin-top: 0;
}
.graphic-subtitle{
    display: block;
    width: 100%;
    margin-left: 10px;
}
.graphic-subtitle p{
    text-align: right;
    font-size: 20px;
    font-weight: 300;
    margin-top: 8px;
}
.graphic-border{
    width: 100%;
    border: 1px solid #252526;
    margin-top: 10px;
}
.graphic_text_pc{
    max-width: 1100px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.8;
    margin-top: 60px;
    font-feature-settings: "palt";
}
.gallery-slider{
    max-width: 1100px;
    display: flex;
    margin: 0 auto;
    gap:50px;
    margin-top: 80px;
}
.gallery-slider img{
    max-width: 334px;
}
.slick-nav-arrows {
    position: absolute;
    right: 0;
    margin-top: 27px;
    margin-right: 50px;
}
.slick-arrow {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
}
.slick-next {
    right: 0;
}
.slick-prev {
    left: -150px;
}
.page-link{
    font-size: 13px;
}
.slick-prev::before, .slick-next::before{
    box-sizing: border-box;
    width: 40px;
    height: 40px;
	border: 1px solid #252526;
	border-radius: 50%;
    color: transparent;
}
.slick-prev::after{
    top:40%;
    left:45%;
	width: 7px;
	height:7px;
	border-top: 1px solid #252526;
	border-right: 1px solid #252526;
	transform: rotate(-135deg);
    position: absolute;
    content: "";
}
.slick-next::after{
    top:40%;
    left:35%;
	width: 7px;
	height:7px;
	border-top: 1px solid #252526;
	border-right: 1px solid #252526;
	transform: rotate(45deg);
    position: absolute;
    content: "";
}

/*==TOP contact==*/
.contact{
    margin-top: 200px;
    padding: 0;
    font-weight: 600;
    font-family:'Cantarell', sans-serif;
    letter-spacing: 4px;
}
.contact_block{
    border-top: 1px solid #252526;
    border-bottom:  1px solid #252526;
    float: left;
    top:0;
    left:0;
}
.contact_inner{
    width: 100%;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
}
.contact_btn{
    width: 100%;
}
.contact_text_pc{
    font-weight: 500;
    margin-top:100px;
    text-align: center;
}
.contact_text_pc p{
    font-size: 25px;
    line-height: 1.8;
}

/*==footer==*/
.pagetop{
    text-align: right;
    margin-right: 30px;
    background-color: white;
}
.pagetop_btn{
    width: 88px;
}
.footer_inner{
    display: flex;
    justify-content: space-around;
    padding: 127px;
    background-color: #252526;
    align-items: center;
}
.footer_logo{
    color: #fff;
    font-size: 31px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 54px;
    font-family:'Cantarell', sans-serif;
}
.footer_menu{
    display: flex;
    gap: 80px;
}
.footer_menu_block{
    display: block;
}
.footer_menu_block li{
    color: #fff;
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 25px;
    font-family:'Cantarell', sans-serif;
}
.privacy a{
    font-size: 12px;
    font-family:'Cantarell', sans-serif;
}
.copyright{
    background-color: #252526;
    text-align: center;
    font-size: 12px;
    color: #fff;
    padding-bottom: 41px;
    font-family:'Cantarell', sans-serif;
}
.footer_btn .btn{
    border: 1px solid #fff;
    padding: 40px 90px;
}

/*footer topのみ*/
.footer_contact{
    font-size: 32px;
    font-weight: 500;
    font-family:'Cantarell', sans-serif;
    letter-spacing: 4px;
}
.footer_btn_top-only{
    margin-top: 50px;
}
.footer_btn_top-only .btn{
    padding: 40px 90px;
}

/*==下層ページ about==*/
#about{
    padding: 80px;
}
.about_block{
    max-width: 1100px;
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    margin: 161px auto;
    padding: 0 30px;
    gap:30px
}
.about_message .about_lead{
    color: #252526;
    font-size: 27px;
    font-weight: 600;
}
.about_textarea .about_text{
    color: #252526;
    margin: 30px 0;
    font-size: 16px;
    width: 100%;
}
.about_textarea .bottom_space{
    color: #252526;
    margin: 30px 0;
    font-size: 16px;
    width: 100%;
}
.about_profile{
    max-width: 1008px;
    display: flex;
    margin:  0 auto;
    align-items: center;
    padding: 0 30px;
}
.owner_img img{
    width: 545px;
}
.profile_border{
    width: 117px;
    margin-top: -60px;
    margin-left: -65px;
    margin-right: 30px;
    border: 0.7px solid #252526;
}
.owner_item h3{
    font-size: 38px;
    letter-spacing: 1px;
    margin-bottom: 23px;
    font-family:'Cantarell', sans-serif;
}
.owner_name{
    font-size: 24px;
    letter-spacing: 1px;
    margin-bottom: 59px;
    font-family:'Cantarell', sans-serif;
}
.owner_cat{
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    font-family:'Cantarell', sans-serif;
    background-color: #252526;
    padding: 0 16px;
    border-radius: 2px;
}
.owner_detail p{
    margin-top: 16px;
    margin-bottom: 18px;
    line-height: 1.8;
}
.message{
    max-width: 620px;
    margin: 0 auto;
    margin-top: 112px;
    font-feature-settings: "palt";
}
.message p{
    font-size: 15px;
    line-height: 1.9;
}
.message .bottom_space{
    width: 100%;
    color: #252526;
    text-align: left;
    margin: 30px auto;
}
.sign{
    margin-top: 44px;
    font-size: 18px;
    font-family:'Cantarell', sans-serif;
    line-height: 1.5;
    text-align: right;
}
.profile_contents{
    max-width: 1000px;
    display: flex;
    margin: 0 auto;
    align-items: baseline;
    gap: 20px;
    justify-content: space-around;
    margin-top: 150px;
    padding: 0 30px;
}
.profile_block{
    max-width: 430px;
}
.profile_block_list{
    font-size: 43px;
    font-weight: 700;
    font-family:'Cantarell', sans-serif;
    letter-spacing: 2px;
    margin-top: -5px;
    margin-bottom: 64px;
    margin-left: -10px;
}
.last_img{
    width: 17px;
    vertical-align: 0;
}
.profile_block_message{
    font-size: 35px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 64px;
}
.profile_block li{
    font-size: 16px;
    line-height: 1.8;
    font-feature-settings: "palt";
}
.profile_block p{
    font-size: 15px;
    line-height: 1.8;
    font-feature-settings: "palt";
}
.link_btn_area{
    max-width: 900px;
    display: flex;
    margin: 0 auto;
    gap: 20px;
    justify-content: space-between;
    margin-top: 150px;
    margin-bottom: 131px;
    padding: 0 30px;
}
.btn_block{
    width: 200px;
    text-align: center;
}
.link_btn{
    width: 100%;
    margin-top: 33px;
}
.btn_block span{
    font-size: 30px;
    font-weight: 600;
    font-family:'Cantarell', sans-serif;
    letter-spacing: 2px;
}
.footer_btn_text{
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 10px;
}
.btn_text{
    font-size: 11px;
    font-family:'Cantarell', sans-serif;
    color: #666666;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

/*==下層ページ work==*/
.title_text{
    font-size: 16px;
    line-height: 1.8;
    font-feature-settings: "palt";
    text-align: center;
    margin: 100px 0;
}
.title_block{
    max-width: 1500px;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    right: 0;
    margin-bottom: 140px;
}
.title_block .section_title{
    font-size: 51px;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 0;
}
.subtitle{
    display: block;
    width: 100%;
}
.subtitle p{
    text-align: right;
    font-size: 20px;
    font-weight: 300;
    margin-top: 5px;
}
.work-border{
    border: 1px solid #252526;
    margin-top: 8px;
}
.work_list{
    max-width: 1500px;
    margin: 0 auto;
}
.work_menu{
    display: flex;
    gap:50px;
    margin-bottom: 98px;
}
.work-text{
    font-size: 14px;
    line-height: 1.8;
    margin-top: 5px;
    margin-left: 12px;
}
.work_list .work-type{
    transform: rotate(-90deg);
    margin-top: 200px;
    font-size: 16px;
    font-weight: 400;
    font-family:'Cantarell', sans-serif;
    letter-spacing: 1px;
}
.work_link:hover img{
    transform: scale(1.04);
    transition-duration: 0.5s ;
}
.work_list .web_main_text{
    margin: 22px 0 77px 13px;
    font-size: 16px;
    line-height: 1.8;
    width: 90%;
    text-align: justify;
    font-feature-settings: "palt";
}
.work_list .work-title{
    margin: 15px 0 0 13px;
    color: #666;
    font-size: 16px;
    font-family:'Cantarell', sans-serif;
}
.work_list .work-client{
    margin: 5px 0 0 13px;
    font-size: 16px;
    line-height: 1.5;
    font-family: 'Cantarell',"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

/* サイドメニューボタン設置 */
.content-wrap{
    display: flex;
    justify-content:space-around;
    gap:60px;
    padding: 60px;
}
aside {
    position: sticky;
    display: flex;
    flex-flow: column;
    top:0;
    height: 100%;
    padding:140px 20px;
    z-index: 9000;
}
.menu_btn{
    font-size: 22px;
    color: #fff;
    font-family:'Cantarell', sans-serif;
    background-color: #252526;
    border-radius: 2px;
    text-align: center;
    margin-bottom: 30px;
    padding:15px 40px;
}

/* モーダルCSS */
.modalArea {
    display: none;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
}
.modalBg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(30,30,30,0.9);
}
.modalWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 800px;
    padding: 50px;
    background-color: #fff;
    border-radius: 2px;
}
.modal-scroll{
    position: relative;
    right: 7px;
    overflow-y: auto;
    max-height: 500px;
    padding: 15px;
}
.modal-scroll::-webkit-scrollbar{
    border-radius: 10px;
    width: 3px;
}
.modal-scroll::-webkit-scrollbar-thumb {
    background-color: #d5d5d5;
    border-radius: 5px;
}
.closeModal {
    position: absolute;
    right: 0;
    cursor: pointer;
    color: #fff;
    font-size: 34px;
    font-weight: 100;
}
.CloseModal{
    bottom: -39px;
}

/*モーダル中身*/
.modalWrapper .title_block{
    margin: 0;
    margin-bottom: 25px;
    justify-content: space-between;
    padding: 0 15px;
}
.modalArea .section_title{
    font-size: 44px;
    letter-spacing: 1px;
}
.modalArea .work-border{
    margin-top: 5px
}
.modalArea .subtitle p{
    font-size: 15px;
    margin-top: 3px;
}
.modal_textarea{
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.modal_text, .modal_text_pc{
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 32px;
    font-feature-settings: "palt";
    text-align: left;
    padding: 0 15px;
}
.price_contents{
    border: 1px solid #252526;
    border-radius: 5px;
    margin: 0 15px;
    padding: 30px;
}
.price_group{
    display: flex;
    gap:20px;
    justify-content: space-around;
    margin-bottom: 48px;
}
.price_border{
    border: 0.7px solid #252526;
}
.price_title h3{
    font-size: 20px;
    margin-bottom: 18px;
}
.price_list h5{
    color: #fff;
    font-size: 14px;
    padding: 3px;
    background-color: #252526;
    text-align: center;
}
.price_title{
    background-color: #fff;
    margin-top: -50px;
    margin-bottom: 40px;
    text-align: center;
}
.price{
    font-size: 14px;
    text-align: center;
    margin-top: 44px;
}
.price span{
    font-size: 20px;
    font-weight: 600;
}
.price_menu h4{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.price_menu p{
    font-size: 12px;
    max-width: 300px;
    margin-bottom: 27px;
}
.price_box{
    display: flex;
    gap:30px
}
.price_list h5{
    width: 80px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 3px;
    background-color: #252526;
    margin-bottom: 15px;
    text-align: center;
}
.price_item li{
    font-size: 12px;
    margin-bottom: 10px;
}
.price_group_text{
    font-size: 14px;
    line-height: 1.8;
    text-align: center;
    margin-bottom: 5px;
}
.flow_img{
    text-align: center;
}
.flow_img img{
    width: 90%;
}
.modalArea .support_item{
    height: 110px;
}
.modalArea .support_inner{
    margin-bottom: 30px;
    justify-content: space-around;
}
.modal_supportarea{
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 30px;
}
.modal_support{
    margin: 0 auto;
    padding: 20px;
}
.modalArea .support_item p{
    font-size: 14px;
}
.modalArea .support_inner .service_center img{
    width: 30px;
}
#modalArea04 .price_list{
    width: 100%;
    align-items: center;
}
#modalArea04 .price_box{
    display: block;
    text-align: center;
}
#modalArea04 .price_box p{
    text-align: left;
    line-height: 1.8;
}
#modalArea04 .price_group{
   gap:30px;
   margin-bottom: 0;
}
#modalArea04 .price_contents{
    width: 600px;
    margin: 0 auto;
    padding: 20px 40px;
}
#modalArea04 .price_title{
    margin-top: -35px;
}
#modalArea04 .price_box p{
    margin-bottom: 10px;
}

/*ページネーション共通*/
.pagination{
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 5px;
    gap: 15px;
    margin: 150px 0;
}
.list-group-item {
    background: rgb(255, 255, 255);
    margin: 10px;
    padding: 10px;
    width: 45%;
}
.pagination li{
    border: 1px solid #252526;
    width: 52px;
    height: 52px;
    border-radius: 50%;
}
.pagination a{
    display: block;
    text-align: center;
    line-height: 52px;
}
.pagination li:hover{
    background-color: #252526;
    color: #fff;
}
.active{
    background-color:#252526;
    color: #fff;
}
.pagination li:first-child{
    border: none;
}
.pagination li:last-child{
    border: none;
}

/*==work詳細共通==*/
.work{
    padding: 30px;
}
.work_mv{
    max-width: 1100px;
    margin: 0 auto;
    margin-top: 150px;
    margin-bottom: 122px;
}
.work_mv img{
    width: 100%;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .2);
}
.work_title_contents{
    max-width: 900px;
    margin: 0 auto;
}
.work_title_inner{
    display: flex;
    align-items: center;
    margin-bottom: 55px;
}
.work_type{
    width: 152px;
    color: #fff;
    background-color: #252526;
    border-radius: 2px;
    padding: 14px 0;
    text-align: center;
    margin-right: 23px;
}
.work_title h2{
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 6px;
    font-family: 'Cantarell',"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}
.work_title h2 span{
    font-size: 20px;
    margin-right: 10px;
}
.work_title a{
    font-size: 16px;
    font-family:'Cantarell', sans-serif;
}

/*== 波紋がふわっと広がる */
.view-site{
    /*波紋の基点とするためrelativeを指定*/
    position: relative;
    /*リンクの形状*/
    display:inline-block;
    margin-left:  300px;
    text-decoration: none;
    color: #333;
    font-family: 'Cantarell', sans-serif;
    outline: none;
}
/*波形の設定*/
.view-site:hover::before {
    content: '';
    /*絶対配置で波形の位置を決める*/
    position: absolute;
    left:30%;
    top:0;
    /*波形の形状*/
    border: 1px solid #333;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /*はじめは不透明*/
  opacity:1;
    /*アニメーションの設定*/
    animation:1s circleanime2 forwards;
}
/*波形が広がるアニメーション*/
@keyframes circleanime2{
  0%{
    transform: scale(0);
  }
  100%{
    transform:scale(2);
    opacity: 0;
  }
}
.onlinestore{
    margin-top: 5px;
    margin-left: 50px;
}
.work_text{
    font-size: 16px;
    line-height: 1.9;
    /*font-feature-settings: "palt";*/
    margin-bottom: 55px;
}
.paragraph{
    margin-top:-30px;
}
.work_desc{
    display: flex;
    gap:75px;
    margin-top: 86px;
    margin-bottom: 86px;
}
.work_table{
    display: flex;
    gap:37px
}
.work_table_long{
    display: flex;
    gap:37px
}
.work_table_title{
    height: 20px;
    border: 1px solid #252526;
    border-radius: 2px;
    padding: 6px;
    margin-top: -8px;
    width: 80px;
    text-align: center;
}
.work_table_title h3{
    font-size: 16px;
    line-height: 20px;
}
.work_table li{
    margin-bottom: 12px;
}
.work_table_long li{
    margin-bottom: 12px;
}
.work-detail{
    max-width:1000px;
    margin: 0 auto;
    margin-top: 150px;
}
.work-detail p{
    margin-bottom: 10px;
}
.work-detail img{
    width: 100%;
    margin-bottom: 50px;
}
/*workボタン共通設定*/
.work_bottom_btn{
    position: relative;
    overflow: hidden;
    color: #fff;
    background-color: #252526;
    border-radius: 2px;
    text-align: center;
    outline: none;
    font-size: 16px;
    font-family:'Cantarell', sans-serif;
    display: table;
    padding: 1em 2.5em;
    min-width: 15em;
    box-sizing: border-box;
    margin: 150px auto;
}
.work_bottom_btn::after {
    position: absolute;
    top: 50%;
    left: 2em;
    width: 0.5em;
    height: 0.5em;
    transform: translateY(-50%) rotate(225deg);
    border-right: 1px solid currentColor;
    border-top: 1px solid currentColor;
    content: "";
}
.work_banner .work_mv{
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
    margin-top: 150px;
    margin-bottom: 100px;
}
.work_banner .work_title_contents{
    max-width: 1000px;
}
.work_banner .work_desc{
    gap:18px;
    justify-content: space-between;
}
.work_banner{
    padding: 0 30px;
}
.work_banner .work_title_inner{
    align-items: center;
}
.work_banner h2{
    margin-bottom: 0;
}

/*==graphic==*/
.price_text p{
    line-height: 1.8;
}
.side-note{
    display: flex;
    justify-content: space-between;
    margin: 30px 0 5px 0;
}
.twotypes-detail .side-note{
    display: block;
    gap:15px;
}
.work_type_wide{
    width: 193px;
    color: #fff;
    background-color: #252526;
    border-radius: 2px;
    padding: 12px 5px;
    text-align: center;
    margin-right: 23px;
}
.work_mv_min{
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 100px;
}
.work_mv_min img{
    width: 50%;
    margin-top: 150px;
}
.twotypes{
    display: flex;
    gap:20px;
}
.twotypes-detail{
    display: flex;
    gap:20px;
}
.digression{
    display: flex;
    margin-bottom: 30px;
}
/*==NEKOnoTE==*/
.support{
    margin: 200px 0;
}
.support_contents{
    position: absolute;
    max-width: 1000px;
    width: 100%;
    margin:  0 auto;
    top:-130px;
    left:50%;
    transform: translateX(-50%);
}
.section_title img{
    width: 70px;
    margin-left: 5px;
}
.support_subtitle{
    font-size: 30px;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 93px;
}
.support_text{
    width: 700px;
    margin: 0 auto;
}
.support_text p{
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
    margin-bottom: 127px;
}
.support_group{
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    gap:58px;
    text-align: center;
    align-items: center;
    margin-bottom: 350px;
    padding: 0 30px;
}
.support_group img{
    width: 100%;
    margin-top: 34px;
}
.support_group h3{
    font-size: 30px;
    font-family:'Cantarell', sans-serif;
    letter-spacing: 2px;
}
/*背景画像を固定するパララックス*/
.background {
    background-image: url("../images/nekonote/bg.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    margin: 0 calc(50% - 50vw);
    width:100vw;
    height: 700px;
    position: relative;
}
.support_inner{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 56px;
    text-align: center;
}
.support_title{
    display: flex;
    gap:80px;
    margin-bottom: 33px;
}
.support_title h3{
    width: 248px;
    font-size: 30px;
    font-family:'Cantarell', sans-serif;
    letter-spacing: 1px;
    text-align: center;
}
.support_inner .service_center{
    width: 40px;
}
.support_inner .service_center img{
    width: 100%;
}
.support_item{
    display: flex;
    width: 248px;
    height: 125px;
    background-color: #252526;
    border-radius: 2px;
    align-items: center;
    justify-content: center;
}
.support_item p span{
    font-size: 10px;
}
.support_item p{
    font-size: 18px;
    line-height: 1.8;
    color: #fff;
    text-align: center;
} 
.support_text_sub{
    margin-top: 30px;
    text-align: right;
    margin-right: 20px
}

/*==プライバシーポリシー==*/
.privacy-policy{
    max-width: 757px;
    margin: 0 auto;
    margin-top: 120px;
    margin-bottom: 100px;
    padding: 30px;
}
.privacy-policy h2{
    font-size: 38px;
    margin-top: 30px;
    margin-bottom: 100px;
}
.privacy-policy p{
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 10px;
}
.privacy-policy h3{
    font-size: 14px;
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 30px;
}
.privacy-policy li{
    font-size: 14px;
    line-height: 1.8;
}

/*==コンタクトフォーム==*/
.container{
    padding: 80px;
}
.container p{
    max-width: 600px;
    font-size: 14px;
    line-height: 1.8;
    margin: 80px auto;
    text-align: center;
    padding: 0 20px;
}
.c-form {
	max-width: 70%;
	margin: 0 auto;
}
.c-form__item {
    display: flex;
    margin: 0 auto;
	margin-bottom: 10px;
    padding: 30px;
    border-bottom: 1px solid #f2f4f5;
}
.c-form__item:nth-child(4) {
    border-bottom: none;
}
.c-form__label,
.c-form__input {
	padding: 10px;
}
.c-form__label {
	width: 70%;
}
.c-form__input {
	width: 90%;
	font-size: 16px;
	border: solid 1px #252526;
	border-radius: 2px;
}
.c-form__input:focus-visible {
	outline: #252526 auto 1px;
}
.c-form__required {
	padding: 5px 5px;
	margin: 0 0 0 10px;
}
textarea.c-form__input {
	height: 160px;
}
.c-form__submit {
	text-align: center;
}
input, textarea{
    color: #252526;
    font-size: 14px;
    font-weight: 400;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
button {
    width: 200px;
    cursor: pointer;
    margin: 70px 0;
    padding: 15px 45px;
    border: 1px solid #252526;
    border-radius: 2px;
    color: #252526;
    font-weight: bold;
    background-color: #fff;
}
button:hover{
    color: #fff;
    background-color: #252526;
}
.thanks_message{
    color: #252526;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin: 50px 0;
}
.thanks_text{
    color: #252526;
    font-size: 18px;
    line-height: 1.8;
    text-align: center;
    margin-bottom: 100px;
}

@media screen and (max-width: 1100px){
    .pc_only{
        display: none;
    }
    .sp_mv{
        display: block;
    }
    #header{
        height: auto;
    }
    .sp_nav{
        position: fixed;
        top: 0;
        width: 100%;
        height: 100vh;
        background-color:#fff;
        z-index: 9995;
        padding-top: 200px;
    }
    .sp_nav li{
        padding: 10px 30px;
        font-size: 21px;
        font-weight: 700;
        font-family:'Cantarell', sans-serif;
        letter-spacing: 1px;
        line-height: 2.0;
        color:#252526;
        text-align: right;
    }
    .sp_nav_contact{
        display: flex;
        margin-top: 50px;
        justify-content: right;
        padding-right: 20px;
    }
    .sp_nav_contact li{
        font-size: 17px;
        padding: 10px;
    }
    .sp_nav_contact .gnv-border{
        width: 30px;
        margin-top:16px;
        border: 0.7px solid #252526;
    }
    .header_nav ,.header_contact{
        display: none;
    }
    .header_container{
        width: 100%;
        padding:30px 39px;
    }
    .hamburger{
        display: block;
        cursor: pointer;
        height: 30px;
        width: 33px;
        position: fixed;
        z-index:9999;
        top:55px;
        right:30px;
    }
    .hamburger span{
        width: 33px;
        height: 2px;
        background-color: #252526;
        position: absolute;
        content: "";
        z-index: 9999;
        transition: 0.5s;
    }
    .hamburger span::before,
    .hamburger span::after{
        position: absolute;
        content: "";
        width: 33px;
        height: 2px;
        background-color: #252526;
        transition: 0.5s;
    }
    .hamburger span::before{
        top:-10px;
    }
    .hamburger span::after{
        top: 10px;
    }
    .open span{
        background: transparent;
    }
    .open span::before{
        transform: rotate(45deg);
        top:0;
    }
    .open span::after{
        transform:rotate(-45deg);
        top: 0;
    }
    .logo img{
        vertical-align: middle;
    }
    .main_visual{
        display: block;
        height: auto;
    }
    .mv_main{
        position: relative;
        width: 100%;
        height: 100vh;
    }
    .mv_img{
        width: 100%;
        height: 100vh;
        margin-top: 0;
    }
    .mv_inner{
        width: 100%;
        margin: 0 auto;
        text-align: center;
        align-items: center;
    }
    .mv_copy{
        font-size: 45px;
        font-weight: 400;
        letter-spacing: 2px;
    }
    .mv_copy img{
        width: 50px;
        margin: 0 50px;
    }
    .mv_logo{
        font-size: 60px;
        font-weight: 600;
        letter-spacing: 4px;
        margin-top: 30px;
    }
    .sp_mv_img{
        display: flex;
        margin: 0 auto;
        width: 90%;
        padding: 0 10px 0 20px;
    }
    .mv_work_img{
        width: 100%;
    }
    .circle_btn{
        width: 70px;
        margin-top: -35px;
        margin-right: -10px;
    }
    .owner_item{
        width: 100%;
    }
    .about_block img{
        width: 100%;
        height: 500px;
        object-fit: cover;
    }
    .about_lead{
        max-width: 300px;
        font-size: 40px;
    }
    .about_message{
        max-width: 400px;
    }
    .about_contents{
        margin-left: 30px;
    }
    .about_text, .bottom_space{
        width: 250px;
    }
    .section_title{
        font-size: 63px;
    }
    .title_block{
        margin-bottom: 80px;
        padding: 30px;
    }
    .title_block .section_title{
        font-size: 60px;
    }
    .work_list{
        padding: 30px;
    }
    .work_list .work-client{
        font-size: 14px;
    }
    .content-wrap{
        padding: 35px;
    }
    .modalArea .section_title{
        font-size: 50px;
    }
    .modalWrapper{
        width: 650px;
    }
    #modalArea01 .price_group{
        display: block;
        margin: 0 auto;
        text-align: center;
    }
    #modalArea01 .price_box{
        justify-content: center;
    }
    #modalArea01 .price_contents{
        border: none;
    }
    #modalArea01 .price_list{
        border: 1px solid #252526;
        border-radius: 5px;
        margin-bottom: 30px;
    }
    #modalArea01 .price{
        margin-top: 20px;
        margin-bottom: 20px;
    }
    #modalArea01 .price_border{
        display: none;
    }
    #modalArea01 .price_title h3{
        margin-bottom: 10px;
    }
    .price_title{
        margin-top: 0;
    }
    .price_title p{
        font-size: 14px;
    }
    .modal_text, .modal_text_pc{
        margin-bottom: 30px;
    }
    .price_item ul{
        text-align: left;
    }
    #modalArea04 .price_contents{
        width: 500px;
    }
    .gallery-slider a img{
        max-width: 90%;
        margin: 0 auto;
    }
    .footer_btn {
       max-width: 500px;
    }
    .footer_btn .btn {
        width: 100%;
        padding: 30px 60px;
    }
    .footer_btn_text {
        font-size: 14px;
    }
    .footer_contact {
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 4px;
    }
    .footer_inner{
        justify-content:space-between;
    }
    .footer_menu{
        gap:30px;
    }
    .work-border{
        margin-top: 7px;
    }
    .menu_btn {
        font-size: 18px;
        padding: 15px 27px;
    }
    .work_menu {
        gap:20px;
    }
    .owner_img img {
        width: 100%;
    }
    .contact{
        font-size: 25px;
    }
    .btn_text {
        font-size: 10px;
    }
    .support_text_sub {
        margin-top: 150px;
        text-align: center;
        margin-right: 0;
    }
    .support_inner{
        justify-content: space-around;
        padding: 0 10px;
    }
    .support_title{
        justify-content: space-around;
        padding: 0 30px;
        margin-bottom: 20px;
        gap:120px;
    }
    .support{
        margin-bottom: 100px;
    }
    .support_item{
        max-width: 600px;
        max-height: 90px;
        margin: 0 auto;
    }
    .background{
        height: 600px;
    }
    .support_contents{
        top:-100px;
    }
    .work_banner .work_table{
        gap:17px
    }  
}

@media screen and (max-width: 900px){
    .pc_modal, .about_block, .support_text, .pc_text{
        display: none;
    }
    .sp_modal, .sp_text{
        display: block;
    }
    .btntextchange{
        min-width: 120px;
    }
    .bgleft:before{
        display: none;
    }
    .btn{
        background-color: #252526;
    }
    .btn span{
        color: #fff;
    }
    .btn::after {
        color: #fff;
    }
    .web-design, .graphic-design{
        padding: 0 30px;
    }
    .web_main_text {
        margin-top: 60px;
    }
    .web_gallery{
        width: 90%;
        margin: 0 auto;
        margin-right: 6px;
    }
    .web-design_inner{
        gap:70px;
    }
    header .circle_btn{
        margin-top: -35px;
        margin-right: 0;
    }
    .circle_btn{
        width: 70px;
        margin-top: -40px;
    }
    .gallery-slider{
        margin-top: 100px;
    }
    .slick-nav-arrows{
        margin-top: 50px;
    }
    .footer_btn_top-only .btn{
        background-color: #fff;
    }
    .footer_menu {
        gap: 20px;
    }
    .footer_btn .btn {
        padding: 20px 20px;
    }
    .footer_contact {
        font-size: 16px;
        color: #252526!important;
    }
    .section_title{
        font-size: 70px;
    }
    .title_block .section_title {
        font-size: 55px;
    }
    .modalArea .section_title{
        font-size: 45px;
    }
    .sp_modal{
        position: fixed;
        width: 100%;
        top: auto;
        bottom: 0px;
        height: auto;
        opacity: 1;
        z-index: 100;
        padding:0
    }
    .sp_modal_inner{
        display: flex;
    }
    .sp_modal a{
        justify-content: center;
        align-items: center;
        width: 50%;
        padding:30px 20px;
        margin:0;
        font-size: 15px;
        border-right: 1px solid #fff;
    }
    .profile_border{
        display: none;
    }
    .about_block_sp{
        display: block;
        max-width: 460px;
        margin: 0 auto;
        text-align: center;
        margin-top: 100px;
        margin-bottom: 100px;
        padding: 0 30px;
    }
    .about_sp_img img{
        width: 100%;
    }
    .about_textarea{
        max-width: 460px;
        margin: 0 auto;
        text-align: left;
        margin-top: 20px;
    }
    .about_message{
        max-width: 500px;
    }
    .about_profile{
        display: block;
        max-width: 460px;
        margin: 0 auto;
        text-align: center;
    }
    .about_message .about_lead{
        font-size: 23px;
        margin-top: 50px;
    }
    .owner_item{
        margin: 0 auto;
        text-align: left;
    }
    .owner_item h3 {
        font-size: 18px;
        letter-spacing: 0;
        margin-top: 20px;
        margin-bottom: 8px;
    }
    .owner_name{
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 0;
        margin-bottom: 40px;
    }
    .profile_contents {
        max-width: 460px;
        display: block;
        margin: 0 auto;
        text-align: center;
    }
    .profile_block{
        margin: 100px 0;
    }
    .profile_block li, .profile_block p {
        text-align: left;
    }
    .link_btn_area {
        max-width: 600px;
        gap:30px
    }
    .btn_block {
        width: 33%;
    }
    .btn_block span {
        font-size: 22px;
    }
    .message{
        max-width: 460px;
        font-size: 16px;
        margin-top: 60px;
        padding: 0 30px;
    }
    .profile_block_list {
        font-size: 30px;
    }
    .profile_block_message {
        font-size: 24px;
    }
    .footer_menu_block li{
        font-size: 15px;
    }
    .footer_btn_text {
        font-size: 12px;
    }
    .contact {
        font-size: 22px;
    }
    .footer_inner {
        padding: 80px;
    }
    .support_text_sp{
        display: block;
        max-width: 700px;
        margin: 0 auto;
    }
    .support_text_sp p{
        padding: 0 30px;
        font-size: 16px;
        line-height: 1.8;
        text-align: center;
        margin-bottom: 60px;
    }
    .support_subtitle{
        margin-bottom: 50px;
    }
    .work_desc{
        display: block;
        max-width: 500px;
        margin: 0 auto;
        margin-bottom: 70px;
    }
    .work_table, .work_table_long{
        margin-bottom: 25px;
    }
    .work_table_title h3{
        font-size: 14px;
    }
    .sp_text{
        line-height: 1.5;
    }
    .work_mv{
        margin-bottom: 50px;
    }
    .work_banner .work_table{
      display: flex;
    }
    .support_group img{
        margin-top: 20px;
    }
    .modalArea .subtitle p{
        margin-top: 8px;
    }
    .content-wrap{
        padding: 0;
    }
    .container{
        padding: 0;
    }
    #about{
        padding:0;
    }
    .view-site{
        margin-left: 200px;
    }
    .onlinestore{
        margin-left: 50px;
    }
}

@media screen and (max-width: 787px){
    .sp_about, .sp_service, .web_sp, .sp_only, .graphic_text_sp{
        display: block;
    }
    .content-wrap .web_gallery, .title_text, .slick-nav-arrows, .view-site{
        display: none;
    }
    .pc-tab_only, .graphic_text_pc, .contact_text_pc{
        display: none;
    }
    .pc_footer{
        display: none;
    }
    .onlinestore{
        display: flex;
    }
    .header_container{
        padding:20px 30px;
    }
    .hamburger{
        top:37px;
    }
    .mv_copy{
        font-size: 23px;
        letter-spacing: 4px;
    }
    .mv_copy img{
        width: 25px;
        font-weight: 400;
        margin: 0 20px;
    }
    .mv_logo{
        font-size: 34px;
        font-weight: 600;
        letter-spacing: 3px;
        margin-top: 15px;
    }
    .mv_img{
        height: 100vh;
    }
    header .circle_btn{
        margin-right: 0;
        margin-top: -27px;
        margin-left: -33px;
    }
    .circle_btn{
        width: 60px;
        margin-top: 16px;
        margin-right: -28px;
    }
    .common-btn{
        margin-top: 50px;
    }
    .web_main_text{
        margin-top: 45px;
        margin-bottom: 50px;
    }
    .about{
        padding: 100px 30px;
    }
    .about_inner{
        display: block;
    }
    .abou_title img{
        width: 300px;
        margin-bottom: 20px;
    }
    .about_img{
        width: 100%;
        height: auto;
    }
    .about_lead{
        max-width: 300px;
        font-size: 22px;
        text-align: left;
        margin: 50px 0;
    }
    .about_contents{
        max-width: 800px;
        margin: 0;
    }
    .about_text, .bottom_space{
        width: 100%;
        font-size: 16px;
    }
    .bottom_space{
        margin-top: 20px;
        margin-bottom: 30px;
    }
    .about_message .about_lead{
        font-size: 22px;
    }
    .about-btn{
        margin: 0 auto;
    }
    .btntextchange {
        min-width: 100px;
        padding: 20px 16px;
    }
    .btnchange_ja{
        font-size: 14px;
    }
    .btntextchange::after{
        display: none;
    }
    .section_title{
        position: relative;
        margin-top: 150px;
        padding: 10px 30px;
        font-size: 30px;
        letter-spacing: 1px;
    }
    .section_title::before{
        position: absolute;
        border-bottom: 2px solid #353535;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        content: '';
    }
    .subtitle p {
        font-size: 14px;
        margin-top: 2px;
    }
    .title_block{
        margin-bottom: 0;
    }
    .title_block .section_title{
        font-size: 25px;
        letter-spacing: 0;
        padding: 0 10px 0 0 ;
    }
    .title_block .section_title::before{
        display: none;
    }
    .service{
        margin: 157px 0 130px 0;
        padding: 0 30px;
    }
    .service_contents h3{
        font-size: 28px;
    }
    .service_contents h3 img {
        width: 24px;
    }
    .service_inner{
        display: block;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        margin-top: 100px;
        padding: 0;
    }
    .service_contents{
        width: 100%;
        box-sizing: border-box;
    }
    .service_center{
        width: 100%;
        margin: 30px 0 20px 0;
    }
    .service_center img{
        width: 10%;
    }
    .service_icon, .sp_only{
        margin: 0;
    }
    .service_icon{
        width: 100%;
        margin-top: -60px;
    }
    .service_icon img{
        width: 50px;
        text-align: right;
        margin-left: auto;
        margin-bottom: -3px;
    }
    .graphic-design{
        padding: 0 30px;
    }
    .graphic_title_block {
        display: block;
        margin: 0 auto;
        margin-top: 130px;
    }
    .graphic_title_block .section_title {
        font-size: 28px;
        letter-spacing: 1px;
        text-align: center;
        padding: 10px 0; 
    }
    .graphic-subtitle{
        display: none;
    }
    .gallery-slider{
        margin-top: 50px;
    }
    .slick-prev::after{
        top:33%;
        left:69%;
    }
    .slick-next::after{
        top:33%;
        left: 49%;
    }
    .slick-prev::before, .slick-next::before{
        padding: 5px;
    }
    .graphic_text_sp{
        font-size: 16px;
        line-height: 1.8;
        margin-top: 45px;
        font-feature-settings: "palt";
    }
    .pagination{
        margin-top: 10px;
        margin-bottom: 50px;
    }
    .contact {
        margin-top: 130px;
    }
    .contact_text_sp p {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.8;
        letter-spacing: 0;
        text-align: center;
    }
    .contact_text_sp {
        margin-top: 25px;
        margin-bottom: 25px;
        display: block;
    }
    .contact_block img{
        width: 100%;
    }
    footer{
        margin: 0;
    }
    .footer_inner {
        display: flex;
        align-items: end;
        justify-content: space-between;
        padding: 50px 40px 50px 30px
    }
    .footer_menu {
        display: block;
    }
    .footer_menu_block{
        margin-top:50px;
    }
    .footer_logo {
        font-size: 20px;
        letter-spacing: 1px;
        margin-bottom: 72px;
    }
    .footer_menu_block li{
        font-size: 18px;
    }
    .privacy{
        margin-top: 70px;
    }
    .copyright{
        font-size: 12px;
        text-align: left;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .pagetop{
        margin-right: 0;
        background-color: unset;
    }
    .pagetop img{
        width: 70px;      
    }
    .work_menu{
        display: block;
    }
    .title_text_sp{
        display: block;
        font-size: 16px;
        line-height: 1.8;
        font-feature-settings: "palt";
        text-align: center;
        padding: 30px;
    }
    .sp_gallery{
        display: block;
        max-width: 500px;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 50px;
    }
    .sp_gallery_inner{
        width: 100%;
        text-align: left;
        margin-bottom: 30px;
    }
    .sp_gallery_img{
        width: 100%;
        margin-bottom: 20px;
    }
    .sp_gallery_img img{
        width: 100%;
    }
    .sp_work-type{
        width: 80px;
        font-size: 12px;
        font-family:'Cantarell', sans-serif;
        letter-spacing: 1px;
        color: #fff;
        background-color: #252526;
        padding: 5px;
        text-align: center;
        margin-bottom: 10px;
    }
    .sp_work-type_min{
        width: 150px;
        font-size: 12px;
        font-family:'Cantarell', sans-serif;
        color: #fff;
        background-color: #252526;
        padding: 5px 3px;
        text-align: center;
        margin-bottom: 10px;
    }
    .sp_work-title{
        font-size: 14px;
        font-weight: 300;
        font-family: 'Cantarell',"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
        margin-bottom: 5px;
    }
    .sp_work-client{
        font-size: 14px;
        font-weight: 300;
        letter-spacing: 1px;
        line-height: 1.5;
        font-feature-settings: "palt";
    }
    .sp_work-client span{
        font-size: 18px;
        font-weight: 400;
        font-family: 'Cantarell',"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    }
    .btn_block span {
        font-size: 16px;
        letter-spacing: 0;
    }
    .link_btn {
        margin-top: 20px;
    }
    .support_group{
        gap:0px;
        margin-bottom: 200px;
    }
    .support_group h3{
        font-size: 13px;
        letter-spacing: 1px;
    }
    .support_group img {
        width: 80%;
        margin-top: 16px;
    }
    .support_title{
        gap:90px;
    }
    .support_title h3{
        font-size: 20px;
    }
    .support_subtitle{
        font-size: 16px;
        margin-top: 16px;
        margin-bottom: 50px;
    }
    .support_item p{
        font-size: 12px;
        font-weight: 700;
        font-feature-settings: "palt";
    }
    .support_inner{
        margin-bottom: 23px;
        gap:5px;
        padding: 0 10px;
    }
    .support_contents{
        top:-100px;
    }
    .support_inner .service_center img {
        width: 70%;
    }
    .background{
        height: 450px;
        background-image: url("../images/nekonote/bg_sp.jpg");
    }
    .support_text_sub{
        font-size: 14px;
        margin-top: 100px;
    }
    .section_title img{
        width: 30px;
    }
    .support_item p span{
        font-size: 8px;
        letter-spacing: 1px;
    }
    .c-form__item{
        display: block;
    }
    .c-form__input{
        margin-top: 10px;
    }
    .c-form__submit{
        margin-bottom: 50px;
    }
    .c-form{
        max-width: 90%;
    }
    .modalWrapper{
        width: 100%;
        margin-top: 10px;
        padding: 30px 0;
    }
    .modalArea .subtitle p{
        margin-top: 6px;
        font-size: 12px;
    }
    .modalArea .price_title p{
        font-size: 13px;
    }
    .price_box{
        gap:14px;
    }
    .price_contents{
        padding: 0 15px;
    }
    .price_title h3{
        font-size: 18px;
    }
    .price_menu h4{
        font-size: 16px;
    }
    .flow_img{
        padding: 0 30px;
    }
    #modalArea04 .price_contents{
        width: 300px;
        border: none;
        padding: 0 30px;
    }
    #modalArea04 .price_group{
        display: block;
    }
    #modalArea04 .price_border{
        display: none;
    }
    #modalArea04 .price_title{
        margin-top: 0;
    }
    #modalArea04 .price_box ul :last-child{
        margin-top: 20px;
    }
    .modalArea .support_item p{
        font-size: 12px;
        font-feature-settings: "palt";
    }
    .work_title_inner{
        display: block;
    }
    .work .work_type{
        width: 100px;
        margin-bottom: 10px;
        padding: 5px;
    }
    .work_banner .work_type{
        width: 100px;
        margin-bottom: 10px;
        padding: 5px;
    }
    .work_type_wide{
        width: 150px;
        font-size: 12px;
        padding: 7px;
        margin-bottom: 10px;
    }
    .work-border{
        margin-top: 4px;
    }
    .work_banner h2{
        margin-bottom: 6px;
    }
    .sign{
        font-size: 16px;
        line-height: 1.5;
        margin-top: 0;
    }
    .thanks_message{
        font-size: 18px;
        margin: 30px 0;
    }
    .thanks_text{
        font-size: 16px;
    }
    .privacy-policy h2{
        font-size: 30px;
    }
} 

@media screen and (max-width: 560px){
    #splash_logo {
        width: 300px;
    }
    .work_table{
        display: block;
    }
    .work_table_title{
        margin-bottom: 10px;
    }
    .web-design .circle_btn {
        margin-right: -24px;
    }
    .sp_gallery{
        width: 90%;
    }
    .modal_text_pc{
        display: none;
    }
    .modal_text_sp{
        display: block;
        font-size: 12px;
        line-height: 1.8;
        font-feature-settings: "palt";
        text-align: left;
        margin-bottom: 30px;
        padding: 0 15px;
    }
}
@media screen and (max-width: 440px){
    .sp_only_min{
        display: block;
    }
    .pc-tab-sp{
        display: none;
    }
    .work-detail{
        margin-top: 50px;
    }
    .work-detail p{
        font-size: 13px;
    }
    .privacy-policy h2{
        font-size: 25px;
    }
    .twotypes{
        display: block;
    }
    .twotypes-detail{
        display: block;
    }
    .work_mv_min img{
        width: 100%;
    }
    .twotypes img{
        margin-top: 100px;
        margin-bottom: -50px;
    }
    .digression{
        display: flex;
    }
    .work_table_long{
        display: block;
    }

}
@media screen and (max-width: 350px){
    .mv_logo{
        font-size: 26px;
        letter-spacing: 1px;
    }
    .mv_copy{
        font-size: 22px;
        letter-spacing: 1px;
    }
    .section_title{
        font-size: 24px;
        letter-spacing: 0;
    }
    .abou_title img{
        width: 267px;
    }
    .graphic_title_block .section_title{
        font-size: 24px;
        letter-spacing: 0;
    }
    .btntextchange{
        padding: 16px 5px;
    }
    #modalArea01 .price_box{
        display: block;
        text-align: center;
    }
    .price_item{
        max-width: 100px;
        margin: 0 auto;
        text-align: center;
    }
    #modalArea01 .price_box{
        margin: 30px 0;
    }
    .modalArea .price_title p{
        font-size: 11px;
    }
    .work_title h2 span{
        font-size: 18px;
    }
    .work_title h2{
        font-weight: 300;
    }
    .mv_inner{
        font-size: 27px;
        letter-spacing: 2px;
    }
    .footer_logo{
        font-size: 17px;
    }
    .footer_menu_block li{
        font-size: 16px;
        letter-spacing: 0;
    }
    .support_title{
        gap: 53px;
    }
    .support_title h3{
        font-size: 17px;
    }
    .sp_text{
        line-height: 1.8;
        font-feature-settings: "palt";
    }
}