@charset "UTF-8";

body.project_single .size_badge{
z-index: 999;
}

:root{
    --ph-line:#5A7FF7;
    --ph-handle-core:9px;
    --ph-handle-hit:26px;
}



/* SP デバッグ情報 */
body.project_single #ph-info {
position: fixed;
top: 35px;
left: 4px;
z-index: 1000;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

font-size: 8px;
color: #fff;
white-space: nowrap;

mix-blend-mode: difference;
}


body.project_single #ph-info .ph-info-label {
display:inline-block;
margin:0 4px 0 0;
}

body.project_single #ph-info .ph-info-val {
display:inline-block;
width:48px;
text-align:left;
}



.single_project_layout {
margin: 0;
padding: 0;

width: 100%;
height: auto;

}


/* 配置台。position:relative と高さが必須。 */
.stage_project_single{
position:relative;
width:100%;
overflow: visible;
background:transparent;

-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}



/* ==== placeholder 見た目 ==== */
body.project_single .ph_box{
position:absolute;
top:0;
left:0;
transform-origin:center center;
z-index:10;
box-sizing:border-box;
border:1px solid var(--ph-line);

will-change:transform,width,height;
cursor:move;
}

  /* fill box は選択時だけ枠・バッテンを表示（非選択時は枠なし） */
  .ph_box.ph_fill:not(.is_selected){ border-color:transparent; }
  .ph_box.ph_fill:not(.is_selected) .ph_cross{ display:none; }
  .ph_img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:block;
    user-select:none; -webkit-user-drag:none;
    pointer-events:none; opacity:0;
    transition:opacity .3s ease;
  }
  .ph_img.is_shown{ opacity:1; }
  .ph_cross{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
  .ph_cross line{ stroke:var(--ph-line); stroke-width:1; vector-effect:non-scaling-stroke; }
  .ph_handle{
    position:absolute; width:var(--ph-handle-hit); height:var(--ph-handle-hit);
    transform:translate(-50%,-50%); background:transparent; z-index:2;
    display:none;   /* 選択中だけ表示 */
  }
  .ph_box.is_selected .ph_handle{ display:block; }
  .ph_handle::before{
    content:''; position:absolute; left:50%; top:50%;
    width:var(--ph-handle-core); height:var(--ph-handle-core);
    transform:translate(-50%,-50%);
    background:#fff; border:1px solid var(--ph-line); box-sizing:border-box;
  }
  .ph_handle_nw.is_active,.ph_handle_se.is_active{ cursor:nwse-resize; }
  .ph_handle_ne.is_active,.ph_handle_sw.is_active{ cursor:nesw-resize; }
  .ph_handle_n.is_active,.ph_handle_s.is_active{ cursor:ns-resize; }
  .ph_handle_e.is_active,.ph_handle_w.is_active{ cursor:ew-resize; }


/*選択時、バッテン非表示*/
.stage_project_single .ph_box.is_selected .ph_cross{
  display: none;
}



/* ----------------------------------------------------------
   Swiper 初期化フェード
   ---------------------------------------------------------- */
.swiper { opacity: 0; }
.swiper.is-initialized { opacity: 1; transition: opacity 1s ease; }



/*スマホで、縦位置画像で1枚しかない場合はswiperは起動されないがcssを変更する必要あり*/
@media screen and (max-width: 767px) {

  .single_project_layout .my-media-viewer.is_single_portrait .swiper-wrapper {
    display: block;
    height: auto;

  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  }

  .single_project_layout .my-media-viewer.is_single_portrait .swiper-slide {
    width: 100%;
    height: auto;
  }
  .single_project_layout .my-media-viewer.is_single_portrait .swiper-slide picture {
    display: block;
    width: 100%;
  }
  .single_project_layout .my-media-viewer.is_single_portrait .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

.single_project_layout .my-media-viewer.is_single_portrait {
height: auto !important;
margin-top: 0px;
margin-right: 10px !important;
margin-left: 10px !important;
width: calc( 100% - 20px );
}

}




/* BACK TO INDEX */
.back_to_index {
display: none;
visibility: hidden;
position: fixed;
z-index: 9;
top: 70px;
left: 3px;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

/*FONT 375px計算*/
font-size: 10px;
font-size: 2.6666667vw;
font-size: clamp(9px, 2.6666667vw, 11px);

/*FONT 375px計算*/
font-size: 11px;
font-size: 2.9333333vw;
font-size: clamp(10px, 2.9333333vw, 12px);

color: #fff;

font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: 0.0em;

transform: translateZ(0);
-webkit-transform: translateZ(0);

text-transform: uppercase;
mix-blend-mode: difference;

/*選択禁止*/
-webkit-touch-callout: none;
-webkit-user-drag: none;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
}

.back_to_index.is-visible {
/* JSからクラスが付与されたら即座に表示 */
display: block;
visibility: visible;
}


.back_to_index a {
position: relative;
inset: 0;
color: #fff;
padding: 15px 40px 50px 0;
touch-action: manipulation; /* スマホのタップ遅延を解除 */
}

.back_to_index .hover_shffule {
display: inline-block;
position: relative;
z-index: 0;
pointer-events: none;
white-space: nowrap;
}

.back_to_index a:hover{
color: #fff;
}

.back_to_index a:visited{
color: #fff;
}




/* ----------------------------------------------------------
レイアウト基本
---------------------------------------------------------- */
/* 写真エリア基本 */
.photograph_layout {
position: relative;
width: 100vw;
margin: 0;
padding: 0;
text-align: left;

/*選択禁止*/
-webkit-touch-callout: none;
-webkit-user-drag: none;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
}

/* Swiper外の画像用（古いレイアウト）。Swiper内の .slide-media は別途100%指定。 */
.photograph_layout img:not(.slide-media) {
width: 100%;
height: auto;
}


/* SP swier起動せず、縦位置に画像を羅列するとき */
.single_project_layout .itiretu_wide {
width: calc(100% - 10px);
margin: 0 auto 5px auto;
}

.single_project_layout .itiretu_wide:first-child{
margin: 5px auto 5px auto;
}

/* 動画エリア（普通） */
#main_works_movie {
position: relative;
width: 94vw;
margin: 0 auto 0 auto;
padding: 20vh 0 20px 0;
text-align: center;
}

#main_works_movie .movie_basic {
position: relative;
width: 94vw;
margin: 0 auto;
}

/* 動画エリア（100%） */
#main_works_movie_100per {
position: relative;
width: 100vw;
margin: 0;
text-align: center;
background: #fff;
overflow: hidden;
}

/* 動画エリア（100%）罫線 */
#main_works_movie_100per::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 86vw;
max-width: 1200px;
height: 1px;
background: #eee;
}

#main_works_movie_100per .movie_basic {
position: relative;
width: calc(100vw + 4px);
height: auto;
margin: 0 auto;
}

/* Swiperエリア（my-media-viewer）上下余白 */
.my-media-viewer {
padding-top: 0px !important;
padding-bottom: 0px !important;
box-sizing: border-box !important;
}


/* ----------------------------------------------------------
テキストエリア
---------------------------------------------------------- */
.single_project_layout .info_area {
position: relative;
z-index: 999;
width: 94vw;
margin: 25px auto 10px auto;

mix-blend-mode: difference;
pointer-events: none;
user-select: none;
}



/*日本語　 SPの作品タイトル */
.single_project_layout h1.single_works_h1_sp {
position: relative;
width: 100%;
margin: 0;
padding: 0;
text-align: left;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

/*FONT 375px計算*/
font-size: 12px;
font-size: 3.2vw;
font-size: clamp(11px, 3.2vw, 13px);


color: #fff;
line-height: 1.1;

font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.02em;

}





/* 見出し Statement Information */
.tf-source.src1{
margin: 0 0 8px 0;
padding: 0;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

/*FONT 375px計算*/
font-size: 11px;
font-size: 2.9333333vw;
font-size: clamp(10px, 2.9333333vw, 12px);


line-height: 1.3;
color: #fff;

font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: 0.0em;
}





.tf-source.src3{
margin: 0 0 8px 0;
padding: 0;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

/*FONT 375px計算*/
font-size: 11px;
font-size: 2.9333333vw;
font-size: clamp(10px, 2.9333333vw, 12px);


line-height: 1.3;
color: #fff;

font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.02em;
}


/* 日本語ステートメント */
.single_project_layout .japanese_statement {
width: 100%;
margin: 15px auto 0 auto;
}


.single_project_layout .japanese_statement p {
width: 100%;
margin: 0 0 14px 0;

/* Noto Sans - Google */
font-family: YakuHanJPs, "swiss-721-bt","Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;


/*FONT 375px計算*/
font-size: 10px;
font-size: 2.6666667vw;
font-size: clamp(9px, 2.6666667vw, 11px);

line-height: 1.6;
color: #fff;
}





/*英語
--------------------------------------------------------------------------------*/
/* SPの作品タイトル */
.single_project_layout h1.single_works_h1_sp.english {
position: relative;
width: 100%;
margin: 0;
padding: 0;
text-align: left;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

/*FONT 375px計算*/
font-size: 13px;
font-size: 3.4666667vw;
font-size: clamp(12px, 3.4666667vw, 14px);

color: #fff;
line-height: 1.1;

font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.02em;
}





/* 英語ステートメント */
.single_project_layout .english_statement {
width: 100%;
margin: 20px auto 0 auto;
padding: 0;
text-align: left;
}


.single_project_layout .english_statement p {
width: 100%;
margin: 0 0 12px 0;
padding: 0;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

/*FONT 375px計算*/
font-size: 12px;
font-size: 3.2vw;
font-size: clamp(11px, 3.2vw, 13px);


color: #fff;
line-height: 1.3;

font-feature-settings: "liga" 1, "pnum" 1;
font-feature-settings: "kern" 1, "liga" 1;
letter-spacing: 0.0em;
}




/* 作品情報 */
.single_project_layout .works_information {
margin: 30px 0 0 0;
padding: 0;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

/*FONT 375px計算*/
font-size: 11px;
font-size: 2.9333333vw;
font-size: clamp(10px, 2.9333333vw, 12px);

color: #fff;
line-height: 1.4;

font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.01em;
}












/* ----------------------------------------------------------
   1-5. ユーティリティ
   ---------------------------------------------------------- */


/* タップハイライト・選択禁止 */
.single_project_layout a,
.single_project_layout .swiper ~ a {
-webkit-tap-highlight-color: transparent;

-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}

.single_project_layout * {
-webkit-tap-highlight-color: transparent;
}

/* スクロールパララックス用 keyframes */
@keyframes swiperParallax {
from { transform: translateY(0); }
to   { transform: translateY(0); }
}




/* ----------------------------------------------------------
   2-2. Swiper本体　スマホ
   ---------------------------------------------------------- */

/* Swiper本体：左25px余白（margin-leftで確保。フリックしても常に維持）スマホ　 */
.single_project_layout .swiper {
position: relative;
width: calc( 100% - 22px );
margin-left: 22px;
height: 89vh;
height: 89svh;
overflow: hidden;
}

.single_project_layout .swiper-wrapper {
height: 100%;
align-items: center;
transition-timing-function: linear;
}

/* 各スライド：width:auto !important でSwiperのインラインwidthを上書き */
.single_project_layout .swiper-slide {
width: auto !important;
height: 100% !important;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.single_project_layout .swiper-slide picture {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: auto;


  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* 画像：高さ100%、幅は実寸 */
.single_project_layout .slide-media {
display: block;
height: 100%;
width: auto;
max-width: none;
object-fit: contain;
}


/* ----------------------------------------------------------
   2-3. 非表示要素
   ---------------------------------------------------------- */

/* カウンター・カーソル */
.single_project_layout .swiper-counter,
.single_project_layout .swiper-cursor-prev,
.single_project_layout .swiper-cursor-next {
display: none !important;
}

/* 矢印・ページネーション */
.single_project_layout .swiper-button-next,
.single_project_layout .swiper-button-prev,
.single_project_layout .swiper-pagination {
display: none !important;
}

/* +INFO トグル */
.single_project_layout .info_toggle {
display: none !important;
}









/*
PC　スマホ終了
======================================================================================================================== */
@media screen and (min-width: 768px) {


/* PC デバッグ情報 */
body.project_single #ph-info {
position: fixed;
top: 35px;
left: 10px;
z-index: 1000;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

font-size: 9px;
color: #fff;
white-space: nowrap;

mix-blend-mode: difference;
}


body.project_single #ph-info .ph-info-label {
display:inline-block;
margin:0 4px 0 0;
}

body.project_single #ph-info .ph-info-val {
display:inline-block;
width:48px;
text-align:left;
}
/* PC デバッグ情報 */






.single_project_layout {
margin: 0;
padding: 0;

width: 100%;
height: auto;
min-height: 120vh;
}


/* INFO テキストエリア */
.single_project_layout .info_area {
width: auto;
margin: 0;
padding:0;
}







/* ----------------------------------------------------------
   3-2. 動画エリア
   ---------------------------------------------------------- */

/* 動画（普通） */
#main_works_movie {
position: absolute;
top: 80px;
right: 45px;
width: 70vw;
margin: 0;
padding: 0;


top:80px;
right: 0;
left: 0;
margin: auto;
}

.single_project_layout #main_works_movie .movie_basic {
display: block;
position: relative;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
margin: 0;
padding: 0;
}

/* 動画（100%） */
#main_works_movie_100per {
position: relative;
width: 100vw;
margin: 0;
text-align: center;
background: #fff;
overflow: hidden;
}

#main_works_movie_100per::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 86vw;
max-width: 1200px;
height: 1px;
background: #eee;
}

#main_works_movie_100per .movie_basic {
position: relative;
width: calc(100vw + 4px);
height: auto;
margin: 0 auto;
}



/*テキストエリアーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/* 日本語ステートメント */
.single_project_layout .japanese_statement {
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}


.single_project_layout .japanese_statement p {
width: 100%;
margin: 0 0 13px 0;

/* Noto Sans - Google */
font-family: YakuHanJPs, "swiss-721-bt","Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;

font-size: 10px;

color: #fff;
line-height: 1.4;

letter-spacing: 0.0em;
font-feature-settings: "liga" 1, "pnum" 1;
}



/* 英語ステートメント */
.single_project_layout .english_statement {
width: 100%;

margin: 0;
padding: 0;
box-sizing: border-box;
}



.single_project_layout .english_statement p {
width: 100%;
margin: 0 0 13px 0;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

font-size: 11px;
line-height: 1.2;
color: #fff;

letter-spacing: -0.01em;
font-feature-settings: "liga" 1, "pnum" 1;
}




/*Statement Info*/
.single_project_layout .title_info{
margin: 0 0 8px 0;
padding: 0;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

font-size: 11px;
line-height: 1.1;
color: #fff;

letter-spacing: -0.02em;
font-feature-settings: "liga" 1, "pnum" 1;
}



/* 作品情報 */
.single_project_layout .works_information{
width: 100%;
padding: 15px 0 0 0;
margin: 0;
box-sizing: border-box;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

font-size: 10px;
line-height: 1.2;
color: #fff;

letter-spacing: -0.02em;
font-feature-settings: "liga" 1, "pnum" 1;
}


.single_project_layout .works_information a{
color: #fff;
}








/*UI PC-------------------------------------------------------------*/
/* BACK TO INDEX（PC版） */
.back_to_index {
display: none;

position: fixed;
z-index: 9;
top: 80px;
left: 13px;
right: auto;

user-select: none;
-webkit-user-select: none;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

font-size: 16px;
color: #fff;
letter-spacing: -0.02em;
font-feature-settings: "liga" 1, "pnum" 1;

mix-blend-mode: difference;
text-transform: uppercase;
}


.back_to_index a {
inset: 0;
color: #fff;
padding: 0;
/* タップ領域を上下左右に広げたい場合 */
inset: -3px;
}




/* イラレ方式
---------------------------------------------------------------------*/
.tf-source{
position:absolute;
z-index: 999;
top: 150px;
left: 10px;
}

/*ベース上書き*/
.tf_box{
mix-blend-mode: difference;
}

.tf_text{
font-size: 10px;/*htmlで指定*/
letter-spacing: -0.01em;
}

.src0{
width:280px;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

line-height: 1.1;
}

.src1{
width:280px;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

line-height: 1.1;
}


.src2{
width:280px;

/* Noto Sans - Google */
font-family: YakuHanJPs, 'Noto Sans JP',　sans-serif;
font-weight: 800;
font-optical-sizing: auto;
font-style: normal;

line-height: 1.4;
}

.src2_english{
width:280px;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

line-height: 1.4;
}


.src3{
width:280px;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

line-height: 1.1;
}

.src4{
width:280px;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

line-height: 1.2;
}




} /* 3. PC終了 */