@charset "UTF-8";

/* body */

body {
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght" 300;
    letter-spacing: 0.1em;
    color: #000;
    /* gyst-variable・100～700まで */
    /* font-family: "ten-mincho", serif;
font-weight: 400;
font-style: normal; */
/* 貂明朝ノーマル */
/* font-family: "ten-mincho", serif;font-weight: 400;
font-style: italic; */
}
a:hover {
    opacity: 0.7;
    cursor: pointer;
    transition: 0.2s;
}

/* loading */
/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 999;
      background:#f2ece7;
      text-align:center;
      color:#fff;
    }
    /* Loading画像中央配置　*/
    #splash_logo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    /* Loading アイコンの大きさ設定　*/
    #splash_logo img {
      width:230px;
    } 
    /* fadeUpをするアイコンの動き */
    .fadeUp{
    animation-name: fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
    }
    /* アニメーション */
    @keyframes fadeUpAnime{
      from {
        opacity: 0;
      transform: translateY(100px);
      }
    
      to {
        opacity: 1;
      transform: translateY(0);
      }
    }

/* main */
main {
    color: #333;
}

/* header */

header {
    font-size: 16px;
    display: flex;
    width: 100%;
    height: 64px;
    background-color: #f2ece7cc;
    position: fixed;
    z-index: 20;
}
h1 {
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght" 300;
    font-size: 40px;
    position: absolute;
    top: 6px;
    left: 19px;
}
.width-logo img {
    /* ヘッダー用のロゴの大きさ */
    width: 34px;
    height: 51px;
}
.mainmenu {
    display: flex;
    /* 横並びに*/
    justify-content: flex-end;
    /* flexboxの終了地点から要素を配置する */
    list-style: none;
    /* ナビの左にある黒い点を消す */
    color: rgb(56, 62, 62);
    font-size: 20px;
    font-size: 22px;
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght" 500;
    position: absolute;
    top: 22px;
    right: 25px;
    gap: 52px;
    color: #897356;
}
.mainmenu li:hover {
    opacity: 0.7;
}
.mainmenu li:hover .submenu {
    display: block;
    /* .submenuが画面から見えないようにしてるのをmainmenuにhoverした時ブロックする */
    transition: 0.8s;
}
/* メインメニューのliにホバーすると色が変更 */
.submenu {
    background-color: #dbd2cccc;
    border-radius: 5px;
    padding: 0px 17px 10px;
    position: absolute;
    /* サブメニュー全体に絶対値を適用 */
    display: none;
    /* 画面全体から見えないようにする */
}
.submenu ul li {
    display: block;
    /* divでかかっている横並びをブロックしsubmenuのliを横並びに */
    list-style: none;
    /* ナビの左にある丸を消す */
    margin-top: 15px;
    /* 上に詰まってるので余白15px */
    border-bottom: 1px dotted white;
    /* 下にドットの線 */
}
.submenu ul li:last-child {
    border: none;
}
/* サブメニューの最後のliはドット無し */
a {
    text-decoration: none;
    /* ナビゲーション下の線を消す */
    color: inherit;
    /* リンクに親要素のカラーを受け継がせる記述 */
}
.top {
    width: 100%;
       height: 770px;
       background: url(../image/top/site-top-pink.png);
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
       margin-bottom: 165px;
       display: flex;
       /* フレックスをかけ */
       flex-direction: column;
       /* カラムをかけ */
       /* justify-content: center;
       縦の中で中央になり */
       /* align-items: center;
       真ん中に来る */
       position: relative;
       /* 名前とポートフォリオの文字の親となる記述 */
   }
.top h2 {
    color: #897751;
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght" 600;
font-weight: 500;
    font-size: 63px;
    letter-spacing: 0.05em;
    position: absolute;
    top: 267px;
    left: 468px;
}
.top h3 {
    color: #897751;
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght" 600;
    font-style: medium;
    font-size: 63px;
    letter-spacing: 0.05em;
    position: absolute;
    top: 390px;
  right: 381px;
}
.name-span {
    color: #f2ece7;
}
.p-span {
    color: #f2ece7;
}
/* top-responsive */
@media screen and (min-width:1900px) {
    /*　画面サイズが1900pxからはここを読み込む　*/
    .top h2 {
        left: 600px;
    }
    .top h3 {
        right: 516px;
    }
    }

    @media screen and (max-width:1348px) { 
        /*　画面サイズが768pxからはここを読み込む　*/
        .top h2 {
            left: 409px;
        }
        .top h3 {
            right: 324px;
        }
        #splash_logo img {
            /* loading画像を画面サイズに応じて小さく */
            max-width: 100%;
            height: auto;
        }
        }
        @media screen and (max-width:1200px) { 
            .top h2 {
                left: 332px;
            }
            .top h3 {
                right: 249px;
            }
            }
            @media screen and (max-width:1100px) { 
                .top h2 {
                    left: 286px;
                }
                .top h3 {
                    right: 195px;
                }
                }
        @media screen and (max-width:1000px) { 
            .top h2 {
                left: 234px;
            }
            .top h3 {
                right: 143px;
            }
            }
        @media screen and (max-width:821px) { 
            .top h2 {
                left: 149px;
            }
            .top h3 {
                right: 57px;
            }
            }
@media screen and (max-width:768px) { 
    /*　画面サイズが768pxからはここを読み込む　*/
    .top {
        margin-bottom: 100px;
    }
    .top h2 {
        top: 318px;
        left: 101px;
    }
    .top h3 {
        top: 432px;
        right: 69px;
    }
    #splash_logo img {
        /* loading画像を画面サイズに応じて小さく */
        max-width: 100%;
        height: auto;
    }
    }
    @media screen and (max-width:690px) { 
        .top h2 {
            top: 289px;
            left: 55px;
        }
        .top h3 {
            right: 23px;
        }
        }
        @media screen and (max-width:396px) { 
            .top {
                height: 621px;
            }
            .top h2 {
                font-size: 51px;
                top: 234px;
                left: 19px;
            }
            .top h3 {
                font-size: 51px;
                top: 363px;
                right: 14px;
            }
            }
        @media screen and (max-width:392px) { 
            .top h2 {
                font-size: 43px;
                top: 212px;
                left: 4px;
            }
            .top h3 {
                font-size: 43px;
                top: 361px;
                right: 15px;
            }
            }
    @media screen and (max-width:376px) { 
        /*　画面サイズが376pxからはここを読み込む　*/
        header {
            height: 58px;
        }
        .width-logo {
            top: 1px;
            left: 12px;
            /* ↑位置指定 */
        }
        .width-logo img {
            width: 36px;
            height: 36px;
            /* ↑大きさ指定 */
        }
        .top {
            height: 482px;
            margin-bottom: 67px;
        }
        .top h2 {
            font-size: 29px;
            top: 179px;
            left: 31px;
        }
        .top h3 {
            font-size: 29px;
            top: 264px;
            right: 14px;
        }
        }
        @media screen and (max-width:321px) { 
            /*　画面サイズが321pxからはここを読み込む　*/
            .top {
                height: 450px;
                margin-bottom: 51px;
            }
            .top h2 {
                font-size: 29px;
                top: 160px;
                left: 24px;
            }
            .top h3 {
                font-size: 29px;
                top: 241px;
                right: 12px;
            }
            }

/* scroll(マウス) */
/*スクロールダウン全体の場所*/
.scrolldown3{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:10px;
	right:50%;
    /*マウスの動き1.6秒かけて動く永遠にループ*/
	animation:mousemove 1.6s ease-in-out infinite;
}
/*下からの距離が変化して上から下に動く*/
@keyframes mousemove{
      0%{bottom:10px;}
      50%{bottom:5px;}
     100%{bottom:10px;}
 }
/*Scrollテキストの描写*/
.scrolldown3 span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	bottom:45px;
    /*テキストの形状*/
	color: #897751;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}
/*マウスの中の線描写 */
.scrolldown3 span::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top:10px;
	left:17px;
    /*線の形状*/
	width: 1px;
	height: 15px;
	background: #897751;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: mousepathmove 1.4s linear infinite;
	opacity:0;
}
/*上からの距離・不透明度・高さが変化して上から下に流れる*/
@keyframes mousepathmove{
	0%{
		height:0;
		top:10px;
		opacity: 0;
	}
	50%{
		height:15px;
		opacity: 1;
	}
	100%{
		height:0;
		top:30px;
		opacity: 0;
	}
}
/*マウスの描写 */
.scrolldown3:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-10px;
    /*マウスの形状*/
	width:25px;
	height:37px;
	border-radius: 10px;
	border:1px solid #897751;
}
/*マウスの中の丸の描写*/
.scrolldown3:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:26px;
	left:0;
    /*丸の形状*/
	width:5px;
	height: 5px;
	border-radius: 50%;
	border:1px solid #897751;
}

/* ハンバーガーメニュー(responsive) */
@media screen and (max-width:768px) { 
    /*　画面サイズが480pxからはここを読み込む　*/
    
/*アクティブになったエリア*/
#g-nav.panelactive{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
	top: 0;
	width:100%;
    height: 100vh;
}
/*丸の拡大*/
.circle-bg{
    position: fixed;
	z-index:3;
    /*丸の形*/
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #f2ece7cc;
    /*丸のスタート位置と形状*/
	transform: scale(0);/*scaleをはじめは0に*/
    right:-50px;
    top:calc(50% - 50px);/*50%から円の半径を引いた値*/
    transition: all .6s;/*0.6秒かけてアニメーション*/
}
.circle-bg.circleactive{
	transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}
/*ナビゲーションの縦スクロール*/
#g-nav-list{
    display: none;/*はじめは表示なし*/
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
#g-nav.panelactive #g-nav-list{
     display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
.mainmenu {
	opacity: 0;/*はじめは透過0*/
    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    flex-direction: column;
    /* 縦並びに*/
    gap: 36px;
    /* ギャップを縮める */
}
/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
    opacity:1;
}
/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/*リストのレイアウト設定*/
#g-nav li{
	text-align: center; 
	list-style: none;
}
#g-nav li a{
	color: #897751;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}
.submenu {
    display: flex;
    /* フレックスをかけてdisplaynoneを打ち消し */
    position: static;
    /* positonを初期値へ */
    font-size: 15px;
    /* 文字は小さく */
    margin-top: 0px;
    /* margin-top打ち消し */
    padding: 100px 0px 62px;
    /* submenu被らないようにpadding追加*/
    background-color: transparent;
    /* バックの色をtransparentで打ち消し */
}
.submenu ul {
    position: absolute;
    /* submenu(div)のulにabsolute */
    top: 13%;
    left: 35%;
}
/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
	top:10px;
	right: 10px;
	z-index: 9999;/*ボタンを最前面に*/
	cursor: pointer;
    width: 50px;
    height:50px;
}	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 2px;
	background-color: #897751;
  	/* width: 45%; */
    width: 56%;
  }
.openbtn span:nth-of-type(1) {
	top:15px;	
}
.openbtn span:nth-of-type(2) {
	top:23px;
}
.openbtn span:nth-of-type(3) {
	top:31px;
}
.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}
.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}
.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}
    }
/* ハンバーガーのresponsive(376px) */
@media screen and (max-width:376px) { 
    /*　画面サイズが376pxからはここを読み込む　*/
    .openbtn {
        /* ハンバーガーボタンの大きさ */
        width: 45px;
        height: 45px;
        /* ハンバーガーボタンの位置 */
        top: 4px;
        right: 10px;
    }
    .openbtn span:nth-of-type(1) {
        /* スパンの位置1 */
        top:16px;	
    }
    .openbtn span:nth-of-type(2) {
        /* スパンの位置2 */
        top:23px;
    }
    .openbtn span:nth-of-type(3) {
        /* スパンの位置3 */
        top:30px;
    }
    .submenu ul {
        /* submenuの位置を調整 */
        left: 16%;
    }
    }
    @media screen and (max-width:321px) {
        /*　画面サイズが321pxからはここを読み込む　*/
        .submenu ul {
            /* submenuの位置を調整 */
            left: 11%;
        }
        }


/* works */

.section-work h3 {
 /* homepage (見出し)*/
font-size: 36px;
text-align: center;
padding: 0px 0 80px;
}
/* テキストアニメ(1文字ずつ流れる)のCSS */
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}
#homepage::before {
    /* homepage (見出し)の前*/
    content: '';/*何も入れない*/
    display: inline-block;
    width: 96px;
    height: 50px;
    background-image: url(
        ../image/decoration/homepage-before.png
    );
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 15px;
    margin-bottom: 7px;
    rotate: 1deg;
}
.homepage-container {
    display: flex;
    flex-direction: column;
    gap: 105px;
}
.homepage-box {
    display: flex;
    justify-content: center;
    gap: 100px;
}
.hp-sentence {
    display: flex;
    flex-direction: column;
    width: 28%;
    position: relative;
   /* 親要素にする記述・あとで消すかも */
}
.top-view img {
    /* 宇宙カフェのTOP画 */
    width: 523px;
    height: 299px;
    border-radius: 7px;
}
.top-view2 img {
    /* ポートフォリオサイトのTOP画 */
    width: 523px;
    height: 297px;
    border-radius: 7px;
}
.top-view3 img {
    /* wakkaのtop画 */
    border-radius: 7px;
}
.hp-title {
    /* HPのタイトル */
    display: flex;
    gap: 33px;
    padding: 10px 0;
    box-sizing: border-box;
}
.hp-title p {
    font-size: 30px;
    padding-top: 3px;
}
.hp-title.ja p {
    font-size: 26px;
    /* padding-top: 3px; */
    font-family: "ten-mincho", serif;
}
.homepage-title p {
    font-size: 30px;
}
.hp-number {
    /* HPの制作順番 */
    font-size: 35px;
}
.hp-info {
    /* コンセプトとターゲットの箱 */
    display: flex;
flex-direction: column;
align-content: center;
gap: 20px;
font-family: "ten-mincho", serif;
font-weight: 400;
font-style: normal;
padding-top: 30px;
margin-left: 64px;
text-align: left;
}
.hp-info2 {
    /* コンセプトとターゲットの箱 */
    display: flex;
flex-direction: column;
align-content: center;
gap: 20px;
font-family: "ten-mincho", serif;
font-weight: 400;
font-style: normal;
padding-top: 30px;
margin-left: 72px;
text-align: left;
}
.hp-info3 {
    /* コンセプトとターゲットの箱 */
    display: flex;
flex-direction: column;
align-content: center;
gap: 20px;
font-family: "ten-mincho", serif;
font-weight: 400;
font-style: normal;
padding-top: 30px;
margin-left: 72px;
text-align: left;
}
.hp-concept {
    font-size: 17px;
}
.hp-target {
    font-family: "ten-mincho", serif;
    font-weight: 400;
    font-style: normal;
}
.hp-info h4::before
{
    /* 宇宙カフェのh4 */
    content: '';/*何も入れない*/
    display: inline-block;
    width: 7px;
    height: 25px;
    background-color: #d3e8ed;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    border-radius: 3px;
    margin-left: 9px;
    margin-right: 16px;
    margin-bottom: 5px;
}
.hp-info2 h4::before {
    /* ポートフォリオのh4 */
    content: '';/*何も入れない*/
    display: inline-block;
    width: 7px;
    height: 25px;
    background-color: #f2ece7;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    border-radius: 3px;
    margin-left: 9px;
    margin-right: 16px;
    margin-bottom: 5px;
}
.hp-info3 h4::before {
    /* wakkaのh4 */
    content: '';/*何も入れない*/
    display: inline-block;
    width: 7px;
    height: 25px;
    background-color: #61b2f8;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    border-radius: 3px;
    margin-left: 9px;
    margin-right: 16px;
    margin-bottom: 5px;
}
.hp-info p,
.hp-info2 p,
.hp-info3 p {
    /* コンセプトとターゲットの説明欄 */
    font-family: "ten-mincho", serif;
    font-weight: 400;
    font-style: normal;
    padding-top: 10px;
    /* text-align: center; */
    text-align: left;
    text-indent: 2em;
    line-height: 1.8;
}
.more-button,
.more-button2,
.more-button3 {
    position: absolute;
    right: 0px;
    bottom: 5px;
    border: 1px solid #ccc;
    box-sizing: content-box;
    width: 14%;
    height: 6%;
    padding: 7px 17px 7px 48px;
    border-radius: 20px;
    cursor: pointer;
    transition: all .5s ease;
}
/*アイコンの＋と×*/
.more-button::before,
.more-button::after{
    /* ラグランジェのモアボタン */
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #89c3cf;
    border-radius: 3px;
}
.more-button2::before,
.more-button2::after{
    /* ポートフォリオのモアボタン */
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #ccbdb0;
    border-radius: 3px;
}
.more-button3::before,
.more-button3::after{
    /* ポートフォリオのモアボタン */
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #61b2f8;
    border-radius: 3px;
}
.more-button::before,
.more-button2::before,
.more-button3::before {
    top:48%;
    left: 18px;
    transform: rotate(0deg);
   
}
.more-button::after,
.more-button2::after,
.more-button3::after {    
    top:48%;
    left: 18px;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.more-button.close::before,
.more-button2.close::before,
.more-button3.close::before {
	transform: rotate(45deg);
}
.more-button.close::after,
.more-button2.close::after,
.more-button3.close::after {
	transform: rotate(-45deg);
}

/* homepage-more */
.homepage-more,
.homepage-more2,
.homepage-more3 {
/* クリックしたら出るHPの詳細情報 */
display: none;
/* 最初は見えない */
border: solid 1px #ccc;
/* 線を引く */
width: 71%;
box-sizing: border-box;
border-radius: 30px;
padding: 53px 0 40px;
margin: 0 auto;
}
.view-box {
    display: flex;
    justify-content: center;
    gap: 30px;
}
.lagrangian-pc img {
    width: 480px;
    height: 312px;
    border-radius: 14px;
}
.lagrangian-sp img {
    width: 480px;
    height: 312px;
    border-radius: 14px;
}
.color-palette {
    text-align: center;
    margin-top: 60px;
}
.color-palette img {
    /* カラーパレット */
    width: 682px;
    height: 42px;
    border-radius: 4px;
}
.profile-pc img {
    border-radius: 14px;
}
.profile-sp img {
    width: 480px;
    height: 313px;
    border-radius: 14px;
}
.view-sentence {
    font-family: "ten-mincho", serif;
font-weight: 400;
font-style: normal;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 60px;
    letter-spacing: 0.12em;
    padding: 80px 0 40px;
}
.view-sentence h4 {
    font-size: 20px;
    letter-spacing: 0.18em;
}
.first-raw {
    /* 配色と制作時間のraw */
    width: 67%;
    display: flex;
    gap: 65px;
    margin: 0 auto;
}
.first-raw h4 {
    text-align: left;
    /* firstrawの見出しだけ左寄りに */
}
.color,
.time,
.ingenuity {
list-style: none;
display: flex;
flex-direction: column;
gap: 36px;
}
.ingenuity {
    width: 67%;
    margin: 0 auto;
}
.ingenuity h4 {
    text-align: left;
}
.ingenuity p {
    text-align: left;
}
.color p {
    text-align: left;
    line-height: 2em;
}
.first-raw h4::before,
.ingenuity h4::before,
.maked h4::before {
    /* 宇宙カフェのh4 */
    content: '';/*何も入れない*/
    display: inline-block;
    width: 7px;
    height: 25px;
    background-color: #d3e8ed;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    border-radius: 3px;
    margin-right: 17px;
    margin-bottom: 5px;
}
.homepage-more2 .first-raw h4::before,
.homepage-more2 .ingenuity h4::before,
.homepage-more2 .maked h4::before {
    /* ポートフォリオのh4 */
    content: '';/*何も入れない*/
    display: inline-block;
    width: 7px;
    height: 25px;
    background-color: #f2ece7;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    border-radius: 3px;
    margin-right: 17px;
    margin-bottom: 5px;
}
.homepage-more3 .first-raw h4::before,
.homepage-more3 .ingenuity h4::before,
.homepage-more3 .maked h4::before,
.homepage-more3 .design-comp h4::before {
        /* wakkaのh4 */
        content: '';/*何も入れない*/
        display: inline-block;
        width: 7px;
        height: 25px;
        background-color: #61b2f8;
        background-size: contain;
        background-repeat: no-repeat;
        vertical-align: middle;
        border-radius: 3px;
        margin-right: 17px;
        margin-bottom: 5px;
}
.design-comp h4 {
    text-align: center;
    font-family: "ten-mincho", serif;
font-weight: 400;
font-style: normal;
font-size: 19px;
}
.comp-box {
    display: flex;
    justify-content: center;
    gap: 70px;
    padding-top: 33px;
}
.cording {
    text-align: center;
    padding: 35px 0 50px 57px;
}
.cording img {
    width: 264px;
    height: 187px;
}
.wakka-pc img,
.wakka-sp img {
    width: 480px;
    height: 312px;
    border-radius: 14px;
}
.wakkacomp-pc {
    display: flex;
    flex-direction: column;
}
.wakkacomp-pc img {
    width: 342px;
    height: 1516px;
}
.wakkacomp-sp img {
    width: 188px;
    height: 2363px;
}
.wakkacomp-drawr img {
    width: 271px;
    height: 288px;
}
.ingenuity-s {
    /* 工夫した点 */
    line-height: 2em;
}
.maked h4 {
    letter-spacing: 0.4em;
    /* 制作物・文字間の余白多めに */
}
/* 宇宙カフェのスライダー */
.making-slider-L {
    list-style: none;
    max-width: 500px;
    margin: 0 auto;
    padding-top: 42px;
}
.making-slider-L img {
    margin: 0 auto;
}
.making-slider-L p {
    letter-spacing: 0.2em;
    padding-top: 17px;
}
.favicon-L {
    margin-top: 20px;
}
.slider-top img {
    /* top */
    width: 228px;
    height: 154px;
}
.slider-logo img {
    /* logo群 */
    width: 270px;
    height: 163px;
}
.slider-concept img {
    /* コンセプト群 */
    width: 309px;
    height: 150px;
}
.slider-info img {
    /* インフォ群 */
    width: 268px;
    height: 148px;
}
.slider-info-sp img {
    /* スマホ版インフォ */
    width: 270px;
    height: 163px;
}
/* 宇宙カフェのスリック調整 */
.making-slider-L .slick-prev:before,
.making-slider-L .slick-next:before {
    /* 矢印のカラー */
    color: #213a70;
    font-size: 25px;
}
.making-slider-L .slick-dots {
    bottom: -38px;
}
/* ポートフォリオスライダー */
.making-slider-P {
    list-style: none;
    max-width: 500px;
    margin: 0 auto;
    padding-top: 42px;
}
.making-slider-P img {
    margin: 0 auto;
}
.making-slider-P p {
    letter-spacing: 0.2em;
    padding-top: 17px;
}
.favicon-P {
    margin-top: 20px;
}
.favicon-P img {
    width: 126px;
    height: auto;
}
.top-portfolio img {
    width: 288px;
    height: 163px;
}
.responsive-L img {
    /* レスポンシブ画面(宇宙カフェ) */
    width: 320px;
    height: 159px;
}
.responsive-p img {
    /* レスポンシブ画面(ポートフォリオ) */
    width: 309px;
    height: 157px;
}
.responsive-w img {
    width: 300px;
    height: 165px;
}
/* ポートフォリオのスリック調整 */
.making-slider-P .slick-prev:before,
.making-slider-P .slick-next:before {
    /* 矢印のカラー */
    color: #ccbdb0;
    font-size: 25px;
}
button#slick-slide-control10::before,
button#slick-slide-control11::before,
button#slick-slide-control12::before,
button#slick-slide-control13::before,
button#slick-slide-control14::before {
    /* ドットのカラー */
    color: #ccbdb0;
}
.making-slider-L .slick-dots {
    bottom: -38px;
}
/* wakkaの制作物スライダー */
.homepage-more3 .maked {
    /* wakkaスライダーとカンプの間の余白 */
    padding-bottom: 25px;
}
.making-slider-W {
    max-width: 500px;
    margin: 0 auto;
    padding-top: 42px;
}
.making-slider-W img {
    margin: 0 auto;
}
.making-slider-W p {
    letter-spacing: 0.2em;
    padding-top: 17px;
}
.favicon-W {
    margin-top: 28px;
}
.favicon-W img {
    width: 176px;
    height: 135px;
}
/* wakkaのスリックの装飾調整 */
.making-slider-W .slick-prev:before,
.making-slider-W .slick-next:before {
    /* 矢印のカラー */
    color: #61b2f8;
    font-size: 25px;
}
button#slick-slide-control20::before,
button#slick-slide-control21::before,
button#slick-slide-control22::before,
button#slick-slide-control23::before,
button#slick-slide-control24::before,
button#slick-slide-control25::before,
button#slick-slide-control26::before {
    /* ドットのカラー */
    color: #61b2f8;
}
/* homepage下のsection装飾 */
.custom-shape-divider-bottom-1709080874 {
    /* position: absolute; */
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}
.custom-shape-divider-bottom-1709080874 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 140px;
}
.custom-shape-divider-bottom-1709080874 .shape-fill {
    fill: #fff2b8;
}
/* fadeup */
.fadeUpTrigger{
    opacity: 0;
    }
.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
/* works-responsive */
@media screen and (min-width:1900px) {
    /*　画面サイズが1900pxからはここを読み込む　*/
    .homepage-more,
.homepage-more2,
.homepage-more3 {
    width: 59%;
}
.more-button,
.more-button2,
.more-button3 {
    width: 10%;
}
    }   
@media screen and (max-width:1000px) { 
    /*　画面サイズが480pxからはここを読み込む　*/
    .homepage-container {
        gap: 50px;
    }
    .homepage-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 100px;
        padding: 0 40px;
    }
    .top-view,
    .top-view2,
    .top-view3 {
    /* 宇宙カフェのTOP画 */
    /* ポートフォリオサイトのTOP画 */
margin: 0 auto;
    }
    .top-view img,
    .top-view2 img,
    .top-view3 img  {
    /* 宇宙カフェのTOP画 */
    /* ポートフォリオサイトのTOP画 */
     width: 100%;
     height: auto;
    }
    .hp-sentence {
        width: auto;
    }
    .hp-title {
        justify-content: center;
    }
    .hp-info,
    .hp-info2,
    .hp-info3 {
        width: 43%;
        gap: 40px;
        margin: 0 auto;
    }
    .hp-info p,
    .hp-info2 p,
    .hp-info3 p {
        text-align: left;
        text-indent: 0em;
        padding-top: 20px;
    }
.hp-info p:nth-child(3) {
    padding-top: 10px;
}
    .hp-info h4,
    .hp-info2 h4,
    .hp-info3 h4 {
        text-align: left;
    }
    .more-button,
    .more-button2,
    .more-button3 {
        width: 10%;
        position: relative;
        margin: 0 auto;
        padding: 7px 0 7px 48px;
        margin-top: 40px;
        /* 上との余白を設ける為 */
    }
    @media screen and (max-width:482px) { 
        /*　画面サイズが768pxからはここを読み込む　*/
        .more-button,
        .more-button2,
        .more-button3 {
            width: 14%;
        }
        }
        @media screen and (max-width:400px) { 
            /*　画面サイズが768pxからはここを読み込む　*/
            .more-button,
            .more-button2,
            .more-button3 {
                width: 17%;
            }
            }
            @media screen and (max-width:376px) { 
                /*　画面サイズが768pxからはここを読み込む　*/
                .more-button,
                .more-button2,
                .more-button3 {
                    width: 22%;
                }
                }
            @media screen and (max-width:322px) { 
                /*　画面サイズが768pxからはここを読み込む　*/
                .more-button,
                .more-button2,
                .more-button3 {
                    width: 27%;
                }
                }

    /* ここからhomepage-more */
    .view-box {
        /* デバイスの画面(pcとスマホ)をくくるボックス*/
        flex-direction: column;
        text-align: center;
    }
    .lagrangian-pc img,
    .lagrangian-sp img,
    .profile-pc img,
    .profile-sp img,
    .wakka-pc img,
    .wakka-sp img {
        width: 90%;
        height: auto;
    }
    .color-palette img {
        width: 79%;
        height: auto;
    }
    .first-raw {
        flex-direction: column;
    }
    .making-slider-L,
    .making-slider-P {
        max-width: 326px;
    }
/* ここからwakka */
.comp-box {
    flex-direction: column;
    text-align: center;
}
.wakkacomp-pc,
.wakkacomp-sp,
.wakkacomp-drawr {
    margin: 0 auto;
}
.wakkacomp-pc h5,
.wakkacomp-sp h5,
.wakkacomp-drawr h5 {
    text-align: center;
}
.wakkacomp-pc img,
.wakkacomp-sp img,
.wakkacomp-drawr img {
    max-width: 90%;
    height: auto;
    margin: 0 auto;
}
    }
    @media screen and (max-width:768px) {
        .hp-info, .hp-info2, .hp-info3 {
            width: 100%;
        }
        .more-button, .more-button2, .more-button3 {
           width: 20%;
        }
        .oil-top img {
                width: 100%;
    height: auto;
        }
    }
    @media screen and (max-width:376px) { 
        /*　画面サイズが376pxからはここを読み込む　*/
        .section-design {
            padding-top: 60px;
        }
        .homepage-container {
            padding: 0 20px 0;
            gap: 38px;
        }
        .homepage-box {
            gap: 45px;
        }
        #homepage::before {
            /* homepage (見出し)の前*/
            width: 58px;
            height: 30px;
        }
        .section-work h3 {
            font-size: 23px;
            padding: 0 0 45px;
        }
        .hp-number {
            /* HPの数字 */
            font-size: 29px;
        }
        .hp-title {
            /* HPと数字のタイトルの間 */
            gap: 16px;
        }
        .hp-title p {
            /* HPのタイトル */
            font-size: 25px;
        }
        .hp-info,
        .hp-info2,
        .hp-info3 {
            width: 84%;
            gap: 37px;
        }
        .hp-info p,
        .hp-info2 p,
        .hp-info3 p {
            font-size: 14px;
        }
        .homepage-more,
        .homepage-more2,
        .homepage-more3 {
            padding-top: 38px;
            width: 96%;
        }
        .custom-shape-divider-bottom-1709080874 svg {
            height: 80px;
        }
        }
        
/* design */

.section-design {
    padding: 140px 0 0;
}
.design-back {
    background-color: #fff2b8;
    padding-top: 102px;
    padding-bottom: 20px;
}
.design-width {
    width: 80%;
    margin: 0 auto;
    position: relative;
    /* h3の親要素とする記述 */
}
.section-design h3 {
    color: rgb(154, 66, 7);
    font-size: 37px;
text-align: center;
font-style: italic;
padding: 20px 0 35px;
rotate: -6deg;
position: absolute;
/* design-backを親としたabsolute */
top: -124px;
left: 245px;
z-index: 20;
/* スライダーよりも上に見えるように */
}
#design-span {
    font-size: 51px;
    color: orange;
}
.section-design h4 {
    color: rgb(255 221 175);
    font-size: 37px;
    font-style: italic;
    rotate: -6deg;
    position: absolute;
/* design-backを親としたabsolute */
top: -82px;
left: 400px; 
}
.shadow-span {
    font-size: 51px;
    color: #fddea4;
}
.section-design h3:before {
    content: '';/*何も入れない*/
    display: inline-block;
    width: 134px;
    height: 69px;
    background-image: url(../image/decoration/brushes-stroke.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 15px;
    margin-bottom: 18px;
  }
.design-container {
    text-align: center;
}
.design-container p {
    /* みかんのまんまの説明文 */
    font-family: "ten-mincho", serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0.2em;
padding-top: 20px;
}
.design-container img {
    margin: 0 auto;
    width: 576px;
    height: 343px;
}
.mikan1 img {
    width: 432px;
    height: 306px;
    border-radius: 3px;
}
.mikan2 img {
    width: 432px;
    height: 306px;
    border-radius: 3px;
}
.mikan3 img {
    width: 432px;
    height: 300px;
    border-radius: 3px;
}
.future-map img {
    width: 500px;
    height: 320px;
    }
.cafebanner img {
width: 420px;
height: 333px;
}
.diving-banner img {
    width: 480px;
    height: 320px;
}
.seaslug img {
    width: 480px;
    height: 320px;
}
/* designのslick指定 */
.design-container {
    margin: 0 auto;
    /* スリック全体を中央寄せ */
    max-width: 600px;
    /*スリックのwidthを指定 */
}
.design-container .slick-prev {
    /* 左の矢印の位置 */
    left: -58px;
}
.design-container .slick-prev:before,
.design-container .slick-next:before {
    /* 矢印のカラー */
    color: #f49d43;
    font-size: 25px;
}
.design-container button#slick-slide-control40:before,
.design-container button#slick-slide-control41:before,
.design-container button#slick-slide-control42:before,
.design-container button#slick-slide-control43:before,
.design-container button#slick-slide-control44:before,
.design-container button#slick-slide-control45:before,
.design-container button#slick-slide-control46:before,
.design-container button#slick-slide-control47:before {
    /* デザインスライダーのドットの色 */
    color: #f49d43;
}
.design-container .slick-dots {
/* ドットの全体の位置 */
    bottom: -26px;
}
.slick-dotted.slick-slider {
    margin-bottom: 0px;
}

/* design下のsection装飾 */
.custom-shape-divider-top-1709083836 {
    /* position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.custom-shape-divider-top-1709083836 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 125px;
    transform: rotateY(180deg);
}
.custom-shape-divider-top-1709083836 .shape-fill {
    fill: #FFF2B8;
}
/* design-responsive */
@media screen and (min-width:1900px) {
    /*　画面サイズが1900pxからはここを読み込む　*/
    .section-design h3 {
            left: 366px; 
        }
        .section-design h4 {
            /* designの影 */
            left: 520px; 
            }
    }
@media screen and (max-width:768px) { 
    /*　画面サイズが768pxからはここを読み込む　*/
    .section-design {
        padding-top: 90px;
    }
    .section-design h3 {
    /* designという文字 */
    top: -124px;
        left: 27px; 
    }
    .section-design h4 {
        /* designの影 */
        top: -85px;
        left: 181px; 
        }
    }
    @media screen and (max-width:368px) { 
    /*　画面サイズが368pxからはここを読み込む　*/
    /* .section-design h3:before {
        width: 86px;
        height: 44px;
        rotate: 7deg;
        margin-bottom: 30px;
      } */
      .section-design h3 {
        font-size: 30px;
        top: -104px;
        left: 26px;
    }
      .section-design h4 {
        font-size: 30px;
        top: -74px;
        left: 135px;
    }
            #design-span,
        .shadow-span {
            font-size: 48px;
        }
    .design-container {
        max-width: 278px;
    }
    .design-container img {
        max-width: 100%;
        height: auto;
    }
    .mikan-0 img {
        /* みかん見出しの余白を調整 */
        margin-top: 37px;
    }
    .custom-shape-divider-top-1709083836 svg {
        /* デザイン下のsection装飾 */
        height: 62px;
    }
    }
    @media screen and (max-width:321px) {
        /*　画面サイズが321pxからはここを読み込む　*/
        .section-design h3:before {
            /* デザインセクションの筆 */
            width: 73px;
            height: 37px;
          }
          .section-design h3 {
font-size: 30px;
        }
        .section-design h4 {
            font-size: 30px;
            top: -76px;
            left: 120px;
                    }
        #design-span,
        .shadow-span {
            font-size: 48px;
        }
        }
        
/* oilpaint */

.section-oilpaint {
    padding: 0;
}
.oil-back {
    background-color:#f2f0e3;
    padding-bottom: 27px;
}
.oil-width {
    width: 80%;
    /* 油絵全体のwidthを80% */
    margin: 0 auto;
    padding-top: 125px;
    position: relative;
    /* h3の親とする記述 */
}
.section-oilpaint h3 {
    color: #926f6f;
    font-size: 36px;
    text-align: center;
    font-style: italic;
    padding: 38px 0 60px;
    rotate: 2deg;
    position: absolute;
    top: -24px;
    right: 240px;
    z-index: 20;
}
.oil-span {
    color: #978888;
    font-size: 51px;
}
.section-oilpaint h3:before {
    content: '';/*何も入れない*/
    display: inline-block;
    width: 101px;
    height: 52px;
    background-image: url(../image/decoration/oilpaint-before.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 10px;
    margin-bottom: 13px;
    rotate: -23deg;
  }
  .section-oilpaint h4 {
    /* 影 */
    color: #ddd2d2;
    font-size: 36px;
    font-style: italic;
    rotate: 2deg;
    position: absolute;
    top: 27px;
    right: 232px;
}
.oil-shadow {
    /* 影のspan */
    font-size: 51px;
}
.oilpaint-slider {
    text-align: center;
}
.oilpaint-slider img {
    margin: 0 auto;
}
.oil-top img {
width: 576px;
height: 343px;
}
.susukino img {
    width: 371px;
    height: 311px;
}
.mati img {
    width: 371px;
    height: 309px;
}
.meguru img {
    width: 424px;
    height: 300px;
}
.oilpaint-slider p {
    /* 油絵スライダーの説明文 */
    font-family: "ten-mincho", serif;
font-weight: 400;
font-style: normal;
letter-spacing: 0.2em;
padding-top: 18px;
}
/* 油絵のギャラリーへ飛ぶmoreボタン */
.viewmore-box {
    position: absolute;
    top: 455px;
    right: 120px;
}
.viewmore 
{
    display:inline-block;
    font-size: 17px;
    padding:10px 25px;
    position:relative;
    color:#fff;
    cursor:pointer;
    z-index: 2;
    rotate: 2deg;
}
.viewmore::before
    {
        content:'';
        position:absolute;
        height:100%;
        width:100%;
        top:5px;
        right:-5px;
        background-color:#c7bcab;
        z-index:-1;
        transition:transform .2s ease-in-out;
    }
.viewmore::after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    border:1px solid #534c1a;
    z-index: 10;
}
.viewmore:hover::before {
        transform:translate(-5px,-4px)
        /* ホバーしたら移動する */
    }
/* 油絵のslickの調整 */
.oilpaint-slider {
    margin: 0 auto;
    /* スリック全体を中央寄せ */
    max-width: 600px;
    /*スリックのwidthを指定 */
}
.oilpaint-slider .slick-prev {
    /* 左の矢印の位置 */
    left: -58px;
}
.oilpaint-slider .slick-prev:before,
.oilpaint-slider .slick-next:before {
    /* 矢印のカラー */
    color: 	#a49276;
    font-size: 25px;
}
button#slick-slide-control30::before,
button#slick-slide-control31::before,
button#slick-slide-control32::before,
button#slick-slide-control33::before {
    /* 油絵のドットボタンの色 */
    color: 	#a49276;
}
.oilpaint-slider .slick-dots {
/* ドットの全体の位置 */
    bottom: -27px;
}
@media screen and (min-width:1900px) {
    /*　画面サイズが1900pxからはここを読み込む　*/
    .section-oilpaint h3 {
        /* oilpaintingという文字 */
        right: 330px;
    }
    .section-oilpaint h4 {
        /* 影 */
        right: 323px;
    }
    .viewmore-box {
        right: 293px;
    }
    }
@media screen and (max-width:768px) { 
    /*　画面サイズが768pxからはここを読み込む　*/
    .section-oilpaint h3 {
        /* oilpaintingという文字 */
        top: -24px;
        right: 44px;
    }
    .section-oilpaint h4 {
        /* 影 */
        top: 27px;
        right: 40px;
    }
    .section-oilpaint h4 {
        /* 影 */
        top: 27px;
        right: 40px;
    }
    .viewmore-box {
        top: 502px;
        right: -28px;
    }
    }
@media screen and (max-width:376px) { 
    /*　画面サイズが376pxからはここを読み込む　*/
    .oil-back {
        padding-bottom: 81px;
    }
    .oil-width {
        width: 94%;
    }
    .section-oilpaint h3:before {
        width: 70px;
        height: 37px;
      }
    .section-oilpaint h3 {
        font-size: 29px;
        top: -10px;
        right: 42px;
        rotate: -9deg;
    }
    .section-oilpaint h4 {
        font-size: 29px;
        top: 33px;
        right: 40px;
        rotate: -9deg;
    }
    .oilpaint-slider {
        max-width: 278px;
    }
    .oilpaint-slider img {
        max-width: 100%;
        height: auto;
    }
    .oil-top img {
        margin-top: 47px;
    }
    .viewmore-box {
        top: 442px;
        right: 117px;
    }
    p.viewmore {
        font-size: 13px;
    }
    .viewmore {
        padding: 7px 15px;
        rotate: 1deg;
    }
    }
    @media screen and (max-width:321px) {
        /*　画面サイズが321pxからはここを読み込む　*/
        .section-oilpaint h3:before {
            width: 65px;
            height: 33px;
          }
          .section-oilpaint h3 {
            right: 25px;
        }
        .section-oilpaint h4 {
            top: 30px;
            right: 21px;
        }
        .oil-span,
        .oil-shadow {
            font-size: 47px;
        }
        .viewmore-box {
            /* oilpaintへ行くボタンの位置 */
            right: 101px;
        }
        }

/* about */

/* about上のsection装飾 */
.custom-shape-divider-top-1709082972 {
    /* position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.custom-shape-divider-top-1709082972 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 150px;
}
.custom-shape-divider-top-1709082972 .shape-fill {
    fill: #f2f0e3;
}
.section-about {
    padding: 90px 0 50px;
    font-family: "ten-mincho", serif;
font-weight: 400;
font-style: normal;
}
.section-about h3 {
    color: #8d8282;
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght" 300;
    font-size: 39px;
    font-style: italic;
    text-align: center;
    padding: 0 0 39px;
    letter-spacing: 0.1em;
}
.section-about h3::before {
    /* アバウトの前に入れる筆 */
    content: '';/*何も入れない*/
    display: inline-block;
    width: 96px;
    height: 50px;
    background-image: url(../image/decoration/about-before.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 15px;
    margin-bottom: 13px;
    rotate: 4deg;
}
.about-container {
    display: flex;
    justify-content: center;
    gap: 89px;
    padding-bottom: 60px;
    /* awardと離すためのpaddingbottom */
}
.portrait {
    text-align: center;
}
.portrait img {
    margin-top: 43px;
    width: 381px;
    height: 376px;
}
.profile {
    display: flex;
flex-direction: column;
gap: 33px;
padding-top: 95px;
text-align: center;
}
.name {
    font-size: 28px;
    letter-spacing: 0.14em;
}
rt {
    font-size: 0.5em;
    color: #7e7d7d;
}
.sentence {
    text-align: left;
    line-height: 2em;
}
.award {
    margin: 0 auto;
}
/*賞のアコーディオン*/
.accordion-area{
    font-family: "ten-mincho", serif;
    font-weight: 400;
    font-style: normal;
    list-style: none;
    width: 39%;
    max-width: 550px;
    margin:0 auto;
}
.accordion-area li{
    margin: 10px 0;
}
.accordion-area section {
	border: 1px solid #ccc;
    border-radius: 15px;
    /* アコーディオンエリアに角丸 */
}
/*アコーディオンタイトル*/
.title {
    text-align: center;
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
    padding: 3% 3% 3% 50px;
    transition: all .5s ease;
}
/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #333;
    
}
.title::before{
    top:48%;
    left: 27px;
    transform: rotate(0deg);   
}
.title::after{    
    top:48%;
    left: 27px;
    transform: rotate(90deg);
}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
	transform: rotate(45deg);
}
.title.close::after{
	transform: rotate(-45deg);
}
/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
    background: #f6f6f6;
	margin:0 3% 3% 3%;
    padding: 3%;
    border-radius: 11px;
}
.box table {
    margin: 0 auto;
    background-color: #f9f8f8;
}
.box th {
    border: 1px solid #ccc;
    font-family: "gyst-variable", sans-serif;
    font-variation-settings: "wght" 300;
    padding: 9px 21px;
    vertical-align: middle;
}
.box td {
    border: 1px solid #ccc;
    padding: 9px 21px;
}
    .br_pc {
        display: block;
    }
    .br_sp {
        display: none;
    }
/* about-reponsive */
@media screen and (max-width:768px) { 
    /*　画面サイズが768pxからはここを読み込む　*/
    .br_pc {
        display: none;
    }
    .br_sp {
        display: block;
    }
    .award {
        display: none;
    }
    .section-about {
        padding: 61px 0 30px;
    }
    .about-container {
        flex-direction: column;
        padding-bottom: 31px;
        /* awardと離すためのpaddingbottom */
    }
    .profile {
    padding-top: 14px;
    }
    .sentence {
        margin: 0 auto;
        padding: 0 2em;
    }
    }
    @media screen and (max-width:376px) { 
        /*　画面サイズが376pxからはここを読み込む　*/
        .custom-shape-divider-top-1709082972 svg {
            /* アバウト上の装飾 */
            height: 80px;
        }
        .about-container {
            gap: 40px;
        }
        .section-about h3 {
            font-size: 29px;
            padding: 0 0 15px;
        }
        .section-about h3::before {
            /* アバウトの前に入れる筆 */
            width: 64px;
            height: 33px;
        }
        .profile {
            gap: 31px;
            }
        .portrait {
            padding: 0 40px 0;
        }
        .portrait img {
            width: 100%;
            height: auto;
        }
        .name {
            font-size: 21px;
        }
        .birth {
            font-size: 15px;
        }
        .sentence {
            font-size: 13px;
        }
        .title {
            /* ↓とりあえずの記述・後で消す */
            font-size: 14px;
            padding: 4% 9% 4% 38px;
        }
        /* ↓とりあえずの記述・後で消す */
        .title::before{
            top:48%;
            left: 18px;  
        }
        .title::after{    
            top:48%;
            left: 18px;
        }
        }
        @media screen and (max-width:321px) {
            /*　画面サイズが321pxからはここを読み込む　*/
            .title {
                /* ↓とりあえずの記述・後で消す */
                font-size: 12px;
            }
            }
            

/* about下のsection装飾 */
.custom-shape-divider-top-1709088191 {
    /* position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.custom-shape-divider-top-1709088191 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 150px;
    transform: rotateY(180deg);
}
.custom-shape-divider-top-1709088191 .shape-fill {
    fill: #fff;
}
@media screen and (max-width:368px) {
    /*　画面サイズが376pxからはここを読み込む　*/
    .custom-shape-divider-top-1709088191 svg {
        height: 70px;
    }
    }


/* contact */

.section-contact {
    padding: 0px 0 100px;
    background-color: #fffaf6;
}
.section-contact h3 {
    color: #8a8477;
    font-size: 39px;
    font-style: normal;
    font-variation-settings: "wght" 400;
    text-align: center;
    padding: 50px 0 70px;
}
.section-contact h3::before {
    /* コンタクトの前の絵具 */
    content: '';/*何も入れない*/
    display: inline-block;
    width: 96px;
    height: 50px;
    background-image: url(../image/decoration/contact-before.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 15px;
    margin-bottom: 7px;
    rotate: -26deg;
}
 dl {
    max-width: 583px;
    background-color: #f2ece7;
font-family: "ten-mincho", serif;
font-weight: 400;
font-style: normal;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
border-radius: 26px;
}
dt {
    color: #7a7161;
    font-weight: 300;
    width: 26%;
    padding-bottom: 20px;
    margin-bottom: 10px;
    padding: 2em 0 20px;
    text-align: left;
    box-sizing: border-box;
    margin-left: 3em;
}
dd {
    width: 63%;
    padding-bottom: 20px;
    padding: 2em 0 20px;
    box-sizing: border-box;
}
input {
    width: 66%;
    background-color: #ffffff;
    font-size: 1em;
    font-weight: 300;
    padding: 5px;
    margin-left: 5em;
    border-radius: 5px;
}
textarea {
    background-color: #ffffff;
    border-radius: 5px;
    margin-left: 5em;
}
.must {
    color: #efa18f;
}
.submit {
    text-align: center;
    color: #7a7161;
    font-family: "ten-mincho", serif;
    font-weight: 400;
    font-style: normal;
    padding: 40px 0 0;
}
.submit input {
    width: 120px;
    background-color: #f2ece7;
    margin-left: 0px;
    padding: 10px 27px;
}
.submit input:hover {
    opacity: 0.8;
    cursor: pointer;
}
/* contactのresponsive */
@media screen and (max-width:768px) { 
    /*　画面サイズが768pxからはここを読み込む　*/
    .contact-back {
       padding:  0 30px;
    }
    dl {
        max-width: 475px;
        flex-direction: column;
        /* コンタクトを縦ならびに */
    }
dt {
    width: auto;
    padding: 1em 0 10px;
    text-indent: 6em;
}
dt:first-child {
    margin-top: 27px;
}
dd {
    width: auto;
    padding: 0 0 10px;
    margin: 0 auto;
}
input {
    display: block;
    width: 60%;
    margin-left: 0px;
    margin: 0 auto;
}
textarea {
    margin-bottom: 20px;
    margin-left: 0px;
}
    }
@media screen and (max-width:368px) { 
/*　画面サイズが368pxからはここを読み込む　*/
.section-contact {
    padding: 0px 0 80px;
}
.section-contact h3 {
    font-size: 29px;
    padding: 67px 0 50px;
}
.section-contact h3::before {
    /* コンタクトの前の絵具 */
    width: 61px;
    height: 31px;
    margin-right: 9px;
}
dt {
    font-size: 14px;
    text-indent: 7em;
    margin-bottom: 0px;
}
input {
    font-size: 14px;
    width: 102%;
}
textarea {
    font-size: 14px;
}
.submit {
    padding: 30px 0 0;
}
.submit input {
    width: 100px;
font-size: 14px;
    padding: 10px 17px;
}
}
@media screen and (max-width:321px) {
    /*　画面サイズが321pxからはここを読み込む　*/
    dt {
        text-indent: 5em;
    }
    }


/* footer */

footer {
    height: 100px;
    background-color: #f2ece7;
    position: relative;
    /* スクロールボタンの親となる記述 */
}
.footer-navi {
    background-color: #f2ece7;
    color: #897356;
display: flex;
font-size: 21px;
font-variation-settings: "wght" 500;
gap: 50px;
justify-content: center;
padding: 61px 0 0;
}
.scroll-button {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 16px;
    font-variation-settings: "wght" 500;
    color: #897356;
    position: absolute;
    top: 50px;
    right: 71px;
}
.scroll-button img {
    width: 18px;
    height: 24px;
    margin-left: 4px;
}
.small {
    background-color: #f2ece7;
    color: #897356;
    font-size: 19px;
    padding: 90px 0 20px;
    text-align: center;
}
@media screen and (max-width:768px) { 
    /*　画面サイズが480pxからはここを読み込む　*/
    .footer-navi {
        font-size: 20px;
        flex-direction: column;
        gap: 16px;
        padding-left: 43px;
    }
    .scroll-button {
        top: 52px;
        right: 47px;
    }
    .scroll-button img {
        width: 16px;
        height: 21px;
        margin-left: 5px;
    }
                       .section-oilpaint h3 {
            font-size: 30px;
        }
        .section-oilpaint h3:before {
    width: 70px;
    height: 29px;
        }
        .section-design h3:before {
    width: 89px;
    height: 58px;
        }
        .design-container img {
    width: 100%;
    height: auto;
        }
    }
    @media screen and (max-width:376px) { 
        /*　画面サイズが376pxからはここを読み込む　*/
        .footer-navi {
            font-size: 16px;
            padding-left: 34px;
        }
        .scroll-button {
            font-size: 13px;
            right: 36px;
        }
        .scroll-button img {
            width: 15px;
            height: 20px;
            margin-left: 4px;
        }
        .small {
            font-size: 14px;
        }
        }

    @media screen and (max-width:768px) {
        .top h2 {
            display: none;
        }
        .top h3 {
            display: none;
        }
        .section-contact {
            display: none;
        }
    }

     /* client-works */
.client-Works h3 {
        font-size: 36px;
    text-align: center;
    padding: 0px 0 80px;
 }
.tgc_fes .hp-concept::before,
.tgc_fes .hp-target h4::before {
background: #e7e2de;
}
.i_beauty .hp-concept::before,
.i_beauty .hp-target h4::before {
background: #e7e2de;
}
.client-Works {
    padding-bottom: 8em;
}
#client-Work_ttl::before {
    content: '';
    display: inline-block;
    width: 96px;
    height: 50px;
    background-image: url(../image/decoration/about-before.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 15px;
    margin-bottom: 13px;
    rotate: 4deg;
}
.more-button.tgc::before, .more-button.tgc::after {
    background-color: #ffc7fc;
}