/* =================
general
================= */

html {
    font-size: 62.5%;
}

body {
    display: none;
    width: 100vw;
    height: auto;
}

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

/* =========
width/contents
========= */

.width_vw {
    max-width: 84vw;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width:769px) {
    header {
        width: 100vw;
    }

    .header_pc {
        max-width: 100vw;
    }

    .width_vw {
        max-width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =========
/width
========= */

/* =========
background color
========= */

/* rgba(238, 228, 215,1;); */
.bg_eee4d7 {
    background-color: #eee4d7;
}

.index,
.about,
.works,
.personalworks {
    background-color: #f6f6f6;
}

/* =========
/background color
========= */

/* =========
fade in
========= */

.fadein {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s;
}

/* =========
/fade in
========= */

/* =========
general PC
========= */

@media screen and (min-width:769px) {

    /* 各項目のmargin-botttom */
    .mb {
        margin-bottom: 120px;
    }

}

/* =========
/general PC
========= */

/* =========
font general
========= */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
.form-group input,
textarea,
dl,
dt,
dd,
.form-send a,
ul li,
button,
a,
ul,
li,
div,
figure,
figcaption {
    font-family: a-otf-gothic-bbb-pr6n, a-otf-ryumin-pr6n, 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', YuGothic, 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', 'Meiryo UI', 'メイリオ', Meiryo, sans-serif, serif;
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: 1.6px;
    font-weight: normal;
    color: #666;
    font-feature-settings: "palt";
}

.a-otf-gothic-bbb-pr6n {
    font-family: a-otf-gothic-bbb-pr6n, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.a-otf-ryumin-pr6n {
    font-family: a-otf-ryumin-pr6n, serif;
    font-weight: 300;
    font-style: normal;
}

h2 {
    font-size: 1.2rem;
}

h3,
h4,
h5,
h6,
footer p,
.cl_container dl,
.cl_container dd,
.cl_container dt {
    font-size: 1rem;
}

@media screen and (min-width:769px) {
    h1 {
        font-size: 1.6rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    h4,
    h5,
    h6 {
        font-size: 1.2rem;
    }

    footer p {
        font-size: 1rem;
    }
}

/* 再検証（文字の折り返しプロパティ） */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
dd {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* クライアントワークページにいるときのみnavのフォント透明度変更 */
.visiting {
    opacity: 0.5;
}

/* =========
font general
========= */

/* =========
button
========= */

/* お問い合わせボタン */
button a {
    color: #fff;
    letter-spacing: 1.6px;
}

.btn {
    width: 160px;
    color: #888;
    margin-bottom: 40px;
    padding-top: 4px;
    padding-bottom: 4px;
    background-color: #EFEFEF;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.btn:hover {
    background-color: #fff;
}

/* =========
送信ボタン
========= */

/* 送信ボタンのmargin-top */
.form-send {
    width: 160px;
}

.form-send button {
    width: 100%;
    height: 36px;
}

.form-send button:hover {
    background-color: #fff;
    cursor: pointer;
}

/* =========
/送信ボタン
========= */

/* =========
送信・リセットボタン
========= */

.btn_inline {
    display: flex;
}

.form-reset {
    width: 100px;
    height: 36px;
    margin-bottom: auto;
    margin-left: 6px;
    background: none;
    font-family: a-otf-gothic-bbb-pr6n, a-otf-ryumin-pr6n, 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', YuGothic, 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', 'Meiryo UI', 'メイリオ', Meiryo, sans-serif, serif;
    color: #888;
    cursor: pointer;
    letter-spacing: 1.6px;
    font-weight: normal;
}

/* =========
/送信・リセットボタン
========= */

/* =========
/button
========= */

/* =========
link
========= */

/* リンク色 */
a:link {
    color: #888;
    cursor: pointer;
}

/* 訪問済みリンク色 */
a:visited {
    color: #888;
}

/* マウスオン時リンク色 */
/* マウスオン時透明度 */
a:hover {
    color: #333;
    opacity: 0.5;
}

/* クリック時リンク色 */
/* クリック時透明度 */
a:active {
    color: #111;
    opacity: 0.5;
}

/* 画像まわりの余白を解除 */
img {
    vertical-align: middle;
}

/* 画像ホバー時透明度 */
.feature_link img {
    opacity: 1;
}

/* =========
/link
========= */

/* =================
header
================= */

/* =================
nav
================= */

/* =========
nav SP
========= */

.nav_sp {
    line-height: 1.6rem;
}

.nav_sp ul li {
    margin-bottom: 1.6rem;
}

/* =========
/nav SP
========= */

/* =========
nav PC
========= */

@media screen and (min-width:769px) {

    .header_pc nav {
        width: 30vw;
    }

    .header_pc nav ul {
        display: flex;
        justify-content: space-between;
    }

    .pc_logo_nav {
        display: flex;
        justify-content: space-between;
    }
}

/* =========
/nav PC
========= */

/* =================
sp：humberger menu
================= */

/* ハンバーガーボタン */

/* ハンバーガーボタン幅の設定 */
.sp_menu_btn {
    width: 36px;
    height: 24px;
    position: fixed;
    top: 36px;
    left: 30px;
    z-index: 10000;
}

/* ハンバーガーボタン線の設定 */
.sp_menu_btn span {
    display: block;
    width: 100%;
    background-color: #666;
    height: 1px;
    transition: 0.5s;
    position: absolute;
}

/* ハンバーガーボタン線の位置設定 */
.nav_sp div span:first-child {
    top: 0;
}

.nav_sp div span:last-child {
    bottom: 0;
}

/* ハンバーガーボタンをクリックすると線が動く */
.sp_menu_btn.on span:nth-child(1) {
    transform: translate(0px, 11px)rotate(45deg);
}

/* .sp_menu_btn.on span:nth-child(2){
    display:none;
  } */

.sp_menu_btn.on span:last-child {
    transform: translate(0px, -11px)rotate(-45deg);
}

/* /ハンバーガーボタンをクリックすると線が動く */

.nav_sp nav ul {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 100vh;
    padding-top: 56vh;
    padding-left: 9vw;
    background-color: rgba(238, 228, 215, 0.8);
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: 0.5s;
    overflow-y: auto;
    z-index: 1;
}

.nav_sp nav ul.on {
    transform: translateX(0%);
}

/* /ハンバーガーボタン */

/* =================
/sp：humberger menu
================= */

/* =================
/nav
================= */

/* ================
header
================= */

/* =================
topimg
================= */

.title_pc,
.header_pc nav {
    display: none;
}

.title_sp {
    width: 44vw;
    height: 10vh;
    margin-left: auto;
    margin-right: auto;
    padding-top: 4.6vh;
    box-sizing: border-box;
}

.title_sp h1 {
    text-align: center;
}

.topimg {
    width: 84vw;
    height: 90vh;
}

.topimg p {
    line-height: 1.8em;
    padding-left: 8vw;
    padding-top: 8vh;
}

@media screen and (min-width:769px) {

    .header_pc {
        padding-top: 40px;
    }

    .header_sp {
        display: none;
    }

    .title_pc,
    .header_pc nav {
        display: block;
    }

    .title_pc {
        width: 20vw;
        height: 60px;
    }

    .title_pc h1 {
        height: 60px;
        box-sizing: border-box;
        max-width: 200px;
    }

    .topimg {
        width: 64vw;
        height: 80vh;
        padding-top: 10vh;
        box-sizing: border-box;
    }

    .topimg p {
        padding-left: 5vw;
    }

}

/* =================
/topimg
================= */

/* =================
form
================= */

.topimg_form_container {
    width: 100vw;
    height: 80vh;
}

.form_container {
    width: 84vw;
    margin-left: auto;
    margin-right: auto;
}

.form_container h6 {
    font-size: 1.2rem;
    padding-top: 24px;
    margin-bottom: 24px;
}

.form_container p {
    font-size: 1rem;
}

.index .notice {
    margin-bottom: 4vh;
}

.form-group {
    width: 100%;
    margin-bottom: 4vh;
}

.form-group input,
.form-control {
    width: inherit;
}

.form-group input {
    height: 6vh;
}

.form-control textarea {
    height: 18vh;
}

.topimg_form_container .form_contents {
    height: 100vh;
}

@media screen and (min-width:769px) {
    .topimg_form_container .form_contents {
        width: 36vw;
        height: 80vh;
    }

    .topimg_form_container {
        display: flex;
        justify-content: space-between;
    }

    .form_container {
        width: 93%;
    }

    .form-group input {
        height: 3vh;
    }

    .form-control textarea {
        height: 9vh;
    }

    .form_container {
        padding-top: 272px;
    }
}

/* 
.contact_form{
    text-align: justify;
} */

/* .form-group{
    width:100%;
    margin-bottom: 18px;
}

.form-group:first-child{
    margin-top: 18px;
}

.form-group input{
    width: 100%;
    height: 36px;
}

.form-group textarea{
    width: 100%;
    height: 120px;
} */

/* =================
/form
================= */

/* =================
footer
================= */

footer {
    width: 100vw;
    height: 10vh;
}

.copyrights {
    width: 84vw;
}

.copyrights p {
    padding-top: 2.4vh;
    padding-left: 8vw;
}

@media screen and (min-width:769px) {

    .copyrights {
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }

    .copyrights p {
        padding-left: 0vw;
    }

}

/* =================
/footer
================= */

/* =================
about
================= */

.about .my_img {
    width: 100%;
    margin-top: 60px;
}

.about .my_img img {
    width: 100%;
}

.about_content_text {
    margin-bottom: 60px;
}

.about_content_text p {
    font-size: 1rem;
}

.about_content_text h2 {
    font-size: 1.4rem;
    margin-top: 24px;
    margin-bottom: 24px;
}

.skills_list_container h3 {
    font-size: 1.2rem;
    margin-bottom: 42px;
}

.skills_content h4 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    line-height: 1.6;
}

.skills_content p {
    font-size: 1rem;
}

.skills_content {
    margin-bottom: 42px;
}

.skills_content h4 span {
    font-size: 1rem;
}

@media screen and (min-width:769px) {

    .about_contents_img_text {
        width: 100%;
    }

    .about .my_img {
        width: 24%;
        margin-top: 0px;
    }

    .about .my_img img {
        width: 100%;
    }

    .about_content_text {
        width: 75%;
        padding-left: 36px;
    }

    .about_container_img_text {
        margin-top: 120px;
        margin-bottom: 120px;
        display: flex;
        justify-content: space-between;
    }

    .skills_list_container {
        width: 100%;
    }

    .skills_content {
        width: 27%;
        margin-bottom: 60px;
    }

    .skills_list {
        display: flex;
        justify-content: space-between;
    }

    .about_content_text h2 {
        margin-top: 0px;
    }

    .skills_list_container h3 {
        margin-bottom: 24px;
    }

    .skills_content h4 {
        margin-bottom: 18px;
    }

}

/* =================
/about
================= */

/* =================
works
================= */

.cl_contents_cl_tab_list {
    width: 100%;
    margin-top: 120px;
}

.cl_contents_cl_tab_list ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.cl_contents img,
.cliantlist_contents img {
    width: 100%;
}

.works .notice {
    font-size: 1rem;
}

.works dl,
.works dt,
.works dd {
    width: 100%;
}

.works h3 {
    font-size: 1.4rem;
    margin-top: 1.8vh;
    margin-bottom: 2.4vh;
}

.works dt {
    font-size: 1.4rem;
    margin-bottom: .6vh;
}

.works dd {
    margin-bottom: 2.4vh;
}

.cl_contents {
    padding-bottom: 7.2vh;
    margin-top: 6vh;
    margin-bottom: 12vh;
    border-bottom: 1px #999 solid;
}

.cl_contents dd img {
    width: 2vh;
}


@media screen and (min-width:769px) {

    .cl_contents {
        width: 36vw;
    }

    .cl_contents_cl_tab_list {
        width: 36vw
    }

    .cl_contents img,
    .cliantlist_contents img {
        width: 100%;
    }

    .cl_contents_cl_tab_list ul {
        display: flex;
        justify-content: space-between;
    }

    .works dt {
        width: 20%;
    }

    .works dd {
        width: 80%;
    }
}

.cliantlist_container {
    display: flex;
    justify-content: space-between;
}

/* =================
/works
================= */

/* =================
down layer
================= */

/* =================
/down layer
================= */

















































/* =================
form thanks.php
================= */

/* .returnhome a{
    display: block;
}

.returnhome{
    text-align: center;
} */

#text {
    font-family: a-otf-gothic-bbb-pr6n, a-otf-ryumin-pr6n, 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', YuGothic, 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', 'Meiryo UI', 'メイリオ', Meiryo, sans-serif, serif;
}

/* =================0
form thanks.php
================= */

/* =========
pagetop
========= */

#pagetop {
    display: inline-block;
    position: fixed;
    bottom: 0;
    right: 0;
}

#pagetop a {
    padding: 15px 16px;
    display: block;
    background: #888;
    color: #fff;
    text-align: center;
    font-family: a-otf-gothic-bbb-pr6n, a-otf-ryumin-pr6n, 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', YuGothic, 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', 'Meiryo UI', 'メイリオ', Meiryo, sans-serif, serif;
    font-weight: 100;
}

#pagetop span {
    color: #fff;
}

@media screen and (min-width:769px) {
    #pagetop a {
        padding: 21px 16px;
    }
}

/* =========
/pagetop
========= */

/* =========
img
========= */

/* ポートフォリオ詳細 PDF/YTリンクアイコン */
/* .feature_item dd img{
    width:16px;
    height: auto;
} */
/* /ポートフォリオ詳細 PDF/YTリンクアイコン */

/* =========
/img
========= */

/* =================
Youtube iframe
================= */

/* レスポンシブ対応 */
/* .cg_film,.teaser{
    position:relative;
    width:100%;
    height:0;
    padding-top:75%;
}

.cg_film iframe,
.teaser iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
} */
/* レスポンシブ対応 */

/* =================
/Youtube iframe
================= */

/* ==========================================
tab
========================================== */

/* =================
tab general
================= */

/* .cl_contents_cl_tab_list{
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-bottom: 1px solid #666;
}

.cl_contents_cl_tab_list ul{
    display: inline-block;
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-left: auto;;
    margin-right: auto;
}

.cl_contents_cl_tab_list ul li{
    display: inline-block;
    list-style: none;
    box-sizing: border-box;
    max-width: 24%;
    text-align: top;
    height: 50px;
}

.cl_contents_cl_tab_list ul li a{
    text-decoration: none;
    color: #666;
    display: block;
}

.cl_contents_cl_tab_list ul li a:hover, ul li a.selected{
    opacity: 0.5;
}

.cl_contents_cl_tab_list ul li:visited{
    color: #666;
} */

/* =================
/tab general
================= */

/* =================
tab SP
================= */

/* .cl_contents_cl_tab_list{
    font-size: 1rem;
} */

/* =================
/tab SP
================= */

/* =================
tab PC
================= */

/* @media screen and (min-width:769px){
    .cl_contents_cl_tab_list{
        font-size: 1.4rem;
    }
     
} */

/* =================
/tab PC
================= */

/* ==========================================
/tab
========================================== */

/* =========
scroll
========= */

/* スクロールアイコン領域 */
/* .sp_scroll{
    width:24vw;
    box-sizing: border-box;
} */

/* .sp_scroll a {
    display: inline-block;
    position: absolute;
    right: 40px;
    bottom: 0;
    padding: 10px 10px 110px;
    overflow: hidden;
    color: #666;
    font-size: 1.4rem;
    font-family: a-otf-gothic-bbb-pr6n, a-otf-ryumin-pr6n,'ヒラギノ明朝 ProN','Hiragino Mincho ProN','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',YuGothic,'Yu Gothic','ＭＳ Ｐゴシック','MS PGothic','Meiryo UI','メイリオ', Meiryo,sans-serif, serif;
    line-height: 1;
    letter-spacing: .2em;
    text-decoration: none;
    writing-mode: vertical-lr;
    z-index:0;
  } */
/* /スクロールアイコン領域 */

/* スクロールライン */
/* .sp_scroll a::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 12vh;
    background: #666;
  } */

/* スクロールライン アニメション */
/* .sp_scroll a::after {
    animation: sdl 2.4s cubic-bezier(1, 0, 0, 1) infinite;
  }
  @keyframes sdl {
    0% {
      transform: scale3d(1, 0, 0);
      transform-origin: 0 0;
    }
    35% {
      transform: scale3d(1, 1, 0);
      transform-origin: 0 0;
    }
    35.1% {
      transform: scale3d(1, 1, 0);
      transform-origin: 0 100%;
    }
    70%, 100% {
      transform: scale3d(1, 0, 0);
      transform-origin: 0 100%;
    }
  } */

/* =========
/scroll
========= */

/* =================
/ナビ・タイトル
================= */

/* =================
/header
================= */


/* =========
about PC
========= */

/* @media screen and (min-width:769px){

    .about_contents_img_text{
        width:1200px;
        margin-left: auto;
        margin-right:auto;
    }
 
} */

/* =========
/about PC
========= */

/* 画像にカーソル→VIEW MORE */
/* .portfolio_link a{
    display: block;
    position: relative;
}

.portfolio_link a:hover::after{
    content: "VIEW MORE";
    display: flex;
    justify-content: center;
    position: absolute;
    align-items: center;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(220, 220, 220,0.5);
    color: #333;
    font-weight: 500;
    text-decoration: none;
    font-family: 'Abel';
    font-size: 2rem;
    letter-spacing: 2px;
} */
/* /画像にカーソル→VIEW MORE */


/* 画像にカーソル→上にふわっ */
/* .portfolio_link a:hover{
    transform: translateY(-10px);
    transition-duration: 1s;
} */

/* ===================================================
【更新したら都度変更】ポートフォリオ 最終行を左寄せに
=================================================== */

/* .portfolio_flex::after {
    display: block;
    content:"";
    width: 75%;
    } */

/* .portfolio_flex::after {
    display: block;
    content:"";
    width: 50%;
    } */

/* .portfolio_flex::after {
    display: block;
    content:"";
    width: 25%;
    } */

/* ===================================================
/【更新したら都度変更】ポートフォリオ 最終行を左寄せに
=================================================== */

/* =================
tab（CATEGOLY）
================= */

/* =========
/tab（CATEGOLY） general
========= */

/* .cl_table_contents_wrapper{
    background: linear-gradient(90deg, rgba(177,177,177,1) 0%, rgba(191,191,191,1) 58%, rgba(236,236,236,1) 100%);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-top: 24px;
    padding-bottom:24px; 
} */
/* background: rgb(177,177,177); */

/* .cl_table_contents{
    width:100%;
    display:flex;
    justify-content: space-around;
}

.cl_table_contents ul{
    border-top: 1px solid #fff;
}

.cl_table_contents_wrapper,
.cl_table_contents li{
    line-height: 22px;
}

.cl_table_contents_wrapper h6+h6{
    margin-bottom: 18px;
} */


/* =========
/tab（CATEGORY） general
========= */

/* =========
tab（CATEGORY） SP
========= */

/* .cl_table_contents li{
    width:100%;
    margin-top: 18px;
} */

/* =========
/tab（CATEGORY） SP
========= */

/* =========
tab（CATEGORY） PC
========= */

/* @media screen and (min-width:769px){ */

/* 横並びに */
/* .cl_table_contents ul{
    display: inline-block;
}

.cl_table_contents li{
    display: inline-block;
} */
/* /横並びに */

/* .cl_table_contents li{
        width:120px;
        margin-left: 30px;
        margin-right: 30px;
    }

} */

/* =========
/tab（CATEGOLY） PC
========= */

/* =================
/tab（目次）
================= */

/* ==========================================
modal window
========================================== */

/* .content{
    display: inline-block;
}

.modal{
    display: none;
    
    position: fixed;
    top: 0;
    width: 100%;
} */
/* height: 100vh; */

/* .modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
}

.modal_contentlist{
    display: inline-block;
} */

/* ========================
modal img
========================*/
/* .modal__content{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.modal__content img,
.content img{
    width:200px;
    height: auto;
}

.cd_jacket{
    width:60%;
    margin-left: auto;
    margin-right: auto;
} */

/* ========================
modal img
========================*/

/* ==========================================
/modal window
========================================== */

/* =================
slider
================= */

/* .adagio_album_img{
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
}

.slider li{
    list-style: none;
}

.wrap{
    margin-bottom: 20px;
}

.wrap .inner{
    width:100%;
    margin-right: auto;
    margin-left: auto;
}

.bx-pager{
    display: none;
}

.inner .bx-prev{
    float: left;
}

.inner .bx-next{
    float: right;
} */

/* .bx-wrapper{
    box-shadow: none;
    margin:0;
    padding:0;
    border:none;
    background:none;
} */

/* @media screen and (min-width:769px){

    .wrap .inner{
        width:600px;
        margin-right: auto;
        margin-left: auto;
    }
} */

/* =================
/slider
================= */

/* =================
spotify YouTube general
================= */

/* .iframe_wrapper{
    text-align: center;
} */

/* =================
/spotify YouTube general
================= */

/* =================
spotify
================= */

/* .spotify{
    width:300px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 66px;
}

.mt_spotify{
    margin-top: 80px;
}

@media screen and (min-width:769px){
    
    .spotify{
    width:600px;
    }
} */

/* =================
/spotify
================= */

/* =================
photogallery click exchange "fuwa"
================= */

/* #gallery_mainimg{
    width:100%;
}

#gallery_subimg{
    width:100%;
    margin-top: 36px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#gallery_subimg ul{
    width:100%;
    display: inline-block;
}

#gallery_subimg li{
    width:25%;
    display: inline-block;
}

#gallery_subimg li img{
    width:100%;
    height: auto;
}

#gallery_subimg li:last-child{
    margin-right: auto;
}

@media screen and (min-width:769px){
    #gallery_subimg li{
        width:20%;
        display: inline-block;
    }
} */

/* =================
/photogallery click exchange "fuwa"
================= */