@CHARSET "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html { scroll-behavior: smooth;}

body{
  font-size:1rem;
  line-height:1.6rem;
  font-family:"Noto Sans JP", "メイリオ", sans-serif;
  color:#000000;
  background-image:url(pic/back.jpg);
  background-position:top center;
}

a[href]{
  text-decoration: none;
  color:#FF9462;
  font-weight: bold;
}

a[href]:hover{
  color:#FF9462
}

#allbox{
  display:block;
  margin:auto;
  width:80%;
  background-color:rgba(255,255,255,0.7);
  max-width: 1024px;
  min-width: 600px;
  padding:8px 32px 32px 32px;
}

#pageerrorbox{
  font-size:2rem;
  text-align:center;
  background-color:#ffffff;
  width:80%;
  margin:32px auto;
  border-radius: 16px;
  padding:32px;
  font-weight:600;
}

/*********ハンバーガーメニュ ***********/
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

#header{
  position:fixed;
  right:0;
  top:0;
  display: block;
  width:64px;
  z-index:3;
  background-color:#ffffff;
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #ffffff;
  transition: .5s;
  padding-top:64px;
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 70%;/* メニューを画面に入れる */
}

a.topbutton{
  display: block;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  margin:0 8px;
  padding:8px 16px;
  font-size:1em;
  font-weight: 700;
  border-bottom:1px solid #FF9462;
  color:#FF9462;
}
.topbutton:hover{
  background-color:#FFF1B3;
}

/*********ハンバーガーメニュここまで ***********/

#bottom{
  background-color:#ffffff;
  width:100%;
  font-size:0.8rem;
  line-height:1.2rem;
  font-weight: 500;
  text-align:center;
}

/**** ワークショップ用 ****/
.flexbox{
  margin-left:16px;
  display: flex;
  align-items: center;
}

.photobox{
  width:100%;
  max-width:300px;
  height:auto;
}

/**** グッズページ用 ****/

.goodsbox{
  display:flex;
  flex-wrap: wrap;
  width:100%;
}

.goodsitembox{
  display: block;
  width:46%;
  margin:16px 2% 16px 2%;
}

.goodspic{
  width:100%;
}

.goodstitlebox{
  display: block;
  width: 100%;
  text-align: center;
  font-weight: bold;
}

.goodscommentbox{
  border:1px solid #FF9462;
  border-radius: 8px;
  margin:0 8px;
  padding:8px;
  font-size:0.8em;
}

/**** 汎用 ****/

.centering{
  text-align: center;
}

.expandfont{
  font-size:1.1em;
  font-weight: 700;
}

.redfont{
  color:#ff3322;
}

a.linkbutton{
  display: inline-block;
  background-color: #78A87B;
  padding: 8px 16px;
  margin: 8px;
  color: #ffffff;
  border-radius: 8px;
  text-decoration: none;
}

a.linkbutton:hover{
  background-color: #FFF075;
}

.titlepicture{
  display: block;
  width:100%;
  padding:0;
  height:auto;
  margin:auto;
  pointer-events: none;
}

.titlepicture_mini{
  display: block;
  width:60%;
  padding:0;
  height:auto;
  margin:auto;
  pointer-events: none;
}

.productpic{
  width:100%;
  max-width: 300px;
}

.wordbox{
  margin: 32px auto;
  padding: 16px;
  width: 100%;
  max-width: 1280px;
  overflow: hidden;
}

.subtitlebox{
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  background-color: #FF6B00;
  color: #ffffff;
  padding: 8px 16px;
  margin: -16px -8px 16px -8px;
  border-radius: 24px;
  text-align: center;
}

.detailbox{
  margin:8px;
  padding:16px 16px 16px 0;
}

.detailtitle{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  display:table;
  background-color: #7EA1FF;
  color: #FFFFFF;
  padding: 4px 16px;
  font-size: 1.2rem;
  margin-left:-8px;
  margin-bottom:8px;
  border-radius: 16px;
}

.chaptertitle{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  display:table;
  background-color: #FF5D9B;
  color: #ffffff;
  border-bottom: 1px solid #BD245E;
  padding: 4px 8px;
  font-size: 1rem;
  margin-bottom:8px;
}

.expbox{
  margin:8px;
  padding:16px;
  background-color: #FFD6D6;
}

hr {
	height: 0; /*高さをリセット*/
	margin: 0 auto; /*マージンをリセット*/
	padding: 0; /*パディングをリセット*/
	border: 0; /*ボーダーをリセット*/
  border-top: 8px dotted #75DC7C;
  width:80%;
}

.orangeborder{
	padding: 0; /*パディングをリセット*/
	border: 0; /*ボーダーをリセット*/
  background-color:#FFAD06;
  width:100%;
  height:2px;
  margin:16px 0;
}

.formbutton{
  display: flex;
  justify-content: space-around;
}

a.squarebuttonbox{
  font-family: 'M PLUS Rounded 1c', sans-serif;
  display: flex;
  align-items:center;
  justify-content: center;
  width:23%;
  border:4px solid #76DE65;
  background-color:#ffffff;
  color:#ffffff;
  border-radius: 8px;
  padding:5px;
  font-size: 18px;
  line-height:1.8em;
  font-weight: bold;
  box-shadow: 6px 6px 4px #DCD8D1;
}

a.squarebuttonbox img{
  display:block;
  width:100%;
  margin:auto;
}

a.squarebuttonbox:hover{
  opacity: 0.6;
  background-color:#FFCD4F;
  box-shadow: none;
}

.newsbox{
  margin:auto;
  width:100%;
  padding:8px 32px;
  border:2px solid #FFAD06;
  border-radius: 8px;
}
.newsdatebox{
  background-color:#FFAD06;
  padding:0 16px;
  color:#ffffff;
  min-width:100px;
  text-align: center;
}

.newstitlebox{
  width:(100% + 16px);
  margin:-8px -8px 4px -8px;
  padding:32px 0 0 0;
  background-color:#ffffff;
  color:#000000;
  text-align: center;
}

.newslistbox{
  display:flex;
  font-size:0.85em;
}

.newswordbox{
  margin-left:16px;
}

#newshidebox{
  display: none;
}

#newsopenbutton{
  display:block;
}

.flexphotobox{
  display:flex;
}

.triplephoto{
  display: block;
  width:30%;
  height:30%;
  margin:8px;
}

.spotinfotable{
  margin-left:16px;
  display: table;
  border-collapse:collapse;
}

.spotinfotable .row{
  display: table-row;
  border-bottom:1px solid #aaaaaa;
}

.spotinfotable .row div{
  display: table-cell;
  padding:4px 8px;
}

.spotinfotable .cell:first-child {
  font-weight: 600;
}

.infotable{
  margin:16px;
  display: table;
  border-collapse:collapse;
  border-top:1px solid #aa6666;
}

.infotable .row{
  display: table-row;
  border-bottom:1px solid #aa6666;
}

.infotable .row div{
  display: table-cell;
  padding:4px 8px;
}

.pcbox{
  display: block;
}

.spbox{
  display: none;
}

#infobox1{
  display: none;
}

#spotbox1,#spotbox2, #spotbox3, #spotbox4, #spotbox5, #spotbox6, #spotbox7,#spotbox8{
  display: none;
}

.openbutton{
  background-color: #FF7A7A;
  color: #ffffff;
  padding: 2px 4px;
  display:table;
  border-radius: 4px;
  font-size:0.7em;
}

.Qbox{
  background-color:#0000ff;
  color:#ffffff;
  padding:8px;
  border-radius: 16px 16px 0 0;
  margin-bottom:1px;
}
.Abox{
  border:3px solid #E09595;
  background-color:#FFE3E4;
  padding:8px;
  margin-bottom:16px;
}