@charset "UTF-8";
/* CSS Document */


/*=======================================
共通
=============================*/

/*背景イラスト__________________*/
.area_illustratione{
position: relative;
}

.illustration {
  display: none;
}


@media screen and (min-width: 1500px) {
  .illustration {
     display: block;
     position: fixed;
     width: 150px;
     height: auto;
     opacity: 0.2;
	 z-index: 3;
  }
  
  .illustration.l1{
  left: 0;
  top:40px
  }
  
  .illustration.l2{
   top: 340px;
   left: 50px;
   width: 180px;
  }
  
  .illustration.l3{
   top: 620px;
   left: 0px;
    width: 174px;
  }
  
    .illustration.l4{
   top: 840px;
   left: 50px;
    width: 150px;
  }
  
  .illustration.r1{
  right: 0;
  top:60px;
  }

  
  .illustration.r2{
    top: 290px;
    right: 70px;
  }
  
    .illustration.r3{
    top: 470px;
    right: -50px;
	width: 280px;
  }

    .illustration.r4{
    top: 810px;
    right: 0px;
	width: 180px;
  }
  

  
  .illustration {
  animation: floating-y 5.0s ease-in-out infinite alternate-reverse;
}
}

@keyframes floating-y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}

.area_footer{
position: relative;
z-index:4;
}

.area_top_section {
    margin: 60px 20px 0;
}
/*背景イラスト*/


/*===========================
一覧ページ
=============================*/

.area_section.list_top{
margin: 80px 20px;
}

.list_top .area_box_white {
    max-width: 600px;
	margin: 0 auto;
	}

.ul_list_index li{
margin: 20px auto 0;
width: fit-content;
}

.ul_list_index li a{
display: flex;
align-items: center;
}
.ul_list_index .list_index_icon_area{
width: 90px;
hanging-punctuation: 87px
}

.ul_list_index a .t_green{
width: 142px;
margin-left: 20px;
}

a.ul_list_a{
text-decoration: none;
}

@media (min-width: 992px) {
.ul_list_index .list_index_icon_area{
width: 100px;
}
}

/*===========================
各部門ページ
=============================*/
.area_top_section h1.ttl_green{
text-align: center;
margin-bottom: 10px;
}

.area_list_icon{
width: 53px;
height: auto;
margin: 0 auto 10px;
}

.area_list_icon img{
width:100%;
height: auto;
}

.ttl_list{
display: none;
margin:0 auto 15px ;
font-size: 3.2rem;
font-weight: 300;
color: #29958A;
width: fit-content;
}

/*学生部門のsp版のみ表示*/
.students .ttl_list{
display: block;
}

.btn_area{
display: flex;
justify-content: space-around;
max-width: 560px;
margin: 0 auto;
align-items: center;
flex-wrap: wrap;
}


.btn_area .btn_greenline{
color: #29958A;
width: 47%;
}

.list_category .area_section {
margin: 30px 5px 80px;}

.ttl_greentab{
margin:0 auto 30px;
width:100%;
max-width:560px;
text-align: center;
font-size: 2.4rem;
font-weight: 300;
border-radius: 100px;
letter-spacing: 0;
color: #fff;
background-color: #8AB7A7;
}

/*frame.cssのタイトルからレイアウト変更*/
h1.ttl_green {
    font-size: 1.4rem;
	}

.ttl_greentab {
    margin: 0px auto 20px;
    font-size: 2.0rem;
	}
	
@media screen and (min-width: 992px) {
	.list_category .ttl_greentab{
	margin:0 auto 60px;}

    h1.ttl_green {
        font-size: 2rem;
    }
	
	.ttl_list{
	display: block;
	}
}

/*作品エリア*/

.area_list_wrapper {
  display: flex;
  flex-wrap: wrap;
  gap:0px 10px;
  justify-content: flex-start;
  max-width: 354px;
  margin: 0 auto;
}

.area_list {
  background: #fff;
  border-radius: 20px;
  width: 172px;
  height: 172px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.name {
  position: absolute;
  top: -16px;
  font-size: 1.6rem;
}

.belong {
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #333333;
}

.belong_index {
  margin: 0 auto 14px 10px;
  width: 162px;
}


.area_list_img img {
  width: 100%;
  height: auto;
}

.area_list_text {
  position: absolute;
  bottom: -14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content:flex-end;
  align-items: center;
  padding: 0 5px 0 10px;
  z-index: 1;
}

.area_number{
display: flex;
align-items: center;
}


.area_list_text .number{
  margin: 0 6px 0 0;
  font-size:1.2rem;
  color: #29958A; 
}

.area_number div{
height: 28px;
width: 28px;
}

.area_list_text img {
  width: 100%;
  height:100%;
}

.tab_prize{
margin: 0 auto 0 0;
}

.tab_prize p{
  background-color: #FBC800; 
  color: #000;
  font-size: 1.2rem;
  padding: 0px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.tab_noprize {
  display: none;
}

.right_area {
margin-top: 70px;
}

.area_link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.area_link:hover .area_list {
  transform: translateY(2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  color: #333333;
}

.area_link * {
  pointer-events: none;
}

@media screen and (min-width: 992px) {
	.area_list_wrapper {
	gap:65px 60px;
	max-width: 900px;
	align-items: flex-end;
	}
	
	.right_area {
	margin-top: 0;
	}
	
	.area_list {
	width: 260px;
	height: 260px;
	}
	
	.belong_index {
	width: 250px;
	}
	
	.name {
	font-size: 1.8rem;
	}
	
	.tab_prize p{
	font-size: 1.6rem;
	}
	.area_list_text .number{
	font-size:1.6rem;
	}
}

/*カテゴリーボタン*/
.area_section.list_category{
width: 100%;
margin: 0 auto 80px;
padding: 0 5px;
}

.btn_area.list_category{
margin-bottom: 40px;
}

.ul_list{
display: flex;
justify-content: space-between;
max-width: 450px;
margin: 0 auto;
}

.ul_list li{
width: 62px;
height: 60px;
}

.ul_list li img{
width: 100%;
height: 100%;
}


@media (min-width: 992px) {
.ul_list{
max-width: 530px;
}

.ul_list li{
width: 75px;
height: 72px;
}}


/*======================================
個別作品ページ
=======================================*/
/*画像エリア*/
/*ObitVU 画像デフォルトアイコン*/
.ovviosinfodesktop,
.ovviosinfo,
.ovviosmoverotate {
  /*infoボタンの削除*/
  display: none !important;
}

/*360°ビューワー */
.area_360viewer {
  width: 100%;
}
#presentation1-container-obj-nosize {
  padding-bottom: 100% !important;
}
.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
height: auto!important;
}


.pswp__img{
height: auto!important;
}

/* サムネ */
  .area_list_detail_img{
    margin: 0 0 10px 0;
    padding:30px;
	background-color: #fff;
}

.area_thumbnails {
  display:flex;
  width:100%; 
  align-items: center;
}
.area_thumbnails > .thumbnails{
  flex:1 1 0;
}
.area_thumbnails img{
  padding: 10px;
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

/* 画像エリアPC表示  */
@media (min-width:992px){
   .area_360viewer,
   .area_main_img{
   border: solid 1px #d6f0ee;
   }

  .area_list_detail_img{
    max-width:800px;
    margin:0 auto 10px;
    padding:80px;
    border-radius:20px;
    display:grid;
    grid-template-columns:1fr 160px; 
    align-items:start;
  }

  .area_list_detail_img > .area_zoom{
    height:100%; 
  }

  /* メイン画像側：読み込み前に高さ0で潰れないよう比率を与える */
  .area_main_img{
    width:100%;
    aspect-ratio:1/1;     /* 実際の製品比率に合わせ調整 (例: 4/5, 3/4 等) */
    height:auto;          /* aspect-ratio指定時はheight:autoでOK */
  }
  #presentation1-container{
    width:100%;
    height:100%;
  }

  /* サムネ列を縦並び均等配分 */
  .area_thumbnails{
    flex-direction:column;
    height:100%;          /* グリッド行高（=左カラムの高さ）に揃えて伸ばす */
/*    gap:10px;*/
  }
  .area_thumbnails > .thumbnails{
    flex:1 1 0;           /* 枚数に応じて均等割り */
    min-height:0;         /* オーバーフロー防止 */
    position:relative;
  }
  /* a要素も枠いっぱいに拡張 */
  .area_thumbnails > .thumbnails > a{
    display:block;
    width:100%;
    height:100%;
  }
  .area_thumbnails > .thumbnails img{
    width:100%;
    height:100%;
    object-fit:contain;  
  }
}

/*賞・テキストエリア*/
.list_detail .tab_prize{
margin: 0 auto 20px;
width: fit-content;
}

.area_list_detail_text{
max-width: 800px;
margin: 0 auto;
text-align: center;
position: relative;
}

.list_detail .tab_prize{
margin: 0 auto 20px;
width: fit-content;
}

.area_list_detail_text{
max-width: 800px;
margin: 0 auto;
text-align: center;
position: relative;
}

/*作品一覧ページのposition: absoluteをリセット*/
.area_list_detail_text .name,
.area_list_detail_text .belong{
position: static;
}

.area_list_detail_text .name{
font-size: 2.0rem;
line-height: 4.2rem;
font-weight: 400;
}

.area_list_detail_text .belong{
margin-bottom: 15px;
font-size: 1.4rem;
}

.area_list_detail_text .ttl{
font-size:2.0rem;
color:#29958A;
width:fit-content;
margin: 0 auto 20px;
padding: 0 20px;
text-decoration: underline;
text-decoration-color: rgba(41, 149, 138, 0.4); /* 半透明 (#29958A, 60%) */
text-decoration-thickness: 5px; /* 太さ */
text-underline-offset: -2px;
text-decoration-skip-ink: none;
}

.area_list_detail_text .line_green{
background:transparent;
line-height: 2.8rem;
}

.area_list_detail_text .caption1,
.area_list_detail_text .caption2{
color:#707070;
width: 90%;
margin: 0 auto;
}

.area_list_detail_text .caption2{
margin-bottom: 20px;
}

.area_list_detail_text_02{
margin: 0 20px 60px;
}

.area_list_detail_text_02 .size,
.area_list_detail_text_02 .url{
display: flex;
margin: 0 10px;
}

.area_list_detail_text_02 .nowrap{
white-space: nowrap;
}

.youtube{
max-width: 540px;
margin: 40px auto;
}

.area_artistic_design_text{
margin: 20px 27px;
}

.list_detail .box_sns{
text-align: right;
justify-content: flex-end;
margin: 20px;
}

.list_detail .box_sns a{
margin:5px;
}

.list_detail .box_sns img{
width: 40px;
height: 40px;
}

.list_detail .area_section.list_category {
margin: 80px auto;
}

@media (min-width: 992px) {
.area_list_detail_text_02{
max-width: 800px;
margin: 0 auto 80px;
}

.list_detail .area_box_white{
max-width: 800px;
}

.list_detail .box_sns {
margin: 20px auto 0;
max-width: 800px;
}

.area_artistic_design_text{
max-width: 800px;
padding: 0 35px;
margin: 20px auto 0px;
}

.list_detail .area_box_white p,
.area_artistic_design_text p{
font-size:1.4rem;
line-height: 2.6rem;
}}

/*list・winner共通*/
.area_winner{
margin: 0 auto 30px;
width: fit-content;
}

.area_winner div{
width: 280px;
}

.area_winner img{
width: 100%;
height: auto;
}


.area_winner p{
text-align: center;
color: #AF985A;
font-size: 1.4rem;
}