@charset "UTF-8";
@media screen and (max-width: 768px) {
    h1{font-size: 25px;}
    h2{font-size: 20px;}
    p{font-size: 14px;}
    /*wp*/
    .wp-block-group{margin: 200px 0;}
    .wp-block-list{list-style: inside;}
    .wp-block-media-text__content{padding-left: 0!important;padding-right: 0!important;}
    /*PAGE*/
    #page-title{
        width: 100%;
        height: 300px;
        background-image: var(--page-bg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position-y: bottom;
        padding: 70px 0;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: -1;
    }
    #page-title h2{z-index: 1;}
    #page-title a{
        font-size: 50px;
        font-weight: 700;
        line-height: 1.5;
        color: var(--clr-txt1);
    }
    .breadcrumb{
        background-color: var(--clr-bg3);
        margin: 0.5rem 0;
        position: relative;
    }
    .breadcrumb .breadcrumb-inner{
        width: 900px;
        padding: 3px 15px;
        margin: 0 auto;
        position: inherit;
        max-width: 90%;
        background-color: var(--clr-bg2);
        border-radius: 16px;
        --double-arrow-size:15px;
    }
    .breadcrumb .breadcrumb-inner a{
        position: relative;
        margin-right: var(--double-arrow-size);
    }
    .breadcrumb .breadcrumb-inner a::after{
        content: '';
        position: absolute;
        width: var(--double-arrow-size);
        height: var(--double-arrow-size);
        top: 50%;
        right: calc(-1 * var(--double-arrow-size));
        transform: translateY(-50%);
        background-image: url(./images/double_arrow.svg);
        background-size: var(--double-arrow-size);
    }
    .breadcrumb::before,.breadcrumb::after{
        content: '';
	    position: absolute;
	    width: calc(100%);
	    height: 0.5rem;
	    background-color: var(--clr-bg3);
	    
        z-index: -1;
        opacity: 1;
    }
    .breadcrumb::before{
        top: -0.5rem;
        left: 0;
    }
    .breadcrumb::after{
        bottom: -0.5rem;
        left: 0;
    }
    
    /*page-news*/
    .latest-posts {
        display: flex;
        flex-direction: column;
    }
    .post-item{
        display: flex;
        position: relative;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        border-bottom: 1px solid var(--clr-bg2);
        padding: 20px 0;
    }
    .post-content{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
        flex-grow: 1;
        width: calc(100% - 260px);
    }
    .post-thumbnail img {
        width: 240px;
        height: 180px;
        border-radius: 5px;
        object-fit: cover;
    }
    .post-thumbnail{position:relative;}
    .post-thumbnail::after,.post-thumbnail::before{
        content: '';
            position: absolute;
            width: 30%;
            height: 20%;
            z-index: 99;
            background-color: var(--clr-bg2);
    }
    .post-thumbnail::before{
        top: 0;
        left: -1;
        clip-path: polygon(0 0, 100% 0, 0 100%);
    }
    .post-thumbnail::after{
        bottom: 0;
        right: -1;
        clip-path: polygon(100% 100%, 100% 0, 0 100%);
    }
    .post-title {font-size: 18px;margin: 5px;font-weight: 700;}
    .post-tags {font-size: 14px;background-color: var(--clr-acsent3);}
    .post-tags .tag {
        display: inline-block;
        background: var(--clr-txt2);
        padding: 3px 8px;
        margin-right: 5px;
    }
    .post-excerpt {font-size: 14px;}
    .pagination {text-align: center;margin-top: 20px;}
    
    .pagination a {
        display: inline-block;
        padding: 8px 12px;
        margin: 0 5px;
        text-decoration: none;
        background: var(--clr-acsent1);
        color: var(--clr-txt2);
        border-radius: 5px;
    }
    
    .pagination .current {
        background: var(--clr-bg3);
        color: var(--clr-txt2);
        padding: 8px 12px;
        border-radius: 5px;
    }
    /*page-contact*/
    form input,form textarea{
        display: block;
        width: 100%;
        padding: 0.55em;
        margin-top: 0.8em;
        margin-bottom: 0.8em;
        border: 1px solid var(--clr-bg1);
        border-radius: 3px;
        background-color: var(--clr-txt2);
        box-shadow: none;
        color: var(--clr-watermark2);
        font-size: 1em;
        line-height: 2.5;
        transition: ease;
    }
    #contact-form .inner{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    #contact-form{margin: 0;}
    /*page-faq*/
    .faqCont{
        width: 100%;
        position: relative;
    }
    .faqCont .faqItem{
        margin-bottom: 30px;
        font-size: 1.2rem;
    }
    .faqItem .faqQuestion{
        cursor: pointer;
        background-color: var(--clr-bg3);
        padding: 20px;
        transition: 1s;
        padding-left: 70px;
        position: relative;
    }
    .faqItem .faqQuestion:hover{
        color:var(--clr-acsent1);
          border:1px solid var(--clr-acsent1);
          transition: 1s;
    }
    .faqItem .faqQuestion::before{
        position: absolute;
        content:'Q';
        text-align: center;
        line-height: 49px;
        width: 50px;
        height: 50px;
        top: 11px;
        left: 11px;
        background-color: var(--clr-acsent1);
        color: var(--clr-txt2);
        border-radius: 99px;
    }
    .faqItem .faqAnswer{
        max-height: 0;
        overflow: hidden;
        padding: 0 20px;
        background-color: var(--clr-bg3);
        border-top: none;
        transition: max-height 0.4s ease, padding 0.4s ease;
        padding-left: 70px;
        position: relative;
    }
    .faqItem .faqAnswer.open{
        max-height: 200px;
        margin-top: 30px;
        padding: 20px;padding-left: 70px;
    }
    .faqItem .faqAnswer::before{
        position: absolute;
        content:'A';
        text-align: center;
        line-height: 49px;
        width: 50px;
        height: 50px;
        top: 11px;
        left: 11px;
        background-color: var(--clr-acsent1);
        color: var(--clr-txt2);
        border-radius: 99px;
    }
    .toggle{
        display: none;
        margin-top: 10px;
        padding: 10px;
        border: 1px solid #ccc;
      }
      .toggle-button {
        cursor: pointer;
        background-color: #eee;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
      }
      /**/
      #service{
        width: 100%;aspect-ratio: 1/0.9;
        transform: translateX(0%);
        position: relative;
    }
    #service::before{
        content: '';
        position: absolute;
        width: calc(100% + 200px);
        height: calc(100% + 200px);
        top: 0;
        left: 0;
        transform: translate(-100px,-100px);
        background-color: var(--clr-bg1);
        border-radius: 25px;
    }
      #service .imgCont{
        display: flex;
        align-items: flex-end;
        height: 100%;
    }
      #service .imgCont a{
        display: block;
        background: radial-gradient(at top left, #547eb8 0%, #547eb8 20%, #424b9b 60%, #414a97 100%);
        aspect-ratio:1/1;
        width: 33%;
        height: fit-content;
        border-radius: 999px;
        opacity: 1;
        text-align: center;
        position: relative;
        overflow: hidden;
        /*background-image: url(./images/bubble.svg);*/
      }
      #service .imgCont a:nth-child(2){
        transform: translateY(-173.2%);
      }
      #service .imgCont a h2{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 70%;
        transform: translate(-50%,-75%);
        z-index: 3;
        text-shadow: 4px 4px 8px var(--clr-watermark2);
        color: var(--clr-txt2);
        opacity: 10;
    }
    #service .txtCont{
        position: relative;
    }
    #service .txtCont > *{text-align: center;margin:30px auto;}
    #taxaccounting{
        position: relative;
    }
    #taxaccounting::before{
        content: '';
        position: absolute;
        height: 700px;
        width: 100%;
        top:-10%;
        left: 0;
        transform: translateX(-60%);
        background-image:url(./images/watermark.png),url(./images/0thinkparksony.jpg);
        background-size: cover;
        background-position: center;
        z-index: -1;
    }
    #taxaccounting::after{
        content: 'TAXACCOUNTING';
        position: absolute;
        font-size: 120px;
        top: 100%;
        left: 60%;
        z-index: -1;
        color: var(--clr-watermark1);
    }
    #development{position: relative;}
    #development::before{
        content: 'DEVLOPMENT';
        position: absolute;
        font-size: 120px;
        top: 100%;
        left: -30%;
        z-index: -1;
        color: var(--clr-watermark1);
    }
    #founded{position: relative;}
    #founded::before{
         content: '';
        position: absolute;
        height: 700px;
        width: 100%;
        bottom:-20%;
        right: 0;
        transform: translateX(40%);
        background-image:url(./images/watermark.png),url(./images/0thinkparksony.jpg);
        background-size: cover;
        background-position: center;
        z-index: -1;
    }
    .top-service{background-color: var(--clr-bg1);}
    .top-service div{margin: 0;}
    .top-service > div{display: flex}
    .top-service .top-service-block-group {
      flex-grow: 1;
      padding: 30px;
      width: 70%;
      height: 730px!important;
    }
    .top-service .top-service-block-group {
      display: none;
    }
    .top-service .top-service-block-group.active {
      display: block;
    }
    .top-service-menu{width: 30%;margin-top: 60px;}
    .top-service-menu li {
    cursor: pointer;
    padding: 30px;
    color: var(--clr-acsent2);
  }
  .top-service-menu li.active {
    background-color: var(--clr-acsent4);
    font-weight: bold;
  }
  
    /* ----------------------
    SINGLE
    ----------------------- */
    /* ----------------------
    TOP
    ----------------------- */
    /*keyvisual*/
    #keyVisual{
        --keyVisualEmpty:0px;
        margin:var(--keyVisualEmpty);
        width: calc(100% - var(--keyVisualEmpty)*2);
        height: calc(50vh - var(--keyVisualEmpty)*2);
        border-radius: var(--keyVisualEmpty);
        background-image: url(./images/osaki.jpg);
        backdrop-filter: blur(5px);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        animation: grayscaleChange 3s ease-in-out;
    }
    @keyframes grayscaleChange{
        0%{
            filter: grayscale(100%);
        }
        100%{
            filter: grayscale(0%);
        }
    }
    #keyVisual::before,#keyVisual::after{
        content: '';
        position: absolute;
        width: 30%;
        height: 20%;
        z-index: 99;
        background-color: var(--clr-bg2);
    }
    #keyVisual::before{
        top:0;
        left: 0;
        clip-path: polygon(0 0,100% 0, 0 100%);
    }
    #keyVisual::after{
        bottom: 0;
        right: 0;
        clip-path: polygon(100% 100%,100% 0, 0 100%);
    }
    #keyVisual .watermark{
        border-radius: var(--keyVisualEmpty);
    }
    .kvCont{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    .kvCont h1{
        text-align: left;
        color: var(--clr-txt2);
        font-weight: 700;
        text-shadow: 4px 4px 8px var(--clr-watermark2);
    }
    
    
    /*top*/
    .fixedBtn{
        display: none;
    }
    /*valley*/
    #valley{
        position: relative;
        width: 100%;
    }
    
    #valley .valleyCont{
        width: 100%;
        max-width: 1600px;
        margin-right: auto;
        margin-left: auto;
        padding-right: 0;
        padding-left: 0;
        box-sizing: border-box;
    }
    #valley .imgCont{
        width: 100%;
    }
    #valley .imgCont picture{
        display: flex;
        justify-content: flex-end;
    }
    #valley .imgCont img{
        width: 100%;
    }
    #valley .txtCont{
        position: relative;
        padding: 20px;
    }
    #valley .txtCont::before{
        min-width: 100%;
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--clr-bg2);
        z-index: -1;
    }
    #valley .txtCont h1{height: 6rem;}
    #valley .txtCont p{color: var(--clr-txt1);}
    #valley .txtCont p,#valley .txtCont ul{margin-left: 10vw;margin-top: 1vw;}
    #valley .txtCont ul li{color: var(--clr-txt1);font-weight: 700;padding-top: 0.5rem;}
    /*work*/
    #work{margin:100px 0;}
    .w-wrap{
        margin: 50px 0;
        display: flex;
        padding:15px;
    }
    .w-wrap:nth-child(2) .txtCont{width: 100%;}
    .w-wrap p,.w-wrap h2{color: var(--clr-txt1);text-shadow: 4px 4px 8px var(--clr-watermark2)}
    .w-wrap .txtCont{width: 50%;color: var(--clr-txt1);}
    .w-wrap:nth-child(2) p,.w-wrap:nth-child(2) h2{color: var(--clr-txt1);}
    #work .imgCont{
        width: 49%;
    }
    #work .imgCont img{width: 100%;}
    /*about*/
    .aboutSliderContainer {
        width: 90%;
        margin: auto;
        position: relative;
      }
      #about{position: relative;}
      #about button{
        position:absolute;
        top: calc(50% - 65px / 2);
        z-index: 2;
        background-color: var(--clr-acsent1);
        width: 65px;
        height: 65px;
        border-radius: 90px;
        border: none;
        font-size: 25px;
      }
      #about button:hover{
        background-color: var(--clr-acsent3);
      }
      .aboutPrev{left:8%;}
      .aboutNext{right:8%;}
      .aboutSlider {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0;
        height: 600px;
      }
      .aboutSliderItem {
        width: 0;
        opacity: 0;
        transform: scale(0);
        transition: all 0.3s ease;
        text-align: center;
        line-height: 200px;
        font-size: 2rem;
        border-radius: 999px;
        flex-shrink: 0;
        position: relative;
      }
      .aboutSliderItem .txtCont{display: none;}
      .aboutSliderItem.middle .txtCont{
        display:inline;
        position: absolute;
        width: 80%;
        min-height: 100px;
        top:calc(100% - 100px);
        left: 10%;
        background-color: var(--clr-bg2);
      }
      .aboutSliderItem.prev,
      .aboutSliderItem.next {
        width: 240px;
        height: 240px;
        opacity: 0.5;
        transform: scale(0.9);
        
      }
      .aboutSliderItem.next{
        transform: translateX(-40px)translateY(40px);
      }
      .aboutSliderItem.prev{
        transform: translateX(40px)translateY(40px);
      }
      .aboutSliderItem.middle {
        width: 512px;
        height: 512px;
        opacity: 1;
        transform: scale(1.0);
        z-index: 1;
      }
      .middle.aboutSliderItem:nth-child(1){
        transform: translateX(240px);
      }
      .next.aboutSliderItem:nth-child(2){
        transform: translateX(200px)translateY(40px);
      }
      .prev.aboutSliderItem:nth-child(6){
        transform: translate(-712px)translateY(40px);;
      }
      .middle.aboutSliderItem:nth-child(6){
        transform: translateX(-240px);
      }
      .next.aboutSliderItem:nth-child(1){
        transform: translateX(712px)translateY(40px);;
      }
      .prev.aboutSliderItem:nth-child(5){
        transform: translateX(-200px)translateY(40px);;
      }
      .aboutSliderItem.middle picture,.aboutSliderItem.middle picture img{
        border-radius: 999px;
        width: 512px!important;
        height: 512px!important;
        overflow: hidden;
      }
      .aboutSliderItem.next picture,.aboutSliderItem.next picture img,
      .aboutSliderItem.prev picture,.aboutSliderItem.prev picture img 
      {
        border-radius: 999px;
        width: 240px!important;
        height: 240px!important;
        overflow: hidden;
      }
      #about .btn{
        position:absolute;
        top: 30%;
        left: 20%;
        z-index: 99;
      }
    /*contact*/
    #contact{
        width: 100%;

        background-image: url(./images/osaki.jpg);
        background-size: cover;
        background-attachment: fixed;
        backdrop-filter: blur(100px);
        overflow: hidden;
        border-radius: 0;
    }
    #contact .watermark{background-color: var(--clr-watermark1);z-index: -1;}
    #contact .inner{
        padding :10px;
        writing-mode: vertical-rl;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        text-orientation: upright;
        align-items: baseline;
        
    }
    #contact .inner > *{
        color: var(--clr-txt2);
        margin-left: 10px;text-align: left;
    }
    #contact .inner p{
        line-height: 2;
        font-size: 14px;
    }
    #contact .btn{
        padding:45px 10px;
    }
    /*news*/
    #news{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;}
    .news-excerpt p{font-size: 16px;-webkit-line-clamp: 2;}
    .slide-wrapper {
        position: relative;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
      }
      .slide-box{
        display: flex;
        transition: transform 0.5s ease;
      }
      .slide-item{
        flex: 0 0 400px;
        height:470px;
        text-align: center;
        line-height: 280px;
        font-size: 20px;
        margin:0 40px;
        box-sizing: border-box;
      }
      .slide-item h2{
        width: 420px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 20px!important;
        display: -webkit-box;        /* フレックスベースのボックスモデル */
        -webkit-box-orient: vertical; /* 縦方向にボックスを配置 */
        -webkit-line-clamp: 1;       /* 表示する行数を指定 */
      }
      .slide-item a img{
        border-radius: 5px;
        width: 400px;
        height: 300px;
        object-fit: cover;
      }
      .slide-butten {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background-color: var(--clr-watermark2);
        border-radius: 999px;
        color: var(--clr-txt2);
        border: none;
        cursor: pointer;
        font-size: 18px;
        text-align: center;
        line-height: 40px;
        z-index: 10;
    }
    .button-left {left: 10px;}
    .button-right {right: 10px;}
    /* header */
    header {
        display: none;
        margin:0 auto;
        padding:10px 0 0;
        width:100%;
        height: 50px;
        position: fixed;
        background-color: var(--clr-bg2);
        transition: 0.5s ease-in;
        z-index: 99;
    }
    header a {
        display:block;
        width:100%;
        height:100%;
        font-size:14px;
        color:var(--clr-txt1);
        display: flex;text-align: center;
    }
    header a::after{
        background: var(--clr-txt1);
        position: absolute;
        bottom: 1px;
        left: 5px;
        width: 90%;
        height: 3px;
        content: "";
        transition: transform 0.3s ease-in-out;
        transform: scale(0, 1);
        transform-origin: left top;
    }
    header a:hover::after{ transform: scale(1, 1);}
    header.is-clear{background: rgba(0,0,0,0);}
    header.not-clear{background-color: var(--clr-bg2)}
    header nav {margin:0;padding:0;width:100%;height:100%;}
    header nav ul.dropmenu {
        position: relative;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    header nav ul.dropmenu li {
        position:relative;
        margin: 0;
        padding:0 18.8px;
        border-left:2px solid var(--clr-bg1);
    }
    header nav ul.dropmenu li:last-child { border-left:none;}
    header nav ul.dropmenu li ul {
        position: fixed;
        left:0;
        margin: 0;
        padding: 0;
        width:100vw;
        background:var(--clr-bg2);
        z-index:2;
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
    }
    header.is-clear nav ul.dropmenu li ul{background-color: rgba(0,0,0,0);}
    header nav ul.dropmenu li ul li {
        visibility:hidden;
        overflow: hidden;
        padding:0;
        height: 0;
        color: var(--clr-txt2);
        transition: .2s;
    }
    header nav ul.dropmenu li:hover ul li {
        visibility:visible;
        overflow:visible;
        margin: 0 40px;
        padding: 5px 0;
        height:40px;
        border:none;
        opacity:0.9;
    }
    /*aside*/
    aside {
        display: none;
        position: absolute;
        left: 100%;
        top:0;
        margin:0 0 0 20px;
        padding:80px 0;
        text-align: center;
    }
    aside h2 {
        margin:0 0 20px;
        font-weight: 700;
        background: var(--clr-gr1);
        color: var(--clr-txt2);
        padding:5px 50px;
        white-space: nowrap;
    }
    aside ul { margin-bottom:20px; }
    aside ul li {
        padding:5px 0 ;
        border-bottom:1px solid var(--sub-bg-col);
        display: flex;
    }
    aside ul li:last-child { border-bottom:none; }
    aside ul li a {margin:0;font-size:18px;}
    aside .latest-post-thumbnail{
        width: 80px;
        height: 60px;
        object-fit: cover;
        border-radius: 5px;
        margin-right: 5px;
    }
    /*footer*/
    footer {
        margin-top:100px;
        padding-top:100px;
        width:100%;
        background-color: var(--clr-bg2);
        border-top: 0px solid var(--clr-bg1);
    }
    footer nav{}
    footer nav .nav_inner{}
    footer ul{
        display: flex;
        position: relative;
        flex-direction: row-reverse;
        flex-wrap: wrap;
        align-items: flex-start;
        margin-bottom:100px;
        justify-content: center;
    }
    footer ul li{
        padding-left: 20px;
        margin-left: 20px;
        font-size: 25px;
        border-left: 1px solid var(--clr-bg1);
        position: relative;
    }
    footer ul li a {position: relative;display: flex;text-align: center;}
    footer .copy {
        padding:15px 0;
        background:var(--sub-bg-col);
        color:var(--clr-txt2);
        text-align:center;
    }
    
    }