@charset "UTF-8";
/* Scss Document */
html {
  font-size: 62.5%; }

/*------------------------------------------------------------
　共通
------------------------------------------------------------*/
body {
  position: relative;
  font-family: 'Noto Sans JP',"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-size: 1.6rem;
  font-weight: 100;
  color: #333;
  line-height: 1.6;
  letter-spacing: 2px; }
body::before{
	content: "";
	display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background: url("../img/tea_room2.jpg") ;
  background-color: #fdf5f9;
  background-size: cover;
}
  @media screen and (max-width: 1023px) {
    body {
      font-size: 1.4rem; } 
		body::before{
			background-size: contain;
		}
}

/*-------------------- 文字 --------------------*/
p {
  margin: 32px 0; }

a {
  transition: 0.2s;
  color: #333;
  z-index: 2; }
  a:hover {
    opacity: 0.6;
    transition: 0.2s; }

h1, h2, h3, h4 {
  font-family: 'Montserrat Alternates','Noto Sans JP',"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: normal; }

h2 {
  font-size: 3rem;
  text-align: center;
  margin: 100px 0; }
  @media screen and (max-width: 1023px) {
    h2 {
      font-size: 2rem;
      margin: 40px 0; } }

h3 {
  font-size: 2.4rem; }
  @media screen and (max-width: 1023px) {
    h3 {
      font-size: 1.8rem; } }

h4 {
  position: relative;
  font-size: 1.8rem;
  padding-left: 40px;
  margin-bottom: 24px; }
  h4::before {
    position: absolute;
    top: calc(50% - 8px);
    left: 0;
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: #bbe2f1; }
  @media screen and (max-width: 1023px) {
    h4 {
      font-size: 1.6rem; } }

em {
  text-decoration: underline;
  font-style: normal; }

/*-------------------- リスト --------------------*/
ul, ol, dl {
  margin: 24px 0; }

ul.yoko {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 32px; }
  ul.yoko li {
    margin-right: 16px; }
    ul.yoko li:last-child {
      margin-right: 0; }

/*-------------------- フォーム、ボタン --------------------*/
input, textarea {
  border: none;
  border: 1px solid #bbe2f1; }

input[type="submit"] {
  cursor: pointer; }

.btn {
  background-color: #bbe2f1;
  border: 1px solid #bbe2f1;
  margin: 16px 0;
  color: #fff;
  transition: 0.2s;
  text-decoration: none;
  border-radius: 4px; }
  .btn:hover {
    background: #f3f9fd;
    color: #333;
    cursor: pointer;
    transition: 0.2s; }

a.btn {
  padding: 4px 8px; }

/*-------------------- レイアウト --------------------*/
.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }

.grid {
  display: grid;
  grid-template-columns: auto 1fr; }

/*-------------------- 装飾 --------------------*/

/*矢印*/
.arrow {
  border: 2px solid #fff;
  border-right: none;
  border-bottom: none;
  width: 16px;
  height: 16px; }

/*ラベル*/
.label dt {
  position: relative;
  padding-left: 40px; }
  .label dt::before {
    position: absolute;
    top: calc(50% - 8px);
    left: 0;
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: #bbe2f1; }
.label dd {
  position: relative;
  padding-left: 40px; }
  .label dd::before {
    position: absolute;
    top: 50%;
    left: 12px;
    content: "";
    width: 16px;
    height: 1px;
    background: #bbe2f1; }
@media screen and (max-width: 1023px) {
  .label dt {
    padding-left: 24px; } }

.hr {
  margin-bottom: 80px; }

.center {
  text-align: center; }


/*------------------------------------------------------------
　サイト名
------------------------------------------------------------*/
header h1 {
  position: fixed;
  top: 0;
  bottom: 0;
  margin: auto;
  margin-left: 40px;
  text-align: center;
  font-size: 3.8rem;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  z-index: -1; }
@media screen and (max-width: 1023px) {
  header h1 {
    position: static;
    margin-left: 8px;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    transform: none;
    margin: 40px 0 0; } }


/*------------------------------------------------------------
　メニュー
------------------------------------------------------------*/
.menu {
  display: inline-block;
  background: #fffef1;
  font-family: 'Montserrat Alternates','Noto Sans JP',"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  border-radius: 20px 50px 35px 30px;
  margin: 100px auto 0; }
  .menu ul {
    padding: 0 20px;
    display: flex;
    justify-content: flex-start; }
    .menu ul li {
      position: relative;
      margin: 20px; }
      .menu ul li::after {
        content: "";
        position: absolute;
        bottom: -4px;
        display: block;
        width: 0;
        height: 3px;
        background: #bbe2f1;
        transition: 0.3s; }
      .menu ul li:hover::after {
        width: 100%;
        transition: 0.3s; }
      .menu ul li a {
        text-decoration: none; }
        .menu ul li a:hover {
          opacity: 1; }
  @media screen and (max-width: 1023px) {
    .menu {
      max-width: 96%;
      margin-top: 40px; }
      .menu ul li {
        margin: 8px; } }


/*------------------------------------------------------------
　コンテンツ
------------------------------------------------------------*/
section {
  width: 60%;
  min-width: 960px;
  margin: 50px auto;
  padding: 80px 64px;
  background: #fffef1;
  border-radius: 10% 20% 15% 22%; }
  section h3 {
    margin-top: -100px;
    margin-bottom: 32px;
    filter: drop-shadow(0 0 3px #fff); }

  @media screen and (max-width: 1023px) {
    section {
      width: 96%;
      min-width: auto;
      padding: 64px 24px; }
      section h3 {
        margin-top: -78px; } }


/*-------------------- news --------------------*/
.news ul {
  height: 100px;
  overflow-y: auto; }
  .news ul li {
    margin: 0 40px;
    padding: 12px;
    border-bottom: 1px solid #bbe2f1; }
    .news ul li time {
      margin-right: 40px; }

@media screen and (max-width: 1023px) {
  .news {
    padding: 20px 24px 40px; }
    .news h3 {
      margin-top: -34px;
      margin-bottom: 0; }
    .news ul li {
      margin: 0; }
      .news ul li time {
        display: block; } }



/*-------------------- novel --------------------*/
/*名前変換*/
.nameChange {
  display: flex; }
  .nameChange .wrapper {
    margin: auto; }
    .nameChange .wrapper p {
      margin: 0; }
    .nameChange .wrapper input[type="text"] {
      margin: 16px 24px 16px 0; }

/*小説目次*/
@media screen and (max-width: 1023px) {
  .novel dl {
    display: block; } }

.long dt {
  position: relative; }
  .long dt::after {
    position: absolute;
    bottom: -20px;
    left: 24px;
    content: "";
    display: block;
    width: 2px;
    height: 16px;
    background: #bbe2f1; }
    @media screen and (max-width: 1023px) {
      .long dt::after {
        display: none; } }
  .long dt:last-of-type::after {
    display: none; }

.long dt, .short dt {
  margin-right: 24px;
  margin-bottom: 24px; }
  .long dt a, .short dt a {
    text-decoration: none; }
.long dd, .short dd {
  font-size: 1.4rem;
  color: #777; }
@media screen and (max-width: 1023px) {
  .long dt, .short dt {
    margin: 0; }
  .long dd, .short dd {
    margin-left: 24px;
    margin-bottom: 8px; } }


/*-------------------- illust --------------------*/
.illust .grid {
  gap: 24px;
  grid-template-columns: repeat(auto-fit, 147px); }
  .illust .grid .item {
    border: 3px solid #bbe2f1;
    border-radius: 4px; }
    .illust .grid .item img {
      width: 147px;
      height: 147px;
      object-fit: cover;
      border-radius: 4px;
      transition: 0.2s; }
      .illust .grid .item img:hover {
        filter: saturate(40%);
        transition: 0.2s; }
  @media screen and (max-width: 1023px) {
    .illust .grid {
      gap: 16px;
      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
      .illust .grid .item img {
        width: 100%;
        height: 80px; } }


/*-------------------- 小説個別ページ --------------------*/
#page-novel::before {
  background: none; }

  #page-novel .wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 60%;
    min-width: 800px;
    margin: 0 auto; }

    #page-novel .wrapper .title {
      display: inline-block;
      padding: 40px;
      background: #fdf5f9;
      border-radius: 25% 42% 40% 38%;
      margin: 100px auto; }
      #page-novel .wrapper .title h2 {
        font-size: 2.4rem;
        margin: 0; }

    #page-novel .wrapper .text {
      margin-bottom: 100px; }

    #page-novel .wrapper section {
      min-width: 800px;
      padding: 40px; }
      #page-novel .wrapper section p {
        margin: 24px 0; }

  @media screen and (max-width: 1023px) {
    #page-novel h1 {
      display: none; }
    #page-novel .wrapper {
      min-width: 90%; }
      #page-novel .wrapper .text {
        margin-bottom: 0; }
      #page-novel .wrapper section {
        min-width: 90%; } }


/*-------------------- イラスト個別ページ --------------------*/
#page-illust::before {
  background: none; }

  #page-illust .wrapper {
    position: relative;
    width: 60%;
    min-width: 960px;
    margin: 0 auto; }

    #page-illust .wrapper h2 {
      font-size: 1.8rem;
      text-align: left;
      margin: 40px auto; }

    #page-illust .wrapper img {
      max-height: 100vh;
      margin: 0 auto; }

    #page-illust .wrapper .prev, #page-illust .wrapper .next {
      position: absolute;
      top: calc(50vh - 2rem); }
      #page-illust .wrapper .prev .arrow, #page-illust .wrapper .next .arrow {
        border-color: #bbe2f1;
        width: 4rem;
        height: 4rem; }
    #page-illust .wrapper .prev {
      left: -8%;
      transform: rotate(-45deg); }
    #page-illust .wrapper .next {
      right: -8%;
      transform: rotate(135deg); }

  @media screen and (max-width: 1023px) {
    #page-illust h1 {
      display: none; }
		
    #page-illust .wrapper {
      min-width: 100%;
      padding: 8px; }
		
      #page-illust .wrapper img {
        max-width: 100%; }
		
      #page-illust .wrapper h2 {
        margin: 40px 0; }
		
      #page-illust .wrapper .prev, #page-illust .wrapper .next {
        top: auto;
        bottom: -4rem; }
        #page-illust .wrapper .prev .arrow, #page-illust .wrapper .next .arrow {
          width: 2rem;
          height: 2rem; }
      #page-illust .wrapper .prev {
        left: 16px; }
      #page-illust .wrapper .next {
        right: 16px; } }


/*-------------------- memo --------------------*/
#memo section {
  position: relative; }

  #memo section time {
    position: absolute;
    top: 64px;
    right: 64px;
    background-color: #bbe2f1;
    border: 1px solid #bbe2f1;
    padding: 4px 8px;
    color: #fff;
    border-radius: 4px; }

@media screen and (max-width: 1023px) {
  #memo section time {
    position: relative;
    top: -32px;
    right: 0; } }


/*-------------------- link --------------------*/
.link li {
  margin: 8px 16px;
  transition: 0.2s; }
  .link li:hover {
    opacity: 0.6;
    transition: 0.2s; }


/*-------------------- mail --------------------*/
.mail {
  margin: 0 auto;
  width: 568px;
  padding: 40px; }
  .mail dl dt {
    margin: 8px 32px 0 0; }
  .mail dl dd {
    margin: 8px 0; }
    .mail dl dd input {
      width: 100%; }
  .mail label {
    display: block;
    margin-bottom: 8px; }
  .mail textarea {
    width: 488px;
    height: 100px; }
  .mail .btn {
    height: 32px; }
  @media screen and (max-width: 1023px) {
    .mail {
      width: 100%;
      padding: 24px; }
      .mail input {
        width: 100%; }
      .mail textarea {
        width: 100%; } }


/*-------------------- お返事ボックス --------------------*/
.henshinBox {
  padding: 0;
  width: 80%;
  margin-bottom: 24px; }
  .henshinBox .name {
    display: block;
    padding: 8px 16px;
    background: #bbe2f1;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s; }
    .henshinBox .name:hover {
      background: #bbe2f1;
      transition: 0.2s; }
  .henshinBox .henshin {
    display: none; }
@media screen and (max-width: 1023px){
	.henshinBox{
		width: 100%;
	}
}


/*------------------------------------------------------------
　フッター
------------------------------------------------------------*/
footer {
  margin-top: 160px;
  position: relative;
  text-align: center;
  height: 56px; }

/*-------------------- クレジット --------------------*/
  footer small {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 40px;
    margin: auto;
    font-family: 'Montserrat Alternates','Noto Sans JP',"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    text-align: center;
    font-size: 1rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl; }
    footer small a {
      text-decoration: none; }

		@media screen and (max-width: 1023px) {
      footer small {
        position: static;
        -ms-writing-mode: lr-tb;
        writing-mode: horizontal-tb; } }


/*-------------------- トップヘ矢印 --------------------*/
  footer .toTop {
    position: absolute;
    width: 48px;
    height: 48px;
    background: #bbe2f1;
    border-radius: 50%;
    right: calc(50% - 24px);
    bottom: 80px;
    transition: 0.2s; }

    @media screen and (max-width: 1023px) {
      footer .toTop {
        bottom: 74px; } }

    footer .toTop a {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      z-index: 2; }

    footer .toTop .arrow {
      transform: rotate(45deg);
      margin-left: 16px;
      margin-top: 20px;
      transition: 0.2s; }
    footer .toTop:hover {
      background: #f3f9fd;
      transition: 0.2s; }
      footer .toTop:hover .arrow {
        border: 2px solid #bbe2f1;
        border-right: none;
        border-bottom: none;
        transition: 0.2s; }