* {
    font-family:'Montserrat', sans-serif;
    box-sizing:border-box;
    word-wrap:break-word;
    margin: 0px;
    padding: 0px;
    line-height:1.2em;
    font-weight:bold;
}
body {
    margin-top:-7vh;
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style:none;
    scrollbar-width:none;
}
body::-webkit-scrollbar {
    display:none;
}
a {
    text-decoration: none;
    color:inherit; 
}
li {
    list-style:none;
}
p {
    color:#653e2f;
    font-size:20px;
}
.t-c {
    text-align:center;
}
.m-0_a {
    margin:0 auto;
}
img {
    height:100%;
    width:100%;
    max-width:100%;
    display:block;
    object-fit: cover;
}
.space-7vh {
    width:100%;
    height:7vh;
}
.space-100 {
    width:100%;
    height:100px;
}
.space-60 {
    width:100%;
    height:60px;
}
.space-50 {
    width:100%;
    height:50px;
}
.space-30 {
    width:100%;
    height:30px;
}
.space-20 {
    width:100%;
    height:20px;
}
.space-10 {
    width:100%;
    height:10px;
}
.space-15vh {
    width:100%;
    height:15vh;
}
.space-5vh {
    width:100%;
    height:5vh;
}
/*ローディングアニメーション*/
.hide {
    opacity:0;
    visibility:hidden;
}
.loader {
    position:relative;
    width:100vw;
    height:100vh;
    -webkit-transition:1s all;
    -o-transition:1s all;
    transition:1s all;
}
.is-fixed {
    position:fixed;
    z-index:100;
}
.ball-scale-ripple-multiple {
    
    position:absolute;
    top:40%;
    left:50%;
    -webkit-transform: translate(-50%,-50%) !important;
        -ms-transform: translate(-50%,-50%) !important;
            transform: translate(-50%,-50%) !important;

    width:200px;
    height:200px;
    
}

.ball-scale-ripple-multiple > div:nth-child(0) {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
}

.ball-scale-ripple-multiple > div:nth-child(1) {
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s
}

.ball-scale-ripple-multiple > div:nth-child(2) {
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
}
.ball-scale-ripple-multiple > div:nth-child(3) {
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
}
.ball-scale-ripple-multiple > div {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position:absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 8px solid #653e2f;
    -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
            animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); 
}
.loading-text {
    position:absolute;
    font-size:42px;
    color:#653e2f;
    top:60%;
    left:50%;
    -webkit-transform:translateX(-50%);
        -ms-transform:translateX(-50%);
            transform:translateX(-50%);
}

@-webkit-keyframes ball-scale-ripple-multiple {
    0% {
      -webkit-transform: scale(0.1);
              transform: scale(0.1);
      opacity: 1; }
    70% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 0.7; }
    100% {
      opacity: 0.0; }
}
  
@keyframes ball-scale-ripple-multiple {
    0% {
        -webkit-transform: scale(0.1);
                transform: scale(0.1);
        opacity: 1; }
    70% {
        -webkit-transform: scale(1);
                transform: scale(1);
        opacity: 0.7; }
    100% {
        opacity: 0.0; }
}

.layout {
    background-image:url(./images/renga.jpg) ;
    width:100%;
    height:calc(100vh + 7vh);
    position:fixed;
    z-index: -2;
    
}

.header-fixed {
    top:0;
    width:100%;
    height:7vh;
    background-color:rgba(100, 54, 20, 0.8);
    position:fixed;
    z-index: 98;
}
.my-icon {
    width:36px;
    height:36px;
    display:inline;
    margin:0 10px 0 0;
    vertical-align: middle;
}
#about,#portfolio,#works,#contact {
    display:block;
    padding-top:7vh;
    margin-top:-7vh;
}
.wide-view-menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    float: right;
}
.wide-view-menu  li {
    padding:0 20px;
    color:#fff;
    font-size:20px;
    line-height:7vh;
}
.wide-view-menu  li a {
    -webkit-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
}
.wide-view-menu  li a:nth-child(1):hover {
    color:#808080;
}
.wide-view-menu  li a:nth-child(2):hover {
    color:#808080;
}
.wide-view-menu  li a:nth-child(3):hover {
    color:#808080;
}

.header-wrapper-container {
    width:100%;
    height:7vh;
    opacity:0.5;
    position:relative;
}
.header-wrapper p {  
    padding:0 20px;
    color:#fff;
    font: size 30px;
    float:left;
    line-height:7vh;
}
.header-wrapper p::after {
    clear:both;
}

.humburger-menu {
    float:right;
}
#menu-btn-check {
    display:none;
}
/* ハンバーガーメニュー外観 */
.humburger-menu {
    display:none;
}
.menu-btn {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    width:7vw;
    height:7vh;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    padding-right:20px;
}
.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
    content:'';
    display:block;
    width:30px;
    height:3px;
    border-radius:3px;
    background-color: #fff;
    position:absolute;
    -webkit-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s;
    z-index:100;
}
.menu-btn span::before {
    bottom:10px;
}
.menu-btn span::after {
    top:10px;
}
/* ハンバーガーメニューアニメーション */
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255,255,255,0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom:0;
    -webkit-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
            transform:rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top:0;
    -webkit-transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
            transform:rotate(-45deg);
}
#menu-btn-check:checked ~ .menu-content {
    -webkit-transform:none;
        -ms-transform:none;
            transform:none;
}

.menu-content {
    top:0;
    right:0;
    margin-top:7vh;
    padding:8px;
    -webkit-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s;
    -webkit-transform: translate(100%,0);
        -ms-transform: translate(100%,0);
            transform: translate(100%,0);
    position:fixed;
    z-index:99;
    background-color:rgba(100, 54, 20, 0.8);
}
.menu-content li {
    -webkit-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
    color:#ffffff;
    padding:8px 10px;
    border-bottom:1px solid #fff;
}
.menu-content li:nth-child(1):hover {
    color:#808080;
}
.menu-content li:nth-child(2):hover {
    color:#808080;
}
.menu-content li:nth-child(3):hover {
    color:#808080;
}

/*top画面に関わる*/
#slider {
    position:relative;
    width:100vw;
    height:100vh;
    height:calc(var(--vh,1vh) * 100);
}
.top-view-text {
    position:absolute;
    z-index:10;
    top:25%;
    left:5vw;
}
.top-view-text p {
    color:#808080;
    font-size:calc(100vw / 110 * 10);
    
}
.appeartext {
    -webkit-animation-name:chenge-color;
            animation-name:chenge-color;
    -webkit-animation-duration:2s;
            animation-duration:2s;
    -webkit-animation-delay:1.8s;
            animation-delay:1.8s;
    -webkit-animation-fill-mode:forwards;
            animation-fill-mode:forwards; 
}
.hide-text {
    opacity:0;
}
.eachTextAnime.appeartext span {
    font-family:'La Belle Aurore', serif;
    opacity: 0;
    -webkit-animation:text_anime_on 1s ease-out forwards;
            animation:text_anime_on 1s ease-out forwards;
    
}

@-webkit-keyframes chenge-color {
    0% {
        color:#808080;
    }
    100% {
        color:#fff;
    }
}

@keyframes chenge-color {
    0% {
        color:#808080;
    }
    100% {
        color:#fff;
    }
}

@-webkit-keyframes text_anime_on {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@keyframes text_anime_on {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
.border {
    position:absolute;
    width:8px;
    height:70px;
    border-radius:8px;
    left:50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    bottom:3%;
    background-color:dimgray;
}


.pointer {
    position:absolute;
    background-color:aliceblue;
    width:8px;
    height:8px;
    border-radius:50%;
    position:absolute;
 /*アニメーションさせる*/   
    -webkit-animation-name:slide;   
            animation-name:slide;
    -webkit-animation-duration:1.5s;
            animation-duration:1.5s;
    -webkit-animation-timing-function:ease-out;
            animation-timing-function:ease-out;
    /*animation-delay*/
    -webkit-animation-iteration-count:infinite;
            animation-iteration-count:infinite;
    /*animation-direction*/
}
@-webkit-keyframes slide {
    0% {
        top:0;
        opacity:1;
    }
    50% {
        opacity:1;
    }
    100% {
        top:70px;
        opacity:0;
    }
}
@keyframes slide {
    0% {
        top:0;
        opacity:1;
    }
    50% {
        opacity:1;
    }
    100% {
        top:70px;
        opacity:0;
    }
}

/*introductionに関わる*/
.introduction-wrapper {
    padding-top:7vh;
    margin-bottom:7vh;
    width:100vw;
    height:100vh;
}
.is-sticky {
    position:sticky;
    background-image:url(./images/renga.jpg);
    background-size: cover;
    background-repeat: repeat-y;
}
.t-0 {
    top:0;
}
.b-0 {
    bottom:0;
}
.introduction {
    margin:0 3vw;
}
.index-wrapper {
    position:absolute;
    text-align:center;
    width:300px;
    margin:0 auto;
    border-bottom:3px solid #653e2f; 
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);  
}
.index-title {
    color:#653e2f;
    font-size:30px;
    border-bottom:3px solid #653e2f;
}
.index-wrapper li {
    font-size:20px;
    padding:4px 10px
}
.index-wrapper li a:nth-child(1):hover {
    color:#f27507;
}
.index-wrapper li a:nth-child(2):hover {
    color:#f27507;
}
.index-wrapper li a:nth-child(3):hover {
    color:#f27507;
}
.index-wrapper li a:nth-child(4):hover {
    color:#f27507;
}
.index-wrapper li a{
    color:#653e2f;
    -webkit-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
}

/*ABOUTに関わる*/
.about-wrapper {
    z-index:2;
    width:100vw;
    height:100vh;
    margin-bottom:7vh; 
}
.about-wrapper > .button-wrapper {
    margin-top:55vh;
}
.self-introduction-wrapper {
    width:94vw;
    position:absolute;
    top:35%;
    left:50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); 
}
.self-introduction-wrapper li {
    color:#653e2f;
    font-size:20px;
}
/* コンタクトフォーム内 */
.title-wrapper  .contact-title {
    font-size: 50px;
    display: inline-block;
    padding: 0.1em 0.3em;
    margin: 20px auto;
    border-left: 12px solid #653e2f;
}
.wp-block-contact-form-7-contact-form-selector {
	text-align:center;  
}
.wp-block-contact-form-7-contact-form-selector p {
	margin-top:10px;
}
.wp-block-contact-form-7-contact-form-selector input {
	height:30px;
}
input[type="submit" i] {
	color:#fff;
	font-size:30px;
	background-color:#653e2f;
	width:70px;
	height:35px;
	border-radius:5px;
	-webkit-transform:translate(30px,0);
	    -ms-transform:translate(30px,0);
	        transform:translate(30px,0);
	margin-bottom:15px;
    padding-bottom:4px;
}
.wpcf7-not-valid-tip {
	margin-top:10px;
}
/*カスタムフィールドのcss*/
.button .text {
    color:#653e2f;
}
.button .text:hover {
   color:#fff;
}
/*ここからアキユキ＃3*/
.works-wrapper {
   width:100vw;
   height:100vh;
   padding:0 3vw;
   z-index: 5;
   padding-top:7vh;
}
.works-wrapper.height-auto {
    height:auto;
}
.portfolio-wrapper {
   width:100vw;
   height:100vh;
   padding:0 3vw;
   z-index: 6;
   padding-top:7vh;
}
.works-title {
   font-size:25px;
   font-weight:bold;
   color:#653e2f;

}
.flex-design1 {
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   margin:0 auto;
}
.contents4 {
   width:44vw;
   height:calc(44vw / 140 * 100);
}
.contents4 img {
   -webkit-box-shadow:4px 4px 7px 0 rgb(0 0 0 / 30%);
           box-shadow:4px 4px 7px 0 rgb(0 0 0 / 30%);
}
.flex-wrapper {
   width:53vw;
   height:calc(44vw / 140 * 100);
   padding-left:3vw;
}
.flex-wrapper h2 {
    font-size:calc(100vw / 53);
    margin-bottom:0.5rem;
}
.flex-wrapper p {
    padding:0 1em;
}
.contents1 {
    height:calc(44vw / 140 * 20);
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
}
.contents1 > p,.contents2 > p {
    font-size:calc(100vw / 53);
}
.contents2 {
   height:calc(44vw / 140 * 30);
}
.contents3 {
    height:calc(44vw / 140 * 50);
}
.contents3 > p {
    font-size:calc(100vw / 60);
}
.flex-design2 {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    column-gap: 4vw;
    -ms-flex-wrap:nowrap;
        flex-wrap:nowrap;
    overflow-x:auto;
}
.flex-design3 {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
    -ms-flex-wrap:wrap;
        flex-wrap:wrap;
}

.flex-design2 .port-wrapper {
    width:32vw;
}
.flex-design2 .port-wrapper .contents4 {
    width:32vw;
    height:calc(32vw / 140 * 100); 
}
.flex-design3 .port-wrapper {
    width:30vw;
}
.flex-design3 .port-wrapper .contents4 {
    width:100%;
    height:calc(30vw / 140 * 100); 
}
.small-title {
    font-size:calc(100vw / 71);
    margin:2vw 0 4vw;
}
.works-title a {
    color:#653e2f
}
/*ここまでアキユキ＃3*/

.archive-wrapper {
    width:100%;
    margin:0 auto;
}
.archive-wrapper h1 {
    text-align:center;
}
.archive-wrapper h2 {
    font-size:20px;
}
.archive-wrapper p {
    font-size:14px;
}
.archive-wrapper a {
    color:#653e2f;
}



/*scrollAnimation用の設定*/
.sa {
    opacity:0;
    -webkit-transition:all .5s ease;
    -o-transition:all .5s ease;
    transition:all .5s ease;
}
.sa-up {
    -webkit-transform:translate(0,50px);
        -ms-transform:translate(0,50px);
            transform:translate(0,50px);
}
.sa-lr {
    -webkit-transform:translate(-100%,0);
        -ms-transform:translate(-100%,0);
            transform:translate(-100%,0);
}
.show {
    opacity:1;
    -webkit-transform:none;
        -ms-transform:none;
            transform:none;
}
/*流れる背景のアニメーション*/
/*流れていく背景の枠(最初は透明にする)*/
.bg-extend {
    -webkit-animation-name:bg-extendAnimeBase;
            animation-name:bg-extendAnimeBase;
    -webkit-animation-duration:1s;
            animation-duration:1s;
    -webkit-animation-fill-mode:forwards;
            animation-fill-mode:forwards;

    position:relative;
    overflow:hidden;
    opacity:0;
}
/*1秒かけて表示*/
@-webkit-keyframes bg-extendAnimeBase {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes bg-extendAnimeBase {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes bg-extendAnimeBase {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*中身*/
.contents {
    text-align:center;
}
.contents p {
    display:inline;
    margin:0 10px;
    font-size:calc(100vw / 23);
    font-weight:bold;
    color:#653e2f;
     
}
/*中身(後付けする要素)*/
.bg-appear {
    -webkit-animation-name:bg-extendAnimeSecond;
            animation-name:bg-extendAnimeSecond;
    -webkit-animation-duration:1s;
            animation-duration:1s;
    -webkit-animation-delay:0.6s;
            animation-delay:0.6s;
    -webkit-animation-fill-mode:forwards;
            animation-fill-mode:forwards;
    
    border-bottom:5px solid #653e2f;
    opacity:0;
}
@-webkit-keyframes bg-extendAnimeSecond {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@keyframes bg-extendAnimeSecond {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/*左から右(背景を伸ばす後付けの中身)*/
.bg-LRextend::before {
    -webkit-animation-name:bg-LRextendAnime;
            animation-name:bg-LRextendAnime;
    -webkit-animation-duration:1s;
            animation-duration:1s;
    -webkit-animation-fill-mode:forwards;
            animation-fill-mode:forwards;

    content:"";
    position:absolute;/*親は「枠」*/
    width:100%;
    height:100%;
    background-color: #653e2f;
}
@-webkit-keyframes bg-LRextendAnime {
    0% {
        -webkit-transform-origin:left;
                transform-origin:left;
        -webkit-transform:scaleX(0);
                transform:scaleX(0);
    }
    50% {
        -webkit-transform-origin:left;
                transform-origin:left;
        -webkit-transform:scaleX(1);
                transform:scaleX(1);
    }
    50.001% {
        -webkit-transform-origin:right;
                transform-origin:right;
        
    }
    100% {
        -webkit-transform-origin:right;
                transform-origin:right;
        -webkit-transform:scaleX(0);
                transform:scaleX(0);
    }
}
@keyframes bg-LRextendAnime {
    0% {
        -webkit-transform-origin:left;
                transform-origin:left;
        -webkit-transform:scaleX(0);
                transform:scaleX(0);
    }
    50% {
        -webkit-transform-origin:left;
                transform-origin:left;
        -webkit-transform:scaleX(1);
                transform:scaleX(1);
    }
    50.001% {
        -webkit-transform-origin:right;
                transform-origin:right;
        
    }
    100% {
        -webkit-transform-origin:right;
                transform-origin:right;
        -webkit-transform:scaleX(0);
                transform:scaleX(0);
    }
}
.bg-appearTrigger,.bg-LRextendTrigger {
    opacity:0;
}
/*ここまで流れる背景*/


/* ボタンまわり */
.button-wrapper {
    text-align:center;
}
.button {
    display: inline !important;
    color:#653e2f;
    font-size:35px;
    font-weight:bold;
    border:4px solid#653e2f;
    border-radius:5px;
    padding:0 20px;
    -webkit-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s;
}

.button .arrow {
    right:20px;
    padding-left:50px;
}
.button:hover {
    color:#fff;
    background-color:#653e2f;
}

.fixed-btn-wrapper {
    -webkit-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
    opacity:0;
    width:150px;
    height:80px;
    background-color:darkgray;
    position:fixed;
    top:76vh;
    right:5vw;
    z-index:101;
    text-align:center;
    line-height:80px;
    border-radius:20px;
}
.fixed-btn-wrapper .button {
    font-size:16px;
}
/*.fixed-btn-wrapperに付与させるボタン*/
.fixed-btn-wrapper.isActive {
    opacity:0.8;
    -webkit-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
}
.bg-extend h1 span {
    font-size:30px;
}

.contact-wrapper {
    padding-top:7vh;
    width:100vw;
    height:100vh;
    z-index:7;
}
.contact-text-wrapper {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    width:300px;
    margin:0 auto;
}
.contact-wrapper > .button-wrapper {
    margin-top:40vh;
}

.footer-wrapper {
    position:relative;
    z-index:9;
    width:100%;
    padding:3vh 5vh;
    background-color: #301207;
}
.footer-wrapper p {
    color:#fff;
    font-size:18px;
}
/*アクションによる効果*/
.page-link_1:hover {
    color:darkgrey;
}
.page-link_2:hover {
    color:darkgrey;
}
.page-link_3:hover {
    color:darkgrey;
}
.button a:hover {
    color:darkgrey;
    -webkit-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
}
/*タイトルに関わる*/
.title-wrapper {
    text-align:center;
    margin-top:7vh;
}
.title-wrapper h1 {
    font-size:63px;
    display: inline-block;
    padding:0.1em 0.3em;
    margin:20px auto;
    border-left:12px solid #653e2f;
}

/*パンくず*/
.pankuzu-wrapper span a {
    color:blue!important;
}
/*ページナビ*/
.page-nav-wrapper {
    font-size:13px;
    width:90%;
    margin:0 auto;
}
.page-nav-wrapper a {
    color: #f27507 !important;
}
.page-nav-left {
    float:left;
}
.page-nav-right {
    float:right;
}
/*404*/
.title404 {
    font-size:53px!important;
}
.img404 {
    max-width: 100%;
    height:auto;
}
.comment404 a {
    color: #653e2f !important;
}