/* @charset "UTF-8"; */

/* ===============================
   初期設定（Reset & Base Styles）
   =============================== */
/* 0. Root*/
:root{
  --gothicFont: "Noto Sans JP", sans-serif;
  --michoFont: "Noto Serif JP", serif;
	--fontSize18: clamp(14px,calc( 1.14vw  + 10.3px),24px);
	--variableSpaceS:  clamp(20px,calc( 4.8vw + 1.184px), 50px);
	--variableSpaceM:  clamp(40px,calc( 9.6vw + 2.368px),100px);
  --sideMargin: clamp(30px,calc( 5.81vw  + 11.4px),80px);
  --sideMarginS: clamp(18px,calc( 4.88vw  + 2.4px),60px)
} 
/* 1. ボックスサイズを border-box に統一 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. マージン・パディングをリセット */
body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li,
figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

/* 3. リストのスタイルを削除 */
ul, ol {
  list-style: none;
}

/* 4. リンクの装飾を削除 */
a {
  text-decoration: none;
  color: inherit;
}

/* 5. 画像の最大幅を制限 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 6. HTML5要素の表示をブロックに */
article, aside, footer, header, nav, section {
  display: block;
}

/* 7. ベースフォント設定 */
body {
  font-family: var(--gothicFont);
  font-size: var(--fontSize18);
  font-weight: 300;
  line-height: 1.5;
  color: #000;
}

/* 8. フォーム要素のフォント継承 */
input, textarea, select, button {
  font: inherit;
}

/* 9. スクロールの滑らかさ（オプション） */
html {
  scroll-behavior: smooth;
}
.bg-blue{
  background-color: #75B2E1;
  padding-bottom: var(--variableSpaceS);
}

.bg-cream{
  background-color: #FCEDB1;
  padding-bottom: var(--variableSpaceS);
}

.red{ color: red; font-weight: 500;}
.maximum-width{
	max-width: 1920px;
	margin-inline: auto;
}

.max1100{
	max-width: 1100px;
	margin-inline: auto;
}

.max1242{
  max-width: 1242px;
  margin-inline: auto;
}

.rounded-rectangle{
  border-radius: clamp(20px,calc( 2.33vw  + 12.5px),40px);
}

.horizontal-margin{
	width: calc(100% - var(--sideMargin));
  margin-inline: auto;
}

.horizontal-margin-s{
  width: calc(100% - var(--sideMarginS));
  margin-inline: auto;
}

.mbS{ margin-bottom: var(--variableSpaceS);}

.mbM{ margin-bottom: var(--variableSpaceM);}

header{
	background-image: url(./img/top_bg.jpg);
}

#opening_event{  
	padding-top: var(--variableSpaceM);
  padding-bottom: var(--variableSpaceS);
}

#opening_event > article{
  background-color: white;
	position: relative;
  padding-bottom: var(--variableSpaceS);
}

#opening_event h2{
	transform: translateY(-50%);
}

#opevent_info_images{
  display: grid;
  grid-template-columns: 1fr;
}

@media(min-width: 600px){
  #opevent_info_images{
    grid-template-columns: 56% 44%;
  }
}


#opevent_01 h3{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}

#opevent_01 h3 img:first-child{
  padding-right: 49.5%;
  min-width: 230px;
}

#opevent_01 h3 img:last-child{
  width: 68.9%;
}

@media(min-width: 1000px){
  #opevent_01 h3{
    display: grid;
    grid-template-columns: 31.1% 68.9%;
    grid-template-rows: 1fr;
  }
  #opevent_01 h3 img:first-child{
  padding: 0;
}

#opevent_01 h3 img:last-child{
  width: 100%;
}
}

.pourin-grid{
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0;
  overflow: hidden;
}

.pourin-grid::after{
  content: "";
  clear: both;
}

.pourin-grid h3{
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.pourin-grid p{
  grid-row: 2 / 3;
  padding-bottom: 20px;
}

.pourin-grid figure{
  grid-row: 3 / 4;
}

.pourin-grid figure img{
  margin-inline: auto;
}

.pourin-grid.goods h3 img{
  padding-right: 30%;
}

@media(min-width: 600px){
  .pourin-grid{
    display: block;
    overflow: hidden;
  }

  .pourin-grid figure{
    float: right;
    margin-left: 19px;
    width: 35.3%;
    min-width: 180px;
  }

  .pourin-grid.goods figure{
    width: 52.6%;
  }
}

@media(min-width: 1000px){
  .pourin-grid{
    display: grid;
    grid-template-columns: 61.7% 35.3%;
    column-gap: 3%;
  }

  .pourin-grid.goods{
    grid-template-columns: 44.4% 52.6%;
    grid-template-rows: auto 1fr;
    row-gap: 0;
  }

  .pourin-grid h3{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  .pourin-grid.goods h3{
    max-width: 630px;
  }

  .pourin-grid.goods h3 img{
    padding: 0;
  }

  .pourin-grid p{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .pourin-grid figure,.pourin-grid.goods figure{
    width: 100%;
    margin: 0;
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }

}

#opevent_06 h3{
  margin-bottom: 5px;
}

#opevent_06 > div{  
  line-height: 1.3;
}

#opevent_06 > div > figure{
  float: right;
  width: 50%;
  margin-left: 10px;
}

#join{}

#join > article{
  background-color: #FCEDB0;
  padding-block: var(--variableSpaceS);
}

#nazotoki{
  padding-top: var(--variableSpaceM);
}

#nazotoki .last_message img{
  margin-inline: auto;
}

#pdf_dl img{
  margin-inline: auto;
}

#nazotoki > article{
  background-color: white;
  padding-bottom: var(--variableSpaceS);
}

#nazotoki h2{
  transform: translateY(-50%);
}

.how-to-join figure{
  margin-bottom: 0.8em;
}

.arrow img{
  margin-inline: auto;
  margin-block: var(--variableSpaceS);
}

.notice{
  font-size: 0.8em;
  border: 1px solid #aaa;
  padding: 1em;
}

ul.mark-disk > li{
	list-style-type: none;
	padding-left: 1.1em;
	position: relative;
	margin-bottom: 0.5em;
}


ul.mark-disk > li::before{
	content: '●';
  font-size: 0.5em;
  line-height: 3em;
	width: 1em;
  display: block;
  position: absolute;
  left: 0;
}


#present > article{
  background-color: white;
}

#present{
  padding-top: var(--variableSpaceM);
}

#present > article{
  padding-bottom: var(--variableSpaceS);
}

#present h2{
  transform: translateY(-50%);
}

h2 img{
  margin-inline: auto;
}

#present h4{
  background-color: #EC6800;
  color: white;
  width: 100%;
  height: 1.875em;
  font-size: clamp(14px,calc( 3.02vw  + 4.4px),40px);
  font-weight: 400;
  display: grid;
  place-items: center;
}

.scroll-box{
  width: 100%;
  aspect-ratio: 1 / 1.3;
  overflow-y: scroll;
}

.scroll-box p{
  margin-bottom: 1em;
  letter-spacing: -0.1em;
}

#otameshinazo{
  background-image: url(./img/otameshinazo_bg.jpg);
  padding-block: var(--variableSpaceS);
}

#otameshinazo section{
  background-color: white;
  padding-bottom: var(--variableSpaceS);
}

#otameshinazo h3{
  width: 100%;
  transform: translateY(-50%);
}

#otameshinazo h3 img{
  margin-inline: auto;
  width: 50%;
  max-width: 341px;
}

.switch{
  color: #164D9B;
  text-align: center;
  font-size: 0.89em;
  cursor: pointer;
}

.answer{
  font-size: 1.78em;
  text-align: center;
  display: none;
}

#otoiawase{
  padding-top: var(--variableSpaceS);
}

.link img{
  margin-inline: auto;
  width: 80%;
}

#search{
  display: grid;
  grid-template-columns: 41.2% 58.8%;
  grid-template-rows: 1fr;
}

#search a{
  display: block;
}

footer{
	position: relative;
	background-color: white;
	padding: var(--variableSpaceS);
	text-align: center;
	font-size: clamp(20px,calc( 1.35vw  + 15.7px),32px);
}