@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* PC・スマホ共通スタイル */

html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}

html,
body,
a {
cursor: none;
}

/*独自のマウスカーソルを作成*/
.cursor {
position: fixed;
top: -5px;
left: -5px;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s;
transform: translate(0, 0);
pointer-events: none;
}

/*aタグにホバーした時に見た目変化*/
.cursor.cursor--hover {
top: -20px;
left: -20px;
width: 60px;
height: 60px;
background: rgba(179,121,54,0.5);
}

* {
    list-style: none;
    padding: 0;
    margin: 0;
}

body{
    font-family:'Josefin Sans',"游ゴシック体", YuGothic,'Noto Sans JP', sans-serif;
    font-size: 1.6em;
    font-weight:300;
}

a{
    text-decoration: none;
    color: black;
}

/* ===================== */
/* PC用のスタイル */
/* ===================== */

#works,#about,#service {
    margin: auto;
}

/*ここからheader*/

header{
    width: 100%;
    margin: auto;
    backdrop-filter: blur(12px);
    box-sizing: border-box; /* padding分を含んで幅を100%にするため */
    position: fixed; /* ウィンドウを基準に画面に固定 */
    top: 0; /* 上下の固定位置を上から0pxにする */
    left: 0; /* 左右の固定位置を左から0pxにする */
    box-shadow: 0px 0px 14px -10px;
    z-index: 999;
    transition: transform 0.3s 0.3s;
    position: relative;
}

header.hidden {
    transform: translateY(-80px);
}


/* h1見出しのフォント指定 */

h1{
    font-size: 0.8em;
    letter-spacing: 0.2em;
    line-height: 1.2;
    padding: 20px 0 14px 40px;
    font-weight:300;
}

/* ナビ */

nav {
    width: auto;
    padding: 16px 40px 0px 0px;
}

nav li {
    font-size: 0.9em;
    padding: 10px;
    text-align: center;
    width: 60px;
}

nav ul li:not(:last-child){
    display: flex;
    align-items: center;
}

nav ul li:not(:last-child)::before {
width: 0; /* 初期表示は表示しないようにする */
height: 0;
content: '';
background-color: transparent;
border-radius: 50%;
transition: 0.3s;
}

nav ul li:not(:last-child):hover::before {
width: 3px; 
height: 3px;
margin-right: 5px;
background-color: #333;
}


/* コンタクトボタン */

.contact{
    border:1px solid;
    border-color: #333;
    border-radius: 30px;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    padding: 10px 13px;
}

.contact a{
    display: block;
}

/* コンタクトボタンホバー */

.contact:hover{
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.6;
}

/* 🟢 481px以上は通常ナビ表示 */
@media (min-width: 481px) {
    .nav {
        display: block;
    }
    .hamburger {
        display: none; /* ハンバーガーメニューを非表示 */
    }
    .none .contact{
        display: none!important;
    }
}

/* 🔴 480px以下はハンバーガーメニュー表示 */
@media (max-width: 480px) {
    .nav {
        display: none; /* 初期状態では非表示 */
        position: fixed;
        top: 0;
        right: -100%; /* 画面外に隠す */
        width: 60%;
        height: 100vh;
        background: white;
        box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease-in-out;
        padding-top: 60px;
    }

    #top nav ul {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        justify-content: start;
        padding-top: 100px;
        
    }
    nav ul li:last-child{
        margin-left: -30px;
    }

    header .none{
        justify-content: end;
    }

    #top .none{
        justify-content: flex-end;
    }

    .none .contact{
        display: block;
        position: absolute;
        top: 15px;
        right: 70px;
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 6px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: solid 1px #333;
        position: absolute;
        top: 14px;
        right: 15px;
        transition: 0.3s;
    }

    .line {
        display: block;
        height: 1px;
        background: #333;
        transition: 0.3s;
        margin-right: 8px;
        z-index: 999;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    .long {
        width: 22px;
    }

    .short {
        width: 14px;
    }

    /* ハンバーガーメニューが開いたときのスタイル */
    .nav.active {
        right: 0; /* 画面右からスライドイン */
    }

    /*  ハンバーガーが開いたら「×」に変形 */
    .hamburger.active .line:nth-child(1) {
        transform: rotate(45deg) translate(0px, 5px);
    }

    .hamburger.active .line:nth-child(2) {
        width: 23px;
        transform: rotate(-45deg) translate(0px, -5px);
    }

    /*  メニューが開いたときに線を重ねる */
    .hamburger.active {
        border: none; /* 枠線を消す */
    }
}


/*ここからmaim*/

.flexbox{
    display: flex;
    padding: 0;
    justify-content: space-between;
}

/* h2見出しのフォント指定 */

body h2{
    font-size: 20px;
    letter-spacing: 0.2em;
    line-height: 1.2;
    padding: 0 0 20px 0;
    font-weight:300;
}

/* MOREボタン */


.more {
position: relative;
display: inline-block;
vertical-align: middle;
background: transparent;
width: 120px;
height: auto;
margin: 0 0 0 auto;
}

.more .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
display: block;
width: 3rem;
height: 3rem;
border: 1px solid;
border-color: black;
border-radius: 1.625rem;
}

.more .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #333;
}

.more .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 1px;
background: none;
}

.more .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.29rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 1px solid #333;
border-right: 1px solid #333;
transform: rotate(45deg);
}

.more .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0.4em;
right: 0;
bottom: 0;
padding: 0.8rem 0;
margin: 0 0 0 1.85rem;
color: #333;
text-align: center;
}
.more:hover .circle {
width: 100%;
}

.more:hover .circle .icon.arrow {
background: #333;
transform: translate(1rem, 0);
}

.more:hover .button-text {
color: #333;
}

.right{
    text-align: right;
    margin-right: 10%;
    padding-bottom: 40px;
}

/* ファーストビュー */

.box {
  /* 方眼紙模様に必須のスタイル */
background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
background-size: 16px 16px;
background-repeat: repeat;
background-position: center center;

  /* 以下任意のスタイル */
padding: 20px;
}

.wrap_contact{
    padding-top: 100px;
}

.firstview{
padding-top: 240px;
justify-content: center;
border-radius: 50px 0 0 50px;
padding-bottom: 280px;
}

.firstview .scroll_down span {
display: inline-block;
position: absolute;
right: 0;
top: 650px;
z-index: 1;
}

.hello{
    padding-top: 100px;
    color: #333;
}

.firstview p:last-of-type{
font-size: 3em;
padding-top: 10px;
letter-spacing: 0.2em;
}

.firstview video{
    margin-left: 100px;
    border: solid 1px #333;
    border-radius: 30px;
    width: 480px;
    height: 360px;
}

/* 画像 */

.top{
    background-color: #fff;
    width: 100%;
}

.top img{
    position: absolute;
    top: 814px;
    left: 16%;
    border: 1px solid;
    display: block;
    border-radius: 30px;
}

.shadow{
    box-shadow: 0px 0px 14px -10px;
}

/* ここからABOUT */

.wrap_about{
    background-color: #faf8e8;
    padding-top: 120px;
}

/* 内容 */

.profile{
    width: 50%;
    font-size: 0.9em;
    padding-left: 44%;
    padding-bottom: 100px;
}

.profile p{
    padding-bottom: 10px;
}

.profile p:nth-child(2){
    font-size: 1.2em;
}

.profile p:nth-child(4){
    width: 80%;
    line-height: 1.6em;
    padding-bottom: 20px;
}

/* ここまで */
/* ここからSERVICE */

.wrap_works,.wrap_service{
    background-color: #FFF;
}

.deco_1 {
    content: "";
    background: #FFF;
    width: 50px;
    height: 50px;
    border-radius: 50px 0 0 0;
    display: block;
}

.deco_2 {
    content: "";
    background: #FFF;
    width: 50px;
    height: 50px;
    border-radius: 0 50px 0 0;
    display: block;
}

.deco{
    content: "";
    background: #FFF;
    width: 98%;
    height: 50px;
}

/* 内容 */

.wrap_service{
    padding-top: 30px;
    padding-bottom: 30px;
}

#service{
    border: solid 1.4px #333;
    border-radius: 33px;
    width: 92%;
    box-shadow: 0px 0px 14px -10px #666;
}

/* h2見出し */

.wrap_service h2{
    padding: 50px 0;
    text-align: center
}

/* h3見出しのフォント指定 */

body h3{
    font-size: 20px;
    padding: 40px 0 0 0;
    font-weight:300;
    text-align: center;
}

.instructions{
    width: 300px;
    margin: auto;
    padding-top: 20px;
}

#service ul{
    justify-content: center;
    padding-bottom: 60px;
}

.service li{
    background-color: #faf8e8;
    width: 400px;
    height: 520px;
    border: solid 1px #333;
    border-radius: 30px;
}

.service li:nth-child(1){
    margin-right: -24px;
    box-shadow: 0px 0px 20px -10px #666;
}

.service li:nth-child(2){
    background-color: #fff;
    margin-right: -24px;
    box-shadow: 0px 0px 14px -10px #666;
}

.service li:nth-child(3){
    box-shadow: 0px 0px 14px -10px #666;
}

.service img{
    display: block;
    margin: auto;
}


/* ここからWORKS */

/* 内容 */

.wrap-works-page{
    padding-top: 80px;
}

.works_h2{
    margin: auto;
    display: block;
    padding: 0;
    text-align: center;
}

#works{
    padding-top: 100px;
    padding-bottom: 100px;
    margin: 0 auto;
}

.wrap_works .flexbox{
    justify-content: center;
}

/* スライド */

.slider {
    display: block;
    overflow: hidden;
    width: 70%;
}

.slider_items{
    display: block;
    position: relative;
    height: 600px;
    width: 400px;
    border:solid 1px #333;
    margin-right: 15px;
    margin-left: 15px;
    border-radius: 50px;
    box-shadow: 0px 0px 14px -10px #666;
    overflow: hidden;
}

.slider_items img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    transition: 0.3s;
}

.slider_items img:hover{
    transform:scale(1.1,1.1);
    object-fit: cover;
}

.slider_items .works_details{
    position: absolute;
    bottom:0;
    left: 20%;
    width: 70%;
    padding: 4% 0 4% 10%;
    background-color: rgba(51,51,51,0.55) ;
    border-radius: 50px 0 50px 0;
    color: #fff;
}

.small{
    padding-top: 4px;
    font-size: 0.8em;
}

/*矢印*/

.slick-arrow {
display: block;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
padding: 0;
width: 20px;
height: 38px;
color: transparent;
z-index: 1;
transition: opacity 0.5s;
z-index: 1;
}

.slick-arrow:hover {
opacity: 0.7;
}

/* 共通設定 */

.slick-next::before,
.slick-next::after,
.slick-prev::before,
.slick-prev::after {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
content: "";
vertical-align: middle;
}

.slick-next::after,
.slick-prev::after {
width: 26px;
height: 26px;
border-top: 1px solid #333;
border-right: 1px solid #333;
}

/* next */

.slick-next {
right: 4px;
}
.slick-next::after {
right: 4px;
transform: rotate(45deg);
}

/* prev */

.slick-prev {
left: 8px;
}
.slick-prev::after {
left: 8px;
transform: rotate(-135deg);
}

@media screen and (max-width: 767px) {
.slick-next::after,
.slick-prev::after {
    width: 10px;
    height: 10px;
}
.slick-next {
    right: 8px;
}
.slick-prev {
    left: 8px;
}
.slick-next::after {
    right: 2px;
}
}

/* CONTACT */

.form{
    padding: 100px;
    background-color: #faf8e8;
    width: 60%;
    margin: 0 auto;
    text-align: center;
    border-radius: 50px;
    box-shadow: 0px 0px 14px -10px #666;
    margin-bottom: 100px;
}

.form p:first-of-type{
    padding: 40px 0;
}

.required::after {
    content: "※";
    color: red;
    vertical-align: top;
    font-size: 0.6em;
}

input[type="submit"],
input[type="text"],
select,
textarea,
button {
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    border: none;
}

input[type="text"],
textarea {
    background: #fff;
    display: block;
    padding: 12px 0px 12px 15px;
    width: 480px;
    transition: 0.8s;
    border-radius: 0;
    margin: auto;
}

input[type="text"]:focus,
textarea:focus {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

textarea[name="content"] {
    display: block;
    width: 480px;
    height: 200px;
    margin: auto;
}

input::placeholder,
textarea::placeholder {
    color: #ccc;
}

::-webkit-input-placeholder {
    color: #ccc;
    opacity: 1;
}

::-moz-placeholder {
    color: #ccc;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #ccc;
    opacity: 1;
}

.form-table {
    border-collapse: collapse;
    display: inline-block;
    padding: 50px 0;
    margin: 0 auto;
}

.form-table th,
.form-table td {
    display: block;
    width: 100%;
    border-bottom: none;
    padding: 4px 0 4px 4px;
}

.form-table th {
    position: relative;
    text-align: left;
    width: 480px;
    padding-top: 16px;
}


/* フッター */

footer{
    background-color: #333333;
    border-radius: 50px 50px 0 0;
    color: #FFF;
    margin: 0 auto;
    text-align: center;
    padding: 30px 0;
    display: block;
}

.btn {
    text-align: center;
}
.btn input {
    display: inline-block;
    background: #fff;
    padding: .5em 4em;
    color: #333;
    text-decoration: none;
    border: none;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    border-radius: 30px;
    border: #333 solid 1px;
}
.btn input:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.6;
}

/* topに戻る*/

.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    border: solid 1px ;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    background-color: rgba(255,255,255,0.8) ;
    transition:0.3s all;
}

.pagetop:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.4;
}

.pagetop_arrow {
    height: 10px;
    width: 10px;
    border-top: 1px solid ;
    border-right: 1px solid ;
    transform: translateY(20%) rotate(-45deg);
    z-index: 99;
}



/* ----------------ここからWORKS----------------*/

.works-page h2{
    text-align: center;
    padding-top: 60px;
}

.works-page .flexbox{
    max-width: 1300px;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: flex-start;
}

.works-page .flexbox li{
    padding-top: 50px;
}

.txt-hide{
display: none;
}

button.all {
font-family:'Josefin Sans',"游ゴシック体", YuGothic,'Noto Sans JP', sans-serif;
font-weight:300;
background-color: #333;
color: #fff;
width: 100px;
margin: auto;
margin-top: 100px;
margin-bottom: 40px;
display: block;
border-radius: 30px;
padding:10px 20px;
transition: .5s;
-erbkit-transition: .5s;
}

button.all::after {
content: "View all";
transition: .2s;
-erbkit-transition: .2s;
}

button.all.on-click::after{
content: "Close";
}

.gyousyu{
    margin: 30px auto;
    width: 800px;
    padding: 30px;
    text-align: center;
    border: solid 1px #333;
    margin: 30px auto 100px auto ;
}

.wrap-works-page .form a,.details_form a{
    background-color: #333;
    color: #FFF;
}

.wrap-works-page .form p{
    padding-bottom: 50px;
}

/* ----------------ここからWORKS下層ページ----------------*/

.background {
    background-position: center;
    position: relative;
    height: 850px;
    object-fit: cover;
    background-attachment: fixed;
    background-size: cover;
}

/* ----------------スクロールダウン----------------*/

.scroll_down:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80%;
background: linear-gradient(180deg,rgba(#000, 0) 0, rgba(#000, .8) 80%, rgba(#000, .8) 100%);
}

.scroll_down span {
display: inline-block;
position: absolute;
right: 0;
top: 650px;
left: 0;
z-index: 999;
width: 13px;
padding: 10px 10px 110px;
color: #000;
font-size: 14px;
line-height: 1;
letter-spacing: .2em;
text-transform: uppercase;
writing-mode: vertical-lr;
transition: .2s;
overflow: hidden;
margin-left: 90%;
}

.scroll_down span:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background: #ddd;
}

.scroll_down span:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background: #000;
}

#type01 span:after {
  animation: sdl01 2.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes sdl01 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* ----------------ここからWORKS下層ページごとの画像----------------*/

.background {
    background-image: url('img/works/powerbank/powerbanklogo_main.PNG');
}

.ehrenglanz {
    background-image: url('img/works/ehrenglanz/ehrenglanz_main.png');
}

.souseikougyou {
    background-image: url('img/works/souseikougyou/souseikougyou_main.png');
}

.jnine {
    background-image: url('img/works/j-nine/jnine_main.png');
}

.minamimorimachi {
    background-image: url('img/works/minamimorimachi/minamimorimachi-main.png');
}

.twelveeight {
    background-image: url('img/works/twelveeight/twelveeight_logo.png');
}

.board {
    background-image: url('img/works/wedding/board/board_1.jpg');
}

.book {
    background-image: url('img/works/wedding/profilebook/1.png');
}

/* ----------------ここまで---------------*/

main .wrap{
    position: relative;
}

.background img{
    width: 100%;
    height: 850px;
    object-fit: cover;
}

.background::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 850px;
background: rgba(0, 0, 0, .2);
}

.background_works_details{
    position: absolute;
    left: 10%;
    top: 50%;
    color: #FFF;
}

.link{
    color: #FFF;
    display: block;
    z-index: 1000;
    position: absolute;
    left: 10%;
    top: 60%;
}

.background_works_details p:first-child{
    font-size: 1.2em;
}

.background_works_details p:last-of-type{
    font-size: 2em;
    font-weight: bold;
    padding-bottom: 10px;
}

.details_wrap{
    background-color: #FFF;
}

.details_wrap p{
    margin: auto;
    width: 70%;
    padding: 20px 0 60px 0;
}

.works_img img{
    display: block;
    margin: auto;
    width: 40%;
    padding-bottom: 60px;
}


.wrap .deco_1,.wrap .deco_2,.wrap .deco {
    margin-top: -50px;
    z-index: 100;
}

.viewall{
    display: block;
    margin: 0 auto;
    width: 80px;
    text-align: center;
    margin-bottom: 100px;
    margin-top: 40px;
    border: solid 1px #333;
    border-radius: 30px;
    padding: 10px;
}

/* ----------------ここからレスポンシブ----------------*/

@media (max-width: 1280px) {
.wrap-works-page .slider_items{
    height: 450px;
    width: 300px;
}
.works-page .flexbox{
    justify-content: center;
}
}

/* ラップトップ / 小型デスクトップ */

@media (max-width: 1024px) {
    .cursor {
display:none;
}
.cursor.cursor--hover {
display:none;
}
    .profile{
    padding-left: 55%;
}
#service ul{
    width: 90%;
    margin: auto;
}
.service img{
    width: 100%; /* 親要素が小さいときはそれに合わせる */
    height: auto;
}
.service li{
    width: 40%;
    height: auto;
    padding-bottom: 30px;
}
.instructions{
    width: 80%;
    font-size: 0.9em;
}
.slider {
    width: 55%;
}

}

/* スマートフォン (縦向き) */
@media (max-width: 480px) { 

.firstview{
    display: block;
    padding: 0;
    height: 100vh;
    position: relative;
}

.video video{
    margin: 0 auto;
    width: 60%;
    height: auto;
    display: block;
    position: absolute;
    top: 30%;
    left: 30%;
}

.firstview .hello{
    z-index: 2;
    position: absolute;
    top: 8%;
    left: 12%;
}

.firstview p:last-of-type{
font-size: 2em;
padding-top: 10px;
letter-spacing: 0.2em;
}

.firstview .scroll_down span {
position: absolute;
right: 0;
top: 600px;
}

.top img{
    position: absolute;
    top: 680px;
    width: 160px;
    height: auto;
}

#about .contents{
    margin: auto;
}

.wrap_about{
    padding-top: 180px;
}

.profile{
    padding-left: 0;
    width: 100%;
    padding-left: 6%;
}

.profile p:nth-child(3){
    font-size: 1em;
}

.profile p:nth-child(4){
    width: 88%;
    font-size: 0.9em;
}

#service .service{
    display: block;
}

.instructions{
    width: 80%;
}

#service ul{
    justify-content: center;
    padding-bottom: 60px;
}

.service li{
    background-color: #faf8e8;
    width: 90%;
    height: 360px;
    border: solid 1px #333;
    border-radius: 30px;
    padding: 0;
    margin: 0 auto;
    font-size: 0.9em;
}

.service li:nth-child(1){
    margin: 0 auto;
}

.service li:nth-child(2){
    margin: 0 auto;
}

.service img{
    width: 50%;
    height: auto;
}

#works{
    flex-direction: column;
    overflow: hidden;
}

.slider {
    width: 100%;
}

.slider_items{
    height: 450px;
    width: 300px;
    margin: 0 auto;
    border-radius: 50px;
}

.slider_items img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    transition: 0.3s;
}

.works_h2{
    padding-bottom: 40px;
}

.form{
    padding: 10% 6%;
    width: 84%;
    margin-bottom: 100px;
    font-size: 0.8em;
}

input[type="text"],
textarea {
    width: 305px;
}

textarea[name="content"] {
    width: 305px;
}



.form-table th,
.form-table td {
    width: 320px;
}


/* ----------------ここからWORKS----------------*/

.works-page {
    margin: auto;
}

.gyosyutitle{
    font-size: 0.9em;
}

.gyousyu{
    margin: 30px auto 60px auto;
    width: 80%;
    font-size: 0.8em;
}

.details_wrap p {
    font-size: 0.9em;
    width: 80%;
}

.background img,.ehrenglanz ,.souseikougyou ,.jnine ,.minamimorimachi,.twelveeight ,
.board,.book {
    object-fit: cover;
    object-position: center center;
}

.works_img img{
    display: block;
    margin: auto;
    width: 80%;
    padding-bottom: 40px;
}

}