/* IMPORT RESET ================================================== */
@import url("sanitize.css");

/* WEB FONT ====================================================== */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css");

/* 変数設定 ======================================================== */

/*共通のサイズや色を変数で設定
　変数を使う時は数値で入れる箇所を var(--red) のように記載*/
:root{
	/*文字サイズ*/
	--x-small:0.8rem;/*50%*/
	--small:1.2rem;/*75%*/
	--medium:1.6rem;/*100%*/
	--large:2rem;/*125%*/
	--x-large:2.4rem;/*150%*/
	/*色*/
	--red:#c00;
	--blue:#039;
	--mallcolor:#b60081;
}

/* STYLES ======================================================== */

/* ルートのフォントサイズを10pxに設定（1rem=10px）*/
html {
  font-size: 62.5%;
}

/* bodyのフォントサイズを16pxに設定 */
body {
  font-size: 1.6rem;
}

/* MEMO ++++++++++++++++++++++++++++++++
  フォントサイズはremで指定すること
  例）10pxは1rem、12pxは1.2rem
+++++++++++++++++++++++++++++++++++++ */

.font-xs{
  font-size: var(--x-small);
}

.font-s{
  font-size: var(--small);
}

.font-m{
  font-size: var(--medium);
}

.font-l{
  font-size: var(--large);
}

.font-xl{
  font-size: var(--x-large);
}

/*文字色*/
.font-red{
  color: var(--red);
}

.font-blue{
  color: var(--blue);
}

.font-mcolor{
  color: var(--mallcolor);
}


*{
  box-sizing: border-box;
}

body {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  padding: 0;
}

/*下記marginやpadding、widthはサイトデザインに合わせて調整*/

body{
	background: url("../img/bg.png")repeat #f9f8e4;
}

header{
  margin: 0;
  padding: 0;
	
	h1{
		margin: 0;
	}
}

main{
  margin: 0;
  padding: 10px 0;
}

footer{
  margin: 0;
  padding: 10px 0;
  background-color: #cc6f9b;
	color: #fff;
  text-align: center;
}

main nav{
	width: 81%;
	max-width: 1550px;
	margin: 0 auto;
}

/*画像は基本的に横幅100%表示、高さは横幅に合わせて自動調整
  小さい画像を使用する際は個別にmax-widthを設定する*/
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  image-rendering: -webkit-optimize-contrast;　/*Chromeで画像がぼやけるのを防止*/
}

div.line{
	width: 81%;
	max-width: 1550px;
	margin: 2em auto 3em;
}

h3{
	margin-top: -1.5em;
}

table.place{
	border-collapse: separate;
	border-spacing: 5px;
	
	th{
		3em;
		font-weight: normal;
		white-space: nowrap;
		vertical-align: top;
	}
	
	td{
		width: calc( 100% - 3em );
	}
}

/*Flexbox ────────────────────────────────────────────────────────────
　子要素の間隔はgapで指定。
*/
.flexbox{
  display: flex;
  flex-wrap: wrap;
	width: 81%;
	max-width: 1550px;
	margin: 1em auto;
}

section .flexbox{
	margin-bottom: 3em;
}

/*PC2列、スマホ1列　※flexboxと一緒に設定*/
.box2-1{
	--spacing: 2em; /*子要素の間隔*/
	
	gap: var(--spacing);
	
	margin-bottom: 2em;
	
	> div,
	> p{
		width: 100%;
	}
		
	.comment{
		background: #fff;
		padding: 10px;
		border: 1px solid #f3f2ec;
	}
	
	@media (min-width: 768px){
		/*PCのみ適用*/
  	> div,
 		> p{
    	width: calc( ( 100% - var(--spacing)) / 2 ); 
			margin-bottom: 0;
  	}
	}
}
	@media (min-width: 768px){
		/*PCのみ適用*/
		.reverse{
			flex-direction: row-reverse;
		}
}

/*PC5列、スマホ3列　※flexboxと一緒に設定*/
.box5-3{
	--spacing: 15px; /*子要素の間隔*/
	
	gap: var(--spacing);
	
	div,
	p{
   	width: calc( ( 100% - var(--spacing) * 2 ) / 3 ); 
		margin: 0;
	}
	
	@media (min-width: 768px){
	/*PCのみ適用*/
		div,
		p{
			width: calc( ( 100% - var(--spacing) * 4 ) / 5 ); 
		}
	}
}

/*写真にイラストを重ねる*/

p.photo{
	position: relative;
	margin: 0 0 1.5em 0;
}

.illust{
	position: absolute;
	width: 22%;
}

.illust_baku{
	position: absolute;
	width: 35%;
}

.illust_clover{
	position: absolute;
	width: 13%;
}

/*左上*/
.left-top{
	left: -5%;
	top: -5%;
}

/*右上*/
.right-top{
	right: -5%;
	top: -5%;
}

/*左下*/
.left-bottom{
	left: -5%;
	bottom: -5%;
}

/*右下*/
.right-bottom{
	right: -5%;
	bottom: -5%;
}

/*アニメーション*/

/*ピコピコ*/

.pikopiko{
	animation: pikopiko 1s steps(2, start) infinite;
}

@keyframes pikopiko {
  0% {
    transform: rotate(10deg);
  }
  to {
    transform: rotate(-10deg);
  }
}

/*ぷよぷよ*/

.puyopuyo{
	animation: puyopuyo 1s infinite;
}

@keyframes puyopuyo {
  0% {
    transform: scale(1, 1);
  }
  20% {
    transform: scale(0.95, 1);
  }
  90% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}

/*くるくる*/
.kurukuru{
	animation: kurukuru 5s linear infinite;
}

@keyframes kurukuru{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}


/*マップ*/
section#map{
	p{
		width: 81%;
		max-width: 1550px;
		margin: 0 auto;
		padding: 2em 0;
		background-color: #fff;
	}
}

/*ページトップスクロール ──────────────────────────────────────────────────*/
#page-top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 10;
}

.topbtn{
	display: block;
	background: #000;
	color: #fff;
	width: 50px;
	height: 50px;
	text-align: center;
	box-shadow: 0 0 0 3px #000;/*ボタンの背景色に合わせる*/
	border: 1px solid #fff;
	text-decoration: none;
	
	/*マウスオーバーした時*/
	@media (hover: hover) {
		/* hover指定できるPCを想定したスタイル */
		&:hover {
			background: #666;
			box-shadow: 0 0 0 3px #666;/*ボタンの背景色に合わせる*/
		}
	}
	@media (hover: none) {
		/* hoverが使えないタッチ端末を想定した装飾 */
		&:active {
			background: #666;
			box-shadow: 0 0 0 3px #666;/*ボタンの背景色に合わせる*/
		}
	}
	
	i {
		padding-top: 5px;
		font-size: var(--large);
		display: block;
	}
	span {
		display: block;
		font-size: var(--small);
		margin-top: -2px;
	}
}

/* ▲ページトップスクロールここまで▲ */

/* スマホなど幅が足りなくなったらspanで囲った単位で強制改行
   spanで囲まれている文章は自動改行がされなくなるので要注意*/
.spBr span{
  display: inline-block;
  white-space: nowrap;
}