@charset "UTF-8";

/* 共通 */	
body {
	max-width: 375px;
  height: auto;
	background-color: #FFE6E9;
	font-family: "Kiwi Maru";                 /*テキスト文字*/
	line-height: 1.7;                         /*行の高さの指定*/
	color: #7DB389;
}

/*文字コンテンツ全部中央寄り*/
h1, h2, h3, p {
	text-align: center;
  line-height: 1.7;
}

/*タイトル文字フォント*/
h1, h2 ,h3 {
  font-family: "Kaisei Opti";
}

/*タイトル文字サイズ*/
h1 {
  position: absolute;
  font-size: 250%;
  font-weight: 700;
}

h2 {
  font-size: 175%;
  font-weight: 500;
  padding: 30px 0;
}

h3 {
  font-size: 125%;
  font-weight: 400;
  padding: 15px 0;
}

/* 途中セクションの背景色 */
header, .Catchphrase, .Howto, .merchandise ,footer{
  background-color: #ffffff;
}

.Catchphrase, .Tourplan ,.Installation ,.merchandise {
  padding-bottom: 30px;
} 


main {
  position: relative;
}

section {
  height: auto;
}

/*------------------------------------------------------------*/
/* ファーストビュー */
header {
  width: 100%;
  height: 520px;
  background-image: url(../image/firstview.png);
  background-repeat: no-repeat;
  background-size: auto;
}

.now {
  top: 53px;
  left: 73px;
  transform:skew(15deg,352deg) /*要素を斜めに*/
}

.travel {
  top: 160px;
  left: 55px;
  text-shadow: 2px 2px 0 #ffffff;
  color: #498D58;
  line-height: 2;
}

/* キャッチコピー */
.Catch-text {
  width: 255px;
  margin:  0 auto;            /* 中央寄せ */
  padding: 30px 0;
  line-height: 3;
}

.Event {
  position: relative;
  width: 215px;
  margin: 0 auto;
  text-align: center;
  border: 3px solid #FFE6E9;
  border-radius: 20px;
}

.Event-title {
  position: absolute;
  display: inline-block;
  top: -28px;
  left: 50px;
  padding: 0 15px;
  background: #FFF;
  border: 3px solid #FFE6E9;
  border-radius: 20px;
}

.year ,.dates {
  margin: 0 20px;
}

.year {
  padding-top: 10px;
}

.dates {
  font-size: 125%;
  font-weight: 500;
}

.grape {
  position: absolute;
  top: 1px;
  left: 15px;
}

.stamp {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 200px;
  right: 7px;
  opacity: 0.6;
}

/* ツアープラン紹介 */
.plan {
  width: 255px;
  margin: 15px auto;
  border-radius: 20px;
  text-align: center;
  background-color: #ffffff;
}

.plan > img {
  width: 195px;
  margin: 5px 0;
  border-radius: 20px;
  border: 3px solid #FFE6E9;
}

.plan > p {
  width: 195px;
  margin: 0 auto;
}

/* スタンプラリー参加方法 */
.Step {
  width: 255px;
  margin: 0 auto;
  border-radius: 85px;
  border: 3px solid #FFE6E9;
  text-align: center;
}

.Step > img {
  width: 195px;
  height: 165px;
  margin: 5px 0;
  border-radius: 100px;
  border: 3px solid #FFE6E9;
}

.Step > p {
  width: 225px;
  margin: 0 auto;
  padding: 5px;
  padding-left: 1em;
  text-indent: -1em;
}

.Step-title {
  font-size: 125%;
  font-weight: 500;
  text-align: center;
}

.circle-item {
  width: 18px;
  height: 18px;
  margin: 10px auto;
  line-height: 200px;
  background-color: #FFE6E9;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}

/* スタンプ設置場所 */
.place {
  width: 255px;
  margin: 15px auto;
  border-radius: 20px;
  text-align: center;
  background-color: #ffffff;
}

.slider {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.slide-img {
  width: 195px;
  margin: 0 0 10px;
  border-radius: 20px;
  border: 3px solid #FFE6E9;
}

.button ,.place-list {
  width: 225px;
  margin: 0 auto;
}

.button {
  display: flex;
}

.button-item {
  padding: 0 5px;
}

.place-list {
  text-align: left;
  padding-left: 1em;
  text-indent: -1em;
}

/* スタンプラリー商品 */

.merchandise > p {
  width: 315px;
  margin: 0 auto;
}

.Product-list {
  width: 315px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.Product-item {
  margin: 0 auto;
  padding: 10px;
}

.Product-item > img {
  width: 120px;
  height: 100px;
  border-radius: 45px;
  border: 3px solid #FFE6E9;
}

.Product-attention {
  width: 255px;
  margin: 0 auto;
  padding: 15px 0;
  padding-left: 1em;
  text-indent: -1em;
}

.Product-attention > li {
  padding: 10px 0;
}

/* 注意事項 */
.Precautions-list > h3 {
  text-decoration:underline double #ffffff;
}

.Precautions > p {
  width: 315px;
  margin: 0 auto;
}

.Precautions-list {
  width: 255px;
  margin: 0 auto;
  padding-bottom: 10px;
  padding-left: 1em;
  text-indent: -1em;
}

.Precautions-list > ul > li {
  padding: 10px 0;
}

.Note-illustration{
  display: flex;
  justify-content: center;
  align-items: center;
}

.Note-illustration > img {
  width: 40px;
}

/* フッター */
footer{
  height: 250px;
  background-image: url(../image/footer.png);
  background-color:rgba(255,255,255,0.7);
  background-blend-mode:lighten;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
}

footer > p {
  margin: 40px auto;
}

/* ページトップ */
#page-top {
  position: fixed;
  bottom: 20px;
  right: 5px;
  z-index: 99;
}

.pagetop-icon {
  width: 50px;
  transition: all .3s ease;
  opacity: 0.5;
}