@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Slackside+One&display=swap');

:root {
	/* ========== Color ========== */
	--color-main:       #32251d;
	--color-sub:        #c64d44;
	--color-bg-or:      #fbf2e7;
}

abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:0 0}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}.clearfix::after{content:"";display:block;clear:both;}

*,*::before,*::after{
	box-sizing: border-box;
}

html{
	font-size: 62.5%;
}

*{
	max-height: 99999px;
}

body{
	font-family: "Noto Sans JP", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	-webkit-text-size-adjust: 100%;
	font-size: 1.6rem;
	color: var(--color-text);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 3px;
	font-feature-settings: "palt";
	background: var(--color-bg-or);
}
.so{
	font-family: "Slackside One", cursive;
}
img, video {
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}

button, input, textarea, select {
	font-family: inherit;
	font-size: inherit;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
	color: var(--color-text);
}

a:hover {
	opacity: 0.6;
}

.en {
	font-family: "adobe-garamond-pro", serif;
	font-weight: 400;
	font-style: normal;
}
.min{
	font-family: "vdl-v7mincho", sans-serif;
	font-weight: 500;
	font-style: normal;
}

#wrap {
	overflow-x: clip;
}

.relative { position: relative; }
.absolute { position: absolute; }
.inline   { display: inline-block; }
.left     { float: left; }
.right    { float: right; }

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

.in {
	width: 650px;
	margin: 0 auto;
	position: relative;
	z-index: 3;
	padding:0 5%;
}


.flex   { display: flex; }
.flex_w { flex-wrap: wrap; }
.palt   { font-feature-settings: "palt"; }

.c_main        { color: var(--color-main); }
.c_sub         { color: var(--color-sub); }
.c_text        { color: var(--color-text); }
.c_white       { color: var(--color-white); }
.c_gray        { color: var(--color-gray); }
.bg_main       { background-color: var(--color-main); }
.bg_sub        { background-color: var(--color-sub); }
.bg_color_bg_or{ background-color: var(--color-bg-or); }
.bg_white      { background-color: var(--color-white); }
.bg_gray_02    { background-color: var(--color-gray-02); }
.bg_grd {
	background-image: -moz-linear-gradient( -10deg, rgba(33,80,58,0.99608) 0%, rgb(25,70,49) 61%, rgb(17,60,40) 100%);
	background-image: -webkit-linear-gradient( -10deg, rgba(33,80,58,0.99608) 0%, rgb(25,70,49) 61%, rgb(17,60,40) 100%);
	background-image: -ms-linear-gradient( -10deg, rgba(33,80,58,0.99608) 0%, rgb(25,70,49) 61%, rgb(17,60,40) 100%);
}

@media screen and (min-width: 751px) and (max-width: 1024px) {
	.pc  { display: block; }
	.sp  { display: none; }
	.tab { display: block; }
	.in, .in_in {
		width: 100%;
		margin: 0 auto;
	}
}
@media screen and (max-width: 750px) {
	body {
		font-size: 1.2rem;
		letter-spacing: 2px;
	}
	#wrap {
		width: 100vw;
	}
	.pc  { display: none; }
	.sp  { display: block; }
	.tab { display: none; }
	.in, .in_in {
		width: 100%;
		margin: 0 auto;
	}
	.flex_w_sp {
		flex-wrap: wrap;
	}
}

.top_area{
	padding: 100px 0;
}
.top_area .top_txt {
	writing-mode: vertical-lr;
	letter-spacing: -10px;
	line-height: 1;
	margin: auto;
	font-size: 5.0rem;
	margin-bottom: 40px;
}
.top_area .imgarea{
	text-align: center;
	margin-bottom: 20px;
}
.top_area .imgarea img{
	width: 45%;
}
.top_area .tag{
	text-align: center;
}
.top_area .tag img{
	width: 35%;
}

.lead_area {
	padding: 50px 0;
	position: relative;
}
.lead_area .bg_deco{
	position: absolute;
	width: 45%;
}
.lead_area .bg_deco.bg_deco_01 {
	left: -100px;
	top: 70px;
}
.lead_area .bg_deco.bg_deco_02 {
	right: -100px;
	bottom: -100px;
}
.lead_area h2{
	margin-bottom: 50px;
	position: relative;
	z-index: 2;
}
.lead_area .txtarea{
	text-align: center;
	position: relative;
	z-index: 2;
}
.lead_area .txtarea img{
	width: 75%;
}

.list_w{
	margin-bottom: 80px;
}
.list_w .list_fields_w{
	background: #fff;
	padding: 7.5% 5% 5%;
	border: var(--color-main) 3px solid;
	border-radius: 10px;
	position: relative;
}
.list_w .list_fields_w .imgarea{
	position: absolute;
	width: 30%;
    top: -75px;
    right: -20px;
}
.list_w .list_fields_w h2{
	text-align: center;
	margin-bottom: 30px;
}
.list_w .list_fields{
	margin-bottom: 15px;
}
.list_w .list_fields .list{
	margin-bottom: 10px;
}
.list_w .list_fields .list:nth-last-of-type(1){
	margin-bottom: 0;
}
.list_w .list_fields .list .num{
	border: var(--color-main) 2px solid;
	background: var(--color-bg-or);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border-radius: 100%;
	font-size: 2.4rem;
	flex-shrink: 0;
}
.list_w .list_fields .list input{
	border: 0px;
	background:var(--color-bg-or);
	width: calc(100% - 40px - 20px);
	margin: 0 10px;
	padding: 10px;
	box-sizing: border-box;
}
.list_w .list_fields .list button{
	border: 0px;
	font-size: 3.0rem;
	background: none;
}
.list_w .add_btn_w{
	text-align: right;
}
.list_w .add_btn {
	border: 0px;
	background: none;
	width: 25%;
}
.list_w .u_btn_w{
	justify-content: space-between;
	padding-top: 30px;
	margin-top: 30px;
	border-top: 2px solid #e7d4bc;
}
.list_w .u_btn_w button{
	border: 0px;
	background: none;
	width: 48%;
}


.result_w {
  width: 650px;
  max-width: 100%;
  margin: 40px auto 60px;
  padding:5%;
  box-sizing: border-box;
  text-align: center;
  background: #fff;
  border-radius: 15px;
display: none;
}
.result_w #result_img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.result_btns {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.result_btns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 150px;
  padding: 13px 22px;
  border: 2px solid var(--color-main);
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 1px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease, opacity .2s;
}
.result_btns a:hover { opacity: .85; }
.result_btns a:active { transform: translateY(3px); }

/* 𝕏でシェア */
#x_share {
  background: var(--color-main);
  color: #fff;
  box-shadow: 0 4px 0 #1c1410;
}
#x_share:active { box-shadow: 0 1px 0 #1c1410; }

/* 画像を保存 */
#dl_link {
  background: var(--color-bg-or);
  color: var(--color-main);
  box-shadow: 0 4px 0 #e7d4bc;
}
#dl_link:active { box-shadow: 0 1px 0 #e7d4bc; }

.other_list{}
.other_list h2{
	padding:0 20%;
}

@media screen and (max-width: 750px) {
	.top_area .tag img {
		width: 55%;
	}
	.top_area .top_txt{
		font-size: 4.2rem;
	}
	.top_area .imgarea img{
		width: 65%;
	}
	.top_area {
		padding: 100px 0 100px;
	}
	.list_w {
		margin-bottom: 50px;
	}
	.list_w .add_btn{
		width: 34%;
	}
	.list_w .u_btn_w {
		padding-top: 20px;
		margin-top: 20px;
	}
	.list_w .u_btn_w button {
		width: 50%;
	}
	.other_list h2 {
		padding: 0 13%;
	}
	.list_w .list_fields_w .imgarea {
		position: absolute;
		width: 35%;
		top: -60px;
		right: -13px;
	}
}

.other_list_w {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 50px;
}
.feed_item {
  background: #fff;
  border: 2px solid var(--color-main);
  border-radius: 14px;
  padding: 14px 16px;
}
.feed_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.feed_tags li {
  list-style: none;
  background: var(--color-bg-or);
  border: 1.5px dashed #c9b79a;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 1.3rem;
}
.feed_time {
  display: block;
  margin-top: 8px;
  font-size: 1.1rem;
  color: #b4a98f;
}
.feed_empty {
  text-align: center;
  color: #b4a98f;
  padding: 20px 0;
}

footer{
	text-align: center;
	font-size: 1.4rem;
	padding-bottom: 40px;
}
footer .copy{
	margin-top: 15px;
}


.legal {
      max-width: 720px;
      margin: 0 auto;
      padding: 56px 22px 96px;
      box-sizing: border-box;
    }
    .legal .head {
      text-align: center;
      margin-bottom: 36px;
    }
    .legal .so {
      font-family: "Slackside One", cursive;
      font-size: 15px;
      color: var(--color-sub);
      display: block;
      margin-bottom: 6px;
    }
    .legal h1 {
      font-size: 28px;
      font-weight: 800;
      margin: 0;
    }
    .legal .lead {
      background: #fff;
      border: 2px solid var(--color-main);
      border-radius: 14px;
      padding: 18px 18px;
      font-size: 14px;
      margin-bottom: 36px;
    }
    .legal h2 {
      font-size: 17px;
      font-weight: 700;
      margin: 34px 0 10px;
      padding-bottom: 7px;
      border-bottom: 2px dashed #e7d4bc;
    }
    .legal p { font-size: 14px; margin: 0 0 10px; }
    .legal ul, .legal ol { margin: 8px 0 14px; padding-left: 1.5em; }
    .legal li { font-size: 14px; margin-bottom: 5px; }
    .legal ul li { list-style: disc; }
    .legal ol li { list-style: decimal; }
    .legal .date {
      margin-top: 36px;
      font-size: 13px;
      color: #9c8c78;
      text-align: right;
    }
    .legal .back {
      text-align: center;
      margin-top: 48px;
    }
    .legal .back a {
      display: inline-block;
      padding: 13px 30px;
      border: 2px solid var(--color-main);
      border-radius: 999px;
      background: #fff;
      color: var(--color-main);
      box-shadow: 0 4px 0 #e7d4bc;
      font-weight: 700;
      font-size: 14px;
      text-decoration: none;
      transition: transform .1s, box-shadow .1s, opacity .2s;
    }
    .legal .back a:hover { opacity: .85; }
    .legal .back a:active { transform: translateY(3px); box-shadow: 0 1px 0 #e7d4bc; }