@charset "utf-8";

body,h1,h2,h3,h4,h5,h6,div,p,ul,ol,li,dl,dt,dd,form,input,textarea,pre {margin: 0;padding: 0;}
h1,h2,h3,h4,h5,h6 {font-weight: normal;}
header,footer,article,aside,section {display: block;}
ul,li {list-style-type: none;}
table,img {border: 0;}
hr {display: none;clear: both;}
em {font-style: normal;}
address {font-style: normal;}

* {box-sizing: border-box;}
*:before,*:after {line-height: 1.0;letter-spacing: 0;}

img {vertical-align: top; max-width: 100%; height: auto; /*-webkit-backface-visibility: hidden; backface-visibility:hidden;*/}
object {pointer-events: none;}

body { -webkit-text-size-adjust: 100%;}

/* --------------------
		clear
-------------------- */
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clear {
    clear: both;
    font-size: 0;
    line-height: 0;
    padding: 0;
    margin: 0;
}
.clearB {clear: both;}

/* --------------------
		link
-------------------- */
a {
    text-decoration: underline;
    verflow: hidden;
    outline: none;
}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
*:focus {outline: none;}

.fade {
    transition: opacity 0.2s ease-in-out;
    backface-visibility: hidden;
}
.pc .fade:hover {opacity: 0.8;}

.linkNon { color: inherit; text-decoration: none;}
.linkNon a { color: inherit; text-decoration: none;}

/* --------------------
		common
-------------------- */
.w100 {width: 100%;}
.nowrap {display: inline-block;white-space: nowrap;}
.alignR {text-align: right;}
.alignC {text-align: center;}

.kome { padding-left: 1em; text-indent: -1em; line-height: 1.5;}
.komeList li { padding-left: 1em; text-indent: -1em; line-height: 1.5; margin-top: 0.4em;}
.dotList li { padding-left: 1em; position: relative; line-height: 1.5; margin-top: 0.4em;}
.dotList li:before { content: ""; line-height: 0; width: 3px; height: 3px; background: rgba(0,0,0,0.7); display: block; border-radius: 50%; position: absolute; left: 0.3em; top: 0.7em; transform: translate(-50%, -50%);}

.kome .nowrap, .komeList li .nowrap, .dotList li .nowrap { text-indent: 0;}



/* -------------------- -------------------- -------------------- --------------------
mainte
-------------------- -------------------- -------------------- -------------------- */
html { width: 100%; overflow: auto; font-size: 2.44vw;}
body {
  text-align: center;
  font-family: 'Inter','Zen Kaku Gothic New', sans-serif;
  font-size:1.5rem;
  line-height: 1.7;
  font-feature-settings: "palt";
  letter-spacing: 0.01em;
  color: #331F19;
  width: 100%;
  position:relative;
  overflow:hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}
.pc { display: none;}
.wrap { text-align: left; padding: 12vw 7vw; flex: 1;}

@media screen and ( min-width:768px ){
  html { font-size: 62.5%; font-size: min(1.2vw, 62.5%); }
  body { font-size: 1.5rem; line-height: 2.0; }
  .wrap { padding: min(8vw,80px) min(8vw,80px); max-width: 850px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .inner { width: 100%; }
  .sp { display: none;}
  .pc { display: block;}
}


h1 { text-align: center; font-size: 2.1rem; line-height: 1.7; font-weight: bold;}
.logo { width: 44vw; max-width: 240px; margin: 7vw auto 9vw;}
@media screen and ( min-width:768px ){
  h1 { font-size: 2.6rem; line-height: 1.7;}
  .logo { width: 28vw; margin: min(3vw,30px) auto min(4vw,40px);}
}

.periodBox {
  margin: 8vw auto;
  background: #FFEDAD; border-radius: 20px; padding: 6vw 5vw 4vw;
}
.periodBox .title { text-align: center; font-weight: bold; font-size: 1.7rem; margin-bottom: 0.5em;}
.periodBox .date { text-align: center; font-size: 1.8rem; font-weight: bold; line-height: 1.6; margin-bottom: 0.9em;}
.periodBox .kome { font-size: 1.2rem;}
@media screen and ( min-width:768px ){
  .periodBox {
    margin: min(5vw,50px) auto;
    padding: min(2.5vw,25px) min(2vw,20px) min(2vw,20px);
  }
  .periodBox .title { font-size: 1.8rem; margin-bottom: 0.6em;}
  .periodBox .kome { text-align: center;}
}

.copyRight {
  border-top: #C1BBB9 1px solid;
  padding: 4vw;
  font-size: 1.1rem; letter-spacing: 0.03em;
}
@media screen and ( min-width:768px ){
  .copyRight {
    width: 100%;
    padding: min(4vw,18px);
  }
}