@charset "utf-8";
/* CSS Document */

/*===================================================================
//  基本設定
//=================================================================*/
.tb-non {display: none !important;}



/*===================================================================
//  ヘッダー
//=================================================================*/
.head-contents .logo,
.head-text {padding: 1.5em 0;}

#slide-menu {position: fixed; top: calc(-100vh - 100px); left: 0; height: 100vh; width: 100vw; background: #143154; padding: 7em 4% 2em; transition:all .6s ease-in-out;}
#slide-menu:before {content: ""; display: block; position: absolute; left: -10%; width: 120%; background: url(../img/common/noise.png) repeat #143154; z-index: -1; clip-path: polygon(0 0, 0% 100%, 100% 0); height: 100px; margin-bottom: 0; bottom: -95px;}

.gnav ul li,
.gnav a {display: block; padding: .5em 0;}
.gnav ul:not(.sub-menu) > li {border-top: solid 1px #e4e1df;}
.gnav ul:not(.sub-menu) > li > a {font-size: 1.7rem;}
.gnav ul.sub-menu li a {font-size: 1.5rem;}
.gnav ul.sub-menu li {margin-left: 1.2em; position: relative; font-size: 1.2rem; margin-top: 1em;}
.gnav ul.sub-menu li:before {content: ""; display: block; width: .3em; height: 1px; position: absolute; top: 50%; left: -1em; background: #e4e1df;}

#slide-menu .scroll-box .contact-btn {margin: 1.5em 0 0 0; text-align: center; font-size: 1.7rem;}
#menu-button {padding: 1.5em 3em;}



/*===================================================================
//  コンテンツ基本
//=================================================================*/
.reset .page-toptext {font-size: 1.6rem;}


/* 基本のコンテンツ設定 */
.right-footprints .base-title.is-supplement {padding-top: .5em;}


/* message */
#message .base-button {right: 70px;}
.base-button.photo figure {left: -9em; width: 146px; height: 146px;}


/* arrange-左右配置コンテンツ */
.arrange64 .title,
.arrange82 .title {font-size: 2rem;}
.arrange64 figure {width: 30%;}



/* base-table */
.base-table th {width: 30%;}



/* slick-slider */
ul.wide-slide.two,
ul.wide-slide.three {padding: 0 20px;}
ul.wide-slide.two {gap: 20px; grid-template-columns: repeat(2, 1fr);}
ul.wide-slide.three {gap: 20px; grid-template-columns: repeat(3, 1fr);}




/*===================================================================
//  archive
//=================================================================*/
/* PAGER */
nav.pagenation ul li a,
nav.pagenation ul li > span {padding: 1.2em 1.6em;}


/*===================================================================
//  single
//=================================================================*/
.single-contents h2 {padding-right: 70px;}
.single-contents h2:before {height: 130px;}
.single-contents h3 {font-size: 2rem;}


.single-nav {padding-bottom: 12em;}
ul.prevnext li {margin: 0 1px; width: calc(50% - 2px);}
ul.prevnext li a {display: flex; justify-content: space-between; align-items: center; height: 100%;}
ul.prevnext li .thumbnail-wrapper {width: 20%;}




/*===================================================================
//  home
//=================================================================*/
.catch-wrapper .tokoto strong {padding-right: 3.5em;}


main.home .sentence p:nth-child(2) {padding-left: 3em;}
main.home .sentence p:nth-child(3) {padding-left: 4.5em;}
main.home .left-footprints .sentence p {padding-left: 4em;}
main.home .left-footprints .sentence p:nth-child(2) {padding-left: 5.5em;}
main.home .left-footprints .sentence p:nth-child(3) {padding-left: 7em;}


#home-message > .blue-bg > .contents-wrapper:before {bottom: -6em;}
#home-service > .contents-wrapper:before {bottom: -12em;}
#home-ippo > .blue-bg > .contents-wrapper:before {bottom: -4.5em;}
#home-ippo .base-title {padding-top: 2em;}




/*===================================================================
//  service
//=================================================================*/
/* worries */
#worries.base-section {padding: 7em 0 3em}
#worries > .contents-wrapper:before {right: 9em; bottom: -5em;}


/* change */
#change ol {padding-bottom: 7em;}
#change ol {gap: 7%; grid-template-columns: 1fr 1fr 1fr; display: grid;}
#change ol li:after {bottom: -11.5em;}
#change ol li:nth-child(2):after {bottom: -10.5em;}
#change ol li:nth-child(3):after {bottom: -9.5em;}
#change ol li:nth-child(1) {margin-top: 5em;}
#change ol li:nth-child(2) {margin-top: 2.5em;}
#change ol li:after {bottom: -12em;}
#change ol li:nth-child(3):after {bottom: -8.5em;}


/* tokoto-design */
.change-next li {font-size: 2.4rem}



/* features */
#features ol li .title {padding-left: 2.5em; padding-top: .1em;}
#features ol li .title:before {position: absolute; top: .1em; left: 0; font-size: 2.2rem; line-height: 1; padding: .2em .4em;}



/* service-content */
#service-content .base-title + p {margin-bottom: 5em;}
#service-content .detail {padding-top: 15.5em;}
#service-content .inner.content-top {width: 500px; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0);}
#service-content .content-bottom {gap: 7%; grid-template-columns: 1fr 1fr;}
#service-content .inner .title {font-size: 2rem;}



/* plans */
#plans .title {font-size: 2rem;}
#plans .title-wrapper figure {right: 20px;}
#plans .detail th {width: 7em;}
#plans .detail td {padding-left: 1em;}

.reset .plans-contents ol {margin-top: 3.5em;}
.plans-contents ol li:before {width: 90%; max-width: 250px;}
.plans-contents ol li span .number {font-size: 2.2rem;}
.plans-contents ol li .contents-name {font-size: 2rem;}




/*===================================================================
//  about
//=================================================================*/
/* core */
#core > .contents-wrapper:before {right: 7em; bottom: -9.5em;}



/* role */
#role .arrange64 {padding-bottom: 5em;}



/* can */
#can ol {gap: 8%; grid-template-columns: 1fr 1fr 1fr;}



/* thought */
#thought .title {font-size: 2rem;}



/* profile */
#profile .name {font-size: 2rem;}
#profile .job {font-size: 1.3rem;}
#profile .biography {font-size: 1.4rem;}
.one-word .word {font-size: 2rem;}



/* about-story */
#about-story .arrange64 {padding-bottom: 10em;}
#about-story .arrange64 figure {width: 45%;}




/*===================================================================
//  privacy
//=================================================================*/
.privacy-list li:before {font-size: 2rem; line-height: 1; padding: .2em .5em;}




/*===================================================================
//  contact
//=================================================================*/
#form {padding: 150px 0 0 0; margin-top: -150px;}
.form-wrapper .title-wrapper {font-size: 1.8rem;}



/* LINE */
.form-wrapper.line figure {max-width: 210px;}
.form-wrapper.line .sentence {width: calc(97% - 210px);}
.form-wrapper.line .sentence p {font-size: 1.6rem;}
.form-wrapper.line .device > span {font-size: 1.5rem;}



/*===================================================================
//  フッター
//=================================================================*/


/* fnav */
.fnav > ul {gap: 1.5em; grid-template-columns: 1fr 1fr; display: grid;}

.fbottomul,
.snsicon {width: 50%;}
.fbottom .snsicon a {width: 44px; height: 44px; padding: .8em;}
.fbottom .snsicon a:nth-of-type(2) {padding: .6em .8em;}




/*===================================================================
//  404
//=================================================================*/
.error #post-cases.base-section {padding-bottom: 11em;}



/*===================================================================
//  画面が広い時 & スマホ - landscape設定 
//=================================================================*/
@media screen and (min-width: 881px) {
	/* arrange-左右配置コンテンツ */
    .arrange64 figure,
    .arrange82 figure {position: absolute; bottom: 3em;}
    .arrange82 figure {width: 21%;}
    .arrange64.right-figure {padding-right: 35%; padding-left: 40px;}
    .arrange64.right-figure figure {right: 0;}
    .arrange64.left-figure {padding-left: calc(35% + 40px);}
    .arrange64.left-figure figure {left: 40px;}

    .arrange82.right-figure {padding-right: 23%;}
    .arrange82.right-figure figure {right: 0; bottom: 0;}
    .arrange82.left-figure {padding-left: 23%;}
    .arrange82.left-figure figure {left: 0;}


    /* archive */
    .archive-contents ul.post,
    .single-nav .archive-contents ul.post {grid-template-columns: repeat(3, 1fr);}
    ul:not(.wide-slide) .loop-block:nth-child(-n+3) {margin-top: 0;}


    /* single */
    .author-data figure {margin-right: 2.5%;}
    .author-data .inner {display: flex; justify-content: space-between;}


    /* plans */
    #plans .inner {padding: 1.5em 1em;}
    .plans-contents ol {gap: 2.5%; grid-template-columns: 1fr 1fr 1fr; display: grid;}
    .plans-contents ol li:not(:last-child):after {top: 50%; right: -.8em; transform: translate(0, -50%);}
    #plans .detail.mieruka .plans-contents ol li:not(:last-child):after {aspect-ratio: cos(30deg); clip-path: polygon(0 0,100% 50%,0 100%); right: -.55em;}


    /* core */
    .core-message {gap: 5%; grid-template-columns: 1.5fr 1fr;}


    /* role */
    #role .arrange64 figure {bottom: 5em;}


    /* can */
    #can ol {gap: 8%; grid-template-columns: 1fr 1fr 1fr;}


    /* profile */
    #profile .detail {display: flex; justify-content: space-between; flex-direction: row-reverse;}
    #profile .sentence {width: calc(97% - 290px);}


    /* about-story */
    #about-story .arrange64 figure {bottom: 10em;}


    /* contact */
    span[data-name="checkbox-found"] .wpcf7-list-item {width:calc((100% - 1em) / 2);}
    span[data-name="checkbox-found"] .wpcf7-list-item:nth-child(-n+2) label {margin-top: 0;}
}
@media screen and (max-width: 880px) {
	/* arrange-左右配置コンテンツ */
    .arrange64 .title {text-align: center;}
    .arrange64 figure,
    .arrange82 figure {margin: 0 auto 2em; width: 25%;}


    /* archive */
    .archive-contents ul.post,
    .single-nav .archive-contents ul.post {grid-template-columns: repeat(2, 1fr);}
    ul:not(.wide-slide) .loop-block:nth-child(-n+2) {margin-top: 0;}


    /* single */
    .author-data figure {margin: 0 auto 1em;}
    .author-data .user-name {text-align: center;}
    

    /* plans */
    .plans-contents ol {gap: 2.5%; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr; display: grid;}
    .plans-contents ol li{min-height: 210px;}
    .plans-contents ol li:last-child {grid-column: 1 / 3;}
    .plans-contents ol li:last-child:before {width: 46.5%;}
    .plans-contents ol li:not(:first-child):after {display: none;}
    .plans-contents ol li:first-child:after,
    #plans .detail.mieruka .plans-contents ol li:not(:last-child):after {top: 50%; right: -.8em; content: "×"; height: auto; background: none;}


    /* core */
    .core-message {gap: 2em; grid-template-columns: 1fr;}


    /* profile */
    #profile .name {text-align: center;}
    #profile figure {margin: 0 auto 3em;}


    /* contact */
    .form-table label {width: 100%;}
}

/* 高さが低いとき */
@media screen and (max-height: 400px) {
	.catch {animation: none; opacity: 1; top: auto; height: 700px;}
}