/*主たるブレイクポイント670px*/

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:ital@0;1&family=Quicksand:wght@300..700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #362d2b;
    font-family: "Quicksand", sans-serif;

}


/*------------------------ここから共通設定------------------------------*/
html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    background-color: #f3dcd8d8;
}

li {
    list-style: none;
}

section p {
    line-height: 2rem;
}

/*///////////////////////////////
1200px以上で左右に表示される背景の固定画像
//////////////////////////////*/
.bg_img {
    position: fixed;
    width: 100%;
    height: 100vh;
    /*最背面に置いておく*/
    max-width: 1920px;
    background-image: url(img/bg_img.png);
    background-size: cover;
    background-position: left top;
    background-repeat: repeat-y;
    z-index: -1;
    /*画面左上に固定*/
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

p,
span {
    font-family: "Zen Maru Gothic", sans-serif;
}

/*///////////////////////////////
aタグの設定
//////////////////////////////*/
a {
    /*aタグのデフォルトでついてる下線を消す*/
    text-decoration: none;

    /*ホバー前とホバー後のセレクタに
それぞれ同じプロパティ（値を数値で指定で生きるものを設定して、
変化前（ホバー前）のほうにtransitionでミリ秒を設定することで
この時間かけて変化後にスタイルが変化していく*/
    transition: 0.3s;
    opacity: 1;
    /*こ要素の画僧をホバーで拡大すると領域からはみ出すので非表示にする*/
    overflow: hidden;
    /*spでタップしたときに背景色が変わる*/
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.6);
}

a:hover {
    opacity: 0.7;

}

a img {
    /*ホバーしたときのゆっくり画像が拡大*/
    transition: transform .3s ease;

}

a:hover img {
    /*aタグにホバーしたときのimg画像が拡大*/
    transform: scale(1.05)
}



/*.............-width:670px>>>>>>>>>>>*/
@media screen and (max-width:670px) {

    /*sp版ではホバーリアクションは必要ないので相殺する*/
    /*    a {
        transition: 300ms;
        width: 100%;
        opacity: 1;
    }

    a:hover {
        opacity: 1;
        width: 100%;
    }
*/

    /*<<<<<<<<<<<max-width:670px<<<<<<<<<*/
}


/*///////////////////////////////
imgタグの設定親要素に対して100％
//////////////////////////////*/

img {
    max-width: 100%;
}


/*///////////////////////////////
各領域の幅
//////////////////////////////*/
.wrapper,
.wrapper1,
.wrapper2,
.wrapper3 {
    /*メインビジュアル以外の各領域の最大幅を1200pxに設定*/
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 80px;
    text-align: center;
    background-color: #ffffff;
    margin-top: 80px;
}

.wrapper {
    max-width: none;
}

.wrapper {
    margin-top: 0;
}

header .wrapper {
    margin-bottom: 0;
}

/*///////////////////////////////
ボタン
//////////////////////////////*/
.btn {
    /*横幅を設定したいけどaタグなのでブロック要素にする*/
    display: block;
    /*最大で380pxにして大きい画面になったときも大きくなりすぎないようにする。380pxより小さい端末では100%で表示される*/
    max-width: 150px;
    /*文字を縦方向中央に配置*/
    line-height: 40px;
    /*文字を横方向中央に配置*/
    text-align: center;
    /*画面幅がおおきくなったとき、画面幅よりボタンが小さきくなったときに左に寄っちゃうので中央に寄せる*/
    margin-right: auto;
    margin-left: auto;
    /*本文テキストよりやや大きく*/
    font-size: 1.3rem;
    /*ボタンの文字色*/
    color: #fff;
    /*ボタンの背景色*/
    background-color: #f29b88;
    /*丸みのあるボタン*/
    border-radius: 70px;

    /*liが角丸のぎりぎりにならないよう設定*/
    padding: 0 20px;

}

/*///////////////////////////////
SP　だけ改行
//////////////////////////////*/
.sp-only {
    display: none;
}

@media screen and (max-width: 767px) {
    .sp-only {
        display: block;
    }
}

/*///////////////////////////////
PC だけ改行
//////////////////////////////*/
.pc-only {
    display: block;
}

@media screen and (max-width:767px) {
    .pc-only {
        display: none;
    }
}

/*------------------------ここまで共通設定------------------------------*/







/*---------------------------👇ここからがヘッダー領域------------------*/

header {
    position: fixed;
    background-color: rgba(250, 247, 247, 0.8);
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;

}

header .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    background-color: rgb(255, 255, 255, 0);

}

/*///////////////////////////////
ヘッダーロゴ
//////////////////////////////*/
header h1 a {
    /*font-size: 1.6em;*/
    color: rgba(250, 247, 247, 0.993);

    padding: 0 1rem;
    font-family: "Varela Round", sans-serif;
    font-weight: 800;
    font-style: normal;
    display: flex;
    height: 2em;
    vertical-align: bottom;
    overflow: visible;
}

header h1 p {
    color: #fff;
    background-color: #d88171d8;
    padding: 0 16px;
    display: inline-block;
    line-height: 1.5em;
    border: double 8px;
    box-sizing: content-box;
    margin-left: 8px;

}

header h1 .logo {
    width: 60px;

}

header h1 .logo img {
    width: 100%;
    object-fit: cover;

}


/*///////////////////////////////
ヘッダーナビ
//////////////////////////////*/
.wrapper ul li a {
    border-right: solid 3px #d88171d8;
    border-bottom: solid 3px #d88171d8;
    font-size: 1.4em;
    padding: 0 10px;
    color: #da6550d8;
    font-family: "Varela Round", sans-serif;
    font-weight: 600;
    font-style: normal;
    background-color: rgba(250, 247, 247, 0.993);
}

/* ナビゲーション領域のulをflexボックスにして子要素のliを横並びにする */
header nav ul {
    display: flex;
    padding: 10px 0;
}

/* ナビゲーションのliの左に余白を作ってborderの線とテキストと間に余白を作る */
header li {
    margin-left: 30px;
}

/* ナビゲーションのフォントのカラーと太さの指定 */
header li a {
    color: dimgray;
    font-weight: 700;
}

/* ナビゲーションのliにホバーしたときに0.7透過させる */
header li a:hover {
    opacity: 0.7;
}

/*-------------------------ここまでがヘッダー領域👆---------------------*/









/*---------------------------👇ここからメインビジュアル------------------*/

#mainvisual {
    width: 100%;
    height: 100vh;
    /*アクリル絵の具の背景画像*/
    background-image: url(img/acrylic_paint.jpg);
    background-size: cover;
    /*.cloudと.tree にposition:absolute;を設定したので親にrelative*/
    position: relative;
    /*position:absolute；で配置したクラスtree oneの画像が画面右端からはみだしているので
　    その基準となるposition:relative：にoverflow::hidden;をかける*/
    overflow: hidden;
}

/*welcomeテキストスタイル*/
.mv_title {
    color: #fffafa;
    font-family: "Varela Round", sans-serif;
    font-weight: bolder;
    font-size: 3.8vw;
    text-align: center;
    letter-spacing: 20px;
    text-shadow: 1px 2px 10px #ffffff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
    /*アニメーションプロパティのショートハンド。アニメーションnameはsway-anime-tree1。1.8秒かけて1回のアニメーション。イージングは最初最後ゆっくり。通常方向と、逆方向を繰り返す。アニメーション終了時の状態を維持。*/
    animation: welcome 2.9s ease-in-out;
    /*アニメーションの回数は4回で終了*/
    animation-iteration-count: 1;
}

.mv_title p {
    color: #7d736a;
}

/*@keyframesを使ってwelcomeのアニメーションの定義*/
@keyframes welcome {

    /*アニメーション開始時*/
    0% {
        opacity: 0;

    }


    /*アニメーション終了時*/
    100% {
        opacity: 0.95;

    }
}


/*メインビジュアル領域のイラストのサイズ配置できるようにする*/
.cloud,
.tree {
    position: absolute;
}

/*メインビジュアル内の右から1つ目の木のサイズ、配置、アニメーション*/
.one {
    width: 160px;
    top: 51%;
    left: 85%;
    /*アニメーションプロパティのショートハンド。アニメーションnameはsway-anime-tree1。1.8秒かけて1回のアニメーション。イージングは最初最後ゆっくり。通常方向と、逆方向を繰り返す。アニメーション終了時の状態を維持。*/
    animation: sway-anime-tree1 1.8s ease-out alternate-reverse;
    /*アニメーションの回数は4回で終了*/
    animation-iteration-count: 8;
}

/*@keyframesを使ってアニメーションの定義*/
@keyframes sway-anime-tree1 {

    /*アニメーション開始時*/
    0% {
        transform-origin: bottom center;
        transform: skew(-3deg, 3deg);
    }

    50% {
        transform-origin: bottom center;
        transform: skew(3deg, -3deg)
    }

    /*アニメーション終了時*/
    100% {
        transform: skew(0, 0);
    }

}

/*メインビジュアル内の右から2つ目の*木のサイズ、配置、アニメーション*/
.two {
    width: 180px;
    top: 56%;
    left: 73%;
    animation: sway-anime-tree2 1.9s ease-out alternate-reverse;
    animation-iteration-count: 8;
}

@keyframes sway-anime-tree2 {
    0% {
        transform-origin: bottom center;
        transform: skew(-5deg, 2deg)
    }

    50% {
        transform-origin: bottom center;
        transform: skew(1deg, -3deg);
    }

    100% {
        transform: skew(0, 0);
    }
}

/*メインビジュアル内の右から3つ目の*木のサイズ、配置、アニメーション*/
.three {
    width: 180px;
    top: 66%;
    left: 62%;
    animation: sway-anime-tree3 2s linear alternate-reverse;
    animation-iteration-count: 8;
}

@keyframes sway-anime-tree3 {
    0% {
        transform-origin: bottom center;
        transform: skew(-3deg, 3deg);
    }

    50% {
        transform-origin: bottom center;
        transform: skew(3deg, -3deg)
    }

    100% {
        transform: skew(0, 0);
    }

}

/*メインビジュアル内の右から4つ目の*木のサイズ、配置、アニメーション*/
.four {
    width: 180px;
    top: 56%;
    left: 50%;
    animation: sway-anime-tree4 2.1s ease-out alternate-reverse;
    animation-iteration-count: 8;
}

@keyframes sway-anime-tree4 {
    0% {
        transform-origin: bottom center;
        transform: skew(-2deg, 2deg);
    }

    50% {
        transform-origin: bottom center;
        transform: skew(4deg, -2deg)
    }

    100% {
        transform: skew(0, 0);
    }

}

/*メインビジュアル内の右から5つ目の*木のサイズ、配置、アニメーション*/
.five {
    width: 180px;
    top: 68%;
    left: 38%;
    animation: sway-anime-tree5 2.2s ease-out alternate-reverse;
    animation-iteration-count: 8;
}


@keyframes sway-anime-tree5 {
    0% {
        transform-origin: bottom center;
        transform: skew(-5deg, 3deg);
    }

    50% {
        transform-origin: bottom center;
        transform: skew(6deg, -4deg)
    }

    100% {
        transform: skew(0, 0);
    }

}

/*メインビジュアル内の雲のサイズ、配置、アニメーション*/
.cloud {
    width: 200px;
    top: 10%;
    left: 5%;
    animation: sway-anime-cloud 2.6s ease-out alternate-reverse;
    animation-iteration-count: 8;
}

/*@keyframesを使ってアニメーションの定義*/
@keyframes sway-anime-cloud {
    0% {
        transform: skew(5deg, -3deg);

    }

    50% {
        transform: skew(-6deg, 4deg);
        transform: translateX(5px);

    }

    100% {
        transform: skew(0, 0);
    }

}

/*>>>>>>>>>>>>>>>  SP
max-width:670px>>>>>>>>>>>>>>>*/
@media screen and (max-width:670px) {

    /*welcomeテキストスタイル*/
    .mv_title {
        font-size: 6vw;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        line-height: 2.5rem;
    }


    /*<<<<<<<<<max-width:670px<<<<<<<<*/
}

/*------------------------ここまでメインビジュアル領域------------------*/











/*-------ここからがabout領域とskill領域とwork領域の見出しのスタイル-------*/

.section-title {
    /* aboutタイトルの背景に下線画像を挿入 */
    background-image: url(img/line.png);

    /* aboutタイトルの背景画像を.section-titleの幅いっぱいに表示する */
    background-size: 8px;

    /* aboutタイトルの背景画像を背景領域の下に配置する */
    background-position: bottom;

    /* aboutタイトルの背景画像の下線画像は繰り返さない */
    background-repeat: repeat-x;

    /*  ボーダーライン画像がnav領域に重なるときにnavの文字が見えにくくなるので,透過度0.4の白で背景色をつけて、背景色と背景画像との背景どおしを明るめにブレントして薄くした*/
    background-color: rgba(255, 255, 255, 0.4);
    /* 要素の背景画像が相互にどのように混合されるかの設定 */
    background-blend-mode: lighten;

    /* テキストは左に寄せてボーダーラインとのバランスをとった */
    text-align: center;

    /* aboutタイトルとボーダーラインとの隙間を作るためpadding領域を広くした */
    padding: 80px 0 10px 0;

    /*画面幅を狭めたときにテキストがビューポートの端にくっつかないように距離を保つ*/
    text-indent: 10px;
}

.section-title-fonts {
    /* aboutとskillのフォント設定*/
    font-family: "Varela Round", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2em;
}

.section-title-about {
    margin-bottom: 80px;
}


.section-lead {
    padding-top: 16px;
    /*aboutのタイトルと .contentの自画像や説明テキストとの距離を保つ */
    margin-bottom: 80px;
}

/*>>>>>>>>>>>>>>>  SP
max-width:670px>>>>>>>>>>>>>>>*/
@media screen and (max-width:670px) {
    .section-title-fonts {
        /* aboutとskillのフォント設定*/
        font-size: 1.8em;
    }

    .section-lead {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .section-title-about {
        margin-bottom: 24px;
    }

    /*<<<<<<<<<max-width:670px<<<<<<<<*/
}

/*-----ここまでがabout領域とskill領域とwork領域の見出しのスタイル---------*/











/*-------ここからabout、skill、work領域のテキストの共通スタイル----------*/

/* about領域の名前テキストのスタイル */
#about h3.content-title {
    font-family: "Quicksand", sans-serif;
    font-weight: 900;
    font-size: 1.5em;
    /* 名前の下に余白を作ってその下のテキストとの隙間を作る */
    margin: 20px 0;
    text-align: center;
}

h3 {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.2em;
    padding-bottom: 16px;
    text-align: center;
}

h4 {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 600;
    font-style: normal;
    margin: 10px 0;
    text-align: center;
}






/*本文about以外*/
.skill p,
.work figcaption p {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    font-style: normal;
    text-align: left;

}

.work figcaption p {
    padding: 16px 0;
    font-size: 14px;

}

/*-------ここまでabout、skill、work領域のテキストの共通スタイル----------*/










/*---------------------------ここからがwork領域-------------------------*/


.work-inner {

    margin-left: 5%;
    margin-right: 5%;
    /* .work領域の画像と説明のセットをグリッドレイアウトで配置。親にgridを設定。
    子は画像と説明文をfigure＞figcaptionでひとまとまりにしてある */
    display: grid;
    /*グリッドの列は3列。等間隔で。*/
    grid-template-columns: repeat(3, 1fr);
    /*グリッド行は4列。等間隔で。*/
    grid-template-rows: repeat(4, 1fr);
    /*グリッドの列間の幅*/
    column-gap: 30px;
    /*グリッドの行間の幅*/
    row-gap: 30px;
    /*子要素のfigureの行全体をコンテナ内で上辺に寄せて配置*/
    align-content: start;
}


/*1つ目の画像と説明文のfigureの箱の位置*/
.work-inner:first-of-type {
    /*列は1本目と2本目の間*/
    grid-column: 1/2;
    /*行は1本目と2本目の間に入れる*/
    grid-row: 1/2;
}

/**/
.work-inner figure {
    /*グリッドの箱幅いっぱいに表示*/
    width: 100%;
    /*各figureの中身の画像や説明文を横方向中央揃え（縦方向に串刺しするように中央揃え）
    figureを上辺揃えにするためflexを設定*/
    display: flex;
    /*figureの子要素のの画像や説明文を縦並びにする*/
    flex-direction: column;
    /*figureの中の子要素たちを横方向中央揃え*/
    /*align-items: first baseline;*/
    /*figureの子要素たちを上辺揃え*/
    justify-content: flex-start;
    margin-bottom: 8%;
    /*作品説明は左揃え*/
    /* text-align: left;*/
    margin-bottom: 20%;
}


/*h4の設定でtext-align:centerを設定してたので左にする*/
.work-inner figure h4,
.work-inner figure h5 {
    text-align: left;
}

/*figureの中のimgの高さを指定して領域いっぱいに画像が広がるようにする*/
.work-inner figure img {
    object-fit: cover;
}


figure figcaption {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*------------作品画像にホバーしたときのデザイン--------------------*/

/*ホバーしたとき画像の上に透過面を置くため。子要素の.detail_openにabsolute*/
.work-inner figure a {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/*ホバーする前は 詳しく見る　の領域は非表示*/
.work-inner .detail_text p {
    display: none;

}

/*.work-inner figure a {
    display: flex;


/*------------作品にホバーしたときの表示------------------------*/
.work-inner figure a .detail_open {
    /*親のaにrelathive。absoluteにしてtop：0　bottom：0にすることで親要素のa領域の高さいっぱいに広がる。高さは一緒に貼ってる画像の高さになっている。*/
    position: absolute;
    top: 0;
    bottom: 0;
    text-align: center;
    padding-top: 30%;
    /*通常は非表示。：hoverのときにopacity：1*/
    opacity: 0;
    /*詳しくみる　の背景色は通常透明度0、ホバーしたら0.4*/
    background-color: rgb(0, 0, 0, 0);
    /*詳しくみる　のテキストのカラー*/
    color: #fff;
    /*absoluteにしてるのでよこ親要素いっぱいに広がるように。*/
    width: 100%;
}


/*詳しく見る　の領域表示する*/
.work-inner .detail_open:hover {
    /*マウスの/カーソルを置いた時の変化の経過時間とき*/
    transition: 0.5s;
    /*通常は非表示。：hoverのときにopacity：1*/
    opacity: 1;
    /*詳しくみる　の背景色は通常透明度0、ホバーしたら0.4*/
    background-color: rgb(0, 0, 0, 0.4);
}


/*>>>>>>>>>>>>>>>  SP
max-width:668px>>>>>>>>>>>>>>>*/
@media screen and (max-width:668px) {


    .work-inner figure a {
        left: 0;
        transform: translateX(0);
        padding-top: 0;
        position: relative;
    }

    .work-inner figure a.detail {
        padding-top: 16px;
    }

    /* 画像の上辺に配置 */
    .work-inner figure a .detail_open {
        position: absolute;
        top: 0;
        left: 0;
        bottom: unset;
        width: 100%;

        opacity: 1;
        /* SPでは常に表示 */


        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;

        font-size: 14px;
        color: #000;
    }

    /* 斜め線 */
    .work-inner figure a .detail_open span {
        display: inline-block;
        width: 12px;
        height: 1px;
        background: #000;
    }

    /* 左側の棒を＼にする */
    .work-inner figure a .detail_open span:first-child {
        transform: rotate(45deg);
        margin-right: 8px;
    }

    /* 右側の棒を／にする */
    .work-inner figure a .detail_open span:last-child {
        transform: rotate(-45deg);
        margin-left: 8px;
    }

    .work-inner figure.shift-up img {
        padding-top: 24px;
        box-sizing: border-box;
    }

    .work-inner figure.shift-up.logo img {
        background-color: unset;
    }

    .work-inner figure.shift-up .detail_open {
        padding-top: 16px;
    }

    /*<<<<<<<<<max-width:668px<<<<<<<<*/
}






/*------------外部サイトへ　ボタン---------------------*/


.go-site {
    /*position: absolute;
    right: 0;
    /*横幅を設定したいけどaタグなのでブロック要素にする*/
    /*display: block;
    /*最大で380pxにして大きい画面になったときも大きくなりすぎないようにする。380pxより小さい端末では100%で表示される*/
    /*width: 100%;
    max-width: 180px;

    /*文字を縦方向中央に配置*/
    line-height: 40px;

    /*文字を横方向中央に配置*/
    /*text-align: left;

    /*本文テキストよりやや大きく*/
    font-size: 16px;
    font-weight: 500;

    /*ボタンの背景色*/
    border: 2px solid #6a4737;

    /*liが角丸のぎりぎりにならないよう設定*/
    padding: 0 30px;
    margin-top: 5%;
    border-radius: 10px;

    /*-----aタグボタンの中のテキストとアイコンフォントを横並びにするた目の設定-----*/
    display: flex;
    align-items: center;
    flex: none;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    height: 48px;
    justify-content: center;
    padding: 2px 0px 0px 0px;
    width: 180px;

}


/*外部サイトへボタンを右揃え
a.go-site {
    margin-left: auto;
}*/

/*外部サイトへにホバーしたときにaタグの色を変える*/
.go-site:hover {
    background-color: #816d6d;
    opacity: 1;
}

/*外部サイトへにホバーしたときにテキストとアイコンの色を変える*/
.go-site:hover p,
.go-site:hover span {
    color: #fff;
}

/*外部サイトへのアイコン*/
.go-site span {
    font-weight: 1;
}

/*.....................max-width:670px.............*/
@media screen and (max-width:670px) {



    /*spでは外部サイトへボタンをを中央寄せ*/
    a.go-site {
        margin-left: auto;
        margin-right: auto;
    }


    /*a:hoverに対してwidth100％（汎用設定で）にしてるから、.go-siteはwidth180pxにしているのでホバーしても幅が変わらないように設定*/
    a.go-site:hover {
        width: 180px;
    }
}

/*................max-width:670px................*/




/*.go-site::after {
    font-family: 'Material Symbols Outlined';
    content: "\e89e";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 10%;
    right: 3%;
    object-fit: cover;
    display: block;
}
*/


/*11個目のfigureは注釈を画像に重ねるためにrelativeとabsoluteを設定*/
/*
.work-inner figure:nth-of-type(11),
.work-inner figure:nth-of-type(12),
.work-inner figure:nth-of-type(13) {
    position: relative;
}

.work-inner figure:nth-of-type(13) figcaption {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
    padding: 0 8px;
    background-color: rgba(250, 247, 247, 0.8);
    margin: 0 1px;
}

.work-inner figure:nth-of-type(11) figcaption .detail_text p,
.work-inner figure:nth-of-type(12) figcaption .detail_text p {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    color: red;
    font-size: 1.2rem;}*/


/*.............max-width:668px>>>>>>>>>>>*/
@media screen and (max-width:668px) {

    /*SPでは縦並び*/
    .work-inner {
        display: block;
    }


    /*<<<<<<<<<<<max-width:668px<<<<<<<<<*/
}



/*.............max-width:980px>>>>>>>>>>>*/
@media screen and (max-width:980px) {

    /*SP,tbではリンクがわかるように新規サイトを開くアイコンフォントを
    h4のテキストの右となりにいれるため、h4の::afterとしてアイコンフォントを設定*/
    /*.work-inner figure:nth-of-type(8) h4,
    .work-inner figure:nth-of-type(9) h4,
    .work-inner figure:nth-of-type(10) h4,
    .work-inner figure:nth-of-type(11) h4,
    .work-inner figure:nth-of-type(12) h4 {
        position: relative;
    }

    .work-inner figure:nth-of-type(8) h4::after,
    .work-inner figure:nth-of-type(9) h4::after,
    .work-inner figure:nth-of-type(10) h4::after,
    .work-inner figure:nth-of-type(11) h4::after,
    .work-inner figure:nth-of-type(12) h4::after {

        font-family: 'Material Symbols Outlined';
        content: "\e89e";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 24vw;
        object-fit: cover;
        display: block;
    }


    /*<<<<<<<<<<<max-width:980px<<<<<<<<<*/
}

/*---------------------------ここまでがwork領域-------------------------*/









/*--------------------------ここからがskill領域-------------------------*/


/*+--------------------------skill領域のグリッドスタイル-------------------------------*/
.skill-inner {

    margin-left: 5%;
    margin-right: 5%;
    /* .work領域の画像と説明のセットをグリッドレイアウトで配置。親にgridを設定。
    子は画像と説明文をfigure＞figcaptionでひとまとまりにしてある */
    display: grid;
    /*グリッドの列は3列。等間隔で。*/
    grid-template-columns: repeat(3, 1fr);
    /*グリッド行は4列。等間隔で。*/
    grid-template-rows: max-content max-content 1fr auto;
    /*グリッドの列間の幅*/
    column-gap: 3%;
    /*グリッドの行間の幅*/
    /*row-gap: 30px;
    /*子要素のfigureの行全体をコンテナ内で上辺に寄せて配置*/
    align-content: start;
}


/*------------グリットの配置----------*/
/*1つ目の画像と説明文のfigureの箱の位置*/
.skill1_img {
    /*列は1本目と2本目の間*/
    grid-column: 1/2;
    /*行は1本目と2本目の間に入れる*/
    grid-row: 1/2;
}

.skill2_img {
    /*列は2本目と3本目の間*/
    grid-column: 2/3;
    /*行は1本目と2本目の間に入れる*/
    grid-row: 1/2;
}

.skill3_img {
    /*列は3本目と4本目の間*/
    grid-column: 3/4;
    /*行は1本目と2本目の間に入れる*/
    grid-row: 1/2;
}


.skill1_title {
    grid-column: 1/2;
    grid-row: 2/3;
}

.skill2_title {
    grid-column: 2/3;
    grid-row: 2/3;
}

.skill3_title {
    grid-column: 3/4;
    grid-row: 2/3;
}


.skill1_item {
    grid-column: 1/2;
    grid-row: 3/4;
}

.skill2_item {
    grid-column: 2/3;
    grid-row: 3/4;
}

.skill3_item {
    grid-column: 3/4;
    grid-row: 3/4;
}


.skill1_text {
    grid-column: 1/2;
    grid-row: 4/5;
    text-align: left;
}

.skill2_text {
    grid-column: 2/3;
    grid-row: 4/5;
    text-align: left;
}

.skill3_text {
    grid-column: 3/4;
    grid-row: 4/5;
    text-align: left;
}




/*ツール名の枠のスタイル*/
.skill-box span {
    display: inline-block;
    border: 2px solid #d88171;
    border-radius: 20px;
    padding: 3px 10px;
    margin: 0 3px 10px 10px;

}

/*それぞれのスキル領域の背景色を敷く*/
.skill-box {
    background-color: #f6efed;

}

/*スキルマークとテキストの余白*/
.skill-box p,
.skill-box-img {
    padding: 24px 16px;
}


.skill_item_mg {
    padding-bottom: 16px;
}

/*.....................max-width:770px.............*/
@media screen and (max-width:770px) {
    .skill-inner {
        display: block;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 16px;
        padding-right: 16px;
    }

    .skill-box h3 {
        margin: 0;
    }

    .skill_text_mg {
        margin-bottom: 50px;
    }

    .skill-box-img {
        padding: 24px 16px 0px;
    }
}

/*................max-width:770px................*/


/*--------------------------ここまでがskill領域-------------------------*/









/*--------------------------ここからABOUT領域--------------------------*/

/* about領域の中身である自画像とテキストを横並びにするために、親である.contentをflexボックスにする。／
そして中央に寄せて並べ、
／縦方向の位置を高さが高いほうの要素の中央に配置する */
.about-section .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
}



/*本文about*/
.about-section.wrapper2 p {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 600;
    font-style: normal;

    text-align: left;
    line-height: 2em;
    /*背景の回る花のモチーフがテキストの前面になってしまったのでz-indexをつけた*/
    z-index: 1;
    /*画面幅を狭くしたときにレイアウト崩れを防ぐためにテキストを改行せず１行に収める*/
    /* white-space: nowrap;*/
    /*画面幅320pxまでは1rem、画面幅1200px以上は1.063rem、その間は画面幅に合わせて調整*/
    /*font-size: clamp(1rem, 0.977rem + 0.11vw, 1.063rem);*/


}




/* about領域の似顔絵の画像のスタイル*/
.about-section .face_motif {
    width: 250px;
    height: 300px;

    /* 画像の右側に余白を置き、テキストとの距離を保つ、画面の横幅に対して7％の幅のマージンを右にとる */
    /*margin-right: 7vw;*/
    object-fit: cover;
}

/*似顔絵にホバーしたときの表示*/
.about-section .face {
    position: relative;
}

.about-section .img-supplement {
    line-height: 1rem;
    font-size: 14px;
    transform: translateY(-20px);
}

/*似顔絵にホバーしたときの表示*/
.about-section .face .view-more {
    /*親のaにrelathive。absoluteにしてtop：0　bottom：0にすることで親要素のa領域の高さいっぱいに広がる。高さは一緒に貼ってる画像の高さになっている。*/
    position: absolute;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0; と同じ */

    display: flex;
    justify-content: center;
    /* 横中央 */
    align-items: center;
    /* 縦中央 */

    /*通常は非表示。：hoverのときにopacity：1*/
    opacity: 0;
    /*詳しくみる　の背景色は通常透明度0、ホバーしたら0.4*/
    background-color: rgb(0, 0, 0, 0);
    /*詳しくみる　のテキストのカラー*/
    color: #000;
    font-weight: 600;
    transition: 0.5s;
    transform: translateY(40px);
}


/*詳しく見る　の領域表示する*/
.about-section .face:hover .view-more {
    opacity: 1;
}

.about-section .text {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgb(255, 255, 255, 0.6);
    text-align: left;
    font-family: "Zen Maru Gothic", sans-serif;
    line-height: 2.4rem;
}

/*.....................max-width:670px.............*/
@media screen and (max-width:670px) {
    .about-section .text {
        width: 90%;

    }

    .about-section .face .view-more {
        opacity: 1;
    }

    /*.....................max-width:670px.............*/
}


/* about領域の背景のスタイル */
.about-section .content-bg {
    /* .contentの領域全体に広がってほしいし、レスポンシブに対応するため％で指定 */
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    /*左右中央揃え*/
    align-items: center;
    /*上下中央揃え*/
    /* aboutの背景画像を挿入 */
    background-image: url(img/bg_illustration02.png);
    /* .content領域の幅いっぱいに広がってほしいのでcontain */
    background-size: 100%;
    /* 背景画像は繰り返さず、1つだけ表示する */
    background-repeat: no-repeat;
    /* 背景画像は.contentのmini_motifは左から90％上から67％の位置に配置
            bg_illustration02は.content領域の中央に配置 */
    background-position: center;
}


/* about領域の回転する花のスタイル */

.about-section.wrapper3 {
    /*mini_motifに対して基準となる*/
    position: relative;

}

.about-section .flower_motif {
    width: 8%;
    /*.wrapperに対して絶対位置で位置を指定*/
    position: absolute;
    top: 73%;
    left: 75%;
    z-index: 0;
}

/*about領域の回転する花のアニメーション*/
.anime.flower_motif {
    /*アニメーションプロパティのショートハンド。アニメーションnameはrotate-anime。　3秒かけて1回のアニメーション。イージングは最初最後はゆっくり。アニメーション終了時の状態を維持。*/
    animation: rotate-anime 5s ease forwards;
}

/*@keyframesを使ってアニメーションの定義*/
@keyframes rotate-anime {

    /*回転前*/
    from {
        transform: rotate(0);
    }

    /*回転後*/
    to {
        transform: rotate(360deg);
    }
}

.about-section .flower_motif img {
    margin-bottom: 0;

}

/*>>>>>>>>>>>>>>>  SP
max-width:670px>>>>>>>>>>>>>>>*/
@media screen and (max-width:670px) {
    .about-section .flower_motif {
        top: 62%;
        left: 76%;
        /*<<<<<<<<<max-width:670px<<<<<<<<*/
    }
}

/*--------------------------ここまでがabout領域-------------------------*/









/* ------------------------ここからがフッター領域---------------------- */

footer {
    position: relative;
    background-image: url(img/footer.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 80px;
    max-width: 1980px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 240px;
    /*  background-color: #eab3a8;*/
    text-align: center;
    color: #2f2d2c;
    padding-bottom: 16px;
    overflow: hidden;


}

#top footer,
#about footer {
    margin-top: -200px;
}



.footer_before {
    max-width: 1200px;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;

    padding-bottom: 235px;
    z-index: -1;

}

.footer_before span {
    margin-bottom: 10px;
}


.footer_before_mail {
    /*子要素を中央寄せ*/
    text-align: center;
    font-weight: 600;
}


.footer_before .footer_text.thanks {
    padding-bottom: 64px;
}

/*画面幅を狭めたときのテキストの折り返し
おしかえしたいところでspanタグで区切ってる*/
/*.....................max-width:1120px.............*/
@media screen and (max-width:1120px) {
    .footer_before .footer_text.contact span {
        display: block;
        /*................max-width:1120px................*/
    }
}

/*.....................max-width:540px.............*/
@media screen and (max-width:540px) {
    .footer_before .footer_text.thanks span {
        display: block;
        /*................max-width:540px................*/
    }
}


.footer_before_mail .mail a {
    border: solid 3px #d88171;
    text-align: center;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    background-color: #d88171;
    margin-top: 40px;
    margin-bottom: 40px;
    display: block;
    text-wrap: balance;
}

.footer_before_mail .mail a:hover {
    border: solid 3px #d88171;

    text-align: center;
    background-color: #fff;
    color: #3e3e3e;
    box-shadow: 4px 3px 6px rgba(0, 0, 0, .2);
    transform: translateY(-3px);
}

footer ul {
    padding: 100px 0;
    font-family: "Varela Round", sans-serif;
    font-weight: 800;
    font-style: normal;
}

footer ul a {
    max-width: 200px;
    display: inline-block;
    padding-left: 16px;
    padding-right: 16px;

}

footer ul li {
    margin: 16px;

}

footer ul .btn {
    color: #fff;
    border-radius: 0px;
    background-color: #877d74;

}

footer p {
    line-height: 2rem;
    padding: 8px;
    background-color: #fff7f7;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);

}

/*>>>>>>>>>>>>>>>  SP
max-width:670px>>>>>>>>>>>>>>>*/
@media screen and (max-width:670px) {
    .footer_before_mail .mail a {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(1px, 4.8vw, 20px);
        /*<<<<<<<<<max-width:670px<<<<<<<<*/
    }
}


/*-----------------------ここまでがフッター領域------------------------*/









/*-----------------------フッターの上の鳥のスタイル---------------------*/

.to-top {
    position: absolute;
    width: 65px;
    height: 140px;
    top: 0;
    left: 47%;
    transform: translateX(-50%);
}



.work_page .to-top.is-show {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}



.bottom-motif {
    width: 100%;
    height: 100%;
    /*bottom-motifの胴体と頭を重ねる*/
    position: relative;
    filter: drop-shadow(2px 2px 0 rgb(251, 228, 228));
    /*aタグの領域だけをボタンにするため。aタグをブロック要素してるので（汎用設定）これがないと親要素いっぱい幅になってしまう*/
    display: inline-block;
    /*アニメーションで動きを入れているので、動いた時の最短部の位置までがこの要素の領域となるので、
    この子要素のｉｍｇをwidth100％にして親のfooter_before_mailでvertical-align;center で中央寄せしているけれども、要素の本来の領域かからはみ出している状態。はみ出たぶんはどうしようもないので、要素自体をＸ軸方向に50ｐｘ戻すことで中央にあるように見せる。*/
    /*transform: translateX(-50px);*/
    transform: none;
}

.work_page .bottom-motif {
    filter: none;
}

.bottom-motif img {
    width: 100%;
}

.tori {
    /*親要素のbottom-motifにposition_relativeを設定。
    その親に対して２つの子要素を一緒ににabsoluteにする。
    子要素を重ねたいときは、子要素たちをまとめて一緒ににabsoluteにしないと、子要素が重ならない。*/
    position: absolute;
}

.tori.text {

    top: 45px;
    right: -65px;
    border-radius: 50%;
    border: solid 2.1px #d88171;
    padding-top: 0;
    font-weight: 500;
    color: #69352b;
    padding: 4px;
    background-color: #fff4f4;

    animation: to-top 2s ease infinite alternate-reverse;
    transition: transform 0.2s;
}




/*@keyframesを使ってアニメーションの定義*/
@keyframes to-top {

    /*傾き前*/
    from {
        /*傾きの軸の支点*/
        transform-origin: bottom center;
        transform: rotate(10deg);

    }

    /*傾き後*/
    50% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(0);
    }

}




.arrow span:first-child {
    transform: rotate(45deg) translateX(2.5px);
}

.arrow span:last-child {
    transform: rotate(-45deg) translateX(-2.5px);
}


/*@keyframesを使ってアニメーションの定義*/
@keyframes work_page_to-top {

    /*傾き前*/
    from {
        /*傾きの軸の支点*/
        transform-origin: bottom center;
        transform: rotate(10deg);
    }

    100% {
        transform-origin: bottom center;
        transform: rotate(-10deg);
    }

}


.to-top a:hover .tori.text {
    animation:
        to-top 2s ease alternate-reverse infinite,
        jump .2s ease forwards;
}


@keyframes jump {

    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-3px) rotate(8deg);
    }

}



.tori.body {
    /*absoluteで親要素に浮いてる状態なので、階層を1階にする*/
    z-index: 1;
    /*アニメーションプロパティのショートハンド。アニメーションnameはsway-anime-body。2秒かけて1回のアニメーション。イージングは最初最後ゆっくり。通常方向と、逆方向を繰り返す。*/
    animation: sway-anime-body 2s ease alternate-reverse;
    /*無限に繰り返す*/
    animation-iteration-count: infinite;
}

/*@keyframesを使ってアニメーションの定義*/
@keyframes sway-anime-body {

    /*傾き前*/
    from {
        transform: rotate(0);
    }

    /*傾き後*/
    to {
        /*傾きの軸の支点*/
        transform-origin: bottom center;
        transform: rotate(-10deg);
    }

}


.tori.head {
    /*absoluteで親要素に浮いてる状態なので、階層を2階にする*/
    z-index: 1;

    animation: sway-anime-head 2s ease alternate-reverse;
    animation-iteration-count: infinite;
}

@keyframes sway-anime-head {

    from {
        transform: skew(0);
    }

    to {
        transform: rotate(40deg);
        transform: skew(25deg, -3deg)
    }

}



.work_page-to-top {
    position: fixed;
    right: 3%;
    bottom: 5%;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}


.work_page-to-top.is-show {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.work_page-to-top-text {
    width: 43px;
    height: 40px;

    border: solid 2.1px #d88171;
    padding-top: 0;
    font-weight: 500;
    color: #69352b;
    padding: 4px;
    background-color: #fff4f4;
    position: relative;
    border-radius: 0px 0px 3px 3px;
    animation: unset;
    border-top: unset;
    box-shadow: unset;
}


.work_page-to-top-text::before {
    position: absolute;
    content: "";
    width: 30px;
    height: 31px;
    border-right: 2.1px solid #d88171;
    border-top: 2.1px solid #d88171;
    top: -16px;
    left: 50%;
    background-color: #fff4f4;
    transform: translate(-50%, 0%) rotate(-45deg);
    z-index: -1;
    border-radius: 4px 0 4px 0;
}

.work_page-to-top-text span {
    color: #c75a5a;
    font-weight: 600;
}

/*-----------------------フッターの上の鳥のスタイル----------------------*/










/* ----------------------ハンバーガーメニューの設定----------------------*/

.site-header-navbtn {
    /*pcではハンバーガーメニューを非表示にしておく*/
    display: none;
    /*ハンバーガーメニューを画面上に固定する*/
    position: fixed;
    top: 2.5%;
    right: 5%;
    /*ボタンのサイズ*/
    width: 40px;
    height: 40px;
    /*ボタンにはもともと色がついてるので、消すために、背景画像が背景のスタイル設定を一度リセット。背景色に関してはトランスペアレントになる。*/
    background: none;
    /*ボタンにはborderが実線になってるのでリセット*/
    border: none;
    /*他の要素より1階層上に配置*/
    z-index: 50;
    /*ボタンの線を作るときにが見やすいように背景色を一時的に指定*/
    /*background-color: #ddd;*/
}

/*ハンバーガーメニューの線のデザイン*/
.site-header-navbtn span,
.site-header-navbtn::before,
.site-header-navbtn::after {
    width: 30px;
    height: 2px;
    background-color: #d88171d8;
    /*親要素を基準にして指定した位置に子要素を配置する*/
    position: absolute;
    top: 50%;
    left: 5px;
    /*上の3つの領域に仕掛けてあるアニメーションの1回の時間*/
    transition: transform .4s;
}

/*疑似要素はcontentプロパティでコンテント領域を設定しないと表示されないので設定する*/
.site-header-navbtn::before,
.site-header-navbtn::after {
    content: '';
}

.site-header-navbtn::before {
    /*中心からY軸方向マイナス（上）に移動*/
    transform: translateY(-8px);
}

.site-header-navbtn::after {
    /*中心からY軸方向に移動*/
    transform: translateY(8px);
}

/*body要素にis-nav-openというクラスがついたときにボタン要素内のspan要素を非表示にする*/
body.is-nav-open .site-header-navbtn span {
    /*スケールXに0を指定すると要素は要素の中心を基準としX軸に沿って小さくなり非表示になる*/
    transform: scaleX(0);
}

/*::beforeはtrancefomで位置をY軸方向に-8pxにずらしているので元の位置の真ん中に戻す.
そして45度回転させて斜めの状態にする*/

body.is-nav-open .site-header-navbtn::before {
    transform: translateY(0) rotate(45deg);
}

body.is-nav-open .site-header-navbtn::after {
    transform: translateY(0) rotate(-45deg);
}



/* -------------------ここまでがハンバーガーメニューの設定----------------*/











/* ----ここからがSP向けのスタイル。スクリーンサイズが599pxまでのスタイル----*/

/*#about p にテキストを改行せず１行に収めるようにwhite-space: nowrap;を使っているので、画面幅645pxで領域からはみ出してしまうので、
666px以下の場合から、縦並びのレイアウトになるようにする*/
@media (max-width:666px) {

    .wrapper {
        margin-bottom: 100px;
    }


    /*ーーーspハンバーガーメニューーーー*/

    /*spではハンバーガーメニューを表示状態にする*/
    .site-header-navbtn {
        display: block;
    }

    /*ハンバーガーメニューを開いた時のドロワーメニューの設定*/
    .site-header-nav {
        /*画面に固定する*/
        position: fixed;
        /*幅と高さはスクリーンサーズと同じにする。
　　　　　つまり画面サイズのハンバーガーメニュー領域が画面上に固定される。*/
        width: 100%;
        height: 100%;
        /*表示位置をスクリーンに左上に合わせる*/
        left: 0;
        top: 0;
        background-color: rgba(250, 247, 247, 0.8);
        /*X軸方向に-100％（画面幅分）移動して非表示する*/
        transform: translateX(-100%);
        /*この要素に仕掛けてある移動アニメーションを0.6秒かけて行う*/
        transition: transform .6s;
        z-index: 10;
    }

    /*bodyの中にis-nav-open が入ったときのnavをX軸方向に100％（画面幅分）移動して表示する*/
    body.is-nav-open .site-header-nav {
        transform: translateX(0);
    }

    .site-header-nav ul {
        height: 100%;
        /*pcのスタイルの方でheader .wrapperにdisplay:flex；が適用されているので、縦方向に並べる。*/
        flex-direction: column;
        /*テキストを垂直方向中央に配置*/
        justify-content: center;
        /*テキストを中央揃え*/
        text-align: center;
    }

    /*最後のliを除きマージンrightをなしにする*/
    .site-header-nav ul li:not(last-child) {
        margin-left: 0;
        /*文字の間隔をあける*/
        margin-bottom: 4em;
    }

    .site-header-nav ul li a {
        font-size: 2rem;
        /*pcバージョンで設定していたborderの右の線を0にする*/
        border-right: 0;
        /*pcバージョンで設定していた背景色をなくす*/
        background: none;
    }

    /* ----ここまでがSP向けのスタイル。スクリーンサイズが599pxまでのスタイル----*/






    /*--------------------ここからがSPメインビジュアルモチーフ配置------------*/

    .one {
        width: 100px;
        top: 61%;
        left: 82%;
    }

    .two {
        width: 110px;
        top: 64%;
        left: 65%;
    }

    .three {
        width: 120px;
        top: 68%;
        left: 44%
    }

    .four {
        width: 120px;
        top: 62%;
        left: 25%;
    }

    .five {
        width: 120px;
        top: 70%;
        left: 5%;
    }

    .cloud {
        width: 150px;
        top: 14%;
    }

    /*----------------ここまでがSPメインビジュアルモチーフ配置------------*/







    /*---------------------ここからがSP　work領域設定----------------------*/

    .work_box {
        display: block;
    }

    .work_box figure {
        width: 70%;
        margin: 0 auto 2rem auto;
    }

    .work_box figure:first-child {
        margin-left: auto;
    }


    /*---------------------ここまでがSP　work領域設定----------------------*/






    /*-------------------ここからがSP　skill領域設定--------------------*/
    .skill ul {
        flex-direction: column;
    }

    .skill li {
        width: 70%;
        margin: 0 auto 2rem auto;
    }
}

/*---------------------ここまでがSP　skill領域設定----------------------*/







/*---------------------ここからがPC　about領域設定----------------------*/
#about .content {
    flex-direction: column;
}

#about img {
    margin-right: 0;
    margin-bottom: 3rem;
}


#about .text {
    text-align: center;
}

.content {
    /* 背景画像は.contentのmini_motifは左から90％上から67％の位置に配置、
        bg_illustration02は.content領域の中央に配置 */
    background-position: 90% 67%, center;
}

/*-------------------ここまでがPC　about領域設定----------------------*/






/*=======================================================================
WORKページの下層ページ　　ここから
=========================================================================*/




/*-----------------------------------作品説明ページ最大幅----------------------------------*/
body.work_page {
    max-width: 1200px;
    background-color: #FFFFFB;
    margin-left: auto;
    margin-right: auto;
}

/*-----------------------------------作品説明ページヘッダー----------------------------------*/
body.work_page header {
    position: static;
    background-color: #FFFFFB;
    width: 100%;

}

/*//////////////////////////////////////////////////////////////
作品説明ページフォント設定
//////////////////////////////////////////////////////////////*/
body.work_page .content01 .principal h2,
body.work_page .content01 .principal h3,
body.work_page .content01 .principal p {
    font-family: "Zen Maru Gothic", sans-serif;
}


body.work_page .content01 .principal .work_genre p {
    font-size: clamp(14px, 1.4vw, 20px);
}

body.work_page .content01 .principal .work_title h2 {
    font-size: clamp(16px, 2vw, 32px);
}

/*>>>>>>>>>>>>>>>  SP
max-width:670px>>>>>>>>>>>>>>>*/
@media screen and (max-width:670px) {

    body.work_page .content01 .principal .work_genre {
        margin-left: 16px;
    }

    body.work_page .content01 .principal .work_title {
        margin-left: 16px;
    }

    /*<<<<<<<<<max-width:670px<<<<<<<<*/
}


/*//////////////////////////////////////////////////////////////
上の主要領域の設定
//////////////////////////////////////////////////////////////*/
/*-----------------------------------上の領域全体----------------------------------*/
body.work_page .content01 {
    width: 70%;

    margin-top: 80px;
    padding-top: 1rem;
    padding-bottom: 1rem;

    background-color: #F2F2EB;

    margin-left: auto;
    margin-right: auto;
}

/*-----------------------------------上の領域テキスト、画像を包む箱----------------------------------*/
body.work_page .content01 .principal {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

/*-----------------------------------上の領域の画像----------------------------------*/

body.work_page .content01 .principal .work_img {
    text-align: center;
    background-color: #fff;
    margin: 24px 0 24px 0;
}



body.work_page .content01 .principal .work_img p {
    text-align: right;
}

body.work_page .content01 .principal .work_done,
body.work_page .content01 .principal .work_tool {
    margin: 16px 0;
}

body.work_page .content01 .principal .work_done span,
body.work_page .content01 .principal .work_tool span {
    line-height: 2.4rem;

}

/*-----------------------------------上の領域の担当業務----------------------------------*/
body.work_page .content01 .principal .work_done span {
    font-family: "Quicksand", sans-serif;
    font-size: clamp(12px, 1.6vw, 16px);
    background-color: #d88171;
    padding: 3px 10px;
    border-radius: 50px;
    color: #fff;
    line-height: 2rem;
}

/*>>>>>>>>>>>>>>>  SP
max-width:670px>>>>>>>>>>>>>>>*/
@media screen and (max-width:670px) {

    body.work_page .content01 {
        margin-top: 40px;
    }

    body.work_page .content01 .principal .work_img {
        background-color: #f7f3f2;
    }

    body.work_page#work100 .content01 .principal .work_img {
        background-color: #fff;
    }

    body.work_page .content01 .principal .work_img p {
        font-size: 12px;
    }

    /*<<<<<<<<<max-width:670px<<<<<<<<*/
}

/*.....................max-width:548px.............*/
/*画面を狭めると日本語は1文字ずつ落ちてしまうので
1文字ずつ落ちてしまう少し前の画面幅でインライン要素にして縦積みにする。
ブロック要素にしてしまうと幅いっっぱいに広がってしまうので
インラインにしてテキストの幅で背景を敷く*/
@media screen and (max-width:548px) {

    body.work_page .content01 .principal .work_done span {
        font-size: clamp(12px, 1.4vw, 15px);

    }

    body.work_page .content01 .principal .work_done span:last-child {
        display: inline-block;
        line-height: 1.4rem;
        padding: 0 10px;
        margin-top: 8px;
    }

    body.work_page .content01 {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }


}

/*................max-width:548px................*/

/*.....................max-width:377px.............*/
@media screen and (max-width:377px) {
    body.work_page .content01 .principal .work_done span:nth-child(2) {
        display: inline-block;
        line-height: 1.4rem;
        padding: 0 10px;
    }
}

/*................max-width:377px................*/


/*-----------------------------------上の領域のツールマーク----------------------------------*/
body.work_page .content01 .principal .work_tool span {
    font-family: "Quicksand", sans-serif;
    font-size: clamp(12px, 1.6vw, 16px);
    font-weight: 800;
    border: 0.3vw solid #d88171;
    padding: 3px 10px;
    border-radius: 50px;
    line-height: 2.4rem;
    background-color: #fff;
}

body.work_page .content01 .principal .period {
    padding: 16px 0;
}

body.work_page .content01 .principal .period span {
    padding: 8px;
    color: #69352b;
}

/*//////////////////////////////////////////////////////////////
すべての作品紹介ページのコンセプトの領域の設定
//////////////////////////////////////////////////////////////*/
/*-----------------すべての作品紹介ページのコンセプト領域の全体の設定--------------------*/
body.work_page .content02 {
    width: 100%;
    margin-top: 80px;
}


#work100.work_page .content02 {
    display: flex;
    flex-direction: column;
}




/*.....................max-width:670px.............*/
@media screen and (max-width:670px) {
    body.work_page .content02 {
        margin-top: 32px;
    }
}

/*................max-width:670px................*/



/*-----------------------------------コンセプト領域の画像とテキストを包む箱----------------------------------*/
body.work_page .content02 figure {
    width: 80%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content: space-between;
    gap: 56px;

}

/*-----------------------------------コンプセプと領域の画像----------------------------------*/

body.work_page .content02 figure .sub-img-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

body.work_page .content02 figure .sub_img {
    position: relative;

}


body.work_page .content02 figure .sub_img img {
    width: 100%;
    object-fit: contain;
}


.scroll-hint {
    position: relative;
    font-size: 12px;
    text-align: center;
    margin-top: 6px;
    color: #777;
    letter-spacing: 0.1em;
    vertical-align: top;
    margin-bottom: 12px;
}

.arrow {
    display: flex;
    justify-content: center;
    margin-top: 6px;

    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
}

.arrow span {
    width: 10px;
    height: 2px;
    background: #777;
}

.arrow span:first-child {
    transform: rotate(45deg) translateX(2.5px);
}

.arrow span:last-child {
    transform: rotate(-45deg) translateX(-2.5px);
}



/*-----------------------------------コンセプト領域のテキスト全体----------------------------------*/
body.work_page .content02 figure figcaption {
    width: 62%;
}

body.work_page .work-description-wrapper {
    display: flex;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

body.work_page.work_page_banner .work-description-wrapper,
#work100.work_page .work-description-wrapper {
    flex-direction: column;
    width: 60%;
}


/*-----------------------------------コンセプト/期間領域のコンセプトの箱----------------------------------*/
body.work_page .work-section-content {
    width: 100%;
    margin: 0 auto;
}

body.work_page .work-description {
    margin-bottom: 32px;

    margin-left: auto;
    margin-right: auto;
}

body.work_page .content05-2 .work-description.logo-illust2 {
    width: 100%;
}

body.work_page .work-description,
body.work_page .content05-2 .work-description.logo-illust2 .work-description-wrappper {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}





body.work_page .content05-2 .work-description.logo-illust2 img {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    padding: 24px;
}

body.work_page .content02 .work-description {
    width: 100%;
}

body.work_page .content05-1 .work-description {
    width: 60%;
}

body.work_page .content02 .work-description,
body.work_page .content05-1 .work-description {
    margin-left: auto;
    margin-right: auto;
}


body.work_page .content02 .work-description-detail {
    margin-top: 120px;
}



body.work_page .content02 .work-description-wrapper .work-description {
    margin-bottom: 0;
}

body.work_page .content02 .work-description-wrapper .scroll-hint {
    margin-bottom: 16px;

}

body.work_page .content02 .work-description-wrapper .scroll-hint p {
    margin-bottom: 16px;
    line-height: 1.6;
}



/*コンセプト/期間領域のコンセプトの箱の中のタイトルの箱*/
body.work_page .work-description h4 {
    text-align: left;
    font-weight: normal;
}

body.work_page .work-description .work-description-title,
body.work_page .related-works .related-item .related-text h4 {
    margin-bottom: 32px;
    font-size: 20px;
}

body.work_page .work-description .work-description-title {
    border-bottom: 1.5px solid #f1caca;
}

/*body.work_page .content02 .work-description .work-description-title {
    border-bottom: 1.5px solid #d88171;
}

body.work_page .content02-1 .work-description .work-description-title {
    border-bottom: 1.5px solid #f1caca;
}

body.work_page .content02 .work-description .work-description-title {
    border-bottom: 1.5px solid #ffd78d;
}

body.work_page .content05-1 .work-description .work-description-title {
    border-bottom: 1.5px solid #9dddd8;
}
*/
/*コンセプト/期間領域のコンセプトの箱の中のタイトル*/
body.work_page .work-description .work-description-title p,
body.work_page .related-works .related-item .related-text h4 {
    line-height: 2.8rem;
    padding: 0 18px;
}

body.work_page .work-description .work-description-title p {
    border-left: 10px solid #f0bdc4;
}

/*body.work_page .content02 .work-description .work-description-title p {
    border-left: 10px solid #d88171;
}

body.work_page .content02-1 .work-description .work-description-title p {
    border-left: 10px solid #f0bdc4;
}

body.work_page .content03 .work-description .work-description-title p {
    border-left: 10px solid #ffd78d;
}

body.work_page .content05-1 .work-description .work-description-title p {
    border-left: 10px solid #9dddd8;
}

body.work_page .related-works .related-item .related-text h4 {
    border-left: 10px solid #dcf0bb;
}
*/
body.work_page .work-description .work-description-content h4 {
    margin-bottom: 32px;
    font-size: 20px;
    font-weight: normal;
}

body.work_page .work-description .work-description-content h4 span {
    color: #f0bdc4;
    margin-right: 10px;

}



.sp-only-500 {
    display: none;
}


/*>>>>>>>>>>>>>>>  SP
max-width:550px>>>>>>>>>>>>>>>*/
@media screen and (max-width:550px) {
    body.work_page .work-description .work-description-title p span {
        margin-left: 0;
    }

    .sp-only-500 {
        display: block;
        margin-right: 10px;
    }

    /*<<<<<<<<<max-width:550px<<<<<<<<*/
}



/*コンセプト/期間領域のコンセプトの箱の中のコンセプトの説明の箱*/
body.work_page .work-description .work-description-content {
    width: 80%;
    margin-left: auto;
}


body.work_page .work-description.banner-design .work-description-content {
    width: 88%;
}



body.work_page .content05-2 .related-flyer .work-description .work-description-content {
    width: 100%;
    margin-left: 0;
}



body.work_page .work-description .work-description-content p {
    padding-bottom: 16px;

}

body.work_page .work-description .work-description-content .explanation {
    margin-left: 54px;
}

body.work_page .work-description .work-description-content .description-text {
    font-weight: bold;
    margin-left: 52px;
}


body.work_page .work-description .work-description-content .direction-summery {
    padding-left: 24px;
    margin-bottom: 28px;
    font-weight: bold;
    border-left: 2px solid #f0bdc4;
}

body.work_page .content05-2 .related-flyer .work-description .work-description-content .direction-summery {
    margin-left: 0;
}

body.work_page .work-description .work-description-content .direction-summery:not(:first-of-type) {
    margin-top: 32px;
}

/*body.work_page .content02 .work-description .work-description-content .direction-summery {
    border-left: 2px solid #f0bdc4;
}

body.work_page .content02 .work-description .work-description-content .direction-summery {
    border-left: 2px solid #ffd78d;
}

body.work_page .content05-1 .work-description .work-description-content .direction-summery {
    border-left: 2px solid #9dddd8;
}

body.work_page .content05-2 .work-description .work-description-content .direction-summery {
    border-left: 2px solid #dcf0bb;
}
*/

.work-description-content ul,
.related-item ul,
body.work_page .content05-2 .related-item ul,
body.work_page .content05-2 .work-description .work-description-content ul {
    margin-bottom: 16px;
    margin-left: 54px;
}



.work-description-content ul li,
.related-item ul li,
body.work_page .content05-2 .related-item ul li {
    padding-bottom: 12px;
    line-height: 2rem;
    font-family: "Zen Maru Gothic", sans-serif;
    list-style: disc;
    padding-left: 8px;
}

/*コンセプト/期間領域のコンセプトの箱の中のコンセプトの説明の箱の中のテキスト*/
body.work_page .work-description .text .concept_text_details {
    padding-top: 24px;
}

/*コンセプト/期間領域の製作期間のの箱の中の製作期間の箱*/
body.work_page figure figcaption .period_box {
    margin-top: 32px;
}

/*コンセプト/期間領域の製作期間のの箱の中の製作期間のタイトルの箱*/
body.work_page figure figcaption .period_box .period_box_title {
    border-bottom: 1.5px solid #3e3e3e;

}

/*コンセプト/期間領域の製作期間のの箱の中の製作期間のタイトル*/
body.work_page figure figcaption .period_box .period_box_title p {
    line-height: 2.8rem;

}

/*コンセプト/期間領域の製作期間のの箱の中の製作期間のテキスト*/
body.work_page figure figcaption .period_box .period_box_text p {
    width: 80%;
    margin-left: auto;
    margin-bottom: 24px;
    margin-top: 24px;
}


.illust-graphic {
    width: 100%;
}

body.work_page .content05-2 .work-description.logo-illust0 img {
    border-radius: unset;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

/*>>>>>>>>>>>>>>>  SP
max-width:1010px>>>>>>>>>>>>>>>*/
@media screen and (max-width:1010px) {
    body.work_page .work-description-wrapper {
        flex-direction: column;
    }

    /*<<<<<<<<<max-width:1010px<<<<<<<<*/
}


/*>>>>>>>>>>>>>>>  SP
max-width:980px>>>>>>>>>>>>>>>*/
@media screen and (max-width:980px) {
    body.work_page .content02 {
        margin-top: 80px;
    }

    body.work_page .work-description,
    body.work_page .content02 figure {
        width: 100%;
    }


    body.work_page .work-description-wrapper {
        border-left: none;
        padding-left: 0;
        margin-bottom: 40px;
    }

    body.work_page.work_page_banner .work-description-wrapper,
    #work100.work_page .work-description-wrapper {
        width: 80%;
    }

    body.work_page .work-description .work-description-title,
    body.work_page .related-works .related-item .related-text h4 {
        font-size: 18px;
        font-weight: 600;
    }

    body.work_page .content02 .work-description body.work_page .content02 figure {
        display: block;
        width: 100%;
    }

    body.work_page .content02 figure .sub_img_bunner {
        display: none;
    }

    body.work_page .content02 figure figcaption {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    body.work_page .content02 .work-description,
    body.work_page .content02-1 .work-description,

    body.work_page .content05-1 .work-description,
    body.work_page .work-description .work-description-content,
    body.work_page .content05-2 .work-description.logo-illust0 .work-description-wrappper,
    body.work_page .content05-2 .work-description.logo-illust1 .work-description-wrappper,
    body.work_page .content05-2 .work-description.logo-illust2 .work-description-wrappper {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    body.work_page .content02:nth-child(3) {
        margin-top: 40px;
    }

    .content02 figure figcaption,
    body.work_page .content02 .work-description-wrapper .work-description,
    body.work_page .content02 .work-description,
    body.work_page .content02-1 .work-description,
    body.work_page .content05-1 .work-description,
    body.work_page .content05-2 .work-description-wrappper {
        max-width: 559px;
    }

    body.work_page .content05-2 .related-item {
        width: 100%;
    }

    body.work_page .content02 .work-description-detail {
        margin-top: 80px;
    }



    body.work_page .content05-2 .work-description.logo-illust1 img,
    body.work_page .content05-2 .work-description.logo-illust2 img {
        width: 100%;
        max-width: 680px;
        margin-left: auto;
        margin-right: auto;
    }




    /*<<<<<<<<<max-width:980px<<<<<<<<*/
}

/*.....................max-width:670px.............*/
@media screen and (max-width:670px) {


    /*PCではコンセプト文章を左マージンつけて右寄せにしてたので、親要素全体に広がるようにマージン0に戻す*/
    body.work_page .work-description .work-description-content {
        margin-left: 0;
    }


    /*コンセプト文章のところの文章はPCではflexにしてたから画像との余白を持たせるために幅を狭めてたけど、もどず*/
    body.work_page .work-description .work-description-content,
    body.work_page .content05-2 .work-description .work-description-content {
        width: 100%;
    }

    /*製作期間のテキストのほうも左に余白つけて右よせにしてたので幅をいっぱいにする*/
    body.work_page .period_box .period_box_text p {
        width: 100%;
    }

    body.work_page .content05-2 .related-item ul {
        width: auto;
        margin-left: 24px;
    }

    body.work_page .content05-2 .related-item ul {
        width: auto;
        margin-left: 24px;
    }

    body.work_page .work-description.banner-design .work-description-content {
        width: 100%;
    }

}



/*................max-width:670px................*/

/*>>>>>>>>>>>>>>>  SP
max-width:410px>>>>>>>>>>>>>>>*/
@media screen and (max-width:410px) {

    body.work_page .work-description .work-description-content .description-text {
        margin-left: 32px;
    }

    .work-description-content ul,
    .related-item ul,
    body.work_page .content05-2 .related-item ul,
    body.work_page .content05-2 .work-description .work-description-content ul {
        margin-left: 24px;
    }

    /*<<<<<<<<<max-width:410px<<<<<<<<*/
}


/*//////////////////////////////////////////////////////////////
other pattern領域
//////////////////////////////////////////////////////////////*/
body.work_page .content04 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin-top: 80px;
}

body.work_page.work09 .content04 {
    max-width: 1200px;
}

body.work_page .content04 h3 {
    font-size: 20px;
}

body.work_page .content04 {
    margin: 120px 24px;
}



/*//////////////////////////////////////////////////////////////
モックアップ領域
//////////////////////////////////////////////////////////////*/
body.work_page .content03-3 {
    width: 100%;
    margin-top: 120px;
    background-color: #F2F2EB;
}

/*.....................max-width:670px.............*/
@media screen and (max-width:670px) {
    body.work_page .content02 {
        margin-top: 32px;
    }
}

/*................max-width:670px................*/


/*//////////////////////////////////////////////////////////////
モックアップ領域
//////////////////////////////////////////////////////////////*/

body.work_page .content03-3 h3 {
    line-height: 3.2rem;
    font-family: "Quicksand", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: clamp(16px, 1.8vw, 24px);
    padding-top: 32px;
    margin: 0 0;
    text-align: center;
}

/*モックアップ領域の中の画像たちを包む箱*/
body.work_page .content03-3 .img_box {
    width: 95%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body#work09.work_page .content03-3 .img_box,
body#work100.work_page .content03-3 .img_box {
    max-width: 1200px;
}

body.work_page .content03-3 .img_box .moc {
    margin: 16px;
}

body.work_page .content03-3 .work_supplement {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/*>>>>>>>>>>>>>>>  SP
max-width:610px>>>>>>>>>>>>>>>*/
@media screen and (max-width:610px) {
    body#work100.work_page .content03-3 .img_box {
        flex-direction: column;

    }

    /*<<<<<<<<<max-width:610px<<<<<<<<*/
}

/*>>>>>>>>>>>>>>>  SP
max-width:580px>>>>>>>>>>>>>>>*/
@media screen and (max-width:580px) {
    body.work_page .content03-3 .work_supplement {
        text-align: left;
    }

    /*<<<<<<<<<max-width:580px<<<<<<<<*/
}

body.work_page .content03-3 .sub_img {
    width: 100%;
    height: auto;
}




/*//////////////////////////////////////////////////////////////
一覧へ戻るボタン
//////////////////////////////////////////////////////////////*/

/*一覧へ戻るボタンの領域のスタイル*/
a.back-all {
    border-right: solid 5px #d88171d8;
    border-bottom: solid 5px #d88171d8;
    background-color: rgba(250, 247, 247, 0.993);
    font-size: clamp(17px, 1.3vw, 24px);

    font-weight: 500;
    font-style: normal;
    padding: 20px 40px;
    width: 16rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

}

/*.....................max-width:590px.............*/
@media screen and (max-width:590px) {

    body.work_page a.back-all {
        font-size: clamp(10px, 13vw, 18px);
        font-weight: 500;
        font-style: normal;
        padding: 20px 20px;
        width: 10rem;
    }
}

/*................max-width:590px................*/

/*一覧へ戻るボタンにホバーしたときの領域のスタイル*/
body.work_page a.back-all:hover {
    background-color: #d88171;
    border-right: solid 5px #f5e3e0d8;
    border-bottom: solid 5px #f5e3e0d8;
}

/*一覧へ戻るボタンのテキストのスタイル*/
body.work_page a.back-all p {
    color: #d88171;
    font-family: "Zen Maru Gothic", sans-serif;
}

/*一覧へ戻るボタンにホバーしたときのテキストのスタイル*/
body.work_page a.back-all:hover p {
    color: #fff;
}





/*//////////////////////////////////////////////////////////////
back-nextボタン
//////////////////////////////////////////////////////////////*/
/*-----------------------------------back‐next領域の箱----------------------------------*/
.back_next_box {
    margin: 160px 16px 24px 16px;
    display: flex;
    justify-content: space-between;
    vertical-align: baseline;
    overflow: hidden;
}

#work01 .back_next_box {
    justify-content: right;
}


/*-----------------------------------back‐next領域の箱の中のテキスト----------------------------------*/
body.work_page .back-next p {
    font-size: clamp(16px, 2vw, 24px);
    font-weight: normal;
}

/*--------------------------------back‐next領域の箱の中フォントアイコン--------------------------------*/
body.work_page .back-next img {
    width: 18px;
}


.back-next {
    display: flex;
    align-items: center;
}

/*----------------------------HTMLに空のdivを置いて、そこにCSSで矢印を書く--------------------------------*/
.arrow_box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}



.prev-arrow,
.next-arrow {
    position: relative;
    display: flex;
    /* 子を中央に寄せる */
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: coral;
    border-radius: 50%;
    transition: all .3s ease;
}


/*.....................max-width:590px.............*/
@media screen and (max-width:590px) {

    .prev-arrow,
    .next-arrow {
        width: 30px;
        height: 30px;
    }

}

/*................max-width:590px................*/


.prev-arrow {
    transform: rotate(180deg);
    margin-right: 20px;
}

.next-arrow {

    margin-left: 20px;
}

.prev-arrow::before,
.next-arrow::before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid #FFF;
    border-top: 2px solid #FFF;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}



/*------スライダー矢印-------*/
.slider-btn-area {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.btn-area--arrow_box {
    position: relative;
    width: 50px;
    height: 50px;
    background: #ccc;
    border-radius: 8px;
    cursor: pointer;
    margin: 8px;
    pointer-events: auto;
}

/* span共通（線） */
.btn-area--arrow_box span {
    position: absolute;
    width: 20px;
    height: 3px;
    background: #fff;
    top: 50%;
    left: 50%;
}

/* ===== >（next） ===== */
.btn-area--next-arrow span:nth-child(1) {
    transform: translate(-40%, -250%) rotate(45deg);
}

.btn-area--next-arrow span:nth-child(2) {
    transform: translate(-40%, 150%) rotate(-45deg);
}

/* ===== <（prev） ===== */
.btn-area--prev-arrow span:nth-child(1) {
    transform: translate(-60%, -250%) rotate(135deg);
}

.btn-area--prev-arrow span:nth-child(2) {
    transform: translate(-60%, 150%) rotate(-135deg);
}


/*//////////////////////////////////////////////////////////////
スライダー
//////////////////////////////////////////////////////////////*/
/*スライダー領域の設定*/

.slider_content {
    position: relative;
    width: 100%;
    max-width: 1920px;
    background-image: url(img/bg_illustration02.png);
    background-size: contain;
    margin-top: 160px;
    margin-bottom: 32px;
    /*画面幅を縮めると横スクロールでるので*/
    overflow: hidden;
    z-index: 0;

}

/*スライダ-領域の中のスライダー表示部分の設定*/
.slider {
    width: 100%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

/*1つ１つのスライダの画像の左右の間隔をとる*/
.slider li {
    min-width: 30%;
    padding: 0 16px;
}


#btn-area {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/*>>>>>>>>>>>>>>>  SP
max-width:670px>>>>>>>>>>>>>>>*/
@media screen and (max-width:670px) {
    .slider li {
        min-width: clamp(200px, 70%, 370px);
        transform: translateX(-70%);
        /*位置をずらして中央付近に画像を配置*/
    }

    /*<<<<<<<<<max-width:670px<<<<<<<<*/
}







/*=======================================================================
バナーページ設定
=========================================================================*/
body.work_page_banner .content01 {
    width: 100%;
}

/*上の領域の画像の周りを白くして余白調整*/
body.work_page_banner .content01 .principal .work_img {
    padding: 6% 12%;
    margin: 16px 0 0 0;
    background-color: #fff;
}

/*上の領域の作品サイズの調整*/
body.work_page_banner .content01 .principal .work_size {
    line-height: 2rem;
    text-align: right;
    font-size: clamp(14px, 1.6vw, 16px);
    font-family: "Zen Maru Gothic", sans-serif;
}

/*>>>>>>>>>>>>>>>  SP
max-width:548px>>>>>>>>>>>>>>>*/
@media screen and (max-width:548px) {
    body.work_page_banner .content01 .principal .work_img {
        padding: 6%;
        max-width: 378px;
        margin-left: auto;
        margin-right: auto;
    }

    body.work_page_banner .content01 .principal {
        padding: 0;
        width: 90%;

        /*<<<<<<<<<max-width:548px<<<<<<<<*/
    }
}

/*--------------------------------バナーページコンセプト領域の設定----------------------------------*/
/*コンセプト領域の画像の設定*/
body.work_page_banner .content02 figure .sub_img {
    width: 35%;
    /*align-items: flex-start;*/
}

/*上の領域のサイズと担当の余白*/
body.work_page_banner .content01 .principal .work_done {
    margin: 0;
}


/*-コンセプト領域のテキスト領域全体の設定*/
body.work_page .content02 figure figcaption {
    width: 80%;
}


/*----------------------------バナーページギャラリー領域の設定----------------------------------*/
/*ロゴページでは背景色つけてたので白に戻してみやすくする*/
body.work_page .content03-3 {
    background-color: #fff;
}

/*other　patternの画像の設定*/
body.work_page .content03-3 .img_box {
    justify-content: center;
    padding-bottom: 32px;

}

body.work_page .content03-3 .img_box img {
    display: block;
}






/*=======================================================================
リサイズバナーありのページ設定
=========================================================================*/
/*ギャラリー領域の設定*/
.work03 .content03-3 .img_box {

    padding-bottom: 24px;

}

/*サイズ表記も文字設定*/
.work03 .content03-3 .work_size {
    text-align: right;
    padding-right: 24px;

}

.work03 .content03-3 .work_size p {
    font-family: "Zen Maru Gothic", sans-serif;
}







/*=======================================================================
縦長バナーページ設定
=========================================================================*/

/*上の領域の画像設定。大きめに表示*/
body.work_page_banner_long .content01 .principal .work_img img {
    width: 68%;
}






/*=======================================================================
webサイトページの設定
=========================================================================*/
/*上の領域の画像を大きくしたいので上の領域の一番外の箱を横幅いっぱいに表示*/
body.work_page_web .content01 {
    width: 100%;
}

/*上の領域の2番目に大きい箱の幅を指定してクレーの背景を周りにみせる*/
body.work_page_web .content01 .principal {
    width: 80%;
}

/*上の領域の画像のまわりの白枠を調整するため*/
body.work_page_web .content01 .principal .work_img {
    padding: 4%;
}

/*上の領域の画像を大きく表示*/
body.work_page_web .content01 .principal .work_img img {
    width: 300%;
}

/*>>>>>>>>>>>>>>>  SP
max-width:670px>>>>>>>>>>>>>>>*/
@media screen and (max-width:670px) {

    /*上の領域の2番目に大きい箱の幅を指定してクレーの背景を周りにみせる*/
    body.work_page_web .content01 .principal {
        width: 100%;
    }

    /*上の領域の画像のまわりの白枠を調整するため*/
    body.work_page_web .content01 .principal .work_img {
        padding: 0 0 16px 0;
        border-top: 4px solid #fff;
        border-bottom: 4px solid #fff;
    }

    /*上の領域の画像を大きく表示*/
    body.work_page_web .content01 .principal .work_img img {
        width: 100%;
    }

    /*上の領域の画像を大きく表示*/
    body.work_page_web .content01 .principal .work_img p {
        font-size: 14px;
    }

    /*<<<<<<<<<max-width:670px<<<<<<<<*/
}


/*-------------------担当領域、ツール領域、サイトを見に行くボタン領域の配置の設定------------------*/
/*body.work_page_web .content01 .principal .done_tool_go-site_box {
            /* display: flex;
            justify-content: space-between;*/
/* display: grid;
            /*グリッドの列は5:1。1の方は中身に合わせてどこまでも広がる。中身は改行されない。*/
/*grid-template-columns: 5fr 1fr;
            /*グリッド行は等間隔で2行。*/
/*grid-template-rows: repeat(2, 1fr);
            /*グリッドの列間の幅*/
/* column-gap: 32px;

            /*子要素のfigureの行全体をコンテナ内で縦方向中央配置*/
/* align-items: center;

            white-space: nowrap;
            /* テキストの自動改行を禁止する */
/* 必要に応じて、ボタンの幅などが確保されるように他のプロパティも追加します */
/* overflow: hidden;
            /* 必要であれば、はみ出したテキストを非表示にする */
/*text-overflow: ellipsis;
        }


        /*.....................max-width:612px.............*/
/*@media screen and (max-width:612px) {
        /* body.work_page_web .content01 .principal .done_tool_go-site_box {
                display: block;
            }


            body.work_page_web .content01 .principal .done_tool_go-site_box .go-site_box p,
            body.work_page_web .content01 .principal .done_tool_go-site_box .go-site_box span {
                font-size: 14px;
            }
        }

        /*................max-width:612px................*/


/*サイトを見に行くボタン領域のグリッドの位置*/
/*body.work_page_web .content01 .principal .done_tool_go-site_box .go-site_box {
            /*列は1本目と2本目の間*/
/*grid-column: 2/3;
            /*行は1本目と2本目の間に入れる*/
/* grid-row: 1/3;
        }

        /*グリッドレイアウトにしたのでマージンが相殺されないので、上だけにマージンを置いて、下マージンは0にして、
        そのかわりに外箱の.principalのマージンを16pxとる*/
/*body.work_page_web .content01 .principal {
            /*margin-bottom: 16px;
        }

        body.work_page_web .content01 .principal .work_done,
        body.work_page_web .content01 .principal .work_tool {
            margin: 16px 0 0 0;
        }
    　/*担当領域の中身を横並びにする/
        body.work_page_web .content01 .principal .done_tool_go-site_box .done_tool_box .work_done {
    　display: flex;
}

        */


/**担当領域とツール領域を囲った箱　と　サイトを見に行くボタンの箱　をflexで横並びにするため親に設定*/
body.work_page_web .content01 .principal .done_tool_go-site_box {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

.done_tool_go-site_box> :first-child {
    width: 68%;
}






/*>>>>>>>>>>>>>>>  SP
max-width:670px>>>>>>>>>>>>>>>*/
@media screen and (max-width:670px) {
    body.work_page_web .content01 .principal .done_tool_go-site_box .done_tool_box {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
    }

    /*<<<<<<<<<max-width:670px<<<<<<<<*/
}


/*.....................max-width:1067px.............*/
@media screen and (max-width:1067px) {

    /*担当領域の中身をが横並びだったのをたてならびにする*/
    body.work_page_web .content01 .principal .done_tool_go-site_box .done_tool_box .work_done,
    body.work_page .content01 .principal .work_tool {
        display: block;
        margin: 8px 0;
        padding-left: 16px;
    }

    body.work_page .content01 .principal .period {
        padding: 8px 0 8px 16px;
    }
}

/*................max-width:1067px................*/


/*担当領域のテキスト画面幅を縮めると折り返されてしまうから折り返さない*/
body.work_page_web .content01 .principal .done_tool_go-site_box .done_tool_box .work_done span {
    white-space: nowrap
}






/*画面幅が狭くなるとボタンが領域をはみ出して横スクロール出てしまうので縦積みにする*/
/*.....................max-width:612px.............*/
/*@media screen and (max-width:612px) {
    /*body.work_page_web .content01 .principal .done_tool_go-site_box a.go_site {
       /* width: 200px;
        margin-top: 24px;
        margin-left: auto;
        margin-right: auto;
    }

    body.work_page_web .content01 .principal .done_tool_go-site_box .go-site_box p,
    body.work_page_web .content01 .principal .done_tool_go-site_box .go-site_box span {
        font-size: 14px;
    }
}

/*................max-width:612px................*/







/*--------------------------------サイトを見に行くボタンの設定----------------------------------*/
/*aタグをflexにしてテキストとアイコンを横並びにする*/
body.work_page_web .content01 .principal .done_tool_go-site_box .go-site_box a.go_site {
    background-color: #69352b;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    flex: none;
    flex-direction: row;
    /*  flex-wrap: nowrap*/
    gap: 12px;
    height: 48px;
    justify-content: center;


    border: 2px solid #69352b;
    border-radius: 10px;
    white-space: nowrap;
}



/*ボタンのテキストとアイコンのカラー*/
body.work_page_web .content01 .principal .done_tool_go-site_box .go-site_box p,
body.work_page_web .content01 .principal .done_tool_go-site_box .go-site_box span {
    color: #fff;

}

/*外部サイトへにホバーしたときにaタグの背景色を変える*/
body.work_page_web .content01 .principal .done_tool_go-site_box .go-site_box a.go_site:hover {
    background-color: #F2F2EB;
    opacity: 1;
    font-weight: 700;
    transform: translateY(-3px);
    background-color: #faede5;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}

/*外部サイトへにホバーしたときにテキストとアイコンの色を変える*/
body.work_page_web .content01 .principal .done_tool_go-site_box .go-site_box a.go_site:hover p,
body.work_page_web .content01 .principal .done_tool_go-site_box .go-site_box a.go_site:hover span {
    color: #615344;
}

/*外部サイトへのアイコンの太さ*/
body.work_page_web .go-site span {
    font-weight: 1;
}






/*.....................max-width:610px.............*/
@media screen and (max-width:932px) {

    /*画面は版を縮めるとボタンが改行してしまうのでブロック要素にもどす*/
    body.work_page_web .content01 .principal .done_tool_go-site_box {
        display: block;
        padding-bottom: 32px;
    }



    /*ボタンの幅や位置の設定*/
    body.work_page_web .content01 .principal .done_tool_go-site_box .go-site_box {
        /*中のaタグ(子要素)に合わせて幅を可変する。ブロック要素だと横幅いっぱいに広がってしまうから*/
        width: fit-content;
        /*子要素に合わせて幅が縮まってるので中央寄せ*/
        margin-left: auto;
        margin-right: auto;
        /*縦積みにすしたときのツール領域との間隔*/
        margin-top: 32px;
        /*画面幅縮めるとテキストが折り返されてしまうので折り返さない*/
        white-space: nowrap;
    }

    .done_tool_go-site_box> :first-child {
        width: 100%;
    }

    .done_tool_go-site_box> :last-child {
        width: 100%;
    }
}

/*................max-width:610px................*/


/*---------------------webサイト作品の紹介ページのコンセプト領域の設定--------------------*/

body.work_page_web .content02 {
    margin-top: 80px;
}


body.work_page_web .content02 figure {
    width: 95%;
    flex-direction: column;
    gap: 80px;

}

body.work_page_web .content02 figure .sub-img-wrapper {
    width: 100%;
    display: flex;

    justify-content: center;
    align-items: center;
    gap: 24px;

}

body.work_page_web .content02 figure .sub-img-wrapper .site-map {
    max-width: 320px;
}

/*画像をスクロール領域にする設定*/
.sub_img {
    /*高さを絶対値で指定することでその高さの領域からはみ出た部分がスクロールになる*/

    text-align: right;
    border-radius: 20px;
    border: solid 6px #4e4343;
    /*はみ出たところを隠すことでスクロールになる*/
    overflow: hidden;

    /*これを設定することでスクロール領域になる*/
    overflow-y: scroll;
    height: 400px;
}

.sub-img--pc {
    /*aspect-ratio: 横の比率 / 縦の比率;のように指定すると、指定した比率で要素の縦横サイズが自動的に調整され、レイアウトの比率が崩れるのを防ぎ、レスポンシブ対応になる*/
    aspect-ratio: 1440/900;
}

.sub-img--sp {
    aspect-ratio: 375/812;
}


/*作品説明の箱は画面幅の60％にして余白をもたせる*/
body.work_page_web .content02 figure figcaption {
    width: 60%;
}


/*.....................max-width:1100px.............*/
@media screen and (max-width:1100px) {
    body.work_page_web .content02 figure .sub-img-wrapper {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        flex-direction: column;
        gap: 40px;
    }

    body.work_page_web .content02 figure .sub-img-wrapper .site-map {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    body.work_page_web .content02 figure .sub-img-wrapper .sub_img {
        height: auto;
    }

    .sub-img--pc {
        width: 90%;
        height: auto;
        max-width: 860px;
        aspect-ratio: 1440/900;
        margin-left: auto;
        margin-right: auto;
    }

    .sub-img--sp {
        width: 100%;
        max-width: 375px;
        aspect-ratio: 375/667;
    }

    body.work_page_web .content02 .work-description-wrapper {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        flex-direction: column-reverse;
        justify-content: center;
        gap: 40px;
        margin-bottom: 80px;
    }


}

/*>>>>>>>>>>>>>>>  SP
max-width:980px>>>>>>>>>>>>>>>*/
@media screen and (max-width:980px) {

    body.work_page_web .content02 figure figcaption,
    body.work_page .work-section-content,
    body.work_page_web .content05-1,
    body.work_page_web .content05-2 {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    /*<<<<<<<<<max-width:980px<<<<<<<<*/
}


/*.....................max-width:670px.............*/
@media screen and (max-width:670px) {

    /*コンセプト領域のテキスト領域の幅の設定。親の箱に対して*/
    body.work_page_web figure figcaption {
        width: 100%;
    }
}

/*................max-width:670px................*/

/*下層ページセクション*/
body.work_page_web .content03-3 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 80px;
}

body.work_page_web .content03-3 .sub_img {
    height: 600px;
}

body.work_page_web .content03-3 .scroll-hint {
    padding-bottom: 16px;
}

body.work_page_web h3.work-section-title {
    position: relative;
    line-height: 3.2rem;
    font-family: "Quicksand", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 24px;
    padding: 16px 0;
    text-align: center;
    background-color: #faefed;
    color: #69352b;
    margin: 240px 0 80px;
}

body.work_page_web h3.work-section-title::before {
    position: absolute;
    content: "";
    width: 160px;
    aspect-ratio: 225/129;
    background-image: url(img/title-deco.png);
    background-repeat: no-repeat;
    background-size: contain;
    top: -91px;
    left: 50%;
    transform: translateX(-50%);
}

body.work_page_web h4.related-title {
    line-height: 3.2rem;
    font-weight: 800;
    font-style: normal;
    font-size: 22px;
    padding: 16px 0;
    text-align: center;
    position: relative;
    margin: 80px 0;
    text-shadow: 0 0 2px white;
    letter-spacing: 0.3rem;
}

body.work_page_web h4.related-title::before {
    content: "";
    position: absolute;
    background: #f7f7f2;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: -1;
}

body.work_page_web h4.related-title::after {
    content: "web design";
    position: absolute;
    width: 100%;
    height: 1rem;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    color: #f097a3;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.2rem;
}

body.work_page_web .illust-graphic h4.related-title::after {
    content: "graphic・illust";
}

body.work_page_web .related-title-wrapper {
    position: relative;
}

body.work_page_web .related-title-decoration span {
    position: absolute;
    width: 90px;
    height: 3px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #dfdfdf;
}

body.work_page_web .related-title-decoration span:nth-of-type(1) {
    left: calc(50% - 216px);
}

body.work_page_web .related-title-decoration span:nth-of-type(2) {
    right: calc(50% - 216px);
}



.related-works {
    width: 100%;
    margin: 120px auto;
}




/*>>>>>>>>>>>>>>>  SP
max-width:1100px>>>>>>>>>>>>>>>*/
@media screen and (max-width:1100px) {
    body.work_page_web .content03-3 {
        flex-direction: column;
    }

    body.work_page_web .content03-3 .sub_img {
        height: auto;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }



    /*<<<<<<<<<max-width:1100px<<<<<<<<*/
}

/*>>>>>>>>>>>>>>>  SP
max-width:910px>>>>>>>>>>>>>>>*/
@media screen and (max-width:910px) {
    body.work_page_web h3 {
        margin: 32px 0 80px;
    }

    /*<<<<<<<<<max-width:910px<<<<<<<<*/
}

/*>>>>>>>>>>>>>>>  SP
max-width:400px>>>>>>>>>>>>>>>*/
@media screen and (max-width:400px) {
    body.work_page_web h3.work-section-title {
        font-size: 20px;
    }

    /*<<<<<<<<<max-width:400px<<<<<<<<*/
}


/*-------------------関連制作物----------------------*/

.related-flyer-wrapper {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    background-color: #fafaf7;
    border-radius: 30px;
    padding: 0 24px;
}

/* フライヤー領域 */
.related-flyer {
    display: flex;
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
    gap: 40px;
    margin-bottom: 80px;
    justify-content: center;
    align-items: center;

}

.related-img {
    flex: 1.5;
}


#work02 .content05-2 .related-img {
    margin: 40px 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.related-text {
    flex: 1;
}

.content02 .related-text h4 {
    line-height: 3rem;
    border-bottom: 1px solid #40aeff;
    text-align: left;
}

.content05-1 .related-text h4 {
    line-height: 3rem;
    border-bottom: 1px solid #ff9b4a;
    text-align: left;
}

.content05-2 .related-text h4 {
    line-height: 3rem;
    border-bottom: 2px solid #dcf0bb;
    text-align: left;
}

.related-text p {
    margin-left: 40px;
}

.content02 .related-text figcaption p {
    margin-left: 0;
}

/* ロゴ、イラスト領域　3カラム */
.related-flex {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.banner.related-flex {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    background-color: #fafafa;
    padding: 40px;
    margin-bottom: 80px;
    border-radius: 30px;
}

.content02 .banner.related-flex {
    width: 95%;
    margin-top: 24px;
    margin-bottom: 64px;
    padding: 24px;
    gap: 0;
}


.content05-2 .related-flex.related-flex--logo-illust {
    margin-top: 80px;
}

#work02 .content05-2 .related-flex.related-flex--logo-illust {
    margin-top: 80px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.related-item-wrapper figcaption {
    text-align: center;
}



.related-item-wrapper {
    display: flex;
    width: 100%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    gap: 40px;
    justify-content: center;
    align-items: center;
}


.related-item-wrapper figure.before {
    width: 40%;
}

.related-item-wrapper figure.after {
    width: 60%;
}

.content02 .related-item-wrapper {
    max-width: none;
}

.related-item {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 64px;
}

.related-item.banner-item3 {
    max-width: 1040px;
    margin-top: 40px;

}

.content02 .related-item {
    margin-top: 0;

}

.content03-2 .related-item {
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}



.content02 .related-item img,
.content05-1 .related-item img {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .2);
}


.content02 .related-item-wrapper figure.after .related-item img {
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}

.related-item-after .related-item {
    width: 100%;
}

.related-item-after p:first-of-type {
    margin-bottom: 16px;
}

.related-item-after p {
    text-align: right;
    font-size: 12px;
}

.related-item {
    margin-bottom: 0;
}

.related-works:nth-of-type(n+2) {
    margin-top: 180px;
}


/* ロゴ・イラスト紹介セクションのテキスト */
.related-text {
    width: 30%;
}

.related-text {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

.content02 .related-text.content {
    width: 100%;
}



/* ロゴ・イラスト紹介セクションの画像 */
.related-item img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #fafaf7;
    border-radius: 30px;
    margin-top: 80px;
}

#work02 .related-flyer-wrapper .related-item.related-flyer img {
    background-color: unset;
    border-radius: unset;
}


.related-item.related-flyer img {
    width: 100%;
}

.banner .related-item img {
    width: 100%;
    border-radius: unset;
}



.related-item.logo-illust2 {
    margin-top: 80px;
}

.related-item p {
    text-align: left;
}

.content05-1 .related-item p {
    text-align: center;
}

.related-item--ex {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#work02 .related-item--ex {
    margin-top: 24px;
    margin-left: auto;
    margin-right: auto;
}

.related-text p {
    width: 90%;
}

.related-text p.supplement {
    width: 100%;
}



.related-item--ex-bgc {
    margin-left: auto;
}

/*>>>>>>>>>>>>>>>  SP
max-width:1040px>>>>>>>>>>>>>>>*/
@media screen and (max-width:1040px) {
    .content05-2 .related-item {
        flex-direction: column;
        gap: 0;
    }

    #work02 .content05-2 .related-flyer-wrapper {
        background-color: #fff;
    }

    #work02 .content05-2 .related-item.related-flyer {
        flex-direction: column-reverse;
    }

    body.work_page .content05-2 .related-item.logo-illust {
        margin-top: 80px;
    }


    .related-item.logo-illust2 {
        margin-top: 0px;
    }

    body.work_page .content05-2 .logo-illust2 .related-text {
        margin-top: 80px;
    }

    .related-item--ex {
        margin-top: 40px;
    }

    body.work_page .content05-2 .related-item ul,
    body.work_page .work-description .work-description-content .direction-summery {
        margin-left: auto;
    }

    body.work_page .content05-2 .related-text {
        max-width: 559px;
    }

    /*<<<<<<<<<max-width:1040px<<<<<<<<*/
}

/*>>>>>>>>>>>>>>>  SP
max-width:900px>>>>>>>>>>>>>>>*/
@media screen and (max-width:900px) {
    .related-flyer-wrapper {
        width: 100%;
        max-width: 640px;
        border-radius: unset;
        background-color: unset;
        padding: 0;
        gap: 0;
    }


    body.work_page .content05-2 .related-item.related-flyer {
        flex-direction: column-reverse;
        gap: 0;
        padding-bottom: 24px;
    }


    .related-item-wrapper {
        flex-direction: column;
        gap: 0;
    }

    body.work_page_web .related-works h3 {
        padding-bottom: 0;
        line-height: 2.8rem;
        font-size: 24px;
    }

    body.work_page_web .related-works h4 {
        font-weight: normal;
    }

    .related-flex {
        width: 100%;
        border-radius: unset;
    }

    .related-item {
        width: 100%;
        padding: 0;
        flex-direction: column;
        gap: 0;
    }

    .related-item.banner-item1 {
        margin-top: 0;
    }

    .related-item.banner-item1,
    .related-item.banner-item2 {
        max-width: 500px;
    }


    .related-item:focus {
        margin-top: 0;
    }

    .related-item-wrapper figure.before {
        width: 100%;
        max-width: 400px;
    }

    .related-item-wrapper figure.after {
        width: 100%;
        max-width: 600px;
    }

    .content05-2 .related-item:first-child {
        margin-top: 0;
    }


    .content05-2 .related-flex:last-child .related-item {
        margin-bottom: 0;
    }

    .content05-2 .related-flex .related-item:last-of-type {
        margin-top: 64px;
    }

    .related-img {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        max-width: 540px;
    }

    #work02 .content05-2 .related-img {
        width: auto;
        max-width: none;
    }


    .related-flex img:nth-of-type(3) {
        width: 100%;
        max-width: none;
    }




    .content05-2 .related-text {
        margin-bottom: 24px;
    }

    .related-item img {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .related-item--ex {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 24px;
        font-size: 12px;
    }

    .related-item--ex-bgc {
        padding: 16px 0;
    }

    /*<<<<<<<<<max-width:900px<<<<<<<<*/
}


/*>>>>>>>>>>>>>>>  SP
max-width:670px>>>>>>>>>>>>>>>*/
@media screen and (max-width:670px) {
    .content03-1 .related-text-inner {
        width: 85%;
    }

    .related-text {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 40px;
    }

    #work02 .content05-2 .related-text {
        width: auto;
    }

    #work02 .content05-2 .related-img {
        margin: 40px 24px;
    }

    .related-text p {
        width: 100%;
    }


    body.work_page .content05-2 .related-item ul,
    body.work_page .work-description .work-description-content .direction-summery {
        width: auto;
        margin-left: 12px;
    }

    /*<<<<<<<<<max-width:670px<<<<<<<<*/
}

/*>>>>>>>>>>>>>>>  SP
max-width:467px>>>>>>>>>>>>>>>*/
@media screen and (max-width:467px) {
    body.work_page_web .related-title-decoration span:nth-of-type(1) {
        left: 0;
        z-index: -2;
        background-color: #dfdfdf;
    }

    body.work_page_web .related-title-decoration span:nth-of-type(2) {
        right: 0;
        z-index: -2;
        background-color: #dfdfdf;
    }

    /*<<<<<<<<<max-width:467px<<<<<<<<*/
}

/*=======================================================================
aboutページ
=========================================================================*/
body#about {
    background-color: #f3dcd8d8;
}


#about .wrapper2 {
    width: 100%;
    max-width: 1200px;
    padding-top: 80px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    margin-top: 0;
    padding-bottom: 180px;
}




#about .wrapper2 h2.wrapper2_title {
    margin-bottom: 64px;
    background-image: url(img/line.png);
    background-repeat: repeat-x;
    padding-bottom: 16px;
    background-position: bottom;
}


#about .wrapper2 .about_name p {
    text-align: center;
    font-weight: 300;
}


#about .wrapper2 .about_name h1 {
    padding-top: 72px;
    line-height: 5rem;
    background-image: url(img/about_mini_img.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    font-weight: 900;
    font-family: "Zen Maru Gothic", sans-serif;
    /*文字の縁取り*/
    text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF,
        -1px 1px 0 #FFF, 1px -1px 0 #FFF,
        0px 1px 0 #FFF, 0-1px 0 #FFF,
        -1px 0 0 #FFF, 1px 0 0 #FFF;

}

#about .wrapper2 .about_inner {
    width: 100%;

}

#about .wrapper2 .about_inner .about_lead {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 48px;
    margin-bottom: 80px;
    text-align: left;
    line-height: 2rem;
    font-weight: 600;
}


#about .wrapper2 .about_inner h2 {
    position: relative;
    z-index: 2;
    margin-bottom: 56px;
    font-size: 24px;
}

#about .wrapper2 .about_inner h2::before {
    position: absolute;
    content: "";
    width: 2.8rem;
    height: 2.8rem;
    background-color: #fde3dc;
    transform: translateX(-50%) rotate(45deg);
    top: 0;
    left: 50%;
    z-index: -1;

}





/*.....................max-width:910px.............*/
@media screen and (max-width:910px) {
    #about .wrapper2 .about_inner {
        display: block;
        margin: 48px 0 80px 0;
        width: 90%;
        margin-left: auto;
        margin-right: auto;

    }
}

/*................max-width:910px................*/


#about .wrapper2 .about_inner .sec1 {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 80px;
}


#about .wrapper2 .about_inner .sec1 .career p {
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    border-left: 2px solid #faabab;
    font-weight: 500;
    width: 90%;
    text-align: left;
    padding-bottom: 16px;
}

#about .wrapper2 .about_inner .sec1 p {
    line-height: 2rem;
    text-align: left;
    padding-bottom: 16px;
}

#about .wrapper2 .about_inner .sec2 .background h2 {
    text-align: center;
}


#about .wrapper2 .about_inner .sec2 .appeal {
    margin-top: 80px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 32px;
    padding-top: 16px;

    border: 4px solid;
    border-image: linear-gradient(to bottom, #ffb07f, #fdc7c7, #e58080) 1;
}

#about .wrapper2 .about_inner .sec2 .appeal p {
    margin-bottom: 16px;

}

#about .wrapper2 .about_inner .sec2 .appeal h4 {
    text-align-last: left;
}


#about .wrapper2 .about_inner .sec2 .background {
    max-width: 600px;
    padding: 32px 24px 32px 24px;
    border-left: 5px double #e58080;
    background-color: #fbf6f6;
    text-align: left;

}

/*.....................max-width:385px.............*/
@media screen and (max-width:385px) {
    #about .wrapper2 .about_inner .sec2 .appeal h3 span {
        display: block;
    }
}

/*................max-width:385px................*/

/*.................max-width:399px..............*/
@media screen and (max-width:399px) {
    #about .wrapper2 .about_inner .sec2 .background {
        margin-left: 24px;
        max-width: 345px;

    }
}

/*...................max-width:399px.............*/

#about .wrapper2 .about_inner .sec2 .background .bg_title {
    margin: 16px 0;
    font-weight: 600;
    line-height: 2;
}

#about .wrapper2 .about_inner .sec2 .background li p:nth-of-type(n+2) {
    margin-left: 16px;
    line-height: 2;

}


#about .wrapper2 .about_inner .sec2 .background .career_text {
    padding-bottom: 24px;
}

#about .wrapper2 .about_inner .sec2 .background .career_text:last-child {
    padding-bottom: 0;
}

#about .wrapper2 .about_inner .sec2 .background .career_text p {
    line-height: 1.8rem;
}

#about .wrapper2 .about_inner .sec2 .background .career_text p:nth-child(2) {
    margin-left: 64px;
}


/*.....................max-width:1200x.............*/
@media screen and (max-width:1200px) {
    #about .wrapper2 .about_inner .sec2 .background span {
        display: block;
    }

    /*................max-width:1200px................*/
}

/*.....................max-width:910x.............*/
@media screen and (max-width:910px) {
    #about .wrapper2 .about_inner .sec2 .background span {
        display: inline
    }

    /*................max-width:910px................*/
}

/*.....................max-width:640x.............*/
@media screen and (max-width:640px) {
    #about .wrapper2 .about_inner .sec2 .background span {
        display: block
    }

    /*................max-width:640px................*/
}


#about .wrapper2 .about_inner .sec1 .appeal {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 32px;
    padding-top: 32px;
    border-width: 4px;
    border-style: solid;
    border-color: currentcolor;
    border-image: linear-gradient(rgb(255, 176, 127), rgb(253, 199, 199), rgb(229, 128, 128)) 1 / 1 / 0 stretch;
}

#about .wrapper2 .about_inner .sec1 .appeal h3 {
    line-height: 2.4rem;
    margin-bottom: 32px;
}

#about .wrapper2 .about_inner .sec2 {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 120px;
    padding-top: 80px;
    display: flex;
    align-items: center;

}

#about .wrapper2 .about_inner .sec2_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 80px;
}

#about .wrapper2 .about_inner .logo {
    border: 4px dotted #a58569;
    padding-top: 24px;
    padding-right: 54px;
    padding-left: 54px;
    padding-bottom: 32px;

}

#about .wrapper2 .about_inner .degisin {

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 56px;
}

#about .wrapper2 .about_inner .logo h2 {
    margin-top: 18px;
    margin-bottom: 56px;
}



#about .wrapper2 .about_inner .sec2 .img_box {
    width: 340px;
    margin-left: auto;
    margin-right: auto;
}

#about .wrapper2 .about_inner .sec2 .img_box img {
    width: 100%;
    margin-bottom: 0;

}

#about .wrapper2 .about_inner .sec2 .exp {
    padding: 0 16px;
}


#about .wrapper2 .about_inner .sec2 .exp p {
    line-height: 2.4rem;
}

#about .wrapper2 .about_inner .sec2 .exp p:last-child {
    text-align: left;
}

#about a.back-all {
    color: #3e3e3e;
}

#about a.back-all:hover {
    color: #ffffff;
}

#about a.back-all p {
    text-align: center;

}

#preparation .junbi span {
    display: block;
    width: 50px;
    margin-left: auto;
    margin-right: auto;
}


/*>>>>>>>>>>>>>>>  SP
max-width:980px>>>>>>>>>>>>>>>*/
@media screen and (max-width:980px) {
    #about .wrapper2 .about_inner .sec2 .img_box img {
        padding-top: 30px;
        margin-bottom: 3rem;
    }

    /*<<<<<<<<<max-width:980px<<<<<<<<*/
}

/*.....................max-width:910px.............*/
@media screen and (max-width:910px) {
    #about .wrapper2 .about_inner .sec2 {
        width: 100%;
        margin-top: 80px;

    }

    #about .wrapper2 .about_inner .degisin {
        flex-direction: column;
        gap: 24px;
        padding: 18px;
    }

    #about .wrapper2 .about_inner .sec2 .img_box {
        width: 140px;
    }

    #about .wrapper2 .about_inner .sec2 .exp {
        padding: 0;
    }
}



/*................max-width:910px................*/