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

body{
	margin: 0;
}

body{
	margin: 0;
}

.sticky-container{
	margin: 0;
	font-family: "Noto Serif JP", serif;
}

.sticky-container img{
	display: block;
	line-height: 0;
}

.pc-box{
	display: none;
}

.wrapper{
	width: 100%;
	margin: 0 auto;
	background-color: #fff;
}

.mv{
	margin: 0 auto 10%;
}

.mv p{
	text-align: center;
	font-size: 0.8rem;
	line-height: 1.8;
	margin: 10% auto;
}

@media(min-width:750px){
	.sticky-container{
		display: flex;
		justify-content: center;
		column-gap: 20px;
		background-color: #f9f9f9;
	}
	
	.pc-box{
		position: sticky;
        left: 0;
        top: 0;
        display: flex;
        width: 30%;
        height: 100vh;
        justify-content: center;
        align-items: center;
	}
	
	.pc-box__left img{
		width: 39vh;
	}
		
	.wrapper{
		width: 36%;
		margin: 0;
	}
	
	.mv p{
		font-size: 0.85rem;
		line-height: 1.9;
	}
	
	.pc-box__right{
		width: 90%;
	}
	
	.pc-box__right ul{
		width: 80%;
		margin: 0 auto;
		padding: 0;
		list-style: none;
		border-top: solid 1px #282828;
	}

	.pc-box__right ul li a{
		display: block;
		color: #282828;
		text-decoration: none;
		line-height: 3.5;
		border-bottom: solid 1px #282828;
		font-size: 16px;
		position: relative;
		box-sizing: border-box;
		padding-left: 3%;
	}

	.pc-box__right ul li a:after{
		display: inline-block;
		position: absolute;
		top: 50%;
		right: 5%;
		right: 15px;
		width: 6px;
		height: 6px;
		border-top: 1px solid #282828;
		border-right: 1px solid #282828;
		content: "";
		transform: translateY(-50%)  rotate(135deg);
	}
}

/* メニュー全体の枠線とレイアウト */
.wrapper ul {
    padding: 15px 0; /* 上下の余白 */
    list-style: none;
    display: flex;
    justify-content: space-around; /* 項目を均等に配置 */
    align-items: center;
    border-top: 1px solid #999; /* 上の細い線 */
    border-bottom: 1px solid #999; /* 下の細い線 */
	width: 95%;
	margin: 10% auto;
}

/* 各メニュー項目（li）のスタイル */
.wrapper ul li {
    display: flex;
    align-items: center;
    position: relative;
    flex-grow: 1;
    justify-content: center;
}

/* リンクテキストのスタイル */
.wrapper ul li a {
    text-decoration: none;
    color: #333; /* 文字の色 */
    font-size: 0.85rem; /* 文字の大きさ */
    letter-spacing: 0.05em; /* 文字の間隔を少し広げる */
    display: flex;
    flex-direction: column; /* 文字と矢印を縦に並べる */
    align-items: center;
    line-height: 1.4;
}

/* テキストの下にある矢印（∨）の再現 */
.wrapper ul li a::after {
    content: "∨"; /* 矢印の文字 */
    font-size: 10px; /* 矢印を少し小さく */
    color: #666; /* 矢印の色 */
    margin-top: 2px; /* 文字との間の隙間 */
    font-family: sans-serif; /* 矢印をすっきり見せるためゴシック体に */
    transform: scaleX(1.2); /* 矢印を少し横に広げて画像に近づける */
}

/* 項目の間にあるスラッシュ（/）の配置 */
/* 「最後の項目（:last-child）以外（:not）」の右側に線を引く設定 */
.wrapper ul li:not(:last-child)::after {
    content: "/";
    position: absolute;
    right: 0; /* 右端に配置 */
    color: #ccc; /* スラッシュの色（少し薄め） */
    font-size: 14px;
}



.main-contents{
	width: 90%;
	margin: 10% auto;
}

.contents-inner{
	padding-top: 14%;
	margin: 0 auto 10%;
}

.inner__top{
	margin: 0 auto 5%;
	text-align: center;
}

.inner__top h1{
	text-align: center;
	font-size: 2.0rem;
	margin: 1% auto;
	display: inline-block;
	position: relative;
	padding-right: 40px;
	color: #fe7421;
}

.inner__top h1::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%); /* 縦方向の中央揃え */
	width: 30px;  /* アイコンの横幅 */
	height: 30px; /* アイコンの縦幅 */
	
	/* 💡 ここにお好きなSVGのコードを background-image として入れます */
	background-size: contain;
	background-repeat: no-repeat;
}

.inner__top .icon-cool::after {
	background-image: url("../SVG/icon_01.svg");
}

.inner__top .icon-heat {
	padding-right: 45px;
}

.inner__top .icon-heat::after {
	background-image: url("../images/heat.jpg");
	width: 40px;  /* アイコンの横幅 */
	height: 40px; /* アイコンの縦幅 */
}

.inner__top .icon-sweat::after {
	background-image: url("../SVG/icon_02.svg");
}

.inner__top .icon-uv::after {
	background-image: url("../SVG/icon_03.svg");
}


.inner__top p{
	font-size: 0.9rem;
	margin: 1% auto;
	text-align: center;
	letter-spacing: 1px;
}

.main-img{
	margin: 5% auto;
}

.main-img img{
	border-radius: 5px;
}

.inner-product{
	margin: 0 auto 5%;
	background-color: #FFD4BA;
	box-sizing: border-box;
	padding: 3%;
}

.inner-product p{
	text-align: center;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.4;
	margin: 2% auto;
}

.inner-product p:after{
	content: 'tax in';
	font-size: 0.9rem;
	margin-left: 3px;
}

.inner-product .all{
	width: 40%;
	margin: 3% auto;
	line-height: 1.3;
	font-size: 1.1rem;
}

.copy{
	font-size: 0.8em;
	line-height: 2;
	margin: 5% auto;
	text-align: center;
}

.inner-other{
	margin: 15% auto;
}

.other__top{
	margin: 0 auto 3%;
	text-align: center;
}

.other__top h1{
	position: relative;
	text-align: center;
	font-size: 2.0rem;
	margin: 1% auto;
	display: inline-block;
	padding-top: 15px;
}

.other__top h1::before {
	content: "接触\A冷感";  /* 入れたい文字 */
	white-space: pre-wrap;
	position: absolute;
	
	/* 🚩 位置の調整（h1の左上を基準に配置） */
	top: -10px;         /* 上方向のズレ具合（マイナスで上へ） */
	left: -50px;        /* 左方向のズレ具合（マイナスで左へ） */
	
	/* 🚩 丸のデザインと文字の装飾 */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;        /* 丸の横幅 */
	height: 50px;       /* 丸の縦幅（縦横を同じにして正方形に） */
	border-radius: 50%; /* 完全に丸くする */
	background-color: #FFD4BA; /* 丸の背景色（例：薄い水色） */
	color: #000;     /* 文字の色（例：濃い青） */
	font-size: 0.7rem;  /* 丸の中の文字サイズ（小さめがおすすめ） */
	font-weight: bold;  /* 文字を太字に */
	line-height: 1.2;   /* 改行時の行間調整 */
	
	/* 💡 好みで少し傾けたい場合は以下を追加（355度＝左に5度傾く） */
	transform: rotate(355deg); 
}

.other__top .cool::before {
	content: "接触\A冷感";
}

.other__top .heat::before {
	content: "遮熱";
}

.other__top .sweat::before {
	content: "汗染み\A軽減";
}

.other__top .uv::before {
	content: "UV CUT";
}

.other__top p{
	font-size: 0.9rem;
	margin: 1% auto;
	text-align: center;
}

.other-item{
	display: flex;
	column-gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.other-iten__box{
	width: calc(50% - 10px);
}

.other-iten__box .inner-product{
	background-color: #fff;
	padding: 0;
	margin: 2% 0;
}

.other-iten__box .inner-product p{
	font-size: 0.75rem;
}

.other-iten__box .inner-product p:after{
	content: 'tax in';
	font-size: 0.6rem;
	margin-left: 3px;
}

.other-iten__box .inner-product .all{
	width: 60%;
	margin: 5% auto;
	line-height: 1.5;
	font-size: 0.95rem;
}


.all{
	display: block;
	width: 80%;
	margin: 15% auto 15%;
	text-align: center;
	background-color: #282828;
	color: #fff;
	font-size: 1.4rem;
	text-decoration: none;
	position: relative;
	line-height: 2.3;
}

/*.all:after{
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 5px;
	height: 5px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	content: "";
	transform: translateY(-50%) rotate(45deg);
}
*/