@charset "UTF-8";

/* モバイルレスポンシブ  540px ~ */
html {
    /* 1px = 0.1rem  100px = 10rem */
    /* font-size: 10px; */
    /* calc( 100vw / ベースのウィンドウサイズ) で
        1px = 1rem でレスポンシブサイズのコーディングができる */
    font-size: calc(100vw / 540);
}


h1 {
    font-size: 40rem;
}

h2 {
    font-size: 32rem;
}

h3 {
    font-size: 24rem;
}

p,
li, 
table,
ol,
dl,
address {
    font-size: 24rem;
}

.page-container {
    padding: 0 15rem;
}

iframe {
	width: 100%;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーヘッダー */

.site-name {
    width: 100%;
    text-align: center;
    padding-top: 50rem;
}

.site-name h1 {
    font-size: 52rem;
    padding-left: 0;
}

.site-name h2 {
    width: 100%;
    top: 150rem;
}

.head-text p {
    top: 170rem;
    left: 0;
    width: 100%;
    padding: 0 40rem;
}

.header {
    height: 385rem;
}

.head-bg {
    overflow: hidden;
}

.head-bg img {
    width: 300%;
    height: 300%;
    object-position: 40% -200rem;
}

.head-nav ul {
    left: 20rem;
}

.head-nav li {
    margin-right: 30rem;
}

.head-nav li h1, .head-nav li span {
    font-size: 32rem;
}

.head-nav li p {
    font-size: 24rem; 
    left: 10rem;
}

_::-webkit-full-page-media,
_:future,
:root .head-nav li p {
	font-size: 24rem; 
	left: 10rem;
}


.head-bg.nav img, .head-bg.nav.scroll-nav img {
    width: 850%;
    height: 1155%;
    /* display: none; */
    object-position: 40% -585rem;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー フロントページ */

.front-all {
    padding: 0 30rem;
}

.front-topic {
    margin: 0 auto;
}

.front-topic h4 {
    margin-top: -40rem;
    padding-left: 0;
}

.front-topic h5 {
    width: 100%;
    box-shadow: 0rem 10rem 5rem #00000029;
}

.front-works, .front-contact {
    padding-top: 0;
}

.front-content-img {
    display: block;
}

.front-content-img img {
    margin-right: 0;
    margin-bottom: 50rem;
}

.front-nav {
    left: 200rem;
    margin-top: 0;
}

.arrow.front {
    width: 170rem;
    height: 25rem;
    left: 0;
}

.button {
    margin-top: 50rem;
    height: 60rem;
}

.front-content p {
    width: 100%;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ブログ埋め込み */

.list-box.front ul{
    left: 20rem;
}

.post-item.front {
    margin-right: 0;
    margin-bottom: 100rem;
}

.post-header.front {
    top: 170rem;
    left: 20rem;
    width: 410rem;
    height: 110rem;
}

.post-title.front,
.post-title.blog {
    font-size: 24rem;
}

.post-time.front {
    font-size: 24rem;
}

.post-category.front {
    font-size: 20rem;
    height: 35rem;
}

.list-box.front {
    height: 1450rem;
}

_::-webkit-full-page-media,
_:future,
:root .post-category.front {
	padding-top: 3rem;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー フッター */
.foot-nav {
    left: 285rem;
    padding-left: 0rem;
    border-left: solid 2rem #fff;
}

.foot-title {
    position: absolute;
    top: 35rem;
}

.foot-title h2{
    padding-left: 15rem;
}

.foot-title h4 {
	padding-left: 15rem;
    width: 260rem;
    font-size: 18rem;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ブログ */
.list-box.blog {
    padding: 0 20rem;
}


.post-item.blog {
    padding-bottom: 210rem;
}

.post-header.blog {
    top: 170rem;
    left: -310rem;
    height: 220rem;
    padding: 20rem;
    min-width: 410rem;
    margin-left: 0;
}

.post-content.blog {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 40rem;
    margin: 5rem 0;
}

.post-category.blog a {
    left: 200rem;
    top: 165rem;
    text-overflow: ellipsis;
    width: 180rem;
    overflow: hidden;
    white-space: nowrap;
}

.wp-pagenavi a,
.wp-pagenavi span.current,
.extend,
.wp-pagenavi span {
    font-size: 24rem;
    padding: 0 20rem;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ブログ詳細 */

.article-all {
    display: block;
}

.article-column1 {
    width: 100%;
    margin-right: 0;
}

.post-img.article a, .post-img.article img {
    width: 330rem;
    height: 240rem;
}

.post-img.article a,
.post-img.article img {
    width: 495rem;
    height: 420rem;
}

.content.article  {
    margin-bottom: 100rem;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーページネーション */

.post-pagination {
    display: flex;
}

.post-pagination ul {
    width: 100%;
}

.pagination-left {
    width: 45%;
}

.pagination-right {
    width: 45%;
}

.arrow.left,
.arrow.right {
    width: 170rem;
}

.arrow.right {
    right: 25rem;
}

.pagination-right:hover .arrow.right{
    margin-left: 40rem;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーパンくず */
.breadcrumbs {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

.bread-space {
    margin: 0 20rem;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー関連記事 */

.article-column2 {
    width: 100%;
    margin-top: 100rem;
}

.related-article h3, .related-category h3, .pickup h3 {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 80rem;
    padding: 8rem;
}

.related-box,
.post-img.related,
.post-img.pickup {
    margin: 0 auto;
}

.post-title.related a, .post-title.pickup {
    text-align: center;
}

.post-category.related a,
.related-category ul a,
.post-category.pickup a {
    margin: 0 auto;
    margin-top: 15rem;
    margin-bottom: 80rem;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーワークス */

.made-item p {
    margin-left: 0;
}

.made-item p br:not(:nth-child(2)) {
    display: none;
}

.works-contents {
    display: block;
}

.works-nav {
    right: -280rem;
}

.works-explanation {
    width: 100%;
}

.portfolio h3, .made-item h3, .design-works h3, .title.detail h3 {
    top: 0;
}

.arrow.right.works {
    right: 50rem;
}

.works-nav:hover .arrow.right {
    transition: 0.6s;
    opacity: 1;
    right: 20rem;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーワークス詳細 */
.page-line1 .detail-top .datail-top-box {
    width: 100%;
}

.page-line2 {
    display: block;
}

.page-line2 .works-nav {
    padding-left: 0;
    display: block;
    width: fit-content;
}

.page-line2 .arrow.right.works {
    right: 0;
}

.page-line2 .works-nav:hover .arrow.right.works {
    margin-left: 30rem;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーお問い合わせ */

.form {
    padding: 0;
    padding-bottom: 50rem;
}

.privacy p {
    display: block;
}

.content-answer {
	padding: 50rem 20rem;
}

.content-answer a {
	margin-top: 60rem;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */