@charset "utf-8";

body { background:#fff;}

#craft2603 {
background-image: url("../img/craftmenu/2603/bg.webp");
}

#craft2603 .container {
  max-width:550px;
  background-color:#ffffff;
}

#craft2603 .first-area {
  padding-top:600px;
  background-image: url("../img/craftmenu/2603/photo01.webp");
  background-size: 100% auto;
  background-repeat: no-repeat;
}
@media screen and (max-width:460px) {
	#craft2603 .first-area { padding-top:460px;}
}

#craft2603 .dolce-area {
  padding-top:700px;
  background-color:#d2927f;
  background-image: url("../img/craftmenu/2603/dolce01.webp");
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding-bottom:50px;
}

@media screen and (max-width:460px) {
	#craft2603 .dolce-area { padding-top:540px;}
}


#craft2603 .row1 { width:100%; padding:0; margin:0;}
#craft2603 img { width:100%;}
.craft2603 main { padding-bottom:0;}

#craft2603 h2 { 
	text-align:left;
	font-size: 18px;
	padding: 0.5em 1em;
	background-color:#db8973;
	margin: 0px 5%;
	letter-spacing: 2px;
	font-family: "monopin-j", "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Roboto, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
	font-weight: 400;
	display:inline-block;
	color:#fff;
	border-radius: 999px;
}

#craft2603 .dolce-area h2 {
	color:#db8973;
	background-color:#fff;
	letter-spacing: 1px;
}

.parent {
	width: 100%;
	text-align: center;
}

#craft2603 h3 {
	text-align:center;
	font-size: 14px;
	padding: 0.3em 1.5em;
	background-color:#db8973;
	margin: 0 5%;
	letter-spacing: 2px;
	font-family: "monopin-j", "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Roboto, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
	font-weight: 400;
	display:inline-block;
	color:#fff;
	border-radius: 999px;
}

#craft2603 h4 { 
	text-align:center;
	font-size: 32px;
	padding: 0.3em 8% 0.5em 8%;
	margin: 0;
	font-family: "monopin-j", "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Roboto, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
	font-weight: 400;
	display:block;
	color:#333;
}
@media screen and (max-width:740px) {
	#craft2603 h4 { font-size: 26px; padding: 0.2em 8% 0.5em 8%;}
}

#craft2603 h5 { 
	text-align:center;
	font-size: 22px;
	padding: 10px 8% 50px 8%;
	margin: 0;
	font-family: "monopin-j", "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Roboto, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
	font-weight: 400;
	display:block;
}
@media screen and (max-width:740px) {
	#craft2603 h5 { font-size: 16px; padding: 10px 8% 30px 8%;}
}

#craft2603 h6 { 
	text-align:center;
	font-size: 24px;
	padding: 50px 8% 20px 8%;
	margin: 0;
	letter-spacing: 2px;
	font-family: "monopin-j", "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Roboto, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
	font-weight: 400;
	display:block;
}
@media screen and (max-width:740px) {
	#craft2603 h6 { font-size: 20px;}
}


#craft2603 p { 
	text-align:left;
	font-size: 16px;
	line-height: 2em;
	padding: 1em 8%;
	margin: 0;
	font-family: "monopin-j", "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", Roboto, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
	display:block;
}
#craft2603 p.menu-title {
	font-size: 20px;
	padding: 1em 8% 0 8%;
	margin:0;
	line-height: 1.4em;
	color:#fff;
}
#craft2603 p.price {
	font-size: 16px;
	padding: 0em 8% 0 8%;
	margin:0;
	color:#fff;
}


@media screen and (max-width:740px) {
	#craft2603 p { font-size: 14px;}
	#craft2603 p.menu-title {font-size: 16px;}
	#craft2603 p.price {font-size: 14px;}
}





#craft2603 .about {
	margin: 3em 8% 1em 8%;
	background-color:#1b6e88;
	padding: 1.5em 0;
	display:block;
	border-radius: 10px;
}

#craft2603 .about p { padding: 2em 8% 1em 8%;}

#craft2603 img.brand-core {padding:0 8%;}

#craft2603 .row1 {
color:#333;
background-color:#ffffff;
}



#craft2603 .row1 h3 { 
	text-align:center;
	font-size: 18px;
	padding: 0 8% 70px 8%;
	text-shadow: none;
	color: #b78c51;
}
@media screen and (max-width:740px) {
	#craft2603 .row1 h3 { font-size: 12px; padding: 0 8% 40px 8%;}
}


#craft2603 .row3 {
color:#ffffff;
background-color:#315c46;
padding-bottom:100px;
}

#craft2603 .row3 h2 { 
	font-size: 32px;
	padding: 0px 8% 0.5em 8%;
	letter-spacing: 1px;
	text-shadow: none;
	color: #ffffff;
}
@media screen and (max-width:740px) {
	#craft2603 .row3 h2 { font-size: 26px; padding: 0px 8% 0.5em 8%;}
}

#craft2603 .row3 h3 { 
	text-align:center;
	font-size: 20px;
	padding: 0 8% 70px 8%;
	text-shadow: none;
	color: #ffffff;
}
@media screen and (max-width:740px) {
	#craft2603 .row3 h3 { font-size: 12px; padding: 0 8% 40px 8%;}
}

#craft2603 .row3 h6 { 
	text-align:left;
	font-size: 20px;
	padding:0 0 0 1em;
	margin: 2em 8% 1em 8%;
	text-shadow: none;
	color: #e3cb89;
	border-left:5px solid #e3cb89;
}
@media screen and (max-width:740px) {
	#craft2603 .row3 h6 { font-size: 18px; padding:0 0 0 1em;}
}

#craft2603 .row3 dl {
	padding:1em 8%;
}

#craft2603 .row3 dt {
	font-size: 20px;
	padding:0.8em 0 0em 0;
	margin:0;
	float:left;
	display:block;
	width:10%;
}
@media screen and (max-width:740px) {
	#craft2603 .row3 dt { font-size: 18px;}
}

#craft2603 .row3 dd {
	font-size: 16px;
	padding:1em 0;
	margin:0;
	float:left;
	display:block;
	width:90%;
}

@media screen and (max-width:740px) {
	#craft2603 .row3 dd { font-size: 14px;}
}

#craft2603 .row3 h2.top30 { clear:both; padding-top: 2.5em;}

#craft2603 .purpose {
	margin: 3em 8% 1em 8%;
	background-color:#497e63;
	padding: 1.5em 0;
	display:block;
	border-radius: 10px;
}

#craft2603 .clear {
	clear:both;
}

#craft2603 .purpose p { padding: 2em 8% 1em 8%;}

#craft2603 .youtube {
  width: 100%;
  margin:1em auto;
  aspect-ratio: 16 / 9;
}
#craft2603 .youtube iframe {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 741px) {
    .craft2603 #footer {
        margin-top: 0;
    }
}













.vstack{
  display: grid;
  gap: var(--gap);
}

/* 4:3固定の見た目 */
.v{
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  background: #000;
  border-radius: var(--radius);
}

/* figureの余白を消す */
.vitem{ margin: 0; }

/* 省電力・通信節約モード等で止まっても破綻しない */
.v::poster{
  object-fit: cover;
}


/* フレーム */
.vframe{
  width:100%;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  border-radius:0; /* 角丸なし */
}

/* 上下を斜めにする（横方向の傾き） */
.vframe.skew{
  /*
    左上と右上をずらすことで
    上辺と下辺が平行な斜め形状になる
  */
  clip-path: polygon(
    0% 13%,     /* 左上 */
    100% 0%,   /* 右上 */
    100% 87%,  /* 右下 */
    0% 100%    /* 左下 */
  );
}

/* 動画 */
.vframe .v{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#000;
}