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

/* shippori b1 min */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1&display=swap');

/* adobe garamond　は htmlで対応 */


/* 初期設定
------------------------------------------------------------ */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-size: 10px;
}
body {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;
  position: relative;
	color: #202020;
	font-size: 1.4rem;
	line-height: 1.8;
  letter-spacing: 0.04em;
	background-color: #fff;
	overflow-wrap: break-word;
}
body.scroll-prevent {
  overflow: hidden;
}

/* 文字リンク色 */
a, button {
	-webkit-transition: color .3s ease;
	transition: opacity .3s ease;
	outline: none;
}
a:link {
	text-decoration: none;
	color: #202020;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
a:visited {
	text-decoration: none;
	color: #202020;
}
a:active, button:active { 
	text-decoration: none;
	color: #202020;
}
a:hover, button:hover {
	text-decoration: none;
  color: #202020;
  opacity: .7;
}

/* p justify */
p {
	margin: 0;
	padding: 0;
	text-align: justify;
	text-justify: auto;
}
i {
	font-style: italic;
}
strong {
	font-weight: bold;
}
span.ruby {
	font-size: 75%;
}
img {
	line-height: 0;
	vertical-align: bottom;
}
/* 見出しリセット */
h1, h2, h3, h4, h5, h6 {
  display: block;
	margin: 0;
	padding: 0;
	font-weight: normal;
	line-height: 1.6;
}
/* リストリセット */
ul, ol {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
}

/* フォームリセット */
input[type="text"], textarea {
    font-size: inherit;
}
input:-webkit-autofill {
    transition: background-color 5000s ease-in-out 0s !important;
}


@media screen and (max-width: 750px) {
  body {
    font-size: 1.2rem;
  }

}

/* 共通設定
------------------------------------------------------------ */

.en_granv {
  font-family: granville, serif;
  font-weight: 300;
  font-style: normal;
}
.jp_min {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.05em;
}

.pc { display: block; }
.sp { display: none; }

@media screen and (max-width: 750px) {
  .pc { display: none; }
  .sp { display: block; }
}



/* --------------------------------------------------------------------------------------------- */
/*
/* 全体共通
/*
/* --------------------------------------------------------------------------------------------- */



/* メイン
------------------------------------------------------------ */
main {
  width: 100svw;
  height: 100svh;
}

#main {
  display: grid;
  grid-template: 100%;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.cmnInner {
  width: 100%;
  max-width: calc(540px + (24px * 2));
  margin: 0 auto;
  padding: 0 24px;
}

.ttl_box {
  width: fit-content;
  margin: 102px auto 0;
}
.ttl_box .ttl {
  font-size: 2.4rem;
}
.ttl_box .ttl.jp_min {
  display: inline-block;
}

.img_box {
  width: 320px;
  margin: 0 auto;
}
.img_box img {
  width: 100%;
  height: auto;
}

.txt_box {
  margin-top: 64px;
}
.txt_box .txt + .txt {
  margin-top: 24px;
}

.btn_box {
  margin-top: 64px;
}
.btn_box a.btn {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.5em;
  width: fit-content;
  margin: 0 auto;
  padding: 5px 1.5em;
  border: #CCC solid 1px;
}
.btn_box a.btn::after {
  content: '';
  width: 0.7em;
  height: 0.7em;
  border-top: #CCC solid 1px;
  border-right: #CCC solid 1px;
  transform: rotate(45deg);
}

/*　スマホ表示時 */
@media screen and (max-width: 750px) {
  
  .cmnInner {
    max-width: 100%;
  }

  .ttl_box {
    margin: 64px auto 0;
  }
  .ttl_box .ttl {
    font-size: 2.0rem;
  }

  .img_box {
    width: 240px;
    margin: 0 auto;
  }
  .img_box img {
    width: 100%;
    height: auto;
  }

  .txt_box {
    margin-top: 32px;
  }
  .txt_box .txt + .txt {
    margin-top: 18px;
  }

  .btn_box {
    margin-top: 64px;
  }
  .btn_box a.btn {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.5em;
    width: fit-content;
    margin: 0 auto;
    padding: 5px 1.5em;
    border: #CCC solid 1px;
  }
  .btn_box a.btn::after {
    content: '';
    width: 0.7em;
    height: 0.7em;
    border-top: #CCC solid 1px;
    border-right: #CCC solid 1px;
    transform: rotate(45deg);
  }

  
  
}