@charset "utf-8";
/* CSS Document */

/*===================================================================
//  基本設定
//=================================================================*/
.sp-non {display: none !important;}


/* before・after・斜線関係 */
.blue-bg:before,
.blue-bg:after,
#pagebottom:before {height: 50px;}
.blue-bg:before,
#pagebottom:before {top: -45px;}
.blue-bg:after {bottom: -45px;}



/*===================================================================
//  ヘッダー
//=================================================================*/
.head-contents:before,
.head-contents:after {transition: all .3s ease-in-out;}
.head-contents:before {height: 50px; top: 55%;}
.head-contents:after {top: -43%;}
.head-contents > .contents-wrapper {padding: 0 2.5%;}
.head-contents .logo {padding-top: 1em;}
.head-contents .logo,
.head-contents .logo img {width: 90px;}
.reset .head-text {font-size: 1.1rem; padding-left: 0; position: absolute; top: -3em; left: 2.5%; line-height: 1.4;}

.justtop .head-contents:before {top: 75%;}
.justtop .head-contents:after {top: -24%;}
.justtop .head-contents .logo {padding-top: 3.5em;}
.reset.justtop .head-text {top: .5em;}
.justtop #menu-button {padding: 2.5em 0;}

#slide-menu {position: fixed; top: calc(-100vh - 100px); left: 0; height: 100vh; width: 100vw; background: #143154; padding: 7em 8% 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: 50px; margin-bottom: 0; bottom: -45px;}

.gnav ul li,
.gnav a {display: block;}
.gnav a {padding: 1em 0;}
.gnav ul:not(.sub-menu) > li {border-top: solid 1px #e4e1df; padding-bottom: 1em;}
.gnav ul:not(.sub-menu) > li > a {font-size: 1.6rem;}
.gnav ul.sub-menu li a {font-size: 1.4rem;}
.gnav ul.sub-menu li {margin-left: 1.2em; position: relative;}
.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.6rem;}
#menu-button {font-size: 1.2rem; padding: 1.5em 0; margin-left: 0; width: 30%; max-width: 95px;}



/*===================================================================
//  コンテンツ基本
//=================================================================*/
.page-title:before {height: 30px;}
.page-title > .contents-wrapper {padding-top: 12em; padding-bottom: 6.5em;}
.page-title > .contents-wrapper:before {bottom: 7px; width: 4.8em;}
.page-title .subtitle {font-size: 1.5rem;}
.page-title .title {font-size: 2.4rem;}

.reset .page-toptext {padding-bottom: 4em;}
.reset .page-toptext br {display: none;}


/* 目次 */
.contentslist li a {padding: .7em 0; display: block;}
.contentslist .in-list li:before {top: 1.5em;}


/* 基本のコンテンツ設定 */
.base-section {padding: 3em 0 3em;}

.reset .base-title,
.single-contents h2 {font-size: 2.4rem;}
.left-footprints .base-title {padding-left: 2.3em;}

.right-footprints .footprints,
.left-footprints .footprints {font-size: 1.3rem;}
.right-footprints .footprints:before,
.left-footprints .footprints:before,
.single-contents h2:before {width: 40px;}


/* message */
#message .base-button.photo  > a {padding-right: 1em;}
.base-button.photo > a > span {font-size: 1.3rem;}
.base-button.photo figure {left: -6.5em; width: 8em; height: 8em; max-width: 50%;}


/* cv-btn-wrapper */
.cv-btn-wrapper .base-title {letter-spacing: -.1em;}
.cv-btn-wrapper a:before {left: -1.5em;}
.cv-btn-wrapper a:after {right: -1.5em;}
.cv-btn-wrapper a .text {font-size: 2.4rem;}
.cv-btn-wrapper a .text:before {right: .5em;}


/* arrange-左右配置コンテンツ */
.arrange64 .title,
.arrange82 .title {font-size: 1.7rem; text-align: center;}
.arrange64 figure,
.arrange82 figure {margin: 0 auto 2em; width: 60%;}
.arrange82 figure {width: 40%;}



/* base-table */
.base-table,
.base-table tbody,
.base-table tr,
.base-table th,
.base-table td {display: block;}
.base-table th {padding-bottom: .75em;}
.base-table td {padding-top: .75em;}



/* slick-slider */
ul.wide-slide.two,
ul.wide-slide.three {grid-template-columns: repeat(1, 1fr);}
ul.wide-slide.two .loop-block:not(:first-child),
ul.wide-slide.three .loop-block:not(:first-child) {margin-top: 3em;}




/*===================================================================
//  archive
//=================================================================*/
.archive-contents ul.post,
.single-nav .archive-contents ul.post {grid-template-columns: repeat(1, 1fr);}
ul:not(.wide-slide) .loop-block:nth-child(-n+1) {margin-top: 0;}



/* PAGER */
nav.pagenation ul {flex-wrap: wrap;}
nav.pagenation ul li a,
nav.pagenation ul li > span {padding: 1.2em 1.4em;}
nav.pagenation ul li.total {width: 100%; margin-bottom: 1em;}
nav.pagenation ul li.prev a,
nav.pagenation ul li.next a {padding: 1em;}



/*===================================================================
//  single
//=================================================================*/
.single-contents {padding: 6em 0;}
.single-contents h2 {padding-right: 40px;}
.single-contents h2:before {height: 130px;}
.single-contents h3 {font-size: 1.6rem;}


.author-data figure {margin: 0 auto 1em;}
.author-data .user-name {text-align: center;}


.single-nav {padding-bottom: 8em;}
ul.prevnext li {margin: 1px 0; width: 100%;}
ul.prevnext li a {display: flex; justify-content: space-between; align-items: center; height: 100%;}
ul.prevnext li .thumbnail-wrapper {width: 20%;}



/*===================================================================
//  home
//=================================================================*/
.catch {font-size: 2.7rem; padding-bottom: 2em; min-height: 700px;}
.catch:before {height: 30px; bottom: 180px;}
.catch-wrapper .tokoto {padding: 1em 0 3em;}
.catch-wrapper .tokoto > .contents-wrapper:before {width: 4.5em; height: 4.5em; right: 60px; opacity: 0; top: -95px; animation: Catch 1s ease-in-out .5s forwards;}
@keyframes Catch {
  0% {
    right: 60px;
    opacity: 0;
  }
  100% {
    right: 50px;
    opacity: 1;
  }
}
.catch-wrapper .tokoto span {font-size: 1.3rem;}
.catch-wrapper .tokoto strong {margin-bottom: 1em;}
.catch-wrapper .tokoto strong:after {display: none;}


#home-message.base-section {padding-top: 2.5em;}
#home-message > .blue-bg > .contents-wrapper {padding-bottom: 9em;}
#home-message > .blue-bg > .contents-wrapper:before {bottom: -5em;}
#home-service > .contents-wrapper:before {bottom: -11em; left: 2.5em;}
#home-ippo > .blue-bg > .contents-wrapper:before {bottom: -5.5em;}
#home-ippo .base-title {padding-top: 0; padding-left: .5em;}
#home-info {padding-bottom: 3em;}




/*===================================================================
//  service
//=================================================================*/
/* worries */
#worries.base-section {padding-bottom: 6em}
#worries > .contents-wrapper:before {bottom: -9em; width: 2em; right: 4em;}


/* change */
#change ol {padding-bottom: .1em;}
#change ol li:first-child {margin-top: -2em;}
#change ol li:after {position: relative; margin: 3em 0;}


/* tokoto-design */
.change-next li {font-size: 1.6rem; font-family: "游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic","Hiragino Kaku Gothic Pro",Osaka,sans-seri; font-weight: 500;}



/* features */
#features ol li .title:before {margin: 0 auto 1em; width: .5em; line-height: 1; padding: .35em .6em .25em;}



/* service-content */
#service-content .inner {margin-top: 4.5em;}
#service-content .inner .title {font-size: 1.7rem;}



/* plans */
#plans .title-wrapper {padding-right: 25%; font-size: 1.3rem;}
#plans .title {font-size: 1.7em; line-height: 1.6;}
#plans .title-wrapper figure {right: 10px;}
#plans .detail table,
#plans .detail tbody,
#plans .detail th,
#plans .detail td {display: block; width: 100%;}
#plans .detail th,
#plans .detail td {padding: .2em .5em;}

.plans-contents ol li {padding: 6em 0; background: #e9e1c4; padding: 2em 0; margin: 0 auto 1.5em; width: 90%; border-radius: 50%; max-width: 300px;}
.plans-contents ol li:before {display: none;}
.plans-contents ol li:not(:last-child):after {bottom: -1.3em; left: 50%; transform: translate(-50%, 0);}
.plans-contents ol li span .number {font-size: 2rem;}
.plans-contents ol li .contents-name {font-size: 1.6rem; font-weight: bold;}
.plans-checks {padding-top: 1.5em;}

#plans .detail.mieruka .plans-contents ol li:not(:last-child):after {aspect-ratio: 1/cos(30deg); clip-path: polygon(50% 100%,100% 0,0 0); bottom: -.65em;}




/*===================================================================
//  about
//=================================================================*/
/* core */
.core-message {gap: 2em; grid-template-columns: 1fr; padding: 3em 1.5em;}
#core > .contents-wrapper:before {right: 3em; bottom: -10em; width: 4.5em; height: 4.5em;}


/* can */
#can ol li:not(:last-child) {margin-bottom: 4em;}
#can ol .title {padding: .8em 0;}



/* thought */
#thought .detail {margin-bottom: 7em;}
#thought .title {font-size: 1.6rem;}



/* profile */
#profile .name,
.one-word .word {font-size: 1.6rem;}
#profile .job,
#profile .biography {font-size: 1.3rem;}
#profile figure {width: 70%;}



/* profile */
#profile .name {font-size: 1.6rem; text-align: center;}
#profile figure {margin: 0 auto 3em;}



/* about-story */
#about-story .arrange64 {padding-bottom: 7em;}




/*===================================================================
//  privacy
//=================================================================*/
.privacy-list li:before {font-size: 1.6rem; line-height: 1; padding: .2em .4em; top: .3em;}




/*===================================================================
//  contact
//=================================================================*/
#form {padding: 90px 0 0 0; margin-top: -90px;}
.form-wrapper .title-wrapper {font-size: 1.5rem;}


.form-table label {width: 100%;}



/*===================================================================
//  フッター
//=================================================================*/
#pagebottom:before {left: 0; top: -49px;}


/* PANKUZU */
.pankuzu-wrapper .scroll {padding: 0.2em 0;}


/* fnav */
.foot-contents {flex-wrap: wrap; padding-top: 2.5em;}
.foot-contents .logo {margin: 0 auto 2.5em; width: 90px;}
.fnav-wrapper {width: 100%;}
.foot-contents .contact-btn {font-size: 1.6rem;}
.fnav > ul > li {font-size: 1.4rem; padding: 1em 0;}
.fnav > ul a {display: block; padding: .8em 0;}
.fnav ul.sub-menu li {font-size: 1.3rem; margin-top: 0;}

.fbottom,
.snsicon,
.copy {display: block; text-align: center;}
.fbottom .snsicon a {width: 44px; height: 44px; padding: .8em; margin-top: 2.5em;}
.fbottom .snsicon a:nth-of-type(2) {padding: .6em .8em;}




/*===================================================================
//  404
//=================================================================*/
.error #post-cases.base-section {padding-bottom: 8em;}




/*===================================================================
//  横向き・縦向き
//=================================================================*/
/* 横向き */
@media screen and (min-width: 540px) {
	/* arrange-左右配置コンテンツ */
    .arrange64 figure,
    .arrange82 figure {width: 35%;}

    /* archive */
    .archive-contents ul.post {grid-template-columns: repeat(2, 1fr);}
    .loop-block:nth-child(-n+2) {margin-top: 0;}

    /* home */
    #home-message > .blue-bg > .contents-wrapper:before {width: 80%;}
    #home-ippo > .blue-bg > .contents-wrapper:before {width: 55%;}

    /* tokoto-design */
    #tokoto-design .change-next:nth-of-type(2) {justify-content: center;}
    #tokoto-design .change-next:nth-of-type(2) li {margin: 1.5em 5%;}
}

/* 高さが低いとき */
@media screen and (max-height: 400px) {
	.catch {animation: none; opacity: 1; top: auto;}
}