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

body{
	margin: 0;
}

.sticky-container{
	margin: 0;
}

.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-bg{
	background-color: #F3942A;
}

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

@media(min-width:750px){
	.sticky-container{
		display: flex;
		justify-content: center;
		column-gap: 20px;
		background-color: #F3942A;
	}
	
	.pc-box{
		position: sticky;
        left: 0;
        top: 0;
        display: flex;
        width: 33%;
        height: 100vh;
        justify-content: center;
        align-items: center;
	}
	
	.pc-box__left img{
		width: 45vh;
	}
		
	.pc-box__right img{
		width: 30vh;
	}
		
	.wrapper{
		width: 36%;
		margin: 0;
		box-sizing: border-box;
		padding: 0 1%;
	}
}

/*=================================

			main-contents

==================================*/
.main-contens{
	margin: 10% auto;
}

.flex-box{
	display: flex;
	column-gap: 10px;
}

.contents-inner{
	margin:  0 auto;
}

/* --- 円のスタイル --- */
.circle {
  width: 150px;             /* 円の幅 */
  height: 150px;            /* 円の高さ（幅と同じにして正円にします） */
  background-color: #D9D9D9;   /* 背景色をグレーに設定 */
  border-radius: 50%;       /* 角を丸くして完全な円にします */
  
  /* 中身をど真ん中に配置するための魔法のコード */
  display: flex;
  justify-content: center;  /* 横方向の中央揃え */
  align-items: center;      /* 縦方向の中央揃え */
	margin: 0 auto 5%;
}

/* --- 「？」のスタイルとアニメーション --- */
.question-mark {
  font-size: 50px;          /* 文字の大きさを設定 */
  font-weight: bold;        /* 文字を太字にして目立たせます */
  
  display: inline-block;    /* アニメーションを綺麗に動かすために必要です */
  
  /* 「shake」というアニメーションを0.5秒のスピードで永遠に（infinite）繰り返す */
  animation: shake 3s infinite;
	color: #282828;
}

/* --- 揺れるアニメーションの動き（キーフレーム） --- */
@keyframes shake {
  0% { transform: rotate(0deg); }      /* 最初はまっすぐ */
  25% { transform: rotate(-15deg); }   /* 左に少し傾く */
  50% { transform: rotate(0deg); }     /* まっすぐに戻る */
  75% { transform: rotate(15deg); }    /* 右に少し傾く */
  100% { transform: rotate(0deg); }    /* まっすぐに戻る */
}

.contents-inner p{
	font-size: .7rem;
	text-align: center;
	line-height: 1.5;
}

.sns{
	margin: 10% auto;
}

.sns{
	text-align: center;
	font-size: .8rem;
	line-height: 1.7;
}

.sns ul{
	display: flex;
	padding: 0;
	list-style: none;
	justify-content: center;
	margin: 5% auto;
}

.sns ul li{
	margin: 0 15px;
	line-height: 0;
}

.sns ul li img{
	width: 50px;
	height: auto;
}