*{
    box-sizing: border-box;
    font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
    color: #707070;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

a{
    text-decoration: none;
}

body{
    display: flex;
    flex-direction: column;
    align-items: center;
	overflow-x: hidden;
}

header{
	background-color: rgba(34,34,34);
    height: 60px;
    display: flex;
    align-items: center;
	justify-content:space-between;
    padding:0 12px;
    width: 100%;
	position:fixed;
	top:0;
	z-index:100;
}

#header-text{
    font-size: 24px;
    font-weight: 900;
    color: white;
}

#post-39{
	margin-top:60px;
	padding-bottom:120px;
}

main{
    width: 393px;
}

#KV{
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

#KV-img{
    margin-right: 183px;
    display: block;
    height: 502px;
}

#KV-text{
    font-size: 34px;
    font-weight: 900;
    position: absolute;
    top: 74px;
    color: white;
}

/* --- CTA ボタン --- */
.thumb-good{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  row-gap:3vw;
  background:#fff;
  font-size:3vw;
  font-weight:600;
  border:solid 1px #CCCCCC;
  border-radius:10px;
  cursor:pointer;
  transition:.2s;
  width:58.5vw;
  height:22.9vw;
  box-shadow: rgba(11, 42, 58, .08) 0 8px 8px 8px;
  position:fixed;
  top:75vh;
  right:2.8vw;
	z-index:10000;
}

.wp_post_btn_900001{
	background-color:#097BFF;
	display:flex !important;
	column-gap:1vw;
	justify-content:center;
	align-items:center;
	width:42vw;
	height:9.2vw;
	padding:0 !important;
}

.wp_post_btn_900001>.label{
	color:#fff;
	font-size:3vw !important;
	font-weight:600;
}

/* --- 質問文（任意） --- */
.survey-question{
  font-weight: 600;
  text-align: center;
  color:#707070;
  font-size:3vw;
}

/* ホバー時・クリック後（active クラスは WP Ulike 自動付与） */
.thumb-good .survey-cta:hover,
.thumb-good .survey-cta.active{
  background:#097BFF;
}

/* 絵文字のサイズ調整（必要なら） */
.thumb-good .survey-cta .icon{
  font-size:3vw;
  line-height:1;
}

/* フロントのカウント非表示 */
.survey-good .count-box,
.survey-good .wp_ulike_counter_up{ display:none!important; }

/* クリック前の基本状態：折りたためるようにトランジションを定義 */
.wpulike.thumb-good{
  overflow: hidden;
  transition: opacity .45s ease, max-height .45s ease, margin .45s ease;
}

@media screen and (min-width:769px) {
	/* --- CTA ボタン --- */
.thumb-good{
  row-gap:1.5vw;
  font-size:3vw;
  width:30vw;
  height:12.5vw;
  top:70vh;
  right:3vw;
	max-width:380px;
	max-height:157px;
}

.wp_post_btn_900001{
	column-gap:1vw;
	width:22vw;
	height:5vw;
	max-width:319px;
	max-height:64px;
}

.wp_post_btn_900001>.label{
	font-size:min(1.5vw,20px) !important;
}

/* --- 質問文（任意） --- */
.survey-question{
 font-size:min(1.5vw,20px) !important;
}

/* 絵文字のサイズ調整（必要なら） */
.thumb-good .survey-cta .icon{
 font-size:min(1.5vw,20px) !important;
}
}



#about{
    margin:40.6px 0 80px;
    padding: 0 11px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.66;
    display: flex;
    flex-direction: column;
    row-gap:20px;
}

.about-text{
    word-break: keep-all;
}

#top-back-btn{
	position:fixed;
	bottom:50px;
	right:10px;
	z-index:100;
	transition:.3s;
	opacity:0;
	transition: opacity 0.1s linear;
	transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

#top-back-img{
	display:block;
	width:50px;
	height:auto;
	aspect-ratio:1/1;
}

#items{
    padding: 0 21.5px;
}

#items-header{
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 40px;
}

#items-list{
    display: flex;
    flex-direction: column;
    row-gap: 50px;
}

.items-element{
    position:relative;
}

.items-element>a{
    display: flex;
    flex-direction: column;
    row-gap: 11px;
}

.item-thumbnail{
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    position: relative;
	background-color:white;
}

.items-element::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* 初期状態は透明 */
    transition: background-color 0.3s ease; /* 好みのタイミングに調整 */
    pointer-events: none; /* オーバーレイがクリックなどの操作をブロックしないように */
  }
  
  /* ホバー時にオーバーレイが暗くなる */
  .items-element:hover::before{
    background-color: rgba(0, 0, 0, 0.3); /* 透明度は好みで調整 */
	  z-index:2;
  }

.item-img{
    display: block;
    width: 100%;
    object-fit: contain;
    cursor: pointer;
}

.item-name{
    font-size: 14px;
    font-weight: 600;
    line-height: 1.66;
}

.small-thumbnail,#last-thumbnail{
        display: flex;
        justify-content: center;
        align-items: center;
    }

#small-img{
        width: 135%;
        margin-right: 20%;
    }

    #small-img2{
        width: 130%;
    }

    #small-img3{
        width: 115%;
    }

.cost{
    font-size: 12px;
    font-weight: 600;
}

button{
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}

.btn{
    min-width: 250px;
    height: auto;
	background-color: var(--cocoon-custom-background-color, #222) !important;
    font-size: 14px;
	padding:7.5px 0 !important;
    font-weight: 600;
	position:fixed !important;
	bottom:57px;
	left: 50%;
    transform: translateX(-50%);
	border-radius:30px !important;
	z-index:100;
	opacity:0;
}

.notranslate{
	color:white !important;
}

.btn:hover{
  transform: translateX(-50%) scale(1.2);
  /* または、transform-origin: center center; も念のため指定 */
  transform-origin: center center;
}

#top-back-btn:hover{
	transform: scale(1.2,1.2);
	filter: brightness(0.7);
}

.arrow-img {
    position: absolute;
    display: block;
    width: 40px;
    height: auto;
    aspect-ratio: 1 / 1;
    top: 0px;
    bottom:-1.5px;
    right: -1.5px;
    margin: auto;
}

.btn>font{
	display:block;
	width:200px;
	margin:auto;
	text-align:center;
}

.btn>font>font{
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.btn:hover{
    filter: brightness(0.7);
}

footer{
    height: 40px;
    background-color: rgba(34,34,34);
    width: 100vw;
    padding:0 12px;
    display: flex;
    align-items: center;
	justify-content:space-between;
	z-index:100;
}

#footer-text{
    color: white;
    font-size: 18px;
    font-weight: 600;
}

#copyright{
	color:white;
	font-size:8px;
}

.like-comment-container{
	position:absolute;
	right:10px;
	top:313px;
	z-index:99;
	height:30px;
	display:flex;
	column-gap:5px;
	align-items:center;
}

.wpulike{
	padding:0;
	line-height:1;
}

.comment-link-btn{
	position:relative;
}

.comment-link-img{
	display:block;
	width:auto;
	height:29px;
	aspect-ratio:1/1;
}

.comment-count{
	display:block;
	width:fit-content;
	height:12px;
	font-size:12px;
	font-weight:bold;
	position:absolute;
	inset:0;
	margin:auto !important;
}

.wpulike-heart .wp_ulike_general_class{
	box-shadow:none;
	padding:0;
	display:block;
	position:relative;
}

.count-box.wp_ulike_counter_up{
	padding:0;
	position:absolute;
	display:block;
	width:fit-content;
	height:12px;
	inset:0;
	margin:auto;
	line-height:1;
	font-size:12px;
	padding-top:1px;
}

.wp_ulike_is_liked>.count-box {
    color: #fff !important;
}

.wpulike-heart .wp_ulike_put_image:after {
	width:30px;
	height:30px;
}

.wpulike-heart button.wp_ulike_btn {
    background: 0 0;
    padding: 15px;
}


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

    header{
        width: 100vw;
        padding:0 2vw;
    }

	#post-39{
		margin-top:60px;
		padding-bottom:13vw;
	}

    main{
        width: 100vw;
    }

    #KV-img{
        margin-right: 0;
        width: 100vw;
        height: auto;
    }

    #KV-text{
        font-size: 6.5vw;
        top: 13vw;
    }

    #about{
        margin: 6vw 0 10vw;
        padding: 0 2.8vw;
        font-size: 1.5vw;
        row-gap: 3vw;
    }
	
#top-back-btn{
	bottom:50px;
	right:2.5vw;
}

#top-back-img{
	width:7.5vw;
	max-width:70px;
}

    #items{
        padding: 0 6vw;
    }

    #items-header{
        font-size: 3vw;
        margin-bottom: 3vw;
    }

    #items-list,#hidden-items-list{
        display: flex;
        flex-direction:row;
        column-gap: 4vw;
        row-gap: 4vw;
        padding: 0 1vw;
        flex-wrap: wrap;
    }

    .items-element{
        width: calc((100% - 2 * 4vw) / 3);
    }
	
	.items-element>a{
		row-gap: 1vw;
	}

    #small-img-name{
        margin-top: 0;
    }

    .item-name{
        font-size: 1.1vw;
    }

    .cost{
        font-size: 0.9vw;
    }

    .btn{
        width: 420px;
        height: auto;
        aspect-ratio: 100/11;
        font-size: 16px;
		bottom:50px;
		min-width:unset;
    }
	
	.arrow-img {
        right: 0;
        width: 50px;
		bottom:0;
    }

	.btn>font>font{
font-size: 15px !important;
		padding:0 0.5vw;
}
	
	.btn>font{
	width:auto;
	margin:0;
}
    
    footer{
        width: 100vw;
        padding:0 2vw;
    }
	
.like-comment-container{
		top:22.9vw;
	align-items:flex-start;
	}
	
.comment-link-btn{
	height:auto;
}
		
.comment-link-img{
	width:2.4vw;
	height:auto;
}

.wpulike-heart .wp_ulike_put_image:after {
	width:2.5vw;
	height:2.5vw;
}

.wpulike-heart button.wp_ulike_btn {
    background: 0 0;
    padding:1.2vw 1.25vw;
}
	
.count-box.wp_ulike_counter_up{
	height: 1vw;
    font-size: 1vw;
	padding-top:0.1vw;
	}
	
.comment-count {
    height: 1vw;
    font-size: 1vw;
	top:0.1vw;
}
    
}